:root {
  --bg: #0e1433; --bg2: #172057; --panel: #1d2862; --panel2: #263376; --line: rgba(255,255,255,.12);
  --text: #f4f6ff; --muted: #aab4e0; --accent: #FFC83D; --good: #3ddc97; --warm: #ffb547; --info: #6ab8ff; --soft: #ff8fa3;
  --c0: #FFC83D; --c1: #36D27A; --c2: #3D8BFF; --c3: #A45CFF; --c4: #FF8A3D; --c5: #FF4D7E; --c6: #19D3DA;
  --r: 18px; --font: 'Nunito', system-ui, sans-serif; --display: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --world-a: #1b2463; --world-b: #0e1433;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1.35;
  -webkit-tap-highlight-color: transparent; overflow: hidden; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#particles { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100vw; height: 100vh; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .5px; margin: 0; }

/* ---------- buttons ---------- */
.btn { --b: #3a4aa0; --bt: #2a377c; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--b); border-radius: 14px; padding: 12px 22px; font-weight: 800; font-size: 18px; color: #fff;
  box-shadow: 0 5px 0 var(--bt), 0 8px 18px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .15s; touch-action: manipulation; user-select: none; min-height: 48px; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bt); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.btn.primary { --b: #FFC83D; --bt: #c9921a; color: #2b1d00; }
.btn.good { --b: #2fc285; --bt: #1d8a5c; }
.btn.ghost { --b: rgba(255,255,255,.08); --bt: rgba(0,0,0,.25); box-shadow: 0 3px 0 var(--bt); }
.btn.small { padding: 8px 14px; font-size: 15px; min-height: 40px; }
.btn.big { padding: 16px 30px; font-size: 22px; }
.btn.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 5px 0 var(--bt), 0 0 0 0 rgba(255,200,61,.6); } 50% { box-shadow: 0 5px 0 var(--bt), 0 0 0 12px rgba(255,200,61,0); } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.center { display: flex; justify-content: center; align-items: center; }
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }

/* ---------- place colours ---------- */
.pc0 { --pc: var(--c0); } .pc1 { --pc: var(--c1); } .pc2 { --pc: var(--c2); } .pc3 { --pc: var(--c3); }
.pc4 { --pc: var(--c4); } .pc5 { --pc: var(--c5); } .pc6 { --pc: var(--c6); }
.dg { color: var(--pc, inherit); }
.num { font-family: var(--display); letter-spacing: 1px; }
.numline { font-family: var(--display); font-size: clamp(40px, 8vw, 72px); line-height: 1; display: inline-flex; align-items: baseline; }
.numline .dg.hl { background: rgba(255,255,255,.14); border-radius: 10px; padding: 0 6px; outline: 3px solid var(--pc, #fff); }
.numline .comma { color: var(--muted); margin: 0 1px; }

/* ---------- menu ---------- */
.menu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px;
  background: radial-gradient(1200px 600px at 50% 10%, #2b3a9a 0%, var(--bg) 60%); position: relative; overflow: hidden; }
.menu .bgblocks { position: absolute; inset: 0; opacity: .22; pointer-events: none; }
.title { font-family: var(--display); font-size: clamp(42px, 9vw, 92px); line-height: .95; text-align: center; text-shadow: 0 6px 0 #0a0f2a, 0 12px 30px rgba(0,0,0,.4); position: relative; }
.title span { display: inline-block; margin: 0 .12em; }
.title .t1 { color: var(--c0); } .title .t2 { color: var(--c1); } .title .t3 { color: var(--c2); }
.subtitle { color: var(--muted); font-size: 18px; text-align: center; max-width: 520px; position: relative; }
.menu-buttons { display: grid; gap: 14px; width: min(360px, 100%); position: relative; }
.menu-buttons .btn { width: 100%; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,0,0,.25); border-bottom: 1px solid var(--line); min-height: 60px; flex-wrap: wrap; }
.topbar .grow { flex: 1; min-width: 120px; }
.pill { background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.iconbtn { width: 48px; height: 48px; border-radius: 14px; border: 0; background: rgba(255,255,255,.08); cursor: pointer; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.iconbtn:hover { background: rgba(255,255,255,.16); }

/* ---------- map ---------- */
.map { flex: 1; overflow-y: auto; padding: 20px 16px 60px; background: linear-gradient(180deg, #13205a, #0b1130); }
.map-inner { max-width: 760px; margin: 0 auto; position: relative; }
.map-path { position: absolute; inset: 0; pointer-events: none; }
.node { position: relative; display: flex; align-items: center; gap: 14px; margin: 18px 0; width: min(440px, 100%); cursor: pointer; background: none; border: 0; text-align: left; padding: 0; }
.node:nth-child(odd) { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.node .orb { width: 92px; height: 92px; border-radius: 28px; flex: none; display: grid; place-items: center; font-size: 40px; position: relative;
  background: linear-gradient(160deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #000)); box-shadow: 0 8px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35); transition: transform .15s; }
.node:hover .orb { transform: translateY(-3px) rotate(-2deg); }
.node.locked .orb { filter: grayscale(1) brightness(.5); }
.node.current .orb { animation: bob 2s ease-in-out infinite; outline: 4px solid #fff; outline-offset: 4px; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.node .lnum { position: absolute; top: -8px; left: -8px; background: #fff; color: #111; border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--display); font-size: 16px; }
.node .info h3 { font-size: 22px; }
.node .info .goal { color: var(--muted); font-size: 15px; }
.stars { color: #ffd34d; letter-spacing: 2px; font-size: 18px; }
.stars .off { color: rgba(255,255,255,.2); }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(5,8,25,.7); display: grid; place-items: center; z-index: 40; padding: 16px; animation: fade .2s; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 24px; width: min(560px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pop .25s; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal h2 { font-size: 30px; margin-bottom: 6px; }
.sec-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.sec-list span { font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.07); }
.sec-list span.done { background: rgba(61,220,151,.2); color: var(--good); }
input.text { font: inherit; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); width: 100%; }

/* ---------- lesson layout ---------- */
.lesson { flex: 1; display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, var(--world-a), var(--world-b)); position: relative; }
.lesson .worldart { position: absolute; inset: 0; pointer-events: none; opacity: .1; overflow: hidden; }
.lesson .worldart svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 38%; }
.lesson > *:not(.worldart) { position: relative; }
.pips { display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.pip { flex: 1; min-width: 34px; text-align: center; font-size: 11px; color: var(--muted); }
.pip .bar { height: 7px; border-radius: 9px; background: rgba(255,255,255,.12); margin-bottom: 3px; }
.pip.done .bar { background: var(--good); }
.pip.now .bar { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.pip.now { color: #fff; }
.pip .lbl { display: block; white-space: nowrap; }
@media (max-width: 640px) { .pip .lbl { display: none; } }
.taskbar { margin: 8px 12px 0; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.28); display: flex; gap: 10px; align-items: center; font-size: 18px; min-height: 48px; }
.taskbar .ico { font-size: 22px; }
.stage { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 130px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage > * { max-width: 1100px; width: 100%; }
.coach { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; z-index: 20; }
.coach .digi { width: 84px; height: 84px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.coach .bubble { pointer-events: auto; background: #fff; color: #1a1f3c; border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-size: 18px; max-width: 720px; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: pop .2s; }
.coach .bubble:empty { display: none; }
.coach .bubble b { color: #3a3fd0; }
@media (max-width: 640px) { .coach .digi { width: 58px; height: 58px; } .coach .bubble { font-size: 16px; } }

/* ---------- story ---------- */
.story { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 10px; }
.story .scene { width: 100%; max-width: 900px; height: clamp(180px, 34vh, 320px); border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(180deg, var(--world-a), var(--world-b)); border: 2px solid var(--line); }
.story .scene svg { width: 100%; height: 100%; }
.story .scene .digi-big { position: absolute; bottom: 10px; left: 50%; width: 130px; transform: translateX(-50%); animation: bob 2.4s ease-in-out infinite; }
.dialog { background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 20px; padding: 18px 22px; font-size: 21px; max-width: 900px; width: 100%; min-height: 96px; }
.dialog .who { font-family: var(--display); color: var(--accent); font-size: 16px; letter-spacing: 1px; margin-bottom: 4px; }
.dialog.narrator { font-style: italic; color: #dfe6ff; }

/* ---------- blocks ---------- */
.blk { display: block; overflow: visible; }
.blocks-pic { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: center; }
.bgroup { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bgroup .items { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; justify-content: center; }
.bgroup .glabel { font-size: 13px; color: var(--pc); font-weight: 800; }
.bgroup.zero .items { min-width: 40px; min-height: 40px; border: 2px dashed rgba(255,255,255,.25); border-radius: 10px; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.counter { width: var(--cs, 44px); height: var(--cs, 44px); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: calc(var(--cs, 44px) * .27); color: #111;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.25); flex: none; }

/* ---------- place-value board ---------- */
.pv-board { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); border-radius: 16px; overflow: hidden; border: 2px solid var(--line); background: rgba(0,0,0,.25); }
.pv-col { display: flex; flex-direction: column; text-align: center; border-left: 2px solid var(--line); }
.pv-col:first-child { border-left: 0; }
.pv-head { background: var(--pc); color: #10142e; font-weight: 900; font-size: 13px; padding: 6px 8px; text-transform: uppercase; letter-spacing: .5px; }
.pv-cell { font-family: var(--display); font-size: 44px; padding: 6px 10px; color: var(--pc); min-height: 64px; display: grid; place-items: center; }
.pv-cell.slot { border: 3px dashed rgba(255,255,255,.25); margin: 8px; border-radius: 12px; min-height: 64px; min-width: 56px; cursor: pointer; }
.pv-cell.slot.hover, .drop-hover { background: rgba(255,200,61,.15); border-color: var(--accent) !important; }
.pv-board.small .pv-cell { font-size: 26px; min-height: 40px; }
.pv-board.small .pv-head { font-size: 10px; padding: 4px; }

/* ---------- builder ---------- */
.builder { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.table-area { position: relative; width: 100%; min-height: 150px; border-radius: 18px; background: rgba(0,0,0,.18); border: 2px dashed rgba(255,255,255,.15); }
.table-area .loose { position: absolute; cursor: grab; touch-action: none; border: 0; background: none; padding: 0; transition: transform .15s; }
.table-area .loose:hover { transform: scale(1.08) rotate(-3deg); }
.table-area .hintlbl { position: absolute; top: 8px; left: 12px; font-size: 13px; color: var(--muted); }
.mat { display: flex; gap: 10px; justify-content: center; width: 100%; align-items: stretch; }
.mcol { flex: 0 1 auto; background: rgba(0,0,0,.25); border: 2px solid color-mix(in srgb, var(--pc) 45%, transparent); border-radius: 16px; display: flex; flex-direction: column; min-width: 86px; transition: box-shadow .2s, border-color .2s; }
.mcol.full { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,200,61,.35), 0 0 30px rgba(255,200,61,.3); animation: shake .5s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.mcol .mhead { background: var(--pc); color: #10142e; font-weight: 900; text-align: center; font-size: 13px; padding: 6px; border-radius: 13px 13px 0 0; text-transform: uppercase; letter-spacing: .5px; }
.mcol .mbody { flex: 1; padding: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-end; justify-content: center; min-height: 120px; position: relative; }
.mcol .mfoot { text-align: center; font-family: var(--display); font-size: 30px; color: var(--pc); padding: 2px 0 6px; min-height: 40px; }
.mcol .mfoot.hide { visibility: hidden; }
.mcol .tradebtn { margin: 0 8px 8px; }
.mblock { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; position: relative; }
.mblock.ghost { opacity: .28; filter: grayscale(.3); pointer-events: none; }
.mblock.ghost svg { stroke-dasharray: 3 3; }
.frame { display: grid; grid-template-columns: repeat(5, auto); gap: 5px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.05); }
.frame .slot { width: var(--fs); height: var(--fs); border: 2px dashed rgba(255,255,255,.25); border-radius: 4px; display: grid; place-items: center; }
.tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px; background: rgba(0,0,0,.22); border-radius: 18px; }
.source { border: 0; background: rgba(255,255,255,.06); border-radius: 14px; padding: 8px 12px; cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 4px; touch-action: none; min-width: 76px; min-height: 76px; justify-content: flex-end; }
.source:hover { background: rgba(255,255,255,.12); }
.source .slbl { font-size: 13px; color: var(--pc); }
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.fly { position: fixed; z-index: 55; pointer-events: none; }
.floater { position: fixed; z-index: 65; pointer-events: none; font-family: var(--display); font-size: 28px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4); white-space: nowrap; transform: translate(-50%, -50%); }

/* ---------- question card ---------- */
.qcard { background: rgba(10,14,40,.55); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 16px; align-items: center; backdrop-filter: blur(4px); }
.qhead { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.qtag { background: rgba(255,255,255,.08); padding: 4px 10px; border-radius: 999px; }
.qtag.review { background: rgba(106,184,255,.18); color: var(--info); }
.prompt { font-size: clamp(20px, 3vw, 26px); text-align: center; font-weight: 800; max-width: 820px; }
.visual { display: flex; justify-content: center; width: 100%; }
.expr { font-family: var(--display); font-size: clamp(30px, 6vw, 52px); text-align: center; letter-spacing: 1px; }
.words-card { font-size: clamp(22px, 4vw, 32px); background: #fff; color: #1a1f3c; padding: 14px 22px; border-radius: 16px; text-align: center; font-weight: 900; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.clues { display: grid; gap: 8px; width: min(560px, 100%); }
.clue { background: #f8f1d8; color: #3b2e10; border-radius: 12px; padding: 10px 14px; font-size: 20px; font-weight: 800; box-shadow: 0 4px 0 rgba(0,0,0,.25); transform: rotate(var(--rot, 0deg)); }
.clue.plain { background: rgba(255,255,255,.08); color: var(--text); transform: none; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; width: min(760px, 100%); }
.choices.wide { grid-template-columns: 1fr; }
.choices.pictures { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); width: min(1000px, 100%); }
.choice { background: var(--panel2); border: 3px solid transparent; border-radius: 16px; padding: 14px; font-size: 24px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.3); transition: transform .1s, border-color .15s; min-height: 64px; }
.choices.wide .choice { font-size: 19px; text-align: left; }
.choices.big .choice { font-family: var(--display); font-size: 40px; }
.choice:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.choice.sel-ok { border-color: var(--good); background: #1f5a4b; }
.choice.sel-no { border-color: var(--warm); background: #5a4520; animation: shake .4s; }
.choice:disabled { cursor: default; transform: none; }
.choice.picture { display: flex; justify-content: center; align-items: flex-end; min-height: 150px; background: rgba(255,255,255,.05); }
.qactions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hintbox { background: rgba(106,184,255,.12); border: 1px solid rgba(106,184,255,.4); border-radius: 14px; padding: 10px 14px; width: min(760px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hintbox p { margin: 0; align-self: flex-start; }
.feedback { border-radius: 16px; padding: 14px 18px; width: min(820px, 100%); font-size: 19px; display: flex; flex-direction: column; gap: 12px; align-items: center; animation: pop .2s; }
.feedback.ok { background: rgba(61,220,151,.15); border: 2px solid var(--good); }
.feedback.no { background: rgba(255,181,71,.12); border: 2px solid var(--warm); }
.feedback p { margin: 0; align-self: stretch; }
.feedback .fb-title { font-family: var(--display); font-size: 24px; }
.feedback.ok .fb-title { color: var(--good); }
.feedback.no .fb-title { color: var(--warm); }

/* dial */
.dials { display: flex; gap: 8px; align-items: flex-end; justify-content: center; flex-wrap: nowrap; }
.dial { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.dial .arrow { width: 56px; height: 34px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); cursor: pointer; font-size: 16px; }
.dial .face { width: 62px; height: 80px; border-radius: 14px; border: 3px solid var(--pc, #fff); background: #0b1030; font-family: var(--display); font-size: 48px; color: var(--pc, #fff); cursor: pointer; display: grid; place-items: center; }
.dial .face.empty { color: rgba(255,255,255,.3); }
.dial.lock .face { background: linear-gradient(#2c2f45, #12142a); border-color: #c9a86a; color: #ffe6a8; }
.dial .dlabel { font-size: 11px; color: var(--pc, var(--muted)); text-transform: uppercase; font-weight: 900; height: 14px; }
.dials .comma { font-family: var(--display); font-size: 48px; color: var(--muted); align-self: center; margin: 0 -2px; padding-bottom: 20px; }
.pad { position: absolute; top: 100%; z-index: 30; display: grid; grid-template-columns: repeat(5, 46px); gap: 6px; background: var(--panel); padding: 8px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); border: 1px solid var(--line); }
.pad button { height: 46px; border: 0; border-radius: 10px; background: var(--panel2); font-family: var(--display); font-size: 24px; cursor: pointer; }
.pad button:hover { background: #3a4aa0; }
@media (max-width: 560px) { .dial .face { width: 46px; height: 64px; font-size: 36px; } .dial .arrow { width: 44px; } .dials { gap: 4px; } }

/* fill */
.fillrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-family: var(--display); font-size: 34px; }
.fslot { min-width: 96px; height: 62px; border: 3px dashed rgba(255,255,255,.3); border-radius: 12px; display: grid; place-items: center; cursor: pointer; padding: 0 8px; }
.fslot.filled { border-style: solid; border-color: var(--accent); background: rgba(255,200,61,.1); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { font-family: var(--display); font-size: 28px; padding: 8px 16px; min-width: 80px; border-radius: 12px; border: 0; background: var(--panel2); box-shadow: 0 4px 0 rgba(0,0,0,.3); cursor: pointer; touch-action: none; }
.chip.used { visibility: hidden; }
.chip.sel { outline: 3px solid var(--accent); }

/* tap statement */
.statement { font-family: var(--display); font-size: clamp(28px, 5vw, 46px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.tapterm { font: inherit; border: 3px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); border-radius: 12px; padding: 2px 12px; cursor: pointer; }
.tapterm:hover { border-color: var(--accent); }
.tapterm.sel-ok { border-color: var(--good); background: rgba(61,220,151,.2); }
.tapterm.sel-no { border-color: var(--warm); animation: shake .4s; }
.tiles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tile { width: 62px; height: 70px; border-radius: 12px; border: 0; background: #fff; color: #1a1f3c; font-family: var(--display); font-size: 40px; box-shadow: 0 5px 0 rgba(0,0,0,.3); cursor: grab; touch-action: none; }
.tile.used { visibility: hidden; }
.tile.sel { outline: 4px solid var(--accent); }

/* boss */
.bossbar { width: min(760px, 100%); display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.3); border-radius: 16px; padding: 10px 14px; }
.bossbar .bemoji { font-size: 46px; transition: transform .2s; }
.bossbar .bemoji.hit { animation: hit .45s; }
@keyframes hit { 30% { transform: translateX(-8px) rotate(-12deg) scale(.9); filter: brightness(2); } 60% { transform: translateX(6px) rotate(8deg); } }
.hp { flex: 1; height: 18px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.hp > div { height: 100%; background: linear-gradient(90deg, #ff6b6b, #ffb547); transition: width .5s; }
.progressline { width: min(760px, 100%); height: 8px; background: rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.progressline > div { height: 100%; background: var(--accent); transition: width .4s; }

/* machine */
.machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%; }
.machine { background: linear-gradient(180deg, #2d3770, #1a2150); border: 3px solid color-mix(in srgb, var(--pc) 60%, transparent); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; min-height: 220px; }
.machine .mname { background: var(--pc); color: #10142e; border-radius: 8px; padding: 3px 10px; font-weight: 900; font-size: 13px; text-transform: uppercase; }
.machine .hopper { width: 70px; height: 54px; border: 3px dashed rgba(255,255,255,.3); border-radius: 10px 10px 30px 30px; display: grid; place-items: center; font-family: var(--display); font-size: 34px; }
.machine .gear { font-size: 28px; transition: transform 1s; }
.machine.spin .gear { animation: spin .8s linear 2; }
@keyframes spin { to { transform: rotate(360deg); } }
.machine .out { font-family: var(--display); font-size: 30px; min-height: 40px; }
.machine .out .z { color: #8b95c9; }
.machine .outpic { min-height: 40px; display: flex; justify-content: center; }
.machine.target { box-shadow: 0 0 0 4px var(--accent); }
.token { width: 90px; height: 100px; border-radius: 18px; background: #fff; color: #1a1f3c; font-family: var(--display); font-size: 70px; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(0,0,0,.35); border: 0; cursor: grab; touch-action: none; }
.mlog { display: grid; gap: 4px; font-size: 18px; width: min(520px, 100%); }
.mlog div { background: rgba(255,255,255,.06); border-radius: 10px; padding: 6px 12px; display: flex; justify-content: space-between; }
.slide-board { display: flex; gap: 6px; justify-content: center; }
.slide-board .sc { width: 84px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); text-align: center; }
.slide-board .sc .h { background: var(--pc); color: #10142e; font-size: 11px; font-weight: 900; padding: 4px 2px; text-transform: uppercase; }
.slide-board .sc .d { font-family: var(--display); font-size: 48px; height: 70px; display: grid; place-items: center; }
.slide-board .sc .d.z { color: #6e78ad; }

/* elevator */
.elevator { display: grid; grid-template-columns: minmax(0, 330px) 1fr; gap: 16px; width: 100%; align-items: start; }
@media (max-width: 760px) { .elevator { grid-template-columns: 1fr; } }
.shaft { background: rgba(0,0,0,.3); border-radius: 18px; padding: 8px; display: flex; flex-direction: column-reverse; gap: 4px; position: relative; }
.floor { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border-left: 6px solid var(--pc); background: rgba(255,255,255,.04); min-height: 46px; transition: background .3s; }
.floor.here { background: color-mix(in srgb, var(--pc) 30%, transparent); }
.floor .fname { flex: 1; font-size: 14px; text-transform: uppercase; font-weight: 900; color: var(--pc); }
.floor .fval { font-size: 13px; color: var(--muted); }
.floor .car { width: 40px; height: 34px; border-radius: 8px; background: #fff; color: #111; font-family: var(--display); font-size: 26px; display: grid; place-items: center; }
.evalue { font-family: var(--display); font-size: clamp(40px, 9vw, 86px); text-align: center; line-height: 1; }
.evalue .z { color: #6e78ad; }
.ewords { text-align: center; font-size: 20px; color: var(--muted); min-height: 28px; }
.times10 { font-family: var(--display); color: var(--accent); font-size: 34px; text-align: center; height: 40px; }

/* number line */
.nl { width: 100%; }
.nl svg { width: 100%; height: 150px; overflow: visible; }
.nl .seg { cursor: pointer; }
.nl .seg:hover rect { fill: rgba(255,200,61,.18); }

/* explore & chain */
.explore-area { min-height: 260px; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-end; padding: 12px; background: rgba(0,0,0,.2); border-radius: 18px; }
.chainrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-family: var(--display); font-size: 28px; }
.chainrow .cn { padding: 4px 12px; border-radius: 10px; background: rgba(255,255,255,.06); opacity: .35; transition: opacity .3s, transform .3s; }
.chainrow .cn.on { opacity: 1; transform: scale(1.08); background: color-mix(in srgb, var(--pc) 35%, transparent); }
.chainrow .x { color: var(--accent); font-size: 18px; opacity: .35; }
.chainrow .x.on { opacity: 1; }
.fuser { width: 180px; min-height: 120px; border: 3px dashed var(--accent); border-radius: 18px; display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; justify-content: center; padding: 8px; position: relative; }
.fuser .count { position: absolute; top: -16px; right: -10px; background: var(--accent); color: #2b1d00; font-family: var(--display); border-radius: 999px; padding: 2px 10px; font-size: 20px; }
.fans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(700px, 100%); }
.fanblock { background: rgba(255,255,255,.05); border-radius: 10px; padding: 6px; cursor: pointer; border: 2px solid transparent; }
.fanblock.on { border-color: var(--accent); background: rgba(255,200,61,.12); }
.fanblock svg { width: 100%; height: auto; display: block; }

/* recap / reward */
.reps { display: grid; gap: 10px; width: min(820px, 100%); }
.rep { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; background: rgba(0,0,0,.25); border-radius: 14px; padding: 10px 14px; opacity: 0; transform: translateY(8px); transition: all .4s; }
.rep.show { opacity: 1; transform: none; }
.rep .rl { font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 900; letter-spacing: .5px; }
.rep .rv { font-size: 20px; overflow-x: auto; }
@media (max-width: 560px) { .rep { grid-template-columns: 1fr; } }
.expanded-line { font-family: var(--display); font-size: clamp(24px, 4.5vw, 40px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.expanded-line .term { color: var(--pc); }
.cra-digits { display: flex; gap: 10px; justify-content: center; }
.cra-digit { font-family: var(--display); font-size: 64px; width: 84px; height: 96px; border-radius: 16px; border: 3px solid var(--pc); background: rgba(0,0,0,.3); color: var(--pc); cursor: pointer; display: grid; place-items: center; position: relative; }
.cra-digit.done::after { content: '✓'; position: absolute; top: -10px; right: -8px; background: var(--good); color: #062; border-radius: 50%; width: 26px; height: 26px; font-size: 16px; display: grid; place-items: center; }
.cra-explain { min-height: 70px; text-align: center; font-size: 21px; max-width: 760px; }
.points { display: grid; gap: 10px; width: min(760px, 100%); }
.point { background: rgba(255,255,255,.07); border-left: 6px solid var(--accent); border-radius: 12px; padding: 12px 16px; font-size: 20px; }
.reward { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.reward .bigstars { font-size: 64px; letter-spacing: 6px; }
.reward .bigstars span { display: inline-block; animation: pop .4s backwards; }
.badge-card { background: linear-gradient(160deg, #3a4aa0, #1d2862); border-radius: 20px; padding: 18px 26px; display: flex; gap: 16px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.badge-card .bi { font-size: 54px; }
.skillstars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; width: min(760px, 100%); }
.skillstars div { background: rgba(255,255,255,.06); padding: 8px 12px; border-radius: 10px; display: flex; justify-content: space-between; }
.scoreline { font-family: var(--display); font-size: 64px; }

/* parent */
.parent { flex: 1; overflow-y: auto; background: #f4f6fb; color: #1d2340; padding: 18px 16px 60px; }
.parent .wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; }
.parent .card { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 2px 10px rgba(20,30,80,.08); }
.parent h2 { font-family: var(--font); font-weight: 900; font-size: 20px; margin-bottom: 10px; }
.parent .muted { color: #667; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: #f0f3fb; border-radius: 12px; padding: 12px; }
.kpi .v { font-size: 28px; font-weight: 900; }
.kpi .l { font-size: 13px; color: #667; }
.sbar { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 120px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef; font-size: 15px; }
.sbar .track { height: 14px; background: #e6e9f5; border-radius: 8px; overflow: hidden; }
.sbar .track > div { height: 100%; border-radius: 8px; }
.sbar .lvl { font-size: 13px; color: #556; text-align: right; }
@media (max-width: 600px) { .sbar { grid-template-columns: 1fr 1fr; } .sbar .lvl { grid-column: 1 / -1; text-align: left; } }
.parent table { width: 100%; border-collapse: collapse; font-size: 14px; }
.parent td, .parent th { padding: 8px; border-bottom: 1px solid #eef; text-align: left; vertical-align: top; }
.parent .btn { --b: #3d5afe; --bt: #2a3fc0; color: #fff; }
.parent .btn.ghost { --b: #e8ebf7; --bt: #cfd4ea; color: #1d2340; }
.parent .btn.danger { --b: #e5484d; --bt: #a92f33; }
.toggle { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 16px; }
.toggle input { width: 22px; height: 22px; }
.hold { position: relative; overflow: hidden; }
.hold .fillbar { position: absolute; inset: 0; background: rgba(255,255,255,.35); transform-origin: left; transform: scaleX(0); }

/* practice hub */
.hub { flex: 1; overflow-y: auto; padding: 18px 16px 60px; }
.hub .wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.game { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.game:hover { background: var(--panel2); }
.game .gi { font-size: 36px; }
.game.locked { opacity: .45; cursor: not-allowed; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px; width: 120px; text-align: center; font-size: 13px; }
.badge .bi { font-size: 34px; display: block; }
.badge.off { opacity: .3; filter: grayscale(1); }
.skins { display: flex; gap: 10px; flex-wrap: wrap; }
.skin { width: 76px; padding: 6px; border-radius: 14px; border: 3px solid transparent; background: rgba(255,255,255,.05); cursor: pointer; text-align: center; font-size: 11px; }
.skin.on { border-color: var(--accent); }
.skin.off { opacity: .3; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 560px) {
  .mcol { min-width: 64px; }
  .mcol .mhead { font-size: 10px; padding: 5px 2px; letter-spacing: 0; }
  .topbar .grow > div:first-child { font-size: 18px !important; }
  .stage { padding-left: 8px; padding-right: 8px; }
}

/* intro films */
.video-overlay { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; }
.video-overlay video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.video-overlay .video-skip { position: absolute; right: 16px; bottom: 22px; }
.video-overlay .video-play { position: absolute; }
.video-progress { position: absolute; left: 16px; right: 150px; bottom: 40px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.video-progress > div { height: 100%; width: 0; background: var(--accent); }

/* ---------- two-column layout (desktop) ---------- */
.split { display: flex; flex-direction: column; gap: 16px; width: 100%; align-items: center; }
.split-main, .split-side { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.split-side:empty { display: none; }
.qcard-split { align-items: stretch; }
@media (min-width: 900px) {
  .stage > * { max-width: 1400px; }
  .split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); align-items: start; gap: 20px; }
  .split:has(.split-side:empty) { grid-template-columns: 1fr; }
  .split-side { position: sticky; top: 0; }
  .split-side > .qcard, .split-side > .feedback, .split-side > .hintbox, .split-side .points { width: 100%; }
  .split-side .choices { width: 100%; }
  .split-side .feedback { width: 100%; }
  .split-side .cra-digit { width: 70px; height: 80px; font-size: 52px; }
  .split-side .cra-explain { font-size: 18px; min-height: 0; }
  .split-side .rep { grid-template-columns: 1fr; gap: 4px; }
  .split-side .mlog { width: 100%; }
  .qcard-split > .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); align-items: center; }
  .qcard-build > .split { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: start; }
  .qcard-split .split-side { position: static; }
  .qcard-look .split-main .visual { min-height: 120px; align-items: center; }
  .stage { padding-bottom: 110px; }
}

/* ---------- short desktop screens (laptops): keep it all on one screen ---------- */
@media (min-width: 900px) and (max-height: 820px) {
  .topbar { min-height: 50px; padding: 6px 12px; }
  .topbar .grow > div:first-child { font-size: 19px !important; }
  .iconbtn { width: 40px; height: 40px; font-size: 19px; }
  .pips { padding-top: 6px; }
  .pip .bar { height: 5px; margin-bottom: 2px; }
  .taskbar { margin-top: 6px; padding: 6px 12px; min-height: 38px; font-size: 16px; }
  .stage { padding-top: 10px; gap: 10px; }
  .qcard { padding: 12px 14px; gap: 10px; }
  .prompt { font-size: 20px; }
  .numline { font-size: clamp(34px, 5vw, 54px); }
  .dial .face { width: 52px; height: 64px; font-size: 38px; }
  .dial .arrow { height: 28px; width: 48px; }
  .btn.big { padding: 11px 22px; font-size: 19px; }
  .mcol .mbody { min-height: 80px; padding: 6px; }
  .mcol .mfoot { font-size: 24px; min-height: 30px; }
  .tray { padding: 6px; }
  .source { min-height: 60px; padding: 4px 10px; }
  .coach .digi { width: 60px; height: 60px; }
  .coach .bubble { font-size: 16px; padding: 9px 13px; }
  .table-area { min-height: 110px; }
  .story .scene { height: clamp(150px, 28vh, 260px); }
  .dialog { font-size: 19px; padding: 12px 18px; min-height: 0; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .split-side .cra-digit { width: 58px; height: 66px; font-size: 42px; }
  .split-side .expanded-line { font-size: 28px; }
  .split-side .pv-board:not(.small) .pv-cell { font-size: 34px; min-height: 48px; }
  .split-side .pill { padding: 3px 10px; font-size: 13px; }
}
@media (min-width: 900px) {
  .split-main .machines { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .split-main .machine .mname { font-size: 11px; padding: 3px 6px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .machine { min-height: 0; padding: 8px 6px; gap: 5px; }
  .machine .hopper { width: 56px; height: 42px; font-size: 26px; }
  .machine .gear { font-size: 20px; }
  .machine .out { font-size: 24px; min-height: 30px; }
  .token { width: 64px; height: 72px; font-size: 50px; }
  .mlog { font-size: 15px; }
  .mlog div { padding: 4px 10px; }
  .slide-board .sc { width: 64px; }
  .slide-board .sc .d { font-size: 36px; height: 50px; }
  .evalue { font-size: clamp(36px, 6vw, 64px); }
  .floor { min-height: 34px; padding: 3px 8px; }
  .chainrow { font-size: 22px; }
  .explore-area { min-height: 180px; }
}
@media (min-width: 900px) {
  .split-side .reps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .split-side .rep { padding: 8px 10px; }
  .split-side .rep:nth-child(n+3) { grid-column: 1 / -1; }
  .split-side .rep .rv { font-size: 17px; }
  .split-side .rep .expanded-line { font-size: 24px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .bossbar { padding: 4px 12px; }
  .bossbar .bemoji { font-size: 32px; }
  .bossbar .hp { height: 12px; }
  .qhead { font-size: 12px; }
  .qhead .iconbtn { width: 32px; height: 32px; font-size: 16px; }
  .hintbox { padding: 6px 10px; gap: 6px; font-size: 15px; }
  .choice { padding: 10px; min-height: 52px; font-size: 21px; }
  .choices.big .choice { font-size: 32px; }
  .choices.wide .choice { font-size: 17px; }
  .feedback { padding: 10px 14px; font-size: 17px; gap: 8px; }
  .feedback .fb-title { font-size: 20px; }
  .expr { font-size: clamp(26px, 4vw, 40px); }
  .points .point { padding: 8px 12px; font-size: 17px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .tray { gap: 6px; }
  .tray .source { min-width: 64px; min-height: 0; padding: 4px 8px; flex-direction: row; gap: 6px; }
  .tray .source svg { max-height: 36px; width: auto; }
  .tray .source .slbl { font-size: 12px; }
  .qcard-split { padding-top: 8px; }
}
@media (min-width: 900px) {
  .split-main .choices.pictures { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .split-main .choice.picture { min-height: 110px; padding: 8px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .tile { width: 50px; height: 58px; font-size: 32px; }
  .pv-cell.slot { min-height: 50px; min-width: 46px; margin: 6px; }
  .pv-cell { font-size: 36px; min-height: 50px; }
}
/* Desktop: Digi gets his own row under the activity instead of floating over it */
@media (min-width: 900px) {
  .lesson .coach { position: relative; left: auto; right: auto; bottom: auto; padding: 4px 14px 8px; align-items: center; min-height: 64px; flex: none; }
  .lesson .stage { padding-bottom: 16px; }
  .coach .bubble { border-radius: 18px 18px 18px 4px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .lesson .coach { min-height: 52px; padding: 2px 12px 6px; }
  .coach .digi { width: 46px; height: 46px; }
  .coach .bubble { padding: 7px 12px; font-size: 15px; }
}
@media (min-width: 900px) {
  .split-side .skillstars { grid-template-columns: 1fr; width: 100%; }
  .split-side .badge-card { width: 100%; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .bossbar { gap: 8px; }
  .bossbar .bemoji { font-size: 26px; }
  .bossbar > div > div:first-child { font-size: 16px !important; }
  .reward { gap: 10px; }
  .reward .bigstars { font-size: 46px; }
  .scoreline { font-size: 50px; }
  .skillstars div { padding: 5px 10px; font-size: 15px; }
  .badge-card { padding: 10px 16px; }
  .badge-card .bi { font-size: 40px; }
}
@media (min-width: 900px) {
  .reps-grid { grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .reps-grid .rep { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; }
  .reps-grid .rep:nth-child(n+3) { grid-column: 1 / -1; }
  .qcard:not(.qcard-split) .choices.wide { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .dial .arrow { height: 24px; font-size: 13px; }
  .dial { gap: 3px; }
  .dial .dlabel { height: 12px; }
  .reps-grid .rep .rv { font-size: 17px; }
  .reps-grid .expanded-line { font-size: 24px; }
}
@media (min-width: 900px) {
  .qcard { position: relative; }
  .qcard-split { width: 100%; }
  .qcard-split > .qhead { position: absolute; top: 8px; right: 10px; width: auto; z-index: 2; }
  .qcard-split > .qhead > span:first-child { display: none; }
}
@media (min-width: 900px) {
  .split-side .choices:not(.wide):not(.pictures) { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  /* recap "many forms": blocks across the top, board beside words, digits and expanded form full width */
  .reps-grid .rep:nth-child(1) { order: 1; grid-column: 1 / -1; }
  .reps-grid .rep:nth-child(2) { order: 2; grid-column: auto; }
  .reps-grid .rep:nth-child(3) { order: 3; grid-column: auto; }
  .reps-grid .rep:nth-child(3) .expanded-line { flex-direction: column; align-items: flex-start; gap: 3px; }
  .reps-grid .pv-board.small .pv-head { font-size: 9px; padding: 3px 2px; }
  .reps-grid .rep:nth-child(4) { order: 4; grid-column: auto; }
  .reps-grid .rep:nth-child(5) { order: 5; grid-column: auto; }
  .reps-grid .rep:nth-child(3) .expanded-line { font-size: 15px !important; gap: 4px 12px; justify-content: flex-start; }
  .reps-grid .rep:nth-child(3) .term { padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,.06); }
  .reps-grid .pv-board.small .pv-cell { font-size: 22px; min-height: 30px; padding: 2px 6px; }
  .split.recap { grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); }
  .reps-grid .blocks-pic { gap: 10px; }
  .counters-grid { grid-template-columns: 1fr 1fr !important; width: 100% !important; }
  .counters-grid > .row { padding: 8px 12px; }
  .split-side .skillstars { grid-template-columns: 1fr 1fr; gap: 6px; }
  .split-side .skillstars div { font-size: 14px; padding: 5px 8px; }
  .split-side .skillstars .stars { font-size: 14px; letter-spacing: 0; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .reps-grid .rl { font-size: 10px; }
  .reps-grid .rep .expanded-line { font-size: 20px; gap: 6px; }
  .reps-grid .rep .rv { font-size: 15px; }
  .floor .fval { display: none; }
  .floor { min-height: 30px; }
  .floor .car { width: 30px; height: 26px; font-size: 20px; }
  .nl svg { height: 120px; }
}
@media (min-width: 900px) {
  /* recap: blocks on top; board | each digit | expanded + words underneath */
  .split.recap .reps-grid { grid-template-columns: 1.1fr 1fr 1fr; grid-template-areas: "blocks blocks blocks" "board digits expanded" "board digits words"; }
  .split.recap .reps-grid .rep { order: 0 !important; }
  .split.recap .reps-grid .rep:nth-child(1) { grid-area: blocks; }
  .split.recap .reps-grid .rep:nth-child(2) { grid-area: board; }
  .split.recap .reps-grid .rep:nth-child(3) { grid-area: digits; }
  .split.recap .reps-grid .rep:nth-child(4) { grid-area: expanded; }
  .split.recap .reps-grid .rep:nth-child(5) { grid-area: words; }
  .split.recap .reps-grid .rep:nth-child(4) .expanded-line { font-size: 18px; justify-content: flex-start; }
}
@media (min-width: 900px) {
  .reps-grid .numline { font-size: 26px; }
  .reps-grid .rep { align-content: start; }
  .reps-grid .rep .rv { overflow: hidden; }
  .split.recap .reps-grid { grid-template-columns: 1.15fr 1.15fr 0.9fr; }
  .reps-grid .pv-board.small { grid-auto-columns: minmax(34px, 1fr); }
  .reps-grid .rep:nth-child(3) .expanded-line { font-size: 13px !important; }
  .reps-grid .rep:nth-child(3) .term { white-space: normal !important; }
}