/* Ruby's Sudoku — rustig, warm en zacht. */

/* ---------- Lettertypes (zelf gehost, variabel, alleen latin) ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.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;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-latin.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;
}

/* ---------- Thema's ---------- */

/* Versiering van de paginaachtergrond (nooit in het bord). Standaard niets. */
:root {
  --decor: none;            /* stilstaande laag boven de achtergrondkleur */
  --decor-move: none;       /* laag die (heel langzaam) mag bewegen */
  --decor-anim: none;
  --decor-layer: none;      /* block in thema's met een bewegende laag */
}

:root,
[data-theme="zonnig"] {
  --bg: #fff8e7;
  --bg-2: #fdefc8;
  --surface: #ffffff;
  --surface-2: #fff3d6;
  --ink: #3a2e1f;
  --ink-soft: #5e4f3a;
  --line: #ecdcb7;
  --line-strong: #8f7651;
  --accent: #f5c02e;
  --accent-strong: #e0a400;
  --accent-ink: #3a2e1f;
  --accent-soft: #fde8a6;
  --user: #8a5300;
  --given: #3a2e1f;
  /* Selectie: één tint per thema. --sel = gekozen vakje, --peer = rij/kolom/blok. */
  --sel: #f5c02e;
  --sel-ink: #3a2e1f;
  --peer: #fdf1cf;
  --same: #f8de92;
  --same-ring: transparent;
  --hint: #f08a5d;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #c2456b;
  --heart-fill: #fde6ec;
  --heart-edge: #fad3de;
  --heart-ink: #9b2850;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(90 60 10 / 6%), 0 8px 24px rgb(90 60 10 / 8%);
  color-scheme: light;
}

