/* ==========================================================
   CHAOTIC ATHLETICS : styles.css
   Comic book + retro game, in the logo colors.

   The rule for "trustworthy chaos": text blocks stay calm
   and straight. The energy lives in titles, badges, sound
   effects, speed lines, and halftone dots.

   Contents:
     1. Design tokens (colors, fonts, shapes)
     2. Base and reset
     3. Accessibility helpers
     4. Layout helpers
     5. Comic effects (speed lines, halftone, sound effects)
     6. Buttons
     7. Header and navigation
     8. Hero
     9. Level path (hero world map)
    10. Tape strip
    11. Shared section styles
    12. How it works + promises
    13. Origin Story comic panels
    14. Quests (level select)
    15. Forms
    16. Quiz
    17. Game
    18. Merch and About
    19. Footer
    20. Small screens
    21. Reduced motion
    22. Launch mode (launch bar + launch list)
    23. Header controls (language, dark mode, menu)
    24. Free guide section
    25. Thank-you page (thanks.html)
    26. Free guide hooks (quiz page pointer, download link)
    27. Player 1 (the mascot)
    28. Legal pages (privacy, terms, refunds)
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   Change colors and fonts here and they update everywhere.

   Color rules (so everything passes WCAG AA contrast):
   - --red is the exact logo red. Use it for decoration and
     BIG text only (24px and up).
   - --red-deep is a darker red for button backgrounds.
   - --red-text is for small red text (it changes in dark mode).

   Two kinds of color tokens:
   - BRAND colors never change (--red, --ink, --white).
   - THEME colors (--bg, --surface, --text, --line...) change
     in dark mode. Use these for anything that should flip.
   Dark mode values live in section 1b, right below.
   ========================================================== */
:root {
  /* Brand colors (fixed in both themes) */
  --red: #ed1c24;          /* logo red */
  --ink: #231f20;          /* logo black */
  --white: #ffffff;
  --red-deep: #c0141b;     /* button backgrounds */
  --red-dark: #8f0e14;     /* button hover */

  /* Theme colors: LIGHT (the default) */
  --bg: #faf6ef;           /* page background, warm white */
  --surface: #ffffff;      /* cards, boxes, inputs */
  --text: #231f20;         /* main text */
  --line: #231f20;         /* outlines, borders, path lines */
  --shadow: #231f20;       /* hard offset shadows */
  --solid: #231f20;        /* dark blocks: header, labels, HUD */
  --red-text: #c0141b;     /* small red text */
  --muted-bg: #ebe6dd;     /* locked quest cards */
  --muted-text: #4a4446;
  --hatch: rgba(35, 31, 32, 0.05);   /* locked card stripes */
  --speed: rgba(35, 31, 32, 0.09);   /* speed lines */

  /* Tells the browser to draw form controls and scrollbars
     to match the theme */
  color-scheme: light;

  /* Fonts */
  --font-display: "Permanent Marker", "Mistral", "Comic Sans MS", cursive;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Press Start 2P", ui-monospace, monospace;

  /* Hand drawn shapes: uneven corners look sketched, not perfect */
  --wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobbly-alt: 15px 255px 15px 225px / 225px 15px 255px 15px;

  /* Outlines and hard shadows */
  --border: 3px solid var(--line);
  --shadow-red: 7px 7px 0 var(--red);
  --shadow-ink: 6px 6px 0 var(--shadow);
  --shadow-small: 4px 4px 0 var(--shadow);

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;

  --max-width: 1100px;
}


/* ==========================================================
   1b. DARK MODE
   Turns on when:
   - the visitor's device is set to dark mode, unless they
     picked Light with the toggle, or
   - they picked Dark with the toggle (js/theme.js sets
     data-theme="dark" on the html tag).
   The same values are listed twice so both cases work.
   ========================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151213;
    --surface: #221d1e;
    --text: #f3ede4;
    --line: #d9d1c4;       /* light "chalk" outlines */
    --shadow: #000000;
    --solid: #0b0a0a;
    --red-text: #ff6b6b;
    --muted-bg: #2c2627;
    --muted-text: #c9bfb3;
    --hatch: rgba(255, 255, 255, 0.04);
    --speed: rgba(255, 255, 255, 0.06);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #151213;
  --surface: #221d1e;
  --text: #f3ede4;
  --line: #d9d1c4;
  --shadow: #000000;
  --solid: #0b0a0a;
  --red-text: #ff6b6b;
  --muted-bg: #2c2627;
  --muted-text: #c9bfb3;
  --hatch: rgba(255, 255, 255, 0.04);
  --speed: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}


/* ==========================================================
   2. BASE AND RESET
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keeps anchored sections from hiding under the sticky header */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  /* Tilted pieces should never cause sideways scrolling */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--red-text);
  font-weight: 700;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

a:hover {
  color: var(--text);
}

kbd {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 0 0.35em;
  box-shadow: 2px 2px 0 var(--red);
}


/* ==========================================================
   3. ACCESSIBILITY HELPERS
   ========================================================== */

/* Thick focus ring. Black on light areas, white on dark ones
   (see the header, tape, merch, and footer sections). */
