/* ═══════════════════════════════════════════════════════════════
 * 修仙英文录 · 大换血 demo 切片 样式
 * 配色/字体/动画沿用旧版被验证过的视觉语言（回收·非照搬结构）。
 * ═══════════════════════════════════════════════════════════════ */
:root {
  --bg-0:#0e0b14; --bg-1:#16121d; --bg-2:#1f1928; --bg-3:#2a2236;
  --ink:#f1ead9; --ink-2:#c9bfa6; --ink-3:#a99d84;
  --gold:#e6c870; --gold-2:#b89636; --plum:#b377e0;
  --rose:#e87474; --jade:#7ec998; --cyan:#74cce8; --red:#e85c5c;
  --shadow:0 8px 32px rgba(0,0,0,.5);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body {
  margin:0; padding:0; color:var(--ink);
  background:radial-gradient(1200px 800px at 50% -10%, #1a1326 0%, #0e0b14 60%);
  font-family:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
  font-size:18px; font-weight:600; line-height:1.78; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.font-small { font-size:15px; }
body.font-large { font-size:18px; }
body.font-small .story-page,
body.font-small .wordcard { font-size:.96em; }
body.font-large .story-page,
body.font-large .wordcard { font-size:1.08em; }
#app { max-width:760px; margin:0 auto; padding:18px 20px 80px; }
h1,h2,h3 { font-family:inherit; letter-spacing:.05em; }
h2 { font-size:24px; color:var(--gold); margin:0 0 14px; border-bottom:1px solid var(--bg-3); padding-bottom:8px; }
p { margin:10px 0; }
b { color:var(--gold); }
.dim { color:var(--ink-3); }
.small { font-size:14px; }
.center { text-align:center; }
.en { color:var(--ink); font-weight:500; }
.cn { color:var(--ink-3); font-size:14px; }
.hl { color:var(--gold); } .hl-rose { color:var(--rose); } .hl-jade { color:var(--jade); }
.placeholder { color:var(--plum); font-size:13px; opacity:.7; font-weight:500; }

/* ─── 顶栏（极简·简化后只有剧情流） ─── */
#topbar {
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  max-width:760px; margin:0 auto; padding:10px 20px;
  background:linear-gradient(180deg, rgba(22,18,29,.96), rgba(22,18,29,.72));
  border-bottom:1px solid var(--bg-3);
}
.tb-left { display:flex; gap:14px; align-items:baseline; font-size:15px; }
.tb-realm { color:var(--gold); font-size:17px; }
.tb-yanqi { color:var(--cyan); }
.tb-free { color:var(--jade); }

/* ─── 按钮 ─── */
.btn {
  font-family:inherit; font-weight:600; font-size:16px; color:var(--ink);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--bg-3); border-radius:10px; padding:11px 18px; cursor:pointer;
  transition:transform .08s, border-color .2s, background .2s;
}
.btn:hover { border-color:var(--gold-2); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.4; cursor:default; }
.btn-gold { border-color:var(--gold-2); color:var(--gold); }
.btn-gold:hover { background:linear-gradient(180deg, #2c2238, var(--bg-1)); }
.btn-mini { padding:5px 12px; font-size:14px; border-radius:8px; }
/* 玩法区左上角统一返回键 */
.zone-back {
  position:sticky; top:76px; z-index:35; display:inline-flex; align-items:center; gap:6px;
  margin:0 0 14px; padding:9px 16px; font-size:16px; border-radius:10px;
  color:var(--gold); background:linear-gradient(180deg, rgba(31,25,40,.98), rgba(12,10,18,.98));
  border:1px solid var(--gold-2); box-shadow:0 10px 26px rgba(0,0,0,.38); opacity:1;
}
.zone-back:hover { color:var(--ink); border-color:var(--gold); }

/* 异果「言典十果」图鉴 */
.yg-entry { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 12px; border-radius:20px; font-size:13px; background:rgba(0,0,0,.25); border:1px solid rgba(255,215,120,.35); color:var(--gold); cursor:pointer; }
.yg-entry:hover { background:rgba(255,215,120,.12); }
.yg-entry-ico { font-size:16px; }
.yg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.yg-card { display:flex; gap:12px; padding:12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.yg-card.got { border-color:rgba(255,215,120,.4); background:rgba(255,215,120,.05); }
.yg-card.locked { opacity:.5; }
.yg-iconwrap { flex:0 0 auto; width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:34px; background:rgba(0,0,0,.3); overflow:hidden; }
.yg-img { width:100%; height:100%; object-fit:cover; }
.yg-emoji { width:100%; height:100%; align-items:center; justify-content:center; font-size:34px; }
.yg-info { flex:1; min-width:0; }
.yg-name { font-size:16px; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.yg-rarity { font-size:12px; font-weight:400; color:var(--cyan); border:1px solid currentColor; border-radius:6px; padding:0 6px; }
.yg-attr { font-size:13px; margin:4px 0; }
.yg-lore { font-size:13px; color:var(--ink-2); line-height:1.6; margin:6px 0; }
.yg-line { font-size:13px; color:var(--gold); margin-top:4px; }

/* ═══ 视觉借鉴旧版(P-24)：场景背景 / 浮粒子 / 低血脉动 / 交错渐入 / 高光 ═══ */
/* A. 场景背景：每界面一层氛围底·暗角渐变 wash + 可选图(缺图只显渐变·优雅回退·防"看久都一样") */
#zone-backdrop { position:fixed; inset:0; z-index:0; pointer-events:none; background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease; }
#eventbar, #app { position:relative; z-index:1; }
body[data-zone] #zone-backdrop { opacity:1; }
body[data-zone="hub"]      #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(40,30,64,.20) 0%, rgba(10,8,18,.82) 78%), url("../../素材/场景/zone-hub-day.png"); }
body[data-zone="practice"] #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(24,40,32,.20) 0%, rgba(6,12,9,.82) 78%), url("../../素材/场景/zone-practice-day.png"); }
body[data-zone="wild"]     #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(20,34,40,.22) 0%, rgba(5,10,12,.82) 78%), url("../../素材/场景/zone-wild-day.png"); }
body[data-zone="wild-bamboo"] #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(18,38,28,.18) 0%, rgba(5,10,8,.80) 78%), url("../../素材/场景/zone-wild-day.png"); }
body[data-zone="wild-cave"]   #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(16,24,38,.28) 0%, rgba(4,7,12,.88) 78%), url("../../素材/场景/zone-wild.png"); }
body[data-zone="wild-ridge"]  #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(42,20,46,.32) 0%, rgba(8,5,12,.88) 78%), url("../../素材/场景/zone-combat.png"); }
body[data-zone="combat"]   #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(46,16,20,.34) 0%, rgba(12,5,7,.87) 78%), url("../../素材/场景/zone-combat.png"); }
body[data-zone="market"]   #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(44,30,16,.12) 0%, rgba(9,7,10,.76) 78%), url("../../素材/场景/zone-market-day.png"); }
body[data-zone="alchemy"]  #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(40,26,14,.18) 0%, rgba(8,7,8,.78) 78%), url("../../素材/场景/zone-alchemy-workshop-day.png"); }
body[data-zone="story"]    #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(30,24,52,.20) 0%, rgba(8,6,14,.82) 78%), url("../../素材/场景/zone-story-day.png"); }
body[data-zone="library"]  #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(22,30,46,.30) 0%, rgba(6,9,14,.86) 78%), url("../../素材/场景/zone-library.png"); }
body[data-zone="codex"]    #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(44,20,52,.32) 0%, rgba(11,6,13,.86) 78%), url("../../素材/场景/zone-codex.png"); }
body[data-zone="relations"] #zone-backdrop { background-image:radial-gradient(120% 92% at 42% 36%, rgba(22,18,34,.34) 0%, rgba(8,6,14,.88) 78%), linear-gradient(90deg, rgba(6,5,10,.72), rgba(10,8,18,.34) 42%, rgba(6,5,10,.82)), url("../../素材/场景/zone-relations.png"); }
body[data-zone="shentian"] #zone-backdrop { background-image:radial-gradient(120% 92% at 50% 40%, rgba(14,42,48,.26) 0%, rgba(6,8,14,.86) 78%), linear-gradient(180deg, rgba(5,7,12,.42), rgba(7,8,14,.82)), url("../../素材/场景/zone-shentian.png"); }
body[data-zone="menu"]     #zone-backdrop { background-image:radial-gradient(110% 88% at 50% 18%, rgba(82,58,24,.26) 0%, rgba(18,12,24,.92) 72%), url("../../素材/logo.png"); opacity:.55; filter:blur(2px) saturate(.78); }
body[data-zone="cover"]    #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 24%, rgba(82,58,24,.16) 0%, rgba(12,8,18,.84) 76%), url("../../素材/场景/zone-hub-day.png"); }
body[data-zone="dream"]    #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(44,20,52,.36) 0%, rgba(8,5,13,.88) 78%), url("../../素材/场景/zone-codex.png"); }
body[data-zone="ending"]   #zone-backdrop { background-image:radial-gradient(125% 95% at 50% 30%, rgba(30,24,52,.24) 0%, rgba(8,6,14,.86) 78%), url("../../素材/场景/zone-story-day.png"); }

.img-preview-target {
  cursor:zoom-in;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.img-preview-target:hover {
  transform:scale(1.06);
  filter:saturate(1.08) brightness(1.08);
}
.rel-avatar:has(.img-preview-target:hover),
.story-portrait:has(.img-preview-target:hover),
.cb-art:has(.img-preview-target:hover),
.boss-duel-art figure:has(.img-preview-target:hover),
.yg-iconwrap:has(.img-preview-target:hover) {
  border-color:rgba(230,200,112,.72);
  box-shadow:0 0 0 1px rgba(230,200,112,.18), 0 0 20px rgba(116,204,232,.12);
}
.image-preview-root {
  position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
  padding:28px; background:rgba(4,3,8,.78);
}
.image-preview-root.show { display:flex; animation:beFadeIn .16s ease; }
.image-preview-backdrop { position:absolute; inset:0; }
.image-preview-box {
  position:relative; z-index:1; max-width:min(92vw, 1120px); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.image-preview-box img {
  display:block; max-width:100%; max-height:82vh; object-fit:contain; border-radius:14px;
  border:1px solid rgba(230,200,112,.34);
  box-shadow:0 24px 80px rgba(0,0,0,.58), 0 0 34px rgba(116,204,232,.12);
  background:rgba(8,6,14,.72);
}
.image-preview-close {
  position:absolute; top:-14px; right:-14px; z-index:2; width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(230,200,112,.42); background:rgba(12,9,18,.94); color:var(--gold);
  cursor:pointer; font-size:18px; line-height:1;
}
.image-preview-title {
  color:var(--ink-2); font-size:13px; padding:4px 10px; border-radius:999px;
  background:rgba(12,9,18,.72); border:1px solid rgba(255,255,255,.08);
}

/* ─── 主菜单 / 三槽存档（P-37） ─── */
body.menu-mode #topbar, body.menu-mode #eventbar { display:none; }
body.menu-mode #app { max-width:960px; min-height:100vh; display:grid; place-items:center; padding:36px 20px 80px; }
.main-menu, .slot-screen, .goodbye-screen {
  width:min(860px, 100%); animation:pageIn .35s ease;
}
.main-menu {
  text-align:center; padding:46px 24px 34px; border:1px solid rgba(230,200,112,.28); border-radius:22px;
  background:radial-gradient(460px 220px at 50% 0%, rgba(230,200,112,.14), transparent 70%), linear-gradient(180deg, rgba(31,25,40,.86), rgba(12,10,18,.9));
  box-shadow:var(--shadow);
}
.menu-logo-wrap { min-height:132px; display:grid; place-items:center; margin-bottom:10px; }
.menu-logo { max-width:360px; max-height:150px; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
.menu-title-fallback { display:none; color:var(--gold); font-size:50px; letter-spacing:.16em; margin:0; border:0; padding:0; }
.menu-sub { color:var(--ink-2); margin:0 0 26px; letter-spacing:.08em; }
.menu-actions { display:flex; flex-direction:column; gap:12px; width:min(340px, 100%); margin:0 auto; }
.menu-actions .btn { width:100%; font-size:18px; }
.menu-foot { margin-top:22px; }
.entry-gate {
  cursor:pointer;
  user-select:none;
}
.entry-gate .entry-start {
  width:min(340px, 100%);
  font-size:22px;
  letter-spacing:.18em;
  padding:16px 22px;
  margin-top:8px;
  box-shadow:0 0 0 1px rgba(230,200,112,.18) inset, 0 18px 44px rgba(0,0,0,.28);
}
.entry-gate .entry-start::before {
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:12px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 18px rgba(230,200,112,.78);
  vertical-align:middle;
}
.slot-screen {
  padding:24px; border:1px solid var(--bg-3); border-radius:20px;
  background:linear-gradient(180deg, rgba(31,25,40,.88), rgba(12,10,18,.9)); box-shadow:var(--shadow);
}
.slot-head { margin-bottom:16px; }
.slot-head h2 { margin:12px 0 4px; }
.slot-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.slot-card {
  display:flex; flex-direction:column; min-height:210px; padding:16px; border:1px solid rgba(230,200,112,.26); border-radius:14px;
  background:linear-gradient(180deg, rgba(24,28,44,.78), rgba(12,15,27,.86));
}
.slot-card.empty { border-style:dashed; opacity:.86; }
.slot-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.slot-top b { color:var(--gold); font-size:18px; }
.slot-top span { color:var(--cyan); font-size:13px; white-space:nowrap; }
.slot-card p { color:var(--ink-2); font-size:14px; line-height:1.65; margin:4px 0; }
.slot-actions { display:flex; gap:8px; margin-top:auto; }
.slot-open { margin-top:auto; }
.slot-actions .btn { flex:1; }
.slot-delete { color:var(--ink-3); }
.slot-delete:hover { color:var(--rose); border-color:var(--rose); }
.settings-screen {
  width:min(900px, 100%); padding:24px; border:1px solid rgba(230,200,112,.28); border-radius:20px;
  background:linear-gradient(180deg, rgba(31,25,40,.9), rgba(12,10,18,.92)); box-shadow:var(--shadow); animation:pageIn .35s ease;
}
.settings-head { margin-bottom:16px; }
.settings-head h2 { margin:14px 0 4px; }
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.settings-panel {
  padding:16px; border:1px solid rgba(255,255,255,.09); border-radius:14px;
  background:linear-gradient(180deg, rgba(24,28,44,.72), rgba(12,15,27,.82));
}
.settings-panel-wide { grid-column:1 / -1; }
.settings-panel .panel-title { color:var(--gold); font-size:19px; margin-bottom:10px; }
.setting-row {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px; margin-top:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  color:var(--ink); background:rgba(255,255,255,.025); text-align:left;
}
.setting-button { font-family:inherit; cursor:pointer; }
.setting-row b { display:block; line-height:1.35; }
.setting-row small { display:block; color:var(--ink-3); font-size:13px; line-height:1.5; margin-top:2px; }
.setting-row input[type="checkbox"] { width:22px; height:22px; accent-color:var(--gold-2); }
.setting-range { width:170px; accent-color:var(--gold-2); }
.setting-inline { display:flex; gap:8px; flex:0 0 auto; }
.setting-inline .active { color:var(--gold); border-color:var(--gold-2); }
.difficulty-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; }
.setting-choice {
  min-height:132px; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:14px;
  background:linear-gradient(180deg, rgba(31,25,40,.8), rgba(14,11,20,.86));
  color:var(--ink); font-family:inherit; text-align:left; cursor:pointer;
}
.setting-choice b { display:block; font-size:20px; margin-bottom:8px; }
.setting-choice span { display:block; color:var(--cyan); margin-bottom:8px; }
.setting-choice small { display:block; color:var(--ink-3); font-size:13px; line-height:1.55; }
.setting-choice.locked { cursor:default; opacity:.78; }
.setting-choice.active { border-color:var(--gold-2); box-shadow:0 0 0 1px rgba(230,200,112,.25) inset; }
.goodbye-screen {
  max-width:620px; text-align:center; padding:34px 24px; border:1px solid rgba(230,200,112,.3); border-radius:18px;
  background:linear-gradient(180deg, rgba(31,25,40,.9), rgba(12,10,18,.92)); box-shadow:var(--shadow);
}
.hub-hero { position:relative; }
.hub-hero-actions { position:absolute; top:18px; right:18px; display:flex; gap:8px; }
.hub-hero-actions .btn { border-color:rgba(230,200,112,.36); color:var(--gold); }

/* B. hub 浮粒子(余烬·JS 注入 .ember) */
.ember-layer { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.ember { position:absolute; bottom:-12px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,235,170,.9), rgba(230,200,112,.5) 60%, transparent);
  animation:ember-rise linear infinite; }
@keyframes ember-rise { 0%{transform:translateY(0) translateX(0); opacity:0;} 10%{opacity:.7;} 85%{opacity:.55;} 100%{transform:translateY(-105vh) translateX(var(--drift,20px)); opacity:0;} }

/* C. 低血脉动(战斗·借旧版 hpLowPulse) */
.cb-hp-fill.low { animation:hpLowPulse 1.1s ease-in-out infinite; }
@keyframes hpLowPulse { 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.55);} }

/* D. 列表卡交错渐入 */
@keyframes cardIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.cult-book, .recipe-card, .yg-card, .zone-card { animation:cardIn .3s ease both; }
.cult-book:nth-child(2),.recipe-card:nth-child(2),.yg-card:nth-child(2),.zone-card:nth-child(2){animation-delay:.05s;}
.cult-book:nth-child(3),.recipe-card:nth-child(3),.yg-card:nth-child(3),.zone-card:nth-child(3){animation-delay:.10s;}
.cult-book:nth-child(4),.recipe-card:nth-child(4),.yg-card:nth-child(4),.zone-card:nth-child(4){animation-delay:.15s;}
.cult-book:nth-child(n+5),.recipe-card:nth-child(n+5),.yg-card:nth-child(n+5),.zone-card:nth-child(n+5){animation-delay:.2s;}

/* E. 境界 chip 微光呼吸 */
.tb-realm { animation:realmGlow 4.5s ease-in-out infinite; }
@keyframes realmGlow { 0%,100%{text-shadow:0 0 0 transparent;} 50%{text-shadow:0 0 8px rgba(230,200,112,.5);} }

/* 无障碍：用户要求减少动效时关掉氛围动画 */
@media (prefers-reduced-motion: reduce) {
  .ember, .cb-hp-fill.low, .tb-realm, .cult-book, .recipe-card, .yg-card, .zone-card { animation:none !important; }
  #zone-backdrop { transition:none; }
}
body.reduced-motion .ember,
body.reduced-motion .cb-hp-fill.low,
body.reduced-motion .tb-realm,
body.reduced-motion .cult-book,
body.reduced-motion .recipe-card,
body.reduced-motion .yg-card,
body.reduced-motion .zone-card {
  animation:none !important;
}
body.reduced-motion #zone-backdrop { transition:none; }

/* ═══ 事件栏（P-28·顶栏下常驻·折叠一行/展开列表/可标记）═══ */
#eventbar { position:sticky; top:0; z-index:18; max-width:760px; margin:0 auto; padding:0 20px; }
#eventbar:empty { display:none; }
.eb-collapsed { display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px;
  background:linear-gradient(180deg, rgba(31,25,40,.92), rgba(22,18,29,.8)); border:1px solid var(--bg-3); border-top:none; border-radius:0 0 10px 10px; }
.eb-icon { flex:0 0 auto; }
.eb-text { flex:1; min-width:0; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eb-toggle { flex:0 0 auto; }
.eb-open { background:linear-gradient(180deg, rgba(31,25,40,.96), rgba(22,18,29,.9)); border:1px solid var(--bg-3); border-top:none; border-radius:0 0 10px 10px; padding:8px 12px; }
.eb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.eb-head b { color:var(--gold); }
.eb-list { display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow-y:auto; }
.eb-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; font-size:13px; background:rgba(255,255,255,.02); }
.eb-row .eb-text { white-space:normal; }
.eb-row.pinned { background:rgba(255,215,120,.08); border:1px solid rgba(255,215,120,.3); }
.eb-pin { flex:0 0 auto; }

/* ═══ 反馈特效（P-29·借旧版：答对金粒/连击pop/受击红闪/破境回声/标题流光）═══ */
.cb-particle { position:fixed; width:7px; height:7px; border-radius:50%; z-index:96; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, var(--gold) 55%, transparent 100%);
  transform:translate(-50%,-50%); animation:cbBurst .46s ease-out forwards; }
@keyframes cbBurst { 0%{opacity:1; transform:translate(-50%,-50%) scale(1.1);} 100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.25);} }
.cb-combo { position:fixed; left:50%; top:34%; z-index:97; pointer-events:none; color:var(--gold);
  font-size:22px; font-weight:700; letter-spacing:.06em; text-shadow:0 2px 12px rgba(0,0,0,.6); animation:cbComboPop .95s ease-out forwards; }
@keyframes cbComboPop { 0%{opacity:0; transform:translateX(-50%) scale(.6);} 20%{opacity:1; transform:translateX(-50%) scale(1.15);} 70%{opacity:1; transform:translateX(-50%) scale(1);} 100%{opacity:0; transform:translateX(-50%) translateY(-18px) scale(1);} }
.cb-redflash { position:fixed; inset:0; z-index:94; pointer-events:none; box-shadow:inset 0 0 130px 44px rgba(232,92,92,.5); animation:cbRedFlash .42s ease-out forwards; }
@keyframes cbRedFlash { from{opacity:1;} to{opacity:0;} }
.break-echo { position:fixed; inset:0; z-index:170; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:radial-gradient(circle at 50% 44%, rgba(46,24,68,.74), rgba(8,6,14,.92) 70%); animation:beFadeIn .4s ease; }
.break-echo .be-text { color:var(--gold); font-size:34px; letter-spacing:.3em; font-weight:700; text-shadow:0 0 24px rgba(230,200,112,.6); animation:beTextPop .8s ease; }
@keyframes beFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes beTextPop { 0%{opacity:0; transform:scale(.7);} 40%{opacity:1; transform:scale(1.1);} 100%{opacity:1; transform:scale(1);} }
/* 标题一次性流光扫光 */
h2 { position:relative; overflow:hidden; }
h2::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,235,170,.30) 50%, transparent 58%);
  transform:translateX(-120%); animation:h2sheen 1.1s ease .08s 1; }
