/**
 * style.css — WordTrail 视觉层 · 「新艾利都 / New Eridu Arcade」
 * ------------------------------------------------------------
 * 设计语言（绝区零同源、原创落地，刻意远离多邻国）：
 *   · 墨黑画布 + 酸性黄绿主色 #D6FB41，警示红 / 电光青为利落点缀
 *   · 切角硬边面板（clip-path 缺角）+ HUD 角标 + 黑黄警戒条
 *   · 半调网点 / CRT 扫描线 / 噪点颗粒 / 霓虹辉光，营造街机质感
 *   · 标题 Archivo Black 粗压缩斜冲，HUD 用 Chakra Petch，正文 Archivo
 *   · 邦布 Bangboo 取代猫头鹰作吉祥物
 * 命名沿用既有语义类名，逻辑层零改动。
 */

/* ============ 变量 ============ */
:root {
  /* ===== Soft Studio：暖白画布 + 柔粉分区 + 藏蓝墨 + 珊瑚橙（呼应 office 插画）===== */
  --canvas: #f4f1ea;       /* 暖白画布 */
  --ink: #ffffff;          /* 卡面白 / 主色按钮上的白字（沿用旧名）*/
  --ink-2: #f4f1ea;        /* 页面底色（暖白）*/
  --panel: #ffffff;        /* 卡片白 */
  --panel-2: #f1ede4;      /* 次级浅暖面：进度槽 / 未选 */
  --panel-3: #e9f1fb;      /* 选中浅蓝 */
  --line: #ece7db;         /* 暖色细描边 */
  --line-bright: #e3ddcd;
  --line-dark: #ece7db;

  --acid: #57bd83;         /* 主"正向"色：柔和自然绿（正确/进度/掌握）*/
  --acid-deep: #46a368;
  --acid-glow: transparent;
  --primary: #ef7350;      /* 品牌主色：珊瑚橙（CTA 按钮，呼应小人橙领带）*/
  --primary-deep: #d65d3b;
  --red: #e8645a;
  --red-deep: #d24b41;
  --red-soft: #fbe4e1;
  --cyan: #3a6098;         /* 次要/品牌结构：藏蓝（导航 active / 听力，呼应西装）*/
  --cyan-deep: #2d4d7d;
  --hazard: #f2b441;       /* 暖金（奖励）*/
  --gold: #f2b441;
  --leaf: #57bd83;

  --bone: #2a3340;         /* 主标题：深藏蓝墨 */
  --text: #545f6d;         /* 正文 */
  --muted: #9aa4af;        /* 次要 */
  --muted-2: #c3cad2;

  /* 柔和弥散阴影（取代硬边 3D，是去"粗制滥造"的关键）*/
  --sh-sm: 0 2px 8px -2px rgba(42, 51, 64, 0.10);
  --sh: 0 12px 28px -14px rgba(42, 51, 64, 0.20);
  --sh-lg: 0 24px 52px -20px rgba(42, 51, 64, 0.24);

  --maxw: 480px;
  --display: 'Outfit', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --hud: 'Outfit', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --body: 'Outfit', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;

  /* 圆角（替代 ZZZ 切角）：clip-path inset+round，全站切角元素一并变圆角 */
  --notch: inset(0 round 16px);
  --notch-sm: inset(0 round 10px);
}

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--body);
  color: var(--text);
  background: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

.screen { display: flex; flex-direction: column; flex: 1; min-height: 100vh; }

/* 氛围纹理层：浅色主题不需要 CRT 扫描线 / 噪点 / 暗角，整体隐藏 */
.fx { display: none; }

/* 工具：警戒条（浅色主题保留为柔和的黄色斜纹，仅个别处用到） */
.hazard {
  background-image: repeating-linear-gradient(-45deg, var(--hazard) 0 11px, #ffe89a 11px 22px);
}

/* ============ 按钮（切角 + 硬压 3D） ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 800;
  font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); background: var(--acid);
  border-radius: 16px;
  padding: 15px 22px;
  filter: drop-shadow(0 5px 0 var(--acid-deep)) drop-shadow(0 0 12px var(--acid-glow));
  transition: transform 0.06s ease, filter 0.06s ease;
  user-select: none;
}
.btn:active { filter: drop-shadow(0 0 0 var(--acid-deep)); }
.btn--full { width: 100%; }
.btn--blue { background: var(--cyan); color: var(--ink); filter: drop-shadow(0 5px 0 var(--cyan-deep)) drop-shadow(0 0 12px rgba(43,215,255,0.45)); }
.btn--blue:active { filter: drop-shadow(0 0 0 var(--cyan-deep)); }
.btn--red { background: var(--red); color: #fff; filter: drop-shadow(0 5px 0 var(--red-deep)) drop-shadow(0 0 12px rgba(255,59,48,0.45)); }
.btn--red:active { filter: drop-shadow(0 0 0 var(--red-deep)); }
.btn--ghost {
  background: transparent; color: var(--acid);
  box-shadow: inset 0 0 0 2px var(--line-bright);
  filter: none;
}
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--acid); color: var(--acid); }
.btn:disabled {
  background: var(--panel-2); color: var(--muted-2);
  filter: none; cursor: not-allowed; transform: none;
}

/* ============ 顶部 HUD ============ */
.hud { display: flex; align-items: center; gap: 8px; }
.hud-stat {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--hud); font-weight: 700; font-size: 16px;
  background: var(--panel); padding: 5px 11px 5px 9px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.hud-stat .ico { font-size: 17px; filter: saturate(1.2); }
.hud-fire { color: var(--hazard); }
.hud-xp { color: var(--acid); }
.hud-hearts { color: var(--red); }

/* ============ 品牌标 ============ */
.brand { display: flex; }
.brand-logo { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  font-family: var(--display); font-weight: 800; font-size: 18px; color: #fff;
  background: var(--acid); padding: 5px 10px 4px; border-radius: 10px; flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: 0.5px; color: var(--bone); text-transform: uppercase; }
.brand-sub { font-family: var(--hud); font-size: 10px; font-weight: 600; letter-spacing: 3px; color: var(--muted); }

/* ============ 吉祥物：邦布 ============ */
.mascot { display: flex; align-items: flex-start; gap: 11px; margin: 6px 0 16px; }
.mascot-avatar {
  width: 60px; height: 60px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 38%, #1d2026, var(--ink));
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--acid), 0 0 14px var(--acid-glow);
}
.mascot-avatar img { width: 104%; height: 104%; object-fit: cover; }
.mascot-bubble {
  position: relative; flex: 1;
  background: var(--panel); color: var(--text);
  border-radius: 16px;
  padding: 12px 15px; font-size: 14px; font-weight: 600; line-height: 1.55;
  box-shadow: inset 0 0 0 1px var(--line-bright);
}
.mascot-name {
  display: block; font-family: var(--hud); font-weight: 700; letter-spacing: 2px;
  color: var(--acid); font-size: 11px; margin-bottom: 3px; text-transform: uppercase;
}
.mascot--center { flex-direction: column; align-items: center; max-width: 400px; margin: 8px auto 18px; }
.mascot--center .mascot-avatar { width: 116px; height: 116px; }
.mascot--center .mascot-bubble { text-align: center; }

/* ============ 学习小径 ============ */
/* 移动端基础布局：导航栏=顶部条（品牌左·HUD右，竖向导航隐藏，用底部 tabbar）；主列与右栏纵向堆叠 */
.nav-rail {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  position: sticky; top: 0; z-index: 5; border-bottom: 2px solid var(--line);
  background: var(--ink);
}
.nav-rail .hud { margin-left: auto; }
.nav-items { display: none; }
.home-main { padding: 6px 16px 128px; }
.home-rail { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 128px; }
.trail { display: block; }

.trail-unit { margin-top: 26px; }
.unit-banner {
  position: relative;
  background: var(--panel-2);
  color: var(--bone);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--acid);
  overflow: hidden;
}
.unit-banner::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: radial-gradient(rgba(214,251,65,0.10) 1px, transparent 1.3px);
  background-size: 11px 11px;
}
/* 右侧警戒条角标 */
.unit-banner::after {
  content: ''; position: absolute; top: 0; right: 0; width: 26px; height: 100%;
  opacity: 0.85;
  -webkit-mask: linear-gradient(-135deg, #000 40%, transparent 41%);
          mask: linear-gradient(-135deg, #000 40%, transparent 41%);
}
.unit-banner .u-ico {
  font-size: 26px; width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--acid);
}
.unit-banner .u-meta { flex: 1; min-width: 0; }
.unit-banner .u-title { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.5px; }
.unit-banner .u-sub { font-family: var(--hud); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-top: 2px; text-transform: uppercase; }

/* 单元进度条（单元卡 + 顶部吸顶头共用）*/
.uprog { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.uprog-bar { flex: 1; height: 6px; background: var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.uprog-fill { height: 100%; background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); transition: width 0.45s cubic-bezier(.33, 1, .68, 1); }
.uprog-num { flex-shrink: 0; font-family: var(--hud); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); }

.nodes { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 0 8px; }
/* 数据链主脊：贯穿单元所有关卡的发光虚线，关卡像“站点”串在其上 */
.nodes::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; z-index: 0;
  width: 0; transform: translateX(-50%);
  border-left: 3px dashed rgba(214, 251, 65, 0.22);
}
.node-row { position: relative; z-index: 1; display: flex; justify-content: center; width: 100%; }
.node-row:nth-child(4n+2) { transform: translateX(-20px); }
.node-row:nth-child(4n+3) { transform: translateX(-36px); }
.node-row:nth-child(4n+0) { transform: translateX(20px); }
.node-row:nth-child(4n+1) { transform: translateX(36px); }

