/* ══════════════════════════════════════════════════════════════════════════
   ARENA STRIKE — UI
   One dark theme, two team colours, five rarity colours. Everything scales
   with clamp() so the same layout works on a phone and a 4K monitor.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070b12; --bg2:#0d1420; --panel:#111a27; --panel2:#16202f;
  --line:#22314a; --line2:#2e415f;
  --txt:#e8eef7; --mut:#8fa3bd; --dim:#5b6f8c;
  --a:#27b8e6; --b:#e6483c;
  --acc:#35e6ff; --acc2:#ff2d92;
  --good:#3ee08a; --warn:#ffb02e; --bad:#ff5a4d;
  --r-common:#9aa7b4; --r-rare:#4ea3ff; --r-epic:#b46bff;
  --r-legendary:#ffb02e; --r-secret:#ff2d6f;
  --fs: clamp(14px, 1.05vw, 17px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--txt); font-size:var(--fs);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
input,textarea,select{-webkit-user-select:text;user-select:text;font-family:inherit}
canvas#c{position:fixed;inset:0;display:block;width:100%;height:100%;z-index:0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;background:rgba(255,255,255,.07);padding:.1em .35em;border-radius:4px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  font:inherit;font-weight:700;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  padding:.62em 1.15em;cursor:pointer;transition:transform .1s,border-color .15s,background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;white-space:nowrap;
}
.btn:hover{border-color:var(--acc);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--acc),#0d8fb8);color:#04141c;border:none;box-shadow:0 6px 20px rgba(53,230,255,.22)}
.btn.primary:hover{box-shadow:0 8px 26px rgba(53,230,255,.34)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.on{background:rgba(62,224,138,.15);border-color:var(--good);color:var(--good)}
.btn.off,.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn.small{padding:.4em .8em;font-size:.86em;border-radius:9px}
.btn.big{padding:.85em 2em;font-size:1.12em}
.chip{
  display:inline-flex;align-items:center;gap:.35em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:100px;padding:.28em .8em;font-size:.84em;font-weight:700;color:var(--mut);
}
.chip.net.ok{color:var(--good);border-color:rgba(62,224,138,.4)}
.chip.net.off{color:var(--dim)}
.muted{color:var(--dim)}

/* ── boot ──────────────────────────────────────────────────────────────── */
#boot{
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.2rem;
  background:radial-gradient(circle at 50% 42%,#122036,#050810 72%);
  transition:opacity .35s;
}
#boot.gone{opacity:0;pointer-events:none}
.boot-logo,.mn-logo{font-weight:900;letter-spacing:.06em;line-height:1;text-align:center}
.boot-logo b,.mn-logo b{display:block;font-size:clamp(2.6rem,8vw,5rem);
  background:linear-gradient(180deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-logo span,.mn-logo span{display:block;font-size:clamp(1rem,3vw,1.7rem);color:var(--acc2);letter-spacing:.42em;margin-top:.2em}
.boot-bar{width:min(340px,70vw);height:6px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
#bootText{color:var(--mut);font-size:.9em;text-align:center;min-height:2.4em;max-width:80vw}

/* ══ HUD ═══════════════════════════════════════════════════════════════ */
#hud{position:fixed;inset:0;z-index:27;pointer-events:none;display:none}
#topbar{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:1.3rem;font-weight:900;font-size:1.3rem;
  background:rgba(7,11,18,.62);border:1px solid var(--line);border-radius:14px;padding:.4rem 1.3rem;
  backdrop-filter:blur(6px);
}
#topbar .sc.a{color:var(--a)} #topbar .sc.b{color:var(--b)}
#topbar .clk{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:center;font-size:1.05rem}
#modeTag{position:absolute;top:64px;left:50%;transform:translateX(-50%);font-size:.78rem;color:var(--dim);font-weight:700;letter-spacing:.08em}
#pingTag{position:absolute;top:14px;right:16px;font-size:.76rem;font-weight:800;display:none}
/* ── incoming fire ─────────────────────────────────────────────────────────
   An arc at the edge of the screen pointing at whoever is shooting. Two
   strengths: a thin amber one for a shot that went past, a thick red one for a
   shot that connected. Being shot from behind used to be completely silent
   information — the vignette told you that you were hurt, never from where. */
#incoming{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.inc{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform,opacity}
.inc>i{position:absolute;display:block;
  width:112px;height:12px;margin-left:-56px;margin-top:-170px;
  border-radius:60% 60% 0 0 / 100% 100% 0 0;
  background:linear-gradient(180deg,rgba(255,176,46,.95),rgba(255,176,46,0));
  filter:blur(.4px)}
.inc.hit>i{width:150px;height:17px;margin-left:-75px;
  background:linear-gradient(180deg,rgba(255,60,60,1),rgba(255,60,60,0))}
@keyframes incFade{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.inc{animation:incFade 1.15s ease-out forwards}
.inc.hit{animation-duration:1.5s}

#perf{position:absolute;left:50%;transform:translateX(-50%);
  top:max(6px,env(safe-area-inset-top));display:none;
  font:700 .74rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#9ff5c4;background:rgba(4,8,14,.72);border:1px solid rgba(120,255,190,.28);
  border-radius:8px;padding:.3rem .6rem;white-space:pre;text-align:left;z-index:33}
#perf.on{display:block}
#killfeed{position:absolute;top:44px;right:16px;display:flex;flex-direction:column;gap:.25rem;align-items:flex-end;font-size:.84rem}
.kf{background:rgba(7,11,18,.66);border:1px solid var(--line);border-radius:8px;padding:.22rem .6rem;
  display:flex;gap:.5rem;align-items:center;animation:kfin .18s ease}
.kf .kfw{color:var(--dim);font-size:.86em}
.kf .ta{color:var(--a)} .kf .tb{color:var(--b)}
@keyframes kfin{from{opacity:0;transform:translateX(18px)}}
#streak{position:absolute;top:96px;left:50%;transform:translateX(-50%);font-weight:900;
  color:var(--warn);letter-spacing:.14em;font-size:.95rem;opacity:0;transition:opacity .2s;text-shadow:0 0 14px rgba(255,176,46,.6)}

#vitals{position:absolute;left:20px;bottom:22px;display:flex;flex-direction:column;gap:.35rem}
.v-row{display:flex;align-items:center;gap:.5rem}
.v-ic{font-size:1.05rem;filter:drop-shadow(0 0 3px #000)}
.v-bar{width:min(210px,32vw);height:15px;background:rgba(7,11,18,.7);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.v-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#86efac);transition:width .12s}
.v-bar.sh{height:9px}
.v-bar.sh i{background:linear-gradient(90deg,#2f8fd8,#7fd8ff)}
.v-num{font-weight:900;font-size:1.1rem;min-width:2.2em;text-shadow:0 0 4px #000}

#ammo{position:absolute;right:24px;bottom:58px;text-align:right;text-shadow:0 0 5px #000}
#ammo .wpn{display:block;font-size:.82rem;font-weight:800;color:var(--warn);letter-spacing:.05em}
#ammo .mag{font-size:2.5rem;font-weight:900;line-height:1}
#ammo .res{font-size:1rem;color:var(--mut);margin-left:.2em}
#lowAmmo{color:var(--bad);font-weight:900;font-size:.78rem;letter-spacing:.16em;opacity:0;transition:opacity .2s;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
#reloadBar{position:absolute;left:50%;top:calc(50% + 42px);transform:translateX(-50%);
  width:160px;height:5px;background:rgba(7,11,18,.7);border-radius:4px;overflow:hidden;opacity:0;transition:opacity .12s}
#reloadBar i{display:block;height:100%;width:0;background:var(--warn)}

#slots{position:absolute;right:24px;bottom:14px;display:flex;gap:.35rem}
.sl{display:flex;align-items:center;gap:.4rem;background:rgba(7,11,18,.6);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:.28rem .6rem;font-size:.78rem;font-weight:800}
.sl.on{background:rgba(53,230,255,.14)}
.sl-key{color:var(--dim);font-size:.72rem}

#cross{position:fixed;top:50%;left:50%;width:0;height:0;z-index:21;pointer-events:none}
#cross .cl{position:absolute;top:50%;left:50%;width:2px;height:9px;background:rgba(255,255,255,.92);
  box-shadow:0 0 3px rgba(0,0,0,.9);transform:translate(-50%,-50%);border-radius:1px;transition:transform .06s}
#cross .cl:nth-child(3),#cross .cl:nth-child(4){width:9px;height:2px}
#cross .dot{position:absolute;top:50%;left:50%;width:2px;height:2px;background:rgba(255,255,255,.75);
  transform:translate(-50%,-50%);border-radius:50%}
#hitmark{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:20px;height:20px;z-index:22;opacity:0;transition:opacity .08s;pointer-events:none}
#hitmark::before,#hitmark::after{content:"";position:absolute;background:#fff;box-shadow:0 0 4px #000}
#hitmark::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#hitmark::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
#hitmark.head::before,#hitmark.head::after{background:var(--warn)}
#hitmark.kill::before,#hitmark.kill::after{background:var(--bad)}
#hitmark.kill{width:28px;height:28px}
/* ── sniper scope ────────────────────────────────────────────────────────
   The lens must be a true circle on every aspect ratio, so the blackout is a
   circular element with an enormous box-shadow spread rather than a radial
   gradient — a percentage gradient on a non-square box paints an ellipse.  */
#scope{position:fixed;inset:0;z-index:25;display:none;pointer-events:none;overflow:hidden}
#scope .sc-inner{
  position:absolute;left:50%;top:50%;
  width:var(--lens);height:var(--lens);
  margin-left:calc(var(--lens) / -2);margin-top:calc(var(--lens) / -2);
  border-radius:50%;will-change:transform;
}
/* everything outside the circle goes black */
#scope .sc-shade{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 100vmax #000;
}
/* coated-glass darkening toward the rim */
#scope .sc-glass{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 70px 20px rgba(0,0,0,.7), inset 0 0 150px 10px rgba(40,90,140,.16);
}
#scope .sc-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(0,0,0,.92);
  outline:1px solid rgba(150,180,210,.18);
}
/* reticle: duplex posts, fine centre, mil-dots */
#scope .sc-cross{position:absolute;inset:0}
#scope .sc-cross i{position:absolute;background:rgba(10,14,18,.88)}
#scope .sc-cross .h{left:8%;right:8%;top:50%;height:1.5px;transform:translateY(-50%)}
#scope .sc-cross .v{top:8%;bottom:8%;left:50%;width:1.5px;transform:translateX(-50%)}
#scope .sc-cross .h.post{left:8%;width:20%;height:4px;right:auto}
#scope .sc-cross .h.post.r{left:auto;right:8%}
#scope .sc-cross .v.post{top:8%;height:20%;width:4px;bottom:auto}
#scope .sc-cross .v.post.b{top:auto;bottom:8%}
#scope .sc-mil{position:absolute;left:50%;width:6px;height:1.5px;
  background:rgba(10,14,18,.85);transform:translateX(-50%)}
