/* Tema Seleção Brasileira – Copa Roleta (frontend) */
:root {
    --br-yellow: #FFDF00;
    --br-yellow-glow: #f9cf03;
    --br-yellow-light: #FFE566;
    --br-green: #009C3B;
    --br-green-light: #00B347;
    --br-green-dark: #006B3F;
    --br-green-deep: #004D26;
    --br-green-panel: rgba(0, 80, 40, 0.78);
    --br-green-panel-hover: rgba(0, 100, 50, 0.88);
    --br-green-border: rgba(0, 156, 59, 0.55);
    --br-text-on-yellow: #003820;
    --br-bg-dark: #0a1a10;
    --br-card: #0f2418;
    --br-card-alt: #142e1c;
    --br-blue: #002776;
}

body, html {
    background-color: var(--br-bg-dark) !important;
}

#game-container {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 156, 59, 0.12) !important;
}

/* Painéis e botões do jogo */
.ui-panel {
    background-color: var(--br-green-panel) !important;
    border-color: var(--br-green-border) !important;
}

.ui-panel .value {
    color: var(--br-yellow-glow) !important;
}

.ui-button,
.icon-button {
    background-color: var(--br-green-panel) !important;
    border-color: var(--br-green-border) !important;
    color: var(--br-yellow-glow) !important;
}

#deposit-button {
    background: linear-gradient(135deg, var(--br-green-dark), var(--br-green)) !important;
    border-color: var(--br-yellow-glow) !important;
    color: var(--br-yellow) !important;
    box-shadow: 0 4px 20px rgba(0, 156, 59, 0.55) !important;
}

#deposit-button:hover {
    background: linear-gradient(135deg, var(--br-green), var(--br-green-light)) !important;
    box-shadow: 0 6px 30px rgba(0, 156, 59, 0.7) !important;
}

@keyframes depositPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 223, 0, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 30px rgba(0, 156, 59, 0.65);
        transform: scale(1.05);
    }
}

#deposit-arrow svg {
    fill: var(--br-yellow-glow) !important;
}

/* Modais genéricos */
#modal-content {
    background-color: rgba(0, 40, 20, 0.92) !important;
    border-color: var(--br-yellow-glow) !important;
    box-shadow: 0 0 20px rgba(255, 223, 0, 0.35) !important;
}

#modal-title {
    color: var(--br-yellow-glow) !important;
}

#modal-button {
    background-color: var(--br-green) !important;
}

#modal-button:hover {
    background-color: var(--br-green-dark) !important;
}

/* Modal de vitória */
.win-modal-content {
    background: linear-gradient(165deg, var(--br-green-dark) 0%, var(--br-green-deep) 35%, #003820 70%, #001a0d 100%) !important;
    border-color: var(--br-yellow-glow) !important;
}

.win-button {
    color: var(--br-text-on-yellow) !important;
    box-shadow: 0 4px 0 var(--br-green-deep), 0 6px 20px rgba(249, 207, 3, 0.5) !important;
}

.win-button:hover {
    box-shadow: 0 6px 0 var(--br-green-deep), 0 8px 25px rgba(249, 207, 3, 0.6) !important;
}

/* Micro-prêmio */
.micro-premio-modal {
    background: linear-gradient(135deg, rgba(0, 107, 63, 0.96), rgba(0, 60, 30, 0.96)) !important;
    box-shadow: 0 20px 60px rgba(0, 156, 59, 0.45) !important;
}

.micro-premio-value {
    color: var(--br-yellow-glow) !important;
    text-shadow: 0 0 20px rgba(255, 223, 0, 0.45) !important;
}

@keyframes glow {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 223, 0, 0.45); }
    50% { text-shadow: 0 0 30px rgba(255, 223, 0, 0.65); }
}

/* Perfil */
#profile-modal-content {
    background-color: rgba(5, 25, 14, 0.96) !important;
    border: 1px solid var(--br-green-border) !important;
}

#profile-header {
    border-bottom-color: rgba(0, 156, 59, 0.35) !important;
}

#close-profile-button {
    color: var(--br-yellow-glow) !important;
}

.profile-button {
    background-color: var(--br-green-panel-hover) !important;
    border-color: var(--br-green-border) !important;
    color: var(--br-yellow-glow) !important;
}

.profile-button:hover {
    background-color: rgba(0, 120, 60, 0.85) !important;
}

/* Auth modal */
.auth-modal-content {
    background: linear-gradient(165deg, rgba(0, 107, 63, 0.94) 0%, rgba(0, 77, 38, 0.96) 50%, rgba(0, 40, 20, 0.94) 100%) !important;
    border-color: rgba(249, 207, 3, 0.6) !important;
}

