:root {
  color-scheme: light;
  --bg: #f4ead4;
  --paper: #f7f0df;
  --panel: #fff9e9;
  --ink: #1c261f;
  --muted: #607064;
  --line: #2d3d34;
  --brand: #2f7a62;
  --brand-dark: #174939;
  --brand-soft: #dcefd8;
  --stone-green: #2f7a62;
  --stone-green-dark: #174939;
  --cinnabar: #b34834;
  --cinnabar-bright: #c65b45;
  --warn: #b34834;
  --warn-soft: #fff0e8;
  --brick: #b34834;
  --brick-dark: #862617;
  --gold: #e6b84d;
  --practice: #e6b84d;
  --practice-soft: #fbf0d8;
  --purple: #6e5e8f;
  --night: #1b2b4b;
  --shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  --hard-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  --block-shadow: 8px 8px 0 rgba(28, 38, 31, 0.16);
  --pixel-border: 4px solid var(--line);
  --pixel-border-soft: 3px solid var(--line);
  --button-depth: 6px;
  --step-corner: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%
  );
  --pixel-font: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace;
  --shazhou-scene-image: url("./assets/qvector/shazhou-practice-bg-v8-game.webp");
  --shazhou-scene-position: center;
  --shazhou-scene-size: cover;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (min-width: 700px) and (orientation: portrait) {
  :root {
    --shazhou-scene-image: url("./assets/qvector/shazhou-practice-bg-v7-ipad.webp");
    --shazhou-scene-position: center 42%;
  }
}

/* V142: first-wave tower tutorial and word-to-tower feedback */
.tower-countdown.ready {
  background: linear-gradient(180deg, #eaf5df, #b9d6b0);
  color: #2d6657;
  font-size: 1rem;
}

.tower-countdown.running {
  animation: towerCountdownPulse 1s ease-in-out infinite;
}

.tower-card-word {
  display: block;
  color: #23705f;
  font-weight: 950;
}

.tower-word-rune {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  overflow: hidden;
  color: #fff3b5;
  font-size: clamp(0.5rem, 1vw, 0.68rem);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(41, 25, 13, 0.72);
  white-space: nowrap;
}

.tower-defeat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.tower-defeat-actions button {
  min-height: 48px;
}

@keyframes towerCountdownPulse {
  50% {
    transform: scale(1.04);
  }
}

@media (max-width: 560px) {
  .tower-defeat-actions {
    display: grid;
  }
}

/* V154 local: the task itself is the instruction; remove duplicated practice explanations. */
body[data-mode="practice"] .qvector-practice-v89 .practice-room-v89.official-practice-v74.practice-room.lesson-screen.mixed-practice {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
}

body[data-mode="practice"] .qvector-practice-v89 .flow-test-skip-practice,
body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head,
body[data-mode="practice"] .qvector-practice-v89 .mixed-next-step {
  display: none !important;
}

@media (min-width: 900px) and (orientation: landscape) {
  :root {
    --shazhou-scene-position: center 44%;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(117, 120, 123, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 120, 123, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 14% 0%, rgba(44, 150, 120, 0.14), transparent 30rem),
    linear-gradient(180deg, #fbfaf4 0%, var(--bg) 100%);
  background-size: 8px 8px, 8px 8px, auto, auto;
  color: var(--ink);
}

body.eye-mode {
  --bg: #fbf3df;
  --panel: #fffaf0;
  --line: #eadfca;
  --brand-soft: #edf3dc;
  background:
    radial-gradient(circle at top left, rgba(231, 184, 90, 0.18), transparent 34rem),
    linear-gradient(180deg, #fffaf0 0%, var(--bg) 100%);
}

button,
select,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  overflow: hidden;
}

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.hero-copy {
  display: grid;
  gap: 10px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.hero-controls.primary-only {
  margin-top: 18px;
}

.parent-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.parent-trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 2px solid rgba(47, 122, 98, 0.2);
  border-radius: 6px;
  padding: 4px 9px;
  background: rgba(255, 253, 245, 0.92);
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
}

.hero-start {
  min-width: min(100%, 260px);
  min-height: 58px;
  font-size: 1.08rem;
}

.primary-only .preload-status {
  display: none;
}

.secondary.ready {
  border-color: rgba(40, 122, 88, 0.35);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.preload-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  background: #f3f5f0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.preload-status.ready {
  background: #fff2bf;
  color: #7a5300;
}

.hero-tags span,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 11px;
  background: #eef6ef;
  color: var(--brand-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.hero-visual {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(40, 50, 59, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(40, 50, 59, 0.045) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, rgba(224, 239, 231, 0.9), rgba(255, 247, 216, 0.84)),
    #fffdf5;
  box-shadow: 8px 8px 0 rgba(40, 50, 59, 0.14);
  clip-path: var(--step-corner);
}

.hero-visual::before {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 18px;
  width: 54%;
  height: 42px;
  background:
    repeating-linear-gradient(90deg, var(--brand) 0 24px, var(--brand-dark) 24px 28px),
    var(--brand);
  box-shadow:
    32px -22px 0 rgba(94, 154, 143, 0.4),
    84px -42px 0 rgba(224, 169, 59, 0.42);
  opacity: 0.36;
  pointer-events: none;
}

.dia-avatar {
  display: block;
  width: 96px;
  aspect-ratio: 1;
  border: 4px solid #fff;
  border-radius: 24px;
  background-color: #fff8df;
  background-image: url("./assets/qvector/dia-qvector-v2.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  box-shadow: 0 14px 28px rgba(22, 54, 39, 0.12);
}

.dia-pixel-avatar {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-image: none;
  background:
    linear-gradient(90deg, transparent 0 18%, #fff7ea 18% 68%, transparent 68%),
    linear-gradient(180deg, transparent 0 18%, #f5f0e2 18% 72%, transparent 72%);
  box-shadow: 6px 6px 0 rgba(40, 50, 59, 0.12);
  image-rendering: pixelated;
}

.dia-pixel-avatar::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 30%;
  width: 72%;
  height: 42%;
  background:
    linear-gradient(90deg, transparent 0 70%, #28323b 70% 78%, transparent 78%),
    linear-gradient(90deg, #c8503c 0 16%, transparent 16% 28%, #c8503c 28% 44%, transparent 44%),
    #fff7ea;
  box-shadow:
    inset 0 -8px 0 #e9ddc9,
    0 0 0 4px #28323b;
  clip-path: polygon(10% 0, 86% 0, 100% 50%, 86% 100%, 10% 100%, 0 50%);
}

.dia-pixel-avatar::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 32%;
  width: 28%;
  height: 38%;
  background: #c8503c;
  box-shadow: 0 0 0 4px #28323b;
  clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%);
}

.dia-pixel-avatar .dia-eye,
.dia-pixel-avatar .dia-fin {
  display: none;
}

.dia-avatar[role="img"] {
  animation: dia-bob 1.8s ease-in-out infinite;
}

.dia-avatar.dia-thinking {
  filter: saturate(0.86);
}

.dia-avatar.dia-cheer,
.dia-avatar.dia-happy {
  filter: saturate(1.08);
}

.dia-avatar.dia-comfort {
  filter: saturate(0.92) brightness(0.98);
}

.dia-avatar.dia-guide {
  filter: saturate(1.04);
}

.dia-avatar.dia-listen {
  filter: saturate(1.02) brightness(1.02);
}

@keyframes dia-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.dia-happy {
  background-position: center bottom;
}

.dia-thinking {
  background-position: center bottom;
}

.dia-cheer {
  background-position: center bottom;
}

.dia-guide {
  background-position: center bottom;
}

.dia-listen {
  background-position: center bottom;
}

.dia-comfort {
  background-position: center bottom;
}

.hero-dia {
  width: min(130px, 28vw);
  border-radius: 28px;
  background-color: #fff8df;
}

.companion-bubble {
  width: min(290px, 100%);
  min-width: 0;
  border: 1px solid rgba(40, 122, 88, 0.22);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(22, 54, 39, 0.08);
}

.companion-bubble strong {
  display: block;
  color: var(--brand-dark);
  font-size: 0.82rem;
}

.companion-bubble span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.companion-bubble[data-tone="happy"] {
  border-color: rgba(246, 196, 83, 0.72);
  background: #fff9e8;
}

.companion-bubble[data-tone="coach"] {
  border-color: rgba(178, 77, 34, 0.22);
  background: #fff7f2;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-title-line {
  display: inline;
}

.subhead {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.hero-status {
  display: grid;
  place-items: center;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid rgba(40, 122, 88, 0.2);
}

.hero-status span {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.hero-status small {
  color: var(--muted);
  font-weight: 700;
}

main {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.toolbar,
.mode-tabs,
.study-area {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 14px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 190px;
  flex: 1;
}

label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
}

textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

input[type="file"] {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  padding: 12px;
}

.ocr-preview {
  width: min(100%, 420px);
  max-height: 240px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.mode-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
}

.tab,
.ghost-button,
.secondary,
.primary,
.danger,
.icon-button {
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 800;
}

.tab {
  flex: 1;
  min-width: max-content;
  background: transparent;
  color: var(--muted);
}

.tab.active {
  background: var(--brand);
  color: #fff;
}

.ghost-button,
.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-dark);
}

.primary {
  background: var(--brand);
  color: #fff;
}

.danger {
  background: var(--warn-soft);
  color: var(--warn);
}

.icon-button {
  width: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.study-area {
  min-height: 470px;
  padding: 18px;
}

body[data-mode="intro"] .study-area,
body[data-mode="swipe"] .study-area,
body[data-mode="checkpoint"] .study-area,
body[data-mode="meaning"] .study-area,
body[data-mode="spell"] .study-area,
body[data-mode="speak"] .study-area,
body[data-mode="game"] .study-area,
body[data-mode="report"] .study-area {
  min-height: calc(100vh - 48px);
  border: 0;
  background: var(--paper);
  padding: 0;
}

body[data-mode="home"] .toolbar,
body[data-mode="home"] .mode-tabs {
  display: none;
}

body[data-mode="home"] .study-area {
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body[data-mode="home"] .hero {
  min-height: min(580px, calc(100vh - 80px));
}

body[data-mode="home"] .hero h1 {
  max-width: 720px;
}

.home-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 4px 0;
}

.home-compact h2 {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
}

.home-compact p,
.home-compact small {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 800;
}

.home-mini-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-mode="map"] .toolbar,
body[data-mode="map"] .mode-tabs,
body[data-mode="unit"] .toolbar,
body[data-mode="unit"] .mode-tabs,
body[data-mode="intro"] .toolbar,
body[data-mode="intro"] .mode-tabs,
body[data-mode="swipe"] .toolbar,
body[data-mode="swipe"] .mode-tabs,
body[data-mode="checkpoint"] .toolbar,
body[data-mode="checkpoint"] .mode-tabs,
body[data-mode="meaning"] .toolbar,
body[data-mode="meaning"] .mode-tabs,
body[data-mode="spell"] .toolbar,
body[data-mode="spell"] .mode-tabs,
body[data-mode="speak"] .toolbar,
body[data-mode="speak"] .mode-tabs,
body[data-mode="game"] .toolbar,
body[data-mode="game"] .mode-tabs,
body[data-mode="report"] .toolbar,
body[data-mode="report"] .mode-tabs {
  display: none;
}

body[data-mode="intro"] .hero,
body[data-mode="swipe"] .hero,
body[data-mode="checkpoint"] .hero,
body[data-mode="meaning"] .hero,
body[data-mode="spell"] .hero,
body[data-mode="speak"] .hero,
body[data-mode="game"] .hero,
body[data-mode="report"] .hero {
  display: none;
}

body[data-mode="map"] .hero,
body[data-mode="unit"] .hero,
body[data-mode="swipe"] .hero,
body[data-mode="spell"] .hero,
body[data-mode="speak"] .hero,
body[data-mode="game"] .hero {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
  border-radius: 16px;
}

body[data-mode="map"] .hero h1,
body[data-mode="unit"] .hero h1,
body[data-mode="swipe"] .hero h1,
body[data-mode="spell"] .hero h1,
body[data-mode="speak"] .hero h1,
body[data-mode="game"] .hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.45rem);
}

body[data-mode="map"] .subhead,
body[data-mode="unit"] .subhead,
body[data-mode="swipe"] .subhead,
body[data-mode="spell"] .subhead,
body[data-mode="speak"] .subhead,
body[data-mode="game"] .subhead,
body[data-mode="map"] .hero-tags,
body[data-mode="unit"] .hero-tags,
body[data-mode="swipe"] .hero-tags,
body[data-mode="spell"] .hero-tags,
body[data-mode="speak"] .hero-tags,
body[data-mode="game"] .hero-tags,
body[data-mode="map"] .hero-controls,
body[data-mode="unit"] .hero-controls,
body[data-mode="swipe"] .hero-controls,
body[data-mode="spell"] .hero-controls,
body[data-mode="speak"] .hero-controls,
body[data-mode="game"] .hero-controls {
  display: none;
}

body[data-mode="map"] .hero-visual,
body[data-mode="unit"] .hero-visual,
body[data-mode="swipe"] .hero-visual,
body[data-mode="spell"] .hero-visual,
body[data-mode="speak"] .hero-visual,
body[data-mode="game"] .hero-visual {
  grid-template-columns: 72px minmax(140px, 210px) 64px;
  align-items: center;
}

body[data-mode="map"] .hero-dia,
body[data-mode="unit"] .hero-dia,
body[data-mode="swipe"] .hero-dia,
body[data-mode="spell"] .hero-dia,
body[data-mode="speak"] .hero-dia,
body[data-mode="game"] .hero-dia {
  width: 72px;
}

body[data-mode="map"] .hero-status,
body[data-mode="unit"] .hero-status,
body[data-mode="swipe"] .hero-status,
body[data-mode="spell"] .hero-status,
body[data-mode="speak"] .hero-status,
body[data-mode="game"] .hero-status {
  width: 64px;
}

body[data-mode="map"] .hero-status span,
body[data-mode="unit"] .hero-status span,
body[data-mode="swipe"] .hero-status span,
body[data-mode="spell"] .hero-status span,
body[data-mode="speak"] .hero-status span,
body[data-mode="game"] .hero-status span {
  font-size: 1.55rem;
}

.app-map,
.unit-world {
  display: grid;
  gap: 12px;
}

.map-status,
.unit-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(40, 122, 88, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(223, 242, 232, 0.9), rgba(255, 255, 255, 0.95)),
    #fff;
}

.map-status > *,
.unit-header > *,
.build-copy,
.unit-copy,
.hero-copy,
.hero-visual {
  min-width: 0;
}

.unit-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pixel-label {
  display: inline-flex;
  width: max-content;
  border: 2px solid rgba(40, 122, 88, 0.22);
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff;
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.preset-badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  border: 1px solid rgba(246, 196, 83, 0.72);
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff9e8;
  color: #7a5300;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.map-status h2,
.unit-header h2 {
  margin: 6px 0 3px;
  color: var(--brand-dark);
  font-size: clamp(1.45rem, 5vw, 2.55rem);
  line-height: 1.05;
}

.map-status p,
.unit-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.world-story-panel,
.unit-story-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(40, 122, 88, 0.18);
  border-radius: 16px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 253, 245, 0.96), rgba(240, 249, 243, 0.92)),
    #fffdf5;
  box-shadow: 6px 6px 0 rgba(40, 50, 59, 0.08);
}

.world-story-panel {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.38fr);
  align-items: center;
}

.unit-story-panel {
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
  align-items: stretch;
}

.world-story-panel h3,
.unit-story-panel h3 {
  margin: 8px 0;
  color: var(--brand-dark);
  font-size: clamp(1.35rem, 4.8vw, 2.25rem);
  line-height: 1.1;
}

.world-story-panel p,
.unit-story-panel p,
.unit-story-panel blockquote {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.world-story-panel p + p {
  margin-top: 8px;
}

.unit-story-panel blockquote {
  margin-top: 10px;
  border-left: 4px solid rgba(94, 154, 143, 0.55);
  padding-left: 12px;
  color: var(--brand-dark);
  font-weight: 850;
}

.story-marks,
.story-word-sparks {
  display: grid;
  gap: 8px;
}

.story-marks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-marks span,
.story-word-sparks article {
  border: 1px solid rgba(246, 196, 83, 0.58);
  border-radius: 12px;
  background: rgba(255, 249, 232, 0.82);
  color: #7a5300;
  font-weight: 900;
}

.story-marks span {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
}

.story-word-sparks article {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.story-word-sparks strong {
  color: var(--brand-dark);
  font-size: 1.05rem;
}

.story-word-sparks span {
  color: #8a6200;
  font-size: 0.8rem;
}

.story-word-sparks small {
  color: var(--muted);
  line-height: 1.45;
}

.map-score,
.unit-energy {
  display: grid;
  place-items: center;
  width: 82px;
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 18px;
  background: var(--brand);
  color: #fff;
  box-shadow: 8px 8px 0 rgba(21, 84, 60, 0.12);
}

.map-score strong,
.unit-energy strong {
  font-size: 1.7rem;
  line-height: 1;
}

.map-score span,
.unit-energy span {
  font-size: 0.78rem;
  font-weight: 900;
}

.unit-path {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(40, 122, 88, 0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(40, 122, 88, 0.06) 25%, transparent 25%),
    #fffaf0;
  background-size: 34px 34px;
  border: 1px solid rgba(246, 196, 83, 0.58);
}

.unit-path::before {
  content: "";
  position: absolute;
  inset: 34px 50% 34px auto;
  width: 8px;
  border-radius: 999px;
  background: rgba(40, 122, 88, 0.16);
}

.unit-node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: min(620px, 100%);
  border: 0;
  border-radius: 15px;
  padding: 9px;
  background: #fff;
  box-shadow: 8px 8px 0 rgba(22, 54, 39, 0.08);
  text-align: left;
}

.unit-node.right {
  justify-self: end;
}

.unit-node.recommended {
  outline: 3px solid rgba(246, 196, 83, 0.9);
}

.unit-cube {
  display: grid;
  place-items: center;
  width: 66px;
  aspect-ratio: 1;
  border: 3px solid rgba(21, 84, 60, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, #76bd8c 0 50%, #287a58 50% 100%);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 950;
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.08);
}

.unit-copy {
  display: grid;
  gap: 4px;
}

.unit-copy strong {
  color: var(--brand-dark);
  font-size: 1.12rem;
}

.unit-copy small,
.unit-copy em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.unit-copy i {
  overflow: hidden;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #e8eee8;
}

.unit-copy i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #f6c453);
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.unit-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.step-block {
  display: grid;
  gap: 6px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 6px 6px 0 rgba(22, 54, 39, 0.06);
}

.step-block span {
  display: grid;
  place-items: center;
  width: 36px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 950;
}

.step-block strong {
  color: var(--brand-dark);
  font-size: 1rem;
}

.step-block small {
  color: var(--muted);
  line-height: 1.4;
}

.active-step {
  border-color: rgba(40, 122, 88, 0.35);
  background: #f6fbf7;
}

.boss-step {
  border-color: rgba(246, 196, 83, 0.8);
  background: #fffaf0;
}

.unit-word-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.play-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.play-nav span {
  color: var(--brand-dark);
  font-weight: 950;
  text-align: center;
}

.word-brick {
  display: grid;
  gap: 3px;
  min-height: 58px;
  border: 2px solid #e5ede5;
  border-radius: 12px;
  padding: 8px;
  background: #f6f8f5;
}

.word-brick .mini-visual {
  justify-self: start;
  margin-bottom: 2px;
}

.word-brick strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.word-brick small {
  color: var(--muted);
  font-weight: 800;
}

.word-brick.lit {
  border-color: rgba(40, 122, 88, 0.32);
  background: var(--brand-soft);
}

.word-brick.needs-work {
  border-color: rgba(246, 196, 83, 0.78);
  background: #fff8df;
}

.word-visual {
  display: grid;
  gap: 8px;
  width: min(250px, 100%);
  margin: 0;
}

.visual-canvas {
  display: grid;
  place-items: center;
  min-height: 136px;
  border: 1px solid rgba(40, 122, 88, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(223, 242, 232, 0.54), rgba(255, 255, 255, 0.94)),
    #fff;
}

.visual-canvas svg {
  width: min(210px, 88%);
  height: auto;
}

.word-visual figcaption {
  display: grid;
  gap: 3px;
  text-align: center;
}

.word-visual figcaption b {
  color: var(--brand-dark);
  font-size: 0.82rem;
}

.word-visual figcaption span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

.word-art-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mini-visual {
  width: 48px;
}

.mini-visual .visual-canvas {
  min-height: 48px;
  border-radius: 12px;
}

.mini-visual .visual-canvas svg {
  width: 44px;
}

.visual-main,
.animal,
.box {
  fill: #76bd8c;
  stroke: #15543c;
  stroke-width: 3;
}

.visual-window,
.cloud,
.paper,
.book,
.calendar,
.room,
.room-highlight {
  fill: #ffffff;
  stroke: #9dcbb3;
  stroke-width: 3;
}

.room-highlight {
  fill: #fff4df;
  stroke: #f0a13b;
}

.visual-road,
.visual-path,
.body-line,
.visual-detail,
.field-line,
.stem,
.music-line,
.rain-line,
.check-line,
.visual-arrow,
.visual-arrow-head,
.white-line {
  fill: none;
  stroke: #15543c;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visual-road {
  stroke: #dce4dc;
  stroke-width: 7;
}

.visual-path {
  stroke: #f6c453;
  stroke-dasharray: 5 8;
}

.visual-arrow,
.visual-arrow-head {
  stroke: #b24d22;
}

.white-line {
  stroke: #ffffff;
}

.field,
.day-on,
.leaf {
  fill: #dff2e8;
  stroke: #287a58;
  stroke-width: 3;
}

.day-off {
  fill: #edf1ed;
  stroke: #cbd8ce;
  stroke-width: 2;
}

.skin {
  fill: #ffd9b9;
  stroke: #8a6a2c;
  stroke-width: 2;
}

.wheel,
.pupil,
.spot {
  fill: #1f2a24;
}

.hat,
.desk,
.target,
.eye {
  fill: #fffaf0;
  stroke: #8a6a2c;
  stroke-width: 3;
}

.gold-shape,
.flag,
.ball,
.petal {
  fill: #f6c453;
  stroke: #8a6a2c;
  stroke-width: 3;
}

.petal {
  fill: #ffd3bf;
}

.all-ring {
  fill: rgba(246, 196, 83, 0.18);
  stroke: #f0a13b;
  stroke-width: 4;
  stroke-dasharray: 8 7;
}

.visual-label,
.mini-label,
.math-label {
  fill: #15543c;
  font-weight: 950;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.mini-label {
  font-size: 9px;
}

.math-label {
  font-size: 20px;
}

.word-card {
  display: grid;
  gap: 16px;
  min-height: 420px;
  align-content: center;
  text-align: center;
}

.lesson-screen {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 48px);
  padding: 28px 26px 112px;
  background: #fff;
}

.course-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.course-back {
  border: 0;
  background: transparent;
  color: #9a9f9b;
  font-size: 2.2rem;
  line-height: 1;
  min-height: 44px;
}

.course-progress {
  overflow: hidden;
  height: 14px;
  border-radius: 999px;
  background: #e8e8e8;
}

.course-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--stone-green);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.course-top span {
  color: #8b918c;
  font-weight: 950;
}

.course-stage-label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 2px solid var(--ink);
  background: #fffdf5;
  padding: 4px 8px;
  box-shadow: 3px 3px 0 rgba(40, 50, 59, 0.12);
  color: var(--ink) !important;
  font-family: var(--pixel-font);
  font-size: 0.72rem;
}

.duo-stage,
.meaning-prompt {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
}

.intro-screen .duo-stage {
  min-height: 56vh;
}

.duo-stage .dia-avatar {
  width: 118px;
  border-radius: 30px;
}

.speech-bubble {
  position: relative;
  width: min(420px, 100%);
  border: 2px solid #e1e1e1;
  border-radius: 18px;
  padding: 14px 18px;
  background: #fff;
  color: #4b4f4c;
  text-align: center;
  font-weight: 900;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 24px;
  height: 24px;
  border-right: 2px solid #e1e1e1;
  border-bottom: 2px solid #e1e1e1;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.speech-bubble strong {
  display: block;
  color: var(--brand-dark);
  font-size: 0.85rem;
}

.speech-bubble p {
  margin: 4px 0 0;
  color: #555b57;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  line-height: 1.45;
}

.big-bubble {
  order: -1;
}

.bottom-cta {
  position: fixed;
  z-index: 20;
  left: max(24px, calc((100vw - 1120px) / 2 + 24px));
  right: max(24px, calc((100vw - 1120px) / 2 + 24px));
  bottom: 24px;
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: var(--stone-green);
  color: #fff;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18);
  font-size: 1.12rem;
  font-weight: 950;
}

.bottom-cta.disabled,
.bottom-cta:disabled {
  background: #e5e5e5;
  color: #aaa;
  box-shadow: none;
  cursor: default;
}

.meaning-screen {
  align-content: start;
}

.quiz-round-note {
  display: grid;
  gap: 5px;
  width: min(560px, 100%);
  margin: 0 auto;
  border: 2px solid rgba(94, 154, 143, 0.3);
  padding: 10px 12px;
  background: rgba(241, 236, 221, 0.86);
  color: var(--muted);
  box-shadow: 4px 4px 0 rgba(40, 50, 59, 0.1);
  clip-path: var(--step-corner);
}

.quiz-round-note strong {
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: clamp(0.8rem, 2.2vw, 0.94rem);
}

.quiz-round-note span {
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.45;
}

.meaning-prompt {
  grid-template-columns: 108px minmax(0, 1fr);
  justify-items: start;
  width: min(560px, 100%);
  margin: 0 auto;
}

.meaning-prompt .dia-avatar {
  width: 92px;
  border-radius: 24px;
}

.meaning-prompt .speech-bubble {
  text-align: left;
}

.meaning-prompt .speech-bubble::after {
  left: -10px;
  bottom: 50%;
  border-left: 2px solid #e1e1e1;
  border-bottom: 2px solid #e1e1e1;
  border-right: 0;
  transform: translateY(50%) rotate(45deg);
}

.meaning-art-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(520px, 100%);
  margin: 0 auto;
}

.meaning-art-card .word-visual {
  width: min(360px, 100%);
}

.meaning-art-card .visual-canvas {
  min-height: 260px;
  border: 0;
  background: transparent;
}

.meaning-art-card figcaption {
  display: none;
}

.meaning-art-card small {
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 900;
}

.clue-window {
  position: relative;
  overflow: hidden;
  border: var(--pixel-border);
  padding: 12px;
  background:
    linear-gradient(rgba(47, 122, 98, 0.07) 2px, transparent 2px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(47, 122, 98, 0.05) 2px, transparent 2px) 0 0 / 20px 20px,
    #fffdf5;
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.clue-window-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 3px solid var(--line);
  padding: 8px 10px;
  background: #f7f0df;
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.78rem;
}

.clue-window-top strong {
  color: var(--stone-green-dark);
  white-space: nowrap;
}

.clue-star {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--line);
  background: #e8dcc2;
  color: rgba(40, 50, 59, 0.34);
  font-family: var(--pixel-font);
  font-size: 1.2rem;
  box-shadow: 4px 4px 0 rgba(40, 50, 59, 0.12);
}

.meaning-state-correct {
  border-color: var(--gold);
  box-shadow:
    var(--block-shadow),
    0 0 0 8px rgba(230, 184, 77, 0.18);
}

.meaning-state-correct .clue-star {
  background: var(--gold);
  color: #fffdf5;
  animation: clueStarLit 760ms steps(4, end) both;
}

.meaning-state-soft-wrong {
  border-color: #d7a247;
  background:
    repeating-linear-gradient(135deg, rgba(230, 184, 77, 0.12) 0 12px, transparent 12px 24px),
    #fff9e9;
}

.meaning-state-soft-wrong .clue-window-top strong {
  color: #8a6200;
}

.meaning-continue.disabled,
.meaning-continue:disabled {
  border-color: rgba(40, 50, 59, 0.44);
  background:
    repeating-linear-gradient(45deg, rgba(40, 50, 59, 0.08) 0 10px, transparent 10px 20px),
    #eee7d5;
  color: rgba(40, 50, 59, 0.56);
  box-shadow: inset 0 -5px 0 rgba(40, 50, 59, 0.18);
}

.meaning-continue.active {
  background:
    linear-gradient(180deg, #e0efe7 0 48%, var(--stone-green) 48% 100%);
  color: #fffdf5;
  box-shadow:
    inset 0 -5px 0 var(--stone-green-dark),
    0 0 0 6px rgba(47, 122, 98, 0.14);
}

@keyframes clueStarLit {
  0% {
    transform: scale(0.84);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.28);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.06);
  }
}

.meaning-options {
  width: min(560px, 100%);
  margin: 0 auto;
}

.choice-option {
  min-height: 62px;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  background: #fff;
  color: #424743;
  font-size: 1.12rem;
  font-weight: 950;
  text-align: left;
  padding: 0 18px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
}

.choice-option.correct {
  border-color: var(--stone-green);
  background: #e0efe7;
  color: var(--stone-green-dark);
}

.choice-option.wrong {
  border-color: #ffc9b8;
  background: #fff1ea;
  color: var(--warn);
}

.task-board,
.admin-console {
  display: grid;
  gap: 16px;
}

.task-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: center;
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #ecf7f0 100%);
  border: 1px solid var(--line);
}

.task-hero-copy {
  display: grid;
  gap: 14px;
}

.task-hero h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  line-height: 1.08;
}

.choice-option.wrong {
  border-color: #d7a247;
  background: #fff7d8;
  color: #6f4e00;
  box-shadow: inset 0 -5px 0 rgba(138, 98, 0, 0.2);
}

.task-hero-art {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  justify-self: end;
  border-radius: 16px;
  background: #fff8df;
  box-shadow: 0 14px 30px rgba(22, 54, 39, 0.1);
}

.task-hero-art .dia-avatar {
  width: 120px;
  border-radius: 24px;
}

.progress-track,
.bar-track {
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee8;
}

.progress-track {
  height: 18px;
}

.progress-track span,
.bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #76bd8c);
}

.reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coconut {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: #eef3ee;
  color: var(--muted);
  font-weight: 900;
}

.coconut.won {
  background: #fff2bf;
  color: #7a5300;
}

.coin-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff8df;
  color: #8a6200;
  border: 1px solid rgba(246, 196, 83, 0.55);
  font-weight: 900;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mission-card {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  text-align: left;
}

.mission-card strong {
  display: block;
  color: var(--brand-dark);
  font-size: 2rem;
}

.mission-card span {
  color: var(--muted);
  font-weight: 900;
}

.daily-report {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(40, 122, 88, 0.2);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(40, 122, 88, 0.12), transparent 42%),
    #fff;
}

.daily-report h3 {
  margin: 8px 0 6px;
  color: var(--brand-dark);
  font-size: clamp(1.4rem, 4vw, 2rem);
}

.daily-report p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-grid article {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.report-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-dark);
}

.report-grid small {
  display: inline-flex;
  margin: 0 8px 8px 4px;
  color: #8a6a2c;
  font-weight: 800;
}

.report-screen {
  align-content: start;
}

.completion-hero {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  width: min(760px, 100%);
  margin: 0 auto;
  border: 2px solid rgba(94, 154, 143, 0.24);
  border-radius: 8px;
  padding: 18px;
  background: #fffdf5;
  box-shadow: var(--hard-shadow);
}

.completion-hero .dia-avatar {
  width: 112px;
}

.completion-hero h2 {
  margin: 8px 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 7vw, 3.5rem);
  line-height: 1.08;
}

.completion-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 850;
}

.completion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(760px, 100%);
  margin: 0 auto;
}

.completion-grid article {
  min-height: 126px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fffdf5;
  box-shadow: 4px 4px 0 rgba(40, 50, 59, 0.08);
}

.completion-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-dark);
}

.completion-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 850;
}

.swipe-layout {
  display: grid;
  gap: 14px;
  place-items: center;
}

.swipe-flash,
.swipe-coach {
  width: min(560px, 100%);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: center;
  font-weight: 950;
}

.swipe-flash {
  border: 1px solid rgba(40, 122, 88, 0.18);
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 10px 20px rgba(22, 54, 39, 0.08);
}

.swipe-flash.practice {
  border-color: rgba(240, 161, 59, 0.46);
  background: var(--practice-soft);
  color: #8a530b;
}

.swipe-flash.known {
  border-color: rgba(40, 122, 88, 0.38);
  background: var(--brand-soft);
}

.swipe-coach {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(246, 196, 83, 0.64);
  background: #fff9e8;
  color: #7a5300;
}

.swipe-coach span {
  color: var(--brand-dark);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.swipe-stage {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 560px) 92px;
  gap: 10px;
  align-items: stretch;
  width: min(760px, 100%);
}

.compact-swipe-stage {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  width: min(560px, 100%);
}

.swipe-zone {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 420px;
  border: 2px dashed rgba(40, 122, 88, 0.18);
  border-radius: 22px;
  color: var(--muted);
  font-weight: 950;
  text-align: center;
}

.swipe-zone span {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #fff;
  font-size: 1.4rem;
}

.swipe-zone small {
  color: inherit;
  font-weight: 900;
}

.practice-zone {
  border-color: rgba(240, 161, 59, 0.62);
  background: var(--practice-soft);
  color: #8a530b;
}

.known-zone {
  border-color: rgba(40, 122, 88, 0.42);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.swipe-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: grid;
  gap: 10px;
  min-height: 420px;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(40, 122, 88, 0.24);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
  touch-action: pan-y;
  user-select: none;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.swipe-card .word-visual {
  width: min(230px, 100%);
}

.swipe-card .visual-canvas {
  min-height: 118px;
}

.swipe-card.dragging {
  cursor: grabbing;
  box-shadow: 0 22px 42px rgba(22, 54, 39, 0.18);
}

.swipe-card[data-intent="practice"] {
  border-color: rgba(240, 161, 59, 0.7);
  background: #fffaf2;
}

.swipe-card[data-intent="known"] {
  border-color: rgba(40, 122, 88, 0.58);
  background: #f7fbf7;
}

.swipe-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.swipe-card h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(3.6rem, 14vw, 7.2rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.swipe-card p,
.swipe-card small {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.swipe-card strong {
  color: var(--ink);
  font-size: clamp(1.4rem, 5vw, 2.4rem);
}

.swipe-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.swipe-hint i {
  display: block;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}

.swipe-overlay {
  position: absolute;
  top: 18px;
  border-radius: 999px;
  padding: 8px 12px;
  color: #fff;
  font-weight: 950;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
  pointer-events: none;
}

.practice-overlay {
  left: 18px;
  background: var(--practice);
}

.known-overlay {
  right: 18px;
  background: var(--brand);
}

.swipe-card[data-intent="practice"] .practice-overlay,
.swipe-card[data-intent="known"] .known-overlay {
  opacity: 1;
  transform: scale(1);
}

.swipe-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(560px, 100%);
}

.swipe-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(560px, 100%);
  margin: 2px auto 0;
}

.swipe-action-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, max-content) auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: var(--pixel-border);
  border-radius: 0;
  padding: 10px 12px;
  color: var(--ink);
  font-family: var(--pixel-font);
  font-weight: 950;
  line-height: 1;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
}

.swipe-action-button span,
.swipe-action-button strong {
  min-width: 0;
}

.swipe-action-button span {
  font-size: 1.05rem;
}

.wait-action {
  background:
    linear-gradient(180deg, #fff7d8 0 48%, #e6c36a 48% 100%);
}

.light-action {
  background:
    linear-gradient(180deg, #e0efe7 0 48%, #79b98d 48% 100%);
}

.swipe-action-button:active {
  transform: translateY(4px);
  box-shadow: 2px 2px 0 rgba(28, 38, 31, 0.16);
}

.swipe-guide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  width: min(560px, 100%);
  min-height: 48px;
  border: 2px solid rgba(94, 154, 143, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(248, 244, 232, 0.9);
  color: var(--brand-dark);
  font-weight: 950;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(40, 50, 59, 0.1);
}

.swipe-round-note {
  display: grid;
  gap: 6px;
  width: min(560px, 100%);
  margin: 0 auto;
  border: var(--pixel-border);
  border-color: rgba(40, 50, 59, 0.36);
  padding: 12px 14px;
  background: rgba(241, 236, 221, 0.92);
  box-shadow: 5px 5px 0 rgba(40, 50, 59, 0.12);
  clip-path: var(--step-corner);
}

.swipe-round-note strong {
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: clamp(0.82rem, 2.4vw, 0.98rem);
}

.swipe-round-note span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.45;
}

.swipe-guide strong {
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.84rem;
}

.swipe-guide span:first-child {
  color: #8a6200;
}

.swipe-guide span:last-child {
  color: var(--stone-green-dark);
}

.checkpoint-screen {
  place-items: center;
  align-content: center;
}

.checkpoint-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  width: min(600px, 100%);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fffdf5;
  box-shadow: var(--hard-shadow);
}

.checkpoint-card .dia-avatar {
  width: 104px;
  aspect-ratio: 1;
  justify-self: center;
}

.checkpoint-card h2 {
  margin: 8px 0;
  color: var(--ink);
  font-size: clamp(1.6rem, 7vw, 3rem);
  line-height: 1.08;
}

.checkpoint-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.letter-slots,
.letter-bank {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.letter-slots span,
.letter-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  border-radius: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
}

.letter-slots span {
  border: 2px dashed var(--line);
  background: #fbfcfa;
  color: var(--brand-dark);
}

.letter-tile {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.word-plaque-slots {
  position: relative;
  border: var(--pixel-border);
  padding: 12px;
  background:
    linear-gradient(180deg, #fff7d8 0 48%, #e4d4ad 48% 100%);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  clip-path: var(--step-corner);
}

.word-plaque-slots::before {
  content: "缺了一块的词牌";
  position: absolute;
  left: 12px;
  top: -14px;
  border: 3px solid var(--line);
  padding: 3px 7px;
  background: #fffdf5;
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.68rem;
}

.word-plaque-slots span {
  border: 3px dashed rgba(40, 50, 59, 0.72);
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(40, 50, 59, 0.12) 46% 54%, transparent 54%),
    #fffdf5;
  box-shadow: inset 0 -5px 0 rgba(40, 50, 59, 0.08);
  clip-path: var(--step-corner);
}

.word-plaque-slots span.filled {
  border-style: solid;
  background:
    linear-gradient(180deg, #e0efe7 0 50%, #b8d9c2 50% 100%);
  color: var(--stone-green-dark);
}

.word-brick-bank {
  margin-top: 18px;
}

.word-brick-tile {
  border: 3px solid var(--line);
  border-radius: 0;
  background:
    linear-gradient(180deg, #fff9e9 0 48%, #d7b47d 48% 100%);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
  cursor: grab;
}

.word-brick-tile:active {
  cursor: grabbing;
  transform: translateY(3px);
  box-shadow: 2px 2px 0 rgba(28, 38, 31, 0.16);
}

.spell-effect-soft-wrong .word-plaque-slots {
  animation: gentleSlotNudge 420ms steps(4, end) both;
}

.spell-effect-lit .word-plaque-slots span.filled {
  animation: spellStarDust 760ms steps(5, end) both;
}

.spell-feedback {
  min-height: 28px;
}

.spell-feedback.gentle {
  color: #8a6200;
}

@keyframes gentleSlotNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes spellStarDust {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.35);
    box-shadow:
      inset 0 -5px 0 rgba(40, 50, 59, 0.08),
      0 0 0 6px rgba(230, 184, 77, 0.22);
  }
  100% {
    filter: brightness(1.08);
  }
}

.center-actions {
  justify-content: center;
  margin-top: 16px;
}

.story-quest,
.boss-stage {
  display: grid;
  gap: 18px;
}

.companion-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #f7fbf5 100%);
}

.companion-card .dia-avatar {
  width: 112px;
  border-radius: 22px;
  justify-self: center;
}

.companion-card .word-visual {
  width: min(240px, 100%);
  margin: 8px 0 10px;
}

.companion-card .visual-canvas {
  min-height: 116px;
}

.companion-card h2,
.boss-header h2 {
  margin: 8px 0;
  color: var(--brand-dark);
}

.companion-card p,
.companion-card small {
  color: var(--muted);
  line-height: 1.7;
}

.boss-board {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.boss-card {
  display: grid;
  gap: 10px;
  align-content: center;
  min-height: 220px;
  padding: 18px;
  border: 1px solid rgba(246, 196, 83, 0.8);
  border-radius: 18px;
  background: #fff9e8;
}

.boss-card span,
.boss-card small {
  color: #8a6a2c;
  font-weight: 800;
}

.boss-card strong {
  color: var(--brand-dark);
  font-size: clamp(2rem, 8vw, 3.6rem);
  overflow-wrap: anywhere;
}

.bubble-field {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(circle at top, #ffffff 0%, #edf7f0 100%);
}

.letter-bubble {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(40, 122, 88, 0.24);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 10px 18px rgba(22, 54, 39, 0.1);
  font-size: 1.3rem;
  font-weight: 900;
  text-transform: uppercase;
}

.boss-slots {
  margin-top: 0;
}

.game-title {
  margin-bottom: 16px;
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 48px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.bar-track {
  height: 12px;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.reason-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.reason-card span {
  color: var(--muted);
  font-weight: 900;
}

.reason-card strong {
  color: var(--brand-dark);
  font-size: 2rem;
  line-height: 1;
}

.reason-card i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.suggestion-box {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(40, 122, 88, 0.18);
  border-radius: 14px;
  background: #f7fbf5;
}

.suggestion-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
}

.heat-day {
  display: grid;
  place-items: center;
  min-height: 54px;
  border-radius: 10px;
  background: #eef3ee;
  color: var(--muted);
  font-weight: 900;
}

.heat-day small {
  font-size: 0.74rem;
}

.heat-day.level-1 {
  background: #dff2e8;
  color: var(--brand-dark);
}

.heat-day.level-2 {
  background: #b9e1c8;
  color: var(--brand-dark);
}

.heat-day.level-3 {
  background: #76bd8c;
  color: #fff;
}

.heat-day.level-4 {
  background: var(--brand);
  color: #fff;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-grid label {
  display: grid;
  gap: 6px;
}

.story-box {
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfa;
  padding: 14px;
  color: var(--ink);
  line-height: 1.75;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.word-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.word-check span {
  color: var(--brand-dark);
  font-weight: 900;
}

.word-check small {
  grid-column: 2;
  color: var(--muted);
}

.card-topline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 0.84rem;
}

.phonetic {
  margin: 0;
  color: var(--muted);
  font-size: 1.12rem;
}

.word {
  margin: 0;
  font-size: clamp(3.6rem, 14vw, 7.6rem);
  line-height: 0.95;
  color: var(--brand-dark);
  overflow-wrap: anywhere;
}

.meaning {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 900;
}

.meaning.hidden {
  filter: blur(8px);
  user-select: none;
}

.example {
  min-height: 30px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.card-actions,
.option-grid,
.stats-grid,
.lesson-grid {
  display: grid;
  gap: 10px;
}

.card-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
}

.option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin: 20px auto 0;
}

.option {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  color: var(--ink);
  font-weight: 900;
}

.option.correct {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.option.wrong {
  border-color: var(--warn);
  background: var(--warn-soft);
}

.center-panel {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.center-panel h2 {
  margin: 8px 0;
  font-size: clamp(2rem, 7vw, 4.8rem);
  color: var(--brand-dark);
}

.helper {
  color: var(--muted);
  line-height: 1.7;
}

.runtime-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 3px solid rgba(179, 92, 68, 0.42);
  background: #fff3cf;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.12);
  color: #6f3f18;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.5;
}

.spell-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.spell-row input {
  min-height: 54px;
  font-size: 1.25rem;
  text-align: center;
}

.feedback {
  min-height: 34px;
  margin: 14px 0 0;
  font-weight: 900;
}

.feedback.good {
  color: var(--brand);
}

.feedback.bad {
  color: var(--warn);
}

.voice-score-panel {
  width: min(640px, 100%);
  margin: 18px auto 12px;
  padding: 16px;
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
  text-align: left;
}

.voice-state-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: min(640px, 100%);
  margin: 12px auto 0;
  border: var(--pixel-border);
  padding: 8px;
  background: #fffdf5;
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.12);
  clip-path: var(--step-corner);
}

.voice-state-steps span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 3px solid rgba(40, 50, 59, 0.68);
  background: #eee7d5;
  color: rgba(40, 50, 59, 0.68);
  font-family: var(--pixel-font);
  font-size: 0.62rem;
  line-height: 1.15;
  text-align: center;
}

.voice-state-steps[data-voice-state="listening"] [data-step="listening"],
.voice-state-steps[data-voice-state="recording"] [data-step="recording"],
.voice-state-steps[data-voice-state="recording"] [data-step="meter"],
.voice-state-steps[data-voice-state="complete"] [data-step="complete"],
.voice-state-steps[data-voice-state="retry"] [data-step="meter"],
.voice-state-steps[data-voice-state="fallback"] [data-step="meter"],
.voice-state-steps[data-voice-state="unavailable"] [data-step="unavailable"] {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(40, 50, 59, 0.16);
}

.voice-score-panel[data-state="listening"] {
  border-color: var(--gold);
  background:
    repeating-linear-gradient(90deg, rgba(230, 184, 77, 0.12) 0 14px, transparent 14px 28px),
    #fff9e9;
}

.voice-score-panel[data-state="recording"] {
  border-color: var(--stone-green);
  background:
    linear-gradient(rgba(47, 122, 98, 0.08) 2px, transparent 2px) 0 0 / 18px 18px,
    #f5fbf5;
}

.voice-score-panel[data-state="complete"] {
  border-color: var(--gold);
  box-shadow:
    var(--block-shadow),
    0 0 0 8px rgba(230, 184, 77, 0.16);
}

.voice-score-panel[data-state="retry"],
.voice-score-panel[data-state="fallback"],
.voice-score-panel[data-state="unavailable"] {
  border-color: #d7a247;
  background:
    repeating-linear-gradient(135deg, rgba(230, 184, 77, 0.13) 0 12px, transparent 12px 24px),
    #fff7d8;
}

.voice-score-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  font-weight: 950;
}

.voice-score-top span {
  color: var(--brand-dark);
}

.voice-score-top strong {
  font-family: var(--pixel-font);
  color: var(--stone-green);
  white-space: nowrap;
}

.voice-meter {
  height: 18px;
  margin: 12px 0;
  border: 3px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(40, 50, 59, 0.08) 0 10px, transparent 10px 16px),
    #fffdf3;
  overflow: hidden;
}

.voice-meter span {
  display: block;
  width: 4%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 16px),
    var(--brand);
  transition: width 120ms steps(6, end);
}

.voice-score-panel[data-state="recording"] .voice-meter span {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 8px, transparent 8px 16px),
    var(--stone-green);
}

.voice-score-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 800;
}

.mixed-voice-detect[data-state="recording"] {
  box-shadow:
    var(--block-shadow),
    0 0 0 8px rgba(47, 122, 98, 0.12);
}

#practiceVoiceStart:disabled,
#practiceVoiceComplete:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

#practiceVoiceComplete.speech-fallback:not(:disabled) {
  box-shadow:
    var(--block-shadow),
    0 0 0 7px rgba(230, 184, 77, 0.18);
}

.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}

.match-column {
  display: grid;
  gap: 10px;
}

.match-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-height: 52px;
  padding: 10px;
  color: var(--ink);
  font-weight: 900;
}

.match-item.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.24);
}

.match-item.done {
  border-color: var(--brand);
  background: var(--brand-soft);
  opacity: 0.7;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.stat strong {
  display: block;
  font-size: 2rem;
  color: var(--brand-dark);
}

.stat span {
  color: var(--muted);
  font-weight: 800;
}

.lesson-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 16px;
}

.lesson-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-height: 48px;
  padding: 10px;
  color: var(--ink);
  font-weight: 800;
}

.lesson-chip.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.parent-tools {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.tool-block {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.agent-output {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafcf9;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 140px;
  line-height: 1.6;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mini-list span {
  border-radius: 999px;
  background: #eef3ee;
  padding: 7px 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.88rem;
}

.preview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(40, 122, 88, 0.22);
  border-radius: 12px;
  padding: 0 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 900;
  text-decoration: none;
}

.quest-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.quest-strip p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.quest-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.highlight-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(246, 196, 83, 0.7);
  border-radius: 16px;
  background: #fffaf0;
}

.highlight-shelf p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.highlight-row,
.card-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.highlight-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  min-width: 128px;
  padding: 13px;
  border: 1px solid rgba(246, 196, 83, 0.8);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(246, 196, 83, 0.22), transparent 55%),
    #fff;
  color: var(--ink);
}

.expression-mark-card {
  border: var(--pixel-border);
  border-color: var(--gold);
  border-radius: 0;
  background:
    radial-gradient(circle at top right, rgba(230, 184, 77, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(179, 72, 52, 0.12) 25%, transparent 25%) 0 0 / 24px 24px,
    #fff7d8;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.18);
  clip-path: var(--step-corner);
}

.big-card.expression-mark-card {
  border-width: 5px;
  box-shadow:
    8px 8px 0 rgba(28, 38, 31, 0.2),
    0 0 0 8px rgba(230, 184, 77, 0.16);
}

.card-art {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 230px;
  border: 1px solid rgba(246, 196, 83, 0.7);
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 14%, rgba(246, 196, 83, 0.35), transparent 28%),
    linear-gradient(135deg, #fffdf5, #eef8f1);
}

.expression-mark-card .card-art,
.expression-mark-card .mini-card-art {
  border: 4px solid var(--line);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 246, 217, 0.82) 0 48%, rgba(230, 184, 77, 0.34) 48% 100%),
    #fffdf5;
  clip-path: var(--step-corner);
}

.card-art .dia-avatar {
  width: min(190px, 62%);
  border-radius: 32px;
  transform: translateY(-8px);
}

.card-word-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid rgba(246, 196, 83, 0.85);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 20px rgba(22, 54, 39, 0.1);
}

.card-word-badge span {
  color: #8a6a2c;
  font-size: 0.78rem;
}

.card-word-badge strong {
  color: var(--brand-dark);
  font-size: 1.5rem;
}

.card-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-sparkles i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(246, 196, 83, 0.16);
}

.card-sparkles i:nth-child(1) {
  left: 18px;
  top: 24px;
}

.card-sparkles i:nth-child(2) {
  right: 26px;
  top: 36px;
}

.card-sparkles i:nth-child(3) {
  left: 42px;
  bottom: 34px;
}

.mini-card-art {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  height: 72px;
  border-radius: 12px;
  background: #fff9e8;
}

.mini-card-art .dia-avatar {
  width: 60px;
  border-radius: 16px;
  opacity: 0.95;
}

.mini-card-art b {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
}

.mark-card-label {
  display: inline-grid;
  place-items: center;
  width: max-content;
  border: 3px solid var(--line);
  padding: 3px 6px;
  background: var(--cinnabar);
  color: #fffdf5;
  font-family: var(--pixel-font);
  font-size: 0.58rem;
}

.report-mark-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(720px, 100%);
  margin: 12px auto 0;
}

.boss-win-banner {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 4px solid var(--ink);
  padding: 10px 12px;
  background:
    linear-gradient(180deg, #fff7d8 0 52%, var(--gold) 52% 100%);
  color: var(--ink);
  font-family: var(--pixel-font);
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.22),
    0 0 0 8px rgba(230, 184, 77, 0.12);
  clip-path: var(--step-corner);
}

.boss-win-banner span {
  font-size: 0.72rem;
  font-weight: 900;
}

.boss-mark-feedback.good {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, #fff7d8 0 52%, rgba(230, 184, 77, 0.32) 52% 100%);
  color: var(--ink);
}

.highlight-card span,
.highlight-card small,
.empty-card {
  color: #8a6a2c;
  font-weight: 800;
}

.highlight-card strong {
  color: var(--brand-dark);
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.big-card {
  width: min(520px, 100%);
  margin: 0 auto;
  text-align: center;
}

.big-card h3 {
  margin: 4px 0;
  color: var(--brand-dark);
  font-size: clamp(1.8rem, 7vw, 3rem);
}

.big-card button {
  justify-self: center;
  margin-top: 6px;
}

.mission-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.35;
}

/* Acatera word-house scene */
.hero,
.toolbar,
.mode-tabs,
.study-area,
.map-status,
.unit-header,
.unit-path,
.unit-node,
.step-block,
.unit-word-wall,
.word-brick,
.swipe-card,
.choice-option,
.companion-card,
.boss-card,
.bubble-field,
.highlight-card,
.daily-report,
.tool-block,
.quest-strip {
  border-radius: 8px;
}

.hero,
.toolbar,
.mode-tabs,
.study-area {
  border: 2px solid var(--line);
  background: rgba(255, 253, 245, 0.94);
  box-shadow: var(--hard-shadow);
}

.hero {
  background:
    linear-gradient(90deg, rgba(246, 244, 236, 0.95), rgba(255, 253, 245, 0.95)),
    var(--paper);
}

.eyebrow,
.pixel-label,
.unit-cube,
.map-score strong,
.unit-energy strong,
.course-top span,
.swipe-card h2,
.word,
.word-brick strong,
.brick-progress,
.step-progress,
.build-tokens span {
  font-family: var(--pixel-font);
  letter-spacing: 0;
}

.eyebrow {
  color: var(--brick);
}

h1,
.map-status h2,
.unit-header h2,
.task-hero h2,
.center-panel h2,
.build-copy h3 {
  color: var(--ink);
}

.hero-tags span,
.pill,
.preset-badge {
  border-radius: 6px;
  border: 2px solid rgba(44, 150, 120, 0.22);
  background: #fffdf5;
  color: var(--brand-dark);
}

.tab,
.ghost-button,
.secondary,
.primary,
.danger,
.icon-button,
.bottom-cta,
.choice-option,
.step-block,
.unit-node,
.mission-card,
.letter-tile,
.letter-bubble,
.match-item,
.option,
.preview-link {
  border-radius: 8px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14);
  transform: translateY(0);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.14s ease;
}

.tab:active,
.ghost-button:active,
.secondary:active,
.primary:active,
.danger:active,
.icon-button:active,
.bottom-cta:active,
.choice-option:active,
.step-block:active,
.unit-node:active,
.mission-card:active,
.letter-tile:active,
.letter-bubble:active,
.match-item:active,
.option:active,
.preview-link:active {
  transform: translateY(4px);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.primary,
.bottom-cta,
.tab.active {
  background: var(--stone-green);
  color: #fffdf5;
}

.primary,
.bottom-cta {
  box-shadow: inset 0 -5px 0 var(--stone-green-dark);
}

.secondary,
.ghost-button {
  border: 2px solid var(--line);
  background: #fffdf5;
  color: var(--brand-dark);
}

.danger {
  border: 2px solid rgba(179, 92, 68, 0.34);
  background: var(--practice-soft);
  color: var(--brick-dark);
}

.app-map,
.unit-world {
  gap: 16px;
}

.build-status {
  background:
    linear-gradient(135deg, rgba(224, 239, 231, 0.85), rgba(255, 253, 245, 0.92)),
    var(--panel);
  border: 2px solid rgba(44, 150, 120, 0.24);
}

.map-score,
.unit-energy {
  border-radius: 8px;
  border: 0;
  background: var(--brand);
  box-shadow: 6px 6px 0 rgba(44, 150, 120, 0.22);
}

.build-scene {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 310px;
  padding: 24px;
  border: 2px solid rgba(179, 92, 68, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 253, 245, 0.86), rgba(246, 244, 236, 0.96)),
    var(--paper);
  box-shadow: var(--hard-shadow);
}

.scroll-mountains {
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  opacity: 0.38;
  pointer-events: none;
}

.scroll-mountains i {
  position: absolute;
  bottom: 0;
  width: 48%;
  height: 72%;
  background: linear-gradient(135deg, transparent 49%, rgba(44, 150, 120, 0.24) 50%);
  clip-path: polygon(0 100%, 52% 22%, 100% 100%);
}

.scroll-mountains i:nth-child(1) {
  left: -8%;
}

.scroll-mountains i:nth-child(2) {
  left: 28%;
  height: 86%;
  background: linear-gradient(135deg, transparent 49%, rgba(58, 68, 102, 0.17) 50%);
}

.scroll-mountains i:nth-child(3) {
  right: -12%;
}

.pagoda-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.pagoda {
  display: grid;
  justify-items: center;
  align-items: end;
  width: min(220px, 82vw);
  filter: drop-shadow(8px 8px 0 rgba(134, 38, 23, 0.12));
}

.pagoda-roof,
.pagoda-floor,
.pagoda-base {
  display: block;
  image-rendering: pixelated;
}

.pagoda-roof {
  height: 22px;
  background: var(--brick-dark);
  clip-path: polygon(8% 100%, 23% 0, 77% 0, 92% 100%);
}

.roof-top {
  width: 98px;
}

.roof-mid {
  width: 150px;
  margin-top: 4px;
}

.roof-low {
  width: 192px;
  margin-top: 4px;
}

.pagoda-floor {
  width: 104px;
  height: 42px;
  border: 4px solid var(--brick);
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, rgba(179, 92, 68, 0.18) 0 12px, transparent 12px 24px),
    #fffdf5;
}

.floor-2 {
  width: 140px;
  height: 48px;
}

.floor-1 {
  width: 174px;
  height: 54px;
}

.pagoda-base {
  width: 210px;
  height: 18px;
  background: var(--brick);
}

.brick-progress {
  display: grid;
  grid-template-columns: repeat(12, 16px);
  gap: 4px;
  padding: 8px;
  border: 2px solid rgba(179, 92, 68, 0.32);
  background: rgba(255, 253, 245, 0.8);
}

.brick-progress i {
  width: 16px;
  height: 10px;
  background: #ded6c7;
}

.brick-progress i.built {
  background: var(--brick);
  box-shadow: inset 0 -2px 0 var(--brick-dark);
}

.brick-progress i.weathered {
  background: #9fb9a8;
  box-shadow: inset 0 -2px 0 #6f8175;
}

.arcadia-map-scene {
  grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 82%, rgba(94, 154, 143, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(248, 244, 232, 0.86), rgba(241, 236, 221, 0.96)),
    var(--paper);
}

.map-stage-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 260px;
}

.starlit-gate {
  position: relative;
  width: 178px;
  height: 116px;
  filter: drop-shadow(8px 8px 0 rgba(40, 50, 59, 0.12));
}

.starlit-gate span {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.gate-top {
  left: 10px;
  top: 0;
  width: 158px;
  height: 28px;
  background:
    linear-gradient(90deg, transparent 0 8px, var(--purple) 8px calc(100% - 8px), transparent calc(100% - 8px)),
    var(--purple);
  box-shadow: inset 0 -6px 0 #4d4265;
  clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%);
}

.gate-left,
.gate-right {
  top: 26px;
  width: 28px;
  height: 90px;
  background:
    repeating-linear-gradient(180deg, #f8f4e8 0 14px, #e4dac5 14px 20px),
    #f8f4e8;
  box-shadow: 0 0 0 4px var(--ink), inset -6px 0 0 #d7cdb8;
}

.gate-left {
  left: 28px;
}

.gate-right {
  right: 28px;
}

.gate-plaque {
  left: 66px;
  top: 32px;
  width: 46px;
  height: 38px;
  display: grid !important;
  place-items: center;
  background: var(--cinnabar);
  color: #fffdf5;
  box-shadow: 0 0 0 4px var(--ink);
  font-family: var(--pixel-font);
  font-weight: 950;
}

.pixel-plaza {
  position: relative;
  display: grid;
  place-items: center;
  width: min(260px, 82vw);
  height: 128px;
  border: 4px solid rgba(94, 154, 143, 0.28);
  background:
    repeating-linear-gradient(135deg, rgba(127, 179, 169, 0.32) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, rgba(40, 50, 59, 0.08) 0 1px, transparent 1px 32px),
    #dfece7;
  box-shadow: inset 0 -8px 0 rgba(67, 112, 102, 0.22);
}

.pixel-plaza .dia-avatar {
  width: 96px;
  z-index: 2;
}

.ripple {
  position: absolute;
  width: 20px;
  height: 8px;
  border: 3px solid rgba(94, 154, 143, 0.45);
  border-left: 0;
  border-right: 0;
  animation: ripple-steps 2.4s steps(3, end) infinite;
}

.ripple-1 { left: 14%; top: 22%; }
.ripple-2 { left: 32%; top: 70%; animation-delay: 0.2s; }
.ripple-3 { right: 18%; top: 34%; animation-delay: 0.4s; }
.ripple-4 { right: 28%; bottom: 18%; animation-delay: 0.6s; }
.ripple-5 { left: 8%; bottom: 14%; animation-delay: 0.8s; }
.ripple-6 { right: 8%; top: 64%; animation-delay: 1s; }
.ripple-7 { left: 44%; top: 16%; animation-delay: 1.2s; }
.ripple-8 { left: 24%; top: 42%; animation-delay: 1.4s; }
.ripple-9 { right: 42%; bottom: 30%; animation-delay: 1.6s; }

@keyframes ripple-steps {
  0%,
  100% {
    opacity: 0.36;
    transform: translateX(0);
  }
  50% {
    opacity: 0.9;
    transform: translateX(8px);
  }
}

.step-progress {
  display: grid;
  grid-template-columns: repeat(12, 16px);
  gap: 6px;
  padding: 8px;
  border: 2px solid rgba(94, 154, 143, 0.34);
  background: rgba(248, 244, 232, 0.82);
}

.step-progress i {
  width: 16px;
  height: 12px;
  background: #d8d0c0;
  box-shadow: inset 0 -3px 0 #c4baa7;
}

.step-progress i.lit {
  background: var(--brand);
  box-shadow: inset 0 -3px 0 var(--brand-dark);
}

.step-progress i.mossy {
  background: #9fb9a8;
  box-shadow: inset 0 -3px 0 #6f8175;
}

.build-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.build-copy h3 {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 3.6rem);
  line-height: 1.05;
}

.build-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.build-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.build-tokens span {
  min-height: 34px;
  border: 2px solid rgba(242, 190, 69, 0.7);
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff7d8;
  color: #7a5300;
  font-weight: 950;
}

.unit-path {
  background:
    linear-gradient(45deg, rgba(179, 92, 68, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(44, 150, 120, 0.06) 25%, transparent 25%),
    #fffdf5;
  background-size: 32px 32px;
  border: 2px solid rgba(179, 92, 68, 0.22);
}

.unit-path::before {
  width: 6px;
  border-radius: 0;
  background: repeating-linear-gradient(180deg, var(--brick) 0 16px, var(--brick-dark) 16px 20px);
}

.unit-node {
  border: 2px solid rgba(179, 92, 68, 0.2);
  background: #fffdf5;
  box-shadow: 6px 6px 0 rgba(134, 38, 23, 0.12);
}

.unit-node.recommended {
  outline: 4px solid rgba(242, 190, 69, 0.72);
}

.unit-cube {
  border-radius: 6px;
  border: 3px solid rgba(134, 38, 23, 0.2);
  background:
    linear-gradient(135deg, #d08964 0 50%, var(--brick) 50% 100%);
  box-shadow: inset -8px -8px 0 rgba(134, 38, 23, 0.18);
}

.unit-copy strong,
.step-block strong,
.boss-card strong,
.highlight-card strong {
  color: var(--brick-dark);
}

.unit-copy i,
.course-progress,
.progress-track,
.bar-track {
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, #e7dfd0 0 18px, #d9cfbe 18px 20px);
}

.unit-copy i b,
.course-progress i,
.progress-track span,
.bar-track i {
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, var(--brick) 0 18px, var(--brick-dark) 18px 20px);
}

.course-progress {
  height: 16px;
  border: 2px solid #e3dccf;
}

.step-block {
  border: 2px solid var(--line);
  background: #fffdf5;
  box-shadow: 5px 5px 0 rgba(134, 38, 23, 0.1);
}

.active-step {
  border-color: rgba(44, 150, 120, 0.42);
  background: #f0f8f4;
}

.boss-step {
  border-color: rgba(242, 190, 69, 0.9);
  background: #fff7d8;
}

.step-block span {
  border-radius: 4px;
  background: var(--brick);
  color: #fffdf5;
}

.unit-word-wall {
  border: 2px solid rgba(179, 92, 68, 0.18);
  background:
    repeating-linear-gradient(0deg, rgba(179, 92, 68, 0.06) 0 24px, transparent 24px 48px),
    #fffdf5;
}

.word-brick {
  border: 2px solid rgba(179, 92, 68, 0.18);
  background: #fbf0e8;
  box-shadow: 4px 4px 0 rgba(134, 38, 23, 0.1);
}

.word-brick.lit {
  border-color: rgba(44, 150, 120, 0.35);
  background: #e0efe7;
}

.word-brick.needs-work {
  border-color: rgba(242, 190, 69, 0.9);
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(58, 68, 102, 0.2) 46% 50%, transparent 50%),
    #fff7d8;
}

.word-visual,
.word-art-image,
.visual-canvas svg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.visual-canvas {
  border: 2px solid rgba(44, 150, 120, 0.18);
  border-radius: 8px;
  background: #fffdf5;
}

.lesson-screen {
  background:
    linear-gradient(rgba(117, 120, 123, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 120, 123, 0.02) 1px, transparent 1px),
    var(--paper);
  background-size: 8px 8px;
}

.speech-bubble,
.meaning-art-card,
.swipe-card,
.companion-card,
.boss-card,
.bubble-field,
.highlight-card,
.daily-report {
  border: 2px solid var(--line);
  background: #fffdf5;
  box-shadow: var(--shadow);
}

.speech-bubble::after {
  border-color: var(--line);
  background: #fffdf5;
}

.swipe-coach {
  border: 2px solid rgba(242, 190, 69, 0.7);
  border-radius: 8px;
  background: #fff7d8;
}

.known-zone {
  border-color: rgba(44, 150, 120, 0.42);
  background: #e0efe7;
}

.practice-zone {
  border-color: rgba(179, 92, 68, 0.52);
  background: #fbebdf;
}

.known-overlay {
  background: var(--brand);
}

.practice-overlay {
  background: var(--brick);
}

.choice-option {
  border: 2px solid var(--line);
  background: #fffdf5;
}

.choice-option.correct {
  border-color: var(--brand);
  background: #e0efe7;
  color: #0b6a4a;
}

.choice-option.wrong {
  border-color: var(--cinnabar);
  background: #fff0e8;
  color: var(--brick-dark);
}

.letter-slots span,
.letter-tile,
.letter-bubble {
  border-radius: 6px;
}

.letter-tile,
.letter-bubble {
  border: 2px solid rgba(179, 92, 68, 0.2);
  background: #fffdf5;
  color: var(--brick-dark);
}

.card-art,
.mini-card-art {
  border-radius: 8px;
  border: 2px solid rgba(242, 190, 69, 0.78);
  background:
    radial-gradient(circle at 22% 14%, rgba(242, 190, 69, 0.25), transparent 28%),
    linear-gradient(135deg, #fffdf5, #e0efe7);
}

.card-word-badge {
  border-radius: 6px;
  border: 2px solid rgba(195, 39, 43, 0.36);
}

.card-word-badge::before {
  content: "印";
  position: absolute;
  right: -10px;
  top: -12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid var(--cinnabar);
  color: var(--cinnabar);
  background: rgba(255, 253, 245, 0.92);
  font-family: var(--pixel-font);
  font-weight: 950;
  transform: rotate(10deg);
}

.coin-pill,
.coconut.won {
  border-radius: 6px;
  background: #fff7d8;
  color: #7a5300;
}

.highlight-shelf {
  border: 2px solid rgba(242, 190, 69, 0.75);
  border-radius: 8px;
  background: #fff7d8;
}

/* Diaochan pixel-world skin */
body {
  background:
    linear-gradient(45deg, rgba(47, 122, 98, 0.08) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(45deg, transparent 75%, rgba(179, 72, 52, 0.08) 75%) 0 0 / 24px 24px,
    linear-gradient(rgba(28, 38, 31, 0.035) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--paper);
}

.app-shell {
  max-width: 1184px;
}

.hero,
.home-compact,
.map-status,
.unit-header,
.build-scene,
.unit-path,
.unit-node,
.step-block,
.unit-word-wall,
.word-brick,
.lesson-screen,
.swipe-card,
.meaning-art-card,
.companion-card,
.boss-card,
.bubble-field,
.checkpoint-card,
.completion-hero,
.completion-grid article,
.daily-report,
.report-grid article,
.tool-block,
.quest-strip,
.highlight-shelf,
.highlight-card,
.story-box,
.suggestion-box,
.stat,
.mission-card,
.choice-option,
.letter-tile,
.letter-bubble {
  border-radius: 0;
  clip-path: var(--step-corner);
}

.hero,
.home-compact,
.map-status,
.unit-header,
.build-scene,
.daily-report,
.completion-hero {
  border: var(--pixel-border);
  box-shadow: var(--block-shadow);
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 249, 233, 0.96), rgba(255, 249, 233, 0.9)),
    var(--panel);
}

.hero::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -12px;
  width: 168px;
  height: 88px;
  background:
    linear-gradient(135deg, transparent 49%, rgba(94, 154, 143, 0.25) 50%),
    linear-gradient(45deg, transparent 58%, rgba(179, 92, 68, 0.16) 59%);
  clip-path: polygon(0 100%, 38% 8%, 68% 100%);
  image-rendering: pixelated;
  pointer-events: none;
}

.eyebrow,
.pixel-label,
.pill,
.preset-badge,
.preload-status,
.coin-pill,
.coconut,
.mini-list span,
.build-tokens span {
  border-radius: 0;
  clip-path: var(--step-corner);
}

.pill,
.pixel-label,
.preset-badge,
.preload-status {
  border: var(--pixel-border-soft);
  background: #dcefd8;
  color: var(--brand-dark);
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
}

.hero-status,
.map-score,
.unit-energy,
.unit-cube,
.step-block span,
.mini-card-art b {
  border-radius: 0;
  clip-path: var(--step-corner);
  border: var(--pixel-border);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.18);
}

.hero-status {
  background:
    linear-gradient(180deg, #fff7d8 0 42%, var(--gold) 42% 100%);
  color: var(--ink);
}

.pixel-plaza .dia-avatar,
.pixel-plaza .hero-dia,
.pixel-plaza .duo-stage .dia-avatar,
.pixel-plaza .meaning-prompt .dia-avatar,
.pixel-plaza .companion-card .dia-avatar,
.pixel-plaza .completion-hero .dia-avatar,
.pixel-plaza .task-hero-art .dia-avatar,
.pixel-plaza .card-art .dia-avatar,
.pixel-plaza .mini-card-art .dia-avatar {
  border: 4px solid var(--ink);
  border-radius: 0;
  clip-path: var(--step-corner);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  background-color: #fff7d8;
}

.companion-bubble,
.speech-bubble {
  border: 4px solid var(--ink);
  border-radius: 0;
  clip-path: var(--step-corner);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  background: var(--panel);
}

.speech-bubble::after {
  display: none;
}

.primary,
.secondary,
.ghost-button,
.danger,
.icon-button,
.bottom-cta,
.tab,
.choice-option,
.step-block,
.unit-node,
.mission-card,
.letter-tile,
.letter-bubble,
.match-item,
.option,
.preview-link {
  border: 4px solid var(--ink);
  border-radius: 0;
  clip-path: var(--step-corner);
  box-shadow: 0 var(--button-depth) 0 rgba(28, 38, 31, 0.86);
}

.primary,
.bottom-cta,
.tab.active {
  background:
    linear-gradient(180deg, #82bc86 0 50%, var(--stone-green) 50% 100%);
  color: #fffdf5;
  box-shadow: 0 var(--button-depth) 0 var(--stone-green-dark);
}

.secondary,
.ghost-button,
.icon-button {
  background:
    linear-gradient(180deg, #fff9e9 0 58%, #e8dcc7 58% 100%);
  color: var(--ink);
}

.danger {
  background:
    linear-gradient(180deg, #fff0e8 0 58%, #e8c6b8 58% 100%);
}

.primary:active,
.secondary:active,
.ghost-button:active,
.danger:active,
.icon-button:active,
.bottom-cta:active,
.tab:active,
.choice-option:active,
.step-block:active,
.unit-node:active,
.mission-card:active,
.letter-tile:active,
.letter-bubble:active,
.match-item:active,
.option:active,
.preview-link:active {
  transform: translateY(var(--button-depth));
  box-shadow: 0 0 0 rgba(40, 50, 59, 0);
}

select,
input,
textarea {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: #fffdf5;
  box-shadow: 4px 4px 0 rgba(40, 50, 59, 0.1);
}

.home-compact {
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.2fr);
  align-items: stretch;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(255, 249, 233, 0.96), rgba(220, 239, 216, 0.76)),
    var(--panel);
}

.home-mission-card {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.unit-stage-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.stage-chip {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 7px 4px;
  border: 3px solid var(--line);
  background:
    linear-gradient(180deg, #fff9e9 0 56%, #e7dac2 56% 100%);
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.72rem;
  font-weight: 950;
  clip-path: var(--step-corner);
}

.stage-chip i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  background: var(--brand);
  color: #fffdf5;
  font-style: normal;
}

.stage-spell i,
.stage-game i {
  background: var(--brick);
}

.stage-report i {
  background: var(--gold);
  color: var(--ink);
}

.scene-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scene-ribbon span {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border: 3px solid var(--line);
  padding: 4px 8px;
  background:
    linear-gradient(180deg, #fff9e9 0 58%, #e7dac2 58% 100%);
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.72rem;
  font-weight: 950;
  clip-path: var(--step-corner);
}

.home-scene-line {
  margin-top: 2px;
}

.unit-scene-line {
  margin-top: 10px;
}

.unit-scene-line span:nth-child(3),
.unit-scene-line span:nth-child(5) {
  background:
    linear-gradient(180deg, #fff7d8 0 58%, rgba(224, 169, 59, 0.56) 58% 100%);
}

.lesson-scene-label {
  justify-self: center;
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  border: var(--pixel-border);
  padding: 5px 10px;
  background:
    linear-gradient(180deg, #fff9e9 0 58%, #dcefd8 58% 100%);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.14);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 0.78rem;
  font-weight: 950;
  text-align: center;
  clip-path: var(--step-corner);
}

.home-map-preview {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(45, 61, 52, 0.055) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(45, 61, 52, 0.045) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(135deg, rgba(47, 122, 98, 0.18), rgba(255, 247, 216, 0.62)),
    var(--panel);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.home-map-preview::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(179, 92, 68, 0.7) 0 18px, rgba(134, 38, 23, 0.7) 18px 22px);
  transform: rotate(-8deg);
  opacity: 0.28;
  pointer-events: none;
}

.home-map-hud {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-family: var(--pixel-font);
}

.home-map-hud span,
.home-map-hud strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 3px solid var(--line);
  background: var(--panel);
  padding: 0 8px;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
}

.home-map-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rpg-opening-panel {
  position: relative;
  overflow: hidden;
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 2px, transparent 2px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 2px, transparent 2px) 0 0 / 28px 28px,
    #b9b2ef;
  box-shadow: var(--block-shadow);
  min-height: 420px;
  clip-path: var(--step-corner);
}

.rpg-opening-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 116px;
  background:
    linear-gradient(180deg, rgba(116, 84, 62, 0), rgba(116, 84, 62, 0.18)),
    repeating-linear-gradient(90deg, rgba(83, 64, 47, 0.2) 0 18px, rgba(255, 255, 255, 0.08) 18px 26px);
  pointer-events: none;
}

.rpg-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rpg-sun,
.rpg-pixel-cloud {
  position: absolute;
  display: block;
}

.rpg-sun {
  top: 34px;
  right: 38px;
  width: 42px;
  aspect-ratio: 1;
  border: 6px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0.9;
}

.rpg-pixel-cloud {
  width: 92px;
  height: 30px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow:
    24px -12px 0 rgba(255, 255, 255, 0.3),
    52px 0 0 rgba(255, 255, 255, 0.26);
}

.rpg-pixel-cloud.cloud-one {
  top: 56px;
  left: 9%;
}

.rpg-pixel-cloud.cloud-two {
  top: 120px;
  right: 16%;
  transform: scale(0.72);
}

.rpg-scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(300px, 1.08fr);
  gap: 18px;
  align-items: end;
  min-height: 420px;
  padding: 34px;
}

.rpg-skip {
  position: absolute;
  z-index: 6;
  top: 18px;
  right: 18px;
  min-height: 34px;
  border: 3px solid rgba(28, 38, 31, 0.6);
  background: rgba(255, 249, 233, 0.78);
  color: #17344f;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 900;
}

.rpg-copy {
  display: grid;
  align-content: start;
  gap: 14px;
  max-width: 520px;
}

.rpg-copy h2 {
  margin: 0;
  max-width: 12em;
  color: #17344f;
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: 1.05;
}

.rpg-chapter-beat {
  display: inline-grid;
  justify-self: start;
  min-height: 32px;
  align-items: center;
  border: 3px solid rgba(28, 38, 31, 0.8);
  background: rgba(255, 244, 184, 0.94);
  padding: 2px 10px;
  color: #4a3311;
  font-family: var(--pixel-font);
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
}

.rpg-dialogue {
  display: grid;
  gap: 10px;
}

.rpg-dialogue p {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  border: 3px solid rgba(28, 38, 31, 0.82);
  background: rgba(255, 249, 233, 0.94);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.16);
  padding: 10px;
  color: var(--ink);
  animation: dialoguePop 240ms ease-out both;
}

.rpg-dialogue b {
  display: grid;
  place-items: center;
  min-height: 30px;
  background: #244e7a;
  color: #fffdf5;
  font-size: 0.88rem;
}

.rpg-dialogue span {
  font-weight: 850;
  line-height: 1.5;
}

.rpg-progress {
  display: flex;
  gap: 7px;
  align-items: center;
}

.rpg-progress i {
  display: block;
  width: 22px;
  height: 10px;
  border: 2px solid rgba(28, 38, 31, 0.8);
  background: rgba(255, 249, 233, 0.58);
}

.rpg-progress i.active {
  background: #ffcf54;
}

.rpg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.rpg-start,
.rpg-next {
  justify-self: start;
  min-width: min(100%, 220px);
}

.rpg-car {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
  height: 270px;
  align-self: end;
}

.rpg-car-roof {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 8px;
  height: 46px;
  border: 10px solid rgba(235, 244, 255, 0.62);
  border-bottom: 0;
}

.rpg-windshield {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 54px;
  height: 126px;
  border: 8px solid #fffdf5;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 42%),
    #50607f;
  box-shadow: inset 0 -10px 0 rgba(28, 38, 31, 0.18);
}

.rpg-car::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 168px;
  border: 6px solid #43215f;
  border-radius: 18px 18px 8px 8px;
  background:
    linear-gradient(180deg, #ff5b55 0 36%, #5b267b 36% 100%);
  box-shadow: 12px 12px 0 rgba(28, 38, 31, 0.16);
}

.rpg-car-front {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  gap: 20px;
  align-items: center;
  height: 72px;
  border: 6px solid #141b31;
  background: #171d32;
  padding: 12px 18px;
}

.rpg-car-front span {
  display: block;
  height: 38px;
  border: 4px solid rgba(255, 255, 255, 0.8);
  background: #fffef1;
}

.rpg-car-front i {
  display: block;
  height: 34px;
  background: #111629;
}

.rpg-girl {
  position: absolute;
  left: 16%;
  bottom: -6px;
  width: 92px;
  height: 104px;
  animation: characterIdle 2.8s ease-in-out infinite;
}

.rpg-girl::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 4px;
  width: 42px;
  height: 42px;
  border-radius: 14px 14px 10px 10px;
  background: #ffd5c3;
  box-shadow:
    -10px -8px 0 #3c2a22,
    10px -8px 0 #3c2a22;
}

.rpg-girl::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 70px;
  height: 58px;
  border-radius: 14px 14px 0 0;
  background: #58c6dc;
}

.rpg-girl span {
  position: absolute;
  z-index: 2;
  left: 40px;
  top: 20px;
  width: 8px;
  height: 8px;
  background: #273042;
  box-shadow: 18px 0 0 #273042;
}

.rpg-dia-mini {
  position: absolute;
  right: 14%;
  bottom: -2px;
  width: 104px;
  animation: diaFloat 2.4s ease-in-out infinite;
}

.rpg-dia-mini .dia-avatar {
  width: 96px;
}

.rpg-book {
  position: absolute;
  left: 40%;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, 14px);
  gap: 4px;
  transform: rotate(-4deg);
}

.rpg-book i {
  display: block;
  height: 48px;
  border: 3px solid rgba(28, 38, 31, 0.8);
  background: rgba(255, 238, 156, 0.82);
  box-shadow: 0 -14px 0 rgba(255, 255, 255, 0.2) inset;
  animation: bookGlow 1.8s ease-in-out infinite;
}

.rpg-route-stars {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.rpg-route-stars em {
  display: grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(23, 29, 50, 0.52);
  color: rgba(255, 255, 255, 0.68);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 950;
}

.rpg-route-stars em.lit {
  border-color: #fff7c9;
  background: #ffcf54;
  color: #4a3311;
  box-shadow: 0 0 16px rgba(255, 207, 84, 0.7);
}

.opening-mood-magic .rpg-book i,
.opening-mood-ready .rpg-book i {
  animation-duration: 0.95s;
}

.opening-mood-ready .rpg-car {
  animation: carReady 1.5s ease-in-out infinite;
}

@keyframes dialoguePop {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes characterIdle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes diaFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

@keyframes bookGlow {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 207, 84, 0.65);
  }
}

@keyframes carReady {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 760px) {
  .rpg-opening-panel {
    min-height: auto;
  }

  .rpg-scene {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 54px 18px 18px;
  }

  .rpg-copy h2 {
    max-width: 100%;
    font-size: 1.75rem;
  }

  .rpg-dialogue p {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 8px;
  }

  .rpg-dialogue b {
    font-size: 0.78rem;
  }

  .rpg-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rpg-actions .primary,
  .rpg-actions .secondary {
    width: 100%;
  }

  .rpg-car {
    width: min(340px, 100%);
    height: 230px;
  }

  .rpg-car-front {
    grid-template-columns: 52px 1fr 52px;
    gap: 12px;
  }
}

.rpg-opening-panel {
  min-height: min(620px, calc(100svh - 112px));
  background: #101512;
  color: #fffdf5;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rpg-opening-panel::after {
  display: none;
}

.rpg-entry-screen,
.rpg-story-stage {
  position: relative;
  z-index: 1;
  min-height: min(620px, calc(100svh - 112px));
  max-width: 100%;
  overflow: hidden;
}

.rpg-entry-screen {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 56px 20px 28px;
  background:
    radial-gradient(circle at 50% 52%, rgba(226, 168, 69, 0.2), transparent 34%),
    radial-gradient(circle at 42% 52%, rgba(255, 238, 169, 0.16), transparent 22%),
    linear-gradient(180deg, #020403 0%, #0e1110 56%, #17100b 100%);
}

.rpg-entry-still {
  position: relative;
  width: min(560px, 82vw);
  height: min(250px, 38svh);
  filter: drop-shadow(14px 18px 0 rgba(0, 0, 0, 0.4));
}

.rpg-entry-book {
  position: absolute;
  left: 8%;
  right: 4%;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  transform: perspective(600px) rotateX(58deg) rotateZ(-4deg);
  transform-origin: bottom;
}

.rpg-entry-book i {
  display: block;
  height: 138px;
  border: 4px solid #5d4934;
  background:
    linear-gradient(90deg, rgba(76, 48, 25, 0.18) 0 8px, transparent 8px 100%),
    repeating-linear-gradient(180deg, rgba(71, 50, 33, 0.22) 0 8px, transparent 8px 18px),
    #d8c9a5;
  box-shadow: inset 0 12px 0 rgba(255, 245, 201, 0.22);
}

.rpg-entry-gourd {
  position: absolute;
  left: 12%;
  top: 8px;
  width: 82px;
  height: 68px;
  border-radius: 50%;
  background: #ad6134;
  box-shadow:
    54px 16px 0 10px #9b532f,
    10px 10px 0 rgba(255, 214, 151, 0.24) inset;
}

.rpg-entry-gourd::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -18px;
  width: 36px;
  height: 18px;
  border-top: 6px solid #6b4b2d;
  border-radius: 50%;
  transform: rotate(-24deg);
}

.rpg-entry-sword {
  position: absolute;
  left: 16%;
  right: 9%;
  bottom: 72px;
  height: 18px;
  background: linear-gradient(90deg, #77583d 0 14%, #e4c894 14% 18%, #7d5433 18% 100%);
  transform: rotate(-12deg);
  box-shadow: 0 0 22px rgba(255, 236, 169, 0.22);
}

.rpg-entry-sword::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -10px;
  border-left: 34px solid #cda768;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
}

.rpg-entry-copy {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.rpg-entry-copy .pixel-label {
  background: rgba(255, 249, 233, 0.9);
}

.rpg-entry-copy h2 {
  margin: 0;
  color: #fff3c0;
  font-family: var(--pixel-font);
  font-size: clamp(2.8rem, 10vw, 5.4rem);
  line-height: 1;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}

.rpg-entry-copy p,
.rpg-entry-copy small {
  margin: 0;
  max-width: 28em;
  color: rgba(255, 253, 245, 0.86);
  font-weight: 900;
  line-height: 1.6;
}

.rpg-entry-copy small {
  color: rgba(255, 225, 149, 0.82);
}

.rpg-story-stage {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(31, 73, 55, 0.88) 0 56px, transparent 56px calc(100% - 56px), rgba(31, 73, 55, 0.88) calc(100% - 56px)),
    #101512;
}

.rpg-location-tag {
  position: relative;
  z-index: 3;
  justify-self: start;
  display: grid;
  gap: 2px;
  border: 4px solid #2b1b13;
  background: #f7e8bf;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  color: #1b3528;
}

.rpg-location-tag span {
  color: rgba(27, 53, 40, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.rpg-location-tag b {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
}

.rpg-story-stage .rpg-chapter-beat {
  position: absolute;
  z-index: 4;
  top: 22px;
  right: 80px;
  background: #234f3d;
  color: #fff3c0;
}

.rpg-isometric-room {
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: center;
  width: min(840px, 92%);
  height: min(330px, 48svh);
  min-height: 260px;
  transform: perspective(900px) rotateX(55deg) rotateZ(-45deg);
  transform-origin: center;
}

.rpg-room-floor {
  position: absolute;
  inset: 12% 6% 4%;
  border: 6px solid #4c2f21;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 4px, transparent 4px 34px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 5px, transparent 5px 38px),
    linear-gradient(135deg, #b86d39 0 50%, #8e4d2d 50% 100%);
  box-shadow: 16px 16px 0 rgba(0, 0, 0, 0.32);
}

.rpg-room-wall {
  position: absolute;
  border: 5px solid #5c3423;
  background:
    repeating-linear-gradient(90deg, rgba(66, 36, 22, 0.22) 0 7px, transparent 7px 22px),
    #9d663f;
}

.rpg-wall-left {
  left: 6%;
  top: 0;
  width: 44%;
  height: 30%;
  transform: skewX(-22deg);
}

.rpg-wall-right {
  right: 6%;
  top: 0;
  width: 44%;
  height: 30%;
  transform: skewX(22deg);
}

.rpg-room-window {
  position: absolute;
  z-index: 2;
  top: 8%;
  width: 58px;
  height: 50px;
  border: 5px solid #f0ddbd;
  background:
    linear-gradient(90deg, transparent 42%, #f0ddbd 42% 58%, transparent 58%),
    linear-gradient(0deg, transparent 42%, #f0ddbd 42% 58%, transparent 58%),
    #162b23;
}

.rpg-room-window.window-one {
  left: 18%;
}

.rpg-room-window.window-two {
  right: 18%;
}

.rpg-room-bed,
.rpg-room-desk,
.rpg-room-book,
.rpg-word-sprite,
.rpg-hero-sprite,
.rpg-dia-sprite,
.rpg-star-gate {
  position: absolute;
  z-index: 4;
  transform: rotateZ(45deg) rotateX(-55deg);
  transform-origin: center;
}

.rpg-room-bed {
  left: 22%;
  top: 34%;
  width: 122px;
  height: 56px;
  border: 5px solid #4c2f21;
  background: linear-gradient(90deg, #e2c483 0 26%, #ba8b50 26% 100%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.24);
}

.rpg-room-desk {
  right: 21%;
  top: 43%;
  width: 88px;
  height: 56px;
  border: 5px solid #4c2f21;
  background: #7f4b2d;
}

.rpg-room-book {
  right: 30%;
  top: 38%;
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 3px;
}

.rpg-room-book i {
  height: 42px;
  border: 3px solid #4c2f21;
  background: #ffe69a;
  animation: bookGlow 1.2s ease-in-out infinite;
}

.rpg-word-sprite {
  display: grid;
  place-items: center;
  width: 48px;
  height: 28px;
  border: 4px solid #3d2b1d;
  background: #fff3c0;
  color: #1b3528;
  font-family: var(--pixel-font);
  font-size: 0.72rem;
  font-weight: 950;
  animation: wordSpiritFloat 2s ease-in-out infinite;
}

.sprite-by {
  left: 48%;
  top: 36%;
}

.sprite-bus {
  left: 57%;
  top: 48%;
  animation-delay: 0.2s;
}

.sprite-new {
  left: 43%;
  top: 55%;
  animation-delay: 0.4s;
}

.rpg-hero-sprite {
  left: 44%;
  top: 58%;
  width: 42px;
  height: 58px;
  background:
    linear-gradient(90deg, transparent 0 8px, #ffe0cc 8px 34px, transparent 34px),
    linear-gradient(180deg, #2f241d 0 14px, #f4c6ab 14px 28px, #2c7d68 28px 100%);
  box-shadow:
    -12px 22px 0 #1d2420,
    12px 22px 0 #1d2420;
}

.rpg-dia-sprite {
  right: 29%;
  top: 54%;
  width: 78px;
  animation: diaFloat 2.4s ease-in-out infinite;
}

.rpg-dia-sprite .dia-avatar {
  width: 72px;
}

.rpg-star-gate {
  right: 16%;
  top: 38%;
  width: 92px;
  height: 112px;
  border: 8px solid rgba(255, 207, 84, 0.9);
  border-radius: 50% 50% 12px 12px;
  background: rgba(255, 239, 166, 0.14);
  box-shadow: 0 0 28px rgba(255, 207, 84, 0.5);
}

.rpg-dialogue-panel {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 112px 1fr 24px;
  gap: 14px;
  align-items: center;
  border: 5px solid #5c2419;
  background: #1b5d2e;
  box-shadow:
    inset 0 0 0 4px rgba(255, 244, 184, 0.12),
    8px 8px 0 rgba(0, 0, 0, 0.32);
  padding: 12px;
  color: #fffdf5;
  animation: dialoguePop 180ms ease-out both;
}

.rpg-speaker-portrait {
  display: grid;
  place-items: center;
  width: 96px;
  aspect-ratio: 1;
  border: 4px solid #f1d28a;
  background: #153223;
  overflow: hidden;
}

.rpg-speaker-portrait .dia-avatar {
  width: 86px;
}

.rpg-speaker-portrait.speaker-xiaoyezi::before,
.rpg-speaker-portrait.speaker-旁白::before,
.rpg-speaker-portrait.speaker-juan首::before,
.rpg-speaker-portrait.speaker-narrator::before {
  content: "";
  width: 58px;
  height: 72px;
  border: 4px solid #f3c8a8;
  background:
    radial-gradient(circle at 35% 34%, #1b2528 0 5px, transparent 6px),
    radial-gradient(circle at 65% 34%, #1b2528 0 5px, transparent 6px),
    linear-gradient(180deg, #2a201a 0 24px, #ffd4be 24px 48px, #2c7d68 48px 100%);
}

.rpg-speaker-portrait.speaker-旁白::before,
.rpg-speaker-portrait.speaker-narrator::before {
  border-color: #e0a93b;
  background:
    linear-gradient(90deg, #d7bf86 0 48%, #b69054 48% 52%, #e7d5a2 52% 100%);
}

.rpg-dialogue-copy {
  display: grid;
  gap: 6px;
}

.rpg-dialogue-copy strong {
  color: #ffe18b;
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.rpg-dialogue-copy p {
  margin: 0;
  color: #fffdf5;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 900;
  line-height: 1.55;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.34);
}

.rpg-dialogue-arrow {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #ffe18b;
  animation: rpgArrowBlink 0.9s steps(2, end) infinite;
}

.rpg-story-stage .rpg-progress,
.rpg-entry-screen .rpg-progress {
  position: relative;
  z-index: 5;
  justify-content: center;
}

.rpg-story-stage .rpg-actions,
.rpg-entry-screen .rpg-actions {
  position: relative;
  z-index: 5;
  justify-content: center;
}

@keyframes wordSpiritFloat {
  0%,
  100% {
    transform: rotateZ(45deg) rotateX(-55deg) translateY(0);
  }
  50% {
    transform: rotateZ(45deg) rotateX(-55deg) translateY(-8px);
  }
}

@keyframes rpgArrowBlink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0.25;
  }
}

@media (max-width: 760px) {
  .rpg-entry-screen,
  .rpg-story-stage {
    min-height: calc(100svh - 92px);
  }

  .rpg-skip {
    left: 12px;
    right: auto;
    top: 12px;
    max-width: calc(100% - 24px);
    white-space: nowrap;
  }

  .rpg-entry-still {
    height: 210px;
  }

  .rpg-entry-copy h2 {
    font-size: 3rem;
  }

  .rpg-story-stage {
    padding: 56px 12px 16px;
  }

  .rpg-story-stage .rpg-chapter-beat {
    position: relative;
    top: auto;
    right: auto;
    justify-self: start;
  }

  .rpg-isometric-room {
    width: 118%;
    height: 260px;
    min-height: 240px;
  }

  .rpg-dialogue-panel {
    grid-template-columns: 70px 1fr 18px;
    gap: 8px;
    padding: 8px;
  }

  .rpg-speaker-portrait {
    width: 64px;
  }

  .rpg-speaker-portrait .dia-avatar {
    width: 58px;
  }

  .rpg-dialogue-copy p {
    font-size: 1rem;
  }
}

.home-unit-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 5px;
  min-height: 92px;
  border: 4px solid var(--line);
  background:
    linear-gradient(180deg, #fff9e9 0 62%, #e8dcc7 62% 100%);
  color: var(--ink);
  padding: 10px;
  text-align: left;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
}

.home-unit-tile.current {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, #fff7d8 0 58%, #e0a93b 58% 100%);
}

.home-unit-tile b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--line);
  background: var(--brand);
  color: #fffdf5;
  font-family: var(--pixel-font);
}

.home-unit-tile span {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.25;
}

.home-unit-tile small {
  color: rgba(40, 50, 59, 0.72);
  font-weight: 900;
}

.home-unit-tile > i {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 8px;
  border: 2px solid var(--ink);
  background: #ded6c7;
}

.home-unit-tile > i em {
  display: block;
  height: 100%;
  background: var(--brand);
}

.home-map-title,
.home-map-count,
.home-map-card {
  position: absolute;
  z-index: 4;
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: var(--block-shadow);
  color: var(--ink);
}

.home-map-title {
  top: 26px;
  left: 28px;
  display: grid;
  gap: 4px;
  min-width: min(310px, 54%);
  padding: 16px 18px;
}

.home-map-title strong {
  font-size: clamp(1.08rem, 2.4vw, 1.55rem);
  font-weight: 950;
}

.home-map-title span {
  color: var(--muted);
  font-family: var(--pixel-font);
  font-weight: 950;
}

.home-map-count {
  top: 24px;
  right: 26px;
  display: grid;
  place-items: center;
  width: 92px;
  min-height: 112px;
  background: #dcefd8;
}

.home-map-count strong {
  color: var(--brand-dark);
  font-family: var(--pixel-font);
  font-size: 2.4rem;
  line-height: 1;
}

.home-map-count span {
  color: var(--brand-dark);
  font-weight: 950;
}

.home-map-platform {
  position: absolute;
  z-index: 2;
  border: 4px solid var(--line);
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, transparent 0 44%, rgba(230, 184, 77, 0.48) 44% 56%, transparent 56%),
    #4f855e;
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.18);
}

.platform-one {
  left: 7%;
  bottom: 35%;
  width: 38%;
  height: 18%;
}

.platform-two {
  right: 6%;
  bottom: 28%;
  width: 54%;
  height: 22%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    #5c8e74;
}

.home-map-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  min-width: clamp(208px, 22vw, 286px);
  padding: 14px 16px 14px 14px;
  isolation: isolate;
  text-align: left;
  cursor: pointer;
}

.home-map-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: #e4d4ad;
}

.home-map-card > * {
  position: relative;
  z-index: 1;
}

.home-map-card b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  border: var(--pixel-border);
  background: var(--brand);
  color: #fff9e9;
  font-family: var(--pixel-font);
  font-size: 1.45rem;
}

.home-map-card span {
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 950;
  line-height: 1.15;
}

.home-map-card small {
  display: inline-grid;
  justify-self: start;
  min-height: 26px;
  align-items: center;
  border: 2px solid rgba(40, 50, 59, 0.26);
  background: #edf4e8;
  padding: 2px 8px;
  color: var(--stone-green-dark);
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.map-card-one {
  left: 8%;
  bottom: 38%;
}

.map-card-two {
  left: 40%;
  bottom: 20%;
}

.map-card-three {
  right: 8%;
  bottom: 34%;
}

.home-map-dia {
  position: absolute;
  z-index: 5;
  right: 13%;
  bottom: 16%;
  display: grid;
  place-items: center;
  width: 80px;
}

.home-map-dia .dia-avatar {
  width: 72px;
}

.practice-frame {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 22px;
  min-height: min(760px, calc(100vh - 156px));
  border: var(--pixel-border);
  background: var(--panel);
  box-shadow: var(--block-shadow);
  padding: 18px;
}

.practice-brief {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  border: var(--pixel-border);
  background: var(--paper);
  padding: 22px;
}

.practice-brief h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.12;
}

.practice-brief p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.72;
}

.practice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.practice-tags span {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  border: 3px solid var(--line);
  background: #fff7d8;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  padding: 4px 12px;
  color: var(--ink);
  font-family: var(--pixel-font);
  font-weight: 950;
}

.practice-unit-plaque {
  display: grid;
  gap: 8px;
  margin-top: auto;
  border: var(--pixel-border);
  background: #dcefd8;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 14px;
}

.practice-unit-plaque strong {
  color: var(--brand-dark);
  font-size: 1.05rem;
  font-weight: 950;
}

.practice-unit-plaque small {
  color: var(--muted);
  font-weight: 900;
  line-height: 1.4;
}

.practice-room {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 650px;
  margin: 0;
  border: var(--pixel-border);
  background:
    linear-gradient(90deg, rgba(122, 76, 47, 0.16) 0 12px, transparent 12px 48px) 0 0 / 48px 100%,
    linear-gradient(#efe0bd 0 66%, #c99d65 66% 100%);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.practice-room.lesson-screen,
.practice-room.story-quest,
.practice-room.center-panel {
  padding: 24px 28px;
}

.practice-room.center-panel {
  display: grid;
  align-content: start;
  text-align: center;
}

.practice-room .academy-lattice {
  inset: 110px 42px 112px;
  border-width: 4px;
  opacity: 0.96;
}

.practice-room > *:not(.academy-lattice) {
  position: relative;
  z-index: 2;
}

.practice-room-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: min(100%, 760px);
  margin: 12px auto 0;
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 12px 16px;
  color: var(--ink);
  font-weight: 950;
}

.practice-room-label span {
  color: var(--muted);
}

.practice-room-wordbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 760px);
  margin: 12px auto 18px;
  border: var(--pixel-border);
  background: #fff7d8;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 12px 16px;
  color: var(--ink);
  font-weight: 950;
}

.practice-room-wordbar b {
  color: var(--brand-dark);
  font-size: 1.2em;
}

.practice-room-wordbar strong {
  color: var(--muted);
}

.practice-room .course-top {
  width: min(100%, 760px);
  margin: 0 auto;
}

.practice-room .quiz-round-note,
.practice-room .meaning-prompt,
.practice-room .meaning-art-card,
.practice-room .companion-card,
.practice-room .voice-score-panel,
.practice-room .option-grid,
.practice-room .letter-slots,
.practice-room .letter-bank,
.practice-room .inline-actions,
.practice-room .feedback,
.practice-room .academy-hotbar {
  width: min(100%, 760px);
  margin-left: auto;
  margin-right: auto;
}

.practice-room .bottom-cta {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(100%, 760px);
  margin: 14px auto 0;
}

.practice-room .academy-hotbar {
  margin-top: 18px;
}

.practice-game .practice-room {
  min-height: 650px;
}

.practice-game .practice-room-label,
.practice-game .practice-room-wordbar {
  color: var(--ink);
  background: #fff7d8;
}

.home-mini-actions .ghost-button {
  min-height: 52px;
}

.home-compact .home-mini-actions {
  grid-column: 1 / -1;
}

.lesson-screen.swipe-layout,
.lesson-screen.meaning-screen,
.story-quest,
.center-panel:not(.feedback) {
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(45, 61, 52, 0.052) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(45, 61, 52, 0.04) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(180deg, rgba(255, 249, 233, 0.96), rgba(247, 240, 223, 0.98)),
    var(--paper);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.story-quest,
.center-panel:not(.feedback) {
  padding: 14px;
}

.lesson-screen .word-visual,
.companion-card .word-visual,
.meaning-art-card .word-visual {
  justify-self: center;
}

.lantern-market-stage {
  position: relative;
  overflow: hidden;
  border: var(--pixel-border);
  background:
    radial-gradient(circle at 18% 22%, rgba(224, 169, 59, 0.22), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(200, 80, 60, 0.18), transparent 22%),
    linear-gradient(rgba(45, 61, 52, 0.055) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(180deg, #fff7d8 0%, var(--paper) 100%);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.lantern-market-stage::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 74px;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--cinnabar) 0 14px, var(--brick-dark) 14px 18px, transparent 18px 28px);
  opacity: 0.32;
  pointer-events: none;
}

.lantern-market-stage > * {
  position: relative;
  z-index: 1;
}

.lantern-letter {
  background:
    linear-gradient(180deg, #fff7d8 0 54%, var(--gold) 54% 100%);
  color: var(--ink);
  box-shadow:
    0 var(--button-depth) 0 #9c6c1a,
    0 0 0 4px rgba(224, 169, 59, 0.14);
}

.boss-board {
  align-items: stretch;
}

.boss-card {
  background:
    linear-gradient(180deg, #fff9e9 0 58%, #f3dfbf 58% 100%);
}

.bubble-field {
  background:
    repeating-linear-gradient(45deg, rgba(200, 80, 60, 0.08) 0 12px, transparent 12px 24px),
    #fffdf5;
}

.unit-stage-dots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 3px 0 2px;
}

.unit-stage-dots b {
  display: grid;
  place-items: center;
  min-height: 20px;
  border: 1px solid rgba(40, 50, 59, 0.62);
  background: #f7f0df;
  color: rgba(40, 50, 59, 0.72);
  font-family: var(--pixel-font);
  font-size: 0.56rem;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(40, 50, 59, 0.08);
}

.unit-node.recommended .unit-stage-dots b {
  background: #fff7d8;
  color: var(--ink);
}

.unit-steps {
  position: relative;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 12px 8px 18px;
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(45, 61, 52, 0.052) 2px, transparent 2px) 0 0 / 24px 24px,
    var(--panel);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.unit-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(179, 92, 68, 0.72) 0 18px, rgba(134, 38, 23, 0.72) 18px 22px);
  transform: translateY(-50%) rotate(-2deg);
  opacity: 0.34;
}

.unit-steps .step-block {
  position: relative;
  z-index: 1;
}

.unit-steps .step-block:nth-child(even) {
  transform: translateY(14px);
}

.unit-steps .step-block:nth-child(even):active {
  transform: translateY(calc(14px + var(--button-depth)));
}

.mark-step {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, #fff7d8 0 58%, rgba(224, 169, 59, 0.42) 58% 100%);
}

.map-status,
.unit-header {
  background:
    linear-gradient(90deg, rgba(224, 239, 231, 0.82), rgba(255, 253, 245, 0.9)),
    var(--panel);
}

.build-scene {
  background:
    linear-gradient(rgba(94, 154, 143, 0.09) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(94, 154, 143, 0.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, rgba(255, 253, 245, 0.9), rgba(241, 236, 221, 0.98)),
    var(--paper);
}

.starlit-gate {
  filter: drop-shadow(10px 10px 0 rgba(40, 50, 59, 0.16));
}

.gate-top {
  background: var(--cinnabar);
  box-shadow: inset 0 -8px 0 var(--brick-dark);
}

.gate-left,
.gate-right {
  border: 0;
  background:
    repeating-linear-gradient(180deg, #fffdf5 0 14px, #ded6c7 14px 20px),
    #fffdf5;
}

.gate-plaque {
  background: var(--gold);
  color: var(--ink);
}

.pixel-plaza {
  border: 4px solid var(--ink);
  box-shadow:
    inset 0 -10px 0 rgba(67, 112, 102, 0.22),
    8px 8px 0 rgba(40, 50, 59, 0.14);
}

.world-map-canvas {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 340px;
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(40, 50, 59, 0.045) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(40, 50, 59, 0.035) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, #b8d8dc 0 48%, #dcefcf 48% 100%);
  box-shadow:
    inset 0 -10px 0 rgba(67, 112, 102, 0.2),
    7px 7px 0 rgba(40, 50, 59, 0.13);
  clip-path: var(--step-corner);
}

.world-map-hud {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 16px;
  top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--pixel-font);
}

.world-map-hud span,
.world-map-hud strong {
  min-height: 32px;
  border: 2px solid var(--ink);
  background: rgba(255, 253, 245, 0.94);
  padding: 6px 9px;
  box-shadow: 3px 3px 0 rgba(40, 50, 59, 0.12);
}

.terrain-block {
  position: absolute;
  border: 2px solid rgba(40, 50, 59, 0.32);
  background:
    linear-gradient(45deg, rgba(255, 253, 245, 0.2) 25%, transparent 25%) 0 0 / 18px 18px,
    rgba(94, 154, 143, 0.44);
  box-shadow: 5px 5px 0 rgba(40, 50, 59, 0.08);
  image-rendering: pixelated;
}

.terrain-a {
  left: -8%;
  bottom: 34px;
  width: 58%;
  height: 118px;
  transform: skewX(-16deg);
}

.terrain-b {
  right: -4%;
  bottom: 76px;
  width: 46%;
  height: 96px;
  background-color: rgba(224, 169, 59, 0.34);
  transform: skewX(12deg);
}

.terrain-c {
  left: 36%;
  top: 92px;
  width: 28%;
  height: 72px;
  background-color: rgba(179, 92, 68, 0.22);
  transform: skewX(-10deg);
}

.map-route-line {
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 10%;
  top: 52%;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(40, 50, 59, 0.7) 0 22px, transparent 22px 32px);
  transform: rotate(-10deg);
  opacity: 0.36;
}

.map-islands {
  position: absolute;
  inset: 58px 20px 62px;
  z-index: 3;
}

.map-island {
  position: absolute;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 48px;
  gap: 4px;
  width: min(142px, 30%);
  min-height: 86px;
  border: var(--pixel-border);
  background:
    linear-gradient(180deg, #fff9e9 0 58%, #ded6c7 58% 100%);
  color: var(--ink);
  padding: 9px;
  text-align: left;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
}

.unit-landmark {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.map-unit-landmark {
  grid-column: 3;
  grid-row: 1 / span 3;
  width: 46px;
  justify-self: end;
  align-self: start;
  margin: 0;
  border: 2px solid rgba(28, 38, 31, 0.72);
  background: #fffdf5;
  box-shadow: 3px 3px 0 rgba(28, 38, 31, 0.14);
}

.map-island b {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--line);
  background: var(--brand);
  color: #fffdf5;
  font-family: var(--pixel-font);
}

.map-island span {
  grid-column: 1 / 3;
  grid-row: 2;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.2;
}

.map-island small {
  grid-column: 1 / 3;
  grid-row: 3;
  color: rgba(40, 50, 59, 0.7);
  font-weight: 900;
}

.map-island.current {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, #fff7d8 0 58%, #e0a93b 58% 100%);
  box-shadow:
    5px 5px 0 rgba(40, 50, 59, 0.16),
    0 0 0 6px rgba(224, 169, 59, 0.22);
}

.map-island.complete b {
  background: var(--stone-green);
}

.map-island.waiting b {
  background: var(--brick);
}

.island-1 { left: 2%; top: 44%; }
.island-2 { left: 20%; top: 60%; }
.island-3 { left: 38%; top: 38%; }
.island-4 { left: 56%; top: 56%; }
.island-5 { left: 72%; top: 28%; }
.island-6 { left: 78%; top: 68%; }

.dia-map-marker {
  position: absolute;
  z-index: 4;
  left: 44%;
  top: 58%;
  display: grid;
  place-items: center;
  width: 76px;
  transform: translate(-50%, -50%);
}

.dia-map-marker .dia-avatar {
  width: 68px;
}

.unit-header-landmark {
  width: clamp(84px, 14vw, 118px);
  border: var(--pixel-border);
  background: #fffdf5;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
}

.voice-companion-card {
  align-items: center;
}

.unit-path {
  border: var(--pixel-border);
  background:
    linear-gradient(rgba(45, 61, 52, 0.052) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(45, 61, 52, 0.04) 2px, transparent 2px) 0 0 / 24px 24px,
    var(--panel);
  box-shadow: var(--block-shadow);
}

.unit-node,
.step-block,
.word-brick,
.mission-card,
.completion-grid article,
.report-grid article,
.stat,
.tool-block {
  border: var(--pixel-border);
  background: var(--panel);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
}

.unit-node.recommended {
  outline: 0;
  border-color: var(--gold);
  box-shadow:
    6px 6px 0 rgba(40, 50, 59, 0.16),
    0 0 0 6px rgba(224, 169, 59, 0.22);
}

.unit-cube,
.step-block span {
  background:
    linear-gradient(135deg, #d08964 0 50%, var(--brick) 50% 100%);
  color: #fffdf5;
}

.unit-copy i,
.course-progress,
.progress-track,
.bar-track,
.step-progress,
.brick-progress {
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
}

.lesson-screen {
  background:
    linear-gradient(rgba(45, 61, 52, 0.052) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(45, 61, 52, 0.04) 2px, transparent 2px) 0 0 / 24px 24px,
    var(--paper);
}

.course-back {
  display: grid;
  place-items: center;
  border: var(--pixel-border);
  background: var(--panel);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.16);
  color: var(--ink);
  font-family: var(--pixel-font);
}

.course-progress i {
  background:
    repeating-linear-gradient(90deg, var(--brand) 0 16px, var(--brand-dark) 16px 20px);
}

.swipe-card,
.meaning-art-card,
.companion-card,
.boss-card,
.bubble-field,
.checkpoint-card {
  border: var(--pixel-border);
  background:
    linear-gradient(180deg, #fff9e9 0%, #f7f0df 100%);
  box-shadow: var(--block-shadow);
}

.swipe-card h2,
.boss-card strong,
.word,
.letter-tile,
.letter-bubble,
.choice-option {
  font-family: var(--pixel-font);
}

.swipe-card.dragging {
  box-shadow: 12px 12px 0 rgba(40, 50, 59, 0.18);
}

.swipe-overlay {
  border-radius: 0;
  clip-path: var(--step-corner);
  border: 3px solid var(--ink);
}

.swipe-guide {
  border: var(--pixel-border);
  border-radius: 0;
  clip-path: var(--step-corner);
  background:
    linear-gradient(90deg, #fff7d8, #fff9e9, #dcefd8);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
}

.choice-option.correct,
.option.correct {
  background: #e0efe7;
  box-shadow: 0 var(--button-depth) 0 var(--brand-dark);
}

.choice-option.wrong,
.option.wrong {
  background: #fff7d8;
  border-color: var(--gold);
  color: var(--ink);
}

.letter-slots span {
  border: 4px dashed rgba(45, 61, 52, 0.82);
  border-radius: 0;
  background: var(--panel);
}

.letter-bubble {
  border-radius: 0;
  width: 56px;
  height: 56px;
}

.completion-hero,
.daily-report {
  background:
    linear-gradient(rgba(224, 169, 59, 0.09) 1px, transparent 1px) 0 0 / 16px 16px,
    #fffdf5;
}

.completion-grid article strong,
.report-grid strong,
.daily-report h3 {
  color: var(--brick-dark);
}

.card-word-badge,
.highlight-card {
  border: 4px solid var(--ink);
  border-radius: 0;
  clip-path: var(--step-corner);
}

/* Closer to Xishi/Diaochan stage mockups: real scene objects, not only pixel borders. */
.home-map-preview,
.world-map-canvas,
.academy-stage,
.lantern-market-stage {
  isolation: isolate;
}

.home-map-preview {
  min-height: 430px;
  overflow: hidden;
  background:
    linear-gradient(#b8d8dc 0 44%, #dcefcf 44% 100%);
}

.home-map-grid {
  align-self: end;
}

.home-unit-tile {
  background:
    linear-gradient(180deg, rgba(255, 253, 245, 0.95) 0 58%, #e1d0aa 58% 100%);
}

.home-unit-tile.current {
  transform: translateY(-8px);
}

.map-sun {
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 13%;
  width: 54px;
  height: 54px;
  border: 4px solid var(--ink);
  background: #f6cf67;
  box-shadow:
    10px 0 0 rgba(246, 207, 103, 0.62),
    -10px 0 0 rgba(246, 207, 103, 0.62),
    0 10px 0 rgba(246, 207, 103, 0.62),
    0 -10px 0 rgba(246, 207, 103, 0.62);
}

.mini-sun {
  top: 58px;
  right: 36px;
  width: 38px;
  height: 38px;
  box-shadow:
    8px 0 0 rgba(246, 207, 103, 0.58),
    -8px 0 0 rgba(246, 207, 103, 0.58),
    0 8px 0 rgba(246, 207, 103, 0.58),
    0 -8px 0 rgba(246, 207, 103, 0.58);
}

.map-cloud {
  position: absolute;
  z-index: 1;
  width: 118px;
  height: 32px;
  border: 4px solid var(--ink);
  background: #fffdf5;
  box-shadow: 5px 5px 0 rgba(40, 50, 59, 0.12);
}

.map-cloud::before,
.map-cloud::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 36px;
  height: 34px;
  border: 4px solid var(--ink);
  border-bottom: 0;
  background: #fffdf5;
}

.map-cloud::before {
  left: 18px;
}

.map-cloud::after {
  right: 18px;
}

.mini-cloud.one {
  left: 28px;
  top: 92px;
  transform: scale(0.72);
  transform-origin: left top;
}

.mini-cloud.two {
  right: 88px;
  top: 132px;
  transform: scale(0.58);
  transform-origin: right top;
}

.cloud-a {
  left: 44%;
  top: 92px;
}

.cloud-b {
  right: 22%;
  top: 138px;
  transform: scale(0.78);
  transform-origin: right top;
}

.home-block-mountain,
.block-mountain-stage {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background:
    linear-gradient(135deg, transparent 0 24px, rgba(47, 122, 98, 0.18) 24px 48px, transparent 48px) 0 0 / 48px 48px,
    linear-gradient(90deg, #a3b86c 0 25%, #7ea66c 25% 50%, #d8c087 50% 75%, #8a5a38 75% 100%) 0 100% / 96px 120px repeat-x;
}

.home-block-mountain::before,
.block-mountain-stage::before {
  content: "";
  position: absolute;
  left: 8%;
  bottom: 44%;
  width: 34%;
  height: 44%;
  border: 4px solid var(--ink);
  background:
    linear-gradient(135deg, transparent 0 48px, #4f855e 48px 96px, transparent 96px) 0 0 / 96px 96px,
    #8ea95b;
  box-shadow:
    260px 48px 0 #5c8e74,
    260px 48px 0 4px var(--ink),
    520px -10px 0 #9bbd83,
    520px -10px 0 4px var(--ink);
}

.world-map-canvas {
  min-height: 430px;
  background:
    linear-gradient(#b7d9df 0 42%, #dcefd8 42% 100%);
}

.world-map-hud,
.map-islands,
.dia-map-marker,
.step-progress,
.terrain-block,
.map-route-line {
  position: absolute;
}

.terrain-block {
  display: none;
}

.map-route-line {
  z-index: 2;
  top: 62%;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(40, 50, 59, 0.84) 0 20px, transparent 20px 30px);
  opacity: 0.42;
}

.map-island {
  z-index: 3;
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.18);
}

.dia-map-marker {
  left: 76%;
  top: 64%;
}

.step-progress {
  z-index: 4;
  left: 18px;
  bottom: 16px;
}

.academy-stage {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(122, 76, 47, 0.2) 0 12px, transparent 12px 48px) 0 0 / 48px 100%,
    linear-gradient(#efe0bd 0 66%, #c99d65 66% 100%);
}

.academy-lattice {
  position: absolute;
  z-index: 0;
  inset: 76px 32px 126px;
  border: 4px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(122, 76, 47, 0.75) 0 6px, transparent 6px 64px) 0 0 / 64px 100%,
    linear-gradient(rgba(122, 76, 47, 0.75) 0 6px, transparent 6px 64px) 0 0 / 100% 64px,
    #f8e9c9;
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.18);
  opacity: 0.82;
}

.academy-stage > *:not(.academy-lattice) {
  position: relative;
  z-index: 1;
}

.academy-stage .lesson-scene-label {
  background:
    linear-gradient(180deg, #fff7dd 0 58%, #e1c68b 58% 100%);
}

.academy-stage .swipe-card,
.academy-stage .meaning-art-card,
.academy-stage .companion-card,
.academy-stage .speech-bubble,
.academy-stage .checkpoint-card {
  background: rgba(255, 249, 233, 0.96);
}

.academy-hotbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: min(620px, 100%);
  margin: 10px auto 0;
  padding: 10px;
  border: 4px solid var(--ink);
  background: #fff5d9;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.16);
  clip-path: var(--step-corner);
}

.academy-hotbar span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 4px solid var(--ink);
  background: #e1c68b;
  color: var(--ink);
  font-family: var(--pixel-font);
  font-weight: 950;
}

.academy-hotbar span.active {
  background: var(--cinnabar);
  color: #fff8dc;
}

.lantern-market-stage {
  min-height: 680px;
  color: #fff6d9;
  background:
    radial-gradient(circle at 80% 18%, rgba(230, 184, 77, 0.34), transparent 16%),
    linear-gradient(#162547 0 58%, #273b4d 58% 100%);
}

.lantern-market-stage .play-nav,
.lantern-market-stage .lesson-scene-label,
.lantern-market-stage .boss-header,
.lantern-market-stage .boss-board,
.lantern-market-stage .letter-slots,
.lantern-market-stage .inline-actions,
.lantern-market-stage .feedback,
.lantern-market-stage .highlight-card {
  position: relative;
  z-index: 3;
}

.lantern-market-stage .lesson-scene-label {
  background:
    linear-gradient(180deg, #fff7d8 0 58%, #e0a93b 58% 100%);
  color: var(--ink);
}

.lantern-market-stage .helper,
.lantern-market-stage .boss-header p {
  color: #fff6d9;
}

.lantern-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle, #fff4b7 0 3px, transparent 4px) 80px 90px / 132px 98px,
    radial-gradient(circle, #c8e8f1 0 2px, transparent 3px) 28px 38px / 88px 76px;
}

.market-moon-gate {
  position: absolute;
  z-index: 1;
  left: 36px;
  bottom: 110px;
  width: 250px;
  height: 250px;
  border: 18px solid #e6b84d;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px var(--ink),
    8px 8px 0 rgba(0, 0, 0, 0.25);
}

.market-moon-gate::after {
  content: "";
  position: absolute;
  inset: 44px;
  border: 4px solid rgba(255, 246, 217, 0.6);
  border-radius: 50%;
}

.market-lantern {
  position: absolute;
  z-index: 2;
  top: 92px;
  width: 48px;
  height: 64px;
  border: 4px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 0 18px, #ffd37a 18px 26px, transparent 26px),
    #c94d3b;
  box-shadow:
    0 -20px 0 -8px #e6b84d,
    0 20px 0 -8px #e6b84d,
    5px 5px 0 rgba(0, 0, 0, 0.25);
}

.lantern-one {
  left: min(390px, 48%);
}

.lantern-two {
  right: 112px;
  top: 126px;
}

.market-block-bridge {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 132px;
  border-top: 4px solid var(--ink);
  background:
    linear-gradient(90deg, #9f6a42 0 48px, #6b4430 48px 96px, #375a5b 96px 144px) 0 0 / 144px 66px repeat,
    #2a473d;
}

.lantern-market-stage .boss-card {
  background:
    linear-gradient(135deg, rgba(230, 184, 77, 0.16) 25%, transparent 25%) 0 0 / 28px 28px,
    #fff7dd;
  color: var(--ink);
}

.lantern-market-stage .bubble-field {
  background:
    linear-gradient(rgba(255, 244, 183, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
    #21334f;
}

.boss-card-actions {
  display: grid;
  gap: 8px;
}

.boss-sound-wave,
.boss-spark-burst {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.boss-sound-wave {
  left: 156px;
  bottom: 224px;
  width: 84px;
  height: 84px;
  border: 6px solid rgba(255, 244, 183, 0.68);
  box-shadow:
    0 0 0 18px rgba(224, 169, 59, 0.2),
    0 0 0 36px rgba(224, 169, 59, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

.boss-spark-burst {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle, #fff4b7 0 5px, transparent 6px) 20% 28% / 112px 96px,
    radial-gradient(circle, #e0a93b 0 4px, transparent 5px) 78% 30% / 96px 88px,
    radial-gradient(circle, #fffdf5 0 4px, transparent 5px) 52% 18% / 84px 72px,
    radial-gradient(circle, #c8503c 0 4px, transparent 5px) 44% 68% / 118px 88px;
}

.boss-effect-ready .market-moon-gate {
  animation: bossGatePulse 2.8s steps(2, end) infinite;
}

.boss-effect-tap .boss-sound-wave {
  animation: bossSoundWave 520ms steps(4, end) both;
}

.boss-effect-tap .market-moon-gate {
  animation: bossGateTap 520ms steps(3, end) both;
}

.boss-effect-tap .letter-slots span:not(:empty) {
  animation: bossSlotPop 360ms steps(2, end) both;
}

.boss-effect-win .boss-spark-burst {
  animation: bossSparkBurst 900ms steps(5, end) both;
}

.boss-effect-win .market-moon-gate {
  animation: bossGateWin 920ms steps(5, end) both;
}

.boss-effect-win .boss-card,
.boss-effect-win .highlight-card {
  animation: bossCardPop 720ms steps(4, end) both;
}

.boss-effect-wrong .boss-card,
.boss-effect-wrong .letter-slots {
  animation: bossRoomShake 420ms steps(4, end) both;
}

.boss-effect-wrong .market-lantern {
  animation: bossLanternFlicker 520ms steps(3, end) both;
}

@keyframes bossGatePulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(224, 169, 59, 0));
  }

  50% {
    filter: drop-shadow(0 0 16px rgba(224, 169, 59, 0.52));
  }
}

@keyframes bossSoundWave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.66);
  }

  30% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes bossGateTap {
  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.04);
  }
}

@keyframes bossSlotPop {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes bossSparkBurst {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes bossGateWin {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(224, 169, 59, 0));
    transform: scale(1);
  }

  42% {
    filter: drop-shadow(0 0 28px rgba(224, 169, 59, 0.72));
    transform: scale(1.08);
  }
}

@keyframes bossCardPop {
  0% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes bossRoomShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-7px);
  }

  50% {
    transform: translateX(7px);
  }

  75% {
    transform: translateX(-4px);
  }
}

@keyframes bossLanternFlicker {
  0%,
  100% {
    filter: brightness(1);
  }

  40% {
    filter: brightness(1.42);
  }

  70% {
    filter: brightness(0.82);
  }
}

/* Practice pages follow the sample-B pattern: left brief, right scene room. */
.practice-frame .practice-room.lesson-screen,
.practice-frame .practice-room.story-quest,
.practice-frame .practice-room.center-panel {
  padding: 24px 28px 30px;
  background:
    linear-gradient(90deg, rgba(122, 76, 47, 0.2) 0 12px, transparent 12px 48px) 0 0 / 48px 100%,
    linear-gradient(#efe0bd 0 66%, #c99d65 66% 100%);
}

.practice-frame .practice-room.lantern-market-stage {
  background:
    radial-gradient(circle at 80% 18%, rgba(230, 184, 77, 0.34), transparent 16%),
    linear-gradient(#162547 0 58%, #273b4d 58% 100%);
}

.practice-frame .practice-room .course-top,
.practice-frame .practice-room .play-nav,
.practice-frame .practice-room-label,
.practice-frame .practice-room-wordbar,
.practice-frame .practice-room .quiz-round-note,
.practice-frame .practice-room .meaning-prompt,
.practice-frame .practice-room .meaning-art-card,
.practice-frame .practice-room .companion-card,
.practice-frame .practice-room .voice-score-panel,
.practice-frame .practice-room .option-grid,
.practice-frame .practice-room .letter-slots,
.practice-frame .practice-room .letter-bank,
.practice-frame .practice-room .inline-actions,
.practice-frame .practice-room .feedback,
.practice-frame .practice-room .academy-hotbar {
  width: min(100%, 760px);
  margin-left: auto;
  margin-right: auto;
}

.practice-frame .practice-room .bottom-cta {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(100%, 760px);
  margin: 14px auto 0;
}

.practice-frame .practice-room .companion-card {
  grid-template-columns: 92px minmax(0, 1fr);
}

.practice-frame .practice-room .companion-card .dia-avatar {
  width: 92px;
}

.practice-frame .practice-room .letter-bank {
  justify-content: center;
}

@media (max-width: 1040px) {
  .practice-frame {
    grid-template-columns: 1fr;
  }

  .practice-brief {
    min-height: auto;
  }
}

@media (min-width: 721px) {
  .unit-path {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .unit-path::before {
    display: none;
  }

  .unit-node,
  .unit-node.right {
    justify-self: stretch;
    width: 100%;
    min-height: 128px;
  }

  .unit-copy {
    align-self: center;
  }
}

@media (min-width: 1040px) {
  .unit-path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: calc(100vw - 24px);
    padding: 0;
  }

  .practice-frame {
    gap: 14px;
    min-height: auto;
    padding: 12px;
  }

  .practice-brief {
    gap: 12px;
    padding: 14px;
  }

  .practice-brief h2 {
    font-size: 1.75rem;
  }

  .practice-tags span {
    min-height: 32px;
    padding: 3px 8px;
    font-size: 0.8rem;
  }

  .practice-room {
    min-height: 620px;
  }

  .practice-frame .practice-room.lesson-screen,
  .practice-frame .practice-room.story-quest,
  .practice-frame .practice-room.center-panel {
    padding: 14px 12px 24px;
  }

  .practice-room-label,
  .practice-room-wordbar {
    flex-direction: column;
    align-items: flex-start;
  }

  main,
  .study-area,
  .app-map,
  .unit-world,
  .map-status,
  .build-scene,
  .unit-path,
  .unit-node,
  .hero,
  .hero-copy,
  .hero-visual,
  .companion-bubble {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .map-status,
  .unit-header,
  .hero {
    overflow: hidden;
  }

  .map-status,
  .unit-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .map-status h2,
  .map-status p,
  .unit-header h2,
  .unit-header p,
  .companion-bubble span,
  .preset-badge {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  body[data-mode="home"] .hero {
    min-height: calc(100vh - 24px);
  }

  body[data-mode="home"] .hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.28rem);
  }

  body[data-mode="home"] .hero-title-line {
    display: block;
  }

  .hero-visual {
    justify-items: start;
  }

  .hero-dia {
    width: 112px;
  }

  .hero-status {
    width: 94px;
    justify-self: start;
  }

  body[data-mode="map"] .hero,
  body[data-mode="unit"] .hero,
  body[data-mode="swipe"] .hero,
  body[data-mode="spell"] .hero,
  body[data-mode="speak"] .hero,
  body[data-mode="game"] .hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .world-story-panel,
  .unit-story-panel {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .story-marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-mode="map"] .hero-visual,
  body[data-mode="unit"] .hero-visual,
  body[data-mode="swipe"] .hero-visual,
  body[data-mode="spell"] .hero-visual,
  body[data-mode="speak"] .hero-visual,
  body[data-mode="game"] .hero-visual {
    grid-template-columns: 64px minmax(0, 1fr);
    justify-items: stretch;
  }

  body[data-mode="map"] .hero-dia,
  body[data-mode="unit"] .hero-dia,
  body[data-mode="swipe"] .hero-dia,
  body[data-mode="spell"] .hero-dia,
  body[data-mode="speak"] .hero-dia,
  body[data-mode="game"] .hero-dia {
    width: 64px;
  }

  body[data-mode="map"] .companion-bubble,
  body[data-mode="unit"] .companion-bubble,
  body[data-mode="swipe"] .companion-bubble,
  body[data-mode="spell"] .companion-bubble,
  body[data-mode="speak"] .companion-bubble,
  body[data-mode="game"] .companion-bubble {
    width: 100%;
  }

  body[data-mode="map"] .hero-status,
  body[data-mode="unit"] .hero-status,
  body[data-mode="swipe"] .hero-status,
  body[data-mode="spell"] .hero-status,
  body[data-mode="speak"] .hero-status,
  body[data-mode="game"] .hero-status {
    display: none;
  }

  .toolbar {
    align-items: stretch;
  }

  .field,
  .ghost-button {
    min-width: 100%;
  }

  .study-area {
    padding: 12px;
  }

  .task-hero {
    grid-template-columns: 1fr;
  }

  .home-compact,
  .completion-hero,
  .completion-grid {
    grid-template-columns: 1fr;
  }

  .home-mini-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .home-mini-actions .ghost-button {
    min-width: 0;
  }

  .daily-report,
  .map-status,
  .unit-header,
  .report-grid,
  .build-scene {
    grid-template-columns: 1fr;
  }

  .build-scene {
    min-height: 0;
    padding: 18px;
  }

  .pagoda {
    width: min(196px, 72vw);
  }

  .brick-progress,
  .step-progress {
    grid-template-columns: repeat(8, 16px);
  }

  .arcadia-map-scene {
    grid-template-columns: 1fr;
  }

  .map-stage-wrap {
    min-height: 250px;
  }

  .starlit-gate {
    width: 156px;
  }

  .pixel-plaza {
    width: min(250px, 72vw);
  }

  .map-score,
  .unit-energy {
    width: 76px;
    justify-self: start;
  }

  .unit-path {
    padding: 12px;
  }

  .unit-path::before {
    left: 44px;
    right: auto;
  }

  .unit-node,
  .unit-node.right {
    justify-self: stretch;
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .unit-cube {
    width: 62px;
    border-radius: 14px;
    font-size: 1.55rem;
  }

  .unit-copy strong {
    font-size: 1.05rem;
  }

  .unit-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-hero-art {
    width: 128px;
    justify-self: start;
  }

  .swipe-stage {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .compact-swipe-stage {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .swipe-card {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 390px;
    padding: 18px;
  }

  .swipe-zone {
    grid-row: 2;
    min-height: 82px;
    border-radius: 16px;
  }

  .swipe-zone span {
    width: 32px;
    font-size: 1.1rem;
  }

  .swipe-card .word-visual {
    width: min(210px, 100%);
  }

  .swipe-card .visual-canvas {
    min-height: 104px;
  }

  .quest-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .highlight-shelf {
    grid-template-columns: 1fr;
  }

  .heatmap {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .companion-card,
  .boss-board {
    grid-template-columns: 1fr;
  }

  .companion-card .dia-avatar {
    width: 104px;
  }

  .card-actions,
  .option-grid,
  .stats-grid,
    .match-board,
    .mission-grid,
    .unit-word-wall,
    .settings-grid {
    grid-template-columns: 1fr;
  }

  .swipe-actions,
  .swipe-action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .swipe-action-button {
    min-height: 52px;
    padding: 9px 8px;
    font-size: 0.86rem;
  }

  .swipe-guide {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 64px;
  }

  .voice-state-steps,
  .report-mark-cards {
    grid-template-columns: 1fr;
  }

  .checkpoint-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .bar-row {
    grid-template-columns: 1fr;
  }

  .spell-row {
    flex-direction: column;
  }
}

/* Keep the home as a game map, not a full-screen poster. */
body[data-mode="home"] .hero {
  min-height: auto;
}

body[data-mode="home"] .study-area {
  margin-top: 14px;
}

@media (max-width: 920px) and (min-width: 721px) {
  .home-compact {
    grid-template-columns: 1fr;
  }

  .unit-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-compact {
    grid-template-columns: 1fr;
  }

  .home-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-map-preview {
    min-height: 520px;
  }

  .home-map-title {
    top: 16px;
    left: 14px;
    min-width: 0;
    width: calc(100% - 118px);
    padding: 12px;
  }

  .home-map-count {
    top: 16px;
    right: 14px;
    width: 78px;
    min-height: 96px;
  }

  .home-map-count strong {
    font-size: 2rem;
  }

  .home-streak {
    margin-right: 0;
  }

  .map-first-home.opening-active .home-streak {
    top: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .map-first-home.opening-active .home-map-preview {
    min-height: calc(100svh - 16px);
  }

  .map-first-home.opening-active .rpg-opening-panel.map-opening-scrim {
    inset: 8px;
  }

  .map-opening-close {
    top: 12px;
    right: 12px;
    min-height: 38px;
    font-size: 0.78rem;
  }

  .map-opening-dialogue {
    left: 14px;
    right: 14px;
    bottom: 74px;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  .map-opening-dia .dia-avatar {
    width: 92px;
  }

  .map-opening-card {
    padding: 12px;
  }

  .map-opening-card h2 {
    font-size: 1.18rem;
  }

  .map-opening-card p {
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .map-opening-card small {
    font-size: 0.72rem;
  }

  .streak-badge {
    padding: 7px 9px;
  }

  .streak-badge small {
    font-size: 0.68rem;
  }

  .streak-panel {
    grid-template-columns: 1fr;
  }

  .streak-panel-side {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
  }

  .streak-panel-side strong {
    grid-row: span 2;
    font-size: 2rem;
  }

  .streak-actions {
    grid-template-columns: 1fr;
  }

  .home-map-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-width: 190px;
    max-width: calc(100% - 28px);
    padding: 10px;
  }

  .home-map-card b {
    width: 48px;
  }

  .map-card-one {
    left: 14px;
    bottom: 47%;
  }

  .map-card-two {
    left: 22%;
    bottom: 29%;
  }

  .map-card-three {
    right: 14px;
    bottom: 13%;
  }

  .platform-one {
    left: 6%;
    bottom: 35%;
    width: 62%;
  }

  .platform-two {
    bottom: 18%;
    width: 70%;
  }

  .home-map-dia {
    right: 9%;
    bottom: 3%;
  }

  .mini-sun {
    right: 18px;
    top: 52px;
    transform: scale(0.78);
    transform-origin: right top;
  }

  .mini-cloud.one {
    left: 12px;
    top: 92px;
    transform: scale(0.54);
  }

  .mini-cloud.two {
    display: none;
  }

  .home-block-mountain::before,
  .block-mountain-stage::before {
    left: 5%;
    width: 42%;
    box-shadow:
      150px 42px 0 #5c8e74,
      150px 42px 0 4px var(--ink);
  }

  .unit-stage-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unit-stage-dots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .world-map-canvas {
    min-height: 420px;
    padding: 74px 12px 78px;
  }

  .world-map-canvas .map-sun {
    right: 18px;
    top: 72px;
    transform: scale(0.72);
    transform-origin: right top;
  }

  .cloud-a {
    left: 20px;
    top: 128px;
    transform: scale(0.52);
    transform-origin: left top;
  }

  .cloud-b {
    display: none;
  }

  .map-islands {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .map-island,
  .island-1,
  .island-2,
  .island-3,
  .island-4,
  .island-5,
  .island-6 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .map-route-line,
  .dia-map-marker {
    display: none;
  }

  .step-progress {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: repeat(8, 16px);
    width: max-content;
    max-width: calc(100% - 24px);
  }

  .academy-lattice {
    inset: 70px 14px 108px;
    background-size: 48px 100%, 100% 48px, auto;
    opacity: 0.58;
  }

  .academy-hotbar {
    gap: 6px;
    padding: 8px;
  }

  .academy-hotbar span {
    min-height: 38px;
    border-width: 3px;
  }

  .lantern-market-stage {
    min-height: 760px;
  }

  .market-moon-gate {
    left: -28px;
    bottom: 92px;
    width: 188px;
    height: 188px;
    border-width: 14px;
    opacity: 0.82;
  }

  .market-lantern {
    transform: scale(0.72);
    transform-origin: top center;
  }

  .lantern-one {
    left: 58%;
    top: 118px;
  }

  .lantern-two {
    right: 18px;
    top: 168px;
  }

  .market-block-bridge {
    height: 96px;
    background-size: 108px 54px;
  }

  .unit-steps::before {
    display: none;
  }

  .unit-steps .step-block:nth-child(even),
  .unit-steps .step-block:nth-child(even):active {
    transform: none;
  }

  .unit-cube {
    border-radius: 0;
  }
}

/* V4 home: the first screen is the Unit map itself. */
body[data-mode="home"] .app-shell {
  max-width: none;
  padding: 0;
  overflow: visible;
}

body[data-mode="home"] .hero {
  display: none;
}

body[data-mode="home"] .study-area {
  margin-top: 0;
  width: 100%;
}

.map-first-home {
  display: block;
  padding: 0;
  background: transparent;
}

.map-first-home .home-map-preview {
  overflow: hidden;
  min-height: min(760px, calc(100vh - 16px));
  background:
    linear-gradient(rgba(255, 255, 255, 0.18) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(180deg, #b9dfe5 0 44%, #d7eddc 44% 48%, transparent 48%),
    #fff9e9;
}

.map-first-home .home-map-preview::before {
  z-index: 3;
  left: 11%;
  right: 9%;
  top: auto;
  bottom: 42%;
  height: 12px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(45, 61, 52, 0.82) 10% 12%, transparent 12% 28%, rgba(45, 61, 52, 0.82) 28% 30%, transparent 30% 45%, rgba(45, 61, 52, 0.82) 45% 47%, transparent 47% 61%, rgba(45, 61, 52, 0.82) 61% 63%, transparent 63% 78%, rgba(45, 61, 52, 0.82) 78% 80%, transparent 80%),
    #6f8f54;
  transform: rotate(-3deg);
  opacity: 0.62;
}

.map-first-home .home-map-preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.16) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, transparent 0 44%, rgba(245, 210, 118, 0.42) 44% 56%, transparent 56%) 0 0 / 96px 96px,
    linear-gradient(180deg, #95b872 0 52%, #7ea66c 52% 100%);
}

.map-first-home .home-block-mountain {
  height: 48%;
  background:
    linear-gradient(135deg, transparent 0 24px, rgba(47, 122, 98, 0.16) 24px 48px, transparent 48px) 0 0 / 48px 48px,
    linear-gradient(180deg, transparent 0 24%, #d7eddc 24% 30%, transparent 30%),
    linear-gradient(180deg, transparent 0 55%, rgba(126, 166, 108, 0.72) 55% 100%);
}

.map-first-home .home-block-mountain::before {
  left: 7%;
  bottom: 36%;
  width: 36%;
  height: 34%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, transparent 0 44%, rgba(224, 169, 59, 0.34) 44% 56%, transparent 56%) 0 0 / 96px 96px,
    #8ea95b;
  box-shadow:
    34vw 9vh 0 #5c8e74,
    34vw 9vh 0 4px var(--ink),
    58vw 0 0 #9bbd83,
    58vw 0 0 4px var(--ink);
}

.home-map-card.current {
  border-color: var(--gold);
  background:
    linear-gradient(180deg, #fffdf5 0 62%, #fff7d8 100%);
  box-shadow:
    8px 8px 0 rgba(28, 38, 31, 0.2),
    0 0 0 8px rgba(224, 169, 59, 0.2),
    inset 0 0 0 4px rgba(224, 169, 59, 0.28);
}

.home-map-card.current::after {
  height: 10px;
  background: var(--gold);
}

.home-map-card.current small {
  border-color: rgba(40, 50, 59, 0.42);
  background: var(--gold);
  color: var(--ink);
}

.home-map-card.complete {
  border-color: var(--stone-green-dark);
  background:
    linear-gradient(180deg, #eef8f1 0 62%, #fffdf5 100%);
}

.home-map-card.complete::after {
  background: var(--stone-green);
}

.home-map-card.complete small {
  border-color: rgba(47, 122, 98, 0.48);
  background: #dcefd8;
  color: var(--stone-green-dark);
}

.home-map-card.waiting small {
  border-color: rgba(215, 162, 71, 0.62);
  background: #fff7d8;
  color: #8a6200;
}

.home-map-card.locked {
  background:
    linear-gradient(180deg, rgba(255, 253, 245, 0.96) 0 62%, rgba(238, 231, 213, 0.94) 100%);
}

.home-map-card.locked b {
  background: #2f7a62;
  opacity: 0.92;
}

.map-first-home .home-map-node {
  position: absolute;
  z-index: 4;
  width: clamp(260px, 26vw, 350px);
  height: clamp(168px, 17vw, 218px);
  pointer-events: none;
}

.map-first-home .home-map-node-current {
  z-index: 8;
}

.map-first-home .home-map-raft {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(88px, 10.5vw, 124px);
  border: 4px solid rgba(45, 61, 52, 0.9);
  background:
    linear-gradient(rgba(255, 255, 255, 0.16) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, transparent 0 44%, rgba(224, 169, 59, 0.42) 44% 56%, transparent 56%) 0 0 / 96px 96px,
    #4f855e;
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.18);
  pointer-events: none;
}

.map-first-home .home-map-raft::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -30px;
  height: 30px;
  border: 4px solid rgba(45, 61, 52, 0.9);
  border-top: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, #9db96f 0 32%, #d4bd7d 32% 52%, #8a5a38 52% 70%, #7ca46b 70% 100%);
}

.map-first-home .home-map-card {
  left: 18px;
  bottom: clamp(44px, 5.2vw, 58px);
  z-index: 2;
  width: min(292px, calc(100% - 36px));
  min-width: 0;
  transform: none;
  pointer-events: auto;
}

.map-first-home .home-map-platform {
  display: none;
  z-index: 2;
  border-color: rgba(45, 61, 52, 0.9);
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, transparent 0 44%, rgba(224, 169, 59, 0.38) 44% 56%, transparent 56%) 0 0 / 96px 96px,
    #4f855e;
}

.home-map-node-1 {
  left: 5%;
  bottom: 42%;
}

.home-map-node-2 {
  left: 34%;
  bottom: 28%;
}

.home-map-node-3 {
  right: 5%;
  bottom: 44%;
}

.home-map-node-4 {
  left: 13%;
  bottom: 14%;
}

.home-map-node-5 {
  left: 42%;
  bottom: 4%;
}

.home-map-node-6 {
  right: 8%;
  bottom: 18%;
}

.home-map-start {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 18px;
  width: min(520px, calc(100% - 48px));
  min-height: 64px;
  transform: translateX(-50%);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  pointer-events: auto;
}

.home-map-parent {
  position: absolute;
  z-index: 12;
  left: 20px;
  bottom: 20px;
  min-height: 48px;
  background: rgba(255, 249, 233, 0.94);
  pointer-events: auto;
}

.map-first-home .home-map-dia {
  position: absolute;
  z-index: 9;
  right: -42px;
  bottom: clamp(80px, 9vw, 112px);
  width: 108px;
  padding: 6px;
  border: 4px solid rgba(45, 61, 52, 0.88);
  background: rgba(255, 249, 233, 0.92);
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.16);
  pointer-events: none;
}

.map-first-home .home-map-dia .dia-avatar {
  width: 88px;
  border-radius: 16px;
}

.home-map-node-3 .home-map-dia,
.home-map-node-6 .home-map-dia {
  right: auto;
  left: -54px;
}

@media (max-width: 920px) {
  .map-first-home .home-map-preview {
    min-height: 980px;
  }

  .map-first-home .home-map-node {
    width: 260px;
    height: 156px;
  }

  .map-first-home .home-map-raft {
    height: 88px;
  }

  .map-first-home .home-map-card {
    left: 14px;
    bottom: 38px;
    width: calc(100% - 28px);
  }

  .home-map-node-1 {
    left: 14px;
    bottom: 70%;
  }

  .home-map-node-2 {
    left: auto;
    right: 12px;
    bottom: 57%;
  }

  .home-map-node-3 {
    left: 18px;
    right: auto;
    bottom: 44%;
  }

  .home-map-node-4 {
    left: auto;
    right: 18px;
    bottom: 31%;
  }

  .home-map-node-5 {
    left: 14px;
    bottom: 18%;
  }

  .home-map-node-6 {
    left: auto;
    right: 14px;
    bottom: 7%;
  }

  .home-map-parent {
    display: none;
  }

  .map-first-home .home-map-dia {
    right: -18px;
    bottom: 70px;
    width: 84px;
    padding: 4px;
  }

  .map-first-home .home-map-dia .dia-avatar {
    width: 68px;
  }

  .home-map-node-2 .home-map-dia,
  .home-map-node-4 .home-map-dia,
  .home-map-node-6 .home-map-dia {
    right: auto;
    left: -18px;
  }
}

/* If JS is late or unavailable, keep the child-facing hero visible instead of a blank map area. */
body[data-mode="home"]:not(.app-ready) .hero {
  display: grid;
  min-height: min(720px, calc(100vh - 16px));
}

body[data-mode="home"]:not(.app-ready) .study-area {
  display: none;
}

body[data-mode="home"]:not(.app-ready) .toolbar,
body[data-mode="home"]:not(.app-ready) .mode-tabs {
  display: none;
}

body.app-ready > .app-shell > .hero,
body.app-ready .toolbar,
body.app-ready .mode-tabs {
  display: none !important;
}

/* V77 official Dia loading: keep the glowing gourd, replace the rough coded monkey with official Dia art. */
.vector-loading-v76 {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 28%, rgba(255, 229, 154, 0.46), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(112, 159, 128, 0.24), transparent 30%),
    linear-gradient(180deg, #f5e9cf 0%, #efe0bf 52%, #d6b37c 100%);
  color: #392b20;
  padding: max(22px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom));
  transition: opacity 520ms ease, visibility 520ms ease;
}

body.app-ready .vector-loading-v76 {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body:not(.app-ready) > .app-shell {
  opacity: 0;
  pointer-events: none;
}

.loading-mist-v76 {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255, 250, 231, 0.36) 22% 24%, transparent 24% 42%, rgba(255, 250, 231, 0.26) 42% 44%, transparent 44%),
    radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.38), transparent 18%);
  opacity: 0.7;
  animation: loadingMistDriftV76 8s ease-in-out infinite alternate;
}

.loading-orbit-v76 {
  position: absolute;
  width: min(78vw, 420px);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(138, 91, 42, 0.12);
  animation: loadingOrbitTurnV76 7s linear infinite;
}

.loading-orbit-v76 span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fff7bb;
  box-shadow: 0 0 18px rgba(255, 232, 115, 0.78);
}

.loading-orbit-v76 span:nth-child(1) {
  top: 10%;
  left: 48%;
}

.loading-orbit-v76 span:nth-child(2) {
  right: 8%;
  top: 58%;
}

.loading-orbit-v76 span:nth-child(3) {
  left: 12%;
  bottom: 18%;
}

.loading-art-v76 {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(78vw, 380px);
  min-height: min(54vh, 420px);
  place-items: center;
  margin-top: -8vh;
}

.loading-hulu-svg {
  position: absolute;
  width: min(42vw, 176px);
  transform: translate(38px, 36px) rotate(-8deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 20px 28px rgba(95, 54, 21, 0.26));
  animation: huluBreathV76 2.4s ease-in-out infinite;
}

.loading-dia-crop-v77 {
  position: relative;
  width: min(62vw, 268px);
  height: min(50vw, 218px);
  transform-origin: 50% 78%;
  filter: drop-shadow(0 22px 28px rgba(72, 43, 19, 0.22));
  animation: officialDiaFloatV77 2.8s ease-in-out infinite;
}

.loading-dia-crop-v77::before {
  content: "";
  position: absolute;
  inset: 9% 7% 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 248, 204, 0.94), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 227, 129, 0.38), transparent 70%);
  filter: blur(2px);
}

.loading-dia-official-v77 {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 38px;
  background-image: url("./assets/dia-expressions.webp");
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: 0 0;
  transform: translateZ(0);
}

.loading-dia-wing-v77 {
  position: absolute;
  top: 38%;
  z-index: -1;
  width: 42%;
  height: 34%;
  border: 2px solid rgba(120, 173, 186, 0.44);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(190, 229, 237, 0.36)),
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(120, 173, 186, 0.24) 10px 12px);
  filter: drop-shadow(0 10px 16px rgba(80, 116, 126, 0.16));
  animation: diaWingBreathV77 2.6s ease-in-out infinite;
}

.loading-dia-wing-left-v77 {
  left: -13%;
  border-radius: 80% 24% 76% 28%;
  transform: rotate(-16deg);
}

.loading-dia-wing-right-v77 {
  right: -13%;
  border-radius: 24% 80% 28% 76%;
  transform: rotate(16deg);
}

.vector-hulu-v76 {
  overflow: visible;
}

.loading-copy-v76 {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 54px));
  left: 20px;
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid rgba(116, 83, 48, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 54%),
    rgba(255, 249, 232, 0.9);
  box-shadow: 0 18px 46px rgba(86, 54, 24, 0.18);
  padding: 18px 20px;
  text-align: left;
  backdrop-filter: blur(12px);
}

.loading-kicker-v76 {
  margin: 0;
  color: #4f8d74;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loading-copy-v76 h1 {
  margin: 0;
  color: #2f251c;
  font-size: clamp(1.45rem, 6vw, 2.25rem);
  font-weight: 950;
  line-height: 1.08;
}

.loading-copy-v76 p {
  margin: 0;
  color: rgba(55, 42, 31, 0.82);
  font-size: clamp(0.95rem, 3.4vw, 1.08rem);
  font-weight: 800;
  line-height: 1.56;
}

.loading-copy-v76 .loading-copy-en-v76 {
  color: rgba(77, 94, 84, 0.72);
  font-size: clamp(0.78rem, 2.8vw, 0.9rem);
  font-weight: 850;
  line-height: 1.42;
}

.loading-progress-v76 {
  position: absolute;
  right: 26px;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 26px;
  z-index: 4;
  overflow: hidden;
  max-width: 420px;
  height: 8px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(101, 74, 42, 0.16);
}

.loading-progress-v76 span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #66a985, #f0bd55, #fff2a8);
  animation: loadingProgressV76 1.4s ease-in-out infinite;
}

@keyframes officialDiaFloatV77 {
  0%,
  100% {
    transform: translateY(0) rotate(-0.8deg) scale(1);
  }
  50% {
    transform: translateY(-12px) rotate(1.1deg) scale(1.015);
  }
}

@keyframes diaWingBreathV77 {
  0%,
  100% {
    opacity: 0.72;
    scale: 1;
  }
  50% {
    opacity: 0.98;
    scale: 1.04;
  }
}

@keyframes huluBreathV76 {
  0%,
  100% {
    transform: translate(38px, 36px) rotate(-8deg) scale(1);
    filter: drop-shadow(0 20px 28px rgba(95, 54, 21, 0.26));
  }
  50% {
    transform: translate(42px, 28px) rotate(-3deg) scale(1.05);
    filter: drop-shadow(0 0 28px rgba(242, 190, 69, 0.55));
  }
}

@keyframes loadingOrbitTurnV76 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loadingMistDriftV76 {
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.04);
  }
}

@keyframes loadingProgressV76 {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(240%);
  }
}

@media (min-width: 760px) {
  .loading-art-v76 {
    margin-top: -10vh;
  }

  .loading-copy-v76 {
    bottom: 88px;
  }
}

/* V54: one-screen route shell. Keep the approved map art, unify navigation after entry. */
.global-nav {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(720px, 100%);
  margin: 0 auto 12px;
  padding: 6px;
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.94);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  clip-path: var(--step-corner);
}

.global-nav button {
  min-height: 44px;
  border: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  font: 800 0.92rem/1 var(--body-font);
  cursor: pointer;
}

.global-nav button.active {
  border-color: var(--ink);
  background: #dcefd8;
  box-shadow: inset 0 -4px 0 rgba(47, 122, 98, 0.18);
  color: var(--stone-green-dark);
}

.map-first-home {
  position: relative;
  min-height: 100svh;
  padding: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.map-first-home.opening-active {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.map-first-home.opening-active .home-map-preview {
  grid-column: 1 / -1;
  min-height: min(820px, calc(100svh - 16px));
  filter: grayscale(0.55) sepia(0.16) brightness(0.58);
}

.map-first-home.opening-active .rpg-opening-panel.map-opening-scrim {
  position: absolute;
  inset: 8px;
  z-index: 90;
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  border: var(--pixel-border);
  background:
    radial-gradient(circle at 28% 78%, rgba(242, 190, 69, 0.2), transparent 22%),
    linear-gradient(180deg, rgba(18, 17, 14, 0.42), rgba(18, 17, 14, 0.74));
  box-shadow: inset 0 0 0 8px rgba(255, 249, 233, 0.08);
  cursor: pointer;
  overflow: hidden;
  clip-path: var(--step-corner);
}

.map-first-home.opening-active .rpg-opening-panel.map-opening-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 249, 233, 0.08) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 249, 233, 0.06) 2px, transparent 2px) 0 0 / 32px 32px;
  opacity: 0.5;
  pointer-events: none;
}

.map-opening-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  min-height: 42px;
  border: 3px solid rgba(255, 249, 233, 0.72);
  background: rgba(255, 249, 233, 0.14);
  color: #fff9e9;
  font-weight: 950;
  cursor: pointer;
}

.map-opening-dialogue {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 7vw, 92px);
  right: clamp(18px, 8vw, 112px);
  bottom: clamp(74px, 10vh, 118px);
  display: grid;
  grid-template-columns: clamp(118px, 14vw, 178px) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  outline: none;
}

.map-opening-dia {
  align-self: end;
  display: grid;
  place-items: center;
}

.map-opening-dia .dia-avatar {
  width: clamp(112px, 13vw, 166px);
  border-radius: 18px;
  filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, 0.24));
  animation: diaPop 1.1s steps(3, end) infinite;
}

.map-opening-card {
  position: relative;
  display: grid;
  gap: 8px;
  max-width: 640px;
  border: 4px solid rgba(75, 58, 42, 0.9);
  background: rgba(255, 249, 233, 0.96);
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.24),
    inset 0 0 0 4px rgba(255, 255, 255, 0.42);
  padding: clamp(14px, 2vw, 22px);
  color: var(--ink);
  clip-path: var(--step-corner);
}

.map-opening-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--gold);
  animation: rpgArrowBlink 0.9s steps(2, end) infinite;
}

.map-opening-card h2 {
  margin: 0;
  color: #6f4c26;
  font-family: var(--pixel-font);
  font-size: clamp(1.35rem, 3.3vw, 2.15rem);
}

.map-opening-card p,
.map-opening-card small {
  margin: 0;
  color: #4f493f;
  font-weight: 900;
  line-height: 1.65;
}

.map-opening-card small {
  padding-right: 36px;
  color: #7b6242;
}

.map-first-home.map-ready {
  grid-template-columns: minmax(0, 1fr);
}

.map-first-home.map-ready .global-nav,
.map-first-home.map-ready .province-opening-panel,
.map-first-home.map-ready .home-map-preview {
  grid-column: 1 / -1;
}

.map-first-home .home-map-preview {
  min-height: min(820px, calc(100svh - 84px));
}

.streak-badge {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: var(--block-shadow);
  padding: 8px 12px;
  color: var(--ink);
  clip-path: var(--step-corner);
}

.streak-badge strong {
  font-family: var(--pixel-font);
  font-size: 0.95rem;
  line-height: 1.1;
}

.streak-badge small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
}

.streak-badge.is-done {
  background: #fff0c2;
}

.streak-flame {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  background: #f8d36c;
  box-shadow: 3px 3px 0 rgba(40, 50, 59, 0.16);
  font-size: 1rem;
}

.streak-flame.big {
  width: 58px;
  height: 58px;
  font-size: 1.9rem;
}

.streak-flame.burst {
  position: absolute;
  top: -18px;
  right: 20px;
  width: 54px;
  height: 54px;
  font-size: 1.8rem;
  animation: streakPop 0.9s steps(4, end) infinite;
}

.home-streak {
  justify-self: end;
  z-index: 30;
  margin: 0 8px -4px 0;
}

.map-first-home.opening-active .home-streak {
  position: absolute;
  top: 16px;
  right: 16px;
}

.app-map,
.unit-world,
.vocab-library,
.admin-console {
  max-width: 1180px;
  margin-inline: auto;
}

.vocab-library {
  display: grid;
  gap: 16px;
  padding: 10px;
}

.library-header,
.library-unit-card {
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.95);
  box-shadow: var(--block-shadow);
  clip-path: var(--step-corner);
}

.library-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
}

.library-header h2 {
  margin: 6px 0;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.library-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.library-unit-card {
  padding: 14px;
}

.library-unit-title {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px 14px;
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 3px solid var(--ink);
  background: #fffdf5;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.library-unit-title b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--stone-green);
  color: #fffdf5;
  font-family: var(--pixel-font);
  font-size: 1.4rem;
}

.library-unit-title span {
  align-self: end;
  font-weight: 900;
  font-size: 1.15rem;
}

.library-unit-title small {
  color: var(--muted);
  font-weight: 800;
}

.library-word-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.course-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.course-back,
.course-map-link {
  min-height: 44px;
  padding: 0 14px;
  border: 3px solid var(--ink);
  background: #fff9e9;
  color: var(--ink);
  font-weight: 900;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  cursor: pointer;
}

.course-progress-wrap {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.course-stage-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-mode="intro"] .lesson-screen,
body[data-mode="swipe"] .lesson-screen,
body[data-mode="checkpoint"] .lesson-screen,
body[data-mode="report"] .lesson-screen {
  position: relative;
  height: calc(100svh - 16px);
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px 92px;
}

body[data-mode="meaning"] .practice-frame,
body[data-mode="spell"] .practice-frame,
body[data-mode="speak"] .practice-frame,
body[data-mode="game"] .practice-frame {
  height: calc(100svh - 16px);
  min-height: 0;
  overflow: hidden;
}

.practice-frame {
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
}

.practice-brief {
  align-self: stretch;
  min-height: 0;
  overflow: auto;
}

.practice-frame .practice-room.lesson-screen,
.practice-frame .practice-room.story-quest,
.practice-frame .practice-room.center-panel,
.practice-frame .practice-room.boss-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 88px;
}

.practice-frame .practice-room .course-top {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 10px;
  background: rgba(255, 249, 233, 0.95);
}

.lesson-screen > .bottom-cta,
.practice-frame .practice-room .bottom-cta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  margin: 0;
}

.practice-frame .practice-room .academy-hotbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  margin: 0;
}

.practice-frame .practice-room .bottom-cta + .academy-hotbar {
  display: none;
}

.practice-game .practice-room {
  min-height: 0;
}

.report-screen {
  display: grid;
  gap: 12px;
  align-content: start;
}

.report-screen .daily-report {
  max-height: 34vh;
  overflow: auto;
}

.streak-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.28fr);
  gap: 12px;
  align-items: stretch;
  width: min(760px, 100%);
  margin: 0 auto;
  border: var(--pixel-border);
  background: #fff9e9;
  box-shadow: var(--block-shadow);
  padding: 14px;
  clip-path: var(--step-corner);
}

.streak-panel-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.streak-panel h3 {
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
}

.streak-panel p,
.streak-panel small {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.55;
}

.streak-panel-side {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 3px solid var(--ink);
  background: #dcefd8;
  padding: 10px;
  text-align: center;
}

.streak-panel-side strong {
  color: var(--stone-green-dark);
  font-family: var(--pixel-font);
  font-size: 2.4rem;
  line-height: 1;
}

.streak-panel-side span {
  color: var(--stone-green-dark);
  font-weight: 950;
}

.streak-panel-side small {
  max-width: 170px;
  font-size: 0.76rem;
}

.streak-celebration {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(28, 38, 31, 0.42);
}

.streak-celebration-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(420px, 100%);
  border: var(--pixel-border);
  background: #fffdf5;
  box-shadow: 10px 10px 0 rgba(28, 38, 31, 0.24);
  padding: 24px 18px 18px;
  text-align: center;
  clip-path: var(--step-corner);
}

.streak-celebration-card .dia-avatar {
  width: 118px;
  animation: diaPop 0.72s steps(4, end) infinite;
}

.streak-celebration-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 6vw, 2.3rem);
}

.streak-celebration-card p,
.streak-celebration-card small {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.65;
}

.streak-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

@keyframes streakPop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.08);
  }
}

.learning-summary,
.wrongbook-panel {
  display: grid;
  gap: 12px;
  border: var(--pixel-border);
  background: rgba(255, 253, 245, 0.96);
  box-shadow: var(--block-shadow);
  padding: 14px;
  clip-path: var(--step-corner);
}

.summary-title,
.wrongbook-head {
  display: grid;
  gap: 4px;
}

.summary-title h3,
.wrongbook-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
}

.summary-title p,
.wrongbook-head p,
.wrongbook-today p,
.wrongbook-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.5;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.summary-stats article {
  border: 3px solid var(--ink);
  background: #dcefd8;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  padding: 10px;
}

.summary-stats strong {
  display: block;
  color: var(--brand-dark);
  font-family: var(--pixel-font);
  font-size: clamp(1.4rem, 4vw, 2rem);
}

.summary-stats span {
  color: var(--ink);
  font-weight: 950;
}

.wrongbook-today {
  border: 3px solid var(--ink);
  background: #fff4cf;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.12);
  padding: 10px 12px;
}

.wrongbook-today strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.wrongbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.wrongbook-card {
  display: grid;
  gap: 8px;
  border: 3px solid var(--ink);
  background: #fff9e9;
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.14);
  padding: 10px;
  clip-path: var(--step-corner);
}

.wrongbook-card.new {
  background: #ffe9dc;
  border-color: var(--cinnabar);
}

.wrongbook-card.empty {
  background: #eef4df;
}

.wrongbook-title {
  display: grid;
  gap: 2px;
}

.wrongbook-title strong {
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 1.35rem;
}

.wrongbook-title span {
  color: var(--muted);
  font-weight: 900;
}

.mistake-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mistake-chips span {
  border: 2px solid var(--ink);
  background: rgba(255, 253, 245, 0.92);
  color: var(--brand-dark);
  font-size: 0.78rem;
  font-weight: 950;
  padding: 4px 6px;
}

.parent-wrongbook-block .wrongbook-panel {
  box-shadow: none;
}

.practice-mixed .mixed-practice {
  display: grid;
  gap: 12px;
  align-content: start;
}

.mixed-brief h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.mixed-question-head {
  display: grid;
  gap: 6px;
  width: min(100%, 760px);
  margin: 0 auto;
  border: var(--pixel-border);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 12px 16px;
}

.mixed-question-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.mixed-question-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

.mixed-card,
.mixed-next-step,
.mixed-feedback,
.mixed-dia-feedback {
  width: min(100%, 760px);
  margin-left: auto;
  margin-right: auto;
}

.mixed-next-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  border: var(--pixel-border);
  background: rgba(219, 239, 216, 0.98);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.14);
  padding: 10px 12px;
  clip-path: var(--step-corner);
}

.mixed-next-step span {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  border: 2px solid var(--ink);
  background: rgba(255, 253, 245, 0.96);
  color: var(--brand-dark);
  font-weight: 950;
  padding: 4px 10px;
}

.mixed-next-step strong {
  color: var(--ink);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.35;
}

.mixed-next-step.active {
  background: rgba(255, 245, 204, 0.98);
}

.mixed-next-step.done {
  background: rgba(210, 236, 219, 0.98);
  border-color: var(--brand-dark);
}

.mixed-card {
  display: grid;
  gap: 14px;
  border: var(--pixel-border);
  background: rgba(255, 253, 245, 0.96);
  box-shadow: var(--block-shadow);
  padding: 16px;
  clip-path: var(--step-corner);
}

.mixed-audio-bar,
.mixed-judge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* V58: child-facing flow cleanup. The task pages should show one action surface,
   not the legacy shell plus an adult explanation panel. */
body[data-mode="swipe"] .lesson-screen.swipe-layout {
  display: grid;
  height: calc(100svh - 16px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 8px;
  overflow: hidden;
  padding: 10px 12px 14px;
}

body[data-mode="swipe"] .swipe-round-note {
  display: grid;
  gap: 2px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 8px 12px;
}

body[data-mode="swipe"] .swipe-round-note strong {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

body[data-mode="swipe"] .swipe-round-note span {
  font-size: 0.85rem;
}

body[data-mode="swipe"] .compact-swipe-stage {
  min-height: 0;
  align-self: stretch;
}

body[data-mode="swipe"] .swipe-card {
  height: 100%;
  min-height: 0;
  max-height: 410px;
  gap: 6px;
  padding: 10px 14px;
}

body[data-mode="swipe"] .swipe-card .word-visual {
  width: min(168px, 40vw);
}

body[data-mode="swipe"] .swipe-card .visual-canvas {
  min-height: 84px;
}

body[data-mode="swipe"] .swipe-card h2 {
  font-size: clamp(2.35rem, 8vw, 4.4rem);
}

body[data-mode="swipe"] .swipe-card small {
  display: -webkit-box;
  max-height: 2.9em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-mode="swipe"] .swipe-guide {
  display: none;
}

body[data-mode="swipe"] .swipe-action-buttons {
  width: min(100%, 620px);
  margin: 0 auto;
}

body[data-mode="swipe"] .swipe-action-button {
  min-height: 58px;
  padding: 10px 14px;
}

body[data-mode="practice"] .practice-frame.practice-mixed {
  display: block;
  height: calc(100svh - 16px);
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px;
}

body[data-mode="practice"] .mixed-brief {
  display: none;
}

body[data-mode="practice"] .practice-room.lesson-screen.mixed-practice {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 88px;
}

body[data-mode="practice"] .mixed-question-head {
  gap: 4px;
  padding: 10px 12px;
}

body[data-mode="practice"] .mixed-question-head p {
  font-size: 0.9rem;
}

body[data-mode="practice"] .mixed-card {
  gap: 10px;
  padding: 12px;
}

body[data-mode="practice"] .mixed-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-mode="practice"] .mixed-image-option .visual-canvas {
  min-height: 92px;
}

@media (min-width: 760px) {
  body[data-mode="practice"] .mixed-image-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.word-audio-text,
.mixed-big-word {
  font-family: var(--pixel-font);
}

.spell-audio-only {
  align-items: center;
  justify-content: center;
}

.spell-audio-only .secondary {
  min-width: min(260px, 100%);
}

.meaning-only,
.spell-meaning-only {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 3px solid rgba(31, 61, 49, 0.26);
  background: #f6f1df;
  padding: 8px 12px;
  color: var(--muted);
  font-weight: 900;
}

.mixed-big-word {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  min-height: 64px;
  border: var(--pixel-border);
  background: #dcefd8;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 8px 18px;
  color: var(--brand-dark);
  font-size: clamp(1.8rem, 5vw, 3rem);
}

button.mixed-big-word {
  cursor: pointer;
}

.mixed-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mixed-image-option,
.mixed-text-option,
.mixed-match-column button,
.mixed-letter-slots button {
  border: 3px solid var(--ink);
  background: #fff9e9;
  color: var(--ink);
  box-shadow: 5px 5px 0 rgba(28, 38, 31, 0.16);
  cursor: pointer;
}

.mixed-image-option {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  text-align: center;
}

.mixed-image-option .word-visual {
  width: 100%;
  margin: 0;
}

.mixed-image-option .visual-canvas {
  min-height: 116px;
}

.mixed-image-option span {
  overflow: hidden;
  font-family: var(--pixel-font);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mixed-word-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mixed-text-option {
  min-height: 62px;
  padding: 10px 12px;
  font-size: 1.05rem;
  font-weight: 950;
  text-align: left;
}

.mixed-sentence {
  border: var(--pixel-border);
  background: #fff7d8;
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 16px;
  color: var(--ink);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.mixed-letter-slots,
.mixed-letter-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mixed-letter-slots button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-family: var(--pixel-font);
  font-size: 1.35rem;
  font-weight: 950;
}

.mixed-letter-slots .missing {
  border-style: dashed;
  color: var(--muted);
}

.mixed-letter-slots .fixed {
  background: #dcefd8;
  color: var(--brand-dark);
}

.mixed-letter-slots .fixed.hint {
  background: #fff2bd;
  border-color: var(--practice);
  color: #7a4d00;
}

.spell-hint-panel {
  text-align: center;
}

#practiceHint[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.mixed-letter-bank .letter-tile {
  min-width: 48px;
}

.mixed-voice-card {
  justify-items: center;
  text-align: center;
}

.mixed-voice-card .word-visual {
  width: min(260px, 100%);
}

.mixed-judge-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.mixed-judge-card .word-visual {
  width: 100%;
  margin: 0;
}

.mixed-match-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mixed-match-column {
  display: grid;
  gap: 10px;
}

.mixed-match-column button {
  min-height: 54px;
  padding: 10px 12px;
  font-weight: 950;
  text-align: left;
}

.mixed-match-column button.selected {
  background: #ffe5ef;
  border-color: #b34869;
}

.mixed-match-column button.paired {
  background: #dcefd8;
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}

.mixed-feedback {
  min-height: 44px;
}

.mixed-dia-feedback {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 88px;
  border: var(--pixel-border);
  background: rgba(255, 253, 245, 0.96);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.14);
  padding: 10px 12px;
  clip-path: var(--step-corner);
}

.mixed-dia-feedback .dia-avatar {
  width: 72px;
  border-width: 3px;
  border-radius: 18px;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.12);
}

.mixed-dia-feedback.is-correct {
  border-color: var(--brand-dark);
  background:
    repeating-linear-gradient(90deg, rgba(47, 122, 98, 0.08) 0 12px, transparent 12px 24px),
    #f5fbf0;
}

.mixed-dia-feedback.is-wrong {
  border-color: #d7a247;
  background:
    repeating-linear-gradient(135deg, rgba(230, 184, 77, 0.12) 0 12px, transparent 12px 24px),
    #fff8df;
}

.mixed-dia-bubble {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mixed-dia-bubble strong {
  color: var(--brand-dark);
  font-family: var(--pixel-font);
  font-size: 0.78rem;
}

.mixed-dia-bubble p {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.45;
}

.correct-answer-chip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-self: start;
  border: 3px solid var(--brand-dark);
  background: #dcefd8;
  padding: 5px 8px;
  color: var(--brand-dark);
}

.correct-answer-chip b {
  font-family: var(--pixel-font);
  color: var(--brand-dark);
  letter-spacing: 0.02em;
}

.correct-answer-chip span {
  color: var(--muted);
}

.dia-reaction-pop {
  position: absolute;
  right: clamp(14px, 4vw, 42px);
  bottom: clamp(82px, 13vh, 138px);
  z-index: 18;
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
  animation: dia-reaction-fade 1.75s ease-out forwards;
}

.dia-reaction-pop .dia-avatar {
  width: 104px;
  border-radius: 24px;
  filter: drop-shadow(0 12px 0 rgba(40, 50, 59, 0.14));
}

.dia-reaction-pop strong {
  border: 3px solid var(--ink);
  background: #fff9e9;
  box-shadow: 4px 4px 0 rgba(28, 38, 31, 0.14);
  padding: 5px 8px;
  color: var(--brand-dark);
  font-family: var(--pixel-font);
  font-size: 0.72rem;
}

.dia-reaction-correct .dia-avatar {
  animation: dia-pop-cheer 0.72s steps(4, end) both;
}

.dia-reaction-wrong .dia-avatar {
  animation: dia-pop-comfort 0.9s steps(4, end) both;
}

@keyframes dia-pop-cheer {
  0% {
    transform: translate(24px, 20px) scale(0.78);
  }
  45% {
    transform: translate(-4px, -18px) scale(1.08);
  }
  70% {
    transform: translate(0, -8px) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes dia-pop-comfort {
  0% {
    transform: translate(20px, 12px) scale(0.82) rotate(0deg);
  }
  45% {
    transform: translate(0, 0) scale(1) rotate(-3deg);
  }
  72% {
    transform: translate(0, 6px) scale(0.98) rotate(2deg);
  }
  100% {
    transform: translate(0, 4px) scale(1) rotate(0deg);
  }
}

@keyframes dia-reaction-fade {
  0% {
    opacity: 0;
  }
  12%,
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .mixed-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mixed-next-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mixed-next-step span {
    justify-self: start;
  }

  .mixed-dia-feedback {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 8px;
  }

  .mixed-dia-feedback .dia-avatar {
    width: 60px;
    border-radius: 16px;
  }

  .dia-reaction-pop {
    right: 16px;
    bottom: 104px;
  }

  .dia-reaction-pop .dia-avatar {
    width: 82px;
  }

  .mixed-word-options,
  .mixed-match-board,
  .mixed-judge-card {
    grid-template-columns: 1fr;
  }

  .mixed-image-option .visual-canvas {
    min-height: 96px;
  }
}

@media (max-width: 920px) {
  .library-unit-grid {
    grid-template-columns: 1fr;
  }

  .library-header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .global-nav {
    width: 100%;
    gap: 4px;
    margin-bottom: 8px;
  }

  .global-nav button {
    min-height: 40px;
    font-size: 0.82rem;
  }

  .map-first-home .home-map-preview {
    min-height: max(560px, calc(100svh - 72px));
  }

  .practice-frame {
    grid-template-columns: 1fr;
  }

  .practice-brief {
    display: none;
  }

  .course-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .course-back,
  .course-map-link {
    min-height: 40px;
    padding: 0 8px;
    font-size: 0.78rem;
  }

  .course-stage-label {
    font-size: 0.72rem;
  }

  .home-streak {
    margin-right: 0;
  }

  .map-first-home.opening-active .home-streak {
    top: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .streak-badge {
    padding: 7px 9px;
  }

  .streak-badge small {
    font-size: 0.68rem;
  }

  .streak-panel {
    grid-template-columns: 1fr;
  }

  .streak-panel-side {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
  }

  .streak-panel-side strong {
    grid-row: span 2;
    font-size: 2rem;
  }

  .streak-actions {
    grid-template-columns: 1fr;
  }
}

/* V73 UI system refresh: make the first screen and practice loop feel like one game scene. */
body {
  background:
    linear-gradient(rgba(39, 55, 45, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 55, 45, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 16% 8%, rgba(94, 154, 143, 0.22), transparent 32rem),
    radial-gradient(circle at 86% 2%, rgba(224, 169, 59, 0.2), transparent 28rem),
    #efe8d4;
  background-size: 16px 16px, 16px 16px, auto, auto, auto;
}

.ui-refresh-v73.map-first-home {
  padding: 0;
  background: #1f2c25;
}

.ui-refresh-v73 .global-nav {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 40;
  width: min(560px, calc(100% - 28px));
  transform: translateX(-50%);
  border: 4px solid rgba(28, 38, 31, 0.92);
  background: rgba(255, 249, 233, 0.88);
  backdrop-filter: blur(6px);
}

.ui-refresh-v73 .home-streak,
.ui-refresh-v73 .streak-badge {
  position: absolute;
  z-index: 41;
  top: 16px;
  right: 18px;
}

.ui-refresh-v73 .home-map-preview.ui-map-v73 {
  position: relative;
  min-height: 100svh;
  border: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px) 0 0 / 48px 48px,
    radial-gradient(ellipse at 88% 18%, rgba(255, 220, 111, 0.82) 0 4%, rgba(255, 220, 111, 0.18) 4% 10%, transparent 12%),
    linear-gradient(180deg, #bfe4e4 0 39%, #d7eed4 39% 47%, #87ab6b 47% 72%, #c5a66a 72% 100%);
  box-shadow: none;
  clip-path: none;
  overflow: hidden;
}

.ui-refresh-v73 .home-map-preview.ui-map-v73::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 32px, transparent 32px 88px),
    linear-gradient(135deg, rgba(69, 122, 88, 0.85) 0 28%, rgba(142, 170, 90, 0.8) 28% 42%, rgba(69, 122, 88, 0.84) 42% 100%);
  border-top: 8px solid rgba(238, 250, 228, 0.76);
  transform: skewY(-1.5deg);
  transform-origin: left top;
}

.ui-refresh-v73 .home-map-preview.ui-map-v73::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background:
    repeating-linear-gradient(90deg, rgba(99, 64, 39, 0.36) 0 26px, rgba(222, 191, 123, 0.52) 26px 68px, rgba(84, 121, 82, 0.4) 68px 110px),
    linear-gradient(180deg, rgba(79, 122, 88, 0.38), rgba(118, 86, 51, 0.5));
}

.ui-refresh-v73 .home-map-title {
  top: clamp(24px, 6vh, 56px);
  left: clamp(18px, 4vw, 56px);
  max-width: min(520px, calc(100% - 160px));
  border: 6px solid rgba(28, 38, 31, 0.95);
  background: rgba(255, 249, 233, 0.94);
  box-shadow: 12px 12px 0 rgba(28, 38, 31, 0.22);
}

.ui-refresh-v73 .home-map-title strong {
  color: #10291f;
  font-size: clamp(1.2rem, 2.6vw, 2.05rem);
}

.ui-refresh-v73 .home-map-title span {
  color: #5d6a5d;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

.ui-refresh-v73 .home-map-count {
  top: clamp(24px, 6vh, 54px);
  right: clamp(18px, 4vw, 58px);
  border: 6px solid rgba(28, 38, 31, 0.95);
  background: #dff2cf;
  box-shadow: 12px 12px 0 rgba(28, 38, 31, 0.2);
}

.home-map-route {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.route-line {
  position: absolute;
  height: 12px;
  border: 4px solid rgba(27, 52, 40, 0.92);
  background: repeating-linear-gradient(90deg, #f5d37a 0 28px, #cf9d3b 28px 56px);
  box-shadow: 6px 6px 0 rgba(28, 38, 31, 0.18);
  transform-origin: left center;
}

.route-line-1 {
  left: 18%;
  bottom: 48%;
  width: 23%;
  transform: rotate(13deg);
}

.route-line-2 {
  left: 40%;
  bottom: 38%;
  width: 24%;
  transform: rotate(-12deg);
}

.route-line-3 {
  left: 61%;
  bottom: 45%;
  width: 19%;
  transform: rotate(12deg);
}

.route-line-4 {
  left: 25%;
  bottom: 24%;
  width: 24%;
  transform: rotate(-8deg);
}

.route-line-5 {
  left: 48%;
  bottom: 18%;
  width: 30%;
  transform: rotate(10deg);
}

.ui-refresh-v73 .home-map-node {
  z-index: 6;
  width: clamp(220px, 22vw, 336px);
  height: clamp(132px, 14vw, 196px);
}

.ui-refresh-v73 .home-map-raft {
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  border: 6px solid rgba(28, 38, 31, 0.92);
  background:
    linear-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(135deg, rgba(219, 211, 127, 0.8) 0 38%, rgba(79, 133, 94, 0.92) 38% 100%);
  box-shadow: 12px 12px 0 rgba(28, 38, 31, 0.18);
}

.ui-refresh-v73 .home-map-card {
  display: grid;
  grid-template-columns: 54px 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  left: 18px;
  bottom: clamp(42px, 5vw, 62px);
  width: calc(100% - 36px);
  min-height: 104px;
  border: 6px solid rgba(28, 38, 31, 0.95);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 54%),
    #fff9e9;
  box-shadow: 10px 10px 0 rgba(28, 38, 31, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ui-refresh-v73 .home-map-card:hover,
.ui-refresh-v73 .home-map-card:focus-visible {
  transform: translate(-2px, -5px);
  box-shadow: 14px 16px 0 rgba(28, 38, 31, 0.22);
  outline: none;
}

.ui-refresh-v73 .home-map-card b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 5px solid rgba(28, 38, 31, 0.92);
  background: #2f7a62;
  color: #fff9e9;
  font-size: 1.5rem;
}

.home-map-landmark {
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 3px solid rgba(28, 38, 31, 0.22);
  background: rgba(220, 239, 216, 0.68);
  padding: 4px;
}

.ui-refresh-v73 .home-map-card span {
  color: #16251c;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.ui-refresh-v73 .home-map-card small {
  color: #65705f;
  font-size: 0.86rem;
}

.ui-refresh-v73 .home-map-card.current {
  border-color: #132a21;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 54%),
    #fff4c6;
  animation: v73CurrentGlow 1.2s steps(2, end) infinite;
}

.ui-refresh-v73 .home-map-dia {
  width: clamp(88px, 8vw, 124px);
  right: -48px;
  bottom: clamp(92px, 10vw, 130px);
  border: 5px solid rgba(28, 38, 31, 0.94);
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 10px 10px 0 rgba(28, 38, 31, 0.22);
}

.ui-refresh-v73 .home-map-start {
  bottom: clamp(18px, 3vh, 36px);
  border-width: 5px;
  background: linear-gradient(180deg, #fff1a6, #e0a93b);
  color: #1c261f;
  box-shadow: 0 8px 0 #9b6d20, 12px 14px 0 rgba(28, 38, 31, 0.22);
}

.ui-refresh-v73 .home-map-parent {
  bottom: clamp(18px, 3vh, 36px);
  border-width: 4px;
}

.ui-refresh-v73 .map-opening-card {
  max-width: min(680px, 100%);
  border-width: 5px;
  background:
    radial-gradient(circle at 8% 12%, rgba(224, 169, 59, 0.16), transparent 28%),
    rgba(255, 249, 233, 0.97);
}

.practice-frame.ui-refresh-v73 {
  min-height: 100svh;
  padding: clamp(10px, 2vw, 18px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 2px, transparent 2px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px) 0 0 / 40px 40px,
    linear-gradient(180deg, #c7e3dd 0 28%, #f2ead6 28% 100%);
}

body[data-mode="practice"] .practice-frame.ui-refresh-v73.practice-mixed {
  height: 100svh;
  padding: clamp(8px, 1.5vw, 16px);
}

body[data-mode="practice"] .ui-practice-v73.practice-room.lesson-screen.mixed-practice {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1.6vw, 14px);
  height: calc(100svh - 24px);
  max-width: min(1180px, 100%);
  margin: 0 auto;
  border: 6px solid rgba(28, 38, 31, 0.96);
  background:
    linear-gradient(rgba(111, 87, 58, 0.17) 4px, transparent 4px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(111, 87, 58, 0.13) 4px, transparent 4px) 0 0 / 56px 56px,
    linear-gradient(180deg, #f8edd4 0 62%, #c99b5d 62% 100%);
  box-shadow: 16px 16px 0 rgba(28, 38, 31, 0.2);
  padding: clamp(10px, 2vw, 20px);
  overflow: hidden;
}

.practice-v73-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(100%, 900px);
  margin: 0 auto;
  border: 5px solid rgba(28, 38, 31, 0.94);
  background: rgba(255, 249, 233, 0.94);
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.18);
  padding: 10px 14px;
}

.practice-v73-titlebar span {
  color: #235842;
  font-family: var(--pixel-font);
  font-weight: 950;
  letter-spacing: 0.02em;
}

.practice-v73-titlebar strong {
  color: #1c261f;
  font-size: clamp(0.94rem, 1.7vw, 1.15rem);
}

body[data-mode="practice"] .ui-practice-v73 .course-top {
  width: min(100%, 900px);
  margin: 0 auto;
  border: 4px solid rgba(28, 38, 31, 0.9);
  background: rgba(255, 249, 233, 0.9);
}

body[data-mode="practice"] .ui-practice-v73 .mixed-question-head {
  width: min(100%, 900px);
  border-width: 5px;
  background: rgba(255, 249, 233, 0.96);
  box-shadow: 8px 8px 0 rgba(28, 38, 31, 0.18);
}

body[data-mode="practice"] .ui-practice-v73 .mixed-question-head h2 {
  font-size: clamp(1.45rem, 3.2vw, 2.35rem);
}

body[data-mode="practice"] .ui-practice-v73 .mixed-next-step {
  width: min(100%, 900px);
  border-width: 4px;
  background:
    linear-gradient(90deg, rgba(255, 241, 166, 0.92), rgba(220, 239, 216, 0.96));
}

body[data-mode="practice"] .ui-practice-v73 .mixed-card {
  width: min(100%, 900px);
  min-height: 0;
  overflow: auto;
  border-width: 5px;
  background:
    radial-gradient(circle at 100% 0, rgba(94, 154, 143, 0.12), transparent 36%),
    rgba(255, 253, 245, 0.96);
  box-shadow: 10px 10px 0 rgba(28, 38, 31, 0.2);
}

body[data-mode="practice"] .ui-practice-v73 .mixed-dia-feedback {
  width: min(100%, 900px);
  min-height: 82px;
  border-width: 5px;
}

body[data-mode="practice"] .ui-practice-v73 .bottom-cta {
  position: sticky;
  bottom: 0;
  width: min(100%, 900px);
  margin: 0 auto;
  border-width: 5px;
  background: linear-gradient(180deg, #7fbf7d, #4f9b5f);
  box-shadow: 0 8px 0 #2f6f44, 10px 10px 0 rgba(28, 38, 31, 0.18);
}

.ui-practice-v73 .mixed-image-grid {
  gap: 14px;
}

.ui-practice-v73 .mixed-image-option,
.ui-practice-v73 .mixed-text-option,
.ui-practice-v73 .mixed-match-column button,
.ui-practice-v73 .mixed-letter-slots button {
  border-width: 4px;
  background: #fff9e9;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.ui-practice-v73 .mixed-image-option:hover,
.ui-practice-v73 .mixed-text-option:hover,
.ui-practice-v73 .mixed-match-column button:hover,
.ui-practice-v73 .mixed-letter-slots button:hover {
  transform: translateY(-4px);
  box-shadow: 8px 9px 0 rgba(28, 38, 31, 0.18);
}

.ui-practice-v73 .mixed-image-option .visual-canvas {
  border: 3px solid rgba(28, 38, 31, 0.16);
  background:
    linear-gradient(rgba(47, 122, 98, 0.08) 2px, transparent 2px) 0 0 / 24px 24px,
    #f6f1df;
}

.ui-practice-v73 .mixed-letter-slots button,
.ui-practice-v73 .mixed-letter-bank .letter-tile {
  min-width: 52px;
  min-height: 52px;
}

.ui-practice-v73 .mixed-audio-bar .secondary {
  background: #fff1a6;
}

.ui-practice-v73 .mixed-dia-feedback .dia-avatar {
  width: clamp(66px, 8vw, 92px);
}

@keyframes v73CurrentGlow {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.25) brightness(1.04);
  }
}

@media (max-width: 820px) {
  .ui-refresh-v73 .global-nav {
    top: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-refresh-v73 .home-streak,
  .ui-refresh-v73 .streak-badge {
    display: none;
  }

  .ui-refresh-v73 .home-map-title {
    top: 62px;
    left: 12px;
    max-width: calc(100% - 112px);
  }

  .ui-refresh-v73 .home-map-count {
    top: 62px;
    right: 12px;
  }

  .ui-refresh-v73 .home-map-preview.ui-map-v73 {
    min-height: 1060px;
  }

  .ui-refresh-v73 .home-map-node {
    width: min(310px, calc(100% - 24px));
  }

  .ui-refresh-v73 .home-map-card {
    grid-template-columns: 46px 52px minmax(0, 1fr);
  }

  .ui-refresh-v73 .home-map-card b {
    width: 46px;
    height: 46px;
  }

  .home-map-landmark {
    width: 52px;
    height: 52px;
  }

  .route-line {
    display: none;
  }

  .map-opening-dialogue {
    left: 14px;
    right: 14px;
    bottom: 78px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .map-opening-card h2 {
    font-size: 1.45rem;
  }

  body[data-mode="practice"] .ui-practice-v73.practice-room.lesson-screen.mixed-practice {
    height: calc(100svh - 16px);
    padding: 8px;
    border-width: 4px;
  }

  .practice-v73-titlebar {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 10px;
  }
}

@media (max-width: 560px) {
  .ui-refresh-v73 .home-map-title {
    top: 58px;
  }

  .ui-refresh-v73 .home-map-title strong {
    font-size: 1rem;
  }

  .ui-refresh-v73 .home-map-title span {
    font-size: 0.78rem;
  }

  .ui-refresh-v73 .home-map-count {
    min-width: 82px;
  }

  .ui-refresh-v73 .home-map-count strong {
    font-size: 1.8rem;
  }

  .ui-refresh-v73 .home-map-card {
    min-height: 92px;
    border-width: 4px;
  }

  .ui-refresh-v73 .home-map-dia {
    right: 2px;
    width: 78px;
  }

  .ui-refresh-v73 .home-map-start {
    width: calc(100% - 24px);
  }

  .map-opening-dialogue {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
  }

  .map-opening-card {
    padding: 12px;
  }

  .map-opening-card p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .map-opening-card small {
    font-size: 0.8rem;
  }

  body[data-mode="practice"] .ui-practice-v73 .mixed-question-head h2 {
    font-size: 1.35rem;
  }

  body[data-mode="practice"] .ui-practice-v73 .mixed-card {
    padding: 10px;
  }
}

/* V74 official Tera Dunhuang UI: formal picturebook map with Duolingo-like learning cards. */
.official-ui-v74.map-first-home {
  padding: 0;
  background: #211d17;
}

.official-ui-v74 .global-nav {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 44;
  width: min(560px, calc(100% - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(96, 74, 45, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 237, 0.84);
  box-shadow: 0 14px 34px rgba(74, 45, 18, 0.16);
  backdrop-filter: blur(12px);
}

.official-ui-v74 .home-streak,
.official-ui-v74 .streak-badge {
  position: absolute;
  z-index: 45;
  top: 18px;
  right: 18px;
}

.official-ui-v74 .home-map-preview.official-map-v74 {
  position: relative;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  background: #f5ead3;
  box-shadow: none;
  clip-path: none;
  overflow: hidden;
}

.official-ui-v74 .home-map-preview.official-map-v74::before {
  display: none;
}

.official-dunhuang-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) contrast(1.02);
  transform: scale(1.01);
}

.official-map-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 250, 236, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 236, 0.16), rgba(70, 47, 27, 0.14));
  pointer-events: none;
}

.official-map-v74 .map-sun,
.official-map-v74 .map-cloud,
.official-map-v74 .home-block-mountain,
.official-map-v74 .home-map-route {
  display: none;
}

.official-ui-v74.opening-active .home-map-preview.official-map-v74 {
  filter: saturate(0.78) brightness(0.72);
}

.official-ui-v74.opening-active .rpg-opening-panel.map-opening-scrim {
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 28% 76%, rgba(242, 190, 69, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(18, 17, 14, 0.34), rgba(18, 17, 14, 0.62));
  box-shadow: inset 0 0 0 1px rgba(255, 249, 233, 0.12);
  clip-path: none;
}

.official-ui-v74.opening-active .rpg-opening-panel.map-opening-scrim::before {
  display: none;
}

.official-ui-v74 .home-map-title {
  z-index: 8;
  top: clamp(18px, 4vh, 40px);
  left: clamp(18px, 4vw, 54px);
  max-width: min(520px, calc(100% - 168px));
  border: 1px solid rgba(75, 59, 39, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 58%),
    rgba(255, 249, 235, 0.9);
  box-shadow: 0 18px 42px rgba(79, 52, 27, 0.17);
  backdrop-filter: blur(10px);
}

.official-ui-v74 .home-map-title strong {
  color: #2d251b;
  font-size: clamp(1.16rem, 2.4vw, 1.92rem);
  letter-spacing: -0.01em;
}

.official-ui-v74 .home-map-title span {
  color: #6f604c;
  font-size: clamp(0.8rem, 1.35vw, 1rem);
}

.official-ui-v74 .home-map-count {
  z-index: 8;
  top: clamp(18px, 4vh, 42px);
  right: clamp(18px, 4vw, 54px);
  border: 1px solid rgba(75, 59, 39, 0.24);
  border-radius: 24px;
  background: rgba(236, 248, 225, 0.9);
  box-shadow: 0 18px 42px rgba(79, 52, 27, 0.16);
  backdrop-filter: blur(10px);
}

.official-ui-v74 .home-map-count strong {
  color: #397662;
}

.official-map-characters {
  position: absolute;
  z-index: 6;
  left: clamp(12px, 4vw, 68px);
  bottom: clamp(82px, 10vh, 132px);
  width: clamp(82px, 11vw, 148px);
  pointer-events: none;
}

.official-xiao-yezi {
  display: block;
  width: 100%;
  border: 1px solid rgba(90, 67, 39, 0.22);
  border-radius: 999px 999px 32px 32px;
  background: rgba(255, 250, 237, 0.68);
  box-shadow: 0 16px 34px rgba(72, 45, 21, 0.18);
}

.official-ui-v74 .home-map-node {
  z-index: 7;
  width: clamp(218px, 22vw, 316px);
  height: clamp(132px, 13vw, 184px);
}

.official-ui-v74 .home-map-raft {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 62%;
  border: 1px solid rgba(78, 61, 38, 0.28);
  border-radius: 28px 34px 24px 38px;
  background:
    linear-gradient(135deg, rgba(255, 245, 215, 0.22), transparent 58%),
    rgba(125, 167, 116, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 30px rgba(63, 47, 29, 0.16);
}

.official-ui-v74 .home-map-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  left: 14px;
  bottom: clamp(42px, 5vw, 58px);
  width: calc(100% - 28px);
  min-height: 92px;
  border: 1px solid rgba(82, 62, 37, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 58%),
    rgba(255, 250, 237, 0.93);
  box-shadow: 0 16px 30px rgba(77, 51, 26, 0.16);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.official-ui-v74 .home-map-card:hover,
.official-ui-v74 .home-map-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 36px rgba(77, 51, 26, 0.22);
  outline: none;
}

.official-ui-v74 .home-map-card b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #7fb4a2, #4c8f79);
  color: #fffaf0;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.official-ui-v74 .home-map-landmark {
  display: none;
}

.official-ui-v74 .home-map-card span {
  color: #2a241c;
  font-size: clamp(1rem, 1.7vw, 1.24rem);
}

.official-ui-v74 .home-map-card small {
  color: #74654f;
  font-size: 0.84rem;
}

.official-ui-v74 .home-map-card.current {
  border-color: rgba(211, 156, 53, 0.62);
  background:
    radial-gradient(circle at 82% 12%, rgba(237, 196, 81, 0.26), transparent 42%),
    rgba(255, 248, 225, 0.96);
  box-shadow: 0 20px 40px rgba(118, 76, 22, 0.22);
  animation: officialCurrentBreath 1.8s ease-in-out infinite;
}

.official-ui-v74 .home-map-dia {
  width: clamp(72px, 7vw, 104px);
  right: -28px;
  bottom: clamp(78px, 9vw, 112px);
  border: 1px solid rgba(82, 62, 37, 0.24);
  border-radius: 22px;
  background: rgba(255, 250, 237, 0.86);
  box-shadow: 0 16px 28px rgba(77, 51, 26, 0.18);
}

.official-ui-v74 .home-map-dia .dia-avatar {
  width: clamp(64px, 6vw, 88px);
  border-radius: 18px;
}

.official-ui-v74 .home-map-start {
  bottom: clamp(18px, 3vh, 32px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #8aca7b, #52a85e);
  color: #fffef7;
  box-shadow: 0 8px 0 #3e7f4b, 0 18px 38px rgba(62, 96, 45, 0.26);
}

.official-ui-v74 .home-map-parent {
  bottom: clamp(18px, 3vh, 32px);
  border: 1px solid rgba(82, 62, 37, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 237, 0.82);
  box-shadow: 0 12px 26px rgba(77, 51, 26, 0.14);
}

.official-ui-v74 .map-opening-card {
  max-width: min(660px, 100%);
  border: 1px solid rgba(82, 62, 37, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 12%, rgba(225, 180, 74, 0.14), transparent 28%),
    rgba(255, 250, 237, 0.96);
  box-shadow: 0 18px 50px rgba(36, 27, 18, 0.24);
}

.practice-frame.official-ui-v74 {
  min-height: 100svh;
  padding: clamp(10px, 2vw, 20px);
  background:
    radial-gradient(circle at 10% 8%, rgba(94, 154, 143, 0.12), transparent 30rem),
    radial-gradient(circle at 92% 0%, rgba(224, 169, 59, 0.14), transparent 24rem),
    #f5ead6;
}

body[data-mode="practice"] .practice-frame.official-ui-v74.practice-mixed {
  height: 100svh;
  padding: clamp(8px, 1.6vw, 18px);
}

body[data-mode="practice"] .official-practice-v74.practice-room.lesson-screen.mixed-practice {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1.5vw, 14px);
  height: calc(100svh - 28px);
  max-width: min(1040px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(84, 61, 36, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 250, 237, 0.92), rgba(255, 253, 247, 0.98)),
    #fffaf0;
  box-shadow: 0 24px 60px rgba(77, 51, 26, 0.16);
  padding: clamp(12px, 2.2vw, 22px);
  overflow: hidden;
}

.practice-v74-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(100%, 860px);
  margin: 0 auto;
  border: 1px solid rgba(84, 61, 36, 0.16);
  border-radius: 20px;
  background: rgba(255, 250, 237, 0.88);
  box-shadow: 0 12px 26px rgba(77, 51, 26, 0.08);
  padding: 10px 14px;
}

.practice-v74-titlebar span {
  color: #4c8f79;
  font-weight: 900;
}

.practice-v74-titlebar strong {
  color: #2d251b;
  font-size: clamp(0.94rem, 1.6vw, 1.12rem);
}

body[data-mode="practice"] .official-practice-v74 .course-top,
body[data-mode="practice"] .official-practice-v74 .mixed-question-head,
body[data-mode="practice"] .official-practice-v74 .mixed-next-step,
body[data-mode="practice"] .official-practice-v74 .mixed-card,
body[data-mode="practice"] .official-practice-v74 .mixed-dia-feedback,
body[data-mode="practice"] .official-practice-v74 .bottom-cta {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

body[data-mode="practice"] .official-practice-v74 .course-top {
  border: 1px solid rgba(84, 61, 36, 0.16);
  border-radius: 18px;
  background: rgba(255, 250, 237, 0.84);
}

body[data-mode="practice"] .official-practice-v74 .mixed-question-head {
  border: 1px solid rgba(84, 61, 36, 0.16);
  border-radius: 24px;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 12px 28px rgba(77, 51, 26, 0.08);
}

body[data-mode="practice"] .official-practice-v74 .mixed-question-head h2 {
  font-size: clamp(1.42rem, 3vw, 2.18rem);
}

body[data-mode="practice"] .official-practice-v74 .mixed-next-step {
  border: 1px solid rgba(94, 154, 143, 0.16);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(236, 248, 225, 0.92), rgba(255, 246, 214, 0.94));
}

body[data-mode="practice"] .official-practice-v74 .mixed-card {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(84, 61, 36, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 252, 0.96);
  box-shadow: 0 16px 34px rgba(77, 51, 26, 0.1);
}

body[data-mode="practice"] .official-practice-v74 .mixed-dia-feedback {
  min-height: 82px;
  border: 1px solid rgba(84, 61, 36, 0.16);
  border-radius: 22px;
  background: rgba(255, 250, 237, 0.9);
}

body[data-mode="practice"] .official-practice-v74 .bottom-cta {
  position: sticky;
  bottom: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #8aca7b, #52a85e);
  box-shadow: 0 8px 0 #3e7f4b, 0 18px 32px rgba(62, 96, 45, 0.18);
}

.official-practice-v74 .mixed-image-option,
.official-practice-v74 .mixed-text-option,
.official-practice-v74 .mixed-match-column button,
.official-practice-v74 .mixed-letter-slots button {
  border: 1px solid rgba(84, 61, 36, 0.16);
  border-radius: 22px;
  background: #fffdf7;
  box-shadow: 0 10px 22px rgba(77, 51, 26, 0.08);
}

.official-practice-v74 .mixed-image-option:hover,
.official-practice-v74 .mixed-text-option:hover,
.official-practice-v74 .mixed-match-column button:hover,
.official-practice-v74 .mixed-letter-slots button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(77, 51, 26, 0.13);
}

.official-practice-v74 .mixed-image-option .visual-canvas {
  border: 1px solid rgba(84, 61, 36, 0.12);
  border-radius: 20px;
  background: #f8f1df;
}

@keyframes officialCurrentBreath {
  0%,
  100% {
    transform: translateY(0);
    filter: saturate(1);
  }
  50% {
    transform: translateY(-3px);
    filter: saturate(1.06) brightness(1.02);
  }
}

@media (max-width: 820px) {
  .official-ui-v74 .global-nav {
    top: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .official-ui-v74 .home-streak,
  .official-ui-v74 .streak-badge {
    display: none;
  }

  .official-ui-v74 .home-map-preview.official-map-v74 {
    min-height: max(760px, 100svh);
  }

  .official-dunhuang-map-bg {
    object-position: center top;
  }

  .official-ui-v74 .home-map-title {
    top: 58px;
    left: 12px;
    max-width: calc(100% - 110px);
    border-radius: 20px;
  }

  .official-ui-v74 .home-map-count {
    top: 58px;
    right: 12px;
    border-radius: 20px;
  }

  .official-map-characters {
    left: 10px;
    bottom: 88px;
    width: 78px;
  }

  .official-ui-v74 .home-map-node {
    width: min(230px, calc(100% - 32px));
    height: 124px;
  }

  .official-ui-v74 .home-map-card {
    min-height: 78px;
    grid-template-columns: 40px minmax(0, 1fr);
    border-radius: 20px;
  }

  .official-ui-v74 .home-map-card b {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .official-ui-v74 .home-map-dia {
    right: -8px;
    bottom: 70px;
    width: 68px;
    padding: 4px;
  }

  .official-ui-v74 .home-map-dia .dia-avatar {
    width: 58px;
  }

  .map-opening-dialogue {
    left: 14px;
    right: 14px;
    bottom: 78px;
    grid-template-columns: 86px minmax(0, 1fr);
  }

  body[data-mode="practice"] .official-practice-v74.practice-room.lesson-screen.mixed-practice {
    height: calc(100svh - 16px);
    padding: 8px;
    border-radius: 22px;
  }

  .practice-v74-titlebar {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .official-ui-v74 .home-map-title strong {
    font-size: 0.98rem;
  }

  .official-ui-v74 .home-map-title span {
    font-size: 0.76rem;
  }

  .official-ui-v74 .home-map-count {
    min-width: 78px;
  }

  .official-ui-v74 .home-map-count strong {
    font-size: 1.7rem;
  }

  .official-ui-v74 .home-map-start {
    width: calc(100% - 28px);
  }

  .official-ui-v74 .home-map-node {
    width: min(212px, calc(100% - 28px));
  }

  .official-ui-v74 .home-map-card span {
    font-size: 0.95rem;
  }

  .official-ui-v74 .home-map-card small {
    font-size: 0.76rem;
  }

  body[data-mode="practice"] .official-practice-v74 .mixed-card {
    padding: 10px;
  }
}

/* V74 final overrides: keep the official picturebook map free of legacy grid texture. */
.official-ui-v74.opening-active .home-map-preview.official-map-v74 {
  filter: saturate(0.78) brightness(0.72) !important;
}

.official-ui-v74 .home-map-preview.official-map-v74::before,
.official-ui-v74.opening-active .rpg-opening-panel.map-opening-scrim::before {
  display: none !important;
  content: none !important;
}

.official-ui-v74.opening-active .rpg-opening-panel.map-opening-scrim {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 28% 76%, rgba(242, 190, 69, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(18, 17, 14, 0.34), rgba(18, 17, 14, 0.62)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 249, 233, 0.12) !important;
  clip-path: none !important;
}

/* V75 official Dunhuang map scene: a vertical picturebook game map, not floating web cards. */
.storybook-map-v75.map-first-home {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(219, 183, 106, 0.2), transparent 34%),
    #1f1a14;
}

.storybook-map-v75 .home-streak,
.storybook-map-v75 .streak-badge {
  display: none;
}

.storybook-map-v75 .home-map-preview.dunhuang-map-scene-v75 {
  position: relative;
  overflow: hidden;
  width: min(100vw, calc(100svh * 9 / 16));
  height: min(100svh, 920px);
  min-height: 0;
  max-height: 920px;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 0;
  background: #f0dfbd;
  box-shadow:
    0 0 0 1px rgba(255, 246, 218, 0.2),
    0 24px 80px rgba(0, 0, 0, 0.42);
}

.storybook-map-v75 .home-map-preview.dunhuang-map-scene-v75::before,
.storybook-map-v75 .home-map-preview.dunhuang-map-scene-v75::after {
  display: none !important;
  content: none !important;
}

.storybook-map-v75 .official-dunhuang-map-bg {
  object-position: center top;
  filter: saturate(0.96) contrast(1.02) sepia(0.08);
  transform: scale(1.005);
}

.storybook-map-v75 .official-map-wash {
  background:
    linear-gradient(180deg, rgba(255, 249, 231, 0.02), rgba(40, 28, 18, 0.04) 46%, rgba(42, 30, 18, 0.18)),
    radial-gradient(circle at 52% 75%, rgba(247, 216, 135, 0.2), transparent 34%);
}

.storybook-map-v75 .home-map-route {
  display: none !important;
}

.storybook-map-v75 .home-map-title {
  top: 14px;
  left: 16px;
  z-index: 12;
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: calc(100% - 122px);
  border: 1px solid rgba(88, 67, 38, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 58%),
    rgba(255, 244, 219, 0.86);
  box-shadow: 0 10px 22px rgba(62, 40, 20, 0.15);
  padding: 12px 14px;
  backdrop-filter: blur(8px);
}

.storybook-map-v75 .home-map-title strong {
  overflow: hidden;
  color: #2f281e;
  font-size: clamp(1rem, 4vw, 1.25rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storybook-map-v75 .home-map-title span {
  overflow: hidden;
  color: #6b5d48;
  font-size: clamp(0.72rem, 2.8vw, 0.86rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storybook-map-v75 .home-map-count {
  top: 14px;
  right: 14px;
  z-index: 12;
  display: grid;
  width: 76px;
  min-height: 92px;
  place-items: center;
  border: 1px solid rgba(74, 55, 30, 0.24);
  border-radius: 18px;
  background: rgba(230, 241, 207, 0.9);
  box-shadow: 0 10px 22px rgba(62, 40, 20, 0.16);
  backdrop-filter: blur(8px);
}

.storybook-map-v75 .home-map-count strong {
  color: #24634f;
  font-family: var(--sans);
  font-size: 2.15rem;
  line-height: 1;
}

.storybook-map-v75 .home-map-count span {
  color: #24634f;
  font-size: 0.82rem;
  font-weight: 950;
}

.storybook-map-v75 .official-map-characters {
  left: 18px;
  bottom: 104px;
  z-index: 11;
  width: min(26vw, 112px);
  filter: drop-shadow(0 12px 18px rgba(50, 30, 13, 0.22));
}

.storybook-map-v75 .official-xiao-yezi {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  height: auto;
}

.storybook-map-v75 .home-map-node {
  z-index: 8;
  width: clamp(116px, 36vw, 164px);
  height: 72px;
  pointer-events: none;
}

.storybook-map-v75 .home-map-node-current {
  z-index: 14;
}

.storybook-map-v75 .home-map-raft {
  display: none !important;
}

.storybook-map-v75 .stage-flag-pole-v75 {
  position: absolute;
  left: 16px;
  bottom: 0;
  z-index: 1;
  width: 2px;
  height: 58px;
  border-radius: 999px;
  background: rgba(54, 42, 29, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 246, 218, 0.32),
    18px 7px 0 -1px rgba(54, 42, 29, 0.5);
}

.storybook-map-v75 .stage-flag-pole-v75::before,
.storybook-map-v75 .stage-flag-pole-v75::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(54, 42, 29, 0.48);
  border-radius: 999px;
  background: rgba(236, 196, 101, 0.9);
}

.storybook-map-v75 .stage-flag-pole-v75::before {
  top: -4px;
}

.storybook-map-v75 .stage-flag-pole-v75::after {
  bottom: -4px;
  background: rgba(255, 246, 218, 0.9);
}

.storybook-map-v75 .home-map-card.stage-banner-v75 {
  left: 0;
  bottom: 30px;
  z-index: 2;
  display: block;
  width: max-content;
  min-width: 0;
  max-width: 156px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  pointer-events: auto;
  transform: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75:hover,
.storybook-map-v75 .home-map-card.stage-banner-v75:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.03);
  outline: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75::after {
  display: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 b,
.storybook-map-v75 .home-map-card.stage-banner-v75 .home-map-landmark {
  display: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 span {
  display: block;
  width: max-content;
  max-width: 148px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(51, 42, 32, 0.78), rgba(35, 28, 21, 0.82));
  box-shadow:
    0 8px 14px rgba(42, 29, 15, 0.18),
    inset 0 1px 0 rgba(255, 245, 217, 0.14);
  color: #fff8e6;
  padding: 6px 14px;
  font-size: clamp(0.92rem, 3.5vw, 1.04rem);
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 small {
  position: absolute;
  right: -18px;
  top: -15px;
  display: inline-grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(179, 75, 56, 0.62);
  border-radius: 8px;
  background: rgba(255, 246, 226, 0.88);
  box-shadow: 0 5px 10px rgba(74, 45, 21, 0.1);
  color: #a3412f;
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.1;
  transform: rotate(-4deg);
  white-space: nowrap;
}

.storybook-map-v75 .home-map-card.stage-banner-v75.current span {
  background:
    linear-gradient(180deg, rgba(255, 241, 173, 0.98), rgba(232, 177, 64, 0.95));
  box-shadow:
    0 0 0 8px rgba(241, 206, 92, 0.24),
    0 12px 22px rgba(111, 71, 21, 0.24);
  color: #4b3218;
  text-shadow: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75.complete small {
  border-color: rgba(179, 75, 56, 0.76);
  color: #b44936;
}

.storybook-map-v75 .home-map-card.stage-banner-v75.waiting small,
.storybook-map-v75 .home-map-card.stage-banner-v75.locked small {
  opacity: 0.86;
}

.storybook-map-v75 .home-map-node-1 {
  left: 41%;
  bottom: 10%;
}

.storybook-map-v75 .home-map-node-2 {
  left: 58%;
  bottom: 25%;
}

.storybook-map-v75 .home-map-node-3 {
  left: 31%;
  bottom: 39%;
}

.storybook-map-v75 .home-map-node-4 {
  left: 54%;
  bottom: 52%;
}

.storybook-map-v75 .home-map-node-5 {
  left: 31%;
  bottom: 67%;
}

.storybook-map-v75 .home-map-node-6 {
  left: 54%;
  bottom: 80%;
}

.storybook-map-v75 .home-map-dia {
  right: -38px;
  left: auto;
  bottom: 42px;
  z-index: 4;
  width: min(21vw, 84px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  filter: drop-shadow(0 10px 14px rgba(55, 34, 16, 0.22));
  pointer-events: none;
}

.storybook-map-v75 .home-map-dia-qvector-v79 {
  width: 100%;
  height: auto;
  display: block;
}

.storybook-map-v75 .home-map-node-1 .home-map-dia,
.storybook-map-v75 .home-map-node-3 .home-map-dia,
.storybook-map-v75 .home-map-node-5 .home-map-dia {
  right: auto;
  left: -38px;
}

.storybook-map-v75 .home-map-start {
  left: 50%;
  bottom: 78px;
  z-index: 18;
  width: min(300px, calc(100% - 88px));
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.3), transparent 36%),
    linear-gradient(180deg, #f2ca69, #d79836);
  box-shadow:
    0 8px 0 #9e6530,
    0 0 0 8px rgba(255, 232, 151, 0.16),
    0 16px 28px rgba(73, 43, 16, 0.28);
  color: #fff9e6;
  font-size: 1.05rem;
  text-shadow: 0 1px 1px rgba(76, 42, 11, 0.28);
}

.storybook-map-v75 .home-map-parent {
  display: none;
}

.dunhuang-map-tabs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 16;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  min-height: 68px;
  border-top: 1px solid rgba(80, 60, 34, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 246, 222, 0.92), rgba(226, 207, 171, 0.94));
  padding: 7px 8px 8px;
  backdrop-filter: blur(8px);
}

.dunhuang-map-tab {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(69, 53, 32, 0.25);
  border-radius: 14px 14px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 248, 0.75), rgba(227, 211, 181, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #3d3427;
  padding: 5px 2px;
}

.dunhuang-map-tab.active {
  border-color: rgba(211, 151, 45, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 245, 190, 0.95), rgba(227, 179, 75, 0.82));
}

.dunhuang-map-tab span {
  overflow: hidden;
  display: block;
  max-width: 100%;
  font-size: clamp(0.62rem, 2.45vw, 0.74rem);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storybook-map-v75.opening-active .home-map-preview.dunhuang-map-scene-v75 {
  filter: saturate(0.76) brightness(0.62);
}

.storybook-map-v75.opening-active .rpg-opening-panel.map-opening-scrim {
  background:
    radial-gradient(circle at 32% 78%, rgba(234, 189, 85, 0.16), transparent 24%),
    linear-gradient(180deg, rgba(17, 15, 12, 0.18), rgba(18, 15, 11, 0.72)) !important;
}

.storybook-map-v75 .map-opening-dialogue {
  right: 18px;
  bottom: 96px;
  left: 18px;
  z-index: 22;
  grid-template-columns: minmax(68px, 92px) minmax(0, 1fr);
  gap: 10px;
}

.storybook-map-v75 .map-opening-card {
  border: 1px solid rgba(84, 62, 37, 0.28);
  border-radius: 22px;
  background: rgba(255, 246, 226, 0.95);
  box-shadow: 0 16px 34px rgba(29, 20, 12, 0.28);
}

/* V78 Q-vector opening: an independent story dialogue screen, not a map scrim. */
.storybook-map-v75.qvector-opening-active {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(18, 28, 47, 0.18), rgba(18, 28, 47, 0.02) 28%, rgba(25, 27, 38, 0.18) 72%, rgba(19, 24, 36, 0.46)),
    radial-gradient(ellipse at 50% 48%, rgba(255, 229, 132, 0.2), transparent 32%),
    url("./assets/qvector/loading-bg-v1.webp") center / cover no-repeat,
    #17283d;
}

.qvector-opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100vw, calc(100svh * 853 / 1844), 540px);
  height: min(100svh, calc(100vw * 1844 / 853), 1040px);
  min-height: min(100svh, 680px);
  color: #3a2a1d;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 221, 128, 0.18), transparent 28%),
    radial-gradient(ellipse at 48% 50%, rgba(111, 77, 56, 0.22), transparent 56%),
    linear-gradient(180deg, #151b32 0%, #262847 48%, #6f5560 72%, #bd8d58 100%);
  border-radius: clamp(0px, 3vw, 34px);
  box-shadow:
    0 28px 90px rgba(24, 20, 18, 0.48),
    inset 0 0 0 1px rgba(255, 226, 167, 0.18);
}

.qvector-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 22% 44%, rgba(255, 250, 228, 0.2), transparent 22%),
    radial-gradient(ellipse at 78% 30%, rgba(255, 250, 228, 0.16), transparent 23%),
    linear-gradient(145deg, transparent 0 48%, rgba(87, 69, 58, 0.16) 48% 52%, transparent 52%),
    linear-gradient(26deg, transparent 0 54%, rgba(255, 235, 157, 0.28) 54% 56%, transparent 56%);
}

.qvector-opening::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 25%;
  z-index: -1;
  width: 72%;
  height: 56%;
  border-radius: 999px 999px 38% 48%;
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 239, 168, 0.26), transparent 18%),
    linear-gradient(130deg, rgba(104, 92, 79, 0.18), rgba(90, 72, 62, 0.04));
  transform: rotate(-16deg);
}

.qvector-opening-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 12;
  min-height: 38px;
  border: 1px solid rgba(255, 242, 203, 0.42);
  border-radius: 999px;
  background: rgba(45, 38, 48, 0.32);
  color: rgba(255, 248, 229, 0.88);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.qvector-opening-header {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 18px;
  z-index: 10;
  display: grid;
  gap: 8px;
  width: min(66%, 330px);
}

.qvector-opening-tag {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 40px;
  align-items: center;
  border: 1px solid rgba(221, 185, 97, 0.62);
  border-radius: 999px 999px 999px 28px;
  background:
    linear-gradient(135deg, rgba(255, 250, 229, 0.92), rgba(208, 239, 228, 0.72)),
    rgba(255, 248, 226, 0.86);
  box-shadow: 0 10px 28px rgba(55, 38, 23, 0.16);
  color: #2f7663;
  padding: 0 16px;
  font-size: 0.84rem;
  font-weight: 950;
}

.qvector-opening-header h2 {
  margin: 0;
  color: #fff8e7;
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 3px 12px rgba(45, 31, 24, 0.32);
}

.qvector-opening-header p {
  margin: 0;
  color: rgba(255, 247, 225, 0.88);
  font-size: clamp(0.82rem, 3.4vw, 1rem);
  font-weight: 850;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(45, 31, 24, 0.25);
}

.qvector-opening-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.qvector-opening-path {
  position: absolute;
  top: 22%;
  left: 14%;
  width: 72%;
  height: 48%;
  border: 3px dashed rgba(255, 231, 137, 0.72);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 52% 48% 42% 58%;
  transform: rotate(-16deg);
  filter: drop-shadow(0 0 12px rgba(255, 214, 94, 0.46));
  animation: qvectorPathGlow 2.8s ease-in-out infinite;
}

.qvector-opening-book {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: 4;
  width: min(58vw, 260px);
  height: min(30vw, 136px);
  transform: translateX(-50%) rotate(-2deg);
  filter: drop-shadow(0 22px 28px rgba(65, 42, 24, 0.24));
}

.qvector-book-page {
  position: absolute;
  top: 12px;
  bottom: 8px;
  width: 50%;
  border: 1px solid rgba(139, 97, 48, 0.26);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.72), transparent 60%),
    #fff2c7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.qvector-book-page-left {
  left: 0;
  border-radius: 22px 6px 10px 24px;
  transform: skewY(4deg);
}

.qvector-book-page-right {
  right: 0;
  border-radius: 6px 22px 24px 10px;
  transform: skewY(-4deg);
}

.qvector-book-glow {
  position: absolute;
  inset: -36px -32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 246, 170, 0.88), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(242, 184, 66, 0.34), transparent 62%);
  mix-blend-mode: screen;
  animation: qvectorBookGlow 2.4s ease-in-out infinite;
}

.qvector-opening-stars {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.qvector-opening-star-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #704913;
  animation: qvectorStarFloat 2.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 160ms);
}

.qvector-opening-star-node b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 18px 18px 22px 14px;
  background:
    radial-gradient(circle at 38% 30%, #fff8b9, transparent 28%),
    linear-gradient(180deg, #ffd977, #e6a93d);
  box-shadow:
    0 0 0 6px rgba(255, 220, 100, 0.18),
    0 0 22px rgba(255, 220, 100, 0.7);
  font-size: 1rem;
  font-weight: 950;
}

.qvector-opening-star-node em {
  position: absolute;
  top: 44px;
  width: max-content;
  max-width: 94px;
  border-radius: 999px;
  background: rgba(48, 38, 30, 0.52);
  color: #fff6dc;
  padding: 4px 8px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  opacity: 0.76;
  transform: scale(0.92);
  white-space: nowrap;
}

.qvector-opening-star-1 {
  left: 18%;
  top: 30%;
}

.qvector-opening-star-2 {
  left: 64%;
  top: 27%;
}

.qvector-opening-star-3 {
  left: 26%;
  top: 44%;
}

.qvector-opening-star-4 {
  left: 70%;
  top: 46%;
}

.qvector-opening-star-5 {
  left: 17%;
  top: 59%;
}

.qvector-opening-star-6 {
  left: 63%;
  top: 60%;
}

.qvector-opening-step-1 .qvector-opening-star-node {
  opacity: 0.36;
}

.qvector-opening-step-2 .qvector-opening-star-node,
.qvector-opening-step-3 .qvector-opening-star-node {
  opacity: 1;
}

.qvector-opening-dia {
  position: absolute;
  left: 5%;
  bottom: 18%;
  z-index: 8;
  width: min(30vw, 128px);
  height: min(25vw, 108px);
  border-radius: 32px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: 0 0;
  filter: drop-shadow(0 18px 18px rgba(47, 35, 24, 0.24));
  animation: qvectorDiaFloat 2.6s ease-in-out infinite;
}

.qvector-opening-dia::after {
  content: "";
  position: absolute;
  inset: 38% -12% 12%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 237, 139, 0.34), transparent 68%);
}

.qvector-opening-xiao-yezi {
  position: absolute;
  right: -4%;
  bottom: 14%;
  z-index: 7;
  width: min(45vw, 190px);
  height: min(62vw, 270px);
  border-radius: 999px 999px 36px 36px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  filter: drop-shadow(0 22px 26px rgba(47, 35, 24, 0.22));
  animation: qvectorXiaoYeziBreathe 3.2s ease-in-out infinite;
}

.qvector-opening-dialogue {
  position: absolute;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 18px;
  z-index: 14;
  display: grid;
  gap: 8px;
  border: 2px solid rgba(195, 145, 61, 0.58);
  border-radius: 26px 26px 30px 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.64), transparent 42%),
    rgba(255, 249, 231, 0.96);
  box-shadow:
    0 20px 40px rgba(49, 34, 20, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 16px 18px 16px;
}

.qvector-opening-dialogue::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-top: 13px solid rgba(157, 100, 39, 0.72);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  animation: qvectorDialogueArrow 1.2s ease-in-out infinite;
}

.qvector-opening-dialogue strong {
  color: #2d8069;
  font-size: 0.9rem;
  font-weight: 950;
}

.qvector-opening-dialogue p {
  min-height: 3.4em;
  margin: 0;
  color: #3b2a1c;
  font-size: clamp(1rem, 4.2vw, 1.18rem);
  font-weight: 850;
  line-height: 1.58;
}

.qvector-opening-primary {
  justify-self: start;
  min-width: 148px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.36), transparent 32%),
    linear-gradient(180deg, #f2c96b, #d59232);
  box-shadow:
    0 6px 0 #9d622e,
    0 14px 24px rgba(84, 48, 14, 0.24);
  color: #fff9e7;
  font-weight: 950;
}

@keyframes qvectorBookGlow {
  0%,
  100% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes qvectorPathGlow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes qvectorStarFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes qvectorDiaFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes qvectorXiaoYeziBreathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.01);
  }
}

@keyframes qvectorDialogueArrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (min-width: 760px) {
  .qvector-opening {
    height: min(100svh - 24px, 900px);
    width: min(430px, calc((100svh - 24px) * 9 / 16));
    border-radius: 30px;
  }
}

@media (max-width: 420px) {
  .qvector-opening-header {
    width: min(68%, 270px);
  }

  .qvector-opening-header h2 {
    font-size: clamp(1.38rem, 7.5vw, 1.86rem);
  }

  .qvector-opening-book {
    top: 31%;
    width: 64vw;
    height: 34vw;
  }

  .qvector-opening-star-node {
    width: 48px;
    height: 48px;
  }

  .qvector-opening-star-node b {
    width: 34px;
    height: 34px;
    border-radius: 14px 14px 18px 12px;
    font-size: 0.84rem;
  }

  .qvector-opening-star-node em {
    top: 37px;
    max-width: 82px;
    font-size: 0.58rem;
  }

  .qvector-opening-dialogue {
    padding: 14px 16px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qvector-opening *,
  .qvector-opening *::before,
  .qvector-opening *::after {
    animation: none !important;
  }
}

@media (min-width: 760px) {
  .storybook-map-v75.map-first-home {
    padding: 12px 0;
  }

  .storybook-map-v75 .home-map-preview.dunhuang-map-scene-v75 {
    height: min(100svh - 24px, 900px);
    width: min(430px, calc((100svh - 24px) * 9 / 16));
    border-radius: 30px;
  }

  .storybook-map-v75 .home-map-title,
  .storybook-map-v75 .home-map-count {
    top: 70px;
  }
}

@media (max-width: 759px) {
  .storybook-map-v75 .global-nav,
  .storybook-map-v75 .home-streak,
  .storybook-map-v75 .streak-badge {
    display: none;
  }

  .storybook-map-v75 .home-map-preview.dunhuang-map-scene-v75 {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    max-height: none;
  }

  .storybook-map-v75 .home-map-title {
    top: max(12px, env(safe-area-inset-top));
  }

  .storybook-map-v75 .home-map-count {
    top: max(12px, env(safe-area-inset-top));
  }
}

/* V79 Q-vector Loading + map base: Diaochan's three concept images become the visual source of truth. */
.qvector-loading-v79 {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  display: grid;
  place-items: stretch;
  background: #17283d;
  color: #fff8e7;
  transition: opacity 520ms ease, visibility 520ms ease;
}

body.app-ready .qvector-loading-v79 {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.qvector-loading-bg,
.qvector-loading-book,
.qvector-loading-stars,
.qvector-loading-dia,
.qvector-loading-xiao-yezi {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.qvector-loading-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  filter: saturate(1.02) contrast(1.01);
}

.qvector-loading-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 28, 47, 0.3), rgba(18, 28, 47, 0.02) 30%, rgba(25, 27, 38, 0.2) 72%, rgba(19, 24, 36, 0.54)),
    radial-gradient(circle at 50% 53%, rgba(255, 227, 126, 0.18), transparent 24%);
  pointer-events: none;
}

.qvector-loading-book {
  z-index: 3;
  left: 50%;
  top: 52%;
  width: min(112vw, 620px);
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter:
    saturate(1.05)
    contrast(1.04)
    drop-shadow(0 28px 40px rgba(75, 47, 20, 0.28));
  animation: qvectorBookGlow 2.4s ease-in-out infinite;
}

.qvector-loading-stars {
  z-index: 2;
  left: 50%;
  top: 44%;
  width: min(94vw, 430px);
  opacity: 0.46;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(255, 224, 95, 0.45));
  animation: qvectorStarFloat 3.2s ease-in-out infinite;
}

.qvector-loading-dia {
  z-index: 4;
  left: max(8px, calc(env(safe-area-inset-left) + 8px));
  bottom: max(220px, calc(env(safe-area-inset-bottom) + 190px));
  width: min(34vw, 150px);
  filter: drop-shadow(0 18px 22px rgba(46, 31, 20, 0.22));
  animation: qvectorDiaFloat 2.8s ease-in-out infinite;
}

.qvector-loading-xiao-yezi {
  z-index: 4;
  right: max(-4px, calc(env(safe-area-inset-right) - 4px));
  bottom: max(200px, calc(env(safe-area-inset-bottom) + 170px));
  width: min(41vw, 180px);
  filter: drop-shadow(0 18px 22px rgba(46, 31, 20, 0.2));
  animation: qvectorXiaoYeziBreathe 3.1s ease-in-out infinite;
}

.qvector-loading-copy {
  position: absolute;
  top: max(34px, calc(env(safe-area-inset-top) + 24px));
  right: 24px;
  left: 24px;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 2px 14px rgba(33, 24, 19, 0.42);
}

.qvector-loading-kicker {
  justify-self: center;
  margin: 0;
  border: 1px solid rgba(255, 237, 184, 0.36);
  border-radius: 999px;
  background: rgba(42, 35, 48, 0.28);
  color: rgba(255, 247, 221, 0.92);
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

.qvector-loading-copy h1 {
  margin: 0;
  color: #fff7dc;
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 950;
  line-height: 1.05;
}

.qvector-loading-copy p {
  margin: 0;
  color: rgba(255, 247, 225, 0.88);
  font-size: clamp(0.9rem, 3.6vw, 1.08rem);
  font-weight: 850;
  line-height: 1.52;
}

.qvector-loading-copy .qvector-loading-en {
  color: rgba(229, 246, 240, 0.74);
  font-size: clamp(0.72rem, 2.7vw, 0.86rem);
  font-weight: 800;
}

.qvector-loading-progress {
  position: absolute;
  right: max(44px, calc(env(safe-area-inset-right) + 44px));
  bottom: max(153px, calc(env(safe-area-inset-bottom) + 132px));
  left: max(44px, calc(env(safe-area-inset-left) + 44px));
  z-index: 3;
  overflow: hidden;
  max-width: 440px;
  height: 22px;
  margin: 0 auto;
  border: 2px solid rgba(255, 232, 171, 0.7);
  border-radius: 999px;
  background: rgba(41, 29, 29, 0.44);
  box-shadow:
    0 10px 24px rgba(18, 15, 17, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.qvector-loading-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 84% 35%, rgba(255, 255, 255, 0.75), transparent 18%),
    linear-gradient(90deg, #46d7bd, #85dfb4, #fff0a2);
  box-shadow: 0 0 18px rgba(98, 229, 195, 0.5);
  animation: qvectorLoadingProgressV79 1.45s ease-in-out infinite;
}

@keyframes qvectorLoadingProgressV79 {
  0% {
    width: 24%;
    transform: translateX(-16%);
  }
  50% {
    width: 68%;
    transform: translateX(5%);
  }
  100% {
    width: 42%;
    transform: translateX(68%);
  }
}

.qvector-opening {
  background: transparent;
}

.qvector-opening::before,
.qvector-opening::after {
  display: none;
}

.qvector-opening-book,
.qvector-opening-stars,
.qvector-opening-dia,
.qvector-opening-xiao-yezi {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.qvector-opening-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 0 48%, rgba(16, 19, 36, 0.28) 60%, rgba(11, 15, 29, 0.76) 100%),
    linear-gradient(180deg, rgba(19, 28, 48, 0.08), rgba(20, 23, 39, 0.05) 44%, rgba(20, 23, 39, 0.36)),
    radial-gradient(circle at 50% 48%, rgba(255, 222, 100, 0.14), transparent 25%);
}

.qvector-opening-book {
  z-index: 3;
  left: 50%;
  top: 48%;
  width: min(72vw, 340px);
  height: auto;
  object-fit: contain;
  opacity: 0.68;
  transform: translate(-50%, -50%) rotate(-1deg);
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(255, 226, 113, 0.42))
    drop-shadow(0 18px 24px rgba(66, 42, 21, 0.12));
  animation: qvectorOpeningBookBreathV80 2.6s ease-in-out infinite;
}

.qvector-opening-stars {
  z-index: 5;
  left: 50%;
  top: 42%;
  width: min(92vw, 420px);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(255, 220, 80, 0.46));
  animation: qvectorStarFloat 3.2s ease-in-out infinite;
}

.qvector-opening-dia {
  z-index: 8;
  left: 4%;
  bottom: 25%;
  width: clamp(94px, 27vw, 138px);
  height: auto;
  border-radius: 0;
  background: none;
  background-image: none;
  filter: drop-shadow(0 18px 20px rgba(42, 31, 22, 0.22));
  animation: qvectorDiaFloat 2.7s ease-in-out infinite;
}

.qvector-opening-xiao-yezi {
  z-index: 7;
  right: 6%;
  bottom: 21%;
  width: clamp(120px, 35vw, 180px);
  height: auto;
  border-radius: 0;
  background: none;
  background-image: none;
  filter: drop-shadow(0 22px 24px rgba(42, 31, 22, 0.2));
  animation: qvectorXiaoYeziBreathe 3.2s ease-in-out infinite;
}

@keyframes qvectorOpeningBookBreathV80 {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(-1deg) scale(0.94);
  }
  50% {
    opacity: 0.84;
    transform: translate(-50%, -50%) rotate(-1deg) scale(1.02);
  }
}

.qvector-opening-skip {
  top: max(28px, env(safe-area-inset-top));
  right: 54px;
  border-color: rgba(255, 238, 192, 0.76);
  background: rgba(45, 39, 48, 0.5);
  box-shadow: 0 8px 22px rgba(25, 22, 28, 0.24);
}

.qvector-opening-header {
  top: max(31px, calc(env(safe-area-inset-top) + 18px));
  left: 38px;
  width: min(52%, 300px);
}

.qvector-opening-tag {
  min-height: 38px;
  border-color: rgba(235, 205, 128, 0.74);
  background:
    linear-gradient(135deg, rgba(85, 148, 131, 0.88), rgba(40, 94, 84, 0.84)),
    rgba(49, 118, 101, 0.86);
  color: #fff7dc;
  box-shadow: 0 10px 24px rgba(24, 19, 18, 0.2);
}

.qvector-opening-header h2 {
  color: #fff6dc;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
}

.qvector-opening-header p {
  color: rgba(255, 248, 226, 0.78);
}

.qvector-opening-dialogue {
  right: 25px;
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
  left: 25px;
  isolation: isolate;
  min-height: 190px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 20px 22px 18px;
}

.qvector-dialog-frame-v79 {
  position: absolute;
  inset: -15px -16px -20px;
  z-index: -1;
  width: calc(100% + 32px);
  height: calc(100% + 35px);
  object-fit: fill;
  pointer-events: none;
}

.qvector-opening-dialogue p {
  max-width: 94%;
  min-height: 3em;
}

.qvector-opening-primary {
  min-width: 138px;
}

.storybook-map-v75 .official-dunhuang-map-bg {
  object-position: center;
  filter: saturate(1.03) contrast(1.02);
  transform: scale(1.002);
}

.storybook-map-v75 .official-map-wash {
  background:
    linear-gradient(180deg, rgba(18, 28, 48, 0.04), rgba(255, 248, 226, 0.02) 42%, rgba(21, 29, 41, 0.18)),
    radial-gradient(circle at 48% 55%, rgba(255, 226, 119, 0.1), transparent 26%);
}

.qvector-map-path-v79 {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.86;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(255, 221, 99, 0.4));
}

.qvector-map-platform-v79 {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: clamp(72px, 20vw, 104px);
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 16px rgba(57, 34, 14, 0.18));
  pointer-events: none;
}

.storybook-map-v75 .home-map-node-1 {
  left: 23%;
  bottom: 65%;
}

.storybook-map-v75 .home-map-node-2 {
  left: 59%;
  bottom: 66%;
}

.storybook-map-v75 .home-map-node-3 {
  left: 58%;
  bottom: 50%;
}

.storybook-map-v75 .home-map-node-4 {
  left: 21%;
  bottom: 41%;
}

.storybook-map-v75 .home-map-node-5 {
  left: 17%;
  bottom: 18%;
}

.storybook-map-v75 .home-map-node-6 {
  left: 62%;
  bottom: 18%;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 span {
  background:
    linear-gradient(180deg, rgba(255, 248, 225, 0.96), rgba(244, 215, 147, 0.9));
  box-shadow:
    0 10px 22px rgba(57, 37, 19, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: #4d341c;
  text-shadow: none;
}

.storybook-map-v75 .stage-flag-pole-v75 {
  display: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 {
  left: 50%;
  bottom: 22px;
  z-index: 3;
  transform: translateX(-50%);
}

.storybook-map-v75 .home-map-card.stage-banner-v75:hover,
.storybook-map-v75 .home-map-card.stage-banner-v75:focus-visible {
  transform: translate(-50%, -3px);
}

.storybook-map-v75 .home-map-card.stage-banner-v75 small {
  right: -10px;
  top: -18px;
  border-color: rgba(197, 94, 58, 0.46);
  background: rgba(255, 246, 226, 0.9);
}

/* V87 map navigation: visible order, route arrows, and unclipped status badges. */
.storybook-map-v75 .home-map-route {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.storybook-map-v75 .home-map-route .route-line {
  display: none;
}

.storybook-map-v75 .route-arrow {
  position: absolute;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(96, 69, 34, 0.26);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 250, 218, 0.86), rgba(230, 177, 78, 0.8));
  box-shadow:
    0 8px 16px rgba(70, 43, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #5b3a16;
  font-size: 1.12rem;
  font-weight: 950;
  line-height: 1;
}

.storybook-map-v75 .route-arrow-1 {
  left: 43%;
  bottom: 70%;
}

.storybook-map-v75 .route-arrow-2 {
  left: 64%;
  bottom: 57%;
  transform: rotate(92deg);
}

.storybook-map-v75 .route-arrow-3 {
  left: 38%;
  bottom: 47%;
  transform: rotate(190deg);
}

.storybook-map-v75 .route-arrow-4 {
  left: 20%;
  bottom: 31%;
  transform: rotate(260deg);
}

.storybook-map-v75 .route-arrow-5 {
  left: 38%;
  bottom: 21%;
}

.storybook-map-v75 .map-stage-number {
  position: absolute;
  left: calc(50% - clamp(70px, 22vw, 92px));
  top: 20px;
  z-index: 5;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid rgba(255, 247, 220, 0.9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #f5cd70, #cc7d30);
  box-shadow:
    0 8px 14px rgba(74, 44, 15, 0.2),
    0 0 0 4px rgba(255, 226, 132, 0.2);
  color: #fff9e7;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  transform: none;
  text-shadow: 0 1px 1px rgba(78, 44, 14, 0.28);
  pointer-events: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-badge {
  position: static;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  min-width: 68px;
  min-height: 28px;
  margin: 6px auto 0;
  border: 1px solid rgba(75, 53, 29, 0.18);
  border-radius: 999px;
  background: rgba(255, 247, 226, 0.94);
  box-shadow: 0 8px 16px rgba(65, 39, 17, 0.14);
  color: #5f503b;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  padding: 0 9px;
  transform: none;
  white-space: nowrap;
  pointer-events: none;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-badge::before {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  color: #fffdf0;
  font-size: 0.62rem;
  line-height: 1;
  content: "…";
  background: #b98b42;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-complete {
  color: #27725b;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-complete::before {
  content: "✓";
  background: #2f8a6c;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-waiting::before {
  content: "!";
  background: #d28a3a;
}

.storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-locked::before {
  content: "○";
  background: #9f8d70;
}

.unit-map-tabs-v87 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  min-height: 74px;
  padding: 7px 8px 9px;
}

.unit-map-tab-v87 {
  align-content: center;
  gap: 2px;
}

.unit-map-tab-v87 b {
  display: block;
  color: #24634f;
  font-size: clamp(0.62rem, 2.35vw, 0.78rem);
  font-weight: 950;
  line-height: 1;
}

.unit-map-tab-v87 span {
  font-size: clamp(0.58rem, 2.1vw, 0.72rem);
  line-height: 1.08;
  white-space: normal;
}

.unit-map-tab-v87.active b,
.unit-map-tab-v87.active span {
  color: #4b3218;
}

@media (max-width: 520px) {
  .storybook-map-v75 .route-arrow {
    width: 28px;
    height: 28px;
    font-size: 0.92rem;
  }

  .storybook-map-v75 .map-stage-number {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .storybook-map-v75 .home-map-card.stage-banner-v75 .map-status-badge {
    min-width: 62px;
    min-height: 24px;
    font-size: 0.64rem;
    padding: 0 7px;
  }
}

@media (min-width: 760px) {
  .qvector-loading-v79 {
    width: min(430px, calc((100svh - 24px) * 9 / 16));
    height: min(100svh - 24px, 900px);
    inset: 12px auto auto 50%;
    border-radius: 30px;
    transform: translateX(-50%);
    box-shadow: 0 28px 90px rgba(24, 20, 18, 0.42);
  }
}

@media (min-width: 1024px) and (min-aspect-ratio: 1 / 1) {
  .qvector-loading-v79 {
    inset: 0;
    width: 100vw;
    height: 100svh;
    border-radius: 0;
    transform: none;
    box-shadow: none;
  }

  .qvector-loading-bg {
    object-position: center;
    transform: scale(1.03);
  }

  .qvector-loading-shade {
    background:
      linear-gradient(180deg, rgba(18, 28, 47, 0.34), rgba(18, 28, 47, 0.04) 26%, rgba(25, 27, 38, 0.2) 72%, rgba(19, 24, 36, 0.56)),
      radial-gradient(ellipse at 50% 48%, rgba(255, 229, 132, 0.23), transparent 32%);
  }

  .qvector-loading-copy {
    top: max(56px, 9vh);
    right: 8vw;
    left: 8vw;
    max-width: min(860px, 70vw);
  }

  .qvector-loading-copy h1 {
    font-size: clamp(3rem, 5vw, 5.3rem);
  }

  .qvector-loading-copy p {
    font-size: clamp(1.08rem, 1.8vw, 1.5rem);
  }

  .qvector-loading-copy .qvector-loading-en {
    font-size: clamp(0.92rem, 1.45vw, 1.18rem);
  }

  .qvector-loading-book {
    left: 64%;
    top: 58%;
    width: clamp(620px, 52vw, 920px);
  }

  .qvector-loading-stars {
    left: 64%;
    top: 61%;
    width: clamp(520px, 46vw, 780px);
    opacity: 0.36;
  }

  .qvector-loading-dia {
    left: max(42px, 8vw);
    bottom: max(138px, 22vh);
    width: clamp(110px, 11vw, 170px);
  }

  .qvector-loading-xiao-yezi {
    right: max(42px, 8vw);
    bottom: max(142px, 22vh);
    width: clamp(135px, 13vw, 210px);
  }

  .qvector-loading-progress {
    right: 22vw;
    bottom: max(64px, 9vh);
    left: 22vw;
    max-width: 760px;
  }
}

@media (max-width: 420px) {
  .qvector-opening {
    width: 100vw;
    height: 100svh;
    border-radius: 0;
  }

  .qvector-opening-skip {
    right: 54px;
  }

  .qvector-loading-copy {
    top: max(26px, calc(env(safe-area-inset-top) + 16px));
    right: 18px;
    left: 18px;
  }

  .qvector-loading-copy h1 {
    font-size: clamp(1.65rem, 8vw, 2.45rem);
  }

  .qvector-loading-progress {
    right: 35px;
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px));
    left: 35px;
    height: 18px;
  }

  .qvector-opening-header {
    top: max(28px, calc(env(safe-area-inset-top) + 16px));
    left: 25px;
    width: min(55%, 230px);
  }

  .qvector-opening-dialogue {
    right: 19px;
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px));
    left: 19px;
    min-height: 176px;
    padding: 17px 18px 16px;
  }
}

/* V85 opening: full-bleed story layer with inline RPG-style typewriter dialogue. */
.storybook-map-v75.qvector-opening-active {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(18, 28, 47, 0.18), rgba(18, 28, 47, 0.02) 28%, rgba(25, 27, 38, 0.18) 72%, rgba(19, 24, 36, 0.44)),
    radial-gradient(ellipse at 50% 47%, rgba(255, 231, 142, 0.2), transparent 34%),
    url("./assets/qvector/loading-bg-v1.webp") center / cover no-repeat,
    #17283d;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

body[data-mode="home"] .study-area:has(.qvector-opening-active) {
  min-height: 100svh;
  padding: 0;
  margin: 0;
  background: #17283d;
}

body[data-mode="home"] .app-shell:has(.qvector-opening-active) {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.qvector-opening {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #3a2a1d;
  cursor: pointer;
}

.qvector-opening::before,
.qvector-opening::after {
  display: none;
}

.qvector-opening-fading {
  pointer-events: none;
  animation: qvectorOpeningFadeOutV84 220ms ease forwards;
}

.qvector-opening-sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.qvector-opening-topbar {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 14px));
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  width: min(1100px, calc(100% - clamp(36px, 10vw, 144px)));
  margin: 0 auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.qvector-opening-topbar .qvector-opening-tag,
.qvector-opening-topbar .qvector-opening-skip {
  position: relative;
  top: auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto;
}

.qvector-opening-topbar .qvector-opening-tag {
  justify-self: start;
}

.qvector-opening-topbar .qvector-opening-skip {
  right: auto;
  justify-self: end;
}

.qvector-opening-tag {
  min-height: 38px;
  border: 1px solid rgba(235, 205, 128, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(85, 148, 131, 0.92), rgba(40, 94, 84, 0.86)),
    rgba(49, 118, 101, 0.88);
  color: #fff7dc;
  box-shadow: 0 10px 24px rgba(24, 19, 18, 0.2);
  padding: 0 18px;
  font-size: clamp(0.84rem, 2.4vw, 1rem);
  font-weight: 950;
}

.qvector-opening-skip {
  position: static;
  min-height: 38px;
  border-color: rgba(255, 238, 192, 0.76);
  background: rgba(45, 39, 48, 0.5);
  box-shadow: 0 8px 22px rgba(25, 22, 28, 0.24);
}

.qvector-opening-header {
  display: none;
}

.qvector-opening-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.qvector-opening-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 0 54%, rgba(15, 18, 31, 0.2) 76%, rgba(9, 13, 25, 0.5) 100%),
    linear-gradient(180deg, rgba(18, 24, 38, 0.12), rgba(18, 24, 38, 0.02) 45%, rgba(18, 22, 34, 0.28));
  pointer-events: none;
}

.qvector-opening-book,
.qvector-opening-stars,
.qvector-opening-dia,
.qvector-opening-xiao-yezi {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.qvector-opening-book {
  z-index: 3;
  left: 50%;
  top: 46%;
  width: min(116vw, 600px);
  height: auto;
  object-fit: contain;
  opacity: 0.7;
  transform: translate(-50%, -50%) rotate(-1deg);
  mix-blend-mode: normal;
  filter:
    saturate(1.04)
    drop-shadow(0 0 22px rgba(255, 226, 113, 0.36))
    drop-shadow(0 20px 28px rgba(66, 42, 21, 0.16));
  animation: qvectorOpeningBookBreathV80 2.6s ease-in-out infinite;
}

.qvector-opening-stars {
  z-index: 5;
  left: 50%;
  top: 42%;
  width: min(96vw, 520px);
  opacity: 0.48;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(255, 220, 80, 0.46));
  animation: qvectorStarFloat 3.2s ease-in-out infinite;
}

.qvector-opening-dia {
  z-index: 8;
  left: clamp(18px, 8vw, 132px);
  bottom: clamp(178px, 24vh, 286px);
  width: clamp(106px, 24vw, 180px);
  height: auto;
  border-radius: 0;
  background: none;
  background-image: none;
  filter: drop-shadow(0 18px 20px rgba(42, 31, 22, 0.22));
  animation: qvectorDiaFloat 2.7s ease-in-out infinite;
}

.qvector-opening-xiao-yezi {
  z-index: 7;
  right: clamp(-10px, 5vw, 132px);
  bottom: clamp(164px, 22vh, 276px);
  width: clamp(150px, 34vw, 250px);
  height: auto;
  border-radius: 0;
  background: none;
  background-image: none;
  filter: drop-shadow(0 22px 24px rgba(42, 31, 22, 0.2));
  animation: qvectorXiaoYeziBreathe 3.2s ease-in-out infinite;
}

.qvector-opening-dialogue {
  position: absolute;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px));
  right: auto;
  left: 50%;
  z-index: 24;
  display: block;
  isolation: isolate;
  width: min(760px, calc(100% - clamp(32px, 10vw, 160px)));
  min-height: clamp(116px, 18vh, 168px);
  margin: 0 auto;
  border: 2px solid rgba(210, 160, 74, 0.66);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 46%),
    rgba(255, 249, 231, 0.96);
  box-shadow:
    0 18px 40px rgba(66, 42, 21, 0.2),
    inset 0 0 0 2px rgba(245, 214, 151, 0.48);
  padding: clamp(18px, 3vw, 26px) clamp(24px, 4vw, 38px) clamp(34px, 4vw, 44px);
  transform: translateX(-50%);
  cursor: pointer;
}

.qvector-opening-dialogue::after {
  display: none;
}

.qvector-dialog-frame-v79 {
  display: none;
}

.qvector-opening-line {
  max-width: 100%;
  min-height: 2.8em;
  margin: 0;
  color: #3b2a1c;
  font-size: clamp(1.08rem, 4.4vw, 1.38rem);
  font-weight: 900;
  line-height: 1.58;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.qvector-opening-speaker {
  display: inline;
  color: #2d8069;
  font: inherit;
  font-size: 1em;
  line-height: inherit;
  font-weight: 950;
  border-bottom: 2px solid rgba(45, 128, 105, 0.74);
  padding-bottom: 0.06em;
  white-space: nowrap;
  vertical-align: baseline;
}

.qvector-opening-colon {
  display: inline;
  color: #3b2a1c;
  font: inherit;
  font-size: 1em;
  font-weight: 900;
  line-height: inherit;
  vertical-align: baseline;
}

.qvector-opening-typewriter {
  display: inline;
  color: inherit;
  font: inherit;
  font-size: 1em;
  line-height: inherit;
  vertical-align: baseline;
}

.qvector-opening-dialogue .qvector-opening-speaker,
.qvector-opening-dialogue .qvector-opening-colon,
.qvector-opening-dialogue .qvector-opening-typewriter {
  font-size: 1em;
  line-height: inherit;
  vertical-align: baseline;
}

.qvector-opening-typewriter::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1.05em;
  margin-left: 0.12em;
  background: rgba(59, 42, 28, 0.7);
  vertical-align: -0.16em;
  animation: qvectorTypeCursorV84 760ms steps(1) infinite;
}

.qvector-opening-line-ready .qvector-opening-typewriter::after {
  display: none;
}

.qvector-opening-cue {
  position: absolute;
  right: clamp(30px, 8vw, 56px);
  bottom: clamp(18px, 4vw, 28px);
  color: rgba(157, 100, 39, 0.86);
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 0 rgba(255, 246, 218, 0.9));
  animation: qvectorDialogueArrow 1.1s ease-in-out infinite;
}

.qvector-opening:not(.qvector-opening-line-ready) .qvector-opening-cue {
  opacity: 0.28;
  animation: none;
}

.qvector-opening-primary {
  display: none;
}

@media (min-width: 760px) {
  .qvector-opening {
    width: 100%;
    height: 100svh;
    border-radius: 0;
  }

  .qvector-opening-book {
    left: 58%;
    top: 52%;
    width: clamp(520px, 50vw, 860px);
  }

  .qvector-opening-stars {
    left: 58%;
    top: 47%;
    width: clamp(480px, 46vw, 760px);
  }

  .qvector-opening-dia {
    bottom: clamp(130px, 22vh, 230px);
  }

  .qvector-opening-xiao-yezi {
    right: clamp(54px, 8vw, 132px);
    bottom: clamp(128px, 21vh, 224px);
    width: clamp(180px, 21vw, 250px);
  }

  .qvector-opening-dialogue {
    right: auto;
    width: min(760px, 68vw);
  }
}

@media (max-width: 640px) {
  .qvector-opening-topbar {
    left: 24px;
    width: min(340px, calc(100% - 48px));
    transform: none;
  }

  .qvector-opening-dia {
    left: 7%;
    bottom: 25%;
    width: clamp(104px, 24vw, 132px);
  }

  .qvector-opening-xiao-yezi {
    right: clamp(70px, 25vw, 140px);
    bottom: 22%;
    width: clamp(124px, 30vw, 152px);
  }

  .qvector-opening-dialogue {
    right: auto;
    left: 26px;
    width: min(360px, calc(100% - 52px));
    transform: none;
  }
}

@media (min-width: 421px) and (max-width: 640px) {
  .qvector-opening-dialogue {
    right: auto;
    left: 24px;
    width: min(360px, calc(100% - 48px));
  }
}

@media (max-width: 420px) {
  .qvector-opening-topbar {
    top: max(20px, calc(env(safe-area-inset-top) + 14px));
    left: 20px;
    width: min(350px, calc(100% - 40px));
  }

  .qvector-opening-book {
    top: 45%;
    width: 118vw;
  }

  .qvector-opening-stars {
    top: 40%;
    width: 104vw;
  }

  .qvector-opening-dia {
    left: 5%;
    bottom: 25%;
    width: clamp(106px, 30vw, 136px);
  }

  .qvector-opening-xiao-yezi {
    right: 46px;
    bottom: 22%;
    width: clamp(126px, 32vw, 148px);
  }

  .qvector-opening-dialogue {
    right: auto;
    left: 20px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
    width: calc(100% - 40px);
    min-height: 148px;
    padding: 19px 24px 23px;
  }
}

@keyframes qvectorTypeCursorV84 {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

@keyframes qvectorOpeningFadeOutV84 {
  to {
    opacity: 0;
    transform: scale(1.01);
  }
}

/* V92: Shazhou Inn low-pressure dialogue before the first-look swipe cards. */
body[data-mode="intro"] .app-shell,
body[data-mode="intro"] .study-area {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="intro"] .app-shell main {
  gap: 0;
  margin-top: 0;
}

.qvector-intro-v92 {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(255, 231, 142, 0.2), transparent 34%),
    var(--shazhou-scene-image) var(--shazhou-scene-position) / var(--shazhou-scene-size) no-repeat,
    #17283d;
  color: #3a2a1d;
  cursor: pointer;
}

.qvector-intro-v92::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 247, 213, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(17, 30, 47, 0.16), rgba(17, 30, 47, 0.02) 35%, rgba(27, 20, 22, 0.28));
  pointer-events: none;
}

.qvector-intro-fading {
  pointer-events: none;
  animation: qvectorOpeningFadeOutV84 180ms ease forwards;
}

.intro-opening-topbar {
  z-index: 30;
}

.intro-opening-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-opening-book,
.intro-opening-stars,
.intro-opening-dia,
.intro-opening-xiao-yezi {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

.intro-opening-book {
  z-index: 3;
  left: 52%;
  top: 45%;
  width: min(116vw, 620px);
  opacity: 0.58;
  transform: translate(-50%, -50%) rotate(-1deg);
  filter:
    saturate(1.04)
    drop-shadow(0 0 24px rgba(255, 226, 113, 0.32))
    drop-shadow(0 20px 28px rgba(66, 42, 21, 0.14));
  animation: qvectorOpeningBookBreathV80 2.6s ease-in-out infinite;
}

.intro-opening-stars {
  z-index: 5;
  left: 52%;
  top: 40%;
  width: min(98vw, 520px);
  opacity: 0.42;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(255, 220, 80, 0.42));
  animation: qvectorStarFloat 3.2s ease-in-out infinite;
}

.intro-opening-dia {
  z-index: 8;
  left: clamp(18px, 8vw, 132px);
  bottom: clamp(176px, 24vh, 284px);
  width: clamp(108px, 24vw, 180px);
  filter: drop-shadow(0 18px 20px rgba(42, 31, 22, 0.22));
  animation: qvectorDiaFloat 2.7s ease-in-out infinite;
}

.intro-opening-xiao-yezi {
  z-index: 7;
  right: clamp(8px, 8vw, 148px);
  bottom: clamp(154px, 22vh, 266px);
  width: clamp(148px, 34vw, 248px);
  filter: drop-shadow(0 22px 24px rgba(42, 31, 22, 0.2));
  animation: qvectorXiaoYeziBreathe 3.2s ease-in-out infinite;
}

.intro-opening-dialogue.qvector-opening-dialogue {
  z-index: 24;
}

.qvector-intro-v92:not(.qvector-intro-line-ready) .qvector-opening-cue {
  opacity: 0.28;
  animation: none;
}

.qvector-intro-line-ready .qvector-opening-typewriter::after {
  display: none;
}

@media (min-width: 760px) {
  .intro-opening-book {
    left: 58%;
    top: 51%;
    width: clamp(520px, 50vw, 860px);
  }

  .intro-opening-stars {
    left: 58%;
    top: 46%;
    width: clamp(480px, 46vw, 760px);
  }

  .intro-opening-dia {
    bottom: clamp(130px, 22vh, 230px);
  }

  .intro-opening-xiao-yezi {
    right: clamp(54px, 8vw, 132px);
    bottom: clamp(128px, 21vh, 224px);
    width: clamp(180px, 21vw, 250px);
  }
}

@media (max-width: 640px) {
  .qvector-intro-v92 .qvector-opening-topbar {
    left: 24px;
    width: min(340px, calc(100% - 48px));
    transform: none;
  }

  .intro-opening-book {
    top: 44%;
    width: 116vw;
  }

  .intro-opening-stars {
    top: 39%;
    width: 104vw;
  }

  .intro-opening-dia {
    left: 5%;
    bottom: 25%;
    width: clamp(106px, 30vw, 136px);
  }

  .intro-opening-xiao-yezi {
    right: 46px;
    bottom: 22%;
    width: clamp(126px, 32vw, 148px);
  }
}

/* V88: Dunhuang demo map is the full scene. Remove extra navigation, markers, and floating status UI. */
body[data-mode="home"] .app-shell:has(.storybook-map-v75.map-ready),
body[data-mode="home"] .study-area:has(.storybook-map-v75.map-ready) {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #17283d;
}

body[data-mode="home"] .app-shell:has(.storybook-map-v75.map-ready) main {
  gap: 0;
  margin-top: 0;
}

.storybook-map-v75.map-first-home.map-ready {
  position: relative;
  display: block;
  width: 100vw;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

.storybook-map-v75.map-ready .global-nav {
  display: none;
}

.storybook-map-v75.map-ready .home-map-preview.dunhuang-map-scene-v75 {
  width: 100vw;
  height: 100svh;
  max-height: none;
  min-height: 100svh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.storybook-map-v75.map-ready .official-dunhuang-map-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.storybook-map-v75.map-ready .home-map-route,
.storybook-map-v75.map-ready .route-arrow,
.storybook-map-v75.map-ready .map-stage-number,
.storybook-map-v75.map-ready .map-status-badge,
.storybook-map-v75.map-ready .stage-flag-pole-v75,
.storybook-map-v75.map-ready .qvector-map-path-v79,
.storybook-map-v75.map-ready .qvector-map-platform-v79,
.storybook-map-v75.map-ready .dunhuang-map-tabs {
  display: none !important;
}

.storybook-map-v75.map-ready .home-map-card.stage-banner-v75 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: min(46vw, 160px);
}

.storybook-map-v75.map-ready .home-map-card.stage-banner-v75.complete span {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 235, 0.65), transparent 38%),
    linear-gradient(180deg, #ffec9a, #e5a93f);
  box-shadow:
    0 0 0 8px rgba(243, 202, 90, 0.2),
    0 13px 24px rgba(103, 65, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  color: #4b3218;
}

.storybook-map-v75.map-ready .map-complete-star {
  display: inline-grid;
  place-items: center;
  color: #7a4b12;
  font-style: normal;
  line-height: 1;
  transform: translateY(-1px);
}

.storybook-map-v75.map-ready .home-map-start {
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 24px));
}

@media (min-width: 760px) {
  .storybook-map-v75.map-first-home.map-ready {
    padding: 0;
  }

  .storybook-map-v75.map-ready .home-map-preview.dunhuang-map-scene-v75 {
    width: 100vw;
    height: 100svh;
    max-height: none;
    border-radius: 0;
  }

  .storybook-map-v75.map-ready .home-map-title,
  .storybook-map-v75.map-ready .home-map-count {
    top: max(20px, env(safe-area-inset-top));
  }
}

/* V89: Shazhou Inn practice scene. Keep the middle 90% calm for learning, with Q-vector picturebook UI. */
body[data-mode="practice"] .app-shell,
body[data-mode="practice"] .study-area {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="practice"] .app-shell main {
  gap: 0;
  margin-top: 0;
}

body[data-mode="practice"] .qvector-practice-v89.practice-mixed {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="practice"] .qvector-practice-v89.practice-mixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--shazhou-scene-image) var(--shazhou-scene-position) / var(--shazhou-scene-size) no-repeat;
  transform: scale(1.01);
}

body[data-mode="practice"] .qvector-practice-v89.practice-mixed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 250, 228, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(24, 31, 50, 0.06), rgba(24, 21, 22, 0.2));
  pointer-events: none;
}

/* V97: let the first-look word page own the whole viewport like loading/opening. */
body[data-mode="swipe"] {
  overflow: hidden;
  background: #17283d;
}

body[data-mode="swipe"] .app-shell,
body[data-mode="swipe"] .study-area {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="swipe"] .app-shell main {
  gap: 0;
  margin-top: 0;
}

/* V91: make the first-look swipe page share the Q-vector Shazhou practice scene. */
body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--shazhou-scene-image) var(--shazhou-scene-position) / var(--shazhou-scene-size) no-repeat;
  transform: scale(1.01);
}

body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 250, 228, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(24, 31, 50, 0.04), rgba(24, 21, 22, 0.2));
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .academy-lattice,
body[data-mode="swipe"] .qvector-swipe-v91 .lesson-scene-label {
  display: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.35vw, 14px);
  width: min(94vw, 980px);
  max-width: 94vw;
  height: min(94svh, 1040px);
  min-height: 0;
  max-height: min(94svh, 1040px);
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(24px, 4vw, 40px);
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.48), rgba(255, 246, 226, 0.68)),
    rgba(255, 249, 230, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 198, 0.3),
    0 18px 60px rgba(65, 43, 25, 0.16);
  backdrop-filter: blur(2px);
}

/* V138: temporary test skips for reaching tower defense quickly during online QA. */
.flow-test-skip {
  position: absolute;
  z-index: 12;
  top: clamp(12px, 1.8vw, 18px);
  right: clamp(12px, 1.8vw, 18px);
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 238, 188, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.95), rgba(255, 224, 159, 0.9));
  color: #5a3d24;
  box-shadow:
    0 8px 20px rgba(70, 42, 20, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: clamp(0.78rem, 2.5vw, 0.92rem);
  font-weight: 900;
}

.flow-test-skip:active {
  transform: translateY(1px);
  box-shadow:
    0 4px 12px rgba(70, 42, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-top,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-round-note,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid rgba(223, 181, 96, 0.34);
  border-radius: clamp(22px, 3vw, 32px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), transparent 48%),
    rgba(255, 251, 238, 0.86);
  box-shadow: 0 16px 34px rgba(72, 46, 24, 0.12);
  clip-path: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-back,
body[data-mode="swipe"] .qvector-swipe-v91 .course-map-link {
  border: 1px solid rgba(223, 181, 96, 0.34);
  border-radius: 999px;
  background: rgba(255, 250, 236, 0.92);
  color: #57402c;
  box-shadow: 0 8px 18px rgba(73, 48, 24, 0.09);
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-progress-wrap {
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
}

/* V98: Diaochan word-star rail. Replace the inherited pixel progress bar on the word page. */
body[data-mode="swipe"] .qvector-swipe-v91 .course-progress {
  position: relative;
  height: 18px;
  overflow: visible;
  border: 1px solid rgba(255, 236, 166, 0.52);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 252, 235, 0.82), rgba(197, 164, 96, 0.26)),
    linear-gradient(90deg, rgba(255, 251, 236, 0.72), rgba(122, 190, 174, 0.2));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.86),
    inset 0 -2px 5px rgba(92, 63, 31, 0.1),
    0 5px 14px rgba(87, 58, 28, 0.12);
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-progress::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 255, 235, 0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 38% 50%, rgba(255, 232, 138, 0.62) 0 1.3px, transparent 2px),
    radial-gradient(circle at 66% 50%, rgba(255, 255, 235, 0.72) 0 1.4px, transparent 2px),
    radial-gradient(circle at 88% 50%, rgba(255, 232, 138, 0.7) 0 1.3px, transparent 2px),
    linear-gradient(90deg, rgba(103, 166, 148, 0.2), rgba(255, 224, 132, 0.18));
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-progress::after {
  content: "";
  position: absolute;
  inset: -7px -8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(127, 210, 194, 0.08), rgba(255, 224, 130, 0.16), rgba(255, 255, 255, 0.08));
  opacity: 0.86;
  filter: blur(4px);
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-progress i {
  position: relative;
  z-index: 1;
  min-width: 14px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 235, 0.92), rgba(255, 231, 139, 0.22) 42%, rgba(92, 203, 184, 0.1)),
    linear-gradient(90deg, #51c7b8 0%, #77ddc8 44%, #ffe89b 82%, #fff7c8 100%);
  box-shadow:
    0 0 18px rgba(255, 225, 126, 0.56),
    0 0 9px rgba(83, 205, 186, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-progress i::after {
  content: "✦";
  position: absolute;
  top: 50%;
  right: -11px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 233, 154, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.9), transparent 35%),
    radial-gradient(circle, #fff4b2 0 34%, #f0bd55 64%, rgba(240, 189, 85, 0.12) 100%);
  color: #9a671d;
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-50%);
  box-shadow:
    0 0 18px rgba(255, 220, 102, 0.72),
    0 5px 14px rgba(94, 62, 24, 0.16);
  animation: wordStarRailPulseV98 1.8s ease-in-out infinite;
}

@keyframes wordStarRailPulseV98 {
  0%,
  100% {
    transform: translateY(-50%) scale(0.96);
    opacity: 0.9;
  }

  50% {
    transform: translateY(-50%) scale(1.08);
    opacity: 1;
  }
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-stage-label,
body[data-mode="swipe"] .qvector-swipe-v91 .course-map-link,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-round-note,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .pill,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-action-buttons {
  display: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash {
  padding: 10px 14px;
  color: #245f50;
}

body[data-mode="swipe"] .qvector-swipe-v91 .compact-swipe-stage {
  display: grid;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  display: grid;
  grid-template-rows: auto minmax(104px, 0.9fr) auto auto auto minmax(0, auto);
  gap: clamp(6px, 1vw, 11px);
  place-items: center;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: clamp(12px, 2.1vw, 24px);
  overflow: hidden;
  touch-action: pan-y;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-top {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* V99: Diaochan sound orb for the swipe word card. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 {
  position: relative;
  display: inline-grid;
  width: clamp(46px, 7vw, 58px);
  height: clamp(46px, 7vw, 58px);
  min-height: clamp(46px, 7vw, 58px);
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 238, 170, 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98) 0 18%, transparent 38%),
    radial-gradient(circle at 68% 76%, rgba(252, 178, 72, 0.58), transparent 48%),
    linear-gradient(145deg, #fff8d7 0%, #f7d47a 54%, #dd9f39 100%);
  box-shadow:
    0 0 0 6px rgba(255, 232, 150, 0.15),
    0 12px 26px rgba(111, 67, 24, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    inset 0 -4px 0 rgba(147, 88, 30, 0.18);
  color: #684315;
  font-size: clamp(0.92rem, 2.4vw, 1.1rem);
  font-weight: 950;
  isolation: isolate;
  padding: 0;
  transition:
    transform 160ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91:hover,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91:focus-visible {
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-1px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91:active {
  transform: translateY(2px) scale(0.97);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-core {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: 70%;
  height: 70%;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 250, 220, 0.42);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* V119: speaker icon core for the swipe listening orb. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-icon {
  display: block;
  width: 68%;
  height: 68%;
  overflow: visible;
  color: #6b4316;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62))
    drop-shadow(0 0 7px rgba(255, 221, 103, 0.44));
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-speaker {
  fill: currentColor;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-wave-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-wave-outer {
  opacity: 0.48;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-sounding .sound-orb-icon {
  animation: swipeSoundIconGlowV119 900ms ease-in-out infinite;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-sounding .sound-orb-wave-line {
  opacity: 0.95;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 .sound-orb-wave {
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 1px solid rgba(255, 221, 118, 0.72);
  border-radius: 999px;
  opacity: 0.72;
  transform: scale(0.82);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-sounding {
  box-shadow:
    0 0 0 7px rgba(255, 237, 154, 0.2),
    0 0 34px rgba(251, 203, 83, 0.5),
    0 12px 26px rgba(111, 67, 24, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.82),
    inset 0 -4px 0 rgba(147, 88, 30, 0.16);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-sounding .sound-orb-wave {
  animation: swipeSoundOrbPulseV99 900ms ease-out infinite;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-blocked {
  animation: swipeSoundOrbNudgeV99 420ms ease;
}

@keyframes swipeSoundOrbPulseV99 {
  0% {
    opacity: 0.78;
    transform: scale(0.82);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes swipeSoundOrbNudgeV99 {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateX(2px);
  }
}

@keyframes swipeSoundIconGlowV119 {
  0%,
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62))
      drop-shadow(0 0 7px rgba(255, 221, 103, 0.44));
  }

  50% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
      drop-shadow(0 0 12px rgba(255, 215, 89, 0.78));
  }
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
  width: min(210px, 42vw);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
  min-height: 112px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
  color: #245f50;
  font-family: inherit;
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  line-height: 0.98;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card p {
  color: #7a6a55;
  font-weight: 850;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
  color: #332719;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
  display: -webkit-box;
  max-height: 3.2em;
  overflow: hidden;
  color: #6b5c47;
  font-weight: 850;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: clamp(42px, 6.2svh, 56px);
  padding: 7px 12px;
  color: #57402c;
  text-align: center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide strong {
  color: #332719;
  font-family: inherit;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-action-button {
  min-height: 58px;
  border: 1px solid rgba(223, 181, 96, 0.34);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  box-shadow: 0 12px 24px rgba(72, 46, 24, 0.14);
  clip-path: none;
}

/* V103: tighten the swipe page spacing and keep the card as the visual anchor. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
  gap: clamp(5px, 1vw, 10px);
  padding: clamp(10px, 1.8vw, 20px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .course-top {
  min-height: 40px;
  padding: 5px 10px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash {
  padding: 8px 12px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  grid-template-rows: auto minmax(220px, 1.45fr) auto auto minmax(0, auto);
  gap: clamp(5px, 0.9vw, 9px);
  padding: clamp(10px, 1.8vw, 18px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-top {
  min-height: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-stack {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding-top: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
  font-size: clamp(2.2rem, 7.2vw, 4.3rem);
  line-height: 0.96;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
  font-size: clamp(1.08rem, 2.8vw, 1.72rem);
  line-height: 1.08;
  color: #30564a;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
  max-width: 24ch;
  font-size: clamp(0.94rem, 2.1vw, 1.02rem);
  line-height: 1.45;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
  min-height: 40px;
  padding: 7px 10px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide strong {
  color: #3c5d4e;
  letter-spacing: 0.02em;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide span:first-child,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide span:last-child {
  color: #5c4b37;
  font-weight: 850;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91.is-ready .sound-orb-wave {
  animation: swipeSoundOrbReadyPulseV99 2.6s ease-in-out infinite;
}

@keyframes swipeSoundOrbReadyPulseV99 {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.84);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.02);
  }
}

/* V100: keep the swipe page inside one screen instead of leaving a large empty floor. */
@media (max-height: 760px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
    height: 95svh;
    padding: 10px;
    gap: 6px;
    border-radius: 24px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .course-top {
    min-height: 40px;
    padding: 5px 10px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
    grid-template-rows: auto minmax(170px, 1.2fr) auto auto minmax(0, auto);
    gap: 5px;
    padding: 10px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
    width: min(210px, 40vw);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
    min-height: 160px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
    font-size: clamp(1.95rem, 6.2vw, 3.8rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
    min-height: 40px;
  }
}

/* V102: promote the swipe word art from thumbnail to the main memory cue. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  grid-template-rows: auto minmax(260px, 1.6fr) auto auto auto minmax(0, auto);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
  width: min(420px, 84vw, 52svh);
  max-width: 100%;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
  width: 100%;
  min-height: clamp(230px, 54vw, 400px);
  aspect-ratio: 1 / 1;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-art-image {
  padding: clamp(2px, 0.8vw, 8px);
}

@media (max-height: 760px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
    grid-template-rows: auto minmax(190px, 1.3fr) auto auto auto minmax(0, auto);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
    width: min(330px, 76vw, 44svh);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
    min-height: clamp(178px, 44vw, 300px);
  }
}

/* V104: final clamp so the card stays the visual anchor on tall phones. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
  min-height: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  grid-template-rows: auto minmax(220px, 1.35fr) auto auto minmax(0, auto) !important;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
  width: min(240px, 46vw, 48svh);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
  min-height: clamp(210px, 48vw, 360px);
}

@media (max-height: 760px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
    grid-template-rows: auto minmax(180px, 1.15fr) auto auto minmax(0, auto) !important;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
    width: min(210px, 42vw, 40svh);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
    min-height: clamp(180px, 42vw, 300px);
  }
}

/* V105: the "by" memory art is a full card scene, not a framed thumbnail. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-visual-by {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual.visual-by {
  width: min(100%, 620px);
  justify-self: stretch;
  align-self: start;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual.visual-by .visual-canvas {
  width: 100%;
  height: clamp(270px, 58vw, 390px);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(255, 248, 225, 0.38), rgba(255, 250, 238, 0.94)),
    #fff9eb;
  box-shadow:
    inset 0 0 0 1px rgba(128, 91, 36, 0.13),
    0 14px 30px rgba(87, 57, 25, 0.13);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual.visual-by .word-art-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual.visual-by .visual-canvas {
    height: clamp(252px, 74vw, 320px);
  }
}

/* V109: make swipe words feel like full story cards instead of thumbnail art inside a paper sheet. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  position: relative;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch;
  justify-items: stretch;
  padding: clamp(10px, 1.5vw, 18px);
  border: 1px solid rgba(244, 219, 158, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.92), rgba(255, 238, 199, 0.82)),
    rgba(255, 247, 225, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 20px 54px rgba(67, 43, 22, 0.2);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.3vw, 14px);
  z-index: 0;
  border-radius: clamp(18px, 2.6vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 247, 224, 0.06)),
    linear-gradient(135deg, rgba(126, 189, 171, 0.12), transparent 44%, rgba(230, 178, 82, 0.1));
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-top {
  position: absolute;
  top: clamp(20px, 2.6vw, 30px);
  right: clamp(20px, 2.6vw, 30px);
  z-index: 5;
  width: auto;
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-top .swipe-speaker-v91 {
  pointer-events: auto;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(18px, 2.6vw, 28px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-scene-art {
  align-self: center !important;
  height: auto !important;
  min-height: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-scene-art .swipe-card-content {
  grid-template-rows: auto auto;
  align-content: start;
  height: auto !important;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-height: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
  width: 100%;
  min-height: clamp(230px, 43svh, 430px);
  border: 0;
  border-radius: clamp(18px, 2.6vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 247, 219, 0.28), rgba(255, 247, 231, 0.9)),
    #fff4dc;
  box-shadow:
    inset 0 0 0 1px rgba(130, 91, 39, 0.1),
    0 12px 28px rgba(85, 54, 27, 0.12);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .scene-card-visual .visual-canvas {
  height: clamp(270px, 47svh, 470px);
  min-height: 0;
  overflow: hidden;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .scene-card-visual .word-art-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(6px, 1vw, 10px);
  justify-items: center;
  width: min(100%, 620px);
  margin: clamp(-34px, -3vw, -18px) auto 0;
  padding: clamp(15px, 2.2vw, 24px) clamp(16px, 3vw, 32px) clamp(17px, 2.4vw, 26px);
  border: 1px solid rgba(226, 188, 105, 0.48);
  border-radius: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255, 239, 162, 0.26), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 241, 0.96), rgba(255, 241, 208, 0.92));
  box-shadow:
    0 -12px 24px rgba(255, 247, 226, 0.62),
    0 14px 28px rgba(86, 56, 26, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-stack {
  gap: 4px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
  color: #226250;
  font-size: clamp(2.35rem, 7.5vw, 5rem);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.68);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
  color: #315949;
  font-size: clamp(1.06rem, 2.5vw, 1.58rem);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
  max-width: 30ch;
  color: #67533b;
  font-size: clamp(0.9rem, 1.75vw, 1rem);
  line-height: 1.36;
}

@media (min-width: 700px) and (orientation: portrait) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .scene-card-visual .visual-canvas {
    height: clamp(390px, 48svh, 500px);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
    width: min(88%, 640px);
    margin-top: clamp(-38px, -3vw, -22px);
  }
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
    padding: 10px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-top {
    top: 18px;
    right: 18px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .scene-card-visual .visual-canvas {
    height: clamp(300px, 72vw, 360px);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
    width: min(94%, 420px);
    padding: 14px 16px 16px;
  }
}

/* V111: quiet immersion. Keep the learning layer clean, add game feel through material, light, and edge feedback. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 245, 201, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255, 252, 240, 0.36), rgba(255, 243, 217, 0.58)),
    rgba(255, 249, 230, 0.38);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 198, 0.24),
    0 18px 58px rgba(65, 43, 25, 0.13);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  border: 1px solid rgba(246, 219, 151, 0.76);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 86%, rgba(171, 122, 49, 0.08) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(62, 145, 127, 0.08), transparent 31%, rgba(220, 166, 72, 0.1)),
    linear-gradient(180deg, rgba(255, 252, 239, 0.88), rgba(255, 238, 204, 0.8));
  background-size: auto, 18px 18px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 0 0 24px rgba(255, 227, 156, 0.18),
    0 18px 46px rgba(67, 43, 22, 0.18);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card::before {
  inset: clamp(9px, 1.4vw, 15px);
  border: 1px solid rgba(243, 212, 141, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 247, 224, 0.03)),
    linear-gradient(135deg, rgba(126, 189, 171, 0.1), transparent 44%, rgba(230, 178, 82, 0.1));
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card::after {
  content: "";
  position: absolute;
  inset: clamp(15px, 2vw, 24px);
  z-index: 3;
  border-radius: clamp(16px, 2.4vw, 26px);
  background:
    linear-gradient(#2e8b78, #2e8b78) left top / 42px 2px no-repeat,
    linear-gradient(#2e8b78, #2e8b78) left top / 2px 42px no-repeat,
    linear-gradient(#d5a349, #d5a349) right top / 42px 2px no-repeat,
    linear-gradient(#d5a349, #d5a349) right top / 2px 42px no-repeat,
    linear-gradient(#d5a349, #d5a349) left bottom / 42px 2px no-repeat,
    linear-gradient(#d5a349, #d5a349) left bottom / 2px 42px no-repeat,
    linear-gradient(#2e8b78, #2e8b78) right bottom / 42px 2px no-repeat,
    linear-gradient(#2e8b78, #2e8b78) right bottom / 2px 42px no-repeat;
  opacity: 0.26;
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas {
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 207, 0.44),
    inset 0 -28px 44px rgba(255, 235, 189, 0.3),
    0 10px 24px rgba(85, 54, 27, 0.1);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
  border-color: rgba(225, 184, 96, 0.52);
  background:
    radial-gradient(ellipse at 50% -22%, rgba(255, 231, 137, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(255, 254, 244, 0.94), rgba(255, 241, 209, 0.91));
  box-shadow:
    0 -10px 24px rgba(255, 244, 218, 0.54),
    0 12px 25px rgba(86, 56, 26, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(1.5px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
  justify-self: center;
  width: min(100%, 560px);
  border-color: rgba(226, 192, 119, 0.22);
  background: rgba(255, 250, 234, 0.68);
  box-shadow:
    0 10px 24px rgba(72, 46, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(2px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card[data-intent="practice"] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 26px 0 42px rgba(214, 153, 54, 0.18),
    0 18px 46px rgba(67, 43, 22, 0.18);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card[data-intent="known"] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    inset -26px 0 42px rgba(62, 155, 129, 0.2),
    0 18px 46px rgba(67, 43, 22, 0.18);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-overlay {
  padding: 10px 18px;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card::after {
    inset: 16px;
    background-size:
      30px 2px,
      2px 30px,
      30px 2px,
      2px 30px,
      30px 2px,
      2px 30px,
      30px 2px,
      2px 30px;
    opacity: 0.22;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
    width: min(100%, 348px);
  }
}

body[data-mode="swipe"] .qvector-swipe-v91 .wait-action {
  background: linear-gradient(180deg, #fff8dd, #efd793);
  color: #704f19;
}

body[data-mode="swipe"] .qvector-swipe-v91 .light-action {
  background: linear-gradient(180deg, #e5f3e9, #8ecb9a);
  color: #245f50;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-overlay {
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(72, 46, 24, 0.16);
}

body[data-mode="swipe"] .qvector-swipe-v91 .practice-overlay {
  background: linear-gradient(135deg, #e0a93b, #b97720);
}

body[data-mode="swipe"] .qvector-swipe-v91 .known-overlay {
  top: 68px;
  background: linear-gradient(135deg, #6fa773, #2c9678);
}

/* V116: replace the framed swipe toast with a floating word-star feedback burst. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash {
  position: absolute;
  top: calc(clamp(58px, 8svh, 88px) + 50px);
  left: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0;
  max-width: min(76vw, 420px);
  margin: 0 !important;
  padding: 0 0 0 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #245f50;
  font-size: clamp(1rem, 2.9vw, 1.28rem);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.78),
    0 0 18px rgba(255, 223, 117, 0.48);
  pointer-events: none;
  animation: swipeStarFloatV116 1260ms ease-out both;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.96), transparent 34%),
    radial-gradient(circle, #fff3a6 0 35%, #f2bd4a 62%, rgba(242, 189, 74, 0.12) 100%);
  color: #95631a;
  font-size: 0.95rem;
  transform: translateY(-50%);
  box-shadow:
    0 0 22px rgba(255, 218, 84, 0.82),
    0 4px 12px rgba(94, 62, 24, 0.14);
  animation: swipeStarPopV116 720ms cubic-bezier(0.2, 1.35, 0.28, 1) both;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 96px;
  height: 46px;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 241, 148, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 16%, rgba(255, 255, 235, 0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 34%, rgba(255, 225, 112, 0.82) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 78%, rgba(123, 203, 184, 0.62) 0 2px, transparent 3px);
  opacity: 0;
  transform: translate(-18px, -50%) scale(0.72);
  filter: drop-shadow(0 0 8px rgba(255, 224, 108, 0.64));
  animation: swipeStarDustV116 980ms ease-out 80ms both;
  pointer-events: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash.practice {
  color: #8a631c;
  text-shadow:
    0 2px 0 rgba(255, 252, 238, 0.76),
    0 0 16px rgba(231, 174, 83, 0.42);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash.practice::before {
  content: "·";
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.84), transparent 34%),
    radial-gradient(circle, #fff1ba 0 34%, #d9a143 66%, rgba(217, 161, 67, 0.1) 100%);
  color: #7c5518;
}

@keyframes swipeStarFloatV116 {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.92);
  }
  18%,
  70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.98);
  }
}

@keyframes swipeStarPopV116 {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.35) rotate(-18deg);
  }
  45% {
    opacity: 1;
    transform: translateY(-50%) scale(1.22) rotate(8deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0);
  }
}

@keyframes swipeStarDustV116 {
  0% {
    opacity: 0;
    transform: translate(-18px, -50%) scale(0.72);
  }
  25% {
    opacity: 0.98;
  }
  100% {
    opacity: 0;
    transform: translate(28px, -88%) scale(1.16);
  }
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash {
    top: calc(clamp(52px, 7svh, 70px) + 50px);
    max-width: 74vw;
    padding-left: 28px !important;
    font-size: clamp(0.98rem, 4.2vw, 1.12rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-flash::before {
    width: 24px;
    height: 24px;
  }
}

/* V113: make the whole story card draggable and give tall phones a stronger card scale. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card {
  cursor: grab;
  touch-action: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.dragging {
  cursor: grabbing;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card-content,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-visual,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .visual-canvas,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .word-art-image,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-speaker-v91 * {
  touch-action: manipulation;
}

@media (max-width: 560px) and (min-height: 760px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
    height: min(96svh, 1040px);
    max-height: min(96svh, 1040px);
    padding: 10px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-scene-art {
    align-self: stretch !important;
    height: 100% !important;
    min-height: min(72svh, 660px);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-scene-art .swipe-card-content {
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    height: 100% !important;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card .scene-card-visual .visual-canvas {
    height: clamp(340px, 58svh, 500px);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
    box-sizing: border-box;
    width: calc(100% - 20px) !important;
    max-width: 420px;
    margin-top: clamp(-32px, -7vw, -18px);
    padding: 16px 16px 18px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card:not(.swipe-card-scene-art) .word-visual {
    justify-self: center;
    align-self: center;
    width: min(100%, 300px) !important;
    max-width: 100%;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card:not(.swipe-card-scene-art) .visual-canvas {
    width: 100% !important;
    min-height: clamp(250px, 68vw, 310px);
    aspect-ratio: 1 / 1;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
    font-size: clamp(3.2rem, 14vw, 4.8rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
    font-size: clamp(1.32rem, 5.2vw, 1.82rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
    font-size: clamp(0.98rem, 3.6vw, 1.08rem);
  }
}

/* V117: keep the translucent learning room inset from the viewport top. */
body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
  box-sizing: border-box;
  align-items: start;
  justify-items: center;
  padding:
    max(16px, env(safe-area-inset-top))
    0
    max(12px, env(safe-area-inset-bottom));
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
  height: min(calc(100svh - 34px), 1040px);
  max-height: min(calc(100svh - 34px), 1040px);
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
    padding:
      max(18px, env(safe-area-inset-top))
      0
      max(10px, env(safe-area-inset-bottom));
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
    height: calc(100svh - 32px);
    max-height: calc(100svh - 32px);
  }
}

@media (min-width: 900px) {
  body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
    padding-top: max(22px, env(safe-area-inset-top));
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
    height: min(calc(100svh - 46px), 1040px);
    max-height: min(calc(100svh - 46px), 1040px);
  }
}

/* V118: make the waiting/lit counts in the swipe guide directly tappable. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
  gap: clamp(5px, 1vw, 8px);
  padding: 5px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(219, 178, 94, 0.34);
  border-radius: 999px;
  padding: 0 12px;
  font: inherit;
  font-size: clamp(0.92rem, 2.3vw, 1.06rem);
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 6px 12px rgba(72, 46, 24, 0.08);
  transition:
    transform 140ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
  touch-action: manipulation;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action span,
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action strong {
  min-width: 0;
  white-space: nowrap;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action.wait-action {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 36%),
    linear-gradient(180deg, rgba(255, 248, 218, 0.96), rgba(230, 203, 132, 0.82));
  color: #6d4a18;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action.light-action {
  border-color: rgba(113, 178, 146, 0.36);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(180deg, rgba(232, 247, 235, 0.96), rgba(132, 199, 154, 0.84));
  color: #245f50;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 1px 3px rgba(91, 59, 24, 0.12),
    0 3px 8px rgba(72, 46, 24, 0.08);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action:focus-visible {
  outline: 2px solid rgba(255, 216, 92, 0.85);
  outline-offset: 2px;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-label {
  color: #3c5d4e;
  font-size: clamp(0.86rem, 2.2vw, 1rem);
  font-weight: 950;
  white-space: nowrap;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
    min-height: 44px;
    padding: 5px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-action {
    min-height: 34px;
    padding: 0 9px;
    font-size: clamp(0.88rem, 3.6vw, 1rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide-label {
    font-size: clamp(0.78rem, 3.1vw, 0.92rem);
  }
}

/* V122: strengthen the three word-copy lines without adding visual noise. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
  gap: clamp(7px, 1.1vw, 12px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
  font-size: clamp(2.65rem, 8.2vw, 5.4rem);
  line-height: 0.94;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
  font-size: clamp(1.18rem, 2.9vw, 1.78rem);
  line-height: 1.08;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.32;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-word-panel {
    padding: 17px 16px 19px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card h2 {
    font-size: clamp(3.65rem, 15.5vw, 5.15rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card strong {
    font-size: clamp(1.48rem, 5.8vw, 2rem);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card small {
    font-size: clamp(1.08rem, 4.1vw, 1.22rem);
    line-height: 1.3;
  }
}

/* V123: portrait word-card art fills the swipe card instead of behaving like a landscape banner. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art {
  align-self: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-card-content {
  position: absolute;
  inset: clamp(9px, 1.5vw, 16px);
  z-index: 1;
  display: block;
  width: auto;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .word-visual.portrait-card-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .portrait-card-visual .visual-canvas {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: clamp(18px, 2.6vw, 28px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .portrait-card-visual .word-art-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center top;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel {
  position: absolute;
  box-sizing: border-box;
  right: auto;
  bottom: clamp(15px, 3svh, 28px);
  left: 50%;
  z-index: 4;
  width: 80%;
  min-height: 252px;
  max-width: 400px;
  margin: 0;
  align-content: center;
  transform: translateX(-50%);
  border-color: rgba(238, 201, 115, 0.58);
  background:
    radial-gradient(ellipse at 50% -18%, rgba(255, 235, 143, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 246, 0.9), rgba(255, 242, 214, 0.84));
  box-shadow:
    0 -10px 22px rgba(255, 244, 218, 0.42),
    0 13px 28px rgba(73, 47, 23, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art {
    padding: 9px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel {
    bottom: 14px;
    width: 76%;
    max-width: 270px;
    padding: 16px 14px 18px;
  }
}

/* V124: keep portrait-card word copy as a centered plaque, not a full-width subtitle bar. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel::before {
  content: "";
  position: absolute;
  inset: 7px 10px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 234, 151, 0.16), transparent 64%);
  pointer-events: none;
}

/* V126: remove swipe card corner guide lines; the illustration now carries the card edge. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card::after {
  display: none;
}

body[data-mode="practice"] .qvector-practice-v89 > .mixed-brief {
  display: none;
}

body[data-mode="practice"] .qvector-practice-v89 .practice-room-v89.official-practice-v74.practice-room.lesson-screen.mixed-practice {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1.35vw, 14px);
  width: min(90vw, 980px);
  max-width: 90vw;
  height: min(90svh, 1020px);
  min-height: min(90svh, 680px);
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(24px, 4vw, 40px);
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.48), rgba(255, 246, 226, 0.68)),
    rgba(255, 249, 230, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 198, 0.3),
    0 18px 60px rgba(65, 43, 25, 0.16);
  backdrop-filter: blur(2px);
}

body[data-mode="practice"] .qvector-practice-v89 .academy-lattice {
  display: none;
}

body[data-mode="practice"] .qvector-practice-v89 .course-top,
body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar,
body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head,
body[data-mode="practice"] .qvector-practice-v89 .mixed-next-step,
body[data-mode="practice"] .qvector-practice-v89 .mixed-card,
body[data-mode="practice"] .qvector-practice-v89 .mixed-dia-feedback,
body[data-mode="practice"] .qvector-practice-v89 .bottom-cta {
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;
}

body[data-mode="practice"] .qvector-practice-v89 .course-top,
body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar {
  border: 1px solid rgba(255, 236, 183, 0.7);
  border-radius: 999px;
  background: rgba(255, 249, 230, 0.72);
  box-shadow: 0 10px 26px rgba(74, 49, 27, 0.1);
  backdrop-filter: blur(10px);
}

body[data-mode="practice"] .qvector-practice-v89 .course-top {
  min-height: 46px;
  padding: 8px 12px;
}

body[data-mode="practice"] .qvector-practice-v89 .course-back,
body[data-mode="practice"] .qvector-practice-v89 .course-map-link {
  min-height: 42px;
  border: 1px solid rgba(213, 174, 92, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(255, 238, 204, 0.9));
  color: #3f3324;
  box-shadow: 0 8px 18px rgba(74, 49, 27, 0.11);
  font-family: inherit;
  font-size: 0.98rem;
}

body[data-mode="practice"] .qvector-practice-v89 .course-progress-wrap {
  display: grid;
  gap: 5px;
}

body[data-mode="practice"] .qvector-practice-v89 .course-progress {
  height: 12px;
  border: 1px solid rgba(110, 83, 43, 0.16);
  border-radius: 999px;
  background: rgba(255, 251, 236, 0.74);
  box-shadow: inset 0 1px 4px rgba(80, 55, 30, 0.08);
}

body[data-mode="practice"] .qvector-practice-v89 .course-progress i {
  background: linear-gradient(90deg, #63d4c8, #fff2a6);
  box-shadow: 0 0 12px rgba(255, 225, 120, 0.5);
}

body[data-mode="practice"] .qvector-practice-v89 .course-stage-label {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #5d4a34;
  font-family: inherit;
  font-size: clamp(0.76rem, 1.8vw, 0.92rem);
  font-weight: 850;
}

body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 16px;
}

body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar span {
  color: #2d8069;
}

body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar strong {
  color: #58412a;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head,
body[data-mode="practice"] .qvector-practice-v89 .mixed-card,
body[data-mode="practice"] .qvector-practice-v89 .mixed-dia-feedback {
  border: 1px solid rgba(223, 181, 96, 0.34);
  border-radius: clamp(22px, 3vw, 32px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), transparent 48%),
    rgba(255, 251, 238, 0.86);
  box-shadow: 0 16px 34px rgba(72, 46, 24, 0.12);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head {
  padding: clamp(13px, 2vw, 20px);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-task-instruction {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-task-instruction span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(255, 236, 183, 0.75);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(85, 148, 131, 0.94), rgba(42, 105, 91, 0.9));
  color: #fff6d9;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 950;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-task-instruction strong {
  color: #332719;
  font-size: clamp(1.28rem, 2.7vw, 1.92rem);
  line-height: 1.18;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head .pill {
  border: 1px solid rgba(255, 236, 183, 0.75);
  background: linear-gradient(135deg, rgba(85, 148, 131, 0.94), rgba(42, 105, 91, 0.9));
  color: #fff6d9;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head h2 {
  color: #332719;
  font-size: clamp(1.4rem, 3vw, 2.16rem);
  letter-spacing: 0;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head p {
  color: #6b5c47;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-next-step {
  border: 1px solid rgba(123, 168, 128, 0.22);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(236, 248, 225, 0.82), rgba(255, 246, 214, 0.88));
  box-shadow: 0 10px 22px rgba(72, 46, 24, 0.08);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-card {
  min-height: 0;
  padding: clamp(12px, 2vw, 20px);
  overflow: auto;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-cue {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-cue.audio-only {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.68);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-cue.is-big {
  justify-self: start;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-target-word,
body[data-mode="practice"] .qvector-practice-v89 .mixed-big-word {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #245f50;
  font-family: inherit;
  font-weight: 950;
  line-height: 1.08;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-target-word {
  font-size: clamp(1.18rem, 3vw, 1.62rem);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-big-word {
  font-size: clamp(2rem, 6vw, 3.8rem);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-label {
  color: #5d4a34;
  font-weight: 900;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-cue small {
  color: #7a6a55;
  font-weight: 800;
}

body[data-mode="practice"] .qvector-practice-v89 .word-speaker {
  display: inline-grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  border: 1px solid rgba(223, 181, 96, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.85), transparent 35%),
    linear-gradient(180deg, #fff6d5, #f0c66a);
  box-shadow: 0 6px 14px rgba(118, 72, 24, 0.16);
  color: #5b3b18;
  font-size: 1rem;
  padding: 0;
}

body[data-mode="practice"] .qvector-practice-v89 .word-speaker:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(118, 72, 24, 0.2);
}

body[data-mode="practice"] .qvector-practice-v89 .meaning-only {
  min-height: 36px;
  border: 1px solid rgba(213, 174, 92, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 236, 0.72);
  color: #6b5c47;
  padding: 6px 11px;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-image-grid {
  gap: clamp(10px, 1.8vw, 16px);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-image-option,
body[data-mode="practice"] .qvector-practice-v89 .mixed-text-option,
body[data-mode="practice"] .qvector-practice-v89 .mixed-match-column button,
body[data-mode="practice"] .qvector-practice-v89 .mixed-letter-slots button,
body[data-mode="practice"] .qvector-practice-v89 .mixed-letter-bank .letter-tile,
body[data-mode="practice"] .qvector-practice-v89 .mixed-sentence,
body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-bar button,
body[data-mode="practice"] .qvector-practice-v89 #practiceClear,
body[data-mode="practice"] .qvector-practice-v89 #practiceHint,
body[data-mode="practice"] .qvector-practice-v89 #practiceSubmit,
body[data-mode="practice"] .qvector-practice-v89 .ghost-button,
body[data-mode="practice"] .qvector-practice-v89 .secondary {
  border: 1px solid rgba(213, 174, 92, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 251, 0.98), rgba(255, 244, 222, 0.96));
  box-shadow: 0 10px 22px rgba(74, 49, 27, 0.11);
  color: #332719;
  font-family: inherit;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-image-option:hover,
body[data-mode="practice"] .qvector-practice-v89 .mixed-text-option:hover,
body[data-mode="practice"] .qvector-practice-v89 .mixed-match-column button:hover,
body[data-mode="practice"] .qvector-practice-v89 .mixed-letter-bank .letter-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(74, 49, 27, 0.16);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-image-option .visual-canvas,
body[data-mode="practice"] .qvector-practice-v89 .mixed-judge-card .word-visual,
body[data-mode="practice"] .qvector-practice-v89 .mixed-voice-card .word-visual {
  border: 1px solid rgba(213, 174, 92, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 182, 0.34), transparent 42%),
    #fff7e5;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-audio-bar .secondary,
body[data-mode="practice"] .qvector-practice-v89 .mixed-judge-actions button {
  border-radius: 999px;
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-dia-feedback {
  min-height: clamp(72px, 12vh, 96px);
  padding: 10px 14px;
  background: rgba(255, 249, 232, 0.82);
}

body[data-mode="practice"] .qvector-practice-v89 .mixed-dia-feedback .dia-avatar {
  width: clamp(58px, 10vw, 74px);
  height: clamp(58px, 10vw, 74px);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./assets/qvector/dia-qvector-v2.webp");
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(61, 43, 26, 0.18));
}

body[data-mode="practice"] .qvector-practice-v89 .dia-reaction-pop .dia-avatar {
  border: 0;
  background-image: url("./assets/qvector/dia-qvector-v2.webp");
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
}

body[data-mode="practice"] .qvector-practice-v89 .bottom-cta {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd973, #df9b38);
  box-shadow:
    0 8px 0 #b66d24,
    0 16px 34px rgba(129, 78, 30, 0.25);
  color: #fff8dd;
  text-shadow: 0 1px 0 rgba(111, 63, 21, 0.28);
}

@media (max-width: 820px) {
  body[data-mode="practice"] .qvector-practice-v89 .practice-room-v89.official-practice-v74.practice-room.lesson-screen.mixed-practice {
    width: min(92vw, 760px);
    max-width: 92vw;
    height: min(92svh, 900px);
    min-height: min(92svh, 640px);
    padding: clamp(10px, 2.4vw, 18px);
    border-radius: 28px;
  }
}

@media (max-width: 560px) {
  body[data-mode="practice"] .qvector-practice-v89 .practice-room-v89.official-practice-v74.practice-room.lesson-screen.mixed-practice {
    width: min(94vw, 430px);
    max-width: 94vw;
    height: min(94svh, 820px);
    min-height: min(94svh, 610px);
    gap: 7px;
    padding: 10px;
    border-radius: 24px;
  }

  body[data-mode="practice"] .qvector-practice-v89 .practice-v74-titlebar {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head h2 {
    font-size: clamp(1.22rem, 5vw, 1.62rem);
  }

  body[data-mode="practice"] .qvector-practice-v89 .mixed-card {
    padding: 10px;
  }
}

body[data-mode="tower"] {
  background:
    linear-gradient(180deg, rgba(46, 30, 20, 0.2), rgba(138, 86, 34, 0.14)),
    var(--shazhou-scene-image) var(--shazhou-scene-position) / var(--shazhou-scene-size) fixed;
}

.tower-defense-screen {
  min-height: 100svh;
  width: 100%;
  padding: clamp(10px, 2vw, 22px);
  display: grid;
  place-items: center;
  color: #3a2a1e;
}

body[data-mode="tower"] .course-top {
  width: min(100%, 860px);
  min-height: 46px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-left: auto;
  margin-right: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 236, 183, 0.7);
  border-radius: 999px;
  background: rgba(255, 249, 230, 0.72);
  box-shadow: 0 10px 26px rgba(74, 49, 27, 0.1);
  backdrop-filter: blur(10px);
}

body[data-mode="tower"] .course-map-link {
  display: none;
}

body[data-mode="tower"] .course-back {
  min-height: 42px;
  border: 1px solid rgba(213, 174, 92, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.96), rgba(255, 238, 204, 0.9));
  color: #3f3324;
  font-size: 0.98rem;
  box-shadow: 0 8px 18px rgba(74, 49, 27, 0.11);
}

body[data-mode="tower"] .course-progress {
  height: 12px;
  border: 1px solid rgba(110, 83, 43, 0.16);
  border-radius: 999px;
  background: rgba(255, 251, 236, 0.74);
  box-shadow: inset 0 1px 4px rgba(80, 55, 30, 0.08);
}

body[data-mode="tower"] .course-progress i {
  background: linear-gradient(90deg, #63d4c8, #fff2a6);
  box-shadow: 0 0 12px rgba(255, 225, 120, 0.5);
}

.tower-shell {
  width: min(1180px, 96vw);
  min-height: min(900px, 94svh);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(231, 198, 132, 0.58);
  border-radius: clamp(24px, 4vw, 40px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 160, 0.42), transparent 42%),
    linear-gradient(180deg, rgba(255, 251, 234, 0.9), rgba(245, 222, 180, 0.78));
  box-shadow:
    0 24px 70px rgba(57, 34, 18, 0.28),
    inset 0 0 0 10px rgba(255, 255, 248, 0.34);
  backdrop-filter: blur(8px);
}

.mohist-pixel-td .tower-shell {
  image-rendering: pixelated;
  border: 4px solid #3f3a32;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(226, 196, 142, 0.92), rgba(154, 105, 58, 0.78)),
    repeating-linear-gradient(0deg, rgba(83, 73, 58, 0.12) 0 2px, transparent 2px 12px);
  box-shadow:
    0 18px 0 rgba(47, 42, 36, 0.42),
    0 28px 58px rgba(43, 28, 18, 0.34),
    inset 0 0 0 8px rgba(255, 237, 187, 0.2);
}

.mohist-pixel-td .tower-hero,
.mohist-pixel-td .tower-panel,
.mohist-pixel-td .tower-report-card {
  border: 3px solid #4b4437;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(247, 232, 187, 0.96), rgba(207, 163, 94, 0.86));
  box-shadow:
    7px 7px 0 rgba(64, 54, 40, 0.24),
    inset 0 0 0 4px rgba(255, 246, 208, 0.22);
}

.mohist-pixel-td .pill,
.mohist-pixel-td .tower-mini-label {
  border: 2px solid #3f3a32;
  border-radius: 8px;
  background: linear-gradient(180deg, #7da58b, #3f7668);
  color: #fff6d5;
  box-shadow: 4px 4px 0 rgba(63, 58, 50, 0.2);
}

.tower-hero,
.tower-panel,
.tower-report-card {
  border: 1px solid rgba(218, 176, 95, 0.5);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 253, 241, 0.94), rgba(255, 239, 204, 0.88));
  box-shadow: 0 16px 38px rgba(72, 43, 22, 0.14);
}

.tower-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: clamp(14px, 2vw, 22px);
}

.tower-hero h2,
.tower-word-card h3,
.tower-shop h3,
.tower-wave-result h3,
.tower-report-card h3 {
  margin: 4px 0;
  color: #235c50;
}

.tower-hero p,
.tower-shop p,
.tower-report-card p {
  margin: 0;
  color: rgba(68, 49, 34, 0.78);
  font-weight: 800;
}

.tower-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px;
}

.tower-stats span,
.tower-mini-label {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(90, 151, 132, 0.13);
  color: #245a50;
  font-weight: 900;
  white-space: nowrap;
}

.tower-panel {
  padding: clamp(14px, 2vw, 24px);
}

.tower-spell-panel {
  display: grid;
  gap: 16px;
}

.tower-word-defense-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.tower-word-enemy {
  position: relative;
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 10px 12px 54px;
  overflow: hidden;
  border: 1px solid rgba(208, 164, 82, 0.5);
  border-radius: 24px;
  background:
    radial-gradient(circle at 24px 50%, rgba(255, 223, 129, 0.34), transparent 36px),
    linear-gradient(180deg, rgba(255, 252, 238, 0.94), rgba(248, 224, 181, 0.86));
  box-shadow: 0 12px 26px rgba(81, 47, 21, 0.12);
}

.tower-word-enemy span {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #5e9a8f;
  color: #fff8dc;
  font-weight: 950;
}

.tower-word-enemy strong {
  color: #285f52;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.tower-word-enemy small {
  color: rgba(65, 48, 32, 0.68);
  font-weight: 900;
}

.tower-word-enemy.active {
  border-color: rgba(255, 194, 68, 0.86);
  background:
    radial-gradient(circle at 24px 50%, rgba(255, 222, 105, 0.55), transparent 40px),
    linear-gradient(180deg, #fff8d9, #f6c66c);
  animation: towerEnemyPulse 1.2s ease-in-out infinite;
}

.tower-word-enemy.cleared {
  border-color: rgba(89, 161, 119, 0.52);
  background: linear-gradient(180deg, rgba(233, 255, 234, 0.96), rgba(202, 235, 203, 0.88));
}

.tower-word-enemy.waiting {
  border-color: rgba(193, 139, 51, 0.46);
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.94), rgba(244, 220, 151, 0.86));
}

.tower-word-enemy.next {
  opacity: 0.72;
}

@keyframes towerEnemyPulse {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

.tower-word-card {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr auto;
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid rgba(128, 78, 35, 0.2);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(126, 76, 35, 0.08), transparent 16%, transparent 84%, rgba(126, 76, 35, 0.08)),
    linear-gradient(180deg, rgba(255, 248, 226, 0.96), rgba(238, 205, 150, 0.74));
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 248, 0.28),
    0 14px 28px rgba(89, 54, 25, 0.12);
}

.tower-word-card .word-visual {
  margin: 0;
}

.tower-word-card .visual-canvas {
  min-height: 150px;
  border-radius: 24px;
  background: rgba(255, 250, 233, 0.76);
}

.tower-audio {
  margin-top: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08c, #e6a84b);
  color: #4a2b14;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(123, 78, 24, 0.2);
}

.tower-countdown {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff7d4 0 54%, #e8a448 56% 100%);
  color: #734418;
  font-size: 1.35rem;
  box-shadow: 0 10px 20px rgba(107, 64, 24, 0.18);
}

.tower-slots,
.tower-letter-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tower-slots {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  border: 2px solid rgba(95, 73, 42, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, rgba(221, 171, 82, 0.36), transparent 22px),
    radial-gradient(circle at 100% 0, rgba(221, 171, 82, 0.3), transparent 22px),
    linear-gradient(180deg, rgba(255, 250, 229, 0.9), rgba(229, 191, 121, 0.24));
  box-shadow:
    inset 0 0 0 3px rgba(84, 108, 91, 0.16),
    0 14px 30px rgba(70, 44, 24, 0.1);
}

.tower-letter-bank {
  min-height: 112px;
  align-content: center;
  padding: 22px 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 232, 158, 0.34), transparent 44px),
    linear-gradient(180deg, rgba(111, 75, 37, 0.08), rgba(255, 246, 221, 0.52));
}

.tower-slots span,
.tower-letter {
  min-width: 48px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(81, 122, 96, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 247, 0.94);
  color: #245a50;
  font-size: 1.35rem;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(74, 43, 18, 0.1);
}

.tower-slots span:not(.filled) {
  color: rgba(58, 42, 30, 0.3);
  border-style: dashed;
}

.tower-letter {
  cursor: pointer;
  transform: translate(var(--scatter-x, 0), var(--scatter-y, 0)) rotate(var(--scatter-rot, 0));
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.tower-letter:hover {
  transform: translate(var(--scatter-x, 0), calc(var(--scatter-y, 0) - 3px)) rotate(var(--scatter-rot, 0));
}

.tower-letter:disabled {
  opacity: 0.32;
  transform: scale(0.94);
}

.tower-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tower-actions.stack {
  align-items: stretch;
  flex-direction: column;
}

.mohist-submit {
  min-width: 150px;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 245, 196, 0.52), transparent 24px),
    linear-gradient(180deg, #f2c56a, #b97132) !important;
  box-shadow:
    0 10px 24px rgba(121, 73, 26, 0.2),
    inset 0 0 0 2px rgba(255, 245, 192, 0.34);
}

.tower-shop-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: clamp(14px, 2vw, 24px);
}

.tower-backpack-layout {
  grid-template-columns: minmax(230px, 0.52fr) minmax(0, 1fr);
}

.tower-board,
.tower-battlefield {
  display: grid;
  gap: 14px;
}

.tower-wall-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  color: #245a50;
  font-weight: 950;
}

.tower-wall-hp {
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(82, 77, 46, 0.32);
  border-radius: 999px;
  background: rgba(91, 61, 36, 0.12);
}

.tower-wall-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fae81, #ffe38a);
}

.tower-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(156, 103, 52, 0.13), rgba(97, 68, 43, 0.08)),
    repeating-linear-gradient(90deg, rgba(124, 88, 48, 0.12) 0 1px, transparent 1px 12.5%);
}

.tower-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid rgba(128, 91, 48, 0.34);
  border-radius: 16px;
  background: rgba(255, 248, 226, 0.78);
  color: rgba(93, 69, 42, 0.46);
  font-weight: 950;
  cursor: pointer;
}

.tower-cell.has-tower {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 240, 165, 0.65), transparent 48%),
    linear-gradient(180deg, rgba(255, 250, 225, 0.95), rgba(235, 194, 123, 0.9));
  color: #382819;
}

.tower-cell.selected {
  outline: 3px solid rgba(255, 189, 62, 0.7);
  box-shadow: 0 0 0 7px rgba(255, 214, 105, 0.22);
}

.tower-glyph,
.tower-option span {
  display: grid;
  place-items: center;
  margin: 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff6c9, transparent 36%),
    var(--tower-hue, #d58245);
  color: #fff8df;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(64, 36, 18, 0.3);
}

.tower-cell small {
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: #6d461f;
  font-weight: 950;
}

.tower-shop {
  display: grid;
  align-content: start;
  gap: 12px;
}

.tower-backpack {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 18px);
  border: 3px solid rgba(69, 61, 48, 0.9);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(115, 89, 57, 0.13), rgba(58, 76, 73, 0.1)),
    repeating-linear-gradient(90deg, rgba(76, 59, 38, 0.08) 0 8px, transparent 8px 16px);
}

.tower-backpack h3 {
  margin: 0;
  color: #2f6d60;
}

.tower-backpack p,
.tower-board-tip {
  margin: 0;
  color: rgba(61, 49, 35, 0.7);
  font-weight: 900;
}

.tower-shop-list,
.tower-backpack-list {
  display: grid;
  gap: 10px;
}

.tower-backpack-list {
  grid-template-columns: 1fr;
}

.tower-option {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 70px;
  padding: 10px;
  border: 1px solid rgba(214, 174, 92, 0.48);
  border-radius: 20px;
  background: rgba(255, 252, 236, 0.94);
  color: #3a2a1e;
  text-align: left;
  box-shadow: 0 10px 22px rgba(83, 52, 23, 0.12);
}

.mohist-pixel-td .tower-option {
  border: 3px solid #4b4437;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #e7c17b, #a66d3f);
  box-shadow: 5px 5px 0 rgba(66, 55, 40, 0.24);
}

.mohist-pixel-td .tower-option.selected {
  background:
    linear-gradient(180deg, #ffd772, #b87932);
  outline: 4px solid rgba(113, 158, 131, 0.38);
}

.tower-option span {
  grid-row: 1 / span 2;
}

.tower-option strong,
.tower-option small,
.tower-option em {
  display: block;
}

.tower-option small {
  color: rgba(74, 55, 38, 0.62);
  font-weight: 800;
}

.tower-option em {
  color: rgba(39, 69, 54, 0.72);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.tower-option.selected {
  border-color: rgba(255, 189, 62, 0.88);
  background: linear-gradient(180deg, #fff7d6, #ffe7a1);
}

.tower-option:disabled {
  opacity: 0.48;
}

/* V127: Mohist backpack formation as a real 5x8 city-wall inventory. */
.tower-wall-prep {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.8vw, 20px);
}

.tower-placement-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(216, 175, 92, 0.38);
  border-radius: 18px;
  background: rgba(255, 250, 229, 0.88);
}

.tower-placement-guide span {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 14px;
  color: rgba(70, 55, 38, 0.6);
  font-weight: 900;
  text-align: center;
}

.tower-placement-guide b {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(92, 117, 103, 0.14);
}

.tower-placement-guide span.active {
  background: linear-gradient(180deg, #fff5bf, #f2c76e);
  color: #56371f;
  box-shadow: 0 0 0 3px rgba(244, 196, 85, 0.2);
  animation: towerGuidePulse 1.2s ease-in-out infinite;
}

.tower-placement-guide span.done {
  background: rgba(191, 231, 207, 0.74);
  color: #235c50;
}

.tower-wall-board {
  display: grid;
  gap: clamp(10px, 1.4vw, 14px);
  padding: clamp(10px, 1.5vw, 16px);
  border: 3px solid rgba(64, 54, 40, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(214, 191, 145, 0.22), rgba(85, 113, 111, 0.12)),
    repeating-linear-gradient(90deg, rgba(73, 84, 80, 0.08) 0 18px, rgba(255, 248, 220, 0.08) 18px 36px);
}

.tower-wall-prep .tower-wall-head {
  grid-template-columns: auto auto minmax(120px, 1fr) auto;
  padding: 10px 12px;
  border: 2px solid rgba(65, 55, 40, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(102, 75, 48, 0.18), rgba(255, 246, 214, 0.22)),
    linear-gradient(90deg, rgba(255, 238, 164, 0.24), transparent);
}

.tower-shield {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 17%, 82% 76%, 50% 100%, 18% 76%, 8% 17%);
  background: linear-gradient(180deg, #d9b66e, #7d6f5f);
  color: #fff6d4;
  font-size: 0.78rem;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(53, 39, 24, 0.34);
}

.tower-wall-prep .tower-wall-head small {
  color: rgba(61, 49, 35, 0.64);
  font-weight: 950;
  white-space: nowrap;
}

.tower-wall-prep .tower-grid {
  border: 3px solid rgba(56, 66, 62, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(118, 148, 139, 0.28), rgba(65, 81, 82, 0.2)),
    repeating-linear-gradient(90deg, rgba(219, 240, 231, 0.18) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgba(68, 77, 71, 0.13) 0 1px, transparent 1px 20%);
  box-shadow:
    inset 0 0 0 5px rgba(255, 245, 202, 0.16),
    0 12px 26px rgba(60, 43, 24, 0.12);
}

.tower-wall-prep .tower-cell {
  border: 2px solid rgba(50, 76, 72, 0.38);
  border-radius: 12px 12px 8px 8px;
  background:
    linear-gradient(180deg, rgba(210, 230, 221, 0.9), rgba(118, 149, 140, 0.78)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 42%);
  color: rgba(44, 67, 63, 0.62);
  box-shadow:
    inset 0 -6px 0 rgba(59, 82, 79, 0.18),
    0 5px 0 rgba(55, 63, 55, 0.18);
}

.tower-wall-prep .tower-cell::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 16%;
  right: 16%;
  height: 8px;
  border-radius: 6px 6px 2px 2px;
  background: rgba(236, 250, 238, 0.52);
}

.tower-wall-prep .tower-cell.locked {
  background:
    repeating-linear-gradient(135deg, rgba(77, 82, 75, 0.24) 0 8px, rgba(56, 62, 61, 0.34) 8px 16px),
    linear-gradient(180deg, rgba(157, 158, 145, 0.5), rgba(97, 104, 100, 0.44));
  color: rgba(255, 246, 211, 0.62);
  cursor: not-allowed;
}

.tower-wall-prep .tower-cell.occupied-part {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 233, 144, 0.48), transparent 46%),
    linear-gradient(180deg, rgba(236, 210, 150, 0.92), rgba(148, 128, 92, 0.72));
  color: rgba(74, 57, 35, 0.56);
  cursor: default;
}

.tower-occupied-part {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 12px;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 246, 196, 0.76), transparent 40%),
    var(--tower-hue, #d58245);
  color: rgba(255, 248, 222, 0.9);
  font-size: 1.05rem;
  font-weight: 950;
  opacity: 0.68;
  box-shadow:
    inset 0 -4px 0 rgba(67, 45, 23, 0.16),
    0 4px 0 rgba(59, 69, 62, 0.12);
}

.tower-wall-prep .tower-cell.invalid {
  border-color: rgba(199, 68, 47, 0.82);
  animation: towerInvalidShake 0.38s ease;
  box-shadow:
    0 0 0 5px rgba(205, 65, 45, 0.14),
    inset 0 0 0 2px rgba(255, 224, 204, 0.36);
}

.tower-wall-prep .tower-cell.merge-flash {
  border-color: rgba(255, 197, 71, 0.95);
  animation: towerMergeGlow 0.72s ease;
  box-shadow:
    0 0 0 8px rgba(255, 210, 83, 0.22),
    0 0 34px rgba(255, 193, 56, 0.5);
}

.tower-wall-prep .tower-cell.placement-target {
  z-index: 2;
  border-color: rgba(248, 184, 48, 0.96);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 250, 189, 0.96), rgba(247, 199, 83, 0.74) 62%, rgba(115, 154, 130, 0.72));
  box-shadow:
    0 0 0 5px rgba(255, 213, 95, 0.28),
    0 0 24px rgba(255, 188, 52, 0.58);
  animation: towerPlacementTarget 1s ease-in-out infinite;
}

.tower-place-here {
  position: relative;
  z-index: 2;
  color: #5c361b;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem);
  font-weight: 950;
  line-height: 1.05;
}

.tower-lock {
  font-size: 0.78rem;
  color: rgba(255, 247, 217, 0.7);
}

.tower-level-pop {
  position: absolute;
  left: 50%;
  top: -20%;
  transform: translateX(-50%);
  color: #ffe28a;
  font-size: 0.8rem;
  text-shadow: 0 2px 0 rgba(76, 43, 17, 0.34);
  animation: towerLevelFloat 0.78s ease forwards;
}

.tower-shop-rail-wrap {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tower-shop-rail-wrap h3,
.tower-shop-rail-wrap p {
  margin: 0;
}

.tower-shop-rail-wrap h3 {
  color: #235c50;
}

.tower-shop-rail-wrap p {
  color: rgba(67, 50, 34, 0.7);
  font-weight: 900;
}

.tower-shop-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.tower-shop-rail .tower-option {
  flex: 0 0 min(230px, 72vw);
  scroll-snap-align: start;
  cursor: grab;
}

.tower-shop-rail .tower-option.selected::after {
  content: "已选择";
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #2f7f6e;
  color: #fff8da;
  font-size: 0.68rem;
  font-weight: 950;
}

.tower-shop-rail .tower-option {
  position: relative;
}

.tower-shop-rail .tower-option.dragging,
.tower-cell.dragging {
  opacity: 0.72;
  transform: scale(0.98);
}

.tower-bottom-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tower-auto-place,
.tower-refresh,
.tower-war-drum {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  color: #fff8db;
  font-weight: 950;
  box-shadow:
    0 10px 22px rgba(83, 49, 21, 0.18),
    inset 0 0 0 2px rgba(255, 245, 199, 0.2);
}

.tower-auto-place {
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 250, 205, 0.54), transparent 36%),
    linear-gradient(180deg, #4ea58f, #2f7467);
}

.tower-refresh {
  background:
    radial-gradient(circle at 28% 32%, rgba(255, 245, 201, 0.42), transparent 34%),
    linear-gradient(180deg, #8a7860, #4f5f5b);
}

.tower-war-drum {
  background:
    radial-gradient(circle at 22% 45%, rgba(255, 233, 161, 0.45), transparent 32%),
    linear-gradient(180deg, #d18743, #a34834);
}

.tower-refresh:disabled {
  opacity: 0.5;
}

.tower-auto-place:disabled,
.tower-war-drum.not-ready {
  opacity: 0.62;
}

.tower-war-drum.ready {
  animation: towerWarDrumReady 1.2s ease-in-out infinite;
}

.tower-battle-help {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(224, 242, 226, 0.86);
  color: #295e53;
  font-weight: 900;
  text-align: center;
}

.tower-battle-help.danger {
  background: rgba(255, 225, 190, 0.92);
  color: #8a3d29;
}

@keyframes towerGuidePulse {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes towerPlacementTarget {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes towerWarDrumReady {
  0%,
  100% {
    box-shadow: 0 10px 22px rgba(83, 49, 21, 0.18), inset 0 0 0 2px rgba(255, 245, 199, 0.2);
  }

  50% {
    box-shadow: 0 10px 24px rgba(178, 70, 42, 0.34), 0 0 0 5px rgba(244, 174, 78, 0.18), inset 0 0 0 2px rgba(255, 245, 199, 0.3);
  }
}

@keyframes towerInvalidShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

@keyframes towerMergeGlow {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(1.08) rotate(-1deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes towerLevelFloat {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }

  30% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate(-50%, -18px);
  }
}

.tower-battle-panel {
  min-height: 540px;
}

.stage3-battle {
  position: relative;
}

.stage3-battle.wall-hit {
  animation: towerWallShake 0.34s ease;
}

.tower-battle-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tower-battle-stats span {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(92, 76, 47, 0.22);
  border-radius: 999px;
  background: rgba(255, 248, 224, 0.68);
  color: rgba(54, 42, 28, 0.76);
  font-weight: 950;
  text-align: center;
}

.tower-lanes {
  display: grid;
  gap: 8px;
}

.tower-lanes-vertical {
  min-height: clamp(340px, 48vh, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 3px solid rgba(56, 56, 52, 0.62);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(147, 165, 150, 0.22), rgba(80, 98, 96, 0.22)),
    repeating-linear-gradient(90deg, rgba(85, 101, 97, 0.16) 0 1px, transparent 1px 20%);
}

.tower-lane {
  position: relative;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(91, 75, 50, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 238, 184, 0.24), rgba(85, 117, 83, 0.16)),
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, 0.28) 8% 8.7%);
}

.tower-lane-vertical {
  height: auto;
  min-height: 320px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(127, 166, 142, 0.28), rgba(87, 100, 94, 0.36)),
    repeating-linear-gradient(0deg, rgba(255, 247, 206, 0.18) 0 16px, transparent 16px 32px);
}

.tower-lane-vertical::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 18px;
  border: 2px solid rgba(63, 58, 50, 0.42);
  border-radius: 6px;
  background: linear-gradient(180deg, #85928e, #5a6763);
}

.tower-lane-label {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 1;
  color: rgba(56, 40, 25, 0.48);
  font-size: 0.75rem;
  font-weight: 950;
}

.tower-enemy {
  position: absolute;
  top: 18px;
  width: 42px;
  height: 32px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, #b87143, #6d4027);
  color: #fff3ce;
  font-weight: 950;
  box-shadow: 0 8px 14px rgba(68, 37, 18, 0.18);
}

.tower-lanes-vertical .tower-enemy {
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  border: 3px solid #423728;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #b98252, #714328);
  image-rendering: pixelated;
}

.tower-enemy.boss {
  width: 58px;
  background: linear-gradient(180deg, #c75342, #6d2930);
}

.tower-lanes-vertical .tower-enemy.cavalry {
  background: linear-gradient(180deg, #d29a54, #7a4930);
}

.tower-lanes-vertical .tower-enemy.size-2 {
  width: clamp(46px, 5.4vw, 66px);
  height: clamp(34px, 4.2vw, 52px);
  z-index: 3;
  border-width: 3px;
}

.tower-lanes-vertical .tower-enemy.ram,
.tower-lanes-vertical .tower-enemy.wooden-horse {
  background: linear-gradient(180deg, #8f7452, #493d31);
}

.tower-lanes-vertical .tower-enemy.giant-boss,
.tower-lanes-vertical .tower-enemy.wooden-horse-ram-boss,
.tower-lanes-vertical .tower-enemy.size-3 {
  width: clamp(52px, 7vw, 86px);
  height: clamp(42px, 5.4vw, 72px);
  z-index: 5;
  border-width: 4px;
  font-size: clamp(1rem, 2vw, 1.8rem);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 225, 140, 0.4), transparent 32%),
    linear-gradient(180deg, #b84d42, #553033);
}

.tower-lanes-vertical .tower-enemy.wooden-horse-ram-boss {
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 225, 140, 0.4), transparent 32%),
    linear-gradient(180deg, #7b6147, #3e352d);
}

.tower-enemy.ranged {
  background: linear-gradient(180deg, #7a8b75, #425d5a);
}

.tower-enemy.at-wall {
  animation: towerEnemyAttack 0.78s steps(2, end) infinite;
  box-shadow:
    0 0 0 5px rgba(199, 73, 52, 0.16),
    0 10px 16px rgba(88, 37, 20, 0.22);
}

.tower-enemy i {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -5px;
  height: 4px;
  border-radius: 999px;
  background: #87d18f;
}

.tower-cell.firing {
  animation: towerFirePulse 0.36s ease;
  box-shadow:
    0 0 0 5px rgba(255, 211, 96, 0.2),
    0 0 22px rgba(255, 174, 54, 0.38);
}

.tower-cell.cell-hit {
  animation: towerCellHitFlash 0.48s ease;
  box-shadow:
    0 0 0 5px rgba(200, 72, 48, 0.16),
    inset 0 0 0 3px rgba(255, 212, 170, 0.34);
}

.tower-cell.disabled-by-boss {
  filter: grayscale(0.62) brightness(0.82);
  background:
    repeating-linear-gradient(135deg, rgba(96, 69, 43, 0.18) 0 7px, rgba(46, 50, 48, 0.2) 7px 14px),
    linear-gradient(180deg, rgba(221, 214, 181, 0.74), rgba(117, 124, 116, 0.72));
}

.tower-cell.disabled-by-boss::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 18%;
  height: 62%;
  border-radius: 999px;
  background:
    linear-gradient(160deg, transparent 0 42%, rgba(82, 43, 29, 0.68) 42% 48%, transparent 48%),
    linear-gradient(25deg, transparent 0 48%, rgba(82, 43, 29, 0.5) 48% 54%, transparent 54%);
  pointer-events: none;
}

.tower-wall-grid-shell {
  position: relative;
}

.tower-wall-grid-shell.wall-hit .tower-grid {
  animation: towerWallFlash 0.32s ease;
}

.tower-wall-grid-shell.low-hp .tower-grid {
  filter: saturate(0.82) contrast(1.05);
}

.tower-wall-crack {
  position: absolute;
  z-index: 3;
  display: none;
  width: 3px;
  height: 44%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent 0 10%, rgba(86, 43, 26, 0.72) 10% 35%, transparent 35% 42%, rgba(86, 43, 26, 0.72) 42% 70%, transparent 70%);
  pointer-events: none;
}

.tower-wall-grid-shell.low-hp .tower-wall-crack {
  display: block;
}

.tower-wall-crack-a {
  left: 34%;
  top: 22%;
  transform: rotate(-14deg);
}

.tower-wall-crack-b {
  right: 28%;
  top: 18%;
  transform: rotate(18deg);
}

.tower-wall-grid-shell.collapse .tower-grid {
  animation: towerWallCollapse 0.9s ease both;
}

.tower-brick-fragments {
  position: absolute;
  inset: auto 8% 6% 8%;
  z-index: 4;
  pointer-events: none;
}

.tower-brick-fragments i {
  position: absolute;
  left: calc(8% + (var(--frag) * 8%));
  bottom: 0;
  width: 11px;
  height: 7px;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #b8cbbd, #6f8d83);
}

.tower-wall-grid-shell.wall-hit .tower-brick-fragments i,
.tower-wall-grid-shell.collapse .tower-brick-fragments i {
  animation: towerBrickBurst 0.68s ease forwards;
  animation-delay: calc(var(--frag) * 0.025s);
}

.tower-wall-grid-shell.collapse .tower-brick-fragments i {
  animation-duration: 1.05s;
}

.tower-defeat-result {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 224, 166, 0.42), transparent 30%),
    linear-gradient(180deg, rgba(255, 249, 226, 0.96), rgba(240, 211, 165, 0.9));
}

.tower-wave-result {
  min-height: 420px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.tower-wave-result .dia-avatar {
  width: clamp(96px, 16vw, 160px);
  height: clamp(96px, 16vw, 160px);
  background-image: url("./assets/qvector/dia-qvector-v2.webp");
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.tower-report-card {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: clamp(16px, 2.4vw, 24px);
}

.tower-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tower-report-metrics span {
  display: grid;
  place-items: center;
  min-height: 86px;
  border-radius: 22px;
  background: rgba(255, 248, 226, 0.78);
  color: #245a50;
}

.tower-report-metrics strong {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.tower-report-metrics small {
  color: rgba(69, 52, 36, 0.65);
  font-weight: 900;
}

@keyframes towerWallShake {
  0%,
  100% {
    transform: translateX(0);
  }

  22% {
    transform: translateX(-5px);
  }

  48% {
    transform: translateX(4px);
  }

  72% {
    transform: translateX(-2px);
  }
}

@keyframes towerWallFlash {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 5px rgba(255, 245, 202, 0.16),
      0 12px 26px rgba(60, 43, 24, 0.12);
  }

  45% {
    box-shadow:
      inset 0 0 0 5px rgba(255, 230, 196, 0.36),
      0 0 0 5px rgba(197, 65, 46, 0.16),
      0 12px 26px rgba(60, 43, 24, 0.12);
  }
}

@keyframes towerBrickBurst {
  from {
    opacity: 0.95;
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    opacity: 0;
    transform: translate(calc((var(--frag) - 5) * 8px), calc(-18px - (var(--frag) % 3) * 10px)) rotate(calc(var(--frag) * 36deg));
  }
}

@keyframes towerWallCollapse {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  52% {
    transform: translateY(12px) rotate(-0.7deg);
    opacity: 0.92;
  }

  100% {
    transform: translateY(26px) rotate(1.2deg);
    opacity: 0.38;
  }
}

@keyframes towerEnemyAttack {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(5px);
  }
}

@keyframes towerFirePulse {
  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }
}

@keyframes towerCellHitFlash {
  0%,
  100% {
    transform: scale(1);
  }

  48% {
    transform: scale(0.95) rotate(-1deg);
  }
}

@media (max-width: 840px) {
  .tower-shell {
    min-height: 96svh;
    width: 96vw;
    padding: 10px;
    border-radius: 28px;
  }

  .tower-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .tower-stats {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tower-stats span {
    text-align: center;
  }

  .tower-word-card,
  .tower-shop-panel {
    grid-template-columns: 1fr;
  }

  .tower-word-defense-lanes {
    grid-template-columns: 1fr;
  }

  .tower-word-card {
    text-align: center;
  }

  .tower-word-card .visual-canvas {
    min-height: 120px;
  }

  .tower-grid {
    grid-template-columns: repeat(8, minmax(28px, 1fr));
  }

  .tower-cell {
    min-height: 38px;
    border-radius: 12px;
  }
}

@media (max-width: 540px) {
  .tower-defense-screen {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 0;
  }

  .tower-shell {
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    padding: 7px;
    border-width: 3px;
    border-radius: 0;
    overflow: hidden;
    min-width: 0;
  }

  .mohist-pixel-td .tower-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
  }

  .tower-panel {
    padding: 8px;
    border-radius: 16px;
    min-width: 0;
  }

  .tower-hero {
    min-width: 0;
    overflow: hidden;
  }

  .tower-hero h2,
  .tower-hero p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tower-stats,
  .tower-report-metrics,
  .tower-battle-stats {
    grid-template-columns: 1fr;
  }

  .tower-wall-prep .tower-wall-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
  }

  .tower-wall-prep .tower-wall-head .tower-wall-hp,
  .tower-wall-prep .tower-wall-head small {
    grid-column: 1 / -1;
  }

  .tower-wall-prep .tower-wall-head small {
    white-space: normal;
  }

  .tower-shop-rail .tower-option {
    flex-basis: min(210px, 78vw);
  }

  .tower-bottom-actions {
    grid-template-columns: 1fr 1fr;
  }

  .tower-bottom-actions .tower-auto-place {
    grid-column: 1 / -1;
  }

  .tower-placement-guide {
    gap: 4px;
    padding: 6px;
  }

  .tower-placement-guide span {
    min-height: 42px;
    gap: 4px;
    padding: 5px 4px;
    font-size: 0.72rem;
  }

  .tower-placement-guide b {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .tower-slots span,
  .tower-letter {
    min-width: 40px;
    height: 46px;
  }

  .tower-shop-list {
    grid-template-columns: 1fr 1fr;
  }

  .tower-lanes-vertical {
    width: min(100%, 330px);
    margin: 0 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 300px;
    gap: 3px;
    padding: 5px;
    min-width: 0;
    overflow: hidden;
  }

  .tower-lane-vertical {
    min-width: 0;
    min-height: 280px;
    border-radius: 8px;
  }

  .tower-lane-label {
    left: 50%;
    top: 5px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 249, 220, 0.54);
    color: transparent;
    font-size: 0;
  }

  .tower-lane-label::after {
    content: counter(tower-lane);
    color: rgba(64, 50, 34, 0.62);
    font-size: 0.68rem;
    font-weight: 950;
  }

  .tower-lanes-vertical {
    counter-reset: tower-lane;
  }

  .tower-lane-vertical {
    counter-increment: tower-lane;
  }

  .tower-lanes-vertical .tower-enemy {
    width: 30px;
    height: 26px;
    border-width: 2px;
    font-size: 0.85rem;
  }

  .tower-lanes-vertical .tower-enemy.boss {
    width: 38px;
  }

  .tower-battlefield {
    gap: 8px;
    min-width: 0;
  }

  .tower-battle-panel {
    min-height: 0;
    overflow: hidden;
  }

  .tower-battle-panel .tower-grid {
    display: none;
  }

  .tower-battle-panel .tower-wall-grid-shell .tower-grid {
    display: grid;
    max-height: 180px;
    overflow: hidden;
  }

  .tower-wall-crack {
    height: 58%;
  }

  .tower-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    min-width: 0;
  }

  .tower-cell {
    min-height: 30px;
    border-radius: 9px;
  }
}

/* V141 local: reusable 3:4 scene art plus an independent vocabulary plaque. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art {
  align-self: center !important;
  justify-self: center !important;
  width: min(100%, 500px);
  height: auto !important;
  min-height: 0;
  padding: clamp(9px, 1.5vw, 14px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .swipe-card-content {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  width: 100%;
  height: auto !important;
  overflow: visible;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .word-visual.three-four-card-visual {
  position: relative;
  inset: auto;
  width: min(100%, 460px);
  height: auto;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .three-four-card-visual .visual-canvas {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(18px, 2.8vw, 28px);
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .three-four-card-visual .word-art-image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .swipe-word-panel {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 4;
  width: min(88%, 360px);
  min-height: 172px;
  max-width: none;
  margin: clamp(-62px, -7vw, -48px) auto 0;
  padding: 18px 18px 20px;
  align-content: center;
  transform: none;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art {
    width: 100%;
    padding: 9px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .word-visual.three-four-card-visual {
    width: 100%;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .swipe-word-panel {
    width: min(88%, 310px);
    min-height: 164px;
    margin-top: -54px;
    padding: 16px 14px 18px;
  }
}

@media (min-width: 700px) and (orientation: portrait) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art {
    width: min(100%, 460px);
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art .swipe-word-panel {
    width: min(86%, 370px);
  }
}

/* V143 local: keep the swipe-page back label compact at every viewport width. */
body[data-mode="swipe"] .qvector-swipe-v91 .course-back {
  width: auto;
  min-width: 88px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .course-back {
    min-width: 76px;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.92rem;
  }
}

/* V145: phone-miniapp-only viewport contract.
   The product now targets a single handheld canvas instead of compromising with tablet cards. */
@media (max-width: 560px) {
  :root {
    --phone-safe-top: env(safe-area-inset-top, 0px);
    --phone-safe-right: env(safe-area-inset-right, 0px);
    --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
    --phone-safe-left: env(safe-area-inset-left, 0px);
    --phone-page-height: 100svh;
    --phone-page-height: 100dvh;
  }

  html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overscroll-behavior: none;
  }

  body {
    box-sizing: border-box;
    width: 100%;
    min-width: 320px;
    min-height: var(--phone-page-height);
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body *,
  body *::before,
  body *::after {
    box-sizing: border-box;
  }

  button,
  [role="button"],
  select,
  input {
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell,
  .app-shell main,
  .study-area {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .app-shell {
    min-height: var(--phone-page-height);
    padding: 0;
    overflow-x: clip;
  }

  .app-shell main {
    display: block;
    min-height: var(--phone-page-height);
  }

  .study-area {
    min-height: var(--phone-page-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .qvector-loading-v79 {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    max-width: none;
    border: 0;
    border-radius: 0;
  }

  body[data-mode="home"] .app-shell:has(.qvector-opening-active),
  body[data-mode="home"] .study-area:has(.qvector-opening-active),
  .storybook-map-v75.qvector-opening-active,
  .qvector-opening {
    width: 100vw;
    max-width: none;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .qvector-opening {
    position: fixed;
    inset: 0;
  }

  .qvector-opening-skip,
  .qvector-opening-header,
  .opening-topbar {
    top: max(12px, var(--phone-safe-top));
  }

  .qvector-opening-dialogue {
    right: max(12px, var(--phone-safe-right));
    bottom: max(12px, calc(var(--phone-safe-bottom) + 8px));
    left: max(12px, var(--phone-safe-left));
    width: auto;
    min-height: 132px;
    padding: 15px 16px 18px;
  }

  body[data-mode="home"] .app-shell:has(.storybook-map-v75.map-ready),
  body[data-mode="home"] .study-area:has(.storybook-map-v75.map-ready),
  .storybook-map-v75.map-first-home.map-ready,
  .storybook-map-v75.map-ready .home-map-preview.dunhuang-map-scene-v75 {
    width: 100vw;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .storybook-map-v75.map-ready .home-map-title,
  .storybook-map-v75.map-ready .home-map-count {
    top: max(12px, var(--phone-safe-top));
  }

  body[data-mode="intro"],
  body[data-mode="intro"] .app-shell,
  body[data-mode="intro"] .study-area,
  .qvector-intro-v92 {
    width: 100vw;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .intro-opening-dialogue.qvector-opening-dialogue {
    right: max(12px, var(--phone-safe-right));
    left: max(12px, var(--phone-safe-left));
    width: auto;
  }

  body[data-mode="swipe"],
  body[data-mode="swipe"] .app-shell,
  body[data-mode="swipe"] .study-area,
  body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
    width: 100vw;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
    padding:
      max(8px, var(--phone-safe-top))
      max(8px, var(--phone-safe-right))
      max(8px, var(--phone-safe-bottom))
      max(8px, var(--phone-safe-left));
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-room-v91 {
    width: 100%;
    max-width: none;
    height: calc(var(--phone-page-height) - max(16px, var(--phone-safe-top)) - max(16px, var(--phone-safe-bottom)));
    max-height: none;
    margin: 0;
    padding: 9px;
    gap: 7px;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .course-top {
    min-height: 48px;
    padding: 5px 8px;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .compact-swipe-stage {
    min-height: 0;
    overflow: hidden;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-three-four-art {
    width: min(100%, 340px);
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-action-buttons,
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-guide {
    width: 100%;
    max-width: none;
  }

  body[data-mode="practice"],
  body[data-mode="practice"] .app-shell,
  body[data-mode="practice"] .study-area,
  body[data-mode="practice"] .qvector-practice-v89.practice-mixed {
    width: 100vw;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  body[data-mode="practice"] .qvector-practice-v89.practice-mixed {
    place-items: stretch;
  }

  body[data-mode="practice"] .qvector-practice-v89 .practice-room-v89.official-practice-v74.practice-room.lesson-screen.mixed-practice {
    width: 100%;
    max-width: none;
    height: var(--phone-page-height);
    min-height: var(--phone-page-height);
    margin: 0;
    padding:
      max(8px, var(--phone-safe-top))
      max(9px, var(--phone-safe-right))
      max(10px, var(--phone-safe-bottom))
      max(9px, var(--phone-safe-left));
    gap: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-mode="practice"] .qvector-practice-v89 .course-top {
    position: sticky;
    top: 0;
    z-index: 8;
    min-height: 48px;
  }

  body[data-mode="practice"] .qvector-practice-v89 .mixed-question-head,
  body[data-mode="practice"] .qvector-practice-v89 .mixed-card,
  body[data-mode="practice"] .qvector-practice-v89 .mixed-dia-feedback {
    border-radius: 20px;
  }

  body[data-mode="practice"] .qvector-practice-v89 .mixed-image-option,
  body[data-mode="practice"] .qvector-practice-v89 .mixed-text-option,
  body[data-mode="practice"] .qvector-practice-v89 .mixed-match-column button,
  body[data-mode="practice"] .qvector-practice-v89 .mixed-letter-bank .letter-tile {
    min-height: 52px;
  }

  body[data-mode="tower"] {
    height: auto;
    min-height: var(--phone-page-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-mode="tower"] .app-shell,
  body[data-mode="tower"] .study-area,
  .tower-defense-screen,
  .tower-shell,
  .mohist-pixel-td .tower-shell {
    width: 100%;
    max-width: none;
    min-height: var(--phone-page-height);
    margin: 0;
    border-radius: 0;
  }

  .tower-defense-screen {
    display: block;
    padding: 0;
    overflow-x: hidden;
  }

  .tower-shell,
  .mohist-pixel-td .tower-shell {
    height: auto;
    padding:
      max(7px, var(--phone-safe-top))
      max(7px, var(--phone-safe-right))
      max(10px, var(--phone-safe-bottom))
      max(7px, var(--phone-safe-left));
    overflow: visible;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }

  .tower-hero {
    gap: 8px;
    padding: 10px;
  }

  .tower-hero h2 {
    font-size: clamp(1.18rem, 5.4vw, 1.55rem);
  }

  .tower-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .tower-stats span {
    padding: 6px 4px;
    font-size: 0.74rem;
    white-space: normal;
    text-align: center;
  }

  .tower-panel {
    padding: 9px;
    border-radius: 16px;
  }

  .tower-word-defense-lanes {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tower-word-enemy {
    min-height: 58px;
  }

  .tower-word-card {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 9px;
    text-align: center;
  }

  .tower-word-card .visual-canvas {
    min-height: 110px;
    max-height: 160px;
  }

  .tower-shop-rail {
    margin-right: -9px;
    margin-left: -9px;
    padding-right: 9px;
    padding-left: 9px;
    scroll-padding-inline: 9px;
  }

  .tower-shop-rail .tower-option {
    flex-basis: min(236px, 76vw);
  }

  .tower-bottom-actions {
    position: sticky;
    bottom: max(0px, var(--phone-safe-bottom));
    z-index: 9;
    padding-top: 6px;
    background: linear-gradient(180deg, transparent, rgba(207, 163, 94, 0.96) 28%);
  }

  .tower-battle-panel {
    min-height: 0;
    overflow: visible;
  }

  .tower-lanes-vertical {
    width: 100%;
    min-height: 300px;
  }

  .tower-wave-result {
    min-height: calc(var(--phone-page-height) - 28px);
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
  }

  .tower-report-metrics,
  .tower-battle-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-mode="report"] .app-shell,
  body[data-mode="report"] .study-area,
  body[data-mode="parent"] .app-shell,
  body[data-mode="parent"] .study-area {
    width: 100%;
    max-width: none;
    min-height: var(--phone-page-height);
    margin: 0;
    padding-right: max(12px, var(--phone-safe-right));
    padding-bottom: max(14px, var(--phone-safe-bottom));
    padding-left: max(12px, var(--phone-safe-left));
  }
}

/* V146 local: one portrait-card composition for every illustrated swipe card. */
body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel {
  width: 86%;
  max-width: 470px;
}

@media (max-width: 560px) {
  body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel {
    width: 86%;
    max-width: 330px;
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* V151 local: lock the phone canvas and keep the full 3:4 art inside the card. */
body[data-mode="swipe"] .qvector-swipe-v91.swipe-layout {
  width: 390px;
  max-width: 100vw;
  margin-right: auto;
  margin-left: auto;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art {
  width: 356px;
  max-width: 100%;
  justify-self: center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .word-visual.portrait-card-visual {
  inset: 0 0 auto;
  height: auto;
  aspect-ratio: 3 / 4;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .portrait-card-visual .word-art-image {
  object-fit: contain;
  object-position: center center;
}

body[data-mode="swipe"] .qvector-swipe-v91 .swipe-card.swipe-card-portrait-art .swipe-word-panel {
  width: 326px;
  min-width: 326px;
  max-width: calc(100% - 2px);
  height: 208px;
  min-height: 0;
  padding: 14px 20px 16px;
}

/* V152 local: first-look completion is a Shazhou Inn dialogue, not a legacy pixel summary. */
body[data-mode="checkpoint"] .app-shell,
body[data-mode="checkpoint"] .study-area {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #17283d;
  box-shadow: none;
}

body[data-mode="checkpoint"] .app-shell main {
  gap: 0;
  margin-top: 0;
}

.qvector-checkpoint-v152 {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 231, 142, 0.18), transparent 36%),
    var(--shazhou-scene-image) var(--shazhou-scene-position) / var(--shazhou-scene-size) no-repeat,
    #17283d;
  color: #3a2a1d;
}

.qvector-checkpoint-v152::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18, 28, 42, 0.12), transparent 42%, rgba(30, 20, 18, 0.3));
  pointer-events: none;
}

.checkpoint-opening-topbar {
  z-index: 30;
}

.checkpoint-opening-scene {
  z-index: 3;
}

.qvector-checkpoint-v152 .intro-opening-stars {
  top: 38%;
  opacity: 0.34;
}

.qvector-checkpoint-v152 .intro-opening-dia {
  bottom: 29%;
}

.qvector-checkpoint-v152 .intro-opening-xiao-yezi {
  bottom: 26%;
}

.checkpoint-opening-dialogue-v152.qvector-opening-dialogue {
  z-index: 24;
  min-height: 214px;
  padding: 18px 20px 76px;
  cursor: default;
}

.checkpoint-dialogue-detail-v152 {
  margin: 8px 0 0;
  color: #6b6253;
  font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  font-weight: 750;
  line-height: 1.5;
}

.checkpoint-dialogue-action-v152 {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  min-height: 50px;
  border: 1px solid rgba(31, 106, 84, 0.44);
  border-radius: 16px;
  background: linear-gradient(180deg, #72d1b2, #2f8d70);
  color: #fffdf4;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(30, 76, 60, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.checkpoint-dialogue-action-v152:active {
  transform: translateY(1px);
}

@media (max-width: 560px) {
  .qvector-checkpoint-v152 .qvector-opening-topbar {
    left: 18px;
    width: calc(100% - 36px);
    transform: none;
  }

  .qvector-checkpoint-v152 .intro-opening-dia {
    left: 4%;
    bottom: 31%;
    width: 122px;
  }

  .qvector-checkpoint-v152 .intro-opening-xiao-yezi {
    right: 28px;
    bottom: 28%;
    width: 142px;
  }

  .checkpoint-opening-dialogue-v152.qvector-opening-dialogue {
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
    width: calc(100% - 24px);
  }
}