/* Pollitos En Fuga — estilos
   Generado por slot-factory. Paleta y tipografia parametrizadas via
   __COLOR_*__ / __FONT_*__ — el resto (layout, HUD, modales) es identico
   entre juegos: cambiar el tema visual es solo cambiar estas variables. */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Anton&family=Barlow:wght@500;600&display=swap');
/* Tipografia del HUD — adaptativa por tema via font_selector.py */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Anton&family=Barlow:wght@500;600&display=swap');

:root {
    --is-black: #0a0704;
    --is-black-2: #14100c;
    --is-black2: var(--is-black-2); /* alias -- varias botoneras usan este nombre sin guion, ver lib/button_styles.py */
    --is-gold: #d4af37;
    --is-gold-light: #f2d675;
    --is-red: #6e0f0f;
    --is-red-light: #8a1c1c;
    --is-cream: #ece2c8;
    --is-font-display: 'Luckiest Guy', 'Impact', cursive;
    --is-font-body: 'Barlow', Arial, sans-serif;
    /* Fuentes HUD — adaptativas por tema (font_selector.py) */
    --is-font-hud: 'Anton', 'Arial Narrow', sans-serif;
    --is-font-impact: 'Anton', 'Arial Narrow', sans-serif;
    --is-font-title: 'Luckiest Guy', 'Impact', cursive;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--is-black);
    overflow: hidden;
    font-family: var(--is-font-body);
    color: var(--is-cream);
    user-select: none;
}

/* ==================== LOADING SCREEN ==================== */
#is-loading {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #241a10 0%, #0a0704 75%);
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease;
}
#is-loading.is-fade-out { opacity: 0; }

#is-loading-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.55;
}

#is-loading-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

#is-loading-logo {
    max-width: min(520px, 70vw);
    max-height: 30vh;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.45));
}

#is-loading-title-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.is-title-main {
    font-family: var(--is-font-display);
    font-weight: 900;
    font-size: 52px;
    letter-spacing: 6px;
    color: var(--is-gold);
    text-shadow: 0 0 18px rgba(212,175,55,0.6), 0 2px 0 #000;
}
.is-title-sub {
    font-family: var(--is-font-display);
    font-size: 16px;
    letter-spacing: 4px;
    color: var(--is-red-light);
    text-transform: uppercase;
}

#is-loading-bar-wrap {
    width: 320px;
    max-width: 60vw;
    height: 10px;
    border: 1px solid var(--is-gold);
    border-radius: 6px;
    background: rgba(0,0,0,0.5);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(212,175,55,0.3) inset;
}
#is-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--is-red-light), var(--is-gold));
    transition: width 0.15s ease;
}

#is-loading-tip {
    font-family: var(--is-font-display);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--is-gold-light);
    opacity: 0.8;
    text-transform: uppercase;
}

#is-provider-badge {
    position: absolute;
    bottom: 18px;
    right: 22px;
    max-width: 160px;
    opacity: 0.9;
    z-index: 2;
}

/* ==================== GAME ROOT ==================== */
/* Layout tipo Pragmatic (2026-07-13, calco de Day of Dead en vivo): el
   canvas cubre el 100% del viewport y la barra HUD FLOTA transparente
   encima (position absolute), en vez de ser una barra solida que le roba
   altura al juego. El fondo artistico se ve detras de la barra, igual que
   en los juegos reales. */
/* Caja de juego con PROPORCION ACOTADA (calco del comportamiento real:
   la marca de referencia NO estira el juego a cualquier pantalla -- si la
   ventana es mas panoramica que ~2.05:1 o mas cuadrada que ~1.35:1, el
   juego mantiene su proporcion y quedan barras negras a los costados /
   arriba-abajo, para que el arte nunca se deforme ni se recorte de mas.
   Dentro de ese rango, ocupa el 100% de la pantalla). Todo (canvas, logo,
   HUD, cartel lateral) vive DENTRO de esta caja. */
#is-game-root {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 2026-07-25: 100vh Y 100dvh dieron el MISMO resultado roto en el
       celular real del usuario (botonera invisible, HUD cortado) -- se
       abandonan los dos y se pasa a --rvh, una custom property que un
       script en index.html calcula desde window.innerHeight (el alto
       REAL, sin las ambiguedades de vh/dvh en un iframe). Fallback 1vh
       por si el script no corrio todavia (primer frame). Esto aplica
       SIEMPRE (desktop y mobile), es una mejora sin contras.
       2026-07-25 (2): el tope de aspecto (1.83) SI se deja como estaba
       para desktop -- el usuario aviso que en computadora el juego
       siempre se vio con barras negras a los costados (por diseño) y
       quiere que eso NO cambie. El tope mas ancho (2.35, para que no
       queden barras en celulares en landscape, que rondan ~2.1:1) se
       aplica SOLO en dispositivos touch via @media (pointer: coarse) --
       ver el bloque justo abajo -- nunca en desktop (mouse = pointer:fine). */
    width: min(100vw, calc(var(--rvh, 1vh) * 100 * 1.83));
    height: min(calc(var(--rvh, 1vh) * 100), calc(100vw / 1.35));
    background: var(--is-black);
    overflow: hidden;
}
/* Tope de aspecto mas ancho SOLO en touch (celulares/tablets) -- ver
   comentario arriba. pointer:coarse es la forma correcta de distinguir
   "mobile" de "desktop" para esto (a diferencia de un umbral de ancho de
   pantalla, sigue funcionando bien aunque el usuario achique la ventana
   del navegador en desktop). */
