/* Valhalla: Furia Norse — 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=Cinzel:wght@500;700;900&family=Playfair+Display:wght@600;700&display=swap');
/* Tipografia del HUD — adaptativa por tema via font_selector.py */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700;800&family=Archivo+Black&family=Luckiest+Guy&display=swap');

:root {
    --is-black: #060c14;
    --is-black-2: #0c1a22;
    --is-black2: var(--is-black-2); /* alias -- varias botoneras usan este nombre sin guion, ver lib/button_styles.py */
    --is-gold: #9fd4d8;
    --is-gold-light: #c8ecee;
    --is-red: #3a1c6e;
    --is-red-light: #6b3ccf;
    --is-cream: #e0eef0;
    --is-font-display: 'Cinzel', Georgia, serif;
    --is-font-body: 'Playfair Display', Georgia, serif;
    /* Fuentes HUD — adaptativas por tema (font_selector.py) */
    --is-font-hud: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --is-font-impact: 'Archivo Black', 'Arial Black', sans-serif;
    --is-font-title: 'Luckiest Guy', 'Archivo Black', 'Arial Black', sans-serif;
}

* { 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: tope de aspecto subido de 1.83 a 2.35 -- la mayoria de
       celulares en landscape rondan ~2.1:1 (ej. 19.5:9); con 1.83 quedaban
       barras negras visibles a los costados. 2.35 cubre celulares modernos
       y monitores ultrawide sin dejar de contener pantallas extremas.
       Ademas, 100vh/100dvh se comprobo que NO son confiables en mobile
       real (con la barra de direcciones visible, miden el viewport
       "grande" y empujan la botonera fuera de la parte visible) -- se usa
       --rvh, una custom property que un script en index.html calcula
       desde window.innerHeight real (ver <script> antes del <link
       rel="stylesheet"> en este mismo archivo generado). Fallback 1vh por
       si ese script todavia no corrio (primer frame). */
    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;
}
/* 2026-07-25 (2): tope de aspecto mas ancho (2.35, para que no queden
   barras negras en celulares en landscape, que rondan ~2.1:1) SOLO en
   touch -- el usuario aviso que en DESKTOP el juego siempre se vio con
   barras negras a los costados (1.83, por diseño) y no quiere que eso
   cambie. pointer:coarse es la forma correcta de distinguir mobile de
   desktop para esto (a diferencia de un umbral de ancho de pantalla,
   sigue funcionando aunque se achique la ventana del navegador). */
@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-25: top/height/max-width pasados de vh/vw a % -- vh/vw
       miden contra el VIEWPORT COMPLETO, no contra #is-game-root (su
       contenedor real); en pantallas donde la caja del juego queda mas
       chica que el viewport (letterboxing por el clamp de aspecto de
       arriba) el logo se salia del marco. Ademas, a pedido del usuario,
       se saco el panel oscuro/borde de atras del titulo (antes probado en
       Pollitos Fugitivos y descartado: "prefiero las letras solas sin el
       sombreado") -- ahora es solo texto. max-width subido a 90% y
       white-space normal en el texto (ver #is-game-logo-text) como red de
       seguridad para que haga wrap en vez de desbordarse en pantallas
       angostas (portrait). */
    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: el tamaño antes solo consideraba el ALTO (6.5vh) -- en
       portrait el alto sobra pero el ANCHO es chico, asi que el titulo se
       calculaba gigante 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, y puede hacer wrap a 2 lineas. */
    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;
    /* 2026-07-25: vw -> % (ver comentario en #is-game-logo-wrap, mismo motivo). */
    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;
    /* 2026-07-25: vw -> % (ver comentario en #is-game-logo-wrap, mismo motivo). */
    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) ==========
   Probado y confirmado sobre Pollitos Fugitivos con el usuario en celular
   real. Resumen (detalle completo en SLOT_FACTORY_MOBILE_RESPONSIVE.md,
   raiz del proyecto casino):
   1. #is-game-root en portrait usa TODO el ancho/alto real (--rvh, no
      100vh/100dvh: los dos dieron el MISMO resultado roto en el celular
      real -- botonera invisible/cortada. inset:0 TAMPOCO alcanzo, mismo
      motivo de fondo). Nada de rotar 90 grados el juego (primer intento,
      descartado: peor UX que el bug original, obligaba a girar el
      telefono).
   2. La geometria del grid 5xN para portrait esta en engine.js.tmpl
      (SCENE_PORTRAIT / getScene) -- un grid ancho como este necesita casi
      todo el ancho de pantalla y mas topFrac/bottomFrac (mas lugar para
      logo/HUD) en portrait, si no queda chico con huecos vacios.
   3. El HUD "pragmatic_clone" (boton de SPIN que sobresale de la barra)
      necesita, en portrait, quedar GRANDE y flotando ARRIBA de una franja
      angosta de credito/apuesta -- no metido en una fila compacta como en
      landscape (referencia: foto de un juego Pragmatic real que mando el
      usuario). Si el HUD de este game_type usa OTRO layout (classic /
      compact, ver HUD_LAYOUT en ui.js.tmpl) falta portar el equivalente
      ahi -- este bloque solo cubre pragmatic_clone (.is-hud-clone). */
@media (orientation: portrait) {
    #is-game-root {
        width: 100vw;
        height: calc(var(--rvh, 1vh) * 100);
        top: 0;
        left: 0;
        transform: none;
    }
    .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; }
}