:root {
  --bg: #0e1117;
  --card: #171c25;
  --card-2: #1e242f;
  --line: #2a3240;
  --text: #e8ecf3;
  --muted: #8a94a6;
  --accent: #4f9cf9;
  --ok: #34b37a;
  --bad: #ec5f6b;
  --radius: clamp(11px, 3.2vw, 14px);

  /* Horizontal rhythm follows the width, vertical rhythm follows the height,
     so the layout gives way on a short screen as readily as on a narrow one. */
  --pad-x: clamp(12px, 4vw, 20px);
  --pad-top: max(10px, env(safe-area-inset-top));
  --pad-bottom: max(12px, env(safe-area-inset-bottom));
  --fs-body: clamp(15px, 4.2vw, 17px);
  --fs-small: clamp(12px, 3.4vw, 14px);
  --fs-tiny: clamp(11px, 3.1vw, 13px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100vh;
  height: max(480px, 100dvh); /* the floor: below 480px the page scrolls rather than squash */
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
}

/* The home screen carries the settings block below the fold, so it is the one
   screen allowed to run past the viewport. */
#app.scrollable { height: auto; min-height: max(480px, 100dvh); }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- home ---------- */

.home {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2.4dvh, 22px);
  padding: clamp(4px, 1.4dvh, 14px) 0;
}

.hero { text-align: center; }
.hero .map {
  width: 100%;
  max-width: 320px;
  max-height: clamp(88px, 21dvh, 200px);
  margin: 0 auto clamp(8px, 1.6dvh, 16px);
  display: block;
}
/* Every state, outlined — a flat silhouette in near-background tones read as
   a hole in the page. The stroke does not scale, or it would vanish at this
   size. */
.hero .map path {
  fill: #242c39;
  stroke: #46536a;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hero h1 { font-size: clamp(22px, 7vw, 32px); line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.02em; }
.hero p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

.modes { display: flex; flex-direction: column; gap: clamp(7px, 1.3dvh, 11px); }

.mode {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3.4vw, 14px);
  width: 100%;
  padding: clamp(10px, 1.8dvh, 16px) clamp(12px, 3.8vw, 16px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  transition: transform .1s ease, background .15s ease;
}
.mode:active { transform: scale(.98); background: var(--card-2); }
.mode .icon { font-size: clamp(20px, 6vw, 26px); width: clamp(26px, 8vw, 34px); text-align: center; flex: none; }
.mode .label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mode .title { display: block; font-weight: 600; font-size: var(--fs-body); line-height: 1.25; }
.mode .sub { display: block; color: var(--muted); font-size: var(--fs-tiny); line-height: 1.3; }
.mode .chev { color: var(--muted); font-size: 20px; flex: none; }

.best { text-align: center; color: var(--muted); font-size: var(--fs-tiny); min-height: 1.2em; }

/* ---------- settings (below the fold on home) ---------- */

.settings {
  flex: none;
  padding: clamp(4px, 1dvh, 10px) 0 0;
  text-align: center;
}
.settings-head {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 3px);
}
.seg {
  flex: 1;
  padding: clamp(9px, 1.6dvh, 13px) 10px;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.seg.is-on { background: var(--accent); color: #06213f; }

.settings-help {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: var(--fs-tiny);
  line-height: 1.45;
  text-align: center;
}

/* ---------- quiz chrome ---------- */

.bar { display: flex; align-items: center; gap: 12px; height: clamp(32px, 5dvh, 40px); flex: none; }
.bar .back { font-size: var(--fs-small); color: var(--muted); padding: 6px 10px 6px 0; }
.bar .count { flex: 1; text-align: center; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.bar .score { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--muted); }
.bar .score b { color: var(--text); }

.progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; flex: none; margin-bottom: 4px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s ease; }

/* ---------- question ---------- */

.quiz { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1.8dvh, 14px);
  padding: clamp(4px, 1dvh, 10px) 0;
}

/* The box matches the map's own aspect so it holds no empty band, and bleeds
   to the screen edges so the map is as large as the width allows. */
