/**
 * public/css/features.css
 * 新增功能样式（双拼 / 键盘示意图 / 真实尺寸键盘 / 新手引导可视化 / 童趣放大与奖励 /
 * 导入 / 积分商城）。★ 全部引用 tokens.css 变量，颜色一律 var(--x)，圆角 ≥ 5px。
 */

/* ============================================================ 童趣放大模式
 * 默认即「大字号·童趣」基调；可在设置中切回 normal。
 * 通过 <html data-ui-scale="kid|normal"> 控制。
 */
[data-ui-scale="kid"] {
  --fs-0: 15px;
  --fs-1: 17px;
  --fs-2: 20px;
  --fs-3: 24px;
  --fs-4: 30px;
  --fs-5: 38px;
  --fs-6: 48px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 46px;
}

/* 全局：按钮与卡片更厚实、更友好 */
.btn {
  font-size: var(--fs-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
}
.card {
  border-radius: var(--radius-md);
}
.entry-card {
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.entry-title {
  font-size: var(--fs-3);
}
.entry-desc {
  font-size: var(--fs-1);
}

/* ============================================================ 双拼练习视图 */
.shuangpin-view {
  max-width: var(--content-max);
  margin: 0 auto;
}
.sp-schemes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.sp-scheme {
  font-size: var(--fs-2);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
}
.sp-scheme.is-active {
  background: var(--daiqing);
  color: var(--paper);
  border-color: var(--daiqing);
  box-shadow: var(--shadow-1);
}
.sp-lesson-row {
  margin-bottom: var(--sp-4);
}
.select {
  font-size: var(--fs-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}
.sp-progress {
  height: 14px;
  background: var(--paper-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--sp-4) 0;
}
.sp-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--daiqing);
  border-radius: var(--radius-pill);
  transition: width 0.18s ease;
}
.sp-stats {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.sp-stat {
  flex: 1;
  background: var(--paper-2);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}
.sp-stat-value {
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--daiqing);
}
.sp-stat-label {
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.sp-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  min-height: 120px;
}
.sp-char {
  font-size: var(--fs-6);
  color: var(--ink-3);
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1.1;
}
.sp-char.is-done {
  color: var(--ink-3);
  opacity: 0.55;
}
.sp-char.is-current {
  color: var(--ink);
  font-weight: 800;
  transform: scale(1.18);
}
.sp-char.is-wrong {
  color: var(--err);
}
.sp-codehint {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--sp-7);
  margin-bottom: var(--sp-4);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sp-codehint.is-on {
  opacity: 1;
}
.sp-hint-char {
  font-size: var(--fs-5);
  font-weight: 800;
  color: var(--zhu);
}
.sp-hint-arrow {
  font-size: var(--fs-3);
  color: var(--ink-3);
}
.sp-hint-key {
  font-size: var(--fs-5);
  font-weight: 800;
  color: var(--paper);
  background: var(--daiqing);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--shadow-1);
}
.sp-kb {
  margin-bottom: var(--sp-4);
}
.sp-points {
  margin-top: var(--sp-4);
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--jin);
}

