/*
 * Epure Works — one stylesheet for the whole site.
 *
 * The look is PREEMINENCE's own, "ink and brass" (theme/preeminence.tres in
 * the game's repository, its ADR 0108): night-blue panels almost opaque with
 * a light grain, set over the game's map, strips from edge to edge, tabs
 * in spaced capitals, and the game's two voices (its ADR 0062): what is read
 * (titles, names, the text of the documentation) is set in Newsreader, what
 * is measured (figures, labels, tabs, buttons, the labs' controls and charts,
 * tables) in Manrope. Every colour is a token below, taken from the game's
 * Palette.
 *
 * The active state reads as brighter text, or in brass for the page being
 * read as the game inks the screen being shown, never as an ornament beside
 * it: no accent bar, no hover pad, no drop shadow. Corners are the game
 * theme's 4 pixels.
 */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  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;
}

/* Newsreader carries two axes, weight and optical size: the browser draws
   each size with the letter cut for it, as the game's text (16) and display
   (36) instances do. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  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: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  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;
}

:root {
  /* The game's Palette (theme/preeminence.tres, "ink and brass"). In the game
     the panels float over the map, never over a flat colour: the page's
     ground is the map itself (body::before), and this blue only shows while
     it loads. */
  --background: #2c4463;     /* the sea of the game's map, deeper */
  --panel: #11161f;          /* the game's panel */
  --surface: #0c1017;        /* insets: formulas, charts */
  --surface-alt: #1a2230;    /* raised: the game's cards */
  --text: #d9dfe8;
  --text-bright: #f2f5f8;
  --text-dim: #8b98ad;
  --text-muted: #96a2b5;
  --line: rgba(217, 223, 232, 0.12);
  --line-strong: rgba(217, 223, 232, 0.22);
  --outline: rgba(217, 223, 232, 0.09);   /* the hairline the game draws around a panel set on blue */
  --track: rgba(217, 223, 232, 0.12);
  --track-fill: rgba(217, 223, 232, 0.45);
  --accent: #d9b36a;         /* the game's brass */
  --on-accent: #11161f;
  --positive: #5fbf8f;
  --negative: #e0706a;
  --focus: #f0c875;
  --radius: 4px;

  /* Chart series. The first is drawn in the brass of the game's curves
     (ChartPlot); the others take the hues of its StackedBar, told apart by
     colour-blind readers. */
  --s1: #d9b36a;
  --s2: #6fa3d0;
  --s3: #7fb48a;
  --s4: #b48ad6;

  /* Bars, as the game's ShareBar, AgePyramid and StackedBar draw them: an
     ordinary grey fill, the bar that stands out in ink, two tones for the
     categories that need one, and the brass kept for the reference mark. */
  --bar-1: #f2f5f8;
  --bar-2: rgba(150, 162, 181, 0.85);
  --bar-3: #7fb48a;
  --bar-4: #6fa3d0;
  --bar-mark: var(--accent);

  /* The four statuses of a parameter, and the two that are not a source. */
  --etude-ink: #9ccf9f;   --etude-bg: rgba(110, 158, 106, 0.18);
  --plage-ink: #9dbfe8;   --plage-bg: rgba(90, 147, 212, 0.18);
  --calcul-ink: #c3adeb;  --calcul-bg: rgba(168, 111, 176, 0.2);
  --choix-ink: #ffcf9e;   --choix-bg: rgba(255, 181, 107, 0.14);
  --autre-ink: #c9d0db;   --autre-bg: rgba(217, 223, 232, 0.08);

  /* The grain of the game's panels, held still: a page has no frame to redraw it on. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* What is measured, and what is read. */
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  --gutter: 16px;
  --edge: 16px;              /* the page runs from edge to edge, 16 pixels in */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background-color: var(--background); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The stretch of the game's map this page is set over. */
  --map: url(../img/carte-europe.jpg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.62;
  font-feature-settings: 'kern';
}
/* The ground: the game's map, held still under the page as the game holds it
   under its panels, dimmed so that the panels stand off it and blurred as the
   game blurs its globe under a menu, which also hides that a capture is
   stretched over a wide screen. It runs past the window on every side, so
   that the blur has no pale edge. Nothing is written straight on it. */
body::before {
  content: '';
  position: fixed;
  inset: -32px;
  z-index: -1;
  background: var(--background) var(--map) center / cover no-repeat;
  filter: blur(8px) brightness(0.5) saturate(0.9);
}
body:has(main.game:not(.home):not(.page)), body:has(main.press) { --map: url(../img/preeminence/carte-ouverture.jpg); }