.node {
  position: relative; width: 72px; height: 68px; margin: 13px 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; color: var(--ink);
  background: var(--acid); border-radius: 16px;
  filter: drop-shadow(0 6px 0 var(--acid-deep));
  transition: transform 0.09s ease, filter 0.09s ease;
}
.node:active { filter: drop-shadow(0 0 0 var(--acid-deep)); }
.node--done {
  background: var(--panel-2); color: var(--acid);
  filter: none; box-shadow: inset 0 0 0 2px var(--acid), 0 0 14px var(--acid-glow);
}
.node--done:active { transform: none; }
.node-check { font-family: var(--display); font-weight: 800; font-size: 30px; }
.node--current {
  animation: bob 1.2s ease-in-out infinite;
  /* 当前关卡霓虹辉光（filter 在 clip-path 之后生效，不被切角裁掉） */
  filter: drop-shadow(0 6px 0 var(--acid-deep)) drop-shadow(0 0 16px var(--acid-glow));
}
/* START 气泡 + “你在这里”声呐脉冲挂在 .node-row 上：节点自身被 clip-path 裁切，外溢装饰放不下。
   行宽 100%、节点居中 → left:50% 即对准节点；节点在行内 margin-top:13px、尺寸 72×68。 */
.node-row--current::after {
  content: 'START';
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%) skewX(-7deg); z-index: 2;
  font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 1px;
  color: var(--ink); background: var(--acid); padding: 4px 10px 3px;
  border-radius: 10px; box-shadow: 0 0 12px var(--acid-glow);
}
.node-row--current::before {
  content: ''; position: absolute; top: 13px; left: 50%; width: 72px; height: 68px;
  border: 2px solid var(--acid); border-radius: 16px; pointer-events: none;
  animation: node-pulse 1.7s ease-out infinite;
}
@keyframes node-pulse {
  0% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  70%, 100% { opacity: 0; transform: translateX(-50%) scale(1.55); }
}
.node--locked {
  background: var(--panel); color: var(--muted-2);
  filter: none; box-shadow: inset 0 0 0 1px var(--line); cursor: not-allowed;
}
.node--locked:active { transform: none; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ============ 今日复习卡 / 智能练习卡（HUD 面板） ============ */
.review-card, .smart-card {
  position: relative; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); color: var(--text);
  border-radius: 16px; padding: 16px 18px; margin: 8px 0 4px;
  box-shadow: inset 0 0 0 1px var(--line-bright);
  transition: transform 0.08s ease;
}
.review-card:active, .smart-card:active { filter: brightness(1.06); }
.smart-card { box-shadow: inset 0 0 0 1px var(--cyan-deep), inset 4px 0 0 var(--cyan); }
.review-card { box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--acid); }
.smart-card .s-ico, .review-card .r-ico {
  font-size: 22px; width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); border-radius: 10px;
}
.smart-card .s-ico { box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); }
.review-card .r-ico { box-shadow: inset 0 0 0 1px var(--acid); color: var(--acid); }
.s-title, .r-title { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.3px; color: var(--bone); }
.s-sub, .r-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.smart-card .s-go { margin-left: auto; font-family: var(--hud); font-size: 22px; color: var(--cyan); }
.review-card.is-empty { opacity: 0.7; box-shadow: inset 0 0 0 1px var(--line); }
.review-card.is-empty .r-ico { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-bright); }

/* ============ 底部导航 ============ */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw); display: flex; z-index: 6;
  background: var(--ink);
  border-top: 2px solid var(--line);
}
.tab {
  flex: 1; padding: 11px 0 13px; text-align: center;
  font-family: var(--hud); font-size: 11px; font-weight: 600; letter-spacing: 2px;
  color: var(--muted-2); text-transform: uppercase; position: relative;
}
.tab .ico { display: block; font-size: 23px; margin-bottom: 3px; filter: grayscale(1); opacity: 0.4; }
.tab--active { color: var(--acid); }
.tab--active .ico { filter: none; opacity: 1; }
.tab--active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; background: var(--acid); box-shadow: 0 0 10px var(--acid-glow);
}

/* ============ 答题界面 ============ */
.lesson-top { display: flex; align-items: center; gap: 14px; padding: 16px 16px 10px; }
.quit-btn { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--muted); line-height: 1; }
.quit-btn:active { color: var(--red); }
.progress {
  flex: 1; height: 14px; background: var(--panel-2);
  border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; transition: width 0.35s ease; position: relative;
  background: var(--acid); box-shadow: 0 0 12px var(--acid-glow);
}
.progress-fill::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: rgba(255, 255, 255, 0.35); border-radius: 99px;
}
.lesson-hearts { font-family: var(--hud); color: var(--red); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 4px; }

.lesson-body { flex: 1; padding: 12px 18px 0; display: flex; flex-direction: column; }
.q-instruction {
  font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.3px; line-height: 1.25;
  margin: 8px 0 22px; padding-left: 13px; color: var(--bone);
  border-left: 4px solid var(--acid);
}

.q-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.q-prompt-row { display: flex; align-items: center; gap: 14px; }
.q-word { font-family: var(--display); font-weight: 800; font-size: 36px; letter-spacing: 0.5px; color: var(--bone); }
.q-meaning { font-family: var(--display); font-weight: 800; font-size: 28px; text-align: center; color: var(--bone); }
.q-phonetic { font-family: var(--hud); color: var(--cyan); font-size: 15px; font-weight: 500; letter-spacing: 1px; }

.speaker-btn {
  background: var(--cyan); color: var(--ink);
  width: 64px; height: 64px; border-radius: 16px;
  font-size: 28px; display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 0 var(--cyan-deep)) drop-shadow(0 0 10px rgba(43,215,255,0.4));
  transition: transform 0.06s, filter 0.06s;
}
.speaker-btn:active { filter: drop-shadow(0 0 0 var(--cyan-deep)); }
.speaker-btn--big { width: 104px; height: 104px; font-size: 44px; margin: 18px auto; }

/* 看图题：无字助记插画题干（看图选义） */
.q-prompt--pic { width: 100%; }
.q-pic {
  position: relative; width: 100%; max-width: 290px; margin: 6px auto 2px;
  aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--acid), 0 0 18px rgba(214,251,65,0.25);
}
.q-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* HUD 角标装饰 */
.q-pic::after {
  content: ''; position: absolute; left: 8px; bottom: 8px; width: 16px; height: 16px;
  border-left: 2px solid var(--acid); border-bottom: 2px solid var(--acid); opacity: 0.8;
}

