/* atmosfera.css — clima da batalha no estilo Magic Campus (ver js/atmosfera_batalha.js).
   Tudo fica dentro de .at-diag (classe posta na raiz da batalha); sem ela vale o layout antigo. */

/* fundo: o próprio mapa congelado, escurecido, com vinheta */
.at-camadas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.at-diag.bt-raiz{background-color:#0b0a12!important;background-size:cover!important;background-position:center!important}
.at-fundo{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;filter:blur(1.5px) saturate(1.1);transform:scale(1.03);animation:atFundo 0.6s ease-out}
@keyframes atFundo{from{filter:blur(0) brightness(1.6);transform:scale(1.12)}to{filter:blur(1.5px) brightness(1);transform:scale(1.03)}}
.at-tinta{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;mix-blend-mode:multiply}
.at-vinheta{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,rgba(0,0,0,0) 28%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.85) 100%)}
.at-chefe .at-vinheta{background:radial-gradient(ellipse at 50% 52%,rgba(0,0,0,0) 26%,rgba(90,0,10,.5) 70%,rgba(40,0,0,.9) 100%);animation:atPulsar 2.4s ease-in-out infinite}
@keyframes atPulsar{50%{opacity:.75}}
.at-diag .bt-arena,.at-diag .bt-painel{position:relative;z-index:1}

/* círculo mágico no chão da arena */
.at-circulo{position:absolute;left:50%;top:49%;width:min(70vw,760px);aspect-ratio:2.1/1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.85}
.at-circulo svg{width:100%;height:100%;overflow:visible}
.at-circulo .at-gira{transform-origin:50% 50%;animation:atGira 40s linear infinite}
.at-circulo .at-gira2{transform-origin:50% 50%;animation:atGira 28s linear infinite reverse}
@keyframes atGira{to{transform:rotate(360deg)}}

