/* ============================================================
   Starfall — “Field tablet & star chart” UI
   A fallen crown, a cold night, one campfire. Chrome is carved
   stone and parchment; the world canvas stays the hero.
   Single memorable element: chamfered stone tablets + serif
   star-chart titles. Everything else stays quiet.
   ============================================================ */

:root {
  --sf-night: #12151d;
  --sf-panel: rgba(15, 19, 29, 0.84);
  --sf-panel-solid: #171d2b;
  --sf-panel-soft: rgba(21, 27, 42, 0.72);
  --sf-ink: #ece4cd;
  --sf-dim: #a9b2c4;
  --sf-faint: #727c90;
  --sf-line-gold: rgba(224, 164, 88, 0.38);
  --sf-line-cool: rgba(169, 178, 196, 0.22);
  --sf-ember: #e0a458;
  --sf-ember-deep: #a96f2e;
  --sf-blood: #d6543b;
  --sf-moss: #8fc27a;
  --sf-river: #6fb6d6;
  --sf-violet: #9a8cff;
  --sf-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sf-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sf-r-s: 4px;
  --sf-r-m: 10px;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sf-night);
  font-family: var(--sf-font-ui);
  color: var(--sf-ink);
  -webkit-font-smoothing: antialiased;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  image-rendering: pixelated;
  z-index: 0;
}

#blit {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  image-rendering: pixelated;
  z-index: 1;
  pointer-events: none;
}

/* hidden log stays off-screen for audit tooling */
#log {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* visible focus for keyboard players */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sf-ember);
  outline-offset: 2px;
}

/* ============================================================
   HUD — left vitals tablet
   ============================================================ */
#hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 252px;
  max-width: 320px;
  padding: 10px 12px 9px;
  color: var(--sf-dim);
  font-size: 12px;
  user-select: none;
  pointer-events: none;
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-left: 3px solid var(--sf-ember);
  border-radius: var(--sf-r-s);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-row.hud-vitals {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.bar {
  display: grid;
  grid-template-columns: 44px 1fr 30px;
  align-items: center;
  gap: 8px;
}

.bar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sf-faint);
  text-align: right;
}

.bar-track {
  height: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(169, 178, 196, 0.28);
  border-radius: 99px;
}

.bar-track.critical-low {
  border-color: rgba(214, 84, 59, 0.7);
  animation: bar-pulse-danger 0.9s var(--sf-ease) infinite;
}
@keyframes bar-pulse-danger {
  0%, 100% { box-shadow: 0 0 0 rgba(214, 84, 59, 0); }
  50% { box-shadow: 0 0 10px rgba(214, 84, 59, 0.65); }
}

.bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  transition: width 0.2s var(--sf-ease);
}

#bar-hp { background: var(--sf-blood); }
#bar-hunger { background: var(--sf-ember); }
#bar-thirst { background: var(--sf-river); }
#bar-stamina { background: var(--sf-moss); }

.bar-num {
  font-size: 10px;
  color: var(--sf-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* boss thread — thin violet line under vitals */
.boss-row { gap: 8px; }
.boss-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sf-violet);
  width: 44px;
  text-align: right;
}
.boss-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(154, 140, 255, 0.4);
  border-radius: 99px;
  overflow: hidden;
}
.boss-fill {
  height: 100%;
  background: var(--sf-violet);
}

/* chip field — quiet tags, not rainbow buttons */
.inv-row {
  flex-wrap: wrap;
  gap: 5px;
}

