/* E-paper tokens from AcademiaGames, adapted to this page. */
body[data-display='eink'],
body[data-display='eink-color'] {
  /* Native widgets (dropdown lists, scrollbars) are painted by the browser
     from color-scheme, not from these tokens: without this, a panel that the
     player left set to dark opens black lists on a paper page. The display mode
     overrules the light/dark choice entirely — a panel with no backlight is
     never dark. */
  color-scheme: light;

  --ink-950: #f0f0f0;
  --ink-900: #ffffff; /* page background: paper */
  --ink-800: #ffffff;
  --ink-700: #ffffff; /* raised surfaces rely on their border, not tone */
  --ink-600: #f7f7f7; /* hover surfaces, inputs */
  /* Structure in grey. A solid grey rule is as crisp as a black one at 16
     levels (it is the TRANSLUCENT lines that smear), and a page is mostly
     borders: black ones spend the ink budget on something nobody reads. */
  --line: #9a9a9a;
  --line-strong: #6b6b6b;

  --text: #000000;    /* the words, and only the words, are full black */
  --text-dim: #3d3d3d;
  --text-faint: #5f5f5f;

  --gold-glow: none;
  --shadow-card: none;
  --shadow-pop: none;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;

  --t-fast: 0ms;
  --t-med: 0ms;
  --t-slow: 0ms;
}

/* Black & white: one ink. The brand gold becomes solid black so the accent
   reads as "filled", and every category/semantic color collapses to black or a
   distinct gray — hue carries no information on this panel, weight does. */
body[data-display='eink'] {
  /* Gold is a TEXT colour in 126 rules and a FILL in about 40, so it cannot be
     white (the text would vanish) and should not be black (forty solid black
     blocks is the heaviest thing on the page). Dark grey satisfies both: 10:1
     against paper as text, 10:1 against white as a fill, and a third less ink
     than black in every filled pill on screen. */
  --gold: #3d3d3d;
  --gold-hot: #2b2b2b;
  --gold-soft: #ededed;
  --on-gold: #ffffff;

  --cat-arcade: #000000;
  --cat-math: #000000;
  --cat-puzzle: #000000;
  --cat-strategy: #000000;
  --cat-mind: #000000;
  --cat-retro: #000000;
  --cat-word: #000000;
  --cat-base: #000000;
  --cat-match: #000000;
  --cat-race: #000000;

  --correct: #000000;
  --wrong: #000000;
  --wrong-hot: #000000;
}

/* Color e-ink (Kaleido-class panels show ~4096 washed-out colors): keep hue as
   a cue but push each accent dark and fully saturated so it survives the
   panel's low contrast, on the same paper-white ground. */
body[data-display='eink-color'] {
  --gold: #b35c00;
  --gold-hot: #8f4a00;
  --gold-soft: #ffe1b3;
  --on-gold: #ffffff;

  --cat-arcade: #c00000;
  --cat-math: #006d6d;
  --cat-puzzle: #4b1fb3;
  --cat-strategy: #0f6b00;
  --cat-mind: #4b1fb3;
  --cat-retro: #a8006e;
  --cat-word: #8a6100;
  --cat-base: #004c99;
  --cat-match: #a8006e;
  --cat-race: #8a3d00;

  --correct: #0f6b00;
  --wrong: #c00000;
  --wrong-hot: #7a0000;
}

body[data-display] { background: var(--ink-900); }
body[data-display] *, body[data-display] *::before, body[data-display] *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; scroll-behavior: auto !important; }
body[data-display] .topbar, body[data-display] .topics-page { background: var(--ink-900); }
body[data-display] .pmenu__theme-thumb, body[data-display] .pmenu__xp-track span { background: var(--gold); }
/* The logo glow is a filter, not a box-shadow, so the reset above misses it. */
body[data-display='eink-color'] .topbar__mark { filter: none; }
body[data-display='eink'] img,
body[data-display='eink'] canvas,
body[data-display='eink'] svg,
body[data-display='eink'] .langdd__globe,
body[data-display='eink'] .langdd__flag { filter: grayscale(1) contrast(1.15); }
body[data-display='eink'] { --before: #eeeeee; --after: #dddddd; }
body[data-display='eink-color'] { --before: #e4efdf; --after: #f5e0e0; }

body[data-display] :focus-visible { outline: 2px solid #000; }
body[data-display] ::selection { background: #000; color: #fff; }