/* ====================================================================
   OVERCLOCK — Terran-style command-console UI
   Gunmetal steel · chamfered consoles · amber/teal command accents
   ==================================================================== */
:root{
  /* base / steel */
  --bg:#06090f;
  --steel-0:#0a1019; --steel-1:#0f1a26; --steel-2:#16273a; --steel-3:#1f3650;
  --panel:linear-gradient(180deg,#13202e,#0c1622);
  --panel-2:linear-gradient(180deg,#172838,#0e1a28);
  --line:#284663; --line2:#3a648c; --rivet:#4b7299;
  --bevel-hi:rgba(140,195,235,.16); --bevel-lo:rgba(0,0,0,.6);
  /* text */
  --text:#cfe1f1; --muted:#8095a8; --dim:#566a7e;
  /* accents */
  --amber:#ffb24c; --amber-2:#ff8a2b; --gold:#ffd27a;
  --teal:#3fd6e6; --cyan:#35e7ff; --green:#5dffae;
  --bad:#ff5147; --good:#46e36b; --sel:#7CFFB0;
  --mag:#ff4dd2; --lime:#9dff3c;
  /* type */
  --font:"Bahnschrift","Eurostile","DIN Alternate","Oswald","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --amber-glow:0 0 14px rgba(255,178,76,.45);
  --teal-glow:0 0 14px rgba(63,214,230,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font);-webkit-font-smoothing:antialiased;user-select:none;letter-spacing:.2px}
body{position:fixed;inset:0}
b{font-weight:700}
.mono{font-family:var(--mono)}
kbd{font-family:var(--mono);background:linear-gradient(180deg,#1b2a3c,#0c1422);border:1px solid var(--line2);
  border-radius:3px;padding:1px 5px;font-size:.78em;color:var(--gold);font-weight:700;
  box-shadow:inset 0 1px 0 var(--bevel-hi),0 1px 2px rgba(0,0,0,.5)}
input,select,button{font-family:inherit;color:var(--text)}
.muted{color:var(--muted);font-size:.85rem}
.center{text-align:center}

/* ---------------- screens & backdrops ---------------- */
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}
#menu,#lobby{overflow:auto;
  background:
    radial-gradient(1100px 640px at 50% -8%,rgba(63,214,230,.10),transparent 62%),
    radial-gradient(900px 600px at 88% 112%,rgba(255,178,76,.09),transparent 60%),
    linear-gradient(180deg,rgba(7,12,19,.62),rgba(4,7,12,.88)),
    #04070c;}
#menu::before,#lobby::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(3,7,12,.32),rgba(3,7,12,.82)),
    radial-gradient(ellipse at 50% 38%,transparent 0 42%,rgba(0,0,0,.54) 86%);
  backdrop-filter:saturate(1.05)}
.grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    repeating-linear-gradient(0deg,rgba(63,140,180,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(63,140,180,.05) 0 1px,transparent 1px 46px);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 85%)}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(150,210,240,.035) 0 1px,transparent 1px 3px)}

/* ---------------- shared chrome: panels ---------------- */
/* chamfered console panel: top-right + bottom-left corner cut, hard bevels */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);
  margin:14px 0;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 0 1px rgba(8,14,22,.6),inset 0 -16px 26px rgba(0,0,0,.35);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,#1d3247,#0e1c2a);
  border-bottom:1px solid var(--line);
  padding:8px 14px;font-size:.74rem;letter-spacing:3px;color:var(--gold);
  text-transform:uppercase;font-weight:700;text-shadow:0 0 10px rgba(255,178,76,.35)}
.panel-head::before{content:"";width:4px;height:13px;margin-right:9px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--amber),var(--amber-2));box-shadow:var(--amber-glow)}
.panel-head>span:first-child{flex:1}
.panel-head .muted,.panel-head>span:last-child{letter-spacing:1px}
.panel-body{padding:14px}

/* big framed container (menu card, lobby header, result card) with corner brackets */
.panel-frame{position:relative;background:
    linear-gradient(180deg,rgba(16,28,40,.9),rgba(8,15,23,.94));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--bevel-hi),0 18px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(5px)}
.panel-frame::before,.panel-frame::after{content:"";position:absolute;width:18px;height:18px;
  border:2px solid var(--amber);opacity:.8;pointer-events:none;box-shadow:var(--amber-glow)}
