:root {
  --ink: #0f1f1a;
  --paper: #f5f2ea;
  --accent: #c9f558;
  --on-accent: #0f1f1a; /* text and marks on the lime; stays dark at night */
  --sky: #c6c9ff;
  --hair: rgba(15, 31, 26, 0.18);
  --surface: #fff; /* a field or bubble that sits a step above the paper */
  --shadow: #0f1f1a; /* the hard offset shadow under cards */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* After dark the paper goes dark and the ink goes light; everything built on the
   variables follows. Hard shadows drop to black so they still read as depth, and
   raised fields go a step lighter than the paper instead of staying white. */
body.night {
  --paper: #161d1b;
  --ink: #f0ece2;
  --hair: rgba(240, 236, 226, 0.22);
  --surface: #222b28;
  --shadow: rgba(0, 0, 0, 0.62);
}
/* Dark logos go light at night; the hue turn keeps Feedough's red close to red. */
body.night .logo.koso, body.night .sec-logo.koso, body.night .logo.feedough, body.night .sec-logo.feedough {
  filter: invert(1) hue-rotate(180deg);
}
body.night #game::after {
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(120, 140, 200, 0.08), rgba(120, 140, 200, 0) 48%),
    radial-gradient(ellipse at center, transparent 60%, rgba(2, 6, 12, 0.34) 100%);
}
body.night #hint, body.night #guide .g-label { background: var(--accent); color: var(--on-accent); }
body.night #guide .g-label em { color: var(--on-accent); opacity: 0.7; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app { position: fixed; inset: 0; touch-action: manipulation; }
#game { position: absolute; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
#game canvas { display: block; width: 100% !important; height: 100% !important; }
/* One key light from the upper left, a cool bounce from the lower right, and a
   vignette to hold the edges. The art is flat pixels; the grade gives it air. */
#game::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(255, 226, 160, 0.13), rgba(255, 226, 160, 0) 48%),
    radial-gradient(100% 80% at 88% 100%, rgba(120, 140, 200, 0.09), rgba(120, 140, 200, 0) 52%),
    radial-gradient(ellipse at center, transparent 70%, rgba(15, 31, 26, 0.14) 100%);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: background 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--ink); color: var(--paper); }
.btn:focus-visible, .ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ghost {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font: 12px Inter, system-ui, sans-serif;
  padding: 7px 10px;
  cursor: pointer;
}
.ghost[aria-pressed="true"] { border-color: var(--ink); }

/* The music button carries a small equaliser, so people can see there is music
   before they turn it on, and see it moving once they have. */
.ghost.music { display: inline-flex; align-items: center; gap: 7px; }
.ghost.music[hidden] { display: none; }
.ghost.music .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ghost.music .bars i { width: 3px; height: 4px; background: var(--ink); opacity: 0.55; transition: height 0.2s; }
.ghost.music .bars i:nth-child(2) { height: 8px; }
.ghost.music .bars i:nth-child(3) { height: 6px; }
.ghost.music .bars i:nth-child(4) { height: 10px; }
.ghost.music[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }
.ghost.music[aria-pressed="true"] .bars i { background: #0f1f1a; opacity: 1; animation: eq 0.9s ease-in-out infinite; }
.ghost.music[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: 0.15s; }
.ghost.music[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: 0.3s; }
.ghost.music[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hud-btns { display: flex; gap: 6px; }
.hud-btns button, #cta { white-space: nowrap; }
.nameplate {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 7px 12px 8px;
  line-height: 1;
}
.nameplate span {
  display: block;
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 20px;
  font-weight: 400;
}
.nameplate small { display: block; font: 11px Inter, system-ui, sans-serif; opacity: 0.65; margin-top: 4px; }

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--paper);
  font: 13px Inter, system-ui, sans-serif;
  padding: 8px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease);
  z-index: 5;
  white-space: nowrap;
}
#hint.show { opacity: 1; transform: translate(-50%, 0); }
body.touch #hint { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 170px); }

/* ---------- Locked in: sat down at the machine, and the room steps back ---------- */
#locked {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 52px);
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  pointer-events: none;
  animation: lk-in 0.35s var(--ease) both;
}
#locked[hidden] { display: none; }
@keyframes lk-in { from { opacity: 0; transform: translateY(-8px); } }
#locked .lk-dot { width: 7px; height: 7px; background: var(--accent); flex: none; animation: lk-pulse 1.6s steps(1, end) infinite; }
@keyframes lk-pulse { 50% { opacity: 0.25; } }
#locked .lk-text { display: block; }
#locked strong { display: block; font: 13px/1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; }
#locked small { display: block; font: 11px/1.3 Inter, system-ui, sans-serif; opacity: 0.6; margin-top: 2px; }
#locked small:empty { display: none; }
#locked .lk-time { font: 15px/1 Anton, Impact, sans-serif; letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Nothing else is asking for attention while he is in it. */
#hud, #chat { transition: opacity 0.5s var(--ease); }
body.locked-in #hud, body.locked-in #chat { opacity: 0.28; }
body.locked-in #hud:hover, body.locked-in #chat:hover, body.locked-in #hud:focus-within, body.locked-in #chat:focus-within { opacity: 1; }
body.touch #locked { top: calc(max(12px, env(safe-area-inset-top)) + 96px); }
@media (prefers-reduced-motion: reduce) {
  #locked, #locked .lk-dot { animation: none; }
}