:focus-visible {
  outline: 4px solid var(--line);
  outline-offset: 3px;
}

/* These get focus by script only; no ring needed */
main:focus,
h1:focus,
h2:focus {
  outline: none;
}

/* Hidden visually, still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  border: var(--border);
  box-shadow: var(--shadow-red);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-1);
}

/* Make sure the hidden attribute always wins */
[hidden] {
  display: none !important;
}


/* ==========================================================
   4. LAYOUT HELPERS
   ========================================================== */
.container {
  position: relative;
  z-index: 1; /* sits above the speed lines and halftone */
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.container-narrow {
  max-width: 760px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}


/* ==========================================================
   5. COMIC EFFECTS
   All decorative. They're CSS backgrounds or aria-hidden,
   so screen readers never hear them.
   ========================================================== */
.hero,
.section {
  position: relative;
  overflow: clip;
}

/* --- Speed lines ---
   Thin lines bursting from one point, like an action panel.
   The mask fades them out so they never sit behind text. */
.hero::before,
.section-merch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 80% 45%,
    var(--speed) 0deg 1.2deg,
    transparent 1.2deg 7deg
  );
  -webkit-mask-image: radial-gradient(circle at 80% 45%, transparent 18%, #000 45%, transparent 80%);
  mask-image: radial-gradient(circle at 80% 45%, transparent 18%, #000 45%, transparent 80%);
}

/* On the red merch section, the lines are white */
.section-merch::after {
  background: repeating-conic-gradient(
    from 0deg at 85% 30%,
    rgba(255, 255, 255, 0.12) 0deg 1.2deg,
    transparent 1.2deg 7deg
  );
  -webkit-mask-image: radial-gradient(circle at 85% 30%, transparent 10%, #000 40%, transparent 85%);
  mask-image: radial-gradient(circle at 85% 30%, transparent 10%, #000 40%, transparent 85%);
}

/* --- Halftone dots ---
   Classic comic print dots, fading out from one corner. */
.section-how::before,
.section-quiz::before,
.section-notify::before,
.section-about::before,
.section-story::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 340px;
  height: 340px;
  background-image: radial-gradient(var(--red) 2.2px, transparent 2.6px);
  background-size: 14px 14px;
  opacity: 0.35;
}

/* Top right corner */
.section-how::before,
.section-quiz::before,
.section-notify::before {
  top: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0, #000, transparent 70%);
}

/* Bottom left corner, in black */
.section-story::before,
.section-about::before {
  bottom: 0;
  left: 0;
  background-image: radial-gradient(var(--line) 2px, transparent 2.4px);
  opacity: 0.25;
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 0 100%, #000, transparent 70%);
}

/* --- Sound effects (POW! LEVEL UP!) ---
   A spiky comic burst with marker text. Always aria-hidden. */
.burst {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  padding: 1.6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-deep);
  /* 12 point star */
  clip-path: polygon(
    50% 0, 59% 18%, 79% 8%, 76% 29%, 98% 30%, 83% 46%,
    100% 61%, 79% 66%, 85% 88%, 64% 80%, 52% 100%, 42% 81%,
    21% 92%, 24% 70%, 2% 66%, 17% 50%, 0 33%, 22% 30%,
    18% 8%, 39% 17%
  );
  transform: rotate(-12deg);
  /* Black outline that follows the star shape */
  filter: drop-shadow(3px 0 0 var(--line)) drop-shadow(-3px 0 0 var(--line))
          drop-shadow(0 3px 0 var(--line)) drop-shadow(0 -3px 0 var(--line));
}

/* Pops in once when it first appears */
@keyframes burst-pop {
  0%   { transform: rotate(-30deg) scale(0); }
  70%  { transform: rotate(-8deg) scale(1.15); }
  100% { transform: rotate(-12deg) scale(1); }
}

.burst-card {
  top: -42px;
  right: -26px;
}

.burst-result {
  top: -50px;
  right: -30px;
  animation: burst-pop 0.4s ease-out both;
}


/* ==========================================================
   6. BUTTONS
   Hand drawn corners, hard shadows, a little wobble on hover.
   All buttons are at least 48px tall for easy tapping.
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: var(--border);
  border-radius: var(--wobbly);
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
  transform: translate(-2px, -2px) rotate(-1.5deg);
  box-shadow: 6px 6px 0 var(--shadow);
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: var(--shadow-small);
}

.btn-primary {
  background: var(--red-deep);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--red-dark);
  color: var(--white);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--wobbly-alt);
  box-shadow: 4px 4px 0 var(--red);
}

.btn-secondary:hover {
  color: var(--text);
  box-shadow: 6px 6px 0 var(--red);
}

.btn-ghost {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--wobbly-alt);
}

.btn-ghost:hover {
  color: var(--text);
}


/* ==========================================================
   7. HEADER AND NAVIGATION
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--solid);
  border-bottom: 5px solid var(--red);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-height: 48px;
}

.brand-logo {
  width: 34px;
  height: 51px;
  object-fit: contain;
  transform: rotate(-6deg);
  /* White glow so the black A shows on the dark header */
  filter: drop-shadow(0 0 1.5px var(--white)) drop-shadow(0 0 1.5px var(--white));
}

