/* =========================================================
   AI-GNITING ACTION - styles.css
   Greyish navy + turquoise/orange glow.
   ========================================================= */

:root {
  --bg: #1A2538;
  --bg-deeper: #141E2E;
  --surface: #1F2D44;
  --surface-raised: #2A3A52;
  --surface-line: #38475F;
  --teal: #6FCFBE;
  --teal-bright: #8FE0D0;
  --teal-glow: rgba(111, 207, 190, 0.35);
  --orange: #E89651;
  --orange-bright: #F2A66B;
  --orange-glow: rgba(232, 150, 81, 0.32);
  --yellow: #FFD23F;
  --cream-yellow: #F5DD8C;
  --code-chip-bg: var(--yellow);
  --code-chip-fg: var(--bg);
  --code-chip-edge: transparent;
  --cream: #ECEFF6;
  --cream-muted: #9BA7BE;
  --cream-faint: #5B677F;
  /* Past is the muted one and Upcoming is the bright one: what has already
     happened needs to recede, what is coming needs to catch the eye. */
  --past: #4A5670;
  --current: #F57583;
  --future: #E5B14E;
  --success: #8FDCA9;
  --danger: #F57583;
  --font-display: 'Special Elite', 'Courier Prime', ui-monospace, monospace;
  --font-mono: 'Courier Prime', ui-monospace, 'Menlo', monospace;
  --font-ui: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

#err-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: #2a0f14; color: #ffd3d3;
  border-bottom: 2px solid var(--danger);
  font-family: var(--font-mono); font-size: 13px;
  padding: 12px 16px; z-index: 9999; white-space: pre-wrap;
  max-height: 40vh; overflow-y: auto;
}
#err-overlay strong { color: var(--danger); display: block; margin-bottom: 4px; }
#err-overlay small { display: block; margin-top: 8px; color: #a07070; cursor: pointer; text-decoration: underline; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ---------- FONT SCOPING ----------
   Narrative screens (welcome, story moments, finale) keep the typewriter
   feel with Courier Prime / Special Elite. Everything else — the working
   app screens — uses Segoe UI for readability. The selectors below restore
   the typewriter look on narrative screens only. */
#screen-welcome,
#screen-allset,
#screen-story,
#screen-mission-brief,
#screen-celebrate,
#screen-finale-return,
#screen-finale,
#screen-ending,
#screen-escape,
#screen-thanks {
  font-family: var(--font-mono);
}

/* Inside functional screens, redefine the typewriter font vars to Segoe UI
   so existing `font-family: var(--font-display)` rules on titles cascade
   to the UI font automatically. Modals + toasts also count as UI surfaces. */
#screen-registered,
#screen-workshops,
#screen-schedule,
#screen-venues,
#screen-scan,
#screen-map,
#screen-mission,
.modal-back,
.toast-host {
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);
  font-family: var(--font-ui);
}

/* ---------- Neural network background ---------- */
.bg-network {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(111, 207, 190, 0.05), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(232, 150, 81, 0.04), transparent 65%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g stroke='%236FCFBE' fill='%236FCFBE' opacity='0.16'><line x1='80' y1='100' x2='200' y2='80' stroke-width='0.5'/><line x1='200' y1='80' x2='350' y2='130' stroke-width='0.5'/><line x1='350' y1='130' x2='480' y2='90' stroke-width='0.5'/><line x1='200' y1='80' x2='280' y2='220' stroke-width='0.5'/><line x1='350' y1='130' x2='420' y2='280' stroke-width='0.5'/><line x1='480' y1='90' x2='550' y2='240' stroke-width='0.5'/><line x1='100' y1='250' x2='280' y2='220' stroke-width='0.5'/><line x1='280' y1='220' x2='420' y2='280' stroke-width='0.5'/><line x1='100' y1='250' x2='150' y2='400' stroke-width='0.5'/><line x1='280' y1='220' x2='320' y2='420' stroke-width='0.5'/><line x1='420' y1='280' x2='480' y2='380' stroke-width='0.5'/><line x1='550' y1='240' x2='480' y2='380' stroke-width='0.5'/><line x1='150' y1='400' x2='320' y2='420' stroke-width='0.5'/><line x1='320' y1='420' x2='480' y2='380' stroke-width='0.5'/><line x1='150' y1='400' x2='250' y2='560' stroke-width='0.5'/><line x1='320' y1='420' x2='400' y2='540' stroke-width='0.5'/><line x1='480' y1='380' x2='540' y2='510' stroke-width='0.5'/><line x1='80' y1='540' x2='250' y2='560' stroke-width='0.5'/><line x1='250' y1='560' x2='400' y2='540' stroke-width='0.5'/><line x1='400' y1='540' x2='540' y2='510' stroke-width='0.5'/><circle cx='80' cy='100' r='1.8'/><circle cx='200' cy='80' r='2.2'/><circle cx='350' cy='130' r='1.8'/><circle cx='480' cy='90' r='2.2'/><circle cx='100' cy='250' r='2'/><circle cx='280' cy='220' r='1.8'/><circle cx='420' cy='280' r='2.5'/><circle cx='550' cy='240' r='1.8'/><circle cx='150' cy='400' r='1.8'/><circle cx='320' cy='420' r='2.2'/><circle cx='480' cy='380' r='1.8'/><circle cx='80' cy='540' r='2'/><circle cx='250' cy='560' r='1.8'/><circle cx='400' cy='540' r='2'/><circle cx='540' cy='510' r='1.8'/></g><g fill='%23E89651' opacity='0.18'><circle cx='200' cy='80' r='2.8'/><circle cx='420' cy='280' r='3.2'/><circle cx='150' cy='400' r='2.8'/><circle cx='400' cy='540' r='2.8'/></g></svg>");
  background-size: auto, auto, 600px 600px;
  background-repeat: no-repeat, no-repeat, repeat;
  animation: networkDrift 80s linear infinite;
}
@keyframes networkDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 0, 600px 600px; }
}

/* ---------- Screens ---------- */
.screen {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  padding: 32px 20px calc(32px + var(--safe-bottom));
  max-width: 520px; margin: 0 auto;
}
.screen[hidden], [hidden] { display: none !important; }
.screen-center { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
.app-screen { padding: 0 0 calc(96px + var(--safe-bottom)); max-width: 520px; }

/* ---------- Paper panel ---------- */
.paper-panel {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px 22px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(111, 207, 190, 0.08), 0 12px 32px rgba(0, 0, 0, 0.32);
}
.paper-panel::before {
  content: ""; position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px dashed rgba(111, 207, 190, 0.14);
  border-radius: 6px; pointer-events: none;
}

.stamp-ornament {
  display: inline-block;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: 5px 11px;
  font-size: 12px; letter-spacing: 0.2em;
  border-radius: 3px; margin-bottom: 20px;
  transform: rotate(-1.5deg);
  position: relative; z-index: 1;
}

/* ---------- Typography ---------- */
.display-title, .display-title-sm {
  font-family: var(--font-display); color: var(--cream);
  font-weight: 400; line-height: 1.2; margin: 0 0 10px;
  position: relative; z-index: 1;
}
.display-title { font-size: clamp(30px, 7vw, 38px); }
.display-title-sm { font-size: clamp(23px, 5.4vw, 28px); margin-bottom: 8px; }
.title-yellow {
  color: var(--cream-yellow);
  text-shadow: 0 0 14px rgba(245, 221, 140, 0.18);
}
.ws-section-text strong.title-yellow,
.title-yellow strong { color: var(--cream-yellow); }
.accent-orange {
  color: var(--orange);
  text-shadow: 0 0 16px var(--orange-glow);
}
.muted-at {
  color: var(--cream-muted);
  font-weight: 400;
  margin: 0 2px;
}
.lede { color: var(--cream); margin: 0 0 24px; position: relative; z-index: 1; }
.muted { color: var(--cream-muted); }
.muted.sm { font-size: 14px; }
.field-label {
  display: block; font-size: 14px; letter-spacing: 0.1em;
  color: var(--cream-muted); text-transform: uppercase;
  margin: 18px 0 8px; position: relative; z-index: 1;
}
/* Lowercase variant used on the welcome screen's name prompt */
.field-label.name-label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 16px;
  color: var(--cream);
  font-family: var(--font-display);
}

/* ---------- Inputs ---------- */
.text-input {
  display: block; width: 100%;
  background: var(--bg-deeper);
  color: var(--cream);
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 17px; font-family: var(--font-mono);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative; z-index: 1;
}
.text-input::placeholder { color: var(--cream-faint); }
.text-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(111, 207, 190, 0.18), 0 0 18px rgba(232, 150, 81, 0.12);
}

/* ---------- Buttons (grey base + dual turquoise/orange glow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 13px 22px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.05em;
  transition: transform 0.08s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
  position: relative; z-index: 1;
  background: var(--surface-raised);
  color: var(--cream);
  border: 1.5px solid var(--surface-line);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, rgba(111, 207, 190, 0.10), rgba(232, 150, 81, 0.06));
  color: var(--cream);
  border-color: var(--teal);
  box-shadow:
    0 0 0 1px rgba(111, 207, 190, 0.25),
    0 0 22px -2px var(--teal-glow),
    0 0 28px -4px var(--orange-glow),
    inset 0 0 12px rgba(111, 207, 190, 0.08);
}
.btn-primary:hover:not(:disabled) {
  border-color: var(--teal-bright);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(111, 207, 190, 0.4),
    0 0 32px -2px var(--teal-glow),
    0 0 40px -4px var(--orange-glow),
    inset 0 0 16px rgba(111, 207, 190, 0.12);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--surface-line);
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn.wide { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.btn-row .btn { flex: 1; }
#btn-welcome-next { width: 100%; margin-top: 22px; }

/* ---------- Typed cursor + animations ---------- */
.typed {
  display: inline; border-right: 2px solid var(--teal);
  animation: caret 0.8s step-end infinite;
}
.typed.done { border-right-color: transparent; animation: none; }
@keyframes caret {
  0%, 100% { border-right-color: var(--teal); }
  50% { border-right-color: transparent; }
}
.fade-in { animation: fadeIn 0.4s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dots {
  display: inline-block;
  animation: dots 1.2s steps(4) infinite;
  width: 1.2em; text-align: left;
}
@keyframes dots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; }
}