#scope .sc-dot{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
  background:rgba(255,60,60,.92);transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(255,60,60,.85)}
#scope .sc-mag{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  color:rgba(190,210,230,.5);font:800 .7rem/1 system-ui,sans-serif;letter-spacing:.18em}
#vignette{position:fixed;inset:0;z-index:23;pointer-events:none;box-shadow:inset 0 0 160px 34px rgba(255,20,20,0);transition:box-shadow .14s}
#banner{position:fixed;top:26%;left:50%;transform:translateX(-50%) scale(.9);z-index:26;
  text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
#banner.show{opacity:1;transform:translateX(-50%) scale(1)}
.bn-main{font-size:2.2rem;font-weight:900;letter-spacing:.08em;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.bn-sub{color:var(--mut);font-size:.9rem;font-weight:700}
#countdown{position:fixed;inset:0;z-index:27;display:none;align-items:center;justify-content:center;
  font-size:9rem;font-weight:900;color:#fff;text-shadow:0 0 70px rgba(53,230,255,.85);pointer-events:none}
#countdown.on{display:flex;animation:cdpop .5s ease}
@keyframes cdpop{from{transform:scale(1.5);opacity:.2}}

#scoreboard{position:fixed;inset:0;z-index:28;display:none;align-items:center;justify-content:center;
  background:rgba(5,8,14,.6);backdrop-filter:blur(3px)}
#scoreboard.on{display:flex}
.sb-box{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:1rem;min-width:min(560px,92vw)}
.sb-head,.sb-row{display:grid;grid-template-columns:1fr 3em 3em 4em 4.5em;gap:.4rem;padding:.4rem .6rem;font-size:.9rem}
.sb-head{color:var(--dim);font-weight:800;border-bottom:1px solid var(--line);font-size:.78rem;letter-spacing:.08em}
.sb-row{border-radius:8px}
.sb-row.ta{background:rgba(39,184,230,.09)} .sb-row.tb{background:rgba(230,72,60,.09)}
.sb-row.me{outline:1px solid var(--acc)}
.sb-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#lockhint{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;background:rgba(5,8,14,.55);cursor:pointer;text-align:center}
#lockhint h2{font-size:1.7rem;font-weight:900}
#lockhint p{color:var(--mut);font-size:.9rem;max-width:26em}

/* ── touch ─────────────────────────────────────────────────────────────── */
#touch{position:fixed;inset:0;z-index:24;display:none;touch-action:none}
#touch.on{display:block}
#tstick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));
  width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18)}
#tstickKnob{position:absolute;top:50%;left:50%;width:56px;height:56px;border-radius:50%;
  background:rgba(53,230,255,.55);transform:translate(-50%,-50%);box-shadow:0 0 16px rgba(53,230,255,.4)}
/* ── the thumb pad ────────────────────────────────────────────────────────
   Two rows anchored to the bottom-right corner, packed outward. Sizes come
   from --tb (the player can scale them in Settings) so every rule below is
   proportional and there is one number to change, not five.

   Safe-area insets are SUMMED with the gutter rather than max()'d: on a phone
   with a cutout, max() lets a control sit flush against the cutout edge, and
   the old layout had a JUMP/next-grenade pair 0.8 px apart in landscape —
   a guaranteed wrong-button hit. */
/* Two inputs, one result. --tbFit is the screen fit (media queries below) and
   --tbUser is the player's Button size slider, written INLINE by input.js.
   They must be separate variables: an inline --tb would outrank every media
   query, so writing the default 1.0 at boot silently cancelled the phone
   sizing entirely. */
#touch{--tbFit:1;--tbUser:1;--tb:calc(var(--tbFit) * var(--tbUser))}
.tpad{
  position:absolute;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;
  gap:calc(10px * var(--tb));
  pointer-events:none;
}
/* row-reverse: the first child in the DOM lands in the corner, and a
   contextual button that appears re-packs the row instead of leaving a gap. */
.tpad-row{display:flex;flex-direction:row-reverse;align-items:flex-end;
  gap:calc(10px * var(--tb));pointer-events:none}

.tbtn{pointer-events:auto;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  background:rgba(10,16,24,.5);color:#dbe8f5;
  width:calc(68px * var(--tb));height:calc(68px * var(--tb));
  font-size:calc(1.4rem * var(--tb));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  touch-action:none;backdrop-filter:blur(3px);
  transition:transform .06s ease, background .12s ease, border-color .12s ease}