/* Brand name in the logo style: red, then black (white here,
   because the header is dark). Large text, so the logo red
   passes contrast on the dark background. */
.brand-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.brand-red {
  color: var(--red);
}

.brand-ink {
  color: var(--white);
}

.brand:hover .brand-ink {
  color: var(--red);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

/* Each link tilts a different way on hover */
.nav-list a:hover {
  color: var(--white);
  border-bottom-color: var(--red);
  transform: rotate(-3deg);
}

.nav-list li:nth-child(even) a:hover {
  transform: rotate(3deg);
}

/* Focus ring needs to show on the dark header */
.site-header :focus-visible {
  outline-color: var(--white);
}


/* ==========================================================
   8. HERO
   ========================================================== */
.hero {
  padding: var(--space-5) 0 calc(var(--space-5) + 1rem);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  align-items: center;
  gap: var(--space-4);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 5.5rem);
  line-height: 1.05;
  color: var(--text);
  transform: rotate(-2deg);
  /* Red offset, like the red outline on the logo's black A */
  text-shadow: 4px 4px 0 var(--red);
  /* One quick retro screen glitch when the page loads */
  animation: glitch 0.5s steps(1) 0.3s 1 both;
}

/* The glitch: the title jumps and its shadow splits for half
   a second, then settles. No flashing colors. */
@keyframes glitch {
  0%   { transform: rotate(-2deg) translate(0, 0); }
  20%  { transform: rotate(-2deg) translate(-4px, 2px); text-shadow: -4px 0 0 var(--red), 4px 2px 0 var(--ink); }
  40%  { transform: rotate(-2deg) translate(3px, -2px); text-shadow: 6px 0 0 var(--red); }
  60%  { transform: rotate(-2deg) translate(-2px, 0); text-shadow: -3px 3px 0 var(--red); }
  80%  { transform: rotate(-2deg) translate(2px, 1px); }
  100% { transform: rotate(-2deg) translate(0, 0); text-shadow: 4px 4px 0 var(--red); }
}

/* "first rep." in logo style: red letters, black outline */
.hero-highlight {
  display: inline-block;
  color: var(--red);
  transform: rotate(2deg) translateY(4px);
  text-shadow:
    -2px -2px 0 var(--ink),
     2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink),
     2px  2px 0 var(--ink),
     6px  6px 0 var(--ink);
}

/* Calm, straight text box so the message reads clearly */
.hero-text {
  font-size: 1.25rem;
  max-width: 58ch;
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-ink);
  padding: var(--space-2) var(--space-3);
}

/* Small retro label above headings, stuck on crooked */
.eyebrow {
  display: block;
  width: fit-content; /* only as wide as its text */
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1.6;
  text-transform: uppercase;
  background: var(--solid);
  color: var(--white);
  padding: 0.4rem 0.7rem;
  margin-bottom: var(--space-2);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--red);
}


/* ==========================================================
   9. LEVEL PATH (HERO WORLD MAP)
   A zigzag path of pixel nodes, like a game's level map.
   Change --shift to make the zigzag wider or narrower.
   ========================================================== */
.level-map {
  --node: 44px;     /* size of each square node */
  --shift: 54px;    /* how far right every other node sits */
  --gap: 16px;      /* space between rows */

  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-3) var(--space-3) var(--space-3);
}

.map-title {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  line-height: 1.6;
  text-transform: uppercase;
  border-bottom: 3px dashed var(--line);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-3);
}

.level-path {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  min-height: var(--node);
}

.node + .node {
  margin-top: var(--gap);
}

/* Zigzag: every other node shifts right */
.node:nth-child(even) {
  margin-left: var(--shift);
}

/* The path connecting each node to the one before it.
   A diagonal line drawn with a gradient in a small box. */
.node + .node::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--node) / 2 - var(--node) - var(--gap));
  height: calc(var(--node) + var(--gap));
  width: var(--shift);
  pointer-events: none;
}

/* Coming from the left (this node is shifted right) */
.node:nth-child(even)::before {
  left: calc(var(--node) / 2 - var(--shift));
  background: linear-gradient(to top right,
    transparent calc(50% - 2.5px), var(--line) calc(50% - 2.5px),
    var(--line) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

/* Coming from the right (this node is back on the left) */
.node:nth-child(odd)::before {
  left: calc(var(--node) / 2);
  background: linear-gradient(to top left,
    transparent calc(50% - 2.5px), var(--line) calc(50% - 2.5px),
    var(--line) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

/* The square pixel node with the level number */
.node-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--node);
  height: var(--node);
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
  border: var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
}

.node-name {
  min-width: 0; /* long names wrap beside the node, not under it */
  font-weight: 700;
  line-height: 1.3;
}

/* Only the start node wraps (for its "You start here" tag) */
.node:not(.node-start) {
  flex-wrap: nowrap;
}

/* Level 1: filled in, with a "you start here" tag */
.node-start .node-num {
  background: var(--solid);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--red);
}

.start-tag {
  flex-basis: 100%;
  margin-left: calc(var(--node) + 0.75rem);
  margin-top: -0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red-text);
}