@keyframes h2sheen { to{transform:translateX(120%);} }
@media (prefers-reduced-motion: reduce) {
  .cb-particle, .cb-combo, .cb-redflash { animation:none !important; }
  h2::after { display:none; }
}
.continue { display:block; margin:22px auto 0; min-width:160px; }
.story-page.kbd-nav .continue {
  box-shadow:0 0 0 1px rgba(230,200,112,.18), 0 12px 26px rgba(0,0,0,.24);
}
.story-page.kbd-nav .continue:hover { transform:translateY(-1px); }
.story-page .back { display:block; margin:10px auto 0; min-width:120px; opacity:.8; }
.story-page .story-exit { display:block; margin:8px auto 0; min-width:120px; opacity:.65; }
/* P-KEYNAV 翻页提示 */
.kbd-hint { text-align:center; margin:12px auto 0; color:var(--ink-2); font-size:12.5px; opacity:.7; letter-spacing:.5px; }

/* ─── 剧情页 ─── */
.story-page { animation:pageIn .4s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } }
.story-readbar {
  display:grid; grid-template-columns:auto minmax(88px, 1fr) auto; gap:10px; align-items:center;
  margin:0 0 16px; padding:8px 10px; border:1px solid rgba(116,204,232,.18); border-radius:10px;
  background:linear-gradient(180deg, rgba(116,204,232,.08), rgba(18,14,26,.42));
  color:var(--ink-2); font-size:12px;
}
.story-readbar span { color:var(--gold-2); white-space:nowrap; }
.story-readbar i {
  display:block; height:5px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.34);
  box-shadow:inset 0 0 0 1px rgba(230,200,112,.14);
}
.story-readbar b { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--cyan), var(--gold)); }
.story-readbar em { color:var(--cyan); font-style:normal; white-space:nowrap; }
.story-body { font-size:18px; line-height:1.9; }
.word-lead, .choice-prompt { margin-bottom:14px; }
.story-scene { display:block; }
.story-page.has-portrait .story-scene { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:20px; align-items:start; }
.story-page.has-portrait .story-portrait.left { order:-1; }
.story-portrait { position:relative; margin:0; min-height:320px; overflow:hidden; border-radius:16px;
  border:1px solid rgba(230,200,112,.26); background:radial-gradient(circle at 50% 20%, rgba(92,119,133,.18), rgba(15,12,22,.72) 70%); }
.story-portrait::after { content:""; position:absolute; inset:auto 0 0; height:38%; pointer-events:none;
  background:linear-gradient(transparent, rgba(10,8,15,.92)); }
.story-portrait img { display:block; width:100%; height:360px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.story-portrait figcaption { position:absolute; z-index:1; left:0; right:0; bottom:12px; text-align:center;
  color:var(--gold); letter-spacing:.16em; font-size:14px; }
.story-page.portrait-intro .story-scene { display:block; }
.story-page.portrait-intro .story-portrait { max-width:720px; min-height:460px; margin:0 auto 22px;
  background:
    radial-gradient(circle at 50% 16%, rgba(130,150,168,.20), transparent 42%),
    linear-gradient(180deg, rgba(24,22,34,.88), rgba(11,9,18,.96)); }
.story-page.portrait-intro .story-portrait img { height:520px; }
.story-page.portrait-intro .story-copy { max-width:760px; margin:0 auto; padding:18px 22px;
  border:1px solid rgba(230,200,112,.18); border-radius:14px;
  background:linear-gradient(180deg, rgba(19,16,28,.72), rgba(13,10,19,.54)); }
.story-page.portrait-intro .story-body { font-size:17px; line-height:1.85; }

/* ─── 识词卡 ─── */
.wordcard {
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
  border:1px solid var(--gold-2); border-radius:14px; padding:22px; margin:8px 0;
  box-shadow:var(--shadow); text-align:center; animation:pageIn .35s ease; position:relative;
}
.wc-actions {
  position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:6px; z-index:2;
}
.wc-actions .btn-mini { min-height:30px; padding:4px 9px; font-size:12px; }
.wc-mark-known.marked { color:var(--jade); border-color:rgba(91,232,137,.45); opacity:.88; }
.wc-star { min-width:34px; font-size:18px !important; line-height:1; color:var(--ink-3); }
.wc-star.active { color:var(--gold); border-color:rgba(230,200,112,.55); background:rgba(230,200,112,.1); }
.wc-tag { color:var(--gold-2); font-size:13px; letter-spacing:.2em; }
.wc-word { font-size:40px; color:var(--gold); letter-spacing:.12em; margin:10px 0 4px; font-weight:700; }
.wc-pos { color:var(--ink-2); font-size:16px; }
.wc-ipa { color:var(--cyan); font-size:15px; letter-spacing:.04em; margin:2px 0 4px; }
.wc-meta-row { display:flex; justify-content:center; gap:6px; margin:6px 0 4px; flex-wrap:wrap; }
.freq-badge {
  display:inline-flex; align-items:center; justify-content:center; min-height:22px; padding:2px 8px;
  border-radius:999px; border:1px solid rgba(116,204,232,.3); color:var(--cyan);
  background:rgba(116,204,232,.08); font-size:12px; line-height:1.3; white-space:nowrap;
}
.freq-high { color:var(--gold); border-color:rgba(230,200,112,.48); background:rgba(230,200,112,.1); }
.freq-mid { color:var(--cyan); border-color:rgba(116,204,232,.36); }
.freq-low { color:var(--ink-3); border-color:rgba(199,190,171,.24); background:rgba(255,255,255,.035); }
.freq-est { border-style:dashed; }
.cult-accent { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--ink-2); font-size:14px; }
.cult-accent .accent-opt.active { border-color:var(--gold); color:var(--gold); }
.wc-en { color:var(--ink-3); font-size:14px; font-style:italic; margin:10px 0; }
.wc-ex { font-size:15px; line-height:1.7; margin:12px 0 18px; }
.wc-ex-muted {
  color:var(--ink-3);
  border:1px dashed rgba(230,200,112,.22);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.025);
}
.wc-options { display:flex; flex-direction:column; gap:10px; margin-top:16px; counter-reset:wcopt; }
.wc-opt { width:100%; position:relative; }
/* 数字键提示：每个选项左侧自动编号 1/2/3/4，对应键盘数字键 */
.wc-opt::before {
  counter-increment:wcopt; content:counter(wcopt);
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; line-height:21px; text-align:center;
  border-radius:6px; font-size:12px; color:var(--ink-3);
  border:1px solid rgba(230,200,112,.3); background:rgba(0,0,0,.22);
}
.wc-opt.ok { border-color:var(--jade); color:var(--jade); }
.wc-opt.bad { border-color:var(--rose); color:var(--rose); }

/* ─── 答对脉冲 ─── */
@keyframes correctPulse {
  0% { box-shadow:0 0 0 0 rgba(230,200,112,0); }
  25% { box-shadow:0 0 0 10px rgba(230,200,112,.30); }
  100% { box-shadow:0 0 0 0 rgba(230,200,112,0); }
}
#app.correct-flash { animation:correctPulse .5s ease-out; }

/* ─── 旧破境横幅（剧情兼容） ─── */
.banner-breakthrough {
  position:relative; background:radial-gradient(400px 200px at 50% 50%, #4d2c6e 0%, transparent 70%);
  border:1px solid var(--gold); border-radius:14px; padding:30px 20px; text-align:center;
  margin:18px 0; overflow:hidden; animation:pulse 1.5s ease-in-out 2;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(230,200,112,.6); }
  50% { box-shadow:0 0 30px 8px rgba(230,200,112,.3); }
}
.banner-breakthrough .title { color:var(--gold); font-size:30px; letter-spacing:.3em; }
.banner-breakthrough .sub { color:var(--ink); font-size:20px; margin-top:10px; }
.banner-breakthrough .from { color:var(--ink-3); }
.banner-breakthrough .to { color:var(--gold); font-weight:700; }
.bt-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(230,200,112,.25), transparent 60%);
  animation:btGlow 1.6s ease-out;
}
@keyframes btGlow { 0% { opacity:0; transform:scale(.6); } 40% { opacity:1; } 100% { opacity:0; transform:scale(1.4); } }

/* ─── 六维雷达 ─── */
.radar { display:block; margin:0 auto; max-width:100%; height:auto; overflow:visible; }
.rdr-grid { fill:none; stroke:var(--bg-3); stroke-width:1; }
.rdr-axis { stroke:var(--bg-3); stroke-width:1; }
.rdr-shape { fill:rgba(230,200,112,.18); stroke:var(--gold); stroke-width:2; }
.rdr-label { fill:var(--ink-2); font-size:12px; text-anchor:middle; font-family:inherit; }
.rdr-val { fill:var(--cyan); }
.rdr-bonus { fill:var(--jade); font-size:10px; }
.rdr-bench { fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:4 3; opacity:.65; }
.rdr-low { fill:var(--rose); }

/* ─── 加点卡 ─── */
.alloc-card {
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2)); border:1px solid var(--gold-2);
  border-radius:14px; padding:20px; text-align:center; box-shadow:var(--shadow);
}
.alloc-free { color:var(--jade); margin:8px 0; }
.alloc-free b { color:var(--jade); }
.alloc-rows { display:flex; flex-direction:column; gap:8px; max-width:320px; margin:12px auto; }
.alloc-row { display:flex; align-items:center; justify-content:space-between; padding:4px 8px;
  border:1px solid var(--bg-3); border-radius:8px; }
.ar-name { color:var(--ink-2); }
.ar-val { color:var(--gold); margin-left:auto; margin-right:12px; }
.ar-val em { color:var(--jade); font-size:12px; font-style:normal; }

/* ─── 战斗 ─── */
.battle { animation:pageIn .35s ease; }
.cb-visuals { display:grid; grid-template-columns:1fr 52px 1fr; gap:10px; align-items:center; margin:6px 0 16px; }
.cb-art { position:relative; height:210px; overflow:hidden; border-radius:14px; border:1px solid var(--bg-3);
  background:radial-gradient(circle at 50% 30%, rgba(88,106,128,.2), rgba(15,12,22,.88) 72%); }
