/**
 * public/css/kids.css
 * 儿童区样式：品牌区 / 模式卡网格 / HUD / 进度条 / 宠物 / 徽章成就墙 / 迷宫阶梯 /
 *             接龙提示 / 非模态轻提示，以及既有「字母下落」「闯关攒星」地图。
 *
 * 约定：只消费 tokens.css 的 var(--x)（本文件**零 hex**，check-tokens --strict 会拦）；
 *       组件规则在前，媒体查询与 prefers-reduced-motion 补偿置于文件末尾；
 *       儿童区专属规则一律包在 `html[data-kid-scope="on"]` 下 → 成人模块视觉零变化。
 *
 * ★ data-kid-scope 为什么挂在 <html> 而不是 #view-root：toast 等组件挂在 document.body
 *   下（必须跨路由存活，不能被 renderRoute 的 host.textContent 清掉），
 *   挂在 <html> 上才能让它们也拿到 --kid-* 令牌。
 */

/* ============================================================ 顶栏品牌 Logo 挂载点 */
.kid-brand-slot {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--kid-line);
  /* 纯装饰：可点击性由 #app-nav 的「儿童区」链接承担，避免与 .brand 的朗读重复 */
  pointer-events: none;
}

.kid-brand-slot .kid-logo {
  display: block;
  width: 40px;
  height: 40px;
}

/* Logo 小尺寸降级：16/28px 档隐藏次要轮廓（拇指/腕根），避免细部粘连糊成团 */
.kid-logo[data-size="16"] .logo-thumb,
.kid-logo[data-size="16"] .logo-wrist,
.kid-logo[data-size="28"] .logo-wrist {
  display: none;
}

/* 16px 档：键面凸点退化为更实的点，给 4.8px 的键帽补清晰描边 */
.kid-logo[data-size="16"] .logo-cap-dot {
  r: 2.6;
}

.kid-logo[data-size="16"] .logo-cap {
  stroke: var(--kid-primary);
  stroke-width: 1.2;
}

/* ============================================================ 儿童区入口：既有 2 张 .kid-card
   ★ 保持 .kid-card 数量为 2（qa-ui U18 硬断言）；新玩法卡一律用 .kid-mode-card。 */
.kids-view .grid-cards {
  gap: var(--sp-5);
}

.kid-card {
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: left;
  background-color: var(--kid-surface);
  border: 1px solid var(--kid-gold);
  border-radius: var(--radius-xl);
  box-shadow: var(--kid-shadow-1);
}

.kid-card:hover:not([disabled]) {
  background-color: var(--kid-primary-soft);
  border-color: var(--kid-accent);
}

.kid-title {
  font-family: var(--font-serif);
  font-size: var(--fs-kid-3);
  font-weight: 700;
  color: var(--kid-primary);
}

.kid-desc {
  font-size: var(--fs-kid-2);
  line-height: var(--kid-lh-body);
  color: var(--kid-ink-2);
}

.kid-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-1);
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--kid-primary-soft);
  border-radius: var(--radius-pill);
  color: var(--kid-primary);
}

/* ============================================================ 品牌区（hero） */
html[data-kid-scope="on"] .kid-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background-image: var(--kid-grad-hero);
  border: 1px solid var(--kid-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--kid-shadow-1);
}

html[data-kid-scope="on"] .kid-hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

html[data-kid-scope="on"] .kid-hero-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-kid-4);
  font-weight: 700;
  color: var(--kid-primary);
}

html[data-kid-scope="on"] .kid-hero-slogan {
  margin: 0;
  font-size: var(--fs-kid-2);
  color: var(--kid-ink-2);
}

html[data-kid-scope="on"] .kid-hero-tip {
  margin: 0;
  font-size: var(--fs-kid-1);
  color: var(--kid-ink-3);
}

/* ============================================================ 年龄档提示条（一次性） */
html[data-kid-scope="on"] .kid-age-tip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-kid-2);
  color: var(--kid-ink-2);
  background-color: var(--kid-gold-soft);
  border: 1px solid var(--kid-gold);
  border-radius: var(--radius-lg);
}

