/* 单词大陆 runtime 皮肤 — Phase 3 验收版移植（2026-08-18 三处冻结）
 * 组件定义逐字继承自验收版 `.scratch/design/shared/design.css`（铁律十一 #4：偏离验收版 = 设计回退）
 * 仅两处技术适配：@font-face 路径（../vendor/）；去掉设计层工具条（design-desk/stage/toolbar）
 * 下方「runtime 布局」段落为应用壳层（导航/视图/弹窗），视觉语言与六场景验收版一致
 */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../vendor/press-start-2p.ttf') format('truetype');
  font-display: swap;
}

/* ══════════ 验收版组件（逐字继承 design.css） ══════════ */

/* ══════════ 三皮肤 token 体系（2026-09-30 用户拍板：无属性 = 苹果毛玻璃默认） ══════════
 * 全部颜色/圆角/阴影/字体走 token，组件零改动自动换肤；
 * 值与设计层验收版 shared/m-base.css 逐字一致（铁律十一 #4）
 * 语义别名（--night/--panel/--sub/--bright/--tan/--cream/--chip/--blue…）为 runtime 历史类名映射 */
:root {
  /* ── 苹果毛玻璃（默认皮肤）tokens ── */
  --ink:#0a2540; --txt:#12233d; --muted:#61738c; --line:rgba(255,255,255,.7);
  --gold:#f7c948; --gold-ink:#3a2c04; --grass:#2ecc7a; --grass-ink:#05301a;
  --pink:#ff5d8f; --purple:#7a5aa8;
  --font:-apple-system,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:-apple-system,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --r-card:22px; --r-pill:999px;
  --bd:1px solid rgba(255,255,255,.75);
  --bd-strong:1.5px solid rgba(10,37,64,.35);
  --sh-card:0 24px 60px -18px rgba(15,40,80,.38), 0 4px 14px rgba(15,40,80,.14); /* 深悬浮 */
  --sh-btn:0 10px 24px -8px rgba(10,37,64,.38);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.3); /* 玻璃厚度 */
  --stage-bg:
    radial-gradient(120% 90% at 12% -10%, #cfe4ff 0%, transparent 55%),
    radial-gradient(130% 100% at 105% 8%, #ffd9ec 0%, transparent 52%),
    radial-gradient(120% 120% at 50% 115%, #d8f2e4 0%, transparent 58%),
    linear-gradient(180deg,#eaf2fc,#f4f8fe 60%,#ffffff);
  --card-bg:rgba(255,255,255,.34);
  --input-bg:rgba(255,255,255,.48); --chip-bg:rgba(255,255,255,.48);
  --chip-on-bg:linear-gradient(135deg,#5f8cff,#3d6df0); --chip-on-ink:#ffffff;
  --btn-gold-bg:linear-gradient(135deg,#ffd75e,#f0b429); --btn-gold-ink:#3a2c04;
  --btn-grass-bg:linear-gradient(135deg,#41e08a,#1fb96a); --btn-grass-ink:#05301a;
  --btn-night-bg:linear-gradient(135deg,#5f8cff,#3d6df0); --btn-night-ink:#ffffff;
  /* 答题选项（.tr-opt）：柔白半透明底 + 深墨字护眼（2026-09-30 反馈修复 #2：蓝渐变铺满刺眼） */
  --opt-bg:rgba(255,255,255,.6); --opt-ink:var(--ink);
  --title-ink:var(--ink); --title-style:normal; --title-weight:800;
  --hl-ink:#5f8cff; --mon-bg:#eaf2ff; --mon-ink:var(--ink);
  --ok-ink:#0e7a3e; --warn-ink:#c0392b;
  --ok:#2ecc7a; --ok-dark:#1fb96a; --ok-fg:#05301a; --ok-bg:rgba(46,204,122,.14);
  --danger:#c0392b; --danger-ink:#ffffff; --danger-fg:#7a1a12; --danger-bg:rgba(192,57,43,.12);
  --paper:#ffffff; --paper-ink:#3a2c18; --pink-ink:#7a0f47;
  /* 金色文字（亮底必须深金可读；暗底亮金。2026-09-30 对比彻查） */
  --gold-text:#a87e1a;
  /* runtime 别名：历史类名 → 语义色 */
  --night:#eef4fb; --panel:var(--card-bg); --fog:#8fa8c8; --sky:#2f6fb0; --leaf:#1fb96a;
  --stone:#6e6152; --gold-dark:#a87e1a; --brick:#5f8cff;
  --sub:#2f5a80; --bright:#3d5573; --tan:#a87e1a; --cream:#7a5c12; --hint:#5a7a8c;
  --chip:var(--chip-bg); --blue:#3d6df0;
  --guide-bg:rgba(247,201,72,.16); --probe-bg:rgba(61,109,240,.07);
  --boundary-bg:rgba(61,109,240,.07); --tip-bg:rgba(255,93,143,.12); --self-bg:rgba(247,201,72,.2);
  /* 描边/投影结构（arcade 2px/3px 黑描边 + 硬投影，玻璃/Playful 细描边 + 柔投影） */
  --bw:1px; --bw-sm:1px; --bw-xs:1px; --bw-btn:1.5px;
  --sh-big:0 24px 60px -18px rgba(15,40,80,.38), 0 4px 14px rgba(15,40,80,.14);
  --sh-sm:0 10px 24px -8px rgba(10,37,64,.3);
  --sh-soft:0 10px 24px -8px rgba(10,37,64,.3);
  --sh-soft-big:0 24px 60px -18px rgba(15,40,80,.38), 0 4px 14px rgba(15,40,80,.14);
  --sh-dlg:0 24px 60px -18px rgba(15,40,80,.4), 0 8px 24px rgba(15,40,80,.2);
  --ts:none; --press:1px;
  --px-font:var(--font); --font-w:800;
  --body-bg:#eef4fb;
}
html[data-theme="arcade"] {
  /* ── 街机（80s 经典，三层扁平色：无圆角/无渐变；禁像素字体 → 系统黑体 900）── */
  --ink:#05070d; --night:#0d1526;
  --fog:#8fa8c8; --sky:#7fc4e8; --grass:#6fbf4a; --leaf:#4a9a38; --brick:#c8603c;
  --line:rgba(255,255,255,.12); --gold-ink:#1a1405; --grass-ink:#0c2404; --paper-ink:#3a2c18;
  --stone:#8a7a68; --gold:#f0c040; --gold-dark:#b8862a;
  --pink:#ff9ab0; --purple:#7a5aa8; --paper:#f8ecd8;
  --txt:#f4f9ff; --muted:#a9bdd6;
  --font:'Microsoft YaHei','PingFang SC',sans-serif;
  --font-body:'Microsoft YaHei','PingFang SC',sans-serif;
  --r-card:0px; --r-pill:0px;
  --bd:2px solid var(--ink);
  --bd-strong:3px solid var(--ink);
  --sh-card:5px 5px 0 #05070d;
  --sh-btn:3px 3px 0 #05070d;
  --inset-hi:inset 0 0 0 0 transparent;
  --stage-bg:#0d1526;
  --card-bg:#22335c;
  --input-bg:#314a85; --chip-bg:#314a85;
  --chip-on-bg:var(--gold); --chip-on-ink:#1a1405;
  --btn-gold-bg:var(--gold); --btn-gold-ink:#1a1405;
  --btn-grass-bg:var(--grass); --btn-grass-ink:#0c2404;
  --btn-night-bg:#314a85; --btn-night-ink:var(--txt);
  --opt-bg:#314a85; --opt-ink:var(--txt);
  --title-ink:var(--gold); --title-style:normal; --title-weight:900;
  --gold-text:#f0c040;
  --hl-ink:var(--pink);
  --mon-bg:var(--leaf); --mon-ink:var(--ink);
  --ok-ink:#8fe0a0; --warn-ink:#ffb48a;
  --ok:#6fbf4a; --ok-dark:#3a7a2a; --ok-fg:#0c2404; --ok-bg:rgba(111,191,74,.15);
  --danger:#d85050; --danger-ink:#ffffff; --danger-fg:#ffd7e0; --danger-bg:rgba(216,80,80,.15);
  --pink-ink:#4a0a20;
  --panel:#22335c; --body-bg:#0d1526;
  --sub:#9fd8e8; --bright:#cfe9f5; --tan:#ffd27f; --cream:#ffe9b8; --hint:#7fa8b8;
  --chip:#0d2138; --blue:#4f9be8;
  --guide-bg:rgba(255,210,127,.08); --probe-bg:rgba(159,216,232,.08);
  --boundary-bg:rgba(159,216,232,.06); --tip-bg:rgba(255,154,176,.12); --self-bg:rgba(58,51,15,.95);
  --bw:2px; --bw-sm:2px; --bw-xs:2px; --bw-btn:3px;
  --sh-big:5px 5px 0 #05070d;
  --sh-sm:3px 3px 0 #05070d;
  --sh-soft:4px 4px 0 rgba(0,0,0,.55);
  --sh-soft-big:6px 6px 0 rgba(0,0,0,.55);
  --sh-dlg:0 8px 0 rgba(0,0,0,.55), 0 0 40px rgba(0,0,0,.6);
  --ts:2px 2px 0 #05070d; --press:4px;
  --px-font:'Microsoft YaHei','PingFang SC',sans-serif; --font-w:900;
}
/* Playful：回到贴纸调整前版本（第五轮拍板：撤销黑描边/硬投影/点阵底） */
html[data-theme="playful"] {
  --magenta:#ff2e95;
  --ink:#000000; --txt:#111111; --muted:#848383; --line:#e8e5e0;
  --gold:#ffd23f; --gold-ink:#111111; --grass:#59c26b; --grass-ink:#052b10;
  --pink:#ff9ab0; --purple:#7a5aa8;
  --font:'Inter','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif;
  --r-card:24px; --r-pill:99px;
  --bd:1px solid var(--line); --bd-strong:1.5px solid rgba(0,0,0,.4);
  --sh-card:rgba(0,0,0,.22) 0 32px 80px 0, rgba(0,0,0,.08) 0 2px 8px 0;
  --sh-btn:0 2px 8px rgba(0,0,0,.14);
  --inset-hi:inset 0 0 0 0 transparent;
  --stage-bg:#f6f2ee;
  --card-bg:#ffffff; --input-bg:#ffffff; --chip-bg:#ffffff;
  --chip-on-bg:var(--ink); --chip-on-ink:#ffffff;
  --btn-gold-bg:var(--magenta); --btn-gold-ink:#ffffff;
  --btn-grass-bg:var(--grass); --btn-grass-ink:var(--grass-ink);
  --btn-night-bg:var(--ink); --btn-night-ink:#ffffff;
  --opt-bg:var(--ink); --opt-ink:#ffffff;
  --title-ink:var(--ink); --title-style:italic; --title-weight:900;
  --gold-text:#a8860a;
  --hl-ink:var(--magenta); --mon-bg:#ffd9ec; --mon-ink:#7a0f47;
  --ok-ink:#0e7a3e; --warn-ink:#d6336c;
  --ok:#59c26b; --ok-dark:#3d9e50; --ok-fg:#052b10; --ok-bg:rgba(89,194,107,.14);
  --danger:#d6336c; --danger-ink:#ffffff; --danger-fg:#8a1a42; --danger-bg:rgba(214,51,108,.1);
  --pink-ink:#7a0f47;
  --panel:#ffffff; --body-bg:#f6f2ee; --night:#f6f2ee; --fog:#9a8c80; --sky:#4a90d9;
  --stone:#a09380; --gold-dark:#c9a020; --brick:#ff2e95; --paper:#fffdf0; --paper-ink:#3a2c18;
  --sub:#7a6a8a; --bright:#55505a; --tan:#c9852a; --cream:#8a6a2a; --hint:#9a8a7a;
  --chip:#f1e9e2; --blue:#5a6ae8;
  --guide-bg:rgba(255,210,63,.14); --probe-bg:rgba(90,106,232,.07);
  --boundary-bg:rgba(90,106,232,.06); --tip-bg:rgba(255,154,176,.14); --self-bg:rgba(255,210,63,.22);
  --bw:1px; --bw-sm:1px; --bw-xs:1px; --bw-btn:1.5px;
  --sh-big:rgba(0,0,0,.22) 0 32px 80px 0, rgba(0,0,0,.08) 0 2px 8px 0;
  --sh-sm:0 2px 8px rgba(0,0,0,.14);
  --sh-soft:0 2px 8px rgba(0,0,0,.1);
  --sh-soft-big:rgba(0,0,0,.22) 0 32px 80px 0, rgba(0,0,0,.08) 0 2px 8px 0;
  --sh-dlg:rgba(0,0,0,.28) 0 32px 90px 0, rgba(0,0,0,.1) 0 4px 16px 0;
  --ts:none; --press:1px;
  --px-font:'Inter','PingFang SC','Microsoft YaHei',ui-sans-serif,sans-serif; --font-w:900;
}

* { box-sizing: border-box; }
/* 底部 200px 悬浮带预留（丁奕铭左下 pet-img 92×156+浮动5px+8px 底距，round4 P0-1）已移入
 * .v-scene 的 padding-bottom（在页脚上方、随场景背景着色，不再在页脚下方留一条 body 色长空白） */
body { margin: 0; background: var(--body-bg); color: var(--txt); font-family: var(--font-body); }
img, svg { image-rendering: pixelated; }

/* ── 像素按钮 ── */
.px-btn {
  font-family: var(--px-font); font-size: 11px; font-weight: var(--font-w);
  padding: 10px 14px; color: var(--btn-night-ink);
  background: var(--btn-night-bg); border: var(--bd-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-btn); cursor: pointer;
  text-shadow: var(--ts);
}
.px-btn:hover { filter: brightness(1.12); }
.px-btn:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--ink); }
.px-btn.gold { background: var(--btn-gold-bg); color: var(--btn-gold-ink); text-shadow: none; }
.px-btn.grass { background: var(--btn-grass-bg); color: var(--btn-grass-ink); text-shadow: none; }
.px-btn.night { background: var(--btn-night-bg); color: var(--btn-night-ink); }
.px-btn.danger { background: var(--danger); color: var(--danger-ink); }

/* ── 面板/卡片 ── */
.px-panel {
  background: var(--panel); border: var(--bd);
  box-shadow: var(--sh-soft-big); padding: 14px;
}
.px-card {
  background: var(--panel); border: var(--bd);
  box-shadow: var(--sh-card); padding: 12px 14px;
}
.px-title { font-family: var(--px-font); font-size: 14px; color: var(--title-ink); text-shadow: var(--ts); }
.px-sub { font-family: var(--px-font); font-size: 9px; color: var(--sky); letter-spacing: 1px; }

/* ── 徽章 ── */
.px-badge {
  display: inline-block; font-family: var(--px-font); font-size: 8px; font-weight: var(--font-w);
  padding: 5px 8px; border: var(--bd-strong); border-radius: var(--r-pill);
  background: var(--stone); color: var(--chip-on-ink);
}
.px-badge.gold { background: var(--gold); color: var(--gold-ink); }
.px-badge.grass { background: var(--grass); color: var(--grass-ink); }
.px-badge.pink { background: var(--pink); color: var(--pink-ink); }

/* ── 金币（纯 CSS 像素，box-shadow 堆叠） ── */
.px-coin {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); border: var(--bw-sm) solid var(--gold-dark);
  box-shadow: inset 0 0 0 2px var(--gold-dark);
  display: inline-block; vertical-align: middle;
}

/* ── 漫画气泡（尾巴自动换边：from-left/from-right） ── */
.px-bubble {
  position: relative; background: var(--paper); color: var(--paper-ink);
  border: var(--bd-strong); padding: 12px 16px;
  font-size: 13px; line-height: 1.9;
  box-shadow: var(--sh-soft);
}
.px-bubble::after {
  content: ''; position: absolute; bottom: -10px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-right: var(--bd-strong); border-bottom: var(--bd-strong);
}
.px-bubble.from-left::after { left: 26px; transform: rotate(45deg); }
.px-bubble.from-right::after { right: 26px; transform: rotate(225deg); }
.px-bubble.night { background: var(--panel); color: var(--txt); }
.px-bubble.night::after { background: var(--panel); }

/* ── 词怪形态（雾化/幼体/成体/耀体，掌握度离散态，零 judge 数值） ── */
.monster-svg { shape-rendering: crispEdges; display: block; width: 100%; height: auto; }
.monster-fog { opacity: 0.55; filter: grayscale(0.8); }
.monster-glow { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 12px var(--gold)); }
.monster-archived { filter: grayscale(1); opacity: 0.5; }

/* ── 场景通用：行条目 ── */
.px-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: var(--bd);
  box-shadow: var(--sh-card); padding: 10px 12px;
}
.px-speak {
  font-family: var(--px-font); font-size: 10px; font-weight: var(--font-w);
  padding: 6px 8px; color: var(--btn-night-ink);
  background: var(--btn-night-bg); border: var(--bd-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm); cursor: pointer;
}
.px-speak:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--ink); }

