/* ARQUIVO: style.css (COMPLETO E FINAL COM LABELS BRANCAS) */

/* --- Importando fontes do Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@400;500&display=swap');

/* --- Estilos Gerais --- */
body { font-family: 'Roboto', sans-serif; background: #0c0c0c url('https://pwdn.site/img/bg.jpg') no-repeat center center fixed; background-size: cover; color: #c0c0c0; padding-top: 80px; }
h1, h2, h3, h4, h5, .card-header, .btn, .navbar-brand, .list-group-item, .calendar th, .table thead { font-family: 'Cinzel', serif; }

/* --- Container do Login --- */
.pw-login-container { background-color: rgba(13, 20, 29, 0.92); border: 1px solid #2a3b4a; border-radius: 8px; box-shadow: inset 0 0 15px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5); width: 100%; max-width: 450px; padding: 2.5rem; color: #c0c0c0; margin: auto; }
.pw-login-container h1 { font-family: 'Cinzel', serif; color: #ffd700; font-weight: 700; text-align: center; border-bottom: 2px solid #b8860b; padding-bottom: 10px; margin-bottom: 2.5rem; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
.form-control { background-color: rgba(10, 20, 30, 0.8) !important; border: 1px solid #2a3b4a !important; color: #c0c0c0 !important; border-radius: 5px; padding: 1rem; font-family: 'Roboto', sans-serif; }
.form-control:focus { border-color: #b8860b !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important; }

/* --- Layout e Navegação --- */
.dashboard-layout { max-width: 1320px; margin: 0 auto; padding: 1rem; }
.navbar-top { position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(10, 15, 25, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); border-bottom: 1px solid #2a3b4a; padding: 0.8rem 2rem; z-index: 1030; }
.navbar-brand { font-weight: 700; color: #c0c0c0 !important; transition: color 0.3s; }
.navbar-brand:hover { color: #ffd700 !important; }

/* --- Cards e Menu Lateral --- */
.card { background: linear-gradient(160deg, rgba(20, 30, 48, 0.9), rgba(12, 18, 28, 0.95)); border: 1px solid #2a3b4a !important; box-shadow: 0 0 20px rgba(0,0,0,0.5) !important; border-radius: 8px !important; position: relative; }
.card-opaque { background: #0d141d !important; }
.card-header { background-color: rgba(0,0,0,0.3) !important; border-bottom: 1px solid #2a3b4a !important; color: #ffd700; font-weight: 700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
.list-group-item { background-color: transparent !important; border: 0 !important; border-top: 1px solid rgba(42, 59, 74, 0.5) !important; color: #FFFFFF; transition: all 0.2s ease-in-out; padding: 0.9rem 1.25rem; }
.list-group-item:first-child { border-top: 0 !important; }
.list-group-item.active { background-color: #b8860b !important; color: #fff !important; text-shadow: 0 0 5px #000; }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: rgba(184, 134, 11, 0.15) !important; color: #ffd700; border-left: 4px solid #ffd700; transform: translateX(5px); }

/* --- Estilo da Caixa de Meta de Doação --- */
.donation-goal-box { background-color: rgba(10, 20, 30, 0.8); border: 1px solid #b8860b; border-radius: 8px; padding: 20px; margin-bottom: 2rem; box-shadow: 0 0 15px rgba(255, 215, 0, 0.1); }
.donation-goal-title { font-family: 'Cinzel', serif; font-weight: 700; color: #ffd700; text-align: center; margin-bottom: 15px; }

/* --- Página de Recompensas Diárias --- */
.nav-tabs { border-bottom: 1px solid #2a3b4a; }
.nav-tabs .nav-link { font-family: 'Cinzel', serif; font-weight: 700; color: #a0b0c0; background-color: transparent; border: 0; border-bottom: 3px solid transparent; padding: 0.75rem 1.5rem; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: #ffd700; border-bottom: 3px solid #ffd700; background-color: rgba(184, 134, 11, 0.1); }
.tab-content { background-color: transparent; border: 0; padding: 0; }
#checkin p.text-center { color: #FFFFFF !important; }

/* --- Jogo da Mina --- */
.mines-container { display: grid; grid-template-columns: 1fr 250px; gap: 2rem; padding: 2rem; background-color: rgba(13, 20, 29, 0.8); border: 1px solid #2a3b4a; border-radius: 8px; }
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; aspect-ratio: 1 / 1; perspective: 1000px; }
.mine-tile { position: relative; transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer; }
.mine-tile.is-flipped { transform: rotateY(180deg); cursor: default; }
.tile-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 5px; font-size: 2.5rem; }
.tile-front { background: linear-gradient(145deg, #2a3b4a, #1d2834); border: 1px solid #3c4f61; }
.mine-tile:not(.is-flipped):hover .tile-front { background: linear-gradient(145deg, #3c4f61, #2a3b4a); transform: scale(1.05); }
.tile-back { background-color: #132433; transform: rotateY(180deg); border: 1px solid #2a3b4a; }
.tile-back .fa-star { color: #ffd700; text-shadow: 0 0 15px #ffd700; }
.tile-back .fa-bomb { color: #dc3545; text-shadow: 0 0 15px #dc3545; }
.mines-controls { background-color: rgba(10, 20, 30, 0.5); padding: 1.5rem; border-radius: 8px; border: 1px solid #2a3b4a; display: flex; flex-direction: column; justify-content: space-between; }
.mines-info-box label { font-family: 'Cinzel', serif; color: #a0b0c0; font-size: 0.9rem; }
.mines-info-box .value { font-weight: 700; font-size: 1.8rem; }
.mines-info-box .value.profit { color: #28a745; }
.mines-info-box .value.next-profit { color: #0dcaf0; }
#mines-message { text-align: center; padding: 10px; border-radius: 5px; margin-top: 1rem; font-weight: bold; min-height: 40px;}
#mines-message.win { background-color: rgba(40, 167, 69, 0.2); color: #28a745; }
#mines-message.lose { background-color: rgba(220, 53, 69, 0.2); color: #dc3545; }

/* --- Arena Dourada (Jogo da Cobrinha) --- */
.snake-container-grid { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; padding: 2rem; background-color: rgba(13, 20, 29, 0.8); border: 1px solid #2a3b4a; border-radius: 8px; }
#snake-board { background-color: #1a2533; border: 2px solid #2a3b4a; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.snake-controls { background-color: rgba(10, 20, 30, 0.5); padding: 1.5rem; border-radius: 8px; border: 1px solid #2a3b4a; display: flex; flex-direction: column; }

/* --- Giro Premiado --- */
.giro-container-grid { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; padding: 2rem; background-color: rgba(13, 20, 29, 0.8); border: 1px solid #2a3b4a; border-radius: 8px; align-items: center; position: relative; }
.giro-reels-wrapper { position: relative; display: flex; gap: 15px; background: transparent; padding: 0; border-radius: 10px; border: 1px solid #ffd700; box-shadow: none; height: 120px; }
.reel { width: 120px; height: 120px; overflow: hidden; border-radius: 5px; background-color: rgba(0,0,0,0.3); }
.reel-strip { /* O JS cuida da transição e transformação */ }
.symbol { width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; padding: 10px; }
.symbol img { max-width: 100%; max-height: 100%; object-fit: contain; }
.giro-controls { background-color: rgba(10, 20, 30, 0.5); padding: 1.5rem; border-radius: 8px; border: 1px solid #2a3b4a; display: flex; flex-direction: column; height: 100%; }
.win-message { font-family: 'Cinzel', serif; color: #28a745; font-size: 1.2rem; font-weight: bold; min-height: 30px; }
#spin-button { font-family: 'Cinzel', serif; font-weight: 700; background-color: #ffd700; border-color: #b8860b; color: #000; text-shadow: none; }
#spin-button:hover, #spin-button:focus { background-color: #ffed4a; border-color: #ffd700; }

/* --- Página de Detalhes do Personagem --- */
.character-details-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
.character-info-pane, .character-stats-pane { background-color: rgba(10, 20, 30, 0.5); padding: 1.5rem; border-radius: 8px; border: 1px solid #2a3b4a; }
.character-info-pane { text-align: center; }
.class-image-container { background-color: rgba(0,0,0,0.3); border-radius: 50%; width: 120px; height: 120px; margin: 0 auto 1.5rem auto; overflow: hidden; border: 3px solid #b8860b; padding: 10px; }
.class-image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.stat-block hr { border-color: #2a3b4a; }
.character-stats-pane .list-group-item { background-color: transparent !important; border-color: rgba(42, 59, 74, 0.5) !important; color: #c0c0c0; font-size: 1rem; }
.character-name { color: #ffd700 !important; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); font-family: 'Cinzel', serif; font-size: 1.8rem; }
.pane-title { color: #ffd700 !important; border-bottom: 2px solid #b8860b; padding-bottom: 10px; margin-bottom: 1rem; font-family: 'Cinzel', serif; }
.character-class { color: #a0b0c0 !important; font-size: 1.1rem; margin-top: -10px; }
.stat-block p { color: #FFFFFF !important; margin-bottom: 0.5rem; }

/* --- Estilos para Tabelas --- */
.table { color: #c0c0c0; }
.table th, .table td { background-color: transparent !important; border-color: #2a3b4a; vertical-align: middle; color: #FFFFFF; }
.table thead th { color: #ffd700; border-bottom: 2px solid #2a3b4a; border-top: none; }
.table-hover tbody tr:hover { background-color: rgba(184, 134, 11, 0.1); color: #ffd700; }
.table .btn-outline-primary { color: #b8860b; border-color: #b8860b; font-weight: bold; transition: all 0.2s ease-in-out; }
.table .btn-outline-primary:hover { color: #fff; background-color: #b8860b; border-color: #b8860b; box-shadow: 0 0 8px rgba(184, 134, 11, 0.5); }

/* --- Estilos para o Calendário de Check-in --- */
.calendar { width: 100%; border-collapse: collapse; text-align: center; margin-top: 1.5rem; }
.calendar thead th { font-family: 'Cinzel', serif; color: #ffd700; padding: 0.75rem 0.5rem; font-size: 1rem; font-weight: 700; border-bottom: 2px solid #2a3b4a; }
.calendar .day-cell { border: 1px solid #2a3b4a; padding: 0.5rem; height: 100px; vertical-align: top; transition: all 0.2s ease-in-out; }
.calendar .day-number { font-size: 1.25rem; font-weight: bold; opacity: 0.8; margin-bottom: 0.5rem; color: #FFFFFF; }
.calendar .not-month { background-color: transparent; border-color: transparent; }
.calendar .day-cell:not(.not-month):hover { background-color: rgba(184, 134, 11, 0.1); }
.calendar .today { border: 2px solid #b8860b; background-color: rgba(184, 134, 11, 0.05); box-shadow: inset 0 0 15px rgba(184, 134, 11, 0.2); }
.calendar .today .day-number { color: #ffd700; opacity: 1; }
.calendar .claimed { background-color: rgba(40, 167, 69, 0.2); opacity: 0.7; }
.calendar .missed { background-color: rgba(220, 53, 69, 0.15); opacity: 0.4; }
.calendar .btn-primary { background-color: #b8860b; border-color: #b8860b; font-family: 'Cinzel', serif; font-weight: 700; padding: 0.25rem 0.75rem; font-size: 0.8rem; width: 100%; }
.calendar .btn-primary:hover { background-color: #ffd700; border-color: #ffd700; color: #000; }
.calendar .badge.bg-success { background-color: #28a745 !important; font-family: 'Cinzel', serif; font-size: 0.8rem; padding: 0.4rem 0.75rem; width: 100%; }

/* --- Melhorias na Loja e Modal de Oferta --- */
.coupon-header { font-family: 'Cinzel', serif; color: #FFFFFF; text-align: center; padding: 10px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid #2a3b4a; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.coupon-header + .input-group .form-control, .coupon-header + .input-group .btn { border-top-left-radius: 0; border-top-right-radius: 0; }
.modal-upsell { background: linear-gradient(160deg, rgba(20, 30, 48, 0.95), rgba(12, 18, 28, 0.98)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid #2a3b4a; box-shadow: 0 0 30px rgba(0,0,0,0.7); border-radius: 8px; color: #c0c0c0; }
.modal-upsell .modal-header { border-bottom: 1px solid #2a3b4a; color: #ffd700; }
.modal-upsell .modal-header .modal-title { font-family: 'Cinzel', serif; }
.modal-upsell .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.modal-upsell .modal-body { padding: 2rem; color: #FFFFFF; }
.modal-upsell .lead { font-size: 1.1rem; }
.modal-upsell h4 { color: #FFFFFF; font-weight: 700; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.modal-upsell .upsell-highlight { font-size: 2rem; font-weight: bold; color: #28a745; text-shadow: 0 0 10px rgba(40, 167, 69, 0.5); }
.modal-upsell hr { border-color: #2a3b4a; }
.modal-upsell .current-package-info { opacity: 0.7; color: #c0c0c0; }
.modal-upsell .modal-footer { border-top: 1px solid #2a3b4a; background-color: rgba(0,0,0,0.2); }
.countdown-timer { background-color: rgba(0,0,0,0.4); border-radius: 5px; padding: 2px; border: 1px solid #2a3b4a; }
#countdownBar { background-color: #b8860b; height: 5px; border-radius: 3px; }
.modal-upsell .btn-secondary { background-color: #2a3b4a; border-color: #3c4f61; color: #c0c0c0; }
.modal-upsell .btn-secondary:hover { background-color: #3c4f61; border-color: #5d7387; }
.modal-upsell .btn-success { background-color: #28a745; border-color: #1c7430; font-family: 'Cinzel', serif; font-weight: 700; }
.modal-upsell .btn-success:hover { background-color: #32c955; border-color: #28a745; }

/* --- Botões da Loja com Animação --- */
@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(220, 53, 69, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(220, 53, 69, 0.9); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(220, 53, 69, 0.5); }
}
.table td .btn.btn-outline-warning { position: relative; color: #FFFFFF; background-color: #28a745; border: 2px solid #28a745; font-family: 'Cinzel', serif; font-weight: 700; transition: all 0.3s ease; padding: 0.3rem 0.8rem; box-shadow: none; z-index: 1; }
.table td .btn.btn-outline-warning:hover { background-color: #32c955; border-color: #32c955; }
.table td .btn.btn-recommended { background-color: #dc3545; border-color: #dc3545; animation: pulse-red 2s infinite ease-in-out; z-index: 2; }
.table td .btn.btn-recommended:hover { animation-play-state: paused; background-color: #e74c3c; border-color: #e74c3c; }
.btn-recommended::after { content: 'RECOMENDADO'; position: absolute; top: -11px; right: -20px; background-color: #ffd700; color: #000; padding: 3px 10px; border-radius: 5px; font-size: 0.45rem; font-weight: bold; white-space: nowrap; transform: rotate(5deg); box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 3; }
.card-footer-note { color: #FFFFFF !important; opacity: 0.8; }

/* --- Animações para o Super Prêmio (Giro Premiado) --- */
@keyframes pulse-gold {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(255, 215, 0, 1); }
}
@keyframes gold-background-animation {
    0% { background-color: rgba(13, 20, 29, 0.8); }
    50% { background-color: rgba(80, 60, 0, 0.8); }
    100% { background-color: rgba(13, 20, 29, 0.8); }
}
@keyframes jackpot-text-animation {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.giro-container-grid.big-win { animation: gold-background-animation 1s ease-in-out; }
.symbol.symbol-win { animation: pulse-gold 1s ease-in-out 3; }
.win-animation-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.jackpot-text { font-family: 'Cinzel', serif; font-size: 3.5rem; font-weight: 700; color: #ffd700; text-shadow: 0 0 10px #000, 0 0 20px #ff8c00; animation: jackpot-text-animation 0.8s ease-out; }

/* Corrigindo a cor dos labels no formulário de aposta */
#challenges_for_me .form-label, 
.card-body .form-label { /* Aplica a todos os labels dentro do card-body */
    color: #FFFFFF !important; /* Cor branca. !important para garantir que sobreponha outras regras */
}