/* BASics - één smalle kolom met speelkaarten, grote tapknoppen en een geel sticker-label */

:root{
  --bg:#FFF8F4;
  --card:#FFFFFF;
  --ink:#33232B;
  --muted:#8A7A80;
  --line:#F0E2DF;
  --accent:#C65A6E;
  --accent-ink:#FFFFFF;
  --sticker:#EFB08C;
  --sticker-ink:#4A2A2E;
  --green:#1E8E5A;
  --green-bg:#E1F3EA;
  --red:#C8404A;
  --red-bg:#FBE7E5;
  --soft:#FBF1ED;
  --font-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:"Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#241A20; --card:#2E232B; --ink:#F7EDF1; --muted:#B7A5AD; --line:#3E2E35;
    --accent:#E87B91; --accent-ink:#3A1B23; --sticker:#EFB08C; --sticker-ink:#4A2A2E;
    --green:#55C88F; --green-bg:#173A2B; --red:#FF807F; --red-bg:#43202A; --soft:#3A2C33;
  }
}
:root[data-theme="dark"]{
  --bg:#241A20; --card:#2E232B; --ink:#F7EDF1; --muted:#B7A5AD; --line:#3E2E35;
  --accent:#E87B91; --accent-ink:#3A1B23; --sticker:#EFB08C; --sticker-ink:#4A2A2E;
  --green:#55C88F; --green-bg:#173A2B; --red:#FF807F; --red-bg:#43202A; --soft:#3A2C33;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{min-height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:20px 40px;
}
.wrap{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.top{display:flex; align-items:center; gap:12px}
.bar{flex:1; height:8px; background:var(--line); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .35s ease}
.count{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:44px; text-align:right}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:26px 22px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 10px 30px -18px rgba(42,27,46,.28);
}
.chip{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--sticker); color:var(--sticker-ink); padding:5px 10px; border-radius:8px; transform:rotate(-2deg);
}
h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:clamp(30px, 8vw, 40px); line-height:1.05; font-weight:800}
h2{font-size:clamp(22px, 5.6vw, 27px); line-height:1.2; font-weight:700}
h3{font-size:18px; line-height:1.25}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.opts{display:grid; gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:380px){.opts.two{grid-template-columns:1fr}}
button{font:inherit; cursor:pointer}
.opt{
  border:2px solid var(--line); background:var(--soft); color:var(--ink);
  border-radius:14px; padding:14px 14px; font-weight:700; font-size:16px; text-align:center;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.opt:hover:not(:disabled){border-color:var(--accent); transform:translateY(-1px)}
.opt:focus-visible,.btn:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.opt:disabled{cursor:default}
.opt.picked{border-color:var(--accent); background:var(--card)}
.opt.bas::after{content:" · Bas"; font-weight:600; color:var(--accent)}
.opt.green{border-color:var(--green); background:var(--green-bg); color:var(--green)}
.opt.red{border-color:var(--red); background:var(--red-bg); color:var(--red)}
.opt.green.picked,.opt.red.picked{box-shadow:inset 0 0 0 2px currentColor}
.reveal{
  border-radius:16px; padding:16px; background:var(--soft); display:flex; flex-direction:column; gap:8px;
  animation:pop .3s ease;
}
.verdict{font-family:var(--font-display); font-weight:800; font-size:22px}
.verdict.good{color:var(--green)}
.verdict.bad{color:var(--red)}
.reveal.same{background:var(--green-bg); color:var(--green)}
.btn{
  border:0; border-radius:14px; padding:15px 18px; font-weight:700; font-size:17px;
  background:var(--accent); color:var(--accent-ink);
}
.btn.ghost{background:transparent; color:var(--accent); border:2px solid var(--line)}
.btn:disabled{opacity:.55; cursor:default}
.row{display:flex; gap:10px; flex-wrap:wrap}
.row .btn{flex:1 1 140px}
/* swipe */
.swipe-card{
  border:2px dashed var(--line); border-radius:18px; padding:22px 16px; text-align:center;
  touch-action:pan-y; user-select:none; display:flex; flex-direction:column; gap:14px;
}
.vs{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.vs b{font-family:var(--font-display); font-size:clamp(24px, 7vw, 32px)}
.vs span{color:var(--muted); font-size:14px}
.timer{height:6px; background:var(--line); border-radius:99px; overflow:hidden}
.timer i{display:block; height:100%; background:var(--sticker); width:100%}
.dots{display:flex; gap:6px; justify-content:center}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.dots i.on{background:var(--accent)}
label{font-weight:700; font-size:15px}
input,textarea,select{
  font:inherit; width:100%; border:2px solid var(--line); border-radius:12px; padding:12px;
  background:var(--soft); color:var(--ink);
}
textarea{min-height:96px; resize:vertical}
.field{display:flex; flex-direction:column; gap:6px}
.scores{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px}
.score{background:var(--soft); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.score b{font-family:var(--font-display); font-size:32px; font-variant-numeric:tabular-nums; line-height:1.1}
.score span{font-size:13px; color:var(--muted)}
.label-big{font-family:var(--font-display); font-weight:700; font-size:21px; text-wrap:balance}
#summary{font-size:14px; min-height:200px; font-family:var(--font-body)}
.toast{font-size:14px; color:var(--green); font-weight:700; min-height:1.4em}
.toast.err{color:var(--red)}
.fine{font-size:13px; color:var(--muted); text-align:center}
.sticker{display:inline-block; background:var(--sticker); color:var(--sticker-ink); font-family:var(--font-display); font-weight:800; border-radius:10px; padding:2px 10px; transform:rotate(-3deg)}

/* geo-kaart */
.geo-map{
  position:relative; aspect-ratio:2/1; background:var(--soft);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:crosshair;
  touch-action:pan-y; user-select:none;
}
.geo-map.zoomed{touch-action:none; cursor:grab}
.geo-inner{position:absolute; inset:0}
.geo-map svg{display:block; width:100%; height:100%}
.geo-map svg path{fill:var(--sticker); stroke:var(--card); stroke-width:.75; vector-effect:non-scaling-stroke}
.geo-map svg path.geo-correct{fill:var(--accent)}
.geo-map svg path.geo-wrong{fill:var(--red)}
.geo-zoom{position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2}
.geo-zoom-btn{font:inherit; font-size:13px; font-weight:700; padding:6px 10px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; cursor:pointer; line-height:1}
.geo-zoom-btn:hover{border-color:var(--accent)}
.geo-dot{position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--card); box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.geo-dot.geo-me{background:var(--red)}
.geo-dot.geo-real{background:var(--green)}

/* admin */
.admin-max{max-width:960px}
#content{display:flex; flex-direction:column; gap:16px}
#dashboard{display:flex; flex-direction:column; gap:16px}

.admin-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 2px; background:var(--bg);
}
.admin-bar-note{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.admin-actions{margin-left:auto; display:flex; gap:8px}
.admin-actions .btn{padding:10px 14px; font-size:14px}

.login-card{max-width:440px; margin:8vh auto 0; text-align:center; gap:14px}
.login-card form{display:flex; flex-direction:column; gap:14px; margin-top:4px; text-align:left}

.sec-head{display:flex; flex-direction:column; gap:3px}
.sec-head h2{font-size:24px}
.sec-head h3{font-size:18px}
.sec-head h2,.sec-head h3{position:relative; padding-left:14px}
.sec-head h2::before,.sec-head h3::before{content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:99px; background:var(--sticker)}
.sec-head .note{margin:0}

.admin-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; align-items:start}
.admin-search{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){.admin-search{grid-template-columns:1fr}}
#perQuestion,#qResults,#ownTexts,#bonusTexts{display:flex; flex-direction:column; gap:14px}
#perQuestion .reveal,#qResults .reveal,#ownTexts .reveal,#bonusTexts .reveal{gap:10px}

.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.stat{background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:3px}
.stat b{font-family:var(--font-display); font-size:30px; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--accent)}
.stat span{font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em}

.hbar{display:grid; grid-template-columns:minmax(0,1fr) 2fr auto; align-items:center; gap:10px; margin-block:7px}
.hbar .label{min-width:0; font-size:14px; line-height:1.3}
.hbar .num{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:58px; text-align:right}
.hbar .track{height:10px; background:var(--line); border-radius:99px; overflow:hidden}
.hbar .track i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease}
.hbar .track i.good{background:var(--green)}
.hbar .track i.bad{background:var(--red)}

