/* ====================================================================
   Quizmeester — stijl
   Vrolijke, rustige leer-app. Mascotte is het herkenningspunt.
   ==================================================================== */
:root{
  --bg:#e8f2ea; --bg-2:#dcecd8; 
  --ink:#1f2d24; --muted:#6c7d72;
  --card:#ffffff; --line:#e2ece5;
  --green:#2f9e57; --green-d:#1d7a40; --green-l:#e9faee;
  --amber:#f6b93b; --amber-d:#e09a17;
  --coral:#ec5b4a; --coral-d:#cf3f2f; --coral-l:#fdeceb;
  --blue:#3a7bd5;
  --radius:20px; --radius-sm:13px;
  --shadow:0 14px 30px -16px rgba(31,45,36,.35);
  --shadow-sm:0 6px 16px -10px rgba(31,45,36,.4);
  --display:"Fredoka",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  min-height:100vh; line-height:1.5; position:relative; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15; margin:0 0 .5em}
a{color:var(--green-d)}
b{font-weight:800}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* achtergrond-blobs */
.bg-blobs{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.bg-blobs span{position:absolute; border-radius:50%; filter:blur(40px); opacity:.5}
.bg-blobs span:nth-child(1){width:420px;height:420px;background:#cfeede;top:-120px;left:-100px}
.bg-blobs span:nth-child(2){width:360px;height:360px;background:#fdeecb;bottom:-140px;right:-80px}
.bg-blobs span:nth-child(3){width:300px;height:300px;background:#d8e8ff;top:40%;right:30%;opacity:.35}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px clamp(16px,4vw,40px); max-width:1040px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-text{display:flex; flex-direction:column; font-family:var(--display)}
.brand-text strong{font-size:1.35rem; font-weight:700}
.brand-text span{font-size:.82rem; color:var(--muted); font-family:var(--body); font-weight:600}

/* ---------- knoppen ---------- */
.btn{
  font-family:var(--display); font-weight:600; font-size:1rem;
  border:none; border-radius:999px; padding:.7em 1.4em; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .15s; color:#fff;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--green); box-shadow:0 6px 0 var(--green-d)}
.btn-primary:hover{background:#34ad60}
.btn-primary:active{box-shadow:0 2px 0 var(--green-d); transform:translateY(4px)}
.btn-lg{font-size:1.18rem; padding:.85em 1.8em; width:100%; justify-content:center}
.btn-sm{font-size:.9rem; padding:.5em 1em}
.btn-ghost{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:#f6faf7}
.btn-danger{background:var(--coral); box-shadow:0 6px 0 var(--coral-d)}
.btn-danger:active{box-shadow:0 2px 0 var(--coral-d); transform:translateY(4px)}
.btn-amber{background:var(--amber); color:#5b4209; box-shadow:0 6px 0 var(--amber-d)}

/* ---------- layout ---------- */
.wrap{max-width:1040px; margin:0 auto; padding:8px clamp(16px,4vw,40px) 40px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.screen{animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}

/* ---------- hero / start ---------- */
.hero{display:grid; grid-template-columns:0.9fr 1.1fr; gap:28px; align-items:center; margin-bottom:24px}
.hero-mascot{position:relative; text-align:center}
.hero-panel{padding:28px}
.hero-panel h1{font-size:1.7rem}
.speech{
  display:inline-block; margin-top:6px; background:#fff; border:1px solid var(--line);
  padding:10px 16px; border-radius:16px; font-family:var(--display); font-weight:500;
  box-shadow:var(--shadow-sm); position:relative; max-width:280px;
}
.speech::before{content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  border:9px solid transparent; border-bottom-color:#fff; border-top:0}

.field{display:block; margin:0 0 18px}
.field>span{display:block; font-family:var(--display); font-weight:500; margin-bottom:7px}
select,input[type=text],input[type=password],textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:.7em .9em; border:2px solid var(--line); border-radius:var(--radius-sm);
  background:#fbfdfb; transition:border-color .15s;
}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--green)}

.segmented{display:inline-flex; background:#eef4f0; border-radius:999px; padding:4px; gap:4px}
.seg{font-family:var(--display); font-weight:500; border:none; background:transparent; color:var(--muted);
  padding:.55em 1.2em; border-radius:999px; cursor:pointer; transition:.15s}
.seg.active{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}

.empty{color:var(--muted)}

/* ---------- scorebord ---------- */
.board{padding:22px 26px}
.board-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px}
.board-head h2{font-size:1.2rem; margin:0}
.board-list{list-style:none; counter-reset:rank; margin:0; padding:0}
.board-list li{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px dashed var(--line)}
.board-list li:last-child{border-bottom:none}
.board-list li::before{
  counter-increment:rank; content:counter(rank); font-family:var(--display); font-weight:700;
  width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%;
  background:#eef4f0; color:var(--muted); font-size:.95rem;
}
.board-list li:nth-child(1)::before{background:#fde6bf; color:#9a6b00}
.board-list li:nth-child(2)::before{background:#e7ecef; color:#5d6b73}
.board-list li:nth-child(3)::before{background:#f4ddc6; color:#925e2a}
.board-list .bl-name{flex:1; font-weight:700}
.board-list .bl-score{font-family:var(--display); font-weight:600; color:var(--green-d)}
.board-list .bl-meta{color:var(--muted); font-size:.82rem; margin-left:8px}
.board-list li.me{background:var(--green-l); border-radius:12px}

/* ---------- quiz ---------- */
.quiz-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px}
.quiz-title{font-family:var(--display); font-weight:600; font-size:1.15rem; text-align:center; flex:1}
.counters{display:flex; gap:8px}
.count{font-family:var(--display); font-weight:600; padding:.35em .8em; border-radius:999px; font-size:.95rem}
.count.good{background:var(--green-l); color:var(--green-d)}
.count.bad{background:var(--coral-l); color:var(--coral-d)}

.progress{height:12px; background:#dfeae3; border-radius:999px; overflow:hidden}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--green),#56c47e); border-radius:999px; transition:width .4s ease}
.progress-label{text-align:center; color:var(--muted); font-size:.85rem; margin:6px 0 16px; font-weight:600}

.quiz-stage{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:stretch; margin-bottom:18px}
.stage-mascot{display:flex; align-items:flex-end; justify-content:center}
.stage-mascot .mascot{width:120px}
.question-card{padding:6px; display:flex}
.question-box{
  width:100%; max-height:230px; overflow-y:auto; padding:22px 26px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--display); font-weight:500; white-space:pre-wrap;
  /* basisgrootte; JS past de exacte grootte aan op de lengte */
  font-size:1.7rem; line-height:1.35;
}
.question-box.has-scroll{align-items:flex-start; text-align:left; justify-content:flex-start}
/* nette scrollbalk */
.question-box::-webkit-scrollbar{width:10px}
.question-box::-webkit-scrollbar-thumb{background:#cfe0d5; border-radius:8px}
.question-box::-webkit-scrollbar-track{background:transparent}

.answers{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.answer{
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  background:#fff; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; font-family:var(--body); font-weight:700; font-size:1.05rem; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .1s, border-color .15s, background .15s;
}
.answer:hover:not(:disabled){transform:translateY(-2px); border-color:#bfe0cb}
.answer .pill{flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--green-l);
  color:var(--green-d); font-family:var(--display); font-weight:700; display:grid; place-items:center}
.answer.correct{background:var(--green-l); border-color:var(--green)}
.answer.correct .pill{background:var(--green); color:#fff}
.answer.wrong{background:var(--coral-l); border-color:var(--coral)}
.answer.wrong .pill{background:var(--coral); color:#fff}
.answer.dim{opacity:.55}
.answer:disabled{cursor:default}

/* ---------- eindscherm ---------- */
.end{max-width:560px; margin:10px auto; padding:30px; text-align:center}
.end .mascot{width:120px; margin:0 auto}
.end h1{font-size:1.8rem; margin-top:6px}
.ring-wrap{position:relative; width:150px; height:150px; margin:8px auto 4px}
.ring{width:150px; height:150px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:#e4efe8; stroke-width:12}
.ring-fg{fill:none; stroke:var(--green); stroke-width:12; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1s ease}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring-center b{font-family:var(--display); font-size:2rem; line-height:1}
.ring-center span{color:var(--muted); font-size:.85rem; font-weight:700}
.end-sub{color:var(--muted); margin:4px 0 18px}
.end-actions{display:flex; gap:12px; justify-content:center; margin-top:18px}
#save-block .field{text-align:left}

/* ---------- footer ---------- */
.foot{text-align:center; color:var(--muted); font-size:.82rem; padding:24px}

/* ====================================================================
   Mascotte-kleuren + uitdrukkingen
   ==================================================================== */
.mascot{width:200px; max-width:100%; margin:0 auto; display:block}
.mascot svg{width:100%; height:auto; overflow:visible}
.mascot-sm{width:52px; margin:0}
.m-body{fill:#3aa856; stroke:#258a45; stroke-width:3}
.m-belly{fill:#d4f1d8}
.m-foot{fill:#258a45}
.m-crest{fill:#1f7a3c}
.m-eye{fill:#fff; stroke:#258a45; stroke-width:2}
.m-pupil{fill:#243029}
.m-shine{fill:#fff}
.m-cheek{fill:#ff8fa3; opacity:.55}
.m-nostril{fill:#1f6b35}
.m-mouth{stroke:#243029; stroke-width:3.2; stroke-linecap:round; fill:#9b2f33}
.m-happy{fill:#9b2f33}
.m-tooth{fill:#fff; stroke:none}
.m-neutral{fill:none}
/* standaard: neutraal */
.m-happy,.m-sad{display:none}
.mascot.is-happy .m-neutral{display:none}
.mascot.is-happy .m-happy{display:block}
.mascot.is-happy .m-pupil{transform:translateY(-1px)}
.mascot.is-sad .m-neutral{display:none}
.mascot.is-sad .m-sad{display:block}
.mascot.is-bounce{animation:bounce .5s ease}
@keyframes bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(0)}75%{transform:translateY(-6px)}}
.mascot.is-shake{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ====================================================================
   Beheer
   ==================================================================== */
.admin-wrap{max-width:920px; margin:0 auto; padding:8px clamp(16px,4vw,40px) 50px}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 22px}
.tab{font-family:var(--display); font-weight:500; text-decoration:none; padding:.6em 1.15em;
  border-radius:999px; background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.tab.active{background:var(--green); color:#fff}
.panel{padding:26px}
.panel h2{font-size:1.3rem}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.row .field{flex:1; min-width:200px; margin-bottom:0}
.list-table{width:100%; border-collapse:collapse; margin-top:14px}
.list-table th,.list-table td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.list-table th{font-family:var(--display); font-weight:600; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em}
.tag{display:inline-block; background:#eef4f0; color:var(--muted); border-radius:999px; padding:.15em .7em; font-size:.8rem; font-weight:700}
.tag.ok{background:var(--green-l); color:var(--green-d)}
.flash{padding:12px 16px; border-radius:13px; margin:0 0 18px; font-weight:700}
.flash.ok{background:var(--green-l); color:var(--green-d)}
.flash.err{background:var(--coral-l); color:var(--coral-d)}
.flash.info{background:#e7f0fd; color:#2c5aa0}
.login-card{max-width:380px; margin:40px auto; padding:34px; text-align:center}
.login-card .mascot{width:110px}
.pin-input{letter-spacing:.4em; text-align:center; font-size:1.6rem; font-family:var(--display)}
.help{background:#f7faf8; border:1px dashed var(--line); border-radius:13px; padding:14px 18px; color:var(--muted); font-size:.9rem}
.help code{background:#eef4f0; padding:.1em .4em; border-radius:6px; color:var(--ink); font-family:ui-monospace,monospace}
.answer-edit{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.answer-edit input[type=text]{flex:1}
.mini{font-size:.85rem; color:var(--muted)}
.actions-inline{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- responsief ---------- */
@media (max-width:760px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-mascot .mascot{width:150px}
  .answers{grid-template-columns:1fr}
  .quiz-stage{grid-template-columns:1fr}
  .stage-mascot{display:none}
  .question-box{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:8px}

/* ---------- Modale vensters (alert/confirm) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(31,45,36,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .12s ease;
}
.modal-overlay.show{opacity:1}
.modal-overlay[hidden]{display:none}
.modal-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 24px 60px -20px rgba(31,45,36,.5);
  width:100%; max-width:400px; padding:26px 24px 22px;
  text-align:center;
  transform:translateY(8px) scale(.97); transition:transform .14s ease;
}
.modal-overlay.show .modal-box{transform:none}
.modal-icon{font-size:2.4rem; line-height:1; margin-bottom:8px}
.modal-title{font-family:var(--display); font-size:1.3rem; margin:0 0 .3em}
.modal-msg{color:var(--ink); margin:0 0 20px; line-height:1.45; white-space:pre-line}
.modal-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.modal-actions .btn{min-width:120px}
@media (max-width:520px){
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .modal-box{transition:none}
}