#place {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translate(-50%, -12px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.3s var(--ease);
  pointer-events: none;
  z-index: 5;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 14px;
  box-shadow: 3px 3px 0 var(--shadow);
}
#place.show { opacity: 1; transform: translate(-50%, 0); }
#place .name { display: block; font-family: Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }
#place .cap { display: block; font-size: 11px; opacity: 0.65; }
#place .cap:empty { display: none; }

#minimap {
  position: absolute;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 96px;
  height: 100px;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  image-rendering: pixelated;
  z-index: 4;
  opacity: 0.92;
}
#minimap[hidden] { display: none; }

/* ---------- Dialogue box ---------- */
#dialog {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(640px, calc(100% - 24px));
  max-height: 60vh;
  overflow: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 14px 16px 12px;
  z-index: 6;
}
#dialog.in { animation: rise 0.28s var(--ease); }
@keyframes rise {
  from { translate: 0 14px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
#dialog .speaker {
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin-bottom: 4px;
}
#dialog .speaker[hidden] { display: none; }
#dialog .text { font-size: 15px; line-height: 1.5; }
#dialog .text p { margin: 0 0 6px; }
#dialog .text p:last-child { margin-bottom: 0; }
#dialog { max-height: min(82vh, 820px); }
#dialog .buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#dialog .buttons:empty { display: none; }
#dialog .hint { font-size: 11px; opacity: 0.55; margin-top: 8px; }
#dialog .widget:empty { display: none; }
#dialog .widget { margin-top: 10px; }

/* ---------- Walking into a chapter that has photos to fetch ---------- */
#scene-load {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--paper);
}
#scene-load[hidden] { display: none; }
.sl-card { width: min(320px, 72%); text-align: center; }
.sl-name {
  font: 400 22px/1 Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.sl-bar { height: 10px; border: 2px solid var(--ink); background: var(--paper); }
.sl-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s linear; }

/* ---------- The arcade: a game gets the whole screen, and the rules come first ---------- */
#arcade {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  overflow-y: auto;
  padding: 16px;
  background: rgba(15, 31, 26, 0.72);
  backdrop-filter: blur(3px);
}
#arcade[hidden] { display: none; }
/* margin: auto centres it, and unlike place-items it never pushes the top off screen */
.ar-shell {
  margin: auto;
  width: min(720px, 100%);
  width: min(720px, 100%, calc((100dvh - 150px) * 16 / 9));
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--shadow);
  animation: rise 0.3s var(--ease);
}
.ar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
  border-bottom: 2px solid var(--ink);
}
.ar-eyebrow { font: 10px Anton, Impact, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin: 0 0 2px; }
.ar-title { font: 400 24px/1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.ar-close {
  background: none;
  border: 0;
  font: 26px/1 Inter, system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  padding: 0 4px;
}
/* canvas and card share one cell, so a card taller than the board (rules on a phone)
   makes the stage taller instead of spilling over the header and score bar */
.ar-stage { position: relative; display: grid; background: #e4ddc9; }
.ar-canvas {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}
.ar-card {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.ar-card[hidden] { display: none; }
.ar-card h3 { font: 400 26px/1 Anton, Impact, sans-serif; text-transform: uppercase; margin: 0; }
.ar-card .ar-body { font: 14px Inter, system-ui, sans-serif; margin: 0 0 4px; max-width: 42ch; }
.ar-rules {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0;
  display: grid;
  gap: 3px;
  text-align: left;
  max-width: 44ch;
}
.ar-rules li { font: 12.5px/1.45 Inter, system-ui, sans-serif; padding-left: 16px; position: relative; }
.ar-rules li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--accent); border: 1px solid var(--ink); }
.ar-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ar-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 2px solid var(--ink);
  font: 12px Inter, system-ui, sans-serif;
}
.ar-left { font-weight: 600; }
.ar-right { opacity: 0.65; }
.ar-action { margin-left: auto; padding: 7px 14px; font-size: 13px; }
.ar-action[hidden] { display: none; }
@media (max-width: 720px) {
  #arcade { padding: 10px; }
  .ar-title { font-size: 19px; }
  .ar-card h3 { font-size: 21px; }
  .ar-card .ar-body { font-size: 13px; }
  .ar-rules li { font-size: 12px; }
}

/* ---------- The way in: sound and music are on, and this is where you say no ---------- */
#start {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  overflow-y: auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  background: rgba(15, 31, 26, 0.55);
  backdrop-filter: blur(2px);
}
#start[hidden] { display: none; }
/* margin: auto centres it, and unlike place-items it never pushes the top of a tall card
   off a short phone screen. */