/* ============================================================ 模式卡网格（数据驱动） */
html[data-kid-scope="on"] .kid-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

html[data-kid-scope="on"] .kid-section-title {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-kid-3);
  font-weight: 700;
  color: var(--kid-ink);
}

html[data-kid-scope="on"] .kid-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: var(--kid-card-min-h);
  min-width: 0;
  padding: var(--sp-4);
  text-align: left;
  background-image: var(--kid-grad-warm);
  border: 2px solid var(--kid-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--kid-shadow-1);
  color: var(--kid-ink);
}

html[data-kid-scope="on"] .kid-mode-card:hover {
  border-color: var(--kid-accent-2);
  box-shadow: var(--kid-shadow-2);
}

html[data-kid-scope="on"] .kid-mode-card:focus-visible {
  outline: none;
  box-shadow: var(--kid-ring);
}

html[data-kid-scope="on"] .kid-mode-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

html[data-kid-scope="on"] .kid-mode-icon {
  font-size: var(--fs-kid-4);
  line-height: 1;
}

html[data-kid-scope="on"] .kid-mode-title {
  font-size: var(--fs-kid-3);
  font-weight: 700;
  color: var(--kid-ink);
}

html[data-kid-scope="on"] .kid-mode-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-kid-0);
  color: var(--kid-ink-3);
}

html[data-kid-scope="on"] .kid-mode-diff {
  color: var(--kid-gold);
  letter-spacing: 1px;
}

html[data-kid-scope="on"] .kid-mode-desc {
  margin: 0;
  font-size: var(--fs-kid-1);
  line-height: var(--kid-lh-body);
  color: var(--kid-ink-2);
}

html[data-kid-scope="on"] .kid-mode-rules {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-kid-1);
  line-height: var(--kid-lh-body);
  color: var(--kid-ink-2);
}

html[data-kid-scope="on"] .kid-mode-best {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-0);
  color: var(--kid-primary);
}

/* ============================================================ 通用儿童按钮（两档尺寸） */
html[data-kid-scope="on"] .kid-btn {
  min-width: var(--kid-btn-w);
  min-height: var(--kid-btn-h);
  padding: var(--kid-btn-pad);
  font-size: var(--fs-kid-2);
  font-weight: 700;
  color: var(--kid-ink);
  background-color: var(--kid-surface);
  border: 2px solid var(--kid-line-strong);
  border-radius: var(--radius-md);
}

html[data-kid-scope="on"] .kid-btn-primary {
  background-color: var(--kid-primary);
  border-color: var(--kid-primary);
  color: var(--kid-surface);
}

html[data-kid-scope="on"] .kid-btn:focus-visible {
  outline: none;
  box-shadow: var(--kid-ring);
}

/* ============================================================ 宠物条 / 宠物面板 */
html[data-kid-scope="on"] .kid-pet-bar,
html[data-kid-scope="on"] .kid-pet-panel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background-image: var(--kid-grad-warm);
  border: 1px solid var(--kid-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--kid-shadow-1);
}

html[data-kid-scope="on"] .kid-pet-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 240px;
  min-width: 0;
}

html[data-kid-scope="on"] .kid-stat-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-kid-1);
  color: var(--kid-ink-2);
}

html[data-kid-scope="on"] .kid-stat-bar {
  flex: 1 1 80px;
  height: 12px;
  min-width: 0;
  background-color: var(--kid-primary-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

html[data-kid-scope="on"] .kid-stat-fill {
  height: 100%;
  width: 0%;
  background-color: var(--kid-primary);
  transition: width 0.25s ease;
}

html[data-kid-scope="on"] .kid-stat-fill.is-gold {
  background-color: var(--kid-gold);
}

html[data-kid-scope="on"] .kid-stat-fill.is-warn {
  background-color: var(--kid-warn);
}

/* 宠物呼吸（装饰动效；reduce 下取消并保留静态形象） */
html[data-kid-scope="on"] .pet-breathe {
  animation: pet-breathe 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes pet-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* ============================================================ 今日目标卡 */
html[data-kid-scope="on"] .kid-goal-card {
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  background-color: var(--kid-gold-soft);
  border: 1px solid var(--kid-gold);
  border-radius: var(--radius-lg);
}

html[data-kid-scope="on"] .kid-goal-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-kid-3);
  font-weight: 700;
  color: var(--kid-ink);
}

html[data-kid-scope="on"] .kid-goal-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-kid-scope="on"] .kid-goal-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-kid-2);
  color: var(--kid-ink-2);
}

