/* ═══════════════════════════════════════════════════════════════════════════
   FIELD KIT HUD — the portrait redesign (concept B).

   Loaded AFTER interface.css and scoped to `body.hud-fk`, so removing the class
   (Menu → Classic HUD) drops every rule here and restores the original HUD with
   no other change. The old files are backed up in
   backups/ui-pre-fieldkit-2026-07-27/.

   Design language, taken from the approved mockup:
     • near-black warm panels with a 2px gold border and a soft inner top highlight
     • generous corner radius; circles for actions, rounded squares for tabs
     • inline SVG icon art (data URIs below) instead of emoji glyphs
     • gold for anything you act on, muted cream for anything you only read
   ═══════════════════════════════════════════════════════════════════════════ */

body.hud-fk {
  --fk-gold: #c9a227;
  --fk-gold-lt: #e8c65a;
  --fk-ink: #f0e8d0;
  --fk-dim: #a89c7c;
  --fk-panel: linear-gradient(#231e14f7, #15120bfa);
  --fk-panel-flat: #1a160ef7;
  --fk-edge: rgba(201, 162, 39, .58);
  --fk-hp: linear-gradient(#d9564a, #a32f28);
  --fk-r: clamp(12px, calc(3 * var(--u)), 22px);
  --fk-shadow: 0 3px 14px #000a, inset 0 1px 0 #ffffff1c;
  /* Edge insets. In landscape Android puts its on-screen nav bar (back/home/recents) down
     the RIGHT edge, straight through the action rail — every right-anchored element has to
     clear env(safe-area-inset-right) or the system buttons and the game's buttons interleave.
     Same treatment on the left for notches/curved edges. */
  --fk-gap: clamp(8px, calc(2 * var(--u)), 18px);
  --fk-right: calc(var(--fk-gap) + env(safe-area-inset-right, 0px));
  --fk-left: calc(var(--fk-gap) + env(safe-area-inset-left, 0px));
  --fk-top-in: calc(env(safe-area-inset-top, 0px) + var(--fk-gap));
  --fk-dial: clamp(84px, calc(21 * var(--u)), 160px);   /* minimap dial size */
  --fk-dock: clamp(64px, calc(16 * var(--u)), 116px);   /* mode dial size — the dock's width */
  /* shared with #btn-mode::before, which cannot reach the .ic-* rules */
  --i-boot: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3v10l-2 4v4h14v-3l-5-3V3H7Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>');
  --i-sword: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3 9.5 12.5M5 19l3-3M3 21l4-1 1-4-4 1-1 4Z" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 3h6v6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 3 15 13M19 19l-3-3M21 21l-4-1-1-4 4 1 1 4Z" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* Shared panel skin. */
body.hud-fk .fk-panel {
  background: var(--fk-panel);
  border: 2px solid var(--fk-edge);
  border-radius: var(--fk-r);
  box-shadow: var(--fk-shadow);
  color: var(--fk-ink);
}

/* ── icon art ──────────────────────────────────────────────────────────────
   Monochrome SVGs tinted by currentColor via mask, so one icon works on gold
   buttons, dim rails and bright active states without a second asset. */
body.hud-fk .ic {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat;
}
/* Inventory is a BACKPACK (flap + buckle), not a handbag — a handbag reads as "shopping"
   and was being confused with the Shop tab. */
body.hud-fk .ic-bag    { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 10c0-3.3 3.1-5.5 7-5.5s7 2.2 7 5.5v10H5V10Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/><path d="M5 13.5h14" fill="none" stroke="black" stroke-width="2"/><rect x="10" y="15.5" width="4" height="4" fill="black"/><path d="M9 9V7.5a3 3 0 0 1 6 0V9" fill="none" stroke="black" stroke-width="1.6"/></svg>'); }
body.hud-fk .ic-skills { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="13" width="4" height="8" fill="black"/><rect x="10" y="8" width="4" height="13" fill="black"/><rect x="17" y="4" width="4" height="17" fill="black"/></svg>'); }
body.hud-fk .ic-char   { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="7" r="3.4" fill="black"/><path d="M5 21c0-4 3.2-6.5 7-6.5s7 2.5 7 6.5" fill="black"/></svg>'); }
/* Shop is a STOREFRONT: scalloped awning over a shop face with a doorway. The old crate
   silhouette was reading as storage/inventory. */
body.hud-fk .ic-shop   { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 10.5V20h15v-9.5" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/><path d="M3 10.5 5 4.5h14l2 6a2.2 2.2 0 0 1-3.6 0 2.2 2.2 0 0 1-3.6 0 2.2 2.2 0 0 1-3.6 0 2.2 2.2 0 0 1-3.6 0Z" fill="black"/><path d="M9.5 20v-5.5h5V20" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>'); }
body.hud-fk .ic-map    { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 4 3 6.5v14L9 18l6 2.5 6-2.5v-14L15 6.5 9 4Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/><path d="M9 4v14M15 6.5v14" stroke="black" stroke-width="2"/></svg>'); }
body.hud-fk .ic-sword  { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3 9.5 12.5M5 19l3-3M3 21l4-1 1-4-4 1-1 4Z" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 3h6v6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 3 15 13M19 19l-3-3M21 21l-4-1-1-4 4 1 1 4Z" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
body.hud-fk .ic-menu   { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="black" stroke-width="2.2" stroke-linecap="round"/></svg>'); }
body.hud-fk .ic-chat   { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v11H9l-5 4V5Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>'); }
body.hud-fk .ic-boot   { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3v10l-2 4v4h14v-3l-5-3V3H7Z" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"/></svg>'); }
/* The coin is the one full-colour icon: a mask would flatten it to the text colour and
   it stops reading as gold. Painted as a background image and the mask is switched off. */
body.hud-fk .ic-coin {
  -webkit-mask: none; mask: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><radialGradient id="c" cx="36%" cy="30%"><stop offset="0" stop-color="%23ffe9a8"/><stop offset="0.55" stop-color="%23e8bc4a"/><stop offset="1" stop-color="%23b8862a"/></radialGradient></defs><circle cx="12" cy="12" r="10.5" fill="%236b4a0e"/><circle cx="12" cy="12" r="9.4" fill="url(%23c)"/><circle cx="12" cy="12" r="6.6" fill="none" stroke="%23a8761f" stroke-width="1.1" opacity="0.6"/><path d="M12 7.4l1.35 2.95 3.25.34-2.42 2.16.69 3.15L12 14.4l-2.87 1.6.69-3.15-2.42-2.16 3.25-.34z" fill="%23fff6d0" opacity="0.92"/><ellipse cx="8.8" cy="8.2" rx="2.7" ry="1.5" fill="%23ffffff" opacity="0.34"/></svg>') center/contain no-repeat;
}
body.hud-fk .ic-track  { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="black"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>'); }

/* ── 1 · vitals card (top-left): portrait + name/level + HP ────────────────── */
body.hud-fk #status-bar {
  top: var(--fk-top-in);
  left: var(--fk-left);
  right: auto; bottom: auto;
  /* Shrink-to-fit: the card holds only a portrait, a name and one HP bar now, so it is
     sized by its contents rather than by a share of the viewport. The max-width is just
     a guard for very long player names. */
  width: max-content;
  max-width: min(56vw, clamp(190px, calc(46 * var(--u)), 330px));
  padding: clamp(3px, calc(.8 * var(--u)), 6px);
  background: var(--fk-panel);
  border: 2px solid var(--fk-edge);
  border-radius: var(--fk-r);
  box-shadow: var(--fk-shadow);
  /* Explicit rows: the bar has several .status-line children and they must stack, not
     pile into one cell. Portrait spans them all; every line sits in column 2. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Explicit row tracks matter: with only implicit rows, the portrait's `grid-row: 1/-1`
     collapses to row 1 and the card grows by a whole extra row. */
  grid-template-rows: auto auto;
  gap: clamp(2px, calc(.6 * var(--u)), 5px) clamp(5px, calc(1.2 * var(--u)), 10px);
  align-items: center;
  pointer-events: auto;
}
/* portrait: the player's own avatar sprite, drawn by hud-fieldkit.js */
body.hud-fk #fk-portrait {
  grid-column: 1; grid-row: 1 / -1;
  width: clamp(32px, calc(8 * var(--u)), 58px); height: clamp(32px, calc(8 * var(--u)), 58px);
  border-radius: 50%; border: 2px solid var(--fk-gold);
  background: #0f1a10; overflow: hidden; position: relative;
  box-shadow: inset 0 0 12px #000a, 0 0 0 1px #0008;
}
body.hud-fk #fk-portrait canvas,
body.hud-fk #fk-portrait img {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -54%) scale(1.15);
  image-rendering: pixelated;
}
body.hud-fk #status-bar .status-line { grid-column: 2; margin: 0; flex-wrap: nowrap; gap: clamp(5px, calc(1.2 * var(--u)), 10px); }
body.hud-fk #status-bar .top-line { display: flex; align-items: baseline; }
body.hud-fk #status-bar .name-lv { flex: 1 1 auto; min-width: 0; gap: clamp(5px, calc(1.2 * var(--u)), 10px); }
body.hud-fk #status-bar .s-name { color: var(--fk-ink); font-size: clamp(12px, calc(3.2 * var(--u)), 23px); }
body.hud-fk #status-bar #cl-pill {
  background: none; border: none; padding: 0; color: var(--fk-gold-lt);
  font-size: clamp(10px, calc(2.5 * var(--u)), 18px); font-weight: 700; white-space: nowrap;
}
/* HP bar with the value centred on it. It needs an intrinsic width, not 100%, or the
   card's width:max-content has nothing to size column 2 from. */
body.hud-fk #status-bar .hp-line { display: block; }
body.hud-fk #status-bar .hp-bar {
  width: clamp(92px, calc(24 * var(--u)), 180px); max-width: 100%; min-width: 0;
  height: clamp(12px, calc(3 * var(--u)), 21px);
  border: 1.5px solid #6d3a2e; border-radius: 999px; background: #2a1712e0;
  box-shadow: inset 0 1px 3px #0008;
}
body.hud-fk #status-bar .hp-fill { background: var(--fk-hp); }
body.hud-fk #status-bar .hp-text {
  font-size: clamp(8px, calc(2.1 * var(--u)), 15px); font-weight: 700;
  text-shadow: 0 1px 2px #000c; letter-spacing: .2px;
}
/* Things the compact card has no room for. The region name and the distance-from-Rest
   readout move under the minimap dial, coins move to the bottom-left pill, and the
   settings cog moves to the top-right cluster (hud-fieldkit.js relocates the elements
   themselves — the .s-dist rule below only still bites if that JS is a stale cached copy). */
body.hud-fk #status-bar .s-dist,
body.hud-fk #status-bar .s-online,
body.hud-fk #status-bar .region-line { display: none; }

/* Online-players badge, docked under the whole vitals card (hud-fieldkit.js measures the card
   and sets left/top — the card is shrink-to-fit, so its height is not a constant). */
body.hud-fk #s-online-badge.fk-under-card {
  position: absolute; z-index: 23; margin: 0;
  line-height: 1.15; white-space: nowrap; pointer-events: auto; cursor: pointer;
  padding: clamp(3px, calc(.8 * var(--u)), 7px) clamp(8px, calc(2 * var(--u)), 14px);
  border-radius: 999px;
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  box-shadow: var(--fk-shadow); color: var(--fk-ink);
  font-size: clamp(10px, calc(2.5 * var(--u)), 18px); font-weight: 700;
  gap: clamp(4px, calc(1 * var(--u)), 8px);
}
body.hud-fk #s-online-badge.fk-under-card .dot {
  width: clamp(7px, calc(1.8 * var(--u)), 13px); height: clamp(7px, calc(1.8 * var(--u)), 13px);
  background: #7fd45a; box-shadow: 0 0 7px #7fd45a99;
}

/* ── 2 · top-right cluster: boost + gold + settings ───────────────────────── */
body.hud-fk #fk-top {
  position: absolute; z-index: 23;
  top: var(--fk-top-in);
  right: var(--fk-right);
  display: flex; align-items: center; gap: clamp(6px, calc(1.5 * var(--u)), 12px);
}
/* 2× boost: floats centred in the gap between the vitals card and the gold cluster
   (hud-fieldkit.js measures all three and sets left/top — every one of them is shrink-to-fit).
   Dim panel while empty, gold while a boost is running; ui.js owns the `.empty` class and the
   countdown text. It is the only entry point to the rewarded-ad flow, so it stays on screen —
   the vitals card had hidden it along with the rest of the status lines. */
body.hud-fk #s-boost.fk-boost {
  position: absolute; z-index: 23; margin: 0;
  line-height: 1.15; white-space: nowrap; pointer-events: auto; cursor: pointer;
  padding: clamp(4px, calc(1 * var(--u)), 8px) clamp(8px, calc(2 * var(--u)), 14px);
  border-radius: 999px;
  font-size: clamp(10px, calc(2.5 * var(--u)), 18px); font-weight: 700;
  box-shadow: var(--fk-shadow);
}
body.hud-fk #s-boost.fk-boost.empty {
  background: var(--fk-panel); border: 2px solid var(--fk-edge); color: var(--fk-dim);
}
body.hud-fk #s-boost.fk-boost:not(.empty) {
  background: linear-gradient(var(--fk-gold-lt), var(--fk-gold));
  border: 2px solid #7a5a1c; color: #1a1306;
}
/* Client build tag, immediately right of the player count inside the same pill. Kept
   deliberately quiet — dim, a size down, and separated by a hairline so it reads as
   metadata about the client rather than part of the online figure. */
body.hud-fk #s-online-badge .s-version {
  margin-left: clamp(4px, calc(1 * var(--u)), 8px);
  padding-left: clamp(4px, calc(1 * var(--u)), 8px);
  border-left: 1px solid rgba(201, 162, 39, .35);
  color: var(--fk-dim); opacity: .75; font-weight: 600;
  font-size: .82em; letter-spacing: .02em;
}
body.hud-fk #fk-top #btn-settings {
  position: static; margin: 0;
  width: clamp(30px, calc(7.6 * var(--u)), 56px); height: clamp(30px, calc(7.6 * var(--u)), 56px);
  padding: clamp(5px, calc(1.3 * var(--u)), 10px);
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  border-radius: 50%; box-shadow: var(--fk-shadow);
}
body.hud-fk #fk-top #btn-settings svg { width: 100%; height: 100%; display: block; }

