:root {
  --honey: #ffbf2f;
  --honey-dark: #d98b00;
  --honey-pale: #fff3bf;
  --coral: #ff6b4a;
  --coral-dark: #d8482d;
  --lake: #2d9db2;
  --lake-dark: #14748a;
  --leaf: #58b96b;
  --leaf-dark: #348b49;
  --red: #ed5a5a;
  --ink: #453528;
  --muted: #8f8174;
  --line: #eadfce;
  --cream: #fffaf0;
  --paper: #fffefb;
  --shadow: 0 12px 30px rgba(91, 62, 27, 0.09);
}

* { box-sizing: border-box; }

html {
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 7% 18%, rgba(255, 191, 47, 0.08) 0 3px, transparent 4px),
    radial-gradient(circle at 94% 28%, rgba(45, 157, 178, 0.07) 0 4px, transparent 5px),
    linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

button:focus-visible {
  outline: 4px solid rgba(45, 157, 178, 0.25);
  outline-offset: 3px;
}

#app {
  width: min(100%, 900px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 24px 54px;
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 10px 4px;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease-out;
}
.brand:hover { transform: translateY(-1px); }
.brand:active { transform: translateY(1px) scale(.98); }

.brand-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid #ffd76f;
  border-radius: 17px;
  background: var(--honey-pale);
  box-shadow: 0 4px 0 #efb635;
}

.brand-mark img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transform: translateY(3px);
}

.brand > span:last-child {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: max-content;
  line-height: 1.05;
  white-space: nowrap;
}

.brand b { font-size: 20px; font-weight: 950; white-space: nowrap; }
.brand small { margin-top: 4px; color: var(--honey-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }

.stats { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; }

.stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 57px;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 4px 12px rgba(92, 59, 19, 0.04);
  font-size: 15px;
  font-weight: 900;
}

.stat-heart .icon { color: var(--red); font-size: 21px; }
.stat-streak .icon { font-size: 19px; }
.stat-xp .icon { color: var(--honey-dark); font-size: 20px; }
.stat b { min-width: 12px; text-align: center; }
.stat-pop { animation: statPop 260ms cubic-bezier(.34, 1.56, .64, 1); }

.screen { position: relative; }
.hidden { display: none !important; }

.map-shell {
  position: relative;
  overflow: hidden;
  border: 2px solid #d8e5d5;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), transparent 28%),
    linear-gradient(180deg, #e8f5ef 0%, #f8f1cf 56%, #d9eee7 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.map-shell::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .23;
  background-image: radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 76% 34%, #fff 0 3px, transparent 4px);
  background-size: 74px 80px, 108px 112px;
}

.map-intro {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 24px;
  padding: 28px 30px;
  border: 1.5px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 8px 24px rgba(54, 96, 72, .08);
  backdrop-filter: blur(8px);
}
.map-intro h1 { margin: 6px 0 7px; font-size: clamp(28px, 4vw, 38px); font-weight: 950; letter-spacing: -.04em; }
.map-intro p { margin: 0; color: #6f8174; font-size: 14px; font-weight: 650; }

.map-progress-card {
  flex: 0 0 168px;
  padding: 13px 15px;
  border: 1.5px solid #e7d6a6;
  border-radius: 17px;
  background: #fffaf0;
}
.map-progress-card > span { color: var(--honey-dark); font-size: 12px; font-weight: 850; }
.map-progress-card > span b { font-size: 23px; font-weight: 950; }
.map-progress-card > div { height: 8px; margin: 7px 0 5px; overflow: hidden; border-radius: 99px; background: #eae2d4; }
.map-progress-card > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--honey), #ffdc70); transition: width 350ms cubic-bezier(.34,1.56,.64,1); }
.map-progress-card small { color: var(--muted); font-size: 10px; font-weight: 750; }

.map-cloud { position: absolute; z-index: 0; width: 104px; height: 28px; border-radius: 99px; background: rgba(255,255,255,.54); filter: blur(.2px); }
.map-cloud::before, .map-cloud::after { position: absolute; bottom: 0; content: ""; border-radius: 50%; background: inherit; }
.map-cloud::before { left: 17px; width: 46px; height: 46px; }
.map-cloud::after { right: 13px; width: 58px; height: 58px; }
.cloud-one { top: 220px; left: 38px; animation: cloudDrift 8s ease-in-out infinite; }
.cloud-two { top: 360px; right: 34px; width: 78px; height: 21px; animation: cloudDriftSmall 10s ease-in-out -3s infinite reverse; }
.cloud-two::before { left: 13px; width: 34px; height: 34px; }
.cloud-two::after { right: 10px; width: 43px; height: 43px; }

.adventure-map { position: relative; z-index: 2; height: 1960px; margin: 0 24px; }
.map-route { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-route-base, .map-route-lit { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-route-base { stroke: rgba(122, 115, 93, .3); stroke-width: 13; stroke-dasharray: 2 23; }
.map-route-lit { stroke: var(--honey); stroke-width: 15; filter: drop-shadow(0 3px 0 rgba(191, 119, 0, .22)); transition: stroke-dasharray 500ms ease-out; }

.map-stop {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.stop-2, .stop-4, .stop-6, .stop-8, .stop-10, .stop-12 { flex-direction: row-reverse; text-align: right; }
.stop-1 { top: 18px; left: 4%; }
.stop-2 { top: 167px; right: 2%; }
.stop-3 { top: 318px; left: 13%; }
.stop-4 { top: 482px; right: 8%; }
.stop-5 { top: 632px; left: 6%; }
.stop-6 { top: 782px; right: 2%; }
.stop-7 { top: 932px; left: 11%; }
.stop-8 { top: 1082px; right: 7%; }
.stop-9 { top: 1232px; left: 5%; }
.stop-10 { top: 1382px; right: 2%; }
.stop-11 { top: 1532px; left: 11%; }
.stop-12 { top: 1682px; right: 7%; }
.stop-13 { top: 1832px; left: 6%; }

.stop-node {
  position: relative;
  display: grid;
  flex: 0 0 104px;
  place-items: center;
  width: 104px;
  height: 104px;
  border: 5px solid white;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffeda6, #ffd35a);
  box-shadow: 0 7px 0 #d29b2b, 0 12px 24px rgba(80, 61, 24, .15);
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1), box-shadow 160ms ease-out;
}
.stop-node img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(82, 50, 16, .1)); }
.stop-symbol { color: #7a6f61; font-family: serif; font-size: 31px; font-weight: 900; }
.stop-badge { position: absolute; right: -3px; bottom: 1px; display: grid; place-items: center; width: 31px; height: 31px; border: 3px solid white; border-radius: 50%; background: var(--coral); color: white; font-size: 10px; font-style: normal; font-weight: 950; }

.stop-label {
  display: flex;
  min-width: 190px;
  padding: 11px 14px;
  border: 1.5px solid rgba(224, 210, 183, .9);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 15px rgba(74, 67, 47, .08);
  flex-direction: column;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.stop-label small { color: var(--coral-dark); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.stop-label b { margin: 3px 0; font-size: 17px; font-weight: 950; }
.stop-label em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 650; }
.map-stop.current .stop-node::before { position: absolute; inset: -13px; content: ""; border: 3px solid rgba(255, 191, 47, .48); border-radius: 50%; animation: mapPulse 1.8s ease-out infinite; }
.map-stop.current:hover .stop-node { box-shadow: 0 5px 0 #d29b2b, 0 15px 28px rgba(80,61,24,.2); transform: translateY(-3px) scale(1.04); }
.map-stop.current:hover .stop-label { box-shadow: 0 10px 20px rgba(74,67,47,.12); transform: translateY(-2px); }
.map-stop.current:active .stop-node { box-shadow: 0 2px 0 #d29b2b; transform: translateY(4px) scale(.98); }
.map-stop.available:hover .stop-node { box-shadow: 0 5px 0 #d29b2b, 0 15px 28px rgba(80,61,24,.2); transform: translateY(-3px) scale(1.04); }
.map-stop.available:hover .stop-label { box-shadow: 0 10px 20px rgba(74,67,47,.12); transform: translateY(-2px); }
.map-stop.available:active .stop-node { box-shadow: 0 2px 0 #d29b2b; transform: translateY(4px) scale(.98); }
.map-stop.complete .stop-node { background: linear-gradient(145deg, #bfeac8, #6fca81); box-shadow: 0 7px 0 var(--leaf-dark), 0 12px 24px rgba(52,139,73,.18); }
.map-stop.complete .stop-badge { background: var(--leaf); }
.map-stop.complete .stop-label small { color: var(--leaf-dark); }
.map-stop.locked { cursor: not-allowed; }
.map-stop.locked .stop-node { border-color: rgba(255,255,255,.78); background: #d9ded7; box-shadow: 0 6px 0 #aeb5ac; filter: grayscale(.8); }
.map-stop.locked .stop-node img { opacity: .54; }
.map-stop.locked .stop-badge { background: #9ba39a; }
.map-stop.locked .stop-label { background: rgba(247,247,243,.75); opacity: .76; }
.map-stop.locked .stop-label small { color: #92988f; }

.map-hill { position: absolute; z-index: 0; border-radius: 50% 50% 0 0; background: rgba(108, 178, 118, .25); transform: rotate(-7deg); }
.hill-one { bottom: 5px; left: -90px; width: 390px; height: 180px; }
.hill-two { top: 218px; right: -130px; width: 350px; height: 150px; background: rgba(83, 157, 125, .18); transform: rotate(11deg); }
.map-lake { position: absolute; z-index: 1; right: -50px; bottom: -20px; width: 380px; height: 160px; border-radius: 72% 0 0 0; background: rgba(68, 168, 188, .22); transform: rotate(-4deg); }
.map-lake i { position: absolute; width: 100px; height: 2px; border-radius: 99px; background: rgba(45,157,178,.32); }
.map-lake i:nth-child(1) { top: 45px; left: 110px; }
.map-lake i:nth-child(2) { top: 75px; left: 55px; width: 145px; }
.map-lake i:nth-child(3) { top: 105px; left: 155px; width: 120px; }
.map-pagoda { position: absolute; z-index: 1; top: 420px; left: 14px; width: 42px; height: 70px; border-bottom: 45px solid rgba(128, 78, 40, .2); border-left: 10px solid transparent; border-right: 10px solid transparent; }
.map-pagoda::before, .map-pagoda::after { position: absolute; left: 50%; content: ""; width: 64px; height: 8px; border-radius: 50%; background: rgba(128,78,40,.28); transform: translateX(-50%); }
.map-pagoda::before { top: 12px; }
.map-pagoda::after { top: 32px; width: 52px; }

.map-footer { position: relative; z-index: 9; display: flex; align-items: center; gap: 14px; margin: 5px 24px 24px; padding: 16px 20px; border: 1.5px solid rgba(255,255,255,.72); border-radius: 19px; background: rgba(255,255,255,.64); color: #4d715b; }
.map-footer b, .map-footer small { display: block; }
.map-footer b { font-size: 13px; }
.map-footer small { margin-top: 2px; color: #789082; font-size: 11px; font-weight: 650; }
.map-compass { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lake); color: white; font-size: 20px; font-weight: 900; box-shadow: 0 4px 0 var(--lake-dark); }

.unit-nav { display: flex; align-items: center; justify-content: space-between; margin: 1px 3px 13px; }
.map-back { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 13px; background: white; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 850; box-shadow: 0 3px 0 #dcd3c7; transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
.map-back span { color: var(--lake-dark); font-size: 18px; }
.map-back:hover { transform: translateY(-1px); }
.map-back:active { box-shadow: 0 1px 0 #dcd3c7; transform: translateY(2px); }
.unit-location { color: var(--muted); font-size: 11px; font-weight: 750; }
.unit-location i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(88,185,107,.12); }

.home-hero {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  border: 2px solid #f0d99b;
  border-radius: 32px;
  background: linear-gradient(145deg, #fff3b9 0%, #fff8df 48%, #dff4ef 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.home-hero::before,
.home-hero::after {
  position: absolute;
  z-index: -1;
  width: 44px;
  height: 50px;
  content: "";
  opacity: 0.16;
  background: radial-gradient(circle at 50% 25%, var(--honey-dark) 0 2px, transparent 3px), linear-gradient(60deg, transparent 46%, var(--honey-dark) 47% 52%, transparent 53%);
}

.home-hero::before { top: 34px; left: 52%; transform: rotate(18deg); }
.home-hero::after { top: 105px; right: 6%; transform: rotate(-12deg) scale(.7); }

.sun-dot {
  position: absolute;
  top: 28px;
  right: 32px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 191, 47, 0.3);
  box-shadow: 0 0 0 12px rgba(255, 191, 47, 0.08);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: 52%;
  padding: 51px 0 62px 50px;
}

.eyebrow,
.section-kicker {
  display: inline-block;
  color: var(--coral-dark);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.hero-copy h1 {
  margin: 9px 0 12px;
  font-size: clamp(30px, 4.4vw, 43px);
  font-weight: 950;
  line-height: 1.14;
  letter-spacing: -0.04em;
}

.hero-copy p { margin: 0; color: #756353; font-size: 16px; font-weight: 650; }

.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-chips span {
  padding: 7px 10px;
  border: 1px solid rgba(129, 88, 20, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.hero-character {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: -12px;
  width: 49%;
  height: 104%;
}

.hero-character img {
  position: absolute;
  right: -2%;
  bottom: -6%;
  width: 102%;
  filter: drop-shadow(0 13px 12px rgba(118, 74, 20, 0.14));
  animation: heroFlight 2.8s cubic-bezier(.45, 0, .32, 1) infinite;
  transform-origin: 54% 76%;
  will-change: transform;
}

.speech-bubble {
  position: absolute;
  z-index: 5;
  top: 28px;
  left: -10px;
  padding: 10px 14px;
  border: 2px solid #e9d9bb;
  border-radius: 17px 17px 5px 17px;
  background: white;
  box-shadow: 0 7px 18px rgba(73, 48, 20, 0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  transform: rotate(-3deg);
}
.speech-bubble b { display: block; margin-top: 1px; color: var(--ink); font-size: 17px; }

.hero-hills {
  position: absolute;
  z-index: 0;
  right: -7%;
  bottom: 42px;
  width: 62%;
  height: 112px;
  border-radius: 70% 10% 0 0;
  background: #a6d4a8;
  opacity: .52;
  transform: skewX(-18deg);
}

.hero-lake {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 58px;
  border-radius: 80% 0 0 0;
  background: repeating-radial-gradient(ellipse at 70% 0%, #78cad2 0 6px, #a6e2df 7px 13px);
  opacity: .68;
}

.tiny-boat {
  position: absolute;
  right: 34px;
  bottom: 19px;
  width: 44px;
  height: 12px;
  border-radius: 2px 2px 20px 20px;
  background: #a85a28;
  transform: rotate(-5deg);
}
.tiny-boat::after { position: absolute; right: 19px; bottom: 8px; width: 3px; height: 32px; content: ""; background: #75401f; transform: rotate(18deg); }

.learning-path { margin-top: 35px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; padding: 0 4px; }
.section-heading h2 { margin: 3px 0 0; font-size: 24px; font-weight: 950; letter-spacing: -0.02em; }
.unit-progress { padding: 7px 11px; border-radius: 999px; background: #edf7ef; color: var(--leaf-dark); font-size: 12px; font-weight: 850; }

.level-list { position: relative; display: grid; gap: 13px; }
.level-list::before {
  position: absolute;
  z-index: -1;
  top: 54px;
  bottom: 54px;
  left: 61px;
  width: 3px;
  content: "";
  background: repeating-linear-gradient(to bottom, #e3c96d 0 7px, transparent 7px 14px);
  opacity: .7;
}

.level {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 112px;
  overflow: hidden;
  padding: 10px 18px 10px 10px;
  border: 2px solid var(--line);
  border-bottom-width: 5px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.level:hover:not(.locked) { border-color: #e7bd4c; box-shadow: 0 9px 20px rgba(96, 63, 18, 0.09); transform: translateY(-2px); }
.level:active:not(.locked) { border-bottom-width: 2px; transform: translateY(3px) scale(.995); }
.level.locked { background: #f6f3ee; color: #a69d93; cursor: not-allowed; filter: grayscale(.78); }
.level.completed { border-color: #b9dfc0; background: linear-gradient(90deg, #f5fcf6, #fffefb 36%); }
.level.completed .honeycomb { background: var(--leaf); filter: drop-shadow(0 4px 0 var(--leaf-dark)); }
.level.completed .level-number { color: var(--leaf-dark); }

.level-character {
  align-self: end;
  display: grid;
  place-items: end center;
  width: 92px;
  height: 96px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff4c5, #ffe59b);
}
.level-2 .level-character { background: linear-gradient(180deg, #ffe6d9, #ffd1bc); }
.level-3 .level-character { background: linear-gradient(180deg, #dff2f4, #bfe4e8); }
.level-character img { max-width: 104%; max-height: 112%; object-fit: contain; object-position: center bottom; }
.level-1 .level-character img { width: 104%; transform: translateY(8px); }
.level-2 .level-character img, .level-3 .level-character img { height: 104%; transform: translateY(3px); }

.level-body { display: flex; min-width: 0; flex-direction: column; }
.level-number { color: var(--honey-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.level-body strong { margin: 3px 0 5px; font-size: 19px; font-weight: 950; }
.level-body small { overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.level-status { display: flex; align-items: center; flex-direction: column; gap: 5px; }
.level-status small { color: var(--muted); font-size: 11px; font-weight: 750; }

.honeycomb {
  display: grid;
  place-items: center;
  width: 49px;
  height: 53px;
  color: white;
  background: var(--honey);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  font-size: 17px;
  filter: drop-shadow(0 4px 0 #d6960d);
}
.locked .honeycomb { background: #cac4bc; filter: drop-shadow(0 4px 0 #aba59d); }

.culture-note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 21px;
  overflow: hidden;
  padding: 16px 20px;
  border-radius: 20px;
  background: #e9f6f5;
  color: var(--lake-dark);
}
.culture-note b { font-size: 14px; }
.culture-note p { margin: 3px 0 0; color: #5d8d91; font-size: 12px; font-weight: 650; }
.culture-icon { font-size: 30px; font-weight: 900; transform: rotate(-8deg); }
.lace-mark { position: absolute; right: 15px; color: rgba(20, 116, 138, 0.18); font-size: 54px; }

.library-hero {
  position: relative;
  display: grid;
  min-height: 270px;
  overflow: hidden;
  padding: 40px 310px 35px 42px;
  border: 2px solid #d9e4d3;
  border-radius: 32px;
  background: linear-gradient(135deg, #fff7dc 0%, #eef8df 56%, #dcefdc 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.library-hero::before,
.library-hero::after { position: absolute; z-index: -1; content: ""; border-radius: 50%; }
.library-hero::before { right: 132px; bottom: -94px; width: 260px; height: 210px; background: rgba(75, 161, 111, .18); transform: rotate(-12deg); }
.library-hero::after { right: -70px; bottom: -60px; width: 280px; height: 165px; background: rgba(47, 158, 183, .15); }
.library-tone-2 { background: linear-gradient(135deg, #fff4d2, #e8f4dd 58%, #d8ecdf); }
.library-tone-3 { background: linear-gradient(135deg, #fff0e4, #f6e9cf 58%, #e9d9bf); }
.library-tone-4 { background: linear-gradient(135deg, #e8f7f4, #dcf0e7 58%, #d8eae0); }
.library-hero-copy { position: relative; z-index: 2; align-self: center; }
.library-hero h1 { margin: 7px 0 8px; font-size: clamp(31px, 5vw, 44px); font-weight: 950; letter-spacing: -.045em; }
.library-hero p { max-width: 480px; margin: 0; color: var(--muted); font-size: 15px; font-weight: 650; line-height: 1.65; }
.library-character-trigger {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: -13px;
  display: grid;
  place-items: end center;
  width: 290px;
  height: 290px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2e7852;
  cursor: pointer;
}
.library-character-trigger img { width: 280px; height: 280px; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(81, 49, 14, .12)); animation: heroFlight 3.2s ease-in-out infinite; }
.library-character-trigger > span { position: absolute; right: 18px; bottom: 24px; padding: 6px 10px; border: 1.5px solid rgba(83,158,104,.32); border-radius: 99px; background: rgba(255,255,255,.9); box-shadow: 0 4px 10px rgba(54,95,65,.11); font-size: 10px; font-weight: 850; opacity: 0; transform: translateY(5px); transition: opacity 160ms ease-out, transform 160ms ease-out; }
.library-character-trigger:hover > span,
.library-character-trigger:focus-visible > span { opacity: 1; transform: none; }

.episode-level-list::before { display: none; }
.episode-level { grid-template-columns: minmax(0, 1fr) 64px; min-height: 104px; padding: 15px 18px; }
.episode-level .level-body small { max-width: none; }

.episode-section { margin-top: 31px; }
.episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.episode-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 15px;
  min-height: 126px;
  padding: 17px;
  border: 1.5px solid var(--line);
  border-radius: 23px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 0 #e4d7c4, 0 9px 17px rgba(76, 63, 42, .06);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1), border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.episode-card:hover { border-color: #e2bc5b; box-shadow: 0 7px 0 #e0b746, 0 13px 23px rgba(76,63,42,.1); transform: translateY(-3px); }
.episode-card:active { box-shadow: 0 2px 0 #e0b746; transform: translateY(3px); }
.episode-card.completed { border-color: #b9dfc2; background: linear-gradient(135deg, #fff, #f0faef); box-shadow: 0 5px 0 #a4d2ad, 0 9px 17px rgba(52,139,73,.07); }
.episode-symbol { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: linear-gradient(145deg, #ffe38a, #ffc743); color: #8e5700; font-family: serif; font-size: 27px; font-weight: 950; box-shadow: inset 0 -3px 0 rgba(190,117,0,.14); }
.episode-card.completed .episode-symbol { background: linear-gradient(145deg, #9fe0ad, #5dbc70); color: white; font-family: inherit; }
.episode-copy { display: flex; min-width: 0; flex-direction: column; }
.episode-copy small { color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.episode-copy b { margin: 3px 0; font-size: 18px; font-weight: 950; }
.episode-copy em { overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.episode-copy > span { margin-top: 7px; color: #927334; font-size: 10px; font-weight: 850; }
.episode-arrow { color: #c0a77d; font-size: 22px; font-weight: 900; transition: transform 160ms ease-out; }
.episode-card:hover .episode-arrow { transform: translateX(4px); }
.library-note { margin-bottom: 12px; }

.episode-hero {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 22px;
  padding: 25px 29px;
  border: 1.5px solid #eadbc2;
  border-radius: 27px;
  background: linear-gradient(135deg, #fff9ec, #fffdf8);
  box-shadow: 0 8px 25px rgba(76,63,42,.07);
}
.episode-hero-symbol { display: grid; place-items: center; width: 100px; height: 100px; border: 5px solid white; border-radius: 31px; background: linear-gradient(145deg, #ffe991, #ffc33f); color: #83510b; box-shadow: 0 7px 0 #d9a127, 0 13px 22px rgba(80,61,24,.12); font-family: serif; font-size: 47px; font-weight: 950; transform: rotate(-3deg); }
.episode-hero h1 { margin: 5px 0 3px; font-size: 30px; font-weight: 950; letter-spacing: -.035em; }
.episode-hero p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.episode-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.episode-meta span { padding: 5px 9px; border-radius: 99px; background: #f4ead7; color: #8e6b28; font-size: 10px; font-weight: 850; }

.now-playing { display: flex; align-items: center; gap: 13px; margin: 18px 0 11px; padding: 12px 16px; border: 1.5px solid #bfe1db; border-radius: 17px; background: #eaf8f5; color: var(--lake-dark); }
.now-playing b, .now-playing small, .now-playing em { display: block; }
.now-playing b { font-size: 13px; }
.now-playing small { margin-top: 2px; color: #5b8e90; font-family: ui-serif, Georgia, serif; font-size: 9px; font-weight: 700; }
.now-playing em { margin-top: 1px; color: var(--lake-dark); font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: 14px; font-style: normal; font-weight: 800; }
.sound-bars, .clip-eq { display: flex; align-items: center; justify-content: center; gap: 3px; }
.sound-bars { width: 35px; height: 35px; border-radius: 11px; background: var(--lake); }
.sound-bars i, .clip-eq i { width: 3px; border-radius: 99px; background: currentColor; }
.sound-bars i { height: 9px; color: white; }
.sound-bars i:nth-child(2), .clip-eq i:nth-child(2) { height: 17px; }
.sound-bars i:nth-child(3), .clip-eq i:nth-child(3) { height: 12px; }

.clip-list { display: grid; gap: 10px; padding-bottom: 96px; }
.clip-row { display: grid; grid-template-columns: 47px minmax(0, 1fr) 33px; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(224,211,191,.75); transition: border-color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out; }
.clip-row:hover { border-color: #e4c26c; transform: translateY(-1px); }
.clip-row.playing { border-color: #65bfc7; background: #effaf8; box-shadow: 0 4px 0 #9fd6d4; }
.clip-play { display: grid; place-items: center; width: 44px; height: 44px; padding-left: 3px; border: 0; border-radius: 15px; background: linear-gradient(145deg, #ffd867, #ffb92e); color: #7d4c00; box-shadow: 0 4px 0 #ce8a0c; cursor: pointer; font-size: 15px; font-weight: 950; transition: transform 130ms ease-out, box-shadow 130ms ease-out; }
.clip-play:hover { transform: translateY(-2px); }
.clip-play:active { box-shadow: 0 1px 0 #ce8a0c; transform: translateY(3px); }
.playing .clip-play { padding-left: 0; background: linear-gradient(145deg, #67cad0, #32a8b3); color: white; box-shadow: 0 4px 0 #268a94; font-size: 11px; }
.clip-copy { display: flex; min-width: 0; flex-direction: column; }
.clip-copy small { color: var(--coral-dark); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.clip-copy b { margin: 1px 0 3px; font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: 18px; font-weight: 900; line-height: 1.35; }
.clip-copy em { margin-top: 3px; color: #a07835; font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.4; }
.clip-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.4; }
.clip-eq { height: 28px; color: #cfc3af; opacity: .65; }
.clip-eq i { height: 8px; }
.playing .clip-eq { color: var(--lake); opacity: 1; }
.playing .clip-eq i { animation: soundBar 700ms ease-in-out infinite alternate; }
.playing .clip-eq i:nth-child(2) { animation-delay: -360ms; }
.playing .clip-eq i:nth-child(3) { animation-delay: -180ms; }
.episode-complete-bar { position: sticky; z-index: 20; bottom: 13px; margin: -78px auto 13px; padding: 13px; border: 1.5px solid rgba(230,215,192,.9); border-radius: 22px; background: rgba(255,253,248,.92); box-shadow: 0 12px 35px rgba(74,62,42,.14); backdrop-filter: blur(12px); }
.completed-button { background: linear-gradient(180deg, #6bc47b, #50ab63) !important; box-shadow: 0 5px 0 var(--leaf-dark) !important; }
.episode-result .result-stats b { font-size: 19px; }

.episode-game-shell { padding-bottom: 24px; }
.question-coach.episode-coach {
  grid-template-areas:
    "bubble bubble"
    "mascot copy";
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 9px 22px;
  min-height: 0;
  margin: 2px 0 11px;
}
.episode-coach > .coach-bubble {
  grid-area: bubble;
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
}
.episode-coach .episode-ip-mascot { grid-area: mascot; align-self: center; }
.episode-coach .coach-copy { grid-area: copy; align-self: center; }
.question-coach .episode-ip-mascot { width: 168px; height: 168px; }
.question-coach .episode-ip-mascot img { width: 168px; height: 168px; }
.episode-coach.idle img { animation: coachIdle 2.8s ease-in-out infinite; }
.episode-coach.correct img { animation: ipCelebrate 820ms cubic-bezier(.34,1.56,.64,1) both, coachIdle 2.2s ease-in-out 820ms infinite; }
.episode-coach.wrong img { animation: ipOops 420ms ease-out both, coachIdle 3s ease-in-out 420ms infinite; }

.character-knowledge-trigger {
  border: 0;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.34,1.56,.64,1), filter 160ms ease-out;
}
.character-knowledge-trigger:hover { filter: brightness(1.03); transform: translateY(-3px) scale(1.02); }
.character-knowledge-trigger:active { transform: translateY(2px) scale(.98); }
.character-info-badge {
  position: absolute;
  z-index: 5;
  right: 5px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--lake);
  box-shadow: 0 3px 0 var(--lake-dark);
  color: white;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  animation: infoNudge 2.7s ease-in-out infinite;
}
.library-character-trigger .character-info-badge { right: 28px; bottom: 65px; }
.character-tapped { animation: characterTap 360ms cubic-bezier(.34,1.56,.64,1); }

.character-dialog {
  width: min(92vw, 720px);
  max-width: 720px;
  max-height: min(90vh, 650px);
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.character-dialog::backdrop { background: rgba(42,31,22,.58); backdrop-filter: blur(6px); }
.character-knowledge-card {
  position: relative;
  display: grid;
  grid-template-areas:
    "header header"
    "art copy";
  grid-template-columns: minmax(240px, .88fr) minmax(0, 1.12fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 20px;
  row-gap: 10px;
  min-height: 390px;
  overflow: hidden;
  padding: 35px 35px 30px;
  border: 3px solid #f3d374;
  border-radius: 34px;
  background: linear-gradient(145deg, #fff9e7 0%, #f1f8e8 58%, #dff1e7 100%);
  box-shadow: 0 28px 75px rgba(33,24,18,.34), inset 0 -5px 0 rgba(207,168,76,.13);
  opacity: 0;
  transform: translateY(22px) scale(.94);
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.34,1.56,.64,1);
}
.character-dialog.open .character-knowledge-card { opacity: 1; transform: none; }
.character-dialog.closing .character-knowledge-card { opacity: 0; transform: translateY(10px) scale(.97); transition-duration: 140ms; }
.character-knowledge-card::before,
.character-knowledge-card::after { position: absolute; z-index: 0; border-radius: 50%; content: ""; pointer-events: none; }
.character-knowledge-card::before { right: -80px; bottom: -110px; width: 310px; height: 250px; background: rgba(45,157,178,.11); }
.character-knowledge-card::after { top: -80px; left: -95px; width: 260px; height: 210px; background: rgba(255,191,47,.15); }
.character-dialog-close {
  position: absolute;
  z-index: 6;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1.5px solid #e6d6bd;
  border-radius: 13px;
  background: rgba(255,255,255,.86);
  color: var(--muted);
  cursor: pointer;
  font-size: 25px;
  font-weight: 750;
  line-height: 1;
}
.character-dialog-close:hover { background: white; color: var(--coral-dark); transform: rotate(4deg); }
.character-knowledge-header,
.character-knowledge-art,
.character-knowledge-copy { position: relative; z-index: 2; }
.character-knowledge-header { grid-area: header; min-width: 0; padding-right: 48px; }
.character-knowledge-art { grid-area: art; display: grid; justify-items: center; align-self: end; }
.character-knowledge-copy { grid-area: copy; align-self: center; }
.character-pose-button { position: relative; display: grid; place-items: center; width: 245px; height: 260px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.character-knowledge-ring { position: absolute; inset: 28px 11px 4px; border: 3px dashed rgba(58,150,91,.27); border-radius: 50%; animation: slowSpin 18s linear infinite; }
.character-pose-button img { position: relative; z-index: 2; width: 250px; height: 250px; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(81,49,14,.14)); transform-origin: 50% 88%; }
.character-pose-line { position: relative; z-index: 3; max-width: 235px; margin-top: -17px; padding: 8px 12px; border: 1.5px solid rgba(72,152,94,.25); border-radius: 13px; background: rgba(255,255,255,.9); color: #39764b; font-size: 11px; font-weight: 800; line-height: 1.45; text-align: center; }
.character-knowledge-tag { display: inline-flex; padding: 6px 10px; border-radius: 99px; background: #fff0c7; color: #9d6811; font-size: 10px; font-weight: 900; }
.character-knowledge-header h2 { max-width: 100%; margin: 10px 0 0; font-size: clamp(28px, 5vw, 39px); font-weight: 950; letter-spacing: -.035em; line-height: 1.12; }
.character-knowledge-copy p { margin: 0 0 10px; color: #75695f; font-size: 14px; font-weight: 650; line-height: 1.7; }
.character-action-button { margin-top: 8px; padding: 11px 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #67c17a, #4da961); box-shadow: 0 4px 0 #348b49; color: white; cursor: pointer; font-size: 13px; font-weight: 900; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.character-action-button:hover { transform: translateY(-2px); }
.character-action-button:active { box-shadow: 0 1px 0 #348b49; transform: translateY(3px); }
.pose-pop { animation: characterPosePop 500ms cubic-bezier(.34,1.56,.64,1) !important; }

.audio-challenge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 92px;
  margin: 4px 0 14px;
  overflow: hidden;
  padding: 14px 20px;
  border: 2px solid #acdbe0;
  border-bottom-width: 5px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f1fbfa, #e3f6f5);
  color: var(--lake-dark);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out;
}
.audio-challenge:hover { border-color: #65bec8; background: linear-gradient(135deg, #ecfbfa, #d9f3f2); transform: translateY(-2px); }
.audio-challenge:active { border-bottom-width: 2px; transform: translateY(3px) scale(.995); }
.audio-challenge > span:nth-child(2) { position: relative; z-index: 2; }
.audio-challenge b, .audio-challenge small { display: block; }
.audio-challenge b { font-size: 15px; font-weight: 950; }
.audio-challenge small { margin-top: 3px; color: #5c8c92; font-size: 11px; font-weight: 700; }
.audio-orb { position: relative; z-index: 2; display: grid; flex: 0 0 55px; place-items: center; width: 55px; height: 55px; padding-left: 3px; border-radius: 19px; background: linear-gradient(145deg, #65cbd2, #2ca7b3); box-shadow: 0 5px 0 #23838d; color: white; font-size: 19px; animation: audioPulse 2.1s ease-in-out infinite; }
.audio-rings { position: absolute; right: 22px; width: 86px; height: 86px; border: 2px solid rgba(46, 165, 178, .17); border-radius: 50%; }
.audio-rings::before, .audio-rings::after { position: absolute; inset: 10px; content: ""; border: 2px solid rgba(46,165,178,.17); border-radius: 50%; }
.audio-rings::after { inset: 22px; }
.phonetic-cue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; margin: -5px 0 14px; padding: 10px 15px; border: 1.5px solid #eadbbf; border-radius: 17px; background: #fffaf1; }
.phonetic-cue > span { padding: 5px 8px; border-radius: 9px; background: #f1e4ce; color: #9b7133; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.phonetic-cue > b { color: var(--ink); font-family: ui-serif, Georgia, serif; font-size: 16px; font-weight: 850; letter-spacing: .035em; line-height: 1.35; }
.phonetic-cue > small { color: var(--muted); font-size: 9px; font-weight: 700; }

.episode-cue-card { position: relative; display: grid; min-height: 112px; margin: 4px 0 14px; padding: 18px 138px 18px 21px; border: 2px solid #eadbbf; border-radius: 22px; background: linear-gradient(135deg, #fffaf0, #fffdf9); box-shadow: inset 0 -3px 0 rgba(220,200,163,.26); }
.episode-cue-card small { color: var(--coral-dark); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.dialect-reading { display: grid; min-width: 0; }
.dialect-reading em { color: #a07835; font-family: ui-serif, Georgia, serif; font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .035em; line-height: 1.35; }
.dialect-reading b { margin-top: 2px; font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: clamp(18px,3vw,24px); font-weight: 850; line-height: 1.35; }
.episode-cue-card > .dialect-reading { align-self: center; margin-top: 5px; }
.judge-pinyin-only { align-self: center; display: grid; gap: 3px; min-width: 0; margin-top: 5px; }
.judge-pinyin-only b { overflow-wrap: anywhere; color: #8f682d; font-family: ui-serif, Georgia, serif; font-size: clamp(18px, 3vw, 25px); font-weight: 850; letter-spacing: .045em; line-height: 1.3; }
.judge-pinyin-only em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 750; }
.cue-audio { position: absolute; top: 50%; right: 18px; padding: 10px 12px; border: 0; border-radius: 13px; background: #e8f7f5; color: var(--lake-dark); cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; transform: translateY(-50%); transition: background 130ms ease-out, transform 130ms ease-out; }
.cue-audio:hover { background: #d7f0ee; transform: translateY(calc(-50% - 2px)); }
.cue-audio:active { transform: translateY(calc(-50% + 1px)) scale(.98); }
.episode-game-options .option { background: rgba(255,255,255,.94); }
.episode-game-options .option.correct { animation: optionCorrect 360ms cubic-bezier(.34,1.56,.64,1); }
.episode-game-options .option.wrong { animation: optionWrong 260ms ease-out; }
.match-instruction { display: flex; align-items: center; gap: 13px; min-height: 72px; margin: 4px 0 14px; padding: 11px 16px; border: 2px solid #ecd9a6; border-radius: 20px; background: linear-gradient(135deg, #fffaf0, #fffdf8); }
.match-instruction > span { display: grid; flex: 0 0 45px; place-items: center; width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, #ffd968, #ffb92f); box-shadow: 0 4px 0 #ce8a0c; color: #7d4c00; font-family: serif; font-size: 20px; font-weight: 950; }
.match-instruction b, .match-instruction small { display: block; }
.match-instruction b { font-size: 14px; font-weight: 950; }
.match-instruction small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.judge-statement { display: grid; gap: 5px; margin-bottom: 11px; padding: 15px 18px; border: 2px dashed #d9c8a7; border-radius: 18px; background: #fffaf1; text-align: center; }
.judge-statement small { color: var(--coral-dark); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.judge-statement b { font-size: 20px; font-weight: 950; line-height: 1.4; }
.judge-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.episode-order-board { padding: 14px; border: 2px solid #e5d9c8; border-radius: 20px; background: rgba(255,255,255,.68); }
.interaction-correct .wordbank { border-color: #70bf7e; background: #f0fbf2; }
.match-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.match-column { display: grid; align-content: start; gap: 8px; min-width: 0; }
.match-column > small { padding: 0 4px 2px; color: var(--muted); font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.match-card { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 65px; padding: 9px 10px; border: 2px solid #e3d8c8; border-bottom-width: 4px; border-radius: 16px; background: rgba(255,255,255,.96); color: var(--ink); cursor: pointer; font: inherit; text-align: left; transition: border-color 140ms ease-out, background 140ms ease-out, transform 140ms ease-out; }
.match-card:hover { border-color: #dfbd68; transform: translateY(-1px); }
.match-card:active { border-bottom-width: 2px; transform: translateY(2px); }
.match-card > span:first-child { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; background: #f5ead7; color: #9c7435; font-size: 10px; font-weight: 950; }
.match-card b { min-width: 0; font-size: 13px; font-weight: 950; line-height: 1.35; }
.match-card em { grid-column: 2; overflow: hidden; margin-top: -5px; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.match-card .match-reading { grid-column: 2; }
.match-card .match-reading em { grid-column: auto; margin: 0; color: #9b7133; font-size: 8px; }
.match-card .match-reading b { margin-top: 1px; font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: 15px; }
.prompt-card.selected { border-color: var(--lake); background: #eefaf9; box-shadow: 0 0 0 3px rgba(66,174,185,.11); }
.prompt-card.assigned:not(.correct) { border-color: #e4bd58; background: #fffaea; }
.answer-card.used:not(.correct) { border-color: #e4bd58; background: #fffaea; }
.match-card.correct { border-color: #67bb76; background: #effaf1; color: var(--leaf-dark); }
.match-card.correct > span:first-child { background: #6cc27a; color: white; }

.lesson-shell { width: min(100%, 690px); margin: 5px auto 0; }
.question-head { display: grid; grid-template-columns: 46px 1fr 42px; align-items: center; gap: 14px; }
.quit-btn { width: 42px !important; height: 42px; padding: 0 !important; border-radius: 14px !important; color: var(--muted) !important; font-size: 27px !important; line-height: 1; }

.progress { height: 14px; overflow: hidden; border: 2px solid #eadfce; border-radius: 99px; background: #f1ece4; }
.progress > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--honey), #ffd866); box-shadow: inset 0 -2px 0 rgba(189, 116, 0, .2); transition: width 240ms ease-out; }
.question-count { font-size: 16px; font-weight: 950; text-align: right; }
.question-count small { margin-left: 2px; color: var(--muted); font-size: 11px; }

.lesson-label { margin: 25px 0 4px 133px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.lesson-label span { margin-right: 7px; color: var(--coral-dark); }

.question-coach { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 18px; min-height: 138px; margin-bottom: 17px; }
.mascot-motion { position: relative; isolation: isolate; }
.coach-mascot { align-self: end; display: grid; place-items: center; width: 128px; height: 128px; }
.question-coach img { position: relative; z-index: 2; width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(81, 49, 14, .08)); animation: coachIdle 2.8s ease-in-out infinite; transform-origin: 52% 82%; will-change: transform; }
.question-coach.success img { animation: cheerBounce 1.18s cubic-bezier(.45, 0, .25, 1) infinite; }
.question-coach.error img { animation: coachTilt 280ms ease-out; }
.wing-trail { position: absolute; z-index: 1; display: block; border: 2px solid rgba(255, 224, 145, .76); border-radius: 62% 38% 58% 42%; background: rgba(255, 253, 234, .35); opacity: 0; filter: blur(.35px); pointer-events: none; }
.coach-mascot .wing-trail { top: 37px; width: 47px; height: 29px; }
.coach-mascot .wing-trail-left { left: 7px; transform-origin: 100% 50%; }
.coach-mascot .wing-trail-right { right: 4px; transform-origin: 0 50%; }
.question-coach.success .wing-trail-left { animation: wingBeatLeft 180ms ease-in-out infinite alternate; }
.question-coach.success .wing-trail-right { animation: wingBeatRight 180ms ease-in-out infinite alternate-reverse; }
.mascot-shadow { position: absolute; z-index: 0; left: 50%; bottom: 6px; display: block; width: 64px; height: 12px; border-radius: 50%; background: rgba(93, 61, 24, .13); filter: blur(4px); pointer-events: none; transform: translateX(-50%); }
.coach-mascot .mascot-shadow { animation: idleShadow 2.8s ease-in-out infinite; }
.question-coach.success .mascot-shadow { animation: cheerShadow 1.18s ease-in-out infinite; }
.coach-copy { min-width: 0; }
.coach-bubble {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
  padding: 7px 12px;
  border: 1.5px solid #ebddc8;
  border-radius: 12px 12px 12px 3px;
  background: white;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.question-coach.success .coach-bubble { border-color: #bfe6c7; background: #effaf1; color: var(--leaf-dark); }
.question-coach.error .coach-bubble { border-color: #f4c7c0; background: #fff3f1; color: var(--coral-dark); }
.prompt { margin: 0; font-size: clamp(22px, 3.6vw, 30px); font-weight: 950; line-height: 1.35; letter-spacing: -0.02em; }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 11px 15px;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 850;
  text-align: left;
  transition: transform 100ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}
.option:hover:not(:disabled) { border-color: #d7b958; background: #fffaf0; transform: translateY(-1px); }
.option:active:not(:disabled) { border-bottom-width: 2px; transform: translateY(2px) scale(.99); }
.option-key { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--line); border-radius: 10px; background: #f8f4ec; color: var(--muted); font-size: 13px; font-weight: 900; }
.option-copy { min-width: 0; }
.legacy-reading-option .option-copy { display: grid; gap: 1px; }
.legacy-reading-option .option-copy small { color: var(--muted); font-family: ui-serif, Georgia, serif; font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.legacy-reading-option .option-copy b { font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: 20px; line-height: 1.25; }
.option.selected { border-color: var(--lake); background: #e9f8fa; color: var(--lake-dark); animation: optionAudition 160ms ease-out; }
.option.selected::after { display: none; content: ""; }
.option.selected .option-key { border-color: var(--lake); background: var(--lake); color: white; }
.option.correct { border-color: var(--leaf); background: #e8f8eb; color: var(--leaf-dark); }
.option.correct .option-key { border-color: var(--leaf); background: var(--leaf); color: white; }
.option.wrong { border-color: var(--red); background: #fff0ef; color: #bc4444; }
.option.wrong .option-key { border-color: var(--red); background: var(--red); color: white; }
.option:disabled { cursor: default; }
.option:disabled:not(.correct):not(.wrong) { opacity: .6; }
.option.with-reading { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.option.with-reading .option-key { grid-row: 1 / span 2; }
.option-reading { grid-column: 2; display: grid; gap: 2px; width: 100%; margin-top: 7px; padding-top: 8px; border-top: 1px dashed #d8cdbd; animation: readingReveal 220ms ease-out both; }
.option-reading small { color: var(--muted); font-family: ui-serif, Georgia, serif; font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.option-reading b { color: var(--ink); font-family: "STKaiti", "KaiTi", "Kaiti SC", serif; font-size: 23px; font-weight: 800; line-height: 1.25; }
.option.correct .option-reading { border-top-color: #a8d9b1; }
.option.correct .option-reading small, .option.correct .option-reading b { color: var(--leaf-dark); }
.option.with-reading:disabled:not(.correct):not(.wrong) { opacity: 1; }
.compact-word-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.compact-word-options .option { min-height: 58px; padding: 8px 10px; border-radius: 15px; font-size: 14px; }
.compact-word-options .option.with-reading { grid-template-columns: 27px minmax(0, 1fr); column-gap: 8px; }
.compact-word-options .option-key { width: 27px; height: 27px; border-radius: 8px; font-size: 11px; }
.compact-word-options .option-reading { margin-top: 4px; padding-top: 5px; }
.compact-word-options .option-reading small { font-size: 8px; }
.compact-word-options .option-reading b { font-size: 19px; }
.word-question-shell .episode-coach { min-height: 0; }
.word-question-shell .episode-ip-mascot,
.word-question-shell .episode-ip-mascot img { width: 154px; height: 154px; }
.word-question-shell .audio-challenge { min-height: 76px; padding-block: 9px; }
.word-question-shell .phonetic-cue { min-height: 48px; margin-bottom: 10px; padding-block: 7px; }

.wordbank { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 88px; padding: 15px; border: 2px dashed #d8cbb9; border-radius: 18px; background: rgba(255,255,255,.58); }
.wordbank .placeholder { color: #aaa097; font-size: 13px; font-weight: 650; }
.wordbank-divider { position: relative; margin: 17px 0 11px; border-top: 1.5px solid var(--line); text-align: center; }
.wordbank-divider span { position: relative; top: -10px; padding: 0 10px; background: var(--cream); color: var(--muted); font-size: 11px; font-weight: 800; }
.tile-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; min-height: 50px; }
.tile { padding: 10px 15px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 13px; background: white; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 850; transition: transform 100ms ease-out, border-color 100ms ease-out; }
.tile:hover { border-color: #e2b851; transform: translateY(-1px); }
.tile:active { border-bottom-width: 2px; transform: translateY(2px); }

.actions { margin-top: 18px; }
.btn {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(180deg, #ffc53c, var(--honey));
  box-shadow: 0 4px 0 var(--honey-dark);
  color: #563b0b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .03em;
  transition: transform 100ms ease-out, filter 100ms ease-out, box-shadow 100ms ease-out;
}
.btn:hover:not(.disabled) { filter: saturate(1.08) brightness(1.02); transform: translateY(-1px); }
.btn:active:not(.disabled) { box-shadow: 0 1px 0 var(--honey-dark); transform: translateY(3px) scale(.995); }
.btn.disabled { background: #e8e3db; box-shadow: 0 4px 0 #cdc6bb; color: #aaa196; cursor: not-allowed; }
.btn.secondary { width: auto; min-height: auto; padding: 8px 14px; border: 2px solid var(--line); background: white; box-shadow: none; color: var(--muted); }
.btn.ghost { border: 2px solid var(--line); background: white; box-shadow: 0 3px 0 #d8d0c5; color: var(--ink); }

.feedback { display: none; align-items: center; gap: 11px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; }
.feedback.show { display: flex; animation: feedbackIn 220ms cubic-bezier(.34, 1.56, .64, 1); }
.feedback.ok { background: #e4f7e8; color: var(--leaf-dark); }
.feedback.no { background: #fff0ee; color: #be4c3c; }
.feedback.answer-revealed { background: #eaf8f5; color: var(--lake-dark); }
.feedback-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; font-size: 20px; }
.feedback.ok .feedback-icon { background: var(--leaf); }
.feedback.no .feedback-icon { background: var(--coral); }
.feedback.answer-revealed .feedback-icon { background: var(--lake); font-size: 13px; font-weight: 950; }
.feedback b, .feedback small { display: block; }
.feedback b { font-size: 14px; }
.feedback small { margin-top: 2px; opacity: .76; font-size: 12px; font-weight: 700; }

.particle-layer { position: absolute; z-index: 30; top: 155px; left: 50%; width: 1px; height: 1px; pointer-events: none; }
.particle-layer i { position: absolute; width: 8px; height: 13px; border-radius: 3px; animation: particleBurst 780ms cubic-bezier(.2,.7,.2,1) forwards; }
.particle-layer .gold { background: var(--honey); }
.particle-layer .coral { background: var(--coral); }
.particle-layer .teal { background: var(--lake); }
.particle-layer .green { background: var(--leaf); }
.xp-float { position: absolute; left: 17px; top: 3px; color: var(--honey-dark); font-size: 13px; font-weight: 950; pointer-events: none; animation: xpFloat 760ms ease-out forwards; }

.result-card {
  position: relative;
  width: min(100%, 650px);
  min-height: 600px;
  margin: 8px auto 0;
  overflow: hidden;
  padding: 22px 54px 38px;
  border: 2px solid #ecd9a5;
  border-radius: 32px;
  background: linear-gradient(180deg, #fff1b9 0 41%, #fffefb 41%);
  box-shadow: var(--shadow);
  text-align: center;
}
.retry-card { background: linear-gradient(180deg, #e9f5f4 0 41%, #fffefb 41%); }
.result-art { position: relative; display: grid; place-items: center; height: 250px; margin-bottom: 7px; isolation: isolate; }
.result-art img { position: relative; z-index: 2; width: 275px; height: 275px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(83, 52, 13, .12)); animation: resultLand 480ms cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: 52% 86%; will-change: transform; }
.victory-art img { animation: resultLand 480ms cubic-bezier(.34, 1.56, .64, 1) both, victoryBounce 1.55s cubic-bezier(.45, 0, .26, 1) 480ms infinite; }
.result-art .mascot-shadow { bottom: 15px; width: 118px; height: 18px; }
.victory-art .mascot-shadow { animation: victoryShadow 1.55s ease-in-out 480ms infinite; }
.victory-art .wing-trail { top: 84px; width: 92px; height: 52px; }
.victory-art .wing-trail-left { left: calc(50% - 131px); transform-origin: 100% 50%; animation: wingBeatLeft 210ms ease-in-out 480ms infinite alternate; }
.victory-art .wing-trail-right { right: calc(50% - 131px); transform-origin: 0 50%; animation: wingBeatRight 210ms ease-in-out 560ms infinite alternate-reverse; }
.result-ring { position: absolute; width: 194px; height: 194px; border: 3px dashed rgba(218, 139, 0, .35); border-radius: 50%; animation: slowSpin 16s linear infinite; }
.result-card h1 { margin: 7px 0 7px; font-size: 30px; font-weight: 950; letter-spacing: -.04em; }
.result-card > p { max-width: 430px; margin: 0 auto; color: var(--muted); font-size: 14px; font-weight: 650; line-height: 1.6; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 15px; padding: 15px 0; border: 1.5px solid var(--line); border-radius: 18px; background: #fffaf1; }
.result-stats span + span { border-left: 1.5px solid var(--line); }
.result-stats b, .result-stats small { display: block; }
.result-stats b { color: var(--honey-dark); font-size: 23px; font-weight: 950; }
.result-stats small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 800; }
.unlock-banner { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: 15px; background: #e8f7eb; color: var(--leaf-dark); text-align: left; animation: unlockIn 430ms cubic-bezier(.34, 1.56, .64, 1) 180ms both; }
.unlock-banner > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: var(--leaf); color: white; }
.unlock-banner b, .unlock-banner small { display: block; }
.unlock-banner b { font-size: 13px; }
.unlock-banner small { margin-top: 1px; font-size: 11px; opacity: .8; }
.result-actions { display: grid; gap: 10px; margin-top: 17px; }
.result-confetti i { position: absolute; z-index: 5; width: 9px; height: 18px; border-radius: 5px; background: var(--coral); animation: confettiFall 1.1s ease-out both; }
.result-confetti i:nth-child(1) { top: 25px; left: 15%; transform: rotate(24deg); }
.result-confetti i:nth-child(2) { top: 62px; left: 25%; background: var(--lake); animation-delay: 100ms; }
.result-confetti i:nth-child(3) { top: 28px; left: 78%; background: var(--leaf); animation-delay: 40ms; }
.result-confetti i:nth-child(4) { top: 85px; left: 88%; background: var(--honey); animation-delay: 160ms; }
.result-confetti i:nth-child(5) { top: 128px; left: 8%; background: var(--honey); animation-delay: 220ms; }
.result-confetti i:nth-child(6) { top: 145px; left: 72%; background: var(--coral); animation-delay: 130ms; }

.shake { animation: shake 230ms ease-out; }

@keyframes heroFlight {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  18% { transform: translateY(2px) rotate(-1.5deg) scale(1.012, .988); }
  43% { transform: translateY(-9px) rotate(1deg) scale(.995, 1.008); }
  66% { transform: translateY(-6px) rotate(1.5deg) scale(1); }
  84% { transform: translateY(1px) rotate(-.5deg) scale(1.008, .992); }
}
@keyframes mapPulse { 0% { opacity: .8; transform: scale(.88); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes cloudDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
@keyframes cloudDriftSmall { 0%, 100% { transform: translateX(0) scale(.92); } 50% { transform: translateX(-16px) scale(.92); } }
@keyframes coachIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cheerBounce {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  12% { transform: translateY(2px) rotate(-1deg) scale(1.035, .965); }
  34% { transform: translateY(-11px) rotate(2deg) scale(.975, 1.035); }
  55% { transform: translateY(-8px) rotate(-1deg) scale(1); }
  78% { transform: translateY(1px) rotate(.5deg) scale(1.025, .975); }
  90% { transform: translateY(-2px) scale(.995, 1.005); }
}
@keyframes coachTilt { 0% { transform: rotate(0); } 45% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes wingBeatLeft { from { opacity: .05; transform: rotate(13deg) scale(.72, .82); } to { opacity: .3; transform: rotate(-9deg) scale(1.08, 1.02); } }
@keyframes wingBeatRight { from { opacity: .05; transform: rotate(-13deg) scale(.72, .82); } to { opacity: .3; transform: rotate(9deg) scale(1.08, 1.02); } }
@keyframes idleShadow { 0%, 100% { opacity: .78; transform: translateX(-50%) scaleX(1); } 50% { opacity: .42; transform: translateX(-50%) scaleX(.78); } }
@keyframes cheerShadow { 0%, 100% { opacity: .68; transform: translateX(-50%) scaleX(1); } 36%, 58% { opacity: .24; transform: translateX(-50%) scaleX(.66); } 78% { opacity: .78; transform: translateX(-50%) scaleX(1.08); } }
@keyframes victoryBounce {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  14% { transform: translateY(3px) rotate(-1deg) scale(1.025, .975); }
  38% { transform: translateY(-13px) rotate(1.8deg) scale(.98, 1.025); }
  62% { transform: translateY(-9px) rotate(-1.2deg) scale(1); }
  82% { transform: translateY(1px) rotate(.5deg) scale(1.018, .982); }
  92% { transform: translateY(-2px) scale(.996, 1.004); }
}
@keyframes victoryShadow { 0%, 100% { opacity: .7; transform: translateX(-50%) scaleX(1); } 40%, 62% { opacity: .24; transform: translateX(-50%) scaleX(.68); } 82% { opacity: .8; transform: translateX(-50%) scaleX(1.08); } }
@keyframes feedbackIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes statPop { 0% { transform: scale(1); } 55% { transform: scale(1.14) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes xpFloat { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-38px) scale(1.15); } }
@keyframes particleBurst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), 230px) rotate(var(--r)); } }
@keyframes resultLand { from { opacity: 0; transform: translateY(-25px) scale(.78); } to { opacity: 1; transform: none; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes unlockIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes confettiFall { from { opacity: 0; transform: translateY(-20px) rotate(0); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(110px) rotate(150deg); } }
@keyframes soundBar { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@keyframes hostHello { 0%,100% { transform: translateY(0) rotate(-1deg); } 48% { transform: translateY(-8px) rotate(1deg); } }
@keyframes audioPulse { 0%,100% { box-shadow: 0 5px 0 #23838d, 0 0 0 0 rgba(46,165,178,.18); } 50% { box-shadow: 0 5px 0 #23838d, 0 0 0 10px rgba(46,165,178,0); } }
@keyframes ipCelebrate { 0% { transform: translateY(0) scale(.92); } 48% { transform: translateY(-15px) rotate(3deg) scale(1.08); } 72% { transform: translateY(2px) rotate(-2deg) scale(.98); } 100% { transform: none; } }
@keyframes ipOops { 0%,100% { transform: none; } 25% { transform: translateX(-5px) rotate(-3deg); } 55% { transform: translateX(5px) rotate(3deg); } 78% { transform: translateX(-2px) rotate(-1deg); } }
@keyframes characterTap { 0%,100% { transform: none; } 45% { transform: translateY(-7px) rotate(-2deg) scale(1.06); } }
@keyframes characterPosePop { 0% { opacity: .5; transform: translateY(7px) scale(.84) rotate(-3deg); } 58% { opacity: 1; transform: translateY(-6px) scale(1.06) rotate(2deg); } 100% { transform: none; } }
@keyframes infoNudge { 0%,75%,100% { transform: translateY(0) rotate(0); } 82% { transform: translateY(-4px) rotate(-8deg); } 90% { transform: translateY(1px) rotate(6deg); } }
@keyframes optionCorrect { 0% { transform: scale(.98); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes optionWrong { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
@keyframes optionAudition { 0% { transform: scale(.985); } 70% { transform: scale(1.01); } 100% { transform: scale(1); } }
@keyframes readingReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 680px) {
  #app { padding: 0 14px 34px; }
  .topbar { height: 68px; gap: 8px; }
  .brand-mark { width: 43px; height: 43px; border-radius: 14px; }
  .brand-mark img { width: 50px; height: 50px; }
  .brand b { font-size: 17px; }
  .brand small { font-size: 10px; }
  .stats { gap: 5px; }
  .stat { min-width: 45px; height: 34px; padding: 0 7px; border-radius: 12px; font-size: 13px; }
  .stat-heart .icon, .stat-xp .icon { font-size: 17px; }
  .stat-streak .icon { font-size: 16px; }

  .map-shell { border-radius: 25px; }
  .map-intro { align-items: stretch; flex-direction: column; gap: 15px; margin: 12px; padding: 20px; border-radius: 20px; }
  .map-intro h1 { margin-top: 4px; font-size: 29px; }
  .map-intro p { max-width: 260px; font-size: 13px; line-height: 1.55; }
  .map-progress-card { flex-basis: auto; width: 100%; padding: 10px 13px; }
  .adventure-map { height: 1830px; margin: 0 8px; }
  .map-route { inset-inline: 1%; width: 98%; }
  .map-route-base { stroke-width: 11; }
  .map-route-lit { stroke-width: 13; }
  .map-stop { gap: 8px; }
  .stop-1 { top: 20px; left: 0; }
  .stop-2 { top: 158px; right: 0; }
  .stop-3 { top: 297px; left: 1%; }
  .stop-4 { top: 438px; right: 0; }
  .stop-5 { top: 578px; left: 0; }
  .stop-6 { top: 718px; right: 0; }
  .stop-7 { top: 858px; left: 1%; }
  .stop-8 { top: 998px; right: 0; }
  .stop-9 { top: 1138px; left: 0; }
  .stop-10 { top: 1278px; right: 0; }
  .stop-11 { top: 1418px; left: 1%; }
  .stop-12 { top: 1558px; right: 0; }
  .stop-13 { top: 1698px; left: 0; }
  .stop-node { flex-basis: 80px; width: 80px; height: 80px; border-width: 4px; box-shadow: 0 5px 0 #d29b2b, 0 10px 18px rgba(80,61,24,.14); }
  .stop-node img { width: 87px; height: 87px; }
  .stop-symbol { font-size: 25px; }
  .stop-badge { right: -4px; bottom: -1px; width: 27px; height: 27px; border-width: 2px; font-size: 9px; }
  .stop-label { min-width: 158px; max-width: 172px; padding: 9px 10px; border-radius: 14px; }
  .stop-label small { font-size: 8px; }
  .stop-label b { margin: 2px 0; font-size: 14px; }
  .stop-label em { font-size: 9px; }
  .map-stop.current .stop-node::before { inset: -10px; border-width: 2px; }
  .map-stop.complete .stop-node { box-shadow: 0 5px 0 var(--leaf-dark), 0 10px 18px rgba(52,139,73,.16); }
  .map-stop.locked .stop-node { box-shadow: 0 5px 0 #aeb5ac; }
  .hill-one { left: -150px; width: 330px; }
  .hill-two { right: -170px; }
  .map-lake { right: -170px; width: 390px; }
  .map-pagoda { top: 388px; left: 5px; transform: scale(.75); }
  .map-footer { align-items: flex-start; margin: 0 12px 12px; padding: 13px 14px; }
  .map-footer small { line-height: 1.45; }
  .map-compass { flex-basis: 34px; width: 34px; height: 34px; font-size: 18px; }
  .unit-nav { margin: 0 2px 10px; }
  .map-back { padding: 7px 10px; }
  .unit-location { font-size: 10px; }

  .home-hero { min-height: 410px; border-radius: 25px; }
  .hero-copy { z-index: 5; width: 100%; padding: 29px 25px 0; }
  .hero-copy h1 { font-size: 31px; }
  .hero-copy p { font-size: 14px; }
  .hero-chips { margin-top: 15px; }
  .hero-character { right: -8px; bottom: -17px; width: 67%; height: 62%; }
  .hero-character img { right: -12%; bottom: -19%; width: 116%; }
  .speech-bubble { top: 7px; left: -24px; padding: 8px 11px; }
  .speech-bubble b { font-size: 15px; }
  .sun-dot { top: 200px; right: 30px; }
  .hero-hills { bottom: 36px; width: 84%; }
  .hero-lake { width: 80%; }

  .learning-path { margin-top: 27px; }
  .section-heading { align-items: center; }
  .section-heading h2 { font-size: 20px; }
  .unit-progress { padding: 6px 8px; font-size: 10px; }
  .level-list::before { left: 48px; }
  .level { grid-template-columns: 73px 1fr 42px; gap: 11px; min-height: 98px; padding: 8px 10px 8px 8px; border-radius: 20px; }
  .level-character { width: 70px; height: 78px; border-radius: 15px; }
  .level-body strong { font-size: 16px; }
  .level-body small { font-size: 11px; }
  .honeycomb { width: 40px; height: 44px; font-size: 14px; }
  .level-status small { font-size: 9px; }
  .culture-note { padding: 14px; }
  .culture-note p { padding-right: 30px; }

  .episode-level-list::before { display: none; }
  .episode-level { grid-template-columns: minmax(0, 1fr) 45px; gap: 10px; min-height: 88px; padding: 12px 13px; }
  .episode-level .level-body small { max-width: none; }

  .library-hero { min-height: 352px; padding: 26px 23px 170px; border-radius: 25px; }
  .library-hero h1 { font-size: 31px; }
  .library-hero p { font-size: 13px; }
  .library-character-trigger { right: -2px; bottom: -25px; width: 215px; height: 215px; }
  .library-character-trigger img { width: 205px; height: 205px; }
  .library-character-trigger > span { right: 20px; bottom: 15px; opacity: 1; transform: none; }
  .library-character-trigger .character-info-badge { right: 25px; bottom: 50px; }
  .library-hero::before { right: 68px; bottom: -98px; }
  .episode-section { margin-top: 26px; }
  .episode-grid { grid-template-columns: 1fr; gap: 11px; }
  .episode-card { grid-template-columns: 52px minmax(0, 1fr) 22px; min-height: 108px; gap: 12px; padding: 14px; border-radius: 19px; }
  .episode-symbol { width: 50px; height: 50px; border-radius: 16px; font-size: 23px; }
  .episode-copy b { font-size: 16px; }
  .episode-copy em { font-size: 10px; }

  .episode-hero { grid-template-columns: 78px 1fr; gap: 16px; padding: 19px 17px; border-radius: 22px; }
  .episode-hero-symbol { width: 75px; height: 75px; border-width: 4px; border-radius: 23px; box-shadow: 0 5px 0 #d9a127, 0 10px 18px rgba(80,61,24,.1); font-size: 36px; }
  .episode-hero h1 { font-size: 24px; }
  .episode-hero p { font-size: 11px; }
  .episode-meta { margin-top: 8px; }
  .episode-meta span { padding: 4px 7px; font-size: 9px; }
  .now-playing { margin-top: 14px; padding: 10px 12px; }
  .clip-row { grid-template-columns: 41px minmax(0, 1fr) 20px; gap: 10px; padding: 11px 10px; border-radius: 16px; }
  .clip-play { width: 39px; height: 39px; border-radius: 13px; }
  .clip-copy b { font-size: 14px; }
  .clip-copy em, .clip-copy span { font-size: 10px; }
  .episode-complete-bar { bottom: 8px; margin-inline: -2px; padding: 9px; border-radius: 18px; }
  .episode-result .result-stats b { font-size: 16px; }

  .question-coach.episode-coach {
    grid-template-areas:
      "bubble bubble"
      "mascot copy";
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 7px 12px;
    min-height: 0;
    margin-top: 0;
  }
  .episode-coach > .coach-bubble { width: 100%; margin: 0; padding: 7px 10px; border-radius: 12px; font-size: 10px; }
  .question-coach .episode-ip-mascot,
  .question-coach .episode-ip-mascot img { width: 128px; height: 132px; }
  .audio-challenge { min-height: 78px; gap: 12px; margin-bottom: 11px; padding: 10px 13px; border-radius: 18px; }
  .audio-orb { flex-basis: 47px; width: 47px; height: 47px; border-radius: 15px; }
  .audio-rings { right: 4px; width: 68px; height: 68px; }
  .phonetic-cue { grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-height: 52px; margin-bottom: 10px; padding: 8px 10px; border-radius: 14px; }
  .phonetic-cue > b { font-size: 13px; }
  .phonetic-cue > small { grid-column: 2; margin-top: -5px; font-size: 8px; }
  .episode-cue-card { min-height: 95px; margin-bottom: 11px; padding: 14px 96px 14px 15px; border-radius: 18px; }
  .episode-cue-card .dialect-reading b { font-size: 19px; }
  .episode-cue-card .dialect-reading em { font-size: 9px; }
  .judge-pinyin-only b { font-size: 17px; }
  .judge-pinyin-only em { font-size: 8px; }
  .cue-audio { right: 10px; max-width: 78px; padding: 8px; }
  .match-instruction { min-height: 62px; gap: 10px; margin-bottom: 10px; padding: 9px 11px; border-radius: 17px; }
  .match-instruction > span { flex-basis: 39px; width: 39px; height: 39px; border-radius: 13px; }
  .judge-statement { padding: 11px 13px; border-radius: 16px; }
  .judge-statement b { font-size: 17px; }
  .judge-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .episode-order-board { padding: 10px; border-radius: 17px; }
  .match-board { gap: 7px; }
  .match-column { gap: 6px; }
  .match-card { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; min-height: 59px; padding: 7px; border-radius: 14px; }
  .match-card > span:first-child { width: 23px; height: 23px; border-radius: 8px; font-size: 9px; }
  .match-card b { font-size: 11px; }
  .match-card em { font-size: 8px; }
  .match-card .match-reading b { font-size: 13px; }
  .match-card .match-reading em { font-size: 7px; }

  .lesson-shell { margin-top: 0; }
  .question-head { grid-template-columns: 39px 1fr 35px; gap: 9px; }
  .quit-btn { width: 38px !important; height: 38px; border-radius: 12px !important; }
  .lesson-label { margin: 18px 0 2px 86px; }
  .question-coach { grid-template-columns: 75px 1fr; gap: 10px; min-height: 105px; margin-bottom: 11px; }
  .coach-mascot { width: 87px; height: 96px; }
  .question-coach img { width: 87px; height: 96px; }
  .coach-mascot .wing-trail { top: 29px; width: 34px; height: 21px; }
  .coach-mascot .wing-trail-left { left: 2px; }
  .coach-mascot .wing-trail-right { right: 0; }
  .coach-mascot .mascot-shadow { bottom: 2px; width: 46px; height: 9px; }
  .coach-bubble { margin-bottom: 5px; padding: 5px 8px; font-size: 10px; }
  .prompt { font-size: 21px; }
  .options { grid-template-columns: 1fr; gap: 8px; }
  .option { min-height: 58px; padding: 9px 12px; border-radius: 16px; font-size: 15px; }
  .option-reading b { font-size: 20px; }
  .compact-word-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .compact-word-options .option { min-height: 54px; padding: 7px 8px; border-radius: 14px; font-size: 13px; }
  .compact-word-options .option.with-reading { grid-template-columns: 25px minmax(0, 1fr); column-gap: 7px; }
  .compact-word-options .option-key { width: 25px; height: 25px; font-size: 10px; }
  .compact-word-options .option-reading { margin-top: 3px; padding-top: 4px; }
  .compact-word-options .option-reading b { font-size: 18px; }
  .word-question-shell .episode-coach { min-height: 0; }
  .word-question-shell .episode-ip-mascot,
  .word-question-shell .episode-ip-mascot img { width: 122px; height: 126px; }
  .word-question-shell .audio-challenge { min-height: 66px; margin-bottom: 8px; }
  .word-question-shell .audio-orb { flex-basis: 42px; width: 42px; height: 42px; }
  .word-question-shell .phonetic-cue { min-height: 44px; margin-bottom: 8px; }
  .actions { margin-top: 13px; }
  .feedback { margin-top: 10px; }
  .particle-layer { top: 115px; }
  .result-card { min-height: 0; padding: 15px 22px 28px; border-radius: 26px; }
  .result-art { height: 215px; }
  .result-art img { width: 235px; height: 235px; }
  .victory-art .wing-trail { top: 72px; width: 76px; height: 44px; }
  .victory-art .wing-trail-left { left: calc(50% - 112px); }
  .victory-art .wing-trail-right { right: calc(50% - 112px); }
  .result-art .mascot-shadow { bottom: 9px; width: 96px; }
  .result-ring { width: 165px; height: 165px; }
  .result-card h1 { font-size: 26px; }

  .character-dialog { width: min(94vw, 480px); max-height: 92vh; }
  .character-knowledge-card { grid-template-areas: "header header" "art copy"; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px 10px; min-height: 330px; padding: 20px 17px 24px 12px; border-width: 2px; border-radius: 25px; }
  .character-knowledge-header { padding: 0 40px 0 7px; }
  .character-pose-button { width: 140px; height: 190px; }
  .character-pose-button img { width: 155px; height: 180px; }
  .character-knowledge-ring { inset: 40px 5px 8px; }
  .character-pose-line { max-width: 135px; margin-top: -6px; padding: 6px 7px; font-size: 8px; }
  .character-knowledge-tag { padding: 5px 7px; font-size: 8px; }
  .character-knowledge-header h2 { margin: 7px 0 0; font-size: 24px; line-height: 1.08; }
  .character-knowledge-copy p { margin-bottom: 7px; font-size: 11px; line-height: 1.55; }
  .character-action-button { margin-top: 4px; padding: 9px 13px; font-size: 11px; }
  .character-dialog-close { top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 11px; font-size: 22px; }
}

@media (max-width: 420px) {
  #app { padding-inline: 10px; }
  .topbar { height: 64px; gap: 5px; padding-inline: 1px; }
  .brand { gap: 6px; }
  .brand-mark { width: 39px; height: 39px; border-radius: 13px; }
  .brand-mark img { width: 46px; height: 46px; }
  .brand b { font-size: 15px; line-height: 1; }
  .brand small { margin-top: 3px; font-size: 8px; line-height: 1; letter-spacing: .02em; }
  .stats { gap: 3px; margin-left: auto; }
  .stat { gap: 3px; min-width: 0; height: 32px; padding: 0 6px; border-radius: 11px; font-size: 12px; }
  .stat-heart .icon, .stat-xp .icon, .stat-streak .icon { font-size: 15px; }
  .hero-character { width: 75%; }
  .level-body small { max-width: 145px; }
  .episode-level .level-body small { max-width: none; }
  .adventure-map { height: 1820px; }
  .stop-1 { left: -1%; }
  .stop-2 { right: -1%; }
  .stop-3 { left: 0; }
  .stop-4 { right: -1%; }
  .stop-5 { left: -1%; }
  .stop-6 { right: -1%; }
  .stop-7 { left: 0; }
  .stop-8 { right: -1%; }
  .stop-9 { left: -1%; }
  .stop-10 { right: -1%; }
  .stop-11 { left: 0; }
  .stop-12 { right: -1%; }
  .stop-13 { left: -1%; }
  .stop-label { min-width: 145px; max-width: 152px; }
  .map-pagoda { left: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}