@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}
:root{
  --titulo:'Aero','Azonix','Michroma','Orbitron',"Segoe UI",system-ui,sans-serif;
  --bg:#070a12; --painel:#0c111c; --painel2:#111827; --linha:#1e2a44;
  --txt:#eaf0ff; --dim:#8ea3c8; --cor:#22d3ee;
  --magenta:#e0399e; --ambar:#f5a524; --verde:#36e27a;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
#lobby .jogador{cursor:grab}

/* ---------- barra de controle (mouse) ---------- */
#barra{position:fixed;right:14px;bottom:14px;z-index:14;display:flex;gap:6px;opacity:.55;transition:opacity .2s}
#barra:hover{opacity:1}
.ico{display:inline-block;vertical-align:middle;flex:none}
.grande .ico{vertical-align:-5px;margin-right:6px}
.dica .ico{vertical-align:-2px}
#barra button{
  height:38px;min-width:38px;padding:0 10px;border-radius:19px;border:1px solid var(--linha);cursor:pointer;
  background:rgba(12,17,28,.9);color:var(--txt);font-size:16px;display:flex;align-items:center;gap:8px;
  transition:border-color .15s,box-shadow .15s,transform .1s;
}
/* seletores de nível dos bots e de velocidade */
.seletor{display:flex;gap:2px;padding:3px;border-radius:19px;border:1px solid var(--linha);background:rgba(12,17,28,.9)}
.seletor button{height:30px!important;min-width:0!important;padding:0 10px!important;border:none!important;border-radius:15px!important;background:transparent!important;
  font-family:var(--titulo);font-size:11px!important;letter-spacing:1px;color:var(--dim);box-shadow:none!important}
.seletor button.ativo,#barra .seletor button.ativo{background:var(--cor)!important;color:#04080f!important;font-weight:900}
#mp-nivel-linha small{font-family:var(--titulo);letter-spacing:3px;font-size:11px;color:var(--dim)}
#mp-nivel-linha .seletor{flex:1;justify-content:center}
#barra button:hover{border-color:var(--cor);box-shadow:0 0 14px rgba(34,211,238,.4)}
#barra button:active{transform:scale(.95)}
#barra button span{font-family:var(--titulo);font-size:11px;letter-spacing:3px;color:var(--cor)}
#barra button span:empty{display:none}
#barra button.ativo{border-color:var(--cor);color:var(--cor)}
#b-avancar.destaque{border-color:var(--cor);background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(12,17,28,.95));box-shadow:0 0 18px rgba(34,211,238,.45)}
.oculto{display:none!important}

#cena{position:fixed;inset:0;width:100%;height:100%;display:block}

/* vinheta */
body::after{
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 74% 68% at 50% 50%,transparent 42%,rgba(3,6,12,.7) 100%);
}

