/* ============ 词之忍道 · 样式 ============ */
:root {
  --bg: #12100e;
  --bg-2: #1a1613;
  --card: #211c17;
  --card-2: #2a241d;
  --line: #3a322a;
  --orange: #ff7800;
  --orange-hi: #ffa040;
  --orange-deep: #c25200;
  --paper: #f0e6d2;
  --paper-dim: #d8cbae;
  --ink: #2b2118;
  --text: #f2ead9;
  --text-dim: #a89880;
  --chakra: #4fc3f7;
  --chakra-deep: #1f7fb8;
  --good: #52c46e;
  --bad: #e5484d;
  --gold: #ffd54f;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }

/* 背景漩涡氛围 */
#bg-uzumaki {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255,120,0,.13), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 105%, rgba(79,195,247,.07), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 42%, transparent 0deg 27deg, rgba(255,255,255,.012) 27deg 30deg);
}
#bg-uzumaki::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 26px 26px;
}

#app {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display: flex; flex-direction: column;
}
#screen { flex: 1; display: flex; flex-direction: column; padding: 18px 16px 28px; animation: screenIn .3s ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line);
         background: rgba(18,16,14,.6); box-shadow: 0 0 80px rgba(0,0,0,.5); }
}

/* ============ 通用组件 ============ */
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 40px; }
.topbar h2 { font-size: 17px; font-weight: 700; letter-spacing: 2px; flex: 1; }
.btn-back {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--text-dim);
}
.btn-back:active { background: var(--card-2); }

