/* =====================================================================
   Lesson front end V2 — Duolingo-style, one bite per screen.
   Root: #lv2Ov.lv2-ov  ·  namespace: lv2-  ·  body class: lesson-open
   Self-contained dark palette (matches the reference screenshots):
     bg #131f24 · surface #202f36 · border #37464f · text #f1f7fb
     muted #52656d · lime #93d333 (+#79b933) · blue #1cb0f6 · pink #ff4b9e
   ===================================================================== */

body.lesson-open { overflow: hidden; }

.lv2-ov {
  position: fixed; inset: 0; z-index: 4000;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: #131f24;
  color: #f1f7fb;
  font-family: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  animation: lv2Fade .28s ease both;
  --lv2-bg: #131f24; --lv2-surf: #202f36; --lv2-line: #37464f;
  --lv2-ink: #f1f7fb; --lv2-mute: #52656d; --lv2-soft: #9db3bd;
  --lv2-lime: #93d333; --lv2-lime-d: #79b933; --lv2-blue: #1cb0f6; --lv2-pink: #ff4b9e;
  /* the book's paper tokens are undefined here — remap them so .oef-* text
     that uses var(--bk-ink) stays readable on the dark theme */
  --bk-ink: #f1f7fb; --bk-ink-soft: #b6c8d1;
}
@keyframes lv2Fade { from { opacity: 0; } to { opacity: 1; } }
.lv2-hide { display: none !important; }
.lv2-ov [hidden] { display: none !important; }