/* ---------- Registered Y/N ---------- */
.reg-options { display: grid; gap: 10px; margin: 18px 0 6px; position: relative; z-index: 1; }
.reg-btn {
  display: grid; grid-template-columns: 40px 1fr;
  align-items: center; gap: 14px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1.5px solid var(--surface-line);
  border-radius: var(--radius);
  text-align: left; color: var(--cream);
  transition: border-color 0.18s ease, box-shadow 0.25s ease, transform 0.08s ease;
}
.reg-btn:hover {
  border-color: var(--teal);
  box-shadow: 0 0 18px -2px var(--teal-glow), 0 0 24px -4px var(--orange-glow);
}
.reg-btn:active { transform: translateY(1px); }
.reg-btn.selected {
  border-color: var(--teal);
  background: linear-gradient(180deg, rgba(111, 207, 190, 0.10), rgba(111, 207, 190, 0.04));
  box-shadow: 0 0 22px -2px var(--teal-glow);
}
.reg-btn.selected .reg-emoji {
  color: var(--bg-deeper);
  background: var(--teal);
  border-color: var(--teal);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.reg-emoji {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-deeper);
  border: 1px solid var(--surface-line);
  display: grid; place-items: center;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 22px; line-height: 1;
}
.reg-text { display: flex; flex-direction: column; gap: 2px; }
.reg-text strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.03em; color: var(--cream);
}
.reg-text small { font-size: 13px; color: var(--cream-muted); }

/* ---------- Workshop select ---------- */
.ws-section {
  margin-top: 18px;
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  position: relative; z-index: 1; overflow: hidden;
}
.ws-section-head {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  text-align: left; color: var(--cream);
  transition: background 0.15s ease;
}
.ws-section-head:hover { background: rgba(111, 207, 190, 0.05); }
.ws-section-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--bg-deeper);
  border-radius: 8px;
  color: var(--teal);
  font-size: 20px;
}
.ws-section-text { display: flex; flex-direction: column; }
.ws-section-text strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; letter-spacing: 0.04em;
}
.ws-section-text .muted.sm { font-size: 12px; margin-top: 2px; }
/* The chosen code, shown on a collapsed slot head. Same yellow as the pill
   chip it came from, so the eye connects the two. */
.ws-picked {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 4px;
  background: var(--code-chip-bg); color: var(--code-chip-fg);
  border: 1px solid var(--code-chip-edge);
}
.ws-section-chev {
  color: var(--cream-muted);
  transition: transform 0.2s ease;
  font-size: 16px;
}
.ws-section.open .ws-section-chev { transform: rotate(90deg); color: var(--teal); }
.ws-section-body {
  display: none;
  padding: 4px 14px 14px;
}
.ws-section.open .ws-section-body { display: block; }

.time-mini-label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin: 12px 0 6px; padding-left: 4px;
}
.time-mini-label::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); margin-right: 8px; vertical-align: middle;
}

.workshop-list { display: grid; gap: 8px; }
.workshop-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  background: var(--bg-deeper);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.workshop-pill:hover { border-color: var(--teal); box-shadow: 0 0 14px -2px var(--teal-glow); }
.workshop-pill.checked {
  border-color: var(--teal);
  background: rgba(111, 207, 190, 0.06);
  box-shadow: 0 0 14px -2px var(--teal-glow), inset 0 0 8px rgba(111, 207, 190, 0.05);
}
.ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-faint); flex-shrink: 0; }
.workshop-pill.checked .ws-dot { background: var(--teal); }
.workshop-pill input { display: none; }
.ws-name { flex: 1; font-size: 15px; display: flex; flex-direction: column; gap: 2px; }

/* The short code (1A, 2D, 3H) is what people wrote down at sign-up, so it
   gets a fixed-width slot at the head of the row — codes line up down the
   list and stay scannable however long the session name runs. */
.ws-code {
  flex-shrink: 0;
  min-width: 30px;
  padding: 3px 6px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.06em;
  text-align: center;
  color: var(--code-chip-fg);
  background: var(--code-chip-bg);
  border: 1px solid var(--code-chip-edge);
  border-radius: 5px;
}
.ws-meta { font-size: 12px; color: var(--cream-muted); }
.ws-repeat {
  margin-left: 6px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  /* Not --cream-faint: that is a border colour, and at 10px it fell to
     2.9:1 in dark and 2.4:1 in light. */
  color: var(--cream-muted);
  border: 1px solid var(--surface-line);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
}
.check-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--cream-muted);
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--bg); font-weight: bold; flex-shrink: 0;
}
.workshop-pill.checked .check-box { background: var(--teal); border-color: var(--teal); }
.workshop-pill.checked .check-box::after { content: "✓"; font-size: 13px; }

/* ---------- All-set / Story / Letsgo ---------- */
.allset-panel { text-align: center; padding: 40px 24px; }
.mascot-wrap {
  margin: 0 auto 18px;
  width: 140px; height: 140px;
  display: grid; place-items: center;
}
.mascot-wrap.small { width: 88px; height: 88px; margin-bottom: 12px; }

/* Mascot image injected by JS must fill its (sized) container, not its natural size */
[id^="mascot-placeholder"] {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.mascot-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mascot-bounce { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.story-panel { text-align: center; padding: 32px 20px 28px; }
.story-mascot {
  position: relative; width: 160px; height: 160px;
  margin: 4px auto 18px;
  display: grid; place-items: center;
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.story-static {
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: repeating-linear-gradient(to bottom, rgba(111, 207, 190, 0.06) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
  animation: staticShift 0.8s steps(8) infinite;
  pointer-events: none;
}
@keyframes staticShift {
  0% { transform: translateY(0); } 100% { transform: translateY(4px); }
}
.story-title {
  margin-bottom: 14px;
  font-size: clamp(20px, 4.8vw, 25px);
  line-height: 1.3;
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
.story-body {
  text-align: left; color: var(--cream);
  font-size: 16.5px; line-height: 1.6;
  position: relative; z-index: 1;
  margin-bottom: 24px;
}
.story-body.story-body-centered,
.story-body.story-body-centered p,
.story-body.story-body-centered .prize-tease,
.story-body.story-body-centered .prize-tease-text { text-align: center; }
.story-body.story-body-centered .prize-tease { align-items: center; }
.story-body p { margin: 0 0 12px; }
.story-body p,
.story-body [data-reveal] { opacity: 0; animation: storyReveal 0.6s ease forwards; }
.story-body [data-reveal="1"] { animation-delay: 0.4s; }
.story-body [data-reveal="2"] { animation-delay: 1.1s; }
.story-body [data-reveal="3"] { animation-delay: 1.8s; }
.story-body [data-reveal="4"] { animation-delay: 2.5s; }
@keyframes storyReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.story-body strong { color: var(--teal); font-weight: 400; }
.story-pill {
  display: inline;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 600;
}
.story-mystery {
  font-style: italic; color: var(--cream-muted);
  border-top: 1px dashed var(--surface-line);
  padding-top: 12px; margin-top: 14px;
}
#btn-brief-continue { animation: storyReveal 0.5s ease 2.6s both; }

/* Mission-brief prize tease: glowy gift box + orange highlight line */
.prize-tease {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px dashed var(--surface-line);
}
.prize-tease.prize-tease-flat {
  border-top: none;
  padding-top: 4px;
  margin-top: 18px;
}
.prize-tease-icon-wrap {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  animation: prizeFloat 2.6s ease-in-out infinite;
}
.prize-tease-icon {
  width: 100%; height: 100%;
  color: var(--orange);
  filter: drop-shadow(0 0 8px var(--orange-glow)) drop-shadow(0 0 16px var(--orange-glow));
}
.prize-tease-q {
  position: absolute;
  top: -8px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700;
  line-height: 1;
  color: var(--cream-yellow);
  text-shadow:
    0 0 8px rgba(245, 221, 140, 0.7),
    0 0 18px rgba(245, 221, 140, 0.45),
    0 0 30px rgba(255, 210, 63, 0.3);
  z-index: 2;
  pointer-events: none;
  animation: qBob 2.2s ease-in-out infinite;
}
@keyframes qBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}
@keyframes prizeFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}
.prize-tease-text {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
  text-align: center;
}

/* Story mascot video + spin-hop fallback */
.story-mascot video {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px var(--teal-glow));
}
.spin-hop { animation: spinHop 0.9s ease-in-out; }
@keyframes spinHop {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-34px) rotate(180deg); }
  55%  { transform: translateY(0) rotate(360deg); }
  70%  { transform: translateY(-14px) rotate(360deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* Scan picker modal */
.scanpick-list { display: grid; gap: 8px; margin: 14px 0 4px; }
.scanpick-item {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px;
  padding: 12px 14px;
  background: var(--surface-raised);
  border: 1.5px solid var(--surface-line);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.scanpick-item:hover {
  border-color: var(--teal);
  box-shadow: 0 0 14px -2px var(--teal-glow);
}
.scanpick-name {
  font-family: var(--font-display);
  font-size: 17px; color: var(--cream);
  letter-spacing: 0.04em;
}
.scanpick-loc { font-size: 13px; color: var(--cream-muted); }

/* ---------- App header + main ---------- */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  background: linear-gradient(to bottom, var(--bg) 70%, rgba(26, 37, 56, 0.9));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--surface-line);
}
.app-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  font-size: 15px;
  color: var(--teal);
}
.brand-mark {
  color: var(--orange);
  text-shadow: 0 0 8px var(--orange-glow);
}
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--cream-muted);
  font-size: 18px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
.icon-btn:hover {
  color: var(--teal);
  background: rgba(111, 207, 190, 0.08);
  box-shadow: 0 0 12px -2px var(--teal-glow);
}
.icon-btn.light { color: var(--cream); }
.app-main { padding: 18px 20px 24px; }
.greeting-block { margin-bottom: 18px; }
.greet-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0;
  margin: 0 0 6px;
  line-height: 1.2;
  font-weight: 400;
}
/* "Hello", the name and the comma all share one size so the greeting reads
   as a single tidy line. The name keeps its teal colour + glow so it still
   pops visually without dominating the layout. */
.greet-hi, .greet-name, .greet-comma {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 400;
}
.greet-hi    { color: var(--cream-muted); }
.greet-comma { color: var(--cream); }
.greet-name {
  color: var(--teal);
  text-shadow: 0 0 18px var(--teal-glow);
  word-break: break-word;
}
.greet-name-wrap {
  /* Keep the name and its trailing comma together so the comma never
     orphans onto its own line if the row wraps. */
  display: inline-flex;
  align-items: baseline;
}
.greet-sub { color: var(--cream); margin: 0; font-size: 15px; }

/* ---------- Status strip ---------- */
.status-strip {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  margin-bottom: 18px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.status-strip:hover {
  border-color: var(--teal);
  box-shadow: 0 0 18px -2px var(--teal-glow);
}
.status-strip-mascot {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg-deeper);
  border-radius: 50%;
  border: 1px solid var(--surface-line);
  overflow: hidden;
}
.status-strip-mascot img {
  width: 110%; height: 110%;
  object-fit: contain;
  margin-top: 4px;
}
.status-strip-body { min-width: 0; }
.status-strip-label {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: 4px;
}
.status-strip-bar {
  height: 6px;
  background: var(--bg-deeper);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
}
.status-strip-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 12px var(--teal-glow);
}
.status-strip-pct {
  font-family: var(--font-display);
  font-size: 18px; color: var(--teal);
  letter-spacing: 0.04em;
}
.status-strip-chev { color: var(--cream-muted); font-size: 20px; }