[data-theme="nacht"] {
  --bg: #16141d;
  --bg-2: #1f1b2a;
  --surface: #221f2d;
  --surface-2: #2c2839;
  --ink: #f4ecdd;
  --ink-soft: #cdc1ab;
  --line: #3a3549;
  --line-strong: #8b7f9c;
  --accent: #f5c451;
  --accent-strong: #ffd772;
  --accent-ink: #1d1a12;
  --accent-soft: #45371a;
  --user: #ffd36b;
  --given: #f4ecdd;
  --sel: #f5c451;
  --sel-ink: #1d1a12;
  --peer: #353048;
  --same: #3d3550;
  --same-ring: color-mix(in srgb, #f5c451 65%, transparent);
  --hint: #ff9f7a;
  --wrong: #ff8a7a;
  --wrong-bg: #4a2420;
  --heart: #ff8fb1;
  --heart-fill: #43213a;
  --heart-edge: #6a2b4d;
  --heart-ink: #ffd0de;
  --heart-solved: #c43450;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  color-scheme: dark;
}

[data-theme="gran-canaria"] {
  --bg: #fbf3e6;
  --bg-2: #f6e2c4;
  --surface: #fffdf8;
  --surface-2: #e9f4f4;
  --ink: #183c45;
  --ink-soft: #3f5f65;
  --line: #d9e6e3;
  --line-strong: #2e6f7c;
  --accent: #f29b74;
  --accent-strong: #e2774c;
  --accent-ink: #2a1a10;
  --accent-soft: #fde3d4;
  --user: #17606f;
  --given: #183c45;
  --sel: #74c4c6;
  --sel-ink: #183c45;
  --peer: #d8f0ec;
  --same: #addada;
  --same-ring: transparent;
  --hint: #e2774c;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e5f;
  --heart-fill: #fce4e6;
  --heart-edge: #f9d0d4;
  --heart-ink: #962634;
  --heart-solved: #c3354a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(20 60 70 / 6%), 0 8px 24px rgb(20 60 70 / 9%);
  color-scheme: light;
}

[data-theme="lelie"] {
  --bg: #fbf6f7;
  --bg-2: #f3e3e8;
  --surface: #ffffff;
  --surface-2: #eef4ec;
  --ink: #2f3a30;
  --ink-soft: #4f5d50;
  --line: #e7dbe0;
  --line-strong: #6f8f70;
  --accent: #eab3c4;
  --accent-strong: #d98aa3;
  --accent-ink: #2f2228;
  --accent-soft: #f9dfe7;
  --user: #96305a;
  --given: #2f3a30;
  --sel: #eab3c4;
  --sel-ink: #2f2228;
  --peer: #efe4f2;
  --same: #dde9d9;
  --same-ring: transparent;
  --hint: #5e8c61;
  --wrong: #a8321a;
  --wrong-bg: #fcd9c4;
  --heart: #c2456b;
  --heart-fill: #f9d9e3;
  --heart-edge: #f4c3d3;
  --heart-ink: #8e2850;
  --heart-solved: #c2365a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(60 30 40 / 6%), 0 8px 24px rgb(60 30 40 / 8%);
  color-scheme: light;
}

[data-theme="liefde"] {
  --bg: #fff1f3;
  --bg-2: #ffdfe6;
  --surface: #ffffff;
  --surface-2: #ffe8ee;
  --ink: #4a1f2b;
  --ink-soft: #7a3b4d;
  --line: #f4d3dc;
  --line-strong: #b5576f;
  --accent: #e2557a;
  --accent-strong: #c93a63;
  --accent-ink: #3a0f1d;
  --accent-soft: #ffd5df;
  --user: #93204a;
  --given: #4a1f2b;
  --sel: #e8668a;
  --sel-ink: #2e0a16;
  --peer: #fde6ec;
  --same: #e9d9f3;
  --same-ring: transparent;
  --hint: #d9792f;
  --wrong: #a32a12;
  --wrong-bg: #fdd9c2;
  --heart: #c81e4f;
  --heart-fill: #fbc9cf;
  --heart-edge: #f8b5be;
  --heart-ink: #7a1230;
  --heart-solved: #b8203f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(110 20 50 / 6%), 0 8px 24px rgb(110 20 50 / 9%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23e2557a' fill-opacity='0.09'%3E%3Cpath transform='translate(22 30) rotate(-12) scale(1.1)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(96 18) rotate(10) scale(0.8)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(138 70) rotate(8) scale(1.3)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(58 92) rotate(-6) scale(0.9)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(18 140) rotate(14) scale(0.7)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(110 132) rotate(-10) scale(1.0)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3Cpath transform='translate(74 52) rotate(0) scale(0.6)' d='M0 3C-1.6 1.2-5 -0.6-5-3.3C-5-5.3-3.5-6.6-1.9-6.6C-1-6.6-.3-6.1 0-5.5C.3-6.1 1-6.6 1.9-6.6C3.5-6.6 5-5.3 5-3.3C5-.6 1.6 1.2 0 3Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
  color-scheme: light;
}

[data-theme="sterren"] {
  --bg: #0f1630;
  --bg-2: #1a2550;
  --surface: #18213f;
  --surface-2: #222c52;
  --ink: #e9ecff;
  --ink-soft: #b4bcdf;
  --line: #2b365f;
  --line-strong: #7180bd;
  --accent: #ffd977;
  --accent-strong: #ffe39b;
  --accent-ink: #1a1630;
  --accent-soft: #283463;
  --user: #ffd977;
  --given: #e9ecff;
  --sel: #ffd977;
  --sel-ink: #1a1630;
  --peer: #223061;
  --same: #3a488a;
  --same-ring: color-mix(in srgb, #ffd977 60%, transparent);
  --hint: #ffa77f;
  --wrong: #ff9a9a;
  --wrong-bg: #4d1c33;
  --heart: #ff8fb1;
  --heart-fill: #3e2556;
  --heart-edge: #5b2d63;
  --heart-ink: #ffc9dc;
  --heart-solved: #c43450;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 10 / 35%), 0 8px 24px rgb(0 0 20 / 40%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23e9ecff'%3E%3Ccircle cx='84' cy='40' r='1' fill-opacity='0.35'/%3E%3Ccircle cx='20' cy='212' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='95' cy='151' r='0.6' fill-opacity='0.5'/%3E%3Ccircle cx='11' cy='24' r='1' fill-opacity='0.75'/%3E%3Ccircle cx='19' cy='63' r='0.6' fill-opacity='0.75'/%3E%3Ccircle cx='17' cy='213' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='59' cy='163' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='149' cy='151' r='1' fill-opacity='0.35'/%3E%3Ccircle cx='58' cy='13' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='76' cy='109' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='148' cy='80' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='28' cy='150' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='97' cy='26' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='146' cy='17' r='1.2' fill-opacity='0.5'/%3E%3Ccircle cx='129' cy='176' r='1.2' fill-opacity='0.75'/%3E%3Ccircle cx='200' cy='82' r='1' fill-opacity='0.75'/%3E%3Ccircle cx='94' cy='78' r='0.7' fill-opacity='0.5'/%3E%3Ccircle cx='180' cy='201' r='0.7' fill-opacity='0.35'/%3E%3Ccircle cx='149' cy='78' r='1.2' fill-opacity='0.75'/%3E%3Ccircle cx='89' cy='188' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='157' cy='20' r='0.6' fill-opacity='0.75'/%3E%3Ccircle cx='44' cy='195' r='0.8' fill-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23ffd977' fill-opacity='0.7'%3E%3Cpath transform='translate(40 60) scale(1)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(230 30) scale(0.8)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(160 170) scale(1.1)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(60 250) scale(0.7)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(270 220) scale(0.9)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3C/g%3E%3C/svg%3E") 30px 40px / 300px 300px repeat;
  --decor-anim: twinkle 9s ease-in-out infinite alternate;
  --decor-layer: block;
  color-scheme: dark;
}

[data-theme="volleybal"] {
  --bg: #fffaea;
  --bg-2: #fff0bf;
  --surface: #ffffff;
  --surface-2: #fff5d1;
  --ink: #10265c;
  --ink-soft: #3a4a75;
  --line: #dfe4ef;
  --line-strong: #1d4fa3;
  --accent: #ffcc00;
  --accent-strong: #e6b400;
  --accent-ink: #10265c;
  --accent-soft: #fff0a8;
  --user: #1d4fa3;
  --given: #10265c;
  --sel: #1d4fa3;
  --sel-ink: #ffffff;
  --peer: #e3ebfa;
  --same: #ffe680;
  --same-ring: transparent;
  --hint: #e2774c;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d9435f;
  --heart-fill: #fde0e4;
  --heart-edge: #f9c9d0;
  --heart-ink: #9c1f3c;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(16 38 92 / 6%), 0 8px 24px rgb(16 38 92 / 9%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='240'%3E%3Cdefs%3E%3Cpattern id='n' width='18' height='18' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M0 0H18M0 0V18' stroke='%231d4fa3' stroke-width='1' fill='none'/%3E%3C/pattern%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='240' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='240' fill='url(%23n)' fill-opacity='0.07' mask='url(%23m)'/%3E%3Crect width='100%25' height='5' y='0' fill='%231d4fa3' fill-opacity='0.08'/%3E%3C/svg%3E") 0 0 / 100% 240px no-repeat;
  /* Rugnummer 33, schuin in de hoek rechtsonder (vaste laag, zie body::before hieronder). */
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='220' viewBox='0 0 300 220'%3E%3Cg transform='translate(52 78) rotate(-12) scale(1.25)' fill='%23ffcc00' stroke='%231d4fa3' stroke-width='4' paint-order='stroke'%3E%3Cpath d='M0 0H54L64 10V42L58 50L64 58V90L54 100H0V80H44V60H14V40H44V20H0Z'/%3E%3Cpath transform='translate(76 0)' d='M0 0H54L64 10V42L58 50L64 58V90L54 100H0V80H44V60H14V40H44V20H0Z'/%3E%3C/g%3E%3C/svg%3E") right -34px bottom -26px / 250px auto no-repeat;
  --decor-layer: block;
  color-scheme: light;
}

/* Briefje: een blaadje ruitjespapier, ingevuld met balpen en een markeerstift erbij. */
[data-theme="briefje"] {
  --bg: #fbfaf5;
  --bg-2: #f6f4ea;
  --surface: #ffffff;
  --surface-2: #f2f4fa;
  --ink: #2a2a33;
  --ink-soft: #565868;
  --line: #dfe3ef;
  --line-strong: #3a4a9a;
  --accent: #ffe45c;
  --accent-strong: #3a4a9a;
  --accent-ink: #2a2a33;
  --accent-soft: #fff4b0;
  --user: #2a3d9e;
  --given: #2a2a33;
  --sel: #ffe866;
  --sel-ink: #1d2a6e;
  --peer: #e6eaf9;
  --same: #fff5b8;
  --same-ring: transparent;
  --hint: #ef7d52;
  --wrong: #c2272d;
  --wrong-bg: #fde0dc;
  --heart: #d2384f;
  --heart-fill: #fbe2f2;
  --heart-edge: #f7d2e6;
  --heart-ink: #a3233b;
  --heart-solved: #d2384f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(42 61 158 / 6%), 0 8px 24px rgb(42 61 158 / 7%);
  --decor: linear-gradient(rgb(58 74 154 / 7%) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(58 74 154 / 7%) 1px, transparent 1px) 0 0 / 22px 22px;
  color-scheme: light;
}

/* ---------- Seizoensthema's (te ontgrendelen) ---------- */

[data-theme="lente"] {
  --bg: #f6faf0;
  --bg-2: #e6f2d8;
  --surface: #ffffff;
  --surface-2: #eef6e4;
  --ink: #2b3a22;
  --ink-soft: #4d5e42;
  --line: #dbe8cd;
  --line-strong: #6f8f5a;
  --accent: #f2a7bf;
  --accent-strong: #e07f9f;
  --accent-ink: #3a1f28;
  --accent-soft: #fde3eb;
  --user: #34601f;
  --given: #2b3a22;
  --sel: #a8d585;
  --sel-ink: #1d2e14;
  --peer: #edf6e3;
  --same: #fde9a6;
  --same-ring: transparent;
  --hint: #e07f4f;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e78;
  --heart-fill: #fde0e8;
  --heart-edge: #f9c8d6;
  --heart-ink: #93264d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(40 70 20 / 6%), 0 8px 24px rgb(40 70 20 / 8%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg fill='%23f2a7bf' fill-opacity='0.28'%3E%3Cpath transform='translate(40 50) rotate(30) scale(1.2)' d='M0-6C3-3 3 2 0 5C-3 2-3-3 0-6Z'/%3E%3Cpath transform='translate(190 30) rotate(-40) scale(0.9)' d='M0-6C3-3 3 2 0 5C-3 2-3-3 0-6Z'/%3E%3Cpath transform='translate(120 140) rotate(70) scale(1.1)' d='M0-6C3-3 3 2 0 5C-3 2-3-3 0-6Z'/%3E%3Cpath transform='translate(230 200) rotate(10) scale(0.8)' d='M0-6C3-3 3 2 0 5C-3 2-3-3 0-6Z'/%3E%3Cpath transform='translate(60 220) rotate(-60) scale(1)' d='M0-6C3-3 3 2 0 5C-3 2-3-3 0-6Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 280px 280px repeat;
  color-scheme: light;
}

[data-theme="zomer"] {
  --bg: #fff8ef;
  --bg-2: #ffe6d2;
  --surface: #ffffff;
  --surface-2: #fff0e2;
  --ink: #2d2a26;
  --ink-soft: #57524b;
  --line: #f0e0cc;
  --line-strong: #7d9a5e;
  --accent: #f0607a;
  --accent-strong: #d94661;
  --accent-ink: #2d0d14;
  --accent-soft: #ffdbe1;
  --user: #286029;
  --given: #2d2a26;
  --sel: #7cc47f;
  --sel-ink: #10260f;
  --peer: #e7f5e5;
  --same: #c2e5c3;
  --same-ring: transparent;
  --hint: #ef8a3c;
  --wrong: #b02e20;
  --wrong-bg: #fdd6c3;
  --heart: #e0406a;
  --heart-fill: #fde0e6;
  --heart-edge: #f9c9d3;
  --heart-ink: #9c1f3c;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(90 50 20 / 6%), 0 8px 24px rgb(90 50 20 / 8%);
  --decor: radial-gradient(circle at 92% -4%, rgb(255 196 72 / 32%), rgb(255 160 90 / 10%) 22%, transparent 42%) no-repeat;
  /* Paardenbloempluisjes die heel langzaam schuin omhoog drijven. */
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg transform='translate(40 60) scale(1)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(200 30) scale(0.8)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(130 170) scale(1.15)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(260 230) scale(0.9)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(60 260) scale(0.75)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3Cg transform='translate(290 110) scale(0.7)'%3E%3Cpath d='M0 0L5.5 0.0M0 0L4.4 3.2M0 0L1.7 5.2M0 0L-1.7 5.2M0 0L-4.4 3.2M0 0L-5.5 0.0M0 0L-4.4 -3.2M0 0L-1.7 -5.2M0 0L1.7 -5.2M0 0L4.4 -3.2' stroke='%23c98a4a' stroke-opacity='0.4' stroke-width='0.6'/%3E%3Cg fill='%23ffffff' fill-opacity='0.95'%3E%3Ccircle cx='5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-1.8' cy='5.5' r='0.7'/%3E%3Ccircle cx='-4.7' cy='3.4' r='0.7'/%3E%3Ccircle cx='-5.8' cy='0.0' r='0.7'/%3E%3Ccircle cx='-4.7' cy='-3.4' r='0.7'/%3E%3Ccircle cx='-1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='1.8' cy='-5.5' r='0.7'/%3E%3Ccircle cx='4.7' cy='-3.4' r='0.7'/%3E%3C/g%3E%3Ccircle r='1.3' fill='%23b07a3e' fill-opacity='0.55'/%3E%3Cpath d='M0 1.3V9' stroke='%23b07a3e' stroke-opacity='0.4' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 320px repeat;
  --decor-anim: pluis 90s linear infinite;
  --decor-layer: block;
  color-scheme: light;
}

[data-theme="herfst"] {
  --bg: #fbf3e8;
  --bg-2: #f5dfc4;
  --surface: #fffcf7;
  --surface-2: #f7eadb;
  --ink: #3b2a1e;
  --ink-soft: #5f4a3a;
  --line: #ebdac5;
  --line-strong: #8a5a36;
  --accent: #c8662b;
  --accent-strong: #ad5320;
  --accent-ink: #1f0f05;
  --accent-soft: #f8dcc4;
  --user: #4c5a22;
  --given: #3b2a1e;
  --sel: #d9783d;
  --sel-ink: #1f0f05;
  --peer: #fbe8d7;
  --same: #e4e8c6;
  --same-ring: transparent;
  --hint: #b8551f;
  --wrong: #a3201a;
  --wrong-bg: #f8c6c0;
  --heart: #c23a5c;
  --heart-fill: #fadbe4;
  --heart-edge: #f7cdd9;
  --heart-ink: #8e2246;
  --heart-solved: #b8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(80 45 20 / 6%), 0 8px 24px rgb(80 45 20 / 9%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg transform='translate(50 40) rotate(25) scale(1.1)' fill='%23c8662b' fill-opacity='0.13'%3E%3Cpath d='M0-9C6-5 6 4 0 9C-6 4-6-5 0-9Z'/%3E%3Cpath d='M0-8V10' stroke='%23c8662b' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(210 90) rotate(-35) scale(0.9)' fill='%235f6f2f' fill-opacity='0.13'%3E%3Cpath d='M0-9C6-5 6 4 0 9C-6 4-6-5 0-9Z'/%3E%3Cpath d='M0-8V10' stroke='%235f6f2f' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(130 200) rotate(60) scale(1.2)' fill='%23a0522d' fill-opacity='0.13'%3E%3Cpath d='M0-9C6-5 6 4 0 9C-6 4-6-5 0-9Z'/%3E%3Cpath d='M0-8V10' stroke='%23a0522d' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(250 250) rotate(-10) scale(0.8)' fill='%23c8662b' fill-opacity='0.13'%3E%3Cpath d='M0-9C6-5 6 4 0 9C-6 4-6-5 0-9Z'/%3E%3Cpath d='M0-8V10' stroke='%23c8662b' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/g%3E%3Cg transform='translate(40 250) rotate(40) scale(0.9)' fill='%235f6f2f' fill-opacity='0.13'%3E%3Cpath d='M0-9C6-5 6 4 0 9C-6 4-6-5 0-9Z'/%3E%3Cpath d='M0-8V10' stroke='%235f6f2f' stroke-opacity='0.25' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px repeat;
  color-scheme: light;
}

[data-theme="winter"] {
  --bg: #f3f7fb;
  --bg-2: #e0ebf6;
  --surface: #ffffff;
  --surface-2: #eaf2fa;
  --ink: #1f3047;
  --ink-soft: #44566e;
  --line: #d8e3ef;
  --line-strong: #5f7fa3;
  --accent: #7fb0dc;
  --accent-strong: #5b95c9;
  --accent-ink: #10213a;
  --accent-soft: #d9e8f6;
  --user: #2a5b8c;
  --given: #1f3047;
  --sel: #7fb0dc;
  --sel-ink: #10213a;
  --peer: #dfecf9;
  --same: #c3daf0;
  --same-ring: transparent;
  --hint: #d9874f;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e78;
  --heart-fill: #fde0e8;
  --heart-edge: #f9c8d6;
  --heart-ink: #93264d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(30 50 80 / 6%), 0 8px 24px rgb(30 50 80 / 8%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg transform='translate(30 40) scale(1)' stroke='%237fb0dc' stroke-opacity='0.35' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(170 30) scale(0.7)' stroke='%237fb0dc' stroke-opacity='0.3' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(110 130) scale(0.9)' stroke='%237fb0dc' stroke-opacity='0.35' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(210 190) scale(1.1)' stroke='%237fb0dc' stroke-opacity='0.3' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(50 200) scale(0.6)' stroke='%237fb0dc' stroke-opacity='0.3' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg transform='translate(80 60) scale(0.8)' stroke='%237fb0dc' stroke-opacity='0.45' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(240 150) scale(0.7)' stroke='%237fb0dc' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3Cg transform='translate(140 250) scale(0.9)' stroke='%237fb0dc' stroke-opacity='0.4' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0-5V5M-4.3-2.5L4.3 2.5M-4.3 2.5L4.3-2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px repeat;
  --decor-anim: snow 60s linear infinite;
  --decor-layer: block;
  color-scheme: light;
}

/* ---------- Nieuwe thema's ---------- */

/* Robijn: een juweeldoosje. Fluweel in diep wijnrood, goud, en een geslepen robijn. */
[data-theme="robijn"] {
  --bg: #14040b;
  --bg-2: #2a0716;
  --surface: #22060f;
  --surface-2: #300b18;
  --ink: #fbefe6;
  --ink-soft: #e2c3b4;
  --line: #3d1424;
  --line-strong: #d4a64a;
  --accent: #d9a441;
  --accent-strong: #f0c46a;
  --accent-ink: #1e0e02;
  --accent-soft: #4a0f22;
  --user: #f2c879;
  --given: #fbefe6;
  --sel: #c8143f;
  --sel-ink: #fff4f6;
  --peer: #3a1222;
  --same: #4a1828;
  --same-ring: color-mix(in srgb,#d9a441 75%,transparent);
  --hint: #ffb070;
  --wrong: #ffd6a6;
  --wrong-bg: #6b2a08;
  --heart: #f0c46a;
  --heart-fill: #3d1a4a;
  --heart-edge: #55245f;
  --heart-ink: #f4d0ff;
  --heart-solved: #c43450;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(40 0 12 / 50%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.1 0 0 0 0 0.25 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat, radial-gradient(70% 45% at 50% 0%, rgb(200 20 63 / 28%), transparent 70%) no-repeat;
  color-scheme: dark;
}

/* RubyxCube: elk blok een eigen zachte kubuskleur (zie .cell[data-b] verderop). */
[data-theme="rubyxcube"] {
  --bg: #f2f3f7;
  --bg-2: #e3e6ee;
  --surface: #ffffff;
  --surface-2: #eef0f5;
  --ink: #1b1d2a;
  --ink-soft: #454859;
  --line: #d3d6df;
  --line-strong: #1b1d2a;
  --accent: #ffcf1f;
  --accent-strong: #1e5bd6;
  --accent-ink: #1b1d2a;
  --accent-soft: #fff1b3;
  --user: #1f48b0;
  --given: #1b1d2a;
  --sel: #1b1d2a;
  --sel-ink: #ffffff;
  --peer: #e1e4ee;
  --same: #dfe2ea;
  --same-ring: #1b1d2a;
  --hint: #f2711c;
  --wrong: #ffffff;
  --wrong-bg: #c8174f;
  --heart: #d0336a;
  --heart-fill: #f6dcf3;
  --heart-edge: #efc6eb;
  --heart-ink: #7d1650;
  --heart-solved: #b8204f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(27 29 42 / 8%), 0 8px 24px rgb(27 29 42 / 9%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Crect x='14' y='18' width='16' height='16' rx='3.5' fill='%23e8322d' fill-opacity='0.13' transform='rotate(-7 22 26)'/%3E%3Crect x='92' y='40' width='16' height='16' rx='3.5' fill='%23ffcf1f' fill-opacity='0.13' transform='rotate(-1 100 48)'/%3E%3Crect x='160' y='12' width='16' height='16' rx='3.5' fill='%231e5bd6' fill-opacity='0.13' transform='rotate(-5 168 20)'/%3E%3Crect x='40' y='96' width='16' height='16' rx='3.5' fill='%232aa54a' fill-opacity='0.13' transform='rotate(-5 48 104)'/%3E%3Crect x='128' y='110' width='16' height='16' rx='3.5' fill='%23ff8a1c' fill-opacity='0.13' transform='rotate(11 136 118)'/%3E%3Crect x='186' y='84' width='16' height='16' rx='3.5' fill='%23c9ccd6' fill-opacity='0.13' transform='rotate(-3 194 92)'/%3E%3Crect x='70' y='160' width='16' height='16' rx='3.5' fill='%231e5bd6' fill-opacity='0.13' transform='rotate(-5 78 168)'/%3E%3Crect x='150' y='170' width='16' height='16' rx='3.5' fill='%23e8322d' fill-opacity='0.13' transform='rotate(-15 158 178)'/%3E%3Crect x='12' y='190' width='16' height='16' rx='3.5' fill='%23ff8a1c' fill-opacity='0.13' transform='rotate(9 20 198)'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
  color-scheme: light;
}

/* Koffiemonster: espresso, crème en melkschuim. */
[data-theme="koffiemonster"] {
  --bg: #f5ede3;
  --bg-2: #ead7c0;
  --surface: #fffaf3;
  --surface-2: #f3e5d3;
  --ink: #2f1d10;
  --ink-soft: #5e4433;
  --line: #e9d7c2;
  --line-strong: #6f4527;
  --accent: #c98b4f;
  --accent-strong: #a96a31;
  --accent-ink: #24130a;
  --accent-soft: #f2dcc0;
  --user: #7b4320;
  --given: #2f1d10;
  --sel: #d9a46b;
  --sel-ink: #24130a;
  --peer: #f3e3d0;
  --same: #ecd2b0;
  --same-ring: transparent;
  --hint: #c9662f;
  --wrong: #a3201a;
  --wrong-bg: #f9cfc6;
  --heart: #c2456b;
  --heart-fill: #fadbe6;
  --heart-edge: #f6c8d7;
  --heart-ink: #8e2246;
  --heart-solved: #b8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(80 45 20 / 7%), 0 8px 24px rgb(80 45 20 / 9%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg transform='translate(30 40) rotate(20) scale(1)'%3E%3Cellipse rx='7' ry='10' fill='%236f4527' fill-opacity='0.13'/%3E%3Cpath d='M0-9C-3-4 3 4 0 9' stroke='%23f5ede3' stroke-opacity='0.9' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(200 30) rotate(-30) scale(0.8)'%3E%3Cellipse rx='7' ry='10' fill='%236f4527' fill-opacity='0.13'/%3E%3Cpath d='M0-9C-3-4 3 4 0 9' stroke='%23f5ede3' stroke-opacity='0.9' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(120 150) rotate(60) scale(1.1)'%3E%3Cellipse rx='7' ry='10' fill='%236f4527' fill-opacity='0.13'/%3E%3Cpath d='M0-9C-3-4 3 4 0 9' stroke='%23f5ede3' stroke-opacity='0.9' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(230 210) rotate(10) scale(0.9)'%3E%3Cellipse rx='7' ry='10' fill='%236f4527' fill-opacity='0.13'/%3E%3Cpath d='M0-9C-3-4 3 4 0 9' stroke='%23f5ede3' stroke-opacity='0.9' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(50 220) rotate(-50) scale(0.85)'%3E%3Cellipse rx='7' ry='10' fill='%236f4527' fill-opacity='0.13'/%3E%3Cpath d='M0-9C-3-4 3 4 0 9' stroke='%23f5ede3' stroke-opacity='0.9' stroke-width='1.4' fill='none'/%3E%3C/g%3E%3Ccircle cx='170' cy='110' r='26' fill='none' stroke='%23a96a31' stroke-opacity='0.08' stroke-width='5'/%3E%3Ccircle cx='174' cy='106' r='26' fill='none' stroke='%23a96a31' stroke-opacity='0.05' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  color-scheme: light;
}

/* Gitaar: warm hout met nerf, snaren als dunne lijnen en een plectrum als selectie. */
[data-theme="gitaar"] {
  --bg: #ecd5b0;
  --bg-2: #f6e5c6;
  --surface: #fbf0dc;
  --surface-2: #f3e2c3;
  --ink: #2b1a0c;
  --ink-soft: #5a3f26;
  --line: #d2bb94;
  --line-strong: #5b351a;
  --accent: #e8932e;
  --accent-strong: #b8641a;
  --accent-ink: #2b1a0c;
  --accent-soft: #f8deb2;
  --user: #1d5a63;
  --given: #2b1a0c;
  --sel: #f0a63a;
  --sel-ink: #2b1a0c;
  --peer: #f4e0bc;
  --same: #efd093;
  --same-ring: transparent;
  --hint: #c25a1c;
  --wrong: #a3201a;
  --wrong-bg: #f6c9c0;
  --heart: #c23a5c;
  --heart-fill: #fadbe4;
  --heart-edge: #f6c9d6;
  --heart-ink: #8e2246;
  --heart-solved: #b8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(80 45 15 / 8%), 0 8px 24px rgb(80 45 15 / 12%);
  --decor: repeating-linear-gradient(91deg, rgb(120 70 25 / 0%) 0 14px, rgb(120 70 25 / 7%) 15px 16px, rgb(120 70 25 / 0%) 17px 31px), repeating-linear-gradient(89deg, rgb(255 240 210 / 0%) 0 40px, rgb(255 240 210 / 22%) 41px 46px, rgb(255 240 210 / 0%) 47px 90px), repeating-linear-gradient(90.5deg, rgb(90 50 15 / 0%) 0 63px, rgb(90 50 15 / 6%) 64px 66px, rgb(90 50 15 / 0%) 67px 137px);
  color-scheme: light;
}

/* Beachvolleybal: zand, zee en zon, met een zachte golf onderaan. */
[data-theme="beachvolleybal"] {
  --bg: #fff5dc;
  --bg-2: #ffe2a3;
  --surface: #fffdf6;
  --surface-2: #e6f6f8;
  --ink: #0f3546;
  --ink-soft: #3b5d6c;
  --line: #ecdfc2;
  --line-strong: #1f7a99;
  --accent: #ffb22e;
  --accent-strong: #e08a00;
  --accent-ink: #0f3546;
  --accent-soft: #ffe7b0;
  --user: #0a5e7c;
  --given: #0f3546;
  --sel: #49bfe0;
  --sel-ink: #082a38;
  --peer: #e2f4fb;
  --same: #fde3a0;
  --same-ring: transparent;
  --hint: #ef6f3c;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #e0406a;
  --heart-fill: #fde0e8;
  --heart-edge: #f9c9d6;
  --heart-ink: #9c1f3c;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(15 60 80 / 6%), 0 8px 24px rgb(15 60 80 / 9%);
  --decor: radial-gradient(circle at 88% -2%, rgb(255 200 70 / 55%) 0 46px, rgb(255 190 80 / 18%) 47px, transparent 190px) no-repeat;
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='90' viewBox='0 0 480 90'%3E%3Cpath d='M0 34C60 14 120 14 180 34S300 54 360 34 450 14 480 24V90H0Z' fill='%2349bfe0' fill-opacity='0.22'/%3E%3Cpath d='M0 52C70 34 130 36 200 52S330 70 400 52 460 40 480 46V90H0Z' fill='%231f7a99' fill-opacity='0.2'/%3E%3Cpath d='M0 34C60 14 120 14 180 34S300 54 360 34 450 14 480 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2'/%3E%3C/svg%3E") 0 100% / 480px 90px repeat-x;
  --decor-anim: waves 24s linear infinite;
  --decor-layer: block;
  color-scheme: light;
}

/* Dagverloop: de kleuren schuiven met de dag mee (js/fx/dagverloop.js zet ze per kwartier). Dit is de middag. */
[data-theme="dagverloop"] {
  --bg: #eef5ff;
  --bg-2: #d5e7ff;
  --surface: #ffffff;
  --surface-2: #e8f1fc;
  --ink: #142a4c;
  --ink-soft: #3e5372;
  --line: #d5e1f0;
  --line-strong: #4b6fa6;
  --accent: #7db6f2;
  --accent-strong: #3f86d6;
  --accent-ink: #0c2242;
  --accent-soft: #d6e8fc;
  --user: #1f57a8;
  --given: #142a4c;
  --sel: #7db6f2;
  --sel-ink: #0c2242;
  --peer: #e1eefc;
  --same: #bad4f4;
  --same-ring: transparent;
  --hint: #e07a3f;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e78;
  --heart-fill: #efdcfa;
  --heart-edge: #e5cbf7;
  --heart-ink: #6e2a7a;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(20 50 90 / 6%), 0 8px 24px rgb(20 50 90 / 9%);
  --decor: radial-gradient(circle at 86% -4%, color-mix(in srgb, var(--accent) 45%, transparent) 0 40px, color-mix(in srgb, var(--accent) 14%, transparent) 41px, transparent 200px) no-repeat;
  color-scheme: light;
}

/* Krant: vergeeld papier, zwart en grijs, dunne lijnen zoals de sudoku achterin. */
[data-theme="krant"] {
  --bg: #f2ead4;
  --bg-2: #e8dcbc;
  --surface: #f9f4e6;
  --surface-2: #ede4cc;
  --ink: #1b1a17;
  --ink-soft: #4a463e;
  --line: #a59f90;
  --line-strong: #1b1a17;
  --accent: #6a665e;
  --accent-strong: #1b1a17;
  --accent-ink: #f9f4e6;
  --accent-soft: #e4dbc3;
  --user: #4d4943;
  --given: #141311;
  --sel: #34322d;
  --sel-ink: #f9f4e6;
  --peer: #e6ddc2;
  --same: #d9cfb3;
  --same-ring: #1b1a17;
  --hint: #8a5a2b;
  --wrong: #9e1b1b;
  --wrong-bg: #f0d2c6;
  --heart: #a8283f;
  --heart-fill: #e8dcef;
  --heart-edge: #ddcbe7;
  --heart-ink: #5e2a5e;
  --heart-solved: #a8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(40 35 20 / 8%), 0 6px 18px rgb(40 35 20 / 7%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
  color-scheme: light;
}

/* Krijtbord: een donkergroen schoolbord met krijtvegen en ruwe witte lijnen. */
[data-theme="krijtbord"] {
  --bg: #1d362b;
  --bg-2: #284a3a;
  --surface: #234236;
  --surface-2: #2c5043;
  --ink: #f3f1e7;
  --ink-soft: #cdd6c8;
  --line: #3f6152;
  --line-strong: #e6e3d6;
  --accent: #f3d35b;
  --accent-strong: #f8e08a;
  --accent-ink: #1d2a1f;
  --accent-soft: #3d5a3c;
  --user: #fff6d8;
  --given: #ffffff;
  --sel: #f3d35b;
  --sel-ink: #1d2a1f;
  --peer: #315b4c;
  --same: #3f6a59;
  --same-ring: color-mix(in srgb, #f3d35b 60%, transparent);
  --hint: #ffb38a;
  --wrong: #ffb4a6;
  --wrong-bg: #5b2c2a;
  --heart: #ff9fbf;
  --heart-fill: #4b2c44;
  --heart-edge: #613956;
  --heart-ink: #ffd6e6;
  --heart-solved: #c43450;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='700' viewBox='0 0 600 700'%3E%3Cfilter id='b' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cg fill='%23ffffff' filter='url(%23b)'%3E%3Cellipse cx='140' cy='120' rx='150' ry='26' fill-opacity='0.06' transform='rotate(-8 140 120)'/%3E%3Cellipse cx='470' cy='300' rx='130' ry='22' fill-opacity='0.05' transform='rotate(6 470 300)'/%3E%3Cellipse cx='200' cy='560' rx='170' ry='30' fill-opacity='0.05' transform='rotate(-4 200 560)'/%3E%3Cellipse cx='520' cy='640' rx='90' ry='18' fill-opacity='0.04'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 700px repeat;
  color-scheme: dark;
}

/* Game Boy: alleen de vier groentinten, vierkante hoeken en pixelcijfers. */
[data-theme="gameboy"] {
  --bg: #88c070;
  --bg-2: #88c070;
  --surface: #e0f8d0;
  --surface-2: #88c070;
  --ink: #081820;
  --ink-soft: #081820;
  --line: #88c070;
  --line-strong: #081820;
  --accent: #88c070;
  --accent-strong: #081820;
  --accent-ink: #081820;
  --accent-soft: #e0f8d0;
  --user: #081820;
  --given: #081820;
  --sel: #081820;
  --sel-ink: #e0f8d0;
  --peer: #88c070;
  --same: #88c070;
  --same-ring: #081820;
  --hint: #346856;
  --wrong: #e0f8d0;
  --wrong-bg: #346856;
  --heart: #346856;
  --heart-fill: #e0f8d0;
  --heart-edge: #88c070;
  --heart-ink: #081820;
  --heart-solved: #346856;
  --heart-solved-ink: #e0f8d0;
  --shadow: 4px 4px 0 #346856;
  color-scheme: light;
}

/* Sporthal (geheim): een lichte parketvloer met gekleurde veldlijnen, rode
   scorebordcijfers (zie verderop) en een scorebordje om de timer. Een fout is
   paars met een randje, zodat hij niet op een (rood) ingevuld cijfer lijkt. */
[data-theme="sporthal"] {
  --bg: #f0dcb4;
  --bg-2: #f8ead0;
  --surface: #fffaf0;
  --surface-2: #f6e8cc;
  --ink: #2a1f14;
  --ink-soft: #5a4632;
  --line: #ecdcbc;
  --line-strong: #2f6fd1;
  --accent: #ffcf33;
  --accent-strong: #d99a00;
  --accent-ink: #2a1f14;
  --accent-soft: #ffefb5;
  --user: #b01f18;
  --given: #2a1f14;
  --sel: #2f6fd1;
  --sel-ink: #ffffff;
  --peer: #e2ebfa;
  --same: #ffe27a;
  --same-ring: transparent;
  --hint: #e0662a;
  --wrong: #5b2bb0;
  --wrong-bg: #eedcff;
  --heart: #c2365a;
  --heart-fill: #ffe0e2;
  --heart-edge: #fbcdd2;
  --heart-ink: #8f1f3d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(90 60 20 / 8%), 0 8px 24px rgb(90 60 20 / 12%);
  --decor: repeating-linear-gradient(90deg, transparent 0 55px, rgb(140 90 30 / 12%) 55px 56px), repeating-linear-gradient(90deg, transparent 0 56px, rgb(170 110 40 / 6%) 56px 112px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900' viewBox='0 0 600 900' fill='none' stroke-width='5'%3E%3Cpath d='M0 640H600' stroke='%232f6fd1' stroke-opacity='0.35'/%3E%3Cpath d='M-40 900A340 340 0 0 1 640 900' stroke='%23e0662a' stroke-opacity='0.3'/%3E%3Cpath d='M70 0V900' stroke='%23ffcf33' stroke-opacity='0.45'/%3E%3Cpath d='M0 160H600' stroke='%232fa35a' stroke-opacity='0.25'/%3E%3C/svg%3E") 50% 0 / 600px 900px no-repeat;
  color-scheme: light;
}

/* Kampvuur (geheim): een sterrenhemel, onderaan een warm flakkerende gloed met
   opstijgende vonkjes (js/fx/kampvuur.js). Het gekozen vakje is een marshmallow
   die langzaam goudbruin kleurt. Een fout is roze met een randje. */
[data-theme="kampvuur"] {
  --bg: #120d16;
  --bg-2: #1c1424;
  --surface: #211a20;
  --surface-2: #2c2229;
  --ink: #f8ead9;
  --ink-soft: #d2bca7;
  --line: #3a2e34;
  --line-strong: #a5714c;
  --accent: #ff9a3c;
  --accent-strong: #ffb866;
  --accent-ink: #2a1205;
  --accent-soft: #4a2c16;
  --user: #ffc37e;
  --given: #f8ead9;
  --sel: #fff1df;
  --sel-ink: #3a1d0c;
  --peer: #3c2a27;
  --same: #6a4521;
  --same-ring: transparent;
  --hint: #ff7a3c;
  --wrong: #ff8fae;
  --wrong-bg: #5a1430;
  --heart: #ff7397;
  --heart-fill: #3e2440;
  --heart-edge: #4f2c50;
  --heart-ink: #ffd3df;
  --heart-solved: #c8325a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* Preitaart (geheim): een rand van bladerdeeg met ruitjespatroon om het bord,
   vakjes in romig eigeel en het gekozen vakje als een groen preiringetje. Wat Ruby
   invult is preigroen. Bij het oplossen gaat er een punt uit (js/fx/preitaart.js). */
[data-theme="preitaart"] {
  --bg: #f3e8d2;
  --bg-2: #fbf3e2;
  --surface: #fff3c9;
  --surface-2: #fbe7b4;
  --ink: #3b2a12;
  --ink-soft: #63502c;
  --line: #ecd496;
  --line-strong: #b07a2a;
  --accent: #eaa93a;
  --accent-strong: #b97a1c;
  --accent-ink: #2e1d06;
  --accent-soft: #fde2a2;
  --user: #285f1a;
  --given: #3b2a12;
  --sel: #d3ebaf;
  --sel-ink: #1f3d10;
  --peer: #f8dc93;
  --same: #f5d27e;
  --same-ring: #b97a1c;
  --hint: #cf6a2a;
  --wrong: #a8321a;
  --wrong-bg: #ffd2c7;
  --heart: #c2456b;
  --heart-fill: #ffe2ea;
  --heart-edge: #fbd0dc;
  --heart-ink: #8f1f3d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(110 70 10 / 8%), 0 8px 24px rgb(110 70 10 / 12%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 24H48M24 0V48' stroke='%23c9a46a' stroke-opacity='0.13' stroke-width='10'/%3E%3C/svg%3E") 0 0 / 48px 48px repeat;
  color-scheme: light;
}

/* Vertrekhal (geheim): een donker vertrekbord. Elk vakje is een klapbordje met een
   naad in het midden, ingevulde cijfers zijn Solari-geel en ratelen even door
   (js/fx/vertrekhal.js). Bovenaan LAS PALMAS · ON TIME. */
[data-theme="vertrekhal"] {
  --bg: #0c1016;
  --bg-2: #141a23;
  --surface: #181d25;
  --surface-2: #222833;
  --ink: #f1f0e8;
  --ink-soft: #c2c4c4;
  --line: #2b323d;
  --line-strong: #6b7685;
  --accent: #ffd23f;
  --accent-strong: #ffe07a;
  --accent-ink: #141414;
  --accent-soft: #3d3418;
  --user: #ffd23f;
  --given: #f1f0e8;
  --sel: #ffd23f;
  --sel-ink: #141414;
  --peer: #2c3442;
  --same: #4d4422;
  --same-ring: transparent;
  --hint: #5cc8ff;
  --wrong: #ff8f80;
  --wrong-bg: #521c1a;
  --heart: #ff7a9a;
  --heart-fill: #3a2340;
  --heart-edge: #4c2c52;
  --heart-ink: #ffd3df;
  --heart-solved: #c8325a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

/* Onzichtbare inkt (geheim): donker papier en een uv-lampje. Rond het gekozen vakje
   (de rij, kolom en het blok) gloeien de cijfers paars op; de rest is iets zwakker,
   maar haalt overal nog 4.5:1 (de gloed is extra). Een fout is oranje met een randje. */
[data-theme="onzichtbare-inkt"] {
  --bg: #110f18;
  --bg-2: #1a1625;
  --surface: #191622;
  --surface-2: #231e2f;
  --ink: #ece6f7;
  --ink-soft: #bcb3cf;
  --line: #2c2739;
  --line-strong: #6b5f8a;
  --accent: #b37bff;
  --accent-strong: #cfa6ff;
  --accent-ink: #160a28;
  --accent-soft: #34254f;
  --user: #c6b2f2;
  --given: #b8b2c8;
  --sel: #b37bff;
  --sel-ink: #160a28;
  --peer: #2b2342;
  --same: #44336a;
  --same-ring: transparent;
  --hint: #5ce1e6;
  --wrong: #ffb27a;
  --wrong-bg: #4a2a12;
  --heart: #ff7aa8;
  --heart-fill: #3f2131;
  --heart-edge: #512a3f;
  --heart-ink: #ffd3e2;
  --heart-solved: #c8325a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* Wandeltijd (geheim): grasgroen en warm. Af en toe kwispelt er een staartje om de
   hoek (js/fx/wandeltijd.js), het gekozen vakje is een pootafdruk en wat Ruby
   invult is hondenbruin. */
[data-theme="wandeltijd"] {
  --bg: #edf4dd;
  --bg-2: #f8fbee;
  --surface: #fffdf5;
  --surface-2: #eff5e0;
  --ink: #24331a;
  --ink-soft: #4f5f3f;
  --line: #e1e9cf;
  --line-strong: #6b8f3e;
  --accent: #8cc152;
  --accent-strong: #5a9628;
  --accent-ink: #182a0a;
  --accent-soft: #dcefc3;
  --user: #7a4416;
  --given: #24331a;
  --sel: #e8bc84;
  --sel-ink: #2a1a08;
  --peer: #e3f0cd;
  --same: #c6e09c;
  --same-ring: transparent;
  --hint: #e0874f;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #c2456b;
  --heart-fill: #fde0ea;
  --heart-edge: #f9cbdb;
  --heart-ink: #8f1f3d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(40 70 20 / 7%), 0 8px 24px rgb(40 70 20 / 10%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90' viewBox='0 0 600 90'%3E%3Cpath d='M0 40C100 20 200 30 300 38S500 50 600 34V90H0Z' fill='%23a8cf72' fill-opacity='0.35'/%3E%3Cpath d='M0 60C120 48 240 56 360 62S520 66 600 56V90H0Z' fill='%238cc152' fill-opacity='0.35'/%3E%3C/svg%3E") 50% 100% / 600px 90px repeat-x fixed;
  color-scheme: light;
}

/* Middernacht (geheim): dieppaars, met een grote, zachte klok achter het bord
   waarvan de wijzers echt meelopen (js/fx/middernacht.js). Goud voor de wijzers,
   wat Ruby invult en het gekozen vakje. Een fout is roze met een randje. */
[data-theme="middernacht"] {
  --bg: #170e2b;
  --bg-2: #24154a;
  --surface: #211536;
  --surface-2: #2c1e47;
  --ink: #f3ecff;
  --ink-soft: #c9bce4;
  --line: #36285a;
  --line-strong: #8a74c0;
  --accent: #e8c46a;
  --accent-strong: #f3d68e;
  --accent-ink: #1f1402;
  --accent-soft: #42345a;
  --user: #ffd98a;
  --given: #f3ecff;
  --sel: #e8c46a;
  --sel-ink: #1f1402;
  --peer: #37244f;
  --same: #4f3d70;
  --same-ring: transparent;
  --hint: #7fd8ff;
  --wrong: #ff9db0;
  --wrong-bg: #5a1838;
  --heart: #ff7aa8;
  --heart-fill: #4a1f3c;
  --heart-edge: #5a2748;
  --heart-ink: #ffd3e2;
  --heart-solved: #c8325a;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* Zonnebloem: geel en bladgroen, met een bloem op het startscherm die meegroeit. */
[data-theme="zonnebloem"] {
  --bg: #fffae3;
  --bg-2: #ffeea0;
  --surface: #ffffff;
  --surface-2: #f1f6e2;
  --ink: #2b3214;
  --ink-soft: #4e5a2c;
  --line: #ebe3b9;
  --line-strong: #5c7a28;
  --accent: #ffc816;
  --accent-strong: #e0a400;
  --accent-ink: #2e2300;
  --accent-soft: #fff0b0;
  --user: #385f10;
  --given: #2b3214;
  --sel: #ffd23c;
  --sel-ink: #2e2300;
  --peer: #f2f8e4;
  --same: #dcedb8;
  --same-ring: transparent;
  --hint: #e0821e;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e78;
  --heart-fill: #fde0e8;
  --heart-edge: #f9c8d6;
  --heart-ink: #93264d;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(80 70 10 / 6%), 0 8px 24px rgb(80 70 10 / 8%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg transform='translate(36 44) scale(1)'%3E%3Cg fill='%23ffc816' fill-opacity='0.32'%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(36)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(108)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(252)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(288)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(324)'/%3E%3C/g%3E%3Ccircle r='4' fill='%237a5418' fill-opacity='0.25'/%3E%3C/g%3E%3Cg transform='translate(196 26) scale(0.75)'%3E%3Cg fill='%23ffc816' fill-opacity='0.32'%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(36)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(108)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(252)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(288)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(324)'/%3E%3C/g%3E%3Ccircle r='4' fill='%237a5418' fill-opacity='0.25'/%3E%3C/g%3E%3Cg transform='translate(128 140) scale(1.15)'%3E%3Cg fill='%23ffc816' fill-opacity='0.32'%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(36)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(108)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(252)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(288)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(324)'/%3E%3C/g%3E%3Ccircle r='4' fill='%237a5418' fill-opacity='0.25'/%3E%3C/g%3E%3Cg transform='translate(232 212) scale(0.85)'%3E%3Cg fill='%23ffc816' fill-opacity='0.32'%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(36)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(108)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(252)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(288)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(324)'/%3E%3C/g%3E%3Ccircle r='4' fill='%237a5418' fill-opacity='0.25'/%3E%3C/g%3E%3Cg transform='translate(48 222) scale(0.7)'%3E%3Cg fill='%23ffc816' fill-opacity='0.32'%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(36)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(108)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(180)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(252)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(288)'/%3E%3Cellipse cx='0' cy='-7' rx='2.6' ry='5' transform='rotate(324)'/%3E%3C/g%3E%3Ccircle r='4' fill='%237a5418' fill-opacity='0.25'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  color-scheme: light;
}

/* RubyxCube: elk 3×3-blok een eigen zachte kubuskleur (ui.js zet data-b op elk vakje).
   Geel rood groen / blauw wit oranje / groen oranje blauw: buren verschillen altijd.
   Per blok een eigen tint voor het vakje, de buren (rij/kolom/blok) en gelijke cijfers;
   selectie (antraciet) en fout (framboos) zijn op elke kleur goed te zien. */
[data-theme="rubyxcube"] .cell[data-b="0"] { --surface: #fff4c2; --peer: #ffe68a; --same: #ffdb5c; }
[data-theme="rubyxcube"] .cell[data-b="1"] { --surface: #ffe0db; --peer: #ffc7bf; --same: #ffb0a6; }
[data-theme="rubyxcube"] .cell[data-b="2"] { --surface: #dbf3e1; --peer: #bfe9cb; --same: #a6dfb6; }
[data-theme="rubyxcube"] .cell[data-b="3"] { --surface: #e0eaff; --peer: #c6d7ff; --same: #adc5ff; }
[data-theme="rubyxcube"] .cell[data-b="4"] { --surface: #ffffff; --peer: #e1e4ee; --same: #dfe2ea; }
[data-theme="rubyxcube"] .cell[data-b="5"] { --surface: #ffe6cf; --peer: #ffd3a8; --same: #ffc285; }
[data-theme="rubyxcube"] .cell[data-b="6"] { --surface: #dbf3e1; --peer: #bfe9cb; --same: #a6dfb6; }
[data-theme="rubyxcube"] .cell[data-b="7"] { --surface: #ffe6cf; --peer: #ffd3a8; --same: #ffc285; }
[data-theme="rubyxcube"] .cell[data-b="8"] { --surface: #e0eaff; --peer: #c6d7ff; --same: #adc5ff; }

/* Hoog contrast: wit, zwart en één felle kleur, voor fel zonlicht of in de sporthal. */
[data-theme="hoog-contrast"] {
  --bg: #ffffff;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #efefef;
  --ink: #000000;
  --ink-soft: #222222;
  --line: #6e6e6e;
  --line-strong: #000000;
  --accent: #ffd400;
  --accent-strong: #000000;
  --accent-ink: #000000;
  --accent-soft: #fff1a6;
  --user: #002a8f;
  --given: #000000;
  --sel: #ffd400;
  --sel-ink: #000000;
  --peer: #e0e0e0;
  --same: #d6e6ff;
  --same-ring: #000000;
  --hint: #b23c00;
  --wrong: #8b0000;
  --wrong-bg: #ffdede;
  --heart: #b0003a;
  --heart-fill: #f0dcff;
  --heart-edge: #e4c6ff;
  --heart-ink: #4a0028;
  --heart-solved: #a3002f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 0 0 1px #000000;
  color-scheme: light;
}

/* ---------- Natuur ---------- */

/* Waddenzee: grijsblauw wad, zilverig licht en een lage horizon met een streepje zee. */
[data-theme="waddenzee"] {
  --bg: #eef3f5;
  --bg-2: #f9fbfc;
  --surface: #fbfdfe;
  --surface-2: #e6eef2;
  --ink: #1f3440;
  --ink-soft: #455b67;
  --line: #d6e1e7;
  --line-strong: #5f7d8c;
  --accent: #8fb3c4;
  --accent-strong: #4f7f95;
  --accent-ink: #14262f;
  --accent-soft: #dce9ef;
  --user: #27546c;
  --given: #1f3440;
  --sel: #8fb3c4;
  --sel-ink: #14262f;
  --peer: #d8e6ee;
  --same: #b3cedd;
  --same-ring: transparent;
  --hint: #d9874f;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #c2456b;
  --heart-fill: #f6dde6;
  --heart-edge: #efcadb;
  --heart-ink: #8e2246;
  --heart-solved: #b8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(30 55 70 / 7%), 0 8px 24px rgb(30 55 70 / 9%);
  --decor: radial-gradient(130% 50% at 50% 0%, rgb(255 255 255 / 80%), transparent 70%) no-repeat;
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='70' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Crect y='0' width='600' height='70' fill='%23c9d6dd'/%3E%3Crect y='0' width='600' height='7' fill='%237f9fb0'/%3E%3Crect y='7' width='600' height='2' fill='%23f4f8fa' fill-opacity='0.8'/%3E%3Cpath d='M0 26C80 22 160 30 240 25S420 21 600 27V70H0Z' fill='%23b6c6cf'/%3E%3Cpath d='M30 40c40-3 70 2 110 0M260 48c50-4 90 1 140-1M430 36c30-2 60 1 90-1' stroke='%23e7eef2' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E") 0 100% / 100% 70px no-repeat;
  --decor-layer: block;
  color-scheme: light;
}

/* Bos: mosgroen, met varens in de hoeken en zonlicht door de bladeren (js/fx/bos.js). */
[data-theme="bos"] {
  --bg: #f1f4e9;
  --bg-2: #e2ead2;
  --surface: #fdfef9;
  --surface-2: #ecf1df;
  --ink: #23301c;
  --ink-soft: #4a5940;
  --line: #dde5cf;
  --line-strong: #55703f;
  --accent: #8fb35a;
  --accent-strong: #5d7f32;
  --accent-ink: #1d2a12;
  --accent-soft: #e1ecc9;
  --user: #3d6120;
  --given: #23301c;
  --sel: #a9c873;
  --sel-ink: #1d2a12;
  --peer: #eaf1da;
  --same: #d4e5b3;
  --same-ring: transparent;
  --hint: #c8742f;
  --wrong: #a3201a;
  --wrong-bg: #f8cfc6;
  --heart: #c23a5c;
  --heart-fill: #fadbe4;
  --heart-edge: #f6c9d6;
  --heart-ink: #8e2246;
  --heart-solved: #b8283f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(40 60 20 / 7%), 0 8px 24px rgb(40 60 20 / 9%);
  --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.42'%3E%3Cpath d='M6 200C60 160 120 80 170 18' stroke='%2355703f' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath transform='translate(10.0 190.0) rotate(-35) scale(1.00)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(10.0 190.0) rotate(55) scale(1.00)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(25.0 174.8) rotate(-37) scale(0.93)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(25.0 174.8) rotate(53) scale(0.93)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(40.0 159.4) rotate(-39) scale(0.86)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(40.0 159.4) rotate(51) scale(0.86)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(55.0 143.7) rotate(-41) scale(0.79)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(55.0 143.7) rotate(49) scale(0.79)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(70.0 127.6) rotate(-43) scale(0.72)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(70.0 127.6) rotate(47) scale(0.72)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(85.0 111.0) rotate(-45) scale(0.65)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(85.0 111.0) rotate(45) scale(0.65)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(100.0 93.8) rotate(-47) scale(0.58)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(100.0 93.8) rotate(43) scale(0.58)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(115.0 76.2) rotate(-49) scale(0.51)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(115.0 76.2) rotate(41) scale(0.51)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(130.0 58.1) rotate(-51) scale(0.44)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(130.0 58.1) rotate(39) scale(0.44)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(145.0 39.6) rotate(-53) scale(0.37)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(145.0 39.6) rotate(37) scale(0.37)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(160.0 20.8) rotate(-55) scale(0.30)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(160.0 20.8) rotate(35) scale(0.30)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3C/g%3E%3C/svg%3E") left -14px top -10px / 200px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg opacity='0.42' transform='translate(220 220) scale(-1 -1)'%3E%3Cpath d='M6 200C60 160 120 80 170 18' stroke='%2355703f' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath transform='translate(10.0 190.0) rotate(-35) scale(1.00)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(10.0 190.0) rotate(55) scale(1.00)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(25.0 174.8) rotate(-37) scale(0.93)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(25.0 174.8) rotate(53) scale(0.93)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(40.0 159.4) rotate(-39) scale(0.86)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(40.0 159.4) rotate(51) scale(0.86)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(55.0 143.7) rotate(-41) scale(0.79)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(55.0 143.7) rotate(49) scale(0.79)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(70.0 127.6) rotate(-43) scale(0.72)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(70.0 127.6) rotate(47) scale(0.72)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(85.0 111.0) rotate(-45) scale(0.65)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(85.0 111.0) rotate(45) scale(0.65)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(100.0 93.8) rotate(-47) scale(0.58)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(100.0 93.8) rotate(43) scale(0.58)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(115.0 76.2) rotate(-49) scale(0.51)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(115.0 76.2) rotate(41) scale(0.51)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(130.0 58.1) rotate(-51) scale(0.44)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(130.0 58.1) rotate(39) scale(0.44)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(145.0 39.6) rotate(-53) scale(0.37)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(145.0 39.6) rotate(37) scale(0.37)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3Cpath transform='translate(160.0 20.8) rotate(-55) scale(0.30)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%236f9446'/%3E%3Cpath transform='translate(160.0 20.8) rotate(35) scale(0.30)' d='M0 0C10-14 30-18 44-16C32-6 14 0 0 0Z' fill='%235d8238'/%3E%3C/g%3E%3C/svg%3E") right -14px bottom -10px / 200px auto no-repeat;
  --decor-layer: block;
  color-scheme: light;
}

/* Noorderlicht: een diepe nachtlucht met sterren en golvend licht (js/fx/noorderlicht.js). */
[data-theme="noorderlicht"] {
  --bg: #060b1c;
  --bg-2: #0d1a33;
  --surface: #0f1830;
  --surface-2: #18233f;
  --ink: #e8f1ff;
  --ink-soft: #b3c3dd;
  --line: #24314f;
  --line-strong: #6f86b5;
  --accent: #5ee6a8;
  --accent-strong: #8ff0c4;
  --accent-ink: #04231a;
  --accent-soft: #173a3a;
  --user: #8ff0c4;
  --given: #e8f1ff;
  --sel: #5ee6a8;
  --sel-ink: #04231a;
  --peer: #1e2c4c;
  --same: #233c56;
  --same-ring: color-mix(in srgb, #5ee6a8 60%, transparent);
  --hint: #ffb38a;
  --wrong: #ffd2a8;
  --wrong-bg: #6e2d10;
  --heart: #ff9fd6;
  --heart-fill: #3a2350;
  --heart-edge: #4f2d6b;
  --heart-ink: #f2d4ff;
  --heart-solved: #c43477;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 10 / 35%), 0 8px 24px rgb(0 0 20 / 45%);
  --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='0' cy='116' r='0.8' fill='%23e8f1ff' fill-opacity='0.37'/%3E%3Ccircle cx='224' cy='106' r='1.0' fill='%23e8f1ff' fill-opacity='0.58'/%3E%3Ccircle cx='123' cy='73' r='0.7' fill='%23e8f1ff' fill-opacity='0.71'/%3E%3Ccircle cx='37' cy='99' r='1.0' fill='%23e8f1ff' fill-opacity='0.76'/%3E%3Ccircle cx='99' cy='22' r='0.7' fill='%23e8f1ff' fill-opacity='0.72'/%3E%3Ccircle cx='154' cy='144' r='0.9' fill='%23e8f1ff' fill-opacity='0.47'/%3E%3Ccircle cx='80' cy='207' r='0.5' fill='%23e8f1ff' fill-opacity='0.45'/%3E%3Ccircle cx='150' cy='185' r='0.5' fill='%23e8f1ff' fill-opacity='0.54'/%3E%3Ccircle cx='231' cy='136' r='0.6' fill='%23e8f1ff' fill-opacity='0.66'/%3E%3Ccircle cx='249' cy='83' r='1.3' fill='%23e8f1ff' fill-opacity='0.36'/%3E%3Ccircle cx='187' cy='210' r='1.4' fill='%23e8f1ff' fill-opacity='0.49'/%3E%3Ccircle cx='43' cy='208' r='1.4' fill='%23e8f1ff' fill-opacity='0.72'/%3E%3Ccircle cx='260' cy='208' r='0.9' fill='%23e8f1ff' fill-opacity='0.48'/%3E%3Ccircle cx='160' cy='6' r='1.4' fill='%23e8f1ff' fill-opacity='0.77'/%3E%3Ccircle cx='91' cy='227' r='0.5' fill='%23e8f1ff' fill-opacity='0.68'/%3E%3Ccircle cx='247' cy='143' r='1.1' fill='%23e8f1ff' fill-opacity='0.60'/%3E%3Ccircle cx='222' cy='113' r='1.3' fill='%23e8f1ff' fill-opacity='0.85'/%3E%3Ccircle cx='111' cy='211' r='1.0' fill='%23e8f1ff' fill-opacity='0.46'/%3E%3Ccircle cx='12' cy='14' r='1.2' fill='%23e8f1ff' fill-opacity='0.40'/%3E%3Ccircle cx='91' cy='143' r='0.8' fill='%23e8f1ff' fill-opacity='0.59'/%3E%3Ccircle cx='28' cy='99' r='0.7' fill='%23e8f1ff' fill-opacity='0.64'/%3E%3Ccircle cx='143' cy='240' r='0.6' fill='%23e8f1ff' fill-opacity='0.84'/%3E%3Ccircle cx='258' cy='201' r='1.0' fill='%23e8f1ff' fill-opacity='0.53'/%3E%3Ccircle cx='224' cy='168' r='1.0' fill='%23e8f1ff' fill-opacity='0.50'/%3E%3Ccircle cx='139' cy='67' r='1.4' fill='%23e8f1ff' fill-opacity='0.63'/%3E%3Ccircle cx='237' cy='38' r='0.6' fill='%23e8f1ff' fill-opacity='0.83'/%3E%3Ccircle cx='180' cy='75' r='1.2' fill='%23e8f1ff' fill-opacity='0.53'/%3E%3Ccircle cx='229' cy='126' r='1.0' fill='%23e8f1ff' fill-opacity='0.47'/%3E%3Ccircle cx='26' cy='208' r='1.3' fill='%23e8f1ff' fill-opacity='0.48'/%3E%3Ccircle cx='197' cy='88' r='1.3' fill='%23e8f1ff' fill-opacity='0.57'/%3E%3Ccircle cx='0' cy='5' r='0.5' fill='%23e8f1ff' fill-opacity='0.63'/%3E%3Ccircle cx='77' cy='210' r='0.8' fill='%23e8f1ff' fill-opacity='0.67'/%3E%3Ccircle cx='257' cy='128' r='1.2' fill='%23e8f1ff' fill-opacity='0.44'/%3E%3Ccircle cx='170' cy='129' r='0.7' fill='%23e8f1ff' fill-opacity='0.48'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  color-scheme: dark;
}

/* Regenachtige dag: blauwgrijs buiten, warm lamplicht binnen rond het bord (druppels: js/fx/regen.js). */
[data-theme="regen"] {
  --bg: #1c2733;
  --bg-2: #2a3846;
  --surface: #253240;
  --surface-2: #2f3d4b;
  --ink: #eef2f6;
  --ink-soft: #c2ccd6;
  --line: #3a4856;
  --line-strong: #8a9aab;
  --accent: #f2c46b;
  --accent-strong: #f7d58f;
  --accent-ink: #2a1c05;
  --accent-soft: #4a4130;
  --user: #ffd99a;
  --given: #eef2f6;
  --sel: #f2c46b;
  --sel-ink: #2a1c05;
  --peer: #3b4a58;
  --same: #46535f;
  --same-ring: color-mix(in srgb, #f2c46b 60%, transparent);
  --hint: #ffb38a;
  --wrong: #ffb4a6;
  --wrong-bg: #55282b;
  --heart: #ff9fbf;
  --heart-fill: #3f3150;
  --heart-edge: #56406b;
  --heart-ink: #f0dcff;
  --heart-solved: #c43450;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 35%);
  --decor: radial-gradient(70% 40% at 50% 45%, rgb(255 196 110 / 10%), transparent 70%) fixed no-repeat;
  color-scheme: dark;
}

/* Onderwater: turkoois naar dieper blauw, met lichtstrepen en belletjes (js/fx/onderwater.js). */
[data-theme="onderwater"] {
  --bg: #d8f1f4;
  --bg-2: #effbfc;
  --surface: #fbfefe;
  --surface-2: #e1f3f5;
  --ink: #0d3340;
  --ink-soft: #335866;
  --line: #cfe7eb;
  --line-strong: #2a7f93;
  --accent: #38bfc9;
  --accent-strong: #1d8f9c;
  --accent-ink: #062b30;
  --accent-soft: #cdeff2;
  --user: #0f5f78;
  --given: #0d3340;
  --sel: #6fd3dc;
  --sel-ink: #062b30;
  --peer: #d4eef2;
  --same: #fff0b3;
  --same-ring: transparent;
  --hint: #f08a5d;
  --wrong: #b02e20;
  --wrong-bg: #fcd5c6;
  --heart: #d24e78;
  --heart-fill: #f3dcf5;
  --heart-edge: #ebcaf0;
  --heart-ink: #7e2a6b;
  --heart-solved: #c8324f;
  --heart-solved-ink: #ffffff;
  --shadow: 0 1px 2px rgb(10 60 80 / 7%), 0 8px 24px rgb(10 60 80 / 10%);
  --decor: linear-gradient(to bottom, transparent 30%, rgb(40 120 170 / 22%)) fixed no-repeat;
  color-scheme: light;
}

/* ---------- Dagthema: accentkleuren van een ander thema (zie themeForDay) ---------- */
/* Op een wedstrijddag die ook een andere bijzondere dag is, krijgt Volleybal de
   accentkleuren van het thema van die dag (html[data-accent]). Per thema dezelfde
   waarden als in zijn eigen blok hierboven (een test controleert dat); de zachte
   tinten worden gemengd met het oppervlak van het basisthema, zodat ze altijd passen. */
html[data-accent] {
  --accent-soft: color-mix(in srgb, var(--accent) 28%, var(--surface));
  --peer: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --same: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --same-ring: transparent;
}
html[data-accent="zonnig"] { --accent: #f5c02e; --accent-strong: #e0a400; --accent-ink: #3a2e1f; --sel: #f5c02e; --sel-ink: #3a2e1f; }
html[data-accent="nacht"] { --accent: #f5c451; --accent-strong: #ffd772; --accent-ink: #1d1a12; --sel: #f5c451; --sel-ink: #1d1a12; }
html[data-accent="gran-canaria"] { --accent: #f29b74; --accent-strong: #e2774c; --accent-ink: #2a1a10; --sel: #74c4c6; --sel-ink: #183c45; }
html[data-accent="lelie"] { --accent: #eab3c4; --accent-strong: #d98aa3; --accent-ink: #2f2228; --sel: #eab3c4; --sel-ink: #2f2228; }
html[data-accent="liefde"] { --accent: #e2557a; --accent-strong: #c93a63; --accent-ink: #3a0f1d; --sel: #e8668a; --sel-ink: #2e0a16; }
html[data-accent="sterren"] { --accent: #ffd977; --accent-strong: #ffe39b; --accent-ink: #1a1630; --sel: #ffd977; --sel-ink: #1a1630; }
html[data-accent="volleybal"] { --accent: #ffcc00; --accent-strong: #e6b400; --accent-ink: #10265c; --sel: #1d4fa3; --sel-ink: #ffffff; }
html[data-accent="briefje"] { --accent: #ffe45c; --accent-strong: #3a4a9a; --accent-ink: #2a2a33; --sel: #ffe866; --sel-ink: #1d2a6e; }
html[data-accent="lente"] { --accent: #f2a7bf; --accent-strong: #e07f9f; --accent-ink: #3a1f28; --sel: #a8d585; --sel-ink: #1d2e14; }
html[data-accent="zomer"] { --accent: #f0607a; --accent-strong: #d94661; --accent-ink: #2d0d14; --sel: #7cc47f; --sel-ink: #10260f; }
html[data-accent="herfst"] { --accent: #c8662b; --accent-strong: #ad5320; --accent-ink: #1f0f05; --sel: #d9783d; --sel-ink: #1f0f05; }
html[data-accent="winter"] { --accent: #7fb0dc; --accent-strong: #5b95c9; --accent-ink: #10213a; --sel: #7fb0dc; --sel-ink: #10213a; }
html[data-accent="robijn"] { --accent: #d9a441; --accent-strong: #f0c46a; --accent-ink: #1e0e02; --sel: #c8143f; --sel-ink: #fff4f6; }
html[data-accent="rubyxcube"] { --accent: #ffcf1f; --accent-strong: #1e5bd6; --accent-ink: #1b1d2a; --sel: #1b1d2a; --sel-ink: #ffffff; }
html[data-accent="koffiemonster"] { --accent: #c98b4f; --accent-strong: #a96a31; --accent-ink: #24130a; --sel: #d9a46b; --sel-ink: #24130a; }
html[data-accent="gitaar"] { --accent: #e8932e; --accent-strong: #b8641a; --accent-ink: #2b1a0c; --sel: #f0a63a; --sel-ink: #2b1a0c; }
html[data-accent="beachvolleybal"] { --accent: #ffb22e; --accent-strong: #e08a00; --accent-ink: #0f3546; --sel: #49bfe0; --sel-ink: #082a38; }
html[data-accent="dagverloop"] { --accent: #7db6f2; --accent-strong: #3f86d6; --accent-ink: #0c2242; --sel: #7db6f2; --sel-ink: #0c2242; }
html[data-accent="krant"] { --accent: #6a665e; --accent-strong: #1b1a17; --accent-ink: #f9f4e6; --sel: #34322d; --sel-ink: #f9f4e6; }
html[data-accent="krijtbord"] { --accent: #f3d35b; --accent-strong: #f8e08a; --accent-ink: #1d2a1f; --sel: #f3d35b; --sel-ink: #1d2a1f; }
html[data-accent="zonnebloem"] { --accent: #ffc816; --accent-strong: #e0a400; --accent-ink: #2e2300; --sel: #ffd23c; --sel-ink: #2e2300; }
html[data-accent="hoog-contrast"] { --accent: #ffd400; --accent-strong: #000000; --accent-ink: #000000; --sel: #ffd400; --sel-ink: #000000; }
html[data-accent="gameboy"] { --accent: #88c070; --accent-strong: #081820; --accent-ink: #081820; --sel: #081820; --sel-ink: #e0f8d0; }
html[data-accent="sporthal"] { --accent: #ffcf33; --accent-strong: #d99a00; --accent-ink: #2a1f14; --sel: #2f6fd1; --sel-ink: #ffffff; }
html[data-accent="kampvuur"] { --accent: #ff9a3c; --accent-strong: #ffb866; --accent-ink: #2a1205; --sel: #fff1df; --sel-ink: #3a1d0c; }
html[data-accent="preitaart"] { --accent: #eaa93a; --accent-strong: #b97a1c; --accent-ink: #2e1d06; --sel: #d3ebaf; --sel-ink: #1f3d10; }
html[data-accent="vertrekhal"] { --accent: #ffd23f; --accent-strong: #ffe07a; --accent-ink: #141414; --sel: #ffd23f; --sel-ink: #141414; }
html[data-accent="onzichtbare-inkt"] { --accent: #b37bff; --accent-strong: #cfa6ff; --accent-ink: #160a28; --sel: #b37bff; --sel-ink: #160a28; }
html[data-accent="wandeltijd"] { --accent: #8cc152; --accent-strong: #5a9628; --accent-ink: #182a0a; --sel: #e8bc84; --sel-ink: #2a1a08; }
html[data-accent="middernacht"] { --accent: #e8c46a; --accent-strong: #f3d68e; --accent-ink: #1f1402; --sel: #e8c46a; --sel-ink: #1f1402; }
html[data-accent="waddenzee"] { --accent: #8fb3c4; --accent-strong: #4f7f95; --accent-ink: #14262f; --sel: #8fb3c4; --sel-ink: #14262f; }
html[data-accent="bos"] { --accent: #8fb35a; --accent-strong: #5d7f32; --accent-ink: #1d2a12; --sel: #a9c873; --sel-ink: #1d2a12; }
html[data-accent="noorderlicht"] { --accent: #5ee6a8; --accent-strong: #8ff0c4; --accent-ink: #04231a; --sel: #5ee6a8; --sel-ink: #04231a; }
html[data-accent="regen"] { --accent: #f2c46b; --accent-strong: #f7d58f; --accent-ink: #2a1c05; --sel: #f2c46b; --sel-ink: #2a1c05; }
html[data-accent="onderwater"] { --accent: #38bfc9; --accent-strong: #1d8f9c; --accent-ink: #062b30; --sel: #6fd3dc; --sel-ink: #062b30; }

/* ---------- Basis ---------- */
/* Tot ui.js het thema van vandaag heeft gezet (zie js/theme-early.js): even
   onzichtbaar, en na 1,2 seconde hoe dan ook zichtbaar. */
html[data-theme-pending] body { visibility: hidden; animation: theme-reveal 0s 1.2s forwards; }
@keyframes theme-reveal { to { visibility: visible; } }

*,
*::before,
*::after { box-sizing: border-box; }

/* iOS 26 kleurt de balken boven en onder het scherm met de achtergrondkleur
   van de pagina (theme-color negeert het daar), of met een vaste laag die
   tegen de rand ligt. Daarom: de themakleur expliciet op html, en geen lege
   schermvullende vaste lagen (zie body::before en .confetti). */
html { -webkit-text-size-adjust: 100%; background-color: var(--bg); transition: background-color 0.4s ease, filter 2s ease; }
/* Een app, geen webpagina: lang drukken op een woord selecteert niets en opent geen
   kopieermenu. Alleen in invoervelden mag je tekst selecteren. */
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:is(input, textarea, [contenteditable]) { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
/* Slaapstand (zie sleep.js): alles zwart-wit. De overgang duurt 2 seconden,
   zonder melding. Een
   filter op html maakt geen nieuw blok voor vaste elementen (toast, feestje). */
html[data-sleep] { filter: grayscale(1); }

body {
  margin: 0;
  min-height: 100dvh;
  /* Eigen stapelvolgorde, zodat body::before (z-index -1) bóven de achtergrond van body ligt. */
  isolation: isolate;
  background: var(--decor), radial-gradient(120% 60% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Bewegende versiering (bijv. twinkelende sterren) achter alles. */
body::before {
  content: "";
  display: var(--decor-layer);
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--decor-move);
  animation: var(--decor-anim);
}
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 0.9; } }
@keyframes snow { from { background-position: 0 0; } to { background-position: 40px 300px; } }
@keyframes pluis { from { background-position: 0 0; } to { background-position: 320px -320px; } }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0 0 0.4em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; margin-top: 1.2em; }
.muted { color: var(--ink-soft); margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.screen { animation: fade-in 0.35s ease both; }
.screen[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Knoppen ---------- */

.btn {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.wide { width: 100%; margin-top: 18px; }
.row { display: flex; gap: 10px; margin-top: 18px; }
/* Een knop die eruitziet als een kleine link (bijv. "toch nog eentje" in de slaapstand). */
.link-btn { display: block; margin: 14px auto 0; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link-btn[hidden] { display: none; }

/* ---------- Ruby Wrapped ---------- */

.card.wrapped-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--surface)), color-mix(in srgb, var(--heart) 12%, var(--surface))); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.wrapped-list { margin-top: 18px; }
.wrapped-list h3 { margin: 0 0 8px; }
.wrapped-list .btn { margin: 0 8px 8px 0; }
dialog.wrapped {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; border-radius: 0; overflow: hidden; color: var(--ink);
  background: radial-gradient(120% 70% at 50% 0%, var(--bg-2), var(--bg) 70%);
}
dialog.wrapped::backdrop { background: var(--bg); }
.wr-progress { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 16px; right: 64px; display: flex; gap: 4px; z-index: 2; }
.wr-progress span { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
.wr-progress span.done, .wr-progress span.now { background: var(--ink); }
.wr-close { position: absolute; top: max(2px, calc(env(safe-area-inset-top) - 10px)); right: 8px; z-index: 3; }
.wr-close svg { width: 22px; height: 22px; }
.wr-card {
  position: absolute; inset: calc(max(12px, env(safe-area-inset-top)) + 40px) 28px calc(max(24px, env(safe-area-inset-bottom)) + 76px);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center;
  pointer-events: none; animation: wr-in 0.35s ease both;
}
@keyframes wr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wr-emoji { font-size: 3.4rem; line-height: 1.1; }
.wr-kicker { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.wr-big { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(2rem, 11vw, 2.8rem); line-height: 1.1; overflow-wrap: anywhere; }
.wr-text { margin: 0; max-width: 32ch; font-size: 1.1rem; line-height: 1.45; }
.wr-step { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
/* Tik links = terug, rechts = verder (onzichtbare knoppen over het hele scherm). */
.wr-tap { position: absolute; top: 56px; bottom: 0; z-index: 1; border: 0; background: transparent; touch-action: manipulation; }
.wr-prev { left: 0; width: 30%; }
.wr-next { right: 0; width: 70%; }
.wr-tap:focus-visible { outline-offset: -6px; }
.wr-actions { position: absolute; left: 24px; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2; display: flex; gap: 10px; justify-content: center; }
.wr-actions:empty { display: none; }
.wr-actions .btn { flex: 1; max-width: 220px; }
.row .btn { flex: 1; padding: 0 14px; white-space: nowrap; }

.pill {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  font-size: 0.95rem;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg, .tool svg { width: 24px; height: 24px; }

/* ---------- Startscherm ---------- */

.home-head { padding: 12px 4px 10px; }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.brand-mark {
  width: 22px; height: 22px;
  background: url("../icons/icon.svg") center / contain no-repeat;
}
#greeting { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 6px; }
.together { margin: 10px 0 0; font-size: 0.95rem; color: var(--heart); font-weight: 700; }
.together:empty { display: none; }

.card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:active { transform: scale(0.985); }
.card-kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.card-title { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.card-meta { color: var(--ink-soft); font-size: 0.95rem; }

/* Dagpuzzel: het hoofdpunt van het startscherm. */
.card.daily {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 22px 20px 20px 22px;
  border-color: color-mix(in srgb, var(--accent-strong) 30%, var(--line));
  border-radius: 28px;
  background: linear-gradient(150deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 55%, var(--surface)));
}
/* Nacht: de dagpuzzel als een stukje diepe nachthemel met een gouden randje, niet olijfbruin. */
[data-theme="nacht"] .card.daily {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: radial-gradient(120% 90% at 85% 15%, rgb(245 196 81 / 14%), transparent 55%), linear-gradient(150deg, #2e2850, #231f38);
}
.daily-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.card.daily .card-title { font-size: 1.6rem; line-height: 1.15; }
.card.daily .card-meta { color: var(--ink); opacity: 0.8; }
.daily-streak { margin-top: 8px; font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.daily-streak[hidden] { display: none; }
.daily-action {
  margin-top: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.daily-action.done { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mini-board {
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-strong) 25%, transparent);
  transform: rotate(-6deg);
}
.mini-board i {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--surface);
  font: normal 600 0.95rem/1 "Fraunces", Georgia, serif;
  color: var(--ink);
}
.mini-board i:nth-child(odd) { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-strong) 50%, transparent); }
.mini-board i:nth-child(5) { background: var(--accent); }
.card.special { background: linear-gradient(135deg, color-mix(in srgb, var(--heart) 14%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--heart) 35%, var(--line)); }
.card.special .card-kicker { color: var(--heart); }
/* De maandversary: geen puzzel, alleen een klein kaartje. */
.card.special.small { gap: 4px; padding: 14px 18px; }
.card.special.small:active { transform: none; }
.card.special.small .card-meta { color: var(--ink); }
.card.continue { border-style: dashed; }
/* Wedstrijddag: een kaartje met knoppen erin (dus zelf geen knop). */
.card.match { gap: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card.match:active { transform: none; }
.card.match .card-title { line-height: 1.2; }
.match-text { margin: 4px 0 0; color: var(--ink); }
.match-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.match-actions .btn { min-height: 44px; padding: 0 16px; }
.match-outcomes .btn { flex: 1 1 auto; }
.card.update { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.section-title { font-size: 1.1rem; margin: 26px 4px 10px; }

.levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}
.level:active { transform: scale(0.97); }
.level-emoji { font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
.level-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.level-tag { font-size: 0.85rem; color: var(--ink-soft); }
.level-best { margin-top: auto; padding-top: 6px; font-size: 0.8rem; color: var(--ink-soft); }

.home-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 8px; }
.nav-btn {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-weight: 700;
  font-size: 0.88rem;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.nav-btn:active { transform: scale(0.97); background: var(--surface-2); }
.nav-label { white-space: nowrap; }
.nav-icon { width: 30px; height: 30px; display: grid; place-items: center; font-size: 1.15rem; line-height: 1; }
.nav-icon svg { width: 24px; height: 24px; }
/* Ringetje om het berichtjes-icoon: hoe ver het volgende geheime berichtje is. */
.nav-icon.ring { border-radius: 50%; background: conic-gradient(var(--accent-strong) calc(var(--p, 0) * 1turn), var(--line) 0); }
.nav-icon.ring > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); }
.nav-icon.ring > span svg { width: 16px; height: 16px; }
.nav-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.nav-badge[hidden] { display: none; }
@media (min-width: 480px) {
  .nav-btn { flex-direction: row; min-height: 56px; gap: 8px; }
}

/* ---------- Spelscherm ---------- */

/* Bord, gereedschap en cijfers vormen één blok, verticaal gecentreerd. */
#play {
  --size: min(100vw - 20px, 520px, 100dvh - 270px);
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
}
#play[hidden] { display: none; }

.topbar { display: flex; align-items: center; gap: 2px; margin: -4px -6px 8px; }
.topbar-mid { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.play-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.timer {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.timer.hidden-time { letter-spacing: 0.1em; }

.board-wrap { display: flex; justify-content: center; margin-top: auto; }

.board {
  width: var(--size);
  height: var(--size);
  min-width: 288px;
  min-height: 288px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 420px) {
  #app { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #play { --size: min(100vw - 16px, 100dvh - 260px); }
}
.board:focus-visible { outline-offset: 4px; }

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: calc(var(--size) / 9 * 0.56);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(9n + 3), .cell:nth-child(9n + 6) { border-right: 2px solid var(--line-strong); }
.cell:nth-child(n + 19):nth-child(-n + 27),
.cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 2px solid var(--line-strong); }
.cell:nth-child(n + 73) { border-bottom: 0; }

/* Kleuren van de figuurpuzzels. Harten gebruiken de hartkleuren van het
   thema; de andere figuren een eigen familie (data-color op het bord, zie
   SHAPES in generator.js), in een lichte en een donkere variant. */
.board {
  --shape-fill: var(--heart-fill); --shape-edge: var(--heart-edge); --shape-ink: var(--heart-ink);
  --shape-solved: var(--heart-solved); --shape-solved-ink: var(--heart-solved-ink);
}
.board[data-color="orange"] { --shape-fill: var(--orange-fill); --shape-edge: var(--orange-edge); --shape-ink: var(--orange-ink); --shape-solved: var(--orange-solved); --shape-solved-ink: #ffffff; }
.board[data-color="green"] { --shape-fill: var(--green-fill); --shape-edge: var(--green-edge); --shape-ink: var(--green-ink); --shape-solved: var(--green-solved); --shape-solved-ink: #ffffff; }
.board[data-color="gold"] { --shape-fill: var(--gold-fill); --shape-edge: var(--gold-edge); --shape-ink: var(--gold-ink); --shape-solved: var(--gold-solved); --shape-solved-ink: #ffffff; }
.board[data-color="brown"] { --shape-fill: var(--brown-fill); --shape-edge: var(--brown-edge); --shape-ink: var(--brown-ink); --shape-solved: var(--brown-solved); --shape-solved-ink: #ffffff; }
.board[data-color="blue"] { --shape-fill: var(--blue-fill); --shape-edge: var(--blue-edge); --shape-ink: var(--blue-ink); --shape-solved: var(--blue-solved); --shape-solved-ink: #ffffff; }
.board[data-color="lilac"] { --shape-fill: var(--lilac-fill); --shape-edge: var(--lilac-edge); --shape-ink: var(--lilac-ink); --shape-solved: var(--lilac-solved); --shape-solved-ink: #ffffff; }
:root {
  --orange-fill: #ffdfc3; --orange-edge: #ffd4ac; --orange-ink: #8a3a00; --orange-solved: #a84800;
  --green-fill: #cfedd2; --green-edge: #bee6c1; --green-ink: #1d5c28; --green-solved: #2b7536;
  --gold-fill: #ffe48a; --gold-edge: #ffd959; --gold-ink: #6b4700; --gold-solved: #8a5c00;
  --brown-fill: #f1e3d9; --brown-edge: #ecd9cb; --brown-ink: #5a2d12; --brown-solved: #6b3a1e;
  --blue-fill: #d9e6fa; --blue-edge: #ccddf9; --blue-ink: #1c3d78; --blue-solved: #2a58a6;
  --lilac-fill: #eae1f8; --lilac-edge: #e4d8f7; --lilac-ink: #4d2a85; --lilac-solved: #6a3db0;
}
[data-scheme="dark"] {
  --orange-fill: #3f2716; --orange-edge: #5e391a; --orange-ink: #ffd1a1; --orange-solved: #a84800;
  --green-fill: #1d3322; --green-edge: #2a4a30; --green-ink: #b9e8bf; --green-solved: #2b7536;
  --gold-fill: #3a3014; --gold-edge: #5a481a; --gold-ink: #ffe08a; --gold-solved: #8a5c00;
  --brown-fill: #36261c; --brown-edge: #523726; --brown-ink: #f2cfb4; --brown-solved: #7a4526;
  --blue-fill: #1c2a46; --blue-edge: #2a3d63; --blue-ink: #c4d7ff; --blue-solved: #2a58a6;
  --lilac-fill: #2c2142; --lilac-edge: #43305f; --lilac-ink: #ddccff; --lilac-solved: #6a3db0;
}

.cell.given { color: var(--given); font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.cell.user { color: var(--user); font-weight: 700; }
/* Figuurpuzzel (speciale dagen): de hele figuur licht gekleurd, de rand iets steviger. */
.cell.in-shape { background-color: var(--shape-fill); }
.cell.shape-edge { background-color: var(--shape-edge); }
/* Accenten in een figuur (de pijl, het lint, de naden, het gezicht): een stevige
   rand aan de binnenkant. Aaneengesloten vormen ze een lijn, en het cijfer in
   het midden blijft net zo goed leesbaar. */
.cell.shape-accent { background-color: var(--shape-edge); box-shadow: inset 0 0 0 3px var(--shape-solved); }
.cell.peer { background: var(--peer); }
.cell.same { background: var(--same); box-shadow: inset 0 0 0 2px var(--same-ring); }
.cell.selected { background: var(--sel); }
.cell.selected.given, .cell.selected.user:not(.wrong) { color: var(--sel-ink); }
.cell.selected .notes { color: var(--sel-ink); }
.cell.given.shape-given { color: var(--shape-ink); }

/* Fout: kleur én een golvend streepje, zodat het niet alleen via kleur zichtbaar is. */
.cell.wrong { color: var(--wrong); background: var(--wrong-bg); }
.cell.wrong .v { text-decoration: underline wavy var(--wrong) 2px; text-underline-offset: 4px; }
.cell.wrong.selected { background: color-mix(in srgb, var(--wrong-bg) 60%, var(--sel)); }

.cell.pop .v { animation: pop 0.28s ease; }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0.4; } 70% { transform: scale(1.12); } 100% { transform: none; } }

.cell.check-ok { animation: glow-ok 1.6s ease; }
@keyframes glow-ok { 30% { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); } }

.notes {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 1px;
  font-size: calc(var(--size) / 9 * 0.32);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
}
.notes span { display: grid; place-items: center; border-radius: 4px; }
.notes span.hl { background: var(--sel); color: var(--sel-ink); }
.notes span.strike { color: var(--wrong); text-decoration: line-through 2px; background: var(--wrong-bg); }

/* Hint-markeringen */
.cell.hint-region { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--hint) 14%, transparent); }
.cell.hint-focus { box-shadow: inset 0 0 0 3px var(--hint); }
.cell.hint-focus.hint-region { box-shadow: inset 0 0 0 3px var(--hint), inset 0 0 0 100vmax color-mix(in srgb, var(--hint) 14%, transparent); }

.paused .board .cell { color: transparent !important; }
.paused .board .notes { visibility: hidden; }

/* Bediening */
.controls { position: relative; width: 100%; max-width: 520px; margin: 18px auto auto; }

.tools { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.tool {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tool:active { background: var(--surface-2); }
.tool:disabled { opacity: 0.35; }
.tool[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); }
.tool { position: relative; }
/* Hoeveel hints er nog over zijn (hooguit 3 per puzzel). */
.tool .tool-count {
  position: absolute; top: 4px; left: calc(50% + 8px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; line-height: 1;
}
.tool.used-up { opacity: 0.35; }
.tool.used-up .tool-count { background: var(--surface-2); color: var(--ink); }
.tool .tool-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.numpad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.num {
  /* Groeit mee met de beschikbare hoogte, tot 64 px. */
  height: clamp(50px, 100dvh - var(--size) - 220px, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.12s ease, opacity 0.2s ease, background-color 0.2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.num:active { transform: scale(0.94); background: var(--surface-2); }
/* Negen puntjes als een mini-blok: één puntje per keer dat het cijfer op het bord staat. */
.num small { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; margin-top: 6px; }
.num small i { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--ink-soft) 30%, transparent); }
.num small i.on { background: var(--ink-soft); }
.num.full small { display: block; margin-top: 4px; font: 700 0.7rem/1 "Nunito", sans-serif; color: var(--ink-soft); }
.num:disabled { opacity: 0.28; box-shadow: none; }
.num.active { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); }
.num.active small i { background: color-mix(in srgb, var(--sel-ink) 25%, transparent); }
.num.active small i.on { background: var(--sel-ink); }
.notes-mode .num { font-family: "Nunito", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--ink-soft); }
.notes-mode .num { border-style: dashed; }

.hint-card {
  /* Ligt over het gereedschap en de cijfers en groeit naar beneden, nooit over
     het bord: anders zou een hint naar de onderste rij precies dat vakje verbergen.
     ui.js zet --hint-max op de ruimte tot de onderkant van het scherm. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: 100%;
  max-height: var(--hint-max, 60dvh);
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--hint) 40%, var(--line));
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: slide-up 0.28s ease both;
}
.hint-card[hidden] { display: none; }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hint-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hint-badge { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hint) 18%, var(--surface)); color: var(--ink); font-size: 0.8rem; font-weight: 800; }
.hint-step { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }
.hint-text { flex: 1; min-height: 0; margin: 8px 0 12px; font-size: 1.02rem; overflow-y: auto; }
.hint-actions { display: flex; gap: 8px; }
.hint-actions .btn { flex: 1; min-height: 46px; }

/* ---------- Dialogen ---------- */

dialog.sheet {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  padding: 24px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / 22%);
  overflow-y: auto;
}
dialog.sheet[open] { animation: dialog-in 0.3s ease both; }
dialog.center { text-align: center; }
dialog::backdrop { background: rgb(30 20 10 / 35%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  font-weight: 600;
}
.menu-item:active, .menu-item:hover { background: var(--surface-2); }
.menu-item[hidden] { display: none; }
.menu-item > span { width: 24px; display: grid; place-items: center; flex: none; color: var(--ink-soft); }
.menu-item svg { width: 22px; height: 22px; }

.setting { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.setting legend { font-weight: 800; margin-bottom: 10px; }
.setting.backup { margin-top: 18px; }
.setting.backup .muted { margin-bottom: 8px; }

/* Thema's: een horizontaal scrollende rij met voorproefjes. */
.theme-options {
  display: flex;
  gap: 8px;
  margin: 0 -22px;
  padding: 4px 22px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 22px;
  scrollbar-width: none;
}
.theme-options::-webkit-scrollbar { display: none; }
.theme-opt { position: relative; flex: none; display: flex; align-self: flex-start; scroll-snap-align: start; }
.theme-opt input { position: absolute; opacity: 0; }
.theme-group-title { margin: 4px 0 6px; font: 800 0.78rem/1.2 "Nunito", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.theme-group-title + .theme-options { margin-bottom: 8px; }
/* Dagthema: vandaag kiest de app. De keuzes zijn even niet te kiezen; haar eigen keuze blijft aangevinkt. */
.day-theme-note { margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-weight: 700; line-height: 1.4; }
.theme-opt.fixed { cursor: default; }
.theme-opt.fixed .theme-card { opacity: 0.55; }
.theme-opt.fixed input:checked + .theme-card { opacity: 0.9; }
.theme-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 104px; /* lange namen (Beachvolleybal) maken de kaart breder, de hint niet */
  padding: 8px 8px 10px;
  border: 2px solid var(--line);
  border-radius: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.theme-name { line-height: 1.2; }
.theme-hint { display: block; width: 0; min-width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.25; color: var(--ink-soft); white-space: normal; }
/* Vergrendeld seizoen: gedimd voorproefje met een slotje. */
.theme-opt.locked { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: default; }
.theme-opt.locked .theme-card { border-style: dashed; }
.theme-opt.locked .theme-card { position: relative; }
.theme-opt.locked .theme-preview { opacity: 0.5; filter: saturate(0.6); }
.theme-opt.locked .theme-card::after {
  content: "🔒";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
}
.theme-opt.locked:focus-visible { outline: none; }
.theme-opt.locked:focus-visible .theme-card { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.theme-preview { display: flex; width: 100%; height: 62px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.tp {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tp-accent) 18%, var(--tp-bg)), var(--tp-bg) 70%);
}
.tp b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--tp-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tp-digit) 18%, transparent);
  font: 600 1.15rem/1 "Fraunces", Georgia, serif;
  color: var(--tp-digit);
}
.tp em { position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--tp-accent); }
.tp + .tp b, .tp:has(+ .tp) em { display: none; }
.tp + .tp em { right: auto; left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; }
.theme-opt input:checked + .theme-card { border-color: var(--accent-strong); background: var(--surface-2); }
.theme-opt input:focus-visible + .theme-card { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

.segmented { display: flex; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: 0.92rem; transition: background-color 0.2s ease; }
.segmented input:checked + span { background: var(--surface); box-shadow: var(--shadow); }
.segmented input:focus-visible + span { outline: 3px solid var(--accent-strong); }
.setting-explain { margin-top: 8px; }

.toggles { display: flex; flex-direction: column; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.toggle:last-child { border-bottom: 0; }
.toggle[hidden] { display: none; }
.rain-toggle { margin-top: 6px; border-bottom: 0; }
.toggle input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background-color 0.2s ease;
}
.toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  transition: transform 0.2s ease;
}
.toggle input:checked { background: var(--accent-strong); }
.toggle input:checked::after { transform: translateX(20px); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stat { padding: 12px 8px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.stat b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; }
.stat span { font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.stat-table td:first-child { white-space: nowrap; }
.stat-table th, .stat-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: right; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { font-size: 0.78rem; color: var(--ink-soft); }

/* Gevonden geheimen (onder Statistieken → Overzicht). */
.secrets { margin-top: 16px; }
.secrets-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--ink); font-weight: 700; text-align: left; }
.secrets-line::after { content: "›"; font-size: 1.3rem; color: var(--ink-soft); transition: transform 0.2s ease; }
.secrets-line[aria-expanded="true"]::after { transform: rotate(90deg); }
.secret-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.secret-list[hidden] { display: none; }
.secret-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.secret-list li.locked { background: transparent; border: 1px dashed var(--line); }
.secret-list b { display: block; }
.secret-list small { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.secret-emoji { font-size: 1.5rem; width: 32px; text-align: center; flex: none; }

/* ---------- Kalender (in Statistieken) ---------- */

.stats-tabs { margin-bottom: 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-month { flex: 1; margin: 0; text-align: center; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.2rem; }
.cal-head .icon-btn:disabled { opacity: 0.3; }
.cal-head .icon-btn svg { width: 22px; height: 22px; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-weekdays span { text-align: center; font-size: 0.75rem; font-weight: 800; color: var(--ink-soft); padding-bottom: 4px; }
.cal-day {
  position: relative;
  min-width: 0;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 700 0.95rem/1 "Nunito", sans-serif;
  touch-action: manipulation;
}
.cal-day:disabled { color: var(--ink-soft); opacity: 0.55; }
/* Een dag met een opgeloste puzzel krijgt een hartje; een dag met de dagpuzzel
   ook een zacht vlakje, en een speciale dag (jubileum, verjaardag) een roze. */
.cal-day.daily { background: var(--accent-soft); }
.cal-day.special { background: var(--heart-fill); color: var(--heart-ink); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--ink-soft); }
.cal-day[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); box-shadow: none; }
.cal-heart { width: 14px; height: 13px; color: var(--heart); }
.cal-day.special .cal-heart { color: var(--heart-ink); }
.cal-day[aria-pressed="true"] .cal-heart { color: var(--sel-ink); }
.cal-heart svg { display: block; width: 100%; height: 100%; }
.cal-heart.hand-art { width: 16px; height: auto; }
.cal-summary { margin: 12px 0 0; text-align: center; font-weight: 700; color: var(--ink-soft); }
.cal-detail { margin-top: 12px; padding: 14px 14px 4px; border-radius: 18px; background: var(--surface-2); }
.cal-detail:empty { display: none; }
.cal-detail h4 { margin: 0 0 8px; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem; }
.cal-detail p { margin: 0 0 10px; }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list li { display: flex; gap: 10px; padding: 0 0 10px; }
.cal-list .cal-emoji { font-size: 1.3rem; line-height: 1.2; }
.cal-list .cal-what { font-weight: 800; }
.cal-list .cal-meta { color: var(--ink-soft); font-size: 0.9rem; }
.cal-list .cal-record { margin: 2px 0 0; font-weight: 700; color: var(--ink); }

/* Een nieuw persoonlijk record op het opgelost-scherm. */
.record-line {
  margin: 12px auto 0;
  max-width: 34ch;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 800;
  animation: record-in 0.5s ease 0.3s both;
}
.record-line[hidden] { display: none; }
@keyframes record-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

.notes-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notes-list li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.notes-list li.locked { opacity: 0.7; }
.notes-list .n-icon { font-size: 1.4rem; line-height: 1.2; }
.notes-list .n-title { font-weight: 800; }
.notes-list p { margin: 2px 0 0; font-size: 0.94rem; }

.help-list { padding-left: 20px; }
.help-list li { margin-bottom: 6px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.keys dt { font-weight: 800; white-space: nowrap; }
.keys dd { margin: 0; color: var(--ink-soft); }

.pause-emoji, .solved-emoji, .message-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.love-note, .message-text { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; line-height: 1.4; margin: 16px 0 0; }

/* Op het beginscherm zetten: een compact bannertje */
.install-banner {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  padding: 4px 4px 4px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.install-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; font-weight: 700; font-size: 0.95rem; }
.install-main img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.install-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-later { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); }
.install-later svg { width: 20px; height: 20px; }
.center-text { text-align: center; }
.install-steps { margin: 18px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.share-icon { width: 22px; height: 22px; vertical-align: -5px; margin: 0 2px; color: #0a84ff; }
.small { font-size: 0.85rem; }
[data-platform][hidden] { display: none; }
#install-setting { width: 100%; margin-top: 8px; }
#install-setting[hidden] { display: none; }

/* ---------- Techniekenboekje (onder Statistieken) ---------- */

/* Het stipje: er staat iets nieuws in het boekje. */
.book-dot { position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--heart); box-shadow: 0 0 0 2px var(--surface); }
.stats-tabs label { position: relative; }
.stats-tabs .book-dot { display: block; min-height: 0; top: 7px; right: 12px; width: 8px; height: 8px; }
.book-dot[hidden] { display: none; }
.book-count { margin: 0 0 10px; text-align: center; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; }
.book-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.book-progress span { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width 0.6s ease; }
.book-level-title { margin: 22px 0 8px; font-size: 1.05rem; }
.book-item { margin-bottom: 10px; padding: 14px 14px 16px; border-radius: 18px; background: var(--surface-2); }
.book-item h4 { margin: 0; font: 600 1.08rem/1.25 "Fraunces", Georgia, serif; }
.book-since { margin: 2px 0 8px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.book-text { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.45; }
/* Nog niet ontdekt: rustig en gestippeld (geen doorzichtigheid, dan blijft de tekst goed leesbaar). */
.book-item.locked { padding: 12px 14px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.book-item.locked h4 { font-size: 1rem; color: var(--ink-soft); }
.book-lock { font-size: 0.85em; }
.book-hint { margin: 4px 0 0; font-size: 0.88rem; color: var(--ink-soft); }

/* Een mini-voorbeeld: een stukje bord met dezelfde vakjes en hint-markeringen als het echte bord. */
.mini-sudoku {
  display: grid;
  grid-template-columns: repeat(var(--cols), calc(var(--size) / 9));
  grid-auto-rows: calc(var(--size) / 9);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}
.mini-sudoku > .cell:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mini-sudoku > .cell.mb-r:nth-child(n) { border-right: 2px solid var(--line-strong); }
.mini-sudoku > .cell.mb-b:nth-child(n) { border-bottom: 2px solid var(--line-strong); }
.mini-sudoku > .cell.mb-lc:nth-child(n) { border-right: 0; }
.mini-sudoku > .cell.mb-lr:nth-child(n) { border-bottom: 0; }

/* ---------- Toast & feestje ---------- */

.toast {
  position: fixed;
  /* Gecentreerd zonder transform: de inschuif-animatie gebruikt transform al. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  bottom: max(24px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px);
  text-align: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 20;
  animation: slide-up 0.25s ease both;
}
.toast[hidden] { display: none; }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; }
.confetti:empty { display: none; }
.confetti span {
  position: absolute;
  bottom: -40px;
  font-size: var(--s, 24px);
  animation: float-up var(--d, 4s) ease-in var(--delay, 0s) both;
}
@keyframes float-up {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--x, 0), -110vh) rotate(var(--r, 30deg)); opacity: 0; }
}
.board.solved-glow { animation: board-glow 1.4s ease; }

/* Onthulling: de figuur loopt rij voor rij vol, van onder naar boven (--rd = rijen vanaf onder). */
.board.reveal .cell.in-shape {
  background-color: var(--shape-solved);
  color: var(--shape-solved-ink);
  animation: shape-in 0.35s ease calc(var(--rd, 0) * 105ms) both;
}
@keyframes shape-in {
  from { background-color: var(--shape-edge); color: var(--shape-ink); }
}
/* Een hart klopt één keer; andere figuren pulseren zacht. */
.board.pulse { animation: pulse 0.8s ease; }
@keyframes pulse { 50% { transform: scale(1.02); } }
.board.heartbeat { animation: heartbeat 0.7s ease; }
@keyframes heartbeat {
  0%, 100% { transform: none; }
  30% { transform: scale(1.04); }
  55% { transform: scale(0.99); }
}
@keyframes board-glow { 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow); } }

/* Volleybal (in de geel-blauwe clubkleuren van Donitas): bloklijnen als strakke veldlijnen. */
[data-theme="volleybal"] .board { border-width: 3px; border-radius: 10px; }
/* Het rugnummer: op het startscherm iets duidelijker dan tijdens het spelen. Speelscherm zonder
   ruimte onder de cijfertoetsen (zoals een iPhone SE): dan geen nummer, want het mag nooit achter
   het bord of de bediening. */
[data-theme="volleybal"] body::before { opacity: 0.4; }
/* Onder op het startscherm wat lucht, zodat het nummer daar helemaal te zien is (net als op een shirt). */
[data-theme="volleybal"] #home { padding-bottom: 150px; }
[data-theme="volleybal"] body:has(#play:not([hidden]))::before { opacity: 0.25; }
@media (orientation: portrait) and (max-height: 779px) {
  [data-theme="volleybal"] body:has(#play:not([hidden]))::before { opacity: 0; }
}
@media (orientation: landscape) and (max-height: 560px) {
  [data-theme="volleybal"] body::before { background-size: 190px auto; }
}
/* Het feestje bij de 33e puzzel: het rugnummer zelf dwarrelt mee, geel met een blauwe rand. */
.confetti span.jersey-33 { font: 800 var(--s, 24px)/1 "Nunito", sans-serif; color: var(--accent); -webkit-text-stroke: 1.5px var(--user); }

/* Briefje: wat Ruby zelf invult, in zijn handschrift. Het SVG-bestand is een masker,
   dus de kleur komt gewoon van het vakje (balpen, selectie, fout, pauze). */
.v.hand {
  /* Elk cijfer even hoog (68% van het vakje); de iets bredere doos houdt een 4 of 2 niet kleiner. */
  width: calc(var(--size) / 9 * 0.8);
  height: calc(var(--size) / 9 * 0.68);
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.v.hand.d1 { -webkit-mask-image: url("../hand/digit-1.svg"); mask-image: url("../hand/digit-1.svg"); }
.v.hand.d2 { -webkit-mask-image: url("../hand/digit-2.svg"); mask-image: url("../hand/digit-2.svg"); }
.v.hand.d3 { -webkit-mask-image: url("../hand/digit-3.svg"); mask-image: url("../hand/digit-3.svg"); }
.v.hand.d4 { -webkit-mask-image: url("../hand/digit-4.svg"); mask-image: url("../hand/digit-4.svg"); }
.v.hand.d5 { -webkit-mask-image: url("../hand/digit-5.svg"); mask-image: url("../hand/digit-5.svg"); }
.v.hand.d6 { -webkit-mask-image: url("../hand/digit-6.svg"); mask-image: url("../hand/digit-6.svg"); }
.v.hand.d7 { -webkit-mask-image: url("../hand/digit-7.svg"); mask-image: url("../hand/digit-7.svg"); }
.v.hand.d8 { -webkit-mask-image: url("../hand/digit-8.svg"); mask-image: url("../hand/digit-8.svg"); }
.v.hand.d9 { -webkit-mask-image: url("../hand/digit-9.svg"); mask-image: url("../hand/digit-9.svg"); }
/* Een fout cijfer krijgt een golvend lijntje eronder (net als de onderstreping bij gedrukte cijfers).
   Ook de pixelcijfers van Game Boy (dat zijn ook maskers, zonder echte tekst). */
:is(.cell.hand, .cell.pixel).wrong::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 3%;
  height: calc(var(--size) / 9 * 0.11);
  background-color: currentColor;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2Q2 0.2 4 2T8 2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 50% / auto 100% repeat-x;
  mask: var(--wave) 0 50% / auto 100% repeat-x;
}

/* Briefje: zijn handschrift als plaatje (logo, hartjes, opgelost-scherm, feestje).
   Net als de cijfers een masker, zodat het de kleur van het thema aanneemt. */
.hand-art {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.hand-art.logo { width: 190px; aspect-ratio: 757 / 188; color: var(--user); -webkit-mask-image: url("../hand/logo.svg"); mask-image: url("../hand/logo.svg"); }
.hand-art.hart-1 { aspect-ratio: 147 / 144; -webkit-mask-image: url("../hand/hart-1.svg"); mask-image: url("../hand/hart-1.svg"); }
.hand-art.hart-2 { aspect-ratio: 118 / 115; -webkit-mask-image: url("../hand/hart-2.svg"); mask-image: url("../hand/hart-2.svg"); }
.hand-art.goed-zo { width: 210px; aspect-ratio: 373 / 106; color: var(--user); -webkit-mask-image: url("../hand/goed-zo.svg"); mask-image: url("../hand/goed-zo.svg"); }
.hand-art.scribble-art { width: 230px; aspect-ratio: 1029 / 131; color: var(--user); -webkit-mask-image: url("../hand/ik-vind-je-heel-leuk.svg"); mask-image: url("../hand/ik-vind-je-heel-leuk.svg"); }
.brand-heart { width: 26px; color: var(--heart); }
.together-heart { width: 1.25em; vertical-align: -0.25em; margin-left: 2px; }
.solved-heart { width: 64px; color: var(--heart); }
#solved-title .goed-zo { display: block; margin: 0 auto; }
.scribble { margin: 14px 0 0; }
.scribble[hidden] { display: none; }
.scribble .hand-art { transform: rotate(-3deg); }
.confetti span.hand-art { width: var(--s, 24px); }

/* ---------- Nieuwe thema's: alles behalve de kleuren ---------- */

/* Robijn: de cijfers met een zachte glans, alsof het licht erop valt. */
/* Een gouden lijst om het bord; het gekozen vakje is een glanzende robijn met een gouden randje. */
[data-theme="robijn"] .board { background: var(--surface); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px rgb(212 166 74 / 45%), var(--shadow); }
[data-theme="robijn"] .cell.selected { background: radial-gradient(circle at 35% 30%, #ff5d86, #c8143f 55%, #7a0a26); outline: 2px solid #f0c46a; outline-offset: -2px; }
[data-theme="robijn"] .cell.wrong.selected { background: color-mix(in srgb, var(--wrong-bg) 60%, var(--sel)); }
[data-theme="robijn"] .card.daily { border-color: rgb(212 166 74 / 55%); background: radial-gradient(120% 90% at 90% 10%, rgb(255 93 134 / 22%), transparent 60%), linear-gradient(150deg, #4a0f22, #2a0814); }
/* De geslepen robijn rechtsboven, alleen op het startscherm (tijdens het spelen staan daar de knoppen). */
[data-theme="robijn"] body:has(#home:not([hidden])) { --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='-60 -60 120 120'%3E%3Cg opacity='0.95'%3E%3Cpolygon points='-34,-18 -18,-34 18,-34 34,-18 34,18 18,34 -18,34 -34,18' fill='%239e0f33'/%3E%3Cpolygon points='-34,-18 -18,-34 0,-14 -14,0' fill='%23ff5d86'/%3E%3Cpolygon points='-18,-34 18,-34 0,-14' fill='%23ff8aa7'/%3E%3Cpolygon points='18,-34 34,-18 14,0 0,-14' fill='%23e0264f'/%3E%3Cpolygon points='34,-18 34,18 14,0' fill='%23b8133a'/%3E%3Cpolygon points='34,18 18,34 0,14 14,0' fill='%237a0a26'/%3E%3Cpolygon points='18,34 -18,34 0,14' fill='%238e0c2e'/%3E%3Cpolygon points='-18,34 -34,18 -14,0 0,14' fill='%23c41a44'/%3E%3Cpolygon points='-34,18 -34,-18 -14,0' fill='%23e8395f'/%3E%3Cpolygon points='0,-14 14,0 0,14 -14,0' fill='%23ff2d5f'/%3E%3Cpolygon points='0,-14 14,0 0,0' fill='%23ff7d9d'/%3E%3Cpolygon points='-34,-18 -18,-34 18,-34 34,-18 34,18 18,34 -18,34 -34,18' fill='none' stroke='%23ffd1dc' stroke-opacity='0.5' stroke-width='1.2'/%3E%3Cpath d='M-22-26L-12-30' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E") right 12px top 8px / 72px 72px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.1 0 0 0 0 0.25 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat, radial-gradient(70% 45% at 50% 0%, rgb(200 20 63 / 28%), transparent 70%) no-repeat; }
/* Fout: in Robijn, Noorderlicht en Sporthal ook een randje, zodat het niet op een markering lijkt. */
:is([data-theme="robijn"], [data-theme="noorderlicht"], [data-theme="sporthal"]) .cell.wrong { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wrong) 60%, transparent); }

/* RubyxCube: zwarte kubusrand en een korte draai bij het oplossen (zie js/fx/kubus.js). */
[data-theme="rubyxcube"] .board { border-width: 3px; border-radius: 12px; }
.board.cube-turn { animation: cube-turn 1.25s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes cube-turn {
  0% { transform: perspective(1100px) rotateX(0) rotateY(0); }
  45% { transform: perspective(1100px) rotateX(14deg) rotateY(180deg) scale(0.88); }
  100% { transform: perspective(1100px) rotateX(0) rotateY(360deg); }
}

/* Koffiemonster: het latte-art-hartje bij het oplossen (zie js/fx/latte.js). */
.board-wrap { position: relative; }
.latte { position: absolute; left: 50%; top: 50%; width: min(46%, 220px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; filter: drop-shadow(0 8px 18px rgb(60 30 10 / 35%)); animation: latte-in 0.5s ease both, latte-out 0.6s ease 3.5s forwards; }
.latte svg { display: block; width: 100%; height: 100%; }
.latte .latte-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: latte-draw 1.1s ease-in-out 0.35s forwards; }
.latte .latte-fill { opacity: 0; animation: latte-fill 0.6s ease 1.3s forwards; }
.latte.still, .latte.still .latte-line, .latte.still .latte-fill { animation: none; stroke-dashoffset: 0; opacity: 1; }
@keyframes latte-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }
@keyframes latte-out { to { opacity: 0; } }
@keyframes latte-draw { to { stroke-dashoffset: 0; } }
@keyframes latte-fill { to { opacity: 1; } }

/* Gitaar: een houten bord met nerf; de dunne lijnen zijn snaren (liggend, glanzend) en
   fretten (staand), de dikke lijnen palissander. Het gekozen vakje is een plectrum. */
[data-theme="gitaar"] .board {
  --line: transparent;
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgb(140 85 30 / 0%) 0 9px, rgb(140 85 30 / 6%) 10px 11px, rgb(140 85 30 / 0%) 12px 23px),
    repeating-linear-gradient(88deg, rgb(255 245 225 / 0%) 0 30px, rgb(255 245 225 / 35%) 31px 36px, rgb(255 245 225 / 0%) 37px 70px),
    var(--surface);
}
[data-theme="gitaar"] .cell:where(:not(.peer, .same, .selected, .wrong, .in-shape, .shape-edge, .shape-accent)) { background-color: transparent; }
[data-theme="gitaar"] .board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(100% / 9 - 1.5px), #8f7350 calc(100% / 9 - 1.5px), #fff7df calc(100% / 9 - 0.3px), #6b5232 calc(100% / 9 + 1.2px),
      transparent calc(100% / 9 + 1.2px) calc(200% / 9 - 1.5px), #8f7350 calc(200% / 9 - 1.5px), #fff7df calc(200% / 9 - 0.3px), #6b5232 calc(200% / 9 + 1.2px),
      transparent calc(200% / 9 + 1.2px) calc(300% / 9)),
    repeating-linear-gradient(to right,
      transparent 0 calc(100% / 9 - 1.2px), #b9b2a4 calc(100% / 9 - 1.2px), #fbfaf6 calc(100% / 9), #8d8679 calc(100% / 9 + 1.2px),
      transparent calc(100% / 9 + 1.2px) calc(200% / 9 - 1.2px), #b9b2a4 calc(200% / 9 - 1.2px), #fbfaf6 calc(200% / 9), #8d8679 calc(200% / 9 + 1.2px),
      transparent calc(200% / 9 + 1.2px) calc(300% / 9));
}
[data-theme="gitaar"] .cell.selected { background: transparent; isolation: isolate; z-index: 2; } /* het plectrum ligt op de snaren */
[data-theme="gitaar"] .cell.selected::before {
  content: "";
  position: absolute;
  inset: 3%;
  z-index: -1;
  background: radial-gradient(90% 70% at 35% 25%, color-mix(in srgb, var(--sel) 55%, #ffffff), var(--sel) 60%, color-mix(in srgb, var(--sel) 80%, #6b3a10));
  -webkit-mask: var(--plectrum) center / contain no-repeat;
  mask: var(--plectrum) center / contain no-repeat;
}
[data-theme="gitaar"] .cell.wrong.selected::before { background: color-mix(in srgb, var(--wrong-bg) 60%, var(--sel)); }
[data-theme="gitaar"] body { --plectrum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C77 3 97 13 97 33C97 58 68 88 50 97C32 88 3 58 3 33C3 13 23 3 50 3Z'/%3E%3C/svg%3E"); }

/* Kampvuur: het gekozen vakje is een marshmallow aan een stokje boven het vuur. Hij
   begint wit en kleurt langzaam goudbruin (een laagje dat alleen in opacity aanzwelt;
   het cijfer blijft er donker en goed leesbaar op). */
[data-theme="kampvuur"] .cell.selected { background: var(--peer); isolation: isolate; }
[data-theme="kampvuur"] .cell.selected::before, [data-theme="kampvuur"] .cell.selected::after {
  content: ""; position: absolute; inset: 7%; z-index: -1; border-radius: 34% / 30%;
  background: radial-gradient(70% 60% at 40% 30%, #ffffff, var(--sel) 60%, #f3dcc0);
}
[data-theme="kampvuur"] .cell.selected::after { background: radial-gradient(80% 70% at 45% 35%, #f6c47c, #e2a050 60%, #c27a34); box-shadow: inset 0 -3px 4px rgb(120 60 20 / 45%); opacity: 0; animation: roosteren 5s ease-in forwards; }
@keyframes roosteren { to { opacity: 0.9; } }
[data-theme="kampvuur"] .cell.wrong { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wrong) 60%, transparent); }
/* Een fout cijfer op de marshmallow: dan geen marshmallow maar gewoon de foutkleur. */
[data-theme="kampvuur"] .cell.wrong.selected::before { background: var(--wrong-bg); }
[data-theme="kampvuur"] .cell.wrong.selected::after { display: none; }

/* Preitaart: een rand van bladerdeeg met ruitjespatroon (gouden reepjes kruiselings
   over elkaar) om het bord, en het gekozen vakje als een preiringetje: groene ringen
   om een licht hartje. */
[data-theme="preitaart"] .board {
  border: 11px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    repeating-linear-gradient(45deg, transparent 0 7px, rgb(150 90 20 / 35%) 7px 8px),
    repeating-linear-gradient(-45deg, #f2c66e 0 7px, #b97a1c 7px 8px, #f7d68e 8px 15px) border-box;
  box-shadow: inset 0 0 0 2px rgb(150 90 20 / 30%), var(--shadow);
}
[data-theme="preitaart"] .cell.selected { background: var(--surface); isolation: isolate; }
[data-theme="preitaart"] .cell.selected::before {
  content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--sel) 0 46%, #f4fbe8 47% 54%, #7fb24e 55% 64%, #cfe8a8 65% 70%, #4f8a2c 71%);
}
[data-theme="preitaart"] .cell.wrong.selected::before { background: var(--wrong-bg); }
/* De taartpunt bij het oplossen (zie js/fx/preitaart.js): een bijgesneden kopie van het bord. */
.taartpunt { position: absolute; z-index: 3; pointer-events: none; }
.taartpunt > div { position: absolute; inset: 0; clip-path: polygon(50% 50%, 100% 24%, 100% 76%); }
.taart-gat { background: radial-gradient(circle at 80% 50%, #d9a441, #a8701c); opacity: 0; animation: taart-gat 2.2s ease both; }
.taart-stuk { animation: taart-stuk 2.2s cubic-bezier(0.3, 0.8, 0.3, 1) both; filter: drop-shadow(4px 6px 6px rgb(80 50 10 / 35%)); }
.taart-stuk .board { box-shadow: none; }
@keyframes taart-stuk { 0% { transform: none; } 30%, 62% { transform: translate(26px, -6px) rotate(3deg); } 100% { transform: none; } }
@keyframes taart-gat { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* De 🥧 in de begroeting is een knopje (het geheime thema Preitaart); hij wiebelt bij een tik. */
.pie-tap { display: inline-block; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; touch-action: manipulation; }
.pie-tap.wiebel { animation: wiebel 0.45s ease; }
@keyframes wiebel { 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg) scale(1.1); } }

/* Vertrekhal: elk vakje een klapbordje met een naad in het midden, en het
   statusbordje boven het bord (zie js/fx/vertrekhal.js). Een cijfer dat
   doorratelt klapt even om (.klap, alleen transform). */
[data-theme="vertrekhal"] .board { border: 3px solid #2b323d; border-radius: 10px; }
[data-theme="vertrekhal"] .cell::before { content: ""; position: absolute; left: 6%; right: 6%; top: calc(50% - 0.5px); height: 1px; background: rgb(0 0 0 / 55%); pointer-events: none; }
[data-theme="vertrekhal"] .cell .v { font-family: "Nunito", sans-serif; font-weight: 800; }
[data-theme="vertrekhal"] .cell .v.klap { animation: klap 0.11s ease-in-out; }
@keyframes klap { 50% { transform: scaleY(0.15); } }
.flapstatus { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; white-space: nowrap; }
.flapstatus span { display: inline-grid; place-items: center; min-width: 15px; height: 24px; padding: 0 2px; border-radius: 3px; background: #1c222b; box-shadow: inset 0 -12px 0 rgb(0 0 0 / 18%); color: #ffd23f; font-weight: 800; font-size: 0.85rem; }
.flapstatus span.leeg { background: transparent; box-shadow: none; }
.flapstatus span.klap { animation: klap 0.18s ease-in-out both; }

/* Gran Canaria: de palmboom rechtsboven op het startscherm (js/fx/gran-canaria.js).
   Tik vijf keer en er valt een kokosnoot naast de stam. */
.palm { float: right; position: relative; width: 84px; height: 132px; margin: -6px -6px 4px 8px; }
.palm-tree { position: absolute; inset: 0 0 0 4px; padding: 0; border: 0; background: none; touch-action: manipulation; }
.palm-tree svg { display: block; width: 100%; height: 100%; }
.palm-tree .kroon { transform-box: view-box; transform-origin: 45px 36px; }
.palm-tree.wiegen .kroon { animation: wiegen 0.6s ease-in-out; }
@keyframes wiegen { 30% { transform: rotate(-7deg); } 70% { transform: rotate(5deg); } }
.kokosnoot { position: absolute; left: -6px; bottom: -6px; width: 44px; height: 44px; padding: 8px; border: 0; background: none; touch-action: manipulation; animation: kokos-valt 0.7s cubic-bezier(0.5, 0, 0.8, 0.6) both; transition: opacity 0.3s ease, transform 0.3s ease; }
.kokosnoot svg { display: block; width: 100%; height: 100%; }
.kokosnoot.weg { opacity: 0; transform: scale(1.4); }
@keyframes kokos-valt { 0% { transform: translate(36px, -96px); } 80% { transform: translate(0, 0); } 90% { transform: translate(0, -6px); } 100% { transform: none; } }

/* Onzichtbare inkt: het uv-lampje. Rond het gekozen vakje (rij, kolom en blok)
   gloeien de cijfers paars op; de gewone kleuren halen al 4.5:1, dit is extra.
   Bij het oplossen gloeit het hele bord (.uv-vol) en verschijnt het briefje. */
[data-theme="onzichtbare-inkt"] .board { background: radial-gradient(120% 90% at 30% 20%, #1e1a2a, var(--surface)); }
[data-theme="onzichtbare-inkt"] .cell .v { transition: color 0.4s ease, text-shadow 0.4s ease; }
[data-theme="onzichtbare-inkt"] :is(.cell.peer, .cell.selected:not(.wrong)) .v,
[data-theme="onzichtbare-inkt"] .board.uv-vol .cell .v { color: #f1e6ff; text-shadow: 0 0 6px #b46cff, 0 0 14px rgb(160 90 255 / 70%); }
[data-theme="onzichtbare-inkt"] .cell.selected:not(.wrong) .v { color: var(--sel-ink); text-shadow: 0 0 8px #ffffff; }
[data-theme="onzichtbare-inkt"] .board.uv-vol { box-shadow: 0 0 0 2px #b37bff, 0 0 60px 10px rgb(150 80 255 / 40%); transition: box-shadow 0.8s ease; }
[data-theme="onzichtbare-inkt"] .cell.wrong { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wrong) 60%, transparent); }
.uv-briefje { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; background: radial-gradient(70% 22% at 50% 50%, rgb(12 8 22 / 92%), rgb(12 8 22 / 70%) 60%, transparent); animation: uv-briefje 5s ease both; }
.uv-briefje .hand-art { width: min(86%, 380px); aspect-ratio: 1029 / 131; color: #e8d4ff; -webkit-mask-image: url("../hand/ik-vind-je-heel-leuk.svg"); mask-image: url("../hand/ik-vind-je-heel-leuk.svg"); filter: drop-shadow(0 0 6px #b46cff) drop-shadow(0 0 14px #8a3dff); transform: rotate(-4deg); }
@keyframes uv-briefje { 0% { opacity: 0; } 25%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Briefje: het getekende hartje op het opgelost-scherm kleurt paars als ze het ingedrukt
   houdt (--uv gaat van 0 naar 1 in 3 seconden; het geheim van Onzichtbare inkt). */
.solved-heart { --uv: 0; touch-action: none; color: color-mix(in srgb, #9b4dff calc(var(--uv) * 100%), var(--heart)); filter: drop-shadow(0 0 calc(var(--uv) * 12px) rgb(155 77 255 / 80%)); }

/* Wandeltijd: het gekozen vakje is een pootafdruk (een groot kussentje en vier
   teentjes, in --sel), het cijfer staat er donker en goed leesbaar op. */
[data-theme="wandeltijd"] .cell.selected { background: var(--surface); isolation: isolate; }
[data-theme="wandeltijd"] .cell.selected::before {
  content: ""; position: absolute; inset: 4%; z-index: -1; background: var(--sel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='26' rx='12' ry='10.5'/%3E%3Cellipse cx='6.5' cy='15' rx='4.2' ry='5.4'/%3E%3Cellipse cx='14.5' cy='7.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='25.5' cy='7.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='33.5' cy='15' rx='4.2' ry='5.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='26' rx='12' ry='10.5'/%3E%3Cellipse cx='6.5' cy='15' rx='4.2' ry='5.4'/%3E%3Cellipse cx='14.5' cy='7.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='25.5' cy='7.5' rx='4.2' ry='5.6'/%3E%3Cellipse cx='33.5' cy='15' rx='4.2' ry='5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="wandeltijd"] .cell.selected .v { transform: translateY(12%); }
[data-theme="wandeltijd"] .cell.wrong.selected::before { background: var(--wrong-bg); }

/* Pootjes vangen: de 🐾 uit de confetti als knopjes in het opgelost-scherm (zie
   pawButton in ui.js). Ze liggen onder de knoppen, dus die blijven altijd te raken. */
#solved-dialog .row { position: relative; z-index: 2; }
.paw-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.paw-catch {
  position: absolute; bottom: -50px; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px;
  padding: 0; border: 0; background: none; font-size: var(--s, 28px); line-height: 1; pointer-events: auto; touch-action: manipulation;
  animation: paw-up var(--d, 5s) linear var(--delay, 0s) both;
}
@keyframes paw-up {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(var(--x, 0), -600px) rotate(var(--r, 20deg)); opacity: 0.6; }
}
/* Gevangen: vanaf waar hij was (--at, gezet in ui.js) springt hij even op en verdwijnt. */
.paw-catch.gevangen { pointer-events: none; animation: pootje-hup 0.7s ease-out both; }
@keyframes pootje-hup { 0% { opacity: 1; transform: var(--at); } 40% { opacity: 1; transform: var(--at) translateY(-40px) scale(1.6); } 100% { opacity: 0; transform: var(--at) translateY(-28px) scale(1.2); } }

/* Beachvolleybal: de golf rolt heel langzaam mee. Op het speelscherm wat zachter. */
@keyframes waves { from { background-position: 0 100%; } to { background-position: 480px 100%; } }
[data-theme="beachvolleybal"] .board { border-radius: 14px; }
[data-theme="beachvolleybal"] #home { padding-bottom: 72px; }
[data-theme="beachvolleybal"] body:has(#play:not([hidden]))::before { opacity: 0.6; }

/* Krant: de sudoku achter in de krant. Rechte hoeken, dunne lijnen, alles in Fraunces. */
[data-theme="krant"] .board { border-radius: 2px; box-shadow: none; }
[data-theme="krant"] .cell.user { font-family: "Fraunces", Georgia, serif; font-weight: 400; }
/* Het gekozen vakje: geen zwart blok maar een dikke zwarte rand met potloodarcering, zoals in de krant. */
[data-theme="krant"] .cell.selected {
  background: repeating-linear-gradient(135deg, rgb(27 26 23 / 9%) 0 1px, transparent 1px 5px), var(--surface);
  box-shadow: inset 0 0 0 3px var(--ink);
}
[data-theme="krant"] .cell.selected.given { color: var(--given); }
[data-theme="krant"] .cell.selected.user:not(.wrong) { color: var(--user); }
[data-theme="krant"] .cell.selected .notes { color: var(--ink-soft); }
[data-theme="krant"] .cell.wrong.selected { background: var(--wrong-bg); }
[data-theme="krant"] .home-head { border-bottom: 4px double var(--ink); margin-bottom: 4px; }
[data-theme="krant"] .brand { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: 0.14em; color: var(--ink); }
[data-theme="krant"] :is(.card, .level, .nav-btn, .num, .theme-card, .install-banner, .hint-card) { border-radius: 3px; box-shadow: none; }
[data-theme="krant"] :is(.card, .level, .nav-btn) { border-color: var(--line); }
[data-theme="krant"] .mini-board { border-radius: 3px; }
[data-theme="krant"] .mini-board i { border-radius: 0; }

/* Krijtbord: ruwe krijtlijnen over het bord (een SVG-filter maakt ze een beetje
   bibberig), gegeven cijfers strak en haar eigen cijfers met de hand in krijt. */
[data-theme="krijtbord"] .board {
  --line: transparent;
  --line-strong: transparent;
  position: relative;
  border: 2px solid rgb(243 241 231 / 60%);
  background: radial-gradient(120% 80% at 30% 20%, rgb(255 255 255 / 5%), transparent 60%), var(--surface);
}
[data-theme="krijtbord"] .board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--chalk-lines) 0 0 / 100% 100% no-repeat;
}
[data-theme="krijtbord"] body { --chalk-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-2%25' y='-2%25' width='104%25' height='104%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23f3f1e7' stroke-linecap='round' filter='url(%23r)'%3E%3Cpath d='M100 0C97.5 300 102.8 600 99.5 900M0 100C300 97.8 600 102.9 900 99M200 0C202.4 300 197.2 600 200.7 900M0 200C300 202.1 600 197.1 900 201.1M400 0C402.2 300 397.1 600 400.9 900M0 400C300 401.9 600 397 900 401.3M500 0C497.9 300 502.9 600 499 900M0 500C300 498.2 600 503 900 498.6M700 0C698 300 703 600 698.7 900M0 700C300 698.4 600 703 900 698.4M800 0C801.9 300 797 600 801.4 900M0 800C300 801.5 600 797 900 801.7' stroke-opacity='0.42' stroke-width='2.6'/%3E%3Cpath d='M300 0C297.7 300 302.9 600 299.2 900M0 300C300 298 600 303 900 298.8M600 0C602 300 597 600 601.1 900M0 600C300 601.7 600 597 900 601.5' stroke-opacity='0.85' stroke-width='5.5'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme="krijtbord"] .cell.given { font-weight: 500; }
[data-theme="krijtbord"] .v.hand { opacity: 0.94; filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 60%)); }
[data-theme="krijtbord"] .cell.selected .v.hand { filter: none; opacity: 1; }

/* Game Boy: vierkante hoeken, harde pixelschaduw en pixelcijfers op het bord en de
   cijfertoetsen (zelf getekend, 5 × 7; gegeven cijfers één pixel vetter; notities
   blijven gewone letters, zo klein zijn pixels niet te lezen). Het SVG-bestand is een masker, dus de
   kleur komt van het vakje, net als bij het handschrift in Briefje. */
[data-theme="gameboy"] *, [data-theme="gameboy"] *::before, [data-theme="gameboy"] *::after { border-radius: 0 !important; }
[data-theme="gameboy"] .board { border: 4px solid var(--ink); }
[data-theme="gameboy"] :is(.card, .level, .nav-btn, .num, .theme-card, .install-banner, .hint-card, dialog.sheet) { border: 2px solid var(--ink); }
[data-theme="gameboy"] .btn.primary { box-shadow: 3px 3px 0 var(--ink); }
[data-theme="gameboy"] .together { color: var(--ink); }
[data-theme="gameboy"] .v.pixel, [data-theme="gameboy"] .num .nd {
  display: block;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
[data-theme="gameboy"] .v.pixel { width: calc(var(--size) / 9 * 0.46); height: calc(var(--size) / 9 * 0.56); }
[data-theme="gameboy"] .cell.given .v.pixel { width: calc(var(--size) / 9 * 0.54); }
[data-theme="gameboy"] .num .nd { width: 15px; height: 21px; }
[data-theme="gameboy"] body {
  --px1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM2 2h1v1h-1zM2 3h1v1h-1zM2 4h1v1h-1zM2 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h2v1h-2zM1 1h2v1h-2zM2 1h2v1h-2zM2 2h2v1h-2zM2 3h2v1h-2zM2 4h2v1h-2zM2 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM4 1h1v1h-1zM4 2h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1zM1 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM0 1h2v1h-2zM4 1h2v1h-2zM4 2h2v1h-2zM3 3h2v1h-2zM2 4h2v1h-2zM1 5h2v1h-2zM0 6h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2zM4 6h2v1h-2z'/%3E%3C/svg%3E");
  --px3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM3 1h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h-2zM1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM4 0h2v1h-2zM3 1h2v1h-2zM2 2h2v1h-2zM3 3h2v1h-2zM4 4h2v1h-2zM0 5h2v1h-2zM4 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h2v1h-2zM2 1h2v1h-2zM3 1h2v1h-2zM1 2h2v1h-2zM3 2h2v1h-2zM0 3h2v1h-2zM3 3h2v1h-2zM0 4h2v1h-2zM1 4h2v1h-2zM2 4h2v1h-2zM3 4h2v1h-2zM4 4h2v1h-2zM3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM0 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 3h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h-2zM1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM4 0h2v1h-2zM0 1h2v1h-2zM0 2h2v1h-2zM1 2h2v1h-2zM2 2h2v1h-2zM3 2h2v1h-2zM4 3h2v1h-2zM4 4h2v1h-2zM0 5h2v1h-2zM4 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h-1zM3 0h1v1h-1zM1 1h1v1h-1zM0 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h2v1h-2zM3 0h2v1h-2zM1 1h2v1h-2zM0 2h2v1h-2zM0 3h2v1h-2zM1 3h2v1h-2zM2 3h2v1h-2zM3 3h2v1h-2zM0 4h2v1h-2zM4 4h2v1h-2zM0 5h2v1h-2zM4 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM4 1h1v1h-1zM3 2h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1h-2zM1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM4 0h2v1h-2zM4 1h2v1h-2zM3 2h2v1h-2zM2 3h2v1h-2zM1 4h2v1h-2zM1 5h2v1h-2zM1 6h2v1h-2z'/%3E%3C/svg%3E");
  --px8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM0 1h2v1h-2zM4 1h2v1h-2zM0 2h2v1h-2zM4 2h2v1h-2zM1 3h2v1h-2zM2 3h2v1h-2zM3 3h2v1h-2zM0 4h2v1h-2zM4 4h2v1h-2zM0 5h2v1h-2zM4 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2zM3 6h2v1h-2z'/%3E%3C/svg%3E");
  --px9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1z'/%3E%3C/svg%3E");
  --pxb9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 7' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h-2zM2 0h2v1h-2zM3 0h2v1h-2zM0 1h2v1h-2zM4 1h2v1h-2zM0 2h2v1h-2zM4 2h2v1h-2zM1 3h2v1h-2zM2 3h2v1h-2zM3 3h2v1h-2zM4 3h2v1h-2zM4 4h2v1h-2zM3 5h2v1h-2zM1 6h2v1h-2zM2 6h2v1h-2z'/%3E%3C/svg%3E");
}
[data-theme="gameboy"] :is(.cell.user .v.pixel.d1, .num .nd.d1) { -webkit-mask-image: var(--px1); mask-image: var(--px1); }
[data-theme="gameboy"] .cell.given .v.pixel.d1 { -webkit-mask-image: var(--pxb1); mask-image: var(--pxb1); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d2, .num .nd.d2) { -webkit-mask-image: var(--px2); mask-image: var(--px2); }
[data-theme="gameboy"] .cell.given .v.pixel.d2 { -webkit-mask-image: var(--pxb2); mask-image: var(--pxb2); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d3, .num .nd.d3) { -webkit-mask-image: var(--px3); mask-image: var(--px3); }
[data-theme="gameboy"] .cell.given .v.pixel.d3 { -webkit-mask-image: var(--pxb3); mask-image: var(--pxb3); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d4, .num .nd.d4) { -webkit-mask-image: var(--px4); mask-image: var(--px4); }
[data-theme="gameboy"] .cell.given .v.pixel.d4 { -webkit-mask-image: var(--pxb4); mask-image: var(--pxb4); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d5, .num .nd.d5) { -webkit-mask-image: var(--px5); mask-image: var(--px5); }
[data-theme="gameboy"] .cell.given .v.pixel.d5 { -webkit-mask-image: var(--pxb5); mask-image: var(--pxb5); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d6, .num .nd.d6) { -webkit-mask-image: var(--px6); mask-image: var(--px6); }
[data-theme="gameboy"] .cell.given .v.pixel.d6 { -webkit-mask-image: var(--pxb6); mask-image: var(--pxb6); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d7, .num .nd.d7) { -webkit-mask-image: var(--px7); mask-image: var(--px7); }
[data-theme="gameboy"] .cell.given .v.pixel.d7 { -webkit-mask-image: var(--pxb7); mask-image: var(--pxb7); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d8, .num .nd.d8) { -webkit-mask-image: var(--px8); mask-image: var(--px8); }
[data-theme="gameboy"] .cell.given .v.pixel.d8 { -webkit-mask-image: var(--pxb8); mask-image: var(--pxb8); }
[data-theme="gameboy"] :is(.cell.user .v.pixel.d9, .num .nd.d9) { -webkit-mask-image: var(--px9); mask-image: var(--px9); }
[data-theme="gameboy"] .cell.given .v.pixel.d9 { -webkit-mask-image: var(--pxb9); mask-image: var(--pxb9); }

/* Sporthal: rode 7-segment-cijfers zoals op een scorebord, op het bord en de
   cijfertoetsen (zelf getekend; de segmenten die uit staan gloeien heel zacht mee).
   Net als bij Game Boy is het SVG-bestand een masker, dus de kleur komt van het
   vakje. De blokranden zijn veldlijnen in drie kleuren en de timer zit in een scorebordje. */
[data-theme="sporthal"] .v.led, [data-theme="sporthal"] .num .nd {
  display: block;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
[data-theme="sporthal"] .v.led { width: calc(var(--size) / 9 * 0.44); height: calc(var(--size) / 9 * 0.62); }
[data-theme="sporthal"] .num .nd { width: 15px; height: 22px; }
[data-theme="sporthal"] body {
  --led1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5Z' fill-opacity='0.08'/%3E%3Cpath d='M11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9Z'/%3E%3C/g%3E%3C/svg%3E");
  --led2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --led3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --led4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9Z' fill-opacity='0.08'/%3E%3Cpath d='M1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9Z'/%3E%3C/g%3E%3C/svg%3E");
  --led5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --led6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9Z'/%3E%3C/g%3E%3C/svg%3E");
  --led7: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9Z'/%3E%3C/g%3E%3C/svg%3E");
  --led8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5Z'/%3E%3C/g%3E%3C/svg%3E");
  --led9: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 20'%3E%3Cg transform='translate(1.6 0) skewX(-5)'%3E%3Cpath d='M1.6 10.6L2.9 11.9V16.5L1.6 17.8L0.3 16.5V11.9Z' fill-opacity='0.08'/%3E%3Cpath d='M2.2 1.6L3.5 0.3H9.5L10.8 1.6L9.5 2.9H3.5ZM11.4 2.2L12.7 3.5V8.1L11.4 9.4L10.1 8.1V3.5ZM11.4 10.6L12.7 11.9V16.5L11.4 17.8L10.1 16.5V11.9ZM2.2 18.4L3.5 17.1H9.5L10.8 18.4L9.5 19.7H3.5ZM1.6 2.2L2.9 3.5V8.1L1.6 9.4L0.3 8.1V3.5ZM2.2 10L3.5 8.7H9.5L10.8 10L9.5 11.3H3.5Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="sporthal"] :is(.v.led.d1, .num .nd.d1) { -webkit-mask-image: var(--led1); mask-image: var(--led1); }
[data-theme="sporthal"] :is(.v.led.d2, .num .nd.d2) { -webkit-mask-image: var(--led2); mask-image: var(--led2); }
[data-theme="sporthal"] :is(.v.led.d3, .num .nd.d3) { -webkit-mask-image: var(--led3); mask-image: var(--led3); }
[data-theme="sporthal"] :is(.v.led.d4, .num .nd.d4) { -webkit-mask-image: var(--led4); mask-image: var(--led4); }
[data-theme="sporthal"] :is(.v.led.d5, .num .nd.d5) { -webkit-mask-image: var(--led5); mask-image: var(--led5); }
[data-theme="sporthal"] :is(.v.led.d6, .num .nd.d6) { -webkit-mask-image: var(--led6); mask-image: var(--led6); }
[data-theme="sporthal"] :is(.v.led.d7, .num .nd.d7) { -webkit-mask-image: var(--led7); mask-image: var(--led7); }
[data-theme="sporthal"] :is(.v.led.d8, .num .nd.d8) { -webkit-mask-image: var(--led8); mask-image: var(--led8); }
[data-theme="sporthal"] :is(.v.led.d9, .num .nd.d9) { -webkit-mask-image: var(--led9); mask-image: var(--led9); }
[data-theme="sporthal"] .board { border: 3px solid #2fa35a; border-radius: 8px; }
[data-theme="sporthal"] .cell:nth-child(9n + 3), [data-theme="sporthal"] .cell:nth-child(9n + 6) { border-right-color: #e0662a; }
[data-theme="sporthal"] .cell:nth-child(n + 19):nth-child(-n + 27),
[data-theme="sporthal"] .cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom-color: #2f6fd1; }
[data-theme="sporthal"] .timer { display: inline-flex; align-items: center; gap: 8px; padding: 1px 10px; border-radius: 6px; background: #1f1a17; color: #ff6a55; font-weight: 800; letter-spacing: 0.08em; box-shadow: inset 0 0 0 2px #4a4038; }
[data-theme="sporthal"] .timer::before { content: "THUIS 33"; font-size: 0.68rem; color: #ffcf33; letter-spacing: 0.12em; }

/* Kleine eigen details voor de thema's zonder bewegende laag (in een eigen regel,
   zodat de themablokken zelf alleen kleuren bevatten). Zon en maan alleen op het
   startscherm: tijdens het spelen staan daar de knoppen. */
html[data-theme="zonnig"] body:has(#home:not([hidden])) { --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg transform='translate(140 60)'%3E%3Ccircle r='38' fill='%23ffd54a' fill-opacity='0.32'/%3E%3Ccircle r='26' fill='%23ffd54a' fill-opacity='0.3'/%3E%3Cpath d='M48.3 12.9L67.6 18.0M35.4 35.3L49.6 49.4M13.0 48.3L18.2 67.6M-12.9 48.3L-18.0 67.6M-35.3 35.4L-49.4 49.6M-48.3 13.0L-67.6 18.2M-48.3 -12.9L-67.6 -18.0M-35.4 -35.3L-49.6 -49.4M-13.0 -48.3L-18.2 -67.6M12.9 -48.3L18.0 -67.6M35.3 -35.4L49.4 -49.6M48.3 -13.0L67.6 -18.2' stroke='%23f5c02e' stroke-opacity='0.38' stroke-width='5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") right -50px top -60px / 200px 200px no-repeat; }
html[data-theme="nacht"] body:has(#home:not([hidden])) { --decor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='120'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='150' height='120' fill='white'/%3E%3Ccircle cx='112' cy='38' r='22' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='100' cy='46' r='24' fill='%23f5c451' fill-opacity='0.55' mask='url(%23m)'/%3E%3Cg fill='%23ffd772' fill-opacity='0.6'%3E%3Cpath transform='translate(40 30) scale(1)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(62 82) scale(0.7)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(132 92) scale(0.8)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3Cpath transform='translate(20 70) scale(0.6)' d='M0-4L.9-.9 4 0 .9.9 0 4-.9.9-4 0-.9-.9Z'/%3E%3C/g%3E%3C/svg%3E") right 0 top 0 / 150px 120px no-repeat; }
html[data-theme="lelie"] body { --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='240' viewBox='0 0 220 240'%3E%3Cg opacity='0.55'%3E%3Cpath d='M60 240C66 200 78 160 96 128' stroke='%238fae7e' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M70 236C40 214 22 186 18 156C44 168 64 196 74 228Z' fill='%23a9c497'/%3E%3Cpath d='M80 238C104 222 130 214 160 216C140 232 112 242 84 242Z' fill='%239bb98a'/%3E%3Cg transform='translate(98 124)'%3E%3Cpath transform='rotate(-62) scale(0.95)' d='M0 0C-9-10-8-34 0-46C8-34 9-10 0 0Z' fill='%23ffffff' stroke='%23d98aa3' stroke-opacity='0.7' stroke-width='1.4'/%3E%3Cpath transform='rotate(62) scale(0.95)' d='M0 0C-9-10-8-34 0-46C8-34 9-10 0 0Z' fill='%23ffffff' stroke='%23d98aa3' stroke-opacity='0.7' stroke-width='1.4'/%3E%3Cpath transform='rotate(-28) scale(1)' d='M0 0C-9-10-8-34 0-46C8-34 9-10 0 0Z' fill='%23ffffff' stroke='%23d98aa3' stroke-opacity='0.7' stroke-width='1.4'/%3E%3Cpath transform='rotate(28) scale(1)' d='M0 0C-9-10-8-34 0-46C8-34 9-10 0 0Z' fill='%23ffffff' stroke='%23d98aa3' stroke-opacity='0.7' stroke-width='1.4'/%3E%3Cpath transform='rotate(0) scale(1.05)' d='M0 0C-9-10-8-34 0-46C8-34 9-10 0 0Z' fill='%23ffffff' stroke='%23d98aa3' stroke-opacity='0.7' stroke-width='1.4'/%3E%3Cg stroke='%23c98a3e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 0L-6-22M0 0L0-26M0 0L6-22'/%3E%3C/g%3E%3Cg fill='%23c0703a'%3E%3Ccircle cx='-6' cy='-23' r='1.8'/%3E%3Ccircle cx='0' cy='-27' r='1.8'/%3E%3Ccircle cx='6' cy='-23' r='1.8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left -26px bottom -18px / 180px auto no-repeat; --decor-layer: block; }
html[data-theme="gran-canaria"] body { --decor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 84C80 64 150 66 230 82S380 104 480 80V120H0Z' fill='%23f2c58f' fill-opacity='0.38'/%3E%3Cpath d='M0 100C90 88 170 92 260 102S400 112 480 98V120H0Z' fill='%23e9a96b' fill-opacity='0.3'/%3E%3C/svg%3E") right 0 bottom 0 / 480px 120px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 84C80 64 150 66 230 82S380 104 480 80V120H0Z' fill='%23f2c58f' fill-opacity='0.38'/%3E%3Cpath d='M0 100C90 88 170 92 260 102S400 112 480 98V120H0Z' fill='%23e9a96b' fill-opacity='0.3'/%3E%3C/svg%3E") 0 100% / 480px 120px repeat-x; --decor-layer: block; }

/* Emoji in de stijl van het thema: zwart-wit in Krant en Krijtbord, groen in Game Boy
   (de .emo-spans komen uit withEmoji in ui.js). */
[data-theme="krant"] :is(.emo, .level-emoji, .cal-emoji, .book-level-title > span, .message-icon, .pause-emoji, .solved-emoji, .wr-emoji, .secret-emoji) { filter: grayscale(1); }
[data-theme="krijtbord"] :is(.emo, .level-emoji, .cal-emoji, .book-level-title > span, .message-icon, .pause-emoji, .solved-emoji, .wr-emoji, .secret-emoji) { filter: grayscale(1) brightness(1.15) contrast(0.9); }
[data-theme="gameboy"] :is(.emo, .level-emoji, .cal-emoji, .book-level-title > span, .message-icon, .pause-emoji, .solved-emoji, .wr-emoji, .secret-emoji) { filter: grayscale(1) sepia(1) hue-rotate(50deg) saturate(1.8) brightness(0.8); }

/* Zonnebloem: de bloem op het startscherm (zie js/fx/zonnebloem.js). */
.home-head { position: relative; }
.sunflower { float: right; width: 60px; height: 100px; margin: 0 -4px 4px 10px; shape-outside: inset(var(--plant-top, 0%) 0 0 0); padding: 0; border: 0; background: none; touch-action: manipulation; }
.sunflower svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sunflower .plant { transform-box: view-box; transform-origin: 30px 86px; animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* Volleybal: de bal om hoog te houden, in een eigen strookje rechts in het kopje van het
   startscherm (zie js/fx/volleybal.js). De tekst loopt ernaast, de bal komt nooit over
   een knop. --air is hoe lang hij in de lucht is (KEEP_UP in themes.js). */
.keepup { float: right; position: relative; width: 64px; height: 150px; margin: 0 -4px 4px 8px; animation: fade-in 0.6s ease both; transition: opacity 0.5s ease; }
.keepup.weg { opacity: 0; }
.keepup-ball { position: absolute; left: 4px; bottom: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none; touch-action: manipulation; }
.keepup-ball svg { display: block; width: 100%; height: 100%; }
.keepup-ball.up { animation: hooghouden var(--air) linear; }
.keepup-ball.plof { animation: plof 0.4s ease-out; }
@keyframes hooghouden {
  0% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  50% { transform: translateY(-74px) rotate(160deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  100% { transform: translateY(0) rotate(320deg); }
}
@keyframes plof { 40% { transform: scale(1.08, 0.86) translateY(4px); } }
.keepup-count { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.keepup-count[hidden] { display: none; }

/* Hoog contrast: dikkere lijnen en randen, en de selectie ook als dikke zwarte rand
   (niet alleen een kleur). */
[data-theme="hoog-contrast"] .board { border-width: 3px; border-radius: 8px; }
[data-theme="hoog-contrast"] .cell:nth-child(9n + 3), [data-theme="hoog-contrast"] .cell:nth-child(9n + 6) { border-right-width: 3px; }
[data-theme="hoog-contrast"] .cell:nth-child(n + 19):nth-child(-n + 27),
[data-theme="hoog-contrast"] .cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom-width: 3px; }
[data-theme="hoog-contrast"] .cell.selected { box-shadow: inset 0 0 0 4px #000000; }
[data-theme="hoog-contrast"] .cell.user { font-weight: 800; }
[data-theme="hoog-contrast"] :is(.card, .level, .nav-btn, .num, .pill, .theme-card, .install-banner, .hint-card, dialog.sheet) { border: 2px solid #000000; }
[data-theme="hoog-contrast"] .num.active { box-shadow: inset 0 0 0 3px #000000; }
[data-theme="hoog-contrast"] .tool[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #000000; }
[data-theme="hoog-contrast"] :is(.muted, .card-kicker, .card-meta, .level-tag, .level-best) { color: var(--ink); }

/* ---------- Natuur: de effectlagen (js/fx/) ---------- */
/* Alles beweegt alleen met transform en opacity. --fx-tempo maakt het in de
   slaapstand half zo snel; html.fx-paused (app niet in beeld) zet alles stil;
   met minder beweging staat alles stil op een mooie plek (zie onderaan). */
:root { --fx-tempo: 1; }
html[data-sleep] { --fx-tempo: 2; }
.fx-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-layer > i { position: absolute; display: block; will-change: transform, opacity; }
.fx-over { position: fixed; inset: 0; z-index: 11; overflow: hidden; pointer-events: none; }
.fx-over > i { position: absolute; display: block; }
.fx-over svg, .fx-animal svg { display: block; width: 100%; height: auto; }
html.fx-paused :is(.fx-layer, .fx-over, .fx-animal) *, html.fx-paused .fx-animal { animation-play-state: paused !important; }

/* Waddenzee: glinstering over het streepje zee onderaan. */
.fx-waddenzee .glint { left: 30%; bottom: 63px; width: 40%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 90%), transparent); animation: glint calc(26s * var(--fx-tempo)) linear infinite; }
.fx-waddenzee .glint.g2 { left: 60%; bottom: 66px; width: 22%; opacity: 0.7; animation-duration: calc(38s * var(--fx-tempo)); animation-delay: -15s; }
@keyframes glint { from { transform: translateX(-110vw); } to { transform: translateX(80vw); } }

/* Bos: lichtvlekken die zacht opgloeien. */
.fx-bos .zon { width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, rgb(255 238 160 / 55%), rgb(255 238 160 / 0%) 70%); opacity: 0.6; animation: zon calc(var(--d) * var(--fx-tempo)) ease-in-out infinite alternate; }
@keyframes zon { from { opacity: 0.3; transform: scale(0.9); } to { opacity: 0.9; transform: translate(14px, 8px) scale(1.08); } }
/* Blaadjes die dwarrelen bij het oplossen. */
.fx-blaadjes i { top: -40px; width: var(--s); opacity: 0; animation: blad calc(var(--d) * var(--fx-tempo)) ease-in both; }
@keyframes blad { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0.85; transform: translate(var(--x), 110vh) rotate(var(--r)); } }

/* Noorderlicht: brede lichtbanen boven het bord, die heel langzaam golven. */
.fx-noorderlicht .baan {
  left: -40%; top: 0; width: 180%; height: 36vh; opacity: 0.6;
  background: linear-gradient(90deg, transparent 6%, rgb(94 230 168 / 55%) 30%, rgb(140 245 205 / 35%) 45%, rgb(170 110 255 / 45%) 66%, transparent 92%);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 38%, #000 55%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 38%, #000 55%, transparent);
  transform: skewY(-5deg);
  animation: baan calc(var(--d) * var(--fx-tempo)) ease-in-out infinite alternate;
  transition: opacity 1.4s ease;
}
.fx-noorderlicht .b2 { top: 9vh; opacity: 0.45; background: linear-gradient(90deg, transparent 8%, rgb(170 110 255 / 45%) 28%, rgb(94 230 168 / 40%) 58%, transparent 90%); animation-direction: alternate-reverse; }
.fx-noorderlicht .b3 { top: -6vh; height: 26vh; opacity: 0.3; }
.fx-noorderlicht.oplaaien .baan { opacity: 0.95; }
@keyframes baan {
  0% { transform: translateX(-6%) skewY(-6deg) scaleY(0.8); }
  50% { transform: translateX(3%) skewY(3deg) scaleY(1.15); }
  100% { transform: translateX(8%) skewY(-2deg) scaleY(0.9); }
}

/* Regenachtige dag: warm lamplicht rond het bord. Erachter het "raam": schuin
   vallende regen in twee lagen, parels op het glas en druppels die blijven
   hangen en dan met een spoortje naar beneden schieten. */
[data-theme="regen"] .board { box-shadow: 0 0 0 1px rgb(242 196 107 / 22%), 0 0 70px 14px rgb(255 190 100 / 16%), var(--shadow); }
.fx-regen { background: linear-gradient(to bottom, rgb(150 175 200 / 7%), transparent 40%, rgb(150 175 200 / 9%)); }
.fx-regen .bui { inset: -20% -30%; transform: rotate(10deg); }
.fx-regen .bui b {
  position: absolute; top: 0; width: 1px; height: var(--h);
  background: linear-gradient(to bottom, rgb(200 220 240 / 0%), rgb(200 220 240 / 32%));
  transform: translateY(var(--y));
  animation: regen calc(var(--d) * var(--fx-tempo)) linear infinite;
}
.fx-regen .bui.dichtbij b { width: 1.5px; background: linear-gradient(to bottom, rgb(215 230 245 / 0%), rgb(215 230 245 / 45%)); }
.fx-regen .bui.ver { opacity: 0.7; }
@keyframes regen { from { transform: translateY(-20vh); } to { transform: translateY(150vh); } }
.fx-regen .parel {
  width: var(--s); height: var(--s); border-radius: 50%; opacity: 0.55;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 80%) 0 18%, rgb(190 210 230 / 20%) 45%, rgb(20 30 40 / 25%) 100%);
}
.fx-regen .druppel {
  width: var(--s); height: calc(var(--s) * 1.25); opacity: 0;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 36% 28%, rgb(255 255 255 / 90%) 0 10%, transparent 20%),
    radial-gradient(ellipse at 50% 80%, rgb(225 238 250 / 45%) 0 22%, transparent 50%),
    rgb(140 165 190 / 14%);
  box-shadow: inset 0 0 0 1px rgb(10 18 28 / 30%), 0 1px 2px rgb(0 0 0 / 35%);
  animation: druppel calc(var(--d) * var(--fx-tempo)) linear infinite;
}
/* Het natte spoortje dat de druppel achter zich laat. */
.fx-regen .druppel::before {
  content: ''; position: absolute; left: 35%; bottom: 60%; width: 30%; height: 9vh; border-radius: 2px;
  background: linear-gradient(to bottom, rgb(190 210 230 / 0%), rgb(190 210 230 / 22%));
}
@keyframes druppel {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  8%, 40% { opacity: 0.9; transform: translateY(0) scale(1); }
  46% { transform: translateY(5vh) scale(1); animation-timing-function: ease-out; }
  56% { transform: translateY(6vh) scale(1); animation-timing-function: ease-in; }
  72% { transform: translateY(38vh) scale(1); animation-timing-function: ease-out; }
  80% { transform: translateY(40vh) scale(1); animation-timing-function: ease-in; }
  94% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(85vh) scale(1); }
}
.fx-regen .druppel.groot { animation-name: druppel-groot; }
.fx-regen .druppel.klein { animation-name: druppel-klein; }
.fx-regen .druppel.klein::before { display: none; }
@keyframes druppel-groot {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  8%, 40% { opacity: 0.9; transform: translateY(0) scale(1); }
  44% { transform: translateY(0) scale(1.2); animation-timing-function: ease-in; }
  70% { transform: translateY(40vh) scale(1.2); animation-timing-function: ease-out; }
  78% { transform: translateY(42vh) scale(1.2); animation-timing-function: ease-in; }
  94% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(85vh) scale(1.2); }
}
@keyframes druppel-klein {
  0% { opacity: 0; transform: translateY(0); }
  8%, 30% { opacity: 0.9; transform: translateY(0); }
  42% { opacity: 0.9; transform: translateY(4vh); animation-timing-function: ease-in; }
  44%, 100% { opacity: 0; transform: translateY(4.3vh); }
}
/* Minder beweging: een stilstaand raam met regen erachter en druppels erop. */
@media (prefers-reduced-motion: reduce) { .fx-regen .druppel:not(.klein) { opacity: 0.9; } }

/* Onderwater: lichtstrepen van boven en opstijgende belletjes. */
.fx-onderwater .straal { top: -12%; width: 74px; height: 85vh; margin-left: -37px; background: linear-gradient(to bottom, rgb(255 255 255 / 50%), rgb(255 255 255 / 0%) 85%); transform-origin: 50% 0; transform: rotate(14deg); opacity: 0.45; animation: straal calc(var(--d) * var(--fx-tempo)) ease-in-out infinite alternate; }
@keyframes straal { from { opacity: 0.25; transform: rotate(10deg) scaleX(0.8); } to { opacity: 0.6; transform: rotate(18deg) scaleX(1.25); } }
.fx-onderwater .bel { width: var(--s); height: var(--s); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 80%); background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 80%) 0 16%, rgb(255 255 255 / 12%) 40%, transparent 70%); opacity: 0.8; animation: bel calc(var(--d) * var(--fx-tempo)) linear infinite; }
@keyframes bel { 0% { opacity: 0; transform: translate(0, 30vh); } 10% { opacity: 0.85; } 50% { transform: translate(8px, -5vh); } 90% { opacity: 0.85; } 100% { opacity: 0; transform: translate(-6px, -40vh); } }
/* Het scholetje bij het oplossen. */
.fx-visjes i { left: 0; top: calc(16% + var(--dy)); /* boven het opgelost-scherm langs */ width: var(--s); animation: zwem calc(5.5s * var(--fx-tempo)) linear both; }
@keyframes zwem {
  0% { transform: translateX(-90px) translateY(0); }
  25% { transform: translateX(25vw) translateY(-10px); }
  50% { transform: translateX(50vw) translateY(6px); }
  75% { transform: translateX(78vw) translateY(-6px); }
  100% { transform: translateX(110vw) translateY(0); }
}

/* Kampvuur: sterren die zacht twinkelen, een flakkerende gloed onderaan en vonkjes
   die opstijgen en uitdoven. Bij het oplossen laait het even op (.oplaaien). */
.fx-kampvuur .ster { width: var(--s); height: var(--s); border-radius: 50%; background: #fff6dc; opacity: 0.5; animation: twinkle calc(var(--d) * var(--fx-tempo)) ease-in-out infinite alternate; }
.fx-kampvuur .gloed { left: -20%; right: -20%; bottom: -18vh; height: 52vh; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 150 50 / 55%), rgb(255 90 30 / 22%) 55%, transparent); opacity: 0.75; transform-origin: 50% 100%; animation: flakker calc(2.3s * var(--fx-tempo)) ease-in-out infinite alternate; transition: opacity 0.8s ease; }
.fx-kampvuur .gloed.g2 { left: 10%; right: 10%; height: 34vh; background: radial-gradient(closest-side, rgb(255 210 120 / 45%), transparent); animation-duration: calc(1.7s * var(--fx-tempo)); animation-direction: alternate-reverse; }
@keyframes flakker { 0% { opacity: 0.6; transform: scale(1, 0.96); } 40% { opacity: 0.85; transform: scale(1.02, 1.03); } 100% { opacity: 0.7; transform: scale(0.99, 1); } }
.fx-kampvuur .vonk { bottom: 6vh; width: var(--s); height: var(--s); border-radius: 50%; background: #ffcf73; box-shadow: 0 0 6px 1px rgb(255 160 60 / 80%); opacity: 0; animation: vonk calc(var(--d) * var(--fx-tempo)) ease-out infinite; }
@keyframes vonk { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--h) * -1)); } }
.fx-kampvuur.oplaaien .gloed { opacity: 1; animation-duration: calc(0.5s * var(--fx-tempo)); }
.fx-kampvuur.oplaaien .vonk { animation-duration: calc(1.6s * var(--fx-tempo)); }

/* Wandeltijd: de hond die bij het oplossen voorbij rent. */
.fx-hond i { left: 0; top: 10%; width: 110px; animation: ren calc(3.6s * var(--fx-tempo)) linear both; }
.fx-hond .poten { animation: draf calc(0.24s * var(--fx-tempo)) ease-in-out infinite alternate; transform-box: view-box; transform-origin: 50px 50px; }
.fx-hond .p2 { animation-direction: alternate-reverse; }
@keyframes ren { from { transform: translateX(-130px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes draf { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* Middernacht: de grote klok achter het bord. De wijzers draaien (transform, gezet in
   js/fx/middernacht.js) met een zachte overgang; om middernacht gloeit hij even op. */
.fx-middernacht { background: radial-gradient(90% 60% at 50% 40%, rgb(120 80 200 / 18%), transparent 70%); }
.fx-middernacht .klok { left: 50%; top: 45%; width: min(156vw, 860px); aspect-ratio: 1; margin-left: calc(min(156vw, 860px) / -2); transform: translateY(-50%); opacity: 0.33; transition: opacity 1.5s ease; }
.fx-middernacht .klok svg { display: block; width: 100%; height: 100%; }
.fx-middernacht .wijzer { transform-box: view-box; transform-origin: 100px 100px; transition: transform 0.9s ease; }
.fx-middernacht.slaat .klok { opacity: 0.6; }

/* De dieren: ze kijken om de hoek (aan de rand, op een plek zonder knoppen). */
.fx-animal { position: fixed; z-index: 6; padding: 0; border: 0; background: none; touch-action: manipulation; transition: transform 0.8s cubic-bezier(0.3, 0.9, 0.4, 1); }
.fx-animal.from-left { left: 0; transform: translateX(-100%); }
.fx-animal.from-left.in { transform: translateX(calc(var(--w) - 100%)); }
.fx-animal.from-right { right: 0; transform: translateX(100%) scaleX(-1); }
.fx-animal.from-right.in { transform: translateX(calc(100% - var(--w))) scaleX(-1); }
.fx-zeehondje { width: 88px; }
.fx-staartje { width: 46px; }
.fx-staartje .kwispel { transform-box: view-box; transform-origin: 16px 44px; }
.fx-staartje.in .kwispel { animation: kwispel calc(0.3s * var(--fx-tempo)) ease-in-out infinite alternate; }
@keyframes kwispel { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.fx-eekhoorntje { width: 70px; }
.fx-zeehondje .flipper { transform-box: view-box; transform-origin: 46px 50px; }
.fx-zeehondje.zwaai .flipper { animation: zwaai 0.4s ease-in-out 4 alternate; }
@keyframes zwaai { to { transform: rotate(-38deg); } }
.fx-eekhoorntje :is(.kop, .noot) { transform-box: view-box; transform-origin: 52px 44px; }
.fx-eekhoorntje.in .kop { animation: knabbel calc(0.36s * var(--fx-tempo)) ease-in-out infinite alternate; }
@keyframes knabbel { to { transform: rotate(7deg) translateY(1px); } }

@media (prefers-reduced-motion: reduce) {
  :is(.fx-layer, .fx-over) *, .fx-animal, .fx-animal * { animation: none !important; transition: none !important; }
}

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .taartpunt { display: none; }
  .palm-tree .kroon, .kokosnoot { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .confetti span { display: none; }
  .board.reveal .cell.in-shape { animation: none; }
  .board.heartbeat, .board.pulse { animation: none; }
  .record-line { animation: none; }
  .board.cube-turn, .sunflower .plant { animation: none; }
}

/* Liggend op een telefoon: bord en bediening naast elkaar. */
@media (orientation: landscape) and (max-height: 560px) {
  #app { max-width: 980px; }
  #play { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 20px; min-height: auto; }
  .topbar { grid-column: 1 / -1; }
  #play { --size: min(100dvh - 90px, 100vw - 380px); }
  .board-wrap { margin: 0; align-self: center; }
  .controls { margin: 0; align-self: center; }
  .num { height: 56px; }
}

/* Alleen met ?vandaag=: laat zien dat dit een test is (met een eigen opslag). */
.test-badge {
  position: fixed;
  left: 50%;
  bottom: max(6px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}