/* ================================================================
   豆豆数学屋 · 视觉设计系统 v1.0「暖纸」(Warm Paper)
   依据: docs/视觉设计系统.md + docs/儿童产品设计科学准则.md 伍章
   哲学: 像一本温暖的纸质绘本,不像一块发光的屏幕
   ================================================================ */

:root {
  /* ---- 中性底(60%)· 干净暖白(护眼但不发黄),不可主题化 ---- */
  --paper: #F8F7F3;
  --paper-2: #F1EFEA;
  --paper-3: #E7E4DC;
  --card: #FDFDFB;
  --ink: #3C3A36;
  --ink-2: #6D6A63;
  --ink-3: #A5A199;

  /* ---- 模块点缀色(10%)· 蜡笔明快档(v1.2)· 色彩导航 ----
     底子护眼不动,点缀提鲜:短时使用 + 白底 + 中小面积,鲜艳无害且有趣 */
  --peach: #FF9A76;
  --peach-deep: #E86A40;
  --peach-soft: #FFEFE7;
  --sky: #6BB8E8;
  --sky-deep: #3684BC;
  --sky-soft: #E7F3FC;
  --berry: #F48FB1;
  --berry-deep: #D14D80;
  --berry-soft: #FDECF3;
  --honey: #FFC94D;
  --honey-deep: #D5941A;
  --honey-soft: #FFF4DB;
  --sage: #7ECB8F;
  --sage-deep: #429E58;
  --sage-soft: #E9F7EC;
  --coral: #FF8A70;
  --coral-deep: #DB5A3C;
  --coral-soft: #FFECE6;

  /* 主品牌色(主题变体只改这一组) */
  --accent: var(--peach);
  --accent-deep: var(--peach-deep);
  --accent-soft: var(--peach-soft);

  /* ---- 形状 ---- */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --border: 1.5px solid #EBE9E2;

  /* ---- 阴影(两层柔和制 · 中性灰,不带棕) ---- */
  --shadow-card: 0 1px 2px rgba(80, 78, 74, 0.04), 0 6px 16px rgba(80, 78, 74, 0.06);
  --shadow-lift: 0 2px 4px rgba(80, 78, 74, 0.05), 0 10px 26px rgba(80, 78, 74, 0.09);
  --shadow-btn: 0 3px 0 rgba(80, 78, 74, 0.09);

  /* ---- 字体 ---- */
  --font-title: 'STKaiti', 'Kaiti SC', 'KaiTi', 'FangSong', serif;
  --font-body: 'STKaiti', 'Kaiti SC', 'KaiTi', 'FangSong', serif;
  --font-number: -apple-system, 'SF Pro Rounded', 'SF Pro Display', 'PingFang SC', system-ui, sans-serif;
}