a { color: var(--text-bright); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Titles are read: Newsreader, medium for the large ones as the game's
   display instance, semibold for the short ones as its text instance. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--text-bright); }
h1 { font-size: 2.5rem; font-weight: 500; margin: 0 0 0.35em; }
h2 { font-size: 1.55rem; font-weight: 500; margin: 1.8em 0 0.6em; }
h3 { font-size: 1.22rem; margin: 1.6em 0 0.5em; }
h4 { font-size: 1.08rem; margin: 1.4em 0 0.4em; }
h2, h3, section[id] { scroll-margin-top: 16px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin: 0.3em 0; }
li::marker { color: var(--text-dim); }
strong { font-weight: 700; color: var(--text-bright); }
sup, sub { line-height: 0; }

code {
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--text-bright);
  background: var(--surface-alt);
  padding: 0.08em 0.34em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
pre { font-family: var(--mono); font-size: 0.86em; background: var(--surface); padding: 12px 16px; overflow-x: auto; border-radius: var(--radius); }

.dim { color: var(--text-dim); }
.num { font-variant-numeric: tabular-nums; }

/* Spaced capitals: the game's NavTab and column headers. They are labels, in Manrope. */
.strip-tabs a, .strip-langs a, .game-tabs a, .sidebar h2, .rail h2, .label, th, .pager .dir {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --- Panels -------------------------------------------------------------------- */

.block, .lab, .fiche, .rail-box, .sidebar-body, .game-panel {
  background-color: var(--panel);
  background-image: var(--grain);
  border-radius: var(--radius);
}
/* On blue, a night-blue panel with no edge melts into what it covers: the game's hairline. */
.block, .fiche, .rail-box, .sidebar-body, .game-panel { border: 1px solid var(--outline); }

/* --- The top strip ---------------------------------------------------------------- */

.strip {
  background-color: var(--panel);
  background-image: var(--grain);
  width: 100%;
}
.strip-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--edge);
  min-height: 48px;
}
/* The studio's mark (assets/img/epure-works.svg), inked in the page's own
   bright text through a mask; its name stays in the link for whoever cannot
   see it. */
.wordmark {
  flex: none;
  width: 97px;
  height: 28px;
  background-color: var(--text-bright);
  -webkit-mask: url(../img/epure-works.svg) center / contain no-repeat;
  mask: url(../img/epure-works.svg) center / contain no-repeat;
}
.wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.strip-tabs { display: flex; gap: 26px; flex-wrap: wrap; }
.strip-tabs a { color: var(--text-dim); text-decoration: none; padding: 15px 0; }
.strip-tabs a:hover { color: var(--text-bright); }
/* The page being read is inked in brass, as the game inks the screen being shown. */
.strip-tabs a[aria-current] { color: var(--accent); }
.strip-status { margin: 0 0 0 auto; color: var(--text-dim); white-space: nowrap; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
/* The page in the other languages: the one being read is the brightest. */
.strip-langs { display: flex; gap: 14px; margin-left: auto; }
.strip-status + .strip-langs { margin-left: 0; }
.strip-langs a { color: var(--text-dim); text-decoration: none; padding: 15px 0; }
.strip-langs a:hover, .strip-langs a[aria-current] { color: var(--text-bright); }

/* --- Documentation layout ----------------------------------------------------------- */

.docs {
  flex: 1;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 280px;
  gap: 16px;
  width: 100%;
  padding: 16px var(--edge) 32px;
  align-items: start;
}
.docs-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: 0.88rem; scrollbar-width: thin; }
.sidebar-body { padding: 14px 16px 16px; }
.sidebar-toggle { display: none; }
.sidebar h2 { color: var(--text-dim); margin: 18px 0 6px; font-size: 0.66rem; }
.sidebar h2:first-child { margin-top: 2px; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin: 0; }
.sidebar a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; text-decoration: none; color: var(--text-dim); line-height: 1.35; }
.sidebar a:hover { color: var(--text-bright); }
.sidebar a[aria-current] { color: var(--text-bright); font-weight: 700; }
.sidebar .eq { color: var(--text-dim); opacity: 0.75; font-size: 0.8em; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.rail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; }
.rail-box { padding: 14px 16px 16px; font-size: 0.84rem; }
.rail h2 { color: var(--text-dim); margin: 0 0 8px; font-size: 0.66rem; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0; }
.rail .toc a { display: block; padding: 3px 0; text-decoration: none; color: var(--text-dim); line-height: 1.35; }
.rail .toc a:hover, .rail .toc a.here { color: var(--text-bright); }
.rail .toc .level-3 { padding-left: 12px; }

