/* ==========================================================================
   Study Hub — spellaag (versie 5)

   Alles wat de app als studiespel laat aanvoelen staat hier bij elkaar:
   de XP-teller in de bovenbalk, de HUD boven een vraag, de beloning na een
   goed antwoord, de status van de vraag zelf en de opnieuw getekende mindmap.

   Twee regels waar dit bestand zich aan houdt:
     1. Beweging en beloning komen ná je antwoord, nooit ernaast tijdens het
        nadenken. Het oefenscherm zelf blijft rustig.
     2. Elke kleur behoudt de betekenis uit tokens.css — amber is XP en
        voortgang, cyaan is selectie, groen goed, rood fout, violet geheugen.
   ========================================================================== */

/* --- XP en niveau in de bovenbalk ------------------------------------------ */

.xp-hud {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 22px 7px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--action) 30%, var(--line));
  background: linear-gradient(120deg,
              color-mix(in srgb, var(--action) 12%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

.xh-level {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background:
    conic-gradient(var(--action) calc(var(--p, 0) * 1%),
                   color-mix(in srgb, var(--line) 70%, transparent) 0);
  transition: background var(--dur-slow) var(--ease-out);
}
.xh-level::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--surface);
}
.xh-level b {
  position: relative; z-index: 1; font-family: var(--font-mono);
  font-size: var(--step-1); font-weight: 600; line-height: 1; color: var(--action);
}
.xh-level small { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.xh-body { display: grid; gap: 5px; min-width: 196px; }
.xh-top { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.xh-xp {
  font-family: var(--font-mono); font-size: var(--step-3); font-weight: 600;
  color: var(--text); letter-spacing: -.03em;
}
.xh-top span { font-size: var(--step-0); color: var(--action); font-weight: 600; }
.xh-bar {
  display: block; height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}
.xh-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--action), color-mix(in srgb, var(--action) 55%, var(--memory)));
  transition: width var(--dur-slow) var(--ease-out);
}
.xh-next { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .xh-body { min-width: 0; }
  .xh-next, .brand small { display: none; }
}
@media (max-width: 620px) {
  .xp-hud { padding: 4px; gap: 0; }
  .xh-body { display: none; }
}

/* --- rondekeuze ------------------------------------------------------------ */

.session-size {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.session-size .label { display: flex; align-items: center; gap: 7px;
                       font-weight: 600; color: var(--text-dim); }

.seg-choice.big button {
  min-width: 58px; padding: 9px 14px; font-size: var(--step-0); font-weight: 600;
}
.seg-choice.big button[aria-pressed="true"] {
  background: var(--action); color: var(--action-ink); border-color: transparent;
}

.modes { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
.mode { transition: transform var(--dur-quick) var(--ease-out),
                    border-color var(--dur-quick) var(--ease-out); }
.mode:hover { transform: translateY(-1px); }

/* --- samenstelling van de ronde -------------------------------------------- */

.round-meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: calc(var(--sp-4) * -1) 0 var(--sp-4);
}
.round-meta:empty { display: none; }
.rm-total { color: var(--text-dim); font-size: var(--step--1); margin-right: var(--sp-2); }
.rm-total b { font-family: var(--font-mono); color: var(--text); font-size: var(--step-0); }

.rm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: var(--step--1);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
}
.rm-pill .ico { width: 14px; height: 14px; }
.rm-pill.due    { border-color: color-mix(in srgb, var(--action) 40%, var(--line)); color: var(--action); }
.rm-pill.fresh  { border-color: color-mix(in srgb, var(--select) 40%, var(--line)); color: var(--select); }
.rm-pill.ahead  { border-color: color-mix(in srgb, var(--memory) 40%, var(--line)); color: var(--memory); }
.rm-pill.parked { border-color: var(--line); color: var(--muted); }

/* --- HUD boven de vraag ----------------------------------------------------- */

.round-hud { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hud-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.hud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: var(--step--1);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
}
.hud-chip b { font-family: var(--font-mono); font-size: var(--step-1); color: var(--text); line-height: 1; }
.hud-chip small { color: var(--muted); font-size: 11px; }
.hud-chip .ico { width: 15px; height: 15px; }

