:root {
    --bg-dark: #140828;
    --panel-bg: #1e1333;
    --primary-green: #4ade80;
    --primary-green-dark: #22c55e;
    --btn-orange: #f59e0b;
    --btn-orange-dark: #d97706;
    --text-white: #ffffff;
    --ui-glow: rgba(74, 222, 128, 0.5);
    --skin-stand: url('/game/img/frango.gif');
    --skin-fly: url('/game/img/frango-fly.gif');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fredoka', sans-serif; /* Fonte estilo cartoon */
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /* Fallback */
    height: 100dvh; /* Altura exata da tela visível */
    overflow: hidden; /* Proíbe rolagem na página inteira */
    overscroll-behavior: none; /* Bloqueia o efeito elástico do iOS */
    background: #000000;
    touch-action: manipulation; /* Permite scroll e pan, mas BLOQUEIA double-tap zoom */
    -ms-touch-action: manipulation; /* IE antigo */
    /* Previne seleção de texto acidental ao clicar rápido */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Remove aquele flash azul no Android */
}
button, .game-btn, canvas, .action-btn-asset {
    touch-action: none;
}

.icon-btn.shop-btn {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border: 2px solid #fcd34d;
    color: #78350f;
}
/* Moldura Mobile */
.mobile-frame {
    width: 100%;
    /* Mantém uma largura máxima para parecer celular no Desktop,
       mas se quiser tela cheia total, remova o max-width */
    max-width: 450px;
    /* 2. Garante que a imagem cubra tudo sem distorcer */
    background-size: inherit;

    /* 3. Centraliza a imagem */
    background-position: right;

    /* 4. Não repete */
    background-repeat: no-repeat;

    /* A MÁGICA ESTÁ AQUI EMBAIXO: */
    height: 100dvh; /* Ocupa 100% da altura REAL visível (desconta a barra do navegador) */
    min-height: 100dvh;
    max-height: 100dvh; /* Força não crescer mais que a tela */

    position: relative;
    display: flex;
    flex-direction: column;

    /* Removemos bordas arredondadas externas para encaixar na tela */
    border-radius: 0;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    margin: 0 auto; /* Centraliza horizontalmente no desktop */
}


/* Adiciona uma camada escura semi-transparente sobre o background */
.mobile-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente que escurece mais a parte de baixo (onde ficam os botões) */
    pointer-events: none; /* Deixa clicar através da camada */
    z-index: 0; /* Fica atrás de tudo, mas na frente do bg */
}

/* --- HEADER --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    z-index: 10;
    padding-top: max(15px, env(safe-area-inset-top));
}

.left-controls {
    display: flex;
    gap: 8px; /* Espaço entre os ícones da esquerda */
}

.icon-btn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(180deg, #53567a 0%, #2e304a 100%);
    border: 3px solid #6c7099;
    color: #8da4c4;
    width: 48px;
    height: 48px;
    border-radius: 35px; /* Menos arredondado, mais parecido com app moderno */
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn:active { transform: scale(0.95); }

.icon-btn.close-btn {
    position: relative; /* Necessário para posicionar o X */
    color: transparent; /* Esconde o caractere de texto original */
    overflow: hidden;
}

/* Criando a primeira perna do X */
.icon-btn.close-btn::before,
.icon-btn.close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px; /* Largura do traço */
    height: 6px; /* GROSSURA do X (Aumente aqui se quiser mais gordo) */
    background-color: #ff5555; /* A cor do X */
    border-radius: 10px; /* Deixa as pontas redondinhas */
    transform-origin: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Sombra 3D leve */
}

/* Rotaciona para formar o X */
.icon-btn.close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-btn.close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Efeito ao clicar */
.icon-btn.close-btn:active::before,
.icon-btn.close-btn:active::after {
    background-color: #ff2222; /* Fica mais escuro ao clicar */
}

/* --- WALLET DISPLAY (O QUE VOCÊ PEDIU) --- */
.wallet-display {
    /* Container Pílula */
    background: rgba(40, 30, 70, 0.85); /* Fundo roxo escuro semi-transparente */
    border-radius: 15px; /* Arredondamento máximo */
    padding: 1px 5px 1px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espalha os itens */
    height: 48px; /* Altura fixa para ficar robusto */
    min-width: 160px; /* Largura mínima */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    background: linear-gradient(180deg, #53567a 0%, #2e304a 100%);
    border: 3px solid #6c7099;

}

/* O ícone da moeda */
.coin-icon {
    font-size: 28px; /* Aumentei o emoji */
    margin-right: 5px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    line-height: 0; /* Corrige alinhamento vertical */
}

#user-balance {
    flex: 1; /* Ocupa o espaço do meio */
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800; /* Extra bold */
    font-size: 20px;
    letter-spacing: 0.5px;

    /* Gradiente no Texto (Ouro/Laranja) igual ao print */
    background: linear-gradient(180deg, #ffdd00 20%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Sombra dura para dar leitura no gradiente (Fallback visual) */
    filter: drop-shadow(0 2px 0px rgba(160, 80, 0, 0.5));

    margin: 0 10px;
}

.add-btn {
    width: 32px;
    height: 32px;
    /* Gradiente Azul igual ao print (Claro em cima, escuro em baixo) */
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border: none;
    /* Borda interna para dar efeito 3D */
    box-shadow: 0 2px 0 #1d4ed8, 0 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Squircle (Quadrado arredondado) */
    border: 2px #70a3d7 solid;
    color: white;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-bottom: 2px; /* Ajuste visual do + */
}

.add-btn:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* --- GAME STAGE (PLACEHOLDERS) --- */
.game-stage {
    flex: 1; /* Ocupa todo o espaço vago entre o header e o footer */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden; /* Garante que nada vaze */
}



/* Efeito de estrelas simples com CSS enquanto não põe img */
.placeholder-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px);
    background-size: 550px 550px, 350px 350px;
    background-position: 0 0, 40px 60px;
    opacity: 0.6;
}

