/* The Daily Atlas: a floating banner and white cards with black lines over a blurred map, navy for accents. */
* { box-sizing: border-box; }

/* Site font: Inter (SIL Open Font License, web/fonts/inter/OFL.txt), one variable file per character set.
   The browser downloads latin-ext only for names that need it (Łódź). */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter/inter-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter/inter-latin-wght-normal.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 {
  --font: "Inter", system-ui, sans-serif;
  --navy: #0b1d3a; /* the backdrop's ocean; also a size question's subject */
  --ink: #000;
  --paper: #fff;
  --muted: #5b6474; /* secondary text: a grey leaning to the navy */
  --wash: #eef2f8; /* a selected row: the navy, faint */
  --red: #d62828;
  /* difficulty 1-5 and the rarity tiers share one scale: green, blue, yellow, red, purple, then gold (legendary),
     tuned to one brightness so they read as a set on the navy (owner's pick, 2026-10-02). The tiers skip yellow
     since super rare went (owner, 2026-10-08): rare took its red */
  --green: #5fd27e;
  --blue: #63a8ff;
  --yellow: #ffd23f;
  --coral: #ff6b57; /* rare (the speed bonus's spark keeps --red) */
  --purple: #b98cff;
  --gold: #f0bd45;
  /* the timer meter (owner's pick, 2026-10-02): its fill, and the speed bonuses' windows in it, inky for the white
     banner; the bonus's mana orb and "+5" take the same colours */
  --meter: #22344f;
  --speed-0: #6d4bc2; /* plum: the speed bonus's window (+5 since 2026-10-06; was +10) */
  --speed-1: #c8492f; /* brick: a second bonus window (none since 2026-10-06) */
  /* the streak's fire (owner's pick, 2026-10-07: "Molten"): deep red at the base through orange to amber */
  --fire-deep: #b3200f;
  --fire-red: #e2361a;
  --fire-orange: #ff7a1a;
  --fire-amber: #ffb21f;
  /* the pin map (js/worldmap.js reads these): a white sea, light grey-blue land, thin black coastlines and borders */
  --map-sea: #fff;
  --map-land: #e9edf3;
  --map-line: var(--ink);
}
[data-tier="common"] { --tier: var(--green); }
[data-tier="uncommon"] { --tier: var(--blue); }
[data-tier="rare"], [data-tier="super_rare"] { --tier: var(--coral); } /* super_rare: a day made before 2026-10-08 */
[data-tier="ultra_rare"] { --tier: var(--purple); }
[data-tier="legendary"] { --tier: var(--gold); }
[data-tier="speed-0"] { --tier: var(--speed-0); } /* the speed bonus's mana: the meter's colours */
[data-tier="speed-1"] { --tier: var(--speed-1); }
body {
  margin: 0;
  background: var(--navy); /* backdrop ocean, shown until the map loads */
  color: var(--ink);
  font: 18px/1.4 var(--font);
  /* the content card sits in the middle of the space below the banner */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--banner-h) + 2 * var(--banner-gap)) 12px 24px;
  --banner-h: 52px;
  --banner-gap: 12px;
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  --line: 1px; /* the black lines of every card, button, field and frame: one width for all (1 px, owner 2026-10-07; was 2) */
  --card-border: var(--line) solid var(--ink); /* cards, banner, popups */
}
main {
  width: 100%;
  max-width: 640px;
  margin: auto; /* centred; a card taller than the screen starts at the top and scrolls */
  padding: 20px 16px;
  background: var(--paper); /* a white card over the map */
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  transition: opacity 150ms, visibility 150ms; /* hidden while a popup is open (below) */
}

/* Floating banner: buttons at the ends, the fact ticker between them */
.banner {
  position: fixed;
  top: var(--banner-gap);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(1040px, 100% - 24px);
  height: var(--banner-h);
  background: var(--paper);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
}
/* Two layers in the same place, cross-fading: the homepage's (buttons and ticker) and, while a question is up
   ([data-mode="playing"]), the game's (progress and category, the timer bar, the time left) */
.banner-home, .banner-game {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  transition: opacity 300ms, visibility 300ms;
}
.banner-game { padding: 0 20px; gap: 20px; white-space: nowrap; }
@media (max-width: 400px) { .banner-game { padding: 0 8px 0 12px; gap: 10px; } } /* more room for the bar */
/* the game's sound button (js/sound.js), a little smaller than the homepage's: the timer bar keeps its room */
.banner-game .sound-button { width: 30px; height: 30px; }
.banner-game, [data-mode="playing"] .banner-home { opacity: 0; visibility: hidden; }
[data-mode="playing"] .banner-game { opacity: 1; visibility: visible; }
/* Pennants hanging from the banner's left end, like medieval banners: the day's difficulty on the homepage
   ([data-mode="home"], when the puzzle has one), the score while a question is up ([data-mode="playing"]) */
.pennant {
  position: absolute;
  top: calc(100% + 2px); /* just under the banner's border, as if hung from it */
  left: 20px;
  min-width: 60px;
  height: 70px;
  padding: 8px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate; /* the pennant shape (z-index -1) stays behind the text */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 300ms, visibility 300ms, transform 300ms;
}
[data-mode="playing"] .score-flag, [data-mode="home"] .difficulty-flag:not([data-level=""]),
[data-mode="home"] .streak-flag[data-streak] {
  opacity: 1; visibility: visible; transform: none; }
.pennant > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.flag-fill { fill: var(--paper); }
.flag-edge { fill: none; stroke: var(--ink); stroke-width: var(--line); stroke-linejoin: miter; vector-effect: non-scaling-stroke; } /* open at the top: it hangs from the banner's border */
.difficulty-flag { height: 82px; } /* room for its two-line label above the notch */
/* the current streak (js/account.js; owner, 2026-10-07): signed in only, on the homepage only, at the banner's right
   end, the difficulty's mirror; the number under the label (no flame, owner 2026-10-07) */
.streak-flag { height: 82px; left: auto; right: 20px; }
/* a streak burns (owner's pick, 2026-10-07: "Molten", the same for every streak): the number filled with fire, the
   colours rolling up through the digits (the gradient repeats every 48px, two lines of the 22px number). 0 stays black. */
.streak-flag:not([data-streak="0"]) .streak-value {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(0deg, var(--fire-deep), var(--fire-red) 20%, var(--fire-orange) 40%, var(--fire-amber) 55%,
    var(--fire-orange) 70%, var(--fire-red) 85%, var(--fire-deep));
  background-size: 100% 48px;
  animation: molten 1.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 110, 20, 0.55));
}
@keyframes molten { to { background-position: 0 -48px; } }
[data-motion="reduced"] .streak-flag .streak-value { animation: none; } /* Reduce animations: the colours stay, nothing moves */
/* the difficulty's colour, as a glow around its pennant: 1 green, 2 blue, 3 yellow, 4 red, 5 purple */
.difficulty-flag[data-level="1"] { --glow: var(--green); }
.difficulty-flag[data-level="2"] { --glow: var(--blue); }
.difficulty-flag[data-level="3"] { --glow: var(--yellow); }
.difficulty-flag[data-level="4"] { --glow: var(--coral); }
.difficulty-flag[data-level="5"] { --glow: var(--purple); }
.difficulty-flag[data-level] svg { filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 9px var(--glow));
  clip-path: inset(0 -24px -24px -24px); } /* glow on the sides and below only, not up over the banner */
