:root{--ink:#17153a;--m:#2348e0;--v:#e6245f;--sun:#ffc830;--bg:#f3f4fb;--lijn:#dfe1ef;--grijs:#5b5a78;--goed:#169c55;--display:"Bricolage Grotesque","Arial Black","Segoe UI",sans-serif;--body:"Figtree","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);font-size:clamp(17px,1.5vw,22px);line-height:1.5;display:flex;flex-direction:column}
#mtv-app{flex:1;display:flex;flex-direction:column;min-height:100%}
button,input{font:inherit}
a{color:var(--m)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
#mtv-confetti{position:fixed;inset:0;pointer-events:none;display:none;z-index:50}

/* scorebord */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;background:var(--ink);color:#fff;position:sticky;top:0;z-index:10}
.team{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px clamp(8px,2vw,26px)}
.team--m{background:var(--m)}.team--v{background:var(--v)}
.team__in{display:flex;flex-direction:column;align-items:center;line-height:1.1;min-width:0}
.team__naam{font-weight:700;font-size:.8em;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team__score{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1}
.team.is-lead .team__score{text-shadow:0 4px 0 rgba(23,21,58,.55)}
.adj{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:50%;width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px);font-size:1.1em;font-weight:700;cursor:pointer;flex:none}
.adj:hover{background:rgba(255,255,255,.3)}
.bar__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px clamp(10px,2vw,30px);font-size:.72em;font-weight:700;text-align:center}
.menuknop{background:none;border:2px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:3px 14px;font-size:.95em;font-weight:700;cursor:pointer}
.menuknop:hover{background:#fff;color:var(--ink)}

/* schermen */
.scherm{flex:1;width:min(1000px,100% - 36px);margin:0 auto;padding:clamp(22px,4vh,54px) 0 clamp(30px,5vh,60px);display:flex;flex-direction:column;align-items:center;text-align:center}
.scherm h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(34px,5.4vw,76px);margin:0 0 .35em;text-wrap:balance}
.scherm h1.vraag{font-size:clamp(28px,4vw,54px)}
.vraag--emoji{font-size:clamp(60px,10vw,130px)!important;letter-spacing:.06em!important}
.sub{max-width:40em;margin:0 0 1.4em;color:var(--grijs)}
.klein{font-size:.78em;color:var(--grijs);margin-top:1.6em}
.merk{font-family:var(--display);font-weight:800;font-size:1.05em;margin:0 0 .6em}
.merk .m{color:var(--m)}.merk .v{color:var(--v)}.merk .t{font-family:var(--body);font-size:.6em;background:var(--sun);border-radius:999px;padding:3px 9px;vertical-align:middle}
.rondenr{font-family:var(--display);font-weight:800;color:var(--v);font-size:1.15em;margin:0 0 .2em}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 1.6em}
.chips span{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:4px 16px;font-weight:700;font-size:.8em}
.teller{align-self:stretch;display:flex;justify-content:space-between;font-weight:700;font-size:.78em;color:var(--grijs);margin:0 0 clamp(14px,3vh,34px);border-bottom:2px solid var(--lijn);padding-bottom:8px}
.voor{display:inline-block;font-weight:700;font-size:.85em;border-radius:999px;padding:4px 18px;margin:0 0 .7em;background:var(--ink);color:#fff}
.voor--m{background:var(--m)}.voor--v{background:var(--v)}

/* knoppen */
.btn{display:inline-block;background:var(--m);color:#fff;border:2px solid transparent;border-radius:999px;font-weight:700;padding:.65em 1.5em;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.btn--groot{font-size:1.1em;padding:.75em 1.9em;margin-top:.4em}
.btn--klein{font-size:.8em;padding:.45em 1.1em;box-shadow:0 3px 0 var(--ink)}
.btn--geel{background:var(--sun);color:var(--ink)}
.btn--m{background:var(--m)}.btn--v{background:var(--v)}.btn--goed{background:var(--goed)}
.btn--lijn{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn--lijn:hover{background:var(--ink);color:#fff;transform:none;box-shadow:none}

/* start */
.namen,.schat{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;width:min(680px,100%);margin:0 0 1.4em}
.schat{grid-template-columns:1fr 1fr}
.naam{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.8em;text-align:left;border-radius:20px;padding:14px;color:#fff}
.naam--m{background:var(--m)}.naam--v{background:var(--v)}
.naam input{width:100%;border:0;border-radius:12px;padding:.5em .7em;font-size:1.25em;font-weight:700;color:var(--ink);background:#fff}
.naam strong{font-family:var(--display);font-size:2em;line-height:1}
.vs{font-family:var(--display);font-weight:800;background:var(--sun);border-radius:50%;width:54px;height:54px;display:grid;place-items:center;margin-bottom:10px}
.verder{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:16px 22px 22px;margin:0 0 1.4em;width:min(680px,100%)}
.verder p{margin:0 0 .6em;font-size:.85em}
.fout{color:var(--v);font-weight:700}

/* meerkeuze */
.opties{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;margin:.4em 0 1em}
.optie{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.75em 1em;font-weight:700;cursor:pointer;color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.optie span{flex:none;font-family:var(--display);background:var(--bg);border-radius:50%;width:1.9em;height:1.9em;display:grid;place-items:center}
.optie:hover:not(:disabled){background:#fff8df}
.optie:disabled{cursor:default;box-shadow:none;opacity:.6}
.optie.is-goed{background:#d9f7e5;border-color:var(--goed);opacity:1}
.optie.is-fout{background:#fde0e8;border-color:var(--v);opacity:1}
.opties--twee .optie{justify-content:center;font-size:1.2em}.opties--twee .optie span{display:none}
.uitslag{font-family:var(--display);font-weight:800;font-size:1.3em;margin:.3em 0}
.uitslag--m{color:var(--m)}.uitslag--v{color:var(--v)}
.weetje{background:#fff5d6;border-left:6px solid var(--sun);border-radius:12px;padding:.7em 1em;max-width:42em;text-align:left;font-size:.88em;margin:.4em 0 1em}
.antwoord{font-family:var(--display);font-weight:800;font-size:clamp(48px,8vw,110px);line-height:1;margin:.1em 0 .25em;color:var(--ink)}
.antwoord small{font-size:.3em;font-family:var(--body);color:var(--grijs)}
.antwoord--tekst{font-size:clamp(30px,4.6vw,60px);background:var(--sun);border-radius:20px;padding:.3em .7em}
.schat--uit .naam{align-items:center;text-align:center}

/* opdracht */
.opdracht{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:1em 1.2em;max-width:40em;text-align:left;margin:0 0 1em;box-shadow:0 6px 0 var(--ink)}
.timer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 1.2em}
.timer__tijd{font-family:var(--display);font-weight:800;font-size:2.2em;line-height:1;background:var(--ink);color:#fff;border-radius:16px;padding:.15em .5em;min-width:3.2em;font-variant-numeric:tabular-nums}
.timer__tijd.is-bijna{background:var(--v)}
.award p{font-weight:700;margin:.6em 0 .7em}
.award__knoppen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.award__knoppen .btn{font-size:1.05em;min-width:9em}

/* woordenronde */
.kaarttop{display:flex;justify-content:space-between;align-items:center;width:min(560px,100%);margin-bottom:14px}
.kaartscore{font-weight:700}
.kaart{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:1.2em 1.4em 1.4em;width:min(560px,100%);box-shadow:0 8px 0 var(--ink)}
.is-m .kaart{border-color:var(--m);box-shadow:0 8px 0 var(--m)}.is-v .kaart{border-color:var(--v);box-shadow:0 8px 0 var(--v)}
.kaart__doe{margin:0;font-weight:700;color:var(--grijs);font-size:.8em}
.kaart__woord{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.4vw,64px);line-height:1.05;margin:.1em 0 .3em;overflow-wrap:anywhere}
.kaart__verboden{margin:.4em 0 .3em;font-weight:700;color:var(--v);font-size:.8em;border-top:2px dashed var(--lijn);padding-top:.7em}
.kaart ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;font-weight:700}
.kaart li{background:#fde0e8;border-radius:10px;padding:.25em .5em;text-decoration:line-through;text-decoration-color:var(--v)}
.kaartknoppen{display:flex;gap:14px;margin-top:1.2em;flex-wrap:wrap;justify-content:center}

/* uitslag */
.scherm--final.is-m h1{color:var(--m)}.scherm--final.is-v h1{color:var(--v)}
.straf{background:var(--sun);border:3px solid var(--ink);border-radius:22px;padding:.8em 1.2em;font-weight:700;font-size:1.15em;max-width:32em;box-shadow:0 6px 0 var(--ink);margin:0 0 1.6em;transform:rotate(-1deg)}
.eindknoppen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* menu */
.menu{position:fixed;inset:0;background:rgba(23,21,58,.72);display:grid;place-items:center;z-index:40;padding:20px}
.menu__in{background:#fff;border-radius:26px;padding:26px;width:min(420px,100%);display:grid;gap:12px;text-align:center}
.menu h2{font-family:var(--display);margin:0 0 4px}

/* code-invulscherm */
body.is-code{background:linear-gradient(105deg,var(--m) 0 50%,var(--v) 50.1% 100%);display:grid;place-items:center;padding:20px;font-size:18px}
.code{background:#fff;border-radius:28px;padding:34px 30px;width:min(480px,100%);text-align:center;box-shadow:0 10px 0 var(--ink)}
.code .logo{font-family:var(--display);font-weight:800;text-decoration:none;font-size:20px;display:inline-flex;gap:6px;align-items:baseline}
.code .logo .m{color:var(--m)}.code .logo .v{color:var(--v)}.code .logo .t{font-family:var(--body);font-size:11px;background:var(--sun);color:var(--ink);border-radius:999px;padding:3px 8px}
.code h1{font-family:var(--display);font-weight:800;font-size:36px;letter-spacing:-.03em;margin:.5em 0 .2em;line-height:1.05}
.code p{margin:0 0 1em;color:var(--grijs)}
.code form{display:grid;gap:10px;text-align:left}
.code label{font-weight:700;font-size:15px}
.code input{border:3px solid var(--ink);border-radius:16px;padding:14px;font-size:24px;font-weight:700;text-align:center;letter-spacing:2px;text-transform:uppercase;width:100%}
.code button{background:var(--sun);color:var(--ink);border:0;border-radius:999px;font-weight:700;padding:15px;font-size:18px;cursor:pointer;box-shadow:0 5px 0 var(--ink);margin-top:6px}
.code .fout{background:#fde0e8;border-radius:12px;padding:10px 14px;color:var(--ink)}
.code .klein{font-size:14.5px;margin:1.4em 0 0}

@media (max-width:640px){
 .opties{grid-template-columns:1fr}
 .namen{grid-template-columns:1fr}.vs{margin:0 auto}
 .adj{width:30px;height:30px}.team{padding:8px 6px;gap:4px}.team__naam{max-width:24vw}
 .bar__mid span{display:none}
 .kaart ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}