html[data-kid-scope="on"] .kid-goal-item.is-done {
  color: var(--kid-ok);
}

/* ============================================================ HUD 与进度条 */
html[data-kid-scope="on"] .kid-hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background-color: var(--kid-surface);
  border: 2px solid var(--kid-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--kid-shadow-1);
}

html[data-kid-scope="on"] .kid-hud-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  text-align: center;
}

html[data-kid-scope="on"] .kid-hud-label {
  font-size: var(--fs-kid-1);
  color: var(--kid-ink-3);
}

html[data-kid-scope="on"] .kid-hud-value {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-4);
  font-weight: 700;
  color: var(--kid-primary);
  font-variant-numeric: tabular-nums;
}

html[data-kid-scope="on"] .kid-hud-cell.is-combo .kid-hud-value {
  color: var(--kid-accent);
}

/* 连击弹跳（装饰动效） */
html[data-kid-scope="on"] .kid-combo-bounce {
  animation: kid-combo-bounce 0.32s ease-out;
}

@keyframes kid-combo-bounce {
  from {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
  }
}

html[data-kid-scope="on"] .kid-progress {
  position: relative;
  height: 18px;
  min-width: 0;
  background-color: var(--kid-primary-soft);
  border: 1px solid var(--kid-line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

html[data-kid-scope="on"] .kid-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--kid-primary);
  transition: width 0.2s linear;
}

/* 100% 变金星色（得星庆祝态） */
html[data-kid-scope="on"] .kid-progress.is-done .kid-progress-fill {
  background-color: var(--kid-gold);
}

html[data-kid-scope="on"] .kid-progress-text {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-1);
  color: var(--kid-ink-2);
}

/* ============================================================ 练习舞台与目标字符 */
html[data-kid-scope="on"] .kid-stage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background-color: var(--kid-surface);
  border: 2px solid var(--kid-line);
  border-radius: var(--radius-lg);
}

html[data-kid-scope="on"] .kid-target-char {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-target);
  font-weight: 700;
  line-height: var(--kid-lh-target);
  color: var(--kid-ink);
}

html[data-kid-scope="on"] .kid-rules {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background-color: var(--kid-accent-soft);
  border: 1px solid var(--kid-accent);
  border-radius: var(--radius-md);
}

html[data-kid-scope="on"] .kid-rules p {
  margin: 0;
  font-size: var(--fs-kid-2);
  line-height: var(--kid-lh-body);
  color: var(--kid-ink-2);
}

/* ============================================================ 迷宫阶梯（word_maze） */
html[data-kid-scope="on"] .kid-maze-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}

html[data-kid-scope="on"] .kid-maze-step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-kid-1);
  text-align: center;
  color: var(--kid-ink-3);
  background-color: var(--kid-primary-soft);
  border: 2px dashed var(--kid-line-strong);
  border-radius: var(--radius-sm);
}

html[data-kid-scope="on"] .kid-maze-step.is-done {
  color: var(--kid-ok);
  background-color: var(--kid-primary-soft);
  border-style: solid;
  border-color: var(--kid-ok);
}

html[data-kid-scope="on"] .kid-maze-step.is-current {
  color: var(--kid-ink);
  background-color: var(--kid-gold-soft);
  border-style: solid;
  border-color: var(--kid-accent);
}

