:root {
  --bg: #EDEAE1;
  --surface: #FFFFFF;
  --surface-2: #F7F3EA;
  --text: #211E19;
  --text-muted: rgba(33, 30, 25, 0.6);
  --border: rgba(33, 30, 25, 0.14);
  --accent: #B9860C;
  --accent-soft: #B9860C1f;
  --accent-2: #33513C;
  --accent-2-soft: #33513C22;
  --danger: #A6432E;
  --serif: 'Playfair Display', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Used for eyebrows/labels/tags — a bold uppercase sans treatment, not a
     literal monospace font (kept the variable name to avoid touching every
     selector that references it). */
  --mono: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1712;
    --surface: #241F17;
    --surface-2: #2E271C;
    --text: #F3EDE0;
    --text-muted: rgba(243, 237, 224, 0.62);
    --border: rgba(243, 237, 224, 0.14);
    --accent: #E3B84C;
    --accent-soft: #E3B84C26;
    --accent-2: #7FB58B;
    --accent-2-soft: #7FB58B26;
    --danger: #D97A68;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 18px 64px;
}

.eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 4px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  text-wrap: balance;
  margin: 0 0 8px;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 12px; }
.muted { color: var(--text-muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}
.card.compact { padding: 14px 18px; }
.card.compact h2 { font-size: 1.2rem; margin-bottom: 4px; }
.card.compact p { margin-bottom: 4px; }

.screen { display: none; }
.screen.active { display: block; }

button, .btn {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 16px 20px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s ease;
}
button:hover { opacity: 0.92; }
button:active { opacity: 0.8; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, .option:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

button.secondary {
  background: transparent;
  color: var(--accent);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}
button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

input[type="text"], input[type="email"], input[type="password"], select, textarea {
  font-family: var(--sans);
  font-size: 1.1rem;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  margin-bottom: 12px;
}
textarea { resize: vertical; }

.session-code {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--accent);
  margin: 6px 0 14px;
}

.qr-wrap { text-align: center; margin-bottom: 16px; }
.qr-wrap img { border-radius: 12px; border: 1px solid var(--border); }

.map-preview { text-align: center; margin-bottom: 16px; }
.map-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.team-list, .stop-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.team-list li {
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-list li .check { color: var(--accent-2); font-family: var(--mono); font-weight: 600; font-size: 0.8rem; }

.stop-eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mechanic-badge {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.mechanic-badge.mosaic { background: var(--accent-soft); color: var(--accent); }
.mechanic-badge.modular { background: var(--accent-2-soft); color: var(--accent-2); }

.category-block { margin-bottom: 20px; }
.category-block .cat-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}

.option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  font-family: var(--sans);
}
.scale-row {
  display: flex;
  gap: 8px;
}
.scale-row .option {
  width: auto;
  flex: 1;
  text-align: center;
  margin-bottom: 0;
}
.option .letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(33, 30, 25, 0.08);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  margin-right: 10px;
}
.option.selected {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
}
.option.is-true {
  border-color: var(--accent-2);
}
.option.is-true::after {
  content: "TRUE";
  float: right;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.62rem;
  color: var(--accent-2);
  letter-spacing: 0.05em;
  background: var(--accent-2-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.option.tally {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
}
.option.tally .count {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text-muted);
}
.true-tag {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 10px;
}

.reveal-text p { margin-bottom: 14px; }
.reveal-text { font-size: 1rem; }

/* Team-facing reveal: one clearly separated block per category, own pick
   first, true answer only shown when the pick was wrong. Deliberately high
   contrast and generous spacing since this is read outdoors, often glancing
   quickly between the phone and the storyteller. */
.reveal-row {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.reveal-row:last-child { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; }
.reveal-row .cat-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}
.pick-box, .true-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 1.02rem;
  line-height: 1.4;
}
.pick-box + .true-box { margin-top: 10px; }
.pick-icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1.3;
}
.pick-box.correct {
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface));
  border: 1px solid var(--accent-2);
}
.pick-box.correct .pick-icon { color: var(--accent-2); }
.pick-box.incorrect {
  /* Neutral, not alarming — a non-matching guess isn't a mistake, so this
     deliberately avoids red/danger styling. */
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pick-box.incorrect .pick-icon { color: var(--text-muted); }
.true-box {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid var(--accent);
}
.true-box .pick-icon { color: var(--accent); }
.pick-text strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; opacity: 0.75; }

.clue-list, .whatif-block {
  font-size: 0.92rem;
  color: var(--text-muted);
}
.clue-list ul { margin: 0; padding-left: 20px; }
.clue-list li { margin-bottom: 6px; }

.note-block {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.progress {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 14px;
}

.center { text-align: center; }
.spacer { height: 12px; }
.button-row { display: flex; gap: 10px; }
.button-row > * { flex: 1; }

.token-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 1.7rem;
  line-height: 1;
  margin: 0 4px 4px 0;
  cursor: default;
}
.token-row { display: flex; flex-wrap: wrap; margin-top: 12px; }

.error-text { color: var(--danger); font-weight: 600; font-size: 0.88rem; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Wizard (accordion: every answered category stays visible and
   independently editable, instead of one hidden step at a time) ---------- */
.qcard { animation: qcard-in 0.25s ease; }
@keyframes qcard-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .qcard { animation: none; }
}
.qcard-open h3 { margin-bottom: 14px; }
.qcard-open .option { font-size: 1rem; padding: 14px 16px; }
.qcard-answered { padding: 14px 18px; }

.review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.review-answer { font-size: 0.95rem; font-weight: 500; margin-top: 2px; }
.review-change {
  width: auto;
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 0.78rem;
}

/* ---------- Route map ---------- */
.route-map-wrap {
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(33, 30, 25, 0.12);
}
.route-map-wrap.large { margin: 8px 0 18px; }
.route-map {
  width: 100%;
  height: auto;
  display: block;
}
.route-map text {
  font-family: var(--sans);
  pointer-events: none;
}
.route-map .map-pin-label text {
  font-weight: 600;
}
.route-map .pin-current {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .route-map .pin-current { animation: none; }
}
@keyframes pin-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ---------- End-of-walk certificate ---------- */
.certificate {
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%);
  border: 1px solid var(--accent);
}
.certificate h2 { font-family: var(--serif); font-size: 1.6rem; }

/* ---------- End-of-walk score card (bonus layer, see scoring.js) ---------- */
#endBadgeMount { width: 96px; margin: 10px auto; }
#endBadgeMount svg { width: 100%; height: auto; display: block; }
#endWinnerTitle { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--accent); }

/* ---------- Share-card overlay ---------- */
#shareCardCanvas { width: 100%; max-width: 320px; border-radius: 14px; display: block; margin: 0 auto 12px; }
.section-toggle-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.section-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.section-toggle-label input[type="checkbox"] { width: auto; }

/* ---------- Pushed-image overlay ---------- */
/* Always in the DOM (like #leaveBar), shown over whatever screen is active —
   toggled purely via .active, independent of the screens array so it never
   interrupts an in-progress guess underneath it. */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.active { display: flex; }
.overlay-content {
  background: var(--surface);
  border-radius: 20px;
  padding: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.overlay-content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ---------- Final photo gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gallery-grid figure {
  margin: 0;
}
.gallery-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.gallery-grid figcaption {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.gallery-grid figcaption a {
  color: var(--accent-2);
}
.gallery-grid figcaption button.save-photo {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  width: auto;
  color: var(--accent-2);
  cursor: pointer;
  text-decoration: underline;
}