/* ---- 主题变体:只换点缀主色,暖纸底永远不变(视觉系统 · 科学底线) ---- */
html[data-theme="sakura"] {
  --accent: #F58FB0;
  --accent-deep: #D6608C;
  --accent-soft: #FDEBF1;
}
html[data-theme="mint"] {
  --accent: #7ECB8F;
  --accent-deep: #4BA35F;
  --accent-soft: #E9F7EC;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}

/* ================================================================
   布局外壳 · 100dvh 锁屏不滚动
   ================================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  height: 100dvh;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

@media (min-width: 900px) {
  .app-shell {
    grid-template-columns: 260px 1fr;
    padding: clamp(14px, 2.2vh, 24px);
    gap: clamp(14px, 2vw, 28px);
  }
}

/* ---- 侧边栏 · 悬浮圆角面板(和右侧卡片同一套视觉语言) ---- */
.sidebar {
  display: none;
  flex-direction: column;
  padding: 24px 18px;
  gap: 8px;
  background: var(--paper-2);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  height: 100%;
  overflow: hidden;
}

@media (min-width: 900px) {
  .sidebar { display: flex; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.sidebar-brand .brand-badge { width: 44px; height: 44px; font-size: 24px; }

.sidebar-brand span {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.side-nav { display: flex; flex-direction: column; gap: 6px; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}

.side-nav a:hover { background: rgba(62, 58, 51, 0.05); color: var(--ink); }

.side-nav a.active {
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  border: var(--border);
}

.side-nav-icon { font-size: 22px; width: 28px; text-align: center; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.sidebar-footer:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.sidebar-footer::after { content: '⇆'; color: var(--ink-3); font-size: 17px; margin-left: 4px; }

.sidebar-footer .avatar {
  width: 44px; height: 44px;
  background: var(--accent-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.sidebar-footer-info { flex: 1; }

.sidebar-footer-name { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--ink); }

.sidebar-footer-stars {
  font-size: 13px;
  color: var(--honey-deep);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-number);
  font-weight: 600;
}

/* ---- 主内容区 · 全站统一规则 ----
   1) 内容装得下 → 不出滚动条,靠 margin-auto 垂直居中(自然留白)
   2) 窗口太矮装不下 → 自动降级为可滚动,内容永不被裁切
   3) 桌面上下零内边距 → 与侧栏面板顶/底精确对齐 */
.main {
  padding: clamp(12px, 2vh, 24px) clamp(16px, 2.5vw, 32px) clamp(80px, 12vh, 100px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12px, 2vh, 24px);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 内容顶格开始:手机上垂直居中会把底部按钮推到标签栏后面,故全站顶对齐 */

@media (min-width: 900px) {
  .main {
    max-width: 1100px;
    padding: 0 clamp(20px, 3vw, 56px);
    gap: clamp(16px, 2.4vh, 28px);
    height: 100%;
  }
}

/* ---- 顶栏 ---- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .tab-bar { display: none; }
  .top-bar { display: none; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

.brand-badge {
  width: 40px; height: 40px;
  background: var(--accent-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-card);
}

.top-stars {
  background: var(--honey-soft);
  border: var(--border);
  border-radius: 50px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-number);
  font-weight: 600;
  color: var(--honey-deep);
  font-size: clamp(14px, 1.6vh, 16px);
  flex-shrink: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 16px;
  padding: 4px 0;
}

.back-link:hover { color: var(--ink); }

/* ---- 标题 ---- */
.page-title {
  font-family: var(--font-title);
  font-size: clamp(20px, 2.6vh, 32px);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
}

.page-subtitle {
  font-size: clamp(14px, 1.5vh, 16px);
  color: var(--ink-2);
  line-height: 1.5;
}

.section-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(15px, 1.9vh, 20px);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* ---- 卡片 ---- */
.card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: clamp(12px, 2vh, 20px);
  box-shadow: var(--shadow-card);
  border: var(--border);
}

.card-hero {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--card) 85%);
  border: var(--border);
  padding: clamp(14px, 2vh, 24px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
}

.mascot {
  font-size: clamp(44px, 7vh, 88px);
  filter: drop-shadow(0 3px 6px rgba(62, 58, 51, 0.12));
  animation: bob 3s ease-in-out infinite;
  line-height: 1;
}

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

.mascot-speech {
  flex: 1;
  background: var(--card);
  border: var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.mascot-speech::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 20px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--card);
}

/* ---- 按钮 ---- */
.btn {
  display: block;
  width: 100%;
  padding: clamp(12px, 2vh, 20px) 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(16px, 2vh, 22px);
  color: #FFFDF8;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-btn);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(62, 58, 51, 0.12); }

.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.btn-sky { background: linear-gradient(135deg, var(--sky), var(--sky-deep)); }
.btn-mint { background: linear-gradient(135deg, var(--sage), var(--sage-deep)); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow-card);
}

/* ---- 今日任务卡(色彩导航:每个模块一个专属色) ---- */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.6vh, 16px);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .mission-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vh, 24px);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
}

.mission {
  aspect-ratio: 1.15 / 1;
  min-height: clamp(120px, 18vh, 180px);
  max-height: 220px;
  background: var(--card);
  border-radius: var(--radius-md);
  padding: clamp(10px, 1.6vh, 16px) clamp(10px, 1.5vw, 14px);
  text-align: center;
  box-shadow: var(--shadow-card);
  border: var(--border);
  border-top: 4px solid var(--paper-3);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.6vh, 6px);
}

@media (min-width: 900px) {
  .mission { aspect-ratio: 1 / 1; min-height: unset; max-height: 240px; }
}

.mission:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* 色彩导航条 */
.mission[href="sense.html"] { border-top-color: var(--sky); }
.mission[href="cpa.html"] { border-top-color: var(--peach); }
.mission[href="review.html"] { border-top-color: var(--berry); }
.mission[href="achievements.html"] { border-top-color: var(--honey); }

.mission-icon { font-size: clamp(28px, 4vh, 44px); margin-bottom: 2px; line-height: 1; }