.portals-container {
    margin-top: 35%;
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 0 20px;
    z-index: 2;
    transform: translateY(-40px);
    /* Prepara para deslizar */
    transition: transform 0.5s ease-in-out;
}

/* Classe utilitária para desligar animações durante o reset instantâneo */
.no-transition {
    transition: none !important;
}

.portal-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
}

/* PLACEHOLDER: Portais */
.portal-asset {
    width: 120px;
    height: 120px;

    border-radius: 50%;
    margin-bottom: 20px;
    /* Efeito visual provisório */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: spinPortal 8s linear infinite; /* Gira devagar */
}

.placeholder-portal-green {
    background-image: url('/game/img/portal_verde.png');
    background-size: cover;
    background-position: bottom;
    box-shadow: 0 0 25px #22c55e80;
    animation: spinPortal 8s linear infinite, pulseGlow 2s ease-in-out infinite;
}

.placeholder-portal-red {
    background-image: url('/game/img/portal_vermelho.png');
    background-size: cover;
    background-position: bottom;
    box-shadow: 0 0 25px #ef444480;
    animation: spinPortal 8s linear reverse infinite;
}

.multiplier-tag {
    position: absolute;
    top: 12%;
    font-size: 30px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* PLACEHOLDER: Plataformas */
.platform-asset {
    width: 200px;
    height: 95px;
    margin-top: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;

}

/* ESTADO PADRÃO / PERIGO (Vermelho) */
/* Usa essa classe na plataforma onde o galo NÃO está */
.platform-asset.is-danger {
    background-image: url('/game/img/base-red.png');
    /* Glow vermelho suave embaixo */
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.9));
}

/* ESTADO ATIVO / SEGURO (Verde) */
/* Usa essa classe na plataforma onde o galo ESTÁ */
.platform-asset.is-active {
    background-image: url('/game/img/base-green.png');
    /* Glow verde para combinar com o portal de cima */
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.9));
}

.portal-wrapper.left .platform-asset {
}

/* PLACEHOLDER: Galo */
.character {
    /* ... mantenha position, bottom, width, z-index antigos ... */
    position: absolute;
    bottom: 30px;
    width: 150px;
    height: 150px;
    z-index: 100;
    margin-bottom: 17px;
    transition: transform 0.6s linear;
    /* AQUI ESTÁ A MÁGICA: */
    background-image: var(--skin-stand);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Classe adicionada via JS quando ele está voando */
.character.is-flying,
.character.is-super-flying {
    background-image: var(--skin-fly);
    animation: jumpArc 0.6s ease-in-out forwards;
}

/* --- VISUAL DE EXPLOSÃO (CRASH) --- */
.character.is-dead {
    /* Substitua pelo seu gif de explosão */
    background-image: url('/game/img/explosion.gif') !important;

    /* Ajuste o tamanho da explosão se necessário */
    width: 160px;
    height: 160px;
    left: 30px;
    bottom: 30px;
    /* Removemos animações de pulo/voo */
    animation: none !important;
    transform-origin: center bottom;
}

/* Define o arco do pulo (Gravidade) */
@keyframes jumpArc {
    0% { bottom: 25px; }
    50% { bottom: 120px; } /* Altura máxima do pulo */
    100% { bottom: 25px; }
}

/* --- ESTILO DO MODAL DA LOJA --- */
/* --- ESTILO DO MODAL DA LOJA (Tema Harmonizado) --- */

/* O Fundo do Modal (Agora igual ao Betting Controls) */
.shop-content {
    width: 90%;
    max-width: 400px;

    /* Mesmo gradiente da barra de apostas */
    background: linear-gradient(180deg, #53567a 0%, #2e304a 100%);

    /* Mesma borda azul acinzentada */
    border: 4px solid #6c7099;
    border-radius: 30px;
    padding: 20px;

    /* Sombra escura para destacar do fundo */

    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

/* O Cabeçalho */
.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.modal-header h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Ajustado para combinar com o tema escuro */
    -webkit-text-stroke: 6px #1e1333;
    paint-order: stroke fill;
    text-shadow: 0 4px 0 #1e1333;

    transform: rotate(-2deg);
}

/* Botão Fechar */
.close-shop-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ff6262;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 0 #991b1b, 0 5px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    z-index: 10;
}

.close-shop-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #991b1b;
}

/* O Grid de Skins */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    overflow-y: auto;
    padding: 5px;
}

/* O Cartão da Skin (Slot Escuro Harmonizado) */
.skin-card {
    /* Cor escura baseada no tema (similar aos inputs de aposta) */
    background: #3c3d59;

    /* Sombra interna igual aos inputs */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

    border-radius: 20px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #565980; /* Borda sutil */

    position: relative;
    transition: all 0.2s;
}