@media (pointer: coarse) {
    #is-game-root {
        width: min(100vw, calc(var(--rvh, 1vh) * 100 * 2.35));
    }
}

#is-stage-wrap {
    position: absolute;
    inset: 0;
}

#is-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==================== LOGO DEL JUEGO (in-game, arriba del grid) ========= */
/* Franja superior reservada por engine._layout (SCENE.topFrac) -- el logo
   vive ahi, centrado, solapando apenas el marco como en el juego real. */
#is-game-logo-wrap {
    /* 2026-07-24 (reporte del usuario, Pollitos Fugitivos: el logo quedaba
       flotando SUELTO encima de los rodillos, sin nada que lo contenga --
       referencia pedida: el cartel de "DAY OF DEAD" de Pragmatic, que es un
       PANEL solido con borde propio integrado al marco superior, nunca un
       texto flotando sin fondo. Se le agrega un panel oscuro translucido +
       borde dorado fino para que quede "anclado" al marco en vez de
       superpuesto sueltamente a la escena, y se acota la altura para que
       nunca invada la fila superior del grid (topFrac 0.115 de SCENE en
       engine.js.tmpl). */
    /* 2026-07-25: top/height/max-width pasados de vh/vw a % -- estaban
       calculados contra el VIEWPORT completo, no contra #is-game-root (su
       contenedor real), asi que en pantallas donde la caja del juego queda
       mas chica que el viewport (letterboxing) el logo se salia del marco
       (reporte del usuario con captura, se veia "cortado" en los bordes).
       2026-07-25 (2): el usuario pidio sacar el panel oscuro/sombreado de
       atras del titulo -- vuelve a ser solo texto, sin fondo ni borde.
       max-width subido a 90% (ya no hay panel que lo acote visualmente) y
       white-space normal (antes nowrap) como red de seguridad: si el
       titulo no entra en una linea en pantallas angostas, ahora hace wrap
       a 2 lineas en vez de desbordarse fuera de la pantalla. */
    position: absolute;
    top: 0.8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11%;
    max-width: 90%;
    padding: 0 12px;
}
#is-game-logo {
    max-height: 82%;
    max-width: 92%;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65));
}
/* Titulo tipografico premium: usa la fuente display DEL TEMA (cada juego
   conserva su personalidad, como los logos reales de la marca de
   referencia) pero con tratamiento fijo de estudio: oro biselado con brillo
   superior, borde oscuro grueso, sombra de profundidad y glow calido. */
#is-game-logo-text {
    /* Titulo IMPACT (2026-07-14, pedido del usuario): letras gruesas de
       slot como el logo de la marca de referencia, no serif elegante. */
    font-family: var(--is-font-title);
    font-weight: 400;
    /* 2026-07-25: antes solo consideraba el ALTO (6.5vh) -- en portrait el
       alto sobra pero el ANCHO es chico, asi que el titulo se calculaba
       gigante (~55px) y se salia de la pantalla en una sola linea sin
       cortar (nowrap). Ahora toma el minimo entre una version basada en
       alto y una basada en ancho, para achicarse en pantallas angostas. */
    font-size: clamp(20px, min(6.5vh, 8vw), 64px);
    letter-spacing: 2px;
    white-space: normal;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fffbe8 0%, var(--is-gold-light) 22%, var(--is-gold) 52%, #6d4c0a 78%, var(--is-gold-light) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 2.5px rgba(35,18,0,0.92);
    filter: drop-shadow(0 4px 0 rgba(20,10,0,0.85)) drop-shadow(0 6px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(212,175,55,0.45));
}

/* ==================== CARTEL LATERAL DE BONUS BUY ==================== */
/* Calco del panel "BUY FREE SPINS" fijo al costado izquierdo del grid de
   los juegos Pragmatic reales. Click = abre el menu de compra de bono. */
#is-side-bonus {
    position: absolute;
    left: 1.6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: clamp(110px, 10%, 175px);
    padding: 14px 10px;
    background: linear-gradient(180deg, rgba(30,18,8,0.92), rgba(10,7,4,0.92));
    border: 2px solid var(--is-gold);
    border-radius: 12px;
    color: var(--is-gold-light);
    font-family: var(--is-font-display);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    box-shadow: 0 0 18px rgba(0,0,0,0.55), 0 0 10px rgba(212,175,55,0.25) inset;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#is-side-bonus:hover {
    box-shadow: 0 0 22px rgba(212,175,55,0.5);
    transform: translateY(-50%) scale(1.03);
}
#is-side-bonus-title {
    font-size: clamp(13px, 1.3vw, 18px);
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1.25;
}
#is-side-bonus-cost {
    font-size: clamp(11px, 1vw, 14px);
    color: var(--is-cream);
    font-weight: 700;
}
@media (max-width: 900px) {
    #is-side-bonus { display: none !important; }
}