.start-tag::before {
  content: "\25B2\00A0"; /* small up arrow, decorative */
}

/* The boss node: bigger, red, and spiky */
.node-boss .node-num {
  width: calc(var(--node) + 20px);
  height: calc(var(--node) + 20px);
  margin: -10px 0 -10px -10px;
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-deep);
  border: 0;
  box-shadow: none;
  clip-path: polygon(
    50% 0, 61% 20%, 84% 12%, 80% 36%, 100% 50%, 80% 64%,
    84% 88%, 61% 80%, 50% 100%, 39% 80%, 16% 88%, 20% 64%,
    0 50%, 20% 36%, 16% 12%, 39% 20%
  );
  filter: drop-shadow(2px 0 0 var(--line)) drop-shadow(-2px 0 0 var(--line))
          drop-shadow(0 2px 0 var(--line)) drop-shadow(0 -2px 0 var(--line));
}

/* Keep the boss name on the same line as its burst */
.node-boss {
  flex-wrap: nowrap;
}

.node-boss .node-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  transform: rotate(-2deg);
}


/* ==========================================================
   10. TAPE STRIP
   A crooked strip of tape across the page. The text is cut
   off at the edges on purpose.
   ========================================================== */
.tape-wrap {
  position: relative;
  z-index: 2;
  overflow: clip;
  /* Room above and below so the tilt and shadow aren't cut off */
  padding: 1rem 0;
  margin: -2.75rem 0 -1rem;
}

.tape-strip {
  position: relative;
  margin: 0 -2rem;
  background: var(--red-deep);
  border-top: var(--border);
  border-bottom: var(--border);
  transform: rotate(-1.5deg);
  overflow: hidden;
  box-shadow: 0 6px 0 var(--shadow);
}

.tape-text {
  /* WHOLE PHRASES ONLY
     The copies sit in a wrapping row, centered. Any copy that
     doesn't fully fit wraps onto a second line, and that line
     is hidden (max-height + overflow). So you only ever see
     complete phrases, centered on the strip. */
  --tape-line: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-height: var(--tape-line);
  overflow: hidden;
  margin: 0;
  /* Side padding keeps phrases off the tilted, trimmed ends */
  padding: 0 3.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: var(--tape-line);
  color: var(--white);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tape-item {
  white-space: nowrap;
}

/* A separator before every copy after the first. It belongs to
   the copy, so it disappears along with it. */
.tape-item + .tape-item::before {
  content: "\2716";
  margin: 0 0.9em;
}


/* ==========================================================
   11. SHARED SECTION STYLES
   ========================================================== */
.section {
  padding: var(--space-5) 0;
}

/* Section titles get the tilt and a brush stroke underline */
.section-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  transform: rotate(-1deg);
  padding-bottom: 0.6rem;
}

.section-title::after {
  content: "";
  position: absolute;
  left: -0.25em;
  right: -0.4em;
  bottom: 0;
  height: 0.45em;
  background: url("../assets/brush.svg") no-repeat center / 100% 100%;
  z-index: -1;
}

/* Alternate the tilt from section to section */
.section:nth-of-type(even) .section-title {
  transform: rotate(1deg);
}

.section-intro {
  max-width: 65ch;
  font-size: 1.15rem;
}

.small-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
}

.notice {
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  padding: var(--space-2);
}


/* ==========================================================
   12. HOW IT WORKS + PROMISES
   Deliberately calm: straight cards, clear numbers.
   ========================================================== */
.section-how {
  padding-top: calc(var(--space-5) + 1rem);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  counter-reset: none;
}

.step {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-ink);
  padding: var(--space-4) var(--space-3) var(--space-3);
}

/* Big pixel step number popping off the top edge */
.step-num {
  position: absolute;
  top: -22px;
  left: var(--space-3);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  background: var(--red-deep);
  color: var(--white);
  border: var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
}

.step-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
}

.step p {
  margin: 0;
}

/* Promise badges, like achievements */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  background: var(--solid);
  color: var(--white);
  padding: 0.55rem 1rem 0.55rem 0.7rem;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--red);
}

/* Pixel check mark in a red square (decorative) */
.badge::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--red-deep);
  color: var(--white);
  border-radius: 4px;
  font-size: 0.95rem;
}


/* ==========================================================
   13. ORIGIN STORY COMIC PANELS
   Panels are straight and easy to read; the captions carry
   the tilt.
   ========================================================== */
.comic-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.comic-panel {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-ink);
  padding: var(--space-4) var(--space-2) var(--space-2);
  min-height: 210px;
}

/* Panel number in the corner, like a game stage number */
.panel-number {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  background: var(--solid);
  color: var(--white);
  padding: 0.35rem 0.55rem;
}

/* Red caption box, like comic narration */
.panel-caption {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  background: var(--red-deep);
  color: var(--white);
  border: 2px solid var(--line);
  padding: 0.1rem 0.6rem;
  transform: rotate(-2deg);
}