.tag{display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:99px; background:var(--soft); color:var(--muted); font-variant-numeric:tabular-nums; border:1px solid var(--line)}
.tag.ok{background:var(--green-bg); color:var(--green); border-color:transparent}
.tag.no{background:var(--red-bg); color:var(--red); border-color:transparent}
.bas-tag{background:var(--sticker); color:var(--sticker-ink); border-color:transparent}
.note{font-size:13px; color:var(--muted)}

pre.summary{white-space:pre-wrap; word-break:break-word; font:inherit; font-size:13px; background:var(--soft); border-radius:12px; padding:14px; margin:0}

details.result{border:1px solid var(--line); border-radius:14px; padding:10px 14px; margin-block:8px; background:var(--card); transition:border-color .12s ease}
details.result:hover{border-color:var(--accent)}
details.result[open]{background:var(--soft)}
details.result summary{cursor:pointer; font-weight:700; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
details.result summary::-webkit-details-marker{display:none}
details.result summary::before{content:"\25B8"; color:var(--accent); flex:none; transition:transform .2s ease}
details.result[open] summary::before{transform:rotate(90deg)}
details.result .body{margin-top:12px; display:flex; flex-direction:column; gap:10px}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
td b{font-variant-numeric:tabular-nums}

audio{width:100%; border-radius:10px}

/* quiz bewerken */
.editor-block{border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden}
.editor-block > summary{cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; font-family:var(--font-display); display:flex; align-items:center; gap:8px}
.editor-block > summary::-webkit-details-marker{display:none}
.editor-block > summary::before{content:"\25B8"; color:var(--accent); transition:transform .2s ease}
.editor-block[open] > summary::before{transform:rotate(90deg)}
.editor-block[open] > summary{border-bottom:1px solid var(--line)}
.editor-block > summary .note{margin-left:auto; font-weight:600}
.editor-body{padding:16px; display:flex; flex-direction:column; gap:14px}
#qEditor{padding:6px 16px 16px}
#colorEditor{padding:16px; display:flex; flex-direction:column; gap:14px}

.editor-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px}