/* ==================== HUD ==================== */
#is-hud-root {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.is-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #1a120a 0%, #0a0704 100%);
    border-top: 2px solid var(--is-gold);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.6);
    min-height: 64px;
    flex-wrap: wrap;
}

.is-hud-left, .is-hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.is-hud-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.is-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 12px;
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    min-width: 100px;
}
.is-stat-label {
    font-family: var(--is-font-display);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--is-gold);
    text-transform: uppercase;
    opacity: 0.85;
}
.is-stat-value {
    font-family: var(--is-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--is-cream);
}
.is-stat-value.is-win { color: var(--is-gold-light); }

/* Banner de FREE SPINS: FLOTA por ENCIMA de la barra HUD, fuera del flujo.
   Antes era un hermano mas del texto de ganancia dentro del centro del HUD,
   asi que al aparecer le robaba el lugar y tapaba lo que ganabas en ese giro.
   Con position:absolute el centro del HUD queda libre para la ganancia y el
   banner se lee entero, mas grande, sobre el borde inferior de los rodillos. */
.is-hud-center, .is-hud-clone-center { position: relative; }
.is-fs-banner {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%);
    z-index: 6;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 26px;
    background: linear-gradient(90deg, rgba(110,15,15,0.92), rgba(212,175,55,0.30), rgba(110,15,15,0.92));
    border: 2px solid var(--is-gold);
    border-radius: 10px;
    box-shadow: 0 0 22px rgba(212,175,55,0.45), 0 6px 18px rgba(0,0,0,0.55);
}
/* separador vertical entre el bloque multiplicador y el de ganancia */
.is-fs-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(212,175,55,0.55);
}
.is-fs-win-label {
    font-family: var(--is-font-display);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--is-gold-light);
    text-transform: uppercase;
}
/* La ganancia acumulada es el numero MAS grande del banner a proposito:
   es lo que el jugador sigue giro a giro durante el bono. */
.is-fs-win {
    font-family: var(--is-font-impact);
    font-size: 30px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 14px rgba(255,215,0,0.95), 0 2px 0 rgba(60,30,0,0.8);
}
.is-fswin-bump { animation: is-fswin-pop 0.45s ease; }
@keyframes is-fswin-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); text-shadow: 0 0 22px #ffe680, 0 0 8px #fff; }
    100% { transform: scale(1); }
}
.is-fs-label, .is-fs-mult-label {
    font-family: var(--is-font-display);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--is-gold-light);
    text-transform: uppercase;
}
.is-mult-bump { animation: is-mult-pop 0.5s ease; }
@keyframes is-mult-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.6); text-shadow: 0 0 18px #ffd75e, 0 0 6px #fff; }
    100% { transform: scale(1); }
}
.is-fs-count, .is-fs-mult {
    font-family: var(--is-font-display);
    font-weight: 900;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 0 10px rgba(212,175,55,0.8);
}

.is-bet-control {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    padding: 4px 8px;
}
.is-bet-value {
    min-width: 70px;
    text-align: center;
    font-family: var(--is-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--is-cream);
}

/* Layout de HUD "pragmatic_compact" (ver lib/hud_layouts.py) -- CREDIT/BET
   apilados, WIN grande al centro con el detalle de que linea pago, y un
   stepper de apuesta circular con el autoplay en el medio. Estas clases
   estan siempre presentes en la hoja de estilos; solo se usan si
   ui.js.tmpl arma el HUD con _compactHtml() en vez de _classicHtml(). */
.is-hud-compact {
    justify-content: space-between;
    gap: 14px;
}
.is-hud-compact-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.is-hud-compact-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.is-hud-compact-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.is-hud-compact-label {
    font-family: var(--is-font-display);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--is-gold);
    text-transform: uppercase;
}
.is-hud-compact-value {
    font-family: var(--is-font-display);
    font-weight: 900;
    font-size: 15px;
    color: var(--is-cream);
}
.is-hud-compact-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.is-hud-compact-win {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.is-hud-compact-win-label {
    font-family: var(--is-font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--is-gold);
}
.is-hud-compact-win-value {
    font-family: var(--is-font-display);
    font-weight: 900;
    font-size: 30px;
    color: #fff;
    text-shadow: 0 0 10px rgba(212,175,55,0.6);
}
.is-hud-compact-linewin {
    font-family: var(--is-font-display);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--is-gold-light);
    min-height: 16px;
}
/* ============ CONTORNO NEGRO EN TEXTOS DEL HUD (2026-07-26) ============
   Pedido del usuario: los numeros/letras de saldo, apuesta y mensajes del
   HUD se perdian contra el fondo fotografico ocupado detras -- un
   text-shadow con blur (lo que ya tenian) no alcanza para eso, hace falta
   un contorno nitido real. -webkit-text-stroke lo dibuja; paint-order lo
   manda detras del relleno para que no le coma grosor a la letra. Cubre
   los 3 layouts de HUD posibles (classic/compact/clone -- ver HUD_LAYOUT
   en ui.js) para que quede consistente sin importar cual use el juego, y
   el banner de FREE SPINS. (.is-hud-clone-label/-value/-msg ya tienen el
   suyo puesto arriba, en su propia regla.) */
