/* GEO-DEF Atlas — modern minimal skin for the globe lobby (landing.html language).
   Loaded AFTER ui.css: overrides the cmd-terminal theme for the lobby + shared
   overlays only. Match HUD (match-bar, decks, telemetry) keeps ui.css untouched. */

body.atlas{
  --a-bg:#0B0D10; --a-card:#111419; --a-card2:#151A21; --a-ghost:#171C22;
  --a-line:#1B2027; --a-line2:#242B33;
  --a-txt:#EEF2F5; --a-mut:#96A1AB; --a-dim:#5A646E;
  --a-mint:#57E6B4; --a-mint-soft:rgba(87,230,180,.13); --a-mint-ink:#04241A;
  --a-disp:'Bricolage Grotesque',ui-sans-serif,sans-serif;
  --a-body:'Schibsted Grotesk',ui-sans-serif,sans-serif;
  --a-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---- kill the surveillance theatrics in the lobby ---- */
body.atlas .fx-surveillance,
body.atlas .fx-hud,
body.atlas .fx-rec{display:none!important}
body.atlas #worldmap{font-family:var(--a-body)}
body.atlas #worldmap{--lobby-hud-top:calc(72px + env(safe-area-inset-top))}

/* ---- ops bar → landing nav ---- */
body.atlas .ops-bar{
  gap:20px;
  padding:calc(8px + env(safe-area-inset-top)) 22px 8px;
  background:rgba(11,13,16,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.04);
  box-shadow:none;
  min-height:64px; align-items:center;
}
body.atlas .ops-mark{
  font-family:var(--a-disp); font-size:19px; font-weight:700;
  letter-spacing:-.02em; text-transform:none; color:var(--a-txt); text-shadow:none;
}
body.atlas .ops-mark i{font-style:normal; color:var(--a-mint)}
body.atlas .ops-mark sup{
  font-family:var(--a-mono); font-weight:400; font-size:9px; color:var(--a-dim);
  letter-spacing:.08em; margin-left:6px; vertical-align:super;
}
body.atlas .ops-ticker{
  font-family:var(--a-body); font-size:14px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
  border-left:none; padding-left:0; text-shadow:none;
}
body.atlas .ops-ticker::after{content:none}
body.atlas .ops-xp{
  font-family:var(--a-mono); font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--a-mut); background:none; border:1px solid var(--a-line2);
  border-radius:99px; padding:7px 12px; text-shadow:none;
}
body.atlas .ops-btn{
  font-family:var(--a-body); font-size:14px; font-weight:500;
  letter-spacing:0; text-transform:none; text-shadow:none;
  min-height:38px; padding:0 16px; border-radius:99px;
  border:1px solid var(--a-line2); background:none; color:var(--a-mut);
  transition:color .18s, background .18s, border-color .18s;
}
body.atlas .ops-btn:hover,body.atlas .ops-btn:focus-visible{
  border-color:var(--a-line2); color:var(--a-txt); background:var(--a-ghost); box-shadow:none;
}
body.atlas .ops-btn.on{
  border-color:rgba(87,230,180,.5); color:var(--a-mint);
  background:var(--a-mint-soft); box-shadow:none;
}
body.atlas .ops-btn.ops-btn-accent{
  border-color:rgba(87,230,180,.25); color:var(--a-mint); background:none; box-shadow:none;
}
body.atlas .ops-btn.ops-btn-accent:hover{background:var(--a-mint-soft); border-color:rgba(87,230,180,.5)}

/* ---- hint + zoom ---- */
body.atlas .wm-title{
  font-family:var(--a-body); font-size:13px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-dim); text-shadow:none;
  background:rgba(13,16,20,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.05); border-radius:99px; padding:9px 18px;
}
body.atlas .wm-zoom button{
  width:42px; height:42px; border-radius:99px; font-family:var(--a-body); font-size:20px;
  background:rgba(17,20,25,.8); border:1px solid var(--a-line2); color:var(--a-mut); text-shadow:none;
  transition:color .16s, border-color .16s;
}
body.atlas .wm-zoom button:hover{color:var(--a-mint); border-color:rgba(87,230,180,.4)}

/* ---- city panel: a simple centered modal (no map preview) ---- */
body.atlas .sector-panel,
body.atlas #citypanel.citypanel{
  clip-path:none; border-radius:22px;
  background:#12151A; border:1px solid var(--a-line2);
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px,calc(100vw - 28px)); max-width:none; flex:none; z-index:40;
  box-shadow:0 0 0 100vmax rgba(8,10,12,.55), 0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