/* ---------- Section head ---------- */
.section-head {
  margin: 18px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--surface-line);
}
.section-head h2 {
  font-family: var(--font-display);
  color: var(--cream-yellow);
  text-shadow: 0 0 14px rgba(245, 221, 140, 0.18);
  margin: 0;
  font-size: 21px; letter-spacing: 0.03em;
  font-weight: 400;
}
.section-head p {
  margin: 4px 0 0;
  color: var(--cream-muted);
  font-size: 14px;
}

/* ---------- Timeline (time-state colors) ---------- */
.time-legend {
  display: flex; gap: 14px;
  font-size: 12px; color: var(--cream-muted);
  letter-spacing: 0.06em;
  margin-bottom: 14px; padding-left: 4px;
  align-items: center;
}
.legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot-past { background: var(--past); }
.dot-current { background: var(--current); box-shadow: 0 0 6px var(--current); }
.dot-future { background: var(--future); }

.timeline { position: relative; margin-bottom: 28px; }
.time-stop {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 8px; padding: 10px 0;
  position: relative;
}
.time-col {
  position: relative; display: flex; justify-content: center;
  padding-top: 8px;
}
.time-col::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: -10px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--surface-line) 0 4px, transparent 4px 8px);
  transform: translateX(-50%);
}
.time-stop:last-child .time-col::before { bottom: 10px; }
.time-stop:first-child .time-col::before { top: 14px; }

.time-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--future);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--future);
  position: relative; z-index: 1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.time-stop.state-past .time-dot {
  background: var(--past);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--past);
}
.time-stop.state-current .time-dot {
  background: var(--current);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--current), 0 0 14px var(--current);
  animation: currentPulse 1.6s ease-in-out infinite;
}
@keyframes currentPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--current), 0 0 10px var(--current); }
  50% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--current), 0 0 22px var(--current); }
}

.time-body {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  position: relative;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.time-stop.state-past .time-body { opacity: 0.72; }
.time-stop.state-current .time-body {
  border-color: var(--current);
  box-shadow: 0 0 18px -2px rgba(245, 117, 131, 0.3);
}
.time-stop.mine .time-body { border-left: 3px solid var(--teal); }
.time-stop.free .time-body,
.time-stop.break .time-body {
  background: transparent;
  border: 1px dashed var(--surface-line);
}
/* Tappable schedule items (everything except logistics + break) — point 1 */
.time-stop.tappable { cursor: pointer; }
.time-stop.tappable .time-body { transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.time-stop.tappable:hover .time-body,
.time-stop.tappable:focus-visible .time-body {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px var(--teal-glow);
}
.time-stop.tappable:active .time-body { transform: translateY(0); }

.time-when {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--cream);
}
/* Past times use the muted TEXT grey, not --past. --past (#4A5670) is a
   dot colour: on a card that is already dimmed to 0.72 it drops to ~1.6:1
   against its own background, which is unreadable. Same grey family, legible. */
.time-stop.state-past .time-when { color: var(--cream-muted); }
.time-stop.state-current .time-when { color: var(--current); }
.time-stop.state-future .time-when { color: var(--future); }
.time-when .muted { color: var(--cream-muted); }

.time-title {
  font-size: 15px; color: var(--cream);
  margin-top: 4px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.free-title { font-style: italic; color: var(--cream-muted); }
.time-sub { font-size: 13px; color: var(--cream-muted); margin-top: 4px; }
.time-tags { margin-top: 6px; }

.time-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.15em;
  padding: 3px 7px; border-radius: 3px;
  text-transform: uppercase;
  border: 1px solid var(--surface-line);
  color: var(--cream-muted);
}
.kind-keynote, .kind-plenary {
  color: var(--teal);
  border-color: rgba(111, 207, 190, 0.35);
  background: rgba(111, 207, 190, 0.06);
}
.kind-lunch {
  color: var(--orange);
  border-color: rgba(232, 150, 81, 0.35);
  background: rgba(232, 150, 81, 0.05);
}

.you-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.15em;
  padding: 3px 7px; border-radius: 3px;
  background: var(--teal); color: var(--bg);
  transform: translateY(-1px);
}

/* Session code on a schedule row — reads ahead of the session name so the
   row matches what people noted down when they signed up. */
.code-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.06em;
  padding: 2px 6px; margin-right: 7px;
  border-radius: 4px;
  /* Neutral, unlike the yellow chip on the selection screen. There the code
     is the thing you are matching against your sign-up email; here you have
     already committed, and the row's own venue line says where to go. */
  background: var(--surface-line); color: var(--cream);
  transform: translateY(-1px);
}

/* Floor groups nested inside the AI Showcase card. Styled a step quieter
   than a venue card: they are a way of splitting one list, not a second
   level of mission. */
.floor-group { margin-top: 2px; }
/* Sized up and given a background so the floor reads as a heading over the
   booths beneath it. At the same weight as a booth row it looked like just
   another item in the list rather than the thing dividing them. */
.floor-head {
  width: 100%;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 12px;
  margin-top: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit; text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.floor-head:hover { border-color: var(--teal); }
.floor-group.open .floor-head {
  border-color: var(--teal);
  background: rgba(111, 207, 190, 0.08);
}
.floor-name {
  font-family: var(--font-display);
  font-size: 18px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.floor-count { flex: 1; font-size: 12px; color: var(--cream-muted); }
.floor-chev {
  font-size: 18px; color: var(--cream-faint);
  transition: transform 0.2s ease, color 0.2s ease;
}
.floor-group.open .floor-chev { transform: rotate(90deg); color: var(--teal); }
.floor-body { display: none; padding: 8px 0 6px; }
.floor-group.open .floor-body { display: block; }

/* ---------- Venues ---------- */
.venue-list { display: grid; gap: 10px; }
.venue-card {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
}
.venue-card.open {
  border-color: var(--teal);
  box-shadow: 0 0 18px -4px var(--teal-glow);
}
.venue-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 14px 16px;
  width: 100%; text-align: left;
}
.venue-head:hover { background: rgba(111, 207, 190, 0.04); }
.venue-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface-raised);
  border-radius: 8px;
  color: var(--teal);
  font-size: 18px;
}
.venue-title {
  font-family: var(--font-display);
  font-size: 17px; color: var(--orange);
  letter-spacing: 0.04em;
  margin: 0 0 2px; font-weight: 400;
  text-shadow: 0 0 12px var(--orange-glow);
}
.venue-sub { font-size: 13px; color: var(--cream-muted); }
.venue-chev {
  color: var(--cream-muted);
  transition: transform 0.2s ease;
  font-size: 16px;
}
.venue-card.open .venue-chev { transform: rotate(90deg); color: var(--teal); }
.venue-body {
  display: none;
  padding: 4px 16px 16px;
  border-top: 1px dashed var(--surface-line);
}
.venue-card.open .venue-body { display: block; }

/* Mission instruction inside a venue card (e.g. "Visit any 3 booths") */
.venue-mission {
  margin: 10px 0 6px;
  padding: 10px 12px;
  background: rgba(111, 207, 190, 0.07);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--cream);
}
.venue-mission strong { color: var(--teal); }

.venue-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(56, 71, 95, 0.5);
}
.venue-item:last-child { border-bottom: none; }
.item-time {
  width: 80px;
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 14px; letter-spacing: 0.04em;
  line-height: 1.2;
}
.item-time small {
  display: block;
  color: var(--cream-muted);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
}
.item-name { color: var(--cream); font-size: 15px; line-height: 1.3; }
.item-venue { color: var(--cream-muted); font-size: 13px; margin-top: 2px; }

/* ---------- Stampable rows (cleaner, no skill tags) ---------- */
.stampable {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px 6px;
  border-bottom: 1px dashed rgba(56, 71, 95, 0.5);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
  position: relative;
}
.stampable:hover { background: rgba(111, 207, 190, 0.05); }
.stampable:active { transform: scale(0.985); }
.stampable:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.stampable:last-child { border-bottom: none; }
.stampable.done { opacity: 0.85; cursor: default; }
.stampable.done:hover { background: transparent; }
.stampable.done:active { transform: none; }
.stampable.shake { animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.stamp-mark {
  width: 28px; height: 28px;
  border: 1.5px dashed var(--surface-line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream-faint);
  font-size: 12px;
  transition: all 0.2s ease;
}
.stampable.done .stamp-mark {
  border-style: solid;
  border-color: var(--success);
  color: var(--success);
  background: rgba(143, 220, 169, 0.1);
  transform: rotate(-8deg);
}

.stamp-name { font-size: 15px; color: var(--cream); }
.stamp-name .stamp-hint {
  display: block;
  font-size: 12.5px;
  color: var(--cream-muted);
  margin-top: 4px;
  line-height: 1.45;
}
.stampable.done .stamp-name { color: var(--cream-muted); }
.stampable.done .stamp-name .stamp-hint { color: var(--cream-faint); }

.stamp-pts {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 0.06em;
}
.stampable.done .stamp-pts {
  color: var(--orange);
  text-shadow: 0 0 10px var(--orange-glow);
}

.scan-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--bg);
  background: var(--orange);
  padding: 1px 6px; border-radius: 3px;
  vertical-align: middle;
  margin-left: 6px;
  transform: translateY(-1px);
}
.stampable.scan-station:not(.done) .stamp-mark {
  border-color: var(--orange);
  color: var(--orange);
}

.row-stamp-overlay {
  position: fixed; z-index: 200;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 110px; height: 110px;
  background: var(--teal);
  color: var(--bg);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  box-shadow:
    0 0 0 4px rgba(111, 207, 190, 0.25),
    0 0 0 8px rgba(232, 150, 81, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.5);
  animation: rowStampLand 1.3s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.row-stamp-overlay span { font-size: 52px; line-height: 1; font-weight: 700; }
.row-stamp-overlay small {
  font-size: 11px; letter-spacing: 0.08em;
  margin-top: 4px; opacity: 0.85;
  text-transform: uppercase;
}
@keyframes rowStampLand {
  0% { transform: translate(-50%, -50%) scale(3.5) rotate(50deg); opacity: 0; filter: blur(4px); }
  40% { transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); opacity: 1; filter: blur(0); }
  55% { transform: translate(-50%, -50%) scale(0.88) rotate(-8deg); }
  70% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.55) rotate(-8deg); opacity: 0; }
}

.empty-line {
  padding: 12px 0;
  color: var(--cream-muted);
  font-size: 14px;
  font-style: italic;
}

.edit-sessions-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  margin: 12px 0 4px;
  background: transparent;
  color: var(--teal);
  border: 1px dashed rgba(111, 207, 190, 0.5);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.edit-sessions-link::before { content: "✎"; font-size: 13px; }
.edit-sessions-link:hover {
  background: rgba(111, 207, 190, 0.06);
  border-color: var(--teal); border-style: solid;
  box-shadow: 0 0 12px -2px var(--teal-glow);
}

