:root{
  --blue:#3da9fc; --red:#ef5366; --mineral:#5fe3c9; --gold:#ffd166;
  --panel:#0e1726; --panel2:#16233a; --line:#27384f; --ink:#dbe7f5; --dim:#7e93ac;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05070c;color:var(--ink);
  font-family:"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  user-select:none;-webkit-user-select:none;cursor:default}
#game-root{position:fixed;inset:0}
canvas#game{display:block;width:100%;height:100%;background:#0a1018;cursor:crosshair}
.hidden{display:none !important}
.mineral{color:var(--mineral)} .gold{color:var(--gold)}

/* Top bar */
#topbar{position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center;
  gap:18px;padding:0 14px;background:linear-gradient(#0e1726ee,#0e172699);
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;z-index:5}
#topbar .res{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600}
#topbar .res-icon{font-size:15px}
.res-icon.mineral{color:var(--mineral)} .res-icon.supply{color:var(--gold)}
#topbar .clock{color:var(--dim);font-weight:500}
#topbar .spacer{flex:1}
.topbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  width:30px;height:26px;border-radius:6px;cursor:pointer;font-size:13px}
.topbtn:hover{border-color:var(--blue)}

/* Bottom HUD */
#hud{position:absolute;left:0;right:0;bottom:0;height:172px;display:flex;
  background:linear-gradient(#0e172699,#0e1726f7);border-top:1px solid var(--line);z-index:5}
#minimap-wrap{padding:8px;border-right:1px solid var(--line);background:#070c14}
#minimap{display:block;border:1px solid var(--line);border-radius:4px;cursor:crosshair}
#selection-panel{flex:1;padding:10px 12px;overflow:hidden;border-right:1px solid var(--line)}
#command-card{width:264px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:54px;gap:6px;align-content:start}

/* Command card buttons */
.cmd-btn{position:relative;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:10px;line-height:1.1;
  padding:3px;text-align:center;transition:border-color .08s,transform .05s}
.cmd-btn .ico{font-size:18px}
.cmd-btn:hover{border-color:var(--blue);background:#1b2c46}
.cmd-btn:active{transform:translateY(1px)}
.cmd-btn.disabled{opacity:.4;cursor:not-allowed}
.cmd-btn .hot{position:absolute;top:2px;left:4px;font-size:9px;color:var(--gold);font-weight:700}
.cmd-btn .cost{position:absolute;bottom:2px;right:4px;font-size:9px;color:var(--mineral)}

/* Selection panel content */
.sel-title{font-size:15px;font-weight:700;margin-bottom:6px}
.sel-title small{color:var(--dim);font-weight:500;font-size:12px}
.sel-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--dim)}
.sel-stats b{color:var(--ink);font-weight:600}
.hpbar{height:7px;background:#0a1420;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;margin:7px 0;max-width:260px}
.hpbar > i{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#2bb673)}
.sel-grid{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;max-height:96px;overflow:hidden}
.sel-chip{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;
  background:var(--panel2);position:relative}
.sel-chip.sel{border-color:var(--blue)}
.sel-chip .mini-hp{position:absolute;left:2px;right:2px;bottom:2px;height:3px;background:#3ddc84;border-radius:2px}
.queue{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.queue .q{width:30px;height:30px;border:1px solid var(--line);border-radius:5px;display:flex;
  align-items:center;justify-content:center;font-size:14px;background:var(--panel2);position:relative;overflow:hidden}
.queue .q .pf{position:absolute;left:0;bottom:0;width:100%;background:#3da9fc55}
.build-progress{height:8px;background:#0a1420;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:8px;max-width:260px}
.build-progress > i{display:block;height:100%;background:linear-gradient(90deg,#3da9fc,#2b6fb6)}

/* Toasts */
#toasts{position:absolute;top:48px;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#16233aee;border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:7px 14px;border-radius:6px;font-size:13px;animation:fade 2.6s forwards}
.toast.bad{border-left-color:var(--red)} .toast.good{border-left-color:#3ddc84}
@keyframes fade{0%{opacity:0;transform:translateY(-6px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}

/* Overlays / menus */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#0b1526ee,#05070cf7);backdrop-filter:blur(2px)}
.menu-box{background:linear-gradient(#101c30,#0b1526);border:1px solid var(--line);
  border-radius:14px;padding:34px 40px;width:440px;text-align:center;
  box-shadow:0 24px 80px #000a}
.menu-box.wide{width:600px}
.menu-box h1{font-size:40px;letter-spacing:6px;font-weight:800;
  background:linear-gradient(90deg,#3da9fc,#5fe3c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-box h2{font-size:24px;margin-bottom:18px}
.tagline{color:var(--dim);margin:6px 0 24px;letter-spacing:1px}
.menu-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0}
.menu-row label{color:var(--dim);font-size:13px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:none;color:var(--dim);padding:8px 16px;cursor:pointer;font-size:13px}
.seg button.active{background:var(--blue);color:#04101e;font-weight:700}
.bigbtn{margin-top:24px;width:100%;padding:14px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,#3da9fc,#2b6fb6);color:#fff;font-size:16px;font-weight:700;letter-spacing:1px}
.bigbtn:hover{filter:brightness(1.08)}
.linkbtn{margin-top:14px;background:none;border:none;color:var(--dim);cursor:pointer;
  text-decoration:underline;font-size:13px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;text-align:left;margin-bottom:10px}
.help-grid > div{display:flex;flex-direction:column;gap:2px}
.help-grid b{color:var(--blue);font-size:13px}
.help-grid span{color:var(--dim);font-size:13px}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:1px 6px;font-size:11px;font-family:inherit;color:var(--ink)}
#end-title{font-size:48px}
#end-title.defeat{background:linear-gradient(90deg,#ef5366,#ff9aa6);-webkit-background-clip:text;background-clip:text}
#end-sub{color:var(--dim);margin-top:10px}

/* Menu: secondary (tutorial) button */
.bigbtn.alt{background:linear-gradient(90deg,#2f9e6e,#26885e);margin-top:10px;font-size:15px}

/* Interactive tutorial panel (bottom-center, above the HUD) */
#tutorial{position:absolute;left:50%;bottom:210px;transform:translateX(-50%);
  width:min(560px,92vw);z-index:40;pointer-events:none}
.tut-card{pointer-events:auto;background:linear-gradient(180deg,#101c2eF2,#0b1422F2);
  border:1px solid var(--blue);border-radius:12px;padding:16px 18px;
  box-shadow:0 10px 40px #000a,0 0 0 1px #3da9fc22;transition:box-shadow .2s}
.tut-card.done{box-shadow:0 0 0 2px #3ddc84,0 10px 40px #000a}
.tut-step{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);font-weight:700}
.tut-title{font-size:19px;margin:4px 0 8px;color:var(--ink)}
.tut-body{font-size:14px;line-height:1.55;color:#c4d3e6}
.tut-body b{color:#fff} .tut-body .m{color:var(--mineral);font-weight:700}
.tut-body kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;font-size:11px;color:var(--ink)}
.tut-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.tut-spacer{flex:1}
.tut-hint{font-size:12px;color:var(--gold);animation:tutpulse 1.4s ease-in-out infinite}
@keyframes tutpulse{0%,100%{opacity:.55}50%{opacity:1}}
.tut-skip{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;text-decoration:underline}
.tut-skip:hover{color:var(--ink)}
.tut-next{background:linear-gradient(90deg,#3da9fc,#2b6fb6);border:none;color:#fff;
  font-weight:700;font-size:14px;padding:9px 20px;border-radius:8px;cursor:pointer}
.tut-next:hover{filter:brightness(1.1)}