/* Aero (dafont) é a fonte dos títulos; as outras ficam de reserva. */
@font-face{
  font-family:'Aero';
  src:url('vendor/Aero.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'Azonix';
  src:url('vendor/Azonix.otf') format('opentype');
  font-display:swap;
}
@font-face{
  font-family:'Michroma';
  src:url('vendor/Michroma.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Orbitron';
  src:url('vendor/Orbitron.woff2') format('woff2');
  font-weight:700 900;
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --titulo:'Aero','Azonix','Michroma','Orbitron',"Segoe UI",system-ui,sans-serif;
  --bg:#070a12; --painel:#0c111c; --painel2:#111827; --linha:#1e2a44;
  --txt:#e8eefc; --dim:#7b8eb4; --cor:#22d3ee;
  --magenta:#e0399e; --ambar:#f5a524; --verde:#36e27a;
}
html,body{
  /* dvh acompanha a barra do navegador no celular; 100% cortaria a tela */
  height:100dvh;min-height:100%;overflow:hidden;
  background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  overscroll-behavior:none;touch-action:none;user-select:none;
  position:fixed;inset:0;width:100%;
}
.oculto{display:none!important}

/* Fundo do controle: o jogo está no projetor, aqui é só a mesa de comando */
body.jogando{
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%,color-mix(in srgb,var(--cor) 14%,transparent),transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 50%,color-mix(in srgb,var(--cor) 14%,transparent),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px),
    var(--bg);
}

/* Vinheta: foca o centro e afunda os cantos */
body::after{
  content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 50%,transparent 38%,rgba(3,6,12,.82) 100%),
    linear-gradient(180deg,rgba(34,211,238,.06),transparent 22%,transparent 78%,rgba(224,57,158,.07));
}

#dano{
  position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 130px 26px rgba(224,57,158,.85);
  transition:opacity .3s;
}
#dano.ativo{opacity:1;transition:opacity .05s}

/* ===================== telas ===================== */
.tela{
  position:fixed;inset:0;z-index:20;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:16px;
  background:
    radial-gradient(ellipse 95% 65% at 50% -12%,rgba(34,211,238,.3),transparent 64%),
    radial-gradient(ellipse 95% 65% at 50% 112%,rgba(224,57,158,.26),transparent 64%),
    var(--bg);
}
.tela.ativa{display:flex;animation:surge .3s ease-out}
@keyframes surge{from{opacity:0}to{opacity:1}}

/* linhas de varredura: dá textura de tela CRT sem custo */
.tela::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}

.caixa{
  position:relative;width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;
}