/* ---------- Bottom nav (5 tabs) ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center; gap: 0;
  background: var(--surface);
  border-top: 1px solid var(--surface-line);
  padding: 8px 8px calc(8px + var(--safe-bottom));
  z-index: 30;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   COACHMARKS — first-time-only nudges that point at a UI element
   with a pulsing glow + a floating tooltip. Each fires once per
   user (see state.coachmarksSeen in app.js).
   ============================================================ */
@keyframes coachmark-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(238, 154, 73, 0.55),
      0 0 0 2px rgba(238, 154, 73, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(238, 154, 73, 0),
      0 0 0 2px rgba(238, 154, 73, 0.75);
  }
}
.coachmark-target {
  animation: coachmark-pulse 1.5s ease-in-out infinite;
  position: relative;
  border-radius: 8px;
}

.coachmark-tip {
  position: fixed;
  z-index: 100;
  max-width: 260px;
  padding: 10px 14px;
  background: #14181d;
  color: var(--cream);
  border: 1px solid var(--orange);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: coachmark-tip-in 0.28s ease both;
}
.coachmark-tip strong { color: var(--orange); font-weight: 600; }
.coachmark-tip::before {
  content: '';
  position: absolute;
  left: 24px;
  width: 0; height: 0;
  border: 7px solid transparent;
}
.coachmark-tip[data-placement="below"]::before {
  top: -7px;
  border-top: 0;
  border-bottom-color: var(--orange);
}
.coachmark-tip[data-placement="above"]::before {
  bottom: -7px;
  border-bottom: 0;
  border-top-color: var(--orange);
}
@keyframes coachmark-tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Orange highlight class for inline keywords in regular UI text */
.kw { color: var(--orange); font-weight: 600; }

/* ===== Redemption screen reframe =====
   The big "Show this to staff" block is intentionally the visual centerpiece
   so users see *that* as the action, not the button. The button below is
   styled with .btn-ghost (muted) and labeled "For CSC Staff" so it reads as
   something staff taps after handing over the prize — not a self-claim. */
.show-staff-banner {
  margin: 18px auto 12px;
  padding: 18px 14px;
  background: rgba(238, 154, 73, 0.08);
  border: 2px dashed var(--orange);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--orange);
  text-align: center;
}

.staff-action {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--surface-line);
}
.staff-action-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-faint);
  text-align: left;
}

/* ===== Replay finale icon button — sits below ending continue button ===== */
.btn-replay-finale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin: 14px auto 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream-muted);
  border: 1px solid var(--surface-line);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-replay-finale:hover,
.btn-replay-finale:focus-visible {
  color: var(--teal);
  border-color: var(--teal);
}
.btn-replay-finale:active { transform: scale(0.94); }

/* ===== New-progress animation on AIgrow skill cards =====
   When the user arrives on AIgrow with new stamps since their last visit,
   the affected skill card flashes once and a floating "+N" rises and fades.
   Earns the "1" badge they saw on the bottom nav. */
@keyframes skill-flash-glow {
  0%   { box-shadow: 0 0 0 0 rgba(238, 154, 73, 0); }
  20%  { box-shadow: 0 0 14px 4px rgba(238, 154, 73, 0.65); }
  100% { box-shadow: 0 0 0 0 rgba(238, 154, 73, 0); }
}
.skill-card.flash-new {
  animation: skill-flash-glow 1.4s ease;
  border-color: var(--orange);
}
.skill-plus-one {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-ui);
  font-size: 18px; font-weight: 700;
  color: var(--orange);
  pointer-events: none;
  animation: plus-one-float 1.4s ease forwards;
}
@keyframes plus-one-float {
  0%   { opacity: 0; transform: translateY(6px) scale(0.85); }
  18%  { opacity: 1; transform: translateY(0)   scale(1.05); }
  35%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
.nav-btn {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 6px 0;
  color: var(--cream-muted);
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  transition: color 0.15s ease;
}
.nav-btn:hover { color: var(--teal); }
.nav-btn.active { color: var(--teal); }
.nav-btn.active svg { filter: drop-shadow(0 0 4px var(--teal-glow)); }
.nav-btn span { white-space: nowrap; }

.nav-btn.nav-mission { gap: 6px; }  /* a touch more breathing room around the AIgrow icon */
.nav-mascot {
  width: 32px; height: 32px;
  display: grid; place-items: center;
}
.nav-mascot img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.nav-btn.nav-mission.lit .nav-mascot img {
  filter: drop-shadow(0 0 6px var(--teal-glow));
  transform: scale(1.05);
}
.nav-btn.nav-mission.lit { color: var(--teal); }
.nav-btn.nav-mission.lit:not(.active) {
  animation: navPulse 2.2s ease-in-out infinite;
}
@keyframes navPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  /* Darker than the toolbox dots: those carry no text, this does, and white
     on #E53935 is 4.23:1 at 11px. */
  background: #C62828;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.4);
  animation: badgePop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes badgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ---------- Scan screen ---------- */
.scan-screen {
  background: #000;
  padding: 0 0 calc(20px + var(--safe-bottom));
  max-width: 520px;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
.scan-topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  color: var(--cream);
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}
/* Explicit, not .icon-btn.light: that resolves to near-black on the light
   theme, which is why the close button appeared to be missing entirely. */
.scan-topbar .icon-btn {
  color: #ECEFF6;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  width: 36px; height: 36px;
}
.scan-topbar .icon-btn:hover { background: rgba(0,0,0,0.65); color: #8FE0D0; }

.scan-title {
  font-family: var(--font-display);
  letter-spacing: 0.15em;
  font-size: 15px;
  color: var(--teal);
}
.scan-stage {
  position: relative; width: 100%;
  flex: 1; min-height: 0;
  overflow: hidden;
  background: #111;
}
#camera-feed, #camera-snap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scan-stage[data-state="reveal"] #camera-feed { display: none; }
.scan-stage[data-state="reveal"] #scan-aim-overlay { display: none; }
.scan-stage[data-state="reveal"] #camera-snap { display: block !important; }
.scan-stage[data-state="reveal"] .reveal-overlay { display: flex !important; }
.scan-flash {
  position: absolute; inset: 0;
  background: #fff; opacity: 0;
  pointer-events: none; z-index: 5;
}
.scan-flash.flash { animation: flash 0.35s ease-out both; }
@keyframes flash {
  0% { opacity: 0; } 20% { opacity: 0.9; } 100% { opacity: 0; }
}
.scan-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 30px 20px;
  pointer-events: none;
}
.scan-frame {
  width: 70%; max-width: 260px;
  aspect-ratio: 1 / 1;
  border: 2px dashed var(--teal);
  border-radius: 18px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.35);
  margin-top: auto; margin-bottom: auto;
  position: relative;
  animation: scanPulse 2.4s ease-in-out infinite;
}
.scan-frame::before, .scan-frame::after {
  content: ""; position: absolute;
  width: 24px; height: 24px;
  border: 3px solid var(--teal);
  top: -4px; left: -4px;
  border-right: none; border-bottom: none;
  border-radius: 6px 0 0 0;
}
.scan-frame::after {
  top: auto; left: auto;
  bottom: -4px; right: -4px;
  border: 3px solid var(--teal);
  border-left: none; border-top: none;
  border-radius: 0 0 6px 0;
}
@keyframes scanPulse {
  0%, 100% { border-color: rgba(111, 207, 190, 0.7); }
  50% { border-color: var(--teal); }
}
.scan-hint {
  color: var(--cream);
  background: rgba(0,0,0,0.6);
  padding: 11px 18px;
  border-radius: 22px;
  font-size: 13px; letter-spacing: 0.04em;
  margin-top: 16px;
  text-align: center;
  max-width: 85%;
}
.reveal-overlay {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.reveal-overlay.hidden { display: none; }
.reveal-mascot {
  position: relative;
  width: 200px; height: 200px;
  animation: mascotReveal 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  /* Static drop-shadow only — no animated filter / no blur(). iOS Safari
     has a long-standing bug where `filter: blur()` on a transparent PNG
     renders the bounding box as opaque white for a frame or two, which
     is what iPhone testers saw as "AIgrow appeared then turned into a
     white square". Animating transform + opacity gives the same punch
     without tripping that bug. */
  filter: drop-shadow(0 0 18px var(--teal-glow));
}
@keyframes mascotReveal {
  0%   { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(4deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--teal);
  animation: sparkleOut 1s ease-out forwards;
  opacity: 0;
}
@keyframes sparkleOut {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.2); opacity: 0; }
}
.reveal-caption {
  position: absolute; bottom: 30px;
  left: 50%; transform: translateX(-50%);
  text-align: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--teal);
  padding: 10px 20px;
  border-radius: 8px;
  animation: captionIn 0.4s ease 0.6s both;
}
@keyframes captionIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.reveal-bang {
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 20px; letter-spacing: 0.08em;
}
.reveal-sub {
  font-size: 13px; color: var(--cream);
  letter-spacing: 0.08em; margin-top: 2px;
}
.scan-actions {
  padding: 18px 20px calc(18px + var(--safe-bottom));
  display: flex; justify-content: center; align-items: center;
  background: #000; min-height: 110px;
}
.shutter-btn {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: transparent;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  position: relative;
}
/* In auto mode the shutter is hidden; recognition happens automatically */
.scan-screen[data-scanmode="auto"] .shutter-btn { display: none; }
.scan-screen[data-scanmode="auto"] .scan-qr-indicator { display: flex; }
.scan-qr-indicator {
  display: none;
  align-items: center; gap: 10px;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.04em;
}
.scan-qr-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(111, 207, 190, 0.3);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scan-screen[data-state="reveal"] .scan-qr-indicator { display: none !important; }

/* Recognition confidence meter, sits just under the aim frame */
.scan-conf {
  width: 70%; max-width: 260px;
  height: 5px;
  margin-top: 14px;
  background: rgba(0,0,0,0.45);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(111, 207, 190, 0.3);
}
.scan-conf-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  border-radius: 3px;
  transition: width 0.12s linear;
  box-shadow: 0 0 8px var(--teal-glow);
}
.scan-stage[data-state="reveal"] .scan-conf { display: none; }

/* Aim frame brightens as recognition confidence rises (--conf set by JS) */
.scan-frame {
  animation: none;
  border-color: rgba(111, 207, 190, calc(0.5 + var(--conf, 0) * 0.5));
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), 0 0 calc(var(--conf, 0) * 24px) var(--teal-glow);
}

/* Passcode fallback link on the scan screen */
.scan-code-link {
  pointer-events: auto;
  margin-top: 14px;
  background: rgba(0,0,0,0.55);
  color: var(--cream-muted);
  border: 1px solid var(--surface-line);
  border-radius: 18px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.scan-code-link:hover { color: var(--teal); border-color: var(--teal); }
.scan-stage[data-state="reveal"] .scan-code-link { display: none; }
.shutter-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--cream);
  border-radius: 50%;
}
.shutter-core {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--orange));
  box-shadow: 0 0 14px var(--teal-glow), 0 0 18px var(--orange-glow);
  transition: transform 0.1s ease;
}
.shutter-btn:active .shutter-core { transform: scale(0.88); }
.reveal-actions {
  display: none; gap: 10px;
  width: 100%; max-width: 360px;
}
.reveal-actions .btn { flex: 1; }
.scan-screen[data-state="reveal"] .shutter-btn { display: none; }
.scan-screen[data-state="reveal"] .reveal-actions { display: flex; }