.start-card {
  margin: auto;
  width: min(460px, 100%);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 20px 22px 18px;
  animation: rise 0.3s var(--ease);
}
.start-card .eyebrow { font: 11px Anton, Impact, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; margin: 0; }
.start-title { font: 400 30px/1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; margin: 6px 0 10px; }
.start-lines p { font-size: 14px; line-height: 1.5; margin: 0 0 7px; }
.start-lines p.start-night { font-size: 12px; opacity: 0.75; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair); }
.start-lines p.start-keys { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 9px 10px; border: 1px solid var(--hair); font-size: 13px; }
.start-keys .keys { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.start-keys .keys span { display: flex; gap: 2px; }
/* The touch version of the same row: the stick with its knob, and the Map button. */
.start-keys .taps { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.start-keys .taps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 13px Anton, Impact, sans-serif;
}
.start-keys .taps .tap-stick { border-style: dashed; }
/* Map is a word, not a letter, so its chip is a pill rather than the stick's circle. */
.start-keys .taps .tap-map {
  width: auto;
  padding: 0 10px;
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.start-keys .taps .tap-stick i {
  width: 13px;
  height: 13px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(2px, 2px);
}
.start-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; border: 1px solid var(--ink); border-bottom-width: 2px; background: var(--paper); color: var(--ink); font: 600 11px Inter, system-ui, sans-serif; line-height: 1; }
.start-toggles { display: flex; gap: 8px; margin: 14px 0 4px; }
.opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 0;
  font: 12px Inter, system-ui, sans-serif;
  padding: 9px 10px;
  cursor: pointer;
}
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--on-accent); color: var(--on-accent); }
.opt .dot { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; opacity: 0.5; }
.opt[aria-pressed="true"] .dot { background: currentColor; opacity: 1; }
.opt .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; opacity: 0.5; }
.opt .bars i { width: 3px; height: 4px; background: currentColor; }
.opt .bars i:nth-child(2) { height: 8px; }
.opt .bars i:nth-child(3) { height: 6px; }
.opt .bars i:nth-child(4) { height: 10px; }
.opt[aria-pressed="true"] .bars { opacity: 1; }
.opt[aria-pressed="true"] .bars i { animation: eq 0.9s ease-in-out infinite; }
.opt[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: 0.15s; }
.opt[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: 0.3s; }
.opt[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: 0.45s; }
.start-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.start-btns .btn { flex: 1; text-align: center; }
/* The way in is the black button. The lime is everywhere else in town, so the choice
   that matters wears the one colour nothing else on this card wears, and the other
   choice steps back to an outline so the two can never be mistaken for each other.
   After dark a black block on dark paper needs the lime on its edge and its label
   to read as a button at all. */
.start-btns .btn.primary { background: #0b100e; color: #f5f2ea; border-color: #0b100e; }
.start-btns .btn.primary:hover { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }
body.night .start-btns .btn.primary { border-color: var(--accent); color: var(--accent); }
body.night .start-btns .btn.primary:hover { color: var(--on-accent); }
.start-btns .btn:not(.primary) { background: transparent; color: var(--ink); border-color: var(--ink); }
/* After dark both buttons are dark shapes, so the quiet one gives up its hard edge
   to keep the black one obviously in front. */
body.night .start-btns .btn:not(.primary) { border-color: var(--hair); }
.start-btns .btn:not(.primary):hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
  .start-title { font-size: 24px; }
  .start-lines p { font-size: 13px; }
  .start-btns .btn { flex: 1 1 100%; }
}

/* ---------- At the campfire the chat is the whole point, so it takes the middle ---------- */
body.fireside #chat-panel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 28px));
  height: min(560px, calc(100% - 120px));
  box-shadow: 0 0 0 100vmax rgba(8, 14, 34, 0.55), 6px 6px 0 var(--shadow);
}
body.fireside #chat-open { position: fixed; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }

/* ---------- Widgets ---------- */
.chaigame { width: 100%; max-width: 280px; image-rendering: pixelated; border: 1px solid var(--ink); display: block; touch-action: none; cursor: grab; }
.chaigame:active { cursor: grabbing; }
.chai-note { min-height: 15px; }
.feedgame { width: 100%; max-width: 280px; image-rendering: pixelated; border: 1px solid var(--ink); display: block; }
.feed-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.feed-score { font: 11px Inter, system-ui, sans-serif; opacity: 0.7; }
.feed-note { min-height: 15px; }
.w { display: flex; gap: 6px; }
.w input {
  flex: 1;
  font: 14px Inter, system-ui, sans-serif;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.w input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.out {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--hair);
  background: var(--surface);
  font: 13px/1.5 Inter, system-ui, sans-serif;
  white-space: pre-wrap;
}
.small { font-size: 11px; opacity: 0.6; margin: 6px 0 0; }
.okom { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.okom .node { border: 1px solid var(--ink); padding: 6px 8px; font-size: 12px; background: var(--surface); transition: background 0.2s; }
.okom .node.on { background: var(--accent); color: var(--on-accent); }
.okom .arrow { opacity: 0.4; font-size: 12px; }
.okom .belt { flex-basis: 100%; height: 10px; margin-top: 6px; background: var(--ink); position: relative; overflow: hidden; }
.okom .env { position: absolute; top: 2px; left: -14px; width: 12px; height: 6px; background: var(--paper); border: 1px solid var(--ink); }
.okom .env.go { transition: left 1.2s linear; left: 100%; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.feed li span { opacity: 0.6; white-space: nowrap; }
.reels { display: grid; grid-template-columns: repeat(var(--reels, 1), minmax(0, 330px)); gap: 8px; justify-content: center; }
.reels iframe { width: 100%; height: min(560px, 58vh); border: 1px solid var(--ink); background: #fff; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.g-item { position: relative; padding: 0; border: 1px solid var(--ink); background: var(--surface); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-play { position: absolute; inset: auto 6px 6px auto; background: var(--on-accent); color: var(--accent); font-size: 11px; padding: 3px 6px; }
.viewer { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; }
button.viewer { cursor: zoom-in; }
.viewer img, .viewer video { display: block; width: 100%; max-height: min(56vh, 420px); object-fit: contain; background: #0f1f1a; border: 1px solid var(--ink); }

/* ---------- A photo, full screen: tap one and it gets the whole screen ---------- */
#lightbox {
  position: absolute;
  inset: 0;
  z-index: 44;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #0a120f;
  color: #f5f2ea;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#lightbox[hidden] { display: none; }
#lightbox.in { animation: lb-in 0.18s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-bar, .lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-count { font: 400 16px/1 Anton, Impact, sans-serif; letter-spacing: 0.08em; padding-left: 4px; }
.lb-stage { position: relative; min-height: 0; overflow: hidden; }
.lb-stage img, .lb-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lb-stage.go-next img, .lb-stage.go-next video { animation: lb-next 0.2s var(--ease); }
.lb-stage.go-prev img, .lb-stage.go-prev video { animation: lb-prev 0.2s var(--ease); }
@keyframes lb-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes lb-prev { from { opacity: 0; transform: translateX(-28px); } }
.lb-cap { flex: 1; margin: 0; text-align: center; font: 13px/1.45 Inter, system-ui, sans-serif; opacity: 0.85; }
.lb-close, .lb-nav {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid #f5f2ea;
  border-radius: 0;
  background: transparent;
  color: #f5f2ea;
  font: 30px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.lb-nav { font-size: 36px; line-height: 44px; }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible { background: #c9f558; border-color: #c9f558; color: #0f1f1a; outline: none; }
.lb-nav:disabled { visibility: hidden; }
.flipbook { display: block; width: 100%; max-width: 360px; image-rendering: pixelated; border: 1px solid var(--ink); }
.rates { list-style: none; margin: 0; padding: 0; }
.rates li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.rates strong { white-space: nowrap; }

/* ---------- Touch controls ---------- */
#dpad { position: absolute; inset: auto 0 0 0; height: 190px; z-index: 5; pointer-events: none; }
#dpad[hidden] { display: none; }
.pad {
  position: absolute;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 138px;
  height: 138px;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  pointer-events: auto;
}
.pad button {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 16px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 0;
}
.pad button:active { background: var(--accent); color: var(--on-accent); }
.pad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.pad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.pad [data-dir="right"] { grid-column: 3; grid-row: 2; }
.pad [data-dir="down"] { grid-column: 2; grid-row: 3; }

/* ---------- Loading and title card ---------- */
#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 18px;
  background: var(--paper);
  color: var(--ink);
  z-index: 60;
  transition: opacity 0.45s var(--ease);
}
#loading[hidden] { display: none; }
#loading.out { opacity: 0; pointer-events: none; }
.tc { display: grid; justify-items: center; gap: 18px; text-align: center; }
/* The track he walks while the world downloads. Drawn at 148x64 real pixels and blown up,
   so every pixel of him stays a pixel. */
.tc-stage {
  width: min(94vw, 520px);
  height: auto;
  margin-bottom: -4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: tc-rise 0.6s var(--ease) backwards;
}
@media (max-height: 620px) {
  .tc { gap: 12px; }
  .tc-stage { width: min(70vw, 340px); }
}
.tc-name {
  margin: 0;
  font: 400 clamp(46px, 10vw, 108px)/0.92 Anton, Impact, sans-serif;
  letter-spacing: 0.01em;
  animation: tc-rise 0.6s var(--ease) backwards;
}
.tc-name::after {
  content: '';
  display: block;
  width: 64px;
  height: 9px;
  margin: 18px auto 0;
  background: var(--accent);
  border: 2px solid #0f1f1a;
}
/* Two lines of height reserved, so the name never jumps when the line turns over. */
.tc-line {
  margin: 0;
  max-width: 36ch;
  min-height: 2.8em;
  text-wrap: balance;
  font: 600 clamp(16px, 2.3vw, 21px)/1.4 Inter, system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  animation: tc-rise 0.6s 0.15s var(--ease) backwards;
}
.tc-line.swap { opacity: 0; transform: translateY(6px); }
@keyframes tc-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .tc-name, .tc-line, .tc-stage { animation: none; }
  #loading, .tc-line { transition: none; }
}
.load-fail { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 560px; padding: 24px; }
.load-fail span { font: 12px/1.5 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; opacity: 0.7; word-break: break-word; }
.load-fail button { font: 13px Anton, Impact, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; padding: 9px 16px; cursor: pointer; }

#intro {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--paper);
  display: grid;
  place-items: center;
  overflow: auto;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
#intro[hidden] { display: none; }
#intro.out { opacity: 0; transform: scale(1.03); pointer-events: none; }
.intro-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  max-width: 960px;
  padding: 40px 28px;
  width: 100%;
}
.intro-figures { position: relative; width: 260px; height: 260px; justify-self: end; }
.intro-photo {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--shadow);
  filter: grayscale(0.1);
  animation: reveal 0.7s var(--ease) both;
}
#intro-avatar {
  position: absolute;
  right: -28px;
  bottom: -18px;
  width: 112px;
  height: 168px;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 var(--shadow));
  animation: reveal 0.7s 0.15s var(--ease) both;
}
#intro-avatar[hidden] { display: none; }
.intro-copy .eyebrow {
  font-family: Anton, Impact, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.55;
  margin: 0 0 8px;
  animation: reveal 0.6s 0.05s var(--ease) both;
}
#intro-name {
  font-family: Anton, Impact, sans-serif;
  text-transform: uppercase;
  font-size: clamp(56px, 9vw, 108px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
  animation: reveal 0.6s 0.1s var(--ease) both;
}
#intro-lede { font-size: 17px; line-height: 1.55; max-width: 520px; margin: 0 0 20px; animation: reveal 0.6s 0.2s var(--ease) both; }
.intro-copy .btns { display: flex; gap: 10px; align-items: center; animation: reveal 0.6s 0.28s var(--ease) both; }
.intro-copy .keys { font-size: 12px; opacity: 0.55; margin: 12px 0 22px; animation: reveal 0.6s 0.32s var(--ease) both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  animation: reveal 0.6s 0.4s var(--ease) both;
}
.logo-row .logo { height: 18px; width: auto; display: block; }
.logo-row .logo.feedough { height: 22px; }
.logo-row .wordmark { font-family: Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; line-height: 1; }
.okom-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 3px 10px 4px 11px;
  font: 700 15px/1 "Bricolage Grotesque", Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.okom-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-top: 3px; }

