/* Borders: one accent (magenta) plus greys. Magenta means "this one". */

/* Self-hosted variable fonts (SIL OFL, licences in ../fonts/), split as Google Fonts serves them: browsers fetch the
   latin-ext file only for a character in its range. The version is in the file name because CSS URLs aren't versioned. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolagegrotesque-v9-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolagegrotesque-v9-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-v9-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-v9-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --accent: #c8107e;
  --accent-strong: #a10c66;
  --accent-tint: #f6d3e8;
  --accent-tint-2: #ec9fcd;

  --grey-0: #ffffff;
  --grey-50: #f6f6f7;
  --grey-100: #ececee;
  --grey-200: #dcdce0;
  --grey-300: #c4c4ca;
  --grey-500: #8b8b94;
  --grey-700: #4a4a52;
  --grey-900: #1d1d22;

  --bg: var(--grey-50);
  --surface: var(--grey-0);
  --text: var(--grey-900);
  --text-muted: var(--grey-700);
  --border: var(--grey-200);
  --topo-line: var(--grey-300);

  --land: var(--grey-200);
  --land-hover: var(--grey-300);
  --land-inactive: var(--grey-100);
  --land-border: var(--grey-0);
  --sea: #fbfbfc;
  --guess: var(--grey-700);
  --tooltip: var(--grey-900);

  /* Sizes and spacing */
  --tap: 48px; /* buttons and inputs */
  --chip-height: 44px; /* chips, map controls, small buttons */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-40: 40px;

  /* Corners */
  --radius: 16px; /* containers: cards, the question card, the map */
  --radius-sheet: 24px; /* the phone question sheet's top corners */
  --radius-control: 12px; /* options, difficulty tiles, the zoom group */
  --radius-chip: 10px; /* region chips, tooltips */
  --radius-key: 6px; /* key badges */
  --radius-pill: 999px; /* buttons, inputs, suggestions */

  /* Shadows: only for things that float over the map */
  --flag-shadow: drop-shadow(0 0 1px rgba(29, 29, 34, 0.5)); /* edges a flag's white parts, following its shape */
  --shadow-float: 0 1px 2px rgba(29, 29, 34, 0.08), 0 12px 32px rgba(29, 29, 34, 0.14);
  --shadow-sheet: 0 -1px 0 var(--grey-200), 0 -12px 32px rgba(29, 29, 34, 0.1);
  --shadow-dialog: 0 1px 2px rgba(29, 29, 34, 0.1), 0 24px 48px rgba(29, 29, 34, 0.25);

  /* Type: Bricolage Grotesque for headings and figures, Figtree for everything else */
  --font-display: "Bricolage Grotesque", Figtree, system-ui, sans-serif;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* the attribute always wins over a class's display */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font-sans);
  position: relative;
}

/* Topographic contour lines behind everything; the SVG is used as a mask so its colour comes from --topo-line. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--topo-line);
  -webkit-mask: url("../img/topo.svg") 0 0 / 640px 640px repeat;
  mask: url("../img/topo.svg") 0 0 / 640px 640px repeat;
  opacity: 0.5;
  pointer-events: none;
}

a { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Header and footer */
.site-header { padding: 14px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
}
.logo span { color: var(--accent); }

main { flex: 1; padding-bottom: 32px; }

/* Footer: two quiet links, centred, that open pop-ups */
.site-footer { padding: var(--space-8) 0 var(--space-24); }
.footer-links { display: flex; justify-content: center; gap: var(--space-8); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--chip-height); padding: 0 var(--space-12); font-size: 14px; color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--grey-300); text-underline-offset: 4px; }
.footer-links a:hover { color: var(--text); text-decoration-color: currentColor; }