body.atlas #citypanel.citypanel.hidden{display:none}
body.atlas .sector-head{display:block; border-bottom:none; padding:20px 22px 0}
body.atlas #sector-preview{display:none}
body.atlas .sector-meta{padding:0}
/* two-step flow: choose → defend options */
body.atlas #citypanel .cp-adv-toggle,
body.atlas #citypanel #cp-mode-row,
body.atlas #citypanel #cp-pvp{display:none}
body.atlas #citypanel:not(.defend-opts) .cp-adv-body{display:none}
body.atlas #citypanel.defend-opts .cp-advanced .cp-adv-body{display:block}
body.atlas #citypanel.defend-opts .cp-quick,
body.atlas #citypanel.defend-opts .cp-open,
body.atlas #citypanel.defend-opts .sector-custom-hint{display:none}
body.atlas #citypanel .cp-quick{flex-direction:column; gap:10px; margin:14px 0 4px}
body.atlas #citypanel .abtn{min-height:48px; width:100%}
/* PvP step: same shape as the defend step — the quick row swaps out for the
   team-size choice, so there's only ever one decision on screen. */
body.atlas #citypanel #cp-pvp-opts{display:none; padding-top:8px}
body.atlas #citypanel.pvp-opts #cp-pvp-opts{display:block}
body.atlas #citypanel.pvp-opts .cp-quick,
body.atlas #citypanel.pvp-opts .cp-open,
body.atlas #citypanel.pvp-opts .sector-intel,
body.atlas #citypanel.pvp-opts .sector-custom-hint{display:none}
body.atlas #citypanel .cp-step-lbl{
  display:block; margin:0 0 6px; text-align:left;
  font-family:var(--a-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--a-dim);
}
body.atlas #citypanel .cp-team-hint{
  margin:10px 0 0; font-size:12.5px; line-height:1.45; color:var(--a-mut);
}
body.atlas #citypanel #cp-pvp-opts .actions{margin:14px 0 0}
body.atlas #citypanel #cp-pvp-back{margin-top:10px}
/* team-size chips — full-width pills, matching the difficulty row */
body.atlas #citypanel .cp-team-row{display:flex; gap:8px; justify-content:center; margin:0}
body.atlas #citypanel .cp-team-row .tchip{
  flex:1 1 0; min-height:44px; margin:0; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--a-mono); font-size:12px; letter-spacing:.08em;
}
body.atlas #citypanel .cp-team-row .tchip.sel{
  border-color:rgba(87,230,180,.55); background:var(--a-mint-soft); color:var(--a-mint);
}
/* options step: eyebrow label above a full-width pill row, everything on one grid */
body.atlas #citypanel.defend-opts .sector-intel{display:none}
body.atlas #citypanel .cp-adv-body{padding-top:6px}
body.atlas #citypanel .cp-adv-body .optrow{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; justify-content:flex-start;
}
body.atlas #citypanel .cp-adv-body .optlabel{
  flex:0 0 100%; min-width:0; margin:0 0 1px; text-align:left;
  font-family:var(--a-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--a-dim);
}
body.atlas #citypanel .cp-adv-body .opt{
  flex:1 1 calc(50% - 4px); min-height:42px; margin:0; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px;
}
/* Both pre-match loadout rows share the styling — #boost-row on the Vs AI step,
   #pvp-boost-row on the PvP step. Selectors are grouped rather than duplicated
   so the two can't drift apart. */
body.atlas #citypanel #boost-row,
body.atlas #citypanel #pvp-boost-row{align-items:center}
body.atlas #citypanel #pvp-boost-row{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
body.atlas #citypanel #pvp-boost-row.hidden{display:none}
/* label owns its own line, like TEAM SIZE above it, so the chips line up */
body.atlas #citypanel #pvp-boost-row{justify-content:flex-start}
body.atlas #citypanel #pvp-boost-row .cp-step-lbl{flex:0 0 100%; margin:0}
/* two per row, like the difficulty pills — at natural width the pair overflows
   the panel by a pixel and wraps into an ugly stack */