.tbtn b{font-weight:400;font-size:calc(1.3rem * var(--tb));line-height:1}
.tbtn span{font-size:calc(.54rem * var(--tb));font-weight:800;letter-spacing:.1em;color:#9fb4cc;line-height:1}
.tbtn.fire{width:calc(96px * var(--tb));height:calc(96px * var(--tb));
  font-size:calc(2rem * var(--tb));border-color:rgba(255,90,77,.65);
  background:rgba(60,16,12,.55);box-shadow:0 0 22px rgba(255,90,77,.18)}
.tbtn.jump{border-color:rgba(62,224,138,.5);background:rgba(10,32,22,.5)}
.tbtn.jump span{color:#7fe6b0}
.tbtn.nade{border-color:rgba(240,178,60,.5);background:rgba(38,26,6,.5)}
.tbtn.on{background:rgba(53,230,255,.3);transform:scale(.92)}
.tbtn.jump.on{background:rgba(62,224,138,.34)}

/* Contextual buttons. Hidden until the action is actually available — reload
   only with a partial magazine and spare ammo, the crate button only next to
   a crate, melee only with someone within arm's reach. In the Full layout
   they are simply always on. */
/* Same size as every other pad button. They were smaller, which put them at
   58px once the landscape scale applied — under the 64px floor this file sets
   for anything pressed by the hand that is also aiming. */
.tbtn.ctx{display:none;font-size:calc(1.2rem * var(--tb))}
.tbtn.ctx.show,#touch.full .tbtn.ctx{display:flex}
.tbtn.ctx.use{border-color:rgba(255,196,86,.55)}

/* Menu — pause, scoreboard and "leave match", none of which touch could reach
   at all before. Top-left, well clear of both thumbs. */
.tbtn.flag{position:absolute;
  left:calc(66px + env(safe-area-inset-left));
  top:calc(10px + env(safe-area-inset-top));
  width:46px;height:46px;font-size:1.05rem;border-radius:12px;
  border-color:rgba(255,176,46,.5);background:rgba(38,26,6,.5)}
.tbtn.flag.on{background:rgba(255,176,46,.34)}
.tbtn.menu{position:absolute;
  left:calc(12px + env(safe-area-inset-left));
  top:calc(10px + env(safe-area-inset-top));
  width:46px;height:46px;font-size:1.15rem;border-radius:12px}
/* under the menu button: the vitals take the top band from 120 px on */
.tbtn.full{position:absolute;
  left:calc(12px + env(safe-area-inset-left));
  top:calc(64px + env(safe-area-inset-top));
  width:46px;height:46px;font-size:1.15rem;border-radius:12px}
.tbtn.full.on{opacity:.55}
/* iPhone: how to get full screen, since Safari will not do it for a page */
#fsHint{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));z-index:70;
  transform:translateX(-50%) translateY(-8px);max-width:min(440px,90vw);
  background:rgba(7,11,18,.92);border:1px solid var(--line);border-radius:12px;
  padding:.6rem .9rem;font-size:.86rem;line-height:1.35;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#fsHint.on{opacity:1;transform:translateX(-50%) translateY(0)}
#fsHint .fs-ico{display:inline-block;padding:0 .15em}

/* ══ overlays ══════════════════════════════════════════════════════════ */
.ov{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(5,8,14,.72);backdrop-filter:blur(4px)}
.ov.on{display:flex}
.dead-box,.pause-box{background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:2rem 2.6rem;text-align:center;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.dead-t{font-size:2.2rem;font-weight:900;color:var(--bad);letter-spacing:.1em}
.dead-by{color:var(--txt);font-weight:700}
.dead-sub{color:var(--mut);font-size:.9rem}
.pause-box h2{font-size:1.6rem;margin-bottom:.4rem}
.pause-box .btn{min-width:14em}

/* ── playtest notes ─────────────────────────────────────────────────────
   Corner-anchored inside the pause overlay: the match is still on screen
   behind it, which is the point — you write the note while you can still
   see what you are writing about. Hidden until the overlay opens. */
.fb-box{position:absolute;left:1.1rem;bottom:1.1rem;width:min(27rem,calc(100vw - 2.2rem));
  display:none;flex-direction:column;gap:.5rem;text-align:left;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:.9rem 1rem}
.fb-box.on{display:flex}
.fb-head{font-weight:800;font-size:.94rem;color:var(--txt);display:flex;
  align-items:baseline;justify-content:space-between;gap:.6rem}
.fb-hint{font-weight:600;font-size:.76rem;color:var(--dim)}
.fb-box textarea{font:inherit;font-size:.9rem;color:var(--txt);resize:vertical;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.55em .7em;
  width:100%;min-height:4.2em}
.fb-box textarea:focus{outline:none;border-color:var(--acc)}
.fb-box textarea::placeholder{color:var(--dim)}
.fb-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* .pause-box sets a 14em floor on its buttons; these are not those buttons. */
.fb-box .btn{min-width:0}
.fb-status{font-size:.78rem;color:var(--mut);flex:1;min-width:8em}
@media (max-width:640px){
  .fb-box{left:.6rem;right:.6rem;bottom:.6rem;width:auto}
}

/* ══ full screens (lobby / armory / loot) ══════════════════════════════ */
.screen{position:fixed;inset:0;z-index:60;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(circle at 50% 12%,#122036,#050810 70%)}
.screen.on{display:block}
.screen.loot{background:rgba(4,7,12,.9);z-index:80;display:none;align-items:center;justify-content:center}
.screen.loot.on{display:flex}

.mn{max-width:1120px;margin:0 auto;padding:clamp(1rem,3vw,2.4rem) clamp(1rem,3vw,2rem) 3rem;
  display:flex;flex-direction:column;gap:1.2rem}
.mn-top{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative}
.mn-sub{color:var(--mut);font-size:.92rem;letter-spacing:.1em;text-transform:uppercase}
.mn-profile{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.mn-name{background:var(--panel2);border:1px solid var(--line2);border-radius:100px;
  color:var(--txt);padding:.3em .95em;font-weight:800;width:11em;text-align:center;outline:none}
.mn-name:focus{border-color:var(--acc)}
.lvbar{display:inline-block;width:52px;height:5px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;margin-left:.35em}
.lvbar i{display:block;height:100%;background:var(--warn)}

.mn-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.mn-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.3rem;
  display:flex;flex-direction:column;gap:.4rem;text-align:left;cursor:pointer;color:var(--txt);
  font:inherit;transition:transform .12s,border-color .15s,background .15s}
.mn-card:hover{transform:translateY(-3px);border-color:var(--acc);background:var(--panel2)}
.mn-card.big{grid-column:span 2;background:linear-gradient(135deg,rgba(53,230,255,.14),var(--panel))}
.mn-card.join{cursor:default}
.mn-card.join:hover{transform:none;border-color:var(--line)}
.mn-ic{font-size:1.9rem}
.mn-t{font-size:1.18rem;font-weight:900}
.mn-d{color:var(--mut);font-size:.86rem;line-height:1.45}
.mn-joinrow{display:flex;gap:.4rem;margin-top:.4rem}
.code-in{flex:0 0 7em;background:var(--bg2);border:2px solid var(--line2);border-radius:10px;color:var(--txt);
  padding:.55em;text-align:center;font-weight:900;font-size:1.15rem;letter-spacing:.22em;text-transform:uppercase;outline:none}
.code-in:focus{border-color:var(--acc)}
.pass-in{margin-top:.4rem;width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);padding:.5em .8em;outline:none;font-size:.88rem}
.pass-in:focus{border-color:var(--acc)}
.mn-foot{color:var(--dim);font-size:.8rem;text-align:center;line-height:1.7}
.mn-hint{color:var(--dim);font-size:.82rem}
.lb-err{background:rgba(255,90,77,.14);border:1px solid rgba(255,90,77,.45);color:#ffc3bd;
  border-radius:12px;padding:.6em 1em;font-weight:700;text-align:center}

/* settings */
.set{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.set-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.set-row label{flex:0 0 12em;color:var(--mut);font-weight:700}
.set-row select,.set-row input[type=range]{flex:1;min-width:160px}
.set-row select{background:var(--bg2);border:1px solid var(--line2);color:var(--txt);border-radius:9px;padding:.45em .7em}
.set-row.danger label{color:var(--bad)}
.back{align-self:flex-start}

/* create form */
.cf{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.3rem;display:flex;flex-direction:column;gap:1rem}
.cf-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.cf-row label{flex:0 0 9.5em;color:var(--mut);font-weight:700}
.cf-row input{flex:1;min-width:180px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;
  color:var(--txt);padding:.55em .85em;outline:none}
.cf-row input:focus{border-color:var(--acc)}
.pillrow{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
.pill{font:inherit;font-size:.85rem;font-weight:700;color:var(--mut);background:var(--bg2);
  border:1px solid var(--line);border-radius:100px;padding:.4em .95em;cursor:pointer;transition:.15s}
.pill:hover{border-color:var(--line2);color:var(--txt)}
.pill.on{background:rgba(53,230,255,.16);border-color:var(--acc);color:var(--acc)}
.cf-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}

/* server browser */
.br{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.br-head,.br-row{display:grid;grid-template-columns:2.2fr 1.2fr 1.2fr .8fr 5.5em;gap:.6rem;align-items:center;padding:.55rem .7rem}
.br-head{color:var(--dim);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.br-list{display:flex;flex-direction:column;gap:.3rem;max-height:52vh;overflow-y:auto}
.br-row{background:var(--bg2);border:1px solid var(--line);border-radius:11px;font-size:.9rem}
.br-row:hover{border-color:var(--line2)}
.br-row.busy{opacity:.55}
.br-n{font-weight:800;display:flex;flex-direction:column}
.br-n i{color:var(--dim);font-size:.72rem;font-style:normal;letter-spacing:.18em}
.br-row .full{color:var(--bad)}
.br-empty{color:var(--dim);text-align:center;padding:2.5rem 1rem;line-height:1.8}
.br-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}

/* room */
.rm{display:flex;flex-direction:column;gap:1rem}
.rm-code{background:linear-gradient(135deg,rgba(53,230,255,.12),var(--panel));border:1px solid var(--line2);
  border-radius:16px;padding:1.1rem;text-align:center;display:flex;flex-direction:column;gap:.45rem;align-items:center}
.rm-code-l{color:var(--dim);font-size:.72rem;font-weight:800;letter-spacing:.2em}
.rm-code-v{font-size:clamp(2.4rem,8vw,3.6rem);font-weight:900;letter-spacing:.24em;color:var(--acc);
  text-shadow:0 0 34px rgba(53,230,255,.5)}
.rm-code-a{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.rm-cfg{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.rm-teams{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tc{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:.85rem;
  display:flex;flex-direction:column;gap:.55rem;min-height:190px}
.tc.t0{border-color:rgba(39,184,230,.4)} .tc.t1{border-color:rgba(230,72,60,.4)}
.tc-h{font-weight:900;text-align:center;display:flex;justify-content:center;gap:.5em;align-items:baseline}
.tc-h i{color:var(--dim);font-size:.78rem;font-style:normal}
.tc-list{flex:1;display:flex;flex-direction:column;gap:.3rem}
.tc-p{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  background:rgba(255,255,255,.05);border-radius:9px;padding:.42rem .7rem;font-weight:700;font-size:.9rem}
.tc-p.me{outline:1px solid var(--acc)}
.tc-p i{color:var(--dim);font-size:.74rem;font-style:normal}
.tc-p .x{background:none;border:none;color:var(--bad);cursor:pointer;font-weight:900;font-size:.9rem}
.tc-empty{color:var(--dim);font-size:.78rem;text-align:center;padding:.3rem;border:1px dashed var(--line);border-radius:8px}
.tc-a{display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap}
.rm-ffa{display:flex;flex-wrap:wrap;gap:.4rem;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.9rem}
.rm-chat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
.rm-chat-log{height:110px;overflow-y:auto;font-size:.86rem;color:var(--mut);display:flex;flex-direction:column;gap:.15rem}
.rm-chat-log b{color:var(--acc)}
.rm-chat-in{display:flex;gap:.4rem}
.rm-chat-in input{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--txt);padding:.45em .8em;outline:none}
.rm-host{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.85rem;display:flex;flex-direction:column;gap:.5rem}
.rm-host-h{color:var(--dim);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rm-wait{color:var(--mut);text-align:center;font-style:italic}
.rm-actions{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap}

/* results */
.rs{background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:1.6rem;
  display:flex;flex-direction:column;gap:.8rem;align-items:center;margin-top:2rem}
.rs-title{font-size:clamp(2.2rem,7vw,3.4rem);font-weight:900;letter-spacing:.1em}
.rs-title.win{color:var(--good);text-shadow:0 0 40px rgba(62,224,138,.4)}
.rs-title.lose{color:var(--bad)}
.rs-score{font-size:1.8rem;font-weight:900;color:var(--mut)}
.rs-earn{color:var(--warn);font-weight:800}
.rs-table{width:100%;max-width:640px;display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}
.rs-head,.rs-row{display:grid;grid-template-columns:1fr 3em 3em 4em;gap:.5rem;padding:.42rem .7rem;font-size:.9rem;border-radius:8px}
.rs-head{color:var(--dim);font-size:.74rem;font-weight:800;letter-spacing:.1em}
.rs-row.ta{background:rgba(39,184,230,.09)} .rs-row.tb{background:rgba(230,72,60,.09)}
.rs-row.me{outline:1px solid var(--acc)}
.rs-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}

/* ══ armory ════════════════════════════════════════════════════════════ */
.ar-wrap{max-width:1240px;margin:0 auto;padding:clamp(.8rem,2.5vw,1.8rem);display:flex;flex-direction:column;gap:.9rem}
.ar-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.ar-title{font-size:1.5rem;font-weight:900;letter-spacing:.12em;flex:1}
.ar-stats{display:flex;gap:.4rem;flex-wrap:wrap}
.ar-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.ar-tab{font:inherit;font-weight:800;color:var(--mut);background:var(--panel);border:1px solid var(--line);
  border-radius:100px;padding:.5em 1.2em;cursor:pointer;transition:.15s}
.ar-tab:hover{color:var(--txt);border-color:var(--line2)}
.ar-tab.on{background:rgba(53,230,255,.15);border-color:var(--acc);color:var(--acc)}
.ar-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.95fr);gap:1rem;align-items:start}
.ar-list{display:flex;flex-direction:column;gap:.9rem;max-height:74vh;overflow-y:auto;padding-right:.3rem}
.ar-group-h{color:var(--dim);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  display:flex;justify-content:space-between;margin-bottom:.4rem;padding:0 .2rem}
.it-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.45rem}
.it{position:relative;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:11px;padding:.6rem .7rem;text-align:left;cursor:pointer;font:inherit;color:var(--txt);
  display:flex;flex-direction:column;gap:.15rem;transition:.13s;overflow:hidden}
.it:hover{border-color:var(--c);transform:translateY(-2px);background:var(--panel2)}
.it.locked{opacity:.5}
.it.eq{background:rgba(62,224,138,.1)}
.it-rar{position:absolute;inset:0 auto 0 0;width:3px}
.it-name{font-weight:800;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-sub{color:var(--dim);font-size:.72rem}
.it-lock{position:absolute;top:.4rem;right:.5rem;font-size:.8rem}
.it-badge{position:absolute;top:.4rem;right:.5rem;font-size:.68rem;color:var(--mut);font-weight:800}
.it-eq{position:absolute;bottom:.35rem;right:.5rem;font-size:.6rem;color:var(--good);font-weight:900;letter-spacing:.08em}
.ar-preview{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.9rem;
  display:flex;flex-direction:column;gap:.7rem;position:sticky;top:1rem}
.ar-canvas{width:100%;height:clamp(190px,26vh,270px);display:block;border-radius:12px;
  background:radial-gradient(circle at 50% 45%,#16243a,#080d16 72%);cursor:grab}
.ar-canvas:active{cursor:grabbing}
.pv-name{font-size:1.25rem;font-weight:900}
.pv-sub{color:var(--dim);font-size:.8rem;font-weight:700}
.pv-desc{color:var(--mut);font-size:.85rem;line-height:1.5;min-height:2.4em}
.pv-stats{display:flex;flex-direction:column;gap:.3rem}
.st{display:grid;grid-template-columns:5.6em 1fr 3.4em;gap:.5rem;align-items:center;font-size:.78rem;color:var(--mut)}
.st i{display:block;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.st i b{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.st em{font-style:normal;font-weight:800;color:var(--txt);text-align:right}
.pv-locked{color:var(--dim);font-size:.86rem;text-align:center;padding:.6rem;border:1px dashed var(--line);border-radius:10px}
.ar-actions{display:flex;flex-direction:column;gap:.4rem}
.ar-note,/* ── weapon level bar + missions ─────────────────────────────────────────── */
.wl-bar{display:flex;align-items:center;gap:.6rem;margin:.7rem 0 .2rem;font-size:.8rem}
.wl-lv{font-weight:900;color:#7fe6b0;min-width:5.5em}
.wl-track{flex:1;height:7px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.wl-track>i{display:block;height:100%;background:linear-gradient(90deg,#3ee08a,#7fe6b0)}
.wl-xp{color:var(--mut);min-width:8em;text-align:right}

.ar-badge{display:inline-block;background:var(--warn);color:#1a1206;border-radius:100px;
  padding:0 .45em;font-size:.68rem;font-weight:900;font-style:normal;margin-left:.25em}

.ms-wrap{display:flex;flex-direction:column;gap:.8rem}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}
.ms{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:.7rem .85rem;
  display:flex;flex-direction:column;gap:.4rem}
.ms.done{border-color:rgba(62,224,138,.55);background:rgba(20,44,32,.55)}
.ms-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.ms-name{font-weight:900}
.ms-rw{font-size:.74rem;color:var(--warn);white-space:nowrap}
.ms-desc{font-size:.8rem;color:var(--mut);line-height:1.35}
.ms-track{display:block;height:6px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.ms-track>i{display:block;height:100%;background:linear-gradient(90deg,#ffb02e,#ffd479)}
.ms.done .ms-track>i{background:linear-gradient(90deg,#3ee08a,#7fe6b0)}
.ms-head{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:.4rem;padding-bottom:.3rem;border-bottom:1px solid var(--line2)}
.ms-h{font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem}
.ms-count{color:var(--mut);font-size:.78rem;font-weight:700}
.ms.sig{border-color:rgba(255,176,46,.45)}
.ms.sig.done{border-color:rgba(62,224,138,.55)}
.ms-foot{font-size:.74rem;color:var(--mut);font-weight:700}
.ms.done .ms-foot{color:#7fe6b0}

.ar-empty{color:var(--mut);font-size:.85rem;line-height:1.6;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.ar-picker{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}
.ar-picker label{color:var(--dim);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ar-picker select{flex:1;background:var(--bg2);border:1px solid var(--line2);color:var(--txt);border-radius:9px;padding:.45em .7em}

/* crates */
.ar-crates{display:flex;flex-direction:column;gap:1rem}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem}
.cr{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;
  padding:1rem;display:flex;flex-direction:column;gap:.45rem;align-items:center;text-align:center}
.cr-art{height:82px;display:flex;align-items:center;justify-content:center}
.cr-box{width:62px;height:52px;background:linear-gradient(160deg,var(--c),rgba(0,0,0,.55));
  border-radius:8px;box-shadow:0 0 30px -6px var(--c);position:relative;transform:rotate(-8deg)}
.cr-box::after{content:"";position:absolute;inset:auto 0 60% 0;height:10px;background:rgba(0,0,0,.28)}
.cr-name{font-weight:900;font-size:1.05rem;color:var(--c)}
.cr-desc{color:var(--mut);font-size:.8rem;line-height:1.45;min-height:2.8em}
.cr-odds{color:var(--dim);font-size:.68rem;line-height:1.5}
.cr-pity{width:100%;color:var(--dim);font-size:.68rem;display:flex;flex-direction:column;gap:.2rem}
.cr-pity i{display:block;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.cr-pity i b{display:block;height:100%;background:var(--warn)}
.ar-collection{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.coll-h{font-weight:900;letter-spacing:.1em;font-size:.82rem;color:var(--dim);text-transform:uppercase}
.coll-row{display:flex;gap:1rem;font-weight:800}
.coll-bars{display:flex;gap:.5rem;flex-wrap:wrap}
.cb{flex:1;min-width:80px;display:flex;flex-direction:column;gap:.2rem;font-size:.68rem;color:var(--dim)}
.cb i{display:block;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.1)}
.cb i b{display:block;height:100%;background:inherit;filter:brightness(1.6)}

/* ══ loot reveal ═══════════════════════════════════════════════════════ */
.lb-stage{position:relative;width:min(560px,92vw);display:flex;flex-direction:column;align-items:center;gap:1rem}
.lb-crate{position:relative;width:150px;height:120px;transition:opacity .4s,transform .4s}
.lb-crate.gone{opacity:0;transform:scale(.4)}
.lb-crate-body{position:absolute;inset:26px 0 0 0;background:linear-gradient(160deg,var(--glow),rgba(0,0,0,.7));
  border-radius:10px;box-shadow:0 0 60px -8px var(--glow)}
.lb-crate-lid{position:absolute;top:8px;left:-4px;right:-4px;height:26px;background:rgba(255,255,255,.18);
  border-radius:8px;transition:transform .5s ease}
.lb-crate.open .lb-crate-lid{transform:translateY(-70px) rotate(-22deg);opacity:0}
.lb-crate.shake{animation:crshake .55s ease}
@keyframes crshake{10%,30%,50%{transform:translateX(-5px) rotate(-2deg)}20%,40%,60%{transform:translateX(5px) rotate(2deg)}}
.lb-beam{position:absolute;left:50%;bottom:40px;width:8px;height:0;background:linear-gradient(180deg,transparent,var(--glow));
  transform:translateX(-50%);transition:height .5s}
.lb-crate.open .lb-beam{height:220px}
.lb-reel{position:relative;width:min(540px,92vw);height:74px;overflow:hidden;border-radius:12px;
  border:1px solid var(--line2);background:var(--bg2);opacity:0;transition:opacity .3s}
.lb-reel.on{opacity:1}
.lb-reel-track{display:flex;gap:6px;padding:8px;transform:translateX(0)}
.lb-tile{flex:0 0 126px;height:56px;border-radius:9px;background:var(--panel2);border-left:3px solid var(--c);
  display:flex;align-items:center;justify-content:center;padding:.3rem;text-align:center;
  font-size:.72rem;font-weight:800;color:var(--c);line-height:1.2}
.lb-reel-mark{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.lb-card{background:var(--panel);border:2px solid var(--glow);border-radius:20px;padding:1.2rem;
  width:min(420px,92vw);display:none;flex-direction:column;align-items:center;gap:.45rem;
  box-shadow:0 0 70px -12px var(--glow);animation:cardin .45s cubic-bezier(.2,1.3,.4,1)}
.lb-card.on{display:flex}
@keyframes cardin{from{transform:scale(.72);opacity:0}}
.lb-rar{font-size:.78rem;font-weight:900;letter-spacing:.26em}
.lb-canvas{width:100%;height:190px;border-radius:14px;background:radial-gradient(circle at 50% 45%,#16243a,#080d16 72%)}
.lb-kind{color:var(--dim);font-size:.68rem;font-weight:800;letter-spacing:.2em}
.lb-name{font-size:1.5rem;font-weight:900;text-align:center;line-height:1.15}
.lb-desc{color:var(--mut);font-size:.84rem;text-align:center;line-height:1.45;min-height:2.4em}
.lb-new{background:var(--good);color:#04140b;font-weight:900;border-radius:100px;padding:.2em .9em;font-size:.74rem;letter-spacing:.12em}
.lb-dupe{color:var(--warn);font-weight:800;font-size:.8rem}
.lb-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lb-confetti i{position:absolute;top:-14px;width:8px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(760deg);opacity:.15}}

/* modal */
.modal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;background:rgba(4,7,12,.8)}
.modal.on{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:1.5rem;
  width:min(380px,92vw);display:flex;flex-direction:column;gap:.7rem}
.modal-box h3{font-size:1.2rem}
.modal-box p{color:var(--mut);font-size:.88rem}
.modal-box input{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--txt);padding:.6em .9em;outline:none}
.modal-box input:focus{border-color:var(--acc)}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}

#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-16px);z-index:120;
  background:rgba(53,230,255,.16);border:1px solid var(--acc);color:#dbf7ff;border-radius:11px;
  padding:.5em 1.1em;font-weight:800;font-size:.86rem;opacity:0;transition:.22s;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width:860px){
  .ar-split{grid-template-columns:1fr}
  .ar-preview{position:static}
  .ar-list{max-height:none}
  .mn-card.big{grid-column:span 1}
  .br-head{display:none}
  .br-row{grid-template-columns:1fr auto;gap:.3rem}
  .br-row span:nth-child(2),.br-row span:nth-child(3){display:none}
  #ammo .mag{font-size:1.9rem}
  .v-bar{width:34vw}
  #killfeed{font-size:.74rem;top:52px}
}
@media (max-width:520px){
  .rm-teams{grid-template-columns:1fr}
  #topbar{font-size:1rem;padding:.3rem .9rem;gap:.8rem}
  body:not(.is-touch) #slots{display:none}
}

/* ══ AIM badge ═════════════════════════════════════════════════════════════
   Sits under the ammo counter; only visible while the sights are up.        */
#aimTag {
  position: fixed;
  right: 26px;
  bottom: 118px;
  padding: 5px 12px;
  border-radius: 999px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .14em;
  color: #0b1016;
  background: linear-gradient(180deg, #7fe3ff, #35c3ee);
  box-shadow: 0 0 18px rgba(53, 195, 238, .55);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  z-index: 40;
}
#aimTag.on { opacity: 1; transform: translateY(0); }

/* ══ Quick Play bot picker ═════════════════════════════════════════════════ */
.botpick {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.botpick input[type=range] { flex: 1; min-width: 120px; }
.botpick .btn.small {
  width: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 30px;
}
.botpick em {
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  min-width: 2ch;
  text-align: right;
  color: #7fe3ff;
}

.cf-hint,
.set-hint {
  margin: -4px 0 14px;
  padding-left: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #93a2b4;
  max-width: 62ch;
}

.set-sec {
  margin: 22px 0 10px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f8296;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 16px;
}

/* ══ touch HUD layout ══════════════════════════════════════════════════════
   The thumb controls own the bottom corners, so while they are live the vitals,
   ammo and slot chips move up and inward instead of sitting underneath them.  */
body.touch-hud #vitals {
  left: 14px;
  bottom: auto;
  top: max(92px, calc(env(safe-area-inset-top) + 92px));
}
body.touch-hud .v-bar { width: min(150px, 34vw); height: 13px; }
body.touch-hud .v-bar.sh { height: 8px; }

body.touch-hud #ammo {
  right: max(14px, env(safe-area-inset-right));
  bottom: auto;
  top: max(92px, calc(env(safe-area-inset-top) + 92px));
}
body.touch-hud #ammo .mag { font-size: 1.9rem; }
body.touch-hud #ammo .wpn { font-size: .72rem; }

/* ── weapon chips: the swap button's replacement ──────────────────────────
   Tapping a chip selects that slot directly, which is strictly better than
   the button it replaces: swapLast() could only ever ping-pong between two
   slots, so the third was unreachable on touch, and after a looted weapon
   overwrote slot 0 it could become a permanent no-op.

   Two things are required for a tap to land here at all, and neither was
   true before: #hud sets pointer-events:none for everything inside it, and
   #touch is a full-screen layer at z-index 24 — so the chips need their own
   pointer-events AND a stacking context above the pad.

   Stacked up the left edge, above the movement stick: the left thumb is
   already there, and it keeps the whole right side for the firing hand. */
body.touch-hud #slots {
  right: auto;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(142px + env(safe-area-inset-bottom));
  transform: none;
  flex-direction: column-reverse;
  gap: .3rem;
  z-index: 30;
  pointer-events: auto;
}
body.touch-hud .sl {
  min-height: 44px;              /* a real touch target, not a 22px label */
  min-width: 116px;
  padding: .3rem .6rem;
  font-size: .78rem;
  align-items: center;
  touch-action: none;
}
body.touch-hud .sl.on { border-color: var(--acc); background: rgba(53,230,255,.16); }

/* ── grenade pocket: the cycle button's replacement ───────────────────────
   Same story — it already shows the icon, name and count every frame, it just
   was not reachable: no z-index of its own, sitting under #touch. */
/* Parked directly above the grenade button it belongs to, on the right. It
   used to sit on the left edge, where it collided with the weapon chips now
   that those are a real control rather than a hidden label. Putting the pocket
   next to the button that throws from it also makes "tap it to switch type"
   something you might actually discover. */
body.touch-hud #nadeBox {
  left: auto;
  right: calc(16px + env(safe-area-inset-right));
  top: auto;
  bottom: calc(206px + env(safe-area-inset-bottom));
  z-index: 30;
  pointer-events: auto;
  min-height: 46px;
  touch-action: none;
}
body.touch-hud #nadeBox::after {
  content: "↻";
  margin-left: .35rem; opacity: .55; font-size: .8rem;
}
body.touch-hud #nadeBox.on { border-color: var(--acc); }

body.touch-hud #aimTag {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  bottom: auto;
  top: max(168px, calc(env(safe-area-inset-top) + 168px));
}
body.touch-hud #aimTag.on { transform: translateX(-50%) translateY(0); }

body.touch-hud #killfeed { top: max(178px, calc(env(safe-area-inset-top) + 178px)); font-size: .72rem; }
/* the mode tag shares the top band with the vitals — keep it clear of both */
body.touch-hud #modeTag { top: max(62px, calc(env(safe-area-inset-top) + 62px)); font-size: .7rem; }
body.touch-hud #reloadBar { top: calc(50% + 54px); }

/* Portrait is playable but cramped — nudge the player toward landscape once. */
#rotateHint {
  /* sits in the empty band under the top bar — the bottom belongs to the thumbs */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: max(214px, calc(env(safe-area-inset-top) + 214px));
  z-index: 45;
  display: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(7, 11, 18, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #cfe0f0;
  font: 600 12.5px/1.3 system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
body.is-touch #rotateHint.on { display: flex; }
@media (orientation: landscape) { #rotateHint { display: none !important; } }

/* AIM button stays lit for as long as the sights are up (toggle mode). */
.tbtn.latched {
  background: rgba(53, 195, 238, .34);
  border-color: rgba(127, 227, 255, .85);
  box-shadow: 0 0 18px rgba(53, 195, 238, .5);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   Landscape is the intended way to play, so it gets the roomy layout. Portrait
   is supported but compressed: smaller controls, tighter HUD, and the rotate
   nudge. Sizes below are floors, not preferences — a control you press while
   aiming with the same thumb needs ~64 px to stay reliable.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── landscape phone: the good case ─────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 560px) {
  #tstick { width: 118px; height: 118px; bottom: max(14px, env(safe-area-inset-bottom)); }
  #tstickKnob { width: 50px; height: 50px; }
  /* A landscape phone is only ~390 px tall, so the pad scales as a whole
     rather than each button being re-declared. Two rows of ~68 px plus gaps
     is ~156 px — under half the height, leaving the top clear to look. */
  #touch { --tbFit: .94; }

  /* Landscape is only ~390px tall and both edges now carry a real control —
     the weapon chips on the left, the grenade pocket on the right — so the
     readouts move to the very top to leave the middle band clear. */
  /* left of the menu button, which now owns the top-left corner */
  /* clear of both corner buttons: the menu at 12px and the flag at 66px */
  body.touch-hud #vitals { top: calc(8px + env(safe-area-inset-top));
    left: calc(120px + env(safe-area-inset-left)); }
  body.touch-hud #ammo { top: calc(8px + env(safe-area-inset-top)); }
  body.touch-hud #killfeed { top: calc(74px + env(safe-area-inset-top));
    font-size: .64rem; max-height: 58px; overflow: hidden; }
  body.touch-hud #aimTag { top: max(126px, calc(env(safe-area-inset-top) + 126px)); }
  body.touch-hud #modeTag { top: max(52px, calc(env(safe-area-inset-top) + 52px)); }
  #topbar { transform: scale(.86); transform-origin: top center; }
}

/* ── portrait phone: everything shrinks, nothing overlaps ────────────────── */
@media (orientation: portrait) and (max-width: 560px) {
  #tstick { width: 116px; height: 116px; left: max(12px, env(safe-area-inset-left)); }
  #tstickKnob { width: 50px; height: 50px; }
  #touch { --tbFit: .92; }

  body.touch-hud .v-bar { width: min(122px, 32vw); height: 12px; }
  body.touch-hud #ammo .mag { font-size: 1.6rem; }
  /* The weapon chips are the ONLY way to change weapon on touch now that the
     swap button is gone, so they must never be hidden — the old rule here did
     exactly that, and a second rule at the 520px breakpoint did it again. */
}

/* ── menus on a phone ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* .set-row / .cf-row flip to column here, and `flex: 0 0 12em` then applies
     to the MAIN axis — so every label became 168px TALL and the settings page
     scrolled 4700px. Measured 12 of 13 rows affected. */
  .set-row label, .cf-row label { flex: 0 0 auto; }

  .mn { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .mn-grid { grid-template-columns: 1fr; gap: .6rem; }
  .mn-card { padding: .8rem .9rem; }
  .mn-card.big { grid-column: auto; }
  .mn-logo { font-size: 2rem; }
  .cf-row { flex-direction: column; align-items: stretch; gap: .35rem; }
  .cf-row label { min-width: 0; }
  .pillrow { flex-wrap: wrap; }
  .pill { flex: 1 1 auto; min-width: 0; }
  .set-row { flex-direction: column; align-items: stretch; gap: .35rem; }
  .ar-split { grid-template-columns: 1fr; }
  .ar-preview { min-height: 220px; }
  .it-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .rs-head, .rs-row { grid-template-columns: 1fr 2.2em 2.2em 3em; font-size: .8rem; }
  .br-head, .br-row { grid-template-columns: 1.6fr 1fr 1fr .7fr auto; font-size: .78rem; }
  .rm-teams { grid-template-columns: 1fr; }
}

/* Landscape menus are short — let them scroll rather than clip. */
@media (orientation: landscape) and (max-height: 560px) {
  .screen { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mn { padding: 8px 12px; }
  .mn-logo { font-size: 1.5rem; }
  .mn-top { margin-bottom: .5rem; }
  .mn-foot { display: none; }
}

/* The one shared preview canvas, moved between hosts by src/ui/preview.js.
   Its host (.ar-canvas / .lb-canvas) owns the size; the canvas just fills it. */
.pv-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; cursor: grab; }
.pv-canvas:active { cursor: grabbing; }
.ar-canvas, .lb-canvas { overflow: hidden; }

/* Shown only if the browser drops the WebGL context. */
#glLost {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 14, .92); backdrop-filter: blur(6px);
  padding: 24px;
}
#glLost .gl-box {
  max-width: 380px; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.4rem;
}
#glLost h2 { font-size: 1.3rem; margin-bottom: .6rem; }
#glLost p { color: var(--mut); font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }

/* ── grenade pocket ─────────────────────────────────────────────────────── */
#nadeBox {
  position: absolute; left: 20px; bottom: 96px;
  display: none; align-items: center; gap: .5rem;
  background: rgba(7, 11, 18, .62); border: 1px solid var(--line);
  border-radius: 10px; padding: .3rem .6rem;
}
#nadeBox.empty { opacity: .45; }
#nadeIcon { font-size: 1.2rem; }
#nadeBox .nb-txt { display: flex; flex-direction: column; line-height: 1.15; }
#nadeName { font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
#nadeCount { font-size: .84rem; font-weight: 900; font-style: normal; }
#nadeFuse {
  width: 46px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(7, 11, 18, .8); opacity: 0; transition: opacity .1s;
}
#nadeFuse i { display: block; height: 100%; width: 0; background: #4ade80; }

/* flashbang white-out */
#blind {
  position: fixed; inset: 0; z-index: 26; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 55%, rgba(255,255,255,.82) 100%);
  opacity: 0; transition: opacity .18s linear;
}

.tbtn.nade { border-color: rgba(255, 176, 46, .55); background: rgba(48, 32, 8, .5); }
.tbtn.nade.on { background: rgba(255, 176, 46, .34); }


@media (orientation: landscape) and (max-height: 560px) {
  body.touch-hud #nadeBox { padding: .2rem .5rem; font-size: .82rem; }
}

/* score chips: two teams sit either side of the clock, three-plus line up */
.sc-half { display: flex; align-items: center; gap: .5rem; }
#topbar .sc.me { text-shadow: 0 0 10px currentColor; }
#topbar .sc-sep { color: var(--dim); font-style: normal; font-weight: 400; opacity: .5; }

/* room team columns scale to however many teams the mode has */
.rm-teams { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: .7rem; }
.tc { border-color: color-mix(in srgb, var(--tc) 40%, var(--line)); }
.tc-h { color: var(--tc); }
@media (max-width: 700px) { .rm-teams { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .rm-teams { grid-template-columns: 1fr; } }

/* interaction prompt */
#prompt {
  position: absolute; left: 50%; top: calc(50% + 60px); transform: translateX(-50%);
  display: none; align-items: center; gap: .5rem;
  background: rgba(7, 11, 18, .72); border: 1px solid var(--line);
  border-radius: 10px; padding: .32rem .7rem;
  font-size: .84rem; font-weight: 700; white-space: nowrap;
}
#promptKey {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 5px; padding: .05rem .38rem; font-size: .78rem;
}
body.touch-hud #promptKey { display: none; }

/* ── battle royale ring readout ─────────────────────────────────────────── */
#zoneBox {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%);
  display: none; align-items: center; gap: .6rem;
  background: rgba(7, 11, 18, .66); border: 1px solid var(--line);
  border-radius: 10px; padding: .28rem .8rem; white-space: nowrap;
}
#zoneBox span { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--mut); }
#zoneBox b { font-size: 1rem; font-variant-numeric: tabular-nums; }
#zoneBox i { font-size: .72rem; font-weight: 800; font-style: normal; color: var(--good); }
#zoneBox.danger {
  border-color: var(--bad);
  background: rgba(60, 12, 12, .72);
  animation: zonePulse .9s infinite;
}
@keyframes zonePulse { 50% { border-color: rgba(255, 90, 77, .35); } }
body.touch-hud #zoneBox { top: max(58px, calc(env(safe-area-inset-top) + 58px)); padding: .2rem .55rem; }
body.touch-hud #zoneBox span { font-size: .58rem; }

#deadRespawn { color: var(--mut); font-size: .86rem; margin-top: .3rem; }

/* the crate-open button lights up only when something is actually in reach */
/* The crate button used to be permanently on screen at 38% opacity and go
   solid when something was in reach. Now it is simply not there unless there
   is something to open, so the dimming would just make it hard to read. */
.tbtn.use { border-color: rgba(255, 210, 74, .5); background: rgba(44, 36, 8, .5); }
.tbtn.use.show { box-shadow: 0 0 16px rgba(255, 210, 74, .4); }
.tbtn.use.on { background: rgba(255, 210, 74, .34); }

/* ── crosshair picker ───────────────────────────────────────────────────── */
/* The label's flex-basis of 12em still applied in column mode, leaving a tall
   empty band above the tiles. Reset it for stacked rows. */
.set-row.wide { flex-direction: column; align-items: stretch; gap: .5rem; }
.set-row.wide > label { flex: 0 0 auto; }
.ch-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.ch-tile {
  position: relative; background: rgba(7, 11, 18, .6);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem .3rem .3rem; cursor: pointer; color: var(--mut);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  transition: border-color .12s, background .12s;
}
.ch-tile:hover { border-color: var(--line2); }
.ch-tile.on { border-color: var(--acc); background: rgba(53, 230, 255, .12); color: var(--txt); }
.ch-prev {
  position: relative; display: block; width: 100%; height: 42px;
  background: radial-gradient(circle at 50% 50%, #223047, #0b1018 75%);
  border-radius: 6px; overflow: hidden;
}
.ch-tile em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; }
.ch-cols { display: flex; gap: .4rem; }
.ch-col {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .2);
}
.ch-col.on { border-color: var(--acc); box-shadow: 0 0 0 2px rgba(53, 230, 255, .35); }
@media (max-width: 560px) { .ch-pick { grid-template-columns: repeat(3, 1fr); } }

/* ── key bindings ───────────────────────────────────────────────────────── */
.kb-err{display:none;margin:.2rem 0 .5rem;padding:.5rem .75rem;border-radius:8px;
  background:rgba(255,90,77,.14);border:1px solid rgba(255,90,77,.4);color:#ffb4ac;font-size:.85rem}
.kb-err.on{display:block}
.kb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.kb-group { background: rgba(7, 11, 18, .45); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; }
.kb-group-h { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: var(--dim); margin-bottom: .45rem; }
.kb-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .16rem 0; }
.kb-name { font-size: .82rem; color: var(--mut); }
.kb-keys { display: flex; gap: .3rem; }
.kb-key {
  min-width: 3.4em; padding: .18rem .5rem; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line2);
  border-radius: 6px; color: var(--txt); font-size: .74rem; font-weight: 800;
}
.kb-key:hover { border-color: var(--acc); }
.kb-key.empty { color: var(--dim); }
.kb-key.listening { background: rgba(53, 230, 255, .22); border-color: var(--acc); min-width: 7em; }
@media (max-width: 700px) { .kb-list { grid-template-columns: 1fr; } }

/* ── weapon upgrades ────────────────────────────────────────────────────── */
.mod-list { display: flex; flex-direction: column; gap: .55rem; }
.mod { background: rgba(7,11,18,.5); border: 1px solid var(--line); border-radius: 12px; padding: .65rem .8rem; }
.mod.owned { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.mod-h { display: flex; align-items: center; gap: .5rem; }
.mod-ic { font-size: 1.05rem; }
.mod-name { font-weight: 800; }
.mod-tier { margin-left: auto; font-size: .76rem; color: var(--warn); font-weight: 800; }
.mod-pips { display: flex; gap: 3px; margin: .35rem 0; }
.mod-pips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.mod-pips i.on { background: var(--warn); }
.mod-desc { color: var(--mut); font-size: .78rem; line-height: 1.45; }
.mod-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: .45rem 0 .5rem; }
.mod-next-name { font-size: .8rem; font-weight: 800; }
.mod-deltas { display: flex; flex-wrap: wrap; gap: .35rem; }
.mod-deltas em { font-style: normal; font-size: .7rem; font-weight: 800; padding: .06rem .35rem; border-radius: 5px; }
.mod-deltas em.good { color: var(--good); background: rgba(62,224,138,.13); }
.mod-deltas em.bad { color: var(--bad); background: rgba(255,90,77,.13); }
.mod-max { color: var(--good); font-size: .8rem; font-weight: 800; margin-top: .4rem; }
.st.cmp i { position: relative; }
.st.cmp i b { opacity: .3; }
.st.cmp i u { position: absolute; left: 0; top: 0; height: 100%; text-decoration: none; border-radius: inherit; }
.st.cmp i u.up { background: var(--good); }
.st.cmp i u.down { background: var(--bad); }
.st.cmp em.good { color: var(--good); }
.st.cmp em.bad { color: var(--bad); }

/* ══ lobby — the locker screen ═════════════════════════════════════════════
   Two columns: the operator standing on the left, everything you are carrying
   and everywhere you can go on the right. The point is that nothing is behind
   a menu — your gun, your plate, your grenades and your level are all on the
   first screen, the way a Fortnite locker or a CoD main menu reads.          */
.lobby{min-height:100%;display:flex;flex-direction:column;
  padding:clamp(.6rem,2vw,1.4rem) clamp(.8rem,3vw,2rem) clamp(.8rem,2vw,1.6rem);
  gap:clamp(.6rem,1.6vw,1.1rem)}

.lk-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.lk-profile{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lk-lv{display:flex;align-items:center;gap:.4rem;background:var(--panel2);
  border:1px solid var(--line2);border-radius:100px;padding:.28em .8em}
.lk-lv em{font-style:normal;font-weight:900;font-size:.8rem;letter-spacing:.06em;color:var(--acc)}
.lk-xp{display:block;width:64px;height:5px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
.lk-xp b{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#7ef0c0)}

/* The stage column is deliberately NARROWER than the loadout column. A standing
   man is a portrait shape in a panel that was very nearly square, so a third of
   the stage was empty air either side of him — and the framing is height-limited
   at any of these aspects, so taking that width away costs nothing: he is drawn
   at exactly the same size, and the loadout gets the space instead. */
.lk-body{flex:1;display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(.7rem,2vw,1.6rem);align-items:stretch;min-height:0}

/* ── the stage ───────────────────────────────────────────────────────────────
   The operator used to stand in a flat dark gradient — no floor, no walls, no
   sense of a room. A figure with nothing behind him reads as a cut-out, and the
   eye has nothing to measure his height against.

   Three layers now, all painted with gradients so none of them costs a texture
   or a draw call: a floor that recedes, a shaft of light behind him that gives
   the backlighting in the 3D scene somewhere to have come from, and a vignette
   that closes the corners down so the brightest thing on the panel is him.   */
.lk-stage{position:relative;min-height:340px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line2);
  background:
    /* the shaft, behind and slightly left of where he stands */
    radial-gradient(ellipse 42% 68% at 44% 22%,rgba(53,230,255,.13),transparent 70%),
    /* far wall, cooling toward the floor line */
    linear-gradient(180deg,#101d31 0%,#0a1220 52%,#080d17 62%,#0a0f19 100%)}

/* FLOOR. Two crossed repeating gradients under a perspective tilt: a plain grid
   would read as graph paper, but rotated back into the panel it reads as a
   surface going away from you, and that is the whole job — it tells you where
   his boots are and how far off he is standing. */
.lk-stage::before{content:"";position:absolute;left:-30%;right:-30%;bottom:0;height:46%;
  pointer-events:none;transform:perspective(340px) rotateX(64deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(120,190,235,.14) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(0deg,rgba(120,190,235,.11) 0 1px,transparent 1px 52px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000);
  mask-image:linear-gradient(180deg,transparent,#000 42%,#000)}

/* The pool of light he stands in, plus the vignette, in one pseudo-element. */
.lk-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 30% 4% at 50% 90%,rgba(53,230,255,.42),transparent 72%),
    radial-gradient(ellipse 62% 52% at 50% 108%,rgba(53,230,255,.10),transparent 70%),
    radial-gradient(ellipse 78% 74% at 50% 44%,transparent 46%,rgba(4,7,13,.72) 100%)}

.lk-stage-cv{position:absolute;inset:0;z-index:1}
.lk-stage-cv .pv-canvas{width:100%;height:100%;display:block}

/* NAMEPLATE, top-left, out of the figure's way.
   Centred at the bottom it sat across his boots — the operator's own name was
   printed on his shins. Up here it also gives the panel a corner to start
   reading from, which a centred caption never does. */
.lk-opname{position:absolute;left:1rem;top:.9rem;z-index:2;pointer-events:none;
  border-left:3px solid currentColor;padding-left:.65rem;line-height:1.15}
.lk-opname b{display:block;font-size:clamp(1.05rem,2.1vw,1.5rem);font-weight:900;letter-spacing:.03em}
.lk-opname span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}

.lk-change{position:absolute;top:.8rem;right:.8rem;z-index:2;
  background:rgba(8,13,20,.72);border:1px solid var(--line2);color:var(--txt);
  border-radius:100px;padding:.42em 1em;font-weight:800;font-size:.76rem;
  backdrop-filter:blur(4px)}
.lk-change:hover{border-color:var(--acc);color:var(--acc)}

/* ── the loadout ───────────────────────────────────────────────────────────
   `margin-top:auto` on the career strip is what actually fixes the empty third
   of the screen: everything above stays packed at its natural size and the one
   block that does not mind where it sits is pushed to the floor of the column.
   Stretching the buttons to fill instead would have given a lobby made of four
   enormous slabs.                                                            */
.lk-side{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.lk-career{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
  padding-top:.75rem;border-top:1px solid var(--line2)}
.cr-cell{text-align:center}
.cr-cell b{display:block;font-size:1.18rem;font-weight:900;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.cr-cell i{display:block;font-style:normal;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);margin-top:.1rem}
.lo-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.lo-slot{--r:#8ea6bf;background:var(--panel);border:1px solid var(--line2);
  border-left:3px solid var(--r);border-radius:12px;padding:.55rem .75rem;min-width:0}
.lo-slot i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.lo-slot b{display:block;font-size:.94rem;font-weight:800;margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-slot u{display:block;text-decoration:none;font-size:.68rem;color:var(--r);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-slot.empty{opacity:.45}
/* Damage / rate / range, scaled across the whole roster. Three hairlines rather
   than three labelled numbers: at a glance you want the SHAPE of the weapon —
   hard-hitting and slow, or fast and short — and reading three numbers is not a
   glance. The rarity colour fills them, so the card's accent does double duty. */
.ws-bars{display:flex;gap:3px;margin-top:.4rem}
.ws-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
.ws-bar i{display:block;height:100%;background:var(--r);opacity:.85;border-radius:2px}

.lk-play{margin-top:.2rem;border:0;border-radius:16px;padding:1rem 1.2rem;text-align:left;
  background:linear-gradient(135deg,var(--acc),#2ee08a);color:#04121a;
  box-shadow:0 10px 30px rgba(53,230,255,.22);transition:transform .08s ease,box-shadow .15s ease}
.lk-play:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(53,230,255,.3)}
.lk-play b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:.08em;line-height:1}
.lk-play span{display:block;font-size:.76rem;font-weight:700;opacity:.8;margin-top:.2rem}

.lk-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.lk-btn{display:flex;align-items:center;gap:.5rem;background:var(--panel);
  border:1px solid var(--line2);color:var(--txt);border-radius:12px;
  padding:.7rem .8rem;font-weight:700;font-size:.86rem;text-align:left}
.lk-btn span{font-size:1.1rem}
.lk-btn:hover{border-color:var(--acc);color:var(--acc)}

.lk-join{display:flex;align-items:center;gap:.4rem;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;padding:.5rem .65rem}
.lk-join > span{font-size:1rem}
.lk-join .code-in{width:5.5em;text-align:center;letter-spacing:.22em}
.lk-join .pass-in{flex:1;min-width:0}

/* ── narrow: the operator goes on top, the loadout underneath ───────────── */
@media (max-width:820px){
  .lk-body{grid-template-columns:1fr}
  .lk-stage{min-height:44vh}
}
/* A landscape phone is short, not narrow: keep two columns and shrink the
   stage instead, or the operator pushes PLAY off the bottom of the screen. */
@media (orientation:landscape) and (max-height:560px){
  /* A landscape phone is ~390px tall. The whole screen has to fit without
     scrolling, so everything above the fold shrinks and the wordmark drops to
     a single line — it is branding, not information. */
  .lobby{height:100%;padding:.45rem .7rem calc(.4rem + env(safe-area-inset-bottom));gap:.38rem;overflow:hidden}
  .lobby .mn-logo{font-size:1.15rem;line-height:1}
  .lobby .mn-logo span{font-size:.62rem;letter-spacing:.3em}
  .lk-top{gap:.5rem}
  .lk-profile{gap:.35rem}
  .lk-profile .chip,.lk-lv{padding:.2em .6em;font-size:.72rem}
  .lk-xp{width:44px}
  .lk-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.6rem;min-height:0}
  .lk-stage{min-height:0}
  .lk-side{gap:.32rem;min-height:0}
  .lk-opname{left:.5rem;top:.4rem;padding-left:.45rem}
  .lk-opname b{font-size:.92rem}
  .lk-opname span{font-size:.58rem}
  .lk-change{top:.4rem;right:.4rem;padding:.3em .7em;font-size:.68rem}
  /* A landscape phone has no spare rows. The career line is the one block on
     the column that nobody came here to read, so it is the one that goes. */
  .lk-career{display:none}
  .lo-grid{gap:.35rem}
  .lo-slot{padding:.32rem .55rem;border-radius:9px}
  .lo-slot i{font-size:.54rem}
  .lo-slot b{font-size:.76rem}
  .lo-slot u{font-size:.58rem}
  .lk-play{padding:.5rem .8rem;border-radius:12px}
  .lk-play b{font-size:1.1rem}
  .lk-play span{font-size:.64rem}
  .lk-row{gap:.35rem}
  .lk-btn{padding:.42rem .6rem;font-size:.72rem;border-radius:9px}
  .lk-btn span{font-size:.9rem}
  .lk-join{padding:.32rem .5rem;gap:.3rem}
  .lk-join .code-in,.lk-join .pass-in{padding:.28em .5em;font-size:.76rem}
}
@media (max-width:560px){
  .lo-grid{grid-template-columns:1fr}
  .lk-join{flex-wrap:wrap}
  .lk-join .pass-in{flex:1 1 100%;order:3}
}

/* ══ lobby over the live map (ui/menuscene.js) ═════════════════════════════
   Call of Duty's front end: the map is the background and your operator stands
   in it, so the lobby goes see-through on the left where he is, and darkens
   toward the right, where the menu is, only as much as the text needs. The
   stage keeps his name and the change button and drops its painted room. */
body.menu3d #lobbyOv{background:
  linear-gradient(180deg,rgba(4,7,13,.55) 0%,rgba(4,7,13,0) 22%,rgba(4,7,13,0) 78%,rgba(4,7,13,.6) 100%),
  linear-gradient(90deg,rgba(4,7,13,.10) 0%,rgba(4,7,13,0) 30%,rgba(4,7,13,.45) 52%,rgba(4,7,13,.78) 100%)}
body.menu3d .lk-stage{background:none;border-color:transparent}
body.menu3d .lk-stage::before,body.menu3d .lk-stage::after{display:none}
body.menu3d .lk-stage-cv{display:none}
body.menu3d .lo-slot,body.menu3d .lk-btn,body.menu3d .lk-join{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* the in-match HUD and touch controls sat hidden behind the opaque lobby;
   with the lobby see-through they must be put away explicitly */
body.menu3d #hud,body.menu3d #touch{display:none!important}
/* The backdrop every device gets at once: the menu scene baked to a picture.
   The operator stands in front of it on the turntable (transparent canvas), so
   the stage drops its painted room. body.menu3d (above) replaces all of this
   with the live scene on the high tier. */
#lobbyOv{background:
  linear-gradient(180deg,rgba(4,7,13,.55) 0%,rgba(4,7,13,0) 22%,rgba(4,7,13,0) 78%,rgba(4,7,13,.6) 100%),
  linear-gradient(90deg,rgba(4,7,13,.10) 0%,rgba(4,7,13,0) 30%,rgba(4,7,13,.45) 52%,rgba(4,7,13,.78) 100%),
  url('assets/ui/lobby_mlin.webp?v=1') 30% 50%/cover no-repeat,#050810}
#lobbyOv .lk-stage{background:none;border-color:transparent}
#lobbyOv .lk-stage::before{display:none}
#lobbyOv .lk-stage::after{background:radial-gradient(ellipse 30% 4% at 50% 90%,rgba(0,0,0,.35),transparent 72%)}

/* ══ compass (battle royale) ═════════════════════════════════════════════════
   Warzone's heading strip: the eight winds and every 15°, the ring's centre
   as a marker with its distance when you are outside the next circle. In a
   royale it takes the top bar's place (no score to show there). */
#compass{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:min(560px,62vw);height:34px;
  overflow:hidden;display:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  background:linear-gradient(180deg,rgba(7,11,18,.55),rgba(7,11,18,0))}
body.royale #compass{display:block}
body.royale #topbar{display:none}
body.royale #modeTag{display:none}      /* the ring's box sits where it would */
/* a phone's top left holds the vitals: the strip stays clear of the HP number */
body.touch-hud #compass{width:min(250px,28vw)}
body.royale #zoneBox{top:48px}
#compassStrip{position:absolute;top:0;left:0;height:100%;white-space:nowrap;will-change:transform}
#compassStrip span{position:absolute;top:4px;transform:translateX(-50%);font-size:.66rem;font-weight:800;
  color:rgba(226,232,240,.75);letter-spacing:.04em}
#compassStrip span.w{font-size:.86rem;color:#fff;top:2px}
#compassStrip span::after{content:"";position:absolute;left:50%;top:17px;width:1px;height:7px;background:rgba(226,232,240,.5)}
#compassTick{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #ffd54a}
#compassZone{position:absolute;top:2px;transform:translateX(-50%);display:none;text-align:center;
  font-size:.62rem;color:#ffd54a;font-weight:900;line-height:1}
#compassZone u{text-decoration:none;font-size:.9rem;display:block}
#compassZone em{font-style:normal}

/* ══ minimap + map (maps with a plan) ════════════════════════════════════════
   North-up, round you, top left; M or a tap opens the whole map. */
#minimap{position:absolute;top:12px;left:12px;width:150px;height:150px;display:none;border-radius:8px;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 2px 12px rgba(0,0,0,.45);background:#0d1a22;
  pointer-events:auto;cursor:pointer}
body.hasplan #minimap{display:block}
body.touch-hud #minimap{width:112px;height:112px;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left))}
#bigMap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;
  background:rgba(4,8,12,.72);pointer-events:auto;z-index:30}
#bigMap.on{display:flex}
#bigMapCv{width:min(86vh,92vw);height:min(86vh,92vw);border-radius:10px;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 6px 40px rgba(0,0,0,.6)}
/* the UAV you carry (U to use), under the minimap; blue while it is up */
#uavBtn{position:absolute;top:170px;left:12px;display:none;align-items:center;gap:.4rem;padding:.25rem .6rem;
  border-radius:6px;background:rgba(7,11,18,.62);border:1px solid rgba(96,165,250,.55);color:#bfdbfe;
  font-size:.72rem;font-weight:900;letter-spacing:.1em;pointer-events:auto;cursor:pointer}
#uavBtn em{font-style:normal;color:#fff;letter-spacing:0}
#uavBtn.up{background:rgba(37,99,235,.55);color:#fff;box-shadow:0 0 14px rgba(96,165,250,.6)}
body.touch-hud #uavBtn{top:calc(max(10px,env(safe-area-inset-top)) + 120px);left:max(10px,env(safe-area-inset-left));padding:.45rem .8rem}
#bigMap p{margin:.5rem 0 0;font-size:.75rem;color:rgba(226,232,240,.7);font-weight:700;letter-spacing:.08em}