/* Neon Bounty — 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: #08060f;
    --is-black-2: #120b1e;
    --is-black2: var(--is-black-2); /* alias -- varias botoneras usan este nombre sin guion, ver lib/button_styles.py */
    --is-gold: #ff2e88;
    --is-gold-light: #ff7ec8;
    --is-red: #00d4ff;
    --is-red-light: #7df2ff;
    --is-cream: #e8e2ff;
    --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 ==================== */
/* 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%);
    /* 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;
}

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

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

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

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


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

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