/* ============================================================
   Bright Sparks English — Level 6 game app
   Comic Neue, bright, bouncy, kid-friendly.
   ============================================================ */
:root {
  --blue: #2e9bff;
  --blue-dark: #1565c0;
  --green: #3ecf6a;
  --green-dark: #1e9e4a;
  --orange: #ff9f2e;
  --orange-dark: #e07b00;
  --purple: #a05ce0;
  --purple-dark: #7c3aed;
  --red: #ff5d5d;
  --red-dark: #d32f2f;
  --yellow: #ffd93d;
  --pink: #ff6fb5;
  --teal: #19c3b1;
  --ink: #29335c;
  --paper: #eef7ff;
  --card: #ffffff;
  --shadow: 0 6px 0 rgba(41, 51, 92, 0.15);
  --radius: 22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 217, 61, 0.35) 0 140px, transparent 141px),
    radial-gradient(circle at 88% 20%, rgba(62, 207, 106, 0.25) 0 110px, transparent 111px),
    radial-gradient(circle at 75% 85%, rgba(160, 92, 224, 0.2) 0 150px, transparent 151px),
    radial-gradient(circle at 18% 78%, rgba(46, 155, 255, 0.22) 0 120px, transparent 121px),
    linear-gradient(160deg, #d8f1ff 0%, #eef7ff 45%, #fff6e3 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; }

button { font-family: inherit; }

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 80px;
}

/* ---------- Top bar (always visible) ---------- */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 18px;
  position: sticky;
  top: 10px;
  z-index: 50;
}
.topbar .home-btn {
  border: none;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--blue-dark);
  transition: transform 0.1s;
}
/* Home uses Journal's book-heading type; the shared navigation geometry stays intact. */
.topbar .home-btn[onclick="UI.goHome()"] {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
.topbar .home-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-dark); }
/* Standalone "back" buttons (e.g. ⬅️ Languages on a Chinese category, ⬅️ All Subjects on a
   subject hub) live OUTSIDE .topbar, so without this they fell back to a tiny grey browser
   button. Give every .home-btn a colourful, finger-friendly pill; .topbar .home-btn is more
   specific and keeps the topbar buttons exactly as they were. */
.home-btn {
  border: none;
  background: linear-gradient(160deg, #54b1ff, var(--blue));
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--blue-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.home-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.home-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-dark); }
.topbar .spacer { flex: 1; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  background: #fff8dd;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 1rem;
}
.stat-chip.coins { background: #fff3e0; border-color: var(--orange); }
.stat-chip.streak { background: #ffe9ec; border-color: var(--pink); }
.stat-chip .bump { display: inline-block; animation: bump 0.45s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.6) rotate(-8deg); }
  100% { transform: scale(1); }
}

/* ---------- Screens ---------- */
.screen { display: none; animation: screenQuickIn 0.1s ease-out; }
.screen.active { display: block; }
@keyframes screenQuickIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

/* ---------- Home ---------- */
.hero {
  text-align: center;
  padding: 18px 10px 6px;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: 8px 0 4px;
  color: var(--blue-dark);
  text-shadow: 3px 3px 0 #fff, 5px 5px 0 rgba(46, 155, 255, 0.25);
  letter-spacing: 1px;
}
.hero .sub { font-size: 1.15rem; font-weight: 700; color: var(--purple-dark); }

.player-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin: 14px 0 6px;
}
.avatar-big {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--blue);
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.avatar-big:hover { transform: scale(1.08) rotate(-4deg); }
.avatar-big.has-photo { font-size: 0; background-repeat: no-repeat; background-size: 150%; background-position: center 12%; }
.player-meta { text-align: left; min-width: 230px; }
.player-meta .pname { font-weight: 700; font-size: 1.25rem; }

