:root {
  --bg0:#05070f; --bg1:#0b1026; --bg2:#1b1f4b;
  --panel:#131a3d; --panel2:#1c2553; --line:#2d3770;
  --ink:#f1f5ff; --muted:#9aa4c7;
  --gold:#ffd23f; --gold-d:#b8860b; --red:#e63946; --ok:#4ade80; --bad:#ff4d6d; --fix:#ffb703;
  --comic:'Bangers', Impact, 'Arial Black', sans-serif;
  --mono:Consolas, Menlo, 'Courier New', monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; }
body {
  background:radial-gradient(ellipse at 50% -10%, #2b2f73 0%, var(--bg1) 55%, var(--bg0) 100%);
  color:var(--ink); font-family:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight:700;
}
#stars { position:fixed; inset:0; pointer-events:none; }
#stars i { position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.5; animation:twinkle 3s infinite alternate; }
@keyframes twinkle { to { opacity:.1; } }
#app { position:fixed; inset:0; overflow:auto; transition:filter .4s; }
#app.dim { filter:blur(3px) brightness(.5); }
body.impact #fx, body.impact #app, body.impact #overlay { filter:invert(1) contrast(1.4) !important; transition:none !important; }
#fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60; }
#overlay { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; padding:16px; overflow:auto;
  background:rgba(3,5,20,.78); backdrop-filter:blur(5px); }
#overlay.show { display:flex; }
#overlay > * { margin:auto; }
#toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 150%); z-index:80; background:#2a1f00; border:2px solid var(--gold);
  color:#fff; padding:14px 20px; border-radius:14px; max-width:92vw; transition:transform .3s, visibility .3s; text-align:center; line-height:1.4; visibility:hidden; }
#toast.show { transform:translate(-50%, 0); visibility:visible; }
.comic { font-family:var(--comic); letter-spacing:1.5px; font-weight:400; }

