/* ============================================================
   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;
}
.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: screenIn 0.35s ease; }
.screen.active { display: block; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: 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); }
.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; }
.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; }

/* 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; }
@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: 110px;
  padding: 10px;
}
.sort-cat.over { background: #e3f0ff; border-style: solid; }
.sort-cat h4 { margin: 0 0 8px; text-align: center; color: var(--blue-dark); }
.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: 8px 16px;
  font-weight: 700;
  font-size: 1rem;
  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); }
.sort-item.placed { box-shadow: none; font-size: 0.92rem; 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; }

/* 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; }

.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-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); }
.forms-table td strong { 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.85rem;
  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 */
.tts-globalbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 901;
  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: 901;
  bottom: calc(80px + 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); }
.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-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; } }
.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 ---------- */
.topic-btn.locked { opacity: 0.55; filter: grayscale(0.6); border-top-color: #b9c6da; }

/* ---------- 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; }
.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:80px;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}

/* ---------------- 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:.82rem;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:.82rem;line-height:1.35}
/* floating "saved to your Records" confirmation toast */
.wl-save-toast{position:fixed;left:50%;bottom:84px;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:"Word Lab";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:"From spelling words to spelling out the curriculum";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}

/* 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}

/* compact utility chips (Kindred · Reading Settings · the relocated Hearthstone Valley door) */
#util-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 0 16px}
.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 + Kindred Village — illustrated image cards, sized/laid out to match the
   Daily Challenge + Progress Map cards above (#extras-row) so they align neatly. */
.wl-world-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 14px}
.wl-world-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;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:640px){.wl-world-row .subject-btn{min-height:165px;padding-top:95px}}

#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}
.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}}