/* Destaque para Skin Selecionada/Equipada (Mantive o Dourado para destaque) */
.skin-card.active {
    border: 3px solid #fbbf24;
    background: radial-gradient(circle, #4c4e70 0%, #3c3d59 100%);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.skin-card img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

.skin-card:hover img {
    transform: scale(1.1) rotate(5deg);
}

.skin-name {
    color: #ffffff;
    font-weight: 700;
    margin: 10px 0;
    font-size: 15px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

/* Botões da Loja */
.skin-btn {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: relative;
    top: 0;
    transition: all 0.1s;
}

.skin-btn:active {
    top: 3px;
}

/* 1. Botão COMPRAR (Verde - Igual ao GO) */
.skin-btn.buy {
    background: linear-gradient(to bottom, #86efac 0%, #22c55e 100%);
    box-shadow: 0 4px 0 #15803d;
    color: #064e3b;
    border: 2px solid #94f3aa;
}
.skin-btn.buy:active { box-shadow: 0 0 0 #15803d; }

/* 2. Botão EQUIPAR (Azul - Igual aos botões de aposta) */
.skin-btn.select {
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 0 #1d4ed8;
    border: 2px solid #70a3d7;
}
.skin-btn.select:active { box-shadow: 0 0 0 #1d4ed8; }

/* 3. Botão EQUIPADO (Cinza Escuro) */
.skin-btn.equipped {
    background: #4b5563;
    color: #cbd5e1;
    cursor: default;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    border: none;
}
.skin-btn.equipped:active { top: 0; }

/* Footer (Saldo) */
.shop-footer {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    margin-top: auto;
    border: 2px solid #6c7099; /* Mesma borda do tema */
}

.shop-footer p {
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#shop-balance {
    color: #fbbf24;
    font-size: 20px;
}
/* --- MODAL DE GAME OVER --- */

/* Fundo escuro que cobre o jogo */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Bem escuro */
    backdrop-filter: blur(5px); /* Desfoque no fundo */
    z-index: 999; /* Fica acima de tudo */

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Classe para esconder o modal */
.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Não deixa clicar quando invisível */
}

/* A Caixa do Modal */
.modal-content {
    /* background: linear-gradient(180deg, #2d1b5e 0%, #140828 100%); */
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 25px;
    /* border: 3px solid #ef4444; */
    /* box-shadow: 0 0 30px rgba(239, 68, 68, 0.4); */
    text-align: center;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* background: linear-gradient(180deg, #ffdd00 20%, #ffaa00 100%); */
    background: linear-gradient(180deg, #53567a 0%, #2e304a 100%);
    border: 3px solid #6c7099;
}

/* Animação de entrada (Pop-in) */
.modal-overlay.hidden .modal-content {
    transform: scale(0.7);
}

/* Títulos e Textos */
.modal-header h2 {
    color: #ef4444;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.explosion-icon {
    font-size: 50px;
    margin: 10px 0;
    animation: shake 0.5s ease-in-out;
}

.modal-body p {
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.loss-text {
    color: #9ca3af;
    font-size: 14px;
    display: block;
    margin-bottom: 20px;
}

/* Botão Tentar Novamente */
.try-again {
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 0 #1d4ed8;
    color: white;
    font-size: 16px !important; /* Forçando tamanho */
    font-weight: 800;
}

.try-again:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Animação de tremedeira para o ícone */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(5px) rotate(5deg); }
}

/* --- BETTING CONTROLS (O CORAÇÃO DO FRONTEND) --- */
.betting-controls {
    flex-shrink: 0; /* Não deixa o footer encolher */
    background: linear-gradient(180deg, #53567a 0%, #2e304a 100%);
    border-top: 4px solid #6c7099;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 20px 20px 30px 20px; /* Mais padding em baixo para celulares modernos */
    padding-bottom: max(30px, env(safe-area-inset-bottom)); /* Proteção para a barra home do iPhone */
    z-index: 10;
    width: 100%;
}

/* --- BÔNUS DE RAIO (LIGHTNING) --- */

/* O ícone do Raio flutuando na plataforma */
/* --- BÔNUS: BOLHA DE POWER-UP (ESTILO MARIO) --- */

.bonus-lightning {
    /* 1. Posicionamento (Bem em cima da base) */
    position: absolute;
    bottom: 55px; /* Ajuste aqui se ficar muito alto ou baixo */
    left: 50%; /* Centraliza horizontalmente */

    /* 2. Tamanho e Formato da Bolha */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Faz virar uma bola perfeita */

    /* 3. Estilo de "Vidro/Energia" */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(251, 191, 36, 0.4) 40%, rgba(251, 191, 36, 0.8) 100%);
    border: 2px solid #fff; /* Borda branca brilhante */
    box-shadow:
        0 0 10px #fbbf24,
        inset 0 0 10px #fbbf24; /* Brilho interno e externo */

    /* 4. Alinhamento do Ícone dentro da bolha */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 5. Comportamento */
    z-index: 20; /* Fica na frente da plataforma */
    transition: opacity 0.3s, transform 0.3s; /* Para sumir suavemente ao pegar */

    /* Animação de Flutuar */
    animation: floatBubble 2s ease-in-out infinite;
}

/* O Ícone do Raio dentro da bolha */
.bonus-lightning i {
    font-size: 24px;
    color: #78350f; /* Cor escura para contrastar com o dourado */
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));
}

/* Animação: Flutua para cima e para baixo + Mantém centralizado */
@keyframes floatBubble {
    0% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-12px); /* Sobe um pouco */
    }
    100% {
        transform: translateX(-50%) translateY(0px);
    }
}

@keyframes floatLightning {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-10px) scale(1.2); }
}

