/* ==============================================
   RUNNER 3D - pantalla completa (cascara.php) v11
   ============================================== */
html.rr-cascara,
html.rr-cascara body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d2236;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

/* el fondo del tema, agrandado y desenfocado, en las franjas de los costados */
html.rr-cascara body::before {
    content: '';
    position: fixed;
    inset: -40px;
    background: var(--rr-fondo, none) center 62% / cover no-repeat, var(--rr-cielo, #2c6fb8);
    filter: blur(18px) saturate(1.1) brightness(0.7);
    transition: opacity .6s;
}

#rr-juego {
    position: fixed;   /* fixed: no ensancha la página en el celular (el iframe mide 480 px antes de escalar) */
    left: 0;
    top: 0;
    width: 480px;
    height: 600px;
    border: 0;
    display: block;
    transform-origin: 0 0;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* donde el juego cuelga su protector de pantalla (sliders) */
#div-para-centrado-full-screen {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}
#div-para-centrado-full-screen > * { pointer-events: auto; }

.rr-btn-pantalla {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1000;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 12px;
    background: rgba(10, 30, 50, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.rr-btn-pantalla:hover { background: rgba(10, 30, 50, 0.75); }
.rr-btn-pantalla:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
