/* Calaveras de Oro — 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=Bungee&family=Fredoka:wght@600;700&family=Nunito:wght@600;700;800&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: 'Fredoka', 'Nunito', sans-serif;
    --is-font-impact: 'Bungee', Impact, sans-serif;
    --is-font-title: 'Bungee', 'Fredoka', Impact, 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 ==================== */
/* Caja de juego con PROPORCION ACOTADA (references/ESTILO_MARCA.md): 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 -- el arte nunca se deforma.
   Dentro del rango ocupa el 100%. 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;
}

/* ==================== HUD ==================== */
/* ============ LOGO DEL JUEGO (in-game, arriba del grid) ============ */
#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));
}
#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 ============ */
#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; }
}

#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 del bono: 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. */
.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);
}
.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;
}
.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; }

/* Barra HUD clone: identidad de marca FIJA (references/ESTILO_MARCA.md,
   calco 1:1 de la barra de Day of Dead en vivo): fondo degradado
   transparente, iconos blancos flotando, CREDIT/BET en condensada, mensaje
   central blanco grueso, -/+ aros blancos finos, SPIN blanco GRANDE
   sobresaliendo (SIN corona ni dorado) y pildora AUTOPLAY pisando su borde. */
.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; }
.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);
}
.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;
}
.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; }
.is-hud-clone-spinstack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: -26px;
}
.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; }
.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);
}


/* ==================== 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: #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;
}