/* ---------- Reading mode (the Esc page) ---------- */
html.reading, body.reading { overflow: auto; height: auto; min-height: 100%; }
body.reading #app { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; }
.sec-head .sec-mark { height: 30px; width: 30px; }
#esc-page[hidden] { display: none; }
#esc-page { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
#esc-page .eyebrow { font-family: Anton, Impact, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin: 0 0 8px; }
#esc-page h1 { font-family: Anton, Impact, sans-serif; text-transform: uppercase; font-size: clamp(44px, 9vw, 84px); line-height: 0.9; margin: 0 0 16px; letter-spacing: 0.01em; }
#esc-page h2 { font-family: Anton, Impact, sans-serif; text-transform: uppercase; font-size: 30px; line-height: 1; margin: 0 0 12px; }
#esc-page p { line-height: 1.55; font-size: 16px; margin: 0 0 12px; }
#esc-page .lede { font-size: 18px; max-width: 560px; }
#esc-page .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.esc-hero { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: start; }
.esc-hero .portrait { width: 160px; height: 160px; object-fit: cover; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 6px 6px 0 var(--shadow); }
#esc-page .logo-row { margin: 32px 0 0; border-top: 0; padding: 0 0 28px; }
#esc-page .esc-sec { border-top: 1px solid var(--ink); padding: 28px 0; }
#esc-page .esc-sec a { color: var(--ink); }
#esc-page .sec-logo { height: 26px; width: auto; display: block; margin-bottom: 16px; }
#esc-page .sec-logo.feedough { height: 32px; }
#esc-page .facts { margin: 0 0 14px; padding-left: 18px; }
#esc-page .facts li { margin: 4px 0; line-height: 1.45; }
#esc-page .talks, #esc-page .nums { list-style: none; margin: 0; padding: 0; }
#esc-page .talks li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
#esc-page .talks li span { font-family: Anton, Impact, sans-serif; opacity: 0.6; }
#esc-page .talks li em { grid-column: 2; font-style: normal; opacity: 0.75; font-size: 14px; }
#esc-page .nums li { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair); }
#esc-page .nums strong { font-family: Anton, Impact, sans-serif; font-size: 28px; min-width: 90px; }
#esc-page .esc-foot { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
#esc-page .esc-foot a { color: var(--ink); text-transform: capitalize; }
#esc-page .esc-foot .btn { margin-left: auto; }

@media (max-width: 720px) {
  .intro-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 40px; }
  .intro-figures { width: 200px; height: 200px; justify-self: start; }
  .intro-photo { width: 180px; height: 180px; }
  #intro-avatar { width: 80px; height: 120px; right: -20px; bottom: -14px; }
  #intro-name { font-size: clamp(52px, 17vw, 80px); }
  .esc-hero { grid-template-columns: 1fr; }
  .btn { padding: 9px 12px; font-size: 13px; }
  #dialog { padding: 11px 12px 9px; }
  #dialog .text { font-size: 13.5px; line-height: 1.42; }
  #dialog .text p { margin-bottom: 5px; }
  #dialog .speaker { font-size: 11px; margin-bottom: 3px; }
  #dialog .hint { font-size: 10px; margin-top: 6px; }
  #dialog .buttons { gap: 6px; margin-top: 8px; }
  .reels { grid-template-columns: 1fr; }
  #minimap { display: none; }
  #place { top: var(--hud-bottom, calc(max(12px, env(safe-area-inset-top)) + 96px)); }
  .nameplate span { font-size: 16px; }
  .nameplate small { display: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  #dialog.in, .intro-photo, #intro-avatar, .intro-copy *, .logo-row { animation: none !important; }
  #intro, #place, .btn { transition: none; }
}
body.no-motion *, body.no-motion *::before, body.no-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* ---------- Quest card (tour and waypoints) ---------- */
#objective {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 52px);
  right: 12px;
  width: 290px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 10px 12px 10px;
  z-index: 5;
}
#objective[hidden] { display: none; }
#objective .eyebrow { font: 11px Anton, Impact, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin: 0 0 3px; }
#objective strong { display: block; font: 19px/1.05 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
#objective span { display: block; font: 12px/1.45 Inter, system-ui, sans-serif; margin-top: 4px; opacity: 0.85; }
#objective .dots { display: flex; gap: 3px; margin-top: 9px; }
#objective .dots i { flex: 1; height: 4px; background: var(--hair); }
#objective .dots i.done { background: var(--ink); }
#objective .dots i.now { background: var(--accent); box-shadow: 0 0 0 1px var(--ink); }
.ob-btns { display: flex; gap: 6px; margin-top: 9px; }
.ob-btns .ghost { font-size: 11px; padding: 4px 8px; }

