/* Kluis van Vonk. Tokens and base styles: /assets/academy.css. Layout: één kolom, telefoon eerst; een polsbandje met 5 gaten houdt de gevonden cijfers bij */
/* polsbandje */
.band{background:var(--band);color:var(--band-ink);border-radius:999px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.band::before,.band::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--bg);transform:translateY(-50%)}
.band::before{left:-7px}.band::after{right:-7px}
.band .lbl{font-family:var(--f-display);font-weight:800;font-size:.95rem;letter-spacing:.02em}
.holes{display:flex;gap:6px}
.hole{width:34px;height:40px;border-radius:9px;background:rgba(0,0,0,.18);display:grid;place-items:center;font-family:var(--f-mono);font-size:1.25rem}
.hole.got{background:var(--bg);color:var(--ink);animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.hud b{color:var(--ink)}

/* niveaukeuze */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lvl{border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.lvl strong{font-family:var(--f-display);font-size:1.7rem;font-weight:800}
.lvl span{font-size:.82rem;color:var(--muted)}
.lvl[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}

/* kamers */
.rooms{display:grid;grid-template-columns:1fr;gap:10px}
.room{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.room .num{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-mono);font-size:1.2rem;background:var(--bg);border:2px dashed var(--line)}
.room.done .num{background:var(--ok-bg);color:var(--ok);border:2px solid var(--ok)}
.room .state{font-size:.85rem;font-weight:700;color:var(--muted)}
.room.done .state{color:var(--ok)}
.room small{display:block;color:var(--muted);font-size:.88rem}
.kluisbtn{background:var(--ink);color:var(--bg)}

/* opdracht */
.progress{display:flex;gap:6px}
.progress i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.progress i.on{background:var(--accent)}
.q{font-size:1.2rem;font-weight:700;line-height:1.4}
.q mark{background:none;color:var(--accent);border-bottom:2px dashed var(--accent)}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:13px 15px;font-size:1.02rem}
.opt:hover{border-color:var(--band)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.memo{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--band);border-radius:4px 12px 12px 4px;padding:16px 18px;font-size:.98rem;display:flex;flex-direction:column;gap:8px}
.memo .from{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.hint{border:2px dashed var(--band);border-radius:12px;padding:12px 14px;font-size:.96rem}

/* zinnen bouwen */
.line{min-height:62px;border-bottom:3px solid var(--ink);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;align-items:flex-end}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{border:2px solid var(--band);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px;font-weight:700}
.tile.fixed{background:var(--band);color:var(--band-ink);cursor:default}
.tile.placed{background:var(--bg)}

/* kluis */
.display{font-family:var(--f-mono);font-size:2.4rem;letter-spacing:.3em;text-align:center;background:var(--ink);color:var(--bg);border-radius:12px;padding:14px 0;font-variant-numeric:tabular-nums}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad button{font-family:var(--f-mono);font-size:1.5rem;padding:14px 0;border-radius:12px;border:2px solid var(--line);background:var(--surface)}
.pad button.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-family:var(--f-body);font-size:1rem;font-weight:700}

/* einde */
.ticket{background:var(--surface);border:2px solid var(--ink);border-radius:18px;overflow:hidden}
.ticket .top{background:var(--accent);color:var(--accent-ink);padding:18px}
.ticket .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px dashed var(--ink)}
.ticket .stats div{padding:14px 10px;text-align:center;border-right:1px solid var(--line)}
.ticket .stats div:last-child{border-right:0}
.ticket .stats b{display:block;font-family:var(--f-mono);font-size:1.4rem;font-variant-numeric:tabular-nums}
.ticket .stats span{font-size:.8rem;color:var(--muted)}

/* docent */
.key{font-size:.9rem;display:flex;flex-direction:column;gap:10px}
.key details{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.key summary{font-weight:700;cursor:pointer}
.key ol{margin:8px 0 0;padding-left:20px}