*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#080a12;--bg2:#0c0e18;--bg3:#10131f;--panel:#111526;--panel2:#161a30;
  --bord:#1e2340;--bord2:#2a305a;--bord-hi:#d4a534;
  --gold:#d4a534;--gold2:#f0c040;--gold3:#ffd866;--gold-dim:#7a6020;
  --red:#d04050;--blue:#4080d0;--green:#38b060;--purple:#8060c0;
  --text:#d0ccbe;--text2:#888a8e;--text3:#555868;
  --font-d:'Cinzel',Georgia,'Times New Roman',serif;
  --font-u:'Rajdhani',system-ui,sans-serif;
  --ui-scale:1;
}
body{background:var(--bg);color:var(--text);font-family:var(--font-u);overflow:hidden;height:100vh;font-weight:500}
.scr{display:none;width:100%;height:100%;position:absolute;top:0;left:0}.scr.active{display:flex}

/* ═══════════════ BUILDER SCREEN ═══════════════ */
#bldScr{flex-direction:column;background:linear-gradient(180deg,#060810 0%,#0a0e1a 40%,#0e1220 100%)}
#bldScr::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,#1a1530 0%,transparent 70%);
  pointer-events:none;z-index:0}

/* ── Header ── */
#bldTop{height:64px;background:linear-gradient(180deg,#12152a 0%,#0a0d1a 100%);border-bottom:1px solid var(--bord);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:relative;z-index:2;
  box-shadow:0 4px 20px #0008}
#bldTop::after{content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
#bldTop h1{font-family:var(--font-d);font-size:20px;font-weight:900;letter-spacing:6px;
  color:var(--gold);text-shadow:0 0 20px #d4a53440,0 2px 4px #000}
#bldTop .hdr-right{display:flex;gap:10px;align-items:center}
#bldTop #raceLabel{font-size:11px;color:var(--text2);letter-spacing:0.5px}