.hud-chip.combo.hot {
  border-color: color-mix(in srgb, var(--action) 55%, var(--line));
  background: var(--action-tint);
}
.hud-chip.combo.hot b, .hud-chip.combo.hot .ico { color: var(--action); }
.hud-chip.combo.blaze {
  border-color: var(--action);
  box-shadow: var(--glow-action);
}
.hud-chip.xp .ico { color: var(--action); }
.hud-chip.pos { margin-left: auto; font-family: var(--font-mono); color: var(--text-dim); }
.hud-chip.pos span { color: var(--muted); }

/* --- beheersing van deze vraag ---------------------------------------------- */

.q-status {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: var(--step--1); color: var(--text-dim);
}
.q-status b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.q-status .qs-ok { color: var(--ok); font-family: var(--font-ui); }
.q-status.new { border-color: color-mix(in srgb, var(--select) 35%, var(--line-soft)); }
.q-status.parked { border-color: color-mix(in srgb, var(--ok) 35%, var(--line-soft)); }

.qs-dots { display: inline-flex; gap: 5px; }
.qs-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  transition: background var(--dur-base) var(--ease-out);
}
.qs-dot.on { background: var(--ok); border-color: var(--ok);
             box-shadow: 0 0 0 3px var(--ok-tint); }
.qs-line { flex: 1; min-width: 200px; }
.qs-due { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.qs-due .ico { width: 14px; height: 14px; }

/* --- beloning na een goed antwoord ------------------------------------------ */

.reward {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--action) 45%, var(--line));
  background: linear-gradient(115deg,
              color-mix(in srgb, var(--action) 14%, var(--surface)),
              color-mix(in srgb, var(--memory) 8%, var(--surface)));
  animation: reward-in var(--dur-slow) var(--ease-spring);
}
@keyframes reward-in {
  from { opacity: 0; transform: translateY(calc(10px * var(--motion-scale))) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.reward-xp { display: flex; align-items: baseline; gap: 2px; color: var(--action); }
.rx-plus { font-size: var(--step-2); font-weight: 600; }
.rx-n {
  font-family: var(--font-mono); font-size: var(--step-4); font-weight: 600;
  line-height: 1; letter-spacing: -.04em;
}
.rx-l { font-size: var(--step-1); font-weight: 600; margin-left: 4px; }

.reward-words { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.reward-words b { font-size: var(--step-2); color: var(--text); line-height: 1.25; }
.reward-words span { color: var(--muted); font-size: var(--step--1); }

.reward-combo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--action) 40%, var(--line));
  background: var(--surface);
}
.reward-combo .ico { color: var(--action); }
.reward-combo b { color: var(--text); }
.reward-combo span { color: var(--muted); font-size: var(--step--1); }
.reward-combo.hit { box-shadow: var(--glow-action); }

.feedback .elaborate.parked-note {
  display: flex; align-items: flex-start; gap: 8px; color: var(--text-dim);
}
.feedback .elaborate.parked-note .ico { color: var(--ok); flex: none; margin-top: 2px; }

/* --- afronding van de ronde -------------------------------------------------- */

.round-earned { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.round-earned > span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; font-size: var(--step--1);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
}
.round-earned b { font-family: var(--font-mono); font-size: var(--step-1); color: var(--text); }
.round-earned .re-xp { border-color: color-mix(in srgb, var(--action) 45%, var(--line)); }
.round-earned .re-xp .ico { color: var(--action); }
.round-earned .re-combo .ico { color: var(--action); }
.round-earned .re-parked .ico { color: var(--ok); }

/* ==========================================================================
   Mindmap versie 5 — nu met beeld

   De map is een tekening: centraal begrip, stam, verdeelbalk en takken.
   Elke tak heeft een eigen kleurtoon (--hue) en pictogram; elk begrip ook.
   Beeld plus woord onthoud je beter dan woord alleen — mits het beeld
   iets zégt, daarom worden ze op trefwoord gekozen.
   ========================================================================== */

.mindmap { display: grid; gap: var(--sp-4); }