/* Without the script, the fiche stays where it is written, in the page. */
.js .docs-main .fiche { display: none; }

@media (max-width: 1240px) {
  .docs { grid-template-columns: 224px minmax(0, 1fr); }
  .rail { display: none; }
  .js .docs-main .fiche { display: block; }
}
@media (max-width: 860px) {
  .docs { display: flex; flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 24px; }
  /* The mark and the languages on a first row, the tabs on a second. */
  .strip-inner { padding: 0 var(--gutter); gap: 0 18px; flex-wrap: wrap; }
  .strip .strip-langs { order: 2; margin-left: auto; }
  .strip-tabs { order: 3; width: 100%; flex-wrap: nowrap; gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .strip-tabs::-webkit-scrollbar { display: none; }
  .strip-tabs a { padding-top: 6px; white-space: nowrap; }
  .strip-status { display: none; }
  .sidebar { position: static; max-height: none; overflow: visible; }
  .sidebar-body { padding: 0 16px; }
  .sidebar-toggle {
    display: flex; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 12px 0; font: inherit; color: var(--text-bright); cursor: pointer;
  }
  .sidebar-toggle .dim { font-size: 0.9em; }
  .sidebar .sidebar-links { display: none; padding-bottom: 12px; }
  .sidebar.open .sidebar-links { display: block; }
  h1 { font-size: 1.8rem; }
  .plain { padding: 10vh var(--gutter) 14vh; }
}

/* --- Blocks: the page head, a mechanic, a text ----------------------------------------- */

.block { padding: 22px 26px 24px; }
.block > :first-child { margin-top: 0; }
.block > :last-child { margin-bottom: 0; }
.block > h2:first-child { margin: 0 0 14px; font-size: 1.6rem; }
.block h3 { font-size: 1.2rem; }

.page-head { padding: 26px 26px 24px; }
.lede { font-size: 1.2rem; color: var(--text); max-width: 700px; margin-bottom: 0; }
.page-head .lede + * { margin-top: 18px; }

.status { font-size: 0.92rem; color: var(--text-muted); margin: 16px 0 0; }

/* "En clair" and "Dans la partie": what an equation says in words, and what the player sees of it. */
.plain-words { margin: 0 0 18px; }
.plain-words .label { color: var(--text-dim); margin: 0 0 4px; }
.plain-words p:not(.label) { font-size: 1.12rem; color: var(--text-bright); }
.plain-words p:last-child { margin-bottom: 0; }
.in-game { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.in-game .label { color: var(--text-dim); margin: 0 0 4px; }
.in-game p:last-child { margin-bottom: 0; }

.symbols { font-size: 0.9rem; color: var(--text-muted); }
.impl { font-size: 0.88rem; color: var(--text-dim); }

/* --- Status tags ------------------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.55;
  padding: 0 7px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.tag.etude { color: var(--etude-ink); background: var(--etude-bg); }
.tag.plage { color: var(--plage-ink); background: var(--plage-bg); }
.tag.calcul { color: var(--calcul-ink); background: var(--calcul-bg); }
.tag.choix { color: var(--choix-ink); background: var(--choix-bg); }
.tag.autre { color: var(--autre-ink); background: var(--autre-bg); }
.tags { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.legend-tags { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 20px; font-size: 0.88rem; color: var(--text-muted); }
.legend-tags span.tag { margin-right: 7px; }

/* --- Formulas, tables ----------------------------------------------------------------------- */

.formula {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin: 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--text-bright);
}
.formula .katex-display { margin: 0.3em 0; }
.katex { font-size: 1.06em; }

.table-wrap { overflow-x: auto; margin: 12px 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 0.84rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); }
th { color: var(--text-dim); font-size: 0.64rem; white-space: nowrap; padding-top: 4px; }
tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; overflow-wrap: normal; }
table.params td:first-child { min-width: 180px; }
table.params td:nth-child(2) { min-width: 96px; color: var(--text-bright); }

/* --- The fiche: a mechanic at a glance, 280 wide like the game's panels ---------------------- */