.info-dialog { width: 520px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.info-dialog::backdrop { background: rgba(29, 29, 34, 0.45); }
.info-dialog-body { padding: var(--space-8) var(--space-24) var(--space-24); font-size: 15px; line-height: 1.55; }
.info-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-right: calc(-1 * var(--space-12)); }
.info-dialog-head form { margin: 0; }
.info-dialog h2 { margin: var(--space-16) 0 var(--space-4); font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.info-dialog p { margin: var(--space-12) 0 0; }
.info-dialog ul { margin: var(--space-12) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-8); }
.dialog-close { display: grid; place-items: center; width: var(--chip-height); height: var(--chip-height); border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.dialog-close:hover { background: var(--grey-50); color: var(--text); }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
/* Without JavaScript the pop-ups are plain sections at the end of the page, which the footer links jump to */
html:not(.js) .info-dialog { display: block; position: static; margin: 0 auto var(--space-24); box-shadow: none; border: 1px solid var(--border); }
html:not(.js) .dialog-close { display: none; }

/* Cards and buttons */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 4px; }
h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 8px; }
.lede { color: var(--text-muted); margin: 0 0 var(--space-24); }
.muted { color: var(--text-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey-300);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--grey-500); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-quiet:hover { border-color: var(--grey-300); }

.btn-start { width: 100%; min-height: 56px; font-size: 17px; font-weight: 700; }

/* Small capitals over a heading: question numbers, legends, the map's region plate */
.eyebrow { margin: 0; font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

/* Home */
.hero { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-40) 0; }
.hero h1 { margin: 0; max-width: 13ch; font-size: clamp(40px, 6vw, 68px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.hero .lede { margin: 0; max-width: 52ch; font-size: 18px; }
/* The region bar: one choice for every mode, kept in view while scrolling past the cards */
.step { display: flex; align-items: center; gap: var(--space-12); margin: 0 0 var(--space-12); font: 700 22px/1.2 var(--font-display); letter-spacing: -0.01em; }
.step-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--grey-900); border-radius: 50%; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.region-bar { position: sticky; top: 0; z-index: 3; margin: 0 calc(-1 * var(--space-16)) var(--space-24); padding: var(--space-16); background: rgba(246, 246, 247, 0.94); }
/* Two cards across at most, so four make a 2 × 2 grid */
.modes { display: grid; gap: var(--space-24); grid-template-columns: repeat(auto-fit, minmax(max(340px, calc(50% - var(--space-24))), 1fr)); }

.mode-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mode-card .picture { position: relative; height: 220px; background: var(--sea); border-bottom: 1px solid var(--grey-100); }
.mode-card .picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Name the Country: the map picture for Normal and Hard, the outline for Extreme */
.mode-card .picture img.outline { position: absolute; inset: 0; }
.mode-card .picture img.outline,
.mode-card:has(input[value="extreme"]:checked) .picture img.on-map { opacity: 0; visibility: hidden; }
.mode-card:has(input[value="extreme"]:checked) .picture img.outline { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .mode-card .picture img { transition: opacity 0.2s, visibility 0.2s; }
}
.mode-card .picture .ask { position: absolute; left: var(--space-16); top: var(--space-16); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-float); font-size: 14px; }
.mode-card .picture strong { color: var(--accent); }
/* Name the Flag: the flag over a map of the whole world, as the game draws it over the map */
.mode-card .picture-flag img.flag { position: absolute; top: 60px; left: var(--space-24); width: calc(100% - 2 * var(--space-24)); height: calc(100% - 60px - var(--space-20)); object-fit: contain; filter: var(--flag-shadow) drop-shadow(0 8px 20px rgba(29, 29, 34, 0.18)); }
.mode-card .plate { margin-bottom: var(--space-8); }
.mode-card .body { flex: 1; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-20); }
.mode-card h3 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.mode-card p { margin: 0; }
.card-footer { margin: auto calc(-1 * var(--space-24)) calc(-1 * var(--space-24)); padding: var(--space-20) var(--space-24) var(--space-24); border-top: 1px solid var(--grey-100); background: var(--sea); }

