/* Feestavond: de schil om het spel dat er al was.
   Kleuren en maten staan vast in pixels, zoals op het scherm van
   1280×800. Op een groot scherm worden knoppen niet groter: een
   tegel die meeschaalt met het venster voelt log. Op de telefoon
   blijven de cijfertoetsen 64 tot 72 px, in de pagina, niet eroverheen. */

@font-face{
  font-family:'Nunito';
  src:url('../fonts/nunito-latin-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('../fonts/nunito-latin-800.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

body.feestavond{
  --bg:#1c1f4a;
  --bg2:#1c1f4a;
  --card:#2a2e66;
  --card-line:#4a4f8f;
  --ink:#fff;
  --ink-soft:#c9cbf2;
  --accent:#ffd23f;
  --accent-ink:#1c1f4a;
  --good:#3ccf8e;
  --bad:#ff9f45;
  --f-surface:#2a2e66;
  --f-sunk:#23275a;
  --f-track:#2f3470;
  --f-line:#4a4f8f;
  --f-soft:#e4e5fb;
  --f-muted:#c9cbf2;
  --f-faint:#8a8fd0;
  --f-accent:#ffd23f;
  --f-accent-schaduw:#c99a12;
  --f-good:#3ccf8e;
  --f-almost:#ff9f45;
  --f-tafels:#6f9bff;
  --f-delen:#b07cff;
  --f-plus:#3ccf8e;
  --f-min:#ff9f45;
  background:#1c1f4a;
  color:#fff;
  font-family:Nunito,sans-serif;
  font-weight:700;
}
html:has(body.feestavond),
html.beurt-wacht:has(body.feestavond),
html.beurt-aan:has(body.feestavond){
  background:#1c1f4a;
  background-image:none;
}
body.feestavond.speelt{
  background:#1c1f4a;
  background-image:none;
}
body.feestavond.speelt::before{display:none}
body.feestavond .stars,
body.feestavond .ballonnen,
body.feestavond .slinger{display:none !important}
body.feestavond nav.tabs{display:none !important}

body.feestavond h1,
body.feestavond h2,
body.feestavond h3,
body.feestavond button,
body.feestavond .logo,
body.feestavond .question,
body.feestavond .answer,
body.feestavond .feest-titel,
body.feestavond .tegel-naam,
body.feestavond .tegel-teken,
body.feestavond .fb-kop{
  font-family:Fredoka,sans-serif;
  font-weight:700;
}
body.feestavond button{font-weight:700}
body.feestavond :focus-visible{
  outline:3px solid #ffd23f;
  outline-offset:2px;
}
body.feestavond .sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- vlaggetjes: vaste maat, herhaald, niet uitgerekt ---- */
.bunting{
  height:48px;overflow:hidden;position:relative;
  pointer-events:none;
}
.bunting-rij{
  position:absolute;left:0;top:0;height:48px;
  display:flex;align-items:flex-start;
}
.bunting-rij svg{display:block;flex:none;width:18px;height:22px}
body.in-oefen .bunting{display:none}

/* ---- navigatie, buiten het oefenen ---- */
.feest-nav{
  width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;
  padding:0 24px;height:48px;display:flex;flex-wrap:nowrap;align-items:center;
  justify-content:space-between;gap:24px;
}
body.in-oefen .feest-nav{display:none}
.feest-nav .logo{
  font-family:Fredoka,sans-serif;font-weight:700;font-size:24px;
  display:flex;align-items:center;height:32px;line-height:32px;
  color:#fff;background:none;border:0;padding:0;cursor:pointer;text-decoration:none;
}
.feest-nav .logo .x{color:#ffd23f}
.feest-menu{
  display:flex;gap:4px;height:48px;box-sizing:border-box;
  background:#2a2e66;border-radius:999px;padding:4px;
}
.feest-menu button{
  border:0;background:transparent;color:#e4e5fb;border-radius:999px;
  padding:0 20px;font-family:Nunito,sans-serif;font-weight:800;font-size:16px;
  line-height:1;
}
.nav-rechts{display:flex;align-items:center;gap:8px;height:48px}
.nav-speler{
  display:flex;align-items:center;justify-content:center;
  background:#2a2e66;color:#fff;
  border:0;border-radius:999px;
  height:48px;box-sizing:border-box;padding:0 16px;
  max-width:140px;min-width:0;overflow:hidden;
  font-family:Nunito,sans-serif;font-weight:800;font-size:16px;line-height:1;
}
#nav-spelernaam{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.nav-avatar{display:none}
.nav-instel{
  width:48px;height:48px;border:0;border-radius:24px;background:#2a2e66;
  display:flex;align-items:center;justify-content:center;color:#c9cbf2;padding:0;
}
.nav-ouders{
  font-family:Nunito,sans-serif;font-weight:800;font-size:16px;color:#c9cbf2;
  background:none;border:0;cursor:pointer;padding:8px;
}

/* Welkom: zelfde toprij, menu/chip onzichtbaar maar ruimte behouden */
body.is-welkom .feest-menu,
body.is-welkom .nav-rechts{visibility:hidden}

.feest-blad{
  width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;
  padding:28px 24px 32px;display:flex;flex-direction:column;gap:28px;
}
.feest-thuis.feest-blad{padding-top:48px;gap:32px}

.groet{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 28px;
}
.feest-bol{position:relative;width:132px;height:132px;flex:none}
.feest-thuis .feest-bol{width:120px;height:120px}
.einde-bol{width:150px;height:150px}
.feest-bol .vriendje{position:absolute;inset:0}
.bubbel{
  flex:0 1 560px;min-width:0;background:#2a2e66;border-radius:28px 28px 28px 6px;
  padding:20px 22px;display:flex;flex-direction:column;gap:14px;
}
.bubbel p{margin:0;font-weight:700;font-size:20px;line-height:1.4;color:#fff}
.naam-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.naam-rij label{font-family:Fredoka,sans-serif;font-weight:600;font-size:20px}
.naam-rij input{
  flex:1 1 180px;min-width:0;height:52px;box-sizing:border-box;
  border:2px solid #4a4f8f;border-radius:16px;background:#1c1f4a;color:#fff;
  padding:0 16px;font-family:Fredoka,sans-serif;font-weight:600;font-size:20px;
}
.naam-rij input::placeholder{color:#8a8fd0}
.bubbel .zacht{font-weight:700;font-size:15px;color:#c9cbf2}

.feest-titel{
  margin:0;text-align:center;font-size:40px;line-height:1.1;font-weight:700;
}
.feest-thuis .feest-titel{font-size:44px}

.tegels{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
}
.feest-thuis .tegels{gap:18px}
.tegel{
  text-align:left;border:0;cursor:pointer;color:#1c1f4a;border-radius:30px;
  padding:22px;min-height:180px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:10px;
  font-family:Nunito,sans-serif;
}
.tegel-tafels{background:#6f9bff;box-shadow:0 6px 0 #3a63c9}
.tegel-delen{background:#b07cff;box-shadow:0 6px 0 #7d4fd0}
.tegel-plus{background:#3ccf8e;box-shadow:0 6px 0 #239a68;animation:none}
.tegel-min{background:#ff9f45;box-shadow:0 6px 0 #c9711f}
.tegel-teken{font-size:52px;line-height:.9;font-weight:700}
.tegel-naam{font-size:30px;line-height:1}
.tegel-vb{margin-top:auto;font-weight:800;font-size:16px;font-family:Nunito,sans-serif}
/* De mockup heeft geen hoverkleur. Alleen 2 px omhoog en de onderrand
   van 6 naar 8, in dezelfde kleur als in rust. .tegel:hover in style.css
   zet anders een bijna doorzichtige witte laag en de tegel wordt donker. */
body.feestavond .tegel{
  transition:transform 120ms ease,box-shadow 120ms ease;
}
body.feestavond #feest-welkom .tegel:hover,
body.feestavond #feest-thuis .tegel:hover{
  transform:translateY(-2px);filter:none;
}
body.feestavond #feest-welkom .tegel:active,
body.feestavond #feest-thuis .tegel:active{
  transform:translateY(4px);filter:none;
}
body.feestavond #feest-welkom .tegel-tafels:hover{background:#6f9bff;box-shadow:0 8px 0 #3a63c9}
body.feestavond #feest-welkom .tegel-delen:hover{background:#b07cff;box-shadow:0 8px 0 #7d4fd0}
body.feestavond #feest-welkom .tegel-plus:hover{background:#3ccf8e;box-shadow:0 8px 0 #239a68}
body.feestavond #feest-welkom .tegel-min:hover{background:#ff9f45;box-shadow:0 8px 0 #c9711f}
body.feestavond #feest-welkom .tegel-tafels:active{background:#6f9bff;box-shadow:0 2px 0 #3a63c9}
body.feestavond #feest-welkom .tegel-delen:active{background:#b07cff;box-shadow:0 2px 0 #7d4fd0}
body.feestavond #feest-welkom .tegel-plus:active{background:#3ccf8e;box-shadow:0 2px 0 #239a68}
body.feestavond #feest-welkom .tegel-min:active{background:#ff9f45;box-shadow:0 2px 0 #c9711f}
body.feestavond .optie:hover,
body.feestavond .optie:hover .optie-tegel{filter:none;background-image:none}
body.feestavond .optie:hover .optie-tegel{transform:none}
body.feestavond .tegel:focus-visible{
  outline:3px solid #ffd23f;outline-offset:3px;
}

.feest-thuis .tegel{
  position:relative;color:#fff;background:#2a2e66;border-radius:32px;
  padding:24px;min-height:220px;gap:18px;box-shadow:0 6px 0 #15183f;
}
body.feestavond #feest-thuis .tegel:hover{background:#2a2e66;box-shadow:0 8px 0 #15183f}
body.feestavond #feest-thuis .tegel:active{background:#2a2e66;box-shadow:0 2px 0 #15183f}
.feest-thuis .tegel.verder{
  color:#1c1f4a;background:#ffd23f;box-shadow:0 6px 0 #c99a12;
}
body.feestavond #feest-thuis .tegel.verder:hover{background:#ffd23f;box-shadow:0 8px 0 #c99a12}
body.feestavond #feest-thuis .tegel.verder:active{background:#ffd23f;box-shadow:0 2px 0 #c99a12}
.feest-thuis .tegel-icoon{
  width:68px;height:68px;border-radius:22px;display:flex;align-items:center;
  justify-content:center;font-size:44px;line-height:1;color:#1c1f4a;flex:none;
}
.feest-thuis .tegel-tafels .tegel-icoon{background:#6f9bff}
.feest-thuis .tegel-delen .tegel-icoon{background:#b07cff}
.feest-thuis .tegel-plus .tegel-icoon{background:#3ccf8e}
.feest-thuis .tegel-min .tegel-icoon{background:#ff9f45}
.feest-thuis .tegel.verder .tegel-icoon{background:#1c1f4a;color:#ffd23f}
.feest-thuis .tegel-naam{font-size:34px}
.feest-thuis .tegel-vb{font-size:15px;color:#c9cbf2}
.feest-thuis .tegel.verder .tegel-vb{color:#1c1f4a}
.verder-label{
  position:absolute;top:18px;right:18px;background:#1c1f4a;color:#ffd23f;
  border-radius:999px;padding:6px 12px;font-family:Nunito,sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.onder-tegels{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;
}
.teller{
  display:flex;align-items:center;gap:12px;background:#2a2e66;color:#fff;
  border:0;border-radius:999px;padding:8px 18px 8px 8px;cursor:pointer;
  font-family:Nunito,sans-serif;font-weight:800;font-size:16px;text-align:left;
}
.teller-bol{
  width:40px;height:40px;border-radius:20px;background:#1c1f4a;border:2px dashed #ffd23f;
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:18px;color:#ffd23f;flex:none;
}
.teller-balk{
  width:72px;height:10px;border-radius:5px;background:#1c1f4a;overflow:hidden;flex:none;
}
.teller-balk i{display:block;height:100%;background:#ffd23f;border-radius:5px}
.feest-kies{gap:22px}
.kies-kop{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.kies-terug{
  display:flex;align-items:center;gap:8px;background:#2a2e66;color:#fff;
  border:0;border-radius:999px;padding:12px 20px 12px 14px;
  font-family:Nunito,sans-serif;font-weight:800;font-size:17px;cursor:pointer;
}
.kies-kop h1{margin:0;font-size:32px;line-height:1.1}
.kies-vriendje{position:relative;width:64px;height:64px;flex:none}
.kies-vriendje .vriendje{position:absolute;inset:0}
.stickers-nest{display:none}
.kies-kolom{
  width:100%;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;
}
.kies-alle{
  min-height:64px;border:2px solid #4a4f8f;border-radius:20px;background:transparent;
  color:#fff;font-family:Fredoka,sans-serif;font-weight:600;font-size:20px;cursor:pointer;
}
/* Gekozen is blauw, niet geel: geel is de kleur van de knop die iets doet
   (Start). Zo blijft Start het enige gele op dit scherm. */
.kies-alle.aan{background:#6f9bff;color:#1c1f4a;border-color:transparent;box-shadow:0 6px 0 #3f63c4}
.kies-raster{display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:12px}
.kies-knop{
  min-height:64px;min-width:64px;border:0;border-radius:20px;background:#2a2e66;color:#fff;
  box-shadow:0 6px 0 #15183f;font-family:Fredoka,sans-serif;font-weight:700;font-size:26px;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:8px;
}
.kies-knop .kies-vink{display:none;flex:none}
.kies-knop.aan{background:#6f9bff;color:#1c1f4a;box-shadow:0 6px 0 #3f63c4}
.kies-knop.aan .kies-vink{display:flex}
.kies-knop:active{transform:translateY(4px);box-shadow:0 2px 0 #15183f}
.kies-knop.aan:active{box-shadow:0 2px 0 #3f63c4}
.kies-start{
  min-height:64px;border:0;border-radius:20px;background:#ffd23f;color:#1c1f4a;
  box-shadow:0 6px 0 #c99a12;font-family:Fredoka,sans-serif;font-weight:700;font-size:24px;
  cursor:pointer;
}
.kies-start:disabled{opacity:.4;box-shadow:none;cursor:default}
.makkelijk{
  margin:4px 0 0;text-align:center;font-weight:700;font-size:16px;color:#c9cbf2;
}
.ouders{
  margin-top:8px;border-top:1px solid #2f3470;padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;
  font-weight:800;font-size:15px;color:#e4e5fb;
}
.ouders .kopje{color:#c9cbf2}
.pil{
  display:flex;align-items:center;gap:6px;background:#2a2e66;border-radius:999px;padding:8px 14px;
}
.ouders .feest-faq{
  background:none;border:0;color:#ffd23f;font-family:Nunito,sans-serif;
  font-weight:800;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}

/* ---- oefenen ---- */
body.feestavond #screen-play:not([hidden]){
  display:flex;flex-direction:column;max-width:none;width:100%;
  height:auto;min-height:100vh;min-height:100dvh;
  overflow-x:hidden;overflow-y:auto;gap:0;
  padding:0 0 48px;margin:0;box-sizing:border-box;
}
.focusbalk{
  width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;
  padding:16px 24px 0;display:flex;align-items:center;gap:16px;
}
.focus-logo{
  flex:none;font-family:Fredoka,sans-serif;font-weight:700;font-size:20px;color:#c9cbf2;
  background:none;border:0;padding:0 8px 0 0;cursor:pointer;
}
.focus-logo .x{color:#ffd23f}
body.feestavond #screen-play .segs{
  flex:1 1 auto;width:auto;max-width:none;height:10px;gap:3px;margin:0;
}
body.feestavond #screen-play .segs i{background:#2f3470;border-radius:5px}
body.feestavond #screen-play .segs i.ok::after{background:#3ccf8e}
body.feestavond #screen-play .segs i.no::after{background:#ff9f45}
body.feestavond #screen-play .segs i.cur{background:#fff}
.play-nr{flex:none;font-weight:800;font-size:17px;color:#c9cbf2}
.stop-x{
  width:52px;height:52px;flex:none;border:0;border-radius:26px;background:#2a2e66;
  color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
}
body.feestavond .timer,
body.feestavond .play-klok{display:none !important}

.speel-layout{
  width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;
  padding:32px 24px 48px;flex:1 1 auto;display:flex;flex-wrap:wrap;
  gap:32px;align-items:center;justify-content:center;
}
/* Somscherm v2: maten (SPEC schaal). Mobiel < 768. */
:root{
  --som-h:120px; --som-fs:120px; --vak-w:280px; --vak-h:112px; --bol:120px;
  --g-vriend-som:32px; --g-som-vak:48px; --g-vak-pil:32px; --g-pil-typ:8px;
  --pil-h:64px; --typ-h:32px;
}
@media (max-width:767px){
  :root{--som-h:64px; --som-fs:64px; --vak-w:240px; --vak-h:88px; --g-som-vak:32px; --bol:96px}
}
/* Eén grid, vaste rijen. De gaps zijn eigen rijen (oneven), geen margins:
   er is niets om te overschrijven of dubbel te tellen. Staat wisselen
   (data-staat) verandert alleen opacity, kleur en tekst. */
.speel-som{
  flex:0 1 520px;min-width:0;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:
    var(--bol) var(--g-vriend-som) var(--som-h) var(--g-som-vak) var(--vak-h)
    var(--g-vak-pil) var(--pil-h) var(--g-pil-typ) var(--typ-h);
  row-gap:0;justify-items:center;text-align:center;
}
.speel-som > .bol-blok{grid-row:1}
.speel-som > .question{grid-row:3}
.speel-som > .antwoord-veld{grid-row:5}
.speel-som > .pil-slot{grid-row:7}
.speel-som > .typ-slot{grid-row:9}
.bol-blok{position:relative;width:var(--bol);height:var(--bol);flex:none;display:flex;align-items:center;justify-content:center;overflow:visible}
.ringen{position:absolute;inset:-16px;pointer-events:none}
.ringen i{
  position:absolute;border-radius:50%;border:4px solid transparent;box-sizing:border-box;
}
.ringen i:first-child{inset:0}
.ringen i:last-child{inset:14px}
body[data-beurt="listening"] .ringen i:first-child{border-color:#3ccf8e;opacity:.55}
body[data-beurt="listening"] .ringen i:last-child{border-color:#3ccf8e;opacity:1}
body.staat-mis .ringen i:first-child{border-color:transparent}
body.staat-mis .ringen i:last-child{border:4px dashed #ffd23f}
body.feestavond #orb{
  display:block;width:var(--bol);height:var(--bol);position:relative;z-index:1;flex:none;
  -webkit-appearance:none;appearance:none;background:transparent;overflow:visible;
}
/* Vaste maat, los van de knop. inset:0 van .vriendje zou hem anders
   over een verkeerde houder uitrekken. */
body.feestavond #orb-vriendje{
  position:absolute;inset:auto;left:0;right:0;top:0;bottom:0;margin:auto;
  width:var(--bol);height:var(--bol);z-index:2;display:block !important;
  visibility:visible !important;overflow:visible;
}
body.feestavond .question{
  height:var(--som-h);display:block;white-space:nowrap;
  font-family:Fredoka,sans-serif;font-weight:700;
  font-size:var(--som-fs);line-height:1;letter-spacing:.02em;
  color:#fff;animation:none;
}
body.feestavond .question .op-teken{color:#ffd23f}
.antwoord-veld{position:relative;width:var(--vak-w);height:var(--vak-h)}
/* Vaste rand van 4px in elke staat; diepte is box-shadow. */
body.feestavond .answer{
  width:100%;height:100%;box-sizing:border-box;border-radius:32px;
  border:4px dashed #4a4f8f;background:transparent;color:#6b70b0;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:calc(var(--vak-h) * .62);line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s;
}
.antwoord-invoer{
  position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  border:0;margin:0;padding:0;background:transparent;text-align:center;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:calc(var(--vak-h) * .62);line-height:1;
  color:transparent;caret-color:#ffd23f;opacity:1;pointer-events:none;
}
.antwoord-invoer:focus{color:#fff;outline:none}
.antwoord-veld:focus-within .answer{color:transparent}
.antwoord-veld:focus-within .answer.leeg::before{content:none}
.typ-hint{margin:0;text-align:center;font-weight:700;font-size:16px;color:#8b90c4}
.typ-telefoon{
  display:none;background:none;border:0;padding:0;margin:0;
  font:inherit;font-weight:800;font-size:16px;color:#ffd23f;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
body.feestavond .answer.leeg::before{content:'?';color:#6b70b0}
body.feestavond .answer.hoort,
body.feestavond .answer.typt{color:#fff;border-style:solid}

/* Staten van het vak: alleen kleur, schaduw en tekst. */
body.feestavond [data-staat=luistert] .answer{border-color:#3ccf8e}
body.feestavond [data-staat=goed] .answer{background:#3ccf8e;border:4px solid #3ccf8e;color:#1c1f4a;box-shadow:0 6px 0 #239a68;animation:none}
body.feestavond [data-staat=fout] .answer{background:#ff9f45;border:4px solid #ff9f45;color:#1c1f4a;box-shadow:0 6px 0 #c9742a;animation:none}
[data-staat=goed] .antwoord-invoer,[data-staat=fout] .antwoord-invoer{color:transparent}
body.feestavond [data-staat=goed] .answer::before,body.feestavond [data-staat=fout] .answer::before{content:none}

/* pil-slot: pil (vraag/luistert) of feedbackkop (goed/fout), zelfde plek */
.pil-slot{position:relative;height:var(--pil-h);width:min(100%,480px)}
.chip-luister,.fb{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.chip-luister{
  gap:12px;background:#2a2e66;border-radius:999px;padding:0 24px;box-sizing:border-box;
  font-weight:800;font-size:20px;line-height:1.2;color:#fff;
}
[data-staat=vraag] .chip-luister,[data-staat=luistert] .chip-luister{opacity:1}
body.staat-mis .chip-luister{background:#ffd23f;color:#1c1f4a}
.pil-luister{display:none}
.pil-rust{color:#e4e5fb}
[data-staat=luistert] .pil-rust{display:none}
[data-staat=luistert] .pil-luister{display:inline}
.luister-noot{margin:0}
.golf{display:flex;align-items:center;gap:4px;height:28px;flex:none}
.golf i{
  width:5px;border-radius:3px;background:#3ccf8e;display:block;flex:none;height:8px;
  transition:height .08s linear;
}
[data-staat=vraag] .golf i{background:#8a8fd0;height:8px !important}
body.staat-mis .golf{display:none}
/* Rustvorm uit de mockup, plus het microfoonvolume via --ring. */
body[data-beurt="listening"] .golf i:nth-child(1),
body[data-beurt="mis"] .golf i:nth-child(1){height:calc(10px + var(--ring, 0) * 12px)}
body[data-beurt="listening"] .golf i:nth-child(2),
body[data-beurt="mis"] .golf i:nth-child(2){height:calc(22px + var(--ring, 0) * 10px)}
body[data-beurt="listening"] .golf i:nth-child(3),
body[data-beurt="mis"] .golf i:nth-child(3){height:calc(28px + var(--ring, 0) * 8px)}
body[data-beurt="listening"] .golf i:nth-child(4),
body[data-beurt="mis"] .golf i:nth-child(4){height:calc(16px + var(--ring, 0) * 12px)}
body[data-beurt="listening"] .golf i:nth-child(5),
body[data-beurt="mis"] .golf i:nth-child(5){height:calc(8px + var(--ring, 0) * 10px)}
.mis-icoon{display:none}
body.staat-mis .mis-icoon{display:block}

.fb-kop{margin:0;font-family:Fredoka,sans-serif;font-size:44px;line-height:1}
[data-staat=goed] .fb{opacity:1}
[data-staat=fout] .fb{opacity:1}
[data-staat=goed] .fb-kop{color:#3ccf8e}
[data-staat=fout] .fb-kop{color:#ff9f45}
/* Het pil-slot toont in goed/fout alleen de kop. */
[data-staat=goed] .chip-luister,[data-staat=fout] .chip-luister{opacity:0}

/* typ-slot: typ-hint of regel na feedback, vaste hoogte, wisselen = opacity */
.typ-slot{position:relative;height:var(--typ-h);width:min(100%,520px)}
.typ-slot > p{
  position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;
  font-weight:800;font-size:16px;line-height:1.4;color:#c9cbf2;
}
[data-staat=vraag] .typ-hint,[data-staat=luistert] .typ-hint{opacity:1;pointer-events:auto}
[data-staat=goed] .fb-sub,[data-staat=fout] .fb-gehoord{opacity:1}
/* hidden mag de plek niet vrijgeven: de regel blijft in de box, alleen leeg */
.typ-slot > p[hidden]{display:flex}
.fb-gehoord b{
  font-family:Fredoka,sans-serif;font-weight:700;font-size:20px;color:#fff;
  background:#2a2e66;border-radius:8px;padding:0 8px;margin:0 4px;
}
.fb-gehoord b.juist{color:#1c1f4a;background:#ff9f45}

body.feestavond .speel-toetsen{display:none !important}
.toets-kop{margin:0;font-weight:700;font-size:15px;color:#c9cbf2;text-align:center}
body.staat-mis .toets-kop{color:#fff;font-weight:800;font-size:16px}
body.staat-mis .speel-toetsen{
  outline:3px solid #ffd23f;border-radius:24px;padding:12px;
}
body.feestavond #keypad{display:none !important}
body.feestavond #btn-toggle-input{
  display:none;margin:0;padding:0;border:0;background:none;box-shadow:none;
  font-family:Nunito,sans-serif;font-weight:800;font-size:14px;color:#ffd23f;text-align:center;
}
body.feestavond .speel-fout{color:#ffd23f}

/* ---- einde ---- */
body.feestavond #screen-done:not([hidden]){
  display:block;max-width:none;background:transparent;padding:0 0 32px;
}
body.feestavond #screen-done .card.result{
  background:transparent;border:0;box-shadow:none;backdrop-filter:none;
  max-width:1160px;margin:0 auto;padding:32px 24px 0;box-sizing:border-box;
}
.einde-layout{
  display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:center;
}
.einde-links,.einde-rechts{
  flex:1 1 440px;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:32px;text-align:center;
}
.einde-links .einde-bol{margin:0}
body.feestavond #screen-done .card.result{
  height:auto;min-height:0;
}
body.feestavond #res-titel{font-size:56px;line-height:1;margin:0;color:#fff}
.einde-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
body.feestavond #btn-again.feest-primair{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:72px;box-sizing:border-box;padding:0 34px;border:0;border-radius:24px;
  background:#ffd23f;color:#1c1f4a;box-shadow:0 6px 0 #c99a12;
  font-size:26px;width:auto;
}
body.feestavond #btn-again.feest-primair:active{transform:translateY(2px);box-shadow:0 3px 0 #c99a12}
body.feestavond #btn-home.einde-klaar{
  height:72px;padding:0 22px;color:#c9cbf2;font-family:Nunito,sans-serif;
  font-weight:800;font-size:18px;background:none;border:0;
}
.sticker-moment{
  background:#2a2e66;border-radius:32px;padding:28px 24px;display:flex;
  flex-direction:column;align-items:center;gap:12px;max-width:360px;width:100%;
  box-sizing:border-box;
}
.sticker-kaart{
  width:160px;height:160px;border-radius:24px;display:flex;align-items:center;
  justify-content:center;font-size:84px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);
  transform:rotate(-6deg);
}
.sticker-moment strong{font-family:Fredoka,sans-serif;font-size:28px}
.sticker-moment span{font-weight:800;color:#c9cbf2}
body.feestavond #screen-done .result-numbers,
body.feestavond #res-tricky:empty{display:none}
body.feestavond #res-tricky{color:#c9cbf2;font-size:16px;margin:0}

/* ---- kies zelf: de bestaande keuze, in deze kleuren ---- */
body.feestavond #screen-ops:not([hidden]){
  display:flex;max-width:1160px;width:100%;box-sizing:border-box;
}
body.feestavond #screen-ops .top-row{display:none}
body.feestavond #screen-ops .card{
  background:#2a2e66;border:0;border-radius:24px;color:#fff;
}
body.feestavond #screen-ops h2,
body.feestavond #screen-ops .kies-kop{color:#fff;font-family:Fredoka,sans-serif}
body.feestavond #btn-start{
  background:#ffd23f;color:#1c1f4a;border:0;border-radius:24px;
  box-shadow:0 6px 0 #c99a12;font-family:Fredoka,sans-serif;font-size:22px;
  height:64px;padding:0 28px;
}
body.feestavond #btn-snelheid{
  background:#2a2e66;color:#fff;border-radius:24px;border:0;height:64px;
  font-family:Fredoka,sans-serif;font-size:20px;
}

/* ---- album, spelers, instellingen: bestaand blad, nieuwe verf ---- */
body.feestavond #schil:not([hidden]){
  position:static;inset:auto;z-index:auto;display:block;
  background:transparent;max-width:1160px;margin:0 auto;
  padding:8px 24px 48px;box-sizing:border-box;color:#fff;
}
body.feestavond #schil .kolom{max-width:1160px;padding:0;padding-bottom:0}
body.feestavond #schil .blad{display:block;min-height:0}
body.feestavond #feest-soorten,
body.feestavond #ster,
body.feestavond #blad-sterren .feest-kop{display:none !important}
body.feestavond #blad-sterren:not([hidden]){display:block}
body.feestavond .mijn-stickers{
  background:#2a2e66;border-radius:32px;padding:26px;box-sizing:border-box;
  max-width:640px;display:flex;flex-direction:column;gap:18px;
}
body.feestavond .mijn-stickers-kop{display:flex;flex-direction:column;gap:4px}
/* Wat ik gedaan heb: dezelfde kaart als de stickers, eronder. Per
   dag een kalenderblaadje zoals op de koelkast: de maand in een rode
   kop, de dag groot eronder. */
body.feestavond .mijn-voortgang{
  background:#2a2e66;border-radius:32px;padding:26px;box-sizing:border-box;
  max-width:640px;margin-top:24px;display:flex;flex-direction:column;gap:18px;color:#fff;
}
body.feestavond .mijn-voortgang:empty{display:none}
body.feestavond .logboek-kop{display:flex;flex-direction:column;gap:4px}
body.feestavond .mijn-voortgang .kicker{
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c9cbf2;
}
body.feestavond .logboek-titel{
  margin:0;font-family:Fredoka,sans-serif;font-weight:700;font-size:28px;line-height:1.1;
}
body.feestavond .logboek-sub{margin:4px 0 0;font-weight:700;font-size:16px;color:#e4e5fb}
.logboek{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log-dag{display:flex;gap:16px;align-items:flex-start;padding:14px 0}
.log-dag + .log-dag{border-top:2px solid #353a7a}
.log-dag:first-child{padding-top:0}
.log-dag:last-child{padding-bottom:0}
.kalender{
  flex:none;width:54px;border-radius:12px;overflow:hidden;background:#fff;color:#1c1f4a;
  display:flex;flex-direction:column;text-align:center;box-shadow:0 3px 0 #1c1f4a;
}
.kal-maand{background:#ff5d73;color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 0}
.kal-dag{font-family:Fredoka,sans-serif;font-weight:700;font-size:26px;line-height:1;padding:5px 0 7px}
.log-inhoud{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:2px}
.log-label{font-weight:800;font-size:15px;color:#c9cbf2}
.log-regels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.log-regel{display:flex;align-items:flex-start;gap:10px;font-size:18px;font-weight:700;line-height:1.25}
.log-regel b{font-family:Fredoka,sans-serif;font-weight:700}
.log-teken{
  width:28px;height:28px;border-radius:9px;flex:none;background:var(--kleur);color:#1c1f4a;
  display:flex;align-items:center;justify-content:center;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:19px;line-height:1;
}
.log-wat{display:block;font-size:15px;font-weight:700;color:#e4e5fb}
.log-meer{
  align-self:flex-start;min-height:44px;padding:10px 22px;border:0;border-radius:999px;
  background:#353a7a;color:#fff;cursor:pointer;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:17px;
}
.log-meer:hover{background:#40468f}
/* Groot scherm: het logboek naast de stickers, niet eronder. De
   stickers houden hun 640px; het logboek krijgt wat overblijft. Onder
   1080px past dat niet zonder de stickers te knijpen. */
@media (min-width:1080px){
  body.feestavond #blad-sterren .kolom.feest{
    display:grid;grid-template-columns:minmax(0,640px) minmax(320px,1fr);
    gap:24px;align-items:start;
  }
  body.feestavond .mijn-voortgang{margin-top:0;max-width:none}
}
body.feestavond .mijn-stickers .kicker{
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c9cbf2;
}
body.feestavond #mijn-feestje-titel{
  margin:0;font-family:Fredoka,sans-serif;font-weight:700;font-size:34px;line-height:1.1;
}
body.feestavond #mijn-feestje-sub{
  margin:8px 0 0;font-weight:700;font-size:16px;color:#e4e5fb;
}
body.feestavond #feest-album{
  background:transparent;border:0;padding:0;border-radius:0;
}
body.feestavond .album-kop{display:none}
body.feestavond .album-rooster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:12px;justify-items:stretch;
}
body.feestavond .sticker-cel{width:auto}
@media (max-width:559px){body.feestavond .sticker-cel.leeg.extra{display:none}}
body.feestavond .sticker-cel figcaption{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
body.feestavond .sticker-rond{
  width:100%;height:auto;aspect-ratio:1;border-radius:24px;border:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--kleur,#6f9bff) 62%, #fff), var(--kleur,#6f9bff));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);
  font-size:40px;
}
body.feestavond .sticker-emoji{font-size:40px}
body.feestavond .sticker-cel.plakt .sticker-rond{
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.15), 0 0 0 4px #ffd23f;
}
body.feestavond .mic-punt{display:none !important}
body.feestavond .sticker-rond.vraag{
  background:transparent;border:3px dashed #ffd23f;box-shadow:none;color:#ffd23f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;aspect-ratio:1;border-radius:24px;cursor:default;
}
body.feestavond .vraag-teken{font-family:Fredoka,sans-serif;font-weight:700;font-size:24px;line-height:1;color:#ffd23f}
body.feestavond .volgende-stippen{display:flex;gap:4px}
body.feestavond .volgende-stippen i{
  width:9px;height:9px;border-radius:5px;background:#4a4f8f;display:block;
}
body.feestavond .volgende-stippen i.aan{background:#ffd23f}
body.feestavond .feest-level,
body.feestavond .feest-nog{font-family:Fredoka,sans-serif;color:#fff}
body.feestavond .feest-balk{background:#1c1f4a;border-radius:999px}
body.feestavond .feest-balk-vul{background:#ffd23f}
body.feestavond .sticker-rond{border-radius:24px}
body.feestavond .kaart-instel,
body.feestavond .feest-kaart{
  background:#2a2e66;border-radius:24px;color:#fff;
}
body.feestavond #blad-chat{display:none !important}
/* Vriendje staat op elke pagina, ook bij de stickers, de spelers en
   de instellingen. Zo kan hij van pagina naar pagina reizen. Alleen
   de oude kop met de balk blijft weg. */
body.feestavond .feest-nest,
body.feestavond #sterren-nest{display:none}
body.feestavond .nest-klein{width:64px;height:64px}
body.feestavond .mijn-stickers-kop{position:relative;padding-right:76px}
body.feestavond .stickers-nest{display:block;position:absolute;top:0;right:0}

/* Spelers: een venster boven de pagina. Geen pop-in met schaal: die
   trok aan de reis van Vriendje het venster in. */
.speler-modal{z-index:50;animation:speler-in .18s ease-out}
.speler-kaart{
  position:relative;background:#2a2e66;border:0;border-radius:32px;
  max-width:440px;padding:28px 24px 24px;gap:20px;text-align:left;
  align-items:stretch;animation:none;color:#fff;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);box-sizing:border-box;
}
.speler-kaart .groet{flex-wrap:nowrap;justify-content:flex-start;gap:16px;padding-right:44px;margin:0}
.speler-kaart .bub{margin:0;font-family:Fredoka,sans-serif;font-size:22px;white-space:nowrap}
.speler-kaart .rol{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:0}
.speler-sluit{
  position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;
  border:0;background:#353a7a;color:#fff;font-size:28px;line-height:1;cursor:pointer;
}
.speler-sluit:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
@keyframes speler-in{from{opacity:0}to{opacity:1}}

/* Eén taal voor de hele feestavond. Gekozen is altijd lichtblauw (net als
   de sommen op het kiesscherm); geel blijft voor de knop die iets doet.
   Verder één primaire knop (geel) en één secundaire (rustig omlijnd). */
.feest-menu button[aria-current="page"]{background:#6f9bff;color:#1c1f4a}
body.feestavond .prow.aan{background:#6f9bff;border-color:transparent;color:#1c1f4a}
body.feestavond .prow.aan .prow-vink{color:#1c1f4a}
body.feestavond .chip.aan{background:#6f9bff;border-color:transparent;color:#1c1f4a}
body.feestavond .toggle input:checked{
  background:radial-gradient(circle at 34px 14px,#fff 9px,transparent 10px),#6f9bff;
}
body.feestavond .goud{
  border-radius:20px;background:#ffd23f;color:#1c1f4a;box-shadow:0 6px 0 #c99a12;
  font-family:Fredoka,sans-serif;font-weight:700;
}
body.feestavond .goud:active{transform:translateY(4px);box-shadow:0 2px 0 #c99a12}
body.feestavond .goud[disabled]{background:rgba(255,255,255,.08);color:rgba(255,255,255,.4);box-shadow:none;transform:none}
body.feestavond .prow-wijzig,
body.feestavond .nieuw,
body.feestavond .wijzig-weg,
body.feestavond .wijzig .link{
  min-height:44px;padding:0 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;
  font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
}
body.feestavond .nieuw{min-height:48px;margin-top:4px}
body.feestavond .wijzig-weg{color:#ffb0a4}
body.feestavond .prow.aan .prow-wijzig{
  border-color:rgba(28,31,74,.3);background:rgba(28,31,74,.12);color:#1c1f4a;
}
@media (prefers-reduced-motion:reduce){
  .speler-modal{animation:none}
  .vriendje.vaagt{transition:opacity .14s linear !important}
}

/* Telefoon: de kop is één balk, daaronder het segment over de volle
   breedte, en de vlaggen hangen aan een touw. Vanaf 560px blijft
   alles zoals het was, pixel voor pixel. */
@media (max-width:559px){
  body.feestavond .focus-logo{display:none}
  .bunting{height:auto;overflow:visible}
  .feest-nav{
    flex-wrap:wrap;align-items:center;
    padding:0 16px;gap:16px 8px;height:auto;min-height:40px;
  }
  .feest-nav .logo{
    order:1;flex:none;margin-right:auto;
    display:flex;align-items:center;height:24px;
    font-size:24px;line-height:24px;
  }
  .nav-rechts{
    order:2;flex:0 1 auto;min-width:0;height:40px;gap:8px;
    flex-wrap:nowrap;white-space:nowrap;
  }
  .nav-speler{
    max-width:140px;min-width:0;overflow:hidden;
    height:40px;box-sizing:border-box;
    padding:0 16px;font-size:15px;line-height:1;
  }
  #nav-spelernaam{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  .nav-avatar{display:none}
  .nav-instel{width:40px;height:40px;border-radius:20px}
  .nav-instel svg{width:18px;height:18px}
  .feest-menu{
    order:3;flex:1 0 100%;width:100%;height:48px;box-sizing:border-box;
    padding:4px;gap:4px;
  }
  .feest-menu button{
    flex:1 1 0;height:auto;padding:0 8px;font-size:16px;line-height:1;
  }
  #feest-welkom.feest-blad,
  #feest-thuis.feest-blad{padding:32px 16px 24px;gap:16px}
  #feest-thuis.feest-blad{padding-top:32px}
  body.is-welkom .feest-menu,
  body.is-welkom .nav-rechts{display:none;visibility:visible}
  /* toprij blijft 40 hoog; logo gecentreerd, zelfde top als home */
  #feest-welkom .groet,
  #feest-thuis .groet{flex-wrap:nowrap;gap:10px;justify-content:flex-start}
  #feest-welkom .feest-bol,
  #feest-thuis .feest-bol{width:80px;height:80px}
  #feest-welkom .bubbel{
    flex:1 1 auto;padding:12px 14px;border-radius:20px 20px 20px 6px;
  }
  #feest-welkom .bubbel p{font-size:16px;line-height:1.35}
  #feest-welkom .feest-titel{font-size:28px}
  #feest-thuis .feest-titel{
    flex:1 1 auto;min-width:0;font-size:22px;line-height:1.15;text-align:left;
  }
  #feest-welkom .tegels{margin-top:0 !important}
}
@media (max-width:1024px){
  body.feestavond .typ-desktop{display:none}
  body.feestavond #btn-toggle-input{display:inline}
  .antwoord-invoer{pointer-events:auto}
}
@media (max-height:460px){
  body.feestavond #orb,
  body.feestavond #orb-vriendje{display:block !important}
}

@media (prefers-reduced-motion:reduce){
  body.feestavond .confetti,
  body.feestavond .confetti i,
  body.feestavond .golf i,
  body.feestavond .ringen i,
  body.feestavond .sticker-kaart,
  body.feestavond .tegel{animation:none !important;transition:none !important}
}



/* ---- 09 eerste sticker → naam ---- */
.screen-09{background:#1c1f4a;color:#fff}
body.feestavond #screen-09:not([hidden]){
  display:block;max-width:none;padding:0;margin:0;min-height:100vh;min-height:100dvh;
}
.s09-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;box-sizing:border-box}
.s09-kop{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px;max-width:480px;width:100%;margin:0 auto;box-sizing:border-box;
}
.s09-logo{
  font-family:Fredoka,sans-serif;font-weight:700;font-size:20px;color:#c9cbf2;
  background:none;border:0;padding:0;cursor:pointer;
}
.s09-logo .x{color:#ffd23f}
.s09-naamknop{pointer-events:none} /* alleen weergave op dit scherm */
.s09-main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:480px;width:100%;margin:0 auto;padding:0 24px 48px;box-sizing:border-box;
}
.s09-a{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:64px}
.s09-main.stand-b .s09-a{gap:16px;margin-bottom:64px}
.s09-a-rij{position:relative;display:flex;align-items:flex-end;justify-content:center}
.s09-sticker{
  width:96px;height:96px;border-radius:24px;background:linear-gradient(135deg,#ffd56b,#ff9f45);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;
  font-size:48px;line-height:1;transform:rotate(-6deg);
}
/* .vriendje zet inset:0; zonder left:auto viel hij achter de sticker. */
.s09-vriendje{
  position:absolute;inset:auto 100% 0 auto;margin-right:16px;
  width:64px;height:64px;
}
.s09-label{
  margin:0;font-family:Fredoka,sans-serif;font-weight:600;font-size:18px;color:#c9cbf2;text-align:center;
}
.s09-main.stand-b .s09-label{font-size:32px;font-weight:700;color:#fff;line-height:1.2}
.s09-bewaard{margin:0;font-weight:800;font-size:18px;color:#c9cbf2;text-align:center}
.s09-form{display:flex;flex-direction:column}
.s09-b{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;position:relative}
.s09-vraag{
  margin:0;font-family:Fredoka,sans-serif;font-weight:700;font-size:32px;line-height:1.2;text-align:center;color:#fff;
}
.s09-vraag label{cursor:text}
.s09-veld{
  width:100%;height:64px;padding:0 24px;border:2px solid #4a4f8f;border-radius:24px;background:#2a2e66;color:#fff;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:28px;text-align:center;box-sizing:border-box;
}
.s09-veld::placeholder{color:#a3a7e0}
.s09-veld:focus{outline:none;border-color:#ffd23f}
.s09-hint{
  position:absolute;left:0;right:0;top:calc(100% + 8px);height:24px;margin:0;
  font-weight:700;font-size:16px;line-height:24px;color:#e4e5fb;text-align:center;
}
.s09-c{display:flex;flex-direction:column;align-items:center;gap:24px}
.s09-knop{
  width:100%;height:64px;padding:0 24px;border:0;border-radius:24px;background:#ffd23f;color:#1c1f4a;
  box-shadow:0 4px 0 #c99a12;font-family:Fredoka,sans-serif;font-weight:700;font-size:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:0;
}
.s09-knop .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12em}
.s09-knop:active{transform:translateY(4px);box-shadow:0 0 0 #c99a12}
.s09-later{
  min-height:48px;display:flex;align-items:center;padding:12px 16px;border:0;background:none;
  color:#c9cbf2;font-family:Nunito,sans-serif;font-weight:800;font-size:18px;
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}
@media (max-width:559px){
  .s09-kop{padding:16px 24px}
  .s09-main{padding:0 24px 24px}
  .s09-a{margin-bottom:32px}
  .s09-sticker{width:80px;height:80px;font-size:40px}
  .s09-vraag{font-size:28px}
  .s09-main.stand-b .s09-label{font-size:28px}
  .s09-veld{font-size:24px}
  .s09-knop{font-size:22px}
}
@media (max-width:559px) and (max-height:760px){
  .s09-page:has(.s09-veld:focus) .s09-kop{padding:8px 24px}
  .s09-page:has(.s09-veld:focus) .s09-sticker{width:48px;height:48px;font-size:24px;border-radius:12px}
  .s09-page:has(.s09-veld:focus) .s09-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .s09-sticker{transform:none}
}

/* Sterretjes (PR D): overlay buiten de layout, sterren bewegen met transform. */
#sterren{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}
#sterren .ster{position:fixed;left:0;top:0;line-height:1;pointer-events:none;will-change:transform,opacity}