.mission-name {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.8vh, 18px);
  color: var(--ink);
  font-weight: 700;
}

.mission-meta { font-size: 13px; color: var(--ink-2); }

.mission-done { background: var(--sage-soft); }

.mission-done .mission-icon::after {
  content: '✓';
  display: inline-block;
  margin-left: 4px;
  color: var(--sage-deep);
}

/* ---- 进度条 ---- */
.progress {
  height: clamp(8px, 1vh, 12px);
  background: var(--paper-3);
  border-radius: 50px;
  overflow: hidden;
  margin: 6px 0;
  flex-shrink: 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius: 50px;
  transition: width 0.5s ease;
}

/* ---- 底部 tab(手机) ---- */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-top: var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  z-index: 10;
  box-shadow: 0 -2px 12px rgba(62, 58, 51, 0.06);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--ink-3);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  transition: color 0.2s;
}

.tab-icon { font-size: 22px; }
.tab.active { color: var(--accent-deep); font-weight: 700; }
.tab.active .tab-icon { transform: scale(1.12); }

/* ================================================================
   数感训练(sky)
   ================================================================ */
.subitize-stage {
  background: var(--sky-soft);
  border-radius: var(--radius-lg);
  border: var(--border);
  flex-shrink: 0;
  min-height: clamp(220px, 36vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 40px);
}

.subitize-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  justify-items: center;
  align-items: center;
  padding: 20px;
}

@media (min-width: 900px) {
  .subitize-items { gap: clamp(20px, 4vh, 60px) clamp(30px, 6vw, 100px); }
}

.subitize-items span {
  font-size: clamp(56px, 12vh, 160px);
  animation: pop 0.4s ease-out;
  line-height: 1;
}

@keyframes pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---- 选项按钮 ---- */
.options-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .options-row { max-width: 640px; margin: 0 auto; width: 100%; }
}

.option-btn {
  background: var(--card);
  border: 2px solid var(--paper-3);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 2vh, 22px) 0;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(22px, 3.5vh, 40px);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  box-shadow: var(--shadow-btn);
}

.option-btn:hover { border-color: var(--accent); transform: translateY(-2px); }

/* 色盲安全:颜色 + 形状 + 文案三重冗余 */
.option-btn.correct {
  background: var(--sage-soft);
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}

.option-btn.correct::after { content: ' ✓'; }

.option-btn.wrong {
  background: var(--coral-soft);
  border-color: var(--coral);
  color: var(--coral-deep);
}

/* ================================================================
   CPA 算式练习(peach)
   ================================================================ */
.cpa-modes {
  display: flex;
  background: var(--paper-2);
  border: var(--border);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  flex-shrink: 0;
}

.cpa-mode {
  flex: 1;
  padding: clamp(8px, 1.2vh, 12px);
  text-align: center;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(13px, 1.6vh, 16px);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border: none;
  background: transparent;
}

.cpa-mode.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.cpa-mode-icon { font-size: 18px; margin-right: 4px; }

.cpa-stage {
  background: var(--peach-soft);
  border: var(--border);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  min-height: clamp(240px, 38vh, 440px);
  padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 24px);
}

.concrete-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 900px) { .concrete-group { gap: 40px; } }

.concrete-cluster {
  display: flex;
  gap: clamp(4px, 0.8vw, 12px);
  padding: clamp(8px, 1.5vh, 24px) clamp(12px, 2vw, 28px);
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.concrete-cluster span { font-size: clamp(40px, 8vh, 96px); line-height: 1; }

.plus-sign {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(36px, 6vh, 72px);
  color: var(--peach-deep);
}

.eq-sign {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(36px, 6vh, 72px);
  color: var(--sky-deep);
}

.q-mark {
  width: clamp(60px, 10vh, 120px);
  height: clamp(60px, 10vh, 120px);
  background: var(--honey-soft);
  border: 3px dashed var(--honey-deep);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(36px, 6vh, 72px);
  color: var(--honey-deep);
}

/* ---- 条形图(bar model) ---- */
.bar-model {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row { display: flex; gap: 8px; align-items: center; }

.bar-block {
  height: clamp(42px, 6vh, 72px);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-number);
  font-weight: 700;
  color: #FFFDF8;
  font-size: clamp(18px, 2.4vh, 28px);
  flex-shrink: 0;
}

.bar-a { background: linear-gradient(135deg, var(--peach), var(--peach-deep)); }
.bar-b { background: linear-gradient(135deg, var(--sky), var(--sky-deep)); }
.bar-total { background: linear-gradient(135deg, var(--sage), var(--sage-deep)); }

.bar-label { font-size: 14px; color: var(--ink-2); min-width: 44px; }

/* ---- 抽象算式 ---- */
.abstract-eq {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(48px, 10vh, 120px);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 32px);
  line-height: 1;
}