/* --- BÔNUS DE MULTIPLICADOR GLOBAL --- */
/* 1. O Item na Plataforma (Agora exibe o GIF) */
.bonus-orb {
    position: absolute;
    bottom: 15px; /* Altura acima da plataforma */
    left: 50%;
    transform: translateX(-50%);

    /* Tamanho do GIF */
    width: 150px;
    height: 150px;

    /* Configuração do Background (O GIF entra aqui via JS) */
    background-size: contain; /* Garante que o gif caiba inteiro */
    background-position: center;
    background-repeat: no-repeat;

    /* Removemos bordas e fundos antigos para ficar só o GIF limpo */
    background-color: transparent;
    border: none;
    box-shadow: none;

    border-radius: 50%; /* Faz a sombra ficar redonda */

    z-index: 20;

    /* Mantemos apenas a animação de flutuar */
    animation: floatOrb 2s ease-in-out infinite;
}

/* Atualize a .mobile-frame (removemos o background direto dela) */
.mobile-frame {
    width: 100%;
    max-width: 450px;
    /* A MÁGICA ESTÁ AQUI EMBAIXO: */
    height: 100dvh; /* Ocupa 100% da altura REAL visível (desconta a barra do navegador) */
    min-height: 100dvh;
    max-height: 100dvh; /* Força não crescer mais que a tela */
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    margin: 0 auto;
    overflow: hidden; /* Importante para o zoom não vazar a tela */
}

/* --- NOVO SISTEMA DE BACKGROUND SIMPLIFICADO --- */

#game-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(2px);
    /* Imagem Padrão */
    background-image: url('/game/img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0; /* Fica no fundo */
    /* Prepara a transição do Zoom */
    transform: scale(1);
    transition: transform 0.5s ease-in; /* Zoom rápido para dentro */
}

/* Classe que ativa o Zoom (A Viagem) */
#game-bg.zooming {
    transform: scale(2.0); /* Zoom forte */
}

/* O Flash de Luz */
.warp-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 99;

    /* Transição suave do brilho */
    transition: opacity 0.3s ease-in-out;
}

/* Classe que deixa o flash branco total */
.warp-overlay.active {
    opacity: 1;
}
/* Removemos o estilo do span, pois não tem mais texto dentro da orbe */
.bonus-orb span {
    display: none;
}

@keyframes floatOrb {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -10px); }
}

/* 2. O Selo Ativo no Botão GO (Agora é a Imagem da Orbe) */
.bonus-badge {
    position: absolute;
    bottom: -15%;
    right: -32px;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    /* box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(251, 191, 36, 0.6); */
    border-radius: 50%;
    z-index: 50;
    pointer-events: none;
    animation: floatBadge 2s ease-in-out infinite alternate;
}

/* Removemos o span de texto, pois o valor já está desenhado no GIF */
.bonus-badge span {
    display: none;
}

.bonus-badge.hidden {
    display: none;
    animation: none;
}

/* Animação de flutuação */
@keyframes floatBadge {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-8px) scale(1.05); }
}

.character.is-super {
   /* filter: drop-shadow(0 0 20px #fbbf24) brightness(1.3) contrast(1.1);*/
}


/* O Galo no Modo Super (Dourado) */
.character.is-super {
    /* Glow Dourado Intenso
    filter: drop-shadow(0 0 20px #fbbf24) brightness(1.2);*/

}

/* Efeito de rastro/velocidade (Opcional) */
.character.is-super::after {
    /*
    content: '';
    position: absolute;
    top: 0; left: -20px;
    width: 100%; height: 100%;
    background: inherit;
    opacity: 0.5;
    filter: blur(4px);
    z-index: -1;
    */
}

/* 1. Linha de aposta (+ e -) */
.bet-input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.control-btn {
    width: 45px;
    height: 45px;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 32px;
    font-weight: bold;
    box-shadow: 0 2px 0 #1d4ed8, 0 5px 10px rgba(0,0,0,0.3);
    border: 2px #70a3d7 solid;
    cursor: pointer;
    transition: transform 0.1s;
}

.control-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #1d4ed8;
}

.bet-display {
    border-radius: 10px;
    width: 70%;
    text-align: center;
    background: #3c3d59;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.bet-display .label {
    display: block;
    font-size: 12px;
    color: #8da4c4;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 1px;
}

.value-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bet-display .value {
    font-size: 24px;
    color: white;
    font-weight: 800;
}

/* 2. Botões Pills (Min, +10...) */
.quick-bets {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 5px;
}

