/* Denkplein design system: tokens (generated from the design system tokens.json) + component styles (bundle.css).
   Themes: Dag (default) and Nacht. Follows the OS setting unless <html data-theme="dag|nacht"> is set. */
:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f1f2f8;
  --line: #dcdff0;
  --ink: #14183a;
  --ink-muted: #555b84;
  --kobalt: #2448ff;
  --kobalt-soft: #e3e8ff;
  --on-kobalt: #ffffff;
  --on-fill: #14183a;
  --koraal: #c42a0c;
  --koraal-soft: #ffe3dc;
  --koraal-fill: #ff5a3c;
  --zon: #ffd60a;
  --zon-soft: #fff6bf;
  --zon-deep: #6f5400;
  --munt: #0b7a4e;
  --munt-soft: #d0fbe9;
  --munt-fill: #1ed48a;
  --pruim: #7a2ee6;
  --pruim-soft: #efe3ff;
  --pruim-fill: #a866ff;
  --lucht: #066f9c;
  --lucht-soft: #d6f3ff;
  --lucht-fill: #2ad1ff;
  --fout: #c9182f;
  --fout-soft: #ffe0e6;
  --focus: var(--kobalt);
  --shadow-soft: 0 1px 2px #14183a0f, 0 4px 12px -2px #14183a14;
  --shadow-hover: 0 2px 4px #14183a14, 0 8px 20px -4px #14183a1f;
  --shadow-float: 0 12px 32px -8px #14183a3d;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --border-hair: 1px;
  --font-display: "Bricolage Grotesque", "Nunito", system-ui, sans-serif;
  --font-body: Nunito, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dag"]) {
  color-scheme: dark;
  --surface: #0f1233;
  --surface-raised: #1a1f4d;
  --surface-sunken: #090b24;
  --line: #2f3673;
  --ink: #f4f4ff;
  --ink-muted: #a7acd6;
  --kobalt: #8fa3ff;
  --kobalt-soft: #1f2b7a;
  --on-kobalt: #0b0e1c;
  --on-fill: #14183a;
  --koraal: #ff9d85;
  --koraal-soft: #5a1d0e;
  --koraal-fill: #ff5a3c;
  --zon: #ffd60a;
  --zon-soft: #4d3f00;
  --zon-deep: #ffe066;
  --munt: #4ff0b0;
  --munt-soft: #0a3f2a;
  --munt-fill: #1ed48a;
  --pruim: #cfaaff;
  --pruim-soft: #3a1670;
  --pruim-fill: #a866ff;
  --lucht: #7fdcff;
  --lucht-soft: #083a52;
  --lucht-fill: #2ad1ff;
  --fout: #ff8aa0;
  --fout-soft: #5a1424;
  --shadow-soft: 0 1px 2px #00000040, 0 4px 12px -2px #00000066;
  --shadow-hover: 0 2px 4px #00000052, 0 8px 20px -4px #00000080;
  --shadow-float: 0 12px 32px -8px #000000b3;
  }
}
:root[data-theme="nacht"] {
  color-scheme: dark;
  --surface: #0f1233;
  --surface-raised: #1a1f4d;
  --surface-sunken: #090b24;
  --line: #2f3673;
  --ink: #f4f4ff;
  --ink-muted: #a7acd6;
  --kobalt: #8fa3ff;
  --kobalt-soft: #1f2b7a;
  --on-kobalt: #0b0e1c;
  --on-fill: #14183a;
  --koraal: #ff9d85;
  --koraal-soft: #5a1d0e;
  --koraal-fill: #ff5a3c;
  --zon: #ffd60a;
  --zon-soft: #4d3f00;
  --zon-deep: #ffe066;
  --munt: #4ff0b0;
  --munt-soft: #0a3f2a;
  --munt-fill: #1ed48a;
  --pruim: #cfaaff;
  --pruim-soft: #3a1670;
  --pruim-fill: #a866ff;
  --lucht: #7fdcff;
  --lucht-soft: #083a52;
  --lucht-fill: #2ad1ff;
  --fout: #ff8aa0;
  --fout-soft: #5a1424;
  --shadow-soft: 0 1px 2px #00000040, 0 4px 12px -2px #00000066;
  --shadow-hover: 0 2px 4px #00000052, 0 8px 20px -4px #00000080;
  --shadow-float: 0 12px 32px -8px #000000b3;
}

/* ---- components (from the design system bundle.css) ---- */
body { margin: 0; font-family: var(--font-body); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.dp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.dp-row-top { align-items: flex-start; }

/* ---- the piece: hairline + soft shadow + a gentle press ---- */
.dp-tile { border: var(--border-hair) solid var(--line); box-shadow: var(--shadow-soft); transition: transform 120ms ease, box-shadow 120ms ease; }
.dp-tile:hover { box-shadow: var(--shadow-hover); }
.dp-press:active:not(:disabled) { transform: scale(.98); box-shadow: none; }
.dp-tile-sm { border: var(--border-hair) solid transparent; transition: transform 120ms ease, background-color 120ms ease; }
.dp-press-sm:active:not(:disabled) { transform: scale(.97); }
.dp-tile:focus-visible, .dp-tile-sm:focus-visible, .dp-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dp-tile, .dp-tile-sm { transition: none; } }

