/* ============ presentation lessons: player shell + visual primitives ============ */

/* ---------- player shell (rides the shared .game-stage) ---------- */
.lesson-stage { background-image: var(--pattern-dots); }
.lesson-body {
  flex: 1; overflow-y: auto; padding: var(--sp-4);
  max-width: var(--content-max); margin: 0 auto; width: 100%;
  display: flex; flex-direction: column;
}
.lesson-dots { display: flex; gap: 6px; align-items: center; margin-inline-start: auto; }
.lesson-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line); flex: 0 0 auto; }
.lesson-dot.done { background: var(--c-accent); }
.lesson-dot.now { background: var(--c-accent-deep); transform: scale(1.35); }

.lesson-slide {
  background: var(--c-surface);
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center;
  animation: lv-slide-in var(--t-pop) var(--ease-bounce);
}
.lesson-slide:nth-child(even) { border-radius: var(--r-wonky-2); }
@keyframes lv-slide-in { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: none; } }

.lesson-eyebrow { font-family: var(--font-display); font-weight: 700; color: var(--c-accent-deep); font-size: var(--fs-sm); }
.lesson-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.lesson-title-big { font-size: var(--fs-huge); }
.lesson-text {
  font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--c-ink);
  display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
}
.lesson-visual-wrap { width: 100%; display: flex; justify-content: center; }

.lesson-nav { padding: var(--sp-3) var(--sp-4) calc(var(--safe-bottom) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-2); }
.lesson-step-hint { text-align: center; color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* summary points */
.lesson-points { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; text-align: start; }
.lesson-point { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-md); line-height: var(--lh-body); }
.lesson-point i { color: var(--c-ok); flex: 0 0 auto; }
.lesson-remember {
  width: 100%; margin-top: var(--sp-2); padding: var(--sp-3);
  background: var(--pal-cream); border: var(--bw-sticker) solid var(--pal-sun-deep);
  border-radius: var(--r-md); color: var(--pal-night);
  font-family: var(--font-display); font-weight: 600;
  display: flex; gap: var(--sp-2); align-items: center; justify-content: center;
}