/* ---------- The pointer: a disc you cannot lose, and a label that says how far ---------- */
#guide {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
}
#guide[hidden] { display: none; }
#guide .g-halo {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 60px;
  height: 60px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: ping 1.7s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
/* The shadow sits on the unrotated parent so it always falls down-right, whichever way the arrow turns. */
#guide .g-disc {
  position: absolute;
  left: -32px;
  top: -14px;
  width: 64px;
  height: 28px;
  filter: drop-shadow(3px 3px 0 #0f1f1a);
}
#guide .g-arrow {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(var(--a, 0rad));
  fill: var(--accent);
  stroke: var(--on-accent);
  stroke-width: 3;
  stroke-linejoin: round;
}
#guide.on .g-halo { animation-duration: 1.1s; border-color: var(--ink); }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes ping {
  0% { transform: scale(0.52); opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0; }
}
#guide .g-label {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(15, 31, 26, 0.3);
}
#guide .g-label b {
  font: 400 12px/1 Anton, Impact, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
#guide .g-label em { font: 600 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--accent); }
#guide.above .g-label { top: auto; bottom: 42px; }

/* ---------- Altitude, while climbing ---------- */
#alt {
  position: absolute;
  left: 12px;
  top: calc(max(12px, env(safe-area-inset-top)) + 96px);
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 6px 11px 7px;
  z-index: 5;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.35s var(--ease);
  pointer-events: none;
}
#alt.show { opacity: 1; transform: translateY(0); }
#alt .alt-k {
  display: block;
  font: 10px Anton, Impact, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
#alt .alt-v {
  display: block;
  font: 400 20px/1 Anton, Impact, sans-serif;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
/* The one big thing you can do here, parked where a thumb or a cursor expects it. */
#action {
  position: absolute;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 18px);
  transform: translateX(-50%);
  z-index: 6;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  border-radius: 0;
  font: 400 17px/1 Anton, Impact, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 14px 26px;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.15s;
}
#action[hidden] { display: none; }
#action:hover { background: var(--on-accent); color: var(--accent); }
#action:active { transform: translateX(-50%) translateY(2px); box-shadow: 2px 2px 0 var(--shadow); }
body.touch #action { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 206px); font-size: 15px; padding: 12px 20px; }
#dialog:not([hidden]) ~ #action { display: none; }

