/* 心智花园 · 美术层
 * 《视觉风格与资源规范 V1.0》§4 视觉语言 / §12 动效
 * 四层材质：底层纸张 → 场景绘画 → 剪纸拼贴 → 柔和浮雕
 * 纹理只允许低频颗粒，文字区域不出现强花纹（§8.3）
 */

/* 底层纸张的颗粒/纤维层已统一由 paper.css 的 #app::before 承担，此处不再重复定义 */

#view, .tabbar { position: relative; z-index: 1; }

/* ── 剪纸拼贴：卡片边缘轻微有机不规则 ───────────── */
.card, .listitem, .selectable {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 62%);
}

/* 柔和浮雕：顶部提亮、底部压深，不做厚重拟物 */
.card, .resource {
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 98, 72, 0.09);
}

/* ── 夜色花园主视觉容器 ─────────────────────────── */
.hero {
  position: relative;
  margin: 0 calc(var(--page-pad) * -1);
  padding: var(--sp-20) var(--page-pad) var(--sp-24);
  overflow: hidden;
  color: #F7ECDA;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg svg { width: 100%; height: 100%; display: block; }
.hero__title { font-weight: 700; letter-spacing: 0.5px; }
.hero .t-ink2 { color: rgba(247, 236, 218, 0.82); }

/* 星点：稀疏金色，不做闪烁（禁止快速闪烁 §3）*/
.hero__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ── 芽芽 ─────────────────────────────────────── */
.yaya {
  display: block;
  height: 150px;
  width: auto;
  /* §5 展示规则：等比缩放，四周留安全区，不裁切叶芽与双脚 */
  filter: drop-shadow(0 6px 10px rgba(40, 32, 24, 0.22));
}
.yaya--sm { height: 74px; }
.yaya--xs { height: 44px; }
.yaya--lg { height: 190px; }

/* 平静待机：极缓呼吸，低动效下停用 */
.yaya--idle { animation: yaya-breathe 4.6s var(--ease-soft) infinite; transform-origin: 50% 92%; }
@keyframes yaya-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.012); }
}
:root[data-motion="low"] .yaya--idle { animation: none; }
@media (prefers-reduced-motion: reduce) { .yaya--idle { animation: none; } }

/* ── §8.7 状态反馈 ────────────────────────────── */
/* 成功：叶片、微光和小范围金色星点，300-600ms */
@keyframes leaf-pop {
  0% { opacity: 0; transform: scale(0.6) rotate(-14deg); }
  55% { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.fx-success { animation: leaf-pop var(--dur-slow) var(--ease-out); }

/* 解锁：柔光从对象边缘扩散 600-900ms，可跳过 */
@keyframes unlock-glow {
  0% { box-shadow: 0 0 0 0 rgba(214, 161, 58, 0.5); }
  100% { box-shadow: 0 0 0 22px rgba(214, 161, 58, 0); }
}
.fx-unlock { animation: unlock-glow 900ms var(--ease-out) 2; }

/* 错误：轻微左右位移或边框变化，不使用大面积红屏 */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  56% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
.fx-error { animation: nudge 280ms var(--ease-out); }

/* 金色星点：小范围、稀疏 */
.spark {
  position: absolute;
  width: 7px; height: 7px;
  pointer-events: none;
  color: var(--gold-primary);
  animation: spark-fly 620ms var(--ease-out) forwards;
}
@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -30px)) scale(1.15); }
}
:root[data-motion="low"] .spark { display: none; }

