/* ================================================================
   style.css — RekenRun v10 · ROC van Amsterdam – Flevoland
   
   FIX LOG (senior frontend audit):
   #5  Duplicate .game-body rules removed → single clean definition
   #6  Answer zones: flex:1 + min-height instead of fixed 72px
   #7  Float bar z-index raised above camera widget (85→95)
   #14 Colour-only feedback: enlarged ✓/✗ icons added
================================================================ */

:root {
  --red:#C8102E; --red-d:#9B0B22; --red-bg:#FFF0F3;
  --dark:#16120E; --coal:#2A2218;
  --white:#FFFFFF; --cream:#FAF6F0; --warm:#F3EDE4;
  --g1:#EAE3D8; --g2:#C8B9A5; --g3:#9A8878; --g4:#5E4F40;
  --green:#1E7A45; --gbg:#E6F5EC; --gline:#9FD4B5;
  --amber:#C27800; --abg:#FFF8E1; --aline:#F9C84A;
  --blue:#1050A0; --bbg:#EAF2FF; --bline:#9AC0F0;
  --r:12px; --r2:18px; --r3:26px;
  --shadow:0 2px 10px rgba(22,18,14,.12);
  --shadow2:0 8px 30px rgba(22,18,14,.20);
  --shadow3:0 20px 60px rgba(22,18,14,.35);
  --fnt:'Nunito',sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body {
  height:100%;
  font-family:var(--fnt);
}

/* ── Body: warm animated salon background ── */
body {
  background-color:#1E1208;
  display:flex; justify-content:center; align-items:flex-start;
  overflow-x:hidden; position:relative;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 220px 140px at 15% 5%,rgba(255,215,120,.22) 0%,transparent 65%),
    radial-gradient(ellipse 220px 140px at 85% 5%,rgba(255,215,120,.22) 0%,transparent 65%),
    radial-gradient(ellipse 100px 320px at 10% 42%,rgba(200,220,240,.12) 0%,transparent 70%),
    radial-gradient(ellipse 100px 320px at 90% 42%,rgba(200,220,240,.12) 0%,transparent 70%),
    linear-gradient(to top,rgba(160,100,40,.28) 0%,rgba(120,70,20,.12) 18%,transparent 35%),
    linear-gradient(180deg,#2C1E0E 0%,#3A2810 30%,#2A1C0A 100%);
  animation:ambientPulse 8s ease-in-out infinite;
}
/* Bug 3 fix: SVG-decoraties (spiegel links, stoel rechts) verwijderd — alleen subtiele gradiënten */
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80px 200px at 5% 50%, rgba(200,16,46,.04) 0%, transparent 70%),
    radial-gradient(ellipse 80px 200px at 95% 50%, rgba(200,16,46,.04) 0%, transparent 70%);
}

@keyframes ambientPulse { 0%,100%{opacity:1} 50%{opacity:.85} }