.cb-art.foe { border-color:rgba(203,85,100,.34); }
.cb-art.self { border-color:rgba(230,200,112,.34); }
.cb-art img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center top;
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.5)); }
.cb-art span { position:absolute; z-index:3; left:0; right:0; bottom:8px; text-align:center; color:var(--ink-2);
  font-size:13px; letter-spacing:.12em; text-shadow:0 2px 6px #000; }
.cb-art::after { content:""; position:absolute; z-index:2; inset:auto 0 0; height:36%; background:linear-gradient(transparent, rgba(8,6,13,.92)); }
.cb-art-fallback { position:absolute; inset:0; display:grid; place-items:center; color:rgba(230,200,112,.2); font-size:72px; }
.cb-vs { color:var(--gold-2); text-align:center; font-size:13px; letter-spacing:.08em; }
.cb-bars { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.cb-name { font-size:15px; color:var(--ink-2); margin-bottom:3px; }
.cb-foe-side.dead { opacity:.48; filter:saturate(.55); }
.cb-foe-side.dead .cb-name::after { content:" · 已溃散"; color:var(--rose); font-size:12px; }
.cb-hp { height:16px; border-radius:8px; background:var(--bg-1); border:1px solid var(--bg-3); overflow:hidden; }
.cb-hp-fill { height:100%; transition:width .45s cubic-bezier(.2,.8,.3,1); }
.cb-hp.foe .cb-hp-fill { background:linear-gradient(90deg, var(--red), var(--rose)); }
.cb-hp.self .cb-hp-fill { background:linear-gradient(90deg, var(--gold-2), var(--gold)); }
.cb-hp-num { font-size:13px; color:var(--ink-3); text-align:right; margin-top:2px; }
.cb-stage { min-height:120px; background:rgba(20,16,28,.6); border:1px solid var(--bg-3);
  border-radius:12px; padding:14px; margin:6px 0 14px; }
.cb-detect { text-align:center; margin:6px 0 2px; letter-spacing:.05em; color:var(--cyan); }
.cb-line { font-size:15px; line-height:1.7; padding:3px 0; }
.cb-ctrl { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cb-reveal { flex:1; font-size:14px; color:var(--ink-2); min-width:180px; }
.cb-reveal b { color:var(--gold); }
.cb-reveal input { width:100%; accent-color:var(--gold); }
.cb-result { text-align:center; margin-top:14px; padding:14px; border-radius:12px; font-size:18px;
  animation:pulse 1.2s ease-in-out 1; }
.cb-result.win { border:1px solid var(--gold); background:radial-gradient(300px 100px at 50% 50%, #3a2c1a, transparent 70%); }
.cb-result.lose { border:1px solid var(--rose); }
.boss-duel-art { display:grid; grid-template-columns:1fr 110px 1fr; gap:12px; align-items:center; margin:16px 0; }
.boss-duel-art figure { position:relative; height:280px; margin:0; overflow:hidden; border-radius:16px;
  border:1px solid rgba(230,200,112,.3); background:radial-gradient(circle at 50% 30%, rgba(54,73,88,.24), rgba(12,9,17,.9) 74%); }
.boss-duel-art img { width:100%; height:100%; object-fit:contain; object-position:center top; }
.boss-duel-art figcaption { position:absolute; left:0; right:0; bottom:10px; text-align:center; color:var(--gold); letter-spacing:.14em; }
.boss-duel-mark { text-align:center; color:var(--gold); font-size:16px; line-height:1.5; text-shadow:0 0 16px rgba(230,200,112,.28); }

@media (max-width:700px) {
  .story-readbar { grid-template-columns:1fr; gap:6px; }
  .story-readbar span, .story-readbar em { white-space:normal; }
  .story-page.has-portrait .story-scene { grid-template-columns:1fr; }
  .story-page.has-portrait .story-portrait { order:-1; min-height:240px; }
  .story-portrait img { height:280px; }
  .story-page.portrait-intro .story-portrait { min-height:300px; margin-bottom:16px; }
  .story-page.portrait-intro .story-portrait img { height:340px; }
  .story-page.portrait-intro .story-copy { padding:14px 16px; }
  .cb-art { height:150px; }
  .cb-visuals { grid-template-columns:1fr 40px 1fr; gap:6px; }
  .boss-duel-art { grid-template-columns:1fr 64px 1fr; gap:6px; }
  .boss-duel-art figure { height:190px; }
  .boss-duel-mark { font-size:12px; }
}

/* ─── 选择 ─── */
.choice-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.choice-opt { text-align:left; line-height:1.6; padding:14px 18px; }
.choice-opt:hover { border-color:var(--gold); color:var(--gold); }

/* ─── toast / 飘字 ─── */
.toast {
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%);
  background:rgba(20,16,28,.95); border:1px solid var(--gold-2); color:var(--gold);
  padding:10px 20px; border-radius:24px; font-size:15px; z-index:60;
  box-shadow:var(--shadow); animation:toastIn .3s ease;
}
.toast.out { opacity:0; transform:translate(-50%,12px); transition:.4s; }
.toast-gold { border-color:var(--gold-2); color:var(--gold); }
.toast-rose { border-color:var(--rose); color:var(--rose); }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,16px); } }

/* ─── P-MODAL 低打扰弹窗 ─── */
.modal-root { position:fixed; inset:0; z-index:86; display:none; align-items:center; justify-content:center; padding:46px 80px; overflow:hidden; }
.modal-root.show { display:flex; animation:pageIn .18s ease; }
.modal-backdrop { position:absolute; inset:0; background:rgba(5,4,9,.72); }
.game-modal {
  position:relative; width:min(520px, calc(100vw - 64px)); max-height:calc(100vh - 56px); overflow:hidden;
  background:
    radial-gradient(circle at 16% 0%, rgba(96,184,216,.16), transparent 38%),
    linear-gradient(180deg, rgba(23,18,34,.98), rgba(12,10,18,.98));
  border:1px solid rgba(230,200,112,.42); border-radius:18px; padding:24px;
  box-shadow:0 22px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.04);
}
.game-modal::before {
  content:""; position:absolute; inset:10px; border:1px solid rgba(123,217,240,.10);
  border-radius:14px; pointer-events:none;
}
.modal-x {
  position:absolute;
  top:16px;
  right:24px;
  z-index:6;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:rgba(8,7,12,.58);
  border:1px solid rgba(230,200,112,.18);
  border-radius:10px;
  color:var(--ink-3);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.modal-x:hover { color:var(--gold); border-color:rgba(230,200,112,.38); }
.modal-tag { color:var(--cyan); font-size:13px; letter-spacing:.16em; margin-bottom:8px; }
.game-modal h2 { margin:0 28px 12px 0; color:var(--gold); font-size:24px; }
.modal-body { color:var(--ink-2); line-height:1.8; font-size:15px; max-height:calc(100vh - 190px); overflow:auto; padding-right:2px; }
.modal-body p { margin:8px 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:18px; }
.modal-confirm { border-color:rgba(232,116,116,.48); }
.modal-confirm .modal-tag { color:var(--rose); }
.modal-alert { border-color:rgba(123,217,240,.38); }
.modal-avatar {
  width:min(1280px, calc(100vw - 160px));
  max-height:calc(100vh - 92px);
  padding:18px 20px 20px;
}
.modal-avatar .modal-body {
  max-height:calc(100vh - 220px);
  overflow:auto;
}

/* ─── 识海浮层 ─── */
#overlay { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:rgba(8,6,12,.7); }
#overlay.show { display:flex; animation:pageIn .25s ease; }
.overlay-panel { position:relative; max-width:420px; width:90%; max-height:86vh; overflow:auto;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2)); border:1px solid var(--gold-2);
  border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.overlay-close { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink-3);
  font-size:24px; cursor:pointer; z-index:2; width:38px; height:38px; line-height:1; }
.status-screen { text-align:center; }
.ss-meta { color:var(--ink-2); margin-bottom:10px; }
.ss-radar { margin:10px 0; }
.vocab-source-box {
  margin-top:14px; padding:12px; border:1px solid var(--bg-3); border-radius:10px;
  background:rgba(20,16,28,.42); text-align:left;
}
.vocab-source-row { display:grid; gap:3px; }
.vocab-source-row b { color:var(--gold); font-size:14px; }
.vocab-source-row span { color:var(--ink-2); font-size:13px; line-height:1.5; }
.vocab-source-row em { color:var(--ink-3); font-size:12px; line-height:1.5; font-style:normal; }