/* 选择题选项 */
.choices { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 13px;
  text-align: left; font-size: 17px; font-weight: 700; color: var(--text);
  background: var(--panel); border-radius: 16px;
  padding: 15px 16px 15px 18px;
  box-shadow: inset 0 0 0 1px var(--line-bright);
  transition: transform 0.06s, box-shadow 0.12s, background 0.12s, color 0.12s;
}
.choice::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-bright);
  transition: background 0.12s;
}
.choice:active { filter: brightness(1.06); }
.choice .num {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hud); font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-bright);
}
.choice--selected { background: var(--panel-3); color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 14px rgba(43,215,255,0.25); }
.choice--selected::before { background: var(--cyan); }
.choice--selected .num { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.choice--correct { background: rgba(214,251,65,0.10); color: var(--acid); box-shadow: inset 0 0 0 2px var(--acid), 0 0 16px var(--acid-glow); }
.choice--correct::before { background: var(--acid); }
.choice--correct .num { color: var(--ink); background: var(--acid); }
.choice--wrong { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 0 14px rgba(255,59,48,0.3); }
.choice--wrong::before { background: var(--red); }
.choice--wrong .num { color: #fff; background: var(--red); }
.choice--disabled { pointer-events: none; }

/* 例句填空 */
.q-prompt--cloze { width: 100%; }
.q-cloze {
  font-size: 21px; font-weight: 700; line-height: 1.8; color: var(--bone);
  text-align: center; padding: 6px 4px;
}
.cloze-blank {
  display: inline-block; min-width: 80px; height: 1.05em; margin: 0 7px; vertical-align: -3px;
  border-bottom: 3px solid var(--acid); box-shadow: 0 8px 12px -10px var(--acid);
}
.q-cloze-cn {
  text-align: center; color: var(--muted); font-weight: 600; font-size: 15px; margin-top: 14px;
  font-family: var(--hud); letter-spacing: 0.5px;
}

/* 看词选图：2x2 图片选项网格 */
.choices--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.choice--pic { padding: 0; overflow: hidden; aspect-ratio: 1 / 1; }
.choice--pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 英中配对消除 */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.match-tile {
  font-size: 16px; font-weight: 700; color: var(--text);
  background: var(--panel); border-radius: 10px; padding: 16px 12px; text-align: center;
  box-shadow: inset 0 0 0 1px var(--line-bright);
  transition: box-shadow 0.12s, color 0.12s, opacity 0.25s, background 0.12s;
}
.match-tile--sel { color: var(--cyan); background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 14px rgba(43,215,255,0.25); }
.match-tile--done { opacity: 0.28; color: var(--acid); box-shadow: inset 0 0 0 1px var(--acid); pointer-events: none; }
.match-tile--wrong { color: var(--red); box-shadow: inset 0 0 0 2px var(--red), 0 0 14px rgba(255,59,48,0.3); animation: shake 0.35s; }
.match-hint { text-align: center; color: var(--muted); font-family: var(--hud); font-size: 13px; letter-spacing: 1px; padding: 8px; }

/* 拼写题 */
.answer-slots {
  min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  padding: 10px 4px; margin: 16px 0 24px;
  border-bottom: 2px dashed var(--line-bright);
}
.letters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.letter, .slot {
  min-width: 46px; font-family: var(--hud); font-size: 19px; font-weight: 700;
  color: var(--bone); background: var(--panel); border-radius: 10px;
  padding: 12px 8px; text-align: center; box-shadow: inset 0 0 0 1px var(--line-bright);
  transition: transform 0.06s;
}
.letter:active { filter: brightness(1.1); }
.letter { color: var(--acid); }
.letter--used { visibility: hidden; }
.slot { color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan-deep); background: var(--panel-2); }

/* ============ 底部操作 + 反馈 ============ */
.lesson-footer { padding: 18px; border-top: 1px solid var(--line); transition: background 0.2s, box-shadow 0.2s; }
.lesson-footer--correct { background: rgba(214,251,65,0.07); box-shadow: inset 0 3px 0 var(--acid); }
.lesson-footer--wrong { background: rgba(255,59,48,0.07); box-shadow: inset 0 3px 0 var(--red); }
.feedback { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; animation: slide-up 0.25s ease; }
.feedback-ico {
  width: 52px; height: 52px; flex-shrink: 0; overflow: hidden;
  background: var(--ink); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.feedback-ico img { width: 106%; height: 106%; object-fit: cover; }
.feedback--correct .feedback-ico { box-shadow: inset 0 0 0 2px var(--acid), 0 0 14px var(--acid-glow); }
.feedback--wrong .feedback-ico { box-shadow: inset 0 0 0 2px var(--red), 0 0 14px rgba(255,59,48,0.4); }
.ft-title { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
.feedback--correct .ft-title { color: var(--acid); }
.feedback--wrong .ft-title { color: var(--red); }
.ft-detail { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; }
.ft-detail .en { font-family: var(--display); font-weight: 800; color: var(--bone); margin-right: 4px; }

@keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.shake { animation: shake 0.4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* ============ 结算页 ============ */
.summary { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 22px 24px; gap: 6px; }
.summary-title {
  font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--acid); text-shadow: 0 0 18px var(--acid-glow); transform: skewX(-6deg);
}
.summary-stats { display: flex; gap: 11px; width: 100%; margin: 16px 0 8px; }
.summary-stat { flex: 1; background: var(--panel); border-radius: 16px; padding: 14px 6px; box-shadow: inset 0 0 0 1px var(--line-bright); }
.summary-stat .ss-label { font-family: var(--hud); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.summary-stat .ss-value { font-family: var(--display); font-weight: 800; font-size: 26px; margin-top: 4px; }
.summary-stat.is-xp .ss-value { color: var(--acid); }
.summary-stat.is-acc .ss-value { color: var(--cyan); }
.summary-stat.is-streak .ss-value { color: var(--hazard); }
.summary-actions { width: 100%; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* 彩带 */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti-piece { position: absolute; width: 9px; height: 14px; top: -20px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.9; } }

/* ============ 统计页 ============ */
.stats-wrap { padding: 8px 16px 128px; }
.section-title {
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase;
  margin: 20px 0 12px; padding-left: 11px; border-left: 4px solid var(--acid); color: var(--bone);
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 10px; }
.stat-card { background: var(--panel); border-radius: 16px; padding: 16px; text-align: center; box-shadow: inset 0 0 0 1px var(--line-bright); }
.stat-card .sc-ico { font-size: 26px; }
.stat-card .sc-value { font-family: var(--display); font-weight: 800; font-size: 26px; margin-top: 4px; color: var(--acid); }
.stat-card .sc-label { font-family: var(--hud); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.mastery-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.mw-boo { width: 36px; height: 36px; flex-shrink: 0; object-fit: cover; background: var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-bright); }
.mastery-word { font-family: var(--display); font-weight: 800; font-size: 15px; width: 96px; flex-shrink: 0; color: var(--bone); }
.mastery-word .mw-cn { display: block; font-family: var(--body); font-size: 12px; color: var(--muted); font-weight: 600; }
.mastery-bar { flex: 1; height: 10px; background: var(--panel-2); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.mastery-bar-fill { height: 100%; background: var(--acid); transition: width 0.4s; }
.mastery-pct { width: 42px; text-align: right; font-family: var(--hud); font-weight: 700; font-size: 13px; color: var(--muted); }
.mastery-tag { font-family: var(--hud); font-size: 10px; letter-spacing: 1px; font-weight: 700; color: var(--ink); background: var(--red); padding: 4px 9px; border-radius: 10px; white-space: nowrap; }

/* ============ 模态弹窗 ============ */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 24px; animation: fade 0.2s; backdrop-filter: blur(3px); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel); border-radius: 16px; padding: 26px 22px; max-width: 340px; width: 100%; text-align: center;
  box-shadow: inset 0 0 0 1px var(--line-bright), 0 0 40px rgba(0,0,0,0.6);
}
.modal-emoji {
  width: 90px; height: 90px; margin: 0 auto 6px; overflow: hidden;
  background: var(--ink); border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--acid), 0 0 14px var(--acid-glow);
  display: flex; align-items: center; justify-content: center;
}
.modal-emoji img { width: 106%; height: 106%; object-fit: cover; }
.modal-title { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: 0.5px; margin: 10px 0 6px; color: var(--bone); }
.modal-text { color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 18px; line-height: 1.55; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }

.empty-hint { text-align: center; color: var(--muted); font-weight: 600; padding: 30px; }
.q-answer { display: contents; }

/* ============ 宽屏自适应（≥760px 左右分栏） ============ */
@media (min-width: 760px) {
  #app { max-width: 960px; }
  .tabbar { max-width: 960px; }

  /* 首页/子页桌面布局见文件末尾 @media (min-width: 980px)（左导航栏 + 中列 + 右栏） */
  .q-answer { display: block; }
  .lesson-body { padding: 16px 44px 0; }
  #q-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; flex: 1; }
  .q-answer .choices { margin-top: 0; }
  .q-pic { max-width: 360px; }
  /* 配对题铺满整行（不进左右分栏），看词选图网格不过宽 */
  #q-body > .match { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; width: 100%; }
  .q-answer .choices--grid { max-width: 420px; }
  .lesson-footer { padding: 18px 44px; }

  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-wrap { padding: 10px 34px 110px; }
  .summary { max-width: 580px; margin: 0 auto; }
}

/* ============ 入场动效（纯 CSS · 声明式 · 随渲染自动播放） ============ */
@keyframes wt-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes wt-pop {
  0%   { opacity: 0; transform: scale(0.55) skewX(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) skewX(-6deg); }
  100% { opacity: 1; transform: scale(1) skewX(-6deg); }
}
@keyframes wt-choice-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  /* 首页：板块头部 + 右栏卡片 错峰入场 */
  .unit-header { animation: wt-in 0.45s cubic-bezier(.34,1.56,.64,1) both; }
  .home-rail > * { animation: wt-in 0.5s cubic-bezier(.34,1.56,.64,1) both; }
  .home-rail > *:nth-child(2) { animation-delay: 0.07s; }
  .home-rail > *:nth-child(3) { animation-delay: 0.14s; }
  .home-rail > *:nth-child(4) { animation-delay: 0.21s; }
  /* 排行榜行 */
  .lb-row { animation: wt-in 0.4s cubic-bezier(.34,1.56,.64,1) both; }
  .lb-row:nth-child(2) { animation-delay: 0.04s; }
  .lb-row:nth-child(3) { animation-delay: 0.08s; }
  .lb-row:nth-child(n+4) { animation-delay: 0.12s; }
  /* 单元横幅 + 关卡节点 */
  .trail-unit { animation: wt-in 0.55s cubic-bezier(.34,1.56,.64,1) both; }
  .trail-unit:nth-of-type(2) { animation-delay: 0.08s; }
  .trail-unit:nth-of-type(3) { animation-delay: 0.16s; }
  .trail-unit:nth-of-type(n+4) { animation-delay: 0.22s; }
  .node { animation: wt-in 0.5s cubic-bezier(.34,1.56,.64,1) both; }
  .node-row:nth-child(2) .node { animation-delay: 0.04s; }
  .node-row:nth-child(3) .node { animation-delay: 0.08s; }
  .node-row:nth-child(4) .node { animation-delay: 0.12s; }
  .node-row:nth-child(n+5) .node { animation-delay: 0.16s; }
  /* 答题：整题容器淡入（select/check 不重建容器，不会反复抖动） */
  .lesson-body { animation: wt-in 0.42s cubic-bezier(.34,1.56,.64,1) both; }
  /* 统计页 */
  .stat-card { animation: wt-in 0.5s cubic-bezier(.34,1.56,.64,1) both; }
  .stat-card:nth-child(2) { animation-delay: 0.06s; }
  .stat-card:nth-child(3) { animation-delay: 0.12s; }
  .stat-card:nth-child(4) { animation-delay: 0.18s; }
  .section-title { animation: wt-in 0.5s ease both; }
  /* 结算页 */
  .summary-title { animation: wt-pop 0.6s cubic-bezier(.34,1.56,.64,1) both; }
  .summary .mascot { animation: wt-in 0.5s cubic-bezier(.34,1.56,.64,1) both 0.1s; }
  .summary-stat { animation: wt-in 0.5s cubic-bezier(.34,1.56,.64,1) both; }
  .summary-stat.is-acc { animation-delay: 0.12s; }
  .summary-stat.is-streak { animation-delay: 0.24s; }
  .summary-actions { animation: wt-in 0.5s ease both 0.4s; }
  /* 命中项弹跳（仅正确/选中项，不会全体重弹） */
  .choice--correct, .choice--selected { animation: wt-choice-pop 0.4s cubic-bezier(.34,1.56,.64,1); }
}

/* ============ 商业级布局组件（新艾利都皮肤） ============ */

/* 左侧导航项 */
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: var(--hud); font-weight: 600; font-size: 14px; letter-spacing: 1px; color: var(--muted);
  padding: 11px 12px; border-radius: 10px; transition: color 0.12s, background 0.12s;
}
.nav-item .ni-ico { font-size: 20px; filter: grayscale(0.4) brightness(1.2); }
.nav-item--active { color: var(--acid); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-bright), inset 3px 0 0 var(--acid); }
.nav-item--active .ni-ico { filter: none; }

