/* ---------------------------------------------------------------------------
   DROOK'S WORLD — game furniture. Painted paper, ink lines, chunky lettering.
   --------------------------------------------------------------------------- */

:root {
  --ink: #241f1c;
  --paper: #f6efe1;
  --paper-2: #fbf5e8;
  --sky: #a9c8e8;
  --warm: #fbe7c6;
  --hub: #e8453c;
  --shadow: 0 4px 0 rgba(36, 31, 28, 0.9);
  --ring: 3px solid var(--ink);
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--warm);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}

[hidden] { display: none !important; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.65em;
  height: 1.65em;
  padding: 0 0.35em;
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 6px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

/* ── loading ─────────────────────────────────────────────── */
#loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: linear-gradient(170deg, var(--sky), var(--warm));
  transition: opacity 0.5s ease, visibility 0.5s;
}
#loading.hidden { opacity: 0; visibility: hidden; }
.load-inner { text-align: center; width: min(300px, 78vw); }
.load-planet {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
}
.lp-core, .lp-ring {
  position: absolute;
  border-radius: 50%;
}
.lp-core {
  inset: 12px;
  background: radial-gradient(circle at 36% 30%, #cfe6d3, #7fb069 62%, #5f9150);
  border: 3px solid var(--ink);
}
.lp-ring {
  inset: 0;
  border: 3px dashed rgba(36, 31, 28, 0.45);
  animation: spin 5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#load-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.load-bar {
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
#load-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width 0.3s ease;
}

/* ── title ───────────────────────────────────────────────── */
#title {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
  background: rgba(20, 32, 46, 0.34);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
#title.open { opacity: 1; visibility: visible; }
#title.gone { display: none; }

.title-card {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(22px, 4vw, 38px);
  background: var(--paper);
  border: var(--ring);
  border-radius: 22px;
  box-shadow: 0 10px 0 rgba(36, 31, 28, 0.85), 0 30px 60px rgba(20, 30, 40, 0.35);
  text-align: center;
  animation: pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes pop {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.title-kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.title-logo {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 4.1rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--paper-2);
  text-shadow:
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    0 8px 0 var(--ink), 0 12px 0 rgba(36, 31, 28, 0.35);
}
.title-logo .apos { color: var(--hub); -webkit-text-stroke: 0; }
.title-blurb {
  margin: 0 auto 22px;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.55;
}
.title-blurb strong { border-bottom: 3px solid var(--hub); }

#start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 0 #6f5f52;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s;
}
#start:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #6f5f52; background: #35302b; }
#start:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f5f52; }
#start svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 24px 0 18px;
  padding: 16px 0 0;
  border-top: 2px dashed rgba(36, 31, 28, 0.25);
  list-style: none;
}
.hints li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
}
.hints span { opacity: 0.75; }
.title-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  opacity: 0.55;
}

/* ── HUD ─────────────────────────────────────────────────── */
#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease 0.15s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.playing #hud { opacity: 1; }

/* checklist */
#orderboard {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 216px;
  padding: 12px 13px 11px;
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
#orderboard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ck-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
#ck-count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-2);
}
.ck-bar {
  height: 7px;
  margin-bottom: 10px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
#ck-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
#order-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ck { display: flex; align-items: center; gap: 8px; }
.ck-box {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  background: var(--paper-2);
  transition: background 0.25s ease;
}
.ck-box svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--paper-2);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.35s ease 0.1s;
}
.ck.done .ck-box { background: var(--accent); }
.ck.done .ck-box svg { stroke-dashoffset: 0; }
.ck-text { display: grid; line-height: 1.15; }
.ck-name { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.02em; }
.ck-sub { font-size: 0.68rem; opacity: 0.62; }
.ck.done .ck-name, .ck.done .ck-sub { opacity: 0.42; text-decoration: line-through; }

/* minimap + sound */
#topright {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  justify-items: end;
  gap: 10px;
}
#minimap {
  width: 108px;
  height: 108px;
  padding: 5px;
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow);
}
#minimap-svg { width: 100%; height: 100%; display: block; }
#sound-toggle {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#sound-toggle.muted { opacity: 0.55; }
#sound-toggle:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(36,31,28,0.9); }

/* interaction prompt */
#prompt {
  --accent: var(--hub);
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 14px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#prompt.show { opacity: 1; transform: translate(-50%, 0); }
#prompt::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--accent);
  border-radius: 8px 0 0 8px;
}
#prompt kbd { margin-left: 5px; }

/* controls hint */
#controls-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  max-width: 360px;
  padding: 9px 12px;
  background: rgba(246, 239, 225, 0.84);
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-size: 0.72rem;
  transition: opacity 0.6s ease;
}
#controls-hint.faded { opacity: 0.3; }
#controls-hint span { display: inline-flex; align-items: center; gap: 4px; }

