/* GIRO - Asset-driven UI */

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

:root {
    --gold: #f7cf5b;
    --gold-bright: #ffe082;
    --gold-deep: #c9951a;
    --purple: #6b1ed8;
    --purple-dark: #3b0b6f;
    --green: #00ff5f;
    --red: #ff4d4d;
    --bg-dark: #12071f;
    --app-height: 100vh;
    --vh: 1vh;
    --game-bg: url('../assets/gds-magico/ui/fondo-juego.jpg') center/cover no-repeat;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    font-family: 'Righteous', cursive;
    color: #fff;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

body {
    background: var(--game-bg);
    -webkit-tap-highlight-color: transparent;
}

button,
.card,
.btn-bet-adjust,
.btn-play,
.icon-button,
.menu-option,
.auto-option,
.btn-auto {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.hidden {
    display: none !important;
}

.sprite-number {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.sprite-number img {
    height: var(--sprite-height, 18px);
    width: auto;
    display: block;
    max-height: 100%;
}

.sprite-number .sprite-icon {
    height: var(--sprite-icon-height, 18px);
    width: auto;
    display: block;
}

.sprite-number .sprite-label {
    font-family: 'Righteous', cursive;
    font-size: 0.8rem;
    color: #fbe7b0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    margin-right: 2px;
}

.sprite-credits {
    --sprite-height: 16px;
    --sprite-icon-height: 18px;
}

.sprite-bet {
    --sprite-height: 16px;
    --sprite-icon-height: 18px;
}

body.theme-proinso-bingo .sprite-bet {
    --sprite-height: 14px;
    --sprite-icon-height: 16px;
}

.sprite-jackpot {
    --sprite-height: 14px;
    --sprite-icon-height: 16px;
}

.sprite-board {
    --sprite-height: clamp(18px, 4.2vw, 22px);
    --sprite-icon-height: clamp(20px, 4.6vw, 24px);
}

.sprite-win {
    --sprite-height: clamp(20px, 5vw, 26px);
    --sprite-icon-height: clamp(22px, 5.4vw, 28px);
    justify-content: center;
}

/* Loading */
.loading-screen,
.error-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content,
.error-content {
    text-align: center;
}

.loading-logo-img {
    width: 200px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.45));
}

.loading-logo-video {
    width: min(240px, 70vw);
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.45));
}

.loading-logo-sprite {
    width: min(240px, 70vw);
    height: min(240px, 70vw);
    margin-bottom: 24px;
    filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.45));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

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

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

.loading-text {
    color: rgba(255, 255, 255, 0.7);
}

.error-icon {
    font-size: 70px;
    color: var(--red);
    margin-bottom: 18px;
}

.btn-retry {
    margin-top: 24px;
    padding: 12px 36px;
    background: linear-gradient(135deg, #ff6b6b, #c0392b);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

/* Layout - Todo en una pantalla sin scroll */
.game-container {
    position: relative;
    height: var(--app-height);
    max-height: var(--app-height);
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    overflow: hidden;
}

/* C11: en DESKTOP el Pick4 se estiraba a todo el ancho (pozos/controles
   desparramados). Lo acotamos a una COLUMNA centrada tipo celular, coherente con
   Royal. Solo aplica a ≥901px → en móvil queda full-screen idéntico a hoy. */
@media (min-width: 901px) {
    body.theme-proinso-pick4 .game-container {
        /* C11b: el ancho SIGUE a la altura (como Royal y el tema bingo): en pantallas
           bajas la columna se angosta para que el tablero quede proporcionado, capeado
           a 480px en pantallas altas. 0.46 ≈ proporción retrato (a 768px → ~353, igual
           que Royal; a 1080px → cap 480). */
        width: min(100vw, 480px, calc(var(--app-height) * 0.46));
        max-width: 480px;
        margin: 0 auto;
        border-radius: 18px;
        box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
        outline: 1px solid rgba(255, 255, 255, 0.08);
        background: var(--game-bg);
    }

    /* Fondo difuminado que llena la pantalla detrás de la columna (= patrón Royal). */
    body.theme-proinso-pick4::before {
        content: '';
        position: fixed;
        inset: -40px;
        background: var(--game-bg);
        filter: blur(22px) saturate(1.12);
        transform: scale(1.06);
        z-index: -1;
        pointer-events: none;
    }
}

/* Header Compacto - Logo izquierda, Créditos derecha */
.header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    flex-shrink: 0;
}

.header-compact .client-logo {
    height: 42px;
    max-width: 180px;
}

.header-compact .credits-display {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
}

.header-compact .credits-label {
    font-size: 0.6rem;
}

.header-compact .credits-amount {
    font-size: 1.1rem;
}

/* Legacy header - mantener por compatibilidad */
.header-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions.left {
    flex: 0 0 auto;
}

.header-actions.right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.icon-button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.icon-button img {
    width: 70%;
    height: auto;
}

.icon-button i {
    color: var(--gold);
    font-size: 1.1rem;
}

.icon-button.muted {
    opacity: 0.5;
    filter: grayscale(1);
}

.header-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    margin: 0 auto;
    min-width: 0;
}

.demo-watermark {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    font-family: 'Titan One', cursive;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 10px;
    color: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: soft-light;
}

.client-logo {
    height: 52px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.client-name {
    font-family: 'Titan One', cursive;
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: var(--gold);
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
}

.mode-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    letter-spacing: 2px;
}

.mode-badge.demo {
    background: linear-gradient(135deg, #00d9b5, #008e77);
    color: #fff;
}

.mode-badge.real {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
}

.credits-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.credits-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.credits-amount {
    font-family: 'Bangers', cursive;
    font-size: 1.55rem;
    color: var(--gold);
}

.credits-amount .sprite-number {
    --sprite-height: 16px;
}

/* Jackpots - Cofres grandes y prominentes */
.jackpots-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    align-items: end;
    flex-shrink: 0;
    padding: 0 2px;
}

.jackpot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 2px;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.jackpot-card::after {
    display: none;
}

.jackpot-card.epico {
    border-color: transparent;
}

.jackpot-card.legendario {
    border-color: transparent;
    transform: scale(1);
    z-index: 2;
}

.jackpot-card.oro {
    border-color: transparent;
}

.jackpot-chest {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
    transform: scale(1.2);
    transform-origin: center;
}

.jackpot-card.active .jackpot-chest {
    transform: scale(1.3);
}

.chest-video {
    position: absolute;
    width: clamp(120px, 32vw, 180px);
    height: auto;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}

.jackpot-card.use-video .chest-img {
    opacity: 0;
}