/* ─── 时间养成 hub ─── */
.hub-screen { animation:pageIn .35s ease; }
.hub-hero {
  padding:20px 0 18px; border-bottom:1px solid var(--bg-3); margin-bottom:16px;
}
.hub-time { color:var(--cyan); font-size:15px; }
.hub-hero h1 { color:var(--gold); font-size:30px; margin:2px 0 4px; letter-spacing:0; }
.hub-meta { color:var(--ink-2); font-size:15px; }
.hub-life { margin-top:4px; color:var(--jade); font-size:13px; }
.hub-deadline { margin-top:6px; color:var(--ink-3); font-size:13px; }
.hub-note {
  margin-top:12px; padding:10px 12px; border:1px solid rgba(230,200,112,.35);
  background:rgba(230,200,112,.08); color:var(--gold); border-radius:8px; font-size:15px;
}
.deadline-box {
  display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center;
  margin-top:12px; padding:12px; border:1px solid var(--rose); border-radius:10px;
  background:rgba(232,116,116,.09);
}
.deadline-box b { color:var(--rose); }
.deadline-box span { color:var(--ink-2); font-size:14px; }
.deadline-box .btn { grid-row:1 / span 2; grid-column:2; }
/* §11 强提醒横幅：言气满该突破 / 剧情太久没推 */
.hub-nudge {
  margin-top:10px; padding:10px 14px; border-radius:9px; font-size:14px; line-height:1.5;
  border:1px solid rgba(230,200,112,.5); background:rgba(230,200,112,.1); color:var(--gold);
  animation:nudgePulse 2s ease-in-out infinite;
}
.hub-nudge b { color:#f4dd86; }
.hub-nudge.nudge-story { border-color:rgba(116,204,232,.5); background:rgba(116,204,232,.1); color:var(--cyan); }
.hub-nudge.nudge-story b { color:#a6e0f4; }
@keyframes nudgePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(230,200,112,.0);} 50%{ box-shadow:0 0 10px 1px rgba(230,200,112,.28);} }
.deadline-box.vow-behind { border-color:var(--gold); background:rgba(230,200,112,.1); }
.deadline-box.vow-behind b { color:var(--gold); }
.reduced-motion .hub-nudge { animation:none; }
.exp-box { max-width:520px; margin-top:14px; }
.exp-head { display:flex; justify-content:space-between; align-items:center; color:var(--ink-2); font-size:14px; }
.exp-head b { color:var(--cyan); }
.exp-track {
  height:14px; background:var(--bg-1); border:1px solid var(--bg-3); border-radius:8px;
  overflow:hidden; margin-top:5px;
}
.exp-fill {
  height:100%; background:linear-gradient(90deg, var(--cyan), var(--gold));
  transition:width .35s ease;
}
/* P-BREAK 突破按钮 + 天劫题面 */
.exp-row { display:flex; align-items:center; gap:10px; }
.exp-row .exp-track { flex:1; margin-top:0; }
.exp-break-btn { white-space:nowrap; padding:6px 16px; }
.exp-box.can-break { animation:expBreathe 1.6s ease-in-out infinite; }
@keyframes expBreathe { 0%,100%{ filter:drop-shadow(0 0 0 rgba(214,178,92,0)); } 50%{ filter:drop-shadow(0 0 6px rgba(214,178,92,.55)); } }
.exp-break-hint { color:var(--gold); font-size:12.5px; margin-top:6px; }
.trib-head { margin-bottom:14px; }
.trib-meta { display:flex; gap:16px; color:var(--ink-2); font-size:13.5px; margin-top:4px; }
.trib-meta span:last-child { color:var(--gold); }
@media (prefers-reduced-motion: reduce) { .exp-box.can-break { animation:none; } }
.hub-grid { display:grid; grid-template-columns:minmax(220px, 280px) 1fr; gap:16px; align-items:start; }
.hub-panel {
  background:linear-gradient(180deg, rgba(31,25,40,.86), rgba(22,18,29,.86));
  border:1px solid var(--bg-3); border-radius:12px; padding:14px;
}
.panel-title { color:var(--gold); font-size:16px; margin-bottom:8px; }
.hub-radar { text-align:center; }
.hub-radar .btn { margin-top:8px; width:100%; }
.hub-onboard {
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:center;
  margin:12px 0 0; padding:10px 12px; border:1px solid rgba(116,204,232,.28); border-radius:10px;
  background:linear-gradient(180deg, rgba(116,204,232,.12), rgba(16,12,22,.56));
  color:var(--ink-2); font-size:13px; line-height:1.55;
}
.hub-onboard b { color:var(--cyan); white-space:nowrap; }
.hub-onboard span { min-width:0; }
.avatar-panel { margin-bottom:14px; text-align:left; }
/* 背包内的立绘：随装/卸实时显形，比 hub 左栏矮一号，省出装备栏空间。 */
.inv-avatar { margin:6px 0 12px; }
.inv-avatar .avatar-panel { margin-bottom:0; }
.inv-avatar .avatar-stage { height:300px; }
.inv-avatar .avatar-rig {
  width:min(88%, 230px);
  --avatar-gear-scale:.92;
}
.inventory-screen.gear-swap-feedback .inv-avatar .avatar-stage {
  animation:gearSwapGlow .72s ease;
}
.inventory-screen.gear-swap-feedback .inv-avatar .avatar-figure {
  animation:avatarSwapFocus .48s ease-out;
}
.inventory-screen.gear-swap-feedback .inv-avatar .avatar-gear-img {
  animation:gearSnapIn .42s ease-out both;
}
.avatar-stage {
  position:relative;
  height:330px;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(150px 170px at 50% 38%, rgba(116,204,232,.14), transparent 72%),
    linear-gradient(180deg, rgba(12,10,18,.16), rgba(8,6,12,.58));
}
.avatar-preview-trigger {
  cursor:zoom-in;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.avatar-preview-trigger:hover,
.avatar-preview-trigger:focus-visible {
  transform:scale(1.018);
  outline:none;
  box-shadow:0 0 0 1px rgba(230,200,112,.26), 0 0 24px rgba(116,204,232,.14);
  filter:saturate(1.04) brightness(1.04);
}
.avatar-stage::before {
  content:"";
  position:absolute;
  inset:16px 20px auto;
  height:60%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(230,200,112,.12), transparent 68%);
  filter:blur(8px);
  opacity:.62;
  z-index:0;
}
.avatar-stage::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.08) 48%, transparent 58% 100%);
  transform:translateX(-110%);
  animation:avatarWind 7s ease-in-out infinite;
  pointer-events:none;
  z-index:8;
}
.avatar-rig {
  position:absolute;
  left:50%;
  bottom:0;
  width:min(92%, 250px);
  height:100%;
  transform:translateX(-50%);
  --avatar-gear-scale:1;
  z-index:1;
  contain:layout paint;
}
.avatar-room {
  position:absolute;
  left:50%;
  bottom:0;
  width:132%;
  height:98%;
  transform:translateX(-50%);
  border-radius:18px 18px 10px 10px;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.avatar-room-wall,
.avatar-room-floor,
.avatar-room-groundline,
.avatar-room-footshadow {
  position:absolute;
  display:block;
  pointer-events:none;
}
.avatar-room-wall {
  inset:0 0 23%;
  background:
    linear-gradient(115deg, rgba(255,255,255,.055), transparent 26% 100%),
    linear-gradient(90deg, transparent 0 15%, rgba(230,200,112,.08) 15.5% 16%, transparent 16.5% 84%, rgba(230,200,112,.07) 84.5% 85%, transparent 85.5% 100%),
    linear-gradient(180deg, rgba(230,200,112,.1), rgba(10,8,16,.04) 44%, rgba(8,6,12,.24)),
    radial-gradient(ellipse at 24% 38%, rgba(116,204,232,.09), transparent 44%),
    radial-gradient(ellipse at 80% 44%, rgba(230,200,112,.08), transparent 46%),
    linear-gradient(180deg, rgba(24,24,34,.34), rgba(10,8,16,.14));
  border:1px solid rgba(230,200,112,.12);
  border-bottom:0;
  border-radius:18px 18px 4px 4px;
  box-shadow:
    inset 20px 0 34px rgba(255,255,255,.035),
    inset -22px 0 38px rgba(0,0,0,.22),
    inset 0 -34px 42px rgba(0,0,0,.24),
    0 16px 28px rgba(0,0,0,.14);
  opacity:.78;
}
.avatar-room-floor {
  left:-8%;
  right:-8%;
  bottom:-4%;
  height:36%;
  border-radius:50% 50% 10px 10px / 24% 24% 10px 10px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(230,200,112,.12), transparent 58%),
    radial-gradient(ellipse at 80% 36%, rgba(0,0,0,.26), transparent 42%),
    linear-gradient(110deg, rgba(255,255,255,.04), transparent 30% 100%),
    repeating-linear-gradient(96deg, rgba(230,200,112,.05) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(37,32,42,.34), rgba(9,7,13,.62));
  border:1px solid rgba(230,200,112,.1);
  border-top-color:rgba(230,200,112,.2);
  box-shadow:
    inset 0 18px 26px rgba(255,255,255,.035),
    inset 0 -18px 32px rgba(0,0,0,.26),
    0 -8px 18px rgba(0,0,0,.18);
  transform:perspective(260px) rotateX(56deg);
  transform-origin:50% 100%;
  opacity:.9;
}
.avatar-room-groundline {
  left:5%;
  right:5%;
  bottom:28%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,200,112,.22), rgba(116,204,232,.12), transparent);
  box-shadow:0 5px 15px rgba(0,0,0,.28);
  opacity:.86;
}
.avatar-room-footshadow {
  left:31%;
  bottom:7%;
  width:42%;
  height:13%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.48), rgba(0,0,0,.22) 46%, transparent 72%);
  filter:blur(4px);
  opacity:.74;
}
.avatar-figure,
.avatar-preview-figure {
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:100%;
  max-height:100%;
  object-fit:contain;
  transform:translateX(-50%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(116,204,232,.14));
  animation:none;
  transition:filter .18s ease, opacity .18s ease;
  z-index:3;
}
.avatar-female .avatar-stage .avatar-rig { width:min(96%, 260px); }
.avatar-gear-layer {
  position:absolute;
  z-index:2;
  width:58px;
  height:58px;
  border-radius:12px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(230,200,112,.2);
  background:rgba(10,8,16,.38);
  box-shadow:0 10px 22px rgba(0,0,0,.32);
  opacity:.5;
  pointer-events:none;
}
.avatar-gear-layer.equipped {
  background-image:url("../../素材/物品/market-items.png");
  background-size:600% 500%;
  background-repeat:no-repeat;
  border-color:rgba(230,200,112,.52);
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(230,200,112,.16));
  animation:avatarGearPulse 3.8s ease-in-out infinite;
}
.avatar-gear-layer b {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:rgba(230,200,112,.54);
  font-size:18px;
  background:linear-gradient(180deg, rgba(31,25,40,.58), rgba(10,8,16,.72));
}
.avatar-gear-layer.equipped b { display:none; }
.avatar-gear-weapon {
  left:16px;
  bottom:28px;
  transform:rotate(-8deg);
}
.avatar-gear-artifact,
.avatar-gear-talisman {
  right:16px;
  top:48px;
  transform:rotate(7deg);
}
.avatar-gear-outfit {
  left:50%;
  bottom:18px;
  width:150px;
  height:230px;
  transform:translateX(-50%);
}
.avatar-gear-layer.gear-true {
  left:var(--gear-left);
  top:var(--gear-top);
  right:auto;
  bottom:auto;
  width:var(--gear-width);
  height:var(--gear-height);
  border:0;
  border-radius:0;
  display:block;
  overflow:visible;
  background:transparent;
  box-shadow:none;
  opacity:1;
  transform:translate(-50%, -50%) rotate(var(--gear-rotate)) scale(var(--avatar-gear-scale, 1));
  transform-origin:center center;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(230,200,112,.13));
  animation:avatarGearAppear .36s ease both, avatarGearSettle 4.6s ease-in-out .36s infinite;
}
.avatar-gear-img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  transition:opacity .16s ease, filter .16s ease;
}
.avatar-gear-layer.gear-true b { display:none; }
.avatar-gear-layer.gear-layer-wall {
  z-index:2;
  animation:avatarGearAppear .24s ease both;
  filter:drop-shadow(10px 16px 12px rgba(0,0,0,.46)) drop-shadow(0 0 7px rgba(230,200,112,.08));
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon.gear-mount-floor-lean,
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon.gear-mount-floor-lean-heavy {
  top:auto;
  bottom:var(--gear-bottom);
  transform:translateX(-50%) rotate(var(--gear-rotate)) scale(var(--avatar-gear-scale, 1));
  transform-origin:50% 100%;
  animation:avatarGearAppear .24s ease both;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon::before {
  content:"";
  position:absolute;
  left:58%;
  top:7%;
  width:calc(var(--gear-width) * .72);
  height:24px;
  transform:translateX(-50%) rotate(7deg);
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,.12) 48%, transparent 74%);
  filter:blur(5px);
  opacity:.66;
  pointer-events:none;
  z-index:0;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon::after {
  content:"";
  position:absolute;
  left:54%;
  bottom:-11%;
  width:calc(var(--gear-width) * 1.1);
  height:20px;
  transform:translateX(-50%) rotate(8deg) skewX(-18deg);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.56), rgba(0,0,0,.24) 48%, transparent 74%),
    linear-gradient(90deg, transparent 0 38%, rgba(230,200,112,.18) 40% 45%, transparent 48% 100%);
  filter:blur(5px);
  opacity:.82;
  pointer-events:none;
  z-index:0;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon.gear-mount-floor-lean-heavy::before {
  width:calc(var(--gear-width) * .82);
  height:30px;
  opacity:.76;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-weapon.gear-mount-floor-lean-heavy::after {
  width:calc(var(--gear-width) * 1.22);
  height:24px;
  bottom:-8%;
  opacity:.88;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-artifact::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--gear-width) + 26px);
  height:calc(var(--gear-width) + 26px);
  min-width:48px;
  min-height:48px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px solid rgba(116,204,232,.16);
  background:
    radial-gradient(circle at 50% 50%, rgba(116,204,232,.11), transparent 56%),
    conic-gradient(from 40deg,
      transparent 0 10%,
      rgba(116,204,232,.2) 13%,
      transparent 20% 46%,
      rgba(230,200,112,.13) 52%,
      transparent 62% 100%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(230,200,112,.08) 63%, transparent 76%);
  box-shadow:
    inset 9px 12px 18px rgba(0,0,0,.2),
    inset -5px -6px 14px rgba(116,204,232,.07),
    0 10px 16px rgba(0,0,0,.18),
    0 0 16px rgba(116,204,232,.08);
  pointer-events:none;
  z-index:1;
  animation:avatarArtifactRing 6.8s linear infinite;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-artifact::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:rgba(230,200,112,.34);
  box-shadow:
    -18px -4px 0 -2px rgba(116,204,232,.36),
    17px 7px 0 -2px rgba(230,200,112,.32),
    5px -20px 0 -2px rgba(116,204,232,.28),
    -8px 19px 0 -3px rgba(230,200,112,.24);
  opacity:.52;
  animation:avatarArtifactSpark 4.4s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-artifact.gear-mount-artifact-niche {
  animation:avatarGearAppear .36s ease both, avatarArtifactDrift 5.2s ease-in-out .36s infinite;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(116,204,232,.18));
}
.avatar-gear-layer.gear-layer-wall .avatar-gear-img {
  position:relative;
  z-index:2;
  filter:drop-shadow(4px 8px 5px rgba(0,0,0,.4)) brightness(.96) saturate(.98);
}
.avatar-gear-layer.gear-layer-wall.avatar-gear-artifact .avatar-gear-img {
  filter:drop-shadow(0 0 6px rgba(116,204,232,.2)) drop-shadow(3px 7px 5px rgba(0,0,0,.34));
  animation:avatarArtifactCore 3.2s ease-in-out infinite;
}
.avatar-gear-layer.gear-layer-behind { z-index:1; }
.avatar-gear-layer.gear-layer-behind.gear-mount-back {
  animation:avatarGearAppear .24s ease both;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.38));
}
.avatar-gear-layer.gear-layer-front { z-index:4; }
.avatar-gear-layer.gear-layer-front.gear-mount-waist,
.avatar-gear-layer.gear-layer-front.gear-mount-hip-sheath {
  animation:avatarGearAppear .24s ease both;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.36)) drop-shadow(0 0 5px rgba(230,200,112,.1));
}
.avatar-gear-layer.gear-layer-float {
  z-index:5;
  animation:avatarGearAppear .36s ease both, avatarGearFloat 4.8s ease-in-out .36s infinite;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.38)) drop-shadow(0 0 13px rgba(116,204,232,.24));
}
.avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit {
  animation:avatarGearAppear .36s ease both, avatarSwordDrift 4.7s ease-in-out .36s infinite;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.36)) drop-shadow(0 0 16px rgba(116,204,232,.26));
}
.avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--gear-width) + 34px);
  height:2px;
  transform:translate(-50%, -50%) rotate(-28deg);
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(116,204,232,.5), rgba(230,200,112,.28), transparent);
  box-shadow:0 0 14px rgba(116,204,232,.25);
  opacity:.72;
  animation:avatarSwordTrail 3.9s ease-in-out infinite;
  pointer-events:none;
}
.avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--gear-width) + 18px);
  height:calc(var(--gear-height) + 12px);
  transform:translate(-50%, -50%) rotate(var(--gear-rotate));
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 48%, rgba(116,204,232,.12), transparent 68%);
  opacity:.76;
  animation:avatarSwordAura 4.8s ease-in-out infinite;
  pointer-events:none;
}
.avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit .avatar-gear-img {
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 9px rgba(116,204,232,.2));
}
.avatar-gear-layer.gear-layer-float.avatar-gear-artifact {
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.34)) drop-shadow(0 0 9px rgba(116,204,232,.18));
}
.avatar-gear-layer.gear-layer-float.avatar-gear-artifact.gear-mount-artifact-orbit {
  animation:avatarGearAppear .36s ease both, avatarArtifactDrift 5.2s ease-in-out .36s infinite;
}
.avatar-gear-layer.gear-layer-float.avatar-gear-artifact::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--gear-width) + 12px);
  height:calc(var(--gear-width) + 12px);
  min-width:32px;
  min-height:32px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px solid rgba(116,204,232,.13);
  background:
    radial-gradient(circle at 50% 50%, rgba(116,204,232,.07), transparent 56%),
    conic-gradient(from 40deg,
      transparent 0 10%,
      rgba(116,204,232,.18) 13%,
      transparent 20% 46%,
      rgba(230,200,112,.12) 52%,
      transparent 62% 100%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(230,200,112,.05) 61%, transparent 74%);
  box-shadow:0 0 9px rgba(116,204,232,.07), inset 0 0 10px rgba(230,200,112,.03);
  opacity:.36;
  animation:avatarArtifactRing 6.8s linear infinite;
  pointer-events:none;
}
.avatar-gear-layer.gear-layer-float.avatar-gear-artifact::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:rgba(230,200,112,.34);
  box-shadow:
    -17px -4px 0 -2px rgba(116,204,232,.36),
    16px 7px 0 -2px rgba(230,200,112,.32),
    4px -19px 0 -2px rgba(116,204,232,.28),
    -7px 18px 0 -3px rgba(230,200,112,.24);
  opacity:.5;
  animation:avatarArtifactSpark 4.4s ease-in-out infinite;
  pointer-events:none;
}
.avatar-gear-layer.gear-layer-float.avatar-gear-artifact .avatar-gear-img {
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 5px rgba(116,204,232,.14));
  animation:avatarArtifactCore 3.2s ease-in-out infinite;
}
.avatar-gear-layer.gear-mount-artifact-orbit {
  transform-origin:50% 52%;
}
.avatar-gear-layer.gear-fallback {
  z-index:5;
}
.avatar-panel.realm-1 .avatar-stage {
  background:
    radial-gradient(160px 180px at 50% 38%, rgba(116,204,232,.2), transparent 72%),
    linear-gradient(180deg, rgba(12,10,18,.14), rgba(8,6,12,.55));
}
.avatar-panel.realm-2 .avatar-stage {
  background:
    radial-gradient(170px 190px at 50% 38%, rgba(230,200,112,.18), transparent 70%),
    radial-gradient(140px 170px at 46% 48%, rgba(116,204,232,.18), transparent 75%),
    linear-gradient(180deg, rgba(12,10,18,.12), rgba(8,6,12,.52));
}
.avatar-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:9px;
}
.avatar-caption b { color:var(--gold); font-size:17px; }
.avatar-caption span { color:var(--cyan); font-size:12.5px; white-space:nowrap; }
.avatar-gear-summary { display:grid; grid-template-columns:1fr; gap:6px; margin-top:8px; }
.avatar-gear-summary span {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border:1px solid rgba(230,200,112,.16);
  border-radius:8px;
  background:rgba(10,8,16,.24);
}
.avatar-gear-summary em { color:var(--ink-3); font-size:12px; font-style:normal; }
.avatar-gear-summary b { color:var(--ink-2); font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-gear-summary b > [class^="q-"],
.avatar-preview-meta b > [class^="q-"],
.gear-bay-label b > [class^="q-"] {
  font-weight:700;
  text-shadow:0 0 8px rgba(116,204,232,.16);
}
.avatar-preview {
  display:grid;
  grid-template-columns:minmax(360px, 520px) minmax(220px, 1fr);
  gap:18px;
  align-items:stretch;
}
.avatar-preview-stage {
  position:relative;
  min-height:min(68vh, 640px);
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(230,200,112,.2);
  background:
    radial-gradient(190px 220px at 50% 38%, rgba(116,204,232,.18), transparent 72%),
    radial-gradient(150px 190px at 52% 52%, rgba(230,200,112,.12), transparent 74%),
    linear-gradient(180deg, rgba(12,10,18,.2), rgba(8,6,12,.66));
}
.avatar-preview-stage::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.08) 48%, transparent 58% 100%);
  transform:translateX(-110%);
  animation:avatarWind 7s ease-in-out infinite;
  pointer-events:none;
  z-index:8;
}
.avatar-preview-stage .avatar-rig {
  bottom:8px;
  width:min(84%, 360px);
  --avatar-gear-scale:1.44;
}
.avatar-preview-figure {
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.46)) drop-shadow(0 0 14px rgba(116,204,232,.18));
}
.avatar-preview.avatar-female .avatar-rig { width:min(88%, 374px); }
.avatar-preview .gear-fallback {
  width:72px;
  height:72px;
}
.avatar-preview .avatar-gear-weapon:not(.gear-true) { left:22px; bottom:36px; }
.avatar-preview .avatar-gear-artifact:not(.gear-true),
.avatar-preview .avatar-gear-talisman:not(.gear-true) { right:22px; top:58px; }
.avatar-preview .avatar-gear-outfit:not(.gear-true) { left:50%; bottom:22px; width:210px; height:330px; }
.avatar-preview-meta {
  display:flex;
  flex-direction:column;
  gap:9px;
  justify-content:center;
}
.avatar-preview-meta span {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  min-height:38px;
  padding:8px 10px;
  border:1px solid rgba(230,200,112,.16);
  border-radius:10px;
  background:rgba(10,8,16,.26);
}
.avatar-preview-meta em { color:var(--ink-3); font-size:13px; font-style:normal; }
.avatar-preview-meta b { color:var(--ink-2); font-size:15px; font-weight:600; line-height:1.45; }

