/* =======================================================
   1. ESTILOS BÁSICOS E FUNDO
   ======================================================= */
html, body {
    margin: 0;
    padding: 0;
    /* 🟢 TRAVA DE MOVIMENTO: Impede a tela de balançar para os lados no celular */
    max-width: 100vw;
    overflow-x: hidden; 
    font-family: 'Arial', sans-serif;
    background-color: #111; 
    background-image: linear-gradient(135deg, #000000 0%, #333333 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #E0E0E0; 
}

h1 { color: #4CAF50; }

#particles-container {
    position: fixed; width: 100%; height: 100%;
    top: 0; left: 0; z-index: 0; 
}

/* =======================================================
   2. HEADER E NAVEGAÇÃO
   ======================================================= */
.top-nav-bar {
    position: fixed; 
    top: 0; /* 🟢 Colado no topo absoluto */
    left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 1400px;
    z-index: 1000; 
    background: linear-gradient(to top, rgba(10, 13, 42, 0.7), rgba(24, 27, 57, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 🟢 Borda arredondada apenas na parte de baixo */
    border-radius: 0 0 15px 15px; 
    border: 1px solid rgba(76, 76, 175, 0.2);
    border-top: none; /* Remove a borda de cima para grudar perfeitamente */
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    height: 60px;
    display: flex; justify-content: center;
}

.header-content {
    width: 100%; max-width: 1400px;
    margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
    height: 100%; box-sizing: border-box; 
}

.logo-svg { height: 40px; width: auto; }

/* Menu Suspenso do Usuário */
.user-dropdown { position: relative; }
.user-display-button {
    display: flex; align-items: center; gap: 8px;
    background-color: transparent; border: none;
    padding: 8px 12px; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.user-display-button:hover { background-color: #2a2a2a; }
#user-display-name { color: #E0E0E0; font-size: 1em; font-weight: bold; }
.chevron-icon { transition: transform 0.2s; }
.user-dropdown:hover .chevron-icon { transform: rotate(180deg); }

.dropdown-menu {
    position: absolute; top: calc(100% + 5px); right: 0;
    background-color: #1E1E1E; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); width: 200px; padding: 8px;
    z-index: 1100; opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.2s;
}
.user-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
    display: block; 
    width: 100%; 
    padding: 10px 12px;
    color: #E0E0E0; 
    text-decoration: none; 
    border-radius: 5px;
    background: none; 
    border: none; 
    text-align: left;
    font-size: 0.9em; 
    cursor: pointer;
    /* 🟢 A MÁGICA: Obriga o botão a respeitar os limites da caixa mãe */
    box-sizing: border-box; 
    /* 🟢 BÓNUS: Adicionei uma transição suave para o hover ficar mais elegante */
    transition: background-color 0.2s, padding-left 0.2s; 
}

.dropdown-item:hover { 
    background-color: #2a2a2a; 
    /* 🟢 BÓNUS VIP: Um leve empurrão do texto para a direita ao passar o mouse */
    padding-left: 16px; 
}

/* Saldos na Nav */
.nav-balance-area {
    display: flex; gap: 10px; align-items: center;
    margin-left: auto; margin-right: 20px;
}
.nav-balance-box {
    background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; padding: 5px 12px; text-align: center; min-width: 100px;
}
.nav-balance-label { display: block; font-size: 0.7em; color: #B0B0B0; margin-bottom: 2px; text-transform: uppercase; }
.nav-balance-value { display: block; font-size: 1.1em; font-weight: bold; }
.nav-balance-box.real .nav-balance-value { color: #FFFFFF; }
.nav-balance-box.bonus .nav-balance-value { color: #FFEB3B; }

/* Rollover Progress */
.rollover-progress-container { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 250px; }
.rollover-label { font-size: 0.7em; color: #B0B0B0; font-weight: bold; }
.progress-bar-background { width: 100%; height: 8px; background-color: #2a2a2a; border-radius: 4px; overflow: hidden; }
.progress-bar-foreground { height: 100%; width: 0%; background-color: #FFEB3B; border-radius: 4px; transition: width 0.5s ease-out; }

/* =======================================================
   3. LAYOUT PRINCIPAL (A MÁGICA RESPONSIVA)
   ======================================================= */
.site-wrapper {
    max-width: 1400px; 
    margin: 0 auto;
    display: flex; 
    align-items: stretch; 
    justify-content: center;
    gap: 20px;
    
    /* 🟢 Puxa o conteúdo para cima (Barra tem 60px + 15px de folga = 75px) */
    padding-top: 75px; 
    
    padding-left: 20px; padding-right: 20px;
    position: relative; z-index: 2;
    box-sizing: border-box; width: 100%;
    min-height: calc(100vh - 75px); /* Ajustado para acompanhar a nova altura */
}

.main-content-wrapper {
    flex: 1; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    min-width: 0; 
    
    /* 🟢 A MÁGICA 2: Garantimos que não há nenhum 'overflow' aqui. 
       O jogo vai rolar naturalmente com a página inteira. */
       
    transition: all 0.3s ease; 
}

/* =======================================================
   4. JOGO (ROLETAS, BOTÕES, CONTROLES)
   ======================================================= */
   /* =======================================================
   BARRA DE TENDÊNCIAS (HISTÓRICO LONGO MACRO)
   ======================================================= */
.trend-history-wrapper {
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fundo sutil */
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px; /* Espaço entre a fita e o jogo principal */
    box-sizing: border-box;
    border: 1px solid #2a2a2a;
}

.trend-history-list {
    display: flex;
    gap: 5px; /* Espacinho entre as bolinhas */
    overflow-x: auto; /* Permite rolar para os lados se tiver muitas */
    align-items: center;
    /* 🟢 Esconde a barra de rolagem feia do navegador, mas mantém a função */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.trend-history-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* A Micro-Esfera */
.trend-dot {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    color: white;
    /* Uma sombra interna muito leve, sem o peso do 3D das bolas grandes */
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}

/* Cores Simplificadas (Flat Design para Micro-UI) */
.trend-dot.color-RED { background-color: #e53935; border: 1px solid #ff5252; }
.trend-dot.color-BLUE { background-color: #1e88e5; border: 1px solid #448aff; }
.trend-dot.color-GREEN { background-color: #4caf50; border: 1px solid #69f0ae; }

/* Ajuste do ícone do Coringa para não vazar da bolinha minúscula */
.trend-dot.color-GREEN img {
    height: 16px;
    width: auto;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.8));
}
/* =======================================================
   BANNER DO JOGO (FUSÃO SUAVE / MASKING)
   ======================================================= */
.banner-wrapper {
    /* Mantém a sangria total lateral */
    width: calc(100% + 40px); 
    margin: -20px -20px 25px -20px; 
    
    /* Altura da "faixa" do banner. 220px é um bom equilíbrio. */
    height: 110px; 
    
    display: flex; justify-content: center; align-items: center; flex-shrink: 0;
    
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    overflow: hidden; 
    
    /* 🟢 IMPORTANTE: A cor de fundo da caixa deve ser A MESMA do container do jogo */
    background-color: #1E1E1E; 
    border-bottom: 2px solid #2a2a2a; 
}

.banner-image {
    width: 100%;
    height: 100%;
    
    /* Volta a preencher tudo para não sobrar laterais vazias */
    object-fit: cover;
    /* Centraliza para o texto ficar no meio */
    object-position: center center; 
    
    /* 🟢 A MÁGICA DA FUSÃO (CSS MASK) */
    /* Cria um degradê que vai de transparente (topo) para preto sólido (meio) e transparente (base) */
    /* Onde é transparente, a imagem some. Onde é preto, ela aparece. */
    /* -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); */
    /* mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%); */
}

/* Ajuste para celular, para o banner não ficar muito alto */
@media (max-width: 500px) {
    .banner-wrapper {
        height: 100px;
    }
}

.page-container { width: 100%; max-width: 480px; margin: 0; padding: 20px; background-color: #1E1E1E; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);height:100%;}
.game-container { width: 100%; max-width: 860px; margin-top: 0px; }

/* Display de Resultados e Slots */
.result-sequence {
    width: 100%; box-sizing: border-box; padding: 10px; overflow: hidden; 
    border: 2px solid #333; border-radius: 10px; background-color: #121212;
    position: relative; height: 100px; margin: 0 auto; display: flex; align-items: center; z-index: 0;
}

#slots-scroller { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; box-sizing: border-box; padding-right: 90px; }

.slot {
    flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; display: flex;
    flex-direction: column; justify-content: center; align-items: center; text-align: center;
    font-weight: bold; box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.3); position: relative;
    transform: translateZ(0);
}

.color-RED { 
    /* Luz batendo no topo esquerdo, escuridão no fundo direito */
    background: radial-gradient(circle at 30% 30%, #ff4d4d 0%, #b30000 50%, #330000 100%);
    color: white; 
    border: 2px solid #ff1a1a; /* Borda viva */
    box-shadow: 
        inset -10px -10px 20px rgba(0, 0, 0, 0.8), /* Sombra volumétrica 3D */
        inset 10px 10px 15px rgba(255, 100, 100, 0.4), /* Reflexo de luz interno */
        0px 0px 15px rgba(255, 0, 0, 0.5); /* Brilho Neon Externo */
}
.color-BLUE { 
    background: radial-gradient(circle at 30% 30%, #4da6ff 0%, #0059b3 50%, #001a33 100%);
    color: #E0E0E0; 
    border: 2px solid #3399ff;
    box-shadow: 
        inset -10px -10px 20px rgba(0, 0, 0, 0.8),
        inset 10px 10px 15px rgba(100, 180, 255, 0.4),
        0px 0px 15px rgba(0, 128, 255, 0.5); 
} 

/* 🟢 ESFERA VERDE CORINGA */
.color-GREEN { 
    /* Gradiente mais claro e radiante (menos preto, mais luz) */
    background: radial-gradient(circle at 35% 35%, #80ff80 0%, #00e600 45%, #006600 100%);
    color: white; 
    border: 2px solid #4dff4d; /* Borda mais clara */
    box-shadow: 
        inset -6px -6px 12px rgba(0, 0, 0, 0.3), /* 🟢 Sombra escura muito mais fraca, só para dar um leve volume */
        inset 10px 10px 20px rgba(150, 255, 150, 0.7), /* Luz interna muito mais forte e espalhada */
        0px 0px 25px rgba(0, 255, 0, 0.7); /* Brilho neon externo mais poderoso */
}
.slot.last-drawn { 
    opacity: 1; 
    border: 2px solid #00BCD4; 
    box-shadow: 
        inset -10px -10px 20px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(0, 188, 212, 1); /* Brilho forte ao ganhar */
    transform: scale(1.08); 
    transition: all 0.3s ease-out; 
    z-index: 10; 
}
.slot:not(.last-drawn) { border: 1px solid #2a2a2a; box-shadow: none; transform: scale(1); transition: all 0.3s ease-out; }
.slot.revealed { animation: reveal-flash 0.7s ease-out; }

@keyframes reveal-flash {
    0% { opacity: 0.1; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Efeito 3D da Carta */
.flip-container { perspective: 1000px; width: 80px; height: 80px; border-radius: 50%; transform-style: preserve-3d; box-sizing: border-box; flex-shrink: 0; position: absolute; z-index: 5; }

/* 🟢 AQUI ESTÁ O ASSASSINO DO BUG: Removemos a borda/sombra "fantasma" que a classe .slot aplicava ao container parado */
.slot.flip-container { border: none !important; box-shadow: none !important; background: transparent !important; }

.flipper { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955); transform-style: preserve-3d; }
.flip-container.flipped .flipper { transform: rotateY(180deg); }

.front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-weight: bold; box-sizing: border-box; border: none; }

/* 🟢 CORREÇÃO: Fundo escuro realocado e animação corrigida para pulse-glow */
.front { color: #FFEB3B; font-size: 2em; z-index: 2; border: 2px solid #FFEB3B; background-color: rgba(20, 20, 20, 0.8); animation: pulse-glow 1.5s infinite alternate ease-in-out; }

@keyframes pulse-glow {
    from { box-shadow: inset 0 0 15px rgba(255, 235, 59, 0.5), 0 0 5px rgba(255, 235, 59, 0.3); }
    to { box-shadow: inset 0 0 25px rgba(255, 235, 59, 0.8), 0 0 20px rgba(255, 235, 59, 0.6); }
}

.back { transform: rotateY(180deg); backface-visibility: hidden; background-color: transparent; }
.faded-out { opacity: 0.5; transition: opacity 0.5s ease-out; transform: scale(0.95); }

/* Textos e Ícone Verde nas Cartas */
.value { font-size: 1.8em; line-height: 1; margin-top: -2px; margin-bottom: -2px; }
.label { font-size: 0.7em; line-height: 1; }
.color-label { margin-bottom: 0; }
.parity-label { font-size: 0.6em; }
.slot.color-GREEN .value.coringa-icon, .back.color-GREEN .value.coringa-icon { display: flex; justify-content: center; align-items: center; height: 60px; width: 100%; margin-top: 0px; box-sizing: border-box; }
.slot.color-GREEN .value.coringa-icon .coringa-svg-img, .back.color-GREEN .value.coringa-icon .coringa-svg-img { width: auto; height: 100%; max-height: 55px; filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.7)); transition: transform 0.2s ease;}
/* Pequeno efeito extra: o Coringa "pula" ligeiramente quando a carta é a sorteada */
.slot.last-drawn.color-GREEN .value.coringa-icon .coringa-svg-img { transform: scale(1.15); }
.slot.color-GREEN .label.color-label, .back.color-GREEN .label.color-label { width: 100%; text-align: center; margin-bottom: 0; }
.slot.color-GREEN .label.parity-label, .back.color-GREEN .label.parity-label { display: none; }

/* =======================================================
   CONTROLES DE APOSTA (O "PAINEL DE COMANDO")
   ======================================================= */
.controls-area { 
    box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; 
    width: 100%; margin-bottom: 15px; padding: 15px 20px; 
    /* Fundo metálico escuro com sombra interna pesada */
    background: linear-gradient(145deg, #16161a, #0d0d0f); 
    border: 1px solid #2a2a2a; 
    border-radius: 12px; 
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3); 
}

#status-message { text-align: center; margin-top: 20px; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
#timer-bar { height: 10px; width: 100%; background-color: #222; border-radius: 5px; margin-bottom: 20px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);}
#progress { height: 100%; width: 100%; background-color: #00BCD4; border-radius: 5px; transition: width 8s linear; box-shadow: 0 0 10px rgba(0, 188, 212, 0.6);}

/* Inputs e Stepper (O Visor Digital) */
.bet-input-container { display: flex; justify-content: flex-start; width: 100%; margin-bottom: 0px; position: relative; z-index: 2; align-items: center; gap: 12px;}
.bet-input-container span { color: #888; font-weight: bold; text-align: center; font-size: 0.9em; text-transform: uppercase; letter-spacing: 1px;}

.bet-stepper { 
    display: flex; align-items: center; 
    background-color: #050505; /* Fundo super escuro */
    border: 1px solid #4CAF50; /* Borda Neon Verde */
    border-radius: 8px; 
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.15), inset 0 2px 10px rgba(0,0,0,1); 
    overflow: hidden; 
}

.stepper-btn { 
    background: transparent; border: none; color: #4CAF50; 
    font-size: 1.6em; font-weight: bold; height: 44px; width: 44px; padding: 0; 
    cursor: pointer; transition: all 0.2s; 
    display: flex; justify-content: center; align-items: center;
}
.stepper-btn:hover { background: rgba(76, 175, 80, 0.15); text-shadow: 0 0 10px #4CAF50; }
.stepper-btn:active { background: rgba(76, 175, 80, 0.3); }
.stepper-btn:disabled { color: #333; cursor: not-allowed; background: transparent; }

.bet-stepper #bet-amount { 
    width: 80px; height: 44px; border: none; background: transparent; color: #fff; 
    text-align: center; font-size: 1.25em; font-weight: bold; 
    border-left: 1px solid #222; border-right: 1px solid #222; 
    box-shadow: none; padding: 0; outline: none; -moz-appearance: textfield;
}
.bet-stepper #bet-amount::-webkit-outer-spin-button, .bet-stepper #bet-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =======================================================
   BOTÕES DE APOSTA (Design Sci-Fi)
   ======================================================= */
.bet-area { width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 20px; perspective: 1000px; }

/* As "Gaiolas" dos botões */
.bet-group { background: rgba(0, 0, 0, 0.3); border: 1px solid #222; border-radius: 12px; padding: 15px; flex-grow: 0; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); box-sizing: border-box; width: 100%;}
#bet-group-colors { flex-basis: 58%; }
#bet-group-parity { flex-basis: 38%; }
.bet-group-label { margin: 0 0 15px 0; font-size: 0.8em; color: #777; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px; }
.bet-group-buttons { display: flex; gap: 15px; }

/* O Botão Principal base */
.bet-button { 
    flex-grow: 1; flex-basis: 0; height: 85px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    font-size: 1.05em; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    background: linear-gradient(145deg, #1a1a1f, #0f0f12); /* Base de metal escuro */
    border-radius: 10px; cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; overflow: hidden; min-width: 100px;
}

/* Cores e Bordas Neon Específicas */
#bet-red { border: 2px solid #e53935; color: #ff7979; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(229, 57, 53, 0.1); }
#bet-blue { border: 2px solid #1976d2; color: #64b5f6; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(25, 118, 210, 0.1); }
#bet-green { border: 2px solid #4caf50; color: #81c784; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(76, 175, 80, 0.1); } 
.bet-parity { border: 2px solid #9c27b0; color: #ba68c8; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(156, 39, 176, 0.1); }

/* Efeitos de Hover Profissionais (O Botão "Acende") */
.bet-button:hover { transform: translateY(-5px); color: #fff; }
#bet-red:hover { box-shadow: 0 8px 25px rgba(229, 57, 53, 0.4), inset 0 0 30px rgba(229, 57, 53, 0.4); text-shadow: 0 0 10px #ff7979; }
#bet-blue:hover { box-shadow: 0 8px 25px rgba(25, 118, 210, 0.4), inset 0 0 30px rgba(25, 118, 210, 0.4); text-shadow: 0 0 10px #64b5f6; }
#bet-green:hover { box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4), inset 0 0 30px rgba(76, 175, 80, 0.4); text-shadow: 0 0 10px #81c784; }
.bet-parity:hover { box-shadow: 0 8px 25px rgba(156, 39, 176, 0.4), inset 0 0 30px rgba(156, 39, 176, 0.4); text-shadow: 0 0 10px #ba68c8; }

/* Efeito de Clique e Estado Desativado */
.bet-button:active { transform: translateY(1px); filter: brightness(0.8); }
.bet-button:disabled { 
    background: #111 !important; border-color: #333 !important; color: #555 !important; 
    box-shadow: none !important; transform: none !important; cursor: not-allowed; 
}
/* =======================================================
   5. BARRA SOCIAL (CHAT E APOSTAS)
   ======================================================= */
.social-sidebar {
    position: relative; 
    width: 320px;
    flex-shrink: 0;

    /* 🟢 A MÁGICA DA ALTURA: Copia a altura do jogo e não vaza da tela */
    align-self: stretch; 
    max-height: calc(100vh - 130px); 

    background-color: #121212; border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column; border: 1px solid #2a2a2a;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: height 0.3s ease-out;
}

/* 🟢 O NOVO MINIMIZAR DO COMPUTADOR (Apenas encolhe como sanfona) */
.social-sidebar.minimized {
    height: 50px !important;
    align-self: flex-start; /* Fica fixo no topo ao encolher */
}

.sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; background-color: #0d0d0d; height: 50px; flex-shrink: 0; cursor: pointer; }
.sidebar-header h3 { margin: 0; font-size: 1.1em; }
/* =======================================================
   BOTÃO DE MINIMIZAR/MAXIMIZAR O CHAT (+ e -)
   ======================================================= */
.toggle-chat-btn {
    /* 🟢 A MÁGICA DO ALINHAMENTO GEOMÉTRICO PERFEITO */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Mantém o seu botão perfeitamente redondo */
    width: 32px;  /* Pode ajustar este valor se quiser o círculo maior/menor */
    height: 32px;
    border-radius: 50%;
    
    /* 🟢 REMOVENDO OS ESPAÇOS FANTASMAS */
    padding: 0 !important;
    margin: 0;
    line-height: 0 !important; /* Mata o espaço invisível da fonte */
    font-size: 24px; /* Tamanho do ícone */
    
    /* Cores (Mantenha as suas se forem diferentes) */
    background-color: #2a2a2a;
    color: #E0E0E0;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toggle-chat-btn:hover {
    background-color: #444;
}

.sidebar-content { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }

.social-tabs { display: flex; background-color: #0d0d0d; flex-shrink: 0; }
.social-tab-btn { flex-grow: 1; padding: 12px; background: none; border: none; color: #B0B0B0; font-size: 0.9em; cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; }
.social-tab-btn.active, .social-tab-btn:hover { color: white; border-bottom: 3px solid #4CAF50; }

.social-content-panes { display: flex; flex-grow: 1; overflow: hidden; }
.social-tab-pane { flex-grow: 1; display: none; flex-direction: column; background-color: #121212; }
.social-tab-pane.active { display: flex; }

.chat-messages { 
    flex-grow: 1; 
    overflow-y: auto; 
    /* 🟢 TRAVA 1: Mata qualquer chance de barra de rolagem horizontal */
    overflow-x: hidden; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
}

.chat-message { 
    margin-bottom: 12px; 
    font-size: 0.9em; 
    display: flex; 
    gap: 8px; 
    align-items: flex-start; 
    /* 🟢 TRAVA 2: Garante que a linha da mensagem não passe de 100% da caixa */
    max-width: 100%; 
}

/* 🟢 TRAVA 3: Impede que o nome do usuário seja "esmagado" por uma mensagem gigante */
.chat-message .username { 
    font-weight: bold; 
    flex-shrink: 0; 
}

.chat-message .role-admin { color: #E53935; }
.chat-message .role-influencer { color: #9C27B0; }

.chat-message .message-text { 
    color: #E0E0E0; 
    line-height: 1.4; 
    
    /* 🟢 TRAVA 4: A Quebra de Palavras Suprema */
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    word-break: break-word; 
    
    /* 🟢 TRAVA 5: O Segredo do Flexbox! 
       Isso diz à mensagem: "Ocupe o espaço que sobrar, mas quebre a linha se bater na parede" */
    flex: 1; 
    min-width: 0; 
}

.chat-form { display: flex; padding: 10px; border-top: 1px solid #2a2a2a; background-color: #0d0d0d; flex-shrink: 0;}
#chat-input { flex-grow: 1; background-color: #2a2a2a; border: 1px solid #333; color: white; border-radius: 5px; padding: 10px; }
.chat-form button { background-color: #4CAF50; border: none; color: white; padding: 10px 15px; border-radius: 5px; margin-left: 10px; cursor: pointer; }

.bets-feed { height: 100%; overflow-y: auto; padding: 10px; }
.bet-entry { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.85em; padding: 8px; background-color: #1A1A1A; border-radius: 5px; }
.bet-entry .avatar { font-size: 1.5em; }
.bet-entry .username { font-weight: bold; color: #B0B0B0; }
.bet-entry .bet-color-RED { font-weight: bold; color: #E53935; }
.bet-entry .bet-color-BLUE { font-weight: bold; color: #1976d2; }
.bet-entry .bet-color-GREEN { font-weight: bold; color: #4CAF50; }
.bet-entry .bet-won { color: #4CAF50; font-weight: bold; }
.bet-entry .bet-lost { color: #E53935; font-weight: bold; }

/* =======================================================
   6. MODALS E CARTEIRA (POPUPS)
   ======================================================= */
.auth-modal-overlay, .settings-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 10, 20, 0.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: none; justify-content: center; align-items: center; z-index: 2000; padding: 15px; box-sizing: border-box;
}
.auth-modal-overlay.active, .settings-modal-overlay { display: flex; opacity: 1; pointer-events: auto; } /* Ajuste provisório para active */
.auth-modal-overlay:not(.active) { display: flex; opacity: 0; pointer-events: none; transition: opacity 0.3s; }

.auth-modal-content, .settings-modal-content {
    background-color: #1A1A1D; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 30px 35px; width: 100%; position: relative;
}
.auth-modal-content { max-width: 420px; transform: scale(0.95); transition: transform 0.3s ease-out; }
.auth-modal-overlay.active .auth-modal-content { transform: scale(1); }
.settings-modal-content { max-width: 800px; height: 80vh; padding: 0; border: 1px solid #2a2a2a; display: flex; overflow: hidden;}

.auth-modal-close, .settings-modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2.5em; color: #666; cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s; z-index: 10;}
.auth-modal-close:hover, .settings-modal-close:hover { color: #ccc; }

.auth-modal-content h1 { text-align: center; margin-top: 0; margin-bottom: 25px; font-size: 1.8em; }
.input-group-auth { display: flex; align-items: baseline; margin-bottom: 20px; }
.input-group-auth label { flex-basis: 180px; white-space: nowrap; color: #B0B0B0; font-size: 0.9em; font-weight: bold; text-align: right; padding-right: 15px; display: flex; align-items: baseline; justify-content: flex-end; }
.auth-modal-content input { width: 100%; padding: 12px 15px; border: 1px solid #444; background-color: #111; color: #eee; border-radius: 6px; font-size: 1em; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.auth-modal-content input:focus { outline: none; border-color: #4CAF50; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3); }
#login-submit-button { width: 100%; padding: 14px; font-size: 1.1em; font-weight: bold; color: #fff; background-color: #4CAF50; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; margin-top: 10px; }
#login-submit-button:hover { background-color: #45a049; }
#login-submit-button:active { transform: scale(0.98); }
#show-register-link { color: #00BCD4; text-decoration: none; transition: color 0.2s; }
#show-register-link:hover { color: #88eefb; text-decoration: underline; }
#auth-error-message { min-height: 1.2em; font-size: 0.9em; margin-top: 15px; }

/* Modal Settings Internals */
.settings-sidebar { width: 200px; background-color: #0d0d0d; padding: 40px 20px 20px; flex-shrink: 0; border-right: 1px solid #2a2a2a; }
.settings-tab-btn { display: block; width: 100%; background: none; border: none; color: #B0B0B0; padding: 15px; text-align: left; font-size: 1em; border-radius: 6px; cursor: pointer; margin-bottom: 10px; }
.settings-tab-btn.active, .settings-tab-btn:hover { background-color: #2a2a2a; color: white; }
.settings-main-content { padding: 40px 30px 30px; flex-grow: 1; overflow-y: auto; }
.settings-tab-pane { display: none; }
.settings-tab-pane.active { display: block; }

/* ==========================================
   AVATARES 3D (NEUMORFISMO) VIP
   ========================================== */
.avatar-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center;}

/* Avatar Principal no Topo */
.current-avatar { 
    font-size: 3.5em; 
    background: linear-gradient(145deg, #1f1f22, #111113);
    border: 3px solid #00BCD4; 
    border-radius: 50%; 
    padding: 15px; 
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.4), inset 5px 5px 15px rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
    width: 80px; height: 80px;
}

/* O Painel com as 6 Opções */
.avatar-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 colunas, 2 linhas (6 avatares) */
    gap: 18px; 
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

/* Os Botões Individuais */
.avatar-option { 
    font-size: 2.2em; 
    height: 70px; 
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; 
    border-radius: 12px; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(145deg, #1f1f22, #151518);
    border: 1px solid #2a2a2a;
    box-shadow:  5px 5px 15px #0a0a0b, -5px -5px 15px #242429;
    filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.4));
}

.avatar-option:hover { 
    transform: translateY(-5px) scale(1.05); 
    border-color: #00BCD4;
    box-shadow: 0 10px 20px rgba(0, 188, 212, 0.2), inset 0 0 10px rgba(0, 188, 212, 0.1);
}

.avatar-option.selected { 
    background: linear-gradient(145deg, #00BCD4, #1E88E5); 
    border-color: #FFF;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
    transform: scale(1.1);
}

/* Reduzir o grid em ecrãs móveis muito pequenos */
@media (max-width: 400px) {
    .avatar-grid { grid-template-columns: repeat(2, 1fr); }
}

.action-button { background-color: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }

/* Carteira */
.wallet-balances { display: flex; gap: 15px; margin-bottom: 20px; }
.wallet-card { flex: 1; padding: 20px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid #2a2a2a; display: flex; flex-direction: column; align-items: flex-start; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.wallet-card.real { border-left: 4px solid #4CAF50; }
.wallet-card.bonus { border-left: 4px solid #FFEB3B; }
.wallet-label { font-size: 0.85em; color: #B0B0B0; text-transform: uppercase; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; }
.wallet-amount { font-size: 1.8em; font-weight: bold; color: white; }
.wallet-actions { display: flex; gap: 15px; }
.wallet-action-btn { flex: 1; padding: 14px; font-size: 1.1em; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: filter 0.2s, transform 0.1s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.wallet-action-btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.wallet-action-btn:active { transform: scale(0.98); }
.deposit-btn { background-color: #4CAF50; color: white; }
.withdraw-btn { background-color: #00BCD4; color: #121212; }

/* Tabelas de Histórico */
.history-table-container { max-height: 60vh; overflow-y: auto; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td { padding: 10px; border-bottom: 1px solid #2a2a2a; text-align: left; }
.history-table th { font-size: 0.8em; color: #B0B0B0; }
.tx-type-deposit { color: #4CAF50; font-weight: bold; }
.tx-type-withdraw { color: #E53935; font-weight: bold; }
.tx-status-completed { background: rgba(76, 175, 80, 0.2); color: #4CAF50; padding: 4px 10px; border-radius: 6px; font-size: 0.85em; font-weight: bold; }

/* =======================================================
   7. DESIGN RESPONSIVO (MOBILE E TABLETS)
   ======================================================= */

/* Quebra para Tablet / Mobile Layout (<= 1024px) */
@media (max-width: 1024px) {
    .site-wrapper {
        display: block; /* Tira o lado a lado */
        padding-top: 75px;
    }
    
    .main-content-wrapper {
        width: 100%;
    }

    /* =======================================================
       CHAT MOBILE: BOTÃO FLUTUANTE CENTRALIZADO
       ======================================================= */
       
    /* 1. O Chat Aberto (Painel que sobe da base) */
    .social-sidebar {
        position: fixed;
        bottom: 0;
        top: auto !important; 
        left: 0;
        width: 100%;
        height: 75vh;
        z-index: 9999;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.8);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform: none !important; 
    }

    /* 2. O Chat Minimizado (Botão Flutuante Centro-Direita) */
    .social-sidebar.minimized {
        width: 60px !important;
        height: 60px !important;
        min-height: 60px !important;
        border-radius: 50% !important; 
        
        /* Posição no meio da tela, encostado à direita */
        top: 50% !important;
        bottom: auto !important;
        right: 15px !important;
        left: auto !important; 
        transform: translateY(-50%) !important; 
        
        background-color: #4CAF50 !important; 
        border: 2px solid #2a2a2a;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        padding: 0 !important;
        overflow: hidden;
    }

    /* 3. A Mágica do seu HTML: Esconde todo o miolo de uma vez! */
    .social-sidebar.minimized .sidebar-content {
        display: none !important;
    }

    /* 4. O Cabeçalho (Onde vamos matar o &minus;) */
    .social-sidebar.minimized .sidebar-header {
        width: 100%;
        height: 100%;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        position: relative; /* Base para o emoji */
    }

    /* 🟢 AQUI ESTAVA O SEU VILÃO: Escondemos o h3 e o botão real! */
    .social-sidebar.minimized .sidebar-header h3,
    .social-sidebar.minimized .sidebar-header .toggle-chat-btn {
        display: none !important;
    }

    /* 5. Ícone de Chat 100% Centralizado */
    .social-sidebar.minimized .sidebar-header::after {
        content: '💬';
        font-size: 28px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centralização perfeita */
        line-height: 1;
        cursor: pointer;
    }
} /* 🟢 CHAVE DE FECHAMENTO ADICIONADA AQUI (Fechando o max-width: 1024px) */


/* Quebra para Celular Médio (<= 890px) */
@media (max-width: 890px) {
    #slots-scroller { gap: 8px; padding-right: 78px; }
    .slot, .flip-container { width: 70px; height: 70px; font-size: 0.8em; }
    .result-sequence { height: 90px; }
    .value { font-size: 1.6em; }
    .label { font-size: 0.6em; }
    .parity-label { font-size: 0.5em; }
    
    .bet-area { flex-direction: column; }
    #bet-group-colors, #bet-group-parity { flex-basis: 100%; width: 100%; }
}

/* Quebra para Celular Pequeno (<= 500px) */
@media (max-width: 500px) {
    .page-container, .game-container { padding: 15px; }
    #slots-scroller { padding-right: 52px; gap: 6px; }
    .rollover-label { display: none; }
    .rollover-progress-container { width: 120px; }
    #bet-group-colors .bet-group-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Duas colunas perfeitas */
        gap: 12px;
    }
    .banner-wrapper {
        /* Reduzimos o recuo e a largura extra para encaixar na borda mobile */
        width: calc(100% + 20px); 
        margin: -10px -10px 20px -10px; 
        
        /* 🟢 A TRAVA DE SEGURANÇA: Garante que nunca ultrapasse a largura do próprio site */
        max-width: 100vw; 
        box-sizing: border-box;
    }
    /* O Coringa Verde ganha a linha de baixo inteira para destaque máximo */
    #bet-green {
        grid-column: 1 / span 2; 
    }

    #bet-group-parity .bet-group-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Ímpar e Par lado a lado */
        gap: 12px;
    }

    .bet-button {
        height: 55px; /* Altura generosa e segura para o toque do polegar */
        font-size: 0.9em;
        min-width: unset; /* Remove travas do computador */
        margin: 0; /* Garante que o grid cuida do espaçamento */
    }

    .slot.color-GREEN .value.coringa-icon, .back.color-GREEN .value.coringa-icon {
        height: 32px;
    }
    .slot.color-GREEN .value.coringa-icon .coringa-svg-img, .back.color-GREEN .value.coringa-icon .coringa-svg-img {
        max-height: 28px;
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.8));
    }

    /* O '?' flutuante menorzinho */
    .front {
        font-size: 1.4em; 
    }

    .social-sidebar { width: 90%; right: 5%; height: 400px; bottom: 10px; }
    .result-sequence { height: 66px; gap: 5px; padding: 8px; }
    .slot, .flip-container { width: 46px; height: 46px; font-size: 0.8em; border-width: 1px; }
    .value { font-size: 1.15em; margin-top: -1px; margin-bottom: 0px; }
    .label { font-size: 0.5em; }
    .parity-label { font-size: 0.45em; letter-spacing: 0.5px;}
    
    /* Ajustes para caber nos modals do celular */
    .settings-modal-content { flex-direction: column; height: 90vh; overflow-y: auto;}
    .settings-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #2a2a2a; display: flex; overflow-x: auto; padding: 10px; }
    .settings-tab-btn { margin-bottom: 0; margin-right: 10px; white-space: nowrap; padding: 10px; }
    .settings-main-content { padding: 20px 15px; }

    /* =======================================================
       🟢 DASHBOARDS AFILIADO E INFLUENCER (OTIMIZAÇÃO MOBILE)
       ======================================================= */
    
    /* 1. Caixas de Valores: Lado a Lado e mais compactas */
    .wallet-balances {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Duas caixas por linha */
        gap: 10px !important;
        flex-direction: unset !important; /* Anula o empilhamento padrão */
    }

    /* Se houver uma 3ª caixa (ímpar), ela ocupa a linha de baixo inteira para ficar bonito */
    .wallet-balances .wallet-card:last-child:nth-child(odd) {
        grid-column: 1 / span 2;
    }

    .wallet-card {
        padding: 15px 10px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .wallet-label {
        font-size: 0.65em !important;
        margin-bottom: 5px !important;
    }

    .wallet-amount {
        font-size: 1.2em !important; /* Dinheiro ligeiramente menor para não quebrar */
    }

    /* 2. O Botão Copiar que Vaza a Tela */
    .copy-group, .link-box, .input-group-auth {
        display: flex;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 5px;
    }

    /* A Mágica: Força a caixa de texto a ceder espaço */
    input[id*="link"], input[id*="code"], input[readonly] {
        flex: 1;
        min-width: 0 !important; 
        font-size: 0.85em !important;
        padding: 12px 10px !important;
    }

    /* O botão Copiar mantém a sua integridade e não é esmagado */
    button[id*="copy"], .copy-btn {
        flex-shrink: 0 !important; 
        padding: 10px 15px !important;
        font-size: 0.9em !important;
        white-space: nowrap; /* Impede que a palavra "Copiar" quebre ao meio */
    }
}