.auth-tab.active {
    color: var(--br-text-on-yellow) !important;
}

.auth-form .submit-btn {
    color: var(--br-text-on-yellow) !important;
}

/* Central de ajuda */
#help-modal-content {
    background: var(--br-card) !important;
    border-color: rgba(0, 156, 59, 0.3) !important;
}

#help-modal-content::-webkit-scrollbar-thumb {
    background: var(--br-green-dark) !important;
}

.help-header {
    background: linear-gradient(135deg, var(--br-green-dark), var(--br-green)) !important;
    border-bottom-color: var(--br-yellow) !important;
}

.help-header h2,
.help-close,
.help-tab.active,
.help-section h3,
.help-section h4,
.help-section strong,
.help-section code {
    color: var(--br-yellow) !important;
}

.help-close {
    border-color: var(--br-yellow) !important;
}

.help-tab.active {
    background: linear-gradient(135deg, var(--br-green-dark), var(--br-green)) !important;
    border-color: var(--br-yellow) !important;
}

/* Notificações */
#notification {
    background-color: var(--br-green) !important;
}

.withdraw-notification {
    background: linear-gradient(135deg, var(--br-green-dark), var(--br-green-deep)) !important;
    box-shadow: 0 4px 12px rgba(0, 156, 59, 0.45) !important;
}

.withdraw-notification-amount {
    color: var(--br-yellow) !important;
}

/* Depósito / Saque modals */
.modal-card {
    background-color: var(--br-card) !important;
    border-color: rgba(0, 156, 59, 0.25) !important;
}

.modal-close {
    color: var(--br-yellow) !important;
    border-color: rgba(255, 223, 0, 0.55) !important;
}

.modal-close:hover {
    border-color: var(--br-yellow) !important;
}

.amount-input:focus,
.text-input:focus {
    border-color: var(--br-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 156, 59, 0.3) !important;
}

.deposit-form .amount-input {
    border-color: var(--br-green) !important;
}

.deposit-form .amount-input:focus {
    border-color: var(--br-green-light) !important;
    box-shadow: 0 0 0 3px rgba(0, 156, 59, 0.25) !important;
}

.deposit-form .generate-btn {
    background: var(--br-green-dark) !important;
    color: var(--br-yellow) !important;
}

.deposit-form .generate-btn:hover {
    background: var(--br-green) !important;
}

.withdraw-form .generate-btn {
    background: linear-gradient(135deg, var(--br-green-dark), var(--br-green)) !important;
}

.withdraw-form .generate-btn:hover {
    box-shadow: 0 12px 32px rgba(0, 156, 59, 0.45) !important;
}

.quente-tag {
    background: var(--br-yellow) !important;
    color: var(--br-text-on-yellow) !important;
}

.pix-selector:focus,
.pix-input:focus {
    border-color: var(--br-green) !important;
}

.copy-btn {
    background: var(--br-green) !important;
}

.loading-overlay .spinner {
    border-top-color: var(--br-yellow-glow) !important;
}

/* Histórico */
.history-modal-content,
.affiliate-modal-content {
    background-color: var(--br-card) !important;
    border-color: rgba(0, 156, 59, 0.25) !important;
}

.history-modal-header,
.affiliate-modal-header {
    border-bottom-color: rgba(0, 156, 59, 0.35) !important;
}

.history-modal-title,
.affiliate-modal-title,
.stat-item-affiliate .value {
    color: var(--br-yellow-glow) !important;
}

.history-modal-close,
.affiliate-modal-close {
    color: var(--br-yellow) !important;
}

.history-item {
    background-color: var(--br-card-alt) !important;
    border-left-color: var(--br-green) !important;
}

.affiliate-section {
    background-color: var(--br-card-alt) !important;
}

.link-container,
.commission-item,
.history-item-affiliate {
    background-color: var(--br-card-alt) !important;
    border-color: rgba(0, 156, 59, 0.2) !important;
}

#copy-link-btn,
#ver-depositos-btn {
    background-color: var(--br-green) !important;
}

.commission-item .value {
    color: var(--br-yellow-glow) !important;
}

.history-item-affiliate .deposit .value {
    color: var(--br-yellow-glow) !important;
}

.deposito-completo-item {
    background-color: var(--br-card-alt) !important;
}

.deposito-completo-item .valor-deposito {
    color: var(--br-yellow-glow) !important;
}

#depositos-trazidos-list {
    scrollbar-color: var(--br-green-dark) var(--br-card-alt) !important;
}

#depositos-trazidos-list::-webkit-scrollbar-track {
    background: var(--br-card-alt) !important;
}

#depositos-trazidos-list::-webkit-scrollbar-thumb {
    background: var(--br-green-dark) !important;
}