/* ============================================================
   Space Quest — vibrant sci-fi command-console HUD
   ============================================================ */
:root{
  --bg:#05060f;
  --panel:rgba(12,18,38,.72);
  --panel-solid:#0a1024;
  --panel-edge:rgba(120,180,255,.22);
  --panel-glow:rgba(80,150,255,.18);
  --ink:#e7f0ff;
  --ink-dim:#9fb3d6;
  --ink-faint:#6c80a8;
  --cyan:#4fe3ff;
  --accent:#5b8cff;
  --good:#46e8a0;
  --warn:#ffcf5b;
  --bad:#ff5d6c;
  /* resource hues */
  --r-pop:#5fd0ff;
  --r-food:#5fe08a;
  --r-metal:#b9c6da;
  --r-gold:#ffd35b;
  --r-energy:#7ee0ff;
  --r-exotic:#c98bff;
  --r-science:#7fa8ff;
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --radius:14px;
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
  position:relative;
  user-select:none;
  -webkit-user-select:none;
}
canvas#webgl{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;z-index:0;cursor:grab}
/* edge vignette for depth */
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%, transparent 52%, rgba(2,3,10,.55) 100%);}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #0a1430 0%, #05060f 70%);transition:opacity .8s ease;gap:6px}
#loading.gone{opacity:0;pointer-events:none}
.ld-core{position:absolute;width:60px;height:60px;border-radius:50%;margin-bottom:140px;
  background:radial-gradient(circle at 40% 35%, #cdefff, #4fb6ff 45%, #1b50c8 75%, #0a1f5a);
  box-shadow:0 0 40px 10px rgba(79,182,255,.6), 0 0 120px 30px rgba(40,90,220,.35);
  animation:pulse 2.6s ease-in-out infinite}
.ld-ring{position:absolute;width:150px;height:150px;margin-bottom:140px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--cyan);border-right-color:rgba(91,140,255,.5);
  animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.25)}}
.ld-title{margin:40px 0 0;font-size:clamp(2rem,7vw,3.4rem);letter-spacing:.4em;font-weight:800;
  background:linear-gradient(180deg,#fff,#8fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(80,160,255,.35);padding-left:.4em}
.ld-sub{margin:6px 0 0;color:var(--cyan);letter-spacing:.25em;font-size:.8rem;text-transform:uppercase;opacity:.85}
.ld-err{margin:14px 0 0;color:var(--bad);font-size:.85rem;max-width:80vw;text-align:center;min-height:1em}

/* ---------- HUD layer ---------- */
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
#ui button,#ui .panel,#ui .chip,#ui [role=tab],#ui input,#ui .clickable{pointer-events:auto}
.hidden{display:none !important}

.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);
  backdrop-filter:blur(9px) saturate(1.2);-webkit-backdrop-filter:blur(9px) saturate(1.2);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);}

/* ---------- top bar ---------- */
#topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;
  padding:max(10px,env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(180deg,rgba(5,8,20,.86),rgba(5,8,20,.30) 70%,transparent);}
#empire{min-width:120px;line-height:1.15}
.emp-name{font-weight:700;font-size:1.02rem;letter-spacing:.02em}
.emp-scope{font-size:.72rem;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
#resources{display:flex;flex:1;gap:8px;flex-wrap:wrap;justify-content:center}
#topbtns{display:flex;gap:8px;margin-left:auto}

.res-chip{display:flex;align-items:center;gap:8px;padding:6px 11px 6px 9px;border-radius:12px;min-width:96px;
  background:rgba(10,16,34,.7);border:1px solid var(--panel-edge);position:relative;overflow:hidden;cursor:default}
.res-chip .ic{font-size:1.05rem;filter:drop-shadow(0 0 6px currentColor);line-height:1}
.res-chip .col{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.res-chip .val{font-family:var(--mono);font-size:.92rem;font-weight:600;letter-spacing:.02em}
.res-chip .rate{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint)}
.res-chip .rate.pos{color:var(--good)} .res-chip .rate.neg{color:var(--bad)}
.res-chip .capbar{position:absolute;left:0;bottom:0;height:2px;background:currentColor;opacity:.7;transition:width .4s}
.res-chip.full{animation:capflash 1.4s ease-in-out infinite}
@keyframes capflash{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 1.5px var(--warn) inset}}
.res-chip.danger{animation:dangerflash 1s ease-in-out infinite}
@keyframes dangerflash{0%,100%{border-color:var(--panel-edge)}50%{border-color:var(--bad)}}
/* hue per resource via data-res */
.res-chip[data-res=population]{color:var(--r-pop)} .res-chip[data-res=food]{color:var(--r-food)}
.res-chip[data-res=metal]{color:var(--r-metal)} .res-chip[data-res=gold]{color:var(--r-gold)}
.res-chip[data-res=energy]{color:var(--r-energy)} .res-chip[data-res=exotic]{color:var(--r-exotic)}
.res-chip .val,.res-chip .ic{color:var(--ink)} .res-chip .ic{color:currentColor}