/* toast */
#toast {
  position: absolute;
  left: 50%;
  top: 104px;
  transform: translate(-50%, -12px);
  padding: 10px 16px;
  max-width: min(420px, 84vw);
  text-align: center;
  background: var(--ink);
  color: var(--paper-2);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(20, 30, 40, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* touch controls — hidden on pointer devices */
#stick, #touch-actions { display: none; }
body.touch #stick {
  display: block;
  pointer-events: auto;
  position: absolute;
  left: 20px;
  bottom: 26px;
  width: 124px;
  height: 124px;
  border: 3px solid rgba(36, 31, 28, 0.55);
  border-radius: 50%;
  background: rgba(246, 239, 225, 0.42);
  touch-action: none;
}
#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 rgba(36, 31, 28, 0.7);
}
body.touch #touch-actions {
  display: grid;
  gap: 10px;
  pointer-events: auto;
  position: absolute;
  right: 20px;
  bottom: 30px;
}
#touch-actions button {
  width: 74px;
  height: 58px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(36, 31, 28, 0.8);
  cursor: pointer;
}
#touch-actions button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(36, 31, 28, 0.8); }
body.touch #controls-hint { display: none; }
body.touch #prompt { bottom: 168px; }

/* The dialog is a bottom sheet, so the movement controls step aside — but USE
   has to stay: on a phone it's the only way to advance the conversation. */
body.touch.dialog-open #stick,
body.touch.dialog-open #btn-hop,
body.touch.dialog-open #btn-ride,
body.touch.dialog-open #btn-truck { opacity: 0; pointer-events: none; }
body.touch.dialog-open #btn-talk { position: relative; z-index: 46; }
body.touch #stick, body.touch #touch-actions button { transition: opacity 0.2s ease; }