.abstract-eq .op { color: var(--peach-deep); }

/* ================================================================
   每日复习(berry)
   ================================================================ */
.review-progress-dots {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  flex-shrink: 0;
}

.review-progress-dots > div {
  width: clamp(10px, 1.4vh, 16px);
  height: clamp(10px, 1.4vh, 16px);
  border-radius: 50%;
}

.review-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vh, 44px) clamp(20px, 3vw, 40px);
  box-shadow: var(--shadow-card);
  border: var(--border);
  border-top: 4px solid var(--berry);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vh, 28px);
  flex-shrink: 0;
  min-height: clamp(260px, 40vh, 440px);
  justify-content: center;
}

.review-question {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(48px, 8vh, 100px);
  color: var(--ink);
  text-align: center;
  letter-spacing: 4px;
  line-height: 1;
}

.review-meta {
  font-size: 14px;
  color: var(--berry-deep);
  background: var(--berry-soft);
  padding: 4px 14px;
  border-radius: 50px;
}

.review-input-wrap { position: relative; display: inline-block; }

.review-input {
  width: clamp(100px, 15vh, 180px);
  height: clamp(72px, 10vh, 120px);
  border: none;
  border-bottom: 4px solid var(--berry);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(40px, 6vh, 80px);
  text-align: center;
  color: var(--ink);
  outline: none;
  caret-color: var(--berry-deep);
  position: relative;
  z-index: 1;
}

.review-input:focus { border-bottom-color: var(--berry-deep); }

.review-input-wrap::after {
  content: '?';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(40px, 6vh, 80px);
  color: var(--paper-3);
  pointer-events: none;
  z-index: 0;
}

.review-input-wrap:has(.review-input:not(:placeholder-shown))::after,
.review-input-wrap:focus-within::after { display: none; }

/* ================================================================
   图鉴(honey)
   ================================================================ */
.dex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vh, 16px);
  flex-shrink: 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.dex-card {
  background: var(--card);
  aspect-ratio: 1;
  max-height: 140px;
  border-radius: var(--radius-sm);
  padding: clamp(6px, 1vh, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-card);
  border: var(--border);
  transition: transform 0.2s;
}

.dex-card.locked {
  background: var(--paper-2);
  filter: grayscale(0.9);
  opacity: 0.6;
}

.dex-card.locked .dex-icon { filter: blur(4px); }

.dex-icon { font-size: clamp(28px, 4.5vh, 56px); line-height: 1; }

.dex-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(12px, 1.4vh, 14px);
  color: var(--ink);
}

.dex-locked-label { font-size: clamp(11px, 1.2vh, 13px); color: var(--ink-3); }

.stars-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.stars-row span { font-size: 28px; }

/* ================================================================
   首页打卡(honey · 铁律 4:旅程感不绑架)
   ================================================================ */
.streak-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.streak-day {
  flex: 1;
  aspect-ratio: 1;
  max-height: clamp(36px, 5vh, 60px);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-3);
}

.streak-day.done {
  background: var(--honey-soft);
  border: 1.5px solid var(--honey);
  color: var(--honey-deep);
}

.streak-day .stamp { font-size: clamp(14px, 2vh, 22px); }

.streak-day.today {
  border: 2.5px solid var(--accent-deep);
  background: var(--card);
  color: var(--accent-deep);
}

.hint-chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--honey-soft);
  border-radius: 50px;
  font-size: 13px;
  color: var(--honey-deep);
}

.home-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.6vh, 20px);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .home-row { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
}

/* ================================================================
   选人页 profiles
   ================================================================ */
.profiles-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
  overflow: auto;
}

.profiles-main {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
}

.profiles-header { text-align: center; }

.profiles-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--ink);
  margin-bottom: 8px;
  font-weight: 700;
}

.profiles-sub {
  font-family: var(--font-body);
  color: var(--ink-2);
  font-size: clamp(15px, 1.6vw, 18px);
}

.profiles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .profiles-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.profile-card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  color: var(--ink);
}

.profile-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent);
}