.pennant-label { text-align: center; line-height: 1.25; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pennant-value { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.score-points.bump { animation: score-bump 400ms ease-out; }
@keyframes score-bump { 40% { transform: scale(1.35); } }
/* where the card would run under the pennant (narrow screens), push it down while playing */
@media (max-width: 820px) { body[data-mode="playing"] { padding-top: calc(var(--banner-h) + 2 * var(--banner-gap) + 64px); } }
[data-motion="reduced"] .score-points.bump { animation: none; } /* Reduce animations (js/motion.js) */
/* a mana orb has just landed: the score pennant flashes in its tier's colour */
.score-flag.charged svg { animation: charged 900ms ease-out; clip-path: inset(0 -30px -30px -30px); }
@keyframes charged {
  0% { filter: drop-shadow(0 0 4px var(--tier)) drop-shadow(0 0 14px var(--tier)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

/* Mana: a scored answer's points pop out of it as an orb of its tier's colour and fly up to the score pennant
   (game.js launchMana; placed and moved there by transforms) */
.mana, .mana-burst { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 20; border-radius: 50%; }
.mana { /* just a glow: brightest in the middle, fading out, no edge */
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tier), #fff 55%), var(--tier) 22%,
    color-mix(in srgb, var(--tier) 70%, transparent) 42%, color-mix(in srgb, var(--tier) 20%, transparent) 70%, transparent);
}
.mana.trail { background: radial-gradient(closest-side, var(--tier), color-mix(in srgb, var(--tier) 40%, transparent) 40%,
  transparent); }
.mana-burst { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--tier);
  box-shadow: 0 0 12px var(--tier); }
[data-motion="reduced"] .score-flag.charged svg { animation: none; }
/* the timer meter (game.js renderQuestion): a bordered box like the time's, the fill clipped from the right */
.timer-track { position: relative; flex: 1; min-width: 0; height: 14px; border: var(--line) solid var(--ink); background: var(--paper); box-sizing: border-box; }
.timer { position: absolute; inset: 2px; transition: clip-path 100ms linear; }
.timer-edge { position: absolute; top: 0; bottom: 0; left: calc(2px + (100% - 4px) * var(--f, 1)); width: 3px; margin-left: -1.5px;
  background: var(--meter); transition: left 100ms linear;
  box-shadow: 0 0 6px 1px var(--meter); }
/* Reduce animations: the meter steps ten times a second instead of gliding (a repaint per tick, not per frame for the
   whole question), and its edge doesn't glow */
[data-motion="reduced"] .timer, [data-motion="reduced"] .timer-edge { transition: none; }
:root[data-motion="reduced"] .timer-track .timer-edge { box-shadow: none; } /* over the bonus colours' glow below */
.timer-track[data-bonus="0"] .timer-edge { background: var(--speed-0); box-shadow: 0 0 8px 2px var(--speed-0); }
.timer-track[data-bonus="1"] .timer-edge { background: var(--speed-1); box-shadow: 0 0 8px 2px var(--speed-1); }
.timer-track.out .timer-edge { box-shadow: none; } /* answered or out of time: the meter stops */
/* The time left has a box of its own, wide enough for "+5 1:00" (was 5.2em for "+10 10:00", narrowed 2026-10-06
   to make room for the sound button): the bonus and the clock changing never resize the timer bar. Tabular digits
   keep the clock from wobbling. */
.time { flex: none; width: 4.4em; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
button.icon {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
/* The banner's tools (index.html .banner-tools): in the banner on wider screens, the "?" first and the house after it
   (the house on the results only: owner's pick 2026-10-07), the rest after the ticker. On phones they fold into the
   menu (js/menu.js), a list under the banner's right end with each tool's name beside its icon. */
.banner-tools { display: contents; }
.banner-tools > * { order: 1; }
.banner-tools > .how-button { order: -2; }
/* How to play: on the homepage only, not over the results (owner, 2026-10-08); the phones' menu too */
[data-mode="results"] .banner-tools button.how-button { display: none; }
.home-button { order: -1; }
button.home-button, button.menu-button { display: none; align-items: center; justify-content: center; }
[data-mode="results"] button.home-button { display: inline-flex; }
.home-button svg, .menu-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.menu-label { display: none; }
@media (max-width: 600px) {
  button.menu-button { display: inline-flex; order: 2; }
  .banner-tools { display: none; position: absolute; z-index: 2; top: calc(100% + 6px); right: -1px; min-width: 210px;
    flex-direction: column; padding: 6px; background: var(--paper); border: var(--card-border); box-shadow: var(--card-shadow); }
  .banner-tools.open { display: flex; }
  .banner-tools button.icon { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%;
    height: 44px; padding: 0 12px; border: 0; font-size: 16px; text-align: left; }
  .banner-tools button.icon > :first-child { flex: none; width: 20px; text-align: center; font-size: 18px; }
  .banner-tools .menu-label { display: inline; }
}
/* a touch leaves the tapped row :hover, black, with the menu still open (Sound keeps it open): only the keyboard's
   focus shows there */
@media (max-width: 600px) and (hover: none) {
  .banner-tools button.icon:hover:not(:focus-visible) { background: var(--paper); color: var(--ink); }
}
.ticker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  /* facts fade in and out at the ends instead of being cut off */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker var(--duration, 60s) linear infinite; }
/* hold still to read one: on hover or keyboard focus, and while a question is up (the ticker is hidden then) */
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, [data-mode="playing"] .ticker-track { animation-play-state: paused; }
.ticker:focus-visible { outline: var(--line) solid var(--ink); outline-offset: -2px; } /* inside the edge fades' mask */
.ticker-copy { display: flex; }
.fact::after { content: "\2022"; margin: 0 24px; color: var(--navy); } /* a dot between facts */
@keyframes ticker { to { transform: translateX(-50%); } }
/* Reduce animations: no scrolling, the first (random) fact, cut off with an ellipsis if it is long */
[data-motion="reduced"] .ticker { -webkit-mask-image: none; mask-image: none; }
[data-motion="reduced"] .ticker-track { animation: none; width: auto; }
[data-motion="reduced"] .ticker-copy:first-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-motion="reduced"] .ticker-copy:first-child .fact:not(:first-child),
[data-motion="reduced"] .ticker-copy + .ticker-copy, [data-motion="reduced"] .fact::after { display: none; }

/* Homepage backdrop: an invented world map (geogame build-backdrop), blurred. The blurred layer overhangs the
   viewport so its soft edges are off screen; 100lvh keeps it still when mobile browser bars show or hide. */
.backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100lvh; overflow: hidden; z-index: -1; --blur: 12px; }
.backdrop::before {
  content: "";
  position: absolute;
  inset: calc(-3 * var(--blur));
  background: url(img/backdrop.svg) center / cover;
  filter: blur(var(--blur));
}
/* Popups opened from the banner (js/popups.js) */
.popup {
  width: min(400px, 100% - 24px);
  max-width: none;
  padding: 0; /* on .popup-box instead: a click on the <dialog> itself is then always outside the box */
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  font: inherit;
}
.popup-box { padding: 16px 20px 20px; }
.popup::backdrop { background: rgba(0, 0, 0, 0.3); }
/* while a popup is open, the content card hides: only the banner, the popup and the map show */
body:has(.popup[open]) main { opacity: 0; visibility: hidden; }
.popup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.popup h2 { font-size: 22px; margin: 0; }
/* How to play (index.html #how, js/help.js; owner's pick 2026-10-08: mockup 1): one short scroll in the order of
   a game; the example and the ladder look like the game's own question card and results strips */
.how .popup-box:focus { outline: none; } /* focused on opening (rather than the close button), never shown */
/* taller than most screens: it scrolls, without a scrollbar (owner, 2026-10-08) */
.popup.how { scrollbar-width: none; }
.popup.how::-webkit-scrollbar { display: none; }
.how p { margin: 8px 0; font-size: 16px; line-height: 1.45; }
.how h3 { margin: 18px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.how-note { color: var(--muted); font-size: 14px !important; }
.how-example { display: grid; justify-items: start; gap: 6px; padding: 10px 12px; border: var(--card-border); font-size: 15px; }
.how-field { justify-self: stretch; border-bottom: var(--line) solid var(--ink); padding-bottom: 2px; }
.how-ok { font-size: 14px; }
.how-lock { border: var(--card-border); padding: 2px 12px; font-size: 14px; }
.how-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.how-ladder li { display: flex; align-items: center; gap: 10px; padding: 5px 12px; background: var(--navy); color: var(--tier);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.how-ladder .tier-icon { width: 15px; height: 15px; }
.how-meter { height: 12px; margin: 8px 0 2px; border: var(--card-border); }
.how-meter span { display: block; width: 50%; height: 100%; background: color-mix(in srgb, var(--speed-0) 30%, var(--paper)); }
button.how-go { display: block; width: 100%; }
/* a setting: a checkbox and its label, a "?" after it that explains it (js/motion.js) */
.setting { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 600; }
.setting label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.setting input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
/* the tick boxes in the game's lines: square corners, navy with a white tick when on (owner, 2026-10-08) */
.setting input[type="checkbox"] { appearance: none; flex: none; display: grid; place-items: center; border: var(--card-border);
  border-radius: 0; background: var(--paper); cursor: pointer; }
.setting input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid var(--paper);
  border-width: 0 0 2px 2px; rotate: -45deg; visibility: hidden; }
.setting input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); }
.setting input[type="checkbox"]:checked::after { visibility: visible; }
.setting input[type="checkbox"]:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.setting input[type="checkbox"]:disabled { background: var(--wash); border-color: var(--muted); cursor: not-allowed; }
/* Use my phone's keyboard without a touch screen (prefs.js adds .off): greyed out; hovering the row says why */
.setting-phone-keys { position: relative; }
.setting-phone-keys.off label { color: var(--muted); cursor: not-allowed; }
.setting-phone-keys.off .tip { display: none; }
.setting-off-tip { display: none; }
.setting-phone-keys.off .setting-off-tip { display: block; top: calc(100% - 4px); left: 0; translate: none; max-width: none; }
.setting-phone-keys.off:hover .setting-off-tip { opacity: 1; visibility: visible; }
.setting-phone-keys.off .setting-off-tip::before { left: 24px; }
/* which unit leads ("211 km (131 mi)"): two radios drawn as one switch, the chosen half navy */
fieldset.setting-units { margin: 0; border: 0; padding: 12px 0; min-width: 0; gap: 14px; }
.setting-units legend { float: left; padding: 0; }
.units-switch { display: inline-flex; border: var(--card-border); }
.units-switch label { position: relative; gap: 0; }
.units-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.units-switch span { padding: 3px 14px; font-weight: 600; }
.units-switch label + label span { border-left: var(--card-border); }
.units-switch input:checked + span { background: var(--navy); color: var(--paper); }
.units-switch input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
/* the other pages: buttons like the account's "Email me a code", FAQ and Privacy side by side, the credits below */
.setting-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.setting-pages .button { display: block; padding: 6px 12px; border: var(--card-border); background: var(--paper); color: var(--ink);
  text-align: center; text-decoration: none; }