button { font:inherit; font-weight:900; cursor:pointer; border:0; border-radius:14px; padding:11px 20px; font-size:17px;
  color:#1a1033; background:var(--gold); box-shadow:0 5px 0 var(--gold-d); transition:transform .08s, box-shadow .08s, filter .15s; }
button:hover { filter:brightness(1.08); }
button:active { transform:translateY(3px); box-shadow:0 2px 0 var(--gold-d); }
button.ghost { background:rgba(255,255,255,.08); color:var(--ink); box-shadow:0 4px 0 rgba(0,0,0,.35); }
button.red { background:var(--red); color:#fff; box-shadow:0 5px 0 #8d1b25; }
button.big { font-size:22px; padding:14px 30px; }
button small { font-size:.6em; opacity:.7; font-weight:800; }
button:disabled { cursor:not-allowed; }
.pulse { animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { transform:scale(1.05); } }
.kbd { display:inline-block; min-width:1.6em; padding:1px 7px; border-radius:6px; background:#fff; color:#111; font-family:var(--mono); text-align:center; box-shadow:0 2px 0 #999; }
.panel { background:linear-gradient(180deg, var(--panel2), var(--panel)); border:2px solid var(--line); border-radius:24px; padding:26px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.shake { animation:shake .3s; }
@keyframes shake { 20% { transform:translateX(-8px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(5px); } }

/* ---------- welkom ---------- */
.welcome { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; }
.logo { font-size:clamp(56px, 11vw, 130px); color:var(--gold); line-height:1; transform:rotate(-3deg);
  text-shadow:4px 4px 0 var(--red), 8px 8px 0 #000; animation:float 3s ease-in-out infinite; }
@keyframes float { 50% { transform:rotate(-3deg) translateY(-8px); } }
.sub { font-size:20px; color:var(--muted); margin:14px 0 26px; }
.welcome .panel { width:min(640px, 100%); display:flex; flex-direction:column; gap:12px; }
.lbl { font-size:18px; text-align:left; }
#w-name { font:inherit; font-size:26px; padding:12px 16px; border-radius:14px; border:3px solid var(--line); background:#0b1030; color:#fff; outline:none; }
#w-name:focus { border-color:var(--gold); }
.avatars { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:10px; }
.av { background:#0f1538; box-shadow:none; border:3px solid var(--line); color:var(--ink); display:flex; flex-direction:column; align-items:center; padding:10px 4px; }
.av span { font-size:40px; }
.av small { font-size:12px; opacity:.8; }
.av.sel { border-color:var(--gold); background:#2a2555; transform:scale(1.05); }

/* ---------- header ---------- */
.hdr { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px; padding:12px 20px; flex-wrap:wrap;
  background:rgba(8,11,32,.85); backdrop-filter:blur(8px); border-bottom:2px solid var(--line); }
.who { display:flex; align-items:center; gap:10px; }
.who b { font-size:20px; display:block; }
.who small { color:var(--muted); }
.hdr-av { font-size:40px; }
.hdr-stats { display:flex; gap:10px; flex:1; justify-content:center; flex-wrap:wrap; }
.stat { display:flex; align-items:center; gap:6px; background:#0f1538; border:2px solid var(--line); border-radius:999px; padding:6px 14px; font-size:17px; }
.stat b { color:var(--gold); }
.mini-stone { width:14px; height:14px; border-radius:50%; border:2px solid var(--c); opacity:.35; }
.mini-stone.have { background:var(--c); opacity:1; box-shadow:0 0 10px var(--c); }
.hdr-btns { display:flex; gap:8px; }

/* ---------- kaart ---------- */
.map { max-width:1100px; margin:0 auto; padding:20px 16px 60px; display:flex; flex-direction:column; gap:22px; }
.quest { border-radius:24px; padding:18px; background:linear-gradient(135deg, color-mix(in srgb, var(--qc) 22%, #0d1233), #0d1233 70%);
  border:2px solid color-mix(in srgb, var(--qc) 60%, transparent); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.quest.locked { filter:grayscale(.8) brightness(.7); }
.q-head { display:flex; gap:16px; align-items:center; }
.q-icon { font-size:58px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.q-info { flex:1; }
.q-nr { color:var(--qc); font-size:14px; text-transform:uppercase; letter-spacing:2px; }
.q-info h2 { margin:0; font-size:36px; }
.q-info p { margin:4px 0 0; color:#cfd6f5; font-size:15px; max-width:700px; }
.q-prog { font-family:var(--comic); font-size:28px; color:var(--qc); }
.q-path { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }
.node { position:relative; width:118px; background:transparent; box-shadow:none; padding:4px; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:4px; }
.node:active { transform:none; box-shadow:none; }
.n-face { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-family:var(--comic);
  background:#1a2150; border:4px solid var(--qc); box-shadow:0 6px 0 rgba(0,0,0,.4); transition:transform .15s; }
.node:hover:not(:disabled) .n-face { transform:scale(1.1) rotate(-4deg); }
.node.done .n-face { background:var(--qc); color:#10142e; }
.node.lock .n-face { border-color:#39406a; background:#141936; font-size:24px; }
.node.lock { opacity:.55; }
.node.boss .n-face { width:84px; height:84px; font-size:44px; border-color:#ff4d6d; background:#3a0d1e; border-radius:22px; }
.node.boss.done .n-face { background:#ff4d6d; }
.node.cur .n-face { animation:curglow 1s infinite alternate; }
@keyframes curglow { from { box-shadow:0 0 0 0 var(--gold), 0 6px 0 rgba(0,0,0,.4); } to { box-shadow:0 0 0 8px rgba(255,210,63,.35), 0 0 30px var(--gold); } }
.n-gift { position:absolute; top:-8px; right:14px; font-size:28px; animation:bounce .8s infinite alternate; }
@keyframes bounce { to { transform:translateY(-8px) rotate(10deg); } }
.n-stars { color:var(--gold); font-size:16px; letter-spacing:2px; min-height:18px; }
.n-title { font-size:12px; text-align:center; color:#cfd6f5; line-height:1.2; }

/* ---------- intro ---------- */
.intro { max-width:1000px; margin:0 auto; padding:20px 16px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; position:relative; }
.back { position:absolute; left:16px; top:20px; }
.i-quest { color:var(--qc); text-transform:uppercase; letter-spacing:2px; font-size:14px; margin-top:6px; }
.i-boss { font-size:110px; animation:bossbob 1.2s ease-in-out infinite; filter:drop-shadow(0 0 30px #ff4d6d); }
@keyframes bossbob { 50% { transform:translateY(-10px) scale(1.05); } }
.intro h1 { margin:0; font-size:clamp(40px, 6vw, 64px); color:var(--gold); text-shadow:3px 3px 0 #000; }
.i-text { font-size:19px; max-width:760px; line-height:1.5; margin:0; color:#e3e8ff; }
.newkeys { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.nk { background:#0f1538; border:3px solid var(--c); border-radius:16px; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.nk-char { font-family:var(--mono); font-size:44px; font-weight:900; color:var(--c); min-width:40px; }
.nk-f { font-size:14px; text-align:left; color:#e3e8ff; }
.i-goal { font-size:18px; background:#0f1538; padding:8px 18px; border-radius:999px; border:2px solid var(--line); }
.i-surprise { font-size:18px; color:#ffe9a8; background:linear-gradient(90deg, #3b2a00, #2a1540); padding:10px 20px; border-radius:16px; border:2px dashed var(--gold); }

/* ---------- toetsenbord ---------- */
.kb { display:flex; flex-direction:column; gap:5px; padding:10px; background:#0c1130; border-radius:16px; border:2px solid var(--line);
  width:min(880px, 100%); margin:0 auto; }
.kb-row { display:flex; gap:5px; }
.kb-row:last-child { justify-content:center; }
.key { flex:var(--w) 1 0; min-width:0; height:44px; border-radius:8px; background:#222a58; border-bottom:4px solid var(--fc);
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; color:#e6ebff; transition:background .1s, transform .08s, opacity .2s; }
.key[data-code="Space"] { flex:0 0 46%; }
.k-main { font-size:17px; font-weight:900; }
.k-sym { font-size:15px; opacity:.7; }
.k-up, .k-lo { font-size:12px; line-height:1.15; font-family:var(--mono); }
.k-up { opacity:.65; }
.key.bump .k-main::after { content:''; position:absolute; bottom:7px; left:50%; width:12px; height:3px; margin-left:-6px; background:currentColor; border-radius:2px; opacity:.8; }
.key.unknown { opacity:.3; }
.key.next { background:var(--fc); color:#111; opacity:1; box-shadow:0 0 20px var(--fc); animation:keyglow .7s infinite alternate; }
@keyframes keyglow { to { box-shadow:0 0 6px var(--fc); transform:translateY(-2px); } }
.key.press-ok { transform:translateY(3px); background:#3b4a8f; }
.key.press-bad { background:var(--bad) !important; color:#fff; }

.hands { display:block; width:min(380px, 60%); margin:4px auto 0; }
.hands .palm { fill:#1d2450; stroke:#343e7a; stroke-width:2; }
.hands .finger { fill:#262f63; stroke:#3d4787; stroke-width:2; transition:fill .15s; }
.hands .finger.on { fill:var(--fc); stroke:#fff; filter:drop-shadow(0 0 8px var(--fc)); }

/* ---------- typen ---------- */
.typing { max-width:960px; margin:0 auto; padding:10px 16px 16px; display:flex; flex-direction:column; gap:8px; position:relative; min-height:100%; }
.topbar { display:flex; align-items:center; gap:12px; }
.t-title { flex:1; font-size:18px; color:var(--qc); }
.meters { display:flex; gap:10px; }
.meters span { background:#0f1538; border:2px solid var(--line); padding:4px 12px; border-radius:999px; font-size:15px; color:var(--muted); }
.meters b { color:#fff; font-size:18px; }
.progress { height:10px; border-radius:999px; background:#0f1538; overflow:hidden; border:1px solid var(--line); }
#prog { height:100%; width:0; background:linear-gradient(90deg, var(--ok), var(--gold)); transition:width .15s; }
.textbox { position:relative; background:#0c1130; border:3px solid var(--line); border-radius:20px; padding:20px 26px 16px; min-height:128px; }
.line { font-family:var(--mono); white-space:pre; overflow:hidden; }
.line.cur { font-size:clamp(26px, 3.7vw, 42px); letter-spacing:1px; }
.line.next { font-size:clamp(17px, 2.2vw, 24px); color:#5d6899; margin-top:10px; min-height:1.2em; }
.ch { border-radius:6px; padding:0 1px; }
.ch.ok { color:var(--ok); }
.ch.fix { color:var(--fix); }
.ch.todo { color:#e8edff; }
.ch.cur { background:var(--gold); color:#111; box-shadow:0 0 16px rgba(255,210,63,.6); animation:blink 1s infinite; }
.ch.sp.cur { background:rgba(255,210,63,.55); }
.ch.bad { background:var(--bad) !important; color:#fff !important; animation:none; }
@keyframes blink { 50% { box-shadow:0 0 2px rgba(255,210,63,.3); } }
.start-hint { position:absolute; right:18px; bottom:8px; font-size:13px; color:var(--muted); animation:pulse 1.4s infinite; }
.hint { text-align:center; font-size:18px; min-height:28px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.hint .dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.warn { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:var(--red); padding:10px 18px; border-radius:12px; display:none; z-index:10; }
.warn.show { display:block; }

/* baas */
.arena { position:relative; display:flex; align-items:center; justify-content:space-around; background:linear-gradient(90deg, #0d2340, #3a0d1e);
  border-radius:20px; padding:8px 20px; border:2px solid #5a2240; }
.fighter { display:flex; flex-direction:column; align-items:center; }
.f-emoji { font-size:60px; line-height:1.1; }
.bad .f-emoji { font-size:74px; filter:drop-shadow(0 0 16px #ff4d6d); animation:bossbob 1.4s ease-in-out infinite; }
.f-emoji.hurt { animation:hurt .3s !important; }
@keyframes hurt { 0% { transform:translateX(0); filter:brightness(3); } 30% { transform:translateX(14px) rotate(8deg); } 60% { transform:translateX(-8px); } 100% { transform:none; } }
.f-name { font-size:15px; }
.vs { font-size:44px; color:var(--gold); text-shadow:3px 3px 0 var(--red); }
.hpbar { position:relative; width:200px; height:18px; border-radius:999px; background:#2a0a14; border:2px solid #ff4d6d; overflow:hidden; margin-top:4px; }
#hp { height:100%; width:100%; background:linear-gradient(90deg, #ff006e, #ff4d6d); transition:width .25s; }
#hp-t { position:absolute; inset:0; text-align:center; font-size:12px; line-height:15px; }
.bubble { position:absolute; right:8%; top:-12px; background:#fff; color:#111; padding:6px 14px; border-radius:14px; font-size:16px; opacity:0; transform:scale(.6); transition:.25s; }
.bubble.show { opacity:1; transform:scale(1); }
.timer { display:flex; align-items:center; gap:10px; }
.tbar { flex:1; height:12px; border-radius:999px; background:#0f1538; overflow:hidden; border:1px solid var(--line); }
#tbar { height:100%; width:100%; background:linear-gradient(90deg, #06d6a0, #ffd23f); transition:width .1s linear; }
#tbar.low { background:linear-gradient(90deg, #ff006e, #ff4d6d); animation:blink .5s infinite; }
.is-boss .hands { display:none; }

/* ---------- resultaat ---------- */
.result { width:min(720px, 100%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; animation:popin .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes popin { from { transform:scale(.5); opacity:0; } }
.res-title { font-size:clamp(48px, 8vw, 80px); color:var(--gold); line-height:1; text-shadow:4px 4px 0 var(--red), 7px 7px 0 #000; }
.res-sub { color:var(--muted); font-size:18px; margin-top:-6px; }
.stars { font-size:64px; letter-spacing:10px; line-height:1; }
.stars span { color:#2d3566; display:inline-block; }
.stars span.on { color:var(--gold); text-shadow:0 0 20px var(--gold); animation:starpop .5s both; }
@keyframes starpop { from { transform:scale(0) rotate(-180deg); } 70% { transform:scale(1.4); } }
.stats { display:flex; gap:12px; }
.stats div { background:#0f1538; border:2px solid var(--line); border-radius:16px; padding:8px 18px; display:flex; flex-direction:column; }
.stats b { font-size:28px; }
.stats span { font-size:13px; color:var(--muted); }
.loot { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.loot-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.loot-lbl { font-size:14px; color:var(--gold); text-transform:uppercase; letter-spacing:1px; }
.bounty-up { font-family:var(--comic); font-size:30px; color:var(--gold); letter-spacing:1px; }
.bounty-plus { color:var(--ok); }
.big-stone { width:70px; height:80px; background:var(--c); clip-path:polygon(50% 0, 100% 30%, 82% 88%, 50% 100%, 18% 88%, 0 30%); filter:drop-shadow(0 0 16px var(--c)); animation:gemspin 2s ease-in-out infinite; }
@keyframes gemspin { 50% { transform:scaleX(.6); } }
.stone-name { font-size:16px; }
.weak { font-size:16px; }
.teaser { display:flex; gap:14px; align-items:center; text-align:left; background:linear-gradient(90deg, #3b2a00, #2a1540); border:2px dashed var(--gold); border-radius:16px; padding:10px 18px; }
.mystery { font-size:44px; animation:wiggle 1s infinite; }
@keyframes wiggle { 25% { transform:rotate(-12deg) scale(1.1); } 75% { transform:rotate(12deg) scale(1.1); } }
.btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.fail-e { font-size:90px; animation:bossbob 1s infinite; }
.reason { font-size:19px; margin:0; max-width:560px; line-height:1.45; }
.tip { color:#cfe7ff; margin:0; }
.still { color:#ffe9a8; margin:0; }
.video-btn { background:linear-gradient(90deg, #ff006e, #fb5607); color:#fff; box-shadow:0 5px 0 #7a0033; animation:pulse 1s infinite; font-size:20px; }
.video-wrap { position:fixed; inset:0; z-index:90; background:#000; display:flex; align-items:center; justify-content:center; }
.video-wrap video { max-width:100%; max-height:100%; }
.v-close { position:absolute; top:16px; right:16px; }

/* ---------- kaarten ---------- */
.card { position:relative; width:150px; height:210px; border-radius:16px; padding:10px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(160deg, #3b4a8f, #1b2250); border:4px solid #8ea0e6; box-shadow:0 8px 20px rgba(0,0,0,.5); }
.card.rar-z { background:linear-gradient(160deg, #1f6f8b, #0b2e3f); border-color:#5ee0ff; }
.card.rar-e { background:linear-gradient(160deg, #7b2cbf, #240046); border-color:#e0aaff; }
.card.rar-l { background:linear-gradient(160deg, #e85d04, #6a040f); border-color:#ffd23f; box-shadow:0 0 25px rgba(255,210,63,.6); }
.card-emoji { font-size:64px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.card-name { font-size:22px; line-height:1; text-align:center; }
.card-power { font-size:12px; color:#dfe6ff; text-align:center; }
.card-rar { position:absolute; top:6px; left:0; right:0; text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:2px; opacity:.85; }
.card-shine { position:absolute; inset:-50%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); animation:shine 2.8s infinite; pointer-events:none; }
@keyframes shine { from { transform:translateX(-60%); } to { transform:translateX(60%); } }
.card.flip-in { animation:flipin 1s cubic-bezier(.2, 1.4, .4, 1) .4s both; }
@keyframes flipin { from { transform:rotateY(540deg) scale(.2); opacity:0; } }
.card.locked { background:#141936; border-color:#2d3566; opacity:.6; }

/* ---------- schatkamer ---------- */
.treasure { max-width:1100px; margin:0 auto; padding:20px 16px 60px; position:relative; }
.treasure h1 { text-align:center; font-size:56px; margin:6px 0 16px; color:var(--gold); }
.treasure h2 { font-size:32px; }
.tr-top { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.poster { width:280px; background:#f0d9a4; color:#3b2412; padding:18px; text-align:center; font-family:Georgia, 'Times New Roman', serif; font-weight:900;
  box-shadow:0 12px 30px rgba(0,0,0,.6); transform:rotate(-2deg); border:3px solid #7a5230; outline:3px solid #f0d9a4; outline-offset:-12px; }
.p-w { font-size:46px; line-height:1; }
.p-img { font-size:120px; background:#e2c68a; border:3px solid #3b2412; margin:10px 0; }
.p-d { font-size:16px; }
.p-n { font-size:30px; margin:6px 0; word-break:break-word; }
.p-b { font-size:22px; }
.gauntlet { flex:1; min-width:280px; max-width:520px; text-align:center; background:#0f1538; border:2px solid var(--line); border-radius:24px; padding:16px; }
.gauntlet h2 { margin:0 0 6px; }
.g-hand { font-size:90px; filter:hue-rotate(10deg) saturate(2) drop-shadow(0 0 20px #ffd23f); }
.slots { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.slot { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.slot .gem { width:40px; height:46px; background:#262c52; clip-path:polygon(50% 0, 100% 30%, 82% 88%, 50% 100%, 18% 88%, 0 30%); }
.slot.have .gem { background:var(--c); filter:drop-shadow(0 0 10px var(--c)); animation:gemspin 2.5s ease-in-out infinite; }
.slot.have { color:#fff; }
.album { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; justify-items:center; }

/* ---------- ouders ---------- */
.parents { width:min(560px, 100%); display:flex; flex-direction:column; gap:12px; }
.parents h2 { margin:0; }
.parents .row { display:flex; align-items:center; gap:10px; font-size:17px; flex-wrap:wrap; }
.parents input[type=checkbox] { width:22px; height:22px; }
.parents select, .parents input:not([type]) { font:inherit; padding:6px 10px; border-radius:10px; border:2px solid var(--line); background:#0b1030; color:#fff; }
.parents small { color:var(--muted); font-weight:600; }
.p-info { font-size:14px; background:#0b1030; padding:12px; border-radius:12px; line-height:1.45; color:#cfd6f5; font-weight:600; }
.p-info code { background:#1c2553; padding:1px 5px; border-radius:5px; }
.p-info textarea { display:block; width:100%; margin-top:8px; font:13px var(--mono); padding:8px; border-radius:10px; border:2px solid var(--line); background:#131a3d; color:#fff; resize:vertical; }

/* ---------- kleinere schermen ---------- */
@media (max-height:800px) {
  .key { height:38px; }
  .hands { width:min(280px, 50%); }
  .textbox { padding:14px 22px 12px; min-height:110px; }
  .f-emoji { font-size:46px; } .bad .f-emoji { font-size:56px; }
  .i-boss { font-size:70px; }
  .intro { gap:9px; }
  .i-text { font-size:17px; }
}
@media (max-height:680px) {
  .intro .kb { display:none; }
}
@media (max-width:700px) {
  .avatars { grid-template-columns:repeat(2, 1fr); }
  .k-up, .k-lo { font-size:9px; } .k-main { font-size:13px; }
}

/* ---------- diploma (A4 staand, 1 blad) ---------- */
.diploma-btn { background:linear-gradient(90deg, #ffd23f, #ff9f1c); color:#3b2412; box-shadow:0 5px 0 #b8860b; font-size:20px; animation:pulse 1.2s infinite; }
.tr-diploma { display:block; margin:0 auto 20px; }
.tr-diploma.locked { text-align:center; color:var(--muted); background:#0f1538; border:2px dashed var(--line); border-radius:16px; padding:12px; max-width:640px; }
.scr-diploma { background:#2a2f4a; }
.diploma-bar { position:sticky; top:0; z-index:5; display:flex; gap:14px; align-items:center; justify-content:space-between; padding:10px 16px; background:rgba(8,11,32,.92); flex-wrap:wrap; }
.diploma-bar span { color:var(--muted); font-size:14px; }
.diploma-wrap { display:flex; justify-content:center; padding:12px 16px 24px; }
.diploma {
  --ink:#3b2412; --gold:#b8860b; --gold2:#e0a800;
  position:relative; width:210mm; height:297mm; box-sizing:border-box; padding:13mm 14mm 11mm; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #fffdf5 0%, #fbf1d6 70%, #f3e2b3 100%); color:var(--ink);
  font-family:'Nunito', 'Segoe UI', sans-serif; font-weight:700; font-size:10pt;
  border:3mm double var(--gold); outline:1.2mm solid var(--gold2); outline-offset:-6mm;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:3mm;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.d-corner { position:absolute; font-size:9mm; }
.d-corner.tl { top:5mm; left:6mm; } .d-corner.tr { top:5mm; right:6mm; } .d-corner.bl { bottom:5mm; left:6mm; } .d-corner.br { bottom:5mm; right:6mm; }
.d-head { text-align:center; }
.d-kicker { font-family:var(--comic); letter-spacing:2mm; color:#c1121f; font-size:13pt; }
.d-title { font-family:var(--comic); font-weight:400; font-size:52pt; line-height:1; margin:0; color:var(--gold2); letter-spacing:1.5mm;
  text-shadow:0.6mm 0.6mm 0 #c1121f, 1.2mm 1.2mm 0 var(--ink); }
.d-sub { font-size:11pt; font-style:italic; margin-top:1mm; }
.d-intro { text-align:center; margin:0; font-size:11pt; }
.d-name { text-align:center; font-family:var(--comic); font-size:34pt; line-height:1.05; color:#c1121f; letter-spacing:1mm;
  border-bottom:0.5mm solid var(--gold); margin:0 20mm; padding-bottom:1mm; overflow-wrap:anywhere; }
.d-av { font-size:26pt; margin-right:3mm; vertical-align:middle; }
.d-text { text-align:center; margin:0 8mm; font-size:10.5pt; line-height:1.4; }
.d-stats { display:grid; grid-template-columns:repeat(5, 1fr); gap:2mm; }
.d-stats div { background:#fff8e1; border:0.5mm solid var(--gold); border-radius:3mm; padding:1.5mm 1mm; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.d-stats b { font-family:var(--comic); font-weight:400; font-size:17pt; line-height:1.1; letter-spacing:0.3mm; }
.d-stats span { font-size:7.5pt; }
.d-stats .d-berry b { font-size:12.5pt; color:#9d0208; overflow-wrap:anywhere; }
.d-row { display:grid; grid-template-columns:1fr 1fr; gap:3mm; }
.d-box { border:0.5mm solid var(--gold); border-radius:3mm; padding:1.5mm 3mm 2mm; background:rgba(255,255,255,.45); }
.d-box h3 { font-family:var(--comic); font-weight:400; font-size:12pt; letter-spacing:0.5mm; margin:0 0 1mm; color:#c1121f; }
.d-gems { display:flex; gap:3mm; justify-content:center; }
.dg { width:7mm; height:8mm; background:var(--c); clip-path:polygon(50% 0, 100% 30%, 82% 88%, 50% 100%, 18% 88%, 0 30%); }
.dg.miss { background:#d9cba6; }
.d-bosses { display:flex; justify-content:center; gap:2.5mm; font-size:15pt; }
.d-quests { display:flex; flex-direction:column; gap:0.6mm; }
.dq { display:grid; grid-template-columns:7mm 44mm 1fr 12mm; align-items:center; font-size:9pt; }
.dq-i { font-size:12pt; }
.dq-s { display:flex; flex-wrap:wrap; gap:1.8mm; color:var(--gold2); font-size:9pt; letter-spacing:-0.2mm; }
.dq-lv.boss { color:#c1121f; }
.dq-lv i { font-style:normal; color:#e2d3aa; }
.dq-b { font-size:10pt; text-align:right; }
.d-cards { display:grid; grid-template-columns:repeat(7, 1fr); gap:1.5mm; }
.dc { display:flex; flex-direction:column; align-items:center; border-radius:2mm; padding:0.8mm 0.5mm; border:0.4mm solid #8ea0e6; background:#eef1ff; }
.dc.rar-z { border-color:#1f9ec2; background:#e3f7fd; }
.dc.rar-e { border-color:#9d4edd; background:#f3e8ff; }
.dc.rar-l { border-color:#e0a800; background:#fff4cc; }
.dc.miss { opacity:.45; }
.dc span { font-size:19pt; line-height:1.2; }
.dc small { font-size:6.3pt; text-align:center; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.d-skills { text-align:center; margin:0; font-size:9.5pt; }
.d-foot { margin-top:auto; padding:0 12mm; display:grid; grid-template-columns:1fr 26mm 1fr; align-items:end; gap:6mm; }
.d-sign { text-align:center; font-size:9pt; }
.d-line { border-bottom:0.4mm solid var(--ink); height:10mm; margin-bottom:1mm; }
.d-date { font-size:10pt; }
.d-seal { width:24mm; height:24mm; border-radius:50%; background:radial-gradient(circle, #ffd23f 0%, #e0a800 60%, #b8860b 100%);
  border:1mm dashed #fff3b0; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 0 0.8mm #b8860b; }
.d-seal span { font-size:14pt; line-height:1; }
.d-seal small { font-family:var(--comic); font-size:8pt; letter-spacing:0.4mm; color:#3b2412; }

@page { size:A4 portrait; margin:0; }
@media print {
  html, body { height:auto !important; overflow:visible !important; background:#fff !important; }
  #stars, #fx, #overlay, #toast, .no-print { display:none !important; }
  #app { position:static !important; overflow:visible !important; filter:none !important; transform:none !important; }
  .scr-diploma { background:#fff !important; }
  .diploma-wrap { padding:0 !important; display:block !important; }
  .diploma { zoom:1 !important; box-shadow:none !important; margin:0 !important; page-break-after:avoid; break-inside:avoid; }
}
/* ---------- spelers & wachtwoorden ---------- */
button.hdr-av { font-size:40px; background:none; box-shadow:none; padding:0 4px; line-height:1; border-radius:12px; }
button.hdr-av:hover { background:rgba(255,255,255,.08); transform:scale(1.08); }
.who-screen .sub { margin-bottom:22px; }
.profiles { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width:980px; }
.prof { position:relative; width:190px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 12px 14px;
  background:linear-gradient(160deg, #26307a, #141a3d); border:3px solid var(--line); color:var(--ink); border-radius:22px; box-shadow:0 6px 0 rgba(0,0,0,.4); }
.prof:hover { border-color:var(--gold); transform:translateY(-4px); }
.prof-av { font-size:64px; line-height:1.1; }
.prof b { font-size:22px; }
.prof small { color:var(--muted); font-size:13px; }
.prof-lock { position:absolute; top:10px; right:12px; font-size:16px; opacity:.7; }
.prof-new { background:transparent; border-style:dashed; }
.who-parents { margin-top:28px; }
.panel.pw { width:min(480px, 100%); display:flex; flex-direction:column; gap:10px; text-align:left; }
.panel.pw h2 { margin:0; font-size:26px; }
.pw-sub { margin:0; color:#cfd6f5; }
.pw-row { display:flex; gap:8px; }
.panel.pw input, .welcome input#w-pin { font:inherit; font-size:22px; padding:10px 14px; border-radius:12px; border:3px solid var(--line); background:#0b1030; color:#fff; outline:none; min-width:0; }
.pw-row input { flex:1; }
.panel.pw input:focus, .welcome input#w-pin:focus { border-color:var(--gold); }
.pw-err { color:#ff8fa3; min-height:1.2em; margin:0; }
.pw-forgot { background:none; box-shadow:none; color:#9ef6ff; text-decoration:underline; padding:0; font-size:15px; align-self:flex-start; }
.pw-hint { margin:0; background:#0b1030; border-radius:10px; padding:10px; font-weight:600; }
.panel.pw .avatars { margin:6px 0; }
.lbl small { color:var(--muted); font-weight:600; }
/* oudermodule */
.parents { width:min(760px, 100%); }
.parents h3 { margin:12px 0 0; font-size:20px; border-top:2px solid var(--line); padding-top:12px; }
.p-small { margin:0; color:var(--muted); font-size:14px; font-weight:600; }
.pp-list { display:flex; flex-direction:column; gap:10px; }
.pp { background:#0b1030; border:2px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.pp-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pp-av { font-size:34px; }
.pp-stat { color:var(--muted); font-size:13px; font-weight:600; }
.pp-stat b { color:var(--ok); }
.pp-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:15px; }
.pp-row label { display:flex; align-items:center; gap:6px; }
.pp input:not([type=checkbox]), .pp select { font:inherit; padding:6px 10px; border-radius:10px; border:2px solid var(--line); background:#131a3d; color:#fff; }
.pp-name { font-size:18px !important; width:170px; }
.pp-pin { width:150px; font-family:var(--mono) !important; }
.pp-btns { display:flex; gap:8px; flex-wrap:wrap; }
.pp-btns button { font-size:14px; padding:8px 14px; }
/* ---------- klasmodus ---------- */
.klas-note { margin-top:16px; color:var(--muted); font-size:14px; background:#0f1538; border:1px solid var(--line); border-radius:999px; padding:6px 16px; }
.who-klas { margin-top:14px; font-size:14px; padding:8px 16px; }
.panel.klas-open { width:min(520px, 100%); display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
.panel.klas-open p { margin:0; }
/* ---------- schoolversie: installatie & beheer ---------- */
.panel.install { width:min(560px, 100%); display:flex; flex-direction:column; gap:8px; text-align:left; }
.panel.install input, .panel.pw #c-code { font:inherit; font-size:20px; padding:10px 14px; border-radius:12px; border:3px solid var(--line); background:#0b1030; color:#fff; outline:none; }
.panel.install input:focus { border-color:var(--gold); }
.prof.klas .prof-av { font-size:58px; }
.who-screen .btns.who-parents { margin-top:28px; }
.scr-teacher { background:#0b1026; }
.teacher { max-width:1250px; margin:0 auto; padding:16px 16px 60px; display:flex; flex-direction:column; gap:14px; }
.t-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.t-head h1 { margin:0; font-size:28px; }
.t-head h1 small { color:var(--muted); font-size:18px; }
.t-klassen { display:flex; gap:8px; flex-wrap:wrap; }
.t-klassen button { font-size:16px; padding:9px 16px; }
.t-klassen button.on { background:var(--gold); }
.t-klassen small { opacity:.7; }
.t-box { background:var(--panel); border:2px solid var(--line); border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.t-box h3 { margin:0; }
.t-klashead { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.t-grow { flex:1; }
.teacher input:not([type=checkbox]), .teacher select, .teacher textarea { font:inherit; font-size:15px; padding:7px 10px; border-radius:10px; border:2px solid var(--line); background:#0b1030; color:#fff; }
#t-kemoji { width:56px; text-align:center; font-size:20px; }
#t-kname { font-size:20px; font-weight:900; width:200px; }
.t-scroll { overflow-x:auto; }
.t-table { width:100%; border-collapse:collapse; font-size:15px; }
.t-table th { text-align:left; color:var(--muted); font-size:13px; padding:6px 8px; border-bottom:2px solid var(--line); white-space:nowrap; }
.t-table td { padding:6px 8px; border-bottom:1px solid #222a55; white-space:nowrap; }
.t-table tr.saved td { animation:saved 1s; }
@keyframes saved { from { background:rgba(74,222,128,.25); } }
.t-name { display:flex; align-items:center; gap:6px; }
.t-name span { font-size:22px; }
.tl-name { width:140px; } .tl-pin { width:130px; font-family:var(--mono) !important; }
.t-c { text-align:center; }
.t-act button { padding:6px 10px; font-size:15px; margin-right:4px; }
.t-add { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.t-set .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.t-set .big { align-self:flex-start; }