/*
 * GIRO DE SUERTE ROYAL - UI limpia (mobile first)
 * Fecha: 2026-01-18
 */

:root {
    --game-width: 1080px;
    --game-height: 2313px;
    --gds-scale: 0.45;
    --overlay-inverse-scale: 1;
    --app-height: 100vh;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-offset-x: 0px;
    --safe-offset-y: 0px;
    --game-bg-color: #12071f;
    --game-bg-image: none;
    /* Controles inferiores (apuesta + botón) deben compartir ancho */
    --control-width: 75%;
    --control-max: 820px;
    --control-min: 420px;

    --gold: #f7cf5b;
    --gold-bright: #ffe082;
    --gold-dark: #8b6914;
    --red: #c41e3a;
    --red-dark: #8b0000;
    --text-white: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.7);

    /* Colores UX */
    /* Verde mate (historial / wins) */
    --win-green: #1f7a55;
    --win-green-border: rgba(31, 122, 85, 0.9);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body {
    font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    background: #000;
    color: var(--text-white);
    -webkit-text-size-adjust: 100%;
    height: var(--app-height);
    position: fixed;
    inset: 0;
    width: 100%;
}

@media (min-width: 901px) {
    body.theme-giro-royal::before {
        content: '';
        position: fixed;
        inset: -40px;
        background-color: var(--game-bg-color, #12071f);
        background-image: var(--game-bg-image, none);
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        filter: blur(22px) saturate(1.12);
        transform: scale(1.06);
        z-index: -1;
    }
}

body.theme-giro-royal {
    background-color: var(--game-bg-color, #12071f);
    background-image: var(--game-bg-image, none);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Evitar UI "Guardar" / context menus encima de assets */
body.theme-giro-royal img {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.hidden {
    display: none !important;
}

/* Loading / Error */
.loading-screen,
.error-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0a18;
    z-index: 9999;
}

.loading-content,
.error-content {
    text-align: center;
    color: var(--text-white);
}

.loading-logo-img {
    width: 220px;
    height: auto;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    margin: 16px auto 8px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-retry {
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--gold);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.error-icon {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Root container */
.game-container {
    position: relative;
    width: 100%;
    height: 100%;
}

body.theme-giro-royal .game-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--game-width);
    height: var(--game-height);
    transform: translate(var(--safe-offset-x), var(--safe-offset-y)) translate(-50%, -50%) scale(var(--gds-scale));
    transform-origin: center center;
    background-color: var(--game-bg-color, #12071f);
    background-image: var(--game-bg-image, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    will-change: transform;
}

@media (min-width: 901px) {
    body.theme-giro-royal .game-container {
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 26px 90px rgba(0, 0, 0, 0.65);
        outline: 1px solid rgba(255, 255, 255, 0.08);
    }
}

/* Header */
.gds-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    z-index: 20;
}

.gds-logo img {
    height: 156px;
    width: auto;
}

.gds-logo {
    margin-left: -1%;
}

.gds-credits {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 13px;
    width: 43%;
    min-width: 0;
    max-width: 470px;
    border-radius: 54px;
    background: linear-gradient(180deg, rgba(30, 30, 60, 0.85) 0%, rgba(10, 10, 30, 0.95) 100%);
    border: 1px solid #d4af37;
    justify-content: flex-start;
}

.credits-label {
    font-size: 17px;
    font-weight: 700;
    opacity: 1;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-right: auto;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.credits-amount {
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    justify-content: flex-end;
    flex: 1 1 auto;
    color: #ffffff;
    font-family: 'Arial Black', Impact, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 0.6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

.credits-amount.sprite-number {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65));
}

.gds-mode {
    display: flex;
    align-items: center;
}

.mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--gold);
    background: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    letter-spacing: 0.8px;
}

/* Jackpots */
.gds-jackpots {
    position: absolute;
    top: 7.5%;
    left: 0;
    right: 0;
    height: 14%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5%;
    padding: 0 3%;
    z-index: 15;
}

.jackpot-card {
    width: 26%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    justify-content: flex-start;
    gap: 2px;
}

.jackpot-card:nth-child(2) {
    width: 28%;
}

.jackpot-base {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    top: 15%;
    --jackpot-scale: 0.7;
    transform: scale(var(--jackpot-scale));
    transform-origin: top center;
}

 #jackpot-mega-img {
     --jackpot-scale: 0.63;
 }

.jackpot-card.epico {
    --pill-start: #f05543;
    --pill-end: #b81612;
}

.jackpot-card.legendario {
    --pill-start: #2e7ae6;
    --pill-end: #0b3f9d;
}

.jackpot-card.oro {
    --pill-start: #b546ff;
    --pill-end: #6a1aa8;
}

.jackpot-label {
    position: absolute;
    top: 48.5%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #5a2a00;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.1;
    pointer-events: none;
    transform: translateY(-50%);
}

.jackpot-amount {
    position: absolute;
    top: 54%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    max-width: 100%;
    width: 78%;
    margin: 0 auto;
    pointer-events: none;
    border-radius: 999px;
    border: 2px solid #f7cf5b;
    background: linear-gradient(180deg, var(--pill-start) 0%, var(--pill-end) 100%);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 4px 8px rgba(0, 0, 0, 0.35);
    transform: translateZ(0) scale(1.3);
    transform-origin: center;
}

.jackpot-amount .sprite-number {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    align-items: center;
    justify-content: center;
    transform-origin: center;
}

.jackpot-amount > span {
    display: inline-block;
    font-family: 'Arial Black', Impact, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.6px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

/* Board */
.gds-board {
    position: absolute;
    top: 22%;
    left: 50%;
    width: 92%;
    height: auto;
    aspect-ratio: 2953 / 3537;
    transform: translateX(-50%);
    z-index: 10;
    overflow: visible;
}

.board-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.prize-display {
    position: absolute;
    top: 0.5%;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.prize-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

.prize-vfx {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.95;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: background-image;
}

.prize-chest {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(56%, 340px);
    height: min(92%, 260px);
    transform: translate(-50%, -46%) translateZ(0);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    backface-visibility: hidden;
    will-change: background-image;
}

.prize-cover,
.prize-revealed {
    position: relative;
    z-index: 7;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

 .celebration-overlay {
     position: absolute;
     inset: 0;
     z-index: 5500;
     pointer-events: none;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .celebration-vfx,
 .celebration-coins {
     position: absolute;
     inset: 0;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     transform: translateZ(0);
     backface-visibility: hidden;
     will-change: background-image;
 }

 .celebration-vfx {
     opacity: 0.95;
 }

 .celebration-coins {
     opacity: 0.92;
     filter: drop-shadow(0 0 14px rgba(255, 200, 60, 0.6));
 }

 .celebration-text {
     position: relative;
     width: min(84%, 780px);
     height: min(28%, 280px);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
     transform: translateY(-6%) translateZ(0);
     backface-visibility: hidden;
     will-change: background-image;
 }

.jugas-por {
    font-size: 32px;
    white-space: nowrap;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin-top: 2px;
    font-family: 'Arial Black', Impact, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-stretch: expanded;
    transform: translateY(2%) scaleX(1.08);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.prize-cover-amount,
.prize-amount {
    margin-top: 0;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
    font-family: 'Arial Black', Impact, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 72px;
    letter-spacing: 1px;
    line-height: 1;
    color: #f7cf5b;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
}

.prize-cover-amount {
    margin-top: 6px;
    transform: translateY(5%);
}

.prize-cover-amount.sprite-number,
.prize-amount.sprite-number {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
}

.prize-label {
    margin-top: 4px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1.05;
    color: #ffffff;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.85);
}

/* C9f: contenedor de la moneda-triste (SVG). Reemplaza el óvalo rosa crudo. */
.prize-lose-face {
    display: inline-block;
    width: 116px;
    height: 116px;
    align-self: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
    animation: lose-coin-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.prize-lose-face svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes lose-coin-in {
    0% { transform: scale(0.5) translateY(8px) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}

.board-instruction {
    position: absolute;
    top: 23%;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    z-index: 4;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.cards-grid {
    position: absolute;
    top: 31%;
    left: 50%;
    width: 70%;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: stretch;
    gap: 4%;
    z-index: 3;
}

.cards-grid.is-locked {
    pointer-events: none;
}

.cards-grid.reveal-active .card {
    cursor: pointer;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    width: 100%;
    height: 100%;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* C4 (plan refactor 2026-06-11): giro optimista — las cartas "giran" desde el
   click, cubriendo la latencia de la API en vez de congelar el botón.
   Solo transform (GPU, sin layout/paint) para no costar FPS en móviles. */
/* C7c (plan refactor 2026-06-11): giro EN EL PLANO (rotate 2D), no rotateY 3D.
   La carta es la flecha circular de "giro" → rotarla en su plano es el efecto
   natural y NO muestra reverso espejado ni parpadea al cruzar 180°. rotate 2D
   + capa GPU dedicada (translateZ/will-change) corre 100% en el compositor,
   así el trabajo del audio en el hilo principal ya NO traba la animación
   (causa del "se traba" reportado en móvil). */
@keyframes card-spin-wait {
    from { transform: translateZ(0) rotate(0deg); }
    to   { transform: translateZ(0) rotate(360deg); }
}

/* C7e (plan refactor 2026-06-11): durante el giro se rota el DORSO (background
   de la carta), no la <img>. La img (que puede tener la cara revelada de la
   ronda anterior) se oculta. Antes se rotaba .card-img y, como resetCards()
   cambia img.src de forma asíncrona, por 1-2 frames giraba la cara descubierta
   ("box descubierto que gira, cada tanto"). Así el dorso girando está
   garantizado y NUNCA depende del decode de la imagen. */
.cards-grid .card.spinning {
    animation: card-spin-wait 0.9s linear infinite;
    will-change: transform;
    transform: translateZ(0);
    background-image: var(--card-back);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cards-grid .card.spinning .card-img {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cards-grid .card.spinning {
        animation: card-spin-wait 1.6s linear infinite;
    }
}

/* C7c: overlays de TABLA DE PAGOS e HISTORIAL — panel crema con marco dorado
   en vez del pergamino bg_menu estirado a 100% 100% (su barra roja escalaba
   con la altura de la lista y tapaba el título marrón, ilegible). Estas reglas
   con !important ganan sobre el background-image inline que setea el JS
   (applyOverlayBackgroundStyle), sin tocar el JS. El menú de monedas conserva
   su pergamino (contenido corto, no scrollea). */
.overlay-paytable .overlay-bg,
.overlay-history .overlay-bg {
    background: linear-gradient(180deg, #f7e8c8 0%, #efddb7 100%) !important;
    inset: 0 !important;
    border: 3px solid #b8731a !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32),
                inset 0 0 0 2px rgba(214, 162, 62, 0.65) !important;
}

/* Título sobre la franja crema, legible y separado del borde */
.overlay-paytable .overlay-title,
.overlay-history .overlay-title {
    margin-top: 6px;
    padding: 6px 36px 10px;
    border-bottom: 2px solid rgba(184, 115, 26, 0.35);
}

.coin-icon {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72% 72%;
}

.coin-border {
    position: absolute;
    inset: 0;
    background: none;
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: background-position, opacity, transform;
    filter: none;
}

.coin-border-layer,
.torch-flame-layer {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    will-change: background-position, opacity;
}

.coin-border--stable {
    animation: coin-border-pulse 900ms ease-in-out infinite alternate;
    transform-origin: center;
}

/* Torches */
.torch {
    position: absolute;
    /* ANCLA PROPORCIONAL a la boca del cup, medido por pixeles en tablero.png:
       cup izq centro x=6.2%, der x=93.8%; boca (punta) y=12.8% del board.
       tablero.png (aspect 0.835) mapea 1:1 al .gds-board (mismo aspect-ratio
       2953/3537, object-fit:contain) => estas coordenadas son FIJAS en todo
       dispositivo/SO. % puro, SIN clamp(px) (el clamp rompia la proporcion). */
    /* Llama anclada a la boca del cup: bottom:80% = donde la base de la llama
       (sprite) asienta en el cup, elegido por BARRIDO VISUAL (84% flota, 76% se
       mete en el tablero, 80% justo). % del board y board=tablero 1:1 => fijo en
       TODO dispositivo. La 1/2 inferior vacia del frame del sprite entra al
       tablero (invisible). */
    bottom: 84%;
    width: 9%;
    height: 9%;
    transform: translateX(-50%);
    z-index: 6;
    isolation: isolate;
    filter: none;
    overflow: visible;
}

.torch-left { left: 6.2%; }
.torch-right { left: 93.8%; }

.torch::before,
.torch::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    pointer-events: none;
    transform: translateX(-50%) translateZ(0);
    transform-origin: center bottom;
    z-index: 3;
}

.torch::before {
    bottom: 146%;
    width: 54%;
    height: 78%;
    background:
        radial-gradient(ellipse at 50% 72%, rgba(255, 248, 174, 0.96) 0 18%, rgba(255, 214, 70, 0.88) 32%, transparent 58%),
        linear-gradient(180deg, #fff3a0 0%, #ffb21c 54%, #ff5a00 100%);
    clip-path: polygon(50% 0%, 65% 22%, 59% 40%, 76% 68%, 58% 100%, 38% 96%, 23% 72%, 36% 48%, 33% 27%);
    border-radius: 50% 50% 46% 46%;
    filter: drop-shadow(0 0 6px rgba(255, 146, 0, 0.78));
    opacity: 0.94;
    animation: torch-css-flame 780ms ease-in-out infinite alternate;
}

.torch::after {
    bottom: 156%;
    width: 24%;
    height: 42%;
    background: linear-gradient(180deg, rgba(255, 255, 210, 0.98) 0%, rgba(255, 214, 64, 0.9) 58%, rgba(255, 122, 0, 0.15) 100%);
    clip-path: polygon(52% 0%, 66% 30%, 58% 52%, 70% 78%, 52% 100%, 35% 82%, 43% 58%, 34% 34%);
    border-radius: 50%;
    opacity: 0.82;
    animation: torch-css-core 640ms ease-in-out infinite alternate;
}

.torch-flame {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 320%;
    height: 320%;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    /* C7g (plan refactor 2026-06-11): posición ÚNICA y fluida de la llama,
       igual en todo dispositivo. Antes el valor bueno vivía solo en
       @media(min-width:901px) y el móvil usaba un base que dejaba la llama
       alta (espacio con la antorcha). Como la llama está dimensionada en %
       proporcional a la antorcha (clamp fluido), este único valor coincide
       a cualquier ancho — sin breakpoints que salten. */
    /* base de la llama anclada al fondo de la .torch (= boca del cup) */
    background-position: center bottom;
    background-color: transparent;
    pointer-events: none;
    transform: translateX(-50%) scaleX(1.04) translateZ(0);
    transform-origin: center bottom;
    backface-visibility: hidden;
    /* PERF: solo transform/opacity son compositables. background-position y filter
       quedan FIJOS (no en los keyframes) para no repintar/re-rasterizar por frame
       en GPU móvil (la traza medía 576ms->87ms idle al sacarlos del flicker). */
    will-change: transform, opacity;
    filter: none;
    opacity: 0;
    visibility: hidden;
}

.torch-flame--stable {
    opacity: 1;
    visibility: visible;
    animation: torch-flame-flicker 820ms ease-in-out infinite;
}

.torch-flame--visible {
    opacity: 1;
    visibility: visible;
}

@supports selector(.torch:has(.torch-flame--visible)) {
    .torch:has(.torch-flame--visible)::before,
    .torch:has(.torch-flame--visible)::after {
        content: none;
        display: none;
    }
}

/* C7g: keyframes del flicker desplazados ~6% hacia abajo para coincidir con la
   base nueva (.torch-flame translateY -2% / bg 118%). En móvil la llama corre
   esta animación (perfil lowEnd) — antes sus keyframes tenían la posición vieja
   alta (translateY -7~-9% / bg 110-114%) → llama arriba con espacio. El flicker
   (scale/skew/rotate/opacity) se mantiene; solo se baja la posición vertical. */
@keyframes torch-flame-flicker {
    0% {
        opacity: 0.88;
        transform: translateX(-50%) translateY(-21%) scaleX(1.01) scaleY(0.95) skewX(-2deg) rotate(-1.6deg) translateZ(0);
    }
    20% {
        opacity: 0.96;
        transform: translateX(-50%) translateY(-22%) scaleX(1.07) scaleY(1.02) skewX(2deg) rotate(1.4deg) translateZ(0);
    }
    48% {
        opacity: 1;
        transform: translateX(-50%) translateY(-23%) scaleX(1.1) scaleY(1.05) skewX(-1deg) rotate(-0.8deg) translateZ(0);
    }
    72% {
        opacity: 0.94;
        transform: translateX(-50%) translateY(-21.5%) scaleX(1.03) scaleY(0.99) skewX(1deg) rotate(1.6deg) translateZ(0);
    }
    100% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(-19.5%) scaleX(0.99) scaleY(0.94) skewX(-1deg) rotate(-1.2deg) translateZ(0);
    }
}

@keyframes coin-border-pulse {
    0% {
        opacity: 0.9;
        transform: translateZ(0) scale(0.985);
        filter: drop-shadow(0 0 5px rgba(255, 210, 80, 0.45));
    }
    100% {
        opacity: 1;
        transform: translateZ(0) scale(1.02);
        filter: drop-shadow(0 0 12px rgba(255, 225, 110, 0.72));
    }
}

@keyframes torch-css-flame {
    0% { transform: translateX(-50%) scaleX(0.94) scaleY(0.96) skewX(-2deg) translateZ(0); opacity: 0.88; }
    100% { transform: translateX(-50%) scaleX(1.06) scaleY(1.04) skewX(2deg) translateZ(0); opacity: 0.98; }
}

@keyframes torch-css-core {
    0% { transform: translateX(-50%) scaleX(0.9) scaleY(0.94) translateZ(0); opacity: 0.72; }
    100% { transform: translateX(-50%) scaleX(1.08) scaleY(1.02) translateZ(0); opacity: 0.9; }
}

/* Bet */
.gds-bet {
    position: absolute;
    left: 50%;
    bottom: 22.32%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: var(--control-width);
    max-width: var(--control-max);
    min-width: var(--control-min);
    z-index: 20;
    transform: translateX(-50%) scale(1.3);
    transform-origin: center;
}

.gds-bet.is-disabled {
    opacity: 0.85;
    filter: saturate(0.9) brightness(0.95);
}

.btn-bet {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-bet:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.35) saturate(0.7);
}

.btn-icon {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.bet-amount {
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #ffffff;
    line-height: 1;
    font-family: 'Arial Black', Impact, 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0.6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.bet-currency {
    display: flex;
    align-items: center;
}

.bet-currency img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid var(--gold);
}

/* Play button */
.btn-play {
    position: absolute;
    left: 50%;
    bottom: 7.68%;
    width: var(--control-width);
    max-width: var(--control-max);
    min-width: var(--control-min);
    height: auto;
    aspect-ratio: 520 / 131;
    border-radius: 40px;
    border: none;
    background: url('../ui/btn_main_text.png') center/100% 100% no-repeat;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    z-index: 20;
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    white-space: nowrap;
    transform-origin: center;
    transform: translate(-50%, -30%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-play.btn-play--girar {
    background-image: url('../ui/btn_menu.png');
}

.btn-play.btn-play--jugar {
    background-image: url('../ui/btn_main_text.png');
}

/* Footer */
.gds-footer {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 1%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    background: transparent;
    z-index: 20;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-menu,
.btn-audio {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 10, 30, 0.6);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.btn-history {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 10, 30, 0.6);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.icon-hamburger {
    width: 42px;
    height: 28px;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff);
    background-repeat: no-repeat;
    background-position: center top, center, center bottom;
    background-size: 100% 5px;
    border-radius: 2px;
    display: block;
}

.icon-audio {
    width: 40px;
    height: 40px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm10.5 3c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zm2.5 0c0 2.89-1.71 5.37-4.18 6.53v-1.72c1.63-.97 2.68-2.73 2.68-4.81s-1.05-3.84-2.68-4.81V5.47C15.79 6.63 17.5 9.11 17.5 12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-audio::before {
    content: none;
}

.icon-audio::after {
    content: none;
}

.icon-paytable {
    position: relative;
    width: 40px;
    height: 30px;
    border: 5px solid #ffffff;
    border-radius: 2px;
    display: block;
}

.icon-paytable::before,
.icon-paytable::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    background: #ffffff;
}

.icon-paytable::before {
    top: 7px;
}

.icon-paytable::after {
    top: 17px;
}

.btn-paytable {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 10, 30, 0.6);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.gds-footer button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

/* C7i (plan refactor 2026-06-11): HISTORIAL = reloj con flecha (icono
   universal de "historial"). Antes era un rectángulo con 2 líneas, casi
   idéntico a icon-paytable (tabla) → los dos botones de la barra parecían el
   mismo ("dos botones con lo mismo"). Ahora son inconfundibles: reloj vs tabla. */
.icon-history {
    width: 40px;
    height: 40px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.25 2.52.75-1.23-3.5-2.07V8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-history::before,
.icon-history::after {
    content: none;
}

.footer-center {
    display: flex;
    align-items: center;
    gap: 28px;
}

.auto-pill {
    min-width: 176px;
    height: 78px;
    padding: 0 38px;
    border-radius: 32px;
    background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    font-size: 29px;
    border: none;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.auto-status {
    font-size: 25px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    line-height: 1.1;
}

.footer-brand-top,
.footer-brand-bottom {
    font-size: 9px;
    opacity: 0.6;
    letter-spacing: 0.4px;
}

.footer-brand-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footer-brand .mbokaja-logo {
    height: 22px;
}

/* C7 (plan refactor 2026-06-11): el botón de TABLA DE PAGOS estaba oculto
   con display:none — los jugadores no podían ver los premios. La cadena
   completa funciona (botón → /config → render de premios desde la API),
   así que se restituye. El gate lo verifica (run-qa: PAYTABLE ≥5 filas). */
body.theme-giro-royal .btn-paytable {
    display: flex;
}

/* Sprite numbers */
.sprite-number {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--sprite-gap, 0px);
    transform: scaleX(var(--sprite-squeeze, 1));
    transform-origin: right center;
}

.sprite-number img {
    height: var(--sprite-size, 22px);
    width: auto;
    margin-left: var(--sprite-overlap, -2px);
}

.sprite-number img.separator {
    height: calc(var(--sprite-size, 22px) * var(--sprite-sep-scale, 0.18));
    margin-left: calc(var(--sprite-overlap, -2px) + 1px);
    margin-right: calc(var(--sprite-overlap, -2px) + 1px);
    transform: translateY(var(--sprite-sep-offset, 4px));
}

.currency-prefix {
    margin-right: 3px;
    font-size: var(--sprite-prefix-size, calc(var(--sprite-size, 22px) * 0.72));
    color: #ffffff;
}

/* Win modal */
.win-modal {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.win-modal-content {
    width: 80%;
    max-width: 420px;
    background: #1b102a;
    border: 3px solid var(--gold);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
}

.win-celebration {
    position: relative;
    width: 220px;
    height: 160px;
    margin: 0 auto 8px;
}

.win-sprite {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.win-explosion {
    filter: drop-shadow(0 0 14px rgba(255, 200, 60, 0.75));
    opacity: 0.9;
}

.btn-close-win {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: var(--gold);
    cursor: pointer;
}

/* Overlays */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.58);
    z-index: 6000;
    overflow: hidden;
}

.overlay-content {
    position: relative;
    width: min(calc(100vw - 12px), 412px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 18px);
    min-height: 0;
    padding: 22px 18px 18px;
    text-align: center;
    color: #5a2a00;
    box-sizing: border-box;
    overflow: visible;
    transform-origin: center;
    transform: scale(calc(var(--overlay-inverse-scale, 1) * var(--overlay-fit-scale, 1)));
}

.overlay-content > :not(.overlay-bg) {
    transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
    opacity: 1;
    transform: translateY(0);
    filter: saturate(1);
}

.overlay.overlay-content-hidden .overlay-content > :not(.overlay-bg) {
    opacity: 0;
    transform: translateY(10px);
    filter: saturate(0) brightness(1.15);
}

.overlay.overlay-closing .overlay-content > :not(.overlay-bg) {
    transition-duration: 120ms;
}

.overlay-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f6e7c6 0%, #efddb7 100%);
    border: 3px solid rgba(139, 79, 20, 0.95);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.45);
    z-index: 0;
    will-change: background-image, opacity;
}

.orientation-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.86);
    color: #fff;
    text-align: center;
    padding: 22px;
}

.orientation-card {
    width: min(420px, 92vw);
    border-radius: 18px;
    padding: 18px 16px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 10, 30, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.orientation-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.orientation-subtitle {
    font-size: 14px;
    opacity: 0.85;
}

.overlay-title {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 1.08;
    color: #5a2a00;
    font-weight: 900;
    text-shadow: none;
}

.overlay-subtitle {
    position: relative;
    z-index: 1;
    margin: 12px 0 10px;
    font-size: 13px;
    color: #5a2a00;
    font-weight: 800;
}

.overlay-auto .overlay-title,
.overlay-auto .overlay-subtitle,
.overlay-audio .overlay-title,
.overlay-audio .audio-row label,
.overlay-paytable .overlay-title,
.overlay-history .overlay-title {
    color: #5a2a00;
    font-weight: 900;
    text-shadow: none;
}

.overlay-audio {
    width: min(calc(100vw - 12px), 406px);
    padding: 22px 18px 18px;
}

.overlay-auto {
    width: min(calc(100vw - 12px), 406px);
    padding: 22px 18px 20px;
}

.overlay-paytable {
    width: min(calc(100vw - 12px), 438px);
    padding: 22px 18px 18px;
}

.overlay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.72);
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}

.menu-options {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.menu-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 7px 9px;
    color: #fff;
    cursor: pointer;
}

.menu-option.active {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(247, 207, 91, 0.6);
}

.menu-option img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gold);
}

.menu-option span {
    font-size: 11px;
    line-height: 1;
}

#menu-overlay .overlay-title {
    color: #5a2a00;
    font-weight: 900;
    text-shadow: none;
}

#menu-overlay .overlay-content {
    width: auto !important;
    max-width: none !important;
    padding: 55px 50px 45px !important;
}

#menu-overlay .overlay-bg {
    background: url('../ui/menu/bg_menu.png') center/100% 100% no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;
    inset: -30px -45px !important;
}

#menu-overlay .menu-options {
    display: grid !important;
    grid-template-columns: repeat(2, 80px) !important;
    gap: 10px !important;
    justify-content: center !important;
}

#menu-overlay .menu-option {
    width: 80px !important;
    padding: 8px 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
}

#menu-overlay .menu-option img {
    width: 32px !important;
    height: 32px !important;
}

#menu-overlay .menu-option span {
    font-size: 10px !important;
}