body.atlas #citypanel #pvp-boost-row .opt.boost-chip{
  flex:1 1 calc(50% - 4px); min-width:0; padding:0 10px; white-space:nowrap;
}
body.atlas #citypanel #boost-row .boost-chips,
body.atlas #citypanel #pvp-boost-row .boost-chips{display:contents}
body.atlas #citypanel #boost-row .opt,
body.atlas #citypanel #pvp-boost-row .opt{flex:0 0 auto; min-height:36px; padding:0 14px}
body.atlas #citypanel #boost-row .opt.boost-chip.sel,
body.atlas #citypanel #pvp-boost-row .opt.boost-chip.sel{
  border-color:rgba(87,230,180,.55); background:var(--a-mint-soft); color:var(--a-mint);
}
/* unowned boosts: dashed "buy" chip with an inline price */
body.atlas #citypanel #boost-row .opt.boost-chip.buy,
body.atlas #citypanel #pvp-boost-row .opt.boost-chip.buy{
  border-style:dashed; color:var(--a-mut);
}
body.atlas #citypanel #boost-row .opt.boost-chip.buy:not(.locked):hover,
body.atlas #citypanel #pvp-boost-row .opt.boost-chip.buy:not(.locked):hover{
  color:var(--a-mint); border-color:rgba(87,230,180,.45); background:var(--a-mint-soft);
}
body.atlas #citypanel #boost-row .opt.boost-chip.buy.locked,
body.atlas #citypanel #pvp-boost-row .opt.boost-chip.buy.locked{opacity:.5; cursor:not-allowed}
body.atlas #citypanel #boost-row .chip-cost,
body.atlas #citypanel #pvp-boost-row .chip-cost{
  font-family:var(--a-mono); font-size:11px; color:var(--a-dim); margin-left:5px;
}
body.atlas #citypanel #boost-row .opt.boost-chip.buy:not(.locked):hover .chip-cost,
body.atlas #citypanel #pvp-boost-row .opt.boost-chip.buy:not(.locked):hover .chip-cost{color:var(--a-mint)}
body.atlas #citypanel #boost-row .boost-eq,
body.atlas #citypanel #pvp-boost-row .boost-eq{font-size:12px; color:var(--a-dim)}
body.atlas #citypanel #boost-row .boost-eq:empty,
body.atlas #citypanel #pvp-boost-row .boost-eq:empty{display:none}
body.atlas #citypanel .actions{margin-top:18px}
body.atlas #citypanel #cp-back{
  display:block; width:100%; text-align:center; margin-top:10px;
  background:none; border:none; cursor:pointer; font-family:var(--a-body);
  font-size:13px; color:var(--a-dim); text-decoration:none; padding:6px 0;
}
body.atlas #citypanel #cp-back:hover{color:var(--a-mut)}
body.atlas .sector-id{
  font-family:var(--a-mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  color:var(--a-dim); margin-bottom:4px; text-shadow:none;
}
body.atlas #cp-name{
  font-family:var(--a-disp); font-size:clamp(21px,4.6vw,26px); font-weight:600;
  letter-spacing:-.02em; text-transform:none; color:var(--a-txt); text-shadow:none;
}
body.atlas #cp-country{
  display:block; margin-top:2px;
  font-family:var(--a-body); font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--a-mut); text-shadow:none;
}
body.atlas .sector-intel{
  margin-top:6px; font-family:var(--a-body); font-size:12.5px; letter-spacing:0;
  text-transform:none; color:var(--a-dim); text-shadow:none;
}
body.atlas .cp-close,
body.atlas .sector-close{
  top:14px; right:14px; width:34px; height:34px; border-radius:99px;
  background:rgba(23,28,34,.9); border:1px solid var(--a-line2); color:var(--a-mut);
  font-size:15px; transition:color .16s, border-color .16s;
}
body.atlas .cp-close:hover,body.atlas .sector-close:hover{color:var(--a-txt)}
body.atlas .sector-body{padding:12px 20px 18px}
body.atlas .sector-custom-hint{font-size:12px; color:var(--a-dim); letter-spacing:0}
body.atlas .linkbtn{color:var(--a-mint); text-shadow:none}