.mm-map {
  position: relative; display: grid; justify-items: center; gap: 0;
  padding: var(--sp-4) 0 0;
}

.mm-centre {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-width: 0; max-width: 420px; padding: 14px 24px;
  border-radius: 999px; font-weight: 600; text-align: left;
  color: var(--text);
  border: 1.5px solid var(--memory);
  background: linear-gradient(120deg,
              color-mix(in srgb, var(--memory) 22%, var(--surface)),
              color-mix(in srgb, var(--memory) 8%, var(--surface)));
  box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--memory) 80%, transparent);
}
.mm-centre::after { content: none; }
.mm-centre-ico { display: grid; place-items: center; color: var(--memory); }
.mm-centre-ico .ico { width: 26px; height: 26px; }
.mm-centre-label { font-size: var(--step-1); }

.mm-trunk {
  width: 2px; height: 26px;
  background: linear-gradient(var(--memory), var(--line));
}

.mm-branches {
  position: relative; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3); padding-top: 22px;
}
/* de verdeelbalk waar de stelen aan hangen */
.mm-branches::before {
  content: ''; position: absolute; top: 0; height: 2px;
  left: calc(50% / var(--n, 3)); right: calc(50% / var(--n, 3));
  background: var(--line); border-radius: 2px;
}

.mm-branch {
  position: relative; padding: var(--sp-3); border-radius: var(--r-lg);
  min-height: 132px; cursor: pointer;
  border: 1px solid hsl(var(--hue, 190) 40% 40% / .5);
  background:
    linear-gradient(180deg, hsl(var(--hue, 190) 60% 45% / .10), transparent 60%),
    var(--surface-2);
  transition: border-color var(--dur-quick) var(--ease-out),
              background var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.mm-branch::before { content: none; }
.mm-stem {
  position: absolute; left: 50%; bottom: 100%; width: 2px; height: 22px;
  background: hsl(var(--hue, 190) 55% 55% / .7);
}
.mm-stem::after {
  content: ''; position: absolute; left: 50%; top: -3px;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: hsl(var(--hue, 190) 60% 60%);
}

.mm-branch-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.mm-branch-ico {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; color: hsl(var(--hue, 190) 65% 68%);
  background: hsl(var(--hue, 190) 60% 45% / .16);
  border: 1px solid hsl(var(--hue, 190) 55% 50% / .35);
}
.mm-branch-ico .ico { width: 17px; height: 17px; }
.mm-branch h5 {
  margin: 0; font-size: var(--step-0); font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 0;
}
.mm-branch h5::before { content: none; }
.mm-branch-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px; border-radius: 999px; color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.mm-branch.is-full .mm-branch-count { color: var(--ok); }

.mm-branch.armed {
  border-color: hsl(var(--hue, 190) 70% 60%);
  background:
    linear-gradient(180deg, hsl(var(--hue, 190) 60% 45% / .2), transparent 70%),
    var(--surface-2);
  transform: translateY(-1px);
}
.mm-drop { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px;
           align-content: flex-start; }

/* --- de losse begrippen ------------------------------------------------------ */

.mm-tray-head { display: flex; align-items: center; gap: var(--sp-3); }
.mm-tray-label { color: var(--muted); font-size: var(--step--1); flex: 1; }
.mm-tray-count {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
}

.mm-tray {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px;
  padding: 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px dashed var(--line);
}
.mm-tray.is-empty { border-color: var(--line-soft); }

.mm-node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: 999px;
  cursor: grab; touch-action: none;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  font-size: var(--step--1); font-weight: 500; text-align: left;
  transition: border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.mm-node-ico {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; color: var(--muted);
  background: color-mix(in srgb, var(--line) 45%, transparent);
}
.mm-node-ico .ico { width: 15px; height: 15px; }
.mm-node-label { line-height: 1.25; }

.mm-node:hover { border-color: var(--select); transform: translateY(-1px); }
.mm-node[aria-pressed="true"] {
  border-color: var(--select); background: var(--select-tint); color: var(--text);
  box-shadow: var(--glow-select);
}
.mm-node.is-placed {
  border-color: hsl(var(--hue, 190) 55% 50% / .6);
  background: hsl(var(--hue, 190) 55% 45% / .14);
  color: var(--text);
}
.mm-node.is-placed .mm-node-ico {
  color: hsl(var(--hue, 190) 65% 70%);
  background: hsl(var(--hue, 190) 60% 45% / .22);
}
.mm-node.is-dragging {
  cursor: grabbing; z-index: 30; position: relative;
  box-shadow: var(--shadow-3); border-color: var(--select);
  transform-origin: center;
  /* Tijdens het slepen moet het begrip zelf doorzichtig zijn voor de muis en
     de vinger: anders kijkt de app precies naar het gesleepte blokje in
     plaats van naar de tak waar je hem boven houdt, en komt hij nooit aan. */
  pointer-events: none;
}
.mindmap.is-dragging-any .mm-branch { border-style: dashed; }

.mm-node.correct { border-color: var(--ok); color: var(--ok); }
.mm-node.correct .mm-node-ico { color: var(--ok); background: var(--ok-tint); }
.mm-node.wrong { border-color: var(--no); color: var(--no); }
.mm-node.wrong .mm-node-ico { color: var(--no); background: var(--no-tint); }
.mm-fix {
  display: inline-block; margin-left: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}

/* Lichte weergave: dezelfde takkleuren, maar donkerder zodat ze op wit
   leesbaar blijven. */
[data-theme="daylight"] .mm-branch {
  border-color: hsl(var(--hue, 190) 45% 50% / .45);
  background:
    linear-gradient(180deg, hsl(var(--hue, 190) 70% 55% / .12), transparent 60%),
    var(--surface-2);
}
[data-theme="daylight"] .mm-branch-ico {
  color: hsl(var(--hue, 190) 60% 32%);
  background: hsl(var(--hue, 190) 65% 55% / .16);
  border-color: hsl(var(--hue, 190) 50% 45% / .3);
}
[data-theme="daylight"] .mm-stem { background: hsl(var(--hue, 190) 50% 45% / .7); }
[data-theme="daylight"] .mm-stem::after { background: hsl(var(--hue, 190) 55% 42%); }
[data-theme="daylight"] .mm-node.is-placed {
  border-color: hsl(var(--hue, 190) 45% 45% / .55);
  background: hsl(var(--hue, 190) 65% 55% / .13);
}
[data-theme="daylight"] .mm-node.is-placed .mm-node-ico {
  color: hsl(var(--hue, 190) 60% 32%);
  background: hsl(var(--hue, 190) 65% 55% / .2);
}
[data-theme="daylight"] .mm-branch.armed { border-color: hsl(var(--hue, 190) 55% 40%); }

@media (max-width: 700px) {
  .mm-branches { padding-top: 0; }
  .mm-branches::before { content: none; }
  .mm-stem { display: none; }
  .mm-trunk { height: 18px; }
  .mm-node { min-height: 40px; }
  .q-status { padding: 8px 11px; }
  .hud-chip.pos { margin-left: 0; }
}

/* --- toets ------------------------------------------------------------------
   Een toets moet er rustiger uitzien dan een oefenronde: geen beloningen,
   geen kleur per antwoord, alleen voortgang en aan het eind een uitslag. */

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.chip {
  padding: 10px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-family: var(--font-mono); font-size: var(--step--1);
  cursor: pointer; transition: border-color var(--dur-base) var(--ease-out),
                               background var(--dur-base) var(--ease-out);
}
.chip:hover { border-color: var(--select); background: var(--surface-3); }

.toets-balk {
  height: 4px; border-radius: 99px; background: var(--surface-3);
  overflow: hidden; margin: var(--sp-3) 0 var(--sp-4);
}
.toets-balk > i { display: block; height: 100%; background: var(--select);
                  transition: width var(--dur-base) var(--ease-out); }

.toets-cijfer {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-5);
}
.toets-cijfer b { font-size: var(--step-5); font-family: var(--font-mono); letter-spacing: -.04em; }
.toets-cijfer span { color: var(--text-dim); }
.toets-cijfer .muted { color: var(--muted); }