.color-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px}
.color-row{display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,110px) 34px; align-items:center; gap:8px}
.color-row label{min-width:0}
.color-row input[type="color"]{width:44px; height:34px; padding:2px; border-radius:10px; cursor:pointer}
.color-row input[type="text"]{padding:8px 10px}

.q-section{border-top:1px dashed var(--line); padding-top:12px; margin-top:12px}
.q-section:first-child{border-top:0; margin-top:0; padding-top:0}
.q-section h3{font-family:var(--font-display); font-size:16px; margin-bottom:8px}
.q-item{border:1px solid var(--line); border-radius:12px; margin-block:7px; background:var(--soft)}
.q-item > summary{cursor:pointer; list-style:none; padding:10px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.q-item > summary::-webkit-details-marker{display:none}
.q-item > summary::before{content:"\25B8"; color:var(--accent); flex:none; transition:transform .2s ease}
.q-item[open] > summary::before{transform:rotate(90deg)}
.q-type{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--sticker); color:var(--sticker-ink); padding:2px 8px; border-radius:8px; flex:none}
.q-desc{font-size:14px; min-width:0; color:var(--muted)}
.q-body{padding:12px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line)}
.q-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px}

.sub-block{display:flex; flex-direction:column; gap:8px; border:1px dashed var(--line); border-radius:12px; padding:10px}
.sub-row{display:grid; grid-template-columns:auto minmax(0,1fr) 34px; align-items:center; gap:8px}
.sub-row.swipe-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto 34px}
.sub-row input[type="text"],.sub-row select{padding:8px 10px}
.sub-row .note{white-space:nowrap}

button.mini{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--accent); font-weight:800; line-height:1; flex:none}
button.mini:hover{border-color:var(--accent)}
.btn.mini-btn{padding:8px 12px; font-size:13px; flex:0 1 auto}
.check{display:flex; align-items:center; gap:8px; padding:2px}
.check input{width:auto}

.rec-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--red); margin-right:6px; animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
@keyframes pop{from{transform:scale(.97); opacity:.4} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}