.fiche { padding: 16px 16px 14px; }
.fiche-kicker { color: var(--text-dim); margin: 0 0 8px; }
.fiche-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--text-bright); margin: 0; line-height: 1.25; }
.fiche-code { margin: 5px 0 12px; font-size: 0.8rem; }
.fiche dl { margin: 0; font-size: 0.82rem; }
.fiche dt { color: var(--text-dim); font-size: 0.76rem; padding-top: 9px; border-top: 1px solid var(--line); margin-top: 9px; }
.fiche dt:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.fiche dd { margin: 3px 0 0; color: var(--text); line-height: 1.45; }
.fiche .lever { color: var(--text-bright); }
.docs-main .fiche { max-width: 460px; }

/* The loops: a chain of causes, one link after the other. */
.loops { display: grid; gap: 10px; margin: 8px 0 0; }
.loop { background: var(--surface); border-radius: var(--radius); padding: 12px 16px 14px; }
.loop-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--text-bright); margin: 0 0 6px; }
.chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 1rem; }
.chain li { margin: 0; }
.chain li + li::before { content: '→'; color: var(--text-dim); margin-right: 8px; }
.loop-note { font-size: 0.95rem; color: var(--text-muted); margin: 8px 0 0; }

/* The lexicon. */
.terms { margin: 0; }
.terms dt { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--text-bright); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.terms dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.terms dt code { font-weight: 400; margin-left: 6px; }
.terms dd { margin: 4px 0 0; color: var(--text); }
.terms dd .see { color: var(--text-dim); font-size: 0.9rem; }

/* --- Labs ---------------------------------------------------------------------------------------- */

.lab { padding: 20px 24px 24px; margin: 18px 0; background-color: var(--surface-alt); }
.block .lab:last-child { margin-bottom: 0; }
.lab-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; color: var(--text-bright); }
.lab-intro { font-size: 1.02rem; color: var(--text); margin: 6px 0 14px; }
.lab-note { font-size: 0.9rem; color: var(--text-dim); margin: 14px 0 0; }

.controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 28px; margin: 12px 0 18px; }
.control { min-width: 0; }
.control-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.86rem; }
.control-top label, .control-top .control-label { color: var(--text); }
.control-value { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: var(--text-bright); }
.control-hint { font-size: 0.76rem; color: var(--text-dim); line-height: 1.35; margin-top: 2px; }
.control.wide { grid-column: 1 / -1; }
/* A control that does nothing for now (its value is the model's own): dimmed, not hidden. */
.control.disabled { opacity: 0.45; }

/* The game's GlideSlider: a thin track, a paler fill up to the handle, a round handle. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  margin: 2px 0 0;
  cursor: pointer;
  --fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--track-fill) var(--fill), var(--track) var(--fill));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--track-fill); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -4.5px;
  border-radius: 50%;
  background: var(--text-bright);
  border: 0;
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text-bright); border: 0; }
input[type="range"]:disabled { cursor: default; }

.choice { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; }
.choice button, .text-button {
  background: none; border: 0; padding: 2px 0; margin: 0;
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.choice button:hover, .text-button:hover { color: var(--text-bright); }
.choice button[aria-pressed="true"] { color: var(--text-bright); }
.text-button { color: var(--text); padding-top: 18px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

.toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--text); cursor: pointer; }
.toggle input { margin: 5px 0 0; accent-color: var(--text-bright); }

.presets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 0.84rem; margin: 0 0 6px; }
.presets .label { color: var(--text-dim); margin-right: 2px; }
.presets button { background: none; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0; font: inherit; color: var(--text); cursor: pointer; }
.presets button:hover { color: var(--text-bright); border-bottom-color: var(--text-bright); }

.readout { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 24px; margin: 4px 0 12px; }
.readout.balanced { grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); }
/* The game keeps one large figure per screen; a lab's figures are read like
   the rest of its panel, a size above the labels. */
.readout .item .v { font-size: 1.08rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--text-bright); }
.readout .item .k { font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }
.sentence { font-size: 1.06rem; margin: 4px 0 12px; color: var(--text-bright); }
.worked { overflow-x: auto; overflow-y: hidden; padding: 8px 12px; margin: 4px 0 10px; font-size: 0.94rem; background: var(--surface); border-radius: var(--radius); color: var(--text-bright); }
.worked .katex { font-size: 1em; }

/* --- Charts ------------------------------------------------------------------------------------------ */