/* ---------------- top bar: ✕ · ‹ · progress pill · ⭐ points ---------------- */
.lv2-top { flex: none; padding: 10px 14px 8px; padding-top: calc(10px + env(safe-area-inset-top)); }
.lv2-top-in {
  max-width: 680px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.lv2-x, .lv2-backb {
  flex: none; width: 40px; height: 40px; border: 0; background: transparent;
  color: #52656d; font-size: 1.5rem; font-weight: 700; line-height: 1;
  cursor: pointer; border-radius: 12px; padding: 0;
  transition: color .15s, background .15s;
}
.lv2-backb { font-size: 1.9rem; margin-left: -10px; }
.lv2-x:hover, .lv2-backb:hover { color: #9db3bd; background: rgba(255,255,255,.05); }
.lv2-prog {
  flex: 1; height: 16px; border-radius: 99px; background: #37464f;
  overflow: hidden; position: relative;
}
.lv2-prog-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: #93d333; position: relative;
  transition: width .45s cubic-bezier(.22,.61,.36,1);
  min-width: 0;
}
.lv2-prog-fill::after {           /* subtle inner shine stripe */
  content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px;
  border-radius: 99px; background: rgba(255,255,255,.3);
}
.lv2-pts {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 800; font-size: 1.05rem; color: #ff4b9e;
  background: rgba(255,75,158,.1); border-radius: 99px; padding: 4px 12px;
}
.lv2-pts b { font-weight: 800; }

/* ---------------- scrollable body ---------------- */
.lv2-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lv2-stephost { max-width: 680px; margin: 0 auto; padding: 10px 18px 36px; }
.lv2-step-in { animation: lv2Slide .24s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lv2Slide {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------------- typography / shared bits ---------------- */
.lv2-kicker {
  font-size: .78rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #52656d; margin: 8px 0 10px;
}
.lv2-cover-kick { color: #93d333; }
.lv2-h1 {
  font-size: clamp(1.5rem, 5.5vw, 2rem); font-weight: 800; line-height: 1.2;
  color: #f1f7fb; margin: 0 0 18px; letter-spacing: -.01em;
}
.lv2-h2 {
  font-size: clamp(1.25rem, 4.5vw, 1.6rem); font-weight: 800; line-height: 1.25;
  color: #f1f7fb; margin: 0 0 16px;
}
.lv2-sayline { display: flex; align-items: flex-start; gap: 12px; }
.lv2-sayline > span { flex: 1; }
.lv2-badge {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: #1cb0f6; border: 2px solid #37464f;
  border-radius: 99px; padding: 4px 12px; margin: 0 0 12px;
}
.lv2-meta {
  display: inline-block; font-weight: 600; color: #9db3bd; font-size: .95rem;
  background: #202f36; border: 2px solid #37464f; border-radius: 12px;
  padding: 8px 14px; margin: 14px 8px 0 0;
}
.lv2-footnote { color: #52656d; font-size: .85rem; margin-top: 18px; text-align: center; }

/* ---------------- character scene + speech bubble ---------------- */
.lv2-scene { display: flex; align-items: flex-start; gap: 4px; margin: 10px 0 16px; }
.lv2-scene-solo { justify-content: center; margin: 26px 0; }
.lv2-ava { flex: none; width: 104px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
.lv2-ava.big { width: 132px; }
.lv2-ava svg { width: 100%; height: auto; display: block; }
.lv2-ava-emoji { font-size: 4.6rem; line-height: 1; display: block; text-align: center; }
.lv2-bubble-wrap { flex: 1; min-width: 0; padding-top: 14px; }

.lv2-bubble {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  border: 2px solid #37464f; border-radius: 16px; padding: 14px 16px;
  background: transparent;
}
.lv2-scene .lv2-bubble::before {   /* tail toward the avatar */
  content: ""; position: absolute; left: -10px; top: 22px;
  width: 16px; height: 16px; background: #131f24;
  border-left: 2px solid #37464f; border-bottom: 2px solid #37464f;
  transform: rotate(45deg); border-bottom-left-radius: 4px;
}
.lv2-bubble.follow { margin-top: 12px; }
.lv2-read .lv2-bubble { margin-bottom: 12px; }
.lv2-bubble-t {
  flex: 1; min-width: 0;
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
  font-size: 1.08rem; font-weight: 600; line-height: 1.75; color: #f1f7fb;
  text-decoration: underline dashed rgba(120,141,151,.55);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lv2-bubble-t b, .lv2-bubble-t mark { color: #fff; }
.lv2-bubble-t mark { background: rgba(147,211,51,.25); border-radius: 4px; padding: 0 3px; }

/* 🔊 narration button (blue, like Duolingo's speaker) */
.lv2-say {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: #1cb0f6; color: #fff; font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 4px 0 #1899d6; transition: transform .08s, box-shadow .08s;
  padding: 0;
}
.lv2-say:active { transform: translateY(3px); box-shadow: 0 1px 0 #1899d6; }
.lv2-say.sm { width: 34px; height: 34px; font-size: .95rem; border-radius: 10px; }

/* ---------------- objectives ---------------- */
.lv2-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lv2-goals li {
  display: flex; align-items: flex-start; gap: 12px;
  background: #202f36; border: 2px solid #37464f; border-radius: 14px; padding: 13px 15px;
}
.lv2-goal-t { flex: 1; line-height: 1.55; font-weight: 600; color: #f1f7fb; padding-top: 4px; }
.lv2-goal-t::before { content: "✅ "; }

/* ---------------- glossary chips ---------------- */
.lv2-gloss { display: grid; gap: 10px; }
.lv2-chip {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: #202f36; border: 2px solid #37464f; border-radius: 14px; padding: 12px 15px;
}
.lv2-chip b { color: #93d333; font-size: 1.02rem; }
.lv2-chip span { color: #b6c8d1; font-weight: 500; flex: 1; min-width: 140px; }

/* ---------------- begrip (comprehension) ---------------- */
.lv2-qtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; }
.lv2-qtop .lv2-kicker { margin: 0; flex: 1; }
.lv2-lvl {
  font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #1cb0f6; border: 2px solid #37464f; border-radius: 99px; padding: 2px 10px;
}
.lv2-qpts { font-size: .82rem; font-weight: 800; color: #ffd43b; }
.lv2-hearts { font-size: 1rem; letter-spacing: 2px; }

.lv2-ta {
  width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical;
  background: #202f36; border: 2px solid #37464f; border-radius: 14px;
  color: #f1f7fb; font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem; font-weight: 600; line-height: 1.6; padding: 13px 15px;
  outline: none; transition: border-color .15s;
}
.lv2-ta::placeholder { color: #52656d; }
.lv2-ta:focus { border-color: #1cb0f6; }
.lv2-ta.ok { border-color: #93d333; }
.lv2-ta.bad { border-color: #ff4b4b; }
.lv2-ta[readonly] { opacity: .9; }
.lv2-ta-big { min-height: 190px; }
.lv2-practice { min-height: 90px; margin-top: 4px; }

.lv2-inline-fb {
  margin-top: 12px; border-radius: 14px; padding: 12px 15px; font-weight: 600;
  animation: lv2Pop .2s ease both;
}
.lv2-inline-fb.ok { background: rgba(147,211,51,.12); border: 2px solid rgba(147,211,51,.45); color: #b8ee6d; }
.lv2-inline-fb.bad { background: rgba(255,75,75,.1); border: 2px solid rgba(255,75,75,.4); color: #ff9b9b; }
@keyframes lv2Pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

.lv2-memo {
  margin-top: 12px; background: #202f36; border: 2px solid #37464f;
  border-radius: 14px; padding: 13px 15px; line-height: 1.6; color: #d9e6ec;
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif; font-weight: 500;
  animation: lv2Pop .2s ease both;
}
.lv2-memo > b { color: #ffd43b; }
.lv2-why {
  margin-top: 10px; padding: 9px 12px; border-left: 3px solid #ffd43b;
  background: rgba(255,212,59,.08); border-radius: 0 10px 10px 0;
  color: #e8f0f4; font-weight: 500; line-height: 1.55;
}

/* ---------------- taal: examples + drills ---------------- */
.lv2-ex-list { display: grid; gap: 10px; margin: 14px 0; }
.lv2-ex {
  background: #202f36; border: 2px solid #37464f; border-left: 5px solid #1cb0f6;
  border-radius: 12px; padding: 11px 15px; font-weight: 600; color: #e8f0f4;
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
}
.lv2-qcard {
  background: #202f36; border: 2px solid #37464f; border-radius: 16px;
  padding: 16px 18px; font-size: 1.08rem; font-weight: 600; line-height: 1.65;
  color: #f1f7fb; margin-bottom: 12px;
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
}
.lv2-reveal {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  border: 2px solid #37464f; border-bottom-width: 4px; border-radius: 12px;
  background: #202f36; color: #1cb0f6; font-family: inherit; font-weight: 800;
  font-size: .88rem; letter-spacing: .5px; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; transition: transform .08s;
}
.lv2-reveal:active { transform: translateY(2px); border-bottom-width: 2px; }
.lv2-reveal.on { color: #93d333; border-color: rgba(147,211,51,.5); }

/* ---------------- woorde (vocab cards) ---------------- */
.lv2-words { display: grid; gap: 12px; }
.lv2-word {
  display: flex; align-items: center; gap: 14px;
  background: #202f36; border: 2px solid #37464f; border-radius: 14px; padding: 12px 15px;
}
.lv2-word-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv2-word-b b { color: #f1f7fb; font-size: 1.08rem; }
.lv2-word-b span { color: #93d333; font-weight: 600; font-size: .95rem; }
.lv2-word-b em { color: #9db3bd; font-weight: 500; font-size: .9rem; font-style: italic; }

/* ---------------- skryf ---------------- */
.lv2-guides { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 7px; }
.lv2-guides li { color: #d9e6ec; font-weight: 500; line-height: 1.55; }
.lv2-wc { margin-top: 8px; color: #52656d; font-weight: 700; font-size: .9rem; text-align: right; }
.lv2-wc b { color: #9db3bd; }

/* ---------------- finish ---------------- */
.lv2-finish { text-align: center; padding-top: 18px; }
.lv2-fin-scene { position: relative; display: inline-block; margin-bottom: 8px; }
.lv2-fin-scene .lv2-ava { animation: lv2Bounce 1.4s ease infinite; }
.lv2-fin-emoji {
  position: absolute; top: -14px; right: -26px; font-size: 2.6rem;
  animation: lv2Bounce 1.4s ease infinite .2s;
}
@keyframes lv2Bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
}
.lv2-stats { display: flex; justify-content: center; gap: 14px; margin: 18px 0 26px; }
.lv2-stat {
  display: flex; align-items: center; gap: 9px;
  background: #202f36; border: 2px solid #37464f; border-radius: 14px; padding: 12px 20px;
}
.lv2-stat span { font-size: 1.3rem; }
.lv2-stat b { font-size: 1.2rem; color: #f1f7fb; }
.lv2-finish .lv2-btn { margin: 7px auto; display: block; }

/* ---------------- big bottom button + banner ---------------- */
.lv2-bottom {
  flex: none; padding: 0 16px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  position: relative;
}
.lv2-nobar .lv2-bottom { display: none; }
.lv2-bar { max-width: 560px; margin: 0 auto; padding-top: 10px; }
.lv2-bar-off { display: none; }

.lv2-btn {
  width: 100%; max-width: 560px; box-sizing: border-box;
  border: 0; border-radius: 14px; padding: 15px 18px;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
  background: #93d333; color: #131f24; box-shadow: 0 4px 0 #79b933;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.lv2-btn:not(:disabled):hover { filter: brightness(1.06); }
.lv2-btn:not(:disabled):active { transform: translateY(4px); box-shadow: 0 0 0 #79b933; }
.lv2-btn:disabled { background: #37464f; color: #52656d; box-shadow: none; cursor: default; }
.lv2-btn.ghost {
  background: transparent; color: #1cb0f6; box-shadow: none;
  border: 2px solid #37464f; border-bottom-width: 4px;
}
.lv2-btn.ghost:not(:disabled):active { transform: translateY(2px); border-bottom-width: 2px; box-shadow: none; }
.lv2-btn.lv2-done { background: #37464f; color: #93d333; box-shadow: none; opacity: 1; }

/* feedback banner sliding up above the bar */
.lv2-banner { max-width: 560px; margin: 0 auto; }
.lv2-banner-in {
  border-radius: 16px; padding: 15px 17px; margin-top: 10px;
  animation: lv2Rise .26s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes lv2Rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lv2-banner-txt { font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
.lv2-banner.ok .lv2-banner-in { background: #d7ffb8; }
.lv2-banner.ok .lv2-banner-txt { color: #58a700; }
.lv2-banner.bad .lv2-banner-in { background: #ffdfe0; }
.lv2-banner.bad .lv2-banner-txt { color: #ea2b2b; }
.lv2-banner.warn .lv2-banner-in { background: #ffeeb2; }
.lv2-banner.warn .lv2-banner-txt { color: #8f6a00; }
.lv2-banner-btn {
  width: 100%; box-sizing: border-box; margin-top: 12px;
  border: 0; border-radius: 14px; padding: 14px 18px;
  font-family: inherit; font-weight: 800; font-size: 1rem;
  letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.lv2-banner.ok .lv2-banner-btn { background: #58cc02; color: #fff; box-shadow: 0 4px 0 #46a302; }
.lv2-banner.bad .lv2-banner-btn { background: #ff4b4b; color: #fff; box-shadow: 0 4px 0 #d33131; }
.lv2-banner.warn .lv2-banner-btn { background: #f7b500; color: #4a3600; box-shadow: 0 4px 0 #c99400; }
.lv2-banner-btn:active { transform: translateY(4px); box-shadow: none !important; }

/* =====================================================================
   BTOefening (.oef-*) restyle — book.css paints these for light paper;
   scoped overrides make them native to the dark theme. --bk-ink is
   remapped on .lv2-ov above, so text using it is already light.
   ===================================================================== */
#lv2Ov .oef { gap: 16px; }
#lv2Ov .oef-title {
  color: #f1f7fb; font-weight: 800;
  font-size: clamp(1.35rem, 5vw, 1.8rem); letter-spacing: -.01em;
}
#lv2Ov .oef-bubble { border-color: #37464f; background: transparent; border-radius: 16px; }
#lv2Ov .oef-bubble::before { border-right-color: #37464f; }
#lv2Ov .oef-bubble-t {
  font-family: "Quicksand", "Segoe UI", system-ui, sans-serif;
  color: #f1f7fb; font-weight: 600;
  text-decoration: underline dashed rgba(120,141,151,.55);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
#lv2Ov .oef-line { border-color: #37464f; }
#lv2Ov .oef-tile, #lv2Ov .oef-opt, #lv2Ov .oef-card {
  background: #202f36; border-color: #37464f; color: #f1f7fb;
}
#lv2Ov .oef-tile { box-shadow: none; }
#lv2Ov .oef-opt { border-radius: 14px; }
#lv2Ov .oef-opt.sel, #lv2Ov .oef-card.sel {
  border-color: #1cb0f6; background: rgba(28,176,246,.12); color: #5fc9ff;
}
#lv2Ov .oef-sin { color: #f1f7fb; font-family: "Quicksand", "Segoe UI", system-ui, sans-serif; }
#lv2Ov .oef-slot { border-bottom-color: #1cb0f6; color: #5fc9ff; }
#lv2Ov .oef-word { color: #ce82ff; border-bottom-color: #ce82ff; }
#lv2Ov .oef-newword { background: rgba(206,130,255,.15); color: #ce82ff; }
#lv2Ov .oef-card-cap { color: #b6c8d1; }
#lv2Ov .oef-check {
  background: #93d333; color: #131f24; box-shadow: 0 4px 0 #79b933;
  border-radius: 14px; letter-spacing: 1.2px; text-transform: uppercase;
}
#lv2Ov .oef-check:disabled { background: #37464f; color: #52656d; box-shadow: none; }
#lv2Ov .oef-result { border-radius: 16px; }
#lv2Ov .oef-result.ok .oef-verdict { color: #58a700; }
#lv2Ov .oef-result.bad .oef-verdict { color: #ea2b2b; }
#lv2Ov .oef-correct { color: #8c2f2a; }
#lv2Ov .oef-why { color: #4a3b12; background: rgba(224,169,61,.22); }
#lv2Ov .oef-prent.emoji { filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
/* new question types (oop text + pas match) in the dark theme */
#lv2Ov .oef-q { font-family: "Quicksand", "Segoe UI", system-ui, sans-serif; color: #f1f7fb; font-weight: 600; }
#lv2Ov .oef-oop-input { background: #202f36; border-color: #37464f; color: #f1f7fb; }
#lv2Ov .oef-oop-input:focus { border-color: #1cb0f6; }
#lv2Ov .oef-pas-item { background: #202f36; border-color: #37464f; color: #f1f7fb; }
#lv2Ov .oef-pas-item.sel { border-color: #1cb0f6; background: rgba(28,176,246,.14); }
#lv2Ov .oef-pas-item.paired { border-color: #93d333; background: rgba(147,211,51,.14); }
#lv2Ov .oef-pas-item.paired .oef-pas-badge { background: #93d333; color: #131f24; }

/* =====================================================================
   Responsive + motion
   ===================================================================== */
@media (min-width: 720px) {
  .lv2-top { padding-top: calc(16px + env(safe-area-inset-top)); }
  .lv2-stephost { padding: 18px 24px 48px; }
  .lv2-bottom { border-top: 2px solid #37464f; padding-top: 4px; }
  .lv2-ava { width: 120px; }
  .lv2-ava.big { width: 150px; }
}
@media (max-width: 400px) {
  .lv2-stephost { padding: 8px 14px 30px; }
  .lv2-ava { width: 88px; }
  .lv2-pts { padding: 3px 9px; font-size: .95rem; }
  .lv2-scene { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv2-ov, .lv2-ov * { animation: none !important; transition: none !important; }
}