.comic-panel:nth-child(even) .panel-caption {
  transform: rotate(1.5deg);
}

.panel-text {
  font-size: 1.1rem;
}

/* The final panel: boss defeated, black with speed lines */
.comic-panel-boss {
  background-color: var(--solid);
  background-image: repeating-conic-gradient(
    from 0deg at 100% 0,
    rgba(255, 255, 255, 0.07) 0deg 1.5deg,
    transparent 1.5deg 6deg
  );
  color: var(--white);
  box-shadow: var(--shadow-red);
}

.comic-panel-boss .panel-number {
  background: var(--red-deep);
}


/* ==========================================================
   14. QUESTS (LEVEL SELECT)
   ========================================================== */
.section-quests {
  background: var(--surface);
  border-top: var(--border);
  border-bottom: var(--border);
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4) var(--space-3);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.quest-card {
  position: relative;
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-3);
  background: var(--bg);
}

.quest-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
}

.quest-status {
  margin-bottom: var(--space-1);
}

/* "Unlocked" badge: retro game label */
.status-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.45rem 0.65rem;
  border: 2px solid var(--line);
}

.status-open {
  background: var(--solid);
  color: var(--white);
  box-shadow: 3px 3px 0 var(--red);
}

/* "Locked" badge: a crooked rubber stamp */
.status-locked {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--red-text);
  background: transparent;
  border: 3px solid var(--red-text);
  border-radius: 6px;
  padding: 0.1rem 0.6rem;
  transform: rotate(-7deg);
}

.status-locked::before {
  content: "\1F512\00A0"; /* lock emoji + space, decorative */
}

/* Locked quests: faded with light hatching, still readable */
.quest-locked {
  background-color: var(--muted-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hatch) 0 2px,
    transparent 2px 12px
  );
  color: var(--muted-text);
  border-style: dashed;
  box-shadow: var(--shadow-ink);
}

.quest-locked .quest-title {
  color: var(--text);
}

.level-list {
  padding-left: 1.4rem;
  margin: 0 0 var(--space-2);
}

.level-list li::marker {
  color: var(--red-text);
  font-weight: 700;
}

.level-list li:last-child {
  font-weight: 700;
}

/* "Beaten by us" seal with the CA mark */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 0.2rem 0.8rem 0.2rem 0.5rem;
}

.seal img {
  width: 22px;
  height: 33px;
  object-fit: contain;
  /* Thin outline so the black A shows up in dark mode too */
  filter: drop-shadow(0 0 1px var(--line));
}

.quest-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text);
  margin: var(--space-1) 0 var(--space-2);
  text-shadow: 2px 2px 0 var(--red);
}

.progress-label {
  display: block;
  font-weight: 700;
  margin-top: var(--space-2);
  color: var(--text);
}

/* Pixel style health bar */
.quest-progress {
  width: 100%;
  height: 24px;
  margin: var(--space-1) 0 var(--space-2);
  appearance: none;
  -webkit-appearance: none;
  border: var(--border);
  background: var(--surface);
}

.quest-progress::-webkit-progress-bar {
  background: var(--surface);
}

.quest-progress::-webkit-progress-value {
  background: repeating-linear-gradient(90deg, var(--red) 0 14px, var(--red-dark) 14px 18px);
}

.quest-progress::-moz-progress-bar {
  background: repeating-linear-gradient(90deg, var(--red) 0 14px, var(--red-dark) 14px 18px);
}


/* ==========================================================
   15. FORMS
   ========================================================== */
.signup-form {
  margin-top: var(--space-2);
}

.signup-form label {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.input-row input {
  flex: 1 1 200px;
  min-width: 0;  /* lets the input shrink inside narrow cards */
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: var(--border);
  border-radius: 6px;
}

.input-row input[aria-invalid="true"] {
  border-color: var(--red-text);
  box-shadow: 0 0 0 2px var(--red-deep);
}

.form-status {
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-1);
  min-height: 1.6em;
}

/* Radio and checkbox rows */
.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-1);
}

.choice input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--red-deep);
  margin: 0;
}

.choice label {
  cursor: pointer;
  padding: 0.35rem 0;
}


/* ==========================================================
   16. QUIZ
   ========================================================== */
.quiz-box {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-3) var(--space-4);
}

.quiz-result {
  position: relative;
}

.quiz-step {
  border: 0;
  margin: 0;
  padding: 0;
}

.quiz-step legend {
  padding: 0;
  margin-bottom: var(--space-2);
}

.quiz-count {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.68rem;
  background: var(--solid);
  color: var(--white);
  padding: 0.3rem 0.5rem;
  margin-bottom: var(--space-1);
  transform: rotate(-2deg);
}

.quiz-question {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.quiz-question:focus {
  outline: none;
}

.quiz-error {
  color: var(--red-text);
  font-weight: 700;
  margin: var(--space-1) 0 0;
}

.quiz-error:empty {
  margin: 0;
}

.quiz-result-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.25rem;
  color: var(--text);
  text-shadow: 3px 3px 0 var(--red);
  transform: rotate(-1.5deg);
  padding-right: 4rem; /* room for the POW! burst */
}