/* ---------- marca ---------- */
.marca{margin-bottom:4px;animation:baixa .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes baixa{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
h1{
  font-family:var(--titulo);
  font-size:clamp(26px,7.5vw,38px);font-weight:900;letter-spacing:6px;line-height:.95;
  text-shadow:0 0 24px rgba(34,211,238,.45);
}
h1 em{
  display:block;font-style:normal;letter-spacing:9px;
  background:linear-gradient(92deg,var(--cor),#7dd3fc 40%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.risco{
  height:2px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cor),var(--magenta),transparent);
  animation:brilha 2.6s ease-in-out infinite;
}
@keyframes brilha{50%{opacity:.45}}

h2{
  font-family:var(--titulo);
  font-size:clamp(11px,3.2vw,15px);font-weight:800;letter-spacing:6px;
  color:var(--dim);margin-bottom:14px;
  animation:baixa .4s ease-out;
}

input{
  width:100%;padding:14px;font-size:16px;text-align:center;font-weight:700;letter-spacing:2px;
  background:var(--painel);border:2px solid var(--linha);border-radius:12px;color:var(--txt);
  transition:border-color .18s,box-shadow .18s;
}
input::placeholder{letter-spacing:1px;color:#4a5a78}
/* grade de avatares: 8 por linha, cabe em pé e deitado */
#avatares{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:2px 0 10px;width:100%}
#avatares button{line-height:0;padding:3px 0;background:rgba(255,255,255,.05);border:2px solid transparent;border-radius:12px;cursor:pointer;transition:transform .1s,border-color .15s}
#avatares button.sel{border-color:var(--cor);background:color-mix(in srgb,var(--cor) 18%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cor) 45%,transparent);transform:scale(1.12)}
#tela-entrar .caixa{max-height:100dvh;overflow-y:auto}
#tela-entrar h1{font-size:clamp(20px,5vw,28px)}
#tela-entrar .marca{margin-bottom:0}
#tela-entrar input{padding:9px 14px}
#espera-nome{display:block;font-family:var(--titulo);font-size:20px;letter-spacing:2px;color:#fff;margin-bottom:2px}
#espera-avatar{line-height:0;margin-bottom:6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.av-svg{display:inline-block;vertical-align:middle}
#sala{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:900;letter-spacing:12px;font-size:30px;padding:16px;text-transform:uppercase;border-color:rgba(224,57,158,.5)}
#sala-ok{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:900;color:var(--magenta);letter-spacing:4px;font-size:1.3em}
#sala:focus{border-color:var(--magenta);box-shadow:0 0 22px rgba(224,57,158,.3)}
input:focus{outline:none;border-color:var(--cor);box-shadow:0 0 22px rgba(34,211,238,.28)}

button{font-family:inherit;font-weight:800;border:none;border-radius:12px;cursor:pointer;
  transition:transform .09s,box-shadow .18s,filter .18s}
button:active{transform:scale(.955)}

.principal{
  font-family:var(--titulo);
  position:relative;width:100%;padding:15px;font-size:16px;letter-spacing:4px;color:#04080f;
  background:linear-gradient(135deg,#67e8f9,var(--cor) 55%,#0ea5c4);
  box-shadow:0 6px 28px rgba(34,211,238,.36);overflow:hidden;
}
/* reflexo que atravessa o botão */
.principal::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:passa 3.4s ease-in-out infinite;
}
@keyframes passa{0%,62%{left:-60%}100%{left:120%}}

.linha-botoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ico{display:inline-block;vertical-align:-3px;margin-right:4px}
.secundario.sair{border-color:rgba(224,57,158,.45);color:#f4a6d4}
.secundario{padding:10px 18px;font-size:12px;letter-spacing:1px;background:transparent;
  color:var(--dim);border:2px solid var(--linha)}
.secundario:active{border-color:var(--cor);color:var(--cor)}
.dica{font-size:11.5px;color:var(--dim);letter-spacing:2px}

/* ---------- grupos ---------- */
#grupos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:9px;width:100%;max-width:800px;
}
.cartao{
  position:relative;background:linear-gradient(160deg,var(--painel2),var(--painel));
  border:2px solid var(--linha);border-radius:13px;
  padding:11px 11px 11px 15px;text-align:left;overflow:hidden;
  animation:sobe .26s backwards cubic-bezier(.2,.9,.3,1.1);
}
@keyframes sobe{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.cartao:nth-child(1){animation-delay:.01s}
.cartao:nth-child(2){animation-delay:.04s}
.cartao:nth-child(3){animation-delay:.07s}
.cartao:nth-child(4){animation-delay:.1s}
/* faixa de cor da classe */
.cartao::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
/* brilho difuso no canto */
.cartao::after{
  content:"";position:absolute;right:-24px;top:-24px;width:80px;height:80px;border-radius:50%;
  background:currentColor;opacity:.14;filter:blur(18px);
}
.cartao:active{transform:scale(.97);border-color:currentColor}
.cartao.cheio{opacity:.38;filter:grayscale(.6)}
.cartao.cheio:active{transform:none}
.cartao b{font-family:var(--titulo);display:block;font-size:15.5px;font-weight:900;letter-spacing:2.5px;margin-bottom:3px}
.cartao small{display:block;font-size:10.5px;color:var(--dim);line-height:1.4}
.cartao em{display:block;font-size:9.5px;font-style:normal;margin-top:7px;letter-spacing:1.5px;
  opacity:.9;font-weight:800}

.cls-grande{
  font-family:var(--titulo);
  font-size:clamp(24px,7vw,32px);font-weight:900;letter-spacing:5px;
  animation:pulsaLeve 2.4s ease-in-out infinite;
}
@keyframes pulsaLeve{50%{opacity:.72}}

/* ===================== HUD ===================== */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}

#hud-topo{
  position:absolute;top:0;left:0;right:0;padding:6px 14px 0;
  display:flex;align-items:flex-start;justify-content:center;gap:12px;
}

/* ---------- vida ---------- */
#painel-vida{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;max-width:44%}
#vida-barra{
  position:relative;height:9px;border-radius:6px;overflow:hidden;opacity:.85;
  background:rgba(0,0,0,.66);border:1px solid rgba(120,160,220,.28);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6);
}
/* rastro branco que desce depois do dano — mostra quanto você levou */
#vida-dano{
  position:absolute;inset:0;width:100%;border-radius:7px;
  background:rgba(255,255,255,.4);
  transition:width .5s cubic-bezier(.2,.8,.3,1) .12s;
}
#vida-fill{
  position:absolute;inset:0;width:100%;border-radius:7px;
  background:linear-gradient(90deg,var(--cor),#6ff0e0);
  box-shadow:0 0 14px color-mix(in srgb,var(--cor) 60%,transparent);
  transition:width .14s cubic-bezier(.3,.9,.4,1);
}
#vida-num{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:900;letter-spacing:1px;color:#04121a;
  text-shadow:0 1px 1px rgba(255,255,255,.35);
}
#hud-nome{
  font-family:var(--titulo);font-size:10px;font-weight:800;color:var(--dim);
  letter-spacing:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- chips de informação ---------- */
