/* ============ basis ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;min-height:100vh}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 60px;position:relative;z-index:1}
a{color:inherit}
input[type=text],input[type=password],input[type=email],textarea,select{font:inherit;font-size:15px;padding:10px 13px;
  border:1px solid var(--rule);background:var(--field);color:var(--ink);border-radius:var(--r-small);width:100%}
textarea{resize:vertical;line-height:1.5}
input:focus-visible,button:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;cursor:pointer}

header.site{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:22px 0 16px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.brand{font-family:var(--display);font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:.01em}
header.site nav{display:flex;gap:16px;align-items:center;font-size:13.5px;color:var(--soft)}
header.site nav a{color:var(--soft);text-decoration:none}
header.site nav a:hover{color:var(--ink)}
.me{font-weight:600;color:var(--ink)}
footer.site{margin-top:48px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--soft)}
footer.site a{color:var(--soft)}

/* ============ thema: vrouw ============ */
.theme-v{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg1:#FFF6F7;--bg2:#FBEDF3;--card:#FFFFFF;--field:#FFFDFD;
  --ink:#4A2E39;--soft:#96707E;--rule:#F0D9E1;
  --accent:#D9668A;--accent-2:#F5CBD9;--glow:#F9E3EB;
  --sage:#7FA88B;--amber:#CE9B5C;--lav:#A98BC9;--stop:#C06767;--gray:#A79098;
  --r:22px;--r-small:14px;--shadow:0 10px 30px rgba(217,102,138,.10);
  background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#F7EAF2);
  background-attachment:fixed;color:var(--ink)}
.theme-v .card{border:1px solid #F6E3E9}

/* ============ thema: man ============ */
.theme-m{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --bg1:#E7E9EA;--card:#F5F6F6;--field:#FFFFFF;
  --ink:#152230;--soft:#4A5A67;--rule:#C9CED2;
  --accent:#8A5F72;--accent-2:#D9C3CD;--glow:#E3DAE0;
  --sage:#6E8371;--amber:#B0863F;--lav:#7A6E96;--stop:#8C3A3A;--gray:#7C858C;
  --r:6px;--r-small:3px;--shadow:0 4px 14px rgba(21,34,48,.08);
  background:var(--bg1);color:var(--ink)}

/* ============ thema: admin ============ */
.theme-admin{
  --display:ui-sans-serif,system-ui,sans-serif;
  --bg1:#F4F5F7;--card:#FFFFFF;--field:#FFFFFF;
  --ink:#1D2530;--soft:#5D6B7A;--rule:#DDE2E8;
  --accent:#3D5A80;--accent-2:#C6D3E3;--glow:#E8EDF4;
  --sage:#4C8055;--amber:#A8752E;--lav:#6B5E96;--stop:#A03D3D;--gray:#7C858C;
  --r:10px;--r-small:6px;--shadow:0 2px 10px rgba(29,37,48,.06);
  background:var(--bg1);color:var(--ink)}

/* ============ zwevende hartjes ============ */
.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hearts span{position:absolute;bottom:-40px;font-size:22px;color:#E9A8C0;opacity:0;
  animation:floatup linear infinite}
@keyframes floatup{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  12%{opacity:.35}
  85%{opacity:.18}
  100%{transform:translateY(-110vh) rotate(28deg);opacity:0}}
/* ============ telefoon ============ */
/* Zelfde pagina, andere maat: op een smal scherm moet de vraag mét knoppen in
   één oogopslag passen. Alles wat daarboven ruimte vrat wordt compact. */
@media (max-width:700px){
  .wrap{padding:0 12px 48px}
  header.site{padding:10px 0 8px;margin-bottom:10px}
  .brand{font-size:16px}
  header.site nav{gap:10px;font-size:12px}
  .progress{padding:7px 12px;margin-bottom:10px;font-size:12px}
  .spel{gap:6px;margin-bottom:10px}
  .chip{padding:4px 10px;font-size:11.5px}
  .banner{padding:9px 12px;font-size:13px;margin-bottom:10px}
  .card{padding:16px 16px;border-radius:14px;margin-bottom:12px}
  .illu{margin:0 0 8px}
  .illu svg{height:min(var(--illu-h,110px), 66px)}
  .illu-bij{font-size:12px;margin-top:2px}
  .scene{font-size:14.5px;margin-bottom:10px;padding-left:12px}
  .qtext{font-size:19px}
  .opts{gap:7px;margin:12px 0 4px;grid-template-columns:1fr 1fr}
  .opt{padding:10px 10px;font-size:13px;text-align:center}
  .opt[data-v=prive]{grid-column:1 / -1}
  .care{font-size:12.5px;padding:8px 11px;margin:8px 0 2px}
  .notefield label{font-size:12px}
  .qfoot{font-size:12px;margin-top:10px}
  .aanmoediging{font-size:13.5px;margin-bottom:8px}
  .panel{padding:14px 16px}
  .statrow{gap:8px}
  .stat{padding:9px 12px;flex-basis:110px}
  .stat .n{font-size:20px}
  h1{font-size:24px}
  h2{font-size:19px}
  .hearts span{font-size:16px}
  table{font-size:12px}
  th,td{padding:6px 6px}
}
@media (prefers-reduced-motion:reduce){
  .hearts span{animation:none;display:none}
  *{transition:none!important;animation:none!important}}

/* ============ kaarten en koppen ============ */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:30px 32px;margin-bottom:22px;animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
h1,h2{font-family:var(--display);font-weight:500;margin:8px 0 6px;line-height:1.15}
h1{font-size:clamp(26px,5.5vw,38px)}
h2{font-size:24px}
.lede,.note-text{color:var(--soft);font-size:15px;max-width:60ch}

/* ============ voortgang ============ */
.progress{position:sticky;top:0;z-index:5;background:var(--card);border-radius:0 0 var(--r-small) var(--r-small);
  box-shadow:var(--shadow);padding:10px 18px;display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--soft);margin-bottom:20px}