.quiz-result-title:focus {
  outline: none;
}


/* ==========================================================
   17. GAME
   ========================================================== */
.section-game {
  background: var(--surface);
  border-top: var(--border);
  border-bottom: var(--border);
}

.game-instructions ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-2);
}

.game-instructions li {
  margin-bottom: 0.4rem;
}

.game-options {
  border: var(--border);
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  background: var(--bg);
}

.game-options legend {
  font-weight: 700;
  padding: 0 0.4rem;
  background: var(--bg);
}

/* Score readout, styled like an arcade HUD */
.game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.game-stats div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  background: var(--solid);
  color: var(--white);
  padding: 0.5rem 0.75rem;
  box-shadow: 3px 3px 0 var(--red);
}

.game-stats div:nth-child(2) {
  transform: rotate(-2deg);
}

.game-stats dt {
  font-family: var(--font-pixel);
  font-size: 0.68rem;
}

.game-stats dd {
  font-family: var(--font-pixel);
  font-size: 1rem;
  margin: 0;
}

/* The canvas scales to fit any screen width */
.game-stage {
  border: 4px solid var(--line);
  box-shadow: var(--shadow-red);
  background: var(--bg);
  line-height: 0;
}

.game-stage canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 260;
  display: block;
}

.game-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* Touch buttons: no text selection or double tap zoom */
.touch-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.game-reward {
  margin-top: var(--space-3);
  background: var(--solid);
  color: var(--white);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-2) var(--space-3);
}

.reward-code {
  font-family: var(--font-pixel);
  font-size: 1rem;
  background: var(--red-deep);
  color: var(--white);
  border: 2px solid var(--white);
  padding: 0.25rem 0.5rem;
}


/* ==========================================================
   18. MERCH AND ABOUT
   ========================================================== */
.section-merch {
  background: var(--red-deep);
  color: var(--white);
  /* Torn paper top edge */
  clip-path: polygon(
    0 18px, 4% 6px, 9% 16px, 15% 2px, 22% 14px, 28% 4px, 35% 18px,
    42% 6px, 48% 15px, 55% 0, 61% 12px, 68% 4px, 74% 17px, 81% 5px,
    87% 14px, 93% 2px, 100% 12px, 100% 100%, 0 100%
  );
  margin-top: -10px;
}

.section-merch .section-title {
  color: var(--white);
  text-shadow: 3px 3px 0 var(--ink);
}

/* Black brush stroke here, since the background is red */
.section-merch .section-title::after {
  filter: brightness(0.2);
}

.section-merch .eyebrow {
  box-shadow: 3px 3px 0 var(--white);
}

.section-merch .btn-primary {
  background: var(--surface);
  color: var(--text);
}

.section-merch .btn-primary:hover {
  background: var(--bg);
  color: var(--text);
}

.section-merch :focus-visible {
  outline-color: var(--white);
}

.section-about p {
  font-size: 1.15rem;
  max-width: 65ch;
}


/* ==========================================================
   19. FOOTER
   ========================================================== */
.site-footer {
  background: var(--solid);
  color: var(--white);
  padding: var(--space-4) 0;
  border-top: 6px solid var(--red);
}

.site-footer :focus-visible {
  outline-color: var(--white);
}

.disclaimer {
  max-width: 70ch;
  font-size: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  list-style: none;
  margin: var(--space-2) 0;
  padding: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  text-decoration-color: var(--red);
}

.footer-links a:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}

.copyright {
  font-size: 0.95rem;
  margin: 0;
}


/* ==========================================================
   20. SMALL SCREENS
   ========================================================== */

/* Tablets: the level map moves under the hero text */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .level-map {
    max-width: 380px;
  }
}

/* Phones */
@media (max-width: 700px) {
  html {
    scroll-padding-top: 5rem;
  }

  /* Phones: just the one slogan, allowed to wrap onto two
     lines so nothing is ever cut off */
  .tape-text {
    --tape-line: 1.5rem;
    max-height: none;
    padding: 0.55rem 2.75rem;
    font-size: 1rem;
    text-align: center;
  }

  .tape-item {
    white-space: normal;
  }

  .tape-item + .tape-item {
    display: none;
  }

  .quiz-box {
    padding: var(--space-3) var(--space-2);
  }

  /* Keep the sound effects inside the screen */
  .burst {
    width: 92px;
    height: 92px;
    font-size: 0.9rem;
    padding: 1.2rem;
  }

  .burst-card,
  .burst-result {
    right: -8px;
  }

  .touch-btn {
    flex: 1 1 40%;
    min-height: 64px;
    font-size: 1.2rem;
  }

  .brand-name {
    font-size: 1.35rem;
  }

  /* Below 24px the logo red is too dark on black to pass
     contrast, so the header uses a brighter red here */
  .brand-red {
    color: #ff5c61;
  }
}

/* Small phones (iPhone SE and similar) */
@media (max-width: 380px) {
  .brand-name {
    font-size: 1.15rem;
  }

  .brand-logo {
    width: 26px;
    height: 39px;
  }
}

