/* Small ambient details stay in the margins, never over lesson controls. */
.picnic-background { inset: 0; pointer-events: none; position: absolute; z-index: 0; overflow: hidden; }
.lesson-menu { z-index: 1; }
body:has(#menu-screen[hidden]) .picnic-background { display: none; }
.picnic-cloud { background: rgb(255 255 255 / 45%); border-radius: 50%; height: 22px; position: absolute; top: 11%; width: 110px; animation: picnic-drift 18s ease-in-out infinite alternate; }
.picnic-cloud::before, .picnic-cloud::after { background: inherit; border-radius: 50%; content: ""; position: absolute; bottom: 6px; }
.picnic-cloud::before { width: 48px; height: 35px; left: 17px; }
.picnic-cloud::after { width: 38px; height: 28px; right: 17px; }
.picnic-cloud:first-child { left: 28%; }
.picnic-cloud:nth-child(2) { right: 27%; top: 7%; animation-delay: -8s; transform: scale(.7); }
.picnic-butterfly { background: none; border: 0; cursor: pointer; padding: 5px; pointer-events: auto; position: absolute; top: 38%; left: .6%; width: 50px; height: 60px; }
.picnic-butterfly:nth-of-type(2) { left: auto; right: .6%; top: 61%; animation-delay: -2s; }
.picnic-butterfly svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 2px rgb(64 67 19 / 20%)); animation: picnic-bob 5s ease-in-out infinite; }
.picnic-butterfly:focus-visible { outline: 3px solid #0a346f; border-radius: 50%; }
.picnic-butterfly.is-greeting svg { animation: picnic-wave 900ms ease-in-out; }
.picnic-greeting { position: absolute; top: 31%; left: 1%; max-width: 170px; background: #fffdf2; border: 2px solid #efd367; border-radius: 18px; color: #73491f; padding: 10px 14px; font-size: 14px; font-weight: 800; opacity: 0; transition: opacity 150ms; }
.picnic-greeting.is-visible { opacity: 1; }
@keyframes picnic-drift { to { translate: 30px 0; } }
@keyframes picnic-bob { 50% { translate: 0 -12px; rotate: 8deg; } }
@keyframes picnic-wave { 30% { scale: 1.25; rotate: -15deg; } 70% { scale: 1.25; rotate: 15deg; } }
@media (max-width: 820px) {
  .picnic-butterfly, .picnic-greeting { display: none; }
  .picnic-cloud { top: 8%; width: 70px; opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .picnic-cloud, .picnic-butterfly svg, .picnic-butterfly.is-greeting svg { animation: none; }
  .picnic-greeting { transition: none; }
}

:root {
  --navy: #0a346f;
  --green: #24934a;
  --coral: #f65c5f;
  --blue: #2598e7;
  --yellow: #ffc739;
  --cream: #fffdf7;
  --purple: #8b6bdb;
  --ink: #123766;
  --muted: #61748d;
  --round-font: ui-rounded, "Arial Rounded MT Bold", "Nunito", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --paper-shadow: 0 18px 0 rgb(95 62 23 / 8%), 0 26px 55px rgb(72 55 22 / 22%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  min-width: 320px;
}

body {
  background: #f8d743;
  color: var(--ink);
  font-family: var(--round-font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.scene {
  background: #f8d743 url("assets/pinyin-adventure-bg.png") center / cover no-repeat;
  inset: 0;
  position: fixed;
}

.app-shell {
  height: 100dvh;
  isolation: isolate;
  min-height: 590px;
  position: relative;
  width: 100%;
}

.app-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 3.2%;
  position: absolute;
  right: 3.2%;
  top: 3%;
  z-index: 5;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.member-button {
  align-items: center;
  background: linear-gradient(#fff9d7, #ffd75d);
  border: 4px solid rgb(255 255 255 / 92%);
  border-radius: 22px;
  box-shadow: 0 7px 0 #c88a22, 0 12px 24px rgb(88 42 24 / 16%);
  color: #693d0b;
  display: inline-flex;
  font-size: clamp(0.78rem, 1.2vw, 1.05rem);
  font-weight: 950;
  gap: 0.38rem;
  min-height: 52px;
  padding: 0.62rem 1rem 0.72rem;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.member-button.is-member {
  background: linear-gradient(#eaffd2, #9de36f);
  box-shadow: 0 7px 0 #438a37, 0 12px 24px rgb(39 101 39 / 18%);
  color: #175c2d;
}

.member-button:hover {
  filter: brightness(1.03);
  transform: translateY(-2px);
}

.brand {
  align-items: baseline;
  background: rgb(255 253 247 / 94%);
  border: 4px solid rgb(255 255 255 / 80%);
  border-radius: 35% 48% 38% 44% / 45% 40% 52% 46%;
  box-shadow: 0 8px 0 rgb(101 71 25 / 10%), 0 11px 25px rgb(73 54 24 / 12%);
  color: #6c1722;
  display: flex;
  filter: drop-shadow(0 2px 0 rgb(255 255 255 / 50%));
  font-size: clamp(1.55rem, 3vw, 3.2rem);
  gap: 0.13em;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
  padding: 0.42em 0.7em 0.48em;
  transform: rotate(-1deg);
  white-space: nowrap;
}

.brand b {
  color: var(--green);
}

.brand em {
  color: #5b321c;
  font-style: normal;
}

.grown-ups-button {
  align-items: center;
  background: var(--coral);
  border: 4px solid rgb(255 255 255 / 92%);
  border-radius: 22px;
  box-shadow: 0 7px 0 #c83e42, 0 12px 24px rgb(88 42 24 / 18%);
  color: white;
  cursor: pointer;
  display: flex;
  font-size: clamp(0.82rem, 1.25vw, 1.2rem);
  font-weight: 900;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.65rem 1.25rem 0.75rem;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.grown-ups-button svg {
  fill: white;
  height: 24px;
  width: 24px;
}

.grown-ups-button svg path {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-width: 2;
}

.grown-ups-button:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
}

.grown-ups-button:active {
  box-shadow: 0 3px 0 #c83e42, 0 7px 15px rgb(88 42 24 / 16%);
  transform: translateY(4px);
}

.lesson-menu {
  display: flex;
  flex-direction: column;
  inset: 13.5% 0 3.5%;
  margin-inline: auto;
  position: absolute;
  width: min(88vw, 1450px);
}

.lesson-menu[hidden],
.game-board[hidden],
.mode-and-progress-row[hidden],
.exercise-lessons-link[hidden] {
  display: none;
}

.menu-heading {
  align-self: center;
  background: rgb(255 253 247 / 96%);
  border: 5px solid rgb(255 255 255 / 88%);
  border-radius: 44% 37% 42% 34% / 39% 46% 36% 45%;
  box-shadow: 0 9px 0 rgb(87 63 26 / 9%), 0 17px 34px rgb(73 54 24 / 13%);
  flex: 0 0 auto;
  padding: 0.72rem clamp(2.3rem, 5vw, 5rem) 0.85rem;
  text-align: center;
  transform: rotate(-0.3deg);
}

.menu-heading h2 {
  color: var(--navy);
  font-size: clamp(1.7rem, 2.8vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}

.menu-heading h2::before,
.menu-heading h2::after {
  color: var(--yellow);
  content: "✦";
  display: inline-block;
  font-size: 0.65em;
  margin: 0 0.45em;
  transform: rotate(13deg);
}

.menu-heading h2::after {
  transform: rotate(-13deg);
}

.menu-heading p {
  background: #fff1c8;
  border-radius: 999px;
  color: #754217;
  display: inline-block;
  font-size: clamp(0.82rem, 1.25vw, 1.12rem);
  font-weight: 900;
  margin: 0.42rem 0 0;
  padding: 0.28rem 1.15rem 0.35rem;
}

.lesson-grid {
  align-content: center;
  display: grid;
  flex: 1 1 auto;
  gap: clamp(0.65rem, 1.25vw, 1.15rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-right: 3.5%;
  min-height: 0;
  padding: clamp(0.75rem, 1.8vh, 1.25rem) 0 0;
}

.lesson-grid.has-member-tools {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lesson-grid.has-member-tools .lesson-card {
  min-height: min(22vh, 185px);
}

.lesson-grid.has-member-tools .lesson-symbol {
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  height: clamp(56px, 7vh, 72px);
}

.lesson-card {
  --lesson-accent: var(--coral);
  --lesson-dark: #c94448;
  align-items: center;
  background: rgb(255 253 247 / 96%);
  border: 5px solid rgb(255 255 255 / 90%);
  border-radius: 34px 28px 36px 30px;
  box-shadow: inset 0 -5px 0 rgb(23 64 106 / 5%), 0 8px 0 rgb(61 72 73 / 10%), 0 16px 30px rgb(44 60 54 / 15%);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(25vh, 218px);
  overflow: hidden;
  padding: 0.8rem 1rem 1rem;
  position: relative;
  text-align: center;
  transition: filter 160ms ease, transform 180ms cubic-bezier(.2, 1.5, .35, 1), box-shadow 160ms ease;
}

.lesson-card:nth-child(even) {
  transform: rotate(0.7deg);
}

.lesson-card:nth-child(3n) {
  transform: rotate(-0.7deg);
}

.lesson-card--blue {
  --lesson-accent: var(--blue);
  --lesson-dark: #1473ad;
}

.lesson-card--green {
  --lesson-accent: #50b85c;
  --lesson-dark: #287d34;
}

.lesson-card--yellow {
  --lesson-accent: #ffb71b;
  --lesson-dark: #cb7b0c;
}

.lesson-card--purple {
  --lesson-accent: var(--purple);
  --lesson-dark: #6447ad;
}

.lesson-card:hover {
  filter: brightness(1.02) saturate(1.03);
  transform: translateY(-5px) rotate(0);
}

.lesson-card.is-locked {
  background: linear-gradient(145deg, rgb(255 253 247 / 98%), rgb(246 240 222 / 98%));
}

.lesson-card.is-locked .lesson-symbol {
  filter: saturate(0.55);
  opacity: 0.72;
}

.lesson-card.is-locked .lesson-arrow {
  display: none;
}

.lesson-card--special {
  --lesson-accent: #8b6bdb;
  --lesson-dark: #5c3ca7;
  background: linear-gradient(145deg, #fffdf7, #f2ecff);
}

.lesson-member-badge {
  align-items: center;
  background: #183d71;
  border: 3px solid white;
  border-radius: 999px;
  box-shadow: 0 4px 0 #092954;
  color: white;
  display: inline-flex;
  font-size: clamp(0.64rem, 0.85vw, 0.78rem);
  font-weight: 950;
  left: 0.7rem;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.55rem 0.36rem;
  position: absolute;
  top: 0.7rem;
}

.lesson-member-badge.is-unlocked {
  background: #2f9148;
  box-shadow: 0 4px 0 #176838;
}

.lesson-card:active {
  box-shadow: inset 0 -2px 0 rgb(23 64 106 / 5%), 0 3px 0 rgb(61 72 73 / 11%);
  transform: translateY(4px) rotate(0);
}

.lesson-count {
  align-items: center;
  background: var(--lesson-accent);
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 5px 0 var(--lesson-dark);
  color: white;
  display: flex;
  font-size: clamp(0.9rem, 1.45vw, 1.25rem);
  font-weight: 950;
  height: clamp(42px, 4vw, 56px);
  justify-content: center;
  position: absolute;
  right: 0.7rem;
  top: 0.65rem;
  width: clamp(42px, 4vw, 56px);
}

.lesson-symbol {
  align-items: center;
  background: color-mix(in srgb, var(--lesson-accent) 18%, white);
  border-radius: 24px 19px 22px 18px;
  color: var(--lesson-dark);
  display: flex;
  font-size: clamp(2.35rem, 4vw, 3.8rem);
  font-weight: 950;
  height: clamp(65px, 8vh, 84px);
  justify-content: center;
  letter-spacing: -0.08em;
  line-height: 1;
  margin-bottom: 0.45rem;
  min-width: clamp(86px, 8vw, 112px);
  padding: 0 0.65rem 0.12rem;
  transform: rotate(-2deg);
}

.lesson-card > strong {
  background: color-mix(in srgb, var(--lesson-accent) 22%, white);
  border-radius: 999px;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  line-height: 1;
  padding: 0.36rem 1.15rem 0.48rem;
  white-space: nowrap;
}

.lesson-card > small {
  color: #623e22;
  font-size: clamp(0.72rem, 1.05vw, 1rem);
  font-weight: 850;
  margin-top: 0.45rem;
  white-space: nowrap;
}

.lesson-arrow {
  align-items: center;
  background: var(--lesson-accent);
  border: 3px solid white;
  border-radius: 50%;
  bottom: 0.55rem;
  box-shadow: 0 3px 0 var(--lesson-dark);
  color: white;
  display: flex;
  height: 30px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: 0.65rem;
  transform: translateX(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
  width: 30px;
}

.lesson-card:hover .lesson-arrow,
.lesson-card:focus-visible .lesson-arrow {
  opacity: 1;
  transform: translateX(0);
}

.lesson-arrow svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  width: 17px;
}

.game-board {
  background: rgb(255 253 247 / 97%);
  border: 6px solid rgb(255 255 255 / 80%);
  border-radius: 56px 45px 61px 48px / 48px 58px 44px 57px;
  box-shadow: var(--paper-shadow);
  display: flex;
  flex-direction: column;
  height: min(80vh, 730px);
  left: 43%;
  min-height: 490px;
  padding: clamp(0.8rem, 1.8vh, 1.25rem) clamp(1.25rem, 3vw, 2.6rem) clamp(1.15rem, 2.2vh, 1.7rem);
  position: absolute;
  top: 57%;
  transform: translate(-50%, -50%);
  width: min(73vw, 1040px);
}

.game-topbar {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr auto 1fr;
  min-height: 46px;
}

.game-topbar > strong {
  background: #fff1c8;
  border: 3px solid white;
  border-radius: 999px;
  color: var(--navy);
  font-size: clamp(0.9rem, 1.45vw, 1.2rem);
  grid-column: 2;
  padding: 0.35rem 1.1rem 0.45rem;
  white-space: nowrap;
}

.back-to-menu-button {
  align-items: center;
  background: #eaf5e3;
  border: 3px solid white;
  border-radius: 16px;
  box-shadow: 0 4px 0 #b9d7a8;
  color: #176838;
  cursor: pointer;
  display: inline-flex;
  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  font-weight: 900;
  gap: 0.25rem;
  grid-column: 1;
  justify-self: start;
  min-height: 38px;
  padding: 0.35rem 0.7rem 0.48rem;
}

.back-to-menu-button svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  width: 18px;
}

.game-hud {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  min-height: 74px;
}

.bamboo-track {
  align-items: center;
  display: flex;
  gap: clamp(0.2rem, 0.55vw, 0.5rem);
  isolation: isolate;
  padding: 0 0.4rem;
  position: relative;
}

.bamboo-track::before {
  background: #bd8a4c;
  border: 3px solid rgb(100 62 21 / 13%);
  border-radius: 999px;
  content: "";
  height: 10px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.bamboo-slot {
  position: relative;
  align-items: center;
  background: #f0eee8;
  border: 4px solid white;
  border-radius: 17px;
  box-shadow: 0 4px 0 rgb(81 63 29 / 15%);
  display: flex;
  height: clamp(47px, 5vw, 68px);
  justify-content: center;
  transform: rotate(-2deg);
  width: clamp(47px, 5vw, 68px);
}

.bamboo-slot:nth-child(even) {
  transform: rotate(2deg);
}

.bamboo-slot img {
  filter: grayscale(1);
  height: 168%;
  opacity: 0.22;
  transition: filter 240ms ease, opacity 240ms ease, transform 240ms ease;
  width: 168%;
}

.bamboo-slot.filled {
  background: #e8f8cd;
  border-color: #fffce4;
}

.bamboo-slot.filled img {
  filter: none;
  opacity: 1;
}

.bamboo-slot.just-earned {
  animation: bamboo-pop 650ms cubic-bezier(.2, 1.5, .35, 1) both;
}

.bamboo-bundle-count {
  z-index: 2;
  background: #216c39;
  border: 1px solid #fffce4;
  border-radius: 999px;
  bottom: -5px;
  color: white;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 900;
  line-height: 1.2;
  padding: 2px 4px;
  position: absolute;
  right: -5px;
}

.hud-counters {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin-left: clamp(0.65rem, 1.3vw, 1.2rem);
}

.progress-count,
.streak-count {
  align-items: center;
  background: #fff7d7;
  border: 3px solid white;
  border-radius: 999px;
  box-shadow: 0 4px 0 rgb(113 80 29 / 10%);
  display: flex;
  font-size: clamp(0.9rem, 1.65vw, 1.35rem);
  justify-content: center;
  min-height: 43px;
  padding: 0.35rem 0.78rem;
  white-space: nowrap;
}

.progress-count {
  color: #176838;
  min-width: 84px;
}

.streak-count {
  color: #7f4a18;
  gap: 0.28rem;
}

.streak-count svg {
  fill: #c6c1b6;
  height: 22px;
  transition: fill 180ms ease, transform 180ms ease;
  width: 22px;
}

.streak-count.is-active svg {
  fill: #ff8c22;
  transform: scale(1.12) rotate(-4deg);
}

.streak-count b {
  color: #f07c18;
  font-size: 1.15em;
}

.game-prompt {
  color: var(--navy);
  flex: 0 0 auto;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0.15rem 0 clamp(0.55rem, 1.6vh, 1rem);
  min-height: 1.15em;
  text-align: center;
  transition: color 180ms ease, transform 180ms ease;
}

.game-prompt::before,
.game-prompt::after {
  color: var(--yellow);
  content: "✦";
  display: inline-block;
  font-size: 0.7em;
  margin: 0 0.45em;
  transform: rotate(12deg);
}

.game-prompt::after {
  transform: rotate(-12deg);
}

.game-prompt.is-correct {
  color: var(--green);
  transform: scale(1.035);
}

.game-prompt.is-try-again {
  color: #c84d50;
}

.question-stage {
  display: flex;
  flex: 1 1 auto;
  gap: clamp(0.8rem, 1.8vw, 1.35rem);
  justify-content: center;
  min-height: 0;
  padding: 0 7%;
  transition: opacity 160ms ease, transform 260ms cubic-bezier(.2, 1.4, .4, 1);
}

.target-card {
  align-items: center;
  border: 5px solid rgb(255 255 255 / 90%);
  border-radius: 34px 28px 36px 30px;
  box-shadow: inset 0 -5px 0 rgb(23 64 106 / 5%), 0 8px 0 rgb(53 66 84 / 8%);
  display: flex;
  flex: 0 1 450px;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.hanzi-card {
  background: #fff5dc;
  flex-direction: column;
  max-width: 450px;
}

.hanzi-label {
  background: #ffc4c1;
  border-radius: 999px;
  color: #6c3440;
  font-size: clamp(0.78rem, 1.25vw, 1.05rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.9rem;
  position: absolute;
  top: 8%;
}

.hanzi {
  color: var(--navy);
  font-family: var(--round-font);
  font-weight: 950;
  line-height: 0.9;
  position: relative;
  text-align: center;
  text-shadow: 0 4px 0 rgb(255 255 255 / 70%);
}

.hanzi {
  font-family: "PingFang SC", "Microsoft YaHei", var(--round-font);
  font-size: clamp(7rem, 13vw, 11.5rem);
  margin-top: 0.14em;
}

.hanzi.is-compound {
  font-size: clamp(4.8rem, 9vw, 7.6rem);
}

.question-stage.is-changing {
  opacity: 0;
  transform: scale(0.92) rotate(-1.5deg);
}

.answers {
  display: grid;
  flex: 0 0 auto;
  gap: clamp(0.65rem, 1.35vw, 1.15rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(0.75rem, 1.8vh, 1.25rem);
}

.answer-button {
  align-items: center;
  background: var(--answer-color);
  border: 5px solid rgb(255 255 255 / 94%);
  border-radius: 30px;
  box-shadow: inset 0 -5px 0 rgb(24 40 50 / 10%), 0 8px 0 var(--answer-shadow), 0 13px 22px rgb(40 47 56 / 13%);
  color: white;
  cursor: pointer;
  display: flex;
  font-size: clamp(2.4rem, 4.8vw, 4.35rem);
  font-weight: 950;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: clamp(88px, 14vh, 132px);
  padding: 0.35rem 0.65rem 0.65rem;
  text-shadow: 0 3px 0 rgb(56 43 31 / 13%);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.answer-button:nth-child(1) {
  --answer-color: var(--coral);
  --answer-shadow: #c94448;
}

.answer-button:nth-child(2) {
  --answer-color: var(--blue);
  --answer-shadow: #1473ad;
}

.answer-button:nth-child(3) {
  --answer-color: #4caf59;
  --answer-shadow: #287d34;
}

.answer-button:hover:not(:disabled) {
  filter: brightness(1.04) saturate(1.04);
  transform: translateY(-3px) scale(1.015);
}

.answer-button:active:not(:disabled) {
  box-shadow: inset 0 -2px 0 rgb(24 40 50 / 10%), 0 3px 0 var(--answer-shadow);
  transform: translateY(5px);
}

.answer-button.is-long {
  font-size: clamp(1.45rem, 3vw, 2.5rem);
}

.answer-button.is-wrong {
  animation: gentle-wiggle 470ms ease;
  filter: saturate(0.7);
}

.answer-button.is-correct {
  animation: answer-pop 680ms both;
  box-shadow: inset 0 0 0 5px white, 0 8px 0 var(--answer-shadow), 0 0 0 9px var(--yellow), 0 0 28px rgb(255 199 57 / 70%);
}

.flying-bamboo {
  height: 52px;
  pointer-events: none;
  position: fixed;
  width: 52px;
  z-index: 20;
}

button:focus-visible,
input:focus-visible + i {
  outline: 5px solid #ffd028;
  outline-offset: 4px;
}

.success-screen {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.success-screen[hidden],
.question-stage[hidden],
.answers[hidden],
.game-prompt[hidden] {
  display: none;
}

.success-bamboo-row {
  align-items: flex-end;
  display: flex;
  height: clamp(112px, 18vh, 165px);
  justify-content: center;
  margin-bottom: 0.15rem;
}

.success-bamboo-row img {
  animation: bamboo-pop 680ms cubic-bezier(.2, 1.5, .35, 1) both;
  filter: drop-shadow(0 7px 0 rgb(25 102 50 / 13%));
  height: 100%;
  margin: 0 clamp(-0.65rem, -0.8vw, -0.35rem);
  width: auto;
}

.success-bamboo-row img:nth-child(2) { animation-delay: 80ms; transform: rotate(-5deg); }
.success-bamboo-row img:nth-child(3) { animation-delay: 160ms; transform: rotate(3deg); }
.success-bamboo-row img:nth-child(4) { animation-delay: 240ms; transform: rotate(-3deg); }
.success-bamboo-row img:nth-child(5) { animation-delay: 320ms; transform: rotate(5deg); }

.success-screen h2 {
  color: var(--green);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  margin: 0;
}

.success-screen p {
  color: var(--navy);
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  font-weight: 800;
  margin: 0.65rem 0 1.2rem;
}

.play-again-button,
.choose-lesson-button,
.dialog-done {
  align-items: center;
  background: var(--green);
  border: 4px solid white;
  border-radius: 20px;
  box-shadow: 0 7px 0 #176838, 0 11px 20px rgb(36 80 47 / 15%);
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 900;
  gap: 0.6rem;
  justify-content: center;
  min-height: 56px;
  padding: 0.7rem 1.55rem 0.85rem;
}

.success-actions {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

.choose-lesson-button {
  background: var(--blue);
  box-shadow: 0 7px 0 #1473ad, 0 11px 20px rgb(36 80 47 / 15%);
}

.play-again-button svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
  width: 21px;
}

.grown-ups-dialog {
  background: transparent;
  border: 0;
  max-height: 100dvh;
  max-width: min(92vw, 620px);
  overflow: visible;
  padding: 0;
}

.grown-ups-dialog::backdrop {
  backdrop-filter: blur(5px);
  background: rgb(10 52 111 / 45%);
}

.dialog-card {
  animation: dialog-fade 260ms ease both;
  background: var(--cream);
  border: 5px solid white;
  border-radius: 35px;
  box-shadow: 0 26px 80px rgb(8 36 75 / 30%);
  color: var(--ink);
  max-height: 92dvh;
  overflow: auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  position: relative;
  text-align: center;
}

.close-button {
  align-items: center;
  background: #edf4ec;
  border: 0;
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 17px;
  top: 17px;
  width: 42px;
}

.close-button svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.5;
  width: 21px;
}

.dialog-panda {
  display: block;
  font-size: 3rem;
  line-height: 1;
}

.dialog-card h2 {
  color: var(--navy);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  margin: 0.45rem 0 0.65rem;
}

.dialog-card > p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 auto 1rem;
  max-width: 47ch;
}

.tip-row {
  align-items: center;
  background: #f2f8eb;
  border-radius: 18px;
  display: flex;
  gap: 0.85rem;
  margin-top: 0.7rem;
  padding: 0.75rem 1rem;
  text-align: left;
}

.tip-row > span {
  font-size: 1.65rem;
}

.tip-row p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.tip-row strong {
  color: var(--ink);
}

.sound-toggle {
  align-items: center;
  border-bottom: 1px solid #e7e3d9;
  border-top: 1px solid #e7e3d9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 0.25rem;
  text-align: left;
}

.sound-toggle span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sound-toggle small {
  color: var(--muted);
}

.sound-toggle input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.sound-toggle i {
  background: #c9c7c0;
  border-radius: 999px;
  flex: 0 0 54px;
  height: 31px;
  position: relative;
  transition: background 180ms ease;
}

.sound-toggle i::after {
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(30 43 48 / 20%);
  content: "";
  height: 25px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 180ms ease;
  width: 25px;
}

.sound-toggle input:checked + i {
  background: var(--green);
}

.sound-toggle input:checked + i::after {
  transform: translateX(23px);
}

.install-app-card {
  align-items: center;
  background: linear-gradient(135deg, #fff8d7, #edf8d4);
  border: 2px solid #d9d7b5;
  border-radius: 18px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  margin: -0.35rem 0 1.25rem;
  padding: 0.75rem;
  text-align: left;
}

.install-app-icon {
  align-items: center;
  background: white;
  border-radius: 14px;
  display: flex;
  font-size: 1.5rem;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.install-app-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.install-app-copy strong {
  color: var(--ink);
}

.install-app-copy small {
  color: var(--muted);
  line-height: 1.35;
}

.install-app-button {
  background: var(--green);
  border: 0;
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
}

.install-app-button:disabled {
  background: #9da798;
  cursor: default;
}

.share-game-card {
  align-items: center;
  background: linear-gradient(135deg, #edf7ff, #f4edff);
  border: 2px solid #d4d4ea;
  border-radius: 18px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr auto;
  margin: -0.55rem 0 1.25rem;
  padding: 0.75rem;
  text-align: left;
}

.share-game-icon {
  align-items: center;
  background: white;
  border-radius: 14px;
  display: flex;
  font-size: 1.5rem;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.share-game-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.share-game-copy strong {
  color: var(--ink);
}

.share-game-copy small {
  color: var(--muted);
  line-height: 1.35;
}

.share-game-button {
  background: #6541a6;
  border: 0;
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
}

.share-game-button:hover {
  background: #52318f;
}

.download-page-link {
  align-items: center;
  color: #176838;
  display: flex;
  font-weight: 900;
  justify-content: center;
  margin: -0.55rem 0 1.1rem;
  min-height: 42px;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.download-page-link:hover {
  color: #0c4e28;
}

.member-account-link {
  color: #6541a6;
  margin-top: -0.85rem;
}

.membership-card {
  background:
    radial-gradient(circle at 8% 10%, rgb(255 211 76 / 25%) 0 4rem, transparent 4.1rem),
    var(--cream);
}

.member-kicker {
  background: #fff0b8;
  border-radius: 999px;
  color: #73420f;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-top: 0.65rem;
  padding: 0.38rem 0.7rem 0.43rem;
}

.member-benefits {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
  margin: 1.1rem 0 1.25rem;
  text-align: left;
}

.member-benefits[hidden],
.membership-cta[hidden] {
  display: none !important;
}

.member-benefits span {
  background: #f1f8e8;
  border-radius: 14px;
  color: #274f38;
  font-size: 0.9rem;
  font-weight: 850;
  padding: 0.75rem;
}

.membership-cta,
.membership-later {
  align-items: center;
  border-radius: 18px;
  display: flex;
  font-weight: 950;
  justify-content: center;
  min-height: 52px;
  width: 100%;
}

.membership-cta {
  background: linear-gradient(#6f52ba, #5939a4);
  border: 3px solid white;
  box-shadow: 0 6px 0 #382173;
  color: white;
  padding: 0.7rem 1rem 0.82rem;
  text-decoration: none;
}

.membership-later {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  margin-top: 0.55rem;
}

.dialog-done {
  border-width: 3px;
  box-shadow: 0 5px 0 #176838;
  font-size: 1rem;
  min-height: 50px;
  width: 100%;
}

@media (max-width: 520px) {
  .install-app-card,
  .share-game-card {
    grid-template-columns: auto 1fr;
  }

  .install-app-button,
  .share-game-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes gentle-wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1deg); }
  40% { transform: translateX(6px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes answer-pop {
  0% { transform: scale(1); }
  42% { transform: translateY(-9px) scale(1.07) rotate(-1deg); }
  100% { transform: scale(1); }
}

@keyframes bamboo-pop {
  0% { opacity: 0; transform: translateY(12px) scale(.45) rotate(-8deg); }
  55% { opacity: 1; transform: translateY(-5px) scale(1.14) rotate(5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes dialog-fade {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 820px) and (orientation: portrait) {
  body {
    overflow: auto;
  }

  .scene {
    display: none;
  }

  .app-shell {
    background: #f8d743 url("assets/pinyin-adventure-bg-mobile.png") center top / cover no-repeat;
    height: auto;
    min-height: 100dvh;
    padding: 80px 11px 14px;
  }

  .app-header {
    left: 12px;
    right: 12px;
    top: 13px;
  }

  .header-actions {
    gap: 0.38rem;
  }

  .member-button {
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 0 4px 0 #c88a22;
    font-size: 1rem;
    min-height: 42px;
    padding: 0.45rem 0.58rem 0.55rem;
  }

  .member-button.is-member {
    box-shadow: 0 4px 0 #438a37;
  }

  #member-button-label {
    display: none;
  }

  .brand {
    border-width: 2px;
    box-shadow: 0 4px 0 rgb(101 71 25 / 9%);
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    padding: 0.48em 0.65em 0.52em;
  }

  .grown-ups-button {
    border-width: 3px;
    border-radius: 16px;
    box-shadow: 0 4px 0 #c83e42;
    font-size: 0.72rem;
    gap: 0.35rem;
    min-height: 42px;
    padding: 0.45rem 0.65rem 0.55rem;
  }

  .grown-ups-button svg {
    height: 19px;
    width: 19px;
  }

  .lesson-menu {
    display: flex;
    inset: auto;
    min-height: calc(100dvh - 94px);
    position: relative;
    width: 100%;
  }

  .lesson-menu[hidden] {
    display: none;
  }

  .menu-heading {
    border-width: 4px;
    border-radius: 30px 25px 34px 27px;
    padding: 0.75rem 0.8rem 0.85rem;
    width: min(100%, 520px);
  }

  .menu-heading h2 {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
  }

  .menu-heading h2::before,
  .menu-heading h2::after {
    margin-inline: 0.2em;
  }

  .menu-heading p {
    font-size: 0.82rem;
    padding-inline: 0.75rem;
  }

  .lesson-grid {
    align-content: start;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-right: 0;
    padding: 0.8rem 0 4.5rem;
  }

  .lesson-grid.has-member-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-grid.has-member-tools .lesson-card {
    min-height: 166px;
  }

  .lesson-card {
    border-radius: 25px 20px 28px 22px;
    border-width: 4px;
    min-height: 166px;
    padding: 0.7rem 0.45rem 0.8rem;
  }

  .lesson-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.35rem);
  }

  .lesson-count {
    border-width: 3px;
    box-shadow: 0 3px 0 var(--lesson-dark);
    font-size: 0.8rem;
    height: 37px;
    right: 0.45rem;
    top: 0.45rem;
    width: 37px;
  }

  .lesson-symbol {
    border-radius: 18px;
    font-size: clamp(2rem, 11vw, 2.7rem);
    height: 58px;
    margin-bottom: 0.38rem;
    min-width: 72px;
  }

  .lesson-card > strong {
    font-size: clamp(1rem, 4.7vw, 1.25rem);
    padding: 0.3rem 0.65rem 0.4rem;
  }

  .lesson-card > small {
    font-size: clamp(0.6rem, 2.9vw, 0.76rem);
    margin-top: 0.35rem;
  }

  .lesson-arrow {
    display: none;
  }

  .game-board {
    border-radius: 38px 32px 42px 35px;
    border-width: 4px;
    height: auto;
    left: auto;
    min-height: 0;
    padding: 12px 10px 21px;
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
  }

  .game-topbar {
    min-height: 43px;
  }

  .game-topbar > strong {
    border-width: 2px;
    font-size: 0.78rem;
    padding: 0.28rem 0.7rem 0.36rem;
  }

  .back-to-menu-button {
    border-width: 2px;
    box-shadow: 0 3px 0 #b9d7a8;
    font-size: 0.7rem;
    min-height: 34px;
    padding: 0.28rem 0.42rem 0.35rem;
  }

  .back-to-menu-button svg {
    height: 15px;
    width: 15px;
  }

  .game-hud {
    flex-direction: column;
    min-height: 89px;
  }

  .bamboo-slot {
    border-width: 3px;
    border-radius: 13px;
    height: 42px;
    width: 42px;
  }

  .bamboo-track::before {
    border-width: 2px;
    height: 8px;
  }

  .hud-counters {
    margin-left: 0;
    margin-top: 0.4rem;
  }

  .progress-count,
  .streak-count {
    border-width: 2px;
    font-size: 0.88rem;
    min-height: 34px;
    padding: 0.22rem 0.68rem;
  }

  .progress-count {
    min-width: 72px;
  }

  .streak-count svg {
    height: 18px;
    width: 18px;
  }

  .game-prompt {
    font-size: clamp(1.35rem, 6.8vw, 1.75rem);
    margin: 0.4rem 0 0.75rem;
  }

  .game-prompt::before,
  .game-prompt::after {
    margin-inline: 0.22em;
  }

  .question-stage {
    flex: 0 0 205px;
    gap: 0.55rem;
    padding: 0;
  }

  .target-card {
    border-width: 4px;
    border-radius: 24px;
    flex-basis: 245px;
    max-width: 245px;
  }

  .hanzi {
    font-size: clamp(6.3rem, 32vw, 7.7rem);
  }

  .hanzi.is-compound {
    font-size: clamp(3.8rem, 19vw, 4.7rem);
  }

  .hanzi-label {
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    top: 7%;
  }

  .answers {
    gap: 0.62rem;
    grid-template-columns: 1fr;
    margin-top: 0.9rem;
  }

  .answer-button {
    border-radius: 22px;
    border-width: 4px;
    box-shadow: inset 0 -4px 0 rgb(24 40 50 / 10%), 0 6px 0 var(--answer-shadow), 0 9px 15px rgb(40 47 56 / 12%);
    font-size: clamp(2.15rem, 11vw, 2.8rem);
    min-height: 72px;
    padding: 0.2rem 0.45rem 0.45rem;
  }

  .answer-button.is-long {
    font-size: clamp(1.35rem, 7vw, 1.9rem);
  }

  .success-screen {
    min-height: 540px;
  }

  .success-bamboo-row {
    height: 118px;
  }

  .success-screen h2 {
    font-size: 3rem;
  }

  .success-screen p {
    font-size: 1rem;
    max-width: 17rem;
  }

  .success-actions {
    flex-direction: column-reverse;
    gap: 0.65rem;
    width: min(100%, 270px);
  }

  .success-actions button {
    width: 100%;
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  .app-shell {
    min-height: 480px;
  }

  .app-header {
    top: 2.2%;
  }

  .brand {
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  }

  .grown-ups-button {
    min-height: 43px;
    padding-block: 0.48rem 0.58rem;
  }

  .lesson-menu {
    inset-block: 14% 2%;
  }

  .menu-heading {
    padding-block: 0.45rem 0.55rem;
  }

  .menu-heading p {
    margin-top: 0.25rem;
  }

  .lesson-grid {
    padding-top: 0.55rem;
  }

  .lesson-card {
    min-height: min(23vh, 150px);
  }

  .lesson-symbol {
    height: 50px;
    margin-bottom: 0.25rem;
  }

  .game-board {
    height: 78%;
    min-height: 400px;
    padding-bottom: 0.85rem;
    top: 57.5%;
  }

  .game-hud {
    min-height: 54px;
  }

  .bamboo-slot {
    height: 45px;
    width: 45px;
  }

  .game-prompt {
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    margin-bottom: 0.45rem;
  }

  .answers {
    margin-top: 0.6rem;
  }

  .answer-button {
    min-height: 72px;
  }
}

/* Listening exercise: wooden sound sign with four hanging Pinyin choices. */
.game-board {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: clamp(0.45rem, 1.2vh, 0.8rem);
  grid-template-rows: auto auto auto minmax(150px, 0.85fr) minmax(190px, 1fr);
  height: min(84vh, 770px);
  left: 50%;
  min-height: 590px;
  padding: 0 clamp(1.2rem, 3.5vw, 3.8rem);
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(94vw, 1500px);
}

.game-topbar {
  gap: clamp(0.7rem, 1.5vw, 1.2rem);
  grid-template-columns: 1fr 1fr;
  justify-self: center;
  min-height: 58px;
  width: min(100%, 520px);
}

.game-topbar > strong,
.back-to-menu-button {
  background:
    linear-gradient(90deg, rgb(124 73 29 / 7%) 1px, transparent 1px) 0 0 / 17px 100%,
    linear-gradient(#fff0ca, #f4c985);
  border: 4px solid #a9692e;
  border-radius: 13px 17px 12px 15px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 45%), 0 7px 0 #7c481f, 0 12px 20px rgb(81 48 20 / 18%);
  color: #633411;
  font-size: clamp(0.92rem, 1.6vw, 1.35rem);
  justify-content: center;
  min-height: 52px;
  padding: 0.45rem 1rem 0.6rem;
  width: 100%;
}

.game-topbar > strong {
  align-items: center;
  display: flex;
  grid-column: 2;
}

.back-to-menu-button {
  grid-column: 1;
}

.game-hud {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 64px;
}

.progress-board,
.streak-count {
  background:
    linear-gradient(90deg, rgb(124 73 29 / 6%) 1px, transparent 1px) 0 0 / 15px 100%,
    linear-gradient(#fff0ca, #f2c47b);
  border: 4px solid #aa6c31;
  border-radius: 17px 13px 18px 14px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 38%), 0 6px 0 #7c481f, 0 10px 19px rgb(81 48 20 / 16%);
  min-height: 58px;
}

.progress-board {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  padding: 0.32rem 0.65rem 0.48rem;
}

.progress-board .bamboo-slot {
  height: clamp(36px, 3.7vw, 49px);
  width: clamp(36px, 3.7vw, 49px);
}

.progress-board .progress-count,
.game-hud .streak-count {
  background: rgb(255 250 226 / 82%);
  border: 2px solid white;
  box-shadow: none;
}

.game-hud .streak-count {
  color: #6e390f;
  font-size: clamp(0.95rem, 1.7vw, 1.4rem);
  margin: 0;
  padding: 0.45rem 1rem 0.55rem;
}

.game-prompt {
  align-self: center;
  background: rgb(255 253 247 / 96%);
  border: 5px solid rgb(255 255 255 / 88%);
  border-radius: 42% 36% 39% 33% / 38% 45% 34% 43%;
  box-shadow: 0 8px 0 rgb(87 63 26 / 9%), 0 14px 25px rgb(73 54 24 / 12%);
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  justify-self: center;
  margin: 0;
  min-height: 0;
  padding: 0.45rem clamp(1.7rem, 4vw, 4rem) 0.65rem;
  width: fit-content;
}

.listening-stage {
  align-items: center;
  display: flex;
  padding: 0;
}

.listening-sign {
  align-items: center;
  background:
    radial-gradient(circle at 13% 30%, rgb(255 255 255 / 38%) 0 2px, transparent 3px),
    linear-gradient(90deg, rgb(112 62 20 / 8%) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(#f7cf8c, #e9a957);
  border: 6px solid #9d5b25;
  border-radius: 21px 17px 24px 19px;
  box-shadow: inset 0 0 0 4px rgb(255 243 202 / 42%), 0 9px 0 #754018, 0 16px 28px rgb(78 47 19 / 22%);
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  grid-template-columns: auto 1fr auto;
  margin: auto;
  max-width: 880px;
  min-height: 142px;
  padding: clamp(0.75rem, 1.5vw, 1.15rem) clamp(1rem, 2.1vw, 1.8rem);
  position: relative;
  width: min(82%, 880px);
}

.listening-sign::before,
.listening-sign::after {
  background: #815023;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 18%);
  content: "";
  height: 22px;
  position: absolute;
  top: -15px;
  width: 22px;
}

.listening-sign::before { left: 6%; }
.listening-sign::after { right: 6%; }

.number-sign {
  align-items: center;
  background:
    radial-gradient(circle at 13% 30%, rgb(255 255 255 / 38%) 0 2px, transparent 3px),
    linear-gradient(90deg, rgb(112 62 20 / 8%) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(#fff0bd, #f4c266);
  border: 6px solid #9d5b25;
  border-radius: 21px 17px 24px 19px;
  box-shadow: inset 0 0 0 4px rgb(255 250 220 / 48%), 0 9px 0 #754018, 0 16px 28px rgb(78 47 19 / 22%);
  color: #5e2e0c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  max-width: 880px;
  min-height: 142px;
  padding: 0.55rem 1rem 0.8rem;
  position: relative;
  width: min(82%, 880px);
}

.number-sign::before,
.number-sign::after {
  background: #815023;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 18%);
  content: "";
  height: 22px;
  position: absolute;
  top: -15px;
  width: 22px;
}

.number-sign::before { left: 6%; }
.number-sign::after { right: 6%; }

.number-sign-kicker {
  background: #fff8df;
  border: 2px solid rgb(166 102 39 / 24%);
  border-radius: 999px;
  color: #8b501f;
  font-size: clamp(0.72rem, 1vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.8rem 0.3rem;
}

.number-sign strong {
  font-family: "PingFang SC", "Microsoft YaHei", var(--round-font);
  font-size: clamp(4.7rem, 8vw, 7.4rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 0.95;
  margin: 0.1rem 0 0.16rem;
  text-shadow: 0 4px 0 rgb(255 255 255 / 48%);
}

.number-sign strong.is-compound {
  font-size: clamp(3.8rem, 6.7vw, 6rem);
}

.number-sign small {
  color: #7f4b22;
  font-size: clamp(0.76rem, 1.15vw, 0.98rem);
  font-weight: 800;
}

.listening-sign[hidden],
.number-sign[hidden] {
  display: none;
}

.listen-button {
  align-items: center;
  background: #fff8dd;
  border: 7px solid #ffd65c;
  border-radius: 50%;
  box-shadow: inset 0 -5px 0 rgb(164 104 20 / 10%), 0 7px 0 #c88a20, 0 12px 20px rgb(85 52 17 / 15%);
  color: #ff940d;
  cursor: pointer;
  display: flex;
  height: clamp(88px, 9vw, 116px);
  justify-content: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
  width: clamp(88px, 9vw, 116px);
}

.listen-button svg {
  fill: currentColor;
  height: 58%;
  overflow: visible;
  width: 58%;
}

.listen-button svg path:last-child {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 3;
}

.listen-button:hover {
  transform: translateY(-3px) scale(1.03);
}

.listen-button:active {
  box-shadow: inset 0 -2px 0 rgb(164 104 20 / 10%), 0 3px 0 #c88a20;
  transform: translateY(4px);
}

.listening-sign.is-playing .listen-button {
  animation: speaker-pulse 720ms ease-in-out infinite alternate;
}

.listen-copy {
  color: #5e2e0c;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  text-align: center;
}

.listen-copy strong {
  font-size: clamp(1.55rem, 3.2vw, 2.85rem);
  line-height: 1.05;
}

.listen-copy small {
  color: #7f4b22;
  font-size: clamp(0.76rem, 1.15vw, 0.98rem);
  font-weight: 800;
}

.replay-voice-button {
  align-items: center;
  background: #fff8e5;
  border: 4px solid #9e622b;
  border-radius: 999px;
  box-shadow: 0 5px 0 #774318;
  color: #66330e;
  cursor: pointer;
  display: inline-flex;
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  font-weight: 900;
  gap: 0.4rem;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem 0.9rem 0.62rem;
  white-space: nowrap;
}

.replay-voice-button svg {
  fill: none;
  height: 22px;
  stroke: #4da64e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
  width: 22px;
}

.answers {
  align-self: stretch;
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  padding: clamp(3.4rem, 7vh, 4.7rem) 0 0;
  position: relative;
  width: min(88%, 1160px);
}

.answers::before {
  background: linear-gradient(#9a612f, #6f3e1c);
  border: 5px solid #6d3b1a;
  border-radius: 999px;
  box-shadow: inset 0 4px 0 rgb(255 255 255 / 18%), 0 7px 0 rgb(70 41 18 / 19%);
  content: "";
  height: 24px;
  left: -3%;
  position: absolute;
  right: -3%;
  top: 1.25rem;
}

.game-board .answer-button {
  --answer-shadow: #8c4e20;
  align-items: center;
  background:
    radial-gradient(circle at 18% 20%, rgb(255 255 255 / 38%) 0 2px, transparent 3px),
    linear-gradient(90deg, rgb(125 72 27 / 7%) 1px, transparent 1px) 0 0 / 20px 100%,
    linear-gradient(#ffe1a7, #efb769);
  border: 6px solid #a5622b;
  border-radius: 21px 17px 23px 18px;
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 35%), 0 8px 0 #7d451d, 0 14px 22px rgb(69 42 19 / 19%);
  color: #5d2606;
  font-size: clamp(2.7rem, 5.4vw, 5.4rem);
  min-height: clamp(124px, 19vh, 178px);
  overflow: visible;
  padding: 0.45rem 0.4rem 0.7rem;
  position: relative;
  text-shadow: 0 3px 0 rgb(255 255 255 / 32%);
}

.game-board .answer-button::before,
.game-board .answer-button::after {
  background: repeating-linear-gradient(85deg, #e0b06d 0 3px, #9a642f 3px 6px);
  border-radius: 999px;
  content: "";
  height: clamp(50px, 7vh, 70px);
  position: absolute;
  top: calc(clamp(50px, 7vh, 70px) * -1 - 8px);
  width: 10px;
  z-index: -1;
}

.game-board .answer-button::before { left: 25%; transform: rotate(7deg); }
.game-board .answer-button::after { right: 25%; transform: rotate(-7deg); }

.game-board .answer-button:nth-child(even) { transform: rotate(1deg); }
.game-board .answer-button:nth-child(3n) { transform: rotate(-1deg); }

.game-board .answer-button:hover:not(:disabled) {
  filter: brightness(1.04) saturate(1.04);
  transform: translateY(-4px) rotate(0) scale(1.02);
}

.game-board .answer-button:active:not(:disabled) {
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 35%), 0 3px 0 #7d451d;
  transform: translateY(5px) rotate(0);
}

.game-board .answer-button.is-long {
  font-size: clamp(1.7rem, 3.5vw, 3.2rem);
}

.game-board .answer-button.is-correct {
  background: linear-gradient(#dff7a9, #9edb72);
  border-color: #4a9b46;
  box-shadow: inset 0 0 0 4px white, 0 8px 0 #287d34, 0 0 0 9px var(--yellow), 0 0 28px rgb(255 199 57 / 70%);
}

.success-screen {
  align-self: stretch;
  background: rgb(255 253 247 / 96%);
  border: 5px solid white;
  border-radius: 42px;
  box-shadow: var(--paper-shadow);
  grid-row: 2 / -1;
  justify-self: center;
  padding: 1.25rem 2rem 2rem;
  width: min(100%, 780px);
}

@keyframes speaker-pulse {
  from { transform: scale(1); filter: drop-shadow(0 0 0 rgb(255 199 57 / 0%)); }
  to { transform: scale(1.06); filter: drop-shadow(0 0 13px rgb(255 199 57 / 70%)); }
}

@media (max-width: 820px) and (orientation: portrait) {
  .game-board {
    display: grid;
    gap: 0.65rem;
    grid-template-rows: auto auto auto auto auto;
    height: auto;
    left: auto;
    min-height: calc(100dvh - 94px);
    padding: 0 2px 3.5rem;
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
  }

  .game-topbar {
    gap: 0.55rem;
    min-height: 48px;
    width: 100%;
  }

  .game-topbar > strong,
  .back-to-menu-button {
    border-width: 3px;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 40%), 0 4px 0 #7c481f;
    font-size: 0.78rem;
    min-height: 43px;
    padding: 0.3rem 0.45rem 0.42rem;
  }

  .game-hud {
    flex-direction: row;
    min-height: 50px;
  }

  .progress-board,
  .streak-count {
    border-width: 3px;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%), 0 4px 0 #7c481f;
    min-height: 45px;
  }

  .progress-board {
    padding: 0.25rem 0.45rem 0.35rem;
  }

  .progress-board .bamboo-track {
    display: none;
  }

  .progress-board .progress-count,
  .game-hud .streak-count {
    font-size: 0.82rem;
    min-height: 31px;
    padding: 0.2rem 0.58rem 0.28rem;
  }

  .game-prompt {
    border-width: 4px;
    border-radius: 24px;
    font-size: clamp(1.18rem, 6vw, 1.5rem);
    padding: 0.4rem 0.5rem 0.52rem;
    width: 100%;
  }

  .listening-stage {
    flex: none;
  }

  .listening-sign {
    border-width: 4px;
    box-shadow: inset 0 0 0 3px rgb(255 243 202 / 42%), 0 6px 0 #754018, 0 10px 18px rgb(78 47 19 / 18%);
    gap: 0.55rem 0.75rem;
    grid-template-columns: 74px 1fr;
    min-height: 138px;
    padding: 0.7rem 0.8rem 0.85rem;
    width: 96%;
  }

  .number-sign {
    border-width: 4px;
    box-shadow: inset 0 0 0 3px rgb(255 250 220 / 48%), 0 6px 0 #754018, 0 10px 18px rgb(78 47 19 / 18%);
    min-height: 138px;
    padding: 0.45rem 0.8rem 0.65rem;
    width: 96%;
  }

  .number-sign strong {
    font-size: clamp(4.1rem, 21vw, 6rem);
  }

  .number-sign strong.is-compound {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .listen-button {
    border-width: 5px;
    height: 70px;
    width: 70px;
  }

  .listen-copy strong {
    font-size: clamp(1.25rem, 6.5vw, 1.65rem);
  }

  .listen-copy small {
    font-size: 0.68rem;
  }

  .replay-voice-button {
    border-width: 3px;
    box-shadow: 0 4px 0 #774318;
    font-size: 0.8rem;
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 38px;
    padding: 0.35rem 0.7rem 0.45rem;
  }

  .answers {
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding-top: 3.25rem;
    width: 96%;
  }

  .answers::before {
    border-width: 4px;
    height: 18px;
    left: -1%;
    right: -1%;
    top: 1rem;
  }

  .game-board .answer-button {
    border-width: 5px;
    border-radius: 18px 15px 20px 16px;
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 35%), 0 6px 0 #7d451d, 0 10px 17px rgb(69 42 19 / 17%);
    font-size: clamp(2.5rem, 14vw, 3.7rem);
    min-height: 112px;
    padding: 0.2rem 0.3rem 0.45rem;
  }

  .game-board .answer-button::before,
  .game-board .answer-button::after {
    height: 48px;
    top: -51px;
    width: 8px;
  }

  .game-board .answer-button.is-long {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .success-screen {
    grid-row: 2 / -1;
    min-height: 580px;
    padding-inline: 1rem;
    width: 100%;
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  .game-board {
    gap: 0.25rem;
    grid-template-rows: 45px 45px auto 110px minmax(120px, 1fr);
    height: 84vh;
    min-height: 405px;
    top: 56%;
  }

  .game-topbar > strong,
  .back-to-menu-button {
    min-height: 38px;
  }

  .game-hud {
    min-height: 42px;
  }

  .progress-board,
  .streak-count {
    min-height: 40px;
  }

  .progress-board .bamboo-slot {
    height: 30px;
    width: 30px;
  }

  .game-prompt {
    font-size: 1.25rem;
    padding-block: 0.25rem 0.38rem;
  }

  .listening-sign {
    border-width: 4px;
    min-height: 96px;
  }

  .number-sign {
    border-width: 4px;
    min-height: 96px;
    padding-block: 0.25rem 0.4rem;
  }

  .number-sign strong {
    font-size: 4rem;
  }

  .number-sign strong.is-compound {
    font-size: 3.2rem;
  }

  .listen-button {
    border-width: 4px;
    height: 66px;
    width: 66px;
  }

  .answers {
    padding-top: 2.75rem;
  }

  .answers::before {
    height: 18px;
    top: 0.85rem;
  }

  .game-board .answer-button {
    min-height: 96px;
  }

  .game-board .answer-button::before,
  .game-board .answer-button::after {
    height: 45px;
    top: -49px;
  }
}

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

/* Adventure modes, learning paths, and player progress. */
.mode-and-progress-row {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.7rem auto 0;
  width: min(100%, 1040px);
}

.game-mode-picker {
  align-items: stretch;
  background: rgb(255 253 247 / 94%);
  border: 4px solid rgb(255 255 255 / 90%);
  border-radius: 24px;
  box-shadow: 0 7px 0 rgb(92 61 24 / 12%), 0 14px 28px rgb(54 50 28 / 12%);
  display: grid;
  flex: 1;
  gap: 0.45rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.45rem;
}

.game-mode-button {
  align-items: center;
  background: #fff4cf;
  border: 3px solid transparent;
  border-radius: 17px;
  color: #663b15;
  cursor: pointer;
  display: grid;
  gap: 0.05rem 0.4rem;
  grid-template-columns: auto 1fr;
  min-height: 58px;
  padding: 0.38rem 0.65rem;
  text-align: left;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.game-mode-button > span { font-size: 1.45rem; grid-row: 1 / 3; }
.game-mode-button strong { font-size: clamp(0.82rem, 1.15vw, 1.05rem); }
.game-mode-button small { color: #806340; font-size: 0.7rem; font-weight: 800; }
.game-mode-button:hover { transform: translateY(-2px); }
.game-mode-button.is-active { background: #dff4b2; border-color: #57a64c; box-shadow: inset 0 -3px 0 rgb(42 125 51 / 12%); color: #175d2d; }
.game-mode-button.is-member-mode:not(.is-active) { background: #f1eaff; color: #5b3e9f; }

.player-level {
  align-items: center;
  background: linear-gradient(#fff0bb, #f6c85c);
  border: 4px solid white;
  border-radius: 21px;
  box-shadow: 0 6px 0 #b67620, 0 12px 22px rgb(81 49 23 / 16%);
  display: grid;
  flex: 0 0 215px;
  gap: 0.1rem 0.45rem;
  grid-template-columns: auto 1fr auto;
  min-height: 68px;
  padding: 0.42rem 0.65rem 0.55rem;
}

.player-level[hidden],
.timer-count[hidden],
.xp-earned[hidden] {
  display: none !important;
}

.player-level > span { font-size: 1.45rem; grid-row: 1 / 3; }
.player-level > strong { color: #6b3b0d; font-size: 0.85rem; }
.player-level > small { color: #6b3b0d; font-size: 0.72rem; font-weight: 900; }
.player-level > i { background: rgb(255 255 255 / 65%); border-radius: 999px; grid-column: 2 / 4; height: 8px; overflow: hidden; }
.player-level > i span { background: #51a94f; border-radius: inherit; display: block; height: 100%; transition: width 350ms ease; }

.content-section-picker {
  align-items: center;
  align-self: center;
  background: rgb(255 253 247 / 94%);
  border: 4px solid rgb(255 255 255 / 90%);
  border-radius: 999px;
  box-shadow: 0 6px 0 rgb(92 61 24 / 12%), 0 12px 24px rgb(54 50 28 / 10%);
  display: flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0.3rem;
}

.content-section-picker button,
.content-section-picker .standalone-page-nav {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #765532;
  cursor: pointer;
  display: inline-flex;
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  font-weight: 950;
  gap: 0.35rem;
  min-height: 39px;
  padding: 0.4rem 1.05rem 0.48rem;
  text-decoration: none;
  transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.content-section-picker button:hover,
.content-section-picker .standalone-page-nav:hover { transform: translateY(-1px); }
.content-section-picker button.is-active {
  background: #fde58a;
  box-shadow: inset 0 -3px 0 rgb(178 117 28 / 16%), 0 2px 0 white;
  color: #65380c;
}

.content-section-picker button:nth-child(2).is-active {
  background: #ffe4b8;
  color: #844917;
}

.content-section-picker button:nth-child(3).is-active {
  background: #dcefc2;
  color: #275f2d;
}

.content-section-picker .lesson-exercises-nav {
  background: linear-gradient(135deg, #7258d7, #4d7fe1);
  box-shadow: inset 0 -3px 0 rgb(46 35 135 / 22%), 0 2px 0 white;
  color: white;
}

.content-section-picker .unit-review-nav {
  background: linear-gradient(135deg, #14936d, #e0a72f);
  box-shadow: inset 0 -3px 0 rgb(24 91 60 / 22%), 0 2px 0 white;
  color: white;
}

.content-section-picker .standalone-page-nav:hover,
.content-section-picker .standalone-page-nav:focus-visible {
  filter: brightness(1.07);
}

.lesson-section-heading {
  align-self: center;
  color: #173f72;
  flex: 0 0 auto;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  margin: 0.75rem 0 0;
  text-shadow: 0 2px 0 white;
}

.learning-path-strip[hidden],
.lesson-section-heading[hidden],
.lesson-section-copy[hidden],
.content-section-picker[hidden] {
  display: none !important;
}

.lesson-section-copy {
  align-self: center;
  background: rgb(255 253 247 / 86%);
  border: 2px solid white;
  border-radius: 999px;
  color: #70451e;
  flex: 0 0 auto;
  font-size: clamp(0.7rem, 1vw, 0.86rem);
  font-weight: 850;
  margin: 0.28rem 0 0;
  padding: 0.28rem 0.85rem 0.35rem;
  text-align: center;
}

.learning-path-strip {
  align-items: stretch;
  display: grid;
  flex: 0 0 auto;
  gap: 0.4rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0.65rem auto 0;
  position: relative;
  width: min(94%, 980px);
}

.path-stop {
  cursor: pointer;
  font: inherit;
  text-align: left;
  align-items: center;
  background: rgb(255 253 247 / 94%);
  border: 3px solid white;
  border-radius: 17px;
  box-shadow: 0 5px 0 rgb(74 65 35 / 12%);
  color: var(--navy);
  display: grid;
  gap: 0 0.4rem;
  grid-template-columns: auto 1fr;
  min-height: 51px;
  padding: 0.32rem 0.55rem 0.42rem;
  position: relative;
}

.path-stop > b { align-items: center; background: var(--blue); border-radius: 50%; color: white; display: flex; grid-row: 1 / 3; height: 30px; justify-content: center; width: 30px; }
.path-stop:nth-child(2) > b { background: var(--green); }
.path-stop:nth-child(3) > b { background: var(--purple); }
.path-stop:nth-child(4) > b { background: #e99a18; }
.path-stop strong { font-size: 0.78rem; }
.path-stop small { color: #6f7890; font-size: 0.63rem; font-weight: 800; }
.path-stop:hover { border-color: #c7dce8; }
.path-stop.is-active { background: #fff6d5; border-color: #c58b21; box-shadow: 0 3px 0 #d9ae4a; }
.path-stop:focus-visible, #pinyin-stage-all:focus-visible { outline: 3px solid #145eb0; outline-offset: 3px; }
.pinyin-stage-summary { align-items: center; background: #fffdf2; border: 2px solid #e5d7a8; border-radius: 16px; display: flex; gap: 1rem; justify-content: space-between; margin: 0.8rem auto 0.25rem; padding: 0.75rem 1rem; width: min(94%, 980px); }
.pinyin-stage-summary h3 { color: #174b48; font-size: 1rem; margin: 0; }
.pinyin-stage-summary[hidden] { display: none !important; }
.pinyin-stage-summary p { color: #54636a; font-size: 0.85rem; margin: 0.3rem 0 0; }
#pinyin-stage-all { background: white; border: 2px solid #28694e; border-radius: 12px; color: #174b48; cursor: pointer; flex-shrink: 0; font: inherit; font-size: 0.85rem; font-weight: 800; min-height: 44px; padding: 0.4rem 0.75rem; }
@media (max-width: 600px) { .pinyin-stage-summary { align-items: stretch; flex-direction: column; width: 100%; } }
.path-stop.is-member::after { color: #8b651e; content: "会员"; font-size: 0.6rem; font-weight: 950; position: absolute; right: 0.45rem; top: 0.32rem; }

.lesson-menu .lesson-grid { padding-top: 0.6rem; }
.lesson-menu .lesson-card { min-height: min(17vh, 158px); padding-block: 0.55rem 0.75rem; }
.lesson-menu .lesson-symbol { font-size: clamp(2rem, 3.5vw, 3.5rem); height: clamp(54px, 7vh, 72px); }
.lesson-grid.is-word-levels {
  align-content: start;
  gap: clamp(0.55rem, 1vw, 0.8rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1160px;
  padding-top: clamp(0.85rem, 2.2vh, 1.35rem);
  width: 100%;
}

.lesson-card--word {
  background:
    radial-gradient(circle at 82% 18%, rgb(255 255 255 / 80%) 0 4px, transparent 5px),
    linear-gradient(150deg, #fffefa, color-mix(in srgb, var(--lesson-accent) 13%, white));
  min-height: min(18vh, 160px) !important;
  padding: 0.45rem 0.55rem 0.55rem !important;
}

.lesson-grid.is-book-lessons {
  align-content: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1080px;
  padding-top: clamp(0.85rem, 2.2vh, 1.35rem);
  width: 100%;
}

.lesson-card--book {
  align-items: stretch;
  background: linear-gradient(145deg, #fffdf5, #fff0d2);
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(108px, 39%) minmax(0, 1fr);
  justify-content: stretch;
  min-height: min(30vh, 245px) !important;
  padding: 0.75rem !important;
  text-align: left;
}

@media (max-width: 1050px) and (min-width: 821px) {
  .lesson-grid.is-book-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lesson-card--book:nth-child(even) {
  background: linear-gradient(145deg, #fffdf5, #eaf6ff);
}

.book-lesson-art {
  background: #173f72;
  border: 4px solid white;
  border-radius: 24px 18px 22px 19px;
  box-shadow: 0 5px 0 rgb(32 71 72 / 14%);
  min-height: 158px;
  overflow: hidden;
}

.book-lesson-art img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.book-lesson-copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.35rem 0;
}

.book-lesson-copy > small {
  color: #8b5b2d;
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 950;
  letter-spacing: 0.06em;
}

.book-lesson-copy > strong {
  color: var(--navy);
  font-size: clamp(1.12rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  margin-top: 0.35rem;
}

.book-lesson-copy > span {
  color: #573617;
  font-family: "PingFang SC", "Microsoft YaHei", var(--round-font);
  font-size: clamp(0.82rem, 1.15vw, 1.02rem);
  font-weight: 850;
  line-height: 1.55;
  margin-top: 0.7rem;
}

.book-lesson-copy > b {
  background: #f5d970;
  border-radius: 999px;
  color: #69470d;
  font-size: clamp(0.62rem, 0.8vw, 0.74rem);
  margin-top: 0.75rem;
  padding: 0.3rem 0.58rem 0.36rem;
}

.exercise-lessons-link {
  align-items: center;
  align-self: center;
  border: 4px solid white;
  box-shadow: 0 6px 0 rgb(54 47 107 / 20%), 0 13px 24px rgb(46 35 87 / 15%);
  color: #49367f;
  display: inline-flex;
  font-weight: 950;
  text-decoration: none;
  background: #fffdf8;
  border-radius: 999px;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.38rem 0.95rem 0.46rem;
}

html.lesson-exercise-page body { background: #49369f; }
html.lesson-exercise-page .scene {
  background:
    radial-gradient(circle at 10% 14%, rgb(255 218 92 / 80%) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 22%, rgb(255 255 255 / 65%) 0 5px, transparent 6px),
    linear-gradient(135deg, rgb(72 42 155 / 82%), rgb(41 116 178 / 70%)),
    url("assets/pinyin-adventure-bg.png") center / cover no-repeat;
  background-blend-mode: screen, screen, multiply, normal;
}
html.lesson-exercise-page .brand { background: #32236f; border-color: #ad9cff; box-shadow: 0 8px 0 #25165b, 0 13px 28px rgb(29 20 76 / 28%); color: #fff; }
html.lesson-exercise-page .brand b { color: #ffd85a; }
html.lesson-exercise-page .brand em { color: #aeeeff; }
html.lesson-exercise-page .menu-heading { background: linear-gradient(145deg, #fff, #eee9ff); border-color: #b9a8ff; box-shadow: 0 8px 0 #4d3e9b, 0 17px 34px rgb(35 27 94 / 25%); transform: rotate(0.4deg); }
html.lesson-exercise-page .menu-heading h2 { color: #3c2a87; }
html.lesson-exercise-page .menu-heading h2::before,
html.lesson-exercise-page .menu-heading h2::after { color: #ffb83e; content: "★"; }
html.lesson-exercise-page .menu-heading p { background: #dff5ff; color: #27577a; }
html.lesson-exercise-page .game-mode-picker { background: rgb(44 34 99 / 90%); border-color: #aa98ff; box-shadow: 0 7px 0 #2c235d, 0 15px 28px rgb(27 20 66 / 28%); }
html.lesson-exercise-page .game-mode-button { border-color: rgb(255 255 255 / 78%); }
html.lesson-exercise-page .lesson-section-heading { color: white; text-shadow: 0 3px 0 #342478; }
html.lesson-exercise-page .lesson-section-copy { background: rgb(38 28 87 / 82%); border-color: #a99cff; color: #fff; }
html.lesson-exercise-page .lesson-card--book { background: linear-gradient(145deg, #fff, #eae3ff); border-color: #d8cdff; box-shadow: inset 0 -5px 0 rgb(73 47 145 / 6%), 0 8px 0 #44338f, 0 17px 32px rgb(30 24 76 / 24%); }
html.lesson-exercise-page .lesson-card--book:nth-child(even) { background: linear-gradient(145deg, #fff, #dff5ff); }
html.lesson-exercise-page .book-lesson-copy > b { background: #6b55cc; color: white; }

html.unit-review-page body { background: #17664f; }
html.unit-review-page .scene {
  background:
    radial-gradient(circle at 12% 17%, rgb(255 219 86 / 85%) 0 8px, transparent 9px),
    radial-gradient(circle at 88% 27%, rgb(255 255 255 / 70%) 0 5px, transparent 6px),
    linear-gradient(140deg, rgb(19 116 82 / 78%), rgb(26 104 139 / 62%)),
    url("assets/pinyin-adventure-bg.png") center / cover no-repeat;
  background-blend-mode: screen, screen, multiply, normal;
}
html.unit-review-page .brand {
  background: #116149;
  border-color: #8ee2b8;
  box-shadow: 0 8px 0 #0a4634, 0 13px 28px rgb(8 66 47 / 28%);
  color: #fff;
}
html.unit-review-page .brand b { color: #ffe07a; }
html.unit-review-page .brand em { color: #b7f5d3; }
html.unit-review-page .menu-heading {
  background: linear-gradient(145deg, #fffef5, #e5fff1);
  border-color: #9ee8bf;
  box-shadow: 0 8px 0 #167655, 0 17px 34px rgb(10 75 52 / 24%);
  transform: rotate(-0.35deg);
}
html.unit-review-page .menu-heading h2 { color: #136444; }
html.unit-review-page .menu-heading h2::before,
html.unit-review-page .menu-heading h2::after { color: #e5a619; content: "★"; }
html.unit-review-page .menu-heading p { background: #fff0b8; color: #704710; }
html.unit-review-page .game-mode-picker {
  background: rgb(11 83 65 / 91%);
  border-color: #8de0b6;
  box-shadow: 0 7px 0 #084b39, 0 15px 28px rgb(6 57 42 / 27%);
}
html.unit-review-page .lesson-section-heading { color: white; text-shadow: 0 3px 0 #0e5a42; }
html.unit-review-page .lesson-section-copy { background: rgb(8 78 59 / 86%); border-color: #8de0b6; color: #fff; }

.lesson-grid.is-unit-review {
  align-content: start;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vh, 1.4rem);
  justify-content: center;
  margin: 0 auto;
  max-width: 1080px;
  padding-top: clamp(0.8rem, 2vh, 1.25rem);
  width: 100%;
}

.unit-review-card {
  align-items: center;
  background:
    radial-gradient(circle at 92% 16%, rgb(255 226 112 / 45%) 0 42px, transparent 43px),
    linear-gradient(145deg, #fffef8, #e4fff1);
  border: 6px solid rgb(255 255 255 / 92%);
  border-radius: 38px 31px 42px 34px;
  box-shadow: inset 0 -7px 0 rgb(25 105 73 / 8%), 0 9px 0 #0e6d4e, 0 20px 38px rgb(8 62 44 / 28%);
  color: #173f72;
  cursor: pointer;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: min(31vh, 250px);
  padding: clamp(1rem, 2vw, 1.55rem);
  text-align: left;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  width: min(100%, 1020px);
}

.unit-review-card:hover,
.unit-review-card:focus-visible { filter: brightness(1.025); transform: translateY(-3px); }
.unit-review-card:active { box-shadow: inset 0 -3px 0 rgb(25 105 73 / 8%), 0 4px 0 #0e6d4e; transform: translateY(4px); }
.unit-review-card--unit-2 {
  background:
    radial-gradient(circle at 92% 16%, rgb(255 215 136 / 54%) 0 42px, transparent 43px),
    linear-gradient(145deg, #fff9ee, #e8f2ff);
}
.unit-review-card.is-locked { filter: saturate(0.76); }
.unit-review-card.is-locked .unit-review-start { background: linear-gradient(135deg, #7559b8, #b77d29); box-shadow: 0 6px 0 #5b438e; }

.unit-review-trophy {
  align-items: center;
  background: linear-gradient(145deg, #fff3a9, #ffc548);
  border: 5px solid white;
  border-radius: 34px 28px 36px 30px;
  box-shadow: 0 7px 0 #b77710;
  display: flex;
  font-size: clamp(3.5rem, 7vw, 6.2rem);
  height: clamp(112px, 12vw, 165px);
  justify-content: center;
  transform: rotate(-2deg);
  width: clamp(112px, 12vw, 165px);
}

.unit-review-copy { display: flex; flex-direction: column; min-width: 0; }
.unit-review-copy > small { color: #3a7a5d; font-size: clamp(0.72rem, 1vw, 0.9rem); font-weight: 950; }
.unit-review-copy > strong { color: #125f43; font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: 1.1; margin-top: 0.25rem; }
.unit-review-copy > span {
  color: #4b3d25;
  font-family: "STKaiti", "KaiTi", "PingFang SC", serif;
  font-size: clamp(0.9rem, 1.45vw, 1.2rem);
  font-weight: 850;
  line-height: 1.7;
  margin-top: 0.55rem;
}
.unit-review-copy > b {
  align-self: flex-start;
  background: #d9f5df;
  border: 2px solid white;
  border-radius: 999px;
  color: #17623f;
  font-size: clamp(0.68rem, 0.95vw, 0.84rem);
  margin-top: 0.62rem;
  padding: 0.34rem 0.72rem 0.42rem;
}
.unit-review-start {
  align-items: center;
  background: linear-gradient(135deg, #1a9a69, #e0a72f);
  border: 4px solid white;
  border-radius: 999px;
  box-shadow: 0 6px 0 #0d6f4a;
  color: white;
  display: inline-flex;
  font-size: clamp(0.78rem, 1.15vw, 1rem);
  font-weight: 950;
  gap: 0.45rem;
  justify-content: center;
  min-height: 54px;
  padding: 0.55rem 1rem 0.68rem;
  white-space: nowrap;
}

.lesson-grid.is-word-levels .lesson-card:nth-child(1) { --lesson-accent: #ff716d; --lesson-dark: #bd3f42; }
.lesson-grid.is-word-levels .lesson-card:nth-child(2) { --lesson-accent: #4aa8e8; --lesson-dark: #176b9f; }
.lesson-grid.is-word-levels .lesson-card:nth-child(3) { --lesson-accent: #63bc58; --lesson-dark: #347f34; }
.lesson-grid.is-word-levels .lesson-card:nth-child(4) { --lesson-accent: #f5b931; --lesson-dark: #a86a0b; }
.lesson-grid.is-word-levels .lesson-card:nth-child(5) { --lesson-accent: #9b78df; --lesson-dark: #6544a8; }
.lesson-grid.is-word-levels .lesson-card:nth-child(6) { --lesson-accent: #35bda8; --lesson-dark: #1b786d; }
.lesson-grid.is-word-levels .lesson-card:nth-child(7) { --lesson-accent: #ef7b55; --lesson-dark: #a8432f; }
.lesson-grid.is-word-levels .lesson-card:nth-child(8) { --lesson-accent: #5c8dec; --lesson-dark: #315cae; }
.lesson-grid.is-word-levels .lesson-card:nth-child(9) { --lesson-accent: #314f84; --lesson-dark: #18335e; }

.word-level-number {
  align-items: center;
  background: var(--lesson-accent);
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 5px 0 var(--lesson-dark);
  color: white;
  display: flex;
  font-size: clamp(1.9rem, 3.5vw, 3.25rem);
  font-weight: 950;
  height: clamp(56px, 4.5vw, 64px);
  justify-content: center;
  line-height: 1;
  margin-bottom: 0.3rem;
  width: clamp(56px, 4.5vw, 64px);
}

.word-access-badge {
  background: #173f72;
  border: 2px solid white;
  border-radius: 999px;
  box-shadow: 0 3px 0 #092954;
  color: white;
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  font-weight: 950;
  left: 0.55rem;
  padding: 0.24rem 0.42rem 0.3rem;
  position: absolute;
  top: 0.52rem;
}

.word-access-badge.is-unlocked {
  background: #2f9148;
  box-shadow: 0 3px 0 #176838;
}

.word-level-icon {
  font-size: clamp(1.1rem, 1.8vw, 1.65rem);
  position: absolute;
  right: 0.78rem;
  top: 0.65rem;
  transform: rotate(7deg);
}

.lesson-card--word > strong {
  background: color-mix(in srgb, var(--lesson-accent) 21%, white);
  border-radius: 999px;
  font-size: clamp(0.98rem, 1.35vw, 1.22rem);
  line-height: 1;
  padding: 0.3rem 0.7rem 0.38rem;
}

.lesson-card--word > small {
  font-size: clamp(0.6rem, 0.78vw, 0.75rem);
  letter-spacing: 0.02em;
  margin-top: 0.3rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-level-count {
  color: var(--lesson-dark);
  font-size: 0.7rem;
  font-weight: 950;
  margin-top: 0.18rem;
}
.lesson-card.is-unavailable { filter: grayscale(0.65); opacity: 0.72; }
.lesson-card.is-unavailable::after { background: #173f72; border-radius: 999px; color: white; content: "请选择听音课程"; font-size: 0.67rem; font-weight: 950; padding: 0.3rem 0.55rem; position: absolute; }

.timer-count {
  align-items: center;
  background: linear-gradient(#e8f5ff, #badef2);
  border: 4px solid #317eaa;
  border-radius: 16px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 45%), 0 6px 0 #1b5b7d;
  color: #123b68;
  display: flex;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  font-weight: 900;
  gap: 0.28rem;
  min-height: 58px;
  padding: 0.4rem 0.8rem 0.5rem;
}

.timer-count.is-urgent { animation: timer-pulse 650ms ease-in-out infinite alternate; background: linear-gradient(#ffe1dd, #ffaaa3); border-color: #bd423f; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 45%), 0 6px 0 #8f302e; color: #86231f; }
.xp-earned { color: #21773d !important; font-size: 1.1rem !important; font-weight: 950; margin-top: -0.3rem !important; }

.success-member-invite {
  align-items: center;
  background:
    radial-gradient(circle at 92% 20%, rgb(255 255 255 / 72%) 0 4px, transparent 5px),
    linear-gradient(135deg, #f1e9ff 0 48%, #fff2bc 100%);
  border: 4px solid #ffffff;
  border-radius: 24px;
  box-shadow: 0 6px 0 #9a79c3, 0 13px 24px rgb(77 45 116 / 16%);
  color: #41266d;
  display: grid;
  gap: 0.65rem 0.85rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0.95rem auto 1.35rem;
  max-width: 690px;
  overflow: hidden;
  padding: 0.85rem 1rem 1rem;
  position: relative;
  text-align: left;
}

.success-member-invite[hidden] { display: none !important; }
.invite-badge { align-items: center; background: white; border: 3px solid #ddcbff; border-radius: 50%; display: flex; font-size: 1.65rem; height: 54px; justify-content: center; width: 54px; }
.invite-copy h3 { color: #4b2a79; font-size: clamp(1rem, 2vw, 1.25rem); margin: 0; }
.invite-copy p { color: #69547f; font-size: 0.78rem; line-height: 1.45; margin: 0.2rem 0 0; }
.success-member-button { background: #6540a6; border: 0; border-radius: 999px; box-shadow: 0 4px 0 #3f226d; color: white; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 950; min-height: 42px; padding: 0.45rem 0.85rem 0.55rem; white-space: nowrap; }
.success-member-button:hover { background: #7550ba; transform: translateY(-1px); }
.invite-spark { color: #f0a11e; font-size: 1rem; position: absolute; }
.invite-spark--one { right: 0.55rem; top: 0.25rem; transform: rotate(12deg); }
.invite-spark--two { bottom: 0.1rem; left: 0.45rem; transform: rotate(-10deg); }

@keyframes timer-pulse { to { transform: scale(1.06); } }

@media (max-width: 820px) and (orientation: portrait) {
  .lesson-menu { inset-block-start: 12%; }
  .mode-and-progress-row { align-items: stretch; flex-direction: column; margin-top: 0.5rem; }
  .game-mode-picker { border-width: 3px; gap: 0.3rem; padding: 0.3rem; }
  .game-mode-button { display: flex; flex-direction: column; justify-content: center; min-height: 61px; padding: 0.35rem 0.2rem; text-align: center; }
  .game-mode-button > span { font-size: 1.2rem; }
  .game-mode-button strong { font-size: 0.72rem; }
  .game-mode-button small { font-size: 0.58rem; }
  .player-level { flex: none; grid-template-columns: auto auto 1fr auto; min-height: 48px; width: 100%; }
  .player-level > span { grid-row: auto; }
  .player-level > i { grid-column: 3; }
  .content-section-picker { border-width: 3px; gap: 0.18rem; margin-top: 0.55rem; padding: 0.25rem; width: min(100%, 370px); }
  .content-section-picker button,
  .content-section-picker .standalone-page-nav { flex: 1 1 0; flex-direction: column; font-size: 0.69rem; gap: 0.08rem; justify-content: center; min-height: 47px; min-width: 0; padding: 0.25rem 0.12rem 0.32rem; text-align: center; }
  .lesson-section-heading { font-size: 1.1rem; margin-top: 0.62rem; }
  .learning-path-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0.2rem; width: 100%; }
  .path-stop { flex: 0 0 46%; scroll-snap-align: start; }
  .lesson-menu .lesson-grid { padding-top: 0.45rem; }
  .lesson-menu .lesson-card { min-height: 145px; }
  .lesson-grid.is-word-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0.65rem; }
  .lesson-grid.is-book-lessons { grid-template-columns: 1fr; padding-top: 0.65rem; }
  .lesson-card--book { grid-template-columns: minmax(105px, 38%) minmax(0, 1fr); min-height: 176px !important; }
  .book-lesson-art { min-height: 145px; }
  html.lesson-exercise-page .scene {
    background:
      linear-gradient(155deg, rgb(77 47 166 / 78%), rgb(35 125 175 / 58%)),
      url("assets/pinyin-adventure-bg-mobile.png") center / cover no-repeat;
    background-blend-mode: normal, normal;
  }
  html.unit-review-page .scene {
    background:
      linear-gradient(155deg, rgb(14 111 77 / 75%), rgb(25 111 145 / 55%)),
      url("assets/pinyin-adventure-bg-mobile.png") center / cover no-repeat;
    background-blend-mode: normal, normal;
  }
  .lesson-grid.is-unit-review { padding-top: 0.6rem; }
  .unit-review-card { gap: 0.7rem; grid-template-columns: 78px minmax(0, 1fr); min-height: 265px; padding: 0.78rem; }
  .unit-review-trophy { border-width: 4px; border-radius: 24px 20px 26px 22px; font-size: 2.8rem; height: 78px; width: 78px; }
  .unit-review-copy > strong { font-size: 1.35rem; }
  .unit-review-copy > span { font-size: 0.84rem; line-height: 1.62; }
  .unit-review-copy > b { font-size: 0.64rem; }
  .unit-review-start { grid-column: 1 / -1; justify-self: stretch; min-height: 48px; }
  .lesson-grid.is-word-levels .lesson-card { min-height: 158px !important; }
  .lesson-grid.is-word-levels .lesson-card:last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .word-level-number { border-width: 3px; box-shadow: 0 3px 0 var(--lesson-dark); font-size: 2rem; height: 58px; width: 58px; }
  .word-level-icon { font-size: 1rem; right: 0.55rem; top: 0.5rem; }
  .word-access-badge { font-size: 0.54rem; left: 0.45rem; top: 0.45rem; }
  .lesson-card--word > strong { font-size: clamp(0.92rem, 4.5vw, 1.12rem); padding-inline: 0.55rem; }
  .lesson-card--word > small { font-size: clamp(0.56rem, 2.65vw, 0.7rem); }
  .timer-count { border-width: 3px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 45%), 0 4px 0 #1b5b7d; font-size: 0.8rem; min-height: 45px; padding: 0.25rem 0.5rem 0.35rem; }
  .success-member-invite { grid-template-columns: auto 1fr; margin-bottom: 1.5rem; padding: 0.75rem 0.8rem 0.9rem; }
  .invite-badge { height: 46px; width: 46px; }
  .success-member-button { grid-column: 1 / -1; justify-self: stretch; }
}

@media (max-height: 720px) and (orientation: landscape) {
  .learning-path-strip { display: grid; }
  .content-section-picker { margin-top: 0.35rem; }
  .content-section-picker button,
  .content-section-picker .standalone-page-nav { min-height: 32px; padding-block: 0.25rem 0.32rem; }
  .lesson-section-heading { font-size: 1rem; margin-top: 0.4rem; }
  .mode-and-progress-row { margin-top: 0.35rem; }
  .game-mode-button { min-height: 49px; }
  .lesson-menu .lesson-card { min-height: min(18vh, 125px); }
}

/* Six genuinely different play styles. */
.game-mode-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-mode-button[data-game-mode="classic"] { background: #e1f7cb; }
.game-mode-button[data-game-mode="typing"] { background: #dff3ff; color: #155986; }
.game-mode-button[data-game-mode="speed"] { background: #ffe1d7; color: #8a342d; }
.game-mode-button[data-game-mode="tones"] { background: #eee4ff; color: #5b3e9f; }
.game-mode-button[data-game-mode="builder"] { background: #fff0b8; color: #74500e; }
.game-mode-button[data-game-mode="memory"] { background: #ffe0ec; color: #8a3159; }

.game-mode-button.is-active {
  border-color: currentColor;
  box-shadow: inset 0 -4px 0 rgb(31 72 47 / 12%), 0 3px 0 rgb(255 255 255 / 78%);
  filter: saturate(1.08);
}

.lesson-menu .lesson-grid {
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(77 145 76 / 55%) transparent;
  scrollbar-width: thin;
}

.activity-sign {
  align-items: center;
  background:
    radial-gradient(circle at 13% 30%, rgb(255 255 255 / 40%) 0 2px, transparent 3px),
    linear-gradient(90deg, rgb(112 62 20 / 7%) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(#fff0bd, #efbd70);
  border: 6px solid #9d5b25;
  border-radius: 24px 18px 26px 20px;
  box-shadow: inset 0 0 0 4px rgb(255 250 220 / 48%), 0 9px 0 #754018, 0 16px 28px rgb(78 47 19 / 22%);
  color: #5e2e0c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  min-height: 100%;
  padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1rem, 2.2vw, 2rem);
  position: relative;
  width: min(88%, 900px);
}

.activity-sign::before,
.activity-sign::after {
  background: #815023;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 18%);
  content: "";
  height: 22px;
  position: absolute;
  top: -15px;
  width: 22px;
}

.activity-sign::before { left: 6%; }
.activity-sign::after { right: 6%; }

.activity-sign[hidden],
.memory-board[hidden] {
  display: none !important;
}

.question-stage.is-activity-stage {
  grid-row: 4 / 6;
  padding: 0;
}

.activity-sign-kicker {
  background: #fff9e5;
  border: 2px solid rgb(139 80 31 / 22%);
  border-radius: 999px;
  color: #824816;
  font-size: clamp(0.76rem, 1.1vw, 0.95rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  padding: 0.28rem 0.85rem 0.36rem;
}

.activity-character {
  color: var(--navy);
  font-family: "PingFang SC", "Microsoft YaHei", var(--round-font);
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 1;
  margin: 0.25rem 0;
  text-shadow: 0 4px 0 rgb(255 255 255 / 58%);
}

.activity-character.is-compound {
  font-size: clamp(2.8rem, 5.6vw, 4.8rem);
}

.typing-sign label,
.activity-instruction {
  color: #77451d;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  font-weight: 900;
}

.typing-entry {
  align-items: stretch;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(170px, 1fr) auto auto;
  margin: 0.55rem 0 0.4rem;
  width: min(100%, 650px);
}

.typing-entry input {
  background: #fffef9;
  border: 5px solid #39a6ed;
  border-radius: 18px;
  box-shadow: inset 0 4px 0 rgb(19 70 111 / 7%), 0 5px 0 #1776b3;
  color: var(--navy);
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  min-height: 68px;
  min-width: 0;
  padding: 0.25rem 1rem 0.4rem;
  text-align: center;
}

.umlaut-button,
.activity-check-button,
.builder-reset-button {
  border: 4px solid white;
  border-radius: 17px;
  color: white;
  cursor: pointer;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 950;
  min-height: 62px;
  padding: 0.5rem 1rem 0.65rem;
}

.umlaut-button {
  background: var(--purple);
  box-shadow: 0 6px 0 #5f45a8;
  font-size: 1.75rem;
  min-width: 62px;
}

.activity-check-button {
  background: var(--green);
  box-shadow: 0 6px 0 #176838;
}

.typing-sign > small {
  color: #86542a;
  font-size: 0.78rem;
  font-weight: 800;
}

.activity-check-button.is-correct,
.typing-sign:has(.activity-check-button.is-correct),
.builder-sign:has(.activity-check-button.is-correct) {
  filter: saturate(1.1);
}

.activity-sign.is-wrong {
  animation: gentle-wiggle 470ms ease;
}

.builder-answer {
  align-items: center;
  background: #fffdf5;
  border: 4px dashed #b87a37;
  border-radius: 17px;
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  margin: 0.55rem auto;
  min-height: 64px;
  padding: 0.35rem 0.65rem;
  width: min(100%, 580px);
}

.builder-answer span,
.builder-tile {
  align-items: center;
  background: #4aa8e5;
  border: 4px solid white;
  border-radius: 14px;
  box-shadow: 0 5px 0 #176a9f;
  color: white;
  display: inline-flex;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 950;
  height: clamp(52px, 6vw, 68px);
  justify-content: center;
  min-width: clamp(52px, 6vw, 68px);
  padding: 0.2rem 0.45rem 0.35rem;
}

.builder-answer small {
  color: #a77a50;
  font-size: 0.82rem;
  font-weight: 900;
}

.builder-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1vw, 0.7rem);
  justify-content: center;
  margin: 0.15rem auto 0.55rem;
  min-height: 60px;
}

.builder-tile {
  cursor: pointer;
  transform: rotate(-2deg);
  transition: filter 150ms ease, transform 150ms ease;
}

.builder-tile:nth-child(even) { background: #ef6c66; box-shadow: 0 5px 0 #b93f3b; transform: rotate(2deg); }
.builder-tile:nth-child(3n) { background: #77b74c; box-shadow: 0 5px 0 #43812e; }
.builder-tile:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-3px) rotate(0); }
.builder-tile:disabled { filter: grayscale(0.5); opacity: 0.3; }

.builder-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
}

.builder-reset-button {
  background: #fff9e9;
  border-color: #9a632f;
  box-shadow: 0 5px 0 #774318;
  color: #64330f;
}

.memory-board {
  align-self: stretch;
  display: grid;
  gap: clamp(0.55rem, 1.25vw, 1rem);
  grid-column: 1;
  grid-row: 4 / 6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: center;
  perspective: 1000px;
  width: min(88%, 920px);
}

.memory-card {
  background: transparent;
  border: 0;
  cursor: pointer;
  min-height: clamp(100px, 15vh, 148px);
  padding: 0;
  perspective: 900px;
}

.memory-card-inner {
  display: grid;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 430ms cubic-bezier(.2, .8, .3, 1.2);
}

.memory-card.is-flipped .memory-card-inner { transform: rotateY(180deg); }

.memory-card-front,
.memory-card-back {
  align-items: center;
  backface-visibility: hidden;
  border: 5px solid #9b5c2a;
  border-radius: 20px 16px 22px 17px;
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 24%), 0 7px 0 #6f3f1b, 0 12px 20px rgb(67 42 20 / 18%);
  display: flex;
  grid-area: 1 / 1;
  justify-content: center;
  min-height: 100%;
}

.memory-card-front {
  background:
    linear-gradient(45deg, rgb(255 255 255 / 12%) 25%, transparent 25% 75%, rgb(255 255 255 / 12%) 75%),
    linear-gradient(#75b651, #3f8b3d);
  background-size: 30px 30px, auto;
  color: #f6f0b6;
  font-family: "PingFang SC", var(--round-font);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 950;
  text-shadow: 0 3px 0 #2a6d33;
}

.memory-card-back {
  background: linear-gradient(#fff9dc, #f5d391);
  color: var(--navy);
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  font-weight: 950;
  padding: 0.4rem;
  transform: rotateY(180deg);
}

.memory-card-back.hanzi {
  font-family: "PingFang SC", "Microsoft YaHei", var(--round-font);
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.memory-card.is-matched .memory-card-back {
  background: linear-gradient(#e9ffd4, #ace27f);
  border-color: #4e9845;
  box-shadow: inset 0 0 0 4px white, 0 7px 0 #2c7130, 0 0 0 6px #ffd75c;
}

.memory-board.is-large {
  gap: clamp(0.35rem, 0.7vw, 0.6rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(94%, 1080px);
}

.memory-board.is-large .memory-card {
  min-height: clamp(60px, 8.4vh, 78px);
}

.memory-board.is-large .memory-card-front {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
}

.memory-board.is-large .memory-card-back {
  font-size: clamp(1rem, 1.8vw, 1.55rem);
}

.memory-board.is-large .memory-card-back.hanzi {
  font-size: clamp(1.55rem, 2.8vw, 2.45rem);
}

@media (max-width: 820px) and (orientation: portrait) {
  .game-mode-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-mode-button {
    min-height: 72px;
  }

  .question-stage.is-activity-stage,
  .memory-board {
    grid-row: auto;
  }

  .activity-sign {
    min-height: 390px;
    padding: 1rem 0.8rem 1.2rem;
    width: 100%;
  }

  .typing-entry {
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) 56px;
  }

  .typing-entry input {
    border-width: 4px;
    font-size: 2rem;
    min-height: 62px;
    padding-inline: 0.45rem;
  }

  .typing-entry .activity-check-button {
    grid-column: 1 / -1;
    min-height: 56px;
  }

  .umlaut-button {
    min-height: 56px;
    min-width: 56px;
    padding: 0.35rem;
  }

  .builder-answer {
    min-height: 58px;
  }

  .builder-answer span,
  .builder-tile {
    height: 52px;
    min-width: 52px;
  }

  .memory-board {
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 2rem;
    width: 100%;
  }

  .memory-board.is-large {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 2.5rem;
  }

  .memory-board.is-large .memory-card {
    min-height: 76px;
  }

  .memory-card {
    min-height: 112px;
  }
}

@media (max-height: 720px) and (orientation: landscape) {
  .game-mode-picker {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .game-mode-button {
    display: flex;
    flex-direction: column;
    min-height: 58px;
    padding: 0.25rem 0.2rem 0.35rem;
    text-align: center;
  }

  .game-mode-button > span { font-size: 1.05rem; }
  .game-mode-button strong { font-size: 0.68rem; }
  .game-mode-button small { font-size: 0.52rem; }
}
.unit2-picture {
  display: block;
  background-image: var(--unit2-picture-sheet, none);
  background-size: 400% 300%;
  background-repeat: no-repeat;
  background-color: white;
  aspect-ratio: 1;
  height: auto !important;
}

.unit2-lesson2-picture {
  background-image: var(--unit2-lesson2-picture-sheet, none);
  background-size: 400% 400%;
}

.unit2-lesson3-picture {
  background-image: var(--unit2-lesson3-picture-sheet, none);
  background-size: 400% 300%;
}

.book-unit-heading {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-size: 1.25rem;
  color: #185b50;
}

.book-premium-lock {
  display: grid;
  place-items: center;
  min-height: 120px;
  font-size: 3rem;
}

.book-learning-path[hidden] { display: none !important; }
.lesson-menu.has-book-learning-path { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.book-learning-path {
  align-self: center;
  background: linear-gradient(110deg, rgb(255 248 218 / 96%), rgb(255 255 255 / 94%));
  border: 2px solid rgb(255 255 255 / 95%);
  border-radius: 20px;
  box-shadow: 0 4px 0 rgb(59 71 54 / 11%), 0 8px 18px rgb(43 62 53 / 8%);
  flex: 0 0 auto;
  margin: 0.6rem auto 0;
  max-width: 1080px;
  padding: 0.35rem 0.75rem;
  width: min(94%, 1080px);
}
.book-path-summary { align-items: center; cursor: pointer; display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr) minmax(100px, 0.42fr) auto; list-style: none; min-height: 48px; }
.book-path-summary::-webkit-details-marker { display: none; }
.book-path-summary-title { align-items: center; display: flex; gap: 0.65rem; min-width: 0; }
.book-path-summary-title > span:last-child { display: grid; gap: 0.05rem; }
.book-path-summary-title strong { color: #174b48; font-size: 0.98rem; line-height: 1.2; }
.book-path-summary-title small { color: #69747c; font-size: 0.82rem; font-weight: 800; }
.book-path-summary-progress { background: #e9e7d8; border-radius: 999px; height: 8px; overflow: hidden; }
.book-path-summary-progress > span { background: linear-gradient(90deg, #39aa76, #f4be38); border-radius: inherit; display: block; height: 100%; transition: width 250ms ease; }
.book-path-summary-toggle { align-items: center; color: #315fad; display: inline-flex; font-size: 0.88rem; font-weight: 900; gap: 0.35rem; white-space: nowrap; }
.book-path-summary-toggle > span { color: #7b6321; font-size: 1.15rem; transition: transform 180ms ease; }
.book-learning-path[open] .book-path-summary-toggle > span { transform: rotate(180deg); }
.book-path-content { border-top: 1px solid rgb(123 99 33 / 18%); margin-top: 0.25rem; padding: 0.75rem 0 0.25rem; }
.book-path-heading { align-items: center; display: flex; justify-content: space-between; }
.book-path-eyebrow { color: #7b6321; font-size: 0.75rem; font-weight: 1000; letter-spacing: 0.12em; }
.book-path-heading h3 { color: #174b48; font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin: 0.12rem 0 0; }
.book-path-heading p { color: #69747c; font-size: 0.78rem; font-weight: 800; margin: 0.18rem 0 0; }
.book-path-mascot { align-items: center; background: #e7f5e8; border: 2px solid white; border-radius: 50%; box-shadow: 0 3px 0 #c8e3cd; display: flex; flex: 0 0 38px; font-size: 1.25rem; height: 38px; justify-content: center; width: 38px; }
.book-path-progress { background: #e9e7d8; border-radius: 999px; height: 9px; margin: 0.75rem 0 0.8rem; overflow: hidden; }
.book-path-progress span { background: linear-gradient(90deg, #39aa76, #f4be38); border-radius: inherit; display: block; height: 100%; transition: width 250ms ease; }
.book-path-units { display: grid; gap: 0.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.book-path-unit { background: #fff; border: 2px solid #e9e6d7; border-radius: 18px; min-width: 0; padding: 0.65rem; position: relative; }
.book-path-unit.is-free { background: linear-gradient(145deg, #f0fff1, #fff); border-color: #b7dfbd; }
.book-path-unit.is-locked { background: linear-gradient(145deg, #fff9e9, #fff); border-color: #ecd99e; }
.book-path-unit.is-upcoming { background: #f7f8f8; border-style: dashed; opacity: 0.77; }
.book-path-unit-top { align-items: center; display: flex; gap: 0.45rem; }
.book-path-number { align-items: center; background: #2f9b6e; border-radius: 50%; color: white; display: flex; flex: 0 0 28px; font-size: 0.8rem; font-weight: 1000; height: 28px; justify-content: center; }
.book-path-unit.is-locked .book-path-number { background: #a67a24; }
.book-path-unit.is-upcoming .book-path-number { background: #9ca6a3; }
.book-path-unit-top div { display: grid; gap: 0.05rem; min-width: 0; }
.book-path-unit-top strong { color: #234b46; font-size: 0.76rem; line-height: 1.1; }
.book-path-unit-top small { color: #708078; font-size: 0.75rem; font-weight: 850; }
.book-path-lock { font-size: 0.85rem; margin-left: auto; }
.book-path-unit-title { color: #415558; display: block; font-size: 0.75rem; margin-top: 0.45rem; }
.book-path-description { color: #77847f; display: block; font-size: 0.75rem; font-weight: 800; margin-top: 0.12rem; }
.book-path-lessons { display: grid; gap: 0.2rem; margin-top: 0.45rem; }
.book-path-lessons span { align-items: center; color: #54636a; display: flex; font-size: 0.75rem; font-weight: 800; gap: 0.3rem; min-width: 0; }
.book-path-lessons i { align-items: center; background: #edf0e9; border-radius: 50%; color: #596b5d; display: inline-flex; flex: 0 0 16px; font-size: 0.55rem; font-style: normal; height: 16px; justify-content: center; }
.book-path-lessons .is-done i { background: #43a56c; color: white; }
.book-path-lessons .is-future { color: #9aa2a0; }
.book-path-footnote { color: #877139; display: block; font-size: 0.75rem; font-weight: 900; line-height: 1.3; margin-top: 0.45rem; }
.book-path-parent-link { color: #315fad; display: table; font-size: 0.75rem; font-weight: 950; margin: 0.65rem auto 0; text-decoration: none; }
.book-path-parent-link:hover { text-decoration: underline; }
.book-path-member-note { color: #7d5e16; font-size: 0.75rem; font-weight: 900; margin: 0.45rem 0 0; text-align: center; }
@media (max-width: 820px) {
  .book-learning-path { border-radius: 17px; margin-top: 0.45rem; padding: 0.35rem 0.65rem; width: min(96%, 640px); }
  .book-path-summary { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; }
  .book-path-summary-progress { grid-column: 1; grid-row: 2; margin-bottom: 0.3rem; }
  .book-path-summary-toggle { grid-column: 2; grid-row: 1 / 3; }
  .book-path-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-path-unit { padding: 0.58rem; }
  .book-path-unit-title { font-size: 0.75rem; }
  .book-path-description, .book-path-lessons span { font-size: 0.75rem; }
}
/* Keep long unit reviews inside the app window instead of widening the grid. */
.game-board {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.game-board > * {
  max-width: 100%;
  min-width: 0;
}

.game-topbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 640px);
}

.game-topbar > strong,
.game-prompt {
  overflow-wrap: anywhere;
  white-space: normal;
}

.game-hud {
  flex-wrap: wrap;
  gap: 0.65rem;
}

.progress-board {
  flex: 1 1 380px;
  max-width: 100%;
  min-width: 0;
}

.progress-board .bamboo-track {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.progress-board .bamboo-slot {
  aspect-ratio: 1;
  flex: 0 1 49px;
  height: clamp(24px, 3.7vw, 49px);
  min-width: 0;
}

.question-stage,
.answers,
.memory-board {
  min-width: 0;
}

.success-bamboo-row {
  max-width: 720px;
  width: 100%;
}

.success-bamboo-row img {
  flex: 0 1 auto;
  min-width: 0;
  object-fit: contain;
}

.game-board .answer-button {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-height: 720px) and (orientation: landscape) {
  body:has(#game-screen:not([hidden])) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell:has(#game-screen:not([hidden])) {
    height: auto;
    min-height: 100dvh;
    padding: 80px 16px 24px;
  }

  .game-board {
    grid-template-rows: auto auto auto minmax(110px, auto) auto;
    height: auto;
    left: auto;
    margin-inline: auto;
    min-height: 0;
    position: relative;
    top: auto;
    transform: none;
    width: min(100%, 1500px);
  }
}

@media (max-width: 1100px) and (orientation: portrait) {
  body:has(#game-screen:not([hidden])) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell:has(#game-screen:not([hidden])) {
    height: auto;
    min-height: 100dvh;
    padding: 110px clamp(11px, 3vw, 32px) 24px;
  }

  .game-board {
    gap: 0.85rem;
    grid-template-rows: auto auto auto auto auto;
    height: auto;
    left: auto;
    min-height: 0;
    padding: 0 2px 24px;
    position: relative;
    top: auto;
    transform: none;
    width: 100%;
  }

  .game-hud {
    justify-content: space-between;
  }

  .progress-board {
    flex: 1 1 380px;
  }

  .question-stage {
    flex: none;
    min-height: 170px;
  }

  .answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 96%;
  }

  .game-board .answer-button {
    min-height: 120px;
  }
}

@media (max-width: 820px) and (orientation: portrait) {
  .app-shell:has(#game-screen:not([hidden])) {
    padding-top: 80px;
  }

  .progress-board {
    flex: 0 1 auto;
  }

  .question-stage {
    min-height: 138px;
  }
}