/* ===== Bolão Copa 2026 — tema gramado elegante ===== */

:root {
    --grass-dark: #0b3d1f;
    --grass-mid: #14532d;
    --grass-light: #1e7a40;
    --grass-accent: #4ade80;
    --gold: #fbbf24;
    --pitch-line: rgba(255, 255, 255, .25);
}

/* Mobile-first: base pensada para telas pequenas; ajustes para desktop via media queries */
body {
    font-family: 'Poppins', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #f0fdf4;
    background-color: var(--grass-dark);
    /* faixas de gramado cortado */
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 0 48px,
            rgba(0, 0, 0, 0.06) 48px 96px),
        radial-gradient(ellipse at 50% -20%, rgba(74, 222, 128, .28), transparent 60%),
        linear-gradient(180deg, var(--grass-mid), var(--grass-dark) 70%);
    background-attachment: fixed;
}

@media (min-width: 768px) {
    body {
        background-image:
            repeating-linear-gradient(90deg,
                rgba(255, 255, 255, 0.025) 0 90px,
                rgba(0, 0, 0, 0.06) 90px 180px),
            radial-gradient(ellipse at 50% -20%, rgba(74, 222, 128, .28), transparent 60%),
            linear-gradient(180deg, var(--grass-mid), var(--grass-dark) 70%);
    }
}

/* Efeito de luz de estádio varrendo o gramado (leve, só transform/opacity).
   z-index negativo: fica acima do fundo e abaixo de TODO o conteúdo, sem criar
   stacking contexts em main/nav/footer — assim modal e backdrop do Bootstrap
   empilham nativamente (backdrop 1050 < modal 1055). */
body::before {
    content: "";
    position: fixed;
    inset: -20% -50%;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent 40%,
        rgba(255, 255, 255, .045) 50%,
        transparent 60%);
    animation: stadium-sweep 14s ease-in-out infinite alternate;
}

@keyframes stadium-sweep {
    from { transform: translateX(-12%); }
    to   { transform: translateX(12%); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

main { flex: 1 0 auto; min-height: 80vh; }

h1, h2, h3, .display-team { font-family: 'Poppins', sans-serif; font-weight: 700; }

.brand-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .08em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Cartões sobre o gramado */
.card-grass {
    background: rgba(255, 255, 255, .96);
    color: #14241a;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.card-grass .card-header {
    background: linear-gradient(135deg, var(--grass-mid), var(--grass-light));
    color: #fff;
    border-radius: 1rem 1rem 0 0;
    font-weight: 600;
}

/* Placar digital */
.scoreboard {
    background: #0a0f0a;
    border: 3px solid #233a2b;
    border-radius: .75rem;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, .9), 0 8px 24px rgba(0, 0, 0, .4);
    padding: .5rem 1rem;
}

.score-digit, input.score-digit {
    font-family: 'DSEG7 Classic', monospace;
    font-size: clamp(2.6rem, 14vw, 5.5rem);
    color: #ffd166;
    text-shadow: 0 0 18px rgba(255, 209, 102, .55);
    background: transparent;
    border: none;
    width: 2ch;
    text-align: center;
    caret-color: #ffd166;
    animation: digit-glow 2.6s ease-in-out infinite alternate;
}

@keyframes digit-glow {
    from { text-shadow: 0 0 12px rgba(255, 209, 102, .4); }
    to   { text-shadow: 0 0 26px rgba(255, 209, 102, .75); }
}

input.score-digit:focus { outline: 2px solid var(--grass-accent); border-radius: .5rem; }

.score-x {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: #e5e7eb;
}

/* Split de equipes com versus */
.match-split { display: flex; align-items: stretch; gap: 0; border-radius: 1rem; overflow: hidden; }

.team-side {
    flex: 1;
    padding: 2rem 1rem;
    text-align: center;
    color: #fff;
    position: relative;
}

.team-side img.team-flag {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
    transition: transform .25s ease;
}

.team-side:hover img.team-flag { transform: scale(1.06); }

.versus-badge {
    align-self: center;
    background: #fff;
    color: var(--grass-dark);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45);
    z-index: 2;
    margin: 0 -24px;
    animation: versus-pulse 3s ease-in-out infinite;
}

@keyframes versus-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .45); }
}

@media (min-width: 768px) {
    .team-side img.team-flag { width: 96px; height: 64px; }
    .versus-badge { width: 64px; height: 64px; font-size: 1.8rem; margin: 0 -32px; }
}

/* Toques confortáveis no mobile */
.btn { min-height: 44px; }
.card-grass .card-body { padding: 1rem; }
@media (min-width: 768px) {
    .card-grass .card-body { padding: 1.5rem; }
}

/* Status badges */
.badge-status-pendente   { background: #6b7280; }
.badge-status-temporario { background: #6b7280; }
.badge-status-ativo      { background: #16a34a; }
.badge-status-fechado    { background: #d97706; }
.badge-status-finalizado { background: #2563eb; }

/* Botões */
.btn-grass {
    background: linear-gradient(135deg, #15803d, #16a34a);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-grass:hover { background: linear-gradient(135deg, #166534, #15803d); color: #fff; }

.btn-gold {
    background: linear-gradient(135deg, #f59e0b, var(--gold));
    border: none;
    color: #422006;
    font-weight: 700;
}

/* Navbar admin */
.navbar-grass {
    background: rgba(7, 32, 17, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--pitch-line);
}

.footer-grass {
    color: rgba(240, 253, 244, .7);
    background: rgba(5, 24, 13, .65);
    border-top: 1px solid var(--pitch-line);
}

/* Botão flutuante de suporte WhatsApp (mobile-first) */
.whatsapp-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}

.whatsapp-float,
.whatsapp-float:hover,
.whatsapp-float:focus { text-decoration: none; }

.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

@media (min-width: 768px) {
    .whatsapp-float { right: 24px; bottom: 24px; width: 60px; height: 60px; }
}

/* Modais têm fundo branco: não herdar a cor clara do body (texto ilegível) */
.modal-content {
    color: #14241a;
}

/* Modal PIX */
.pix-logo-color { color: #32bcad; }
.pix-modal .qr-box {
    background: #fff;
    border-radius: .75rem;
    padding: 1rem;
    display: inline-block;
}

/* Vencedor em destaque */
.winner-row {
    background: linear-gradient(90deg, rgba(251, 191, 36, .18), transparent);
    border-left: 4px solid var(--gold);
}

/* Banner de header da página pública — mesmo ratio do recorte (3:1) */
.header-banner {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Linha central de campo decorativa em headers de página pública */
.pitch-hero {
    position: relative;
    padding: 2.5rem 0;
}
.pitch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px solid var(--pitch-line);
    border-bottom: 2px solid var(--pitch-line);
    pointer-events: none;
}