#painel-info{display:flex;gap:7px;align-items:stretch}
.chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:50px;padding:5px 9px;border-radius:10px;
  background:rgba(10,15,26,.78);border:1px solid rgba(120,160,220,.2);
  backdrop-filter:blur(4px);
}
.chip b{
  font-family:var(--titulo);font-size:16px;font-weight:900;line-height:1;color:var(--cor);
  text-shadow:0 0 12px currentColor;
}
.chip span{font-size:7.5px;font-weight:800;letter-spacing:2px;color:var(--dim);
  text-transform:uppercase;margin-top:2px}
.chip.destaque{border-color:rgba(245,165,36,.42);background:rgba(26,18,8,.72)}
.chip.destaque b{color:var(--ambar);font-size:13px}
.chip.destaque span{color:#c99b52;letter-spacing:1px}
/* pisca quando um abate acontece */
.chip.pulsa{animation:chipPulsa .5s ease-out}
@keyframes chipPulsa{
  0%{transform:scale(1)}40%{transform:scale(1.22);border-color:var(--cor)}100%{transform:scale(1)}
}

/* centro do controle: lembra de olhar para o projetor */
#centro{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;opacity:.5;
}
#centro b{
  font-family:var(--titulo);font-size:clamp(18px,5vw,28px);font-weight:900;
  letter-spacing:6px;color:var(--cor);text-shadow:0 0 22px currentColor;
}
#centro span{font-size:9.5px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}

#tempo-barra{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
#tempo-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cor),#fff);
  box-shadow:0 0 10px var(--cor);transition:width 1s linear}
#hud.urgente #tempo-fill{background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
#hud.urgente .chip.destaque{border-color:var(--magenta);animation:chipUrgente .5s ease-in-out infinite alternate}
#hud.urgente .chip.destaque span{color:var(--magenta)}
@keyframes chipUrgente{to{box-shadow:0 0 18px rgba(224,57,158,.7)}}

#pausado{position:fixed;inset:0;z-index:44;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(4,8,16,.82);pointer-events:auto}
#pausado b{font-family:var(--titulo);font-size:clamp(40px,14vw,80px);letter-spacing:10px;color:#fff;text-shadow:0 0 30px var(--cor);
  animation:pulsaLeve 1.4s ease-in-out infinite}
#pausado span{font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
#vai{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:vaiFundo .8s ease-out forwards}
#vai b{font-family:var(--titulo);font-size:clamp(60px,22vw,120px);font-weight:900;letter-spacing:8px;color:#fff;
  text-shadow:0 0 40px var(--cor),0 0 80px var(--cor);animation:vaiTexto .8s cubic-bezier(.1,.9,.2,1) forwards}
@keyframes vaiFundo{0%{background:color-mix(in srgb,var(--cor) 35%,transparent)}30%{background:transparent}100%{background:transparent}}
@keyframes vaiTexto{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.1);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}