/* 卡片依次浮入 */
.fx-rise { animation: rise-in var(--dur-base) var(--ease-out) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
:root[data-motion="low"] .fx-rise { animation: none; }

/* ── 训练页：低干扰 ───────────────────────────── */
/* §3 训练页采用暖纸低纹理底；中央刺激区至少占可用高度 55% */
.trainpage {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: var(--paper-canvas);
}
.trainpage__top {
  flex: 0 0 auto;
  padding: var(--sp-12) var(--page-pad);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  border-bottom: 1px solid rgba(217, 190, 146, 0.55);
}
.trainpage__stage {
  flex: 1 1 auto;
  min-height: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.trainpage__input {
  flex: 0 0 auto;
  padding: var(--sp-12) var(--page-pad) var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.trainpage__prompt {
  text-align: center;
  font-size: calc(var(--fs-title) * var(--font-scale));
  font-weight: 600;
  line-height: 1.4;
}
.trainpage__hint {
  text-align: center;
  color: var(--ink-secondary);
  font-size: calc(var(--fs-label) * var(--font-scale));
}

/* 训练页 HUD */
.hud { display: flex; gap: var(--sp-16); justify-content: center; }
.hud__cell { text-align: center; min-width: 56px; }
.hud__v { font-weight: 700; font-size: calc(var(--fs-title) * var(--font-scale)); line-height: 1.1; }
.hud__k { color: var(--ink-secondary); font-size: calc(var(--fs-caption) * var(--font-scale)); }

/* 二元作答按钮（相同/不同 等） */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.answers--3 { grid-template-columns: repeat(3, 1fr); }
.answers--1 { grid-template-columns: 1fr; }
.ansbtn {
  min-height: 64px;
  border-radius: var(--r-large);
  border: 2px solid var(--paper-border);
  background: var(--paper-surface-high);
  color: var(--ink-primary);
  font-size: calc(var(--fs-body-lg) * var(--font-scale));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
  /* 立体按压：底缘厚度 */
  box-shadow: 0 3px 0 rgba(150, 124, 92, 0.35), var(--shadow-sm);
}
.ansbtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 rgba(150, 124, 92, 0.35); }
.ansbtn:disabled { opacity: 0.5; cursor: default; }
.ansbtn.is-right { border-color: var(--moss-primary); background: #E2EDDD; }
.ansbtn.is-wrong { border-color: var(--danger-primary); background: #F6E3E1; }

/* 方向按钮 */
.dirpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); max-width: 260px; margin: 0 auto; }
.dirpad .ansbtn { min-height: 60px; }
.dirpad__spacer { visibility: hidden; }

/* 网格刺激区（星灯矩阵 / 天窗一瞥 等） */
.gridstim { display: grid; gap: 8px; margin: 0 auto; touch-action: manipulation; }
.gridcell {
  aspect-ratio: 1;
  border-radius: var(--r-small);
  border: 1.5px solid var(--paper-border);
  background: var(--paper-surface-high);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  min-width: 30px;
  padding: 0;
}
.gridcell.is-lit { background: var(--gold-primary); border-color: #B4801F; box-shadow: 0 0 12px rgba(214, 161, 58, 0.55); }
.gridcell.is-picked { background: var(--plum-primary); border-color: #3F3050; }
.gridcell.is-picked::after {
  content: "✓";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #FFF4DC; font-weight: 700; font-size: 18px;
}
.gridcell.is-right { background: var(--moss-primary); border-color: #23412B; }
.gridcell.is-right::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #F2E8D4; font-weight: 700; }
.gridcell.is-missed { background: #F0DCC0; border-color: var(--danger-primary); border-style: dashed; }
.gridcell:disabled { cursor: default; }

/* 画布刺激区 */
.stagecanvas {
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-large);
  border: 1px solid var(--paper-border);
  background: #FBF0DA;
  display: block;
  touch-action: manipulation;
}

/* 计时条 */
.timerbar { width: 100%; max-width: 420px; height: 6px; border-radius: 3px; background: var(--paper-border); overflow: hidden; }
.timerbar__fill { height: 100%; background: var(--plum-primary); transition: width 120ms linear; }
.timerbar__fill.is-low { background: var(--terracotta-primary); }

/* 连击（轻反馈，不发额外经济奖励）*/
.combo {
  position: absolute;
  top: 8px; right: 12px;
  font-size: calc(var(--fs-label) * var(--font-scale));
  font-weight: 700;
  color: var(--gold-primary);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.combo.is-on { opacity: 1; }

/* 得分浮字 */
.floatscore {
  position: absolute;
  font-weight: 700;
  color: var(--moss-primary);
  pointer-events: none;
  animation: float-up 700ms var(--ease-out) forwards;
  font-size: calc(var(--fs-body-lg) * var(--font-scale));
}
@keyframes float-up {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}
:root[data-motion="low"] .floatscore { animation-duration: 1ms; }

/* ── 花园 ─────────────────────────────────────── */
.garden-scene {
  position: relative;
  margin: 0 calc(var(--page-pad) * -1);
  overflow: hidden;
}
.garden-scene svg { display: block; width: 100%; height: auto; }

.plotgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12);
}
.plot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-medium);
  border: 2px solid rgba(120, 90, 58, 0.55);
  background: linear-gradient(170deg, #A8825A, #8A6842);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 88px;
}
.plot--locked {
  background: repeating-linear-gradient(45deg, #D6C5AC, #D6C5AC 7px, #CBB99E 7px, #CBB99E 14px);
  border-style: dashed;
  border-color: rgba(102, 88, 74, 0.6);
}
.plot--empty { background: linear-gradient(170deg, #7C5C3A, #6A4E31); }
.plot[aria-pressed="true"] {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(214, 161, 58, 0.45);
}
.plot__art { position: absolute; inset: 0; display: block; }
.plot__art svg { width: 100%; height: 100%; }
.plot__label {
  position: relative;
  width: 100%;
  padding: 3px 6px 4px;
  background: rgba(38, 30, 24, 0.62);
  color: #F7ECDA;
  font-size: calc(11px * var(--font-scale));
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ── 勋章 ─────────────────────────────────────── */
.badgegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
.badgecard {
  background: var(--paper-surface-high);
  border: 1px solid var(--paper-border);
  border-radius: var(--r-medium);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}
.badgecard svg { width: 54px; height: 54px; }
.badgecard__name { font-weight: 600; font-size: calc(var(--fs-label) * var(--font-scale)); line-height: 1.3; }
.badgecard__tag { font-size: calc(var(--fs-caption) * var(--font-scale)); color: var(--ink-secondary); }

/* ── 数据可视化：条形（不用雷达图，条长仅表示练习量）── */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 62px 1fr 32px; align-items: center; gap: var(--sp-8); }
.bar__k { font-size: calc(var(--fs-label) * var(--font-scale)); color: var(--ink-secondary); }
.bar__track { height: 14px; border-radius: 7px; background: var(--paper-border); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 7px; background: var(--moss-soft); transition: width var(--dur-base) var(--ease-out); }
.bar__v { font-size: calc(var(--fs-label) * var(--font-scale)); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* 折线图容器 */
.linechart { width: 100%; height: auto; display: block; }

/* 数字统计块 */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.statrow--4 { grid-template-columns: repeat(4, 1fr); }
.stat {
  background: var(--paper-surface-high);
  border: 1px solid var(--paper-border);
  border-radius: var(--r-medium);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
}
.stat__v { font-weight: 700; font-size: calc(var(--fs-h2) * var(--font-scale)); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat__k { color: var(--ink-secondary); font-size: calc(var(--fs-caption) * var(--font-scale)); margin-top: 2px; }

/* ── 专业探索路线（§8.5 任务路线）─────────────── */
.route { display: flex; flex-direction: column; gap: 0; }
.routestep {
  display: flex;
  gap: var(--sp-12);
  align-items: flex-start;
  padding: var(--sp-12) 0;
  position: relative;
}
.routestep::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: -4px;
  width: 2.5px;
  background: var(--paper-border);
}
.routestep:last-child::before { display: none; }
.routestep__n {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--paper-border);
  background: var(--paper-surface-high);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(var(--fs-label) * var(--font-scale));
  color: var(--ink-secondary);
  position: relative;
  z-index: 1;
}
.routestep.is-current .routestep__n {
  border-color: var(--plum-primary);
  color: var(--plum-primary);
  box-shadow: 0 0 0 4px rgba(91, 73, 109, 0.16);
}
.routestep.is-done .routestep__n { background: var(--moss-primary); border-color: var(--moss-primary); color: #F2E8D4; }
.routestep.is-locked .routestep__n { color: var(--ink-disabled); }

/* ── 花朵图鉴 ─────────────────────────────────── */
.albumgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); }
.albumcard {
  background: var(--paper-surface-high);
  border: 1px solid var(--paper-border);
  border-radius: var(--r-medium);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.albumcard svg { width: 72px; height: 72px; }
.albumcard--locked { opacity: 0.72; background: var(--paper-surface); }

/* ── 开关 ─────────────────────────────────────── */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-12) 0;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.switch__track {
  flex: 0 0 auto;
  width: 52px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--paper-border);
  position: relative;
  transition: background var(--dur-fast);
}
.switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper-surface-high);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] .switch__track { background: var(--moss-primary); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(22px); }
.switch__state { font-size: calc(var(--fs-caption) * var(--font-scale)); color: var(--ink-secondary); }

/* ── 分隔 ─────────────────────────────────────── */
.divider { height: 1px; background: var(--paper-border); border: none; margin: var(--sp-16) 0; }

/* 云纹分隔（装饰） */
.cloudrule { display: block; width: 100%; height: 14px; color: var(--paper-border); opacity: 0.8; }