/* ============================================================
   StreetQuants — design system
   Duolingo-style: chunky, bright, bouncy, playful-but-rigorous
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#20242f; --ink-soft:#6b7089; --paper:#f3f7fb; --card:#ffffff;
  --mint:#58cc02; --mint-d:#6fe001; --mint-xd:#4a9d02;
  --blue:#1cb0f6; --blue-d:#0d9de3; --blue-xd:#1380b8;
  --purple:#ce82ff; --purple-d:#b96ef2; --purple-xd:#a568cc;
  --pink:#ff5a8a; --pink-d:#e03d6d; --pink-xd:#b02a51;
  --amber:#ffc800; --amber-d:#e6b400; --amber-xd:#c79a00;
  --red:#ff4b4b; --red-d:#e13c3c;
  --teal:#17b8c4; --teal-d:#0f95a0;
  --line:#e4e8f5; --line-soft:#eef1fa;
  --shadow:0 6px 0 rgba(28,32,56,.12);
  --r:18px;
  --font:'Nunito',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
html,body{height:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);overflow:hidden;font-size:16px}
#app{height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-weight:900;letter-spacing:-.01em}
.mono{font-family:var(--mono)}
::selection{background:#c9d7ff}

/* scrollbars */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:#c6cde4;border-radius:8px;border:3px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- chunky button ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:800 15px/1.1 var(--font);letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--mint);border:none;border-radius:14px;padding:0 22px;height:48px;
  cursor:pointer;user-select:none;
  box-shadow:0 4px 0 var(--mint-xd);
  transition:transform .06s,box-shadow .06s,filter .15s;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--mint-xd)}