.hud-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:12px;cursor:pointer;
  background:rgba(12,20,44,.8);border:1px solid var(--panel-edge);color:var(--ink);font:inherit;font-size:.85rem;
  transition:transform .08s,border-color .15s,background .15s}
.hud-btn .ic{font-size:1.05rem}
.hud-btn:hover{border-color:var(--cyan);background:rgba(20,34,70,.9)}
.hud-btn:active{transform:translateY(1px)}
.hud-btn .lbl{display:inline}
@media(max-width:680px){.hud-btn .lbl{display:none}}

/* ---------- generic buttons ---------- */
.btn{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;border:1px solid var(--panel-edge);
  background:rgba(18,28,58,.9);color:var(--ink);padding:.6em 1em;border-radius:11px;
  transition:transform .07s,filter .15s,border-color .15s;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn:hover{border-color:var(--cyan);filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
.btn-primary{background:linear-gradient(180deg,#3f6dff,#2347d8);border-color:#6f97ff;box-shadow:0 4px 18px rgba(50,90,255,.4)}
.btn-good{background:linear-gradient(180deg,#1f9d6b,#137a52);border-color:#46e8a0}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-dim)}
.btn-ghost:hover{color:var(--ink);border-color:var(--panel-edge)}
.mini{width:24px;height:24px;border-radius:7px;border:1px solid var(--panel-edge);background:rgba(12,20,44,.7);
  color:var(--ink-dim);cursor:pointer;font-size:.9rem;line-height:1}
.mini:hover{color:var(--ink);border-color:var(--cyan)}

/* ---------- event log ---------- */
#logpanel{position:absolute;left:14px;bottom:74px;width:min(320px,42vw);max-height:34vh;display:flex;flex-direction:column;
  padding:8px 4px 6px;overflow:hidden}
#logpanel.collapsed #log{display:none}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 6px;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
#log{list-style:none;margin:0;padding:0 6px;overflow-y:auto;font-size:.78rem;line-height:1.35;scrollbar-width:thin}
#log li{padding:4px 8px;border-radius:8px;margin-bottom:3px;color:var(--ink-dim);background:rgba(255,255,255,.02);
  border-left:2px solid var(--accent);animation:logIn .35s ease both}
#log li .t{color:var(--ink-faint);font-family:var(--mono);font-size:.66rem;margin-right:6px}
#log li.good{border-left-color:var(--good)} #log li.warn{border-left-color:var(--warn)} #log li.bad{border-left-color:var(--bad)}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
#log::-webkit-scrollbar{width:6px}#log::-webkit-scrollbar-thumb{background:rgba(120,160,255,.3);border-radius:3px}

/* ---------- context / selection panel ---------- */
#context{position:absolute;right:14px;top:64px;width:min(360px,92vw);max-height:calc(100vh - 150px);
  display:flex;flex-direction:column;overflow:hidden;animation:slideIn .25s ease both}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.ctx-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;
  border-bottom:1px solid var(--panel-edge);background:linear-gradient(180deg,rgba(40,70,150,.25),transparent)}
.ctx-orb{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 18px rgba(120,180,255,.4), inset -6px -6px 14px rgba(0,0,0,.45)}
.ctx-title{font-size:1.08rem;font-weight:700;line-height:1.1}
.ctx-sub{font-size:.74rem;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.ctx-tag{display:inline-block;font-size:.66rem;padding:2px 7px;border-radius:6px;margin-top:5px;font-weight:600;letter-spacing:.04em}
.tag-home{background:rgba(70,232,160,.16);color:var(--good)}
.tag-hostile{background:rgba(255,93,108,.16);color:var(--bad)}
.tag-colony{background:rgba(91,140,255,.18);color:#9bb8ff}
.tag-unknown{background:rgba(120,140,180,.16);color:var(--ink-dim)}
.ctx-body{padding:12px 14px;overflow-y:auto;scrollbar-width:thin}
.ctx-body::-webkit-scrollbar{width:6px}.ctx-body::-webkit-scrollbar-thumb{background:rgba(120,160,255,.3);border-radius:3px}
.ctx-tabs{display:flex;gap:6px;padding:10px 12px 0}
.ctx-tab{flex:1;padding:7px;border-radius:9px 9px 0 0;background:rgba(10,16,34,.5);border:1px solid transparent;
  border-bottom:none;color:var(--ink-dim);cursor:pointer;font:inherit;font-size:.78rem;font-weight:600}
.ctx-tab.active{background:var(--panel);border-color:var(--panel-edge);color:var(--ink)}

/* collapse the selection panel to just its header — keeps the scene playable,
   especially on phones (where it starts collapsed) */
.ctx-head-main{flex:1;min-width:0}
.ctx-min{flex:none;align-self:flex-start;width:30px;height:30px;border-radius:9px;border:1px solid var(--panel-edge);
  background:rgba(12,20,44,.7);color:var(--ink-dim);cursor:pointer;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
.ctx-min:hover{color:var(--ink);border-color:var(--cyan)}
/* collapsed → just a square arrow button (no orb, no text), keeping the scene clear */
#context.ctx-collapsed{width:auto;max-width:none;max-height:none;overflow:visible;
  background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#context.ctx-collapsed .ctx-head{padding:0;border:none;background:none}
#context.ctx-collapsed .ctx-orb,
#context.ctx-collapsed .ctx-head-main,
#context.ctx-collapsed .ctx-tabs,
#context.ctx-collapsed .ctx-body,
#context.ctx-collapsed .modal-foot{display:none !important}
#context.ctx-collapsed .ctx-min{width:46px;height:46px;border-radius:13px;font-size:1.4rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--panel-edge);box-shadow:var(--shadow);
  backdrop-filter:blur(9px) saturate(1.2);-webkit-backdrop-filter:blur(9px) saturate(1.2)}
#context.ctx-collapsed .ctx-min:hover{border-color:var(--cyan)}

@media (max-width:680px){
  /* top bar: empire name top-left, resource chips stacked in a column under it,
     the round action buttons pinned to the top-right corner */
  #topbar{flex-direction:column;align-items:flex-start;gap:8px;padding-right:56px;
    background:linear-gradient(180deg,rgba(5,8,20,.85),transparent 60%)}
  #empire{min-width:0}
  #resources{flex-direction:column;align-items:stretch;justify-content:flex-start;flex:none;width:auto;gap:5px}
  .res-chip{min-width:0;width:150px;padding:5px 9px}
  #topbtns{position:absolute;top:max(8px,env(safe-area-inset-top));right:12px;margin-left:0}

  #context{width:min(340px,94vw);max-height:58vh}
  #context.ctx-collapsed .ctx-min{width:48px;height:48px;font-size:1.55rem}
}

.stat-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.82rem;border-bottom:1px dashed rgba(120,160,255,.12)}
.stat-row:last-child{border-bottom:none}
.stat-row .k{color:var(--ink-dim)} .stat-row .v{font-family:var(--mono);font-weight:600}
.yield-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin:8px 0}
.yield-pill{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:8px;background:rgba(10,16,34,.6);
  border:1px solid var(--panel-edge);font-size:.74rem;font-family:var(--mono)}

/* structure / build rows */
.build-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.build-card{border:1px solid var(--panel-edge);border-radius:11px;padding:10px;background:rgba(8,13,30,.6);
  transition:border-color .15s}
.build-card:hover{border-color:rgba(120,180,255,.4)}
.build-top{display:flex;align-items:center;gap:9px}
.build-ic{font-size:1.4rem;width:34px;text-align:center;filter:drop-shadow(0 0 6px rgba(120,180,255,.4))}
.build-name{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:7px}
.build-lvl{font-size:.66rem;color:var(--cyan);background:rgba(79,227,255,.12);padding:1px 6px;border-radius:5px;font-family:var(--mono)}
.build-desc{font-size:.74rem;color:var(--ink-dim);margin:5px 0 8px;line-height:1.35}
.cost-line{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:.74rem;margin-bottom:8px}
.cost{display:inline-flex;align-items:center;gap:3px}
.cost.short{color:var(--bad)}
.effect-line{font-size:.72rem;color:var(--good);margin-bottom:8px;font-family:var(--mono)}
.build-actions{display:flex;gap:7px}
.build-actions .btn{flex:1;font-size:.8rem;padding:.5em .6em}
.locked-note{font-size:.72rem;color:var(--warn);display:flex;align-items:center;gap:6px}

/* compact build grid — square, one-tap tiles, no scrolling */
.build-head{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;color:var(--ink-dim);margin:2px 0 6px}
.build-head b{color:var(--ink);font-family:var(--mono)}
.bh-busy{color:var(--cyan)}
.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;margin-top:4px}
.btile{position:relative;aspect-ratio:1;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 4px 7px;border-radius:13px;border:1px solid var(--panel-edge);background:rgba(10,16,34,.66);color:var(--ink);
  font:inherit;cursor:pointer;overflow:hidden;transition:transform .07s,border-color .15s,background .15s,box-shadow .15s}