.pill-btn {
    flex: 1;
    background: #3c3d59;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border: none;
    padding: 8px 0;
    border-radius: 20px;
    color: #8da4c4;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.pill-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* 3. Botões de Ação (Cashout e Go) */
.action-buttons {
    display: flex;
    gap: 15px;
    height: 60px;
}

.main-btn {
    flex: 1;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: filter 0.2s;
}

.main-btn:active {
    filter: brightness(0.9);
    transform: scale(0.98);
}

/* Estilo Botão CASHOUT (Laranja) */
.cashout {
    background: linear-gradient(to bottom, #fcd34d 0%, #f59e0b 100%);
    box-shadow: 0 4px 0 #d97706, 0 10px 20px rgba(245, 158, 11, 0.3);
    border: 3px #f7c55b solid;
    color: #78350f;
}

.cashout .btn-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.cashout .btn-value {
    font-size: 18px;
    font-weight: 900;
}

/* Estilo Botão GO (Verde) */
.go {
    background: linear-gradient(to bottom, #86efac 0%, #22c55e 100%);
    box-shadow: 0 4px 0 #15803d, 0 10px 20px rgba(34, 197, 94, 0.3);
    color: #064e3b;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 3px #94f3aa solid
}

/* Efeito de brilho/reflexo no topo dos botões (Glossy) */
.main-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 16px 16px 50% 50% / 16px 16px 10px 10px;
    pointer-events: none;
}

@keyframes spinPortal {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animação de "respiração" (pulsar) para o brilho */
@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.8); }
    100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); }
}