/* Choices: chosen is a pale tint with a magenta edge, never solid magenta (that's for Start) */
.picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker legend { padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.difficulty input { position: absolute; opacity: 0; pointer-events: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
  height: var(--chip-height);
  padding: 0 14px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--grey-300);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.chip:hover { border-color: var(--grey-500); }
.chip small { font-size: inherit; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip svg { display: none; width: 14px; height: 14px; fill: none; stroke: var(--accent-strong); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chip[aria-current] { padding: 0 13px 0 11px; border: 2px solid var(--accent); background: var(--accent-tint); font-weight: 600; }
.chip[aria-current] small { color: var(--text); }
.chip[aria-current] svg { display: block; }
.difficulty input:focus-visible + span { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.difficulties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.difficulties-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.difficulty span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border-radius: var(--radius-control); border: 2px solid var(--border); background: var(--surface); cursor: pointer; user-select: none; }
.difficulty strong { font: 700 17px/1.3 var(--font-display); }
.difficulty em { font-style: normal; font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.difficulty input:checked + span { border-color: var(--accent); background: var(--accent-tint); }
.difficulty input:checked + span em { color: var(--text); }

/* Game screens: the map fills the width and the question card floats over its bottom-left corner (a sheet on phones) */
.wrap-wide { max-width: none; }
.game-status { flex: 1; display: flex; align-items: center; gap: var(--space-16); min-width: 0; margin-left: var(--space-16); }
.game-status:empty { display: none; }
.game-status .session { font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-status-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-16); }
/* The answer trail: ✓ / ✗ marks differ by shape and glyph, not just colour */
.trail { display: flex; align-items: center; gap: 6px; }
.pip { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.pip svg { width: 12px; height: 12px; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pip.is-right { background: var(--accent); }
.pip.is-right svg { stroke: var(--grey-0); }
.pip.is-wrong { border: 2px solid var(--grey-900); background: var(--surface); }
.pip.is-wrong svg { width: 10px; height: 10px; stroke: var(--grey-900); }
.pip.is-next { border: 2px dashed var(--grey-300); }
.trail .count { margin-left: 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.count-slash { display: none; }
.btn-small { min-height: var(--chip-height); padding: 0 18px; font-size: 15px; }

.game { display: flex; flex-direction: column; }

.play-card {
  position: absolute;
  left: var(--space-20);
  bottom: var(--space-20);
  z-index: 2;
  width: 420px;
  max-width: calc(100% - 2 * var(--space-20));
  padding: var(--space-24);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  touch-action: auto; /* the map takes pinch and drag; the card scrolls and types normally */
}
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.card-top .hint { margin: 0; }
.prompt { margin: 0; font: 700 30px/1.1 var(--font-display); letter-spacing: -0.02em; }
.prompt-large { font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; }
.prompt strong, .answer-line strong { color: var(--accent); font-weight: inherit; }
.card-rule { padding-top: var(--space-12); border-top: 1px solid var(--grey-100); }
.card-end { display: flex; justify-content: flex-end; }
.link-quiet { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--text-muted); font: 600 15px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Normal: four options */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 52px;
  padding: 6px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--grey-300);
  background: var(--surface);
  color: var(--text);
  font: 500 16px/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.option:hover { border-color: var(--grey-500); }
.option-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-key);
  background: var(--grey-100);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
@media (hover: none) { .option-key, .keys { display: none; } }

/* Hard and Extreme: typed answers */
.answer-form { display: flex; flex-direction: column; gap: 10px; }
.answer-row { display: flex; gap: var(--space-8); }
.answer-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-pill);
  font: 500 17px/1 var(--font-sans);
  color: var(--text);
  background: var(--surface);
}
.answer-input:focus { outline: 3px solid var(--accent-tint); outline-offset: 0; border-color: var(--accent); }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.suggestions:empty { display: none; }
.suggestion {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-pill);
  background: var(--grey-50);
  font: 500 15px/1 var(--font-sans);
  color: var(--text);
  cursor: pointer;
}
.suggestion:hover, .suggestion:focus-visible { border-color: var(--accent); background: var(--accent-tint); }
.answer-msg { margin: 0; padding: 10px 12px; border-radius: var(--radius-control); background: var(--grey-50); font-size: 14px; line-height: 1.4; }
.answer-msg:empty { display: none; }

/* Feedback */
.verdict { display: flex; align-items: flex-start; gap: 14px; }
.verdict-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.verdict-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--grey-0); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.verdict.is-correct .verdict-icon { background: var(--accent); animation: pop 0.35s ease-out; }
.verdict.is-wrong .verdict-icon { background: var(--grey-900); animation: shake 0.4s ease-in-out; }
.verdict-word { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.answer-line { margin: 0; font: 700 34px/1.05 var(--font-display); letter-spacing: -0.02em; }
.guess-line { margin: 0; font-size: 15px; }
.answer-lead { margin: 0 0 4px; font-size: 15px; }
.capital-note { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.subregion { margin-top: 6px; }
.mastery { display: flex; align-items: center; gap: var(--space-12); }
.mastery p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--text-muted); }
.mastery-pips { flex: none; display: flex; gap: 4px; }
.mastery-pips span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--grey-300); }
.mastery-pips span.on { border-color: var(--accent); background: var(--accent); }
.btn-next { width: 100%; }
kbd { padding: 2px 6px; border-radius: var(--radius-key); background: rgba(255, 255, 255, 0.2); font: 600 12px/1.2 var(--font-sans); }
@media (hover: none) { .btn-next kbd { display: none; } }
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Map */
.map {
  position: relative;
  height: clamp(520px, calc(100vh - 96px), 900px);
  background: var(--sea);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none; /* d3-zoom handles pinch and drag */
}
.map svg { display: block; width: 100%; height: 100%; cursor: grab; }
.map svg:active { cursor: grabbing; }
.map-status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); }
.map-plate { position: absolute; left: var(--space-20); top: var(--space-16); pointer-events: none; }
.map-plate span { font-weight: 500; letter-spacing: 0.06em; }
.map-zoom {
  position: absolute;
  right: var(--space-16);
  top: var(--space-16);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.map-zoom button { display: grid; place-items: center; width: var(--chip-height); height: var(--chip-height); border: 0; background: var(--surface); color: var(--text); cursor: pointer; }
.map-zoom button + button { border-top: 1px solid var(--grey-100); }
.map-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
.map-toggle {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--chip-height);
  padding: 0 8px 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey-300);
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
}
.map-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.map-toggle:has(input:focus-visible) { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.switch { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--grey-300); transition: background 0.15s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform 0.15s; }
.map-toggle input:checked ~ .switch { background: var(--accent); }
.map-toggle input:checked ~ .switch::after { transform: translateX(16px); }
.map-toggle-short { display: none; }