.chart { position: relative; margin: 12px 0 6px; background: var(--surface); border-radius: var(--radius); padding: 12px 14px 8px; }
.chart-title { font-size: 0.8rem; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.76rem; color: var(--text); margin: 0 0 4px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart svg text { fill: var(--text-dim); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart svg text.end-label { fill: var(--text); }
.chart svg text.ref-label { fill: var(--text-dim); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.chart .ref { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4 3; }
.chart .zone { fill: var(--text); fill-opacity: 0.07; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--text-dim); stroke-width: 1; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 6px 9px; font-size: 0.76rem; line-height: 1.45; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.chart-tip .tip-x { color: var(--text-dim); }
.chart-tip .sw { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }
.chart details { font-size: 0.76rem; color: var(--text-dim); margin-top: 4px; }

/* Bars: one row per item, on a fixed scale (app/components/Bars.jsx). The rows that
   matter read brighter; nothing else marks them. */
.bars { margin: 12px 0 6px; background: var(--surface); border-radius: var(--radius); padding: 12px 14px 10px; }
.bars-body { display: grid; grid-template-columns: minmax(3.5em, max-content) minmax(80px, 1fr) 4.2em minmax(0, max-content); gap: 6px 10px; align-items: center; }
.bar-row { display: contents; }
.bar-label { font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.bar-row.bright .bar-label, .bar-row.bright .bar-value { color: var(--text-bright); }
.bar-track { position: relative; height: 12px; background: var(--line); }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--bar-mark); }
.bar-ref { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px dashed var(--text-dim); }
.bar-value { font-size: 0.8rem; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.bar-note { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; }
.bar-row.bright .bar-note { color: var(--text); }
.bar-scale .bar-track { background: none; height: 14px; }
.bar-ref-label { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.bar-key-mark { display: inline-block; width: 2px; height: 10px; background: var(--bar-mark); margin-right: 6px; vertical-align: middle; }
.bars .chart-legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }
.chart details summary { cursor: pointer; }
.chart details summary:hover { color: var(--text-bright); }
.chart details table { font-size: 0.74rem; margin-top: 6px; }
.chart details th, .chart details td { padding: 3px 10px 3px 0; text-align: right; }
.chart details th:first-child, .chart details td:first-child { text-align: left; }

/* --- The bottom strip: previous, next, and the keys that lead there ----------------------------------- */

.strip.bottom .strip-inner { min-height: 52px; }
.pager { display: flex; justify-content: space-between; gap: 16px; width: 100%; }
.pager a { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--text-dim); padding: 14px 0; }
.pager a:hover { color: var(--text-bright); }
.pager a:hover .dir { color: var(--text-bright); }
.pager .next { margin-left: auto; text-align: right; }
.pager .dir { color: var(--text-dim); }
.key {
  display: inline-block; min-width: 20px; padding: 0 5px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  font-size: 0.72rem; line-height: 18px; text-align: center; color: var(--text-dim);
}

/* The footer is a strip like the top one: nothing is written on the map. */
.site-footer { width: 100%; padding: 14px var(--edge) 16px; font-size: 0.76rem; color: var(--text-dim); background-color: var(--panel); background-image: var(--grain); }
.site-footer p { margin: 0; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text-bright); }
.site-footer a + a { margin-left: 14px; }

@media (max-width: 560px) {
  .block, .page-head { padding: 18px 16px 20px; }
  .lab { padding: 16px 14px 18px; }
  .formula { padding: 10px 12px; }
  .pager .title { display: none; }
  .site-footer { padding: 14px var(--gutter) 16px; }
  .readout.balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Wide screens: the page takes the whole width -------------------------------------------------- */

/* Running text is read: Newsreader, a size above the interface's, since a
   serif of the same size reads smaller. Tables, the fiche and the labs'
   instruments stay in Manrope. Both rules weigh nothing (:where), so that
   a class giving its own size (.lede, .sentence...) keeps it. */
:where(.docs-main) :where(p, li, dd) { font-family: var(--serif); font-size: 1.07rem; }
:where(.docs-main) :where(table, .fiche dl, .chart, .bars, .controls, .readout, .presets, .legend-tags, .chain) :where(p, li, dd) { font-family: inherit; font-size: inherit; }
.chain { font-family: var(--serif); }
.fiche-code { font-family: var(--sans); }

/* Running text keeps a line a reader can follow; tables, formulas, charts and labs take the width. */
.docs-main :is(p, li, dd) { max-width: 112ch; }
.docs-main :is(td, th) p, .docs-main .chart p { max-width: none; }

/* A lab wide enough puts its controls on the left and what they do on the right. */
.lab { container-type: inline-size; }
@container (min-width: 900px) {
  .lab-body { display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); gap: 8px 36px; align-items: start; }
  .lab-body .controls { grid-template-columns: 1fr; margin-top: 4px; }
  .lab-body .outputs { min-width: 0; }
}
@container (min-width: 1300px) {
  .lab-body .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-body { grid-template-columns: minmax(420px, 36%) minmax(0, 1fr); }
}

@media (min-width: 1600px) {
  body { font-size: 16px; }
  .docs { grid-template-columns: 260px minmax(0, 1fr) 300px; }
  /* In clear and in the game, side by side. */
  .page-head:has(.plain-words):has(.in-game) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .page-head:has(.plain-words):has(.in-game) > * { grid-column: 1 / -1; }
  .page-head:has(.plain-words):has(.in-game) > .plain-words { grid-column: 1; margin-top: 18px; }
  .page-head:has(.plain-words):has(.in-game) > .in-game { grid-column: 2; margin-top: 18px; padding-top: 0; border-top: 0; }
}
.fiche dt code { text-transform: none; letter-spacing: 0; }

/* --- For the novice: the basics, a worked example, the formula word by word ---------------------------- */

.words { margin: 4px 0 8px; }
.words td:first-child { width: 1%; white-space: nowrap; color: var(--text-bright); padding-right: 18px; }
.words td:nth-child(3) { width: 1%; white-space: nowrap; color: var(--text-bright); font-variant-numeric: tabular-nums; }
/* The technical reference of an equation, folded: the novice's reading ends
   with the lab, and one click opens the formula and its sources. */
details.tech { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
details.tech > summary { cursor: pointer; color: var(--text); }
details.tech > summary:hover, details.tech[open] > summary { color: var(--text-bright); }
details.tech[open] > summary { margin-bottom: 18px; }
details.tech .tech-title { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; }
details.tech .tech-note { display: block; margin-top: 2px; }
.tech-note { font-family: var(--serif); font-size: 0.95rem; color: var(--text-dim); }

/* --- The page of the game, and the home page, which is laid out like it ------------------------------- */

.game { flex: 1; width: 100%; }

/* The opening: two panels set on the map as the game sets its own, the
   presentation on the left and a fiche on the right, and room under them for
   the map to show. */
.game-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--edge);
  min-height: 680px;
  padding: var(--edge);
}
.home .game-hero { min-height: 560px; }
/* A page of text (studio, press, contact, legal notice, credits) opens on one
   wide panel: its title in words and a few lines on the left, its fiche on the
   right, a name and its value on each line. */
