/* Continental Journeys */

:root {
  --bg: #f7f5f1;
  --panel: #ffffff;
  --ink: #1b1a17;
  --ink-soft: #6a6660;
  --line: #e2ded7;
  --land: #e8e4dc;
  --land-base: #d6d0c4;
  --sea: #eef2f5;
  --ok: #3fa66b;
  /* Primary action. Dark text on bright green measures 10.5:1, against 3.0:1
     for white text on the old green — brighter AND more legible, not a trade. */
  --go: #34c96f;
  --go-hover: #2bb562;
  --go-ink: #10210f;
  --bad: #d4574e;
  --accent: #1b1a17;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14150f;
    --panel: #1d1e18;
    --ink: #f2efe8;
    --ink-soft: #9c988e;
    --line: #2e2f27;
    --land: #2a2b24;
    --land-base: #3a3b31;
    --sea: #101a1f;
    /* Slightly brighter on dark, where the surrounding page is not competing
       for attention. Dark text keeps it at 11:1. */
    --go: #3fd47a;
    --go-hover: #4ade80;
    --go-ink: #08140a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
code { font: 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--land); padding: .15em .4em; border-radius: 4px; }

.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.hl { border-bottom: 3px solid currentColor; }

/* ——— Layout ——— */

.screen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}

.screen--centre {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
}