.btile:hover{border-color:var(--cyan);background:rgba(20,34,70,.82)}
.btile:active{transform:translateY(1px) scale(.97)}
.bt-ic{font-size:1.5rem;line-height:1;filter:drop-shadow(0 0 5px rgba(120,180,255,.45))}
.bt-name{font-size:.56rem;line-height:1.06;text-align:center;color:var(--ink-dim);max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bt-foot{font-family:var(--mono);font-size:.58rem;display:flex;gap:4px;align-items:center;white-space:nowrap;max-width:100%;overflow:hidden}
.bt-foot .bc{display:inline-flex;align-items:center;gap:1px}
.bt-foot .bc.short{color:var(--bad)}
.bt-foot.tcyan{color:var(--cyan)} .bt-foot.good{color:var(--good)} .bt-foot.warn{color:var(--warn)} .bt-foot.dim{color:var(--ink-faint)}
.bt-lvl{position:absolute;top:3px;right:5px;font-size:.56rem;font-family:var(--mono);color:var(--cyan);
  background:rgba(79,227,255,.16);border-radius:6px;padding:0 4px;line-height:1.4}
.bt-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(120,160,255,.16)}
.bt-prog>i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--accent))}
.bt-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:rgba(6,9,20,.6);font-size:1.1rem;color:var(--warn)}
.bt-lock small{font-size:.56rem;font-family:var(--mono)}
.btile.ok{border-color:rgba(70,232,160,.55);background:rgba(18,48,40,.55);
  box-shadow:0 0 0 1px rgba(70,232,160,.22) inset,0 0 14px rgba(40,200,130,.16)}