.toets-lijst { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.toets-rij {
  display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center;
  gap: var(--sp-3); padding: 9px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: var(--step--1);
}
.toets-rij b { font-family: var(--font-mono); color: var(--text); }
.toets-rij .muted { color: var(--muted); font-family: var(--font-mono); }
.toets-rij .meter { grid-column: 1 / -1; }

.toets-fouten { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.toets-fout {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line-soft));
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.toets-fout b { color: var(--text); }
.toets-fout .goed { color: var(--ok); font-size: var(--step--1); }
.toets-fout .why { color: var(--muted); font-size: var(--step--1); }

@media (max-width: 640px) {
  .toets-rij { grid-template-columns: 3.5rem 1fr; }
  .toets-rij .muted { grid-column: 2; justify-self: end; }
}

.toets-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.toets-strip > div { display: flex; flex-direction: column; gap: 4px; }
.toets-strip b { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.toets-strip span { color: var(--muted); font-size: var(--step--1); max-width: 60ch; }
.toets-strip .muted { color: var(--text-dim); font-family: var(--font-mono); }

.leerpunten {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.leerpunten ul { margin: var(--sp-3) 0 var(--sp-2); padding-left: 1.1rem;
                 display: flex; flex-direction: column; gap: 6px; }
.leerpunten li { color: var(--text-dim); font-size: var(--step--1); }
.leerpunten .sub { color: var(--muted); font-size: var(--step--2); }

/* ==========================================================================
   Vraagscherm dat past

   Eén vraag hoort in één scherm te staan: je wil de vraag, de antwoorden en
   de knop tegelijk zien, zonder te scrollen of op Enter te moeten drukken om
   te weten wat er nog onder staat. Alles wat daar niet bij hoort — de meters,
   de geheugenstand, de hoofdstukkenlijst — zit achter "Details".
   ========================================================================== */

.q-kop {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-2);
}
.q-kop .q-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.q-open { flex: 0 0 auto; }
.q-details { margin-bottom: var(--sp-3); }

.stage { display: flex; flex-direction: column; }
.q-inhoud { flex: 1 1 auto; min-height: 0; overflow: auto; }
.stage > .stage-foot {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--card, #11181f);
  padding-top: var(--sp-2); margin-top: var(--sp-2);
}
.stage .prompt { margin: 0 0 var(--sp-3); }

/* Een plaatje mag nooit de antwoorden uit beeld duwen. */
.stage figure, .stage .figure, .stage .picgrid { max-height: 26vh; overflow: hidden; }
.stage figure img, .stage .figure svg, .stage figure svg { max-height: 24vh; }

/* De toetsenbordregel heeft alleen zin met een toetsenbord. */
@media (hover: none), (max-width: 720px) { .toetsenbord-only { display: none; } }

@media (max-width: 979px) {
  .rails { display: none; }
  .rails.open { display: block; }
  .rails-knop { width: 100%; margin-bottom: var(--sp-2); }
  /* Op de telefoon krijgt de vraag precies de ruimte die er is: wat niet past
     scrolt binnen het antwoordvak, niet met de hele pagina mee. */
  /* De kop en de knoppenbalk staan vast; wat niet past scrolt binnen de vraag
     zelf, niet met de hele pagina mee. Zo staat "Controleren" altijd in beeld
     en hoef je nooit naar beneden om te zien of er nog iets komt. */
  html.in-ronde, body.in-ronde { height: 100%; overflow: hidden; }
  body.in-ronde { display: flex; flex-direction: column; }
  body.in-ronde main#app,
  body.in-ronde .part-hero,
  body.in-ronde .part-hero > .shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.in-ronde .study { display: block; flex: 1 1 auto; min-height: 0; }
  body.in-ronde .stage { height: 100%; min-height: 0; }
  body.in-ronde .footer { display: none; }
}

/* Tijdens een vraag verdwijnt alles wat niet de vraag is. Je komt hier om te
   oefenen, niet om je planning te bekijken; die staat er na de ronde weer. */
body.in-ronde .part-head,
body.in-ronde .plan-strip,
body.in-ronde .footer,
body.in-ronde .rails-knop { display: none; }
body.in-ronde .modes,
body.in-ronde .session-size,
body.in-ronde .toets-strip,
body.in-ronde .crumbs { display: none; }
body.in-ronde .round-meta { margin: 0 0 var(--sp-2); }
body.in-ronde .shell { padding-top: var(--sp-2); }
@media (min-width: 980px) {
  body.in-ronde .modes { display: grid; }
  body.in-ronde .part-head { display: block; }
  body.in-ronde .session-size,
  body.in-ronde .toets-strip,
  body.in-ronde .crumbs { display: block; }
}
@media (min-width: 980px) { .rails-knop { display: none; } }

/* ==========================================================================
   Zin bouwen
   Tikken, niet slepen. De gekozen stukken staan bovenaan als één zin, de
   voorraad eronder; een afleider is van een goed stuk niet te onderscheiden.
   ========================================================================== */

.zin-zin {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 56px; padding: var(--sp-2);
  border: 1px dashed var(--line, #2a3742); border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.zin-zin.correct { border-color: var(--ok, #63c07d); border-style: solid; }
.zin-zin.wrong { border-color: var(--bad, #e0796f); border-style: solid; }
.zin-leeg { color: var(--muted); font-size: 13px; }

.zin-bak {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3);
}
.zin-stuk {
  border: 1px solid var(--line, #2a3742); border-radius: 999px;
  background: var(--chip, #16202a); color: var(--text, #e9f0f3);
  padding: 9px 14px; font: inherit; font-size: 15px; cursor: pointer;
  min-height: 40px;                      /* goed aan te tikken op een telefoon */
}
.zin-stuk:hover { border-color: var(--accent, #8fd4a8); }
.zin-stuk.in-zin { background: var(--accent-soft, #1d2e28); padding-left: 8px; }
.zin-stuk.in-zin.fout { border-color: var(--bad, #e0796f); }
.zin-nr {
  display: inline-block; min-width: 18px; margin-right: 6px;
  color: var(--muted); font-size: 11px;
}
.zin-acties { display: flex; gap: 8px; margin-top: var(--sp-2); }

/* ==========================================================================
   Knoppen met tekst in de bovenbalk
   Een icoon alleen wordt niet herkend — "tandwiel" is geen tandwiel als je
   hem niet kent. Dus staat er gewoon bij waar hij voor is.
   ========================================================================== */

.tekst-knop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line, #2a3742); background: transparent;
  color: var(--text, #e9f0f3); font: inherit; font-size: 13px;
  text-decoration: none; cursor: pointer; min-height: 38px;
}
.tekst-knop:hover { border-color: var(--accent, #8fd4a8); }
.tekst-knop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 560px) { .tekst-knop span { display: none; } .tekst-knop { padding: 7px 9px; } }

/* ==========================================================================
   Het keuzescherm vóór een ronde, compact op de telefoon

   Negen modusknoppen met uitleg eronder, een rij rondegroottes en een
   toetsblok: op een breed scherm overzichtelijk, op een telefoon een muur
   waar je doorheen moet scrollen voordat je kunt beginnen. Op smalle
   schermen blijven het dezelfde knoppen, maar klein en zonder bijschrift —
   de uitleg staat in de titel als je hem lang aantikt.
   ========================================================================== */

@media (max-width: 680px) {
  .modes { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--sp-3) 0; }
  .mode { padding: 9px 8px; border-radius: 10px; text-align: center; }
  .mode b { font-size: 12px; margin: 0; display: flex; flex-direction: column;
            align-items: center; gap: 3px; line-height: 1.15; }
  .mode b svg { width: 18px; height: 18px; }
  .mode > span { display: none; }
  .mode .mode-n { display: inline; font-size: 11px; }

  .session-size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                  margin: var(--sp-2) 0; }
  .session-size .label { font-size: 12px; color: var(--muted); }
  .session-size .seg-choice.big button { padding: 7px 11px; font-size: 13px; min-height: 38px; }

  .toets-strip { padding: var(--sp-3); }
  .toets-strip span { font-size: 12px; }
}