.overlay-history {
    width: min(calc(100vw - 12px), 438px);
    padding: 22px 18px 18px;
}

.overlay-history .overlay-title {
    margin-bottom: 10px;
    font-size: 18px;
}

.history-list {
    position: relative;
    z-index: 1;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    max-height: min(380px, calc(100vh - 150px));
    overflow: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 4px;
}

.history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(90, 42, 0, 0.16);
    font-size: 13px;
    line-height: 1.18;
    color: #5a2a00;
}

.history-bet {
    min-width: 0;
    overflow-wrap: anywhere;
}

.history-item.win {
    background: none;
    border-color: rgba(31, 122, 85, 0.25);
}

.history-item.lose {
    background: none;
    border-color: rgba(159, 84, 42, 0.18);
}

.history-result.win {
    color: var(--win-green);
    font-weight: 900;
    white-space: nowrap;
    font-size: 13px;
}

.history-result.lose {
    color: #8b6b51;
    font-weight: 700;
    white-space: nowrap;
    font-size: 13px;
}

.history-empty {
    padding: 12px 8px;
    color: rgba(90, 42, 0, 0.72);
    text-align: center;
    font-size: 13px;
}

.audio-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.audio-row label {
    font-size: 15px;
    text-align: left;
}

.audio-row input[type="range"] {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    /* Permitir drag del slider en mobile aunque el juego bloquee scroll global */
    touch-action: pan-x;
    accent-color: #3b82f6;
}