body.atlas .abtn{
  border-radius:99px; font-family:var(--a-disp); font-size:15px; font-weight:600;
  letter-spacing:-.01em; text-transform:none; min-height:46px; text-shadow:none;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s, color .18s;
}
body.atlas .abtn.def{
  background:var(--a-mint); border:none; color:var(--a-mint-ink); box-shadow:none;
}
body.atlas .abtn.def:hover{background:#6FF0C3; transform:scale(1.02); box-shadow:none}
body.atlas .abtn.def:active{transform:scale(.98)}
body.atlas .abtn.atk{
  background:none; border:1px solid var(--a-line2); color:var(--a-txt); box-shadow:none;
}
body.atlas .abtn.atk:hover{border-color:rgba(87,230,180,.5); color:var(--a-mint); background:var(--a-mint-soft)}
body.atlas .cp-adv-toggle{
  font-family:var(--a-body); font-size:13px; letter-spacing:0; text-transform:none; color:var(--a-dim);
}
body.atlas .opt,body.atlas .join button{
  border-radius:99px; font-family:var(--a-body); font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; text-shadow:none;
  border:1px solid var(--a-line); background:none; color:var(--a-mut);
}
body.atlas .opt.sel{
  border-color:rgba(87,230,180,.55); background:var(--a-mint-soft); color:var(--a-mint); box-shadow:none;
}
body.atlas .optlabel{font-family:var(--a-body); font-size:12px; letter-spacing:0; text-transform:none; color:var(--a-dim)}
body.atlas .openrow{
  border-radius:14px; background:var(--a-card2); font-family:var(--a-body); font-size:13px; text-shadow:none;
}
body.atlas .openrow .ci{font-family:var(--a-body); font-weight:600; letter-spacing:0; font-size:14px}
body.atlas .openrow button{
  border-radius:99px; background:none; border:1px solid rgba(87,230,180,.35); color:var(--a-mint);
  font-family:var(--a-body); font-size:12.5px; font-weight:600; letter-spacing:0;
}
body.atlas .boost-eq{color:var(--a-dim)}

/* nav keeps only auth actions; matches filter + add-city live elsewhere */
body.atlas .ops-btn.nav-hidden{display:none}
body.atlas .ops-ticker .ops-reg{
  color:var(--a-mint); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(87,230,180,.4);
}
body.atlas .ops-ticker .ops-reg:hover{text-decoration-color:var(--a-mint)}

/* ---- join module ---- */
body.atlas .ops-channel{
  clip-path:none; border-radius:22px; background:#12151Af2; border:1px solid var(--a-line2);
  box-shadow:0 30px 70px rgba(0,0,0,.45); padding:16px 16px 14px;
}
body.atlas .ops-lbl{
  font-family:var(--a-body); font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--a-mut); text-shadow:none;
}
body.atlas .ops-channel input{
  font-family:var(--a-mono); font-size:16px; font-weight:500; letter-spacing:.3em;
  border-radius:12px; border:1px solid var(--a-line2); background:#0C0F13; color:var(--a-mint);
  text-shadow:none;
}
body.atlas .ops-channel input::placeholder{color:var(--a-dim); letter-spacing:.14em}
body.atlas .ops-channel button{
  font-family:var(--a-disp); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  border-radius:99px; border:none; background:var(--a-mint); color:var(--a-mint-ink); text-shadow:none;
  transition:background .16s;
}
body.atlas .ops-channel button:hover{background:#6FF0C3}
/* join code hides behind a reveal button until asked for */
body.atlas .ops-channel .join-reveal{
  width:100%; min-height:42px; padding:0 16px; border-radius:99px; cursor:pointer;
  font-family:var(--a-body); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none;
  background:none; border:1px solid var(--a-line2); color:var(--a-mut); text-shadow:none;
  transition:color .16s, border-color .16s, background .16s;
}
body.atlas .ops-channel .join-reveal:hover{color:var(--a-mint); border-color:rgba(87,230,180,.4); background:var(--a-mint-soft)}
.ops-channel.collapsed .join-body{display:none}
.ops-channel:not(.collapsed) .join-reveal{display:none}
body.atlas .wm-legal{font-size:12px}
body.atlas .wm-legal a{color:var(--a-dim)}
body.atlas .wm-legal a:hover{color:var(--a-mut)}

/* ---- shared overlays (armory / profile / waiting / add-city) ---- */
body.atlas .overlay{background:rgba(8,10,12,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
body.atlas .overlay .card,
body.atlas .eq-card,
body.atlas #shop .card,
body.atlas #acct-panel .card{
  clip-path:none; border-radius:22px; background:#12151A; border:1px solid var(--a-line2);
  box-shadow:0 40px 90px rgba(0,0,0,.55); font-family:var(--a-body);
}
body.atlas .overlay .card h1,
body.atlas #acct-title{
  font-family:var(--a-disp); font-weight:600; letter-spacing:-.02em; text-transform:none;
  text-shadow:none;
}
/* modal rhythm: title → air → content. A subtitle paragraph hugs its title
   (pulled back up) and carries the air below itself instead. The id selectors
   out-rank sp.html's inline #over/#shop h1 margins. */
body.atlas .card h1,
body.atlas #over h1,body.atlas #shop h1{margin:0 0 18px}
body.atlas .card h1+p,
body.atlas #over h1+p,body.atlas #shop h1+p{margin:-14px 0 18px}
body.atlas .codebig{
  font-family:var(--a-disp); font-weight:800; letter-spacing:.14em; color:var(--a-txt); text-shadow:none;
}
body.atlas .vbtn,body.atlas .eq-ready,body.atlas .acct-btn{
  border-radius:99px; font-family:var(--a-disp); font-weight:600; letter-spacing:0;
  text-transform:none; text-shadow:none;
}
body.atlas .acct-btn.ad{border-color:rgba(87,230,180,.4); background:var(--a-mint-soft); color:var(--a-mint)}
body.atlas .prof-id{font-family:var(--a-mono)}
body.atlas .shop-card,body.atlas .eq-chip{border-radius:14px; font-family:var(--a-body); text-shadow:none}
body.atlas .eq-chip.on{border-color:rgba(87,230,180,.55); box-shadow:none; background:var(--a-mint-soft)}

/* small screens: the join card owns the bottom edge — drop the hint + zoom */
@media (max-width:599px){
  body.atlas .wm-title{display:none}
  body.atlas .wm-zoom{display:none}
}

/* small screens: keep real button labels (ui.css swaps them for CH/OP glyphs) */
@media (max-width:380px){
  body.atlas .ops-btn#wm-filter,body.atlas .ops-btn#wm-account{font-size:13px; width:auto; padding:0 14px}
  body.atlas .ops-btn#wm-filter::after,body.atlas .ops-btn#wm-account::after{content:none}
}

/* ================================================================
   In-match HUD — same language as the lobby. Rather than restyling
   every cmd-terminal rule, first remap its design tokens (colors,
   fonts, glows) to atlas values, then fix structure per component.
   ================================================================ */
body.atlas{
  background:var(--a-bg);
  font-family:var(--a-body);
  letter-spacing:0;
  /* cmd-terminal token remap */
  --accent:var(--a-mint);
  --accent-glow:rgba(87,230,180,0);        /* glows collapse to nothing */
  --accent-dim:rgba(87,230,180,.8);
  --amber:#FF8A5C; --amber-glow:rgba(255,138,92,0);
  --danger:#FF8A5C;
  --violet:#A5B4FC;
  --panel:rgba(17,20,25,.92); --panel2:#171C22; --glass:rgba(17,20,25,.85);
  --brd:var(--a-line2); --brd-dim:var(--a-line); --brd-hot:rgba(255,138,92,.4);
  --txt:var(--a-txt); --muted:var(--a-mut);
  --font-brand:var(--a-disp);
  --font-display:var(--a-disp);
  --text-halo:0 0 transparent;
  --hud-shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:12px;
}
body.atlas .fx-rec{display:none!important}
body.atlas #stage::before{background:linear-gradient(180deg,rgba(11,13,16,.85),rgba(11,13,16,.4) 55%,transparent)}
body.atlas #stage::after{background:linear-gradient(0deg,rgba(11,13,16,.9),rgba(11,13,16,.45) 50%,transparent)}
body.atlas #vig{background:radial-gradient(130% 130% at 50% 40%,transparent 62%,rgba(0,0,0,.34) 100%)}

/* ---- top match bar ---- */
body.atlas .match-bar{
  align-items:center; gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  background:rgba(11,13,16,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.04);
  box-shadow:none;
}
body.atlas .match-role{
  padding:6px 14px; border-right:none; border-radius:99px;
  font-family:var(--a-disp); font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none; background:none;
}
body.atlas .match-role.def{color:var(--a-mint); background:var(--a-mint-soft); box-shadow:none}
body.atlas .match-role.atk{color:#FF8A5C; background:rgba(255,138,92,.13); box-shadow:none}
body.atlas .match-phase{
  padding:0 12px; border-right:1px solid var(--a-line);
  font-family:var(--a-mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; color:var(--a-dim);
}
body.atlas .match-ticker{
  padding:0 4px; font-family:var(--a-body); font-size:13px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
}
body.atlas .match-ticker::after{content:none}

/* ---- corner telemetry ---- */
body.atlas .stats-panel{
  clip-path:none; border-radius:16px;
  background:rgba(17,20,25,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--a-line2);
}
body.atlas .stats-head{
  font-family:var(--a-mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  color:var(--a-dim); background:none; border-bottom:1px solid var(--a-line);
}
body.atlas .stats-table td{padding:6px 12px}
body.atlas .stats-table .sk{
  font-family:var(--a-body); font-size:12.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
}
body.atlas .stats-table .sv{
  font-family:var(--a-mono); font-size:15px; font-weight:500;
}
body.atlas .stats-sub{
  font-family:var(--a-body); font-size:12px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
  background:none; border-top:1px solid var(--a-line);
}
/* mobile: pack Lives / Credits / Wave into one compact row (was a tall column) */
@media (max-width:599px){
  body.atlas #cluster .stats-table{display:flex; width:100%}
  body.atlas #cluster .stats-table tbody{display:contents}
  body.atlas #cluster .stats-table tr{
    flex:1; display:flex; flex-direction:column; gap:1px;
    padding:7px 12px; border-bottom:none; border-right:1px solid var(--a-line);
  }
  body.atlas #cluster .stats-table tr:last-child{border-right:none}
  body.atlas #cluster .stats-table td{display:block; padding:0; width:auto; text-align:left}
  body.atlas #cluster .stats-table .sk{width:auto; font-size:11px}
  body.atlas #cluster .stats-table .sv{font-size:17px; text-align:left}
  body.atlas #cluster .stats-sub{display:none} /* redundant with the header ticker */

  /* fuse the top bar into the stats card: [Defending … next wave] header + counts */
  body.atlas .match-bar{
    left:8px; right:8px; top:calc(8px + env(safe-area-inset-top));
    height:44px; box-sizing:border-box; min-height:0;
    justify-content:space-between; align-items:center; gap:10px; padding:0 12px;
    border:1px solid var(--a-line2); border-bottom:1px solid var(--a-line); border-radius:16px 16px 0 0;
    background:rgba(17,20,25,.94);
  }
  /* plain mint text (no pill) so it lines up with the "Lives" label below */
  body.atlas .match-bar .match-role{background:none; padding:0; box-shadow:none; color:var(--a-mint)}
  body.atlas .match-bar .match-role.atk{color:#FF8A5C}
  body.atlas .match-bar .match-ticker{margin-left:auto; text-align:right; padding:0; flex:0 1 auto}
  body.atlas #cluster{left:8px; right:8px; top:calc(52px + env(safe-area-inset-top))}
  body.atlas #cluster .stats-head{display:none}
  body.atlas #cluster .stats-panel{border-radius:0 0 16px 16px; border-top:none}
  /* collapsible deck: tap the header to toggle; auto-collapses while a wave runs */
  body.atlas .match-deck .deck-head{cursor:pointer; -webkit-tap-highlight-color:transparent}
  body.atlas .match-deck .deck-head::after{content:'▾'; margin-left:auto; color:var(--a-dim); font-size:11px}
  body.atlas .match-deck.deck-min .deck-head::after{content:'▴'}
  body.atlas .match-deck.deck-min .deck-head{border-bottom:none}
  body.atlas .match-deck.deck-min .weapon-grid,
  body.atlas .match-deck.deck-min .tpanel,
  body.atlas .match-deck.deck-min #unitrow{display:none!important}
  body.atlas .match-deck.deck-min{background:none}
}

/* ---- phase directive banner ---- */
body.atlas #pvp-banner{
  clip-path:none; border-radius:16px;
  background:rgba(17,20,25,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--a-line2); padding:14px 18px;
}
body.atlas #pvp-banner .pb-main{
  font-family:var(--a-disp); font-size:16px; font-weight:600;
  letter-spacing:-.01em; text-transform:none;
}
body.atlas #pvp-banner .pb-sub{
  font-family:var(--a-body); font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--a-mut);
}
body.atlas #pvp-banner .pb-boost{
  font-family:var(--a-mono); font-size:11px; letter-spacing:.02em; text-transform:none;
  color:var(--a-dim); border-top:1px solid var(--a-line);
}
body.atlas #pvp-banner.count{background:rgba(11,13,16,.85); border-radius:16px}

