/* ===== WordCannon 词炮 — 护眼浅色主题（淡豆沙绿 × 暖米白 × 墨青灰） ===== */
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --ink: #37474f;        /* 主墨色（文字/线条） */
  --ink-soft: #607d8b;
  --dim: #8496a0;
  --blue: #5e81ac;       /* 黛蓝 */
  --blue-deep: #4f7099;
  --green: #6f9e6b;      /* 苔绿 */
  --green-soft: #8fbf7f;
  --honey: #c9963e;      /* 蜜黄 */
  --honey-deep: #b67f2e;
  --coral: #c9584a;      /* 珊瑚红 */
  --coral-soft: #e0a49a;
  --terra: #c97b5a;      /* 砂橘 */
  --violet: #8b7aa6;
  --bg-top: #e7f0e3;
  --bg-mid: #f0efe5;
  --bg-bot: #f6f1e6;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-border: rgba(55, 71, 79, 0.14);
  --line: rgba(55, 71, 79, 0.1);
  --shadow-soft: 0 10px 34px rgba(85, 105, 95, 0.16);
}
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-mid); overscroll-behavior: none; }
body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
}
#game { position: fixed; inset: 0; display: block; cursor: crosshair; touch-action: none; }
button, .opt { touch-action: manipulation; }
#game.hurt { animation: hurtWarp .15s ease; }
@keyframes hurtWarp {
  30% { transform: skewX(-1.4deg) scale(1.012); filter: saturate(1.2) brightness(1.02); }
  100% { transform: none; filter: none; }
}
.hidden { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ================= HUD ================= */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hudTop {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 18px;
}
#hudLeft { display: flex; flex-direction: column; gap: 4px; }
#scoreBox { display: flex; align-items: baseline; gap: 10px; }
.hudLabel { font-size: 11px; letter-spacing: 3px; color: var(--dim); }
#score {
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#combo { display: flex; align-items: baseline; gap: 8px; animation: comboPop .25s ease; }
#comboNum {
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 19px; font-weight: 800; color: var(--honey-deep);
}
@keyframes comboPop { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }

#chapterTag {
  font-size: 13px; letter-spacing: 2px; color: var(--ink-soft);
  padding-top: 4px;
}
/* 波次进度条（章节标签下方） */
#waveProgress {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  width: min(420px, 56vw); height: 6px; border-radius: 4px;
  background: rgba(55, 71, 79, 0.12); overflow: hidden;
}
#waveFill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--green-soft), var(--green));
  transition: width .3s ease;
}
#waveProgress.boss #waveFill { background: linear-gradient(90deg, var(--coral-soft), var(--coral)); }
.wpTick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(246, 243, 232, 0.95); }
.wpTick.bossTick { background: var(--coral); opacity: .55; }

#hudRight { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
#hearts { font-size: 21px; display: flex; gap: 4px; }
.heart {
  color: var(--coral);
  transition: all .3s; animation: heartBeat 1.4s ease-in-out infinite;
}
.heart:nth-child(2) { animation-delay: .2s; }
.heart:nth-child(3) { animation-delay: .4s; }
@keyframes heartBeat { 0%,100% { transform: scale(1); } 12% { transform: scale(1.16); } }
.heart.lost { color: rgba(55, 71, 79, 0.22); animation: none; transform: scale(.82); }
#pauseBtn {
  pointer-events: auto; background: rgba(255, 255, 255, 0.75); color: var(--ink);
  border: 1px solid var(--panel-border); border-radius: 8px;
  width: 34px; height: 34px; font-size: 15px; cursor: pointer;
}
#pauseBtn:hover { border-color: var(--blue); color: var(--blue); }

/* 波次横幅 */
#waveBanner {
  position: absolute; top: 24%; left: 0; right: 0; text-align: center;
  animation: bannerIn .5s cubic-bezier(.2,.9,.3,1.2);
}
#waveBannerTitle {
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 42px; font-weight: 800; letter-spacing: 8px; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 16px rgba(85, 105, 95, 0.28);
}
#waveBannerSub {
  font-size: 16px; letter-spacing: 4px; color: var(--terra); margin-top: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
#waveBanner.out { animation: bannerOut .4s ease forwards; }
@keyframes bannerIn { 0% { opacity: 0; transform: translateY(-30px) scale(.85); } 100% { opacity: 1; transform: none; } }
@keyframes bannerOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1.05); } }

/* 词义卡 */
#wordCard {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 14px 26px; text-align: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px); animation: cardIn .35s cubic-bezier(.2,.9,.3,1.25);
  max-width: 560px; pointer-events: auto;
}
#wordCard.out { animation: cardOut .3s ease forwards; }
@keyframes cardIn { 0% { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.8); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes cardOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
.wcRow { display: flex; align-items: center; justify-content: center; gap: 12px; }
#wcWord { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: 1px; }
#wcSpeak { background: none; border: none; font-size: 18px; cursor: pointer; opacity: .8; }
#wcSpeak:hover { opacity: 1; transform: scale(1.15); }
#wcPhonetic { font-size: 15px; color: var(--blue); font-style: italic; }
#wcMeaning { font-size: 17px; color: var(--terra); margin-top: 4px; }
#wcExample { font-size: 13px; color: var(--dim); margin-top: 5px; font-style: italic; }

/* 答案卡（答错后显示正确答案，按 R 关闭；在上方原位显示，句子怪会自动下滑让位） */
#answerCard {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid rgba(201, 88, 74, 0.35);
  border-left: 4px solid var(--coral);
  border-radius: 12px; padding: 10px 22px; text-align: center;
  box-shadow: var(--shadow-soft); pointer-events: auto; z-index: 6;
  max-width: 720px; animation: cardIn .3s ease;
}
#answerCard .acRow { display: flex; align-items: center; justify-content: center; gap: 12px; }
#answerCard .acTag { font-size: 11px; letter-spacing: 2px; color: var(--coral); font-weight: 700; }
#answerCard #acClose {
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--coral); background: rgba(201, 88, 74, 0.08);
  border: 1px solid rgba(201, 88, 74, 0.4); border-radius: 6px;
  padding: 2px 10px; cursor: pointer;
}
#answerCard #acClose:hover { background: rgba(201, 88, 74, 0.16); }
#acWord { font-size: 26px; font-weight: 800; color: var(--ink); margin-top: 4px; letter-spacing: 1px; }
#acWord.sentence { font-size: 22px; letter-spacing: 0; line-height: 1.5; }
#acMeaning { font-size: 15px; color: var(--terra); margin-top: 3px; }

/* 能量条（提示充能） */
#energyWrap { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#energyBar {
  width: 14px; height: 220px; border-radius: 8px; position: relative; overflow: hidden;
  background: rgba(55, 71, 79, 0.08); border: 1px solid rgba(55, 71, 79, 0.18);
}
#energyFill {
  position: absolute; bottom: 0; left: 0; right: 0; height: 0%;
  background: linear-gradient(to top, var(--green-soft), var(--blue));
  transition: height .25s;
}
#energyBar.full { box-shadow: 0 0 14px rgba(201, 150, 62, 0.55); border-color: var(--honey); }
#energyHint {
  writing-mode: vertical-lr; text-orientation: upright; letter-spacing: 4px;
  font-size: 13px; font-weight: 800; color: var(--honey-deep);
  animation: pulse .8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* 底部操作栏 */
#bottomBar { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; }
#keyTip { font-size: 12px; color: var(--dim); margin-bottom: 9px; letter-spacing: 1px; }
#keyTip b { color: var(--blue); }

/* J/K/L/; 中文选项卡（中间留出单词掉落通道） */
#optionRack {
  position: absolute; left: 50%; top: calc(50% - 118px); transform: translate(-50%, -50%);
  display: flex; flex-direction: row; gap: 10px; z-index: 5;
}
.rackGap { width: 130px; }
.opt {
  position: relative; min-width: 118px; max-width: 170px; height: 44px;
  border-radius: 11px; padding: 4px 10px 4px 36px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(55, 71, 79, 0.2);
  box-shadow: 0 3px 10px rgba(85, 105, 95, 0.1);
  display: flex; align-items: center;
  color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.15;
  cursor: pointer; transition: border-color .13s, opacity .25s, transform .25s;
  font-family: inherit; pointer-events: auto; text-align: left;
}
.opt .optKey {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(94, 129, 172, 0.12); border: 1px solid rgba(94, 129, 172, 0.5);
  color: var(--blue); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* 触屏模式：无键盘角标，文字居中 */
.opt.noKey { padding-left: 10px; justify-content: center; text-align: center; }
.opt:hover { border-color: var(--terra); }
.opt.fired { animation: optFired .18s ease; }
@keyframes optFired {
  0% { transform: scale(.94); border-color: var(--green); box-shadow: 0 0 0 4px rgba(111, 158, 107, 0.18); }
  100% { transform: scale(1); }
}
.opt.erred { animation: optErred .28s ease; }
@keyframes optErred {
  0% { transform: translateX(0); border-color: var(--coral); box-shadow: 0 0 0 4px rgba(201, 88, 74, 0.15); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
/* 提示排除的错误项：翻面淡出 */
.opt.cut { opacity: .22; transform: rotateY(72deg) scale(.96); border-style: dashed; pointer-events: none; }

/* 输入状态条（拼写模式） */
#inputStatus {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 22px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.88); border: 1px solid var(--panel-border);
  font-family: Consolas, "Segoe UI", monospace; font-size: 19px; letter-spacing: 3px;
  color: rgba(55, 71, 79, 0.35); transition: border-color .15s, box-shadow .15s;
}
#inputStatus b { color: var(--blue); }
#inputStatus .next { color: var(--ink); border-bottom: 2px solid var(--blue); padding-bottom: 1px; }
#inputStatus .wrongCh { color: var(--coral); text-decoration: line-through; }
#inputStatus .dim { font-size: 13px; letter-spacing: 1px; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--dim); }
#inputStatus .lockTag2 {
  font-size: 11px; letter-spacing: 2px; color: #fff; background: var(--blue);
  border-radius: 5px; padding: 2px 7px; font-family: "Segoe UI", sans-serif; font-weight: 700;
}
#inputStatus.err {
  border-color: var(--coral); box-shadow: 0 0 0 4px rgba(201, 88, 74, 0.12);
  animation: shakeX .2s ease;
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}

