/* ============================================================
   Tema Copa do Mundo 2026 — página de login
   Ativo apenas durante a janela do torneio (gate em index.php).
   Remover após a Copa: este arquivo, js/componentes/login-copa.js
   e as pastas img/copa/ e mp3/copa/.
   ============================================================ */

/* ---- Background: campo com pincelada Brasil e torcida (full-bleed) ----
   fica no ::before pra manter o gradiente do body como fallback no load */
body.copa-login::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('../img/copa/background-campo.webp') center / cover no-repeat;
    pointer-events: none;
}

/* ---- Card glassmorphism: deixa o campo aparecer atrás ---- */
.copa-login .card {
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* vence o .border-0 do template */
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 20, 60, 0.35);
}

.copa-login .card .form-control {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.5);
}

.copa-login .card .form-control:focus {
    background: rgba(255, 255, 255, 0.95);
}

.copa-login .card hr {
    border-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.copa-login .card p.small {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---- Card: filete verde-amarelo-azul no topo ----
   cobre o card herdando o raio dos cantos: o filete é só o background de
   4px no topo, então as pontas curvam junto com o vidro (o .o-hidden do
   template não aplica overflow hidden aqui) */
.copa-login .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #009739, #fedd00 50%, #002776) top / 100% 4px no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* ---- Bola ARGOS no lugar do logo ---- */
.copa-bola {
    width: 150px;
    height: 150px;
    cursor: pointer;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.copa-bola:hover {
    transform: scale(1.05) rotate(8deg);
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.3));
}

/* ---- Selo discreto no rodapé do card ---- */
.copa-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---- Botão de som ---- */
.copa-mute {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    z-index: 60;
    transition: background 0.2s ease, transform 0.2s ease;
}

.copa-mute:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.07);
}

.copa-mute.muted {
    opacity: 0.65;
}

/* ---- Camada do doodle (acima de tudo, nunca clicável) ---- */
#copaDoodleLayer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
}

#copaDoodleLayer img,
#copaDoodleLayer div {
    position: absolute;
    will-change: transform, opacity;
}

.copa-rich {
    opacity: 0;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}

/* anel de impacto no momento do chute */
.copa-impacto {
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 26px rgba(254, 221, 0, 0.8);
    opacity: 0;
}

.copa-confete {
    border-radius: 2px;
}