/* El Tesoro de los Muertos — 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: #0a0704;
    --is-black-2: #14100c;
    --is-gold: #d4af37;
    --is-gold-light: #f2d675;
    --is-red: #6e0f0f;
    --is-red-light: #8a1c1c;
    --is-cream: #ece2c8;
    --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%);
    width: min(100vw, calc(100vh * 1.83));
    height: min(100vh, calc(100vw / 1.35));
    background: var(--is-black);
    overflow: hidden;
}

#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 {
    position: absolute;
    top: 0.5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11vh;
    max-width: 62vw;
}
#is-game-logo {
    max-height: 100%;
    max-width: 100%;
    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;
    font-size: clamp(30px, 9vh, 80px);
    letter-spacing: 2px;
    white-space: nowrap;
    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, 10vw, 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); }

.is-fs-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 20px;
    background: linear-gradient(90deg, rgba(110,15,15,0.85), rgba(212,175,55,0.25), rgba(110,15,15,0.85));
    border: 1px solid var(--is-gold);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(212,175,55,0.35);
}
.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-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;
}
.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);
}
.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);
}
.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);
}
/* 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);
}
). */
/* 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);
}


/* 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); }
}

/* ==================== VIDEO OVERLAY (bono) ==================== */
#is-video-overlay {
    position: fixed;
    inset: 0;
    background: #