/* 板块头部（置顶条 + 指南） */
.unit-header {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px;
  background: var(--panel-2); border-radius: 16px; padding: 14px 18px; margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--acid);
}
.uh-meta { flex: 1; min-width: 0; }
.uh-part { font-family: var(--hud); font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.uh-title { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--bone); margin-top: 2px; }
.uh-guide {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: var(--hud); font-weight: 700; font-size: 13px; letter-spacing: 1px;
  color: var(--ink); background: var(--acid); border-radius: 10px; padding: 9px 14px;
  box-shadow: 0 0 12px var(--acid-glow); transition: transform 0.08s;
}
.uh-guide:active { transform: translateY(2px); }

/* 右栏卡片通用 */
.rail-card { display: block; width: 100%; text-align: left; background: var(--panel); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line-bright); }
.rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rc-title { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.5px; color: var(--bone); text-transform: uppercase; }
.rc-link { font-family: var(--hud); font-size: 11px; color: var(--cyan); }
/* 联赛卡 */
.league-card { box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--hazard); transition: transform 0.08s; }
.league-card:active { transform: translateY(2px); }
.lc-body { display: flex; align-items: center; gap: 12px; }
.lc-badge { font-size: 30px; filter: drop-shadow(0 0 8px rgba(245, 208, 0, 0.4)); }
.lc-pos { font-family: var(--hud); font-weight: 700; font-size: 15px; color: var(--bone); }
.lc-pos b { color: var(--hazard); font-size: 18px; }
.lc-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
/* 每日任务卡 */
.quest-card { box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--acid); }
.qc-body { display: flex; align-items: center; gap: 12px; }
.qc-ico { font-size: 22px; }
.qc-main { flex: 1; min-width: 0; }
.qc-label { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.qc-bar { position: relative; height: 20px; background: var(--panel-2); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.qc-fill { height: 100%; background: var(--acid); box-shadow: 0 0 10px var(--acid-glow); transition: width 0.45s ease; }
.qc-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--hud); font-size: 11px; font-weight: 700; color: var(--bone); }
.qc-chest { font-size: 22px; }

/* 子页（统计 / 排行榜）中列 */
.sub-main { padding: 8px 16px 128px; }
.sub-title { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: 0.5px; color: var(--bone); margin: 8px 0 16px; }

/* 排行榜 */
.lb-hero {
  display: flex; align-items: center; gap: 14px; background: var(--panel-2); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--hazard);
  background-image: repeating-linear-gradient(-45deg, rgba(245, 208, 0, 0.05) 0 10px, transparent 10px 20px);
}
.lb-badge { font-size: 38px; filter: drop-shadow(0 0 10px rgba(245, 208, 0, 0.4)); }
.lb-league { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--hazard); }
.lb-note { font-family: var(--hud); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 10px; padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.lb-rank { width: 30px; text-align: center; font-family: var(--hud); font-weight: 700; font-size: 16px; color: var(--muted); flex-shrink: 0; }
.lb-rank--top { font-size: 22px; }
.lb-name { flex: 1; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-you { font-family: var(--hud); font-size: 10px; font-weight: 700; color: var(--ink); background: var(--acid); padding: 2px 7px; border-radius: 10px; }
.lb-xp { font-family: var(--hud); font-weight: 700; color: var(--acid); flex-shrink: 0; }
.lb-xp-u { font-size: 10px; color: var(--muted); margin-left: 3px; }
.lb-row--me { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--acid), 0 0 16px var(--acid-glow); }
.lb-row--me .lb-name { color: var(--bone); }

/* 路径末端小邦布 */
.trail-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 40px 0 10px; opacity: 0.72; }
.trail-end img { width: 76px; height: 76px; object-fit: contain; }
.trail-end span { font-family: var(--hud); font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.trail-more { text-align: center; font-family: var(--hud); font-size: 11px; letter-spacing: 1px; color: var(--muted); padding: 6px 0 2px; }

/* 单元指南弹窗 */
.modal--guide { max-width: 420px; text-align: left; }
.guide-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gh-ico { font-size: 30px; }
.gh-title { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--bone); }
.gh-sub { font-family: var(--hud); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; }
.guide-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; margin-bottom: 16px; }
.guide-row { display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.g-boo { grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; object-fit: cover; background: var(--ink); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-bright); }
.g-en { grid-column: 2; grid-row: 1; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--bone); }
.g-ph { grid-column: 3; grid-row: 1; text-align: right; font-family: var(--hud); font-size: 12px; color: var(--cyan); }
.g-cn { grid-column: 2 / -1; grid-row: 2; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ===== 桌面：左导航栏 + 中列 + 右栏 ===== */
@media (min-width: 980px) {
  #app { max-width: 1120px; }
  .tabbar { display: none; }
  .screen--home { display: grid; grid-template-columns: 220px minmax(0, 1fr) 332px; align-items: start; }
  .screen--sub { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .nav-rail {
    position: sticky; top: 0; align-self: start; height: 100vh;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 16px;
    border-bottom: none; border-right: 1px solid var(--line);
  }
  .nav-rail .hud { margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
  .nav-items { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
  .home-main { padding: 24px 28px 60px; min-height: 100vh; }
  .home-rail { position: sticky; top: 0; align-self: start; padding: 24px 18px 60px; }
  .sub-main { padding: 24px 30px 60px; min-height: 100vh; border-left: 1px solid var(--line); }
}

/* ============ 五项游戏化功能 ============ */

/* 多目标每日任务 */
.quest-list { display: flex; flex-direction: column; gap: 14px; }
.quest-item { display: flex; align-items: center; gap: 12px; }

/* 单元小标题分隔 */
.section-divider { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; }
.section-divider .sd-chip {
  flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: 1px;
  color: var(--ink); background: var(--hazard); border-radius: 10px;
  padding: 4px 9px 3px; box-shadow: 0 0 10px rgba(245, 208, 0, 0.35);
}
.section-divider .sd-text { font-family: var(--hud); font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, var(--line-bright), transparent); }
.trail-unit:first-child .section-divider { margin-top: 6px; }

/* 宝箱 / 奖杯节点 */
.node--reward { background: var(--panel-2); color: #fff; filter: none; box-shadow: inset 0 0 0 2px var(--line-bright); }
.node--reward-ready { animation: bob 1.2s ease-in-out infinite; }
.node--chest.node--reward-ready { box-shadow: inset 0 0 0 2px var(--acid), 0 0 16px var(--acid-glow); }
.node--trophy.node--reward-ready { box-shadow: inset 0 0 0 2px var(--hazard), 0 0 16px rgba(245, 208, 0, 0.4); }
.node--reward-open { background: var(--panel); color: var(--acid); filter: none; opacity: 0.8; box-shadow: inset 0 0 0 1px var(--acid); }
.node--reward.node--locked { background: var(--panel); color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--line); }

/* 联赛段位上色（--tier 内联变量） */
.league-card { box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--tier, var(--hazard)); }
.lb-hero { box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--tier, var(--hazard)); }
.lb-league { color: var(--tier, var(--hazard)); }
.lb-result { font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 16px; margin-bottom: 12px; }
.lb-result--up { color: var(--acid); background: rgba(214, 251, 65, 0.08); box-shadow: inset 0 0 0 1px var(--acid); }
.lb-result--down { color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red); }
.lb-zone { font-family: var(--hud); font-size: 10px; letter-spacing: 2px; font-weight: 700; padding: 4px 2px 2px; }
.lb-zone--up { color: var(--acid); }
.lb-zone--down { color: var(--red); }
.lb-row--promote { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--acid); }
.lb-row--demote { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--red); }
.lb-row--me.lb-row--promote, .lb-row--me.lb-row--demote { box-shadow: inset 0 0 0 2px var(--acid), 0 0 16px var(--acid-glow); }