/* Big screens: a little more breathing room */
@media (min-width: 1440px) {
  :root {
    --max-width: 1240px;
  }

  body {
    font-size: 1.2rem;
  }
}


/* ==========================================================
   21. REDUCED MOTION
   Respects the "reduce motion" setting on the visitor's
   device: no glitch, no pop, no hover wobble.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .btn:hover,
  .btn:active,
  .nav-list a:hover,
  .nav-list li:nth-child(even) a:hover {
    transform: none;
  }
}


/* ==========================================================
   22. LAUNCH MODE
   Everything here is for the "coming soon" stage. On launch
   day, delete the launch bar in index.html; the rest can stay.
   ========================================================== */

/* --- Launch bar: thin red strip at the very top --- */
.launch-bar {
  background: var(--red-deep);
  color: var(--white);
  border-bottom: 2px solid var(--line);
}

.launch-bar-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0 auto;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
  text-align: center;
}

.launch-bar a {
  color: var(--white);
}

.launch-bar a:hover {
  color: var(--white);
  text-decoration-thickness: 3px;
}

/* Small pixel "COMING SOON" label */
.launch-pill {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  text-transform: uppercase;
  background: var(--solid);
  color: var(--white);
  padding: 0.3rem 0.5rem;
  transform: rotate(-2deg);
}

/* --- "Get notified" link in the nav, styled as a button --- */
.nav-list a.nav-cta {
  background: var(--red-deep);
  border: 2px solid var(--white);
  border-radius: var(--wobbly);
  padding: 0 0.9rem;
  margin-left: 0.25rem;
}

.nav-list a.nav-cta:hover {
  background: var(--red-dark);
  border-bottom-color: var(--white);
}

/* --- Launch list section --- */
.section-notify {
  background: var(--surface);
  border-top: var(--border);
}

.launch-form {
  background: var(--bg);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.field {
  margin-bottom: var(--space-3);
}

/* Full width text inputs (same look as the other forms) */
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: var(--border);
  border-radius: 6px;
}

.field input[aria-invalid="true"] {
  border-color: var(--red-text);
  box-shadow: 0 0 0 2px var(--red-deep);
}

.optional {
  font-weight: 400;
  color: var(--muted-text);
}

.hint {
  font-size: 0.95rem;
  color: var(--muted-text);
  margin: 0.35rem 0 0;
}

.interest-options {
  border: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.interest-options legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--space-1);
}

/* Two columns of checkboxes on wider screens */
.interest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 var(--space-2);
}

@media (max-width: 700px) {
  .launch-form {
    padding: var(--space-3) var(--space-2);
  }

  .launch-bar-text {
    font-size: 0.9rem;
  }
}

/* "Designed and built by Amar Builds" link in the footer */
.copyright a {
  color: var(--white);
  text-decoration-color: var(--red);
}

.copyright a:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}


/* ==========================================================
   23. HEADER CONTROLS (dark mode toggle + mobile menu)
   ========================================================== */

/* Brand on the left, buttons on the right, nav in between
   on wide screens (or underneath when the menu is open). */
.header-inner {
  flex-wrap: wrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  order: 3; /* after the nav on wide screens */
}

/* --- Dark mode toggle ---
   The icon swaps between a moon (dark mode off) and a sun
   (dark mode on). The text label hides on small screens but
   stays available to screen readers. */
.lang-toggle,
.theme-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  background: transparent;
  border: 2px solid var(--white);
  border-radius: var(--wobbly-alt);
  cursor: pointer;
}

.lang-toggle:hover,
.theme-toggle:hover,
.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ES / EN button: short code, centered */
.lang-toggle {
  justify-content: center;
  padding: 0 0.6rem;
  letter-spacing: 0.06em;
}

/* Moon while light mode is showing, sun while dark */
.theme-toggle .icon {
  display: block;
  flex-shrink: 0;
}

.theme-toggle .icon-sun,
.theme-toggle.is-dark .icon-moon {
  display: none;
}

.theme-toggle.is-dark .icon-sun {
  display: block;
}

/* Icon only below 1440px so the nav fits on one row.
   The "Dark mode" text stays readable by screen readers. */
@media (max-width: 1439px) {
  .theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .theme-toggle {
    padding: 0;
    justify-content: center;
  }
}

/* --- Menu button (hidden on wide screens) --- */
.menu-toggle {
  display: none;
}

/* Three line "hamburger" icon drawn with CSS */
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.menu-icon {
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icon::before {
  top: -6px;
}

.menu-icon::after {
  top: 6px;
}

/* Turns into an X when the menu is open */
.menu-toggle[aria-expanded="true"] .menu-icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Below 1200px: links fold into the Menu button ---
   Only when JavaScript is on (the "js" class comes from
   theme.js). Without it, the links always show. */
@media (max-width: 1200px) {
  .js .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    order: 4;              /* drops below the brand row */
    flex-basis: 100%;
  }

  .js .nav-list {
    display: none;
  }

  .js .nav-list.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-1) 0 var(--space-2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    margin-top: var(--space-1);
  }

  .nav-list.is-open a {
    width: 100%;
    min-height: 48px;
    font-size: 1.1rem;
  }

  .nav-list.is-open a.nav-cta {
    width: fit-content;
    margin: var(--space-1) 0 0;
  }

  /* Push the buttons to the right edge */
  .header-actions {
    margin-left: auto;
  }
}

