:root {
    --arcade-bg: #89cf00;
    --board-white: #f0f0f0;
    --segment-red: #ff0000;
    --segment-yellow: #ffcc00;
    --panel-border: #666;
    --display-bg: #440000;
    --led-off: #440000;
    --led-on: #ff0000;
    --font-digital: 'Seven Segment', sans-serif;
    --font-ui: 'Chakra Petch', sans-serif;
    /* Design system da home */
    --rf-yellow: #facc15;
    --rf-pink:   #ec4899;
    --rf-cyan:   #48e4ec;
    --rf-dark:   #0f1117;
    --rf-card:   #16191f;
    --rf-white:  #ffffff;
    --rf-font:   'Space Mono', monospace;
    --rf-radius: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

/* Importa Space Mono para consistência com a home */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

.arcade-body {
    background-color: #000;
    background-image: url('../images/game_body.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: var(--font-ui);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    padding: 0 0 24px 0;
    gap: 14px;
}

/* Overlay escuro no fundo para o tabuleiro se destacar */
.arcade-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%),
        linear-gradient(to bottom, rgba(0,0,10,0.5) 0%, transparent 15%, transparent 80%, rgba(0,0,10,0.6) 100%);
    pointer-events: none;
    z-index: 0;
}
.arcade-body > *:not(.modal):not(.rf-navbar):not(.game-toast) { position: relative; z-index: 1; }

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   GAME HEADER BAR
   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
#game-header-bar {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(8,10,22,0.92), rgba(14,18,38,0.92));
    border: 1px solid rgba(72,228,236,0.15);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* T\u00edtulo esq */
.gh-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gh-icon { font-size: 1.3rem; }

.gh-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gh-name {
    font-family: var(--rf-font);
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

.gh-badge {
    font-family: var(--rf-font);
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--rf-cyan);
    color: #000;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}
/* Chips de multiplicador centrais animados */
.gh-mults {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    width: 100%;
}

.gh-mults-track {
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
    width: max-content;
    animation: scroll-mults 12s linear infinite;
}

@keyframes scroll-mults {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 2px)); } /* Shift exactly half its width minus half a gap for a perfect seamless 2-set loop */
}

/* Hover effect on track to pause on mouse-over, if desired (optional) */
.gh-mults:hover .gh-mults-track {
    animation-play-state: paused;
}