/* entrada: clarão + faixa com o tipo de luta */
.at-flash{position:fixed;inset:0;z-index:55;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff 0,rgba(255,255,255,.85) 20%,rgba(190,170,255,0) 70%);animation:atFlash .55s ease-out forwards}
@keyframes atFlash{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}}
.at-banner{position:absolute;left:50%;top:44%;z-index:3;pointer-events:none;transform:translate(-50%,-50%);font:900 46px/1 'Segoe UI',system-ui,sans-serif;letter-spacing:6px;color:#ffe9a0;
  text-shadow:0 0 18px rgba(255,190,60,.9),0 3px 0 #7a3b00,0 6px 12px #000;-webkit-text-stroke:1.5px #5a2a00;animation:atBanner 1.5s ease-out forwards;white-space:nowrap}
.at-banner small{display:block;font-size:15px;letter-spacing:3px;color:#fff;-webkit-text-stroke:0;text-align:center;margin-top:6px}
.at-chefe .at-banner{color:#ff8a7a;text-shadow:0 0 22px rgba(255,40,40,.9),0 3px 0 #500,0 6px 12px #000}
@keyframes atBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}

/* formação em diagonal: inimigos no alto à esquerda, o seu lado embaixo à direita */
.at-diag .bt-lado{position:absolute;inset:0;display:block;pointer-events:none;max-height:none}
.at-diag .bt-un{position:absolute;pointer-events:auto;margin:-62px 0 0 -66px;z-index:1}
.at-diag .bt-ladoB .bt-un:nth-child(1){left:30%;top:47%}
.at-diag .bt-ladoB .bt-un:nth-child(2){left:16%;top:67%}
.at-diag .bt-ladoB .bt-un:nth-child(3){left:44%;top:27%}
.at-diag .bt-ladoB .bt-un:nth-child(4){left:12%;top:39%}
.at-diag .bt-ladoB .bt-un:nth-child(5){left:28%;top:21%}
.at-diag .bt-ladoA .bt-un:nth-child(1){left:70%;top:63%}
.at-diag .bt-ladoA .bt-un:nth-child(2){left:83%;top:45%}
.at-diag .bt-ladoA .bt-un:nth-child(n+3){left:84%;top:72%}
/* sombra no chão embaixo de cada unidade */
.at-diag .bt-bola{position:relative}
.at-diag .bt-bola::after{content:'';position:absolute;left:50%;top:88%;width:130%;height:34%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),rgba(0,0,0,0) 70%);z-index:-1}
/* ataque físico avança na diagonal, na direção do inimigo */
.at-diag .bt-un.avD{transform:translate(-70px,-46px)}
.at-diag .bt-un.avE{transform:translate(70px,46px)}
.at-diag .bt-un.vez{background:rgba(155,140,255,.14)}
.at-diag .bt-nome{text-shadow:0 1px 2px #000,0 0 4px #000}

/* números de dano grandes, como no Magic Campus */
.at-diag .bt-flut{font-size:34px;font-weight:900;color:#ff4a3a;-webkit-text-stroke:1.5px #3a0000;text-shadow:0 3px 0 #000,0 0 10px rgba(255,80,40,.6);animation:atDano 1.2s ease-out forwards;letter-spacing:1px}
.at-diag .bt-flut.crit{font-size:46px;color:#ffd23a;-webkit-text-stroke:2px #5a2a00;text-shadow:0 3px 0 #000,0 0 16px rgba(255,200,40,.9)}
.at-diag .bt-flut.cura{color:#6dff7a;-webkit-text-stroke:1.5px #003a0a}
.at-diag .bt-flut.mana{color:#7ab0ff;-webkit-text-stroke:1.5px #001a4a}
.at-diag .bt-flut.erro{font-size:20px;color:#ddd;-webkit-text-stroke:1px #000}
.at-diag .bt-flut.veneno{font-size:26px;color:#d07aff;-webkit-text-stroke:1px #2a003a}
@keyframes atDano{0%{opacity:0;margin-top:10px;transform:translateX(-50%) scale(1.8)}12%{opacity:1;margin-top:-6px;transform:translateX(-50%) scale(1)}70%{opacity:1}100%{opacity:0;margin-top:-58px;transform:translateX(-50%) scale(.95)}}

/* quem mostra número de dano fica por cima das outras unidades */
.at-diag .bt-un:has(.bt-flut){z-index:5}
/* golpe: clarão rápido sobre quem apanha */
.at-diag .bt-un.tremer .bt-bola{filter:brightness(2.2) saturate(.4)}

/* painel de comandos translúcido, deixando o cenário aparecer */
.at-diag .bt-painel{background:rgba(10,10,22,.72);backdrop-filter:blur(4px);border-top:1px solid rgba(255,255,255,.12)}
.at-diag .bt-topo{z-index:2}

@media (max-width:760px){
  .at-banner{font-size:30px}
  .at-diag .bt-un{margin:-52px 0 0 -50px}
  .at-diag .bt-flut{font-size:26px}.at-diag .bt-flut.crit{font-size:34px}
}

/* ===== formação e visual no estilo Magic Campus (classe .at-mc na arena, posições via JS) ===== */
/* aura do cenário (pedido do usuário, 2026-11-05): fundo do mapa DESFOCADO e ESCURECIDO + círculo branco no chão */
.at-diag .at-fundo{filter:blur(4px) brightness(.42) saturate(1.05);transform:scale(1.04);animation:atFundoMC .55s ease-out}
@keyframes atFundoMC{from{filter:blur(0) brightness(1.4);transform:scale(1.1)}to{filter:blur(4px) brightness(.42) saturate(1.05);transform:scale(1.04)}}
.at-diag .at-tinta{opacity:.22}
.at-diag .at-vinheta{background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.8) 100%)}
/* círculo branco "deitado" no chão, sob a formação inteira */
.at-mc .at-circulo{top:58%;width:min(82vw,980px);opacity:.75;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.at-mc .bt-un{display:flex;flex-direction:column;align-items:center;gap:1px;width:auto;min-width:96px;padding:0;background:none!important;border:0;box-shadow:none}
/* nome e barras EM CIMA do personagem, como no Magic Campus */
.at-mc .bt-un .bt-st{order:-4;min-height:14px}
.at-mc .bt-un .bt-nome{order:-3;font-size:12px;white-space:nowrap;color:#9dff8a}
.at-mc .bt-ini .bt-nome{color:#ffd27a}
.at-mc .bt-un .bt-hp{order:-2}
.at-mc .bt-un .bt-mp{order:-1}
.at-mc .bt-un .bt-barra{width:78px;height:7px;border-radius:2px;border:1px solid rgba(0,0,0,.8);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.at-mc .bt-un .bt-barra span{font-size:0}
.at-mc .bt-un:hover .bt-barra span{font-size:9px}
.at-mc .bt-un .bt-bola{margin-top:4px}
/* sprite do jogador: caixa do tamanho do corpo para as barras ficarem acima da cabeça */
.at-mc .bt-bola.spr-bt{width:76px!important;height:120px!important}
.at-mc .bt-bola.spr-bt .spr-bt-cv{bottom:-8px}
/* vez de agir: seta dourada no chão em vez da caixa */
.at-mc .bt-un.vez{background:none!important;outline:0}
.at-mc .bt-un.vez .bt-bola::before{content:'';position:absolute;left:50%;bottom:-10px;width:120%;height:22px;transform:translateX(-50%);border-radius:50%;
  border:2px solid rgba(255,214,90,.95);box-shadow:0 0 10px rgba(255,214,90,.8);animation:atVez 1s ease-in-out infinite}
@keyframes atVez{50%{opacity:.45}}
.at-mc .bt-un.miravel .bt-bola{filter:drop-shadow(0 0 6px #ff5a4a)}
/* avanço do golpe na direção do inimigo (diagonal \) */
.at-mc .bt-un.avD{transform:translate(-64px,-32px)}
.at-mc .bt-un.avE{transform:translate(64px,32px)}
.at-mc .bt-un.miravel{outline:0;background:none!important;cursor:pointer}
.at-mc .bt-un.miravel:hover .bt-bola{filter:drop-shadow(0 0 10px #ffd84a) brightness(1.15)}