/* ==========================================================================
   语文 · 看图识字
   ========================================================================== */

/* ---------- 通用图形 ---------- */
.zi-em {
  display: inline-grid;
  place-items: center;
  font-size: clamp(52px, 9vh, 92px);
  line-height: 1;
  filter: drop-shadow(0 6px 8px rgba(90, 74, 60, 0.12));
}
.zi-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.zi-swatch {
  display: block;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.08), 0 7px 12px rgba(94, 78, 110, 0.14);
  border: 3px solid rgba(255, 255, 255, 0.7);
}
.zi-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 0.9vw, 9px);
  width: 74%;
}
.zi-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--unit-main);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.zi-em.is-big { font-size: clamp(110px, 20vh, 175px); }

.zi-swatch.is-big { width: 170px; }
.zi-dots.is-big { width: min(320px, 70%); }


/* ---------- 首页 ---------- */
.hero--zi .hero__cta { gap: 10px; flex-wrap: nowrap; }
.hero--zi .hero__cta .btn { flex: 0 1 auto; min-width: 0; padding: 0 28px; }
@media (max-width: 900px) {
  .hero--zi .hero__cta { flex-wrap: wrap; }
  .hero--zi .hero__cta .btn { flex: 1 1 44%; }
}

/* ---------- 首页小封面 ---------- */
.zi-mini-emoji { font-size: clamp(32px, 4.4vw, 50px); line-height: 1; }
.zi-mini-swatch {
  width: clamp(30px, 4vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.zi-mini-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: clamp(32px, 4.2vw, 46px);
}
.zi-mini-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--unit-main);
}