/* ---------- Map ---------- */
#map {
  position: absolute;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 240px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  z-index: 4;
  overflow: hidden;
}
#map[hidden] { display: none; }
.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.map-head > span { font: 13px Anton, Impact, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.map-head div { display: flex; gap: 4px; }
.map-head button { font: 11px Inter, system-ui, sans-serif; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); padding: 3px 7px; cursor: pointer; }
.map-head button:hover { background: var(--accent); color: var(--on-accent); border-color: var(--ink); }
.map-head button[hidden] { display: none; }
.map-body { position: relative; line-height: 0; }
#map #minimap { position: static; display: block; width: 100%; height: auto; border: 0; box-shadow: none; opacity: 1; image-rendering: pixelated; }
.pins { position: absolute; inset: 0; }
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 3px 5px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 1px 1px 0 rgba(15, 31, 26, 0.5);
  transition: background 0.12s, transform 0.12s var(--ease);
}
.pin:hover { background: var(--accent); color: var(--on-accent); z-index: 3; transform: translate(-50%, -50%) scale(1.08); }
.pin.on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 1px 1px 0 var(--shadow), 0 0 0 2px rgba(201, 245, 88, 0.45);
  animation: pinpulse 1s ease-in-out infinite;
  z-index: 1;
}
@keyframes pinpulse { 50% { scale: 1.12; } }
.map-foot { margin: 0; padding: 5px 10px 6px; font: 11px Inter, system-ui, sans-serif; opacity: 0.6; border-top: 1px solid var(--hair); }
body.night .map-head { background: #0b1210; color: var(--ink); }
body.night .pin { background: rgba(28, 36, 33, 0.92); color: var(--ink); }
body.night .pin:hover, body.night .pin.on { background: var(--accent); color: var(--on-accent); }
#map-open { position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; font-size: 12px; padding: 8px 14px; border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow); }
#map-open[hidden] { display: none; }
#leave { position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 7; font-size: 15px; padding: 11px 16px; box-shadow: 3px 3px 0 var(--shadow); }
#leave[hidden] { display: none; }
#leave span { margin-right: 4px; }
body.touch #leave { top: calc(max(12px, env(safe-area-inset-top)) + 50px); bottom: auto; font-size: 13px; padding: 9px 12px; }

/* ---------- Talk to Aashish ---------- */
#chat { position: absolute; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 7; }
.chat-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(15, 31, 26, 0.3);
  padding: 5px 12px 5px 5px;
  font: 14px Anton, Impact, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-pill:hover { background: color-mix(in srgb, var(--ink) 82%, var(--accent)); }
.chat-pill[hidden] { display: none; }
.chat-pill canvas, #chat-panel header canvas { width: 30px; height: 30px; image-rendering: pixelated; background: var(--sky); flex: none; }
.chat-pill em { font: 700 10px Inter, system-ui, sans-serif; font-style: normal; background: var(--accent); color: var(--on-accent); padding: 2px 5px; letter-spacing: 0.06em; }
#chat-panel {
  width: 370px;
  height: min(540px, calc(100vh - 150px));
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  display: flex;
  flex-direction: column;
}
#chat-panel[hidden] { display: none; }
#chat-panel header { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--ink); }
.chat-head { flex: 1; min-width: 0; }
.chat-head strong { display: block; font: 16px Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; }
.chat-head small { display: block; font: 11px/1.35 Inter, system-ui, sans-serif; opacity: 0.65; }
.chat-clear { font: 11px Inter, system-ui, sans-serif; background: none; border: 1px solid var(--hair); padding: 3px 7px; cursor: pointer; color: var(--ink); }
.chat-x { font: 22px/1 Inter, system-ui, sans-serif; background: none; border: 0; cursor: pointer; padding: 0 4px; color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.msg { max-width: 86%; font: 14px/1.45 Inter, system-ui, sans-serif; padding: 8px 11px; border: 1px solid var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.assistant { align-self: flex-start; background: var(--surface); }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--paper); }
.msg a { color: inherit; }
.msg .go {
  display: block;
  margin-top: 8px;
  font: 12px Anton, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--ink);
  padding: 6px 9px;
  cursor: pointer;
}
.msg.typing { display: flex; gap: 4px; align-items: center; padding: 11px; }
.typing-note { margin-left: 6px; font: 11px Inter, system-ui, sans-serif; opacity: 0.7; }
.srcs { display: block; margin-top: 7px; font: 11px Inter, system-ui, sans-serif; opacity: 0.75; }
.srcs em { font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; opacity: 0.7; margin-right: 6px; }
.srcs a { color: inherit; margin-right: 8px; }
.msg.typing i { width: 6px; height: 6px; background: var(--ink); animation: blink 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 50% { opacity: 0.2; } }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.chat-suggest:empty { display: none; }
.chip { font: 12px Inter, system-ui, sans-serif; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 6px 9px; cursor: pointer; }
.chip:hover { background: var(--accent); color: var(--on-accent); }
.chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--ink); }
.chat-form input { flex: 1; min-width: 0; font: 16px Inter, system-ui, sans-serif; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--surface); color: var(--ink); }
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
body.chat-open #hint { display: none; }
@media (min-width: 900px) {
  body.chat-open #dialog { left: calc(50% + 200px); width: min(560px, calc(100% - 430px)); }
}
/* On narrower desktop windows the card would sit on top of the chat pill and map button: lift it. */
@media (max-width: 1100px) {
  body:not(.touch) #dialog { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); }
  body:not(.touch) #hint { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); }
}

/* ---------- Touch controls: translucent, console style ---------- */
#dpad { position: absolute; inset: 0; height: auto; pointer-events: none; z-index: 5; }
.stick-zone { position: absolute; left: 0; bottom: 0; width: 48vw; height: 44vh; pointer-events: auto; touch-action: none; }
.stick {
  position: absolute;
  left: 88px;
  top: calc(100% - 104px - env(safe-area-inset-bottom));
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 242, 234, 0.1), rgba(245, 242, 234, 0.28));
  border: 2px solid rgba(245, 242, 234, 0.65);
  box-shadow: 0 0 0 1px rgba(15, 31, 26, 0.28), inset 0 0 18px rgba(15, 31, 26, 0.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.stick.live { opacity: 1; transition: none; }
.stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(201, 245, 88, 0.6);
  border: 2px solid rgba(15, 31, 26, 0.45);
  box-shadow: 0 3px 8px rgba(15, 31, 26, 0.25);
}
.cluster { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 160px; height: 160px; pointer-events: none; }
#dpad .cluster button {
  pointer-events: auto;
  position: absolute;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(245, 242, 234, 0.22);
  border: 2px solid rgba(245, 242, 234, 0.7);
  color: #fff;
  text-shadow: 0 1px 2px rgba(15, 31, 26, 0.7);
  box-shadow: 0 0 0 1px rgba(15, 31, 26, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 0;
}
#dpad .cluster button:active { background: rgba(201, 245, 88, 0.6); }
#dpad #mapbtn {
  right: 0;
  bottom: 0;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  font: 12px Anton, Impact, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#dpad #mapbtn[hidden] { display: none; }
#dpad #mapbtn .map-glyph { width: 30px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(15, 31, 26, 0.6)); }
/* While the map is up, the button reads as the way to put it away again. */
#dpad #mapbtn[aria-pressed="true"] { background: rgba(201, 245, 88, 0.6); color: var(--on-accent); text-shadow: none; }
#dpad .mini { width: 52px; height: 52px; display: grid; place-items: center; align-content: center; gap: 1px; font: 10px Anton, Impact, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
#dpad .mini[hidden] { display: none; }
#dpad #cbtn { right: 92px; bottom: 4px; }
#dpad #wbtn { right: 8px; bottom: 96px; }
#dpad #cbtn canvas.face { width: 22px; height: 22px; image-rendering: pixelated; border-radius: 50%; background: var(--sky); }
body.touch #chat-open, body.touch #map-open { display: none !important; }
body.touch #chat { left: 0; right: 0; bottom: 0; }
body.touch #chat-panel { width: 100%; height: min(80dvh, 680px); border-width: 2px 0 0; box-shadow: 0 -8px 28px rgba(15, 31, 26, 0.2); }
body.chat-open #dpad { display: none; }
body.touch #map { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(90vw, 380px); z-index: 8; box-shadow: 5px 5px 0 var(--shadow); }
/* On a phone the card takes the whole band between the top bar and the thumb controls.
   Heights are % of #app, which is the screen actually visible, unlike vh on mobile browsers. */