.setting-pages .button:hover, .setting-pages .button:focus-visible { background: var(--ink); color: var(--paper); }
.setting-pages .wide { grid-column: 1 / -1; }
/* the "?" and its tooltip (owner, 2026-10-07): shown on hover, on keyboard focus and on a tap (a tap focuses it), in
   the card look; under the mark, since a modal dialog would clip it above the first row */
.tip { position: relative; display: inline-flex; }
button.tip-mark { width: 20px; height: 20px; min-width: 0; margin: 0; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 800;
  line-height: 1; display: inline-grid; place-items: center; background: var(--paper); color: var(--ink); cursor: help; }
.tip:hover .tip-mark, .tip-mark:focus-visible { background: var(--navy); color: var(--paper); }
.tip-text { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 1; width: max-content;
  max-width: 220px; padding: 8px 12px; background: var(--paper); border: var(--card-border); box-shadow: var(--card-shadow);
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); text-align: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.12s, visibility 0.12s; }
/* the little point up to the "?": a square turned 45 degrees, its two lower edges hidden under the box */
.tip-text::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; translate: -50% 0;
  rotate: 45deg; background: var(--paper); border: solid var(--ink); border-width: var(--line) 0 0 var(--line); }
.tip:hover .tip-text, .tip:focus-within .tip-text { opacity: 1; visibility: visible; }
[data-motion="reduced"] .tip-text { transition: none; }