/* ================= 屏幕与面板 ================= */
.screen {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 10px 0; /* 小屏内容超高时可滚动（配 margin:auto 安全居中） */
  background: rgba(240, 240, 230, 0.62);
  backdrop-filter: blur(5px);
}
.menuInner { text-align: center; margin: auto; /* 内容高于视口时贴边滚动而非双向裁切 */ }
/* 菜单编排入场：LOGO → 主行动/复习卡/模式卡/工具行 依次浮现 */
.menuInner > * { animation: fadeUp .55s cubic-bezier(.2, .8, .3, 1) backwards; }
.menuInner > *:nth-child(2) { animation-delay: .08s; }
.menuInner > *:nth-child(3) { animation-delay: .16s; }
.menuMain > * { animation: fadeUp .5s cubic-bezier(.2, .8, .3, 1) backwards; }
.menuMain > *:nth-child(1) { animation-delay: .05s; }
.menuMain > *:nth-child(2) { animation-delay: .13s; }
.menuMain > *:nth-child(3) { animation-delay: .21s; }
.menuMain > *:nth-child(4) { animation-delay: .29s; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; } }

#logo { margin-bottom: 26px; }
#logoEn {
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 58px; font-weight: 800; letter-spacing: 8px; color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}
#logoEn span { color: var(--blue); }
#logoRule { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
#logoRule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(55, 71, 79, 0.3)); }
#logoRule i:last-child { transform: scaleX(-1); }
#logoRule b { font-size: 14px; letter-spacing: 5px; color: var(--terra); font-weight: 600; white-space: nowrap; }

