:root{
    --vac:#05070d; --hull:#0d1420; --line:#1e2d42;
    --ice:#7fe3ff; --ore:#ffb347; --hot:#ff5f4d; --claim:#c86bff; --grn:#5fe39a;
    --dim:#5a6f8c; --txt:#d7e6f7;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--vac);color:var(--txt);
    font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;}
  canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}

  .hud{position:absolute;inset:0;pointer-events:none;z-index:3;display:flex;flex-direction:column;justify-content:space-between}
  .bar{display:flex;gap:6px;padding:8px;flex-wrap:wrap}
  .cell{pointer-events:auto;background:rgba(13,20,32,.82);border:1px solid var(--line);padding:5px 9px;min-width:0;backdrop-filter:blur(6px)}
  .k{font-size:8.5px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
  .v{font-size:14px;font-weight:700;line-height:1.15;white-space:nowrap}
  .v.ore{color:var(--ore)} .v.ice{color:var(--ice)} .v.grn{color:var(--grn)}
  .grow{flex:1}
  .cargobar{height:4px;background:#0a1220;border:1px solid var(--line);margin-top:4px;position:relative;overflow:hidden}
  .cargobar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ore),#ff7d3b);width:0%}

  .assay{position:absolute;z-index:2;left:8px;top:66px;width:196px;pointer-events:none;
    background:rgba(13,20,32,.86);border:1px solid var(--line);border-left:2px solid var(--ice);padding:7px 9px;display:none}
  .assay.on{display:block}
  .assay h4{margin:0 0 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice)}
  .assay .sub{font-size:9px;color:var(--dim);letter-spacing:.1em;margin-bottom:5px}
  .orerow{display:flex;align-items:center;gap:5px;font-size:10px;margin:2px 0}
  .swatch{width:7px;height:7px;flex:none;box-shadow:0 0 6px currentColor;background:currentColor}
  .orerow .amt{margin-left:auto;color:var(--dim)}

  .log{position:absolute;left:50%;transform:translateX(-50%);top:58px;width:min(430px,84vw);z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
  .toast{font-size:10.5px;padding:4px 10px;background:rgba(5,7,13,.92);border:1px solid var(--line);border-left:2px solid var(--ice);animation:tin .25s ease}
  .toast.warn{border-left-color:var(--hot);color:#ffc9c2}
  .toast.good{border-left-color:var(--grn);color:#c6ffe2}
  @keyframes tin{from{opacity:0;transform:translateY(-6px)}}

  .dock{display:flex;gap:6px;padding:8px;align-items:flex-end}
  .tabs{display:flex;gap:4px;flex-wrap:wrap;pointer-events:auto;max-width:62%}
  button{font-family:inherit;color:var(--txt);background:var(--hull);border:1px solid var(--line);
    padding:8px 11px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
  button:hover{border-color:var(--ice);color:#fff}
  button:active{transform:translateY(1px)}
  button:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
  button[disabled]{opacity:.35;cursor:not-allowed}
  button.hot{border-color:var(--ore);color:var(--ore)}
  button.on{background:var(--ice);color:#04121b;border-color:var(--ice)}
  .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:auto}
  .mini{display:flex;gap:4px}
  .mini button{padding:6px 9px;font-size:9px}
  .mine{width:80px;height:80px;border-radius:50%;border:2px solid var(--ore);color:var(--ore);
    background:radial-gradient(circle at 50% 40%,rgba(255,179,71,.22),rgba(13,20,32,.9));font-size:10px}
  .mine.live{background:radial-gradient(circle at 50% 40%,rgba(255,179,71,.55),rgba(60,25,0,.9));color:#fff}
  .mine.auto{border-style:dashed}

  .stick{position:absolute;left:0;bottom:0;width:44%;height:50%;pointer-events:auto;touch-action:none;z-index:1}
  .knob{position:absolute;width:104px;height:104px;border:1px solid var(--line);border-radius:50%;display:none;pointer-events:none;background:rgba(127,227,255,.05)}
  .knob i{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(127,227,255,.3);border:1px solid var(--ice)}

  .sheet{position:absolute;z-index:5;inset:auto 0 0 0;height:82%;background:rgba(8,12,20,.975);border-top:1px solid var(--ice);
    display:none;flex-direction:column;pointer-events:auto;animation:up .18s ease}
  .sheet.on{display:flex}
  @keyframes up{from{transform:translateY(20px);opacity:.4}}
  .shead{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
  .shead h3{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice)}
  .shead p{margin:0;font-size:9.5px;color:var(--dim)}
  .shead .x{margin-left:auto;padding:4px 9px}
  .sbody{overflow:auto;padding:10px 12px 22px;-webkit-overflow-scrolling:touch;flex:1}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:6px}
  .card{border:1px solid var(--line);background:var(--hull);padding:8px 9px}
  .card h5{margin:0 0 2px;font-size:11px}
  .card .d{font-size:9.5px;color:var(--dim);line-height:1.45;margin-bottom:6px}
  .cost{font-size:9.5px;line-height:1.6;margin-bottom:6px}
  .cost .no{color:var(--hot)}
  .card button{width:100%;padding:6px}
  .lvl{float:right;font-size:9px;color:var(--ice)}
  table{width:100%;border-collapse:collapse;font-size:10.5px}
  td,th{padding:4px 6px;border-bottom:1px solid #121c2b;text-align:left}
  th{font-size:8.5px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;font-weight:400}
  td.n{text-align:right;font-variant-numeric:tabular-nums}
  tr.me{background:rgba(127,227,255,.08)} tr.me td{color:var(--ice)}
  .tier{font-size:8px;color:var(--dim)}
  .hint{font-size:9.5px;color:var(--dim);line-height:1.6;margin:2px 0 10px}
  .seg{display:flex;gap:4px;margin-bottom:9px;flex-wrap:wrap}
  .seg button{padding:5px 9px;font-size:9.5px}

  /* tech tree */
  .treewrap{flex:1;min-height:220px;overflow:hidden;position:relative;background:#070b12}
  /* the canvas is positioned, not sized in percentages: height:100% inside a
     flex item resolves against auto and collapses the element to nothing */
  .treewrap canvas{position:absolute;inset:0;display:block}
  .node{cursor:pointer}
  .node rect{transition:none}
  .detail{flex:none;border-top:1px solid var(--line);background:#0a0f18;padding:9px 12px;display:none}
  .detail.on{display:block}
  .detail h4{margin:0 0 3px;font-size:12px;color:#fff}
  .detail .meta{font-size:9px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
  .detail .fx{font-size:10px;color:var(--grn);margin-bottom:5px}
  .detail .row{display:flex;gap:8px;align-items:center}
  .detail .row button{flex:none;padding:8px 16px}

  .intro{position:absolute;inset:0;z-index:20;background:radial-gradient(circle at 50% 42%,#0d1726,#03050a 70%);
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;padding:26px;text-align:center;overflow:auto}
  .intro h1{margin:0;font-size:clamp(24px,8vw,54px);letter-spacing:.2em;font-weight:800;color:#fff;
    text-indent:.2em;white-space:nowrap;line-height:1.1}
  .intro h1 span{color:var(--ore)}
  .intro .tag{font-size:10px;letter-spacing:.3em;color:var(--ice);text-transform:uppercase}
  .intro p{max-width:440px;font-size:11.5px;line-height:1.85;color:#9db2cc;margin:0}
  .intro b{color:var(--ore);font-weight:400}
  .intro .keys{font-size:10px;color:var(--dim);line-height:1.9}
  .intro button{padding:12px 26px;font-size:12px;letter-spacing:.22em;border-color:var(--ore);color:var(--ore)}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}
/* ================= account gate & launch page ================= */
.intro .fine{font-size:9.5px;color:#4d6480;max-width:400px;line-height:1.7;margin:0}
.gerr{color:var(--hot);font-size:10.5px;min-height:14px;margin:4px 0}
.gswap{font-size:10px;color:var(--dim);margin:0}
.gswap a{color:var(--ice);text-decoration:none;border-bottom:1px solid rgba(127,227,255,.4)}
.gate{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(3,5,10,.86);backdrop-filter:blur(8px)}
.gate.on{display:flex}
.gcard{width:min(360px,92vw);background:#0a0f18;border:1px solid var(--line);border-top:2px solid var(--ore);
  padding:20px 20px 22px;position:relative;max-height:92vh;overflow:auto}
.gcard h2{margin:0 0 4px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.gsub{margin:0 0 14px;font-size:10.5px;color:var(--dim);line-height:1.6}
.gx{position:absolute;top:8px;right:8px;padding:2px 9px;font-size:14px;line-height:1;border-color:transparent}
.gcard label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.gcard input{width:100%;margin-top:4px;padding:9px 10px;background:#05080e;border:1px solid var(--line);
  color:var(--txt);font-family:inherit;font-size:12px;letter-spacing:.02em}
.gcard input:focus{outline:none;border-color:var(--ice)}
.gcard button.primary{width:100%;padding:11px;border-color:var(--ore);color:var(--ore);letter-spacing:.18em;margin-bottom:10px}
.gnote{font-size:10px;color:#7d93b0;line-height:1.7;margin:0 0 12px}
.gnote.small{font-size:9px;color:#4d6480;margin:10px 0 0}

/* ================= lobby ================= */
.lobby{position:absolute;inset:0;z-index:25;display:none;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(circle at 50% 35%,#0d1726,#03050a 72%);overflow:auto}
.lobby.on{display:flex}
.lcard{width:min(720px,100%);background:rgba(8,12,20,.94);border:1px solid var(--line);border-top:2px solid var(--ore);
  padding:20px;max-height:94vh;overflow:auto}
.lhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.lhead h2{margin:0;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.lacts{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lacts button{padding:6px 10px;font-size:9.5px}
.uni{border:1px solid var(--line);background:var(--hull);padding:11px 13px;margin-bottom:7px}
.uni:hover{border-color:#2a3a52}
.uniHead{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.uniHead h4{margin:0;font-size:12.5px;letter-spacing:.04em;color:#fff}
.uniMeta{font-size:9.5px;color:var(--dim);line-height:1.7;margin-bottom:8px}
.uniMeta b.ok{color:var(--grn);font-weight:400}
.uni button{width:100%;padding:8px}
/* Visible by default. This used to start at opacity:0 and depend on a class that a
   later refactor stopped adding, which made the whole landing screen — errors and
   sign-in links included — invisible. Never gate visibility on JS that might not run. */
.intro{animation:introIn .25s ease}
@keyframes introIn{from{opacity:0}}

/* ================= site header ================= */
.siteHeader{position:fixed;top:0;left:0;right:0;height:42px;z-index:28;display:flex;align-items:center;
  padding:0 12px;background:rgba(5,7,13,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.siteHeader .hSide{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.siteHeader .hRight{justify-content:flex-end}
.siteHeader a{color:var(--dim);text-decoration:none;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap}
.siteHeader a:hover{color:var(--ice)}
.siteHeader .hWho{font-size:9.5px;letter-spacing:.1em;color:var(--ice);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:130px}
.hMark{flex:none;text-align:center}
.wm{font-size:14px;font-weight:800;letter-spacing:.26em;color:#fff;text-indent:.26em;display:inline-block}
.wm b{color:var(--ore);font-weight:800}
.siteHeader .hMark:hover .wm{color:#fff}
@media (max-width:560px){
  .siteHeader .hLeft{display:none}
  .siteHeader .hSide{flex:0 0 auto}
  .hMark{flex:1}
  .wm{font-size:12px;letter-spacing:.18em;text-indent:.18em}
}
/* the field sits under the header */
body.field .hud .bar{padding-top:50px}
body.field .assay{top:108px}
body.field .log{top:100px}

/* ================= site footer ================= */
.siteFooter{border-top:1px solid var(--line);background:#05070d;padding:26px 20px 16px;margin-top:40px}
.fInner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media (max-width:620px){.fInner{grid-template-columns:1fr;gap:18px}}
.fCol h5{margin:0 0 8px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.fCol ul{list-style:none;margin:0;padding:0}
.fCol li{margin-bottom:6px}
.fCol a{color:#7d93b0;text-decoration:none;font-size:11px;line-height:1.8}
.fCol a:hover{color:var(--ice)}
.fMark{margin-bottom:6px}
.fTag{margin:0 0 8px;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ore)}
.fBlurb{margin:0;font-size:10.5px;line-height:1.8;color:#5f7791;max-width:340px}
.fBase{max-width:900px;margin:22px auto 0;padding-top:12px;border-top:1px solid #101a28;
  display:flex;justify-content:space-between;gap:12px;font-size:9.5px;color:var(--dim);flex-wrap:wrap}

/* footer inside the lobby scroll area */
.lobby .siteFooter{margin-top:22px;border:0;border-top:1px solid var(--line);background:transparent;padding:20px 0 0}

/* landing state */
.introActs{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .3s}
.introActs.on{opacity:1;pointer-events:auto}
.loader{display:flex;gap:6px;height:8px;margin:2px 0}
.loader i{width:6px;height:6px;background:var(--ore);border-radius:50%;opacity:.3;animation:blip 1.1s infinite}
.loader i:nth-child(2){animation-delay:.16s} .loader i:nth-child(3){animation-delay:.32s}
.loader.done{display:none}
@keyframes blip{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------------- lobby: occupancy, private universes, subscription ------- */
.occbar{position:relative;height:4px;background:#0a1220;border:1px solid var(--line);margin:0 0 8px;overflow:hidden}
.occbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--grn),var(--ore));display:block}
.occbar em{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--hot);opacity:.8}
.uniMeta b.warnpct{color:var(--hot)}
.subPanel{border:1px solid var(--line);border-left:2px solid var(--ore);background:#0a1018;padding:12px 14px;margin-top:12px}
.subPanel h5{margin:0 0 5px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ore)}
.frow2{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.frow2 input,.frow2 select{flex:1;min-width:120px;padding:8px 9px;background:#05080e;border:1px solid var(--line);
  color:var(--txt);font-family:inherit;font-size:12px}
.frow2 input:focus,.frow2 select:focus{outline:none;border-color:var(--ice)}
.frow2 button{flex:none}
.mineRow{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid #101a28;padding:8px 0;flex-wrap:wrap}
.mineRow button{padding:4px 8px;font-size:9px}
code.inv{background:#05080e;border:1px solid var(--line);padding:2px 7px;font-size:11px;color:var(--ice);letter-spacing:.14em}

/* ================= themed dialogs (replaces alert/confirm/prompt) ========= */
.uiHost{position:fixed;inset:0;z-index:60;pointer-events:none}
.uiBackdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  pointer-events:auto;background:rgba(3,5,10,.78);backdrop-filter:blur(6px);animation:uiFade .14s ease}
.uiBackdrop.out{animation:uiFadeOut .12s ease forwards}
@keyframes uiFade{from{opacity:0}}
@keyframes uiFadeOut{to{opacity:0}}
.uiCard{width:min(430px,94vw);background:linear-gradient(180deg,#0b1119,#080d14);
  border:1px solid var(--line);border-top:2px solid var(--ice);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(127,227,255,.06);
  padding:0 20px 18px;animation:uiRise .18s cubic-bezier(.2,.9,.3,1)}
.uiCard.danger{border-top-color:var(--hot)}
@keyframes uiRise{from{transform:translateY(12px) scale(.985);opacity:0}}
.uiBar{display:flex;align-items:center;gap:5px;margin:0 -20px 14px;padding:8px 14px;
  border-bottom:1px solid var(--line);background:rgba(127,227,255,.04)}
.uiDot{width:5px;height:5px;border-radius:50%;background:#22384f}
.uiCard.danger .uiDot:first-child{background:var(--hot)}
.uiCard:not(.danger) .uiDot:first-child{background:var(--ice)}
.uiChan{margin-left:auto;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.uiCard h3{margin:0 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;line-height:1.45}
.uiCard.danger h3{color:#ffd9d4}
.uiBody{font-size:11.5px;line-height:1.85;color:#9db2cc;margin-bottom:14px}
.uiBody b{color:var(--txt);font-weight:600}
.uiBody code{background:#05080e;border:1px solid var(--line);padding:1px 5px;color:var(--ore);font-size:11px}
.uiInput{width:100%;padding:9px 10px;margin-bottom:14px;background:#05080e;border:1px solid var(--line);
  color:var(--txt);font-family:inherit;font-size:12px;letter-spacing:.02em}
.uiInput:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 2px rgba(127,227,255,.12)}
.uiActs{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.uiActs button{padding:9px 16px;font-size:10px;letter-spacing:.16em}
.uiActs .uiOk{border-color:var(--ice);color:var(--ice)}
.uiActs .uiOk:hover{background:var(--ice);color:#04121b}
.uiActs .uiOk.danger{border-color:var(--hot);color:var(--hot)}
.uiActs .uiOk.danger:hover{background:var(--hot);color:#180d0e}
.uiActs .uiCancel{border-color:var(--line);color:var(--dim)}
.uiActs .uiCancel:hover{border-color:var(--dim);color:var(--txt)}
body.uiOpen{overflow:hidden}
@media (max-width:420px){
  .uiActs{flex-direction:column-reverse}
  .uiActs button{width:100%}
}

/* form dialogs */
.uiLabel{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.uiLabel .uiInput{margin-bottom:4px}
.uiHint{display:block;font-size:9.5px;letter-spacing:0;text-transform:none;color:#5f7791;line-height:1.7}
.uiStatic{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid #101a28;margin-bottom:8px}
.uiStatic span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.uiStatic b{font-size:11.5px;color:var(--txt);font-weight:500;text-align:right;word-break:break-all}
.uiNote{font-size:10px;color:#5f7791;line-height:1.75;margin:4px 0 0}

/* ---------------- header player pill + menu ---------------- */
.pill-user{display:flex;align-items:center;gap:7px;padding:4px 6px 4px 8px;background:#0d1420;
  border:1px solid var(--line);cursor:pointer;position:relative;transition:border-color .15s}
.pill-user:hover{border-color:var(--ice)}
.pill-user.open{border-color:var(--ice);background:#121b28}
.pill-user .pAvatar{width:18px;height:18px;flex:none;border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--ice),#3f7f9c);color:#04121b;font-size:9px;font-weight:800;letter-spacing:0}
.pill-user .pName{font-size:10px;letter-spacing:.08em;color:var(--txt);max-width:120px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-transform:none}
.pill-user .pRole{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ore);
  border:1px solid rgba(255,179,71,.35);padding:1px 4px}
.pill-user .pRole.guest{color:var(--dim);border-color:var(--line)}
.pill-user .pCaret{font-size:8px;color:var(--dim);margin-left:1px}
.userMenu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:#0a0f18;
  border:1px solid var(--line);border-top:2px solid var(--ice);box-shadow:0 18px 40px rgba(0,0,0,.55);
  display:none;z-index:40;animation:uiRise .14s ease}
.userMenu.on{display:block}
.userMenu .umHead{padding:9px 12px;border-bottom:1px solid var(--line)}
.userMenu .umName{font-size:11.5px;color:#fff;letter-spacing:.04em}
.userMenu .umSub{font-size:9px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.userMenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
  font-size:10.5px;letter-spacing:.1em;text-transform:none;color:#9db2cc;border:0;border-bottom:1px solid #101a28}
.userMenu a:last-child{border-bottom:0}
.userMenu a:hover{background:rgba(127,227,255,.08);color:#fff}
.userMenu a .umTag{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ore)}
.userMenu a.danger{color:#c98d86}
.userMenu a.danger:hover{background:rgba(255,95,77,.12);color:#ffc9c2}

/* ---------------- technology constellation ---------------- */
.tvBar{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;pointer-events:none;z-index:2}
.tvBar input{flex:1;max-width:220px;padding:6px 9px;background:rgba(5,8,14,.9);border:1px solid var(--line);
  color:var(--txt);font-family:inherit;font-size:11px;pointer-events:auto}
.tvBar input:focus{outline:none;border-color:var(--ice)}
.tvBar button{padding:6px 10px;font-size:9px;pointer-events:auto;background:rgba(5,8,14,.9)}
#treewrap{position:relative;overflow:hidden;background:#070b12}
.uniCode{font-size:9px;letter-spacing:.16em;color:var(--ore);margin-top:2px;white-space:nowrap}
.uniCode b{color:var(--ice);font-weight:600;letter-spacing:.2em}

/* ---------------- header: in-game panel buttons ---------------- */
.hNavGroup{display:flex;gap:4px;align-items:center;min-width:0}
.hNavGroup[hidden]{display:none}
.hNavGroup button{padding:5px 9px;font-size:9px;letter-spacing:.1em;background:#0d1420}
.hNavGroup button.hot{border-color:var(--ore);color:var(--ore)}
.siteHeader .hLeft{gap:10px;overflow-x:auto;scrollbar-width:none}
.siteHeader .hLeft::-webkit-scrollbar{display:none}
/* the field needs the buttons more than it needs the page links */
body.field .siteHeader .hLeft > a{display:none}
@media (min-width:900px){ body.field .siteHeader .hLeft > a{display:inline} }
@media (max-width:620px){
  .siteHeader .hLeft{display:flex}
  .hNavGroup button{padding:5px 6px;font-size:8.5px;letter-spacing:.04em}
  /* the wordmark is the first thing to go: the buttons are what you use */
  body.field .siteHeader .hMark{display:none}
  /* and the pill keeps its avatar and caret, dropping the name */
  body.field .pill-user .pName{display:none}
  body.field .pill-user .pRole{display:none}
}
@media (max-width:430px){
  /* nothing fits at this width, so let the row scroll rather than clip */
  .siteHeader{padding:0 6px}
  .hNavGroup button{padding:5px 5px;font-size:8px}
}
/* the hold readout is compact now that the header carries the navigation */
.bar .cell.hold{min-width:74px}
.bar .cell.hold .cargobar{width:60px}

/* ================= touch: stop a steer becoming a text selection =========
   Holding to pilot is a long press, and a long press natively starts a text
   selection, raises the iOS callout menu and the magnifier. Selection is not
   confined to the element under the finger — it runs through the DOM to
   wherever the finger travels — so a steering gesture highlights the HUD and
   dock it passes over.

   Scoped to the field shell on purpose. Page bodies, the console and anything
   a player might legitimately want to copy — an invite code, a rules page —
   must stay selectable.
   ========================================================================= */
.field, .field canvas, .hud, .dock, .bar, .stick, .assay,
.field button, .field .cell, .field .seg, .hNavGroup{
  -webkit-user-select:none;  /* Safari still needs the prefix */
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;            /* the iOS long-press menu is separate */
  -webkit-tap-highlight-color:transparent;
}
.field canvas, .stick, .hud{ touch-action:none }

/* A double tap is its own gesture: it zooms, and a double-tap-drag starts a
   selection even where user-select is none. `manipulation` removes the
   double-tap behaviour outright while leaving ordinary taps and scrolling. */
html.field, body.field{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  overscroll-behavior:none;              /* no rubber-banding the whole page */
}
/* sheets still need to scroll, so give them back vertical panning only */
.sheet, .detail, .pageBody, .uiCard{ touch-action:pan-y }
/* nothing inside the field should show a highlight even if one is somehow made */
body.field .hud ::selection, body.field .dock ::selection,
body.field .bar ::selection, body.field .assay ::selection{ background:transparent }

/* selection stays available where it is useful. Deliberately narrow: the assay
   readout and the footer sit mid-screen and at the edge, exactly where a thumb
   lands, and nobody needs to copy them. */
.sheet, .detail, .uiCard, .pageBody,
input, textarea, .uniCode, [contenteditable]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* ---------------- header nav: one colour per panel ----------------
   Tech already carried the ore colour. Giving each panel its own frame makes
   the row scannable at a glance — you reach for a colour, not a word — and it
   matches the colours those panels already use inside. */
.hNavGroup button.nav{background:#0d1420;border-width:1px;transition:background .14s,color .14s}
.hNavGroup .nTech  {border-color:var(--ore);color:var(--ore)}
.hNavGroup .nShip  {border-color:var(--ice);color:var(--ice)}
.hNavGroup .nWorlds{border-color:var(--grn);color:var(--grn)}
.hNavGroup .nHold  {border-color:#c86bff;color:#c86bff}
.hNavGroup .nReg   {border-color:#b9c8ff;color:#b9c8ff}
.hNavGroup .nTech:hover  {background:var(--ore);color:#180d0e}
.hNavGroup .nShip:hover  {background:var(--ice);color:#04121b}
.hNavGroup .nWorlds:hover{background:var(--grn);color:#04150d}
.hNavGroup .nHold:hover  {background:#c86bff;color:#160a1e}
.hNavGroup .nReg:hover   {background:#b9c8ff;color:#0a0f1e}
/* the open panel reads as filled, so you can see where you are */
.hNavGroup .nav.on{color:#04121b}
.hNavGroup .nTech.on{background:var(--ore)}
.hNavGroup .nShip.on{background:var(--ice)}
.hNavGroup .nWorlds.on{background:var(--grn)}
.hNavGroup .nHold.on{background:#c86bff}
.hNavGroup .nReg.on{background:#b9c8ff}

/* ---------------- hold state, readable at a glance ----------------
   Empty is green, filling is amber, full is red and pulses once: a full hold
   stops the laser, so it needs to be obvious without reading the numbers. */
.bar .cell.hold{border:1px solid transparent;border-radius:3px;padding:2px 6px;transition:border-color .25s,background .25s}
.bar .cell.hold.empty{border-color:rgba(95,227,154,.55);background:rgba(95,227,154,.06)}
.bar .cell.hold.empty .v{color:var(--grn)}
.bar .cell.hold.part{border-color:rgba(255,179,71,.5);background:rgba(255,179,71,.06)}
.bar .cell.hold.part .v{color:var(--ore)}
.bar .cell.hold.high{border-color:rgba(255,179,71,.9);background:rgba(255,179,71,.12)}
.bar .cell.hold.high .v{color:var(--ore)}
.bar .cell.hold.full{border-color:var(--hot);background:rgba(255,95,77,.14);animation:holdFull 1.6s ease-out 1}
.bar .cell.hold.full .v{color:var(--hot)}
@keyframes holdFull{0%{box-shadow:0 0 0 0 rgba(255,95,77,.55)}100%{box-shadow:0 0 0 10px rgba(255,95,77,0)}}

/* ---------------- audio mixer ---------------- */
.mixCard{width:min(460px,94vw)}
.mixTop{display:flex;gap:7px;margin-bottom:12px}
.mixTop button{flex:1;padding:9px 10px;font-size:10px}
.mixTop button.on{border-color:var(--grn);color:var(--grn)}
.mixTop button.hot{border-color:var(--hot);color:var(--hot)}
.mixOff{opacity:.35;pointer-events:none}
.mixRow{display:grid;grid-template-columns:1fr 150px 34px;gap:10px;align-items:center;margin-bottom:9px}
.mixName{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt)}
.mixName em{display:block;font-style:normal;font-size:9px;letter-spacing:0;text-transform:none;color:#5f7791;margin-top:1px}
.mixVal{font-size:10px;color:var(--ice);text-align:right}
.mixSep{height:1px;background:var(--line);margin:10px 0 12px}
.mixRow input[type=range]{-webkit-appearance:none;appearance:none;height:3px;background:#1a2434;outline:none;border-radius:2px}
.mixRow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ice);cursor:pointer;border:2px solid #04121b}
.mixRow input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--ice);
  cursor:pointer;border:2px solid #04121b}
/* the speaker in the pill: mute should never be two clicks away */
.pill-user .pSound{font-size:10px;line-height:1;color:var(--dim);padding:0 2px;cursor:pointer}
.pill-user .pSound.on{color:var(--ice)}
.pill-user .pSound.muted{color:var(--hot)}
@media (max-width:430px){ .mixRow{grid-template-columns:1fr 96px 28px} }

/* ---------------- administrative notices ---------------- */
.noticeStack{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;flex-direction:column;
  pointer-events:none}
.notice{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:10px 14px;background:#0b1119;border-bottom:1px solid var(--line);border-top:2px solid var(--ice);
  font-size:11px;line-height:1.7;color:#9db2cc;transition:opacity .22s;animation:uiRise .2s ease}
.notice.notice{border-top-color:var(--ice)}
.notice.info{border-top-color:var(--ice)}
.notice.notice{border-top-color:var(--ore)}
.notice.warning{border-top-color:var(--hot);background:#180f10}
.notice .nBody{min-width:0}
.notice b{display:block;color:#fff;font-size:11.5px;letter-spacing:.06em;margin-bottom:2px}
.notice span{display:block}
.notice a{display:inline-block;margin-top:4px;color:var(--ice);border-bottom:1px solid rgba(127,227,255,.4)}
.notice .nClose{flex:none;padding:6px 12px;font-size:9px;background:#0d1420;border:1px solid var(--line);
  color:var(--dim);cursor:pointer;letter-spacing:.14em;text-transform:uppercase}
.notice .nClose:hover{border-color:var(--ice);color:var(--ice)}
@media (max-width:560px){
  .notice{flex-direction:column;gap:8px;padding:9px 12px}
  .notice .nClose{align-self:flex-end}
}
/* research progress in the technology detail */
.rBar{height:3px;background:#12202e;margin:6px 0 2px;overflow:hidden}
.rBar span{display:block;height:100%;background:var(--grn);transition:width .9s linear}
/* where the ore went */
.ledger{background:#080d15;border-left:2px solid var(--ice);padding:8px 10px;margin-top:2px}
.ledger b{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:5px}
.lrow{display:grid;grid-template-columns:56px 1fr auto;gap:8px;font-size:10.5px;line-height:1.9}
.lrow .dim{color:#5a6f8c}

/* what a structure glyph is, on hover */
.glyphTip{position:absolute;display:none;z-index:40;pointer-events:none;
  background:#070b12ee;border:1px solid var(--line);border-left:2px solid var(--ice);
  padding:6px 9px;font:10.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9db2cc;
  white-space:nowrap;box-shadow:0 6px 18px #0008}
.glyphTip b{display:block;font-size:11px;letter-spacing:.08em}
.glyphTip span{display:block;color:var(--ore)}
.glyphTip em{display:block;font-style:normal;color:#5f7791;font-size:9.5px}