/* Leren — vormgeving. Groot, rustig, hoog contrast, duimvriendelijk. */
:root {
  --bg: #f4f6fb;
  --kaart: #ffffff;
  --tekst: #10162a;
  --zacht: #5b6480;
  --rand: #e2e6f0;
  --accent: #4f7cff;
  --goed: #13a05c;
  --goed-zacht: #e6f7ee;
  --fout: #e0413d;
  --fout-zacht: #fdecec;
  --bijna: #d98207;
  --bijna-zacht: #fdf3e2;
  --schaduw: 0 2px 4px rgba(16, 22, 42, .06), 0 12px 28px rgba(16, 22, 42, .08);
  --radius: 18px;
  --land: #b3c3dc;
  --land-rand: #ffffff;
  --zee: #e9f2fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --bg: #0f1222; --kaart: #191d33; --tekst: #f2f4fb; --zacht: #a2abc6;
    --rand: #2a3050; --accent: #7d9dff; --goed: #35c281; --goed-zacht: #14301f;
    --fout: #ff7b74; --fout-zacht: #331617; --bijna: #f0a93a; --bijna-zacht: #332510;
    --schaduw: 0 2px 4px rgba(0,0,0,.3), 0 14px 32px rgba(0,0,0,.35);
    --land: #4b5578; --land-rand: #191d33; --zee: #10192e;
  }
}
:root[data-thema="donker"] {
  --bg: #0f1222; --kaart: #191d33; --tekst: #f2f4fb; --zacht: #a2abc6;
  --rand: #2a3050; --accent: #7d9dff; --goed: #35c281; --goed-zacht: #14301f;
  --fout: #ff7b74; --fout-zacht: #331617; --bijna: #f0a93a; --bijna-zacht: #332510;
  --schaduw: 0 2px 4px rgba(0,0,0,.3), 0 14px 32px rgba(0,0,0,.35);
  --land: #4b5578; --land-rand: #191d33; --zee: #10192e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
#app { max-width: 760px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
button { font: inherit; color: inherit; cursor: pointer; }

/* --- knoppen --- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 20px; border-radius: 14px; border: 1px solid var(--rand);
  background: var(--kaart); font-weight: 600; transition: transform .08s ease, filter .15s ease;
}
.knop:active { transform: scale(.975); }
.knop--groot { width: 100%; min-height: 60px; font-size: 18px; }
.knop--primair { background: var(--accent); border-color: transparent; color: #fff; }
.knop--goed { background: var(--goed); border-color: transparent; color: #fff; }
.knop--stil { background: transparent; border-color: transparent; color: var(--zacht); min-height: 44px; padding: 8px 12px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }

/* --- koptekst --- */
.kop { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kop h1 { font-size: 26px; flex: 1; }
.kop__sub { color: var(--zacht); font-size: 14px; margin-top: 2px; }

/* --- deckkaarten --- */
.decks { display: grid; gap: 14px; }
.deck {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 18px; border-radius: var(--radius); border: 1px solid var(--rand);
  background: var(--kaart); box-shadow: var(--schaduw);
}
.deck__emoji { font-size: 34px; line-height: 1; }
.deck__body { flex: 1; min-width: 0; }
.deck__titel { display: block; font-size: 19px; font-weight: 700; }
.deck__sub { display: block; color: var(--zacht); font-size: 14px; }
.deck__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.badge {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--rand); color: var(--zacht);
}
.badge--nu { background: var(--accent); border-color: transparent; color: #fff; }
.badge--toets { background: var(--fout-zacht); color: var(--fout); border-color: transparent; }
.badge--klaar { background: var(--goed-zacht); color: var(--goed); border-color: transparent; }

/* --- voortgangsbalk --- */
.balk { height: 10px; border-radius: 999px; background: var(--rand); overflow: hidden; }
.balk__vul { height: 100%; border-radius: 999px; background: var(--goed); transition: width .3s ease; }
.balk--dun { height: 6px; }

/* --- paneel --- */
.paneel {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--schaduw); margin-bottom: 14px;
}
.paneel h2 { font-size: 17px; margin-bottom: 12px; }
.rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.rij + .rij { border-top: 1px solid var(--rand); }
.zacht { color: var(--zacht); font-size: 14px; }

/* --- keuzechips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--rand);
  background: var(--kaart); font-size: 14px; font-weight: 600; min-height: 44px;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #fff; }

/* --- sessie --- */
.sessiekop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sessiekop .balk { flex: 1; }
.teller { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--zacht); }
.reeks { font-weight: 700; font-size: 14px; }

.vraagkaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--schaduw); margin-bottom: 14px;
}
.vraagkaart__label { font-size: 13px; font-weight: 700; color: var(--zacht); text-transform: uppercase; letter-spacing: .06em; }
.vraagkaart__vraag { font-size: clamp(26px, 7vw, 38px); font-weight: 800; margin: 10px 0 4px; word-break: break-word; }
.vraagkaart__vraag--lang { font-size: clamp(20px, 5vw, 28px); }
.vraagkaart__hint { color: var(--zacht); font-size: 15px; font-style: italic; margin-top: 10px; }
.vraagkaart__hint b { font-style: normal; color: var(--tekst); background: var(--bijna-zacht); border-radius: 4px; padding: 0 3px; }