#alerta-zona{
  font-family:var(--titulo);
  position:absolute;top:48px;left:50%;transform:translateX(-50%);
  padding:7px 20px;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:2.5px;
  background:linear-gradient(135deg,var(--magenta),#b02a7c);color:#fff;
  box-shadow:0 0 26px rgba(224,57,158,.6);animation:alerta 1s infinite;
}
@keyframes alerta{50%{opacity:.4;transform:translateX(-50%) scale(.97)}}

/* Metade esquerda anda, metade direita atira: o joystick nasce onde o
   dedo encosta (como no Brawl Stars) e volta para casa ao soltar. */
.zona-toque{position:absolute;bottom:0;top:42px;pointer-events:auto}
#stick{left:0;width:50%}
#acoes{right:0;width:50%}

#stick-base,#tiro-base{
  position:absolute;top:50%;translate:0 -50%;
  transition:left .22s cubic-bezier(.2,.8,.3,1),top .22s cubic-bezier(.2,.8,.3,1),translate .22s,opacity .2s;
}
/* mais para o meio da tela: o polegar chega sem esticar */
#stick-base{left:30%}
#tiro-base{right:22%}
.flutuando{transition:none!important}
/* enquanto o dedo está lá, o outro lado apaga um pouco para focar */
.zona-toque.ativa .base-fantasma{opacity:.35}

#stick-base{
  width:min(34vw,142px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cor) 10%,transparent),transparent 68%);
  border:2px solid color-mix(in srgb,var(--cor) 26%,transparent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 26px color-mix(in srgb,var(--cor) 9%,transparent);
}
#stick-nub{
  width:40%;aspect-ratio:1;border-radius:50%;position:absolute;
  background:radial-gradient(circle at 34% 28%,#fff,var(--cor) 55%,color-mix(in srgb,var(--cor) 60%,#000));
  box-shadow:0 0 20px color-mix(in srgb,var(--cor) 60%,transparent),inset 0 -3px 7px rgba(0,0,0,.32);
  transition:transform .045s linear;
}

/* Tiro no estilo Brawl Stars: o botão é um joystick.
   Toque = mira automática no inimigo mais próximo.
   Arrastar = mira manual, com a direção mostrada no chão.
   Soltar de volta no centro = cancela o tiro. */
#tiro-base{
  width:min(25vw,108px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--cor) 10%,transparent),transparent 68%);
  border:2px solid color-mix(in srgb,var(--cor) 30%,transparent);
}
#tiro-nub{
  width:82%;aspect-ratio:1;border-radius:50%;position:absolute;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#04080f;font-size:26px;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.34),transparent 58%),
    linear-gradient(145deg,color-mix(in srgb,var(--cor) 60%,#fff),var(--cor));
  box-shadow:0 0 26px color-mix(in srgb,var(--cor) 50%,transparent),inset 0 -4px 10px rgba(0,0,0,.28);
  transition:transform .05s linear;
}
#tiro-nub span{position:relative;z-index:2}
#tiro-base.mirando #tiro-nub{box-shadow:0 0 34px color-mix(in srgb,var(--cor) 85%,transparent)}
#tiro-base.cancelar #tiro-nub{
  background:linear-gradient(145deg,#94a3b8,#64748b);
  box-shadow:0 0 20px rgba(148,163,184,.5);
}
/* barras de munição em pé, à esquerda do botão de tiro (o super fica em cima) */
#municao{position:absolute;left:-22px;top:50%;translate:0 -50%;display:flex;flex-direction:column-reverse;gap:4px}
#municao i{
  display:block;width:9px;height:20px;border-radius:4px;
  background:linear-gradient(0deg,var(--cor) calc(var(--f,0)*100%),rgba(255,255,255,.12) calc(var(--f,0)*100%));
  box-shadow:0 0 0 1px rgba(0,0,0,.5);transition:background .1s linear;
}
#municao i.cheia{box-shadow:0 0 8px var(--cor)}
#tiro-base.vazio #tiro-nub{filter:grayscale(.7) brightness(.6)}
#carga{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  z-index:1;transition:height .05s linear}

