@import url("../../../../assets/tv-kid-reach.css");
:root {
  --apple: #e23d2d;
  --apple-deep: #c62828;
  --leaf: #2f9e44;
  --leaf-deep: #1b7a32;
  --lime: #d4e157;
  --ink: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --paper: #f6f1e8;
  --card: #ffffff;
  --sky: #4a90c8;
  --grass: #2f7a45;
  --dirt: #d46767;
  --stage: #161310;
  --glass: rgba(255, 255, 255, 0.92);
  --shadow: 0 18px 40px rgba(28, 25, 23, 0.08);
  --font: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --letter: "Fredoka", "DM Sans", sans-serif;
  --hand: "Patrick Hand", "ZCOOL KuaiLe", "Ma Shan Zheng", cursive;
  --radius: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1.12rem;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(255, 186, 120, 0.28), transparent 55%),
    radial-gradient(700px 380px at 110% 0%, rgba(167, 214, 180, 0.28), transparent 50%),
    var(--paper);
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button, a { font-family: inherit; }
button, .btn, .btn-icon, .choice, .mem-card, .chant-tile, .chant-slot, .onset-btn, .pick-chip, .game-card, .word-hero, .say-btn {
  touch-action: manipulation;
}
.hidden { display: none !important; }

/* —— 课堂板：横屏 16:9，竖屏铺满 —— */
body.deck {
  background: var(--stage);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(226, 61, 45, 0.18), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(47, 122, 69, 0.16), transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 100dvh;
}
body.deck .board {
  width: min(100vw - 24px, calc((100dvh - 24px) * 16 / 9));
  height: min(100dvh - 24px, calc((100vw - 24px) * 9 / 16));
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
body.deck .board::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--apple);
  pointer-events: none;
  z-index: 2;
}
@media (orientation: portrait) and (max-width: 900px) {
  body.deck { padding: 0; }
  body.deck .board {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 18px;
  background: rgba(246, 241, 232, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
body.deck .topbar { position: relative; }
.az-rail {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px 18px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.az-rail::-webkit-scrollbar { display: none; }
.az-chip {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: var(--letter);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  touch-action: manipulation;
}
.az-chip.is-on { background: var(--apple); color: #fff; border-color: var(--apple); }
.az-chip.is-soon { opacity: 0.42; }
.az-chip.is-review {
  width: auto;
  min-width: 30px;
  padding: 0 7px;
  font-family: "Fredoka", "ZCOOL KuaiLe", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #fff8e1, #e3f2fd);
  border-color: #ffb74d;
  color: #e65100;
  box-shadow: 0 2px 0 #ffcc80;
}
.az-chip.is-review:hover {
  background: linear-gradient(135deg, #ffe082, #bbdefb);
  color: #bf360c;
}

.game-rail {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px 18px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.game-rail::-webkit-scrollbar { display: none; }
.game-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 54px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.game-chip .n {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--apple);
  line-height: 1;
}
.game-chip .t {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.15;
  white-space: nowrap;
}
.game-chip.is-hub .n { color: var(--ink); }
.game-chip.is-on {
  background: var(--apple);
  border-color: var(--apple);
  color: #fff;
}
.game-chip.is-on .n,
.game-chip.is-on .t { color: #fff; }

.soon-pane {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.cover.soon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar h1 {
  margin: 0; flex: 1; min-width: 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700;
  letter-spacing: 0.02em;
}
.pill {
  background: var(--ink); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 6px 12px; font-size: 0.78rem;
}
.btn-icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink); font-size: 1.05rem;
  flex-shrink: 0;
}
.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.deck-main {
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  overflow: auto;
  padding: 12px 22px 18px;
}

.hero {
  position: relative; border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 28px;
}
.hero img { width: 100%; height: clamp(180px, 34vw, 300px); object-fit: cover; }
.hero-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 22px 24px;
  background: linear-gradient(transparent, rgba(28, 25, 23, 0.78));
  color: #fff;
}
.hero-cap h2 { margin: 0 0 4px; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; }
.hero-cap p { margin: 0; opacity: 0.9; font-size: 0.95rem; }

.cover {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
}
.cover-art {
  margin: 0;
  overflow: hidden;
  background: #d7ec8a;
  position: relative;
  min-height: 0;
}
.cover-art img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-art img.is-broken {
  visibility: hidden;
}
.cover-copy {
  padding: 20px 24px 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  overflow: auto;
}
.kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.cover-aa {
  margin: 0;
  font-family: var(--letter);
  font-size: clamp(3.2rem, 8vw, 5.4rem);
  font-weight: 700;
  line-height: 0.9;
}
.cover-sub {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 1.15rem;
}
@media (max-width: 820px) {
  .cover-copy { padding: 16px 20px 20px; }
}

.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow a, .hub-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border-radius: 18px;
  padding: 9px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.8);
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.flow .n, .hub-item .n {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
  background: #fff1e8; color: var(--apple);
}
.flow li:nth-child(2) .n, .hub-item:nth-child(even) .n { background: #eaf7ee; color: var(--leaf-deep); }
.flow li:nth-child(3) .n { background: #e8f1fb; color: #2f6f9e; }
.flow li:nth-child(4) .n { background: #f3e8fb; color: #6b3aa0; }
.flow strong, .hub-item strong { display: block; font-size: 1.08rem; }
.flow small, .hub-item small { color: var(--muted); font-size: 0.82rem; }
.flow .go, .hub-item .go { color: var(--muted); font-size: 1.15rem; }

.btn {
  border: 0; cursor: pointer;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
}
.btn-apple { background: var(--apple); color: #fff; }
.btn-leaf { background: var(--leaf); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.panel {
  background: var(--card);
  border-radius: 24px;
  padding: 14px 16px 16px;
  box-shadow: var(--shadow);
}
.play-panel {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.play-panel #play-board { width: 100%; }
.panel h2 { margin: 0 0 6px; font-size: 1.3rem; }
.panel .lead, .lead {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
}
.letter-cell {
  aspect-ratio: 1; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; text-decoration: none; color: var(--ink); font-weight: 700;
}
.letter-cell.live { border: 2px solid var(--apple); box-shadow: var(--shadow); }
.letter-cell.live img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.letter-cell.locked { opacity: 0.4; }
.letter-cell small { font-size: 0.65rem; color: var(--muted); }

.card-grid {
  display: grid;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}

/* —— 分页课件 —— */
.deck-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 22px 16px;
}
.deck-bar {
  height: 3px; background: #eadfd3; border-radius: 99px; overflow: hidden; margin: 0 0 8px;
  flex-shrink: 0;
}
.deck-bar i {
  display: block; height: 100%; width: 0; background: var(--apple); border-radius: 99px;
  transition: width .25s ease;
}
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}
.slide-kicker {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.slide h2 {
  margin: 0;
  font-family: var(--letter);
  font-size: clamp(1.45rem, 3.6vw, 2.1rem);
  font-weight: 700;
}
.slide .hint { margin: 0; color: var(--muted); font-size: 0.9rem; }
.meet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: min(100%, 640px);
  align-items: stretch;
}
.meet-card {
  background: #fff;
  border-radius: 24px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.meet-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.aa-mark,
.meet-card[class*="-mark"] {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aa-mark .big,
.meet-card[class*="-mark"] .big {
  font-family: var(--letter);
  font-size: clamp(4.4rem, 14vw, 6.8rem);
  line-height: .9;
  font-weight: 700;
}
.vid-frame {
  width: min(100%, 720px);
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.vid-frame video { width: 100%; max-height: min(48vh, 380px); object-fit: contain; display: block; }
.word-hero {
  width: min(100%, 340px);
  background: #fff;
  border: 0;
  border-radius: 28px;
  padding: 14px 14px 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.word-hero img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.word-hero .en {
  font-family: var(--letter);
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  font-weight: 700;
  margin: 6px 0 0;
}
.word-hero .en b { color: var(--apple); }

.trace-board {
  width: min(100%, 860px);
  background: #fff;
  border-radius: 22px;
  padding: 8px 14px 12px;
  box-shadow: var(--shadow);
}
.trace-staff {
  /* 与 Lesson 02 四线格抄写同一套比例：格带占 50%，线 0 / 33 / 67 / 100 */
  --ln-sky: 25%;
  --ln-mid: 41.5%;
  --ln-base: 58.5%;
  --ln-desc: 75%;
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  max-height: min(46vh, 360px);
  margin: 0 auto;
}
.ln {
  position: absolute;
  left: 3%;
  right: 3%;
  height: 0;
  pointer-events: none;
  z-index: 1;
}
.ln.sky { top: var(--ln-sky); border-top: 2px solid var(--sky); }
.ln.mid { top: var(--ln-mid); border-top: 2px dashed rgba(74, 144, 200, 0.7); }
.ln.base { top: var(--ln-base); border-top: 3px solid var(--grass); }
.ln.desc { top: var(--ln-desc); border-top: 2px solid var(--dirt); }
.trace-staff canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.trace-ghost-cv {
  pointer-events: none;
  z-index: 0;
}
#trace-cv {
  z-index: 2;
}
.deck-nav {
  display: flex; justify-content: space-between; gap: 10px;
  padding-top: 8px;
  flex-shrink: 0;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 520px);
  margin: 0 auto;
}
.pic-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.choice {
  background: #fff; border: 3px solid #fff; border-radius: 16px;
  padding: 4px; cursor: pointer; box-shadow: var(--shadow);
  width: 100%;
}
.choice img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.choice.on { border-color: var(--leaf); }
.choice.good { border-color: var(--leaf-deep); background: #eaf7ee; }
.choice.bad { border-color: var(--apple); background: #fdecea; }
.say-btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  min-height: 30px;
  padding: 2px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--apple);
  color: #fff;
}
.say-btn:active { transform: scale(0.97); }
.say-btn.is-on { filter: brightness(0.86); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }

.big-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
  width: min(100%, 380px);
  margin-left: auto;
  margin-right: auto;
}
.big-choice button { min-height: 72px; font-size: 1.8rem; border-radius: 18px; }

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 640px);
  margin: 0 auto;
}
.mem-card {
  aspect-ratio: 1; border-radius: 14px; border: 0;
  background: linear-gradient(160deg, #3d8b55, #1b7a32);
  color: #fff; font-size: 1.4rem; cursor: pointer;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--letter);
  font-weight: 700;
}
.mem-card.face, .mem-card.preview {
  background: #fff; color: var(--ink); padding: 6px;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
}
.mem-card.face img, .mem-card.preview img { width: 100%; height: 100%; object-fit: contain; }
.mem-card.face b, .mem-card.preview b { color: var(--apple); }
.mem-card.matched {
  opacity: 0.42;
  pointer-events: none;
  box-shadow: none;
}

.pick-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.pick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 6px 12px 6px 6px; background: #fff; cursor: pointer;
  font: inherit; color: inherit;
}
.pick-chip.is-on { border-color: var(--leaf); background: #eaf7ee; }
.pick-chip img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; }

.chant-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  min-height: 110px; margin: 8px 0;
  width: min(100%, 640px);
  margin-left: auto;
  margin-right: auto;
}
.chant-slot, .chant-tile {
  background: #fff; border-radius: 16px; border: 2px dashed #d6d3d1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px; min-height: 108px; font: inherit;
}
.chant-tile { border-style: solid; cursor: pointer; box-shadow: var(--shadow); }
.chant-tile img, .chant-slot img { width: 64px; height: 64px; object-fit: contain; }

.play-actions { justify-content: center; width: 100%; margin-top: 4px; }
.feedback {
  min-height: 1.25em;
  margin: 8px 0 0;
  font-weight: 700;
  text-align: center;
}
.feedback.ok { color: var(--leaf-deep); }
.feedback.no { color: var(--apple-deep); }

.overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(28, 25, 23, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.result-card {
  background: #fff; border-radius: 28px; padding: 24px 20px;
  max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow);
}
.result-card h3 { margin: 0 0 8px; font-size: 1.5rem; }
.result-card p { color: var(--muted); }

.apple-trail { display: flex; gap: 8px; justify-content: center; margin: 0 0 10px; }
.apple-trail i {
  width: 12px; height: 12px; border-radius: 50%; background: #ffd6d0; display: inline-block;
}
.apple-trail i.done { background: var(--apple); }
.apple-trail i.now { outline: 3px solid #ffcc80; }

.play-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.g5-pic {
  width: min(42vw, 200px);
  background: #fff; border-radius: 20px; padding: 8px; box-shadow: var(--shadow);
}
.g5-pic img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.giant-word {
  font-family: var(--letter);
  font-size: clamp(2.8rem, 8vh, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 4px 0;
  color: var(--ink);
}
.giant-word b { color: var(--apple); }

.onset-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px;
}
.onset-btn {
  width: 58px; height: 58px; border-radius: 16px; border: 0;
  background: #fff; box-shadow: var(--shadow);
  font-family: var(--letter);
  font-size: 1.7rem; font-weight: 700; cursor: pointer;
}
.onset-btn.good { background: #eaf7ee; color: var(--leaf-deep); }
.onset-btn.bad { background: #fdecea; color: var(--apple); }
.blank-word {
  font-family: var(--letter);
  font-size: clamp(2.2rem, 6vh, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.blank-word .hole {
  display: inline-block; min-width: 0.9em;
  border-bottom: 4px solid var(--apple);
  color: var(--apple);
  text-align: center;
}

.round-mark {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .meet-row { grid-template-columns: 1fr; max-width: 280px; }
  .choice-grid, .memory-grid, .chant-row { grid-template-columns: repeat(2, 1fr); }
  .flow a, .hub-item { grid-template-columns: 48px 1fr auto; }
  .g5-pic { width: min(46vw, 168px); }
}
@media (max-width: 420px) {
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
}

/* —— 字母馆入口：铺满当前屏幕，按面积与比例改排，不锁 16:9 —— */
body.deck.az-hub {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
body.deck.az-hub .board {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  container-type: size;
  container-name: azboard;
}
body.az-hub .az-rail {
  gap: 5px;
  padding: 0 14px 8px;
  scroll-snap-type: x mandatory;
}
body.az-hub .az-chip {
  width: 32px;
  height: 32px;
  scroll-snap-align: center;
}
body.az-hub .az-chip.is-review {
  width: auto;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  font-size: 0.7rem;
}
body.az-hub .cover {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.9fr);
}
body.az-hub .cover-art {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  padding: clamp(8px, 2.2cqmin, 20px);
}
body.az-hub .cover-art img {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
body.az-hub .cover-copy {
  padding: clamp(10px, 2.2cqh, 28px) clamp(12px, 2cqw, 28px);
  gap: clamp(2px, 0.8cqh, 8px);
  overflow-x: hidden;
}
body.az-hub .cover-aa {
  font-size: clamp(2.2rem, 9cqh, 5.2rem);
}
body.az-hub .cover-sub {
  margin-bottom: clamp(4px, 1.4cqh, 12px);
  font-size: clamp(0.92rem, 2.2cqh, 1.15rem);
}
body.az-hub .flow {
  gap: clamp(6px, 1.3cqh, 12px);
}
body.az-hub .flow a {
  min-height: 48px;
  padding: clamp(6px, 1.3cqh, 12px) 14px;
}
body.az-hub .flow small {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (orientation: portrait) and (max-width: 900px) {
  body.deck.az-hub {
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }
  body.deck.az-hub .board {
    width: 100%;
    height: 100%;
  }
  body.az-hub .cover {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 40dvh) minmax(0, 1fr);
  }
  body.az-hub .cover-art { max-height: none; }
}

@media (max-width: 640px) {
  body.az-hub .cover {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(168px, 42dvh) minmax(0, 1fr);
  }
  body.az-hub .cover-art { max-height: none; }
  body.az-hub .cover-copy { padding: 10px 14px 16px; justify-content: flex-start; }
  body.az-hub .cover-aa { font-size: clamp(2rem, 7vh, 3rem); }
  body.az-hub .cover-sub { margin-bottom: 8px; }
  body.az-hub .flow {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
  }
  body.az-hub .flow a { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 10px 12px; min-height: 56px; height: 100%; }
  body.az-hub .flow .n { width: 36px; height: 36px; }
  body.az-hub .az-chip { width: 34px; height: 34px; }
}

@media (min-width: 641px) and (max-height: 760px) {
  body.az-hub .cover-aa { font-size: clamp(1.9rem, 7.5vh, 3.2rem); }
  body.az-hub .flow { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.az-hub .flow a { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 8px 10px; }
  body.az-hub .flow .n { width: 36px; height: 36px; border-radius: 12px; font-size: 0.85rem; }
}

@media (min-width: 641px) and (max-height: 520px) {
  body.az-hub .kicker { display: none; }
  body.az-hub .cover-copy { padding: 8px 12px 10px; gap: 2px; }
  body.az-hub .cover-aa { font-size: clamp(1.5rem, 11vh, 2.3rem); }
  body.az-hub .cover-sub { font-size: 0.82rem; margin-bottom: 4px; }
  body.az-hub .flow { gap: 6px; }
  body.az-hub .flow a { min-height: 44px; padding: 5px 8px; }
  body.az-hub .flow small { display: none; }
  body.az-hub .az-rail { padding-bottom: 4px; gap: 3px; }
  body.az-hub .az-chip { width: 26px; height: 26px; font-size: 0.78rem; }
  body.az-hub .topbar { padding: 6px 12px 6px 14px; }
  body.az-hub .btn-icon { width: 34px; height: 34px; }
  body.az-hub .az-batch-link { font-size: 0.7rem; padding: 4px 8px; }
}

@media (min-width: 1100px) {
  body.az-hub .flow { grid-template-columns: 1fr 1fr; }
  body.az-hub .flow a { grid-template-columns: 44px 1fr auto; gap: 8px; }
  body.az-hub .flow .n { width: 40px; height: 40px; }
}

@container azboard (min-aspect-ratio: 2 / 1) {
  .cover { grid-template-columns: 1.05fr 1fr; }
}

@container azboard (min-width: 980px) {
  .az-rail {
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@container azboard (min-width: 641px) and (max-width: 979px) and (min-height: 560px) {
  .az-rail {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    row-gap: 5px;
    scroll-snap-type: none;
  }
}

@container azboard (min-width: 1100px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow a { grid-template-columns: 44px 1fr auto; gap: 8px; }
  .flow .n { width: 40px; height: 40px; }
}

@container azboard (min-width: 641px) and (max-height: 760px) {
  .cover-aa { font-size: clamp(1.9rem, 7.5cqh, 3.2rem); }
  .flow { grid-template-columns: 1fr 1fr; gap: 8px; }
  .flow a { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 8px 10px; }
  .flow .n { width: 36px; height: 36px; border-radius: 12px; font-size: 0.85rem; }
}

@container azboard (min-width: 641px) and (max-height: 520px) {
  .kicker { display: none; }
  .cover-copy { padding: 8px 12px 10px; gap: 2px; }
  .cover-aa { font-size: clamp(1.5rem, 11cqh, 2.3rem); }
  .cover-sub { font-size: 0.82rem; margin-bottom: 4px; }
  .flow { gap: 6px; }
  .flow a { min-height: 44px; padding: 5px 8px; }
  .flow small { display: none; }
  .az-rail { padding-bottom: 4px; }
  .az-chip { width: 26px; height: 26px; font-size: 0.78rem; }
  .topbar { padding: 6px 12px 6px 14px; }
  .btn-icon { width: 34px; height: 34px; }
}

@container azboard (max-width: 640px) {
  .cover {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 40cqh) minmax(0, 1fr);
  }
  .cover-art { max-height: none; }
  .cover-copy { padding: 10px 14px 14px; justify-content: flex-start; }
  .cover-aa { font-size: clamp(2rem, 7cqh, 3rem); }
  .cover-sub { margin-bottom: 8px; }
  .flow { grid-template-columns: 1fr 1fr; gap: 8px; }
  .flow a { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 8px 10px; min-height: 52px; }
  .flow .n { width: 36px; height: 36px; }
  .az-chip { width: 34px; height: 34px; }
}

/* —— 字母馆：一年级卡通风 —— */
body.deck.az-hub {
  background:
    radial-gradient(ellipse 80% 60% at 10% -5%, rgba(255, 213, 79, 0.55), transparent 50%),
    radial-gradient(ellipse 70% 55% at 95% 5%, rgba(129, 212, 250, 0.5), transparent 45%),
    radial-gradient(ellipse 60% 50% at 85% 95%, rgba(244, 143, 177, 0.45), transparent 45%),
    radial-gradient(ellipse 55% 45% at 5% 90%, rgba(129, 199, 132, 0.5), transparent 40%),
    linear-gradient(165deg, #fff0f6 0%, #fffde7 38%, #e8f5ff 100%);
}
body.deck.az-hub .board {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 241, 118, 0.35), transparent 28%),
    radial-gradient(circle at 6% 92%, rgba(186, 230, 253, 0.4), transparent 30%),
    #fffdf8;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(106, 27, 154, 0.16);
}
body.deck.az-hub .board::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #ff5252, #ffca28, #66bb6a, #42a5f5, #ab47bc);
  border-radius: 20px 20px 0 0;
}
body.deck.az-hub .board::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255, 183, 77, 0.42);
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
}
body.az-hub .topbar {
  background: rgba(255, 253, 245, 0.92);
  border-bottom: 2px solid #ffe082;
}
body.az-hub .topbar h1 {
  font-family: "Baloo 2", "Fredoka", "ZCOOL KuaiLe", var(--letter);
  font-weight: 800;
  font-size: 1.35rem;
  color: #e53935;
  letter-spacing: 0.02em;
}
body.az-hub .az-batch-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #6a1b9a;
  border: 2px solid #ce93d8;
  box-shadow: 0 3px 0 #e1bee7;
  text-decoration: none;
  font-family: "Fredoka", "ZCOOL KuaiLe", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
body.az-hub .az-batch-link:hover {
  background: #fdf5ff;
}
body.az-hub .btn-icon {
  background: #fff;
  border: 2px solid #90caf9;
  color: #5c6bc0;
  box-shadow: 0 3px 0 #bbdefb;
}
body.az-hub .kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff8e1, #ffe0b2);
  border: 2px solid #ffcc80;
  color: #e65100;
  font-family: "Fredoka", "ZCOOL KuaiLe", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: none;
  box-shadow: 0 2px 0 #ffcc80;
}
body.az-hub .cover-aa {
  font-family: "Baloo 2", "Fredoka", var(--letter);
  font-weight: 800;
}
body.az-hub .cover-aa .aa-cap {
  color: #e53935;
  text-shadow: 3px 3px 0 #ffcc80, 5px 5px 0 rgba(229, 57, 53, 0.12);
}
body.az-hub .cover-aa .aa-low {
  color: #43a047;
  text-shadow: 2px 2px 0 #c8e6c9;
}
body.az-hub .cover-sub {
  font-family: "Fredoka", "ZCOOL KuaiLe", sans-serif;
  font-weight: 600;
  color: #6a1b9a;
}
body.az-hub .cover-art {
  background: linear-gradient(145deg, #e8f5e9, #fff9c4);
  border-right: 3px solid #ffe082;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65);
}
body.az-hub .az-chip {
  border-radius: 10px;
  border-width: 2px;
  font-family: "Fredoka", var(--letter);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
body.az-hub .az-chip:nth-child(6n+1) { background: #fff3e0; border-color: #ffcc80; color: #e65100; }
body.az-hub .az-chip:nth-child(6n+2) { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
body.az-hub .az-chip:nth-child(6n+3) { background: #e3f2fd; border-color: #90caf9; color: #1565c0; }
body.az-hub .az-chip:nth-child(6n+4) { background: #fce4ec; border-color: #f48fb1; color: #c2185b; }
body.az-hub .az-chip:nth-child(6n+5) { background: #f3e5f5; border-color: #ce93d8; color: #7b1fa2; }
body.az-hub .az-chip:nth-child(6n+6) { background: #fffde7; border-color: #fff176; color: #f57f17; }
body.az-hub .az-chip.is-on {
  background: linear-gradient(145deg, #ff7043, #e53935);
  border-color: #e53935;
  color: #fff;
  box-shadow: 0 3px 0 #c62828;
  transform: scale(1.08);
}
body.az-hub .flow a {
  border-radius: 16px;
  border: 2.5px solid transparent;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.06);
}
body.az-hub .flow li:nth-child(1) a { border-color: #ffcc80; box-shadow: 0 4px 0 #ffe082; background: #fffaf0; }
body.az-hub .flow li:nth-child(2) a { border-color: #a5d6a7; box-shadow: 0 4px 0 #c8e6c9; background: #f6fff7; }
body.az-hub .flow li:nth-child(3) a { border-color: #90caf9; box-shadow: 0 4px 0 #bbdefb; background: #f5fbff; }
body.az-hub .flow li:nth-child(4) a { border-color: #ce93d8; box-shadow: 0 4px 0 #e1bee7; background: #fdf5ff; }
body.az-hub .flow .n {
  border-radius: 12px;
  font-family: "Fredoka", sans-serif;
}
body.az-hub .flow strong {
  font-family: "Fredoka", "ZCOOL KuaiLe", sans-serif;
  color: #3d2f4f;
}
body.az-hub .flow .go {
  color: #e53935;
  font-weight: 700;
}

@media (orientation: portrait) and (max-width: 900px) {
  body.az-hub .cover-art {
    border-right: 0;
    border-bottom: 3px solid #ffe082;
  }
}