.page-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 48px; align-items: start; padding: 40px; }
.page-top:not(:has(.page-fiche)) { grid-template-columns: minmax(0, 1fr); }
.page-title h1 { font-size: 3.25rem; line-height: 1.12; margin: 0 0 16px; }
.page-title .lede { font-family: var(--serif); font-size: 1.32rem; line-height: 1.5; max-width: 720px; margin: 0; }
.page-title .game-links { margin-top: 26px; }
.page-fiche { margin: 0; font-size: 0.82rem; }
.page-fiche div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); }
.page-fiche div:first-child { border-top: 0; padding-top: 4px; }
.page-fiche dt { color: var(--text-dim); white-space: nowrap; }
.page-fiche dd { margin: 0; text-align: right; color: var(--text-bright); }
.page-fiche dd a { color: var(--accent); text-decoration: none; }
.page-fiche dd a:hover { color: var(--focus); }

/* Then cards of equal height, side by side over the whole width: a title, a
   few lines, and under them rows that lead somewhere or give a value. */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--edge); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px 26px 16px; }
.card h2 { font-size: 1.5rem; margin: 0 0 12px; }
.card p { font-family: var(--serif); font-size: 1.07rem; margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.card p a { color: var(--accent); text-decoration-color: currentColor; }
.card p a:hover { color: var(--focus); }
.rows { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; line-height: 1.4; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); }
.rows li > a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: -9px 0; padding: 9px 0; color: var(--text); text-decoration: none; }
.rows li > a:hover { color: var(--text-bright); }
.rows .eq { color: var(--accent); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .kv span { color: var(--text-muted); }
.rows .kv b { font-weight: 600; color: var(--text-bright); text-align: right; }
.rows .kv b a { color: var(--accent); text-decoration: none; }
.game-intro { width: 500px; max-width: 100%; padding: 30px 28px; }
/* The studio's mark as the home page's title, inked through a mask like the strip's. */
.studio-mark {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 247.34 / 71.05;
  margin: 0 0 24px;
  background-color: var(--text-bright);
  -webkit-mask: url(../img/epure-works.svg) center / contain no-repeat;
  mask: url(../img/epure-works.svg) center / contain no-repeat;
}
.studio-mark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game-intro h1 { margin: 0 0 22px; line-height: 0; }
.game-intro h1 img { display: block; width: 340px; max-width: 100%; height: auto; }
.game-intro .lede { font-family: var(--serif); font-size: 1.32rem; line-height: 1.5; max-width: none; margin: 0 0 22px; }
.game-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.game-links a, .game-text a { color: var(--accent); text-decoration-color: currentColor; }
.game-links a:hover, .game-text a:hover { color: var(--focus); }
/* The one action of the page: the brightest thing on it, in the game's brass. */
.game-links .action { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.game-links .action:hover { background: var(--focus); color: var(--on-accent); }

.game-fiche { flex: none; width: 280px; margin: 0; padding: 7px 16px 5px; font-size: 0.82rem; }
.game-fiche div { padding: 9px 0; border-top: 1px solid var(--line); }
.game-fiche div:first-child { border-top: 0; }
.game-fiche dt { color: var(--text-dim); font-size: 0.76rem; }
.game-fiche dd { margin: 3px 0 0; line-height: 1.45; }

/* The page's own tabs, one per section, which follow the reader down the page. */
.game-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  gap: 26px;
  padding: 0 var(--edge);
  overflow-x: auto;
  scrollbar-width: none;
  background-color: var(--surface-alt);
  background-image: var(--grain);
}
.game-tabs::-webkit-scrollbar { display: none; }
.game-tabs a { color: var(--text-dim); text-decoration: none; padding: 15px 0; white-space: nowrap; }
.game-tabs a:hover { color: var(--text-bright); }
.game-tabs a.here { color: var(--accent); }

/* A section: its words in a panel on the left, what they describe beside it,
   set straight on the blue, as the game sets a screen beside its map. */
.game-sections { display: flex; flex-direction: column; gap: var(--edge); padding: var(--edge); }
.game-row { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--edge); align-items: stretch; scroll-margin-top: 62px; }
.game-text { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 24px 26px 20px; }
.game-text h2 { font-size: 2rem; margin: 0 0 14px; }
/* A game named by its mark, on the home page. */
.game-text h2.game-mark { line-height: 0; margin-bottom: 18px; }
.game-text h2.game-mark img { display: block; width: 250px; max-width: 100%; height: auto; }
.game-text .figures { margin: 4px 0 18px; }
.game-text p { font-family: var(--serif); font-size: 1.07rem; margin: 0 0 14px; }
.game-text p:last-child { margin-bottom: 0; }
.game-text .game-caption { font-size: 0.95rem; color: var(--text-muted); margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* Beside something much taller than its words, the panel keeps to its words and follows the reader down. */
.game-row.long > .game-text { align-self: start; position: sticky; top: 65px; }
.game-shot { display: block; align-self: start; overflow: hidden; border: 1px solid var(--outline); border-radius: var(--radius); }
.game-shot img { display: block; width: 100%; height: auto; }

/* The game's FigureGrid: the name on the left, dimmed, the figure on the right. */
.figures { margin: 0; }
.figures div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.figures dt { font-size: 0.82rem; color: var(--text-muted); }
.figures dd { margin: 0; font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-bright); }