/* ── dialog ──────────────────────────────────────────────── */
#dialog {
  --accent: var(--hub);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0.3s;
}
#dialog.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; cursor: pointer; }
.dlg-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 14px;
  width: min(720px, 100%);
  padding: 14px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow), 0 18px 40px rgba(20, 30, 40, 0.28);
}
.dlg-inner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--accent);
  border-radius: 12px 0 0 12px;
}
.dlg-portrait {
  width: 74px;
  height: 74px;
  align-self: center;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper-2);
  overflow: hidden;
}
.dlg-portrait svg { width: 100%; height: 100%; display: block; }
.dlg-body { min-width: 0; padding: 2px 0; }
.dlg-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 5px;
}
#dialog-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
#dialog-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--paper-2);
  background: var(--accent);
}
#dialog-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  min-height: 3em;
}
.dlg-next {
  align-self: end;
  display: grid;
  place-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dlg-next.ready { opacity: 1; }
.dlg-next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  animation: nudge 1.1s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ── waffle iron minigame ────────────────────────────────── */
#cooking {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: end center;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0.3s;
}
#cooking.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.cook-panel {
  width: min(520px, 100%);
  padding: 16px 18px 15px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow), 0 20px 44px rgba(20, 30, 40, 0.3);
}
.cook-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
}
.cook-waffle { width: 38px; height: 38px; display: block; }
.cook-waffle svg { width: 100%; height: 100%; display: block; }
#cook-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.86rem;
  line-height: 1.1;
}
#cook-round {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.65;
}
.cook-scores { display: flex; gap: 4px; }
.cook-chip {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-2);
}
.cook-chip.perfect { background: #ffd166; }
.cook-chip.good, .cook-chip.dark { background: #e0a851; }
.cook-chip.burnt, .cook-chip.raw { background: #b9b2a4; }

/* the doneness gauge */
.cook-gauge {
  position: relative;
  height: 34px;
  margin-bottom: 12px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(90deg, #f5e2a8 0%, #e0a851 58%, #8a5a24 86%, #2a2118 100%);
  overflow: hidden;
}
.cook-band {
  position: absolute;
  top: 0;
  bottom: 0;
}
.cook-band.golden { background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 2px rgba(29, 36, 48, 0.35); }
.cook-band.perfect { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px var(--ink); }
.cook-needle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 5px;
  margin-left: -2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.cook-tick {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.cook-tick.raw { left: 8px; color: #7c6a3e; }
.cook-tick.done { left: 50%; transform: translate(-50%, -50%); color: #43301a; }
.cook-tick.burnt { right: 8px; color: #f0e6d2; }

.cook-verdict {
  margin: 0 0 12px;
  min-height: 1.3em;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.cook-verdict.show { opacity: 1; transform: none; }
.cook-verdict.perfect { color: #a06a00; }
.cook-verdict.burnt, .cook-verdict.raw { color: #8a3b2c; }

#cook-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 13px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 5px 0 #6f5f52;
  transition: transform 0.1s, box-shadow 0.1s;
}
#cook-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f5f52; }
#cook-btn kbd { border-color: var(--paper-2); background: transparent; color: var(--paper-2); }
.cook-quit {
  display: block;
  width: 100%;
  padding: 9px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
.cook-quit:hover { background: rgba(29, 36, 48, 0.08); }

/* ── waffle flourishes ───────────────────────────────────── */
.lp-waffle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  animation: waffleSpin 3.4s ease-in-out infinite;
}
@keyframes waffleSpin {
  0%, 100% { transform: rotate(-9deg) scale(1); }
  50% { transform: rotate(9deg) scale(1.09); }
}
.title-waffle {
  margin: -6px 0 10px;
  font-size: 1.9rem;
  line-height: 1;
  animation: waffleSpin 3.4s ease-in-out infinite;
}
.fin-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: -8px 0 18px;
  padding: 9px 15px;
  font-size: 0.86rem;
  font-weight: 600;
  background: #ffeeba;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(29, 36, 48, 0.8);
}
.fin-badge span:first-child { font-size: 1.15rem; }

/* ── venture card ────────────────────────────────────────── */
#venture, #finale {
  /* the per-venture accent is set here at runtime — do NOT redeclare it on
     .vt-card, a local declaration shadows the inherited value */
  --accent: var(--hub);
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
  background: rgba(20, 32, 46, 0.42);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
#venture.open, #finale.open { opacity: 1; visibility: visible; }

.vt-card {
  position: relative;
  width: min(470px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 30px clamp(22px, 4vw, 32px) 26px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 rgba(36, 31, 28, 0.85), 0 28px 60px rgba(20, 30, 40, 0.35);
  animation: pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.vt-stamp {
  position: absolute;
  top: 16px;
  right: 18px;
  transform: rotate(7deg);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 3px solid var(--accent);
  border-radius: 7px;
  opacity: 0.9;
}
.vt-district {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.vt-name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 1.95rem);
  line-height: 1.05;
}
.vt-tagline {
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 5px solid var(--accent);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
}
.vt-facts {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.vt-facts li {
  position: relative;
  padding-left: 24px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.vt-facts li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  background: var(--accent);
}
.vt-link {
  display: block;
  margin-bottom: 10px;
  padding: 12px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 #6f5f52;
  transition: transform 0.12s, box-shadow 0.12s;
}
.vt-link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #6f5f52; }
.vt-link:active { transform: translateY(2px); box-shadow: 0 2px 0 #6f5f52; }
.vt-close, .fin-close {
  display: block;
  width: 100%;
  padding: 11px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.vt-close:hover, .fin-close:hover { background: rgba(36, 31, 28, 0.08); }

/* ── finale ──────────────────────────────────────────────── */
.fin-inner {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(24px, 4vw, 36px);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 10px 0 rgba(36, 31, 28, 0.85), 0 28px 60px rgba(20, 30, 40, 0.35);
  animation: pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.fin-kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.fin-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.02;
}
.fin-lede {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 0.98rem;
  line-height: 1.5;
}
.fin-grid {
  display: grid;
  /* 240px min lands a balanced 2×2 at desktop width rather than 3 + 1 orphan */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.fin-card {
  --accent: var(--hub);
  display: grid;
  gap: 3px;
  padding: 15px 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-left-width: 8px;
  border-left-color: var(--accent);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(36, 31, 28, 0.8);
  transition: transform 0.14s, box-shadow 0.14s;
}
.fin-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(36, 31, 28, 0.8); }
.fin-district {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.fin-name { font-family: var(--font-display); font-size: 1rem; font-weight: 400; }
.fin-tag { font-size: 0.82rem; line-height: 1.35; opacity: 0.8; }
.fin-go {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  filter: brightness(0.72) saturate(1.4);
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  #orderboard { width: 178px; top: 12px; left: 12px; padding: 10px 11px 9px; }
  .ck-sub { display: none; }
  #topright { top: 12px; right: 12px; }
  #minimap { width: 84px; height: 84px; }
  .dlg-inner { grid-template-columns: auto 1fr; padding: 12px 13px; gap: 11px; }
  .dlg-portrait { width: 58px; height: 58px; }
  .dlg-next { position: absolute; right: 12px; bottom: 8px; }
  #dialog-text { font-size: 0.88rem; min-height: 3.4em; }
}

@media (max-width: 420px) {
  #orderboard { width: 152px; }
  .ck-name { font-size: 0.62rem; }
  #minimap { width: 72px; height: 72px; }
}

@media (max-height: 520px) {
  #orderboard { top: 10px; left: 10px; }
  .hints { margin: 14px 0 10px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-ring, .dlg-next svg { animation: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ── order board ─────────────────────────────────────────── */
#order-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper-2);
  white-space: nowrap;
}
#order-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ord {
  --accent: var(--hub);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 8px;
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-left-width: 7px;
  border-left-color: var(--accent);
  border-radius: 9px;
  overflow: hidden;
}
.ord-qty {
  font-family: var(--font-display);
  font-size: 0.86rem;
  line-height: 1;
}
.ord-qty small { font-size: 0.62em; opacity: 0.6; }
.ord-text { display: grid; line-height: 1.15; min-width: 0; }
.ord-name { font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.02em; }
.ord-sub { font-size: 0.63rem; opacity: 0.62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
}
.ord-time.no-clock { opacity: 0.35; }
.ord-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(29, 36, 48, 0.14);
}
.ord-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
}
.ord.urgent { animation: ordPulse 0.8s ease-in-out infinite; }
.ord.urgent .ord-bar-fill { background: #e02c2c; }
.ord.urgent .ord-time { color: #c02020; }
@keyframes ordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 44, 44, 0); }
  50% { box-shadow: 0 0 0 3px rgba(224, 44, 44, 0.35); }
}
.ord.paid { background: #d8f5cf; }
.ord.lost { background: #ffd9d4; }
.ord-empty {
  font-size: 0.68rem;
  line-height: 1.35;
  opacity: 0.6;
  padding: 2px 0;
}

/* ── wallet ──────────────────────────────────────────────── */
#wallet {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 13px;
  background: rgba(246, 239, 225, 0.95);
  border: 3px solid var(--ink);
  border-radius: 13px;
  box-shadow: var(--shadow);
}
.w-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-weight: 600; font-size: 0.84rem; }
.w-glyph { font-size: 0.95rem; }
#wallet-coins.bump { animation: coinBump 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes coinBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); color: #b47500; }
  100% { transform: scale(1); }
}
.tray-pips { display: flex; gap: 3px; }
.pip {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #e0a851;
}
.pip.perfect { background: #ffd166; box-shadow: 0 0 0 2px #fff3c4; }
.pip.more { background: var(--paper-2); font-family: var(--font-mono); font-size: 0.52rem; }

/* ── endless hud & receipt ───────────────────────────────── */
#endless-hud {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--ink);
  color: var(--paper-2);
  border-radius: 11px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.eh-label { opacity: 0.6; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; }
.eh-streak { color: #ffd166; }
#receipt {
  position: absolute;
  left: 50%;
  bottom: 132px;
  transform: translate(-50%, 10px);
  padding: 9px 15px;
  max-width: min(460px, 88vw);
  text-align: center;
  background: #fff6da;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#receipt.show { opacity: 1; transform: translate(-50%, 0); }
#receipt strong { color: #a06a00; }

/* ── cooking additions ──────────────────────────────────── */
.cook-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}
.cn {
  --accent: var(--hub);
  padding: 3px 8px;
  font-size: 0.7rem;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-left-width: 5px;
  border-left-color: var(--accent);
  border-radius: 7px;
}
.cn-none { font-size: 0.7rem; opacity: 0.6; }
.cook-toppings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 7px;
}
.top-btn {
  --tc: var(--hub);
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 9px 6px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-bottom-color: var(--tc);
  border-bottom-width: 6px;
  border-radius: 11px;
  cursor: pointer;
  transition: transform 0.1s;
}
.top-btn:hover { transform: translateY(-2px); }
.top-btn:active { transform: translateY(2px); }
.tb-glyph { font-size: 1.15rem; }
.top-btn.plain .tb-glyph { display: none; }
#cook-round b { font-family: var(--font-display); font-size: 0.86rem; }

/* ── shop ────────────────────────────────────────────────── */
#shop {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
  background: rgba(20, 32, 46, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#shop.open { opacity: 1; visibility: visible; }
.shop-panel {
  width: min(540px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 20px clamp(18px, 4vw, 26px);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 rgba(29, 36, 48, 0.85), 0 26px 56px rgba(20, 30, 40, 0.35);
  animation: pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}
.shop-head strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.shop-head span { font-size: 0.76rem; opacity: 0.65; }
.shop-bal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  background: #fff6da;
  border: 3px solid var(--ink);
  border-radius: 11px;
}
.shop-items { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.sh {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-radius: 13px;
}
.sh.owned { opacity: 0.55; }
.sh-glyph { font-size: 1.6rem; }
.sh-body strong { display: block; font-size: 0.88rem; }
.sh-body span { font-size: 0.74rem; line-height: 1.35; opacity: 0.7; }
.sh-buy {
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
}
.sh-buy:disabled { background: transparent; color: var(--ink); opacity: 0.55; cursor: default; }
.sh.can .sh-buy { background: #1f7a34; border-color: #1f7a34; }
.shop-note { margin: 0 0 12px; min-height: 1.2em; font-size: 0.76rem; color: #a03028; font-weight: 600; }

/* ── finale keep-playing ─────────────────────────────────── */
.fin-keep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--paper-2);
  background: #1f7a34;
  border: 3px solid var(--ink);
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 5px 0 #14522360;
  transition: transform 0.12s, box-shadow 0.12s;
}
.fin-keep:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #14522360; }
.fin-keep:active { transform: translateY(2px); box-shadow: 0 2px 0 #14522360; }
.fin-keep svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── responsive for the new furniture ───────────────────── */
@media (max-width: 720px) {
  #wallet { top: 12px; gap: 9px; padding: 6px 10px; }
  .tray-pips { display: none; }
  #endless-hud { top: 52px; font-size: 0.72rem; }
  #toast { top: 92px; }
  #receipt { bottom: 176px; font-size: 0.74rem; }
  .ord-sub { display: none; }
  .cook-needs { display: none; }
  .sh { grid-template-columns: auto 1fr; }
  .sh-buy { grid-column: 2; justify-self: start; }
}
@media (max-width: 470px) {
  /* Below the minimap AND the sound button — centring it collided with both on
     a narrow phone. */
  #wallet { left: auto; right: 12px; top: 156px; transform: none; }
  #endless-hud { left: auto; right: 12px; top: 202px; transform: none; }
  #toast { top: 60px; max-width: 64vw; }
}


/* ── off-screen quest pointers ───────────────────────────── */
#quest-pointers { position: absolute; inset: 0; pointer-events: none; }
.qp {
  --accent: var(--hub);
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  background: rgba(246, 239, 225, 0.95);
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: 0 3px 0 rgba(29, 36, 48, 0.85);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.qp.hide { opacity: 0; }
.qp-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--accent);
  filter: drop-shadow(0 0 1px rgba(29, 36, 48, 0.9));
}
.qp-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .qp-label { display: none; }
  .qp { padding: 5px; }
}

/* ── vignette ────────────────────────────────────────────────
   A whisper of corner darkening. Pure CSS, so it costs nothing, and it stops
   the bright sky reading as flat at the frame edges. */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0) 52%, rgba(16,28,44,0.16) 100%),
    linear-gradient(180deg, rgba(16,28,44,0.10) 0%, rgba(0,0,0,0) 22%);
}

/* ── mobile pass ─────────────────────────────────────────────
   Touch targets sized for thumbs, overlays that scroll rather than clip, and
   the two bottom corners reserved for the stick and the action cluster. */
body.touch #touch-actions {
  grid-template-columns: repeat(2, auto);
  gap: 8px;
}
body.touch #touch-actions button {
  width: 66px;
  height: 52px;
  font-size: 0.64rem;
}
body.touch #btn-talk {
  grid-column: span 2;
  width: 140px;
  height: 58px;
  font-size: 0.8rem;
  background: var(--paper-2);
  border-color: var(--ink);
}
body.touch #stick {
  width: 132px;
  height: 132px;
  left: 16px;
  bottom: 20px;
}

@media (max-width: 860px) {
  /* overlays: scrollable, thumb-reachable buttons */
  .cook-panel, .shop-panel, .vt-card, .fin-inner, .title-card {
    max-height: min(86vh, 720px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #cook-btn { padding: 16px; font-size: 0.94rem; }
  .cook-toppings { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .top-btn { padding: 12px 4px; font-size: 0.6rem; }
  .tb-glyph { font-size: 1.35rem; }
  .cook-quit { padding: 12px 14px; }
  .sh-buy { padding: 12px 14px; font-size: 0.78rem; }
  .fin-keep, .vt-link, .vt-close, .fin-close { padding: 15px; }
  #cooking { place-items: end center; padding-bottom: 12px; }
  .qp { transform: translate(-50%, -50%) scale(0.9); }
}

/* landscape phones: the HUD has to get out of the way vertically */
@media (max-height: 460px) {
  #orderboard { width: 168px; top: 8px; left: 8px; padding: 8px 9px 7px; }
  #order-items { gap: 4px; }
  .ord { padding: 3px 6px 6px; }
  .ord-sub { display: none; }
  #wallet { top: 8px; padding: 4px 9px; }
  #endless-hud { top: 44px; }
  #minimap { width: 66px; height: 66px; }
  #topright { top: 8px; right: 8px; }
  #toast { top: 76px; font-size: 0.7rem; }
  body.touch #stick { width: 108px; height: 108px; bottom: 12px; left: 12px; }
  body.touch #touch-actions { bottom: 12px; right: 12px; }
  body.touch #btn-talk { height: 46px; width: 118px; }
  body.touch #touch-actions button { height: 42px; }
  .cook-panel, .shop-panel { max-height: 92vh; padding: 10px 12px; }
  .cook-needs { display: none; }
  body.touch #prompt { bottom: 130px; }
  #receipt { bottom: 130px; }
}

/* ── game over ───────────────────────────────────────────── */
#gameover {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
  background: rgba(24, 12, 8, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s;
}
#gameover.open { opacity: 1; visibility: visible; }
.go-inner {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 30px clamp(20px, 4vw, 30px);
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 rgba(29, 36, 48, 0.85), 0 30px 70px rgba(0, 0, 0, 0.5);
}
.go-kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.6;
}
.go-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1.02;
  color: #c0201b;
}
.go-lede { margin: 0 0 20px; font-size: 0.95rem; line-height: 1.5; }
.go-stats { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 6px; }
.go-stats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.84rem;
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: 9px;
}
.go-stats b { font-family: var(--font-mono); }
.go-again {
  width: 100%;
  padding: 15px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 5px 0 #6f5f52;
}
.go-again:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f5f52; }

/* the world goes red-hot for a beat when it goes off */
body.nuked #vignette {
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(255,240,200,0.55) 0%, rgba(255,120,40,0.3) 40%, rgba(60,10,0,0.5) 100%);
  animation: nukeFlash 5s ease-out forwards;
}
@keyframes nukeFlash {
  0% { opacity: 1; }
  8% { opacity: 1; }
  100% { opacity: 0.42; }
}

/* ── crew panel ──────────────────────────────────────────── */
#crew {
  position: absolute;
  left: 16px;
  top: 268px;
  width: 216px;
  padding: 10px 12px 9px;
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
#crew header { margin-bottom: 7px; }
#crew-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cw {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
}
.cw-glyph { font-size: 0.95rem; filter: grayscale(0.6); }
.cw.busy .cw-glyph { filter: none; }
.cw-body { display: grid; gap: 3px; min-width: 0; }
.cw-name {
  font-family: var(--font-display);
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-bar {
  height: 6px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.cw-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #1f7a34;
  transition: width 0.12s linear;
}
.cw[data-kind="robot"] .cw-fill { background: var(--hub); }
.cw-state {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  opacity: 0.6;
  white-space: nowrap;
}

@media (max-width: 720px) {
  #crew { width: 190px; left: 12px; top: 244px; padding: 8px 10px 7px; }
  .cw-state { display: none; }
}
@media (max-height: 460px) {
  #crew { display: none; }
}


/* ── how to play ─────────────────────────────────────────── */
#help-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink);
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#help-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(29,36,48,0.9); }

#howto {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
  background: rgba(20, 32, 46, 0.5);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#howto.open { opacity: 1; visibility: visible; }
.ht-inner {
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px clamp(20px, 4vw, 32px);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 10px 0 rgba(29, 36, 48, 0.85), 0 28px 60px rgba(20, 30, 40, 0.35);
  animation: pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.ht-kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
}
.ht-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  line-height: 1.08;
}
.ht-steps { margin: 0 0 22px; padding: 0 0 0 2px; list-style: none; counter-reset: ht; display: grid; gap: 12px; }
.ht-steps li {
  counter-increment: ht;
  position: relative;
  padding: 11px 13px 11px 44px;
  font-size: 0.88rem;
  line-height: 1.5;
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}
.ht-steps li::before {
  content: counter(ht);
  position: absolute;
  left: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--paper-2);
  background: var(--hub);
  border: 2.5px solid var(--ink);
  border-radius: 7px;
}
.ht-steps b { font-weight: 700; }
.ht-steps em { font-style: normal; font-weight: 600; border-bottom: 2px solid var(--hub); }

