*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#060b14;
  --panel:rgba(4,10,24,0.92);
  --border:rgba(40,100,180,0.3);
  --accent:#00d4ff;
  --accent2:#7c4dff;
  --text:#b8cce0;
  --dim:#3a5a7a;
  --gold:#ffc844;
  --green:#00e87a;
  --red:#ff2244;
  --shield:#0088ff;
  --armor:#ff8800;
  --hp:#ff2244;
}

/* The client reads in the UI face (Barlow); the mono face is kept for what is
   genuinely a readout — ids, timers, dense numeric tables — and is asked for
   explicitly where that is wanted (`var(--u-font-mono)`, `.u-mono`). Prose at
   10–11px mono is what made the old client read as a debug console. */
body{
  font-family:var(--u-font-ui);
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  /* dvh, not vh: `vh` counts the browser chrome that retracts on scroll, so a
     100vh shell is taller than the screen and its bottom row is unreachable on
     a phone. The vh line is the fallback for browsers without dvh. */
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  /* In landscape the notch eats a side, not the top. */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* Touch: a finger needs 44px, and there is no hover to lean on. */
@media (pointer: coarse){
  .btn,.u-cta,.nav-btn,.u-dlg-x,.hud-more,.hud-menu-btn{min-height:44px}
  /* The small variants are small in type and padding, not in target: a Craft or
     a Sell is still something a finger has to land on. */
  .btn-xs,.btn-sm,.u-cta.is-sm{min-height:44px;padding-left:14px;padding-right:14px}
  select,textarea{min-height:44px}
}

input{
  background:rgba(0,15,40,.8);
  border:1px solid rgba(40,100,180,.4);
  color:var(--text);
  padding:9px 13px;
  font-family:inherit;font-size:14px;
  border-radius:6px;outline:none;
  transition:border-color .2s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 10px rgba(0,212,255,.12)}

.empty{font:400 13px/1.45 var(--u-font-ui);color:var(--u-mute);text-align:center;padding:18px}
.sec-label{font:600 11px/1 var(--u-font-ui);color:var(--u-label);letter-spacing:.14em;text-transform:uppercase;padding:5px 0;border-bottom:1px solid rgba(40,60,100,.3)}

/* Scrollbar */
.scroll{scrollbar-width:thin;scrollbar-color:#1a3a5a transparent}

/* ── Inline rename input ──────────────────────────
   Used wherever a name is edited in place (topbar commander name, hangar hero
   ship name — see views/_shared.js beginInlineRename). It inherits the font of
   whatever it replaced so the row does not jump between reading and editing. */
.rename-input{
  font:inherit;color:var(--accent);letter-spacing:inherit;
  background:rgba(0,0,0,.45);
  border:1px solid var(--accent);border-radius:3px;
  padding:1px 5px;width:14em;max-width:100%;
  outline:none;
}