/* ── 3 · circular minimap (top-right, under the clock) ─────────────────────── */
body.hud-fk #minimap.fk-compact {
  left: auto; top: calc(env(safe-area-inset-top, 0px) + clamp(42px, calc(10 * var(--u)), 78px));
  right: var(--fk-right);
  transform: none;
  width: var(--fk-dial) !important;
  height: var(--fk-dial);
  /* Rounded square, NOT a circle: the minimap is a second Phaser camera painted straight
     onto the game canvas, so this DOM box cannot clip it — a 50% radius left the camera's
     square corners visible outside the ring. Matching the frame to what is actually drawn
     is the honest fix, and it echoes the rail buttons. */
  /* Only a slight rounding: the camera viewport is a rectangle drawn on the canvas BEHIND
     this frame, so any corner the frame rounds away still shows map. A small radius keeps
     the bleed under the 2px border instead of outside it. */
  border-radius: clamp(5px, calc(1.2 * var(--u)), 9px); border: 2px solid var(--fk-gold);
  box-shadow: 0 3px 16px #000a, inset 0 0 0 1px #0008;
  overflow: hidden; z-index: 21;
}
body.hud-fk #minimap.fk-compact .minimap-head,
body.hud-fk #minimap.fk-compact #minimap-info,
body.hud-fk #minimap.fk-compact .mm-compass { display: none; }
body.hud-fk #minimap.fk-compact .minimap-body { border-radius: clamp(3px, calc(.8 * var(--u)), 7px); }
/* No "you are here" marker on the dial: it is always dead-centre on the player, and the
   triangle read as a compass arrow pointing north. The full map keeps its marker. */
body.hud-fk #minimap.fk-compact .mm-here { display: none; }
/* region name under the dial, with "N tiles from Rest" as a second, quieter line */
body.hud-fk #fk-region {
  position: absolute; z-index: 21;
  top: calc(env(safe-area-inset-top, 0px) + clamp(130px, calc(32 * var(--u)), 244px));
  right: var(--fk-right);
  width: var(--fk-dial); text-align: center;
  font-size: clamp(9px, calc(2.3 * var(--u)), 17px); font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--fk-dim);
  text-shadow: 0 1px 3px #000c; pointer-events: none;
}
/* The moved .s-dist carries interface.css's pill styling; strip it back to a caption. */
body.hud-fk #fk-region .s-dist {
  display: block; margin-top: clamp(1px, calc(.4 * var(--u)), 4px);
  background: none; border: 0; padding: 0;
  font-size: clamp(8px, calc(2 * var(--u)), 15px); font-weight: 600;
  letter-spacing: .2px; text-transform: none; color: var(--fk-dim); opacity: .85;
}
body.hud-fk #fk-region .s-dist #s-dist { color: var(--fk-ink); font-weight: 700; }

/* ── 4 · quest tracker → card under the minimap ────────────────────────────── */
body.hud-fk #ql-stack {
  left: auto; bottom: auto;
  /* one caption line lower than the region name alone, to clear the distance readout */
  top: calc(env(safe-area-inset-top, 0px) + clamp(170px, calc(41 * var(--u)), 310px));
  right: var(--fk-right);
  align-items: flex-end;
}
body.hud-fk .quest-tracker {
  max-width: min(52vw, clamp(180px, calc(45 * var(--u)), 340px));
  background: var(--fk-panel);
  border: 2px solid var(--fk-edge); border-left-width: 2px;
  border-radius: var(--fk-r); box-shadow: var(--fk-shadow);
  padding: clamp(6px, calc(1.5 * var(--u)), 12px) clamp(9px, calc(2.2 * var(--u)), 17px);
}
body.hud-fk .quest-tracker .qt-scroll {
  /* swap the 📜 glyph for the tracking reticle */
  font-size: 0; width: 1.05em; height: 1.05em; display: inline-block;
  background: var(--fk-gold-lt);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="black"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="black"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat;
}
body.hud-fk .quest-tracker .qt-title { color: var(--fk-gold-lt); letter-spacing: .7px; text-transform: uppercase; font-size: clamp(9px, calc(2.3 * var(--u)), 17px); }
body.hud-fk .quest-tracker .qt-step { color: var(--fk-gold-lt); font-weight: 700; }
body.hud-fk .quest-tracker .qt-objective { color: var(--fk-ink); }
body.hud-fk .s-safe { background: var(--fk-panel-flat); border: 2px solid var(--fk-edge); border-radius: var(--fk-r); color: var(--fk-ink); }

/* ── 5 · bottom bar: the four tabs + the menu, in one row ──────────────────── */
body.hud-fk #bottom-nav {
  /* Centred in the gap between the left edge and the explore dial, rather than pinned
     left — the row is short and looked stranded in the corner. */
  left: 0; right: calc(var(--fk-right) + var(--fk-dock) + clamp(6px, calc(1.5 * var(--u)), 12px));
  top: auto; bottom: calc(clamp(12px, calc(3 * var(--u)), 24px) + var(--safe-pad));
  transform: none;
  flex-direction: row; align-items: flex-end; justify-content: center;
  padding-left: var(--fk-left);
  gap: clamp(6px, calc(1.5 * var(--u)), 12px);
  background: none; border: none; padding: 0;
  z-index: 22;
}
body.hud-fk #bottom-nav .nav-btn,
body.hud-fk #bottom-nav #btn-menu {
  flex: none; position: relative;
  width: clamp(40px, calc(10 * var(--u)), 74px); height: clamp(40px, calc(10 * var(--u)), 74px);
  padding: 0; border-radius: 50%;
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  box-shadow: var(--fk-shadow); color: var(--fk-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(19px, calc(4.9 * var(--u)), 36px);
  transition: color .15s, border-color .15s, transform .1s;
}
/* the text labels are the i18n spans — hidden on the bar, kept for screen readers */
body.hud-fk #bottom-nav .nav-btn > span[data-i18n] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.hud-fk #bottom-nav .nav-btn.active { color: var(--fk-gold-lt); border-color: var(--fk-gold); }
body.hud-fk #bottom-nav .nav-btn:active,
body.hud-fk #bottom-nav #btn-menu:active { transform: scale(.94); }
/* Map lives on the minimap dial now, so its tab is redundant. */
body.hud-fk #bottom-nav .nav-btn[data-tab='map'] { display: none; }
body.hud-fk #bottom-nav .nav-badge,
body.hud-fk #bottom-nav .menu-dot {
  top: -3px; right: -3px; background: #e8801f; color: #150e05; border: 1.5px solid #1a160e;
}

/* ── 5b · quick slots — sit directly above the tab row, same left inset ────── */
body.hud-fk #quick-slots {
  left: var(--fk-left); right: calc(var(--fk-right) + var(--fk-dock) + clamp(6px, calc(1.5 * var(--u)), 12px));
  justify-content: flex-start; gap: clamp(8px, calc(2 * var(--u)), 14px);
  bottom: calc(clamp(12px, calc(3 * var(--u)), 24px) + var(--safe-pad) + clamp(40px, calc(10 * var(--u)), 74px) + clamp(6px, calc(1.5 * var(--u)), 12px));
}
body.hud-fk .qs-main { background: var(--fk-panel); border: 2px solid var(--fk-edge); box-shadow: var(--fk-shadow); color: var(--fk-dim); }
body.hud-fk .qs-qty { background: var(--fk-panel-flat); border-color: var(--fk-edge); color: var(--fk-ink); }
body.hud-fk .qs-toggle, body.hud-fk .qs-settings { background: var(--fk-panel-flat); border-color: var(--fk-edge); color: var(--fk-dim); }
body.hud-fk .qs-toggle.on { background: var(--fk-gold); border-color: var(--fk-gold); color: #150e05; }

/* ── 6 · thumb-arc action dock (bottom-right) ──────────────────────────────── */
/* minimap.js hides the dock (.mm-hide) whenever the map opens. In Field Kit the dock holds
   the explore dial and chat and the map never overlaps it, so that must never apply — stated
   in CSS as well as JS so a stale cached minimap.js can't take the explore button away. */
body.hud-fk #map-controls.mm-hide { display: flex; }
body.hud-fk #map-controls {
  right: var(--fk-right);
  bottom: calc(clamp(12px, calc(3 * var(--u)), 24px) + var(--safe-pad));
  flex-direction: column; align-items: center;   /* chat sits directly above the dial */
  gap: clamp(7px, calc(1.8 * var(--u)), 14px);
  z-index: 24;
}
body.hud-fk #map-controls .map-btn {
  width: clamp(48px, calc(12 * var(--u)), 88px); height: clamp(48px, calc(12 * var(--u)), 88px);
  border-radius: 50%;
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  box-shadow: var(--fk-shadow); color: var(--fk-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(22px, calc(5.6 * var(--u)), 42px);
  transition: transform .1s;
}
body.hud-fk #map-controls .map-btn:active { transform: scale(.94); background: var(--fk-panel); }
/* the mode button is the primary: bigger, green, gold-ringed, lifted off the row */
body.hud-fk #map-controls .map-btn.wide#btn-mode {
  width: var(--fk-dock); height: var(--fk-dock);
  min-width: 0; padding: 0; border-radius: 50%;
  background: radial-gradient(120% 120% at 40% 25%, #4d8232, #24451a 70%);
  border: 2.5px solid var(--fk-gold);
  box-shadow: 0 0 0 clamp(3px, calc(.8 * var(--u)), 6px) rgba(201,162,39,.13), 0 4px 16px #000b, inset 0 1px 0 #ffffff26;
  color: #f4ecd2; gap: 0;
  margin-bottom: clamp(6px, calc(1.5 * var(--u)), 12px);
}
/* The dial is styled entirely from ui.js's OWN markup (`<span class="mode-live">…</span>
   <small>Offline: …</small>`). ui.js rewrites this button's innerHTML on every status
   update, so anything JS injects here gets wiped and flashes back at full size once a
   second — hence: font-size 0 on the button kills the raw text, ::before supplies the
   icon, and .mode-live is repositioned as the caption. Nothing to fight over. */
body.hud-fk #btn-mode { position: relative; overflow: visible; font-size: 0; }
body.hud-fk #btn-mode::before {
  content: ''; display: block;
  width: clamp(26px, calc(6.6 * var(--u)), 50px); height: clamp(26px, calc(6.6 * var(--u)), 50px);
  background: currentColor;
  -webkit-mask: var(--i-boot) center/contain no-repeat; mask: var(--i-boot) center/contain no-repeat;
}
body.hud-fk #btn-mode.fk-hunt::before { -webkit-mask-image: var(--i-sword); mask-image: var(--i-sword); }
body.hud-fk #btn-mode .mode-live {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(-1 * clamp(13px, calc(3.2 * var(--u)), 24px));
  font-size: clamp(8px, calc(2.1 * var(--u)), 15px); font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--fk-gold-lt);
  text-shadow: 0 1px 3px #000c; white-space: nowrap; pointer-events: none;
}
/* the "Offline: …" second line has no room on a round dial (it stays in the tooltip) */
body.hud-fk #btn-mode small { display: none; }
body.hud-fk #map-controls #btn-install.map-btn.wide { width: auto; border-radius: 999px; padding: 0 clamp(12px, calc(3 * var(--u)), 24px); height: clamp(40px, calc(10 * var(--u)), 72px); font-size: clamp(13px, calc(3.2 * var(--u)), 24px); }
body.hud-fk #map-controls .chat-badge, body.hud-fk #map-controls .menu-dot { border: 1.5px solid #1a160e; }