/* Labs set on the page of the game: each is its own panel. */
.game-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--edge); }
.game-tiles > *, .game-lab { min-width: 0; }
.game .lab { height: 100%; margin: 0; padding: 22px 26px; background-color: var(--panel); border: 1px solid var(--outline); }
.game .lab .controls { margin-top: 8px; }
.game-lab .game-note { font-size: 0.9rem; color: var(--text); margin: var(--edge) 0 0; padding: 12px 18px; background-color: var(--panel); background-image: var(--grain); border: 1px solid var(--outline); border-radius: var(--radius); }
.game-lab .game-note a { color: var(--text-bright); }
.game-lab .lab { height: auto; }

/* The press kit: each file in its own panel, what it is and a link to take it. */
.kit-group { padding: 20px 24px 24px; }
.kit-group h2 { font-size: 1.55rem; margin: 0 0 14px; }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--edge); }
.kit figure { margin: 0; padding: 12px 12px 10px; background: var(--surface-alt); border-radius: var(--radius); }
.kit-view { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.kit-view.light { background: var(--text-bright); }
.kit-view img { display: block; width: auto; height: auto; max-width: 76%; max-height: 62%; }
.kit-view.shot img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.kit figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-size: 0.84rem; color: var(--text); }
.kit figcaption a { color: var(--accent); white-space: nowrap; }
.kit figcaption a:hover { color: var(--focus); }