.profile-card.picking { transform: scale(0.96); }

.profile-xixi { border-top: 5px solid var(--peach); }
.profile-ranran { border-top: 5px solid var(--sky); }

.profile-avatar {
  font-size: clamp(72px, 10vw, 120px);
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(62, 58, 51, 0.12));
  animation: bob 3s ease-in-out infinite;
}

.profile-name {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 40px);
  color: var(--ink);
  font-weight: 700;
}

.profile-meta {
  font-family: var(--font-number);
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 4px 14px;
  border-radius: 50px;
}

.profile-stats { display: flex; gap: 20px; margin-top: 8px; }

.profile-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-num {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--accent-deep);
}

.stat-label { font-size: 13px; color: var(--ink-2); }

.profile-stage {
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--paper-2);
  border-radius: 50px;
  font-size: 14px;
  color: var(--ink-2);
}

.profiles-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 8px;
}

/* ================================================================
   设置页
   ================================================================ */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.settings-label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(15px, 1.9vh, 18px);
  color: var(--ink);
}

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

.chip {
  padding: 10px 20px;
  border-radius: 50px;
  border: 2px solid var(--paper-3);
  background: var(--card);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.chip:hover { transform: translateY(-2px); }

.chip.active {
  border-color: var(--accent-deep);
  background: var(--accent-soft);
  font-weight: 700;
}

.companion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 420px;
}

.companion-pick {
  aspect-ratio: 1;
  max-height: 110px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--paper-3);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-2);
}

.companion-pick .emoji { font-size: clamp(32px, 4.5vh, 48px); line-height: 1; }

.companion-pick:hover { transform: translateY(-3px); }

.companion-pick.active {
  border-color: var(--accent-deep);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
}

/* ================================================================
   动效 · 仪式感 · 合规层
   ================================================================ */

/* 答对仪式感:星星飞入 700ms(准则 2-3) */
@keyframes star-fly {
  0%   { transform: translateY(20px) scale(0.2); opacity: 0; }
  40%  { transform: translateY(-10px) scale(1.3); opacity: 1; }
  70%  { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-6px) scale(1); opacity: 0; }
}

.celebrate-star {
  position: fixed;
  font-size: 44px;
  pointer-events: none;
  z-index: 99;
  animation: star-fly 0.7s ease-out forwards;
}

@keyframes companion-hop {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px) rotate(-6deg); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-5px); }
}

.companion-hop { animation: companion-hop 0.6s ease-out; }

/* 飘落装饰(可关 · 准则 5-5) */
.deco-petal {
  position: absolute;
  font-size: 18px;
  opacity: 0.3;
  animation: fall 9s linear infinite;
  pointer-events: none;
}

@keyframes fall {
  0% { transform: translateY(-40px) rotate(0); opacity: 0; }
  10% { opacity: 0.35; }
  90% { opacity: 0.35; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* 字号档位 */
html[data-fontsize="small"] .main,
html[data-fontsize="small"] .sidebar { zoom: 0.9; }
html[data-fontsize="large"] .main,
html[data-fontsize="large"] .sidebar { zoom: 1.15; }

/* 系统减动效 + 面板开关 双通道(准则 5-5 / 13) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .deco-petal { display: none !important; }
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="off"] .deco-petal { display: none !important; }

/* tab 栏只在小屏出现(置底保证优先级) */
@media (min-width: 900px) {
  .tab-bar { display: none !important; }
}

/* 设置页只读态:未进入「修改」时选项不可点,非选中项变淡 */
.readonly { pointer-events: none; }
.readonly .chip:not(.active),
.readonly .companion-pick:not(.active) { opacity: 0.35; }

/* ================================================================
   本领地图(E7 探索式)· 地图区内部滚动,页面骨架不动
   ================================================================ */
.skill-map {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper-2);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2vh, 24px);
  -webkit-overflow-scrolling: touch;
}

.map-section-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(15px, 1.9vh, 19px);
  color: var(--ink);
  margin: 14px 0 10px;
}

.map-section-title:first-child { margin-top: 0; }

.map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.4vh, 14px);
}

@media (min-width: 700px) { .map-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .map-grid { grid-template-columns: repeat(4, 1fr); } }

.skill-node {
  background: var(--card);
  border: var(--border);
  border-left: 5px solid var(--node-color, var(--paper-3));
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s;
}

a.skill-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.skill-node-icon { font-size: clamp(24px, 3.4vh, 36px); line-height: 1; }