/* ---------- Mission screen ---------- */
.mission-main { padding: 0 0 24px; }
.mascot-hero {
  position: relative;
  padding: 24px 20px 16px;
  background:
    radial-gradient(ellipse at center top, rgba(111, 207, 190, 0.12), transparent 60%),
    radial-gradient(ellipse at center bottom, rgba(232, 150, 81, 0.08), transparent 70%);
  /* overflow visible so the toolbox tray can float above without being clipped */
  overflow: visible;
}
.mascot-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111, 207, 190, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 207, 190, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 75%);
}
.mascot-stage {
  position: relative; width: 100%;
  height: 240px;
  display: grid; place-items: center;
}
.mascot-ground {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(111, 207, 190, 0.18), transparent 70%);
  filter: blur(3px);
}
.mascot-art {
  position: relative;
  width: 200px; height: 220px;
  animation: mascotIdle 4s ease-in-out infinite;
}
@keyframes mascotIdle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
.mascot-art img, .mascot-art video {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
/* Stack the two mascot images on top of each other and fade between them.
   Only the .active one is visible. The browser keeps both layers around so
   swapping never goes through the base aigrow.png as an intermediate. */
.mascot-art img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.mascot-art img.active { opacity: 1; }
/* The watercolour variant PNG has more whitespace than the other variants,
   so AIgrow looks small at the same object-fit. Scale that variant up
   noticeably so he visually matches the rest of the kit. */
.mascot-art img[data-variant="crayons"] {
  transform: scale(1.32);
  transform-origin: center;
}
.mascot-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  display: grid; place-items: center;
}
.mascot-overlay .equipped-badge {
  position: absolute;
  top: 16%; right: 4%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--teal); color: var(--bg);
  display: grid; place-items: center;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    0 0 0 4px var(--surface),
    0 0 18px -2px var(--teal-glow);
  animation: equippedPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes equippedPop {
  from { transform: scale(0) rotate(-30deg); }
  to { transform: scale(1) rotate(0); }
}
.mascot-meta {
  text-align: center;
  margin-top: 8px;
  position: relative; z-index: 1;
}
.mascot-name {
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 28px; letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 14px var(--teal-glow);
}
.mascot-level {
  font-size: 13px; color: var(--cream-muted);
  letter-spacing: 0.08em;
  margin-top: 5px;
  text-transform: uppercase;
}
.mascot-level span { color: var(--cream); }

/* Toolbox */
.toolbox { position: absolute; bottom: 16px; left: 16px; z-index: 30; }
.toolbox-btn {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--teal);
  color: var(--teal);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 12px -2px var(--teal-glow);
  transition: transform 0.15s ease, background 0.15s ease;
  position: relative;
}
.toolbox-btn svg { width: 20px; height: 20px; }
.toolbox-btn:hover { background: var(--surface-raised); }
.toolbox-btn:active { transform: scale(0.95); }
.toolbox-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--surface);
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.toolbox-tray {
  position: absolute;
  bottom: 50px; left: 0;
  display: flex; flex-direction: column-reverse; gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 18px -2px var(--teal-glow);
  animation: trayPop 0.25s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  width: 56px;
  z-index: 31;
}
@keyframes trayPop {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toolbox-tray.is-empty {
  width: auto;
  min-width: 200px;
  max-width: 240px;
  flex-direction: row;
  padding: 10px 12px;
}
.toolbox-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream-muted);
  padding: 4px;
  text-align: center;
  white-space: normal;
  width: 100%;
  line-height: 1.4;
}
.toolbox-item {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1.5px solid var(--surface-line);
  background: var(--surface-raised);
  display: grid; place-items: center;
  cursor: default;
  transition: all 0.2s ease;
  color: var(--cream);
  /* NOT overflow:hidden. The "new" dot is deliberately positioned outside
     the button's box, so clipping the box clipped the dot away entirely.
     The artwork is rounded on the image instead. */
}
.toolbox-item > img { border-radius: 6px; }
.toolbox-item svg { width: 22px; height: 22px; }
.toolbox-item .equip-icon,
.toolbox-item .equip-svg { width: 28px; height: 28px; }
.toolbox-item .equip-img { width: 28px; height: 28px; }

/* Generic equip-icon wrapper: PNG primary, inline-SVG fallback.
   `.equip-img.failed` hides the broken image and reveals the SVG sibling. */
.equip-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  line-height: 0;
  position: relative;
}
.equip-img {
  display: inline-block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.equip-img.failed { display: none; }
.equip-svg {
  display: none;
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  color: inherit;
}
.equip-svg svg { width: 100%; height: 100%; }
.equip-img.failed + .equip-svg { display: inline-flex; }
.toolbox-item.stage-silhouette {
  opacity: 0.35;
  filter: grayscale(1) brightness(0.6);
  border-style: dashed;
}
.toolbox-item.stage-grey {
  opacity: 0.75;
  filter: grayscale(0.6) brightness(0.85);
}
.toolbox-item.stage-lit {
  cursor: pointer;
  border-color: var(--teal);
  background: rgba(111, 207, 190, 0.08);
  color: var(--teal);
  box-shadow: 0 0 12px var(--teal-glow);
  animation: toolGlow 2.4s ease-in-out infinite;
}
.toolbox-item.stage-lit:hover {
  background: rgba(111, 207, 190, 0.15);
  transform: translateY(-2px);
}
@keyframes toolGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(111, 207, 190, 0.15); }
  50% { box-shadow: 0 0 16px var(--teal-glow); }
}
.toolbox-item.equipped {
  background: var(--teal); color: var(--bg);
  border-color: var(--teal);
  filter: none; opacity: 1; animation: none;
  box-shadow: 0 0 0 3px rgba(111, 207, 190, 0.25);
}

.mission-divider {
  border: none;
  border-top: 1px dashed var(--surface-line);
  margin: 0 20px;
}

/* Skills list */
.skills-list { padding: 16px 20px 0; display: grid; gap: 12px; }
.skill-card {
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.skill-card:hover,
.skill-card:focus-visible {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px var(--teal-glow);
}
.skill-card:active { transform: translateY(0); }
.skill-card.complete {
  border-color: var(--teal);
  background: linear-gradient(135deg, rgba(111, 207, 190, 0.06), transparent 60%);
  box-shadow: 0 0 18px -4px var(--teal-glow);
}
.skill-body { min-width: 0; }
.skill-name {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 18px; letter-spacing: 0.04em;
  margin: 0;
}
.skill-card.complete .skill-name { color: var(--teal); }
.skill-sub { font-size: 13px; color: var(--cream-muted); margin-top: 4px; }
.skill-progress {
  margin-top: 10px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: center;
}
.skill-bar {
  height: 7px;
  background: var(--bg-deeper);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
}
.skill-fill {
  height: 100%; width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
  transition: width 0.5s cubic-bezier(0.2, 1, 0.4, 1);
}
.skill-count {
  font-family: var(--font-display);
  font-size: 14px; color: var(--cream);
  letter-spacing: 0.05em;
  text-align: right;
}

/* Prize box */
.prize-box {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;            /* lets the unlocked-state button drop to a new row */
  margin: 20px 20px 0;
  padding: 16px;
  border-radius: var(--radius);
  border: 1.5px dashed var(--surface-line);
  background: var(--surface);
  transition: all 0.2s ease;
  /* --prize-glow: 0..1, set by JS based on completed-skill ratio */
}
/* Hide the sub-text element entirely when empty so it doesn't create a gap. */
.prize-sub:empty { display: none; }
.prize-box.unlocked {
  border: 1.5px solid var(--teal);
  background: linear-gradient(135deg, rgba(111, 207, 190, 0.10), rgba(232, 150, 81, 0.05));
  animation: pulseGlow 2.4s ease-in-out infinite;
}
.prize-box.claimed {
  border-color: var(--success);
  background: rgba(143, 220, 169, 0.05);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--teal-glow); }
  50% { box-shadow: 0 0 0 6px rgba(111, 207, 190, 0); }
}

/* Prize icon: a gift SVG that brightens with progress */
.prize-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: var(--orange);
  filter:
    drop-shadow(0 0 calc(var(--prize-glow, 0) * 10px) var(--orange-glow))
    drop-shadow(0 0 calc(var(--prize-glow, 0) * 18px) var(--orange-glow));
  transition: filter 0.4s ease, color 0.3s ease;
}
.prize-icon svg { width: 100%; height: 100%; }
.prize-box.unlocked .prize-icon { color: var(--teal); animation: prizeFloat 2.2s ease-in-out infinite; }
.prize-box.claimed .prize-icon { color: var(--success); filter: none; }

.prize-body { flex: 1; min-width: 0; }
.prize-title {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 17px; letter-spacing: 0.04em;
}
.prize-box.unlocked .prize-title { color: var(--teal); }
.prize-box.claimed .prize-title { color: var(--success); }
.prize-sub { color: var(--cream-muted); font-size: 13px; margin-top: 2px; }

.prize-btn {
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.05em;
  background: var(--surface-raised);
  color: var(--cream-muted);
  border: 1px solid var(--surface-line);
  min-width: 56px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Lock icon inside the locked button: gets brighter + more glow as more skills are completed */
.prize-box.locked .prize-btn {
  background: var(--bg-deeper);
  color: var(--orange);
  border-color: var(--orange);
  opacity: calc(0.55 + var(--prize-glow, 0) * 0.45);
  box-shadow: 0 0 calc(var(--prize-glow, 0) * 18px) var(--orange-glow);
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
}
.prize-box.locked .prize-btn svg {
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 calc(var(--prize-glow, 0) * 10px) var(--orange-glow));
}
.prize-box.unlocked .prize-btn {
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
  box-shadow: 0 0 14px var(--teal-glow);
  opacity: 1;
  /* Wrap to its own row beneath the title — basis 100% forces a new line. */
  flex-basis: 100%;
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  font-size: 15px;
}
.prize-box.claimed .prize-btn {
  background: transparent;
  color: var(--success);
  border-color: var(--success);
}