body.touch #dialog {
  --top-bar: var(--hud-bottom, calc(max(12px, env(safe-area-inset-top)) + 92px));
  --thumbs: calc(max(16px, env(safe-area-inset-bottom)) + 168px);
  bottom: var(--thumbs);
  max-height: calc(100% - var(--top-bar) - var(--thumbs));
  overscroll-behavior: contain;
}
body.touch .reels iframe { height: max(260px, min(560px, calc(100vh - 400px))); }
body.touch .reels iframe { height: max(260px, min(560px, calc(100dvh - 400px))); }
/* Sideways, the thumbs are at the two edges, so the card sits low between them. */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #dialog {
    --thumbs: max(10px, env(safe-area-inset-bottom));
    width: min(560px, calc(100% - 360px));
  }
  body.touch .gallery { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  #objective { left: 12px; right: 12px; width: auto; top: var(--hud-bottom, calc(max(12px, env(safe-area-inset-top)) + 96px)); padding: 8px 10px; }
  /* A phone is too narrow for name, four buttons and the call button in one row: the name and
     the call button share the top line, the buttons get the whole width underneath. */
  #hud { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 8px; }
  .hud-left { display: contents; }
  .nameplate { justify-self: start; }
  #cta { grid-column: 2; grid-row: 1; align-self: start; }
  .hud-btns { grid-column: 1 / -1; flex-wrap: wrap; }
  .hud-btns .ghost { padding: 7px 9px; }
  #alt { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 262px); padding: 4px 9px 5px; }
  #alt .alt-v { font-size: 16px; }
  #guide .g-disc { left: -27px; top: -12px; width: 54px; height: 24px; }
  #guide .g-halo { left: -26px; top: -26px; width: 52px; height: 52px; }
  #objective strong { font-size: 15px; }
  #objective span { font-size: 11px; }
  body.has-objective #place { display: none; }
}

/* ---------- The tour, as a film: letterbox, title card, narration ---------- */
#cine { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
#cine[hidden] { display: none; }
#cine.on { pointer-events: auto; cursor: pointer; }
.cine-shade { position: absolute; inset: 0; background: #07100d; opacity: 0; transition: opacity 0.6s var(--ease); }
#cine.black .cine-shade { opacity: 1; }
.cine-bar {
  position: absolute; left: 0; right: 0; height: clamp(44px, 12vh, 96px);
  background: #07100d; transition: transform 0.5s var(--ease);
}
.cine-bar.top { top: 0; transform: translateY(-100%); }
.cine-bar.bottom {
  bottom: 0; transform: translateY(100%);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px env(safe-area-inset-bottom);
}
#cine.on .cine-bar { transform: none; }
.cine-cap, .cine-lead {
  margin: 0; color: #f5f2ea; font: italic 15px/1.4 Inter, system-ui, sans-serif; text-align: center;
  opacity: 0; transition: opacity 0.45s;
}
.cine-cap { max-width: min(620px, calc(100% - 220px)); }
#cine.cap .cine-cap, #cine.lead .cine-lead { opacity: 1; }
.cine-lead {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px)); font-size: clamp(16px, 2.4vw, 22px);
}
.cine-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px; text-align: center; color: #f5f2ea; opacity: 0; transform: scale(1.04);
  transition: opacity 0.5s var(--ease), transform 2.8s var(--ease);
}
#cine.card .cine-card { opacity: 1; transform: none; }
.cine-eyebrow { margin: 0; font: 13px Anton, Impact, sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.cine-title {
  margin: 8px 0 10px; font: 400 clamp(40px, 9vw, 96px)/0.95 Anton, Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere;
}
.cine-sub { margin: 0; font: italic clamp(14px, 2vw, 18px)/1.4 Inter, system-ui, sans-serif; opacity: 0.8; }
.cine-next {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: rgba(245, 242, 234, 0.45); font: 11px Inter, system-ui, sans-serif;
}
.cine-skip {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: transparent; color: #f5f2ea; border: 1px solid rgba(245, 242, 234, 0.5);
  font: 12px Inter, system-ui, sans-serif; padding: 7px 12px; cursor: pointer;
}
.cine-skip:hover, .cine-skip:focus-visible { background: #f5f2ea; color: #07100d; }
/* nothing on screen but the film while it plays */
body.cinema #hud, body.cinema #objective, body.cinema #guide, body.cinema #map, body.cinema #map-open,
body.cinema #chat, body.cinema #dpad, body.cinema #place, body.cinema #hint, body.cinema #leave { visibility: hidden; }
@media (max-width: 640px) {
  .cine-next { display: none; }
  .cine-cap { max-width: calc(100% - 120px); font-size: 13px; text-align: left; margin-right: auto; }
  .cine-skip { right: 12px; padding: 6px 10px; }
}