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

.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); }

/* 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;
}
.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 */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
}

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

/* ---------- 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;
}
.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 Anam Vale 🏘️
   ============================================================ */
#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 (Anam Vale 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: kvWiggle .7s ease-in-out infinite; }
/* 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-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; }

/* Animated bath: tub, rising water, bubbles & splashes (over the stage) */
.kv-bath { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.kv-bath-water { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 240px; height: 120px;
  border-radius: 0 0 40% 40% / 0 0 60% 60%; background: linear-gradient(180deg, rgba(95,205,255,.35), rgba(70,140,255,.5));
  animation: kvWaterRise .5s ease forwards; }
@keyframes kvWaterRise { from { height: 0; opacity: 0; } to { height: 120px; opacity: 1; } }
.kv-bath-tub { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 5rem;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); animation: kvTubIn .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes kvTubIn { from { transform: translateX(-50%) translateY(60px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.kv-bath-bubble { position: absolute; bottom: 20px; pointer-events: none; animation-name: kvBubble; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes kvBubble { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-165px) scale(1.2); } }
.kv-bath-splash { position: absolute; font-size: 1.1rem; pointer-events: none; animation: kvSplash .7s ease-out forwards; }
@keyframes kvSplash { 0% { opacity: 1; transform: translate(0,0) scale(.6); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) 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%}