.sphere { fill: var(--sea); } /* the same as the frame, so the globe's edge doesn't show as a line */
.country {
  fill: var(--land);
  stroke: var(--land-border);
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.country.inactive { fill: var(--land-inactive); }
/* A white border over an atoll's strips of land, a pixel or two wide, would hide them: draw it under the fill instead */
.country.is-tiny { paint-order: stroke; }
.is-asking .country { cursor: pointer; }
/* Hover fills follow a real mouse (.uses-mouse, from site.js), not (hover: hover), which touchscreen laptops report
   as false even with a mouse; a tap on a phone never sets it, so a tapped country isn't left darkened */
.uses-mouse .is-asking .country:hover, .uses-mouse .is-labelled .country:not(.is-answer, .is-guess):hover { fill: var(--land-hover); }
.country.is-guess { fill: var(--guess); }
.country.is-answer, .is-asking .country.is-answer:hover { fill: var(--accent); }
.silhouette {
  fill: var(--accent);
  stroke: var(--accent-strong);
  stroke-width: 1.5px; /* keeps tiny islands visible */
  stroke-linejoin: round;
  opacity: 0;
}
/* Extreme: the outline is on stage while asking; once they answer, the world map takes over to show where it is */
.map .map-outline { position: absolute; inset: 0; cursor: default; }
.map[data-view="silhouette"] :is(.map-world, .map-zoom, .plate-world),
.map.is-revealed :is(.map-outline, .plate-outline) { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.map-outline, .plate-outline,
.map.is-revealed :is(.map-world, .map-zoom, .plate-world) { opacity: 1; visibility: visible; transition: opacity 0.4s, visibility 0s; }
/* Name the Flag: the flag over the map, in the part the card leaves clear (map.js sets the box), at its real
   proportions. The drop shadows follow the flag's shape (Nepal), and the first one edges white flags (Japan). */
.flag-stage { position: absolute; z-index: 1; display: grid; place-items: center; padding: 64px var(--space-24); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s 0.4s; }
.flag-stage.is-shown { opacity: 1; visibility: visible; transition: opacity 0.4s, visibility 0s; }
.flag-stage .flag { width: min(100%, 440px); height: min(100%, 300px); object-fit: contain; filter: var(--flag-shadow) drop-shadow(0 12px 28px rgba(29, 29, 34, 0.2)); }
.feedback-flag { display: block; width: auto; max-width: 120px; height: 56px; margin: 6px 0 10px; object-fit: contain; object-position: left; filter: var(--flag-shadow); }
.marker {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.marker.is-guess { stroke: var(--guess); }
/* A dot for each country too small to see, and an invisible, larger target around it that takes clicks */
.tiny-dot { fill: var(--grey-500); stroke: var(--surface); stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.tiny-dot.is-guess { fill: var(--guess); }
.tiny-dot.is-answer { fill: var(--accent); }
.tiny-target { fill: transparent; pointer-events: none; }
/* Name the Capital: an atlas capital symbol (a ringed dot), in the darker magenta for the answer and dark grey for the
   city the player named. White inside so it shows on the magenta country. Drawn in screen space, so it stays one size. */
.capital-mark { pointer-events: none; }
.capital-mark .ring { fill: var(--grey-0); stroke: var(--accent-strong); stroke-width: 2px; }
.capital-mark .dot { fill: var(--accent-strong); }
.capital-mark.is-guess .ring { stroke: var(--guess); }
.capital-mark.is-guess .dot { fill: var(--guess); }
.capital-mark text {
  font: 700 15px/1 var(--font-display);
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  paint-order: stroke;
  dominant-baseline: central;
}
.capital-mark.is-guess text { font-size: 13px; fill: var(--guess); }
.is-asking .tiny-target { pointer-events: all; cursor: pointer; }

/* Country names, like an atlas: small grey capitals. Magenta is only ever the answer. */
.labels text {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-muted);
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.labels text.is-guess { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; fill: var(--text); }
.labels text.is-answer { font: 800 18px/1 var(--font-display); letter-spacing: 0.08em; fill: var(--accent); }
/* White on the magenta country when it fits, with a thin magenta halo so it stays legible where it runs off the country */
.labels text.is-answer.is-inside { fill: var(--grey-0); stroke: var(--accent); stroke-width: 2.5px; stroke-opacity: 0.9; }

/* Summary */
.summary { width: 100%; max-width: 720px; margin: var(--space-24) auto 0; padding: var(--space-40); display: flex; flex-direction: column; gap: 28px; }
.summary h1 { margin: var(--space-8) 0 0; }
.summary h2 { margin: 0 0 var(--space-12); font-size: 22px; letter-spacing: -0.01em; }
.summary-score { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12) 32px; margin-top: var(--space-8); }
.score { margin: 0; font: 800 120px/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.score small { font-size: 0.4em; color: var(--text-muted); }
.summary-facts { margin: 0 0 10px; display: grid; grid-template-columns: auto auto; gap: 4px var(--space-12); }
.summary-facts dt { color: var(--text-muted); }
.summary-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.trail-wrap { flex-wrap: wrap; }
.missed { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-8); }
.missed li { display: flex; align-items: center; gap: var(--space-12); padding: 8px 12px 8px 8px; border-radius: var(--radius-control); background: var(--grey-50); font-weight: 500; line-height: 1.25; }
.outline { flex: none; width: 44px; height: 44px; }
.outline path { fill: var(--grey-700); }
.flag-thumb { flex: none; width: 44px; height: 30px; object-fit: contain; filter: var(--flag-shadow); }
.stats-page .flag-thumb { width: 28px; height: 18px; margin-right: 10px; vertical-align: -3px; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: var(--space-24); border-top: 1px solid var(--grey-100); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header navigation (pages other than the game) */
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--chip-height); padding: 0 var(--space-16); color: var(--text-muted); font-weight: 600; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* Stats */
.page-head { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24) 0; }
.page-head h1 { margin: 0; font-size: clamp(40px, 6vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.page-head .lede { margin: 0; font-size: 17px; }
/* Countries / Capitals: a segmented switch; each half is a link, so it works without JavaScript */
.track-switch { display: inline-flex; align-self: flex-start; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); }
.track-switch a { display: grid; place-items: center; min-height: 36px; padding: 0 18px; border-radius: var(--radius-pill); color: var(--text); font-weight: 600; text-decoration: none; }
.track-switch a:hover { background: var(--grey-50); }
.track-switch a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-strong); }
.notice { margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16); border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--border); }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); max-width: 560px; }
.empty h2, .empty p { margin: 0; }
.small { font-size: 14px; }
.stats-page { display: flex; flex-direction: column; gap: var(--space-16); }
.stats-page .card h2:not(.eyebrow) { margin: 0 0 var(--space-16); font-size: 22px; letter-spacing: -0.01em; }
.card .eyebrow { margin: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.stats-page .section-head h2 { margin: 0; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-16); }
.stat-tile { display: flex; flex-direction: column; gap: var(--space-12); }
.stat-tile p { margin: 0; }
.stat-value { font: 800 56px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-value.accent { color: var(--accent); }
.stat-value small { font-size: 26px; color: var(--text-muted); }
.stack-bar { display: flex; gap: 2px; height: 10px; }
.stack-bar span:first-child { border-radius: 4px 0 0 4px; }
.stack-bar span:last-child { border-radius: 0 4px 4px 0; }

/* Mastery levels: one hue, light to dark, always with a legend */
.level-3 { background: var(--accent); fill: var(--accent); }
.level-2 { background: var(--accent-tint-2); fill: var(--accent-tint-2); }
.level-1 { background: var(--accent-tint); fill: var(--accent-tint); }
.level-0 { background: var(--grey-100); fill: var(--land); }
.legend i.level-0 { background: var(--land); }
.legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-16); font-size: 14px; }
.legend li { display: flex; align-items: center; gap: var(--space-8); }
.legend i { width: 14px; height: 14px; border-radius: 4px; }
.legend span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mastery-map { position: relative; aspect-ratio: 1088 / 530; border-radius: var(--radius-control); background: var(--sea); overflow: hidden; }
.mastery-map svg { display: block; width: 100%; height: 100%; }
.mastery-map .country { stroke-width: 0.5px; }
.mastery-map .country:not(.inactive) { cursor: pointer; }
.uses-mouse .mastery-map .country:not(.inactive):hover { stroke: var(--grey-900); stroke-width: 1.5px; }
.map-help { margin: var(--space-8) 0 0; }
.tooltip { position: absolute; z-index: 2; padding: 10px 12px; border-radius: var(--radius-chip); background: var(--tooltip); color: var(--grey-0); font-size: 13px; line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow-dialog); pointer-events: none; }
.tooltip strong { font-size: 14px; }
.tooltip .seen { color: var(--grey-300); }