/* The credits: one panel per kind of thing, each entry with what its licence asks to be quoted. */
.credit-groups { columns: 2 520px; column-gap: var(--edge); }
.credit-group { break-inside: avoid; margin: 0 0 var(--edge); padding: 20px 24px 22px; }
.credit-group h2 { font-size: 1.55rem; margin: 0 0 10px; }
.credit-group p { font-family: var(--serif); font-size: 1.02rem; margin: 0; }
.credit-group > p { margin-bottom: 4px; }
.credit { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.credit-group h2 + .credit { margin-top: 0; padding-top: 0; border-top: 0; }
.credit p + p { margin-top: 6px; }
/* A licence's wording is quoted as it is, in the voice of what is measured: no ligature turns (c) into a sign. */
.credits p { font-variant-ligatures: none; font-feature-settings: 'calt' 0; }
.credit p.dim { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }

/* The documentation's mechanics, as its contents: a name, and its equations. */
.game-toc {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
  padding: 12px 26px;
  font-size: 0.88rem;
}
.game-toc a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.game-toc a:nth-child(4n) { border-bottom: 0; }
.game-toc a:hover { color: var(--text-bright); }
.game-toc .eq { color: var(--accent); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1180px) {
  .game-row { grid-template-columns: minmax(0, 1fr); }
  .cards, .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-top { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 32px; padding: 32px; }
  .game-row.long > .game-text { position: static; }
  .game-toc { grid-template-rows: repeat(8, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-toc a:nth-child(4n) { border-bottom: 1px solid var(--line); }
  .game-toc a:nth-child(8n) { border-bottom: 0; }
}
@media (max-width: 860px) {
  /* The map becomes a band at the top, the presentation set over its lower edge. */
  /* The panels come one under the other, with a stretch of map left clear above the first. */
  .game-hero { display: block; min-height: 0; padding: 150px var(--gutter) var(--gutter); }
  .home .game-hero { min-height: 0; }
  .page-top, .page-top:not(:has(.page-fiche)) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 20px; }
  .page-title h1 { font-size: 2.3rem; }
  .page-title .lede { font-size: 1.2rem; }
  .cards, .cards.three { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card { padding: 20px 18px 10px; }
  .kit-group { padding: 16px 16px 18px; }
  .credit-groups { columns: auto; }
  .credit-group { padding: 18px 16px 20px; }
  .studio-mark { width: 240px; }
  .game-intro, .game-fiche { position: relative; width: auto; }
  .game-intro { padding: 22px 20px; }
  .game-intro h1 img { width: 260px; }
  .game-fiche { margin-top: 12px; }
  .game-tabs { gap: 22px; padding: 0 var(--gutter); }
  .game-sections { gap: 28px; padding: var(--gutter) var(--gutter) 20px; }
  .game-row { gap: 8px; }
  .game-text { padding: 18px 18px 20px; }
  .game-text h2 { font-size: 1.62rem; }
  .game-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .game .lab { padding: 18px 16px 20px; }
  .game-toc { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); padding: 8px 18px; }
  .game-toc a:nth-child(8n) { border-bottom: 1px solid var(--line); }
  .game-toc a:last-child { border-bottom: 0; }
}

/* --- Motion --------------------------------------------------------------------------------------------- */

/* Small, and only for a reader who has not asked for stillness: a curve is
   drawn when its chart comes into view, bars grow from zero and glide to a
   new value, and the panels of the game's page rise into place once. */
@media (prefers-reduced-motion: no-preference) {
  .chart .line { opacity: 0; }
  .chart.seen .line { opacity: 1; animation: chart-draw 1.1s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
  .chart.seen .line[stroke-dasharray] { animation: chart-fade 0.9s ease both; }
  .bar-fill { transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .bars:not(.seen) .bar-fill { width: 0 !important; }

  .game-intro, .game-fiche, .page-top { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .game-fiche { animation-delay: 0.12s; }
  /* game.js sets `motion` once it can watch the page, so nothing stays hidden without it. */
  .motion .game-row > *, .motion .game-tiles > *, .motion .kit > *, .motion .credit-groups > *, .motion .cards > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .motion .game-row > .game-tiles { opacity: 1; transform: none; }
  .motion .game-row > .seen, .motion .game-tiles > .seen, .motion .kit > .seen, .motion .credit-groups > .seen, .motion .cards > .seen { opacity: 1; transform: none; }
  .game-shot img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .game-shot:hover img, .game-shot:focus-visible img { transform: scale(1.015); }
  .game-links .action { transition: background-color 0.2s ease; }
}
@keyframes chart-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }