/* ===========================================================================
   CO TO ZA HIT? — high-end skin. Neon-brutalist + glass + animated atmosphere.
   =========================================================================== */
:root{
  --bg:#06060c;
  --bg2:#0c0c16;
  --ink:#f6f6f2;
  --muted:#9a9ab0;
  --line:rgba(255,255,255,.10);

  --acid:#caff33;        /* primary / HP */
  --magenta:#ff2f78;     /* damage / danger */
  --cyan:#27e6e6;        /* info */
  --violet:#8b5cff;      /* depth */
  --gold:#ffd23f;

  --glass:rgba(20,20,32,.55);
  --glass-2:rgba(30,30,46,.6);
  --r:18px;
  --glow-acid:0 0 40px rgba(202,255,51,.35);
  --glow-mag:0 0 40px rgba(255,47,120,.4);
  --glow-cyan:0 0 40px rgba(39,230,230,.35);
}
*{box-sizing:border-box}
/* `hidden` must always beat class-level display rules */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3{margin:0;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
button{font-family:inherit;cursor:pointer;color:inherit}
input{font-family:inherit}
::selection{background:var(--acid);color:#000}

/* ---------- animated atmosphere ---------- */
.bg-mesh{position:fixed;inset:-30%;z-index:-3;filter:blur(70px);opacity:.55;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(139,92,255,.55), transparent 60%),
    radial-gradient(35% 35% at 82% 20%, rgba(255,47,120,.45), transparent 60%),
    radial-gradient(45% 45% at 75% 80%, rgba(39,230,230,.40), transparent 60%),
    radial-gradient(35% 35% at 25% 85%, rgba(202,255,51,.35), transparent 60%);
  animation:drift 22s ease-in-out infinite alternate;}
@keyframes drift{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  50%{transform:translate(3%,-2%) scale(1.12) rotate(8deg)}
  100%{transform:translate(-3%,3%) scale(1.05) rotate(-6deg)}
}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 80%);}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.scanline{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:14px 26px;backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(6,6,12,.85),rgba(6,6,12,.35));
  border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;padding:0}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--acid);color:#000;font-size:14px;box-shadow:var(--glow-acid);
  transition:.2s}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-title{font-family:'Anton';font-size:1.45rem;letter-spacing:.02em}
.brand-title em{color:var(--acid);font-style:normal}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ghost-btn{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;font-weight:800;font-size:.74rem;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;transition:.15s}
.ghost-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.who{font-family:'Space Mono',monospace;font-size:.8rem;color:var(--muted)}
.who b{color:var(--acid)}
.audio-panel{position:fixed;top:64px;right:18px;z-index:62;width:248px;padding:16px 18px;
  background:var(--glass-2);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(18px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);animation:rise .15s;display:flex;flex-direction:column;gap:14px}
.vol-row{display:flex;align-items:center;gap:10px;font-family:'Space Mono';font-size:.78rem;color:var(--muted)}
.vol-row span{flex:0 0 76px}
.vol-row input[type=range]{flex:1;accent-color:var(--magenta);cursor:pointer}
.vol-row b{flex:0 0 26px;text-align:right;color:var(--acid)}

/* ---------- layout ---------- */
.stage{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:42px 26px 90px}
.screen{animation:rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.kicker{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.28em;
  color:var(--cyan);text-transform:uppercase;margin-bottom:16px}
.grad{background:linear-gradient(100deg,var(--acid),var(--cyan) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-cyan{background:linear-gradient(100deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-mag{background:linear-gradient(100deg,var(--magenta),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- HOME ---------- */
.home{text-align:center}
.home-hero{padding:30px 0 10px}
.mega{font-size:clamp(3.4rem,11vw,8rem);line-height:.86;letter-spacing:-.01em;
  text-shadow:0 0 60px rgba(139,92,255,.4)}
.home-lead{max-width:48ch;margin:22px auto 0;color:var(--muted);font-size:1.05rem;line-height:1.6}
.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
@media(max-width:820px){.mode-cards{grid-template-columns:1fr}}
.mcard{position:relative;overflow:hidden;text-align:left;border-radius:24px;padding:30px 26px 26px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);
  transition:.22s cubic-bezier(.2,.8,.2,1);isolation:isolate}
.mcard:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.mcard-glow{position:absolute;inset:auto -40% -60% -40%;height:70%;z-index:-1;filter:blur(50px);opacity:0;
  background:radial-gradient(closest-side,var(--c),transparent);transition:.3s}
.mcard:hover .mcard-glow{opacity:.55}
.mcard-no{font-family:'Space Mono';font-size:.8rem;color:var(--c);letter-spacing:.2em;opacity:.8}
.mcard-ic{font-size:2.6rem;margin:6px 0 12px;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--c) 70%,transparent))}
.mcard h3{font-size:2rem;margin-bottom:8px}
.mcard p{color:var(--muted);line-height:1.5;font-size:.95rem;min-height:3em}
.mcard-go{display:inline-block;margin-top:18px;font-weight:900;letter-spacing:.06em;color:var(--c);
  text-transform:uppercase;font-size:.85rem;transition:.2s}
.mcard:hover .mcard-go{transform:translateX(6px)}

/* ---------- panels ---------- */
.panel{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:24px;
  padding:34px 32px 36px;backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
.panel.narrow{max-width:680px;margin:0 auto}
.badge{display:inline-block;font-family:'Space Mono';font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:18px;font-weight:700}
.badge-acid{color:#000;background:var(--acid);box-shadow:var(--glow-acid)}
.badge-cyan{color:#001;background:var(--cyan);box-shadow:var(--glow-cyan)}
.badge-magenta{color:#fff;background:var(--magenta);box-shadow:var(--glow-mag)}
.display{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:.92}
.sub{color:var(--muted);max-width:48ch;margin:18px 0 26px;line-height:1.6;font-size:1.02rem}

/* ---------- buttons + fields ---------- */
.btn{position:relative;border:1px solid var(--line);background:var(--glass-2);border-radius:14px;
  padding:14px 24px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  transition:.16s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;pointer-events:none}
.btn-acid{background:var(--acid);color:#000;border-color:transparent;box-shadow:var(--glow-acid)}
.btn-acid:hover{box-shadow:0 0 60px rgba(202,255,51,.6)}
.btn-magenta{background:var(--magenta);color:#fff;border-color:transparent;box-shadow:var(--glow-mag)}
.btn-magenta:hover{box-shadow:0 0 60px rgba(255,47,120,.65)}
.btn-line{background:rgba(255,255,255,.04)}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
.btn.big{font-size:1.05rem;padding:17px 32px;width:100%;border-radius:16px}

.field{margin:0 0 16px}
.field label{display:block;font-family:'Space Mono';font-size:.7rem;letter-spacing:.15em;
  color:var(--muted);margin-bottom:8px}
.field input,#duelCode{width:100%;background:rgba(0,0,0,.4);color:var(--ink);
  border:1px solid var(--line);border-radius:13px;padding:15px 16px;font-size:1rem;outline:none;transition:.15s}
.field input:focus{border-color:var(--acid);box-shadow:0 0 0 3px rgba(202,255,51,.18)}
.field.join{display:flex;gap:10px}
.field.join input{text-transform:uppercase;letter-spacing:.25em;font-family:'Space Mono';text-align:center}
.duel-entry{max-width:420px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);margin:14px 0;
  font-family:'Space Mono';font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* duel setup: form (left) + avatar picker (right) */
.duel-setup{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:36px;align-items:start;margin-top:8px}
.duel-setup .duel-entry{max-width:none}
@media(max-width:760px){.duel-setup{grid-template-columns:1fr;gap:26px}}
.pick-label{display:block;font-family:'Space Mono';font-size:.7rem;letter-spacing:.15em;color:var(--muted);margin-bottom:12px}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:520px){.avatar-grid{grid-template-columns:repeat(3,1fr)}}
.avatar-grid button{position:relative;aspect-ratio:1;border-radius:16px;border:2px solid var(--line);
  background:rgba(0,0,0,.28);cursor:pointer;transition:.16s;overflow:hidden;padding:0}
.avatar-grid button img{width:100%;height:100%;object-fit:contain;display:block}
.avatar-grid button:hover{border-color:rgba(255,255,255,.45);transform:translateY(-3px)}
.avatar-grid button.on{border-color:var(--magenta);box-shadow:var(--glow-mag)}
.avatar-grid button.on::after{content:'✓';position:absolute;top:5px;right:7px;color:var(--magenta);font-weight:900;font-size:.8rem}

/* ---------- shared player block ---------- */
.player-block{margin-top:10px}
.pb-play{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.play-btn{position:relative;width:72px;height:72px;border-radius:50%;border:0;flex:0 0 auto;
  background:var(--acid);color:#000;font-size:1.7rem;display:grid;place-items:center;
  box-shadow:var(--glow-acid);transition:.18s}
.play-btn:hover{transform:scale(1.07)}
.play-btn::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--acid);opacity:.4;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.play-btn.playing{background:var(--magenta);color:#fff;box-shadow:var(--glow-mag)}
.play-btn.playing::after{border-color:var(--magenta)}
.wave{flex:1;height:58px;display:flex;align-items:center;gap:3px;overflow:hidden}
.wave i{display:block;width:4px;height:10px;border-radius:3px;background:rgba(255,255,255,.18);transition:height .08s}
.wave.live i{background:linear-gradient(to top,var(--acid),var(--cyan))}

.ladder{display:flex;gap:7px;margin:6px 0 20px;flex-wrap:wrap}
.rung{font-family:'Space Mono';font-size:.7rem;padding:6px 10px;border-radius:8px;
  border:1px solid var(--line);color:var(--muted);transition:.2s}
.rung.done{border-color:rgba(255,47,120,.5);color:var(--magenta)}
.rung.now{border-color:var(--acid);color:var(--acid);background:rgba(202,255,51,.1);box-shadow:var(--glow-acid)}

.guess-row{display:flex;gap:10px;position:relative}
.guess-row input{flex:1;background:rgba(0,0,0,.4);color:var(--ink);border:1px solid var(--line);
  border-radius:13px;padding:15px;font-size:1rem;outline:none;transition:.15s}
.guess-row input:focus{border-color:var(--acid);box-shadow:0 0 0 3px rgba(202,255,51,.18)}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:var(--glass-2);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(18px);
  max-height:260px;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.suggest div{padding:12px 15px;border-bottom:1px solid var(--line);font-size:.92rem;transition:.1s}
.suggest div:last-child{border-bottom:0}
.suggest div:hover,.suggest div.hl{background:var(--acid);color:#000;cursor:pointer}
.pb-msg{margin-top:16px;font-weight:800;min-height:1.4em}
.pb-msg.good{color:var(--acid);text-shadow:var(--glow-acid)}
.pb-msg.bad{color:var(--magenta)}

/* ---------- daily ---------- */
.grid-daily{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
@media(max-width:900px){.grid-daily{grid-template-columns:1fr}}
.progress-dots{display:flex;gap:8px;margin:4px 0 22px;flex-wrap:wrap}
.progress-dots i{width:30px;height:9px;border-radius:5px;background:rgba(255,255,255,.14)}
.progress-dots i.done{background:var(--acid);box-shadow:var(--glow-acid)}
.progress-dots i.now{background:var(--cyan);box-shadow:var(--glow-cyan)}
.rollover{margin-top:16px;font-family:'Space Mono';font-size:.78rem;color:var(--muted)}

.board{align-self:start}
.leaderboard{list-style:none;margin:0;padding:0}
.leaderboard li{display:flex;align-items:center;gap:12px;padding:12px 10px;
  border-bottom:1px solid var(--line);font-family:'Space Mono'}
.leaderboard li .rk{width:30px;font-weight:700;color:var(--muted);font-size:1.05rem}
.leaderboard li:nth-child(1) .rk{color:var(--gold)}
.leaderboard li:nth-child(2) .rk{color:#cfd2d6}
.leaderboard li:nth-child(3) .rk{color:#d98a3d}
.leaderboard li .nk{flex:1;font-family:'Archivo';font-weight:800}
.leaderboard li .tm{color:var(--acid)}
.leaderboard li.me{background:rgba(202,255,51,.1);outline:1px solid var(--acid);border-radius:10px}
.board-foot{margin-top:16px;font-family:'Space Mono';font-size:.85rem;color:var(--muted)}

/* =================== DUEL ARENA =================== */
.arena-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.room-chip{font-family:'Space Mono';color:var(--muted);font-size:.85rem;letter-spacing:.06em}
.room-chip b{color:var(--acid);font-size:1.25rem;letter-spacing:.28em;margin-left:6px}
.copy{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
  border-radius:8px;width:30px;height:30px;margin-left:8px}
.copy:hover{color:var(--ink)}
.round-chip{font-family:'Anton';font-size:1.15rem;color:var(--cyan);
  text-transform:uppercase;letter-spacing:.04em;text-shadow:var(--glow-cyan)}

/* flanked arena: 2 fighters | center stage | 2 fighters */
.arena-stage{display:grid;grid-template-columns:1fr minmax(300px,1.25fr) 1fr;
  gap:30px;align-items:start;margin-bottom:24px}
.side{display:flex;flex-direction:column;gap:22px}
.arena-center{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:6px}
.center-hint{min-height:1.4em;font-family:'Space Mono';font-size:.85rem;color:var(--muted);text-align:center}
.center-hint.live{color:var(--acid)}
@media(max-width:920px){
  .arena-stage{grid-template-columns:1fr;gap:22px}
  .side{flex-direction:row}
  .arena-center{order:-1}
}

/* big visible timer ring */
.timer-ring{position:relative;width:128px;height:128px;justify-self:center}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:7}
.timer-ring .trk{stroke:rgba(255,255,255,.1)}
.timer-ring .prg{stroke:var(--acid);stroke-linecap:round;
  stroke-dasharray:276.46;stroke-dashoffset:calc(276.46px * (1 - var(--p,1)));
  filter:drop-shadow(0 0 8px var(--acid));transition:stroke-dashoffset .12s linear, stroke .3s}
.timer-ring .t-inner{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.t-num{font-family:'Anton';font-size:2.6rem;line-height:1}
.t-inner small{font-family:'Space Mono';font-size:.6rem;letter-spacing:.25em;color:var(--muted)}
.timer-ring.danger .prg{stroke:var(--magenta);filter:drop-shadow(0 0 10px var(--magenta))}
.timer-ring.danger .t-num{color:var(--magenta);animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}

/* big character fighters (live in the side columns) */
.side .fighter{flex:1;min-width:0}
.fighter{--c:var(--acid);position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.25));
  border:1px solid var(--line);transition:.25s;backdrop-filter:blur(10px)}
.fighter.empty{opacity:.5}
.fighter.you{border-color:color-mix(in srgb,var(--c) 70%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 18px 40px rgba(0,0,0,.4)}
/* tall character stage — room for full-body art via --art */
.fighter .stage{position:relative;height:215px;display:grid;place-items:end center;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 120%,color-mix(in srgb,var(--c) 35%,transparent),transparent 70%)}
.fighter .stage::before{content:'';position:absolute;inset:0;
  background:var(--art);background-size:cover;background-position:center top;opacity:.95}
.fighter .floor{position:absolute;bottom:0;left:0;right:0;height:40%;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
/* placeholder character when no art: giant glowing initial + aura */
.fighter .char{position:relative;z-index:1;font-family:'Anton';font-size:4.6rem;line-height:1;
  color:color-mix(in srgb,var(--c) 85%,#fff);margin-bottom:14px;
  text-shadow:0 0 30px color-mix(in srgb,var(--c) 80%,transparent);transition:.3s}
.fighter .aura{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:120px;height:120px;
  border-radius:50%;filter:blur(26px);background:var(--c);opacity:.4;z-index:0}
/* full-body character image — absolute so it always fits the stage (contain),
   never clipped; padding gives headroom for raised-arm poses */
.fighter .char-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;padding:14px 16px 2px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));transition:transform .3s}
.fighter .crown{position:absolute;top:10px;left:12px;font-size:.6rem;font-family:'Space Mono';
  letter-spacing:.1em;color:var(--c);background:rgba(0,0,0,.4);padding:3px 7px;border-radius:6px;z-index:2}
.fighter .info{padding:12px 14px 16px;position:relative;z-index:2}
.fighter .fname{font-family:'Anton';font-size:1.15rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-transform:uppercase}
.hpbar{height:14px;border-radius:8px;background:rgba(0,0,0,.5);margin-top:8px;overflow:hidden;
  border:1px solid var(--line);position:relative}
.hpbar .fill{position:absolute;inset:0;transform-origin:left;border-radius:8px;
  background:linear-gradient(90deg,var(--acid),#9fe000);
  transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.hpbar .fill.low{background:linear-gradient(90deg,var(--magenta),#ff7a3d)}
.hpval{display:flex;justify-content:space-between;font-family:'Space Mono';font-size:.7rem;
  color:var(--muted);margin-top:6px}
.hpval b{color:var(--ink)}
.fstatus{position:absolute;top:10px;right:10px;z-index:2;font-family:'Space Mono';font-size:.58rem;
  letter-spacing:.08em;padding:4px 8px;border-radius:6px;border:1px solid var(--line);
  background:rgba(0,0,0,.45);color:var(--muted)}
.fstatus.ready{color:var(--acid);border-color:var(--acid)}
.fstatus.ans{color:var(--cyan);border-color:var(--cyan)}

/* juice */
.fighter.dead{filter:grayscale(1) brightness(.6)}
.fighter.dead .char,.fighter.dead .char-img{transform:rotate(8deg) scale(.9);opacity:.5}
.fighter.dead .stage::after{content:'💀';position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;z-index:3}
@keyframes shake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(6px)}
  30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}
@keyframes hitflash{0%{box-shadow:inset 0 0 0 2000px rgba(255,47,120,.55)}100%{box-shadow:inset 0 0 0 2000px transparent}}
.fighter.hit{animation:shake .42s}
.fighter.hit .stage{animation:hitflash .55s ease-out}
.fighter.hit .char{transform:scale(.92)}
@keyframes recoil{0%{transform:scale(1)}30%{transform:scale(.88) rotate(-5deg)}100%{transform:scale(1)}}
.fighter.hit .char-img{animation:recoil .45s}
/* attacking (dealt damage): a quick lunge upward */
@keyframes attack{0%{transform:translateY(0) scale(1)}28%{transform:translateY(-18px) scale(1.16)}100%{transform:translateY(0) scale(1)}}
.fighter.attack .char-img{animation:attack .55s cubic-bezier(.3,.9,.3,1)}
.fighter.attack{z-index:2}
.dmg-float{position:absolute;top:35%;left:50%;transform:translateX(-50%);z-index:5;
  font-family:'Anton';font-size:2.4rem;color:#fff;text-shadow:0 0 18px var(--magenta),2px 3px 0 #000;
  animation:dmgrise 1s forwards;pointer-events:none}
@keyframes dmgrise{0%{transform:translate(-50%,10px) scale(.4)}30%{transform:translate(-50%,-6px) scale(1.25)}
  100%{transform:translate(-50%,-60px) scale(1);opacity:0}}
@keyframes elimring{0%{box-shadow:0 0 0 0 var(--magenta)}100%{box-shadow:0 0 0 6px transparent}}
.fighter.elim{animation:elimring .7s ease-out}
.fast-badge{position:absolute;top:12%;left:50%;z-index:6;font-family:'Anton';font-size:1rem;
  color:var(--gold);text-shadow:0 0 12px var(--gold),1px 2px 0 #000;white-space:nowrap;
  transform:translateX(-50%);animation:dmgrise 1.6s forwards;pointer-events:none}

.arena-battle{max-width:760px;margin:0 auto}
.arena-foot{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:22px}
.arena-foot .hint{color:var(--muted);font-family:'Space Mono';font-size:.9rem}
.reveal-banner{text-align:center;margin:0 auto 6px;font-family:'Anton';font-size:1.3rem}
.reveal-banner b{color:var(--cyan)}

/* segmented control (answer-window picker) */
.seg{display:flex;gap:8px}
.seg button{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:11px;
  padding:11px 0;font-family:'Space Mono';font-weight:700;color:var(--muted);transition:.15s}
.seg button:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.seg button.on{background:var(--magenta);color:#fff;border-color:transparent;box-shadow:var(--glow-mag)}
.seg.small button{padding:8px 14px;font-size:.82rem}

/* ---- room settings screen ---- */
.settings-grid{display:flex;flex-direction:column;margin:10px 0 26px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.set-label{font-weight:800;font-size:1.02rem}
.set-label small{display:block;font-family:'Space Mono';font-size:.72rem;color:var(--muted);font-weight:400;margin-top:3px}
.switch{width:54px;height:30px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.4);position:relative;transition:.18s;flex:0 0 auto;cursor:pointer}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:.18s}
.switch.on{background:var(--magenta);border-color:transparent;box-shadow:var(--glow-mag)}
.switch.on::after{left:26px;background:#fff}
.set-sub{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);transition:.2s}
.set-sub.off{opacity:.3;pointer-events:none}
.set-mini{font-family:'Space Mono';font-size:.72rem;color:var(--muted)}
.chip{border:1px solid var(--line);background:rgba(0,0,0,.3);border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:700;color:var(--muted);transition:.14s;cursor:pointer}
.chip.on{color:var(--ink);border-color:var(--magenta);background:rgba(255,47,120,.12)}
.settings-actions{display:flex;gap:12px;align-items:center}
.settings-actions .big{flex:1;width:auto}
.set-block{padding:15px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.artist-search{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;color:var(--ink);outline:none;font-size:.95rem}
.artist-search:focus{border-color:var(--magenta)}
.artist-pick-grid{display:flex;flex-wrap:wrap;gap:8px;max-height:210px;overflow:auto;
  padding:8px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.22)}
.artist-pick-grid button{border:1px solid var(--line);background:rgba(0,0,0,.3);border-radius:999px;
  padding:7px 13px;font-size:.82rem;font-weight:700;color:var(--muted);transition:.12s;white-space:nowrap}
.artist-pick-grid button:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.artist-pick-grid button.on{color:#000;background:var(--magenta);border-color:transparent;box-shadow:var(--glow-mag)}
.artist-pick-count{font-family:'Space Mono';font-size:.75rem;color:var(--muted)}

/* ---- in-arena: sudden death, power-up bar, combo/held badges ---- */
.sd-banner{font-family:'Anton';color:var(--magenta);text-shadow:0 0 14px var(--magenta);
  letter-spacing:.08em;animation:pulse .7s infinite alternate}
.powerup-bar{display:flex;align-items:center;gap:13px;border:1px solid var(--gold);text-align:left;
  background:rgba(255,210,63,.1);border-radius:14px;padding:11px 18px;cursor:pointer;
  box-shadow:0 0 30px rgba(255,210,63,.22);animation:rise .3s;transition:.15s;max-width:480px}
.powerup-bar:hover{transform:translateY(-2px);background:rgba(255,210,63,.18)}
.powerup-bar .pu-emoji{font-size:1.7rem}
.powerup-bar .pu-name{color:var(--gold);font-weight:900;text-transform:uppercase;font-size:.95rem}
.powerup-bar .pu-desc{font-family:'Space Mono';font-size:.72rem;color:var(--muted)}
.powerup-bar .pu-use{margin-left:auto;font-family:'Anton';font-size:.9rem;color:#000;background:var(--gold);
  padding:5px 12px;border-radius:8px;white-space:nowrap}
.fighter .combo{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:'Anton';font-size:.82rem;color:var(--gold);text-shadow:0 0 10px var(--gold);
  background:rgba(0,0,0,.5);padding:2px 9px;border-radius:7px}
.fighter .held{position:absolute;bottom:62px;right:9px;z-index:3;font-size:1.15rem;
  filter:drop-shadow(0 0 6px rgba(255,210,63,.7))}
.fighter.shielded::after{content:'';position:absolute;inset:0;border-radius:22px;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(39,230,230,.7),0 0 24px rgba(39,230,230,.4)}

/* between-songs reveal overlay */
.reveal-overlay{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:20px;
  background:rgba(4,4,10,.82);backdrop-filter:blur(10px);animation:rise .3s}
.reveal-card{max-width:560px;width:100%;text-align:center;padding:34px 30px}
.reveal-kicker{font-family:'Space Mono';font-size:.72rem;letter-spacing:.25em;color:var(--cyan);text-transform:uppercase}
.reveal-song{font-family:'Anton';font-size:clamp(1.5rem,4vw,2.4rem);margin:12px 0 4px;text-transform:uppercase;
  background:linear-gradient(100deg,var(--acid),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.reveal-song small{display:block;font-family:'Space Mono';font-size:.9rem;color:var(--cyan);
  -webkit-text-fill-color:var(--cyan);margin-top:4px;text-transform:none}
#revealAudio{width:100%;margin:20px 0 6px}
.reveal-ready{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.reveal-ready .pr{font-family:'Space Mono';font-size:.78rem;color:var(--muted);
  padding:5px 11px;border:1px solid var(--line);border-radius:999px}
.reveal-ready .pr.ok{color:var(--acid);border-color:var(--acid)}
#revealNextBtn:disabled{opacity:.5}

/* ---- pre-match ban phase ---- */
.bans-overlay{position:fixed;inset:0;z-index:57;display:grid;place-items:center;padding:20px;
  background:rgba(4,4,10,.86);backdrop-filter:blur(8px);animation:rise .3s}
.bans-card{max-width:660px;width:100%;text-align:center;padding:30px 28px;max-height:86vh;overflow:auto}
.bans-card .display{font-size:clamp(1.8rem,5vw,3rem)}
.bans-count{font-family:'Space Mono';color:var(--muted);margin:8px 0 20px}
.artist-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.artist-grid button{border:1px solid var(--line);background:rgba(0,0,0,.3);border-radius:999px;
  padding:10px 16px;font-weight:700;font-size:.9rem;color:var(--ink);transition:.14s}
.artist-grid button:hover{border-color:var(--magenta);transform:translateY(-2px)}
.artist-grid button.banned{background:rgba(255,47,120,.18);border-color:var(--magenta);color:var(--magenta);
  text-decoration:line-through;opacity:.75;pointer-events:none}
.artist-grid button.mine{box-shadow:var(--glow-mag)}
#bansForce{margin-top:22px}

/* ---- targeted emotes (throw at an opponent) ---- */
.emote-btn{position:absolute;top:10px;left:10px;z-index:3;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--line);background:rgba(0,0,0,.5);font-size:.95rem;display:grid;place-items:center;
  cursor:pointer;transition:.12s;opacity:.65}
.emote-btn:hover{opacity:1;transform:scale(1.12);border-color:var(--magenta)}
.emote-picker{position:fixed;z-index:62;display:flex;gap:6px;flex-wrap:wrap;max-width:230px;padding:8px;
  background:var(--glass-2);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(16px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);animation:rise .15s}
.emote-picker button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);font-size:1.1rem;display:grid;place-items:center;color:var(--ink);transition:.1s}
.emote-picker button:hover{transform:scale(1.15);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.emote-picker button.txt{font-family:'Anton';font-size:.85rem}
/* flying projectile */
.emote-fly{position:fixed;z-index:64;font-size:2.2rem;pointer-events:none;
  transform:translate(-50%,-50%) scale(.5);animation:emoteThrow .6s cubic-bezier(.4,0,.7,1) forwards}
.emote-fly.txt{font-family:'Anton';font-size:1.4rem;color:var(--acid)}
@keyframes emoteThrow{
  0%{transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.5) rotate(0)}
  60%{transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) scale(1.25) rotate(320deg)}
  100%{transform:translate(calc(-50% + var(--ex)),calc(-50% + var(--ey))) scale(1) rotate(420deg)}}
/* impact on target */
.emote-splash{position:absolute;top:34%;left:50%;z-index:6;font-size:2.4rem;pointer-events:none;
  transform:translate(-50%,-50%);animation:emoteSplash .7s ease-out forwards}
.emote-splash.txt{font-family:'Anton';font-size:1.5rem;color:var(--acid)}
@keyframes emoteSplash{0%{transform:translate(-50%,-50%) scale(.3) rotate(-12deg);opacity:0}
  25%{transform:translate(-50%,-50%) scale(1.5);opacity:1}100%{transform:translate(-50%,-90%) scale(1.1);opacity:0}}
@keyframes wobble{15%{transform:rotate(-4deg)}30%{transform:rotate(3deg)}45%{transform:rotate(-2deg)}60%{transform:rotate(1deg)}}
.fighter.emote-hit{animation:wobble .5s}

/* ---- killcam ---- */
.killcam{position:fixed;top:40%;left:50%;transform:translateX(-50%);z-index:56;text-align:center;
  font-family:'Anton';font-size:clamp(1.1rem,3.4vw,2rem);color:#fff;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 18px var(--magenta),2px 3px 0 #000;animation:killcamIn .45s both}
.killcam .skull{font-size:1.4em;display:block;margin-bottom:4px}
.killcam b{color:var(--magenta)}
@keyframes killcamIn{from{opacity:0;transform:translate(-50%,14px) scale(.7)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ---- VS splash (match start) — one panel per player ---- */
.vs-splash{position:fixed;inset:0;z-index:58;overflow:hidden;
  background:radial-gradient(circle at center,rgba(255,47,120,.18),rgba(4,4,10,.95));backdrop-filter:blur(6px)}
.vs-fighter{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 32%,transparent),transparent 72%);
  animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.9,.2,1);animation-fill-mode:both}
.vs-fighter::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.vs-fighter img{width:min(46%,160px);max-height:58%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.vs-name{font-family:'Anton';font-size:clamp(1rem,2.6vw,1.9rem);text-transform:uppercase;color:var(--c);
  text-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent);white-space:nowrap;z-index:1}
.slideL{animation-name:vsL}.slideR{animation-name:vsR}.slideD{animation-name:vsD}.slideU{animation-name:vsU}
@keyframes vsL{from{opacity:0;transform:translateX(-70%)}to{opacity:1;transform:none}}
@keyframes vsR{from{opacity:0;transform:translateX(70%)}to{opacity:1;transform:none}}
@keyframes vsD{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}
@keyframes vsU{from{opacity:0;transform:translateY(-70%)}to{opacity:1;transform:none}}
.vs-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:'Anton';font-size:clamp(3.2rem,11vw,8.5rem);color:#fff;
  text-shadow:0 0 50px var(--magenta),4px 5px 0 #000;animation:vsPop .5s .15s both;pointer-events:none}
@keyframes vsPop{from{transform:translate(-50%,-50%) scale(0) rotate(-18deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.3)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.vs-go{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);z-index:3;font-family:'Anton';
  font-size:clamp(1.6rem,5vw,3.4rem);color:var(--acid);text-shadow:0 0 30px var(--acid);opacity:0;
  animation:vsGoIn .4s 1.05s both;pointer-events:none}
@keyframes vsGoIn{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* ---- confetti ---- */
.confetti{position:fixed;top:-24px;width:10px;height:14px;z-index:70;pointer-events:none;border-radius:2px;
  animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(112vh) rotate(900deg);opacity:.85}}

/* ---- victory stats ---- */
.win-avatar{width:130px;height:130px;object-fit:contain;margin:2px auto 0;display:block;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}
.win-flawless{color:var(--gold);font-family:'Anton';letter-spacing:.1em;margin:6px 0 2px;text-shadow:0 0 14px var(--gold)}
.win-stats{display:grid;gap:8px;margin:16px 0 22px;text-align:left}
.win-stats .row{display:flex;justify-content:space-between;gap:12px;font-family:'Space Mono';font-size:.84rem;
  padding:8px 13px;border:1px solid var(--line);border-radius:10px}
.win-stats .row b{color:var(--acid)}
.win-stats .row .who{color:var(--muted)}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:50;background:rgba(4,4,10,.8);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px);animation:rise .25s}
.modal{max-width:560px;width:100%;text-align:center;padding:38px 34px}
.modal .winner{font-family:'Anton';font-size:clamp(2.4rem,7vw,3.4rem);
  background:linear-gradient(100deg,var(--acid),var(--cyan));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin:8px 0;text-transform:uppercase}
.modal .big-song{font-family:'Anton';font-size:1.6rem;margin:12px 0 4px;text-transform:uppercase}
.modal .artist{color:var(--cyan);font-family:'Space Mono';margin-bottom:20px}
.rules-list{text-align:left;margin:18px 0 26px;padding:0;list-style:none;display:grid;gap:12px}
.rules-list li{display:flex;gap:13px;align-items:flex-start;color:var(--ink);line-height:1.45}
.rules-list li .n{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-family:'Anton';background:var(--acid);color:#000;font-size:.9rem}
.rules-list li span.t{color:var(--muted);font-size:.96rem}
.rules-list li b{color:var(--acid)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:#000;font-weight:800;padding:13px 22px;border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);animation:rise .25s}