/* Quiz in Huis — speelse cartoonstijl: dikke randen, ronde vormen, "drukknop"-schaduwen */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --groen: #58cc02;
  --groen-donker: #46a302;
  --blauw: #1cb0f6;
  --blauw-donker: #1899d6;
  --oranje: #ff9600;
  --oranje-donker: #e08400;
  --rood: #ff4b4b;
  --rood-donker: #d63b3b;
  --geel: #ffc800;
  --paars: #ce82ff;
  --paars-donker: #a568cc;
  --inkt: #3c3c3c;
  --grijs: #777;
  --lijn: #e5e5e5;
  --achtergrond: #fff8ec;
  --kaart: #ffffff;
  --radius: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--inkt);
  background: var(--achtergrond);
  background-image:
    radial-gradient(circle at 10% 15%, #ffe7b8 0 60px, transparent 61px),
    radial-gradient(circle at 92% 25%, #d7f2ff 0 90px, transparent 91px),
    radial-gradient(circle at 85% 90%, #e3f9cf 0 70px, transparent 71px),
    radial-gradient(circle at 5% 85%, #ffd9d9 0 50px, transparent 51px);
  background-attachment: fixed;
}

h1, h2, h3, .logo { font-family: 'Baloo 2', 'Nunito', sans-serif; margin: 0; }

.pagina {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pagina.breed { max-width: 900px; }

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 2rem;
  font-weight: 800;
  color: var(--inkt);
  text-decoration: none;
}
.logo-icoon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--geel);
  border: 4px solid var(--inkt);
  display: grid; place-items: center;
  font-size: 1.6rem;
  animation: wiebel 3s ease-in-out infinite;
}
.logo span.huis { color: var(--oranje); }

.kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Kaarten */
.kaart {
  background: var(--kaart);
  border: 3px solid var(--lijn);
  border-bottom-width: 7px;
  border-radius: var(--radius);
  padding: 28px 24px;
  animation: plop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.kaart h2 { font-size: 1.7rem; margin-bottom: 6px; }
.subtekst { color: var(--grijs); margin: 0 0 20px; font-weight: 600; }
.subtekst a { color: var(--blauw); font-weight: 800; }

/* Knoppen */
.knop {
  --kleur: var(--groen);
  --kleur-donker: var(--groen-donker);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 16px 20px;
  font: 800 1.1rem 'Nunito', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kleur);
  border: none;
  border-radius: 18px;
  box-shadow: 0 6px 0 var(--kleur-donker);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.knop:hover { filter: brightness(1.06); }
.knop:active { transform: translateY(6px); box-shadow: 0 0 0 var(--kleur-donker); }
.knop:disabled { filter: grayscale(1) opacity(.6); cursor: not-allowed; transform: none; }
.knop.blauw { --kleur: var(--blauw); --kleur-donker: var(--blauw-donker); }
.knop.oranje { --kleur: var(--oranje); --kleur-donker: var(--oranje-donker); }
.knop.rood { --kleur: var(--rood); --kleur-donker: var(--rood-donker); }
.knop.wit {
  color: var(--blauw);
  background: #fff;
  border: 3px solid var(--lijn);
  box-shadow: 0 5px 0 var(--lijn);
}
.knop.klein { width: auto; padding: 10px 16px; font-size: .85rem; box-shadow: 0 4px 0 var(--kleur-donker); }
.knop.wit.klein { box-shadow: 0 4px 0 var(--lijn); }

/* Grote keuzeknoppen op de homepagina */
.keuzes { display: grid; gap: 20px; }
@media (min-width: 560px) { .keuzes { grid-template-columns: 1fr 1fr; } }
.keuze {
  --kleur: var(--groen); --kleur-donker: var(--groen-donker);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 20px 28px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--kleur);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--kleur-donker);
  transition: transform .1s, box-shadow .1s;
  animation: plop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.keuze:nth-child(2) { animation-delay: .1s; }
.keuze:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 0 var(--kleur-donker); }
.keuze:active { transform: translateY(8px); box-shadow: 0 0 0 var(--kleur-donker); }
.keuze.blauw { --kleur: var(--blauw); --kleur-donker: var(--blauw-donker); }
.keuze .emoji {
  width: 92px; height: 92px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  font-size: 3rem;
  border: 4px solid rgba(0,0,0,.12);
}
.keuze .titel { font: 800 1.5rem 'Baloo 2', sans-serif; }
.keuze .uitleg { font-weight: 700; opacity: .92; }

