/*
 * GeoQuiz design tokens — "Arcade Atlas".
 * The single place to restyle the app: every colour, font, radius, shadow and timing used
 * by the components comes from here. Change a value and it carries through every screen.
 */
:root {
  /* Surfaces */
  --sea: #0b6e79;            /* page backdrop */
  --sea-light: #138a95;      /* top of the backdrop gradient, map card */
  --sea-deep: #05434a;       /* tracks, dark buttons, insets */
  --sea-deeper: #032a2f;     /* pressed shadow of dark buttons */
  --sand: #fff7e8;           /* cards, prompts, text on sea */
  --sand-shadow: #b9ab92;    /* pressed shadow of sand cards */
  --ink: #123047;            /* text on sand */
  --ink-soft: #5e6f73;       /* secondary text on sand */
  --foam: #cdeef0;           /* secondary text on sea */
  --sea-bottom: #095560;     /* bottom of the backdrop gradient */

  /* Cards: level rows, prompts, answer buttons, reward, passport page… */
  --card: var(--sand);
  --card-shadow: var(--sand-shadow);
  --card-line: #eadfc8;      /* passport page edge, dotted paper */
  --on-card: var(--ink);
  --on-card-soft: var(--ink-soft);
  --card-track: #dceff0;     /* empty progress bars on cards */
  --hardcore-tile: #ffe6df;     /* the Hardcore tile on the country page: a coral tint of the card */
  --level-flame: var(--coral-shadow);   /* the flame on a level done in Hardcore */
  --flame-core: var(--legend-light);    /* the inner flame of a filled coral flame (both themes: a pale core reads on coral) */
  --flame-core-on-sun: var(--coral);    /* the inner flame of a filled sun-coloured flame */
  /* A Hardcore group won, and a legendary country's mark: one gold flame wherever it sits (GQ-194, the panel hardcore-flames, B). */
  --flame-won: var(--legend);
  --flame-won-core: var(--flame-core-on-sun); /* its inner flame, coral */
  --flame-won-edge: var(--legend-shadow);     /* its rim: it reads on the pale card and on a gold header */
  --flame-won-tile: var(--sun-a16);           /* its tile in Hardcore's list */
  /* The home's day flame (GQ-420): coral by default, gold when the last 5 dailies were perfect, blue when most were low. */
  --flame-gold: var(--flame-won);
  --flame-cold: #3b7dd8;
  --daily-partial: var(--orange);             /* the daily's done check under 100 % */
  --daily-partial-edge: var(--orange-shadow);

  /* Bars and floating controls: bottom navigation, map zoom buttons */
  --bar: #06363c;
  --bar-shadow: #021a1d;
  --on-bar: var(--foam);
  --bar-current: var(--sun);

  /* Actions */
  --sun: #ffc93c;            /* anything you can tap */
  --sun-shadow: #c9921b;
  --plus-wash: #123047;      /* the Plus pill (GQ-134): deep ink behind sun words, on the sand card */
  --plus-ink: #ffc93c;
  --coral: #ff6b57;          /* combos, highlights, stamps */
  --coral-shadow: #b8402f;

  /* Meaning */
  --go: #2bb673;             /* right answers, progress */
  --go-shadow: #1d7f50;
  --orange: #f07d1a;         /* right on the second try: orange, clearly apart from the sun of the place asked (GQ-155) */
  --orange-shadow: #a8520c;
  --miss: #e2525f;           /* wrong answers */
  --miss-shadow: #9e2f39;
  --miss-light: #ff8a94;     /* a wrong tap on the map, until the next tap */
  --miss-soft-shadow: #d98a92; /* the press edge of a light red button (--miss-soft) */
  --miss-ink: #3a1417;       /* text on light red */
  --lime: #9be15d;           /* a place found for the first time */
  --done: var(--go-shadow);  /* a finished Hardcore category (GQ-117): its pill and the card's edge, the same in both themes */

  /* Learning states (GQ-115): one set for the country page, the lessons, the games and the maps */
  --state-known: var(--go);         /* a place known: placed and named */
  --state-progress: #a8dd8f;        /* a bar's rest of the % beside the known part: the places with one of the two parts (light green) */
  --state-placed: #6fa8f2;          /* a place placed only, not named (What counts, rule 8): the blue of the "Place" tag, lighter */
  --state-placed-glow: #a9cbf8;     /* the peak of a placed-only place's pulse on the map card: a lighter blue, never sun */
  --state-named: #a98cf2;           /* a place named only, not placed: the purple of the "Name" tag, lighter */
  --state-named-glow: #cbb8f8;      /* the peak of a named-only place's pulse on the map card: a lighter purple, never sun */
  --state-slipped-edge: var(--miss); /* a known place missed lately: it keeps the fill of what the player knows, with this edge, until its review (GQ-155, 5C) */
  --state-waiting-edge: var(--on-colour); /* a placed place that waits for the next day's check: the placed blue with this dashed edge (GQ-182) */
  --state-waiting-dash: 3 2.4;      /* the map's dashes (non-scaling px: dash, gap) */
  --state-next: var(--sun);         /* the places the next step asks, pulsing as in a lesson */
  --tag-place: #3d7fe0;             /* "Place them on the map": a way's tag */
  --tag-name: #8e6be8;              /* "Name them": a way's tag */
  --count-ink: var(--go-shadow);    /* a part's count in a level's sheet ("21/32", GQ-152): the known green, dark enough on the card */
  --count-wash: rgb(43 182 115 / 0.14); /* its pill: the known green washed over the card (a plain value: old WebViews lack color-mix) */
  --review-ink: var(--coral-shadow); /* a review's words on a card (the card's eyebrow): coral in the dark */
  --learn-ink: var(--go-shadow);     /* "Keep learning" on the home's card (its eyebrow, GQ-164): the learn green, dark enough on the card; go in the dark */
  --on-done: var(--sand);

  /* A game's states and its results' (GQ-155, design/rules/state-colours/spec.md): one token per state, named for its meaning. The
     rules that paint a place or a choice read these only (src/styles/designRules.test.ts): a state changes here, alone. */
  --target: var(--sun);                /* the place a game asks (Pick the name, Type the name, a lesson), pulsing; the rest dimmed */
  --target-edge: var(--sun-shadow);    /* the outline of a dot or a shape asked */
  --result-right: var(--go);           /* right; on the results, known and found */
  --result-retried: var(--orange);     /* right on the second try (counted as found) */
  --result-retried-edge: var(--orange-shadow); /* the press edge of its message */
  --result-missed: var(--miss);        /* missed, the answer shown; on the results, known and not found */
  --result-answer: #00ff66;            /* the answer of a miss while it blinks (GQ-326): a bright green, never the found green; both themes */
  --result-wrong: var(--miss-light);   /* a wrong tap or pick, until the next tap */
  --result-wrong-edge: var(--miss);    /* its edge: the light red alone did not read apart from the pale land (owner, GQ-115 K3) */
  --result-new: var(--lime);           /* the results: found for the first time */
  --result-new-edge: var(--gold);
  --result-hardcore: var(--legend);              /* the results after Hardcore: a place named, in gold (GQ-191) */
  --result-hardcore-edge: var(--legend-shadow);
  --choice-right: var(--go);           /* the right name on its button, after two wrong picks */
  --choice-right-edge: var(--go-shadow);
  --choice-right-ink: var(--on-colour);
  --choice-wrong: var(--miss-soft);    /* a wrong pick's button: light red, dark text */
  --choice-wrong-edge: var(--miss-soft-shadow);
  --choice-wrong-ink: var(--miss-ink);

  /* Map */
  --land: #fff2d4;
  --land-stroke: #0b6e79;
  --stamp-empty: #9bb9bd;     /* empty passport stamps */
  --land-off: #4b9aa2;       /* divisions outside the quiz */
  --land-dim: #8cb8b3;       /* the rest of the quiz while one highlighted place is asked (GQ-130): muted, cooler than the sun */
  --land-dim-stroke: #3a8f95;
  --highlight-pulse-min: 0.85; /* how low the asked place's pulse goes (its fill or stroke opacity): it breathes but stays the sun colour */
  --map-sea: #0f8a96;
  --zoom-line: #04252a;       /* a zoom box's frame and leading lines (GQ-357): dark, with a light halo, so they read on the sea, the land and every tint */
  --zoom-line-halo: #fff2d4;
  --map-edge: #36a9b3;
  --land-hover: #ffe3a3;
  --capital: var(--coral);   /* capital dots */
  --river: #2a9fd6;          /* rivers and lakes (nature sets) */
  --relief: #c08a52;         /* mountain ranges (nature sets) */
  --forest: #3f9a5a;         /* forests (nature sets) */
  --leader: var(--ink);      /* lines from a name to its place */
  --capital-ring: #fff;

  /* Map of Europe: % mastered bands (new … mastered) */
  --band-1: #d8efc2;
  --band-2: #a8dd8f;
  --band-3: #6fca73;
  --band-4: #2bb673;
  --band-5: var(--gold);

  /* Medals: each metal as a base, a light (lit facets) and a shadow (shaded facets) tone */
  --gold: #f5b700;
  --gold-light: #ffe58a;
  --gold-shadow: #a87a00;
  --silver: #c3ccd3;
  --silver-light: #f2f6f9;
  --silver-shadow: #7f8b95;
  --bronze: #d68a4c;
  --bronze-light: #f3bf94;
  --bronze-shadow: #8f5426;
  /* The sapphire (GQ-490), the third step (its key in the code is still `emerald`): a cut gem, its facets and rim (the mark in the palest) */
  --sapphire: #2a5bcc;
  --sapphire-light: #bcd0ff;
  --sapphire-shadow: #183c8f;
  --sapphire-facet: #79a3ff;
  --sapphire-deep: #1a3d96;
  --sapphire-rim: #0d2463;
  --sapphire-mark: #e0eaff;
  /* A medal's two ribbon tails (the rosette, GQ-160): the app's coral and sea. The sea tail lightens in the dark, where --sea is the backdrop.
     Their edge carries them on a tile of their own colour (the sea tail on the teal tile, the coral one on the red): designRules.test.ts. */
  --ribbon-coral: var(--coral);
  --ribbon-sea: #0b6e79;
  --ribbon-edge: var(--shade-4);
  /* A legendary country (Hardcore won): its tile and header turn gold */
  --legend-light: #ffe27a;
  --legend: #f5b700;
  --legend-deep: #d18f00;
  --legend-ink: #4a3200;
  --legend-shadow: #8a6200;
  /* The legendary country's silhouette is a gold piece (GQ-163): a diagonal gradient, a dark rim, a small shadow. Gold is bright in
     both themes (like the metals), so no dark override. */
  --legend-coin-1: #fff6cf;
  --legend-coin-2: #ffd54d;
  --legend-coin-3: #f5b700;
  --legend-coin-4: #a87400;
  --legend-coin-rim: #5a3d00;
  --legend-coin-shadow: rgb(90 61 0 / 0.45);
  /* The Hardcore ladder: the background of a country's tile and header once a piece is won (gold is the legendary look above) */
  /* Metals stay bright in both themes (metal catches the light); dark ink on them. */
  --tier-bronze-light: #f7cd9f;
  --tier-bronze-mid: #dd9459;
  --tier-bronze-band: #ffe3c4;
  --tier-bronze-deep: #b4672f;
  --tier-bronze-rim: #8a4b1e;
  --tier-bronze-glow: rgb(221 148 89 / 0.5);
  --tier-bronze-ink: #2e1604;
  --tier-bronze-shadow: #6e3c17;
  --tier-silver-light: #f8fafc;
  --tier-silver-mid: #ccd5dd;
  --tier-silver-band: #ffffff;
  --tier-silver-deep: #93a1ae;
  --tier-silver-rim: #6c7a87;
  --tier-silver-glow: rgb(214 226 238 / 0.6);
  --tier-silver-ink: #17242c;
  --tier-silver-shadow: #56636e;
  --legend-band: #fff4b8;
  --legend-rim: #a37000;
  --legend-glow: rgb(245 183 0 / 0.55);
  --tier-emerald-light: #a9c2ff;
  --tier-emerald-deep: #2a5bcc;
  --tier-emerald-ink: #0b1a45;
  --tier-emerald-shadow: #183c8f;
  --go-light: #5fd89c;       /* the glossy top of a progress strip */
  --sun-light: #ffd866;      /* the glossy top of a finished strip */

  /* One colour per country (tiles, headers, stamp ink): twelve, given by country in src/ui/colours.ts (GQ-164), the same in both themes.
     The last four are as readable under white text as the first eight and no closer to any other than the closest two of the eight
     (src/styles/designRules.test.ts). */
  --tint-0: #3d6fd8;
  --tint-1: #2bb673;
  --tint-2: #f28f3b;
  --tint-3: #8e6be8;
  --tint-4: #e2525f;
  --tint-5: #19a7b5;
  --tint-6: #a0623a; /* not gold: gold means a legendary country */
  --tint-7: #e0569b;
  --tint-8: #c13fb0;  /* magenta */
  --tint-9: #7d9a26;  /* olive */
  --tint-10: #2e9be0; /* sky */
  --tint-11: #a5607f; /* mauve */

  /* Type */
  /* Baloo 2 covers every letter of our place names (Lilita One lacked ą ć ę ń ś ź ż ċ ġ ħ). */
  /* Baloo 2 has no Cyrillic: Nunito 800's (already bundled) stands in for it (GQ-363, 8B). */
  --font-display: 'Baloo 2', 'Nunito', 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --display-weight: 800;
  --font-body: 'Nunito', 'M PLUS Rounded 1c', 'Segoe UI', system-ui, sans-serif;
  /* A multiple-choice button's type (GQ-127, GQ-138): the width sets it, so a half-width button holds the longest names from 320 to
     480 px at 100-130 % text. src/ui/choiceSize.ts picks the step for each name from the numbers below (a test reads them): a name
     that holds two lines at the first keeps it, a longer one takes the next that holds it. The last is the floor, 10.6 px at 320 px
     (12 px at 360), with the padding tightened for the room; the native name under a name is 0.78em of it, never under
     --choice-native-min. */
  --choice-text: min(1rem, 4.4vw);
  --choice-text-long: min(1rem, 3.7vw);
  --choice-text-longer: min(1rem, 3.3vw);
  --choice-pad-longer: 0.25rem;
  --choice-native-min: 10px;
  --choice-native-scale: 0.78em; /* the native name under a choice, of the name's type (src/ui/choiceSize.ts: NATIVE_SCALE) */
  /* Names on the maps (GQ-123), Nunito at 8-12 px, haloed by a round-joined stroke and, under it, a ring of hard shadows (see
     `.map-labels text`). The ring's radius must reach the radius of the counters (a, o, e, g…) or the land shows through them as
     a pinprick; a lighter weight has bigger counters, so each weight comes with its own minimum (src/styles/mapNames.test.ts:
     900 -> 0.17em, 800 -> 0.19em, 700 -> 0.21em, measured at 3x). Change a weight and its halo together; the weight must be one
     of the bundled @fontsource/nunito files (main.tsx). */
  --map-name-stroke: 1.6px;       /* the halo under every name, screen px: as thick as the letters (GQ-149) */
  --map-name-weight: 800;         /* places (owner, 2026-10-07: 900 was a little heavy) */
  --map-name-weight-soft: 800;    /* capitals (italic) */

  /* Colours that were typed in the stylesheets: text on a colour, shades, glints, soft meanings */
  --on-colour: #fff;                       /* text and icons on coral, go, miss and country colours */
  --shade-1: rgb(0 0 0 / 0.12);            /* shades: bevels, hairlines, dark tracks on a light fill */
  --shade-2: rgb(0 0 0 / 0.2);             /* the press edge of a country tile, round buttons on a colour, tracks on a colour */
  --shade-3: rgb(0 0 0 / 0.3);             /* drop shadows, the bar's shadow */
  --shade-4: rgb(0 0 0 / 0.6);             /* the dark halo of a ring on the map */
  --scrim: rgb(0 0 0 / 0.45);              /* the page dimmed behind a sheet */
  --glint-1: rgb(255 255 255 / 0.14);      /* glints: empty rings, bevels, sheens */
  --glint-2: rgb(255 255 255 / 0.3);
  --glint-3: rgb(255 255 255 / 0.5);
  --glint-4: rgb(255 255 255 / 0.8);
  --go-soft: #8ff0b8;                      /* Results figures on the sea */
  --amber-soft: #ffd08a;
  --miss-soft: #ffb0b7;
  --sand-a14: rgb(255 247 232 / 0.14);     /* sand and sun washes (a plain value: old WebViews lack color-mix) */
  --sand-a45: rgb(255 247 232 / 0.45);
  --sun-a16: rgb(255 201 60 / 0.16);

  --zoom-line-opacity: 0.42;  /* the faint lines from a zoom box to its place (GQ-091): visible, not spaghetti */
  --zoom-line-active: 0.95;   /* the line of the place that matters */

  /* Spacing: a 4 px grid with a 6 px half step, in rem so it grows with the text size (DESIGN.md §3). Token name = px / 4. */
  --space-0-5: 0.125rem;     /* 2 */
  --space-1: 0.25rem;        /* 4 */
  --space-1-5: 0.375rem;     /* 6 */
  --space-2: 0.5rem;         /* 8 */
  --space-3: 0.75rem;        /* 12 */
  --space-4: 1rem;           /* 16 */
  --space-6: 1.5rem;         /* 24 */
  --space-8: 2rem;           /* 32 */
  /* A level row's ring and Hardcore's tile: what sits before a row's name (the Plus pill lines up after it, GQ-134). */
  --row-ring: 42px;

  /* Type scale (DESIGN.md §4) */
  --text-2xs: 0.625rem;      /* 10: counts on marks, stamp captions */
  --text-xs: 0.72rem;        /* 11.5: eyebrows, captions, nav labels */
  --text-s: 0.85rem;         /* 13.6: chips, pills, segments, hints */
  --text-m: 1rem;            /* 16: body, answers, names */
  --text-l: 1.15rem;         /* 18.4: buttons, setting labels */
  --text-xl: 1.35rem;        /* 21.6: wide buttons, reward titles */
  --price-fit: 30cqi;        /* a plan's price in its column: "24,99 €" is 3.25 x its size wide, so the size follows the column (GQ-213) */
  --text-2xl: 1.6rem;        /* 25.6: screen titles */
  --text-3xl: 1.9rem;        /* 30.4: the country's name, the place asked */
  --text-hero: 3.4rem;       /* 54.4: the level on the rewards page's badge */
  /* Stars are sized in px, not on the type scale (DESIGN.md §4): the results' score card, the middle one raised (GQ-165) */
  --star: 28px;
  --star-lead: 36px;

  /* Shape */
  --radius-2xs: 3px;         /* flags */
  --radius-xs: 6px;          /* passport marks, ink badges */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;      /* pills, chips, dots, round buttons */
  --press: 5px;              /* depth of anything you tap that is 44 px or taller */
  --press-s: 3px;            /* depth of small raised things: pills, toasts, map buttons, badges */
  --shadow-bar: 0 -4px 12px var(--shade-3);   /* the bottom nav and the edit bar */
  --map-inset: 0.75rem;      /* a map's buttons keep this far from its edge (its corners are rounded, its rim 3 px) */

  /* Motion (src/ui/motion.ts reads the same numbers: a test keeps them equal) */
  --ease-pop: cubic-bezier(0.2, 1.6, 0.4, 1);   /* lands with an overshoot */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);   /* the default */
  --ease-in: cubic-bezier(0.5, 0, 1, 1);        /* leaving: a lost streak */
  --ease-press: ease;                           /* a tap, a shake, a toast: the browser's own ease */
  /* The springs (GQ-470, src/ui/spring.ts: a test keeps them equal): linear() easings sampled from a damped spring, each with its own length.
     snap: presses and slams; glide: screens and map moves, no overshoot; settle: arrivals; bounce: rewards only. */
  --ease-snap: linear(0, 0.024 2.8%, 0.082 5.6%, 0.158 8.3%, 0.243 11.1%, 0.329 13.9%, 0.413 16.7%, 0.491 19.4%, 0.562 22.2%, 0.626 25.0%, 0.682 27.8%, 0.731 30.6%, 0.774 33.3%, 0.81 36.1%, 0.841 38.9%, 0.868 41.7%, 0.89 44.4%, 0.909 47.2%, 0.925 50.0%, 0.938 52.8%, 0.949 55.6%, 0.958 58.3%, 0.965 61.1%, 0.972 63.9%, 0.977 66.7%, 0.981 69.4%, 0.984 72.2%, 0.987 75.0%, 0.99 77.8%, 0.992 80.6%, 0.993 83.3%, 0.994 86.1%, 0.995 88.9%, 0.996 91.7%, 0.997 94.4%, 0.998 97.2%, 1);
  --ease-glide: linear(0, 0.023 2.8%, 0.078 5.6%, 0.152 8.3%, 0.234 11.1%, 0.319 13.9%, 0.401 16.7%, 0.478 19.4%, 0.548 22.2%, 0.612 25.0%, 0.668 27.8%, 0.718 30.6%, 0.761 33.3%, 0.799 36.1%, 0.831 38.9%, 0.858 41.7%, 0.881 44.4%, 0.901 47.2%, 0.918 50.0%, 0.932 52.8%, 0.943 55.6%, 0.953 58.3%, 0.961 61.1%, 0.968 63.9%, 0.974 66.7%, 0.978 69.4%, 0.982 72.2%, 0.985 75.0%, 0.988 77.8%, 0.99 80.6%, 0.992 83.3%, 0.993 86.1%, 0.995 88.9%, 0.996 91.7%, 0.996 94.4%, 0.997 97.2%, 1);
  --ease-settle: linear(0, 0.021 2.8%, 0.075 5.6%, 0.15 8.3%, 0.237 11.1%, 0.328 13.9%, 0.418 16.7%, 0.505 19.4%, 0.585 22.2%, 0.658 25.0%, 0.723 27.8%, 0.779 30.6%, 0.827 33.3%, 0.867 36.1%, 0.901 38.9%, 0.929 41.7%, 0.951 44.4%, 0.968 47.2%, 0.981 50.0%, 0.991 52.8%, 0.999 55.6%, 1.004 58.3%, 1.008 61.1%, 1.01 63.9%, 1.011 66.7%, 1.011 69.4%, 1.011 72.2%, 1.01 75.0%, 1.009 77.8%, 1.009 80.6%, 1.008 83.3%, 1.007 86.1%, 1.006 88.9%, 1.005 91.7%, 1.004 94.4%, 1.003 97.2%, 1);
  --ease-bounce: linear(0, 0.032 2.8%, 0.115 5.6%, 0.229 8.3%, 0.357 11.1%, 0.489 13.9%, 0.615 16.7%, 0.728 19.4%, 0.826 22.2%, 0.907 25.0%, 0.971 27.8%, 1.018 30.6%, 1.051 33.3%, 1.071 36.1%, 1.081 38.9%, 1.083 41.7%, 1.08 44.4%, 1.073 47.2%, 1.063 50.0%, 1.052 52.8%, 1.041 55.6%, 1.031 58.3%, 1.021 61.1%, 1.013 63.9%, 1.007 66.7%, 1.002 69.4%, 0.998 72.2%, 0.995 75.0%, 0.994 77.8%, 0.993 80.6%, 0.993 83.3%, 0.993 86.1%, 0.994 88.9%, 0.995 91.7%, 0.996 94.4%, 0.997 97.2%, 1);
  --ease-breathe: ease-in-out;                  /* the endless loops and blinks that go to and fro: sheens, flame, pulses, sparkles */
  --dur-press: 80ms;         /* press down / up */
  --dur-quick: 180ms;        /* colour and selection changes, toggles, chevrons */
  --dur-leave: 120ms;        /* something making way for what replaces it: a question's old choices */
  --dur-enter: 300ms;        /* entrances, screen transitions, the sheet, map zoom */
  --dur-emphasis: 400ms;     /* bump, shake, wizz, streak bounce, star */
  --dur-fill: 600ms;         /* progress fills and count-ups */
  --dur-celebrate: 900ms;    /* XP float, score count-up, a card's sheen */
  --dur-toast: 2200ms;       /* how long a message stays */
  --dur-reveal: 2000ms;      /* the answer shown after a second wrong answer blinks this long, then the next question (GQ-155) */
  --dur-pulse: 1400ms;       /* loops: target pulse and halo */
  --dur-flicker: 1600ms;     /* the flame, the loading globe */
  --dur-glint: 8s;           /* the calm glint's shared clock: a medal at rest catches the light once a cycle (GQ-490) */
  --dur-sheen: 3000ms;       /* the metal's sheen, on tiles, headers and pages alike */
  --dur-beckon: 2600ms;      /* the daily Play */
  --dur-wizz: var(--dur-emphasis);   /* the gentle shake of a home tile when a hold is recognised */
  --dur-snap: 270ms;
  --dur-glide: 500ms;
  --dur-settle: 565ms;
  --dur-bounce: 850ms;
  --hit-snap: 198ms;         /* a spring's impact frame: its first arrival (a stamp's contact, a medal's landing, the sound and the tap start on it) */
  --hit-settle: 290ms;
  --hit-bounce: 244ms;
  --stamp-lift: 120ms;       /* the stamp lifts and tilts this long before it slams down */
  --legend-catch: 1300ms;    /* the legendary: the crescendo lands and Asia turns gold (the sound's bells ring here) */
  --stagger-tile: 25ms;      /* tiles and pages landing */
  --stagger-item: 120ms;     /* learn tags, answers */
  --card-at: 400ms;          /* Results reward cards: the first one lands... */
  --card-gap: 150ms;         /* ...and each next one this much later (their jingles too) */

  color-scheme: dark;
}

