/* Netto refinement layer — shared editorial game system */
.topbar > .topbar-navigation { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-navigation > .hamburger, .topbar-navigation > .topbar-home { width: 42px; height: 42px; flex: 0 0 42px; margin: 0; }
.topbar-home { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(15,18,69,.18); color: #fff; cursor: pointer; text-decoration: none; }
body:has(#screen-home.active) .topbar-home { display: none; }
.topbar-home svg { width: 22px; height: 22px; }
.topbar-home:hover { background: rgba(255,255,255,.18); }
.topbar-home:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
body[data-full-stats] .sidebar a { text-decoration: none; }
@media (max-width: 480px) {
  .topbar { padding-inline: 12px; }
  .topbar > .topbar-navigation { gap: 6px; }
  .user-badge-bar { gap: 5px; }
  .user-badge-bar .user-btn { width: 42px; padding-inline: 0; justify-content: center; }
  .user-badge-bar #topbarUsername { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
#raceStart .race-tolerance-labels { gap: 4px; }
#raceStart .race-tolerance-labels button { min-width: 0; min-height: 48px; padding: 8px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
#raceStart .race-tolerance-labels button.active { border-color: var(--ink); background: var(--surface-2); }
#raceStart .race-tolerance-labels button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#raceStart .race-duration-options button.active[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #14163B; }
#raceStart .race-duration-options button.active :is(b, span) { color: #14163B; }
#raceResultsMeta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 20px 0 26px; }
#raceResultsMeta .race-summary-stat { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 12px; border-bottom: 1px solid var(--surface-border); }
#raceResultsMeta .race-summary-stat strong { color: var(--ink); font-size: 19px; font-weight: 600; }
#raceResultsMeta .race-summary-stat > span { color: var(--text-muted); font-size: 12px; }
#raceResultsMeta .race-summary-note { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }
#raceResultsMeta .race-summary-record { grid-column: 1 / -1; justify-self: start; padding: 6px 10px; border-radius: 6px; background: var(--accent); color: #14163B; font-size: 12px; font-weight: 600; }
.race-exact-notice { flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: auto; }
.race-exact-notice button { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; padding: 8px 12px; font: inherit; cursor: pointer; }
.daily-photo[hidden] { display: none; }
/* Dezelfde polaroid, met de verplichte bron direct bij het beeld. */
/* De foto zweeft rechts en de vraagtekst loopt ernaast, zoals een afbeelding in
   een gewone alinea. Rechts uitlijnen zonder zweven zette hem alleen op zijn
   eigen regel met een lege band ernaast — dat kostte de halve kaarthoogte. */
.puzzelfoto { float: right; width: 120px; margin: 2px 0 8px 14px; shape-margin: 8px; }
/* Het invoerveld gaat er niet naast staan maar eronder: een veld dat naast een
   foto wordt platgedrukt is lastiger te raken dan een veld over de volle breedte. */
.puzzelfoto-lijst .q-block:has(.puzzelfoto) .input-wrapper { clear: both; }
.puzzelfoto-lijst .q-block:has(.puzzelfoto)::after { content: ''; display: block; clear: both; }
.puzzelfoto .daily-photo { width: 100%; margin: 0; }
/* De bronvermelding staat wel in de opmaak maar niet in beeld: op een smalle
   kaart kostte die regel thirty-three pixels naast een foto van honderdvijftig,
   en hij leidt af van de vraag. Hij verschijnt zodra je de foto aanklikt, en de
   volledige lijst staat onder Fotoverantwoording in het menu. Verbergen gebeurt
   met clip, niet met display:none, zodat schermlezers hem blijven voorlezen —
   naamsvermelding is bij CC BY-SA een licentievoorwaarde. */
.puzzelfoto .daily-photo-credit {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.puzzelfoto-lijst .q-block { position: relative; }
.foto-credits-inner { width: min(100%, 1000px); }
.foto-credits-inner > h1 { margin: 28px 0 14px; }
.foto-credits-inner > p { color: #D9DDF9; line-height: 1.6; }
.foto-credits-inner > h1 { color: #fff; font: 700 clamp(32px, 5vw, 48px) 'Archivo Black', sans-serif; }
.foto-credits-inner > .daily-home-button { width: auto; color: inherit; }
.foto-credits-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; margin-top: 28px; }
.foto-credit-kaart { padding: 18px; border-radius: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--surface-border); overflow-wrap: anywhere; }
.foto-credit-kaart img { width: 100%; height: 144px; object-fit: cover; border-radius: 5px; margin-bottom: 14px; }
.foto-credit-kaart p { color: var(--text-muted); margin: 8px 0; }
.foto-credit-kaart a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) {
  /* Alleen hier is ruimte vrijhouden nodig: de foto hangt dan absoluut op de
     kaartrand en duwt de kaart niet vanzelf hoger.

     De id's moeten in de selector staan. styles.css zet padding op
     ":is(#dailyQuestionView, #libraryQuestionList, ...) .vraag-met-categorie",
     en een id verslaat elk aantal klassen — ook al laadt dit bestand later. Met
     alleen klassen bleef de padding op 16px staan en liep de vraagtekst onder
     de foto door. */
  :is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList)
    .q-block:has(.puzzelfoto) { padding-right: 152px; overflow: visible; min-height: 150px; }
  .puzzelfoto-lijst .q-block:has(.puzzelfoto) { overflow: visible; }
  .puzzelfoto-lijst .puzzelfoto { position: absolute; float: none; top: 8px; right: -34px; z-index: 2; width: 152px; margin: 0; }
  .puzzelfoto .daily-photo { transform: rotate(3deg); box-shadow: 0 16px 34px rgba(5, 7, 35, .30); }
  .puzzelfoto .daily-photo:hover { transform: rotate(0) scale(1.03); }
  .puzzelfoto .daily-photo img { height: 108px; }
}
/* Smalle schermen: zwevend rechts, zodat de vraagtekst ernaast loopt in plaats
   van eronder. Naast de kaart hangen kan hier niet, want dat zou horizontaal
   scrollen veroorzaken. */
#dailyQuestionView > .q-block { position: relative; }
#dailyQuestionView .q-block > .daily-photo { float: right; margin: 2px 0 12px 16px; }
#dailyQuestionView .has-photo .input-wrapper { clear: both; }
#dailyQuestionView .has-photo::after { content: ''; display: block; clear: both; }
.daily-photo { display: block; width: 132px; margin: 0 0 18px auto; padding: 6px 6px 0; background: #fff; border: 1px solid #E3E4F7; border-radius: 6px; box-shadow: 0 6px 16px rgba(20,22,59,.12); transform: rotate(2deg); cursor: zoom-in; transition: transform .15s; }
.daily-photo:hover { transform: rotate(0); }
.daily-photo img { display: block; width: 100%; height: 104px; object-fit: cover; border-radius: 2px; }
.daily-photo span { display: block; padding: 9px 2px; color: #4C519C; font: 500 9px 'JetBrains Mono',monospace; text-transform: uppercase; letter-spacing: .04em; }

/* Brede schermen: polaroid op de kaartrand geplakt — grotendeels op de kaart,
   met een stukje dat over de rand op de achtergrond hangt. */
@media (min-width: 1000px) {
  #screen-puzzle .card { overflow: visible; }
  #screen-puzzle #dailyQuestionView .q-block > .daily-photo {
    position: absolute;
    top: 20px;
    right: -34px;
    z-index: 2;
    width: 152px;
    margin: 0;
    transform: rotate(3deg);
    box-shadow: 0 16px 34px rgba(5, 7, 35, .30);
  }
  #screen-puzzle .daily-photo:hover { transform: rotate(0) scale(1.03); }
  #screen-puzzle .daily-photo img { height: 108px; }
  /* Ruimte vrijhouden in de eerste vraag, anders loopt tekst/invoer onder de foto. */
  #dailyQuestionView .q-block.has-photo { padding-right: 152px; min-height: 150px; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-puzzle .daily-photo:hover { transform: rotate(3deg); }
}
.daily-photo-dialog { margin: auto; width: min(880px,92vw); max-height: 90dvh; padding: 10px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); overflow: auto; }
.daily-photo-dialog::backdrop { background: rgba(8,10,38,.82); }
.daily-photo-dialog > img { display: block; width: 100%; height: auto; max-height: 74dvh; object-fit: contain; border-radius: 5px; }
.daily-photo-dialog p { padding: 12px 6px 4px; color: var(--text-muted); font: 12px/1.5 'Space Grotesk',sans-serif; }
.daily-photo-credit { padding-bottom: 0 !important; font-size: 11px !important; }
.daily-photo-credit[hidden] { display: none; }
.daily-photo-credit a { color: inherit; }
.photo-close { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border: 1px solid #E3E4F7; border-radius: 50%; background: #fff; color: #14163B; font-size: 26px; cursor: pointer; }
@media(max-width:560px) {
  #dailyQuestionView .q-block > .daily-photo { width: 104px; margin-left: 12px; }
  .daily-photo img { height: 82px; }
  .daily-photo span { font-size: 8px; padding: 7px 0; }
}
@media(prefers-reduced-motion:reduce) { .daily-photo { transition: none; transform: none; } }
.daily-home-button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--surface-border); border-radius: 8px; background: transparent; color: var(--ink); font: 600 14px 'Space Grotesk',sans-serif; cursor: pointer; }
.daily-home-button:hover { background: var(--surface-2); }
@media (min-width: 900px) {
  #screen-puzzle .card #dailyReviewNav.show { display: block; height: 0; margin: 0; padding: 0; border: 0; }
  #screen-puzzle #dailyReviewNav .daily-review-position,
  #screen-puzzle #dailyReviewNav button span { display: none; }
  #screen-puzzle #dailyReviewNav button { position: absolute; top: min(240px, 50%); transform: translateY(-50%); width: 48px; height: 48px; min-width: 48px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #fff; color: #14163B; font-size: 23px; }
  #screen-puzzle #dailyQuestionsNav { left: -68px; }
  #screen-puzzle #dailyResultsNav { right: -68px; }
  #screen-puzzle #dailyReviewNav button:hover:not(:disabled) { background: #F0F2FF; color: #14163B; border-color: #F0F2FF; }
  #screen-puzzle #dailyReviewNav button:disabled { opacity: .25; }
}
#screen-puzzle #results #scoreBadge[data-tone="precise"] { color: #047857; }
#screen-puzzle #results #scoreBadge[data-tone="close"] { color: #4338CA; }
#screen-puzzle #results #scoreBadge[data-tone="wide"] { color: #B45309; }
[data-theme="dark"] #screen-puzzle #results #scoreBadge[data-tone="precise"] { color: #6EE7B7; }
[data-theme="dark"] #screen-puzzle #results #scoreBadge[data-tone="close"] { color: #A5B4FC; }
[data-theme="dark"] #screen-puzzle #results #scoreBadge[data-tone="wide"] { color: #FCD34D; }
#screen-puzzle.is-review #dailyHeadline { font-size: clamp(28px,5vw,36px); margin-bottom: 14px; }
#screen-puzzle.is-review #dailyReviewNav { margin-bottom: 14px; padding-bottom: 10px; }
#screen-puzzle #results .review-equation { padding-bottom: 14px; gap: 6px 14px; }
#screen-puzzle #results .score-badge-container { column-gap: 20px; }
#numberlineCard .review-question-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.review-overview { display: none; }
#numberlineCard.is-overview > :not(.review-equation):not(.review-question-tabs):not(.review-overview) { display: none; }
#numberlineCard.is-overview .review-overview { display: block; }
.overview-caption { font-size: 11px; color: var(--text-muted); margin: 20px 0 10px; }
.overview-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; width: 100%; padding: 16px 0; border: 0; border-top: 1px solid var(--surface-border); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.overview-row-title { grid-column: 1 / -1; font: 500 14px/1.45 'Space Grotesk',sans-serif; }
.overview-numbers { font: 500 15px 'JetBrains Mono',monospace; overflow-wrap: anywhere; min-width: 0; }
.overview-numbers > span { color: var(--text-muted); }
.overview-status { align-self: center; font: 600 12px 'Space Grotesk',sans-serif; padding: 4px 8px; border-radius: 5px; }
.is-exact .overview-status { color: #065F46; background: #D1FAE5; }
.is-estimate .overview-status { color: #4338CA; background: #E0E7FF; }
.overview-row:hover .overview-row-title { text-decoration: underline; text-underline-offset: 3px; }
.overview-note { font-size: 11px; color: var(--text-muted); margin-top: 14px; }
#screen-puzzle #scoreBadge { font-variant-numeric: tabular-nums; min-width: 3.8ch; }
@media (max-width: 480px) { #numberlineCard .review-question-tabs button { font-size: 12px; } }
#screen-puzzle .countdown-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--surface-border); border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
#screen-puzzle .countdown-card b { color: var(--text-muted); font: 500 12px 'Space Grotesk',sans-serif; text-transform: none; letter-spacing: 0; }
#screen-puzzle .countdown-card span { margin: 0; font: 500 21px 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
#screen-puzzle .countdown-card em { color: var(--text-muted); font-size: 15px; font-style: normal; }
.hist-demo > span { display: inline-block; padding: 2px 6px; border: 1px solid var(--surface-border); border-radius: 4px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }

/* Single-question histogram review. Demo data is explicitly labelled. */
#screen-puzzle #results .results-grid { display: none; }
#screen-puzzle #results .score-badge-container { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 18px; align-items: center; padding: 16px 18px; margin-bottom: 14px; }
#screen-puzzle #results .score-badge-val { grid-column: 1; grid-row: 1 / 4; font-size: 48px; margin: 0; }
#screen-puzzle #results .score-badge-title, #screen-puzzle #results .score-badge-factor, #screen-puzzle #results .score-badge-msg { grid-column: 2; }
#screen-puzzle #results .score-badge-msg { font-size: 13px; margin-top: 4px; }
#screen-puzzle #results .numberline-card { background: transparent; border: 0; padding: 0; }
.review-equation { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 0 0 16px; }
.review-equation span { color: var(--text-muted); font-size: 12px; }
.review-equation strong { font: 600 15px 'JetBrains Mono',monospace; overflow-wrap: anywhere; }
.review-question-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.review-question-tabs button { border: 0; border-bottom: 2px solid var(--surface-border); border-radius: 0; padding: 10px 6px; color: var(--text-muted); background: transparent; font: 600 14px 'Space Grotesk',sans-serif; cursor: pointer; }
.review-question-tabs button[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: var(--ink); }
.review-question-tabs small { display: block; font: 11px 'JetBrains Mono',monospace; margin-top: 4px; }
.selected-review-question { font: 600 17px/1.45 'Space Grotesk',sans-serif; margin: 18px 0 14px; min-height: 2.9em; }
.review-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-comparison > div { padding: 8px 0; border: 0; background: transparent; min-width: 0; }
.review-comparison > .review-answer { padding-left: 18px; border-left: 1px solid var(--surface-border); }
.review-comparison span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.review-comparison strong { font: 700 clamp(20px,4vw,28px) 'Space Grotesk',sans-serif; color: var(--ink); overflow-wrap: anywhere; }
.hist-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.hist-heading strong { font-size: 15px; }
.daily-equation-error { margin-top: 16px; padding: 12px 14px; border-left: 3px solid #B45309; background: #FFF7ED; color: #9A3412; font-size: 14px; line-height: 1.5; }
.daily-equation-error[hidden] { display: none; }
#screen-puzzle #results #scoreBadgeMsg { display: none; }
#screen-puzzle #results .score-badge-container { background: transparent; border-bottom: 1px solid var(--surface-border); border-radius: 0; padding: 0 0 16px; }
#screen-puzzle #results .score-badge-val { color: var(--ink); }
#screen-puzzle #results .score-badge-title, #screen-puzzle #results .score-badge-factor { color: var(--text-muted); }
#screen-puzzle #results .cloud-sync-banner { display: none !important; }
/* Vier duidelijke vervolgacties, zonder extra kaart of herhaalde uitleg. */
#results .daily-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--surface-border); }
#results .daily-result-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 12px 10px; border-radius: 9px; font: 600 14px 'Space Grotesk',sans-serif; cursor: pointer; }
#results .daily-result-actions .btn-share { background: var(--accent); color: #14163B; border: 1px solid transparent; }
#screen-puzzle #results .btn-leaderboard-open { display: inline-flex; background: var(--surface-2); color: var(--ink); border: 1px solid var(--surface-border); }
#results .daily-result-navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
/* Een duidelijk geselecteerde vraag en rustige antwoordparen geven de
   uitslag houvast, zonder extra uitleg of versiering toe te voegen. */
#screen-puzzle #numberlineCard .review-question-tabs {
  gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2);
}
#screen-puzzle #numberlineCard .review-question-tabs button {
  min-height: 46px; border: 1px solid transparent; border-radius: 9px;
}
#screen-puzzle #numberlineCard .review-question-tabs button[aria-pressed="true"] {
  background: var(--surface); border-color: var(--surface-border);
  box-shadow: 0 2px 5px rgba(20,22,59,.08); color: var(--ink);
}
#screen-puzzle #numberlineCard .review-question-tabs button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
#screen-puzzle #numberlineCard .review-comparison {
  gap: 0; padding: 16px; border: 1px solid var(--surface-border);
  border-radius: 12px; background: var(--surface-2);
}
#screen-puzzle #numberlineCard .review-comparison > div { padding: 0 12px 0 0; }
#screen-puzzle #numberlineCard .review-comparison > .review-answer { padding: 0 0 0 16px; }
#results .daily-result-navigation .daily-home-button { width: auto; min-height: 44px; margin: 0; padding: 8px 4px; border-color: transparent; font-size: 13px; }
#results :is(.daily-result-actions, .daily-result-navigation) button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#results .daily-result-actions .btn-leaderboard-open:hover { border-color: var(--ink); }
.hist-heading span { font-size: 12px; color: var(--text-muted); }
.hist-demo { color: var(--text-muted); font: 500 10px/1.5 'JetBrains Mono',monospace; }
.histogram-chart { margin-top: 10px; }
.hist-bar { fill: #818CF8; fill-opacity: .65; }
.hist-actual { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; }
.hist-you { stroke: #D79B00; stroke-width: 3; }
.hist-you-label { fill: #14163B; font: 700 15px 'Space Grotesk',sans-serif; }
.hist-tick { fill: var(--text-muted); font: 13px 'JetBrains Mono',monospace; }
.hist-footnote, .hist-data { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.hist-data { margin-top: 10px; }
.hist-data summary { cursor: pointer; padding: 6px 0; }
.hist-data > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 6px; }
@media (max-width: 480px) {
  #screen-puzzle #results .score-badge-container { column-gap: 12px; padding: 14px 12px; }
  #screen-puzzle #results .score-badge-val { font-size: 38px; }
  .hist-tick { font-size: 17px; }
  .hist-you-label { font-size: 18px; }
}

/* Daily review: one shared ratio plot, not three unrelated number lines. */
#screen-puzzle.is-review .headline { font-size: clamp(32px, 6vw, 48px); margin-bottom: 24px; }
#screen-puzzle #results { border: 0; padding-top: 0; margin-top: 0; outline: none; }
#screen-puzzle .daily-review-nav { margin: 0 0 22px; padding: 0 0 16px; border-top: 0; border-bottom: 1px solid var(--surface-border); }
#screen-puzzle .score-badge-container { text-align: left; background: #14163B; color: #fff; padding: 24px; border: 0; border-radius: 12px; margin-bottom: 24px; }
#screen-puzzle .score-badge-title { color: #C7CCFF; font: 500 11px 'JetBrains Mono',monospace; letter-spacing: .12em; text-transform: uppercase; }
#screen-puzzle .score-badge-val { color: #FFD84A; font: 700 clamp(48px, 9vw, 68px) 'Space Grotesk',sans-serif; line-height: 1.1; letter-spacing: -.05em; margin: 8px 0; }
#screen-puzzle .score-badge-factor { color: #C7CCFF; }
#screen-puzzle .score-badge-msg { color: #fff; font-size: 15px; margin-top: 12px; }
#screen-puzzle .numberline-card { background: var(--surface-2); border: 1px solid var(--surface-border); padding: 20px 14px 14px; margin: 0 0 22px; }
.ratio-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-inline: 6px; }
.ratio-heading h2 { font: 700 17px 'Space Grotesk',sans-serif; color: var(--ink); }
.ratio-heading span, .ratio-intro { font-size: 12px; color: var(--text-muted); }
.ratio-intro { margin: 8px 6px 12px; line-height: 1.5; }
.ratio-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ratio-grid { stroke: var(--surface-border); stroke-width: 1; }
.ratio-baseline { stroke: var(--ink); stroke-width: 2; }
.ratio-tick, .ratio-question { fill: var(--text-muted); font: 13px 'JetBrains Mono',monospace; }
.ratio-value { fill: var(--ink); font: 600 14px 'JetBrains Mono',monospace; }
.ratio-stem { stroke: var(--text-muted); stroke-dasharray: 3 4; opacity: .5; }
.ratio-dot { fill: #FFD84A; stroke: #14163B; stroke-width: 2; }
.ratio-exact { fill: #059669; stroke: var(--surface); stroke-width: 2; }
.ratio-arrow { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ratio-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; border-top: 1px solid var(--surface-border); padding: 14px 6px 0; font-size: 11px; color: var(--text-muted); }
.ratio-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ratio-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ratio-key-guess { background: #FFD84A; border: 1px solid #14163B; }
.ratio-key-exact { background: #059669; }
#screen-puzzle .result-card-item { display: block; background: transparent; border: 0; border-top: 1px solid var(--surface-border); padding: 18px 0; }
#screen-puzzle .res-info .res-lbl { font: 600 15px/1.5 'Space Grotesk',sans-serif; color: var(--ink); text-transform: none; }
#screen-puzzle .res-val { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
#screen-puzzle .res-val small { display: block; font: 400 11px 'Space Grotesk',sans-serif; color: var(--text-muted); margin-bottom: 5px; }
#screen-puzzle .res-val strong { font: 600 17px 'JetBrains Mono',monospace; overflow-wrap: anywhere; }
#screen-puzzle .res-badge { display: inline-block; margin-top: 12px; }
#screen-puzzle .actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
#screen-puzzle .actions-row > button { flex: 1 1 auto; min-height: 44px; }
@media (max-width: 480px) {
  #screen-puzzle.is-review .card { padding: 18px 14px; }
  #screen-puzzle .numberline-card { padding: 16px 6px 12px; }
  .ratio-question, .ratio-tick { font-size: 16px; }
  .ratio-value { font-size: 17px; }
}

/* Statistics: a compact score sheet, using the same ink, paper and yellow accent. */
.stats-button, .btn-stats-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 42px; padding: 10px 14px; border: 1px solid var(--ui-line-strong);
  border-radius: 10px; background: transparent; color: inherit;
  font: 600 14px 'Space Grotesk', sans-serif; cursor: pointer;
}
.stats-button svg { width: 20px; height: 20px; }
.topbar-settings-button { color: #fff; }
.stats-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.stats-button:hover { background: rgba(255,255,255,.1); }
@media (max-width: 340px) {
  .user-badge-bar { gap: 5px; }
  .user-badge-bar .stats-button { min-width: 40px; padding-inline: 9px; }
  .user-badge-bar .user-btn { width: 40px; padding: 0; justify-content: center; }
  .user-badge-bar .user-btn #topbarUsername {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
.btn-stats-open { border-color: var(--surface-border); color: var(--ink); }
#modalStats { padding: 16px; }
#modalStats .stats-modal { max-width: 540px; padding: 30px; overscroll-behavior: contain; }
#modalStats .stats-eyebrow {
  display: block; color: var(--text-muted); margin-bottom: 12px;
  font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .15em;
}
#modalStats .modal-title { font-size: 30px; }
#modalStats .modal-subtitle { color: var(--text-muted); margin: 8px 0 24px; font-size: 14px; }
.stats-kpi-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 0; border-block: 1px solid var(--surface-border); padding: 20px 0; }
.stats-kpi:nth-child(3n) { border-right: 0; }
.stats-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.stats-modes button { padding: 9px 12px; border: 1px solid var(--surface-border); border-radius: 7px; background: var(--surface-2); color: var(--ink); font: 600 12px 'Space Grotesk',sans-serif; cursor: pointer; }
.stats-modes button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #14163B; }
.stats-kpi { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; border-right: 1px solid var(--surface-border); text-align: center; min-width: 0; }
.stats-kpi:last-child { border-right: 0; }
.stats-kpi > span { font-size: 11px; line-height: 1.4; color: var(--text-muted); min-height: 31px; }
.stats-kpi strong { order: -1; font: 700 29px 'JetBrains Mono', monospace; letter-spacing: -.06em; color: var(--ink); }
.stats-kpi small { display: none; }
.stats-distribution { margin-top: 24px; }
.stats-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.stats-section-heading h3 { font-size: 15px; font-weight: 700; }
.stats-section-heading > span { font: 11px 'JetBrains Mono', monospace; color: var(--text-muted); }
.stats-bars { display: grid; gap: 10px; }
.stats-bar-row { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 12px; }
.stats-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 11px 'JetBrains Mono', monospace; }
.stats-bar-label small { color: var(--text-muted); font-size: 10px; }
.stats-bar-track { height: 24px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.stats-bar-fill { display: block; height: 100%; background: var(--bg-main); border-radius: inherit; }
.stats-bar-row.is-today .stats-bar-fill { background: var(--accent); }
.stats-bar-row.is-today .stats-bar-label b::after { content: ' •'; color: var(--text-muted); }
.stats-empty { margin-top: 18px; padding: 14px; background: var(--surface-2); border-radius: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.stats-empty[hidden], .stats-countdown[hidden], .stats-calendar-link[hidden] { display: none; }
.stats-countdown { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--surface-border); margin-top: 24px; padding-top: 18px; }
.stats-countdown span { color: var(--text-muted); font-size: 12px; }
.stats-countdown strong { font: 600 19px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.stats-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.stats-calendar-link { padding: 10px 0; border: 0; background: none; color: var(--ink); font: 500 13px 'Space Grotesk',sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#modalStats .stats-share-button { width: auto; min-height: 44px; margin: 0; padding: 12px 18px; border-radius: 8px; font-size: 14px; box-shadow: none; }
#modalStats .stats-share-button:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .stats-bar-fill { background: #9FAAFF; }
[data-theme="dark"] .stats-bar-row.is-today .stats-bar-fill { background: var(--accent); }
@media (max-width: 600px) {
  .stats-button-label { display: none; }
  .stats-button { padding: 10px; }
  #modalStats .stats-modal { padding: 24px 18px; max-height: calc(100dvh - 32px); }
  .stats-kpi { padding-inline: 5px; }
  .stats-kpi strong { font-size: 25px; }
  .stats-kpi > span { font-size: 10px; }
  .stats-actions { gap: 10px; }
}

:root {
  --ui-grid: rgba(255, 255, 255, 0.058);
  --ui-line: rgba(255, 255, 255, 0.14);
  --ui-line-strong: rgba(255, 255, 255, 0.25);
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow: 0 18px 44px rgba(11, 14, 63, 0.16);
}

body {
  background-image:
    linear-gradient(var(--ui-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Landing: denser secondary actions and a quieter utility section. */
.home-landing-grid { align-items: stretch; }
.screen-home { padding-bottom: 40px; }
.home-content { padding-bottom: 0; }
.home-more .home-modes-heading h2 { font: 600 18px 'Space Grotesk', sans-serif; }
@media (min-width: 901px) {
  .home-landing-grid .home-quick-actions { grid-template-rows: 1fr 1fr; grid-auto-rows: auto; align-content: stretch; }
  .home-landing-grid .home-quick-card strong { margin-top: auto; }
}

.home-quick-actions {
  grid-template-rows: none;
  grid-auto-rows: 190px;
  align-content: start;
}

.home-quick-card { min-height: 190px; }

.home-quick-card strong {
  margin-top: 38px;
  max-width: 250px;
}

.home-more { margin-top: 46px; }

.home-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-more-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #fff;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  background: rgba(15, 18, 69, 0.2);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.home-more-card:hover {
  transform: translateY(-2px);
  background: rgba(15, 18, 69, 0.34);
  border-color: var(--ui-line-strong);
}

.home-more-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(255, 216, 74, .28);
  border-radius: 9px;
}

.home-more-icon svg { width: 20px; height: 20px; }
.home-more-card b { display: block; font-size: 15px; line-height: 1.2; }
.home-more-card small { display: block; margin-top: 4px; color: #BEC3E8; font-size: 12px; line-height: 1.35; }
.home-more-arrow { color: #9DA4D8; font: 500 16px 'JetBrains Mono', monospace; }

/* Shared page frame */
.library-screen {
  padding: 100px 24px 72px;
  scrollbar-gutter: stable;
}

.library-page-inner { max-width: 1040px; }
.race-page-inner { max-width: 920px; }

.library-page-top {
  min-height: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-line);
}

.library-page-kicker {
  color: #C8CDF4;
  font: 700 11px 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.library-home,
.library-back {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 9px;
  box-shadow: none;
}

.library-back {
  color: #fff;
  background: rgba(15, 18, 69, .2);
  border: 1px solid var(--ui-line);
}

.library-page-title {
  max-width: 780px;
  margin-top: 34px;
  font-size: clamp(42px, 6vw, 66px);
  line-height: .98;
}

.library-page-subtitle {
  max-width: 680px;
  margin-top: 12px;
  margin-bottom: 30px;
  color: #D1D5F4;
  font-size: 18px;
  line-height: 1.5;
}

.library-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.library-stat {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  border-radius: var(--ui-radius-md);
  box-shadow: none;
}

.library-stat b { font-size: 27px; letter-spacing: -.04em; }
.library-stat span { font-size: 10px; line-height: 1.4; }

.library-difficulties {
  gap: 8px;
  margin-top: 0;
  margin-bottom: 20px;
}

.library-difficulties button,
.library-actions button {
  min-height: 52px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .95);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.library-difficulties button:hover,
.library-actions button:hover { transform: translateY(-1px); }

.library-difficulties button.active {
  background: var(--bg-dark);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}

.library-card-grid,
.bk-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 156px;
  gap: 10px;
  margin-top: 16px;
}

.library-flip-card,
.library-flip-card-inner,
.catalogus-card-grid .library-flip-card,
.catalogus-card-grid .library-flip-card-inner {
  height: 156px;
  min-height: 156px;
}

.library-flip-front,
.vraag-flip-front,
.vraag-flip-back {
  padding: 17px;
  border-radius: 11px;
  box-shadow: none;
}

.library-flip-front {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.library-flip-card.is-open:hover .library-flip-front {
  transform: translateY(-3px);
  border-color: #BFC4E7;
  box-shadow: 0 12px 24px rgba(11, 14, 63, .12);
}

.library-flip-front strong { font-size: 20px; letter-spacing: -.04em; }
.library-flip-front span { font-size: 10px; line-height: 1.4; }

/* Het kleurenraster is de beloning: in één blik zie je hoe je hele set ervoor
   staat. Daarom vult de scorekleur de kaart en niet alleen een randje.

   Wat er wél mis was: de tekst stond altijd in wit, en scoreColor levert overal
   dezelfde HSL-lichtheid van 45 procent. In HSL is dat één getal, voor het oog
   niet: geel op 45 procent is veel feller dan rood of groen op 45 procent. Op de
   gele kaarten was wit daardoor nauwelijks te lezen. library.js rekent nu de
   echte helderheid uit en zet --score-ink op donker of wit, afhankelijk van
   welke van de twee meer contrast geeft. */
.library-flip-front.played {
  background: var(--score-accent, var(--surface));
  color: #fff;
  border-bottom: 3px solid var(--score-accent, var(--surface-border));
}
.library-flip-front.played span,
.library-flip-front.played strong {
  color: #fff;
  /* Wit op een felgele kaart haalt maar 2,4 op 1. Donkere tekst zou dat
     oplossen maar maakt het raster vlak, en de kleuren verlagen tot wit overal
     werkt vraagt 30 procent lichtheid: dan wordt alles modderig. Een schaduw
     houdt de kleur en de witte tekst, en zet er genoeg donker onder om de
     letters van de achtergrond te scheiden. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4);
}
.library-flip-front.played strong::after { content: ' ✓'; font-size: 13px; }
.library-flip-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 11px; }
/* Niet op een gespeelde kaart: die heeft een eigen scorekleur als achtergrond,
   en dit lichtgrijs erop geeft een contrast van 1,4 op 1. Onleesbaar. */
[data-theme="dark"] .library-flip-front:not(.played) span,
[data-theme="dark"] .library-stat span { color: #C7CEEF; }
[data-theme="dark"] .library-difficulties button:not(.active) { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .library-difficulties button span { color: #C7CEEF; }

.daily-archive-list { border-radius: var(--ui-radius-md); }
.daily-archive-row { min-height: 70px; padding: 16px 20px; }
.daily-archive-row:hover { background: #F5F6FF; }
.archive-status { border-radius: 8px; }

.month-nav { justify-content: flex-start; }
.month-nav button { border-radius: 9px; }

.library-puzzle-view {
  scroll-margin-top: 100px;
  max-width: 680px;
}

.library-puzzle-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

/* De cataloguskop is alleen nuttig tijdens het kiezen, niet tijdens het spelen. */
#libraryScreen:has(#libraryPuzzleView[style*="display: block"]) :is(#libraryTitle, #librarySubtitle, #libraryStats) { display: none !important; }

.library-puzzle-view .daily-style-input,
.race-question-card .daily-style-input {
  border-width: 1.5px;
  border-radius: 9px;
}

.library-equation {
  color: #fff;
  background: var(--bg-dark);
  border-radius: 9px;
}

.library-actions button.puzzel-verder { background: var(--accent); color: #14163B; border-color: transparent; text-align: center; }
.library-actions button:disabled { opacity: .4; cursor: default; transform: none; }
.library-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.about-panel {
  max-width: 760px;
  padding: 34px;
  border: 1px solid var(--surface-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.about-panel h2 { font-size: 34px; letter-spacing: -.03em; }
.about-panel h3 { color: var(--bg-main); }

/* Daily play */
#screen-puzzle { align-items: flex-start; padding-top: 116px; }
#screen-puzzle .inner { max-width: 680px; }
/* De puzzel paste niet op een gewoon bureaubladscherm: hij vroeg 825 pixels
   hoogte terwijl een venster van 900 er na tabbladen en adresbalk zo'n 780
   overhoudt. Daarom moest je naar tachtig procent zoomen om hem in een keer te
   zien.

   De foto kostte niets — die hangt op brede schermen al als polaroid absoluut
   op de kaartrand. De ruimte zat in de aanloop: 211 pixels kop boven de kaart,
   en royale tussenruimte bij de verbindingstekens. Op een laag venster levert
   die aanloop in; op een hoog scherm verandert er niets. */
@media (min-width: 1000px) and (max-height: 940px) {
  /* Daily */
  #screen-puzzle .eyebrow { margin-bottom: 4px; }
  #screen-puzzle .headline { margin-bottom: 12px; font-size: clamp(24px, 2.6vw, 30px); }
  #screen-puzzle .card { padding-top: 20px; padding-bottom: 20px; }

  /* Bibliotheek, catalogus en race delen dezelfde opbouw als de Daily, dus ze
     lopen tegen hetzelfde probleem aan: drie vraagblokken met verbindingstekens
     ertussen passen niet in een laag venster. De progressiebalk, de timer en de
     som erboven kosten daar bovendien extra aanloop. */
  .library-puzzle-view .library-progress { margin-bottom: 8px; }
  .library-puzzle-view .library-equation { margin: 8px 0 12px; }
  .library-puzzle-view .library-actions { margin-top: 14px; }

  /* Geldt voor alle vier de schermen. */
  :is(#screen-puzzle, .library-puzzle-view, .race-question-list) .connector { margin: 6px 0; }
  :is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList) .q-block {
    padding-top: 12px; padding-bottom: 12px;
  }
}
#screen-puzzle .headline { margin-bottom: 24px; }
#screen-puzzle .card { padding: 34px; }
.q-label { color: #373C72; font-size: 15px; line-height: 1.45; }
.card input[type="text"] { min-height: 52px; }
.connector { margin: 16px 0; }
.btn-check { min-height: 50px; }

.score-badge-container {
  border-radius: var(--ui-radius-md);
  border: 1px solid rgba(20, 22, 59, .08);
}

.result-card-item,
.numberline-card { border-radius: 10px; box-shadow: none; }

/* Puzzle Race */
.race-start-panel,
.race-play-panel,
.race-results-panel,
.settings-panel {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}

.race-start-panel { padding: 26px; }
#raceStart .race-kicker { display: none; }
#raceStart .race-title { font-size: clamp(32px, 5vw, 44px); }
#raceStart .race-title .script { color: var(--ink); }
#raceStart .race-intro { margin: 12px 0 20px; color: var(--text-muted); line-height: 1.55; max-width: 62ch; }
#raceStart .race-config-card { padding: 14px 0; border: 0; border-top: 1px solid var(--surface-border); border-radius: 0; background: transparent; }
#raceStart .race-config-grid { gap: 24px; margin-bottom: 8px; }
#raceStart .race-duration-options button.active { box-shadow: none; border-color: var(--ink); background: var(--surface-2); }
#raceStart .race-duration-options button b, #raceStart .race-open-games-heading h3 { color: var(--ink); }
#raceStart .race-config-label, #raceStart .race-config-card small, #raceStart .race-open-games-empty { color: var(--text-muted); }
#raceStart .race-tolerance-note { min-height: 3em; margin-top: 12px; font-size: 12px; line-height: 1.5; }
#raceStart .race-tolerance-labels .active { background: var(--surface-2); border-radius: 6px; color: var(--ink); }
#raceStart .race-open-games { background: var(--surface-2); border-color: var(--surface-border); }
#raceStart .race-best { margin: 10px 0; font-size: 11px; color: var(--text-muted); }
#raceStart .race-start-button { min-height: 48px; padding: 12px 22px; font-size: 16px; }

.race-mode-tabs {
  width: fit-content;
  min-width: 280px;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: 10px;
}

.race-mode-tab { border-radius: 7px; }
.race-mode-tab.active { box-shadow: none; }

.race-title {
  max-width: 700px;
  font-size: clamp(42px, 6vw, 58px);
  line-height: .98;
}

.race-title .script {
  color: var(--bg-main);
  font-family: 'Archivo Black', sans-serif;
}

.race-intro { max-width: 700px; font-size: 16px; }

.race-config-grid {
  grid-template-columns: 1.1fr .9fr;
  gap: 10px;
}

.race-config-card,
.race-open-games,
.race-duel-room {
  border-radius: 10px;
  background: #F6F7FC;
}

.race-config-card { padding: 16px; }
.race-config-card select { min-height: 44px; border-width: 1.5px; border-radius: 8px; }
.race-duration-options button { min-height: 60px; border-width: 1.5px; border-radius: 8px; }
.race-duration-options button.active { box-shadow: inset 0 -2px 0 var(--bg-main); }
.race-online-layout { gap: 10px; }
.race-duel-btn { border-style: solid; border-width: 1px; border-radius: 10px; }
.race-open-game { border-radius: 9px; }

.race-question-card {
  border-radius: var(--ui-radius-md);
  box-shadow: none;
}

.race-clock strong::before { content: ''; }
.race-progress-track { height: 5px; }
.race-score-card { border-radius: var(--ui-radius-md); }
.race-review-item { border-radius: 9px; }

/* Brain Teasers */
.bk-library-overview .library-page-title { margin-bottom: 12px; }
.bk-library-overview .library-page-subtitle { font-size: 17px; }
.bk-library-overview .library-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bk-catalog-toolbar {
  min-height: 48px;
  padding: 12px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.bk-catalog-summary { color: #E1E4FA; font-size: 11px; }

.bk-overview-button {
  min-height: 40px;
  border-radius: 8px;
}

/* "Alle puzzels" krijgt precies dezelfde knop als "Alle Breinkrakers".
   Hij had een eigen oppervlak van --surface-2 met --ink erop. In het lichte
   thema werd dat een witte pil, maar in het donkere thema is --surface-2
   (#323E74) bijna dezelfde kleur als de achtergrond eronder (#1E2A5A) en de
   rand ook, dus verdween de knop. De doorzichtige witte variant hieronder
   staat op elke achtergrond van het spel, want die leent contrast van wat er
   toevallig achter ligt in plaats van er een eigen kleur naast te zetten. */
.bk-overview-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.bk-card-grid .library-flip-front::after {
  color: #555D9B;
  font-size: 10px;
}

.bk-card-grid .library-flip-front strong::before { content: none; }

.bk-card-grid .library-flip-front::after { content: none; }

.breinkrakers-screen.is-playing { padding-top: 116px; }
.breinkrakers-screen.is-playing .library-page-inner { max-width: 680px; }
.breinkrakers-screen.is-playing .library-page-top { display: none; }

.bk-play-panel { max-width: 680px; margin: 0 auto; }
.bk-play-panel .eyebrow { margin-bottom: 12px; }
.bk-play-panel .headline { margin: 0 0 24px; }
.bk-question-card { max-width: none; margin: 0; padding: 34px; }

.bk-play-panel .library-question-list { gap: 10px; }
.bk-formula-reveal { border-radius: 9px; }

/* Settings and submission */
.settings-panel { max-width: 820px; padding: 34px; }
#settingsScreen .settings-panel { background: var(--surface); color: var(--ink); border: 1px solid var(--surface-border); margin: 20px auto 0; }
#settingsScreen .race-kicker { display: none; }
#settingsScreen .race-title { color: var(--ink); font-size: clamp(30px, 5vw, 44px); margin: 0 0 22px; }
#settingsScreen .settings-row-text span { color: var(--text-muted); }
#settingsScreen .settings-section { border-color: var(--surface-border); }
#settingsScreen .settings-row-text { min-width: 0; }
#settingsScreen .settings-toggle { flex-shrink: 0; }
#settingsScreen .settings-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[data-theme="dark"] #settingsScreen .settings-row-text span { color: #C7CEEF; }
[data-theme="dark"] #settingsScreen .language-selector button { color: #D9DDF9; }

/* Op hulppagina's is geen losse rekenknop nodig. Tijdens het spelen blijft
   de knop compact, zodat hij zo weinig mogelijk van de vragen bedekt. */
body:has(#settingsScreen.active, #fotoCreditsScreen.active, #leaderboardScreen.active, #submitScreen.active) > .calculator-toggle { display: none; }
body:has(#screen-puzzle.active, #libraryScreen.active, #breinkrakersScreen.active, #raceScreen.active) > .calculator-toggle { width: 44px; min-width: 44px; height: 44px; padding: 10px; }
body:has(#screen-puzzle.active, #libraryScreen.active, #breinkrakersScreen.active, #raceScreen.active) .calculator-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Vraag en invoer hebben in elke spelmodus dezelfde leesmaat. */
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) .q-block .q-label { color: var(--ink); font-size: 15px; line-height: 1.5; }
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) .input-wrapper input { min-height: 52px; }
#bkQuestionList .q-block { padding: 14px 0; }

/* Een gedeeld ritme maakt ook langere puzzels met vier vragen overzichtelijk. */
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) .connector { margin: 10px 0; }
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) .connector-line { height: 1px; background: var(--surface-border); }
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) input::placeholder { color: var(--text-muted); opacity: 1; font: 400 15px 'Space Grotesk', sans-serif; }
[data-theme="dark"] :is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) input::placeholder { color: #BBC3E5; }
:is(#dailyQuestionView, #libraryQuestionList, #catalogusQuestionList, #raceQuestionList, #bkQuestionList) input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .library-flip-front { transition: none; }
  .library-flip-card.is-open:hover .library-flip-front { transform: none; }
}
#bkQuestionList .connector { margin: 8px 0; }
.settings-section { margin-top: 0; padding: 22px 0; border-top: 1px solid var(--border-color); }
.settings-section:first-of-type { border-top: 0; }
.settings-heading { margin-bottom: 12px; font-size: 16px; }

.settings-row {
  padding: 6px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.settings-row-text b { font-size: 15px; }
.settings-row-text span { max-width: 560px; font-size: 13px; line-height: 1.45; }

.language-selector { border-radius: 9px; }
.language-selector button { border-radius: 6px; }

.submit-mode-tabs {
  width: fit-content;
  min-width: 240px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #F6F7FC;
}

.submit-mode-tab { border-radius: 7px; }

.submit-q-block,
.submit-extra-field {
  border-radius: 10px;
}

.submit-q-block textarea,
.submit-q-block input,
.submit-extra input,
.submit-extra select,
.submit-note-field input {
  border-width: 1.5px;
  border-radius: 8px;
}

.submit-preview { border-radius: 9px; }

/* Catalogus Library */
.library-filters { gap: 6px; }
.library-filters button { border-radius: 8px; }
.catalogus-library-toolbar { gap: 8px; }
.catalogus-library-toolbar input,
.catalogus-library-toolbar select {
  min-height: 46px;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.catalogus-results,
.catalogus-card-grid { gap: 10px; }

.catalogus-result-card { border: 1px solid var(--surface-border); border-radius: 10px; }

/* Dialogs */
.modal-overlay { background: rgba(8, 10, 38, .76); }
.modal {
  border: 1px solid var(--surface-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 24px 64px rgba(5, 7, 30, .34);
}

.modal-title { padding-right: 36px; font-size: 27px; letter-spacing: -.03em; }
.modal-subtitle { font-family: 'Space Grotesk', sans-serif; font-size: 13px; line-height: 1.45; }
.modal-close { border-radius: 8px; }
.tab-buttons { padding: 4px; border-radius: 9px; background: #F3F4FA; }
.tab-btn { border-radius: 6px; }
.form-group input { min-height: 48px; border-width: 1.5px; border-radius: 8px; }

/* Dark theme surface corrections for the new layer. */
[data-theme="dark"] .race-config-card,
[data-theme="dark"] .race-tolerance-options button,
[data-theme="dark"] .race-open-games,
[data-theme="dark"] .race-duel-room,
[data-theme="dark"] .submit-mode-tabs,
[data-theme="dark"] .tab-buttons { background: var(--surface-2); }

[data-theme="dark"] .daily-archive-row:hover { background: var(--surface-2); }

@media (max-width: 900px) {
  .home-more-grid { grid-template-columns: 1fr; }
  .home-more-card { min-height: 88px; }
  .library-card-grid,
  .bk-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .race-config-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .library-screen { padding: 84px 14px 56px; }
  .library-page-top { gap: 14px; }
  .library-page-title { margin-top: 28px; font-size: 42px; }
  .library-page-subtitle { margin-bottom: 24px; font-size: 16px; }
  .library-card-grid,
  .bk-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 148px; }
  .library-flip-card,
  .library-flip-card-inner,
  .catalogus-card-grid .library-flip-card,
  .catalogus-card-grid .library-flip-card-inner { height: 148px; min-height: 148px; }
  .library-difficulties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-library-overview .library-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-stat { min-height: 88px; padding: 14px; }
  .library-stat b { font-size: 23px; }
  .daily-archive-row { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 14px; }
  .race-start-panel,
  .race-play-panel,
  .race-results-panel,
  .settings-panel { padding: 22px 18px; }
  .race-mode-tabs,
  .submit-mode-tabs { width: 100%; min-width: 0; }
  .about-panel { padding: 24px 20px; }
  #screen-puzzle { padding: 94px 14px 54px; }
  #screen-puzzle .card { padding: 28px 22px; }
}

@media (max-width: 560px) {
  .home-quick-actions { grid-auto-rows: 150px; }
  .home-quick-card { min-height: 150px; }
  .home-quick-card strong { margin-top: 28px; }
  .home-more { margin-top: 38px; }
  .home-more-card { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 15px; }
  .home-more-icon { width: 34px; height: 34px; }
  .home-more-card b { font-size: 14px; }
  .home-more-card small { font-size: 11px; }
  .library-page-kicker { font-size: 9px; letter-spacing: .12em; }
  .bk-library-overview .library-stats { gap: 6px; }
  .bk-library-overview .library-stat { min-width: 0; padding: 11px 9px; }
  .bk-library-overview .library-stat b { font-size: 19px; }
  .bk-library-overview .library-stat span { font-size: 8px; letter-spacing: .05em; }
  .bk-catalog-toolbar { align-items: stretch; }
  .breinkrakers-screen.is-playing { padding-top: 94px; }
  .bk-question-card { padding: 28px 22px; }
  .settings-row { align-items: flex-start; }
  .settings-toggle { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-more-card,
  .library-flip-front,
  .home-quick-card,
  .home-mode-card { transition: none; }
}

/* Landing v1.1: één duidelijke Daily, met compactere en herkenbare vervolgstappen. */
.home-landing-grid {
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, .78fr);
  gap: 20px;
}

.home-daily-card {
  min-height: 450px;
  background:
    radial-gradient(circle at 88% 12%, rgba(105, 219, 194, .12), transparent 28%),
    linear-gradient(145deg, #171C50 0%, #111538 72%);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 22px 52px rgba(7, 10, 51, .24);
}

.home-daily-copy { margin-top: 46px; }
.home-equation { margin: 26px 0 30px; }

.home-quick-card {
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 30px rgba(7, 10, 51, .10);
}

.home-quick-card::after {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -46px;
  width: 132px;
  height: 132px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .08;
  pointer-events: none;
}

.home-quick-continue { background: linear-gradient(145deg, #FFE77B, #FFD83F); }
.home-quick-library { background: linear-gradient(145deg, #92E7D2, #69D8BF); }

.home-modes { margin-top: 46px; }
.home-modes-grid { gap: 14px; }

.home-mode-card {
  min-height: 126px;
  padding: 18px;
  overflow: hidden;
  --mode-accent: #4C55CB;
}

.home-mode-card:nth-child(2) { --mode-accent: #D58B13; }
.home-mode-card:nth-child(3) { --mode-accent: #8D4FC4; }
.home-mode-card:nth-child(4) { --mode-accent: #258F7B; }

.home-mode-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--mode-accent);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .18s ease;
}

.home-mode-card:hover::before,
.home-mode-card:focus-visible::before { transform: scaleX(1); }

.home-mode-icon {
  color: var(--mode-accent);
  background: color-mix(in srgb, var(--mode-accent) 9%, #fff);
  border-color: color-mix(in srgb, var(--mode-accent) 20%, #E3E4F7);
}

@media (max-width: 860px) {
  .home-landing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .screen-home { padding: 84px 12px 44px; }
  .home-daily-card { min-height: 390px; padding: 23px 21px; }
  .home-daily-copy { margin-top: 32px; }
  .home-daily-card .hero-headline { font-size: 39px; }
  .home-equation { margin: 20px 0 25px; }
  .home-quick-actions { grid-auto-rows: 136px; }
  .home-quick-card { min-height: 136px; padding: 17px 15px; }
  .home-quick-card strong { margin-top: 24px; font-size: 17px; }
  .home-modes { margin-top: 34px; }
  .home-modes-heading { flex-direction: row; align-items: flex-end; gap: 10px; }
  .home-how-link { margin-top: 0; font-size: 11px; }
  .home-modes-grid { gap: 9px; }
  .home-mode-card { min-height: 132px; padding: 15px; }
}

@media (max-width: 350px) {
  .home-quick-actions { grid-template-columns: 1fr; grid-auto-rows: 118px; }
  .home-quick-card { min-height: 118px; }
}

/* Final polish: navigation, explanatory copy and submissions. */
.overlay.show {
  background: rgba(8, 10, 38, .46);
  backdrop-filter: blur(2px);
}

.sidebar {
  width: 320px;
  max-width: calc(100vw - 44px);
  padding: 18px 16px 14px;
  border-right: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 24px 0 70px rgba(5, 7, 35, .3);
}

.sidebar-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
}

.sidebar-logo {
  margin: 0;
  padding: 4px 0;
  align-self: auto;
  font-size: 26px;
  text-align: left;
}

.sidebar-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #DDE0F6;
  font: 400 24px/1 'Space Grotesk', sans-serif;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  cursor: pointer;
}

.sidebar-close:hover { color: #fff; background: rgba(255, 255, 255, .09); }

.sidebar-tagline {
  margin: 0 8px 22px;
  color: #858CC6;
  font-size: 10px;
  letter-spacing: .17em;
  text-align: left;
}

.sidebar-scroll { padding: 0 3px 8px; }
.sidebar-group { margin-bottom: 18px; }

.sidebar-group-title {
  padding: 6px 9px 7px;
  font-size: 10px;
  opacity: 1;
}

.sidebar-item {
  min-height: 48px;
  gap: 11px;
  margin: 2px 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

.sidebar-group .sidebar-item:first-of-type { border-top: 0; }
.sidebar-item:hover { padding-left: 9px; transform: translateX(2px); background: rgba(255, 255, 255, .065); }

.sidebar-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #AAB0DF;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
}

.sidebar-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-item:hover .sidebar-icon { color: var(--accent); border-color: rgba(255, 216, 74, .24); }
.sidebar-item .label { font-size: 14px; font-weight: 600; }
.sidebar-item .arrow { opacity: .38; transform: none; }
.sidebar-item:hover .arrow { opacity: 1; }

.sidebar-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  margin: 8px 3px 0;
  padding: 13px 10px 3px;
  color: #DDE0F6;
  text-align: left;
}

.sidebar-footer span:first-child { font: 700 13px 'Space Grotesk', sans-serif; }
/* Was #747BB6: 4,35 in licht en 4,13 in donker, allebei net te weinig. */
.sidebar-footer small { color: #8D94CE; font-size: 10px; }
.sidebar-footer .arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); font-size: 14px; }
.sidebar-footer:hover b { text-decoration: none; }

.home-mode-body small,
.home-more-card small { font-size: 13px; }

/* How it works: a short, game-first explanation instead of a text manual. */
#howPanel {
  max-width: 900px;
  padding: 36px;
}

#howPanel h2 { margin: 0; font-size: 34px; }

.how-lede {
  max-width: 650px;
  margin-top: 10px;
  color: #4F5573;
  font-size: 17px;
  line-height: 1.55;
}

.how-equation {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 28px;
  padding: 12px 14px;
  color: #fff;
  background: var(--bg-dark);
  border-radius: 10px;
  font: 700 16px 'JetBrains Mono', monospace;
}

.how-equation span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(255, 216, 74, .32);
  border-radius: 7px;
}

.how-equation b { color: #9EA5D5; font-weight: 600; }

.how-example {
  margin: 0 0 30px;
  padding: 22px;
  background: #F7F8FC;
  border: 1px solid var(--border-color);
  border-radius: 11px;
}

.how-example-heading > span {
  display: block;
  margin-bottom: 6px;
  color: var(--bg-main);
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#howPanel .how-example-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.how-example-heading p {
  margin: 7px 0 18px;
  color: #5A607C;
  font-size: 14px;
  line-height: 1.5;
}

.how-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.how-example-grid article {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fff;
  border: 1px solid #DDE0EB;
  border-radius: 9px;
}

.how-example-grid article > span {
  color: #70779A;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.how-example-grid p {
  margin: 11px 0 16px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.how-example-grid strong {
  margin-top: auto;
  color: var(--bg-main);
  font: 700 28px 'JetBrains Mono', monospace;
}

.how-example-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 12px 14px;
  color: #fff;
  background: var(--bg-dark);
  border-radius: 9px;
}

.how-example-result strong {
  flex: 0 0 auto;
  color: var(--accent);
  font: 700 18px 'JetBrains Mono', monospace;
}

.how-example-result span { color: #D4D8EF; font-size: 13px; line-height: 1.4; }

.how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-color);
}

.how-steps li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}

.how-step-number {
  padding-top: 3px;
  color: #6D73A4;
  font: 700 11px 'JetBrains Mono', monospace;
  letter-spacing: .08em;
}

#howPanel .how-steps h3,
#howPanel .how-score-heading,
#howPanel .how-next h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 17px;
}

.how-steps p { margin: 0; color: #555B78; font-size: 15px; line-height: 1.55; }
#howPanel .how-score-heading { margin-top: 28px; }

#howPanel .how-score-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0 30px;
}

#howPanel .how-score-bar {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 12px;
  background: #F7F8FC;
  border: 1px solid var(--border-color);
  border-radius: 9px;
}

#howPanel .how-score-bar .tag { padding: 4px 8px; font-size: 12px; }
#howPanel .how-score-bar small { color: #555B78; font-size: 12px; }

.how-next {
  padding-top: 26px;
  border-top: 1px solid var(--border-color);
}

.how-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.how-next-grid button {
  min-height: 100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 15px;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  cursor: pointer;
}

.how-next-grid button:hover { border-color: var(--bg-main); background: #F8F9FF; }
.how-next-grid b { font-size: 14px; }
.how-next-grid span { color: #676D89; font-size: 12px; line-height: 1.4; }
.how-next-grid i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--bg-main); font-style: normal; }

/* Submit: clear contrast, concise guidance and one coherent form surface. */
#submitScreen .race-page-inner { max-width: 1040px; }

#submitScreen .submit-panel {
  max-width: none;
  padding: 28px 0 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.submit-panel .race-kicker { color: var(--accent); }
.submit-panel .race-title { max-width: 820px; color: #fff; }
.submit-panel .race-title .script { color: var(--accent); }

.submit-panel > .race-intro {
  max-width: 720px;
  margin: 14px 0 10px;
  color: #DDE0F6;
  font-size: 17px;
  line-height: 1.55;
}

.submit-login-note {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  color: #E5E7F7;
  font: 600 12px 'Space Grotesk', sans-serif;
  background: rgba(15, 18, 69, .24);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
}

.submit-workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 30px;
}

.submit-guide {
  padding: 24px 22px;
  color: #fff;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
}

.submit-guide-kicker {
  color: var(--accent);
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.submit-guide h2 { margin: 12px 0 22px; font-size: 24px; line-height: 1.15; letter-spacing: -.025em; }
.submit-guide ul { margin: 0; padding: 0; list-style: none; }

.submit-guide li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.submit-guide li > span { color: #858CC6; font: 700 10px 'JetBrains Mono', monospace; }
.submit-guide p { margin: 0; color: #C9CDEA; font-size: 13px; line-height: 1.5; }

.submit-form-card {
  padding: 26px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(17, 21, 56, .08);
  border-radius: 12px;
  box-shadow: var(--ui-shadow);
}

.submit-form-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.submit-form-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: #6A7093;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.submit-form-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.submit-form-card .submit-mode-tabs { margin: 0; flex: 0 0 auto; }

.submit-form-card .submit-mode-hint {
  margin: 0 0 16px;
  padding: 12px 14px;
  color: #4F5573;
  font-size: 14px;
  line-height: 1.5;
  background: #F6F7FC;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.submit-form-card .submit-q-grid { margin: 0 0 14px; gap: 10px; }

.submit-form-card .submit-q-block {
  padding: 15px;
  background: #F8F9FC;
  border-color: #D9DDEA;
}

.submit-form-card .submit-q-block label,
.submit-form-card .submit-extra-field label {
  color: #555C7D;
  font-size: 11px;
}

.submit-form-card .submit-q-block textarea,
.submit-form-card .submit-q-block input,
.submit-form-card .submit-extra input,
.submit-form-card .submit-extra select,
.submit-form-card .submit-note-field input {
  min-height: 44px;
  color: var(--ink);
  background: #fff;
  border-color: #CED3E3;
}

.submit-form-card textarea::placeholder,
.submit-form-card input::placeholder { color: #737A93; opacity: 1; }

.submit-form-card .submit-extra { grid-template-columns: 1fr; gap: 0; margin-bottom: 12px; }
.submit-form-card .submit-optional { color: #707792; font-size: 11px; }

.submit-form-card .submit-preview {
  min-height: 52px;
  color: #555C75;
  background: #F8F9FC;
  border-color: #C7CBD9;
}

.submit-form-card .race-start-button { width: 100%; min-height: 52px; margin-top: 4px; }
.submit-form-card .submit-terms { color: #676D86; font-size: 12px; line-height: 1.55; }

@media (max-width: 760px) {
  .submit-workspace { grid-template-columns: 1fr; }
  .submit-guide { padding: 20px; }
  .submit-guide h2 { max-width: 420px; }
  .submit-guide ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .submit-guide li { display: block; padding-bottom: 0; }
  .submit-guide li > span { display: block; margin-bottom: 7px; }
  #howPanel .how-score-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-next-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .sidebar { padding: 14px 12px 12px; }
  .sidebar-tagline { margin-bottom: 16px; }
  .sidebar-item { min-height: 45px; }
  .sidebar-icon { width: 27px; height: 27px; }
  .home-modes-heading { align-items: flex-end; flex-direction: row; gap: 10px; }
  .home-mode-body small,
  .home-more-card small { font-size: 12px; }
  #howPanel { padding: 25px 20px; }
  #howPanel h2 { font-size: 29px; }
  .how-lede { font-size: 16px; }
  .how-equation { width: 100%; justify-content: center; }
  .how-example { padding: 16px 14px; }
  .how-example-grid { grid-template-columns: 1fr; }
  .how-example-grid article { min-height: 0; }
  .how-example-grid p { margin-bottom: 10px; }
  .how-example-result { align-items: flex-start; flex-direction: column; gap: 5px; }
  .how-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  #howPanel .how-score-bars { grid-template-columns: 1fr 1fr; }
  #submitScreen .submit-panel { padding: 20px 0 0; }
  .submit-panel > .race-intro { font-size: 16px; }
  .submit-workspace { margin-top: 22px; }
  .submit-guide { padding: 18px 16px; }
  .submit-guide h2 { margin-bottom: 16px; font-size: 21px; }
  .submit-guide ul { grid-template-columns: 1fr; gap: 0; }
  .submit-guide li { display: grid; padding: 11px 0; }
  .submit-form-card { padding: 20px 14px; }
  .submit-form-heading { align-items: stretch; flex-direction: column; }
  .submit-form-card .submit-mode-tabs { width: 100%; }
  .submit-form-card .submit-q-block { padding: 13px 11px; }
}

@media (max-height: 650px) {
  .sidebar { padding-top: 10px; }
  .sidebar-header { min-height: 42px; }
  .sidebar-tagline { margin-bottom: 7px; }
  .sidebar-group { margin-bottom: 7px; }
  .sidebar-group-title { padding-top: 3px; padding-bottom: 3px; }
  .sidebar-item { min-height: 39px; padding-top: 4px; padding-bottom: 4px; }
  .sidebar-icon { width: 25px; height: 25px; }
  .sidebar-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-item,
  .sidebar-close { transition: none; }
}

/* ===== Leaderboard als eigen pagina ===== */
#leaderboardScreen .library-page-inner { max-width: 840px; }
#leaderboardScreen .library-page-title { font-size: clamp(36px, 6vw, 58px); margin-bottom: 12px; }
#leaderboardScreen .library-page-subtitle { font-size: 17px; line-height: 1.5; }
#leaderboardScreen .leaderboard-list { display: grid; gap: 0; margin: 0; min-height: 180px; align-content: start; }
.lb-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-top: 24px; border-radius: 12px; background: rgba(20,22,59,.32); }
#leaderboardScreen .lb-tabs button { margin: 0; border: 0; border-radius: 8px; padding: 12px 18px; background: transparent; color: #d8dcff; box-shadow: none; }
#leaderboardScreen .lb-tabs button.active { background: var(--accent); color: #14163B; }
.lb-board { margin-top: 20px; border: 1px solid var(--surface-border); border-radius: 16px; overflow: hidden; background: var(--surface); color: var(--ink); }
.lb-board-heading { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--surface-border); font: 600 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.leaderboard-day-nav {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center; gap: 12px; margin-top: 20px; padding: 24px 18px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  background: #14163B;
}
.leaderboard-day-nav[hidden] { display: none; }
.lb-day-center { min-width: 0; text-align: center; }
.lb-day-center label { display: block; margin-bottom: 8px; color: var(--accent); font: 600 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
#leaderboardDateSelect { display: block; width: 100%; max-width: 390px; margin: 0 auto; padding: 9px 6px; border: 0; border-bottom: 1px solid #52567d; border-radius: 0; background: #14163B; color: #fff; font: 600 clamp(12px, 2.3vw, 18px) 'Space Grotesk', sans-serif; cursor: pointer; text-align: center; color-scheme: dark; }
.leaderboard-day-nav .lb-latest { display: inline-block; width: auto; height: auto; margin-top: 12px; padding: 4px 8px; border: 0; background: transparent; color: #d8dcff; font: 500 12px 'Space Grotesk', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.leaderboard-day-nav .lb-latest[hidden] { display: none; }
.leaderboard-day-nav > button {
  width: 44px; height: 40px; border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; background: transparent; color: #fff;
  font: 700 20px/1 'Space Grotesk', sans-serif; cursor: pointer;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.leaderboard-day-nav > button:not(:disabled):hover { background: rgba(255,255,255,.15); }
.leaderboard-day-nav > button:disabled { opacity: .25; cursor: default; }
#leaderboardScreen button:focus-visible, #leaderboardDateSelect:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#leaderboardScreen .lb-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; border: 0; border-bottom: 1px solid var(--surface-border); border-radius: 0;
  background: var(--surface); color: var(--ink);
}
#leaderboardScreen .lb-row:last-child { border-bottom: 0; }
#leaderboardScreen .lb-row.me { box-shadow: inset 4px 0 var(--accent); background: var(--surface-2); }
#leaderboardScreen .lb-row:first-child .lb-rank { background: var(--accent); color: #14163B; border-radius: 6px; padding: 6px; }
#leaderboardScreen .lb-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
#leaderboardScreen .lb-rank {
  flex: 0 0 auto; min-width: 2.6ch; color: var(--text-muted);
  font: 600 13px 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
#leaderboardScreen .lb-name { font: 600 15px 'Space Grotesk', sans-serif; overflow-wrap: anywhere; }
#leaderboardScreen .lb-score {
  flex: 0 0 auto; font: 600 16px 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
/* De factor staat op --bg-main (zie styles.css). In het lichte thema is dat
   een stevig blauw op een witte kaart: prima. In het donkere thema is het
   #1E2A5A op een kaart van #2A3567 — contrastverhouding 1,18, waar 4,5 de
   ondergrens is. Het belangrijkste getal op een scorebord was daar dus
   praktisch onzichtbaar.
   De streak-variant hieronder had zijn donkere correctie al; deze ontbrak. */
[data-theme="dark"] #leaderboardScreen .lb-score { color: var(--accent); }

#leaderboardScreen .lb-score-streak { color: #B45309; }
[data-theme="dark"] #leaderboardScreen .lb-score-streak { color: #FCD34D; }
.lb-leeg {
  padding: 26px 18px; border: 1px dashed var(--surface-border); border-radius: 10px;
  background: var(--surface); color: var(--text-muted);
  font: 14px/1.5 'Space Grotesk', sans-serif; text-align: center;
}
#leaderboardScreen .lb-leeg { display: grid; place-content: center; min-height: 180px; padding: 30px; border: 0; border-radius: 0; line-height: 1.7; }
/* Uitgelogd: onder de lijst een uitnodiging om mee te doen. Kijken mag zonder
   account, dus dit staat er onder en niet voor. */
.lb-uitnodiging {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  margin-top: 18px; padding: 22px 18px;
  /* Deze uitnodiging staat binnen de witte scorekaart, niet op de blauwe
     pagina. Vandaar --text-muted en --surface-border en niet de lichte kleuren
     die elders op deze pagina werken: die zijn wit-op-wit. */
  border-top: 1px solid var(--surface-border);
  color: var(--text-muted); font: 14px/1.55 'Space Grotesk', sans-serif;
}
.lb-uitnodiging p { margin: 0; max-width: 400px; }
.lb-uitnodiging .hero-cta { font-size: 14px; padding: 12px 26px; }

/* Staat binnen de witte puzzelkaart, dus tokens die met de kaart meebewegen. */
.geen-puzzel {
  padding: 28px 18px; text-align: center; line-height: 1.6;
  color: var(--text-muted); font: 15px/1.6 'Space Grotesk', sans-serif;
}

.lb-voetnoot { margin-top: 16px; color: #AAB0DF; font-size: 12px; }
.results-leaderboard-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }
.btn-stats-open, .btn-leaderboard-open { display: inline-flex; align-items: center; gap: 8px; }

/* Waarschuwing wanneer er voor vandaag nog geen daily is ingepland en de site
   terugvalt op de nieuwste puzzel die er wél is. Zonder deze melding kreeg de
   speler de puzzel van gisteren voorgeschoteld alsof het die van vandaag was,
   terwijl een score in dat geval niet wordt opgeslagen. */
.daily-verouderd {
  position: relative; z-index: 1;
  margin: 18px 0 0; padding: 9px 13px;
  border: 1px solid rgba(255, 190, 92, .45); border-radius: 9px;
  background: rgba(255, 190, 92, .12); color: #FFD79A;
  font: 13px/1.45 'Space Grotesk', sans-serif; max-width: 480px;
}

/* Deze korte uitleg voorkomt dat de formule als de gewone rekenvolgorde wordt
   gelezen; Breinkrakers rekent bewust steeds van links naar rechts. */
.bk-leesregel {
  margin: -10px 0 22px; text-align: center; color: #D9DDF9;
  font: 13px/1.5 'Space Grotesk', sans-serif;
}

@media (max-width: 520px) {
  .leaderboard-day-nav { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; padding: 20px 10px; }
  .leaderboard-day-nav > button { width: 36px; height: 36px; }
  #leaderboardScreen .lb-tabs { display: flex; }
  #leaderboardScreen .lb-tabs button { flex: 1; padding: 12px 8px; font-size: 11px; }
}