/* Small phones: the Menu button shows just its icon so the
   header fits on one row. "Menu" is still read aloud. */
@media (max-width: 430px) {
  .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .menu-toggle {
    padding: 0;
    justify-content: center;
  }

  .header-inner {
    gap: var(--space-1);
  }

  /* Three header buttons + the brand have to share ~340px,
     so everything gets a touch smaller (still 40px tap targets) */
  .header-actions {
    gap: 0.3rem;
  }

  .lang-toggle,
  .theme-toggle,
  .menu-toggle {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .brand {
    gap: 0.35rem;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-logo {
    width: 24px;
    height: 36px;
  }
}


/* ==========================================================
   24. FREE GUIDE SECTION
   The cover sits beside the pitch on wide screens and on top
   on phones.
   ========================================================== */
.section-guide {
  background: var(--surface);
  border-top: var(--border);
  border-bottom: var(--border);
}

.guide-inner {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: var(--space-4);
  align-items: center;
}

/* The cover, slapped on at an angle like a sticker */
.guide-cover img {
  width: 100%;
  height: auto;
  border: var(--border);
  box-shadow: var(--shadow-red);
  transform: rotate(-3deg);
}

/* What's inside, as a check list */
.guide-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.guide-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.guide-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--red-deep);
  color: var(--white);
  border-radius: 4px;
  font-size: 0.95rem;
}

.guide-form {
  max-width: 560px;
}

/* "No spam. Unsubscribe anytime." under each signup */
.form-note {
  font-size: 0.95rem;
  color: var(--muted-text);
  margin: 0.5rem 0 0;
}

@media (max-width: 760px) {
  .guide-inner {
    grid-template-columns: 1fr;
  }

  .guide-cover {
    max-width: 220px;
    margin: 0 auto;
  }
}


/* ==========================================================
   25. THANK-YOU PAGE (thanks.html)
   ========================================================== */
.thanks-main {
  min-height: 60vh;
}

.thanks-box {
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.thanks-next {
  margin-top: var(--space-4);
}

@media (max-width: 700px) {
  .thanks-box {
    padding: var(--space-3) var(--space-2);
  }
}


/* ==========================================================
   26. FREE GUIDE HOOKS
   The quiz result's "your level is on page X" line, and the
   download link that appears after signing up.
   ========================================================== */
.result-page {
  display: inline-block;
  font-weight: 700;
  border-left: 4px solid var(--red-text);
  padding: 0.15rem 0 0.15rem 0.75rem;
  margin-bottom: var(--space-2);
}

/* Sits inside the form's status message (role="status") */
.download-link {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--red-text);
  font-weight: 700;
}

.download-link::before {
  content: "\2193\00A0"; /* down arrow, decorative */
  text-decoration: none;
  display: inline-block;
}


/* ==========================================================
   27. PLAYER 1 (the mascot)
   assets/player1-512.png is pixel art: image-rendering keeps
   the pixels crisp at any size instead of blurring them.
   ========================================================== */
.map-mascot,
.about-mascot,
.thanks-mascot {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Standing on the top edge of the level map */
.map-mascot {
  position: absolute;
  top: -78px;
  right: 12px;
  width: 96px;
  height: 96px;
  pointer-events: none;
}

.level-map {
  margin-top: 64px;
}

/* About: Player 1 beside the story */
.about-inner {
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: var(--space-4);
  align-items: center;
}

.about-mascot {
  width: 192px;
  height: 192px;
}

/* Thank-you page: a little celebration hop */
.thanks-mascot {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 0 var(--space-2);
  animation: mascot-hop 1.2s ease-in-out infinite;
}

@keyframes mascot-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
}

@media (max-width: 700px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .about-mascot {
    width: 128px;
    height: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thanks-mascot {
    animation: none;
  }
}


/* ==========================================================
   28. LEGAL PAGES (privacy.html, terms.html, refunds.html)
   Each page holds both languages; only the one matching
   <html lang> shows (the ES/EN button sets it).
   ========================================================== */
html:not([lang="es"]) .only-es,
html[lang="es"] .only-en {
  display: none;
}

.legal-main {
  padding: var(--space-5) 0;
}

.legal-date {
  color: var(--muted-text);
  font-size: 0.95rem;
}

.legal-lead {
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--surface);
  border: var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-red);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  margin: var(--space-4) 0 var(--space-1);
}

.legal p,
.legal li {
  max-width: 70ch;
}

.legal ul {
  padding-left: 1.4rem;
  margin: 0 0 var(--space-2);
}

.legal li {
  margin-bottom: 0.4rem;
}

.legal li::marker {
  color: var(--red-text);
}

/* ==========================================================
   29. ABOUT LAST CALL
   The "Start with the free guide" button that closes the page
   ========================================================== */
.about-cta {
  margin-top: 0.75rem;
}