/* Dark variant: deeper sea, dark cards and bars. Actions, meaning and country colours stay.
   Chosen in Settings (data-theme) or, on "Automatic", following the phone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --relief: #a8774a;
    --forest: #357f4b;
    --sea: #08333a;
    --sea-light: #0c414a;
    --sea-deep: #021619;
    --plus-wash: #021619;
    --sea-deeper: #000000;
    --sea-bottom: #072d34;
    --foam: #a8d3d7;
    --card: #225059;
    --card-shadow: #03161a;
    --card-line: #4a8a96;
    --on-card: #f6ecd9;
    --on-card-soft: #b7cbcd;
    --card-track: #0d2c33;
    --hardcore-tile: #45282c;
    --level-flame: var(--coral);
    --flame-gold: var(--flame-won);
    --flame-cold: #8cbcf5;
    --state-progress: #7fbf6a;
    --state-placed: #5b95e3;
    --state-placed-glow: #9cc2f5;
    --state-named: #9a7fe6;
    --state-named-glow: #c3b1f5;
    --count-ink: var(--go-light);
    --review-ink: #ffa898;
    --learn-ink: var(--go-light);
    --bar: #000c0e;
    --bar-shadow: #000;
    --land: #ead9b4;
    --land-stroke: #08333a;
    --land-off: #2c6870;
    --land-dim: #5f8f8c;
    --land-dim-stroke: #2f6b70;
    --highlight-pulse-min: 0.85;
    --stamp-empty: #4f8a93;
    --land-hover: #ffd77a;
    --map-sea: #0b525c;
    --zoom-line: #04252a;       /* a zoom box's frame and leading lines (GQ-357): dark, with a light halo, so they read on the sea, the land and every tint */
    --zoom-line-halo: #fff2d4;
    --map-edge: #2a8691;
    --ribbon-sea: #1fa3ae;
    --tier-bronze-light: #eab47f;
    --tier-bronze-mid: #c9803f;
    --tier-bronze-band: #f8d2a8;
    --tier-bronze-deep: #9a5524;
    --tier-bronze-rim: #6e3a14;
    --tier-bronze-glow: rgb(214 132 66 / 0.55);
    --tier-bronze-ink: #2a1403;
    --tier-bronze-shadow: #3a1f0c;
    --tier-silver-light: #e9eef2;
    --tier-silver-mid: #b6c1cb;
    --tier-silver-band: #f7fafc;
    --tier-silver-deep: #84939f;
    --tier-silver-rim: #5a6772;
    --tier-silver-glow: rgb(200 216 232 / 0.5);
    --tier-silver-ink: #142029;
    --tier-silver-shadow: #2f3a42;
    --legend-band: #fff1a6;
    --legend-rim: #8d6100;
    --legend-glow: rgb(245 183 0 / 0.6);
    --tier-emerald-light: #2f5fcf;
    --tier-emerald-deep: #1f46ab;
    --tier-emerald-ink: #eef3ff;
    --tier-emerald-shadow: #0d2463;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --relief: #a8774a;
  --forest: #357f4b;
  --sea: #08333a;
  --sea-light: #0c414a;
  --sea-deep: #021619;
  --plus-wash: #021619;
  --sea-deeper: #000000;
  --sea-bottom: #072d34;
  --foam: #a8d3d7;
  --card: #225059;
  --card-shadow: #03161a;
  --card-line: #4a8a96;
  --on-card: #f6ecd9;
  --on-card-soft: #b7cbcd;
  --card-track: #0d2c33;
  --hardcore-tile: #45282c;
  --level-flame: var(--coral);
  --flame-gold: var(--flame-won);
  --flame-cold: #8cbcf5;
  --state-progress: #7fbf6a;
  --state-placed: #5b95e3;
  --state-placed-glow: #9cc2f5;
  --state-named: #9a7fe6;
  --state-named-glow: #c3b1f5;
  --count-ink: var(--go-light);
  --review-ink: #ffa898;
  --learn-ink: var(--go-light);
  --bar: #000c0e;
  --bar-shadow: #000;
  --land: #ead9b4;
  --land-stroke: #08333a;
  --stamp-empty: #4f8a93;
  --land-off: #2c6870;
  --land-dim: #5f8f8c;
  --land-dim-stroke: #2f6b70;
  --highlight-pulse-min: 0.85;
  --land-hover: #ffd77a;
  --map-sea: #0b525c;
  --zoom-line: #04252a;       /* a zoom box's frame and leading lines (GQ-357): dark, with a light halo, so they read on the sea, the land and every tint */
  --zoom-line-halo: #fff2d4;
  --map-edge: #2a8691;
  --ribbon-sea: #1fa3ae;
  --tier-bronze-light: #eab47f;
  --tier-bronze-mid: #c9803f;
  --tier-bronze-band: #f8d2a8;
  --tier-bronze-deep: #9a5524;
  --tier-bronze-rim: #6e3a14;
  --tier-bronze-glow: rgb(214 132 66 / 0.55);
  --tier-bronze-ink: #2a1403;
  --tier-bronze-shadow: #3a1f0c;
  --tier-silver-light: #e9eef2;
  --tier-silver-mid: #b6c1cb;
  --tier-silver-band: #f7fafc;
  --tier-silver-deep: #84939f;
  --tier-silver-rim: #5a6772;
  --tier-silver-glow: rgb(200 216 232 / 0.5);
  --tier-silver-ink: #142029;
  --tier-silver-shadow: #2f3a42;
  --legend-band: #fff1a6;
  --legend-rim: #8d6100;
  --legend-glow: rgb(245 183 0 / 0.6);
  --tier-emerald-light: #2f5fcf;
  --tier-emerald-deep: #1f46ab;
  --tier-emerald-ink: #eef3ff;
  --tier-emerald-shadow: #0d2463;
  color-scheme: dark;
}