.inv-chip {
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--sf-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sf-line-cool);
  border-radius: var(--sf-r-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-wood, .inv-stone, .inv-food { color: var(--sf-dim); }
.inv-chip.inv-frag {
  color: var(--sf-ember);
  border-color: var(--sf-line-gold);
}
.inv-chip.weather { color: #cfe2f5; }
.inv-chip.weapon {
  color: var(--sf-ink);
  border-color: var(--sf-line-gold);
  background: rgba(224, 164, 88, 0.1);
}
.inv-chip.gold {
  color: var(--sf-ember);
  border-color: var(--sf-line-gold);
  background: rgba(224, 164, 88, 0.08);
  font-weight: 600;
}
.inv-chip.level {
  color: var(--sf-moss);
  border-color: rgba(143, 194, 122, 0.4);
}
.inv-chip.block {
  color: #bcd2ff;
  border-color: rgba(120, 170, 255, 0.55);
  background: rgba(40, 70, 130, 0.45);
}
.inv-chip.coop { color: var(--sf-ink); }

.inv-clock {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--sf-ink);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--sf-line-cool);
  border-radius: var(--sf-r-s);
  font-variant-numeric: tabular-nums;
}

.hud-hint { display: none; }

.speed-meter {
  display: inline-block;
  width: 64px;
  height: 5px;
  background: rgba(169, 178, 196, 0.18);
  border-radius: 99px;
  overflow: hidden;
}
.speed-meter > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--sf-dim);
}
#fps, #hud-weapon, #hud-room { pointer-events: auto; cursor: pointer; }

/* Details tab: collapses the chip field + debug row into vitals only.
   Desktop keeps the old FPS-tap shortcut working through the same class. */
#hud-toggle {
  display: none;
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 44px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--sf-ember);
  background: var(--sf-panel-solid);
  border: 1px solid var(--sf-line-gold);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 12;
}
body.hud-collapsed #hud-chips,
body.hud-collapsed #hud-debug { display: none; }
body.hide-debug #hud-debug { display: none; }

/* ============================================================
   Quest ribbon — top center oath
   ============================================================ */
#quest {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: min(520px, 60vw);
  padding: 7px 14px 7px 12px;
  font-family: var(--sf-font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-left: 3px solid var(--sf-ember);
  border-radius: var(--sf-r-s);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Right dock — tools, minimap, legend
   ============================================================ */
#invbtn, #codexbtn, #help, #gear {
  position: fixed;
  top: 14px;
  z-index: 19;
  width: 38px;
  height: 38px;
  font-size: 16px;
  line-height: 1;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s var(--sf-ease), transform 0.1s var(--sf-ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#gear { right: 14px; }
#help { right: 58px; font-weight: 700; }
#invbtn { right: 102px; }
#codexbtn { right: 146px; }
#invbtn:hover, #codexbtn:hover, #help:hover, #gear:hover,
#invbtn.active, #codexbtn.active {
  border-color: var(--sf-ember);
  transform: translateY(-1px);
}

#minimap {
  position: fixed;
  top: 60px;
  right: 14px;
  width: 132px;
  height: 132px;
  z-index: 16;
  image-rendering: pixelated;
  pointer-events: none;
  background: #0a0e17;
  border: 1px solid var(--sf-line-cool);
  border-radius: var(--sf-r-m);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.mm-legend {
  position: fixed;
  top: 200px;
  right: 14px;
  width: 132px;
  z-index: 16;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  padding: 6px 7px;
  font-family: var(--sf-font-ui);
  font-size: 9px;
  line-height: 1.4;
  color: var(--sf-dim);
  background: rgba(10, 14, 23, 0.72);
  border: 1px solid var(--sf-line-cool);
  border-radius: 6px;
  pointer-events: none;
}
.mm-legend .leg { display: inline-flex; align-items: center; gap: 4px; }
.mm-legend .leg i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ============================================================
   Weapon belt — bottom left
   ============================================================ */
#weaponbar {
  position: fixed;
  z-index: 11;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  user-select: none;
}
body.desktop #weaponbar { left: 14px; bottom: 14px; max-width: 420px; }
body.mobile #weaponbar {
  left: 50%;
  transform: translateX(-50%);
  bottom: 168px;
  justify-content: center;
}
.wslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 46px;
  padding: 6px 7px 5px;
  font-size: 11px;
  color: var(--sf-dim);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-bottom: 2px solid var(--sf-line-cool);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s var(--sf-ease), color 0.15s var(--sf-ease);
}
body.mobile .wslot { min-width: 52px; min-height: 52px; }
.wslot .wicon { font-size: 17px; line-height: 1.1; }
.wslot .wlabel { font-size: 9px; letter-spacing: 0.03em; color: var(--sf-faint); }
.wslot.locked { opacity: 0.32; filter: grayscale(1); cursor: default; }
.wslot.owned { color: var(--sf-dim); }
.wslot.equipped {
  color: var(--sf-ink);
  border-color: var(--sf-line-gold);
  border-bottom: 2px solid var(--sf-ember);
}
.wslot.equipped .wlabel { color: var(--sf-ember); }