/* inline comprehension check (NOT the graded quiz) */
.lesson-check-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
.lesson-check-opt {
  min-height: 60px; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  background: var(--c-surface); border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); color: var(--c-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2);
}
.lesson-check-opt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--c-shadow); }
.lesson-check-opt.right { background: var(--st-shipped); color: #fff; border-color: var(--pal-grass-deep); box-shadow: 0 3px 0 var(--pal-grass-deep); }
.lesson-check-opt.wrong { background: var(--c-danger); color: #fff; border-color: #A33B38; animation: wobble 0.35s; }
.lesson-check-opt[disabled] { pointer-events: none; }
.lesson-check-fb {
  width: 100%; padding: var(--sp-3); border-radius: var(--r-md); border: var(--bw-sticker) solid var(--c-line);
  display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); line-height: var(--lh-body); text-align: start;
}
.lesson-check-fb.ok { background: #E4F3E9; border-color: var(--pal-grass-deep); }
.lesson-check-fb.bad { background: #FBEAEA; border-color: var(--c-danger); }
.lesson-check-fb-head { font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lesson-check-fb.ok .lesson-check-fb-head { color: var(--pal-grass-deep); }
.lesson-check-fb.bad .lesson-check-fb-head { color: var(--c-danger); }

/* ---------- shared visual bits ---------- */
.lv { width: 100%; display: flex; justify-content: center; }
.lv-svg { width: 100%; height: auto; max-width: 340px; }
.lv-num { font-family: var(--font-display); font-weight: 600; fill: var(--c-ink); color: var(--c-ink); }
.lv-num-sm { font-family: var(--font-display); font-size: 12px; fill: var(--c-ink-soft); }

/* number line */
.lv-numberline { width: 100%; }
.lv-hop-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: var(--c-accent-deep); }
.lv-hop { stroke-dasharray: 240; stroke-dashoffset: 240; animation: lv-draw 0.6s var(--ease-bounce) forwards; }
@keyframes lv-draw { to { stroke-dashoffset: 0; } }

/* place-value blocks */
.lv-place { display: flex; gap: var(--sp-4); align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.lv-col { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-2); border-radius: var(--r-md); }
.lv-col.is-hi { background: var(--c-accent-soft); box-shadow: 0 0 0 var(--bw-sticker) var(--c-accent); }
.lv-col-blocks-wrap { min-height: 120px; display: flex; align-items: flex-end; }
.lv-col-blocks { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; justify-content: center; max-width: 92px; }
.lv-col-digit { font-size: var(--fs-2xl); }
.lv-col-label { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.lv-blk { display: inline-flex; animation: lv-pop 0.18s var(--ease-bounce) backwards; }
.lv-blk--one { width: 16px; height: 16px; background: var(--c-accent); border: 2px solid var(--c-ink); border-radius: 3px; }
.lv-blk--ten { flex-direction: column; width: 16px; gap: 1px; background: var(--c-ink); padding: 1px; border-radius: 3px; }
.lv-blk--ten .lv-seg { width: 14px; height: 5px; background: var(--pal-grass); border-radius: 1px; }
.lv-blk--hundred { display: grid; grid-template-columns: repeat(10, 1fr); width: 56px; height: 56px; gap: 1px; background: var(--c-ink); padding: 1px; border-radius: 3px; }
.lv-blk--hundred .lv-seg { background: var(--pal-blast); border-radius: 0.5px; }
@keyframes lv-pop { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: none; } }

/* counting set */
.lv-count { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; align-items: center; font-size: 30px; color: var(--c-accent-deep); }
.lv-count-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: 132px; padding: var(--sp-2); border: var(--bw-sticker) dashed var(--c-accent); border-radius: var(--r-md); }
.lv-count i { animation: lv-pop 0.18s var(--ease-bounce) backwards; }

/* compare */
.lv-compare { display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-4); }
.lv-cmp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lv-cmp-bar { width: 54px; background: var(--c-accent); border: var(--bw-chunky) solid var(--c-ink); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.lv-cmp-col.is-hi .lv-cmp-bar { background: var(--c-pop); }
.lv-cmp-val { font-size: var(--fs-xl); }
.lv-cmp-sign { font-size: var(--fs-huge); color: var(--c-accent-deep); align-self: center; }

/* fraction */
.lv-fraction { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.lv-fraction .lv-svg { max-width: 180px; }
.lv-frac-label { font-size: var(--fs-2xl); color: var(--c-accent-deep); }

/* equation */
.lv-equation { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.lv-eq-main { font-size: var(--fs-huge); letter-spacing: 1px; }
.lv-eq-step { font-size: var(--fs-lg); color: var(--c-ink-soft); animation: lv-slide-in 0.25s var(--ease-bounce); }

/* regroup — column add/sub with carry/borrow */
.lv-rg { display: grid; gap: 2px 8px; justify-content: center; align-items: center; }
.lv-rg--2 { grid-template-columns: auto repeat(2, 40px); }
.lv-rg--3 { grid-template-columns: auto repeat(3, 40px); }
.lv-rg-cell { height: 42px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); border-radius: 6px; }
.lv-rg-sign { color: var(--c-accent-deep); font-size: var(--fs-xl); }
.lv-rg-a, .lv-rg-b { background: var(--c-surface-2); }
.lv-rg-carry { font-size: var(--fs-md); color: var(--c-pop); height: 22px; font-weight: 700; }
.lv-rg-carry.on { animation: lv-pop 0.22s var(--ease-bounce); }
.lv-rg-a.struck { position: relative; color: var(--c-ink-faint); }
.lv-rg-a.struck::after { content: ''; position: absolute; inset: 45% 15% auto; height: 2.5px; background: var(--c-danger); }
.lv-rg-res.on { background: var(--c-accent-soft); color: var(--c-accent-deep); animation: lv-pop 0.22s var(--ease-bounce); }
.lv-rg-rule { grid-column: 1 / -1; height: 3px; background: var(--c-ink); border-radius: 2px; margin: 2px 0; }

/* classification: item chips, sorted groups, odd-one-out */
.lv-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 62px; padding: var(--sp-2);
  background: var(--c-surface); border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  font-family: var(--font-display); font-size: var(--fs-sm); color: var(--c-ink);
  animation: lv-pop 0.18s var(--ease-bounce) backwards;
}
.lv-item i { font-size: 28px; color: var(--c-accent-deep); }
.lv-item-label { line-height: 1.15; text-align: center; }
.lv-item.is-odd { border-color: var(--c-danger); background: #FBEAEA; position: relative; }
.lv-item.is-odd i { color: var(--c-danger); }
.lv-item.is-odd::after {
  content: ''; position: absolute; inset: 46% 8% auto; height: 3px; background: var(--c-danger); transform: rotate(-8deg);
}
.lv-items { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.lv-groups { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.lv-group {
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3); border: var(--bw-sticker) dashed var(--c-accent);
  border-radius: var(--r-lg); background: var(--c-accent-soft); min-width: 120px;
}
.lv-group-label { font-family: var(--font-display); font-weight: 700; color: var(--c-accent-deep); }
.lv-group-items { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.lv-group .lv-item { min-width: 54px; box-shadow: none; }

/* mascot */
.lv-mascot { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.lv-mascot-bot { flex: 0 0 auto; line-height: 0; }
.lv-bubble {
  position: relative; background: var(--c-surface); border: var(--bw-chunky) solid var(--c-ink);
  border-radius: var(--r-lg); padding: var(--sp-3); max-width: 220px;
  font-family: var(--font-display); font-size: var(--fs-md); line-height: var(--lh-body); text-align: start;
}
.lv-bubble::after {
  content: ''; position: absolute; top: 26px; inset-inline-end: -12px;
  border: 8px solid transparent; border-inline-start-color: var(--c-ink);
}

/* topic-screen launcher card + locked practice */
.lesson-launch {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-top: var(--sp-3);
  border: var(--bw-chunky) solid var(--c-accent); background: var(--c-accent-soft);
  border-radius: var(--r-wonky); box-shadow: var(--shadow-card); color: var(--c-ink);
}
.lesson-launch:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-shadow); }
.lesson-launch-bot { flex: 0 0 auto; line-height: 0; }
.lesson-launch h2 { font-size: var(--fs-xl); font-family: var(--font-display); }
.lesson-launch .btn--icon { flex: 0 0 auto; }
.btn.is-locked { opacity: 0.5; }

/* prompt editor (CMS) */
.prompt-editor { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; min-height: 300px; white-space: pre; }
.prompt-tokens { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.prompt-tokens code { background: var(--c-surface-2); padding: 1px 6px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, monospace; }
.prompt-preview {
  max-height: 62vh; overflow: auto; margin: 0;
  background: var(--c-surface-2); border: var(--bw-sticker) solid var(--c-line); border-radius: var(--r-sm);
  padding: var(--sp-3); font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap;
}

@media (max-width: 380px) {
  .lv-rg--3 { grid-template-columns: auto repeat(3, 34px); }
  .lv-eq-main { font-size: var(--fs-2xl); }
  .lesson-title-big { font-size: var(--fs-2xl); }
}