.is-stat-label, .is-stat-value,
.is-hud-compact-label, .is-hud-compact-value,
.is-hud-compact-win-label, .is-hud-compact-win-value, .is-hud-compact-linewin,
.is-fs-label, .is-fs-mult-label, .is-fs-win, .is-fs-count, .is-fs-mult,
.is-bet-value {
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.9);
    paint-order: stroke fill;
}
.is-hud-compact-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.is-btn-round { border-radius: 50% !important; }
.is-btn-step {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
}
.is-btn-autoplay-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.is-btn-autoplay-icon { font-size: 20px; line-height: 1; }
.is-btn-autoplay-label { font-size: 8.5px; letter-spacing: 1px; }

/* Layout de HUD "pragmatic_clone" (ver lib/hud_layouts.py) -- calco
   estructural literal de la barra inferior de un juego Pragmatic Play real
   (pedido explicito del usuario tras comparar con una captura real): SIN
   cajas/fondos por elemento -- los iconos flotan directo sobre la barra
   plana, CREDIT/BET quedan como texto simple apilado (sin borde), un
   mensaje de estado al centro, y -/SPIN/+ circulares a la derecha. Turbo,
   autoplay, tabla de pagos y compra de bono quedan detras de un unico
   boton "..." (mismo patron que los juegos reales) para no perder ninguna
   funcion. Estas clases estan siempre presentes; solo se usan si
   ui.js.tmpl arma el HUD con _cloneHtml() en vez de _classicHtml()/
   _compactHtml(). */
/* Barra HUD clone: identidad de marca FIJA (references/ESTILO_MARCA.md,
   calco 1:1 de la barra de Day of Dead en vivo, 2026-07-13): fondo
   degradado transparente (el arte se ve detras), iconos blancos flotando,
   CREDIT/BET en condensada con labels dorados y valores blancos, mensaje
   central blanco grueso, y a la derecha -/+ como aros blancos finos con el
   SPIN blanco GRANDE sobresaliendo de la barra (flechas circulares
   blancas, SIN corona ni dorado) y la pildora AUTOPLAY pisando su borde
   inferior. */
.is-hud-clone {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.82) 100%);
    border-top: none;
    box-shadow: none;
    padding: 10px 22px 12px;
    min-height: 86px;
    flex-wrap: nowrap;
}
.is-hud-clone-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.is-hud-clone-iconbtn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    transition: opacity 0.15s ease;
}
.is-hud-clone-iconbtn:hover { opacity: 1; }
.is-hud-clone-iconbtn.is-active { opacity: 1; }
/* Icono "i" de info/reglas: aro fino blanco, como el real. */
.is-hud-clone-iconbtn.is-info {
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    width: 30px;
    height: 30px;
}
.is-hud-clone-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 8px;
}
.is-hud-clone-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.is-hud-clone-label {
    font-family: var(--is-font-hud);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--is-gold-light);
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    /* 2026-07-26: contorno negro fino (pedido del usuario) -- el
       text-shadow de arriba es un blur suave, no un borde nitido; con
       fondos fotograficos ocupados atras, las letras/numeros del HUD se
       perdian. -webkit-text-stroke dibuja el trazo real. paint-order lo
       manda DETRAS del relleno para que no le coma grosor a la letra. */
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.9);
    paint-order: stroke fill;
}
.is-hud-clone-value {
    font-family: var(--is-font-hud);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.4px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    -webkit-text-stroke: 0.7px rgba(0,0,0,0.9);
    paint-order: stroke fill;
}
.is-hud-clone-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    min-width: 0;
}
.is-hud-clone-msg {
    font-family: var(--is-font-hud);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.5);
    /* 2026-07-26: contorno negro fino (pedido del usuario, referencia
       "PULSA ESPACIO PARA GIRAR" con borde marcado) -- mismo motivo que
       .is-hud-clone-label/-value de arriba. */
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.95);
    paint-order: stroke fill;
}
/* Monto de ganancia: dorado "chunky" con brillo, tipografia impact --
   mismo tratamiento que los textos de win del juego real. */
.is-hud-clone-msg.is-win-active {
    font-family: var(--is-font-impact);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, #fff8d8 0%, var(--is-gold-light) 30%, var(--is-gold) 62%, #8a6508 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(60,30,0,0.55);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
    text-shadow: none;
}
.is-hud-clone-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* -/+ : aros blancos finos transparentes, glifo fino, como el real. */
.is-btn-flat-round {
    background: transparent;
    border: 3px solid rgba(255,255,255,0.85);
    color: rgba(255,255,255,0.95);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.is-btn-flat-round:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
/* Columna spin+autoplay: el spin grande sobresale de la barra hacia
   arriba y la pildora AUTOPLAY pisa su borde inferior, como el real. */
.is-hud-clone-spinstack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: -26px;
}
/* SPIN: circulo grande BLANCO monocromo (aro blanco grueso + interior
   oscuro translucido + flechas circulares blancas) -- SIN dorado, SIN
   corona, identico al de la marca de referencia. */