/* ---- context hint ---- */
body.atlas .hint{
  clip-path:none; border-radius:99px; box-shadow:none;
  font-family:var(--a-body); font-size:13px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
  background:rgba(13,16,20,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.05);
  left:50%; right:auto; transform:translateX(-50%); max-width:min(92vw,640px); width:max-content;
}

/* ---- bottom deck ---- */
body.atlas .match-deck{background:linear-gradient(0deg,rgba(11,13,16,.95) 55%,rgba(11,13,16,0))}
body.atlas .deck-panel{
  clip-path:none; border-radius:18px;
  background:rgba(17,20,25,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--a-line2);
}
body.atlas .deck-head{background:none; border-bottom:1px solid var(--a-line); padding:10px 14px}
body.atlas .deck-lbl{
  font-family:var(--a-mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  color:var(--a-dim);
}
body.atlas .deck-meta{
  font-family:var(--a-body); font-size:13px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--a-mut);
}
body.atlas .deck-meta b{font-family:var(--a-disp); font-size:15px; color:var(--a-mint)}
body.atlas .deck-lock{
  border-radius:99px; border:none; background:var(--a-mint); color:var(--a-mint-ink);
  font-family:var(--a-disp); font-size:13px; font-weight:600;
  letter-spacing:0; text-transform:none; box-shadow:none; padding:0 18px;
}
body.atlas .deck-lock.done{background:none; border:1px solid var(--a-line2); color:var(--a-dim)}