/* ============================================================
   Toasts, prompts, compass, vignette
   ============================================================ */
#toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.toast {
  max-width: 320px;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-left: 3px solid var(--sf-dim);
  border-radius: var(--sf-r-s);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.22s var(--sf-ease);
}
.toast.toast-wood { border-left-color: var(--sf-ember-deep); }
.toast.toast-stone { border-left-color: var(--sf-dim); }
.toast.toast-food { border-left-color: #d98a63; }
.toast.toast-gold { border-left-color: var(--sf-ember); }
.toast.toast-dmg { border-left-color: var(--sf-blood); }
.toast.toast-info { border-left-color: var(--sf-river); }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

#altar-prompt, #anvil-prompt, #water-prompt {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  font-size: 13px;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-gold);
  border-radius: var(--sf-r-s);
  padding: 8px 14px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
#altar-prompt { bottom: 70px; }
#altar-prompt b { color: var(--sf-ember); }
#anvil-prompt, #water-prompt { bottom: 106px; border-color: var(--sf-line-cool); }
#water-prompt { border-color: rgba(111, 182, 214, 0.5); }
#altar-prompt.hidden, #anvil-prompt.hidden, #water-prompt.hidden { display: none; }

#buildhint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-gold);
  border-radius: 6px;
  pointer-events: none;
}
#buildhint.hidden { display: none; }
#buildhint b { color: var(--sf-ember); }

#touch-build {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-gold);
  border-radius: 6px;
  pointer-events: none;
  text-align: center;
}
#touch-build.hidden { display: none; }

#compass {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 18;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1d2538, #0d1119 72%);
  border: 1px solid var(--sf-line-cool);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#compass.hidden { display: none; }
#compass-needle {
  position: absolute;
  width: 3px;
  height: 26px;
  top: 7px;
  left: calc(50% - 1.5px);
  background: linear-gradient(to bottom, var(--sf-ember) 0 50%, rgba(224, 164, 88, 0) 50%);
  border-radius: 2px;
  transform-origin: 50% 100%;
}
#compass::after {
  content: "N";
  position: absolute;
  top: 3px;
  font-family: var(--sf-font-display);
  font-size: 9px;
  color: var(--sf-faint);
}
#compass-label {
  position: absolute;
  bottom: 6px;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--sf-faint);
}

#vignette {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  box-shadow: inset 0 0 140px 40px rgba(170, 20, 10, 0.5);
  background: radial-gradient(ellipse at center, rgba(170, 0, 0, 0) 55%, rgba(170, 0, 0, 0.26) 100%);
}
#vignette.hidden { display: none; }

#coop-tags {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.coop-tag {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 1px 7px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sf-ink);
  background: rgba(15, 19, 29, 0.8);
  border: 1px solid var(--sf-line-gold);
  border-radius: 99px;
  white-space: nowrap;
}