.track{flex:1;height:8px;background:var(--glow);border-radius:99px;position:relative}
.track .bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .7s cubic-bezier(.2,.8,.3,1)}
.track .pin{position:absolute;top:50%;translate:-50% -54%;font-size:15px;
  transition:left .7s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.theme-v .track .pin{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.25}}
.pct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}

/* ============ illustraties ============ */
.illu{display:flex;justify-content:center;margin:2px 0 16px;color:var(--accent);opacity:.9}
.illu svg{height:var(--illu-h,110px);width:auto;max-width:100%;overflow:visible}
.illu .d{stroke-dasharray:400;stroke-dashoffset:400;
  animation:trek 1.1s cubic-bezier(.3,.7,.3,1) forwards;
  animation-delay:calc(var(--i,0) * .11s)}
@keyframes trek{to{stroke-dashoffset:0}}
.illu .beat{transform-origin:center;transform-box:fill-box;
  animation:kloppen 1.9s ease-in-out infinite}
@keyframes kloppen{0%,100%{scale:1;opacity:.75}50%{scale:1.22;opacity:1}}
.illu .twinkle{animation:fonkel 2.6s ease-in-out infinite}
@keyframes fonkel{0%,100%{opacity:.25}50%{opacity:1}}
.illu .flicker{transform-origin:bottom;transform-box:fill-box;
  animation:flakker 1.5s ease-in-out infinite}
@keyframes flakker{0%,100%{scale:1 1;opacity:.85}35%{scale:.94 1.08;opacity:1}70%{scale:1.05 .96;opacity:.9}}
.illu .steam{stroke-dasharray:26;animation:damp 3.2s linear infinite;opacity:.5}
@keyframes damp{0%{stroke-dashoffset:26;opacity:0}30%{opacity:.55}100%{stroke-dashoffset:-26;opacity:0}}
.illu .rain{stroke-dasharray:6 10;animation:druppel 1.4s linear infinite}
@keyframes druppel{to{stroke-dashoffset:-16}}
.theme-v .illu{color:var(--accent)}
.theme-m .illu{color:var(--soft);opacity:.75}
.illu-bij{font-family:var(--display);font-style:italic;font-size:13.5px;color:var(--soft);
  text-align:center;margin:6px 0 0;max-width:46ch;animation:rise .6s .5s ease both}