/* The account button (js/account.js): a figure (the streak moved to its own pennant, owner 2026-10-07) */
button.account-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.account-button svg { width: 20px; height: 20px; flex: none; }
.account-button .person { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* The sound button (js/sound.js): a speaker with sound waves while pressed (sound on), a cross while not */
button.sound-button { display: inline-flex; align-items: center; justify-content: center; }
button.sound-button[hidden] { display: none; }
.sound-button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.sound-button[aria-pressed="false"] .waves, .sound-button[aria-pressed="true"] .mute { display: none; }
/* Your Journey (js/book.js; owner's pick 2026-10-07: mockup 3, "sticker album"). The closed book: a white hardback in
   the game's lines, halfway down the right edge on wide screens, in the bottom-right corner on narrower ones; only on
   the homepage and the results, never during a question (flags beside names would answer the flag questions). */
button.book-button { display: none; position: fixed; z-index: 9; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 68px; margin: 0; padding: 0; border: 0; background: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  transition: translate 150ms; }
@media (min-width: 1200px) { button.book-button { right: 24px; bottom: auto; top: 50%; width: 72px; height: 88px; margin-top: -44px; } }
[data-mode="home"] .book-button, [data-mode="results"] .book-button { display: block; }
/* the results narrower than that: it would sit over the answers, and the line under the score opens the book */
@media (max-width: 1199px) { [data-mode="results"] .book-button { display: none; } }
body:has(.popup[open]) .book-button { visibility: hidden; }
button.book-button:hover, button.book-button:focus-visible { background: none; color: inherit; translate: 0 -2px; }
button.book-button:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
[data-motion="reduced"] .book-button { transition: none; }
.book-button svg { width: 100%; height: 100%; overflow: visible; }
.bk-pages, .bk-cover { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.bk-spine, .bk-land { fill: var(--navy); }
.bk-line { fill: none; stroke: var(--ink); stroke-width: 1; }
.bk-thin { fill: none; stroke: var(--ink); stroke-width: 0.5; opacity: 0.55; }
.bk-t { font: 800 6.4px var(--font); letter-spacing: 0.14em; text-anchor: middle; fill: var(--ink); }
/* how much of the book is filled in, over the globe (owner, 2026-10-08): centred between the cover's top and the globe */
.bk-pct { font: 800 10px var(--font); text-anchor: middle; dominant-baseline: central; fill: var(--navy); font-variant-numeric: tabular-nums; }
/* the homepage of a wide screen (js/book.js place; owner, 2026-10-07): beside the logo, up by "ATLAS" (240 px: the
   logo's .wordmark is 560 wide, its letters end short of that), floating up and down (a glow behind it: removed for
   now, owner 2026-10-07). Reduce animations: still. */
button.book-button.by-logo { position: absolute; z-index: 1; left: calc(50% + 240px); top: 0; right: auto;
  bottom: auto; width: 104px; height: 128px; margin: 0; animation: book-float 3.4s ease-in-out infinite;
  will-change: transform; } /* its own GPU layer: the slow float glides between pixels instead of stepping through them */
@keyframes book-float { 50% { transform: translateY(-8px); } }
[data-motion="reduced"] .book-button.by-logo { animation: none; }
/* places first named since the book was last opened */
.book-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; display: grid;
  place-items: center; background: var(--navy); color: var(--paper); border: 2px solid var(--paper); border-radius: 11px;
  font-size: 12px; font-weight: 800; line-height: 1; }

/* The open book: pages of flag tiles in a strip that scrolls a spread at a time (one page on a phone) */
.popup.book { width: min(980px, 100% - 24px); }
.book-head { gap: 16px; padding-bottom: 10px; border-bottom: var(--line) solid var(--ink); margin-bottom: 12px; }
.book-title { flex: 1; min-width: 0; }
.book-meter { height: 8px; max-width: 260px; margin-top: 6px; padding: 1px; border: var(--line) solid var(--ink); }
.book-meter span { display: block; height: 100%; background: var(--navy); }
.book-count { margin: 0; font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.book-count b { font-size: 18px; color: var(--ink); }
.book-signin { margin: 0 0 12px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.book-signin[hidden] { display: none; } /* signed in: its display: flex would otherwise win over [hidden] */
.book-signin button { margin: 0; padding: 4px 14px; }
.book-pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border: var(--line) solid var(--ink); border-top: 3px solid var(--navy); }
.book-pages::-webkit-scrollbar { display: none; }
.book-page { flex: 0 0 100%; min-width: 0; padding: 8px 10px 4px; scroll-snap-align: start; } /* a phone: a page at a time */
@media (min-width: 761px) { /* spreads (book.js: phone = max-width 760px) */
  .book-page { flex-basis: 50%; padding: 10px 16px 6px; }
  .book-page:nth-child(even) { scroll-snap-align: none; }
  /* the gutter between a spread's two pages: a line, shaded either side like a fold */
  .book-page:nth-child(even) { border-left: var(--line) solid var(--ink);
    background: linear-gradient(90deg, rgba(11, 29, 58, 0.1), transparent 22px); }
  .book-page:nth-child(odd) { background: linear-gradient(270deg, rgba(11, 29, 58, 0.1), transparent 22px); }
  }
.book-running, .book-folio { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); }
.book-running { margin-bottom: 6px; }
.book-folio { margin-top: 4px; }
.book-page:nth-child(even) .book-folio { text-align: right; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tile { position: relative; height: clamp(46px, calc((100dvh - 340px) / 6), 76px); /* short screens: smaller, nav in view */ padding: 4px; display: grid; justify-items: center; align-content: center; gap: 5px;
  border: var(--line) solid var(--wash); text-align: center; font-size: 11.5px; font-weight: 600; line-height: 1.15; }
.tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-letter { position: absolute; top: 2px; left: 5px; font-size: 12px; font-weight: 800; color: var(--navy); }
.tile.locked { border-style: dashed; border-color: var(--muted); }
.tile.locked .tile-name { color: var(--muted); letter-spacing: 0.2em; font-weight: 700; }
/* a flag: its cell of web/img/flags.webp (16 cells a row: flagsprite.py COLS, book.js SPRITE_COLS), shown at 40 x 30,
   stuck in at a slant */
.book-flag { display: inline-block; flex: none; background: url(img/flags.webp) no-repeat;
  background-size: calc(16 * 40px) auto; background-position: calc(var(--col) * -40px) calc(var(--row) * -30px); }
.tile .book-flag { width: 40px; height: 30px; rotate: -1.5deg; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.tile:nth-child(even) .book-flag { rotate: 1.5deg; }
.tile.locked .book-flag { background: repeating-linear-gradient(135deg, var(--wash) 0 3px, var(--paper) 3px 6px); rotate: none; box-shadow: none; }
/* a found sticker opens its card (book.js openCard): the whole tile is the button */
.tile-open { position: absolute; inset: -1px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.tile-open:hover, .tile-open:focus-visible { background: none; outline: 2px solid var(--navy); outline-offset: -1px; }
.tile.open { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
/* the card (owner's pick 2026-10-08: mockup 2, "a note by the sticker"): beside the sticker, its point level with it */
.popup.book .popup-box { position: relative; }
.place-card { position: absolute; z-index: 3; width: 300px; padding: 14px 16px 16px; background: var(--paper);
  border: var(--card-border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); outline: none; }
.place-card::before { content: ""; position: absolute; top: calc(var(--arrow, 30px) - 6px); left: -6px; width: 10px; height: 10px;
  background: var(--paper); border: solid var(--ink); border-width: 0 0 var(--line) var(--line); rotate: 45deg; }
.place-card.on-left::before { left: auto; right: -6px; border-width: var(--line) var(--line) 0 0; }
.card-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; min-width: 0; margin: 0; padding: 0; font-size: 18px; line-height: 1; }
.card-head { display: flex; gap: 12px; align-items: center; margin: 0 30px 10px 0; }
.place-card .card-flag { width: 56px; height: 42px; background-size: calc(16 * 56px) auto;
  background-position: calc(var(--col) * -56px) calc(var(--row) * -42px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.card-head h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.card-found { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.card-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; }
.card-facts dt { color: var(--muted); }
.card-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.card-facts small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.card-wait { margin: 0; color: var(--muted); }
/* a phone: along the bottom of the screen, the book above it */
@media (max-width: 760px) {
  .place-card { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto; }
  .place-card::before { display: none; }
}
.book-new { position: absolute; top: 3px; right: 3px; padding: 1px 4px; background: var(--navy); color: var(--paper);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.book-nav { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.book-nav > button { flex: none; margin: 0; width: 40px; height: 32px; padding: 0; }
.book-nav > button:disabled { opacity: 0.35; cursor: default; background: var(--paper); color: var(--ink); }
.book-tabs { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
button.book-tab { margin: 0; min-width: 30px; padding: 3px 7px; font-size: 12px; font-weight: 800; }
.book-tab[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.book-error { padding: 24px; }
.book.failed :is(.book-nav, .book-count, .book-meter, .book-signin) { visibility: hidden; } /* nothing to page through */
.book-error button { margin: 0 0 0 4px; padding: 2px 12px; }
@media (max-width: 760px) {
  .popup.book .popup-box { padding: 12px 12px 14px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { height: clamp(56px, calc((100dvh - 380px) / 4), 72px); }
}
/* the results' new places (js/book.js resultsLine), between the score and the countdown, set like them: the label
   on top, the flags under it, centred; the whole of it opens the book. None new: hidden. */
/* wide: at the header's own centre (not between the two), its label level with theirs; narrower: a row of its own */
.book-line { order: 3; flex-basis: 100%; display: flex; margin: 0; }
@media (min-width: 900px) {
  .results-head { position: relative; }
  .book-line { position: absolute; top: 0; left: 50%; translate: -50% 0; }
}
.book-line:empty { display: none; }
button.book-line-button { margin: 0; padding: 0; border: 0; background: none; display: grid; justify-items: center; gap: 10px;
  color: var(--ink); }
button.book-line-button:hover, button.book-line-button:focus-visible { background: none; color: var(--ink); }
button.book-line-button:hover .label { color: var(--ink); }
button.book-line-button:focus-visible { outline: var(--line) solid var(--ink); outline-offset: 6px; }
.book-line-button .label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.book-line-flags { display: flex; gap: 8px; }
.book-line-flags .book-flag { width: 40px; height: 30px; box-shadow: 0 0 0 1px var(--wash); }
@media (max-width: 899px) { button.book-line-button { justify-items: start; } }

/* The Account popup (js/account.js) */
.account p { margin: 8px 0; }
.account-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; overflow-wrap: anywhere; }
.tier-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--wash);
  color: var(--navy); padding: 2px 8px; }
.account-streak { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--wash);
  border-bottom: 1px solid var(--wash); padding: 10px 0; margin: 8px 0; }
.account-streak b { font-size: 40px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.account-streak small { display: block; color: var(--muted); font-size: 14px; }
.account-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 15px; }
.account-stats dt { color: var(--muted); }
.account-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.account input { width: 100%; border: 0; border-bottom: var(--line) solid var(--ink); font: inherit; font-size: 18px;
  padding: 4px 0; outline: none; background: transparent; }
.account input:focus-visible { border-bottom-color: var(--navy); }
.account button { margin-right: 8px; }
.account button.account-wide { display: block; width: 100%; margin-right: 0; } /* owner, 2026-10-08 */
.account button.link { border: 0; padding: 6px 0; text-decoration: underline; background: none; color: var(--muted); }
.account button.link:hover, .account button.link:focus-visible { color: var(--ink); }
.account-message:empty { display: none; }
.account-check:has(iframe) { margin-top: 12px; } /* Turnstile, when Cloudflare asks for a click (js/api.js botCheck) */
/* the pitch's tooltip (a .tip) sits above the whole card, pointing down at it (owner, 2026-10-08): placed from the
   dialog, which shows it outside its box while the short signed-out panel is up (a modal dialog clips, and scrolls
   a panel taller than the screen, the signed-in one on a phone on its side) */
#account-popup:has(.account-pitch) { overflow: visible; }
.account-pitch { position: static; display: block; outline-offset: 4px; }
.account-pitch .tip-text { top: auto; bottom: calc(100% + 10px); max-width: none; }
.account-pitch .tip-text::before { top: auto; bottom: -5px; border-width: 0 var(--line) var(--line) 0; }
.account-message { color: var(--red); }

h1 { font-size: 28px; margin: 0 0 8px; }
.wordmark { margin: 0 auto; max-width: 560px; }
.wordmark img { width: 100%; height: auto; display: block; aspect-ratio: 380 / 204; } /* keeps its place while loading */

/* The homepage: no card, just the logo and the start button on the map */
main.bare { position: relative; max-width: 820px; background: none; border: 0; box-shadow: none; text-align: center; }
.start { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }
.start button {
  margin: 0;
  padding: 10px 40px;
  font-size: 22px;
  font-weight: 600;
  animation: bob 2.6s ease-in-out infinite; /* a slow float; colours on hover are unchanged */
}
@keyframes bob { 50% { transform: translateY(-4px); } }
/* The day played (game.js renderPlayed; owner's pick 2026-10-07: mockup 3): a clock in Begin's frame, counting down
   to the next atlas (not a button: nothing to press until it reaches zero), and Results filled black beside it */
.start .countdown { margin: 0; padding: 10px 28px; font-size: 22px; font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; background: var(--paper); border: var(--line) solid var(--ink); }
.start .results-button { background: var(--ink); color: var(--paper); }
.start .results-button:hover, .start .results-button:focus-visible { background: var(--paper); color: var(--ink); }
.start:has(.countdown) { align-items: stretch; animation: bob 2.6s ease-in-out infinite; } /* the pair floats as one */
.start:has(.countdown) button { animation: none; }
@media (max-width: 600px) { .start .countdown { padding: 10px 20px; } .start:has(.countdown) button { padding: 10px 28px; } }
/* admins' Regenerate in the banner (game.js addRegenerate): the arrow turns while the new questions are made. Only
   the arrow: its name is for the phones' menu (a rule on every span showed it on wide screens too, turning). The
   arrow is a block at all times, so it doesn't move when the turning starts. */
.regenerate > span[aria-hidden] { display: inline-block; line-height: 1; }
.regenerate.busy > span[aria-hidden] { animation: regenerating 1s linear infinite; }
@keyframes regenerating { to { transform: rotate(1turn); } }
[data-motion="reduced"] .regenerate.busy > span[aria-hidden] { animation: none; }
[data-motion="reduced"] :is(.start, .start button) { animation: none; }

.speed { font-weight: bold; display: inline-block; }
.speed[data-bonus="0"] { color: var(--speed-0); }
.speed[data-bonus="1"] { color: var(--speed-1); }
.question { font-size: 24px; margin: 0 0 20px; }

input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: var(--line) solid var(--ink);
  font: inherit;
  font-size: 24px;
  padding: 4px 0;
  outline: none;
  background: transparent;
}
.message { min-height: 1.4em; margin-top: 12px; }
.hint { font-size: 14px; margin-top: 4px; }
.legend { display: flex; justify-content: space-between; gap: 12px; }
.note { display: block; font-size: 14px; font-weight: normal; margin-top: 6px; }

input[type="range"] {
  width: 100%;
  appearance: none;
  background: transparent;
  margin: 12px 0 8px;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--ink); border-radius: 50%;
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--ink); border: 0; border-radius: 50%; }
input[type="range"]:focus-visible { outline: none; } /* it is focused from the start: arrow keys move it, no box needed */
.value { font-size: 20px; text-align: center; min-height: 2.8em; margin-top: 8px; } /* room for 2 lines: nothing below jumps */

button {
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: 6px 18px;
  margin-top: 16px;
  cursor: pointer;
}
button:hover, button:focus-visible { background: var(--ink); color: var(--paper); }

/* The game's own keyboard on touch screens (js/keys.js; owner's pick 2026-10-07: mockup 3, "navy board"): white
   keycaps on navy along the bottom, pressing down, the letter popping up over the thumb, Enter in gold. Up during a
   list question only; the card then sits right on top of it. */
.keys { position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; display: grid; gap: 7px;
  padding: 9px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy); border-top: var(--card-border);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transform: translateY(105%); visibility: hidden; transition: transform 200ms ease-out, visibility 200ms; }
body.keys-up[data-mode="playing"] .keys { transform: none; visibility: visible; }
body.keys-up[data-mode="playing"] { padding-bottom: calc(var(--keys-h, 210px) + 8px); }
body.keys-up[data-mode="playing"] main { margin-bottom: 0; } /* down onto the keys */
.keys-row { display: flex; gap: 5px; justify-content: center; width: 100%; max-width: 560px; margin: 0 auto; }
.keys button.key { position: relative; flex: 1 1 0; max-width: 52px; height: 42px; margin: 0; padding: 0; border: 0;
  display: grid; place-items: center; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--ink);
  font-size: 18px; font-weight: 600; }
.keys button.key:hover { background: var(--paper); color: var(--ink); } /* a touch leaves :hover behind */
.keys .key.wide { flex: 1.6 1 0; max-width: 80px; }
.keys .key.space { flex: 5 1 0; max-width: 280px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.keys button.key.enter, .keys button.key.enter:hover { flex: 2 1 0; max-width: 120px; font-size: 15px; font-weight: 700;
  background: var(--gold); }
.keys .key.down { transform: translateY(2px); box-shadow: none; }
.keys .key:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* the letter pressed, popping up over the thumb */
.keys .key.down:not(.wide, .space, .enter)::after { content: attr(data-key); position: absolute; bottom: calc(100% + 6px);
  left: 50%; translate: -50% 0; width: 42px; height: 50px; display: grid; place-items: center; background: var(--paper);
  border: var(--card-border); font-size: 26px; pointer-events: none; }
@media (max-height: 680px) { .keys { gap: 5px; padding-top: 7px; } .keys button.key { height: 37px; } } /* a small phone */
@media (max-height: 500px) { .keys { gap: 4px; padding-top: 5px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } .keys button.key { height: 30px; } } /* a phone on its side */
[data-motion="reduced"] .keys { transition: none; }
/* with the keys up, the card keeps to the room above them: a little tighter, no "press Enter" hint (Enter is right
   there, gold) and no Lock in button (the keys' Enter says Lock in once there's an answer) */
body.keys-up[data-mode="playing"] main { padding: 14px 16px 12px; }
body.keys-up[data-mode="playing"] .question { font-size: 20px; line-height: 1.3; margin-bottom: 12px; }
body.keys-up[data-mode="playing"] :is(.hint, .lock-in) { display: none; }
body.keys-up[data-mode="playing"] .message { margin-top: 8px; font-size: 16px; }
/* the smallest phones (320 px wide, or 340 px tall on their side): the question a size smaller again */
@media (max-width: 360px), (max-height: 340px) {
  body.keys-up[data-mode="playing"] .question { font-size: 17px; }
  body.keys-up[data-mode="playing"] .message { font-size: 14px; }
}
/* a phone on its side: little height, so the card goes up to the banner (not below the score pennant, as on narrow
   screens: style.css "push it down while playing") and moves right of the pennant instead, and everything tightens */
@media (max-height: 500px) {
  body.keys-up[data-mode="playing"] { padding-top: calc(var(--banner-h) + 2 * var(--banner-gap)); }
  body.keys-up[data-mode="playing"] main { width: auto; margin-left: max(96px, calc((100% - 640px) / 2));
    margin-right: max(0px, calc((100% - 640px) / 2)); padding-block: 10px 8px; }
  body.keys-up[data-mode="playing"] .question { font-size: 17px; margin-bottom: 4px; }
  body.keys-up[data-mode="playing"] input[type="text"] { font-size: 20px; padding: 2px 0; }
  body.keys-up[data-mode="playing"] .message { margin-top: 4px; font-size: 15px; }
}
@media (max-height: 340px) { body.keys-up[data-mode="playing"] :is(.question, .message) { font-size: 14px; } }

/* The question boards (distance and size, game.js) */
svg.board { width: 100%; display: block; margin-top: 16px; }
svg .shape { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; stroke-width: 1.5; }
/* a size question's subject: shape and name in the same navy (the backdrop ocean), so they read as one */
svg .shape.subject { fill: var(--navy); stroke: var(--navy); }
mark.subject { background: var(--navy); color: var(--paper); padding: 0 0.25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
svg .ghost { fill: none; stroke: var(--ink); stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
svg .ghost-halo { fill: none; stroke: var(--paper); stroke-width: 3px; vector-effect: non-scaling-stroke; }
svg .link { stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
svg .ground { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }


/* The results screen (game.js renderSummary): the score, then questions on the left and the chosen one's answers on
   the right (stacked on narrow screens). Tiers show as navy tags in their colour, with their reveal shape: the
   colours were tuned for the navy, and it ties the list to the reveal. */
main.wide { max-width: 1040px; }
.results-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: var(--line) solid var(--ink); }
.results-head p { margin: 0; }
.score .label, .tier-head, .slider-result dt {
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.score .label { display: block; font-size: 12px; color: var(--muted); }
.score-total { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-max { font-size: 24px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* the percentage after the ratio, set the same way, a bar between them (a card's black line) */
.score-pct { margin-left: 20px; padding-left: 20px; border-left: var(--line) solid var(--ink); }
@media (max-width: 420px) { .score-total { font-size: 44px; } } /* "565 / 565 | 100%" on one line on a phone */
.next-puzzle { font-size: 15px; color: var(--muted); }
.next-puzzle.score { margin-left: auto; text-align: right; color: var(--ink); } /* the countdown, opposite the score */
@media (max-width: 600px) { .next-puzzle.score { margin-left: 0; text-align: left; } } /* under the score */

.results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
@media (max-width: 760px) { .results { grid-template-columns: 1fr; } }
/* the questions as a map's key (owner's pick, 2026-10-02): a bordered list, each entry led by its number; the
   selected entry turns navy, as a highlighted feature would */
.key { border: var(--line) solid var(--ink); }
.summary { list-style: none; margin: 0; padding: 4px 0; }
.question-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  width: 100%; text-align: left; margin: 0; padding: 9px 12px; border: 0; background: none; color: var(--ink); }
.question-item:hover { background: var(--wash); color: var(--ink); }
.question-item:focus-visible { outline: var(--line) solid var(--ink); outline-offset: -4px; }
.question-item.selected { background: var(--navy); color: var(--paper); } /* only colours change: nothing moves */
.question-item.selected:focus-visible { outline-color: var(--paper); }
.key-n { grid-row: 1 / 3; font-size: 17px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.question-item.selected .key-n { color: var(--paper); }
.key-answer { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.key-question { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.question-item.selected .key-question { color: #b9c3d4; }
.key-points { grid-row: 1 / 3; grid-column: 3; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.key-points small { display: block; font-size: 12px; color: var(--tier); }
.question-item.selected .key-points small { color: color-mix(in srgb, var(--tier), #fff 40%); }

.tier-icon { width: 1.1em; height: 1.1em; flex: none; overflow: visible; }
.tier-icon * { fill: color-mix(in srgb, var(--tier) 35%, transparent); stroke: var(--tier); stroke-width: 1.6;
  stroke-linejoin: round; filter: drop-shadow(0 0 2px var(--tier)); }

.answers { border: var(--line) solid var(--ink); padding: 0 16px 16px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; } /* it still scrolls (wheel, touch, keys); the sticky tier strips show where you are */
.answers::-webkit-scrollbar { display: none; }
.answers h2 { font-size: 18px; margin: 0; padding-top: 16px; text-wrap: balance; overflow-wrap: anywhere; }
.answers li { overflow-wrap: anywhere; }
.answers > .hint { color: var(--muted); margin: 4px 0 12px; }
/* each tier's heading: a navy strip, kept in view while its list scrolls by */
.tier-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 16px -16px 6px;
  padding: 7px 16px; background: var(--navy); color: var(--tier); font-size: 13px; }
.tier-head .tier-icon { width: 15px; height: 15px; }
.tier-name { text-shadow: 0 0 8px color-mix(in srgb, var(--tier) 70%, transparent); }
.tier-points { margin-left: auto; color: rgba(255, 255, 255, 0.65); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.answers ul { list-style: none; margin: 0; padding: 0; }
.answers li { padding: 3px 0; font-size: 16px; }
.answers li .detail { color: var(--muted); }
.answers li.mine { font-weight: 700; }
.mine-tag { margin-left: 8px; padding: 0 5px; border: var(--line) solid var(--ink); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; vertical-align: 2px; }
.results-figure { margin-top: 12px; }
.results-figure svg.board { margin-top: 0; }
.slider-result { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: baseline; margin: 16px 0 0; }
.slider-result dt { font-size: 12px; color: var(--muted); }
.slider-result dd { margin: 0; font-size: 18px; }
@media (max-width: 760px) {
  .answers { max-height: none; overflow: visible; scroll-margin-top: calc(var(--banner-h) + 2 * var(--banner-gap)); }
  .tier-head { top: calc(var(--banner-h) + var(--banner-gap)); }
}

main.thrown { position: relative; z-index: 6; } /* the card being thrown off flies over the reveal's veil */
/* The reveal (game.js playReveal): the card has been thrown off; the result stands alone on a dark veil, under the
   banner (the score pennant stays in view for the mana). --tier is the answer's tier colour. */
.stage {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: calc(var(--banner-h) + 2 * var(--banner-gap) + 24px) 16px 24px;
  overflow-y: auto;
  overflow-x: hidden; /* the answer flies in from the side: no scrollbar while it does (owner, 2026-10-08) */
  background: rgba(6, 16, 34, 0.88); /* the navy, deepened */
  color: var(--paper);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 250ms, visibility 250ms;
}
.stage.open { opacity: 1; visibility: visible; }
.stage-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(900px, 100%); }
.stage-points { text-wrap: balance; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #9aa6b8; font-variant-numeric: tabular-nums; }
.stage-points span { display: inline-block; }
.stage-bonus { color: #a990cf; } /* the spark's purple, quietened */
.stage-quip { font-weight: 500; letter-spacing: 0; } /* quips.js: after the points, quieter than them */
/* the answer: spaced capitals like a country's name on a map, white, glowing in the tier colour */
.stage-answer {
  font-size: clamp(30px, 6.4vw, 68px); font-weight: 600; line-height: 1.15; letter-spacing: 0.2em; margin-right: -0.2em;
  text-transform: uppercase; text-wrap: balance;
  color: var(--paper);
  text-shadow: 0 0 0.35em color-mix(in srgb, var(--tier) 90%, transparent), 0 0 0.9em color-mix(in srgb, var(--tier) 60%, transparent);
}
.stage-of { display: block; font-size: 0.32em; letter-spacing: 0.3em; margin-top: 0.3em; } /* a capital's country */
.stage[data-tier="none"] .stage-answer { color: #9aa6b8; text-shadow: none; }
/* the tier, between two short rules */
.stage-tier { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 800; letter-spacing: 0.3em; margin-right: -0.3em;
  text-transform: uppercase; color: color-mix(in srgb, var(--tier), #fff 30%); }
.stage-tier::before, .stage-tier::after { content: ""; width: 48px; height: 2px; background: currentColor; }
.stage-detail { font-size: 16px; color: #c3cad6; max-width: 620px; }
.stage-figure { background: var(--paper); color: var(--ink); border: var(--card-border); padding: 4px 12px 8px;
  width: min(560px, 100%); margin-top: 10px; }
.stage-figure svg.board { margin-top: 4px; }
.stage-next { margin-top: 18px; }
/* short screens (a phone on its side): a smaller headline, and a pin map that leaves room for Next */
@media (max-height: 500px) {
  .stage { padding-top: calc(var(--banner-h) + 2 * var(--banner-gap) + 8px); padding-bottom: 12px; }
  .stage-answer { font-size: clamp(26px, 9vh, 44px); }
  .stage-next { margin-top: 10px; }
}
/* effects behind the text, centred on the answer (--x, --y) */
.stage-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.stage-fx > * { position: absolute; left: var(--x, 50%); top: var(--y, 50%); opacity: 0; }
.stage-glow { width: 460px; height: 460px; margin: -230px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tier) 50%, transparent),
    color-mix(in srgb, var(--tier) 14%, transparent) 55%, transparent); }
.stage-fx > .stage-flash { left: 0; top: 0; width: 100%; height: 100%; background: #fff; }
/* the tier's outlines around the answer (game.js DRAMA shape, frames) */
.stage-frames { width: min(1100px, 100vw); aspect-ratio: 1; margin: max(-550px, -50vw) 0 0 max(-550px, -50vw); overflow: visible; opacity: 1; }
.stage-frames *, .stage-ring * { fill: none; stroke: var(--tier); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.stage-ring { width: 160px; height: 160px; margin: -80px; overflow: visible; filter: drop-shadow(0 0 6px var(--tier)); }
/* sparks and twinkles: the tier's shape, filled, glowing */
.stage-spark, .stage-mote { width: 22px; height: 22px; margin: -11px; overflow: visible; filter: drop-shadow(0 0 4px var(--tier)); }
.stage-spark *, .stage-mote * { fill: var(--tier); }
.stage-spark.white * { fill: #fff; }
.stage-mote * { fill: color-mix(in srgb, var(--tier), #fff 40%); }
.stage-rays { width: 1200px; height: 1200px; margin: -600px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--tier) 28%, transparent) 0 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, transparent); mask: radial-gradient(closest-side, #000 12%, transparent); }

/* Order up (js/order.js; owner's pick, 2026-10-03: "Stacked cards"): the places as bordered rows like the buttons,
   each with its rank, name, a grip to drag it by and ▲ ▼; small labels above and under the list say which end is
   which. The row being moved lifts: a soft shadow and the navy's faint wash. Locked in (the reveal, the results), a
   row shows its true value, and ✓ in the right place or ↑ / ↓ the way it belonged, its border dashed when wrong.
   `.order-list > .order-row` outranks the results panel's `.answers li`. */
.order { text-align: left; }
.order-end { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.order-end:first-child { margin-bottom: 8px; }
.order-list + .order-end { margin-top: 8px; }
.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-list > .order-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 56px;
  padding: 2px 4px 2px 12px; background: var(--paper); border: var(--line) solid var(--ink); font-size: 17px; line-height: 1.2;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.order-list > .order-row:focus { outline: none; }
.order-list > .order-row:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.order-list > .order-row.lifted { z-index: 2; background: var(--wash); box-shadow: 0 8px 22px rgba(11, 29, 58, 0.22); }
.order-list.dragging > .order-row:not(.lifted) { transition: transform 150ms ease; }
.order-list.dragging, .order-list.dragging * { cursor: grabbing; }
.order-rank { flex: none; width: 24px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.order-name { flex: 1; min-width: 0; overflow-wrap: break-word; padding: 4px 0; }
.order-of { display: block; font-size: 12px; color: var(--muted); }
.order-grip { flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: grab; touch-action: none;
  color: var(--muted); }
.order-grip svg, .order-move svg { fill: currentColor; display: block; }
.order-list > .order-row .order-move { flex: none; width: 40px; height: 44px; margin: 0; padding: 0; border: 0;
  display: grid; place-items: center; background: none; color: var(--ink); }
.order-list > .order-row .order-move:hover, .order-list > .order-row .order-move:focus-visible { background: var(--wash); color: var(--ink); }
.order-list > .order-row .order-move:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.order-list > .order-row .order-move[aria-disabled="true"] { color: #c3c9d3; background: none; cursor: default; }
.order-list.locked .order-grip { cursor: default; }
@media (max-width: 400px) { .order-list > .order-row { padding-left: 10px; } .order-rank { width: 20px; } }
/* locked in */
.order-list > .order-row.done { min-height: 48px; padding-right: 8px; gap: 10px; }
.order-list > .order-row.wrong { border-style: dashed; }
.order-value { flex: none; font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-mark { flex: none; width: 18px; text-align: center; font-weight: 700; }
.order-row.right .order-mark { color: var(--navy); }
/* narrow: a locked row's value goes under its name, so long names and values both keep their words whole */
@media (max-width: 480px) {
  .order-list > .order-row.done { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px;
    row-gap: 0; padding-top: 6px; padding-bottom: 6px; }
  .order-row.done .order-name { grid-column: 2; padding: 0; }
  .order-row.done .order-value { grid-column: 2; grid-row: 2; white-space: normal; font-size: 14px; }
  .order-row.done .order-mark { grid-column: 3; grid-row: 1 / 3; }
}
.stage-figure.order-stage { padding: 12px; }
.slider-result .detail { color: var(--muted); font-size: 15px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-motion="reduced"] .order-list.dragging > .order-row:not(.lifted) { transition: none; }

/* Pin it (js/pin.js; owner, 2026-10-03: GeoGuessr style): the world map to pan, zoom and drop the pin on, in a black
   frame like the boards; under it − / + / World and Lock in. On narrow screens the card becomes a layer filling the
   screen under the banner (main.map-card), the question in a strip on top (right of the score pennant), the map
   taking the rest; the page can't scroll behind it. The reveal and the results show a fitted map (.pin-figure). */
.pin { position: relative; }
.pin-map { position: relative; aspect-ratio: 2 / 1; border: var(--line) solid var(--ink); background: var(--map-sea); overflow: hidden; }
.pin-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
  cursor: crosshair; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.pin-map canvas.panning { cursor: grabbing; }
.pin-map canvas:focus { outline: none; }
.pin-map canvas:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.pin-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.pin-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.pin-zooms { display: flex; gap: 8px; }
.pin-bar button { margin: 0; min-width: 44px; height: 44px; padding: 0 12px; }
.pin-bar .pin-zoom { font-size: 22px; line-height: 1; padding: 0; }
.pin-bar .pin-world { font-size: 16px; padding: 0 12px; }
.pin-bar .pin-lock { padding: 0 22px; }
/* a touch screen keeps :hover on the last button tapped (World would stay black): no hover look without a mouse */
@media (hover: none) { .pin-bar button:hover:not(:focus-visible) { background: var(--paper); color: var(--ink); } }
.pin-bar button:disabled { cursor: default; color: #aab1bd; border-color: #c3c9d3; }
.pin-bar button:disabled:hover { background: var(--paper); color: #aab1bd; }
/* worldmap.js: the land failed to load */
.map-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; max-width: calc(100% - 24px);
  padding: 12px 16px; background: var(--paper); border: var(--line) solid var(--ink); text-align: center; }
.map-error p { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.map-error button { margin: 0; height: 40px; padding: 0 18px; }
/* the reveal's and the results' map: fitted to the pin and the place, with a key under it */
.pin-figure { cursor: default; }
.pin-figure canvas { cursor: default; touch-action: auto; }
.pin-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; font-size: 14px; color: var(--ink); }
.pin-key span { display: inline-flex; align-items: center; gap: 6px; }
.pin-key i { display: inline-block; flex: none; }
.pin-key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.pin-key-area { width: 14px; height: 10px; background: rgb(11 29 58 / 0.35); border: 1.5px solid var(--navy); } /* drawArea */
.pin-key-pin { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--navy); }
.stage-figure.pin-stage { width: min(560px, 100vw - 32px); padding: 0 0 6px; } /* as wide as it can be, however short the line above */
.pin-stage .pin-map { border-width: 0 0 var(--line); } /* the figure's frame is the map's */
/* a phone on its side: too short to stack the lines, the map and Next, so the map goes right of them */
@media (max-height: 500px) and (orientation: landscape) {
  .stage-center:has(> .pin-stage) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px;
    align-items: center; justify-items: center; max-width: 100%; }
  .stage-center:has(> .pin-stage) > * { grid-column: 1; }
  .stage-center:has(> .pin-stage) > .pin-stage { grid-column: 2; grid-row: 1 / span 6; margin: 0;
    width: min(480px, 55vw, 2 * (100dvh - 150px)); }
}
/* Narrow screens, and short touch screens (a phone on its side, 844 x 390: the desktop card would put the map's
   lower half and Lock in below the fold, and touches on the map can't scroll to them) */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  main.map-card { position: fixed; z-index: 4; top: calc(var(--banner-h) + 2 * var(--banner-gap)); left: 0; right: 0; bottom: 0;
    max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-width: var(--line) 0 0; box-shadow: none; }
  /* the score pennant hangs over the strip's left end (style.css .pennant: 20 px in, about 70 px wide and tall) */
  main.map-card .question { margin: 0; min-height: 62px; padding: 8px 12px 8px 104px; font-size: 18px; line-height: 1.3;
    display: flex; flex-direction: column; justify-content: center; }
  .pin-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pin-body .pin { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pin-body .pin-map { flex: 1; min-height: 0; aspect-ratio: auto; border-width: var(--line) 0; }
  .pin-body .pin-bar { margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  /* the hint floats over the map's bottom edge, small, and lets taps through */
  .pin-body .pin-hint { position: absolute; left: 50%; bottom: calc(68px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 4px 10px; background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ink); font-size: 13px; color: var(--ink); text-align: center; pointer-events: none; }
  body:has(main.map-card) { overflow: hidden; overscroll-behavior: none; }
}
/* On its side the screen is too short for a strip, a map and a bar stacked: the buttons go in a column right of the
   map (zooms at the top, Lock in at the bottom, in reach of the right thumb) and the strip gets slimmer */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  main.map-card .question { min-height: 44px; padding: 4px 12px 4px 104px; font-size: 16px; }
  .pin-body .pin { flex-direction: row; }
  .pin-body .pin-map { border-width: var(--line) var(--line) 0 0; }
  .pin-body .pin-bar { flex-direction: column; justify-content: space-between; align-items: stretch;
    padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) 8px; }
  .pin-body .pin-zooms { flex-direction: column; }
  .pin-body .pin-bar .pin-lock { padding: 0 12px; }
  .pin-body .pin-hint { left: calc(50% - 40px); bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* The pages besides the game (credits.html, privacy.html): one card, no banner, the logo without its slogan (too
   small to read here), the house back to the game in the corner. Sources and credits (owner's pick 2026-10-08:
   mockup 4, "by the questions you play"): a row per kind of question that opens to its sources, each with its
   licence in brackets; the licences' own lines in small print at the foot. */
body.doc-page { padding-top: 24px; }
.doc { position: relative; max-width: 680px; }
.doc-logo { display: block; width: 220px; max-width: 64%; height: auto; margin: 0 auto 10px; }
.doc h1 { text-align: center; text-wrap: balance; }
.doc-lede { margin: 0 auto 16px; text-align: center; color: var(--muted); font-size: 16px; }
.doc a { color: inherit; text-underline-offset: 2px; }
.doc a:hover { color: var(--navy); }
.doc details { border: var(--card-border); margin-top: 8px; }
.doc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
  list-style: none; cursor: pointer; font-weight: 700; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; transition: rotate 150ms; }
.doc details[open] summary::after { rotate: 45deg; }
[data-motion="reduced"] .doc summary::after { transition: none; } /* no motion.js here: the device's own setting too */
@media (prefers-reduced-motion: reduce) { .doc summary::after { transition: none; } }
.doc summary:hover { background: var(--wash); }
.doc summary:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.doc summary small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.doc ul { margin: 0; padding: 2px 14px 14px; list-style: none; display: grid; gap: 10px; font-size: 16px; }
.doc li { font-weight: 600; }
.doc .licence { font-weight: 400; color: var(--muted); }
.doc li p { margin: 2px 0 0; font-weight: 400; font-size: 14.5px; color: var(--muted); }
.doc-fine { margin: 20px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* back to the game: the banner's house (owner, 2026-10-08), in the card's top-left corner */
a.doc-home { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; display: grid; place-items: center;
  border: var(--card-border); background: var(--paper); color: var(--ink); }
a.doc-home:hover, a.doc-home:focus-visible { background: var(--ink); color: var(--paper); }
.doc-home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; }
/* the FAQ (faq.html, js/faq.js): the credits page's rows, each opening to its answer */
.faq-answer { padding: 0 14px 12px; }
.faq-answer p, .faq-answer li { margin: 6px 0; font-size: 16px; line-height: 1.5; font-weight: 400; }
.faq-answer ul { display: block; padding: 0 0 0 20px; list-style: disc; }
/* the privacy notice's sections */
.doc h2 { margin: 24px 0 6px; font-size: 18px; }
.doc section p, .doc section li { font-size: 16px; line-height: 1.5; font-weight: 400; }
.doc section p { margin: 6px 0; }
.doc section ul { display: block; padding: 0 0 0 20px; list-style: disc; }
.doc section li { margin: 4px 0; }
.doc code { font-size: 14px; background: var(--wash); padding: 0 4px; }