/* ============================================================
   读题小老师 · 字灵阁
   视觉：夜色 + 墨金 —— 先像游戏，再谈学习
   汉字仍用楷体（与课本字形一致）
   ============================================================ */

/* ============================================================
   v4.0：内置楷体子集（LXGW WenKai · OFL-1.1，tools/build_font_subset.py 生成）
   只收课程字与高频题干字（958 字 / 198KB），换字后重跑构建脚本。
   ============================================================ */
@font-face {
  font-family: "DutiKai";
  src: url("../assets/fonts/duti-kaiti-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-0: #100E18;
  --bg-1: #1A1630;
  --bg-2: #241C3A;
  --panel: rgba(255, 255, 255, .065);
  --panel-2: rgba(255, 255, 255, .10);
  --line: rgba(255, 255, 255, .10);
  --ink: #F3EEE4;
  --ink-2: #B6AEC6;
  --ink-3: #9A93AC;

  --gold: #FFC24B;
  --gold-2: #FF9A3C;
  --coral: #FF7A5C;
  --mint: #34D399;
  --violet: #A78BFA;
  --red: #FF6B81;

  --radius: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --tap: 56px;
  /* v4.0：内置楷体子集优先，没有设备楷体也能统一字形；子集外的冷僻字回退系统楷体/衬线 */
  --kaiti: "DutiKai", "Kaiti SC", "KaiTi", "STKaiti", "楷体", "楷体_GB2312", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* 禁双击放大：manipulation 保留滚动与单指操作，只去掉双击缩放 */
html,
body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button,
a,
[data-act],
.tab,
.buy,
.decor,
.m3-tile,
.sw-cell {
  touch-action: manipulation;
}
/* 棋盘仍使用点按，但允许系统双指缩放，不锁死辅助功能。 */
.m3-board,
.sw-board {
  touch-action: manipulation;
}
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2E2350 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #0B0912 100%);
  background-attachment: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: #fff; color: #000; padding: 10px 16px; }
.skip:focus { left: 0; }

#app {
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow: hidden;
}
@supports not (height: 100dvh) { #app { height: 100vh; } }

.boot { margin: auto; color: var(--ink-3); font-size: 15px; }

/* ---------------- 顶栏 ---------------- */
.hud {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 6px;
}
.hud .spacer { flex: 1; }

.rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.rank .em { font-size: 15px; }
.rank.up { color: var(--gold); border-color: rgba(255, 194, 75, .45); }

.icon-btn {
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.icon-btn:active { transform: scale(.94); }

/* ---------------- 钱包 ---------------- */
.wallet {
  flex: none;
  padding: 4px 16px 10px;
  text-align: center;
}
.wallet .mp {
  font-size: 44px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 194, 75, .35), 0 2px 0 rgba(0, 0, 0, .5);
  font-variant-numeric: tabular-nums;
}
.wallet .mp em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  margin-left: 6px;
  letter-spacing: 0;
}
.wallet .rate {
  margin-top: 2px;
  font-size: 13px;
  color: var(--mint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wallet .rate.idle { color: var(--ink-3); }

/* ---------------- 屏幕 ---------------- */
.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 16px 18px;
}

/* ---------------- 字灵阵 ---------------- */
.field {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(167, 139, 250, .14), rgba(255, 194, 75, .07));
  border: 1px solid rgba(167, 139, 250, .22);
  padding: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.field .cap {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.field .cap b { color: var(--ink); font-size: 13px; }
.field .cap .spacer { flex: 1; }
.orbs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.orb {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kaiti);
  font-size: 22px;
  font-weight: 700;
  color: #FFF3D6;
  background: radial-gradient(circle at 35% 30%, rgba(255, 194, 75, .55), rgba(255, 122, 92, .28));
  border: 1px solid rgba(255, 194, 75, .45);
  box-shadow: 0 0 14px rgba(255, 154, 60, .25), inset 0 0 8px rgba(255, 255, 255, .12);
  animation: orb-float 4.2s ease-in-out infinite;
}
.orb.dim {
  color: #B9B2C8;
  background: radial-gradient(circle at 35% 30%, rgba(160, 150, 190, .35), rgba(90, 80, 120, .25));
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.orb.more {
  font-family: inherit; font-size: 12px; font-weight: 800;
  color: var(--ink-2); background: var(--panel);
  border-color: var(--line); box-shadow: none; animation: none;
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.field .empty { color: var(--ink-3); font-size: 13px; line-height: 1.7; }

/* ---------------- 主按钮 ---------------- */
.home-study-cta { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.home-study-cta .cultivate { flex: 1; margin-bottom: 0; }
.home-study-say { flex: 0 0 30px; }
.cultivate {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: #2A1704;
  background: linear-gradient(180deg, #FFD774, var(--gold-2));
  box-shadow: 0 8px 0 #C9601F, 0 14px 28px rgba(255, 154, 60, .32);
  transition: transform .09s, box-shadow .09s;
}
.cultivate:active { transform: translateY(4px); box-shadow: 0 4px 0 #C9601F, 0 6px 14px rgba(255, 154, 60, .28); }
.cultivate .big { display: block; font-size: 21px; font-weight: 900; letter-spacing: 1px; }
.cultivate .sub { display: block; font-size: 12px; font-weight: 700; opacity: .72; margin-top: 3px; }
.cultivate::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 40%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(18deg);
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine {
  0%, 62% { left: -40%; }
  88%, 100% { left: 130%; }
}

/* ---------------- 面板 ---------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.panel-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.panel-h b { font-size: 14px; }
.panel-h .spacer { flex: 1; }
.panel-h span { font-size: 11px; color: var(--ink-3); }

/* ---------------- 商铺 ---------------- */
.shop { display: flex; flex-direction: column; gap: 10px; }
.buy {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  padding: 12px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: border-color .16s, background .16s, opacity .16s;
}
.buy:active { background: var(--panel-2); }
.buy .em { font-size: 26px; width: 34px; text-align: center; flex: none; }
.buy .info { flex: 1; min-width: 0; }
.buy .info b { display: block; font-size: 14px; }
.buy .info b .lv {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255, 194, 75, .14);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
}
.buy .info > span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.buy .price {
  flex: none;
  text-align: right;
  font-size: 13px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.buy .price small { display: block; font-size: 10px; font-weight: 700; color: var(--ink-3); }
.buy[disabled] { opacity: .42; cursor: default; }
.buy[disabled] .price { color: var(--ink-3); }
.buy.locked { opacity: .3; }
.buy.locked .price { color: var(--ink-3); }

/* ---------------- 科举 ---------------- */
.exam {
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(255, 194, 75, .18), rgba(255, 122, 92, .1));
  border: 1px solid rgba(255, 194, 75, .3);
}
.exam b { display: block; font-size: 15px; margin-bottom: 4px; }
.exam p { margin: 0 0 12px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.exam .gain { color: var(--gold); font-weight: 900; font-size: 17px; }

/* ---------------- 按钮 ---------------- */
.btn {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #2A1704;
  background: linear-gradient(180deg, #FFD774, var(--gold-2));
  box-shadow: 0 5px 0 #C9601F;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #C9601F; }
.btn.ghost {
  background: var(--panel);
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.btn.ghost:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn.small { font-size: 14px; padding: 12px; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------------- 修炼（答题） ---------------- */
.play-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px;
}
.play-top .spacer { flex: 1; }
.combo {
  min-width: 52px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
  color: #2A1704;
  background: linear-gradient(180deg, #FFE08A, var(--gold-2));
  font-variant-numeric: tabular-nums;
  transition: opacity .2s;
}
.combo[data-tier="2"] { background: linear-gradient(180deg, #FFC46B, var(--coral)); color: #2A0E00; }
.combo[data-tier="3"] { background: linear-gradient(180deg, #FF9EC4, #C86BFF); color: #240033; }
.combo[data-tier="4"] { background: linear-gradient(180deg, #7DF9D0, #35C8FF); color: #00212A; }
.combo.idle { opacity: .35; }

.gain-pill {
  font-size: 13px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 194, 75, .12);
  border: 1px solid rgba(255, 194, 75, .28);
  border-radius: 999px;
  padding: 4px 11px;
}

.prog {
  flex: none;
  height: 4px;
  margin: 0 16px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.prog i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.qtag {
  font-size: 11px;
  font-weight: 800;
  color: #2A1704;
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 99px;
  flex: none;
}
.prompt { font-size: 12px; color: var(--ink-3); }

.mascot { display: flex; align-items: flex-end; gap: 9px; margin: 6px 0 10px; }
.mascot .em { font-size: 34px; line-height: 1; animation: orb-float 3s ease-in-out infinite; }
.mascot .bub {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 76%;
}

.say {
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid rgba(90, 170, 255, .35);
  border-radius: 13px;
  background: rgba(70, 140, 255, .16);
  color: #8CC4FF;
  font-size: 20px;
  cursor: pointer;
}
.say:active { background: rgba(70, 140, 255, .3); }

/* 贴在说明文字后面的小喇叭：不占一整行 */
.say.inline {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 10px;
  font-size: 14px;
  vertical-align: middle;
  line-height: 1;
  padding: 0;
}

.instruction,
.hint:has(> .say.inline),
.journey-note:has(> .say.inline),
.gshop-t:has(> .say.inline),
.pace-hint:has(> .say.inline),
.m3-head span:has(> .say.inline),
.wrap-card span:has(> .say.inline) {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}
.instruction > .say.inline,
.hint > .say.inline,
.journey-note > .say.inline,
.gshop-t > .say.inline,
.pace-hint > .say.inline,
.m3-head span > .say.inline,
.wrap-card span > .say.inline,
.row .t > .say.inline {
  flex: 0 0 30px;
  max-width: 30px;
  margin-left: 0;
  margin-top: -2px;
}
.row .t:has(> .say.inline) {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

.pinyin {
  font-family: "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .5px;
}

.sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px;
  margin: 10px 0;
}
.tile {
  font-family: var(--kaiti);
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  min-width: 44px;
  height: 50px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--ink);
  cursor: pointer;
  transition: transform .1s, background .14s, border-color .14s;
}
.tile:active { transform: scale(.94); }
.tile.punc { border: 0; background: transparent; min-width: 22px; color: var(--ink-3); cursor: default; }
.tile.right { background: rgba(52, 211, 153, .22); border-color: var(--mint); color: #CFFAEA; }
.tile.wrong { background: rgba(255, 107, 129, .2); border-color: var(--red); animation: shake-x .3s; }
.tile.used { opacity: .22; pointer-events: none; }

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.slots { display: flex; gap: 10px; justify-content: center; margin: 14px 0 8px; }
.slots .cell {
  width: 58px; height: 68px;
  border-radius: 13px;
  border: 2px dashed rgba(255, 194, 75, .35);
  background: rgba(255, 194, 75, .07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kaiti);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}
.slots .cell.filled { border-style: solid; border-color: var(--gold); background: rgba(255, 194, 75, .14); }
.pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }

.instr {
  font-family: var(--kaiti);
  font-size: 23px;
  line-height: 1.5;
  font-weight: 600;
  background: rgba(255, 194, 75, .09);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.chip {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 13px 16px;
  font-family: var(--kaiti);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: var(--tap);
  transition: transform .1s, border-color .14s, background .14s;
}
.chip:active { transform: scale(.95); }
.chip.on { border-color: var(--gold); background: rgba(255, 194, 75, .16); }
body[data-mode="circle"] .chip.on::after {
  content: ""; position: absolute; inset: -6px;
  border: 2px solid var(--gold); border-radius: 50%;
  pointer-events: none;
}
body[data-mode="cross"] .chip.on { color: #8C8798; text-decoration: line-through; text-decoration-thickness: 2px; }
body[data-mode="cross"] .chip.on::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%;
  height: 2px; background: var(--red); transform: rotate(-14deg);
  pointer-events: none;
}
.chip.right { border-color: var(--mint); background: rgba(52, 211, 153, .18); color: #D6FBEE; }
.chip.wrong { border-color: var(--red); background: rgba(255, 107, 129, .16); color: #FFD4DB; }
.chip .ord {
  position: absolute; top: -8px; left: -8px;
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--gold); color: #2A1704;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-family: system-ui, sans-serif;
}

.fb {
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  flex: none;
}
.fb.ok { background: rgba(52, 211, 153, .16); color: #7DF3C8; }
.fb.no { background: rgba(255, 107, 129, .14); color: #FF9BAB; }
.grow { flex: 1; min-height: 10px; }

/* 题目主体垂直居中，避免上半屏挤满、下半屏空白 */
.qbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6px;
}
.qbody .grow { flex: 0; }
.qbody > #fb { margin-top: 14px; }

/* ---------------- 结算 ---------------- */
.big-num {
  font-size: 46px;
  font-weight: 900;
  color: var(--gold);
  text-align: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(255, 194, 75, .4);
}
.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.result-row:last-child { border-bottom: 0; }
.result-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.result-row .up { color: var(--mint); font-weight: 800; }

/* ---------------- 图鉴 ---------------- */
.dex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dex-card {
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px 6px;
  text-align: center;
}
.dex-card .em { font-size: 26px; line-height: 1.15; }
.dex-card .nm { font-family: var(--kaiti); font-size: 13px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dex-card .sk { font-size: 9px; color: var(--gold); margin-top: 2px; display: block; }
.dex-card.lock { opacity: .38; }
.dex-card.lock .em { filter: grayscale(1); }

.char-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.char-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kaiti);
  font-size: 20px;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--ink-3);
}
.char-cell.on { color: #FFF0CC; background: rgba(255, 194, 75, .16); border-color: rgba(255, 194, 75, .4); }
.char-cell.warm { color: #FFD9A8; background: rgba(255, 154, 60, .2); border-color: rgba(255, 154, 60, .45); }
.char-cell.cold { color: var(--ink-3); background: rgba(140, 130, 170, .12); border-color: rgba(140, 130, 170, .2); }

/* ---------------- 家长面板 ---------------- */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.matrix .cell { border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, .05); }
.matrix .cell b { display: block; font-size: 22px; font-weight: 900; line-height: 1.2; }
.matrix .cell span { font-size: 11px; color: var(--ink-3); line-height: 1.45; display: block; margin-top: 2px; }
.matrix .c1 { background: rgba(52, 211, 153, .14); } .matrix .c1 b { color: var(--mint); }
.matrix .c2 { background: rgba(255, 194, 75, .12); } .matrix .c2 b { color: var(--gold); }
.matrix .c3 { background: rgba(90, 170, 255, .12); } .matrix .c3 b { color: #7FB6FF; }
.matrix .c4 { background: rgba(255, 107, 129, .12); } .matrix .c4 b { color: var(--red); }

.tier-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tier-row .lb { width: 68px; flex: none; font-size: 11px; color: var(--ink-3); }
.tier-row .bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tier-row .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.tier-row .vl { width: 40px; text-align: right; font-size: 10px; color: var(--ink-3); flex: none; }

.week-list .w { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.week-list .w:last-child { border-bottom: 0; }
.week-list .w .n {
  width: 24px; height: 24px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  background: rgba(255, 255, 255, .08); color: var(--ink-3);
}
.week-list .w.done .n { background: rgba(52, 211, 153, .2); color: var(--mint); }
.week-list .w.now .n { background: var(--gold); color: #2A1704; }
.week-list .w .t { flex: 1; min-width: 0; }
.week-list .w .t b { font-size: 12px; display: block; }
.week-list .w .t span { font-size: 10px; color: var(--ink-3); display: block; margin-top: 1px; }

.bars { display: flex; align-items: flex-end; gap: 5px; height: 62px; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.bars .b i {
  display: block; width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  min-height: 2px;
}
.bars .b span { font-size: 8px; color: var(--ink-3); }

/* ---------------- 设置 ---------------- */
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.row:last-child { border-bottom: 0; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 14px; font-weight: 600; }
.row .t span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.switch {
  width: 50px; height: 29px; flex: none;
  border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  position: relative; cursor: pointer; transition: background .18s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 99px;
  background: #fff; transition: transform .18s;
}
.switch[aria-checked="true"] { background: var(--mint); }
.switch[aria-checked="true"]::after { transform: translateX(21px); }

.seg { display: flex; gap: 4px; background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 3px; flex: none; }
.seg button {
  border: 0; background: transparent; color: var(--ink-3);
  font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.seg button.on { background: var(--gold); color: #2A1704; }

/* ---------------- 底部导航 ---------------- */
.tabbar {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line);
  background: rgba(16, 14, 24, .82);
  padding: 6px 8px 8px;
}
.tab {
  flex: 1;
  border: 0; background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  border-radius: 12px;
}
.tab .i { font-size: 19px; line-height: 1.1; }
.tab.on { color: var(--gold); background: rgba(255, 194, 75, .1); }
.tab.on .i { filter: drop-shadow(0 0 8px rgba(255, 194, 75, .55)); }

/* ---------------- 帮助 / 杂项 ---------------- */
.help p { font-size: 13px; line-height: 1.8; color: var(--ink-2); margin: 0 0 12px; }
.help h3 { font-size: 14px; margin: 18px 0 6px; color: var(--ink); }
.help li { font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.hint { font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.empty { text-align: center; color: var(--ink-3); font-size: 12px; line-height: 1.8; padding: 22px 10px; }
.empty .em { display: block; font-size: 40px; margin-bottom: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 92px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 194, 75, .96);
  color: #2A1704;
  font-size: 13px; font-weight: 800;
  padding: 11px 20px;
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
  max-width: 86vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 360px) {
  .wallet .mp { font-size: 36px; }
  .tile { min-width: 38px; height: 44px; font-size: 26px; }
  .instr { font-size: 20px; }
  .chip { font-size: 19px; padding: 11px 13px; }
  .char-grid { grid-template-columns: repeat(5, 1fr); }
  .screen { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cultivate::after, .orb, .mascot .em { animation: none !important; }
}

/* ============================================================
   字灵卡（v3.0）：抽卡 / 卡组 / 对战 / 背包
   ------------------------------------------------------------
   卡面只放三个数字（攻/血/速）+ 一个系图标 + 星级：
   7 岁孩子要一眼看懂，多一个数字都是负担。
   ============================================================ */

/* ---- 顶栏的墨印 ---- */
.ink-pill b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---- 抽卡页的墨印大数字 ---- */
.ink-hero { text-align: center; }
.ih-num {
  font-size: 46px; font-weight: 900; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 194, 75, .35);
}
.ih-lb { font-size: 11px; color: var(--ink-3); letter-spacing: 2px; margin-bottom: 10px; }
.ih-row {
  display: flex; justify-content: center; gap: 14px;
  font-size: 12px; color: var(--ink-2); margin-bottom: 8px;
}
.ih-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ih-hint { font-size: 11px; color: var(--ink-3); line-height: 1.6; }

/* ---- 卡牌 hub 的入口卡 ---- */
.hub-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; margin-bottom: 10px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); font-family: inherit; text-align: left; cursor: pointer;
}
.hub-card:active { transform: scale(.99); }
.hc-em { font-size: 26px; flex: none; }
.hc-tx { flex: 1; min-width: 0; }
.hc-tx b { display: block; font-size: 15px; }
.hc-tx span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.hc-arrow { font-size: 22px; color: var(--ink-3); flex: none; }

/* ---- 卡面 ---- */
.cface {
  position: relative; width: 100%; border-radius: 14px; padding: 7px 7px 6px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1.5px solid var(--rc, var(--line));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  overflow: hidden;
}
.cface.r3 { background: linear-gradient(165deg, rgba(196, 162, 255, .22), rgba(255, 255, 255, .03)); }
.cface.r4 { background: linear-gradient(165deg, rgba(255, 194, 75, .24), rgba(255, 255, 255, .04)); }
.cface.sel { outline: 2px solid var(--gold); outline-offset: 1px; }
.cface.dim { opacity: .45; }
.cf-top { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.cf-rar {
  padding: 1px 5px; border-radius: 99px; font-weight: 800;
  color: #201A2E; background: var(--rc, var(--ink-3));
}
.cf-ser { font-size: 11px; }
.cf-ch {
  font-family: var(--kaiti); font-size: 30px; font-weight: 700; text-align: center;
  line-height: 1.15; margin: 2px 0 0;
}
/* 词卡：两个字，字号收一点，别顶出卡面 */
.cface.word .cf-ch { font-size: 22px; letter-spacing: 0; }
/* 句卡：四个字 + 间隔点，再小一档 */
.cface.sentence .cf-ch { font-size: 14px; letter-spacing: 0; }
.cf-temp { font-size: 10px; color: var(--gold); }
.cf-name {
  font-size: 10px; text-align: center; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-py { font-size: 9px; text-align: center; color: var(--ink-3); min-height: 12px; }
.cf-stats {
  display: flex; justify-content: space-between; gap: 2px;
  font-size: 9.5px; font-weight: 700; margin-top: 2px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.cf-star { font-size: 8px; color: var(--gold); letter-spacing: -1px; text-align: center; line-height: 1.2; }

/* ---- 抽卡 ---- */
.pity { margin-top: 10px; }
.pt-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.pt-row span { flex: none; width: 62px; }
.pt-row i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.pt-row i b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--gold)); }
.pt-row em { flex: none; font-style: normal; font-variant-numeric: tabular-nums; }
.gacha-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.gbtn {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 10px; background: var(--panel); color: var(--ink);
  font-family: inherit; cursor: pointer;
}
.gbtn b { display: block; font-size: 17px; font-weight: 900; }
.gbtn span { display: block; font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.gbtn.hot {
  border-color: rgba(255, 194, 75, .5);
  background: linear-gradient(180deg, rgba(255, 215, 116, .22), rgba(255, 154, 60, .14));
}
.gbtn:active { transform: scale(.98); }
.gbtn[disabled] { opacity: .4; pointer-events: none; }
.pull-panel { margin-top: 12px; }
.pull-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 8px 0 12px; }
.pull-cell { position: relative; animation: pullIn .32s cubic-bezier(.34, 1.4, .64, 1) both; }
.pull-cell:nth-child(2) { animation-delay: .05s; }
.pull-cell:nth-child(3) { animation-delay: .1s; }
.pull-cell:nth-child(4) { animation-delay: .15s; }
.pull-cell:nth-child(5) { animation-delay: .2s; }
.pull-cell:nth-child(6) { animation-delay: .25s; }
.pull-cell:nth-child(7) { animation-delay: .3s; }
.pull-cell:nth-child(8) { animation-delay: .35s; }
.pull-cell:nth-child(9) { animation-delay: .4s; }
.pull-cell:nth-child(10) { animation-delay: .45s; }
@keyframes pullIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.pull-tag {
  position: absolute; top: -6px; right: -4px; z-index: 2;
  font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 99px;
  color: #201A2E; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.pull-tag.new { background: var(--gold); }
.pull-tag.shard { background: var(--violet); }
.pull-tag.back { background: var(--mint); }

/* ---- 卡组 ---- */
.deck-row { display: flex; gap: 6px; }
.deck-slot {
  flex: 1; min-width: 0; aspect-ratio: 3 / 4.2; border-radius: 14px;
  border: 1.5px dashed rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .03);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: relative;
}
.deck-slot.filled { border-style: solid; border-color: transparent; background: none; }
.ds-plus { font-size: 20px; color: var(--ink-3); }
.ds-tip { font-size: 9px; color: var(--ink-3); }
.slot-x {
  position: absolute; top: -6px; right: -6px; z-index: 3; width: 22px; height: 22px;
  border-radius: 99px; border: 1px solid var(--line); background: #2A2240;
  color: var(--ink-2); font-size: 11px; cursor: pointer;
}
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.own-cell { position: relative; }
.oc-foot {
  display: block; width: 100%; margin-top: 4px; padding: 5px 2px;
  font-family: inherit; font-size: 9px; font-weight: 800; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.oc-foot.up { border-color: rgba(255, 194, 75, .55); color: var(--gold); background: rgba(255, 194, 75, .12); }
.oc-foot.max { text-align: center; color: var(--gold); }
.oc-foot[disabled] { opacity: .55; pointer-events: none; }

/* ---- 背包 ---- */
.bag-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.bag-row + .bag-row { border-top: 1px dashed rgba(255, 255, 255, .08); }
.bag-row.off { opacity: .45; }
.bag-em { font-size: 22px; flex: none; }
.bag-tx { flex: 1; min-width: 0; }
.bag-tx b { display: block; font-size: 13px; }
.bag-tx span { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.bag-n { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ---- 对战：章节冒险 ---- */
.stage-list { display: flex; flex-direction: column; gap: 12px; max-height: 390px; overflow-y: auto; padding-right: 2px; }
.stage-chapter { display: flex; flex-direction: column; gap: 5px; }
.sc-h { display: flex; justify-content: space-between; align-items: center; padding: 0 3px; color: var(--gold); font-size: 12px; }
.sc-h span { color: var(--ink-3); font-size: 10px; }
.sc-stages { display: flex; flex-direction: column; gap: 4px; }
.stage-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .04);
  color: var(--ink); font-family: inherit; text-align: left; cursor: pointer;
}
.stage-row.done { border-color: rgba(52, 211, 153, .28); background: rgba(52, 211, 153, .08); }
.stage-row.lock { opacity: .42; }
.sr-n {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
  background: rgba(255, 255, 255, .10); font-variant-numeric: tabular-nums;
}
.stage-row.done .sr-n { background: var(--mint); color: #06301F; }
.sr-tx { flex: 1; min-width: 0; }
.sr-tx b { display: block; font-size: 13px; }
.sr-tx i { display: block; font-size: 10px; color: var(--ink-3); font-style: normal; margin-top: 1px; }
.sr-em { font-size: 17px; flex: none; }
.sr-ser { font-size: 13px; flex: none; }
.stage-trait { margin: -2px 0 9px; color: var(--gold); font-size: 11px; line-height: 1.5; }

/* ---- 卡组预设 ---- */
.preset-row { display: flex; gap: 8px; margin-top: 10px; }
.preset {
  flex: 1; min-width: 0; border-radius: 12px; padding: 8px 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
}
.preset.off { opacity: .5; }
.pre-h { display: flex; justify-content: space-between; font-size: 12px; }
.pre-h b { font-weight: 800; }
.pre-h span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pre-btns { display: flex; gap: 6px; margin-top: 6px; }
.pre-btn {
  flex: 1; padding: 7px 4px; border-radius: 8px; font-family: inherit;
  font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(255, 194, 75, .45); background: rgba(255, 194, 75, .12); color: var(--gold);
}
.pre-btn.ghost { border-color: var(--line); background: rgba(255, 255, 255, .05); color: var(--ink-2); }
.pre-btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- 对战：敌我 ---- */
.foe-row { display: flex; gap: 6px; }
.foe-cell {
  flex: 1; min-width: 0; text-align: center; padding: 8px 4px;
  border-radius: 12px; background: rgba(255, 107, 129, .08); border: 1px solid rgba(255, 107, 129, .2);
}
.foe-em { font-size: 22px; }
.foe-cell b { display: block; font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe-cell span { display: block; font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.foe-cell i { display: block; font-size: 10px; font-style: normal; margin-top: 2px; }
.vs-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin: 10px 0 6px; }
.vs-line b { font-variant-numeric: tabular-nums; }
.vs-line b.ok { color: var(--mint); }
.vs-line b.warn { color: var(--coral); }
.item-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.item-chip {
  padding: 6px 10px; border-radius: 99px; font-family: inherit; font-size: 11px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--ink-2); cursor: pointer;
}
.item-chip.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 194, 75, .12); }

/* ---- 对战：上敌下我，逐招文字演出 ---- */
.bt-screen { display: flex; flex-direction: column; gap: 7px; }
.bt-arena {
  position: relative; overflow: hidden; padding: 9px 8px; border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, .2);
  background: radial-gradient(circle at 50% 45%, rgba(167, 139, 250, .14), transparent 42%),
    linear-gradient(180deg, rgba(255, 107, 129, .07), rgba(18, 14, 35, .3) 48%, rgba(52, 211, 153, .06));
}
.bt-side { display: flex; justify-content: center; gap: 7px; }
.bt-side-label { margin: 0 3px 5px; color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.bt-side-label.me { margin: 5px 3px 0; text-align: right; }
.bt-unit {
  position: relative; flex: 1; min-width: 0; max-width: 118px; text-align: center; padding: 9px 5px 7px;
  border-radius: 14px; background: rgba(255, 255, 255, .055); border: 1px solid var(--unit-color);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .025);
  transition: opacity .2s ease, filter .2s ease, border-color .2s ease;
}
.bt-unit.dead { opacity: .28; filter: grayscale(1); }
.bt-unit.acting { z-index: 2; border-color: #FFF; box-shadow: 0 0 20px var(--unit-color); }
.bt-unit[data-side="me"].acting { animation: btActMe .42s ease; }
.bt-unit[data-side="foe"].acting { animation: btActFoe .42s ease; }
@keyframes btActMe { 45% { transform: translateY(-12px) scale(1.06); } }
@keyframes btActFoe { 45% { transform: translateY(12px) scale(1.06); } }
.bu-face { font-family: var(--kaiti); font-size: 31px; font-weight: 700; line-height: 1.15; text-shadow: 0 0 16px var(--unit-color); }
/* 词卡出战：两个字的字号收小，避免撑破头像位 */
.bt-unit[data-word="1"] .bu-face { font-size: 20px; letter-spacing: 0; }
.bt-unit[data-len="3"] .bu-face,
.bt-unit[data-len="4"] .bu-face,
.bt-unit[data-len="5"] .bu-face { font-size: 12px; }

/* ---- 合体 ---- */
.fuse-list { display: flex; flex-direction: column; gap: 10px; }
.fuse-row {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.fuse-row.off { opacity: .55; }
.fuse-pair { display: flex; align-items: center; gap: 4px; flex: none; }
.fuse-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; height: 52px; padding: 2px 4px; border-radius: 10px;
  border: 1px solid var(--line); font: 700 22px/1 var(--kaiti); color: var(--ink);
  background: rgba(255, 255, 255, .04);
}
.fuse-chip i { font: 600 9px/1 ui-monospace, monospace; color: var(--ink-3); font-style: normal; margin-top: 2px; }
.fuse-chip.r3 { border-color: #C4A2FF; color: #E6D8FF; }
.fuse-chip.r4 { border-color: var(--gold); color: var(--gold); }
.fuse-chip.dim { opacity: .5; }
.fuse-op { color: var(--ink-3); font-weight: 800; }
.fuse-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fuse-meta b { font-size: 16px; }
.fuse-meta span { font-size: 11px; color: var(--ink-3); }
.fuse-meta i { font-size: 11px; color: var(--ink-3); font-style: normal; }
.fuse-row .btn { flex: none; }
.btn.ready { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 194, 75, .35); }
.fuse-chip.long { font-size: 13px; letter-spacing: 0; padding: 0 6px; }
.echo-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.echo-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px;
  border-radius: 99px; border: 1px solid var(--line);
  font: 700 18px/1 var(--kaiti); color: var(--ink);
}
.echo-chip i { font: 600 10px/1 ui-monospace, monospace; color: var(--gold); font-style: normal; }

/* 合体试合台：我的字卡 + 两张试合 */
.fuse-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.fuse-filters button {
  padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-3); font-size: 11px; font-weight: 800;
}
.fuse-filters button.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 194, 75, .10); }
.fuse-shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px 4px 4px 2px;
  overscroll-behavior: contain;
}
.fuse-owned {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 62px; padding: 4px 2px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035);
  color: var(--ink); font-family: var(--kaiti); touch-action: manipulation;
}
.fuse-owned b { font-size: 24px; line-height: 1.05; font-weight: 700; }
.fuse-owned i { font: 600 8px/1 ui-monospace, monospace; color: var(--ink-3); font-style: normal; margin-top: 3px; }
.fuse-owned em { position: absolute; top: 4px; right: 5px; font: 600 8px/1 ui-monospace, monospace; color: var(--gold); font-style: normal; }
.fuse-owned.low { opacity: .72; }
/* v4.0：收藏里有可配对搭档的提示星标（只提示「有搭档」，绝不剧透是谁） */
.fuse-owned.has-partner { border-color: rgba(255, 194, 75, .42); }
.fuse-spark {
  position: absolute; top: 3px; left: 5px;
  font-size: 9px; line-height: 1; font-style: normal;
  color: var(--gold); text-decoration: none; pointer-events: none;
  opacity: .85;
}
.fuse-owned.sel {
  border-color: var(--gold); background: rgba(255, 194, 75, .13);
  box-shadow: 0 0 0 2px rgba(255, 194, 75, .35) inset, 0 0 16px rgba(255, 194, 75, .18);
}
.fuse-owned.ready::after {
  content: ""; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint);
}
.fuse-tray {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px; border: 1px dashed var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02);
}
.fuse-slot {
  min-width: 62px; height: 62px; padding: 4px 8px; border-radius: 12px;
  border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 10px;
}
.fuse-slot.filled { border-style: solid; border-color: var(--gold); background: rgba(255, 194, 75, .1); }
.fuse-slot b { font: 700 26px/1 var(--kaiti); color: var(--ink); }
.fuse-slot i { font: 600 9px/1 ui-monospace, monospace; color: var(--gold); font-style: normal; margin-top: 4px; }
/* 选一张 / 选两张时预览高度会一变一缩，滚到底再选卡画面会往上跳 21px；
   给预览一个稳定高度，托盘与预览之间不抖动。 */
.fuse-preview { margin-top: 10px; min-height: 112px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.fuse-preview.ok { border-color: rgba(110, 231, 183, .45); background: rgba(110, 231, 183, .06); }
.fuse-preview.bad { border-color: rgba(255, 138, 122, .35); background: rgba(255, 138, 122, .05); }
.fuse-preview .pv-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fuse-preview .pv-h b { font-size: 15px; }
.fuse-preview .pv-h span { color: var(--ink-3); font-size: 11px; }
.fuse-preview .pv-pair { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.fuse-preview .pv-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.fuse-preview .pv-line b { font: 700 22px/1.1 var(--kaiti); }
.fuse-preview .pv-line span { color: var(--ink-2); font-size: 11px; }
.fuse-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 7px; margin-top: 8px; }
.fuse-word {
  text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); color: var(--ink); touch-action: manipulation;
}
.fuse-word b { display: block; font: 700 17px/1.2 var(--kaiti); }
.fuse-word span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.fuse-word i { display: block; font-size: 10px; color: var(--ink-3); font-style: normal; margin-top: 2px; }
.fuse-word.ready { border-color: rgba(110, 231, 183, .5); }
.fuse-word.ready i { color: var(--mint); }
.fuse-word.missing { opacity: .62; }
.fuse-word.done i { color: var(--gold); }
@media (max-width: 360px) {
  .fuse-shelf { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .fuse-owned b { font-size: 21px; }
  .fuse-tray { gap: 6px; }
  .fuse-slot { min-width: 54px; height: 54px; }
}
@media (max-width: 360px) {
  .fuse-row { flex-wrap: wrap; }
  .fuse-chip { min-width: 38px; height: 46px; font-size: 18px; }
}
.bu-name { margin-top: 2px; font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 5px 0 3px; }
.bu-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mint), #7CE7C0); transition: width .36s ease; }
.bt-side.foe .bu-bar i { background: linear-gradient(90deg, var(--red), #FFA08E); }
.bu-hp { font-size: 9px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bu-sh { font-size: 9px; color: #9BD8FF; }
.bt-mid { min-height: 48px; display: grid; place-items: center; text-align: center; }
.bt-attack-text {
  max-width: 100%; padding: 6px 12px; border-radius: 10px; color: var(--hit-color, var(--violet));
  background: rgba(5, 4, 12, .48); border: 1px solid currentColor;
  font-size: 13px; font-weight: 900; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt-attack-text.strike.me.play { animation: btStrikeMe .5s cubic-bezier(.2, .8, .2, 1); }
.bt-attack-text.strike.foe.play { animation: btStrikeFoe .5s cubic-bezier(.2, .8, .2, 1); }
.bt-attack-text.crit { font-size: 15px; color: #FFD166; box-shadow: 0 0 24px rgba(255, 209, 102, .24); }
@keyframes btStrikeMe { 0% { opacity: 0; transform: translateY(24px) scale(.82); } 55% { opacity: 1; transform: translateY(-7px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes btStrikeFoe { 0% { opacity: 0; transform: translateY(-24px) scale(.82); } 55% { opacity: 1; transform: translateY(7px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
.bt-log {
  flex: 1; min-height: 132px; max-height: 225px; overflow-y: auto;
  font-size: 11px; line-height: 1.55; color: var(--ink-2);
  border-radius: 12px; background: rgba(0, 0, 0, .24); padding: 7px 8px;
}
.bl-line { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; margin: 2px 0; border-radius: 7px; animation: blInMe .28s ease both; }
.bl-line.foe { color: #FFD5D5; animation-name: blInFoe; }
.bl-line.hit { border-left: 3px solid var(--hit-color); background: rgba(255, 255, 255, .035); }
.bl-line.hit span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-line.hit b { flex: none; color: var(--hit-color); }
.bl-line.crit b { color: #FFD166; font-size: 13px; }
.bl-line.skill { color: #C4B5FD; }
.bl-line.heal { color: var(--mint); }
.bl-line.down { color: var(--red); }
.bl-line.revive { color: var(--gold); }
@keyframes blInMe { from { opacity: 0; transform: translateX(-12px); } }
@keyframes blInFoe { from { opacity: 0; transform: translateX(12px); } }
.bl-round { text-align: center; color: var(--gold); font-weight: 800; font-size: 10px; letter-spacing: 2px; margin: 5px 0; }
.bl-item { color: var(--ink-3); padding: 3px 6px; }
.bt-bar { display: flex; justify-content: flex-end; }
.bt-res {
  border-radius: var(--radius); padding: 14px; margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, .14); background: var(--panel);
  animation: pullIn .3s ease both;
}
.bt-res.win { border-color: rgba(255, 194, 75, .5); background: linear-gradient(165deg, rgba(255, 194, 75, .16), rgba(255, 255, 255, .03)); }
.br-milestone { margin: -4px -4px 12px; padding: 10px; border-radius: 12px; background: rgba(255, 194, 75, .15); color: var(--gold); text-align: center; font-weight: 900; line-height: 1.5; }
.br-title { font-size: 20px; font-weight: 900; text-align: center; }
.br-sub { font-size: 11px; color: var(--ink-3); text-align: center; margin: 2px 0 10px; }
.br-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.br-row b { font-variant-numeric: tabular-nums; color: var(--gold); }
.br-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---- 拼音题 ---- */
.py-char {
  font-family: var(--kaiti); font-size: 76px; font-weight: 700; text-align: center;
  line-height: 1.1; color: var(--ink);
  text-shadow: 0 0 26px rgba(167, 139, 250, .35);
}
.py-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 拼音找字（v3.3）：四个大字块，和小方块牌一样好点 */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick-grid .tile { min-height: 72px; height: 72px; font-size: 36px; }
.py-opt {
  padding: 16px 8px; border-radius: 16px; font-family: inherit;
  font-size: 20px; font-weight: 800; letter-spacing: .5px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer;
}
.py-opt:active { transform: scale(.97); }
.py-opt.right { border-color: var(--mint); background: rgba(52, 211, 153, .18); }
.py-opt.wrong { border-color: var(--red); background: rgba(255, 107, 129, .16); }

/* ---- L3 长句拆解（v4.0） ---- */
.clause-whole {
  font-family: var(--kaiti); font-size: 21px; line-height: 1.9; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 14px; word-break: break-word;
}
.clause-chunk-static { display: inline; }
.clause-chunk-static.cut { background: rgba(167, 139, 250, .16); border-radius: 8px; padding: 2px 3px; }
.clause-gap {
  display: inline-block; min-width: 30px; margin: 0 2px; padding: 2px 0;
  font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.4;
  color: var(--ink-3); background: transparent; border: 1px dashed var(--line);
  border-radius: 10px; cursor: pointer;
}
.clause-gap.on { color: var(--gold); border-style: solid; border-color: rgba(255, 194, 75, .6); background: rgba(255, 194, 75, .12); }
.clause-ask {
  font-family: var(--kaiti); font-size: 20px; font-weight: 700; line-height: 1.55;
  color: var(--ink); margin: 4px 0 10px;
}
.clause-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.clause-chip {
  font-size: 12px; color: var(--ink-2); padding: 4px 8px; border-radius: 999px;
  background: rgba(167, 139, 250, .12); border: 1px solid var(--line);
}
.clause-chunk { font-size: 15px; line-height: 1.5; text-align: left; }

/* ---- 学习起点三选一（v4.0） ---- */
.start-preset { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.start-preset .btn { width: 100%; text-align: left; }
.start-preset .btn.on { border-color: rgba(255, 194, 75, .55); color: var(--gold); background: rgba(255, 194, 75, .08); }

/* ---- 首页的卡牌入口 ---- */
.ce-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.ce-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ce-btns { display: flex; gap: 8px; margin-top: 10px; }
.ce-btns .btn { flex: 1; }


.goal {
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(255, 194, 75, .16), rgba(167, 139, 250, .12));
  border: 1px solid rgba(255, 194, 75, .28);
}
.goal-h {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; color: var(--ink-3); margin-bottom: 8px;
}
.goal-h b { font-size: 11px; font-weight: 800; }
.goal-main { display: flex; align-items: center; gap: 12px; }
.goal-em { font-size: 30px; line-height: 1; flex: none; }
.goal-info { flex: 1; min-width: 0; }
.goal-info b { display: block; font-size: 15px; }
.goal-info span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.goal-info span b {
  display: inline; font-size: 12px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.goal-pct {
  flex: none; font-size: 13px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.goal-bar {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .09); margin-top: 10px;
}
.goal-bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.goal-done { text-align: center; font-size: 13px; font-weight: 800; color: var(--gold); padding: 2px 0; }

/* 首启三步（v2.9）：新存档的第一屏只讲三件事，做完就永久收起。
   用紫→薄荷的冷色，和「下一个目标」的墨金色区分开：
   前者是「怎么开始」，后者是「钱该花在哪」。 */
.onboard {
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(167, 139, 250, .16), rgba(52, 211, 153, .10));
  border: 1px solid rgba(167, 139, 250, .30);
}
.ob-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ob-h b { font-size: 14px; }
.ob-h span { font-size: 11px; color: var(--ink-3); }
.ob-skip {
  margin-left: auto; flex: none; padding: 2px 0 2px 10px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
}
.ob-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.ob-row + .ob-row { border-top: 1px dashed rgba(255, 255, 255, .08); }
.ob-row i {
  flex: none; width: 22px; height: 22px; border-radius: 99px;
  display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 900;
  color: var(--ink-3); background: rgba(255, 255, 255, .08);
}
.ob-row div { min-width: 0; }
.ob-row b { display: block; font-size: 14px; line-height: 1.4; }
.ob-row span { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; }
.ob-row.now i { color: #2A1704; background: linear-gradient(180deg, #FFD774, var(--gold-2)); }
.ob-row.now b { color: var(--gold); }
.ob-row.done i { color: #06301F; background: var(--mint); }
.ob-done { border-color: rgba(52, 211, 153, .32); }

/* 阁内陈设展示 */
.decor-hint { font-size: 11px; color: var(--ink-3); margin: 2px 0 10px; }
.decor-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.decor-row span {
  font-size: 26px; line-height: 1;
  animation: decor-bob 3.6s ease-in-out infinite;
}
@keyframes decor-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 陈设商店 */
.decor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.decor {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit; color: var(--ink-3);
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .1s;
}
.decor:active { transform: scale(.96); }
.decor .de { font-size: 24px; line-height: 1.15; filter: grayscale(1); opacity: .5; }
.decor .dn { font-size: 11px; font-weight: 700; }
.decor .dp { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.decor.can { border-color: rgba(255, 194, 75, .45); background: rgba(255, 194, 75, .09); }
.decor.can .de { filter: none; opacity: 1; }
.decor.can .dp { color: var(--gold); font-weight: 800; }
.decor.owned { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .13); }
.decor.owned .de { filter: none; opacity: 1; }
.decor.owned .dp { color: var(--violet); font-weight: 800; }
.decor[disabled] { cursor: default; }

/* 文房卡上的「买完变多少」 */
.buy .info .pv {
  display: block; font-style: normal; font-size: 11px;
  color: var(--ink-3); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.buy .info .pv b { display: inline; color: var(--mint); font-size: 11px; }
/* ============================================================
   墨阵（堆叠三消）
   ============================================================ */

.wallet-extra {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 700;
}
.wallet-extra b { color: var(--gold); font-size: 14px; font-variant-numeric: tabular-nums; }

.m3-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-bottom: 8px;
}

.m3-board {
  contain: layout style;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  flex: none;
  margin: 0 auto;
}

.m3-board::before {
  content: "";
  position: absolute;
  inset: -14% -16%;
  background: radial-gradient(ellipse at 50% 46%, rgba(167, 139, 250, .18), transparent 66%);
  pointer-events: none;
}

.m3-tile {
  contain: layout style;
  position: absolute;
  width: 13%;
  min-width: 0;
  padding: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid hsl(var(--hue, 30) 70% 62% / .55);
  background: linear-gradient(160deg, hsl(var(--hue, 30) var(--tile-s1, 62%) 44%), hsl(var(--hue, 30) var(--tile-s2, 58%) 30%));
  color: #FFF6E5;
  font-family: var(--kaiti);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .38), inset 0 0 12px rgba(255, 255, 255, .16);
  opacity: var(--alpha, 1);
  /* 实色+透明遮罩表现层次，不为144张牌各建实时滤镜表面。 */
  transition: opacity .16s ease, transform .16s ease;
}
.m3-tile.depth-0 { --alpha: 1; --brightness: 1; --saturation: 1; }
.m3-tile.depth-1 { --alpha: 1; --brightness: .85; --saturation: .85; }
.m3-tile.depth-2 { --alpha: 1; --brightness: .68; --saturation: .62; }
.m3-tile:active { transform: scale(.95); }
.m3-tile.blocked { opacity: var(--alpha, 1); cursor: default; }
.m3-tile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: #000; opacity: var(--tile-shade, 0); pointer-events: none;
  transition: opacity .16s ease;
}
.m3-tile.blocked.depth-1 { --tile-s1: 53%; --tile-s2: 49%; --tile-shade: .15; }
.m3-tile.blocked.depth-2 { --tile-s1: 38%; --tile-s2: 36%; --tile-shade: .32; }
html[data-eink="true"] .m3-tile::before { display: none; }
.m3-tile.off { opacity: 0; transform: scale(.55); pointer-events: none; }

.m3-tray {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex: none;
  padding: 6px 0 2px;
}
.m3-slot {
  width: 11.5vw;
  max-width: 46px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kaiti);
  font-size: 24px;
  font-weight: 700;
  color: #FFF6E5;
}
.m3-slot.on {
  border-style: solid;
  border-color: hsl(var(--hue, 30) 70% 62% / .85);
  background: linear-gradient(160deg, hsl(var(--hue, 30) 62% 44%), hsl(var(--hue, 30) 58% 30%));
  animation: m3pop .2s ease;
}
@keyframes m3pop {
  from { transform: scale(.66); }
  to { transform: scale(1); }
}

.m3-tray.danger {
  background: rgba(255, 107, 107, .09);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, .28);
}
.m3-hold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  color: var(--ink-3);
  font-size: 11px;
}
.m3-hold-slots { display: flex; gap: 5px; }
.m3-hold-slot {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 8px;
  font-family: var(--kaiti);
  font-size: 20px;
  font-weight: 700;
}
button.m3-hold-slot { cursor: pointer; touch-action: manipulation; }
.m3-fly {
  position: fixed !important;
  z-index: 120 !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.m3-hold-slot.on {
  color: #FFF6E5;
  border-style: solid;
  border-color: hsl(var(--hue, 30) 70% 62% / .85);
  background: hsl(var(--hue, 30) 55% 34%);
}
.m3-head b.hell { color: #ff9f7a; letter-spacing: 1px; }

.m3-head {
  flex: none;
  text-align: center;
  padding: 2px 0 4px;
}
.m3-head b {
  display: block;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--gold);
}
.m3-head span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}

.m3-over {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 8, 16, .74);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.m3-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.m3-title {
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}
.m3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 4px;
}
.m3-chips span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kaiti);
  font-size: 20px;
  color: #FFF6E5;
  border: 1px solid hsl(var(--hue, 30) 70% 62% / .55);
  background: hsl(var(--hue, 30) 55% 34%);
}

@media (max-width: 360px) {
  .m3-tile { font-size: 22px; border-radius: 9px; }
  .m3-slot { font-size: 20px; }
  .m3-hold { gap: 5px; font-size: 10px; }
}
/* ============================================================
   连消（交换三消）
   ============================================================ */

.sw-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
}

.sw-head {
  flex: none;
  text-align: center;
}
.sw-head b {
  display: block;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--gold);
}
.sw-head span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.5;
}

.sw-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  flex: none;
}

/*
  牌是绝对定位的：位置只由 transform 决定，所以「交换」和「下落」
  都是同一个元素在滑，而不是整块重绘。
  间隙靠 scale 缩一点，不动 width（动 width 会让过渡变卡）。
*/
.sw-cell {
  position: absolute;
  left: 0;
  top: 0;
  width: 14.2857%;
  height: 14.2857%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, hsl(var(--hue, 30) 62% 44%), hsl(var(--hue, 30) 58% 30%));
  color: #FFF6E5;
  font-family: var(--kaiti);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .34), inset 0 0 10px rgba(255, 255, 255, .14);
  transform: translate(0, 0);
  scale: .9;
  transition:
    transform var(--sw-move, 160ms) var(--sw-ease, cubic-bezier(.34, 1.28, .64, 1)),
    scale 110ms ease,
    opacity 120ms ease,
    box-shadow 110ms ease,
    filter 110ms ease;
  will-change: transform;
}
.sw-cell:active { scale: .84; }

/*
  选中：**不放大、不位移**，只在牌面内侧亮一圈。
  以前用 scale 放大 + 外发光，孩子看到的是「牌飘起来还偏到右边」——
  其实是外发光被邻居压住、放大又溢出格子造成的错觉。
*/
.sw-cell.sel {
  scale: .9;
  box-shadow:
    inset 0 0 0 3px #FFF4C8,
    inset 0 0 16px rgba(255, 226, 150, .62),
    0 2px 0 rgba(0, 0, 0, .34);
  z-index: 4;
  animation: swSel 900ms ease-in-out infinite;
}
@keyframes swSel {
  0%, 100% { filter: brightness(1.2) saturate(1.12); }
  50%      { filter: brightness(1.45) saturate(1.24); }
}

/* 打中：先鼓一下 */
.sw-cell.hit {
  scale: 1.06;
  filter: brightness(1.7);
  z-index: 5;
  transition: scale 90ms cubic-bezier(.2, .9, .3, 1.4), filter 90ms ease;
}

/* 再碎掉 */
.sw-cell.pop {
  scale: .05;
  opacity: 0;
  filter: brightness(2.1);
  z-index: 5;
  pointer-events: none;
  transition: scale 140ms cubic-bezier(.5, 0, .9, .6), opacity 140ms ease, filter 140ms ease;
}
  to { transform: scale(1); opacity: 1; }
}

.sw-goal { flex: none; }
.sw-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.sw-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFD774, #FF9A3C);
  transition: width .25s ease;
}
.sw-goal-t {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.sw-goal-t b { color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 玩法 hub */
.game-card { display: flex; flex-direction: column; gap: 10px; }
.game-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.game-h b { font-size: 17px; font-weight: 900; }
.game-h span { font-size: 11px; color: var(--ink-3); }

@media (max-width: 360px) {
  .sw-cell { font-size: 19px; border-radius: 8px; }
}
.sw-legend {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-3);
}
.sw-legend i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kaiti);
  font-size: 18px;
  font-style: normal;
  color: #FFF6E5;
  border: 1px solid hsl(var(--hue, 30) 70% 62% / .5);
  background: hsl(var(--hue, 30) 55% 34%);
}

/* 启动占位：一个字 + 一个跳动的秒表，让人觉得它在动 */
.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60vh;
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: 1px;
}
.boot-s {
  font-size: 11px;
  color: var(--ink-4, rgba(255, 255, 255, .22));
  font-variant-numeric: tabular-nums;
}
/* 6 秒还没起来才出现的手动出口：不自动重载，避免把慢启动打断 */
.boot-fix {
  margin-top: 2px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.boot-fix:active { transform: scale(.97); }
/* 首屏骨架：模块没下来之前先给界面轮廓，不是白屏也不是干等 */
.skel {
  padding: 14px 16px 0;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skel-top { display: flex; justify-content: space-between; margin-bottom: 22px; }
.skel-pill { width: 92px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.07); }
.skel-pill.skel-r { width: 74px; }
.skel-wallet { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.skel-num { width: 128px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.09); }
.skel-line { width: 96px; height: 14px; border-radius: 8px; background: rgba(255,255,255,.06); }
.skel-card { height: 74px; border-radius: 18px; background: rgba(255,255,255,.05); margin-bottom: 12px; }
.skel-card.skel-tall { height: 108px; }
.skel-btn { height: 62px; border-radius: 18px; background: rgba(255,255,255,.08); margin: 4px 0 14px; }
.skel-tabs { display: flex; justify-content: space-around; padding: 14px 0; }
.skel-tabs i { width: 26px; height: 26px; border-radius: 10px; background: rgba(255,255,255,.07); }

@keyframes skelPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}

/* 骨架还在时，把「正在唤醒」缩成角落里的小字 */
.boot { min-height: 0; padding: 18px 0 6px; gap: 4px; font-size: 12px; }
/* ---------------- 局内商店：花墨点买"着手" ---------------- */
.gshop {
  margin: 14px 0 4px;
  padding: 12px 14px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.gshop-t {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.gshop-t b { color: var(--gold); font-variant-numeric: tabular-nums; }
.gshop-row { display: flex; gap: 10px; }
.gshop-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 8px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: var(--ink-1);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  touch-action: manipulation;
}
.gshop-btn b { font-size: 15px; font-weight: 800; }
.gshop-btn span { font-size: 10px; color: var(--ink-4, rgba(255,255,255,.4)); }
.gshop-btn i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.gshop-btn:active { scale: .97; }
.gshop-btn.off {
  opacity: .38;
  color: var(--ink-3);
  cursor: default;
}
.gshop-btn.off i { color: var(--ink-3); }

/* ---------------- 文房加成条 ---------------- */
.perk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 10px;
}
.perk-chips span {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.perk-chips b { color: var(--gold); }

/* ---------------- 消除连线与区域飘分 ---------------- */
.sw-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
  overflow: visible;
}
.sw-links line {
  stroke: #FFF0A8;
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(255, 205, 86, .95));
  animation: swLink 240ms ease-out forwards;
}
@keyframes swLink {
  from { opacity: 0; stroke-dasharray: 0 200; }
  to { opacity: 1; stroke-dasharray: 200 0; }
}
.sw-score-fly {
  position: absolute;
  z-index: 26;
  pointer-events: none;
  color: #FFF0A8;
  font-size: 26px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(90, 42, 0, .9), 0 0 12px rgba(255, 190, 62, .8);
  animation: swScoreFly 680ms cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes swScoreFly {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, -55%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -155%) scale(1.15); }
}

/* ---------------- 连击横幅 ---------------- */
.sw-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 20;
  animation: swBurst 760ms cubic-bezier(.2, .9, .3, 1.15) forwards;
}
/* 深色光晕打底：牌面五颜六色，不加底的金色大字会糊在一起 */
.sw-burst::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 270px;
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(10, 7, 18, .84) 0%,
    rgba(10, 7, 18, .6) 42%,
    rgba(10, 7, 18, 0) 72%);
  z-index: -1;
}
.sw-burst b {
  position: relative;
  font-family: var(--kaiti);
  font-size: 54px;
  line-height: 1;
  color: #FFE9A8;
  text-shadow:
    0 0 22px rgba(255, 196, 74, 1),
    0 2px 0 rgba(90, 42, 0, .9),
    0 6px 0 rgba(70, 30, 0, .6);
}
.sw-burst span {
  position: relative;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFD770;
  background: rgba(10, 7, 18, .72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.sw-burst[data-n="3"] b { font-size: 64px; }
.sw-burst[data-n="4"] b { font-size: 76px; }
.sw-burst[data-n="5"] b { font-size: 88px; }

@keyframes swBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-8deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(2deg); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  74%  { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.06); }
}

/* 连锁越多，棋盘自己顶一下（只有棋盘动，不晃整屏） */
.sw-board.bump { animation: swBump 240ms ease-out; }

@keyframes swBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(var(--bump, 1.04)); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sw-cell.sel { animation: none; filter: brightness(1.35); }
  .sw-burst { animation-duration: 400ms; }
  .sw-board.bump { animation: none; }
}

/* 交换：慢一点、缓入缓出看得清；下落：稍快、落地带一点回弹 */
.sw-board[data-mode="swap"] {
  --sw-move: 300ms;
  --sw-ease: cubic-bezier(.42, 0, .22, 1);
}
.sw-board[data-mode="fall"] {
  --sw-move: 210ms;
  --sw-ease: cubic-bezier(.3, 1.06, .55, 1);
}

/* ---------------- 消掉的字：摆出来给孩子看 ---------------- */
.swseen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  min-height: 46px;
  margin: 8px 0 2px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.swseen.on { opacity: 1; }
.swseen-t {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 1px;
}
.swseen-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-family: var(--kaiti);
  font-size: 23px;
  font-weight: 700;
  color: #FFF6E5;
  background: linear-gradient(160deg, hsl(var(--hue, 30) 62% 46%), hsl(var(--hue, 30) 58% 32%));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .34), inset 0 0 10px rgba(255, 255, 255, .16);
  opacity: 0;
  transform: scale(.5) translateY(10px);
}
.swseen.on .swseen-chip {
  animation: swSeenIn 340ms cubic-bezier(.2, .9, .3, 1.4) forwards;
}
@keyframes swSeenIn {
  60% { opacity: 1; transform: scale(1.12) translateY(0); }
  to  { opacity: 1; transform: scale(1) translateY(0); }
}
.swseen-chip i {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 9px;
  font-style: normal;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  color: #2A1704;
  background: var(--gold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  .sw-board[data-mode="swap"] { --sw-move: 160ms; }
  .sw-board[data-mode="fall"] { --sw-move: 140ms; }
  .swseen-chip { animation-duration: 160ms; }
}

/* ---------------- 关卡：局内标签 / 玩法页进度 / 结算星级 ---------------- */
.lv-tag {
  flex: none;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--gold);
  background: rgba(255, 196, 74, .14);
  border: 1px solid rgba(255, 196, 74, .3);
}
.lv-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.lv-chip b {
  font-size: 17px;
  color: var(--gold);
}
.lv-chip i {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
}
.lv-line {
  margin: 2px 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--gold);
}
/* 节奏提示：温和提醒，不是惩罚 */
.pace-hint {
  margin: 6px 0 2px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
  background: rgba(120, 200, 255, .1);
  border: 1px solid rgba(120, 200, 255, .22);
}
.pace-hint.strong {
  color: var(--gold);
  background: rgba(255, 196, 74, .1);
  border-color: rgba(255, 196, 74, .3);
}

/* ============================================================
   儿童节奏版：首屏一个主行动、温和收工、清晰反馈
   ============================================================ */
:root { --ink-3: #A59DB8; }
.hint { font-size: 12.5px; }
.prompt, .mascot .bub { font-size: 13px; color: var(--ink-2); }
.wallet { padding: 2px 16px 8px; }
.wallet .mp { font-size: 34px; }
.wallet-extra { margin-top: 3px; font-size: 11px; }

.journey {
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(52, 211, 153, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(52, 211, 153, .11), rgba(90, 120, 255, .07));
}
.journey.done { border-color: rgba(167, 139, 250, .35); }
.journey-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.journey-h b { font-size: 14px; }
.journey-h span, .journey-note { color: var(--ink-2); font-size: 11px; }
.journey-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ink-2); }
.journey-row i { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.journey-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #8CE8C3); }
.journey-note { margin-top: 7px; line-height: 1.45; }
.home-play-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: -4px 0 14px; }
.cultivate.done { background: linear-gradient(180deg, #C6B8FE, #8C72DE); box-shadow: 0 8px 0 #59449F, 0 14px 28px rgba(90, 70, 160, .3); }

.field {
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 220, 140, .28) 0 16px, transparent 17px),
    linear-gradient(155deg, transparent 55%, rgba(52, 211, 153, .09) 56% 72%, transparent 73%),
    linear-gradient(25deg, rgba(167, 139, 250, .18), rgba(255, 194, 75, .08));
  box-shadow: inset 0 0 40px rgba(90, 70, 150, .12);
}
.field::after { content: "字"; position: absolute; right: 8px; bottom: -32px; z-index: -1; font: 100px/1 var(--kaiti); color: rgba(255, 255, 255, .025); }
.orb { color: #FFF6DF; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.orb.dim { color: #D8D1E4; }

.word-target { margin: 8px 0 12px; padding: 14px; text-align: center; border: 1px solid rgba(255, 194, 75, .3); border-radius: 16px; background: rgba(255, 194, 75, .08); }
.word-target b { display: block; font: 700 36px/1.25 var(--kaiti); color: var(--gold); letter-spacing: 5px; }
.word-target span { display: block; margin-top: 5px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }

.rest-screen { flex: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(52, 211, 153, .13), transparent 45%); }
.rest-sky { font-size: 54px; }
.rest-orb { width: 88px; height: 88px; margin: 20px; display: grid; place-items: center; border-radius: 50%; color: #163527; background: #9BE7C4; font-size: 30px; font-weight: 900; box-shadow: 0 0 50px rgba(52, 211, 153, .25); }
.rest-screen h2 { margin: 0 0 10px; }
.rest-screen p { color: var(--ink-2); line-height: 1.8; }
.rest-count { margin-top: 16px; color: var(--ink-2); }
.rest-count b { color: var(--mint); font-size: 24px; }
.wrap-card { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 16px; text-align: center; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .28); }
.wrap-card span { color: var(--ink-2); font-size: 12px; line-height: 1.5; }

.parent-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.parent-metrics div { padding: 10px 4px; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.parent-metrics b { display: block; color: var(--gold); font-size: 24px; }
.parent-metrics span { color: var(--ink-2); font-size: 11px; }
.weak-title { margin: 14px 0 8px; color: var(--ink-2); font-size: 12px; }
.weak-chars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.weak-chars span { min-width: 0; padding: 7px 2px; text-align: center; border: 1px solid var(--line); border-radius: 10px; }
.weak-chars span.due { border-color: rgba(255, 194, 75, .45); background: rgba(255, 194, 75, .08); }
.weak-chars b { display: block; font: 700 25px/1.2 var(--kaiti); }
.weak-chars i { display: block; margin-top: 3px; color: var(--ink-3); font-size: 8px; font-style: normal; white-space: nowrap; }

.pool-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pool-mini, .pool-more { width: 34px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font: 700 19px/1 var(--kaiti); }
.pool-mini.blue { border-color: #73B7FF; }
.pool-mini.purple { border-color: var(--violet); }
.pool-mini.gold { border-color: var(--gold); color: var(--gold); }
.pool-more { font: 700 11px/1 sans-serif; color: var(--ink-2); }

.bt-unit.hurt { animation: btHurt .28s ease; border-color: rgba(255, 107, 129, .7); }
@keyframes btHurt { 35% { transform: translateX(-5px) scale(.96); filter: brightness(1.5); } 70% { transform: translateX(4px); } }
.bt-mid .skill-banner { display: inline-block; padding: 4px 12px; border-radius: 99px; color: #E8DDFF; background: rgba(167, 139, 250, .24); font-size: 13px; font-weight: 800; }
#bt-result:not(:empty) { position: sticky; bottom: 0; z-index: 3; }
.bt-res { box-shadow: 0 -12px 30px rgba(0, 0, 0, .3); animation: resultDrawer .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes resultDrawer { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 340px) {
  .home-play-actions .btn { padding-inline: 5px; font-size: 12px; white-space: nowrap; }
}

@media (max-height: 700px) {
  .hud { padding-top: 7px; }
  .wallet .mp { font-size: 28px; }
  .wallet-extra, .journey-note, .decor-hint { display: none !important; }
  .journey { padding: 9px 12px; margin-bottom: 9px; }
  .journey-h { margin-bottom: 4px; }
  .journey-row { margin: 4px 0; }
  .onboard { padding: 10px 12px; margin-bottom: 10px; }
  .onboard .ob-row:not(.now):not(.done) { display: none; }
  .onboard .ob-row.done { display: none; }
  .cultivate { padding: 12px; margin-bottom: 10px; }
  .cultivate .big { font-size: 19px; }
  .home-play-actions { margin-bottom: 10px; }
  .field { padding: 10px; margin-bottom: 10px; }
  .field .cap { margin-bottom: 6px; }
  .orb { width: 38px; height: 38px; font-size: 20px; }
}

/* ---------------- 档案选择 ---------------- */
.profiles-intro { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.profiles-intro b { font-size: 18px; }
.profiles-intro span { color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-cell { position: relative; min-width: 0; }
.profile-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.profile-edit:active { transform: scale(.92); }
.profile-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .045);
  text-align: left;
  cursor: pointer;
}
.profile-card.current { border-color: var(--gold); background: rgba(255, 194, 75, .09); }
.profile-card:active { transform: scale(.98); }
.profile-card span { display: block; min-width: 0; }
.profile-name { color: var(--ink); font-size: 17px; font-weight: 900; margin-bottom: 7px; padding-right: 26px; }
.profile-progress { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.profile-stats { color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.profile-time { color: var(--ink-3); font-size: 10px; margin-top: 5px; }
/* 账号卡上的「持有卡片」摘要：总张数 + 最多 5 张卡面预览 */
.profile-card .profile-cards {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .10);
}
.profile-card .profile-cards.empty { gap: 0; }
.profile-card .pc-count { flex: none; color: var(--ink-3); font-size: 10px; font-weight: 700; white-space: nowrap; }
.profile-card .pc-count b { color: var(--gold); font-size: 12px; }
.profile-card .pc-list { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 0; }
.pc-mini {
  width: 24px; height: 28px; flex: none; display: inline-grid; place-items: center;
  border-radius: 6px; border: 1px solid var(--rc, var(--line));
  background: rgba(255, 255, 255, .06); color: var(--ink);
  font: 700 12px/1 var(--kaiti); font-style: normal; overflow: hidden;
}
.pc-mini.r1 { border-color: #E8E4F2; }
.pc-mini.r2 { border-color: #7CC7FF; }
.pc-mini.r3 { border-color: #C4A2FF; }
.pc-mini.r4 { border-color: var(--gold); }
.pc-mini.r5 { border-color: #8B7BD8; background: rgba(44, 36, 70, .55); }
.pc-more {
  flex: none; padding: 0 4px; height: 22px; display: inline-grid; place-items: center;
  border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--ink-3);
  font: 700 9px/1 ui-monospace, monospace; font-style: normal;
}
.gain-pill.online { color: var(--mint); }
.gain-pill.offline { color: var(--ink-3); }

@media (max-width: 340px) {
  .profile-grid { grid-template-columns: 1fr; }
  .bt-arena { padding-inline: 5px; }
  .bt-side { gap: 4px; }
  .bt-unit { padding-inline: 3px; }
  .bu-face { font-size: 27px; }
  .bt-attack-text { padding-inline: 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-unit.hurt, .bt-unit.acting, .bt-attack-text, .bl-line, .bt-res, .rest-orb { animation: none !important; }
  .bt-unit, .bu-bar i { transition: none; }
}

/* ---------------- 墨水屏专用模式 ---------------- */
html[data-eink="true"] {
  --bg-0: #FFFFFF;
  --bg-1: #FFFFFF;
  --bg-2: #F2F2F2;
  --panel: #FFFFFF;
  --panel-2: #EEEEEE;
  --line: #000000;
  --ink: #000000;
  --ink-2: #111111;
  --ink-3: #333333;
  --gold: #000000;
  --gold-2: #000000;
  --coral: #000000;
  --mint: #000000;
  --violet: #000000;
  --red: #000000;
  --shadow: none;
}
html[data-eink="true"] *,
html[data-eink="true"] *::before,
html[data-eink="true"] *::after {
  color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-eink="true"] body,
html[data-eink="true"] #app {
  background: #FFFFFF !important;
}
html[data-eink="true"] .panel,
html[data-eink="true"] .rank,
html[data-eink="true"] .wallet,
html[data-eink="true"] .profile-card,
html[data-eink="true"] .m3-card,
html[data-eink="true"] .stage-row,
html[data-eink="true"] .row,
html[data-eink="true"] .tabbar,
html[data-eink="true"] .bt-unit,
html[data-eink="true"] .bt-log {
  background-color: #FFFFFF !important;
  border-color: #000000 !important;
}
html[data-eink="true"] .btn,
html[data-eink="true"] .cultivate,
html[data-eink="true"] .buy,
html[data-eink="true"] .icon-btn,
html[data-eink="true"] .gbtn,
html[data-eink="true"] .gshop-btn,
html[data-eink="true"] .tab {
  background-color: #FFFFFF !important;
  border: 1px solid #000000 !important;
}
html[data-eink="true"] .btn.primary,
html[data-eink="true"] .cultivate,
html[data-eink="true"] .tab.on,
html[data-eink="true"] .profile-card.current {
  background-color: #DDDDDD !important;
  border: 2px solid #000000 !important;
}
html[data-eink="true"] .pc-mini,
html[data-eink="true"] .pc-more {
  background: #FFFFFF !important; border-color: #000000 !important; color: #000000 !important;
}
html[data-eink="true"] #fx-layer,
html[data-eink="true"] .sw-links,
html[data-eink="true"] .sw-burst,
html[data-eink="true"] .m3-board::before {
  display: none !important;
}
html[data-eink="true"] .m3-tile {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  border: 2px solid #000000 !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-eink="true"] .m3-tile.depth-1 {
  background-color: #DDDDDD !important;
}
html[data-eink="true"] .m3-tile.depth-2 {
  background-color: #FFFFFF !important;
  background-image: repeating-linear-gradient(135deg, #FFFFFF 0, #FFFFFF 4px, #BBBBBB 4px, #BBBBBB 5px) !important;
  border-style: dashed !important;
}
html[data-eink="true"] .m3-tile.off {
  opacity: 0 !important;
}
html[data-eink="true"] .sw-cell {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  border: 2px solid #000000 !important;
  filter: none !important;
}
html[data-eink="true"] .sw-cell.sel {
  border-width: 4px !important;
}
html[data-eink="true"] [disabled],
html[data-eink="true"] .off:not(.m3-tile),
html[data-eink="true"] .locked {
  opacity: .45 !important;
}

/* 云端冲突：本机 vs 云端摘要并排对比（F-03） */
.cloud-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
}
.cd-col {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
.cd-col b { display: block; margin-bottom: 4px; color: var(--ink); }
.cd-col span { display: block; overflow-wrap: anywhere; }
.cd-col b + span { margin-top: 2px; }
.cd-none { color: var(--ink-3); }
html[data-eink="true"] .cloud-diff { grid-template-columns: 1fr; }

/* 换设备恢复：16 位同步码输入 */
.cloud-code-row { display: flex; gap: 8px; align-items: stretch; }
.cloud-code-row .btn { flex: none; }
.text-input {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  padding: 12px 14px;
  font: 700 16px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.text-input::placeholder { color: var(--ink-3); font-weight: 500; letter-spacing: .04em; }
.text-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* ============================================================
   三阶五色 · 卡面 / 升色台 / 战斗阶位（v3.7）
   ============================================================ */
.cface.r1 { background: linear-gradient(165deg, rgba(232, 228, 242, .14), rgba(255, 255, 255, .03)); }
.cface.r2 { background: linear-gradient(165deg, rgba(124, 199, 255, .20), rgba(255, 255, 255, .03)); }
.cface.r3 { background: linear-gradient(165deg, rgba(196, 162, 255, .26), rgba(255, 255, 255, .03)); }
.cface.r4 { background: linear-gradient(165deg, rgba(255, 194, 75, .26), rgba(255, 255, 255, .04)); }
.cface.r5 {
  background: linear-gradient(165deg, rgba(44, 36, 70, .96), rgba(16, 13, 28, .98));
  border-color: #8B7BD8;
  box-shadow: 0 0 0 1px rgba(255, 194, 75, .55), 0 0 18px rgba(139, 123, 216, .42);
}
.cface.r5 .cf-rar { background: #8B7BD8; color: #FFF7E6; }
.cface.r5 .cf-ch { color: #F4EFFF; text-shadow: 0 0 14px rgba(180, 160, 255, .75); }
.cface.r5 .cf-name { color: #E9DFFF; }
.cface.treasure { border-color: var(--gold); }
.cface.treasure .cf-rar { background: linear-gradient(90deg, #FFC24B, #FFE7A8); color: #3A2600; }
.cface .cf-rar { white-space: nowrap; }
.cface.word .cf-name, .cface.sentence .cf-name { letter-spacing: 0; }

.fuse-chip.r1 { border-color: #E8E4F2; }
.fuse-chip.r2 { border-color: #7CC7FF; color: #CFE9FF; }
.fuse-chip.r3 { border-color: #C4A2FF; color: #E6D8FF; }
.fuse-chip.r4 { border-color: var(--gold); color: var(--gold); }
.fuse-chip.r5 { border-color: #8B7BD8; color: #F4EFFF; background: rgba(44, 36, 70, .7); }
.fuse-chip i { font-size: 8px; white-space: nowrap; letter-spacing: 0; }

.fuse-slot.r1 { border-color: #E8E4F2; }
.fuse-slot.r2 { border-color: #7CC7FF; }
.fuse-slot.r3 { border-color: #C4A2FF; }
.fuse-slot.r4 { border-color: var(--gold); }
.fuse-slot.r5 { border-color: #8B7BD8; background: rgba(44, 36, 70, .55); }

.pool-mini.white { border-color: #E8E4F2; }
.pool-mini.black { border-color: #8B7BD8; color: #F4EFFF; background: rgba(44, 36, 70, .65); }

/* 十合一升色台 */
.promote-row {
  margin-top: 10px; padding: 10px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255, 255, 255, .035);
}
.promote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.promote-head b { font-size: 13px; }
.promote-head b em { color: var(--ink-3); font-style: normal; font-weight: 600; }
.promote-head span { font-size: 10px; color: var(--ink-3); }
.promote-mats { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.pm-chip {
  min-width: 26px; height: 30px; padding: 0 4px; display: inline-grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  font: 700 15px/1 var(--kaiti); color: var(--ink);
}
.pm-chip.r1 { border-color: #E8E4F2; }
.pm-chip.r2 { border-color: #7CC7FF; }
.pm-chip.r3 { border-color: #C4A2FF; }
.pm-chip.r4 { border-color: var(--gold); }
.pm-select {
  width: 100%; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(20, 17, 34, .8); color: var(--ink);
  font: 600 12px/1.3 inherit;
}
.promote-row .btn { width: 100%; }

/* 战斗阶位 */
.bu-stage {
  margin-top: 1px; font-size: 8px; line-height: 1.2; color: var(--ink-3);
  border: 1px solid var(--rc, var(--line)); border-radius: 99px;
  padding: 0 4px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.bl-line.hit.upstage b { color: var(--coral); }

/* ============================================================
   多人对战 · 三局两胜
   ============================================================ */
.duel-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.duel-account div { min-width: 0; }
.duel-account b { display: block; font-size: 13px; }
.duel-account span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.duel-deckline { margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.duel-join { display: flex; align-items: stretch; gap: 8px; }
.duel-input {
  flex: 1 1 auto; min-width: 120px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); color: var(--ink); font: 800 18px/1 ui-monospace, monospace;
  letter-spacing: 4px; text-align: center;
}
.duel-input:focus { outline: 2px solid rgba(255, 194, 75, .65); outline-offset: 1px; }
/* .btn 默认 width:100%；放进 flex 行会把输入框挤成 0 宽，必须让加入按钮按内容宽 */
.duel-join .btn { width: auto; flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
.duel-code { font: 800 22px/1 ui-monospace, monospace; color: var(--gold); letter-spacing: 2px; }
.duel-players { display: flex; align-items: stretch; gap: 8px; }
.duel-player {
  flex: 1; min-width: 0; padding: 9px; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); display: flex; flex-direction: column; gap: 2px;
}
.duel-player.me { border-color: rgba(124, 199, 255, .5); }
.duel-player.foe { border-color: rgba(255, 107, 129, .4); }
.duel-player b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-player span { font-size: 10px; color: var(--ink-3); }
.duel-player i { font-size: 10px; font-style: normal; color: var(--gold); margin-top: 2px; }
.duel-vs { align-self: center; font: 900 14px/1 ui-monospace, monospace; color: var(--ink-3); }
.duel-slots { display: flex; gap: 8px; margin-top: 8px; }
.duel-slot {
  flex: 1; min-width: 0; padding: 6px; border-radius: 12px; border: 1px dashed var(--line);
  background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.duel-slot > span { font-size: 10px; color: var(--ink-3); }
.duel-slot > em { font-size: 10px; color: var(--ink-3); font-style: normal; padding: 14px 0; }
.duel-slot.filled { border-style: solid; }
.duel-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.duel-pick {
  position: relative; padding: 0; border: 0; background: none; text-align: left;
}
.duel-pick:disabled { opacity: .6; }
.duel-pick.on .duel-mini { outline: 2px solid var(--gold); }
.duel-pick > i {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: #2A1A00;
  font: 900 10px/1 ui-monospace, monospace; font-style: normal;
}
.duel-mini {
  padding: 7px 5px; border-radius: 11px; border: 1.5px solid var(--rc, var(--line));
  background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 54px;
  justify-content: center;
}
.duel-mini b { font: 800 19px/1.1 var(--kaiti); color: var(--ink); }
.duel-mini span { font-size: 8px; color: var(--ink-3); white-space: nowrap; }
.duel-lanes { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.duel-lane {
  display: grid; grid-template-columns: 26px 1fr 26px 1fr; align-items: center; gap: 6px;
  padding: 6px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}
.duel-lane.win { border-color: rgba(255, 194, 75, .55); background: rgba(255, 194, 75, .07); }
.duel-lane.lose { opacity: .72; }
.duel-lane > b { text-align: center; font-size: 12px; color: var(--ink-2); }
.duel-lane.win > b { color: var(--gold); }
.duel-lane .dl-tag { font-size: 10px; color: var(--ink-3); text-align: center; }
.duel-lane .dl-hp { grid-column: 2 / -1; font-size: 8px; color: var(--ink-3); text-align: right; }
.duel-actions { display: flex; gap: 8px; margin-top: 10px; }
.duel-actions .btn { flex: 1; }

/* 合体配对：搜索 / 按词找 / 缺一张 */
.fuse-search-row { display: flex; gap: 8px; margin-top: 8px; }
.fuse-search-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06); color: var(--ink); font: 600 13px/1.2 inherit;
}
.fuse-search-input:focus { outline: 2px solid rgba(255, 194, 75, .6); outline-offset: 1px; }
.fuse-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fuse-quick .btn { flex: 1; min-width: 92px; }
.fuse-found { margin-top: 9px; }
.fuse-found-grid { display: flex; flex-direction: column; gap: 7px; }
.fuse-found-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px;
  padding: 8px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
}
.ff-main { min-width: 0; }
.ff-main b { font-size: 16px; }
.ff-main span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.ff-pair { display: flex; align-items: center; gap: 4px; grid-row: 2; grid-column: 1; }
.ff-pair > b { color: var(--ink-3); font-size: 12px; }
.ff-chip {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 6px; border-radius: 8px;
  border: 1px solid var(--line); font: 700 15px/1.2 var(--kaiti);
}
.ff-chip i { font: 600 8px/1 ui-monospace, monospace; font-style: normal; color: var(--ink-3); }
.ff-chip.owned { border-color: rgba(124, 199, 255, .55); }
.ff-chip.missing { opacity: .55; border-style: dashed; }
.fuse-found-row .btn { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.fuse-row[hidden], .fuse-owned[hidden] { display: none !important; }

/* 快速匹配 */
.duel-quick-wait {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 13px; border: 1px solid rgba(255, 194, 75, .45);
  background: rgba(255, 194, 75, .07);
}
.duel-quick-wait > div:nth-child(2) { flex: 1; min-width: 0; }
.duel-quick-wait b { display: block; font-size: 14px; }
.duel-quick-wait span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.dq-spin {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px dashed rgba(255, 194, 75, .6); color: var(--gold); font-size: 16px;
  animation: dqspin 1.6s linear infinite;
}
@keyframes dqspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dq-spin { animation: none; } }

/* ============================================================
   桌面 / 平板竖屏（PC 1080×1920、iPad 等）
   - 不再把手机 560px 列直接摆在宽屏中间
   - 首页用两列面板，主按钮/字灵阵/旅程保持通栏
   - 答题与连消限制最大宽度，避免棋盘被拉成巨幅
   ============================================================ */
@media (min-width: 760px) {
  #app { max-width: min(94vw, 960px); }
  .hud { padding: 16px 24px 8px; }
  .wallet { padding: 4px 24px 12px; }
  .wallet .mp { font-size: 50px; }
  .play-top { padding: 12px 24px 8px; }
  .screen { padding: 6px 24px 24px; }
  .panel { padding: 18px 20px; }
  .panel-h b { font-size: 16px; }
  .panel-h span { font-size: 12.5px; }
  .hint { font-size: 12.5px; line-height: 1.65; }
  .journey-note { font-size: 12.5px; }
  .field .cap { font-size: 13px; }
  .ob-h span, .ob-row span { font-size: 12px; }
  .tabbar { justify-content: center; gap: 6px; padding: 8px 16px 10px; }
  .tab { flex: 0 1 118px; font-size: 11px; }
  .tab .i { font-size: 21px; }
  .toast { bottom: 100px; }
  .sw-screen { width: 100%; max-width: 620px; margin: 0 auto; }
  .qbody { width: 100%; max-width: 780px; margin: 0 auto; }
}

/* 首页只在「面板区」做两列；外层保持普通文档流。
   横屏高度不足时，Grid 的自动行会被压缩，字灵阵会压到下面两列，不能这么做。 */
@media (min-width: 820px) {
  .home-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .home-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .home-col > * { margin-bottom: 0; }
}

/* 合体页：组词/组句切换 + 随机试合台 + 升色进度 */
.fuse-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.fuse-tabs button {
  padding: 10px 8px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-3); font: 800 14px/1.2 inherit;
  text-align: center; touch-action: manipulation;
}
.fuse-tabs button span { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--ink-3); }
.fuse-tabs button.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 194, 75, .10); box-shadow: 0 0 18px rgba(255, 194, 75, .10); }
.fuse-tabs button.on span { color: var(--gold-2); }
.fuse-round-tools { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.fuse-round-tools .fuse-search-input { flex: 1; min-width: 120px; }
.fuse-round-tools .btn { width: auto; flex: none; padding-left: 14px; padding-right: 14px; }
.fuse-owned.word b { font-size: 15px; line-height: 1.15; letter-spacing: 0; }
.fuse-owned.word i { font-size: 8px; }
.promote-row.partial { opacity: .9; }
.promote-row.partial .promote-head b { color: var(--ink-2); }
.promote-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 8px; }
.promote-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--gold)); transition: width .35s ease; }
@media (max-width: 360px) {
  .fuse-round-tools { flex-wrap: wrap; }
  .fuse-round-tools .fuse-search-input { flex-basis: 100%; }
}

/* ---- v4.0.7 合体：收藏总览 + 我的卡柜 ---- */
.fuse-sum {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgba(255, 194, 75, .28);
  background: linear-gradient(160deg, rgba(255, 194, 75, .09), rgba(255, 255, 255, .02));
}
.fs-big { flex: none; min-width: 58px; text-align: center; }
.fs-big b { display: block; font: 800 26px/1 ui-monospace, monospace; color: var(--gold); font-variant-numeric: tabular-nums; }
.fs-big span { display: block; margin-top: 3px; font-size: 9px; color: var(--ink-3); }
.fs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fs-kinds { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.fs-kinds b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fs-kinds em { margin: 0 3px; font-style: normal; color: var(--ink-3); }
.fs-cols { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--ink-3); }
.fs-col { display: inline-flex; align-items: center; gap: 3px; }
.fs-col i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.fs-col.r1 { color: #E8E4F2; }
.fs-col.r2 { color: #7CC7FF; }
.fs-col.r3 { color: #C4A2FF; }
.fs-col.r4 { color: var(--gold); }
.fs-col.r5 { color: #8B7BD8; }
.fs-col b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fs-note { font-size: 10px; line-height: 1.45; color: var(--ink-3); }
.fs-note b { color: var(--gold); font-variant-numeric: tabular-nums; }
.fuse-tabs button.mine-tab { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 8px; }
.fuse-tabs button.mine-tab span { display: inline; margin: 0; }
.mine-filters { margin-top: 4px; }
.mine-group { margin-top: 12px; }
.mine-head { display: flex; align-items: baseline; gap: 8px; }
.mine-head b { font-size: 12px; color: var(--ink-2); }
.mine-head span { font-size: 10px; color: var(--ink-3); }
.mine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; margin-top: 6px; }
.mine-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 3px 2px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035); color: var(--ink); font-family: var(--kaiti);
  touch-action: manipulation;
}
.mine-chip b { font-size: 21px; line-height: 1.05; font-weight: 700; }
.mine-chip.long b { font-size: 13px; letter-spacing: 0; }
.mine-chip i { margin-top: 3px; font: 600 8px/1 ui-monospace, monospace; color: var(--ink-3); font-style: normal; }
.mine-chip.r1 { border-color: #E8E4F2; }
.mine-chip.r2 { border-color: #7CC7FF; }
.mine-chip.r3 { border-color: #C4A2FF; }
.mine-chip.r4 { border-color: var(--gold); }
.mine-chip.r5 { border-color: #8B7BD8; background: rgba(44, 36, 70, .5); color: #F4EFFF; }
.mine-chip.partner { border-color: rgba(255, 194, 75, .55); }
.mine-chip.deck::after { content: "⚔"; position: absolute; top: 3px; right: 4px; font-size: 8px; color: #9BD8FF; }
.mine-chip.off { opacity: .4; filter: grayscale(1); pointer-events: none; }
.mine-chip .fuse-spark { left: 4px; top: 3px; }
.pm-chip.empty { border-style: dashed; background: transparent; opacity: .45; }
.fuse-rule-panel { margin-top: 12px; }
.fuse-rule-panel > summary {
  display: flex; align-items: baseline; gap: 8px; min-height: 22px;
  cursor: pointer; list-style: none; touch-action: manipulation;
}
.fuse-rule-panel > summary::-webkit-details-marker { display: none; }
.fuse-rule-panel > summary b { flex: none; font-size: 13px; color: var(--ink); white-space: nowrap; }
.fuse-rule-panel > summary span { font-size: 10px; color: var(--ink-3); }
.fuse-rule-panel[open] > summary { margin-bottom: 6px; }
@media (max-width: 360px) {
  .fuse-sum { gap: 8px; padding: 8px; }
  .fs-big b { font-size: 22px; }
  .mine-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .mine-chip b { font-size: 19px; }
}

/* ============================================================
   多人对战 · 车轮战演出
   - 每个小回合一张战报，逐条入场
   - 血条从本回合起始值动画到结束值；胜者回血 30%
   - 败方受击闪光、胜方金光、VS 处火花
   ============================================================ */
.duel-relay { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.duel-round {
  position: relative;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  overflow: hidden;
  animation: duelRoundIn .45s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * .30s);
}
.duel-round.win { border-color: rgba(52, 211, 153, .40); }
.duel-round.lose { border-color: rgba(255, 107, 129, .30); }
.dr-head { display: flex; align-items: baseline; gap: 8px; font-size: 10px; color: var(--ink-3); }
.dr-head b { font-size: 12px; color: var(--ink); }
.duel-round.win .dr-head b { color: var(--mint); }
.duel-round.lose .dr-head b { color: var(--coral); }
.dr-head span:last-child { margin-left: auto; color: var(--mint); font-weight: 800; white-space: nowrap; }
.dr-fight {
  display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  gap: 7px; align-items: center; margin-top: 7px;
}
.dr-side {
  position: relative; min-width: 0; padding: 5px; border-radius: 11px;
  border: 1px solid transparent; display: flex; flex-direction: column; gap: 4px;
}
.dr-side.side-win { border-color: rgba(52, 211, 153, .38); background: rgba(52, 211, 153, .055); animation: drWinPulse .8s ease calc(var(--i, 0) * .30s + .90s) both; }
.dr-side.side-lose { opacity: .74; }
.dr-side.side-lose::after {
  content: ""; position: absolute; inset: 0; border-radius: 11px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 129, .38), transparent 68%);
  animation: drHitFlash .42s ease calc(var(--i, 0) * .30s + .18s) both;
}
.dr-side .duel-mini { width: 100%; }
.dr-hp { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.dr-hp i {
  display: block; height: 100%; width: var(--end); border-radius: 99px;
  background: linear-gradient(90deg, var(--mint), #7CE7C0);
  animation: drHp .85s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * .30s + .18s);
}
.dr-side.side-lose .dr-hp i { background: linear-gradient(90deg, var(--red), #FFA08E); }
.dr-hpnum { font: 600 8px/1.2 ui-monospace, monospace; color: var(--ink-3); text-align: right; }
.dr-mid { text-align: center; position: relative; }
.dr-mid b { display: block; font: 900 12px/1 var(--mono, ui-monospace, monospace); color: var(--gold); }
.dr-mid i { font-size: 8px; font-style: normal; color: var(--ink-3); }
.dr-mid::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, .55), rgba(255, 107, 129, .16) 55%, transparent 70%);
  animation: drSpark 1.1s ease calc(var(--i, 0) * .30s + .30s) both;
}
.duel-relay-end { margin-top: 8px; text-align: center; font-size: 10px; color: var(--ink-2); }
@keyframes duelRoundIn {
  /* 不用 opacity 做入场：逐条延迟时屏幕外的行可能被截图/低性能设备卡成空白 */
  from { transform: translateY(10px) scale(.985); }
  to { transform: translateY(0) scale(1); }
}
@keyframes drHp {
  from { width: var(--start); }
  to { width: var(--end); }
}
@keyframes drSpark {
  0% { opacity: 0; transform: scale(.4) rotate(-25deg); }
  45% { opacity: 1; transform: scale(1.25) rotate(10deg); }
  100% { opacity: .15; transform: scale(.8) rotate(0); }
}
@keyframes drWinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  45% { box-shadow: 0 0 18px rgba(52, 211, 153, .35); }
}
@keyframes drHitFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-round, .dr-side.side-win, .dr-side.side-lose::after, .dr-hp i, .dr-mid::before { animation: none !important; }
  .dr-hp i { width: var(--end); }
}

/* ---- 学习周报复制弹窗（v4.0） ---- */
.copy-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(8, 6, 14, .74);
}
.cm-box {
  width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
}
.cm-box textarea { width: 100%; height: 240px; resize: vertical; font: 500 13px/1.6 ui-monospace, monospace; }

/* ---- 每日字灵擂台（v4.0） ---- */
.daily-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.daily-row:first-of-type { border-top: 0; }
.dt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt-info b { font-size: 14px; }
.dt-info span { font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.dt-buff { color: var(--gold) !important; }
.daily-row .btn { flex: 0 0 auto; width: auto; min-width: 76px; }
.daily-row .btn.done { opacity: .55; }

/* ---- 同机双人热座切磋（v4.0） ---- */
.pp-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-card .pp-order {
  position: absolute; top: 3px; right: 4px; font: 700 11px/1 ui-monospace, monospace;
  color: #2A1704; background: var(--gold); border-radius: 50%; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.pp-round { padding: 8px 0; border-top: 1px solid var(--line); }
.pp-round:first-of-type { border-top: 0; }
.ppr-h { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.ppr-h b { color: var(--ink); }
.ppr-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pp-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; display: block; }
.pp-bar b { display: block; height: 100%; border-radius: 999px; }
.pp-bar.a b { background: linear-gradient(90deg, #6EE7B7, #34D399); }
.pp-bar.b b { background: linear-gradient(90deg, #FDA4AF, #FB7185); }
.ppr-row span { font: 600 10px/1 ui-monospace, monospace; color: var(--ink-3); min-width: 54px; text-align: right; }

/* ---- 真实卷面仿真（v4.0）：同一批题干轮换 4 种排版，练「换张卷子也读得懂」 ---- */
.paper-sim-serif {
  font-family: "SimSun", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1.7;
}
.paper-sim-dense {
  font-size: 17px;
  line-height: 1.35;
  padding: 10px 12px;
}
.paper-sim-print {
  color: #1E1B18;
  background: #EAE6DF;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.paper-sim-print .say { color: #1E1B18; }
/* 墨水屏只换衬线，不加底纹与模糊，避免灰阶糊成一片 */
body[data-eink="1"] .paper-sim-print { background: transparent; color: var(--ink); box-shadow: none; }

/* 组词结果二选一 / 组句材料清单 */
.fuse-choice { border-color: rgba(255, 194, 75, .45); background: rgba(255, 194, 75, .06); }
.fuse-choice-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fuse-choice-btns .btn { width: auto; flex: 1 1 140px; }
.fuse-owned.locked { border-color: var(--mint); background: rgba(52, 211, 153, .08); }
.fuse-lock-mark { color: var(--mint); }
.fuse-sentence-panel { margin-top: 14px; }
.fuse-sentence-list { max-height: 430px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fuse-sentence-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px; align-items: center; padding: 8px 9px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
}
.fuse-sentence-row.ready { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .045); }
.fuse-sentence-row.locked { border-color: rgba(52, 211, 153, .55); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .2); }
.fuse-sentence-row.missing { opacity: .72; }
.fsr-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fsr-main b { font: 700 14px/1.35 var(--kaiti); color: var(--ink); }
.fsr-main span { font-size: 9px; color: var(--ink-3); line-height: 1.45; }
.fsr-state { font-size: 9px; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.fuse-sentence-row.ready .fsr-state { color: var(--mint); }
.fuse-sentence-row.locked .fsr-state { color: var(--gold); }
.fsr-lock-hint { font-size: 8px; color: var(--ink-3); white-space: nowrap; }
.fuse-sentence-row .btn { width: auto; padding: 6px 8px; font-size: 10px; white-space: nowrap; }
@media (max-width: 400px) {
  .fuse-sentence-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fsr-state { grid-column: 2; }
  .fuse-sentence-row .btn { grid-column: span 1; }
}

/* 组词/组句台：卡面颜色一眼可辨 */
.fuse-owned::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 4px; height: 2px;
  border-radius: 2px; background: currentColor; opacity: .8;
}
.fuse-owned.r1 { border-color: rgba(232, 228, 242, .5); color: #E8E4F2; }
.fuse-owned.r2 { border-color: rgba(124, 199, 255, .55); color: #7CC7FF; background: rgba(124, 199, 255, .055); }
.fuse-owned.r3 { border-color: rgba(196, 162, 255, .6); color: #C4A2FF; background: rgba(196, 162, 255, .065); }
.fuse-owned.r4 { border-color: rgba(255, 194, 75, .65); color: #FFC24B; background: rgba(255, 194, 75, .07); }
.fuse-owned.r5 { border-color: rgba(139, 123, 216, .75); color: #B9A8FF; background: rgba(139, 123, 216, .1); }
.fuse-owned.r1 b, .fuse-owned.r1 i { color: #E8E4F2; }
.fuse-owned.r2 b, .fuse-owned.r2 i { color: #7CC7FF; }
.fuse-owned.r3 b, .fuse-owned.r3 i { color: #C4A2FF; }
.fuse-owned.r4 b, .fuse-owned.r4 i { color: #FFC24B; }
.fuse-owned.r5 b, .fuse-owned.r5 i { color: #B9A8FF; }
.fuse-owned.r1.sel, .fuse-owned.r2.sel, .fuse-owned.r3.sel, .fuse-owned.r4.sel, .fuse-owned.r5.sel {
  color: var(--ink); background: rgba(255, 194, 75, .13);
}
.fuse-owned.sel b, .fuse-owned.sel i { color: var(--ink); }

/* 对战阵亡/复活 */
.br-casualties { margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255, 138, 122, .35); background: rgba(255, 138, 122, .06); }
.br-casualties > b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--coral); }
.br-cas { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 10px; color: var(--ink-2); }
.br-cas b { color: var(--ink); }
.br-cas em { font-style: normal; color: var(--gold); text-align: right; }
.br-cas.lost em { color: var(--coral); }
.fallen-panel { border-color: rgba(255, 138, 122, .28); }
.fallen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 9px; }
.fallen-cell { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: center; }
.fallen-face { position: relative; opacity: .55; filter: grayscale(.65); }
.fallen-mark { position: absolute; right: 4px; top: 3px; font-style: normal; font-size: 18px; filter: none; }
.fallen-cell > b { font: 700 13px/1.2 var(--kaiti); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fallen-cell .btn { width: 100%; padding: 6px 4px; font-size: 10px; }
.fallen-miss { font-size: 9px; color: var(--coral); }

/* 我的卡 · 阵亡标记 */
.mine-chip.fallen { border-color: rgba(255, 138, 122, .55); }
.mine-chip.fallen::after {
  content: "💀"; position: absolute; right: 2px; top: 1px;
  font-size: 9px; line-height: 1; filter: none; opacity: .95;
}

/* 词义题：每个选项都能单独听，另可一次读全部 */
.meaning-tools { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.meaning-tools .btn { width: auto; padding: 6px 10px; font-size: 11px; }
.meaning-opt-row { display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.meaning-opt-row .py-opt { flex: 1; min-width: 0; }
.meaning-say {
  flex: none; width: 34px; padding: 0; border-radius: 12px;
  align-self: stretch; font-size: 13px;
}
.meaning-grid { align-items: stretch; }
@media (max-width: 420px) {
  .meaning-opt-row { gap: 4px; }
  .meaning-say { width: 30px; }
}

/* 指令/试炼：选项也能整组朗读 */
.scene-tools { display: flex; justify-content: flex-end; margin-top: 7px; }
.scene-tools .btn { width: auto; padding: 6px 10px; font-size: 11px; }

/* 错题回顾 / 错题扣分 */
.wrong-review { border-color: rgba(255, 138, 122, .35); }
.wr-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--line); }
.wr-row:first-of-type { border-top: 0; }
.wr-row b { font-size: 12px; color: var(--ink-2); font-weight: 600; line-height: 1.45; }
.wr-row span { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.wr-row em { font-style: normal; color: var(--mint); font-weight: 700; }

/* 系统减少动态效果：不仅关闭漂浮，也停用直接加到元素上的抖动与过渡。 */
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-shaking, .fx-pulse, .fx-combo,
  .sw-cell, .sw-board, .m3-tile, .tile, .orb {
    animation: none !important;
    transition: none !important;
  }
}

/* Optional strategy support: outlines also work on e-ink, no timed nudges. */
.game-coach { margin: 10px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; text-align: center; }
.game-coach .btn { min-height: 44px; }
#game-coach-note { grid-column: 1 / -1; line-height: 1.5; overflow-wrap: anywhere; }
#game-coach-note:empty { display: none; }
.coach-target { outline: 3px dashed currentColor !important; outline-offset: -5px; }
.coach-details { margin: 12px 0; padding: 10px; border: 1px solid currentColor; border-radius: 12px; }
.coach-details summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; }
.coach-details ul { padding-left: 1.5em; line-height: 1.7; }

/* 墨阵：不透明牌面隔开上下文字；可选状态由真实遮挡决定。 */
.m3-tile:not(.blocked):not(.off) {
  --brightness: 1; --saturation: 1;
  border: 2px solid hsl(var(--hue, 30) 80% 76%);
  box-shadow: 0 4px 0 #100c19, 0 5px 8px rgba(0,0,0,.45), inset 0 1px 4px rgba(255,255,255,.3);
}
.m3-tile.blocked { border-style: dashed; box-shadow: 0 2px 0 #100c19; }
.m3-tile.blocked::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px;
  height: 3px; border-radius: 2px; background: #242034;
}
html[data-eink="true"] .m3-tile:not(.blocked):not(.off) {
  background: #fff !important; border-style: solid !important;
}
.profile-update { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.profile-update > span { font-size: 12px; color: var(--ink-3); }

.m3-tile.m3-covering { outline: 3px solid var(--gold); outline-offset: 1px; }
html[data-eink="true"] .m3-tile.m3-covering { outline-color: #000; }

/* 各模式底栏常驻；活动内容滚动区域为底栏留位。 */
#app > .tabbar { position: relative; z-index: 85; margin-top: auto; background: var(--bg-0); }
.rest-screen { min-height: 0; overflow-y: auto; }
.m3-screen, .sw-screen { justify-content: flex-start; }
.m3-over { bottom: calc(var(--tabbar-height, 70px) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.m3-card { max-height: 100%; overflow-y: auto; }

/* 整个墨阵滚动区共用一个合成表面，不给每张牌长期占用独立纹理。 */
.m3-screen { transform: translateZ(0); -webkit-overflow-scrolling: touch; }
/* 资源路径与已解锁关卡 */
.resource-guide summary,.coach-details summary { cursor:pointer; }
.resource-guide .hint { text-align:left; line-height:1.7; }
.resource-guide .result-row { gap:12px; }
.resource-guide .result-row span { min-width:0; }
.resource-guide .result-row b { flex-shrink:0; }
.level-select { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:10px 0; }
.level-select .btn { min-width:0; padding:9px 3px; font-size:12px; }

/* 静止牌阵合成一次；原按钮仍接收触摸、焦点和无障碍操作。 */
.m3-surface { position:absolute; left:-12px; top:-12px; width:calc(100% + 24px); height:calc(100% + 24px); pointer-events:none; z-index:1; }
.m3-board[data-surface="canvas"] > .m3-tile { opacity:0 !important; transition:none !important; animation:none !important; }