.ht-keys { margin-bottom: 18px; }
.ht-keys h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 0.82rem;
}
.ht-keys ul {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 14px;
}
.ht-keys li { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; }
.ht-keys li span { opacity: 0.75; }
.ht-touch { margin: 0; font-size: 0.78rem; opacity: 0.7; }

.ht-close {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--paper-2);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 5px 0 #6f5f52;
}
.ht-close:active { transform: translateY(3px); box-shadow: 0 2px 0 #6f5f52; }

#howto-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 20px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 3px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
#howto-open:hover { background: rgba(29, 36, 48, 0.08); }

@media (max-width: 860px) {
  .ht-steps li { font-size: 0.84rem; padding-left: 40px; }
  .ht-inner { padding: 20px 16px; }
}


/* ── unsupported browser ─────────────────────────────────── */
#loading.failed { opacity: 1 !important; visibility: visible !important; }
#loading.failed .load-inner { width: min(360px, 82vw); }
.load-fail-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
}
.load-fail-body {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  opacity: 0.8;
}


/* ── turn your phone ─────────────────────────────────────── */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 6vh 8vw;
  background: linear-gradient(170deg, #2f86d8, #eaf8ff);
  text-align: center;
}
body.rotate-block #rotate { display: grid; }
.rot-inner { width: min(300px, 100%); }
.rot-phone {
  display: block;
  width: 58px;
  height: 96px;
  margin: 0 auto 20px;
  border: 4px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  position: relative;
  animation: rotHint 2.4s ease-in-out infinite;
}
.rot-screen {
  position: absolute;
  inset: 7px 5px 11px;
  border-radius: 4px;
  background: #8ed863;
}
@keyframes rotHint {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
.rot-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ink);
}
.rot-body {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
}
#rotate-anyway {
  padding: 11px 18px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 3px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}