.stat-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-16); }
.meter-table { display: grid; grid-template-columns: minmax(0, 1fr) 140px 52px; gap: 14px var(--space-16); align-items: center; }
.meter-table .label { font-weight: 500; display: flex; flex-direction: column; }
.meter-table .label small { font-size: 13px; font-weight: 400; }
.meter-cell { display: flex; flex-direction: column; gap: 4px; }
.meter { display: block; height: 8px; border-radius: 4px; background: var(--grey-100); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.meter.volume span { background: var(--grey-700); }
.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-list { margin: 0; padding: 0; list-style: none; }
.rank-list li { display: flex; justify-content: space-between; gap: var(--space-12); padding: 10px 0; border-top: 1px solid var(--grey-100); font-weight: 500; }
.rank-list li .muted { font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }

.search { width: 260px; max-width: 100%; min-height: var(--chip-height); padding: 0 var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--grey-300); background: var(--surface); font: 500 15px/1 var(--font-sans); color: var(--text); }
.table-scroll { overflow-x: auto; margin-top: var(--space-8); }
.data-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 15px; }
.data-table th { padding: 0 12px 10px 0; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.data-table th.num { text-align: right; }
.data-table th a { color: inherit; text-decoration: none; }
.data-table th a:hover { color: var(--text); }
.data-table th[aria-sort] { color: var(--text); }
.data-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--grey-100); }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.data-table .label { font-weight: 500; }
.data-table .num { font-weight: 400; }
.data-table .strong { font-weight: 600; }
.show-all { margin-top: var(--space-16); }
.table-tools { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sort-menu, .phone-only { display: none; }
.sort-menu select { min-height: var(--chip-height); padding: 0 var(--space-12); border-radius: var(--radius-pill); border: 1px solid var(--grey-300); background: var(--surface); font: 600 14px/1 var(--font-sans); color: var(--text); }

.start-over { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); }
.start-over > div { flex: 1 1 420px; min-width: 0; }
.stats-page .start-over h2 { margin-bottom: var(--space-4); }
.start-over p { margin: 0; max-width: 62ch; }
.btn-strong { border: 2px solid var(--grey-900); }
.btn-destructive { background: var(--grey-900); border-color: var(--grey-900); color: var(--grey-0); }
.btn-destructive:hover { background: var(--grey-700); border-color: var(--grey-700); }
.dialog { width: 480px; max-width: calc(100% - 32px); padding: 28px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-dialog); }
.dialog::backdrop { background: rgba(29, 29, 34, 0.45); }
.dialog form { display: flex; flex-direction: column; gap: var(--space-16); }
.dialog h2 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.dialog p { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: var(--space-8); }