body.atlas .weapon-grid .wpn,
body.atlas .weapon-grid .build,
body.atlas .weapon-grid .ubtn{
  border-radius:14px; border:1px solid var(--a-line); background:var(--a-ghost);
  font-family:var(--a-body); font-size:12.5px; font-weight:500;
  letter-spacing:0; text-transform:none; box-shadow:none;
}
body.atlas .weapon-grid .wpn.sel,
body.atlas .weapon-grid .build.sel,
body.atlas .weapon-grid .ubtn.sel{
  border-color:rgba(87,230,180,.55); background:var(--a-mint-soft);
  color:var(--a-mint); box-shadow:none;
}
body.atlas .wpn-swatch,
body.atlas .weapon-grid .dot{width:9px; height:9px; border-radius:99px; box-shadow:none}
body.atlas .wpn-cost,
body.atlas .weapon-grid .pc{font-family:var(--a-mono); font-size:11px; color:var(--a-dim)}
body.atlas .weapon-grid .qn{
  border-radius:99px; background:rgba(255,138,92,.15); color:#FF8A5C; padding:2px 8px;
}

/* ---- tower inspect ---- */
body.atlas .tower-panel,body.atlas .tpanel{background:none; border-top:1px solid var(--a-line)}
body.atlas .tower-panel .tinfo b,body.atlas .tpanel .tinfo b{
  font-family:var(--a-disp); font-size:14px; font-weight:600;
  letter-spacing:0; text-transform:none;
}
body.atlas .tower-panel .tinfo span,body.atlas .tpanel .tinfo span{
  font-family:var(--a-body); font-size:12px; color:var(--a-mut);
}
body.atlas .tbtn{
  border-radius:99px; font-family:var(--a-body); font-size:12.5px; font-weight:600;
  letter-spacing:0; text-transform:none;
}
body.atlas .tbtn.up{background:none; border:1px solid rgba(87,230,180,.5); color:var(--a-mint)}
body.atlas .tbtn.sell{background:none; border:1px solid rgba(255,138,92,.4); color:#FF8A5C}

/* ---- equip window ---- */
body.atlas .eq-title{font-family:var(--a-disp); font-weight:600; letter-spacing:-.01em}
body.atlas .eq-chip{border-radius:14px; border-color:var(--a-line); background:var(--a-ghost)}
body.atlas .eq-ready{background:var(--a-mint); color:var(--a-mint-ink)}
body.atlas .eq-ready.waiting{background:none; border:1px solid var(--a-line2); color:var(--a-dim)}

/* ---- countdown + endgame ---- */
body.atlas #count-pop .n{
  font-family:var(--a-disp); font-weight:800; color:var(--a-txt);
  text-shadow:0 24px 80px rgba(0,0,0,.6);
}
body.atlas #count-pop .n.go{color:var(--a-mint); text-shadow:0 0 70px rgba(87,230,180,.35)}
body.atlas #endgame{background:radial-gradient(circle at 50% 42%,rgba(15,19,24,.55),rgba(11,13,16,.94))}
body.atlas #endgame .rays{opacity:.16}
body.atlas #endgame.lose .rays{opacity:.1}
body.atlas #endgame .verdict{
  font-family:var(--a-disp); font-weight:800; letter-spacing:-.02em; text-transform:none;
}
body.atlas #endgame.win .verdict{color:var(--a-mint); text-shadow:0 0 90px rgba(87,230,180,.35)}
body.atlas #endgame.lose .verdict{color:#FF8A5C; text-shadow:0 0 70px rgba(255,138,92,.28)}
body.atlas #endgame .vsub{font-family:var(--a-body); font-size:15px; color:var(--a-mut)}
body.atlas #endgame .eg-xp{font-family:var(--a-mono); font-weight:500; color:var(--a-mint)}
body.atlas #endgame .vbtn{
  clip-path:none; border-radius:99px; box-shadow:none;
  background:none; border:1px solid var(--a-line2); color:var(--a-txt);
  font-family:var(--a-disp); font-weight:600; letter-spacing:0; text-transform:none;
  font-size:14px; padding:12px 26px;
}
body.atlas #endgame .vbtn:hover{border-color:rgba(87,230,180,.5); color:var(--a-mint)}
body.atlas #endgame #eg-btn{background:var(--a-mint); border:1px solid transparent; color:var(--a-mint-ink)}
body.atlas #endgame #eg-btn:hover{background:#6FF0C3; color:var(--a-mint-ink)}