/* ── fullscreen button ───────────────────────────────────── */
#fs-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(246, 239, 225, 0.94);
  border: 3px solid var(--ink);
  border-radius: 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#fs-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(29,36,48,0.9); }
.rot-tip {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.72;
}


/* ── emblems ─────────────────────────────────────────────── */
.emb { display: block; flex: none; }
.w-glyph, .cw-glyph, .tb-glyph, .sh-glyph { display: grid; place-items: center; }
.ord-sub .emb, .cn-row .emb { display: inline-block; vertical-align: -0.22em; }
.pip .emb { display: block; }

/* the order row's town badge */
.ord { grid-template-columns: auto auto 1fr auto; }
.ord-badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--accent);
}
/* an order you can actually fill right now */
.ord.ready { background: #f2f8ec; }
.ord.ready .ord-name { text-decoration: none; }
.ord-need {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #a2311f;
  opacity: 1;
}
.ord.ready .ord-sub { opacity: 0.78; }

/* emoji sizing rules no longer apply to inline svg */
.w-glyph { font-size: 0; }
.cw-glyph { font-size: 0; filter: grayscale(0.55); }
.cw.busy .cw-glyph { filter: none; }
.tb-glyph { font-size: 0; }
.sh-glyph { font-size: 0; }
.pip { overflow: hidden; }

/* ── finale cards for towns with no site to visit ────────── */
.fin-card.no-link { cursor: default; }
.fin-card.no-link:hover { transform: none; box-shadow: var(--shadow); }


/* ── loading screen ──────────────────────────────────────── */
/* Was a spinning ring round a green planet, from back when the world was one.
   Now it's a waffle iron on the same cream card as every other panel. */
#loading {
  background:
    radial-gradient(120% 90% at 50% 0%, #eaf2ee 0%, #bfdbe3 42%, #8ec4dd 100%);
}
.load-inner {
  width: min(360px, 84vw);
  padding: 26px 28px 24px;
  text-align: center;
  background: rgba(251, 245, 232, 0.95);
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 rgba(29, 36, 48, 0.9), 0 22px 40px rgba(29, 36, 48, 0.28);
}
.load-kicker {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.62;
}
.load-logo {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--paper);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
}