/* 装备展示柜：B 方案横屏陈列，不再把装备硬挂在人身上。 */
.gear-preview-wide {
  grid-template-columns:minmax(560px, 1fr) minmax(190px, 240px);
  gap:12px;
}
.gear-preview-wide .avatar-preview-stage {
  height:clamp(380px, 56vh, 540px);
  min-height:0;
}
.gear-preview-wide .avatar-preview-meta {
  justify-content:flex-start;
  align-self:stretch;
  padding-top:10px;
}
.gear-preview-wide .avatar-preview-meta span {
  grid-template-columns:46px 1fr;
  min-height:34px;
  padding:7px 9px;
  border-radius:9px;
}
.gear-preview-wide .avatar-preview-meta em { font-size:12px; }
.gear-preview-wide .avatar-preview-meta b {
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gear-showcase-stage {
  padding:0;
  background:linear-gradient(180deg, rgba(10,8,15,.36), rgba(5,4,9,.72));
}
.gear-showcase {
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  overflow:hidden;
  border-radius:12px;
  background:#09070d;
  isolation:isolate;
}
.gear-showcase-scene {
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,5,10,.06), rgba(6,5,10,.14)),
    url("../../素材/装备/gear_showcase_room_floating_v2.png") center center / cover no-repeat;
  z-index:0;
}
.gear-showcase-scene::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 56%, rgba(0,0,0,.22) 88%),
    linear-gradient(90deg, rgba(0,0,0,.2), transparent 13% 86%, rgba(0,0,0,.24));
  pointer-events:none;
}
.gear-showcase-wall {
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 24.5%, rgba(230,200,112,.08) 24.8% 25.2%, transparent 25.5% 74.5%, rgba(230,200,112,.08) 74.8% 75.2%, transparent 75.5% 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.56)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 22%, rgba(230,200,112,.08), transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(230,200,112,.1),
    inset 0 -130px 110px rgba(0,0,0,.46),
    inset 26px 0 48px rgba(255,255,255,.025),
    inset -30px 0 54px rgba(0,0,0,.22);
  z-index:0;
}
.gear-showcase-wall::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:25%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,200,112,.24), rgba(116,204,232,.12), transparent);
  box-shadow:0 10px 22px rgba(0,0,0,.34);
}
.gear-showcase-wall::after {
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-6%;
  height:31%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230,200,112,.14), transparent 54%),
    repeating-linear-gradient(100deg, rgba(230,200,112,.07) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, rgba(43,37,42,.82), rgba(8,7,12,.98));
  border-top:1px solid rgba(230,200,112,.16);
  transform:perspective(420px) rotateX(54deg);
  transform-origin:50% 0;
  box-shadow:inset 0 14px 26px rgba(255,255,255,.035), 0 -10px 24px rgba(0,0,0,.28);
}
.gear-bay {
  position:relative;
  min-width:0;
  z-index:2;
  display:block;
  padding:0;
}
.gear-bay + .gear-bay {
  border-left:0;
}
.gear-bay-label {
  position:absolute;
  left:14px;
  top:12px;
  right:14px;
  display:grid;
  gap:2px;
  text-align:left;
  pointer-events:none;
  z-index:5;
}
.gear-bay-label span {
  color:var(--cyan);
  font-size:11px;
  letter-spacing:.12em;
}
.gear-bay-label b {
  color:rgba(241,234,217,.82);
  font-size:13px;
  line-height:1.35;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gear-showcase-img {
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
.gear-showcase-holder {
  position:absolute;
  left:var(--showcase-x, 50%);
  top:var(--showcase-y, 50%);
  width:var(--showcase-w, 60%);
  height:var(--showcase-h, 40%);
  transform:translate(-50%, -50%) rotate(var(--showcase-r, 0deg));
  transform-origin:50% 50%;
  pointer-events:none;
}
.gear-showcase-outfit-holder {
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.46)) saturate(.98);
  z-index:4;
}
.gear-showcase-outfit-img,
.gear-showcase-weapon-img {
  position:relative;
  width:100%;
  height:100%;
  z-index:2;
}
.gear-showcase-weapon-holder {
  z-index:3;
  filter:
    drop-shadow(10px 14px 14px rgba(0,0,0,.34))
    drop-shadow(0 0 12px rgba(116,204,232,.12))
    drop-shadow(0 0 8px rgba(230,200,112,.1));
  overflow:visible;
}
.gear-showcase-weapon-img {
  animation:gearShowcaseWeaponHover 4.2s ease-in-out infinite;
}
.gear-showcase-weapon-holder::before {
  content:none;
}
.gear-showcase-weapon-holder::after {
  content:"";
  position:absolute;
  left:var(--showcase-contact-x, 50%);
  top:var(--showcase-contact-y, 70%);
  width:var(--showcase-contact-w, 62%);
  height:var(--showcase-contact-h, 14%);
  transform:translate(-50%, -50%) rotate(var(--showcase-contact-r, 0deg));
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(116,204,232,.2), rgba(116,204,232,.06) 36%, transparent 70%),
    radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,.22) 52%, transparent 80%);
  filter:blur(12px);
  opacity:var(--showcase-contact-o, .5);
  z-index:1;
  animation:gearShowcaseWeaponShadow 4.2s ease-in-out infinite;
}
.gear-showcase-weapon-img::selection { background:transparent; }
@keyframes gearShowcaseWeaponHover {
  0%, 100% { transform:translateY(-2px); }
  50% { transform:translateY(3px); }
}
@keyframes gearShowcaseWeaponShadow {
  0%, 100% { filter:blur(12px); }
  50% { filter:blur(9px); }
}
.gear-artifact-orbit {
  position:absolute;
  left:var(--showcase-x, 51%);
  top:var(--showcase-y, 43%);
  transform:translate(-50%, -50%);
  z-index:3;
  width:var(--showcase-w, 44%);
  height:var(--showcase-h, 34%);
  display:grid;
  place-items:center;
  animation:avatarArtifactDrift 5.2s ease-in-out .2s infinite;
  will-change:transform;
}
.gear-artifact-orbit::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(116,204,232,.28);
  background:
    radial-gradient(circle at 50% 50%, rgba(116,204,232,.18), transparent 56%),
    conic-gradient(from 40deg, transparent 0 13%, rgba(116,204,232,.34) 16%, transparent 24% 50%, rgba(230,200,112,.24) 56%, transparent 66% 100%);
  box-shadow:0 0 24px rgba(116,204,232,.18), inset 0 0 22px rgba(230,200,112,.06);
  animation:avatarArtifactRing 6.8s linear infinite;
}
.gear-artifact-orbit::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(230,200,112,.38);
  box-shadow:
    -24px -6px 0 -2px rgba(116,204,232,.52),
    24px 10px 0 -2px rgba(230,200,112,.42),
    7px -27px 0 -2px rgba(116,204,232,.4),
    -10px 26px 0 -3px rgba(230,200,112,.34);
  opacity:.66;
  animation:avatarArtifactSpark 4.4s ease-in-out infinite;
}
.gear-showcase-artifact-img {
  position:relative;
  z-index:2;
  width:var(--showcase-img-w, 34%);
  height:var(--showcase-img-h, 72%);
  filter:drop-shadow(0 0 12px rgba(116,204,232,.3)) drop-shadow(0 14px 12px rgba(0,0,0,.38));
  animation:avatarArtifactCore 3.2s ease-in-out infinite;
  will-change:transform, filter;
}
.gear-empty-slot {
  display:block;
  position:absolute;
  inset:auto;
  width:1px;
  height:1px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.gear-showcase-panel {
  min-height:100%;
}
.gear-showcase-panel .gear-bay {
  padding:0;
}
.gear-showcase-panel .gear-bay-label {
  left:9px;
  right:9px;
  top:8px;
}
.gear-showcase-panel .gear-bay-label span { font-size:10px; }
.gear-showcase-panel .gear-bay-label b { font-size:11px; }
.gear-showcase-panel .gear-showcase-weapon-img {
  width:100%;
  height:100%;
}
.gear-showcase-panel .gear-artifact-orbit {
  width:var(--showcase-w, 44%);
  height:var(--showcase-h, 34%);
}
.gear-showcase-panel .gear-showcase-artifact-img {
  width:var(--showcase-img-w, 34%);
}
@keyframes avatarFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-5px); }
}
@keyframes avatarWind {
  0%,62%,100% { transform:translateX(-110%); opacity:0; }
  72% { opacity:.7; }
  88% { transform:translateX(110%); opacity:0; }
}
@keyframes avatarGearPulse {
  0%,100% { box-shadow:0 10px 22px rgba(0,0,0,.32), 0 0 0 rgba(230,200,112,0); }
  50% { box-shadow:0 10px 24px rgba(0,0,0,.36), 0 0 14px rgba(230,200,112,.18); }
}
@keyframes avatarGearSettle {
  0%,100% { margin-top:0; }
  50% { margin-top:-2px; }
}
@keyframes avatarGearFloat {
  0%,100% { margin-top:0; margin-left:0; }
  50% { margin-top:-7px; margin-left:2px; }
}
@keyframes avatarSwordDrift {
  0%,100% { margin-top:0; margin-left:0; }
  38% { margin-top:-8px; margin-left:-2px; }
  72% { margin-top:-3px; margin-left:3px; }
}
@keyframes avatarSwordTrail {
  0%,100% { opacity:.38; transform:translate(-50%, -50%) rotate(-28deg) scaleX(.72); }
  45% { opacity:.82; transform:translate(-50%, -50%) rotate(-28deg) scaleX(1.08); }
}
@keyframes avatarSwordAura {
  0%,100% { opacity:.36; transform:translate(-50%, -50%) rotate(var(--gear-rotate)) scale(.92); }
  50% { opacity:.78; transform:translate(-50%, -50%) rotate(var(--gear-rotate)) scale(1.06); }
}
@keyframes avatarArtifactDrift {
  0%,100% { margin-top:0; margin-left:0; }
  35% { margin-top:-9px; margin-left:3px; }
  70% { margin-top:-3px; margin-left:-2px; }
}
@keyframes avatarArtifactRing {
  0% { transform:translate(-50%, -50%) rotate(0deg) scale(.96); opacity:.68; }
  45% { transform:translate(-50%, -50%) rotate(160deg) scale(1.04); opacity:.96; }
  100% { transform:translate(-50%, -50%) rotate(360deg) scale(.96); opacity:.68; }
}
@keyframes avatarArtifactSpark {
  0%,100% { transform:translate(-50%, -50%) rotate(0deg) scale(.9); opacity:.48; }
  45% { transform:translate(-50%, -50%) rotate(145deg) scale(1.12); opacity:.86; }
  72% { transform:translate(-50%, -50%) rotate(250deg) scale(.98); opacity:.64; }
}
@keyframes avatarArtifactCore {
  0%,100% { filter:drop-shadow(0 0 7px rgba(116,204,232,.16)) brightness(1); }
  50% { filter:drop-shadow(0 0 14px rgba(116,204,232,.38)) brightness(1.08); }
}
@keyframes avatarGearAppear {
  from { opacity:0; filter:drop-shadow(0 0 0 rgba(230,200,112,0)); }
  to { opacity:1; }
}
@keyframes avatarSwapFocus {
  0% { filter:drop-shadow(0 18px 24px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(116,204,232,.14)); }
  42% { filter:drop-shadow(0 18px 24px rgba(0,0,0,.44)) drop-shadow(0 0 18px rgba(116,204,232,.24)); }
  100% { filter:drop-shadow(0 18px 24px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(116,204,232,.14)); }
}
@keyframes gearSnapIn {
  from { opacity:.36; transform:scale(.95); filter:brightness(1.38) saturate(1.08); }
  to { opacity:1; transform:scale(1); filter:brightness(1) saturate(1); }
}
@keyframes gearSwapGlow {
  0% { box-shadow:0 0 0 0 rgba(230,200,112,0), inset 0 0 0 0 rgba(230,200,112,0); }
  38% { box-shadow:0 0 0 1px rgba(230,200,112,.38), 0 0 30px rgba(116,204,232,.2), inset 0 0 28px rgba(230,200,112,.12); }
  100% { box-shadow:0 0 0 0 rgba(230,200,112,0), inset 0 0 0 0 rgba(230,200,112,0); }
}
body.reduced-motion .avatar-stage::after,
body.reduced-motion .avatar-figure,
body.reduced-motion .avatar-preview-stage::after,
body.reduced-motion .avatar-preview-figure,
body.reduced-motion .avatar-gear-layer.equipped,
body.reduced-motion .avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit::before,
body.reduced-motion .avatar-gear-layer.gear-layer-float.avatar-gear-weapon.gear-mount-sword-orbit::after,
body.reduced-motion .avatar-gear-layer.gear-layer-float.avatar-gear-artifact::before,
body.reduced-motion .avatar-gear-layer.gear-layer-float.avatar-gear-artifact::after,
body.reduced-motion .avatar-gear-layer.gear-layer-float.avatar-gear-artifact .avatar-gear-img,
body.reduced-motion .gear-showcase-weapon-img,
body.reduced-motion .gear-showcase-weapon-holder::before,
body.reduced-motion .gear-showcase-weapon-holder::after,
body.reduced-motion .gear-artifact-orbit,
body.reduced-motion .gear-artifact-orbit::before,
body.reduced-motion .gear-artifact-orbit::after,
body.reduced-motion .gear-showcase-artifact-img,
body.reduced-motion .inventory-screen.gear-swap-feedback .inv-avatar .avatar-figure,
body.reduced-motion .inventory-screen.gear-swap-feedback .inv-avatar .avatar-gear-img,
body.reduced-motion .inventory-screen.gear-swap-feedback .inv-avatar .avatar-stage,
body.reduced-motion .story-page { animation:none; }
.hub-actions { display:flex; flex-direction:column; gap:10px; }
.hub-bag { margin-top:14px; padding-top:12px; border-top:1px solid var(--bg-3); }
.hub-world { grid-column:1 / -1; }
.world-feel-panel { display:grid; gap:8px; }
.world-feel-title { color:var(--gold); font-size:16px; }
.world-feel-sub { color:var(--ink-3); font-size:12.5px; margin-top:-4px; }
.world-line {
  display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:start;
  padding:8px 10px; border:1px solid rgba(214,178,92,.16); border-radius:8px;
  background:rgba(10,8,18,.22);
}
.world-line span { color:var(--cyan); font-size:12.5px; white-space:nowrap; }
.world-line b { color:var(--ink-2); font-size:13.5px; font-weight:500; line-height:1.55; }
.hub-action {
  width:100%; text-align:left; padding:13px 14px; border-radius:10px; border:1px solid var(--bg-3);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink);
  cursor:pointer; font-family:inherit; transition:border-color .2s, transform .08s;
}
.hub-action:hover { border-color:var(--gold-2); }
.hub-action:active { transform:translateY(1px); }
.hub-action:disabled { opacity:.42; cursor:default; transform:none; }
.ha-label { display:block; color:var(--gold); font-size:17px; }
.ha-sub { display:block; color:var(--ink-3); font-size:13px; line-height:1.5; margin-top:2px; }
.tb-time { color:var(--ink-2); }
.tb-life { color:var(--jade); }
.tb-money { color:var(--gold); }

