/* Digibord eerst: grote letters, grote tikvlakken, niets dat van hover afhangt. */

:root {
  --papier: #fff8ec;
  --inkt: #1f2340;
  --wit: #ffffff;
  --grijs: #5c6080;
  --goed: #c4f0de;
  --mis: #ffd2cc;
  --tint: #ffe9a8;
  --rand: 3px solid var(--inkt);
  --schaduw: 5px 5px 0 var(--inkt);
  --rond: 1.1rem;
  font-size: clamp(17px, 0.9vw + 11px, 28px);
}

[data-kleur="geel"] { --tint: #ffe9a8; }
[data-kleur="paars"] { --tint: #dcd3ff; }
[data-kleur="koraal"] { --tint: #ffd2cc; }
[data-kleur="groen"] { --tint: #c4f0de; }
[data-kleur="blauw"] { --tint: #cfe3ff; }
[data-kleur="roze"] { --tint: #ffd0e8; }
[data-kleur="oranje"] { --tint: #ffdfb8; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: ui-rounded, "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.15rem; margin-top: 0.4rem; }
h3 { font-size: 1rem; margin-bottom: 0.5rem; }
button, input { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #3d8bff; outline-offset: 3px; }

/* ---- Kop ---- */

.top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 3vw, 2.5rem);
  background: var(--tint);
  border-bottom: var(--rand);
}
.top h1 { font-size: 1.5rem; flex: 1; }
.badge {
  padding: 0.25rem 0.8rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

main {
  display: grid;
  gap: 1.1rem;
  max-width: 1700px;
  margin: 0 auto;
  padding: 1.3rem clamp(1rem, 3vw, 2.5rem) 5.5rem; /* onderin ruimte voor het ? en het slotje */
}
main > * { min-width: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0.5rem 1.3rem;
  background: var(--inkt);
  color: var(--wit);
  border: var(--rand);
  border-radius: 99px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn.licht { background: var(--wit); color: var(--inkt); }
.btn.groot { font-size: 1.2rem; min-height: 3.6rem; padding-inline: 2rem; justify-self: center; box-shadow: var(--schaduw); }
.btn:active, .chip:active, .tegel:active, .balk:active, .feit:active { transform: translate(3px, 3px); box-shadow: none; }
:disabled { opacity: 0.55; cursor: default; }

.rond {
  flex: none;
  width: 3rem;
  height: 3rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 50%;
  cursor: pointer;
}
.rond.klein { width: 2.4rem; height: 2.4rem; font-size: 0.9rem; }
.rond.aan { background: var(--mis); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  min-height: 2.8rem;
  padding: 0.4rem 1rem;
  background: var(--tint);
  border: var(--rand);
  border-radius: 99px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.chip.aan { background: var(--inkt); color: var(--wit); }
.chip.aan::before { content: "✓ "; }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  overflow: hidden;
  justify-self: start;
}
.seg button {
  flex: 1 1 auto;
  min-height: 3rem;
  padding: 0.4rem 1.1rem;
  background: none;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.seg button.aan { background: var(--inkt); color: var(--wit); }

.balk-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }

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

.motto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
.motto .pijl { color: var(--grijs); }

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.2rem; }
.tegel {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1.2rem;
  background: var(--tint);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  color: inherit;
  text-decoration: none;
}
.tegel .emoji { font-size: 3.2rem; line-height: 1.1; }
.tegel strong { font-size: 1.35rem; }
.tegel .nummer {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--inkt);
  color: var(--wit);
  border-radius: 50%;
  font-weight: 800;
}

/* ---- Algemene blokken ---- */

.kaart {
  padding: 1.2rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
}
.podium { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 1.8rem 1.2rem; box-shadow: var(--schaduw); }
.podium > * { max-width: 100%; }

.intro { font-size: 1.25rem; font-weight: 700; }
.zin { font-size: 2rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.zin.klein { font-size: 1.25rem; }
.gat { display: inline-block; min-width: 2.2em; border-bottom: 5px dashed var(--inkt); color: var(--grijs); }
.les { padding: 0.8rem 1rem; background: var(--tint); border-left: 8px solid var(--inkt); border-radius: 0.5rem; font-weight: 600; text-align: left; }
.regel, .stand, .wie { color: var(--grijs); font-weight: 600; }
.melding { color: #a3271b; font-weight: 700; }
.sterren { font-size: 1.5rem; letter-spacing: 0.2em; }

.wacht::after { content: "…"; animation: knipper 1s steps(2) infinite; }
@keyframes knipper { 50% { opacity: 0; } }

.tip { padding: 0.7rem 1rem; background: var(--wit); border: 2px dashed var(--grijs); border-radius: var(--rond); font-size: 0.85rem; }
.tip summary { font-weight: 700; cursor: pointer; min-height: 2rem; }
.tip ul { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
/* Tip voor de begeleider: een zwevend vraagteken linksonder (het slotje zit rechtsonder). */
.tip.begeleider { position: fixed; left: 1rem; bottom: 1rem; z-index: 20; padding: 0; background: none; border: 0; }
.tip.begeleider summary {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 900;
  list-style: none;
  opacity: 0.7;
}
.tip.begeleider summary::-webkit-details-marker { display: none; }
.tip.begeleider[open] summary { opacity: 1; background: var(--inkt); color: var(--wit); }
.tippaneel {
  position: absolute;
  left: 0;
  bottom: 3.6rem;
  width: min(30rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  font-size: 0.9rem;
}
.resultaat { display: grid; gap: 1.6rem; margin-top: 0.8rem; }
.resultaat:empty { display: none; }

.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.twee > * { min-width: 0; }
@media (max-width: 800px) { .twee { grid-template-columns: 1fr; } }

/* ---- Vraagregel en chat ---- */

.vraag { display: flex; gap: 0.6rem; align-items: center; width: 100%; }
input[type="text"], input[type="password"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 99px;
}

.chat { display: grid; gap: 0.8rem; }
.log { display: grid; gap: 0.7rem; }
.bubbel {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  max-width: 92%;
  padding: 0.8rem 1.1rem;
  border: var(--rand);
  border-radius: var(--rond);
}
.bubbel .tekst { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.1rem; }
.bubbel.kind { justify-self: end; background: var(--tint); border-bottom-right-radius: 0.2rem; font-weight: 600; }
.bubbel.ai { justify-self: start; background: var(--wit); border-bottom-left-radius: 0.2rem; }
.twee .bubbel { max-width: 100%; margin-bottom: 0.7rem; }

/* ---- Wat is AI? ---- */

.balken { display: grid; gap: 0.6rem; width: min(100%, 34rem); }
.balk {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: var(--rand);
  border-radius: 0.7rem;
  background: linear-gradient(to right, var(--tint) var(--kans), var(--wit) var(--kans));
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.balk.zelfde { background: linear-gradient(to right, #8fe0bd var(--kans), var(--goed) var(--kans)); box-shadow: 0 0 0 4px #2fbf8f; }
.balk.zelfde span::before { content: "🤝 "; }
.raden, .uitkomst { display: grid; gap: 1rem; justify-items: center; width: 100%; }
.raden .vraag { max-width: 34rem; }
.uitkomst .twee { width: 100%; text-align: left; }
.uitkomst .balken { width: 100%; }
.uitkomst > section { width: min(100%, 34rem); text-align: left; }

/* ---- AI-detective ---- */

.gesprek { display: grid; gap: 0.8rem; width: min(100%, 46rem); text-align: left; }
.gesprek .tekst { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem; width: 100%; }
.keuzes .btn { min-height: 3.6rem; font-size: 1.1rem; border-radius: var(--rond); }
.uitslag { display: grid; gap: 0.7rem; justify-items: center; width: 100%; }
.kop { padding: 0.4rem 1.2rem; border: var(--rand); border-radius: 99px; font-size: 1.3rem; font-weight: 800; }
.kop.goed { background: var(--goed); }
.kop.mis { background: var(--mis); }
.antwoord { font-size: 1.3rem; font-weight: 800; }
.check { font-weight: 600; font-style: italic; }

.feiten { display: grid; gap: 0.7rem; }
.feit {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.feit .feittekst { font-size: 1.15rem; }
.feit .chips { gap: 0.5rem; }
.feit .chip { font-size: 0.85rem; min-height: 2.4rem; }
.feit span.chip { opacity: 0.8; cursor: default; }
.btn.klein { min-height: 2.4rem; font-size: 0.85rem; padding-inline: 0.9rem; }
.btn.klein.aan { background: var(--mis); }
.controle { padding: 0.6rem 0.9rem; background: var(--papier); border-radius: 0.6rem; font-size: 0.95rem; font-weight: 500; }
.controle:empty { display: none; }
.stappenkaart { font-size: 0.95rem; display: grid; gap: 0.4rem; }
.stappenkaart ul { margin: 0; padding-left: 1.3rem; }
.feit.klopt { background: var(--goed); }
.feit.fout { background: var(--mis); }
.feit .uitleg { font-size: 0.95rem; font-weight: 500; }

/* ---- Supervraag ---- */

.blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.blok { display: grid; gap: 0.6rem; align-content: start; padding: 1rem; background: var(--wit); border: var(--rand); border-radius: var(--rond); }
.blok label { display: grid; gap: 0.4rem; }
.blok b { font-size: 1.3rem; }
.blok .chip { font-size: 0.85rem; min-height: 2.4rem; }

/* Supervraag als flow: stap 1 → 2 → 3 → 4, onder elkaar met ↓ op smalle schermen. */
.flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.flow .blok { position: relative; }
.flow .blok:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 1rem;
  right: -1.75rem;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.flow .blok b { display: flex; align-items: center; gap: 0.5rem; }
.stapnr {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: var(--rand);
  border-radius: 50%;
  background: var(--tint);
  font-size: 1rem;
}
.flow .blok.klaar { background: var(--goed); }
.flow .blok.klaar .stapnr { background: var(--inkt); color: var(--wit); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow .blok:not(:last-child)::after { content: "↓"; top: auto; bottom: -1.85rem; right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---- Uitleg vooraf (dia's) ---- */

.dia {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  align-content: center;
  min-height: min(70vh, 34rem);
  padding: 2rem 1.5rem 1.2rem;
  box-shadow: var(--schaduw);
  text-align: center;
}
.dia .beeld { font-size: 4.5rem; font-weight: 800; line-height: 1.1; }
.dia h2 { font-size: 2.2rem; line-height: 1.15; margin: 0; }
.diatekst { max-width: 34rem; font-size: 1.45rem; font-weight: 600; line-height: 1.5; white-space: pre-line; }
.dia-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.stippen { display: flex; gap: 0.5rem; }
.stippen span { width: 0.9rem; height: 0.9rem; border: var(--rand); border-radius: 50%; }
.stippen span.aan { background: var(--inkt); }
.overslaan { min-height: 2.5rem; padding: 0.3rem 0.8rem; background: none; border: 0; color: var(--grijs); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---- Spellenbouwer ---- */

.werkplaats { display: grid; gap: 1rem; }
.code {
  margin: 0;
  min-height: 14lh;
  padding: 1rem;
  overflow: hidden;
  background: var(--inkt);
  color: #c4f0de;
  border-radius: var(--rond);
  font: 0.7rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
details .code { max-height: 60vh; overflow: auto; margin-top: 0.6rem; }
.spel { display: block; width: 100%; height: min(72vh, 46rem); background: var(--wit); border: var(--rand); border-radius: var(--rond); box-shadow: var(--schaduw); }

/* ---- Wachten op de AI ---- */

.wachtscherm { display: grid; gap: 1rem; justify-items: center; width: 100%; padding: 1rem 0; }
.neuronen { display: grid; grid-template-columns: repeat(5, 1.1rem); gap: 0.7rem 1.4rem; }
.neuronen span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--inkt);
  animation: puls 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
}
@keyframes puls { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.15); background: #3d8bff; } }
.stappen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 0; padding: 0; list-style: none; width: 100%; }
.stappen li {
  flex: 1 1 14rem;
  max-width: 20rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.7rem;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  opacity: 0.4;
  text-align: left;
}
.stappen li .stap-emoji { grid-row: span 2; font-size: 2rem; }
.stappen li small { font-size: 0.8rem; color: var(--grijs); }
.stappen li.klaar { opacity: 0.7; }
.stappen li.klaar b::after { content: " ✓"; }
.stappen li.aan { opacity: 1; background: var(--tint); box-shadow: var(--schaduw); }
.stappen li.aan .stap-emoji { animation: wiebel 1s ease-in-out infinite; }
@keyframes wiebel { 50% { transform: rotate(-12deg) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .neuronen span, .stappen li.aan .stap-emoji { animation: none; } }

.bouwtekening { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.onderdeel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.3rem 0.9rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 99px;
  font-weight: 700;
  opacity: 0.35;
}
.onderdeel.aan { opacity: 1; background: var(--tint); animation: plop 0.4s; }
.onderdeel .detail:empty { display: none; }
.onderdeel .detail { font-weight: 600; }
.swatch { display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: 0.2rem; border: 2px solid var(--inkt); border-radius: 50%; vertical-align: middle; }
@keyframes plop { 0% { transform: scale(0.7); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

.formule { display: grid; gap: 0.5rem; text-align: center; background: var(--tint); }
.formule p:nth-child(2) { font-weight: 700; }

/* ---- AI-detective ronde 2: één kaart, stap voor stap ---- */

.zaak { justify-items: stretch; text-align: left; }
.zaak .intro, .zaak .kop, .zaak .stand { text-align: center; justify-self: center; }
.midden { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem; }
.weetjes { display: grid; gap: 0.7rem; }
.weetje {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
}
button.weetje { cursor: pointer; }
.weetje .nr { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--inkt); color: var(--wit); border-radius: 50%; }
.weetje .weetjetekst { flex: 1; }
.weetje .label { flex: none; font-size: 0.85rem; opacity: 0.35; }
.weetje.aan { background: var(--tint); box-shadow: var(--schaduw); }
.weetje.aan .label { opacity: 1; }
.weetje.klopt { background: var(--goed); }
.weetje.fout { background: var(--mis); }
.weetje.gekozen { box-shadow: var(--schaduw); }
.weetje .uitleg { flex-basis: 100%; font-size: 0.9rem; font-weight: 500; }
.weetje.klopt, .weetje.fout { flex-wrap: wrap; }
.hulpvragen { margin: 0; padding: 0.7rem 1rem 0.7rem 2.2rem; background: var(--tint); border-radius: var(--rond); font-weight: 600; font-size: 0.95rem; display: grid; gap: 0.2rem; }
.zaak .controle:empty { display: none; }

/* ---- Speurtocht ---- */

.opdracht { font-size: 2rem; font-weight: 800; text-align: center; }
.foto { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; border: var(--rand); border-radius: var(--rond); }
.cameraknop { position: relative; overflow: hidden; }
.cameraknop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- Lesverhaal: hoofdstukken, brug, afsluitkaart, testkaart, rijbewijs ---- */

.hoofdstuk { display: grid; gap: 0.6rem; }
.hoofdstuk h2 { font-size: 1.3rem; margin: 0; }
.hoofdstuk .tegels { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.brug { padding: 0.5rem 1rem; background: var(--tint); border-radius: 99px; font-weight: 700; font-size: 1rem; }
.afsluitkaart { display: grid; gap: 1rem; background: var(--tint); }
.afsluitkaart .vak { padding: 0.9rem 1rem; background: var(--wit); border: var(--rand); border-radius: var(--rond); }
.afsluitkaart h3 { margin-bottom: 0.3rem; }
.testkaart { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.6rem; }
.testpunt { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; background: var(--wit); border: var(--rand); border-radius: var(--rond); font-weight: 600; cursor: pointer; }
.testpunt input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: #a3271b; }
.testpunt:has(input:checked) { background: var(--mis); }
.rijbewijs { display: grid; gap: 0.8rem; justify-items: center; width: min(100%, 36rem); padding: 1.5rem; background: var(--wit); border: 6px double var(--inkt); border-radius: var(--rond); text-align: center; }
.regelslijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 1.4rem; font-weight: 800; }
@media print {
  .top, .tip, .midden, .afsluitkaart { display: none !important; }
  body { background: #fff; }
  .rijbewijs { width: 100%; }
}

/* ---- Bronvermelding zoals bij een AI-assistent ---- */

.cite { display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; margin-left: 0.2em; padding: 0 0.3em; background: var(--inkt); color: var(--wit); border-radius: 0.5em; font-size: 0.6em; font-weight: 800; vertical-align: super; line-height: 1; }
.bronnen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 2px dashed #c9c6d4; }
.bronnen > small { color: var(--grijs); font-weight: 700; }
.bron { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.8rem 0.3rem 0.5rem; background: var(--papier); border: 2px solid var(--inkt); border-radius: 99px; color: inherit; text-decoration: none; font-size: 0.85rem; }
.bron .cite { vertical-align: baseline; font-size: 0.75rem; min-width: 1.5rem; height: 1.5rem; margin: 0; }
.bron small { color: var(--grijs); }
.gesprek .bronnen .cite, .gesprek .bron b, .gesprek .bron small { font-size: 0.9rem; }

/* ---- XP en het slotje ---- */

.chip.op-slot { opacity: 0.55; cursor: not-allowed; background: var(--wit); border-style: dashed; }
.chip.op-slot::after { content: " · " attr(data-xp); font-size: 0.8em; }
.tegel.klaar .nummer { background: #1e8a5c; }
.toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1.6rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  text-align: center;
  font-weight: 700;
  animation: toast 3.5s ease forwards;
  pointer-events: none;
}
.toast b { font-size: 1.5rem; font-weight: 900; }
.toast.super { background: linear-gradient(135deg, #ffe066, #ffb3c7); }
.toast.super b { font-size: 2.2rem; }
.toast .nieuw { padding: 0.1rem 0.7rem; background: var(--goed); border-radius: 99px; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -1rem) scale(0.7); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 16%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -2rem) scale(0.9); } }
/* XP in de kop: een balkje tot het volgende slotje, en een pulse bij elke beloning. */
#xp { background: linear-gradient(90deg, var(--goed) var(--p, 0%), var(--wit) var(--p, 0%)); }
#xp.pulse { animation: pulse 0.6s ease; }
@keyframes pulse { 40% { transform: scale(1.25); } }
/* XP per onderdeel op het startscherm */
.xpbalk {
  margin-top: 0.5rem;
  padding: 0.1rem 0.6rem;
  background: linear-gradient(90deg, var(--goed) var(--p, 0%), var(--wit) var(--p, 0%));
  border: 2px solid var(--inkt);
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .toast, #xp.pulse { animation: none; } }
.slot {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: 3rem;
  height: 3rem;
  background: var(--wit);
  border: var(--rand);
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0.7;
}
.slotpaneel {
  position: fixed;
  right: 1rem;
  bottom: 4.6rem;
  z-index: 20;
  display: grid;
  gap: 0.7rem;
  width: min(24rem, calc(100vw - 2rem));
  box-shadow: var(--schaduw);
}
@media print { .slot, .slotpaneel, .toast { display: none; } }

/* ---- Supervraag: het superantwoord springt eruit, het slappe antwoord valt weg ---- */

.slapantwoord { opacity: 0.7; }
.superantwoord {
  position: relative;
  padding: 1.2rem;
  padding-top: 1.6rem;
  background: linear-gradient(135deg, #ffe066, #ffb3c7);
  border: var(--rand);
  border-radius: var(--rond);
  box-shadow: 8px 8px 0 var(--inkt);
  animation: superland 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.superantwoord h3 { font-size: 1.35rem; padding-left: 3.6rem; }
.superantwoord .bubbel { border-width: 4px; }
.superheld {
  position: absolute;
  top: -1.6rem;
  left: -0.8rem;
  font-size: 4rem;
  line-height: 1;
  transform: rotate(-15deg);
  filter: drop-shadow(3px 3px 0 var(--inkt));
  animation: vlieg 1s ease-out both;
}
@keyframes superland { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vlieg { from { transform: translate(-3rem, 3rem) rotate(-40deg); opacity: 0; } to { transform: rotate(-15deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .superantwoord, .superheld { animation: none; } }

/* ---- Groepskeuze ---- */

.groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem; width: 100%; }
.tegel.groep { font: inherit; text-align: left; cursor: pointer; background: var(--tint); }
.tegel.groep .regel { font-size: 0.85rem; }
button.badge { cursor: pointer; }
.tegel.groep.aan { background: var(--inkt); color: var(--wit); }
.tegel.groep.aan .emoji { filter: none; }
.rechts { display: flex; justify-content: flex-end; }

/* ---- Overzicht voor de begeleider ---- */

.overzicht { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--wit); border: var(--rand); border-radius: var(--rond); overflow: hidden; }
.overzicht th, .overzicht td { padding: 0.6rem 0.9rem; text-align: left; vertical-align: middle; border-bottom: 1px solid #e6e1d6; }
.overzicht tr:last-child td { border-bottom: 0; }
.overzicht th { background: var(--tint); font-size: 0.85rem; }
.overzicht .xpbalk { display: block; min-width: 8rem; margin: 0; }
.overzicht .per { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.overzicht .per .chip { min-height: 0; padding: 0.15rem 0.6rem; font-size: 0.8rem; cursor: default; }
.tippaneel .btn { margin-top: 0.8rem; }
@media (max-width: 700px) { .overzicht th:nth-child(4), .overzicht td:nth-child(4) { display: none; } }