/* ---------- Modals ---------- */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(5, 10, 20, 0.75);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100;
  padding: 20px;
  animation: fadeIn 0.2s ease both;
}
.modal-back[hidden] { display: none; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 28px 22px;
  width: 100%; max-width: 420px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--teal-glow),
    0 0 28px -2px var(--orange-glow);
  animation: popIn 0.25s cubic-bezier(0.2, 1.2, 0.6, 1) both;
}
@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-card h3 {
  font-family: var(--font-display);
  color: var(--teal);
  margin: 0 0 6px;
  font-weight: 400;
  font-size: 24px;
}
.modal-card h3.title-yellow {
  color: var(--cream-yellow);
  text-shadow: 0 0 14px rgba(245, 221, 140, 0.22);
}
.keyword-hint-wrap {
  margin: 10px 0 12px;
}
.keyword-hint-toggle {
  /* Subtle, link-like button. Easy to ignore if you don't need a hint —
     which is the whole point of hiding the hint behind a tap. */
  background: transparent;
  border: 1px dashed rgba(232, 150, 81, 0.45);
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.04em;
}
.keyword-hint-toggle::before {
  content: "?";
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(232, 150, 81, 0.18);
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.keyword-hint-toggle:hover { background: rgba(232, 150, 81, 0.08); }
.keyword-hint {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--orange);
  background: rgba(232, 150, 81, 0.08);
  border: 1px dashed rgba(232, 150, 81, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  line-height: 1.45;
  animation: hintFade 0.25s ease both;
}
@keyframes hintFade {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-feedback {
  min-height: 20px;
  margin-top: 8px;
  font-size: 14px;
}
.modal-feedback.err { color: var(--danger); }
.modal-feedback.ok { color: var(--success); }

.stamp-card { text-align: center; padding: 36px 24px; }
.stamp-big {
  font-family: var(--font-display);
  font-size: 60px; line-height: 1;
  color: var(--bg);
  background: var(--teal);
  width: 90px; height: 90px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin: 0 auto 18px;
  transform: rotate(-8deg);
  box-shadow:
    0 0 0 4px rgba(111, 207, 190, 0.2),
    0 0 0 8px rgba(232, 150, 81, 0.12);
  animation: stampIn 0.5s cubic-bezier(0.2, 1.3, 0.5, 1) both;
}
.stamp-big.redeem-stamp {
  font-size: 44px;
  background: var(--success);
}
@keyframes stampIn {
  0% { transform: scale(2) rotate(30deg); opacity: 0; }
  60% { transform: scale(0.85) rotate(-12deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); }
}
.skill-unlocked-card { position: relative; overflow: hidden; }
.skill-burst {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(111, 207, 190, 0.25), transparent 50%);
  animation: burstPulse 1.4s ease-out;
}
@keyframes burstPulse {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.8); }
}
.skill-reward-icon {
  width: 100px; height: 100px;
  margin: 0 auto 18px;
  border-radius: 50%;
  /* Muted off-white "paper" background — gives every equipment variant
     a neutral surface to sit on. Previously this was teal, which clashed
     with the teal goggles equipment and made the unlock icon hard to read. */
  background: #EFEAD9;
  color: var(--bg);
  display: grid; place-items: center;
  position: relative; z-index: 1;
  animation: stampIn 0.5s cubic-bezier(0.2, 1.3, 0.5, 1) both;
  box-shadow:
    0 0 0 4px rgba(239, 234, 217, 0.25),
    0 0 0 8px rgba(232, 150, 81, 0.12),
    0 0 22px rgba(239, 234, 217, 0.3);
}
.skill-reward-icon svg { width: 52px; height: 52px; }
.skill-reward-icon .equip-icon,
.skill-reward-icon .equip-svg { width: 56px; height: 56px; }
.skill-reward-icon .equip-img { width: 56px; height: 56px; }
.skill-headline {
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
  position: relative; z-index: 1;
}

/* ---------- Celebrate screen (Stage 1: "Congratulations!") ---------- */
.celebrate-panel { text-align: center; padding: 32px 22px 28px; }
.celebrate-panel .display-title { margin-bottom: 4px; }
.celebrate-panel .lede { margin-bottom: 18px; }
.celebrate-mascot {
  width: 200px; height: 200px;
  margin: 4px auto 22px;
  display: grid; place-items: center;
  animation: floaty 3s ease-in-out infinite;
}
.celebrate-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px var(--teal-glow)) drop-shadow(0 0 16px var(--orange-glow));
}

/* ---------- Finale screens (return video + finale video) ---------- */
/* Layout: black-backdrop screen, video centered. After the video ends the
   .after-video class is added by JS — the video scales down toward the top
   and the caption (and on the final stage, the Continue button) fade in below. */
.finale-screen {
  position: fixed; inset: 0;
  background: #000;
  z-index: 100;
  display: flex; flex-direction: column;
  animation: fsFade 0.35s ease both;
}
.finale-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 20px calc(28px + var(--safe-bottom));
  gap: 24px;
  position: relative;
}
.finale-video-wrap {
  position: relative;
  width: 100%; flex: 1; min-height: 0;
  max-width: 720px;
  display: grid; place-items: center;
  transition: flex 0.5s ease, max-height 0.5s ease;
}
.finale-video-wrap video {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  background: #000;
}
.finale-caption {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cream);
  max-width: 520px;
  min-height: 1.5em;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.finale-stage.after-video .finale-caption { opacity: 1; }
/* When the caption is typing, scale the video to a smaller "header" so the
   text gets visual focus. */
.finale-stage.after-video .finale-video-wrap {
  flex: 0 0 auto;
  max-height: 45vh;
}
.finale-caption:not(:empty):not(.done)::after {
  content: "▍";
  margin-left: 2px;
  color: var(--teal);
  animation: caretBlink 0.7s steps(1) infinite;
}
.finale-continue {
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
  width: 100%; max-width: 360px;
}
.finale-stage.after-video .finale-continue:not([hidden]) {
  opacity: 1; pointer-events: auto;
}

/* Tap-to-play overlay for when autoplay is blocked (iOS Safari) or the
   video can't buffer. Centered on top of the video, sized for thumbs. */
.video-tap-to-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 0;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: fadeIn 0.25s ease both;
  z-index: 10;
}
.video-tap-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--bg);
  display: grid; place-items: center;
  font-size: 32px;
  padding-left: 6px;          /* visually center the play triangle */
  box-shadow: 0 0 22px var(--teal-glow), 0 6px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}
.video-tap-to-play:active .video-tap-icon { transform: scale(0.92); }
.video-tap-label { opacity: 0.85; }

/* Loader shown while a fullscreen video is buffering — replaces the
   previous black-screen-for-5s experience on slow connections. */
.video-loader {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  color: var(--cream-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4);
}
.video-loader[hidden] { display: none; }
.video-loader-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(111, 207, 190, 0.25);
  border-top-color: var(--teal);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Ending narrative (Stage 3) ---------- */
.ending-screen {
  min-height: 100vh; min-height: 100dvh;
  padding: 32px 22px calc(36px + var(--safe-bottom));
  background:
    radial-gradient(ellipse at 50% 25%, rgba(111, 207, 190, 0.12), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(232, 150, 81, 0.10), transparent 60%),
    var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.ending-stage {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  animation: storyStageFade 0.5s ease both;
}
.ending-art-wrap {
  width: clamp(180px, 56vw, 240px);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  animation: floaty 3.4s ease-in-out infinite;
}
.ending-art-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)) drop-shadow(0 0 22px var(--teal-glow));
}
.ending-header {
  text-align: center;
  margin: 0;
}
.ending-lines {
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 420px;
  min-height: 110px;
  margin: 0 auto;
}
.ending-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
.ending-line:not(:empty):not(.done)::after {
  content: "▍";
  margin-left: 2px;
  color: var(--teal);
  animation: caretBlink 0.7s steps(1) infinite;
}
#btn-ending-continue { animation: fadeIn 0.4s ease both; }

/* ---------- Redemption screen (re-uses #screen-escape) ---------- */
.escape-screen {
  min-height: 100vh; min-height: 100dvh;
  max-width: 520px; margin: 0 auto;
  padding: 32px 20px calc(32px + var(--safe-bottom));
  display: flex; flex-direction: column; justify-content: center;
}
.escape-message {
  width: 100%;
}
.escape-panel { text-align: center; }
.escape-panel .display-title { margin-bottom: 8px; }

/* ---------- Toast (non-blocking inline error) ---------- */
.toast-host {
  position: fixed;
  left: 50%; top: 16px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 460px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--orange-glow),
    0 0 22px -2px var(--orange-glow);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(232, 150, 81, 0.15);
  color: var(--orange);
  border: 1.5px solid var(--orange);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
}
.toast-msg { color: var(--cream); }

/* ---------- Thanks screen ---------- */
.thanks-panel { text-align: center; padding: 36px 24px; }
.thanks-panel .mascot-wrap {
  width: 140px; height: 140px;
  margin: 0 auto 18px;
}
.thanks-panel .mascot-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.thanks-panel .display-title {
  font-size: clamp(22px, 5.5vw, 28px);
  line-height: 1.25;
}

/* ---------- Map WIP ---------- */
.wip-panel {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--surface-line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: 20px;
}
.wip-tag {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  margin-bottom: 16px;
}
.wip-panel h2 {
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 8px;
}
.wip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}
.wip-cell {
  background: var(--surface-raised);
  border: 1px dashed var(--surface-line);
  border-radius: var(--radius-sm);
  padding: 18px 10px;
  color: var(--cream-muted);
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   MAP — Level → Zone → Station
   Numbers do the work on the plan; names live in the legend.
   ============================================================ */
.map-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal); font-size: 13px;
  padding: 6px 2px; margin-bottom: 2px;
}
.map-back-chev { font-size: 20px; line-height: 1; }

/* ---- Levels ---- */
.map-levels { display: flex; flex-direction: column; gap: 8px; }
.map-level {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.map-level:not(:disabled):active { background: var(--surface-raised); }
.map-level:not(:disabled):hover { border-color: var(--teal); }
.map-level.is-empty { opacity: 0.55; }
.map-level-tag {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px;
  color: var(--teal); background: var(--surface-raised);
  border: 1px solid var(--surface-line);
}
.map-level-body { flex: 1; min-width: 0; }
.map-level-name { display: block; color: var(--cream); font-size: 14px; }
.map-level-sub {
  display: block; color: var(--cream-muted); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-level-count, .map-zone-count {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px;
  color: var(--orange); border: 1px solid var(--orange);
  border-radius: 999px; padding: 1px 7px;
}
.map-level-count.all-done, .map-zone-count.all-done {
  color: var(--success); border-color: var(--success);
}
.map-chev { flex-shrink: 0; color: var(--cream-faint); font-size: 19px; }

/* ---- Zones ---- */
.map-zones { display: flex; flex-direction: column; gap: 8px; }
.map-zone {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); padding: 12px 14px;
}
.map-zone:active { background: var(--surface-raised); }
.map-zone:hover { border-color: var(--teal); }
.map-zone-icon { flex-shrink: 0; color: var(--teal); display: flex; }
.map-zone-body { flex: 1; min-width: 0; }
.map-zone-name { display: block; color: var(--cream); font-size: 14px; }
.map-zone-sub { display: block; color: var(--cream-muted); font-size: 11.5px; }

.map-findit {
  background: var(--surface); border-left: 2px solid var(--teal);
  border-radius: 0; padding: 9px 12px; margin-bottom: 12px;
  color: var(--cream-muted); font-size: 12.5px;
}
.map-empty {
  border: 1px dashed var(--surface-line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center;
  color: var(--cream-muted); font-size: 13px;
}

/* ---- Plan ---- */
.map-plan {
  position: relative; height: 168px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); overflow: hidden;
}
.map-legend-row.unplaced .map-legend-num { color: var(--cream-faint); border-color: var(--surface-line); }
.map-legend-row.unplaced .map-legend-state { color: var(--cream-faint); }
.map-landmark {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream-faint); white-space: nowrap;
}
.map-plan-note {
  text-align: right;
  margin: -8px 2px 12px;
  font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cream-faint);
}
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--surface-raised); color: var(--teal);
  border: 1.5px solid var(--teal);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.map-pin.done { color: var(--success); border-color: var(--success); opacity: 0.6; }