.overlay-audio .audio-row,
.overlay-audio .btn-audio-toggle {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}

.overlay-paytable .paytable-meta,
.overlay-paytable .paytable-list {
    width: 84%;
    margin-left: auto;
    margin-right: auto;
}

.btn-audio-toggle {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: none;
    background: var(--gold);
    color: #2b1a0f;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.auto-options,
.auto-speeds {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auto-option,
.auto-speed {
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.auto-option.active,
.auto-speed.active {
    background: var(--gold);
    color: #2b1a0f;
}

.btn-auto-start,
.btn-auto-stop {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 12px 20px;
    border-radius: 16px;
    border: none;
    background: #22c55e;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.btn-auto-stop {
    background: #ef4444;
}

.overlay-paytable .paytable-meta {
    position: relative;
    z-index: 1;
    font-size: 13px;
    margin-bottom: 10px;
    color: #5a2a00;
    font-weight: 900;
    white-space: pre-line;
    line-height: 1.3;
}

.overlay-paytable .paytable-list {
    position: relative;
    z-index: 1;
    max-height: min(430px, calc(100vh - 170px));
    overflow: auto;
    text-align: left;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: #5a2a00;
}

.paytable-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 7px 0;
    border-bottom: 1px solid rgba(90, 42, 0, 0.18);
    width: 100%;
    font-size: 13px;
    gap: 2px;
    color: #5a2a00;
    line-height: 1.2;
}

.paytable-label {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.paytable-value {
    white-space: normal;
    text-align: left;
    font-weight: 900;
}

/* C7g: el override de desktop se fusionó en la regla base .torch-flame
   (posición única y fluida para todos los dispositivos). */

@media (max-width: 600px) {
    .gds-credits {
        width: 42%;
        max-width: 370px;
        padding: 14px 11px;
        gap: 6px;
        border-radius: 42px;
    }

    .credits-label {
        font-size: 15px;
    }

    .credits-amount {
        font-size: 24px;
    }

    .gds-footer {
        left: 2.5%;
        right: 2.5%;
        bottom: 0.8%;
        padding: 0 3%;
    }

    .footer-left {
        gap: 14px;
    }

    .overlay-close {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .overlay-content {
        width: min(calc(100vw - 8px), 390px);
        max-width: calc(100vw - 8px);
        padding: 18px 14px 14px;
    }

    .overlay-title {
        font-size: 17px;
    }

    .audio-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .audio-row label {
        font-size: 14px;
    }

    #auto-overlay .auto-option,
    #auto-overlay .auto-speed {
        padding: 8px 12px;
        font-size: 12px;
    }

    #auto-overlay .overlay-subtitle {
        font-size: 12px;
    }

    #auto-overlay .btn-auto-start,
    #auto-overlay .btn-auto-stop {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Toast notifications (reemplaza alert()) */
#toast-container {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 520px);
    pointer-events: none;
}

.toast {
    background: rgba(20, 10, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease;
}

.toast--error {
    border-color: rgba(255, 94, 94, 0.35);
}

.toast--hide {
    opacity: 0;
    transform: translateY(6px);
}