*{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 ── */
#bldBody{flex:1;display:flex;overflow:hidden;position:relative;z-index:1}

/* ── Left Panel ── */
#armyP{width:250px;background:linear-gradient(180deg,var(--panel) 0%,#0d1020 100%);border-right:1px solid var(--bord);
  padding:12px;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
#armyP::-webkit-scrollbar{width:4px}#armyP::-webkit-scrollbar-track{background:transparent}
#armyP::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}

/* ── Center Panel ── */
#editP{flex:1;padding:20px 24px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bord) transparent;
  background:linear-gradient(180deg,#0c0e1a 0%,var(--bg) 100%)}
#editP::-webkit-scrollbar{width:4px}#editP::-webkit-scrollbar-track{background:transparent}
#editP::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}

/* ── Right Panel ── */
#statsP{width:260px;background:linear-gradient(180deg,var(--panel) 0%,#0d1020 100%);border-left:1px solid var(--bord);
  padding:12px;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
#statsP::-webkit-scrollbar{width:4px}#statsP::-webkit-scrollbar-track{background:transparent}
#statsP::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}

/* ── Panel Section Headers ── */
.pn{background:transparent;border:none;padding:0;margin-bottom:14px}
.pn h3{font-family:var(--font-d);font-size:10px;letter-spacing:3px;color:var(--gold-dim);margin-bottom:8px;
  text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid #1e234022}

/* ── Race/Mode Cards ── */
.rc{background:var(--bg3);border:1px solid var(--bord);border-radius:6px;padding:10px 12px;margin-bottom:6px;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.rc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .2s}
.rc:hover{border-color:var(--bord2);background:var(--panel2);transform:translateX(2px)}
.rc.on{border-color:var(--gold-dim);background:linear-gradient(135deg,#1a1830 0%,#14182a 100%);box-shadow:0 0 12px #d4a53415}
.rc.on::before{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rc .rn{font-size:12px;font-weight:700;color:var(--text);letter-spacing:0.3px}
.rc .rd{font-size:10px;color:var(--text3);margin-top:3px;line-height:1.4}
.rc .hb{height:3px;background:#1a1d30;border-radius:2px;margin-top:6px;overflow:hidden}.rc .hf{height:100%;border-radius:2px}

/* ── Equipment Slots Grid ── */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px}
.es{background:var(--bg3);border:1px solid var(--bord);border-radius:8px;padding:10px 12px;min-height:80px;
  cursor:pointer;transition:all .2s;position:relative}
.es:hover{border-color:var(--bord2);background:var(--panel);box-shadow:0 4px 16px #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:9px;color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;font-weight:600}
.es .si{font-size:12px;color:var(--text);font-weight:700;letter-spacing:0.3px}
.es .sc{font-size:9px;color:var(--gold-dim);margin-top:3px;font-weight:600}
.es .ss{font-size:9px;color:var(--text3);margin-top:4px;line-height:1.3}

/* ── 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:16px;max-height:75vh;overflow-y:auto;z-index:100;
  min-width:380px;max-width:440px;box-shadow:0 24px 80px #000c,0 0 40px #d4a53410;
  scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
.ip::-webkit-scrollbar{width:4px}.ip::-webkit-scrollbar-track{background:transparent}
.ip::-webkit-scrollbar-thumb{background:var(--bord);border-radius:2px}
.ip h3{font-family:var(--font-d);font-size:13px;color:var(--gold);margin-bottom:10px;letter-spacing:2px}
.ii{padding:8px 12px;border:1px solid var(--bord);border-radius:6px;margin-bottom:5px;cursor:pointer;
  transition:all .15s;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:11px;font-weight:700;color:var(--text)}.ii .ic{font-size:10px;color:var(--gold);float:right;font-weight:700}
.ii .ie{font-size:9px;color:var(--text3);margin-top:3px;line-height:1.3}

/* ── Traits List ── */
.tl{max-width:520px}
.ti{display:flex;gap:8px;padding:8px 12px;border:1px solid var(--bord);border-radius:6px;margin-bottom:4px;
  cursor:pointer;transition:all .15s;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:.3;cursor:not-allowed;filter:grayscale(0.5)}
.ti .tn{font-size:11px;font-weight:700;color:var(--text)}.ti .tc{font-size:9px;color:var(--gold);font-weight:600}
.ti .td{font-size:9px;color:var(--text3);line-height:1.3}

/* ── Stat Bars ── */
.sb{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-size:10px}
.sb .sl{width:50px;color:var(--text3);text-align:right;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;font-size:9px}
.sb .sv{width:38px;color:var(--gold2);font-weight:700;text-align:right;font-size:11px}
.sb .sbb{flex:1;height:6px;background:#12152a;border-radius:3px;overflow:hidden;border:1px solid #1a1d30}
.sb .sf{height:100%;border-radius:2px;transition:width .3s ease;position:relative}

/* ── Budget Bar ── */
.bb{background:var(--bg3);border:1px solid var(--bord);border-radius:6px;padding:10px 12px;margin-bottom:10px}
.bb .bl{font-size:10px;color:var(--text2);margin-bottom:5px;font-weight:600;letter-spacing:0.5px}
.bb .bbr{height:8px;background:#12152a;border-radius:4px;overflow:hidden;border:1px solid #1a1d30}
.bb .bf{height:100%;border-radius:3px;transition:width .3s}

/* ── Buttons ── */
.bt{padding:6px 14px;background:var(--bg3);border:1px solid var(--bord);border-radius:5px;color:var(--text2);
  font-family:var(--font-u);font-size:10px;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)}
.presetBtns{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}

/* ── 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}
/* ═══════════════ 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,#killFeed,#deployBanner{zoom:var(--ui-scale)}
#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)}
.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)}

/* ── 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} /* 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-name{flex:1;color:var(--bright)}
.friend-name.offline{color:var(--dim)}
.friend-status{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px}
.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-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}

/* ═══════════════ 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:960px;margin:0 auto}
.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-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.shop-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;cursor:default;transition:border-color .15s,transform .15s}
.shop-item:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.shop-item-img{height:104px;background:linear-gradient(135deg,var(--bg-elevated),var(--bg-card));
  display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--gold-dim)}
.shop-item-info{padding:10px}
.shop-item-name{font-size:12px;font-weight:700;color:var(--bright);margin-bottom:3px;letter-spacing:0.5px}
.shop-item-price{font-size:11px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:4px}
.shop-item-soon{font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--warn);
  background:rgba(230,140,38,0.08);border:1px solid rgba(230,140,38,0.2);
  padding:1px 5px;border-radius:2px;text-transform:uppercase}
.shop-slot-status{font-size:10px;color:var(--dim);margin-bottom:4px}

/* ═══════════════ HALL OF HONOUR TAB ═══════════════ */
.hall-layout{max-width:880px;margin:0 auto}
.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)}