.is-btn-spin-clone {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(70,70,70,0.5), rgba(0,0,0,0.72) 75%);
    border: 5px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.7), inset 0 0 0 2px rgba(255,255,255,0.16), inset 0 -9px 14px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.is-btn-spin-clone:hover { box-shadow: 0 0 20px rgba(255,255,255,0.35); transform: scale(1.04); }
.is-btn-spin-clone.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Si slot-factory genero un icono tematico (assets/spin_icon.png) se
   muestra ese; si no, las flechas circulares SVG blancas de fabrica. */
.is-btn-spin-clone .is-spin-icon {
    display: none;
    position: absolute;
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
    border-radius: 50%;
}
.is-btn-spin-clone.has-icon .is-spin-icon { display: block; }
.is-btn-spin-clone.has-icon .is-spin-fallback { display: none; }
.is-spin-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.is-spin-fallback svg {
    width: 72%;
    height: 72%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
}
.is-btn-autoplay-pill {
    margin-top: -16px;
    z-index: 1;
    background: rgba(0,0,0,0.88);
    border: 2px solid #fff;
    color: #fff;
    border-radius: 999px;
    padding: 4px 16px;
    font-family: var(--is-font-hud);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
}
.is-btn-autoplay-pill:hover { background: rgba(30,30,30,0.95); }
.is-hud-clone-menu-btn {
    background: none;
    border: none;
    color: var(--is-cream);
    font-size: 17px;
    letter-spacing: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
}
.is-hud-clone-menu-btn:hover { opacity: 1; }
.is-hud-clone-menu-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.is-hud-clone-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--is-cream);
    font-family: var(--is-font-body);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}
.is-hud-clone-menu-item:hover { background: rgba(212,175,55,0.12); }

/* ==================== GAME RULES paginado (calco Pragmatic, reporte
   del usuario 2026-07-12 con capturas de un juego real) ==================== */