.btile.ok .bt-name{color:var(--ink)} .btile.ok:hover{border-color:var(--good)}
.btile.cant{opacity:.86} .btile.cant .bt-ic{filter:grayscale(.35) drop-shadow(0 0 5px rgba(120,180,255,.3))}
.btile.busy,.btile.noslot,.btile.maxed,.btile.locked{opacity:.62}
.btile.building{border-color:var(--cyan);animation:btpulse 1.5s ease-in-out infinite}
@keyframes btpulse{0%,100%{box-shadow:0 0 0 1px rgba(79,227,255,.3) inset}
  50%{box-shadow:0 0 0 1px rgba(79,227,255,.7) inset,0 0 14px rgba(79,227,255,.28)}}

/* slot meter */
.slotmeter{display:flex;gap:4px;margin:4px 0 10px}
.slot-dot{flex:1;height:5px;border-radius:3px;background:rgba(120,160,255,.18)}
.slot-dot.used{background:var(--accent);box-shadow:0 0 6px var(--accent)}

/* progress bar (build/research timers) */
.pbar{height:6px;border-radius:4px;background:rgba(120,160,255,.16);overflow:hidden;margin:6px 0}
.pbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--accent));width:0}

/* ---------- bottom bar ---------- */
#bottombar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:16px;
  padding:10px 14px max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(5,8,20,.82),transparent)}
#scopes{display:flex;gap:6px;background:rgba(10,16,34,.7);border:1px solid var(--panel-edge);border-radius:13px;padding:4px}
.scope-btn{font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-dim);background:transparent;border:none;cursor:pointer;
  padding:7px 13px;border-radius:10px;transition:background .15s,color .15s}