/* ── Connection status ── */
#cs{font-size:10px;padding:4px 12px;border-radius:4px;background:#0a0d1a;border:1px solid var(--bord);font-weight:600;letter-spacing:0.5px}
.cs-ok{color:var(--green);border-color:#38b06044 !important}.cs-w{color:var(--gold2);border-color:var(--gold-dim) !important}.cs-e{color:var(--red);border-color:#d0405044 !important}

/* ── Fight Button ── */
.btn-fight{padding:10px 28px;background:linear-gradient(180deg,#d4a534 0%,#a07a20 100%);border:1px solid #ffd86688;
  border-radius:6px;color:#0a0a10;font-family:var(--font-d);font-size:13px;font-weight:900;cursor:pointer;
  letter-spacing:3px;text-transform:uppercase;transition:all .2s;position:relative;overflow:hidden;
  box-shadow:0 0 20px #d4a53440,0 4px 12px #0008,inset 0 1px 0 #ffd86666}
.btn-fight:hover{background:linear-gradient(180deg,#f0c040 0%,#b88a28 100%);box-shadow:0 0 30px #d4a53466,0 4px 16px #0006;transform:translateY(-1px)}
.btn-fight:active{transform:translateY(1px);box-shadow:0 0 10px #d4a53440}
.btn-fight:disabled{background:linear-gradient(180deg,#4a4030 0%,#3a3020 100%);color:#888;border-color:#5a502844;
  box-shadow:none;cursor:default;animation:none}
.btn-fight:disabled::after{display:none}
.btn-fight:disabled:hover{transform:none;box-shadow:none}
.btn-fight::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 40%,#ffffff20 50%,transparent 60%);
  animation:btn-shine 3s infinite;pointer-events:none}
@keyframes btn-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── Start Override (admin) ── */
#startBtn{padding:6px 16px;background:var(--gold);color:#0a0a10;font-family:var(--font-d);font-size:11px;
  font-weight:900;letter-spacing:2px;border:none;border-radius:4px;cursor:pointer;transition:all .15s}
#startBtn:hover{background:var(--gold3);box-shadow:0 0 12px var(--gold-dim)}

/* ── Body Layout: banner + regiment rack + 3-column editor ── */
#bldBody{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1;
  padding:14px 18px 12px;gap:12px}

/* ── Army Banner (top strip) ── */
#bldBanner{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:10px 16px;background:linear-gradient(180deg,var(--panel) 0%,#0d1020 100%);
  border:1px solid var(--bord);border-radius:10px;flex-shrink:0;box-shadow:0 4px 14px #0008}
.race-pill{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 14px;background:#10131f;
  border:1px solid var(--bord);border-radius:8px;cursor:pointer;color:var(--text);font-family:var(--font-u);
  transition:all .15s;min-width:240px}
.race-pill:hover{background:var(--panel2);border-color:var(--gold-dim);transform:translateY(-1px);box-shadow:0 4px 12px #0006}
.race-pill .rp-icon{font-size:26px;line-height:1}
.race-pill .rp-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
.race-pill .rp-name{font-family:var(--font-d);font-size:16px;font-weight:900;letter-spacing:2px}
.race-pill .rp-sub{font-size:11px;color:var(--text2);letter-spacing:0.5px;white-space:nowrap}
.race-pill .rp-mastery{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:2px}
.race-pill .rp-xp{font-size:9px;color:var(--text3);letter-spacing:0.3px;font-variant-numeric:tabular-nums;font-family:var(--font-u);white-space:nowrap}
.race-pill .rp-xp-bar{width:100%;max-width:220px;height:3px;background:#0008;border:1px solid #2a2a3a;border-radius:2px;overflow:hidden}
.race-pill .rp-xp-fill{height:100%;transition:width .3s ease;background:var(--gold)}
.race-pill .rp-caret{font-size:14px;color:var(--text3);margin-left:6px}
.banner-center{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.banner-title{font-family:var(--font-d);font-size:12px;letter-spacing:4px;color:var(--gold-dim);text-transform:uppercase}
.banner-meta{display:flex;gap:14px;align-items:center}
.atm-total{font-family:var(--font-d);font-size:20px;color:var(--gold);font-weight:900;font-variant-numeric:tabular-nums}
.atm-total .atm-dim{color:var(--text3);font-size:13px;font-weight:400;margin-left:2px}
.atm-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:0.5px}
.atm-badge.ok{background:#1a2a1a;color:#80d080;border:1px solid #2a4a2a}
.atm-badge.bad{background:#2a1a1a;color:#e07070;border:1px solid #4a2a2a}
.banner-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.preset-inline{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.preset-inline .ps-lbl{font-size:10px;color:var(--text3);letter-spacing:1px;margin:0 2px 0 4px;text-transform:uppercase}

/* ── Regiment Rack (4 cards, horizontal) ──
   Layout: banner anchors top-right as the card's hero art (~96×96). Content
   flows on the left with `padding-right` reserving banner width. Actions
   drop to the bottom-right so the banner has uncluttered space up top. */
#regRack{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex-shrink:0}
.rr-card{background:linear-gradient(180deg,var(--bg3) 0%,#0c0f1c 100%);border:1px solid var(--bord);
  border-radius:8px;padding:10px 106px 10px 12px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;
  gap:6px;min-height:150px;position:relative}
.rr-card:hover{border-color:var(--bord2);background:var(--panel2);transform:translateY(-1px);box-shadow:0 6px 16px #0006}
.rr-card.on{border-color:var(--gold);background:linear-gradient(180deg,#1a1830 0%,#14182a 100%);
  box-shadow:0 0 18px #d4a53325,inset 0 0 0 1px #d4a53333}
.rr-card.over{border-color:#d04050aa}
.rr-head{display:flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:12px;
  letter-spacing:1.5px;color:var(--gold-dim)}
.rr-card.on .rr-num{color:var(--gold)}
.rr-num{font-weight:900}
.rr-star{color:var(--gold2);font-size:13px}
.rr-banner{position:absolute;top:8px;right:8px;width:96px;height:96px;
  image-rendering:auto;border-radius:4px;box-shadow:0 2px 6px #000a,inset 0 0 0 1px #0006;
  background:#0a0c14;pointer-events:none}
.rr-card.on .rr-banner{box-shadow:0 0 10px #d4a53366,inset 0 0 0 1px #d4a53388}
.rr-actions{position:absolute;bottom:6px;right:6px;display:flex;gap:2px;z-index:2}
.rr-act{background:#12141c;border:1px solid var(--bord);color:var(--text3);cursor:pointer;font-size:11px;
  padding:3px 5px;border-radius:3px;transition:all .12s;line-height:1;font-family:inherit}
.rr-act:hover{background:var(--panel2);border-color:var(--bord2);color:var(--text)}
.rr-act:disabled{cursor:not-allowed}
.rr-wpn{font-size:12px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-name{font-family:'Cinzel','Georgia',serif;font-size:14px;font-weight:700;color:var(--gold);
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:2px 0;text-shadow:0 1px 2px #000a}
.rr-name.blank{color:var(--text3);font-style:italic;font-weight:400;font-family:inherit;font-size:12px;letter-spacing:0}
.rr-name-actions{display:flex;gap:2px;margin-top:-2px}
.rr-dice{font-size:13px}
.rr-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text2)}
.rr-stat{white-space:nowrap}
.rr-stat b{color:var(--text);font-weight:700;margin-left:3px;font-variant-numeric:tabular-nums}
.rr-wa{color:#d4943a;font-weight:700}
.rr-cost{display:flex;flex-direction:column;gap:3px;margin-top:auto}
/* Regiment point-total + progress bar. Tier colors give at-a-glance
   feedback on build richness:
     low  <70% budget — crimson warning (needs more)
     mid  70-89%      — amber (getting there)
     good ≥90%        — green (strong kit)
     over >100%       — hot red (over budget, cut something) */
.rr-pts{font-size:11px;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums}
.rr-pts.low {color:#d04050}
.rr-pts.mid {color:#d4a534}
.rr-pts.good{color:#40b060}
.rr-pts.over{color:#e07070}
.rr-bar{height:4px;background:#12152a;border:1px solid #1a1d30;border-radius:2px;overflow:hidden}
.rr-fill{height:100%;transition:width .2s,background .2s}
.rr-fill.low {background:linear-gradient(90deg,#6a2a30,#d04050)}
.rr-fill.mid {background:linear-gradient(90deg,#6a5520,#d4a534)}
.rr-fill.good{background:linear-gradient(90deg,#3a6a4a,#40b060)}
.rr-fill.over{background:linear-gradient(90deg,#6a3a3a,#e07070)}

/* ── 3-Column Editor Body ── */
#bldCols{flex:1;display:grid;
  grid-template-columns:minmax(290px,1fr) minmax(320px,1.25fr) minmax(290px,0.95fr);
  gap:12px;overflow:hidden;min-height:0}
.bld-col{background:linear-gradient(180deg,var(--panel) 0%,#0a0d18 100%);border:1px solid var(--bord);
  border-radius:10px;padding:14px 16px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.bld-col::-webkit-scrollbar{width:6px}
.bld-col::-webkit-scrollbar-track{background:transparent}
.bld-col::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.col-head{font-family:var(--font-d);font-size:13px;letter-spacing:3px;color:var(--gold);margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid #d4a53322;text-transform:uppercase;font-weight:700}
.col-head-sub{margin-top:18px}

/* ── Equipment Slots Grid (fills its column, no 520px cap) ── */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.es{background:var(--bg3);border:1px solid var(--bord);border-radius:8px;padding:10px 12px;min-height:88px;
  cursor:pointer;transition:all .15s;position:relative}
.es:hover{border-color:var(--bord2);background:var(--panel);box-shadow:0 4px 14px #0004}
.es.fl{border-color:var(--gold-dim);background:linear-gradient(135deg,#16182a 0%,#111428 100%);box-shadow:inset 0 0 20px #d4a53408}
.es .sn{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:5px;font-weight:700}
.es .si{font-size:13px;color:var(--text);font-weight:700;letter-spacing:0.2px;line-height:1.3}
.es .si.empty{color:var(--text3);font-weight:500}
/* Empty equipment slot — red border + ⚠ badge + pulsing glow to draw
   the eye. Makes it unambiguous that the slot needs a choice. */
.es.empty-slot{border-color:#5a2a2e;background:rgba(208,64,80,0.05);box-shadow:inset 0 0 14px rgba(208,64,80,0.06)}
.es.empty-slot:hover{border-color:#d04050;background:rgba(208,64,80,0.10);box-shadow:inset 0 0 16px rgba(208,64,80,0.14),0 4px 14px #0004}
.es.empty-slot .si.empty{color:#e07070;font-weight:700;letter-spacing:0.5px}
.es.empty-slot::before{content:'⚠';position:absolute;top:8px;right:10px;color:#d04050;font-size:14px;opacity:0.85;pointer-events:none;text-shadow:0 1px 2px #000}
/* Off-hand locked by a two-handed main weapon. Neutral grey treatment
   (no red warning) — this is an intentional state, not a missing choice. */
.es.empty-slot.locked-2h{border-color:#3a3a42;background:rgba(80,80,90,0.06);box-shadow:none;cursor:not-allowed}
.es.empty-slot.locked-2h:hover{border-color:#4a4a52;background:rgba(80,80,90,0.09);box-shadow:none}
.es.empty-slot.locked-2h .si.empty{color:#a0a0a8;font-weight:500;letter-spacing:0}
.es.empty-slot.locked-2h::before{content:'🔒';color:#888;text-shadow:none}
.es .sc{font-size:11px;color:var(--gold-dim);margin-top:3px;font-weight:700}
.es .sm{font-size:9px;margin-top:2px}
.es .ss{font-size:11px;color:var(--text3);margin-top:5px;line-height:1.4}

/* ── Item Picker Overlay ── */
.ip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);
  border:1px solid var(--gold-dim);border-radius:10px;padding:18px;max-height:80vh;overflow-y:auto;z-index:100;
  min-width:440px;max-width:520px;box-shadow:0 24px 80px #000c,0 0 40px #d4a53410;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.ip::-webkit-scrollbar{width:6px}.ip::-webkit-scrollbar-track{background:transparent}
.ip::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.ip h3{font-family:var(--font-d);font-size:15px;color:var(--gold);margin-bottom:12px;letter-spacing:2px}
.ii{padding:10px 14px;border:1px solid var(--bord);border-radius:6px;margin-bottom:6px;cursor:pointer;
  transition:all .12s;background:var(--bg3)}
.ii:hover{border-color:var(--gold-dim);background:var(--panel2);transform:translateX(2px)}
.ii.eq{border-color:var(--green);background:#0a1a12;border-left:3px solid var(--green)}
.ii .in{font-size:13px;font-weight:700;color:var(--text)}
.ii .ic{font-size:12px;color:var(--gold);float:right;font-weight:700}
.ii .ie{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.4}

/* ── Traits + Abilities (fills column, no 520px cap) ── */
.tl{/* no max-width — fills column naturally */}
.ti{display:flex;gap:8px;padding:9px 12px;border:1px solid var(--bord);border-radius:6px;margin-bottom:5px;
  cursor:pointer;transition:all .12s;background:var(--bg3)}
.ti:hover{border-color:var(--bord2);background:var(--panel)}
.ti.on{border-color:var(--gold-dim);background:linear-gradient(135deg,#1a1830 0%,#14182a 100%);border-left:3px solid var(--gold)}
.ti.lk{opacity:.35;cursor:not-allowed;filter:grayscale(0.5)}
.ti .tn{font-size:12px;font-weight:700;color:var(--text);line-height:1.35}
.ti .tc{font-size:11px;color:var(--gold);font-weight:700}
.ti .tms{font-size:10px;margin-left:2px}
.ti .tcat{color:var(--text3);font-size:10px;margin-left:4px;font-weight:500}
.ti .td{font-size:11px;color:var(--text2);line-height:1.5;margin-top:3px}
.ti .ab-type{font-size:9px;margin-left:3px;letter-spacing:1px;font-weight:700}
.ab-lbl{font-size:10px;color:var(--gold-dim);letter-spacing:1.5px;text-transform:uppercase;
  margin:10px 0 6px;font-weight:700;font-family:var(--font-d)}

/* ── Trait / Ability slot styling (reuses .es base grid rules) ──
   Traits and abilities share the equipment slot visual language: click to
   fill, filled shows name + cost + desc, empty shows a plus hint. They
   don't carry the red "required" warning that equipment slots use (an
   empty trait/ab slot is valid — they're optional). */
.es.opt-slot{min-height:76px}
.es.opt-slot .si.empty{color:#707088;font-weight:600;letter-spacing:0.4px}
.es.opt-slot:hover .si.empty{color:#b0b0d0}
.es.opt-slot::before{content:'+';position:absolute;top:6px;right:10px;color:#555;font-size:16px;opacity:0.6;pointer-events:none;font-weight:700}
.es.opt-slot:hover::before{color:var(--gold-dim);opacity:0.9}
.es.opt-slot.fl::before{content:'';display:none}
/* Auto-managed ability slot: shown when auto-place is on. Gold tint +
   lightning bolt, non-removable (handled in JS click path). */
.es.ab-auto{border-color:#5a4d20;background:linear-gradient(135deg,#1d1a0f 0%,#151208 100%);cursor:default}
.es.ab-auto:hover{border-color:#7a6830;background:linear-gradient(135deg,#221d12 0%,#18150a 100%);transform:none}
.es.ab-auto::after{content:'⚡';position:absolute;top:6px;right:10px;color:var(--gold-dim);font-size:13px;opacity:0.75;pointer-events:none}
.es.ab-auto .sn{color:#a08840}
/* Ability type tag color (reactive/toggle/active) when rendered in a slot */
.es .ab-type{font-size:9px;margin-left:3px;letter-spacing:1px;font-weight:700}

/* Col-head with a right-aligned control (e.g. auto-place toggle). */
.col-head-with-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.auto-abs-tgl{display:flex;align-items:center;gap:6px;font-family:var(--font-u);font-size:10px;
  color:var(--text2);cursor:pointer;letter-spacing:1px;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border:1px solid var(--bord);border-radius:5px;background:var(--bg3);user-select:none}
.auto-abs-tgl:hover{border-color:var(--gold-dim);color:var(--text)}
.auto-abs-tgl input[type="checkbox"]{width:13px;height:13px;accent-color:var(--gold);cursor:pointer;margin:0}
.auto-abs-tgl input[type="checkbox"]:checked + span{color:var(--gold)}

/* ── Officer pill (top of Equipment column) ──
   96×96 portrait (matches the regiment banner in the rack for visual
   parity) + name/title + passive line + inline ability chips + hover
   hint. Click opens #officerPickerModal; hover brings up the rich
   floating tooltip (see .officer-tooltip below) with full passive +
   both ability descriptions — replaces the old full-width row's 5
   display slots without eating page space. */
.officer-pill{display:flex;align-items:stretch;gap:12px;padding:8px 10px 8px 8px;margin-bottom:12px;
  background:linear-gradient(135deg,#16182a 0%,#111428 100%);border:1px solid var(--bord);
  border-radius:8px;cursor:pointer;color:var(--text);font-family:var(--font-u);
  transition:all .15s;width:100%;text-align:left;min-height:112px}
.officer-pill:hover{background:var(--panel2);border-color:var(--gold-dim);transform:translateY(-1px);box-shadow:0 4px 12px #0006}
.officer-pill.empty{background:rgba(208,64,80,0.04);border-color:#3a2d2d;min-height:auto}
.officer-pill.empty:hover{border-color:#d04050;background:rgba(208,64,80,0.08)}
.op-portrait{position:relative;width:96px;height:96px;flex-shrink:0;
  background:linear-gradient(135deg,#1a1d30 0%,#0c0e1a 100%);border:2px solid var(--bord2);
  border-radius:6px;overflow:hidden;box-shadow:0 2px 8px #0008}
.op-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.op-portrait .op-portrait-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:46px;font-weight:900;font-family:var(--font-d);letter-spacing:-2px;text-shadow:0 2px 6px #000a}
.op-portrait.empty{width:56px;height:56px}
.op-portrait.empty .op-portrait-glyph{font-size:28px}
.op-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:2px;justify-content:center}
.op-name{font-size:14px;color:var(--text);font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-name.blank{color:var(--text3);font-style:italic;font-weight:500}
.op-title{font-size:11px;color:var(--text3);font-style:italic;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-pas{font-size:11px;color:var(--gold-dim);letter-spacing:0.3px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-abs{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.op-ab-chip{font-size:10px;color:var(--text2);background:#0f1120;border:1px solid #232742;
  border-radius:3px;padding:2px 6px;letter-spacing:0.2px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.officer-pill:hover .op-ab-chip{border-color:#3a3e60;color:var(--text)}
.op-hint{font-size:9px;color:var(--text3);margin-top:4px;letter-spacing:0.4px;opacity:0.7}
.op-caret{font-size:14px;color:var(--text3);margin-left:4px;flex-shrink:0;align-self:center}

/* Rich hover tooltip — body-attached so `.bld-col { overflow-y:auto }`
   can't clip it. JS positions via getBoundingClientRect; CSS handles
   the visual. Shows portrait-free full passive list + both ability
   cards. 280px wide keeps ability descriptions readable without
   dominating the viewport. */
.officer-tooltip{position:fixed;z-index:300;display:none;
  width:280px;max-width:calc(100vw - 20px);
  background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);
  border:1px solid var(--gold-dim);border-radius:8px;
  padding:12px 14px;box-shadow:0 12px 32px #000b,0 0 16px #d4a53314;
  pointer-events:none;font-family:var(--font-u)}
.officer-tooltip .ot-head{margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid #d4a53322}
.officer-tooltip .ot-name{font-family:var(--font-d);font-size:15px;font-weight:900;letter-spacing:2px;margin-bottom:2px}
.officer-tooltip .ot-sub{font-size:10px;color:var(--text3);letter-spacing:0.5px}
.officer-tooltip .ot-sec-label{font-size:9px;color:var(--gold);text-transform:uppercase;
  letter-spacing:2px;font-weight:700;margin:8px 0 4px;font-family:var(--font-d)}
.officer-tooltip .ot-pas-list{display:flex;flex-wrap:wrap;gap:4px 10px}
.officer-tooltip .ot-pas{font-size:11px;color:var(--text2)}
.officer-tooltip .ot-pas b{color:var(--gold2);font-weight:700}
.officer-tooltip .ot-pas.muted{color:var(--text3);font-style:italic}
.officer-tooltip .ot-abs{display:flex;flex-direction:column;gap:6px}
.officer-tooltip .ot-ab{background:var(--bg3);border:1px solid var(--bord);border-radius:5px;padding:6px 8px}
.officer-tooltip .ot-ab-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.officer-tooltip .ot-ab-icon{font-size:16px;line-height:1}
.officer-tooltip .ot-ab-name{font-size:12px;color:var(--text);font-weight:700}
.officer-tooltip .ot-ab-desc{font-size:10px;color:var(--text3);line-height:1.4}

/* ── Generic builder tooltip (equipment / trait / ability / regiment /
   picker rows). Body-attached singleton via _showBuilderTooltip. Width
   tuned for regiment summaries (most verbose surface) with max-height
   + scroll so small viewports still see everything. */
.builder-tooltip{position:fixed;z-index:300;display:none;
  width:320px;max-width:calc(100vw - 20px);max-height:calc(100vh - 40px);overflow-y:auto;
  background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);
  border:1px solid var(--gold-dim);border-radius:8px;
  padding:12px 14px;box-shadow:0 12px 32px #000b,0 0 16px #d4a53314;
  pointer-events:none;font-family:var(--font-u);
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.builder-tooltip::-webkit-scrollbar{width:6px}
.builder-tooltip::-webkit-scrollbar-track{background:transparent}
.builder-tooltip::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.builder-tooltip .bt-head{margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid #d4a53322}
.builder-tooltip .bt-name{font-family:var(--font-d);font-size:14px;font-weight:900;letter-spacing:1.4px;
  margin-bottom:3px;color:var(--text);line-height:1.25}
.builder-tooltip .bt-sub{font-size:10px;color:var(--text3);letter-spacing:0.4px;line-height:1.4}
.builder-tooltip .bt-sub b{color:var(--gold2);font-weight:700}
.builder-tooltip .bt-tags{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.builder-tooltip .bt-tag{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);
  background:#1a1d32;border:1px solid #2a2d4a;border-radius:3px;padding:2px 6px;font-weight:700}
.builder-tooltip .bt-sec-label{font-size:9px;color:var(--gold);text-transform:uppercase;
  letter-spacing:2px;font-weight:700;margin:9px 0 4px;font-family:var(--font-d)}
.builder-tooltip .bt-rows{display:flex;flex-direction:column;gap:3px}
.builder-tooltip .bt-row{font-size:11px;color:var(--text2);line-height:1.4}
.builder-tooltip .bt-row b{color:var(--gold2);font-weight:700}
.builder-tooltip .bt-row.muted,.builder-tooltip .muted{color:var(--text3);font-style:italic}
.builder-tooltip .bt-desc{font-size:11px;color:var(--text2);line-height:1.55}
.builder-tooltip .bt-reg-sl{display:inline-block;min-width:62px;color:var(--text3);font-size:10px;
  letter-spacing:0.8px;text-transform:uppercase;font-weight:700}
.builder-tooltip .bt-reg-pt{color:var(--gold-dim);font-size:10px;margin-left:4px}

/* Officer picker modal grid: square-portrait roster tiles. Locked officers
   get a crimson tint + LOCKED ribbon (route to shop). In-use tiles carry a
   blue "Reg N" badge — click-to-swap, not a block. */
.officer-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.or-tile{background:var(--bg3);border:1px solid var(--bord);border-radius:8px;
  padding:6px 6px 8px;cursor:pointer;transition:all .15s;position:relative;
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.or-tile:hover{border-color:var(--gold-dim);background:var(--panel);transform:translateY(-1px);
  box-shadow:0 4px 12px #0008}
.or-tile.selected{border-color:var(--gold);background:linear-gradient(135deg,#1d1a0d 0%,#12140a 100%);
  box-shadow:0 0 0 1px var(--gold) inset,0 4px 12px #0006}
.or-tile.selected::before{content:'✓';position:absolute;top:4px;right:7px;z-index:2;color:var(--gold);font-size:13px;font-weight:700;
  text-shadow:0 0 4px #000,0 0 2px #000}
.or-tile.locked{background:rgba(208,64,80,0.08);border-color:#5a2a2e;color:#8a6560}
.or-tile.locked:hover{background:rgba(208,64,80,0.14);border-color:#d04050}
.or-tile.locked .or-name,.or-tile.locked .or-title,.or-tile.locked .or-role{color:#8a6560}
.or-tile.locked .or-portrait img{filter:grayscale(0.8) brightness(0.55)}
.or-tile.locked::after{content:'🔒 LOCKED';position:absolute;top:6px;right:6px;z-index:2;font-size:8px;
  color:var(--gold);font-weight:700;letter-spacing:1px;background:#2a1a12cc;padding:2px 5px;border-radius:3px}
.or-portrait{position:relative;width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,#1a1d30 0%,#0c0e1a 100%);border:1px solid var(--bord2);
  border-radius:5px;overflow:hidden;margin-bottom:2px}
.or-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.or-portrait .or-portrait-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:42px;font-weight:900;font-family:var(--font-d);letter-spacing:-1px;text-shadow:0 2px 6px #000a}
.or-name{font-size:11px;color:var(--text);font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.or-title{font-size:9px;color:var(--text3);font-style:italic;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.or-role{font-size:8px;color:var(--gold-dim);letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-top:1px;padding:0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ability chips on picker tiles: icon + name; native `title` attribute
   carries the full description on hover so the tile stays compact. */
.or-abs{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding:4px 2px 0;border-top:1px dashed #1a1d30}
.or-ab{font-size:9px;color:var(--text2);background:#0f1120;border:1px solid #232742;
  border-radius:3px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0.2px}
.or-tile:hover .or-ab{border-color:#3a3e60;color:var(--text)}
.or-tile.locked .or-ab{opacity:0.6}
.or-tile.in-use{border-color:#4080d0aa;background:linear-gradient(135deg,#0f1420 0%,#0a1018 100%)}
.or-tile.in-use:hover{border-color:#60a0f0;background:#14202e}
.or-used{position:absolute;top:4px;left:5px;z-index:2;font-size:8px;font-weight:700;letter-spacing:0.5px;
  color:#9bc0ff;background:#1a2a48cc;border:1px solid #2a4470;padding:1px 5px;border-radius:3px}

/* ── Stat Bars (bumped) ── */
.sb{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px}
.sb .sl{width:60px;color:var(--text3);text-align:right;font-weight:700;letter-spacing:0.5px;
  text-transform:uppercase;font-size:11px}
.sb .sv{width:50px;color:var(--gold2);font-weight:700;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.sb .sbb{flex:1;height:8px;background:#12152a;border-radius:4px;overflow:hidden;border:1px solid #1a1d30}
.sb .sf{height:100%;border-radius:3px;transition:width .3s ease;position:relative}

/* ── Budget Bar (bumped) ── */
.bb{background:var(--bg3);border:1px solid var(--bord);border-radius:6px;padding:10px 12px;margin:14px 0 6px}
.bb .bl{font-size:12px;color:var(--text);margin-bottom:6px;font-weight:700;letter-spacing:0.5px;
  font-variant-numeric:tabular-nums}
.bb .bbr{height:9px;background:#12152a;border-radius:4px;overflow:hidden;border:1px solid #1a1d30}
.bb .bf{height:100%;border-radius:3px;transition:width .3s}

/* ── Summary (bumped) ── */
#bldSum{font-size:12px;color:var(--text2);line-height:1.65}

/* ── Buttons (bumped) ── */
.bt{padding:7px 14px;background:var(--bg3);border:1px solid var(--bord);border-radius:5px;color:var(--text2);
  font-family:var(--font-u);font-size:11px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;
  transition:all .15s;white-space:nowrap;font-weight:600}
.bt:hover{background:var(--panel2);color:var(--text);border-color:var(--bord2)}
.bt.pri{background:linear-gradient(180deg,#2a2040 0%,#1a1530 100%);border-color:var(--gold-dim);color:var(--gold)}
.bt.pri:hover{background:linear-gradient(180deg,#3a2d50 0%,#251e3a 100%);color:var(--gold3)}
.bt.on{background:#1a1830;border-color:var(--gold-dim);color:var(--gold)}
.ov{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:99;backdrop-filter:blur(4px)}

/* ── Race Picker Modal ── */
.race-picker-ov{position:fixed;inset:0;background:#000c;backdrop-filter:blur(8px);z-index:200;
  display:flex;align-items:center;justify-content:center}
.race-picker-panel{background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);border:1px solid var(--gold-dim);
  border-radius:14px;padding:22px 26px;width:min(760px,92vw);max-height:86vh;overflow-y:auto;
  box-shadow:0 24px 80px #000c,0 0 40px #d4a53418}
.race-picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid #d4a53322}
.race-picker-head h3{font-family:var(--font-d);font-size:18px;color:var(--gold);letter-spacing:3px}
.race-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rp-tile{background:var(--bg3);border:2px solid var(--bord);border-radius:10px;padding:14px 14px 10px;
  cursor:pointer;transition:all .15s;text-align:center}
.rp-tile:hover{transform:translateY(-2px);background:var(--panel2);box-shadow:0 6px 16px #0006}
.rp-tile.on{box-shadow:0 0 24px #d4a53422}
.rp-tile-icon{font-size:32px;margin-bottom:6px;line-height:1}
.rp-tile-name{font-family:var(--font-d);font-size:15px;font-weight:900;letter-spacing:2px;margin-bottom:4px}
.rp-tile-desc{font-size:11px;color:var(--text2);line-height:1.45;margin-bottom:8px;min-height:32px}
.rp-tile-foot{font-size:10px;color:var(--text3);display:flex;justify-content:space-between;gap:6px;
  padding-top:6px;border-top:1px dotted #1e2340}
/* Locked race tile — same treatment as .ii-locked on equipment picker
   items. Crimson background + border, dimmed text, corner LOCKED ribbon.
   Clicking still works (routes to the shop). */
.rp-tile.locked{
  background:rgba(60,22,26,0.35) !important;
  border:2px solid #5a2a2e !important;
  position:relative;
}
.rp-tile.locked:hover{
  background:rgba(110,36,44,0.55) !important;
  border-color:#d04050 !important;
  transform:translateY(-2px);
}
.rp-tile.locked .rp-tile-icon,
.rp-tile.locked .rp-tile-name{color:#8a6560 !important;filter:grayscale(.5)}
.rp-tile.locked .rp-tile-desc,
.rp-tile.locked .rp-tile-foot{color:#7a5e60 !important}
.rp-tile.locked::after{
  content:'LOCKED';
  position:absolute;
  top:6px; right:6px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#e07070;
  background:rgba(20,10,12,0.88);
  padding:2px 6px;
  border:1px solid #6a2a30;
  border-radius:2px;
  pointer-events:none;
  font-family:var(--font-d,sans-serif);
}

/* ── Save Manager ── */
.svm{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);
  border:1px solid var(--gold-dim);border-radius:12px;padding:20px;max-height:80vh;overflow-y:auto;z-index:100;
  min-width:440px;max-width:540px;box-shadow:0 24px 80px #000c}
.svm h3{font-family:var(--font-d);font-size:14px;color:var(--gold);margin-bottom:12px;letter-spacing:2px}
.svm .tabs{display:flex;gap:4px;margin-bottom:12px}
.svm .tab{padding:6px 14px;font-size:10px;cursor:pointer;border-radius:5px;background:var(--bg3);color:var(--text3);
  border:1px solid var(--bord);transition:.15s;font-weight:600;letter-spacing:0.5px}
.svm .tab.on{background:#1a1830;border-color:var(--gold-dim);color:var(--gold)}
.sv-slot{background:var(--bg3);border:1px solid var(--bord);border-radius:6px;padding:10px;margin-bottom:6px;
  display:flex;align-items:center;gap:10px;transition:.15s}
.sv-slot:hover{border-color:var(--bord2)}.sv-slot.used{border-color:var(--bord2)}
.sv-slot .sv-icon{width:32px;height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:#12152a;flex-shrink:0;border:1px solid var(--bord)}
.sv-slot .sv-info{flex:1;min-width:0}
.sv-slot .sv-name{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-slot .sv-meta{font-size:8px;color:var(--text3);margin-top:2px}.sv-slot .sv-acts{display:flex;gap:4px;flex-shrink:0}
.sv-slot.locked{opacity:.35;cursor:not-allowed}.sv-slot.locked .sv-icon{background:#0a0a12}
.sv-nameinput{background:var(--bg);border:1px solid var(--bord2);border-radius:4px;color:var(--text);font-size:10px;
  padding:3px 8px;width:130px;font-family:var(--font-u)}
.sv-shopbtn{background:#d4a53415;border:1px solid #d4a53444;color:var(--gold);padding:4px 10px;border-radius:4px;
  font-size:9px;cursor:pointer;transition:.15s;font-weight:600}.sv-shopbtn:hover{background:#d4a53433}

/* ═══════════════ BATTLE SCREEN ═══════════════ */
#batScr{flex-direction:column}
#bTop{height:54px;background:#12121fee;border-bottom:1px solid var(--bord);display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;box-shadow:0 2px 12px #0006}
#bTop h1{font-family:var(--font-d);font-size:14px;font-weight:900;letter-spacing:3px;color:var(--gold)}
.bTop-side{flex:1;min-width:0}
.bTop-right{text-align:right}
.bTop-center{display:flex;align-items:center;gap:14px;flex-shrink:0}
.bTop-score{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:220px}
#bTop #scoreBar{width:220px;height:8px;margin:0}
.ts{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.r{background:var(--red)}.dot.b{background:var(--blue)}
#bBod{flex:1;display:flex;overflow:hidden}
#gC{flex:1;cursor:crosshair}
/* Capture bar: floats top-center just under #bTop. Shows assault progress
   per base (enemy team's fill = how close they are to winning by taking
   that base). Scales with --ui-scale like every other HUD element. */
#captureBar{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:340px;background:#0a0d18e6;border:1px solid var(--bord2);border-radius:8px;
  padding:8px 12px 10px;z-index:30;backdrop-filter:blur(4px);zoom:var(--ui-scale);
  box-shadow:0 4px 16px #0008,0 0 12px #d4a53311;pointer-events:none}
#captureBar .cb-title{font-family:var(--font-d);font-size:9px;color:var(--gold-dim);
  letter-spacing:3px;text-align:center;margin-bottom:6px}
.cb-row{display:grid;grid-template-columns:72px 1fr 46px;gap:6px;align-items:center;margin-top:3px}
.cb-label{display:flex;align-items:center;gap:5px;font-size:9px;font-family:var(--font-d);
  letter-spacing:1px;color:var(--text2)}
.cb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cb-dot.cb-red{background:var(--red);box-shadow:0 0 4px #d0405066}
.cb-dot.cb-blue{background:var(--blue);box-shadow:0 0 4px #4080d066}
.cb-base{white-space:nowrap}
.cb-bar{height:8px;background:#12152a;border-radius:4px;position:relative;overflow:hidden;
  border:1px solid #1a1d30}
.cb-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;transition:width .3s ease}
.cb-fill-blue{background:linear-gradient(90deg,#2a5aa0,#4080d0);box-shadow:inset 0 0 6px #60a0f066}
.cb-fill-red{background:linear-gradient(90deg,#a02a30,#d04050);box-shadow:inset 0 0 6px #f0606066}
.cb-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:8px;letter-spacing:1.5px;color:var(--gold2);
  text-shadow:0 0 4px #000,0 0 2px #000;opacity:0;transition:opacity .2s}
.cb-status.cb-contested{opacity:1;color:#f0c040;animation:cbPulse 1.2s ease-in-out infinite}
.cb-status.cb-assault{opacity:1}
.cb-val{font-family:var(--font-u);font-size:11px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right}
@keyframes cbPulse{0%,100%{opacity:.7}50%{opacity:1}}
/* When the bar approaches full, pulse it to telegraph imminent defeat */
.cb-row.cb-critical .cb-fill{animation:cbCritical 1s ease-in-out infinite}
@keyframes cbCritical{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5) saturate(1.3)}}
#captureBar.cb-hidden{display:none}
/* Floating minimap overlay (replaces old right sidebar) */
#mmOv{position:absolute;right:12px;bottom:12px;width:180px;aspect-ratio:1.33;background:#0a0c14cc;border:1px solid var(--bord2);border-radius:6px;
  box-shadow:0 4px 16px #0008;overflow:hidden;z-index:30;backdrop-filter:blur(4px);zoom:var(--ui-scale)}
#mmOv canvas{width:100%;height:100%;display:block}
.ac{display:flex;align-items:center;gap:3px;padding:2px 3px;border-radius:3px;cursor:pointer;margin-bottom:1px;font-size:8px}
.ac:hover{background:#22223a}.ac.sel{background:#2a2a4a;border:1px solid #f0c04066}
.ai{width:16px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.af{flex:1}.af .n{font-weight:700;color:var(--text);font-size:9px}.af .c{color:var(--text3);font-size:7px}
.hbr{height:2px;background:#333;border-radius:1px;margin-top:1px}.hbr .f{height:100%;border-radius:1px}
.br{display:flex;gap:2px;flex-wrap:wrap}
.abBtn{padding:4px 8px;border-radius:4px;font-size:8px;cursor:pointer;position:relative;overflow:hidden}
.abBtn .cd{position:absolute;bottom:0;left:0;height:3px;background:#f0c04088;transition:width .1s}
.dm{font-size:7px;line-height:1.4;color:var(--text3)}
#scoreBar{height:6px;background:#2a2a4a;border-radius:3px;margin:3px 0;overflow:hidden;position:relative}
#scoreBar .sf{height:100%;position:absolute;top:0;transition:width .3s}
#deployBanner{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:var(--panel);
  border:2px solid var(--gold);border-radius:12px;padding:14px 32px;z-index:50;text-align:center;display:none;
  box-shadow:0 0 40px #d4a53440;backdrop-filter:blur(6px)}
#deployBanner h2{font-family:var(--font-d);font-size:18px;color:var(--gold);margin-bottom:8px;letter-spacing:3px}
#deployBanner .timer{font-size:32px;font-weight:900;color:#fff;font-family:var(--font-d)}
#deployBanner .hint{font-size:11px;color:var(--text3);margin-top:8px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* Left-side Unit HUD (was bottom-center; moved for widescreen readability) */
#btmHud{position:fixed;top:50px;left:-10px;bottom:0;display:none;z-index:30;flex-direction:column;align-items:stretch;gap:0;pointer-events:none;max-width:168px;overflow-y:auto;overflow-x:hidden}
#btmHud>*{pointer-events:auto}
#btmAbBar{display:none;position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:#0c0c14f0;border:1px solid var(--bord);border-radius:8px;
  padding:8px 12px;min-height:40px;gap:4px;align-items:center;backdrop-filter:blur(6px);flex-wrap:nowrap;justify-content:center;z-index:31;pointer-events:auto}
.abSlot{width:42px;height:42px;border-radius:6px;cursor:pointer;position:relative;display:flex;align-items:center;
  justify-content:center;font-size:16px;transition:.15s;overflow:hidden;flex-shrink:0;border:2px solid var(--bord2);background:var(--bg3)}
.abSlot:hover{border-color:var(--gold);transform:scale(1.08);box-shadow:0 0 12px #d4a53420}
.abSlot.abReady{border-color:var(--gold-dim);background:#1a1830}
.abSlot.abActive{border-color:var(--gold);background:#d4a53418;box-shadow:0 0 12px #d4a53440}
.abSlot.abCd{border-color:#1a1d30;background:#0a0c14;opacity:.55;cursor:default}
.abSlot.abCd:hover{transform:none;border-color:#1a1d30;box-shadow:none}
.abSlot .abCdFill{position:absolute;bottom:0;left:0;width:100%;background:#d4a53444;transition:height .15s}
.abSlot .abCdTxt{position:absolute;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}
.abSlot .abIco{width:26px;height:26px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:14px}
.abSlot .abKey{position:absolute;top:1px;right:3px;font-size:7px;color:var(--gold-dim);font-weight:700}
.abSlot .abName{position:absolute;bottom:-1px;font-size:6px;color:var(--text3);white-space:nowrap;text-align:center;width:100%;overflow:hidden}
.abSep{width:1px;height:30px;background:var(--bord);margin:0 4px;flex-shrink:0}
.abRegLabel{font-size:9px;color:var(--gold-dim);margin-right:6px;white-space:nowrap;font-weight:700}
#btmCards{display:flex;flex-direction:column;gap:3px;background:#0a0b14f0;border-right:1px solid var(--bord);border-radius:0 8px 8px 0;padding:4px 6px 4px 4px;backdrop-filter:blur(6px)}
.hu{width:150px;padding:5px 7px;background:var(--panel);border:1px solid var(--bord);border-radius:6px;cursor:pointer;
  transition:all .15s;position:relative}
.hu:hover{border-color:var(--gold-dim);background:var(--panel2)}
.hu.hsel{border-color:var(--gold);background:#161830;box-shadow:0 0 16px #d4a53425}
.hu.dead{opacity:.25;pointer-events:none}
.hu .hn{font-size:13px;font-weight:700;color:#ddd;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-u)}
.hu .hs{font-size:9px;color:var(--text2);display:flex;justify-content:space-between;margin-bottom:2px}
.hu .hbar{height:4px;background:#12152a;border-radius:2px;margin-bottom:1px;overflow:hidden;border:1px solid #1a1d30}
.hu .hbar .hf{height:100%;border-radius:2px;transition:width .2s}
.hu .hst{font-size:8px;color:var(--text3);display:flex;justify-content:space-between;gap:6px}
.hu .habtn{margin-top:2px;text-align:center;font-size:8px;padding:2px 4px;border-radius:3px;background:#d4a53418;
  border:1px solid #d4a53444;color:var(--gold);cursor:pointer;font-weight:600}
.hu .habtn.hcd{background:#1a1d30;border-color:#1e2340;color:var(--text3);cursor:default}
.hu .hkey{position:absolute;top:3px;right:6px;font-size:11px;color:var(--gold-dim);font-weight:700}
.hu-banner{position:absolute;top:4px;left:4px;width:18px;height:18px;
  border-radius:2px;box-shadow:0 1px 2px #000a,inset 0 0 0 1px #0008;
  image-rendering:auto;pointer-events:none}
.hu .hn{padding-left:22px}
/* ═══════════════ ESCAPE MENU ═══════════════ */
#escMenu{zoom:var(--ui-scale)}
#escPanel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);border:1px solid var(--bord2);
  border-radius:14px;padding:28px 36px;width:380px;
  box-shadow:0 0 60px #00000088,0 0 30px #d4a53410}
#escPanel h2{font-family:var(--font-d);font-size:20px;color:var(--gold);text-align:center;
  letter-spacing:4px;margin-bottom:20px;padding-bottom:12px;
  border-bottom:1px solid #d4a53433}
#escPanel h3{font-family:var(--font-d);font-size:11px;color:var(--gold-dim);letter-spacing:3px;
  margin-bottom:10px;text-transform:uppercase}
.esc-section{margin-bottom:16px}
.esc-btn{display:block;width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--bord2);
  background:var(--bg3);color:var(--text);font-family:var(--font-u);font-size:14px;font-weight:700;
  cursor:pointer;transition:all .15s;text-align:center;margin-bottom:6px;letter-spacing:0.5px}
.esc-btn:hover{background:var(--panel2);border-color:var(--gold-dim);transform:translateY(-1px);
  box-shadow:0 4px 12px #0004}
.esc-resume{background:linear-gradient(135deg,#1a2040,#1e2848);border-color:#4080d044;color:#8ab4e8}
.esc-resume:hover{background:linear-gradient(135deg,#1e2848,#253258);border-color:#4080d088;color:#aaccf0}
.esc-save{font-size:12px;padding:10px 14px;background:#10131f}
.esc-save:hover{background:#161a30}
.esc-leave{background:#1a1018;border-color:#d0405044;color:#e07070}
.esc-leave:hover{background:#201420;border-color:#d04050;color:#ff8888}
.esc-opt{margin-bottom:12px}
.esc-opt label{display:block;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600;letter-spacing:0.5px}
.esc-slider-row{display:flex;align-items:center;gap:10px}
.esc-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
  background:#1a1d30;outline:none;cursor:pointer}
.esc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid #0a0c14;box-shadow:0 0 8px #d4a53440}
.esc-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid #0a0c14}
.esc-val{font-size:13px;font-weight:700;color:var(--gold2);min-width:48px;text-align:right;font-family:var(--font-u)}
.esc-auto-btn{padding:3px 8px;border-radius:4px;border:1px solid var(--bord2);background:var(--bg3);
  color:var(--text3);font-size:9px;font-weight:700;cursor:pointer;letter-spacing:1px;font-family:var(--font-u);
  transition:all .15s;flex-shrink:0}
.esc-auto-btn:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--panel2)}
.esc-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text2)}
.esc-toggle-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.esc-footer{text-align:center;font-size:10px;color:var(--text3);margin-top:16px;letter-spacing:1px}
/* ═══════════════ ADAPTIVE UI SCALING ═══════════════ */
/* All battle HUD elements scale with viewport via zoom */
#btmHud,#btmAbBar,#btmStatusIcons,#killFeed,#deployBanner,#battleChat{zoom:var(--ui-scale)}
/* Status row above the ability bar — buffs, debuffs, neutral markers for the
   primary selected regiment. Populated each HUD tick from updBtmHud. */
#btmStatusIcons{display:none;position:fixed;bottom:86px;left:50%;transform:translateX(-50%);z-index:31;
  gap:5px;max-width:calc(100vw - 48px);flex-wrap:wrap;justify-content:center;pointer-events:auto}
#btmStatusIcons.active{display:flex}
.stIc{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:14px;border:2px solid transparent;background:transparent;cursor:help;transition:.15s;flex-shrink:0}
.stIc:hover{transform:scale(1.15)}
.stIc.buff{border-color:#38b060;box-shadow:0 0 6px #38b06055}
.stIc.debuff{border-color:#e04040;box-shadow:0 0 6px #e0404055}
.stIc.stance{border-color:#4090e0;box-shadow:0 0 7px #4090e066}
.stIc.neutral{border-color:#888}
#battleChat{position:fixed;left:12px;bottom:12px;width:280px;height:148px;display:none;z-index:30;
  flex-direction:column;background:#0a0b14d8;border:1px solid var(--bord);border-radius:6px;
  backdrop-filter:blur(6px);padding:4px;pointer-events:auto}
#battleChat.active{display:flex}
#battleChatLog{flex:1;overflow-y:auto;font-size:11px;line-height:1.35;padding:4px 6px;color:var(--bright)}
#battleChatLog .bc-line{margin:0 0 2px 0;word-wrap:break-word}
#battleChatLog .bc-name{font-weight:700;margin-right:4px}
#battleChatLog .bc-system{color:var(--dim);font-style:italic}
#battleChatInput{margin-top:4px;background:#1a1a22;border:1px solid var(--bord2);border-radius:3px;
  padding:4px 6px;color:#fff;font-size:12px;outline:none;font-family:inherit}
#battleChatInput:focus{border-color:var(--gold)}
#bTop{zoom:var(--ui-scale);height:calc(40px)}
#scoreboardOv{zoom:var(--ui-scale)}
/* Enhanced unit cards */
.hu{width:155px;padding:5px 7px}
.hu .hn{font-size:11px;margin-bottom:2px}
.hu .hs{font-size:9px;margin-bottom:2px}
.hu .hbar{height:4px;margin-bottom:1px;position:relative}
.hu .hbar-wrap{display:flex;align-items:center;gap:3px;margin-bottom:2px}
.hu .hbar-wrap .hbar{flex:1;margin-bottom:0}
.hu .hbar-label{font-size:8px;font-weight:700;width:10px;text-align:center;flex-shrink:0}
.hu .hbar-val{font-size:8px;font-weight:700;width:28px;text-align:right;flex-shrink:0}
.hu .hst{font-size:8px;gap:4px}
.hu .hkey{font-size:11px;top:3px;right:6px}
.hu .habtn{font-size:8px;padding:2px 4px}
.hu .stat-row{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap}
.hu .stat-tag{font-size:7px;padding:1px 3px;border-radius:2px;background:#ffffff08;border:1px solid #ffffff10;font-weight:600;display:flex;align-items:center;gap:1px}
/* Enhanced ability bar */
.abSlot{width:48px;height:48px;border-radius:7px}
.abSlot .abIco{width:30px;height:30px;font-size:16px}
.abSlot .abCdTxt{font-size:11px}
.abSlot .abKey{font-size:8px;top:2px;right:4px}
.abSlot .abName{font-size:7px;bottom:0}
.abRegLabel{font-size:10px}
/* Kill feed — anchored to top-right; no sidebar to dodge anymore */
#killFeed{width:200px;right:10px}
/* Escape-menu guide */
.esc-guide{background:var(--bg3);border:1px solid var(--bord);border-radius:6px;padding:8px 12px}
.esc-guide summary{cursor:pointer;font-family:var(--font-u);font-size:12px;font-weight:700;color:var(--text);letter-spacing:0.5px;user-select:none}
.esc-guide summary:hover{color:var(--gold2)}
.esc-guide[open] summary{color:var(--gold);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #1e234022}
.esc-guide-body{font-size:11px;line-height:1.55;color:var(--text2)}
.esc-guide-body b{color:var(--gold-dim);font-family:var(--font-d);letter-spacing:1.5px;font-size:10px;text-transform:uppercase}
/* ═══════════════ TERRAIN CODEX ═══════════════ */
.esc-terrain{background:#12172a;border-color:#5a7aa044;color:#a0c0e8}
.esc-terrain:hover{background:#181e36;border-color:#5a7aa0;color:#c0d8f0}
#terrainCodex{position:fixed;inset:0;z-index:260;zoom:var(--ui-scale)}
#tcBackdrop{position:absolute;inset:0;background:#000c;backdrop-filter:blur(8px);cursor:pointer}
#tcPanel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(960px,94vw);height:min(640px,86vh);
  background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);
  border:1px solid var(--bord2);border-radius:14px;
  box-shadow:0 0 80px #000b,0 0 40px #d4a53418;
  display:flex;flex-direction:column;overflow:hidden}
#tcHeader{padding:18px 28px 14px;border-bottom:1px solid #d4a53322;position:relative;flex-shrink:0}
#tcTitle{font-family:var(--font-d);font-size:20px;color:var(--gold);letter-spacing:4px;text-align:center}
#tcSubtitle{text-align:center;font-size:11px;color:var(--text2);margin-top:4px;letter-spacing:1px}
#tcClose{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:6px;
  border:1px solid var(--bord);background:var(--bg3);color:var(--text2);cursor:pointer;
  font-size:14px;font-weight:700;transition:all .15s}
#tcClose:hover{background:#2a1418;border-color:#d04050;color:#ff8888}
#tcBody{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0}
#tcLeft{border-right:1px solid var(--bord);display:flex;flex-direction:column;min-height:0;background:#0a0d18}
#tcSearchRow{padding:10px 12px;border-bottom:1px solid var(--bord);flex-shrink:0}
#tcSearch{width:100%;padding:7px 10px;border-radius:5px;border:1px solid var(--bord2);
  background:#05070d;color:var(--text);font-size:12px;font-family:var(--font-u);outline:none}
#tcSearch:focus{border-color:var(--gold-dim)}
#tcList{flex:1;overflow-y:auto;padding:6px 0;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
#tcList::-webkit-scrollbar{width:6px}
#tcList::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px}
.tc-group{padding:10px 14px 4px;font-family:var(--font-d);font-size:9px;letter-spacing:2.5px;
  color:var(--gold-dim);text-transform:uppercase;border-bottom:1px dotted #1e234044;margin-bottom:2px}
.tc-tile{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;
  border-left:3px solid transparent;transition:all .12s;font-size:12px}
.tc-tile:hover{background:#12172a;border-left-color:var(--gold-dim)}
.tc-tile.tc-active{background:#1a2240;border-left-color:var(--gold);color:var(--gold2)}
.tc-tile.tc-hidden{display:none}
.tc-swatch{width:28px;height:28px;border-radius:4px;border:1px solid #000;flex-shrink:0;
  background-size:cover;background-position:center;position:relative}
.tc-swatch.tc-blocked::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:14px;color:#ff6060;text-shadow:0 0 3px #000,0 0 3px #000}
.tc-tile-name{font-family:var(--font-u);font-weight:700;color:var(--text);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-tile-badge{font-size:9px;padding:2px 5px;border-radius:3px;background:#ffffff08;
  color:var(--text3);font-family:var(--font-d);letter-spacing:1px}
.tc-tile-badge.tc-t-good{background:#2a4a2a44;color:#80d080}
.tc-tile-badge.tc-t-bad{background:#4a2a2a44;color:#d08080}
#tcRight{overflow-y:auto;padding:20px 28px;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
#tcRight::-webkit-scrollbar{width:8px}
#tcRight::-webkit-scrollbar-thumb{background:var(--bord);border-radius:4px}
#tcDetail{min-height:100%}
.tc-d-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid #d4a53322}
.tc-d-img{width:108px;height:108px;border-radius:8px;border:2px solid var(--bord2);
  background:#05070d center/cover no-repeat;flex-shrink:0;box-shadow:inset 0 0 20px #000,0 0 12px #0008}
.tc-d-img.tc-d-blocked{position:relative}
.tc-d-img.tc-d-blocked::after{content:'IMPASSABLE';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-d);font-size:10px;
  letter-spacing:2px;color:#ff6060;background:#000a}
.tc-d-titles{flex:1}
.tc-d-name{font-family:var(--font-d);font-size:22px;color:var(--gold);letter-spacing:3px;margin-bottom:4px}
.tc-d-id{font-size:10px;color:var(--text3);letter-spacing:1px;margin-bottom:8px}
.tc-d-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.tc-d-tag{font-size:9px;padding:3px 7px;border-radius:3px;background:#1a1d30;border:1px solid var(--bord);
  color:var(--text2);font-family:var(--font-d);letter-spacing:1px}
.tc-d-tag.tc-good{background:#1a2a1a;border-color:#2a4a2a;color:#80d080}
.tc-d-tag.tc-bad{background:#2a1a1a;border-color:#4a2a2a;color:#d08080}
.tc-d-tag.tc-gold{background:#2a2416;border-color:#5a4820;color:var(--gold2)}
.tc-d-flavor{font-size:12px;color:var(--text2);font-style:italic;line-height:1.5}
.tc-section{margin-bottom:18px}
.tc-section-title{font-family:var(--font-d);font-size:10px;color:var(--gold-dim);letter-spacing:2.5px;
  margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #1e234044;text-transform:uppercase}
.tc-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.tc-stat{display:flex;flex-direction:column;gap:3px}
.tc-stat-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px}
.tc-stat-label{color:var(--text2);font-weight:600}
.tc-stat-val{font-family:var(--font-u);font-weight:700;font-variant-numeric:tabular-nums}
.tc-stat-val.tc-good{color:#80d080}
.tc-stat-val.tc-bad{color:#d08080}
.tc-stat-val.tc-neutral{color:var(--text3)}
.tc-bar{height:4px;background:#0a0c14;border-radius:2px;position:relative;overflow:hidden;border:1px solid #12152a}
.tc-bar-fill{position:absolute;top:0;bottom:0;background:var(--gold-dim);border-radius:2px}
.tc-bar-fill.tc-good{background:linear-gradient(90deg,#3a6a3a,#60c060)}
.tc-bar-fill.tc-bad{background:linear-gradient(90deg,#6a3a3a,#c06060)}
.tc-bar-zero{position:absolute;top:-2px;bottom:-2px;width:1px;background:#555;left:50%}
.tc-notes{font-size:12px;color:var(--text);line-height:1.6;background:#0a0d18;
  border:1px solid var(--bord);border-radius:6px;padding:12px 14px}
.tc-notes ul{margin:4px 0 0 0;padding-left:18px}
.tc-notes li{margin-bottom:4px}
.tc-notes b{color:var(--gold2);font-family:var(--font-d);letter-spacing:1px;font-size:10px;text-transform:uppercase}
.tc-empty{text-align:center;padding:60px 20px;color:var(--text3);font-size:13px;font-style:italic}
#tcFooter{padding:10px 24px;border-top:1px solid var(--bord);background:#05070d;flex-shrink:0}
.tc-foot-hint{font-size:10px;color:var(--text2);line-height:1.5;text-align:center}
.tc-foot-hint b{color:var(--gold2);font-family:var(--font-d);letter-spacing:1px;font-size:9px;text-transform:uppercase}

/* ═══════════════ LOBBY SCREEN ═══════════════ */
#lobbyScr{flex-direction:column;background:linear-gradient(180deg,#060810 0%,#0a0e1a 40%,#0e1220 100%)}
#lobbyScr::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,#1a1530 0%,transparent 70%);pointer-events:none;z-index:0}
#lobTop{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  background:linear-gradient(180deg,#12152a 0%,#0a0d1a 100%);border-bottom:1px solid var(--bord);box-shadow:0 4px 20px #0008}
#lobTop .lob-brand{font-family:var(--font-d);font-size:18px;font-weight:900;letter-spacing:5px;color:var(--gold);text-shadow:0 0 20px #d4a53440}
#lobTop .lob-meta{display:flex;align-items:center;gap:10px}
.lob-label{font-size:9px;color:var(--text3);letter-spacing:2px;text-transform:uppercase}
.lob-code{font-family:var(--font-d);font-size:22px;font-weight:900;letter-spacing:6px;color:var(--gold2);
  background:#1a1a22;padding:6px 14px;border:1px solid var(--bord-hi);border-radius:4px;cursor:pointer;user-select:all}
.lob-code:hover{background:#22222e}
.lob-mode-val{font-family:var(--font-d);font-size:12px;letter-spacing:2px;color:var(--text);padding:4px 10px;background:#1a1a22;border:1px solid var(--bord);border-radius:4px}
.lob-public{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);cursor:pointer}
.lob-public input{accent-color:var(--gold)}
.lob-top-actions{display:flex;gap:8px}

#lobBody{flex:1;display:flex;gap:18px;padding:20px 24px;min-height:0;position:relative;z-index:1}
#lobTeams{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0}
.lob-team{background:linear-gradient(180deg,var(--panel) 0%,#0d1020 100%);border:1px solid var(--bord);border-radius:6px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.lob-team-red{border-color:#3a1820}
.lob-team-blue{border-color:#182838}
.lob-team-head{font-family:var(--font-d);font-size:11px;letter-spacing:3px;color:var(--text);padding:10px 14px;
  background:#0a0c16;border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:8px}
.lob-team-red .lob-team-head{color:#e08090}
.lob-team-blue .lob-team-head{color:#80a0e0;justify-content:flex-end}
.lob-team-n{color:var(--text3);margin-left:auto;font-size:10px;letter-spacing:1px}
.lob-team-blue .lob-team-n{margin-left:0;margin-right:auto}
.lob-team-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 6px currentColor}
.lob-dot-red{background:var(--red);color:var(--red)}
.lob-dot-blue{background:var(--blue);color:var(--blue)}
.lob-team-list{flex:1;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.lob-team-list::-webkit-scrollbar{width:4px}.lob-team-list::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}
.lob-empty{color:var(--text3);font-size:11px;font-style:italic;text-align:center;padding:14px}

.lob-pl{display:flex;align-items:center;gap:10px;background:#0a0d18;border:1px solid var(--bord);
  border-radius:4px;padding:8px 10px;margin-bottom:6px;font-size:12px}
.lob-pl-me{border-color:var(--bord-hi);background:#141126}
.lob-pl-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;border:1px solid var(--bord);object-fit:cover;background:#222}
.lob-pl-av-ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:900;color:var(--gold2);background:#18182a}
.lob-pl-name{flex:1;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lob-pl-you{background:var(--gold);color:#0a0a10;font-family:var(--font-d);font-size:8px;letter-spacing:1px;padding:1px 5px;border-radius:2px;font-weight:900}
.lob-pl-host{background:#2a1f3a;color:#d0a0ff;font-family:var(--font-d);font-size:8px;letter-spacing:1px;padding:1px 5px;border-radius:2px;font-weight:900;border:1px solid #6a4a9a}
.lob-pl-race{font-size:10px;color:var(--text2);text-transform:capitalize;padding:2px 6px;background:#0e1020;border:1px solid var(--bord);border-radius:3px}
.lob-pl-ready{color:var(--green);font-weight:900;font-size:14px}
.lob-pl-unready{color:var(--text3);font-size:14px}

#lobChat{width:320px;flex-shrink:0;background:linear-gradient(180deg,var(--panel) 0%,#0d1020 100%);border:1px solid var(--bord);border-radius:6px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.lob-chat-title{font-family:var(--font-d);font-size:10px;letter-spacing:3px;color:var(--gold-dim);padding:10px 14px;background:#0a0c16;border-bottom:1px solid var(--bord)}
#lobbyChatLog{flex:1;overflow-y:auto;padding:10px 12px;font-size:12px;line-height:1.5;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
#lobbyChatLog::-webkit-scrollbar{width:4px}#lobbyChatLog::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}
.lob-chat-line{margin-bottom:4px;word-wrap:break-word}
.lob-chat-name{font-weight:700}
.lob-chat-input-row{display:flex;gap:4px;padding:8px;border-top:1px solid var(--bord);background:#0a0c16}
#lobbyChatInput{flex:1;padding:6px 10px;background:#0a0d18;border:1px solid var(--bord);color:var(--text);font-family:inherit;font-size:12px;border-radius:3px}
#lobbyChatInput:focus{outline:none;border-color:var(--bord-hi)}

#lobFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;
  background:linear-gradient(0deg,#12152a 0%,#0a0d1a 100%);border-top:1px solid var(--bord);position:relative;z-index:2}
.lob-foot-left,.lob-foot-right{display:flex;gap:10px;align-items:center}
.lob-foot-center{flex:1;text-align:center}
.lob-host-hint{font-size:11px;color:var(--text2);letter-spacing:1px}
.lob-foot-legal{font-size:9px;color:#5a5a68;letter-spacing:1px;margin-top:4px}
.lob-foot-legal a{color:#7a7a88;text-decoration:none}
.lob-foot-legal a:hover{color:#d4a534}
.lob-foot-sep{color:#333;margin:0 4px}
#lobbyReadyBtn.lob-ready-active{background:linear-gradient(180deg,#38b060 0%,#2a8048 100%);color:#fff;border-color:#38b06088}

/* ═══════════════ ROOM BROWSER ═══════════════ */
.rb-panel{background:#111526;border:1px solid var(--bord-hi);border-radius:8px;min-width:620px;max-width:820px;width:90%;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.6)}
.rb-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--bord);background:#0a0c16;border-radius:8px 8px 0 0}
.rb-head h2{font-family:var(--font-d);font-size:14px;letter-spacing:4px;color:var(--gold);flex:1;margin:0}
.rb-legend,.rb-row{display:grid;grid-template-columns:80px 140px 1fr 70px 60px 80px;gap:10px;align-items:center}
.rb-legend{padding:8px 20px;border-bottom:1px solid var(--bord);font-size:9px;letter-spacing:2px;color:var(--text3);text-transform:uppercase}
.rb-body{overflow-y:auto;padding:8px 20px 14px;min-height:120px;max-height:60vh}
.rb-row{padding:8px 10px;border:1px solid var(--bord);background:#0a0d18;border-radius:4px;margin-bottom:6px;font-size:12px}
.rb-row:hover{border-color:var(--bord-hi);background:#12142a}
.rb-code{font-family:var(--font-d);font-weight:900;letter-spacing:3px;color:var(--gold2)}
.rb-mode{color:var(--text);text-transform:capitalize}
.rb-host{color:var(--text2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rb-count{font-family:var(--font-d);color:var(--text);text-align:center}
.rb-queue{background:#2a1a3a;color:#c090ff;font-size:8px;letter-spacing:1px;padding:2px 6px;border-radius:2px;font-weight:900;text-align:center;font-family:var(--font-d)}
.rb-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:12px;font-style:italic}

/* Admin controls in lobby */
.lob-pl-admin{background:#3a2a18;color:#ffc080;font-family:var(--font-d);font-size:8px;letter-spacing:1px;padding:1px 5px;border-radius:2px;font-weight:900;border:1px solid #6a4a2a}
.lob-pl-mod{background:#2a0810;color:#f08080;border:1px solid #4a1018;border-radius:3px;font-size:10px;padding:2px 6px;margin-left:2px;cursor:pointer;opacity:.7}
.lob-pl-mod:hover{opacity:1;background:#3a0814}

/* ═══════════════════════════════════════════════════════════════════
   LAUNCHER SHELL — top-nav tabs + persistent social panel + bottom bar
   Lifted (and adapted) from the Unreal-era lobby prototype. The goal
   is a League-of-Legends-style hub where Home/Builder/Collection/Shop/
   Hall all live as tabs inside a single persistent shell, with a
   sticky social panel on the right for friends/party/chat.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Depth palette — layered so each panel "floats" above its parent. */
  --bg-base:     var(--bg);
  --bg-surface:  rgba(8,10,18,0.95);
  --bg-panel:    var(--panel);
  --bg-card:     var(--panel2);
  --bg-elevated: rgba(25,28,45,0.95);
  --border:      var(--bord);
  --border-hover:rgba(212,165,52,0.25);
  --bright:      var(--text);
  --dim:         var(--text2);
  --gold-glow:   0 0 12px rgba(212,165,52,0.3);
  --pos:  rgb(51, 191, 77);
  --neg:  rgb(217, 64, 51);
  --warn: rgb(230, 140, 38);
  --team-red-dim:  rgba(90, 28, 34, 0.55);
  --team-blue-dim: rgba(28, 38, 90, 0.55);
  --gap: 8px;
  --gap-lg: 16px;
  --radius: 6px;
  --radius-sm: 4px;
  --nav-height: 44px;
  --social-width: 240px;
}

/* ── Typography utilities ─────────────────────────────── */
.section-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);margin:10px 0 6px;text-transform:uppercase}
.section-title{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.tab-title{font-size:18px;font-weight:700;letter-spacing:3px;color:var(--gold);margin-bottom:14px;font-family:var(--font-d)}
.empty-state{color:var(--dim);font-size:12px;padding:20px;text-align:center;font-style:italic}
.empty-state-sm{color:var(--dim);font-size:10px;padding:6px;text-align:center;font-style:italic}

/* ── Top nav bar ──────────────────────────────────────── */
#bldScr.has-launcher{flex-direction:column}
#launcherNav{height:var(--nav-height);background:var(--bg-surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:relative;z-index:5;flex-shrink:0}
#launcherNav::after{content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.nav-left{display:flex;align-items:center;gap:0}
.nav-logo{font-family:var(--font-d);font-size:15px;font-weight:900;letter-spacing:4px;color:var(--gold);
  margin-right:20px;text-shadow:0 0 10px rgba(212,165,52,0.25);display:flex;align-items:center;gap:8px}
.beta-tag{font-family:var(--font-u);font-size:9px;font-weight:700;letter-spacing:1.5px;
  color:var(--gold-dim);background:rgba(212,165,52,0.1);border:1px solid var(--gold-dim);
  padding:1px 5px;border-radius:2px;text-shadow:none;cursor:help;vertical-align:middle;
  margin-left:6px;line-height:1}
.nav-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dim);
  font-family:var(--font-u);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  padding:0 14px;height:var(--nav-height);cursor:pointer;transition:color .15s,border-color .15s;
  line-height:var(--nav-height)}
.nav-tab:hover{color:var(--bright)}
.nav-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-currency{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--gold-dim);
  padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(0,0,0,0.25)}
.nav-currency[data-live="0"]{opacity:.5}
.currency-icon{font-size:13px}
.nav-stats{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--dim);letter-spacing:1px;
  text-transform:uppercase;padding:2px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:rgba(0,0,0,0.25);font-weight:700}
.nav-stats .ns-block{display:flex;align-items:center;gap:4px}
.nav-stats .ns-block span:not(.ns-dot){color:var(--bright)}
.nav-stats .ns-sep{color:var(--text3)}
.nav-stats .ns-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.nav-stats .ns-dot.ns-online{background:var(--pos);box-shadow:0 0 4px var(--pos)}
.nav-stats .ns-dot.ns-match{background:var(--gold);box-shadow:0 0 4px var(--gold)}
/* ── Reward banner (live push from social socket) ─────────
   Drop-down banner that slides in from under the top nav when a
   rewardNotification arrives via the social socket. Prominent enough
   to catch the user's eye while idle in the launcher, but has an X
   for quick dismiss and auto-hides after 5s. Clicking the body opens
   the full match report modal. */
.reward-banner{position:fixed;top:calc(var(--nav-height) + 8px);left:50%;transform:translateX(-50%);
  z-index:600;min-width:360px;max-width:480px;cursor:pointer;
  background:linear-gradient(180deg,#1e1e28 0%,#15151c 100%);
  border:1px solid var(--gold-dim);border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,0.6),0 0 18px rgba(255,215,0,0.22);
  padding:12px 46px 12px 16px;display:flex;flex-direction:column;gap:3px;
  color:var(--bright);animation:rbIn 320ms cubic-bezier(0.2,0.9,0.3,1)}
.reward-banner:hover{border-color:var(--gold);box-shadow:0 14px 36px rgba(0,0,0,0.7),0 0 22px rgba(255,215,0,0.35)}
.reward-banner .rb-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reward-banner .rb-head{font-size:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.reward-banner .rb-head.win{color:#60d080;text-shadow:0 0 8px rgba(96,208,128,0.35)}
.reward-banner .rb-head.loss{color:#d06060}
.reward-banner .rb-head.ineligible{color:#d0a060}
.reward-banner .rb-gold{font-size:18px;font-weight:700;color:var(--gold);margin-left:auto}
.reward-banner .rb-sub{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.8px;margin-top:2px}
.reward-banner .rb-cta{font-size:10px;color:var(--dim);text-align:right;margin-top:4px;
  text-transform:uppercase;letter-spacing:0.8px;font-weight:700}
.reward-banner:hover .rb-cta{color:var(--gold)}
.reward-banner .rb-close{position:absolute;top:6px;right:8px;width:26px;height:26px;
  background:transparent;border:none;color:var(--dim);font-size:16px;cursor:pointer;
  border-radius:4px;line-height:1;display:flex;align-items:center;justify-content:center}
.reward-banner .rb-close:hover{color:var(--bright);background:rgba(255,255,255,0.08)}
.reward-banner.rb-out{opacity:0;transform:translateX(-50%) translateY(-12px);transition:opacity 280ms,transform 280ms}
@keyframes rbIn{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* ── Notification bell ────────────────────────────────── */
.nav-bell{position:relative;background:rgba(0,0,0,0.25);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;color:var(--bright);font-size:14px;
  display:flex;align-items:center;gap:6px;height:28px;line-height:1}
.nav-bell:hover{border-color:var(--gold-dim);background:rgba(255,215,0,0.08)}
.nav-bell .bell-icon{font-size:14px;filter:grayscale(0.2)}
.nav-bell .bell-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#d04050;color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 6px rgba(208,64,80,0.6)}
#notifDropdown{position:fixed;top:calc(var(--nav-height) + 4px);right:68px;width:380px;max-height:480px;
  background:#16161e;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(0,0,0,0.6);z-index:400;display:flex;flex-direction:column;overflow:hidden}
#notifDropdown .notif-header{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.3)}
#notifDropdown .notif-title{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
#notifDropdown .notif-clear{background:transparent;border:1px solid var(--border);color:var(--dim);
  font-size:10px;padding:3px 8px;border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px}
#notifDropdown .notif-clear:hover{color:var(--bright);border-color:var(--gold-dim)}
#notifDropdown .notif-list{flex:1;overflow-y:auto;padding:4px 0;min-height:60px}
#notifDropdown .notif-row{display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid rgba(80,80,100,0.15);transition:background 120ms}
#notifDropdown .notif-row:hover{background:rgba(255,215,0,0.05)}
#notifDropdown .notif-row.unseen{background:rgba(80,160,255,0.08)}
#notifDropdown .notif-row.unseen:hover{background:rgba(80,160,255,0.12)}
#notifDropdown .nr-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}
#notifDropdown .nr-result.win{color:#60d080}
#notifDropdown .nr-result.loss{color:#d06060}
#notifDropdown .nr-result.ineligible{color:#b0b0b0}
#notifDropdown .nr-result.referral{color:var(--gold)}
#notifDropdown .nr-gold{color:var(--gold)}
#notifDropdown .nr-sub{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px}
#notifDropdown .notif-empty{padding:30px 14px;text-align:center;color:var(--dim);font-size:12px}
#notifDropdown .notif-footer{padding:8px 14px;border-top:1px solid var(--border);
  background:rgba(0,0,0,0.2);font-size:10px;color:var(--text3);text-align:center}
/* ── Match report modal (notification drill-down) ────── */
#matchReportOv{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center}
#matchReportOv #mrBackdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px)}
#matchReportOv #mrPanel{position:relative;width:min(780px,92vw);max-height:88vh;overflow-y:auto;
  background:#1a1a22;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:22px 24px;box-shadow:0 16px 40px rgba(0,0,0,0.7)}
#matchReportOv #mrClose{position:absolute;top:10px;right:12px;background:transparent;border:none;
  font-size:18px;color:var(--dim);cursor:pointer;width:28px;height:28px;line-height:1}
#matchReportOv #mrClose:hover{color:var(--bright)}
#matchReportOv .mr-head{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
#matchReportOv .mr-title{font-size:20px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase}
#matchReportOv .mr-sub{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
#matchReportOv .mr-result{font-size:16px;font-weight:700;margin:8px 0}
#matchReportOv .mr-result.win{color:#60d080}
#matchReportOv .mr-result.loss{color:#d06060}
#matchReportOv .mr-result.ineligible{color:#d0a060}
#matchReportOv .mr-total{font-size:28px;font-weight:700;color:var(--gold);margin:8px 0}
#matchReportOv .mr-total .mr-base{font-size:13px;color:var(--dim);font-weight:400;margin-left:8px}
#matchReportOv .mr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:12px}
#matchReportOv .mr-cat{background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:4px;
  padding:8px 10px;font-size:11px}
#matchReportOv .mr-cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
#matchReportOv .mr-cat-name{color:var(--bright);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;font-size:10px}
#matchReportOv .mr-cat-gold{color:var(--gold);font-weight:700;font-size:13px}
#matchReportOv .mr-cat-bar{height:4px;background:rgba(0,0,0,0.5);border-radius:2px;overflow:hidden;margin-bottom:4px}
#matchReportOv .mr-cat-fill{height:100%;background:linear-gradient(90deg,#60a0d0,#80c0f0);transition:width 400ms}
#matchReportOv .mr-cat-detail{color:var(--dim);font-size:10px;display:flex;justify-content:space-between}
#matchReportOv .mr-mul{margin-top:12px;padding:10px 12px;background:rgba(96,160,208,0.08);
  border:1px solid rgba(96,160,208,0.3);border-radius:4px;font-size:11px;color:var(--bright)}
#matchReportOv .mr-mul-row{display:flex;justify-content:space-between;margin:2px 0}
#matchReportOv .mr-ineligible{color:var(--dim);font-size:12px;padding:16px;border:1px dashed rgba(208,160,96,0.4);
  border-radius:4px;background:rgba(208,160,96,0.05);margin:8px 0;line-height:1.5}
#matchReportOv .mr-score{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
#matchReportOv .mr-score h4,#matchReportOv .mr-yours h4,#matchReportOv .mr-regs h4{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin:0 0 10px 0}
#matchReportOv .mr-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:6px;padding:14px}
#matchReportOv .mr-team{text-align:center}
#matchReportOv .mr-team-red .mr-team-name{color:#d06060}
#matchReportOv .mr-team-blue .mr-team-name{color:#6090d0}
#matchReportOv .mr-team-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;opacity:0.8}
#matchReportOv .mr-team.mr-team-win .mr-team-name{opacity:1;font-size:12px}
#matchReportOv .mr-team-score{font-size:28px;font-weight:700;color:var(--bright)}
#matchReportOv .mr-team.mr-team-win .mr-team-score{color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,0.3)}
#matchReportOv .mr-vs{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:700}
#matchReportOv .mr-score-meta{margin-top:8px;text-align:center;font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:0.8px}
#matchReportOv .mr-yours{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
#matchReportOv .mr-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#matchReportOv .mr-stat{background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:4px;
  padding:10px 8px;text-align:center}
#matchReportOv .mr-stat-val{display:block;font-size:18px;font-weight:700;color:var(--bright);margin-bottom:2px}
#matchReportOv .mr-stat-lbl{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.8px}
#matchReportOv .mr-regs{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
#matchReportOv .mr-reg{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(80,80,100,0.15)}
#matchReportOv .mr-reg:last-child{border-bottom:none}
#matchReportOv .mr-reg-banner{width:20px;height:20px;border-radius:2px;box-shadow:0 1px 2px #000a,inset 0 0 0 1px #0008;flex-shrink:0}
#matchReportOv .mr-reg-name{color:var(--bright);flex:1}
#matchReportOv .mr-reg-alive{color:#60d080}
#matchReportOv .mr-reg-dead{color:#d06060}
#matchReportOv .mr-elo{font-size:12px;color:var(--dim);margin-top:6px}
#matchReportOv .mr-elo-delta.pos{color:#60d080}
#matchReportOv .mr-elo-delta.neg{color:#d06060}

/* ── Middle area: content + social panel ──────────────── */
#bldMiddle{flex:1;display:flex;overflow:hidden;position:relative;z-index:1}
#bldContent{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column}
.tab-content{display:none;width:100%;height:100%;overflow-y:auto;padding:14px 18px}
.tab-content.active{display:block}
#tabBuilder{padding:0;overflow:hidden} /* builder has its own internal layout */
#tabBuilder.active{display:flex;flex-direction:column}

/* ── Social panel ─────────────────────────────────────── */
#socialPanel{width:var(--social-width);min-width:var(--social-width);background:var(--bg-surface);
  border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.social-section{padding:10px 12px}
.social-friends{flex:1;overflow-y:auto;min-height:100px}
.social-chat{display:flex;flex-direction:column;min-height:140px;max-height:180px}
.social-header{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.social-header .soc-count{color:var(--dim);font-weight:400}
.social-header .soc-stub{color:var(--gold-dim);font-weight:700;font-size:8px;letter-spacing:1px;
  background:rgba(212,165,52,0.08);border:1px solid var(--gold-dim);padding:1px 5px;border-radius:2px}
.social-divider{height:1px;background:var(--border);margin:0}
.party-list{min-height:28px;margin-bottom:6px}
.friends-list{display:flex;flex-direction:column;gap:2px}
.friend-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s;font-size:11px}
.friend-item:hover{background:rgba(128,128,140,0.08)}
.friend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.friend-dot.online{background:var(--pos);box-shadow:0 0 4px var(--pos)}
.friend-dot.offline{background:var(--dim);opacity:0.4}
.friend-dot.in-game{background:var(--gold);box-shadow:0 0 4px var(--gold)}
.friend-dot.requesting{background:var(--gold);box-shadow:0 0 4px var(--gold);animation:friend-pulse 1.5s ease-in-out infinite}
.friend-dot.pending{background:var(--dim);border:1px solid var(--gold-dim)}
@keyframes friend-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.friend-name{flex:1;color:var(--bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-name.offline{color:var(--dim)}
.friend-status{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}
.friend-subhead{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  margin:8px 0 3px;padding:0 2px;display:flex;align-items:center;gap:6px}
.friend-subhead .friend-count{background:rgba(212,165,52,0.15);border:1px solid var(--gold-dim);
  color:var(--gold);font-size:8px;padding:0 4px;border-radius:8px;letter-spacing:0;font-weight:700}
.friend-add-row{display:flex;gap:4px;margin-bottom:6px}
.friend-add-row input{flex:1;padding:4px 8px;font-size:11px;background:var(--bg-card);
  color:var(--bright);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none}
.friend-add-row input:focus{border-color:var(--gold-dim)}
.friend-add-btn{padding:0 10px;font-size:13px;font-weight:700;line-height:1}
.friend-pending{opacity:0.95}
.friend-btn{background:transparent;border:1px solid var(--border);color:var(--dim);
  width:20px;height:20px;padding:0;border-radius:3px;cursor:pointer;font-size:11px;line-height:1;
  flex-shrink:0;transition:color .1s,border-color .1s}
.friend-btn:hover{color:var(--bright);border-color:var(--gold-dim)}
.friend-btn.accept:hover{color:var(--pos);border-color:var(--pos)}
.friend-btn.reject:hover{color:var(--neg);border-color:var(--neg)}
/* Inline party-invite button (one-click invite on online friend rows).
   Gold-tinted so it reads as an affirmative action, not a destructive one. */
.friend-btn.invite{color:var(--gold-dim);border-color:transparent;font-size:12px;margin-left:auto}
.friend-btn.invite:hover{color:var(--gold);border-color:var(--gold-dim);background:rgba(212,165,52,0.08)}
.friend-menu{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:3px;box-shadow:0 4px 14px rgba(0,0,0,0.5);min-width:150px;display:flex;flex-direction:column}
.friend-menu .fm-btn{background:transparent;border:none;color:var(--bright);text-align:left;
  padding:5px 10px;font-size:11px;font-family:inherit;cursor:pointer;border-radius:2px}
.friend-menu .fm-btn:hover{background:rgba(128,128,140,0.15)}
.friend-menu .fm-btn.fm-block:hover{background:rgba(200,60,60,0.2);color:var(--neg)}
/* ── Party UI ─────────────────────────────────────────────── */
.party-invite-banner{display:flex;align-items:center;gap:6px;padding:6px 8px;margin-bottom:6px;
  background:rgba(212,165,52,0.08);border:1px solid var(--gold-dim);border-radius:var(--radius-sm)}
.party-invite-banner .pib-text{flex:1;font-size:11px;color:var(--bright);line-height:1.3}
.party-invite-banner .pib-actions{display:flex;gap:3px}
.party-member{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:var(--radius-sm)}
.party-member .friend-dot{flex-shrink:0}
.party-leader-badge{color:var(--gold);font-size:10px;line-height:1;flex-shrink:0}
.party-pending-label{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;
  margin:4px 0 2px;padding:0 6px}
.party-actions{display:flex;gap:4px;margin-top:6px}
.party-act-btn{flex:1;font-size:10px;padding:4px 6px}
.party-act-btn.party-act-leave{flex:0 0 auto;padding:4px 10px;color:var(--dim)}
.party-act-btn.party-act-leave:hover{color:var(--neg)}

/* ── Invite modal (replaces window.prompt) ───────────────────
   Full-viewport overlay with blurred backdrop; centered panel holds
   a clickable list of online friends + a text-input fallback. */
.invite-ov{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  z-index:200;display:flex;align-items:center;justify-content:center}
.invite-panel{background:linear-gradient(180deg,#14182a 0%,#0c0f1e 100%);
  border:1px solid var(--gold-dim);border-radius:12px;
  padding:18px 20px 16px;width:min(460px,92vw);max-height:80vh;overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 40px rgba(212,165,52,0.1)}
.invite-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid rgba(212,165,52,0.2)}
.invite-head h3{font-family:var(--font-d);font-size:15px;color:var(--gold);letter-spacing:2px;margin:0}
.invite-sub{font-size:11px;color:var(--dim);margin-bottom:10px;letter-spacing:0.3px}
.invite-section-label{font-size:9px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;
  font-weight:700;margin:10px 0 4px;font-family:var(--font-d)}
.invite-list{display:flex;flex-direction:column;gap:3px}
.invite-row{display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:rgba(255,255,255,0.02);border:1px solid transparent;border-radius:5px;
  cursor:pointer;transition:all .12s}
.invite-row:hover{background:rgba(212,165,52,0.08);border-color:var(--gold-dim);transform:translateX(2px)}
.invite-row.disabled{cursor:not-allowed;opacity:0.4}
.invite-row.disabled:hover{background:rgba(255,255,255,0.02);border-color:transparent;transform:none}
.invite-name{flex:1;font-size:12px;font-weight:700;color:var(--bright);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-status{font-size:10px;color:var(--dim);letter-spacing:0.3px;white-space:nowrap}
.invite-plus{color:var(--gold);font-size:14px;line-height:1}
.invite-empty{font-size:11px;color:var(--dim);font-style:italic;padding:8px 10px;text-align:center}
.invite-divider{height:1px;background:rgba(255,255,255,0.08);margin:12px 0 4px}
.invite-form{display:flex;gap:6px;margin-top:4px}
.invite-form input{flex:1;padding:6px 10px;background:var(--bg-card);color:var(--bright);
  border:1px solid var(--border);border-radius:4px;outline:none;font-size:12px;
  font-family:var(--font-u);transition:border-color .15s}
.invite-form input:focus{border-color:var(--gold)}
.invite-form .bt-primary{background:linear-gradient(180deg,#40301a 0%,#2a1f10 100%);
  color:var(--gold);border:1px solid var(--gold-dim);padding:0 12px;font-weight:700;cursor:pointer}
.invite-form .bt-primary:hover{background:linear-gradient(180deg,#50401a 0%,#3a2f14 100%);color:var(--gold2)}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:4px 0;min-height:60px}
.chat-msg{font-size:11px;line-height:1.4;padding:1px 0}
.chat-msg .chat-author{color:var(--gold);font-weight:700}
.chat-msg .chat-text{color:var(--bright)}
.chat-msg.system .chat-author{color:var(--warn)}
.chat-input-wrap{padding-top:6px}
.chat-input-wrap input{width:100%;padding:5px 8px;background:var(--bg-card);border:1px solid var(--border);
  color:var(--bright);border-radius:var(--radius-sm);outline:none;font-size:11px;font-family:var(--font-u);
  transition:border-color .2s}
.chat-input-wrap input:focus{border-color:var(--gold)}

/* ── Bottom action bar ────────────────────────────────── */
#bldBottom{height:52px;background:var(--bg-surface);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;position:relative;z-index:2}
#bldBottom::before{content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.bar-left,.bar-center,.bar-right{display:flex;align-items:center;gap:10px}
.bar-left{flex:1}
.bar-center{flex:0 0 auto;justify-content:center;color:var(--dim);font-size:11px;letter-spacing:1px}
.bar-right{flex:1;justify-content:flex-end}
.bar-sep{color:var(--text3)}
.conn-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.conn-dot{width:7px;height:7px;border-radius:50%;transition:background .3s}
.conn-dot.ok{background:var(--pos);box-shadow:0 0 4px var(--pos)}
.conn-dot.warn{background:var(--gold);box-shadow:0 0 4px var(--gold)}
.conn-dot.err{background:var(--neg);box-shadow:0 0 4px var(--neg)}

/* ═══════════════ HOME TAB ═══════════════ */
.home-layout{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.home-profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden}
.profile-banner{height:72px;background:
  linear-gradient(135deg,rgba(212,165,52,0.18) 0%,rgba(64,128,208,0.14) 100%),
  radial-gradient(ellipse at 30% 50%,rgba(212,165,52,0.15),transparent 60%)}
.profile-info{display:flex;align-items:center;gap:14px;padding:14px 18px}
.profile-avatar-lg{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,rgba(212,165,52,0.35),rgba(212,165,52,0.12));
  border:2px solid var(--gold-dim);margin-top:-36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:22px;
  font-weight:900;color:var(--gold);box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.profile-avatar-lg img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile-details{flex:1;min-width:0}
.profile-details h2{font-family:var(--font-d);font-size:18px;font-weight:700;letter-spacing:2px;
  color:var(--bright);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-rank{font-size:11px;color:var(--gold);margin-bottom:8px;letter-spacing:1px}
.profile-stats{display:flex;gap:22px}
.pstat{display:flex;flex-direction:column;align-items:center}
.pstat-val{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--bright)}
.pstat-val.pos{color:var(--pos)} .pstat-val.neg{color:var(--neg)} .pstat-val.gold{color:var(--gold)}
.pstat-lbl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.home-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px}
.recent-matches{display:flex;flex-direction:column;gap:5px}
.match-item{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--bg-elevated);
  border-radius:var(--radius-sm);font-size:11px}
.match-result{font-weight:700;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  width:42px;text-align:center;padding:2px 0;border-radius:2px}
.match-result.win{color:var(--pos);background:rgba(51,191,77,0.1);border:1px solid rgba(51,191,77,0.22)}
.match-result.loss{color:var(--neg);background:rgba(217,64,51,0.1);border:1px solid rgba(217,64,51,0.22)}
.match-mode{color:var(--dim);min-width:60px}
.match-map{color:var(--bright);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-elo{color:var(--gold);font-weight:700;font-family:var(--font-d);font-size:10px}
.match-elo.neg{color:var(--neg)}
.match-kills{color:var(--bright);font-family:var(--font-d);font-size:10px;min-width:38px;text-align:right}
.match-dmg{color:var(--dim);font-family:var(--font-d);font-size:10px;min-width:48px;text-align:right}
.match-score{color:var(--dim);margin-left:auto;font-family:var(--font-d)}
.news-list{display:flex;flex-direction:column;gap:10px}
.news-item{padding-bottom:10px;border-bottom:1px solid var(--border)}
.news-item:last-child{border-bottom:none;padding-bottom:0}
.news-date{font-size:9px;color:var(--dim);margin-bottom:2px;letter-spacing:1px;text-transform:uppercase}
.news-title{font-size:13px;font-weight:700;color:var(--bright);margin-bottom:3px;letter-spacing:0.5px}
.news-body{font-size:11px;color:var(--dim);line-height:1.5}
.home-signin-nag{text-align:center;padding:28px 20px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius)}
.home-signin-nag h3{font-family:var(--font-d);color:var(--gold);font-size:15px;letter-spacing:3px;margin-bottom:6px}
.home-signin-nag p{color:var(--dim);font-size:12px;margin-bottom:14px}

/* Refer-a-friend panel — lives inside a .home-section. */
.referral-panel{display:flex;flex-direction:column;gap:12px}
.ref-head{display:flex;flex-direction:column;gap:6px}
.ref-code-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ref-link-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.ref-code-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;flex-shrink:0}
.ref-code{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--gold);
  letter-spacing:3px;background:var(--bg-elevated);padding:4px 12px;border-radius:var(--radius-sm);
  border:1px dashed var(--gold-dim)}
.ref-share-url{flex:1;min-width:0;font-family:var(--font-d);font-size:12px;color:var(--bright);
  background:var(--bg-elevated);padding:5px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  user-select:all}
.ref-head .bt{padding:4px 10px;font-size:10px}
.ref-blurb{font-size:11px;color:var(--dim);line-height:1.5}
.ref-blurb strong{color:var(--bright)}
.ref-referrer{font-size:12px;color:var(--dim);padding:8px 10px;background:var(--bg-elevated);
  border-radius:var(--radius-sm)}
.ref-referrer strong{color:var(--bright);margin:0 2px}
.ref-gold{color:var(--gold);font-family:var(--font-d);font-weight:700}
.ref-redeem{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--bg-elevated);
  border-radius:var(--radius-sm);border:1px solid var(--border)}
.ref-redeem-label{font-size:11px;color:var(--bright);font-weight:700}
.ref-redeem-row{display:flex;gap:6px;align-items:center}
.ref-input{flex:1;padding:6px 10px;background:var(--bg3);border:1px solid var(--bord);
  border-radius:var(--radius-sm);color:var(--bright);font-family:var(--font-d);font-size:13px;
  min-width:0}
.ref-input:focus{outline:none;border-color:var(--gold-dim)}
.ref-err{font-size:10px;color:var(--neg);min-height:12px}
.ref-list{display:flex;flex-direction:column;gap:3px}
.ref-list-head{font-size:11px;color:var(--dim);margin-bottom:4px}
.ref-row{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;
  background:var(--bg-elevated);border-radius:var(--radius-sm);font-size:11px}
.ref-row-alias{color:var(--bright);font-weight:700}
.ref-row-gold{color:var(--gold);font-family:var(--font-d);font-weight:700}

/* ═══════════════ COLLECTION TAB ═══════════════ */
.collection-layout{max-width:960px;margin:0 auto}
.collection-tabs,.shop-categories,.hall-tabs{display:flex;gap:2px;margin-bottom:14px;
  border-bottom:1px solid var(--border)}
.coll-tab,.shop-cat,.hall-tab{padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s;font-family:var(--font-u);margin-bottom:-1px}
.coll-tab:hover,.shop-cat:hover,.hall-tab:hover{color:var(--bright)}
.coll-tab.active,.shop-cat.active,.hall-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.collection-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.coll-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;cursor:pointer;transition:border-color .15s,transform .1s;position:relative}
.coll-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}
.coll-card-name{font-size:13px;font-weight:700;color:var(--bright);margin-bottom:4px;font-family:var(--font-d);letter-spacing:1px}
.coll-card-meta{font-size:10px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.coll-card-meta .cm-race{color:var(--gold)}
.coll-card-actions{display:flex;gap:4px}
.coll-card-actions .bt{padding:3px 8px;font-size:9px}

/* ═══════════════ SHOP TAB ═══════════════ */
.shop-layout{max-width:1080px;margin:0 auto}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.shop-stub-notice{background:rgba(212,165,52,0.05);border:1px dashed var(--gold-dim);
  border-radius:var(--radius);padding:8px 14px;margin-bottom:12px;font-size:11px;color:var(--gold-dim);
  letter-spacing:1px;text-align:center}
.shop-cash-banner{background:rgba(230,140,38,0.06);border:1px dashed rgba(230,140,38,0.35);
  border-radius:var(--radius);padding:10px 14px;margin-bottom:12px;font-size:12px;color:#d8a84a;
  letter-spacing:0.3px;text-align:center}
.shop-race-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;
  padding:8px 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius)}
.shop-race-tabs-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--dim);
  text-transform:uppercase;margin-right:4px}
.shop-race-tab{padding:5px 11px;font-size:11px;font-weight:600;letter-spacing:0.4px;
  background:transparent;color:var(--dim);border:1px solid var(--border);border-radius:3px;
  cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.shop-race-tab:hover{color:var(--bright);border-color:var(--border-hover)}
.shop-race-tab.active{color:var(--gold);border-color:var(--gold-dim);background:rgba(212,165,52,0.08)}
.shop-loading{color:var(--dim);text-align:center;padding:40px;font-style:italic}
.shop-filter-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;margin-bottom:10px;
  font-size:12px;color:var(--bright)}
.shop-filter-chip code{background:rgba(212,165,52,0.1);color:var(--gold);padding:2px 6px;border-radius:2px;font-size:11px}
.bt-tiny{padding:2px 8px;font-size:10px;min-height:0}
.bt-ghost{background:transparent;border:1px solid var(--border);color:var(--dim)}
.bt-ghost:hover{color:var(--bright);border-color:var(--border-hover)}
.shop-grid-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.shop-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.shop-card:hover{border-color:var(--border-hover);transform:translateY(-1px)}
.shop-card-owned{opacity:0.55;border-style:dashed}
.shop-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shop-card-name{font-size:13px;font-weight:700;color:var(--bright);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-card-desc{font-size:11px;color:var(--dim);line-height:1.4;min-height:30px}
.shop-includes{font-size:10px;color:var(--gold-dim);letter-spacing:0.4px}
.shop-card-prices{display:flex;gap:8px;align-items:center}
.shop-price{font-size:12px;font-weight:700;padding:3px 8px;border-radius:3px}
.shop-price-gold{color:var(--gold);background:rgba(212,165,52,0.08);border:1px solid rgba(212,165,52,0.22)}
.shop-price-gold.is-owned{color:var(--dim);background:transparent;border-color:var(--border)}
.shop-price-cash{color:#b0b0c0;background:rgba(160,160,180,0.06);border:1px solid rgba(160,160,180,0.18)}
.shop-card-actions{display:flex;gap:6px;margin-top:auto}
.shop-card-actions .bt{flex:1;font-size:11px;padding:6px 10px}
.shop-buy-gold{background:linear-gradient(180deg,#d4a534,#b08824);color:#1a1005;border:1px solid #8d6a1c;font-weight:700}
.shop-buy-gold:hover{background:linear-gradient(180deg,#e6b63e,#c49628)}
.shop-buy-cash{background:transparent;color:#666;border:1px dashed var(--border);cursor:not-allowed}
.shop-owned-badge{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--pos);
  background:rgba(80,170,80,0.08);border:1px solid rgba(80,170,80,0.22);padding:2px 6px;border-radius:2px}
.shop-kind-badge{font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 6px;border-radius:2px;text-transform:uppercase;white-space:nowrap}
.shop-kind-bundle{color:#e09050;background:rgba(224,144,80,0.08);border:1px solid rgba(224,144,80,0.22)}
.shop-kind-race{color:#a080e0;background:rgba(160,128,224,0.08);border:1px solid rgba(160,128,224,0.22)}
.shop-kind-prem{color:#e0c050;background:rgba(224,192,80,0.08);border:1px solid rgba(224,192,80,0.22)}
.shop-kind-item{color:#88ccff;background:rgba(136,204,255,0.06);border:1px solid rgba(136,204,255,0.18)}
.shop-kind-officer{color:#f0c090;background:rgba(240,192,144,0.08);border:1px solid rgba(240,192,144,0.24)}

/* Shop card is clickable — full card opens the detail modal.
   Buy buttons inside call event.stopPropagation so they don't double-fire. */
.shop-card{cursor:pointer}
.shop-card:focus{outline:1px solid var(--gold-dim)}

/* Portrait thumb: used on officer cards (40-48px) and the detail-modal
   hero (96px). Circular frame with race-tinted border; image fills,
   falls back to initial-letter glyph via onerror. */
.shop-portrait{position:relative;border-radius:50%;border:2px solid var(--bord);
  background:var(--bg3);flex-shrink:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.shop-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.shop-portrait-glyph{font-family:var(--font-d);font-weight:900;font-size:18px;
  width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.shop-portrait-race{border-style:solid}

/* Officer card layout: portrait leads the header row. */
.shop-card-officer .shop-card-head{gap:10px}

/* Shop detail modal — reuses .race-picker-ov / .race-picker-panel
   overlay + panel shells for visual consistency with the builder's
   race picker. */
.shop-detail-ov{z-index:260}
.shop-detail-panel{width:min(640px,92vw);max-height:86vh;display:flex;flex-direction:column}
.shop-detail-hero{display:flex;gap:16px;align-items:center;padding:14px 0;
  border-bottom:1px solid #d4a53322;margin-bottom:12px}
.shop-detail-hero-compact{padding:6px 0}
.shop-detail-hero-info{min-width:0;flex:1}
.shop-detail-hero-sub{font-size:12px;color:var(--text2);line-height:1.5}
.shop-detail-hero-sub:first-child{color:var(--bright);font-weight:700;font-size:13px}
.shop-detail-desc{font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:12px;
  padding:10px 12px;background:var(--bg3);border-left:2px solid var(--gold-dim);border-radius:3px}
.shop-detail-section{margin-bottom:12px}
.shop-detail-section-head{font-size:10px;font-weight:800;letter-spacing:2px;
  color:var(--gold-dim);text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;
  border-bottom:1px dotted #1e2340}
.shop-detail-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 12px}
.shop-detail-list li{font-size:12px;color:var(--text);padding:2px 8px;background:var(--bg3);
  border:1px solid var(--bord);border-radius:3px}
.shop-detail-ab-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shop-detail-ab-list li{background:var(--bg3);border:1px solid var(--bord);border-radius:4px;padding:8px 10px}
.shop-detail-ab-head{font-size:13px;font-weight:700;color:var(--bright);display:flex;align-items:center;gap:8px;margin-bottom:4px}
.shop-detail-ab-icon{font-size:16px;width:22px;text-align:center}
.shop-detail-ab-desc{font-size:11px;color:var(--text2);line-height:1.45}
.shop-detail-bundle-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  max-height:46vh;overflow-y:auto}
.shop-detail-bundle-item{background:var(--bg3);border:1px solid var(--bord);border-radius:3px;padding:6px 10px}
.shop-detail-bundle-name{font-size:12px;font-weight:700;color:var(--bright);display:flex;align-items:center;gap:8px}
.shop-detail-bundle-kind{font-size:9px;font-weight:800;letter-spacing:1.2px;
  color:var(--gold);background:rgba(212,165,52,0.12);border:1px solid rgba(212,165,52,0.28);
  padding:1px 5px;border-radius:2px;text-transform:uppercase;flex-shrink:0}
.shop-detail-bundle-desc{font-size:10px;color:var(--text3);line-height:1.4;margin-top:3px}
.shop-detail-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px}
.shop-detail-stats li{display:flex;justify-content:space-between;gap:8px;font-size:12px;
  padding:3px 8px;background:var(--bg3);border:1px solid var(--bord);border-radius:3px}
.shop-detail-stat-k{color:var(--text3)}
.shop-detail-stat-v{color:var(--gold);font-weight:700}
.shop-detail-traits{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.shop-detail-trait-chip{font-size:10px;color:var(--text2);background:var(--bg3);
  border:1px solid var(--bord);border-radius:2px;padding:2px 6px}
.shop-detail-foot{margin-top:auto;padding-top:12px;border-top:1px solid #d4a53322}
.shop-detail-actions{display:flex;gap:8px;justify-content:flex-end}
.shop-detail-actions .bt{min-width:140px}

/* Purchase confirm modal — replaces browser confirm() on the buy path.
   Browser confirm() auto-suppresses after 2+ rapid calls (returns false
   silently), which manifested as "clicked Buy on three items but only
   one purchased". This modal also provides an inflight guard, success
   feedback, and a ledger view of the gold change. */
.purchase-confirm-ov{z-index:270}
.purchase-confirm-panel{width:min(440px,92vw);max-height:86vh;display:flex;flex-direction:column;
  padding:18px 22px 16px}
.pc-body{padding:4px 0 10px}
.pc-item{background:var(--bg3);border:1px solid var(--bord);border-left:2px solid var(--gold-dim);
  border-radius:4px;padding:10px 12px;margin-bottom:12px}
.pc-item-name{font-family:'Cinzel','Georgia',serif;font-size:15px;font-weight:700;color:var(--gold);
  letter-spacing:0.4px;margin-bottom:3px}
.pc-item-desc{font-size:11px;color:var(--text2);line-height:1.45}
.pc-ledger{background:rgba(20,22,36,0.6);border:1px solid var(--bord);border-radius:4px;
  padding:8px 12px}
.pc-ledger-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  color:var(--text2);padding:3px 0;font-variant-numeric:tabular-nums}
.pc-ledger-cost{color:var(--text)}
.pc-ledger-cost .pc-cost{color:#e07070;font-weight:700}
.pc-ledger-after{border-top:1px dotted #1e2340;margin-top:4px;padding-top:6px;color:var(--bright);
  font-weight:700}
.pc-val{font-family:var(--font-d,monospace);font-weight:700;color:var(--gold)}
.pc-val-err{color:#e07070}
.pc-insufficient{margin-top:10px;padding:8px 12px;background:rgba(208,64,80,0.12);
  border:1px solid rgba(208,64,80,0.35);border-radius:4px;
  color:#e07070;font-size:11px;font-weight:600;text-align:center}
.pc-foot{margin-top:auto;padding-top:10px;border-top:1px solid #d4a53322}
.pc-msg{min-height:16px;font-size:11px;font-weight:600;margin-bottom:8px;text-align:center;
  letter-spacing:0.3px}
.pc-msg-ok{color:#7fc088}
.pc-msg-err{color:#e07070}
.pc-actions{display:flex;gap:8px;justify-content:flex-end}
.pc-actions .bt{min-width:120px}
.pc-buy-btn{background:linear-gradient(180deg,#40301a 0%,#2a1f10 100%);
  color:var(--gold);border:1px solid var(--gold-dim);font-weight:700}
.pc-buy-btn:hover:not(:disabled){background:linear-gradient(180deg,#50401a 0%,#3a2f14 100%);
  color:var(--gold2)}
.pc-buy-btn:disabled{opacity:0.55;cursor:not-allowed}

/* Shop toast — used for edge-case buyShop errors (cash path, stale catalog,
   missing product) that don't warrant opening the full confirm modal. */
.shop-toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:300;padding:10px 18px;border-radius:4px;font-size:12px;font-weight:700;
  letter-spacing:0.5px;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;
  background:rgba(20,22,36,0.96);border:1px solid var(--bord);
  box-shadow:0 10px 40px rgba(0,0,0,0.6);max-width:min(440px,90vw);text-align:center}
.shop-toast-vis{opacity:1;transform:translateX(-50%) translateY(0)}
.shop-toast-err{color:#e07070;border-color:rgba(208,64,80,0.55)}
.shop-toast-ok{color:var(--gold);border-color:var(--gold-dim)}

/* Purchase history modal */
.purchase-history-body{max-height:60vh;overflow:auto;padding:4px 0}
.ph-table{width:100%;border-collapse:collapse;font-size:12px}
.ph-table th{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);
  padding:6px 10px;text-align:left;border-bottom:1px solid var(--border)}
.ph-table td{padding:6px 10px;border-bottom:1px solid rgba(128,128,140,0.06)}
.ph-table tbody tr:last-child td{border-bottom:none}
.ph-table tbody tr:hover td{background:rgba(128,128,140,0.04)}

/* Builder lock overlay on equipment picker items */
/* Locked equipment in the picker — clear "you don't own this" treatment.
   A faint opacity alone is not enough; we add a crimson tint + dimmed
   text + a corner LOCKED ribbon so it reads instantly. The whole card
   is still clickable — routes to the shop via openShopFilter. */
.ii-locked{
  opacity:1;
  background:rgba(60,22,26,0.35) !important;
  border:1px solid #5a2a2e !important;
  cursor:pointer;
  position:relative;
}
.ii-locked .in,
.ii-locked .ie,
.ii-locked .ic{color:#8a6560 !important}
.ii-locked:hover{
  background:rgba(110,36,44,0.55) !important;
  border-color:#d04050 !important;
}
.ii-locked::after{
  content:'LOCKED';
  position:absolute;
  top:4px; right:6px;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#e07070;
  background:rgba(20,10,12,0.88);
  padding:2px 6px;
  border:1px solid #6a2a30;
  border-radius:2px;
  pointer-events:none;
  font-family:var(--font-d,sans-serif);
}
/* Redundant once the corner ribbon exists; suppress the inline 🔒 badge. */
.ii-locked .ii-lock{display:none}
.ii-lock{color:var(--gold);font-size:11px;margin-left:4px}

/* Launcher nav gold pill (live state) */
.nav-currency[data-live="1"]{color:var(--bright)}
.nav-currency[data-live="1"] #currency-amount{color:var(--gold);font-weight:700}

/* ═══════════════ HALL OF WAR TAB ═══════════════ */
/* Legacy single-panel layout kept only as fallback if any other screen
   reads `.hall-layout`. New layout is v2: sidebar + panel. */
.hall-layout{max-width:880px;margin:0 auto}
.hall-title{font-family:var(--font-d);font-size:22px;font-weight:900;letter-spacing:3px;color:var(--gold);margin:0 0 4px}
.hall-sub{font-size:11px;color:var(--dim);margin:0 0 14px;letter-spacing:0.3px}
.hall-layout-v2{display:grid;grid-template-columns:220px 1fr;gap:18px;height:100%;padding:14px 14px 14px 18px;overflow:hidden}
.hall-sidebar{overflow-y:auto;padding-right:6px;border-right:1px solid var(--border)}
.hall-side-group{margin-top:16px}
.hall-side-header{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:4px;padding:0 6px}
.hall-side-btn{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--fg);padding:6px 10px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.5px;border-radius:4px;cursor:pointer;margin:1px 0}
.hall-side-btn:hover{background:rgba(212,165,52,0.08);border-color:var(--border)}
.hall-side-btn.active{background:rgba(212,165,52,0.14);border-color:var(--gold-dim);color:var(--gold)}
.hall-panel{overflow-y:auto;padding-right:6px}
.hall-panel .hp-head{font-family:var(--font-d);font-size:15px;font-weight:900;letter-spacing:2px;color:var(--gold);margin:0 0 4px}
.hall-panel .hp-sub{font-size:11px;color:var(--dim);margin-bottom:14px}
.hall-race-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hall-race-chip{background:var(--bg-card);border:1px solid var(--border);color:var(--fg);padding:5px 11px;font-size:11px;font-weight:600;letter-spacing:0.5px;border-radius:4px;cursor:pointer}
.hall-race-chip:hover{background:rgba(212,165,52,0.08);border-color:var(--gold-dim)}
.hall-race-chip.active{background:rgba(212,165,52,0.18);border-color:var(--gold);color:var(--gold)}
.hall-records-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:10px}
.hall-rec-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.hall-rec-card .hr-key{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.hall-rec-card .hr-value{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--gold);letter-spacing:1px}
.hall-rec-card .hr-holder{font-size:11px;color:var(--fg);margin-top:2px;font-weight:700}
.hall-rec-card .hr-flavor{font-size:10px;color:var(--dim);margin-top:2px}
.guild-tag-chip{display:inline-block;background:rgba(212,165,52,0.18);color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:1px 5px;font-family:var(--font-d);font-size:10px;font-weight:700;letter-spacing:1px;margin-right:6px;cursor:pointer;vertical-align:middle}
.guild-tag-chip:hover{background:rgba(212,165,52,0.28);border-color:var(--gold)}
.clickable-user{color:var(--fg);cursor:pointer;text-decoration:none;font-weight:700}
.clickable-user:hover{color:var(--gold);text-decoration:underline}
.my-profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:12px}
.my-profile-card .mpc-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.my-profile-card .mpc-title{font-family:var(--font-d);font-size:16px;font-weight:900;letter-spacing:2px}
.my-profile-card .mpc-elos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.my-profile-card .mpc-elo{background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:8px 10px}
.my-profile-card .mpc-elo .mpc-label{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
.my-profile-card .mpc-elo .mpc-value{font-family:var(--font-d);font-size:20px;font-weight:900;color:var(--gold)}
.my-profile-card .mpc-elo .mpc-wl{font-size:10px;color:var(--dim);margin-top:2px}
.pp-body{max-height:72vh;overflow-y:auto}
.pp-section{margin-bottom:16px}
.pp-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:3px}
.leaderboard .hall-winrate{font-weight:700}
.leaderboard .hall-matches{color:var(--dim);font-family:var(--font-d)}
.leaderboard .empty-row td{text-align:center;color:var(--dim);padding:22px 12px;font-style:italic}
.leaderboard{width:100%;border-collapse:collapse;font-size:12px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.leaderboard th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--dim);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);
  background:var(--bg-elevated)}
.leaderboard td{padding:8px 12px;border-bottom:1px solid rgba(128,128,140,0.06)}
.leaderboard tbody tr:last-child td{border-bottom:none}
.leaderboard tbody tr:hover td{background:rgba(128,128,140,0.04)}
.leaderboard .rank-cell{font-family:var(--font-d);font-weight:900;width:52px}
.leaderboard .rank-1{color:#e6bf33;text-shadow:0 0 8px rgba(230,191,51,0.4)}
.leaderboard .rank-2{color:#c0c0c8}
.leaderboard .rank-3{color:#cd7f32}
.leaderboard .hall-rating{color:var(--gold);font-family:var(--font-d);font-weight:700}
.leaderboard .hall-wins{color:var(--pos);font-weight:700}
.leaderboard .hall-losses{color:var(--neg)}

/* ═══════════════ RESULTS OVERLAY REFRESH ═══════════════ */
.results-banner{font-family:var(--font-d);font-size:34px;font-weight:900;letter-spacing:8px;
  padding:14px 42px;margin-bottom:16px;border-radius:var(--radius);text-align:center}
.results-banner.win{color:var(--gold);background:rgba(212,165,52,0.08);
  border:2px solid var(--gold-dim);text-shadow:0 0 24px rgba(212,165,52,0.45)}
.results-banner.loss{color:var(--neg);background:rgba(217,64,51,0.08);
  border:2px solid rgba(217,64,51,0.3)}
.mvp-card-new{background:var(--bg-card);border:1px solid var(--gold-dim);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:12px 20px;margin:10px 0;text-align:center;max-width:420px;margin-left:auto;margin-right:auto}
.mvp-card-new .mvp-label{font-size:9px;font-weight:700;color:var(--gold);letter-spacing:3px;margin-bottom:3px;text-transform:uppercase}
.mvp-card-new .mvp-name{font-family:var(--font-d);font-size:16px;font-weight:900;letter-spacing:1px}
.mvp-card-new .mvp-stats{font-size:11px;color:var(--dim);margin-top:3px}
.sb-row.team-red td{background:var(--team-red-dim)}
.sb-row.team-blue td{background:var(--team-blue-dim)}
.sb-row.mvp-row td{border-left:2px solid var(--gold)}
.sb-row.mvp-row td:first-child{position:relative}
.sb-row.mvp-row td:first-child::before{content:'⭐ ';color:var(--gold)}

/* ═══════════════ LOBBY SCREEN POLISH ═══════════════ */
.lob-pl{background:var(--bg-card);transition:border-color .15s,background .15s}
.lob-pl:hover{border-color:var(--border-hover);background:var(--bg-elevated)}
.lob-pl-race{background:rgba(128,128,140,0.08);color:var(--bright);font-size:9px;
  text-transform:uppercase;letter-spacing:1px;padding:2px 6px;border-radius:2px;
  border:1px solid var(--border)}

/* ═══════════════ BUILD-ERRORS MODAL ═══════════════
   Surfaced when the server rejects a regiment build (over budget,
   unowned item, trait prereq broken) and falls back to an AI preset.
   Prior behavior was silent replacement — players thought their
   army hadn't saved. Modal lists WHICH regiment + WHY so they
   can fix their builds before the next match. */
.build-errors-ov{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);
  z-index:250;display:flex;align-items:center;justify-content:center;padding:20px}
.build-errors-panel{background:linear-gradient(180deg,#1a1220 0%,#140c18 100%);
  border:1px solid #d04050;border-radius:12px;padding:18px 22px 16px;
  width:min(520px,92vw);max-height:82vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 40px rgba(208,64,80,0.15)}
.build-errors-panel .be-title{font-family:var(--font-d);font-size:16px;font-weight:700;
  letter-spacing:2px;color:#e07070;margin-bottom:6px}
.build-errors-panel .be-sub{font-size:11px;color:var(--dim);line-height:1.45;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid rgba(208,64,80,0.25)}
.build-errors-panel .be-row{background:rgba(208,64,80,0.06);border:1px solid rgba(208,64,80,0.25);
  border-radius:6px;padding:8px 12px;margin-bottom:8px}
.build-errors-panel .be-head{font-size:12px;font-weight:700;color:var(--bright);letter-spacing:0.5px}
.build-errors-panel .be-name{color:var(--gold);font-weight:700;font-family:'Cinzel','Georgia',serif}
.build-errors-panel .be-cost{font-size:10px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}
.build-errors-panel .be-cost.over{color:#e07070;font-weight:700}
.build-errors-panel .be-reasons{margin:6px 0 0;padding-left:18px;font-size:11px;color:var(--bright);line-height:1.5}
.build-errors-panel .be-reasons li{margin-bottom:1px}
.build-errors-panel .be-actions{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(208,64,80,0.2)}
.build-errors-panel .bt-primary{background:linear-gradient(180deg,#40301a 0%,#2a1f10 100%);
  color:var(--gold);border:1px solid var(--gold-dim);padding:6px 16px;font-weight:700;cursor:pointer;
  border-radius:4px;font-family:inherit}
.build-errors-panel .bt-primary:hover{background:linear-gradient(180deg,#50401a 0%,#3a2f14 100%);color:var(--gold2)}

/* ─── Guild tab ─────────────────────────────────────────────── */
.guild-empty{max-width:640px;margin:60px auto;padding:32px;background:rgba(20,20,30,0.6);
  border:1px solid rgba(208,180,80,0.25);border-radius:6px;color:#d0d0e0}
.guild-empty h2{font-family:Cinzel,serif;color:var(--gold);margin:0 0 12px;font-size:24px}
.guild-empty h3{font-family:Cinzel,serif;color:var(--gold-dim);margin:24px 0 8px;font-size:16px}
.guild-empty p{font-size:13px;line-height:1.5;color:#b0b0c0}
.guild-create{margin-top:24px;padding-top:18px;border-top:1px solid rgba(208,180,80,0.2)}
.g-create-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.g-create-row label{display:flex;flex-direction:column;font-size:11px;color:#a0a0b0}
.g-create-row input,.g-create-row select{padding:6px 8px;background:#1a1a25;border:1px solid #4a4a5a;
  color:#e0e0e8;font:inherit;font-size:13px;border-radius:3px}
.guild-invites{margin-bottom:20px}
.g-invite{display:flex;align-items:center;gap:12px;padding:10px;background:rgba(40,60,80,0.3);
  border-left:3px solid #4080c0;margin-bottom:6px;border-radius:3px}
.g-invite-name{font-weight:700;color:#d0d0e0;flex:1}
.g-invite-from{font-size:11px;opacity:.7}
.g-invite-actions{display:flex;gap:6px}

.guild-shell{display:grid;grid-template-columns:240px 1fr;gap:0;height:100%;overflow:hidden}
.guild-rail{background:rgba(15,15,22,0.7);border-right:1px solid rgba(208,180,80,0.2);
  display:flex;flex-direction:column;overflow:hidden}
.guild-rail-head{padding:14px 16px;border-bottom:1px solid rgba(208,180,80,0.15)}
.guild-rail-tag{font-family:Cinzel,serif;color:var(--gold);font-size:11px;letter-spacing:1px}
.guild-rail-name{font-family:Cinzel,serif;color:#e0e0e8;font-size:18px;line-height:1.1;margin:2px 0 4px}
.guild-rail-sub{font-size:11px;color:#9090a0}
.guild-rail-treasury{font-size:14px;color:#e0c060;margin-top:8px;font-weight:600}
.guild-rail-xpbar{height:4px;background:#1a1a25;border-radius:2px;margin-top:6px;overflow:hidden}
.guild-rail-xpfill{height:100%;background:linear-gradient(90deg,#5070a0,#80a0d0);transition:width .3s}
.guild-rail-xptext{font-size:10px;color:#7080a0;margin-top:2px}
.guild-rail-nav{padding:6px;flex:1;overflow-y:auto}
.guild-rail-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;
  border:none;color:#a0a0b0;font:inherit;font-size:12px;cursor:pointer;border-radius:3px;
  text-align:left;margin-bottom:1px}
.guild-rail-btn:hover{background:rgba(60,60,80,0.4);color:#e0e0e8}
.guild-rail-btn.active{background:rgba(80,80,120,0.5);color:var(--gold)}
.grb-icon{font-size:14px;width:20px;text-align:center}

.guild-content{padding:20px;overflow-y:auto;color:#d0d0e0}
.guild-view{max-width:1100px}
.gv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid rgba(208,180,80,0.2)}
.gv-head h2{font-family:Cinzel,serif;color:var(--gold);margin:0;font-size:20px}
.gv-head .gv-sub{font-size:11px;color:#8090a0;margin-top:2px;display:block}
.gv-actions{display:flex;gap:6px}

.g-roster{width:100%;border-collapse:collapse;font-size:12px}
.g-roster th{text-align:left;padding:6px 8px;background:rgba(20,20,30,0.6);color:#a0a0b0;
  font-weight:600;border-bottom:1px solid rgba(208,180,80,0.2)}
.g-roster td{padding:6px 8px;border-bottom:1px solid rgba(60,60,80,0.3)}
.g-roster tr.g-me{background:rgba(80,60,40,0.25)}
.g-row-actions{display:flex;gap:4px;justify-content:flex-end}
.bt-sm{padding:3px 8px;font-size:11px;background:#2a2a35;border:1px solid #4a4a5a;
  color:#d0d0e0;cursor:pointer;border-radius:2px;font:inherit}
.bt-sm:hover{background:#3a3a45}
.bt-danger{background:#4a1a1a;border-color:#7a3a3a}
.bt-danger:hover{background:#5a2a2a}

.g-doctrine-pick{display:flex;justify-content:space-between;align-items:flex-start;
  background:rgba(20,30,40,0.4);padding:14px;border-radius:4px;margin-bottom:14px;gap:14px;flex-wrap:wrap}
.g-doctrine-current strong{color:var(--gold);font-size:14px}
.g-doctrine-desc{font-size:11px;opacity:.7;margin-top:4px}
.g-doctrine-switch{display:flex;flex-direction:column;gap:6px;font-size:11px}
.g-armory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.g-slot{background:rgba(20,20,30,0.5);border:1px solid rgba(80,80,100,0.3);padding:10px;
  border-radius:4px;display:flex;flex-direction:column;gap:4px}
.g-slot-empty{border-style:dashed;opacity:.6}
.g-slot-locked{border-color:#7a6a3a;background:rgba(40,30,15,0.4)}
.g-slot-head{font-size:11px;color:#9090a0;font-weight:600}
.g-slot-name{font-size:13px;color:#e0e0e8;font-weight:600}
.g-slot-race{font-size:11px;color:#a0a0b0;text-transform:capitalize}
.g-slot-meta{font-size:10px;opacity:.6}
.g-slot button{margin-top:4px;align-self:flex-start}
.g-armory-note{margin-top:14px;padding:10px;background:rgba(20,30,40,0.3);font-size:11px;
  border-left:3px solid #5070a0;border-radius:2px;color:#a0b0c0}

.g-buildings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.g-building{background:rgba(20,20,30,0.5);border:1px solid rgba(80,80,100,0.3);padding:12px;border-radius:4px}
.g-building-locked{opacity:.7}
.g-building-head{font-size:14px;color:#e0e0e8;font-weight:600;margin-bottom:4px}
.g-building-icon{font-size:18px;margin-right:4px}
.g-building-tier{font-size:11px;color:var(--gold-dim)}
.g-building-cur{font-size:11px;margin-top:6px;color:#a0a0b0}
.g-building-next{font-size:11px;margin-top:4px;color:#80a080}
.g-building-cost{font-size:12px;margin-top:8px;color:#e0c060}
.g-building button{margin-top:6px;padding:5px 12px}
.g-building button:disabled{opacity:.4;cursor:not-allowed}
.g-withdraw{margin-top:18px;padding:12px;background:rgba(20,20,30,0.4);border-radius:4px}
.g-withdraw-row{display:flex;gap:8px;align-items:center}

.g-perk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.g-perk-branch{background:rgba(20,20,30,0.4);padding:10px;border-radius:4px}
.g-perk-branch-h{font-family:Cinzel,serif;color:var(--gold);font-size:13px;margin:0 0 8px;
  text-transform:uppercase;letter-spacing:1px}
.g-perk{padding:8px;background:rgba(40,40,55,0.4);border-radius:3px;margin-bottom:6px;font-size:11px}
.g-perk-unlocked{background:rgba(40,55,40,0.5);border-left:3px solid #6a9a6a}
.g-perk-name{font-weight:700;color:#e0e0e8;font-size:12px}
.g-perk-desc{color:#b0b0c0;margin-top:2px}
.g-perk-meta{opacity:.6;margin-top:2px}
.g-perk-votes{margin-top:4px;color:#a0c0d0}

.g-ch-section{margin-bottom:18px}
.g-ch-section h3{font-family:Cinzel,serif;color:var(--gold);font-size:13px;margin:0 0 8px}
.g-ch{padding:10px;background:rgba(20,30,40,0.4);border-radius:3px;margin-bottom:6px}
.g-ch-done{background:rgba(30,55,30,0.5);border-left:3px solid #6a9a6a}
.g-ch-name{font-size:13px;color:#e0e0e8;font-weight:600}
.g-ch-bar{height:6px;background:#1a1a25;border-radius:3px;margin-top:6px;overflow:hidden}
.g-ch-fill{height:100%;background:linear-gradient(90deg,#7090c0,#a0c0e0);transition:width .3s}
.g-ch-meta{font-size:11px;opacity:.7;margin-top:4px}
.g-ch-empty{padding:20px;text-align:center;opacity:.5;font-size:11px}

.guild-chat-view{display:flex;flex-direction:column;height:100%}
.g-chat-msgs{flex:1;overflow-y:auto;padding:10px;background:rgba(15,15,22,0.5);border-radius:4px;
  margin-bottom:10px;min-height:300px;max-height:60vh}
.g-chat-msg{padding:4px 6px;font-size:12px;line-height:1.4}
.g-chat-author{color:#9090a0;font-weight:600;margin-right:6px}
.g-chat-leader .g-chat-author{color:#e0c060}
.g-chat-officer .g-chat-author{color:#a0c0d0}
.g-chat-text{color:#d0d0e0}
.g-chat-input{display:flex;gap:6px}
.g-chat-input input{flex:1;padding:8px;background:#1a1a25;border:1px solid #4a4a5a;color:#e0e0e8;
  font:inherit;border-radius:3px}

.g-events{width:100%;border-collapse:collapse;font-size:11px}
.g-events th{text-align:left;padding:5px 8px;background:rgba(20,20,30,0.6);color:#a0a0b0;font-weight:600}
.g-events td{padding:4px 8px;border-bottom:1px solid rgba(60,60,80,0.3)}
.g-txn-pos{color:#80c080}
.g-txn-neg{color:#c08080}

.g-loadout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:18px}
.g-loadout{padding:10px;background:rgba(20,30,40,0.4);border-radius:3px}
.g-loadout-name{font-size:13px;color:#e0e0e8;font-weight:600}
.g-loadout-author{font-size:11px;opacity:.7}
.g-loadout-race{font-size:11px;text-transform:capitalize;margin-top:2px;color:var(--gold-dim)}
.g-loadout-actions{display:flex;gap:6px;margin-top:6px}
.g-loadout-pinned{border:1px solid var(--gold-dim);background:rgba(208,180,80,0.12)}
.g-loadout-pin{display:inline-block;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:4px}
.g-loadout-liked{color:#e07080;border-color:#a04050}

/* Trophy Hall */
.g-trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.g-trophy{padding:14px;text-align:center;background:linear-gradient(180deg,rgba(40,30,15,0.5),rgba(20,15,5,0.5));
  border:1px solid var(--gold-dim);border-radius:4px}
.g-trophy-icon{font-size:32px;line-height:1}
.g-trophy-label{font-family:Cinzel,serif;color:var(--gold);font-size:12px;margin-top:6px}
.g-trophy-meta{font-size:10px;opacity:.7;margin-top:2px;text-transform:capitalize}

/* Hot Hour badge in the launcher nav */
.hot-hour-badge{font-size:11px;color:#e0a040;font-weight:600;margin-left:4px}

/* Leaderboard axis tabs */
.g-lb-axes{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.g-publish{padding:12px;background:rgba(20,20,30,0.4);border-radius:4px}
.g-publish-row{display:flex;gap:8px;align-items:center}
.g-publish-row input{flex:1;padding:6px 8px;background:#1a1a25;border:1px solid #4a4a5a;color:#e0e0e8;font:inherit;border-radius:3px}

.g-setting{margin-bottom:18px;padding:14px;background:rgba(20,20,30,0.4);border-radius:4px}
.g-setting h3{font-family:Cinzel,serif;color:var(--gold);font-size:13px;margin:0 0 8px}
.g-setting.g-danger{border-left:3px solid #a04040}
.g-setting.g-danger h3{color:#d08080}

/* Home tab guild card */
.home-guild-card{padding:0}
.home-guild-grid{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:14px;
  background:rgba(20,20,30,0.4);border-radius:4px;border:1px solid rgba(208,180,80,0.15)}
.hg-tag{font-family:Cinzel,serif;color:var(--gold);font-size:18px;text-align:center;padding:8px;
  background:rgba(208,180,80,0.1);border-radius:4px}
.hg-name{font-family:Cinzel,serif;color:#e0e0e8;font-size:16px}
.hg-meta{font-size:11px;opacity:.7;margin-top:2px}
.hg-stats{display:flex;gap:14px;margin-top:8px}
.hg-stat{display:flex;flex-direction:column;font-size:11px}
.hg-stat-val{color:#e0c060;font-weight:700;font-size:14px}
.hg-stat-lbl{opacity:.6;font-size:10px}

/* Match report guild block */
.mr-guild-block{margin-top:10px;padding:10px;background:rgba(40,30,15,0.4);border-left:3px solid var(--gold-dim);border-radius:3px}
.mr-guild-head{font-family:Cinzel,serif;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.mr-guild-row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;color:#d0d0e0}
.mr-guild-row span:last-child{color:#e0c060;font-weight:600}

/* Chat channel toggle */
.g-chat-channel{display:flex;gap:4px;margin-bottom:8px}
.g-chat-ch{padding:5px 12px;background:#1a1a25;border:1px solid #4a4a5a;color:#a0a0b0;font:inherit;font-size:11px;cursor:pointer;border-radius:3px}
.g-chat-ch.active{background:rgba(208,180,80,0.2);color:var(--gold);border-color:var(--gold-dim)}

/* Companies */
.g-company{padding:10px;background:rgba(20,30,40,0.4);border-radius:3px}
.g-company-head{font-size:13px;color:#e0e0e8;font-weight:600}
.g-company-cap{font-size:11px;opacity:.7;margin-top:2px}
.g-company-members{font-size:11px;margin-top:6px;color:#b0b0c0;line-height:1.4}
.g-company button{margin-top:6px}

/* Presence dots in roster */
.g-pres{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.g-pres-on{background:#6ac060;box-shadow:0 0 4px rgba(106,192,96,0.6)}
.g-pres-room{background:#e0a040;box-shadow:0 0 4px rgba(224,160,64,0.6)}
.g-pres-off{background:#404050}
.g-vet-back{display:inline-block;background:rgba(208,180,80,0.2);color:var(--gold);
  font-size:10px;padding:1px 5px;border-radius:8px;margin-left:4px}
.g-rising-star{display:inline-block;color:#ffd060;text-shadow:0 0 4px rgba(255,208,96,0.6);margin-left:4px;font-weight:700}