/* ===== Batalha de Magos — visual original do Gemini, tela cheia, transparente. ===== */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@700;900&family=Press+Start+2P&display=swap');

body {
    background-color: transparent;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 4px 4px rgba(0,0,0,0.8);
    color: white;
    display: flex;
    justify-content: center;
}

.game-font { font-family: 'Bangers', cursive; letter-spacing: 2px; }
.pixel-font { font-family: 'Press Start 2P', cursive; text-shadow: 2px 2px 0px #000; }
.pixelated-svg { shape-rendering: crispEdges; }

/* aproxima os dois magos do centro (cada um ocupa 50% da tela e ficava
   meio jogado pra beirada) — puxa cada card um pouco pro meio */
#p1-container { transform: translateX(9%); }
#p2-container { transform: translateX(-9%); }

/* "Vencedor" + nome, centralizados na tela, depois de cada duelo */
#vitoria-central {
    display: none;
    position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    z-index: 55; text-align: center; pointer-events: none;
}
#vitoria-central.show { display: block; animation: vitoriaPop .5s cubic-bezier(.175,.885,.32,1.275); }
#vitoriaTitulo {
    font-family: 'Bangers', cursive; letter-spacing: 3px;
    font-size: clamp(3rem, 12vw, 4.5rem); color: #ffd700;
    text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 0 6px 14px rgba(0,0,0,.8);
}
#vitoriaNome {
    margin-top: 6px; font-family: 'Press Start 2P', cursive;
    font-size: clamp(.9rem, 4vw, 1.3rem); color: #fff;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
@keyframes vitoriaPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* formato vertical: o wrapper preenche o canvas todo (1080x1920 no Live
   Studio) em vez do max-w-[500px] centralizado do teste do Gemini — assim
   os magos ficam nas bordas esquerda/direita da tela cheia, nao amontoados
   numa coluna estreita no meio. */
#game-wrapper { max-width: 100%; transform: scale(var(--scale, 1)); transform-origin: center center; }

.idle { animation: breathe 1.2s infinite steps(2) alternate; }
@keyframes breathe { from { transform: translateY(0px); } to { transform: translateY(4px); } }

/* dano e golpe agora sao tocados via JS (Web Animations API) mexendo SO em
   "filter" — nunca em "transform". Antes as duas animacoes (.hit/.cast)
   tentavam recriar o espelhamento do mago vermelho (scaleX(-1)) dentro do
   proprio @keyframes via var(--facing)), e isso se mostrou fragil: o lado
   vermelho as vezes simplesmente nao piscava. Deixando "transform" fora
   dessas animacoes, o espelhamento de cada lado nunca e disputado. */

.magic-projectile {
    position: absolute;
    width: var(--proj-size, 20px);
    height: var(--proj-size, 20px);
    /* bem alto de proposito: os magos ganham seu proprio contexto de
       empilhamento (transform/filter nas animacoes de golpe/aura), entao
       um z-index baixo aqui podia perder pra eles e a bola ficava
       "atras" do personagem em vez de voar por cima */
    z-index: 999;
    pointer-events: none;
    /* left/top nao ficam mais fixos aqui — sao calculados em JS a cada
       quadro (ver overlay.js, animarProjetil) */
    filter: hue-rotate(var(--proj-hue, 0deg));
    /* forma de bola de fogo, nao um circulo perfeito — "transform" ja e
       usado pelo JS pra mover/crescer a bola, entao a tremulacao usa
       so border-radius/filter, que nunca disputam com isso */
    animation: chamaTremula .12s infinite alternate, chamaForma .4s infinite alternate ease-in-out;
}
@keyframes chamaTremula {
    0% { filter: hue-rotate(var(--proj-hue, 0deg)) brightness(1) saturate(1); }
    100% { filter: hue-rotate(var(--proj-hue, 0deg)) brightness(1.35) saturate(1.5); }
}
@keyframes chamaForma {
    0% { border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%; }
    50% { border-radius: 58% 42% 45% 55% / 48% 58% 42% 52%; }
    100% { border-radius: 42% 58% 55% 45% / 58% 42% 58% 42%; }
}