/* ---- HQ picker ---- */
body.atlas #hqpicker{background:var(--a-bg)}
body.atlas .hq-top h2{font-family:var(--a-disp); font-weight:600; letter-spacing:-.01em; text-shadow:none}
body.atlas .hq-top p{font-family:var(--a-body); color:var(--a-mut); text-shadow:none}
body.atlas .hq-bar{background:linear-gradient(0deg,rgba(11,13,16,.88),transparent)}

/* ---- toast + misc account/shop bits that use cmd colors ---- */
body.atlas #xp-toast{
  border-radius:99px; background:#12151A; border:1px solid var(--a-line2);
  font-family:var(--a-body); box-shadow:0 20px 50px rgba(0,0,0,.5);
}
body.atlas .acct-in{border-radius:12px; border-color:var(--a-line2); background:#0C0F13}
body.atlas .acct-btn{background:var(--a-mint); color:var(--a-mint-ink)}
body.atlas .acct-btn.ghost,
body.atlas .acct-btn.google{background:none; color:var(--a-txt); border:1px solid var(--a-line2)}
body.atlas .acct-btn.ad{background:var(--a-mint-soft); color:var(--a-mint)}
body.atlas .shop-card{border-radius:14px; border-color:var(--a-line); background:var(--a-ghost)}
body.atlas .shop-card.owned{border-color:rgba(87,230,180,.5)}
body.atlas .sc-btn{border-radius:99px; background:var(--a-mint); border:none; color:var(--a-mint-ink)}
body.atlas .sc-btn.equip{background:none; border:1px solid var(--a-line2); color:var(--a-txt)}
body.atlas .sc-btn.locked{background:none; border:1px solid var(--a-line); color:var(--a-dim)}
body.atlas .sc-btn.equipped{background:var(--a-mint-soft); color:var(--a-mint)}
body.atlas .sc-role{text-transform:none; letter-spacing:0; font-size:11px}
/* armory: XP balance + role section labels + earn-XP ad row */
body.atlas .shop-xp{font-family:var(--a-mono); font-size:12px; color:var(--a-mut)}
body.atlas .shop-xp b{font-family:var(--a-disp); font-size:17px; color:var(--a-mint); font-weight:600}
body.atlas .shop-sec{
  font-family:var(--a-mono); font-size:10px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--a-dim); text-align:left; margin:8px 0 0;
}
body.atlas .shop-sec:first-child{margin-top:0}
body.atlas #shop-ad{width:100%; margin-top:12px}
/* equip card: quiet doorway to the Armory */
body.atlas .eq-shop{
  width:100%; margin-top:10px; background:none; border:none; cursor:pointer;
  font-family:var(--a-body); font-size:12px; color:var(--a-mut); text-decoration:underline; text-underline-offset:3px;
}
body.atlas .eq-shop:hover{color:var(--a-mint)}
/* profile: identity row */
body.atlas .prof-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; margin-bottom:12px; border:1px solid var(--a-line);
  border-radius:14px; background:var(--a-ghost);
}
body.atlas .prof-id{font-family:var(--a-body); font-size:13px; color:var(--a-txt); letter-spacing:0; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.atlas .prof-xp{font-family:var(--a-mono); font-size:12px; color:var(--a-mut); white-space:nowrap}
body.atlas .prof-xp b{font-family:var(--a-disp); font-size:16px; color:var(--a-mint); font-weight:600}
/* profile form: avatar → XP → labelled fields → actions */
body.atlas .prof-avatar{
  width:64px; height:64px; border-radius:50%; margin:2px auto 8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--a-disp); font-weight:600; font-size:26px;
  color:var(--a-mint-ink); background:var(--a-mint);
}
body.atlas .prof-xpline{text-align:center; font-family:var(--a-mono); font-size:12px; color:var(--a-mut); margin:0 0 14px}
body.atlas .prof-xpline b{font-family:var(--a-disp); font-size:16px; color:var(--a-mint); font-weight:600}
body.atlas .f-label{
  display:block; text-align:left; margin:10px 0 6px;
  font-family:var(--a-mono); font-size:10px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--a-dim);
}
body.atlas .acct-in.ro{color:var(--a-mut); cursor:default}
body.atlas .acct-in.ro:focus{outline:none}
body.atlas #prof-save{margin-top:14px}
body.atlas #atk-lock{background:var(--a-mint); color:var(--a-mint-ink)}
body.atlas #atk-lock.done{background:var(--a-ghost); color:var(--a-dim)}