/* ─── P-LIFE 寿元硬死亡 ─── */
.life-death-screen {
  max-width:720px; margin:26px auto; padding:26px;
  border:1px solid rgba(203,85,100,.58); border-radius:18px;
  background:
    radial-gradient(460px 220px at 50% 0%, rgba(203,85,100,.16), transparent 72%),
    linear-gradient(180deg, rgba(31,25,40,.94), rgba(13,10,18,.96));
  box-shadow:0 22px 70px rgba(0,0,0,.48); text-align:center; animation:pageIn .35s ease;
}
.life-death-screen h2 { color:var(--rose); font-size:30px; margin:8px 0 14px; }
.life-death-screen p { color:var(--ink-2); line-height:1.9; }
.life-meter {
  display:inline-flex; align-items:center; gap:10px; margin:12px auto;
  padding:9px 14px; border:1px solid var(--bg-3); border-radius:999px;
  background:rgba(20,16,28,.58);
}
.life-meter span { color:var(--ink-3); font-size:13px; }
.life-meter b { color:var(--jade); }
.life-meter.dead { border-color:rgba(203,85,100,.48); }
.life-meter.dead b { color:var(--rose); }
.life-note {
  display:inline-block; padding:8px 12px; border:1px solid rgba(230,200,112,.28);
  border-radius:10px; background:rgba(230,200,112,.07); color:var(--gold) !important;
}
.life-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.life-burn-panel {
  border:1px solid rgba(224,190,102,.22);
  background:rgba(18,13,28,.48);
  border-radius:16px;
  padding:14px;
  margin:18px 0 14px;
}
.life-burn-head { display:flex; justify-content:space-between; gap:12px; align-items:center; color:var(--ink-3); margin-bottom:10px; }
.life-burn-head b { color:var(--gold); font-size:20px; }
.life-burn-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.life-burn-option.active {
  border-color:var(--gold);
  color:var(--gold);
  box-shadow:0 0 0 1px rgba(224,190,102,.28) inset;
}
.life-burn-custom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink-3);
  font-size:14px;
}
.life-burn-custom input {
  width:120px;
  border:1px solid var(--bg-3);
  border-radius:10px;
  background:rgba(8,6,14,.72);
  color:var(--ink);
  padding:8px 10px;
  font:inherit;
}
.life-settlement {
  margin:16px 0; padding:16px; border:1px solid var(--bg-3); border-radius:14px;
  background:rgba(20,16,28,.55); text-align:left;
}
.life-settlement h3 { color:var(--gold); margin:0 0 10px; text-align:center; }
.life-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:10px 0; }
.life-stats div { border:1px solid var(--bg-3); border-radius:10px; padding:10px; text-align:center; background:rgba(12,9,17,.5); }
.life-stats b { display:block; color:var(--gold); font-size:18px; }
.life-stats span { color:var(--ink-3); font-size:12px; }
.life-events { color:var(--ink-3); font-size:13px; line-height:1.7; padding-left:20px; }
.rebirth-screen .life-stats { margin-top:16px; }
.ghost-screen .ghost-intro { margin-bottom:12px; border-color:rgba(116,204,232,.32); }
.origin-screen {
  max-width:980px; margin:18px auto; padding:22px; border:1px solid var(--gold-2); border-radius:18px;
  background:linear-gradient(180deg, rgba(31,25,40,.94), rgba(13,10,18,.96)); box-shadow:var(--shadow);
  animation:pageIn .35s ease;
}
.origin-screen h2 { color:var(--gold); margin:6px 0 10px; }
.origin-budget { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; margin:16px 0; }
.origin-budget div { border:1px solid var(--bg-3); border-radius:10px; padding:10px; text-align:center; background:rgba(20,16,28,.5); }
.origin-budget b { display:block; color:var(--gold); font-size:22px; }
.origin-budget span { color:var(--ink-3); font-size:12px; }
.origin-budget .bad b { color:var(--rose); }
.origin-avatar-choice {
  margin:16px 0;
  padding:12px;
  border:1px solid rgba(230,200,112,.18);
  border-radius:14px;
  background:rgba(10,8,16,.22);
}
.origin-difficulty-choice {
  margin:16px 0;
  padding:12px;
  border:1px solid rgba(116,204,232,.18);
  border-radius:14px;
  background:rgba(10,8,16,.22);
}
.origin-avatar-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:10px; }
.origin-avatar-head b { color:var(--gold); font-size:18px; }
.origin-avatar-head span { color:var(--ink-3); font-size:13px; }
.origin-avatar-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.origin-avatar-card {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  align-items:center;
  min-height:150px;
  padding:10px;
  border:1px solid var(--bg-3);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(31,25,40,.72), rgba(13,10,18,.78));
  color:var(--ink);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.origin-avatar-card:hover,
.origin-avatar-card.selected { border-color:var(--gold); box-shadow:0 0 0 1px rgba(230,200,112,.18) inset; }
.origin-avatar-art {
  position:relative;
  height:130px;
  overflow:hidden;
  border-radius:10px;
  background:radial-gradient(80px 86px at 50% 38%, rgba(116,204,232,.14), transparent 72%), rgba(8,6,12,.5);
}
.origin-avatar-art img {
  position:absolute;
  left:50%;
  bottom:-16px;
  width:104%;
  max-height:150px;
  object-fit:contain;
  transform:translateX(-50%);
  animation:none;
}
.origin-avatar-card[data-gender="female"] .origin-avatar-art img {
  bottom:-90px;
  width:auto;
  height:220px;
  max-height:none;
}
.origin-avatar-text b { display:block; color:var(--gold); font-size:20px; margin-bottom:6px; }
.origin-avatar-text em { display:block; color:var(--ink-2); font-size:14px; line-height:1.55; font-style:normal; }
.origin-difficulty-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.origin-difficulty-card {
  min-height:118px;
  padding:12px;
  border:1px solid var(--bg-3);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(31,25,40,.72), rgba(13,10,18,.78));
  color:var(--ink);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.origin-difficulty-card b { display:block; color:var(--gold); font-size:18px; margin-bottom:7px; }
.origin-difficulty-card span { display:block; color:var(--cyan); margin-bottom:7px; }
.origin-difficulty-card em { display:block; color:var(--ink-3); font-size:13px; line-height:1.55; font-style:normal; }
.origin-difficulty-card:hover,
.origin-difficulty-card.selected { border-color:var(--gold); box-shadow:0 0 0 1px rgba(230,200,112,.18) inset; }
.origin-difficulty-card.locked { cursor:default; opacity:.78; }
.origin-group { margin-top:16px; }
.origin-group h3 { color:var(--cyan); font-size:15px; margin:0 0 8px; }
.origin-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.origin-trait {
  min-height:118px; text-align:left; border:1px solid var(--bg-3); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink); cursor:pointer; font-family:inherit;
}
.origin-trait:hover, .origin-trait.selected { border-color:var(--gold-2); }
.origin-trait.selected { background:linear-gradient(180deg, rgba(230,200,112,.14), var(--bg-1)); }
.origin-trait.flaw { border-color:rgba(203,85,100,.28); }
.origin-trait-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.origin-trait-top b { color:var(--gold); font-size:17px; }
.origin-trait-top em { color:var(--ink-3); font-size:12px; font-style:normal; white-space:nowrap; }
.origin-effect { display:block; color:var(--jade); font-size:13px; margin-top:5px; }
.origin-desc { display:block; color:var(--ink-3); font-size:13px; line-height:1.55; margin-top:5px; }
.origin-warning { color:var(--rose); border:1px solid rgba(203,85,100,.42); border-radius:10px; padding:9px 12px; background:rgba(203,85,100,.08); }

@media (max-width:700px) {
  .life-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .life-death-screen { margin:12px auto; padding:18px; }
  .origin-budget, .origin-grid { grid-template-columns:1fr; }
}

/* ─── 修炼背词 ─── */
.cult-screen { animation:pageIn .35s ease; }
.cult-head { margin-bottom:14px; }
.cult-head h2 { margin-top:4px; }
.cult-books {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:8px 0 16px;
}
.cult-book {
  min-height:92px; border:1px solid var(--bg-3); border-radius:10px; padding:10px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink);
  font-family:inherit; cursor:pointer; text-align:left;
}
.cult-book:hover, .cult-book.active { border-color:var(--gold-2); }
.cult-book.active { background:linear-gradient(180deg, rgba(230,200,112,.14), var(--bg-1)); }
/* P-MEMORY：全部记忆的词书金色"已通"标记 + 学完/复习提示 */
.cult-book.book-done { border-color:var(--jade); }
.book-done-tag { display:inline !important; color:var(--jade) !important; font-size:12px !important; border:1px solid var(--jade); border-radius:5px; padding:0 5px; margin-left:4px; }
.cult-allmemo { padding:12px; border:1px dashed rgba(230,200,112,.4); border-radius:10px; color:var(--gold); font-size:14px; line-height:1.5; }
.cult-allmemo.dim { border-color:var(--bg-3); color:var(--ink-3); }
.cult-review span { color:var(--cyan) !important; }
.cult-book span { display:block; color:var(--gold); font-size:17px; }
.cult-book b { display:block; color:var(--cyan); font-size:12px; margin-top:1px; }
.cult-book em { display:block; color:var(--ink-3); font-size:12px; line-height:1.5; font-style:normal; margin-top:3px; }
.cult-book small {
  display:inline-block; margin-top:6px; padding:2px 7px; border:1px solid rgba(116,204,232,.32);
  border-radius:7px; color:var(--cyan); background:rgba(116,204,232,.07); font-size:11px; line-height:1.5;
}
.cult-book-fast { color:var(--gold-2) !important; border-color:rgba(230,200,112,.32) !important; background:rgba(230,200,112,.06) !important; }
.cult-book .book-frequency { display:block; width:max-content; max-width:100%; color:var(--ink-2); border-color:rgba(199,190,171,.22); background:rgba(255,255,255,.035); }
.review-curve-note {
  display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:start;
  margin:8px 0 12px; padding:10px 12px; border:1px dashed rgba(116,204,232,.28); border-radius:10px;
  background:rgba(20,16,28,.42); color:var(--ink-2); font-size:13px; line-height:1.6;
}
.review-curve-note b { color:var(--cyan); white-space:nowrap; }
.cult-toggle {
  display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:center;
  margin:4px 0 16px; padding:10px 12px; border:1px solid var(--bg-3); border-radius:10px;
  background:rgba(20,16,28,.42); color:var(--ink); cursor:pointer;
}
.cult-toggle input { grid-row:1 / span 2; width:18px; height:18px; accent-color:var(--gold); }
.cult-toggle span { color:var(--gold); font-size:14px; }
.cult-toggle em { color:var(--ink-3); font-size:12px; line-height:1.5; font-style:normal; }
.cult-modes {
  display:grid; grid-template-columns:1fr; gap:10px; margin:12px 0 16px;
}
.cult-mode {
  min-height:92px; border:1px solid var(--bg-3); border-radius:10px; padding:12px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink);
  font-family:inherit; cursor:pointer; text-align:left;
}
.cult-mode:hover { border-color:var(--gold-2); }
.cult-mode.active {
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(230,200,112,.16), rgba(16,12,22,.9));
  box-shadow:0 0 0 1px rgba(230,200,112,.12), 0 12px 24px rgba(0,0,0,.22);
}
.cult-mode span { display:block; color:var(--gold); font-size:20px; }
.cult-mode b { display:block; color:var(--cyan); font-size:13px; margin-top:2px; }
.cult-mode em { display:block; color:var(--ink-3); font-size:13px; line-height:1.6; font-style:normal; margin-top:4px; }
.cult-guide {
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; align-items:center;
  margin:8px 0 12px; padding:10px 12px; border:1px solid rgba(116,204,232,.28); border-radius:10px;
  background:linear-gradient(180deg, rgba(116,204,232,.1), rgba(16,12,22,.62));
  color:var(--ink-2); font-size:13px; line-height:1.55;
}
.cult-guide b { color:var(--cyan); white-space:nowrap; }
.cult-guide span { min-width:0; }
.cult-sizes {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:12px 0 16px;
}
.cult-size {
  min-height:78px; border:1px solid var(--bg-3); border-radius:10px; padding:12px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink);
  font-family:inherit; cursor:pointer; text-align:left;
}
.cult-size:hover { border-color:var(--gold-2); }
.cult-size span { display:block; color:var(--gold); font-size:22px; }
.cult-size b { display:block; color:var(--cyan); font-size:14px; margin-top:2px; }
.cult-size em { display:block; color:var(--jade); font-size:12px; line-height:1.5; font-style:normal; margin-top:3px; }
.cult-custom {
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  margin:-4px 0 18px; padding:12px; border:1px solid var(--bg-3); border-radius:10px;
  background:rgba(20,16,28,.42);
}
.cult-custom label { display:grid; grid-template-columns:auto minmax(70px, 120px) 1fr; gap:8px; align-items:center; margin:0; }
.cult-custom span { color:var(--gold); white-space:nowrap; }
.cult-custom input {
  width:100%; box-sizing:border-box; border:1px solid var(--bg-3); border-radius:8px;
  background:rgba(8,6,12,.76); color:var(--ink); padding:8px 9px; font-family:inherit;
}
.cult-custom em { color:var(--ink-3); font-size:12px; line-height:1.5; font-style:normal; }
.cult-progress {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; color:var(--ink-2); font-size:14px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--bg-3);
}
.cult-actions, .cult-exit-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cult-exit-actions { justify-content:center; margin-top:14px; }
.cult-summary {
  max-width:640px; margin:0 auto; padding:18px; border:1px solid var(--bg-3); border-radius:12px;
  background:linear-gradient(180deg, rgba(31,25,40,.86), rgba(22,18,29,.86)); text-align:center;
}
.summary-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:14px 0; }
.summary-grid div {
  min-height:72px; border:1px solid var(--bg-3); border-radius:9px; padding:10px 6px;
  background:rgba(20,16,28,.48);
}
.summary-grid b { display:block; color:var(--gold); font-size:24px; }
.summary-grid span { color:var(--ink-3); font-size:12px; }
.summary-line {
  display:flex; justify-content:center; gap:8px 10px; flex-wrap:wrap; margin:10px 0;
  color:var(--ink-3); font-size:13px;
}
.summary-line b { color:var(--cyan); }
.realm-wall-note {
  display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;
  margin:14px 0; padding:10px 12px; border:1px solid rgba(210,174,84,.5); border-radius:10px;
  background:rgba(210,174,84,.08); color:var(--ink-2); font-size:13px;
}
.realm-wall-note b { color:var(--gold); }
.realm-wall-card {
  max-width:720px; margin:0 auto; padding:24px; border:1px solid rgba(210,174,84,.55); border-radius:16px;
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(210,174,84,.16), transparent 70%),
    linear-gradient(180deg, rgba(31,25,40,.92), rgba(14,11,19,.92));
  box-shadow:0 18px 42px rgba(0,0,0,.28); text-align:left;
}
.realm-wall-card h2 { margin:8px 0 14px; color:var(--gold); text-align:center; }
.realm-wall-card p { line-height:1.9; color:var(--ink-2); }
.wall-locks { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:18px 0; }
.wall-locks div {
  border:1px solid var(--bg-3); border-radius:12px; padding:13px;
  background:rgba(20,16,28,.62);
}
.wall-locks b { display:block; color:var(--cyan); margin-bottom:6px; }
.wall-locks span { color:var(--ink-3); font-size:13px; line-height:1.7; }
.realm-wall-card .btn { display:block; margin:18px auto 0; }
.ending-screen {
  max-width:760px; margin:0 auto; padding:28px 22px; border:1px solid rgba(210,174,84,.45); border-radius:18px;
  background:
    radial-gradient(520px 240px at 50% 0%, rgba(116,204,232,.13), transparent 72%),
    linear-gradient(180deg, rgba(23,18,31,.94), rgba(10,8,14,.96));
  box-shadow:0 22px 50px rgba(0,0,0,.35); text-align:center;
}
.ending-body { max-width:620px; margin:14px auto; color:var(--ink-2); line-height:1.95; text-align:left; }
.ending-body p { margin:10px 0; }
.credits-roll {
  position:relative; height:210px; overflow:hidden; margin:22px auto; border:1px solid var(--bg-3); border-radius:14px;
  background:linear-gradient(180deg, rgba(12,10,18,.82), rgba(24,18,31,.55));
}
.credits-roll::before,.credits-roll::after {
  content:""; position:absolute; left:0; right:0; height:44px; z-index:1; pointer-events:none;
}
.credits-roll::before { top:0; background:linear-gradient(180deg, rgba(12,10,18,.95), transparent); }
.credits-roll::after { bottom:0; background:linear-gradient(0deg, rgba(12,10,18,.95), transparent); }
.credits-inner {
  padding:190px 20px 40px; animation:creditsUp 16s linear infinite; color:var(--ink-3);
}
.credits-inner p { margin:18px 0 4px; font-size:13px; letter-spacing:.08em; }
.credits-inner b { color:var(--gold); font-size:16px; font-weight:700; }
@keyframes creditsUp {
  from { transform:translateY(0); }
  to { transform:translateY(-390px); }
}
.ending-next { min-width:180px; }
.ending-cta h2 { color:var(--gold); margin:8px 0 16px; }
.cta-panel {
  display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap;
  margin:22px auto 10px; max-width:620px;
}
.wc-rate { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:16px; }
.wc-input {
  width:100%; margin:14px 0 10px; padding:12px 14px; border:1px solid var(--bg-3);
  border-radius:8px; background:var(--bg-1); color:var(--ink); font:inherit; text-align:center;
  letter-spacing:.05em;
}
.wc-input:focus { outline:none; border-color:var(--gold-2); }
.wc-submit { width:100%; }
.wc-feedback { min-height:28px; margin-top:10px; font-size:15px; }
.wc-feedback .ok { color:var(--jade); }
.wc-feedback .bad { color:var(--rose); }
.wc-opt.hazy { border-color:var(--cyan); color:var(--cyan); }
.wc-answer {
  margin-top:14px; padding:12px; border:1px solid rgba(230,200,112,.26); border-radius:10px;
  background:rgba(230,200,112,.06); text-align:left;
}
.wc-answer-line { color:var(--ink-2); font-size:14px; margin-bottom:6px; }
.wc-answer-line .ok { color:var(--jade); }
.wc-answer-line .bad { color:var(--rose); }
.wc-answer-main { color:var(--ink); line-height:1.6; }
.wc-answer-main b { color:var(--gold); }
.wc-answer-hint { color:var(--ink-3); font-size:13px; line-height:1.6; margin-top:3px; }
.wc-next { width:100%; margin-top:14px; scroll-margin:120px 0 120px; }