/* ---------- 单元页 ---------- */
.zi-unit { gap: clamp(8px, 1.4vh, 14px); }
.zi-unit__hero {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.zi-unit__hero > img { width: 52px; height: 52px; }
.zi-unit__hero > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.zi-unit__hero > div b { font-size: 18px; }
.zi-unit__hero > div span { font-size: 13px; color: var(--muted); font-weight: 700; }
.zi-unit__hero .btn {
  flex: none;
  min-height: 64px;
  padding: 0 24px;
  font-size: clamp(18px, 1.8vw, 22px);
}
.zi-unit__hero .btn span { color: inherit; font-size: inherit; font-weight: 800; }
.zi-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1.4vw, 14px);
  min-height: 0;
}
.zi-cell {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: 10px 6px 8px;
  min-height: clamp(112px, 17vh, 154px);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  transition: transform var(--fast), box-shadow var(--fast);
}
.zi-cell:active { transform: scale(0.97); }
.zi-cell.is-learned { background: linear-gradient(180deg, #fff, var(--unit-soft)); }
.zi-cell__pic {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(54px, 15.5vh, 92px);
  overflow: hidden;
}
.zi-cell__pic .zi-em { font-size: clamp(44px, 10vh, 72px); }
.zi-cell__pic .zi-art {
  width: clamp(52px, 11.6vh, 78px);
  height: clamp(52px, 11.6vh, 78px);
  object-fit: contain;
}
.zi-cell__pic .zi-swatch { width: clamp(42px, 9.6vh, 68px); }
.zi-cell__pic .zi-dots { width: min(72px, 78%); gap: 3px; place-content: center; }
.zi-cell__char {
  font-size: clamp(34px, 7vh, 52px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--ink);
}
.zi-cell__pinyin {
  font-family: "Nunito", sans-serif;
  font-size: clamp(11px, 2.1vh, 15px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.zi-cell__check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
}
.zi-cell__check svg { width: 12px; height: 12px; }
.zi-unit__progress {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}
.zi-bar {
  flex: 1;
  height: 10px;
  border-radius: 99px;
  background: rgba(94, 78, 110, 0.1);
  overflow: hidden;
}
.zi-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--unit-main), var(--unit-deep));
  transition: width 0.4s var(--ease);
}
.zi-games { flex: none; }
.zi-game-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.zi-game-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico title" "ico sub";
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  text-align: left;
}
.zi-game-card__ico {
  grid-area: ico;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--g) 18%, white);
  color: var(--g);
}
.zi-game-card__ico svg { width: 21px; height: 21px; }
.zi-game-card b { grid-area: title; font-size: 15px; }
.zi-game-card > span:last-child { grid-area: sub; font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- 单字大卡 ---------- */
.zi-card-screen { gap: clamp(10px, 1.8vh, 18px); }
.zi-card-stage { flex: 1; display: grid; place-items: center; min-height: 0; }
.zi-card {
  position: relative;
  width: min(760px, 92vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  padding: clamp(14px, 2vw, 26px) clamp(18px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}
.zi-card__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(170px, 30vh, 260px);
  overflow: hidden;
}
.zi-card__info { display: grid; justify-items: center; gap: 4px; }
.zi-card__char {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(180px, 25vh, 226px);
  aspect-ratio: 1;
  border-radius: 24px;
  background: var(--unit-soft);
  font-size: clamp(102px, 17vh, 150px);
  font-weight: 900;
  line-height: 1;
  color: var(--unit-deep);
}
.zi-card__char::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 2px dashed rgba(94, 78, 110, 0.16);
  border-radius: 12px;
  pointer-events: none;
}
.zi-card__char::after {
  content: "";
  position: absolute;
  inset: 11%;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(94, 78, 110, 0.13) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(94, 78, 110, 0.13) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}
.zi-card__char > span { position: relative; z-index: 1; }
.zi-card__pinyin {
  font-family: "Nunito", sans-serif;
  font-size: clamp(20px, 2.6vh, 28px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.zi-card__word {
  padding: 3px 18px;
  border-radius: 99px;
  background: var(--unit-soft);
  font-size: clamp(16px, 2vh, 21px);
  font-weight: 800;
  color: var(--unit-deep);
}
.zi-speak {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  gap: 8px;
  margin-top: 10px;
  width: min(300px, 90%);
  min-height: 52px;
  padding: 0 22px;
  border-radius: 99px;
  background: var(--unit-soft);
  color: var(--unit-deep);
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(94, 78, 110, 0.08);
}
.zi-speak:active { transform: translateY(3px); }
.zi-speak svg { width: 22px; height: 22px; }
.zi-card__pic .zi-em.is-big { font-size: clamp(100px, 17vh, 150px); }
.zi-card__pic .zi-art.is-big {
  width: min(280px, 100%);
  height: clamp(150px, 26vh, 240px);
  object-fit: contain;
}
.zi-card__pic .zi-swatch.is-big { width: min(168px, 62%); }
.zi-card__pic .zi-dots.is-big { width: min(250px, 74%); }
.zi-card__pic .zi-dots.is-big i { border-radius: 12px; }
.zi-card-actions { flex: none; display: flex; gap: 14px; }
.zi-card-actions .btn { flex: 1; }

/* ---------- 识字游戏 ---------- */
.zi-game { gap: clamp(6px, 1vh, 12px); }
.zi-stage { flex: 1; display: grid; place-items: center; min-height: 0; padding: 4px 0; }
.zi-quiz-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(320px, 46vw);
  height: min(320px, 46vw);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  padding: 10px;
  overflow: hidden;
}
.zi-quiz-pic .zi-em { font-size: clamp(140px, 25vh, 210px); }
.zi-quiz-pic .zi-art { width: 100%; height: 100%; object-fit: contain; }
.zi-quiz-pic .zi-swatch { width: 74%; }
.zi-quiz-pic .zi-dots { width: 82%; }
.zi-quiz-char {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: clamp(14px, 2vw, 26px) clamp(42px, 7vw, 90px);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}
.zi-quiz-char > span {
  font-size: clamp(120px, 26vh, 200px);
  font-weight: 900;
  line-height: 1;
  color: var(--unit-deep);
}
.zi-quiz-char small {
  font-family: "Nunito", sans-serif;
  font-size: clamp(18px, 2.4vh, 26px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.zi-listen-orb {
  width: clamp(170px, 27vh, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #ffe08a, #f2b93f);
  box-shadow: 0 10px 0 #cf9a31, 0 22px 40px rgba(207, 154, 49, 0.3);
  color: #fff;
}
.zi-listen-orb:active { transform: translateY(5px); }
.zi-listen-orb svg { width: 42%; height: 42%; }
.zi-options {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
}
.zi-choice {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(112px, 15vw, 176px);
  height: clamp(112px, 15vw, 176px);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.zi-choice:active { transform: scale(0.96); }
.zi-choice.is-right { background: #e4f8ee; box-shadow: 0 0 0 5px rgba(110, 199, 159, 0.4), var(--shadow-m); }
.zi-choice.is-wrong { background: #fdf1ee; animation: wobble 0.5s var(--ease); }
.zi-choice--char > span {
  font-size: clamp(54px, 8vw, 84px);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.zi-choice--pic { padding: 8px; overflow: hidden; }
.zi-choice--pic .zi-em { font-size: clamp(64px, 10vw, 104px); }
.zi-choice--pic .zi-art { width: 100%; height: 100%; object-fit: contain; }
.zi-choice--pic .zi-swatch { width: 76%; }
.zi-choice--pic .zi-dots { width: 84%; }

/* ---------- 家长中心 ---------- */
.zi-parent-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(94, 78, 110, 0.12);
}
.zi-parent-row:last-child { border-bottom: 0; }
.zi-parent-row__badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f2ecff;
  color: #5c4592;
  font-size: 19px;
  font-weight: 900;
}
.zi-parent-row__body { display: grid; gap: 4px; min-width: 0; }
.zi-parent-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zi-parent-row__top b { font-size: 14px; }
.zi-parent-row__top span { font-size: 12px; color: var(--muted); font-weight: 700; }
.zi-parent-row__bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(94, 78, 110, 0.1);
  overflow: hidden;
}
.zi-parent-row__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b29be8, #5c4592);
}
.zi-parent-row__pct { font-size: 13px; font-weight: 900; color: var(--unit-deep); }

.math-top .chip { flex: none; white-space: nowrap; }
.zi-unit .math-top .chip { margin-left: auto; }

@media (orientation: portrait) {
  .zi-unit__hero { flex-wrap: wrap; gap: 8px; }
  .zi-unit__hero > div { flex-basis: calc(100% - 66px); }
  .zi-unit__hero .btn { width: 100%; }
  .zi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .zi-cell { min-height: 104px; padding: 8px 3px 6px; }
  .zi-game-row { grid-template-columns: 1fr; }
  .zi-game-card { grid-template-columns: auto 1fr auto; grid-template-areas: "ico title title" "ico sub sub"; }
  .zi-card { gap: 10px 18px; padding: 22px 24px; width: min(720px, 94vw); }
  .zi-card__pic { height: clamp(230px, 33vh, 310px); }
  .zi-card__pic .zi-em.is-big { font-size: clamp(150px, 23vh, 210px); }
  .zi-card__pic .zi-art.is-big { width: min(260px, 100%); height: clamp(200px, 28vh, 270px); object-fit: contain; }
  .zi-card__pic .zi-swatch.is-big { width: min(210px, 30vh); }
  .zi-card__pic .zi-dots.is-big { width: min(300px, 58vw); }
  .zi-speak { min-height: 56px; font-size: 17px; margin-top: 10px; }
  .zi-card__char { width: clamp(176px, 24vh, 226px); font-size: clamp(98px, 15vh, 142px); }
  .zi-choice { width: clamp(88px, 24vw, 148px); height: clamp(88px, 24vw, 148px); }
  .zi-choice--char > span { font-size: clamp(46px, 12vw, 76px); }
  .zi-quiz-pic { width: min(250px, 62vw); height: min(250px, 62vw); }
}

@media (max-height: 800px) and (orientation: landscape) {
  .zi-unit__hero { padding: 8px 12px; }
  .zi-unit__hero > img { width: 42px; height: 42px; }
  .zi-cell { min-height: 92px; }
  .zi-card__pic { height: 150px; }
  .zi-card__pic .zi-em.is-big { font-size: 96px; }
  .zi-card__pic .zi-art.is-big { width: 170px; height: 140px; object-fit: contain; }
  .zi-card__char { width: 172px; font-size: 100px; }
  .zi-quiz-pic { width: 250px; height: 250px; }
  .zi-choice { width: 148px; height: 148px; }
  .zi-quiz-char { padding: 12px 64px; }
  .zi-quiz-char > span { font-size: 150px; }
}