/* bewegingen voor de tekeningen van deel drie */
.illu .zwaai{animation:zwaai 3.4s ease-in-out infinite}
@keyframes zwaai{0%,100%{rotate:-4deg}50%{rotate:4deg}}
.illu .knipper{animation:knipper 2.1s ease-in-out infinite}
@keyframes knipper{0%,100%{opacity:.18}45%{opacity:1}}
.illu .drup{animation:drup 2.4s ease-in infinite;transform-box:fill-box}
@keyframes drup{0%{translate:0 -14px;opacity:0}25%{opacity:.8}100%{translate:0 12px;opacity:0}}
.illu .zand{animation:zand 4s ease-in-out infinite;transform-origin:top;transform-box:fill-box}
@keyframes zand{0%{scale:1 1}100%{scale:1 .25}}
.illu .golfje{stroke-dasharray:30;animation:golfje 1.8s linear infinite;opacity:.5}
@keyframes golfje{0%{stroke-dashoffset:30;opacity:0}40%{opacity:.6}100%{stroke-dashoffset:-30;opacity:0}}
.illu .glans{stroke-dasharray:40;stroke-dashoffset:40;animation:glans 3.6s ease-in-out infinite}
@keyframes glans{0%,70%{stroke-dashoffset:40}85%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
.illu .knipoog{animation:knipoog 4.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes knipoog{0%,92%,100%{scale:1 1}96%{scale:1 .12}}
.illu .vlieg{animation:vlieg 3.2s ease-out infinite}
@keyframes vlieg{0%{translate:0 0;opacity:0}15%{opacity:.9}100%{translate:34px -30px;opacity:0}}

/* ============ spinnenweb ============ */
.radar{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 4px}
.radar svg{height:var(--radar-h,340px);max-width:100%;color:var(--ink);overflow:visible}
.radar .aslabel{font-size:9.5px;fill:var(--soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.radar .vorm{fill:var(--kleur);fill-opacity:.16;stroke:var(--kleur);stroke-width:2;
  stroke-linejoin:round;transform-origin:150px 150px;
  animation:groei .9s cubic-bezier(.25,.9,.3,1) both;animation-delay:calc(var(--i) * .18s)}
@keyframes groei{from{scale:.15;opacity:0}to{scale:1;opacity:1}}
.radar .knoop{opacity:0;animation:opkomen .4s ease forwards;
  animation-delay:calc(.5s + var(--i) * .04s)}
@keyframes opkomen{to{opacity:1}}
.radar .knoop:hover{r:5.5}
.radar-legenda{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:var(--soft)}
.radar-legenda span{display:flex;align-items:center;gap:7px}
.radar-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ============ spelelementen ============ */
.spel{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  background:var(--card);box-shadow:var(--shadow);font-size:13px;color:var(--soft)}
.chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.chip.vlam{color:var(--amber)}
.chip.nieuw{animation:pop .55s cubic-bezier(.2,1.5,.4,1) both}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:linear-gradient(90deg,var(--glow),var(--card));border:1.5px solid var(--accent-2);
  font-size:13.5px;font-weight:600;color:var(--ink);animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
.badge .em{font-size:17px}
.aanmoediging{font-family:var(--display);font-style:italic;font-size:15.5px;color:var(--soft);
  text-align:center;margin:0 0 14px}

/* ============ meldingen ============ */
.banner{border-radius:var(--r-small);padding:12px 16px;margin-bottom:16px;font-size:14.5px;
  background:var(--glow);color:var(--ink);border:1px solid var(--rule);animation:rise .4s ease both}
.banner.milestone{background:linear-gradient(90deg,var(--glow),var(--card));
  border-color:var(--accent-2);font-weight:600}
.wink{display:flex;gap:10px;align-items:flex-start;background:var(--glow);
  border-radius:var(--r);border-bottom-left-radius:4px;padding:13px 17px;margin-bottom:16px;
  font-size:14.5px;color:var(--ink);animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
.wink .who{font-size:18px}

/* ============ de vraag ============ */
.scene{font-family:var(--display);font-style:italic;font-size:16.5px;color:var(--soft);
  border-left:3px solid var(--accent-2);padding:2px 0 2px 16px;margin:0 0 18px}
.qtext{font-size:clamp(19px,3.6vw,25px);font-family:var(--display);margin:0 0 4px;line-height:1.3}
.care{display:flex;gap:9px;margin:12px 0 4px;padding:11px 14px;border-radius:var(--r-small);
  background:var(--glow);font-size:13.5px;color:var(--soft)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:20px 0 6px}
.opt{padding:13px 16px;border:1.5px solid var(--rule);border-radius:var(--r-small);
  background:var(--field);color:var(--ink);font-size:14.5px;text-align:left;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.opt:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.opt:active{transform:scale(.97)}
.opt.sel{border-width:2px;font-weight:700}
.opt[data-v=ja].sel{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,var(--field))}
.opt[data-v=proberen].sel{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--field))}
.opt[data-v=voorjou].sel{border-color:var(--lav);background:color-mix(in srgb,var(--lav) 12%,var(--field))}
.opt[data-v=lieverniet].sel{border-color:var(--gray);background:color-mix(in srgb,var(--gray) 12%,var(--field))}
.opt[data-v=grens].sel{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 10%,var(--field))}
.opt[data-v=geenidee].sel,.opt[data-v=prive].sel{border-color:var(--ink)}
.opt[data-v=prive]{border-style:dashed;color:var(--soft)}
.notefield{margin-top:14px}
.notefield label{display:block;font-size:13px;color:var(--soft);margin-bottom:5px}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;
  font-size:13.5px;color:var(--soft);gap:10px;flex-wrap:wrap}
.qfoot a{color:var(--soft)}
.opzij{font:inherit;font-size:13px;background:transparent;border:1px dashed var(--rule);
  border-radius:99px;padding:6px 13px;color:var(--soft);cursor:pointer}
.opzij:hover{border-color:var(--accent);color:var(--accent)}

/* ============ profielpaneel ============ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}
@media (max-width:820px){.layout{grid-template-columns:1fr}}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:20px 22px;position:sticky;top:64px;animation:rise .5s .1s ease both}
@media (max-width:820px){.panel{position:static}}
.panel h3{margin:0 0 4px;font-family:var(--display);font-size:17px;font-weight:600}
.panel .sub{font-size:12.5px;color:var(--soft);margin:0 0 14px}
.axis{margin:10px 0}
.axis .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;color:var(--soft)}
.axis .lab b{color:var(--ink);font-weight:600}
.dtrack{height:7px;background:var(--glow);border-radius:99px;position:relative;overflow:hidden}
.dtrack .bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transition:width .8s cubic-bezier(.2,.8,.3,1)}
.dtrack .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--rule)}
.profline{font-size:13.5px;margin:10px 0;padding-left:12px;border-left:2.5px solid var(--accent-2)}
.profline b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.empty-profile{font-size:13px;color:var(--soft);font-style:italic}

/* ============ tussenstand / confetti ============ */
.confetti{position:relative;height:0}
.confetti i{position:absolute;top:-10px;font-style:normal;font-size:16px;opacity:0;
  animation:fall 2.6s ease-in forwards}
@keyframes fall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(46vh) rotate(320deg);opacity:0}}
.choices3{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.choices3 .opt{flex:1 1 140px;text-align:center}

/* ============ brief ============ */
.brief{font-family:var(--display);font-size:17px;line-height:1.75;margin-top:14px;
  white-space:pre-line;border-left:3px solid var(--accent-2);padding-left:18px}

/* ============ schrijfhulp ============ */
.btnrij{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.btn.klein{padding:8px 16px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.verzinstatus{font-size:12.5px;color:var(--soft);font-style:italic}

.veldlabel{display:block;font-size:13px;color:var(--soft);margin:13px 0 5px}

/* ============ mobiel: vraag past op één scherm ============ */
@media (max-width: 480px){
  header.site{padding:10px 0}
  .wrap{padding-left:12px;padding-right:12px}
  .card{padding:16px 14px}
  .progress{padding:6px 0}
  .spel{margin-bottom:8px}
  .chip{padding:5px 10px;font-size:12px}
  .illu{margin:0 0 8px}
  .illu svg{height:min(var(--illu-h,104px), 62px)}
  .illu-bij{font-size:12px;margin-top:3px}
  .kicker{font-size:10.5px}
  .qtext{font-size:17px;margin:6px 0 10px}
  .scene{font-size:13.5px;margin:4px 0 8px}
  .opts .opt{padding:11px 14px;font-size:14.5px}
  .aanmoediging{font-size:13.5px;margin-bottom:8px}
  .panel{margin-top:14px}
}

/* ============ blokfeest ============ */
.card.feest{text-align:center;background:linear-gradient(170deg,var(--card),var(--glow))}
.badge.groot{font-size:16px;padding:12px 22px;margin:6px 0 10px;
  animation:pop .7s cubic-bezier(.2,1.6,.4,1) both}
.badge.groot .em{font-size:22px}
.confetti.groot i{animation-duration:3.4s}

/* ============ beheertabs ============ */
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabbar button{font:inherit;font-size:14px;padding:9px 18px;border-radius:99px;
  border:1.5px solid var(--rule);background:var(--card);color:var(--soft);cursor:pointer}
.tabbar button.actief{border-color:var(--accent);color:var(--ink);font-weight:600}
[data-tab]{display:none}
[data-tab].actief{display:block}

/* ============ knoppen ============ */
.btn{display:inline-block;padding:12px 24px;border-radius:99px;border:1.5px solid var(--accent);
  background:var(--accent);color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--accent)}
.theme-m .btn,.theme-admin .btn{border-radius:var(--r-small)}

/* ============ login ============ */
.login-hero{max-width:430px;margin:6vh auto 0;text-align:center}
.login-hero .big{font-size:46px;margin-bottom:6px;animation:pulse 2.4s ease-in-out infinite;display:inline-block}
.login-card{max-width:430px;margin:18px auto 0;text-align:left}
.login-card label{display:block;font-size:13px;color:var(--soft);margin:12px 0 5px}
.login-card .btn{width:100%;margin-top:18px;text-align:center}
.error{background:color-mix(in srgb,var(--stop) 10%,var(--card));border:1px solid var(--stop);
  color:var(--stop);border-radius:var(--r-small);padding:10px 14px;font-size:14px;margin-top:14px}

/* ============ tabellen (beheer) ============ */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
tr:hover td{background:var(--glow)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:var(--glow);color:var(--ink)}
.tag.ja{background:color-mix(in srgb,var(--sage) 18%,var(--card))}
.tag.grens{background:color-mix(in srgb,var(--stop) 16%,var(--card))}
.tag.lieverniet{background:color-mix(in srgb,var(--gray) 18%,var(--card))}
.tag.proberen{background:color-mix(in srgb,var(--amber) 18%,var(--card))}
.tag.voorjou{background:color-mix(in srgb,var(--lav) 18%,var(--card))}
.tag.prive{border:1px dashed var(--gray);background:transparent;color:var(--soft)}
details{margin:10px 0}
details summary{cursor:pointer;font-weight:600;padding:8px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.statrow{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 4px}
.stat{flex:1 1 130px;background:var(--glow);border-radius:var(--r-small);padding:12px 16px}
.stat .n{font-family:var(--display);font-size:26px;line-height:1.1}
.stat .l{font-size:12px;color:var(--soft)}
.warn{color:var(--stop);font-weight:600}

/* ============ spellen en extra's ============ */
.badgegrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.optkeuze{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.optkeuze input{position:absolute;opacity:0;pointer-events:none}
.optkeuze label{padding:8px 15px;border:1.5px solid var(--rule);border-radius:99px;
  background:var(--field);color:var(--ink);font-size:13.5px;cursor:pointer;
  transition:border-color .15s,background .15s}
.optkeuze label:hover{border-color:var(--accent)}
.optkeuze input:checked+label{border-color:var(--accent);background:var(--glow);font-weight:700}
.optkeuze input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.okmsg{background:color-mix(in srgb,var(--sage) 12%,var(--card));border:1px solid var(--sage);
  border-radius:var(--r-small);padding:10px 14px;font-size:14px;margin-bottom:14px}