/* the iron */
.load-iron {
  --baked: 0;
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto 18px;
}
.li-lid {
  position: absolute;
  left: 6px; right: 6px; top: 0;
  height: 16px;
  background: #8a8f9a;
  border: 3.5px solid var(--ink);
  border-radius: 10px 10px 4px 4px;
}
.li-plate {
  position: absolute;
  inset: 12px 0 0;
  border: 3.5px solid var(--ink);
  border-radius: 50%;
  background: #c8ccd6;
  overflow: hidden;
}
/* the batter/waffle that rises up the plate */
.li-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--baked) * 100%);
  background: linear-gradient(180deg, #f5e2a8 0%, #e0a851 55%, #c07f31 100%);
  transition: height 0.35s ease;
}
/* the grid, drawn twice: once under the fill and once over it, so the pattern
   reads on both the cold plate and the cooked waffle */
.li-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29,36,48,0.55) 3px, transparent 3px),
    linear-gradient(to bottom, rgba(29,36,48,0.55) 3px, transparent 3px);
  background-size: 25% 25%;
  background-position: -1.5px -1.5px;
  opacity: 0.35;
}
.li-grid-over { opacity: 0.55; }
.li-steam {
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 34px;
  opacity: var(--baked);
}
.li-steam i {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: li-rise 1.9s ease-out infinite;
}
.li-steam i:nth-child(1) { left: 28%; animation-delay: 0s; }
.li-steam i:nth-child(2) { left: 48%; animation-delay: 0.55s; }
.li-steam i:nth-child(3) { left: 66%; animation-delay: 1.1s; }
@keyframes li-rise {
  0%   { transform: translateY(6px) scale(0.5); opacity: 0; }
  35%  { opacity: 0.8; }
  100% { transform: translateY(-26px) scale(1.5); opacity: 0; }
}