.panel-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.panel-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ---------------- shared chrome: buttons & inputs ---------------- */
.btn{position:relative;background:linear-gradient(180deg,#1f3346,#0d1826);
  border:1px solid var(--line2);color:var(--text);
  padding:11px 18px;font-weight:700;letter-spacing:1.5px;cursor:pointer;text-transform:uppercase;
  font-size:.9rem;transition:.12s;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -8px 14px rgba(0,0,0,.32)}
.btn:hover{border-color:var(--teal);color:#fff;
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 14px rgba(63,214,230,.25);
  filter:drop-shadow(0 0 10px rgba(63,214,230,.4))}
.btn:active{filter:none;transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;border-color:var(--line);color:var(--muted)}
.btn.primary{background:linear-gradient(180deg,var(--amber),var(--amber-2));
  border-color:var(--gold);color:#1c1206;text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -8px 14px rgba(120,60,0,.4)}
.btn.primary:hover{color:#160e02;filter:drop-shadow(0 0 16px rgba(255,178,76,.6))}
.btn.ghost{background:transparent;border-color:var(--line2);box-shadow:none;color:var(--muted)}
.btn.ghost:hover{color:#fff;border-color:var(--teal)}
.btn.small{padding:7px 13px;font-size:.76rem;letter-spacing:1px}
.btn.big{width:100%;padding:15px;font-size:1.05rem;margin-top:14px}

.mini{background:linear-gradient(180deg,#1a2b3d,#0c1624);border:1px solid var(--line2);color:var(--muted);
  width:26px;height:26px;cursor:pointer;font-size:.9rem;line-height:1;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  box-shadow:inset 0 1px 0 var(--bevel-hi)}
.mini:hover{color:var(--teal);border-color:var(--teal)}

input,select{background:#08111d;border:1px solid var(--line2);
  padding:10px 12px;width:100%;font-size:1rem;outline:none;color:var(--text);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(0,0,0,.4)}
input:focus,select:focus{border-color:var(--amber);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 1px rgba(255,178,76,.4),var(--amber-glow)}
select{cursor:pointer}
input::placeholder{color:var(--dim);letter-spacing:1px}

/* color signature swatches */
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border:2px solid #0a1420;cursor:pointer;opacity:.55;transition:.12s;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.swatch:hover{opacity:1}
.swatch.sel{opacity:1;border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.5);transform:scale(1.08)}
.swatch.taken{opacity:.22;cursor:not-allowed;filter:grayscale(.6)}
.swatches.small .swatch{width:26px;height:26px}

/* ---- faction (race) picker ---- */
.races{display:flex;gap:8px;flex-wrap:wrap}
.race-btn{--rc:#7fdcff;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 11px;background:#0a141f;border:1px solid var(--line);border-radius:7px;cursor:pointer;
  transition:.13s;min-width:92px}
.race-btn:hover{border-color:var(--rc);background:#0d1825}
.race-btn .race-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:2px;color:var(--rc);opacity:.85}
.race-btn .race-nm{font-size:.86rem;font-weight:800;letter-spacing:1px;color:#cfe0f0}
.race-btn.sel{border-color:var(--rc);background:linear-gradient(180deg,#0e1c2a,#0a1420);
  box-shadow:inset 0 0 0 1px var(--rc),0 0 16px -5px var(--rc)}
.race-btn.sel .race-nm{color:#fff}
.races.small .race-btn{min-width:76px;padding:6px 9px}
.race-info{margin:8px 0 2px;padding:9px 11px;background:#0a141f;border:1px solid var(--line);border-radius:7px}
.race-info .ri-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.race-info .ri-head b{font-size:.92rem;letter-spacing:1px}
.race-info .ri-style{font-size:.62rem;letter-spacing:1px;color:var(--gold);text-transform:uppercase}
.race-info .ri-blurb{font-size:.78rem;color:#aebccf;margin:4px 0;line-height:1.4}
.race-info .ri-passive{display:flex;align-items:center;gap:7px;font-size:.76rem;color:#dfeaf6}
.race-info .ri-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor;flex:0 0 auto}
.row.top{align-items:flex-start}
.tag.race{font-family:var(--mono);letter-spacing:1px}
.htp-faces{display:flex;gap:6px;margin-top:7px}
.htp-faces img{width:30px;height:30px;object-fit:contain;background:#0a1420;border:1px solid var(--line);
  border-radius:6px;padding:2px;filter:drop-shadow(0 0 4px rgba(120,200,255,.35))}

/* ---------------- MENU ---------------- */
.menu-inner{max-width:580px;margin:34px auto 60px;padding:26px 26px 30px;position:relative;z-index:2}
.brand{text-align:center;margin-bottom:18px}
.logo{font-size:64px;font-weight:800;letter-spacing:8px;
  color:#eaf6ff;
  background:linear-gradient(100deg,#cfe6f5 28%,#ffffff 50%,#cfe6f5 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% auto;animation:sheen 7s linear infinite;
  filter:drop-shadow(0 0 22px rgba(63,214,230,.4))}
.logo span{-webkit-text-fill-color:var(--amber);color:var(--amber);
  filter:drop-shadow(0 0 22px rgba(255,178,76,.55))}
@keyframes sheen{to{background-position:220% center}}
.logo-rule{height:2px;margin:8px auto 0;max-width:360px;
  background:linear-gradient(90deg,transparent,var(--amber),var(--teal),transparent);
  box-shadow:0 0 14px rgba(255,178,76,.45)}
.tagline{color:var(--muted);margin-top:12px;font-size:.92rem;letter-spacing:1px;text-transform:uppercase}
.tagline b{color:var(--amber)}
.identity label{display:block;font-size:.7rem;letter-spacing:2.5px;color:var(--teal);margin:4px 0 6px;text-transform:uppercase}
.identity input{margin-bottom:6px}
.menu-actions{margin:4px 0}
#createBtn{width:100%;padding:16px;font-size:1.08rem}
.join-row{display:flex;gap:9px;margin-top:11px}
.join-row input{flex:1;text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:700;font-family:var(--mono)}
.join-row .btn{flex:0 0 auto}
.room-list{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow:auto}
.room-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  background:#0a141f;border:1px solid var(--line);padding:9px 13px;cursor:pointer;transition:.12s;font-size:.85rem;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.room-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-row b{font-family:var(--mono);color:var(--gold);letter-spacing:2px}
.room-row:hover{border-color:var(--teal);background:#0d1c2a;box-shadow:inset 0 0 12px rgba(63,214,230,.18)}
.room-row.full{opacity:.45;cursor:default}
.room-row .st{color:var(--green);font-size:.72rem;letter-spacing:1.5px}
.room-row.full .st{color:var(--muted)}
.version{text-align:center;color:#3c4a5c;font-size:.7rem;margin-top:22px;letter-spacing:2px;text-transform:uppercase}

/* ---------------- LOBBY ---------------- */
.lobby-inner{max-width:1020px;margin:0 auto;padding:22px;position:relative;z-index:2}
.lobby-head{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:12px 18px}
.code-box{font-size:.74rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.code-box b{font-family:var(--mono);font-size:1.5rem;color:var(--gold);letter-spacing:6px;margin:0 10px;
  text-shadow:var(--amber-glow)}
.badge{margin-left:auto;background:#0a141f;border:1px solid var(--line2);padding:5px 13px;
  font-size:.72rem;letter-spacing:2.5px;color:var(--amber);text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.lobby-grid{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:14px}
.host-panel{grid-row:span 1}
.chat-panel{grid-column:1 / span 2}
.player-list{display:flex;flex-direction:column;gap:7px;min-height:120px}
.pl-row{display:flex;align-items:center;gap:10px;background:#0a141f;border:1px solid var(--line);padding:9px 12px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 9px currentColor,inset 0 0 3px rgba(0,0,0,.5)}
.pl-row b{flex:1;letter-spacing:.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:.62rem;letter-spacing:1.5px;padding:2px 7px;background:#0e1a28;color:var(--muted);
  border:1px solid var(--line);text-transform:uppercase;font-weight:700}
.tag.host{color:var(--amber);border-color:#5e451d}
.tag.cpu{color:#9fb3c9}
.tag.team{color:var(--teal);border-color:#1c4a5a}
.tag.rdy{color:var(--green);border-color:#1c5a3a}
.tag.wait{color:var(--muted)}
.my-controls{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.row{display:flex;align-items:center;gap:10px;margin:9px 0}
.row label{width:76px;font-size:.7rem;letter-spacing:2px;color:var(--teal);text-transform:uppercase}
.setup select{flex:1}
#botCount{font-family:var(--mono);min-width:24px;text-align:center;font-size:1.15rem;color:var(--gold)}
#readyBtn.on{background:linear-gradient(180deg,#13502c,#0a3018);
  border-color:var(--good);color:#dfffe8;box-shadow:inset 0 1px 0 rgba(120,255,170,.3),0 0 14px rgba(70,227,107,.4)}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px;font-size:.84rem;
  min-height:90px;max-height:170px;padding:6px 4px}
.chat-line{line-height:1.45;color:#c1cedd;word-wrap:break-word}
.chat-line.sys{color:var(--muted);font-style:italic;font-size:.8rem}
.chat-input{margin-top:9px}

/* ====================================================================
   GAME / HUD
   ==================================================================== */
#stage{position:absolute;inset:0;background:#05070d}
#stage canvas{display:block;width:100%;height:100%}
.hud{position:absolute;pointer-events:none;z-index:5}
.hud button,.hud input,.hud canvas,.hud .cmd-btn{pointer-events:auto}
/* faint CRT over the battlefield (below HUD, above canvas) */
#game::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px)}

/* ---- top-center reactor: heat gauge + overclock ---- */
#hudReactor{top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  padding:8px 16px;pointer-events:auto;
  background:linear-gradient(180deg,#15263a,#0a131f);border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -10px 18px rgba(0,0,0,.4);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.reactor-label{font-size:.66rem;letter-spacing:3px;color:var(--amber);font-weight:700;text-transform:uppercase}
.heatbar{position:relative;width:168px;height:16px;background:#070e18;border:1px solid var(--line2);
  overflow:hidden;box-shadow:inset 0 0 10px rgba(0,0,0,.8)}
#heatFill{position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,#ff7a3c,#ff5147);
  box-shadow:0 0 14px rgba(255,81,71,.7);transition:width .12s linear,background .2s}
.heat-segs{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(5,9,15,.9) 15px 17px)}
#game.overheat #heatFill{box-shadow:0 0 20px rgba(255,90,40,.95)}
#heatMark{position:absolute;right:0;top:0;height:100%;width:3px;background:rgba(255,70,60,.9);
  box-shadow:0 0 8px rgba(255,70,60,.9)}
.ocbtn{background:linear-gradient(180deg,#3a1c52,#221033);border:1px solid #6a2c9a;color:#f0d8ff;
  padding:8px 14px;font-weight:800;letter-spacing:1.5px;cursor:pointer;font-size:.78rem;transition:.1s;text-transform:uppercase;
  min-width:156px;text-align:center;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  box-shadow:inset 0 1px 0 rgba(255,180,255,.2)}
.ocbtn kbd{margin-left:3px}
.ocbtn:hover{border-color:var(--mag);filter:drop-shadow(0 0 12px rgba(255,77,210,.5))}
.ocbtn.active{background:linear-gradient(180deg,#ff8a3c,#ff3b30);border-color:var(--gold);color:#fff;
  filter:drop-shadow(0 0 16px rgba(255,90,40,.7));animation:ocpulse .6s infinite alternate}
.ocbtn.cooldown{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
@keyframes ocpulse{from{filter:drop-shadow(0 0 8px rgba(255,90,40,.5))}to{filter:drop-shadow(0 0 20px rgba(255,90,40,.95))}}

/* ---- top-right resource console ---- */
#hudResources{top:12px;right:12px;display:flex;align-items:stretch;gap:0;pointer-events:auto;
  background:linear-gradient(180deg,#15263a,#0a131f);border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -10px 18px rgba(0,0,0,.4);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.res{display:flex;align-items:center;gap:7px;font-family:var(--mono);padding:9px 15px;
  border-right:1px solid rgba(0,0,0,.45);box-shadow:1px 0 0 rgba(140,195,235,.07)}
.res:last-child{border-right:none;box-shadow:none}
.res .ico{font-size:1rem}
.res b{font-size:1.3rem;color:#eaf6ff;font-weight:700;min-width:1ch}
.res i{font-style:normal;color:var(--muted);font-size:.74rem;margin-left:1px}
.res.energy .ico{color:var(--cyan)}
.res.energy b{text-shadow:0 0 12px rgba(53,231,255,.5)}
.res.supply .ico{color:var(--lime)}
.res.supply b{text-shadow:0 0 12px rgba(157,255,60,.4)}
.res.supply.capped b{color:var(--bad);text-shadow:0 0 12px rgba(255,81,71,.6)}
.res.clock .ico{color:var(--muted)}
.res.clock b{font-size:1.1rem;color:var(--muted)}

/* ---- bottom command console ---- */
#hudConsole{left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:0 10px 10px;height:auto}
#hudConsole::before{content:"";position:absolute;left:0;right:0;bottom:0;height:138px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,10,16,.65) 38%,rgba(6,10,16,.92));
  border-top:1px solid rgba(63,140,180,.18)}
/* a shared steel sub-panel look for the console wings + center */
.wing-left,.console-center{position:relative;pointer-events:auto;
  background:linear-gradient(180deg,#152537,#0a131e);
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 0 1px rgba(8,14,22,.5),inset 0 -14px 24px rgba(0,0,0,.4);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.wing-left{flex:0 0 auto;padding:7px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.console-center{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:12px;padding:10px 14px;min-height:118px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px)}
/* right wing: chamfered steel drawn via ::before so the BUILD popover (a child
   of #cmdWrap) can overflow upward WITHOUT being clipped by the wing */
.wing-right{position:relative;pointer-events:auto;flex:0 0 auto;padding:8px 10px 9px}
.wing-right::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#152537,#0a131e);border:1px solid var(--line2);
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px),0 12px);
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -14px 24px rgba(0,0,0,.4);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.wing-right>#cmdWrap{position:relative;z-index:1}

#minimapWrap{position:relative;padding:0;background:#070d16;border:1px solid #0a1420;
  box-shadow:inset 0 0 20px rgba(0,0,0,.7)}
#minimap{display:block;cursor:crosshair;width:220px;height:160px}

/* portrait box */
.portrait{flex:0 0 96px;width:96px;align-self:center;aspect-ratio:1/1;position:relative;
  background:radial-gradient(circle at 50% 38%,#102236,#070d15);
  border:1px solid var(--line2);overflow:hidden;
  box-shadow:inset 0 0 22px rgba(0,0,0,.75),inset 0 0 0 1px rgba(8,14,22,.6);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.portrait.active{border-color:var(--pcol,var(--teal));
  box-shadow:inset 0 0 22px rgba(0,0,0,.7),0 0 16px color-mix(in srgb,var(--pcol,#3fd6e6) 45%,transparent)}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.5}
.portrait-img{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:84%;height:84%;
  object-fit:contain;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--pcol,#7fd0ff) 60%,transparent))}
.portrait-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:.6rem;letter-spacing:2px;color:var(--dim);text-transform:uppercase;padding:6px}

/* selection readout */
.sel-info{flex:1 1 auto;min-width:0;align-self:center;color:#c3cedd;display:flex;flex-direction:column;gap:6px}
.sel-info:empty::before{content:"NO SELECTION";color:var(--dim);font-size:.72rem;letter-spacing:2px}
.sel-title{font-weight:800;letter-spacing:1.5px;color:#eaf6ff;font-size:1.15rem;text-transform:uppercase;
  text-shadow:0 0 14px rgba(124,255,176,.35)}
.sel-sub{font-size:.78rem;color:var(--muted)}
.hpbar{height:9px;background:#070e18;border:1px solid var(--line2);overflow:hidden;max-width:240px;
  box-shadow:inset 0 0 6px rgba(0,0,0,.7)}
.hpbar i{display:block;height:100%;transition:width .15s linear;box-shadow:0 0 8px currentColor}
.sel-tags{display:flex;flex-wrap:wrap;gap:5px}
.sel-tag{font-size:.64rem;font-family:var(--mono);color:#aec6dc;background:#0a1626;border:1px solid var(--line);
  padding:2px 7px;letter-spacing:.5px}
.sel-tag.good{color:var(--green);border-color:#1c5a3a}

/* command card (right wing) */
#cmdWrap{position:relative;display:flex;flex-direction:column;gap:7px;align-items:stretch}
.cmd-head{font-size:.62rem;letter-spacing:3px;color:var(--gold);text-transform:uppercase;font-weight:700;
  text-align:center;opacity:.85}
.cmd-bar{display:flex;flex-direction:column;gap:7px;align-items:center}
.cmd-grid{display:grid;grid-template-columns:repeat(3,78px);grid-auto-rows:64px;gap:6px}
.cmd-btn{position:relative;background:linear-gradient(180deg,#16263a,#0b1623);border:1px solid var(--line2);
  cursor:pointer;text-align:center;padding:6px 4px 4px;overflow:hidden;transition:.1s;line-height:1.1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -6px 12px rgba(0,0,0,.35)}
.cmd-btn:hover{border-color:var(--teal);filter:drop-shadow(0 0 8px rgba(63,214,230,.45));z-index:2}
.cmd-btn:active{transform:translateY(1px)}
.cmd-btn .cmd-ico{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(120,200,255,.4))}
.cmd-btn b{display:block;font-size:.7rem;color:#eaf6ff;letter-spacing:.2px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-btn i{font-style:normal;display:block;font-size:.55rem;color:var(--muted);font-family:var(--mono);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
/* research buttons have no icon → give long names (e.g. "Infiltration") two lines */
.cmd-btn.research-btn b{white-space:normal;line-height:1.04;font-size:.64rem;max-height:2.1em}
.cmd-btn .ck{position:absolute;top:2px;left:4px;font-size:.6rem;font-family:var(--mono);color:var(--gold);
  z-index:2;text-shadow:0 0 4px #000;font-weight:700}
.cmd-btn .sup{position:absolute;top:2px;right:4px;font-size:.54rem;font-family:var(--mono);color:var(--lime);
  z-index:2;text-shadow:0 0 4px #000;font-weight:700}
.cmd-btn.disabled{opacity:.42;filter:grayscale(.5)}
.cmd-btn.disabled i{color:var(--bad)}
.cmd-btn.armed,.cmd-btn.on{border-color:var(--good);
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 14px rgba(70,227,107,.4);
  animation:armedPulse .8s infinite alternate}
.cmd-btn.build-toggle{background:linear-gradient(180deg,#123a2e,#0a201a);
  border-color:#1c5a44}
.cmd-btn.build-toggle .bt-ico{font-size:1.2rem;color:var(--good);line-height:1}
.cmd-btn.build-toggle b{color:#dffeec;letter-spacing:1px}
.cmd-btn.build-toggle:hover{border-color:var(--good);filter:drop-shadow(0 0 9px rgba(70,227,107,.5))}
@keyframes armedPulse{from{box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 8px rgba(70,227,107,.35)}
  to{box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 0 18px rgba(70,227,107,.7)}}
.queue{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;max-width:246px}
.qchip{position:relative;width:26px;height:22px;background:#0a1424;border:1px solid var(--line2);
  font-size:.64rem;line-height:22px;text-align:center;color:#cfe2f5;overflow:hidden;font-family:var(--mono);
  animation:chipIn .18s cubic-bezier(.2,1.5,.4,1)}
.qchip i{position:absolute;left:0;bottom:0;height:3px;background:var(--cyan);transition:width .12s linear;box-shadow:0 0 6px var(--cyan)}
@keyframes chipIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- BUILD command card popover (floats above the command grid) ---- */
.build-card{position:absolute;right:0;bottom:calc(100% + 12px);width:430px;pointer-events:auto;z-index:6;
  background:linear-gradient(180deg,rgba(18,30,44,.98),rgba(9,15,24,.99));
  border:1px solid var(--line2);padding:0 0 13px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:inset 0 1px 0 var(--bevel-hi);
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.7));
  animation:bcIn .16s cubic-bezier(.2,1.3,.4,1)}
.build-card.hidden{display:none}
.bc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;padding:9px 14px;
  background:linear-gradient(180deg,#1d3247,#0e1c2a);border-bottom:1px solid var(--line);
  font-size:.72rem;letter-spacing:3px;color:var(--gold);text-transform:uppercase;font-weight:700}
.bc-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:2px 6px}
.bc-close:hover{color:var(--bad)}
.bc-body{display:flex;gap:13px;padding:0 13px}
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:5px;width:224px;flex:none}
.cc-slot{position:relative;aspect-ratio:1/1;cursor:pointer;padding:0;overflow:hidden;
  background:linear-gradient(180deg,#102036,#0a1322);border:1px solid var(--line);
  transition:transform .09s,border-color .12s,box-shadow .12s;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.cc-slot.empty{cursor:default;opacity:.5;border-style:dashed;border-color:rgba(40,60,95,.45);
  background:repeating-linear-gradient(45deg,#090e18 0 7px,#0b1220 7px 14px)}
.cc-slot:not(.empty):hover{border-color:var(--teal);box-shadow:inset 0 0 12px rgba(63,214,230,.3);transform:translateY(-2px)}
.cc-slot:not(.empty):active{transform:translateY(0) scale(.95)}
.cc-slot .cc-ico{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(120,200,255,.45));pointer-events:none}
.cc-slot .cc-ico.ph{width:60%;height:60%;background:radial-gradient(circle,#2a3a55,transparent 70%)}
.cc-slot .cc-key{position:absolute;top:3px;left:5px;font-size:.6rem;font-family:var(--mono);color:var(--gold);z-index:2;text-shadow:0 0 4px #000;font-weight:700}
.cc-slot .cc-cost{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:.62rem;color:#9fd9ff;
  font-family:var(--mono);padding:3px 0 2px;background:linear-gradient(0deg,rgba(5,8,15,.92),transparent)}
.cc-slot.armed{border-color:var(--good);box-shadow:inset 0 0 14px rgba(70,227,107,.5);animation:armedPulse .8s infinite alternate}
.cc-slot.disabled{filter:grayscale(.55);opacity:.5}
.cc-slot.disabled .cc-cost{color:var(--bad)}
.bc-desc{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.bc-name{font-size:.98rem;font-weight:800;color:#eaf6ff;letter-spacing:.6px;text-transform:uppercase;
  text-shadow:0 0 12px rgba(63,214,230,.35)}
.bc-name kbd{margin-left:4px}
.bc-stats{display:flex;flex-wrap:wrap;gap:5px}
.bc-stat{font-size:.64rem;font-family:var(--mono);color:#bcd;background:#0a1626;border:1px solid var(--line);padding:2px 6px}
.bc-stat.good{color:var(--green);border-color:rgba(70,227,107,.4)}
.bc-text{font-size:.78rem;color:var(--muted);line-height:1.5;flex:1}
.bc-tip{font-size:.68rem;color:var(--lime);letter-spacing:.3px}
.bc-tip.bad{color:var(--bad)}
@keyframes bcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- in-game chat (top-left) ---- */
#gameChat{left:12px;top:58px;width:280px;display:flex;flex-direction:column;gap:5px}
#gameChat .chat-log{width:100%;min-height:0;max-height:130px;background:rgba(8,13,21,.55);
  padding:6px 9px;border:1px solid transparent;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
#gameChat .chat-log:empty{display:none}
#gameChatInput{background:rgba(9,16,27,.88);border:1px solid var(--line);font-size:.82rem;padding:7px 10px}
#gameChatInput:focus{border-color:var(--amber)}

/* ---- countdown / toast ---- */
.big-text{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  font-size:88px;font-weight:800;letter-spacing:8px;color:#eaf6ff;text-transform:uppercase;
  text-shadow:0 0 30px rgba(63,214,230,.7);pointer-events:none;z-index:8}
.big-text.show{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.big-text.go{color:var(--amber);text-shadow:0 0 38px rgba(255,140,40,.85)}
.big-text.count{color:var(--teal)}
.big-text.show.count{animation:countGlow .9s ease}
.big-text.show.go{animation:goGlow .6s ease}
@keyframes countGlow{0%{text-shadow:0 0 10px rgba(63,214,230,.4)}50%{text-shadow:0 0 50px rgba(63,214,230,1)}100%{text-shadow:0 0 24px rgba(63,214,230,.6)}}
@keyframes goGlow{0%{text-shadow:0 0 20px rgba(255,150,40,.6)}50%{text-shadow:0 0 60px rgba(255,150,40,1)}100%{text-shadow:0 0 30px rgba(255,150,40,.7)}}
.toast{position:absolute;top:66px;left:50%;transform:translateX(-50%) translateY(-12px);opacity:0;
  background:linear-gradient(180deg,#15263a,#0a131f);border:1px solid var(--line2);padding:9px 18px;
  font-size:.88rem;z-index:8;pointer-events:none;letter-spacing:.5px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  transition:.25s;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:rgba(255,81,71,.95);color:#ffe4e1;
  box-shadow:inset 0 0 14px rgba(255,81,71,.18);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,81,71,.3))}

/* ---- result overlay ---- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;
  background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.55),rgba(0,0,0,.88))}
.overlay.hidden{display:none}
.result-card{padding:34px 46px;text-align:center;min-width:360px;
  animation:cardIn .5s cubic-bezier(.2,1.2,.3,1)}
#resultTitle{font-size:58px;letter-spacing:8px;margin-bottom:20px;font-weight:800;text-transform:uppercase}
#resultTitle.win{color:var(--good);text-shadow:0 0 30px rgba(70,227,107,.6);animation:winPulse 1.4s ease infinite alternate}
#resultTitle.lose{color:var(--bad);text-shadow:0 0 30px rgba(255,81,71,.6)}
#resultTitle.draw{color:var(--amber);text-shadow:0 0 30px rgba(255,178,76,.6)}
@keyframes winPulse{from{text-shadow:0 0 24px rgba(70,227,107,.5)}to{text-shadow:0 0 48px rgba(70,227,107,.95)}}
@keyframes cardIn{from{transform:translateY(24px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.scoreboard{display:flex;flex-direction:column;gap:7px;margin-bottom:24px}
.score-row{display:flex;align-items:center;gap:11px;background:#0a141f;border:1px solid var(--line);padding:9px 15px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.score-row b{flex:1;text-align:left;letter-spacing:.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-row i{font-style:normal;color:var(--muted);font-size:.72rem}
.score-row .st{font-size:.72rem;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.result-actions{display:flex;gap:12px;justify-content:center}

/* ---- misc HUD ---- */
/* faint help ticker riding just above the bottom command console */
.controls-hint{position:absolute;bottom:148px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  font-size:.66rem;color:#7c92a8;background:rgba(7,11,18,.66);padding:4px 14px;letter-spacing:.4px;opacity:.9;
  border:1px solid rgba(40,70,99,.5);text-align:center;line-height:1.5;
  max-width:min(940px,94vw);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.controls-hint kbd{font-size:.74em;padding:0 4px}
.net-status{position:absolute;top:8px;right:8px;z-index:20;background:rgba(150,28,28,.92);color:#fff;
  padding:6px 13px;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;border:1px solid #ff6a5a}
.net-status.hidden{display:none}
.screen-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9;mix-blend-mode:screen}
#game.overheat::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  box-shadow:inset 0 0 120px rgba(255,60,30,.5);animation:heatpulse 1s infinite alternate}
@keyframes heatpulse{from{box-shadow:inset 0 0 90px rgba(255,60,30,.35)}to{box-shadow:inset 0 0 150px rgba(255,60,30,.6)}}

/* ---- responsive ---- */
@media(max-width:980px){
  .lobby-grid{grid-template-columns:1fr}.chat-panel{grid-column:1}
}
@media(max-width:880px){
  .logo{font-size:46px;letter-spacing:5px}
  .cmd-grid{grid-template-columns:repeat(3,66px);grid-auto-rows:58px}
  .cmd-btn b{font-size:.64rem}
  .portrait{flex-basis:78px;width:78px}
  #hudReactor{gap:8px;padding:7px 11px}.heatbar{width:120px}
  .help-btn{width:34px;height:34px}
}

/* ---- worker economy: 2nd resource + tech-tree command states ---- */
.res.data .ico{color:#ff4dd2}
.res.data b{text-shadow:0 0 12px rgba(255,77,210,.5)}
.cmd-btn.locked{opacity:.5;filter:grayscale(.7)}
.cmd-btn .lock{position:absolute;right:3px;top:2px;font-size:.58rem;opacity:.9;z-index:2}
.cmd-btn.research-btn{background:linear-gradient(180deg,#2a1838,#150a22)}
.cmd-btn.research-btn .ck{color:#ff8de0}
.cmd-btn.research-btn b{color:#ffd9f4}
.cmd-btn.research-btn.done{opacity:.5;border-color:var(--good)}
.cmd-btn.research-btn.researching{border-color:#ff8de0;box-shadow:0 0 9px rgba(255,141,224,.4)}
.cmd-btn.research-btn.researching::after{content:'';position:absolute;left:0;bottom:0;height:3px;
  width:var(--prog,0%);background:#ff8de0;transition:width .2s linear}
.cc-slot.locked{filter:grayscale(.7);opacity:.55}
.cc-slot .cc-lock{position:absolute;right:3px;top:3px;font-size:.62rem;z-index:3;text-shadow:0 0 4px #000}

/* ====================================================================
   FIELD MANUAL / HOW-TO-PLAY  (menu button · in-game button · modal)
   ==================================================================== */
/* menu "field manual" call-to-action */
.how-to-btn{width:100%;margin-top:6px;background:linear-gradient(180deg,#172a3d,#0c1826);
  border-color:var(--line2);color:var(--gold);letter-spacing:2px}
.how-to-btn:hover{color:#fff;border-color:var(--teal)}

/* in-game round "?" help button, top-left */
.help-btn{position:absolute;top:12px;left:12px;z-index:7;width:38px;height:38px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#15263a,#0a131f);border:1px solid var(--line2);color:var(--gold);
  font-weight:800;font-size:1.15rem;line-height:1;pointer-events:auto;transition:.12s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  box-shadow:inset 0 1px 0 var(--bevel-hi),inset 0 -8px 14px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.5)}
.help-btn:hover{border-color:var(--teal);color:#fff;filter:drop-shadow(0 0 10px rgba(63,214,230,.45))}
.help-btn span{text-shadow:0 0 10px rgba(255,178,76,.4)}

/* modal */
.howto-overlay{z-index:30;padding:24px;
  background:radial-gradient(circle at 50% 28%,rgba(5,9,15,.86),rgba(2,4,8,.95));
  backdrop-filter:blur(3px)}
.howto-card{width:min(960px,96vw);max-height:90vh;padding:0;display:flex;flex-direction:column;overflow:hidden;
  animation:cardIn .35s cubic-bezier(.2,1.2,.3,1)}
.howto-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:15px 22px;
  background:linear-gradient(180deg,#1d3247,#0e1c2a);border-bottom:1px solid var(--line)}
.howto-title{font-size:.92rem;letter-spacing:4px;color:var(--gold);font-weight:800;text-transform:uppercase;
  text-shadow:0 0 12px rgba(255,178,76,.4)}
.howto-close{width:30px;height:30px;font-size:1rem;color:var(--muted)}
.howto-close:hover{color:var(--bad);border-color:var(--bad)}
.howto-body{overflow:auto;padding:6px 24px 28px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.howto-body::-webkit-scrollbar{width:10px}
.howto-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}

.htp-sec{margin:20px 0 8px}
.htp-h{font-size:.92rem;letter-spacing:2.5px;color:var(--teal);text-transform:uppercase;font-weight:800;
  display:flex;align-items:center;gap:9px;padding-bottom:7px;border-bottom:1px solid var(--line);
  text-shadow:0 0 12px rgba(63,214,230,.3)}
.htp-sub{font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.5}
.htp-sub kbd,.htp-p kbd{margin:0 1px}
.htp-p{font-size:.88rem;color:#bccedd;line-height:1.6;margin:9px 0}
.htp-p b{color:#eaf6ff}
.htp-p.htp-warn{color:#ffc9b0;background:rgba(255,80,40,.08);border-left:3px solid var(--amber-2);
  padding:9px 13px;border-radius:0 4px 4px 0}
.htp-p.htp-warn b{color:#ffd9a0}
.htp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.htp-mini{display:flex;flex-direction:column;gap:6px;background:#0a1626;border:1px solid var(--line);padding:11px 13px;
  font-size:.82rem;color:#aebfd0;line-height:1.45;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}

/* entity rows (units / structures / tech) */
.htp-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.htp-row{display:flex;gap:12px;background:linear-gradient(180deg,#0d1a28,#0a1320);border:1px solid var(--line);
  padding:11px 13px;align-items:flex-start;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}
.htp-ico{flex:0 0 46px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#102236,#070d15);border:1px solid var(--line2);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.htp-ico.tech{color:#ff8de0;font-size:1.5rem;text-shadow:0 0 10px rgba(255,141,224,.5)}
.htp-img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(120,200,255,.4))}
.htp-img.ph{width:60%;height:60%;background:radial-gradient(circle,#2a3a55,transparent 70%)}
.htp-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.htp-name{font-size:.92rem;font-weight:800;color:#eaf6ff;letter-spacing:.5px;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.htp-where{font-size:.6rem;font-weight:700;letter-spacing:1px;color:var(--gold);background:#0e1a28;
  border:1px solid var(--line);padding:1px 6px;text-transform:uppercase}
.htp-req{font-size:.6rem;font-weight:700;letter-spacing:.5px;color:var(--amber);background:rgba(255,178,76,.08);
  border:1px solid #5e451d;padding:1px 6px;text-transform:uppercase}
.htp-chips{display:flex;flex-wrap:wrap;gap:5px}
.htp-chip{font-size:.66rem;font-family:var(--mono);color:#b8cadb;background:#0a1626;border:1px solid var(--line);
  padding:2px 7px;white-space:nowrap}
.htp-chip.e{color:var(--cyan);border-color:rgba(53,231,255,.35)}
.htp-chip.d{color:var(--mag);border-color:rgba(255,77,210,.35)}
.htp-chip.good{color:var(--green);border-color:rgba(70,227,107,.4)}
.htp-desc{font-size:.8rem;color:var(--muted);line-height:1.5}

/* controls grid */
.htp-keys{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:10px 0}
.htp-key{display:flex;align-items:center;gap:10px;font-size:.84rem;padding:5px 2px;
  border-bottom:1px dashed rgba(40,70,99,.4)}
.htp-kc{flex:0 0 auto;min-width:120px;display:flex;gap:4px;flex-wrap:wrap}
.htp-kl{color:#aebfd0}

@media(max-width:720px){
  .htp-list,.htp-two,.htp-keys{grid-template-columns:1fr}
  .htp-key{border-bottom:1px dashed rgba(40,70,99,.4)}
}

/* ====================================================================
   Action feedback — command-mode banner, transient order tag, and the
   selection-panel production progress line.
   ==================================================================== */
.mode-banner{position:absolute;left:50%;top:120px;transform:translateX(-50%) translateY(-8px);
  z-index:8;pointer-events:none;opacity:0;transition:opacity .14s ease,transform .14s ease;
  font-family:var(--font);font-weight:800;letter-spacing:1.2px;font-size:.82rem;text-transform:uppercase;
  padding:8px 18px;color:#eaf6ff;white-space:nowrap;
  background:linear-gradient(180deg,rgba(14,26,40,.94),rgba(8,16,26,.94));
  border:1px solid var(--line2);border-radius:3px;
  box-shadow:0 6px 22px rgba(0,0,0,.55),inset 0 1px 0 var(--bevel-hi)}
.mode-banner.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mode-banner.attack{border-color:#ff5a5a;color:#ffd9d9;box-shadow:0 0 18px rgba(255,70,70,.4),inset 0 1px 0 var(--bevel-hi)}
.mode-banner.build{border-color:var(--good);color:#dffeec;box-shadow:0 0 18px rgba(70,227,107,.35),inset 0 1px 0 var(--bevel-hi)}
.mode-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.mode-banner.attack::before{background:#ff5a5a}
.mode-banner.build::before{background:var(--good)}

.order-tag{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.7);
  z-index:8;pointer-events:none;opacity:0;
  font-family:var(--font);font-weight:900;letter-spacing:2px;font-size:1.5rem;text-transform:uppercase;
  color:#eaf6ff;text-shadow:0 0 14px rgba(63,214,230,.7),0 2px 6px rgba(0,0,0,.8)}
.order-tag.show{animation:orderpop .95s ease-out forwards}
.order-tag.attack{color:#ff8a8a;text-shadow:0 0 16px rgba(255,80,80,.8),0 2px 6px rgba(0,0,0,.8)}
.order-tag.harvest{color:#7ff0ff;text-shadow:0 0 16px rgba(53,231,255,.8),0 2px 6px rgba(0,0,0,.8)}
@keyframes orderpop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-58%) scale(1.06)}
  35%{transform:translate(-50%,-60%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-74%) scale(1)}
}

.prod-line{display:flex;align-items:center;gap:7px;margin-top:6px;max-width:260px}
.prod-label{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.4px;max-width:140px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-bar{flex:1 1 auto;height:8px;background:#070e18;border:1px solid var(--line2);overflow:hidden;border-radius:2px}
.prod-bar i{display:block;height:100%;transition:width .12s linear;box-shadow:0 0 8px currentColor}
.prod-pct{flex:0 0 auto;font-size:.64rem;color:var(--muted);min-width:30px;text-align:right}

/* 3D command network — live rendered menu and restrained tactical glass. */
#menuScene{position:fixed;inset:0;z-index:0;pointer-events:none;background:#07101b}
#menuScene canvas{width:100%;height:100%;display:block}
#menu,#lobby{background:transparent}
#menu::before{background:linear-gradient(90deg,rgba(4,11,18,.96) 0,rgba(4,11,18,.89) 27%,rgba(4,11,18,.28) 56%,rgba(4,11,18,.06) 80%),linear-gradient(0deg,rgba(3,9,16,.8),transparent 35%);backdrop-filter:none;position:fixed}
#lobby::before{background:rgba(4,10,17,.72);backdrop-filter:blur(7px)}
#menu>.grid-bg,#menu>.scanlines{display:none}
.menu-topline{position:absolute;top:23px;left:44px;right:44px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:2px;color:#8aa4b2;z-index:2}
.menu-inner{width:430px;max-width:calc(100% - 40px);margin:85px 0 45px 6vw;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
.menu-inner::before,.menu-inner::after{display:none}
.brand{text-align:left;margin-bottom:27px}
.eyebrow{font:9px var(--mono);letter-spacing:2px;color:#7ed9dc;display:flex;align-items:center;gap:9px}
.eyebrow>span:last-child{color:#597783;margin-left:auto}
.status-light{display:inline-block;width:5px;height:5px;border-radius:50%;background:#76f4c7;box-shadow:0 0 9px #76f4c766}
.logo{font-size:57px;line-height:1.2;letter-spacing:-2px;font-weight:900;margin-top:15px;text-shadow:0 3px 30px #0009}
.logo span{color:#66e1e7}
.logo-rule{width:43px;margin:16px 0;background:#71e2e2;box-shadow:none;height:2px}
.tagline{font-size:10px;letter-spacing:2.2px;color:#d9e9ec;font-weight:600}
.menu-intro{color:#88a2b0;font-size:13px;line-height:1.7;max-width:345px;margin-top:13px}
.menu-inner .panel{background:rgba(12,26,37,.68);border:1px solid #597a8a38;clip-path:none;filter:none;box-shadow:none;border-radius:3px;margin:13px 0}
.menu-inner .panel-head{font:9px var(--mono);letter-spacing:2px;color:#8fa9b5;background:rgba(63,103,123,.08);padding:11px 14px;border-color:#597a8a28;text-shadow:none}
.menu-inner .panel-head::before{height:5px;width:5px;background:#5cd5d7;box-shadow:none;margin-right:9px}
.menu-inner .panel-body{padding:14px 17px}
.menu-inner label{font:8px var(--mono);letter-spacing:1.8px;color:#77939f;margin:10px 0 7px}
.menu-inner input{background:#06131d80;border-color:#3855657a;border-radius:2px;font-size:12px;padding:9px 11px}
.menu-inner .swatches{gap:9px}
.menu-inner .swatch{width:23px;height:23px;border-radius:3px;box-shadow:none}
.menu-inner .races{gap:7px;flex-wrap:nowrap}
.menu-inner .race-btn{min-width:0;flex:1;padding:8px 10px;background:#0d1c26;border:1px solid #395463;border-radius:2px;box-shadow:none}
.menu-inner .race-btn.sel{border-color:#6be0e0;background:#17313e;box-shadow:inset 0 -2px #6be0e0}
.menu-inner .race-btn .race-tag{font-size:8px}
.menu-inner .race-btn .race-nm{font-size:11px;letter-spacing:1px}
.menu-inner .race-info{padding:8px 0 0;margin:3px 0 0;border:0;background:transparent}
.menu-inner .ri-head{display:none}
.menu-inner .ri-blurb{font-size:11px;color:#98aeb7;margin:3px 0}
.menu-inner .ri-passive{font-size:9px;color:#6f8d9c}
.menu-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:16px}
#createBtn{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:#79e1dd;color:#08212b;font-size:11px;letter-spacing:2px;border:0;border-radius:2px;padding:16px 18px;box-shadow:0 0 30px #46d5d31a;clip-path:none}
#createBtn:hover{background:#a6fff4;box-shadow:0 0 25px #46d5d333}
#createBtn span{font-size:19px;line-height:13px}
.menu-inner .join-row{margin:0;display:flex;gap:9px}
.menu-inner .join-row input{width:auto;flex:1;min-width:0;letter-spacing:3px}
.menu-inner .join-row .btn{padding:9px 28px;font-size:10px;letter-spacing:2px;background:#102330;border-color:#35505f;border-radius:2px}
.menu-inner .room-list{max-height:85px}.menu-inner .room-list .muted{font-size:11px;color:#698695}
.menu-inner .how-to-btn{font:9px var(--mono);letter-spacing:1px;background:transparent;border:0;box-shadow:none;padding:5px 0;text-align:left;color:#8ca7b4;margin:5px 0}
.version{display:flex;justify-content:space-between;text-align:left;font:8px var(--mono);letter-spacing:1px;color:#56727f;margin-top:16px;padding-top:13px;border-top:1px solid #4c697633}
.scene-caption{position:absolute;right:6vw;bottom:7vh;z-index:2;text-align:right;pointer-events:none}
.scene-caption .eyebrow{justify-content:flex-end;font-size:8px;color:#6fb6c3;letter-spacing:2px}
.scene-caption h2{font-size:clamp(24px,3vw,47px);letter-spacing:3px;line-height:1.16;color:#d6e6e9;font-weight:300;margin:15px 0}
.scene-coordinate{font:8px var(--mono);letter-spacing:2px;color:#8399a3}
.scene-coordinate i{display:inline-block;width:28px;height:2px;background:#57e4d1;vertical-align:middle;margin-left:14px}
#stage{position:absolute;inset:0}
#stage #battlefieldOverlay{position:absolute;inset:0;pointer-events:none;z-index:1}
#heatAtmosphere{position:absolute;inset:0;box-shadow:inset 0 0 180px #ff532488;pointer-events:none;opacity:0}
#game::after{display:none}
.battle-ident{position:absolute;left:69px;top:23px;display:flex;gap:10px;align-items:center;pointer-events:none}
.battle-ident b{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#d7eaf1;display:block;font-weight:600}
.battle-ident div>span{font:7px var(--mono);letter-spacing:2px;color:#8eb4c3;display:block;margin-top:5px}
.camera-controls{position:absolute;right:20px;top:75px;display:flex;align-items:center;gap:4px;background:#07131fbd;border:1px solid #607e8a40;padding:4px 7px;border-radius:3px;backdrop-filter:blur(8px)}
.camera-controls>span{font:7px var(--mono);letter-spacing:1px;color:#698b9b;margin:0 6px}
.camera-controls button{border:0;background:transparent;color:#c0dbe5;font-size:17px;padding:3px 7px;cursor:pointer;min-width:28px}
.camera-controls button:hover{color:#7fffee;background:#74cfce18}
.camera-controls i{height:14px;width:1px;background:#62859344;margin:0 4px}
.camera-controls #qualityBtn{font:8px var(--mono);letter-spacing:1px;color:#82d7cf;min-width:61px}
#hudConsole{gap:8px;padding:0 12px 12px}
.wing-left,.console-center,.wing-right #cmdWrap{background:linear-gradient(155deg,#102330ee,#06111ceb);border:1px solid #4a6c804d;box-shadow:inset 0 1px #a1d7e111,0 8px 32px #0006;backdrop-filter:blur(12px);clip-path:none;border-radius:4px}
#hudReactor,#hudResources{background:linear-gradient(180deg,#102330ed,#07121de8);border-color:#5b7c8c55;box-shadow:0 8px 25px #0003;backdrop-filter:blur(12px)}
.portrait{background:radial-gradient(ellipse at 50% 60%,#3a7a8344,#06101b);border-color:#476c7b66}
.portrait-img{width:112%;height:112%;filter:none}
.controls-hint{font-size:8px;opacity:.65}
@media(min-width:1500px){.menu-inner{margin-top:11vh}.brand{margin-bottom:34px}.menu-inner .panel-body{padding:17px}.logo{font-size:65px}}
@media(max-height:850px) and (min-width:801px){.menu-inner{margin-top:64px;margin-bottom:20px}.brand{margin-bottom:14px}.logo{font-size:49px;margin-top:9px}.logo-rule{margin:10px 0}.menu-intro{margin-top:8px}.menu-inner .panel{margin:10px 0}.menu-inner .panel-body{padding:10px 14px}.menu-inner .race-info .ri-passive{display:none}.version{margin-top:10px;padding-top:8px}.menu-inner .rooms .panel-body{padding:8px 14px}.scene-caption{bottom:6vh}}
@media(max-width:1000px){.menu-inner{margin-left:4vw;width:390px}.scene-caption h2{font-size:26px}.scene-caption{right:4vw}.battle-ident{display:none}.camera-controls>span{display:none}}
@media(max-width:800px){.menu-topline{left:20px;right:20px;font-size:7px}.menu-inner{margin:65px auto 35px;width:420px}.scene-caption{display:none}#menu::before{background:rgba(4,12,20,.78)}.camera-controls{top:65px;right:8px}.menu-inner .logo{font-size:51px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.logo{animation:none;filter:none;background:none;-webkit-text-fill-color:#edf5f6}
.logo span{-webkit-text-fill-color:#69dce2;filter:none}
/* Keep resource counts and reactor controls from colliding as balances grow. */
#game::before{display:none}
#hudReactor{left:calc(50% - 90px);gap:9px;padding:7px 12px}
#hudReactor .heatbar{width:115px}
#hudReactor .ocbtn{min-width:140px;padding:8px 10px;font-size:10px}
#hudResources .res{padding:10px 11px;gap:6px}
#hudResources .res b{font-size:17px}#hudResources .res i{font-size:10px}
@media(max-width:1150px){#hudReactor{left:60px;transform:none}.reactor-label{display:none}#hudResources .res{padding:10px 8px}.camera-controls{top:67px}#gameChat{top:111px}}
@media(max-width:800px){#hudReactor{top:66px;left:12px}#hudResources{max-width:calc(100% - 61px)}#hudResources .res i{display:none}.camera-controls{top:116px}.controls-hint{display:none}#gameChat{top:161px}#minimap{width:150px;height:109px}.console-center{gap:7px;padding:8px}.portrait{flex-basis:65px;width:65px}.sel-info{font-size:11px}#hudConsole{padding:0 6px 6px;gap:5px}.console-center{min-height:95px}}