.map-pin.focus {
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 0 0 4px var(--teal-glow);
  z-index: 2; opacity: 1;
}

/* ---- Legend: the part people actually read ---- */
.map-legend {
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  overflow: hidden;
}
.map-legend-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; background: var(--surface);
  border-bottom: 1px solid var(--surface-line);
}
.map-legend-row:last-child { border-bottom: none; }
.map-legend-row:active { background: var(--surface-raised); }
.map-legend-row.focus { background: var(--surface-raised); }
.map-legend-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--teal); border: 1px solid var(--teal);
}
.map-legend-row.done .map-legend-num { color: var(--success); border-color: var(--success); }
.map-legend-name { flex: 1; min-width: 0; color: var(--cream); font-size: 13px; }
.map-legend-row.done .map-legend-name { color: var(--cream-muted); text-decoration: line-through; }
.map-legend-state {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
}
.map-legend-row.done .map-legend-state { color: var(--success); }

/* ---------- Responsive ---------- */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .greet-hi, .greet-name, .greet-comma { font-size: 16px; }
  .display-title { font-size: 25px; }
  .display-title-sm { font-size: 20px; }
  .nav-btn { font-size: 9.5px; letter-spacing: 0.08em; }
  .mascot-stage { height: 200px; }
  .mascot-art { width: 170px; height: 190px; }
  .mascot-name { font-size: 24px; }
  .skill-name { font-size: 16px; }
  .venue-title { font-size: 16px; }
  .stamp-name { font-size: 14px; }
  .time-title { font-size: 14px; }
}
@media (min-width: 720px) {
  .screen, .app-screen, .bottom-nav { max-width: 520px; }
}
/* =========================================================
   STORY SCREEN V2 — line-by-line narration → popup → fullscreen video
   ========================================================= */
.story-screen-v2 {
  min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(111, 207, 190, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(232, 150, 81, 0.08), transparent 55%),
    var(--bg);
  padding: 28px 22px 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

/* --- Stage 1: art + typed lines --- */
.story-stage {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  animation: storyStageFade 0.5s ease both;
}
@keyframes storyStageFade { from { opacity: 0; } to { opacity: 1; } }

.story-art-wrap {
  width: min(96vw, 560px);
  aspect-ratio: 1387 / 536;
  display: grid; place-items: center;
  animation: floaty 3.4s ease-in-out infinite;
  margin: 0 -8px;          /* small bleed past the panel padding for visual punch */
}
.story-art-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(111, 207, 190, 0.20));
}