/* 个人档案 */
.profile-head { display: flex; align-items: center; gap: 16px; background: var(--panel); border-radius: 16px; padding: 18px; margin-bottom: 16px; box-shadow: inset 0 0 0 1px var(--line-bright), inset 4px 0 0 var(--tier, var(--acid)); }
.pf-avatar { width: 72px; height: 72px; flex-shrink: 0; background: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--acid), 0 0 14px var(--acid-glow); display: flex; align-items: center; justify-content: center; }
.pf-avatar img { width: 108%; height: 108%; object-fit: cover; }
.pf-name { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--bone); }
.pf-sub { font-family: var(--hud); font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-top: 4px; }
.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ach { background: var(--panel); border-radius: 16px; padding: 14px; text-align: center; box-shadow: inset 0 0 0 1px var(--line); opacity: 0.42; filter: grayscale(0.8); }
.ach--got { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px var(--acid), 0 0 12px var(--acid-glow); }
.ach-ico { font-size: 30px; }
.ach-name { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--bone); margin-top: 6px; }
.ach-desc { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
@media (min-width: 980px) { .ach-grid { grid-template-columns: repeat(3, 1fr); } }

/* 奖励提示 toast */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); background: var(--acid);
  border-radius: 16px; padding: 13px 22px; box-shadow: 0 0 22px var(--acid-glow);
  animation: toast-in 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
}
.toast--out { animation: toast-out 0.35s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 16px); } }

/* ============================================================
   商业级动效与交互层（对标多邻国网页版）
   - 视图过渡：页面切换交叉淡入
   - 答对即时奖励：浮起 +经验
   - 桌面悬停态 + 键盘焦点环（无障碍）
   ============================================================ */

/* ---- 视图过渡：高层导航交叉淡入，新页面再轻微上浮强化“到达感” ---- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  ::view-transition-new(root) { animation-name: vt-in; }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 答对即时奖励：屏幕中下方浮起 +经验，弹一下再升空淡出 ---- */
.float-xp {
  position: fixed; left: 50%; top: 58%; z-index: 70;
  font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: 1px;
  color: var(--acid); text-shadow: 0 0 18px var(--acid-glow), 0 2px 0 var(--acid-deep);
  pointer-events: none; transform: translate(-50%, -50%);
  animation: float-xp 1.05s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
@keyframes float-xp {
  0%   { opacity: 0; transform: translate(-50%, -18%) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -55%) scale(1.14); }
  34%  { transform: translate(-50%, -64%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .float-xp { animation: float-xp-min 0.7s ease forwards; }
}
@keyframes float-xp-min { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -90%); } }

/* ---- 桌面悬停态：用独立 translate 属性抬升，不与 JS 的 transform 按压/节点浮动冲突 ---- */
@media (hover: hover) and (pointer: fine) {
  .btn, .speaker-btn, .uh-guide,
  .choice:not(.choice--disabled), .letter:not(.letter--used),
  .rail-card, .nav-item, .lb-row, .smart-card, .review-card,
  .stat-card, .ach, .tab, .quit-btn,
  .node:not(.node--locked):not(.node--current) {
    transition: translate 0.14s ease, filter 0.14s ease;
  }
  .btn:hover, .speaker-btn:hover, .uh-guide:hover,
  .node:not(.node--locked):not(.node--current):hover { translate: 0 -2px; }
  .choice:not(.choice--disabled):hover, .letter:not(.letter--used):hover,
  .rail-card:hover, .nav-item:hover, .lb-row:hover,
  .smart-card:hover, .review-card:hover, .stat-card:hover, .ach:hover {
    translate: 0 -2px; filter: brightness(1.09);
  }
  .tab:hover, .quit-btn:hover { filter: brightness(1.35); }
}

/* ---- 键盘焦点环：仅 Tab/方向键导航时出现，鼠标点击不触发 ---- */
.btn:focus-visible, .choice:focus-visible, .nav-item:focus-visible, .tab:focus-visible,
.speaker-btn:focus-visible, .node:focus-visible, .rail-card:focus-visible, .lb-row:focus-visible,
.smart-card:focus-visible, .review-card:focus-visible, .letter:focus-visible, .slot:focus-visible,
.uh-guide:focus-visible, .quit-btn:focus-visible, [data-action]:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* ============================================================
   组件精修 · 全套状态（对标多邻国组件库）
   - 图片：加载骨架微光 → 到位淡入 → 失败兜底
   - 选项：作答后 ✓/✗ 图标 + 非答案项淡出
   - 按钮/进度条：质感分层 + 动态进度
   ============================================================ */

/* ---- 图片加载骨架：未就位时容器扫过一道微光，就位后停掉 ---- */
@keyframes img-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.q-pic, .choice--pic, .pf-avatar, .feedback-ico {
  background-color: var(--panel-2);
  background-image: linear-gradient(100deg,
    transparent 18%, rgba(214, 251, 65, 0.05) 38%,
    rgba(214, 251, 65, 0.12) 50%, rgba(214, 251, 65, 0.05) 62%, transparent 82%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: img-shimmer 1.5s ease-in-out infinite;
}
.q-pic.img-ready, .choice--pic.img-ready, .pf-avatar.img-ready, .feedback-ico.img-ready {
  animation: none; background-image: none;
}
/* 到位淡入：仅对走了 load 事件的网络图触发（缓存图直接可见，无副作用） */
@media (prefers-reduced-motion: no-preference) {
  img.is-loaded { animation: img-in 0.45s ease both; }
}
@keyframes img-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
/* 失败兜底：藏掉裂图标，容器留一只灰色邦布轮廓占位 */
img.img-failed { opacity: 0; }
.img-broken { position: relative; animation: none !important; background-image: none !important; }
.img-broken::after {
  content: '🐰'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4em; filter: grayscale(1); opacity: 0.35;
}

/* ---- 选项作答后：正确/错误项加 ✓/✗，其余选项淡出聚焦 ---- */
.choice--correct:not(.choice--pic)::after,
.choice--wrong:not(.choice--pic)::after {
  margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; flex-shrink: 0;
}
.choice--correct:not(.choice--pic)::after { content: '✓'; color: var(--acid); }
.choice--wrong:not(.choice--pic)::after { content: '✕'; color: var(--red); }
/* 图片选项：正确/错误打角标 */
.choice--pic.choice--correct::after, .choice--pic.choice--wrong::after {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); border-radius: 10px; z-index: 2;
}
.choice--pic.choice--correct::after { content: '✓'; background: var(--acid); box-shadow: 0 0 10px var(--acid-glow); }
.choice--pic.choice--wrong::after { content: '✕'; background: var(--red); color: #fff; }
/* 非答案项（已禁用、既不对也不错）淡出，把注意力收束到对错上 */
.choice--disabled:not(.choice--correct):not(.choice--wrong) { opacity: 0.4; filter: saturate(0.7); }

/* ---- 按钮：顶部一道高光，质感更立体（切角形状内裁切，不溢出） ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn--ghost::after, .btn:disabled::after { display: none; }

/* ---- 进度条：推进时右端一道亮帽（leading edge），强化“前进”感 ---- */
.progress-fill::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 8px;
  background: #fff; opacity: 0.85; filter: blur(2px); z-index: 1;
}