.brand {
  font-weight: 650;
  letter-spacing: -.02em;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
}
.brand--big { font-size: clamp(2rem, 6vw, 3.2rem); cursor: default; margin-bottom: .25rem; }
.brand--small { font-size: .95rem; }
.tagline { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ——— Top bar ——— */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}
.topbar__mid { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar__right { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.pill {
  font-size: .78rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--land);
  border: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.pill--warn { background: #fdecea; border-color: #f5c6c2; color: #8f2d26; }
.pill--time { font-variant-numeric: tabular-nums; }
.pill--level, .pill--acct { cursor: pointer; }
.pill--level { font-weight: 600; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill--warn {
    background: #3a1d1a; border-color: #6b2d26; color: #f2b8b2;
  }
}

/* ——— Cards ——— */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: left;
}
.card--narrow { max-width: 420px; width: 100%; text-align: center; }
.card--error { max-width: 520px; }
.card--pass { border-color: var(--ok); }
.card--fail { border-color: var(--bad); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.big { font-size: 1.6rem; font-weight: 650; margin: 0; }
.sectionhead { margin: 24px 0 8px; }

.note {
  font-size: .8rem;
  color: var(--ink-soft);
  background: var(--land);
  padding: .6rem .75rem;
  border-radius: 8px;
  margin: .75rem 0 0;
}
.notice {
  background: var(--land);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .85rem;
  margin-bottom: 12px;
}
.notice--ok { border-color: var(--ok); }
.notice--warn { border-color: var(--bad); }
.note--error { color: var(--bad); }

/* ——— Buttons ——— */

.btn {
  font: inherit;
  padding: .6rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
}
.btn:hover:not(:disabled) { background: var(--land); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }

.btn--go {
  background: var(--go);
  color: var(--go-ink);
  border-color: var(--go);
  font-weight: 700;
  width: 100%;
  margin-top: .75rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 12px rgba(52,201,111,.28);
}
.btn--go:hover:not(:disabled) {
  background: var(--go-hover);
  border-color: var(--go-hover);
}
.btn--go:active:not(:disabled) { box-shadow: none; }
.btn--go:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.btn--quiet { background: none; border-color: transparent; color: var(--ink-soft); }
.btn--provider {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: .5rem; font-weight: 550;
}
.provider-glyph { font-weight: 700; width: 1.1em; }
.row { display: flex; gap: 8px; margin-top: 1rem; }
.row .btn { flex: 1; margin-top: 0; }

.link {
  background: none; border: 0; padding: 0;
  color: var(--ink-soft); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.link:hover { color: var(--ink); }

/* ——— Scholarship tiers ——— */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 1rem 0; }
.tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 1rem .5rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink);
  cursor: pointer; font: inherit;
  transition: border-color .15s ease, transform .08s ease;
}
.tier:hover:not(:disabled) { border-color: var(--ink); }
.tier:disabled { opacity: .4; }
.tier.is-loading { border-color: var(--ink); opacity: 1; }
.tier__days { font-size: 1.6rem; font-weight: 650; line-height: 1; }
.tier__unit { font-size: .7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.tier__price { font-weight: 600; margin-top: .35rem; }

/* ——— Stage tabs ——— */

.stagebar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.stagetab {
  font: inherit; font-size: .85rem; font-weight: 550;
  padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  cursor: pointer;
}
.stagetab.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.stagetab:disabled { opacity: .45; cursor: default; }

/* ——— Maps ——— */

.mapwrap {
  background: var(--sea);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* `width` must be stated explicitly. Without it the box has no definite
     inline size, so when `min-height` beats the ratio-derived height the browser
     runs `aspect-ratio` the other way and derives the WIDTH from 280px instead:
     280 x 16/8 = 560px, which overflowed the page sideways on every phone. With
     a definite width the ratio only ever sets the height, and min-height just
     makes a short map taller. */
  width: 100%;
  aspect-ratio: 16 / 8;
  min-height: 280px;
}
.mapwrap--continent { aspect-ratio: 16 / 10; }
.map { display: block; width: 100%; height: 100%; }

.sphere { fill: var(--sea); }

.country {
  stroke: var(--bg);
  stroke-width: .4;
  transition: opacity .15s ease;
}
.country--context { fill: var(--land); opacity: .45; pointer-events: none; }
.country--active:hover { opacity: .78; cursor: pointer; }
.country--base { stroke: var(--ink); stroke-width: 2.2; }
.country--neighbour { stroke: var(--ink); stroke-width: .7; }
.country--neighbour:hover { opacity: .75; }
/* Sea neighbours: dashed outline, so "near across water" never looks like a
   shared land border. */
.country--sea-neighbour { stroke: var(--ink); stroke-width: .7; stroke-dasharray: 3 2; }
.country--sea-neighbour:hover { opacity: .75; }
.country--isbase { stroke-dasharray: 3 2; stroke-width: .9; stroke: var(--ink-soft); }
.country--contested { stroke-dasharray: 2 2; }
.country--active-neighbour { stroke-width: 1.6; stroke: var(--ink); }
.country--correct, .country--wrong { stroke: var(--ink); stroke-width: 1; }

.base-pin { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.base-pin--active { fill: var(--bad); r: 5; }

.continent-label { pointer-events: auto; }
.continent-label__name {
  font-size: 11px; font-weight: 650; fill: var(--ink);
  text-anchor: middle; paint-order: stroke;
  stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round;
}
.continent-label__meta {
  font-size: 9px; fill: var(--ink-soft); text-anchor: middle;
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px;
}

.arrow line { stroke: var(--ink); stroke-width: 2; }
.arrow rect { fill: var(--panel); stroke: var(--ink); stroke-width: 1.2; }
.arrow text { font-size: 12px; font-weight: 600; fill: var(--ink); }

/* ——— Continent screen ——— */

.crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; font-size: .9rem; font-weight: 550; flex-wrap: wrap;
}
.crumbs__sep { color: var(--ink-soft); }
.crumbs__prog { margin-left: auto; color: var(--ink-soft); font-weight: 400; font-size: .85rem; }

.continent-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
/* Grid children default to min-width:auto, so a long name — Saint Vincent and
   the Grenadines, Bosnia and Herzegovina — pushes the track wider than 1fr and
   the whole page scrolls sideways on a phone. Letting them shrink, and wrapping
   the name instead of stretching the row, keeps the layout inside the screen. */
.continent-layout > * { min-width: 0; }
.baseitem__name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .continent-layout { grid-template-columns: 1fr; }
}

.bases {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.baseitem {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: .45rem .5rem; margin-bottom: 4px;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; cursor: pointer;
  text-align: left;
}
.baseitem:hover { background: var(--land); }
.baseitem.is-active { background: var(--tile); color: #fff; }
.baseitem.is-active .baseitem__count { color: rgba(255,255,255,.8); }
.baseitem.is-done .baseitem__name::after { content: ' ✓'; color: var(--ok); }
.baseitem.is-active.is-done .baseitem__name::after { color: #fff; }
.baseitem__flag { font-size: 1.05rem; }
.baseitem__name { flex: 1; font-size: .9rem; }
.baseitem__count { font-size: .75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.mapcol { display: flex; flex-direction: column; gap: 12px; }

.learnpanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.learnpanel__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.chip {
  color: #fff; font-weight: 600; font-size: .85rem;
  padding: .25rem .6rem; border-radius: 999px;
}

.neighbours { display: flex; flex-wrap: wrap; gap: 6px; }
.nchip {
  font: inherit; font-size: .85rem;
  padding: .35rem .65rem; border-radius: 999px;
  border: 1px dashed var(--line); background: var(--land); color: var(--ink-soft);
  cursor: pointer; min-width: 2.5rem;
}
.nchip:hover { border-color: var(--ink); }
.nchip.is-seen {
  border-style: solid; border-color: var(--tile);
  background: var(--panel); color: var(--ink); font-weight: 550;
}
.nchip.is-active { background: var(--tile); color: #fff; border-color: var(--tile); }
.nchip__q { font-weight: 700; }
.nchip__tag { font-size: .65rem; opacity: .7; margin-left: .3rem; }
.nchip--nopath { border-bottom-width: 3px; }

.activenote {
  margin-top: 12px; padding: 12px;
  background: var(--land); border-radius: 10px;
}
.activenote__head { display: flex; gap: 10px; align-items: center; }
.activenote__flag { font-size: 1.8rem; }
.activenote__name { font-weight: 650; }
.activenote__cap { font-size: .85rem; color: var(--ink-soft); }
.activenote__note { margin: .6rem 0 0; font-size: .85rem; }
.activenote__kind {
  margin-left: auto; font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px dotted var(--line); border-radius: 999px; padding: .15rem .5rem;
}
.island-note { font-size: .9rem; margin-bottom: .6rem; color: var(--ink-soft); }

/* A sea neighbour is a different fact from a land border, so it reads
   differently: dotted rather than solid, and tagged in words too. */
.nchip--sea.is-seen { border-style: dotted; }

/* Confirmation that a lesson landed. Its absence is what made the whole app
   feel broken: the button worked, but nothing on screen ever said so. */
.chip--done { background: var(--ok); color: #fff; }
.learndone {
  margin-top: 12px; padding: 12px;
  background: var(--land); border-radius: 10px;
  border: 1px solid var(--line);
}
.learndone__msg { margin: 0 0 .6rem; font-weight: 600; font-size: .9rem; }
.learndone .note { margin: 0; }

/* ——— Continent tiles ——— */

.continent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ctile {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease;
}
.ctile:hover { border-color: var(--tile); }
.ctile--locked { opacity: .5; cursor: default; }
.ctile--locked:hover { border-color: var(--line); }
.ctile__swatch { width: 26px; height: 6px; border-radius: 3px; background: var(--tile); }
.ctile__name { font-weight: 600; }
.ctile__meta { font-size: .78rem; color: var(--ink-soft); }
.ctile__bar { width: 100%; height: 4px; background: var(--land); border-radius: 2px; overflow: hidden; }
.ctile__bar i { display: block; height: 100%; background: var(--tile); }

/* ——— Tests ——— */

.testhead { text-align: center; margin-bottom: 12px; }
.bigflag { font-size: 4rem; line-height: 1; margin-bottom: .5rem; }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.option {
  font: inherit; padding: .85rem 1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; text-align: left;
}
.option:hover { border-color: var(--ink); }
.option.is-correct { background: var(--ok); border-color: var(--ok); color: #fff; }
.option.is-wrong { background: var(--bad); border-color: var(--bad); color: #fff; }

.testfoot { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.guesses { display: flex; flex-wrap: wrap; gap: 6px; min-height: 1.9rem; }
.guess { font-size: .8rem; padding: .25rem .55rem; border-radius: 999px; color: #fff; }
.guess--ok { background: var(--ok); }
.guess--no { background: var(--bad); }

.score { font-size: 3rem; font-weight: 700; line-height: 1; }
.unlock { color: var(--ok); font-weight: 600; }
.levelnow { margin-top: .5rem; }

/* ——— Progress ——— */

.ptable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptable th, .ptable td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.ptable th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .5rem; }

.ladder { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .85rem; }
.ladder li {
  display: flex; justify-content: space-between;
  padding: .25rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.ladder li.is-done { color: var(--ink); }
.ladder li.is-now { font-weight: 700; color: var(--ink); }

.renewals { list-style: none; padding: 0; font-size: .9rem; }
.renewals li { padding: .3rem 0; border-bottom: 1px solid var(--line); }

@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr; }
  .topbar { gap: 8px; }
  .topbar__mid { order: 3; width: 100%; }
}

/* Payment-mode notice: green when nothing can be charged, red when it can. */
.note--ok   { border-left: 3px solid var(--ok);  padding-left: .6rem; }
.note--warn { border-left: 3px solid var(--bad); padding-left: .6rem; color: var(--bad); }

/* Capitals and flags reuse the countries lesson, so the chips carry a second
   line naming which country the fact belongs to. */
.nchip__cap  { font-weight: 650; }
.nchip__flag { font-size: 1.5rem; line-height: 1; }
.nchip__of   { display: block; font-size: .7rem; opacity: .7; font-weight: 400; }
.nchip.is-active .nchip__of { opacity: .85; }

/* On the flags stage the flag IS the lesson, so it has to be big enough to
   study. At body-text size Chad and Romania are indistinguishable. */
.activenote__flag--huge { font-size: 4.5rem; line-height: 1; }
.bigflag { font-size: 6rem; }

/* Countries with more than one capital. Shown wherever the country is revealed,
   because "South Africa has three capitals and here is what each one does" is
   better content than quietly picking one and marking the others wrong. */
.capsplit { margin-top: .7rem; padding: .6rem .75rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; }
.capsplit__lead { font-size: .8rem; color: var(--ink-soft); margin-bottom: .4rem; }
.capsplit__list { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.capsplit__list li { display: flex; justify-content: space-between; gap: 1rem;
  padding: .18rem 0; }
.capsplit__list span { color: var(--ink-soft); font-size: .78rem; text-align: right; }

/* Flags stage: rectangular cards, not pills.
   A flag IS a rectangle — roughly 3:2 — and a pill with 999px corners crops the
   corners off, which is where several flags carry their distinguishing detail.
   Cards also let the flag be big enough to actually compare against its
   neighbours, which is the entire point of learning them in clusters. */
.nchip--flags {
  border-radius: 10px;
  padding: .5rem .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 5.5rem;
}
.nchip--flags .nchip__flag { font-size: 2.6rem; }
.nchip--flags .nchip__of   { font-size: .72rem; text-align: center; }
.nchip--flags .nchip__q    { font-size: 1.6rem; padding: .5rem 0; }

/* Capitals stage: the city is the lesson, so give it room to breathe. */
.nchip--capitals { border-radius: 10px; padding: .45rem .7rem; text-align: left; }

/* Hit targets for countries too small to click.
   The ring says "something is here"; the area around it is what you actually
   hit. 30px across, comfortably above the 24px WCAG minimum and usable on
   touch, where a 0.3px country is otherwise impossible. */
.hit__ring {
  fill: var(--panel);
  stroke-width: 1.8;
  opacity: .9;
  pointer-events: none;
}
.hit__dot { pointer-events: none; }
.hit__area { fill: transparent; }
.hit--clickable { cursor: pointer; }
.hit--clickable:hover .hit__ring { stroke-width: 3; }
.hit:not(.hit--clickable) .hit__area { pointer-events: none; }

/* Survey: choosing what to learn next. */
.surveyhead { margin-bottom: 1rem; }
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.track { text-align: left; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; cursor: pointer; }
.track:hover { border-color: var(--ink); }
.track__title { font-weight: 650; margin-bottom: .3rem; display: flex;
  justify-content: space-between; align-items: baseline; gap: .5rem; }
.track__soon { font-size: .65rem; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--line); padding: .1rem .35rem; border-radius: 999px; }
.track__blurb { font-size: .85rem; color: var(--ink-soft); margin-bottom: .5rem; }
.track__detail { margin: 0; padding-left: 1.1rem; font-size: .78rem; color: var(--ink-soft); }

/* Water chips are wider than country pills — the names are longer. */
.nchip--water { border-radius: 10px; padding: .45rem .7rem; text-align: left; }

.stagetab--water { border-color: #2f7fa8; color: #2f7fa8; font-weight: 650; }
.stagetab--water:hover { background: #2f7fa815; }
.stagetab--land { border-color: #a0673c; color: #a0673c; font-weight: 650; }
.stagetab--land:hover { background: #a0673c15; }

/* Mistake-based learning: the home call-to-action and the mix-ups screen. */
.mixcta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 16px; margin-bottom: 12px;
  border: 1px solid #b0567f; border-radius: 12px; background: #b0567f14;
  color: #b0567f; font-weight: 650; font-size: .95rem; cursor: pointer; text-align: left;
}
.mixcta:hover { background: #b0567f24; }
.mixcta__count {
  margin-left: auto; background: #b0567f; color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: .8rem;
}
.mixlist { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.mixitem { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.mixitem__head { font-weight: 650; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mixitem__count { font-size: .78rem; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.mixitem__note { margin: 8px 0 0; font-size: .92rem; color: var(--ink); }
.mixcard { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.mixcard__side { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mixcard__side--target { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.mixcard__flag { font-size: 1.8rem; line-height: 1; }
.mixcard__name { font-weight: 650; margin-top: 4px; }
.mixcard__tag { font-size: .7rem; font-weight: 600; color: var(--ok); }
.mixcard__meta { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }
.mixcard__vs { align-self: center; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }

/* Do-it-yourself tutorial: a bubble that points at the next action, plus a
   pulsing highlight on the thing to tap. */
.tutorial {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; padding: 16px; pointer-events: none;
}
.tutorial__bubble {
  pointer-events: auto; max-width: 600px; width: 100%;
  background: var(--panel); border: 3px solid var(--accent);
  border-radius: 18px; padding: 22px 26px; box-shadow: 0 10px 36px rgba(0, 0, 0, .22);
}
.tutorial__step {
  font-size: .85rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tutorial__text { margin: 10px 0 12px; font-size: 1.3rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.tutorial__row { display: flex; align-items: center; gap: 12px; }
.tutorial__skip {
  margin-left: auto; background: none; border: none; color: var(--ink-soft);
  font-size: .85rem; cursor: pointer; text-decoration: underline;
}
.tut-highlight {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px;
  animation: tutpulse 1.4s ease-in-out infinite;
}
@keyframes tutpulse {
  0%, 100% { outline-color: color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { outline-color: var(--accent); }
}
.tutorial__must { margin: 10px 0 0; font-size: .95rem; font-weight: 600; color: var(--accent); }

/* The always-available "How to play" button in the top bar. */
.pill--howto { cursor: pointer; font-weight: 650; border-color: var(--accent); }
.pill--howto:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Tutorial mode: strip the screen down to just what the current step points at,
   so a brand-new player sees the tutorial and nothing else. */
.tutorial-mode .stagebar,
.tutorial-mode .sharerow,
.tutorial-mode .mixcta,
.tutorial-mode .crumbs,
.tutorial-mode .topbar__mid,
.tutorial-mode .homefoot,
.tutorial-mode .pill--fb,
.tutorial-mode .pill--level,
.tutorial-mode .pill--howto,
.tutorial-mode .pill--streak,
.tutorial-mode .pill--mute,
.tutorial-mode .pill--acct { display: none !important; }
.pill--streak { font-weight: 700; }
.pill--mute { cursor: pointer; }

/* Username + passcode sign-in. */
.authtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.authtab {
  flex: 1; padding: 8px; border: 1px solid var(--line); background: var(--bg);
  border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--ink-soft);
}
.authtab.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.authform { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.authlabel { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.authinput {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1rem; background: var(--panel); color: var(--ink);
}
.pwmeter { display: flex; align-items: center; gap: 8px; }
.pwmeter__track { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pwmeter__track i { display: block; height: 100%; width: 0; transition: width .2s ease; background: var(--ok); }
.pwbar--0, .pwbar--1 { background: #d9534f; }
.pwbar--2 { background: #e0a300; }
.pwbar--3, .pwbar--4 { background: var(--ok); }
.pwmeter__label { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }

/* Milestone badges on the progress screen. */
.badgegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin: 8px 0 4px;
}
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; background: var(--panel);
}
.badge__emoji { font-size: 1.9rem; line-height: 1; }
.badge__label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.badge--locked { opacity: .38; filter: grayscale(1); }

/* A brief toast, e.g. when a badge is earned. */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px;
  font-weight: 650; font-size: .95rem; box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 80;
  pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* Tap-to-hear button on a revealed place. */
.speak {
  margin-inline-start: auto; align-self: center; background: none; border: none;
  cursor: pointer; font-size: 1.15rem; line-height: 1; opacity: .65; padding: 4px;
}
.speak:hover { opacity: 1; }

/* A small pop of reward on a correct choice. */
.option.is-correct { animation: pop .3s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.tut-nudge { animation: tutnudge .4s ease; }
@keyframes tutnudge {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Region headers grouping the land sidebar (Africa, Asia, …). */
.bases__region {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); margin: 14px 4px 6px; }
.bases__region:first-child { margin-top: 4px; }
.baseitem__kind { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.baseitem.is-active .baseitem__kind { color: #ffffffcc; }
.stagetab__count { opacity: .65; font-weight: 400; margin-left: .25rem; }

/* Typed test: name the country you clicked. */
.testhead--typed { text-align: left; margin-bottom: 10px; }
.typedform { display: flex; gap: 8px; margin-bottom: .6rem; flex-wrap: wrap; }
.typedinput {
  flex: 1; min-width: 12rem; font: inherit; font-size: 1.05rem;
  padding: .6rem .8rem; border-radius: 9px;
  border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
}
.typedinput:focus { outline: 3px solid var(--go); outline-offset: 1px; }
.typedsubmit { width: auto; margin-top: 0; }
.typedfeedback { font-size: .9rem; font-weight: 600; margin: 0 0 .6rem; }
.typedfeedback--ok { color: var(--ok); }
.typedfeedback--no { color: var(--bad); }

/* The explainer at the top of the home screen. */
.intro {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--go);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.intro__close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; font-size: 1.3rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer; padding: .2rem .4rem;
}
.intro__close:hover { color: var(--ink); }
.intro__title { font-size: 1.15rem; margin: 0 0 .5rem; padding-right: 2rem; }
.intro__lead { font-size: .92rem; margin-bottom: .75rem; max-width: 62ch; }
.intro__steps { margin: 0 0 .75rem; padding-left: 1.2rem; font-size: .9rem; max-width: 62ch; }
.intro__steps li { margin-bottom: .3rem; }
.intro__foot { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.introtoggle {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .78rem; color: var(--ink-soft);
  padding: .25rem .7rem; cursor: pointer; margin-bottom: 12px;
}
.introtoggle:hover { color: var(--ink); border-color: var(--ink); }

/* Due-for-review banner. Sits above everything on the home screen because a
   review you never see is a review that never happens. */
.duebanner {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; margin-bottom: 14px;
  border: 1px solid var(--go); border-left: 4px solid var(--go);
  border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.duebanner:hover { background: color-mix(in srgb, var(--go) 8%, var(--panel)); }
.duebanner__n { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--go); }
.duebanner__text { flex: 1; font-size: .9rem; }
.duebanner__go { font-weight: 650; white-space: nowrap; }

/* One review item at a time. */
.reviewcard {
  max-width: 620px; margin: 0 auto; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 24px;
}
.reviewcard__kind {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin-bottom: .5rem;
}
.reviewcard__q { font-size: 1.3rem; margin-bottom: .5rem; }
.reviewcard__hint { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1rem; }
.reviewcard .typedform { justify-content: center; }

/* The country a naming test is currently asking about. Outline only — no label,
   no arrow, nothing that names it — so the question stays a question. */
.country--asking {
  stroke: var(--ink);
  stroke-width: 2.4;
  paint-order: stroke;
}

/* A country the learner gave up on. Named rather than hidden — being stuck is
   only useful if you find out the answer — and in the wrong-answer red so it
   reads as "you did not get this", not as another one you earned. */
.nchip--skipped {
  border-style: solid;
  border-color: var(--bad);
  background: var(--panel);
  color: var(--bad);
  font-weight: 550;
}
.hintline {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
}
.hintline strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  color: var(--ink);
}

/* Ring round the country a naming test is asking about. Small countries are
   easy to mis-click, and being told your answer "is not the one outlined" is
   only fair if which one is outlined is obvious. */
.ask-ring {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  opacity: .85;
  pointer-events: none;
}

/* The fact shown once a whole cluster has been named from memory. It is the
   payoff for the hardest part of the app, so it gets room to breathe rather
   than being another grey note. */
.factcard {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  background: var(--panel);
}
.factcard__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.factcard__text { margin: 0; font-size: .95rem; line-height: 1.55; }

/* The live-usage number on the private stats page. */
.statbig {
  font-size: 3.4rem;
  font-weight: 650;
  line-height: 1;
  margin: .2rem 0 .4rem;
  font-variant-numeric: tabular-nums;
}

/* Every country is a target in the coordinates test, so they all light up. */
.country--pickable:hover { opacity: .7; }

/* Invite a friend: shares the link, never anybody's contact details. */
.sharerow { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.sharerow__msg { font-size: .85rem; color: var(--ink-soft); }

/* Stars: earned by sharing, each one opening a fact the course does not teach. */
.starchip {
  font-size: .8rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--land); border: 1px solid var(--line);
}
.starcard {
  margin-top: 10px; padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 4px solid #e0a92b;
  background: var(--panel);
}
.starcard__head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-bottom: .35rem;
}
.starcard__text { margin: 0; font-size: .95rem; line-height: 1.55; }

/* Water lesson: the ocean solid, everything inside it striped, exactly as a base
   country and its neighbours read on the continent map. */
.waterblob { stroke: var(--ink); stroke-width: .8; transition: opacity .15s ease; }
.waterblob--neighbour { stroke-dasharray: 3 2; }
.waterblob--neighbour:hover { opacity: .7; }
.waterblob--active { stroke-width: 2.4; stroke-dasharray: none; }
.waterblob__label {
  font-size: 10px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none;
}

/* Land lesson: the range or desert drawn as its real outline, over the countries
   it spans — striped until revealed, then filled and named, like the water course. */
.landcountry { transition: opacity .15s ease; }
.landcountry:not(.is-seen):hover { opacity: .7; }
.landcountry__label {
  font-size: 10px; font-weight: 600; fill: var(--ink);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none;
}
.landshape__label {
  font-size: 12px; font-weight: 700; fill: var(--ink);
  paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; pointer-events: none;
}

/* A river is a line, not an area, so it is stroked. */
.waterblob--line {
  /* CSS beats the presentation attribute, so the colour has to be set here or
     a river is drawn in the ink colour used for outlines. */
  stroke: #2f7fa8;
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: none;
}
.waterblob--line.waterblob--active { stroke-width: 4; }

/* Feedback: reachable from every screen, because the moment to report something
   is the moment it happens. */
.pill--lang { cursor: pointer; font-weight: 600; padding-right: .4rem; max-width: 8.5rem; }
.pill--fb { cursor: pointer; font-weight: 600; }
.pill--fb.is-open { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.fbpanel {
  max-width: 560px;
  margin: 10px auto 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fbpanel__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.fbpanel__text {
  width: 100%; min-height: 96px; resize: vertical;
  font: inherit; font-size: .9rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.fbpanel__note { font-size: .75rem; color: var(--ink-soft); margin: .5rem 0 0; }
.fbpanel__error { font-size: .85rem; color: var(--bad); margin: .5rem 0 0; }
.fbpanel__thanks { margin: 0 0 .6rem; font-weight: 600; }
.fbpanel .row { margin-top: .7rem; }

/* Tester reports on the private stats page. */
.reports { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.report {
  padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: 8px;
}
.report__meta { font-size: .72rem; color: var(--ink-soft); margin-bottom: .35rem; }
.report__msg { margin: 0; font-size: .92rem; white-space: pre-wrap; }