@media (max-width: 560px) {
  /* Game: the map runs edge to edge and the question card becomes a sheet docked to its bottom */
  .game-status .session { display: none; }
  .game-status-end { gap: var(--space-8); }
  .summary { padding: var(--space-24) var(--space-20); gap: var(--space-24); }
  .stats-page .card { padding: var(--space-20) var(--space-16); }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-tiles .stat-tile:first-child { grid-column: 1 / -1; }
  .stat-tile .stat-value { font-size: 36px; }
  .stat-tile:first-child .stat-value { font-size: 48px; }
  .stat-value small { font-size: 18px; }
  .stat-pair { grid-template-columns: 1fr; }
  .meter-table { grid-template-columns: minmax(0, 1fr) 96px 44px; gap: 12px; }
  .search { width: auto; flex: 1 1 160px; }
  /* Tables become two-line lists; a sort menu stands in for the column headings */
  .sort-menu { display: flex; gap: var(--space-8); }
  .phone-only { display: inline; }
  .wide-only { display: none; }
  .table-scroll { overflow: visible; }
  .data-table, .data-table tbody { display: block; min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tr { display: grid; align-items: center; column-gap: var(--space-12); row-gap: 2px; padding: 10px 0; border-top: 1px solid var(--grey-100); }
  .data-table tr[hidden] { display: none; }
  .data-table td { padding: 0; border: 0; }
  .countries-table tr { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "name name right pips" "region seen right pips"; }
  .c-name { grid-area: name; }
  .c-region { grid-area: region; font-size: 13px; }
  .c-seen { grid-area: seen; font-size: 13px; }
  .c-seen::before { content: "· "; }
  .c-seen { margin-left: calc(4px - var(--space-12)); } /* sit just after the cell before */
  .c-attempts { display: none; }
  .c-right { grid-area: right; font-size: 14px; }
  .c-mastery { grid-area: pips; }
  /* Sessions: two lines ("Name · Normal · Europe", then "Today · 20 answers") with the score on the right */
  .sessions-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; position: relative; padding-right: 56px; }
  .sessions-table tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; } /* breaks the line */
  .s-mode { order: 1; }
  .s-region { order: 2; font-weight: 500; }
  .s-region::before, .s-answers::before { content: "· "; }
  .s-when { order: 4; }
  .s-answers { order: 5; font-weight: 400; }
  .s-when, .s-answers { font-size: 13px; color: var(--text-muted); }
  .s-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .section-head > div { width: 100%; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }
  .start-over .btn { width: 100%; }
  .site-nav a { padding: 0 var(--space-12); }
  .score { font-size: 96px; }
  .summary-actions { flex-direction: column; }
  .summary-actions .btn { width: 100%; }
  .trail { gap: 4px; }
  .pip { width: 16px; height: 16px; }
  .pip svg { width: 9px; height: 9px; stroke-width: 4; }
  .pip.is-wrong svg { width: 7px; height: 7px; }
  .trail .count { margin-left: 4px; font-size: 13px; }
  .count-of { display: none; }
  .count-slash { display: inline; }
  .map { height: calc(100svh - 60px); min-height: 560px; margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .play-card {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    padding: var(--space-20) var(--space-16) var(--space-24);
    gap: 14px;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-sheet);
  }
  .prompt { font-size: 26px; }
  .prompt-large { font-size: 32px; }
  .answer-line { font-size: 30px; }
  .option { min-height: 56px; }
  .option-key, .keys { display: none; }
  .btn-next { min-height: 52px; font-size: 17px; }
  .map-plate { left: var(--space-16); top: 12px; }
  .map-zoom { right: 12px; top: 12px; }
  .flag-stage { padding: 56px 68px var(--space-24); } /* clear of the zoom and names buttons */
  /* The names switch shrinks to an "Aa" button under the zoom control */
  .map-toggle { top: calc(12px + 3 * var(--chip-height) + 10px); right: 12px; bottom: auto; width: 46px; padding: 0; justify-content: center; border-radius: var(--radius-control); }
  .map-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .map-toggle .switch { display: none; }
  .map-toggle-short { display: block; font: 700 15px/1 var(--font-display); }
  .map-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
  .hero { padding: var(--space-20) 0 var(--space-24); gap: var(--space-12); }
  .hero .lede { font-size: 16px; }
  .modes { grid-template-columns: 1fr; gap: var(--space-16); }
  .mode-card .picture { height: 150px; }
  .mode-card .body { padding: var(--space-20); gap: var(--space-16); }
  .mode-card h3 { font-size: 24px; }
  .card-footer { margin: auto calc(-1 * var(--space-20)) calc(-1 * var(--space-20)); padding: var(--space-16) var(--space-20) var(--space-20); }
  .chip { padding: 0 12px; }
  .chip[aria-current] { padding: 0 11px 0 9px; }
  /* The region chips become one row that scrolls sideways, so the bar stays short */
  .region-bar { margin: 0 calc(-1 * var(--space-16)) var(--space-16); padding: var(--space-12) 0 var(--space-12) var(--space-16); }
  .region-bar .chips { flex-wrap: nowrap; overflow-x: auto; padding-right: var(--space-16); scrollbar-width: none; }
  .step { font-size: 19px; }
  .difficulties { grid-template-columns: 1fr; }
  .difficulty span { flex-direction: row; align-items: baseline; gap: 10px; }
  .difficulty strong { min-width: 64px; }
}

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