/* ---- Button ---- */
.dp-btn { font: inherit; font-weight: 700; font-size: 16px; line-height: 24px; display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.dp-btn-primary { background: var(--kobalt); border-color: var(--kobalt); color: var(--on-kobalt); }
.dp-btn-zon { background: var(--zon); border-color: var(--zon); color: var(--on-fill); }
.dp-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; font-weight: 600; }
.dp-btn-ghost:hover { box-shadow: none; }
.dp-btn-ghost:hover { background: var(--surface-sunken); }
.dp-btn-sm { height: 34px; font-size: 14px; line-height: 20px; padding: 0 var(--space-4); border-radius: 10px; }
.dp-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.dp-btn svg { width: 18px; height: 18px; flex: none; }

/* ---- CategoryChip ---- */
.dp-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full); font: inherit; font-weight: 600; font-size: 13px; line-height: 20px; color: var(--ink); background: var(--surface-raised); cursor: default; }
.dp-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dp-chip-dot-ink { background: var(--zon); }
.dp-chip-taal { background: var(--koraal-soft); color: var(--koraal); }
.dp-chip-rekenen { background: var(--kobalt-soft); color: var(--kobalt); }
.dp-chip-logica { background: var(--pruim-soft); color: var(--pruim); }
.dp-chip-geheugen { background: var(--munt-soft); color: var(--munt); }
.dp-chip-ruimtelijk { background: var(--lucht-soft); color: var(--lucht); }
.dp-chip-kennis { background: var(--zon-soft); color: var(--zon-deep); }
button.dp-chip { cursor: pointer; }
.dp-chip-selected, .dp-chip-selected.dp-chip-taal, .dp-chip-selected.dp-chip-rekenen, .dp-chip-selected.dp-chip-logica, .dp-chip-selected.dp-chip-geheugen, .dp-chip-selected.dp-chip-ruimtelijk, .dp-chip-selected.dp-chip-kennis { background: var(--kobalt); color: var(--on-kobalt); }
.dp-chip-selected .dp-chip-dot { background: var(--on-kobalt); }

/* ---- DifficultyBadge ---- */
.dp-diff { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-sunken); font: inherit; font-weight: 500; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.dp-diff-pips { display: inline-flex; gap: 3px; }
.dp-diff-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dp-diff-pip-on { background: var(--kobalt); }

/* ---- ScoreBar ---- */
.dp-score { display: grid; gap: var(--space-2); min-width: 240px; }
.dp-score-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.dp-score-val { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dp-score-track { height: 10px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.dp-score-fill { height: 100%; border-radius: var(--radius-full); background: var(--kobalt); transition: width 300ms ease; }
.dp-score-munt .dp-score-fill { background: var(--munt-fill); }
.dp-score-zon .dp-score-fill { background: var(--zon); }
@media (prefers-reduced-motion: reduce) { .dp-score-fill { transition: none; } }

/* ---- GameCard ---- */
.dp-card { width: 300px; border-radius: var(--radius-lg); background: var(--surface-raised); overflow: hidden; display: grid; }
.dp-card-thumb { height: 140px; display: grid; place-items: center; position: relative; }
.dp-card-thumb-taal { background: var(--koraal-fill); } .dp-card-thumb-rekenen { background: var(--kobalt); } .dp-card-thumb-logica { background: var(--pruim-fill); }
.dp-card-thumb-geheugen { background: var(--munt-fill); } .dp-card-thumb-ruimtelijk { background: var(--lucht-fill); } .dp-card-thumb-kennis { background: var(--zon); }
.dp-card-glyph { font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 1; letter-spacing: -0.03em; color: var(--on-fill); }
.dp-card-thumb-rekenen .dp-card-glyph { color: var(--on-kobalt); }
.dp-card-new { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--surface-raised); color: var(--zon-deep); font-size: 12px; line-height: 16px; font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); }
.dp-card-body { padding: var(--space-4); display: grid; gap: var(--space-3); }
.dp-card-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp-card-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.01em; color: var(--ink); }
.dp-card-desc { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.dp-card-foot { display: grid; gap: var(--space-3); }
.dp-card-foot .dp-btn { justify-content: center; width: 100%; }
.dp-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); white-space: nowrap; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }

/* ---- Ad block (assets/ads.js): at the foot of a game's result card ---- */
.dp-ad { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-hair) solid var(--line); }
.dp-ad-label { font-size: 11px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.dp-ad .adsbygoogle { min-height: 100px; }
.dp-ad:has(ins[data-ad-status="unfilled"]) { display: none; }