/* ============================================================
   答题循环深化（把核心循环做出爽感）
   - 连击 combo：顶部 chip + 浮字，里程碑升色
   - 答对/答错强反馈：缩放浮字 / 全屏红闪
   - 进度条填充 + 题间前进过渡
   ============================================================ */

/* ---- 顶部连击 chip（连击 ≥2 显示，每次答对重新入场即“跳一下”）---- */
.combo-meter { flex-shrink: 0; }
.combo-meter:empty { display: none; }
.combo-chip {
  display: inline-block; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
  color: var(--ink); background: var(--acid); border-radius: 10px; padding: 4px 9px 3px;
  box-shadow: 0 0 12px var(--acid-glow); white-space: nowrap;
  animation: combo-pop 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.combo-chip--hot { background: var(--hazard); box-shadow: 0 0 14px rgba(245, 208, 0, 0.6); }
.combo-chip--fire { background: var(--red); color: #fff; box-shadow: 0 0 16px rgba(255, 59, 48, 0.7); }
@keyframes combo-pop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.18) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ---- 答对浮起的「连击」字样（在 +经验 上方），里程碑升色放大 ---- */
.float-combo {
  position: fixed; left: 50%; top: 50%; z-index: 70; pointer-events: none;
  font-family: var(--hud); font-weight: 700; font-size: 17px; letter-spacing: 1px; color: var(--acid);
  text-shadow: 0 0 14px var(--acid-glow); transform: translate(-50%, -50%);
  animation: float-combo 1.15s cubic-bezier(.2, .7, .3, 1) forwards;
}
.float-combo b { font-family: var(--display); font-weight: 800; font-size: 22px; }
.float-combo--hot { color: var(--hazard); text-shadow: 0 0 16px rgba(245, 208, 0, 0.7); }
.float-combo--fire { color: #ff6b61; text-shadow: 0 0 18px rgba(255, 59, 48, 0.8); }
@keyframes float-combo {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -120%) scale(1.1); }
  34% { transform: translate(-50%, -128%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -210%) scale(1); }
}

/* ---- 答错：全屏红色描边闪一下（配合题干 shake）---- */
.screen-flash { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
.screen-flash--wrong { box-shadow: inset 0 0 90px 8px rgba(255, 59, 48, 0.5); animation: flash-out 0.43s ease forwards; }
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; } }

/* ---- 进度条：每题载入时除了平滑填充，再闪一下亮度，强化“推进”爽感 ---- */
@media (prefers-reduced-motion: no-preference) {
  .progress-fill { animation: prog-surge 0.6s ease; }
  /* 题间「前进」过渡：新题体从右侧滑入 */
  #q-body { animation: q-advance 0.42s cubic-bezier(.22, .7, .3, 1) both; }
}
@keyframes prog-surge { 0% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
@keyframes q-advance { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ---- 结算页：最高连击徽章 ---- */
.summary-combo {
  font-family: var(--hud); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--hazard);
  background: rgba(245, 208, 0, 0.08); box-shadow: inset 0 0 0 1px var(--hazard);
  border-radius: 10px; padding: 7px 16px; margin-top: 4px;
}
.summary-combo b { font-family: var(--display); font-weight: 800; font-size: 18px; }

/* ============================================================
   数据页打磨（统计 / 个人档案 / 排行榜 · 商业级排版 + 可视化）
   ============================================================ */

/* ---- 统计：近 7 日经验柱状图（真实 dailyXp）---- */
.activity-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 138px;
  background: var(--panel); border-radius: 16px; padding: 12px 12px 10px;
  box-shadow: inset 0 0 0 1px var(--line-bright); margin-bottom: 12px;
}
.chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: flex-end; }
.chart-xp { font-family: var(--hud); font-size: 10px; font-weight: 700; color: var(--muted); height: 12px; line-height: 12px; }
.chart-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.chart-bar {
  width: 100%; min-height: 2px; border-radius: 10px;
  background: linear-gradient(180deg, var(--acid), var(--acid-deep)); box-shadow: 0 0 8px var(--acid-glow);
  transition: height 0.55s cubic-bezier(.33, 1, .68, 1);
}
.chart-day { font-family: var(--hud); font-size: 11px; color: var(--muted); }
.chart-col--today .chart-bar { background: linear-gradient(180deg, var(--cyan), var(--cyan-deep)); box-shadow: 0 0 10px rgba(43, 215, 255, 0.5); }
.chart-col--today .chart-day { color: var(--cyan); font-weight: 700; }

/* ---- 统计：掌握分布分段条 + 图例 ---- */
.dist-bar { display: flex; height: 16px; gap: 3px; margin-bottom: 11px; }
.dist-seg { border-radius: 10px; min-width: 5px; transition: flex 0.5s; }
.dist-seg--learn { background: var(--cyan); }
.dist-seg--skill { background: var(--hazard); }
.dist-seg--master { background: var(--acid); box-shadow: 0 0 10px var(--acid-glow); }
.dist-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.dl-item { font-family: var(--hud); font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.dl-item b { font-family: var(--display); font-weight: 800; color: var(--bone); margin-left: 1px; }
.dl-dot { width: 10px; height: 10px; border-radius: 10px; flex-shrink: 0; }
.dl-dot--learn { background: var(--cyan); }
.dl-dot--skill { background: var(--hazard); }
.dl-dot--master { background: var(--acid); }

/* ---- 个人档案：等级 chip + 升级进度 + 成就进度 ---- */
.pf-meta { flex: 1; min-width: 0; }
.pf-lv {
  font-family: var(--hud); font-size: 12px; font-weight: 700; vertical-align: middle; margin-left: 8px;
  color: var(--ink); background: var(--acid); padding: 2px 8px 1px; border-radius: 10px; box-shadow: 0 0 10px var(--acid-glow);
}
.pf-lvbar { height: 7px; background: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin-top: 10px; }
.pf-lvbar-fill { height: 100%; background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); transition: width 0.55s cubic-bezier(.33, 1, .68, 1); }
.pf-lvnote { font-family: var(--hud); font-size: 10px; letter-spacing: 0.5px; color: var(--muted); margin-top: 5px; }
.ach-prog { height: 7px; background: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin: 0 0 14px; }
.ach-prog-fill { height: 100%; background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); transition: width 0.55s cubic-bezier(.33, 1, .68, 1); }

/* ---- 排行榜：每行 XP 条（按区上色：晋级=酸性 / 降级=红 / 中间=灰）---- */
.lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lb-main .lb-name { flex: 0 0 auto; }
.lb-track { height: 5px; background: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.lb-fill { height: 100%; background: var(--line-bright); transition: width 0.55s cubic-bezier(.33, 1, .68, 1); }
.lb-row--promote .lb-fill { background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); }
.lb-row--demote .lb-fill { background: var(--red); }
.lb-row--me .lb-fill { background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); }

/* ============================================================
   浅色·多邻国主题 — 组件覆盖层
   圆形关卡节点 / 浅色路径脊 / 清理暗色纹理（网点·警戒角·HUD 角标）
   ============================================================ */

