/* ====================================================================================================================
   Shared color palettes for Petr's games (REL8, Fingathlon, and any new one)
   Three palettes x light and dark. Each game copies this block into its own page; edit here first, then copy.
     palette: no data-palette = Track, data-palette="navy", data-palette="chalk"
     mode:    data-mode="light" | "dark" | "auto" (auto follows the viewer: data-theme, else prefers-color-scheme)
   Tokens: REL8's set, plus --p0 / --p1 (the two players' colors) and --hi (highlight text: wins, records).
   Default for every game: Chalk (Zoe's pick, 18/10/2026), light or dark following the system (Auto); each game sets
   it before the first paint.
   ==================================================================================================================== */

/* ---- Track: track green + amber baton on cool lane-paper ---------------------------------------------------------- */
:root{
  --ground:#F0F4F2; --surface:#FFFFFF; --surface-2:#E3EAE7; --sunk:#DCE4E1;
  --ink:#13201F; --ink-2:#485855; --muted:#879492; --line:#CAD5D1; --line-strong:#9FB0AB;
  --track:#2E6A5C; --baton:#D0581F; --baton-soft:#F7E3D7; --baton-line:#E8A77F; --on-baton:#FFFFFF;
  --good:#2E6A5C; --on-good:#FFFFFF; --present:#C2982A; --on-present:#141B10;
  --bad:#AE3A34; --on-bad:#FFFFFF; --absent:#8E9C98; --on-absent:#FFFFFF; --focus:#1F6FEB;
  --p0:#D0581F; --p1:#2E6A5C; --hi:#A97C14;
  --shadow:0 1px 0 rgba(19,32,31,.05), 0 6px 18px -12px rgba(19,32,31,.45);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root[data-mode="auto"]:not([data-theme="light"]){
    --ground:#0C1312; --surface:#141E1D; --surface-2:#1D2A28; --sunk:#101A19;
    --ink:#E6EDEB; --ink-2:#A6B5B1; --muted:#76847F; --line:#2B3938; --line-strong:#4A5C58;
    --track:#4F9C87; --baton:#EE8248; --baton-soft:#38210F; --baton-line:#7A4A2A; --on-baton:#FFFFFF;
    --good:#3F8873; --on-good:#FFFFFF; --present:#B2912F; --on-present:#15190F;
    --bad:#C25550; --on-bad:#FFFFFF; --absent:#4A5A56; --on-absent:#E6EDEB; --focus:#6FA8FF;
    --p0:#EE8248; --p1:#4F9C87; --hi:#E3B53C;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-mode="auto"][data-theme="dark"],
:root[data-mode="dark"]{
  --ground:#0C1312; --surface:#141E1D; --surface-2:#1D2A28; --sunk:#101A19;
  --ink:#E6EDEB; --ink-2:#A6B5B1; --muted:#76847F; --line:#2B3938; --line-strong:#4A5C58;
  --track:#4F9C87; --baton:#EE8248; --baton-soft:#38210F; --baton-line:#7A4A2A; --on-baton:#FFFFFF;
  --good:#3F8873; --on-good:#FFFFFF; --present:#B2912F; --on-present:#15190F;
  --bad:#C25550; --on-bad:#FFFFFF; --absent:#4A5A56; --on-absent:#E6EDEB; --focus:#6FA8FF;
  --p0:#EE8248; --p1:#4F9C87; --hi:#E3B53C;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ---- Navy & gold, from petr-sedlacek.com (navy #0B2545, gold #A8842C / #D4AF55) ------------------------------------ */
:root[data-palette="navy"]{
  --ground:#F5F7FA; --surface:#FFFFFF; --surface-2:#ECF0F4; --sunk:#E3E8EE;
  --ink:#0B2545; --ink-2:#47525E; --muted:#5D6B79; --line:#E3E7EC; --line-strong:#B5BFCB;
  --track:#0B2545; --baton:#A8842C; --baton-soft:#FAF6EA; --baton-line:#EBE1CB; --on-baton:#FFFFFF;
  --good:#0B2545; --on-good:#FFFFFF; --present:#D4AF55; --on-present:#1C1607;
  --bad:#A23B3B; --on-bad:#FFFFFF; --absent:#8D98A5; --on-absent:#FFFFFF; --focus:#2F6F9F;
  --p0:#A8842C; --p1:#2F6F9F; --hi:#A8842C;
  --shadow:0 1px 0 rgba(11,37,69,.05), 0 6px 18px -12px rgba(11,37,69,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="navy"][data-mode="auto"]:not([data-theme="light"]){
    --ground:#081626; --surface:#0E2036; --surface-2:#152A45; --sunk:#0B1B2E;
    --ink:#E8EDF3; --ink-2:#AEB9C6; --muted:#7D8A99; --line:#1F3350; --line-strong:#3A5274;
    --track:#2F6F9F; --baton:#D4AF55; --baton-soft:#2A2312; --baton-line:#6B5726; --on-baton:#1C1607;
    --good:#2F6F9F; --on-good:#FFFFFF; --present:#C9A445; --on-present:#1C1607;
    --bad:#C96060; --on-bad:#FFFFFF; --absent:#3A4C64; --on-absent:#E8EDF3; --focus:#7FB0E0;
    --p0:#D4AF55; --p1:#4F93CC; --hi:#D4AF55;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-palette="navy"][data-mode="auto"][data-theme="dark"],
:root[data-palette="navy"][data-mode="dark"]{
  --ground:#081626; --surface:#0E2036; --surface-2:#152A45; --sunk:#0B1B2E;
  --ink:#E8EDF3; --ink-2:#AEB9C6; --muted:#7D8A99; --line:#1F3350; --line-strong:#3A5274;
  --track:#2F6F9F; --baton:#D4AF55; --baton-soft:#2A2312; --baton-line:#6B5726; --on-baton:#1C1607;
  --good:#2F6F9F; --on-good:#FFFFFF; --present:#C9A445; --on-present:#1C1607;
  --bad:#C96060; --on-bad:#FFFFFF; --absent:#3A4C64; --on-absent:#E8EDF3; --focus:#7FB0E0;
  --p0:#D4AF55; --p1:#4F93CC; --hi:#D4AF55;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ---- Chalk: pub chalkboard from Fingathlon (dark); its light version is a whiteboard with dark ink ------------------ */
:root[data-palette="chalk"]{
  --ground:#EEF1EC; --surface:#FFFFFF; --surface-2:#E1E7E1; --sunk:#D8DFD9;
  --ink:#1C2925; --ink-2:#44534B; --muted:#77847C; --line:#C8D1CA; --line-strong:#98A59D;
  --track:#1F78C1; --baton:#D9661C; --baton-soft:#FBE6D6; --baton-line:#EDB48A; --on-baton:#FFFFFF;
  --good:#1F78C1; --on-good:#FFFFFF; --present:#C99A1E; --on-present:#1C1607;
  --bad:#C4422A; --on-bad:#FFFFFF; --absent:#8A968E; --on-absent:#FFFFFF; --focus:#1F6FEB;
  --p0:#D9661C; --p1:#1F78C1; --hi:#B8860B;
  --shadow:0 1px 0 rgba(28,41,37,.05), 0 6px 18px -12px rgba(28,41,37,.4);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root[data-palette="chalk"][data-mode="auto"]:not([data-theme="light"]){
    --ground:#1C2925; --surface:#223029; --surface-2:#27382F; --sunk:#17221F;
    --ink:#F2EFE4; --ink-2:#C4C9BE; --muted:#8E998F; --line:#33453C; --line-strong:#55685D;
    --track:#63BBFF; --baton:#FFA04D; --baton-soft:#3A2A18; --baton-line:#7A5530; --on-baton:#1C2925;
    --good:#63BBFF; --on-good:#10202A; --present:#FFD95A; --on-present:#1C2925;
    --bad:#E0573C; --on-bad:#FFFFFF; --absent:#4A5A52; --on-absent:#F2EFE4; --focus:#FFD95A;
    --p0:#FFA04D; --p1:#63BBFF; --hi:#FFD95A;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-palette="chalk"][data-mode="auto"][data-theme="dark"],
:root[data-palette="chalk"][data-mode="dark"]{
  --ground:#1C2925; --surface:#223029; --surface-2:#27382F; --sunk:#17221F;
  --ink:#F2EFE4; --ink-2:#C4C9BE; --muted:#8E998F; --line:#33453C; --line-strong:#55685D;
  --track:#63BBFF; --baton:#FFA04D; --baton-soft:#3A2A18; --baton-line:#7A5530; --on-baton:#1C2925;
  --good:#63BBFF; --on-good:#10202A; --present:#FFD95A; --on-present:#1C2925;
  --bad:#E0573C; --on-bad:#FFFFFF; --absent:#4A5A52; --on-absent:#F2EFE4; --focus:#FFD95A;
  --p0:#FFA04D; --p1:#63BBFF; --hi:#FFD95A;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 22px -14px rgba(0,0,0,.9);
  color-scheme:dark;
}