/* ============================================================
   Tablets — boot, multiplayer, settings, help, codex, death
   Shared stone-tablet treatment (the one memorable element).
   Chamfered top corners, parchment serif titles, single gold rule.
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 10, 16, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}
.overlay.hidden { display: none; }

#overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 16, 0.66);
  pointer-events: none;
}
#overlay.hidden { display: none; }

#overlay-box,
.overlay #overlay-box {
  width: min(560px, calc(100vw - 40px));
  max-height: 84vh;
  overflow-y: auto;
  text-align: left;
  color: var(--sf-ink);
  background: #171d2b;
  background: linear-gradient(180deg, #1b2233, #141a28);
  border: 1px solid var(--sf-line-cool);
  border-top: 2px solid var(--sf-ember);
  border-radius: 3px 3px var(--sf-r-m) var(--sf-r-m);
  padding: 26px 30px 24px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

#overlay-box h2,
.overlay #overlay-box h2 {
  margin: 0 0 4px;
  font-family: var(--sf-font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.12em;
  color: var(--sf-ink);
  text-align: center;
}
#overlay-box h2 + p,
.overlay #overlay-box h2 + p {
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--sf-font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--sf-dim);
}

/* thin star rule under every tablet title */
#overlay-box h2::after,
.overlay #overlay-box h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 10px auto 4px;
  background: linear-gradient(90deg, transparent, var(--sf-ember), transparent);
}

#overlay-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sf-dim);
  text-align: center;
}

#overlay.dead #overlay-box h2 { color: #e88a75; }
#overlay.win #overlay-box h2 { color: var(--sf-moss); }
#overlay.ending #overlay-box { border-top-color: var(--sf-ember); }
#overlay.ending #overlay-box h2 { color: var(--sf-ember); }

.menu-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.menu-btn {
  font-family: var(--sf-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sf-ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sf-line-cool);
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s var(--sf-ease), background 0.15s var(--sf-ease), transform 0.08s var(--sf-ease);
}
.menu-btn:hover {
  border-color: var(--sf-ember);
  background: rgba(224, 164, 88, 0.12);
}
.menu-btn:active { transform: translateY(1px); }
.menu-btn.disabled, .menu-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.5);
  pointer-events: none;
}
.menu-btn.small { font-size: 12px; font-weight: 500; padding: 7px 12px; }

/* boot menu: primary action leads, rest follows quietly */
#bootmenu #overlay-box { width: min(600px, calc(100vw - 40px)); }
#bootmenu h2 {
  font-size: 40px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
#bootmenu .menu-btns { gap: 8px; }
#btn-new {
  border-color: var(--sf-line-gold);
  background: rgba(224, 164, 88, 0.14);
}
#btn-new:hover { background: rgba(224, 164, 88, 0.22); }
#bootmenu .set-row {
  justify-content: center;
  border: none;
  padding: 4px 0;
}
#boot-seed, #mp-name, #mp-server, #mp-code {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--sf-line-cool) !important;
  border-radius: 6px !important;
  color: var(--sf-ink) !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}
#boot-seed::placeholder, #mp-name::placeholder, #mp-code::placeholder { color: var(--sf-faint); }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 280px;
  margin: 0;
  padding: 10px 2px;
  font-size: 13px;
  color: var(--sf-dim);
  border-bottom: 1px solid rgba(169, 178, 196, 0.14);
}
.set-row:last-of-type { border-bottom: none; }

#settings input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 4px;
  border-radius: 99px;
  background: rgba(169, 178, 196, 0.3);
  outline: none;
  cursor: pointer;
}
#settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sf-ember);
  border: 2px solid #10141d;
  box-shadow: 0 0 0 1px var(--sf-line-gold);
}
#settings input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sf-ember);
  border: 2px solid #10141d;
}
#settings select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--sf-line-cool);
  border-radius: 6px;
  color: var(--sf-ink);
  padding: 6px 9px;
  font-size: 13px;
}
#settings input[type="checkbox"] {
  accent-color: var(--sf-ember);
  width: 16px;
  height: 16px;
}