/* ============================================================ 接龙首字母提示（chain_rush） */
html[data-kid-scope="on"] .kid-chain-first {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-kid-3);
  font-weight: 700;
  color: var(--kid-accent);
  background-color: var(--kid-accent-soft);
  border: 2px solid var(--kid-accent);
  border-radius: var(--radius-md);
}

/* ============================================================ 奖章墙（徽章 / 成就 / 头像） */
html[data-kid-scope="on"] .kid-awards-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background-image: var(--kid-grad-hero);
  border: 1px solid var(--kid-line);
  border-radius: var(--radius-lg);
}

html[data-kid-scope="on"] .kid-awards-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  text-align: center;
}

html[data-kid-scope="on"] .kid-awards-stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-4);
  font-weight: 700;
  color: var(--kid-gold);
}

html[data-kid-scope="on"] .kid-awards-stat-label {
  font-size: var(--fs-kid-1);
  color: var(--kid-ink-3);
}

html[data-kid-scope="on"] .kid-badge-grid,
html[data-kid-scope="on"] .kid-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding: 0;
  list-style: none;
}

html[data-kid-scope="on"] .kid-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  background-color: var(--kid-surface);
  border: 1px solid var(--kid-line);
  border-radius: var(--radius-md);
}

html[data-kid-scope="on"] .kid-badge-icon {
  font-size: var(--fs-kid-4);
  line-height: 1;
}

html[data-kid-scope="on"] .kid-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html[data-kid-scope="on"] .kid-badge-name {
  font-size: var(--fs-kid-2);
  font-weight: 700;
  color: var(--kid-ink);
}

/* 未解锁：灰度轮廓 + 半透明；hidden 项另用 "???" 隐藏条件（不剧透） */
html[data-kid-scope="on"] .kid-badge.is-locked {
  filter: grayscale(1);
  opacity: 0.55;
  border-style: dashed;
}

html[data-kid-scope="on"] .kid-badge.is-new .kid-badge-icon {
  animation: kid-badge-flash 0.8s ease-out;
}

@keyframes kid-badge-flash {
  from {
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
  }
}

html[data-kid-scope="on"] .kid-species-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* ============================================================ 非模态轻提示（kid-toast） */
.kid-toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--sp-7);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  transform: translateX(-50%);
  pointer-events: none;
}

.kid-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(90vw, 520px);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.6;
  color: var(--kid-ink);
  background-color: var(--kid-surface);
  border: 2px solid var(--kid-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--kid-shadow-2);
  animation: kid-toast-in 0.24s ease-out;
}

.kid-toast--ok {
  border-color: var(--kid-ok);
}

.kid-toast--warn {
  border-color: var(--kid-warn);
  background-color: var(--kid-gold-soft);
}

.kid-toast--info {
  border-color: var(--kid-accent-2);
}

.kid-toast-icon {
  font-size: 22px;
  line-height: 1;
}

.kid-toast-text {
  min-width: 0;
}

@keyframes kid-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================ 低龄：字母下落 */
.kids-stage-host {
  min-width: 0;
}

.kids-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 60vh;
  min-height: 320px;
  padding: var(--sp-3);
  overflow: hidden;
  background-color: var(--kid-paper);
  background-image: linear-gradient(var(--kid-primary-soft), var(--kid-paper));
  border: 2px solid var(--kid-primary);
  border-radius: var(--radius-xl);
  touch-action: manipulation;
}

.kids-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--kid-surface);
  border-radius: var(--radius-md);
}