#nomes{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
#danos{position:fixed;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.dano{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--titulo);font-size:clamp(16px,1.7vw,28px);font-weight:900;
  text-shadow:0 2px 6px #000,0 0 12px rgba(0,0,0,.9);
  animation:danoSobe .8s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes danoSobe{
  0%{transform:translate(-50%,-50%) scale(.6);opacity:0}
  15%{transform:translate(-50%,-70%) scale(1.25);opacity:1}
  100%{transform:translate(-50%,-160%) scale(1);opacity:0}
}
.tag{position:absolute;left:0;top:0;text-align:center;white-space:nowrap;will-change:transform}
.tag b{display:block;font-size:16px;font-weight:800;letter-spacing:.5px;
  text-shadow:0 2px 6px #000,0 0 12px rgba(0,0,0,.95)}
.av-svg{vertical-align:middle;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.tag b .av-svg{vertical-align:-5px;margin-right:3px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.aviso .av-svg{vertical-align:-5px}
#inter-avatar:empty{display:none}
#inter-avatar{position:relative;animation:chega .5s cubic-bezier(.2,.9,.3,1.3)}
.tag s{display:flex;gap:3px;width:84px;margin:3px auto 0;text-decoration:none}
.tag s u{flex:1;height:3px;border-radius:2px;text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.5);
  background:linear-gradient(90deg,#ffd166 calc(var(--f,0)*100%),rgba(255,255,255,.16) 0)}
.tag.super s u{background:linear-gradient(90deg,#e0399e calc(var(--f,0)*100%),rgba(255,255,255,.16) 0);box-shadow:0 0 6px #e0399e}
.tag.super b{text-shadow:0 0 12px #e0399e,0 2px 6px #000}
.tag i{display:block;width:84px;height:7px;margin:3px auto 0;
  background:rgba(0,0,0,.72);border-radius:3px;overflow:hidden}
.tag i em{display:block;height:100%;background:var(--verde);transition:width .35s cubic-bezier(.2,.8,.3,1)}
.tag.cura i em{background:linear-gradient(90deg,var(--verde),#bef264);box-shadow:0 0 10px var(--verde)}
.tag.dano i em{background:#ff2d55;transition:width .08s}
.tag.dano b{color:#fff!important;text-shadow:0 0 10px #ff2d55,0 2px 6px #000}

.painel{
  position:fixed;inset:0;z-index:10;display:flex;
  align-items:center;justify-content:center;gap:6vw;
  background:
    radial-gradient(ellipse 70% 55% at 22% 30%,rgba(34,211,238,.13),transparent 62%),
    radial-gradient(ellipse 70% 55% at 78% 72%,rgba(224,57,158,.13),transparent 62%),
    radial-gradient(ellipse at 50% 45%,#0c1424 0%,#04070d 100%);
}
.painel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}

/* ---------- lobby ---------- */
.lobby-esq{text-align:center;position:relative}
h1{font-family:var(--titulo);font-size:clamp(42px,6vw,86px);font-weight:900;letter-spacing:8px;line-height:1;
  text-shadow:0 0 40px rgba(34,211,238,.4)}
h1 span{
  background:linear-gradient(92deg,var(--cor),#7dd3fc 42%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{font-family:var(--titulo);font-size:clamp(14px,1.4vw,20px);color:var(--dim);letter-spacing:8px;
  margin:14px 0 20px;text-transform:uppercase}
.lobby-esq{max-width:46vw}
/* código da sala: o que a turma digita no celular */
.sala{display:inline-flex;align-items:baseline;gap:14px;margin-bottom:18px;padding:10px 26px;border-radius:14px;
  background:rgba(4,8,16,.7);border:2px solid var(--magenta);box-shadow:0 0 34px rgba(224,57,158,.3)}
.sala span{font-family:var(--titulo);font-size:clamp(11px,1.1vw,16px);letter-spacing:6px;color:var(--dim);text-transform:uppercase}
.sala b{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:clamp(34px,4.2vw,64px);font-weight:900;letter-spacing:10px;color:#fff;
  text-shadow:0 0 30px rgba(224,57,158,.8)}

/* cartão de entrada: QR de um lado, passos numerados do outro */
.entrada{
  display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);text-align:left;
  padding:clamp(16px,1.8vw,28px);border-radius:22px;
  background:rgba(12,17,28,.8);border:2px solid var(--linha);
  box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 40px rgba(34,211,238,.05);
}
#qr{background:#fff;padding:12px;border-radius:14px;line-height:0;flex:none;
  box-shadow:0 0 46px rgba(255,255,255,.16)}
#qr img,#qr canvas{display:block;width:clamp(170px,15vw,260px);height:auto;image-rendering:pixelated}
.passos{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
.passo{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.25vw,19px);color:#dbe6ff;letter-spacing:.5px;line-height:1.25}
.passo small{color:var(--dim);font-size:.8em;letter-spacing:1px}
.passo i{
  font-family:var(--titulo);font-style:normal;flex:none;width:1.9em;height:1.9em;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:900;
  color:#04080f;background:linear-gradient(135deg,#67e8f9,var(--cor));box-shadow:0 0 16px rgba(34,211,238,.45);
}
#url{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(18px,2vw,30px);font-weight:900;letter-spacing:1px;
  color:var(--cor);background:rgba(4,8,16,.7);
  border:2px solid var(--cor);border-radius:12px;
  padding:9px 18px;display:inline-block;align-self:flex-start;margin:0 0 4px 2.6em;
  box-shadow:0 0 26px rgba(34,211,238,.25),inset 0 0 20px rgba(34,211,238,.08);
  animation:respira 3s ease-in-out infinite;
}
@keyframes respira{50%{box-shadow:0 0 44px rgba(34,211,238,.42),inset 0 0 20px rgba(34,211,238,.14)}}
.dica{margin-top:16px;font-size:clamp(12px,1.2vw,17px);color:var(--dim);letter-spacing:3px}

.lobby-dir{display:flex;flex-direction:column;align-items:center;max-width:50vw}
.contagem{text-align:center;margin-bottom:18px}
.contagem b{font-family:var(--titulo);display:block;font-size:clamp(48px,6.5vw,92px);font-weight:900;line-height:1;
  color:var(--cor);text-shadow:0 0 38px rgba(34,211,238,.5)}
/* botão grande de começar, dentro do lobby */
.grande{
  font-family:var(--titulo);margin-top:18px;padding:18px 46px;border-radius:16px;border:2px solid var(--linha);cursor:pointer;
  font-size:clamp(16px,1.8vw,26px);letter-spacing:6px;font-weight:900;color:var(--dim);background:rgba(9,13,22,.8);
  transition:transform .12s,box-shadow .25s,color .25s,border-color .25s;
}
.grande.pronto{
  color:#04080f;border-color:var(--cor);
  background:linear-gradient(135deg,#67e8f9,var(--cor) 55%,#0ea5c4);
  box-shadow:0 8px 34px rgba(34,211,238,.45);animation:comecarPulsa 1.6s ease-in-out infinite;
}
.grande.pronto:hover{transform:translateY(-2px) scale(1.03)}
.grande.pronto:active{transform:scale(.98)}
@keyframes comecarPulsa{50%{box-shadow:0 8px 52px rgba(34,211,238,.75)}}
.contagem span{font-size:clamp(12px,1.3vw,18px);letter-spacing:7px;color:var(--dim);text-transform:uppercase}

#lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;max-height:56vh;overflow:hidden}
.grupo{
  position:relative;display:flex;flex-direction:column;gap:6px;align-items:stretch;
  padding:12px 10px 10px;border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 14%,#0c111c),rgba(12,17,28,.85) 40%);
  border:2px solid color-mix(in srgb,var(--g) 50%,transparent);
  box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 0 30px color-mix(in srgb,var(--g) 8%,transparent);
  transition:box-shadow .2s;
}
.grupo:hover{box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 24px color-mix(in srgb,var(--g) 35%,transparent)}
/* barra de lotação embaixo do título */
.barra-lot{display:block;height:4px;border-radius:2px;margin:-2px 0 4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.barra-lot::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--f,0)*100%);background:var(--g);box-shadow:0 0 10px var(--g);transition:width .3s}
.grupo h3{
  font-family:var(--titulo);display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:clamp(10px,.95vw,15px);letter-spacing:1px;color:var(--g);margin-bottom:4px;white-space:nowrap;
  text-shadow:0 0 16px color-mix(in srgb,var(--g) 60%,transparent);
}
.grupo h3 small{font-size:.85em;color:var(--dim);letter-spacing:1px}
.grupo.ruim{border-color:rgba(245,165,36,.7);box-shadow:inset 0 0 30px rgba(245,165,36,.12)}
.grupo.ruim h3 small{color:var(--ambar)}
.grupo.alvo{background:rgba(34,211,238,.12);border-style:dashed}
.jogador{position:relative;padding-right:28px;display:flex;align-items:center;gap:8px}
.jogador .av{flex:none;font-style:normal;line-height:0}
.jogador span{overflow:hidden;text-overflow:ellipsis}
.jogador em{font-family:"Segoe UI",system-ui,sans-serif;font-style:normal;font-size:.7em;letter-spacing:1px;color:var(--dim);font-weight:600}
.jogador.bot{opacity:.75}
.jogador.bot .av{filter:grayscale(.6);opacity:.8}
.jogador .kick{
  position:absolute;right:6px;top:50%;translate:0 -50%;width:18px;height:18px;border-radius:50%;
  font-style:normal;font-size:14px;line-height:18px;text-align:center;color:var(--dim);background:rgba(255,255,255,.06);
  opacity:0;transition:opacity .15s,background .15s;cursor:pointer;
}
.jogador:hover .kick{opacity:1}
.jogador .kick:hover{background:var(--magenta);color:#fff}
.jogador.arrastando{opacity:.3}
.jogador:hover{border-color:var(--g)}
.dica.alerta{color:var(--ambar);letter-spacing:1px;margin-top:8px}
.jogador{
  font-family:var(--titulo);
  padding:7px 12px;border-radius:9px;background:var(--painel2);
  border:2px solid var(--linha);font-size:clamp(12px,1.1vw,17px);font-weight:800;
  color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:entra .38s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes entra{from{transform:scale(.4) translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ---------- hud ---------- */
#hud{
  --g:var(--cor);
  position:fixed;top:0;left:0;right:0;z-index:8;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:14px 30px 18px;background:linear-gradient(180deg,rgba(4,7,14,.94),rgba(4,7,14,.5) 70%,transparent);
}
.hud-item{line-height:1.05}
.hud-item b{font-family:var(--titulo);display:block;font-size:clamp(24px,3vw,46px);font-weight:900}
.hud-item span{display:block;font-size:clamp(10px,.95vw,13px);letter-spacing:5px;color:var(--dim);text-transform:uppercase;margin-top:4px}
.hud-fase{justify-self:start;padding-left:18px;border-left:5px solid var(--g)}
#fase-label{color:var(--g);letter-spacing:4px;text-shadow:0 0 26px color-mix(in srgb,var(--g) 60%,transparent)}
#onda-label{color:#dbe6ff;letter-spacing:4px}
.hud-tempo{justify-self:center;text-align:center;min-width:clamp(180px,16vw,300px)}
#tempo{color:#fff;font-size:clamp(34px,4.2vw,64px);letter-spacing:2px;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(255,255,255,.35)}
#tempo-barra{height:6px;margin-top:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
#tempo-fill{display:block;height:100%;width:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--g),#fff);box-shadow:0 0 14px var(--g);transition:width 1s linear}
#hud.urgente #tempo{color:var(--magenta);animation:urgente .5s ease-in-out infinite alternate}
#hud.urgente #tempo-fill{background:var(--magenta);box-shadow:0 0 16px var(--magenta)}
@keyframes urgente{from{transform:scale(1);text-shadow:0 0 20px rgba(224,57,158,.5)}to{transform:scale(1.08);text-shadow:0 0 44px rgba(224,57,158,.9)}}
.hud-vivos{justify-self:end;text-align:right;padding-right:18px;border-right:5px solid var(--verde)}
#vivos{color:var(--verde);font-style:normal;text-shadow:0 0 24px rgba(54,226,122,.5)}
#alvo{font-size:.5em;color:var(--dim);margin-left:4px;letter-spacing:1px}

/* ---------- VAI! ---------- */
#vai{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:vaiFundo .9s ease-out forwards}
#vai b{font-family:var(--titulo);font-size:clamp(120px,22vw,300px);font-weight:900;letter-spacing:14px;color:#fff;
  text-shadow:0 0 60px var(--cor),0 0 120px var(--cor),0 8px 30px rgba(0,0,0,.9);animation:vaiTexto .9s cubic-bezier(.1,.9,.2,1) forwards}
@keyframes vaiFundo{0%{background:rgba(34,211,238,.35)}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}}

/* ---------- roleta de mapa ---------- */
#roleta{flex-direction:column;gap:18px;background:radial-gradient(ellipse at 50% 40%,#0c1424 0%,#04070d 100%)}
/* quem vai batalhar */
#vs{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;margin-bottom:6px}
#vs:empty{display:none}
#vs small{font-family:var(--titulo);font-size:clamp(12px,1.3vw,20px);letter-spacing:9px;color:var(--dim)}
.vs-fila{display:flex;gap:clamp(8px,1.2vw,20px);align-items:center;justify-content:center;flex-wrap:wrap;max-width:94vw}
.vs-carta{width:clamp(110px,11vw,180px);padding:12px 8px 10px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 22%,#0c111c),#0a0e18);border:2px solid color-mix(in srgb,var(--g) 60%,transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px color-mix(in srgb,var(--g) 25%,transparent);animation:vsEntra .5s cubic-bezier(.2,.9,.3,1.3) backwards}
.vs-carta i{font-style:normal;line-height:0}
.vs-carta i .av-svg{width:clamp(44px,5vw,84px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.vs-carta b{font-family:var(--titulo);font-size:clamp(12px,1.2vw,18px);letter-spacing:1px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-carta small{font-size:clamp(10px,.9vw,13px);color:var(--g);letter-spacing:1px}
.vs-x{font-family:var(--titulo);font-size:clamp(18px,2.4vw,40px);font-weight:900;color:#fff;text-shadow:0 0 18px #e0399e}
@keyframes vsEntra{from{transform:translateY(30px) scale(.8);opacity:0}}
#roleta::before{opacity:0}
#roleta small{font-family:var(--titulo);font-size:clamp(14px,1.6vw,24px);letter-spacing:9px;color:var(--dim)}
#roleta-janela{position:relative;width:min(92vw,1500px);height:clamp(150px,22vh,260px);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
#roleta-faixa{position:absolute;left:50%;top:0;height:100%;display:flex;gap:18px;margin-left:calc(-1 * clamp(200px,20vw,320px) / 2);will-change:transform}
.carta{
  flex:none;width:clamp(200px,20vw,320px);height:100%;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--a) 35%,#0c111c),color-mix(in srgb,var(--b) 25%,#0c111c));
  border:3px solid var(--a);box-shadow:0 0 30px color-mix(in srgb,var(--a) 40%,transparent),inset 0 0 40px color-mix(in srgb,var(--a) 12%,transparent);
}
.carta i{font-style:normal;font-size:clamp(40px,5vw,72px);filter:drop-shadow(0 0 14px var(--a))}
.carta{position:relative;overflow:hidden;justify-content:flex-end;padding-bottom:12px}
.carta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.carta::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(4,7,14,.85) 100%)}
.carta b{position:relative;z-index:2}
.carta i{position:relative;z-index:2;margin:auto 0}
.carta b{font-family:var(--titulo);font-size:clamp(14px,1.5vw,22px);letter-spacing:3px;color:#fff;text-shadow:0 0 16px var(--a)}
#roleta-janela .mira{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 18px #fff;opacity:.9}
#roleta.final .mira{display:none}
#roleta.final .carta{animation:cartaGanha .8s ease-out;border-color:#fff;box-shadow:0 0 50px var(--a)}
#roleta-nome{font-family:var(--titulo);font-size:clamp(34px,5vw,80px);letter-spacing:8px;color:#fff;min-height:1.2em;
  text-shadow:0 0 40px rgba(255,255,255,.6);opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.4)}
#roleta.parou #roleta-nome{opacity:1;transform:scale(1)}
#roleta.parou .carta.ganhou{animation:cartaGanha .6s ease-out;border-color:#fff;box-shadow:0 0 40px var(--a)}
@keyframes cartaGanha{50%{transform:scale(1.08)}}

/* ranking de abates no intervalo */
#inter-ranking{display:flex;gap:clamp(10px,1.6vw,28px);justify-content:center;flex-wrap:wrap;position:relative}
#inter-ranking:empty{display:none}
#inter-ranking span{font-family:var(--titulo);font-size:clamp(13px,1.3vw,20px);letter-spacing:2px;color:#fff;padding:8px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--linha)}
#inter-ranking span b{font-family:var(--titulo);font-size:1.15em;letter-spacing:1px;color:#fbbf24;margin-left:6px}
#inter-ranking .av-svg{vertical-align:-6px}

.dica kbd{font-family:var(--titulo);font-size:.85em;letter-spacing:3px;padding:3px 10px;border-radius:8px;border:1px solid var(--linha);background:rgba(255,255,255,.06);color:#fff;margin-right:4px}

/* ---------- contagem regressiva ---------- */
#contagem{
  flex-direction:column;gap:6px;
  background:radial-gradient(ellipse at 50% 50%,rgba(4,8,16,.45),rgba(4,8,16,.15) 60%,transparent);
}
#contagem::before{opacity:0}
#contagem b{
  font-family:var(--titulo);
  font-size:clamp(110px,20vw,260px);font-weight:900;line-height:1;color:var(--cor);
  text-shadow:0 0 80px currentColor,0 6px 30px rgba(0,0,0,.95);
  animation:tiqueHost 1s cubic-bezier(.2,.9,.3,1) infinite;
}
#contagem span{
  font-family:var(--titulo);
  font-size:clamp(16px,2vw,28px);letter-spacing:12px;color:#cfe0ff;font-weight:800;
  text-shadow:0 3px 18px rgba(0,0,0,.95);
}
@keyframes tiqueHost{
  0%{transform:scale(1.45);opacity:0}
  20%{transform:scale(1);opacity:1}
  100%{transform:scale(.95);opacity:.85}
}

/* ---------- intervalo ---------- */
#intervalo{flex-direction:column;gap:12px;background:rgba(4,7,14,.5)}
#intervalo::before{opacity:0}
#inter-fase{font-family:var(--titulo);font-size:clamp(14px,1.6vw,24px);letter-spacing:8px;color:var(--dim);
  text-shadow:0 2px 12px rgba(0,0,0,.95)}
#inter-dica{animation:pulsaDica 1.6s ease-in-out infinite}
#inter-tag{
  font-family:var(--titulo);font-size:clamp(12px,1.3vw,20px);letter-spacing:6px;color:#04080f;
  padding:8px 22px;border-radius:8px;background:linear-gradient(135deg,#fff,var(--g,var(--cor)));
  box-shadow:0 0 34px color-mix(in srgb,var(--g,var(--cor)) 60%,transparent);
  animation:tagEntra .6s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:.25s;
}
@keyframes tagEntra{from{transform:scale(.4) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
#intervalo>b{transition:color .3s}
#intervalo.vencedor>b{font-size:clamp(56px,8vw,130px);text-shadow:0 0 60px color-mix(in srgb,var(--g,var(--cor)) 70%,transparent),0 4px 26px rgba(0,0,0,.95)}
@keyframes pulsaDica{50%{opacity:.4}}
#intervalo>b{font-family:var(--titulo);font-size:clamp(36px,5.5vw,80px);font-weight:900;letter-spacing:6px;color:var(--cor);
  text-shadow:0 3px 22px rgba(0,0,0,.95),0 0 44px rgba(34,211,238,.45)}
#intervalo p{font-size:clamp(17px,1.9vw,28px);color:#cbd8ef;letter-spacing:3px;
  text-shadow:0 2px 14px rgba(0,0,0,.95)}
#inter-contagem{
  font-family:var(--titulo);
  font-size:clamp(58px,8.5vw,124px);font-weight:900;line-height:1;
  text-shadow:0 3px 22px rgba(0,0,0,.95);animation:conta 1s ease-out infinite;
}
@keyframes conta{from{transform:scale(1.16);opacity:.65}to{transform:scale(1);opacity:1}}

/* ---------- pódio ---------- */
#podio{flex-direction:column;gap:24px;overflow:hidden}
.raios{
  position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0 12deg,rgba(251,191,36,.07) 12deg 20deg,transparent 20deg 42deg,rgba(34,211,238,.06) 42deg 50deg,
    transparent 50deg 72deg,rgba(251,191,36,.07) 72deg 80deg,transparent 80deg 102deg,rgba(224,57,158,.06) 102deg 110deg,transparent 110deg 132deg,
    rgba(251,191,36,.07) 132deg 140deg,transparent 140deg 162deg,rgba(34,211,238,.06) 162deg 170deg,transparent 170deg 192deg,
    rgba(251,191,36,.07) 192deg 200deg,transparent 200deg 222deg,rgba(224,57,158,.06) 222deg 230deg,transparent 230deg 252deg,
    rgba(251,191,36,.07) 252deg 260deg,transparent 260deg 282deg,rgba(34,211,238,.06) 282deg 290deg,transparent 290deg 312deg,
    rgba(251,191,36,.07) 312deg 320deg,transparent 320deg 342deg,rgba(224,57,158,.06) 342deg 350deg,transparent 350deg);
  animation:gira 40s linear infinite;pointer-events:none;
}
@keyframes gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
#podio h2,#podio-lista,#podio .dica,#podio-contagem{position:relative}
.pos.escondido{visibility:hidden;animation:none}
/* a revelação já é sequencial: cada carta entra na hora em que aparece */
.pos.p1,.pos.p2,.pos.p3,.pos.p4{animation-delay:0s}
#podio-contagem{display:flex;flex-direction:column;align-items:center;gap:4px}
#podio-contagem b{font-family:var(--titulo);font-size:clamp(70px,10vw,150px);font-weight:900;line-height:1;color:#fbbf24;
  text-shadow:0 0 60px rgba(251,191,36,.7);animation:tiqueHost 1s cubic-bezier(.2,.9,.3,1) infinite}
#podio-contagem span{font-family:var(--titulo);font-size:clamp(12px,1.4vw,20px);letter-spacing:8px;color:var(--dim)}
h2{font-family:var(--titulo);font-size:clamp(32px,4.6vw,70px);font-weight:900;letter-spacing:12px;color:var(--cor);
  text-shadow:0 0 44px rgba(34,211,238,.45)}
#podio-abertura{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
#podio-abertura small{font-family:var(--titulo);letter-spacing:10px;color:var(--dim);font-size:clamp(14px,1.6vw,24px)}
#podio-palco{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
#podio-lista{display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,2vw,36px);flex-wrap:wrap;width:100%}
.pos{display:flex;flex-direction:column;align-items:center;gap:6px;width:clamp(170px,17vw,280px);animation:chega .6s cubic-bezier(.2,.9,.3,1.3) backwards}
@keyframes chega{from{transform:translateY(40px) scale(.85);opacity:0}to{transform:none;opacity:1}}
.pos .av{line-height:0}
.pos .av .av-svg{width:clamp(56px,7vw,120px);height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.pos .med{margin-top:-6px}
/* medalhas desenhadas: disco com o número, fita atrás */
.med{display:inline-flex;align-items:center;justify-content:center;font-family:var(--titulo);font-style:normal;font-weight:900;color:#04080f;
  width:1.5em;height:1.5em;border-radius:50%;font-size:clamp(14px,1.4vw,22px);position:relative;vertical-align:middle;
  background:radial-gradient(circle at 35% 30%,#fff8 0,transparent 45%),var(--mc,#cbd5e1);box-shadow:0 0 0 2px #04080f,0 0 0 4px var(--mc,#cbd5e1),0 4px 12px rgba(0,0,0,.5)}
.med::before{content:"";position:absolute;left:50%;top:-.9em;width:.6em;height:1em;transform:translateX(-50%);z-index:-1;
  background:linear-gradient(90deg,#e0399e 50%,#22d3ee 50%);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
.med.m1{--mc:#fbbf24}.med.m2{--mc:#cbd5e1}.med.m3{--mc:#d97706}.med.m4{--mc:#4a5a78;color:#dfe7ff}
.pos .med{font-size:clamp(22px,2.6vw,40px)}
.pos .med::before{top:-1em}
.pos b{font-family:var(--titulo);font-size:clamp(18px,2vw,34px);font-weight:900;text-align:center;color:var(--c,#fff);text-shadow:0 0 18px var(--c,#fff);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos small{font-size:clamp(11px,1.1vw,16px);color:var(--dim);letter-spacing:1px}
.pos .base{width:100%;height:var(--h);border-radius:12px 12px 0 0;margin-top:10px;
  background:linear-gradient(180deg,var(--m) 0%,color-mix(in srgb,var(--m) 45%,#0c111c) 55%,color-mix(in srgb,var(--m) 22%,#0c111c));
  border:2px solid var(--m);box-shadow:0 -10px 40px color-mix(in srgb,var(--m) 35%,transparent);
  display:flex;align-items:flex-start;justify-content:center;font-family:var(--titulo);font-size:clamp(22px,3vw,48px);font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.5);padding-top:8px}
.pos.p1{--m:#fbbf24;--h:clamp(120px,16vh,220px);order:2}
.pos.p2{--m:#cbd5e1;--h:clamp(80px,11vh,150px);order:1}
.pos.p3{--m:#d97706;--h:clamp(56px,8vh,110px);order:3}
.pos.p4{--m:#4a5a78;--h:36px;order:4;width:clamp(140px,13vw,200px);opacity:.85}
.pos.p1 .av{animation:pula 1.4s ease-in-out infinite}
@keyframes pula{50%{transform:translateY(-10px) scale(1.08)}}
.pos.escondido{visibility:hidden;animation:none}
.confete{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:cai linear forwards;pointer-events:none;z-index:3}
@keyframes cai{to{transform:translateY(110vh) rotate(720deg);opacity:.5}}

/* ---------- avisos ---------- */
#avisos{position:fixed;right:20px;bottom:52px;z-index:9;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.aviso{
  padding:9px 18px;border-radius:10px;background:rgba(12,17,28,.94);
  border-left:5px solid var(--cor);font-size:clamp(13px,1.3vw,20px);font-weight:800;
  letter-spacing:1px;animation:deslizaDir .28s ease-out;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
@keyframes deslizaDir{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}

/* ---------- menu de pausa ---------- */
#pausa{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,10,.82);backdrop-filter:blur(6px)}
#pausa,#pausa *{cursor:default}
#pausa button,#pausa input{cursor:pointer}
.menu-pausa{
  width:min(92vw,520px);padding:34px 36px;border-radius:24px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(160deg,#111827,#0c111c);border:2px solid rgba(34,211,238,.45);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(34,211,238,.18);animation:entra .3s cubic-bezier(.2,.9,.3,1.2);
}
.menu-pausa h2{font-family:var(--titulo);font-size:clamp(28px,3vw,44px);letter-spacing:10px;color:#fff;text-align:center;margin-bottom:10px;
  text-shadow:0 0 30px rgba(34,211,238,.6)}
.mp-btn{
  font-family:var(--titulo);font-size:clamp(14px,1.3vw,18px);letter-spacing:4px;font-weight:900;color:var(--txt);
  padding:15px 20px;border-radius:14px;border:2px solid var(--linha);background:rgba(9,13,22,.9);
  transition:transform .1s,border-color .2s,box-shadow .2s;
}
.mp-btn:hover{border-color:var(--cor);box-shadow:0 0 22px rgba(34,211,238,.35);transform:translateY(-1px)}
.mp-btn:active{transform:scale(.98)}
.mp-btn.principal{border-color:var(--cor);color:#04080f;background:linear-gradient(135deg,#67e8f9,var(--cor) 55%,#0ea5c4);box-shadow:0 6px 26px rgba(34,211,238,.35)}
.mp-btn.sair{border-color:rgba(224,57,158,.5);color:#f4a6d4}
.mp-btn.sair:hover{border-color:var(--magenta);box-shadow:0 0 22px rgba(224,57,158,.4)}
.mp-linha{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;background:rgba(9,13,22,.7);border:2px solid var(--linha)}
.mp-linha span{font-size:20px}
.mp-linha b{font-family:var(--titulo);font-size:14px;color:var(--cor);min-width:2.4em;text-align:right}
#vol{flex:1;accent-color:var(--cor)}
#mp-fps{font-family:var(--titulo);font-size:11px;letter-spacing:2px;color:var(--dim);white-space:nowrap;min-width:9ch;text-align:right}
#mp-desempenho{flex:1}
#mp-desempenho.ativo{border-color:var(--magenta);color:var(--magenta)}
.mp-mini{font-family:var(--titulo);font-size:11px;letter-spacing:2px;padding:8px 12px;border-radius:9px;border:2px solid var(--linha);background:transparent;color:var(--dim)}
.mp-mini.ativo{border-color:var(--magenta);color:var(--magenta)}
.mp-dica{text-align:center;font-size:12px;color:var(--dim);letter-spacing:2px;margin-top:6px}
.mp-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mp-grade .mp-btn:only-child,.mp-grade .mp-btn:not(.oculto):first-child:nth-last-child(2) ~ .oculto{grid-column:span 2}
.mp-grade:has(.mp-btn:not(.oculto):only-of-type){grid-template-columns:1fr}
.mp-grade .mp-btn{font-size:clamp(11px,1vw,14px);letter-spacing:2px;padding:13px 10px}
.mp-teclas{text-align:center;font-size:11px;color:#3e4c6b;letter-spacing:1.5px;line-height:1.7;margin-top:2px}
.mp-dica b{color:var(--cor);letter-spacing:4px}
/* aviso de pausa quando o menu está fechado mas o jogo continua pausado (outro projetor) */
#pausado-aviso{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:9;
  font-family:var(--titulo);font-size:clamp(26px,3.4vw,52px);letter-spacing:10px;color:#fff;
  text-shadow:0 0 30px rgba(34,211,238,.8);animation:pulsaDica 1.4s ease-in-out infinite}