/* 关卡节点 → 多邻国式圆形 3D 按钮（底部硬阴影 = drop-shadow 偏移） */
.node {
  width: 70px; height: 70px; border-radius: 50%; clip-path: none;
  background: var(--acid); color: #fff;
  filter: drop-shadow(0 6px 0 var(--acid-deep));
}
.node:active { filter: drop-shadow(0 1px 0 var(--acid-deep)); }
.node--current { filter: drop-shadow(0 6px 0 var(--acid-deep)); }
.node--done {
  background: var(--gold); color: #fff;
  filter: drop-shadow(0 6px 0 #d9a900); box-shadow: none;
}
.node--done .node-check { color: #fff; }
.node--locked {
  background: #e5e5e5; color: #b0b0b0;
  filter: drop-shadow(0 6px 0 #d0d0d0); box-shadow: none;
}
.node--locked:active { filter: drop-shadow(0 6px 0 #d0d0d0); }
/* 当前关卡的脉冲环 / START 气泡随圆形对齐 */
.node-row--current::before { width: 70px; height: 70px; border-radius: 50%; clip-path: none; border-color: var(--acid); }

/* 奖励节点（宝箱/奖杯）圆形浅色框 */
.node--reward { border-radius: 50%; clip-path: none; background: #fff; box-shadow: inset 0 0 0 2px var(--line); filter: drop-shadow(0 5px 0 #e5e5e5); }
.node--reward.node--reward-ready.node--chest { box-shadow: inset 0 0 0 3px var(--acid); }
.node--reward.node--reward-ready.node--trophy { box-shadow: inset 0 0 0 3px var(--hazard); }
.node--reward.node--reward-open { box-shadow: inset 0 0 0 2px var(--acid); }
.node--reward.node--locked { background: #f0f0f0; box-shadow: inset 0 0 0 2px var(--line); }

/* 数据链主脊 → 多邻国式浅灰虚线 */
.nodes::before { border-left: 4px dashed #e0e0e0; }

/* 单元卡：去掉暗色半调网点 + 黑黄警戒角，留干净浅卡 + 左侧绿色条 */
.unit-banner::before { display: none; }
.unit-banner::after { display: none; }
.unit-banner .u-ico { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }

/* 看图题 HUD 角标 / 选项序号去掉暗色味，整体更干净 */
.q-pic::after { display: none; }

/* 进度条不再发光（浅色） */
.progress-fill { box-shadow: none; }

/* 窄屏（手机）：收起品牌文字、压缩 HUD 间距，避免顶栏溢出（生命值被截断） */
@media (max-width: 430px) {
  .brand-text { display: none; }
  .nav-rail { gap: 8px; padding: 12px 12px; }
  .hud { gap: 6px; }
  .hud-stat { padding: 5px 9px; font-size: 15px; }
  .hud-stat .ico { font-size: 15px; }
}

/* ============================================================
   贴近多邻国 v2 — 实色章节横幅 / 厚实 3D 节点+落地阴影 / 蓝色导航 active / 更舍得留白
   （xcrawl 取证：多邻国卡片 12–16px 圆角、节点 50% 圆、3D 底边 box-shadow:0 Npx 0 深色）
   ============================================================ */

/* —— 单元横幅 + 吸顶头：多邻国式实色块 + 白字（每章一色 --sec） —— */
.unit-header, .unit-banner {
  background: var(--sec, var(--acid)); color: #fff; border: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}
.unit-header { padding: 16px 20px; border-radius: 16px; }
.unit-banner { padding: 18px 20px; }
.unit-header .uh-part, .unit-banner .u-sub { color: rgba(255, 255, 255, 0.82); }
.unit-header .uh-title, .unit-banner .u-title { color: #fff; }
.unit-header .uprog-bar, .unit-banner .uprog-bar { background: rgba(0, 0, 0, 0.2); box-shadow: none; }
.unit-header .uprog-fill, .unit-banner .uprog-fill { background: #fff; box-shadow: none; }
.unit-header .uprog-num, .unit-banner .uprog-num { color: rgba(255, 255, 255, 0.92); }
.unit-banner .u-ico { background: rgba(255, 255, 255, 0.22); box-shadow: none; }
/* 指南按钮：白底 + 章节色字 + 小 3D 底边 */
.uh-guide { background: #fff; color: var(--sec, var(--acid)); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
.uh-guide:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }

/* —— 关卡节点：更厚 3D 底边 + 柔和落地阴影（“实体感”的关键） —— */
.node {
  width: 74px; height: 74px; margin: 18px 0; filter: none;
  box-shadow: 0 8px 0 var(--acid-deep), 0 10px 7px -3px rgba(0, 0, 0, 0.18);
}
.node:active { filter: none; transform: translateY(5px); box-shadow: 0 3px 0 var(--acid-deep), 0 5px 7px rgba(0, 0, 0, 0.16); }
.node--current { background: var(--sec, var(--acid)); box-shadow: 0 8px 0 var(--sec-deep, var(--acid-deep)), 0 10px 7px -3px rgba(0, 0, 0, 0.2); }
.node--current:active { box-shadow: 0 3px 0 var(--sec-deep, var(--acid-deep)), 0 5px 7px rgba(0, 0, 0, 0.18); }
.node--done { background: var(--gold); filter: none; box-shadow: 0 8px 0 #d9a900, 0 10px 7px -3px rgba(0, 0, 0, 0.14); }
.node--done:active { transform: translateY(5px); box-shadow: 0 3px 0 #d9a900, 0 5px 7px rgba(0, 0, 0, 0.14); }
.node--locked { background: #e5e5e5; color: #b0b0b0; filter: none; box-shadow: 0 8px 0 #cfcfcf, 0 10px 7px -3px rgba(0, 0, 0, 0.08); }
.node--locked:active { transform: none; box-shadow: 0 8px 0 #cfcfcf, 0 10px 7px -3px rgba(0, 0, 0, 0.08); }
.node--reward { filter: none; box-shadow: inset 0 0 0 3px var(--line), 0 6px 0 #ededed, 0 9px 6px -3px rgba(0, 0, 0, 0.1); }
.node--reward.node--reward-ready.node--chest { box-shadow: inset 0 0 0 3px var(--acid), 0 6px 0 #ededed, 0 9px 6px -3px rgba(0, 0, 0, 0.1); }
.node--reward.node--reward-ready.node--trophy { box-shadow: inset 0 0 0 3px var(--hazard), 0 6px 0 #ededed, 0 9px 6px -3px rgba(0, 0, 0, 0.1); }

/* 去掉浅色下发灰的“声呐”脉冲环；START 气泡跟随章节色 */
.node-row--current::before { display: none; }
.node-row--current::after { background: var(--sec, var(--acid)); color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); }

/* 路径更舍得留白；多邻国原版没有连接线 → 隐藏脊线 */
.nodes { gap: 10px; padding: 24px 0 16px; }
.nodes::before { display: none; }

/* —— 左侧导航 active：多邻国式浅蓝底 + 蓝字 + 蓝描边 —— */
.nav-item .ni-ico { filter: grayscale(0.4); }
.nav-item--active { color: var(--cyan); background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--cyan); }
.nav-item--active .ni-ico { filter: none; }
.tab--active { color: var(--cyan); }
.tab--active::after { background: var(--cyan); }

/* ============================================================
   SOFT STUDIO 重设计（2026-06-13，frontend-design）
   像同一个插画师画的界面：暖白 + 柔粉 + 藏蓝墨 + 珊瑚橙，柔和弥散阴影取代硬 3D
   ============================================================ */
html, body { background: var(--canvas); color: var(--text); }
#app { background: var(--canvas); }
* { letter-spacing: 0; }

/* —— 按钮：珊瑚橙实色 + 柔阴影（不再硬边 3D），文字常规大小写 —— */
.btn {
  background: var(--primary); color: #fff; filter: none;
  box-shadow: var(--sh-sm); border-radius: 14px;
  text-transform: none; letter-spacing: 0.2px; font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0s;
}
.btn:active { transform: translateY(1px); filter: none; box-shadow: var(--sh-sm); }
.btn--blue { background: var(--cyan); color: #fff; filter: none; box-shadow: var(--sh-sm); }
.btn--blue:active { filter: none; }
.btn--red { background: var(--red); color: #fff; filter: none; box-shadow: var(--sh-sm); }
.btn--red:active { filter: none; }
.btn--ghost { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px var(--line-bright); filter: none; }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }
.btn:disabled { background: var(--panel-2); color: var(--muted-2); box-shadow: none; filter: none; }
.btn::after { display: none; }   /* 去掉旧的顶部高光叠层 */

/* —— 卡片统一：白底 + 暖描边 + 柔阴影 + 大圆角 —— */
.rail-card, .stat-card, .ach, .lb-row, .lb-hero, .league-card, .quest-card,
.smart-card, .review-card, .bangboo-card, .profile-head, .activity-chart, .modal {
  border-radius: 18px;
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line);
}
.modal { box-shadow: var(--sh-lg); }
.unit-header, .unit-banner { border-radius: 18px; box-shadow: var(--sh); }

/* —— 顶/底栏：暖白 + 柔分隔（不要硬线）—— */
.nav-rail { background: rgba(244,241,234,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tabbar { background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(42,51,64,0.2); }
.nav-item:not(.nav-item--active) { color: var(--muted); }
.nav-item--active { color: var(--cyan); background: var(--panel-3); box-shadow: none; }
.brand-mark { background: var(--primary); border-radius: 12px; }
.brand-text b { color: var(--bone); }
.hud-stat { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.hud-fire { color: var(--hazard); } .hud-xp { color: var(--cyan); } .hud-hearts { color: var(--red); }

/* —— 关卡节点：保留圆形，但收薄立体边 + 柔和落地阴影（更"软"）—— */
.node { box-shadow: 0 4px 0 var(--acid-deep), 0 12px 18px -8px rgba(42,51,64,0.22); }
.node:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--acid-deep), 0 6px 10px -6px rgba(42,51,64,0.2); }
.node--current { box-shadow: 0 4px 0 var(--sec-deep, var(--acid-deep)), 0 12px 18px -8px rgba(42,51,64,0.26); }
.node--done { box-shadow: 0 4px 0 #d99a2e, 0 12px 18px -8px rgba(42,51,64,0.18); }
.node--locked { background: #e6e1d6; color: #b3ab9b; box-shadow: 0 4px 0 #d2ccbd, 0 12px 18px -8px rgba(42,51,64,0.1); }
.node-row--current::after { background: var(--sec, var(--primary)); box-shadow: var(--sh-sm); }

/* —— 选项：柔卡片；选中藏蓝、正确柔绿、错误柔红 —— */
.choice { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .14s, background .14s, transform .08s; }
.choice--selected { background: var(--panel-3); color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); }
.choice--selected::before, .choice--correct::before, .choice--wrong::before { display: none; }
.choice--correct { background: #eaf7ef; color: var(--acid-deep); box-shadow: inset 0 0 0 2px var(--acid); }
.choice--wrong { background: var(--red-soft); color: var(--red-deep); box-shadow: inset 0 0 0 2px var(--red); }
.choice .num { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }

/* —— 进度条：柔轨 + 绿填充，去硬纹 —— */
.progress { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 99px; }
.progress-fill { background: var(--acid); border-radius: 99px; }
.uprog-fill, .pf-lvbar-fill, .ach-prog-fill, .mastery-bar-fill { background: var(--acid); }

/* —— 吉祥物（office 助教）：图放进柔框，气泡柔卡 —— */
.mascot-avatar { border-radius: 16px; overflow: hidden; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); background: #fff; }
.mascot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mascot-bubble { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.mascot-name { color: var(--primary); }
.q-pic { box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.feedback-ico { border-radius: 14px; box-shadow: var(--sh-sm); }

/* 题图/词卡内的 office 插画统一适配 */
.q-pic img, .choice--pic img { object-fit: cover; }

/* ============================================================
   HOME v2 — 自绘内联图标 + 单一吸顶章节横幅 + 章节色圆形路径
   （取代杂乱 emoji 与重复横幅；像同一位插画师画的清爽界面）
   ============================================================ */

/* —— 图标基座：内联 SVG 跟随字色，统一节奏 —— */
svg.ic { width: 1em; height: 1em; display: block; flex-shrink: 0; }
.ico, .ni-ico, .s-ico, .r-ico, .u-ico, .uh-guide, .tab .ico { line-height: 0; }

/* HUD 三联（火苗/宝石/红心）：暖白胶囊 + 自绘图标 */
.hud-stat { gap: 5px; padding: 5px 11px 5px 9px; }
.hud-stat .ico { display: inline-flex; font-size: 0; filter: none; }
.hud-stat .ico svg.ic { width: 18px; height: 18px; }

/* 桌面左侧竖导航 + 移动底部 tab：currentColor 上色，弃用 emoji 的灰度滤镜 */
.nav-item .ni-ico { filter: none; display: inline-flex; font-size: 0; }
.nav-item .ni-ico svg.ic { width: 22px; height: 22px; }
.tab { color: var(--muted); letter-spacing: 1px; gap: 0; }
.tab .ico { filter: none; opacity: 1; font-size: 0; display: flex; justify-content: center; margin-bottom: 4px; }
.tab .ico svg.ic { width: 24px; height: 24px; }
.tab .tab-label { font-size: 11px; font-weight: 700; }
.tab--active { color: var(--cyan); }
.tab--active::after { box-shadow: none; height: 3px; border-radius: 0 0 3px 3px; }

/* —— 单一吸顶章节横幅：实色（章节色）底 + 白字 + 柔阴影 —— */
.trail-unit { margin-top: 30px; }
.trail-unit:first-child { margin-top: 8px; }
.unit-banner {
  position: sticky; top: 12px; z-index: 4;
  background: var(--sec, var(--primary)); color: #fff;
  border-radius: 20px; padding: 14px 15px; gap: 13px; overflow: visible;
  align-items: center;
  box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--sec, var(--primary)) 65%, #2a3340),
              inset 0 0 0 1px rgba(255,255,255,0.12);
}
.unit-banner::before, .unit-banner::after { display: none; content: none; }
.unit-banner .u-ico {
  width: 44px; height: 44px; border-radius: 13px; color: #fff;
  background: rgba(255,255,255,0.20); box-shadow: none;
}
.unit-banner .u-ico svg.ic { width: 26px; height: 26px; }
.unit-banner .u-meta { flex: 1; min-width: 0; }
.unit-banner .u-eyebrow {
  font-family: var(--hud); font-weight: 700; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unit-banner .u-title { color: #fff; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.3px; margin-top: 1px; }
.unit-banner .uprog { margin-top: 9px; }
.unit-banner .uprog-bar { height: 7px; background: rgba(255,255,255,0.28); box-shadow: none; }
.unit-banner .uprog-fill { background: #fff; box-shadow: none; }
.unit-banner .uprog-num { color: rgba(255,255,255,0.92); }
.unit-banner .uh-guide {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; align-self: flex-start;
  background: rgba(255,255,255,0.20); color: #fff; box-shadow: none;
  border-radius: 12px; padding: 8px 11px;
  font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
}
.unit-banner .uh-guide svg.ic { width: 16px; height: 16px; }
.unit-banner .uh-guide:active { background: rgba(255,255,255,0.32); transform: translateY(1px); }

/* —— 关卡路径：圆形节点取章节色 + 白图标；完成=金、锁=灰，立体底边收薄 —— */
.node {
  width: 66px; height: 66px; margin: 12px 0; border-radius: 50%;
  background: var(--sec, var(--acid)); color: #fff; filter: none;
  box-shadow: 0 5px 0 var(--sec-deep, var(--acid-deep)), 0 14px 18px -8px rgba(42,51,64,0.22);
}
.node svg.ic { width: 30px; height: 30px; }
.node:active { transform: translateY(3px); filter: none; box-shadow: 0 2px 0 var(--sec-deep, var(--acid-deep)), 0 7px 10px -7px rgba(42,51,64,0.22); }
.node--current { background: var(--sec, var(--primary)); color: #fff; filter: none; }
.node--done { background: var(--gold); color: #fff; box-shadow: 0 5px 0 #cf9320, 0 14px 18px -8px rgba(42,51,64,0.20); }
.node--done:active { transform: translateY(3px); box-shadow: 0 2px 0 #cf9320, 0 7px 10px -7px rgba(42,51,64,0.2); }
.node--done svg.ic { width: 28px; height: 28px; }
.node--locked { background: #e3ddcf; color: #b3a998; box-shadow: 0 5px 0 #d0c8b6, 0 12px 16px -9px rgba(42,51,64,0.12); }
.node--locked:active { transform: none; }
.node--locked svg.ic { width: 26px; height: 26px; }
/* 圆形「你在这里」脉冲圈 + START 气泡，跟随章节色 */
.node-row--current::before { top: 12px; width: 66px; height: 66px; border-radius: 50%; border-color: var(--sec, var(--primary)); }
.node-row--current::after { transform: translateX(-50%); color: #fff; background: var(--sec, var(--primary)); box-shadow: var(--sh-sm); border-radius: 10px; }
/* 宝箱/奖杯：圆角方，金色待开，开过转柔绿 */
.node--reward { border-radius: 20px; background: var(--sec, var(--acid)); color: #fff; box-shadow: 0 5px 0 var(--sec-deep, var(--acid-deep)), 0 14px 18px -8px rgba(42,51,64,0.2); }
.node--reward svg.ic { width: 28px; height: 28px; }
.node--reward-ready { background: var(--gold); color: #fff; box-shadow: 0 5px 0 #cf9320, 0 14px 18px -8px rgba(42,51,64,0.22); }
.node--reward-open { background: #e9f1e9; color: var(--acid-deep); filter: none; opacity: 1; box-shadow: 0 4px 0 #d3dccf, 0 12px 16px -9px rgba(42,51,64,0.12); }
.node--reward.node--locked { background: #e3ddcf; color: #b3a998; box-shadow: 0 5px 0 #d0c8b6, 0 12px 16px -9px rgba(42,51,64,0.12); }

/* —— 智能/复习卡：自绘图标，弃灰度滤镜 —— */
.smart-card .s-ico, .review-card .r-ico { font-size: 0; }
.smart-card .s-ico svg.ic, .review-card .r-ico svg.ic { width: 22px; height: 22px; }
.smart-card .s-go { font-size: 0; }
.smart-card .s-go svg.ic { width: 18px; height: 18px; }

/* —— 每日任务：自绘图标，珊瑚色点缀；完成转柔绿勾 —— */
.qc-ico { font-size: 0; color: var(--primary); display: inline-flex; flex-shrink: 0; }
.qc-ico svg.ic { width: 22px; height: 22px; }
.qc-chest { font-size: 0; color: var(--muted-2); display: inline-flex; flex-shrink: 0; }
.qc-chest svg.ic { width: 21px; height: 21px; }
.quest-item:has(.qc-fill[style*="100%"]) .qc-chest { color: var(--acid); }

/* —— 联赛卡徽标：段位色盾牌（取代奖牌 emoji） —— */
.lc-badge { font-size: 0; filter: none; display: inline-flex; }
.lc-badge svg.ic { width: 38px; height: 38px; }

/* —— 助教头像：office 小人放进暖白柔框，对齐气泡顶部 —— */
.mascot { align-items: stretch; }
.mascot-avatar { background: #fff; }
.mascot-avatar img { width: 100%; height: 100%; object-fit: contain; }

/* —— 移动底栏改为暖白 + 柔上边（与桌面左导航统一） —— */
@media (max-width: 979px) {
  .nav-rail { background: rgba(244,241,234,0.9); }
}