/* Formulieren */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.veld label { font-weight: 800; font-size: .95rem; }
.invoer {
  width: 100%;
  padding: 14px 16px;
  font: 700 1.05rem 'Nunito', sans-serif;
  color: var(--inkt);
  background: #f7f7f7;
  border: 3px solid var(--lijn);
  border-radius: 16px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.invoer:focus { border-color: var(--blauw); background: #fff; }
.invoer.code {
  text-align: center;
  font: 800 2.2rem 'Baloo 2', monospace;
  letter-spacing: .35em;
  text-transform: uppercase;
  padding: 12px 8px 12px calc(8px + .35em);
}

.melding {
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  display: none;
}
.melding.zichtbaar { display: block; animation: schud .35s; }
.melding.fout { background: #ffdfe0; color: #c32222; }
.melding.goed { background: #d7ffb8; color: #3a7f00; animation: plop .4s; }

.tabs { display: flex; gap: 8px; background: #f0f0f0; padding: 6px; border-radius: 18px; margin-bottom: 20px; }
.tab {
  flex: 1; padding: 10px; border: none; border-radius: 14px; background: transparent;
  font: 800 1rem 'Nunito', sans-serif; color: var(--grijs); cursor: pointer;
}
.tab.actief { background: #fff; color: var(--blauw); box-shadow: 0 3px 0 var(--lijn); }

.terug { color: var(--grijs); font-weight: 800; text-decoration: none; }
.terug:hover { color: var(--blauw); }
.klein-tekst { font-size: .9rem; color: var(--grijs); text-align: center; margin-top: 14px; font-weight: 600; }
.verborgen { display: none !important; }
.klein-tekst a { color: var(--blauw); font-weight: 800; text-decoration: none; }
.klein-tekst a:hover { text-decoration: underline; }

/* Lijst met quizzen */
.lijst { display: flex; flex-direction: column; gap: 12px; }
.lijst-item {
  flex-wrap: wrap;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 3px solid var(--lijn); border-radius: 18px; background: #fff;
  animation: plop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.lijst-item strong { font-size: 1.1rem; }
.leeg { text-align: center; padding: 24px; color: var(--grijs); font-weight: 700; }
.leeg .emoji { font-size: 3rem; display: block; margin-bottom: 8px; }

/* Speelscherm deelnemer */
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #ffe7b8; color: #b36b00; font-weight: 800; font-size: .85rem;
}
.score {
  font: 800 1.2rem 'Baloo 2', sans-serif;
  background: var(--geel); padding: 6px 16px; border-radius: 999px; border: 3px solid var(--inkt);
}
.vraag { font: 800 1.6rem/1.3 'Baloo 2', sans-serif; margin: 14px 0 20px; }
.wachten { text-align: center; }
.wachten .emoji { font-size: 4rem; display: inline-block; animation: stuiter 1.2s ease-in-out infinite; }

h3 { font-size: 1.3rem; }
.rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rij > .invoer { flex: 1; min-width: 140px; }
.invoer.punten { flex: 0 0 76px; min-width: 0; width: 76px; text-align: center; }

/* Quiz-editor */
.titel-invoer {
  font: 800 1.8rem 'Baloo 2', sans-serif;
  background: transparent; border-color: transparent; padding: 4px 8px; margin: 6px 0 4px -8px;
}
.titel-invoer:hover { border-color: var(--lijn); }
.rondes { display: flex; flex-direction: column; gap: 24px; }
.ronde-nr, .vraag-nr {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--oranje); color: #fff; font: 800 1.2rem 'Baloo 2', sans-serif;
}
.vraag-nr { width: 30px; height: 30px; font-size: .95rem; background: var(--blauw); }
.ronde-titel { font: 800 1.3rem 'Baloo 2', sans-serif; }
.vragen { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.vraag-rij {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border: 3px solid var(--lijn); border-radius: 18px;
}
.vraag-rij .vraag-nr { margin-top: 10px; }
.vraag-velden { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vraag-velden .invoer, .nieuwe-vraag .invoer { padding: 10px 14px; font-size: 1rem; }
.nieuwe-vraag {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 3px dashed #cfd8dc; border-radius: 18px; background: #fbfdff;
}
.nieuwe-vraag .knop { align-self: flex-start; }

/* Spel besturen */
.spelkop { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.spelcode {
  font: 800 2.6rem 'Baloo 2', monospace; letter-spacing: .2em;
  background: var(--geel); border: 4px solid var(--inkt); border-radius: 20px;
  padding: 4px 20px; box-shadow: 0 6px 0 var(--inkt);
}
.spel-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 820px) { .spel-grid { grid-template-columns: 1.4fr 1fr; } }
.juist { margin: 0; font-weight: 700; color: var(--groen-donker); }
.teller { font-size: 1rem; color: var(--grijs); }
#antwoorden { margin-top: 12px; }
.antwoord {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 3px solid var(--lijn); border-radius: 18px; background: #fff;
  animation: plop .35s cubic-bezier(.34,1.56,.64,1) both;
  transition: background .2s, border-color .2s;
}
.antwoord.approved { background: #effee3; border-color: #a5ed6e; }
.antwoord.rejected { background: #fff0f0; border-color: #ffb2b2; }
.antwoord-tekst { font-weight: 800; font-size: 1.1rem; overflow-wrap: anywhere; }
.antwoord .invoer.punten { flex-basis: 64px; width: 64px; padding: 8px; }
.rond-knop {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  font: 800 1.2rem 'Nunito', sans-serif; color: #fff; transition: transform .08s, box-shadow .08s;
}
.rond-knop.goed { background: var(--groen); box-shadow: 0 4px 0 var(--groen-donker); }
.rond-knop.fout { background: var(--rood); box-shadow: 0 4px 0 var(--rood-donker); }
.rond-knop:active { transform: translateY(4px); box-shadow: none; }
.lijst-kop { font: 800 .85rem 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin: 14px 0 6px; }
.lijst-kop:first-child { margin-top: 0; }
.vraag-knop {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 6px; text-align: left;
  font: 700 .95rem 'Nunito', sans-serif; color: var(--inkt);
  background: #fff; border: 3px solid var(--lijn); border-radius: 14px; cursor: pointer;
}
.vraag-knop:hover:not(:disabled) { border-color: var(--blauw); }
.vraag-knop.open { border-color: var(--blauw); background: #e6f6ff; }
.vraag-knop:disabled { opacity: .6; cursor: default; }
.vraag-knop-tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leeg a { color: var(--blauw); }

/* Animaties */
@keyframes plop { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wiebel { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes stuiter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes schud { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Mobiel: niets breder dan het scherm */
.spel-grid > * { min-width: 0; }
@media (max-width: 480px) {
  .spelcode { font-size: 2rem; letter-spacing: .12em; padding: 4px 14px; }
}

/* ================= Vraagtypes ================= */
textarea.invoer { resize: vertical; min-height: 64px; line-height: 1.4; }
.hint { font-weight: 600; color: var(--grijs); font-size: .85rem; }
.veld-label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.knop.paars { --kleur: var(--paars); --kleur-donker: var(--paars-donker); }

/* Vraag als kaartje in de editor */
.vraag-kaart {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border: 3px solid var(--lijn); border-radius: 18px; background: #fff;
  animation: plop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.vraag-inhoud { flex: 1; min-width: 0; }
.vraag-titel { font-weight: 800; font-size: 1.05rem; margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .vraag-kaart { flex-wrap: wrap; } .vraag-kaart > .rij { width: 100%; justify-content: flex-end; } }

.type-label {
  --c: var(--groen);
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; color: #fff; background: var(--c);
}
.type-label.blauw { --c: var(--blauw); }
.type-label.oranje { --c: var(--oranje); }
.type-label.paars { --c: var(--paars-donker); }

/* Editor-blok */
.editor {
  padding: 20px; border: 3px solid var(--blauw); border-radius: 22px; background: #f5fbff;
  animation: plop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.editor-kop { margin-bottom: 14px; }
.type-keuze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (min-width: 640px) { .type-keuze { grid-template-columns: repeat(4, 1fr); } }
.type-tegel {
  --c: var(--groen); --cd: var(--groen-donker);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; cursor: pointer; font-family: 'Nunito', sans-serif; color: var(--inkt);
  background: #fff; border: 3px solid var(--lijn); border-radius: 18px; box-shadow: 0 4px 0 var(--lijn);
  transition: transform .1s, border-color .15s, background .15s;
}
.type-tegel:hover { transform: translateY(-2px); }
.type-tegel.blauw { --c: var(--blauw); --cd: var(--blauw-donker); }
.type-tegel.oranje { --c: var(--oranje); --cd: var(--oranje-donker); }
.type-tegel.paars { --c: var(--paars); --cd: var(--paars-donker); }
.type-tegel.actief { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); box-shadow: 0 4px 0 var(--cd); }
.type-icoon { font-size: 1.8rem; }
.type-naam { font-weight: 800; }
.type-uitleg { font-size: .78rem; color: var(--grijs); font-weight: 700; }

/* Meerkeuze */
.mk-opties { display: grid; gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .mk-opties { grid-template-columns: 1fr 1fr; } }
.mk-genereer { align-items: center; gap: 10px; margin: -4px 0 16px; flex-wrap: wrap; }
.mk-optie { display: flex; gap: 8px; align-items: center; }
.mk-optie .invoer { padding: 10px 14px; }
.mk-optie.juist .invoer { border-color: var(--groen); background: #effee3; }
.mk-letter {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
  font: 800 1.2rem 'Baloo 2', sans-serif; color: var(--grijs);
  background: #fff; border: 3px solid var(--lijn); box-shadow: 0 3px 0 var(--lijn);
}
.mk-letter.juist { color: #fff; background: var(--groen); border-color: var(--groen-donker); box-shadow: 0 3px 0 var(--groen-donker); }

/* Schuifbalk */
.schuif-blok { padding: 16px; background: #fff; border: 3px solid var(--lijn); border-radius: 18px; }
.schuif-waarde { text-align: center; font: 800 2.6rem 'Baloo 2', sans-serif; color: var(--oranje); line-height: 1; margin-bottom: 10px; }
.schuif {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--oranje) var(--p), #eee var(--p));
  border: 3px solid var(--lijn);
}
.schuif.klein { height: 12px; background: #eee; }
.schuif::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; cursor: grab;
  background: #fff; border: 4px solid var(--oranje); box-shadow: 0 3px 0 var(--oranje-donker);
}
.schuif::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; cursor: grab;
  background: #fff; border: 4px solid var(--oranje); box-shadow: 0 3px 0 var(--oranje-donker);
}
.schuif-schaal { display: flex; justify-content: space-between; font-weight: 800; color: var(--grijs); font-size: .85rem; margin-top: 6px; }

/* Kaart */
.kaart-vak { height: 340px; border-radius: 18px; border: 3px solid var(--lijn); overflow: hidden; z-index: 0; position: relative; }
.speld {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--speld); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  display: grid; place-items: center; color: #fff; font: 800 .8rem 'Nunito', sans-serif;
}
.speld span { transform: rotate(45deg); line-height: 1; white-space: nowrap; }

/* Deelnemer: meerkeuzeknoppen */
.mk-knoppen { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 520px) { .mk-knoppen { grid-template-columns: 1fr 1fr; } }
.mk-knop {
  --c: var(--blauw); --cd: var(--blauw-donker);
  display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; cursor: pointer;
  font: 800 1.05rem 'Nunito', sans-serif; color: var(--inkt);
  background: #fff; border: 3px solid var(--lijn); border-radius: 18px; box-shadow: 0 5px 0 var(--lijn);
  transition: transform .08s;
}
.mk-knop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lijn); }
.mk-knop .mk-letter { pointer-events: none; }
.mk-knop.gekozen { border-color: var(--c); background: #e6f6ff; box-shadow: 0 5px 0 var(--cd); }
.mk-knop.gekozen .mk-letter { background: var(--c); color: #fff; border-color: var(--cd); box-shadow: none; }

/* Host: suggesties en teamnummers */
.suggestie { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; margin-left: 4px; }
.suggestie.goed { background: #d7ffb8; color: #3a7f00; }
.suggestie.fout { background: #ffdfe0; color: #c32222; }
.team-nr {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blauw); color: #fff; font-size: .75rem; font-weight: 800;
}

/* Kleine correcties */
.mk-letter { display: grid; place-items: center; }
.veld > .invoer.punten { flex: none; height: auto; }
.schuif.klein { margin: 12px 0 4px; }

/* Beheer: vragenpakketten */
.status-label {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: #f0f0f0; color: var(--grijs); font-weight: 800; font-size: .75rem; vertical-align: middle;
}
.status-label.aan { background: #d7ffb8; color: #3a7f00; }
.pakket-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 800; color: var(--grijs); }
.prijs {
  font: 800 1.2rem 'Baloo 2', sans-serif; color: var(--inkt);
  background: var(--geel); padding: 4px 14px; border-radius: 999px; border: 3px solid var(--inkt);
}

/* Fragmenten (afbeelding, muziek, video) */
.media-blok { margin-top: 4px; }
.media-knoppen { align-items: center; gap: 10px; flex-wrap: wrap; }
.media-knoppen .hint { display: flex; align-items: center; gap: 8px; }
.media-voorbeeld { margin-bottom: 10px; padding: 12px; background: #fff; border: 3px solid var(--lijn); border-radius: 18px; }
.media-voorbeeld .type-label { margin-bottom: 8px; }
.media-vak { margin: -6px 0 18px; }
.media-beeld { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 18px; border: 3px solid var(--lijn); cursor: zoom-in; background: #fff; }
.media-beeld:fullscreen { max-height: none; border: 0; border-radius: 0; object-fit: contain; background: #000; }
.media-voorbeeld .media-beeld { max-height: 220px; }
.media-speler { display: block; width: 100%; border-radius: 14px; }
video.media-speler { max-height: 420px; background: #000; }
.link-knop { border: 0; background: none; padding: 0; font: inherit; color: var(--blauw-donker); cursor: pointer; text-decoration: underline; }

/* ================= Spelverloop ================= */
.bediening { justify-content: flex-start; }
.banner { padding: 10px 14px; border-radius: 14px; font-weight: 800; margin-bottom: 16px; }
.banner.oranje { background: #fff1db; color: #b36b00; }
.banner.paars { background: #f5e8ff; color: #7a3fb0; }
.keuze-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; margin-bottom: 10px; cursor: pointer; }
.keuze-rij input[type=radio], .keuze-rij input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--blauw); flex: none; }
.keuze-rij.vink { flex-wrap: nowrap; align-items: flex-start; }
.keuze-rij.vink input { margin-top: 2px; }
.keuze-rij .invoer.punten { padding: 6px 8px; width: 70px; flex-basis: 70px; }
.team-blok { padding: 10px 12px; border: 3px solid var(--lijn); border-radius: 18px; background: #fff; }
.team-blok .invoer.punten { padding: 6px 8px; width: 64px; flex-basis: 64px; display: inline-block; margin-left: 4px; }
.speler-rij { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.speler-naam { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.klein-select { width: auto; max-width: 48%; padding: 6px 10px; font-size: .9rem; border-radius: 12px; }
.mini-knop {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: #ffdfe0; color: #c32222; font: 800 .9rem 'Nunito', sans-serif;
}
.mini-knop:hover { background: var(--rood); color: #fff; }
#zonder-team { margin-bottom: 12px; }
#zonder-team .speler-rij { padding: 6px 10px; border: 3px dashed #cfd8dc; border-radius: 14px; }

/* Tussenstand op de telefoon */
.stand-rij.ik { border-color: var(--geel); background: #fffbe6; }

/* ================= Groot scherm (beamer) ================= */
body.scherm { overflow-x: hidden; }
.scherm-vak { max-width: 1400px; margin: 0 auto; padding: 24px 32px 48px; min-height: 100vh; display: flex; flex-direction: column; gap: 24px; }
.scherm-blok { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; animation: plop .45s cubic-bezier(.34,1.56,.64,1) both; }
.scherm-titel { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.15; max-width: 1100px; }
.scherm-sub { font-size: clamp(1.1rem, 2.2vw, 1.8rem); font-weight: 700; color: var(--grijs); margin: 0; }
.scherm-emoji { font-size: clamp(4rem, 12vw, 9rem); animation: stuiter 1.4s ease-in-out infinite; }
.scherm-code { font-size: clamp(3rem, 12vw, 9rem); padding: 8px 40px; }
.scherm-code-klein { font: 800 1.4rem 'Baloo 2', monospace; letter-spacing: .12em; }
.scherm-badge { font-size: clamp(1rem, 1.8vw, 1.4rem); padding: 6px 18px; }
.scherm-namen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1100px; }
.scherm-namen .badge { font-size: 1.2rem; padding: 6px 16px; animation: plop .35s both; }
.scherm-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(1100px, 100%); }
.scherm-opties .mk-knop { font-size: clamp(1.1rem, 2.4vw, 2rem); cursor: default; }
.scherm-opties .mk-letter { width: 56px; height: 56px; font-size: 1.6rem; }
.scherm-stand { display: flex; flex-direction: column; gap: 12px; width: min(1100px, 100%); }
.stand-balk {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  border: 3px solid var(--lijn); border-radius: 20px; background: #fff; overflow: hidden;
  font: 800 clamp(1.1rem, 2.4vw, 2rem) 'Baloo 2', sans-serif; text-align: left;
  animation: plop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.stand-balk::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--breedte); background: #e6f6ff; z-index: 0;
  transition: width .6s ease;
}
.stand-balk > * { position: relative; }
.stand-plek { width: 2.2em; text-align: center; }
.stand-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stand-score { background: var(--geel); border: 3px solid var(--inkt); border-radius: 999px; padding: 0 18px; }
@media (max-width: 640px) {
  .scherm-vak { padding: 16px; }
  .scherm-opties { grid-template-columns: 1fr; }
}

/* Kaartvraag: stijlkeuze en marge in meters */
.keuze-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.keuze-knop {
  padding: 6px 12px; cursor: pointer; font: 800 .85rem 'Nunito', sans-serif; color: var(--inkt);
  background: #fff; border: 3px solid var(--lijn); border-radius: 14px;
}
.keuze-knop.actief { border-color: var(--paars); background: color-mix(in srgb, var(--paars) 14%, #fff); }
.marge-rij { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.marge-rij .knop.klein { min-width: 44px; font-size: 1.2rem; padding: 6px 12px; }
.marge-invoer { width: 120px; text-align: center; }
.marge-eenheid { font-weight: 800; color: var(--grijs); }

/* ================= Presenteren: vraag op het grote scherm, antwoord op de telefoon ================= */
/* Telefoon: grote letterknoppen zonder tekst */
.mk-knop.alleen-letter { justify-content: center; padding: 18px; }
.mk-knop.alleen-letter .mk-letter { width: 64px; height: 64px; font-size: 2rem; }
.eigen-antwoord { margin-top: 16px; }
.eigen-antwoord .antwoord { align-items: center; }

/* Groot scherm: nabespreking */
.scherm-opties .mk-knop.juist { --c: var(--groen); --cd: var(--groen-donker); background: #effee3; }
.scherm-juist {
  font: 800 clamp(1.4rem, 3vw, 2.4rem) 'Baloo 2', sans-serif; color: var(--groen-donker);
  background: #effee3; border: 3px solid #a5ed6e; border-radius: 20px; padding: 8px 28px;
  animation: plop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.scherm-kaart { width: min(1100px, 100%); height: 46vh; }
.scherm-antwoorden { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; width: min(1300px, 100%); }
.nb-antwoord {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; text-align: left; position: relative;
  border: 3px solid var(--lijn); border-radius: 20px; background: #fff;
  transition: background .3s, border-color .3s;
}
.nb-antwoord.approved { background: #effee3; border-color: #a5ed6e; }
.nb-antwoord.rejected { background: #fff0f0; border-color: #ffb2b2; }
.nb-antwoord.leeg { opacity: .55; }
.nb-team { font-weight: 800; color: var(--grijs); font-size: clamp(.9rem, 1.4vw, 1.2rem); padding-right: 90px; overflow-wrap: anywhere; }
.nb-tekst { font: 800 clamp(1.2rem, 2.4vw, 2rem) 'Baloo 2', sans-serif; overflow-wrap: anywhere; }
.nb-oordeel { position: absolute; top: 10px; right: 14px; display: flex; gap: 6px; align-items: center; font: 800 1.6rem 'Nunito', sans-serif; }
.nb-antwoord.approved .nb-oordeel { color: var(--groen-donker); }
.nb-antwoord.rejected .nb-oordeel { color: var(--rood-donker); }
.nb-punten { font-size: 1rem; background: var(--geel); color: var(--inkt); border: 2px solid var(--inkt); border-radius: 999px; padding: 0 10px; }

/* Quizmaster: nabespreking */
.banner.blauw { background: #e6f6ff; color: var(--blauw-donker); }
.ronde-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ronde-kop .link-knop { font-size: .8rem; text-transform: none; letter-spacing: 0; }
.knop:disabled { opacity: .45; cursor: default; }