/* ─── 探险打野 ─── */
.explore-screen { animation:pageIn .35s ease; }
.explore-head { margin-bottom:14px; }
.explore-head h2 { margin-top:4px; }
.zone-list { display:grid; grid-template-columns:1fr; gap:10px; margin:12px 0; }
.zone-card {
  position:relative; width:100%; text-align:left; border:1px solid var(--bg-3); border-radius:10px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); color:var(--ink);
  padding:14px; font-family:inherit; cursor:pointer;
}
.zone-card:hover { border-color:var(--gold-2); }
.zone-card:disabled { opacity:.48; cursor:default; }
.zone-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.zone-top b { color:var(--gold); font-size:19px; }
.zone-top em { color:var(--cyan); font-style:normal; font-size:13px; }
.zone-desc { display:block; color:var(--ink-2); font-size:14px; line-height:1.7; margin:6px 0; }
.zone-meta { display:block; color:var(--ink-3); font-size:13px; line-height:1.6; }
.zone-lock { position:absolute; right:12px; bottom:10px; color:var(--rose); font-size:13px; }
.zone-risk { display:block; margin-top:6px; font-size:13px; line-height:1.55; }
.zone-risk.safe { color:var(--jade); }
.zone-risk.try { color:var(--cyan); }
.zone-risk.danger { color:var(--gold); }
.zone-risk.fatal { color:var(--rose); }
.zone-risk-note { display:block; color:var(--ink-3); font-size:12.5px; line-height:1.55; }
.bag-box {
  border:1px solid var(--bg-3); border-radius:10px; padding:12px; margin:12px 0;
  background:rgba(20,16,28,.42);
}
.bag-list { display:flex; gap:8px; flex-wrap:wrap; min-height:28px; align-items:center; }
.bag-pill {
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:3px 9px 3px 5px; border-radius:7px;
  border:1px solid rgba(116,204,232,.38); color:var(--cyan); background:rgba(116,204,232,.08);
  font-size:13px;
}
.item-icon {
  display:inline-grid; place-items:center; flex:0 0 auto; overflow:hidden;
  border:1px solid rgba(230,200,112,.35);
  background-image:url("../../素材/物品/market-items.png");
  background-size:600% 500%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 10px rgba(255,232,150,.06), 0 5px 12px rgba(0,0,0,.18);
}
.item-icon:not([style]) { background-image:none; background:rgba(10,8,16,.72); }
.item-icon span {
  display:none; width:100%; height:100%; place-items:center;
  color:var(--gold); background:rgba(10,8,16,.78); font-weight:700;
}
.item-icon:not([style]) span { display:grid; }
.bag-pill-icon {
  width:22px; height:22px; border-radius:5px;
}
.death-screen {
  text-align:center; max-width:620px; margin:20px auto; padding:28px 20px;
  border:1px solid var(--rose); border-radius:14px;
  background:radial-gradient(320px 160px at 50% 0%, rgba(232,116,116,.18), transparent 70%), var(--bg-1);
}
.death-screen h2 { color:var(--rose); border-bottom-color:rgba(232,116,116,.35); }
.death-screen p { color:var(--ink-2); }

/* ─── 剧情 deadline / boss ─── */
.boss-screen {
  animation:pageIn .35s ease; max-width:680px; margin:0 auto;
  border:1px solid var(--rose); border-radius:14px; padding:22px;
  background:radial-gradient(360px 180px at 50% 0%, rgba(232,116,116,.16), transparent 70%), rgba(22,18,29,.86);
}
.boss-screen h2 { color:var(--rose); border-bottom-color:rgba(232,116,116,.35); }
.penalty-line {
  color:var(--rose); border:1px solid rgba(232,116,116,.35); border-radius:8px;
  padding:10px 12px; background:rgba(232,116,116,.08);
}