.story-lines {
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 96px;          /* reserve space so layout doesn't jump as lines type in */
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.story-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-wrap: balance;
  -webkit-text-wrap: balance;
  text-align: center;
}
.story-line-1 { color: var(--cream-yellow); }
.story-line-2 { color: var(--cream); }
/* Blinking caret on the line currently typing (the one without .done) */
.story-line:not(:empty):not(.done)::after {
  content: "▍";
  margin-left: 2px;
  color: var(--teal);
  animation: caretBlink 0.7s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* --- Stage 2: pop-up (simulates a notification on AIgrow's screen) --- */
.story-popup {
  position: fixed; inset: 0;
  background: rgba(20, 30, 46, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 90;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.story-popup.in { opacity: 1; }

.story-popup-card {
  position: relative;
  width: 100%; max-width: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.35s ease;
  transition-delay: 0.1s;
  /* iridescent.png overlay on a light base so the holographic look reads on any backing */
  background-color: #f5f0ff;
  background-image: url('iridescent.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 18px 40px -10px rgba(0, 0, 0, 0.55),
    0 0 32px -4px rgba(180, 200, 255, 0.45);
}
.story-popup.in .story-popup-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Retro window-chrome bar — slightly translucent so the iridescent peeks through */
.story-popup-head {
  display: flex; gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.story-popup-bar {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
}
.story-popup-bar:nth-child(1) { background: #e85d4f; }
.story-popup-bar:nth-child(2) { background: #e8b44f; }
.story-popup-bar:nth-child(3) { background: #4fb371; }

.story-popup-body {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 14px; align-items: center;
  padding: 18px 18px 6px;
}
.story-popup-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.55);
  color: #1a1a1a;
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  animation: pulseRing 1.8s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}
.story-popup-app {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
.story-popup-msg {
  font-family: var(--font-display);
  font-size: 15px;
  color: #0f0f0f;
  margin: 4px 0 0;
  line-height: 1.4;
}
.story-popup-card .btn-primary {
  margin: 18px;
  width: calc(100% - 36px);
  /* Black-on-light button to stay readable against the iridescent */
  background: rgba(255, 255, 255, 0.85);
  color: #0f0f0f;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  font-weight: 600;
}
.story-popup-card .btn-primary:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

/* --- Stage 3: fullscreen video, nothing else --- */
.story-video-fs {
  position: fixed; inset: 0;
  background: #000;
  z-index: 100;
  display: grid; place-items: center;
  animation: fsFade 0.35s ease both;
}
@keyframes fsFade { from { opacity: 0; } to { opacity: 1; } }
.story-video-fs video {
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  object-fit: contain;
  background: #000;
}


/* =========================================================
   ADDED: "LATER" pill, per-item equipment dots, settings,
   help, redemption steps, and the light theme.
   ========================================================= */

/* ---------- Per-item equipment dot ----------
   Unlocking the goggles puts a dot on the goggles specifically. The dot on
   the toolbox button is the aggregate that gets the user to open the tray;
   these are what they actually act on, so they persist until each piece is
   tapped rather than all clearing the moment the tray opens. */
.toolbox-item-dot {
  position: absolute;
  z-index: 3;
  top: -5px; right: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #E53935;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.35), 0 0 8px rgba(229, 57, 53, 0.55);
  animation: pulseDot 1.4s ease-in-out infinite;
  pointer-events: none;
}
.toolbox-item.is-new { border-color: #E53935; }
/* Aggregate dot matches the per-item dots so it reads as the same signal. */
.toolbox-dot {
  background: #E53935;
  box-shadow: 0 0 8px rgba(229, 57, 53, 0.6);
}

/* ---------- Settings modal ---------- */
.settings-card { text-align: left; max-width: 400px; }
.settings-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 18px 0 20px;
}
.settings-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  color: var(--cream);
  transition: border-color 0.16s ease, background 0.16s ease;
}
button.settings-row:hover { border-color: var(--teal); background: var(--surface); }
.settings-row-static { cursor: default; }
.settings-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(111, 207, 190, 0.10);
  color: var(--teal);
  font-size: 16px;
}
.settings-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.settings-text strong { font-size: 14px; font-weight: 600; }
.settings-text small { font-size: 11.5px; color: var(--cream-muted); line-height: 1.35; }
.settings-chev { color: var(--cream-faint); font-size: 20px; line-height: 1; }
.settings-row-danger .settings-icon { background: rgba(245, 117, 131, 0.12); color: var(--danger); }
button.settings-row-danger:hover { border-color: var(--danger); }

/* Light-mode switch */
.theme-switch {
  position: relative;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--surface-line);
  border: 1px solid var(--surface-line);
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.theme-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform 0.2s ease, background 0.2s ease;
}
.theme-switch.on { background: var(--teal); border-color: var(--teal); }
.theme-switch.on .theme-switch-knob { transform: translateX(20px); background: var(--bg); }

/* ---------- Help modal ---------- */
.help-card { text-align: left; max-width: 440px; }
.help-body {
  max-height: 58vh;
  overflow-y: auto;
  margin: 16px 0 18px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.help-block {
  padding: 14px;
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  margin-bottom: 10px;
}
.help-block-good { border-color: var(--teal); background: rgba(111, 207, 190, 0.07); }
.help-block h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cream-yellow);
}
.help-block p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.help-block p:last-child { margin-bottom: 0; }
/* Single map entry point on the Missions tab. Deliberately quiet — it's a
   fallback for "which floor is this on?", not a primary action. */
.venue-map-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 1px dashed var(--surface-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream-muted);
  font-size: 12.5px;
}
.venue-map-link svg { flex-shrink: 0; color: var(--teal); }
.venue-map-link:hover { border-color: var(--teal); color: var(--cream); }
.venue-map-link:active { background: var(--surface); }
.venue-map-chev { margin-left: auto; flex-shrink: 0; color: var(--cream-faint); font-size: 17px; }

.help-progress { color: var(--cream-muted); }


/* ---------- Collapsible FAQ rows ----------
   The panel opens as a short list of questions instead of a wall of prose;
   people tap only the one they came for. Native <details> so it stays
   keyboard- and screen-reader-accessible without extra JS. */
.help-q {
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  margin-bottom: 8px;
  overflow: hidden;
}
.help-q > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 10px;
  /* Comfortably past the 44px minimum tap target on a phone. */
  min-height: 46px;
}
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary::after {
  content: '＋';
  margin-left: auto;
  flex-shrink: 0;
  color: var(--teal);
  font-size: 15px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.help-q[open] > summary { color: var(--cream-yellow); }
.help-q[open] > summary::after { content: '−'; font-size: 18px; }
.help-q > summary:hover { background: var(--surface); }
.help-a {
  padding: 0 14px 13px;
  border-top: 1px dashed var(--surface-line);
  padding-top: 11px;
}
.help-a p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.help-a p:last-child { margin-bottom: 0; }

.help-list { list-style: none; margin: 0; padding: 0; }
/* One tappable row per outstanding skill: title and count on the first line,
   what to do on the second, the whole thing a button. */
.help-need {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.help-need:hover:not([disabled]) { border-color: var(--teal); background: var(--surface-raised); }
.help-need[disabled] { cursor: default; }
.help-need-advice {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--cream-muted); line-height: 1.5;
}
.help-need-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.help-need-head strong { font-size: 13.5px; }
.help-need-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  white-space: nowrap;
}
.help-need p { font-size: 13px; color: var(--cream-muted); margin: 0 0 8px; }

.help-jump {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  font-size: 12.5px; font-weight: 600;
  transition: background 0.16s ease;
}
.help-jump:hover { background: rgba(111, 207, 190, 0.12); }

.help-plain { margin: 0; padding-left: 18px; }
.help-plain li { font-size: 13px; line-height: 1.6; margin-bottom: 7px; }
.help-plain li:last-child { margin-bottom: 0; }

/* ---------- Redemption steps ---------- */
.redeem-steps {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: left;
  display: flex; flex-direction: column; gap: 12px;
}
.redeem-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start; gap: 12px;
}
.redeem-num {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.redeem-text { font-size: 14px; line-height: 1.5; padding-top: 2px; }
.redeem-note {
  margin: 12px 0 18px;
  font-size: 12.5px;
  color: var(--cream-muted);
  text-align: center;
}
/* The evaluation link is an <a> styled as a button — keep it on the button
   baseline instead of inheriting anchor underline / inline layout. */
a#btn-open-eval { display: block; text-align: center; text-decoration: none; }


/* =========================================================
   LIGHT THEME
   -----------
   Every colour resolves from these custom properties, so the swap
   is one attribute on <html data-theme>. The accent hues are
   darkened rather than reused: #6FCFBE reads beautifully on navy
   and is nearly illegible on paper.
   ========================================================= */
:root[data-theme="light"] {
  --bg: #F2EEE4;
  --bg-deeper: #E7E1D3;
  --surface: #FBF8F1;
  --surface-raised: #FFFFFF;
  --surface-line: #D8D0BE;
  --teal: #14796B;
  --teal-bright: #0E5F54;
  --teal-glow: rgba(20, 121, 107, 0.30);
  /* The brightest orange that still clears WCAG AA (4.5:1) on all three
     light surfaces: page 4.61, card 5.04, white 5.34. Anything more vivid
     drops the page background under 4.5, and the previous value was dark
     enough to read brown rather than orange. */
  --orange: #BF3F0A;
  --orange-bright: #A03409;
  --orange-glow: rgba(191, 63, 10, 0.26);
  --yellow: #9A6B00;
  /* Headings were #7C5310, which has enough green in it to read brown. This
     is the same orange family as --orange, one step darker: --orange itself
     drops to 4.10:1 on --bg-deeper, which is where the session headings sit. */
  --cream-yellow: #A8390A;
  --code-chip-bg: #FFD23F;
  --code-chip-fg: #1B2537;
  /* On paper the yellow fill sits at 1.11:1 against the cream card, so the
     chip has no visible edge — hue alone carries it. A darker yellow rule
     gives the block a boundary without turning it into a heavy button. */
  --code-chip-edge: #C99F14;
  --cream: #1B2537;
  --cream-muted: #56607A;
  --cream-faint: #8A93A6;
  --past: #AEB5C2;
  --current: #C2374A;
  --future: #A8390A;
  --success: #26714A;
  --danger: #C2374A;
}

/* The header gradient fades into the page colour, which is hardcoded navy
   in the base rule — it has to follow the theme or it bands against paper. */
:root[data-theme="light"] .app-header {
  background: linear-gradient(to bottom, var(--bg) 70%, rgba(242, 238, 228, 0.92));
}

/* A near-black scrim reads as a hole punched through a light page. */
:root[data-theme="light"] .modal-back { background: rgba(38, 44, 58, 0.42); }
:root[data-theme="light"] .story-popup { background: rgba(38, 44, 58, 0.45); }

/* White-on-paper is invisible. */
:root[data-theme="light"] .btn-primary:hover:not(:disabled) { color: var(--teal-bright); }

/* Shadows and the dashed inner rule are tuned for a dark page. */
:root[data-theme="light"] .paper-panel {
  box-shadow: 0 0 0 1px rgba(20, 121, 107, 0.10), 0 10px 28px rgba(70, 58, 34, 0.13);
}
:root[data-theme="light"] .paper-panel::before { border-color: rgba(20, 121, 107, 0.22); }
:root[data-theme="light"] .toolbox-btn,
:root[data-theme="light"] .toolbox-tray {
  box-shadow: 0 6px 18px rgba(70, 58, 34, 0.16), 0 0 14px -3px var(--teal-glow);
}

/* Accent washes were mixed for a dark surface; on white they fade to nothing,
   so the interactive states get their own light-mode values. */
:root[data-theme="light"] .toolbox-item.stage-lit { background: rgba(20, 121, 107, 0.10); }
:root[data-theme="light"] .toolbox-item.stage-lit:hover { background: rgba(20, 121, 107, 0.18); }
:root[data-theme="light"] .settings-icon { background: rgba(20, 121, 107, 0.12); }
:root[data-theme="light"] .help-block-good { background: rgba(20, 121, 107, 0.08); }
:root[data-theme="light"] .help-jump:hover { background: rgba(20, 121, 107, 0.14); }

/* The scan screen stays dark in BOTH themes on purpose: it is a live camera
   viewfinder, and light chrome around it washes out the frame the user is
   trying to aim at AIgrow. */
/* ---------- Map: floor switcher, floorplan photo, start pin ---------- */
.map-tabs {
  display: flex; gap: 6px;
  background: var(--bg-deeper);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 4px; margin-bottom: 14px;
}
.map-tab {
  flex: 1; padding: 9px 6px;
  background: none; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em;
  color: var(--cream-muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.map-tab.on { background: var(--teal); color: var(--bg); }

.map-photo {
  display: block; width: 100%; padding: 0;
  position: relative;
  background: var(--surface); border: 1px solid var(--surface-line);
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
}
.map-photo img { display: block; width: 100%; height: auto; }
/* Shown only when the image 404s, so a tab can be wired up before its
   artwork exists. */
.map-photo-missing { display: none; }
.map-photo.is-missing {
  cursor: default;
  min-height: 120px;
  display: grid; place-items: center;
  border-style: dashed;
}
.map-photo.is-missing img,
.map-photo.is-missing .map-photo-zoom,
.map-photo.is-missing .map-startpin { display: none; }
.map-photo.is-missing .map-photo-missing {
  display: block;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-muted);
}

.map-photo-zoom {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.62); color: #fff;
  padding: 4px 8px; border-radius: 4px;
}

/* Start pin. Positioned in percentages of the image so it holds its place at
   any zoom, and translated so the TIP of the teardrop sits on the coordinate
   with the body hanging above it. A labelled dot centred on the spot covered
   the very thing it was pointing at. */
.map-startpin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  line-height: 0;
}
.map-startpin-icon {
  fill: var(--current);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  position: relative; z-index: 1;
}
.map-startpin-icon circle { fill: #fff; }
/* Ring expanding from the tip, so the pulse reads as "this exact spot". */
.map-startpin-pulse {
  position: absolute; left: 50%; bottom: 0;
  width: 10px; height: 10px; margin-left: -5px; margin-bottom: -5px;
  border-radius: 50%;
  background: rgba(245,117,131,0.5);
  animation: startPinPulse 1.8s ease-out infinite;
}
@keyframes startPinPulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- Floorplan viewer ---------- */
.floorplan-viewer {
  position: fixed; inset: 0; z-index: 900;
  background: #0E1520;
  display: flex; flex-direction: column;
}
.floorplan-viewer[hidden] { display: none; }
body.viewer-open { overflow: hidden; }
.floorplan-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.floorplan-caption {
  flex: 1; font-size: 12px; color: #C9D2E2; line-height: 1.35;
}
.floorplan-tools { display: flex; gap: 6px; }

/* .icon-btn.light renders dark navy, which on the viewer's near-black ground
   sat at about 1.3:1 — present but unreadable. These are explicit. */
.floorplan-bar .icon-btn {
  color: #ECEFF6;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  width: 36px; height: 36px;
  font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.floorplan-bar .icon-btn:hover { background: rgba(255,255,255,0.18); }
.floorplan-bar #floorplan-close {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
}
.floorplan-frame {
  flex: 1; overflow: hidden;
  display: grid; place-items: center;
  touch-action: none;          /* gestures are handled in JS */
  cursor: grab;
}
.floorplan-stage {
  position: relative;
  transform-origin: center center;
  will-change: transform;
}
.floorplan-stage img {
  display: block;
  max-width: 100vw; max-height: 70vh;
  width: auto; height: auto;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.floorplan-reset {
  margin: 0 12px 12px;
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  color: #ECEFF6;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}
.floorplan-reset:hover { color: #8FE0D0; border-color: #8FE0D0; }

/* The coachmark tip is a dark overlay in BOTH themes by design. Its text
   therefore cannot follow --cream, which inverts to near-black on light, nor
   its accent follow --orange, which darkens for contrast against paper. */
:root[data-theme="light"] .coachmark-tip {
  color: #ECEFF6;
  border-color: #E89651;
}
:root[data-theme="light"] .coachmark-tip strong { color: #F2A66B; }
:root[data-theme="light"] .coachmark-tip[data-placement="below"]::before { border-bottom-color: #E89651; }
:root[data-theme="light"] .coachmark-tip[data-placement="above"]::before { border-top-color: #E89651; }

/* The scan screen sits on a live camera feed, so its chrome is dark in BOTH
   themes. Its text cannot follow --cream, which inverts to near-black under
   the light theme and left the "find AIgrow" instruction unreadable. */
:root[data-theme="light"] .scan-topbar { color: #ECEFF6; }
:root[data-theme="light"] .scan-title { color: #6FCFBE; }
:root[data-theme="light"] .scan-hint { color: #ECEFF6; }
:root[data-theme="light"] .scan-code-link {
  color: #C9D2E2;
  border-color: rgba(255,255,255,0.30);
}
:root[data-theme="light"] .scan-code-link:hover { color: #8FE0D0; border-color: #8FE0D0; }
:root[data-theme="light"] .shutter-ring { border-color: #ECEFF6; }
:root[data-theme="light"] .reveal-bang,
:root[data-theme="light"] .reveal-sub { color: #ECEFF6; }

/* Help panel emphasis. See note above .help-body: bold on its own did not
   separate from body text, so the accent colour carries it instead. */
#help-body strong { color: var(--orange); font-weight: 700; }
/* The questions are the thing you scan down, so they carry weight too. */
.help-q > summary { font-weight: 700; }

/* Light-theme contrast corrections. Each of these was under 4.5:1 on the
   near-white card surface; see the audit note on --cream-faint above. */
:root[data-theme="light"] .ws-repeat { border-color: var(--cream-faint); }
.venue-map-chev { color: var(--cream-muted); }
:root[data-theme="light"] .ws-section-icon { color: var(--teal-bright); }
/* The lunch pill sat at 4.46:1: orange text on an orange wash over cream.
   One step darker clears it without changing the badge's colour family. */
:root[data-theme="light"] .time-badge.kind-lunch { color: var(--cream-yellow); }

/* Same emphasis treatment as the help panel: bold alone does not separate
   from the muted paragraph colour it sits in. */
#ws-sub strong { color: var(--orange); font-weight: 700; }