#load-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
}
.load-bar {
  height: 14px;
  border: 3.5px solid var(--ink);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
#load-bar-fill {
  background: linear-gradient(90deg, #e0a851, #ffd166);
}
@media (prefers-reduced-motion: reduce) {
  .li-steam i { animation: none; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HUD revamp.

   The panels already shared a hard-shadow language, so this isn't a
   re-skin — it fixes the three places the HUD was actually weak:
   headers were bare text, the wallet was a small pill with tiny glyphs,
   and the border weights and paper tones had drifted apart.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hud-paper: rgba(251, 245, 232, 0.96);
  --hud-border: 3.5px;
  --hud-shadow: 0 5px 0 rgba(29, 36, 48, 0.92), 0 12px 22px rgba(29, 36, 48, 0.16);
}

#orderboard,
#crew,
#wallet,
#minimap,
#endless-hud,
#controls-hint {
  background: var(--hud-paper);
  border-width: var(--hud-border);
  box-shadow: var(--hud-shadow);
}
#orderboard, #crew, #endless-hud { border-radius: 15px; }
#wallet { border-radius: 15px; }

/* ── panel headers ───────────────────────────────────────── */
/* A kicker over a hairline rule, with the counter as an ink pill. Bare text
   made the panels read as debug output. */
#orderboard header,
#crew header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 2.5px solid rgba(29, 36, 48, 0.16);
}
#orderboard .ck-title,
#crew .ck-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
#order-count {
  flex: none;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  border-radius: 99px;
}