/* --- CONTAINER MESTRE --- */
.bet-panel-wrapper {
    position: relative;
    width: 97%;
    max-width: 600px;
    bottom: 10px;
    /* Proporção exata da imagem painel.webp */
    aspect-ratio: 600 / 300;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    background-image: url('/game/img/layout/painel.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    font-family: 'Fredoka', sans-serif;
}

/* ============================================================
   1. ANDAR DE CIMA (Input e Botões Azuis)
   Ocupa o retângulo longo superior
============================================================ */
.row-top-input {
    position: absolute;
    top: 10%; /* Ajuste vertical para cair no buraco de cima */
    left: 4%;
    width: 92%;
    height: 26%; /* Altura do retângulo superior */

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px; /* Um pequeno respiro nas laterais */
}

/* Botões Azuis Quadrados */
.btn-blue {
    width: 45px; /* Tamanho fixo para ficar igual ao print */
    height: 45px; /* Se ficar muito grande no mobile, diminua aqui */
    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.1s;
    z-index: 10;
}
/* Caminhos das suas imagens enviadas */
.btn-blue.minus { background-image: url('/game/img/layout/botão_menos.webp'); }
.btn-blue.plus  { background-image: url('/game/img/layout/botão_mais.webp'); }

.btn-blue:active { transform: scale(0.9); }

/* Área Central do Input */
.input-display {
    display: flex;
    flex-direction: column; /* "BET" em cima, valor embaixo */
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
}

.label-bet {
    font-size: 0.7rem;
    color: #8899aa; /* Cor cinza claro para o texto "BET" */
    margin-bottom: 2px;
    font-weight: bold;
}

.value-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet-input-field {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem; /* Letra grande */
    font-weight: 800;
    width: 100px;
    text-align: center;
    outline: none;
}
/* Remove setas do input number */
.bet-input-field::-webkit-outer-spin-button,
.bet-input-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.coin-icon { font-size: 1.2rem; margin-left: 5px; }


/* ============================================================
   2. ANDAR DO MEIO (Presets: Min, +10...)
   Ocupa os 5 ovais pequenos
============================================================ */
.row-middle-presets {
    position: absolute;
    top: 40%;
    left: 6%;
    width: 87%;
    height: 16%;
    display: flex;
    justify-content: space-between;
}

.btn-preset {
    width: 18%; /* Largura de cada oval */
    height: 100%;
    background: transparent; /* Fundo transparente */
    border: none;
    cursor: pointer;

    /* Texto */
    color: #6a7b9c; /* Azul acinzentado (inativo) */
    font-weight: 800;
    font-size: 0.75rem;
    transition: color 0.2s;

    /* Centralizar texto */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-preset:hover {
    color: #ffffff; /* Fica branco no hover */
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}


/* ============================================================
   3. ANDAR DE BAIXO (Ações)
   Ocupa os dois retângulos grandes inferiores
============================================================ */
.row-bottom-actions {
    position: absolute;
    bottom: 6%; /* Posição inferior */
    left: 4%;
    width: 92%;
    height: 32%; /* Altura dos botões grandes */

    display: flex;
    justify-content: space-between;
}

.action-box {
    width: 48%; /* Metade para cada lado */
    height: 100%;
    position: relative;
}

/* --- Lado Esquerdo (Display Cashout) --- */
.left-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cashout-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #3e2a00; /* Cor escura para contraste se tiver fundo claro, ou #fff se for escuro */
}
/* Ajuste conforme seu design final para o lado esquerdo */
.info-label { font-size: 0.7rem; color: #8899aa; font-weight: bold; text-transform: uppercase; }
.info-value { font-size: 1.1rem; color: #8899aa; font-weight: bold; }


/* --- Lado Direito (Botão GO) --- */
/* --- Botão GO (Verde) --- */
.btn-go {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;

    /* Centraliza e contem a imagem sem esticar */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    transition: all 0.3s ease; /* Transição suave entre os estados */
}

/* ==========================================================================
   ESTADO 1: ATIVO / PRONTO (Quando NÃO está disabled)
   Mostra a imagem colorida e permite interação.
========================================================================== */
.btn-go:not(:disabled) {
    /* Imagem Colorida Normal */
    background-image: url('/game/img/layout/painel_go.webp');
    cursor: pointer;
    /* Um leve brilho padrão para mostrar que tá vivo */
    filter: drop-shadow(0 0 2px #00ff00);
    /* Mantém o ajuste de escala que fizemos antes pra caber no buraco */
}

/* HOVER (Só funciona se não estiver disabled) */
.btn-go:not(:disabled):hover {
    /* Brilho mais forte no mouseover */
    filter: drop-shadow(0 0 10px #00ff00) brightness(1.1);
    /* Cresce um pouquinho mais no hover */
    transform: scale(1.01);
}

/* ACTIVE/CLIQUE (Só funciona se não estiver disabled) */
.btn-go:not(:disabled):active {
    filter: brightness(0.9);
}

/* OPCIONAL: Classe para pulsar quando ficar pronto */
.btn-go.is-ready:not(:disabled) {
     animation: pulseReady 1.5s infinite ease-in-out;
}
@keyframes pulseReady {
    0% { filter: drop-shadow(0 0 2px #00ff00); }
    50% { filter: drop-shadow(0 0 8px #00ff00) brightness(1.1); }
    100% { filter: drop-shadow(0 0 2px #00ff00); }
}


/* ==========================================================================
   ESTADO 2: DESATIVADO / OFF (Quando TEM o atributo disabled)
   Mostra a imagem P&B e bloqueia o mouse.
========================================================================== */
.btn-go:disabled {
    /* OPÇÃO A: Se você TIVER a imagem 'painel_go_off.webp', use assim: */
    /* background-image: url('game/img/layout/painel_go_off.webp'); */

    /* OPÇÃO B (Truque): Se você NÃO tiver a imagem OFF, usamos a colorida com filtro P&B: */
    background-image: url('/game/img/layout/painel_go.webp');
    filter: grayscale(100%) opacity(0.6) brightness(0.8); /* Deixa cinza, meio transparente e escuro */
    cursor: not-allowed; /* Cursor de "proibido" */

}

/* --- Botão Cashout (Esquerda) --- */
.btn-cashout {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;

    /* USA A IMAGEM DO BOTÃO AMARELO COMO FUNDO */
    background-image: url('/game/img/layout/botão_amarelo.webp');
    background-position: center;
    background-size: contain; /* Encaixa sem deformar */
    background-repeat: no-repeat;

    /* Flexbox para centralizar o texto sobre a imagem */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.3s ease;

    /* Sombra interna leve */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* --- ESTADO 1: ATIVO (Amarelo Ouro) --- */
/* Quando o jogo está rolando e pode sacar */
.btn-cashout:not(:disabled) {
    filter: brightness(1.1); /* Brilha um pouco */
    transform: scale(1.05); /* Cresce levemente para chamar atenção */
}
.btn-cashout:not(:disabled):hover {
    filter: brightness(1.1) drop-shadow(0 0 10px #FFD700);

}
.btn-cashout:not(:disabled):active {
    transform: scale(0.98);
}

/* Cor do texto no botão amarelo (Escuro para contraste) */
.btn-cashout:not(:disabled) .info-label,
.btn-cashout:not(:disabled) .info-value {
    color: #3e2a00; /* Marrom escuro */
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}


/* --- ESTADO 2: INATIVO (Cinza Metálico) --- */
/* Igual ao print de referência image_eaf943.jpg */
.btn-cashout:disabled {
    /* O SEGREDO: Tira 100% da saturação (vira cinza) */
    filter: grayscale(100%) brightness(0.9);
    cursor: default;
    opacity: 0.9;
}

/* Cor do texto no botão cinza */
.btn-cashout:disabled .info-label {
    color: #555; /* Cinza escuro */
}
.btn-cashout:disabled .info-value {
    color: #333; /* Preto suave */
}


/* --- Tipografia Interna --- */
.info-label {
    font-size: 0.7rem;
    font-weight: 900;
    margin-bottom: -2px;
    font-family: 'Arial', sans-serif; /* Ou sua fonte custom */
}

.value-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-value {
    font-size: 1.3rem;
    font-weight: 900;
}

.coin-small {
    height: 18px;
    width: auto;
    margin-left: 5px;
    /* Se a moeda for amarela, no estado cinza ela fica cinza tb pelo filtro do pai */
}

.btn-blue:disabled,
.btn-preset:disabled,
.control-btn:disabled {
    filter: grayscale(100%); /* Tira a cor */
    opacity: 0.5; /* Deixa meio transparente */
    cursor: not-allowed; /* Mostra o ícone de proibido */
    pointer-events: none; /* Garante que não dá pra clicar */
}

/* Opcional: Input também fica visualmente travado */
.bet-input-field:read-only {
    opacity: 0.7;
    color: #aaa;
}
/* Responsividade Mobile */
@media (max-width: 450px) {
    .btn-blue { width: 35px; height: 35px; }
    .bet-input-field { font-size: 1.2rem; }
    .btn-preset { font-size: 0.6rem; }
}


/* --- CONTAINER GERAL (95% da tela) --- */
.header-container {
    position: absolute;
    top: 13px;
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* O pulo do gato pra centralizar absolute */
    border-radius: 50px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    width: 95%; /* A LARGURA QUE VOCÊ PEDIU */
    max-width: 600px; /* Limite pra não ficar gigante no PC */
    height: 70px; /* Altura fixa para alinhar tudo */
    overflow-anchor: visible;
    display: flex; /* Mantemos flex só pra alinhar o painel no centro se precisar */
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* --- PAINEL CENTRAL (Esticado) --- */
.central-panel {
    position: relative;
    width: 100%; /* Ocupa todo o espaço do container pai */
    height: 100%;

    background-image: url('/game/img/layout/painel_02.webp');
    background-size: 100% 100%; /* Estica a imagem para cobrir os 95% */
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    /* Padding GIGANTE nas laterais para o texto não ficar embaixo dos botões */
    padding-left: 70px;
    padding-right: 70px;

    box-sizing: border-box; /* Importante para o padding não estourar o width */
}

/* --- BOTÕES LATERAIS (Sobrepostos nas pontas) --- */
.header-btn {
    position: absolute; /* Tira do fluxo e deixa flutuando */
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente exato */

    width: 45px; /* Tamanho ajustado para cobrir a ponta do painel */
    height: 45px;

    border: none;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10; /* Fica NA FRENTE do painel */

    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.5));
}

.header-btn:active { transform: translateY(-50%) scale(0.95); }

/* Posicionamento exato nas bordas */
.home-btn {
    left: 15px; /* Puxa um pouquinho pra fora pra dar efeito de "capa" */
    background-image: url('/game/img/layout/botão_home_02.webp');
}

.share-btn {
    right: 15px; /* Puxa um pouquinho pra fora */
    background-image: url('/game/img/layout/botao_som_01.webp');
}


/* --- CONTEÚDO INTERNO (Avatar e Texto) --- */
.avatar-area {
    position: absolute;
    /* Ajuste esse LEFT até o avatar cair dentro do círculo dourado esticado */
    left: 65px;

    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3e2a00;
    font-size: 20px;
    z-index: 5;
}

.info-area {
    /* Como usamos padding no painel, width 100% aqui preenche o miolo */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Empurra o texto um pouco pra direita se estiver colado no avatar */
    padding-left: 26%;
    line-height: 1.2;
}

/* (O resto das fontes mantive igual pois estava bom) */
.nickname {
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap; /* Não deixa quebrar linha */
}

.balance-group {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
}

.label-saldo {
    font-size: 18px;
    font-weight: 800; /* Negrito forte */
    color: #9cb4d4; /* Aquele azulzinho acinzentado da imagem */

    /* Cria a borda preta (Outline Cartoon) */
}

/* O Valor "10.000,00" (Amarelo Ouro com Borda Preta) */
.value-saldo {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 17px; /* Um pouquinho maior que o label */
    color: #ffffff; /* Amarelo Ouro vibrante */
    font-weight: 800;
    letter-spacing: 0.5px; /* Espaça levemente os números */
}

/* A moedinha ao lado (ajuste se necessário) */
.header-coin-icon {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
}
/* Responsividade: Se a tela for muito pequena, diminui a fonte */
@media (max-width: 380px) {
    .header-btn { width: 55px; height: 55px; }
    .avatar-area { left: 55px; width: 32px; height: 32px; }
    .central-panel { padding-left: 55px; padding-right: 55px; }
    .info-area { padding-left: 35px; }
    .nickname { font-size: 11px; }
    .balance-group { font-size: 12px; }
}

/* --- LOBBY CONTAINER (Cobre a tela toda) --- */
.lobby-container {
    position: absolute; /* MUDANÇA: De 'fixed' para 'absolute' */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Garante que o fundo cubra tudo */
    background-image: url('/game/img/layout/bg-home.webp');
    background-size: cover;
    background-position: center;

    z-index: 1000; /* Alto o suficiente para cobrir o jogo, mas contido no frame */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

    transition: opacity 0.5s ease, transform 0.5s ease;

    /* Importante: Garante que não vaze bordas arredondadas se o frame tiver */
    overflow: hidden;
}

/* Classe para esconder o lobby suavemente */
.lobby-container.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.1); /* Efeito de zoom out ao sumir */
}

/* --- 1. HEADER (Painel 03) --- */
.lobby-header {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 500 / 170;

    background-image: url('/game/img/layout/painel_03.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Avatar (Círculo Esquerdo) */
.lobby-avatar {
    position: absolute;
    top: 18%;
    left: 4.5%;
    width: 14%;
    height: 45%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    opacity: 0.8;
}

/* Informações (Nickname e Saldo - Topo Direito) */
.lobby-info {
       position: absolute;
    top: 9%;
    right: 8%;
    width: 74%;
    height: 35%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

.lobby-nickname {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.lobby-balance-row {
        display: flex;
    align-items: center;
    gap: 8px;
    color: #ffdd00;
    font-weight: 800;
    font-size: 21px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}

.lobby-plus-btn {
    /* Define o tamanho */
    width: 22px;
    height: 22px;

    /* 1. MATA OS ESTILOS PADRÃO (Borda e Fundo Branco) */
    background-color: transparent;
    border: none;
    outline: none;

    /* 2. Configura a Imagem */
    background-image: url('/game/img/layout/botão_mais.webp');
    background-size: 100% 100%; /* Força a imagem a preencher tudo */
    background-repeat: no-repeat;
    background-position: center;

    /* 3. Esconde o texto "+" do HTML (porque a imagem já tem o desenho) */
    color: transparent;

    cursor: pointer;

    /* Um ajuste fino para alinhar verticalmente com o texto do saldo */


}

/* Efeito de clique opcional */
.lobby-plus-btn:active {
    transform: scale(0.9);
}

/* Linha de Ícones (Parte de Baixo do Painel) */
.lobby-icons-row {
    position: absolute;
    bottom: 7%; /* Encaixa na parte de baixo do painel */
    left: 10%;   /* Centralizado visualmente */
    width: 80%;
    height: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon-small {
    width: 50px; height: 50px;
    background-color: transparent;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.1s;
}
.icon-small:active { transform: scale(0.9); }

/* Mapeando as imagens dos botões redondos */
.btn-sound { background-image: url('/game/img/layout/botão_volume_03.webp'); }
.btn-music { background-image: url('/game/img/layout/botão_song_03.webp'); }
.btn-share { background-image: url('/game/img/layout/botão_share_03.webp'); }
.btn-shop  { background-image: url('/game/img/layout/botão_shop_03.webp'); }
.btn-profile  { background-image: url('/game/img/layout/botao_user_03.webp'); }


/* --- 2. HERO (Frango) --- */
.lobby-hero-area {
    position: relative;
    width: 250px; /* Mesmo tamanho da imagem */
    display: flex;
    justify-content: center;
    margin: 0 auto; /* Para centralizar na tela se precisar */
}

.hero-chicken {
    z-index: 2;
    width: 350px; /* Tamanho do frango na home */
}

/* Criando a sombra no chão */
.lobby-hero-area::after {
    content: '';
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 91px;
    background: radial-gradient(ellipse at center, rgb(0 0 0 / 83%) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
    border-radius: 50%;
}

@keyframes floatHero {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}


/* --- 3. FOOTER (Botões Grandes) --- */
.lobby-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Cria 2 colunas de tamanho igual */
    gap: 15px; /* Espaço entre os botões */
    width: 100%;
    max-width: 400px; /* Largura máxima para ficar bonito no mobile */
    margin: 20px auto; /* Centraliza o bloco na tela e dá margem */
}
.lobby-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Cria 2 colunas de tamanho igual */
    gap: 15px; /* Espaço entre os botões */
    width: 100%;
    max-width: 400px; /* Largura máxima para ficar bonito no mobile */
    margin: 20px auto; /* Centraliza o bloco na tela e dá margem */
}

/* --- BOTÃO JOGAR (Ocupa a linha toda) --- */
#btnLobbyPlay {
    grid-column: span 2; /* Mágica: Faz ele ocupar as 2 colunas */
    width: 100%;
    height: 70px; /* Um pouco mais alto para destaque */

    /* Garante que a imagem de fundo cubra tudo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.1s;
}

/* Estilo base dos botões (para garantir a animação) */
#soundbtn1, #soundbtn2 {
    cursor: pointer;
    transition: all 0.4s ease; /* Suaviza a troca de cor */
}

/* Classe que aplica o Preto e Branco */
.disabled-state {
    filter: grayscale(100%); /* Remove toda a saturação */
    opacity: 0.6;            /* Deixa levemente transparente (opcional, mas melhora a UX) */
}

/* --- BOTÕES DE BAIXO (Depósito e Saque) --- */
#btnLobbyDeposit1,
#btnLobbyCashout {
    width: 100%;
    height: 60px; /* Um pouco menor que o Jogar */

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.1s;
}

/* Efeito de clique em todos */
.lobby-big-btn:active {
    transform: scale(0.95);
    filter: brightness(1.1);
}

.lobby-big-btn {
    flex: 1; /* Divide espaço igual */
    background-color: transparent;
    border: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.1s;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

.lobby-big-btn:active { transform: scale(0.95); }

/* Imagens dos botões grandes */
.btn-play-home { background-image: url('/game/img/layout/home/botão_jogar.webp'); }
.btn-deposit-home { background-image: url('/game/img/layout/home/botão-depositar.webp'); }
.btn-cashout-home { background-image: url('/game/img/layout/home/sacar.webp'); }


/* --- FLASH DE TRANSIÇÃO --- */
.flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: white; /* O clarão */

    opacity: 0; /* Começa invisível */
    pointer-events: none; /* Deixa clicar através dele quando invisível */
    z-index: 99999; /* Fica acima do Lobby e do Jogo */

    transition: opacity 0.3s ease-in-out; /* Velocidade do flash */
}

/* Classe para ativar o flash */
.flash-overlay.active {
    opacity: 1;
    pointer-events: all; /* Bloqueia cliques durante a transição */
}

@media (max-width: 500px) {

    .character.is-dead {
    width: 140px;
    height: 140px;
    left: 1%;
    bottom: 30px;
    animation: none !important;
    transform-origin: center bottom;
}
    .platform-asset {
        width: 165px;
        height: 95px;
        margin-top: 70px;
    }
    .character {
        width: 130px;
        height: 130px;
        bottom: 22px;
    }

    .portal-wrapper {
        width: 120px;
    }

    .lobby-header {
        width: 108%;

    }

    .lobby-info {
        position: absolute;
        top: 9%;
        right: 8%;
        width: 73%;
        height: 35%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
    }
    .lobby-nickname {
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
    }
    .lobby-balance-row {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ffdd00;
        font-weight: 800;
        font-size: 18px;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
    }
    .icon-small {
        width: 45px;
        height: 45px;
        background-color: transparent;
        border: none;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: transform 0.1s;
    }

}