/* ============================================================================
   NEON HARBOR - client styles
   ----------------------------------------------------------------------------
   One stylesheet, plain CSS, no build step, no dependencies.

   Discipline notes (the owner judges screenshots):
     - Restraint over decoration: flat surfaces, 1px hairlines, generous
       spacing, one accent colour. No gradient-for-its-own-sake, no chip walls,
       no fake avatars, no emoji.
     - The palette below is a copy of COLORS in shared/constants.js. The client
       is served from the client ROOT with no bundler, so it cannot import
       across into /shared over HTTP; keep these two lists in sync by hand.
     - Nothing here fights the pixel art: the canvas is the hero, the HUD is
       quiet translucent chrome on top of it.
   ========================================================================= */

:root {
  /* --- COLORS (shared/constants.js) --- */
  --c-hp: #ff4d6d;
  --c-energy: #5ff0ff;
  --c-credits: #ffd166;
  --c-criminal: #ff7b00;
  --c-text: #e6e6f0;
  --c-dim: #8a8aa0;
  --c-accent: #ff4fd8;

  /* --- surfaces --- */
  --bg: #0b0b12;
  --bg-2: #101018;
  /* Panels sit on high-frequency pixel art: keep them dark enough that text
     never has to compete with a magenta tile behind it. */
  --panel: rgba(13, 13, 21, 0.94);
  --panel-solid: #12121c;
  --line: #2b2b45;
  --line-soft: #1e1e2f;
  --track: #242438;
  --ok: #4fd18b;

  /* --- metrics --- */
  --gap: 12px;
  --pad: 14px;
  --radius: 10px;
  --radius-sm: 7px;
  --tap: 40px;              /* desktop control height */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* [hidden] must beat the display:flex rules on panels. */
[hidden] { display: none !important; }
/* main.js toggles the .hidden CLASS on #map for the M key. */
.hidden { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--c-text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body[data-screen="game"] { user-select: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.muted { color: var(--c-dim); }
.small { font-size: 12.5px; }
.empty { margin: 6px 0 0; font-size: 13px; }

/* Focus: visible, never a neon halo. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- screens */

#app { position: fixed; inset: 0; overflow: hidden; }

.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: block; }

/* margin:auto on the child centres without clipping when content overflows
   (display:grid/flex centring clips the top of tall content). */
.screen--center.is-active {
  display: flex;
  overflow-y: auto;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
}
.screen--center .wrap { margin: auto; width: 100%; }

.auth-wrap      { max-width: 440px; }
.create-wrap    { max-width: 620px; }

.brand { margin-bottom: 18px; }
.brand-title {
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand-title-sm { font-size: 16px; letter-spacing: 0.1em; }
.brand-sub { margin: 6px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--line-soft);
  min-height: 40px;
}
.panel-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.panel-head-actions { display: flex; align-items: center; gap: 10px; }
.panel-head-btn {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.chev { color: #a8a8c0; font-size: 15px; line-height: 1; }

.sub-title {
  margin: 14px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.sub-title:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #191924;
  color: var(--c-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: #20202e; border-color: #2e2e48; }
.btn:active:not(:disabled) { background: #171722; }
.btn:disabled { background: #13131b; border-color: #222230; color: #55556a; cursor: not-allowed; }

.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #14000f;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: #ff6ce0; border-color: #ff6ce0; }
.btn-primary:active:not(:disabled) { background: #e83fc2; }

.btn-block { width: 100%; }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-dim);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.icon-btn:hover { color: var(--c-text); background: #1e1e2c; }

.linkish {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--c-energy);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkish:hover { color: #9df6ff; }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #0e0e16;
  color: var(--c-text);
  font: inherit;
  font-size: 16px;             /* >=16px stops iOS zooming the page on focus */
}
.input::placeholder { color: #7a7a92; }
.input:hover { border-color: #2e2e48; }
.input:focus { outline: none; border-color: var(--c-accent); }

/* ---------------------------------------------------------------- forms */

.field { margin-top: 12px; }
.field:first-of-type { margin-top: 0; }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-dim);
}

/* Reserved line box: an error appearing never moves anything below it. */
.err {
  min-height: 1.25em;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--c-hp);
}
.err:empty { visibility: hidden; }
.err-form { margin-top: 10px; }

.hint { margin: 12px 0 0; font-size: 13px; text-align: center; }

.fieldset {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

/* segmented Login / Register switch */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #0e0e16;
}
.seg-btn {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--c-dim);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  touch-action: manipulation;
}
.seg-btn.is-active { background: #21212f; color: var(--c-text); }

.auth-form { padding: 18px; }
.auth-form .btn-block { margin-top: 4px; }

/* Register-only field: hidden in login mode. */
#screen-auth[data-mode="login"] #auth-confirm-field { display: none; }

/* ---------------------------------------------------------------- create */

.create-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.slots { margin: 0; font-size: 13px; }
.slots strong { color: var(--c-text); font-variant-numeric: tabular-nums; }

#create-existing { padding: var(--pad); margin-bottom: 14px; }
.create-form { padding: 16px; }

.char-list { list-style: none; margin: 10px 0 0; padding: 0; }
.char-list:empty { display: none; }
.char-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
  cursor: pointer;
  touch-action: manipulation;
}
.char-row:hover { border-color: var(--c-accent); background: #191926; }
.char-name { font-size: 14px; font-weight: 600; }
.char-meta { font-size: 12.5px; color: var(--c-dim); }

.arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.arch-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #12121b;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .12s ease, background-color .12s ease;
}
.arch-card:hover { border-color: #35355a; background: #16161f; }
.arch-card[aria-checked="true"] {
  border-color: var(--c-accent);
  background: #1b1220;
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.arch-name { font-size: 14px; font-weight: 600; }
.arch-blurb { font-size: 12.5px; color: var(--c-dim); }

.arch-skills {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.arch-skills li {
  font-size: 12px;
  color: #b6b6c8;
  padding-left: 10px;
  position: relative;
}
.arch-skills li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-energy);
  opacity: .7;
}

/* point-buy */
.points-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.points-label { font-size: 13px; color: var(--c-dim); }
.points-value { font-size: 13px; color: var(--c-dim); }
.points-value strong {
  font-size: 18px;
  color: var(--c-credits);
  font-variant-numeric: tabular-nums;
}
.points-value strong[data-remaining="0"] { color: var(--ok); }

/* Two columns on a wide form: 5 attributes cost 3 rows instead of 5. */
.attr-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}

.attr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.attr-name { flex: 1; font-size: 13.5px; color: #c8c8da; }

.step-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #191924;
  color: var(--c-text);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.step-btn:hover:not(:disabled) { background: #22222f; }
/* A stepper at its floor/ceiling must not look clickable: recessed, near
   invisible border, and a glyph far dimmer than the enabled one. */
.step-btn:disabled {
  background: #0e0e16;
  border-color: #17172a;
  color: #33334a;
  cursor: not-allowed;
}

.attr-input {
  width: 62px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #0e0e16;
  color: var(--c-text);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.attr-input::-webkit-outer-spin-button,
.attr-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.attr-input:focus { outline: none; border-color: var(--c-accent); }

.attr-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}

/* appearance swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.swatch {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
}
.swatch::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  background: var(--sw, #fff);
}
.swatch:hover { border-color: #3a3a5c; }
.swatch[aria-checked="true"] {
  border-color: var(--c-text);
  box-shadow: 0 0 0 2px var(--c-accent);
}

.create-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.create-actions .btn-primary { flex: 1; }

/* =========================================================================
   GAME
   ========================================================================= */

.screen--game.is-active { display: block; }

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #07070d;
  image-rendering: pixelated;
  touch-action: none;              /* the world consumes drags, not the page */
}

/* Click-through HUD: empty areas pass pointer events straight to the canvas. */
.hud-layer { position: absolute; inset: 0; pointer-events: none; }
.hud-layer > * { pointer-events: auto; }
.hud-layer .panel { pointer-events: auto; }

.hud-panel { position: absolute; }

/* --- connection status --- */
.conn-status {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  color: var(--c-text);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-credits);
  flex: 0 0 auto;
}
.conn-status[data-state="ok"]   .conn-dot { background: var(--ok); }
.conn-status[data-state="bad"]  .conn-dot { background: var(--c-hp); }
.conn-status[data-state="bad"]  { color: var(--c-hp); }

/* --- vitals --- */
.hud-vitals {
  top: calc(var(--gap) + env(safe-area-inset-top));
  left: var(--gap);
  width: 262px;
  padding: var(--pad);
}

.vitals-id {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}
.vitals-name {
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vitals-arch {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--c-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat {
  display: grid;
  grid-template-columns: 22px 1fr 74px;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.stat-name { font-size: 10.5px; letter-spacing: .08em; color: var(--c-dim); }
.stat-val {
  font-size: 12px;
  color: var(--c-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar {
  display: block;
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.bar-sm { height: 5px; }
.bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width .2s ease-out;
}
.bar-fill-hp      { background: var(--c-hp); }
.bar-fill-energy  { background: var(--c-energy); }
.bar-fill-accent  { background: var(--c-accent); }

.vitals-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.credits { color: var(--c-dim); }
.credits strong { color: var(--c-credits); font-variant-numeric: tabular-nums; }
#hud-district { margin-left: auto; }

.badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge-criminal { background: var(--c-criminal); color: #170c00; font-weight: 600; }

/* --- skills --- */
.hud-skills {
  top: calc(var(--gap) + env(safe-area-inset-top));
  right: var(--gap);
  width: 232px;
}
.skill-list { list-style: none; margin: 0; padding: 6px 0; max-height: 42vh; overflow-y: auto; }
/* name | micro bar | value: the bar kills the dead gap a plain list leaves
   and makes relative skill level scannable at a glance. */
.skill-row {
  display: grid;
  grid-template-columns: 1fr 40px 26px;
  align-items: center;
  gap: 8px;
  padding: 4px var(--pad);
  font-size: 12.5px;
}
.skill-name { color: #c8c8da; padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.skill-bar > i { display: block; height: 100%; width: 0%; background: var(--c-energy); border-radius: 999px; }
.skill-val { text-align: right; color: var(--c-dim); font-variant-numeric: tabular-nums; }

/* Drawers replace the skills panel on the right rather than overlapping it. */
body.drawer-open #hud-skills { visibility: hidden; }

/* Collapsing is meaningful on every viewport; on phones it is the default
   (ui.js reads the (max-width: 720px) media query at init). */
.hud-skills.is-collapsed .skill-list { display: none; }
.skill-row.is-gaining { color: var(--ok); }

/* --- chat --- */
.chat-panel {
  left: var(--gap);
  bottom: calc(var(--gap) + env(safe-area-inset-bottom));
  width: min(384px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-log {
  padding: 10px var(--pad);
  max-height: 24vh;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.chat-line { padding: 1px 0; }
.chat-from { color: var(--c-energy); margin-right: 4px; font-weight: 600; }
.chat-line.is-system .chat-text { color: var(--c-dim); }
/* Events get a quiet marker (CSS only, so it never pollutes textContent). */
.chat-line.is-event .chat-text { color: #c2c2d4; }
.chat-line.is-event .chat-text::before { content: "\00b7 "; color: var(--c-dim); }
.chat-line.is-error .chat-text { color: var(--c-hp); }
.chat-line.is-self .chat-from { color: var(--c-accent); }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px var(--pad);
  border-top: 1px solid var(--line-soft);
}
.chat-input { flex: 1; min-width: 0; }
.chat-send { flex: 0 0 auto; }

/* --- action bar --- */
.hud-actions {
  position: absolute;
  right: var(--gap);
  bottom: calc(var(--gap) + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  /* Above the drawer backdrop: an open drawer must never trap the player on
     the panel they just opened (you have to be able to switch or close). */
  z-index: 20;
}

/* --- ability bar (memory chips, src/hotbar.js) ---
   A restrained rack of six slots. The rarity signal is deliberately THREE
   channels and only one of them is colour:
     1. SHAPE  - square (common), barred square (uncommon), diamond (rare);
     2. WEIGHT - the left border grows 2px -> 4px -> 6px;
     3. TEXT   - the tier name is written in the slot.
   An empty slot says which tier it takes, so the bar explains itself. */
.hud-hotbar {
  position: absolute;
  top: calc(56px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}
/* Same rule as the skills panel and the minimap: an open drawer owns the
   screen, and the bar must not sit on top of it. */
body.drawer-open .hud-hotbar { visibility: hidden; }

.hotbar-slots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hotbar-slot { display: block; }
.hotbar-slot-btn {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: start;
  gap: 1px 5px;
  width: 64px;
  min-height: 62px;
  padding: 6px 6px 5px;
  /* The weight channel: 2 / 4 / 6px, set per tier below. */
  border: 1px solid var(--line);
  border-left: var(--rarity-weight, 2px) solid #35355a;
  border-radius: var(--radius-sm);
  background: #14141e;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .12s ease, border-color .12s ease;
}
.hotbar-slot-btn:hover { background: #191926; }
.hotbar-slot[data-rarity="common"]   .hotbar-slot-btn { --rarity-weight: 2px; }
.hotbar-slot[data-rarity="uncommon"] .hotbar-slot-btn { --rarity-weight: 4px; }
.hotbar-slot[data-rarity="rare"]     .hotbar-slot-btn { --rarity-weight: 6px; }

.hotbar-slot.is-empty .hotbar-slot-btn { border-style: dashed; background: #101018; }
.hotbar-slot.is-firing .hotbar-slot-btn { background: #232338; }
.hotbar-slot.is-cooling .hotbar-slot-btn { opacity: .55; }
.hotbar-slot.is-dry .hotbar-cost { color: var(--c-hp); }

.hotbar-key { font: 11px/1.2 var(--mono); font-weight: 600; letter-spacing: .04em; }
.hotbar-mark {
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-top: 2px;
  border: 1px solid var(--c-dim);
  border-radius: 1px;
}
/* uncommon: a filled bar across the square. */
.hotbar-slot[data-rarity="uncommon"] .hotbar-mark { box-shadow: inset 0 -3px 0 var(--c-dim); }
/* rare: the diamond. */
.hotbar-slot[data-rarity="rare"] .hotbar-mark { transform: rotate(45deg); }
.hotbar-slot.is-empty .hotbar-mark { border-style: dashed; }
.hotbar-slot[data-rarity="uncommon"].is-empty .hotbar-mark { box-shadow: none; }

.hotbar-name {
  grid-column: 1 / -1;
  font-size: 10.5px;
  line-height: 1.25;
  color: #c8c8da;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.hotbar-slot.is-empty .hotbar-name { color: #6a6a84; }
.hotbar-cost {
  grid-column: 1 / -1;
  font-size: 9.5px;
  color: var(--c-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hotbar-charge {
  grid-column: 1 / -1;
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.hotbar-charge > i { display: block; height: 100%; width: 0%; background: var(--c-energy); }
/* A chip whose effect has no consumer yet is labelled, not hidden: the player
   should never think a placeholder is a finished ability. */
.hotbar-slot.is-placeholder .hotbar-cost::after { content: " | pending"; color: #b98a3c; }

/* The install chooser. Absolutely positioned so it never resizes the rack. */
.hotbar-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.hotbar-picker-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 40vh;
  overflow-y: auto;
}
.hotbar-pick-btn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.hotbar-pick-btn:hover { border-color: #35355a; background: #191926; }
.hotbar-pick .item-name { font-size: 13px; }
.hotbar-pick .item-meta { margin-left: auto; font-size: 11.5px; color: var(--c-dim); }
.hotbar-picker .empty { margin: 0; padding: 10px var(--pad) 12px; }

/* Narrow desktop: a top-centre strip would collide with the vitals panel, so
   the bar joins the right-hand column, under the skills panel. A 2x3 grid keeps
   it the same width as the minimap below it. */
@media (min-width: 721px) and (max-width: 1023px) {
  .hud-hotbar {
    top: calc(232px + env(safe-area-inset-top));
    left: auto;
    right: var(--gap);
    transform: none;
  }
  .hotbar-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .hotbar-slot-btn { width: auto; }
  .hotbar-name { -webkit-line-clamp: 1; }
  .hotbar-picker { left: auto; right: 0; transform: none; }
}

/* --- minimap + perf (driven by main.js/minimap.js) --- */
.hud-map {
  position: absolute;
  right: var(--gap);
  bottom: calc(var(--gap) + env(safe-area-inset-bottom) + 48px);
  width: 176px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 6, 12, 0.7);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* The minimap is read-only chrome: it must not eat world clicks. */
.hud-layer > .hud-map { pointer-events: none; }
#minimap-canvas { display: block; width: 100%; height: 176px; background: transparent; }
.perf {
  padding: 3px 6px 6px;
  font: 11.5px/1.4 var(--mono);
  color: #a8a8c0;
  text-align: center;
  white-space: nowrap;
}
body.drawer-open .hud-map { visibility: hidden; }

/* --- drawers --- */
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 12, 0.5);
  z-index: 10;
}

.drawer {
  position: absolute;
  top: calc(var(--gap) + env(safe-area-inset-top));
  /* Stop clear of the action bar so the bar stays clickable with a drawer open. */
  bottom: calc(var(--gap) + env(safe-area-inset-bottom) + 48px);
  right: var(--gap);
  width: min(340px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}
.drawer-body { padding: var(--pad); overflow-y: auto; flex: 1; }

/* --- lists --- */
.item-list, .contract-list, .vendor-list, .combat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row, .combat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
  cursor: pointer;
  touch-action: manipulation;
}
.item-list > li + li, .combat-list > li + li { margin-top: 6px; }
.item-row:hover, .combat-row:hover { border-color: #35355a; background: #191926; }
.item-name { font-size: 13.5px; }
.item-meta { font-size: 12px; color: var(--c-dim); margin-left: auto; text-align: right; }
.item-cta {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
  flex: 0 0 auto;
}
.combat-name { font-size: 13.5px; }
.combat-meta { font-size: 12px; color: var(--c-dim); margin-left: auto; }

.equip-grid { display: grid; gap: 6px; }
.equip-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.equip-slot:disabled { opacity: .5; cursor: default; }
.equip-slot:not(:disabled):hover { border-color: var(--c-hp); }
.slot-label {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.slot-value { font-size: 13px; }
.equip-slot:not(.is-filled) .slot-value { color: #5a5a72; }
.equip-slot.is-filled .slot-value { color: var(--c-text); }

.contract-row {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
}
.contract-row + .contract-row { margin-top: 8px; }
.contract-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.contract-kind { font-size: 13.5px; font-weight: 600; }
.contract-state {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-dim);
}
.contract-row[data-state="available"] .contract-state { color: var(--c-energy); }
.contract-row[data-state="complete"]  .contract-state { color: var(--ok); }
.contract-row[data-state="failed"]    .contract-state { color: var(--c-hp); }
.contract-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.contract-progress .bar { flex: 1; }
.contract-count { font-size: 11.5px; color: var(--c-dim); font-variant-numeric: tabular-nums; }
.contract-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.contract-reward { font-size: 12px; color: var(--c-credits); }
.contract-actions { display: flex; gap: 6px; }

.vendor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #14141e;
}
.vendor-list > li + li { margin-top: 6px; }
.vendor-row .item-name { flex: 1; }
.vendor-price { font-size: 12px; color: var(--c-credits); font-variant-numeric: tabular-nums; }

/* --- death overlay --- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 10, 0.62);
}
.death-card {
  width: min(340px, 100%);
  padding: 22px;
  text-align: center;
  border-color: #3a1c2c;
}
.death-title { font-size: 17px; letter-spacing: .04em; }
.death-card .muted { margin: 8px 0 0; font-size: 13px; }
.death-count { margin: 14px 0 18px; font-size: 13px; color: var(--c-dim); }
.death-count strong { color: var(--c-text); font-size: 17px; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Responsive: iPhone 390x844 first-class; 1280x720 is the desktop target.
   ========================================================================= */

@media (max-width: 720px) {
  :root { --tap: 44px; --gap: 8px; }

  /* thumb-sized controls - every interactive element clears 44px */
  .step-btn { width: 44px; height: 44px; }
  .attr-input { width: 56px; height: 44px; }
  .attr-row { min-height: 48px; }
  .swatch { width: 44px; height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .btn-sm { min-height: 44px; }
  .seg-btn { min-height: 44px; }
  .linkish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 2px;
    vertical-align: middle;
  }

  .brand-title { font-size: 18px; }
  .arch-grid { grid-template-columns: 1fr; }
  .attr-list { grid-template-columns: 1fr; }
  .auth-form, .create-form { padding: 14px; }
  .create-wrap { max-width: 100%; }

  /* --- HUD --- */
  /* Vertical order at the top of a phone: status pill, then (vitals | skills
     chip) on one row, then the minimap under the chip. The chip and the
     minimap share a width so the right-hand stack is aligned.
     env(safe-area-inset-*) is 0 on a desktop browser and 47/34px on a notched
     iPhone, so every offset below clears the notch and the home indicator. */
  .hud-vitals {
    top: calc(50px + env(safe-area-inset-top));
    left: 6px;
    right: 128px;
    width: auto;
    padding: 10px 12px;
  }
  .vitals-id { margin-bottom: 8px; }
  .vitals-foot { flex-wrap: wrap; gap: 6px 10px; }
  .stat { grid-template-columns: 20px 1fr 64px; gap: 6px; }
  .skill-list { max-height: 30vh; }

  .panel-head-btn { min-height: 44px; }

  .hud-skills {
    top: calc(50px + env(safe-area-inset-top));
    right: 6px;
    width: 116px;
  }

  /* Minimap tucks under the skills chip; the perf readout is a desktop tool. */
  .hud-map {
    top: calc(102px + env(safe-area-inset-top));
    bottom: auto;
    right: 6px;
    width: 116px;
  }
  #minimap-canvas { height: 116px; }
  .perf { display: none; }

  /* Chat owns the bottom of the screen, action bar sits under it. */
  .chat-panel {
    left: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom));
    width: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .chat-log { max-height: 24vh; }

  .hud-actions {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: var(--panel-solid);
  }
  .hud-actions .btn {
    flex: 1;
    min-height: 52px;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
  }
  .hud-actions .btn + .btn { border-left: 1px solid var(--line-soft); }

  /* Ability bar: the right-hand column, under the minimap, 2x3 so a 116px
     column still fits a legible chip name and its cost. */
  .hud-hotbar {
    top: calc(226px + env(safe-area-inset-top));
    left: auto;
    right: 6px;
    transform: none;
    width: 116px;
  }
  .hotbar-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; }
  .hotbar-slot-btn { width: auto; min-height: 46px; padding: 4px; }
  .hotbar-name { font-size: 9.5px; -webkit-line-clamp: 2; }
  .hotbar-cost { font-size: 8.5px; }
  .hotbar-picker { left: auto; right: 0; transform: none; width: min(232px, calc(100vw - 24px)); }

  /* Drawers become bottom sheets. */
  .drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 78vh;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.drawer-open #hud-skills { visibility: hidden; }
}

/* Short landscape (e.g. 844x390 rotated) - keep the world visible. */
@media (max-height: 520px) and (min-width: 721px) {
  .chat-log { max-height: 24vh; }
  .hud-skills .skill-list { max-height: 30vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}