/* ── 8 · chat / panel skins so the overlays match the new chrome ───────────── */
body.hud-fk #chat, body.hud-fk #panel, body.hud-fk .menu-pop {
  border: 2px solid var(--fk-edge); border-radius: var(--fk-r); box-shadow: var(--fk-shadow);
}

/* ── 9 · keep the world clear on short screens ─────────────────────────────── */
@media (max-height: 620px) {
  /* The region caption is pure decoration on a short screen and goes. The quest tracker does
     NOT: it is the only place the current objective is written down, and hiding it left every
     landscape phone playing the beginner quest with no instructions at all. It shrinks
     instead — one line, no guide text — so the world stays clear without going silent. */
  body.hud-fk #ql-stack .qt-guide { display: none; }
  body.hud-fk #ql-stack .quest-tracker { padding: 5px 9px; max-width: min(52vw, 260px); }
  body.hud-fk #fk-region { display: none; }
}

/* ── 9b · very narrow phones ───────────────────────────────────────────────
   Three pills top-right (online, gold, settings) plus the vitals card is more than a
   320px screen can hold. Drop the build tag, shorten the idle boost pill to "⚡2×" (a
   dimmed pill already reads as empty), and tighten the pills before anything collides. */
@media (max-width: 390px) {
  /* The build tag used to be dropped here for space. It lives in the online pill, which is
     docked on its own row under the vitals card rather than in the crowded top-right cluster,
     so there is room for it — it just tightens instead of disappearing. */
  body.hud-fk #s-online-badge .s-version {
    margin-left: 4px; padding-left: 4px; font-size: .78em; opacity: .7;
  }
  body.hud-fk #s-boost.fk-boost.empty #s-boost-left { display: none; }
  body.hud-fk .fk-pill,
  body.hud-fk #s-online-badge.fk-under-card,
  body.hud-fk #s-boost.fk-boost {
    padding: clamp(4px, calc(1 * var(--u)), 8px) clamp(7px, calc(1.7 * var(--u)), 12px);
    font-size: clamp(11px, calc(2.8 * var(--u)), 18px);
  }
  body.hud-fk #status-bar { max-width: 47vw; }
}

/* ── 10 · landscape ────────────────────────────────────────────────────────
   Android's on-screen nav bar (back/home/recents) runs down one of the long edges
   in landscape and lands directly on the action rail. env(safe-area-inset-*) covers
   it wherever the browser reports the inset, but some devices/modes report 0 while
   still drawing the bar over the page — so enforce a floor in landscape, and pull
   the rail in tighter because vertical room is scarce. */
@media (orientation: landscape) {
  body.hud-fk {
    --fk-right: calc(var(--fk-gap) + max(env(safe-area-inset-right, 0px), 30px));
    --fk-left: calc(var(--fk-gap) + max(env(safe-area-inset-left, 0px), 6px));
  }
  /* the rail must fit between the card and the dock without overflowing a short screen */
  body.hud-fk #bottom-nav { gap: clamp(5px, calc(1.2 * var(--u)), 10px); }
  body.hud-fk #bottom-nav .nav-btn {
    width: clamp(38px, calc(9 * var(--u)), 62px); height: clamp(38px, calc(9 * var(--u)), 62px);
    font-size: clamp(18px, calc(4.4 * var(--u)), 31px);
  }
  body.hud-fk #status-bar { width: min(46vw, clamp(210px, calc(46 * var(--u)), 380px)); }
  /* the mode caption hangs BELOW the dial, so keep the dock off the bottom edge */
  body.hud-fk #map-controls {
    bottom: calc(clamp(18px, calc(4 * var(--u)), 30px) + var(--safe-pad));
    flex-direction: row; align-items: flex-end;   /* chat to the LEFT of explore */
  }
  /* Landscape is short and wide, so spend the horizontal room instead of stacking:
     the minimap dial joins the top row to the right of settings, and chat sits beside
     the explore dial rather than above it. */
  body.hud-fk #minimap.fk-compact {
    --fk-dial: clamp(64px, calc(15 * var(--u)), 104px);
    width: var(--fk-dial) !important; height: var(--fk-dial);
    top: var(--fk-top-in);
  }
  body.hud-fk #fk-top {
    right: calc(var(--fk-right) + clamp(64px, calc(15 * var(--u)), 104px) + clamp(6px, calc(1.5 * var(--u)), 12px));
  }
  /* Landscape is short: sit the menu lower and lay it out in two columns so nine rows
     fit on a 390px-tall screen instead of running off the top. */
  body.hud-fk .menu-pop {
    bottom: calc(var(--safe-pad) + clamp(66px, calc(16 * var(--u)), 116px));
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(5px, calc(1.2 * var(--u)), 9px);
    max-height: calc(100vh - clamp(80px, calc(20 * var(--u)), 150px));
    min-width: clamp(300px, calc(70 * var(--u)), 520px);
  }
  body.hud-fk .menu-pop .menu-item { padding: clamp(8px, calc(2 * var(--u)), 14px) clamp(10px, calc(2.6 * var(--u)), 16px); }

  body.hud-fk #music-pop.settings-pop {
    top: calc(var(--fk-top-in) + clamp(34px, calc(8.5 * var(--u)), 58px));
    max-height: calc(100vh - var(--fk-top-in) - clamp(46px, calc(11 * var(--u)), 80px));
  }

  /* the bottom row must now clear chat + explore, not just explore */
  body.hud-fk #bottom-nav {
    right: calc(var(--fk-right) + var(--fk-dock) + clamp(48px, calc(12 * var(--u)), 88px)
           + clamp(14px, calc(3.6 * var(--u)), 26px));
  }
}