/* ─── 炼丹 / 制武 ─── */
.craft-screen { animation:pageIn .35s ease; }
.craft-head { margin-bottom:14px; }
.craft-head h2 { margin-top:4px; }
.craft-grid { display:grid; grid-template-columns:minmax(230px, 280px) 1fr; gap:16px; align-items:start; }
.craft-panel {
  background:linear-gradient(180deg, rgba(31,25,40,.86), rgba(22,18,29,.86));
  border:1px solid var(--bg-3); border-radius:12px; padding:14px;
}
.equip-title, .recipe-title { margin-top:14px; }
.equip-list { display:flex; flex-direction:column; gap:8px; }
.equip-row {
  display:grid; grid-template-columns:52px 1fr auto; gap:4px 8px; align-items:center;
  border:1px solid var(--bg-3); border-radius:8px; padding:8px;
}
.equip-row span { color:var(--ink-3); font-size:13px; }
.equip-row b { color:var(--gold); font-size:15px; }
.equip-row em { grid-column:2; color:var(--cyan); font-size:12px; font-style:normal; }
.equip-off { grid-row:1 / span 2; grid-column:3; }
.craft-radar { margin-top:12px; }
.craft-bag-btn { width:100%; margin-top:12px; }
.recipe-list { display:grid; grid-template-columns:1fr; gap:10px; }
.recipe-card {
  border:1px solid var(--bg-3); border-radius:10px; padding:12px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.recipe-card.disabled { opacity:.62; }
.recipe-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.recipe-top > span { color:var(--cyan); font-size:13px; }
.recipe-top b { color:var(--gold); font-size:18px; }
.craft-recipe-ref,
.craft-item-ref,
.craft-cost-ref {
  display:inline-flex; align-items:center; gap:7px; vertical-align:middle;
}
.craft-recipe-ref { justify-content:flex-end; }
.craft-item-icon {
  width:28px; height:28px; border-radius:7px;
}
.recipe-title-icon {
  width:36px; height:36px; border-radius:9px;
  border-color:rgba(230,200,112,.48);
}
.craft-cost-icon,
.recipe-line .craft-output-ref .recipe-title-icon {
  width:24px; height:24px; border-radius:6px;
}
.recipe-line .craft-output-ref { justify-content:flex-start; }
.recipe-line .craft-item-ref { gap:6px; }
.recipe-line .craft-cost-ref { margin-right:2px; }
.recipe-card p { color:var(--ink-2); font-size:14px; line-height:1.7; margin:6px 0; }
.recipe-line { color:var(--ink-3); font-size:13px; line-height:1.6; }
.cost-count { color:var(--jade); font-weight:600; } /* 持有/需要：足够=青绿 */
.cost-count.cost-lack { color:var(--red); } /* 不足=红色，一眼看出还差多少 */
.recipe-warning {
  color:var(--gold); font-size:13px; line-height:1.6; margin-top:4px;
}
.craft-do { width:100%; margin-top:10px; }
.inventory-list { display:grid; grid-template-columns:1fr; gap:10px; }
.inv-card {
  border:1px solid var(--bg-3); border-radius:10px; padding:12px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.inv-gear-card.equipped {
  border-color:rgba(230,200,112,.48);
  background:
    linear-gradient(180deg, rgba(230,200,112,.1), rgba(22,18,29,.88)),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow:0 0 0 1px rgba(230,200,112,.12) inset, 0 10px 24px rgba(0,0,0,.18);
}
.inv-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.inv-top b { color:var(--gold); font-size:18px; }
.inv-top > span { color:var(--cyan); font-size:13px; }
.inv-top .craft-recipe-ref,
.inv-top .craft-item-ref { justify-content:flex-start; }
.inv-gear-card.equipped .inv-top span { color:var(--gold); }
/* 物品品质色（50§1）：白/绿/蓝/紫/橙/红·低→高。span 自带颜色覆盖父级金色继承。 */
.q-white  { color:#cfd3d8; }
.q-green  { color:#5fca6e; }
.q-blue   { color:#4fb0f0; }
.q-purple { color:#b071ee; }
.q-orange { color:#f0993c; text-shadow:0 0 6px rgba(240,153,60,.35); }
.q-red    { color:#f2565b; text-shadow:0 0 7px rgba(242,86,91,.4); }
/* 默写首字母提示（49§1·中性色·非报错） */
.wc-hint { color:var(--cyan); font-size:14px; letter-spacing:1px; }
/* 道心 debuff 战斗提示行（48·琥珀警示色） */
.cb-daoxin { color:#f0993c !important; }
/* 人物谱赠礼（50④） */
.rel-gift { margin:10px 0; }
.rel-gift > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 12px; border-radius:10px; border:1px solid rgba(230,190,120,.45);
  background:linear-gradient(180deg, rgba(230,190,120,.14), rgba(230,190,120,.06)); }
.rel-gift > summary::-webkit-details-marker { display:none; }
.rel-gift > summary:hover { border-color:var(--gold); background:linear-gradient(180deg, rgba(230,190,120,.22), rgba(230,190,120,.1)); }
.rel-gift-btn { color:var(--gold); font-weight:700; font-size:15px; letter-spacing:1px; }
.rel-gift-hint { color:var(--ink-2); font-size:12px; }
.rel-gift[open] > summary { margin-bottom:8px; }
.rel-gift-list { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.rel-gift-item { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:5px 10px; font-size:13px; cursor:pointer; color:var(--ink-1); }
.rel-gift-item:hover { border-color:var(--gold); }
.rel-gift-item.liked { border-color:rgba(240,153,60,.5); }
.rel-gift-item em { color:#f0993c; font-style:normal; font-size:12px; }
.inv-card p { color:var(--ink-2); font-size:14px; line-height:1.7; margin:6px 0; }
.inv-use, .inv-equip { width:100%; margin-top:10px; }
.inv-unequip { grid-row:1 / span 2; grid-column:3; }
.empty-line {
  border:1px dashed var(--bg-3); border-radius:10px; padding:12px; text-align:center;
}
.craft-footer { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* ─── 坊市 / 灵石 ─── */
.market-screen { max-width:980px; margin:0 auto; }
.market-wallet {
  display:inline-flex; align-items:center; gap:10px; margin-top:8px;
  border:1px solid rgba(230,200,112,.38); border-radius:999px;
  padding:8px 13px; background:rgba(230,200,112,.08);
}
.market-wallet b { color:var(--gold); font-size:18px; }
.market-wallet span { color:var(--ink-3); font-size:13px; }
.market-section { margin-top:14px; }
.market-list { display:grid; grid-template-columns:1fr; gap:10px; }
.market-row {
  display:grid; grid-template-columns:66px 1fr 130px; gap:12px; align-items:center;
  border:1px solid var(--bg-3); border-radius:12px; padding:12px;
  background:linear-gradient(180deg, rgba(31,25,40,.9), rgba(18,15,25,.9));
}
.market-row.locked {
  opacity:.68;
  background:linear-gradient(180deg, rgba(31,25,40,.68), rgba(18,15,25,.72));
}
.market-row.locked .market-title b { color:var(--ink-2); }
.market-row.locked .market-icon { filter:saturate(.55) brightness(.82); }
.market-icon {
  width:62px; height:62px; border-radius:13px; overflow:hidden; align-self:start;
  border:1px solid rgba(230,200,112,.42);
  background-image:url("../../素材/物品/market-items.png");
  background-size:600% 500%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 12px rgba(255,232,150,.08), 0 8px 18px rgba(0,0,0,.22);
}
.market-icon span {
  display:none; width:100%; height:100%; place-items:center;
  color:var(--gold); background:rgba(10,8,16,.78); font-weight:700;
}
.market-icon:not([style]) span { display:grid; }
.market-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.market-title b { color:var(--gold); font-size:18px; }
.market-req {
  color:var(--cyan); border:1px solid rgba(116,204,232,.28); border-radius:999px;
  padding:2px 7px; font-size:12px; background:rgba(116,204,232,.07);
}
.market-req.ok { color:var(--jade); border-color:rgba(105,211,154,.28); background:rgba(105,211,154,.07); }
.market-row p { color:var(--ink-2); font-size:14px; line-height:1.65; margin:5px 0; }
.market-effect, .market-prices { color:var(--ink-3); font-size:13px; line-height:1.55; }
.market-effect { color:var(--cyan); }
.market-actions { display:flex; flex-direction:column; gap:8px; }
.market-actions .btn { width:100%; }
/* 坊市数量滑杆（买入/卖出可滑动选数量） */
.market-qty { display:flex; align-items:center; gap:8px; margin-top:8px; }
.market-qty .mq-cap { color:var(--ink-3); font-size:12px; }
.market-qty-input { flex:1; max-width:240px; accent-color:var(--gold); cursor:pointer; }
.market-qty-lbl { color:var(--gold); font-size:14px; min-width:36px; }
.mkt-tot { font-size:12px; opacity:.85; margin-left:4px; }

/* ─── 言田词书 P1：翻阅 / 标熟 ─── */
.cult-side-links { display:flex; gap:8px; margin:0 0 10px; flex-wrap:wrap; }
.cult-yantian { border-color:rgba(116,204,232,.45); color:var(--cyan); }
.cult-shentian { border-color:rgba(230,200,112,.48); color:var(--gold); }
.yt-screen { max-width:980px; }
.yt-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.yt-head h2 { margin:4px 0 6px; }
.yt-books { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.yt-book {
  text-align:left; border:1px solid var(--bg-3); background:var(--bg-1); color:var(--ink);
  border-radius:10px; padding:10px 12px; cursor:pointer;
}
.yt-book:hover,.yt-book.active { border-color:var(--gold-2); }
.yt-book.active { background:linear-gradient(180deg,rgba(230,200,112,.13),var(--bg-1)); }
.yt-book b,.yt-book span { display:block; }
.yt-book b { color:var(--gold); font-size:15px; }
.yt-book span { color:var(--ink-3); font-size:12px; margin-top:2px; }
.yt-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }
.yt-tools input {
  flex:1 1 260px; min-width:0; border:1px solid var(--bg-3); border-radius:9px;
  padding:9px 11px; background:var(--bg-1); color:var(--ink); font:inherit;
}
.yt-tools input:focus { outline:none; border-color:var(--gold-2); }
.yt-filters { display:flex; gap:6px; flex-wrap:wrap; }
.yt-filter.active { border-color:var(--gold-2); color:var(--gold); background:rgba(230,200,112,.1); }
.yt-list-head,.yt-pages { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0; }
.yt-list-head { color:var(--ink-3); font-size:13px; }
.yt-list-head b { color:var(--cyan); }
.yt-words { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.yt-word { border:1px solid var(--bg-3); border-radius:11px; padding:11px 12px; background:rgba(15,18,31,.72); }
.yt-word-main { display:flex; align-items:center; gap:8px; min-width:0; }
.yt-word-main b { color:var(--gold); font-size:18px; overflow-wrap:anywhere; }
.yt-word-main span { color:var(--ink-3); font-size:12px; }
.yt-word-main em { color:var(--cyan); font-size:13px; font-style:normal; }
.yt-freq { font-size:11px; padding:1px 7px; min-height:20px; }
.yt-word-main .yt-say { margin-left:auto; padding:3px 8px; }
.yt-meaning-box {
  position:relative; min-height:34px; margin:6px 0 8px; border-radius:7px; overflow:hidden;
}
.yt-meaning { min-height:22px; padding:6px 8px; color:var(--ink-2); font-size:14px; filter:blur(7px); opacity:.48; user-select:none; }
.yt-meaning-toggle {
  position:absolute; inset:0; width:100%; border:1px dashed rgba(116,204,232,.28); border-radius:7px;
  background:repeating-linear-gradient(135deg,rgba(24,28,44,.96),rgba(24,28,44,.96) 8px,rgba(31,37,56,.96) 8px,rgba(31,37,56,.96) 16px);
  color:var(--cyan); font:inherit; font-size:12px; letter-spacing:.08em; cursor:pointer;
}
.yt-meaning-toggle:hover { border-color:rgba(230,200,112,.5); color:var(--gold); }
.yt-meaning-box.revealed { overflow:visible; }
.yt-meaning-box.revealed .yt-meaning { padding-right:78px; filter:none; opacity:1; user-select:text; }
.yt-meaning-box.revealed .yt-meaning-toggle {
  inset:5px 5px auto auto; width:auto; padding:3px 7px; border-style:solid;
  background:var(--bg-2); letter-spacing:0;
}
.yt-word-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.yt-word-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.yt-fav.active { color:var(--gold); border-color:rgba(230,200,112,.5); background:rgba(230,200,112,.1); }
.yt-stage { border-radius:999px; padding:2px 8px; font-size:12px; border:1px solid var(--bg-3); color:var(--ink-3); }
.yt-stage.learning { color:var(--cyan); border-color:rgba(116,204,232,.38); }
.yt-stage.mastered,.yt-stage.marked { color:var(--gold); border-color:rgba(230,200,112,.42); }
.yt-stage.marked { background:rgba(230,200,112,.1); }
.yt-settled { color:var(--ink-3); font-size:12px; }
.yt-pages { justify-content:center; }
.sg-screen { max-width:980px; }
.sg-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.sg-hero h2 { margin:4px 0 6px; }
.sg-field {
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; gap:14px;
  border:1px solid rgba(230,200,112,.38); border-radius:16px; padding:17px;
  background:
    radial-gradient(360px 170px at 12% 0%, rgba(230,200,112,.18), transparent 70%),
    radial-gradient(280px 150px at 88% 10%, rgba(116,204,232,.13), transparent 72%),
    linear-gradient(180deg, rgba(25,22,35,.94), rgba(11,14,24,.86));
  box-shadow:inset 0 0 32px rgba(230,200,112,.05);
}
.sg-field:before {
  content:""; position:absolute; inset:auto -8% -44px -8%; height:110px; opacity:.42;
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(230,200,112,.18) 28px 29px),
    linear-gradient(180deg, transparent, rgba(105,211,154,.08));
  pointer-events:none;
}
.sg-field-main,.sg-field-stats,.sg-growth { position:relative; z-index:1; }
.sg-field-main span { color:var(--ink-3); font-size:12px; letter-spacing:.14em; }
.sg-field-main h3 { margin:4px 0 7px; color:var(--gold); font-size:28px; }
.sg-field-main p { margin:0; color:var(--ink-2); line-height:1.7; }
.sg-field-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px; align-self:start;
}
.sg-field-stats b,.sg-field-stats span {
  display:block; text-align:center; border:1px solid rgba(255,255,255,.08); background:rgba(9,12,22,.5);
}
.sg-field-stats b { border-bottom:0; border-radius:10px 10px 0 0; padding:9px 4px 2px; color:var(--gold); font-size:22px; }
.sg-field-stats span { border-top:0; border-radius:0 0 10px 10px; padding:0 4px 8px; color:var(--ink-3); font-size:11px; }
.sg-growth {
  grid-column:1 / -1; height:22px; border:1px solid rgba(230,200,112,.22); border-radius:999px;
  background:rgba(0,0,0,.22); overflow:hidden;
}
.sg-growth div {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 10px; color:var(--ink-2); font-size:12px; z-index:2;
}
.sg-growth b { color:var(--gold); }
.sg-growth>i {
  position:absolute; inset:0 auto 0 0; display:block; border-radius:inherit;
  background:linear-gradient(90deg, rgba(105,211,154,.55), rgba(230,200,112,.58));
  box-shadow:0 0 18px rgba(230,200,112,.18);
}
.sg-section { border:1px solid var(--bg-3); border-radius:14px; padding:16px; margin-top:14px; background:linear-gradient(180deg,rgba(20,24,39,.84),rgba(12,15,27,.78)); }
.sg-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sg-title>div { display:flex; align-items:center; gap:9px; }
.sg-title h3 { margin:0; color:var(--ink-1); }
.sg-title>div>span { width:25px; height:25px; border:1px solid rgba(230,200,112,.48); color:var(--gold); border-radius:50%; display:grid; place-items:center; font-size:12px; }
.sg-title>b { color:var(--ink-3); font-size:12px; font-weight:normal; }
.sg-achievement-groups { display:grid; gap:12px; }
.sg-achievement-group h4 { margin:0 0 8px; color:var(--cyan); font-size:14px; letter-spacing:.12em; }
.sg-achievements { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sg-achievement { display:flex; align-items:center; gap:10px; border:1px solid var(--bg-3); border-radius:11px; padding:11px; opacity:.55; background:rgba(9,12,22,.62); }
.sg-achievement>i { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--bg-3); color:var(--ink-3); font-style:normal; }
.sg-achievement>div { min-width:0; flex:1; }
.sg-achievement b { color:var(--ink-2); }
.sg-achievement p { margin:3px 0 0; color:var(--ink-3); font-size:12px; }
.sg-achievement>span { color:var(--ink-3); font-size:11px; }
.sg-achievement.done { opacity:1; border-color:rgba(230,200,112,.38); background:linear-gradient(135deg,rgba(230,200,112,.13),rgba(25,29,45,.7)); box-shadow:inset 0 0 22px rgba(230,200,112,.05); }
.sg-achievement.done>i { color:var(--gold); border-color:rgba(230,200,112,.5); box-shadow:0 0 14px rgba(230,200,112,.18); }
.sg-achievement.done>span { color:var(--gold); }
.sg-book-stats { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px; }
.sg-book-stats span {
  display:flex; align-items:center; gap:8px; border:1px solid var(--bg-3); border-radius:999px;
  padding:6px 10px; background:rgba(9,12,22,.42);
}
.sg-book-stats b { color:var(--gold); font-size:12px; }
.sg-book-stats i { color:var(--ink-3); font-size:11px; font-style:normal; }
.sg-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.sg-tools input {
  flex:1 1 260px; min-width:0; padding:10px 12px; border:1px solid var(--bg-3);
  border-radius:9px; background:var(--bg-0); color:var(--ink-1);
}
.sg-tools input:focus { outline:none; border-color:var(--gold-2); }
.sg-filters { display:flex; gap:6px; flex-wrap:wrap; }
.sg-filter.active { border-color:var(--gold-2); color:var(--gold); background:rgba(230,200,112,.1); }
.sg-word-head { color:var(--ink-3); font-size:13px; margin:9px 0; }
.sg-word-head b { color:var(--cyan); }
.sg-word-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sg-word { border:1px solid var(--bg-3); border-radius:10px; padding:10px 11px; background:rgba(12,16,28,.72); }
.sg-word-memory { border-color:rgba(116,204,232,.3); background:linear-gradient(180deg, rgba(116,204,232,.08), rgba(12,16,28,.72)); }
.sg-memory-panel { border-color:rgba(116,204,232,.25); }
.sg-word>div { display:flex; align-items:baseline; gap:7px; }
.sg-word>div b { color:var(--gold); font-size:17px; overflow-wrap:anywhere; }
.sg-word>div em { color:var(--cyan); font-size:12px; font-style:normal; }
.sg-word p { color:var(--ink-2); font-size:13px; margin:6px 0 9px; }
.sg-word footer { display:flex; justify-content:space-between; gap:8px; color:var(--ink-3); font-size:11px; }
.sg-word footer i { color:var(--gold); font-style:normal; }

/* ─── P-CAST 人物谱 ─── */
.relations-screen { max-width:980px; margin:0 auto; animation:pageIn .35s ease; }
.relations-hero {
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px;
  border:1px solid var(--bg-3); border-radius:15px; padding:18px;
  background:
    radial-gradient(360px 180px at 16% 0%, rgba(230,200,112,.14), transparent 70%),
    linear-gradient(180deg, rgba(24,20,32,.92), rgba(12,15,27,.78));
}
.relations-hero h2 { margin:4px 0 8px; }
.relations-hero p { margin:0; color:var(--ink-2); max-width:680px; line-height:1.75; }
.rel-message {
  border:1px solid rgba(116,204,232,.35); border-radius:10px; padding:10px 12px; margin:10px 0;
  color:var(--cyan); background:rgba(116,204,232,.08);
}
.rel-summary {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 14px;
}
.rel-summary span {
  border:1px solid var(--bg-3); border-radius:10px; padding:10px 12px;
  color:var(--ink-3); background:rgba(12,16,28,.72);
}
.rel-summary b { color:var(--gold); font-size:18px; }
.relations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.rel-card {
  display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:start;
  border:1px solid var(--bg-3); border-radius:14px; padding:13px;
  background:linear-gradient(180deg, rgba(18,21,34,.9), rgba(10,13,24,.86));
}
.rel-card.joined {
  border-color:rgba(230,200,112,.46);
  box-shadow:inset 0 0 26px rgba(230,200,112,.07);
}
.rel-card-unknown { opacity:.64; }
.rel-avatar {
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; overflow:hidden;
  border:1px solid rgba(230,200,112,.42); color:var(--gold); font-size:23px; font-weight:700;
  background:
    radial-gradient(circle at 35% 25%, rgba(230,200,112,.18), transparent 52%),
    rgba(15,18,31,.88);
}
.rel-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.rel-card-unknown .rel-avatar { color:var(--ink-3); border-color:var(--bg-3); }
.rel-body { min-width:0; }
.rel-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rel-top h3 { margin:0; color:var(--gold); font-size:20px; }
.rel-top span { display:block; margin-top:2px; color:var(--ink-3); font-size:12px; }
.rel-top>b {
  white-space:nowrap; color:var(--cyan); font-size:12px; font-weight:normal;
  border:1px solid rgba(116,204,232,.28); border-radius:999px; padding:3px 8px;
}
.rel-meter { height:7px; border-radius:999px; overflow:hidden; margin:9px 0; background:rgba(255,255,255,.06); }
.rel-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--cyan), var(--gold)); }
.rel-tags { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
.rel-tags span {
  border:1px solid var(--bg-3); border-radius:999px; padding:2px 7px;
  color:var(--ink-3); font-size:11px; background:rgba(255,255,255,.03);
}
.rel-line,.rel-card-unknown p { color:var(--ink-2); line-height:1.7; margin:7px 0; font-size:14px; }
.rel-detail {
  border:1px dashed rgba(116,204,232,.24); border-radius:9px; padding:8px 10px; margin-top:8px;
}
.rel-detail summary { cursor:pointer; color:var(--cyan); font-size:13px; }
.rel-detail p { margin:7px 0 0; color:var(--ink-2); font-size:13px; line-height:1.65; }
.rel-detail b { color:var(--ink); }
.rel-log {
  margin-top:8px; border:1px solid rgba(230,200,112,.18); border-radius:9px; padding:8px 10px;
  background:rgba(230,200,112,.04);
}
.rel-log>b { display:block; color:var(--gold); font-size:12px; margin-bottom:5px; letter-spacing:.08em; }
.rel-log ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.rel-log li { display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:start; }
.rel-log span { color:var(--cyan); font-size:11px; white-space:nowrap; }
.rel-log p { margin:0; color:var(--ink-2); font-size:12px; line-height:1.55; }
.rel-log>p { margin:0; color:var(--ink-3); font-size:12px; line-height:1.55; }
.rel-log-down p { color:#d8a9a9; }
.rel-log-bond p { color:var(--gold); }
.rel-joined {
  margin-top:9px; border-left:3px solid var(--gold); padding:8px 10px;
  color:var(--gold); background:rgba(230,200,112,.08); border-radius:8px;
}

/* ─── 雷劫突破 ─── */
.tribulation {
  position:relative; overflow:hidden; text-align:center; margin:18px 0; padding:32px 20px 26px;
  border:1px solid var(--cyan); border-radius:14px;
  background:
    radial-gradient(360px 180px at 50% 0%, rgba(116,204,232,.20), transparent 70%),
    linear-gradient(180deg, #111426, var(--bg-1));
  box-shadow:0 0 28px rgba(116,204,232,.18);
  animation:tribPulse 2.2s ease-in-out 1;
}
.trib-title { color:var(--cyan); font-size:32px; font-weight:700; }
.trib-sub { margin-top:6px; color:var(--ink); font-size:19px; }
.trib-sub .from { color:var(--ink-3); }
.trib-sub .to { color:var(--gold); }
.trib-text { max-width:520px; margin:14px auto 0; color:var(--ink-2); font-size:15px; line-height:1.8; }
.trib-sky { position:absolute; inset:0; pointer-events:none; }
.bolt {
  position:absolute; top:-20px; width:3px; height:150px; background:linear-gradient(180deg, transparent, #dff8ff, transparent);
  filter:drop-shadow(0 0 10px rgba(116,204,232,.9)); opacity:0; transform:rotate(14deg);
  animation:boltFlash .7s ease-out 3;
}
.b1 { left:28%; animation-delay:.1s; }
.b2 { left:52%; height:190px; animation-delay:.35s; }
.b3 { left:70%; animation-delay:.7s; }
@keyframes boltFlash {
  0%,100% { opacity:0; transform:translateY(-20px) rotate(14deg); }
  35% { opacity:1; transform:translateY(18px) rotate(14deg); }
}
@keyframes tribPulse {
  0% { box-shadow:0 0 0 rgba(116,204,232,0); }
  45% { box-shadow:0 0 36px rgba(116,204,232,.35); }
  100% { box-shadow:0 0 20px rgba(116,204,232,.12); }
}

@media (max-width: 680px) {
  #topbar { align-items:flex-start; gap:8px; }
  .tb-left { flex-wrap:wrap; row-gap:4px; }
  .hub-grid { grid-template-columns:1fr; }
  .hub-onboard { grid-template-columns:1fr; }
  .avatar-stage { height:280px; }
  .avatar-stage .avatar-rig { width:min(78%, 230px); --avatar-gear-scale:.92; }
  .avatar-female .avatar-stage .avatar-rig { width:min(84%, 240px); --avatar-gear-scale:.96; }
  .modal-root { padding:14px; }
  .game-modal { width:calc(100vw - 28px); max-height:calc(100vh - 28px); padding:18px; }
  .modal-avatar { width:calc(100vw - 28px); max-height:calc(100vh - 28px); padding:18px; }
  .modal-avatar .modal-body { max-height:calc(100vh - 176px); }
  .avatar-preview { grid-template-columns:1fr; }
  .avatar-preview-stage { min-height:min(66vh, 560px); }
  .gear-preview-wide .avatar-preview-stage { height:390px; min-height:0; }
  .gear-showcase { min-height:390px; grid-template-columns:.86fr 1.7fr .86fr; }
  .gear-bay { padding:30px 8px 28px; }
  .gear-bay-label { left:9px; right:9px; }
  .gear-bay-label b { font-size:11px; }
  .gear-showcase-weapon-img { width:min(100%, 320px); margin-bottom:30%; }
  .avatar-preview-stage .avatar-rig { width:min(76%, 330px); --avatar-gear-scale:1.32; }
  .avatar-preview.avatar-female .avatar-rig { width:min(80%, 344px); --avatar-gear-scale:1.38; }
  .avatar-preview .gear-fallback { width:62px; height:62px; }
  .origin-avatar-head { align-items:flex-start; flex-direction:column; gap:4px; }
  .origin-avatar-grid, .origin-difficulty-grid, .difficulty-row { grid-template-columns:1fr; }
  .world-line { grid-template-columns:1fr; gap:3px; }
  .craft-grid { grid-template-columns:1fr; }
  .deadline-box { grid-template-columns:1fr; }
  .deadline-box .btn { grid-row:auto; grid-column:auto; }
  .cult-books { grid-template-columns:1fr; }
  .wc-actions { position:static; justify-content:flex-end; margin:-4px 0 8px; }
  .cult-sizes { grid-template-columns:1fr; }
  .cult-guide { grid-template-columns:1fr; }
  .cult-custom { grid-template-columns:1fr; }
  .cult-custom label { grid-template-columns:1fr; }
  .wall-locks { grid-template-columns:1fr; }
  .yt-books,.yt-words,.sg-achievements,.sg-word-grid,.relations-grid,.rel-summary { grid-template-columns:1fr; }
  .yt-head,.relations-hero { align-items:stretch; flex-direction:column; }
  .yt-list-head { align-items:flex-start; flex-direction:column; }
  .sg-hero,.sg-title { align-items:flex-start; flex-direction:column; }
  .slot-grid { grid-template-columns:1fr; }
  .menu-title-fallback { font-size:38px; letter-spacing:.1em; }
  .hub-hero-actions { position:static; justify-content:flex-end; margin-bottom:10px; }
  .market-row { grid-template-columns:58px 1fr; align-items:start; }
  .market-icon { width:54px; height:54px; }
  .market-actions { flex-direction:row; }
  .market-actions { grid-column:1 / -1; }
  .summary-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .wc-rate { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .hub-hero h1 { font-size:26px; }
}