/* ══════════ runtime 布局（应用壳层，视觉语言同验收版） ══════════ */

/* 像素小尺寸按钮（runtime 密集场景用） */
.px-btn.sm { font-size: 9px; padding: 6px 8px; }

/* 应用头部 = 设计层 C1 拍板版顶栏（一行：logo「单」 + 4 导航主字 + 🎨 + 👤；无副标题，
   退出登录/管理员收进 👤 菜单）。背景卡片化 + 毛玻璃（材质块统一加 blur），随三皮肤换肤 */
.app-header {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap;
  background: var(--card-bg);
  border-bottom: var(--bd);
  box-shadow: var(--sh-soft), var(--inset-hi);
  padding: 8px 10px;
}
.t-logo {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--px-font); font-size: 13px; font-weight: 900; color: var(--btn-gold-ink);
  background: var(--btn-gold-bg); border: var(--bd-strong); border-radius: var(--r-pill);
  box-shadow: var(--sh-btn); cursor: default;
}
.nav { flex: 1; display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.nav .px-btn {
  flex: 1; min-width: 0; display: block; text-align: center; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  padding: 8px 4px; color: var(--muted);
  background: var(--chip-bg); border: var(--bd); border-radius: var(--r-pill);
  box-shadow: none; text-shadow: none;
}
.nav .px-btn:hover { filter: brightness(1.05); }
.nav .px-btn.active { background: var(--chip-on-bg); color: var(--chip-on-ink); box-shadow: var(--sh-btn); }

/* 主内容：全宽壳（背景全铺）；820 居中/底部悬浮带预留由 .v-scene 承担（布局模板 1） */
.app-main {
  width: 100%; margin: 0 auto; padding: 0;
  min-height: calc(100vh - 70px);
}
.view-head { margin-bottom: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.view-head .px-title { font-size: 16px; }

/* 场景底色：玻璃/Playful = 彩色光斑；街机 = 冻结的六场景渐变（铁律十一）。
 * 模板 1（限宽 820 居中）落在场景本身上：场景宽度 = 100% 全铺背景（同设计层 .m-scene），
 * 内容列被两侧 padding 压到 820；bottom 224px = 200px 宠物悬浮带预留 + 24px 呼吸（round4 P0-1） */
.v-scene { padding: 12px max(16px, calc((100% - 820px) / 2)) 224px; position: relative; background: var(--stage-bg); }
html[data-theme="arcade"] .v-scene.wv { background: linear-gradient(180deg, #0e1830 0%, #16263c 100%); }
html[data-theme="arcade"] .v-scene.tr { background: linear-gradient(180deg, #2a4a78 0%, #4a74a8 40%, #7fa8c8 58%, #3a5a2a 58.5%, #2a4a20 100%); }
html[data-theme="arcade"] .v-scene.sb { background: linear-gradient(180deg, #101a30 0%, #182642 100%); }
html[data-theme="arcade"] .v-scene.cp { background: linear-gradient(180deg, #0e1830 0%, #16263c 45%, #1c3018 46%, #14240f 100%); }
.v-scene > section { margin-bottom: 20px; }
.v-label {
  font-family: var(--px-font); font-size: 9px; color: var(--cream);
  background: var(--panel); border: var(--bw-xs) dashed var(--fog);
  border-radius: var(--r-pill);
  display: inline-block; padding: 6px 8px; margin-bottom: 10px;
}

/* 表单输入（暗色像素风） */
.px-input, textarea.px-input, select.px-input {
  background: var(--chip); color: var(--txt);
  border: var(--bd-strong); padding: 10px 12px;
  font-size: 13px; font-family: 'Microsoft YaHei', sans-serif;
  outline: none;
}
textarea.px-input { width: 100%; resize: vertical; line-height: 1.9; }
select.px-input { padding: 7px 8px; }
.px-input:focus { border-color: var(--sky); }

/* ══════════ ① 词卷阁（词库） ══════════ */

.book-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.book-chip { display: flex; align-items: center; gap: 4px; }
.book-chip.off { opacity: 0.55; }
/* P2-8 书架选中态：选中书卷加绿圈（与 ✓ 前缀双保险，点选成功一眼可见） */
.book-chip.on .px-btn { outline: var(--bw-sm) solid var(--ok-dark); outline-offset: 2px; }

/* 学习路线（K0）：切换条 + 首次使用选择器 */
.route-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.route-note { font-size: 13px; color: var(--bright); margin-bottom: 12px; }
.route-opts { display: flex; flex-direction: column; gap: 10px; }
.route-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 14px; width: 100%; }
.ro-name { font-family: var(--px-font); font-size: 12px; color: var(--gold); }
.ro-desc { font-size: 12px; color: var(--sub); line-height: 1.6; }
.wd-pen {
  font-size: 12px; padding: 6px 8px; cursor: pointer;
  background: var(--panel); color: var(--txt);
  border: var(--bd-strong); box-shadow: var(--sh-sm);
}
.wd-pen:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

.imp-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }

/* 词条图鉴筛选条（选书后出现） */
.filter-bar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filter-label { font-family: var(--px-font); font-size: 9px; color: var(--gold-text); align-self: center; }
.fitem { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--sub); }
.fitem select { padding: 6px 8px; font-size: 12px; }

/* 藏书塔词条行：词怪形态 = 掌握度离散态（零 judge） */
.tower { display: flex; flex-direction: column; gap: 10px; }
.w-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: var(--bd);
  box-shadow: var(--sh-card); padding: 8px 12px;
}
.w-row.archived { opacity: .6; filter: grayscale(.7); }
.w-row .monster-thumb { width: 44px; flex: 0 0 auto; }
.w-row .spelling {
  font-family: var(--px-font); font-size: 12px; color: var(--title-ink);
  cursor: pointer; text-shadow: var(--ts);
}
.w-row .spelling:hover { color: var(--cream); }
.w-row .meaning { flex: 1; min-width: 12ch; font-size: 13px; color: var(--bright); }
.w-row .w-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.w-row .w-note { font-size: 11px; color: var(--muted); }
.w-row .w-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.dim-line { color: var(--muted); font-size: 13px; line-height: 2; }

/* ══════════ ② 关卡试炼（每日测试） ══════════ */

.tr-regions { display: flex; gap: 12px; flex-wrap: wrap; }
.tr-region { width: 200px; flex: 0 0 auto; cursor: pointer; }
.tr-region svg { width: 100%; height: auto; display: block; shape-rendering: crispEdges; }
.tr-region .r-name { font-family: var(--px-font); font-size: 10px; margin: 8px 0 4px; color: var(--txt); }
.tr-region .r-state { font-size: 11px; color: var(--bright); }
.tr-region.locked { filter: grayscale(1); opacity: .6; cursor: not-allowed; }
.tr-region.active { box-shadow: 0 0 0 var(--bw-sm) var(--gold), var(--sh-card); }
.tr-region.active .r-name { color: var(--title-ink); }

/* ── 雪峰飘雪特效（fixed 全屏、pointer-events 无、z 低于小分/丁奕铭不抢戏） ── */
#snow-layer { position: fixed; inset: 0; pointer-events: none; z-index: 3000; overflow: hidden; }
.snow { position: absolute; top: -24px; animation: snow-fall linear infinite; }
.snow i { display: block; width: 100%; height: 100%; background: #fff;
          box-shadow: 0 0 0 1px rgba(180,220,255,.6); animation: snow-sway ease-in-out infinite alternate; }
@keyframes snow-fall { from { transform: translateY(-24px); } to { transform: translateY(105vh); } }
@keyframes snow-sway { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

/* 雪峰「瑞雪」购买询问弹窗内容 */
.snow-skin-row { display: flex; gap: 14px; align-items: center; }
.snow-skin-img { width: 72px; height: 72px; image-rendering: pixelated; border: var(--bd); flex: 0 0 auto; }
.snow-skin-name { font-family: var(--px-font); font-size: 10px; color: var(--gold-text); margin-bottom: 8px; }
.snow-skin-price { font-family: var(--px-font); font-size: 9px; color: var(--cream); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.snow-skin-desc { font-size: 13px; color: var(--txt); line-height: 1.7; }

/* 雾渊魔王 Boss 战 */
.boss-panel {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(18,10,16,.92); border: 4px solid var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.5);
  padding: 14px 16px; margin-bottom: 14px;
}
.boss-portrait { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.boss-sprite { width: 180px; height: 180px; image-rendering: pixelated; object-fit: cover; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.5); }
.boss-timer { width: 180px; }
.boss-timer-bar { height: 10px; background: #0a0608; border: 2px solid var(--ink); overflow: hidden; }
.boss-timer-fill { height: 100%; background: linear-gradient(90deg, #7fe08a, #ffd27f); transition: width .2s linear; }
.boss-timer-fill.low { background: linear-gradient(90deg, #ff8a3a, #d43a1a); }
.boss-timer-num { display: block; text-align: center; font-family: var(--px-font); font-size: 10px; color: #ffd27f; text-shadow: 2px 2px 0 var(--ink); margin-top: 3px; }
.boss-timer-num.low { color: #ff6a7a; }
.boss-side { flex: 1 1 220px; min-width: 200px; }
.boss-name { font-family: var(--px-font); font-size: 11px; font-weight: var(--title-weight); color: var(--gold); margin-bottom: 8px; }
.boss-tag { font-family: var(--px-font); font-size: 8px; color: #cfe9f5; margin-left: 6px; }
.boss-hp { position: relative; height: 22px; background: #0a0608; border: 3px solid var(--ink); margin-bottom: 8px; overflow: hidden; }
.boss-hp-fill { height: 100%; background: linear-gradient(180deg, #ff8a3a, #d43a1a); transition: width .3s ease; }
.boss-hp-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--px-font); font-size: 9px; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.boss-lives { font-size: 18px; color: #ff6a7a; letter-spacing: 3px; }
.boss-q { margin-top: 0; }
.boss-hit { font-family: var(--px-font); font-size: 12px; color: #7fe08a; text-shadow: 2px 2px 0 var(--ink); }
.boss-miss { font-family: var(--px-font); font-size: 12px; color: #ff9ab0; text-shadow: 2px 2px 0 var(--ink); }
.boss-miss .dx-tip { display: block; font-family: inherit; font-size: 10px; color: #ffd27f; margin-top: 6px; }
.boss-win-big { font-family: var(--px-font); font-size: 24px; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); margin-bottom: 12px; }

.tr-head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-progress { font-family: var(--px-font); font-size: 10px; color: var(--txt); text-shadow: var(--ts); }
.tr-coins { font-family: var(--px-font); font-size: 12px; color: var(--gold-text); display: flex; align-items: center; gap: 8px; }
/* 十日猎场（spec 2026-10-01）：快筛进度条 · 狩猎容错提示 · 沙盘预测行（对齐设计层状态六/七/一b） */
.hunt-bar { height: 10px; border: var(--bd); border-radius: 8px; background: var(--card-bg); overflow: hidden; margin: 2px 0 12px; }
.hunt-bar i { display: block; height: 100%; background: var(--gold); transition: width .2s; }
.tr-tol { font-family: var(--px-font); font-size: 10px; color: var(--muted); text-shadow: var(--ts); }
.hunt-pred { font-size: 12px; color: var(--txt); margin: 10px 0 2px; }
.hunt-pred b { color: var(--title-ink); }

.tr-card { background: var(--panel); border: var(--bd); box-shadow: var(--sh-soft-big); padding: 14px 16px; }
.tr-qtype { font-size: 11px; color: var(--sub); letter-spacing: 1px; margin-bottom: 10px; }
/* P2-9 拆词题首见引导：小分悄悄话一行（词根 = 单词里藏「意思」的小零件） */
.tr-guide {
  font-size: 12px; color: var(--tan); line-height: 1.9;
  margin: 0 0 10px; padding: 8px 12px;
  background: var(--guide-bg); border-left: var(--bw) solid var(--gold);
}
.tr-prompt {
  font-family: var(--px-font); font-size: 16px; color: var(--gold);
  text-shadow: var(--ts); word-break: break-all;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tr-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* 四选一选项：走 --opt-bg/--opt-ink token（玻璃默认柔白深字护眼，街机/Playful 保持本皮肤基调）
   选择器含 .tr-opts 提升特异性：覆盖 .px-btn.night 的蓝渐变（选项按钮 class = "px-btn night tr-opt"） */
.tr-opts .tr-opt { text-align: left; font-size: 13px; padding: 12px 14px; white-space: normal; background: var(--opt-bg); color: var(--opt-ink); }
.tr-opt.picked-ok { background: var(--ok) !important; color: var(--ok-fg); text-shadow: none; }
.tr-opt.picked-bad { background: var(--danger) !important; color: #ffffff; text-shadow: none; }
.tr-opt.is-answer { outline: var(--bw) solid var(--ok); outline-offset: -2px; }

/* 词根课卡（family 模式新根首次出现前） */
.rl-card { text-align: center; }
.rl-title { font-size: 12px; color: var(--sub); letter-spacing: 1px; margin-bottom: 12px; }
.rl-root {
  font-size: 26px; color: var(--title-ink); letter-spacing: 2px; margin-bottom: 6px;
  text-shadow: var(--ts);
}
.rl-zh { font-size: 15px; color: var(--bright); letter-spacing: 1px; }
.rl-sub { font-size: 12px; color: var(--sub); margin: 14px 0 10px; }
.rl-family { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.rl-chip {
  background: var(--chip); border: var(--bw-sm) solid var(--blue); padding: 6px 10px;
  font-size: 13px; color: var(--txt);
}
.rl-chip i { font-style: normal; color: var(--sub); font-size: 11px; margin-left: 4px; }
.rl-note { font-size: 12px; color: var(--sub); margin-bottom: 14px; line-height: 1.7; }

/* 拼写提示阶梯 */
.tr-hints { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tr-hint-step {
  background: var(--chip); border: var(--bw-sm) solid var(--blue); padding: 8px 10px;
  font-size: 12px; line-height: 1.8; color: var(--bright);
}
.tr-hint-step.revealed { border-color: var(--danger); color: var(--danger-fg); }
.tr-spell-input { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.tr-spell-input input {
  flex: 1; min-width: 200px; background: var(--chip); color: var(--txt);
  border: var(--bd-strong); padding: 10px 12px; font-size: 15px;
  font-family: var(--px-font); letter-spacing: 2px;
}

/* 收服动画 */
.tr-catch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tr-catch .monster { width: 90px; animation: catchPop .6s steps(4) 1; }
@keyframes catchPop {
  0% { transform: scale(0.6); opacity: .3; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.tr-catch .catch-banner {
  font-family: var(--px-font); font-size: 13px; color: var(--gold-text);
  text-shadow: var(--ts); line-height: 2;
}
.tr-catch .catch-sub { font-family: var(--px-font); font-size: 9px; color: var(--bright); margin-top: 6px; }

/* 答错反馈：教学卡（词根古树浓缩版）+ 小分引导 */
.fb-card { margin-top: 12px; }
.teach-block { font-size: 13px; line-height: 2; color: var(--bright); }
.teach-word { font-family: var(--px-font); font-size: 13px; color: var(--title-ink); }
.teach-phon { font-family: var(--px-font); font-size: 11px; color: var(--sky); }
.teach-item { margin-top: 6px; }
.teach-item b { color: var(--sub); }

/* 答错错因提示（K1 精准狙击） */
.dx-tip { margin-top: 8px; padding: 8px 12px; background: var(--tip-bg); border-left: var(--bw) solid var(--pink); font-size: 12px; color: var(--danger-fg); line-height: 1.8; }
.dx-tip b { color: var(--pink); }

/* 产出性派生探针（建议三：诊断追问，不计分） */
.probe-block { margin-top: 10px; padding: 12px 14px; background: var(--probe-bg); border: var(--bw-xs) dashed var(--blue); border-radius: 8px; }
.probe-q { font-size: 13px; color: var(--bright); line-height: 1.7; margin-bottom: 10px; }
.probe-block .tr-opts { display: flex; flex-direction: column; gap: 8px; }
.probe-block .tr-opt.on { background: var(--ok) !important; color: var(--ok-fg); text-shadow: none; }
.probe-block .tr-opt.off { background: var(--danger) !important; color: #ffffff; text-shadow: none; }
.probe-fb { margin-top: 8px; }
.fb-guide { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.fb-guide .px-bubble { max-width: 60%; }
.fb-guide .fb-btns { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.fb-next { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* 结算页 */
.tr-done { text-align: center; padding: 2em 0; }
.done-big { font-family: var(--px-font); font-size: 20px; font-weight: var(--title-weight); color: var(--gold-text); text-shadow: var(--ts); line-height: 2.2; }
.done-line { font-size: 13px; color: var(--bright); line-height: 2.2; }
.done-btns { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 关卡试炼：今日已背进度（18/30） */
.day-progress { margin-top: 16px; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.dp-label { font-family: var(--px-font); font-size: 11px; color: var(--sub); }
.dp-num { font-family: var(--px-font); font-size: 24px; color: var(--gold); text-shadow: var(--ts); }
.dp-total { font-size: 14px; color: var(--bright); }

/* 关卡试炼：记忆曲线严格度 3 档 */
.tr-ruler-lbl { font-family: var(--px-font); font-size: 11px; color: var(--sub); margin-bottom: 8px; }
.tr-ruler-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* 关卡试炼：总单词数量概览 */
.tr-overview { margin-top: 14px; display: inline-block; text-align: left; }
.ov-row { font-size: 12px; color: var(--bright); line-height: 2; }
.ov-row b { color: var(--gold-text); font-family: var(--px-font); }
.ov-badge { display: inline-block; font-size: 9px; color: var(--tan); border: var(--bw-xs) solid var(--tan); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }

/* ══════════ ④ 大陆沙盘（家长面板） ══════════ */

.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.st-box { text-align: center; padding: 10px 6px; }
.st-box .num { font-family: var(--px-font); font-size: 15px; color: var(--gold); text-shadow: var(--ts); }
.st-box .num .of { font-size: 11px; font-weight: 600; color: var(--muted); text-shadow: none; }
.st-box .lbl { font-size: 11px; color: var(--sub); margin-top: 4px; }
.sb-note { font-size: 11px; color: var(--muted); line-height: 2; margin-top: 8px; }
.tr-prompt .pos { color: var(--sub); margin-left: 6px; font-size: .85em; }
.sb-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ══════════ ⑤ 冒险营地（设置） ══════════ */

.cp-camp { position: relative; margin-bottom: 14px; }
.cp-camp-in { width: 100%; }
.camp-in-stage { position: relative; border: var(--bw) solid var(--ink); box-shadow: var(--sh-big); }
.camp-in-img { width: 100%; height: auto; display: block; }
.camp-in-overlay { position: absolute; inset: 0; pointer-events: none; }
.camp-in-bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
#camp-arrange { margin-right: auto; }
.ci-sprite { position: absolute; pointer-events: auto; }
.ci-sprite img { display: block; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(10, 15, 28, .5)); }
.camp-in-overlay.arranging .ci-prod { cursor: grab; touch-action: none; }
.camp-in-overlay.arranging .ci-prod.pinned { cursor: not-allowed; }
.camp-in-overlay.arranging .ci-prod::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border: 2px dashed rgba(240, 192, 64, .7); pointer-events: none; }
.camp-in-overlay.arranging .ci-prod.sel::after { border: var(--bw-xs) solid var(--gold); }
.ci-lock { position: absolute; top: -8px; right: -10px; font-size: 13px; text-shadow: var(--ts); pointer-events: none; }
.camp-in-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px; border: var(--bw-sm) solid var(--ink); background: rgba(13, 33, 56, .9); box-shadow: var(--sh-card); }
.camp-in-ctrl .cic-name { font-family: var(--px-font); font-size: 11px; color: #9fd8e8; text-shadow: 2px 2px 0 rgba(10,15,28,.6); flex: 1; }
.cic-scale { font-family: var(--px-font); font-size: 12px; color: var(--gold); text-shadow: var(--ts); min-width: 44px; text-align: center; }
.cp-fire { width: 34px; height: 44px; position: relative; }
.cp-fire .f-log { position: absolute; bottom: 0; width: 30px; height: 8px; background: #8a5a2a; border: var(--bw-sm) solid var(--ink); }
.cp-fire .f-flame {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 26px; background: #ff8a3a;
  border: var(--bw-sm) solid var(--ink);
  animation: flame 0.7s steps(3) infinite;
}
.cp-fire .f-flame::before {
  content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 14px; background: #ffe066; border: var(--bw-xs) solid var(--ink);
}
@keyframes flame { 0%, 100% { height: 26px; } 50% { height: 20px; } }

/* 营地装饰（已购商品摆放区） */
.cp-decor-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cp-decor { height: 44px; width: auto; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(10, 15, 28, .6)); }
.cp-decor-hint { font-size: 11px; color: var(--hint); line-height: 1.6; }

/* ── 庄园（Gardenscapes 模式：3 学段地块 + 帐篷 + 里程碑装饰） ── */
.estate { position: relative; }
.estate-ground {
  position: relative;
  background-color: #1a3a28;
  background-image: url("/static/assets/营地/estate_ground.png");
  background-size: cover;
  background-position: center;
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 22px 16px 18px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.28), 0 6px 0 var(--ink);
  overflow: hidden;
}
.estate-plots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.estate-plot {
  position: relative; text-align: center; cursor: pointer;
  background: rgba(16, 36, 22, .55);
  border: 2px dashed rgba(255,255,255,.16);
  border-radius: 6px; padding: 12px 6px 14px; min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: transform .12s steps(2), border-color .12s;
}
.estate-plot:hover { transform: translateY(-3px); border-color: var(--gold); }
.estate-plot .ep-name { font-family: var(--px-font); font-size: 11px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.estate-plot .ep-level { font-size: 10px; color: #9fd8e8; margin-top: 3px; }
.estate-plot .ep-building {
  width: 92px; height: 92px; margin-top: 6px;
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.32));
}
.estate-plot .ep-progress { font-size: 10px; color: #c8e0e8; margin-top: 8px; width: 100%; line-height: 1.5; }
.ebar { width: 100%; height: 6px; background: #0a1a10; border: 1px solid var(--ink); margin-bottom: 4px; }
.ebar-fill { height: 100%; background: var(--gold); }
.estate-decor-row { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.estate-decor-row .ed-label { font-family: var(--px-font); font-size: 10px; color: #ffd27f; text-shadow: 2px 2px 0 var(--ink); }
.estate-decor { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.estate-decor .ed { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(10,15,28,.5)); }
.estate-decor .ed-hint { font-size: 11px; color: #7fa8b8; line-height: 1.6; }
.estate-hint { padding: 12px; font-size: 11px; color: var(--hint); line-height: 1.6; }

/* 词根树林（营地 · 6 档收服森林：种子/一~四级/成体） */
.estate-root-grove { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.estate-root-grove .ed-label { font-family: var(--px-font); font-size: 10px; color: #ffd27f; text-shadow: 2px 2px 0 rgba(10,15,28,.6); text-align: center; }
.rt-grove { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rt-root { font-family: var(--px-font); font-size: 14px; font-weight: var(--title-weight); color: var(--title-ink); text-shadow: var(--ts); letter-spacing: 1px; }
.rt-root .rt-zh { font-size: 10px; color: var(--sub); display: block; margin-top: 2px; }
.rt-count { font-size: 10px; color: var(--bright); }
.rt-empty { font-size: 11px; color: #cfe9f5; line-height: 1.6; text-align: center; }
.rt-toggle {
  font-family: var(--px-font); font-size: 11px; color: #cfe9f5;
  text-shadow: 2px 2px 0 rgba(10,15,28,.6); background: none; border: none;
  cursor: pointer; padding: 6px 8px; letter-spacing: 1px; text-align: center;
}
.rt-toggle:hover { color: var(--gold); }
.rt-arrow { display: inline-block; width: 1em; }
.rt-body { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
/* 档位分组（成体→四级→…→种子，6 形态两行网格，每档折叠单开） */
.rt-tier-toggle {
  font-family: var(--px-font); font-size: 9px; color: var(--sub); text-shadow: var(--ts);
  background: var(--chip); border: var(--bw-xs) solid var(--line); cursor: pointer;
  padding: 6px 4px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center;
}
.rt-tier-toggle:hover { color: var(--tan); border-color: var(--ink); }
.rt-tier-toggle.open { color: var(--tan); border-color: var(--gold); }
.rt-tier-body { margin: 6px 0 4px; }
/* 词根条目：纯文字卡（档位由分组可知，不重复放缩略图） */
.rt-entry {
  background: var(--chip); border: var(--bw-sm) solid var(--ink); box-shadow: var(--sh-soft);
  padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  cursor: pointer; min-height: 56px; justify-content: center;
}
.rt-entry:hover { border-color: var(--gold); }
.rt-entry-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rt-entry-card .rt-zh { font-size: 10px; color: var(--sub); }
.rt-tree-img { image-rendering: pixelated; display: block; }
/* 树图漂浮微动（呼应悬浮小岛设定，±3px 6s 慢循环） */
.tree-float { animation: tree-float 6s ease-in-out infinite; }
@keyframes tree-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 档位 chip 网格（6 形态两行 × 3 列，每档折叠单开） */
.rt-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rt-tier-icon { width: 18px; height: 18px; image-rendering: pixelated; margin-right: 5px; }
/* 词根树弹窗 */
.rtd-line { font-size: 12px; color: var(--bright); line-height: 1.6; margin-bottom: 10px; text-align: center; }
#rtd-body { display: flex; flex-direction: column; gap: 8px; }
.rtd-art { display: flex; justify-content: center; margin-bottom: 4px; }
/* 词根家族技能树页：背景星尘+树剪影漂浮，前景错落词组 + 金色脉冲线 */
.v-scene.ft .view-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v-scene.ft #ft-back { margin-left: auto; }
.ft-note { font-size: 11px; color: #9fd8e8; line-height: 1.6; text-align: center; margin: 8px 0; }
.ft-canvas {
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background: rgba(8,22,40,.85); border: 3px solid var(--ink); border-radius: 8px;
  min-height: 480px;
}
.ft-canvas:active { cursor: grabbing; }
/* 背景层（z 最低）：金色星尘上升漂移 + 本档树剪影漂浮 */
.ft-bg-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ft-star {
  position: absolute; bottom: -6px; background: #ffd86b;
  box-shadow: 0 0 6px 2px rgba(255,216,107,.5);
  animation: ft-rise linear infinite; opacity: 0;
}
@keyframes ft-rise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .85; }
  80% { opacity: .5; }
  100% { transform: translateY(-560px); opacity: 0; }
}
.ft-bg-tree { position: absolute; right: 4%; bottom: 6%; opacity: .12; pointer-events: none; }
/* 世界层（可拖动平移；金线在下、根节点与词卡在上） */
.ft-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; }
.ft-lines { display: block; position: absolute; inset: 0; pointer-events: none; }
.ft-line {
  fill: none; stroke-width: 2.5; stroke: #8a6d3b; opacity: .55;
  stroke-dasharray: 10 14; animation: ft-dash 2.5s linear infinite;
}
.ft-line.lit { stroke: #ffd86b; opacity: .95; }
@keyframes ft-dash { to { stroke-dashoffset: -48; } }
.ft-root-node { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ft-root-art { display: flex; justify-content: center; }
.ft-root-name { font-family: var(--px-font); font-size: 16px; color: #ffe9a8; text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px; text-align: center; }
.ft-root-name .rt-zh { font-size: 11px; color: #9fd8e8; }
/* 词组层：错落绝对定位 */
.ft-branches { position: absolute; inset: 0; }
.ft-sec-label {
  position: absolute; left: 12px; font-family: var(--px-font); font-size: 10px;
  color: #9fd8e8; text-shadow: 2px 2px 0 var(--ink); letter-spacing: 1px;
}
.ft-node {
  position: absolute; width: 118px; background: rgba(13,33,56,.9); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.5); padding: 7px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.ft-node:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 10px rgba(255,233,168,.5), 0 3px 0 rgba(0,0,0,.5); }
.ft-node.lit {
  background: rgba(64,48,10,.92); border-color: #ffd86b;
  box-shadow: 0 0 10px rgba(255,216,107,.45), 0 3px 0 rgba(0,0,0,.5);
}
.ft-spelling { font-size: 12px; color: #c8e0e8; word-break: break-word; }
.ft-node.lit .ft-spelling { color: #ffe9a8; }
.ft-zh { font-size: 10px; color: #9fd8e8; line-height: 1.3; }
.ft-badge {
  font-size: 9px; color: #7fa8b8; border: 2px solid var(--ink); background: rgba(0,0,0,.35);
  padding: 1px 6px;
}
.ft-node.lit .ft-badge { color: #2a1604; background: #ffd86b; }

/* 地块弹窗 */
.ed-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ed-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--bright); border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.ed-row b { font-family: var(--px-font); color: var(--gold-text); text-shadow: var(--ts); }
.ed-build { margin-bottom: 12px; }
.ed-build-note { font-size: 12px; color: var(--sub); line-height: 1.8; margin-top: 6px; }

/* 词卷阁学段过滤条 */
.stage-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stage-filter-bar span { font-family: var(--px-font); font-size: 11px; color: var(--gold-text); text-shadow: var(--ts); }

/* 学段选择器（勾选要考的学段；取消 = 整段停考） */
.stage-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stage-chip {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--px-font); font-size: 12px;
  padding: 8px 14px; cursor: pointer;
  border: var(--bd); box-shadow: var(--sh-card);
  background: var(--panel); color: var(--txt);
}
.stage-chip .sc-box {
  width: 16px; height: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink);
  background: var(--chip); border: var(--bd-strong);
}
.stage-chip.on { background: var(--ok-dark); color: var(--grass-ink); }
.stage-chip.on .sc-box { background: var(--gold); }
.stage-chip.off { opacity: 0.55; }

.cp-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cp-item .i-ico { font-family: var(--px-font); font-size: 16px; width: 34px; text-align: center; flex: 0 0 auto; }
.cp-item .i-main { flex: 1; min-width: 220px; }
.cp-item .i-title { font-family: var(--px-font); font-size: 12px; color: var(--gold-text); text-shadow: var(--ts); }
.cp-item .i-desc { font-size: 12px; color: var(--sub); line-height: 1.9; margin-top: 4px; }
.cp-item .i-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 像素滑块 */
.px-range {
  -webkit-appearance: none; appearance: none;
  width: 220px; height: 12px;
  background: var(--chip); border: var(--bd);
  box-shadow: var(--sh-card); outline: none;
}
.px-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 22px;
  background: var(--gold); border: var(--bd-strong); cursor: pointer;
}
.px-range::-moz-range-thumb { width: 18px; height: 22px; background: var(--gold); border: var(--bd-strong); border-radius: 0; cursor: pointer; }
.cp-val { font-family: var(--px-font); font-size: 13px; color: var(--gold-text); text-shadow: var(--ts); }

/* 像素开关 */
.px-switch {
  position: relative; width: 60px; height: 28px; flex: 0 0 auto;
  background: var(--chip); border: var(--bd);
  box-shadow: var(--sh-card); cursor: pointer;
}
.px-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: var(--brick);
}
.px-switch.on { background: var(--ok-dark); }
.px-switch.on::after { left: auto; right: 2px; background: var(--gold); }

.cp-books { display: flex; flex-direction: column; gap: 10px; }
.cp-book { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-book .b-name { font-size: 14px; color: var(--cream); flex: 1; min-width: 14ch; }
.cp-book .b-note { font-size: 11px; color: var(--muted); width: 100%; }

/* ══════════ 弹窗（③ 词根古树 / ⑥ 收服仪式） ══════════ */

dialog.px-dialog {
  background: var(--panel); color: var(--txt);
  border: var(--bd); box-shadow: var(--sh-dlg);
  padding: 0; width: min(92vw, 640px); max-height: 86vh;
}
dialog.px-dialog::backdrop { background: rgba(4,10,20,.75); }
.px-dialog .dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border-bottom: var(--bd);
  padding: 10px 14px;
}
.px-dialog .dlg-title { font-family: var(--px-font); font-size: 13px; color: var(--title-ink); text-shadow: var(--ts); }
.px-dialog .dlg-body { padding: 14px; overflow-y: auto; max-height: calc(86vh - 120px); }
.px-dialog .dlg-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 14px 14px; }

/* 自绘确认弹窗（2026-09-30 反馈修复 #4：替代原生 confirm——窄屏长文案自动换行、
   宽不过 92vw 永不溢出屏幕；正文字号 13px 保下限） */
dialog.px-confirm { width: min(92vw, 420px); }
.px-confirm .dlg-body {
  font-size: 13px; line-height: 1.9; color: var(--txt);
  word-break: break-word; overflow-wrap: anywhere;
}
.px-confirm .dlg-btns { gap: 12px; padding-bottom: 16px; }
.px-confirm .dlg-btns .px-btn { min-width: 96px; }

/* ③ 词根古树（词根卡内容） */
.wd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wd-word { font-family: var(--px-font); font-size: 17px; color: var(--gold); text-shadow: var(--ts); word-break: break-all; }
.wd-pos {
  font-family: var(--px-font); font-size: 9px; color: var(--ink);
  background: var(--gold); border: var(--bd-strong);
  padding: 3px 6px; flex: 0 0 auto;
}
.wd-phonetics { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-phonetic { font-size: 14px; color: var(--muted); }
.wd-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wd-sec { margin-bottom: 12px; }
.wd-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wd-sec-title { font-family: var(--px-font); font-size: 10px; color: var(--sub); }
.wd-sec-body { background: var(--chip); border: var(--bd); padding: 10px 12px; }
.wd-sec.hl .wd-sec-body { background: var(--paper); color: var(--paper-ink); }
.wd-text { font-size: 13px; line-height: 2; color: var(--bright); }
.wd-sec.hl .wd-text { color: var(--paper-ink); }
.wd-text.dim { color: var(--muted); }
.wd-meaning { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 2; }
.wd-meaning .pos { color: var(--sub); min-width: 4ch; }
.wd-meaning .zh { color: var(--cream); }
.wd-meaning .en { color: var(--muted); }
.wd-example { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding-left: 8px; border-left: var(--bw-sm) solid var(--gold); }
.wd-example .ex-en { font-size: 13px; color: var(--cream); line-height: 1.8; }
.wd-example .ex-zh { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* 词族谱系（窄屏纵向分支列表 = 验收版 scene3 窄模式） */
.wd-family { display: flex; flex-direction: column; gap: 8px; }
.fam-node { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 6px 8px; border: var(--bd); background: var(--panel); }
.fam-node.self { border-color: var(--gold); background: var(--self-bg); }
.fam-branch { font-family: monospace; color: var(--muted); }
.fam-word { font-family: var(--px-font); font-size: 11px; color: var(--title-ink); }
.fam-node.self .fam-word { color: var(--cream); }
.fam-tag { font-family: var(--px-font); font-size: 8px; color: var(--gold-text); border: var(--bw-xs) solid var(--gold-text); padding: 2px 4px; }
.fam-zh { color: var(--sub); }
.fam-pos { font-size: 11px; color: var(--sky); font-style: italic; }

/* 词素拼图（scene3 词根拆解 chips；.wd-morpheme = 每个词素一行的 runtime 形态） */
.wd-morph, .wd-morpheme { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wd-morph .m-chip, .wd-morpheme .m-chip {
  background: var(--chip-bg); border: var(--bd); padding: 6px 10px;
  font-family: var(--px-font); font-size: 10px; color: var(--txt);
}
.wd-morph .m-chip .m-zh, .wd-morpheme .m-chip .m-zh { display: block; font-family: 'Microsoft YaHei', sans-serif; font-size: 12px; color: var(--sub); margin-top: 4px; }
.wd-morph .m-eq, .wd-morpheme .m-eq { font-family: var(--px-font); font-size: 12px; color: var(--muted); }
.wd-morph .m-tag, .wd-morpheme .m-tag { font-size: 11px; color: var(--purple); }

.wd-foot { margin-top: 10px; font-size: 11px; color: var(--muted); }

/* 词根拆解边界话术（建议三：迁移边界，诚实承诺） */
.wd-boundary { margin-top: 8px; font-size: 11px; line-height: 1.7; color: var(--muted); padding: 6px 10px; background: var(--boundary-bg); border-left: var(--bw-sm) solid var(--blue); }
.wd-edit-ta { width: 100%; min-height: 64px; background: var(--paper); color: var(--paper-ink); border: 3px dashed #c89858; padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.9; }
.wd-edit-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ⑥ 收服仪式（加词后小分上线弹窗） */
.postadd-body { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 14px; }
.postadd-body .mini-box { width: 100px; height: 110px; flex: 0 0 auto; position: relative; }
.postadd-body p { font-size: 13px; color: var(--bright); line-height: 2; flex: 1; min-width: 200px; margin: 0 0 8px; }
.postadd-body p b { color: var(--gold-text); }

/* ⑦ 小分形象商店（冒险营地换肤） */
.shop-grid { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shop-grid::-webkit-scrollbar { height: 10px; }
.shop-grid::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--panel); border-radius: 6px; }
.shop-grid::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
.shop-card { flex: 0 0 auto; width: 128px; text-align: center; padding: 14px 10px 12px; scroll-snap-align: center; }
.shop-card.eq { border-color: var(--gold); box-shadow: 0 0 0 var(--bw-sm) var(--gold); }
.shop-img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; display: block; margin: 0 auto 8px; }
.shop-name { font-size: 12px; color: var(--txt); margin-bottom: 6px; }
.shop-price { font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.shop-state { min-height: 26px; }
.shop-balance { text-align: center; font-size: 13px; color: var(--gold-text); font-family: var(--px-font); margin-bottom: 12px; }
.shop-sec { font-family: var(--px-font); font-size: 11px; color: var(--sky); margin: 14px 0 6px; text-shadow: var(--ts); }
.shop-card.coming { opacity: .55; }
.shop-hint { text-align: center; font-size: 10px; color: var(--muted); margin: 0 0 12px; }
.coming-img { width: 56px; height: 56px; line-height: 56px; margin: 0 auto 8px; font-family: var(--px-font); font-size: 22px; color: var(--muted); background: var(--chip-bg); border: 1px dashed var(--muted); box-sizing: border-box; }

/* ══════════ ⑧ 登录/注册 + 用户盒 + 加词建议（Phase 4 多用户） ══════════ */

.user-box { display: flex; align-items: center; gap: 8px; }
.game-user { font-family: var(--px-font); font-size: 9px; color: var(--sky); }

.auth-wrap { max-width: 440px; margin: 32px auto; }
.auth-card { text-align: center; padding: 22px 18px; }
.auth-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.auth-note { font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.auth-field { text-align: left; margin-bottom: 12px; }
.auth-field label { display: block; font-family: var(--px-font); font-size: 9px; color: var(--sub); margin-bottom: 6px; }
.auth-field input { width: 100%; }
.auth-err { font-size: 12px; color: var(--danger-fg); background: var(--danger-bg); border: var(--bw-sm) solid var(--danger); padding: 8px 10px; margin-bottom: 12px; line-height: 1.8; }
.auth-beta { font-family: var(--px-font); font-size: 8px; color: var(--gold-text); border: var(--bw-sm) solid var(--gold-text); display: inline-block; padding: 4px 6px; margin-bottom: 12px; }

.sg-result { font-size: 13px; line-height: 2; padding: 10px 12px; border: var(--bd); }
.sg-result.exists { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger); }
.sg-result.thanks { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--grass); }
.sg-result b { color: var(--gold-text); }

/* ══════════ ⑨ 备案信息（工信部 + 公安部双备案悬挂） ══════════
 * 静态页脚（文档流最底部、**非 fixed**）：不遮挡左下宠物 / 右下小分——两者是 fixed 悬浮，
 * 占的是 .v-scene 底部预留的 224px 空白区（见 .v-scene padding-bottom 注释），与页脚物理不重叠。
 * 2026-09-30 反馈修复：背景/边框/链接改走主题 token（--card-bg/--line/--sub/--hl-ink），
 * 三皮肤随主题变色、不再硬编码深色。
 * ICP：京ICP备2026058857号 → 工信部备案官网首页；公安：官方 HTML 原样（rel="noreferrer"
 * target="_blank"）+ 官方图标在前、编号在后 → 查询页。文案与链接是合规信息，勿删
 * （回归钉：scripts/smoke_runtime.py §1b + tests/test_icp_notice.py） */
.app-footer {
  text-align: center;
  padding: 18px 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
}
.app-footer .icp-link {
  font-size: 13px;              /* 不破验收版字体下限 13px */
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .5px;
}
.app-footer .icp-link:hover { color: var(--hl-ink); }
/* 公安部备案锚（官方要求：图标在前、编号在后；字号同 ICP 不破 13px 下限） */
.app-footer .mps-link {
  font-size: 13px;
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .5px;
  margin-left: 14px;
}
.app-footer .mps-icon {
  width: 18px;                  /* 官方图标 36×40 等比缩放 */
  height: 20px;
  vertical-align: -4px;
  margin-right: 4px;
  image-rendering: pixelated;
}
.app-footer .mps-link:hover { color: var(--hl-ink); }

/* 窄屏回退（≤700px 顶栏居中；≤600px 由下方档位 1 设计层一行式覆盖。
   弹窗/收服仪式竖排等规则在 700px 与 600px 两块各保留一份——合并两分支各自档位行为不变） */
@media (max-width: 700px) {
  .app-header { text-align: center; }
  .fb-guide .px-bubble { max-width: 100%; }
  .fb-guide .fb-btns { margin-left: 0; }
  .tr-prompt { font-size: 14px; }
  .px-range { width: 100%; }
  dialog.px-dialog { width: min(94vw, 640px); }
  /* 收服仪式：弹窗内按钮竖排全宽，主按钮置顶 */
  .postadd-dialog .dlg-btns { flex-direction: column; gap: 8px; }
  .postadd-dialog .dlg-btns .px-btn { width: 100%; }
  .postadd-dialog .dlg-btns #pa-card { order: 1; }
  .postadd-dialog .dlg-btns #pa-quiz { order: 2; }
  .postadd-dialog .dlg-btns #pa-later { order: 3; }
}

/* ══════════ 三皮肤材质与收尾（2026-09-30 设计层验收版移植） ══════════ */

/* 苹果毛玻璃核心（默认生效）：卡片/行/顶栏/气泡/弹窗 = 半透明白 + 模糊 + 饱和度；
   街机/Playful 关闭模糊（纯色面）。圆角走 --r-card/--r-pill token（街机 = 0 自动直角） */
.app-header, .px-panel, .px-card, .px-row, .w-row, .tr-card, .px-bubble,
dialog.px-dialog, dialog.px-dialog .dlg-head, .hd-menu, .load-bubble, .app-footer {
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
html[data-theme="arcade"] .app-header, html[data-theme="arcade"] .px-panel,
html[data-theme="arcade"] .px-card, html[data-theme="arcade"] .px-row,
html[data-theme="arcade"] .w-row, html[data-theme="arcade"] .tr-card,
html[data-theme="arcade"] .px-bubble, html[data-theme="arcade"] dialog.px-dialog,
html[data-theme="arcade"] dialog.px-dialog .dlg-head, html[data-theme="arcade"] .hd-menu,
html[data-theme="arcade"] .load-bubble, html[data-theme="arcade"] .app-footer,
html[data-theme="playful"] .app-header, html[data-theme="playful"] .px-panel,
html[data-theme="playful"] .px-card, html[data-theme="playful"] .px-row,
html[data-theme="playful"] .w-row, html[data-theme="playful"] .tr-card,
html[data-theme="playful"] .px-bubble, html[data-theme="playful"] dialog.px-dialog,
html[data-theme="playful"] dialog.px-dialog .dlg-head, html[data-theme="playful"] .hd-menu,
html[data-theme="playful"] .load-bubble, html[data-theme="playful"] .app-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.px-panel, .px-card, .px-row, .w-row, .tr-card, .px-bubble, .fam-node, .rt-entry,
.rl-chip, .tr-hint-step, .wd-sec-body, .px-input, select.px-input, textarea.px-input,
.stage-chip, .sg-result, .auth-err, .probe-block, .tr-guide {
  border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--inset-hi);
}
/* 标题类统一走 --title-ink/--title-style/--title-weight（街机金色 900 / 玻璃墨蓝 800 / Playful 斜体 900）。
   夜间美术区（.boss-name/.rt-root/.done-big）已移出此组——固定亮金/亮色自持，不随主题变深 */
.px-title, .dlg-title, .tr-prompt, .dp-num, .wd-word, .ro-name,
.r-name, .ep-name, .ed-label, .cic-name, .shop-sec, .rl-title, .cp-book .b-name,
.i-title, .st-box .num {
  color: var(--title-ink);
  font-style: var(--title-style);
  font-weight: var(--title-weight);
}
/* 铁律十一：字体下限 13px（所有皮肤/所有档位；街机已禁像素字体 → 系统黑体 900） */
.px-btn, .px-btn.sm, .px-sub, .px-badge, .px-speak, .v-label,
.filter-label, .fitem, .spelling, .w-note, .tr-qtype, .tr-guide, .tr-hint-step,
.dp-label, .rl-title, .rl-note, .ro-desc, .st-box .lbl, .sb-note, .ov-row,
.cp-decor-hint, .cp-book .b-note, .wd-pos, .wd-sec-title, .wd-foot, .wd-boundary,
.fam-tag, .fam-pos, .shop-name, .shop-price, .shop-hint, .shop-state,
.auth-field label, .auth-note, .auth-err, .auth-beta, .rtd-line, .ed-build-note,
.rl-chip, .rt-count, .rt-empty, .dim-line, .game-user, .ov-badge, .wd-morpheme .m-chip,
.rt-tier-toggle, .rt-entry-card .rt-zh, .wd-text, .wd-meaning, .wd-example .ex-zh,
.teach-block, .postadd-body p, .ed-row, .fitem select, .filter-label, .m-chip {
  font-size: 13px !important;
}

/* ── 顶栏 🎨 皮肤下拉 + 👤 用户菜单（右上角，2026-09-30 用户拍板） ── */
.hd-icons { display: flex; align-items: center; gap: 8px; position: relative; }
.hd-icon {
  font-size: 16px; line-height: 1; padding: 8px 10px;
  background: var(--chip-bg); border: var(--bd-strong);
  border-radius: var(--r-pill); box-shadow: var(--sh-sm); cursor: pointer;
}
.hd-icon:hover { filter: brightness(1.08); }
.hd-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 950;
  min-width: 172px; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card-bg); border: var(--bd); border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--inset-hi);
}
.hd-menu.open { display: flex; }
.hd-menu button {
  text-align: left; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--txt); background: none; border: none;
  padding: 8px 10px; border-radius: var(--r-pill); cursor: pointer;
}
.hd-menu button:hover { background: var(--chip-bg); }
.hd-menu button.on { color: var(--hl-ink); }
.hd-menu button.danger { color: var(--danger); }
.hd-menu .hd-user { font-family: var(--px-font); font-size: 13px; color: var(--sub);
  padding: 4px 10px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; }

/* ── 加载反馈气泡（点按立即反馈「我在抓词怪…」，数据到了再渲染；优先级高于一切布局） ── */
.load-bubble {
  display: none; position: fixed; top: 74px; right: 12px; z-index: 1600;
  align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--txt); background: var(--card-bg); border: var(--bd); border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--inset-hi); padding: 10px 14px;
}
.load-bubble.on { display: flex; animation: lb-pop .25s steps(3) 1; }
@keyframes lb-pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ══════════ 手机/平板适配（2026-09-30 设计层验收拍板，三档固定密度） ══════════ */

/* 档位 2：大屏 ≥601px 强压缩（≈ 手机竖屏节奏；限宽 820 居中已在基座 .v-scene，勿再叠 padding） */
@media (min-width: 601px) {
  /* 顶栏密度（设计层 m-base.css 601+）：一行顶栏压紧 */
  .app-header { padding: 5px 8px; }
  .nav .px-btn { padding: 6px 4px; }
  .hd-icon { padding: 5px 8px; }
  .v-scene > section { margin-bottom: 12px; }
  .px-row, .w-row { padding: 8px 10px; gap: 8px; }
  .px-card { padding: 10px 12px; }
  .tr-opts { gap: 8px; margin-top: 10px; }
  .tr-hints { gap: 8px; margin-top: 10px; }
  .tower { gap: 8px; }
  .st-grid { gap: 10px; }
  .cp-books { gap: 8px; }
  .wd-family { gap: 6px; }
  .view-head { margin-bottom: 10px; }
  .shelf-rows { gap: 8px; }
  .shelf-row { padding: 8px 10px; gap: 10px; }
  .shelf-row .sr-swtch { padding: 6px 10px; }
  .tr-prep { gap: 12px; }
  /* 关卡 CTA 定宽 420 居中（布局模板 2，百词斩/多邻国惯例） */
  .tr-prep .px-btn.block, .tr-done .done-btns .px-btn {
    max-width: 420px; margin-left: auto; margin-right: auto; display: block; width: 100%;
  }
}

/* 档位 1：手机竖屏（默认节奏 = 基座规则本身，只做结构适配） */
@media (max-width: 600px) {
  .app-header { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .nav { gap: 4px; flex: 1; flex-wrap: nowrap; }
  .nav .px-btn { padding: 8px 2px; font-size: 13px; flex: 1; }
  .hd-icon { padding: 7px 8px; }
  .v-scene { padding: 10px 10px 80px; }
  .v-scene > section { margin-bottom: 12px; }
  .px-row, .w-row { padding: 8px 10px; gap: 8px; }
  .px-card { padding: 10px 12px; }
  .tr-opts { gap: 8px; margin-top: 10px; }
  .tr-hints { gap: 8px; margin-top: 10px; }
  .tower { gap: 8px; }
  .st-grid { gap: 10px; }
  .cp-books { gap: 8px; }
  .wd-family { gap: 6px; }
  .view-head { margin-bottom: 10px; }
  .fb-guide .px-bubble { max-width: 100%; }
  .fb-guide .fb-btns { margin-left: 0; }
  .tr-prompt { font-size: 14px; }
  .px-range { width: 100%; }
  dialog.px-dialog { width: min(94vw, 640px); }
  /* 收服仪式：弹窗内按钮竖排全宽，主按钮置顶 */
  .postadd-dialog .dlg-btns { flex-direction: column; gap: 8px; }
  .postadd-dialog .dlg-btns .px-btn { width: 100%; }
  .postadd-dialog .dlg-btns #pa-card { order: 1; }
  .postadd-dialog .dlg-btns #pa-quiz { order: 2; }
  .postadd-dialog .dlg-btns #pa-later { order: 3; }
}

/* 档位 3：手机横屏（高 ≤500px 密度档，Material Density compact；第二轮 × 0.75） */
@media (max-height: 500px) {
  .app-header { padding: 4px 7px; gap: 6px; }
  .nav .px-btn { padding: 4px 6px; }
  .hd-icon { padding: 4px 8px; }
  .v-scene { padding: 6px 8px 60px; }
  .v-scene > section { margin-bottom: 6px; }
  .px-row, .w-row { padding: 4px 7px; gap: 6px; }
  .px-card { padding: 6px 8px; }
  .px-btn { padding: 7px 10px; }
  .tr-opts { gap: 6px; margin-top: 6px; }
  .tr-hints { gap: 6px; margin-top: 6px; }
  .tower { gap: 6px; }
  .st-grid { gap: 6px; }
  .cp-books { gap: 6px; }
  .wd-family { gap: 4px; }
  .view-head { margin-bottom: 6px; }
  .load-bubble { top: 58px; }
  .shelf-rows { gap: 6px; }
  .shelf-row { padding: 4px 7px; gap: 6px; }
  .shelf-row .sr-swtch { padding: 5px 10px; }   /* 横档 29px≈触摸地板（开关高频点击，略高于 m-chip） */
  .tr-prep { gap: 6px; }
}

/* ══════════ 2026-09-30 三皮肤 + 手机档改造新增组件（设计层验收移植基准） ══════════ */

/* ── 教学卡 CTA 全宽块（scene2 状态三验收版 .m-btn.block width:100%；顺带躲开左下宠物悬浮带 P0-1） ── */
.fb-btns .px-btn, .fb-next .px-btn { display: block; width: 100%; text-align: center; }

/* ── 书架列表行（scene1 C4：每行一本单词书 + ⋯ 管理菜单；＋新建单词书虚线行常驻底部） ── */
.shelf-rows { display: flex; flex-direction: column; gap: 8px; }
.shelf-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: var(--bd); border-radius: var(--r-card);
  background: var(--card-bg); box-shadow: var(--sh-card); cursor: pointer;
}
.shelf-row.on { box-shadow: var(--sh-card), 0 0 0 2px var(--hl-ink); }
/* 停考书：图标/书名/副行变暗 + 书名删除线（可单本恢复；不整行透明，开关保持清晰可点） */
.shelf-row.off .sr-ico, .shelf-row.off .sr-name, .shelf-row.off .sr-desc { opacity: .55; }
.shelf-row.off .sr-name { text-decoration: line-through; }
.shelf-row .sr-ico { font-size: 20px; flex: none; }
.shelf-row .sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.shelf-row .sr-name { font-size: 14px; font-weight: 800; color: var(--title-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-row .sr-desc { font-size: 13px; color: var(--muted); }
/* 行内「开考/停考」开关（2026-09-30：替换原静态状态徽章，与学段芯片同一视觉语言——
   勾选态随主题 --chip-on-bg：玻璃蓝渐变/街机金/Playful 墨 + 金框✓；未选 = 浅底灰字空框） */
.shelf-row .sr-swtch { flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; padding: 6px 10px;
  border: var(--bd); border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--muted); cursor: pointer; box-shadow: var(--sh-card); }
.shelf-row .sr-sbox { width: 14px; height: 14px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: var(--gold-ink);
  background: var(--chip-bg); border: var(--bd-strong); }
.shelf-row .sr-swtch.on { background: var(--chip-on-bg); color: var(--chip-on-ink); box-shadow: var(--sh-btn); }
.shelf-row .sr-swtch.on .sr-sbox { background: var(--gold); }   /* 保留描边：街机金底金框靠描边勾出框形 */
.shelf-row .sr-swtch:active { transform: translate(1px, 1px); box-shadow: none; }
.shelf-row .sr-dots { flex: none; font-size: 15px; font-weight: 900; color: var(--txt);
  background: var(--chip-bg); border: var(--bd); border-radius: var(--r-pill);
  padding: 4px 12px; cursor: pointer; }
.shelf-row .sr-dots:hover { filter: brightness(1.08); }
.shelf-row .sr-menu {
  display: none; position: absolute; top: calc(100% - 4px); right: 8px; z-index: 30;
  flex-direction: column; gap: 2px; padding: 6px; min-width: 150px;
  background: var(--card-bg); border: var(--bd); border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--inset-hi);
}
.shelf-row .sr-menu.open { display: flex; }
.shelf-row .sr-menu button {
  text-align: left; font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--txt); background: none; border: none; padding: 8px 10px;
  border-radius: var(--r-pill); cursor: pointer;
}
.shelf-row .sr-menu button:hover { background: var(--chip-bg); }
.shelf-row.new { justify-content: center; border-style: dashed; box-shadow: none;
  font-size: 13px; font-weight: 700; color: var(--sub); }
.shelf-row.add-word { cursor: default; }
.stage-custom-note { font-size: 13px; color: var(--muted); padding: 2px 4px 0; line-height: 1.6; }
.cp-note { font-size: 13px; color: var(--muted); padding: 6px 4px 0; line-height: 1.6; }
.imp-status { font-size: 13px; color: var(--hint); margin-top: 8px; min-height: 18px; }

/* ── 关卡试炼区域切换（scene2 C2：一行「今日关卡」+ 三段式下拉，默认收起） ── */
.tr-region-wrap { position: relative; }
.tr-region-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rg-cur { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rg-cur .rg-label { font-size: 13px; color: var(--muted); }
.rg-cur b { font-family: var(--px-font); font-size: 14px; color: var(--title-ink); }
.tr-region-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: min(320px, 100%); display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card-bg); border: var(--bd); border-radius: var(--r-card);
  box-shadow: var(--sh-card), var(--inset-hi);
}
.tr-region-menu .rg-sec { font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 10px 2px; }
.tr-region-menu .rg-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  text-align: left; font-family: var(--font-body); font-size: 13px; font-weight: 800;
  color: var(--txt); background: none; border: none; padding: 8px 10px;
  border-radius: var(--r-pill); cursor: pointer;
}
.tr-region-menu .rg-item:hover { background: var(--chip-bg); }
.tr-region-menu .rg-item.on { color: var(--hl-ink); }
.tr-region-menu .rg-item.locked { color: var(--muted); }
.tr-region-menu .rg-item .rg-st { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ── 准备卡压缩（scene2 C3：一行「今天 N 只」+ 大开始；概览/三档/规则收进 ⚙） ── */
.tr-prep { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.tr-prep-line { text-align: center; font-size: 15px; color: var(--txt); line-height: 1.9; }
.tr-prep-line b { color: var(--title-ink); font-size: 16px; }
.tr-gear { border-top: 1px dashed var(--line); padding-top: 8px; }
.tr-gear summary {
  cursor: pointer; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--sub); list-style: none; padding: 6px 0;
}
.tr-gear summary::-webkit-details-marker { display: none; }
.tr-gear[open] summary { margin-bottom: 8px; }
.tr-rules { font-size: 13px; color: var(--gold-dark); line-height: 1.8; text-align: center; margin-top: 8px; }

/* ── 词条图鉴行压缩（scene1 C7）：拼写+词性·释义两行，点主体进词根卡 ── */
.w-row .w-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.w-row .w-main .spelling { font-size: 15px; font-weight: 800; color: var(--title-ink); }
.w-row .w-main .meaning { font-size: 13px; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.w-row .w-pos { display: inline-block; font-size: 13px; font-weight: 700; color: var(--hl-ink);
  border: var(--bd); border-radius: var(--r-pill); padding: 1px 6px; margin-right: 6px; }

/* ── 手机竖屏：词根古树弹窗改全屏抽屉（内容多，弹窗窄读不动；scene 通用） ── */
@media (max-width: 600px) {
  dialog#word-dialog {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; inset: 0; border: none; border-radius: 0;
  }
  dialog#word-dialog .dlg-body { max-height: calc(100dvh - 130px); }
}

/* ── 开考范围管理（2026-10-03 scope-management spec：词卷阁总览区 + 逐词小开关 + 沙盘只读行）── */
.scope-panel { display: flex; flex-direction: column; gap: 10px; }
.scp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scp-num {
  font-family: var(--px-font); font-size: 24px; font-weight: 900;
  color: var(--title-ink); text-shadow: var(--ts);
}
.scp-lab { font-size: 12px; color: var(--muted); }
.scp-explain { font-size: 12px; color: var(--txt); line-height: 1.8; }   /* 四数解释行（2026-10-05 快筛重构） */
.scp-explain b { color: var(--title-ink); font-weight: 700; }
#scope-timer-fill { transition: width .2s linear; }
#scope-timer-fill.low { background: linear-gradient(90deg, #ff8a3a, #d43a1a); }
#scope-timer-num.low { color: #ff6a7a; }
.scp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.scp-note { font-size: 11px; color: var(--muted); line-height: 1.9; }
/* 逐词小开关（卷内词条行 / 浏览开考词共用）：ON = 随主题选中色 + 金✓，与书架开关同视觉语言 */
.scp-swtch {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--px-font); font-size: 11px; font-weight: 700;
  padding: 5px 8px; border: var(--bd); border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--muted); cursor: pointer;
  box-shadow: var(--sh-card);
}
.scp-swtch .sr-sbox { width: 12px; height: 12px; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 900; color: var(--gold-ink);
  background: var(--chip-bg); border: var(--bd-strong); }
.scp-swtch.on { background: var(--chip-on-bg); color: var(--chip-on-ink); box-shadow: var(--sh-btn); }
.scp-swtch.on .sr-sbox { background: var(--gold); }
.scp-swtch:active { transform: translate(1px, 1px); box-shadow: none; }
/* 已剔除词条行变暗（同「不考中」行语言） */
.w-row.scp-excl .w-main, .w-row.scp-excl .w-tags { opacity: .55; }