/* 主菜单：主行动 + 模式卡 + 工具行 */
.menuMain { width: min(660px, 92vw); margin: 0 auto; display: flex; flex-direction: column; gap: 13px; }
.menuPrimary {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  font-family: inherit; cursor: pointer;
  border: 1.5px solid var(--blue); border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff; padding: 15px 20px;
  box-shadow: 0 10px 26px rgba(79, 112, 153, 0.32);
  transition: transform .18s, box-shadow .18s;
}
.menuPrimary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 112, 153, 0.42); }
.menuPrimary:active { transform: translateY(0); }
.mpIcon {
  font-size: 20px; width: 44px; height: 44px; flex: none;
  border-radius: 12px; background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.mpText { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mpText b { font-size: 19px; letter-spacing: 4px; }
.mpText small { font-size: 12px; opacity: 0.85; letter-spacing: 1px; }
.mpMeta {
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700;
  background: rgba(255, 255, 255, 0.16); border-radius: 9px; padding: 6px 11px;
}
/* 佩戴称号徽标（菜单 logo 下方，蜜黄小丸） */
.titleChip {
  display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 800;
  letter-spacing: 2px; color: var(--honey-deep);
  background: rgba(201, 150, 62, 0.14); border: 1px solid rgba(201, 150, 62, 0.45);
  border-radius: 999px; padding: 3px 14px;
}
/* 答案卡音标行 */
.acPh { font-size: 13px; color: var(--blue); font-family: Consolas, monospace; letter-spacing: 0.5px; }
/* 答案卡例句（含目标词高亮） */
.acEx { margin-top: 8px; font-size: 12.5px; line-height: 1.55; text-align: left; background: rgba(94, 129, 172, 0.08); border-radius: 9px; padding: 8px 12px; }
.acEx .en { color: var(--ink); }
.acEx .zh { color: var(--dim); margin-top: 2px; }
/* 新手引导实战态：面板收成顶部小条，战场可交互 */
#screen-tut.compact { background: transparent; backdrop-filter: none; pointer-events: none; align-items: flex-start; }
#screen-tut.compact .panel.tutPanel { pointer-events: auto; margin-top: 12px; padding: 12px 20px; max-width: 480px; }
/* 收藏高亮 */
#readStar.starred { color: var(--honey-deep); border-color: rgba(201, 150, 62, 0.55); background: rgba(201, 150, 62, 0.12); }
/* 我的列表：逐文件行（点行选用 · 🗑 删除单个文件） */
.readFiles { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; margin-top: 2px; }
.readFileEmpty { font-size: 11.5px; color: var(--dim); padding: 2px 2px 0; }
.readFileRow {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid rgba(55, 71, 79, 0.16); border-radius: 9px;
  background: rgba(255, 255, 255, 0.8); padding: 6px 12px;
  transition: border-color .15s, background .15s;
}
.readFileRow:hover { border-color: var(--blue); }
.readFileRow.cur { border-color: var(--green); background: rgba(111, 158, 107, 0.12); }
.readFileRow .rfName { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readFileRow .rfN { flex: none; font-size: 11.5px; font-weight: 700; color: var(--dim); }
.readFileRow .rfDel {
  flex: none; border: none; cursor: pointer; font-size: 13px; line-height: 1;
  background: rgba(55, 71, 79, 0.07); color: var(--dim); border-radius: 6px; padding: 3px 7px;
  font-family: inherit; transition: background .15s, color .15s;
}
.readFileRow .rfDel:hover { background: rgba(201, 88, 74, 0.14); color: var(--coral); }
/* 云同步状态行（未登录=仅本机提示 / 登录=多端同步提示） */
.readSync { font-size: 11.5px; color: var(--dim); padding: 2px 2px 0; line-height: 1.5; }
/* 每日任务卡可点进商店 */
.questCard { cursor: pointer; }
.modeGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* 今日复习卡（记忆曲线入口，蜜黄描边） */
.menuReview {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  font-family: inherit; cursor: pointer;
  border: 1.5px dashed rgba(201, 150, 62, 0.65); border-radius: 14px;
  background: rgba(255, 250, 238, 0.8); color: var(--ink);
  padding: 10px 18px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.menuReview:hover { transform: translateY(-2px); border-color: var(--honey); border-style: solid; box-shadow: 0 8px 20px rgba(201, 150, 62, 0.2); }
.menuReview:active { transform: translateY(0); }
.menuReview .mrIcon { font-size: 20px; width: 38px; height: 38px; flex: none; border-radius: 10px; background: rgba(201, 150, 62, 0.14); display: flex; align-items: center; justify-content: center; }
.menuReview .mrText { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.menuReview .mrText b { font-size: 15px; letter-spacing: 2px; }
.menuReview .mrText small { font-size: 11.5px; color: var(--dim); letter-spacing: 1px; }
.menuReview .mpMeta { font-size: 13px; font-weight: 800; color: var(--honey-deep); background: rgba(201, 150, 62, 0.12); border-radius: 8px; padding: 5px 10px; }
.streakTag { font-style: normal; font-size: 11px; color: var(--honey-deep); border: 1px solid rgba(201, 150, 62, 0.4); border-radius: 7px; padding: 1px 7px; margin-left: 6px; }
/* 中断恢复卡（继续上次战斗）：黛蓝变体 */
.resumeCard { border-style: solid; border-color: rgba(94, 129, 172, 0.5); background: rgba(243, 248, 253, 0.85); }
.resumeCard:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(94, 129, 172, 0.22); }
.resumeCard .mrIcon { background: rgba(94, 129, 172, 0.14); }
.resumeCard .mpMeta.ckGo { color: var(--blue-deep); background: rgba(94, 129, 172, 0.12); }
.resumeCard .ckClose {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(55, 71, 79, 0.08); color: var(--dim); font-size: 15px; line-height: 1;
  font-family: inherit; transition: background .15s, color .15s; padding: 0;
}
.resumeCard .ckClose:hover { background: rgba(201, 88, 74, 0.12); color: var(--coral); }
/* 每日任务卡（菜单）：军绿描边，任务行 + 进度条 + 金币徽标 */
.questCard {
  border: 1.5px solid rgba(111, 158, 107, 0.55); border-radius: 14px;
  background: rgba(243, 250, 240, 0.85); padding: 10px 16px 12px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.questCard .qcHead { display: flex; align-items: center; justify-content: space-between; }
.questCard .qcHead b { font-size: 13.5px; letter-spacing: 2px; color: var(--ink); }
.coinTag {
  font-style: normal; font-size: 12.5px; font-weight: 800; color: #8a6a1f;
  background: rgba(201, 150, 62, 0.16); border-radius: 8px; padding: 3px 10px;
  font-family: 'Orbitron', sans-serif; letter-spacing: 1px;
}
.questList { display: flex; flex-direction: column; gap: 6px; }
.questRow { display: flex; align-items: center; gap: 10px; }
.questRow .qIcon { flex: none; width: 24px; text-align: center; font-size: 15px; }
.questRow .qBody { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.questRow .qBody b { font-size: 12.5px; letter-spacing: 1px; color: var(--ink); text-align: left; }
.questRow .qBar { height: 5px; border-radius: 3px; background: rgba(55, 71, 79, 0.1); overflow: hidden; }
.questRow .qBar i { display: block; height: 100%; border-radius: 3px; background: var(--green, #6f9e6b); transition: width .4s; }
.questRow .qMeta { flex: none; font-size: 11.5px; font-weight: 700; color: var(--dim); display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.questRow .qMeta i { font-style: normal; color: #b67f2e; font-size: 10.5px; }
.questRow.done .qBody b { color: #6f9e6b; text-decoration: line-through; text-decoration-color: rgba(111, 158, 107, 0.5); }
.questRow.done .qBar i { background: #6f9e6b; }
/* 商店：金币购买开局增益 */
.shopList { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.shopItem {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid rgba(55, 71, 79, 0.16); border-radius: 13px;
  background: rgba(255, 255, 255, 0.85); padding: 12px 15px;
}
.shopItem .sIcon { flex: none; font-size: 24px; width: 42px; height: 42px; border-radius: 11px; background: rgba(201, 150, 62, 0.12); display: flex; align-items: center; justify-content: center; }
.shopItem .sBody { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shopItem .sBody b { font-size: 14.5px; letter-spacing: 1px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shopItem .sOwned { font-style: normal; font-size: 11px; font-weight: 700; color: var(--blue-deep); background: rgba(94, 129, 172, 0.13); border-radius: 6px; padding: 1px 7px; }
.shopItem .sBody small { font-size: 11.5px; color: var(--dim); letter-spacing: 0.5px; }
.shopItem .sBuy { flex: none; min-width: 84px; }
.shopItem .sBuy:disabled { opacity: 0.45; cursor: not-allowed; }
.modeCard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; font-family: inherit; cursor: pointer;
  background: rgba(255, 255, 255, 0.88); border: 1.5px solid rgba(55, 71, 79, 0.18);
  border-radius: 14px; padding: 14px 15px 12px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.modeCard:hover {
  transform: translateY(-3px); border-color: var(--cc, var(--blue));
  box-shadow: 0 10px 22px rgba(85, 105, 95, 0.16);
}
.modeCard:active { transform: translateY(-1px); }
.modeCard .mcIcon { font-size: 20px; line-height: 1; }
.modeCard .mcName { font-size: 16px; font-weight: 800; letter-spacing: 2px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modeCard .mcDesc { font-size: 11.5px; color: var(--dim); line-height: 1.55; min-height: 2.9em; }
.mcSlots { display: flex; gap: 4px; margin-top: 1px; }
.mcSlots i {
  font-family: Consolas, monospace; font-style: normal; font-size: 11px; font-weight: 800;
  color: transparent; border-bottom: 2px solid rgba(55, 71, 79, 0.3);
  min-width: 9px; text-align: center; line-height: 1.3;
  transition: color .25s, border-color .25s;
}
.modeCard:hover .mcSlots i { color: var(--cc, var(--blue)); border-bottom-color: transparent; }
.mcBest { font-size: 11px; color: var(--terra); letter-spacing: 1px; margin-top: 2px; }
.modeCard.locked { opacity: 0.55; pointer-events: none; filter: grayscale(0.35); }
.menuUtils { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 100%; }
.menuUtils .btn { min-width: 0; padding: 9px 20px; font-size: 13px; background: rgba(255, 255, 255, 0.72); }
@media (max-width: 660px) {
  .modeGrid { grid-template-columns: 1fr; }
  .modeCard .mcDesc { min-height: 0; }
}
.btn {
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 2px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.78));
  border: 1.5px solid rgba(55, 71, 79, 0.24); border-radius: 12px;
  padding: 12px 40px; min-width: 280px; cursor: pointer; transition: all .18s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(85, 105, 95, 0.1);
}
.btn:hover {
  border-color: var(--blue); color: var(--blue-deep); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(94, 129, 172, 0.24);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(85, 105, 95, 0.14); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-primary {
  border-color: var(--blue); color: #fff; font-weight: 700;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px rgba(79, 112, 153, 0.32);
}
.btn-primary:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(79, 112, 153, 0.42); }
.btn-danger { border-color: rgba(201, 88, 74, 0.5); color: var(--coral); }
.btn-danger:hover { border-color: var(--coral); color: var(--coral); box-shadow: 0 6px 16px rgba(201, 88, 74, 0.2); }
.btn.small { min-width: 0; padding: 8px 18px; font-size: 13px; }
.footTip { margin-top: 34px; font-size: 12px; color: var(--dim); letter-spacing: 2px; }
.lockTag, .countTag {
  font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-left: 6px;
  border: 1px solid rgba(55, 71, 79, 0.25); border-radius: 8px; padding: 1px 8px;
}
.countTag { color: var(--honey-deep); border-color: rgba(201, 150, 62, 0.45); }

/* 面板：纸面卡片——每屏主题色顶条（--pc）+ 双层柔和投影 */
.panel {
  --pc: var(--blue);
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 18px; padding: 24px 34px 28px; max-height: 88vh; overflow-y: auto;
  width: min(480px, 92vw); backdrop-filter: blur(10px);
  box-shadow: inset 0 3px 0 var(--pc), inset 0 -1px 0 rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(55, 71, 79, 0.05), 0 16px 40px rgba(85, 105, 95, 0.16);
  animation: fadeUp .35s ease;
  scrollbar-width: thin; scrollbar-color: rgba(55, 71, 79, 0.22) transparent;
}
.panel.wide { width: min(760px, 94vw); }
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: rgba(55, 71, 79, 0.2); border-radius: 4px; }
/* 面板标题：居中 + 两侧发丝线（与 LOGO/章节卡的墨线语言同源） */
.panelTitle {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 20px; font-weight: 800; letter-spacing: 6px; color: var(--ink);
  margin-bottom: 18px; white-space: nowrap;
}
.panelTitle::before, .panelTitle::after {
  content: ""; flex: 0 1 64px; min-width: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55, 71, 79, 0.4));
}
.panelTitle::after { transform: scaleX(-1); }
.subTitle { font-size: 14px; color: var(--dim); letter-spacing: 2px; margin: 14px 0 8px; }
.hint { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 12px; }
.hint code { color: var(--blue-deep); background: rgba(94, 129, 172, 0.1); padding: 1px 6px; border-radius: 5px; }
.panelBtns { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.panelBtns .btn { min-width: 0; flex: 1; padding: 10px 20px; }

/* 暂停 / 结算按钮列：整列等宽、随面板居中（宽面板下限宽，避免按钮过分宽） */
.menuBtns { display: flex; flex-direction: column; gap: 10px; margin: 20px auto 0; width: 100%; max-width: 420px; }
.menuBtns .btn { min-width: 0; width: 100%; padding: 13px 20px; }
.menuBtns .btn-primary { order: -1; } /* 主操作恒在首行 */

/* 各屏主题色顶条 */
#screen-chapters .panel, #screen-settings .panel { --pc: var(--blue-deep); }
#screen-import .panel { --pc: var(--violet); }
#screen-wrongbook .panel { --pc: var(--coral); }
#screen-help .panel { --pc: var(--ink-soft); }
#screen-stats .panel { --pc: var(--green); }
#screen-ach .panel, #screen-tut .panel, #screen-book .panel { --pc: var(--honey); }

/* 暂停：窄卡 + 居中排版（黛蓝顶条） */
#screen-pause .panel { width: min(420px, 92vw); text-align: center; }
#screen-pause .hint { margin-bottom: 2px; }

/* 结算：蜜黄顶条 */
#screen-result .panel { --pc: var(--honey); }
#screen-result .subTitle { text-align: center; }

/* 章节列表 */
.chapterCard {
  border: 1px solid rgba(55, 71, 79, 0.16); border-left: 3px solid var(--cc, var(--blue));
  border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.65);
  transition: all .2s;
}
.chapterCard:hover { border-color: var(--cc, var(--blue)); box-shadow: 0 6px 18px rgba(85, 105, 95, 0.15); }
.chapterHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chapterName { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: 2px; }
.chapterName::before { content: "◆ "; color: var(--cc, var(--blue)); }
.chapterMeta { font-size: 12px; color: var(--dim); }
.levelRow { display: flex; gap: 10px; flex-wrap: wrap; }
.levelPill {
  min-width: 58px; padding: 8px 6px; text-align: center; border-radius: 10px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(55, 71, 79, 0.2);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
  font-family: inherit;
}
.levelPill small { display: block; font-size: 10px; color: var(--dim); font-weight: 400; margin-top: 2px; }
.levelPill:hover { border-color: var(--cc, var(--blue)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(85, 105, 95, 0.18); }
.levelPill.done { border-color: rgba(111, 158, 107, 0.55); color: var(--green); }
.levelPill.locked { opacity: .38; cursor: not-allowed; }
.levelPill.locked:hover { transform: none; box-shadow: none; border-color: rgba(55, 71, 79, 0.2); }
.levelPill.more { border-style: dashed; color: var(--dim); background: rgba(255, 255, 255, 0.45); }
.levelPill.more:hover { border-color: var(--cc, var(--blue)); }
.deckDelete { background: none; border: none; color: var(--dim); font-size: 15px; cursor: pointer; }
.deckDelete:hover { color: var(--coral); }

/* 设置 */
.settingRow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.settingRow > label { flex: none; white-space: nowrap; font-size: 14px; }
.settingRow > select, .settingRow > input { min-width: 0; }
.neonSelect {
  font-family: inherit; background: #fff; color: var(--ink);
  border: 1px solid rgba(55, 71, 79, 0.28); border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer;
}
.neonRange { accent-color: var(--blue); width: 160px; cursor: pointer; }
input[type="checkbox"].neonCheck { width: 20px; height: 20px; accent-color: var(--blue); cursor: pointer; }

/* 导入 */
.importRow { display: flex; gap: 10px; margin-bottom: 12px; }
.neonTextarea {
  width: 100%; height: 130px; resize: vertical; font-family: Consolas, monospace; font-size: 13px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); border: 1px solid rgba(55, 71, 79, 0.24);
  border-radius: 10px; padding: 10px 12px; outline: none; margin-bottom: 12px; user-select: text;
}
.neonTextarea:focus { border-color: var(--blue); }
.neonInput {
  flex: 1; font-family: inherit; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  border: 1px solid rgba(55, 71, 79, 0.24); border-radius: 10px; padding: 10px 14px; font-size: 14px; outline: none;
}
.neonInput:focus { border-color: var(--blue); }
.fileInput { color: var(--dim); font-size: 13px; flex: 1; }
.fileInput::file-selector-button {
  font-family: inherit; background: rgba(94, 129, 172, 0.1); color: var(--blue-deep);
  border: 1px solid rgba(94, 129, 172, 0.4); border-radius: 8px; padding: 7px 14px; margin-right: 10px; cursor: pointer;
}
#importStats { font-size: 14px; color: var(--green); margin-bottom: 10px; }
#importTable { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; margin-bottom: 12px; }
#importTable .impRow {
  display: flex; gap: 14px; font-size: 13px; padding: 5px 10px;
  background: rgba(255, 255, 255, 0.7); border-radius: 7px;
}
#importTable .impRow b { color: var(--blue-deep); min-width: 110px; }
#importTable .impRow span { color: var(--terra); }
#myDecks { margin-top: 14px; }
.myDeckRow {
  display: flex; justify-content: space-between; align-items: center; font-size: 13px;
  padding: 8px 12px; border: 1px dashed rgba(139, 122, 166, 0.5); border-radius: 10px; margin-bottom: 6px; color: var(--violet);
}

/* 错词本 */
#wrongList { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 6px; }
.wrongChip {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(201, 88, 74, 0.06); border: 1px solid rgba(201, 88, 74, 0.22);
  border-radius: 10px; padding: 8px 14px; font-size: 14px;
}
.wrongChip b { color: var(--coral); font-size: 15px; min-width: 120px; }
.wrongChip span { color: var(--terra); flex: 1; }
.wrongChip .wcount { color: var(--dim); font-size: 12px; margin-left: 10px; }
.emptyTip { text-align: center; color: var(--dim); padding: 30px 0; font-size: 14px; letter-spacing: 2px; }

/* 帮助 */
.helpBlock { margin-bottom: 14px; padding: 12px 16px; background: rgba(255, 255, 255, 0.72); border-radius: 12px; border-left: 3px solid var(--blue); }
.helpBlock h3 { font-size: 15px; color: var(--blue-deep); margin-bottom: 6px; letter-spacing: 2px; }
.helpBlock h3::before { content: "◆ "; color: var(--honey); font-size: 11px; vertical-align: 1px; }
.helpBlock p { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); }
.helpBlock b { color: var(--honey-deep); }
.keyTable { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.keyTable td { padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.keyTable tr:nth-child(even) td { background: rgba(255, 255, 255, 0.55); }
.keyTable tr:last-child td { border-bottom: none; }
.keyTable td:first-child { color: var(--blue-deep); font-weight: 700; width: 40%; }

/* 结算 */
.bestTag {
  text-align: center; color: var(--honey-deep); font-weight: 800; letter-spacing: 3px;
  margin-bottom: 10px; animation: pulse 1s infinite;
}
/* 通关星级（与选关页同一阈值：≥1500 三星 · ≥800 两星） */
.resultStars {
  text-align: center; font-size: 24px; letter-spacing: 10px; text-indent: 10px;
  color: var(--honey); margin: 0 0 8px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(201, 150, 62, 0.35);
}
.resultStars .off { color: rgba(55, 71, 79, 0.2); text-shadow: none; }
#resultStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 6px; }
.statBox {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 8px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.statBox .statVal { font-family: 'Orbitron', 'Segoe UI', sans-serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.statBox .statLabel { font-size: 11px; color: var(--dim); letter-spacing: 2px; margin-top: 4px; }
/* 结算六格逐项分色：得分蜜黄 / 连击砂橘 / 命中苔绿 / 消灭黛蓝 / 手速紫 / 提示灰 */
#resultStats .statBox:nth-child(1) .statVal { color: var(--honey-deep); }
#resultStats .statBox:nth-child(2) .statVal { color: var(--terra); }
#resultStats .statBox:nth-child(3) .statVal { color: var(--green); }
#resultStats .statBox:nth-child(4) .statVal { color: var(--blue-deep); }
#resultStats .statBox:nth-child(5) .statVal { color: var(--violet); }
#resultStats .statBox:nth-child(6) .statVal { color: var(--dim); }
/* 结算六格逐格入场 */
#resultStats .statBox { animation: fadeUp .4s ease backwards; }
#resultStats .statBox:nth-child(2) { animation-delay: .06s; }
#resultStats .statBox:nth-child(3) { animation-delay: .12s; }
#resultStats .statBox:nth-child(4) { animation-delay: .18s; }
#resultStats .statBox:nth-child(5) { animation-delay: .24s; }
#resultStats .statBox:nth-child(6) { animation-delay: .3s; }
#resultWrong { display: flex; flex-wrap: wrap; gap: 8px; }
.wrongMini {
  background: rgba(201, 88, 74, 0.07); border: 1px solid rgba(201, 88, 74, 0.26); border-radius: 9px;
  padding: 6px 12px; font-size: 13px;
}
.wrongMini b { color: var(--coral); margin-right: 8px; }
.wrongMini span { color: var(--terra); }

/* 暂停页本关错词速览 */
.pauseWrong {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
  margin: 2px 0 0; padding: 8px 0 2px; border-top: 1px dashed rgba(55, 71, 79, 0.14);
}
.pauseWrong .pwTitle {
  width: 100%; font-size: 12px; color: var(--coral); letter-spacing: 2px; margin-bottom: 2px;
}
.pauseWrong .wrongMini { padding: 4px 10px; font-size: 12px; }
.pauseWrong .pwMore { color: var(--dim); border-style: dashed; }

/* 学习报告 */
.statsSummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.statsHeat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; margin-bottom: 4px; }
.heatCell { aspect-ratio: 1; border-radius: 4px; min-height: 14px; }
.chMastery { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.chMastery .cmName { color: var(--cc, var(--ink)); font-weight: 700; width: 90px; flex: none; }
.chMastery .cmName::before { content: "◆ "; opacity: .7; }
.chMastery .cmBar { flex: 1; height: 9px; border-radius: 5px; background: rgba(55, 71, 79, 0.08); overflow: hidden; }
.chMastery .cmBar i { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.chMastery .cmMeta { color: var(--dim); width: 150px; text-align: right; flex: none; }

/* 成就墙 */
.achGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.achCard {
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--panel-border);
  border-radius: 12px; padding: 12px 8px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.achCard .achIcon { font-size: 24px; }
.achCard b { font-size: 13px; color: var(--honey-deep); letter-spacing: 1px; }
.achCard small { font-size: 11px; color: var(--dim); line-height: 1.5; }
.achCard.locked { opacity: 0.45; filter: grayscale(0.8); }
@media (max-width: 660px) { .achGrid { grid-template-columns: repeat(2, 1fr); } }

/* 词书 */
.bookBar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.bookBar .neonInput { flex: 1; min-width: 140px; }
.bookStarOnly { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.bookStarOnly input { accent-color: var(--honey); }
.bookList { max-height: 52vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 5px; }
.bookRow {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  background: rgba(255, 255, 255, 0.72); border-radius: 9px; font-size: 14px;
}
.bookRow .bw { color: var(--blue-deep); min-width: 110px; }
.bookRow .bp { color: var(--dim); font-size: 12px; font-style: italic; min-width: 90px; }
.bookRow .bm { color: var(--terra); flex: 1; }
.bookBtn { background: none; border: none; font-size: 16px; cursor: pointer; opacity: .7; }
.bookBtn:hover { opacity: 1; transform: scale(1.15); }
.bookBtn.star.on { color: var(--honey-deep); opacity: 1; }

/* 新手引导 */
.tutPanel { text-align: center; }
.tutBody { font-size: 16px; line-height: 2; color: var(--ink-soft); padding: 10px 0 4px; }
.tutBody b { color: var(--honey-deep); }
.tutHint { margin-top: 14px; font-size: 12px; color: var(--dim); letter-spacing: 2px; animation: pulse 1.2s ease-in-out infinite; }

/* 道具提示（能量条下方竖排改横排小字） */
#powerTip {
  writing-mode: vertical-lr; text-orientation: mixed; letter-spacing: 2px;
  font-size: 11px; font-weight: 700; color: rgba(55, 71, 79, 0.35);
  transition: color .2s; white-space: nowrap;
}
#powerTip.ready { color: var(--honey-deep); }

/* 关卡星级 */
.pillStars { font-style: normal; color: var(--honey); letter-spacing: 1px; margin-right: 2px; }

/* Toast */
#toast {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 11px 26px; font-size: 14px; z-index: 50; color: var(--ink);
  box-shadow: var(--shadow-soft); animation: cardIn .3s ease; pointer-events: none;
}

/* 章节色通过 CSS 变量 --cc 注入 */

/* ================= 移动端适配（手机/平板） ================= */
/* 触屏虚拟键盘：QWERTY 三行 + 功能行，仅粗指针或触屏模式显示 */
#touchPad {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: none; flex-direction: column; gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(240, 239, 229, 0.94); backdrop-filter: blur(6px);
  touch-action: manipulation;
}
#touchPad:not(.hidden) { display: flex; }
#touchPad .tpRow { display: flex; gap: 4px; }
#touchPad .tpRow:nth-child(2) { padding: 0 5vw; }
#touchPad .tpRow:nth-child(3) { padding: 0 12vw; }
#touchPad .tpKey {
  flex: 1; font-family: Consolas, monospace; font-size: 16px; font-weight: 700;
  padding: 11px 0; border-radius: 9px; border: 1px solid rgba(55, 71, 79, 0.22);
  background: linear-gradient(180deg, #ffffff, rgba(250, 250, 244, 0.85)); color: var(--ink); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(85, 105, 95, 0.14);
  transition: transform .08s, box-shadow .08s;
}
#touchPad .tpKey:active {
  background: var(--blue); color: #fff; transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}
#touchPad .tpRow:nth-child(3) .tpKey { flex: 1.35; }
#touchPad .tpKey.wide { flex: 2.4; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }


@media (max-width: 700px) {
  /* HUD 紧凑化 + 刘海安全区 */
  #hudTop { padding: calc(10px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); }
  #score { font-size: 20px; }
  .hudLabel { font-size: 9px; letter-spacing: 2px; }
  #comboNum { font-size: 14px; }
  #chapterTag { font-size: 10px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 6px; }
  #hearts { font-size: 16px; gap: 2px; }
  #pauseBtn { width: 44px; height: 44px; font-size: 17px; }
  #waveBannerTitle { font-size: 26px; letter-spacing: 4px; }
  #waveBannerSub { font-size: 12px; letter-spacing: 2px; }
  #waveProgress { width: 60vw; top: 38px; }
  /* 卡片 */
  #wordCard { padding: 10px 16px; max-width: 92vw; }
  #wcWord { font-size: 22px; }
  #wcMeaning { font-size: 14px; }
  #wordCard .wcRow { flex-wrap: wrap; row-gap: 2px; }
  #wcPhonetic { font-size: 13px; }
  #answerCard { max-width: 92vw; padding: 8px 14px; }
  #acWord { font-size: 17px; }
  #acWord.sentence { font-size: 14px; }
  #acMeaning { font-size: 13px; }
  #answerCard .acRow { flex-wrap: wrap; row-gap: 6px; }
  #answerCard .acTag { white-space: nowrap; }
  #answerCard #acClose { white-space: nowrap; padding: 5px 12px; }
  /* 词义选项 2×2 */
  #optionRack { flex-wrap: wrap; width: min(94vw, 440px); top: calc(50% - 108px); gap: 8px; }
  #optionRack .rackGap { display: none; }
  .opt { flex: 1 1 45%; min-width: 0; max-width: none; min-height: 50px; max-height: 64px; height: auto; font-size: 12.5px; line-height: 1.25; padding: 6px 8px 6px 34px; overflow: hidden; display: flex; align-items: center; }
  /* 能量条与道具提示 */
  /* 底栏 */
  #keyTip { font-size: 10.5px; margin-bottom: 6px; }
  #inputStatus { font-size: 15px; padding: 5px 14px; min-height: 34px; }
  /* 报告/结算单列化 */
  .statsSummary, #resultStats { grid-template-columns: repeat(2, 1fr); }
  .chMastery .cmMeta { width: auto; }
  /* 小屏按钮允许收缩，行内组合（输入+按钮）可换行 */
  .btn { min-width: 0; }
  /* 按钮组两列换行：四五个按钮挤一行会被压成一字一行竖排 */
  .panelBtns .btn { flex: 1 1 44%; white-space: nowrap; padding: 11px 8px; font-size: 14px; letter-spacing: 1px; }
  /* 词书行：压缩词/音标列宽，给释义让位 */
  .bookRow { gap: 8px; padding: 7px 9px; }
  .bookRow .bw { min-width: 70px; }
  .bookRow .bp { min-width: 0; flex-shrink: 1; }
  .bookRow .bm { font-size: 13px; text-align: right; }
  .importRow, .bookBar { flex-wrap: wrap; }
  /* LOGO 收缩：WORDCANNON 58px+8px 字距在竖屏撑到 579px */
  #logoEn { font-size: clamp(26px, 8.6vw, 44px); letter-spacing: 0.12em; }
  #logo { margin-bottom: 18px; }
  #logoRule b { font-size: 12px; letter-spacing: 3px; }
  .footTip { max-width: 92vw; margin-left: auto; margin-right: auto; line-height: 1.8; }
}

/* 紧凑能量条：窄屏 或 矮屏（横屏手机高 ~390px，桌面布局的能量条会穿顶压住暂停钮） */
@media (max-width: 700px), (max-height: 620px) {
  #energyWrap { right: 8px; top: auto; bottom: 100px; transform: none; }
  #energyBar { width: 10px; height: 118px; }
  #energyHint { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: 1px; font-size: 10px; }
  #powerTip { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: 0; font-size: 9px; max-width: 84px; white-space: normal; text-align: center; }
  /* 触屏键盘弹出时能量条/底栏上移避让 */
  body.padOn #energyWrap { bottom: 185px; }
  body.padOn #bottomBar { bottom: calc(var(--padH, 185px) + 10px); }
}

/* 竖屏手机精修：左右两列选项卡给怪物让出中央掉落通道，悬浮件全部避开 */
@media (orientation: portrait) and (max-width: 700px) {
  /* 选项卡：左右两列 + 中央 104px 通道（怪物与单词文字从中坠落，不再被卡片遮住） */
  #optionRack {
    top: 42%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 104px;
    row-gap: 10px;
    width: min(96vw, 420px);
  }
  #optionRack .opt { flex: none; width: 100%; }
  /* 词卡/答案卡上移，波次横幅上移 */
  #wordCard, #answerCard { top: 10%; }
  #waveBanner { top: 20%; }
  /* 能量条：右上暂停钮下方（怪物只走中央通道，右缘绝对安全），不再占用底部选项区；
     键盘弹出也不影响它（顶部锚定，padOn 的 bottom 避让规则在此关闭，防止 top+bottom 双约束拉伸） */
  #energyWrap { top: 64px; bottom: auto; right: 8px; transform: none; }
  body.padOn #energyWrap { top: 64px; bottom: auto; }
  /* 道具文字提示：竖屏下挤成两三行还溢出/压住句子船，而触屏键盘功能行已有 1❄/2✕2/3♥ 按钮，纯冗余 */
  #powerTip { display: none; }
  /* 底部只留炮塔与选项区：冗余按键提示隐藏（教学已覆盖），输入进度条仍随键盘避让 */
  #keyTip { display: none; }
  /* 模式卡行式排版：图标徽章左置，文字右侧成列，紧凑精致 */
  .modeCard { display: grid; grid-template-columns: 44px 1fr; column-gap: 13px; row-gap: 3px; align-items: center; padding: 13px 15px; }
  .modeCard .mcIcon {
    grid-row: 1 / -1; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
    background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(55, 71, 79, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
  .modeCard .mcName, .modeCard .mcDesc, .modeCard .mcSlots, .modeCard .mcBest { grid-column: 2; }
  .modeCard .mcDesc { min-height: 0; }
  .modeCard .mcName { align-self: end; }
  .modeCard .mcDesc { align-self: start; }
}

/* 全局滚动条（覆盖层屏用） */
.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-thumb {
  background: rgba(55, 71, 79, 0.16); border-radius: 5px;
  border: 3px solid transparent; background-clip: content-box;
}
.screen::-webkit-scrollbar-thumb:hover { background-color: rgba(55, 71, 79, 0.28); }

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* 小屏 GPU 降档：backdrop 毛玻璃减薄（低端安卓全屏模糊是界面掉帧主嫌疑） */
@media (max-width: 700px) {
  .screen { backdrop-filter: blur(3px); }
}

/* ================= 单词详情卡（词书/结算点词弹出） ================= */
#wordDetail {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(240, 240, 230, 0.55); backdrop-filter: blur(4px);
}
#wordDetail.hidden { display: none; }
.wdCard {
  position: relative; width: min(430px, 94vw); max-height: 86vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px;
  padding: 22px 26px 20px; text-align: center;
  box-shadow: inset 0 3px 0 var(--terra), inset 0 -1px 0 rgba(255, 255, 255, 0.75),
    0 16px 40px rgba(85, 105, 95, 0.2);
  animation: fadeUp .3s cubic-bezier(.2, .8, .3, 1);
}
.wdClose {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px;
  border: none; border-radius: 9px; background: rgba(55, 71, 79, 0.08);
  color: var(--dim); font-size: 16px; cursor: pointer; font-family: inherit; line-height: 1;
}
.wdClose:hover { background: rgba(201, 88, 74, 0.12); color: var(--coral); }
.wdWordRow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wdWord { font-family: 'Orbitron', 'Segoe UI', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: 2px; color: var(--ink); }
.wdBtn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(55, 71, 79, 0.18);
  background: rgba(255, 255, 255, 0.8); cursor: pointer; font-size: 16px; line-height: 1;
  transition: transform .15s, border-color .15s; font-family: inherit;
}
.wdBtn:hover { transform: translateY(-2px); border-color: var(--blue); }
.wdBtn.on { color: var(--honey-deep); border-color: rgba(201, 150, 62, 0.5); }
.wdPh { font-size: 14px; color: var(--blue-deep); margin-top: 4px; min-height: 1.2em; }
.wdMeaning { font-size: 16px; color: var(--terra); margin-top: 6px; letter-spacing: 1px; }
.wdExample {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.62); border: 1px dashed rgba(55, 71, 79, 0.16);
}
.wdExample .en { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; font-style: italic; }
.wdExample .en mark { background: rgba(201, 150, 62, 0.18); color: var(--honey-deep); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.wdExample .zh { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
.wdChips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
.wdChip {
  font-size: 11.5px; letter-spacing: 1px; border-radius: 8px; padding: 3px 10px;
  border: 1px solid rgba(55, 71, 79, 0.2); color: var(--dim); background: rgba(255, 255, 255, 0.6);
}
.wdChip.ok { color: var(--green); border-color: rgba(111, 158, 107, 0.45); }
.wdChip.mid { color: var(--honey-deep); border-color: rgba(201, 150, 62, 0.45); }
.wdChip.bad { color: var(--coral); border-color: rgba(201, 88, 74, 0.4); }
.wdChip.info { color: var(--blue-deep); border-color: rgba(94, 129, 172, 0.4); }
.wdEmpty { font-size: 13px; color: var(--dim); }

/* 设置分组卡片 */
.setGroup {
  border: 1px solid var(--line); border-radius: 14px; padding: 2px 16px 10px;
  margin-bottom: 14px; background: rgba(255, 255, 255, 0.5);
}
.setGroup h4 {
  font-size: 12px; letter-spacing: 3px; color: var(--dim); font-weight: 700;
  margin: 10px 0 4px;
}

/* HUD 得分跳动 */
#score { display: inline-block; }
#score.bump { animation: scorePop .32s cubic-bezier(.2, .8, .3, 1.4); }
@keyframes scorePop { 35% { transform: scale(1.22); color: var(--honey-deep); } }

/* 词书行可点 */
.bookRow { cursor: pointer; }
.bookRow:hover { background: rgba(255, 255, 255, 0.95); }

/* 暂停页错词片可点（复读） */
.pauseWrong .wrongMini { cursor: pointer; transition: border-color .15s, transform .15s; }
.pauseWrong .wrongMini:hover { border-color: var(--coral); transform: translateY(-1px); }

/* 成就进度条（数据型成就未解锁时显示进度） */
.achBar {
  display: block; height: 6px; border-radius: 4px; margin-top: 6px;
  background: rgba(55, 71, 79, 0.1); overflow: hidden;
}
.achBar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--honey), var(--honey-deep));
  transition: width .4s ease;
}
.achProg { display: block; font-size: 10.5px; color: var(--honey-deep); margin-top: 3px; letter-spacing: 1px; }

/* 本周概览（学习报告） */
.statsWeek { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 4px; }
.wkBox {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 8px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.wkBox b { font-family: 'Orbitron', 'Segoe UI', sans-serif; font-size: 19px; color: var(--green); }
.wkBox small { display: block; font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-top: 3px; }
.wkBox.up b { color: var(--green); }
.wkBox.down b { color: var(--coral); }
.wkBox:last-child b { font-size: 15px; padding-top: 3px; }

/* 每日挑战打卡条 */
.statsDaily { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dayCell {
  aspect-ratio: 2.2/1; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 1px; color: rgba(55, 71, 79, 0.3);
  background: rgba(55, 71, 79, 0.05); border: 1px dashed rgba(55, 71, 79, 0.15);
}
.dayCell.done {
  color: var(--honey-deep); border: 1px solid rgba(201, 150, 62, 0.4);
  background: rgba(201, 150, 62, 0.1); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 听写重听喇叭 chip */
.rpSent {
  cursor: pointer; font-size: 13px; color: var(--honey-deep);
  border: 1px solid rgba(201, 150, 62, 0.45); border-radius: 7px; padding: 2px 9px;
  background: rgba(201, 150, 62, 0.08); transition: background .15s, transform .15s;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 1px;
}
.rpSent:hover { background: rgba(201, 150, 62, 0.18); transform: translateY(-1px); }

/* 句子特训难度选择列表 */
.pickList { display: flex; flex-direction: column; gap: 9px; }
.pickGroup {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--dim);
  text-align: left; margin: 6px 2px -3px; padding-left: 4px;
  border-left: 3px solid var(--terra); line-height: 1.4;
}
.pickRow {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  font-family: inherit; cursor: pointer;
  border: 1.5px solid rgba(55, 71, 79, 0.18); border-radius: 13px;
  background: rgba(255, 255, 255, 0.8); color: var(--ink);
  padding: 12px 18px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pickRow:hover { transform: translateY(-2px); border-color: var(--terra); box-shadow: 0 8px 18px rgba(201, 123, 90, 0.18); }
.pickRow .prName { font-size: 15px; font-weight: 800; letter-spacing: 2px; min-width: 84px; }
.pickRow .prName::before { content: "◆ "; color: var(--terra); font-size: 10px; }
.pickRow .prDesc { flex: 1; font-size: 12px; color: var(--dim); line-height: 1.5; }
.pickRow .prCur { font-size: 12px; color: var(--green); font-weight: 700; letter-spacing: 1px; }

/* 搭配特训：词典总覆盖卡 + 各档进度条 */
.collocCov {
  border: 1.5px solid rgba(176, 115, 152, 0.35); border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 240, 246, 0.9));
  padding: 13px 18px; margin-bottom: 4px;
}
.collocCov .ccTitle { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--ink); margin-bottom: 8px; }
.collocCov .ccBar { height: 8px; border-radius: 5px; background: rgba(55, 71, 79, 0.1); overflow: hidden; }
.collocCov .ccBar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #b07398, #c9963e); transition: width .5s; }
.collocCov .ccNum { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-weight: 600; }
.collocCov .ccTip { font-size: 11px; color: var(--dim); margin-top: 3px; }
.pickRow.collocRow { flex-wrap: wrap; row-gap: 6px; }
.pickRow.collocRow .prName::before { color: #b07398; }
.pickRow.collocRow .prDesc { flex-basis: 100%; margin-left: 98px; margin-top: -4px; }
.pickRow.collocRow .prBar { flex: 1; min-width: 60px; height: 6px; border-radius: 4px; background: rgba(55, 71, 79, 0.1); overflow: hidden; }
.pickRow.collocRow .prBar i { display: block; height: 100%; background: #b07398; border-radius: 4px; }
.pickRow.collocRow .prPct { font-size: 11px; color: var(--dim); font-weight: 600; min-width: 86px; text-align: right; }

/* ===== 搭配课程：Duolingo 式先教后练 ===== */
.csWrap { display: flex; flex-direction: column; width: 100%; max-width: 720px; margin: 0 auto; height: 100%; padding: 10px; gap: 10px; }
.csPathList { display: flex; flex-direction: column; gap: 12px; overflow: auto; flex: 1; padding: 4px 2px; }
.csUnit { border-radius: 16px; border: 1.5px solid rgba(88,204,2,0.35); background: linear-gradient(165deg, #fff, #f2faec); padding: 12px 14px; }
.csUnit.done { border-color: rgba(88,204,2,0.8); background: linear-gradient(165deg, #f4ffe9, #e4f7d4); }
.csUnitHead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.csUnitHead b { font-size: 17px; font-weight: 800; color: var(--ink); }
.csUnitHead span { font-size: 12px; color: var(--dim); }
.csLessons { display: flex; gap: 10px; flex-wrap: wrap; }
.csNode {
  width: 52px; height: 52px; border-radius: 50%; font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: none; color: #fff; position: relative; transition: transform .15s;
}
.csNode small { font-size: 8px; font-weight: 700; opacity: .85; }
.csNode.done { background: #58cc02; box-shadow: 0 4px 0 #46a302; }
.csNode.cur { background: #ffb020; box-shadow: 0 4px 0 #d98e0a; animation: csBob 1.6s ease-in-out infinite; }
.csNode.lock { background: #c7cdd4; box-shadow: 0 4px 0 #a5adb5; cursor: not-allowed; }
.csNode:not(.lock):hover { transform: translateY(-3px); }
@keyframes csBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 课堂 */
.csLesson { position: relative; }
.csTop { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.csX { border: none; background: none; font-size: 18px; color: var(--dim); cursor: pointer; padding: 4px 8px; font-family: inherit; }
.csBar { flex: 1; height: 12px; border-radius: 8px; background: rgba(55,71,79,0.1); overflow: hidden; }
.csBar i { display: block; height: 100%; width: 0; border-radius: 8px; background: #58cc02; transition: width .4s; }
#csHearts { font-size: 13px; letter-spacing: 0; min-width: 70px; }
#csXp { font-size: 12px; font-weight: 800; color: #ffb020; min-width: 44px; text-align: right; }

#csIntro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 8px; flex: 1; justify-content: center; }
.csNewTag { font-size: 12px; font-weight: 800; color: #ff4b4b; letter-spacing: 3px; }
.ciFam { font-size: 13px; font-weight: 700; }
.ciPhrase { font-size: 34px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.25; }
.ciEx { font-size: 14px; color: var(--ink-soft); background: rgba(94,129,172,0.08); border-radius: 12px; padding: 10px 16px; max-width: 92%; text-align: center; }
.csSpeak { border: 2px solid #5e81ac; background: #fff; color: #5e81ac; border-radius: 12px; padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.csIntroFoot { display: flex; align-items: center; gap: 14px; }
#csIntroStep { font-size: 12px; color: var(--dim); font-weight: 700; }
.csGreen {
  background: #58cc02; color: #fff; border: none; border-radius: 14px; padding: 13px 30px;
  font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: 0 4px 0 #46a302;
  transition: transform .1s, box-shadow .1s; letter-spacing: 1px;
}
.csGreen:hover { filter: brightness(1.05); }
.csGreen:active { transform: translateY(3px); box-shadow: 0 1px 0 #46a302; }
.csGreen:disabled { background: #e5e5e5; box-shadow: 0 4px 0 #c9c9c9; cursor: not-allowed; }

#csBody { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 8px 2px; overflow: auto; }
.csQ { font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; }
.csQ b { color: #96587a; }
.csSent { font-size: 18px; color: var(--ink); text-align: center; line-height: 1.6; padding: 6px 8px; }
.csBlank { color: #ffb020; border-bottom: 3px solid #ffb020; padding: 0 14px; }
.csOpts { display: flex; flex-direction: column; gap: 9px; max-width: 480px; width: 100%; margin: 0 auto; }
.csOpt {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  border: 2px solid rgba(55,71,79,0.15); background: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left; transition: transform .1s, border-color .15s, background .15s;
}
.csOpt i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--dim); border: 1.5px solid rgba(55,71,79,0.25); border-radius: 6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.csOpt:hover { border-color: #a5edb3; background: #f7fef4; }
.csOpt.selOpt { border-color: #58cc02; background: #eefbe6; box-shadow: 0 0 0 3px rgba(88,204,2,0.2); }
.csOpt.rightOpt { border-color: #58cc02; background: #d9f7c8; }
.csOpt.wrongOpt { border-color: #ff4b4b; background: #ffe3e3; }
.csOpt.revealOpt { border-color: #ffb020; background: #fff3d6; }
.csBigSpeak {
  align-self: center; font-size: 42px; border: none; background: rgba(94,129,172,0.1);
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer; transition: transform .15s; font-family: inherit;
}
.csBigSpeak:hover { transform: scale(1.08); }
.csPairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: 560px; margin: 0 auto; width: 100%; }
.csCol { display: flex; flex-direction: column; gap: 8px; }
.csPair {
  padding: 11px 12px; border-radius: 12px; border: 2px solid rgba(55,71,79,0.15); background: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: all .15s;
}
.csPair.selPair { border-color: #58cc02; background: #eefbe6; }
.csPair.gone { visibility: hidden; }
.csPair.shake { animation: pShake .4s ease; border-color: #ff4b4b; }
.csSlots { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.csSlot {
  width: 40px; height: 48px; border-bottom: 3px solid rgba(55,71,79,0.3); border-radius: 8px;
  font-size: 22px; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-family: Consolas, monospace; background: rgba(255,255,255,0.6);
}
.csSlot.filled { border-color: #58cc02; background: #eefbe6; }
.csChips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.csChip {
  width: 44px; height: 48px; border-radius: 10px; border: 2px solid rgba(55,71,79,0.15); background: #fff;
  font-size: 20px; font-weight: 800; font-family: Consolas, monospace; color: var(--ink); cursor: pointer;
  box-shadow: 0 3px 0 rgba(55,71,79,0.12); transition: transform .1s, opacity .15s;
}
.csChip:hover { transform: translateY(-2px); }
.csChip.used { opacity: 0.15; pointer-events: none; box-shadow: none; }
.csDel { align-self: center; border: 2px solid rgba(55,71,79,0.2); background: #fff; border-radius: 10px; padding: 8px 22px; font-size: 16px; cursor: pointer; font-family: inherit; color: var(--dim); }

.csCheckRow { padding: 4px 0 6px; }
.csCheck { width: 100%; max-width: 480px; display: block; margin: 0 auto; }

.csFeedback {
  position: absolute; left: 10px; right: 10px; bottom: 64px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 16px; padding: 14px 18px; animation: cfUp .3s cubic-bezier(.3,1.3,.5,1);
}
.csFeedback.good { background: #d9f7c8; border: 2px solid #58cc02; }
.csFeedback.bad { background: #ffdfe0; border: 2px solid #ff4b4b; }
@keyframes cfUp { from { transform: translateY(30px); opacity: 0; } }
.cfText { display: flex; flex-direction: column; gap: 2px; }
.cfText b { font-size: 16px; color: var(--ink); }
.cfText span { font-size: 12px; color: var(--ink-soft); }
.cfBtn {
  background: #58cc02; border: none; color: #fff; font-family: inherit; font-weight: 800;
  border-radius: 12px; padding: 11px 22px; font-size: 15px; cursor: pointer; box-shadow: 0 4px 0 #46a302; flex: none;
}
.csFeedback.bad .cfBtn { background: #ff4b4b; box-shadow: 0 4px 0 #d33; }

.csDone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px; text-align: center; }
.csDoneIcon { font-size: 52px; animation: poIn .5s cubic-bezier(.3,1.4,.5,1); }
.csDone h3 { font-size: 24px; }
.csDoneXp { font-size: 20px; font-weight: 800; color: #ffb020; }
.csDoneStats { font-size: 13px; color: var(--ink-soft); }
.csDoneStats b { color: #58a700; }
.csDoneUnit { font-size: 12px; color: var(--dim); }
@media (max-width: 620px) {
  .csNode { width: 46px; height: 46px; }
  .ciPhrase { font-size: 26px; }
  .csSlot, .csChip { width: 34px; height: 42px; font-size: 17px; }
  .csFeedback { bottom: 60px; }
}

/* ===== 搭配大师：Connections 式分类（大瓷砖点选，双端适配） ===== */
#screen-collocpuzzle { align-items: stretch; justify-content: stretch; padding: 12px; }
.pzWrap { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 860px; margin: 0 auto; height: 100%; gap: 10px; }
.pzHeads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pzHead {
  --fc: #5e81ac;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 9px 6px; border-radius: 12px; cursor: pointer; font-family: inherit;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--fc) 12%, #fff));
  border: 2px solid var(--fc); transition: transform .15s, box-shadow .15s, background .3s;
  min-height: 62px;
}
.pzHead b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .3px; }
.pzHead span { font-size: 10px; color: var(--dim); }
.pzHead i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--fc); font-variant-numeric: tabular-nums; }
.pzHead:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--fc) 30%, transparent); }
.pzHead.done { background: linear-gradient(160deg, var(--fc), color-mix(in srgb, var(--fc) 70%, #000 6%)); }
.pzHead.done b, .pzHead.done span, .pzHead.done i { color: #fff; }
.pzHead.flash { animation: pzFlash .9s ease; }
@keyframes pzFlash {
  0%,100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--fc) 55%, transparent); transform: scale(1.06); }
}
.pzHead.no { animation: pShake .34s ease; border-color: #c9584a; }
.pzGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; flex: 1; align-content: start; overflow: auto; padding: 4px 2px; }
.pzGrid.cols4 { grid-template-columns: repeat(4, 1fr); }
.pzTile {
  min-height: 58px; border-radius: 12px; border: 1.5px solid rgba(55,71,79,0.18);
  background: linear-gradient(165deg, #fff, #f6f4f8);
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; box-shadow: 0 2px 6px rgba(55,71,79,0.07);
  transition: transform .15s, border-color .15s, box-shadow .15s, opacity .3s;
  word-break: break-word; padding: 6px 4px; line-height: 1.2;
}
.pzTile:hover { transform: translateY(-2px); border-color: #b07398; box-shadow: 0 6px 14px rgba(176,115,152,0.25); }
.pzTile.sel { border-color: #b07398; background: linear-gradient(165deg, #fff, #f7ecf3); box-shadow: 0 0 0 3px rgba(176,115,152,0.35); transform: scale(1.04); }
.pzTile.shake { animation: pShake .34s ease; border-color: #c9584a; color: #c9584a; }
.pzTrapReveal {
  grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--dim);
  padding: 14px 10px; border-radius: 12px; background: rgba(55,71,79,0.05);
  animation: poIn .4s ease;
}
.pzStars { font-size: 26px; letter-spacing: 4px; color: #c9963e; }
.pzStars .dimStar { opacity: .25; }
/* 浮字落在家族卡上方，不压瓷砖 */
.pzWrap .pairFloat { top: 11%; }
@media (max-width: 620px) {
  .pzHeads { grid-template-columns: repeat(2, 1fr); }
  .pzGrid, .pzGrid.cols4 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pzTile { min-height: 52px; font-size: 14px; }
  .pzHead b { font-size: 13px; }
}

/* ===== 弹弓搭配：随机词蛋弹射 ===== */
.shotWrap { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; height: 100%; gap: 8px; }
.shotBox { position: relative; flex: 1; min-height: 300px; border-radius: 16px; overflow: hidden; }
.shotBox canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.shotEggNow { font-size: 13px; color: var(--ink); font-weight: 700; }
.shotEggNow b { color: #96587a; font-size: 15px; }
.shotEggNow i { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 8px; }
#shotEggs { font-size: 13px; letter-spacing: 1px; }
#shotHeadChip { font-size: 12px; font-weight: 800; color: #c9963e; }

/* ===== 搭配对对碰：词块配对消除 ===== */
#screen-collocboard { align-items: stretch; justify-content: stretch; padding: 12px; }
.pairWrap { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; height: 100%; gap: 8px; }
.pairTop { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 6px; }
.pairInfo b { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.pairInfo span { font-size: 12px; color: var(--dim); margin-left: 10px; }
.pairScore { font-size: 22px; font-weight: 800; color: #b07398; font-variant-numeric: tabular-nums; }
.pairMeta { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.pairMeta span { font-size: 12px; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
#pairStrikes { letter-spacing: 1px; }
.pairComboBar { flex: 1; height: 7px; border-radius: 4px; background: rgba(55,71,79,0.1); overflow: hidden; }
.pairComboBar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #b07398, #c9963e); transition: width .4s; }
.pairBoard { position: relative; flex: 1; min-height: 300px; border-radius: 16px; background:
  linear-gradient(160deg, rgba(176,115,152,0.07), rgba(201,150,62,0.06));
  border: 1.5px solid rgba(176,115,152,0.25); overflow: hidden; }
.pTile {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 11px; border: 1.5px solid rgba(55,71,79,0.16); cursor: pointer;
  background: rgba(255,255,255,0.92); font-family: inherit;
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .15s, border-color .15s;
  box-shadow: 0 2px 6px rgba(55,71,79,0.08);
  padding: 2px; text-align: center;
}
.pTile .ptWord { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.15; word-break: break-word; max-width: 96%; }
.pTile .ptFam { font-size: 9px; color: var(--dim); border-radius: 5px; padding: 0 5px; line-height: 14px; background: rgba(55,71,79,0.07); }
.pTile.h { background: linear-gradient(150deg, #fff, #f7f2f6); border-color: rgba(176,115,152,0.5); }
.pTile.h .ptWord { font-weight: 800; }
.pTile.h .ptFam { background: rgba(176,115,152,0.14); color: #96587a; }
.pTile.p.fV { border-color: rgba(94,129,172,0.45); } .pTile.p.fV .ptFam { background: rgba(94,129,172,0.13); color: #46688f; }
.pTile.p.fA { border-color: rgba(111,158,107,0.45); } .pTile.p.fA .ptFam { background: rgba(111,158,107,0.14); color: #4d7a4a; }
.pTile.p.fD { border-color: rgba(201,119,90,0.45); } .pTile.p.fD .ptFam { background: rgba(201,119,90,0.13); color: #a05f3c; }
.pTile.p.fP { border-color: rgba(139,122,166,0.5); } .pTile.p.fP .ptFam { background: rgba(139,122,166,0.14); color: #6f5f92; }
.pTile.p.fN { border-color: rgba(201,150,62,0.5); } .pTile.p.fN .ptFam { background: rgba(201,150,62,0.15); color: #a1732a; }
.pTile:hover { box-shadow: 0 4px 12px rgba(55,71,79,0.16); }
.pTile.sel { border-color: #b07398; box-shadow: 0 0 0 3px rgba(176,115,152,0.35); transform: scale(1.06); z-index: 2; }
.pTile.matched { border-color: #c9963e; background: linear-gradient(150deg, #fff6dd, #ffe9b0); animation: pMatch .38s ease forwards; z-index: 3; }
@keyframes pMatch {
  0% { transform: scale(1); } 45% { transform: scale(1.18); }
  100% { transform: scale(0.1); opacity: 0; }
}
.pTile.shake { animation: pShake .34s ease; border-color: #c9584a; }
@keyframes pShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-1.5deg); } 45% { transform: translateX(5px) rotate(1.5deg); }
  70% { transform: translateX(-3px); }
}
.pTile.hintGlow { animation: pHint 0.6s ease-in-out 3; border-color: #c9963e; }
@keyframes pHint { 50% { box-shadow: 0 0 0 4px rgba(201,150,62,0.45); } }
.pairFloat {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%);
  font-size: 19px; font-weight: 800; color: #8a6d1f; white-space: nowrap; z-index: 9;
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,0.9);
  animation: pFloat 1.25s ease forwards; pointer-events: none;
}
@keyframes pFloat {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.85); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(1); }
}
.pairBtns { display: flex; gap: 10px; justify-content: center; padding: 2px 0 4px; }
#pairOverlay {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: rgba(46,58,64,0.34); backdrop-filter: blur(3px); border-radius: 16px;
}
#pairOverlay.hidden { display: none; }
.poPanel {
  background: rgba(255,255,255,0.97); border-radius: 18px; padding: 20px 24px; max-width: 92%;
  max-height: 88%; overflow: auto; box-shadow: 0 18px 44px rgba(46,58,64,0.3);
  display: flex; flex-direction: column; gap: 12px; text-align: center; animation: poIn .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes poIn { from { transform: scale(0.85); opacity: 0; } }
.poPanel h3 { font-size: 19px; color: var(--ink); }
.poBonus { font-size: 13px; color: #a1732a; font-weight: 700; }
.poStats { font-size: 13px; color: var(--ink-soft); }
.poStats b { color: #96587a; font-size: 15px; }
.poLearned { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; margin: 0 auto; }
.poLt { flex-basis: 100%; font-size: 11px; color: var(--dim); letter-spacing: 2px; }
.poChip {
  font-size: 12px; font-weight: 600; color: var(--ink); padding: 3px 10px;
  border-radius: 9px; background: rgba(176,115,152,0.12); border: 1px solid rgba(176,115,152,0.3);
}
.poBtns { display: flex; gap: 10px; justify-content: center; }

/* 登录提醒（结算页 / 设置页账号状态） */
.loginNudge {
  display: block; margin: 12px auto 2px; padding: 9px 16px; width: fit-content; max-width: 94%;
  font-size: 13px; letter-spacing: 1px; color: var(--honey-deep);
  border: 1px dashed rgba(201, 150, 62, 0.55); border-radius: 10px;
  background: rgba(255, 250, 238, 0.85); transition: transform .15s, box-shadow .15s;
}
.loginNudge:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(201, 150, 62, 0.2); }
.cloudStatus {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.6); padding: 8px 12px; margin-bottom: 10px;
}
.cloudStatus.ok { color: var(--green); border-color: rgba(111, 158, 107, 0.4); }
.cloudStatus a { color: var(--honey-deep); font-weight: 700; }

/* ===== 句子朗读（Edge TTS 播放器） ===== */
.readPanel { max-width: 560px; width: min(94vw, 560px); }
.readVoice { font-size: 11.5px; color: var(--dim); text-align: center; letter-spacing: 1px; margin-bottom: 12px; }
.readRow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.readRow label { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.readRow .neonSelect { flex: 0 1 auto; min-width: 0; }
.readCount { font-size: 11px; color: var(--dim); white-space: nowrap; }
.readFileBtn { cursor: pointer; display: inline-flex; align-items: center; user-select: none; }
.readHint { font-size: 11px; color: var(--dim); line-height: 1.7; }
.readNow {
  margin: 14px 0 10px; padding: 16px 18px; min-height: 108px;
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--panel-border);
  border-radius: 14px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.readLine { font-size: 17px; line-height: 1.55; color: var(--dim); transition: color .25s, transform .25s; transform-origin: left center; }
.readLine.readEn { color: var(--blue); opacity: .55; }
.readLine.on { color: var(--ink); opacity: 1; transform: scale(1.03); font-weight: 700; }
.readLine.on.readEn { color: var(--blue-deep); }
.readMeta { font-size: 11.5px; color: var(--dim); text-align: center; letter-spacing: 1px; margin-bottom: 10px; }
.readCtrl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.readCtrl .btn { min-width: 0; flex: 0 1 auto; padding: 11px 14px; }
.readCtrl .btn.btn-primary { flex: 1 1 120px; }

/* ===== AI 解释弹窗（朗读器） ===== */
#aiModal {
  position: fixed; inset: 0; z-index: 46;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(240, 240, 230, 0.55); backdrop-filter: blur(4px);
}
#aiModal.hidden { display: none; }
.aiCard {
  position: relative; width: min(430px, 94vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: inset 0 3px 0 var(--terra), inset 0 -1px 0 rgba(255, 255, 255, 0.75),
    0 16px 40px rgba(85, 105, 95, 0.2);
  animation: fadeUp .3s cubic-bezier(.2, .8, .3, 1);
}
.aiHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.aiTitle { font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--ink); }
.aiBody {
  flex: 1 1 auto; min-height: 160px; max-height: 52vh; overflow-y: auto;
  border: 1px dashed rgba(55, 71, 79, 0.16); border-radius: 12px;
  background: rgba(255, 255, 255, 0.62); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.aiMsg { font-size: 13.5px; line-height: 1.75; border-radius: 12px; padding: 9px 12px; word-break: break-word; }
.aiMsg.bot { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(55, 71, 79, 0.12); color: var(--ink-soft); }
.aiMsg.bot b { color: var(--terra); }
.aiMsg.me { background: rgba(74, 134, 176, 0.12); border: 1px solid rgba(74, 134, 176, 0.25); color: var(--blue-deep); align-self: flex-end; }
.aiMsg.loading { color: var(--dim); font-style: italic; }
.aiEmpty { font-size: 12.5px; color: var(--dim); text-align: center; line-height: 2; margin: auto; }
.aiFoot { display: flex; gap: 8px; margin-top: 12px; }
.aiInput {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 13.5px;
  border: 1px solid rgba(55, 71, 79, 0.22); border-radius: 10px;
  padding: 10px 12px; background: rgba(255, 255, 255, 0.85); color: var(--ink); outline: none;
}
.aiInput:focus { border-color: var(--blue); }
.aiTip { font-size: 10.5px; color: var(--dim); text-align: center; margin-top: 8px; letter-spacing: 1px; }
@media (max-width: 700px) {
  .readPanel { width: 94vw; }
  .readLine { font-size: 15.5px; }
  .readNow { padding: 13px 14px; min-height: 96px; }
  .readCtrl .btn { padding: 11px 12px; font-size: 13px; }
  .aiCard { width: 96vw; }
}