.skill-node-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(13px, 1.6vh, 16px);
}

.skill-node-state { font-size: 12px; color: var(--ink-2); }

.skill-node.mastered { background: var(--sage-soft); }
.skill-node.mastered .skill-node-state { color: var(--sage-deep); font-weight: 700; }
.skill-node.learning .skill-node-state { color: var(--honey-deep); }
.skill-node.locked { opacity: 0.45; filter: grayscale(0.6); }

.future-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.future-chip {
  background: rgba(255, 253, 248, 0.6);
  border: 1.5px dashed var(--paper-3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.future-chip b { font-family: var(--font-title); color: var(--ink-2); flex-shrink: 0; }

/* 学习原理页卡片 */
.principle-card {
  background: var(--card);
  border: var(--border);
  border-left: 5px solid var(--sky);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.principle-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(15px, 1.9vh, 18px);
  color: var(--ink);
  margin-bottom: 6px;
}

.principle-what, .principle-why {
  font-size: clamp(13px, 1.5vh, 15px);
  color: var(--ink-2);
  line-height: 1.65;
  margin-top: 4px;
}

.principle-why { color: var(--ink-3); }

/* 配置类页面(设置/看板等家长页)允许纵向滚动 — 一屏原则只锁孩子的游戏屏 */
.main--scroll {
  overflow-y: auto;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

/* 掌握新本领 → 回地图的飞星轨迹 + 格子点亮脉冲 */
.fly-star {
  position: fixed;
  font-size: 40px;
  z-index: 99;
  pointer-events: none;
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.4, 1), opacity 0.4s ease 0.9s;
  opacity: 1;
}

@keyframes lit-pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% { box-shadow: 0 0 0 8px rgba(239, 197, 120, 0.4), var(--shadow-lift); }
}

.skill-node.just-lit {
  animation: lit-pulse 1.1s ease-in-out 3;
  border-color: var(--honey-deep);
  border-left-color: var(--honey-deep);
}

/* ================================================================
   字号审计合规层(宪法 5-1:6-8 岁 ≥16px,凡是孩子要读的字都提级)
   家长专用页(原理/看板)保持成人标准
   ================================================================ */
.page-subtitle { font-size: clamp(15px, 1.7vh, 17px); }
.mascot-speech { font-size: clamp(16px, 1.8vh, 18px); }
.mission-meta { font-size: clamp(14px, 1.6vh, 16px); }
.skill-node-state { font-size: clamp(13px, 1.6vh, 15px); }
.skill-node-name { font-size: clamp(14px, 1.8vh, 17px); }
.dex-name { font-size: clamp(14px, 1.6vh, 16px); }
.dex-locked-label { font-size: clamp(13px, 1.4vh, 14px); }
.hint-chip { font-size: clamp(14px, 1.5vh, 15px); }
.streak-day { font-size: clamp(13px, 1.4vh, 14px); }
.bar-label { font-size: clamp(15px, 1.7vh, 17px); }
.tab { font-size: 13px; }
.review-meta { font-size: clamp(14px, 1.6vh, 16px); }

/* ---- v1.2 欢乐度补充:hero 彩虹微渐变 + 色条加宽 ---- */
.card-hero {
  background: linear-gradient(120deg, var(--accent-soft) 0%, var(--honey-soft) 55%, var(--sky-soft) 100%);
}

.skill-node { border-left-width: 6px; }

.streak-day.done {
  background: var(--honey-soft);
  border: 2px solid var(--honey);
}

/* 触屏设备(iPad/iPhone)禁用悬停效果 — 修复 iOS"上一次点击位置残留描边"问题 */
@media (hover: none) {
  .option-btn:hover {
    border-color: var(--paper-3);
    transform: none;
  }
  .chip:hover,
  .companion-pick:hover,
  .mission:hover,
  a.skill-node:hover,
  .btn:hover,
  .sidebar-footer:hover,
  .profile-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }
}

/* 手机竖屏紧凑化:舞台收紧高度,让「选项 + 反馈 + 下一题」不滚动就在首屏 */
@media (max-width: 600px) {
  .main {
    gap: clamp(10px, 1.4vh, 16px);
    padding-top: 10px;
  }
  .cpa-stage, .subitize-stage {
    min-height: clamp(170px, 27vh, 300px);
  }
  .review-card {
    min-height: clamp(200px, 30vh, 320px);
  }
  .concrete-cluster span { font-size: clamp(34px, 6vh, 64px); }
  .subitize-items span { font-size: clamp(44px, 9vh, 100px); }
  .page-title { font-size: clamp(18px, 2.3vh, 24px); }
}