.btn {
  display: block; width: 100%; text-align: center;
  padding: 15px 18px; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(160deg, var(--orange-hi), var(--orange) 55%, var(--orange-deep));
  color: #1c1005;
  box-shadow: 0 4px 18px rgba(255,120,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:active { background: var(--card-2); }
.btn-chakra {
  background: linear-gradient(160deg, #6fd4ff, var(--chakra) 55%, var(--chakra-deep));
  color: #06222f; box-shadow: 0 4px 18px rgba(79,195,247,.3);
}
.btn[disabled] { filter: grayscale(.85) brightness(.6); pointer-events: none; }
.btn-sm { padding: 10px 14px; font-size: 14px; border-radius: 10px; width: auto; display: inline-block; }

.card {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}

/* 卷轴卡片 */
.scroll-card {
  position: relative;
  background: linear-gradient(180deg, #f5ecd9, var(--paper) 12%, var(--paper) 88%, #e2d5b8);
  color: var(--ink); border-radius: 10px;
  padding: 18px 16px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
.scroll-card::before, .scroll-card::after {
  content: ""; position: absolute; left: -6px; right: -6px; height: 12px;
  background: linear-gradient(180deg, #5a4632, #3b2c1d);
  border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.scroll-card::before { top: -7px; }
.scroll-card::after { bottom: -7px; }

.tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  background: rgba(255,120,0,.15); color: var(--orange-hi); border: 1px solid rgba(255,120,0,.35);
}
.tag-blue { background: rgba(79,195,247,.12); color: var(--chakra); border-color: rgba(79,195,247,.3); }
.tag-rank {
  background: linear-gradient(160deg, #3d332a, #2a221b); color: var(--gold);
  border: 1px solid #56483a;
}

/* 进度条 */
.bar { height: 10px; border-radius: 999px; background: #0d0b09; border: 1px solid var(--line); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange), var(--orange-hi));
  box-shadow: 0 0 10px rgba(255,120,0,.6);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
.bar.chakra > i { background: linear-gradient(90deg, var(--chakra-deep), var(--chakra), #9fe3ff); box-shadow: 0 0 10px rgba(79,195,247,.6); }
.bar.hp > i { background: linear-gradient(90deg, #8f1d22, var(--bad), #ff7a80); box-shadow: 0 0 10px rgba(229,72,77,.55); }

/* ============ 主页 ============ */
.home-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.home-emblem {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(160deg, var(--orange-hi), var(--orange-deep));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(255,120,0,.4);
}
.home-emblem svg { width: 36px; height: 36px; }
.home-title { flex: 1; }
.home-title h1 { font-size: 22px; letter-spacing: 4px; }
.home-title p { font-size: 12px; color: var(--text-dim); margin-top: 3px; letter-spacing: 1px; }
.streak-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.streak-chip b { font-size: 17px; color: var(--orange-hi); }
.streak-chip span { font-size: 10px; color: var(--text-dim); }

.rank-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rank-badge {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3d30, #241d16 70%);
  border: 2px solid var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: var(--gold); letter-spacing: 0;
  box-shadow: 0 0 18px rgba(255,120,0,.25), inset 0 2px 6px rgba(0,0,0,.6);
}
.rank-info { flex: 1; min-width: 0; }
.rank-info .rk-name { font-size: 18px; font-weight: 800; letter-spacing: 3px; }
.rank-info .rk-sub { font-size: 12px; color: var(--text-dim); margin: 4px 0 7px; }

.daily-scroll { margin: 16px 0; }
.daily-scroll h3 { font-size: 15px; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.daily-scroll h3 .tag { transform: translateY(-1px); }
.daily-nums { display: flex; gap: 10px; margin: 12px 0 14px; }
.dn {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px;
  background: rgba(43,33,24,.07); border: 1px dashed rgba(43,33,24,.35);
}
.dn b { display: block; font-size: 26px; font-weight: 800; }
.dn span { font-size: 11px; opacity: .75; letter-spacing: 1px; }
.dn.done b { color: #2e7d32; }
.daily-actions { display: flex; gap: 10px; }
.daily-actions .btn { letter-spacing: 1px; padding: 13px 8px; font-size: 15px; }
.daily-done-line { text-align: center; font-size: 13px; margin-top: 10px; opacity: .8; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.home-cell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: left; transition: transform .08s;
  display: flex; flex-direction: column; gap: 4px;
}
.home-cell:active { transform: scale(.97); }
.home-cell .hc-icon { font-size: 22px; }
.home-cell b { font-size: 15px; letter-spacing: 1px; }
.home-cell span { font-size: 11px; color: var(--text-dim); }
.home-cell.boss-ready { border-color: var(--bad); box-shadow: 0 0 14px rgba(229,72,77,.25); animation: bossPulse 1.6s ease infinite; }
@keyframes bossPulse { 50% { box-shadow: 0 0 22px rgba(229,72,77,.5); } }

.home-quote { margin-top: 18px; text-align: center; font-size: 12px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.8; }

/* ============ 关卡地图 ============ */
.arc-block { margin-bottom: 18px; }
.arc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.arc-head .arc-name { font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.arc-head .arc-part { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.lv-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lv-node {
  aspect-ratio: 1; border-radius: 12px; position: relative;
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.lv-node small { font-size: 9px; font-weight: 400; }
.lv-node.cur { border-color: var(--orange); color: var(--orange-hi); box-shadow: 0 0 12px rgba(255,120,0,.35); }
.lv-node.done { background: linear-gradient(160deg, #2e2620, #201a14); color: var(--paper-dim); border-color: #4a3d2c; }
.lv-node.done::after { content: "✓"; position: absolute; top: 3px; right: 5px; font-size: 9px; color: var(--good); }
.lv-node.lock { opacity: .38; }
.lv-node.boss { background: linear-gradient(160deg, #33191b, #1e1113); border-color: #5a2a2e; color: #ff9297; }
.lv-node.boss.beat { border-color: #3f6b4a; color: var(--good); }
.lv-node.boss.ready { border-color: var(--bad); animation: bossPulse 1.6s infinite; color: #ff7a80; }

/* ============ 修行 ============ */
.study-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.study-top .bar { flex: 1; }
.study-top .cnt { font-size: 12px; color: var(--text-dim); min-width: 52px; text-align: right; }
.combo-chip {
  min-width: 60px; text-align: center; font-size: 12px; font-weight: 800; color: var(--chakra);
  opacity: 0; transform: scale(.6); transition: all .18s;
}
.combo-chip.on { opacity: 1; transform: scale(1); }
.combo-chip.pop { animation: comboPop .3s ease; }
@keyframes comboPop { 40% { transform: scale(1.45); } }

.word-stage { text-align: center; margin: 26px 0 8px; }
.word-main { font-size: 44px; font-weight: 800; letter-spacing: 1px; color: var(--paper); word-break: break-all; }
.word-sub { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 15px; }
.btn-speak {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(79,195,247,.12); border: 1px solid rgba(79,195,247,.35); color: var(--chakra);
  font-size: 15px;
}
.btn-speak:active { background: rgba(79,195,247,.3); }
.word-cnprompt { font-size: 30px; font-weight: 800; color: var(--paper); line-height: 1.5; padding: 0 8px; }
.listen-stage { font-size: 15px; color: var(--text-dim); margin-top: 10px; }
.listen-big { width: 74px; height: 74px; font-size: 30px; margin: 6px auto 0; display: flex; align-items: center; justify-content: center; }

.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.opt {
  position: relative; text-align: left;
  padding: 15px 16px 15px 46px; border-radius: 12px; font-size: 16px; line-height: 1.45;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  transition: transform .07s;
}
.opt:active { transform: scale(.98); }
.opt::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px;
  transform: translateY(-50%);
  background: var(--shuriken) center/contain no-repeat; opacity: .5;
  transition: transform .3s;
}
.opt.good { background: rgba(82,196,110,.13); border-color: var(--good); color: #b7ecc5; }
.opt.good::before { opacity: 1; transform: translateY(-50%) rotate(180deg); filter: hue-rotate(0); }
.opt.bad { background: rgba(229,72,77,.12); border-color: var(--bad); color: #ffb3b6; animation: shake .35s; }
.opt.dim { opacity: .35; pointer-events: none; }
.opt[disabled] { pointer-events: none; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.opt-en { font-size: 17px; font-weight: 600; letter-spacing: .5px; }

.btn-idk { margin: 18px auto 0; display: block; width: auto; padding: 10px 26px; color: var(--text-dim); font-size: 14px; background: none; border: 1px dashed var(--line); border-radius: 999px; }
.btn-idk:active { color: var(--text); }

/* 斩字特效 */
.slash-fx {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.slash-fx .zh {
  font-size: 110px; font-weight: 900; color: var(--orange);
  text-shadow: 0 0 30px rgba(255,120,0,.8);
  animation: slashZh .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes slashZh {
  0% { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  35% { opacity: 1; transform: scale(1) rotate(-8deg); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(.9) rotate(-8deg); }
}
.slash-fx .line {
  position: absolute; left: 50%; top: 50%; width: 150vmax; height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translate(-50%,-50%) rotate(-24deg) scaleX(0);
  animation: slashLine .35s ease-out forwards;
}
@keyframes slashLine { 40% { transform: translate(-50%,-50%) rotate(-24deg) scaleX(1); opacity: 1; } 100% { transform: translate(-50%,-50%) rotate(-24deg) scaleX(1); opacity: 0; } }

/* ============ 详解卡 ============ */
#overlay-root .ov {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8,6,4,.72); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: ovIn .22s ease;
}
@media (min-width: 640px) { #overlay-root .ov { align-items: center; } }
@keyframes ovIn { from { opacity: 0; } }
.detail-card {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #f5ecd9, var(--paper) 15%);
  color: var(--ink);
  animation: cardUp .28s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 640px) { .detail-card { border-radius: 18px; } }
@keyframes cardUp { from { transform: translateY(40px); opacity: .5; } }
.detail-card .d-word { font-size: 32px; font-weight: 800; }
.detail-card .d-phon { color: #6b5a42; margin: 4px 0 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.detail-card .d-phon .btn-speak { background: rgba(31,127,184,.1); border-color: rgba(31,127,184,.4); color: var(--chakra-deep); }
.detail-card .d-cn { font-size: 18px; font-weight: 700; line-height: 1.6; }
.detail-card .d-ex {
  margin-top: 14px; padding: 13px 14px; border-radius: 10px;
  background: rgba(43,33,24,.06); border-left: 3px solid var(--orange);
  font-size: 15px; line-height: 1.65;
}
.detail-card .d-ex .en { font-weight: 600; }
.detail-card .d-ex .en b { color: var(--orange-deep); }
.detail-card .d-ex .cn { margin-top: 5px; font-size: 13px; opacity: .8; }
.detail-card .d-hint { margin-top: 11px; font-size: 13px; color: #6b5a42; line-height: 1.6; }
.detail-card .d-hint b { color: var(--orange-deep); }
.detail-card .btn { margin-top: 18px; }

/* ============ BOSS 战 ============ */
.boss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.boss-sil {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
  background: radial-gradient(circle at 50% 32%, #38181b, #180d0e 75%);
  border: 1px solid #5a2a2e;
  display: flex; align-items: center; justify-content: center;
}
.boss-sil svg { width: 46px; height: 46px; }
.boss-meta { flex: 1; min-width: 0; }
.boss-meta .b-name { font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.boss-meta .b-title { font-size: 11px; color: var(--text-dim); margin: 2px 0 7px; }
.boss-hp-num { font-size: 12px; color: #ff9297; text-align: right; margin-top: 3px; }
.player-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.hearts { display: flex; gap: 5px; font-size: 18px; }
.hearts .h.off { filter: grayscale(1) brightness(.45); }
.chakra-gauge { flex: 1; }
.chakra-gauge .bar { height: 8px; }
.chakra-label { font-size: 10px; color: var(--chakra); letter-spacing: 1px; margin-bottom: 3px; }

.timer-ring {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--paper);
  background: conic-gradient(var(--orange) var(--t, 100%), #241d16 0);
  position: relative;
}
.timer-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-2); z-index: 0; }
.timer-ring span { position: relative; z-index: 1; }
.timer-ring.low { background: conic-gradient(var(--bad) var(--t, 100%), #241d16 0); animation: bossPulse 0.5s infinite; }

.boss-stage { text-align: center; margin: 14px 0 4px; }
.boss-hit { animation: bossHit .4s ease; }
@keyframes bossHit { 25% { transform: translateX(-9px) rotate(-3deg); filter: brightness(2); } 60% { transform: translateX(6px); } }
.player-hurt { animation: hurtFlash .45s ease; }
@keyframes hurtFlash { 30% { box-shadow: inset 0 0 60px rgba(229,72,77,.7); } }

/* 拼写题 */
.spell-slots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 18px 0 6px; }
.spell-slot {
  min-width: 34px; height: 46px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: var(--paper);
  background: var(--card); border: 1px solid var(--line);
}
.spell-slot.blank { border-bottom: 3px solid var(--orange); color: var(--orange-hi); background: var(--card-2); }
.spell-slot.filled { border-color: var(--chakra); }
.spell-keys { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.spell-key {
  width: 44px; height: 48px; border-radius: 10px; font-size: 20px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
}
.spell-key:active { background: var(--card-2); }
.spell-key.used { opacity: .3; pointer-events: none; }

/* 忍术全屏特效 */
.jutsu-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.jutsu-fx .wave {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--chakra); transform: translate(-50%,-50%);
  animation: jutsuWave .7s ease-out forwards;
  box-shadow: 0 0 40px var(--chakra);
}
@keyframes jutsuWave { to { width: 220vmax; height: 220vmax; opacity: 0; border-width: 1px; } }
.jutsu-fx .jz {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 54px; font-weight: 900; color: var(--chakra); letter-spacing: 8px;
  text-shadow: 0 0 30px var(--chakra); white-space: nowrap;
  animation: jutsuZi .8s ease forwards;
}
@keyframes jutsuZi { 0% { opacity: 0; transform: translate(-50%,-50%) scale(2); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ============ 战报 ============ */
.report-hero { text-align: center; margin: 30px 0 22px; }
.report-hero .r-icon { font-size: 60px; }
.report-hero h2 { font-size: 26px; letter-spacing: 6px; margin-top: 10px; }
.report-hero p { color: var(--text-dim); font-size: 13px; margin-top: 6px; letter-spacing: 1px; }
.report-stats { display: flex; gap: 10px; margin: 18px 0; }
.rs { flex: 1; text-align: center; padding: 14px 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.rs b { display: block; font-size: 24px; color: var(--orange-hi); }
.rs span { font-size: 11px; color: var(--text-dim); }
.report-words { margin: 14px 0; }
.rw { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rw .w { font-weight: 700; font-size: 16px; color: var(--paper); }
.rw .c { color: var(--text-dim); flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw.was-wrong .w { color: #ff9297; }

/* ============ 升段动画 ============ */
.rankup { position: fixed; inset: 0; z-index: 90; background: rgba(8,6,4,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: ovIn .3s; }
.rankup .beam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 200px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,120,0,.25), transparent);
  animation: beamIn 1s ease;
}
@keyframes beamIn { from { width: 0; opacity: 0; } }
.rankup .rk-big {
  font-size: 64px; font-weight: 900; letter-spacing: 14px; color: var(--gold);
  text-shadow: 0 0 40px rgba(255,213,79,.6);
  animation: rankZoom .9s cubic-bezier(.22,1,.36,1);
}
@keyframes rankZoom { 0% { transform: scale(3); opacity: 0; } 55% { transform: scale(.94); opacity: 1; } 75% { transform: scale(1.04); } 100% { transform: scale(1); } }
.rankup p { color: var(--paper-dim); margin-top: 16px; letter-spacing: 2px; }
.rankup .btn { width: 200px; margin-top: 40px; }

/* ============ 错词本 / 设置 / 列表页 ============ */
.wb-item { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.wb-item .w { font-size: 17px; font-weight: 700; color: var(--paper); }
.wb-item .meta { flex: 1; min-width: 0; }
.wb-item .cn { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-item .wr { font-size: 11px; color: #ff9297; flex-shrink: 0; }
.empty-tip { text-align: center; color: var(--text-dim); padding: 50px 20px; font-size: 14px; line-height: 2; }

.set-group { margin-bottom: 16px; }
.set-group h4 { font-size: 12px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 8px; }
.set-row {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line);
  margin-bottom: -1px; font-size: 15px;
}
.set-row:first-of-type { border-radius: 12px 12px 0 0; }
.set-row:last-of-type { border-radius: 0 0 12px 12px; margin-bottom: 0; }
.set-row:only-of-type { border-radius: 12px; }
.set-row .lbl { flex: 1; }
.set-row select, .set-row input[type=text] {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 14px; max-width: 150px;
}
.seg { display: flex; gap: 6px; }
.seg button { padding: 7px 13px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
.seg button.on { background: rgba(255,120,0,.16); border-color: var(--orange); color: var(--orange-hi); }
.switch { width: 46px; height: 26px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); position: relative; transition: .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: .2s; }
.switch.on { background: rgba(255,120,0,.3); border-color: var(--orange); }
.switch.on::after { left: 22px; background: var(--orange-hi); }
textarea.save-code {
  width: 100%; height: 90px; background: var(--bg-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 11px; resize: none;
}

/* 成就 */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach {
  padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.ach .a-icon { font-size: 24px; }
.ach b { font-size: 14px; }
.ach span { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.ach.locked { opacity: .4; filter: grayscale(1); }
.ach.got { border-color: rgba(255,213,79,.4); }
.ach .a-date { font-size: 10px; color: var(--gold); }

/* toast */
#toast-root { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(30,25,20,.95); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow); animation: toastIn .3s ease;
  max-width: 88vw;
}
.toast.gold { border-color: rgba(255,213,79,.5); color: var(--gold); }
@keyframes toastIn { from { transform: translateY(-16px); opacity: 0; } }
.toast.out { transition: .3s; opacity: 0; transform: translateY(-16px); }

/* 手里剑 SVG(data URI 变量) */
:root {
  --shuriken: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffa040" d="M12 2l2.6 7.4L22 12l-7.4 2.6L12 22l-2.6-7.4L2 12l7.4-2.6z"/><circle cx="12" cy="12" r="2.2" fill="%23241d16"/></svg>');
}

.loading-splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.loading-splash .sp { width: 54px; height: 54px; background: var(--shuriken) center/contain no-repeat; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-splash p { color: var(--text-dim); font-size: 13px; letter-spacing: 2px; }