.proj-p1 {
    background: radial-gradient(circle at 50% 40%, #fffde6 0%, #ffe066 16%, #ff9a1f 36%, #ff4d00 60%, transparent 80%);
    box-shadow:
        -16px 2px 20px -2px rgba(255,120,0,.55), /* rastro puxado pra tras (ela voa pra direita) */
        0 0 10px 3px rgba(255,140,0,.95),
        0 0 26px 8px rgba(255,60,0,.5);
}
.proj-p2 {
    background: radial-gradient(circle at 50% 40%, #fffde6 0%, #ffe066 16%, #ff6a1f 36%, #b3001b 60%, transparent 80%);
    box-shadow:
        16px 2px 20px -2px rgba(200,30,0,.55), /* rastro puxado pra tras (ela voa pra esquerda) */
        0 0 10px 3px rgba(255,90,0,.95),
        0 0 26px 8px rgba(180,0,20,.6);
}

/* estourinho rapido no lugar exato onde a bola acerta, no instante do
   impacto — troca o "ficar parada" por algo que resolve na hora */
.magic-explosion {
    position: absolute;
    width: 46px; height: 46px;
    margin-left: -23px; margin-top: -23px; /* centraliza no ponto left/top */
    border-radius: 50%;
    pointer-events: none;
    z-index: 998;
    animation: explosaoMagica .35s ease-out forwards;
}
@keyframes explosaoMagica {
    0% { transform: scale(.2); opacity: 1; }
    60% { transform: scale(1); opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.proj-p1 {
    background: radial-gradient(circle, #ffffff 0%, #00ff66 40%, #002776 100%);
    box-shadow: 0 0 10px #00ff66, 0 0 20px #ffdf00;
}
.proj-p2 {
    background: radial-gradient(circle, #ffffff 0%, #ff8800 40%, #cc0000 100%);
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff8800;
}
/* o voo em si (esquerda/direita, partida/chegada) e calculado em JS a
   partir da posicao REAL dos magos na tela (getBoundingClientRect) e
   aplicado via transition — uma % fixa do canvas nao funciona porque o
   personagem tem tamanho fixo em pixels e o canvas pode ter larguras
   bem diferentes (testar numa janela larga desalinhava a bola). */

.aura-p1 {
    animation: glowP1 1.5s infinite alternate ease-in-out, breathe 1.2s infinite steps(2) alternate;
    filter: drop-shadow(0 0 15px #009c3b) drop-shadow(0 0 25px #ffdf00);
}
@keyframes glowP1 {
    from { filter: drop-shadow(0 0 5px #009c3b); }
    to { filter: drop-shadow(0 0 20px #ffdf00) drop-shadow(0 0 40px #009c3b); }
}
.aura-p2 {
    animation: glowP2 1.5s infinite alternate ease-in-out, breathe 1.2s infinite steps(2) alternate;
    filter: drop-shadow(0 0 15px #ff0000) drop-shadow(0 0 25px #ff8800);
}
@keyframes glowP2 {
    from { filter: drop-shadow(0 0 5px #ff0000); }
    to { filter: drop-shadow(0 0 20px #ff8800) drop-shadow(0 0 40px #ff0000); }
}

.floating-text {
    position: absolute;
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'Bangers', cursive;
    pointer-events: none;
    animation: floatUp 1s forwards ease-out;
    z-index: 50;
    text-shadow: 0px 0px 10px #000, 2px 2px 0px #000;
}
@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

.health-transition { transition: width 0.3s ease-out; }

.pop-in { animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* igual o .pop-in, mas mantendo o translate(-50%,-50%) que centraliza a
   contagem — usar .pop-in puro aqui sobrescrevia esse translate e a
   contagem aparecia fora do centro (ou nem aparecia de verdade). */
#countdown-display.pop-in {
    animation: contagemPop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes contagemPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
}

#char-p1 { --facing: 1; }
#char-p2 { --facing: -1; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; transition-duration: .12s !important; } }