/* ── 11 · overlay chrome: toasts, panels, modals, chat, menus ───────────────
   The overlays were still wearing the old green interface while the HUD had moved
   to warm gold-on-near-black. Most of it comes across for free by re-pointing the
   palette variables the overlays already use (interface.css references these ~250
   times); the rest are surfaces with hard-coded greens that need naming directly. */
body.hud-fk {
  --bg: #14110b;
  --panel: #201b13;
  --panel-2: #2b2419;
  --ink: #f0e8d0;
  --muted: #a89c7c;
  --accent: #e0b653;      /* gold — headings, active states, chips */
  --accent-2: #7fae55;    /* the "progress/positive" green, warmed slightly */
}

/* toasts: gold-bevelled cards that clear the vitals card rather than covering it */
body.hud-fk #notifications {
  /* --hud-h is the vitals card's measured height; clear it AND the card's own top inset,
     with a real gap so a toast never sits on the HP bar. Left-aligned rather than centred,
     and capped so the stack stops short of the minimap dial column on the right — centred
     toasts ran under the dial on every phone and on the smaller tablets. */
  top: calc(var(--fk-top-in) + var(--hud-h, 44px) + clamp(14px, calc(3.4 * var(--u)), 26px));
  left: var(--fk-left); right: auto; transform: none;
  width: min(560px, calc(100vw - var(--fk-left) - var(--fk-right) - var(--fk-dial) - clamp(8px, calc(2 * var(--u)), 16px)));
}
body.hud-fk .toast {
  background: var(--fk-panel);
  border: 2px solid var(--fk-edge);
  border-left: 4px solid var(--fk-gold);
  border-radius: var(--fk-r);
  box-shadow: var(--fk-shadow);
  color: var(--fk-ink);
}
body.hud-fk .toast.good { border-left-color: #7fae55; }
body.hud-fk .toast.warn { border-left-color: var(--danger); }

/* sliding bottom panel (Skills / Inventory / Shop / Character) */
body.hud-fk .panel {
  background: var(--fk-panel);
  border: 2px solid var(--fk-edge); border-bottom: none;
  border-radius: var(--fk-r) var(--fk-r) 0 0;
  box-shadow: 0 -10px 30px #000b;
}
body.hud-fk .panel-head {
  border-bottom: 1px solid var(--fk-edge);
  color: var(--fk-gold-lt); letter-spacing: .4px;
}
body.hud-fk .panel-close,
body.hud-fk .minimap-close { color: var(--fk-dim); }
body.hud-fk .panel-close:active,
body.hud-fk .minimap-close:active { color: var(--fk-gold-lt); }

/* dialogs. The scroll-cue gradients hard-code the old panel green, so they are
   restated here in the new colour — otherwise the top/bottom fades read as a seam. */
body.hud-fk .modal { background: #000000bb; }
body.hud-fk .modal-card {
  border: 2px solid var(--fk-edge); border-radius: var(--fk-r);
  box-shadow: var(--fk-shadow);
  background:
    linear-gradient(var(--panel) 30%, rgba(32, 27, 19, 0)) top / 100% 30px no-repeat,
    linear-gradient(rgba(32, 27, 19, 0), var(--panel) 70%) bottom / 100% 30px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) top / 100% 14px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) bottom / 100% 14px no-repeat;
  background-color: var(--panel);
  background-attachment: local, local, scroll, scroll;
}
/* The parchment readables are deliberately their own thing — but "leave them alone" needs
   saying in CSS, not just in a comment: the rule above is more specific than
   `.modal-card.parchment` in interface.css, so it was painting its dark panel gradient
   straight over the paper and leaving the parchment's dark-brown ink on a near-black card.
   Every readable was affected — NPC quest dialogue, the waystone, notes, plaques. Restate
   the paper here so the skin can't win. */
body.hud-fk .modal-card.parchment {
  border-color: #b9a77c;
  background: linear-gradient(160deg, #efe6cd, #e6d9b8 60%, #ddcfa9);
  background-color: #e6d9b8;
  box-shadow: 0 8px 30px #000c, inset 0 0 60px #c9b88e55;
  color: #3a2f1c;
}
body.hud-fk .modal-card h2 { color: var(--fk-gold-lt); }
body.hud-fk .modal-card.parchment h2 { color: #4a3a20; }

/* Settings popover. It was anchored under the top-LEFT corner, which is where the cog used
   to live — the cog now sits top-right, so the popover has to follow it. It is also tall
   enough to run off a landscape screen, hence the height cap. */
body.hud-fk #music-pop.settings-pop {
  left: auto; right: var(--fk-right); transform: none;
  top: calc(var(--fk-top-in) + clamp(38px, calc(9.5 * var(--u)), 66px));
  bottom: auto;
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  border-radius: var(--fk-r); box-shadow: var(--fk-shadow);
  max-height: calc(100vh - var(--fk-top-in) - clamp(58px, calc(14 * var(--u)), 104px));
  overflow-y: auto; overscroll-behavior: contain;
}
/* client build, footer of the settings popover */
body.hud-fk #music-pop .s-version {
  display: block; width: 100%; margin: clamp(4px, calc(1 * var(--u)), 8px) 0 0;
  text-align: center; color: var(--fk-dim); opacity: .65;
  font-size: clamp(9px, calc(2.2 * var(--u)), 14px); letter-spacing: .4px;
}