/* help: kbd keys + readable prose */
#help-panel #overlay-box { width: min(640px, calc(100vw - 40px)); }
#help-panel h2 {
  font-size: 20px;
  letter-spacing: 0.1em;
}
#help-panel .help-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
}
#help-panel .help-grid .k {
  font-weight: 600;
  font-size: 12px;
  color: var(--sf-ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sf-line-cool);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  white-space: nowrap;
  align-self: start;
}
#help-panel .help-grid .d { color: var(--sf-dim); }
#help-panel .help-note { color: var(--sf-faint); font-size: 12px; line-height: 1.6; }
#help-panel .help-note b { color: var(--sf-dim); font-weight: 600; }

/* ============================================================
   Side drawer — inventory, build, crafting
   ============================================================ */
#inventory {
  position: fixed;
  top: 60px;
  right: 14px;
  z-index: 18;
  width: 272px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 14px 14px 12px;
  font-size: 13px;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-radius: var(--sf-r-m);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scrollbar-width: thin;
  scrollbar-color: var(--sf-faint) transparent;
}
#inventory.hidden { display: none; }
#inventory h3 {
  margin: 2px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sf-faint);
  border-bottom: 1px solid rgba(169, 178, 196, 0.16);
  padding-bottom: 6px;
}
#inventory h3:not(:first-child) { margin-top: 14px; }

.inv-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 2px;
  border-radius: 4px;
}
.inv-item .nm { color: var(--sf-dim); font-size: 12px; }
.inv-item .ct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-item .ct.zero { color: #4d5666; font-weight: 400; }
#inv-salves { float: right; color: #e8a4c4; font-weight: 400; }
.craft-note { font-size: 12px; color: var(--sf-faint); padding: 4px 0; line-height: 1.5; }

.recipe {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(169, 178, 196, 0.18);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s var(--sf-ease), background 0.15s var(--sf-ease);
}
.recipe:hover { border-color: var(--sf-line-gold); background: rgba(224, 164, 88, 0.07); }
.recipe.selected { border-color: rgba(143, 194, 122, 0.6); background: rgba(143, 194, 122, 0.08); }
.recipe.locked { opacity: 0.45; }
.recipe .rk {
  font-size: 11px;
  font-weight: 700;
  color: var(--sf-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sf-line-cool);
  border-radius: 4px;
  padding: 1px 7px;
}
.recipe .rl { color: var(--sf-ink); font-size: 12px; }
.recipe .rc { font-size: 11px; color: var(--sf-faint); text-align: right; }

/* codex */
.codex-head {
  font-family: var(--sf-font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--sf-ember);
  margin-bottom: 10px;
  text-align: center;
}
.codex-note { color: var(--sf-faint); font-style: italic; text-align: center; }
.codex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 56vh; overflow-y: auto; }
.codex-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sf-line-cool);
  border-top: 2px solid var(--sf-line-cool);
  border-radius: 6px;
  padding: 9px 11px;
}
.codex-card.boss { border-top-color: var(--sf-blood); }
.ck-name { font-weight: 600; font-size: 13px; color: var(--sf-ink); margin-bottom: 4px; }
.ck-stats { color: var(--sf-ember); font-size: 12px; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.ck-beh { color: var(--sf-dim); font-size: 12px; line-height: 1.45; margin-bottom: 5px; }
.ck-drops { color: var(--sf-faint); font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12); white-space: nowrap; }
.codex-card .tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(169, 178, 196, 0.16); color: var(--sf-dim); margin-left: 4px; }
.codex-card .tag.boss { background: rgba(214, 84, 59, 0.22); color: #f0a390; }

/* town transition */
#town-transition {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(32, 42, 68, 0.6), rgba(6, 9, 15, 0.92));
}
#town-transition.hidden { display: none; }
.tt-card { width: min(400px, 80vw); text-align: center; color: var(--sf-ink); }
.tt-card h2 {
  margin: 0 0 14px;
  font-family: var(--sf-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--sf-ink);
}
.tt-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--sf-line-gold);
  overflow: hidden;
}
#tt-fill { height: 100%; width: 0%; background: var(--sf-ember); transition: width 0.12s linear; }
.tt-card p { margin: 12px 0 0; font-size: 12px; color: var(--sf-faint); }
.tt-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(224, 164, 88, 0.25);
  border-top-color: var(--sf-ember);
  animation: tt-spin 0.9s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }

/* touch */
#touch {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px;
  pointer-events: none;
}
#touch.hidden { display: none; }
.touch-actions {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 6px;
  pointer-events: auto;
  margin-left: auto;
  align-content: end;
}
#joystick {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 116px;
  height: 116px;
  z-index: 16;
  border-radius: 50%;
  background: rgba(15, 19, 29, 0.5);
  border: 1px solid var(--sf-line-cool);
  pointer-events: auto;
  touch-action: none;
}
#joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(224, 164, 88, 0.35);
  border: 1px solid var(--sf-ember);
  pointer-events: none;
}
.tbtn {
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  font-size: 15px;
  color: var(--sf-ink);
  background: var(--sf-panel);
  border: 1px solid var(--sf-line-cool);
  border-radius: 10px;
  user-select: none;
  touch-action: none;
}
.tbtn-icon { font-size: 16px; line-height: 1; }
.tbtn-label { font-size: 8px; letter-spacing: 0.04em; color: var(--sf-faint); line-height: 1; }
.tbtn.pressed { border-color: var(--sf-ember); background: rgba(224, 164, 88, 0.2); }

/* fallback + vulkan notice */
#fallback {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sf-ink);
  background: var(--sf-night);
  padding: 24px;
}
#fallback h1 { margin: 0 0 8px; font-family: var(--sf-font-display); font-weight: 500; }
#fallback p { margin: 4px 0; max-width: 480px; color: var(--sf-dim); }

#vulkanNotice {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: calc(100% - 24px);
  max-width: 560px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sf-ink);
  background: var(--sf-panel-solid);
  border: 1px solid var(--sf-line-cool);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}
#vulkanNotice .vn-body { flex: 1; }
#vulkanNotice code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--sf-ember);
  word-break: break-all;
}
#vulkanNotice .vn-hint { color: var(--sf-faint); }
#vulkanNotice #vnClose { background: none; border: none; color: var(--sf-faint); font-size: 20px; cursor: pointer; }
#vulkanNotice #vnClose:hover { color: #fff; }

/* ============================================================
   Responsive + motion preferences
   ============================================================ */
/* Legacy narrow-window tweaks, superseded by the phone system below.
   Kept so small desktop windows still collapse gracefully. */
body.mobile #hud { min-width: 0; max-width: 62vw; padding: 8px 10px; font-size: 11px; }
body.mobile .hud-row.inv-row { max-width: 58vw; }
body.mobile #hud-coords, body.mobile #hud-mobs { display: none; }

/* ============================================================
   Responsive: the phone keeps vitals + quest + one-tap actions;
   everything else docks out of the way. Touch targets stay >= 44px.
   ============================================================ */
body.mobile #hud {
  min-width: 0;
  width: min(300px, 64vw);
  max-width: 64vw;
  padding: 8px 10px;
  font-size: 11px;
  gap: 6px;
}
body.mobile .hud-row.inv-row { max-width: 100%; gap: 4px; }
body.mobile #hud-coords, body.mobile #hud-mobs, body.mobile #hud-seed { display: none; }
/* Phones get the collapse tab; tablets in landscape keep full detail. */
body.mobile #hud-toggle { display: block; }
/* Coarse pointers: collapse chips by default is the JS default; CSS just
   makes the collapsed tablet read clean at phone widths. */
body.mobile.hud-collapsed #hud { width: auto; min-width: 0; }

