:root{
  --bg:#eef2f9; --panel:#ffffff; --ink:#1e293b; --muted:#64748b;
  --accent:#4f46e5; --accent2:#6366f1; --ok:#16a34a; --okbg:#dcfce7;
  --warn:#d97706; --warnbg:#fef3c7; --hot:#ef4444; --line:#94a3b8;
  --shadow:0 6px 20px rgba(15,23,42,.08); --shadow-lg:0 12px 36px rgba(15,23,42,.14);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#eef2f9,#e7ecf6 60%,#e3e9f5);
  color:var(--ink); line-height:1.5; -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:760px;margin:0 auto;padding:0 14px 90px}
h1,h2{line-height:1.2}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.muted{color:var(--muted);font-size:.92rem}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin:0 -14px 14px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(15,23,42,.06)}
.home-btn{font-size:1.3rem;background:#f1f5f9;border-radius:12px;width:42px;height:42px;flex:0 0 auto}
.home-btn:active{transform:scale(.94)}
.who{display:flex;flex-direction:column;min-width:0;flex:1}
.who .hi{font-weight:800;font-size:1rem}
.who .rank{font-size:.78rem;color:var(--muted)}
.xpwrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:96px}
.xpbar{width:96px;height:9px;background:#e2e8f0;border-radius:99px;overflow:hidden}
.xpfill{height:100%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:99px;transition:width .5s}
.xptext{font-size:.72rem;font-weight:700;color:var(--muted)}
.streak{font-weight:800;color:var(--warn);font-size:.95rem;white-space:nowrap}

/* ---------- home ---------- */
.hero{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow-lg);margin-bottom:18px}
.hero h1{margin:0 0 6px;font-size:1.7rem}
.hero p{margin:0 0 16px;opacity:.95}
.big{display:inline-block;width:100%;padding:15px 18px;border-radius:14px;font-size:1.05rem;font-weight:800;
  background:#fff;color:var(--accent);box-shadow:var(--shadow);transition:transform .08s}
.big:active{transform:scale(.97)}
.big.primary{background:#fff;color:var(--accent)}
.hero .big{margin-top:4px}

.lesson-grid{display:grid;gap:12px}
.lesson-card{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--panel);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .08s,box-shadow .2s}
.lesson-card:not(.locked):active{transform:scale(.98)}
.lesson-card.locked{opacity:.55;filter:grayscale(.4)}
.lesson-card.done{outline:2px solid var(--ok);outline-offset:-2px}
.lc-icon{font-size:2rem;flex:0 0 auto;width:50px;height:50px;display:grid;place-items:center;background:#f1f5f9;border-radius:14px}
.lc-body{flex:1;min-width:0}
.lc-title{font-weight:800;font-size:1.06rem}
.lc-prog{height:7px;background:#e2e8f0;border-radius:99px;margin:7px 0 4px;overflow:hidden}
.lc-progfill{height:100%;background:linear-gradient(90deg,#6366f1,#22c55e);border-radius:99px}
.lc-sub{font-size:.78rem;color:var(--muted)}

.badges{margin-top:22px}
.badges h2{font-size:1.1rem}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge{background:#fff;border-radius:99px;padding:8px 14px;font-weight:700;box-shadow:var(--shadow)}

/* ---------- step ---------- */
.step-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sh-title{font-weight:800;font-size:1.05rem}
.dots{display:flex;gap:6px}
.dot{width:9px;height:9px;border-radius:99px;background:#cbd5e1}
.dot.ok{background:var(--ok)}
.dot.cur{outline:2px solid var(--accent);outline-offset:2px;background:var(--accent)}

.card{background:var(--panel);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:14px}
.card h2{margin:0 0 10px;font-size:1.3rem}
.card.intro p{font-size:1.05rem}
.card.intro b{color:var(--accent)}
.card ul{padding-left:20px;margin:8px 0}
.card li{margin:6px 0}

.goal{background:var(--warnbg);border:1px solid #fde68a;border-radius:14px;padding:14px 16px;margin-bottom:12px;
  font-weight:700;display:flex;gap:8px;align-items:flex-start}
.goal-ic{font-size:1.2rem}

.concept{background:var(--panel);border-radius:14px;padding:6px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.concept summary,.hint summary{cursor:pointer;font-weight:700;padding:8px 0;color:var(--accent)}
.concept b{color:var(--accent)}
.hint{background:#f0f9ff;border:1px solid #bae6fd;border-radius:14px;padding:4px 16px;margin:12px 0}

/* ---------- simulator ---------- */
.simbox{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:6px}
.svg-wrap{background:#fbfcfe;padding:8px}
.schema{width:100%;height:auto;display:block;max-height:62vh}
.ctrls{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-top:1px solid #eef2f7}
.ctrl-btn{flex:1 1 120px;min-height:58px;border-radius:14px;background:#eef2ff;color:var(--accent);
  font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:inset 0 -3px 0 rgba(79,70,229,.18);transition:transform .06s,background .12s;touch-action:none;user-select:none}
.ctrl-btn .ck{font-size:1.05rem}
.ctrl-btn .ctag{font-size:.68rem;font-weight:600;opacity:.7}
.ctrl-btn:active{transform:translateY(2px)}
.ctrl-btn.on{background:var(--accent);color:#fff;box-shadow:inset 0 3px 6px rgba(0,0,0,.25)}
.ctrl-btn.reset{flex:0 0 auto;background:#f1f5f9;color:var(--muted);box-shadow:none}
.sim-status{min-height:8px}
.win{background:var(--okbg);color:var(--ok);font-weight:800;text-align:center;padding:14px;border-radius:14px;margin:10px 0;font-size:1.1rem}

/* ---------- SVG symbolen ---------- */
.schema text{font-family:inherit;fill:var(--ink)}
.schema .subtitle{font-size:13px;font-weight:800;fill:var(--muted)}
.rail line{stroke:var(--line);stroke-width:3}
.rail.plus line{stroke:#475569}
.rail-lbl{font-size:12px;font-weight:800;fill:var(--muted)}
.wire{stroke:var(--line);stroke-width:2.5;fill:none;stroke-linecap:round}
.wire.hot{stroke:var(--hot);stroke-width:4;filter:drop-shadow(0 0 3px rgba(239,68,68,.6))}
.term{fill:#fff;stroke:var(--line);stroke-width:1.5}
.blade{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.blade.hot{stroke:var(--hot);filter:drop-shadow(0 0 3px rgba(239,68,68,.6))}
.nc-cap{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.actuator{stroke:var(--ink);stroke-width:2}
.actuator-knob{fill:#cbd5e1;stroke:var(--ink);stroke-width:1}
.actuator-knob.pressed{fill:var(--hot)}
.mech-link{stroke:var(--muted);stroke-width:1.5}
.lbl{font-size:13px;font-weight:700;fill:var(--ink)}
.code{font-size:10px;fill:var(--muted)}
.coil-box{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.coil.on .coil-box{fill:#e0e7ff;stroke:var(--accent);stroke-width:2.8;animation:coilpulse 1s ease-in-out infinite}
.coil-lbl{font-size:13px;font-weight:800;fill:var(--ink)}
.coil.on .coil-lbl{fill:var(--accent)}
.term-lbl{font-size:9px;fill:var(--muted)}
.spark{font-size:14px;fill:var(--accent)}
@keyframes coilpulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px rgba(99,102,241,.7))}}
.bulb{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.x{stroke:var(--ink);stroke-width:2}
.lamp.on .bulb{fill:#fde047;stroke:#ca8a04;filter:drop-shadow(0 0 8px rgba(250,204,21,.9))}
.lamp.on .x{stroke:#a16207}
.mbody{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.mlbl{font-size:16px;font-weight:800}
.rotor-arc{fill:none;stroke:#cbd5e1;stroke-width:3;stroke-linecap:round}
.motor.on .mbody{fill:#dcfce7;stroke:var(--ok);filter:drop-shadow(0 0 7px rgba(34,197,94,.7))}
.motor.on .rotor{transform-origin:center;transform-box:fill-box;animation:spin .7s linear infinite}
.motor.on .rotor-arc{stroke:var(--ok)}
.dir{font-size:13px;font-weight:800;fill:var(--ok)}
@keyframes spin{to{transform:rotate(360deg)}}
.snd-body{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.sounder.on .snd-body{fill:#fde047;stroke:#ca8a04;filter:drop-shadow(0 0 7px rgba(250,204,21,.85))}
.snd-waves path{fill:none;stroke:var(--warn);stroke-width:2.5;animation:ring .4s ease-in-out infinite alternate}
@keyframes ring{from{opacity:.3}to{opacity:1}}

/* ---------- quiz ---------- */
.quiz .q-progress{font-size:.8rem;color:var(--muted);font-weight:700}
.q-text{font-size:1.25rem;margin:6px 0 14px}
.opts{display:grid;gap:10px}
.opt{text-align:left;padding:15px 16px;border-radius:14px;background:#f8fafc;border:2px solid #e2e8f0;
  font-size:1.02rem;font-weight:600;transition:transform .06s}
.opt:active{transform:scale(.99)}
.opt.correct{background:var(--okbg);border-color:var(--ok);color:#14532d}
.opt.wrong{background:#fef2f2;border-color:#fca5a5;color:#991b1b;animation:shake .4s}
.opts.locked-correct .opt:not(.correct){opacity:.5}
.feedback{margin-top:12px}
.fb{padding:14px;border-radius:14px;font-weight:700}
.fb.ok{background:var(--okbg);color:#14532d}
.fb.almost{background:#fff7ed;color:#9a3412}
.fb .why{display:block;margin-top:6px;font-weight:500;font-size:.95rem}
.qnext{margin-top:12px}
.win-card,.finish-card{text-align:center}
.big-emoji{font-size:3.2rem;line-height:1}
.finish-card h1{margin:8px 0}

/* ---------- match / sort ---------- */
.match-board{display:flex;gap:12px;margin-bottom:14px}
.match-col{flex:1;display:flex;flex-direction:column;gap:10px}
.match-item,.sort-item{padding:14px 12px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);
  font-weight:700;border:2px solid transparent;text-align:center;transition:transform .06s}
.match-item.sel,.sort-item.sel{border-color:var(--accent);background:#eef2ff;transform:scale(1.03)}
.match-item.done,.sort-item.done{background:var(--okbg);border-color:var(--ok);color:#14532d;opacity:1}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.sort-pool{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.sort-pool .sort-item{flex:1 1 calc(50% - 6px)}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bin{background:#f8fafc;border:2px dashed #cbd5e1;border-radius:var(--radius);padding:12px;min-height:120px}
.bin.shake{animation:shake .4s}
.bin-h{font-weight:800;margin-bottom:8px;text-align:center}
.bin-drop{display:flex;flex-direction:column;gap:8px}
.bin-drop .sort-item{flex:none}

/* ---------- nav ---------- */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;justify-content:space-between;
  max-width:760px;margin:0 auto;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(238,242,249,0),#eef2f9 40%)}
.nav-btn{flex:1;padding:15px;border-radius:14px;font-weight:800;background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.nav-btn.primary{background:var(--accent);color:#fff}
.nav-btn.disabled{opacity:.45}
.nav-btn:active{transform:scale(.98)}

/* ---------- confetti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.cf{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall 1.5s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

@media (max-width:480px){
  .hero h1{font-size:1.45rem}
  .q-text{font-size:1.12rem}
  .match-item,.sort-item{font-size:.95rem;padding:12px 8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}