.mult-chip {
    font-family: var(--rf-font);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.mult-100 { background: rgba(250,204,21,0.20); color: #facc15; border: 1px solid rgba(250,204,21,0.45); }
.mult-40  { background: rgba(249,115,22,0.18); color: #fb923c; border: 1px solid rgba(249,115,22,0.40); }
.mult-30  { background: rgba(52,211,153,0.18); color: #34d399; border: 1px solid rgba(52,211,153,0.40); }
.mult-20  { background: rgba(56,189,248,0.18); color: #38bdf8; border: 1px solid rgba(56,189,248,0.40); }
.mult-15  { background: rgba(167,139,250,0.18); color: #a78bfa; border: 1px solid rgba(167,139,250,0.40); }
.mult-10  { background: rgba(248,113,113,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.40); }
.mult-5   { background: rgba(255,255,255,0.10); color: #ccc;    border: 1px solid rgba(255,255,255,0.25); }

/* Player info dir */
.gh-player {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.gh-avatar {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--rf-yellow), #f59e0b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rf-font);
    font-size: 0.7rem;
    font-weight: 700;
    color: #000;
    box-shadow: 0 0 10px rgba(250,204,21,0.4);
    flex-shrink: 0;
}

.gh-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gh-player-name {
    font-family: var(--rf-font);
    font-size: 0.42rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gh-player-bal {
    font-family: var(--rf-font);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--rf-yellow);
}

/* Oculta os chips menores em telas muito pequenas */
@media (max-width: 380px) {
    .mult-10, .mult-5 { display: none; }
    .gh-mults { gap: 3px; }
}

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   WINNER TICKER
   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
#win-ticker {
    width: 100%;
    max-width: 500px;
    background: rgba(5,7,18,0.88);
    border: 1px solid rgba(250,204,21,0.18);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(250,204,21,0.06);
}

.ticker-label {
    font-family: var(--rf-font);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--rf-yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(250,204,21,0.6);
    padding-right: 10px;
    border-right: 1px solid rgba(250,204,21,0.25);
}

.ticker-track {
    overflow: hidden;
    flex: 1;
}

.ticker-inner {
    display: inline-flex;  /* ensures true max-content width regardless of flex parent */
    flex-shrink: 0;
    gap: 40px;
    width: max-content;
    animation: ticker-scroll 70s linear infinite; /* Much slower now */
    white-space: nowrap;
}

.ticker-inner span {
    font-family: var(--rf-font);
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    flex-shrink: 0;
}

.ticker-inner span strong {
    color: var(--rf-yellow);
    font-weight: 700;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } /* Shift by exactly half width minus half the gap */
}

#win-ticker:hover .ticker-inner {
    animation-play-state: paused;
}

/* Navbar full-width dentro do arcade-body */
.arcade-body .rf-navbar {
    align-self: stretch;   /* ignora o align-items:center do pai */
    width: 100%;
    max-width: 100%;
    position: sticky;
    top: 0;
    margin-bottom: 0;
    z-index: 600; /* Garante que ficará acima de todos os paineis da fase */
}

/* ──────────────────────────────────────────
   USER STATUS BAR  (estilo RetroFácil home)
   ────────────────────────────────────────── */
#user-bar {
    width: 100%;
    max-width: 500px;
    background: rgba(10, 12, 22, 0.88);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50px;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--rf-yellow), #f59e0b);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-weight: 900;
    font-size: 1rem;
    font-family: var(--rf-font);
    box-shadow: 0 0 12px rgba(250,204,21,0.4);
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-name {
    color: rgba(255,255,255,0.9);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--rf-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-balance {
    color: var(--rf-yellow);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--rf-font);
}

.user-actions {
    display: flex;
    gap: 7px;
}

/* Botões do header – espelho dos botões da home */
.nav-btn {
    padding: 6px 12px;
    border-radius: 50px;
    border: none;
    color: #000;
    font-family: var(--rf-font);
    font-size: 0.6rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nav-btn:active { transform: scale(0.95); }

.orange-btn {
    background: linear-gradient(135deg, #f59e0b, var(--rf-yellow));
    box-shadow: 0 3px 12px rgba(245,158,11,0.35);
    color: #000;
}
.orange-btn:hover { box-shadow: 0 4px 18px rgba(245,158,11,0.55); }

.green-btn {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 3px 12px rgba(34,197,94,0.35);
    color: #fff;
}
.green-btn:hover { box-shadow: 0 4px 18px rgba(34,197,94,0.55); }

.btn-icon { font-size: 0.85rem; }

#machine-case {
    width: 100%;
    max-width: 500px;
    background: transparent; /* Transparente para usar o fundo da página */
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* Mobile Positioning (Default) */
.prize-display-float {
    position: absolute;
    top: 11%; /* Percentage is better for responsive images */
    left: 10%;
    z-index: 100;
}

.balance-display-float {
    position: absolute;
    top: 11%;
    right: 15%;
    z-index: 100;
}



.segment-display {
    font-family: var(--font-digital);
    background: transparent;
    color: var(--segment-yellow);
    font-size: 1.5rem; /* Smaller */
    padding: 0;
    border: none;
    min-width: unset;
    text-align: right;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

/* Desktop Positioning (Screens > 600px) - Moved here to win the cascade */
@media (min-width: 601px) {
    .prize-display-float {
        top: 60px; 
        left: 62px;
        font-size: 2.2rem; 
    }
    .balance-display-float {
        top: 60px;
        right: 62px;
        font-size: 2.2rem;
    }
}

.logo-center .logo-box {
    width: 60px;
    height: 60px;
    background: #fff;
    border: 2px solid #ff0000;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-center img {
    width: 80%;
}

#main-board {
    padding: 10px;
    background: #013952;
    display: flex;
    justify-content: center;
}

.flag-track-image {
    width: 100%;
    aspect-ratio: 500 / 630; /* Adjust to match the actual image ratio */
    background-image: url('../images/game_board.webp'); /* Placeholder name */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    border: 3px solid #000;
}

.led-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;   /* Mobile: Ajuste a LARGURA da pista de LEDs */
    height: 63%;  /* Mobile: Ajuste a ALTURA da pista de LEDs */
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    pointer-events: none;
    z-index: 50;
}

/* LED Adjustments for Desktop */
@media (min-width: 601px) {
    .led-overlay {
        width: 95%;   /* Desktop: Ajuste a LARGURA aqui */
        height: 66%;  /* Desktop: Ajuste a ALTURA aqui */
        left: 51%;

    }
}

.led-trigger {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.led-trigger::after {
    content: '';
    width: 45px; /* Largura do LED quadrado */
    height: 35px; /* Altura do LED quadrado */
    border-radius: 2px; /* Pouco arredondado para parecer acrílico */
    background: transparent;
    transition: all 0.05s;
}

.led-trigger.active::after {
    background: rgba(255, 0, 0, 0.897); /* Bem transparente para ver a arte da imagem */
    box-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000, inset 0 0 8px rgba(255,255,255,0.4);
    transform: scale(1.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.led-trigger.active-bonus::after {
    background: rgba(0, 255, 0, 0.897); 
    box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00, inset 0 0 8px rgba(255,255,255,0.4);
    transform: scale(1.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.led-trigger.winning::after {
    animation: led-blink 0.3s infinite alternate;
}

.led-trigger.winning-bonus::after {
    animation: led-blink-bonus 0.3s infinite alternate;
}

@keyframes led-blink {
    from { background: rgba(255, 0, 0, 0.2); box-shadow: 0 0 5px #ff0000; }
    to { background: rgba(255, 0, 0, 0.8); box-shadow: 0 0 30px #ff0000; }
}

@keyframes led-blink-bonus {
    from { background: rgba(0, 255, 0, 0.2); box-shadow: 0 0 5px #00ff00; }
    to { background: rgba(0, 255, 0, 0.8); box-shadow: 0 0 30px #00ff00; }
}

/* Mapping triggers to track positions on the image (Perimeter of 7x7 grid) */
.slot-0 { grid-row: 1; grid-column: 1; }
.slot-1 { grid-row: 1; grid-column: 2; }
.slot-2 { grid-row: 1; grid-column: 3; }
.slot-3 { grid-row: 1; grid-column: 4; }
.slot-4 { grid-row: 1; grid-column: 5; }
.slot-5 { grid-row: 1; grid-column: 6; }
.slot-6 { grid-row: 1; grid-column: 7; }

.slot-7 { grid-row: 2; grid-column: 7; }
.slot-8 { grid-row: 3; grid-column: 7; }
.slot-9 { grid-row: 4; grid-column: 7; }
.slot-10 { grid-row: 5; grid-column: 7; }
.slot-11 { grid-row: 6; grid-column: 7; }

.slot-12 { grid-row: 7; grid-column: 7; }
.slot-13 { grid-row: 7; grid-column: 6; }
.slot-14 { grid-row: 7; grid-column: 5; }
.slot-15 { grid-row: 7; grid-column: 4; }
.slot-16 { grid-row: 7; grid-column: 3; }
.slot-17 { grid-row: 7; grid-column: 2; }
.slot-18 { grid-row: 7; grid-column: 1; }

.slot-19 { grid-row: 6; grid-column: 1; }
.slot-20 { grid-row: 5; grid-column: 1; }
.slot-21 { grid-row: 4; grid-column: 1; }
.slot-22 { grid-row: 3; grid-column: 1; }
.slot-23 { grid-row: 2; grid-column: 1; }

/* I will simplify this: in the image provided, there are 24 red LEDs around a center. 
   I'll position them to match the inner bezel of the track in your image. */

.center-digital-counter {
    position: absolute;
    bottom: 33%; /* Approximate position for center counter based on image */
    left: 51%;
    transform: translateX(-50%);
    padding: 0;
    background: transparent;
    border: none;
}

#center-display {
    font-family: var(--font-digital);
    color: var(--segment-yellow);
    font-size: 1.5rem;
}

#board-center {
    grid-column: 2 / 7;
    grid-row: 2 / 7;
    background: #5db0ff;
    position: relative;
    overflow: hidden;
    border: 2px solid #000;
}

.center-art {
    width: 100%;
    height: 100%;
    position: relative;
}

.art-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-overlay {
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
}

.title-overlay h1 {
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 2px 2px #ff0000, 4px 4px #000;
    font-style: italic;
}

.center-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #300;
    padding: 5px 15px;
    border: 2px solid var(--segment-yellow);
}

#center-display {
    font-family: var(--font-digital);
    color: var(--segment-yellow);
    font-size: 2rem;
}

/* Bet Panel */
#bet-panel {
    background: transparent;
    padding: 0 10px;
    border-top: none;
    position: relative;
    z-index: 60;
    pointer-events: auto; /* Enable clicks for betting */
}

.bet-columns {
    display: flex;
    justify-content: center; /* Centraliza para que o gap controle a distância */
    gap: 7px; /* Use valores POSITIVOS (ex: 2px para perto, 10px para longe) */
}

.bet-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 35px;
    /* Remove qualquer highlight padrão do browser */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 4px;
    transition: transform 0.1s;
}

/* Remove o retângulo branco/cinza do clique */
.bet-col:active {
    background: transparent !important;
    outline: none !important;
    transform: scale(0.92);
}

/* Hover: anel ciano sutil ao redor da área de aposta */
.bet-col:hover .bet-field-display {
    text-shadow: 0 0 16px rgba(72,228,236,0.9), 0 0 30px rgba(72,228,236,0.4);
    color: var(--rf-cyan);
}

/* Estado ativo (bet > 00): destaque amarelo brilhante */
.bet-col.has-bet .bet-field-display {
    color: var(--rf-yellow);
    text-shadow: 0 0 18px rgba(250,204,21,1), 0 0 35px rgba(250,204,21,0.5);
    font-weight: bold;
}

/* Feedback de escala ao clicar */
.bet-col:active {
    transform: scale(0.88);
}


.mult-label {
    display: none; /* Already in your image */
}

.bet-flag-box {
    display: none; /* Already in your image */
}

/* Betting Displays - MOBILE (Default) */
.bet-field-display {
    font-family: var(--font-digital);
    background: transparent;
    color: var(--segment-yellow);
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(255, 204, 0, 1);
    position: relative;
    top: -42px;  /* Mobile: Ajuste de ALTURA */
    left: 0px;   /* Mobile: Ajuste LATERAL */
    width: 100%;
    text-align: center;
    opacity: 1;
    visibility: visible;
}

/* Betting Displays - DESKTOP */
@media (min-width: 601px) {
    .bet-field-display {
        font-size: 2.2rem; /* Desktop: Tamanho do número */
        top: -34px;        /* Desktop: Ajuste de ALTURA */
        left: 5px;         /* Desktop: Ajuste LATERAL */
    }
    .bet-columns {
        gap: 20px; /* Desktop: Ajuste a DISTÂNCIA HORIZONTAL aqui */
    }
    #bet-panel {
        margin-top: -20px; /* Ajuste do painel todo em relação ao tabuleiro */
    }
}

/* ═══════════════════════════════
   ARCADE CONTROL PANEL  (retro LED style)
   ═══════════════════════════════ */

#arcade-controls {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(160deg, rgba(6,8,18,0.95) 0%, rgba(10,14,30,0.95) 100%);
    border: 1px solid rgba(72,228,236,0.18);
    border-top: 2px solid rgba(72,228,236,0.35);
    border-radius: 20px;
    backdrop-filter: blur(14px);
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -6px;
    box-shadow:
        0 0 0 1px rgba(72,228,236,0.06),
        0 8px 32px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ─ Cabeçalho do painel ─ */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(72,228,236,0.12);
}

.panel-label {
    font-family: var(--rf-font);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--rf-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(72,228,236,0.7);
    opacity: 0.85;
}

.panel-utils {
    display: flex;
    gap: 8px;
}

/* ─ Utils embutidos no painel ─ */
.panel-utils .util-btn {
    width: 38px;
    height: 38px;
    background-size: 55% 55%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(72,228,236,0.08);
    border: 1px solid rgba(72,228,236,0.20);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}
.panel-utils .util-btn:hover {
    background-color: rgba(72,228,236,0.18);
    border-color: var(--rf-cyan);
    transform: scale(1.1);
}

/* ─ Linha de seleção (VOLTAR / TODOS / 1-6 / 8-13) ─ */
.select-row {
    display: flex;
    gap: 7px;
    width: 100%;
}

/* Todos os botões de controle base */
.ctrl-btn {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    border: 1.5px solid;
    cursor: pointer;
    transition: all 0.16s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-ui);
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* Shimmer interno no hover */
.ctrl-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: inherit;
}
.ctrl-btn:hover::after { opacity: 1; }
.ctrl-btn:active { transform: scale(0.93); filter: brightness(1.2); }

.ctrl-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.ctrl-label {
    font-family: var(--rf-font);
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1;
}

/* VOLTAR – cinza neutro */
.ctrl-back {
    border-color: rgba(148,163,184,0.35);
    background-color: rgba(51,65,85,0.30);
    color: #94a3b8;
    max-width: 70px;
    flex: 0 0 70px;
}
.ctrl-back:hover {
    border-color: rgba(148,163,184,0.7);
    background-color: rgba(71,85,105,0.50);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(100,116,139,0.3);
}

/* TODOS – ciano/teal */
.ctrl-all {
    border-color: rgba(72,228,236,0.40);
    background-color: rgba(72,228,236,0.08);
    color: var(--rf-cyan);
}
.ctrl-all:hover {
    border-color: var(--rf-cyan);
    background-color: rgba(72,228,236,0.20);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(72,228,236,0.35);
}

/* 1-6 e 8-13 – azul-violeta */
.ctrl-range {
    border-color: rgba(139,92,246,0.40);
    background-color: rgba(139,92,246,0.08);
    color: #a78bfa;
}
.ctrl-range:hover {
    border-color: #a78bfa;
    background-color: rgba(139,92,246,0.22);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(139,92,246,0.35);
}

/* ─ Linha de ações: left (DEPÓSITO + LIMPAR) + GO grande ─ */
.action-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    height: 85px; /* Chunky height */
}

.action-left {
    flex: 1;
    display: flex;
    flex-direction: row; /* Horizontal alignment */
    gap: 7px;
}

.bet-control {
    flex: 1.6;
    min-width: 0;
    background-color: rgba(250,204,21,0.08); /* Transparent glassy background */
    border-radius: 12px;
    border: 1px solid rgba(250,204,21,0.25);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.bet-btn {
    width: 32%;
    background: transparent;
    border: none;
    color: #facc15;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    user-select: none;
}

.bet-btn:hover { background: rgba(250,204,21,0.2); color: #fff; }
.bet-btn:active { background: rgba(250,204,21,0.35); }
.bet-btn:disabled { opacity: 0.5; pointer-events: none; }

.bet-amount {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffd700;
    background: transparent; /* No more black ! */
    gap: 2px;
}

.bet-label-text {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.bet-val-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.bet-amount .bet-currency {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.7);
    line-height: 1;
}

.bet-amount #current-bet-val {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 10px rgba(250,204,21,0.8);
}

/* DEPÓSITO – verde esmeralda */
.ctrl-deposit {
    flex: 1;
    border-color: rgba(52,211,153,0.40);
    background-color: rgba(16,185,129,0.10);
    color: #34d399;
    flex-direction: column; /* Stack vertically for the taller row */
    justify-content: center;
    gap: 4px;
    border-radius: 12px;
}
.ctrl-deposit:hover {
    border-color: #34d399;
    background-color: rgba(16,185,129,0.22);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(52,211,153,0.35);
}
.ctrl-deposit .ctrl-icon { font-size: 1.15rem; }
.ctrl-deposit .ctrl-label { font-size: 0.6rem; font-weight: bold; }

/* LIMPAR – vermelho */
.ctrl-clear {
    width: 65px; /* Fixed width, keeping it chunky but not stretching wide */
    flex: none; /* Do not fill flex space like others */
    border-color: rgba(248,113,113,0.40);
    background-color: rgba(239,68,68,0.10);
    color: #f87171;
    flex-direction: column; /* Stack vertically */
    justify-content: center;
    gap: 4px;
    border-radius: 12px;
}
.ctrl-clear:hover {
    border-color: #f87171;
    background-color: rgba(239,68,68,0.22);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(248,113,113,0.35);
}
.ctrl-clear .ctrl-icon { font-size: 1.15rem; }
.ctrl-clear .ctrl-label { font-size: 0.6rem; font-weight: bold; }

/* ─ Botão GO – circular amarelo-ouro pulsante ─ */
.go-btn {
    width: 108px;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(150deg, #fde047 0%, #facc15 40%, #f59e0b 100%);
    border: 3px solid rgba(250,204,21,0.7);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow:
        0 0 28px rgba(250,204,21,0.55),
        0 0 60px rgba(250,204,21,0.20),
        0 8px 20px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.4);
    animation: go-pulse 2.5s ease-in-out infinite;
}

@keyframes go-pulse {
    0%, 100% { box-shadow: 0 0 22px rgba(250,204,21,0.5), 0 0 50px rgba(250,204,21,0.15), 0 8px 20px rgba(0,0,0,0.5); }
       50%    { box-shadow: 0 0 36px rgba(250,204,21,0.75), 0 0 80px rgba(250,204,21,0.30), 0 8px 20px rgba(0,0,0,0.5); }
}

.go-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 0 44px rgba(250,204,21,0.85), 0 0 90px rgba(250,204,21,0.40), 0 12px 28px rgba(0,0,0,0.6);
    animation: none;
}

.go-btn:active {
    transform: scale(0.93);
    filter: brightness(1.25);
    animation: none;
}

.go-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.go-text {
    font-family: var(--rf-font);
    font-size: 0.92rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

/* ─ Util buttons standalone (fora do painel) ─ */
#bottom-utils {
    display: none; /* movidos para dentro do painel */
}

.util-btn {
    width: 34px;
    height: 34px;
    background-size: 55% 55%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(10,12,22,0.75);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.util-btn:hover {
    transform: scale(1.12);
    border-color: rgba(255,255,255,0.4);
    background-color: rgba(30,35,55,0.9);
}
.mute-on { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z'%3E%3C/path%3E%3Cpath d='M16 9a5 5 0 0 1 0 6'%3E%3C/path%3E%3Cpath d='M19.364 18.364a9 9 0 0 0 0-12.728'%3E%3C/path%3E%3C/svg%3E") !important;
}

.mute-off { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z'%3E%3C/path%3E%3Cline x1='23' y1='1' x2='1' y2='23'%3E%3C/line%3E%3C/svg%3E") !important;
}

.info-icon { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important;
}

.util-btn:hover {
    transform: scale(1.1);
}




.img-btn:active, .img-btn-go:active, .img-btn-rect:active {
    transform: scale(0.92);
    filter: brightness(1.2);
}

/* Flags Colors */
.flag {
    border: 1px solid #000;
}
.argentina { background: linear-gradient(#74acdf 33%, #fff 33%, #fff 66%, #74acdf 66%); }
.holland { background: linear-gradient(#ae1c28 33%, #fff 33%, #fff 66%, #21468b 66%); }
.brazil { background: #009c3b; position: relative; }
.brazil::after { content: ''; position: absolute; width: 60%; height: 60%; background: #ffdf00; left: 20%; top: 20%; transform: rotate(45deg); }
.france { background: linear-gradient(to right, #002395 33%, #fff 33%, #fff 66%, #ed2939 66%); }
.germany { background: linear-gradient(#000 33%, #f00 33%, #f00 66%, #ffcc00 66%); }
.italy { background: linear-gradient(to right, #009246 33%, #fff 33%, #fff 66%, #ce2b37 66%); }
.croatia { background: #f00; border: 1px solid #999; } /* Croatian checkerboard is hard with CS, simplified */
.denmark { background: #c60c30; position: relative; }
.denmark::after { content: ''; position: absolute; background: white; width: 100%; height: 20%; top: 40%; }
.denmark::before { content: ''; position: absolute; background: white; width: 20%; height: 100%; left: 30%; }

.large-red { background: #f00; }
.bonus-x50::before { content: 'X50'; position: absolute; font-size: 0.5rem; top: 0; color: #f00; font-weight: bold; }
.bonus-x25::before { content: 'X25'; position: absolute; font-size: 0.5rem; top: 0; color: #00f; font-weight: bold; }

/* Mascot placeholders */
.brazil-mascot, .mascot-left { background: #ffcc00; border-radius: 50%; width: 20px !important; height: 20px !important; }

@media (max-width: 400px) {
    .segment-display { font-size: 1.5rem; min-width: 100px; }
}

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   GAME TOAST NOTIFICATIONS
   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
.game-toast {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, rgba(239,68,68,0.95), rgba(153,27,27,0.95)); /* Vermelho erro de default */
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(239,68,68,0.6), 0 0 0 2px rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.game-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.game-toast.success {
    background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(6,95,70,0.95));
    box-shadow: 0 4px 20px rgba(16,185,129,0.6), 0 0 0 2px rgba(255,255,255,0.1);
}