/* 全端:内容坐在"视觉中心"(几何中心偏上,上下留白 4:5)。
   弹性空白装不下时自动归零(退化为顶对齐 + 滚动,按钮永不被顶出);
   地图类页面(含 .skill-map)自身撑满,不参与 */
.main:not(:has(.skill-map))::before { content: ''; flex: 5 1 0; }
.main:not(:has(.skill-map))::after { content: ''; flex: 4 1 0; }

/* 顶栏(返回 + 星星)钉在最上方,不参与内容居中 */
.top-bar { order: -1; }

/* 手机端微调(2026-07-02 Jan 真机反馈) */
@media (max-width: 600px) {
  /* 顶部留白封顶:短内容页不再出现"顶部大空洞",内容稳定从导航栏下方开始 */
  .main:not(:has(.skill-map))::before { max-height: clamp(16px, 9vh, 84px); }

  /* 字号整体收一号(手机持握距离更近) */
  body { font-size: 15px; }
  .page-title { font-size: clamp(17px, 2.1vh, 22px); }
  .page-subtitle { font-size: 14px; }
  .mascot-speech { font-size: 15px; }
  .mission-meta, .skill-node-state { font-size: 13px; }
  .settings-label { font-size: 15px; }
  .chip { font-size: 14px; padding: 8px 16px; }
  .companion-pick { font-size: 12px; max-height: 92px; }
  .companion-pick .emoji { font-size: clamp(28px, 3.8vh, 40px); }
  .review-question { font-size: clamp(40px, 6.5vh, 64px); }
  .dex-icon { font-size: clamp(26px, 3.6vh, 40px); }
  .dex-name { font-size: 13px; }
  .dex-locked-label { font-size: 12px; }
  .dex-card { max-height: 116px; }
  .top-stars { font-size: 13px; }
}

/* 二级页面(答题页等)无底部菜单:回收为标签栏预留的底部空间 */
body.no-tab .main { padding-bottom: clamp(16px, 3vh, 28px); }

/* 选项卡内的 ✓ 不换行、缩小随行(修复 emoji 选项被撑成竖长条) */
.option-btn { line-height: 1.15; white-space: nowrap; }
.option-btn.correct::after { font-size: 0.55em; vertical-align: middle; }

/* ================================================================
   手机端改用"整页滚动"(iOS 真机上内部滚动容器手势不可靠)
   桌面(≥900px)保持面板内滚动架构不变
   ================================================================ */
@media (max-width: 899px) {
  html, body {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }
  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .main {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  /* 地图在手机上不做内部滚动,跟整页一起滚 */
  .skill-map {
    flex: none;
    overflow-y: visible;
  }
}

/* 手机保险丝:任何内容都不允许把页面横向撑爆 */
@media (max-width: 899px) {
  html, body { overflow-x: hidden; }
  .cpa-stage, .subitize-stage { max-width: 100%; }
}

/* 顶栏头像按钮:手机上的账号切换入口(桌面靠侧栏名字卡) */
.avatar-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

/* 选人页手机紧凑化:一屏放下,不滚动 */
@media (max-width: 600px) {
  .profiles-body { padding: 10px; }
  .profiles-main { gap: 12px; padding: 8px; }
  .profiles-header .brand-badge { width: 44px !important; height: 44px !important; font-size: 24px !important; margin-bottom: 6px !important; }
  .profiles-title { font-size: 22px; margin-bottom: 2px; }
  .profiles-sub { font-size: 13px; }
  .profiles-grid { gap: 10px; }
  .profile-card { padding: 14px 12px; gap: 5px; }
  .profile-avatar { font-size: 48px; }
  .profile-name { font-size: 21px; }
  .profile-meta { font-size: 13px; padding: 2px 10px; }
  .profile-stats { gap: 18px; margin-top: 2px; }
  .stat-num { font-size: 17px; }
  .stat-label { font-size: 11px; }
  .profile-stage { font-size: 12px; padding: 4px 10px; margin-top: 2px; }
  .profiles-footer { padding: 0; gap: 8px; }
  .profiles-footer .mascot { font-size: 26px !important; }
  .profiles-footer div:last-child { font-size: 12px !important; }
}