@media (max-width: 700px) and (orientation: portrait) {
  /* Portrait phones (the landscape dock below overrides for short +
     wide screens). */
  #hud {
    min-width: 0;
    width: min(280px, calc(100vw - 116px));
    max-width: calc(100vw - 116px);
    gap: 6px;
    padding: 8px 32px 8px 10px;
    box-sizing: border-box;
  }
  #hud-toggle { display: block; }
  .bar { grid-template-columns: 34px 1fr 26px; gap: 6px; }
  .bar-track { height: 10px; }
  .bar-label { font-size: 9px; }
  .bar-num { font-size: 11px; width: 26px; }
  .inv-chip { font-size: 11px; padding: 3px 7px; }
  .inv-clock { font-size: 11px; }

  /* Right dock: single left-hand column, clear of the touch deck and
     the weapon belt. Bottom-anchored so it never collides with the
     top HUD tablet or the minimap on short screens. */
  #invbtn, #codexbtn, #help, #gear {
    top: auto;
    left: 12px;
    right: auto;
    width: 48px;
    height: 48px;
    font-size: 19px;
    border-radius: 12px;
  }
  #gear { bottom: calc(300px + env(safe-area-inset-bottom, 0px)); }
  #help { bottom: calc(244px + env(safe-area-inset-bottom, 0px)); }
  #invbtn { bottom: calc(188px + env(safe-area-inset-bottom, 0px)); }
  #codexbtn { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }

  #quest {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 10px;
    transform: none;
    width: 76px;
    max-width: 76px;
    font-size: 10px;
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 6px 8px;
  }
  #minimap { width: 76px; height: 76px; top: auto; bottom: calc(300px + env(safe-area-inset-bottom, 0px)); right: 10px; }
  .mm-legend { display: none; }
  #compass { display: none !important; }
  #inventory {
    top: auto;
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    left: auto;
    width: min(300px, calc(100vw - 20px));
    max-height: 44vh;
    font-size: 13px;
  }
  .recipe { padding: 9px 10px; }
  .recipe .rl { font-size: 13px; }
  #overlay-box, .overlay #overlay-box {
    width: calc(100vw - 20px);
    max-height: 86vh;
    padding: 20px 18px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .menu-btns { gap: 10px; }
  .menu-btn { font-size: 14px; padding: 12px 16px; min-height: 44px; }
  .menu-btn.small { font-size: 13px; padding: 10px 14px; min-height: 44px; }
  #bootmenu h2 { font-size: 30px; }
  #bootmenu .menu-btns .menu-btn { flex: 1 1 40%; }
  #help-panel .help-grid { grid-template-columns: 1fr; gap: 2px; }
  #help-panel .help-grid .k { justify-self: start; }
  #help-panel .help-grid .d { margin-bottom: 8px; }
  /* Prompts stack above the touch deck instead of under thumbs. */
  #toasts { bottom: calc(210px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); }
  .toast { font-size: 13px; max-width: none; width: 100%; text-align: center; }
  #buildhint { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); font-size: 12px; max-width: calc(100vw - 24px); white-space: normal; }
  #touch-build { top: calc(52px + env(safe-area-inset-top, 0px)); font-size: 12px; max-width: calc(100vw - 24px); white-space: normal; }
  #altar-prompt { bottom: calc(250px + env(safe-area-inset-bottom, 0px)); font-size: 12px; max-width: calc(100vw - 24px); white-space: normal; }
  #anvil-prompt, #water-prompt { bottom: calc(292px + env(safe-area-inset-bottom, 0px)); font-size: 12px; max-width: calc(100vw - 24px); white-space: normal; }
  /* Touch deck: joystick bottom-left, weapon belt above it, action
     pads bottom-right. Three zones, no overlaps at 390px wide. */
  #touch { padding: 10px; gap: 10px; justify-content: flex-end; align-items: flex-end; }
  #joystick { width: 128px; height: 128px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #joy-knob { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  body.mobile #weaponbar {
    left: 12px;
    right: auto;
    transform: none;
    bottom: calc(152px + env(safe-area-inset-bottom, 0px));
    max-width: 124px;
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: flex-start;
    gap: 4px;
    z-index: 11;
  }
  body.mobile.hud-collapsed #weaponbar,
  body.mobile.hide-debug #weaponbar {
    display: none;
  }
  body.mobile .wslot { min-width: 56px; min-height: 56px; flex: 0 0 auto; }
  body.mobile .wslot .wicon { font-size: 17px; }
  body.mobile .wslot .wlabel { font-size: 8px; }
  /* Portrait phone: belt padding only (positioning lives on the base
     portrait rule above); short-landscape docks it bottom-center below. */
  body.mobile #weaponbar {
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body.mobile #weaponbar::-webkit-scrollbar { display: none; }
  .touch-actions {
    grid-template-columns: repeat(3, 56px);
    grid-auto-flow: row;
    gap: 8px;
    max-height: 30vh;
    overflow-y: auto;
    padding: 2px;
    margin-left: 0;
  }
  .tbtn { width: 56px; height: 56px; border-radius: 12px; }
  .tbtn-icon { font-size: 20px; }
  .tbtn-label { font-size: 9px; }
  .codex-grid { grid-template-columns: 1fr; }
  #vulkanNotice { top: calc(8px + env(safe-area-inset-top, 0px)); font-size: 12px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  /* Short landscape phones: weapon belt docks bottom-center as a 2-row
     grid clear of the HUD tablet (left), the touch pads (bottom) and the
     minimap (right). Applies to real touch phones, not narrow desktops. */
  body.mobile #hud { width: auto; min-width: 0; max-width: 46vw; padding: 6px 32px 6px 8px; gap: 4px; box-sizing: border-box; }
  body.mobile.hud-collapsed #hud { max-width: 200px; }
  body.mobile .hud-row.inv-row { max-width: 100%; }
  body.mobile .bar { grid-template-columns: 30px 1fr 24px; gap: 5px; }
  body.mobile .bar-track { height: 8px; }
  body.mobile #quest { top: calc(8px + env(safe-area-inset-top, 0px)); font-size: 11px; -webkit-line-clamp: 1; }
  body.mobile #weaponbar, body.mobile.hud-collapsed #weaponbar {
    display: flex;
    left: auto;
    right: 12px;
    transform: none;
    /* Right-docked above the touch deck: the deck's right column of pads
       ends at 132px from the bottom, so the belt stacks directly above it
       and never slides under the left-hand HUD tablet. */
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    max-width: 40vw;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    gap: 4px;
  }
  body.mobile .wslot { min-width: 48px; min-height: 44px; padding: 4px 5px; }
  body.mobile .wslot .wicon { font-size: 16px; }
  body.mobile .wslot .wlabel { display: none; }
  body.mobile #invbtn, body.mobile #codexbtn, body.mobile #help, body.mobile #gear {
    left: 12px;
    right: auto;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
  body.mobile #gear { bottom: calc(276px + env(safe-area-inset-bottom, 0px)); }
  body.mobile #help { bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  body.mobile #invbtn { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
  body.mobile #codexbtn { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  body.mobile #minimap { width: 72px; height: 72px; top: auto; bottom: calc(276px + env(safe-area-inset-bottom, 0px)); }
  body.mobile .touch-actions {
    grid-template-columns: repeat(6, 52px);
    max-height: 26vh;
  }
  body.mobile .tbtn { width: 52px; height: 52px; }
  body.mobile .tbtn-label { display: none; }
  body.mobile #joystick { width: 104px; height: 104px; }
  body.mobile #joy-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  body.mobile #toasts { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.mobile #inventory { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); max-height: 52vh; }
  .overlay { align-items: flex-end; padding: 10px; }
  #overlay-box, .overlay #overlay-box { max-height: 92vh; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  #hud { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
  #touch { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #joystick { bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
  #compass { bottom: max(14px, env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); }
  #gear { right: max(14px, env(safe-area-inset-right)); }
  #minimap { right: max(14px, env(safe-area-inset-right)); }
  .mm-legend { right: max(14px, env(safe-area-inset-right)); }
  #inventory { right: max(14px, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #toasts .toast { animation: none; }
}