.invoer {
  width: 100%; min-height: 60px; padding: 16px; font-size: 20px; font-weight: 600;
  border-radius: 14px; border: 2px solid var(--rand); background: var(--kaart); color: var(--tekst);
}
.invoer:focus { outline: none; border-color: var(--accent); }
.invoer[data-status="goed"] { border-color: var(--goed); background: var(--goed-zacht); }
.invoer[data-status="fout"] { border-color: var(--fout); background: var(--fout-zacht); }
.invoer[data-status="bijna"] { border-color: var(--bijna); background: var(--bijna-zacht); }

.keuzes { display: grid; gap: 10px; }
.keuze { width: 100%; text-align: left; justify-content: flex-start; font-size: 17px; }
.keuze[data-status="goed"] { background: var(--goed-zacht); border-color: var(--goed); color: var(--goed); }
.keuze[data-status="fout"] { background: var(--fout-zacht); border-color: var(--fout); color: var(--fout); }

.uitslag { border-radius: 14px; padding: 14px 16px; margin: 12px 0; font-weight: 600; }
.uitslag--goed { background: var(--goed-zacht); color: var(--goed); }
.uitslag--fout { background: var(--fout-zacht); color: var(--fout); }
.uitslag--bijna { background: var(--bijna-zacht); color: var(--bijna); }
.uitslag small { display: block; font-weight: 500; opacity: .85; margin-top: 4px; }

.acties { display: grid; gap: 10px; grid-template-columns: 1fr; }
.acties--twee { grid-template-columns: 1fr 1fr; }

/* --- kaart (topografie) --- */
.kaartdoos {
  position: relative; background: var(--zee); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; touch-action: none;
}
.kaartdoos svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.land { fill: var(--land); stroke: var(--land-rand); stroke-width: .8; }
.land--toets { fill: var(--land); }
.land--klikbaar { cursor: pointer; }
.land--doel-goed { fill: var(--goed); }
.land--doel-fout { fill: var(--fout); }
.land--gemarkeerd { fill: var(--accent); }
.land--misklik { fill: var(--fout); opacity: .55; }
.graticule { fill: none; stroke: var(--land-rand); stroke-width: .4; opacity: .35; }
.lijn { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lijn--water { stroke: #5aa9e6; }
.lijn--berg { stroke: #9a7b4f; stroke-dasharray: 1 5; stroke-width: 4; }
.lijn--raak { stroke: transparent; stroke-width: 22; cursor: pointer; pointer-events: all; }
.lijn--doel-goed { stroke: var(--goed); stroke-width: 5; }
.lijn--doel-fout { stroke: var(--fout); stroke-width: 5; }
.stip { fill: #fff; stroke: #10162a; stroke-width: 1.6; }
.stip--raak { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.stip--doel-goed { fill: var(--goed); stroke: #fff; }
.stip--doel-fout { fill: var(--fout); stroke: #fff; }
.marker { fill: none; stroke: var(--accent); stroke-width: 4; }
.zeelabel { font-size: 13px; font-weight: 700; fill: #5aa9e6; text-anchor: middle; pointer-events: none; }
.kaartknoppen { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.kaartknop {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--kaart); font-size: 20px; font-weight: 700; display: grid; place-items: center;
  box-shadow: var(--schaduw);
}
.kaarthulp { position: absolute; left: 10px; top: 10px; font-size: 12px; color: var(--zacht); background: var(--kaart); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rand); }

/* --- klaarscherm --- */
.score { text-align: center; padding: 26px 18px; }
.score__cijfer { font-size: 64px; font-weight: 800; line-height: 1; }
.score__tekst { font-size: 18px; font-weight: 600; margin-top: 8px; }
.score__sub { color: var(--zacht); margin-top: 6px; }
.foutenlijst { display: grid; gap: 8px; }
.foutrij { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); font-size: 15px; }
.foutrij b { font-weight: 700; }

/* --- doosjes --- */
.doosjes { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.doosje { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.doosje__staaf { width: 100%; border-radius: 6px 6px 0 0; background: var(--accent); min-height: 3px; }
.doosje__label { font-size: 11px; color: var(--zacht); }

/* --- melding --- */
.melding {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom));
  background: var(--tekst); color: var(--bg); padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--schaduw); z-index: 20; max-width: 90vw;
}
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.puls { animation: puls 1s ease-in-out 2; }
@keyframes puls { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.schud { animation: schud .3s ease; }
@keyframes schud { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

/* --- formulier voor eigen lijstjes --- */
.veld { margin-bottom: 14px; }
.veld label { display: block; font-size: 13px; font-weight: 700; color: var(--zacht); margin-bottom: 6px; }
.invoer--klein { min-height: 48px; font-size: 16px; font-weight: 500; }
.invoer--tekstvak { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 400; line-height: 1.7; resize: vertical; }

/* --- eigen ja-of-nee-venster --- */
.overlaag {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: rgba(16, 22, 42, .45); backdrop-filter: blur(3px);
}
.venster {
  background: var(--kaart); border-radius: var(--radius); padding: 22px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.venster h2 { font-size: 20px; margin-bottom: 8px; }
.knop--gevaar { background: var(--fout); border-color: transparent; color: #fff; }