.scope-btn:hover{color:var(--ink)}
.scope-btn.active{background:linear-gradient(180deg,#2c4ec4,#1b338f);color:#fff;box-shadow:0 0 16px rgba(60,110,255,.5)}
.scope-btn.locked{opacity:.5;cursor:not-allowed}
#hint{position:absolute;right:16px;bottom:14px;font-size:.72rem;color:var(--ink-faint);letter-spacing:.04em}
@media(max-width:680px){#hint{display:none}}

/* ---------- toasts ---------- */
#toasts{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;
  align-items:center;width:max-content;max-width:92vw}
.toast{padding:10px 16px;border-radius:12px;background:rgba(12,20,44,.92);border:1px solid var(--panel-edge);
  box-shadow:var(--shadow);font-size:.86rem;display:flex;align-items:center;gap:9px;animation:toastIn .3s ease both}
.toast.good{border-color:var(--good)}.toast.warn{border-color:var(--warn)}.toast.bad{border-color:var(--bad)}
.toast .ic{font-size:1.2rem}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .4s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ---------- modal ---------- */
#modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,14,.66);backdrop-filter:blur(3px);animation:fade .2s ease both;pointer-events:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
#modal-card{width:min(640px,94vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel-solid);border:1px solid var(--panel-edge);border-radius:18px;box-shadow:var(--shadow);
  animation:cardIn .25s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes cardIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(180deg,rgba(40,70,150,.22),transparent)}
.modal-h h2{margin:0;font-size:1.15rem}
.modal-h .sp{flex:1}
.modal-body{padding:16px 18px;overflow-y:auto;scrollbar-width:thin}
.modal-body::-webkit-scrollbar{width:7px}.modal-body::-webkit-scrollbar-thumb{background:rgba(120,160,255,.3);border-radius:3px}
.modal-foot{padding:12px 18px;border-top:1px solid var(--panel-edge);display:flex;gap:10px;justify-content:flex-end}

/* tech tree */
.tech-tiers{display:flex;flex-direction:column;gap:18px}
.tech-tier h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.tech-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tech-node{border:1px solid var(--panel-edge);border-radius:12px;padding:11px;background:rgba(8,13,30,.7);cursor:pointer;
  transition:border-color .15s,transform .08s;position:relative}
.tech-node:hover{border-color:var(--cyan)}
.tech-node.owned{border-color:var(--good);background:rgba(20,60,44,.4)}
.tech-node.locked{opacity:.55}
.tech-node.affordable{box-shadow:0 0 0 1px var(--accent) inset}
.tech-node .tn-name{font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:6px}
.tech-node .tn-desc{font-size:.72rem;color:var(--ink-dim);margin:5px 0 7px;line-height:1.3}
.tech-node .tn-cost{font-family:var(--mono);font-size:.72rem;color:var(--r-science)}
.tech-node .tn-badge{position:absolute;top:8px;right:8px;font-size:.9rem}

/* settings rows */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px dashed rgba(120,160,255,.14)}
.set-row .lab{font-size:.9rem}.set-row .sub{font-size:.72rem;color:var(--ink-dim)}
.switch{width:46px;height:26px;border-radius:14px;background:rgba(120,160,255,.2);border:1px solid var(--panel-edge);position:relative;cursor:pointer;transition:background .2s}
.switch.on{background:var(--good)}
.switch i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on i{left:22px}

/* offline summary */
.offline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:8px}
.offline-item{padding:10px;border-radius:11px;background:rgba(10,16,34,.6);border:1px solid var(--panel-edge);text-align:center}
.offline-item .v{font-family:var(--mono);font-size:1.05rem;font-weight:700;margin-top:4px}

/* ---------- coachmark / tutorial ---------- */
#coach{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:18;width:min(440px,92vw);pointer-events:auto}
#coach-card{background:linear-gradient(180deg,rgba(20,34,78,.96),rgba(12,20,46,.96));border:1px solid var(--cyan);
  border-radius:14px;padding:14px 16px;box-shadow:0 0 30px rgba(60,130,255,.35), var(--shadow)}
.coach-step{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.coach-text{font-size:.92rem;margin:5px 0 11px;line-height:1.4}
.coach-actions{display:flex;gap:8px;justify-content:flex-end}

/* helper text */
.dim{color:var(--ink-dim)} .faint{color:var(--ink-faint)} .small{font-size:.76rem}
.sep{height:1px;background:var(--panel-edge);margin:12px 0}
h4.section{margin:14px 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}

/* reduced motion */
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.05ms !important}}