.shape-wrap {
  position: relative;
  flex: 0 1 auto;
  width: calc(100% + var(--pad-x) * 2);
  margin: 0 calc(var(--pad-x) * -1);
  aspect-ratio: 8 / 5;
  max-height: 46dvh;
}
.usmap { width: 100%; height: 100%; display: block; }
.usmap path {
  fill: var(--card-2);
  stroke: var(--line);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.usmap path.here {
  fill: var(--accent);
  stroke: #cfe4ff;
  stroke-width: 1.5;
}

.detail {
  position: absolute;
  width: clamp(56px, 17vw, 84px);
  height: clamp(56px, 17vw, 84px);
  padding: clamp(5px, 1.6vw, 8px);
  background: rgba(14, 17, 23, .88);
  border: 1px solid var(--line);
  border-radius: 12px;
}
/* The inset moves to whichever corner is furthest from the highlighted state,
   so it never sits on top of the answer. */
.detail.t { top: 0; }
.detail.b { bottom: 0; }
.detail.l { left: var(--pad-x); }
.detail.r { right: var(--pad-x); }

.detail svg { width: 100%; height: 100%; display: block; overflow: visible; }
.detail path {
  fill: var(--accent);
  stroke: #cfe4ff;
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.state-name { font-size: clamp(20px, 6.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; text-align: center; line-height: 1.15; }
.prompt { color: var(--muted); font-size: var(--fs-small); text-align: center; margin-top: clamp(-10px, -1.2dvh, -4px); }

/* ---------- answers ---------- */

.answers { display: flex; flex-direction: column; gap: clamp(7px, 1.3dvh, 11px); flex: none; padding-top: clamp(4px, 1dvh, 10px); }

.answer {
  width: 100%;
  padding: clamp(11px, 2dvh, 18px) 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.answer:active:not(:disabled) { transform: scale(.98); background: var(--card-2); }
.answer:disabled { cursor: default; }
.answer.correct { background: rgba(52,179,122,.16); border-color: var(--ok); color: #7fe0b4; }
.answer.wrong { background: rgba(236,95,107,.14); border-color: var(--bad); color: #ff9aa3; }
.answer.faded { opacity: .4; }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* ---------- advanced ---------- */

.quiz.adv {
  display: flex;
  flex: none;
  gap: clamp(12px, 2dvh, 18px);
  padding-bottom: clamp(8px, 2dvh, 16px);
}

/* A framed snapshot of one region, sized so it never crowds out the questions. */
.adv .region {
  width: min(100%, calc(40dvh * 5 / 4));
  margin: 0 auto;
  aspect-ratio: 5 / 4;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Alaska and Hawaii are shown with nothing else in the frame. */
.usmap.solo path:not(.here) { display: none; }

.adv-q { display: flex; flex-direction: column; gap: clamp(7px, 1.3dvh, 11px); }

.q-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
}
.q-num {
  flex: none;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-tiny);
}

.adv .answers { padding-top: 0; }
.adv .answer { padding: clamp(10px, 1.7dvh, 15px) 12px; }
.adv .answer.picked { border-color: var(--accent); background: var(--card-2); }

/* Advanced review rows carry a line per part that went wrong. */
.miss.pair { flex-direction: column; align-items: stretch; gap: 5px; }
.miss.pair .part { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-tiny); }
.miss.pair .k { flex: none; width: 50px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.miss.pair .cap { flex: 1; }

/* ---------- results ---------- */

.results { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 2.2dvh, 20px); padding: clamp(10px, 2dvh, 20px) 0; }
.results .headline { text-align: center; flex: none; margin-top: auto; }
.results .emoji { font-size: clamp(34px, 10vw, 46px); }
.results h2 { margin: 6px 0 4px; font-size: clamp(21px, 6.6vw, 27px); letter-spacing: -0.02em; line-height: 1.15; }
.results .pct { color: var(--muted); font-size: var(--fs-small); }
.results .note { color: var(--muted); font-size: var(--fs-tiny); text-align: center; margin-bottom: auto; }

.review {
  flex: 0 1 auto;
  min-height: 0;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1dvh, 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.review h3 { position: sticky; top: 0; background: var(--bg); padding-bottom: 6px; z-index: 1; font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 2px; font-weight: 600; }
.miss {
  flex: none;
  display: flex; align-items: baseline; gap: 8px;
  padding: clamp(9px, 1.5dvh, 12px) clamp(11px, 3.6vw, 14px);
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  font-size: var(--fs-small);
}
.miss .st { font-weight: 600; flex: 1; min-width: 0; }
.miss .cap { color: var(--ok); }
.miss .gave { color: var(--muted); text-decoration: line-through; font-size: var(--fs-tiny); }

.actions { flex: none; display: flex; flex-direction: column; gap: clamp(7px, 1.3dvh, 11px); padding-top: 4px; }
.btn {
  width: 100%;
  padding: clamp(12px, 2dvh, 17px) 14px;
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: center;
  transition: transform .1s ease, opacity .15s ease;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: #06213f; }
.btn.ghost { background: var(--card); border: 1px solid var(--line); }

/* ---------- landscape ----------
   Too short to stack. Put the map beside the answers rather than making a
   portrait layout scroll. */

@media (orientation: landscape) and (max-height: 560px) {
  #app { height: max(320px, 100dvh); max-width: 820px; }
  #app.scrollable { height: auto; min-height: max(320px, 100dvh); }

  .home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: clamp(16px, 4vw, 32px);
  }
  .hero .map { max-height: clamp(80px, 26dvh, 160px); }
  .settings { grid-column: 1 / -1; }

  .quiz:not(.adv) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(14px, 3vw, 28px);
  }
  .bar, .progress { grid-column: 1 / -1; }
  .stage { grid-column: 1; grid-row: 3; padding: 0; }
  .quiz:not(.adv) .answers { grid-column: 2; grid-row: 3; align-self: center; padding-top: 0; }
  .shape-wrap { width: 100%; margin: 0; max-height: none; }
  .detail.l { left: 0; }
  .detail.r { right: 0; }

  /* Advanced keeps its map beside the questions and scrolls as one page. */
  .quiz.adv { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(14px, 3vw, 28px); }
  .adv .bar, .adv .progress { grid-column: 1 / -1; }
  .adv .region { grid-column: 1; align-self: start; width: 100%; }
  .adv-q { grid-column: 2; }

  .results { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(16px, 4vw, 32px); }
  .results .headline { grid-column: 1; grid-row: 1 / -1; align-self: center; margin-top: 0; }
  .review { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .actions { grid-column: 2; grid-row: 2; align-self: end; }
}

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