/* super na diagonal, acima e à direita do tiro — como o botão de super do Brawl */
/* Super: anel que enche conforme causa dano; cheio, vira um sol magenta pulsando */
#btn-poder{
  --carga:0;
  position:absolute;right:calc(22% + min(25vw,108px)*0.95);top:calc(50% - min(25vw,108px)*0.95);translate:0 -50%;
  width:min(20vw,90px);aspect-ratio:1;border-radius:50%;overflow:visible;
  background:radial-gradient(circle at 35% 30%,#2a1330,#0c0812 70%);
  border:3px solid rgba(224,57,158,.35);color:#c98ab0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;
  box-shadow:0 0 14px rgba(224,57,158,.15);transition:border-color .2s,color .2s,transform .12s;
}
/* Escudo (abaixo da rajada) e Fast (na diagonal do joystick): mesmos anéis de carga */
.extra{
  --carga:0;position:absolute;width:min(17vw,76px);aspect-ratio:1;border-radius:50%;overflow:visible;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;
  background:radial-gradient(circle at 35% 30%,#12202c,#080c12 70%);border:3px solid rgba(255,255,255,.14);color:#8ea3c8;
  transition:border-color .2s,color .2s,transform .12s;
}
.extra b{position:relative;z-index:2;font-size:9.5px;letter-spacing:1px;line-height:1.15}
.extra b::after{content:"";display:block;font-size:7.5px;letter-spacing:2px;margin-top:2px}
.extra::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:0;
  background:conic-gradient(var(--c,#38bdf8) calc(var(--carga)*360deg),rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);transition:background .15s linear}
#btn-escudo{--c:#38bdf8;right:calc(22% + min(25vw,108px)*0.95 + min(20vw,90px)*0.5 - min(17vw,76px)*0.5);top:calc(50% + min(25vw,108px)*0.95);translate:0 -50%}
#btn-fast{--c:#facc15;left:calc(30% + min(34vw,142px)*0.5 - min(17vw,76px)*0.5 + min(34vw,142px)*0.55);top:calc(50% - min(34vw,142px)*0.8);translate:0 -50%;pointer-events:auto}
.extra.pronto{border-color:#fff;color:#fff;transform:scale(1.08);animation:extraPulsa 1s ease-in-out infinite}
#btn-escudo.pronto{background:radial-gradient(circle at 35% 30%,#bfefff,#38bdf8 55%,#0c4a6e)}
#btn-fast.pronto{background:radial-gradient(circle at 35% 30%,#fff3b0,#facc15 55%,#854d0e);color:#1a1200}
.extra.pronto::before{background:conic-gradient(#fff 360deg,#fff 0);animation:anelGira 1.2s linear infinite}
.extra.pronto b::after{content:"PRONTO"}
@keyframes extraPulsa{0%,100%{box-shadow:0 0 14px var(--c),0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}50%{box-shadow:0 0 30px var(--c),0 0 0 14px transparent}}
/* usando: estouro em anel e brilho */
.extra.ativo{border-color:var(--c);color:#fff;box-shadow:0 0 34px var(--c);animation:none}
.extra.ativo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--c);animation:estouro .6s ease-out forwards}
@keyframes estouro{to{inset:-40px;opacity:0}}
#btn-escudo.ativo b::after{content:"ATIVO"}
#btn-fast.ativo b::after{content:"CORRENDO"}
/* anel de carga */
#btn-poder::before{
  content:"";position:absolute;inset:-7px;border-radius:50%;z-index:0;
  background:conic-gradient(var(--magenta) calc(var(--carga)*360deg),rgba(255,255,255,.08) 0);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);
  transition:background .15s linear;
}
#btn-poder b{position:relative;z-index:2;font-size:10.5px;letter-spacing:1px;line-height:1.15;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .04s linear}
#btn-poder.mirando{border-color:#fff;box-shadow:0 0 30px rgba(224,57,158,.7)}
#btn-poder b::after{content:"";display:block;font-size:8px;letter-spacing:2px;color:var(--ambar);margin-top:2px}
#poder-cd{display:none}
/* CHEIO: explode em cor, cresce e pulsa até ser usado */
#btn-poder.pronto{
  border-color:#fff;color:#fff;transform:scale(1.08);
  background:radial-gradient(circle at 35% 30%,#ff7ad1,var(--magenta) 55%,#7a1350);
  animation:prontoPulsa .9s ease-in-out infinite;
}
#btn-poder.pronto::before{background:conic-gradient(#fff 360deg,#fff 0);animation:anelGira 1.2s linear infinite}
#btn-poder.pronto b::after{content:"PRONTO!"}
@keyframes prontoPulsa{
  0%,100%{box-shadow:0 0 22px rgba(224,57,158,.7),0 0 0 0 rgba(224,57,158,.55)}
  50%{box-shadow:0 0 44px rgba(224,57,158,1),0 0 0 16px rgba(224,57,158,0)}
}
@keyframes anelGira{to{transform:rotate(360deg)}}

/* Faixa em vez de cortina: o eliminado continua assistindo a partida. */
#morto{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:15;pointer-events:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 34px;border-radius:16px;
  background:linear-gradient(180deg,rgba(8,11,20,.9),rgba(8,11,20,.62));
  border:2px solid rgba(224,57,158,.45);
  box-shadow:0 0 40px rgba(224,57,158,.28);
  animation:surge .35s ease-out;
}
#morto b{
  font-family:var(--titulo);
  font-size:clamp(20px,5.5vw,28px);font-weight:900;letter-spacing:6px;color:var(--magenta);
  text-shadow:0 0 24px rgba(224,57,158,.7);
}
#morto span{font-size:11px;color:var(--dim);letter-spacing:2px}

/* some sozinha depois de alguns segundos, liberando a visão */
#morto.discreto{
  top:16%;padding:8px 20px;opacity:.72;
  transition:top .6s cubic-bezier(.3,.9,.4,1),padding .6s,opacity .6s;
}
#morto.discreto b{font-size:14px;letter-spacing:3px}
#morto.discreto span{font-size:9.5px}