/* ---- Funnel fixes ------------------------------------------------------- */
/* Waiting room: the invite link IS the screen's primary action. */
body.atlas #waiting .wait-primary{
  background:var(--a-mint); color:var(--a-mint-ink);
  border-radius:99px; padding:12px 22px; margin:6px 0 2px;
  font-family:var(--a-body); font-weight:600; text-decoration:none;
}
body.atlas #waiting .wait-primary:hover{filter:brightness(1.06)}
/* Endgame guest nudge under the XP line */
body.atlas #endgame .eg-reg{color:var(--a-mut); font-family:var(--a-body)}
body.atlas #endgame .eg-reg .linkbtn{color:var(--a-mint)}
/* Notice card (disconnects, server errors, bad codes) — primary is mint, the
   secondary escape hatch is a quiet outline. */
body.atlas #notice .vbtn{
  background:var(--a-mint); color:var(--a-mint-ink);
  border:1px solid transparent; padding:12px 22px; margin:0;
}
body.atlas #notice .vbtn:hover{filter:brightness(1.06)}
body.atlas #notice .vbtn.ghost{
  background:none; color:var(--a-txt); border-color:var(--a-line2);
}
body.atlas #notice .vbtn.ghost:hover{border-color:rgba(87,230,180,.5); color:var(--a-mint)}
/* Team lobby: live seat grid in the waiting card (LoL-style party view).
   Filled seats are solid, YOUR seat is mint, empty chairs pulse. */
body.atlas #wait-seats{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:14px 0 4px; padding:14px 16px;
  background:var(--a-card2,#12151A); border:1px solid var(--a-line); border-radius:16px;
}
body.atlas #wait-seats.hidden{display:none}
body.atlas .seat-side{display:flex; flex-direction:column; gap:8px; align-items:center}
body.atlas .seat-lbl{
  font-family:var(--a-mono); font-size:10px; letter-spacing:.14em; color:var(--a-dim);
}
body.atlas .seat-side.def .seat-lbl{color:var(--a-mint)}
body.atlas .seat-side.atk .seat-lbl{color:#FF8A5C}
body.atlas .seat-chips{display:flex; gap:6px}
body.atlas .seat{
  min-width:44px; padding:8px 0; text-align:center; border-radius:10px;
  font-family:var(--a-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--a-dim); border:1px dashed var(--a-line2);
  animation:seatPulse 2.2s ease-in-out infinite;
}
body.atlas .seat.on{
  color:var(--a-txt); border:1px solid var(--a-line2); background:var(--a-ghost,#171C22);
  animation:none;
}
body.atlas .seat.me{
  color:var(--a-mint-ink); background:var(--a-mint); border-color:transparent; font-weight:700;
}
body.atlas .seat-vs{
  font-family:var(--a-disp); font-weight:700; font-size:13px; color:var(--a-dim);
}
body.atlas .wait-need{
  font-family:var(--a-mono); font-size:11px; color:var(--a-mut); margin:2px 0 10px; min-height:14px;
}
@keyframes seatPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Solo over card: share row + XP result line */
body.atlas #over .share-row .sp-eq{border-radius:99px; padding:8px 16px}
body.atlas #over #over-xp{font-family:var(--a-mono); font-size:12px; color:var(--a-mut)}
body.atlas #over #over-xp b{color:var(--a-mint)}
body.atlas #over #over-xp a{color:var(--a-mint)}