.is-rules-page-title {
    font-family: var(--is-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: var(--is-gold-light);
    text-transform: uppercase;
    text-align: center;
    margin: 2px 0 16px;
}
.is-rules-feature-body {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(236,226,200,0.85);
    text-align: center;
}
.is-pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.is-pt-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.is-pt-card .is-pt-icon { width: 44px; height: 44px; }
.is-pt-card-name {
    font-size: 11px;
    color: var(--is-cream);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.is-pt-card-vals {
    font-size: 11px;
    color: rgba(236,226,200,0.7);
    line-height: 1.5;
}
.is-rules-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 16px;
    border-top: 1px solid rgba(212,175,55,0.35);
}
.is-rules-nav-btn {
    background: none;
    border: none;
    color: var(--is-gold);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 12px;
    line-height: 1;
}
.is-rules-nav-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.is-rules-page-indicator {
    font-size: 11px;
    color: rgba(236,226,200,0.55);
    font-family: var(--is-font-body);
    letter-spacing: 0.5px;
}

/* Botonera -- CSS inyectado por lib/button_styles.py segun el
   "button_style" elegido para este juego (10 skins disponibles, ver
   lib/scaffolder.py::build_subs -> /* Botonera: estilo 'Metalico / bisel 3D' (referencia: Pragmatic Play) */
.is-btn {
    font-family: var(--is-font-display);
    background: linear-gradient(180deg, #362413 0%, #1c130a 55%, #120c07 100%);
    border: 1px solid var(--is-gold);
    color: var(--is-gold-light);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    letter-spacing: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -3px 6px rgba(0,0,0,0.45),
        0 2px 4px rgba(0,0,0,0.4);
    transition: all 0.15s ease;
}
.is-btn:hover {
    background: linear-gradient(180deg, #47301a, #241a0e 55%, #170f09 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -3px 6px rgba(0,0,0,0.45),
        0 0 12px rgba(212,175,55,0.45);
}
.is-btn:active { transform: scale(0.96); }
.is-btn.is-disabled, .is-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.is-btn.is-active {
    background: linear-gradient(180deg, var(--is-red-light), var(--is-red));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px rgba(138,28,28,0.7);
}
.is-btn-icon {
    width: 42px; height: 42px; padding: 0; display: flex; align-items: center;
    justify-content: center; font-size: 18px; border-radius: 50%;
}
.is-btn-small {
    width: 28px; height: 28px; padding: 0; display: flex; align-items: center;
    justify-content: center; font-size: 16px; font-weight: 900; border-radius: 4px;
}
.is-btn-spin {
    position: relative; width: 82px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, var(--is-gold-light), var(--is-red-light) 65%, #2a0606 100%);
    border: 3px solid var(--is-gold); color: #fff; font-weight: 900; font-size: 15px;
    letter-spacing: 1px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -6px 10px rgba(0,0,0,0.35),
        0 0 20px rgba(212,175,55,0.5);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.is-btn-spin:hover {
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.5),
        inset 0 -6px 10px rgba(0,0,0,0.35),
        0 0 28px rgba(212,175,55,0.8);
}

/* -- mismo estilo, aplicado tambien a las clases del HUD "Calco Pragmatic"
   (is-hud-clone-iconbtn / is-btn-flat-round / is-btn-spin-clone /
   is-btn-autoplay-pill) -- ver _clone_css() en lib/button_styles.py */
.is-hud-clone-iconbtn { color: var(--is-gold-light); }
.is-hud-clone-iconbtn.is-info { border-color: var(--is-gold); color: var(--is-gold-light); }
.is-btn-flat-round { background: transparent; border-color: var(--is-gold); color: var(--is-gold-light); }
.is-btn-flat-round:hover { border-color: var(--is-gold-light); background: rgba(255,255,255,0.08); }
.is-btn-spin-clone { background: radial-gradient(circle at 35% 28%, var(--is-gold-light), var(--is-red-light) 65%, #2a0606 100%); border-color: var(--is-gold); color: #fff; }
.is-btn-spin-clone:hover { box-shadow: 0 0 22px rgba(212,175,55,0.6); }
.is-btn-autoplay-pill { background: linear-gradient(180deg, #362413, #1c130a); border-color: var(--is-gold); color: var(--is-gold-light); }
). */
/* Botonera: estilo 'Metalico / bisel 3D' (referencia: Pragmatic Play) */
.is-btn {
    font-family: var(--is-font-display);
    background: linear-gradient(180deg, #362413 0%, #1c130a 55%, #120c07 100%);
    border: 1px solid var(--is-gold);
    color: var(--is-gold-light);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    letter-spacing: 1px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -3px 6px rgba(0,0,0,0.45),
        0 2px 4px rgba(0,0,0,0.4);
    transition: all 0.15s ease;
}
.is-btn:hover {
    background: linear-gradient(180deg, #47301a, #241a0e 55%, #170f09 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -3px 6px rgba(0,0,0,0.45),
        0 0 12px rgba(212,175,55,0.45);
}
.is-btn:active { transform: scale(0.96); }
.is-btn.is-disabled, .is-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.is-btn.is-active {
    background: linear-gradient(180deg, var(--is-red-light), var(--is-red));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 12px rgba(138,28,28,0.7);
}
.is-btn-icon {
    width: 42px; height: 42px; padding: 0; display: flex; align-items: center;
    justify-content: center; font-size: 18px; border-radius: 50%;
}
.is-btn-small {
    width: 28px; height: 28px; padding: 0; display: flex; align-items: center;
    justify-content: center; font-size: 16px; font-weight: 900; border-radius: 4px;
}
.is-btn-spin {
    position: relative; width: 82px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, var(--is-gold-light), var(--is-red-light) 65%, #2a0606 100%);
    border: 3px solid var(--is-gold); color: #fff; font-weight: 900; font-size: 15px;
    letter-spacing: 1px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -6px 10px rgba(0,0,0,0.35),
        0 0 20px rgba(212,175,55,0.5);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.is-btn-spin:hover {
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.5),
        inset 0 -6px 10px rgba(0,0,0,0.35),
        0 0 28px rgba(212,175,55,0.8);
}

/* -- mismo estilo, aplicado tambien a las clases del HUD "Calco Pragmatic"
   (is-hud-clone-iconbtn / is-btn-flat-round / is-btn-spin-clone /
   is-btn-autoplay-pill) -- ver _clone_css() en lib/button_styles.py */
.is-hud-clone-iconbtn { color: var(--is-gold-light); }
.is-hud-clone-iconbtn.is-info { border-color: var(--is-gold); color: var(--is-gold-light); }
.is-btn-flat-round { background: transparent; border-color: var(--is-gold); color: var(--is-gold-light); }
.is-btn-flat-round:hover { border-color: var(--is-gold-light); background: rgba(255,255,255,0.08); }
.is-btn-spin-clone { background: radial-gradient(circle at 35% 28%, var(--is-gold-light), var(--is-red-light) 65%, #2a0606 100%); border-color: var(--is-gold); color: #fff; }
.is-btn-spin-clone:hover { box-shadow: 0 0 22px rgba(212,175,55,0.6); }
.is-btn-autoplay-pill { background: linear-gradient(180deg, #362413, #1c130a); border-color: var(--is-gold); color: var(--is-gold-light); }


/* Icono tematico del boton de SPIN (ej: una calavera para un tema Dia de
   los Muertos, un timon para uno de piratas, etc -- lo genera slot-factory
   como assets/spin_icon.png si hay algun motor de imagen configurado).
   Oculto por defecto: solo se muestra si la imagen carga bien (ver
   ui.js.tmpl); si no hay icono, el boton se queda con su texto "SPIN" de
   siempre, sin ningun hueco raro. */
.is-spin-icon {
    display: none;
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.is-btn-spin.has-icon .is-spin-icon { display: block; }
.is-btn-spin.has-icon span {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    opacity: 0.9;
}

/* ==================== MODAL ==================== */
.is-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.is-modal {
    background: linear-gradient(180deg, #1a120a, #0a0704);
    border: 2px solid var(--is-gold);
    border-radius: 10px;
    max-width: 640px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(212,175,55,0.35);
}

.is-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-family: var(--is-font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--is-gold);
    border-bottom: 1px solid rgba(212,175,55,0.35);
}

.is-modal-close {
    background: none;
    border: none;
    color: var(--is-gold);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.is-modal-body { padding: 18px 20px; }
.is-modal-note {
    font-size: 12px;
    color: rgba(236,226,200,0.75);
    line-height: 1.6;
    margin: 10px 0;
}

.is-paytable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.is-paytable th, .is-paytable td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(212,175,55,0.2);
    font-size: 13px;
}
.is-paytable th {
    color: var(--is-gold);
    font-family: var(--is-font-display);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}
.is-pt-sym {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left !important;
}
.is-pt-icon {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: radial-gradient(circle, rgba(212,175,55,0.18), rgba(0,0,0,0.4));
    border: 1px solid var(--is-gold);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.is-pt-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.is-bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
.is-bonus-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--is-gold);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.is-bonus-card-title {
    font-family: var(--is-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--is-gold-light);
    text-transform: uppercase;
}
.is-bonus-card-spins { font-size: 13px; color: var(--is-cream); }
.is-bonus-card-cost { font-size: 20px; font-weight: 900; color: #fff; font-family: var(--is-font-display); }
.is-bonus-card-sub { font-size: 11px; color: rgba(236,226,200,0.6); }
.is-btn-buy {
    margin-top: 8px;
    background: linear-gradient(180deg, var(--is-red-light), var(--is-red));
    border: 1px solid var(--is-gold);
    color: #fff;
    font-family: var(--is-font-display);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}
.is-btn-buy:hover { box-shadow: 0 0 14px rgba(212,175,55,0.5); }

.is-form-label {
    display: block;
    font-size: 12px;
    color: var(--is-gold);
    margin: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.is-select, .is-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(212,175,55,0.4);
    background: rgba(0,0,0,0.4);
    color: var(--is-cream);
    font-family: var(--is-font-body);
    font-size: 14px;
}

/* ==================== TOAST ==================== */
.is-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,7,4,0.92);
    border: 1px solid var(--is-gold);
    color: var(--is-gold-light);
    padding: 10px 22px;
    border-radius: 8px;
    font-family: var(--is-font-display);
    font-size: 14px;
    letter-spacing: 1px;
    z-index: 300;
    box-shadow: 0 0 20px rgba(212,175,55,0.4);
    pointer-events: none;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 720px) {
    .is-hud { padding: 8px 10px; }
    .is-stat { min-width: 74px; padding: 3px 8px; }
    .is-stat-value { font-size: 13px; }
    .is-btn-icon { width: 34px; height: 34px; font-size: 15px; }
    .is-btn-spin { width: 60px; height: 44px; font-size: 12px; }
    .is-fs-banner { gap: 8px; padding: 4px 10px; }
    .is-fs-count, .is-fs-mult { font-size: 16px; }
}

/* ============ BIG WIN + animaciones de estudio (2026-07-14) ============ */
#is-game-logo-wrap { animation: is-logo-breathe 6s ease-in-out infinite; }
@keyframes is-logo-breathe {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.025); }
}
#is-bigwin-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.72));
    pointer-events: none;
}
#is-bigwin-overlay.is-show { display: flex; animation: is-bigwin-pop 0.45s ease-out; }
.is-bigwin-title {
    font-family: var(--is-font-title);
    font-size: clamp(48px, 12vh, 110px);
    letter-spacing: 4px;
    background: linear-gradient(180deg, #fff8d8 0%, var(--is-gold-light) 30%, var(--is-gold) 62%, #8a6508 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 2px rgba(60,30,0,0.6);
    filter: drop-shadow(0 6px 0 rgba(20,10,0,0.85)) drop-shadow(0 0 30px rgba(212,175,55,0.6));
    animation: is-bigwin-pulse 0.9s ease-in-out infinite;
}
.is-bigwin-amount {
    font-family: var(--is-font-impact);
    font-size: clamp(30px, 7vh, 64px);
    color: #fff;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8), 0 0 20px rgba(212,175,55,0.8);
    margin-top: 10px;
}
@keyframes is-bigwin-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes is-bigwin-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ============ CONGRATS CARD (2026-07-26) ============
   Tarjeta "CONGRATULATIONS! YOU HAVE WON..." que se ve en el juego real
   (Day of Dead) ANTES del video de entrada al bono, y de nuevo AL FINAL
   con el total ganado, ambas con papelitos de colores cayendo y "toca
   para continuar". Reutiliza la paleta dorada de #is-bigwin-overlay para
   quedar consistente con el resto del tema, pero es un componente propio
   (no pisa el overlay de BIG WIN, que sigue funcionando durante spins
   sueltos). Se cierra con un click/tap, con un timeout de seguridad para
   que el juego nunca quede trabado esperando un toque que no llega. */
#is-congrats-overlay {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(30,15,55,0.55), rgba(0,0,0,0.88));
    cursor: pointer;
    overflow: hidden;
}
#is-congrats-overlay.is-show { display: flex; animation: is-bigwin-pop 0.4s ease-out; }
.is-congrats-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.is-confetti-piece {
    position: absolute;
    top: -20px;
    opacity: 0.9;
    animation-name: is-confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes is-confetti-fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(600deg); opacity: 0.85; }
}
.is-congrats-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 44px 26px;
    max-width: 90%;
    background: linear-gradient(180deg, rgba(40,20,70,0.92), rgba(18,10,32,0.95));
    border: 3px solid var(--is-gold);
    border-radius: 18px;
    box-shadow: 0 0 0 6px rgba(0,0,0,0.35), 0 20px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(212,175,55,0.12);
}
.is-congrats-title {
    font-family: var(--is-font-title);
    font-size: clamp(30px, 6vh, 54px);
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff8d8 0%, var(--is-gold-light) 30%, var(--is-gold) 62%, #8a6508 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(60,30,0,0.6);
    filter: drop-shadow(0 4px 0 rgba(20,10,0,0.85));
    animation: is-bigwin-pulse 1.2s ease-in-out infinite;
}
.is-congrats-sub {
    font-family: var(--is-font-hud);
    font-size: clamp(15px, 2.6vh, 21px);
    color: #cfe0ff;
    letter-spacing: 1px;
    margin-top: 6px;
}
.is-congrats-plaque {
    margin-top: 16px;
    padding: 12px 30px;
    border: 2px solid rgba(212,175,55,0.5);
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    font-family: var(--is-font-impact);
    font-size: clamp(22px, 4.4vh, 38px);
    color: #ffd75e;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8), 0 0 16px rgba(212,175,55,0.6);
}
.is-congrats-caption {
    margin-top: 10px;
    font-family: var(--is-font-hud);
    font-size: clamp(13px, 2.2vh, 17px);
    color: #cfe0ff;
    letter-spacing: 1px;
}
.is-congrats-continue {
    margin-top: 22px;
    font-family: var(--is-font-hud);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.65);
    animation: is-congrats-blink 1.6s ease-in-out infinite;
}
@keyframes is-congrats-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ==================== VIDEO OVERLAY (bono) ==================== */
#is-video-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
}
#is-video-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==================== ADAPTAR A PORTRAIT EN MOBILE (2026-07-25) ==========
   Reporte del usuario (con captura): en celular, sostenido vertical, el
   juego se ve como una franja horizontal chica flotando en el medio de la
   pantalla con grandes barras negras arriba/abajo -- porque #is-game-root
   tiene un aspect-ratio clamp pensado solo para landscape (entre 1.35:1 y
   1.83:1 de ancho:alto) que nunca se relaja en un viewport vertical
   (~9:19). Primer intento (rotar 90 grados todo el contenedor) se descarto:
   dejaba el juego -y la pantalla de carga, que YA se ve bien en portrait
   por si sola- de costado, obligando a girar el telefono; peor UX que el
   bug original.
   Fix real: en portrait simplemente NO clampear el aspecto y dejar que
   #is-game-root use toda la pantalla (100vw x 100vh). Es seguro porque
   engine.js dibuja cada simbolo con size = min(cellW, cellH) (ver
   Engine.prototype._drawSymbol) -- nunca estira la imagen para llenar la
   celda, asi que con celdas mas angostas que altas el arte no se deforma,
   solo se ve mas chico centrado en cada celda. #is-loading no se toca: ya
   usa unidades vw/vh sin aspect-ratio fijo y llena portrait correctamente. */
@media (orientation: portrait) {
    #is-game-root {
        /* 2026-07-25 (3): inset:0 NO alcanzo -- probado en el celular real
           del usuario, la botonera seguia sin verse. Un position:fixed con
           inset:0 tambien se resuelve contra el viewport "grande" (como si
           la barra de direcciones no estuviera) en varias versiones de
           Chrome mobile, el mismo problema de fondo que 100vh/100dvh, asi
           que #is-loading probablemente tiene el mismo bug latente (no
           tan notorio ahi porque no tiene nada anclado al borde inferior).
           Unica forma confiable: --rvh (ver script en index.html), que
           usa window.innerHeight real medido por JS. */
        width: 100vw;
        height: calc(var(--rvh, 1vh) * 100);
        top: 0;
        left: 0;
        transform: none;
    }
    /* 2026-07-25 (4): reporte del usuario con foto de referencia (juego
       Pragmatic real) -- en portrait el boton de SPIN tiene que quedar
       GRANDE y mas ARRIBA (flotando sobre una franja angosta de
       credito/apuesta abajo de todo), no metido adentro de la barra HUD
       de una sola fila como en landscape. Se saca .is-hud-clone-right
       (el spinstack) del flujo normal y se lo centra flotando encima de
       la fila -- que ahora solo le queda de contenido menu+credito/bet a
       la izquierda y el mensaje al centro, como una franja fina de pie
       de pagina (igual que en la referencia). */
    .is-hud-clone {
        position: relative;
        flex-wrap: wrap;
        padding-top: 96px;
        padding-bottom: 14px;
        min-height: 60px;
    }
    .is-hud-clone-right {
        position: absolute;
        left: 50%;
        top: -64px;
        transform: translateX(-50%);
        z-index: 2;
    }
    .is-hud-clone-spinstack { margin-top: 0; }
    .is-btn-spin-clone {
        width: 132px;
        height: 132px;
        border-width: 6px;
    }
    .is-btn-autoplay-pill { margin-top: -22px; }
}