.progress-track {
  background: #dbe7f5;
  border-radius: 999px;
  min-height: 26px;
  overflow: hidden;
  border: 2px solid #c3d4ea;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: repeating-linear-gradient(45deg, var(--green), var(--green) 12px, #5fe08a 12px, #5fe08a 24px);
  width: 0%;
  transition: width 0.8s cubic-bezier(.2,.9,.3,1.2);
}
.progress-label {
  position: relative;
  z-index: 1;
  padding: 4px 14px;
  text-align: center;
  line-height: 1.25;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---------- Big subject buttons ---------- */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 22px 0;
}
.subject-btn {
  border: none;
  border-radius: var(--radius);
  padding: 22px 16px 18px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  /* Default readable background so a .subject-btn used WITHOUT a colour class
     (Start free, admin/auth utility buttons, etc.) is never white-on-white.
     The .c-blue/.c-green/… modifiers override this with their own colour. */
  background: linear-gradient(160deg, #6f9bff, #4f73e8);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.22);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  position: relative;
  overflow: hidden;
}
.subject-btn .big-emoji { display: block; font-size: 2.8rem; margin-bottom: 6px; animation: floaty 3s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.subject-btn:hover { transform: translateY(-4px) scale(1.03); filter: brightness(1.07); }
.subject-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.22); }
.subject-btn .count-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 2px 12px;
  margin-top: 6px;
}
.subject-btn.c-blue   { background: linear-gradient(160deg, #54b1ff, var(--blue));   box-shadow: 0 7px 0 var(--blue-dark); }
.subject-btn.c-green  { background: linear-gradient(160deg, #5fe08a, var(--green));  box-shadow: 0 7px 0 var(--green-dark); }
.subject-btn.c-orange { background: linear-gradient(160deg, #ffb95e, var(--orange)); box-shadow: 0 7px 0 var(--orange-dark); }
.subject-btn.c-purple { background: linear-gradient(160deg, #bd83f0, var(--purple)); box-shadow: 0 7px 0 var(--purple-dark); }
.subject-btn.c-red    { background: linear-gradient(160deg, #ff8585, var(--red));    box-shadow: 0 7px 0 var(--red-dark); }
.subject-btn.c-teal   { background: linear-gradient(160deg, #43dccb, var(--teal));   box-shadow: 0 7px 0 #0e8d80; }
.subject-btn.c-pink   { background: linear-gradient(160deg, #ff94cb, var(--pink));   box-shadow: 0 7px 0 #d23c87; }
.subject-btn.c-indigo { background: linear-gradient(160deg, #8ba2ff, #5b6bdc);       box-shadow: 0 7px 0 #3a47a8; }
.subject-btn.c-amber  { background: linear-gradient(160deg, #ffd166, #f3a712);       box-shadow: 0 7px 0 #c97f00; }

/* ---------- Badges shelf ---------- */
.badge-shelf {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  margin: 14px 0;
}
.badge-shelf h3 { margin: 0 0 8px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-item {
  text-align: center;
  width: 86px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}
.badge-item .badge-ico {
  font-size: 2.1rem;
  display: block;
  background: #f1f6ff;
  border: 3px solid var(--blue);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  line-height: 56px;
  margin: 0 auto 4px;
}
.badge-item.locked { opacity: 0.35; filter: grayscale(1); }
.badge-item.earned .badge-ico { animation: badgePop 0.5s ease; border-color: var(--orange); background: #fff6da; }
@keyframes badgePop {
  0% { transform: scale(0); }
  70% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1); }
}

/* ---------- Topic list (category screen) ---------- */
.cat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 22px;
  margin: 16px 0;
}
.cat-header .cat-emoji { font-size: 2.6rem; }
.cat-header h2 { margin: 0; }
.cat-header .cat-sub { font-size: 0.95rem; color: #5a6691; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.topic-btn {
  border: none;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.12s, box-shadow 0.12s;
  border-top: 6px solid var(--blue);
}
.topic-btn:hover { transform: translateY(-3px) rotate(-0.5deg); }
.topic-btn:active { transform: translateY(2px); }
.topic-btn .topic-emoji { font-size: 1.9rem; }
.topic-btn .topic-name { font-weight: 700; font-size: 1.12rem; display: block; }
.topic-btn .topic-strand {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 10px;
  margin-top: 4px;
}
.topic-btn .strand-language   { background: #e3f0ff; color: var(--blue-dark); }
.topic-btn .strand-literature { background: #f3e8ff; color: var(--purple-dark); }
.topic-btn .strand-literacy   { background: #e5f9ec; color: var(--green-dark); }
/* Maths strands */
.topic-btn .strand-number      { background: #e3f0ff; color: var(--blue-dark); }
.topic-btn .strand-algebra     { background: #ede7ff; color: var(--purple-dark); }
.topic-btn .strand-measurement { background: #e5f9ec; color: var(--green-dark); }
.topic-btn .strand-space       { background: #fff0e0; color: #a85b00; }
.topic-btn .strand-statistics  { background: #ffe6f0; color: #b0245e; }
.topic-btn .strand-probability { background: #fff7d6; color: #8a6d00; }

/* ---- walkthrough: animated step-by-step "solve it together" ---- */
.wt-problem {
  font-size: 1.7rem; font-weight: 800; text-align: center;
  background: #eef5ff; border: 2px solid #cfe0f5; border-radius: 14px;
  padding: 14px 10px; margin: 10px 0; color: var(--blue-dark); letter-spacing: .5px;
}
.wt-tape { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.wt-line {
  background: #fff; border: 2px solid #e3ecf7; border-left: 6px solid var(--blue);
  border-radius: 12px; padding: 10px 14px;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease;
}
.wt-line.in { opacity: 1; transform: translateY(0); }
.wt-math { font-size: 1.5rem; font-weight: 800; color: #1f2a44; }
.wt-math b { background: var(--yellow); border-radius: 6px; padding: 0 6px; }
.wt-why  { font-size: 1rem; color: #5a6691; margin-top: 4px; }
.wt-ask { margin: 10px 0; }
.wt-ask-q { font-weight: 700; margin-bottom: 8px; color: var(--purple-dark); }
.wt-ask-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.wt-ask-opts .wt-opt { flex: 1 1 120px; font-size: 1.2rem; font-weight: 800; }
.wt-ctrl { display: flex; justify-content: center; margin: 12px 0 4px; }
.wt-step-btn { min-width: 220px; }
.topic-btn .topic-stars { float: right; font-size: 0.95rem; letter-spacing: 2px; }
.topic-btn.done { border-top-color: var(--green); }

/* ---------- Lesson screen ---------- */
.lesson-shell {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px 26px;
  margin: 16px 0;
  position: relative;
}
.lesson-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lesson-head h2 { margin: 0; flex: 1; min-width: 200px; }
.step-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.step-dots .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #d7e3f4;
  transition: background 0.2s, transform 0.2s;
}
.step-dots .dot.now { background: var(--orange); transform: scale(1.35); }
.step-dots .dot.done { background: var(--green); }

.step-area { min-height: 280px; }
.step-card { animation: screenIn 0.3s ease; }
.step-card h3 { color: var(--blue-dark); font-size: 1.45rem; margin: 8px 0; }
.step-card .step-emoji { font-size: 2.6rem; }
.step-read-aloud {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.step-read-btn,
.step-read-stop {
  border: 2px solid #cdbcf3;
  background: #f4f0ff;
  color: #5d3fa4;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(95, 70, 150, .22);
}
.step-read-btn {
  border-radius: 999px;
  padding: 8px 15px;
}
.step-read-stop {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  line-height: 1;
}
.step-read-btn:active,
.step-read-stop:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(95, 70, 150, .22);
}
.explain-body { font-size: 1.08rem; }
.explain-body .hl { background: var(--yellow); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.explain-body .ex-good { background: #e5f9ec; border-left: 6px solid var(--green); border-radius: 10px; padding: 8px 14px; margin: 8px 0; }
.explain-body .ex-bad  { background: #ffecec; border-left: 6px solid var(--red); border-radius: 10px; padding: 8px 14px; margin: 8px 0; }
.explain-body table { border-collapse: collapse; margin: 10px 0; width: 100%; }
.explain-body th, .explain-body td { border: 2px solid #dbe7f5; padding: 7px 12px; text-align: left; }
.explain-body th { background: #eef5ff; }
/* Foundation phonics: sound tiles for blend/segment steps — big, spaced, and
   visibly broken apart so pre-readers can follow picture -> word -> sounds. */
.explain-body .sound-set { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 6px; }
.explain-body .sound-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.explain-body .sound-pic { font-size: 2.4rem; line-height: 1; }
.explain-body .sound-word { background: var(--yellow); border-radius: 12px; padding: 4px 16px; font-size: 1.7rem; font-weight: 800; }
.explain-body .sound-arrow { color: #8a7fb0; font-size: 1.6rem; font-weight: 800; }
.explain-body .sound-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 8px 12px; background: #eef2ff; border: 3px solid #c9d4f5; border-radius: 14px; font-size: 1.6rem; font-weight: 800; }
/* ── Young-learner visual scaffolds (F–Y3) ─────────────────────────────────
   Additive, opt-in, pure-CSS manipulatives for any explain/html field. They
   make abstract ideas concrete (concrete→pictorial→abstract) and give young
   steps a predictable see→say→do shape. Nothing renders unless a lesson opts
   in by using these classes, so existing lessons are unaffected. */
/* Predictable prompt frame: big picture on top, short caption under it. */
.explain-body .yl-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 10px auto 16px; }
.explain-body .yl-prompt img { max-width: 220px; height: auto; border-radius: 16px; }
.explain-body .yl-prompt .yl-cap { font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
/* Ten-frame: 2×5 grid; add class "on" to a cell to fill it with a counter. */
.explain-body .ten-frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: max-content; margin: 14px auto; padding: 8px; background: #fff; border: 3px solid #6a5acd; border-radius: 16px; }
.explain-body .ten-frame .cell { width: 46px; height: 46px; border: 2px solid #c9d4f5; border-radius: 10px; }
.explain-body .ten-frame .cell.on { position: relative; }
.explain-body .ten-frame .cell.on::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #e8536b; }
/* Counters: big, countable objects (images or characters) with breathing room. */
.explain-body .counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 2.6rem; margin: 14px 0; }
.explain-body .counters img { width: 48px; height: 48px; object-fit: contain; }
/* Number line: scrollable row of big ticks; add "on" to mark the target number. */
.explain-body .number-line { display: flex; align-items: flex-end; margin: 26px 0 14px; overflow-x: auto; padding-top: 8px; }
.explain-body .number-line .tick { flex: 0 0 48px; text-align: center; font-size: 1.35rem; font-weight: 700; border-top: 4px solid #6a5acd; padding-top: 8px; position: relative; }
.explain-body .number-line .tick.on { color: #e8536b; }
.explain-body .number-line .tick.on::before { content: "\25BC"; position: absolute; top: -22px; left: 0; right: 0; color: #e8536b; font-size: 1.1rem; }
/* Part-whole: a whole box above two part boxes — the number-bond model. */
.explain-body .part-whole { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0; }
.explain-body .part-whole .pw-cell { display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; border-radius: 14px; }
.explain-body .part-whole .whole { width: 84px; height: 66px; background: #eef2ff; border: 3px solid #6a5acd; }
.explain-body .part-whole .parts { display: flex; gap: 44px; }
.explain-body .part-whole .part { width: 72px; height: 58px; background: #e1f5ee; border: 3px solid #1d9e75; }
.literature-illo {
  margin: 10px 0 12px;
  border: 2px solid #d9e6f2;
  border-radius: 14px;
  overflow: hidden;
  background: #fffaf0;
  box-shadow: 0 8px 20px rgba(60, 55, 110, .12);
}
.literature-illo svg,
.literature-illo img {
  display: block;
  width: 100%;
  height: auto;
}
.literature-illo img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: #fffaf0;
}
.literature-illo figcaption {
  padding: 8px 12px;
  background: #fff;
  color: #59627f;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}

/* Tap-to-hear reader aid (reading lessons): toggle + Word/Sentence + highlight/read */
.tts-readtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.tts-wordmode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 2px solid #f3c64d; border-radius: 999px;
  background: #fff8e1; color: #7a5a00;
  font-family: inherit; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; box-shadow: 0 2px 0 rgba(120,90,0,.18);
}
.tts-wordmode.on { background: var(--yellow); border-color: #e0ae00; color: #5a4200; }
.tts-grain { display: inline-flex; gap: 4px; }
.tts-grain[hidden] { display: none; }
.tts-grain button {
  padding: 6px 11px; border: 2px solid #cdd9ef; border-radius: 999px;
  background: #fff; color: #3a4a6b;
  font-family: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer;
}
.tts-grain button.on { background: #5d7fd6; border-color: #3d62bd; color: #fff; }
/* Sentence player: play / stop + reading-speed buttons */
.tts-splayer { display: inline-flex; align-items: center; gap: 4px; }
.tts-splayer[hidden] { display: none; }
.tts-splayer > button[data-sp] {
  padding: 5px 10px; border: 2px solid #cdd9ef; border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.tts-speeds { display: inline-flex; gap: 3px; margin-left: 4px; }
.tts-speeds button {
  padding: 4px 8px; border: 2px solid #cdd9ef; border-radius: 999px;
  background: #fff; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.tts-speeds button.on { background: #5d7fd6; border-color: #3d62bd; }
.words-tappable .tts-word { cursor: pointer; border-radius: 5px; transition: background .1s; }
.words-tappable .tts-word:hover { background: rgba(255,225,77,.55); }
.tts-word.tts-selected { background: rgba(255,225,77,.42); border-radius: 5px; }
.tts-word.tts-reading { background: var(--yellow); box-shadow: 0 0 0 2px #ffd000; border-radius: 5px; }

.say-btn {
  border: none;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--purple-dark);
  font-size: 0.95rem;
  margin: 6px 0;
}
.say-btn:active { transform: translateY(3px); box-shadow: none; }

/* activity answers */
.choices { display: grid; gap: 10px; margin: 14px 0; }
.choice-btn {
  border: 3px solid #dbe7f5;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s, background 0.1s;
}
.choice-btn:hover { border-color: var(--blue); transform: translateX(4px); }
.choice-btn.right { border-color: var(--green); background: #e5f9ec; animation: bump 0.4s; }
.choice-btn.wrong { border-color: var(--red); background: #ffecec; animation: shake 0.4s; }
.choice-btn:disabled { cursor: default; opacity: 0.85; }

/* Picture-choice answers (Foundation pre-readers) — tap-able image options.
   Reuses .choice-btn look (right/wrong/disabled states all apply). */
.choice-img-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice-img-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px; min-height: 120px;
}
.choice-img-btn:hover { transform: translateY(-3px); }
.choice-img { max-width: 100%; max-height: 150px; border-radius: 12px; object-fit: contain; pointer-events: none; }
/* The caption is the count number — HIDDEN when the picture is present (the child must COUNT
   the objects, not read the answer). It only appears as the missing-art fallback below. */
.choice-img-cap { display: none; margin-top: 6px; font-size: 1rem; font-weight: 800; color: #29335c; }
/* when the art is not yet in place, show the caption as a large placeholder */
.choice-img-btn.img-missing { min-height: 96px; }
.choice-img-btn.img-missing .choice-img-cap { display: block; font-size: 1.6rem; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.fill-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.fill-input {
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  border: 3px solid var(--blue);
  border-radius: 14px;
  padding: 10px 16px;
  min-width: 200px;
}
.fill-input.right { border-color: var(--green); background: #e5f9ec; }
.fill-input.wrong { border-color: var(--red); background: #ffecec; animation: shake 0.4s; }

.feedback {
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px 0;
  font-weight: 700;
  display: none;
}
.feedback.show { display: block; animation: screenIn 0.25s; }
.feedback.good { background: #e5f9ec; border: 2px solid var(--green); }
.feedback.bad  { background: #fff3e0; border: 2px solid var(--orange); }

/* deep "why" panel — the 150–500 word explanation shown after a second wrong try */
.deep-why { margin-top: 10px; }
.deep-why > summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  padding: 6px 0;
  color: var(--orange);
}
.deep-why > summary::-webkit-details-marker { display: none; }
.deep-why-body {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ffd9a8;
  font-weight: 400;
  line-height: 1.6;
  max-height: 320px;
  overflow-y: auto;
}
.deep-why-body p { margin: 0 0 0.7em; }
.deep-why-body p:last-child { margin-bottom: 0; }

/* carry-forward banner — a previously-missed question revisited at a lesson's top */
.carry-banner {
  margin: 4px 0 10px;
  padding: 8px 12px;
  background: #eef4ff;
  border: 1px solid #c7d9ff;
  border-radius: 12px;
  font-weight: 700;
  color: #2c4a8a;
}

/* Records — question table. Neutral: matches the lesson card (white bg, --ink text),
   no colour fills. Order: Question → Incorrect → Correct → Strand → Date.
   Only signal kept is a subtle red flag when a question was wrong >3 times. */
.wl-recsort { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.wl-sortbtn { border: 1px solid #cdd8e3; background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: .85em; cursor: pointer; }
.wl-sortbtn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-rectable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 14px; }
.wl-rectable { width: 100%; border-collapse: collapse; font-size: 1rem; color: var(--ink); }
.wl-rectable th { text-align: left; padding: 8px 10px; font-weight: 800; border-bottom: 2px solid #d7e3ee; white-space: nowrap; }
.wl-rectable td { padding: 8px 10px; border-bottom: 1px solid #e7eef5; vertical-align: top; color: var(--ink); }
.wl-rectable .wl-c-num { color: #8a97ad; font-weight: 700; }
.wl-rectable .wl-c-q { min-width: 180px; font-weight: 600; }
.wl-rectable .wl-c-strand, .wl-rectable .wl-c-date { white-space: nowrap; }
.wl-rectable .wl-c-date { color: #5a6691; font-size: .92em; }
.wl-rectable .wl-muted { color: #aab; }
.wl-rectable .wl-x, .wl-rectable .wl-cnt { color: #8a97ad; font-size: .85em; }
.wl-rectable .wl-flag3 { color: #c0392b; font-weight: 800; }   /* wrong >3 times → subtle red flag */

/* sort (drag & drop) */
.sort-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.sort-cat {
  background: #f4f8ff;
  border: 3px dashed var(--blue);
  border-radius: 16px;
  min-height: 120px;
  padding: 12px 10px;
}
.sort-cat.over { background: #e3f0ff; border-style: solid; }
/* The box label is the thing a child reads to decide where a word goes, so it
   is sized explicitly — the UA default h4 left it at body size (17-19px), which
   reads as tiny inside a box this large. */
.sort-cat h4 {
  margin: 0 0 10px;
  text-align: center;
  color: var(--blue-dark);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
}
.sort-pool { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; min-height: 50px; }
.sort-item {
  background: var(--yellow);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 1.25rem;
  cursor: grab;
  box-shadow: 0 3px 0 #d4ad00;
  transition: transform 0.1s;
}
.sort-item:hover { transform: scale(1.06); }
.sort-item.selected { outline: 4px solid var(--purple); transform: scale(1.06); }
/* Placed tiles used to drop to 0.92rem (~14.7px) — smaller than any other text
   on the page, right at the moment the child needs to re-read their answer. */
.sort-item.placed { box-shadow: none; font-size: 1.15rem; padding: 8px 14px; cursor: pointer; }
.sort-item.right { background: #9fefb9; }
.sort-item.wrong { background: #ffb3b3; animation: shake 0.4s; }

/* match pairs */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.match-col { display: grid; gap: 10px; align-content: start; }
.match-tile {
  border: 3px solid #dbe7f5;
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.98rem;
  text-align: center;
  transition: transform 0.1s, border-color 0.1s;
}
.match-tile:hover { transform: scale(1.03); border-color: var(--purple); }
.match-tile.selected { border-color: var(--purple); background: #f3e8ff; }
.match-tile.matched { border-color: var(--green); background: #e5f9ec; cursor: default; opacity: 0.9; }
.match-tile.wrong { border-color: var(--red); background: #ffecec; animation: shake 0.4s; }

/* jigsaw (drag shape pieces onto a base map) */
.jigsaw-board {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 12px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
}
.jigsaw-slot {
  position: absolute;
  border: 2px dashed var(--blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--blue-dark);
  text-align: center; overflow: hidden;
}
.jigsaw-slot.over { background: rgba(120, 180, 255, 0.5); border-style: solid; }
.jigsaw-slot.filled { border: none; background: none; }
.jigsaw-slot > span { padding: 2px; pointer-events: none; opacity: 0.7; }
.jigsaw-tray { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; justify-content: center; min-height: 50px; }
.jigsaw-piece {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  border: 3px solid #dbe7f5; background: #fff; border-radius: 12px;
  padding: 8px 10px; font-weight: 700; font-size: 0.85rem; cursor: grab;
  transition: transform 0.1s, border-color 0.1s;
}
.jigsaw-piece img { width: 64px; height: 64px; object-fit: contain; pointer-events: none; }
.jigsaw-piece:hover { transform: scale(1.05); border-color: var(--purple); }
.jigsaw-piece.selected { border-color: var(--purple); background: #f3e8ff; }
.jigsaw-piece.wrong { border-color: var(--red); background: #ffecec; animation: shake 0.4s; }
.jigsaw-slot.filled .jigsaw-piece { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; border-radius: 0; cursor: default; }
.jigsaw-slot.filled .jigsaw-piece img { width: 100%; height: 100%; }
.jigsaw-slot.filled .jigsaw-piece > span { display: none; }

/* order (sentence builder) */
.order-build {
  min-height: 56px;
  background: #f4f8ff;
  border: 3px dashed var(--purple);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.order-pool { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.word-tile {
  background: #fff;
  border: 3px solid var(--teal);
  border-radius: 12px;
  padding: 7px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.02rem;
  transition: transform 0.1s;
}
.word-tile:hover { transform: translateY(-3px); }
.word-tile.in-build { border-color: var(--purple); }

/* story builder */
.story-part { margin: 12px 0; }
.story-part h4 { margin: 0 0 6px; color: var(--purple-dark); }
.story-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.story-opt {
  border: 3px solid #dbe7f5;
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
}
.story-opt.picked { border-color: var(--pink); background: #ffeef7; }
.story-result {
  background: #fffbe8;
  border: 3px solid var(--yellow);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 12px 0;
  font-size: 1.08rem;
}

/* lesson controls */
.lesson-controls { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.go-btn {
  border: none;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 999px;
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--green-dark);
  transition: transform 0.1s;
}
.go-btn:hover { filter: brightness(1.08); }
.go-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green-dark); }
.go-btn:disabled { background: #b9c6da; box-shadow: 0 5px 0 #93a3bb; cursor: not-allowed; }
.go-btn.alt { background: var(--orange); box-shadow: 0 5px 0 var(--orange-dark); }
.go-btn.ghost { background: #eef1f8; color: #6c7799; box-shadow: 0 5px 0 #c9d2e6; }

/* lesson complete */
.complete-card { text-align: center; padding: 30px 10px; }
.complete-card .big-stars { font-size: 3.4rem; letter-spacing: 8px; }
.complete-card .star-pop { display: inline-block; animation: starPop 0.6s ease backwards; }
.complete-card .star-pop:nth-child(2) { animation-delay: 0.25s; }
.complete-card .star-pop:nth-child(3) { animation-delay: 0.5s; }
@keyframes starPop {
  0% { transform: scale(0) rotate(-180deg); }
  70% { transform: scale(1.4) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Dictionary ---------- */
.dict-shell { margin: 16px 0; }
.dict-search-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
}
.dict-search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dict-input {
  flex: 1;
  min-width: 220px;
  font: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  border: 4px solid var(--purple);
  border-radius: 999px;
  padding: 10px 22px;
  outline: none;
}
.dict-input:focus { border-color: var(--pink); }
.dict-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sug-chip {
  border: none;
  background: #f3e8ff;
  color: var(--purple-dark);
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 0.95rem;
}
.sug-chip:hover { background: var(--purple); color: #fff; }

.wl-lib-search-note { margin: 0 0 12px; color: #65708c; font-weight: 650; }
.wl-lib-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .6fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  padding: 20px 24px;
  border: 2px solid #e5d8ff;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 0%, #faf6ff 100%);
  box-shadow: var(--shadow);
}
.wl-lib-welcome h3, .wl-lib-results-head h3 { margin: 4px 0 6px; color: var(--purple-dark); }
.wl-lib-welcome p, .wl-lib-results-head p { margin: 0; color: #65708c; }
.wl-lib-eyebrow {
  display: inline-block;
  color: var(--purple-dark);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.wl-lib-key { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #f2eaff; color: #5d5573; font-size: .88rem; }
.wl-lib-key b { color: var(--purple-dark); }
.wl-lib-shelf { margin-top: 26px; }
.wl-lib-shelf-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 2px 12px; }
.wl-lib-shelf-emoji { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: #f2eaff; font-size: 1.45rem; }
.wl-lib-shelf-head h3 { margin: 0; color: var(--purple-dark); }
.wl-lib-shelf-head p { margin: 3px 0 0; color: #65708c; }
.wl-lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wl-lib-card {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.wl-lib-card:hover { box-shadow: 0 0 0 3px var(--purple), var(--shadow); transform: translateY(-2px); }
.wl-lib-card:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; }
.wl-lib-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wl-lib-kind, .wl-lib-tag { display: inline-flex; align-items: center; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.2; }
.wl-lib-kind { padding: 5px 9px; background: #f2eaff; color: var(--purple-dark); }
.wl-lib-tags { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.wl-lib-tag { padding: 4px 8px; background: #eef4f5; color: #466169; }
.wl-lib-card-title { display: block; color: var(--purple-dark); font-size: 1.06rem; line-height: 1.25; }
.wl-lib-card-summary { display: block; margin-top: 7px; color: #65708c; font-size: .9rem; line-height: 1.45; }
.wl-lib-card-open { display: block; margin-top: 13px; color: var(--purple); font-size: .86rem; font-weight: 800; }
.wl-lib-growing { margin: 24px 0 6px; padding: 12px 16px; border-radius: 12px; background: #fff8dd; color: #695c28; text-align: center; font-weight: 700; }
.wl-lib-results-head { margin: 20px 2px 12px; }
.wl-lib-results-grid { margin-top: 10px; }
.wl-lib-band-active { background: var(--purple); color: #fff; }
.wl-lib-diagram { margin: 10px 0 20px; text-align: center; }
.wl-lib-diagram svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.wl-lib-diagram figcaption { margin-top: 8px; color: #65708c; font-size: .85rem; font-style: italic; }
.wl-lib-word { padding: 6px 0; border-bottom: 1px solid #eee; }
.wl-lib-word:last-child { border-bottom: none; }
.wl-lib-article-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.wl-lib-article-title { margin: 8px 0 0; color: var(--purple-dark); font-size: clamp(1.6rem, 3vw, 2.25rem); }
.wl-lib-helps { margin: 16px 0; padding: 14px 18px; border-left: 5px solid var(--purple); border-radius: 10px; background: #f8f3ff; color: #504966; }
.wl-lib-helps ul { margin: 8px 0 0; padding-left: 22px; }
.wl-lib-helps li + li { margin-top: 4px; }
.wl-lib-cite { display: inline-block; margin-left: 3px; color: var(--purple); font-size: .8em; font-weight: 850; text-decoration: none; }
.wl-lib-cite:hover { text-decoration: underline; }
.wl-lib-sources { margin-top: 24px; padding-top: 6px; border-top: 2px solid #eee8f7; }
.wl-lib-sources ol { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.wl-lib-sources li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; align-items: start; }
.wl-lib-sources li > span { grid-row: 1 / span 2; color: #7b6f94; font-weight: 800; }
.wl-lib-sources a { color: var(--purple-dark); font-weight: 750; }
.wl-lib-sources small { display: block; grid-column: 2; margin-top: 2px; color: #737d94; }

@media (max-width: 680px) {
  .wl-lib-welcome { grid-template-columns: 1fr; padding: 18px; }
  .wl-lib-grid { grid-template-columns: 1fr; }
  .wl-lib-card-top { align-items: flex-start; flex-direction: column; }
  .wl-lib-tags { justify-content: flex-start; }
}

.word-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 26px;
  margin-top: 16px;
  border-top: 8px solid var(--purple);
}
.word-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.word-title { font-size: 2.4rem; font-weight: 700; margin: 0; color: var(--purple-dark); }
.syllable-pill {
  background: #fffbe8;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
}
.icon-btn {
  border: none;
  font-size: 1.5rem;
  background: #f1f6ff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.icon-btn:hover { transform: scale(1.15); }
.icon-btn.on { background: var(--yellow); }
.pron-row { font-size: 1.05rem; margin: 6px 0; }
.pron-row .ipa { color: #5a6691; }
.pron-row .phon { font-weight: 700; color: var(--purple-dark); }
.pos-block { margin: 14px 0; }
.pos-label {
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  padding: 2px 14px;
  font-size: 0.9rem;
}
.def-item { margin: 8px 0 10px 8px; }
.def-item .def-ex { color: #5a6691; font-style: italic; }
.pic-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 18px;
  background: #f1f6ff;
  border: 3px dashed var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  float: right;
  margin: 0 0 10px 14px;
}
.fun-fact {
  background: #e5f9ec;
  border: 3px solid var(--green);
  border-radius: 16px;
  padding: 10px 16px;
  margin: 12px 0;
  font-weight: 700;
}
.own-sentence textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  border: 3px solid var(--teal);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 70px;
}
.saved-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

.dict-game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0; }

/* ---------- Modal (avatar picker, badge popup) ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(41, 51, 92, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.modal-back.show { display: flex; }
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 30px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  animation: modalIn 0.3s cubic-bezier(.2,.9,.3,1.3);
  max-height: 85vh;
  overflow: auto;
  position: relative;
}
/* subject switcher popup: wider, compact, all subjects visible without scrolling */
.modal-card.modal-subjects { max-width: 720px; padding: 22px 22px 24px; }
.modal-card.modal-subjects .subject-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin: 4px 0 0;
}
.modal-card.modal-subjects .subject-btn { padding: 14px 8px 12px; font-size: 0.95rem; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.modal-card.modal-subjects .subject-btn .big-emoji { font-size: 2rem; margin-bottom: 2px; }
.modal-card.modal-subjects .subject-btn .count-pill { font-size: 0.7rem; padding: 1px 8px; }
.modal-card.qb-subject-switcher-modal {
  max-width: 940px;
  max-height: min(92vh,760px);
  padding: 0 18px 18px;
  overflow: hidden;
  border: 2px solid #b58a42;
  border-radius: 22px;
  color: #edf5f6;
  background:
    radial-gradient(circle at 12% 8%,rgba(75,134,148,.34),transparent 22rem),
    linear-gradient(180deg,#173d49,#102b34);
  box-shadow: 0 22px 58px rgba(9,29,38,.34);
}
.qb-subject-switcher-modal .modal-x {
  z-index: 2;
  color: #173d49;
  background: #fff8e8;
}
.qb-switcher-head {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin: 0 -18px 14px;
  padding: 18px 58px 14px 20px;
  border-bottom: 2px solid #b58a42;
  text-align: left;
}
.qb-switcher-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 2px solid #f6d693;
  border-radius: 15px;
  color: #173d49;
  background: #fff8e8;
  box-shadow: 0 4px 0 rgba(4,24,31,.28);
}
.qb-switcher-mark .qb-ico { width: 28px; height: 28px; }
.qb-switcher-head > div > span {
  display: block;
  color: #f6d693;
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qb-switcher-head h2 {
  margin: 2px 0 1px;
  color: #fff;
  font-family: Georgia,serif;
  font-size: 1.7rem;
}
.qb-switcher-head p { margin: 0; color: #cbdadd; font-size: .76rem; }
.qb-subject-switch-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.qb-switch-subject {
  min-width: 0;
  min-height: 164px;
  display: grid;
  grid-template-rows: 88px auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  color: var(--qb-switch-dark,#173d49);
  background: linear-gradient(155deg,#fff,var(--qb-switch-soft,#e8f1ff));
  box-shadow: 0 4px 0 var(--qb-switch-dark,#173d49),0 10px 18px rgba(3,20,27,.14);
  text-align: center;
  cursor: pointer;
}
.qb-switch-subject:hover { border-color: var(--qb-switch-accent,#3177c9); transform: translateY(-2px); }
.qb-switch-subject.is-current {
  color: #fff;
  background: linear-gradient(155deg,var(--qb-switch-accent,#3177c9),var(--qb-switch-dark,#1e5192));
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 4px 0 var(--qb-switch-dark,#1e5192),0 10px 20px rgba(0,0,0,.2);
}
.qb-switch-subject.is-unavailable { opacity: .58; }
.qb-switch-subject img {
  width: min(174px,100%);
  height: 88px;
  display: block;
  object-fit: contain;
  border: 2px solid rgba(255,255,255,.62);
  border-radius: 12px;
  background: color-mix(in srgb,var(--qb-switch-soft,#e8f1ff) 52%,#fff);
}
.qb-switch-subject strong {
  min-width: 0;
  max-width: 100%;
  align-self: center;
  font-size: .88rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.qb-switch-subject > small {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: #64737d;
  font-size: .58rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.qb-switch-subject.is-current > small { color: rgba(255,255,255,.84); }
.qb-switch-subject > span {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--qb-switch-dark,#17436c);
  background: rgba(255,255,255,.78);
  font-size: .58rem;
  font-weight: 950;
}
@media (max-width:600px) {
  .modal-card.qb-subject-switcher-modal { max-height: 94vh; padding: 0 7px 9px; border-radius: 17px; }
  .qb-switcher-head { grid-template-columns: 40px minmax(0,1fr); gap: 8px; margin: 0 -7px 7px; padding: 10px 46px 9px 9px; }
  .qb-switcher-mark { width: 38px; height: 38px; border-radius: 11px; }
  .qb-switcher-mark .qb-ico { width: 22px; height: 22px; }
  .qb-switcher-head h2 { font-size: 1.35rem; }
  .qb-switcher-head p { font-size: .66rem; }
  .qb-subject-switch-grid { gap: 5px; }
  .qb-switch-subject { min-height: 128px; grid-template-rows: 62px auto auto auto; gap: 3px; padding: 5px 3px; border-radius: 10px; }
  .qb-switch-subject img { width: min(104px,100%); height: 62px; border-radius: 8px; }
  .qb-switch-subject strong { font-size: .68rem; }
  .qb-switch-subject > small { font-size: .49rem; }
  .qb-switch-subject > span { font-size: .52rem; }
}
@media (max-height:560px) {
  .modal-card.qb-subject-switcher-modal { max-height: 96vh; padding-bottom: 7px; }
  .qb-switcher-head { margin-bottom: 5px; padding-top: 7px; padding-bottom: 6px; }
  .qb-switcher-head p { display: none; }
  .qb-subject-switch-grid { gap: 4px; }
  .qb-switch-subject { min-height: 72px; grid-template-columns: 68px minmax(0,1fr); grid-template-rows: auto auto auto; gap: 1px 6px; padding: 4px; text-align: left; justify-items: start; }
  .qb-switch-subject img { grid-row: 1/-1; width: 68px; height: 58px; align-self: center; }
  .qb-switch-subject strong,.qb-switch-subject > small,.qb-switch-subject > span { grid-column: 2; }
  .qb-switch-subject > span { padding: 1px 5px; }
}
.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: #f1f6ff;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
}
.modal-x:hover { background: var(--red); color: #fff; }
.exit-home-btn {
  border: none;
  background: #fff;
  color: var(--blue-dark);
  border: 3px solid var(--blue);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  margin-top: 10px;
}
.exit-home-btn:hover { background: var(--blue); color: #fff; }

/* word forms table */
.forms-table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}
.forms-table th, .forms-table td {
  border: 2px solid #e8defc;
  padding: 7px 12px;
  text-align: left;
  font-size: 0.98rem;
}
.forms-table th { background: #f3e8ff; color: var(--purple-dark); }
.practice-sents { margin: 8px 0 0 0; padding-left: 22px; }
.practice-sents li { margin: 4px 0; }
@keyframes modalIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.avatar-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; }
.avatar-pick {
  font-size: 2.2rem;
  background: #f1f6ff;
  border: 3px solid transparent;
  border-radius: 50%;
  width: 66px;
  height: 66px;
  cursor: pointer;
}
.avatar-pick:hover, .avatar-pick.on { border-color: var(--blue); transform: scale(1.1); }
.reward-pop-emoji { font-size: 4rem; animation: badgePop 0.6s ease; }

/* confetti canvas — hidden while idle.
   A <canvas> is a replaced element, so `inset:0` does NOT stretch it; it sits at
   its intrinsic 300×150 in the top-left corner. On iOS WebKit an idle fixed-position
   canvas keeps a GPU compositing layer that repaints as an opaque grey rectangle and
   flickers on scroll — the "grey box glitch". Keeping it display:none until a burst
   (Confetti.burst shows it; Confetti.tick hides it again) removes the layer entirely. */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  display: none;
}

/* coins fly */
.fly-coin {
  position: fixed;
  font-size: 1.6rem;
  z-index: 300;
  pointer-events: none;
  animation: flyUp 0.9s ease forwards;
}
@keyframes flyUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-90px) scale(1.6); opacity: 0; }
}

/* ---------- TTS player ---------- */
.tts-player {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: #f4f0ff;
  border: 2px solid #d6c7f5;
  border-radius: 999px;
  padding: 6px 12px;
  margin: 10px 0;
}
.tts-btn {
  border: none;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.tts-btn:hover { filter: brightness(1.1); }
.tts-speed {
  font: inherit;
  font-size: 0.85rem;
  border: 2px solid var(--purple);
  border-radius: 999px;
  padding: 4px 8px;
}
.tts-text {
  background: #fffbe8;
  border: 2px solid var(--yellow);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 8px 0;
  line-height: 1.9;
}
.tts-w { border-radius: 6px; padding: 0 2px; }
.tts-w.lit { background: var(--yellow); font-weight: 700; }
/* reading bar highlights a whole answer choice while it reads it aloud */
.choice-btn.tts-reading { background: var(--yellow); border-color: #e0ae00; box-shadow: 0 0 0 2px #ffd000; }
/* ONE site-wide floating reading bar, pinned just above the bottom tab bar.
   --wl-tabbar-h is the tab bar's real measured height (wordlab-shell.js); it
   already includes the safe-area inset, and grows when the bar wraps to 2-3
   rows on a narrow phone. The max() keeps the bar off the home indicator on
   screens where the tab bar is hidden (--wl-tabbar-h: 0).
   z-index 950 sits ABOVE the modal band on purpose: a popup is drawn at
   UI._topZ()+1, which is #wl-tabbar's 900 + 1 = 901, so the reading bar and its
   launcher stay clickable while a lesson popup is open. UI._topZ() deliberately
   skips these two so the modal can't climb above them. (Anything above ~1000,
   e.g. the Art Studio full-screen panel, still covers the bar as before.) */
.tts-globalbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(calc(var(--wl-tabbar-h, 76px) + 4px), calc(12px + env(safe-area-inset-bottom, 0px))); z-index: 950;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px;
  max-width: 96vw;
  background: #f4f0ff; border: 2px solid #cdbcf3; border-radius: 22px;
  padding: 5px 10px; box-shadow: 0 8px 22px rgba(38, 59, 82, 0.22);
}
.tts-globalbar[hidden] { display: none; }
.tts-globalbar .tts-min { background: #e7def8; color: #6a3fb0; font-weight: 800; }
/* collapsed launcher chip — shown when the student minimises the bar */
.tts-launcher {
  position: fixed; right: 12px; z-index: 950;
  bottom: max(calc(var(--wl-tabbar-h, 76px) + 4px), calc(12px + env(safe-area-inset-bottom, 0px)));
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #cdbcf3; background: #f4f0ff; cursor: pointer;
  font-size: 1.3rem; line-height: 1; box-shadow: 0 6px 18px rgba(38, 59, 82, 0.22);
}
.tts-launcher[hidden] { display: none; }
.tts-launcher:active { transform: scale(0.94); }
#wl-tabbar .tts-launcher.tts-nav-launcher {
  position: static;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  /* Use the shared .wl-tab type size at each breakpoint. */
}
#wl-tabbar .tts-launcher.tts-nav-launcher.is-open {
  color: var(--blue-dark);
  background: rgba(46, 155, 255, 0.13);
}
.tts-globalbar .tts-btn { padding: 5px 8px; font-size: 0.9rem; }
.tts-globalbar .tts-speeds button { padding: 3px 6px; }
.tts-gb-lbl { font-weight: 800; color: #6a3fb0; font-size: 0.8rem; margin-right: 2px; white-space: nowrap; }
.tts-status { font-size: 0.72rem; font-weight: 700; color: #6a3fb0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tts-status:empty { display: none; }
.tts-tapmodes, .tts-voices, .tts-langs { display: inline-flex; gap: 3px; }
.tts-langs[hidden] { display: none; }
.tts-tapmodes .tts-tap, .tts-voices .tts-tap, .tts-langs .tts-tap { padding: 4px 8px; border: 2px solid #cdbcf3; border-radius: 999px; background: #fff; color: #5a4a86; font-family: inherit; font-weight: 700; font-size: 0.75rem; cursor: pointer; white-space: nowrap; }
.tts-tapmodes .tts-tap.on, .tts-voices .tts-tap.on, .tts-langs .tts-tap.on { background: var(--purple); border-color: var(--purple); color: #fff; }
@media (max-width: 560px) {
  .tts-gb-lbl { display: none; }
  .tts-globalbar { gap: 3px; padding: 5px 8px; }
  #wl-tabbar .tts-launcher.tts-nav-launcher { border-radius: 12px; }
}
.transcript-reveal {
  background: #f4f8ff;
  border: 2px dashed var(--blue);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 10px 0;
}
.transcript-reveal summary { cursor: pointer; font-weight: 700; color: var(--blue-dark); }

/* ---------- lesson meta ---------- */
.level-chip {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 10px;
  vertical-align: middle;
}
.new-chip {
  display: inline-block;
  background: #ff4d6d;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: .3px;
  border-radius: 999px;
  padding: 1px 9px;
  vertical-align: middle;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  animation: newpulse 1.4s ease-in-out infinite;
}
@keyframes newpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* ----- reflection questionnaire ----- */
.reflect-form { margin: 6px 0 10px; }
.reflect-q {
  background: #f4f0ff;
  border: 2px solid #ddd0ff;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 10px 0;
}
.reflect-qtext { margin: 0 0 8px; font-size: 0.96rem; }
.reflect-text { width: 100%; min-height: 64px; }
.reflect-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.reflect-opt {
  border: 2px solid var(--purple, #8b5cf6);
  background: #fff;
  color: var(--ink, #2b2d52);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: transform .08s ease;
}
.reflect-opt:hover { transform: translateY(-1px); }
.reflect-opt.sel { background: var(--purple, #8b5cf6); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.intention-box {
  background: #eef9f1;
  border: 2px solid #bfe8cc;
  border-radius: 12px;
  padding: 8px 14px;
  margin-top: 8px;
  font-size: 0.92rem;
}
.intention-box ul { margin: 4px 0; padding-left: 22px; }

/* ---------- examples list ---------- */
.examples-list { margin: 12px 0; }
.example-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fffbe8;
  border: 2px solid var(--yellow);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 8px 0;
  font-size: 1.05rem;
}
.mini-say, .mini-stop {
  border: none;
  background: var(--purple-soft, #f1eafd);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}
.mini-say:hover { background: var(--purple); }
.mini-stop { background: #fce4e4; }
.mini-stop:hover { background: #f6b8b8; }

/* ---------- recorder & writing ---------- */
.recorder-zone {
  background: #fdeaea;
  border: 3px dashed var(--red);
  border-radius: 16px;
  padding: 16px;
  margin: 12px 0;
  text-align: center;
}
.write-box {
  width: 100%;
  min-height: 140px;
  font: inherit;
  font-size: 1.05rem;
  border: 3px solid var(--orange);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px 0 4px;
}
/* ===== Chinese trace-and-write workbook (the `trace` step) ===== */
.zh-trace-grid {
  display: block;
  max-width: min(620px, 100%);
  margin: 12px auto;
}
.zh-trace-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 4px;
}
.zh-trace-pager .go-btn {
  min-width: 48px;
  padding: 8px 14px;
}
.zh-trace-page-label {
  min-width: 132px;
  text-align: center;
  font-weight: 900;
  color: #6b3fa0;
  background: #faf7ff;
  border: 2px solid #e3d6f2;
  border-radius: 999px;
  padding: 7px 12px;
}
.zh-trace-tile {
  border: 2px solid #e3d6f2;
  background: #faf7ff;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.zh-trace-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.zh-trace-char {
  font-size: 1.8em;
  font-weight: 800;
  color: #6b3fa0;
  line-height: 1;
}
.zh-trace-pin { font-size: .95em; line-height: 1.15; }
.zh-trace-char + .zh-trace-pin { margin-right: auto; }
.zh-trace-audio { display: flex; gap: 5px; width: 100%; justify-content: center; }
.zh-trace-audio .go-btn { padding: 6px 4px; font-size: 1rem; flex: 1; min-width: 0; }
.zh-trace-canvas {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
}
.zh-trace-actions { display: flex; gap: 6px; width: 100%; align-items: center; flex-wrap: wrap; }
.zh-trace-actions .go-btn { padding: 6px 12px; flex: 1; }
.zh-trace-saved {
  flex-basis: 100%;
  text-align: center;
  font-weight: 800;
  color: #2a6b2a;
  min-height: 1.1em;
  font-size: .9rem;
}
.zh-trace-saved.on { color: #2a6b2a; }
.word-count {
  display: inline-block;
  font-weight: 800;
  color: var(--orange-dark);
  background: #fff4e6;
  border: 2px solid #ffd9a8;
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* ---------- locked topics ----------
   A locked lesson is an INVITATION, not a dead control. The old rule
   (opacity .55 + grayscale .6) was the visual language of a disabled button, so a
   grid of them read as "this product is broken//all locked" rather than "here is
   what you'd unlock". Kept clearly secondary — dimmer, cooler top border, padlock
   in the stars slot — but legible and still in colour. */
.topic-btn.locked { opacity: 0.82; filter: saturate(0.85); border-top-color: #b9c6da; }
.topic-btn.locked .topic-name { color: var(--ink); }
.topic-btn.locked:hover { transform: translateY(-3px) rotate(-0.5deg); opacity: 1; }

/* ---------- Free Starter taster ----------
   The free lessons used to be visually IDENTICAL to every other lesson, so the two
   a family could actually play were invisible in a wall of padlocks. The chip is
   the "start here" marker; the banner states the offer above the grid. Both are
   rendered only on the free tier. */
/* Chip/banner greens are DARKER than --green (#3ecf6a) on purpose: white on
   --green measures 2.03:1 and the banner's --green-dark on #e5f9ec only 3.16:1,
   both under the 4.5:1 WCAG AA floor for text this size. Measured values below
   are 5.41:1 and 6.91:1. --green is still fine for the border (not text). */
.free-chip {
  display: inline-block;
  background: #157a3c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 1px 9px;
  vertical-align: middle;
}
.topic-btn.free-taster { border-top-color: var(--green, #3ecf6a); }
.free-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #e5f9ec;
  color: #14603a;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ---------- progress map ---------- */
.map-row {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  margin: 14px 0;
}
.map-row h3 { margin: 0 0 10px; }
.map-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.map-node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s;
}
.map-node:hover { transform: scale(1.15); }
.map-node.done { background: #e5f9ec; border-color: var(--green); }
.map-node.locked { border-color: #b9c6da; background: #eef2f8; cursor: not-allowed; }
.map-link { width: 18px; height: 4px; background: #c3d4ea; border-radius: 2px; }

/* ---------- shop ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0;
  text-align: center;
}
.shop-item {
  border: 2px solid var(--line, #e3e7f2);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.shop-item.owned { border-color: var(--green); background: #f3fcf6; }
.shop-emoji { font-size: 2.2rem; }

/* ---------- quest + xp ---------- */
.quest-bar {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  margin: 10px 0;
}
.xp-track {
  background: #e8defc;
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
  border: 2px solid #d6c7f5;
  margin-top: 4px;
}
.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  width: 0%;
  transition: width 0.8s ease;
}
.xp-label { font-size: 0.82rem; font-weight: 700; color: var(--purple-dark); }
.subject-btn.mini { padding: 12px 10px 10px; font-size: 1rem; }
.subject-btn.mini .big-emoji { font-size: 2rem; margin-bottom: 2px; animation: none; }

/* ---------- certificate ---------- */
.certificate { margin: 2px 0; }
.cert-border {
  border: 6px double var(--purple);
  border-radius: 16px;
  padding: 14px 16px;
  background: #fffdf2;
}
.cert-border h2 { margin: 0 0 2px; font-size: 1.15rem; color: var(--purple-dark); }
.cert-sub { margin: 0; font-weight: 700; color: var(--ink-soft, #4a5670); }
.cert-border > p { margin: 4px 0; }
.cert-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blue-dark);
  margin: 8px 0 2px;
  border-bottom: 3px solid var(--yellow);
  display: inline-block;
  padding: 0 14px 3px;
}
.cert-cat { font-size: 1.2rem; font-weight: 700; margin: 4px 0 4px; }
.cert-date { font-size: 0.8rem; color: #5a6691; margin-top: 6px; }

/* ---- illustrated scene theme layer (sits behind the whole app) ---- */
#kv-theme-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#kv-theme-scene svg { width: 100%; height: 100%; display: block; }
.kv-fly { transform-box: fill-box; transform-origin: center;
  animation: kvFlyDrift var(--d, 9s) ease-in-out infinite, kvFlyBlink var(--p, 2.4s) ease-in-out infinite; }
@keyframes kvFlyDrift {
  0% { transform: translate(0, 0); } 25% { transform: translate(2.5px, -3px); }
  50% { transform: translate(-2px, -5px); } 75% { transform: translate(1.5px, -2px); }
  100% { transform: translate(0, 0); }
}
@keyframes kvFlyBlink { 0%, 100% { opacity: 0.14; } 45%, 60% { opacity: 1; } }
.kv-tw { transform-box: fill-box; transform-origin: center; animation: kvTw var(--p, 2.4s) ease-in-out infinite; }
@keyframes kvTw { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
.kv-snow { animation: kvSnow var(--d, 7s) linear infinite; }
@keyframes kvSnow { 0% { transform: translateY(-8px); opacity: 0; } 12% { opacity: 0.95; } 100% { transform: translateY(64px); opacity: 0; } }
.kv-petal { transform-box: fill-box; transform-origin: center; animation: kvPetal var(--d, 8s) linear infinite; }
@keyframes kvPetal { 0% { transform: translateY(-8px) rotate(0deg); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: translateY(72px) rotate(200deg); opacity: 0; } }
.kv-bubble { transform-box: fill-box; transform-origin: center; animation: kvBubble var(--d, 7s) linear infinite; }
@keyframes kvBubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.7; } 100% { transform: translateY(-42px); opacity: 0; } }

/* ---- front-page "new lessons" announcement ---- */
.hero-news {
  margin: 12px auto 0;
  max-width: 540px;
  background: linear-gradient(160deg, #fff3c4, #ffe39a);
  border: 2px solid var(--orange, #ff9f2e);
  color: #7a5a00;
  font-weight: 700;
  font-size: 0.98rem;
  border-radius: 14px;
  padding: 9px 14px;
  box-shadow: 0 4px 0 rgba(255, 159, 46, 0.35);
}

/* ---- certificate medals + metal tiers ---- */
.cert-medal {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px 0 6px;
}
.cert-medal-ico { font-size: 3rem; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18)); }
.cert-medal-txt { text-align: left; font-size: 1.05rem; color: var(--ink); }
.cert-medal-txt strong { font-size: 1.2rem; }
.cert-blurb { font-style: italic; color: #4a5670; margin: 4px 0 10px; }
/* metal-coloured borders so each award looks distinct */
.cert-titanium .cert-border { border-color: #6b7a8f; background: linear-gradient(160deg, #fbfdff, #e9eef5); box-shadow: inset 0 0 0 2px #c2ccda; }
.cert-gold .cert-border     { border-color: #e6b800; background: linear-gradient(160deg, #fffdf2, #fff4c9); }
.cert-silver .cert-border   { border-color: #9aa6b2; background: linear-gradient(160deg, #ffffff, #eef1f5); }
.cert-bronze .cert-border   { border-color: #c07d3a; background: linear-gradient(160deg, #fffaf3, #f6e3cd); }
.cert-sprout .cert-border   { border-color: var(--green, #3ecf6a); }
/* metal-coloured cert chips on the home shelf */
.cert-chip { border-width: 2px; }
.cert-chip.cert-titanium { background: #eef2f8; border-color: #6b7a8f; }
.cert-chip.cert-gold     { background: #fff7d6; border-color: #e6b800; }
.cert-chip.cert-silver   { background: #f1f3f6; border-color: #9aa6b2; }
.cert-chip.cert-bronze   { background: #f6e7d4; border-color: #c07d3a; }
.cert-sample-tag {
  display: inline-block; margin-bottom: 8px; padding: 3px 12px;
  background: #ffe39a; color: #7a5a00; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.08em; border-radius: 20px;
}
.cert-trial { margin-top: 12px; }
.cert-trial-row { margin-top: 12px; text-align: center; color: #5a6691; }
.cert-level { font-size: 1rem; font-weight: 700; color: var(--purple-dark, #6a3fb0); margin: 0 0 2px; }
.cert-medal-line { font-size: 0.95rem; font-weight: 700; margin: 0 0 4px; }
.cert-blurb { font-size: 0.9rem; margin: 2px 0 4px !important; }
.cert-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---- self-designed award badge (seal + ribbon) ---- */
.cert-seal { position: relative; width: 86px; height: 86px; margin: 6px auto 4px; }
.cert-seal .seal-disc {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid rgba(255,255,255,0.65);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 0 0 4px rgba(0,0,0,0.06);
  background: radial-gradient(circle at 32% 28%, #fff7, transparent 60%), var(--seal-bg, #ddd);
}
.cert-seal .seal-ico { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.cert-seal .seal-ribbon { position: absolute; top: 58px; width: 17px; height: 34px; background: var(--seal-bg, #ccc); z-index: 1; box-shadow: 0 3px 5px rgba(0,0,0,0.2); }
.cert-seal .ribbon-l { left: 26px; transform: rotate(8deg); clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.cert-seal .ribbon-r { right: 26px; transform: rotate(-8deg); clip-path: polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.seal-titanium { --seal-bg: linear-gradient(160deg, #cfd6df, #8c98a8); }
.seal-gold     { --seal-bg: linear-gradient(160deg, #ffe079, #e0a800); }
.seal-silver   { --seal-bg: linear-gradient(160deg, #eef1f5, #aab4c0); }
.seal-bronze   { --seal-bg: linear-gradient(160deg, #e6b483, #b9742f); }
.seal-sprout   { --seal-bg: linear-gradient(160deg, #b9f3c8, #4fc06e); }
.cert-seal .seal-disc, .cert-seal .seal-ribbon { background-color: transparent; }
.cert-seal .seal-disc { background: radial-gradient(circle at 32% 28%, #ffffffaa, transparent 60%), var(--seal-bg); }
.cert-seal .seal-ribbon { background: var(--seal-bg); }

/* ---- Certificates screen (its own tab) ---- */
.cert-screen { max-width: 760px; margin: 0 auto; padding: 6px 4px 30px; }
.cert-screen h1 { text-align: center; margin: 6px 0; }
.cert-screen-intro { text-align: center; color: #5a6691; font-size: 0.95rem; margin: 0 auto 14px; max-width: 560px; }
.cert-empty { text-align: center; background: var(--card, #fff); border-radius: 16px; padding: 26px 18px; color: #5a6691; font-weight: 700; box-shadow: 0 5px 0 rgba(46,155,255,0.12); }
.cert-level-group { margin: 16px 0; }
.cert-level-head { margin: 8px 0; color: var(--purple-dark, #6a3fb0); border-bottom: 3px solid var(--yellow, #ffd93d); display: inline-block; padding-bottom: 2px; }
.cert-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 8px; }
.cert-screen-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 3px solid #d6e2f5; border-radius: 18px; padding: 14px 10px; cursor: pointer;
  background: var(--card, #fff); font-family: inherit; box-shadow: 0 5px 0 rgba(0,0,0,0.07);
  transition: transform 0.1s;
}
.cert-screen-card:hover { transform: translateY(-3px); }
.cert-screen-card .csc-ico { font-size: 2.4rem; line-height: 1; }
.cert-screen-card .csc-name { font-weight: 700; color: var(--ink); text-align: center; }
.cert-screen-card .csc-tier { font-size: 0.8rem; color: #5a6691; }
.cert-screen-card.cert-titanium { border-color: #6b7a8f; }
.cert-screen-card.cert-gold { border-color: #e6b800; }
.cert-screen-card.cert-silver { border-color: #9aa6b2; }
.cert-screen-card.cert-bronze { border-color: #c07d3a; }
@media print {
  body.printing-cert * { visibility: hidden; }
  body.printing-cert #certificate, body.printing-cert #certificate * { visibility: visible; }
  body.printing-cert #certificate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
}

/* ---------- shop themes ---------- */
body.th_ocean { background: linear-gradient(160deg, #b3e5fc 0%, #e0f7fa 50%, #b2ebf2 100%); background-attachment: fixed; }
body.th_space { background: linear-gradient(160deg, #1a1a40 0%, #312a6e 50%, #4f3b8f 100%); background-attachment: fixed; }
body.th_space .hero h1 { color: #ffd93d; text-shadow: 2px 2px 0 #1a1a40; }
body.th_space .hero .sub, body.th_space .player-meta .pname { color: #fff; }
body.th_jungle { background: linear-gradient(160deg, #c8e6c9 0%, #e8f5e9 50%, #fff9c4 100%); background-attachment: fixed; }
body.th_candy { background: linear-gradient(160deg, #ffd6ec 0%, #fff0f7 50%, #d7f0ff 100%); background-attachment: fixed; }

/* ---------- accessibility ---------- */
body.dyslexia {
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
}
body.dyslexia p, body.dyslexia li, body.dyslexia .explain-body { line-height: 2; }
body.contrast { background: #fff; }
body.contrast .card, body.contrast .topic-btn, body.contrast .lesson-shell,
body.contrast .word-card, body.contrast .dict-search-card, body.contrast .badge-shelf,
body.contrast .quest-bar, body.contrast .map-row {
  border: 2px solid #000;
  box-shadow: none;
}
body.contrast, body.contrast .explain-body, body.contrast p, body.contrast li { color: #000; }
.access-grid { display: grid; gap: 14px; text-align: left; margin: 12px 0; }
.access-opt.on { background: var(--green); color: #fff; border-color: var(--green-dark); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 4px solid var(--orange);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .match-grid { grid-template-columns: 1fr; }
  .pic-placeholder { float: none; margin: 0 auto 10px; }
  .topbar { position: static; }
}

/* ============================================================
   KINDRED VILLAGE — companion district of Hearthstone Valley 🏘️
   ============================================================ */
#screen-kindredvillage {
  position: relative;
}
.pw-sky {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #bfe6ff 0%, #e3f4ff 45%, #d9f7e4 80%, #c8f0d2 100%);
  box-shadow: var(--shadow);
  padding: 18px 18px 26px;
  min-height: 380px;
}
.pw-float { position: absolute; pointer-events: none; opacity: .8; animation: pwDrift linear infinite; }
@keyframes pwDrift {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(calc(100vw)); }
}
.pw-twinkle { position: absolute; pointer-events: none; animation: pwTwinkle 2.4s ease-in-out infinite; }
@keyframes pwTwinkle { 0%,100% { opacity: .25; transform: scale(.8);} 50% { opacity: 1; transform: scale(1.15);} }

.pw-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.pw-header h2 { margin: 0; color: #2b6cb0; text-shadow: 1px 1px 0 #fff; }
.pw-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; position: relative; z-index: 2; }
.pw-tab {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  background: rgba(255,255,255,.75);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  transition: transform .1s;
}
.pw-tab:hover { transform: translateY(-2px); }
.pw-tab.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 #d23c87; }

/* ---------- Kindred stage (Hearthstone Valley artwork + outfit overlays) ---------- */
.kv-stage {
  position: relative;
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
}
.kv-ground {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 36px; border-radius: 50%;
  background: rgba(46, 125, 50, .18);
}
.kv-avatar {
  position: relative;
  margin-bottom: 18px;
  animation: kvBob 2.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes kvBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.kv-avatar.jumping { animation: kvJump .7s ease; }
@keyframes kvJump {
  0%,100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-55px) scale(1.05) rotate(-4deg); }
  60% { transform: translateY(0) scale(.96, 1.04); }
  80% { transform: translateY(-14px); }
}
.kv-avatar.dancing { animation: kvDance 1.2s ease infinite; }
@keyframes kvDance {
  0%,100% { transform: rotate(-7deg) translateY(0); }
  25% { transform: rotate(7deg) translateY(-10px); }
  50% { transform: rotate(-7deg) translateY(0); }
  75% { transform: rotate(7deg) translateY(-10px); }
}
.kv-stage.asleep .kv-avatar, .kv-avatar.asleep { animation: kvSleep 4s ease-in-out infinite; filter: saturate(.7) brightness(.92); }
@keyframes kvSleep { 0%,100% { transform: scale(1,1);} 50% { transform: scale(1.03,.97);} }

.kv-wear { position: absolute; left: 50%; transform: translateX(-50%); text-shadow: 0 2px 2px rgba(0,0,0,.15); z-index: 3; pointer-events: none; }
.kv-wear.hat { top: -28px; font-size: 3rem; }
.kv-wear.face { top: 26%; font-size: 2.2rem; z-index: 4; }
.kv-wear.neck { bottom: 16%; font-size: 2.2rem; }
.kv-wear.held { left: auto; right: -24px; bottom: 16px; font-size: 2.4rem; transform: none; animation: heldWave 2.2s ease-in-out infinite; }
@keyframes heldWave { 0%,100% { transform: rotate(-8deg);} 50% { transform: rotate(10deg);} }
.kv-wear.back { top: 4px; left: 14%; font-size: 2.6rem; z-index: -1; transform: none; }
.kv-zzz { position: absolute; top: -18px; right: 6px; font-size: 1.8rem; animation: zzzFloat 2s ease-in infinite; }
@keyframes zzzFloat { 0% { opacity: 0; transform: translateY(8px) scale(.7);} 40% { opacity: 1;} 100% { opacity: 0; transform: translateY(-22px) scale(1.2);} }
.kv-skyline {
  position: absolute; bottom: 2px; left: 0; right: 0;
  text-align: center; font-size: 1.5rem; letter-spacing: 8px;
  opacity: .5; pointer-events: none; white-space: nowrap; overflow: hidden;
}

.pw-particle {
  position: absolute; font-size: 1.5rem; pointer-events: none; z-index: 6;
  animation: pwPart 1.1s ease-out forwards;
}
@keyframes pwPart {
  0% { opacity: 1; transform: translate(0,0) scale(.7); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); }
}
.pw-flyfood {
  position: absolute; font-size: 2.2rem; z-index: 7; pointer-events: none;
  transition: all .6s cubic-bezier(.3,.8,.4,1);
}

/* ---------- meters & action buttons ---------- */
.pw-meters { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; }
.pw-meter { background: rgba(255,255,255,.85); border-radius: 14px; padding: 8px 14px; min-width: 170px; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.pw-meter .label { font-size: .82rem; font-weight: 700; }
.pw-bar { height: 14px; background: #e3e7f2; border-radius: 999px; overflow: hidden; margin-top: 3px; }
.pw-bar > div { height: 100%; border-radius: 999px; transition: width .5s ease; }
.pw-bar .full { background: linear-gradient(90deg, #ff9f2e, #3ecf6a); }
.pw-bar .happy { background: linear-gradient(90deg, #ff6fb5, #a05ce0); }
.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; position: relative; z-index: 2; }
.pw-action {
  border: none; border-radius: 16px; padding: 10px 16px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.15);
  transition: transform .1s;
}
.pw-action:hover { transform: translateY(-3px) scale(1.04); }
.pw-action:active { transform: translateY(2px); }
.pw-speech {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 16px; padding: 7px 16px;
  font-weight: 700; font-size: .92rem; box-shadow: 0 3px 0 rgba(0,0,0,.12);
  z-index: 5; white-space: nowrap; animation: screenIn .3s ease;
}
.pw-speech::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* ========== My Kindred care — enhanced (additive only) ========== */
/* Reactive idle portrait. Transient action animations (jumping/dancing/
   wiggling/bathing) always win via :not(), then it settles back to mood. */
.kv-avatar.mood-happy:not(.jumping):not(.dancing):not(.wiggling):not(.bathing):not(.asleep) { animation: kvBounce 1s ease-in-out infinite; }
@keyframes kvBounce { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-16px) scale(1.04,.96); } 50% { transform: translateY(0) scale(.98,1.02); } 70% { transform: translateY(-7px); } }
.kv-avatar.mood-tired:not(.jumping):not(.dancing):not(.wiggling):not(.bathing):not(.asleep) { animation: kvDroop 3.6s ease-in-out infinite; }
@keyframes kvDroop { 0%,100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(3deg) translateY(4px) scale(1,.985); } }
.kv-avatar.wiggling { animation: kvWiggle .8s ease; }
@keyframes kvWiggle { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
.kv-avatar.bathing { animation: kvBathFloat 1.6s ease-in-out infinite; }
@keyframes kvBathFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
/* sparkle-when-clean twinkles */
.kv-avatar.is-clean::before, .kv-avatar.is-clean::after { content: '✨'; position: absolute; font-size: 1.4rem; pointer-events: none; z-index: 4; animation: kvSparkle 1.8s ease-in-out infinite; }
.kv-avatar.is-clean::before { top: 2px; left: -8px; animation-delay: .2s; }
.kv-avatar.is-clean::after { top: 22px; right: -8px; animation-delay: .9s; }
@keyframes kvSparkle { 0%,100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(18deg); } }

/* Five colourful animated stat bars */
.pw-bar .kvbar { position: relative; overflow: hidden; }
.pw-bar .kvbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); background-size: 220% 100%; animation: kvShine 2.2s linear infinite; }
@keyframes kvShine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.pw-bar .kvbar.b-hunger { background: linear-gradient(90deg, #ffb347, #ff7e5f); }
.pw-bar .kvbar.b-happy  { background: linear-gradient(90deg, #ff6fb5, #a05ce0); }
.pw-bar .kvbar.b-energy { background: linear-gradient(90deg, #ffe259, #ffa751); }
.pw-bar .kvbar.b-clean  { background: linear-gradient(90deg, #43e0ff, #4f8cff); }
.pw-bar .kvbar.b-friend { background: linear-gradient(90deg, #7ef0a2, #37c98a); }

/* Profile card under the portrait */
.kv-profile-card { text-align: center; position: relative; z-index: 2; margin: 2px 0 8px; }
.kv-profile-name strong { font-size: 1.3rem; }
.kv-profile-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 5px; }
.kv-profile-chips .level-chip { background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.1); }

/* Colourful care-button accents */
.pw-action.act-feed { background: #fff3e0; } .pw-action.act-play { background: #e8f7ff; }
.pw-action.act-games { background: #f1eaff; } .pw-action.act-dance { background: #ffeaf5; } .pw-action.act-sleep { background: #eef0ff; }
.pw-action.act-bath { background: #e2fbff; } .pw-action.act-toilet { background: #eafff1; }
.pw-action.act-profile { background: #fff; } .pw-action.act-evolve { background: #fff5d6; }

/* Kindred Feed / Play / Games modals */
.kv-care-modal { text-align: left; }
.kv-care-modal h2 { margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(20,45,64,.46); }
.kv-care-modal p { line-height: 1.35; }
.kv-care-hero {
  min-height: 150px;
  margin: -8px -12px 14px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  background-color: #79d8d0;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 5px 0 rgba(38,59,82,.13);
}
.kv-feed-modal .kv-care-hero {
  background-image: linear-gradient(180deg, rgba(12,58,66,.02), rgba(24,65,72,.72)), url("anam/images/kindred-home-interior.jpg");
}
.kv-play-modal .kv-care-hero,
.kv-game-modal .kv-care-hero {
  background-image: linear-gradient(180deg, rgba(16,70,80,.02), rgba(21,71,63,.72)), url("anam/images/kindred-village-banner.jpg");
}
.kv-games-modal .kv-care-hero {
  background-image: linear-gradient(180deg, rgba(33,38,96,.04), rgba(35,46,91,.72)), url("anam/images/kindred-collection-banner.jpg");
}
.kv-care-kicker {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(255,255,255,.9);
  color: #245e70;
  font-size: .78rem;
  font-weight: 800;
  text-shadow: none;
}
.kv-care-hero p { max-width: 430px; margin: 5px 0 0; color: #fff; font-weight: 700; text-shadow: 0 2px 5px rgba(15,40,50,.58); }
.kv-care-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.pw-item.kv-care-card {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 2px solid #d3e7e2;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.98) 0 30px, rgba(255,255,255,.68) 31px 54px, transparent 55px),
    linear-gradient(180deg, #f7fffb, #fff);
  box-shadow: 0 4px 0 rgba(38,59,82,.1);
}
.pw-item.kv-care-card .big {
  width: 64px;
  height: 64px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #e9fbf4);
  box-shadow: inset 0 0 0 2px rgba(93,198,178,.22), 0 3px 0 rgba(38,59,82,.09);
}
.kv-care-card .pr { display: block; margin: 3px 0; }
.kv-care-footer { text-align: center; margin: 14px 0 0; }

/* ============================================================================
   Feed pantry — category tabs (2026-07-08)
   The Feed modal was one endless scroll (Kettle lore + every everyday food +
   every treat + the golden berry, stacked). It's now a tabbed pantry: a
   segmented tab bar, and only ONE category grid visible at a time. Pure-CSS
   radio tabs — the radios sit first inside .kv-feed-tabwrap so their :checked
   state drives both the active-tab highlight and which panel shows. No JS,
   no re-render on tap (offline-safe). Cards are also made more compact so each
   category is a short grid, not another scroll.
   ============================================================================ */
.kv-feed-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.kv-feed-tabbar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 13px; padding: 5px;
  background: #f1eef9; border: 1px solid #e3dbff; border-radius: 13px;
  position: sticky; top: 0; z-index: 5;
}
.kv-feed-tab {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 11px; border-radius: 9px;
  font-weight: 800; font-size: .9rem; color: #6a6291; white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.kv-feed-tab:hover { background: rgba(255,255,255,.6); }
.kv-feed-tab-em { font-size: 1.06rem; line-height: 1; }
.kv-feed-tab-free {
  margin-left: 1px; padding: 1px 6px; border-radius: 999px;
  background: #e3f8ec; color: #1c7a44; font-size: .6rem; font-weight: 800; letter-spacing: .02em;
}
/* Active tab (radio order matches label order, so each :checked lights its own label). */
#fc-kettle:checked   ~ .kv-feed-tabbar .kv-feed-tab[for="fc-kettle"],
#fc-everyday:checked ~ .kv-feed-tabbar .kv-feed-tab[for="fc-everyday"],
#fc-treats:checked   ~ .kv-feed-tabbar .kv-feed-tab[for="fc-treats"],
#fc-shopbag:checked  ~ .kv-feed-tabbar .kv-feed-tab[for="fc-shopbag"],
#fc-golden:checked   ~ .kv-feed-tabbar .kv-feed-tab[for="fc-golden"] {
  background: #fff; color: #3a2f66; box-shadow: 0 2px 7px rgba(124,92,255,.2);
}
/* Only the checked category's panel shows. */
.kv-feed-panel { display: none; }
#fc-kettle:checked   ~ .kv-feed-panels .kv-feed-panel--kettle,
#fc-everyday:checked ~ .kv-feed-panels .kv-feed-panel--everyday,
#fc-treats:checked   ~ .kv-feed-panels .kv-feed-panel--treats,
#fc-shopbag:checked  ~ .kv-feed-panels .kv-feed-panel--shopbag,
#fc-golden:checked   ~ .kv-feed-panels .kv-feed-panel--golden { display: block; }
/* The Kettle tab already carries its own titled box, so drop its inner heading + top margin. */
.kv-feed-panel--kettle .kv-hearth-section { margin: 0; }
/* Shop-bag foods are emoji-first until their painted PNG lands (goodImg pattern). */
.kv-food-art .kv-food-emoji { font-size: 1.6rem; line-height: 1; display: inline-block; }
/* Compact food cards inside the Feed pantry (scoped to .kv-feed-modal so the Shop's food cards
   are untouched): smaller art + no forced tall min-height = a short, browsable grid per tab. */
.kv-feed-modal .kv-care-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.kv-feed-modal .pw-item.kv-care-card { min-height: 0; padding: 8px 7px 9px; }
.kv-feed-modal .kv-food-mode-feed { width: 100%; max-width: 96px; height: 72px; margin: 0 auto; }
.kv-feed-modal .kv-care-card .nm { font-size: .78rem; }
.kv-feed-modal .kv-food-payoff { font-size: .68rem; margin: 1px 0 2px; }
.kv-feed-modal .kv-care-card button { padding: 7px 6px; font-size: .78rem; white-space: nowrap; }
.kv-feed-modal .kv-food-note {
  font-size: .72rem; margin: 2px 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 520px) {
  .kv-feed-modal .kv-care-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
  .kv-feed-tab { font-size: .82rem; padding: 8px 7px; }
  .kv-feed-tab-free { display: none; }
}
.kv-game-rule {
  margin: 2px 0 12px;
  padding: 8px 11px;
  border: 2px solid #d9e8e4;
  border-radius: 9px;
  background: #f6fffb;
  color: #365269;
}
.kv-game-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.kv-game-hud span {
  padding: 8px 6px;
  border: 2px solid #d9e8e4;
  border-radius: 9px;
  background: #fff;
  text-align: center;
  font-size: .9rem;
  font-weight: 800;
  color: #31546b;
}
.kv-game-stage {
  position: relative;
  min-height: 245px;
  border: 3px solid #77cbbd;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(220,250,248,.78), rgba(246,253,232,.9)),
    url("anam/images/kindred-village-banner.jpg") center/cover no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
.kv-game-companion {
  position: absolute;
  left: 14px;
  bottom: 10px;
  width: 82px;
  filter: drop-shadow(0 6px 4px rgba(38,59,82,.18));
  animation: kvGameCompanion 2.8s ease-in-out infinite;
}
@keyframes kvGameCompanion { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.kv-game-target {
  position: absolute;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 5px 0 rgba(38,59,82,.18), 0 9px 20px rgba(38,59,82,.14);
  cursor: pointer;
  font-family: inherit;
  animation: kvTargetPulse .85s ease-in-out infinite;
}
.kv-game-target span { font-size: 2rem; line-height: 1; }
.kv-game-target small {
  position: absolute;
  right: -4px;
  bottom: -2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #245e70;
  color: #fff;
  font-weight: 800;
}
@keyframes kvTargetPulse { 0%,100% { scale: 1; } 50% { scale: 1.08; } }
.kv-game-stop { background: #f05a6d; box-shadow: 0 4px 0 #b92e41; color: #fff; }
.kv-game-result .kv-care-hero { min-height: 132px; }
@media (max-width: 560px) {
  .kv-care-hero { min-height: 124px; padding: 14px; }
  .kv-game-hud { grid-template-columns: 1fr; }
  .kv-game-stage { min-height: 215px; }
}

/* Animated bath: illustrated Kindred spa overlay, no system emoji. */
.kv-bath { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; isolation: isolate; }
.kv-bath-glow {
  position: absolute; left: 50%; bottom: 18px; width: min(380px, 72%); height: 170px;
  transform: translateX(-50%); border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(178,244,255,.52), rgba(83,183,230,.24) 48%, transparent 72%),
    radial-gradient(ellipse at 50% 82%, rgba(255,224,129,.34), transparent 58%);
  filter: blur(1px); animation: kvBathGlow .72s ease-out both;
}
.kv-bath-water {
  position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%);
  width: 250px; height: 86px; border-radius: 52% 48% 48% 52% / 46% 46% 55% 55%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 30%, rgba(255,255,255,.55) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(196,253,255,.88), rgba(82,188,232,.72));
  border: 3px solid rgba(236,255,255,.82); box-shadow: inset 0 -14px 22px rgba(43,116,176,.18);
  animation: kvWaterRise .46s ease-out both;
}
.kv-bath-water span {
  position: absolute; left: 15%; right: 15%; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.55); animation: kvBathRipple 1.25s ease-in-out infinite;
}
.kv-bath-water span:nth-child(1) { top: 18px; left: 18%; right: 34%; animation-delay: -.2s; }
.kv-bath-water span:nth-child(2) { top: 38px; left: 36%; right: 15%; animation-delay: -.55s; }
.kv-bath-water span:nth-child(3) { top: 58px; left: 24%; right: 26%; animation-delay: -.85s; }
@keyframes kvWaterRise { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes kvBathRipple { 0%,100% { transform: translateX(-8px) scaleX(.86); opacity: .38; } 50% { transform: translateX(9px) scaleX(1.08); opacity: .82; } }
.kv-bath-tub {
  position: absolute; left: 50%; bottom: 9px; width: 270px; height: 132px;
  transform: translateX(-50%); filter: drop-shadow(0 10px 7px rgba(36,40,64,.22));
  animation: kvTubIn .5s cubic-bezier(.2,1.6,.4,1) both;
}
.kv-bath-rim, .kv-bath-bowl, .kv-bath-foot, .kv-bath-shower, .kv-bath-shower-head { position: absolute; display: block; box-sizing: border-box; }
.kv-bath-rim {
  left: 18px; right: 18px; top: 42px; height: 34px; border-radius: 999px;
  background: linear-gradient(180deg, #fffef7, #e2f5f9 62%, #bcdce5);
  border: 3px solid rgba(142,169,179,.5); box-shadow: inset 0 8px 0 rgba(255,255,255,.84);
}
.kv-bath-bowl {
  left: 33px; right: 33px; top: 58px; bottom: 17px; border-radius: 18px 18px 70px 70px / 18px 18px 54px 54px;
  background: linear-gradient(145deg, #fffef9 0%, #e9f7fa 40%, #cadde7 100%);
  border: 3px solid rgba(130,151,166,.45); border-top: 0;
  box-shadow: inset 18px -10px 28px rgba(255,255,255,.8), inset -18px -18px 28px rgba(87,121,154,.18);
}
.kv-bath-foot { bottom: 9px; width: 24px; height: 10px; border-radius: 999px; background: #8a8c9c; }
.kv-bath-foot.foot-a { left: 72px; } .kv-bath-foot.foot-b { right: 72px; }
.kv-bath-shower {
  right: 42px; top: 5px; width: 44px; height: 58px; border: 5px solid #6d7c88; border-left: 0; border-bottom: 0;
  border-radius: 0 28px 0 0;
}
.kv-bath-shower-head {
  right: 70px; top: 8px; width: 34px; height: 18px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg,#a8b8c4,#667684); transform: rotate(-12deg);
}
@keyframes kvTubIn { from { transform: translateX(-50%) translateY(64px) scale(.94); opacity: 0; } to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } }
.kv-bath-bubble {
  --bubble-size: 18px; position: absolute; bottom: 55px; width: var(--bubble-size); height: var(--bubble-size);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.82);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 18%, rgba(165,235,255,.52) 20%, rgba(129,211,245,.18) 72%);
  box-shadow: inset -3px -5px 8px rgba(83,168,219,.18), 0 2px 4px rgba(53,93,130,.1);
  animation-name: kvBubble; animation-timing-function: ease-out; animation-fill-mode: forwards;
}
@keyframes kvBubble { 0% { opacity: 0; transform: translateY(0) scale(.45); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(-170px) scale(1.2); } }
.kv-bath-splash {
  position: absolute; width: 12px; height: 18px; border-radius: 70% 30% 70% 30%;
  background: linear-gradient(180deg, rgba(237,255,255,.95), rgba(91,194,235,.72));
  box-shadow: 0 0 0 2px rgba(255,255,255,.38); animation: kvSplash .72s ease-out forwards;
}
@keyframes kvSplash { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.62); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(1.1); } }

/* ---------- shop / wardrobe / Kindred grids ---------- */
.pw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px; margin: 10px 0; position: relative; z-index: 2;
}
.pw-item {
  background: rgba(255,255,255,.92); border-radius: 16px; padding: 10px 6px;
  text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.1);
  border: 3px solid transparent;
}
.pw-item .big { font-size: 2.2rem; display: block; }
.pw-item .nm { font-weight: 700; font-size: .82rem; display: block; line-height: 1.2; }
.pw-item .pr { font-size: .8rem; color: #5a6691; }
.pw-item button {
  border: none; border-radius: 999px; padding: 4px 14px; margin-top: 4px;
  font-weight: 700; font-size: .8rem; cursor: pointer;
  background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--green-dark);
}
.pw-item button.gem { background: var(--purple); box-shadow: 0 2px 0 var(--purple-dark); }
.pw-item button:disabled { background: #b9c6da; box-shadow: none; cursor: not-allowed; }
.pw-item.owned { border-color: var(--green); }
.pw-item.equipped { border-color: var(--pink); background: #fff0f7; }
.pw-item.lockedp { opacity: .55; }
.kv-card-mini {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.92); border-radius: 16px; padding: 8px 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.1); border: 3px solid transparent; cursor: pointer;
}
.kv-card-mini.on { border-color: var(--pink); background: #fff0f7; }
.kv-card-mini .kart-mini { flex-shrink: 0; }
.pw-item .kart-mini { margin: 0 auto 2px; }

/* ---------- Kindred Home (decorating room) ---------- */
.kv-room {
  position: relative; min-height: 320px; border-radius: 18px; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.08);
  touch-action: none;
}
.room-tiny    { background: linear-gradient(180deg, #ffe9c9 64%, #c8a165 64%); }
.room-cottage { background: linear-gradient(180deg, #ffd8d8 64%, #b97a56 64%); }
.room-tree    { background: linear-gradient(180deg, #d8f5d0 64%, #7a5a3a 64%); }
.room-castle  { background: linear-gradient(180deg, #e3e3f5 64%, #9c9cb8 64%); }
.room-space   { background: linear-gradient(180deg, #1a1a40 64%, #44446a 64%); }
.room-under   { background: linear-gradient(180deg, #b3e5fc 64%, #4f8fa8 64%); }
.room-candy   { background: linear-gradient(180deg, #ffd6ec 64%, #ff9fcd 64%); }
.room-jungle  { background: linear-gradient(180deg, #c8e6c9 64%, #557a46 64%); }
.room-igloo   { background: linear-gradient(180deg, #e8f7ff 64%, #b9dff2 64%); }
.room-mushroom{ background: linear-gradient(180deg, #ffe1e1 64%, #c96f6f 64%); }
.room-item {
  position: absolute; font-size: 2.6rem; cursor: grab; user-select: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.2));
}
.room-item:active { cursor: grabbing; transform: scale(1.1); }
.kv-room-kindred {
  position: absolute; bottom: 8px; left: 12px;
  width: 90px; pointer-events: none;
}
@media (max-width: 640px) {
  .kv-wear.hat { font-size: 2.4rem; top: -22px; }
}

/* ============================================================
   Word Lists — tier picker, audio dictation, sentence-per-word
   ============================================================ */
.tier-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0 6px;
}
@media (max-width: 640px) { .tier-pick { grid-template-columns: 1fr; } }
.tier-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--card);
  border: 4px solid #e7eefc;
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  cursor: pointer;
  font-family: inherit; color: var(--ink);
  box-shadow: 0 5px 0 rgba(41, 51, 92, 0.1);
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.tier-card:hover { transform: translateY(-2px); }
.tier-card.on { border-color: var(--teal); box-shadow: 0 6px 0 var(--green-dark); background: #effdfb; }
.tier-card .tier-emoji { font-size: 2.4rem; line-height: 1; }
.tier-card .tier-name { font-weight: 800; font-size: 1.2rem; }
.tier-card .tier-desc { font-size: .95rem; opacity: .85; }
.tier-card .tier-words { font-size: .85rem; opacity: .7; margin-top: 4px; }
.tier-hint { background: #fff8dc; border-radius: 14px; padding: 8px 14px; margin-top: 10px; }
.tier-chip {
  display: inline-block; font-size: .8rem; font-weight: 800;
  background: #effdfb; color: var(--green-dark);
  border: 2px solid var(--teal); border-radius: 999px;
  padding: 1px 10px; margin-left: 6px; vertical-align: middle;
}

.dictation-item, .sentence-item {
  background: #f7fbff;
  border: 3px solid #e7eefc;
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0;
}
.dictation-item.done, .sentence-item.done { border-color: var(--green); background: #f1fdf4; }
.dictation-num { font-weight: 800; opacity: .7; margin-bottom: 6px; }
.dictation-ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dictation-play, .dictation-slow { padding: 8px 16px; }
.sentence-word { font-size: 1.15rem; margin-bottom: 6px; }
.sentence-input { min-width: 60%; }

/* ---------------- My Words tab (Dictionary Builder) ---------------- */
.dict-toast{position:fixed;left:50%;bottom:max(calc(var(--wl-tabbar-h,76px) + 4px),12px);transform:translateX(-50%) translateY(8px);
  background:#5b3df2;color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:9999;font-family:inherit;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.dict-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.myw-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.myw-letters{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 16px}
.myw-letter{border:none;background:#eef0fb;color:#5a6691;font-weight:700;border-radius:8px;
  padding:5px 10px;cursor:pointer;font-family:inherit;font-size:.85rem;line-height:1}
.myw-letter:hover{background:#dfe2fb}
.myw-letter.on{background:#5b3df2;color:#fff}
.myw-empty{color:#8a90b8;font-style:italic;padding:6px 2px}
.saved-cards{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.saved-card{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#f6f7ff;border-radius:12px;padding:10px 14px}
.saved-card-main strong{font-size:1.05rem;color:#2c2f5a}
.saved-card-def{color:#5a6691;font-size:.9rem;margin-top:3px;line-height:1.35}
.saved-card-btns{display:flex;gap:6px;flex-shrink:0}

/* ---------------- My Own Words (student-added) ---------------- */
.myw-own{margin-top:18px;border-top:2px dashed #d9ddf5;padding-top:12px}
.myw-own-hint{color:#5a6691;font-size:.92rem;margin:2px 0 10px;line-height:1.4}
.myw-own-add{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.myw-own-input{flex:1 1 160px;min-width:140px;border:2px solid #cfd4f2;border-radius:10px;
  padding:9px 12px;font-size:1rem;background:#fff;color:#2c2f5a}
.myw-own-input:focus{outline:none;border-color:#7c84e8}
.myw-own-sent{color:#3a7d52;font-size:.9rem;margin-top:4px;line-height:1.35}
.myw-own-sent.todo{color:#9a7b2e;font-style:italic}
.dict-addown-cta{margin-top:10px;padding-top:10px;border-top:1px dashed #d9ddf5;color:#5a6691}

/* ---------------- Word Games level + tier scope ---------------- */
.game-scope{background:#f6f7ff;border-radius:12px;padding:10px 14px;margin:4px 0 14px}
.game-scope-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.game-scope-lbl{font-weight:700;color:#5a6691;min-width:52px;font-size:.9rem}
.game-scope-tab{border:none;background:#eef0fb;color:#5a6691;font-weight:700;border-radius:8px;
  padding:5px 11px;cursor:pointer;font-family:inherit;font-size:.85rem;line-height:1;margin:2px}
.game-scope-tab:hover{background:#dfe2fb}
.game-scope-tab.on{background:#5b3df2;color:#fff}
.game-scope-hint{margin:4px 0 0;color:#7a80a8;font-size:.85rem}

/* ---------------- gold Aurar coin (replaces the 🪙 emoji app-wide) ---------------- */
.coin{
  display:inline-block; width:.95em; height:.95em; border-radius:50%;
  vertical-align:-0.12em; position:relative;
  background:radial-gradient(circle at 34% 30%, #fff6c4 0%, #ffd84d 38%, #f0ad12 68%, #c8860a 100%);
  box-shadow:inset 0 0 0 .07em #ffe680, inset 0 -.08em .12em rgba(150,95,0,.45), 0 .03em .05em rgba(0,0,0,.18);
}
.coin::after{
  content:"A"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.6em; font-weight:900; color:#b9790a;
  font-family:'Comic Neue','Comic Sans MS',system-ui,sans-serif;
}

/* ---------------- Save to my device (written tasks + audio) ---------------- */
.wl-savedoc-row{margin:10px 0 4px}
.wl-savedoc-btn{background:#0f9d6b;box-shadow:0 3px 0 #0b7d55}
.wl-savedoc-btn:hover{background:#0bbd80}
.wl-savedoc-btn:active{box-shadow:0 1px 0 #0b7d55;transform:translateY(2px)}
.wl-savedoc-hint{margin:6px 0 0;color:#5a6691;font-size:.88rem;line-height:1.35}

/* ---------------- Save to my Records (wordlab-savebtn.js) ---------------- */
.wl-saverec-btn{display:block;width:100%;margin:10px 0 4px;background:#5b6ee1;box-shadow:0 3px 0 #3f50bd}
.wl-saverec-btn:hover{background:#6f80ef}
.wl-saverec-btn:active{box-shadow:0 1px 0 #3f50bd;transform:translateY(2px)}
.wl-saverec-btn.done{background:#0f9d6b;box-shadow:0 3px 0 #0b7d55}
.wl-saverec-hint{margin:6px 0 0;color:#5a6691;font-size:.88rem;line-height:1.35}
/* floating "saved to your Records" confirmation toast */
.wl-save-toast{position:fixed;left:50%;bottom:max(calc(var(--wl-tabbar-h,76px) + 8px),16px);transform:translateX(-50%) translateY(12px);
  background:#2a2f55;color:#fff;font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);z-index:4000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.wl-save-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- 📈 Progress comparison view (wordlab-records.js) ---------------- */
.wl-qgroup.wl-prog{border-left:5px solid #c7cdf0}
.wl-qgroup.wl-prog.improved{border-left-color:#0f9d6b;background:#f1faf5}
.wl-qgroup.wl-prog.ok{border-left-color:#3fa9f5}
.wl-qgroup.wl-prog.no{border-left-color:#e07b39;background:#fff7f0}
.wl-qgroup.wl-prog.slipped{border-left-color:#e0b020;background:#fffdf0}
.wl-prog-verdict{font-weight:700;font-size:.88rem;margin:6px 0 8px;padding:5px 10px;border-radius:10px;display:inline-block}
.wl-prog-verdict.improved{background:#d6f4e4;color:#0b7d55}
.wl-prog-verdict.ok{background:#dcefff;color:#1c6fb0}
.wl-prog-verdict.no{background:#ffe6d2;color:#b5571f}
.wl-prog-verdict.slipped{background:#fff2c9;color:#8a6a05}
.wl-attempt-row{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-top:1px solid rgba(0,0,0,.06);flex-wrap:wrap}
.wl-attempt-mark{flex:0 0 auto}
.wl-attempt-n{opacity:.55;font-size:.8em;white-space:nowrap}
.wl-attempt-date{opacity:.55;font-size:.78em;white-space:nowrap}
.wl-attempt-saved{font-size:.8em}
.wl-attempt-ans{font-weight:600;flex:1 1 60%}

/* 2026 illustrated interface refresh. Presentation only. */
:root{--ink:#263b52;--paper:#edf8f7;--card:#fff;--shadow:0 4px 0 rgba(38,59,82,.12),0 10px 26px rgba(38,59,82,.08);--radius:10px}
body{letter-spacing:0;background-color:#eaf7f5;background-image:linear-gradient(rgba(255,255,255,.58) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.58) 1px,transparent 1px),linear-gradient(145deg,#e7f7fb,#f6fbef 58%,#fff5e7);background-size:28px 28px,28px 28px,auto}
.app{max-width:1120px}
.topbar{border:2px solid #cce5e4;border-radius:12px;box-shadow:0 4px 0 rgba(38,59,82,.12),0 10px 24px rgba(38,59,82,.09)}
.topbar .home-btn,.go-btn,.say-btn,.pw-tab,.subject-btn,.topic-btn,.choice-btn,.match-tile,.story-opt,.word-tile,.sort-item{border-radius:10px;letter-spacing:0;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease}
.topbar .home-btn:hover,.go-btn:hover,.say-btn:hover{transform:translateY(-2px)}
.stat-chip{border-radius:9px}
#screen-home .hero{position:relative;min-height:300px;margin:14px 0 18px;padding:86px 20px 28px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:3px solid #50b8c8;border-radius:12px;background:#7bd8ef url("anam/images/wordlab-home.jpg") center/cover no-repeat;box-shadow:0 6px 0 rgba(31,129,145,.18),0 15px 30px rgba(38,59,82,.14);isolation:isolate}
#screen-home .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,48,62,.02) 32%,rgba(18,51,63,.78) 100%)}
#screen-home .hero h1{margin:0;font-size:0;color:#fff;text-shadow:0 3px 8px rgba(13,46,59,.45)}
#screen-home .hero h1::after{content:"Quest Byte";font-size:clamp(2.3rem,6vw,4rem)}
#screen-home .hero .sub{color:#fff;font-size:0;text-shadow:0 2px 5px rgba(13,46,59,.55)}
#screen-home .hero .sub::after{content:"Byte-sized learning for growing minds";font-size:1.08rem}
.hero-news{align-self:center;max-width:680px;margin-top:10px;padding:6px 12px;border:1px solid rgba(255,255,255,.52);border-radius:7px;background:rgba(255,255,255,.88);color:#365269;font-size:.82rem;font-weight:700;box-shadow:0 3px 12px rgba(13,46,59,.18)}
.player-row{padding:12px 16px;border:2px solid #d7e9e7;border-radius:10px;background:rgba(255,255,255,.82);box-shadow:0 4px 0 rgba(38,59,82,.08)}
.avatar-big{border-radius:10px;border-color:#16a99d}.progress-track,.xp-track{border-radius:6px}.progress-fill,.xp-fill{border-radius:4px}
.subject-grid{gap:12px}.subject-btn{min-height:142px;padding:18px 16px 15px;border:2px solid rgba(255,255,255,.38);box-shadow:0 5px 0 rgba(38,59,82,.25),0 10px 20px rgba(38,59,82,.09)}
.subject-btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.24) 46%,transparent 68%);transform:translateX(-115%)}
.subject-btn:hover::after{animation:wl-card-glint .65s ease}.subject-btn:hover{transform:translateY(-5px)}
.subject-btn .big-emoji{animation:wl-icon-float 3.6s ease-in-out infinite}.subject-btn .count-pill{border-radius:6px;background:rgba(13,48,62,.2)}
@keyframes wl-card-glint{to{transform:translateX(115%)}}@keyframes wl-icon-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.badge-shelf,.cat-header,.lesson-shell,.dict-search-card,.word-card,.wl-report-card,.wl-empty{border:2px solid #d8e9e7;border-radius:10px;box-shadow:var(--shadow)}
.lesson-shell{overflow:hidden;border-top:7px solid #21aeb2;background:linear-gradient(90deg,rgba(33,174,178,.07) 1px,transparent 1px),linear-gradient(#fff,#fff);background-size:28px 100%,auto}
.lesson-head{padding-bottom:10px;border-bottom:2px solid #deeeec}.lesson-head h2,.step-card h3{color:#245e70}
.step-dots .dot{width:18px;height:8px;border-radius:3px}.step-dots .dot.now{transform:scaleX(1.25)}
.choice-btn,.match-tile,.story-opt,.word-tile{border-width:2px;box-shadow:0 3px 0 rgba(38,59,82,.1)}
.choice-btn:hover{transform:translateX(5px);box-shadow:0 3px 0 rgba(46,155,255,.28)}
.explain-body .hl{border-radius:3px}.explain-body .ex-good,.explain-body .ex-bad{border-radius:6px}
.topic-btn{border-radius:9px;border:2px solid #d9e9e8;border-top-width:6px}.topic-btn:hover{transform:translateY(-4px)}
.wl-tabbar{border-top-color:#78cfca}.wl-tab{border-radius:8px}.wl-tab.active{background:#ddf4f1;color:#176c74}
.wl-level-tab,.wl-mode-tab,.wl-subj-tab,.game-scope-tab,.myw-letter{border-radius:7px}
@media(max-width:640px){#screen-home .hero{min-height:245px;padding:70px 12px 18px;background-position:center}#screen-home .hero h1::after{font-size:2.45rem}.hero-news{display:none}.subject-btn{min-height:124px}.lesson-shell{padding:16px 14px 22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Cohesive illustrated homepage surface. Presentation only. */
#screen-home{padding-bottom:24px}
#screen-home .player-row{display:grid;grid-template-columns:76px minmax(0,520px);width:min(100%,760px);margin:16px auto 10px;padding:14px 18px;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,250,246,.94));border-color:#78cfc4}
#screen-home .avatar-big{width:76px;height:76px;font-size:2.45rem;border-width:3px;box-shadow:0 4px 0 rgba(21,118,111,.2),0 8px 18px rgba(38,59,82,.1)}
#screen-home .player-meta{width:100%;min-width:0}
#screen-home .player-meta .pname{color:#254e63;font-size:1.12rem}
#screen-home .player-meta .pname small{font-size:.78rem;color:#68788d}
#screen-home .progress-track{min-height:23px;border-color:#b6d8da;background:#e8f2f4}
#screen-home .progress-fill{background:repeating-linear-gradient(45deg,#1cbaa6,#1cbaa6 12px,#5ed5bd 12px,#5ed5bd 24px)}
#screen-home .xp-track{border:1px solid #c8bce7;background:#eee9fa}
#screen-home .xp-fill{background:linear-gradient(90deg,#7257d9,#d067b1)}

#pathway-row{width:min(100%,900px);margin:12px auto!important;padding:10px 12px;border:2px solid #d7e8e5;border-radius:10px;background:rgba(255,255,255,.84);box-shadow:0 3px 0 rgba(38,59,82,.08)}
#pathway-row>strong{color:#33576b;font-size:.94rem}
#pathway-row .pw-tab{padding:7px 15px;border:2px solid #d6e5e4;background:#fff;color:#435b70;box-shadow:0 2px 0 rgba(38,59,82,.12)}
#pathway-row .pw-tab:hover{transform:translateY(-2px);border-color:#5fc8ba}
#pathway-row .pw-tab.on{background:#e95791;color:#fff;border-color:#b93669;box-shadow:0 3px 0 #a92d5d}

#quest-row{width:min(100%,1020px);margin:14px auto}
#quest-row .quest-bar{position:relative;overflow:hidden;margin:0;padding:13px 16px 14px 54px;border:2px solid #e5b850;border-radius:10px;background:linear-gradient(110deg,#fff8d7,#fff 62%,#e9f8f0);box-shadow:0 4px 0 rgba(130,94,19,.13);color:#3c5265}
#quest-row .quest-bar::before{content:"";position:absolute;left:14px;top:11px;width:27px;height:27px;border:3px solid #d9a526;border-radius:50%;background:conic-gradient(from 45deg,#fff 0 12.5%,#f2bd32 0 25%,#fff 0 37.5%,#f2bd32 0 50%,#fff 0 62.5%,#f2bd32 0 75%,#fff 0 87.5%,#f2bd32 0);box-shadow:0 2px 0 rgba(130,94,19,.18)}
#quest-row .progress-track{margin-top:8px;min-height:12px;height:12px!important;border-width:1px;background:#e7eef0}
.wl-home-diary-widget{overflow:hidden;border:2px solid #f1c867;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,249,230,.96));box-shadow:0 5px 0 rgba(153,117,34,.14),0 14px 26px rgba(38,59,82,.1);color:#254e63}
.wl-home-diary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid rgba(196,159,67,.28)}
.wl-home-diary-head h2{margin:0;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.05;color:#213f5d}
.wl-home-diary-head p{margin:4px 0 0;color:#66758d;font-weight:800}
.wl-home-diary-open{border:0;border-radius:9px;background:#226fb3;color:#fff;padding:9px 13px;font:inherit;font-weight:900;box-shadow:0 3px 0 #174d7d;cursor:pointer;white-space:nowrap}
.wl-home-diary-open:active{transform:translateY(2px);box-shadow:0 1px 0 #174d7d}
.wl-home-diary-list{max-height:220px;overflow-y:auto;padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;scrollbar-color:#d4a94a #fff7df}
.wl-home-diary-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:52px;padding:9px 11px;border:1px solid rgba(154,190,190,.55);border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 2px 0 rgba(44,94,104,.08)}
.wl-home-diary-row.is-done{background:#eefaf3;border-color:#8bd3a6;color:#5d7080}
.wl-home-diary-check{width:34px;height:34px;border-radius:9px;border:2px solid #8fc7c7;background:#fff;color:#1f8f60;font:inherit;font-weight:900;line-height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 0 rgba(44,94,104,.12)}
.wl-home-diary-check.is-done{background:#31b66c;border-color:#31b66c;color:#fff}
.wl-home-diary-check.is-locked{opacity:.72}
.wl-home-diary-text{min-width:0;font-weight:850;line-height:1.2;color:#263f5b;overflow-wrap:anywhere}
.wl-home-diary-row.is-done .wl-home-diary-text{text-decoration:line-through;color:#758190}
.wl-home-diary-date{font-size:.78rem;font-weight:900;color:#85652b;background:#fff4cf;border-radius:999px;padding:4px 8px;white-space:nowrap}
.wl-home-diary-empty{padding:18px 10px;text-align:center;color:#66758d;font-weight:850}

/* extras-row now holds only the 2 per-subject illustrated cards (Daily + Map) */
#extras-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0 10px!important}
#extras-row .subject-btn{width:230px;max-width:46%;min-height:170px;justify-content:flex-end;display:flex;flex-direction:column;align-items:center;padding:100px 12px 14px;border:3px solid rgba(255,255,255,.65);background-position:center;background-size:cover;background-repeat:no-repeat;text-shadow:0 2px 5px rgba(15,40,50,.72);box-shadow:0 5px 0 rgba(38,59,82,.25),0 12px 24px rgba(38,59,82,.11)}
#extras-row .subject-btn .big-emoji{position:absolute;top:18px;margin:0;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.88);text-shadow:none;box-shadow:0 3px 10px rgba(17,48,60,.2)}
#extras-row .subject-btn .count-pill{margin-top:7px;background:rgba(15,45,57,.5);border:1px solid rgba(255,255,255,.32);color:#fff;text-shadow:none}
#extras-row #extra-daily{background-image:linear-gradient(180deg,rgba(255,180,51,.08),rgba(128,61,8,.68)),url("anam/images/wordlab-home.jpg");background-position:18% center}
#extras-row #extra-map{background-image:linear-gradient(180deg,rgba(54,45,127,.05),rgba(45,37,105,.73)),url("anam/images/anam-vale-world.jpg");background-position:70% center}

/* Home utility cards use the same grid footprint as the main home buttons. */
#util-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0;align-items:stretch}
.wl-extra-chip{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;min-height:0!important;flex-direction:row!important;padding:8px 15px!important;border-radius:999px!important;border:2px solid #d6e2f5!important;background:var(--card,#fff)!important;background-image:none!important;color:#5a6691!important;font-family:inherit;font-weight:700;font-size:0.85rem;cursor:pointer;box-shadow:0 2px 0 rgba(38,59,82,.13)!important;text-shadow:none!important}
.wl-extra-chip:active{transform:scale(0.96)}
.wl-extra-chip small{font-weight:700;color:#8a93ad;font-size:0.78rem}
.wl-extra-chip .ico{font-size:1.05rem}
/* the relocated Hearthstone Valley button carries .subject-btn — flatten it into a chip */
#util-row .wl-extra-chip .big-emoji{position:static!important;visibility:visible!important;font-size:1.05rem!important;margin:0!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-shadow:none!important}
#util-row .wl-extra-chip br{display:none}
#util-row .wl-extra-chip .count-pill{display:none!important}

/* Hearthstone Valley + Brain Arcade: same home-grid size as the rest of the cards. */
.wl-world-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0;align-items:stretch}
.wl-world-row .subject-btn{width:auto;max-width:none;min-height:220px;justify-content:flex-end;display:flex;flex-direction:column;align-items:center;padding:124px 16px 18px;border:3px solid rgba(255,255,255,.65);background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;text-shadow:0 2px 5px rgba(15,40,50,.72);box-shadow:0 5px 0 rgba(38,59,82,.25),0 12px 24px rgba(38,59,82,.11)}
.wl-world-row .subject-btn .big-emoji{position:absolute;top:18px;margin:0;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.88);text-shadow:none;box-shadow:0 3px 10px rgba(17,48,60,.2);animation:none}
.wl-world-row .subject-btn .count-pill{margin-top:7px;background:rgba(15,45,57,.5);border:1px solid rgba(255,255,255,.32);color:#fff;text-shadow:none;white-space:nowrap}
@media(max-width:720px){.wl-world-row .subject-btn{min-height:217px;padding:124px 12px 15px}}
@media(max-width:520px){.wl-world-row .subject-btn{min-height:190px;padding:108px 12px 15px}}
/* Hearthstone Valley = large HERO card spanning the full world band (2026-07-11, user request). */
.wl-world-row .subject-btn.wl-world-hero{grid-column:1/-1;min-height:320px;padding-top:210px}
.wl-world-row .subject-btn.wl-world-hero .home-card-title,.wl-world-row .subject-btn.wl-world-hero{font-size:1.15rem}
.wl-world-row .subject-btn.wl-world-hero .count-pill{font-size:1rem}
@media(max-width:720px){.wl-world-row .subject-btn.wl-world-hero{min-height:260px;padding-top:150px}}
@media(max-width:520px){.wl-world-row .subject-btn.wl-world-hero{min-height:230px;padding-top:120px}}

#subject-grid{padding-top:15px;border-top:3px solid rgba(81,176,165,.24)}
#subject-grid .subject-btn{min-height:160px;border-bottom-width:4px}
#subject-grid .subject-btn .big-emoji{width:58px;height:58px;line-height:58px;margin:0 auto 8px;border-radius:9px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.24)}
/* Painted Anam UI icons (transparent PNGs) fill the .big-emoji slot — no tinted box. */
img.big-icon{display:block;width:64px;height:64px;margin:0 auto 6px;object-fit:contain;animation:wl-icon-float 3.6s ease-in-out infinite}
#subject-grid .subject-btn img.big-icon{width:66px;height:66px;background:none;box-shadow:none;border-radius:0}
.modal-subjects .subject-btn img.big-icon,.subject-btn.mini img.big-icon{width:46px;height:46px;margin-bottom:2px}
#screen-home .subject-btn.home-card{
  min-height:220px;
  padding:22px 16px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  text-align:center;
}
#screen-home .subject-btn.home-card .big-emoji{
  width:118px;
  height:118px;
  line-height:118px;
  margin:0 auto 2px;
  border-radius:18px;
  font-size:4.2rem;
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 10px 22px rgba(25,43,79,.14);
}
#screen-home .subject-btn.home-card img.big-icon{
  width:124px;
  height:124px;
  margin:0 auto 2px;
  border-radius:0;
  background:none;
  box-shadow:none;
  filter:drop-shadow(0 10px 14px rgba(25,43,79,.2));
}
#screen-home .subject-btn.home-card .home-card-title{
  display:block;
  width:100%;
  margin-top:auto;
  font-size:clamp(1.45rem,2.4vw,1.95rem);
  line-height:1.05;
  font-weight:900;
}
#screen-home .subject-btn.home-card .count-pill{
  display:block;
  max-width:100%;
  min-height:34px;
  margin-top:0;
  padding:5px 14px;
  font-size:clamp(.9rem,1.45vw,1.08rem);
  line-height:1.2;
  white-space:normal;
  text-wrap:balance;
}
@media(max-width:720px){
  #screen-home .subject-btn.home-card{min-height:190px;padding:18px 12px 15px;gap:8px}
  #screen-home .subject-btn.home-card .big-emoji{width:94px;height:94px;line-height:94px;font-size:3.45rem}
  #screen-home .subject-btn.home-card img.big-icon{width:98px;height:98px}
  #screen-home .subject-btn.home-card .home-card-title{font-size:1.45rem}
  #screen-home .subject-btn.home-card .count-pill{min-height:30px;font-size:.88rem}
}
#screen-home .subject-btn.home-subject-card{min-height:150px;justify-content:center;padding:22px 18px 18px;gap:12px}
#screen-home .subject-btn.home-subject-card .home-card-title{margin-top:0;font-size:clamp(1.6rem,2.7vw,2.15rem);line-height:1.05;font-weight:950}
#screen-home .subject-btn.home-subject-card .count-pill{min-height:0;margin-top:0;background:rgba(255,255,255,.28)}
#tools-row.wl-tools-priority{grid-template-columns:repeat(2,minmax(220px,1fr));max-width:820px;margin:18px auto 22px!important}
#tools-row.wl-tools-priority .subject-btn.home-card{min-height:170px;padding:18px 14px 15px}
#tools-row.wl-tools-priority .subject-btn.home-card .big-emoji{width:78px;height:78px;line-height:78px;border-radius:14px;font-size:2rem}
#tools-row.wl-tools-priority .subject-btn.home-card img.big-icon{width:82px;height:82px}
#tools-row.wl-tools-priority .subject-btn.home-card .home-card-title{margin-top:auto;font-size:clamp(1.28rem,2vw,1.65rem)}
#tools-row.wl-tools-priority .subject-btn.home-card .count-pill{font-size:.88rem;min-height:0}
/* "📚 Study & Practice" label above tools-row (Dictionary/Timeline/Word Lists/Word
   Games/Worksheets) — same header idiom as Curio Cabinet's .curio-sub, width-matched
   to the 820px tools-row grid below it. Shown/hidden in sync by renderHome(). */
#study-tools-head{max-width:820px;margin:22px auto 10px;padding-bottom:6px;border-bottom:2px solid #eef1f8;color:#2d455c;font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:8px}
#study-tools-head .study-tools-count{margin-left:auto;font-size:.72rem;font-weight:700;color:#6b7a99;background:#eef3fb;border-radius:999px;padding:3px 10px}
@media(max-width:720px){
  #screen-home .subject-btn.home-subject-card{min-height:132px;padding:18px 12px 14px}
  #tools-row.wl-tools-priority{grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px}
  #tools-row.wl-tools-priority .subject-btn.home-card{min-height:150px}
  .wl-home-diary-row{grid-template-columns:34px minmax(0,1fr);align-items:start}
  .wl-home-diary-date{grid-column:2;justify-self:start}
}
@media(max-width:460px){
  #tools-row.wl-tools-priority{grid-template-columns:1fr}
  .wl-home-diary-head{align-items:flex-start;flex-direction:column}
  .wl-home-diary-open{width:100%}
}
.badge-shelf{margin-top:20px;background:linear-gradient(135deg,#fff,#f0faf6);border-color:#b9dfd8}
.badge-item .badge-ico{border-radius:10px;background:#eef8f5;border-color:#63bfb4}

.wl-tabbar{background:rgba(255,255,255,.96);border-top:2px solid #89d3ca;box-shadow:0 -8px 22px rgba(38,59,82,.11)}
.wl-tab{max-width:135px;padding:7px 4px;border-radius:8px;color:#66758d}
.wl-tab:hover{background:#edf8f6;color:#286b72}.wl-tab.active{box-shadow:inset 0 -3px 0 #1eafa2}
/* "Subjects" quick-switch tab — accented so it reads as primary navigation */
.wl-tab-subjects{background:linear-gradient(180deg,#fff3d6,#ffe6a8);color:#8a5a00;box-shadow:0 2px 0 #e9b84d;font-weight:700}
.wl-tab-subjects:hover{background:linear-gradient(180deg,#fff0c6,#ffdd90);color:#7a4f00}
.wl-tab-subjects .wl-tab-ico{transform:scale(1.12)}

@media(max-width:900px){#extras-row{grid-template-columns:repeat(2,minmax(150px,1fr))}#extras-row .subject-btn:nth-child(5){grid-column:auto}}
@media(max-width:640px){#screen-home .player-row{grid-template-columns:64px minmax(0,1fr);padding:12px;gap:10px}#screen-home .avatar-big{width:64px;height:64px;font-size:2rem}#screen-home .player-meta .pname small{display:none}#pathway-row{justify-content:flex-start!important;overflow-x:auto;flex-wrap:nowrap!important}#pathway-row>strong{min-width:132px}#pathway-row .pw-tab{white-space:nowrap}#extras-row{grid-template-columns:1fr}#extras-row .subject-btn{min-height:165px;padding-top:95px}.wl-tab-lbl{font-size:.65rem}}

/* Viewport-fit shell: keep the site as wide as the browser window instead of
   pinning Hearthstone Valley inside a narrow centered column. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app{
  width:100%;
  max-width:none!important;
  margin:0;
  padding-left:clamp(6px,1.2vw,18px);
  padding-right:clamp(6px,1.2vw,18px);
}
.topbar{max-width:100%;min-width:0}
.screen{width:100%;min-width:0}
@media(max-width:640px){
  .app{padding-left:4px;padding-right:4px}
  .topbar{gap:6px;padding-left:8px;padding-right:8px}
}

/* ---- stacked fractions: <span class="frac"><span class="n">3</span><span class="d">4</span></span> ---- */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.04;margin:0 .14em;font-weight:700;text-align:center}
.frac>.n{padding:0 .32em;border-bottom:.09em solid currentColor}
.frac>.d{padding:0 .32em}

/* ---- home "what's inside" stat band (live counts, sits on the hero photo) ---- */
.wl-stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:14px auto 0; max-width:560px;
}
.wl-stat{
  flex:1 1 0; min-width:110px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 10px; border-radius:14px;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 4px 0 rgba(13,46,59,.22);
}
.wl-stat-num{
  font-size:clamp(1.25rem,3.4vw,1.7rem); font-weight:800; line-height:1;
  color:var(--purple-dark,#3a2b8f);
}
.wl-stat-lbl{
  font-size:0.78rem; font-weight:700; color:#5a6691; text-align:center; line-height:1.15;
}

/* ============================================================
   Word Builder — missing-letter word game (step type: wordbuild)
   ============================================================ */
.wb-progress{
  text-align:center; font-weight:800; color:#5a6691;
  font-size:0.95rem; letter-spacing:0.02em; margin:2px 0 10px;
}
.wb-stage{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin:6px 0 18px;
}
.wb-word{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.wb-cell{
  width:58px; height:72px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:2.3rem; font-weight:800; text-transform:lowercase;
  border-radius:14px; border:3px solid transparent;
  font-family:var(--font-round,system-ui,sans-serif);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
/* a letter that is shown to the child from the start */
.wb-cell.given{
  background:#eef1fb; color:#3a2b8f;
}
/* an empty blank waiting to be filled */
.wb-cell.blank{
  background:#fff; border-color:#cfd6f5; color:#3a2b8f;
}
/* the blank we are filling right now */
.wb-cell.blank.target{
  border-color:#6c5ce7; box-shadow:0 0 0 4px rgba(108,92,231,.18);
  animation:wbPulse 1.1s ease-in-out infinite;
}
/* a blank the child has just solved */
.wb-cell.blank.filled{
  background:#e3f9ec; border-color:#34c77b; color:#117a44;
}
/* whole word complete */
.wb-cell.done{
  background:#34c77b !important; border-color:#2bb06b !important; color:#fff !important;
}
.wb-cell.shake{ animation:wbShake .4s; border-color:#e74c3c; }
@keyframes wbPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@keyframes wbShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }

.wb-say-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.wb-say{
  font-size:1.1rem; font-weight:800; cursor:pointer;
  padding:12px 22px; border-radius:999px; border:0;
  color:#fff; background:linear-gradient(180deg,#7b6ef0,#6c5ce7);
  box-shadow:0 4px 0 #5546c4; transition:transform .08s ease;
}
.wb-say:active{ transform:translateY(3px); box-shadow:0 1px 0 #5546c4; }
/* the two extra listening speeds — smaller, in their own colours */
.wb-say-slow, .wb-say-slower{ font-size:1rem; padding:11px 18px; }
.wb-say-slow{ background:linear-gradient(180deg,#3fc4b0,#22a594); box-shadow:0 4px 0 #198a7c; }
.wb-say-slow:active{ box-shadow:0 1px 0 #198a7c; }
.wb-say-slower{ background:linear-gradient(180deg,#f6ad3c,#ef9415); box-shadow:0 4px 0 #cf7d0c; }
.wb-say-slower:active{ box-shadow:0 1px 0 #cf7d0c; }

.wb-keys{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:8px; max-width:520px; margin:0 auto;
}
.wb-key{
  aspect-ratio:1/1; min-height:46px; cursor:pointer;
  font-size:1.35rem; font-weight:800; text-transform:lowercase;
  border-radius:12px; border:2px solid #d8def0; background:#fff; color:#3a2b8f;
  box-shadow:0 3px 0 #d8def0; transition:transform .07s ease, background .1s ease;
}
.wb-key:hover{ background:#f3f5ff; }
.wb-key:active{ transform:translateY(2px); box-shadow:0 1px 0 #d8def0; }
.wb-key.miss{ background:#ffe3e0; border-color:#e74c3c; color:#c0392b; animation:wbShake .4s; }

@media (max-width:560px){
  .wb-cell{ width:46px; height:58px; font-size:1.8rem; }
  .wb-keys{ grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
  .wb-key{ min-height:40px; font-size:1.15rem; }
}

/* ===== 📊 Records progress-summary dashboard ===== */
.wl-summary{background:#faf8ff;border:1px solid #e7e0ff;border-radius:16px;padding:14px 16px;margin:10px 0 16px}
.wl-sum-head{font-weight:800;color:#40345f;font-size:1.05rem;margin-bottom:10px}
.wl-sum-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wl-sum-tile{flex:1 1 90px;background:#fff;border:1px solid #ece6ff;border-radius:12px;padding:10px;text-align:center}
.wl-sum-tile-v{font-size:1.25rem;font-weight:800;color:#6a4ff0}
.wl-sum-tile-l{font-size:.72rem;color:#5a6691;margin-top:2px}
.wl-sum-bars{display:flex;flex-direction:column;gap:8px}
.wl-sum-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px}
.wl-sum-lbl{font-size:.82rem;font-weight:700;color:#40345f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-sum-barwrap{background:#ece6ff;border-radius:999px;height:14px;overflow:hidden}
.wl-sum-bar{height:100%;background:linear-gradient(90deg,#8b6cff,#6a4ff0);border-radius:999px;min-width:3px;transition:width .5s}
.wl-sum-meta{font-size:.74rem;color:#5a6691;white-space:nowrap}
.wl-sum-acc{display:inline-block;background:#eef6ee;color:#2a6b2a;border:1px solid #b8e0b8;border-radius:999px;padding:1px 7px;margin-left:4px;font-weight:700}
.wl-sum-note{font-size:.76rem;color:#8a82ad;text-align:center;margin:12px 0 0}
/* 📈 Progress-over-time chart (durable line chart per subject) */
.wl-chart{background:#faf8ff;border:1px solid #e7e0ff;border-radius:16px;padding:14px 16px;margin:10px 0 16px}
.wl-chart-plot{background:#fff;border:1px solid #ece6ff;border-radius:12px;padding:8px 6px}
.wl-chart-svg{display:block;width:100%;height:auto}
.wl-chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:10px}
.wl-chart-key{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:#40345f}
.wl-chart-key b{color:#6a4ff0}
.wl-chart-dot{width:11px;height:11px;border-radius:999px;display:inline-block}
.wl-chart .wl-report-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 0}
@media(max-width:520px){.wl-sum-row{grid-template-columns:84px 1fr auto;gap:6px}.wl-sum-lbl{font-size:.74rem}}

/* ==== Quest Byte chrome icons (Lucide, INLINED as data: URIs) ====
   UI-chrome only (top bar + bottom dock) — NOT lesson imagery. Rendered as a
   CSS mask over currentColor so every icon inherits its button/tab text
   colour (white on blue buttons, grey→blue on dock tabs). Sized 1em so the
   bars keep their exact pre-icon heights.
   ★ 2026-07-27 — the masks were `url('icons/<name>.svg')`; the 🎓 Teacher Reports
   and ⏱️ Screen Time icons rendered BLANK for the user while ⚙️/🔧 next to them
   were fine. Those two tabs are the only masked icons that start display:none and
   are revealed later by JS (auth-ui applyRoleChrome) — a mask image that is only
   ever referenced by a hidden element is fetched lazily, and a stale/failed fetch
   (or WebKit not repainting after it lands) leaves the mask empty forever, which
   no reload of the CSS can undo. Inlining removes the fetch entirely (also -18
   requests/page). Keep them inlined; `assets/icons/*.svg` stays as the source of
   truth (still used by hearthstone-valley-prototype) — after editing an icon run
   `python3 tools/inline-chrome-icons.py` to re-inline (`--check` fails if stale). currentColor→black inside the data URI
   because a standalone SVG image has no colour context; the mask only uses alpha. */
.qb-ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-0.125em;background:currentColor;
  -webkit-mask:var(--qb-i) center/contain no-repeat;mask:var(--qb-i) center/contain no-repeat;
  /* longhands after the shorthand: older WebKit drops the `center/contain` part */
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* topbar pills: keep the exact pre-icon (emoji-era) button height + emoji-sized glyph */
.topbar .home-btn{min-height:37px}
.topbar .home-btn .qb-ico{width:1.2em;height:1.2em;vertical-align:-0.28em}
.stat-chip .qb-ico{width:1.15em;height:1.15em}
.qb-ico.i-house{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-house' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E %3C/svg%3E")}
.qb-ico.i-search{
  position:relative;
  width:.78em;
  height:.78em;
  margin:.02em .18em .12em .04em;
  box-sizing:border-box;
  border:.13em solid currentColor;
  border-radius:50%;
  background:none;
  -webkit-mask:none;
  mask:none;
}
.qb-ico.i-search::after{
  content:"";
  position:absolute;
  width:.48em;
  height:.13em;
  right:-.37em;
  bottom:-.2em;
  border-radius:999px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:left center;
}
.qb-ico.i-settings{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-settings' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E")}
.qb-ico.i-user-round{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-user-round' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='8' r='5' /%3E %3Cpath d='M20 21a8 8 0 0 0-16 0' /%3E %3C/svg%3E")}
.qb-ico.i-rocket{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-rocket' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5' /%3E %3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09' /%3E %3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z' /%3E %3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05' /%3E %3C/svg%3E")}
.qb-ico.i-flame{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-flame' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4' /%3E %3C/svg%3E")}
.qb-ico.i-castle{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-castle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 5V3' /%3E %3Cpath d='M14 5V3' /%3E %3Cpath d='M15 21v-3a3 3 0 0 0-6 0v3' /%3E %3Cpath d='M18 3v8' /%3E %3Cpath d='M18 5H6' /%3E %3Cpath d='M22 11H2' /%3E %3Cpath d='M22 9v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9' /%3E %3Cpath d='M6 3v8' /%3E %3C/svg%3E")}
.qb-ico.i-backpack{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-backpack' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M4 10a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z' /%3E %3Cpath d='M8 10h8' /%3E %3Cpath d='M8 18h8' /%3E %3Cpath d='M8 22v-6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v6' /%3E %3Cpath d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2' /%3E %3C/svg%3E")}
.qb-ico.i-book-open{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-book-open' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 7v14' /%3E %3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E %3C/svg%3E")}
.qb-ico.i-rotate-ccw{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-rotate-ccw' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3C/svg%3E")}
.qb-ico.i-clipboard-check{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-clipboard-check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='m9 14 2 2 4-4' /%3E %3C/svg%3E")}
.qb-ico.i-clipboard-list{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-clipboard-list' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='M12 11h4' /%3E %3Cpath d='M12 16h4' /%3E %3Cpath d='M8 11h.01' /%3E %3Cpath d='M8 16h.01' /%3E %3C/svg%3E")}
.qb-ico.i-pencil-line{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-pencil-line' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13 21h8' /%3E %3Cpath d='m15 5 4 4' /%3E %3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' /%3E %3C/svg%3E")}
.qb-ico.i-mail{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-mail' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E %3Crect x='2' y='4' width='20' height='16' rx='2' /%3E %3C/svg%3E")}
.qb-ico.i-notebook-pen{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-notebook-pen' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4' /%3E %3Cpath d='M2 6h4' /%3E %3Cpath d='M2 10h4' /%3E %3Cpath d='M2 14h4' /%3E %3Cpath d='M2 18h4' /%3E %3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z' /%3E %3C/svg%3E")}
.qb-ico.i-puzzle{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-puzzle' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z' /%3E %3C/svg%3E")}
.qb-ico.i-graduation-cap{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-graduation-cap' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z' /%3E %3Cpath d='M22 10v6' /%3E %3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5' /%3E %3C/svg%3E")}
.qb-ico.i-timer{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-timer' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='10' x2='14' y1='2' y2='2' /%3E %3Cline x1='12' x2='15' y1='14' y2='11' /%3E %3Ccircle cx='12' cy='14' r='8' /%3E %3C/svg%3E")}
.qb-ico.i-wrench{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-wrench' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z' /%3E %3C/svg%3E")}
.qb-ico.i-compass{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-compass' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E")}
.qb-ico.i-megaphone{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-megaphone' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8 13 21H8l-1.5-5.2'/%3E%3Cpath d='M3 11v3'/%3E%3C/svg%3E")}
.qb-ico.i-school{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-school' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-6 9 6'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M16 11h.01'/%3E%3C/svg%3E")}
.qb-ico.i-volume-2{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-volume-2' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E")}
.qb-ico.i-layout-dashboard{--qb-i:url("data:image/svg+xml,%3Csvg class='lucide lucide-layout-dashboard' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}

/* ============================================================
   FOUNDATION MODE (2026-07-17 user mandate) — level-F lessons for
   pre-readers (ages ~4-6): big bold words, huge tap targets, and no
   "A. / B." letter prefixes (removed in lesson-engine choicePrefix).
   body.foundation is toggled by Lesson.renderStep; every rule is
   scoped to #screen-lesson so a lingering class can't restyle other
   screens. Mirrors the body.dyslexia / body.contrast hook pattern.
   ============================================================ */
body.foundation #screen-lesson .explain-body { font-size: 1.5rem; line-height: 1.55; font-weight: 600; }
body.foundation #screen-lesson .step-card h3 { font-size: 1.8rem; }
body.foundation #screen-lesson .step-card .step-emoji { font-size: 3.6rem; }
body.foundation #screen-lesson .choice-btn { font-size: 1.5rem; font-weight: 800; padding: 18px 20px; line-height: 1.3; border-radius: 20px; }
body.foundation #screen-lesson .choices { gap: 14px; }
body.foundation #screen-lesson .fill-input { font-size: 1.45rem; padding: 12px 14px; }
body.foundation #screen-lesson .explain-body img { display: block; margin: 10px auto; max-width: min(100%, 440px); border-radius: 14px; }
body.foundation #screen-lesson .choice-img-btn { min-height: 150px; padding: 14px; }
body.foundation #screen-lesson .choice-img { max-height: 180px; }
body.foundation #screen-lesson .choice-img-cap { font-size: 1.5rem; }
body.foundation #screen-lesson .choice-img-btn.img-missing .choice-img-cap { font-size: 2.4rem; }
body.foundation #screen-lesson .feedback { font-size: 1.3rem; font-weight: 800; }

/* ============================================================
   PRIMARY MODE (english-f4 §0 E2) — levels 1–4. A gentler version
   of the foundation pre-reader look: bigger, warmer text + tap
   targets so a Year 1 lesson doesn't render identically to a Year
   10 one, without going full pre-reader. Toggled by Lesson.renderStep
   (body.primary, isPrimaryLevel); scoped to #screen-lesson so a
   lingering class can never restyle other screens. Foundation rules
   above are untouched (F is level 0, never gets body.primary).
   ============================================================ */
body.primary #screen-lesson .explain-body { font-size: 1.2rem; line-height: 1.5; }
body.primary #screen-lesson .step-card h3 { font-size: 1.5rem; }
body.primary #screen-lesson .step-card .step-emoji { font-size: 3rem; }
body.primary #screen-lesson .choice-btn { font-size: 1.2rem; font-weight: 700; padding: 14px 18px; line-height: 1.3; border-radius: 16px; }
body.primary #screen-lesson .choices { gap: 12px; }
body.primary #screen-lesson .fill-input { font-size: 1.2rem; padding: 10px 12px; }
body.primary #screen-lesson .explain-body img { display: block; margin: 10px auto; max-width: min(100%, 480px); border-radius: 14px; }
body.primary #screen-lesson .choice-img-btn { min-height: 130px; padding: 12px; }
body.primary #screen-lesson .choice-img { max-height: 165px; }
body.primary #screen-lesson .choice-img-cap { font-size: 1.25rem; }

/* ---- YOUNG-LEARNER TAP GUIDANCE (english-f4 §0, user 2026-07-21) ----
   Pre-readers can't read the question, so young-learner steps get (1) a spoken
   instruction on load (engine renderStep auto-narrate) and (2) these visual
   cues: a "👆 Tap …" banner above the choices + a gentle glow on each tappable
   option until the child answers. The engine inserts .young-tap-hint ONLY for
   Foundation + primary, so these rules never touch older levels. */
.young-tap-hint {
  display: block; text-align: center; margin: 6px auto 12px;
  font-size: 1.15rem; font-weight: 800; color: #5a3ea8;
  background: #efe9ff; border: 2px solid #d7c9ff; border-radius: 999px;
  padding: 8px 16px; width: fit-content; max-width: 100%;
  animation: youngHintPulse 1.6s ease-in-out infinite;
}
body.foundation #screen-lesson .young-tap-hint { font-size: 1.4rem; padding: 10px 20px; }
@keyframes youngHintPulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.05); opacity: 1; }
}
body.foundation #screen-lesson .choices .choice-btn:not(.right):not(.wrong):not(:disabled),
body.primary #screen-lesson .choices .choice-btn:not(.right):not(.wrong):not(:disabled) {
  animation: youngTapGlow 2s ease-in-out infinite;
}
@keyframes youngTapGlow {
  0%, 100% { box-shadow: 0 3px 0 rgba(38, 59, 82, .1); }
  50%      { box-shadow: 0 3px 0 rgba(38, 59, 82, .1), 0 0 0 3px rgba(124, 92, 246, .30); }
}
@media (prefers-reduced-motion: reduce) {
  .young-tap-hint,
  body.foundation #screen-lesson .choices .choice-btn,
  body.primary #screen-lesson .choices .choice-btn { animation: none !important; }
}

/* ============================================================
   LESSON GAME SHELF · CIRCUIT BENCH
   Shelf-only professional workbench. The renderer adds .qcb-pro
   only under #shelf-game-host, so embedded lesson copies and every
   other Technologies lab retain their existing presentation.
   ============================================================ */
body:has(#screen-studios.active #shelf-game-host .qcb-pro) #wl-tabbar { display: none; }
#studios-root .studios-hub:has(#shelf-game-host .qcb-pro) {
  width: min(1500px, calc(100vw - 24px)); max-width: none; padding: 10px 0 28px;
}
#studios-root .studios-hub:has(#shelf-game-host .qcb-pro) > h2,
#studios-root .studios-hub:has(#shelf-game-host .qcb-pro) > h2 + div { display: none; }
#studios-root .studios-hub:has(#shelf-game-host .qcb-pro) > div:first-child { margin: 0 0 8px !important; }
#studios-root .studios-hub:has(#shelf-game-host .qcb-pro) > div:first-child .subject-btn {
  min-height: 42px; padding: 8px 14px; border-radius: 12px; font-size: .92rem;
}
#shelf-game-host .qcb-pro {
  --qcb-navy: #10283a; --qcb-ink: #f8f2df; --qcb-teal: #2bb8b0;
  --qcb-gold: #f2b441; --qcb-copper: #a85b2b; --qcb-panel: #17384e;
  overflow: hidden; border-radius: 24px; color: var(--qcb-ink);
  border: 2px solid #8c6031; background: #0c2131;
  box-shadow: 0 20px 55px rgba(13, 27, 40, .28), inset 0 0 0 1px rgba(255,255,255,.08);
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
}
#shelf-game-host .qcb-header {
  display: grid; grid-template-columns: minmax(260px, .85fr) minmax(540px, 1.9fr);
  gap: 18px; align-items: center; padding: 16px 20px;
  background: linear-gradient(120deg, #10283a 0%, #17384e 58%, #0d2535 100%);
  border-bottom: 2px solid #8c6031;
}
#shelf-game-host .qcb-title h3 {
  margin: 1px 0 2px; color: #fff4d4; font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1; letter-spacing: .02em;
  text-shadow: 0 2px 0 #532e18;
}
#shelf-game-host .qcb-title p { margin: 5px 0 0; color: #d9e8ec; font-size: .9rem; line-height: 1.35; }
#shelf-game-host .qcb-title-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#shelf-game-host .qcb-learn,
#shelf-game-host .qcb-tutorial-open {
  padding: 7px 12px; border: 1px solid #65d5ce; border-radius: 999px;
  color: #dffffb; background: rgba(28,115,119,.44); font: 800 .72rem/1 Nunito, ui-rounded, system-ui, sans-serif;
  cursor: pointer;
}
#shelf-game-host .qcb-tutorial-open {
  border-color: #f5c75a; color: #fff4c9; background: rgba(151,91,26,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
#shelf-game-host .qcb-learn:hover { background: rgba(43,184,176,.55); }
#shelf-game-host .qcb-tutorial-open:hover { background: rgba(184,110,28,.74); }
#shelf-game-host .qcb-tutorial-open:disabled { opacity: .72; cursor: default; filter: saturate(.72); }
#shelf-game-host .qcb-kicker {
  color: #79ded7; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
#shelf-game-host .qcb-mission-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#shelf-game-host .qcb-mission {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(4,17,28,.48); opacity: .58;
}
#shelf-game-host .qcb-mission > span {
  display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px;
  border-radius: 50%; border: 2px solid #7693a4; color: #d6e3e8; font-weight: 900;
}
#shelf-game-host .qcb-mission small { display: block; color: #8fb5c4; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
#shelf-game-host .qcb-mission strong { display: block; overflow: hidden; color: #eef6f6; font-size: .7rem; line-height: 1.15; }
#shelf-game-host .qcb-mission.is-current { opacity: 1; border-color: #65d5ce; box-shadow: 0 0 0 2px rgba(43,184,176,.17); }
#shelf-game-host .qcb-mission.is-current > span { border-color: #65d5ce; color: #65d5ce; }
#shelf-game-host .qcb-mission.is-done { opacity: 1; border-color: #5cbd78; background: rgba(34,105,67,.38); }
#shelf-game-host .qcb-mission.is-done > span { background: #43a964; border-color: #7ee29a; color: white; }
#shelf-game-host .qcb-tutorial-panel { display: none; }
#shelf-game-host .qcb-tutorial-panel.is-open {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px;
  padding: 13px 18px; border-bottom: 2px solid #8c6031; color: #f8f2df;
  background: linear-gradient(110deg,#17384e,#10283a 66%,#422f20);
}
#shelf-game-host .qcb-tutorial-panel.is-active {
  position: sticky; top: 0; z-index: 20; grid-template-columns: minmax(0,1fr) auto;
  box-shadow: 0 7px 18px rgba(7,24,35,.3);
}
#shelf-game-host .qcb-tutorial-panel.is-active .qcb-tutorial-progress { grid-column: 1 / -1; }
#shelf-game-host .qcb-tutorial-panel.is-review,
#shelf-game-host .qcb-tutorial-panel.is-check,
#shelf-game-host .qcb-tutorial-panel.is-finished { grid-template-columns: 1fr; }
#shelf-game-host .qcb-tutorial-panel small {
  display: block; color: #77ded6; font-size: .65rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase;
}
#shelf-game-host .qcb-tutorial-panel h4 {
  margin: 2px 0 3px; color: #fff0bd; font: 900 1.05rem/1.15 Georgia, serif;
}
#shelf-game-host .qcb-tutorial-panel p { margin: 0; max-width: 920px; color: #d7e8eb; font-size: .78rem; line-height: 1.4; }
#shelf-game-host .qcb-tutorial-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
#shelf-game-host .qcb-tutorial-progress span {
  min-width: 0; padding: 5px 7px; border: 1px solid #48697b; border-radius: 999px;
  color: #9ab6c1; background: rgba(5,21,31,.52); font-size: .61rem; font-weight: 900; text-align: center;
}
#shelf-game-host .qcb-tutorial-progress span.is-current {
  border-color: #ffd264; color: #322611; background: #ffd264; box-shadow: 0 0 0 2px rgba(255,210,100,.22);
}
#shelf-game-host .qcb-tutorial-progress span.is-done { border-color: #64c980; color: #dfffe7; background: #236342; }
#shelf-game-host .qcb-tutorial-buttons { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
#shelf-game-host .qcb-tutorial-buttons button {
  min-height: 38px; padding: 8px 13px; border: 1px solid #efc355; border-radius: 10px;
  color: #352711; background: linear-gradient(#ffe287,#eeb647); font: 900 .72rem/1.1 Nunito,ui-rounded,system-ui,sans-serif;
  box-shadow: 0 3px 0 #8c5a1f; cursor: pointer;
}
#shelf-game-host .qcb-tutorial-buttons button:last-child:not(:only-child) {
  border-color: #638493; color: #e4f0f2; background: #23495d; box-shadow: 0 3px 0 #0a2331;
}
#shelf-game-host .qcb-tutorial-buttons button:hover { filter: brightness(1.07); transform: translateY(-1px); }
#shelf-game-host .qcb-tutorial-buttons button:disabled { opacity: .42; cursor: not-allowed; transform: none; filter: grayscale(.25); }
#shelf-game-host .qcb-step-tools { align-content: center; max-width: 285px; }
#shelf-game-host .qcb-phase-picker {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; width: 100%;
}
#shelf-game-host .qcb-phase-picker button {
  min-width: 0; min-height: 66px; padding: 8px; border: 1px solid #54798a; border-radius: 11px;
  color: #e9f6f5; background: rgba(7,31,44,.78); box-shadow: 0 3px 0 #071923; cursor: pointer;
  font: 800 .68rem/1.18 Nunito,ui-rounded,system-ui,sans-serif; text-align: left;
}
#shelf-game-host .qcb-phase-picker button:hover { border-color: #ffd264; transform: translateY(-1px); }
#shelf-game-host .qcb-phase-picker b { display: block; margin-bottom: 3px; color: #ffd978; font-size: .75rem; }
#shelf-game-host .qcb-phase-picker span { display: block; color: #b8d0d7; }
#shelf-game-host .qcb-prediction-choices,
#shelf-game-host .qcb-check-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 9px; }
#shelf-game-host .qcb-prediction-choices button,
#shelf-game-host .qcb-check-choices button {
  min-height: 44px; padding: 8px 10px; border: 2px solid #5ca8ac; border-radius: 10px;
  color: #edffff; background: #19475a; font: 900 .72rem/1.2 Nunito,ui-rounded,system-ui,sans-serif; cursor: pointer;
}
#shelf-game-host .qcb-prediction-choices button:hover,
#shelf-game-host .qcb-check-choices button:hover { border-color: #ffd264; background: #285c6d; }
#shelf-game-host .qcb-comparison {
  display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(190px,1fr); align-items: stretch; gap: 9px;
  padding: 10px; border: 1px solid #5e8898; border-radius: 13px; background: rgba(4,24,34,.66);
}
#shelf-game-host .qcb-comparison article {
  display: grid; place-items: center; padding: 10px; border: 2px solid #69c7be; border-radius: 11px; background: #153e50; text-align: center;
}
#shelf-game-host .qcb-comparison article:nth-of-type(2) { border-color: #e7b451; background: #4d3922; }
#shelf-game-host .qcb-comparison article small { color: #b8dfe0; }
#shelf-game-host .qcb-comparison article strong { color: #fff2b6; font: 900 1.25rem/1.1 ui-monospace,Menlo,monospace; }
#shelf-game-host .qcb-comparison article span { color: #e6f2f2; font-size: .72rem; font-weight: 900; }
#shelf-game-host .qcb-comparison-arrow { display: grid; place-items: center; color: #ffd264; font-size: 1.7rem; font-weight: 1000; }
#shelf-game-host .qcb-comparison > p { grid-column: 1 / -1; max-width: none; padding: 7px 9px; border-radius: 8px; background: rgba(44,102,87,.42); }
#shelf-game-host .qcb-mobile-guide { display: none; }
#shelf-game-host .is-tutorial-target {
  position: relative; z-index: 15; outline: 5px solid #ffd45f !important; outline-offset: 4px !important;
  box-shadow: 0 0 0 9px rgba(255,212,95,.24), 0 0 24px rgba(255,203,70,.7) !important;
  animation: qcbTutorialTarget 1.15s ease-in-out infinite !important;
}
#shelf-game-host .is-help-target {
  position: relative; z-index: 14; outline: 5px solid #c58cff !important; outline-offset: 4px !important;
  box-shadow: 0 0 0 9px rgba(176,113,239,.2), 0 0 24px rgba(163,98,235,.65) !important;
  animation: qcbHelpTarget 1.15s ease-in-out infinite !important;
}
#shelf-game-host .qcb-layout {
  display: grid; grid-template-columns: 220px minmax(520px, 1fr) 205px; gap: 12px;
  padding: 12px; background: linear-gradient(#e8d2a8, #c49a61);
}
#shelf-game-host .qcb-drawer,
#shelf-game-host .qcb-instruments {
  border: 2px solid #7c4b29; border-radius: 18px; padding: 12px;
  background: linear-gradient(145deg, #16374c, #0f2637); color: #f7efd9;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.05), 0 7px 15px rgba(70,39,17,.25);
}
#shelf-game-host .qcb-drawer h4,
#shelf-game-host .qcb-instruments h4 {
  margin: 0 0 3px; color: #f4c96b; font-family: Georgia, serif; font-size: 1.08rem; text-align: center;
}
#shelf-game-host .qcb-drawer > p { margin: 0 0 8px; color: #a9c5cf; font-size: .72rem; text-align: center; }
#shelf-game-host .qcb-coach {
  margin: 8px 0 10px; padding: 9px 10px; border: 1px solid #4d9b9c; border-radius: 11px;
  color: #eafffb; background: #0b2a38; box-shadow: inset 3px 0 0 #65d5ce;
}
#shelf-game-host .qcb-coach small {
  display: block; margin-bottom: 2px; color: #65d5ce; font-size: .58rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
}
#shelf-game-host .qcb-coach strong { display: block; font-size: .68rem; line-height: 1.23; }
#shelf-game-host .qcb-safety {
  margin: 10px 0 0 !important; padding: 8px; border-radius: 9px; color: #ffe9bb !important;
  background: rgba(94,55,24,.52); font-size: .62rem !important; line-height: 1.25;
}
#shelf-game-host .qcb-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#shelf-game-host .qcb-part {
  position: relative; display: flex; min-width: 0; min-height: 87px; padding: 8px 5px 6px;
  flex-direction: column; align-items: center; justify-content: space-between; gap: 5px;
  border: 1px solid #4f7081; border-radius: 12px; color: #edf5f4;
  background: linear-gradient(145deg, #244b61, #173345); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #091a25;
  transition: transform .16s ease, border-color .16s ease, opacity .16s ease;
}
#shelf-game-host .qcb-part:hover { transform: translateY(-2px); border-color: #78d8d1; }
#shelf-game-host .qcb-part:active { transform: translateY(1px); box-shadow: inset 0 1px 4px rgba(0,0,0,.35); }
#shelf-game-host .qcb-part.is-selected { border-color: #ffd264; box-shadow: 0 0 0 3px rgba(255,210,100,.35), 0 3px 0 #091a25; }
#shelf-game-host .qcb-part.is-used { opacity: .48; filter: saturate(.5); }
#shelf-game-host .qcb-part.is-selected::after,
#shelf-game-host .qcb-part.is-used::after {
  position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; color: #172b35; background: #ffd264; content: '\2713'; font-size: .7rem; font-weight: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
#shelf-game-host .qcb-part.is-used::after { color: #d5e3e5; background: #47616f; content: '\2197'; }
#shelf-game-host .qcb-part strong { display: block; color: #fff; font-size: .68rem; line-height: 1.05; text-align: center; }
#shelf-game-host .qcb-part small { display: block; color: #a9c5cf; font-size: .56rem; line-height: 1.05; text-align: center; }
#shelf-game-host .qcb-part:focus-visible,
#shelf-game-host .qcb-slot:focus-visible,
#shelf-game-host .qcb-action:focus-visible,
#shelf-game-host .qcb-learn:focus-visible,
#shelf-game-host .qcb-tutorial-open:focus-visible,
#shelf-game-host .qcb-tutorial-buttons button:focus-visible,
#shelf-game-host .qcb-phase-picker button:focus-visible,
#shelf-game-host .qcb-prediction-choices button:focus-visible,
#shelf-game-host .qcb-check-choices button:focus-visible {
  outline: 4px solid #fff3a0; outline-offset: 3px;
}
#shelf-game-host .qcb-workbench { min-width: 0; }
#shelf-game-host .qcb-board {
  position: relative; min-height: 360px; height: clamp(360px, 52vh, 470px); overflow: hidden; border: 3px solid #6e4022; border-radius: 20px;
  background-color: #bf7b34;
  background-image: linear-gradient(rgba(11,31,40,.08), rgba(11,31,40,.08)), url('lessons/img/games/tech-sims/lab-backdrop-circuits.png');
  background-repeat: no-repeat; background-position: center; background-size: cover;
  box-shadow: inset 0 0 30px rgba(40,18,5,.35), 0 8px 16px rgba(70,39,17,.28);
}
#shelf-game-host .qcb-loop {
  position: absolute; left: 28%; top: 29%; width: 48%; height: 43%; border: 8px solid rgba(30,44,45,.72);
  border-radius: 44px; box-shadow: 0 2px 0 rgba(255,255,255,.22), inset 0 0 0 2px rgba(0,0,0,.22);
  transition: border-color .3s ease, box-shadow .3s ease;
}
#shelf-game-host .qcb-pro.is-live .qcb-loop {
  border-color: #73efb2; box-shadow: 0 0 18px #58e69c, inset 0 0 12px #58e69c;
  animation: qcbCurrent 1.3s ease-in-out infinite;
}
#shelf-game-host .qcb-loop > i {
  position: absolute; z-index: 2; left: -11px; top: -11px; display: none; width: 14px; height: 14px;
  border: 3px solid #184936; border-radius: 50%; background: #eaffb0; box-shadow: 0 0 9px #55ff9e;
}
#shelf-game-host .qcb-loop > i:nth-child(2) { animation-delay: -1.4s; }
#shelf-game-host .qcb-loop > span {
  position: absolute; left: 50%; top: 50%; z-index: 1; display: none; transform: translate(-50%,-50%); padding: 4px 9px;
  border-radius: 999px; color: #0d3c2d; background: #b9ffd3; font-size: .58rem; font-weight: 1000;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
#shelf-game-host .qcb-pro.is-live .qcb-loop > i { display: block; animation: qcbFlowDot 2.8s linear infinite; }
#shelf-game-host .qcb-pro.is-live .qcb-loop > span { display: block; }
#shelf-game-host .qcb-slot {
  position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px;
  width: 102px; height: 76px; padding: 5px; border: 2px solid #7c5c39; border-radius: 14px;
  background: rgba(242,229,195,.94); color: #233542; cursor: pointer;
  box-shadow: 0 5px 10px rgba(41,22,8,.3), inset 0 1px 0 #fff; transition: transform .16s ease, box-shadow .2s ease;
}
#shelf-game-host .qcb-slot:hover { transform: scale(1.035); }
#shelf-game-host .qcb-slot small { color: #425563; font-size: .59rem; font-weight: 900; line-height: 1; text-align: center; }
#shelf-game-host .qcb-slot.is-target { border-color: #1aa99f; box-shadow: 0 0 0 4px rgba(40,194,184,.4), 0 5px 10px rgba(41,22,8,.3); animation: qcbTarget 1.25s ease-in-out infinite; }
#shelf-game-host .qcb-slot.is-wrong { animation: qcbWrong .35s ease; }
#shelf-game-host .qcb-slot-0 { left: calc(50% - 51px); top: 62%; }
#shelf-game-host .qcb-slot-1 { left: 24%; top: 48%; }
#shelf-game-host .qcb-slot-2 { left: 22%; top: 26%; }
#shelf-game-host .qcb-slot-3 { left: calc(50% - 51px); top: 23%; }
#shelf-game-host .qcb-slot-4 { right: 24%; top: 34%; }
#shelf-game-host .qcb-slot-5 { right: 28%; top: 59%; }
#shelf-game-host .qcb-socket {
  width: 25px; height: 25px; border-radius: 50%; border: 5px solid #a6753c; background: #172a34;
  box-shadow: inset 0 0 0 4px #d8b66e, 0 2px 3px rgba(0,0,0,.35);
}
#shelf-game-host .qcb-feedback {
  min-height: 50px; margin-top: 9px; padding: 10px 14px; border: 1px solid #37576b; border-radius: 12px;
  color: #dcecf0; background: #112d3f; font-size: .86rem; line-height: 1.35;
}
#shelf-game-host .qcb-feedback.is-hint { border-color: #3fa8b4; background: #123c4b; }
#shelf-game-host .qcb-feedback.is-good { border-color: #4eb675; background: #173f35; }
#shelf-game-host .qcb-feedback.is-success { border-color: #89d37a; background: #184932; color: #efffe8; }
#shelf-game-host .qcb-feedback.is-warning { border-color: #df9f43; background: #51341e; color: #fff1d5; }
#shelf-game-host .qcb-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 8px; }
#shelf-game-host .qcb-controls .tsl-btn.qcb-action {
  min-height: 46px; padding: 8px 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  color: #f7faf8; background: linear-gradient(#28556d, #193b50); font-size: .75rem;
  box-shadow: 0 3px 0 #0a1e2a; cursor: pointer;
}
#shelf-game-host .qcb-controls .qcb-test-action { color: #203027; background: linear-gradient(#f7c85b, #dfa133); border-color: #ffd979; }
#shelf-game-host .qcb-controls .qcb-measure-action { background: linear-gradient(#27a8a2, #167973); }
#shelf-game-host .qcb-controls .qcb-reset-action { background: linear-gradient(#78514d, #523434); }
#shelf-game-host .qcb-controls .tsl-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
#shelf-game-host .qcb-meter-art { display: grid; place-items: center; margin: 5px auto 9px; height: 130px; }
#shelf-game-host .qcb-meter-art img { display: block; width: 125px; height: 125px; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0,0,0,.35)); }
#shelf-game-host .qcb-readout {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 4px; margin: 7px 0; padding: 9px;
  border: 2px solid #071921; border-radius: 10px; color: #6ffbdc; background: #071c24;
  box-shadow: inset 0 0 12px rgba(0,0,0,.72), 0 1px 0 rgba(255,255,255,.08);
}
#shelf-game-host .qcb-readout span { grid-column: 1 / -1; color: #8db8c4; font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
#shelf-game-host .qcb-readout strong { font-family: ui-monospace, Menlo, monospace; font-size: 1.65rem; line-height: 1; }
#shelf-game-host .qcb-readout small { color: #9fc3ca; font-size: .66rem; }
#shelf-game-host .qcb-continuity {
  display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 10px 8px;
  border: 1px solid #385466; border-radius: 11px; background: #0a202c;
}
#shelf-game-host .qcb-continuity-lamp { flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background: #2c3b40; box-shadow: inset 0 0 0 4px #111b1f; }
#shelf-game-host .qcb-continuity-lamp.is-on { background: #66ed7e; box-shadow: inset 0 0 0 4px #23863a, 0 0 15px #5cf37b; }
#shelf-game-host .qcb-continuity small { display: block; color: #86aab6; font-size: .56rem; text-transform: uppercase; }
#shelf-game-host .qcb-continuity strong { display: block; color: #dfeceb; font-size: .65rem; }
#shelf-game-host .qcb-energy {
  margin-top: 10px; padding: 9px; border: 1px solid #365c6b; border-radius: 10px; color: #edf8f5;
  background: rgba(8,29,39,.86);
}
#shelf-game-host .qcb-energy small {
  display: block; color: #f4c96b; font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
#shelf-game-host .qcb-energy strong { display: block; margin-top: 3px; font-size: .63rem; line-height: 1.25; }

/* Components are ordinary CSS/HTML shapes—no SVG assets. */
#shelf-game-host .qcb-shape { position: relative; display: block; flex: 0 0 auto; }
#shelf-game-host .qcb-battery { width: 62px; height: 27px; border: 3px solid #2b2927; border-radius: 7px; background: linear-gradient(90deg,#b65b2e 0 55%,#242b2e 55%); box-shadow: inset 0 2px 2px rgba(255,255,255,.25), 0 3px 4px rgba(0,0,0,.3); }
#shelf-game-host .qcb-battery::before { content: '+'; position: absolute; left: 10px; top: 0; color: #fff2c5; font-weight: 900; font-size: 17px; }
#shelf-game-host .qcb-battery::after { content: ''; position: absolute; right: -8px; top: 7px; width: 7px; height: 9px; border-radius: 2px; background: #d5ba79; }
#shelf-game-host .qcb-wire { width: 68px; height: 22px; border-bottom: 8px solid #d84f3e; border-radius: 50%; filter: drop-shadow(0 2px 1px rgba(0,0,0,.32)); }
#shelf-game-host .qcb-wire::before,
#shelf-game-host .qcb-wire::after { content: ''; position: absolute; bottom: -12px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle,#f8dc92 0 33%,#7d4b1f 36% 62%,#d8b062 65%); }
#shelf-game-host .qcb-wire::before { left: -3px; } #shelf-game-host .qcb-wire::after { right: -3px; }
#shelf-game-host .qcb-wire2 { border-color: #337ec7; } #shelf-game-host .qcb-wire3 { border-color: #e7b43d; }
#shelf-game-host .qcb-wool { border: 0; width: 45px; height: 45px; border-radius: 50%; background: repeating-radial-gradient(ellipse at 35% 35%,#e19b4a 0 4px,#9c562f 5px 7px,#d7833e 8px 11px); box-shadow: inset -5px -7px 8px rgba(77,37,18,.28), 0 3px 4px rgba(0,0,0,.28); }
#shelf-game-host .qcb-wool::before { left: -11px; bottom: 13px; }
#shelf-game-host .qcb-wool::after { right: -11px; bottom: 13px; }
#shelf-game-host .qcb-bulb { width: 43px; height: 43px; border: 3px solid #6f5a31; border-radius: 50%; background: radial-gradient(circle at 37% 30%,#fff 0 9%,#fff1a3 12% 28%,#d39a40 61%,#7d572f 75%); box-shadow: inset -5px -6px 8px rgba(84,48,20,.25); }
#shelf-game-host .qcb-bulb::after { content: ''; position: absolute; left: 10px; bottom: -11px; width: 18px; height: 13px; border-radius: 2px 2px 5px 5px; background: repeating-linear-gradient(#ad9c72 0 3px,#54565a 4px 6px); }
#shelf-game-host .qcb-slot .qcb-bulb { width: 35px; height: 35px; margin-bottom: 8px; }
#shelf-game-host .qcb-slot .qcb-bulb::after { left: 8px; bottom: -9px; width: 14px; height: 10px; }
#shelf-game-host .qcb-bulb.is-lit { background: radial-gradient(circle,#fff 0 10%,#fff5a5 27%,#ffc74a 58%,#e58b1e 78%); box-shadow: 0 0 18px 8px #ffd75f, inset 0 0 9px #fff; animation: qcbBulbGlow 1s ease-in-out infinite; }
#shelf-game-host .qcb-bulb.is-lit.is-dim { box-shadow: 0 0 10px 4px rgba(255,211,90,.72); filter: saturate(.8) brightness(.86); }
#shelf-game-host .qcb-switch { width: 62px; height: 31px; border: 3px solid #604524; border-radius: 8px; background: linear-gradient(#d5b46f,#8b6934); box-shadow: 0 3px 4px rgba(0,0,0,.3); }
#shelf-game-host .qcb-switch::before,
#shelf-game-host .qcb-switch::after { content: ''; position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle,#f1d999 0 30%,#633a18 35% 62%,#b48845 67%); }
#shelf-game-host .qcb-switch::before { left: 5px; } #shelf-game-host .qcb-switch::after { right: 5px; }
#shelf-game-host .qcb-switch i { position: absolute; left: 15px; top: 5px; width: 32px; height: 7px; border-radius: 5px; background: #28343a; transform: rotate(-18deg); transform-origin: left center; box-shadow: 0 2px 2px rgba(0,0,0,.45); }
#shelf-game-host .qcb-pro.is-live .qcb-slot-5 .qcb-switch i { transform: rotate(0); }
#shelf-game-host .qcb-slot.is-metered::before,
#shelf-game-host .qcb-slot.is-metered::after {
  content: ''; position: absolute; z-index: 7; top: 15px; width: 34px; height: 6px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.35); box-shadow: 0 2px 3px rgba(0,0,0,.42);
}
#shelf-game-host .qcb-slot.is-metered::before {
  left: -18px; background: linear-gradient(90deg,#191d22 0 18%,#d9473d 20%); transform: rotate(23deg);
}
#shelf-game-host .qcb-slot.is-metered::after {
  right: -18px; background: linear-gradient(90deg,#222b31 0 78%,#c4473b 80%); transform: rotate(-23deg);
}
@keyframes qcbCurrent { 50% { box-shadow: 0 0 26px #58e69c, inset 0 0 18px #58e69c; } }
@keyframes qcbFlowDot {
  0% { left: -11px; top: -11px; }
  24% { left: calc(100% - 3px); top: -11px; }
  25% { left: calc(100% - 3px); top: -11px; }
  49% { left: calc(100% - 3px); top: calc(100% - 3px); }
  50% { left: calc(100% - 3px); top: calc(100% - 3px); }
  74% { left: -11px; top: calc(100% - 3px); }
  75% { left: -11px; top: calc(100% - 3px); }
  100% { left: -11px; top: -11px; }
}
@keyframes qcbTarget { 50% { box-shadow: 0 0 0 7px rgba(40,194,184,.2), 0 5px 10px rgba(41,22,8,.3); } }
@keyframes qcbWrong { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes qcbBulbGlow { 50% { filter: brightness(1.17); } }
@keyframes qcbTutorialTarget {
  50% { outline-offset: 7px; box-shadow: 0 0 0 12px rgba(255,212,95,.14), 0 0 30px rgba(255,203,70,.8); }
}
@keyframes qcbHelpTarget {
  50% { outline-offset: 7px; box-shadow: 0 0 0 12px rgba(176,113,239,.12), 0 0 30px rgba(163,98,235,.72); }
}

@media (max-width: 1050px) {
  #shelf-game-host .qcb-header { grid-template-columns: 1fr; }
  #shelf-game-host .qcb-layout { grid-template-columns: 180px minmax(450px,1fr); }
  #shelf-game-host .qcb-instruments { grid-column: 1 / -1; display: grid; grid-template-columns: 100px 1fr 1fr 1.2fr; align-items: center; gap: 8px; }
  #shelf-game-host .qcb-instruments h4 { display: none; }
  #shelf-game-host .qcb-meter-art { height: 90px; margin: 0; }
  #shelf-game-host .qcb-meter-art img { width: 86px; height: 86px; }
  #shelf-game-host .qcb-continuity { margin: 0; }
  #shelf-game-host .qcb-energy { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 760px) {
  #shelf-game-host .qcb-tutorial-panel.is-open,
  #shelf-game-host .qcb-tutorial-panel.is-active { position: relative; grid-template-columns: 1fr; }
  #shelf-game-host .qcb-tutorial-buttons { justify-content: flex-start; }
  #shelf-game-host .qcb-step-tools { max-width: none; }
  #shelf-game-host .qcb-phase-picker { grid-template-columns: 1fr 1fr; }
  #shelf-game-host .qcb-phase-picker button:last-child { grid-column: 1 / -1; }
  #shelf-game-host .qcb-prediction-choices,
  #shelf-game-host .qcb-check-choices { grid-template-columns: 1fr; }
  #shelf-game-host .qcb-comparison { grid-template-columns: 1fr; }
  #shelf-game-host .qcb-comparison-arrow { transform: rotate(90deg); }
  #shelf-game-host .qcb-mobile-guide {
    position: fixed; top: 0; left: 12px; right: 12px; z-index: 31; display: none; gap: 3px; padding: 9px 12px;
    border: 2px solid #dfaa38; border-top: 0; border-radius: 0 0 12px 12px;
    color: #f8fbf6; background: #17384e; box-shadow: 0 5px 13px rgba(4,19,28,.35);
  }
  #shelf-game-host .qcb-pro.is-tutorial .qcb-mobile-guide:not(:empty) { display: flex; flex-direction: column; }
  #shelf-game-host .qcb-mobile-guide b { color: #ffe28a; font-size: .75rem; }
  #shelf-game-host .qcb-mobile-guide span { font-size: .7rem; line-height: 1.25; }
  #shelf-game-host .qcb-tutorial-progress { grid-template-columns: repeat(5,auto); overflow-x: auto; padding: 3px; }
  #shelf-game-host .qcb-tutorial-progress span { min-width: 78px; }
  #shelf-game-host .qcb-mission-strip { grid-template-columns: 1fr 1fr; }
  #shelf-game-host .qcb-layout { display: block; padding: 8px; }
  #shelf-game-host .qcb-drawer { margin-bottom: 8px; }
  #shelf-game-host .qcb-parts { grid-template-columns: repeat(4,1fr); }
  #shelf-game-host .qcb-part { min-height: 75px; }
  #shelf-game-host .qcb-part strong { font-size: .72rem; }
  #shelf-game-host .qcb-part small { font-size: .62rem; }
  #shelf-game-host .qcb-coach { position: sticky; top: 6px; z-index: 12; margin-bottom: 9px; box-shadow: inset 3px 0 0 #65d5ce, 0 4px 10px rgba(0,0,0,.3); }
  #shelf-game-host .qcb-coach strong { font-size: .74rem; }
  #shelf-game-host .qcb-board { min-height: 405px; }
  #shelf-game-host .qcb-slot { width: 86px; height: 68px; }
  #shelf-game-host .qcb-slot-0 { left: calc(50% - 43px); }
  #shelf-game-host .qcb-slot-3 { left: calc(50% - 43px); }
  #shelf-game-host .qcb-slot-2 { left: 16%; }
  #shelf-game-host .qcb-controls { grid-template-columns: 1fr 1fr; }
  #shelf-game-host .qcb-instruments { margin-top: 8px; grid-template-columns: 72px 1fr 1fr; }
  #shelf-game-host .qcb-continuity { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  #shelf-game-host .qcb-pro *, #shelf-game-host .qcb-pro *::before, #shelf-game-host .qcb-pro *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Quest Byte homepage — game-board layout
   Presentation only. Existing controls, role rules and data sources stay intact.
   ===================================================================== */
#screen-home {
  max-width: 1280px;
  margin: 0 auto;
  color: #243854;
}
#screen-home .hero {
  min-height: 252px;
  margin: 10px 0 18px;
  padding: 76px 24px 22px;
  border: 4px solid #3bb8c5;
  border-radius: 26px;
  box-shadow: 0 8px 0 rgba(31,129,145,.2), 0 20px 38px rgba(38,59,82,.16);
}
#screen-home .hero::before {
  background: linear-gradient(180deg,rgba(8,46,63,.04) 20%,rgba(13,48,63,.79) 100%);
}
#screen-home .hero h1::after { font-size: clamp(2.65rem,6vw,4.75rem); }
#screen-home .hero .sub::after { font-size: clamp(1rem,2vw,1.3rem); }
#screen-home .hero-news {
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,250,226,.94);
}
#screen-home #home-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  width: min(100%,720px);
  margin: 12px auto 0;
  gap: 8px;
}
#screen-home #home-stats .wl-stat {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 10px rgba(13,46,59,.18);
}
#screen-home #home-stats .wl-stat-num { color: #6841b7; }

.home-progress-panel {
  width: min(100%,1080px);
  margin: 0 auto 16px;
  overflow: hidden;
  border: 2px solid #79cfc5;
  border-radius: 22px;
  background: linear-gradient(135deg,#fff,#eefcf8 58%,#f8f2ff);
  box-shadow: 0 6px 0 rgba(28,125,118,.13),0 16px 30px rgba(38,59,82,.1);
}
#screen-home .home-progress-panel .player-row {
  grid-template-columns: 82px minmax(0,1fr);
  width: 100%;
  margin: 0;
  padding: 18px 20px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-home .home-progress-panel .avatar-big {
  width: 82px;
  height: 82px;
  border-radius: 20px;
  font-size: 2.7rem;
  background: linear-gradient(145deg,#fff,#dff8f0);
}
.home-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.home-player-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.home-role-pill,.home-aurars-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  white-space: nowrap;
}
.home-role-pill { color: #fff; background: #7049c5; box-shadow: 0 3px 0 #4c2d92; text-transform: uppercase; letter-spacing: .05em; }
.home-aurars-pill { color: #775217; background: #fff2be; border: 2px solid #efc75d; }
.home-level-panel { padding: 11px 14px 13px; border-top: 1px solid #cfeae5; background: rgba(233,249,246,.72); }
#screen-home #pathway-row {
  width: 100%;
  max-width: none;
  margin: 0!important;
  padding: 3px 2px 5px;
  justify-content: center!important;
  flex-wrap: wrap;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: #8fd0c8 transparent;
}
#screen-home #pathway-row>strong { flex: 0 0 auto; align-self: center; }
#screen-home #pathway-row .pw-tab { flex: 0 0 auto; padding: 7px 12px; }

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  width: min(100%,1080px);
  margin: 0 auto 16px;
}
.home-action-grid:has(#continue-row:empty) #home-revision-row { grid-column: 1/-1; }
.home-action-grid:has(#home-revision-row[hidden]) #continue-row { grid-column: 1/-1; }
#continue-row { margin: 0!important; text-align: left!important; }
#continue-row .go-btn {
  width: 100%;
  min-height: 108px;
  padding: 18px 20px;
  border-radius: 18px;
  text-align: left;
  font-size: clamp(1rem,2vw,1.25rem);
  background: linear-gradient(135deg,#20b694,#42cf78);
  box-shadow: 0 6px 0 #188567,0 13px 24px rgba(30,132,102,.18);
}
#home-revision-row[hidden] { display: none!important; }
.home-revision-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 108px;
  height: 100%;
  padding: 15px 17px;
  border: 2px solid #e5b656;
  border-radius: 18px;
  background: linear-gradient(135deg,#fff8d7,#fff 58%,#eef9ff);
  box-shadow: 0 6px 0 rgba(130,94,19,.13),0 13px 24px rgba(38,59,82,.09);
}
.home-revision-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #fff; font-size: 1.8rem; box-shadow: 0 3px 0 rgba(130,94,19,.13); }
.home-revision-card>div>strong,.home-revision-card>div>span { display: block; }
.home-revision-card strong { color: #4d3e68; font-size: 1.02rem; }
.home-revision-card div>span:last-child { margin-top: 2px; color: #657188; font-size: .82rem; font-weight: 800; }
.home-action-kicker,.home-section-kicker { color: #23817c!important; font-size: .7rem!important; font-weight: 950!important; letter-spacing: .08em; text-transform: uppercase; }
.home-revision-card button {
  border: 0;
  border-radius: 12px;
  padding: 10px 13px;
  color: #fff;
  background: #7255cc;
  box-shadow: 0 4px 0 #4f399a;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}

/* 📖 Learn to Read — parent-facing Phonics Studio entry (P2, review §3/§9).
   Always a full-width band of the action grid, whatever the two rows above do. */
#home-learntoread-row { grid-column: 1/-1; }
#home-learntoread-row[hidden] { display: none!important; }
.home-learntoread-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 84px;
  padding: 15px 17px;
  border: 2px solid #77beb9;
  border-radius: 18px;
  background: linear-gradient(135deg,#e6f9f1,#fff 58%,#eef6ff);
  box-shadow: 0 6px 0 rgba(31,102,92,.13),0 13px 24px rgba(38,59,82,.09);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-learntoread-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #fff; font-size: 1.8rem; box-shadow: 0 3px 0 rgba(31,102,92,.13); }
.home-learntoread-card>span>strong,.home-learntoread-card>span>span { display: block; }
.home-learntoread-card strong { color: #1f5f58; font-size: 1.02rem; }
.home-learntoread-card>span>span { margin-top: 2px; color: #657188; font-size: .82rem; font-weight: 800; }
/* 📕 The grown-up's one sentence (fluency loop iteration 7) — present only once
   the child has FINISHED a book, so most of the card's life it does not exist.
   Two classes deliberately: `.home-learntoread-card>span>span` above is (0,1,2)
   and would otherwise win on colour and size. Deliberately quieter than the
   card's own subtitle, not louder — it is a note to the adult, not a headline,
   and the card must not start looking like a parent dashboard. */
.home-learntoread-card .home-learntoread-tonight {
  display: block;
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid #77beb9;
  border-radius: 0 10px 10px 0;
  background: rgba(119,190,185,.13);
  color: #45566b;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.45;
}
.home-learntoread-card .home-learntoread-book { color: #1f5f58; font-weight: 900; }
.home-learntoread-card>b {
  border-radius: 12px;
  padding: 10px 13px;
  color: #fff;
  background: #23817c;
  box-shadow: 0 4px 0 #174f4c;
  font-size: .82rem;
  font-weight: 900;
}

#screen-home .home-section[hidden] { display: none!important; }
.home-section {
  margin: 18px 0;
  padding: 18px;
  border: 2px solid rgba(119,190,185,.42);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 0 rgba(38,59,82,.08),0 14px 28px rgba(38,59,82,.07);
}
.home-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 2px 13px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #c9e6e1;
}
.home-section-heading[hidden] { display: none!important; }
.home-section-heading h2 { margin: 1px 0 0; color: #27465f; font-size: clamp(1.45rem,3vw,2rem); }
.home-section-note { padding: 5px 10px; border-radius: 999px; background: #e7f7f4; color: #39726f; font-size: .78rem; font-weight: 900; }
#home-subjects-section #subject-grid { margin: 0; padding: 0; border: 0; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; }
#home-subjects-section #subjects-head[hidden] + #subject-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
#screen-home .subject-btn.home-subject-card {
  min-height: 185px;
  padding: 15px 11px 13px;
  justify-content: flex-start;
  gap: 5px;
  border-radius: 20px;
}
#screen-home .subject-btn.home-subject-card img.big-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 2px;
}
#screen-home .subject-btn.home-subject-card .big-emoji {
  width: 82px;
  height: 82px;
  line-height: 82px;
  font-size: 3rem;
}
#screen-home .subject-btn.home-subject-card .home-card-title { margin-top: auto; font-size: clamp(1rem,1.8vw,1.35rem); }
#screen-home .subject-btn.home-subject-card .count-pill { font-size: .76rem; }

.home-study-section { background: linear-gradient(135deg,rgba(244,239,255,.88),rgba(255,255,255,.82)); border-color: #d5c7ed; }
#screen-home #study-tools-head { max-width: none; margin: 0 2px 13px; padding-bottom: 10px; border-bottom: 2px dashed #d8cceb; font-size: 1.45rem; }
#screen-home #tools-row.wl-tools-priority { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: none; margin: 0!important; gap: 13px; }
#screen-home #tools-row.wl-tools-priority .subject-btn.home-card { min-height: 190px; border-radius: 20px; }

.home-explore-section { background: linear-gradient(135deg,rgba(231,249,247,.84),rgba(250,244,255,.86)); }
.home-explore-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.home-explore-grid>#world-row,.home-explore-grid>#util-row { display: contents; }
.home-explore-grid .wl-world-card,.home-explore-grid #util-row .home-card { min-height: 220px; border-radius: 20px; }
.home-explore-grid .wl-world-row .subject-btn.wl-world-hero { grid-column: auto; min-height: 220px; padding-top: 124px; }
.home-explore-grid #util-row .home-card { padding: 18px 11px 15px; }
.home-explore-grid #util-row .home-card img.big-icon { width: 92px; height: 92px; }
.home-explore-grid #util-row .home-card .home-card-title { font-size: 1.25rem; }

#screen-home .badge-shelf {
  margin: 18px 0 4px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg,#fffdf0,#fff,#edf9f6);
}
#screen-home .badge-shelf h3 { font-size: 1.45rem; color: #27465f; }
#screen-home .badge-row { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 10px; }
#screen-home .badge-item { width: auto; min-width: 0; }

@media (max-width: 1020px) {
  #home-subjects-section #subject-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-explore-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home .badge-row { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  #screen-home .hero { min-height: 220px; padding: 62px 12px 16px; border-radius: 20px; }
  #screen-home .hero h1::after { font-size: 2.55rem; }
  #screen-home .hero-news { display: none; }
  #screen-home #home-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #screen-home #home-stats .wl-stat { padding: 5px 7px; }
  .home-progress-panel { border-radius: 18px; }
  #screen-home .home-progress-panel .player-row { grid-template-columns: 66px minmax(0,1fr); padding: 13px; }
  #screen-home .home-progress-panel .avatar-big { width: 66px; height: 66px; border-radius: 16px; font-size: 2rem; }
  .home-player-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-player-status { justify-content: flex-start; }
  .home-action-grid { grid-template-columns: 1fr; }
  .home-action-grid>#continue-row,.home-action-grid>#home-revision-row { grid-column: auto!important; }
  .home-revision-card { grid-template-columns: auto minmax(0,1fr); }
  .home-revision-card button { grid-column: 1/-1; width: 100%; }
  .home-section { margin: 14px 0; padding: 13px; border-radius: 19px; }
  #home-subjects-section #subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #screen-home .subject-btn.home-subject-card { min-height: 164px; padding: 12px 7px; }
  #screen-home .subject-btn.home-subject-card img.big-icon { width: 76px; height: 76px; }
  #screen-home #tools-row.wl-tools-priority { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home #tools-row.wl-tools-priority .subject-btn.home-card { min-height: 170px; }
  .home-explore-grid .wl-world-card,.home-explore-grid #util-row .home-card { min-height: 180px; }
  .home-explore-grid .wl-world-row .subject-btn.wl-world-hero { min-height: 180px; padding-top: 100px; }
  #screen-home .badge-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  #screen-home #pathway-row { justify-content: flex-start!important; }
  #screen-home #pathway-row>strong { width: auto; min-width: 132px; }
  #home-subjects-section #subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home .subject-btn.home-subject-card { min-height: 148px; }
  #screen-home #tools-row.wl-tools-priority,.home-explore-grid { grid-template-columns: 1fr; }
  #screen-home .badge-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 350px) {
  #home-subjects-section #subject-grid { grid-template-columns: 1fr; }
}

/* Wide Home: turn the subject cards into the reference's compact left rail,
   while the existing continue, diary, study and explore sections form the
   main shelf. This is deliberately Home-only; subject hubs return to the
   ordinary full-width category grid below. */
@media (min-width: 1100px) {
  #screen-home {
    display: grid;
    grid-template-columns: 278px minmax(0,1fr);
    align-items: start;
    column-gap: 18px;
  }
  #screen-home>.hero,
  #screen-home>.home-progress-panel,
  #screen-home>.badge-shelf,
  #screen-home>p { grid-column: 1/-1; width: 100%; }
  #screen-home>.home-action-grid,
  #screen-home>#quest-row,
  #screen-home>.home-study-section,
  #screen-home>#extras-row,
  #screen-home>.home-explore-section {
    grid-column: 2;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #screen-home>#home-subjects-section {
    grid-column: 1;
    grid-row: 3 / span 5;
    position: static;
    max-height: none;
    margin: 0;
    padding: 13px;
    overflow: visible;
  }
  #home-subjects-section .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  #home-subjects-section #subject-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  #screen-home #home-subjects-section .subject-btn.home-subject-card {
    display: grid;
    grid-template-columns: 60px minmax(0,1fr);
    grid-template-rows: auto auto;
    min-height: 94px;
    padding: 9px 10px;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
  }
  #screen-home #home-subjects-section .subject-btn.home-subject-card img.big-icon,
  #screen-home #home-subjects-section .subject-btn.home-subject-card .big-emoji {
    grid-column: 1;
    grid-row: 1/3;
    width: 58px;
    height: 58px;
    margin: 0;
    line-height: 58px;
    font-size: 2.25rem;
  }
  #screen-home #home-subjects-section .subject-btn.home-subject-card .home-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.05;
  }
  #screen-home #home-subjects-section .subject-btn.home-subject-card .count-pill {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    min-height: 0;
    margin: 2px 0 0;
    padding: 3px 7px;
    font-size: .68rem;
  }
  #screen-home .home-explore-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #screen-home .home-explore-grid .wl-world-card .count-pill {
    white-space: normal;
    text-wrap: balance;
  }

  /* A subject has been opened: this is the category browser, not the Home
     rail, so let it use the established full-width layout. */
  #screen-home:has(#subjects-head[hidden]) { display: block; }
  #screen-home:has(#subjects-head[hidden])>#home-subjects-section {
    position: static;
    max-height: none;
    margin: 18px 0;
    padding: 18px;
    overflow: visible;
  }
  #screen-home:has(#subjects-head[hidden]) #home-subjects-section #subject-grid {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 13px;
  }
}

/* =====================================================================
   Homepage reference lock — matches the approved 2026-07-26 composition.
   This final layer intentionally cancels the experimental wide left rail.
   ===================================================================== */
#screen-home.screen.active {
  display: block!important;
  width: 100%;
  max-width: none;
  margin: 0;
}
#screen-home>.hero,
#screen-home>.home-progress-panel,
#screen-home>.home-action-grid,
#screen-home>#quest-row,
#screen-home>#home-subjects-section,
#screen-home>.home-study-section,
#screen-home>#extras-row,
#screen-home>.home-explore-section,
#screen-home>.badge-shelf {
  width: 100%;
  grid-column: auto;
}
#screen-home .hero {
  min-height: 286px;
  margin: 4px 0 70px;
  padding: 58px 24px 24px;
  overflow: visible;
  border-width: 3px;
  border-radius: 18px;
  background-position: center;
}
#screen-home .hero h1::after {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(3rem,6vw,4.9rem);
  letter-spacing: -.035em;
  text-shadow: 0 4px 0 rgba(39,70,62,.2),0 6px 14px rgba(18,46,54,.45);
}
#screen-home .hero .sub::after { font-size: 1.06rem; }
#screen-home .hero-news {
  max-width: 590px;
  border: 1px solid #e7d3a6;
  border-radius: 8px;
  font-size: .84rem;
  box-shadow: 0 3px 10px rgba(13,46,59,.14);
}
#screen-home #home-stats {
  position: absolute;
  left: 50%;
  bottom: -52px;
  z-index: 3;
  width: min(92%,670px);
  margin: 0;
  padding: 7px;
  transform: translateX(-50%);
  border: 2px solid #70b8e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(33,111,160,.12),0 10px 22px rgba(38,59,82,.1);
}
#screen-home #home-stats .wl-stat {
  padding: 4px 8px;
  border: 0;
  border-right: 1px solid #e1e8ef;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-home #home-stats .wl-stat:last-child { border-right: 0; }
#screen-home #home-stats .wl-stat-num { font-size: 1.1rem; }
#screen-home #home-stats .wl-stat-lbl { font-size: .69rem; }

#screen-home>.home-progress-panel {
  max-width: none;
  margin: 0 0 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-home .home-progress-panel .player-row {
  grid-template-columns: 98px minmax(0,1fr);
  margin: 0;
  padding: 12px 16px;
  border: 2px solid #78bce7;
  border-radius: 14px;
  background: linear-gradient(90deg,#fff,#fbfdff);
  box-shadow: 0 3px 0 rgba(38,99,139,.09);
}
#screen-home .home-progress-panel .avatar-big {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border-color: #77c6a4;
  background: #e9f8e8;
}
#screen-home .home-player-head { align-items: center; margin-bottom: 5px; }
#screen-home .player-meta .pname { font-size: 1.15rem; }
#screen-home .player-meta .pname small { display: block; margin-top: 1px; font-size: .72rem; font-weight: 700; }
#screen-home .home-role-pill { min-height: 23px; padding: 2px 8px; font-size: .64rem; background: #4e9be4; box-shadow: 0 2px 0 #2f6fae; }
#screen-home .home-aurars-pill { min-height: 34px; padding: 5px 10px; font-size: .78rem; }
#screen-home .home-aurars-pill[hidden] { display: none!important; }
#screen-home .home-level-panel {
  margin-top: 9px;
  padding: 9px 12px;
  border: 1px solid #ded8c9;
  border-radius: 13px;
  background: #fffefa;
  box-shadow: 0 2px 0 rgba(86,72,40,.06);
}
#screen-home #pathway-row { justify-content: flex-start!important; gap: 6px; }
#screen-home #pathway-row>strong { width: 100%; color: #29465f; }
#screen-home #pathway-row .pw-tab { min-width: 75px; padding: 6px 12px; border-width: 1px; border-radius: 9px; font-size: .79rem; }

#screen-home>.home-action-grid { max-width: none; margin: 0 0 10px; gap: 10px; }
#screen-home #continue-row .go-btn {
  min-height: 72px;
  padding: 13px 18px;
  border-radius: 11px;
  box-shadow: 0 4px 0 #218047,0 7px 14px rgba(30,132,102,.12);
}
#screen-home .home-revision-card {
  min-height: 72px;
  padding: 9px 12px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow: 0 3px 0 rgba(130,94,19,.1);
}
#screen-home .home-revision-ico { width: 42px; height: 42px; border-radius: 10px; font-size: 1.35rem; }
#screen-home .home-revision-card button { background: #f0a118; box-shadow: 0 3px 0 #be7410; }

#screen-home>#quest-row { margin: 0 0 10px; }
#screen-home .wl-home-diary-widget { border-width: 1px; border-radius: 12px; box-shadow: 0 3px 0 rgba(153,117,34,.09); }
#screen-home .wl-home-diary-head { padding: 8px 12px 7px; }
#screen-home .wl-home-diary-head h2 { font-size: 1.08rem; }
#screen-home .wl-home-diary-head p { margin-top: 1px; font-size: .72rem; color: #36a35b; }
#screen-home .wl-home-diary-open { padding: 7px 11px; border-radius: 8px; font-size: .8rem; }
#screen-home .wl-home-diary-list { max-height: 96px; padding: 5px 10px 7px; gap: 5px; }
#screen-home .wl-home-diary-empty { padding: 3px 8px; font-size: .75rem; }

#screen-home>.home-section,
#screen-home>#home-subjects-section,
#screen-home>.home-study-section,
#screen-home>.home-explore-section,
#screen-home:has(#subjects-head[hidden])>#home-subjects-section {
  position: static;
  max-height: none;
  margin: 10px 0;
  padding: 10px 12px 12px;
  overflow: visible;
  border: 1px solid #e5dfd2;
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 2px 0 rgba(52,68,83,.05);
}
#screen-home .home-section-heading,
#screen-home #study-tools-head {
  max-width: none;
  margin: 0 0 8px;
  padding: 0 0 5px;
  border-bottom: 1px solid #eadfc9;
}
#screen-home .home-section-heading h2,
#screen-home #study-tools-head { font-size: 1.05rem; color: #29465f; }
#screen-home #study-tools-head .study-tools-count,.home-section-note,.home-section-kicker { display: none; }

#screen-home #home-subjects-section #subject-grid,
#screen-home:has(#subjects-head[hidden]) #home-subjects-section #subject-grid {
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin: 0;
}
#screen-home #home-subjects-section .subject-btn.home-subject-card {
  display: flex;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: 222px;
  padding: 0 8px 11px;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
}
.home-subject-art {
  display: block;
  flex: 0 0 auto;
  width: calc(100% + 16px);
  height: 154px;
  margin: 0 -8px 3px;
  background-repeat: no-repeat;
  /* One image per subject: each card centres and crops only its own art. */
  background-size: cover;
  background-position: center;
  border-radius: 11px 11px 8px 8px;
}
.home-subject-art-0{background-image:url("anam/images/ui-icons/home-subject-english-v5.webp")}
.home-subject-art-1{background-image:url("anam/images/ui-icons/home-subject-mathematics-v5.webp")}
.home-subject-art-2{background-image:url("anam/images/ui-icons/home-subject-science-v5.webp")}
.home-subject-art-3{background-image:url("anam/images/ui-icons/home-subject-arts-v5.webp")}
.home-subject-art-4{background-image:url("anam/images/ui-icons/home-subject-hpe-v5.webp")}
.home-subject-art-5{background-image:url("anam/images/ui-icons/home-subject-humanities-v5.webp")}
.home-subject-art-6{background-image:url("anam/images/ui-icons/home-subject-technologies-v5.webp")}
.home-subject-art-7{background-image:url("anam/images/ui-icons/home-subject-languages-v5.webp")}
#screen-home #home-subjects-section .subject-btn.home-subject-card .home-card-title {
  width: 100%;
  margin: auto 0 0;
  font-size: 1.03rem;
  line-height: 1.05;
}
#screen-home #home-subjects-section .subject-btn.home-subject-card .count-pill {
  min-height: 0;
  margin: 3px 0 0;
  padding: 3px 8px;
  font-size: .68rem;
}

#screen-home #tools-row.wl-tools-priority { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
#screen-home #tools-row.wl-tools-priority .subject-btn.home-card {
  min-height: 196px;
  padding: 0 10px 10px;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}
.home-study-art {
  display: block;
  width: calc(100% + 20px);
  height: 132px;
  margin: 0 -10px 3px;
  background-image: url("anam/images/ui-icons/home-study-sprite-v2.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
}
.home-study-art-0{background-position:0 0}.home-study-art-1{background-position:50% 0}.home-study-art-2{background-position:100% 0}
#screen-home #tools-row .home-card-title { margin-top: auto; font-size: 1.12rem; }
#screen-home #tools-row .count-pill { min-height: 0; margin-top: 2px; padding: 3px 10px; font-size: .7rem; }

#screen-home .home-explore-grid { grid-template-columns: 2.35fr 1fr 1fr 1fr; gap: 8px; }
#screen-home .home-explore-grid .wl-world-card,
#screen-home .home-explore-grid #util-row .home-card {
  min-height: 204px;
  border-radius: 10px;
}
#screen-home .home-explore-grid .wl-world-row .subject-btn.wl-world-hero {
  grid-column: auto;
  min-height: 204px;
  padding: 120px 8px 12px;
}
#screen-home .home-explore-grid .wl-world-row .subject-btn:not(.wl-world-hero) { padding: 120px 8px 12px; }
#screen-home .home-explore-grid #util-row .home-utility-card {
  min-height: 204px;
  padding: 0 7px 10px;
  gap: 3px;
  background: linear-gradient(160deg,#8a6038,#5a3821);
  box-shadow: 0 5px 0 #3f2818;
  overflow: hidden;
}
.home-utility-art {
  display: block;
  width: calc(100% + 14px);
  height: 132px;
  margin: 0 -7px 3px;
  background-repeat: no-repeat;
  /* Each card owns a 4:3 Retina image so cover can crop responsively without
     stretching or leaking an adjacent sprite panel. */
  background-size: cover;
  background-position: center;
}
.home-utility-art-0{background-image:url("anam/images/ui-icons/home-curio-card-v3.webp")}
.home-utility-art-1{background-image:url("anam/images/ui-icons/home-reading-card-v3.webp")}
#screen-home .home-explore-grid #util-row .home-utility-card .home-card-title { margin-top: auto; color: #fff; font-size: .93rem; }
#screen-home .home-explore-grid #util-row .home-utility-card .count-pill { min-height: 0; padding: 3px 5px; color: #fff; font-size: .62rem; background: rgba(32,18,9,.38); }
#screen-home .home-explore-grid .wl-world-card .count-pill { white-space: normal; text-wrap: balance; font-size: .67rem; }

#screen-home>.badge-shelf { margin: 10px 0 4px; padding: 8px 10px 6px; border-radius: 12px; }
#screen-home .badge-shelf h3 { display: none; }
#screen-home .badge-row { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px; }
#screen-home .badge-item { font-size: .57rem; }
#screen-home .badge-item .badge-ico { width: 48px; height: 48px; line-height: 42px; font-size: 1.55rem; border-width: 2px; border-radius: 8px; }
#screen-home .badge-shelf>p { font-size: .68rem!important; text-align: center; }

@media (min-width:600px) and (max-width:1020px) {
  #screen-home .hero-news { display: block; }
  #screen-home .home-progress-panel .player-row { grid-template-columns: 88px minmax(0,1fr); padding: 12px 14px; }
  #screen-home .home-progress-panel .avatar-big { width: 80px; height: 80px; border-radius: 50%; }
  #screen-home .home-player-head { align-items: center; flex-direction: row; }
  #screen-home #home-subjects-section #subject-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  #screen-home #home-subjects-section .subject-btn.home-subject-card { min-height: 178px; padding: 0 5px 8px; }
  #screen-home .home-subject-art { width: calc(100% + 10px); height: 118px; margin: 0 -5px 2px; }
  #screen-home #home-subjects-section .subject-btn.home-subject-card .home-card-title { font-size: .82rem; }
  #screen-home #home-subjects-section .subject-btn.home-subject-card .count-pill { padding: 2px 5px; font-size: .57rem; }
  #screen-home #tools-row.wl-tools-priority { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #screen-home .home-explore-grid { grid-template-columns: 2.35fr 1fr 1fr 1fr; }
  #screen-home>.home-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home .home-revision-card { grid-template-columns: auto minmax(0,1fr) auto; }
  #screen-home .home-revision-card button { grid-column: auto; width: auto; }
  #screen-home #home-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:599px) {
  #screen-home .hero { min-height: 225px; margin-bottom: 104px; padding: 48px 10px 15px; }
  #screen-home .hero h1::after { font-size: 2.45rem; }
  #screen-home .hero-news { display: block; font-size: .7rem; }
  #screen-home #home-stats { bottom: -90px; grid-template-columns: repeat(2,minmax(0,1fr)); width: 94%; }
  #screen-home #home-stats .wl-stat:nth-child(2) { border-right: 0; }
  #screen-home .home-progress-panel .player-row { grid-template-columns: 68px minmax(0,1fr); padding: 10px; }
  #screen-home .home-progress-panel .avatar-big { width: 64px; height: 64px; }
  #screen-home .home-player-head { align-items: flex-start; }
  #screen-home>.home-action-grid { grid-template-columns: 1fr; }
  #screen-home .home-revision-card { grid-template-columns: auto minmax(0,1fr) auto; }
  #screen-home .home-revision-card button { grid-column: auto; width: auto; }
  #screen-home #home-subjects-section #subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home #home-subjects-section .subject-btn.home-subject-card { min-height: 190px; }
  #screen-home .home-subject-art { height: 128px; }
  #screen-home #tools-row.wl-tools-priority { grid-template-columns: 1fr; }
  #screen-home .home-explore-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-home .badge-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* =====================================================================
   Subject hubs — approved shelf layout, isolated from the Home screen.
   The existing lesson buttons, lock checks and launch actions are reused.
   ===================================================================== */
.app.qb-subject-app {
  max-width: 1480px;
  padding-inline: 10px;
}
#screen-home.screen.active.qb-subject-mode {
  width: 100%;
  max-width: none;
}
#screen-home.qb-subject-mode > .hero,
#screen-home.qb-subject-mode > .home-progress-panel,
#screen-home.qb-subject-mode > .home-action-grid,
#screen-home.qb-subject-mode > #quest-row,
#screen-home.qb-subject-mode > .home-study-section,
#screen-home.qb-subject-mode > #extras-row,
#screen-home.qb-subject-mode > .home-explore-section,
#screen-home.qb-subject-mode > .badge-shelf,
#screen-home.qb-subject-mode > p {
  display: none !important;
}
#screen-home.qb-subject-mode > #home-subjects-section,
#screen-home.qb-subject-mode:has(#subjects-head[hidden]) > #home-subjects-section {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#screen-home.qb-subject-mode #subject-grid.qb-subject-hub-grid,
#screen-home.qb-subject-mode:has(#subjects-head[hidden]) #subject-grid.qb-subject-hub-grid {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.qb-subject-hub {
  --qb-subject-accent: #3177c9;
  --qb-subject-dark: #1e5192;
  --qb-subject-soft: #e7f1ff;
  min-width: 0;
  display: grid;
  grid-template-columns: 232px minmax(0,1fr) 322px;
  align-items: start;
  overflow: clip;
  border: 1px solid #d8c9aa;
  border-radius: 22px;
  color: #243747;
  background: rgba(255,253,247,.92);
  box-shadow: 0 18px 46px rgba(30,45,61,.14);
  font-family: Nunito, "Avenir Next", Avenir, system-ui, sans-serif;
}
.qb-subject-hub button,
.qb-subject-hub select,
.qb-subject-hub input { font: inherit; }

.qb-subject-rail {
  position: sticky;
  top: 92px;
  height: calc(100vh - 112px - var(--wl-tabbar-h,80px));
  min-height: 480px;
  padding: 18px 12px 24px;
  overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(circle at 18% 10%, rgba(75,134,148,.35), transparent 21rem),
    linear-gradient(180deg,#173d49,#102b34);
  border-right: 3px solid #b58a42;
}
.qb-subject-rail-head {
  padding: 0 7px 13px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.qb-subject-rail-list { display: grid; gap: 7px; margin-top: 12px; }
.qb-rail-subject {
  width: 100%;
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: 39px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #edf5f6;
  background: rgba(255,255,255,.06);
  text-align: left;
  cursor: pointer;
}
.qb-rail-subject:hover { background: rgba(255,255,255,.13); }
.qb-rail-subject[aria-current="page"] {
  color: #fff;
  background: var(--qb-subject-accent);
  border-color: rgba(255,255,255,.58);
  box-shadow: 0 4px 0 var(--qb-subject-dark),0 9px 18px rgba(0,0,0,.2);
}
.qb-rail-subject img {
  width: 39px;
  height: 39px;
  display: block;
  object-fit: contain;
  border-radius: 9px;
  background: #fff7df;
}
.qb-rail-subject strong,
.qb-rail-subject small { display: block; }
.qb-rail-subject strong { font-size: .78rem; line-height: 1.05; }
.qb-rail-subject small { margin-top: 3px; color: inherit; opacity: .72; font-size: .58rem; }
.qb-rail-subject > span:last-child { opacity: .6; font-size: 1rem; }

.qb-subject-main {
  min-width: 0;
  padding: 20px clamp(14px,2vw,30px) 54px;
}
.qb-mobile-subject-switch,
.qb-subject-shelf-trigger { display: none; }

.qb-subject-hero {
  min-width: 0;
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(250px,310px);
  align-items: center;
  gap: clamp(18px,2.6vw,38px);
  padding: clamp(20px,2.6vw,34px);
  overflow: hidden;
  border: 3px solid #7e5b2d;
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% 15%, color-mix(in srgb,var(--qb-subject-accent) 58%,transparent), transparent 24rem),
    linear-gradient(135deg,#173f52,#0d2935);
  box-shadow: 0 12px 30px rgba(30,45,61,.15),inset 0 0 0 2px rgba(245,205,116,.45);
}
.qb-subject-hero-copy { min-width: 0; color: #fff; }
.qb-subject-back {
  min-height: 38px;
  margin: 0 0 34px;
  padding: 7px 12px;
  border: 1px solid rgba(246,214,147,.72);
  border-radius: 999px;
  color: #f6d693;
  background: rgba(8,34,44,.34);
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-subject-kicker {
  display: block;
  margin-bottom: 5px;
  color: #ffd879;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.qb-subject-hero h1 {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: Georgia,serif;
  font-size: clamp(2.2rem,4.2vw,4.15rem);
  line-height: .98;
  text-shadow: 0 4px 12px rgba(0,0,0,.42);
}
.qb-subject-hero-copy > p {
  max-width: 520px;
  margin: 12px 0 20px;
  color: #edf5f5;
  font-size: clamp(.82rem,1.25vw,1rem);
  line-height: 1.45;
}
.qb-subject-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: #d9e6e8;
  font-size: .7rem;
}
.qb-subject-progress-count {
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}
.qb-subject-progress {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.26);
}
.qb-subject-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ffd164;
}
.qb-subject-art {
  min-width: 0;
  width: min(310px,100%);
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 5px solid #f4d895;
  border-radius: 21px;
  background: #fff7dd;
  box-shadow: 0 10px 0 rgba(5,24,31,.25),0 18px 34px rgba(0,0,0,.24);
}
.qb-subject-art img {
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  object-fit: contain;
  background: var(--qb-subject-soft);
}
.qb-subject-art figcaption {
  padding: 7px 9px 8px;
  color: #6a4c1d;
  background: #fff8e4;
  border-top: 1px solid #e9cf93;
  font-size: .62rem;
  font-weight: 900;
  text-align: center;
}

.qb-subject-level {
  position: relative;
  z-index: 3;
  width: calc(100% - 42px);
  min-height: 78px;
  display: grid;
  grid-template-columns: 145px minmax(0,1fr);
  align-items: center;
  gap: 16px;
  margin: -17px auto 18px;
  padding: 12px 16px;
  border: 1px solid #e3d9c4;
  border-radius: 17px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 25px rgba(39,51,63,.13);
}
.qb-subject-level > div:first-child > span,
.qb-subject-level > div:first-child strong { display: block; }
.qb-subject-level > div:first-child > span {
  color: var(--qb-subject-dark);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qb-subject-level > div:first-child strong { margin-top: 2px; font-size: .86rem; }
.qb-subject-level-tabs {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 5px;
  overflow: visible;
  padding: 4px 1px;
}
.qb-subject-level-tabs button,
.qb-shelf-tier button {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #d8cdb8;
  border-radius: 999px;
  color: #58646c;
  background: #fff;
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-subject-level-tabs button {
  width: 100%;
  min-width: 0;
}
.qb-subject-level-tabs button[aria-pressed="true"],
.qb-shelf-tier button[aria-pressed="true"] {
  color: #fff;
  background: var(--qb-subject-accent);
  border-color: var(--qb-subject-accent);
}

.qb-subject-missions { margin-bottom: 20px; }
.qb-english-destinations {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 36%,#e3d9c4);
  border-radius: 18px;
  background: linear-gradient(145deg,var(--qb-subject-soft),rgba(255,255,255,.94) 70%);
  box-shadow: 0 4px 0 rgba(78,65,44,.05);
}
.qb-english-destination-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.qb-english-destination {
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e3d9c4;
  border-radius: 15px;
  color: #243747;
  background: #fffdf7;
  text-align: left;
  cursor: pointer;
}
.qb-english-destination:hover,
.qb-english-destination:focus-visible { border-color: var(--qb-subject-accent); transform: translateY(-1px); }
.qb-english-destination:focus-visible { outline: 3px solid color-mix(in srgb,var(--qb-subject-accent) 34%,transparent); outline-offset: 2px; }
.qb-english-destination-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  grid-row: 1/3;
  border-radius: 13px;
  background: var(--qb-subject-soft);
  font-size: 1.55rem;
}
.qb-english-destination strong,
.qb-english-destination small { display: block; }
.qb-english-destination strong { font-size: .88rem; line-height: 1.12; }
.qb-english-destination small { margin-top: 4px; color: #65727b; font-size: .64rem; line-height: 1.25; }
.qb-english-destination b {
  grid-column: 2;
  color: var(--qb-subject-dark);
  font-size: .62rem;
  font-weight: 950;
}
.qb-subject-next {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 38%,#e3d9c4);
  border-radius: 17px;
  background: linear-gradient(135deg,var(--qb-subject-soft),#fff 72%);
  box-shadow: 0 4px 0 rgba(59,52,40,.05);
}
.qb-mission-mark,
.qb-quick-mark,
.qb-unit-mark,
.qb-shelf-index {
  display: grid;
  place-items: center;
  color: var(--qb-subject-dark);
  background: var(--qb-subject-soft);
  font-family: Georgia,serif;
  font-weight: 950;
  letter-spacing: .03em;
}
.qb-mission-mark {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  font-size: .77rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--qb-subject-accent) 28%,#fff);
}
.qb-subject-next > div { min-width: 0; }
.qb-subject-next > div > span {
  display: block;
  color: var(--qb-subject-dark);
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qb-subject-next h2 { margin: 2px 0 3px; font-size: 1.05rem; line-height: 1.1; }
.qb-subject-next p { margin: 0; color: #69757e; font-size: .69rem; line-height: 1.28; }
.qb-subject-next > button {
  min-height: 42px;
  padding: 8px 13px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--qb-subject-accent);
  box-shadow: 0 4px 0 var(--qb-subject-dark);
  font-size: .73rem;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}
.qb-subject-next > button:disabled { opacity: .5; cursor: default; }
.qb-subject-quick-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: 9px;
}
.qb-subject-quick {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid #e3d9c4;
  border-radius: 15px;
  color: #243747;
  background: #fffdf7;
  text-align: left;
  cursor: pointer;
}
.qb-quick-mark { width: 42px; height: 42px; border-radius: 11px; font-size: .64rem; }
.qb-subject-quick strong,
.qb-subject-quick small { display: block; }
.qb-subject-quick strong { font-size: .76rem; line-height: 1.08; }
.qb-subject-quick small { margin-top: 3px; color: #6d7881; font-size: .59rem; line-height: 1.22; }
.qb-subject-quick > span:last-child { color: var(--qb-subject-dark); font-size: .58rem; font-weight: 950; }

.qb-subject-units {
  padding: 19px;
  border: 1px solid #e3d9c4;
  border-radius: 20px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 5px 0 rgba(78,65,44,.05);
}
.qb-subject-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7ddc9;
}
.qb-subject-section-head > div > span {
  display: block;
  color: var(--qb-subject-dark);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qb-subject-section-head h2 { margin: 1px 0 0; font-family: Georgia,serif; font-size: 1.48rem; }
.qb-subject-section-head > strong {
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--qb-subject-dark);
  background: var(--qb-subject-soft);
  font-size: .65rem;
}
.qb-subject-unit-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
  margin-top: 15px;
}
.qb-subject-unit {
  min-width: 0;
  min-height: 142px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 4px 10px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 25%,#e3d9c4);
  border-radius: 15px;
  color: #243747;
  background: linear-gradient(145deg,#fff,color-mix(in srgb,var(--qb-subject-soft) 56%,#fff));
  box-shadow: 0 4px 0 rgba(62,57,46,.07);
  text-align: left;
  cursor: pointer;
}
.qb-subject-unit[aria-current="true"] {
  border-color: var(--qb-subject-accent);
  box-shadow: 0 0 0 2px var(--qb-subject-soft),0 5px 0 rgba(62,57,46,.08);
}
.qb-subject-unit.is-unavailable { opacity: .58; }
.qb-unit-mark {
  grid-row: 1/4;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 30%,#fff);
  border-radius: 13px;
  background: #fff;
  font-size: .75rem;
}
.qb-subject-unit > strong { align-self: end; font-size: .84rem; line-height: 1.12; }
.qb-subject-unit > small { color: #6d7881; font-size: .62rem; line-height: 1.2; }
.qb-unit-foot {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(108,103,89,.12);
}
.qb-unit-foot > i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddd8cd;
}
.qb-unit-foot > i > i { display: block; width: 0; height: 100%; background: var(--qb-subject-accent); }
.qb-unit-foot b { color: var(--qb-subject-dark); font-size: .59rem; }

.qb-subject-lesson-shelf {
  position: sticky;
  top: 92px;
  height: calc(100vh - 112px - var(--wl-tabbar-h,80px));
  min-height: 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0,var(--qb-subject-soft),transparent 19rem),
    #faf7ef;
  border-left: 1px solid #d9caa9;
  box-shadow: -10px 0 28px rgba(42,47,50,.08);
}
.qb-shelf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 15px 13px;
  border-bottom: 1px solid #e3d9c4;
}
.qb-shelf-head > div > span {
  display: block;
  color: var(--qb-subject-dark);
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.qb-shelf-head h2 { margin: 2px 0 3px; font-family: Georgia,serif; font-size: 1.22rem; line-height: 1.08; }
.qb-shelf-head p { margin: 0; color: #6d7881; font-size: .64rem; }
.qb-shelf-close {
  display: none;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid #d8cdb8;
  border-radius: 999px;
  color: var(--qb-subject-dark);
  background: #fff;
  font-size: .62rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-shelf-tools { padding: 11px 15px; border-bottom: 1px solid #e3d9c4; }
.qb-shelf-tools label > span {
  display: block;
  margin-bottom: 5px;
  color: #6d7881;
  font-size: .59rem;
  font-weight: 900;
}
.qb-shelf-tools input {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid #d8cdb8;
  border-radius: 10px;
  color: #243747;
  background: rgba(255,255,255,.95);
  outline: none;
}
.qb-shelf-tools input:focus { border-color: var(--qb-subject-accent); box-shadow: 0 0 0 3px var(--qb-subject-soft); }
.qb-shelf-tier { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.qb-shelf-special { flex: 1 1 100% !important; }
.qb-subject-lesson-list {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 11px 12px 16px;
  overflow-y: auto;
}
.qb-shelf-lesson {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid #e2d8c4;
  border-radius: 12px;
  color: #243747;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 0 rgba(61,55,43,.04);
  text-align: left;
  cursor: pointer;
}
.qb-shelf-lesson[hidden] { display: none; }
.qb-shelf-lesson:hover { border-color: var(--qb-subject-accent); transform: translateY(-1px); }
.qb-shelf-lesson.is-done { border-color: #91cda8; }
.qb-shelf-lesson.is-locked { opacity: .68; }
.qb-shelf-index { width: 34px; height: 34px; border-radius: 9px; font-size: .61rem; }
.qb-shelf-copy { min-width: 0; }
.qb-shelf-copy strong,
.qb-shelf-copy small { display: block; }
.qb-shelf-copy strong { font-size: .69rem; line-height: 1.12; overflow-wrap: anywhere; }
.qb-shelf-copy strong i {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 5px;
  color: var(--qb-subject-dark);
  background: var(--qb-subject-soft);
  font-size: .52rem;
  font-style: normal;
  text-transform: uppercase;
}
.qb-shelf-copy small {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #6d7881;
  font-size: .56rem;
  line-height: 1.18;
}
.qb-shelf-status {
  padding: 3px 5px;
  border-radius: 7px;
  color: var(--qb-subject-dark);
  background: var(--qb-subject-soft);
  font-size: .52rem;
  font-weight: 950;
}
.qb-shelf-empty { padding: 24px 12px; color: #6d7881; font-size: .7rem; text-align: center; }
.qb-subject-shelf-backdrop { display: none; }

@media (max-width:1320px) and (min-width:1161px) {
  .qb-subject-hub { grid-template-columns: 210px minmax(0,1fr) 292px; }
  .qb-subject-main { padding-inline: 15px; }
  .qb-subject-hero { grid-template-columns: minmax(0,1fr) minmax(220px,260px); gap: 16px; }
  .qb-subject-art { width: min(260px,100%); }
  .qb-subject-hero h1 { font-size: clamp(2rem,3.7vw,3.4rem); }
  .qb-subject-next { grid-template-columns: 56px minmax(0,1fr); }
  .qb-subject-next > button { grid-column: 1/-1; width: 100%; }
  .qb-subject-unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:1160px) {
  .app.qb-subject-app { max-width: 1180px; }
  .qb-subject-hub { grid-template-columns: 215px minmax(0,1fr); overflow: visible; }
  .qb-subject-main { padding-inline: clamp(12px,2.6vw,28px); }
  .qb-subject-shelf-trigger {
    width: 100%;
    min-height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 11px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 35%,#e3d9c4);
    border-radius: 14px;
    color: #243747;
    background: linear-gradient(120deg,#fff,var(--qb-subject-soft));
    text-align: left;
    cursor: pointer;
  }
  .qb-subject-shelf-trigger small,
  .qb-subject-shelf-trigger strong { display: block; }
  .qb-subject-shelf-trigger small {
    color: var(--qb-subject-dark);
    font-size: .57rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .qb-subject-shelf-trigger strong { margin-top: 2px; font-size: .78rem; }
  .qb-subject-shelf-trigger > span:last-child {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--qb-subject-accent);
    font-size: .6rem;
    font-weight: 900;
  }
  .qb-subject-lesson-shelf {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 260;
    width: min(390px,calc(100% - 20px));
    height: calc(100dvh - var(--wl-tabbar-h, 76px));   /* clear the tab bar — see the base rule */
    min-height: 0;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .22s ease,visibility .22s ease;
  }
  .qb-shelf-close { display: inline-flex; align-items: center; }
  .qb-subject-shelf-backdrop {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: block;
    border: 0;
    background: rgba(8,30,39,.58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease,visibility .22s ease;
  }
  body.qb-subject-shelf-open { overflow: hidden; }
  body.qb-subject-shelf-open .qb-subject-lesson-shelf { visibility: visible; transform: translateX(0); }
  body.qb-subject-shelf-open .qb-subject-shelf-backdrop { opacity: 1; visibility: visible; }
}

@media (max-width:820px) {
  .qb-subject-hero { grid-template-columns: minmax(0,1fr); }
  .qb-subject-art { width: min(360px,100%); justify-self: center; }
  .qb-subject-back { margin-bottom: 22px; }
  .qb-subject-unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qb-english-destination-grid { grid-template-columns: 1fr; }
}

@media (max-width:700px) {
  .app.qb-subject-app { padding-inline: 6px; }
  .qb-subject-hub { display: block; border-radius: 17px; }
  .qb-subject-rail { display: none; }
  .qb-subject-main { padding: 10px 8px 44px; }
  .qb-mobile-subject-switch {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #fff;
    background: #1c5366;
  }
  .qb-mobile-subject-switch > span { font-size: .61rem; font-weight: 900; }
  .qb-mobile-subject-switch select {
    width: 100%;
    min-height: 38px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 9px;
    color: #173947;
    background: #fff;
    font-size: .72rem;
    font-weight: 900;
  }
  .qb-subject-hero { min-height: 0; gap: 15px; padding: 14px; border-width: 2px; border-radius: 18px; }
  .qb-subject-hero h1 { font-size: clamp(2rem,11vw,3rem); }
  .qb-subject-hero-copy > p { margin: 8px 0 14px; font-size: .77rem; }
  .qb-subject-progress-copy { font-size: .62rem; }
  .qb-subject-art { max-width: 390px; }
  .qb-subject-level {
    width: calc(100% - 14px);
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: -12px;
    padding: 10px 12px;
  }
  .qb-subject-level > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
  .qb-subject-next { grid-template-columns: 50px minmax(0,1fr); padding: 12px; }
  .qb-mission-mark { width: 50px; height: 50px; }
  .qb-subject-next > button { grid-column: 1/-1; width: 100%; }
  .qb-subject-quick-grid { grid-template-columns: 1fr; }
  .qb-subject-units { padding: 14px 10px; border-radius: 16px; }
  .qb-subject-unit-grid { grid-template-columns: 1fr; gap: 8px; }
  .qb-subject-unit { min-height: 118px; }
}

@media (max-width:390px) {
  .qb-mobile-subject-switch { grid-template-columns: 1fr; gap: 3px; }
  .qb-subject-progress-copy { display: block; }
  .qb-subject-progress-copy > span { display: block; margin-top: 2px; }
  .qb-subject-section-head > strong { display: none; }
  .qb-subject-lesson-shelf { width: 100%; }
}

@media (prefers-reduced-motion:reduce) {
  .qb-subject-hub *,
  .qb-subject-hub *::before,
  .qb-subject-hub *::after { transition: none !important; }
}

/* Compact subject journey — approved full-width layout.
   This deliberately changes presentation only: the existing subject, level,
   lesson, lock and reporting actions remain wired by game-core.js. */
.qb-subject-hub {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
}
.qb-subject-rail {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: visible;
  border-right: 0;
  border-bottom: 3px solid #b58a42;
}
.qb-subject-rail-head {
  padding: 0 2px 9px;
  border-bottom: 0;
  font-size: .64rem;
  letter-spacing: .11em;
}
.qb-subject-rail-list {
  grid-template-columns: repeat(9,minmax(0,1fr));
  gap: 8px;
  margin-top: 0;
}
.qb-rail-subject {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 58px minmax(2.2em,auto);
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 7px 5px;
  border-radius: 13px;
  text-align: center;
}
.qb-rail-subject img {
  width: 68px;
  height: 58px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
.qb-rail-subject > strong {
  align-self: center;
  min-width: 0;
  max-width: 100%;
  font-size: .69rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.qb-subject-main { padding: 14px clamp(12px,2vw,26px) 48px; }
.qb-mobile-subject-switch { display: none; }
.qb-subject-shelf-trigger {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 35%,#e3d9c4);
  border-radius: 13px;
  color: #243747;
  background: linear-gradient(120deg,#fff,var(--qb-subject-soft));
  text-align: left;
  cursor: pointer;
}
.qb-subject-shelf-trigger small,
.qb-subject-shelf-trigger strong { display: block; }
.qb-subject-shelf-trigger small {
  color: var(--qb-subject-dark);
  font-size: .54rem;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.qb-subject-shelf-trigger strong { margin-top: 1px; font-size: .74rem; }
.qb-subject-shelf-trigger > span:last-child {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--qb-subject-accent);
  font-size: .59rem;
  font-weight: 900;
}
.qb-subject-hero {
  min-height: 0;
  grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr);
  gap: clamp(14px,2vw,28px);
  padding: clamp(16px,2vw,24px);
  border-radius: 21px;
}
.qb-subject-back { margin-bottom: 12px; }
.qb-subject-hero h1 { font-size: clamp(2.1rem,4vw,3.65rem); overflow-wrap: normal; }
.qb-subject-hero-copy > p { margin: 8px 0 14px; }
.qb-subject-art {
  width: min(390px,100%);
  border-width: 4px;
  border-radius: 17px;
}
.qb-subject-art img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
}
.qb-subject-art figcaption { display: none; }
.qb-subject-level {
  width: 100%;
  min-height: 66px;
  grid-template-columns: 142px minmax(0,1fr);
  gap: 12px;
  margin: 10px 0;
  padding: 9px 13px;
  border-radius: 15px;
}
.qb-subject-level-tabs { gap: 4px; padding: 1px; }
.qb-subject-level-tabs button { min-height: 30px; padding: 4px 5px; }
.qb-subject-missions {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(340px,.75fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}
.qb-subject-next {
  height: 100%;
  grid-template-columns: 72px minmax(0,1fr) auto;
  padding: 11px 13px;
}
.qb-mission-art,
.qb-quick-art,
.qb-unit-art {
  display: block;
  object-fit: contain;
  background: #fff8e8;
}
.qb-mission-art {
  width: 72px;
  height: 72px;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 28%,#fff);
  border-radius: 14px;
}
.qb-subject-quick-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 0;
}
.qb-subject-quick {
  min-height: 76px;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 8px;
  padding: 9px;
}
.qb-subject-quick:last-child:nth-child(odd) { grid-column: 1/-1; }
.qb-quick-art { width: 52px; height: 52px; border-radius: 11px; }
.qb-subject-quick > span:last-child { display: none; }
.qb-subject-units { padding: 14px; border-radius: 17px; }
.qb-subject-section-head { padding-bottom: 9px; }
.qb-subject-unit-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  margin-top: 11px;
}
.qb-subject-unit {
  min-height: 112px;
  grid-template-columns: 82px minmax(0,1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 3px 10px;
  padding: 10px;
}
.qb-unit-art {
  grid-row: 1/5;
  width: 82px;
  height: 82px;
  align-self: center;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 24%,#fff);
  border-radius: 13px;
}
/* Emoji stand-in for a unit that has no illustration yet — same 82px box as .qb-unit-art. */
.qb-unit-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
}
.qb-subject-unit > strong,
.qb-subject-unit > small,
.qb-unit-foot { grid-column: 2; min-width: 0; }
.qb-subject-unit > strong {
  align-self: end;
  font-size: .76rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.qb-subject-unit > small { font-size: .59rem; overflow-wrap: anywhere; }
.qb-unit-foot { padding-top: 6px; }
.qb-unit-foot b { white-space: nowrap; }
.qb-subject-lesson-shelf {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 260;
  width: min(420px,100%);
  /* Stop ABOVE the bottom tab bar. This drawer is top:0 + full height, but the tab bar is
     fixed over the bottom of the viewport, so a plain 100dvh buried the last ~76-120px of
     the lesson list underneath it — unreachable even scrolled to the end. --wl-tabbar-h is
     kept in sync with the bar's REAL height by wordlab-shell.js, so this tracks the bar
     when it wraps to two or three rows on a phone. */
  height: calc(100dvh - var(--wl-tabbar-h, 76px));
  min-height: 0;
  visibility: hidden;
  transform: translateX(105%);
  transition: transform .22s ease,visibility .22s ease;
}
.qb-shelf-close { display: inline-flex; align-items: center; }
.qb-subject-shelf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: block;
  border: 0;
  background: rgba(8,30,39,.58);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease,visibility .22s ease;
}
body.qb-subject-shelf-open { overflow: hidden; }
body.qb-subject-shelf-open .qb-subject-lesson-shelf { visibility: visible; transform: translateX(0); }
body.qb-subject-shelf-open .qb-subject-shelf-backdrop { opacity: 1; visibility: visible; }

@media (max-width:1180px) {
  .app.qb-subject-app { max-width: 1180px; }
  .qb-subject-rail-list { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .qb-subject-unit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .qb-subject-missions { grid-template-columns: 1fr; }
  .qb-subject-next > button { grid-column: auto; width: auto; }
}

@media (max-width:820px) {
  .qb-subject-hero { grid-template-columns: 1fr; }
  .qb-subject-art { width: min(440px,100%); justify-self: center; }
  .qb-subject-unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .qb-subject-hub { display: block; }
  .qb-subject-rail { display: block; padding: 10px; }
  .qb-subject-rail-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .qb-rail-subject { min-height: 82px; grid-template-rows: 48px minmax(2.2em,auto); }
  .qb-rail-subject img { width: 58px; height: 48px; }
  .qb-rail-subject > strong { font-size: .62rem; }
  .qb-subject-main { padding: 9px 8px 42px; }
  .qb-subject-shelf-trigger { display: flex; }
  .qb-subject-hero { padding: 13px; }
  .qb-subject-back { margin-bottom: 10px; }
  .qb-subject-level { width: 100%; margin: 8px 0; }
  .qb-subject-next { grid-template-columns: 58px minmax(0,1fr); }
  .qb-mission-art { width: 58px; height: 58px; }
  .qb-subject-next > button { grid-column: 1/-1; width: 100%; }
  .qb-subject-quick-grid { grid-template-columns: 1fr; }
  .qb-subject-quick:last-child:nth-child(odd) { grid-column: auto; }
  .qb-subject-units { padding: 11px 9px; }
  .qb-subject-unit-grid { grid-template-columns: 1fr; }
  .qb-subject-unit { min-height: 104px; }
}

@media (max-width:390px) {
  .qb-subject-progress-copy { display: flex; }
  .qb-subject-progress-copy > span { display: inline; margin-top: 0; }
  .qb-subject-progress-count { white-space: normal; }
  .qb-subject-level { grid-template-columns: 1fr; }
  .qb-subject-level-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

/* Subject progress map — matches the shelf design and keeps all real lesson paths. */
#screen-home.qb-subject-mode:not(.active) { display: none !important; }

#screen-map.qb-progress-map-screen {
  --qb-subject-accent: #3177c9;
  --qb-subject-dark: #1e5192;
  --qb-subject-soft: #e7f1ff;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 12px calc(var(--wl-tabbar-h,80px) + 94px);
  color: #243747;
  font-family: Nunito,"Avenir Next",Avenir,system-ui,sans-serif;
}
.qb-map-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(20px,3vw,38px);
  border: 3px solid #7e5b2d;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 87% 12%,color-mix(in srgb,var(--qb-subject-accent) 64%,transparent),transparent 25rem),
    linear-gradient(135deg,#173f52,#0d2935);
  box-shadow: 0 14px 34px rgba(30,45,61,.17),inset 0 0 0 2px rgba(245,205,116,.45);
}
.qb-map-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(30deg,transparent 46%,#f5d98f 47% 48%,transparent 49%),
    linear-gradient(150deg,transparent 46%,#f5d98f 47% 48%,transparent 49%);
  background-size: 70px 40px;
}
.qb-map-back,
.qb-map-hero > * { position: relative; z-index: 1; }
.qb-map-back {
  min-height: 38px;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid rgba(246,214,147,.72);
  border-radius: 999px;
  color: #f6d693;
  background: rgba(8,34,44,.42);
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}
.qb-map-hero-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 210px;
  align-items: center;
  gap: clamp(18px,3vw,38px);
}
.qb-map-hero-layout.is-wide { grid-template-columns: minmax(0,1fr); }
.qb-map-hero-main {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.qb-map-compass {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 3px solid #f1cf82;
  border-radius: 50%;
  background: rgba(5,27,36,.68);
  box-shadow: inset 0 0 0 5px rgba(241,207,130,.16);
}
.qb-map-compass::before,
.qb-map-compass::after,
.qb-map-compass i::before,
.qb-map-compass i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 48px;
  border-radius: 99px;
  background: #f1cf82;
  transform: translate(-50%,-50%);
}
.qb-map-compass::after { transform: translate(-50%,-50%) rotate(90deg); }
.qb-map-compass i::before { height: 34px; transform: translate(-50%,-50%) rotate(45deg); opacity: .55; }
.qb-map-compass i::after { height: 34px; transform: translate(-50%,-50%) rotate(-45deg); opacity: .55; }
.qb-map-kicker {
  display: block;
  margin-bottom: 4px;
  color: #ffd879;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.qb-map-hero h1 {
  margin: 0;
  color: #fff;
  font-family: Georgia,serif;
  font-size: clamp(2rem,4.3vw,4rem);
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.qb-map-hero-main p {
  max-width: 650px;
  margin: 10px 0 0;
  color: #e8f1f2;
  font-size: .9rem;
  line-height: 1.45;
}
.qb-map-subject-art {
  width: 210px;
  margin: 0;
  overflow: hidden;
  justify-self: end;
  border: 4px solid #f1cf82;
  border-radius: 18px;
  background: #fff7dd;
  box-shadow: 0 9px 0 rgba(5,24,31,.24),0 15px 28px rgba(0,0,0,.2);
}
.qb-map-subject-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fffaf0;
}
.qb-map-subject-art figcaption {
  padding: 7px 8px;
  color: #6d4b19;
  background: #fff4d5;
  text-align: center;
  font-size: .61rem;
  font-weight: 900;
}
.qb-map-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(86px,130px)) minmax(190px,1fr);
  align-items: stretch;
  gap: 9px;
  margin-top: 24px;
}
.qb-map-summary > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(5,29,38,.52);
}
.qb-map-summary > div > strong,
.qb-map-summary > div > span { display: block; }
.qb-map-summary > div > strong { color: #fff; font-size: 1.1rem; }
.qb-map-summary > div > span { margin-top: 2px; color: #cbdcdf; font-size: .63rem; font-weight: 800; }
.qb-map-summary .qb-map-summary-progress {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 12px;
}
.qb-map-summary-progress > span {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 99px;
  background: rgba(0,0,0,.28);
}
.qb-map-summary-progress b { display: block; height: 100%; border-radius: inherit; background: #ffd164; }
.qb-map-summary-progress > span { grid-row: 1/-1; }
.qb-map-summary-progress > strong { align-self: end; }
.qb-map-summary-progress > em {
  align-self: start;
  color: #cbdcdf;
  font-size: .6rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.qb-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 13px;
  color: #d9e6e8;
  font-size: .65rem;
  font-weight: 850;
}
.qb-map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.qb-map-legend > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #90a0ad; }
.qb-map-legend .status-not-started::before { background: #d8dee3; }
.qb-map-legend .status-developing::before { background: #78a9e6; }
.qb-map-legend .status-needs-practice::before { background: #f2a342; }
.qb-map-legend .status-achieved::before { background: #56b77c; }
.qb-map-legend .status-secure::before { background: #8872d6; }
.qb-map-legend .is-complete::before { background: transparent; border: 2px solid #ffd164; }
.qb-map-legend .is-locked::before { background: #90a0ad; }
.qb-map-legend-note {
  margin: 8px 0 0;
  color: #bfcfd2;
  font-size: .63rem;
  font-weight: 750;
}

.qb-map-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.qb-map-zone {
  min-width: 0;
  padding: 16px;
  border: 1px solid #ddcfb4;
  border-radius: 18px;
  background: rgba(255,253,247,.97);
  box-shadow: 0 9px 24px rgba(38,54,67,.11);
}
.qb-map-zone-head {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
}
.qb-map-zone-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--qb-subject-accent) 45%,#d5c8ad);
  border-radius: 13px;
  color: var(--qb-subject-dark);
  background: var(--qb-subject-soft);
  font-family: Georgia,serif;
  font-size: .78rem;
  font-weight: 900;
}
.qb-map-zone-head > div > span {
  display: block;
  color: var(--qb-subject-dark);
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.qb-map-zone h2 { margin: 1px 0 0; font-family: Georgia,serif; font-size: 1.18rem; line-height: 1.08; }
.qb-map-zone-head > p { margin: 0; color: #6b7780; font-size: .66rem; white-space: nowrap; }
.qb-map-zone-head > p > strong { color: var(--qb-subject-dark); font-size: .86rem; }
.qb-map-zone-progress {
  height: 7px;
  margin: 12px 0 15px;
  overflow: hidden;
  border-radius: 99px;
  background: #e7e1d5;
}
.qb-map-zone-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--qb-subject-accent); }
.qb-map-track {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(40px,1fr));
  gap: 10px 8px;
  padding: 10px;
  border: 1px solid #e7ddc9;
  border-radius: 14px;
  background:
    radial-gradient(circle,#d4c7ae 1px,transparent 1.5px) 0 50%/12px 12px,
    #faf7f0;
}
.qb-map-stop {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  justify-self: center;
  border: 3px solid #c9bfae;
  border-radius: 50%;
  color: #4d5a64;
  background: #fff;
  box-shadow: 0 3px 0 rgba(39,50,61,.12);
  font-size: .61rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform .14s,box-shadow .14s;
}
.qb-map-stop:hover,
.qb-map-stop:focus-visible { z-index: 2; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(39,50,61,.13); }
.qb-map-stop.progress-not-started { border-color: #aeb8c0; color: #66737d; background: #f2f4f5; }
.qb-map-stop.progress-developing { border-color: #4f83c2; color: #28598f; background: #e5f0ff; }
.qb-map-stop.progress-needs-practice { border-color: #d58220; color: #8b4d09; background: #fff0d8; }
.qb-map-stop.progress-achieved { border-color: #3f9e67; color: #22643e; background: #e4f6ea; }
.qb-map-stop.progress-secure { border-color: #6e5aba; color: #49378f; background: #eeeaff; }
.qb-map-stop.is-complete {
  outline: 3px solid #efc95e;
  outline-offset: 2px;
}
.qb-map-stop.progress-needs-practice::after,
.qb-map-stop.is-teacher-checked::after {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #d58220;
  box-shadow: 0 2px 5px rgba(35,48,58,.22);
  font-size: .62rem;
  font-weight: 950;
}
.qb-map-stop.progress-needs-practice::after { content: "!"; }
.qb-map-stop.is-teacher-checked::after { content: "✓"; background: #4f3da0; }
.qb-map-stop.locked {
  border-color: #bdc7ce;
  color: #83909a;
  background: #edf1f4;
  cursor: not-allowed;
  filter: grayscale(.72);
  opacity: .72;
}
.qb-map-empty {
  grid-column: 1/-1;
  padding: 34px;
  border: 1px solid #ddcfb4;
  border-radius: 18px;
  text-align: center;
  background: #fffdf7;
}
.qb-map-sticky-return {
  position: fixed;
  right: 70px;
  bottom: calc(var(--wl-tabbar-h,80px) + 14px);
  z-index: 42;
  min-height: 46px;
  padding: 9px 18px;
  border: 2px solid #e4c472;
  border-radius: 999px;
  color: #fff8e5;
  background: linear-gradient(135deg,var(--qb-subject-dark),#173f52);
  box-shadow: 0 7px 20px rgba(20,42,54,.28),inset 0 0 0 1px rgba(255,255,255,.15);
  font-size: .76rem;
  font-weight: 950;
  cursor: pointer;
}
.qb-map-sticky-return:hover,
.qb-map-sticky-return:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(20,42,54,.34); }

@media (max-width:800px) {
  .qb-map-hero-layout { grid-template-columns: minmax(0,1fr) 165px; }
  .qb-map-subject-art { width: 165px; }
  .qb-map-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .qb-map-summary .qb-map-summary-progress { grid-column: 1/-1; }
  .qb-map-grid { grid-template-columns: 1fr; }
}
@media (max-width:520px) {
  #screen-map.qb-progress-map-screen { padding-inline: 6px; }
  .qb-map-hero { padding: 16px 13px; border-radius: 18px; }
  .qb-map-hero-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .qb-map-hero-main { grid-template-columns: 56px minmax(0,1fr); gap: 11px; }
  .qb-map-subject-art { width: min(210px,76%); justify-self: center; }
  .qb-map-compass { width: 56px; height: 56px; }
  .qb-map-compass::before,.qb-map-compass::after { height: 36px; }
  .qb-map-compass i::before,.qb-map-compass i::after { height: 26px; }
  .qb-map-hero h1 { font-size: clamp(1.8rem,9vw,2.5rem); }
  .qb-map-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .qb-map-summary > div { padding: 9px 7px; }
  .qb-map-zone { padding: 12px 10px; }
  .qb-map-zone-head { grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px; }
  .qb-map-zone-mark { width: 42px; height: 42px; }
  .qb-map-track { grid-template-columns: repeat(auto-fit,minmax(36px,1fr)); gap: 8px 5px; padding: 8px 5px; }
  .qb-map-stop { width: 36px; height: 36px; border-width: 2px; }
  .qb-map-sticky-return {
    left: 10px;
    right: 64px;
    bottom: calc(var(--wl-tabbar-h,80px) + 8px);
    width: auto;
  }
}

@media (prefers-reduced-motion:reduce) {
  .qb-progress-map-screen *,
  .qb-progress-map-screen *::before,
  .qb-progress-map-screen *::after { transition: none !important; }
}

/* ---------- Redesigned subject lesson shell ----------
   Presentation and return navigation only. All activity renderers, answers,
   scoring, saves and reporting continue to use their existing DOM/actions. */
#screen-lesson.qb-lesson-redesign {
  --qb-lesson-accent:#3177c9;
  --qb-lesson-dark:#1e5192;
  --qb-lesson-soft:#e7f1ff;
  position:relative;
  isolation:isolate;
  margin:12px 0 24px;
  padding:clamp(10px,2vw,22px);
  overflow:hidden;
  border:3px solid #8b7143;
  border-radius:24px;
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--qb-lesson-accent) 60%,transparent),transparent 23rem),
    linear-gradient(145deg,#102f3f,#173f52 50%,#102b3a);
  box-shadow:0 8px 0 rgba(63,47,25,.22),0 18px 42px rgba(26,38,47,.2);
}
#screen-lesson.qb-lesson-redesign::before {
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(250,219,151,.38);
  border-radius:17px;
}
#screen-lesson.qb-lesson-redesign .lesson-shell {
  width:min(100%,1020px);
  margin:0 auto;
  padding:clamp(14px,2.4vw,26px);
  overflow:visible;
  border:2px solid #d6c39e;
  border-top:2px solid #d6c39e;
  border-radius:18px;
  background:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),
    linear-gradient(135deg,#fff9eb,#f4ead6);
  background-size:auto;
  box-shadow:0 7px 0 rgba(61,48,28,.19),0 18px 36px rgba(12,35,46,.22);
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:58px;
  margin:0 0 18px;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--qb-lesson-accent) 42%,#c8b993);
  border-radius:13px;
  color:#263b45;
  text-align:left;
  background:linear-gradient(120deg,#fff,var(--qb-lesson-soft));
  box-shadow:0 4px 0 rgba(52,48,37,.1);
  cursor:pointer;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return:hover,
#screen-lesson.qb-lesson-redesign .qb-lesson-return:focus-visible {
  border-color:var(--qb-lesson-accent);
  transform:translateY(-1px);
  box-shadow:0 5px 0 rgba(52,48,37,.12);
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return-mark {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:2px solid rgba(255,255,255,.68);
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,var(--qb-lesson-accent),var(--qb-lesson-dark));
  box-shadow:0 3px 0 rgba(21,42,54,.2);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.06em;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return small,
#screen-lesson.qb-lesson-redesign .qb-lesson-return strong { display:block; }
#screen-lesson.qb-lesson-redesign .qb-lesson-return small {
  color:var(--qb-lesson-dark);
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return strong {
  margin-top:2px;
  overflow-wrap:anywhere;
  font-family:Georgia,serif;
  font-size:1rem;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-return-action {
  padding:7px 10px;
  border-radius:9px;
  color:#fff;
  background:var(--qb-lesson-dark);
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
}
#screen-lesson.qb-lesson-redesign .lesson-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:16px;
  margin:0;
  padding:0 2px 15px;
  border-bottom:2px solid color-mix(in srgb,var(--qb-lesson-accent) 22%,#d9ccb3);
}
#screen-lesson.qb-lesson-redesign .lesson-head h2 {
  display:block;
  min-width:0;
  margin:0;
  color:#263b45;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-kicker,
#screen-lesson.qb-lesson-redesign .qb-lesson-name,
#screen-lesson.qb-lesson-redesign .qb-lesson-meta { display:block; }
#screen-lesson.qb-lesson-redesign .qb-lesson-kicker {
  margin-bottom:4px;
  color:var(--qb-lesson-dark);
  font-family:inherit;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-name {
  overflow-wrap:anywhere;
  font-family:Georgia,serif;
  font-size:clamp(1.85rem,4.2vw,3.2rem);
  line-height:1.02;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-meta {
  margin-top:9px;
  font-family:inherit;
}
#screen-lesson.qb-lesson-redesign .level-chip {
  display:inline-block;
  margin:0 7px 3px 0;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--qb-lesson-accent) 34%,#d9cdb5);
  border-radius:7px;
  color:var(--qb-lesson-dark);
  background:var(--qb-lesson-soft);
  font-size:.68rem;
  font-weight:900;
}
#screen-lesson.qb-lesson-redesign .step-dots {
  justify-content:flex-end;
  max-width:min(38vw,340px);
  padding-bottom:4px;
}
#screen-lesson.qb-lesson-redesign .qb-lesson-step-count {
  flex:1 0 100%;
  color:#5e675f;
  text-align:right;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
#screen-lesson.qb-lesson-redesign .step-dots .dot {
  width:clamp(14px,2vw,22px);
  height:7px;
  border:0;
  border-radius:999px;
  background:#d8cfbd;
}
#screen-lesson.qb-lesson-redesign .step-dots .dot.done { background:var(--qb-lesson-dark); }
#screen-lesson.qb-lesson-redesign .step-dots .dot.now {
  background:#e5ae3f;
  box-shadow:0 0 0 2px #fff5d2;
  transform:scaleX(1.12);
}
#screen-lesson.qb-lesson-redesign #lesson-codes {
  margin:12px 0 14px !important;
  color:#30434b !important;
  font-size:.85rem !important;
}
#screen-lesson.qb-lesson-redesign .intention-box {
  display:grid;
  grid-template-columns:minmax(135px,.35fr) minmax(0,1fr);
  gap:5px 16px;
  margin:0;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--qb-lesson-accent) 30%,#d8c9ac);
  border-left:6px solid var(--qb-lesson-accent);
  border-radius:11px;
  background:linear-gradient(110deg,var(--qb-lesson-soft),#fff 74%);
}
#screen-lesson.qb-lesson-redesign .intention-box > strong {
  color:var(--qb-lesson-dark);
  font-size:.72rem;
  letter-spacing:.035em;
  text-transform:uppercase;
}
#screen-lesson.qb-lesson-redesign .intention-box > span { line-height:1.45; }
#screen-lesson.qb-lesson-redesign .intention-box ul {
  grid-column:2;
  margin:0;
  padding-left:18px;
}
#screen-lesson.qb-lesson-redesign .step-area {
  min-height:260px;
  padding:clamp(13px,2.3vw,23px);
  border:1px solid #d9ccb4;
  border-radius:14px;
  background:#fffdf8;
  box-shadow:inset 0 0 0 4px rgba(245,236,216,.68);
}
#screen-lesson.qb-lesson-redesign .step-card { color:#263b45; }
#screen-lesson.qb-lesson-redesign .step-card > .step-emoji { display:none; }
#screen-lesson.qb-lesson-redesign .step-card h3 {
  margin:0 0 10px;
  color:var(--qb-lesson-dark);
  font-family:Georgia,serif;
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1.12;
}
#screen-lesson.qb-lesson-redesign .explain-body {
  color:#2d424c;
  line-height:1.58;
}
#screen-lesson.qb-lesson-redesign .step-read-btn,
#screen-lesson.qb-lesson-redesign .step-read-stop {
  border-color:color-mix(in srgb,var(--qb-lesson-accent) 43%,#d7cab1);
  border-radius:9px;
  color:var(--qb-lesson-dark);
  background:var(--qb-lesson-soft);
  box-shadow:0 3px 0 rgba(51,48,40,.12);
}
#screen-lesson.qb-lesson-redesign .choice-btn {
  border-color:#d9ceb9;
  border-radius:11px;
  color:#263b45;
  background:#fff;
}
#screen-lesson.qb-lesson-redesign .choice-btn:hover {
  border-color:var(--qb-lesson-accent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--qb-lesson-accent) 24%,transparent);
}
#screen-lesson.qb-lesson-redesign .lesson-controls {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:12px 0 0;
  padding:11px;
  border:1px solid #d8cbb2;
  border-radius:13px;
  background:#f5eddd;
}
#screen-lesson.qb-lesson-redesign .lesson-controls .go-btn,
#screen-lesson.qb-lesson-redesign .lesson-controls .exit-home-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--qb-lesson-accent) 45%,#bdb096);
  border-radius:9px;
  box-shadow:0 3px 0 rgba(54,50,40,.14);
  font-size:.78rem;
  font-weight:900;
  line-height:1.15;
}
#screen-lesson.qb-lesson-redesign .lesson-controls .go-btn:not(.ghost) {
  color:#fff;
  background:var(--qb-lesson-accent);
  border-color:var(--qb-lesson-dark);
}
#screen-lesson.qb-lesson-redesign .lesson-controls .go-btn.ghost,
#screen-lesson.qb-lesson-redesign .lesson-controls .exit-home-btn {
  color:var(--qb-lesson-dark);
  background:#fffdf8;
}
#screen-lesson.qb-lesson-redesign .lesson-controls .go-btn:disabled {
  color:#687680;
  border-color:#b9c0c3;
  background:#d9dfe1;
  box-shadow:0 3px 0 #bfc7ca;
}
#screen-lesson.qb-lesson-redesign .explain-body img,
#screen-lesson.qb-lesson-redesign .choice-img-btn img,
#screen-lesson.qb-lesson-redesign .step-card > img {
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

@media (max-width:760px) {
  #screen-lesson.qb-lesson-redesign {
    margin:6px 0 18px;
    padding:7px;
    border-width:2px;
    border-radius:17px;
  }
  #screen-lesson.qb-lesson-redesign::before { inset:4px; border-radius:12px; }
  #screen-lesson.qb-lesson-redesign .lesson-shell {
    padding:11px;
    border-radius:13px;
  }
  #screen-lesson.qb-lesson-redesign .qb-lesson-return {
    grid-template-columns:42px minmax(0,1fr);
    min-height:52px;
    margin-bottom:13px;
    padding:6px 8px;
  }
  #screen-lesson.qb-lesson-redesign .qb-lesson-return-mark { width:40px; height:40px; }
  #screen-lesson.qb-lesson-redesign .qb-lesson-return-action { display:none; }
  #screen-lesson.qb-lesson-redesign .lesson-head {
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding-bottom:12px;
  }
  #screen-lesson.qb-lesson-redesign .step-dots {
    justify-content:flex-start;
    max-width:100%;
  }
  #screen-lesson.qb-lesson-redesign .qb-lesson-step-count { text-align:left; }
  #screen-lesson.qb-lesson-redesign .intention-box {
    grid-template-columns:minmax(0,1fr);
    gap:5px;
  }
  #screen-lesson.qb-lesson-redesign .intention-box ul { grid-column:1; }
  #screen-lesson.qb-lesson-redesign .step-area { min-height:230px; padding:13px 11px; }
  #screen-lesson.qb-lesson-redesign .lesson-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #screen-lesson.qb-lesson-redesign .lesson-controls > :nth-child(2) { grid-column:2; }
}

@media (max-width:390px) {
  #screen-lesson.qb-lesson-redesign .lesson-shell { padding:9px; }
  #screen-lesson.qb-lesson-redesign .qb-lesson-name { font-size:1.75rem; }
  #screen-lesson.qb-lesson-redesign .step-dots { gap:4px; }
  #screen-lesson.qb-lesson-redesign .step-dots .dot { width:12px; }
  #screen-lesson.qb-lesson-redesign .lesson-controls .go-btn,
  #screen-lesson.qb-lesson-redesign .lesson-controls .exit-home-btn { font-size:.72rem; }
}

@media (prefers-reduced-motion:reduce) {
  #screen-lesson.qb-lesson-redesign *,
  #screen-lesson.qb-lesson-redesign *::before,
  #screen-lesson.qb-lesson-redesign *::after { transition:none !important; }
}

/* =====================================================================
   Student-readable typography floor
   Keep explanatory copy at a genuine reading size across every main screen.
   The first declaration is the broad-browser fallback; max() preserves a
   larger inherited size in modern Safari, Chromium and Firefox.
   ===================================================================== */
body { font-size: 20px; }
.screen :is(p, li, td, th, label, summary) {
  font-size: 18px !important;
  font-size: max(18px, 1em) !important;
  line-height: 1.5;
}
.screen small {
  font-size: 16px !important;
  font-size: max(16px, .85em) !important;
  line-height: 1.4;
}
.screen button strong {
  font-size: 17px !important;
  font-size: max(17px, 1em) !important;
}
.screen :is(input, select, textarea) {
  font-size: 18px !important;
  font-size: max(18px, 1em) !important;
}
#screen-home :is(.pw-tab, .home-card-title) { font-size: 18px !important; }
#screen-home #pathway-row > strong,
#screen-home .badge-shelf > p,
#screen-home .badge-shelf > p strong { font-size: 18px !important; line-height: 1.5; }
#screen-home .home-revision-card button,
#screen-home .wl-home-diary-open { font-size: 16px !important; }
#screen-home :is(.count-pill, .home-action-kicker, .home-section-kicker,
  .home-section-note, .wl-stat-lbl, .home-role-pill, .home-aurars-pill,
  .study-tools-count, .badge-item) {
  font-size: 16px !important;
  line-height: 1.35;
}
.qb-subject-hub button,
.qb-progress-map-screen button { font-size: 16px !important; line-height: 1.35; }
.qb-subject-hub strong,
.qb-progress-map-screen strong { font-size: 18px !important; line-height: 1.35; }
.qb-subject-hub small,
.qb-progress-map-screen small { font-size: 16px !important; }
#screen-category .topic-btn { font-size: 18px !important; }
#screen-lesson.qb-lesson-redesign .lesson-controls .go-btn,
#screen-lesson.qb-lesson-redesign .lesson-controls .exit-home-btn { font-size: 18px !important; }

@media (max-width: 640px) {
  body { font-size: 18px; }
}

/* =====================================================================
   Full-browser page shell
   Every route owns the complete browser width. Individual reading cards
   keep their internal padding, but the outer page no longer sits inside a
   second centred gutter. Using 100% instead of 100vw avoids Safari's
   scrollbar-width overflow and remains safe with mobile browser chrome.
   ===================================================================== */
.app {
  width: 100%;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.screen {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The lesson screen already supplies its own responsive outer frame, so its
   paper panel can use all of that space without widening text past the card. */
#screen-lesson.qb-lesson-redesign .lesson-shell {
  width: 100%;
  max-width: none;
}

/* =====================================================================
   Maths lessons — reading measure cap (2026-07-30)

   Long LINES, not the typeface, were the readability problem. Measured on
   the running Y5 fractions lesson at a 1280px viewport, lesson prose ran to
   137 characters per line, against the 45-75 convention for extended
   reading. Cause: the full-browser page shell directly above deliberately
   removes the centred gutter so every route owns the whole browser width,
   and lesson prose inherited that width along with everything else.

   This caps PROSE ONLY. Figures, diagrams, tables and answer buttons keep
   the full card width - exactly as a printed textbook lets a figure break
   out of the text column. That is why the cap is applied to paragraphs and
   lists individually, and to .explain-body only when it holds no figure:
   capping the wrapper unconditionally would shrink every existing maths
   diagram to the text measure.

   FONTS ARE UNTOUCHED. Comic Neue stays everywhere in the app, per the
   standing decision in homescreen.md ("Do not change assets/game.css -
   children keep Comic Neue everywhere in the app"). That note guards the
   typeface; this rule changes line length only, which helps every year
   level including Foundation.

   Scoped to [data-subject="maths"], which is the only subject hook the
   engine puts on the DOM. There is no strand-level hook, so this covers all
   maths strands rather than Number alone; narrowing it to Number would need
   an engine change to emit the lesson cat.
   ===================================================================== */
#screen-lesson[data-subject="maths"] .step-card .explain-body:not(:has(svg, table, img, figure, canvas)) {
  max-width: 30em;
}
#screen-lesson[data-subject="maths"] .step-card .explain-body > p,
#screen-lesson[data-subject="maths"] .step-card .explain-body > ol,
#screen-lesson[data-subject="maths"] .step-card .explain-body > ul,
#screen-lesson[data-subject="maths"] .step-card > p {
  max-width: 30em;
}

/* =====================================================================
   Maths focus mode — dyscalculia-first presentation (2026-08-09)

   The lesson engine still runs the original authored steps, answers,
   scoring and reporting. This layer removes navigation competition and
   gives every step the same visible See → Say → Do → Check language.
   ===================================================================== */
#screen-lesson[data-subject="maths"] .qb-lesson-return { display:none; }
#screen-lesson[data-subject="maths"] .qb-math-lesson-nav {
  position:sticky;
  top:6px;
  z-index:24;
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:8px;
  margin:0 0 12px;
  padding:8px;
  border:1px solid #c7d4d7;
  border-radius:12px;
  background:rgba(255,253,248,.96);
  box-shadow:0 4px 12px rgba(35,62,72,.14);
  backdrop-filter:blur(8px);
}
#screen-lesson[data-subject="maths"] .qb-math-lesson-nav button {
  min-width:0;
  min-height:44px;
  padding:8px 11px;
  border:2px solid #245e70;
  border-radius:9px;
  font:inherit;
  font-size:.82rem;
  font-weight:950;
  line-height:1.15;
  cursor:pointer;
}
#screen-lesson[data-subject="maths"] .qb-math-nav-home {
  color:#245e70;
  background:#fffdf8;
}
#screen-lesson[data-subject="maths"] .qb-math-nav-lessons {
  color:#fff;
  background:#245e70;
}
#screen-lesson[data-subject="maths"] .qb-math-lesson-nav button:hover,
#screen-lesson[data-subject="maths"] .qb-math-lesson-nav button:focus-visible {
  transform:translateY(-1px);
  box-shadow:0 3px 0 rgba(23,61,73,.22);
}
#screen-lesson[data-subject="maths"] .lesson-shell { padding-top:12px; }
#screen-lesson[data-subject="maths"] .lesson-head {
  align-items:center;
  padding-bottom:10px;
}
#screen-lesson[data-subject="maths"] .qb-lesson-kicker { letter-spacing:.08em; }
#screen-lesson[data-subject="maths"] .qb-lesson-name {
  font-family:inherit;
  font-size:clamp(1.45rem,3vw,2.2rem);
  line-height:1.12;
}
#screen-lesson[data-subject="maths"] .step-dots .dot { display:none; }
#screen-lesson[data-subject="maths"] .step-dots {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  max-width:none;
}
#screen-lesson[data-subject="maths"] .qb-math-phase {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:5px 12px;
  border-radius:999px;
  color:#fff;
  background:#245e70;
  font-size:.78rem;
  font-weight:950;
}
#screen-lesson[data-subject="maths"] #lesson-codes { margin:8px 0!important; }
#screen-lesson.qb-lesson-redesign[data-subject="maths"] .qb-math-goal {
  display:block!important;
  grid-template-columns:none!important;
  padding:0;
  border:1px solid #b7cbd1;
  border-left:5px solid #245e70;
  background:#f8fbfc;
}
#screen-lesson.qb-lesson-redesign[data-subject="maths"] .qb-math-goal > summary {
  display:flex;
  width:100%;
  box-sizing:border-box;
  gap:12px;
  align-items:flex-start;
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
}
#screen-lesson[data-subject="maths"] .qb-math-goal > summary::-webkit-details-marker { display:none; }
#screen-lesson[data-subject="maths"] .qb-math-goal > summary strong {
  flex:0 0 auto;
  color:#245e70;
  text-transform:uppercase;
}
#screen-lesson.qb-lesson-redesign[data-subject="maths"] .qb-math-goal > summary > span {
  flex:1 1 auto;
  min-width:0;
  width:auto;
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-height:1.4;
}
#screen-lesson[data-subject="maths"] .qb-math-goal-more {
  padding:0 14px 12px;
  border-top:1px solid #dbe6e9;
}
#screen-lesson[data-subject="maths"] .qb-math-goal-more > strong { display:block; margin-top:10px; }
#screen-lesson[data-subject="maths"] .qb-math-goal-more ul { margin:6px 0 0; }
#screen-lesson[data-subject="maths"] .step-area {
  position:relative;
  scroll-margin-top:8px;
  max-width:860px;
  min-height:0;
  margin:0 auto;
  padding-top:64px;
  border:2px solid #b9cbd0;
  box-shadow:none;
}
#screen-lesson[data-subject="maths"] .step-area::before {
  content:"1 · See it";
  position:absolute;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:5px 13px;
  border-radius:999px;
  color:#fff;
  background:#245e70;
  font-size:.86rem;
  font-weight:950;
}
#screen-lesson[data-subject="maths"][data-math-phase="2"] .step-area::before { content:"2 · Say it"; }
#screen-lesson[data-subject="maths"][data-math-phase="3"] .step-area::before { content:"3 · Do it"; }
#screen-lesson[data-subject="maths"][data-math-phase="4"] .step-area::before { content:"4 · Check it"; }
#screen-lesson[data-subject="maths"] .step-card h3 {
  font-family:inherit;
  font-size:clamp(1.35rem,2.5vw,1.8rem);
}
#screen-lesson[data-subject="maths"] .qb-math-lesson-poster {
  overflow:hidden;
  margin:8px 0 0;
  border:3px solid #245e70;
  border-radius:16px;
  background:#fff;
}
#screen-lesson[data-subject="maths"] .qb-math-poster-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  color:#fff;
  background:#245e70;
}
#screen-lesson[data-subject="maths"] .qb-math-poster-head strong {
  font-size:.92rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
#screen-lesson[data-subject="maths"] .qb-math-poster-head span { font-size:.82rem; font-weight:800; }
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body {
  display:grid;
  gap:12px;
  max-width:none;
  padding:16px;
}
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body > p,
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body > ul,
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body > ol,
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body > table,
#screen-lesson[data-subject="maths"] .step-card .qb-math-lesson-poster .explain-body > figure {
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
  padding:13px 15px;
  border-left:5px solid #8db1bd;
  border-radius:10px;
  background:#f7fbfc;
  line-height:1.55;
}
#screen-lesson[data-subject="maths"] .qb-math-lesson-poster .explain-body strong,
#screen-lesson[data-subject="maths"] .qb-math-lesson-poster .explain-body .hl {
  color:#173d49;
  font-weight:950;
}
#screen-lesson[data-subject="maths"] .lesson-controls {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:860px;
  margin:12px auto 0;
  padding:9px;
  background:#eef3f4;
}
#screen-lesson[data-subject="maths"] .qb-math-options {
  grid-column:1 / -1;
  border:1px solid #c5d2d6;
  border-radius:9px;
  background:#fff;
}
#screen-lesson[data-subject="maths"] .qb-math-options > summary {
  padding:10px 12px;
  cursor:pointer;
  color:#435b65;
  font-size:.82rem;
  font-weight:900;
  text-align:center;
}
#screen-lesson[data-subject="maths"] .qb-math-options-body {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 9px 9px;
}
#screen-lesson[data-subject="maths"] .qb-math-options-body > * { width:100%; }

@media (max-width:760px) {
  #screen-lesson[data-subject="maths"] .qb-math-lesson-nav { top:4px; }
  #screen-lesson[data-subject="maths"] .qb-math-lesson-nav button { font-size:.76rem; }
  #screen-lesson[data-subject="maths"] .lesson-head { grid-template-columns:1fr; }
  #screen-lesson[data-subject="maths"] .step-dots { align-items:flex-start; }
  #screen-lesson[data-subject="maths"] .qb-lesson-step-count { text-align:left; }
  #screen-lesson[data-subject="maths"] .step-area { padding:60px 11px 13px; }
  #screen-lesson[data-subject="maths"] .qb-math-goal > summary { flex-direction:column; gap:3px; }
  #screen-lesson[data-subject="maths"] .qb-math-poster-head { align-items:flex-start; flex-direction:column; gap:3px; }
  #screen-lesson[data-subject="maths"] .qb-math-lesson-poster .explain-body { padding:11px; }
}

@media (prefers-reduced-motion:reduce) {
  #screen-lesson[data-subject="maths"] *,
  #screen-lesson[data-subject="maths"] *::before,
  #screen-lesson[data-subject="maths"] *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Shared Year 6 cream micro-skill language. The catalogue uses these rules once
   instead of repeating a full <style> block on every one of its 1,960 screens. */
#screen-lesson:has(.qb-micro-v2) .wt-problem { color:#263b45; border-color:#c8b993; background:#f7efdf; }
#screen-lesson:has(.qb-micro-v2) .wt-line { color:#263b45; border-color:#d9ccb4; border-left-color:#2a7d78; background:#fffdf8; }
#screen-lesson:has(.qb-micro-v2) .wt-math { color:#263b45; }
#screen-lesson:has(.qb-micro-v2) .wt-why { color:#53656d; }
#screen-lesson:has(.qb-micro-v2) .wt-ask-q { color:#245e70; }
#screen-lesson:has(.qb-micro-v2) :is(.choice-btn,.wt-opt) { color:#263b45; border-color:#cbbd9f; background:#fffdf8; }
#screen-lesson:has(.qb-micro-v2) :is(.choice-btn,.wt-opt):hover { border-color:#2a7d78; background:#eef8f5; }
#screen-lesson:has(.qb-micro-v2) :is(input,.fill-input) { color:#263b45; border-color:#9db8b3; background:#fff; }
.qb-micro-v2 { color:#263b45; }
.qb-micro-v2 .qbms-kicker { margin:0 0 7px; color:#245e70; font-size:.72rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.qb-micro-v2 .qbms-lead { max-width:44rem; margin:0 0 16px; color:#53656d; line-height:1.5; }
.qb-micro-v2 .qbms-board { margin:12px 0; padding:clamp(13px,2.4vw,18px); border:1px solid #c8b993; border-radius:15px; background:linear-gradient(rgba(47,111,106,.045) 1px,transparent 1px),#f7efdf; background-size:100% 32px; overflow:auto; }
.qb-micro-v2 .qbms-math { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-height:58px; margin:8px 0; padding:11px; border:1px solid #d6c39e; border-radius:12px; background:#fffdf8; font-size:clamp(1.15rem,4.6vw,1.8rem); font-weight:950; font-variant-numeric:tabular-nums; }
.qb-micro-v2 .qbms-proof { display:grid; gap:8px; margin-top:7px; padding:10px 12px; border:1px solid #b8ccc7; border-radius:10px; color:#314b53; background:#eef8f5; }
.qb-micro-v2 .qbms-proof p { margin:0; }
.qb-micro-v2 .qbms-proof .qbms-math { min-height:44px; margin:0; font-size:clamp(1rem,3.8vw,1.35rem); }
.qb-micro-v2 .qbms-rule { margin:12px 0; padding:11px 13px; border:1px solid #c7a65b; border-radius:12px; color:#674a12; background:#fff4d8; line-height:1.45; }
.qb-micro-v2 .qbms-warning { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; margin:12px 0 0; padding:11px 13px; border:1px solid #d58f97; border-radius:12px; color:#672934; background:#fde9e7; }
.qb-micro-v2 .qbms-warning strong { color:#7d2e38; }
.qb-micro-v2 .qbms-recipe { display:grid; gap:9px; counter-reset:recipe; }
.qb-micro-v2 .qbms-recipe div { position:relative; padding:12px 12px 12px 52px; border:1px solid #d6c39e; border-radius:11px; background:#fffdf8; }
.qb-micro-v2 .qbms-recipe div::before { counter-increment:recipe; content:counter(recipe); position:absolute; left:12px; top:9px; display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:#fff; background:#2a7d78; font-weight:950; }
.qb-micro-v2 .qbms-practice-model { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:20px 10px; color:#243651; font-size:clamp(1rem,2.2vw,1.25rem); font-weight:800; }
.qb-micro-v2 .qbms-practice-model span { min-width:88px; padding:12px 16px; border:2px solid #c8d8ec; border-radius:16px; background:#fffdf8; text-align:center; box-shadow:0 3px 0 #e7ddc6; }
.qb-micro-v2 .qbms-practice-model b { color:#2b8983; font-size:1.4em; }

@media (max-width:560px) {
  .qb-micro-v2 .qbms-warning { grid-template-columns:1fr; gap:4px; }
}

/* ── "I'm stuck" help ladder (2026-08-18, wordlab-skipflow.js) ──────────────
   The panel a stuck student gets INSTEAD of a one-tap skip: rung 1 the step's
   own hint, rung 2 the worked example from earlier in the lesson. Styled apart
   from .feedback on purpose — .feedback means "your answer was judged", and
   asking for help is not a wrong answer. */
.wl-help-panel {
  border-radius: 14px;
  padding: 4px 16px 12px;
  margin: 12px 0;
  background: #eef4ff;
  border: 2px solid #7d9fd6;
  animation: screenIn 0.25s;
}
.wl-help-panel .wl-help-rung + .wl-help-rung { border-top: 1px dashed #a9bfe4; margin-top: 10px; padding-top: 4px; }
.wl-help-panel h4 { margin: 12px 0 6px; font-size: 1rem; color: #26345d; }
.wl-help-panel .wl-help-body { font-weight: 500; line-height: 1.5; }
.wl-help-panel .wl-help-body img,
.wl-help-panel .wl-help-body svg { max-width: 100%; height: auto; }
.wl-help-panel .wl-help-src { margin: 0 0 8px; font-size: 0.82rem; color: #5a6691; font-weight: 600; }
.wl-help-panel .wl-help-tail { margin: 10px 0 2px; font-weight: 700; color: #26345d; }
.go-btn.wl-help-btn { border-color: #7d9fd6; }
/* Year 6–7 maths: formula + mathematical model for pages that would otherwise
   contain only words. The lesson data carries empty structural markers so this
   visual support is never duplicated into Student Records or Teacher Reports. */
.y6-math-support{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(250px,1.2fr);gap:12px;align-items:stretch;margin:14px 0 2px;padding:12px;border:2px solid #8fa9c7;border-radius:16px;background:#f7fbff;color:#18324d}
.y6ms-formula,.y6ms-model{display:flex;min-height:128px;border:2px solid #c5d4e6;border-radius:13px;background:#fff;position:relative;overflow:hidden}
.y6ms-formula{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 12px 12px;font:800 clamp(1.05rem,2.4vw,1.45rem)/1.35 ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
.y6ms-formula::before{content:attr(data-label);position:absolute;left:10px;top:8px;font:900 .72rem/1 system-ui,sans-serif;letter-spacing:.07em;color:#486684}
.y6ms-formula::after{content:attr(data-formula)}
.y6ms-model{align-items:center;justify-content:center;gap:7px;padding:24px 16px 16px}
.y6-math-support figcaption{grid-column:1/-1;text-align:center;font-weight:750;color:#405b75;font-size:.9rem}
.y6-math-support figcaption::after{content:attr(data-caption)}
.y6ms-model i{box-sizing:border-box;display:block;font-style:normal}
.y6ms-flow .y6ms-model i,.y6ms-decision .y6ms-model i,.y6ms-balance .y6ms-model i,.y6ms-timeline .y6ms-model i,.y6ms-conversion .y6ms-model i,.y6ms-finance .y6ms-model i{display:none}
.y6ms-flow .y6ms-model::before{content:"INPUT  →  RULE  →  OUTPUT";font:900 clamp(1rem,2.4vw,1.35rem)/1.4 system-ui,sans-serif;word-spacing:.35em;color:#1e5c96}
.y6ms-decision .y6ms-model::before{content:"START  →  TEST  ↙ YES   NO ↘";white-space:pre-wrap;text-align:center;font:900 1.2rem/1.7 system-ui,sans-serif;color:#1e5c96}
.y6ms-balance .y6ms-model::before{content:"LEFT  ⚖  RIGHT";font:900 clamp(1.2rem,3vw,1.7rem)/1.3 system-ui,sans-serif;color:#1e5c96}
.y6ms-timeline .y6ms-model::before{content:"START  ├──── + DURATION ────┤  FINISH";font:850 clamp(.9rem,2vw,1.15rem)/1.5 system-ui,sans-serif;color:#1e5c96;text-align:center}
.y6ms-conversion .y6ms-model::before{content:"km  ⇄  m  ⇄  cm  ⇄  mm";font:900 clamp(1rem,2.5vw,1.45rem)/1.4 system-ui,sans-serif;color:#1e5c96;word-spacing:.45em}
.y6ms-finance .y6ms-model::before{content:"STARTING AMOUNT  ±  CHANGE  =  RESULT";font:900 clamp(.88rem,2vw,1.15rem)/1.45 system-ui,sans-serif;color:#1e5c96;text-align:center}
.y6ms-ratio .y6ms-model{gap:8px;padding:46px 20px 18px}
.y6ms-ratio .y6ms-model::before{content:"3 PARTS  :  2 PARTS";position:absolute;left:12px;right:12px;top:16px;text-align:center;font:900 .88rem system-ui,sans-serif;color:#486684}
.y6ms-ratio .y6ms-model i{width:28px;height:28px;border-radius:50%;background:#3d7fc2;border:2px solid #245f99}
.y6ms-ratio .y6ms-model i:nth-child(n+4):nth-child(-n+5){background:#f2b84b;border-color:#b77b11}.y6ms-ratio .y6ms-model i:nth-child(n+6){display:none}
.y6ms-circle .y6ms-model::before{content:"";width:110px;height:110px;border:5px solid #2d6fb3;border-radius:50%;background:radial-gradient(circle at center,#18324d 0 4px,transparent 5px)}
.y6ms-circle .y6ms-model::after{content:"d = 2r";position:absolute;left:calc(50% - 62px);top:calc(50% - 2px);width:124px;border-top:4px solid #f0a43a;text-align:center;padding-top:7px;font:900 .85rem system-ui,sans-serif;color:#7b520f}
.y6ms-circle .y6ms-model i{display:none}
.y6ms-array .y6ms-model,.y6ms-square .y6ms-model{display:grid;grid-template-columns:repeat(4,30px);grid-auto-rows:30px;gap:4px;align-content:center}
.y6ms-array .y6ms-model i,.y6ms-square .y6ms-model i{border:2px solid #2d6fb3;background:#dbeafe;border-radius:5px}
.y6ms-square .y6ms-model{grid-template-columns:repeat(3,34px);grid-auto-rows:34px}
.y6ms-square .y6ms-model i:nth-child(n+10){display:none}
.y6ms-fraction .y6ms-model{gap:0;padding-left:28px;padding-right:28px}
.y6ms-fraction .y6ms-model i{width:42px;height:70px;border:2px solid #245f99;border-right-width:0;background:#fff4d8}
.y6ms-fraction .y6ms-model i:nth-child(-n+3){background:#6fa8e5}
.y6ms-fraction .y6ms-model i:nth-child(4){border-right-width:2px}
.y6ms-fraction .y6ms-model i:nth-child(n+5){display:none}
.y6ms-placevalue .y6ms-model{display:grid;grid-template-columns:repeat(5,minmax(38px,1fr));gap:3px;padding:32px 10px 12px}
.y6ms-placevalue .y6ms-model::before{content:"H        T        O   ·   t        h";position:absolute;top:10px;left:10px;right:10px;text-align:center;white-space:pre;font:900 .83rem system-ui,sans-serif;color:#486684}
.y6ms-placevalue .y6ms-model i{height:74px;border:2px solid #4f7dac;background:#eef6ff;border-radius:7px}
.y6ms-placevalue .y6ms-model i:nth-child(n+6){display:none}
.y6ms-numberline .y6ms-model{padding:58px 18px 20px;gap:0}
.y6ms-numberline .y6ms-model::before{content:"−3     −2     −1      0      1      2      3";position:absolute;left:12px;right:12px;top:75px;text-align:center;font:800 .9rem system-ui,sans-serif;color:#18324d}
.y6ms-numberline .y6ms-model::after{content:"";position:absolute;left:24px;right:24px;top:62px;border-top:4px solid #2d6fb3}
.y6ms-numberline .y6ms-model i{display:none}
.y6ms-angle .y6ms-model::before{content:"∟ 90°        ─ 180°        ○ 360°";font:900 clamp(1rem,2.3vw,1.35rem)/1.4 system-ui,sans-serif;color:#1e5c96;word-spacing:.35em}
.y6ms-angle .y6ms-model i{display:none}
.y6ms-triangle .y6ms-model{display:grid;grid-template-columns:repeat(5,24px);grid-auto-rows:24px;align-content:center;justify-content:center;gap:5px}
.y6ms-triangle .y6ms-model i{width:20px;height:20px;border-radius:50%;background:#4b8ed2}
.y6ms-triangle .y6ms-model i:nth-child(1){grid-column:3}.y6ms-triangle .y6ms-model i:nth-child(2){grid-column:2}.y6ms-triangle .y6ms-model i:nth-child(4){grid-column:1}
.y6ms-triangle .y6ms-model i:nth-child(n+11){display:none}
.y6ms-probability .y6ms-model{gap:0;padding:52px 22px 22px}
.y6ms-probability .y6ms-model::before{content:"0 IMPOSSIBLE                         CERTAIN 1";position:absolute;top:24px;left:16px;right:16px;text-align:center;font:850 .72rem system-ui,sans-serif;color:#486684}
.y6ms-probability .y6ms-model i{height:36px;width:38px;border:1px solid #fff;background:#dbeafe}
.y6ms-probability .y6ms-model i:nth-child(n+4):nth-child(-n+8){background:#75a9df}.y6ms-probability .y6ms-model i:nth-child(n+9){background:#2d6fb3}.y6ms-probability .y6ms-model i:nth-child(n+11){display:none}
.y6ms-coordinate .y6ms-model{background-image:linear-gradient(#dce8f5 1px,transparent 1px),linear-gradient(90deg,#dce8f5 1px,transparent 1px);background-size:25px 25px}
.y6ms-coordinate .y6ms-model::before{content:"● (x, y)        →        ● (x+a, y+b)";font:900 1rem system-ui,sans-serif;color:#1e5c96}
.y6ms-coordinate .y6ms-model i{display:none}
.y6ms-solid .y6ms-model::before{content:"▱   +   ╱ SLICE   →   ▰ CROSS-SECTION";font:900 clamp(.9rem,2vw,1.18rem)/1.5 system-ui,sans-serif;color:#1e5c96;text-align:center}
.y6ms-solid .y6ms-model i{display:none}
.y6ms-transform .y6ms-model{background-image:linear-gradient(#dce8f5 1px,transparent 1px),linear-gradient(90deg,#dce8f5 1px,transparent 1px);background-size:25px 25px}
.y6ms-transform .y6ms-model::before{content:"△  ───→  △′";font:900 1.55rem system-ui,sans-serif;color:#1e5c96;word-spacing:.6em}
.y6ms-transform .y6ms-model i{display:none}
.y6ms-tessellation .y6ms-model{display:grid;grid-template-columns:repeat(4,34px);gap:2px;align-content:center}
.y6ms-tessellation .y6ms-model i{width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:30px solid #4b8ed2}
.y6ms-tessellation .y6ms-model i:nth-child(even){transform:rotate(180deg)}
.y6ms-statistics .y6ms-model{align-items:flex-end;padding:28px 24px 20px}
.y6ms-statistics .y6ms-model i{width:25px;background:#4b8ed2;border-radius:5px 5px 0 0}
.y6ms-statistics .y6ms-model i:nth-child(3n+1){height:35px}.y6ms-statistics .y6ms-model i:nth-child(3n+2){height:76px}.y6ms-statistics .y6ms-model i:nth-child(3n){height:52px}
.y6ms-partwhole .y6ms-model{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:28px}
.y6ms-partwhole .y6ms-model i{border:2px solid #2d6fb3;background:#dbeafe;border-radius:6px}
.y6ms-partwhole .y6ms-model i:nth-child(3){grid-column:1/-1;background:#fff4d8}.y6ms-partwhole .y6ms-model i:nth-child(n+4){display:none}
@media(max-width:680px){.y6-math-support{grid-template-columns:1fr}.y6-math-support figcaption{grid-column:1}.y6ms-formula,.y6ms-model{min-height:112px}}

/* ═══════════════════════════════════════════════════════════════════════════
   📓 Teacher Reports — DESIGN-ONLY layer (owner mandate 2026-09-02:
   "remove the trouble spots, family grid, show the answers better in design.
   DO NOT CHANGE THE CODE AT ALL.")
   Pure stylesheet: assets/wordlab-teacher-report.js is byte-identical, every
   list is still computed and every seam still answers. Rules are scoped to
   #screen-teacher and out-rank the module's injected <style> by specificity
   (two ids), never by load order. Nothing here hides a control a grown-up can
   act on — only the two Overview sections the owner does not want, and the
   one sentence that described them.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 1 — Overview: the Family grid card and the Trouble-spots strips are gone. */
#screen-teacher .wt-diag[data-fold="familygrid"],
#screen-teacher .wt-wk-spots { display: none !important; }
/* the Overview's one-line intro named "where someone keeps getting stuck" */
#screen-teacher .tr-main-inner > .wt-h-row:first-child + .wt-intro[style] { display: none !important; }

/* 2 — Answers: one question = one white card; the child's answer is the
   biggest thing on it, the expected answer sits right under it, and the
   marking controls step back to a quiet footer row. */
#screen-teacher #tr-app .wt-qrow {
  background: #fff; border: 1px solid var(--tr-line, rgba(0,0,0,.08)); border-left-width: 5px;
  border-radius: 0 12px 12px 0; padding: 12px 14px 10px; margin: 10px 0;
}
#screen-teacher #tr-app .wt-qrow.ok, #screen-teacher #tr-app .wt-qrow.ok2 { border-left-color: var(--tr-ok, #166534); }
#screen-teacher #tr-app .wt-qrow.bad { border-left-color: var(--tr-need, #B03060); background: #fff; }
#screen-teacher #tr-app .wt-qrow.skip, #screen-teacher #tr-app .wt-qrow.pend { border-left-color: var(--tr-grow, #E08804); background: #fff; }
#screen-teacher #tr-app .wt-qrow.deep { border-left-color: var(--tr-accent, #247550); }

/* question line: number badge + status mark + the question in one row */
#screen-teacher #tr-app .wt-qrow .wt-q-h {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px !important;
  font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--tr-ink, #1D1D1F) !important; margin: 0 0 8px;
}
#screen-teacher #tr-app .wt-qrow .wt-q-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: var(--tr-paper, #F5F5F7); color: var(--tr-muted, #6E6E73); font-size: 13px; font-weight: 700; line-height: 1;
}
#screen-teacher #tr-app .wt-qrow .wt-q-i { display: inline !important; font-size: 17px; margin: 0; }
#screen-teacher #tr-app .wt-qrow .wt-q-rev { font-size: 12px; align-self: center; }

/* the child's answer — label on its own small line, the answer big underneath */
#screen-teacher #tr-app .wt-qrow .wt-q-ans,
#screen-teacher #tr-app .wt-qrow .wt-q-corr,
#screen-teacher #tr-app .wt-qrow .wt-q-model {
  display: block !important; margin: 6px 0 0 !important; padding: 8px 12px; border-radius: 10px;
  font-size: 18px !important; line-height: 1.45 !important; color: var(--tr-ink, #1D1D1F) !important;
}
#screen-teacher #tr-app .wt-qrow .wt-q-ans > b,
#screen-teacher #tr-app .wt-qrow .wt-q-corr > b,
#screen-teacher #tr-app .wt-qrow .wt-q-model > b {
  display: block !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tr-muted, #6E6E73); margin: 0 0 2px;
}
#screen-teacher #tr-app .wt-qrow .wt-q-ans::before { content: none !important; }
#screen-teacher #tr-app .wt-qrow .wt-q-ans { background: var(--tr-paper, #F5F5F7); }
#screen-teacher #tr-app .wt-qrow.ok .wt-q-ans, #screen-teacher #tr-app .wt-qrow.ok2 .wt-q-ans { background: var(--tr-ok-soft, #EAF2EC); }
#screen-teacher #tr-app .wt-qrow.bad .wt-q-ans, #screen-teacher #tr-app .wt-qrow.skip .wt-q-ans { background: var(--tr-need-soft, #F9E6ED); }
#screen-teacher #tr-app .wt-qrow .wt-q-corr { background: var(--tr-grow-soft, #FBF2E0); color: var(--tr-grow-ink, #8F5900) !important; }
#screen-teacher #tr-app .wt-qrow .wt-q-corr > b { color: var(--tr-grow-ink, #8F5900); }
#screen-teacher #tr-app .wt-qrow .wt-q-corr::before { content: none !important; }
#screen-teacher #tr-app .wt-qrow .wt-q-model { background: var(--tr-accent-soft, #D8E9DF); }
#screen-teacher #tr-app .wt-qrow .wt-q-model > b { color: var(--tr-accent, #247550); }
#screen-teacher #tr-app .wt-qrow .wt-q-miss { font-size: 13px; margin-top: 4px; }

/* several attempts: the one that counts reads like the single-answer block;
   the earlier tries are a quiet list under it */
#screen-teacher #tr-app .wt-qrow .wt-attempt-primary { margin: 6px 0 0; padding: 0; border: 0; background: transparent; }
#screen-teacher #tr-app .wt-qrow .wt-attempt-meta { font-size: 12px; color: var(--tr-muted, #6E6E73); margin: 0 0 -2px 12px; }
#screen-teacher #tr-app .wt-qrow .wt-attempts { margin: 8px 0 0; border: 1px solid var(--tr-line, rgba(0,0,0,.08)); border-radius: 10px; background: #fff; }
#screen-teacher #tr-app .wt-qrow .wt-attempts-h { font-size: 12px; font-weight: 700; color: var(--tr-muted, #6E6E73); padding: 6px 12px 0; }
#screen-teacher #tr-app .wt-qrow .wt-attempts .wt-q-ans { font-size: 15px !important; background: transparent; padding: 2px 12px 8px; margin: 0 !important; }
#screen-teacher #tr-app .wt-qrow .wt-attempts .wt-q-ans > b { display: inline !important; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; margin: 0 4px 0 0; }
#screen-teacher #tr-app .wt-qrow .wt-attempts .wt-attempt-meta { margin: 4px 0 0 12px; }

/* marking row: a quiet footer, controls kept exactly as they are */
#screen-teacher #tr-app .wt-qrow .wt-deepmark {
  margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--tr-line, rgba(0,0,0,.08));
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#screen-teacher #tr-app .wt-qrow .wt-dm-state { font-size: 13px; color: var(--tr-muted, #6E6E73); }
#screen-teacher #tr-app .wt-qrow .wt-dm-state.bad { color: var(--tr-need, #B03060); }
#screen-teacher #tr-app .wt-qrow .wt-dm-state.ok { color: var(--tr-ok, #166534); }
#screen-teacher #tr-app .wt-qrow .wt-deepmark .wt-mk { font-size: 13px; padding: 5px 10px; }
#screen-teacher #tr-app .wt-qrow .wt-q-review { margin-top: 6px; }

/* "mark all correct" bar: button first, the explanation small */
#screen-teacher #tr-app .wt-qbulk { padding: 8px 10px; margin: 6px 0 10px; }
#screen-teacher #tr-app .wt-qbulk > span { font-size: 12px; color: var(--tr-ok, #166534); opacity: .85; }

/* phone: keep the blocks readable, drop the side padding */
@media (max-width: 759px) {
  #screen-teacher #tr-app .wt-qrow { padding: 10px 10px 8px; border-radius: 0 10px 10px 0; }
  #screen-teacher #tr-app .wt-qrow .wt-q-h { font-size: 16px !important; }
  #screen-teacher #tr-app .wt-qrow .wt-q-ans,
  #screen-teacher #tr-app .wt-qrow .wt-q-corr,
  #screen-teacher #tr-app .wt-qrow .wt-q-model { font-size: 17px !important; padding: 7px 10px; }

  /* An opened phone lesson is one compact answer document. Keep every piece
     of visible copy on the same 13px scale—titles distinguish themselves by
     weight, not size—while the controls retain their existing 44px targets. */
  #screen-teacher #tr-app.tr-focus .tr-main .tr-main-inner,
  #screen-teacher #tr-app.tr-focus .tr-main .tr-main-inner * {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #screen-teacher #tr-app.tr-focus .tr-main .tr-main-inner *::before,
  #screen-teacher #tr-app.tr-focus .tr-main .tr-main-inner *::after {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}
/* ═══ end Teacher Reports design-only layer ═══ */