/* ============================================================================
   STICKFIRE interface — "IGNITION" design pass.

   Everything outside the arena lives here: the lobby, the deploy briefing,
   settings, account, ranking, private rooms, dailies, the shop, the pause
   sheet, results and confirmations.

   THE GAME IS LANDSCAPE NOW, EVERYWHERE. The menu is built for a phone held
   sideways (568x320 is the floor, tablets the ceiling) and the whole screen
   must always fit with no scrolling — hunting for PLAY below the fold is the
   worst thing a game menu can do. Portrait gets the rotate prompt (touch) or
   a plain stacked fallback (a narrow desktop window).

   The visual language: carbon steel panels with hairline edges, one signature
   chamfer (a 45deg corner cut) on anything you press to commit, the wordmark's
   fire ramp reserved for the two things that matter (PLAY and money), electric
   cyan as the second voice. Numbers are mono. Labels are tracked-out caps.
   Every animation is transform/opacity only — this page shares a phone with a
   running game loop.
   ========================================================================== */

:root{
  --f1:#ff6a1f;                 /* fire base   */
  --f2:#ffb32e;                 /* fire mid    */
  --f3:#ffe45c;                 /* fire tip    */
  --fireGrad:linear-gradient(100deg,#ff6a1f 0%,#ffb32e 55%,#ffe45c 100%);
  --fireInk:#2b1300;            /* text on fire */
  --cy2:#3fd9ff;                /* electric cyan */
  --gold:#ffc555;
  --card:linear-gradient(172deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  --cardEdge:rgba(140,172,255,.16);
  --panelG:linear-gradient(178deg,rgba(16,24,45,.96),rgba(8,12,24,.98));
  /* the signature cut: top-left and bottom-right corners sliced off */
  --cut:10px;
  --chamfer:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}

/* ---------------------------------------------------------------- veils --- */
.veil{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
          calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background:rgba(4,7,15,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);overflow:hidden}

/* THE ONE BACKDROP. The boot loader, the lobby and the deploy briefing all
   stand on this exact composition — ember field top-left, cold counterlight
   right, ember underglow, carbon vignette — so a cold start reads as one
   continuous scene instead of three rooms. Change it in all three places or
   the seams show. */
#menu{background:
  radial-gradient(70% 90% at 12% 8%,rgba(255,106,31,.16),transparent 60%),
  radial-gradient(60% 80% at 90% 20%,rgba(63,169,255,.10),transparent 60%),
  radial-gradient(90% 60% at 50% 108%,rgba(255,106,31,.12),transparent 62%),
  radial-gradient(120% 100% at 50% 30%,#0d1322 0%,#070b15 55%,#04060c 100%);
  padding-top:calc(4px + env(safe-area-inset-top));
  padding-bottom:calc(4px + env(safe-area-inset-bottom))}

/* Ambient set dressing behind the lobby. Pure decoration, zero layout, and
   every moving part animates TRANSFORM ONLY — animating a gradient means
   repainting a full-screen layer every frame, which a phone feels immediately.
   Colour fields, a perspective deck, rising embers, and a vignette to hold the
   eye where the buttons are. All off for reduced motion. */
.menuFx{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* The animated scene (js/ui/menubg.js) sits between the colour fields and the
   set dressing: the auras light it, the embers and vignette sit over it. screen blending keeps it as light ADDED to the backdrop rather than a
   grey card laid on top, which is what a plain canvas would look like against
   those gradients. */
.bgfx{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;mix-blend-mode:screen;opacity:.9}

.menuFx .aur{position:absolute;border-radius:50%;filter:blur(58px);opacity:.5;
  will-change:transform}
.menuFx .a1{left:-16%;top:-24%;width:58vw;height:60vh;
  background:radial-gradient(circle,rgba(255,106,31,.45),transparent 68%);
  animation:aurA 19s ease-in-out infinite alternate}
.menuFx .a2{right:-14%;top:-6%;width:50vw;height:62vh;
  background:radial-gradient(circle,rgba(63,150,255,.30),transparent 70%);
  animation:aurB 23s ease-in-out infinite alternate}
.menuFx .a3{left:30%;bottom:-30%;width:54vw;height:50vh;opacity:.38;
  background:radial-gradient(circle,rgba(255,80,150,.24),transparent 70%);
  animation:aurC 27s ease-in-out infinite alternate}
@keyframes aurA{from{transform:translate3d(0,0,0) scale(1)}
                to{transform:translate3d(7vw,5vh,0) scale(1.16)}}
@keyframes aurB{from{transform:translate3d(0,0,0) scale(1.1)}
                to{transform:translate3d(-6vw,7vh,0) scale(.94)}}
@keyframes aurC{from{transform:translate3d(0,0,0) scale(.95)}
                to{transform:translate3d(-8vw,-4vh,0) scale(1.2)}}

/* The two drifting light shafts that used to live here are GONE (2026-08-18:
   "there is a layer of moving big blocks... big yellowish and there is 2 of
   them"). Tilted 18vw and 10vw slabs of warm gradient read as light on an empty
   backdrop, but the moment there was an animated scene behind them they read as
   exactly what they geometrically are — two rectangles sliding about. The
   backdrop gets its light from the scene now. */

/* a floor grid in perspective — the one cue that says "arena" rather than
   "menu", and it costs a single static gradient */
.menuFx .grid{position:absolute;left:-25%;right:-25%;bottom:-2%;height:44%;
  background:
    repeating-linear-gradient(90deg,rgba(140,180,255,.10) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(140,180,255,.09) 0 1px,transparent 1px 46px);
  transform:perspective(340px) rotateX(66deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 42%,#000 78%,transparent);
  opacity:.5}
.menuFx .floor{position:absolute;left:50%;bottom:-12%;width:120%;height:40%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(255,106,31,.20),transparent 66%)}

/* embers off the floor. Six dots, all compositor: rise + fade on a loop. */
.menuFx .emb{position:absolute;bottom:-3%;width:5px;height:5px;border-radius:50%;
  background:var(--f2);box-shadow:0 0 8px 2px rgba(255,150,50,.55);opacity:0;
  will-change:transform;animation:embRise 9s linear infinite}
.menuFx .m1{left:12%;animation-duration:11s;animation-delay:0s}
.menuFx .m2{left:28%;animation-duration:14s;animation-delay:3s;width:4px;height:4px}
.menuFx .m3{left:47%;animation-duration:10s;animation-delay:6s}
.menuFx .m4{left:63%;animation-duration:15s;animation-delay:1.5s;width:3px;height:3px;background:var(--f3)}
.menuFx .m5{left:78%;animation-duration:12s;animation-delay:4.5s}
.menuFx .m6{left:90%;animation-duration:16s;animation-delay:8s;width:4px;height:4px}
@keyframes embRise{
  0%{transform:translate3d(0,0,0);opacity:0}
  8%{opacity:.8}
  60%{opacity:.5}
  100%{transform:translate3d(3vw,-72vh,0);opacity:0}}

/* holds the eye in the middle, where the buttons are */
.menuFx .vig{position:absolute;inset:0;
  background:radial-gradient(115% 95% at 50% 46%,transparent 42%,rgba(2,4,10,.62) 100%)}

@media (prefers-reduced-motion:reduce){
  .menuFx .aur{animation:none}
  .menuFx .emb{display:none}
}
/* A blurred full-screen layer is the most expensive thing on this page, and a
   short landscape phone has the least to spend — shed the extras there. */
@media (max-height:420px){
  .menuFx .a3,.menuFx .emb{display:none}
  .menuFx .aur{filter:blur(42px);opacity:.42}
  .menuFx .grid{opacity:.35}
}

/* -------------------------------------------------------------- the app --- */
.app{position:relative;width:min(1200px,100%);height:100%;max-height:640px;
  display:flex;flex-direction:column;gap:clamp(4px,1.4vh,12px);
  padding:clamp(2px,.8vh,10px) clamp(6px,1.6vw,20px);overflow:hidden}

/* ---------------------------------------------------------------- icons --- */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:14px;height:14px}
.ic.lg{width:22px;height:22px}
#i-play,.play .ic{fill:currentColor;stroke:none}

/* -------------------------------------------------------------- top bar --- */
.topbar{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  min-height:clamp(36px,10vh,52px)}
.brand{display:flex;align-items:center;margin-right:auto;line-height:0}
.brand img{height:clamp(30px,9vh,52px);width:auto;
  filter:drop-shadow(0 4px 22px rgba(255,110,35,.4))}

.topActions{display:flex;align-items:center;gap:clamp(6px,.9vw,10px)}

.pill,.iconBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:9px;cursor:pointer;font-family:inherit;font-weight:700;color:var(--dim);
  background:var(--card);border:1px solid var(--cardEdge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px -6px rgba(0,0,0,.7);
  transition:transform .1s,border-color .14s,background .14s,color .14s;
  -webkit-tap-highlight-color:transparent}
.iconBtn{width:clamp(36px,9.5vh,46px);height:clamp(36px,9.5vh,46px);padding:0}
.pill{height:clamp(36px,9.5vh,46px);padding:0 clamp(10px,1.5vw,16px);font-size:13px;letter-spacing:.05em}
.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pill:active,.iconBtn:active{transform:scale(.94);border-color:rgba(255,160,60,.6);color:var(--ink);
  background:linear-gradient(175deg,rgba(255,150,60,.18),rgba(255,150,60,.05))}

/* coins read as currency: gold chip, mono digits */
.pill.coins{gap:6px;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:var(--gold);border-color:rgba(255,197,85,.38);
  background:linear-gradient(165deg,rgba(255,190,70,.16),rgba(255,190,70,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px -6px rgba(255,180,60,.45)}
.pill.coins .ic{color:var(--gold)}
#coinN{color:var(--gold)}

/* ---------------------------------------------------------------- lobby ---
   Three columns: WHO (identity/services) · WHAT (the mode) · GO (PLAY).
   The rack below is the loadout and is never what gets cut. */
.lobby{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;
  gap:clamp(10px,2.2vw,26px)}

/* section labels — one voice for "select mode", "loadout" and friends */
.stageTag,.rackTag{display:flex;align-items:center;gap:8px;
  font-size:clamp(8px,2vh,9.5px);letter-spacing:.4em;font-weight:700;color:var(--dim);
  text-transform:uppercase;white-space:nowrap}
.stageTag::before,.rackTag::before{content:'';width:14px;height:2px;flex:none;
  background:var(--fireGrad);box-shadow:0 0 8px rgba(255,150,50,.7)}

/* ---- left column: who you are ---- */
.side{flex:0 0 clamp(168px,23vw,250px);display:flex;flex-direction:column;
  gap:clamp(4px,1.2vh,9px);min-height:0;justify-content:center}

.playerCard{position:relative;display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:clamp(6px,1.6vh,12px) 11px;border-radius:10px;cursor:pointer;
  background:var(--card);border:1px solid var(--cardEdge);color:var(--ink);
  font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px -12px rgba(0,0,0,.8);
  transition:transform .1s,border-color .14s;-webkit-tap-highlight-color:transparent}
/* corner bracket, the one flourish identity gets */
.playerCard::before{content:'';position:absolute;left:-1px;top:-1px;width:14px;height:14px;
  border-left:2px solid var(--f2);border-top:2px solid var(--f2);border-radius:10px 0 0 0;
  opacity:.8;pointer-events:none}
.playerCard:active{transform:scale(.97);border-color:rgba(255,160,60,.55)}
.ava{width:clamp(32px,8.5vh,44px);height:clamp(32px,8.5vh,44px);flex:none;border-radius:9px;
  display:grid;place-items:center;color:#ffcf7a;
  background:linear-gradient(160deg,rgba(255,140,55,.28),rgba(255,140,55,.05));
  border:1px solid rgba(255,160,70,.45);
  box-shadow:inset 0 0 14px rgba(255,130,45,.18)}
.ava .ic{width:55%;height:55%}
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.who b{font-size:clamp(12px,3vh,15px);font-weight:800;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{font-size:8px;letter-spacing:.24em;font-weight:700;color:var(--dim)}
.pstats{flex:none;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.pstats span{display:inline-flex;align-items:center;gap:4px;color:var(--dim)}
.pstats .ic{width:11px;height:11px;opacity:.8}
.pstats b{font-family:'JetBrains Mono',monospace;font-size:clamp(11px,2.5vh,13px);color:var(--ink)}

/* missions + clan, sharing one row — daily gets the wider half for its badge */
.chipRow{display:flex;gap:5px}
.chipRow .missionBtn{flex:1;min-width:0}
.chipRow .missionBtn:first-child{flex:1.3}

.missionBtn{display:flex;align-items:center;gap:5px;width:100%;
  padding:clamp(6px,1.6vh,9px) 8px;
  border-radius:9px;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:8.5px;letter-spacing:.09em;color:var(--dim);text-align:left;
  background:var(--card);border:1px solid var(--cardEdge);
  transition:transform .1s,border-color .14s,color .14s;-webkit-tap-highlight-color:transparent}
.missionBtn:active{transform:scale(.97);border-color:rgba(255,160,60,.55);color:var(--ink)}
.missionBtn .ic{color:var(--f2);opacity:.85;flex:none}
.missionBtn span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.missionBtn b{font-family:'JetBrains Mono',monospace;font-size:10px;min-width:22px;
  padding:2px 5px;border-radius:6px;text-align:center;
  background:rgba(255,255,255,.06);color:var(--dim)}
.missionBtn b.gold{background:var(--fireGrad);color:var(--fireInk);
  box-shadow:0 0 12px -2px rgba(255,150,54,.7);animation:missionPulse 1.6s ease-in-out infinite}
@keyframes missionPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.missionBtn b.gold{animation:none}}

/* GET COINS — the only other filled, moving control besides PLAY.
   Transform/opacity only: the bloom and the sweep both run on the compositor. */
.getCoins{position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:clamp(7px,2vh,11px) 12px;cursor:pointer;overflow:hidden;
  border:1px solid rgba(255,196,74,.55);border-radius:0;
  clip-path:var(--chamfer);--cut:8px;
  background:linear-gradient(103deg,#3a2a06 0%,#6b4c09 38%,#8a6410 62%,#3a2a06 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font-family:inherit;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,transform .08s}
.getCoins:active{transform:scale(.985)}
.getCoins .ic{color:#ffd76a;width:20px;height:20px;flex:none;
  filter:drop-shadow(0 0 7px rgba(255,190,70,.6))}
.getCoins .gcTxt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  min-width:0;flex:1}
.getCoins .gcTxt b{font-size:clamp(11px,2.4vh,13px);font-weight:800;letter-spacing:.16em;
  color:#fff3d0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.getCoins .gcTxt small{font-size:9px;letter-spacing:.12em;color:rgba(255,222,150,.72);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.getCoins .gcArrow{width:13px;height:13px;color:rgba(255,214,130,.85);flex:none}
.getCoins .gcGlow{position:absolute;left:-10%;top:-60%;width:52%;height:220%;
  background:radial-gradient(closest-side,rgba(255,190,80,.55),transparent 70%);
  filter:blur(14px);pointer-events:none;
  animation:gcBreathe 3.6s ease-in-out infinite alternate}
@keyframes gcBreathe{from{transform:translate3d(0,0,0) scale(.9);opacity:.5}
                     to{transform:translate3d(24%,0,0) scale(1.15);opacity:.85}}
.getCoins::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.30) 50%,transparent 60%);
  transform:translateX(-130%);animation:coinSweep 5s ease-in-out infinite}
@keyframes coinSweep{0%,64%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){
  .getCoins::after{animation:none;opacity:0}
  .getCoins .gcGlow{animation:none}
}
@media (max-height:400px){
  .getCoins{gap:8px}
  .getCoins .ic{width:16px;height:16px}
  .getCoins .gcTxt small{display:none}
}

/* Connection chip — EXCEPTION ONLY. Hidden while everything is fine; while
   connecting or offline it appears and is the tap-to-retry surface. */
.netline.hide{display:none}
.netline{position:relative;padding:7px 10px 7px 25px;border-radius:9px;
  font-size:9.5px;letter-spacing:.09em;font-weight:700;color:var(--dim);
  background:rgba(92,255,165,.05);border:1px solid rgba(92,255,165,.2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.netline::before{content:'';position:absolute;left:10px;top:50%;margin-top:-3.5px;
  width:7px;height:7px;border-radius:50%;background:var(--grn);
  box-shadow:0 0 9px var(--grn);animation:netPulse 2.2s ease-in-out infinite}
.netline b{color:var(--grn)} .netline i{font-style:normal;color:var(--gold)}
.netline.off{background:rgba(255,90,114,.05);border-color:rgba(255,90,114,.22)}
.netline.off::before{background:var(--red);box-shadow:0 0 9px var(--red)}
.netline.off b{color:var(--red)}
@keyframes netPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.netline::before{animation:none}}

/* ---- centre column: the mode, three rows, one lit ---- */
.stage{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(5px,1.4vh,10px)}

.modes,.modes.three{display:flex;flex-direction:column;gap:clamp(4px,1.2vh,9px);width:100%}
.mode{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center;text-align:left;cursor:pointer;overflow:hidden;
  padding:clamp(6px,1.8vh,12px) clamp(12px,1.6vw,18px);border-radius:10px;
  background:var(--card);border:1px solid var(--cardEdge);color:var(--dim);
  font-family:inherit;-webkit-tap-highlight-color:transparent;
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s,color .15s}
.mode:active{transform:scale(.98)}
.mode .ic{grid-row:1/3;width:clamp(17px,5vh,24px);height:clamp(17px,5vh,24px);opacity:.7;
  transition:opacity .15s,color .15s}
.mode b{font-size:clamp(12px,3.4vh,16px);font-weight:800;letter-spacing:.1em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.mode span{font-size:clamp(8.5px,2vh,10px);letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the lit row: mode-coloured edge, tint, and a status lamp on the right */
.mode::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--mc,var(--f2));opacity:0;transition:opacity .15s;
  box-shadow:0 0 10px var(--mc,var(--f2))}
.mode::after{content:'';position:absolute;right:12px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;border:1px solid var(--cardEdge);
  transition:background .15s,box-shadow .15s,border-color .15s}
.mode.on{border-color:color-mix(in srgb,var(--mc,#ffb32e) 65%,transparent);
  color:color-mix(in srgb,var(--mc,#ffb32e) 70%,var(--dim));
  background:linear-gradient(100deg,color-mix(in srgb,var(--mc,#ffb32e) 14%,transparent),
             color-mix(in srgb,var(--mc,#ffb32e) 3%,transparent) 70%);
  box-shadow:0 10px 28px -12px color-mix(in srgb,var(--mc,#ffb32e) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateX(3px)}
.mode.on:active{transform:translateX(3px) scale(.98)}
.mode.on::before{opacity:1}
.mode.on::after{background:var(--mc,var(--f2));border-color:transparent;
  box-shadow:0 0 9px var(--mc,var(--f2))}
.mode.on b{color:#fff}
.mode.on .ic{opacity:1;color:var(--mc,var(--f2))}

/* ---- right column: GO ---- */
.launch{flex:0 0 clamp(150px,23vw,250px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(6px,1.6vh,11px);min-height:0}

/* THE button. Not a solid slab any more: a dark chamfered plate inside a thin
   fire frame, PLAY set in gradient type, and the game's own stick figure at a
   full sprint beside it. The frame is the button's background showing through
   a 2px reveal around an inner panel — a clip-path corner cut eats a normal
   border, and this way the frame follows the cut exactly. */
.play{position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vw,16px);border:none;cursor:pointer;overflow:hidden;
  flex:0 0 auto;width:100%;min-height:56px;height:clamp(64px,22vh,120px);
  padding:8px 14px;--cut:clamp(9px,2.2vh,14px);clip-path:var(--chamfer);
  background:linear-gradient(120deg,#ff6a1f,#ffb32e 55%,#ffe45c);
  color:#ffce6b;
  font-family:inherit;font-weight:800;font-size:clamp(22px,7.5vh,38px);letter-spacing:.18em;
  transition:transform .08s,filter .15s;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 10px 26px rgba(255,120,40,.38))}
/* the inner plate: near-black with an ember floor glow */
.play::before{content:'';position:absolute;inset:2px;clip-path:var(--chamfer);
  background:linear-gradient(115deg,#1d130c 0%,#120d0c 50%,#1a110a 100%);
  box-shadow:inset 0 -20px 36px -14px rgba(255,120,40,.55),
             inset 0 1px 0 rgba(255,255,255,.06)}
.play .pt{position:relative;text-indent:.14em;line-height:1;
  background:var(--fireGrad);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 2px 8px rgba(255,120,40,.35))}
.play .shine{position:absolute;top:-30%;left:-25%;width:22%;height:160%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,220,160,.16),transparent);
  animation:shineSweep 3.4s cubic-bezier(.6,.1,.3,.9) infinite;pointer-events:none}
@keyframes shineSweep{0%,58%{left:-25%}100%{left:125%}}
.play:active{transform:scale(.97);filter:drop-shadow(0 5px 16px rgba(255,120,40,.55)) brightness(1.12)}
.play:disabled{opacity:.6}
.play:disabled .shine{animation:none;display:none}

/* The mascot: a stick figure in the fight, acting out whichever mode is
   selected — menu.js stamps data-mode on the button. Everything is stroke
   lines in the game's own drawing style, and every animation is transform or
   opacity: sway, recoil, muzzle flash, tracer.

   The fire cycle is one clock (0.9s) shared by the flash, the kick and the
   tracer, so the shot reads as ONE event, not three effects. */
.play .mascot{position:relative;width:clamp(34px,12vh,58px);flex:none;line-height:0}
.play .ms{width:100%;height:auto;display:none;
  filter:drop-shadow(0 0 9px rgba(255,170,60,.5))}
.play .ms path,.play .ms circle{fill:none;stroke:#ffd9a0;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.play .ms .mHead{stroke-width:2.8}
.play .ms .mGun{stroke-width:4;stroke:#fff2d9}
.play .ms .mFlash path{stroke:var(--f3);stroke-width:2.6}
.play .ms .mTracer{stroke:var(--f3);stroke-width:2.2}
.play[data-mode="ffa"] .msFfa{display:block}
.play[data-mode="team"] .msTeam{display:block}
.play[data-mode="gun"] .msGun{display:block}
.play .ms g{transform-box:view-box}

/* deathmatch: the lone gunner. Slow aim sway, then flash + kick + tracer. */
.msFfa .aimG{transform-origin:21px 18px;animation:msAim 2.7s ease-in-out infinite}
.msFfa .fig{animation:msKick .9s linear infinite}
.msFfa .mFlash{opacity:0;transform-origin:51px 17px;animation:msFlash .9s linear infinite}
.msFfa .mTracer{opacity:0;animation:msTracer .9s linear infinite}
@keyframes msAim{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes msKick{0%,86%{transform:translateX(0)}90%{transform:translateX(-1.6px)}96%{transform:translateX(0)}}
@keyframes msFlash{0%,86%{opacity:0}88%,94%{opacity:1;transform:scale(1.1)}97%,100%{opacity:0}}
@keyframes msTracer{0%,88%{opacity:0;transform:translateX(0)}
  90%{opacity:1;transform:translateX(1px)}100%{opacity:0;transform:translateX(9px)}}

/* teams: blue and red, back to back, trading shots half a beat apart */
.msTeam .twA path,.msTeam .twA circle{stroke:#7fe7ff}
.msTeam .twB path,.msTeam .twB circle{stroke:#ff8fa0}
.msTeam .twA .mGun{stroke:#c9f4ff}
.msTeam .twB .mGun{stroke:#ffd3da}
.play .msTeam .fA path{stroke:#bff2ff}
.play .msTeam .fB path{stroke:#ffc9d2}
.msTeam .twA{animation:msKickL 1.8s linear infinite}
.msTeam .twB{animation:msKickR 1.8s linear infinite}
.msTeam .fA{opacity:0;animation:msFlashA 1.8s linear infinite}
.msTeam .fB{opacity:0;animation:msFlashB 1.8s linear infinite}
@keyframes msKickL{0%,4%{transform:translateX(1.4px)}10%,100%{transform:translateX(0)}}
@keyframes msKickR{0%,48%{transform:translateX(0)}50%,54%{transform:translateX(-1.4px)}60%,100%{transform:translateX(0)}}
@keyframes msFlashA{0%,5%{opacity:1}8%,100%{opacity:0}}
@keyframes msFlashB{0%,49%{opacity:0}50%,55%{opacity:1}58%,100%{opacity:0}}

/* gun game: same stance, but the weapon in hand keeps changing — rifle out,
   SMG in, a flash marking every swap-and-fire */
.msGun .fig{animation:msKick 1.6s linear infinite}
.msGun .gunA{animation:msGunA 3.2s linear infinite}
.msGun .gunB{animation:msGunB 3.2s linear infinite}
.msGun .mFlash{opacity:0;animation:msFlashSwap 1.6s linear infinite}
@keyframes msGunA{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes msGunB{0%,46%{opacity:0}50%,96%{opacity:1}100%{opacity:0}}
@keyframes msFlashSwap{0%,86%{opacity:0}88%,94%{opacity:1}97%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .play .shine{animation:none;display:none}
  .play .ms g,.play .ms .mTracer{animation:none}
  .play .ms .mFlash{animation:none;opacity:0}
  .msGun .gunB{animation:none;opacity:0}
  .msGun .gunA{animation:none;opacity:1}}

/* the quiet door under PLAY that opens the private-room sheet */
.friendline{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:clamp(6px,1.8vh,9px) 10px;width:100%;
  border-radius:9px;border:1px solid var(--cardEdge);background:rgba(255,255,255,.03);
  color:var(--dim);font-family:inherit;font-weight:700;font-size:clamp(9px,2.2vh,11px);
  letter-spacing:.13em;cursor:pointer;transition:border-color .14s,color .14s;
  -webkit-tap-highlight-color:transparent}
.friendline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friendline:active{border-color:rgba(255,160,60,.6);color:var(--ink)}

/* ----------------------------------------------------------- the rack -----
   One row that scrolls sideways: a player can own twenty weapons, and a grid
   would push PLAY off the screen the moment the third one is bought. */
.rack{flex:0 0 auto;min-width:0}
.rackHead{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;
  width:100%;margin:0 0 clamp(3px,.8vh,6px);padding:0 6px}

/* class picker: one pick, remembered, worn into the match */
.classes{display:flex;gap:6px}
.clsBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:7px 12px;border-radius:9px;
  border:1px solid var(--cardEdge);background:var(--card);color:var(--dim);
  font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.12em;cursor:pointer;
  transition:border-color .13s,color .13s,background .13s;-webkit-tap-highlight-color:transparent}
.clsBtn .ic{width:14px;height:14px}
.clsBtn:active{transform:scale(.95)}
.clsBtn.on{color:var(--cc,#5ce9ff);border-color:color-mix(in srgb,var(--cc,#5ce9ff) 65%,transparent);
  background:color-mix(in srgb,var(--cc,#5ce9ff) 10%,transparent);
  box-shadow:0 0 12px -4px color-mix(in srgb,var(--cc,#5ce9ff) 60%,transparent)}

/* what the pick does, in numbers, on the same line as the picker */
.clsInfo{flex:1 1 200px;min-width:0;display:flex;align-items:baseline;gap:4px 10px;
  flex-wrap:wrap;padding:4px 10px;border-radius:9px;
  border:1px solid var(--cardEdge);background:var(--card)}
.ciTop{display:flex;align-items:baseline;gap:8px}
.ciTop b{font-size:11.5px;letter-spacing:.14em;color:var(--cc,#5ce9ff)}
.ciCd{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim)}
.ciWhat{font-size:11px;line-height:1.35;color:var(--ink);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ciUse{font-size:10.5px;line-height:1.3;color:var(--dim);display:none}
/* a roomy screen can afford the flavour line */
@media (min-height:470px){.ciUse{display:block;flex:1 0 100%}}

.weps{display:flex;gap:clamp(6px,1vw,11px);
  width:100%;margin:0 auto;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding:4px 12px 4px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.weps::-webkit-scrollbar{display:none}

.wep{position:relative;flex:0 0 clamp(98px,15vw,128px);scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  overflow:hidden;cursor:pointer;height:clamp(52px,16vh,90px);padding:5px 7px;
  background:var(--card);border:1px solid var(--cardEdge);border-radius:9px;
  transition:border-color .13s,background .13s,transform .12s,box-shadow .13s;
  -webkit-tap-highlight-color:transparent}
/* the tracer colour rides a skewed sliver up the left edge */
.wep::before{content:'';position:absolute;left:5px;top:15%;bottom:15%;width:3px;
  transform:skewY(-14deg);border-radius:2px;background:var(--wc,var(--f2));
  opacity:.35;transition:opacity .15s,box-shadow .15s}
.wep::after{content:'';position:absolute;inset:0;border-radius:9px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--wc,#ffb32e) 16%,transparent),transparent 62%);
  opacity:0;transition:opacity .15s}
.wep:active{transform:scale(.96)}
.wep.sel{transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--wc) 75%,transparent);
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--wc) 55%,transparent),
             0 0 0 1px color-mix(in srgb,var(--wc) 30%,transparent)}
.wep.sel::before{opacity:1;box-shadow:0 0 12px var(--wc)}
.wep.sel::after{opacity:1}
.wep .art{width:100%;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.wep canvas{width:100%;height:auto;aspect-ratio:220/40;max-height:clamp(11px,3.4vh,22px);display:block}
/* text lines never give up their height to the flex squeeze — a label crushed
   to four pixels reads as a broken tile, not a compact one */
.wep .n,.wep .role,.wep .num,.wep .plus{flex:none}
.wep .n{font-size:clamp(9px,2.2vh,12px);font-weight:800;letter-spacing:.06em;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wep .role{font-size:clamp(6.5px,1.4vh,8px);letter-spacing:.14em;font-weight:700;
  color:var(--wc,var(--f2));opacity:.9;position:relative;white-space:nowrap}
.wep .num{font-family:'JetBrains Mono',monospace;font-size:clamp(7.5px,1.8vh,9px);color:var(--dim);
  letter-spacing:.02em;margin-top:1px;white-space:nowrap}
.wep .num.dim{opacity:.6}
.wep .d,.wep .s{display:none}          /* stat bars live on the weapon, not the tile */
.wep .tick{position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;z-index:2;
  background:var(--wc);color:#12180a;display:none;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;line-height:1;box-shadow:0 0 8px color-mix(in srgb,var(--wc) 70%,transparent)}
.wep.sel .tick{display:flex}
/* the door to the rest of the arsenal */
.wep.more{border-style:dashed;border-color:rgba(255,160,60,.35);background:rgba(255,140,55,.04)}
.wep.more .plus{font-size:22px;font-weight:800;line-height:1;color:var(--f2);
  text-shadow:0 0 12px rgba(255,180,60,.6)}
.wep.more .role{color:var(--dim)}
/* the second stat line is the first thing a short screen gives up, and the
   big plus shrinks so the shop-door tile's three lines still fit 52px */
@media (max-height:400px){
  .wep .num.dim{display:none}
  .wep.more .plus{font-size:16px}
}

/* ------------------------------------------------------- deploy screen ----
   The briefing. It goes up the instant PLAY is pressed and covers connecting,
   the map load and matchmaking. Landscape split: the WHERE on the left, the
   room filling up on the right, a tip along the bottom. */
.deploy{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;
  padding:calc(12px + env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom));
  /* the same backdrop as the boot loader and the lobby — see #menu */
  background:
    radial-gradient(70% 90% at 12% 8%,rgba(255,106,31,.16),transparent 60%),
    radial-gradient(60% 80% at 90% 20%,rgba(63,169,255,.10),transparent 60%),
    radial-gradient(90% 60% at 50% 108%,rgba(255,106,31,.12),transparent 62%),
    radial-gradient(120% 100% at 50% 30%,#0d1322 0%,#070b15 55%,#04060c 100%);
  opacity:1;transition:opacity .45s ease;overflow:hidden}
.deploy.gone{opacity:0;pointer-events:none}
.dpFx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* deploy beams removed with the lobby's — see above */
.dpFx .dpGrid{position:absolute;left:-20%;right:-20%;bottom:-2%;height:36%;
  background:
    repeating-linear-gradient(90deg,rgba(140,180,255,.08) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(140,180,255,.07) 0 1px,transparent 1px 52px);
  transform:perspective(320px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 45%,#000 80%,transparent);opacity:.45}
/* frame brackets that say "transmission", not "web page" */
.dpCorner{position:absolute;width:26px;height:26px;opacity:.8;pointer-events:none}
.dpCorner.tl{left:14px;top:calc(10px + env(safe-area-inset-top));
  border-left:2px solid var(--f2);border-top:2px solid var(--f2)}
.dpCorner.br{right:14px;bottom:calc(10px + env(safe-area-inset-bottom));
  border-right:2px solid var(--f2);border-bottom:2px solid var(--f2)}

.dpInner{position:relative;display:flex;align-items:center;
  gap:clamp(18px,4vw,54px);width:min(880px,94vw);
  animation:dpIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes dpIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.dpBrief{flex:1.15;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:clamp(5px,1.6vh,12px)}
.dpLogo{width:clamp(96px,16vh,150px);height:auto;
  filter:drop-shadow(0 4px 18px rgba(255,120,40,.3))}
.dpMode{font-size:clamp(9px,2.2vh,11px);letter-spacing:.42em;text-indent:.42em;font-weight:800;
  color:var(--f2);padding:5px 12px;border:1px solid rgba(255,160,60,.4);
  clip-path:var(--chamfer);--cut:6px;background:rgba(255,140,55,.08)}
.dpMap{font-size:clamp(30px,11vh,60px);font-weight:800;letter-spacing:.1em;
  line-height:1;color:var(--ink);text-shadow:0 0 34px rgba(255,140,50,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dpBlurb{font-size:clamp(10px,2.4vh,13px);letter-spacing:.08em;color:var(--dim);min-height:1.2em}
.dpKit{display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.dpKit span{font-size:clamp(8.5px,2vh,10px);letter-spacing:.14em;font-weight:700;
  color:var(--dim);padding:5px 10px;border:1px solid var(--cardEdge);border-radius:8px;
  background:var(--card)}
.dpKit b{color:var(--kc,var(--f2))}

.dpSplit{flex:none;width:1px;align-self:stretch;margin:4vh 0;
  background:linear-gradient(180deg,transparent,rgba(140,172,255,.35),transparent)}

.dpSide{flex:.85;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,2vh,16px)}
.dpLoad{width:min(240px,90%);height:4px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.dpLoad i{display:block;height:100%;width:38%;border-radius:99px;
  background:var(--fireGrad);box-shadow:0 0 10px rgba(255,170,60,.7);
  animation:dpSweep 1.1s cubic-bezier(.45,.1,.45,.9) infinite}
@keyframes dpSweep{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}

/* ---- matchmaking ------------------------------------------------------- *
   Eight seats that light up as fighters arrive, a scan bar running down the
   search window. What it never shows is WHO — a lit seat is a fighter, and
   that is the entire vocabulary.                                             */
.dpLobby{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,14px);
  width:100%;position:relative}
.dpStatus{font-size:clamp(10px,2.4vh,13px);letter-spacing:.22em;font-weight:800;
  color:var(--dim);text-align:center;transition:color .3s}
.dpStatus b{color:var(--f2)}
.dpLobby.found .dpStatus{color:#fff;text-shadow:0 0 18px rgba(92,233,255,.55)}

.dpSlots{display:grid;grid-template-columns:repeat(4,auto);
  gap:clamp(6px,1.6vh,12px) clamp(8px,1.4vw,14px);justify-content:center}
.dpSlot{width:clamp(26px,7vh,40px);height:clamp(32px,9vh,50px);border-radius:7px;
  border:1px solid rgba(132,168,255,.20);background:rgba(132,168,255,.05);
  position:relative;overflow:hidden;transition:border-color .25s,background .25s}
/* the empty seat breathes, so a half-full room does not read as broken */
.dpSlot::after{content:'';position:absolute;inset:0;border-radius:6px;
  background:radial-gradient(60% 60% at 50% 65%,rgba(132,168,255,.30),transparent 70%);
  opacity:.25;animation:dpIdle 2.4s ease-in-out infinite}
.dpSlot:nth-child(2)::after{animation-delay:.3s}
.dpSlot:nth-child(3)::after{animation-delay:.6s}
.dpSlot:nth-child(4)::after{animation-delay:.9s}
.dpSlot:nth-child(5)::after{animation-delay:1.2s}
.dpSlot:nth-child(6)::after{animation-delay:1.5s}
.dpSlot:nth-child(7)::after{animation-delay:1.8s}
.dpSlot:nth-child(8)::after{animation-delay:2.1s}
@keyframes dpIdle{0%,100%{opacity:.10}50%{opacity:.34}}

.dpSlot.on{border-color:rgba(92,233,255,.85);background:rgba(92,233,255,.16);
  box-shadow:0 0 14px rgba(92,233,255,.40),inset 0 0 10px rgba(92,233,255,.20)}
.dpSlot.on::after{opacity:0;animation:none}
/* A taken seat holds a fighter. Drawn rather than dotted: three dots in a
   column read as a colon, which is what the first attempt looked like. */
.dpSlot.on::before{content:'';position:absolute;inset:14% 18%;
  background:no-repeat center/contain url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' fill='none' \
stroke='%23eaf4ff' stroke-width='1.5' stroke-linecap='round'%3E\
%3Ccircle cx='6' cy='3' r='2.1'/%3E%3Cpath d='M6 5.4v5.4M2.6 7.6h6.8M6 10.8l-2.8 4.6M6 10.8l2.8 4.6'/%3E\
%3C/svg%3E")}
.dpSlot.pop{animation:dpPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes dpPop{0%{transform:scale(.55);filter:brightness(2.4)}
  60%{transform:scale(1.14)}100%{transform:scale(1)}}

.dpScan{width:min(260px,90%);height:3px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.07)}
.dpScan i{display:block;height:100%;border-radius:99px;width:100%;
  transform-origin:left center;transform:scaleX(var(--p,1));
  background:var(--fireGrad);box-shadow:0 0 10px rgba(255,170,60,.6);
  transition:transform .25s linear}
.dpLobby.found .dpScan{opacity:0;transition:opacity .3s}

.dpTip{position:absolute;left:20px;right:20px;bottom:calc(14px + env(safe-area-inset-bottom));
  text-align:center;font-size:clamp(9px,2.2vh,11px);letter-spacing:.1em;
  color:var(--dim2,#5d6c8f);font-weight:700}
.dpTip::before{content:'TIP — ';color:var(--f2)}
/* a portrait instant (before the device turns): stack the halves */
@media (orientation:portrait){
  .dpInner{flex-direction:column;text-align:center}
  .dpBrief{align-items:center;text-align:center}
  .dpSplit{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dpLoad i{animation:none}
  .dpSlot::after,.dpSlot.pop{animation:none}
  .dpInner{animation:none}}

/* ---------------------------------------------------- sheets (modals) -----
   One panel language for everything that opens over the lobby: steel panel,
   hairline edge, a fire accent riding the top, the title marked with a
   slanted fire bar. Landscape phones are short, so sheets prefer width. */
.sheet2{position:relative;width:min(520px,94vw);max-height:92dvh;overflow:auto;
  background:var(--panelG);
  border:1px solid rgba(140,172,255,.20);border-radius:14px;padding:16px 20px;text-align:left;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-overflow-scrolling:touch;
  animation:sheetIn .26s cubic-bezier(.2,.9,.3,1)}
/* re-runs every time the veil's display flips from none — i.e. on every open */
@keyframes sheetIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet2{animation:none}}
.sheet2::before{content:'';position:absolute;top:0;left:22px;right:22px;height:2px;
  border-radius:0 0 3px 3px;opacity:.85;
  background:linear-gradient(90deg,transparent,var(--f1) 30%,var(--f3) 70%,transparent)}
.sheet2.compact{padding:15px 18px}
/* the header band: title left, ✕ right, a hairline under both */
.sheetTop{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid rgba(140,172,255,.12)}
.sheetTop h2{flex:1}
.sheetTop+.sub2{margin-top:-4px}
.sheet2 h2{position:relative;font-size:17px;font-weight:800;letter-spacing:.16em;
  padding-left:14px}
.sheet2 h2::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;
  transform:skewY(-14deg);background:var(--fireGrad);
  box-shadow:0 0 10px rgba(255,150,50,.6)}
.sheet2 .sub2{font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:12px}
.sheet2 label{display:block;font-size:9px;letter-spacing:.18em;color:var(--dim);
  font-weight:700;margin:10px 0 4px}
.sheet2 input{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--cardEdge);
  background:rgba(255,255,255,.05);color:var(--ink);font-family:inherit;font-size:15px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.sheet2 input:focus{border-color:rgba(255,160,60,.75);box-shadow:0 0 0 3px rgba(255,140,55,.14)}
.sheet2 .err{color:var(--red);font-size:11.5px;font-weight:700;min-height:15px;margin-top:7px}
.sheet2 .ok{color:var(--grn)}
.fine{font-size:10.5px;color:var(--dim2);line-height:1.5;margin-top:10px}

/* buttons inside sheets — commit buttons wear the chamfer */
.join{width:100%;padding:12px;border:none;cursor:pointer;
  --cut:9px;clip-path:var(--chamfer);
  background:var(--fireGrad);color:var(--fireInk);font-family:inherit;
  font-weight:800;font-size:15px;letter-spacing:.15em;
  filter:drop-shadow(0 6px 18px rgba(255,130,40,.4));
  transition:transform .08s,filter .12s;-webkit-tap-highlight-color:transparent}
.join:active{transform:scale(.98);filter:drop-shadow(0 3px 10px rgba(255,130,40,.5)) brightness(1.07)}
.sheet2 .join{margin-top:12px}
.sheet2 .join+.join{margin-top:8px}
.join.ghost{background:rgba(255,255,255,.04);color:var(--dim);
  clip-path:none;border-radius:9px;border:1px solid var(--cardEdge);
  filter:none;font-size:14px}
.join.ghost.danger{color:var(--red);border-color:rgba(255,90,114,.35)}

/* account stat tiles (four, five with the tier) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:6px;margin:10px 0}
.stats div{background:var(--card);border:1px solid var(--cardEdge);border-radius:9px;
  padding:8px 4px;text-align:center}
.stats b{display:block;font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--f2)}
.stats span{font-size:8px;letter-spacing:.12em;color:var(--dim);font-weight:700}

/* ranking rows. The rank rides in its own badge, and the podium is painted:
   gold, silver, bronze on the first three rows. */
.board2{display:flex;flex-direction:column;gap:5px;margin-top:4px;max-height:52dvh;overflow:auto;
  padding-right:2px}
.board2 .r{position:relative;display:flex;gap:9px;align-items:center;padding:8px 11px;
  border-radius:9px;background:rgba(255,255,255,.028);border:1px solid rgba(140,172,255,.07);
  font-weight:700;font-size:13px}
.board2 .r.me{background:linear-gradient(100deg,rgba(255,140,55,.16),rgba(255,140,55,.03));
  border-color:rgba(255,160,60,.55);color:var(--f2)}
.board2 .r.me::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:3px;
  border-radius:2px;background:var(--fireGrad);box-shadow:0 0 8px rgba(255,150,50,.7)}
.board2 .r .pl{flex:none;width:26px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:6px;background:rgba(255,255,255,.05);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)}
.board2 .r:nth-child(1) .pl{background:rgba(255,210,63,.16);color:#ffd23f;
  box-shadow:0 0 10px -3px rgba(255,210,63,.8)}
.board2 .r:nth-child(2) .pl{background:rgba(205,216,234,.13);color:#cdd8ea}
.board2 .r:nth-child(3) .pl{background:rgba(229,160,107,.15);color:#e5a06b}
.board2 .r .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board2 .r .kv{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)}
.board2 .r.me .kv{color:var(--f2)}

/* toggles — one clean settings list, hairlines between rows */
.toggles{display:flex;flex-direction:column}
.tg{display:flex;align-items:center;gap:11px;font-size:11.5px;letter-spacing:.12em;font-weight:700;
  color:var(--dim);cursor:pointer;padding:11px 4px;-webkit-tap-highlight-color:transparent}
.tg+.tg{border-top:1px solid rgba(140,172,255,.08)}
.tg i{width:40px;height:22px;border-radius:99px;background:rgba(255,255,255,.09);position:relative;
  transition:background .18s,box-shadow .18s;flex:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.tg i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:99px;
  background:var(--dim);transition:.18s}
.tg.on{color:var(--ink)}
.tg.on i{background:rgba(255,140,55,.35);box-shadow:inset 0 1px 3px rgba(0,0,0,.25),0 0 12px -2px rgba(255,140,55,.5)}
.tg.on i::after{left:21px;background:var(--fireGrad);box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* The old results table lived here — a flex list with max-height:46dvh, which
   is 179px on a landscape phone and was silently capping the rebuilt standings
   at five rows regardless of how much room the card had. Superseded entirely by
   the .overCard block further down; deleted rather than left to fight it. */

.hide{display:none!important}

/* ---- daily missions sheet ---- */
.daily{padding:10px 11px;border-radius:9px;border:1px solid var(--cardEdge);
  background:var(--card);margin-bottom:8px}
.daily.done{opacity:.55}
/* Twenty-five rows scroll INSIDE the sheet, not with it, so the title, the
   summary and CLAIM ALL stay put instead of sliding off the top. */
#dailyRows{max-height:min(56dvh,430px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:4px;margin-right:-4px}
.dsum{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  justify-content:space-between;margin-bottom:8px;padding:7px 2px 8px;
  background:var(--panelG);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.dclaimAll{padding:6px 12px;border-radius:8px;border:0;cursor:pointer;
  font:800 10px/1 'Saira',sans-serif;letter-spacing:.12em;color:#221c00;
  background:var(--fireGrad)}
.dclaimAll[disabled]{opacity:.5;cursor:default}
.daily .dtop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.daily .dtop b{flex:1;font-size:13px;font-weight:800;letter-spacing:.04em}
.daily .drw{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--gold)}
.daily .drw .ic{color:var(--gold)}
.daily .dbar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.daily .dbar i{display:block;height:100%;border-radius:99px;background:var(--fireGrad);
  box-shadow:0 0 8px rgba(255,160,55,.65);
  transition:width .4s cubic-bezier(.3,.7,.2,1)}
.daily .dbot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--dim)}
.daily .dok{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--grn)}
.dclaim{padding:5px 14px;border:none;cursor:pointer;
  --cut:6px;clip-path:var(--chamfer);
  background:var(--fireGrad);color:var(--fireInk);font-family:inherit;font-weight:800;
  font-size:11px;letter-spacing:.12em;
  -webkit-tap-highlight-color:transparent}
.dclaim:active{transform:scale(.95)}
.dclaim:disabled{opacity:.5}

/* ---- private room sheet ---- */
.codeRow{display:flex;gap:8px;align-items:stretch;margin:4px 0 2px}
.codeBox{flex:1;display:flex;align-items:center;justify-content:center;
  padding:12px;border:1px dashed rgba(255,197,85,.5);
  --cut:9px;clip-path:var(--chamfer);
  background:rgba(255,190,70,.07);font-family:'JetBrains Mono',monospace;
  font-size:24px;font-weight:700;letter-spacing:.34em;text-indent:.34em;color:var(--gold)}
#friendJoinCode{text-align:center;font-size:18px}

/* ---- match awards on the results sheet ---- */
.awards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:5px;margin:2px 0 6px}
.award{padding:5px 5px 6px;border-radius:8px;text-align:center;min-width:0;
  border:1px solid color-mix(in srgb,var(--ac,#ffe25c) 40%,transparent);
  background:color-mix(in srgb,var(--ac,#ffe25c) 9%,transparent)}
.award small{display:block;font-size:7px;letter-spacing:.16em;font-weight:700;
  color:var(--ac,#ffe25c);margin-bottom:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.award b{display:block;font-size:11px;font-weight:800;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.award span{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);
  white-space:nowrap}

/* weekly prize tag on the board */
.board2 .r .prize{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);
  border:1px solid rgba(255,197,85,.35);border-radius:6px;padding:1px 5px;
  background:rgba(255,190,70,.08)}

/* clan tags, wherever a name appears on a board */
.ctag{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  color:var(--dim);border:1px solid var(--cardEdge);border-radius:5px;padding:1px 4px;
  flex:none;letter-spacing:.04em}
.ctag.big{font-size:13px;padding:3px 8px;color:var(--f2);
  border-color:rgba(255,160,60,.5);background:rgba(255,140,55,.08)}

/* ---- the clans pane on the ranking sheet ---- */
.clanPane{margin-bottom:10px}
.clanRow{display:flex;gap:8px;margin:4px 0 8px}
.clanRow input{flex:1;min-width:0}
#clanJoinTag,#clanNewTag{flex:0 0 84px;text-transform:uppercase;text-align:center;
  font-family:'JetBrains Mono',monospace;letter-spacing:.2em}
.clanRow .join{width:auto;padding:11px 18px;margin-top:0!important}
.clanPane .join{margin-top:6px}
.mcTop{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mcTop b{flex:1;font-size:15px;font-weight:800;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcTop .kv{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold)}
.mcMembers{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.mcMembers span{font-size:10.5px;font-weight:700;color:var(--dim);padding:3px 8px;
  border:1px solid var(--cardEdge);border-radius:7px;background:rgba(255,255,255,.03)}

/* ---- end of match ---- */
.nextIn{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:60px;padding:5px 10px;border-radius:9px;border:1px solid rgba(255,197,85,.3);
  background:rgba(255,190,70,.06);line-height:1}
.nextIn span{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;color:var(--gold)}
.nextIn small{font-size:7px;letter-spacing:.16em;color:var(--dim);font-weight:700;margin-top:3px}
.nextIn.soon span{color:var(--red)}

/* ============================================================================
   RESULTS  (rebuilt 2026-08-18 — "more compact more polished")

   The old one was a portrait stack — title, subtitle, awards, an eight-row
   table, two full-width buttons — inside the generic sheet. On the landscape
   phone this game is actually played on that is 390px of height for about
   520px of content, so it scrolled, and the two things you came here to do
   were below the fold.

   This reads ACROSS instead. Verdict and your own match down the left,
   standings down the right, the two ways out pinned under the left rail. Only
   the standings scroll, and only when there are more rows than fit.
   ========================================================================== */
.overCard{position:relative;width:min(880px,96vw);height:min(94dvh,560px);max-height:94dvh;
  display:grid;grid-template-rows:auto 1fr auto;gap:clamp(6px,1.6vh,12px);
  padding:clamp(10px,2.4vh,18px) clamp(12px,2.2vw,20px);
  background:linear-gradient(180deg,rgba(17,27,50,.97),rgba(9,14,27,.985));
  border:1px solid rgba(132,168,255,.22);border-radius:18px;overflow:hidden;
  box-shadow:0 34px 100px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
/* a wash of the verdict's colour behind the top-left corner */
.ocGlow{position:absolute;left:-10%;top:-40%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--vc,rgba(255,210,63,.16)),transparent 70%)}
.overCard::before{content:'';position:absolute;top:0;left:26px;right:26px;height:2px;
  border-radius:0 0 3px 3px;opacity:.9;
  background:linear-gradient(90deg,transparent,var(--vs,#ffd23f) 30%,var(--f2) 75%,transparent)}

/* ---- header ---- */
.ocTop{position:relative;display:flex;align-items:center;gap:14px}
.ocVerdict{flex:1;min-width:0}
.ocVerdict h2{margin:0;font-family:'Saira Condensed',sans-serif;font-weight:900;
  font-size:clamp(26px,6.4vh,44px);line-height:.95;letter-spacing:.03em;
  background:var(--vg,linear-gradient(100deg,#ffd23f,#ffe98a));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px var(--vc,rgba(255,210,63,.4)))}
.ocSub{margin-top:2px;font-size:clamp(9px,1.9vh,11.5px);letter-spacing:.13em;
  font-weight:700;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocSub b{color:var(--f2)}

/* the intermission, as a ring that empties */
.ocNext{position:relative;flex:none;width:clamp(46px,10vh,60px);height:clamp(46px,10vh,60px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.ocNext svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ocNext circle{fill:none;stroke-width:2.5}
.ocTrack{stroke:rgba(132,168,255,.14)}
.ocFill{stroke:var(--gold);stroke-linecap:round;
  stroke-dasharray:106.8;stroke-dashoffset:var(--o,0);
  transition:stroke-dashoffset .25s linear,stroke .3s}
.ocNext b{font-family:'JetBrains Mono',monospace;font-size:clamp(15px,3.4vh,20px);
  font-weight:700;color:var(--gold);line-height:1}
.ocNext small{font-size:6.5px;letter-spacing:.18em;color:var(--dim);font-weight:700;margin-top:1px}
.ocNext.soon .ocFill{stroke:var(--red)}
.ocNext.soon b{color:var(--red)}

/* ---- body: two rails ---- */
/* grid-template-rows is load-bearing. Without it the implicit row is auto-sized
   to its tallest item rather than to this container, so the standings stopped at
   their content height and scrolled at five rows on a phone with room for all
   eight — the row was short even though the card was not. */
.ocBody{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  grid-template-rows:minmax(0,1fr);gap:clamp(8px,1.6vw,14px);min-height:0}
.ocMine{display:flex;flex-direction:column;gap:clamp(5px,1.2vh,9px);min-height:0}

.ocPlace{display:flex;align-items:baseline;gap:8px;padding:clamp(6px,1.4vh,11px) 12px;
  border:1px solid var(--cardEdge);border-radius:11px;background:var(--card)}
.ocPlace b{font-family:'Saira Condensed',sans-serif;font-weight:900;
  font-size:clamp(20px,4.6vh,30px);line-height:1;color:var(--f2)}
.ocPlace small{font-size:7.5px;letter-spacing:.2em;color:var(--dim);font-weight:800}

/* your four numbers, as one strip */
.ocStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.ocStats div{padding:clamp(4px,1.1vh,8px) 4px;border-radius:9px;text-align:center;
  border:1px solid var(--cardEdge);background:var(--card);min-width:0}
.ocStats b{display:block;font-family:'JetBrains Mono',monospace;
  font-size:clamp(13px,2.9vh,19px);font-weight:700;color:var(--ink);line-height:1.1}
.ocStats small{display:block;font-size:6.5px;letter-spacing:.16em;color:var(--dim);
  font-weight:800;margin-top:2px}

/* ---- standings ---- */
.ocTable{display:flex;flex-direction:column;min-height:0;height:100%;
  border:1px solid var(--cardEdge);border-radius:12px;background:rgba(8,13,26,.55);
  overflow:hidden}
.ocHead{flex:none}
.ocHead{display:grid;grid-template-columns:26px 1fr 34px 34px;gap:8px;
  padding:6px 11px;font-size:7.5px;letter-spacing:.2em;font-weight:800;color:var(--dim2,#5d6c8f);
  border-bottom:1px solid var(--cardEdge)}
.ocHead span:nth-child(n+3){text-align:right}
/* flex:1 so the standings take every pixel the card can spare — without it the
   list sizes to its content and stops short, scrolling at five rows on a phone
   with room for all eight. */
.res{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:3px}
.res .r{display:grid;grid-template-columns:26px 1fr 34px 34px;gap:8px;align-items:center;
  padding:clamp(4px,1.05vh,8px) 8px;border-radius:8px;font-size:clamp(11px,2.2vh,13px);
  font-weight:700;letter-spacing:.04em}
.res .r+.r{margin-top:2px}
.res .r .pl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);text-align:center}
.res .r .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* kills is the headline number and sits in the K column; deaths is dim beside
   it. DOM order IS grid order here, so .sc must come before .kv in the markup. */
.res .r .kv,.res .r .sc{font-family:'JetBrains Mono',monospace;text-align:right}
.res .r .sc{font-size:clamp(12px,2.4vh,15px);color:var(--ink)}
.res .r .kv{font-size:11px;color:var(--dim)}
.res .r:nth-child(1){background:rgba(255,210,63,.10)}
.res .r:nth-child(1) .pl,.res .r:nth-child(1) .sc{color:#ffd23f}
.res .r:nth-child(2){background:rgba(205,216,234,.06)}
.res .r:nth-child(3){background:rgba(229,160,107,.07)}
/* you, wherever you finished */
.res .r.me{background:rgba(255,160,60,.15);box-shadow:inset 0 0 0 1px rgba(255,160,60,.5)}
.res .r.me .nm{color:var(--f2)}
.res .r.tb .nm{color:#5ce9ff}
.res .r.tr .nm{color:#ff5a72}
.res .r .crown{color:#ffd23f}

/* ---- the two ways out ---- */
.ocFoot{display:grid;grid-template-columns:1.6fr 1fr;gap:8px}
.ocBtn{padding:clamp(9px,2.2vh,14px) 10px;border-radius:12px;cursor:pointer;
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(12px,2.5vh,16px);letter-spacing:.18em;
  border:1px solid var(--cardEdge);background:var(--card);color:var(--dim);
  transition:transform .12s,filter .2s,color .2s}
.ocBtn:active{transform:translateY(1px)}
.ocBtn.go{border:none;color:#221c00;background:var(--fireGrad);
  box-shadow:0 8px 26px -10px rgba(255,170,60,.75)}
.ocBtn.go:hover{filter:brightness(1.07)}
.ocBtn:not(.go):hover{color:var(--ink);border-color:rgba(132,168,255,.4)}

/* A landscape phone is about 390px tall. Everything has to fit in that, so the
   rows get tighter rather than the table getting shorter — all eight fighters
   on screen at once beats five and a scrollbar. */
@media (max-height:440px){
  .ocVerdict h2{font-size:clamp(22px,6vh,30px)}
  .ocStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ocHead{padding:4px 10px}
  .res{padding:2px}
  .res .r{padding:3px 8px;font-size:11.5px}
  .res .r+.r{margin-top:1px}
  .res .r .sc{font-size:13px}
}
/* below that there is genuinely no room, and the standings matter more than
   the award cards */
@media (max-height:330px){
  .awards{display:none}
}
/* a narrow window (or portrait, which touch devices never see): one rail */
@media (max-width:620px){
  .ocBody{grid-template-columns:minmax(0,1fr)}
  .ocMine{gap:6px}
  .ocStats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* in-match menu: makes clear the world did not stop */
.sheet2 .warn{margin:-2px 0 12px;font-size:11px;letter-spacing:.09em;color:var(--red);
  text-transform:uppercase;text-align:center}

/* ---------------- shop ---------------------------------------------------
   A landscape phone is wide and short, so the sheet uses the width it has:
   a fixed rail on the left for the wallet and tabs, and the goods filling
   everything to the right of it. */
.sheet2.shop{width:96vw;max-width:1180px;height:min(94dvh,720px);max-height:94dvh;
  padding:14px 16px;display:grid;gap:14px;overflow:hidden;
  grid-template-columns:186px 1fr;grid-template-rows:auto 1fr;
  grid-template-areas:'rail head' 'rail body'}
.sheet2.shop .sheetTop{grid-area:head;align-items:center;gap:10px;margin-bottom:0}
.shopRail{grid-area:rail;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;
  overflow-y:auto;scrollbar-width:none}
.shopRail::-webkit-scrollbar{display:none}
.sheet2.shop .skins{grid-area:body}
.wallet{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;
  border:1px solid rgba(255,197,85,.4);--cut:10px;clip-path:var(--chamfer);
  background:linear-gradient(160deg,rgba(255,190,70,.18),rgba(255,190,70,.03));
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:26px;color:var(--gold);
  line-height:1;box-shadow:inset 0 0 26px rgba(255,180,60,.12)}
.wallet .ic{width:20px;height:20px;color:var(--gold)}
.earn{font-size:10.5px;letter-spacing:.09em;color:var(--dim);text-transform:uppercase;
  line-height:1.5;margin:0}

/* the sign-up nudge in the clans pane */
.gate{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:12px 10px;border:1px solid rgba(255,160,60,.4);border-radius:10px;
  background:rgba(255,140,55,.07);margin-top:auto}
.gate .ic{width:20px;height:20px;color:var(--f2)}
.gate b{font-size:12.5px;letter-spacing:.05em}
.gate span{display:block;font-size:11px;color:var(--dim);line-height:1.4;margin-top:2px}
.gate .join{padding:9px 12px;font-size:12px;width:100%;margin-top:4px}

.skins{min-height:0;overflow-y:auto;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  grid-auto-rows:max-content;align-content:start;padding-right:4px}
.skin{position:relative;border:1px solid var(--cardEdge);border-radius:10px;overflow:hidden;
  background:var(--card);cursor:pointer;transition:border-color .12s,background .12s,transform .1s}
.skin:active{transform:scale(.97)}
.skin.owned{border-color:rgba(92,255,165,.4)}
.skin.on{border-color:rgba(255,160,60,.85);background:rgba(255,140,55,.1);
  box-shadow:0 0 0 1px rgba(255,160,60,.3),0 8px 22px -10px rgba(255,130,40,.5)}
.skin .pic{aspect-ratio:1/.9;display:block;background:
  radial-gradient(ellipse at 50% 62%,rgba(120,160,255,.1),transparent 60%)}
.skin .pic canvas{width:100%;height:100%;display:block}
.skin .lbl{padding:5px 7px 7px;border-top:1px solid var(--cardEdge)}
.skin .sn{font-size:11.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.skin .sp{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gold);
  font-family:'JetBrains Mono',monospace;margin-top:2px}
.skin .sp.have{color:var(--grn)}
.skin .sp .ic{width:11px;height:11px}
.skin .tagOn,.gun .tagOn{position:absolute;top:6px;right:6px;font-size:8px;letter-spacing:.08em;
  padding:2px 6px;--cut:5px;clip-path:var(--chamfer);
  background:var(--fireGrad);color:var(--fireInk);font-weight:800}
@media (max-height:430px){
  .skins{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .skin .sn{font-size:10.5px}
}

/* shop: tabs and weapon cards */
.tabs{display:flex;flex-direction:column;gap:6px}
.tab{position:relative;font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-align:left;padding:11px 12px;border-radius:9px;border:1px solid var(--cardEdge);
  background:var(--card);color:var(--dim);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .14s,border-color .14s,color .14s}
.tab.on{background:linear-gradient(100deg,rgba(255,140,55,.18),rgba(255,140,55,.04));
  border-color:rgba(255,160,60,.7);color:var(--f2)}
.tab.on::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;
  border-radius:2px;background:var(--fireGrad);box-shadow:0 0 8px rgba(255,150,50,.7)}

.skins.gunGrid{grid-template-columns:repeat(auto-fill,minmax(144px,1fr))}
.gun{position:relative;border:1px solid var(--cardEdge);border-radius:10px;padding:8px 9px 9px;
  background:var(--card);cursor:pointer;overflow:hidden;
  transition:border-color .12s,background .12s,transform .1s}
/* every card wears its tracer colour along the top — the shelf reads as a
   spectrum of tiers before a single label is read */
.gun::before{content:'';position:absolute;top:0;left:14%;right:14%;height:2px;
  border-radius:0 0 2px 2px;background:var(--wc,var(--f2));opacity:.45;
  transition:opacity .15s}
.gun.on::before,.gun:active::before{opacity:1;box-shadow:0 0 8px var(--wc,var(--f2))}
.gun:active{transform:scale(.98)}
.gun.owned{border-color:rgba(92,255,165,.34)}
.gun.on{border-color:rgba(255,160,60,.85);background:rgba(255,140,55,.08);
  box-shadow:0 0 0 1px rgba(255,160,60,.3)}
/* name on its own line so it can never wrap into the role, role beneath it */
.gtop{display:block;padding-right:54px}
.gn{font-size:12.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gr{font-size:8.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.gart{height:26px;margin:3px 0 4px}
/* A shield is a bubble, not a silhouette — it needs a square-ish frame, and at
   the gun's 26px it was a smudge. */
.shieldCard .gart{height:62px;margin:2px 0 6px}

/* ---- coin packs ---- */
.tab.coinsTab{color:#ffd05c;border-color:rgba(255,208,92,.32)}
.coinCard .coinBig{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 0 12px}
.coinCard .coinBig .ic{width:22px;height:22px;color:#ffd05c}
.coinCard .coinBig b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:30px;font-weight:700;color:#fff;letter-spacing:.01em;
  text-shadow:0 0 20px rgba(255,208,92,.35)}
.coinCard.shut{opacity:.72}
.coinCard.shut .gbuy{cursor:default}
.shopNote{grid-column:1/-1;font-size:13px;line-height:1.55;color:#8395b5;
  background:rgba(255,255,255,.04);border:1px solid rgba(122,163,255,.18);
  border-radius:10px;padding:12px 15px}
.shopNote b{color:#e9f0ff}
.shopNote.wide{margin-bottom:2px}
.gart canvas{width:100%;height:100%;display:block}
.gstat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px 5px;margin-bottom:5px}
.gstat span{font-size:7.5px;letter-spacing:.06em;color:var(--dim);display:flex;
  flex-direction:column;line-height:1.25}
.gstat b{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink);letter-spacing:0}
.gbars{display:flex;flex-direction:column;gap:1.5px;margin-bottom:6px}
.gbars div{display:flex;align-items:center;gap:4px;font-size:7.5px;letter-spacing:.08em;color:var(--dim)}
.gbars .m{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.gbars .m i{display:block;height:100%;background:var(--wc,var(--f2))}
.gbuy{display:flex;align-items:center;justify-content:center;gap:4px;padding:5px;
  --cut:6px;clip-path:var(--chamfer);
  font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace;
  color:var(--gold);background:rgba(255,190,70,.12)}
.gbuy.have{color:var(--grn);background:rgba(92,255,165,.1)}
.gbuy .ic{width:12px;height:12px}

/* small landscape phones: the rail thins, the cards shrink, nothing wraps */
@media (max-height:430px){
  .sheet2.shop{grid-template-columns:150px 1fr;padding:11px 12px;gap:10px;height:96dvh}
  .wallet{font-size:20px;padding:10px 8px}
  .tab{padding:8px 10px;font-size:11px}
  .skins{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .skins.gunGrid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
  .gate{padding:9px 8px}
  .gate span{display:none}
}
/* ---- the shop in a portrait window (desktop resize / pre-rotate flash) ----
   no side rail: three shallow bands of chrome and the goods below.
   PORTRAIT ONLY — a 568px-wide phone held sideways must keep the rail, or the
   stacked chrome eats the whole 320px of height and the goods never appear. */
@media (max-width:620px) and (orientation:portrait){
  .sheet2.shop{width:100%;max-width:none;height:100%;max-height:100%;
    padding:12px 12px 10px;gap:9px;
    grid-template-columns:1fr;grid-template-rows:auto auto 1fr;
    grid-template-areas:'head' 'rail' 'body'}
  .sheet2.shop .sheetTop{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
  .sheet2.shop .sheetTop h2{flex:1 1 auto}
  .sheet2.shop .sheetTop .iconBtn{order:2;flex:none}
  .sheet2.shop .earn{order:3;flex:1 0 100%;margin:0;font-size:10px;line-height:1.5;
    letter-spacing:.06em}
  .shopRail{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}
  .shopRail .wallet{flex:0 0 auto;font-size:20px;padding:0 15px}
  .tabs{flex-direction:row;flex:1 1 auto;gap:7px}
  .tab{flex:1 1 0;text-align:center;padding:13px 6px;font-size:12px;letter-spacing:.12em}
  .tab.on::before{display:none}
  .gate{flex:1 0 100%;flex-direction:row;align-items:center;text-align:left;
    gap:10px;margin-top:0;padding:9px 11px}
  .gate .ic{display:block;flex:none}
  .gate b{font-size:12px;letter-spacing:.03em}
  .gate span{display:none}
  .gate .join{width:auto;flex:none;margin-top:0;padding:10px 14px;font-size:11.5px}
  .skins{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:9px}
  .skins.gunGrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
}
@media (max-width:360px) and (orientation:portrait){
  .skins{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .skins.gunGrid{grid-template-columns:1fr}
  .sheet2.shop .sheetTop h2{font-size:15px}
}

/* The share button. Prominent on purpose: handing the code to a friend is the
   whole point of a private room. */
.join.share{display:flex;align-items:center;justify-content:center;gap:9px;
  clip-path:none;border-radius:9px;filter:none;
  background:linear-gradient(150deg,rgba(92,233,255,.20),rgba(92,233,255,.06));
  border:1px solid rgba(92,233,255,.55);color:#bfefff;
  box-shadow:0 0 22px -8px rgba(92,233,255,.6)}
.join.share .ic{width:17px;height:17px}
.join.share:active{transform:scale(.98);border-color:rgba(92,233,255,.85)}
.join.share.done{background:linear-gradient(150deg,rgba(92,255,165,.22),rgba(92,255,165,.06));
  border-color:rgba(92,255,165,.6);color:#c8ffe4}

/* ---------------- telling people how it works ----------------------------
   Keys live next to the thing they explain: the class under the picker, the
   price ladder in the shop, the rank bands on the ranking sheet. */

/* the price ladder, in the shop */
.tierKey{flex:1 0 100%;padding:2px 12px 10px;border-radius:10px;
  border:1px solid var(--cardEdge);background:var(--card)}
.tkHead{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--dim);
  -webkit-tap-highlight-color:transparent}
.tkChev{font-style:normal;transition:transform .16s;color:var(--f2)}
.tierKey.shut .tkChev{transform:rotate(-90deg)}
.tierKey.shut{padding-bottom:2px}
.tierKey.shut .tkBody{display:none}
.tkRule{font-size:11px;line-height:1.55;color:var(--dim)}
.tkRows{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:9px}
.tkRow{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.05em}
.tkRow i{width:9px;height:9px;border-radius:3px;flex:none;box-shadow:0 0 7px currentColor}
.tkRow b{font-family:'JetBrains Mono',monospace;color:var(--ink)}
.tkName{color:var(--dim)}
.tkPrice{font-family:'JetBrains Mono',monospace;color:var(--gold)}
.tkLines{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--cardEdge);font-size:10.5px;color:var(--dim);line-height:1.5}
.tkLines b{color:var(--ink);letter-spacing:.08em}
/* the tier dot on a weapon card, next to its role */
.tpip{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;
  vertical-align:middle;box-shadow:0 0 6px currentColor}

/* the rank ladder, on the ranking sheet */
.rankKey{margin-bottom:10px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--cardEdge);background:var(--card)}
.rkRows{display:flex;flex-wrap:wrap;gap:5px 12px}
.rkB{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;
  color:var(--dim)}
.rkB i{width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none}
.rkB b{font-family:'JetBrains Mono',monospace;color:var(--dim);opacity:.8}
.rkB.on{color:var(--tc)}
.rkB.on i{box-shadow:0 0 8px var(--tc)}
.rkB.on b{color:var(--tc)}
.rkRule{font-size:10.5px;line-height:1.5;color:var(--dim);margin-top:8px;
  padding-top:8px;border-top:1px solid var(--cardEdge)}

/* ---------------- are you sure? ------------------------------------------
   Its own layer, above every other sheet, because it is always a question
   about the sheet underneath it. */
#confirmVeil{z-index:30}
.sheet2.ask{width:min(380px,92vw)}
.askBody{font-size:12.5px;line-height:1.55;color:var(--dim);margin:2px 0 14px}
.askCap{margin-bottom:10px}
.capRow{display:flex;align-items:center;gap:10px}
.capCode{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:21px;font-weight:700;
  letter-spacing:.34em;text-indent:.34em;color:var(--f2);
  padding:11px 14px;border:1px dashed rgba(255,160,60,.5);
  --cut:8px;clip-path:var(--chamfer);
  background:rgba(255,140,55,.08);user-select:none;-webkit-user-select:none}
.capRow input{flex:1;min-width:0;margin:0;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;letter-spacing:.2em}
.sheet2.ask .join{margin-top:8px}

/* ---------------- consent, links and the legal modal --------------------- */
.agree{display:flex;align-items:flex-start;gap:9px;margin-top:12px;cursor:pointer;
  font-size:12px;line-height:1.45;color:var(--dim)}
.agree input{appearance:none;flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--edge2);background:rgba(255,255,255,.04);cursor:pointer;position:relative}
.agree input:checked{background:var(--fireGrad);border-color:rgba(255,160,60,.9)}
.agree input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--fireInk);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.lnk{background:none;border:none;padding:0;font:inherit;color:var(--cy);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.lnk.forgot{display:block;margin-top:10px;font-size:12px;color:var(--dim)}

.sheet2.legal{width:min(760px,96vw);height:min(92dvh,660px);display:flex;flex-direction:column;
  padding:16px 18px}
/* horizontal tab sets (ranking, legal) are a segmented control: one recessed
   track, and the active tab is a solid fire chip riding in it */
.tabs.row{flex-direction:row;margin-bottom:10px;gap:4px;padding:4px;
  background:rgba(0,0,0,.28);border:1px solid rgba(140,172,255,.12);border-radius:11px}
.tabs.row .tab{flex:1 1 0;text-align:center;padding:9px 6px;border:none;background:none;
  border-radius:8px;font-size:11px;letter-spacing:.12em}
.tabs.row .tab.on{background:var(--fireGrad);color:var(--fireInk);
  box-shadow:0 4px 14px -6px rgba(255,140,45,.8)}
.tabs.row .tab.on::before{display:none}
.legalBody{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px;
  font-size:13px;line-height:1.6;color:#b9c7e4;-webkit-overflow-scrolling:touch}
.legalBody h3{font-size:15px;letter-spacing:.12em;color:var(--ink);margin-bottom:6px}
.legalBody h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--f2);
  margin:16px 0 5px}
.legalBody p{margin-bottom:8px}
.legalBody p.lead{color:var(--ink)}
.legalBody p.fine{margin-top:18px;padding-top:12px;border-top:1px solid var(--cardEdge);
  font-size:11.5px;color:var(--dim)}
.legalBody a{color:var(--cy)}
@media (max-height:430px){
  .sheet2.legal{height:96dvh;padding:12px 14px}
  .legalBody{font-size:12.5px;line-height:1.5}
}

/* ------------------------------------------------- responsive: the lobby ---
   The design is landscape; these ladders only tighten it as the screen gets
   shorter. 568x320 (iPhone SE sideways, browser chrome up) is the floor. */

@media (max-height:430px){
  .app{gap:4px}
  .topbar{min-height:34px}
  .brand img{height:clamp(28px,9.5vh,40px)}
  .iconBtn,.pill{height:36px}
  .iconBtn{width:36px}
  .side{flex-basis:clamp(160px,22vw,212px);gap:4px}
  .lobby{gap:clamp(8px,1.8vw,18px)}
  .launch{flex-basis:clamp(140px,21vw,210px)}
}

/* short landscape phones (iPhone SE sideways and friends): drop the frills,
   keep PLAY huge */
@media (max-height:360px){
  .stageTag{display:none}
  .mode span{display:none}
  .mode{grid-template-rows:auto;padding:6px 12px}
  .mode b{font-size:12px;letter-spacing:.08em}
  .mode .ic{grid-row:1;width:15px;height:15px}
  .clsBtn span{display:none}
  .clsBtn{padding:5px 9px}
  .clsInfo{padding:3px 9px}
  .ciWhat{font-size:10px}
  .rackHead{margin-bottom:2px}
  .friendline{padding:5px 8px}
  .chipRow .missionBtn:first-child span{display:none}
  .chipRow .missionBtn:first-child{flex:1}
}

/* very short (browser chrome eating a 320px-tall screen) */
@media (max-height:330px){
  .netline{display:none}
  .who small{display:none}
  .playerCard{padding:5px 9px}
  .missionBtn{padding:5px 8px}
  .rackTag{display:none}
  .wep .num.dim{display:none}
}

/* ---- portrait fallback -------------------------------------------------
   Touch devices are told to rotate (the overlay in touch.css sits over this),
   and the Android shell locks landscape outright — so this is only ever
   really seen in a narrow desktop window. Plain and scrollable, on purpose. */
@media (orientation:portrait){
  #menu{overflow-y:auto;align-items:flex-start}
  .app{height:auto;max-height:none;overflow:visible;max-width:560px;margin:0 auto}
  .lobby{flex-direction:column}
  .side,.launch{flex:0 0 auto;width:100%}
  .play{height:clamp(64px,12vh,96px);flex-direction:row;font-size:clamp(22px,6vw,30px)}
  .stage{gap:6px}
  .mode span{display:none}
  .mode{grid-template-rows:auto;padding:9px 14px}
  .mode .ic{grid-row:1}
  .weps{overflow-x:auto}
}

/* A failed purchase says why, in text a person can select and send on. The
   shop's earn line doubles as the place it is said, because that is where the
   eye already is after tapping a pack. */
.shop .earn.buyErr{color:var(--red);text-align:left;line-height:1.55;
  /* .earn uppercases, and these are IDs someone is going to copy — showing
     STICKFIRESTACK for stickfirestack would send them hunting for a bug that
     is not there. */
  text-transform:none;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.02em;
  white-space:normal;-webkit-user-select:text;user-select:text;
  padding:8px 10px;border:1px solid rgba(255,90,114,.4);border-radius:9px;
  background:rgba(255,90,114,.07);max-height:32vh;overflow:auto}
.shop .earn.buyErr b{color:#ff8fa1;display:block;margin-bottom:4px;
  font-family:'Saira Condensed',sans-serif;font-size:12px;letter-spacing:.1em}

/* ============================================================================
   THANK YOU

   Shown when a purchase completes — including one RESTORED on a later launch,
   which is why it stands on its own above everything rather than living inside
   the shop. Warm where the rest of the game is cold: this is the one moment
   that is not about the fight.
   ========================================================================== */
.thanks{position:fixed;inset:0;z-index:9200;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:radial-gradient(70% 90% at 50% 45%,rgba(30,18,4,.82),rgba(4,6,13,.95));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:thanksIn .35s ease}
.thanks.hide{display:none}
@keyframes thanksIn{from{opacity:0}to{opacity:1}}

.thanksCard{position:relative;width:min(400px,94vw);text-align:center;overflow:hidden;
  padding:clamp(18px,4.5vh,28px) clamp(18px,5vw,30px);border-radius:20px;
  background:linear-gradient(180deg,rgba(32,25,12,.97),rgba(12,10,20,.98));
  border:1px solid rgba(255,196,90,.34);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  animation:thanksPop .45s cubic-bezier(.16,1,.3,1)}
@keyframes thanksPop{from{transform:scale(.9) translateY(10px)}to{transform:none}}
/* a warm wash behind the coin, so the card has a light source */
.thanksGlow{position:absolute;left:50%;top:-30%;width:120%;height:90%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,180,60,.22),transparent 70%)}

/* The coin needs PERSPECTIVE to flip. Without it a rotateY is a horizontal
   scale, and a coin that squashes flat rather than turning reads as a rendering
   fault — which is not the note to end a purchase on. */
.thanksCoin{position:relative;margin-bottom:6px;perspective:420px}
.thanksCoin .ic{width:clamp(40px,9vh,54px);height:clamp(40px,9vh,54px);color:var(--gold);
  filter:drop-shadow(0 0 22px rgba(255,196,90,.6));
  transform-style:preserve-3d;
  animation:thanksSpin 4.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes thanksSpin{
  0%,58%{transform:rotateY(0)}
  100%{transform:rotateY(360deg)}}

.thanksCard h2{position:relative;margin:0 0 clamp(8px,2vh,14px);
  font-family:'Saira Condensed',sans-serif;font-weight:900;line-height:1;
  font-size:clamp(24px,5.5vh,34px);letter-spacing:.05em;color:#ffe6a6}
.thanksCard h2 span{display:block;margin-top:4px;font-size:clamp(9px,1.9vh,11px);
  letter-spacing:.3em;color:var(--gold);opacity:.85}

.thanksAmt{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;margin-bottom:clamp(8px,2vh,14px);padding:clamp(8px,2vh,14px) 10px;
  border-radius:13px;border:1px solid rgba(255,196,90,.28);
  background:rgba(255,196,90,.09)}
.thanksAmt b{font-family:'JetBrains Mono',monospace;font-weight:700;line-height:1;
  font-size:clamp(28px,7vh,44px);color:#fff;
  text-shadow:0 0 26px rgba(255,196,90,.55)}
.thanksAmt small{font-size:8px;letter-spacing:.24em;font-weight:800;color:var(--gold)}

.thanksCard p{position:relative;margin:0 0 clamp(10px,2.4vh,16px);
  font-size:clamp(10px,2.1vh,12px);line-height:1.6;color:var(--dim)}
.thanksCard .ocBtn{position:relative;width:100%}

@media (prefers-reduced-motion:reduce){
  .thanks,.thanksCard,.thanksCoin .ic{animation:none}}

/* ---- the clan door ------------------------------------------------------
   Who may join, and the bar they must clear. Owner-only: a member seeing
   settings they cannot change is a list of things to be annoyed about. */
.clanDoor{margin-top:10px;padding-top:10px;border-top:1px solid var(--cardEdge)}
.doorPicks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.doorPick{padding:9px 4px;border-radius:9px;cursor:pointer;
  font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.12em;color:var(--dim);
  border:1px solid var(--cardEdge);background:var(--card);
  transition:color .15s,border-color .15s,background .15s}
.doorPick:hover{color:var(--ink)}
.doorPick.on{color:#221c00;border-color:transparent;background:var(--fireGrad)}
.doorHint{font-size:9.5px;line-height:1.5;letter-spacing:.04em;color:var(--dim2,#5d6c8f);
  margin:2px 0 8px}
.doorHint b{color:var(--f2)}

/* applications waiting */
.clanReqs{display:flex;flex-direction:column;gap:5px;margin:4px 0 8px;
  max-height:30vh;overflow-y:auto}
.clanReq{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;
  border:1px solid var(--cardEdge);background:var(--card)}
.crWho{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.crWho b{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.crWho span{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--dim)}
.crYes,.crNo{flex:none;padding:6px 10px;border-radius:8px;cursor:pointer;
  font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.1em;border:1px solid var(--cardEdge);background:var(--card);color:var(--dim)}
.crYes{border-color:rgba(92,255,165,.4);color:#5cffa5}
.crYes:hover{background:rgba(92,255,165,.12)}
.crNo:hover{color:var(--red);border-color:rgba(255,90,114,.4)}

/* the door, on the clan ladder, so a refusal can be read in advance */
.board2 .door{font-weight:800;letter-spacing:.08em}
.board2 .door.request{color:var(--gold)}
.board2 .door.closed{color:var(--red)}

/* removing a member: present on every row for an owner, but quiet until looked
   at — a roster covered in REMOVE buttons reads as a threat rather than a list */
.mcMember{position:relative;display:inline-flex;align-items:center;gap:6px}
.mcKick{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;border-radius:5px;cursor:pointer;line-height:1;
  font-size:13px;font-weight:700;padding:0;
  border:1px solid transparent;background:transparent;color:var(--dim2,#5d6c8f);
  transition:color .15s,background .15s,border-color .15s}
.mcKick:hover{color:var(--red);background:rgba(255,90,114,.12);
  border-color:rgba(255,90,114,.35)}