/* ---------- contagem regressiva ---------- */
#contagem{
  position:fixed;inset:0;z-index:42;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:radial-gradient(ellipse at 50% 50%,rgba(4,8,16,.5),rgba(4,8,16,.2) 60%,transparent);
}
#contagem b{
  font-family:var(--titulo);
  font-size:clamp(64px,20vw,120px);font-weight:900;line-height:1;color:var(--cor);
  text-shadow:0 0 50px currentColor,0 4px 20px rgba(0,0,0,.9);
  animation:tique 1s cubic-bezier(.2,.9,.3,1) infinite;
}
#contagem span{
  font-family:var(--titulo);
  font-size:clamp(11px,3vw,15px);letter-spacing:6px;color:#cfe0ff;font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.95);
}
@keyframes tique{
  0%{transform:scale(1.5);opacity:0}
  22%{transform:scale(1);opacity:1}
  100%{transform:scale(.96);opacity:.85}
}

/* ---------- anúncio de onda ---------- */
#anuncio{
  position:fixed;left:0;right:0;top:38%;z-index:40;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  animation:anuncioEntra 2.4s cubic-bezier(.15,.85,.25,1) forwards;
}
#anuncio b{
  font-family:var(--titulo);
  font-size:clamp(30px,9vw,52px);font-weight:900;letter-spacing:9px;
  color:var(--cor);text-shadow:0 0 34px currentColor,0 3px 14px rgba(0,0,0,.9);
}
#anuncio span{
  font-size:clamp(11px,3vw,15px);font-weight:800;letter-spacing:5px;color:#dbe6ff;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
/* faixas que cortam a tela atrás do texto */
#anuncio::before,#anuncio::after{
  content:"";position:absolute;left:-10%;right:-10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cor),transparent);
  animation:faixaAbre .6s ease-out;
}
#anuncio::before{top:-14px}
#anuncio::after{bottom:-14px}
@keyframes faixaAbre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes anuncioEntra{
  0%{opacity:0;transform:translateY(26px) scale(.82)}
  14%{opacity:1;transform:translateY(0) scale(1)}
  74%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-16px) scale(1.06)}
}

#aviso{
  position:fixed;left:50%;top:11px;transform:translateX(-50%);z-index:60;
  background:linear-gradient(135deg,var(--magenta),#b02a7c);color:#fff;
  padding:8px 16px;border-radius:8px;font-size:11.5px;font-weight:800;letter-spacing:1.5px;
  box-shadow:0 4px 20px rgba(224,57,158,.45);
}

#girar{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:10px;
  background:var(--bg);text-align:center;
  font-size:17px;font-weight:900;letter-spacing:5px;color:var(--cor);
}
#girar small{font-size:10.5px;letter-spacing:3px;color:var(--dim);font-weight:700}
@media (orientation:portrait) and (max-width:860px){
  body.jogando #girar{display:flex}
}