:root {
  --color-bg: #12131a;
  --color-surface: #1b1d29;
  --color-text: #f1f1f4;
  --color-muted: #9497a8;
  --color-accent: #6fd18a;
  --color-unlocked: #4d8cff;
  --color-completed: #6fd18a;
  --color-wrong: #ff6f6f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

.page {
  max-width: 640px;
  margin-inline: auto;
  padding: 1rem 1rem 3rem;
}
/* The 640px cap is deliberate for the actual gameplay screens (phone-first
   by design), but the sales site (templates/quests/landing.html and its
   siblings, all wrapped in .landing — see landing.css) is a real desktop
   site with its own much wider max-width per section — .landing's
   negative margin already cancels .page's padding to reach edge-to-edge,
   but couldn't do anything about the *parent* .page itself still being
   capped at 640px, which was squeezing every sales-site section down to
   a narrow phone-width column even on a wide desktop browser. */
body:has(.landing) .page {
  max-width: none;
}

h1 { font-size: 1.5rem; margin-block-end: 0.25rem; }
h2 { font-size: 1.2rem; margin-block-end: 0.5rem; }

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 1rem;
  margin-block-end: 1rem;
}

.media img, .media video {
  width: 100%;
  border-radius: 10px;
  margin-block-end: 0.5rem;
}

input[type="text"], .choice-option {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, .35);
  background: #0a0d16;
  color: var(--color-text);
  font-size: 1rem;
}
input[type="text"]:focus, .choice-option:has(input:focus) {
  outline: none;
  border-color: rgba(0, 240, 255, .8);
}

.choice-option { display: block; margin-block-end: 0.5rem; cursor: pointer; }

button {
  background: var(--color-accent);
  color: #0a1a10;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  margin-block-start: 0.6rem;
  cursor: pointer;
}

.feedback { margin-block-start: 0.5rem; font-weight: 600; }
.feedback.correct { color: var(--color-completed); text-shadow: 0 0 8px rgba(111, 209, 138, .55); }
.feedback.wrong { color: var(--color-wrong); text-shadow: 0 0 8px rgba(255, 111, 111, .55); }

.muted { color: var(--color-muted); font-size: 0.9rem; }
.center { text-align: center; }

.whatsapp-link {
  color: #25d366;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37, 211, 102, .5);
}

/* The countdown/score chip (templates/quests/_timer_bar.html) — a glowing
   HUD pill everywhere it appears, not just on the map (see quest_map.css
   for the compact inline-chip variant used inside the map's own overlay). */
.timer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(10, 11, 18, .85);
  border: 1px solid rgba(0, 240, 255, .35);
  box-shadow: 0 0 14px rgba(0, 240, 255, .2);
  font-family: "Share Tech Mono", monospace;
  font-weight: 700;
  font-size: 1rem;
}

/* Rich-text narrative, written via the admin's Quill editor. Headings/lists
   get baseline styling; inline colors/fonts set by the founder in the
   editor come through as-is via their own inline styles. */
.narrative-rich-text :is(h1, h2, h3) { margin-block: 0.6rem 0.3rem; }
.narrative-rich-text h1 { font-size: 1.3rem; }
.narrative-rich-text h2 { font-size: 1.15rem; }
.narrative-rich-text h3 { font-size: 1.05rem; }
.narrative-rich-text p { margin: 0 0 0.6rem; }
.narrative-rich-text ul, .narrative-rich-text ol { margin: 0 0 0.6rem; padding-inline-start: 1.4rem; }
.narrative-rich-text a { color: var(--color-unlocked); }
.narrative-rich-text > *:last-child { margin-block-end: 0; }