.kids-hud-item {
  font-family: var(--font-mono);
  font-size: var(--fs-kid-2);
  font-weight: 700;
  color: var(--kid-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kids-drop-layer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.kids-drop {
  position: absolute;
  top: 0;
  left: 0;
  /* 56px 方框可同时容纳 36px（senior）与 48px（junior）两档字号而不裁切。
     引擎的 spawn 横向散布仍按 size=40 计算，右侧可能轻微出血，被 .kids-drop-layer
     的 overflow:hidden 裁掉，不影响落点与命中判定（命中按字符而非坐标）。 */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-kid-drop);
  font-weight: 700;
  color: var(--kid-surface);
  background-color: var(--kid-primary);
  border: 2px solid var(--kid-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--kid-shadow-1);
  will-change: transform;
}

.kids-star {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--fs-kid-4);
  color: var(--kid-gold);
  pointer-events: none;
  animation: kids-star-fly 0.7s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes kids-star-fly {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}

/* ============================================================ 高龄：闯关攒星 */
.parent-tips {
  border-left: 3px solid var(--kid-gold);
  background-color: var(--kid-surface);
}

.parent-tips h4 {
  margin: 0 0 var(--sp-2);
  color: var(--kid-gold);
}

.parent-tips p {
  margin: 0 0 var(--sp-1);
}

.stage-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-4);
}

.stage-col {
  gap: var(--sp-2);
}

.stage-col h4 {
  margin: 0;
  color: var(--kid-primary);
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.level-btn {
  width: 100%;
  min-height: 48px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-kid-2);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--kid-surface);
  border: 2px solid var(--kid-line-strong);
  border-radius: var(--radius-md);
  color: var(--kid-ink);
}

.level-btn:hover:not([disabled]) {
  background-color: var(--kid-primary-soft);
  border-color: var(--kid-accent);
}

.level-btn.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed;
  color: var(--kid-ink-3);
}

.senior-play {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* 字号放大后防目标文本溢出：22vh → 28vh（QA U20 的 .tchar 定位已验证） */
.senior-play .practice-stage {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-1) 0;
  min-height: 28vh;
  font-size: var(--fs-kid-target);
  line-height: var(--kid-lh-target);
}

html[data-kid-scope="on"] .tchar.kid-target-char {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ============================================================ 窄屏 */
@media (max-width: 720px) {
  .kids-stage {
    height: 52vh;
    min-height: 260px;
  }

  .stage-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .senior-play .practice-stage {
    font-size: min(var(--fs-kid-target), 42px);
    min-height: 20vh;
  }

  .kids-hud {
    justify-content: flex-start;
  }

  .kid-brand-slot {
    margin: 0 var(--sp-2);
    padding-left: var(--sp-2);
  }

  .kid-brand-slot .kid-logo {
    width: 28px;
    height: 28px;
  }

  html[data-kid-scope="on"] .kid-mode-grid,
  html[data-kid-scope="on"] .kid-badge-grid,
  html[data-kid-scope="on"] .kid-ach-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 触屏窄屏：允许横向滚动 + 滚动吸附（虚拟键盘 .vk-board 儿童区基准宽，
     由 css/views.css 的 html[data-kid-scope] .vk-key 放大规则按 LAYOUT 推导） */
  html[data-kid-scope="on"] .virtual-keyboard {
    scroll-snap-type: x proximity;
  }

  html[data-kid-scope="on"] .vk-row {
    scroll-snap-align: start;
  }
}

/* ============================================================ 减少动效降级（须置于末尾）
   base.css 的全局降级是 `*` 通配（权重最低），故这里显式写补偿样式后来居上覆盖。
   原则：游戏必需动效（下落字母位移、击键高亮）保留；装饰动效全部取消并给出静态终态。 */
@media (prefers-reduced-motion: reduce) {
  /* 装饰动效：直接呈现终态，不做入场动画 */
  html[data-kid-scope="on"] .kid-combo-bounce,
  .kid-toast,
  html[data-kid-scope="on"] .pet-breathe,
  html[data-kid-scope="on"] .kid-badge.is-new .kid-badge-icon {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 得星反馈不能依赖动画（动画瞬时跳到终态 = 星星凭空消失），故静态显示星符 */
  .kids-star {
    animation: none;
    opacity: 1;
  }

  /* 状态反馈类过渡：去掉时长，改瞬时跳转 */
  html[data-kid-scope="on"] .kid-progress-fill,
  html[data-kid-scope="on"] .kid-stat-fill {
    transition: none;
  }
}