/* menu popover */
body.hud-fk .menu-pop {
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  border-radius: var(--fk-r); box-shadow: var(--fk-shadow);
  /* The menu has grown to nine rows; on any short screen it used to run off the top of
     the viewport with no way to reach the items above the fold. */
  max-height: calc(100vh - var(--fk-top-in) - clamp(90px, calc(22 * var(--u)), 170px));
  overflow-y: auto; overscroll-behavior: contain;
}
body.hud-fk .menu-item {
  background: #17130d; border: 1px solid var(--fk-edge);
  border-radius: clamp(9px, calc(2.2 * var(--u)), 14px); color: var(--fk-ink);
}
body.hud-fk .menu-item:active { background: var(--panel-2); border-color: var(--fk-gold); }
body.hud-fk .menu-dot { border-color: #1a160e; }
/* the admin teleport moved out of the dock and into the menu — it must read as a row,
   not as the round dock button it used to be */
body.hud-fk #menu-pop #btn-tp.fk-admin {
  width: auto; height: auto; border-radius: clamp(9px, calc(2.2 * var(--u)), 14px);
  justify-content: flex-start;
  font-size: clamp(16px, calc(4.2 * var(--u)), 28px);
  padding: clamp(12px, calc(3 * var(--u)), 20px) clamp(14px, calc(3.5 * var(--u)), 22px);
}
body.hud-fk #menu-pop #btn-tp.hidden { display: none; }

/* chat */
body.hud-fk .chat {
  background: #17130df7; border: 2px solid var(--fk-edge); border-bottom: none;
  border-radius: var(--fk-r) var(--fk-r) 0 0; box-shadow: 0 -8px 24px #000b;
}
body.hud-fk .chat-head { border-bottom: 1px solid var(--fk-edge); color: var(--fk-gold-lt); }
body.hud-fk .chat-badge { background: var(--fk-gold); color: #17130d; }
body.hud-fk #chat-input {
  background: #100d08; border: 1px solid var(--fk-edge); color: var(--fk-ink);
  border-radius: clamp(8px, calc(2 * var(--u)), 12px);
}
body.hud-fk #chat-input:focus { border-color: var(--fk-gold); outline: none; }

/* small shared furniture that still pointed at the old greens */
body.hud-fk .ubar { background: #100d08; box-shadow: inset 0 0 0 1px #3a3020; }
body.hud-fk .discord-link-panel { background: #17130d; border-color: var(--fk-edge); }
body.hud-fk .inspect-pop,
body.hud-fk #inspect-pop {
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  border-radius: var(--fk-r); box-shadow: var(--fk-shadow);
}

/* ── 12 · full map (dial expanded) ─────────────────────────────────────────
   Tapping the dial swaps it for the classic square minimap. While that is open the
   right-hand captions would sit on top of it, so they stand down. */
body.hud-fk.fk-map-open #fk-region,
body.hud-fk.fk-map-open #ql-stack { display: none; }
body.hud-fk #minimap:not(.fk-compact) {
  border: 2px solid var(--fk-edge); border-radius: clamp(6px, calc(1.5 * var(--u)), 11px);
  box-shadow: 0 8px 30px #000c;
}
body.hud-fk #minimap:not(.fk-compact) .minimap-head {
  background: var(--fk-panel); border-bottom: 1px solid var(--fk-edge);
  color: var(--fk-gold-lt);
}
body.hud-fk #minimap:not(.fk-compact) #minimap-info {
  background: var(--fk-panel); color: var(--fk-dim);
  border-top: 1px solid var(--fk-edge);
}
/* the dial reads as a button */
body.hud-fk #minimap.fk-compact { cursor: pointer; }
body.hud-fk #minimap.fk-compact:active { border-color: var(--fk-gold-lt); }

/* ── Timed-event badge row (field kit) ────────────────────────────────────────
   #event-badges (event-badges.js) holds one pill per currently-active random-start event —
   only present in the DOM while at least one is running. hud-fieldkit.js's placeHudBits()
   lifts the WHOLE container out to #game-screen and pins it at the vitals card's left edge,
   pushing the online pill right by its width — so it reads as sitting to the LEFT of the
   player count rather than hanging off the screen edge. Individual pills inside it are plain
   flex children (interface.css's #event-badges/.evt-badge rules), not separately positioned. */
body.hud-fk #event-badges.fk-badges {
  position: absolute; z-index: 24; margin: 0;
  display: flex; align-items: center; gap: 6px;
  line-height: 1; white-space: nowrap; pointer-events: auto;
  padding: clamp(3px, calc(.8 * var(--u)), 7px) clamp(6px, calc(1.5 * var(--u)), 11px);
  border-radius: 999px;
  background: var(--fk-panel); border: 2px solid var(--fk-edge);
  box-shadow: var(--fk-shadow);
  font-size: clamp(12px, calc(2.9 * var(--u)), 21px);
}