/* ============================================================ 键盘示意图 (SVG) */
.kb-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}
.kb-key .kb-base {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.kb-key .kb-label {
  fill: var(--ink-2);
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-ui);
}
.kb-key .kb-bump {
  fill: var(--ink-3);
}
.kb-key.is-hot .kb-base {
  fill: var(--daiqing-soft);
  stroke: var(--daiqing);
  stroke-width: 2.5;
}
.kb-key.is-hot .kb-label {
  fill: var(--daiqing-2);
}
.kb-key.is-current .kb-base {
  fill: var(--jin);
  stroke: var(--zhu);
  stroke-width: 3;
  animation: kbPulse 1.1s ease-in-out infinite;
}
.kb-key.is-current .kb-label {
  fill: var(--paper);
}
@keyframes kbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================================ 虚拟键盘：真实尺寸 + 韵母标注 */
.virtual-keyboard.vk-real {
  gap: 6px;
}
.virtual-keyboard.vk-real .vk-row {
  margin-bottom: 6px;
}
.vk-real .vk-key {
  font-size: var(--fs-2);
  padding: 0;
  min-height: 64px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
.vk-real .vk-key .vk-letter {
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1;
}
.vk-real .vk-key .vk-final {
  font-size: var(--fs-0);
  color: var(--daiqing);
  margin-top: 2px;
  line-height: 1;
}
.vk-real .vk-key.is-next {
  background: var(--daiqing-soft);
  border-color: var(--daiqing);
  transform: translateY(-3px);
}
.vk-real .vk-key.is-next .vk-letter {
  color: var(--daiqing-2);
}
.vk-real .vk-key.is-correct {
  background: var(--ok);
  color: var(--paper);
  animation: vkPop 0.22s ease;
}
.vk-real .vk-key.is-wrong {
  background: var(--err);
  color: var(--paper);
}
.vk-real .vk-key.is-pressed {
  transform: scale(0.94);
}
@keyframes vkPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.vk-compact .vk-final {
  font-size: var(--fs-0);
  color: var(--daiqing);
}

/* ============================================================ 童趣奖励与鼓励 */
.reward-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--zhu);
  background: var(--daiqing-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  animation: rewardPop 0.5s ease;
}
@keyframes rewardPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.confetti {
  position: fixed;
  top: -12px;
  width: 10px;
  height: 14px;
  border-radius: var(--radius-xs);
  z-index: 60;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ============================================================ 新手引导可视化 */
.onb-visual {
  margin: var(--sp-5) 0;
  text-align: center;
}
.onb-figure {
  display: inline-block;
  max-width: 100%;
}
.onb-caption {
  font-size: var(--fs-2);
  color: var(--ink-2);
  margin-top: var(--sp-3);
}
.onb-anim {
  animation: onbFloat 2.6s ease-in-out infinite;
}
@keyframes onbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.onb-tip {
  font-size: var(--fs-2);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper-2);
  border-left: 4px solid var(--daiqing);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.onb-target-wrap {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}

/* 引导插画配色（一律令牌） */
.onb-screen { fill: var(--daiqing-soft); stroke: var(--daiqing); stroke-width: 3; }
.onb-desk { fill: var(--paper-3); stroke: var(--line-strong); stroke-width: 2; }
.onb-kb { fill: var(--paper); stroke: var(--line-strong); stroke-width: 2; }
.onb-skin { fill: var(--jin); opacity: 0.85; }
.onb-furn { fill: var(--daiqing); opacity: 0.5; }
.onb-floor { stroke: var(--line-strong); stroke-width: 3; }
.onb-body { fill: var(--zhu); opacity: 0.8; }
.onb-head { fill: var(--jin); opacity: 0.9; }
.onb-line { stroke: var(--daiqing); stroke-width: 3; stroke-dasharray: 6 6; }

/* ============================================================ 导入模块 */
.imp-drop {
  border: 3px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  text-align: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.imp-drop.is-over {
  border-color: var(--daiqing);
  background: var(--daiqing-soft);
}
.imp-drop strong {
  font-size: var(--fs-3);
  color: var(--daiqing-2);
}
.imp-formats {
  font-size: var(--fs-1);
  color: var(--ink-3);
  margin-top: var(--sp-3);
}
.imp-preview {
  background: var(--paper-2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  max-height: 220px;
  overflow: auto;
  font-size: var(--fs-2);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
}
.imp-meta {
  font-size: var(--fs-1);
  color: var(--ink-3);
  margin: var(--sp-3) 0;
}
.imp-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin: var(--sp-3) 0;
}

/* ============================================================ 积分商城 / 兑换 / 排行 */
.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}
.prize-card {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
  border: 1px solid var(--line);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.prize-card.is-ready {
  border-color: var(--jin);
  box-shadow: var(--shadow-2);
}
.prize-emoji {
  font-size: 56px;
  line-height: 1;
}
.prize-name {
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--ink);
  margin: var(--sp-2) 0;
}
.prize-blurb {
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.prize-cost {
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--zhu);
  margin: var(--sp-3) 0;
}
.prize-card.is-ready {
  animation: prizeGlow 2.4s ease-in-out infinite;
}
@keyframes prizeGlow {
  0%, 100% { box-shadow: var(--shadow-1); }
  50% { box-shadow: 0 0 0 4px var(--daiqing-soft), var(--shadow-2); }
}
.rank-list {
  background: var(--paper-2);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2);
}
.rank-row.is-me {
  background: var(--daiqing-soft);
  font-weight: 700;
}
.rank-medal {
  width: 28px;
  text-align: center;
  font-size: var(--fs-3);
}
.rank-name {
  flex: 1;
  color: var(--ink);
}
.rank-pts {
  color: var(--zhu);
  font-weight: 700;
}
.points-hero {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  background: var(--daiqing);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}
.points-hero .ph-value {
  font-size: var(--fs-6);
  font-weight: 800;
}
.points-hero .ph-label {
  font-size: var(--fs-2);
  opacity: 0.9;
}
.points-hero .ph-sub {
  font-size: var(--fs-1);
  opacity: 0.85;
  margin-left: auto;
}

/* ============================================================ 拼音练习：正确拼写建议 */
.pinyin-suggest {
  min-height: var(--sp-5);
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--zhu);
  margin: var(--sp-2) 0 var(--sp-3);
}
.pinyin-suggest .sug-label {
  background: var(--daiqing-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  display: inline-block;
}