/* ── order rows ──────────────────────────────────────────── */
/* A wash of the town's accent behind the row, so the colour does more than
   sit in a 7px stripe. */
.ord {
  border-width: 2.5px;
  border-left-width: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    var(--paper-2);
}
.ord.ready {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    #f1f8ea;
}
.ord-qty {
  font-size: 0.92rem;
  min-width: 2.1em;
  text-align: right;
}
.ord-name { font-size: 0.66rem; }
.ord-time {
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(29, 36, 48, 0.07);
}
.ord-time.no-clock { background: none; }

/* ── wallet ──────────────────────────────────────────────── */
/* Was a small pill with 15px glyphs. Now it's a proper counter: display-face
   numerals, real emblems, and a rule between the two figures. */
#wallet {
  gap: 0;
  padding: 8px 6px;
}
.w-item {
  gap: 7px;
  padding: 0 13px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.w-item + .w-item { border-left: 2.5px solid rgba(29, 36, 48, 0.16); }
.tray-pips { padding-left: 11px; border-left: 2.5px solid rgba(29, 36, 48, 0.16); }
.tray-pips:empty { display: none; border: none; padding: 0; }

/* ── the button column ───────────────────────────────────── */
#minimap { border-radius: 50%; padding: 6px; }
#sound-toggle, #help-btn, #fs-btn {
  width: 40px;
  height: 40px;
  background: var(--hud-paper);
  border-width: var(--hud-border);
  border-radius: 13px;
  box-shadow: var(--hud-shadow);
}
#sound-toggle:active, #help-btn:active, #fs-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(29, 36, 48, 0.92);
}
#topright { gap: 9px; }

/* ── crew rows ───────────────────────────────────────────── */
.cw-bar { border-radius: 99px; overflow: hidden; }
.cw-state {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ── controls hint ───────────────────────────────────────── */
/* It is furniture, not information, once you know the keys. */
#controls-hint {
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  opacity: 0.9;
}
#controls-hint.faded { opacity: 0.22; }
#controls-hint.faded:hover { opacity: 0.9; }

/* narrow viewports keep the tighter geometry */
@media (max-width: 520px) {
  :root { --hud-border: 3px; --hud-shadow: 0 4px 0 rgba(29, 36, 48, 0.92); }
  .w-item { font-size: 0.82rem; padding: 0 9px; }
  #sound-toggle, #help-btn, #fs-btn { width: 34px; height: 34px; }
}

/* upgrade level badge on a shop row */
.sh-level {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  border-radius: 99px;
}
.shop-items > li { position: relative; }

/* the dialog portrait is a render of the actual rig now */
.dlg-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}

/* ── shop: close from the header ─────────────────────────── */
.shop-head { position: relative; }
.shop-x {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(29, 36, 48, 0.9);
  cursor: pointer;
}
.shop-x:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(29, 36, 48, 0.9); }

/* ── the countdown ───────────────────────────────────────── */
#doom {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
#doom.open { opacity: 1; visibility: visible; }
.doom-label, .doom-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #ffdede;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.doom-sub { letter-spacing: 0.18em; opacity: 0.8; }
.doom-num {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 12rem);
  line-height: 0.85;
  color: #fff2f2;
  -webkit-text-stroke: 8px #7d1512;
  paint-order: stroke fill;
  text-shadow: 0 10px 0 rgba(125, 21, 18, 0.85);
}
.doom-num.tick { animation: doomTick 0.5s cubic-bezier(0.2, 1.5, 0.35, 1); }
@keyframes doomTick {
  0%   { transform: scale(1.55); opacity: 0.25; }
  55%  { transform: scale(0.96); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .doom-num.tick { animation: none; } }


/* ── the standing objective ──────────────────────────────── */
/* Directly under the wallet, centred, because it is the one thing a confused
   player needs to find. */
#objective {
  --accent: var(--hub);
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(560px, 74vw);
  padding: 6px 14px 6px 10px;
  background: var(--hud-paper);
  border: var(--hud-border) solid var(--ink);
  border-left: 8px solid var(--accent);
  border-radius: 13px;
  box-shadow: var(--hud-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
#objective.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ob-kicker {
  flex: none;
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border-radius: 99px;
}
.ob-text {
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
}
@media (max-width: 620px) {
  #objective { top: 58px; padding: 5px 10px 5px 8px; max-width: 84vw; }
  .ob-text { font-size: 0.68rem; }
  .ob-kicker { display: none; }
}
/* it has no business being on screen during the countdown */
body.nuked #objective { display: none; }
.w-item.full { color: #a2311f; }
.w-item.full b { text-decoration: underline; text-decoration-thickness: 2px; }