.chest-img {
    width: clamp(120px, 32vw, 180px);
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

/* C7p: cofre ANIMADO encima de la placa (fondo-cofre) en el tema pick4.
   Placa (chest-img) al fondo (z-index 0), cofre animado centrado (z-index 1),
   texto del pozo (jackpot-overlay) encima (z-index 2, ya definido). */
body.theme-proinso-pick4 .chest-img {
    z-index: 0;
}
body.theme-proinso-pick4 .chest-sprite {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    width: 44%;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    /* C9g: el atlas del cofre tenía fondo NEGRO opaco → "caja negra" alrededor del
       cofre. Se hicieron transparentes los PNG (negro→alpha), así el cofre se ve limpio
       sobre la placa.
       C10 (performance Android): se ELIMINA `filter: drop-shadow` — sobre un sprite
       animado (background-position cambia a 30fps) el navegador recalcula la sombra
       desde el alfa en CADA frame → era una causa directa del TITILEO en Android.
       Aislamos la capa en GPU (will-change + contain + backface) para que la animación
       repinte solo este nodo y no provoque reflow del tablero. */
    will-change: background-position;
    backface-visibility: hidden;
    contain: layout paint;
}

.jackpot-overlay {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 90%;
    pointer-events: none;
    z-index: 2;
}

.jackpot-name {
    font-family: 'Titan One', cursive;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.jackpot-tag {
    font-family: 'Bangers', cursive;
    font-size: clamp(0.68rem, 2.8vw, 0.95rem);
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.jackpot-tag .sprite-number {
    --sprite-height: 14px;
}

.jackpot-card.epico .jackpot-tag {
    background: linear-gradient(135deg, #2b6be6, #4aa9ff);
}

.jackpot-card.legendario .jackpot-tag {
    background: linear-gradient(135deg, #8d37ff, #ff5ac8);
}

.jackpot-card.oro .jackpot-tag {
    background: linear-gradient(135deg, #c54232, #e46b44);
}

body.theme-proinso-bingo .jackpot-card.epico .jackpot-tag,
body.theme-proinso-bingo .jackpot-card.legendario .jackpot-tag,
body.theme-proinso-bingo .jackpot-card.oro .jackpot-tag {
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    min-height: 0;
    background: none;
}

body.theme-proinso-bingo .jackpot-tag .sprite-number {
    --sprite-height: clamp(7px, 2.1vw, 11px);
    white-space: nowrap;
    transform-origin: center;
    gap: 0;
}

body.theme-proinso-bingo .jackpot-card.epico .jackpot-tag {
    background-image: none;
}

body.theme-proinso-bingo .jackpot-card.legendario .jackpot-tag {
    background-image: none;
}

body.theme-proinso-bingo .jackpot-card.oro .jackpot-tag {
    background-image: none;
}

.jackpot-card.active .chest-img {
    animation: jackpot-chest-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 22px rgba(255, 196, 86, 0.55));
}

.jackpot-card.active .chest-video {
    animation: jackpot-chest-pulse 1.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 22px rgba(255, 196, 86, 0.55));
}

.jackpot-card.active .jackpot-tag {
    animation: jackpot-tag-pulse 1.4s ease-in-out infinite;
    font-size: clamp(0.72rem, 3vw, 1rem);
    box-shadow: 0 6px 16px rgba(255, 180, 90, 0.6);
}

@keyframes jackpot-chest-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes jackpot-tag-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Board - Se adapta al espacio disponible */
.game-board-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.theme-proinso-bingo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

body.theme-proinso-bingo .game-board-section {
    position: absolute;
    top: 24.9%;
    left: 20%;
    width: 60%;
    height: 53%;
    padding: 0;
}

body.theme-proinso-bingo .game-container {
    width: min(100vw, calc(var(--app-height) * 1080 / 2313));
    height: min(var(--app-height), calc(100vw * 2313 / 1080));
    aspect-ratio: 1080 / 2313;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    padding: 0;
    display: block;
    background: var(--game-bg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

.top-prizes-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin-top: 2px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.top-prizes-panel {
    width: auto;
    max-width: 92vw;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(12, 9, 6, 0.65);
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    backdrop-filter: blur(6px);
    pointer-events: none;
    white-space: nowrap;
}

/* C9c: barra TOP PREMIOS rediseñada — Mayor premio (récord real del nivel) + Gran
   premio (pozo en vivo). Cada bloque: etiqueta arriba, monto grande abajo. */
.tp-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    padding: 0 6px;
}

.tp-label {
    font-family: 'Titan One', cursive;
    font-size: clamp(0.5rem, 2vw, 0.68rem);
    letter-spacing: 0.5px;
    color: #ffe6a0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.tp-value {
    font-family: 'Bangers', cursive;
    font-size: clamp(0.72rem, 3vw, 1.05rem);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.tp-record .tp-value {
    color: #ffd86b;
    text-shadow: 0 0 8px rgba(255, 198, 88, 0.55), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.tp-jackpot .tp-value {
    color: #ffd6ff;
    text-shadow: 0 0 9px rgba(255, 130, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.6);
    animation: jackpot-pulse 1.8s ease-in-out infinite;
}

.tp-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.5), transparent);
}

.game-board {
    position: relative;
    width: min(88vw, 380px);
    aspect-ratio: 0.757;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theme-proinso-bingo .game-board {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

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

.board-vfx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.board-logo-video {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(46%, 320px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

.board-logo-sprite {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(46%, 320px);
    height: min(46%, 320px);
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.board-border-video {
    position: absolute;
    top: 2.5%;
    left: 15%;
    width: 70%;
    height: auto;
    opacity: 0.85;
    mix-blend-mode: screen;
}

body.theme-proinso-bingo .board-border-video {
    display: none !important;
}

.torch-flame {
    position: absolute;
    width: 10%;
    height: auto;
    opacity: 0.9;
    mix-blend-mode: screen;
}

body.theme-proinso-bingo .torch-flame {
    clip-path: none;
    mix-blend-mode: screen;
    background-color: transparent;
}

body.theme-proinso-bingo .torch-flame {
    width: 18%;
}

body.theme-proinso-bingo .torch-flame.torch-sprite {
    background-repeat: no-repeat;
    background-size: 100% calc(var(--torch-frames, 1) * 100%);
    background-position: center 0;
    animation: none;
}

@keyframes torch-sprite {
    from { background-position: center 0; }
    to { background-position: center 100%; }
}

/* C7x (revertido por pedido del operador): el Mágico NO lleva antorchas ni fuego.
   Ocultamos por completo cualquier antorcha/llama en el tema pick4. */
body.theme-proinso-pick4 .torch-flame,
body.theme-proinso-pick4 .torch-left,
body.theme-proinso-pick4 .torch-right,
body.theme-proinso-pick4 #torch-left-sprite,
body.theme-proinso-pick4 #torch-right-sprite {
    display: none !important;
}

.torch-left {
    top: 8%;
    left: 8%;
}

.torch-right {
    top: 8%;
    right: 8%;
    transform: scaleX(-1);
}

.board-header {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: auto;
    padding-top: 12px;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    z-index: 3;
}

.board-header.amount-only {
    gap: 0;
}

.board-header.amount-only .board-title {
    display: none;
}

.board-header.amount-only .board-amount {
    font-size: clamp(1.2rem, 5.2vw, 1.6rem);
}

.board-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(0.85rem, 3.6vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1;
}

.board-title-prefix {
    font-family: 'Titan One', cursive;
}

.board-jackpot-name {
    font-family: 'Bangers', cursive;
    font-size: 1.05em;
    letter-spacing: 1px;
    color: #ffd86b;
    text-shadow: 0 0 10px rgba(255, 214, 102, 0.8);
}

.board-jackpot-name.hidden {
    display: none;
}

.board-header.jackpot-active .board-title {
    animation: jackpot-title-glow 1.4s ease-in-out infinite;
}

.board-header.jackpot-mega .board-jackpot-name {
    color: #ffd6ff;
    text-shadow: 0 0 12px rgba(255, 120, 255, 0.85);
}

.board-header.jackpot-gigante .board-jackpot-name {
    color: #b6f0ff;
    text-shadow: 0 0 12px rgba(120, 220, 255, 0.85);
}

.board-header.jackpot-mini .board-jackpot-name {
    color: #ffe7a1;
    text-shadow: 0 0 12px rgba(255, 210, 120, 0.9);
}

.board-amount {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.1rem, 4.6vw, 1.6rem);
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    line-height: 1;
}

.board-amount .sprite-number {
    --sprite-height: 26px;
}

.board-amount.jackpot-label {
    font-size: clamp(1.8rem, 6.8vw, 2.6rem);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.game-board.jackpot-anticipation .board-amount {
    color: #fff6c0;
    text-shadow: 0 0 12px rgba(255, 214, 102, 0.9), 0 0 24px rgba(255, 140, 0, 0.6);
    animation: jackpot-pulse 1.6s ease-in-out infinite;
}

.board-header.jackpot-mega .board-amount.jackpot-label {
    color: #ffd6ff;
    text-shadow: 0 0 14px rgba(255, 120, 255, 0.85);
}

.board-header.jackpot-gigante .board-amount.jackpot-label {
    color: #b6f0ff;
    text-shadow: 0 0 14px rgba(120, 220, 255, 0.85);
}

.board-header.jackpot-mini .board-amount.jackpot-label {
    color: #ffe7a1;
    text-shadow: 0 0 14px rgba(255, 210, 120, 0.9);
}

.game-board.jackpot-anticipation .board-bg {
    filter: drop-shadow(0 0 18px rgba(255, 215, 120, 0.55));
}

@keyframes jackpot-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes jackpot-title-glow {
    0% { opacity: 0.9; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
    100% { opacity: 0.9; transform: translateY(0); }
}

@keyframes pick4-auto-glow {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.board-instruction {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    line-height: 1.2;
    font-size: 0.82rem;
    color: #f9e4b7;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 4;
}

.prize-display {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
}

.prize-cover {
    width: 280px;
    height: 120px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.55));
}

.prize-cover.awaiting-reveal {
    animation: prize-pulse 1.4s ease-in-out infinite;
}

@keyframes prize-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.prize-text {
    font-family: 'Titan One', cursive;
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.tap-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

.prize-revealed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.prize-icon {
    width: 54px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.prize-amount {
    font-family: 'Bangers', cursive;
    font-size: 2.2rem;
    color: var(--gold);
}

.prize-label {
    font-size: 0.95rem;
    color: var(--green);
}

.cards-grid {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    place-items: center;
    --card-scale: 1;
    z-index: 3;
}

.card {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform 0.2s;
    transform: scale(var(--card-scale));
    transform-origin: center;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* C7c (plan refactor 2026-06-11): giro EN EL PLANO (rotate 2D), no rotateY 3D.
   Las cartas giran en su plano (sin reverso espejado ni parpadeo a 180°) en
   capa GPU dedicada → el trabajo del audio en el hilo principal ya no traba
   la animación (causa del "se traba" en móvil). */
@keyframes card-spin-wait {
    from { transform: translateZ(0) scale(0.78) rotate(0deg); }
    to   { transform: translateZ(0) scale(0.78) rotate(360deg); }
}

/* C7e: rota el DORSO (background del .card), no la <img>. La cara (img) se
   oculta durante el giro → nunca se ve girar una carta descubierta. */
.cards-grid .card.spinning {
    animation: card-spin-wait 0.9s linear infinite;
    will-change: transform;
    transform: translateZ(0) scale(0.78);
    background-image: var(--card-back);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

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

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

.card-symbol {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    z-index: 2;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.card-border-vfx {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.card.revealed {
    animation: card-flip 0.45s ease-out;
}

/* C7z: el revelado FINAL (casillas restantes al cerrar la ronda) 30% más lento
   (0.45s → 0.585s) — las transiciones se veían raras al destaparse todo de golpe.
   Va después de .card.revealed para ganar por orden (misma especificidad). */
.card.reveal-end.revealed {
    animation: card-flip 0.585s ease-out;
}

.card.revealed img {
    opacity: 0.15;
}

.card.revealed .card-symbol {
    opacity: 1;
    transform: scale(1);
}

.card.winner .card-symbol {
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.9));
}

.card.coin .card-symbol {
    animation: coin-pop 0.35s ease-out;
}

@keyframes coin-pop {
    0% { transform: scale(0.6); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.card:hover {
    transform: scale(calc(var(--card-scale) * 1.05));
}

@keyframes card-flip {
    0% { transform: scale(var(--card-scale)) rotateY(0); }
    50% { transform: scale(var(--card-scale)) rotateY(90deg); }
    100% { transform: scale(var(--card-scale)) rotateY(0); }
}

/* Controls - Compacto y transparente */
.controls-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border-radius: 0;
    border: none;
    flex-shrink: 0;
}

.controls-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.controls-top {
    justify-content: center;
}

.controls-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
}

.bet-selector,
.serie-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bet-selector {
    position: static;
    padding-bottom: 0;
}

.bet-label,
.serie-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.bet-label {
    visibility: hidden;
}

.bet-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-bet-adjust {
    width: clamp(44px, 10vw, 56px);
    height: clamp(44px, 10vw, 56px);
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn-bet-adjust:disabled,
.btn-bet-adjust.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
    pointer-events: none;
}

.btn-bet-adjust img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.bet-amount {
    font-family: 'Bangers', cursive;
    font-size: 1.25rem;
    color: var(--gold);
    min-width: 90px;
    text-align: center;
}

.bet-amount .sprite-number {
    --sprite-height: 18px;
}

.btn-currency {
    position: relative;
}

.btn-currency img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.btn-currency .currency-code {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-family: 'Titan One', cursive;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.btn-currency.no-icon img {
    display: none;
}

.btn-currency.no-icon .currency-code {
    display: flex;
}

.btn-play {
    position: relative;
    width: min(82vw, 360px);
    aspect-ratio: 584 / 78;
    border: none;
    background: url('../assets/gds-magico/ui/controls/btn_girar_todo.png') center/contain no-repeat;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* C8e: zona de acción de altura FIJA — JUGAR / comodín / continuar aparecen acá
   dentro sin reflujar el layout, así el contenedor de los boxes no se mueve. */
.action-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 96px;
}

.btn-comodin {
    margin-top: 10px;
    width: 220px;
    padding: 10px 16px;
    border-radius: 18px;
    border: 2px solid rgba(255, 214, 102, 0.9);
    background: linear-gradient(180deg, #ffcf5c 0%, #ff9f1a 100%);
    color: #3a1f00;
    font-family: 'Titan One', cursive;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 158, 26, 0.35);
}

.btn-comodin-skip {
    margin-top: 6px;
    width: 220px;
    padding: 8px 16px;
    border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(10, 10, 10, 0.4);
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Titan One', cursive;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.btn-comodin:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-comodin-skip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-auto {
    padding: 10px 16px;
    border-radius: 18px;
    border: 2px solid rgba(255, 215, 0, 0.5);
    background: rgba(0, 0, 0, 0.35);
    color: var(--gold);
    font-family: 'Titan One', cursive;
    cursor: pointer;
}

.btn-pick4-auto {
    margin-top: 10px;
    width: 240px;
    padding: 10px 18px;
    border-radius: 18px;
    border: 2px solid rgba(120, 220, 255, 0.9);
    background: linear-gradient(180deg, #2ecfff 0%, #2b6be6 100%);
    color: #071228;
    font-family: 'Titan One', cursive;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 18px rgba(46, 207, 255, 0.35);
}

.btn-pick4-auto.active {
    border-color: rgba(255, 214, 102, 0.95);
    background: linear-gradient(180deg, #ffe48a 0%, #ff9f1a 100%);
    color: #3a1f00;
    box-shadow: 0 10px 24px rgba(255, 180, 90, 0.55);
    animation: pick4-auto-glow 1.8s ease-in-out infinite;
}

.btn-pick4-auto i {
    font-size: 1.1rem;
}

.pick4-auto-status {
    margin-top: 4px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.pick4-auto-status.paused {
    color: #ffd86b;
}

.controls-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
}

.auto-status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    justify-self: end;
    text-align: right;
}

.auto-status.paused {
    color: #ffd86b;
}

.btn-play-text {
    font-family: 'Titan One', cursive;
    font-size: 1.3rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.btn-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-play.loading {
    opacity: 0.8;
    filter: saturate(0.7);
}

.comodin-banner {
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    padding: 10px 22px 12px;
    border-radius: 16px;
    background: radial-gradient(circle at top, #ffe48a 0%, #ffb347 35%, #ff7b00 68%, #c94500 100%);
    border: 2px solid rgba(255, 236, 180, 0.9);
    color: #fff;
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
    text-align: center;
    box-shadow: 0 0 22px rgba(255, 168, 0, 0.9), 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 4;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.comodin-banner.active {
    animation: comodin-burst 2.6s ease-out;
}

.comodin-banner::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 12px;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    opacity: 0.7;
    mix-blend-mode: screen;
    animation: comodin-shine 1.6s linear infinite;
    pointer-events: none;
}

.comodin-title,
.comodin-amount,
.comodin-sub {
    position: relative;
    z-index: 1;
}

.comodin-title {
    font-size: 1.15rem;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.comodin-amount {
    font-family: 'Titan One', cursive;
    font-size: 1.55rem;
    color: #fffbe6;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

.comodin-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
}

@keyframes comodin-burst {
    0% { opacity: 0; transform: translateX(-50%) scale(0.6) rotate(-4deg); }
    18% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(0deg); }
    55% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.92); }
}

@keyframes comodin-shine {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.serie-numero {
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* History */
/* History section eliminada del layout - solo se usa el modal */
.history-section {
    display: none;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.history-button {
    border: none;
    border-radius: 18px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
}

.history-title {
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 12px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 3px solid;
}

.history-item.win { border-color: var(--green); }
.history-item.lose { border-color: var(--red); }

.history-bet {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.history-result {
    font-family: 'Bangers', cursive;
}

.history-result.win { color: var(--green); }
.history-result.lose { color: var(--red); }

.powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 0;
    flex-shrink: 0;
}

.powered-by img {
    height: 18px;
    opacity: 0.6;
}

/* ===============================================
   OVERLAYS - Auto, History, Menu
   Diseñados para contener el contenido DENTRO del pergamino
   =============================================== */

.auto-overlay,
.history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 4vh 4vw;
    overflow: hidden;
}

.audio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 4vh 4vw;
}

.audio-panel {
    position: relative;
    width: min(320px, 86vw);
    background: rgba(20, 16, 12, 0.92);
    border: 2px solid rgba(255, 215, 120, 0.35);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audio-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(91, 43, 13, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #5b2b0d;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

.audio-title {
    font-family: 'Titan One', cursive;
    font-size: 1rem;
    color: #ffd86b;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.audio-row {
    display: grid;
    grid-template-columns: 70px 1fr 52px;
    align-items: center;
    gap: 8px;
    color: #fbe7b0;
    font-size: 0.8rem;
}

.audio-row input[type='range'] {
    width: 100%;
}

.audio-toggle {
    margin-top: 6px;
    background: #ffc45a;
    color: #5b2b0d;
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: 'Bangers', cursive;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Info/Paytable Overlay */
.info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 4vh 4vw;
}

.info-panel {
    position: relative;
    width: min(360px, 90vw);
    background: rgba(20, 16, 12, 0.92);
    border: 2px solid rgba(255, 215, 120, 0.35);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 80vh;
    overflow: hidden;
}

.info-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(91, 43, 13, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #5b2b0d;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

.info-title {
    font-family: 'Titan One', cursive;
    font-size: 1rem;
    color: #ffd86b;
    text-align: center;
    letter-spacing: 1px;
}

.info-subtitle {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.info-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    padding-right: 4px;
}

.info-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 0.75rem;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.info-row .info-name {
    color: #ffe8b5;
    font-weight: 600;
}

.info-row .info-mult {
    color: #ffd86b;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
}

.info-row .info-prob {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}

body.theme-proinso-bingo .info-row {
    grid-template-columns: 1fr auto;
}

body.theme-proinso-bingo .info-row .info-prob {
    display: none;
}

/* C8c: tabla de pagos del Mágico = 2 columnas (nombre + multiplicador). Sin la
   columna de porcentajes (el span .info-prob ya no se genera). */
body.theme-proinso-pick4 .info-row {
    grid-template-columns: 1fr auto;
}

body.theme-proinso-pick4 .info-row .info-prob {
    display: none;
}

/* Panel de Auto con pergamino como fondo */
.auto-panel {
    position: relative;
    width: min(320px, 85vw);
    aspect-ratio: 0.72; /* Proporción del pergamino */
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 88vh;
    overflow: hidden;
}

.pick4-panel {
    width: min(300px, 82vw);
    max-height: 84vh;
}

/* Imagen del pergamino como fondo */
.auto-panel .menu-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.audio-panel .menu-bg,
.audio-panel .menu-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.audio-panel > * {
    position: relative;
    z-index: 1;
}

/* Botón cerrar en la esquina del pergamino */
.auto-close {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(91, 43, 13, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #5b2b0d;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Contenedor del contenido DENTRO del pergamino */
.auto-content {
    position: relative;
    z-index: 1;
    width: 75%;
    max-height: 78%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 2px 10px;
}

.pick4-auto-content {
    /* C10d: el pergamino tiene aspect-ratio fijo → el contenido debe COMPACTARSE
       para que INICIAR no quede recortado (antes overflow:hidden cortaba ~30px).
       Reduzco gaps + dejo overflow-y:auto como red de seguridad. */
    max-height: 90%;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 5px;
}

.auto-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.auto-option {
    border: 2px solid rgba(91, 43, 13, 0.3);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    color: #5b2b0d;
    font-family: 'Bangers', cursive;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.auto-option.active,
.auto-option:hover {
    background: #5b2b0d;
    color: #fff;
    border-color: #5b2b0d;
    transform: scale(1.1);
}

.auto-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
}

.pick4-auto-content .menu-title {
    font-size: 0.82rem;
    margin-bottom: 3px;
}

.pick4-auto-content .menu-section + .menu-section {
    padding-top: 3px;
}

.pick4-auto-content .auto-options {
    gap: 6px;
}

.pick4-auto-content .auto-option {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
}

.pick4-auto-content .auto-options.auto-speed {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.pick4-auto-content .auto-options.auto-speed .auto-option {
    border-radius: 14px;
    flex: 1 1 30%;
    padding: 6px 10px;
    font-size: 0.75rem;
}

.pick4-auto-content .pick4-toggle {
    padding: 4px 10px;
    font-size: 0.7rem;
}

.pick4-auto-content .auto-actions {
    margin-top: 4px;
}

/* C10: la guía ahora SÍ se muestra (antes display:none la dejaba sin ninguna
   explicación visible). */
.pick4-auto-content .pick4-comodin-hint {
    display: block;
}

/* C10: subtítulo explicativo de la sección AUTO-COMODÍN */
.pick4-auto-content .menu-subtitle {
    margin-top: 1px;
    margin-bottom: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.2px;
    color: #f2c879;
    text-align: center;
}

/* C10b: el botón ancho del selector de comodín necesita ancho propio (no es
   una pastilla cuadrada como las de cantidad/velocidad). */
.pick4-comodin-row .auto-option--wide {
    width: auto;
    min-width: 56px;
    padding: 0 12px;
}

/* C10c: versión SIMPLE del AUTO-COMODÍN — solo No / Sí, botones grandes y claros. */
.pick4-comodin-row--binary {
    gap: 16px;
}
.pick4-comodin-row--binary .auto-option--wide {
    min-width: 82px;
    height: 38px;
    font-size: 0.92rem;
}

/* C10d: el estado ACTIVO de los botones del overlay usaba el MISMO marrón (#5b2b0d)
   que el panel → el botón se "perdía" contra el fondo y solo se veía el texto. Lo paso
   a DORADO con texto marrón oscuro: alto contraste y resalta sobre el panel marrón.
   Aplica a cantidad, velocidad y comodín por consistencia. */
.pick4-auto-content .auto-option.active {
    background: linear-gradient(180deg, #ffd96b, #f0a429);
    color: #4a2208;
    border-color: #ffe89a;
    box-shadow: 0 2px 10px rgba(240, 164, 41, 0.55);
}

@media (max-height: 720px) {
    .auto-panel {
        width: min(320px, 92vw);
    }

    .pick4-panel {
        width: min(280px, 86vw);
    }

    .auto-content {
        max-height: 84%;
        gap: 8px;
    }

    .auto-option {
        width: 38px;
        height: 38px;
        font-size: 0.8rem;
    }

    .auto-start,
    .auto-stop {
        padding: 8px 18px;
        font-size: 0.9rem;
    }

    .pick4-auto-content {
        gap: 6px;
    }
}

.pick4-comodin-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pick4-toggle {
    padding: 6px 12px;
    border-radius: 14px;
    border: 2px solid rgba(91, 43, 13, 0.3);
    background: rgba(255, 255, 255, 0.85);
    color: #5b2b0d;
    font-family: 'Titan One', cursive;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.pick4-toggle.active {
    background: #5b2b0d;
    color: #fff;
    border-color: #5b2b0d;
}

.pick4-threshold {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pick4-comodin-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: rgba(91, 43, 13, 0.7);
    text-align: center;
}

.auto-start,
.auto-stop {
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    font-family: 'Titan One', cursive;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.auto-start {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
}

.auto-stop {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

/* Botones de velocidad - rectangulares */
.auto-options.auto-speed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.auto-options.auto-speed .auto-option {
    border-radius: 20px;
    width: 100%;
    height: auto;
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* Separador visual entre secciones */
.menu-section + .menu-section {
    border-top: 1px solid rgba(91, 43, 13, 0.2);
    padding-top: 10px;
}

.history-modal {
    position: relative;
    width: min(90vw, 480px);
    max-height: 70vh;
    padding: 26px 20px;
    border-radius: 18px;
    background: rgba(18, 8, 30, 0.95);
    border: 2px solid rgba(255, 215, 0, 0.35);
    overflow: hidden;
}

.history-modal h3 {
    font-family: 'Titan One', cursive;
    color: var(--gold);
    margin-bottom: 12px;
}

.history-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
}

.history-full-list {
    max-height: 56vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* ===============================================
   MODALES DE RESULTADO - Victoria y Derrota
   Sin frames duplicados - solo el asset limpio
   =============================================== */

.win-modal,
.lose-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

/* Contenedor SIN fondo adicional - el asset ES el diseño */
.win-modal-content,
.lose-modal-content {
    position: relative;
    width: min(340px, 90vw);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* SIN background, SIN border, SIN padding que cree un frame */
    background: transparent;
    border: none;
    padding: 0;
}

/* Contenedor del contenido de victoria */
.win-celebration {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.win-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.35);
    width: 140%;
    max-width: 420px;
    height: auto;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: screen;
}

.win-video {
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
    z-index: 2;
}

.win-sprite {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Banner de victoria - es el elemento visual principal */
.win-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
    display: block;
    margin: 0 auto;
    z-index: 2;
}

/* Monto ganado - debajo del banner */
.win-amount {
    font-family: 'Bangers', cursive;
    /* C8d: escala con el ancho para que montos grandes no se desborden del modal */
    font-size: clamp(1.5rem, 8vw, 2.4rem);
    color: var(--green);
    text-shadow: 0 2px 10px rgba(0, 255, 95, 0.5),
                 0 0 30px rgba(0, 255, 95, 0.3);
    margin-top: 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.win-explosion-sprite {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.35);
    width: 140%;
    max-width: 420px;
    height: auto;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.win-multiplier {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Botones de continuar */
.btn-close-win,
.btn-close-lose {
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    padding: 14px 40px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
    font-family: 'Titan One', cursive;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-close-win:hover,
.btn-close-lose:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

/* Contenedor del contenido de derrota */
.lose-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Banner de derrota - SIN frame adicional */
.lose-banner {
    width: 100%;
    max-width: 280px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}

/* Texto de derrota */
.lose-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    font-family: 'Righteous', cursive;
    margin-top: 4px;
}

/* ===============================================
   MENU OVERLAY - Selector de Moneda
   El contenido DEBE quedar dentro del pergamino
   =============================================== */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 4vh 4vw;
    overflow: hidden;
}

/* Panel con pergamino como fondo */
.menu-panel {
    position: relative;
    width: min(320px, 85vw);
    aspect-ratio: 0.72; /* Proporción del pergamino */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imagen del pergamino */
.menu-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.menu-bg-sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.menu-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

body.theme-proinso-bingo .menu-bg {
    opacity: 1;
}

body.theme-proinso-bingo .menu-bg,
body.theme-proinso-bingo .menu-bg-video {
    display: block;
}

body.theme-proinso-bingo .menu-bg-sprite {
    display: block;
}

body.theme-proinso-bingo .menu-bg-video {
    object-fit: contain;
}

body.theme-proinso-bingo .menu-bg-video {
    display: none !important;
}

body.theme-proinso-bingo .loading-logo-video {
    display: none !important;
}

body.theme-proinso-bingo .board-logo-video {
    display: none !important;
}

body.theme-proinso-bingo .menu-panel,
body.theme-proinso-bingo .auto-panel,
body.theme-proinso-bingo .audio-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    width: min(330px, 88vw);
    aspect-ratio: 0.78;
    padding: 0;
}

body.theme-proinso-bingo .info-panel,
body.theme-proinso-bingo .history-modal {
    background: transparent;
    border: none;
    box-shadow: none;
    width: min(330px, 88vw);
    aspect-ratio: 0.78;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.theme-proinso-bingo .info-panel .menu-bg,
body.theme-proinso-bingo .history-modal .menu-bg,
body.theme-proinso-bingo .info-panel .menu-bg-video,
body.theme-proinso-bingo .history-modal .menu-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

body.theme-proinso-bingo .info-panel .menu-content,
body.theme-proinso-bingo .history-modal .menu-content {
    width: 72%;
    max-height: 62%;
    overflow: hidden;
    z-index: 1;
}

body.theme-proinso-bingo .history-full-list {
    max-height: 55%;
    overflow-y: auto;
}

body.theme-proinso-bingo .info-table {
    max-height: 58%;
    overflow-y: auto;
}

body.theme-proinso-bingo .history-modal h3,
body.theme-proinso-bingo .info-title {
    text-align: center;
}

body.theme-proinso-bingo .audio-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.theme-proinso-bingo .audio-panel .audio-title,
body.theme-proinso-bingo .audio-panel .audio-row,
body.theme-proinso-bingo .audio-panel .audio-toggle {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

body.theme-proinso-bingo .header-compact {
    position: absolute;
    top: 2.2%;
    left: 4%;
    right: 4%;
    height: 4%;
    justify-content: space-between;
    gap: 6px;
    padding: 0;
}

body.theme-proinso-bingo .header-compact .client-logo {
    display: block;
    height: 100%;
    max-width: 28%;
    margin: 0;
}

body.theme-proinso-bingo .credits-display {
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 4px;
    padding: 0;
    max-width: 64%;
    overflow: hidden;
    min-width: 0;
    flex: 0 1 64%;
    justify-content: flex-end;
    margin-left: auto;
}

body.theme-proinso-bingo .credits-label {
    display: none;
}

body.theme-proinso-bingo .credits-amount {
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    flex: 1 1 auto;
}

body.theme-proinso-bingo .credits-amount .sprite-number {
    gap: 0;
}

body.theme-proinso-bingo .sprite-credits {
    --sprite-height: clamp(16px, 3.4vw, 24px);
    --sprite-icon-height: clamp(17px, 3.7vw, 26px);
}

body.theme-proinso-bingo .sprite-bet {
    --sprite-height: clamp(20px, 4.4vw, 30px);
    --sprite-icon-height: clamp(21px, 4.8vw, 32px);
}

body.theme-proinso-bingo .sprite-label {
    font-size: clamp(0.7rem, 1.7vw, 0.9rem);
    margin-right: 6px;
    letter-spacing: 0;
}

body.theme-proinso-bingo .sprite-number {
    gap: 0;
    letter-spacing: 0;
    align-items: flex-end;
}

body.theme-proinso-bingo .board-amount .sprite-number,
body.theme-proinso-bingo .jackpot-tag .sprite-number,
body.theme-proinso-bingo .credits-amount .sprite-number,
body.theme-proinso-bingo .bet-amount .sprite-number {
    position: relative;
    padding: 0;
    background: none;
}

body.theme-proinso-bingo .sprite-number img {
    margin-left: 0;
}

body.theme-proinso-bingo .sprite-number img.sprite-separator {
    height: calc(var(--sprite-height, 14px) * 0.2);
    width: auto;
    margin: 0 2px !important;
    align-self: flex-end;
    transform: translateY(32%);
}

body.theme-proinso-bingo .sprite-number img:first-child {
    margin-left: 0;
}

body.theme-proinso-bingo .sprite-number img + img {
    margin-left: -1px;
}

body.theme-proinso-bingo .sprite-board {
    --sprite-height: clamp(18px, 4vw, 26px);
    --sprite-icon-height: clamp(20px, 4.4vw, 28px);
}

body.theme-proinso-bingo .sprite-jackpot {
    --sprite-height: clamp(14px, 3vw, 20px);
    --sprite-icon-height: clamp(15px, 3.2vw, 22px);
}

body.theme-proinso-bingo .bet-amount {
    max-width: 52%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    min-width: 0;
}

body.theme-proinso-bingo .controls-section {
    position: absolute;
    top: 72%;
    left: 12%;
    width: 76%;
    height: 24%;
    padding: 0;
    gap: 2%;
}

body.theme-proinso-bingo .controls-row {
    gap: 4px;
}

body.theme-proinso-bingo .bet-selector {
    width: 100%;
    gap: 4px;
}

body.theme-proinso-bingo .bet-label {
    display: none;
}

body.theme-proinso-bingo .bet-controls {
    width: 100%;
    justify-content: center;
    gap: 6%;
}

body.theme-proinso-bingo .btn-bet-adjust {
    width: clamp(36px, 10vw, 54px);
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.theme-proinso-bingo .btn-bet-adjust img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

body.theme-proinso-bingo .btn-play {
    width: 72%;
    margin-top: 2%;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.theme-proinso-bingo .btn-play-text {
    font-size: clamp(1.05rem, 3vw, 1.5rem);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

body.theme-proinso-bingo .board-bg {
    opacity: 0;
}

body.theme-proinso-bingo .cards-grid {
    top: 56%;
    width: 83%;
    gap: 3%;
    --card-scale: 0.96;
}

body.theme-proinso-bingo .board-header {
    flex-direction: column;
    gap: 2px;
    top: 2.5%;
    width: 82%;
    padding-top: 0;
    transform: translate(-50%, 0);
}

body.theme-proinso-bingo .board-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    margin-top: -1%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.6rem, 1.5vw, 0.85rem);
    letter-spacing: 0.2px;
    line-height: 1;
}

body.theme-proinso-bingo .board-title-prefix,
body.theme-proinso-bingo .board-jackpot-name {
    white-space: nowrap;
}

body.theme-proinso-bingo .board-amount {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 0.2%;
}

body.theme-proinso-bingo .board-instruction {
    top: 16%;
    width: 86%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: clamp(0.55rem, 1.4vw, 0.8rem);
    letter-spacing: 0.15px;
    line-height: 1;
}

body.theme-proinso-bingo .board-logo-video {
    transform: translate(-50%, -50%) scale(3);
}

body.theme-proinso-bingo .board-logo-sprite {
    transform: translate(-50%, -50%) scale(3);
}

body.theme-proinso-bingo .card-symbol {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 78%;
    transform: translate(-50%, -50%) scale(0.6);
}

body.theme-proinso-bingo .card.revealed .card-symbol {
    transform: translate(-50%, -50%) scale(1);
}

body.theme-proinso-bingo .card.coin .card-symbol {
    animation: coin-pop-centered 0.35s ease-out;
}

@keyframes coin-pop-centered {
    0% { transform: translate(-50%, -50%) scale(0.6); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

body.theme-proinso-bingo .torch-left {
    top: -15%;
    left: -22%;
    transform: scale(2);
}

body.theme-proinso-bingo .torch-right {
    top: -15%;
    right: -22%;
    transform: scale(2) scaleX(-1);
}

body.theme-proinso-bingo .jackpot-chest {
    margin-top: 0;
    transform: scale(1);
}

body.theme-proinso-bingo .jackpots-section {
    position: absolute;
    top: 7.6%;
    left: 6%;
    right: 6%;
    height: 14%;
    width: auto;
    max-width: none;
    margin: 0;
}

body.theme-proinso-bingo .jackpot-card.active .jackpot-chest {
    transform: scale(1.02);
}

body.theme-proinso-bingo .chest-img,
body.theme-proinso-bingo .chest-video,
body.theme-proinso-bingo .chest-sprite {
    width: 100%;
    max-width: 100%;
}

body.theme-proinso-bingo .chest-img {
    visibility: hidden;
}

body.theme-proinso-bingo .chest-video,
body.theme-proinso-bingo .chest-sprite {
    top: 0;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
}

body.theme-proinso-bingo .chest-sprite {
    position: absolute;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

body.theme-proinso-bingo .jackpot-overlay {
    top: auto;
    bottom: 10%;
    width: 92%;
    padding: 0;
    gap: 2px;
    background: none;
    background-image: none;
    text-align: center;
}

body.theme-proinso-bingo .jackpot-tag {
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    min-width: auto;
    min-height: clamp(16px, 2.2vw, 24px);
    padding: 1px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transform-origin: center;
    white-space: nowrap;
    line-height: 1;
}

body.theme-proinso-bingo .jackpot-name {
    font-size: clamp(0.58rem, 1.55vw, 0.78rem);
    color: #6b2a00;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    margin-top: -0.5%;
    line-height: 1;
}

body.theme-proinso-bingo .jackpot-tag {
    margin-top: 0.8%;
}

body.theme-proinso-bingo .jackpot-card.epico .jackpot-tag {
    background: linear-gradient(180deg, #1b3f86 0%, #7dd5ff 100%);
    border-radius: 8px;
}

body.theme-proinso-bingo .jackpot-card.legendario .jackpot-tag {
    background: linear-gradient(180deg, #5621a8 0%, #f49ae6 100%);
    border-radius: 8px;
}

body.theme-proinso-bingo .jackpot-card.oro .jackpot-tag {
    background: linear-gradient(180deg, #8c2f1e 0%, #f5a46c 100%);
    border-radius: 8px;
}

body.theme-proinso-bingo .jackpot-card.active .jackpot-tag {
    font-size: inherit;
    box-shadow: none;
    animation: none;
}

body.theme-proinso-bingo .demo-watermark {
    display: none !important;
}

body.theme-proinso-bingo .board-amount .sprite-number,
body.theme-proinso-bingo .jackpot-tag .sprite-number,
body.theme-proinso-bingo .credits-amount .sprite-number,
body.theme-proinso-bingo .bet-amount .sprite-number {
    max-width: 100%;
    gap: 0;
}

body.theme-proinso-bingo .jackpot-tag .sprite-number {
    gap: 0;
}

body.theme-proinso-pick4 .game-board {
    aspect-ratio: 0.83;
    --pick4-board-height-budget: calc(var(--app-height) - 340px);
    width: min(100%, 94vw, 430px, calc(max(250px, var(--pick4-board-height-budget)) * 0.83));
    height: auto;
}

body.theme-proinso-pick4 .game-board-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

body.theme-proinso-pick4 .header-compact {
    padding: 6px 0;
}

body.theme-proinso-pick4 .client-logo {
    height: 46px;
}

body.theme-proinso-pick4 .credits-display {
    flex-direction: row;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.28);
}

body.theme-proinso-pick4 .credits-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
}

body.theme-proinso-pick4 .credits-amount {
    font-size: 1.08rem;
    color: #fff;
    font-family: 'Titan One', cursive;
}

body.theme-proinso-pick4 .board-header {
    flex-direction: row;
    gap: 6px;
    top: 10%;
    width: 86%;
    max-width: 86%;
    padding-top: 0;
    transform: translate(-50%, -50%);
    /* C8d: que el monto largo nunca rompa el marco; el auto-fit del JS lo escala */
    overflow: hidden;
    justify-content: center;
}

body.theme-proinso-pick4 .board-title {
    flex-shrink: 0;
}

body.theme-proinso-pick4 .board-amount {
    min-width: 0;
}

body.theme-proinso-pick4 .board-title {
    font-size: clamp(0.8rem, 2.6vw, 1rem);
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
}

body.theme-proinso-pick4 .board-amount {
    font-size: clamp(1.1rem, 4.2vw, 1.6rem);
    line-height: 1;
    margin-top: 0;
    color: #f7cf5b;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

body.theme-proinso-pick4 .board-header.amount-only .board-amount {
    font-size: clamp(1.3rem, 4.8vw, 1.9rem);
}

body.theme-proinso-pick4 .board-instruction {
    top: 22%;
    width: 82%;
    font-size: clamp(0.65rem, 2vw, 0.9rem);
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: none;
}

body.theme-proinso-pick4 .board-logo-video,
body.theme-proinso-pick4 .board-logo-sprite {
    display: none !important;
}

body.theme-proinso-pick4 .chest-img {
    display: block;
    opacity: 1;
}

body.theme-proinso-pick4 .cards-grid {
    top: 59%;
    width: 68%;
    gap: 4%;
    --card-scale: 1;
}

body.theme-proinso-pick4 .card-symbol {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.9);
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

body.theme-proinso-pick4 .controls-section {
    gap: 6px;
    padding: 4px 10px 6px;
}

body.theme-proinso-pick4 .bet-controls {
    gap: 6px;
}

body.theme-proinso-pick4 .btn-bet-adjust:not(.btn-currency) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #00f060 0%, #00c647 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), inset 0 2px 4px rgba(255, 255, 255, 0.28);
}

body.theme-proinso-pick4 .btn-bet-adjust:not(.btn-currency) img {
    display: none;
}

body.theme-proinso-pick4 .btn-bet-adjust:not(.btn-currency)::before {
    font-family: 'Titan One', cursive;
    font-size: 1.35rem;
    line-height: 1;
    color: #062b13;
}

body.theme-proinso-pick4 .btn-bet-minus::before {
    content: '-';
}

body.theme-proinso-pick4 .btn-bet-plus::before {
    content: '+';
}

body.theme-proinso-pick4 .btn-currency {
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

body.theme-proinso-pick4 .controls-icons .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 215, 0, 0.35);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}

body.theme-proinso-pick4 .controls-icons .icon-button i {
    color: #f9e4b7;
    font-size: 0.95rem;
}

body.theme-proinso-pick4 .auto-status {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

/* C7u: el botón principal del Royal usa una imagen con "GIRAR TODO" horneado.
   En Pick4 se elige carta por carta, así que el botón debe decir "JUGAR".
   Reemplazamos la imagen por una píldora verde en CSS (mismo estilo) y mostramos
   el texto dinámico del span. */
body.theme-proinso-pick4 .btn-play {
    aspect-ratio: 584 / 92;
    background: linear-gradient(180deg, #95dd55 0%, #5fb52a 48%, #3d8f15 100%);
    border: 3px solid #ffd23f;
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        inset 0 2px 5px rgba(255, 255, 255, 0.5),
        inset 0 -3px 7px rgba(0, 0, 0, 0.28);
}

body.theme-proinso-pick4 .btn-play:active {
    transform: translateY(1px);
    filter: brightness(0.96);
}

body.theme-proinso-pick4 .btn-play-text {
    opacity: 1;
    font-family: 'Titan One', cursive;
    font-size: clamp(1.15rem, 5.2vw, 1.7rem);
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 8px rgba(0, 0, 0, 0.45);
}

body.theme-proinso-pick4 .win-image,
body.theme-proinso-pick4 .lose-banner {
    display: none;
}

body.theme-proinso-pick4 .card.revealed img:not(.card-symbol) {
    opacity: 0;
}

body.theme-proinso-pick4 .card.revealed .card-symbol {
    transform: scale(1);
}

body.theme-proinso-pick4 .menu-bg,
body.theme-proinso-pick4 .menu-bg-video {
    display: block;
}

body.theme-proinso-pick4 .menu-bg-video {
    object-fit: contain;
}

body.theme-proinso-pick4 .menu-panel,
body.theme-proinso-pick4 .auto-panel,
body.theme-proinso-pick4 .audio-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: min(320px, 86vw);
    aspect-ratio: 0.72;
    padding: 0;
    overflow: hidden;
}

body.theme-proinso-pick4 .info-panel,
body.theme-proinso-pick4 .history-modal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: min(320px, 86vw);
    aspect-ratio: 0.72;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.theme-proinso-pick4 .info-panel .menu-bg,
body.theme-proinso-pick4 .history-modal .menu-bg,
body.theme-proinso-pick4 .info-panel .menu-bg-video,
body.theme-proinso-pick4 .history-modal .menu-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

body.theme-proinso-pick4 .info-panel .menu-content,
body.theme-proinso-pick4 .history-modal .menu-content {
    width: 72%;
    max-height: 62%;
    overflow: hidden;
    z-index: 1;
}

body.theme-proinso-pick4 .history-full-list {
    max-height: 55%;
    overflow-y: auto;
}

body.theme-proinso-pick4 .info-table {
    max-height: 58%;
    overflow-y: auto;
}

body.theme-proinso-pick4 .history-modal h3,
body.theme-proinso-pick4 .info-title {
    text-align: center;
}

body.theme-proinso-pick4 .audio-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.theme-proinso-pick4 .audio-panel .audio-title,
body.theme-proinso-pick4 .audio-panel .audio-row,
body.theme-proinso-pick4 .audio-panel .audio-toggle {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}


/* Botón cerrar */
.menu-close {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(91, 43, 13, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #5b2b0d;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Contenedor del contenido DENTRO del pergamino */
.menu-content {
    position: relative;
    z-index: 1;
    width: 70%;
    max-height: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}

.menu-section {
    width: 100%;
    text-align: center;
}

.menu-title {
    font-family: 'Titan One', cursive;
    color: #5b2b0d;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Grid de monedas 2x2 */
.menu-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-items: center;
    width: 100%;
}

.menu-option {
    border: 3px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #5b2b0d;
    font-family: 'Righteous', cursive;
    transition: all 0.2s;
    width: 100%;
}

.menu-option:hover,
.menu-option.active {
    border-color: #5b2b0d;
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.menu-option img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(91, 43, 13, 0.3);
    background: #fff;
}

.menu-option img.hidden,
.menu-option.no-icon img {
    display: none;
}

.menu-option span {
    font-size: 0.8rem;
    font-weight: bold;
}

/* ===============================================
   RESPONSIVE DESIGN - Mobile First
   =============================================== */

@media (max-width: 900px) {
    .controls-section {
        text-align: center;
    }

    .btn-play {
        width: 100%;
        max-width: 280px;
    }

    .btn-comodin {
        width: 100%;
        max-width: 280px;
    }

    .btn-comodin-skip {
        width: 100%;
        max-width: 280px;
    }

    .btn-pick4-auto {
        width: 100%;
        max-width: 280px;
    }

    .pick4-auto-status {
        font-size: 0.7rem;
    }

    .board-header {
        width: 80%;
        gap: 6px;
    }

    .cards-grid {
        width: 78%;
        top: 58%;
        --card-scale: 0.98;
        gap: 3%;
    }

    .jackpots-section {
        gap: 0;
    }

    .jackpot-card.legendario {
        transform: scale(1);
    }

    .jackpot-chest {
        margin-top: 18px;
        transform: scale(1.1);
    }

    .chest-img {
        width: 118px;
    }

    .jackpot-tag {
        font-size: 0.82rem;
        padding: 2px 7px;
    }

    .jackpot-name {
        font-size: 0.7rem;
    }

    /* Modales en tablet */
    .menu-panel,
    .auto-panel {
        width: min(300px, 80vw);
    }

    .game-board {
        width: min(90vw, 62vh);
    }

    .top-prizes-panel {
        width: auto;
        padding: 3px 8px;
        gap: 6px;
    }
    .top-prizes-list {
        gap: 4px;
    }
}

/* C12b: en DESKTOP el Pick4 vive en una columna centrada de ~353-480px (C11). Los
   cofres usaban tamaños base en vw (relativos al VIEWPORT, no a la columna) → la placa
   (180px) superaba la celda (~150px) y se solapaban/cortaban. Acá los dimensionamos en
   % de la CELDA → escalan con la columna, igual de prolijos que en móvil. */
@media (min-width: 901px) {
    body.theme-proinso-pick4 .jackpot-chest {
        margin-top: 4px;
        transform: scale(1);
    }
    body.theme-proinso-pick4 .jackpot-card.active .jackpot-chest {
        transform: scale(1.04);
    }
    body.theme-proinso-pick4 .chest-img {
        width: 96%;
    }
    body.theme-proinso-pick4 .chest-sprite {
        width: 44%;
        top: 20%;
    }
    body.theme-proinso-pick4 .jackpot-overlay {
        bottom: 10%;
    }
    body.theme-proinso-pick4 .jackpot-name {
        font-size: 0.72rem;
    }
    body.theme-proinso-pick4 .jackpot-tag {
        font-size: 0.82rem;
    }
    /* C13: en desktop el board (top ~98px) solapa la base de los cofres y, al tener
       las cards laterales z-index auto, el board-bg (z:0) pintaba ENCIMA → cortaba el
       último dígito del monto e "invadía" GIGANTE/MINI. MEGA (.legendario z:2) no
       sufría porque ya estaba sobre el board. Elevamos toda la sección de pozos sobre
       el board (los cofres son foreground, como MEGA) → los 3 montos quedan completos
       y los cofres prolijos. Scoped a desktop: el layout móvil (correcto) no se toca. */
    body.theme-proinso-pick4 .jackpots-section {
        position: relative;
        z-index: 3;
    }
}

/* C14: en desktops BAJOS (≤920px de alto: laptops 768/800/864/900) el board mide ~51%
   del viewport de alto → es más alto que el hueco entre cofres y controles y, al
   centrarse en su sección, sobresalía hacia ARRIBA tapando/“invadiendo” la base de los
   cofres (el marco central pegado a los cofres). Lo achicamos un toque ANCLADO ABAJO
   (transform-origin: center bottom): el tope baja y se separa de los cofres mientras la
   base queda donde estaba, cerca de los botones (lo pedido). Medido: gapArriba pasa de
   −38/−33/−15 a +17/+25/+50 en 768/800/900, sin chocar controles. Scoped a desktop bajo:
   pantallas altas (≥921px, p.ej. 1920×1080, gap natural 43px) y móvil quedan intactas. */
@media (min-width: 901px) and (max-height: 920px) {
    body.theme-proinso-pick4 .game-board {
        transform: scale(0.86);
        transform-origin: center bottom;
    }
}

@media (min-width: 1024px) {
    body.theme-proinso-bingo .jackpots-section {
        max-width: 720px;
        margin: 0 auto;
    }

    body.theme-proinso-bingo .jackpot-chest {
        margin-top: 6px;
        transform: scale(0.9);
    }

    body.theme-proinso-bingo .jackpot-card.active .jackpot-chest {
        transform: scale(1);
    }

    body.theme-proinso-bingo .chest-img,
    body.theme-proinso-bingo .chest-video {
        width: clamp(110px, 10vw, 150px);
    }

    body.theme-proinso-bingo .game-board {
        width: min(42vw, 520px);
    }

    /* C7w: en desktop el chrome (pozos + controles) es más alto que en mobile;
       subimos el margen para que el cálculo de ancho por altura siga entrando. */
    body.theme-proinso-pick4 .game-board {
        --chrome: 490px;
    }
}

@media (max-width: 600px) {
    .game-container {
        padding: 4px 6px;
        padding-top: calc(4px + env(safe-area-inset-top));
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

    .header-compact .client-logo {
        height: 36px;
        max-width: 150px;
    }

    /* Fix C1 (plan refactor 2026-06-11): las reglas del tema (0-2-1) pisaban
       a las del media query (0-2-0) y el header quedaba con ~6px de margen
       a 390px. Igualar especificidad para que móvil gane. */
    body.theme-proinso-pick4 .client-logo {
        height: 36px;
    }
    body.theme-proinso-pick4 .credits-amount {
        font-size: 1rem;
    }

    body.theme-proinso-bingo .header-compact .client-logo {
        height: 32px;
        max-width: 120px;
    }

    body.theme-proinso-bingo .credits-display {
        max-width: 52vw;
    }

    body.theme-proinso-bingo .credits-amount {
        max-width: 42vw;
    }

    body.theme-proinso-bingo .board-header {
        top: 7%;
        width: 82%;
    }

    body.theme-proinso-bingo .board-instruction {
        top: 14%;
    }

    .header-compact .credits-display {
        padding: 4px 10px;
    }

    .header-compact .credits-amount {
        font-size: 1rem;
    }

    .header-premium {
        flex-direction: column;
    }

    .header-actions.right {
        position: static;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .game-board {
        width: auto;
        height: calc(var(--vh) * 50);
        max-width: 92vw;
        max-height: calc(var(--vh) * 50);
    }

    body.theme-proinso-pick4 .game-board {
        width: min(94vw, 430px);
        height: auto;
        max-width: 94vw;
        max-height: none;
    }

    body.theme-proinso-bingo .game-board {
        width: min(92vw, 520px);
        max-width: 92vw;
    }

    .cards-grid {
        width: 76%;
        top: 60%;
        --card-scale: 0.94;
        gap: 3%;
    }

    body.theme-proinso-bingo .cards-grid {
        width: 68%;
        top: 60%;
        --card-scale: 0.9;
    }

    /* C12: en móvil la placa se achicaba pero el cofre animado NO → el cofre
       desbordaba la celda e invadía el header. Fix (igual proporción que desktop,
       donde se ve bien): placa MÁS GRANDE → la sección tiene alto para contener el
       cofre; cofre llena la celda; el nombre+monto van sobre el TERCIO INFERIOR del
       cofre (su banner), como en desktop. */
    .jackpot-chest {
        margin-top: 4px;
        transform: scale(1);
    }

    .chest-img {
        width: clamp(128px, 32vw, 150px);
    }

    body.theme-proinso-pick4 .chest-sprite {
        width: 44%;
        top: 20%;
    }

    .jackpot-overlay {
        bottom: 10%;
    }

    .jackpot-tag {
        font-size: 0.72rem;
        padding: 2px 6px;
    }

    .jackpot-name {
        font-size: 0.62rem;
    }

    /* Modales en móvil */
    .menu-panel,
    .auto-panel {
        width: 86vw;
        max-height: 78vh;
    }

    .menu-content,
    .auto-content {
        width: 74%;
        max-height: 62%;
    }

    .menu-option img {
        width: 40px;
        height: 40px;
    }

    .menu-option span {
        font-size: 0.7rem;
    }

    .menu-title {
        font-size: 0.85rem;
    }

    .controls-section {
        gap: 4px;
        padding: 2px 6px;
    }

    .controls-row {
        gap: 6px;
    }

    .bet-controls {
        gap: 6px;
    }

    .btn-bet-adjust {
        width: clamp(34px, 10vw, 40px);
        height: clamp(34px, 10vw, 40px);
    }

    .bet-amount {
        font-size: 1rem;
        min-width: 64px;
    }

    .btn-play {
        width: 100%;
        max-width: clamp(210px, 70vw, 240px);
        height: clamp(54px, 14vw, 60px);
    }

    .btn-pick4-auto {
        width: 100%;
        max-width: clamp(210px, 70vw, 240px);
    }

    .btn-play-text {
        font-size: 1.05rem;
    }

    .top-prizes-panel {
        width: auto;
        padding: 3px 6px;
        gap: 4px;
    }

    .top-prize-item {
        padding: 2px 6px;
        font-size: clamp(0.45rem, 2vw, 0.65rem);
    }

    .controls-icons {
        gap: 6px;
    }

    .icon-button {
        width: clamp(30px, 8vw, 36px);
        height: clamp(30px, 8vw, 36px);
        border-radius: 10px;
    }

    .btn-auto {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .auto-status {
        font-size: 0.65rem;
    }

    .auto-option {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    /* Modales de resultado en móvil */
    .win-modal-content,
    .lose-modal-content {
        width: min(300px, 88vw);
    }

    .win-amount {
        font-size: 2rem;
    }

    .btn-close-win,
    .btn-close-lose {
        padding: 12px 32px;
        font-size: 0.9rem;
    }

    .info-panel {
        width: 90vw;
        max-height: 78vh;
    }

    .info-row {
        font-size: 0.7rem;
        padding: 5px 6px;
    }
}

@media (max-width: 480px) {
    .board-border-video {
        top: 3.2%;
        left: 12%;
        width: 76%;
    }

    .torch-flame {
        width: 12%;
        top: 6%;
    }

    body.theme-proinso-bingo .torch-left {
        top: -7%;
        left: -12%;
    }

    body.theme-proinso-bingo .torch-right {
        top: -7%;
        right: -12%;
    }

    body.theme-proinso-bingo .game-board {
        width: min(94vw, 520px);
        max-width: 94vw;
    }

    body.theme-proinso-bingo .board-header {
        top: 6%;
    }

    body.theme-proinso-bingo .board-instruction {
        top: 13%;
    }

    body.theme-proinso-bingo .cards-grid {
        width: 66%;
        top: 60%;
        --card-scale: 0.9;
    }
}

@media (max-width: 400px) {
    /* Pantallas muy pequeñas */
    .menu-panel,
    .auto-panel {
        width: 92vw;
    }

    .menu-content,
    .auto-content {
        width: 68%;
        gap: 8px;
    }

    .menu-options {
        gap: 6px;
    }

    .menu-option {
        padding: 6px 8px;
    }

    .menu-option img {
        width: 36px;
        height: 36px;
    }

    .auto-option {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

/* Proinso Bingo - overrides finales para mantener proporciones del arte base */
body.theme-proinso-bingo .game-container {
    width: min(100vw, calc(var(--app-height) * 1080 / 2313));
    height: min(var(--app-height), calc(100vw * 2313 / 1080));
    aspect-ratio: 1080 / 2313;
    padding: 0;
}

body.theme-proinso-bingo .header-compact {
    position: absolute;
    top: 2.2%;
    left: 4%;
    right: 4%;
    height: 4%;
}

body.theme-proinso-bingo .jackpots-section {
    position: absolute;
    top: 7.6%;
    left: 6%;
    right: 6%;
    height: 14%;
}

body.theme-proinso-bingo .game-board-section {
    position: absolute;
    top: 24.9%;
    left: 20%;
    width: 60%;
    height: 53%;
}

body.theme-proinso-bingo .game-board {
    width: 100%;
    height: 100%;
}

body.theme-proinso-bingo .cards-grid {
    top: 56%;
    width: 83%;
}

body.theme-proinso-bingo .board-header {
    top: 2.5%;
    width: 82%;
}

body.theme-proinso-bingo .board-instruction {
    top: 16%;
}

body.theme-proinso-bingo .controls-section {
    position: absolute;
    top: 72%;
    left: 12%;
    width: 76%;
    height: 24%;
}

body.theme-proinso-bingo .torch-left {
    top: -15%;
    left: -22%;
}

body.theme-proinso-bingo .torch-right {
    top: -15%;
    right: -22%;
}

body.theme-proinso-bingo .chest-img {
    visibility: hidden;
}

/* Pick4: overrides finales por ALTURA real del viewport.
   En navegadores embebidos (WhatsApp/Safari con barras) el alto útil puede quedar
   en 540-720px. El tablero no puede seguir midiendo 94vw porque empuja JUGAR fuera
   de pantalla. Estas reglas van al final para ganar a los media queries móviles. */
body.theme-proinso-pick4 .game-board {
    max-width: 100%;
    width: min(100%, 94vw, 430px, calc(max(250px, calc(var(--app-height) - 340px)) * 0.83));
}

body.theme-proinso-pick4 .game-board-section {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 900px) and (max-height: 760px) {
    body.theme-proinso-pick4 .game-container {
        padding-top: calc(3px + env(safe-area-inset-top));
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }

    body.theme-proinso-pick4 .header-compact {
        padding: 2px 0;
    }

    body.theme-proinso-pick4 .client-logo {
        height: 34px;
        max-width: 124px;
    }

    body.theme-proinso-pick4 .credits-display {
        gap: 5px;
        padding: 3px 8px;
    }

    body.theme-proinso-pick4 .credits-label {
        font-size: 0.56rem;
    }

    body.theme-proinso-pick4 .credits-amount {
        font-size: 0.9rem;
    }

    body.theme-proinso-pick4 .jackpot-chest {
        margin-top: 0;
    }

    body.theme-proinso-pick4 .chest-img {
        width: clamp(96px, 27vw, 118px);
    }

    body.theme-proinso-pick4 .jackpot-name {
        font-size: 0.58rem;
    }

    body.theme-proinso-pick4 .jackpot-tag {
        font-size: 0.64rem;
        padding: 1px 5px;
    }

    body.theme-proinso-pick4 .game-board {
        width: auto;
        max-width: min(100%, 92vw, 390px);
        height: min(100%, max(230px, calc(var(--app-height) - 260px)));
    }

    body.theme-proinso-pick4 .cards-grid {
        width: 66%;
        gap: 3.5%;
    }

    body.theme-proinso-pick4 .board-instruction {
        font-size: clamp(0.58rem, 1.85vw, 0.78rem);
    }

    body.theme-proinso-pick4 .top-prizes-row {
        margin-top: 1px;
        margin-bottom: 2px;
    }

    body.theme-proinso-pick4 .top-prizes-panel {
        padding: 2px 6px;
        gap: 4px;
    }

    body.theme-proinso-pick4 .tp-label {
        font-size: clamp(0.42rem, 1.8vw, 0.58rem);
    }

    body.theme-proinso-pick4 .tp-value {
        font-size: clamp(0.6rem, 2.5vw, 0.86rem);
    }

    body.theme-proinso-pick4 .controls-section {
        gap: 2px;
        padding: 2px 6px 4px;
    }

    body.theme-proinso-pick4 .bet-selector {
        gap: 2px;
    }

    body.theme-proinso-pick4 .bet-controls {
        gap: 4px;
    }

    body.theme-proinso-pick4 .btn-bet-adjust {
        width: clamp(30px, 8.8vw, 36px);
        height: clamp(30px, 8.8vw, 36px);
    }

    body.theme-proinso-pick4 .bet-amount {
        font-size: 0.92rem;
        min-width: 58px;
    }

    body.theme-proinso-pick4 .action-zone {
        min-height: 62px;
    }

    body.theme-proinso-pick4 .btn-play {
        max-width: clamp(196px, 66vw, 230px);
        height: clamp(46px, 9.5vh, 52px);
    }

    body.theme-proinso-pick4 .btn-play-text {
        font-size: 0.96rem;
    }

    body.theme-proinso-pick4 .controls-bottom {
        min-height: 34px;
    }

    body.theme-proinso-pick4 .icon-button {
        width: 34px;
        height: 34px;
    }

    body.theme-proinso-pick4 .btn-auto {
        padding: 7px 13px;
        border-radius: 16px;
        font-size: 0.8rem;
    }

    body.theme-proinso-pick4 .auto-status {
        font-size: 0.68rem;
    }
}

@media (max-width: 900px) and (max-height: 600px) {
    body.theme-proinso-pick4 .game-board {
        width: auto;
        max-width: min(100%, 90vw, 360px);
        height: min(100%, max(210px, calc(var(--app-height) - 238px)));
    }

    body.theme-proinso-pick4 .top-prizes-row {
        display: none;
    }

    body.theme-proinso-pick4 .action-zone {
        min-height: 56px;
    }

    body.theme-proinso-pick4 .btn-play {
        height: 44px;
    }
}