/* Floating particles */
.salon-particle {
  position:fixed; pointer-events:none; z-index:0;
  border-radius:50%; background:rgba(255,200,80,.2);
  animation:particleDrift var(--dur,14s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes particleDrift {
  0%{transform:translate(0,0)scale(1);opacity:.2}
  33%{transform:translate(var(--dx,8px),var(--dy,-20px))scale(1.2);opacity:.3}
  66%{transform:translate(calc(var(--dx,8px)*-1),var(--dy,-40px))scale(.9);opacity:.1}
  100%{transform:translate(0,0)scale(1);opacity:.2}
}

/* ── app shell ── */
#app {
  position:relative; z-index:1;
  width:100%; max-width:980px;
  min-height:100dvh;
  background:var(--cream);
  box-shadow:var(--shadow3);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.screen { display:none; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.screen.active { display:flex; }

/* ── keyframes ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes pop { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%,75%{transform:translateX(-6px)} 50%{transform:translateX(6px)} }
@keyframes glow { 0%,100%{box-shadow:0 0 0 0 rgba(30,122,69,.5)} 60%{box-shadow:0 0 0 14px rgba(30,122,69,0)} }
@keyframes shine { 0%{left:-100%} 100%{left:140%} }
@keyframes confDrop { from{opacity:1;transform:translateY(-10px)rotate(0)} to{opacity:0;transform:translateY(70px)rotate(540deg)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes stepBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes xpPop { 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes slideInFromBottom { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── buttons ── */
.btn-red {
  width:100%; padding:15px; background:var(--red); color:#fff;
  font-size:15px; font-weight:900; letter-spacing:.5px;
  border:none; border-radius:var(--r); transition:all .15s;
  position:relative; overflow:hidden; cursor:pointer; font-family:var(--fnt);
}
.btn-red::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:shine 2.5s ease infinite; }
.btn-red:hover { background:var(--red-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,16,46,.35); }
.btn-red:disabled { opacity:.4; pointer-events:none; }
.btn-g { flex:1; padding:12px; background:var(--white); color:var(--g4); font-size:13px; font-weight:800;
  border:2.5px solid var(--g1); border-radius:var(--r); transition:all .13s; cursor:pointer; font-family:var(--fnt); }
.btn-g:hover { border-color:var(--dark); color:var(--dark); }

/* toast */
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:#fff; font-size:13px; font-weight:800;
  padding:10px 20px; border-radius:30px; box-shadow:var(--shadow2);
  z-index:400; pointer-events:none; animation:fadeUp .25s ease both; white-space:nowrap; }

/* ═══════════════════════════════════
   PROFILE SCREEN
═══════════════════════════════════ */
#s-profile { background:var(--cream); }
.profile-hero {
  position:relative; overflow:hidden;
  height:clamp(200px,38vw,280px); flex-shrink:0;
}
.profile-hero img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.profile-hero-dim { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(22,18,14,.45) 0%,rgba(22,18,14,.75) 100%); }
.profile-hero-text { position:absolute; bottom:0; left:0; right:0; padding:20px 22px 22px; }
.hero-title { color:#fff; font-size:clamp(36px,8vw,62px); font-weight:1000; letter-spacing:-2px; line-height:.9; }
.hero-title span { color:#FFB3C1; }
.hero-sub { color:rgba(255,255,255,.55); font-size:12px; letter-spacing:1.5px; margin-top:6px; }
.pb { padding:20px; display:flex; flex-direction:column; gap:16px; }
.sl { font-size:10px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:var(--g3); margin-bottom:8px; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.pc {
  background:var(--white); border:2.5px solid var(--g1); border-radius:var(--r2);
  padding:14px 10px; text-align:center; transition:all .15s; position:relative;
}
.pc:hover,.pc.sel { border-color:var(--red); background:var(--red-bg); }
.pc.new-card { border-style:dashed; border-color:var(--g2); cursor:pointer; }
.pc.new-card:hover { border-style:solid; border-color:var(--red); }
.pc-em { font-size:34px; display:block; margin-bottom:6px; }
.pc-nm { font-size:12px; font-weight:800; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-sb { font-size:10px; color:var(--g3); margin-top:2px; font-weight:600; }
.pc-del {
  position:absolute; top:5px; right:5px;
  width:22px; height:22px; border-radius:50%;
  background:none; border:none; font-size:13px; color:var(--g2);
  display:flex; align-items:center; justify-content:center;
  transition:all .13s; z-index:2; cursor:pointer;
}
.pc-del:hover { background:var(--red-bg); color:var(--red); }
.new-form { background:var(--white); border:2px solid var(--g1); border-radius:var(--r2); padding:18px; display:flex; flex-direction:column; gap:10px; animation:fadeUp .2s; }
.ep-row { display:flex; flex-wrap:wrap; gap:6px; }
.ep { width:36px; height:36px; border-radius:50%; border:2px solid var(--g1); background:var(--warm); font-size:17px; cursor:pointer; transition:all .13s; display:flex; align-items:center; justify-content:center; }
.ep:hover,.ep.s { border-color:var(--red); background:var(--red-bg); }
.fi { width:100%; padding:11px 14px; font-family:var(--fnt); font-size:14px; font-weight:700;
  border:2.5px solid var(--g1); border-radius:var(--r); background:var(--cream); color:var(--dark); outline:none; transition:border-color .15s; }
.fi:focus { border-color:var(--blue); }

/* ═══════════════════════════════════
   START SCREEN
═══════════════════════════════════ */
#s-start { background:var(--cream); }
.start-top { background:var(--dark); padding:13px 18px; display:flex; align-items:center; justify-content:space-between; }
.ap { display:flex; align-items:center; gap:10px; }
.ap-em { font-size:22px; }
.ap-nm { color:#fff; font-size:14px; font-weight:800; }
.ap-sb { color:var(--g3); font-size:11px; font-weight:600; }
.btn-sw { background:rgba(255,255,255,.1); border:none; color:rgba(255,255,255,.6); font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; transition:all .13s; cursor:pointer; font-family:var(--fnt); }
.btn-sw:hover { background:rgba(255,255,255,.2); color:#fff; }
.start-body { padding:18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.lvl-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lc { padding:14px 8px; border:3px solid var(--g1); border-radius:var(--r2); background:var(--white); cursor:pointer; text-align:center; transition:all .15s; }
.lc .ln { font-size:26px; font-weight:1000; color:var(--g2); }
.lc .ll { font-size:11px; font-weight:800; color:var(--g3); margin-top:2px; }
.lc .ld { font-size:10px; color:var(--g3); margin-top:2px; line-height:1.3; }
.lc.on { border-color:var(--red); background:var(--red-bg); }
.lc.on .ln,.lc.on .ll { color:var(--red); }
.opts-row {
  display:grid;
  grid-template-columns:1fr;   /* 1 col on mobile */
  gap:8px;
}
@media (min-width:480px) {
  .opts-row { grid-template-columns:1fr 1fr; }
}
/* Loopsimulatie: always full width, text wraps naturally */
#oc-walk {
  grid-column:1 / -1;   /* span all columns at any breakpoint */
}
.oc-t { font-size:13px; font-weight:800; color:var(--dark); word-break:break-word; }
.oc-s { font-size:10px; color:var(--g3); font-weight:600; margin-top:1px; word-break:break-word; line-height:1.4; }
.oc { background:var(--white); border:2.5px solid var(--g1); border-radius:var(--r); padding:13px; cursor:pointer; transition:all .15s; }
.oc.on { border-color:var(--green); background:var(--gbg); }
.oc-r { display:flex; align-items:center; gap:10px; }
.oc-ico { font-size:20px; }
/* .oc-t and .oc-s defined inside .opts-row block above */
.tog { width:36px; height:20px; border-radius:10px; background:var(--g2); margin-left:auto; flex-shrink:0; position:relative; transition:background .2s; }
.tog.on { background:var(--green); }
.tog::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.tog.on::after { transform:translateX(16px); }

/* ═══════════════════════════════════
   GAME SCREEN
   FIX #5: removed duplicate .game-body rule
   FIX #6: answer zones use flex:1 not fixed height
   FIX #7: fbar z-index 95 > cam-w 85
   FIX #8: walk lane shows step progress toward next station
═══════════════════════════════════ */
#s-game { background:var(--dark); overflow:hidden; }

/* top bar */
.gtop { background:var(--dark); padding:10px 14px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.st-tag { background:var(--red); color:#fff; font-size:11px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; padding:4px 12px; border-radius:20px; }
.tc { color:rgba(255,255,255,.45); font-size:11px; font-weight:700; }
.sc-tag:empty { display:none; }
.sc-tag { background:rgba(255,255,255,.1); color:#fff; font-size:12px; font-weight:800; padding:4px 11px; border-radius:20px; transition:transform .2s; }
.sc-tag.pop { animation:xpPop .3s ease; }
.pg-bar { height:5px; background:rgba(255,255,255,.12); overflow:hidden; flex-shrink:0; }
.pg-fill { height:100%; background:linear-gradient(90deg,var(--red),#FF6B6B); transition:width .5s cubic-bezier(.25,1,.5,1); }

/* XP bar */
.xp-bar-wrap { display:none; }
.xp-label { font-size:10px; font-weight:900; color:rgba(255,255,255,.4); letter-spacing:1px; }
.xp-track { flex:1; height:5px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.xp-fill { height:100%; background:linear-gradient(90deg,var(--amber),#FFD700); border-radius:3px; transition:width .6s cubic-bezier(.25,1,.5,1); }
.xp-num { font-size:10px; font-weight:900; color:#FFD700; }

/* ── WALK LANE ── FIX #8: step counter shows progress to next station ── */
.walk-lane {
  background:linear-gradient(to right,#1A1410,var(--coal));
  padding:0 14px; height:68px; flex-shrink:0;
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.walk-lane::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:20px;
  background:repeating-linear-gradient(90deg,#3A2A18 0px,#3A2A18 38px,#4A3820 38px,#4A3820 40px);
}
.walk-lane::after {
  content:''; position:absolute; top:0; left:0; right:0; height:8px; background:#2A1E14;
}
.walk-track { position:absolute; bottom:18px; left:0; right:0; height:2px; background:rgba(255,255,255,.08); }

/* Station step-progress bar — shows how many steps to next station */
.walk-progress-bar {
  position:absolute; bottom:18px; left:0; height:2px;
  background:var(--red); transition:width .25s ease;
  z-index:3;
}
.walk-stations { position:absolute; bottom:18px; left:0; right:0; height:46px; display:flex; align-items:flex-end; }
.ws-marker { position:absolute; bottom:0; display:flex; flex-direction:column; align-items:center; gap:2px; transform:translateX(-50%); }
.ws-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.3); transition:all .3s; }
.ws-dot.active { background:var(--red); border-color:var(--red); box-shadow:0 0 8px rgba(200,16,46,.8); }
.ws-dot.done { background:var(--green); border-color:var(--green); }
.ws-lbl { font-size:8px; font-weight:800; color:rgba(255,255,255,.35); white-space:nowrap; transition:color .3s; }
.ws-lbl.active { color:rgba(255,255,255,.9); }
#runner { position:absolute; bottom:18px; transition:left .4s cubic-bezier(.25,1,.5,1); z-index:5; }
#runner svg { display:block; }
.walk-prompt {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.28);
  border-radius:8px; padding:5px 11px; font-size:11px;
  color:#fff; font-weight:800; letter-spacing:.4px;
  display:flex; align-items:center; gap:5px;
  z-index:10; text-shadow:none;
}
.walk-prompt kbd { background:rgba(255,255,255,.25); border-radius:4px; padding:1px 6px; font-size:10px; color:#fff; font-weight:900; }
/* Steps-to-go counter */
.walk-steps-to-go {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:5px 10px;
  display:flex; align-items:center; gap:4px;
  z-index:10;
}
.walk-steps-to-go strong { color:#FFD700; font-size:13px; font-weight:900; }
.step-flash { position:absolute; inset:0; background:rgba(255,255,255,.06); pointer-events:none; opacity:0; transition:opacity .08s; }
.step-flash.on { opacity:1; }

/* FIX #5: single clean .game-body definition (was duplicated) */
.game-body {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  position:relative;
  z-index:1;
  background:#0A0806;
}
/* Salon photo frame behind game content */
.game-body::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url("https://images.unsplash.com/photo-1560066984-138dadb4c035?w=980&h=600&fit=crop&q=50") center/cover no-repeat;
  opacity:.12; filter:saturate(0.65); pointer-events:none;
}

/* Math scene — fixed height, never changes between question/answer states */
.math-scene {
  position:relative; overflow:hidden; background:#0E0906;
  height:185px; min-height:185px; max-height:185px;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  z-index:1;
}
@media (min-width:640px) {
  .math-scene { height:215px; min-height:215px; max-height:215px; }
}
.math-scene-photo {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  opacity:.38; transition:opacity .4s ease; display:block;
}
.math-scene-tint { position:absolute; inset:0; z-index:2; opacity:.45; mix-blend-mode:multiply; transition:background .4s ease; }
.math-scene-vignette {
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(ellipse at center,transparent 25%,rgba(4,2,1,.78) 100%),
             linear-gradient(to bottom,rgba(4,2,1,.35) 0%,rgba(4,2,1,.05) 45%,rgba(4,2,1,.45) 100%);
}
.math-station-badge {
  position:absolute; bottom:10px; left:12px; z-index:5;
  background:rgba(6,4,2,.82); backdrop-filter:blur(8px);
  color:#fff; font-size:11px; font-weight:900; letter-spacing:.5px;
  padding:4px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.18);
}
.math-formula-chip {
  display: none !important;
}

/* ── Antwoord-reveal: formule in illustratie verborgen tot na beantwoording ── */
#math-svg-layer .formula-answer { display: none; }
#math-svg-layer.answers-shown .formula-answer { display: block; }

/* scaffold */
.scaffold {
  background:var(--abg); border:2px solid var(--aline); border-radius:var(--r);
  padding:10px 12px; display:flex; gap:8px; align-items:flex-start;
  font-size:13px; font-weight:700; color:#5C3A00; line-height:1.5;
  animation:fadeUp .25s; flex-shrink:0;
}

/* answer column — fills remaining space below math scene */
.answer-col {
  display:flex; flex-direction:column;
  flex:1; overflow-y:auto; padding:8px 12px; gap:8px;
  background:var(--cream); min-height:0; position:relative; z-index:1;
  /* FIX 3: overscroll-behavior-y:contain absorbeert pull-to-refresh
     lokaal op de container — werkt in Chrome, Firefox én Safari
     zonder de globale scroll-chain te blokkeren.
     contain = absorbeer de overscroll hier, geef hem niet door aan parent. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* task question card */
.tq-card {
  background:var(--white); border:2px solid var(--g1); border-left:4px solid var(--red); border-radius:var(--r2);
  padding:12px 14px; display:flex; align-items:flex-start; gap:10px;
  box-shadow:var(--shadow); flex-shrink:0; animation:fadeUp .2s ease;
}
.tq-ico { font-size:32px; flex-shrink:0; line-height:1; }
.tq-txt { font-size:clamp(14px,3vw,17px); font-weight:800; color:var(--dark); line-height:1.45; flex:1; }
.tts-b { flex-shrink:0; background:none; border:2px solid var(--g1); border-radius:50%; width:34px; height:34px; font-size:14px; transition:all .13s; display:flex; align-items:center; justify-content:center; color:var(--g3); cursor:pointer; }
.tts-b:hover,.tts-b.sp { border-color:var(--blue); color:var(--blue); background:var(--bbg); }

/* FIX #6: answer zones — flex:1 fills available space proportionally
   Old: min-height:80px + height:72px (too small on large screens, inconsistent)
   New: flex:1 + min-height:68px = always fills its column evenly */
.az-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; flex-shrink:0; }
.az {
  border:3px solid var(--g1); border-radius:var(--r2);
  background:var(--white); padding:10px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; transition:all .15s cubic-bezier(.25,1,.5,1);
  min-height:72px; position:relative; box-shadow:var(--shadow); touch-action:manipulation;
}
.az:hover:not(.dis) { border-color:var(--red); transform:translateY(-3px); box-shadow:0 8px 24px rgba(200,16,46,.2); }
/* FIX #14: enlarged state icons — not just colour, also shape cue */
.az.ok { border-color:var(--green); background:var(--gbg); animation:glow .6s ease; }
.az.ok::after { content:'✓'; position:absolute; top:4px; right:6px; font-size:16px; font-weight:900; color:var(--green); }
.az.fail { border-color:var(--amber); background:#FFF5E8; animation:shake .35s ease; }
.az.fail::after { content:'✗'; position:absolute; top:4px; right:6px; font-size:16px; font-weight:900; color:var(--amber); }
.az.dis { pointer-events:none; opacity:.45; }
.az-k { position:absolute; top:4px; left:6px; font-size:9px; color:var(--g3); font-weight:900; background:var(--g1); border-radius:3px; padding:1px 4px; letter-spacing:.5px; }
.az-em { font-size:22px; line-height:1; }
.az-v { font-size:clamp(13px,3vw,19px); font-weight:900; color:var(--dark); text-align:center; line-height:1.15; word-break:break-word; overflow-wrap:anywhere; }
.az-d { font-size:9px; color:var(--g3); font-weight:700; display:none; }
/* Show direction labels only when walk-gate is active */
.walk-locked .az-d { display:block; }

/* feedback — FIX #14: icon text larger for colour-blind users */
.fb { border-radius:var(--r); padding:14px 16px; display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:700; line-height:1.6; animation:fadeUp .2s; flex-shrink:0; }
.fb.ok { background:var(--gbg); border:2px solid var(--gline); color:#143820; }
.fb.fail { background:var(--abg); border:2px solid var(--aline); color:#5C3A00; }
.fb-ico { font-size:24px; flex-shrink:0; }
.ai-card { background:var(--bbg); border:2px solid var(--bline); border-radius:var(--r); padding:11px 13px; font-size:12px; font-weight:700; color:#0A1E50; line-height:1.5; display:flex; align-items:flex-start; gap:7px; animation:fadeUp .3s; flex-shrink:0; }
.ai-card .ai-ico { font-size:16px; flex-shrink:0; }
.ai-card.ld .ai-ico { animation:spin 1s linear infinite; display:inline-block; }
/* FIX 2: next-wrap-outer — lives OUTSIDE answer-col in the flex column.
   flex-shrink:0 guarantees it never disappears. padding ensures 
   breathing room and safe-area inset on iPhone notch devices. */
.next-wrap-outer {
  flex-shrink: 0;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1.5px solid var(--g1);
}
.next-btn { width:100%; padding:14px; background:var(--red); color:#fff; font-size:14px; font-weight:900; letter-spacing:.5px; border:none; border-radius:var(--r); cursor:pointer; transition:all .13s; flex-shrink:0; position:relative; overflow:hidden; font-family:var(--fnt); }
.next-btn::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); animation:shine 2s ease infinite; }
.next-btn:hover { background:var(--red-d); transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,16,46,.3); }
.next-btn.retry { background:var(--amber); }

/* XP burst */
.xp-burst { position:fixed; font-size:18px; font-weight:900; color:#FFD700; pointer-events:none; z-index:300; animation:xpBurst .8s ease forwards; }
@keyframes xpBurst { 0%{opacity:1;transform:translateY(0)scale(1)} 100%{opacity:0;transform:translateY(-50px)scale(1.3)} }

/* FIX #7: float bar z-index 95 > cam-w 85 so they never overlap visually
   Old: 70 (was below cam-w at 85)
   Also separated vertically: fbar bottom:70px when cam-w open */
/* FIX float-bar: split into LEFT (tools) and RIGHT (controls) */
.fbar-left {
  position:fixed; bottom:14px; left:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:95;
}
.fbar-right {
  position:fixed; bottom:14px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:95;
}
.fbar { display:none !important; }
.fb-btn {
  width:52px; height:52px; border-radius:16px;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(22,18,14,.92); backdrop-filter:blur(12px);
  font-size:20px;
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.1) inset;
  transition:all .13s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:#fff; cursor:pointer; font-family:var(--fnt);
}
.fb-btn:hover { border-color:var(--red); transform:scale(1.08); background:rgba(40,28,20,.96); }
.fb-btn.on { background:var(--red); border-color:var(--red); }
.fb-btn-label { font-size:8px; font-weight:900; letter-spacing:.5px; color:rgba(255,255,255,.6); text-transform:uppercase; line-height:1; }
.fb-btn.stop-btn { border-color:rgba(200,16,46,.5); }
.fb-btn.stop-btn .fb-btn-label { color:rgba(200,16,46,.8); }

/* ═══════════════════════════════════
   END SCREEN — full-screen popup overlay
═══════════════════════════════════ */
#s-end { display:none !important; } /* replaced by #end-overlay */

#end-overlay {
  position:fixed; inset:0; z-index:200;
  display:none; flex-direction:column;
  background:var(--cream);
  animation:slideInFromBottom .35s cubic-bezier(.25,1,.5,1);
  overflow-y:auto;
}
#end-overlay.show { display:flex; }
.end-overlay-hero {
  position:relative; overflow:hidden; height:180px; flex-shrink:0; background:#0E2018;
}
.end-overlay-hero img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.end-overlay-hero-dim { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(8,28,16,.45) 0%,rgba(8,28,16,.85) 100%); }
.end-overlay-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.end-em { font-size:60px; animation:pop .5s cubic-bezier(.175,.885,.32,1.275) both; }
.end-ttl { color:#fff; font-size:26px; font-weight:1000; margin-top:8px; }
.end-sub { color:rgba(255,255,255,.6); font-size:13px; margin-top:4px; }
.sc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sc-tile { background:var(--white); border:2.5px solid var(--g1); border-radius:var(--r2); padding:14px; text-align:center; }
.stn { font-size:26px; font-weight:1000; color:var(--dark); }
.stl { font-size:10px; font-weight:800; color:var(--g3); text-transform:uppercase; margin-top:2px; }
.dom-section { background:var(--white); border:2px solid var(--g1); border-radius:var(--r2); padding:14px; }
.dom-ttl { font-size:11px; font-weight:900; color:var(--dark); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.dom-row { margin-bottom:10px; }
.dom-row-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.dom-row-top span:first-child { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dom-row-top span:last-child { flex-shrink:0; }
.dom-bar { height:9px; background:var(--g1); border-radius:5px; overflow:hidden; }
.dom-fill { height:100%; border-radius:5px; }
.ai-sum { background:var(--bbg); border:2px solid var(--bline); border-radius:var(--r2); padding:15px; font-size:14px; font-weight:700; color:#0A1E50; line-height:1.6; }
.ai-sum.ld { animation:pulse 1.5s ease infinite; }
.bdg-row { display:flex; flex-wrap:wrap; gap:8px; }
.bdg { background:var(--red-bg); border:2px solid var(--red); border-radius:var(--r); padding:6px 12px; font-size:13px; font-weight:800; color:var(--red-d); display:flex; align-items:center; gap:5px; }

/* ═══════════════════════════════════
   DASHBOARD
═══════════════════════════════════ */
#s-dash { background:var(--cream); }
.dash-top { background:var(--dark); padding:13px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.dash-ttl { color:#fff; font-size:15px; font-weight:900; }
.dash-x { background:none; border:none; color:rgba(255,255,255,.5); font-size:20px; transition:color .13s; cursor:pointer; }
.dash-x:hover { color:#fff; }
.dash-body { flex:1; padding:16px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; overscroll-behavior-y:contain; }
.dash-g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.dtile { background:var(--white); border:2px solid var(--g1); border-radius:var(--r2); padding:12px; text-align:center; }
.dt-n { font-size:20px; font-weight:900; color:var(--dark); }
.dt-l { font-size:10px; font-weight:800; color:var(--g3); text-transform:uppercase; margin-top:2px; }
.dash-box { background:var(--white); border:2px solid var(--g1); border-radius:var(--r2); padding:14px; }
.db-t { font-size:11px; font-weight:900; color:var(--dark); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.p-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.p-lbl { font-size:12px; font-weight:800; color:var(--dark); width:120px; flex-shrink:0; }
.p-trk { flex:1; background:var(--g1); border-radius:3px; height:9px; overflow:hidden; }
.p-fl { height:100%; border-radius:3px; }
.p-cnt { font-size:11px; font-weight:800; color:var(--g3); width:22px; text-align:right; }
.log-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.log-tbl th { color:var(--g3); font-size:10px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; padding:7px 5px; border-bottom:2px solid var(--g1); text-align:left; }
.log-tbl td { padding:8px 5px; border-bottom:1px solid var(--g1); color:var(--dark); }
.log-tbl tr:hover td { background:var(--warm); cursor:pointer; }
.c-ok { color:var(--green); font-weight:900; }
.c-fail { color:var(--amber); font-weight:900; }
.klas-card { background:var(--white); border:1.5px solid var(--g1); border-radius:var(--r); padding:12px; margin-bottom:8px; cursor:pointer; transition:all .13s; }
.klas-card:hover { border-color:var(--red); background:var(--red-bg); }
.klas-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.klas-dom { font-size:11px; font-weight:800; color:var(--blue); }
.klas-cnt { font-size:10px; background:var(--red-bg); color:var(--red-d); padding:2px 7px; border-radius:10px; font-weight:800; }
.klas-q { font-size:12px; color:var(--dark); line-height:1.4; }

/* CSV export button */
.btn-csv { background:var(--gbg); border:1.5px solid var(--gline); color:var(--green); font-size:11px; font-weight:800; padding:5px 10px; border-radius:var(--r); cursor:pointer; font-family:var(--fnt); transition:all .13s; }
.btn-csv:hover { background:var(--green); color:#fff; }

/* ═══════════════════════════════════
   SLIDE PANELS
═══════════════════════════════════ */
.spanel { position:fixed; top:0; height:100%; width:min(290px,85vw); background:var(--coal); z-index:80; display:flex; flex-direction:column; box-shadow:var(--shadow3); }
.spanel.right { right:0; transform:translateX(110%); transition:transform .3s cubic-bezier(.25,1,.5,1); }
.spanel.left { left:0; transform:translateX(-110%); transition:transform .3s cubic-bezier(.25,1,.5,1); }
.spanel.open { transform:translateX(0); }
.sp-hdr { background:rgba(255,255,255,.07); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.sp-ttl { color:#fff; font-size:13px; font-weight:900; }
.sp-x { background:none; border:none; color:rgba(255,255,255,.5); font-size:18px; cursor:pointer; }
.sp-x:hover { color:#fff; }
.sp-body { padding:14px; overflow-y:auto; flex:1; overscroll-behavior-y:contain; }
.cdisp { background:#111; border-radius:var(--r); padding:9px 13px; margin-bottom:10px; }
.c-hist { color:#3A6A3A; font-size:11px; font-family:monospace; min-height:15px; }
.c-main { color:#00FF88; font-size:28px; font-weight:700; font-family:monospace; text-align:right; min-height:36px; word-break:break-all; }
.cgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.cb { padding:13px 0; border-radius:9px; border:none; font-family:var(--fnt); font-size:15px; font-weight:800; transition:all .1s; cursor:pointer; }
.cb:active { transform:scale(.9); }
.cn { background:#2E2E2E; color:#fff; } .cn:hover { background:#3E3E3E; }
.co { background:#3A3A3A; color:#FFD700; } .co:hover { background:#4A4A4A; }
.ceq { background:var(--red); color:#fff; } .ceq:hover { background:var(--red-d); }
.cc { background:#1E1E1E; color:#FF6B6B; } .cc:hover { background:#2E2E2E; }
/* .rk-sec and .rk-st defined in CEM rekenkaart section below */
.rk-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:11px; margin-bottom:7px; cursor:pointer; transition:background .13s; }
.rk-card:hover { background:rgba(255,255,255,.11); }
.rk-hdr { display:flex; align-items:center; justify-content:space-between; }
.rk-name { color:rgba(255,255,255,.7); font-size:12px; font-weight:800; }
.rk-arr { color:rgba(255,255,255,.4); font-size:12px; transition:transform .2s; }
.rk-card.open .rk-arr { transform:rotate(180deg); }
.rk-body { display:none; margin-top:8px; }
.rk-card.open .rk-body { display:block; }
.rk-form { color:#FFD700; font-size:14px; font-weight:900; font-family:monospace; margin-bottom:4px; }
.rk-ex { color:rgba(255,255,255,.55); font-size:12px; font-weight:700; }
/* .rk-bar and .rk-bfill defined in CEM rekenkaart section below */

/* ── camera widget ── */
.cam-w {
  position:fixed; bottom:70px; right:10px; z-index:85;
  background:rgba(6,4,2,.92); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.18); border-radius:var(--r2);
  overflow:hidden; width:220px; box-shadow:var(--shadow3); transition:width .2s;
}
.cam-vw { position:relative; aspect-ratio:4/3; }
.cam-vw video { width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); }
.cam-cvs { position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); }
.cam-zones { position:absolute; inset:0; display:flex; pointer-events:none; }
.cz { flex:1; border-right:1.5px solid rgba(255,255,255,.15); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:4px; transition:background .15s; }
.cz:last-child { border-right:none; }
.cz.on { background:rgba(200,16,46,.45); }
.cam-tap-row { display:flex; border-top:1px solid rgba(255,255,255,.1); }
.cam-tap { flex:1; padding:8px 2px; background:rgba(255,255,255,.05); border:none; border-right:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:11px; font-weight:900; cursor:pointer; transition:background .12s; font-family:var(--fnt); display:flex; flex-direction:column; align-items:center; gap:2px; }
.cam-tap:last-child { border-right:none; }
.cam-tap:hover,.cam-tap:active { background:rgba(200,16,46,.35); color:#fff; }
.cam-tap .ct-icon { font-size:9px; opacity:.6; }
.cam-tap .ct-lbl { font-size:11px; font-weight:900; }
.cam-tap .ct-key { font-size:9px; opacity:.45; background:rgba(255,255,255,.1); border-radius:3px; padding:1px 4px; }
.cam-dwell { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.cam-dwell svg { width:54px; height:54px; }
.cam-ft { padding:7px 10px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08); }
.cam-st { font-size:11px; font-weight:700; color:rgba(255,255,255,.5); }
.cam-st.ok { color:#00FF88; }
.cam-tog { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); font-size:11px; font-weight:700; padding:4px 10px; border-radius:10px; cursor:pointer; transition:all .13s; font-family:var(--fnt); }
.cam-tog:hover,.cam-tog:active { border-color:var(--red); color:#fff; background:rgba(200,16,46,.2); }

/* ── overlays ── */
.ov { position:fixed; inset:0; background:rgba(10,7,4,.72); backdrop-filter:blur(6px); z-index:100; display:flex; align-items:center; justify-content:center; animation:fadeUp .2s; }
.modal { background:var(--white); border-radius:var(--r3); padding:24px; width:min(480px,93vw); max-height:85vh; overflow-y:auto; overscroll-behavior-y:contain; box-shadow:var(--shadow3); animation:pop .25s cubic-bezier(.175,.885,.32,1.275); }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-ttl { font-size:16px; font-weight:900; color:var(--dark); }
.modal-x { background:none; border:none; font-size:22px; color:var(--g3); cursor:pointer; }
.modal-x:hover { color:var(--dark); }
.flbl { font-size:11px; font-weight:900; color:var(--g4); letter-spacing:.5px; text-transform:uppercase; display:block; margin-bottom:6px; }
.frow { margin-bottom:14px; }
.mbtn { width:100%; padding:13px; background:var(--red); color:#fff; font-size:14px; font-weight:900; border:none; border-radius:var(--r); cursor:pointer; transition:all .13s; font-family:var(--fnt); }
.mbtn:hover { background:var(--red-d); }
.bekijk-opts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:10px; }
.bo { border:2px solid var(--g1); border-radius:var(--r); padding:10px 6px; text-align:center; }
.bo.right { border-color:var(--green); background:var(--gbg); }
.bo-v { font-size:22px; margin-bottom:4px; }
.bo-l { font-size:12px; font-weight:800; color:var(--dark); }


/* ── Walk gate — FIX walk-UX ──────────────────────────────────
   Animated motivator shown when student must walk to new station.
   Replaces silent disabled zones with an engaging call-to-action.
──────────────────────────────────────────────────────────────── */
.walk-gate {
  background: linear-gradient(135deg, rgba(22,18,14,.95) 0%, rgba(42,28,18,.95) 100%);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: var(--r2);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeUp .25s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.walk-gate::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.06), transparent);
  animation: walkShimmer 2s ease-in-out infinite;
}
@keyframes walkShimmer {
  0%,100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.wg-runner {
  flex-shrink: 0;
  animation: wgBounce .6s ease-in-out infinite alternate;
}
@keyframes wgBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.wg-content { flex: 1; }
.wg-station { font-size: 13px; font-weight: 900; letter-spacing: .5px; margin-bottom: 2px; color: rgba(255,255,255,.9); }
.wg-msg     { font-size: 16px; font-weight: 900; color: white; margin-bottom: 6px; }
.wg-steps   { font-size: 13px; font-weight: 800; color: rgba(255,215,0,.9); margin-bottom: 6px; }
.wg-bar-track {
  height: 8px; background: rgba(255,255,255,.1);
  border-radius: 4px; overflow: hidden; margin-bottom: 6px;
}
.wg-bar-fill {
  height: 100%; border-radius: 4px; width: 0%;
  transition: width .3s ease;
}
.wg-hint { font-size: 11px; color: rgba(255,255,255,.80); font-weight: 700; }
.wg-hint kbd { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3); border-radius: 3px; padding: 1px 6px; font-size: 10px; color: #fff; font-weight: 900; }

/* confetti */
.conf { position:fixed; z-index:200; pointer-events:none; border-radius:2px; animation:confDrop 1s ease forwards; }

/* FIX logo: display ROC PNG without colour filter.
   The PNG has its own red brand colour — no inversion needed.
   For dark hero backgrounds we use mix-blend-mode: screen. */
.roc-logo-img {
  height: 38px;
  display: block;
  filter: none;
  mix-blend-mode: screen;
  opacity: .92;
}
/* Logo op donkere nav — geen filter, gewone PNG-kleuren */
.roc-logo-bar-img {
  height: 28px;
  display: block;
  filter: none;     /* brightness(0) invert(1) maakte het wit — verwijderd */
  opacity: .95;
}
/* Tekst-pill op het profielscherm hero */
.roc-label {
  display: inline-block;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.92); font-size: 10px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; padding: 4px 14px; border-radius: 20px; margin-bottom: 10px;
}

/* Camera widget: compact bottom bar on mobile */
@media (max-width:600px) {
  .cam-w {
    /* Override corner position → full-width bottom bar */
    position:fixed !important;
    bottom:0 !important; right:0 !important; left:0 !important;
    width:100% !important;
    border-radius:var(--r2) var(--r2) 0 0;
    border-left:none; border-right:none; border-bottom:none;
    border-top:2px solid rgba(255,255,255,.2);
    z-index:90;
  }
  /* Hide video preview on mobile — just show tap buttons */
  .cam-vw { display:none; }
  .cam-tap-row {
    gap:0;
    border-top:none;
  }
  .cam-tap {
    padding:12px 4px;   /* bigger tap area */
    font-size:13px;
  }
  .cam-tap .ct-lbl { font-size:13px; }
  .cam-tap .ct-key { display:none; } /* hide keyboard hint on touch */
  .cam-ft { padding:6px 14px; }
  /* Push game content up when cam is open */
  #s-game.cam-open .game-body { padding-bottom:80px; }
}

/* Float bars on mobile — smaller, bottom strip */
@media (max-width:600px) {
  .fbar-left, .fbar-right {
    bottom:auto !important;
    flex-direction:row;
    gap:6px;
  }
  .fbar-left {
    top:auto;
    bottom:8px !important;
    left:8px !important;
  }
  .fbar-right {
    top:auto;
    bottom:8px !important;
    right:8px !important;
  }
  .fb-btn {
    width:42px; height:42px;
    border-radius:12px;
    font-size:17px;
  }
  .fb-btn-label { display:none; }  /* hide labels, save space */
}
/* When camera bottom-bar is open, lift the float bars */
@media (max-width:600px) {
  .cam-w[style*="block"] ~ .fbar-left,
  .cam-w[style*="block"] ~ .fbar-right {
    bottom:74px !important;
  }
}

/* ── Mobile walk tap button ─────────────────────────────────── */
.walk-tap-btn {
  display:none;
  position:absolute;
  right:12px; top:50%; transform:translateY(-50%);
  background:var(--red);
  border:none; border-radius:20px;
  padding:6px 14px;
  font-size:11px; font-weight:900; color:#fff;
  font-family:var(--fnt); cursor:pointer;
  align-items:center; gap:5px;
  box-shadow:0 2px 8px rgba(200,16,46,.4);
  z-index:10; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s;
}
@media (pointer:coarse), (max-width:640px) {
  .walk-tap-btn   { display:flex; }
  .walk-prompt    { display:none !important; }
}

/* ── CEM Rekenkaart — linked sections ───────────────────────── */
.rk-sec { margin-bottom:14px; transition:background .2s; border-radius:var(--r); }

/* Active / relevant section — warm highlight */
.rk-sec.rk-active {
  background: rgba(200,16,46,.12);
  border: 1.5px solid rgba(200,16,46,.35);
  padding: 8px;
  border-radius:var(--r);
}
.rk-sec.rk-active .rk-st { color: #FFB3B3; }

/* "nu relevant" badge */
.rk-relevant-badge {
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:10px; font-weight:900;
  padding:2px 8px; border-radius:10px;
  margin-bottom:8px; margin-top:4px;
  animation:fadeUp .2s ease;
}

/* Red dot on 📐 button when relevant content exists */
.rk-dot {
  position:absolute;
  top:-2px; right:-2px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--red);
  border:2px solid rgba(22,18,14,.9);
}
/* fbt-rk needs relative positioning for the dot */
#fbt-rk { position:relative; }

/* Rekenkaart section title */
.rk-st {
  color:rgba(255,255,255,.55);
  font-size:11px; font-weight:900;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}

/* Make bar more visible */
.rk-bar { width:100%; height:14px; background:rgba(255,255,255,.1); border-radius:7px; margin-top:7px; overflow:hidden; }
.rk-bfill { height:100%; border-radius:7px; background:var(--red); }

/* ── 3-tier feedback system ─────────────────────────────────────
   tier1: process clue (attempt 1) — muted, no answer
   tier2: worked example (attempt 2) — clear step layout
   Scientific basis: Sweller CLT, VanLehn error feedback,
   Tulis Positive Error Climate, Kirschner et al. min→full guidance
──────────────────────────────────────────────────────────────── */

/* Tier 1 — softer visual than tier2 */
.fb.tier1 {
  border-color: var(--aline);
  background: var(--abg);
}
.fb-process {
  display:block;
  margin-top:8px;
  font-size:15px;
  color:#3A2000;
  line-height:1.65;
  font-style:normal;
  font-weight:800;
}

/* Tier 2 — worked example with steps */
.fb.tier2 {
  background: var(--bbg);
  border-color: var(--bline);
  color: #0A1E50;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fb-steps {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:8px;
  width:100%;
}
.fb-step {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  color:#0A1E50;
}
.fb-step-n {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px; height:20px;
  border-radius:50%;
  background: #1050A0;
  color:#fff;
  font-size:11px;
  font-weight:900;
  flex-shrink:0;
}
/* Final step (the answer) — green highlight */
.fb-step-final {
  background: var(--gbg);
  border: 1.5px solid var(--gline);
  border-radius: var(--r);
  padding: 6px 10px;
  color: #143820;
}
.fb-step-final .fb-step-n {
  background: var(--green);
  font-size:13px;
  width:22px; height:22px;
}

/* FIX mobiel scroll — antwoorden stapelen niet meer op na meerdere vragen */
@media (max-width:640px) {
  .answer-col {
    /* FIX 2: max-height workaround niet meer nodig — next-wrap zit nu buiten
       answer-col. flex:1 + overflow-y:auto vult de ruimte correct. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* Prevent fb-area growing indefinitely */
#fb-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Geen min-height — groeit alleen als er content is */
}

/* ================================================================
   style.css — MVP1 ADDITIONS
   Context Pack UI, Teacher Panel, ART feedback elements,
   Domain badge, Level Matrix, Capability Report
================================================================ */

/* ─── Context Pack selector ──────────────────────────────────────── */
.cp-row {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.cp-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: var(--g4);
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  font-family: 'Nunito', sans-serif;
}
.cp-btn:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
}
.cp-btn.on {
  border-color: var(--red);
  background: rgba(200,16,46,.18);
  color: white;
}
.cp-btn.on .cp-name { color: white; }
.cp-ico { font-size: 22px; flex-shrink: 0; }
.cp-name { font-size: 13px; font-weight: 800; color: var(--g4); }
.cp-btn.on .cp-name { color: white; }
.cp-lvl { font-size: 10px; color: var(--g3); font-weight: 600; }

/* ─── Teacher mode badge ──────────────────────────────────────────── */
.teacher-badge {
  background: rgba(26,143,208,.25);
  border: 1px solid rgba(26,143,208,.5);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #7BCFFF;
  display: none;
}
.teacher-badge.visible { display: flex; align-items: center; gap: 4px; }

/* ─── Teacher panel (slide-over full-height right) ───────────────── */
.teacher-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(400px, 100vw);
  height: 100dvh;
  background: #0E141F;
  border-left: 2px solid rgba(26,143,208,.35);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transition: right .28s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.6);
}
.teacher-panel.open { right: 0; }
.teacher-section {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.teacher-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--g3);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}

/* Policy buttons */
.policy-row, .domain-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.policy-btn, .domain-filter-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: var(--g4);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  font-family: 'Nunito', sans-serif;
}
.policy-btn.on, .domain-filter-btn.on {
  background: rgba(26,143,208,.3);
  border-color: #1A8FD0;
  color: #7BCFFF;
}

/* ─── Level Calibration Matrix ────────────────────────────────────── */
.level-matrix-view {
  max-height: 300px;
  overflow-y: auto;
}
.lm-grid { display: flex; flex-direction: column; gap: 12px; }
.lm-domain {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  overflow: hidden;
}
.lm-domain-title {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  color: white;
  background: rgba(255,255,255,.07);
}
.lm-level {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.lm-lvl-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 38px;
  text-align: center;
  flex-shrink: 0;
}
.lm-mbo2 { background: rgba(46,204,64,.25); color: #2ECC40; }
.lm-mbo3 { background: rgba(243,156,18,.25); color: #F39C12; }
.lm-mbo4 { background: rgba(231,76,60,.25); color: #E74C3C; }
.lm-details { font-size: 10px; color: var(--g3); line-height: 1.7; }
.lm-misconceptions { color: rgba(255,165,0,.65); }

/* ─── Capability report ───────────────────────────────────────────── */
.capability-report { display: flex; flex-direction: column; gap: 4px; }
.cap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.cap-ok { background: rgba(46,204,64,.1); }
.cap-no { background: rgba(200,16,46,.08); }
.cap-ico { font-size: 13px; flex-shrink: 0; }
.cap-name { flex: 1; color: var(--g4); }
.cap-src { color: rgba(46,204,64,.8); font-size: 10px; }
.cap-fallback { color: rgba(255,165,0,.7); font-size: 10px; }

/* ─── Domain badge in game top bar ───────────────────────────────── */
.domain-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.3);
  color: #FFD700;
}

/* ─── Context Pack badge in game top bar ──────────────────────────── */
.context-pack-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(200,16,46,.2);
  border: 1px solid rgba(200,16,46,.4);
  color: #FF8888;
}

/* ─── ART affect message (affect-regulatie) ────────────────────────
   DOC-ART: affect-bericht voor reflectie. Aparte visuele laag,
   duidelijk onderscheid van cognitieve hint (DOC-PVE RE01/RE02).
──────────────────────────────────────────────────────────────────── */
.art-affect-msg {
  margin: 6px 0 8px;
  padding: 10px 13px;
  background: rgba(120,50,180,.1);
  border-left: 4px solid #8B3FBE;
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  color: #3D1A5C;
  font-weight: 800;
  line-height: 1.55;
}

/* ─── ART reflect message (COM-B stap 2 — reflectie) ──────────────
   Bug B fix: step2_reflect was berekend maar nooit getoond.
   Visueel onderscheiden van affect-msg (amber tint, niet paars).
──────────────────────────────────────────────────────────────────── */
.art-reflect-msg {
  margin: 5px 0 7px;
  padding: 8px 12px;
  background: rgba(52,152,219,.10);
  border-left: 4px solid #2980B9;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #0A2E50;
  font-weight: 700;
  line-height: 1.5;
}

/* ─── ART movement required (Bug F) ──────────────────────────────
   Vervangt de proceshint bij frustrated/overwhelmed zodat bewegen
   de hint ontgrendelt in plaats van dat de hint direct zichtbaar is.
──────────────────────────────────────────────────────────────────── */
.art-move-required {
  margin: 8px 0 4px;
  padding: 10px 14px;
  background: rgba(255,140,0,.12);
  border: 2px dashed rgba(255,140,0,.5);
  border-radius: 10px;
  font-size: 13px;
  color: #5C3000;
  font-weight: 700;
  line-height: 1.55;
}
.art-move-prompt {
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(46,204,64,.12);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(46,204,64,.9);
  font-weight: 700;
}

/* ─── ART affect stats (dashboard) ───────────────────────────────── */
.art-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  color: var(--g4);
}
.art-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  min-width: 80px;
  text-align: center;
}
.art-calm        { background: rgba(46,204,64,.2);  color: #2ECC40; }
.art-uncertain   { background: rgba(243,156,18,.2); color: #F39C12; }
.art-frustrated  { background: rgba(231,76,60,.2);  color: #E74C3C; }
.art-overwhelmed { background: rgba(155,89,182,.2); color: #9B59B6; }

/* ─── Dashboard ART box ────────────────────────────────────────────── */
#art-box { border-left: 3px solid #9B59B6; }

/* ─── Level card: M&C disabled state ─────────────────────────────── */
.lc.dis {
  opacity: .35;
  pointer-events: none;
}

/* ─── Walk gate (behoud v10.4 + verbeteringen) ───────────────────── */
.walk-gate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 14px 16px;
  background: rgba(255,165,0,.08);
  border: 2px solid rgba(200,120,0,.45);
  border-radius: 14px;
  /* Subtiele puls zonder glow die tekst uitwast */
  animation: wgPulse 2.5s ease-in-out infinite;
}
@keyframes wgPulse {
  0%,100% { border-color: rgba(200,120,0,.35); }
  50%      { border-color: rgba(200,120,0,.65); }
}
.wg-runner { flex-shrink: 0; animation: wgWalk 1.2s ease-in-out infinite; }
@keyframes wgWalk {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.wg-content { flex: 1; }
/* Alle tekst donker zodat leesbaar op lichte oranje achtergrond */
.wg-station { font-size: 14px; font-weight: 900; color: #5C3000; margin-bottom: 2px; }
.wg-msg     { font-size: 13px; color: #3A1E00; font-weight: 700; margin-bottom: 2px; }
.wg-steps   { font-size: 12px; color: #8B4500; font-weight: 900; margin-top: 4px; }
.wg-bar-track {
  height: 6px;
  background: rgba(0,0,0,.12);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}
.wg-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width .3s ease;
}
/* Hint tekst: donker en leesbaar, niet uitgewassen */
.wg-hint { font-size: 11px; color: #5C3A00; font-weight: 700; margin-top: 5px; }
.wg-hint kbd {
  background: rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 900;
  color: #3A1E00;
}

/* ─── Feedback tiers — duplicate removed; canonical styles zijn op regel ~827 ─── */

/* ─── Domain filter bar responsive ────────────────────────────────── */
@media (max-width: 360px) {
  .domain-filter-btn { font-size: 10px; padding: 5px 7px; }
  .cp-name { font-size: 12px; }
}

/* ─── Klassikale tip ────────────────────────────────────────────────── */
.klas-tip {
  font-size: 13px;
  color: var(--g4);
  line-height: 1.6;
  padding: 8px 0;
}

/* ─── Dom error rows ──────────────────────────────────────────────── */
.dom-err-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  color: var(--g4);
  font-weight: 700;
}
.dom-err-n {
  font-size: 13px;
  font-weight: 900;
  color: var(--red);
}

/* ── MVP1 Rekenkaart aliases ──────────────────────────────────── */
.rk-sec-title { color:rgba(255,255,255,.55); font-size:11px; font-weight:900;
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.rk-item { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:10px 12px; margin-bottom:6px; }
.rk-formula { color:#FFD700; font-size:13px; font-weight:900; font-family:monospace;
  margin-bottom:3px; line-height:1.5; }
.rk-example { color:rgba(255,255,255,.55); font-size:11px; font-weight:700;
  line-height:1.5; margin-top:2px; }
.rk-bar-fill { height:100%; border-radius:7px; background:var(--red); }
.rk-hl { background:rgba(200,16,46,.12); border:1.5px solid rgba(200,16,46,.35);
  padding:8px; border-radius:var(--r); }

/* ── Welcome screen (s-welcome) ─────────────────────────────── */
#s-welcome { background:var(--cream); }
.welcome-hero {
  position:relative; height:220px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#1a0a0e 0%,#2a1018 40%,#1a0818 100%);
}
.welcome-hero img { 
  position:absolute; inset:0; width:100%; height:100%; 
  object-fit:cover; object-position:center 30%; opacity:.45;
}
.welcome-hero-dim {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,18,14,.97) 0%, rgba(22,18,14,.5) 50%, rgba(22,18,14,.2) 100%);
}
.welcome-hero-content {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; padding:20px;
}
.welcome-roc { font-size:10px; font-weight:800; color:rgba(255,255,255,.5);
  letter-spacing:1.5px; text-transform:uppercase; }
.welcome-title { font-size:38px; font-weight:1000; color:white; letter-spacing:-1px; }
.welcome-title span { color:var(--red); }
.welcome-sub { font-size:13px; font-weight:700; color:rgba(255,255,255,.5); }
.welcome-body { flex:1; padding:20px 16px; display:flex; flex-direction:column; gap:14px; }
.welcome-btn-student {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:20px 18px; border-radius:var(--r2); border:none; cursor:pointer;
  background:var(--red); color:white; font-size:17px; font-weight:900;
  font-family:var(--fnt); box-shadow:0 8px 28px rgba(200,16,46,.45);
  transition:all .18s; width:100%;
}
.welcome-btn-student:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(200,16,46,.5); }
.welcome-btn-klas {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-radius:var(--r2); border:none; cursor:pointer;
  background:linear-gradient(135deg,#1E6AA0 0%,#1050A0 100%);
  color:white; font-size:15px; font-weight:900;
  font-family:var(--fnt); box-shadow:0 6px 22px rgba(16,80,160,.4);
  transition:all .18s; width:100%;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.welcome-btn-klas:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(16,80,160,.55); }
.welcome-btn-klas:focus-visible { outline: 3px solid #7EC8E3; outline-offset: 3px; }
.welcome-btn-teacher {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--r); border:1.5px solid var(--g1);
  cursor:pointer; background:transparent; color:var(--g4);
  font-size:12px; font-weight:700; font-family:var(--fnt); transition:all .18s;
  align-self:center; width:auto;
}
.welcome-btn-teacher:hover { border-color:var(--dark); color:var(--dark); }
/* Klas-join modal secties */
.kj-section {
  background:rgba(255,255,255,.05); border:1px solid var(--g1);
  border-radius:var(--r); padding:12px 14px;
}
.kj-label {
  font-size:12px; font-weight:800; color:var(--blue);
  margin-bottom:4px; letter-spacing:.2px;
}
.welcome-btn-icon { font-size:20px; }
.welcome-btn-teacher .welcome-btn-icon { font-size:16px; }
.welcome-version { text-align:center; font-size:10px; color:var(--g2);
  font-weight:700; letter-spacing:.3px; margin-top:4px; }

/* ── Profile screen improvements ─────────────────────────────── */
.profile-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--g1); flex-shrink:0;
  background:var(--white);
}
.profile-top-title { font-size:16px; font-weight:900; color:var(--dark); }

/* ── Niveau card: hide subtitle ──────────────────────────────── */
.lc .ld { display:block; font-size:10px; color:var(--g3); margin-top:3px; line-height:1.4; }

/* ================================================================
   MOBILE CRITICAL FIXES — iOS Safari / Android Chrome
================================================================ */

/* ── Safe layout for #app on iOS Safari ─────────────────────────
   100dvh = dynamic viewport height (accounts for browser chrome)
   Without this, the game screen overflows and next-btn is cut off. */
html { height: -webkit-fill-available; }
body { min-height: -webkit-fill-available; }
#app {
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  height: -webkit-fill-available;
  max-height: 100dvh;
  max-height: calc(var(--vh, 1vh) * 100);
}

/* ── Game screen: explicit flex chain so answer-col + next-wrap fit */
#s-game {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}
.game-body {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.answer-col {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.next-wrap-outer {
  flex-shrink: 0;
  padding: 10px 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: var(--cream);
  border-top: 1.5px solid var(--g1);
  /* Always on top of scroll content */
  position: relative;
  z-index: 5;
}

/* ── Profile screen pb: scrollable on small screens ─────────────── */
.pb {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* ── Start screen body: scrollable ──────────────────────────────── */
.start-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* ── Pull-to-refresh: prevent on #app level ──────────────────────
   overscroll-behavior: none on body prevents native pull-to-refresh
   on Android Chrome. On iOS, we block touchmove in JS. */
body {
  overscroll-behavior-y: none;
}
#app {
  overscroll-behavior-y: none;
}

/* ── Walk lane: compact on small phones ──────────────────────────── */
@media (max-height: 680px) {
  .walk-lane { height: 52px; }
  .math-scene { height:140px; min-height:140px; max-height:140px; }
  .tq-txt { font-size: 13px; }
  .az { min-height: 56px; }
  .az-v { font-size: 15px; }
}

/* ── Dashboard klas-card: make clickable clearly ─────────────────── */
.klas-card {
  cursor: pointer;
  transition: all .15s;
}
.klas-card:active {
  transform: scale(.98);
  opacity: .85;
}

/* ── Welcome screen: better image fit ───────────────────────────── */
.welcome-hero img {
  object-position: center 20%;
}

/* ── Level card: clean without subtitle ─────────────────────────── */
.lc .ld { display: none !important; }
.lc { padding: 14px 8px; }
.ln { font-size: 28px; margin-bottom: 2px; }
.ll { font-size: 12px; }

/* ── New profile form: wider emoji row ──────────────────────────── */
.ep-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ep {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  border: 2px solid transparent;
}
.ep.s, .ep.sel { border-color: var(--red); background: var(--red-bg); transform: scale(1.15); }
.ep:hover { background: var(--warm); }
.new-form { background: var(--white); border: 2px solid var(--g1); border-radius: var(--r2); padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Profile grid: max visible without scroll */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ── Issue 8: Desktop fullscreen mode ──────────────────────────────
   Verwijdert de twee lege zijpanelen op desktop zodat de app
   het volledige scherm gebruikt. ─────────────────────────────────── */
body.fs-mode #app {
  max-width: 100vw !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.fs-mode {
  background: #0a0a0f !important;
}

/* Toon fullscreen-knop alleen op desktop (>600px) */
@media (min-width: 601px) {
  #fs-btn { display: inline-flex !important; }
}

/* ── Issue 5: Illustratie zoom knop ────────────────────────────────
   Toon zoom-knop zodra er een SVG-visual aanwezig is. ─────────────*/
.has-visual #illus-zoom-btn { display: inline-flex !important; }

/* ── Issue 7: Terugknop startscherm — compact op mobiel ──────────── */
@media (max-width: 380px) {
  .start-top .btn-sw { font-size: 10px; padding: 4px 8px; }
}

/* ════════════════════════════════════════════════════════════════
   EMBODIED COGNITION LAYER — Update 1
   Alle stijlen leven onder .emb-* en #ov-embodied.
   Geen bestaande selectors worden geraakt.
════════════════════════════════════════════════════════════════ */

/* ── CSS Custom properties ──────────────────────────────────── */
:root {
  --emb-ac:      #7B5CF5;   /* Accent (paars) */
  --emb-ok:      #2ECC40;   /* Succes groen */
  --emb-bg:      #16112A;   /* Overlay achtergrond */
  --emb-card:    #1E1836;   /* Modal card */
  --emb-border:  rgba(123,92,245,.35);
  --emb-text:    #EDE9FE;
  --emb-sub:     rgba(237,233,254,.6);
  --emb-radius:  16px;
}

/* ── Embodied start-knop (in answer-col, boven tq-card) ─────── */
.emb-start-wrap {
  padding: 8px 16px 0;
  display: flex;
  justify-content: center;
}
.emb-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2D1B69 0%, #4A1D8A 100%);
  border: 1.5px solid var(--emb-border);
  color: var(--emb-text);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 24px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 12px rgba(123,92,245,.25);
  font-family: inherit;
}
.emb-start-btn:hover, .emb-start-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(123,92,245,.4);
}
.emb-start-btn:active { transform: translateY(0); }
.emb-start-badge {
  background: var(--emb-ac);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: .5px;
}

/* ── Insight-note (na "Gebruik dit") ────────────────────────── */
.emb-insight {
  margin: 8px 16px 0;
  background: linear-gradient(135deg, rgba(45,27,105,.7), rgba(74,29,138,.5));
  border: 1px solid var(--emb-border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--emb-text);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: embSlideIn .3s ease;
}
.emb-insight-ico { font-size: 16px; flex-shrink: 0; }
.emb-insight strong { color: #C4B5FD; }
@keyframes embSlideIn {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Overlay backdrop ───────────────────────────────────────── */
#ov-embodied {
  position: fixed;
  inset: 0;
  background: rgba(8,6,20,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2100;
  padding: 0;
  animation: embFadeIn .25s ease;
}
@keyframes embFadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Modal card ─────────────────────────────────────────────── */
.emb-modal {
  background: var(--emb-card);
  border: 1.5px solid var(--emb-border);
  border-bottom: none;
  border-radius: var(--emb-radius) var(--emb-radius) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 48px rgba(0,0,0,.6);
  animation: embSlideUp .3s cubic-bezier(.22,1,.36,1);
  overscroll-behavior-y: contain;
}
@keyframes embSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────── */
.emb-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 10px;
}
.emb-hd-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.emb-ico  { font-size: 26px; flex-shrink: 0; }
.emb-title { font-size: 14px; font-weight: 800; color: var(--emb-text); line-height: 1.2; }
.emb-sub   { font-size: 11px; color: var(--emb-sub); margin-top: 2px; }

/* Timer */
.emb-timer-wrap  { flex-shrink: 0; text-align: right; }
.emb-ttrack      { width: 64px; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.emb-tbar        { height: 100%; border-radius: 3px; background: var(--emb-ac); transition: width .9s linear, background .5s; width: 0%; }
.emb-ttext       { font-size: 11px; font-weight: 700; color: var(--emb-sub); margin-top: 3px; }

/* ── Body (pattern zone) ────────────────────────────────────── */
.emb-body { padding: 14px 18px 0; }

/* Shared pattern elements */
.emb-instr {
  font-size: 13px;
  line-height: 1.6;
  color: var(--emb-text);
  margin: 0 0 10px;
}
.emb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(123,92,245,.2);
  border: 1px solid var(--emb-border);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #C4B5FD;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.emb-viz {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.emb-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--emb-sub);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.emb-val {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--emb-text);
  margin: 10px 0 6px;
  line-height: 1;
}
.emb-u { font-size: 14px; font-weight: 700; color: var(--emb-sub); }
.emb-diff {
  font-size: 11px;
  color: var(--emb-sub);
  margin-top: 8px;
  line-height: 1.5;
  font-style: italic;
}

/* Pattern B — bar */
.emb-bar-wrap { position: relative; height: 44px; margin: 8px 0; }
.emb-bar-bg {
  position: absolute;
  inset: 14px 0;
  background: rgba(255,255,255,.1);
  border-radius: 6px;
  overflow: hidden;
}
.emb-bar-fg {
  height: 100%;
  border-radius: 6px;
  background: var(--emb-ac);
  transition: width .08s, background .3s;
}
/* emb-bar-tgt: see fix at bottom of file */

/* Pattern A — step dots */
.emb-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}
.emb-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  transition: background .1s, border-color .1s;
}
.emb-dot.on {
  background: var(--emb-ac);
  border-color: var(--emb-ac);
  box-shadow: 0 0 6px rgba(123,92,245,.5);
}

/* Pattern C & E — numberline / timeline */
.emb-nl-wrap, .emb-tl-wrap {
  position: relative;
  height: 40px;
  margin: 10px 0 24px;
}
.emb-nl-line {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
}
.emb-nl-thumb, .emb-tl-thumb {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 20px;
  color: var(--emb-ac);
  cursor: default;
  user-select: none;
  transition: left .06s, color .2s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.emb-nl-ends {
  position: absolute;
  bottom: -20px;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--emb-sub);
}
.emb-tl-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline: 0;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.emb-tl-fill {
  height: 100%;
  background: var(--emb-ac);
  border-radius: 3px;
  transition: width .08s, background .3s;
}

/* Pattern F — tap */
.emb-tap-num {
  text-align: center;
  font-size: 48px;
  font-weight: 900;
  color: var(--emb-text);
  line-height: 1;
  transition: color .2s, transform .1s;
}
.emb-tap-num.near {
  color: var(--emb-ok);
  transform: scale(1.05);
}
.emb-tapgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  margin: 6px 0;
}
.emb-tapd {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--emb-ac);
  opacity: .7;
  animation: embPop .15s ease;
}
@keyframes embPop {
  from { transform: scale(0); opacity:0; }
  to   { transform: scale(1); opacity:.7; }
}

/* Step/tap row buttons */
.emb-step-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 18px;
}
.emb-sb {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--emb-border);
  background: rgba(255,255,255,.06);
  color: var(--emb-text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.emb-sb:active { background: rgba(123,92,245,.3); }
.emb-sb-main {
  flex: 1;
  font-size: 15px;
  background: rgba(123,92,245,.22);
  border-color: rgba(123,92,245,.5);
  transition: background .12s, transform .08s;
}
.emb-sb-main.tapped { transform: scale(.95); background: rgba(123,92,245,.45); }
.emb-sb-main:active { background: rgba(123,92,245,.45); }

/* Fallback slider */
.emb-fb-row  { padding: 0 0 8px; }
.emb-slider  {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--emb-ac) var(--sl-pct, 50%), rgba(255,255,255,.15) var(--sl-pct, 50%));
  outline: none;
  margin-bottom: 4px;
}
.emb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--emb-ac);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.emb-sl-lbl {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--emb-sub);
}

/* Niv4 predict input */
.emb-predict-wrap { margin: 8px 0; }
.emb-predict-lbl  { font-size: 12px; color: var(--emb-sub); display: flex; align-items: center; gap: 8px; }
.emb-pred-input {
  width: 80px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--emb-border);
  border-radius: 8px;
  color: var(--emb-text);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  text-align: center;
  font-family: inherit;
}

/* ── Why-this-helps ─────────────────────────────────────────── */
.emb-why {
  margin: 0 18px 12px;
  font-size: 11px;
  color: var(--emb-sub);
  font-style: italic;
  line-height: 1.6;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid var(--emb-ac);
  border-radius: 0 8px 8px 0;
}

/* ── Controls ───────────────────────────────────────────────── */
.emb-ctrl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 18px 8px;
}
.emb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
}
.emb-btn:active { transform: scale(.96); }
.emb-btn-calib  { background: rgba(255,255,255,.06); color: var(--emb-text); }
.emb-btn-pause  { background: rgba(255,255,255,.06); color: var(--emb-text); }
.emb-btn-use    {
  background: linear-gradient(135deg,#1A6B30,#1E8A3A);
  border-color: rgba(46,204,64,.4);
  color: #fff;
}
.emb-btn-skip {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.08);
}

/* ── A11y row ───────────────────────────────────────────────── */
.emb-a11y { padding: 0 18px 16px; text-align: center; }
.emb-a11y-btn {
  background: none;
  border: none;
  color: var(--emb-sub);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 4px 0;
}

/* ── Calibrate flash ────────────────────────────────────────── */
.emb-calib-flash {
  position: fixed;
  inset: 0;
  background: rgba(123,92,245,.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2200;
  border-radius: var(--emb-radius);
}
.emb-calib-flash.on { opacity: 1; }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .emb-modal, #ov-embodied, .emb-insight, .emb-tapd { animation: none; }
  .emb-bar-fg, .emb-tl-fill, .emb-nl-thumb, .emb-tl-thumb { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   WALK GATE — Sensor-enhanced (Update 2)
   Step dots, animated runner, sensor indicator, iOS permission btn
════════════════════════════════════════════════════════════════ */

/* Step dots row */
.wg-dot-row {
  display: flex;
  gap: 6px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}
.wg-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  background: rgba(0,0,0,.15);
  transition: background .15s, transform .12s, border-color .15s;
  flex-shrink: 0;
}
.wg-dot.on {
  background: var(--wg-accent, #C8102E);
  border-color: rgba(255,255,255,.3);
  transform: scale(1.12);
  box-shadow: 0 0 6px rgba(200,16,46,.5);
}
.wg-dot.next {
  border-color: var(--wg-accent, #C8102E);
  background: rgba(200,16,46,.2);
  animation: wgDotPulse 1s ease-in-out infinite;
}
@keyframes wgDotPulse {
  0%,100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.18); opacity: 1;  }
}

/* Step flash on gate runner */
.wg-runner.step-flash {
  animation: wgStepPop .18s ease !important;
}
@keyframes wgStepPop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* Sensor status indicator */
.wg-sensor-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 3px;
}
.wg-sensor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #AAA;
  flex-shrink: 0;
  transition: background .4s;
}
.wg-sensor-dot.pulse {
  animation: wgSensorPulse 1.5s ease-in-out infinite;
}
@keyframes wgSensorPulse {
  0%,100% { opacity: 1; transform: scale(1);    }
  50%      { opacity: .5; transform: scale(1.35); }
}
.wg-sensor-txt {
  font-size: 11px;
  font-weight: 700;
  color: #5C3A00;
}

/* iOS permission button */
.wg-perm-btn {
  margin-top: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #1A4A8A, #2060C0);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,80,.3);
  transition: transform .12s, opacity .15s;
  display: block;
}
.wg-perm-btn:active  { transform: scale(.95); }
.wg-perm-btn:disabled { opacity: .6; cursor: default; }

/* ── Embodied: fix bar target marker vertical position ──────── */
.emb-bar-tgt {
  position: absolute;
  top: -2px;           /* Sit just above the bar track */
  transform: translateX(-50%);
  font-size: 14px;
  color: #FFD700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ── Embodied: button position already defined above ──────── */

/* ════════════════════════════════════════════════════════════════
   KLASBEHEER — QR-instap systeem (Update 3)
   Alle selectors .cls-* — geen conflicts met bestaande stijlen
════════════════════════════════════════════════════════════════ */

/* ── Print button ───────────────────────────────────────────────── */
.cls-print-btn { font-size: 11px; padding: 5px 10px; width: auto; }

/* ── Add-student form ───────────────────────────────────────────── */
.cls-add-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cls-add-row  { display: flex; gap: 6px; }
.cls-sel      { flex: 1; min-width: 0; font-size: 13px !important; padding: 8px 6px !important; }

/* ── Bulk import ────────────────────────────────────────────────── */
.cls-bulk-details {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.cls-bulk-summary {
  font-size: 12px; font-weight: 700;
  color: var(--g3, rgba(255,255,255,.55));
  cursor: pointer; user-select: none; list-style: none; padding: 2px 0;
}
.cls-bulk-summary::-webkit-details-marker { display: none; }
.cls-bulk-input  { width: 100%; margin-top: 10px; resize: vertical; min-height: 80px; font-size: 13px !important; }
.cls-bulk-opts   { display: flex; gap: 6px; margin-top: 8px; }

/* ── Empty state ────────────────────────────────────────────────── */
.cls-empty     { text-align: center; padding: 28px 16px; margin: 8px 0 14px;
                 border: 1.5px dashed rgba(255,255,255,.15); border-radius: 12px; }
.cls-empty-icon { font-size: 34px; margin-bottom: 8px; }
.cls-empty-sub  { font-size: 11px; color: var(--g3, rgba(255,255,255,.4)); margin-top: 4px; }

/* ── Student cards ──────────────────────────────────────────────── */
#cls-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.cls-card {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px;
  animation: clsIn .2s ease;
  transition: border-color .15s, background .15s;
}
.cls-card:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); }
@keyframes clsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card header row */
.cls-card-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cls-avatar    { font-size: 26px; flex-shrink: 0; line-height: 1; }
.cls-card-meta { flex: 1; min-width: 0; }
.cls-sname     { font-size: 15px; font-weight: 800; color: #fff;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-sbadges   { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.cls-badge     { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.cls-badge-niv  { background: rgba(200,16,46,.2);  color: #FF8FA0; border: 1px solid rgba(200,16,46,.3); }
.cls-badge-pack { background: rgba(30,106,160,.2); color: #7EC8E3; border: 1px solid rgba(30,106,160,.3); }
.cls-del-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,80,80,.35); background: rgba(200,16,46,.12);
  color: rgba(255,120,120,.85); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
  /* Larger touch target for mobile */
  touch-action: manipulation;
}
.cls-del-btn:hover  { background: rgba(200,16,46,.35); color: #fff; border-color: rgba(255,80,80,.6); }
.cls-del-btn:active { transform: scale(.88); }

/* QR row */
.cls-qr-row  { display: flex; align-items: center; gap: 14px; }
.cls-qr-box  { flex-shrink: 0; background: #fff; padding: 6px; border-radius: 10px; line-height: 0; }
.cls-qr-box img,
.cls-qr-box canvas { display: block; border-radius: 6px; }

.cls-qr-side { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cls-copy-btn {
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px; color: #fff; font-size: 12px; font-weight: 700;
  padding: 12px; cursor: pointer; font-family: inherit; text-align: center;
  transition: background .14s; touch-action: manipulation;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.cls-copy-btn:hover  { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.cls-copy-btn:active { transform: scale(.96); }
.cls-qr-hint { font-size: 10px; color: rgba(255,255,255,.4); text-align: center; }

/* Fallback when QRCode lib unavailable */
.cls-qr-fallback {
  width: 130px; height: 130px;
  border: 1.5px dashed rgba(255,255,255,.25); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; font-size: 10px;
  color: rgba(255,255,255,.4);
}
.cls-fallback-link {
  color: #4A9ED0; font-size: 12px; font-weight: 700;
  text-decoration: none; padding: 4px 10px;
  border: 1px solid rgba(74,158,208,.4); border-radius: 8px;
}

/* Help text */
.cls-count-badge {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-left: 6px;
  vertical-align: middle;
}

.cls-help {
  font-size: 11px; color: rgba(255,255,255,.45);
  line-height: 1.6; padding: 6px 0 2px; font-style: italic;
}