.btn:disabled{background:#e2e6f2;color:#b3b9cf;box-shadow:0 4px 0 #cdd3e5;cursor:not-allowed;transform:none}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-xd)}
.btn.blue:active{box-shadow:0 0 0 var(--blue-xd)}
.btn.purple{background:var(--purple);box-shadow:0 4px 0 var(--purple-xd)}
.btn.purple:active{box-shadow:0 0 0 var(--purple-xd)}
.btn.pink{background:var(--pink);box-shadow:0 4px 0 var(--pink-xd)}
.btn.pink:active{box-shadow:0 0 0 var(--pink-xd)}
.btn.amber{background:var(--amber);box-shadow:0 4px 0 var(--amber-xd);color:#5c4400}
.btn.amber:active{box-shadow:0 0 0 var(--amber-xd)}
.btn.red{background:var(--red);box-shadow:0 4px 0 #b33;box-shadow:0 4px 0 var(--red-d)}
.btn.red:active{box-shadow:0 0 0 var(--red-d)}
.btn.ghost{background:#fff;color:var(--blue);border:2px solid #d7e0fb;box-shadow:0 3px 0 #d7e0fb;text-transform:none;font-size:14px}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 0 0 #d7e0fb}
.btn.big{height:56px;font-size:17px;padding:0 30px}

/* ---------- top bar ---------- */
.topbar{height:64px;display:flex;align-items:center;gap:10px;padding:0 22px;background:var(--paper);
  position:sticky;top:0;z-index:40}
.stat{display:flex;align-items:center;gap:7px;font:900 16px var(--font)}
.stat .ic{width:24px;height:24px;display:grid;place-items:center;font-size:16px}
.stat.xp .ic{color:var(--amber)}
.stat.streak .ic{color:#ff7a1a}
.stat.gem{margin-left:auto}
.stat.gem .ic{color:#3ec6ff}
.stat.hp .ic{color:var(--red)}
.heart-shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}}

/* ---------- path screen ---------- */
.path-scroll{flex:1;overflow-y:auto;padding:10px 0 130px;position:relative}
.path-head{text-align:center;padding:26px 20px 8px}
.path-head h1{font-size:clamp(26px,3.4vw,38px)}
.path-head p{color:var(--ink-soft);font-weight:700;margin-top:6px}
.units{max-width:640px;margin:0 auto;padding:0 16px}
.unit{margin-top:46px;position:relative}
.unit-banner{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);
  border-radius:20px;padding:14px 18px;box-shadow:var(--shadow);position:sticky;top:70px;z-index:30}
.unit-banner .num{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.unit-banner .tt{flex:1}
.unit-banner .tt .k{font:900 11px var(--font);letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}
.unit-banner .tt h2{font-size:19px}
.unit-banner .prog{font:900 13px var(--font);color:var(--ink-soft);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:6px 12px}
.nodes{display:flex;flex-direction:column;align-items:center;gap:0;padding:34px 0 10px;position:relative}
.node{position:relative;width:100%;display:flex;justify-content:center;margin-bottom:0}
.node-btn{position:relative;width:76px;height:66px;border:none;background:none;cursor:pointer;outline:none}
.node-btn .body{position:absolute;inset:0;border-radius:38px;display:grid;place-items:center;color:#fff;
  box-shadow:0 7px 0 rgba(0,0,0,.24);transition:transform .08s}
.node-btn:hover .body{transform:translateY(-1px)}
.node-btn:active .body{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.24)}
.node-btn .body .glyph{font-size:30px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.node-btn .body::after{content:'';position:absolute;left:12px;right:12px;top:7px;height:12px;border-radius:8px;background:rgba(255,255,255,.28)}
.node-btn .ring{position:absolute;inset:-9px;border-radius:42px;border:3px solid transparent}
.node.done .body{background:var(--gold,#ffd21f)}
.node.done .body{background:#ffcf26;box-shadow:0 7px 0 #d9a400}
.node.open .body{background:var(--mint);box-shadow:0 7px 0 var(--mint-xd)}
.node.locked .body{background:#c9cfe2;box-shadow:0 7px 0 #a8aec7;cursor:not-allowed}
.node.locked{cursor:not-allowed}
.node.locked .body .glyph{opacity:.7}
.node.boss.open .body{background:var(--purple);box-shadow:0 7px 0 var(--purple-xd);border-radius:26px;width:96px;height:78px}
.node.btnx.open .body{background:var(--amber);box-shadow:0 7px 0 var(--amber-xd)}
.node .bub{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--line);
  padding:9px 16px;border-radius:14px;white-space:nowrap;font-weight:900;font-size:14px;box-shadow:0 4px 14px rgba(30,34,60,.12);opacity:0;pointer-events:none;transition:opacity .18s;z-index:35}
.node .bub::after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff}
.node:hover .bub{opacity:1}
.node .bub .sub{display:block;text-align:center;font-weight:700;font-size:11px;color:var(--ink-soft)}
.node .dude{position:absolute;top:-40px;left:calc(50% - 64px);width:44px;text-align:center;font-size:34px;z-index:2;
  animation:bob 1.6s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.path-connect{position:absolute;left:50%;top:0;bottom:0;width:4px;background:repeating-linear-gradient(to bottom,#cdd5ec 0 12px,transparent 12px 26px);transform:translateX(-50%);z-index:0}

/* ---------- lesson screen ---------- */
.lesson{flex:1;display:flex;flex-direction:column;height:100vh;background:var(--card)}
.lesson-top{display:flex;align-items:center;gap:16px;padding:14px 22px;flex-shrink:0}
.x-close{background:none;border:none;font-size:24px;color:#c2c8dc;cursor:pointer;line-height:1;padding:4px 8px;border-radius:10px}
.x-close:hover{color:var(--ink);background:var(--paper)}
.pbar-wrap{flex:1;max-width:560px;display:flex;align-items:center;gap:10px}
.pbar{flex:1;height:16px;background:#e7eaf5;border-radius:9px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--mint);border-radius:9px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.hp-wrap{display:flex;align-items:center;gap:5px;font:900 17px var(--font)}
.hp-wrap .hicon{color:var(--red);font-size:19px}
.lesson-body{flex:1;overflow-y:auto;display:flex;justify-content:center;padding:12px 22px 30px}
.q-col{width:100%;max-width:640px;display:flex;flex-direction:column;gap:18px}
.q-title{font-size:clamp(20px,2.6vw,27px);font-weight:900;line-height:1.25}
.q-title .mono{background:#eef2ff;border-radius:8px;padding:0 6px}
.q-sub{color:var(--ink-soft);font-weight:700;font-size:15px;margin-top:-8px}
.ex-card{background:var(--paper);border:2px solid var(--line-soft);border-radius:20px;padding:22px}
.info-card{background:linear-gradient(160deg,#eef4ff,#f6f0ff);border:2px solid #e0e6fa;border-radius:22px;padding:24px 26px}
.info-card h3{font-size:22px;margin-bottom:8px}
.info-card p{color:#3c415c;font-weight:600;line-height:1.55;font-size:16px}
.info-card .kv{display:flex;gap:10px;align-items:baseline;margin-top:10px}
.info-card .kv b{font-family:var(--mono);background:#fff;border:2px solid var(--line);padding:2px 8px;border-radius:8px;font-size:14px}

/* choices */
.choices{display:flex;flex-direction:column;gap:12px}
.choices.grid2{display:grid;grid-template-columns:1fr 1fr}
.choice{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid #dfe3f0;border-bottom-width:4px;
  border-radius:16px;padding:14px 16px;cursor:pointer;font:700 16px var(--font);transition:all .12s;text-align:left;color:var(--ink)}
.choice[data-ic]::before,.wchip[data-ic]::before{content:attr(data-ic);font-size:1.15em;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
.choice:hover{border-color:#b9c6f2;background:#f8faff}
.choice.sel{border-color:var(--blue);background:#eef4ff;box-shadow:inset 0 0 0 1px var(--blue)}
.choice.right{border-color:var(--mint);background:#e9fbf3;box-shadow:inset 0 0 0 1px var(--mint)}
.choice.wrong{border-color:var(--red);background:#ffeff0;box-shadow:inset 0 0 0 1px var(--red)}
.choice .ck{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:#dfe3f0;font-size:13px;flex-shrink:0}
.choice.right .ck{background:var(--mint)}
.choice.wrong .ck{background:var(--red)}
.choice .big-emoji{font-size:26px}
.choice.disabled{pointer-events:none;opacity:.55}
.choice .c-title{font-weight:900;font-size:15px}
.choice .c-desc{font-weight:600;font-size:12.5px;color:var(--ink-soft);margin-top:2px}

/* word bank */
.wordbank{display:flex;flex-wrap:wrap;gap:10px;padding:14px;background:#fff;border:2px solid #dfe3f0;border-radius:16px;min-height:64px}
.wb-slot{min-height:54px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.wchip{font:800 16px var(--font);background:#fff;border:2px solid #dfe3f0;border-bottom-width:4px;border-radius:12px;padding:12px 16px;cursor:grab;user-select:none;transition:all .1s}
.wchip:hover{border-color:#b9c6f2}
.wchip.used{opacity:.28;pointer-events:none}
.wchip.correct-flash{border-color:var(--mint);background:#e9fbf3;animation:pop .3s}
.wchip.wrong-flash{animation:wob .4s;border-color:var(--red);background:#ffeff0}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes wob{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sort-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sort-zone{border:2px dashed #c9d2ea;border-radius:16px;padding:10px;min-height:150px;background:#f8faff;display:flex;flex-direction:column;gap:8px}
.sort-zone.over{border-color:var(--blue);background:#eef4ff;border-style:solid}
.sort-zone h4{text-align:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.match-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:10px}
.match-heads{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-bottom:4px}
.match-heads span{font:900 11px var(--font);letter-spacing:.12em;color:#a7adc4;text-transform:uppercase;padding-left:6px}
.match-item{background:#fff;border:2px solid #dfe3f0;border-bottom-width:4px;border-radius:14px;padding:13px 14px;cursor:pointer;font:800 14.5px var(--font);text-align:center;transition:all .12s}
.match-item.mi-term{display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:900;background:linear-gradient(160deg,#fff,#f6f9ff)}
.match-item.mi-term .term-em{font-size:20px}
.match-item.mi-term .term-t{font-family:var(--mono);letter-spacing:.02em}
.match-item.mi-def{text-align:left;font-weight:700;font-size:13.5px;line-height:1.35;display:flex;align-items:center}
.match-item:hover{border-color:#b9c6f2}
.match-item.selA{border-color:var(--blue);background:#eef4ff}
.match-item.selB{border-color:var(--purple);background:#f4efff}
.match-item.locked{border-color:var(--mint);background:#e9fbf3;pointer-events:none}
.match-item.err{animation:wob .4s;border-color:var(--red);background:#ffeff0}
.match-item.locked .pair-no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint);color:#fff;font-size:11px;margin-right:6px}

/* numeric */
.num-row{display:flex;align-items:center;gap:10px;justify-content:center}
.num-input{font:800 30px var(--mono);text-align:center;border:3px solid #dfe3f0;border-radius:14px;padding:10px 16px;width:180px;outline:none;background:#fff;color:var(--ink)}
.num-input:focus{border-color:var(--blue)}
.num-input.right{border-color:var(--mint);background:#e9fbf3}
.num-input.wrong{border-color:var(--red);background:#ffeff0}
.num-input::-webkit-outer-spin-button,.num-input::-webkit-inner-spin-button{-webkit-appearance:none}
.tolerance{font:700 13px var(--ink-soft)}

/* slider */
.slider-wrap{padding:10px 6px 2px}
.slider{width:100%;height:14px;-webkit-appearance:none;background:linear-gradient(to right,var(--blue) 0%,var(--blue) var(--fill,50%),#dfe3f0 var(--fill,50%),#dfe3f0 100%);border-radius:8px;outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 3px 8px rgba(40,60,120,.25);cursor:grab}
.slider:active::-webkit-slider-thumb{cursor:grabbing}
.slider-val{font:900 22px var(--mono);color:var(--blue)}

/* ---------- footer / check bar ---------- */
.lesson-foot{flex-shrink:0;border-top:2px solid var(--line);background:var(--card);padding:14px 22px}
.foot-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:14px;min-height:56px}
.fb{flex:1;display:flex;align-items:center;gap:12px;background:#e9fbf3;border:2px solid #bfe9d6;border-radius:14px;padding:10px 16px;animation:rise .25s}
.fb.bad{background:#ffeff0;border-color:#ffd0d4}
.fb.amber{background:#fff6e3;border-color:#ffe2a8}
.fb .ic{font-size:24px}
.fb .tx b{display:block;font-size:15px}
.fb .tx span{font-size:13.5px;color:#4c516b;font-weight:600}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.foot-btns{margin-left:auto;display:flex;gap:10px}
.skip-link{background:none;border:none;font:800 13px var(--font);letter-spacing:.05em;color:#a7adc4;cursor:pointer;text-transform:uppercase;padding:10px}
.skip-link:hover{color:var(--ink-soft)}

/* ---------- mascot bubbles ---------- */
.mascot-line{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:2px solid var(--line-soft);border-radius:18px;padding:14px 16px}
.mascot-line .face{font-size:40px;line-height:1;animation:bob 2.4s ease-in-out infinite}
.mascot-line .say{font-weight:700;color:#39406a;line-height:1.5;font-size:15.5px;padding-top:6px}
.mascot-line .say b{color:var(--ink)}
.mascot-line .say .mono{background:#fff;border:1.5px solid var(--line);border-radius:6px;padding:0 5px;font-size:13.5px}

/* ---------- completion ---------- */
.done-hero,.intro-hero{text-align:center;padding:30px 10px 6px}
.done-hero .big,.intro-hero .big{font-size:76px;animation:pop .5s}
.done-hero h1,.intro-hero h1{font-size:clamp(28px,4vw,40px);margin-top:6px}
.done-hero p,.intro-hero p{color:var(--ink-soft);font-weight:700;margin-top:4px}
.reward-row{display:flex;justify-content:center;gap:14px;margin:22px 0;flex-wrap:wrap}
.reward{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 22px;min-width:120px;text-align:center;box-shadow:var(--shadow);animation:rise .4s backwards}
.reward:nth-child(2){animation-delay:.12s}
.reward:nth-child(3){animation-delay:.24s}
.reward .v{font:900 30px var(--font)}
.reward .k{font:800 11px var(--font);letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;margin-top:2px}
.xp-pop{position:fixed;font:900 26px var(--amber);text-shadow:0 2px 0 #fff;pointer-events:none;z-index:99;animation:xpfloat 1s forwards}
@keyframes xpfloat{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-70px);opacity:0}}

/* ---------- bottom nav ---------- */
.bnav{position:fixed;left:0;right:0;bottom:0;height:74px;background:var(--card);border-top:2px solid var(--line);display:flex;z-index:50}
.bnav button{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font:800 11px var(--font);letter-spacing:.06em;color:#9aa1bd;text-transform:uppercase;border-top:4px solid transparent}
.bnav button .bi{font-size:22px}
.bnav button.on{color:var(--mint);border-top-color:var(--mint);background:linear-gradient(to bottom,#eafff6,transparent)}
.bnav button:hover{color:var(--ink-soft)}

/* ---------- extras screens ---------- */
.page{flex:1;overflow-y:auto;padding:24px 22px 110px}
.page-inner{max-width:760px;margin:0 auto}
.page h1{font-size:clamp(24px,3vw,34px)}
.page .lede{color:var(--ink-soft);font-weight:700;margin:6px 0 22px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.xcard{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.xcard .xt{font-weight:900;font-size:16px;display:flex;gap:8px;align-items:center}
.xcard .xd{color:var(--ink-soft);font-weight:600;font-size:13.5px;line-height:1.45}
.xcard .xbtn{margin-top:10px;align-self:flex-start}
.stat-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.stat-box{flex:1;min-width:110px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.stat-box .v{font:900 26px var(--font)}
.stat-box .k{font:800 11px var(--font);letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.badge{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:#fff;border:3px solid var(--line);box-shadow:var(--shadow)}
.badge.earned{border-color:var(--amber);background:linear-gradient(160deg,#fff8e0,#ffefc2)}
.badge.locked-badge{filter:grayscale(1);opacity:.45}
.ach-row{display:flex;gap:16px;flex-wrap:wrap}
.ach{width:110px;text-align:center;font-weight:800;font-size:12.5px}
.ach .nm{margin-top:8px}
.quest{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.quest.done-q{border-color:#bfe9d6;background:#f2fdf9}
.quest .qi{font-size:28px}
.quest .qt{flex:1}
.quest .qt b{display:block;font-size:15px}
.quest .qt .qbar{margin-top:8px;height:10px;background:#e7eaf5;border-radius:6px;overflow:hidden}
.quest .qt .qbar i{display:block;height:100%;background:var(--amber);border-radius:6px}
.quest .qr{font:900 14px var(--font);color:var(--amber);white-space:nowrap}
.lite-chart{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.lite-chart h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal .d{aspect-ratio:1;border-radius:9px;background:#e7eaf5;display:grid;place-items:center;font:800 12px var(--mono);color:#9aa1bd}
.cal .d.hot{background:linear-gradient(160deg,#ff9d3c,#ff7a1a);color:#fff}
.cal .d.today{outline:3px solid var(--amber);outline-offset:1px}

/* ---------- sims / playground widgets ---------- */
.sim-canvas{width:100%;border-radius:16px;border:2px solid var(--line);background:linear-gradient(180deg,#0f1424,#151b30);display:block}
.sim-hud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.hud-chip{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 14px;font:800 14px var(--font);display:flex;gap:8px;align-items:center;box-shadow:0 2px 0 var(--line)}
.hud-chip b{font-family:var(--mono)}
.hud-chip .up{color:var(--mint-xd)}
.hud-chip .down{color:var(--red-d)}
.range-lab{display:flex;align-items:center;gap:12px;margin-top:12px;font-weight:800;font-size:13px}
.range-lab input{flex:1}
.range-lab .rv{font-family:var(--mono);font-size:15px;min-width:74px;text-align:right}
.shock{animation:shockflash .5s}
@keyframes shockflash{0%{box-shadow:0 0 0 4px var(--amber)}100%{box-shadow:none}}
.big-verdict{font:900 clamp(22px,3vw,30px) var(--font);text-align:center;padding:10px;border-radius:14px}
.big-verdict.good{background:#e9fbf3;color:var(--mint-xd)}
.big-verdict.bad{background:#ffeff0;color:var(--red-d)}

/* playground */
.pg-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.pg-grid{grid-template-columns:minmax(0,1fr)}}
.pg-panel{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.pg-panel h3{font-size:17px;margin-bottom:10px}
.pg-panel .hint{font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:10px;line-height:1.5}
.knob{display:flex;align-items:center;gap:10px;margin:12px 0}
.knob label{font-weight:900;font-size:13px;width:120px;flex-shrink:0}
.knob .kv{font-family:var(--mono);font-size:14px;width:64px;text-align:right}
@media(max-width:560px){.knob{flex-wrap:wrap;gap:8px}.knob label{width:100%;margin-bottom:-2px}}

/* strategy card */
.strat-row{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.strat-row .em{font-size:26px}
.strat-row .nm{flex:1;font-weight:800}
.strat-row .nm small{display:block;color:var(--ink-soft);font-weight:700;font-size:12px}
.strat-row .sh{font-family:var(--mono);font-weight:800}
.sh.good{color:var(--mint-xd)}.sh.bad{color:var(--red-d)}

/* ---------- confetti & overlays ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:200}
.confetti{position:absolute;width:11px;height:11px;opacity:1;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}
.overlay{position:fixed;inset:0;background:rgba(24,28,48,.55);display:grid;place-items:center;z-index:120;backdrop-filter:blur(3px)}
.modal{background:var(--card);border-radius:24px;padding:30px 34px;max-width:440px;width:92%;text-align:center;box-shadow:0 24px 70px rgba(20,24,50,.35);animation:mpop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes mpop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal h2{font-size:26px}
.modal p{color:var(--ink-soft);font-weight:700;margin-top:8px;line-height:1.5}
.modal .row{display:flex;gap:10px;justify-content:center;margin-top:22px}
.hearts-lost{font-size:44px;margin:12px 0}
.toast-wrap{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:150;align-items:center}
.toast{background:var(--ink);color:#fff;font:800 14px var(--font);padding:12px 20px;border-radius:14px;box-shadow:0 10px 30px rgba(20,24,50,.3);animation:rise .25s;display:flex;gap:8px;align-items:center}
.toast b{color:var(--amber)}

/* ---------- level up ---------- */
.lvl-badge{width:120px;height:120px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(160deg,#ffd21f,#ff9d3c);
  display:grid;place-items:center;font:900 44px var(--font);color:#7a4b00;box-shadow:0 10px 0 #d98e00,0 0 0 10px #fff3cf;animation:mpop .5s cubic-bezier(.34,1.56,.64,1)}

/* misc */
.divider{height:2px;background:var(--line-soft);border:none;margin:16px 0}
.tag{display:inline-block;font:800 11px var(--font);letter-spacing:.08em;text-transform:uppercase;border-radius:8px;padding:4px 9px;background:#eef2ff;color:var(--blue-d)}
.tag.pur{background:#f4efff;color:var(--purple-d)}
.tag.amb{background:#fff6e0;color:#9c6b00}
.tag.min{background:#e9fbf3;color:var(--mint-xd)}
.tag.red{background:#ffeff0;color:var(--red-d)}
.pill-num{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:9px;background:var(--ink);color:#fff;font:800 13px var(--mono);padding:0 6px}
.fade-in{animation:fadein .3s}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.crown-row{position:absolute;top:-30px;right:-8px;font-size:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2));animation:bob 2s infinite}

/* ============================================================
   StreetQuants v3 — Qwante companion + sort visual aids
   ============================================================ */
/* auto-emoji markers on every choice & chip */
.choice[data-autoic],.wchip[data-autoic]{position:relative}

/* numeric question mark icon */
.num-input::placeholder{opacity:.5}

/* match term/def icons already inline */

/* ---------- Qwante companion ---------- */
#qwante{position:fixed;left:14px;bottom:88px;z-index:95;width:80px;pointer-events:none}
.q-owl{pointer-events:auto;cursor:pointer;filter:drop-shadow(0 6px 14px rgba(30,34,60,.25));animation:qbob 2.6s ease-in-out infinite;transition:transform .15s}
.q-bub{position:absolute;left:92px;bottom:52px;opacity:0;transform:translateY(8px) scale(.92);transition:all .22s cubic-bezier(.34,1.56,.64,1);
  background:#fff;border:2px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 14px;width:max-content;max-width:260px;
  font:800 13.5px/1.4 var(--font);color:var(--ink);box-shadow:0 8px 24px rgba(30,34,60,.18)}
/* reduce motion: no bobbing */
body.reduce-motion .q-owl{animation:none}
body.reduce-motion .q-owl{transform:none}

/* sort exercise: visual legend + emoji chips */
.sort-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sort-legend span{background:#fff;border:2px solid var(--line);border-bottom-width:3px;border-radius:11px;padding:7px 11px;font:800 12.5px var(--font);color:var(--ink)}
.wchip .chip-ic{font-size:17px;margin-right:2px}
.sort-zone h4{font-size:14px}
.sort-zone .zhint{font:700 11px var(--font);color:var(--ink-soft);text-align:center;margin-top:-4px;margin-bottom:2px}

/* sequence landing slots */
.seq-out{gap:8px}
.seq-slot{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:#eef2ff;color:var(--blue-d);font:900 14px var(--mono);border:2px dashed #c9d5f5}
.wchip{position:relative}

/* Qwante interaction states (restored) */
.q-owl:hover{transform:scale(1.07)}
.q-owl:active{transform:scale(.96)}
@keyframes qbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.q-bub.show{opacity:1;transform:translateY(0) scale(1)}
.q-bub b{color:var(--mint-xd)}
/* lesson screen: no bottom nav — owl sits lower */
body.has-bnav #qwante{bottom:88px}
body:not(.has-bnav) #qwante{bottom:24px}