/* ============================================================
   学科修仙 · 问道大成
   国风修仙 × 科技流光 UI
   ============================================================ */
:root{
  --ink:#12100c;
  --ink2:#171410;
  --ink3:#211b14;
  --gold:#b08d3c;
  --gold-2:#d9b969;
  --gold-dim:#6f5a33;
  --cyan:#6f97a8;
  --cyan-dim:#3f5a66;
  --violet:#8a7f96;
  --rose:#b23a2e;
  --jade:#6a8a74;
  --text:#e6dcc8;
  --text-dim:#8f8676;
  --line:rgba(176,141,60,.30);
  --glass:rgba(20,17,12,.90);
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"Menlo","SF Mono","JetBrains Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--text);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none!important}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- 全局氛围层 ---------- */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(2,4,8,.55) 82%,rgba(1,2,5,.9) 100%)}
#grain{position:fixed;inset:-50%;pointer-events:none;z-index:6;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}}
#hitflash{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;background:#fff;
  transition:opacity .18s ease-out}

/* ============================================================
   HUD
   ============================================================ */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-family:var(--sans)}
#hud.hidden{display:none}

/* --- 左上角色卡 --- */
.hud-left{position:absolute;top:22px;left:24px;display:flex;flex-direction:column;gap:10px}
.pcard{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;
  background:linear-gradient(100deg,rgba(8,13,22,.92),rgba(12,20,32,.55) 70%,transparent);
  border-left:1px solid var(--line);border-top:1px solid rgba(176,141,60,.14);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.pcard-sigil{width:52px;height:52px;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:24px;color:var(--gold-2);
  background:radial-gradient(circle at 50% 40%,rgba(176,141,60,.22),rgba(10,16,26,.9) 70%);
  border:1px solid rgba(176,141,60,.45);border-radius:50%;
  box-shadow:0 0 18px rgba(176,141,60,.25),inset 0 0 14px rgba(176,141,60,.16);
  text-shadow:0 0 10px rgba(255,230,180,.7)}
.pcard-main{min-width:210px}
.pcard-row{display:flex;align-items:baseline;gap:8px}
.pcard-name{font-family:var(--serif);font-size:17px;letter-spacing:2px;color:#fff8e9}
.pcard-root{font-size:10px;letter-spacing:1px;color:var(--cyan);opacity:.85;
  border:1px solid rgba(111,151,168,.3);padding:1px 5px;border-radius:2px}
.pcard-realm{margin-top:2px;font-size:12px;letter-spacing:3px;color:var(--gold);
  text-shadow:0 0 12px rgba(176,141,60,.4)}
.bar{position:relative;height:5px;background:rgba(255,255,255,.07);overflow:hidden;
  border-radius:1px;box-shadow:inset 0 0 4px rgba(0,0,0,.6)}
.bar>i{position:absolute;inset:0 auto 0 0;width:0%;display:block;
  background:linear-gradient(90deg,#8d6a2a,var(--gold-2));transition:width .25s ease;
  box-shadow:0 0 10px rgba(176,141,60,.55)}
.bar>i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:barSheen 2.4s linear infinite}
@keyframes barSheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.expbar{margin-top:6px;height:4px}
.expbar b{position:absolute;right:0;top:-15px;font-size:9px;font-family:var(--mono);
  color:var(--text-dim);letter-spacing:.5px}
.statline{display:flex;gap:16px;padding-left:8px}
.stat{display:flex;align-items:baseline;gap:5px;font-size:10px;color:var(--text-dim);letter-spacing:1px}
.stat em{font-style:normal;opacity:.7}
.stat b{font-family:var(--mono);font-size:12px;color:var(--cyan);text-shadow:0 0 8px rgba(111,151,168,.4)}

/* --- 顶部中央区域名 --- */
.hud-center{position:absolute;top:20px;left:50%;transform:translateX(-50%);text-align:center;
  transition:opacity .35s}
.hud-center.dim{opacity:0}
.region-name{font-family:var(--serif);font-size:22px;letter-spacing:10px;color:#fff6e2;
  text-shadow:0 0 22px rgba(255,220,160,.35),0 2px 10px rgba(0,0,0,.9);
  padding-left:10px}
.region-name::after{content:"";display:block;height:1px;margin-top:7px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--gold) 50%,var(--line) 80%,transparent);
  box-shadow:0 0 8px rgba(176,141,60,.5)}
.region-sub{margin-top:5px;font-size:10px;letter-spacing:5px;color:var(--gold-dim);padding-left:5px}

/* --- 右上小地图 --- */
.hud-right{position:absolute;top:22px;right:24px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mapwrap{position:relative;width:176px;height:176px;padding:6px;
  background:rgba(6,10,16,.75);border:1px solid rgba(176,141,60,.18);
  box-shadow:0 8px 30px rgba(0,0,0,.6),inset 0 0 24px rgba(111,151,168,.05)}
#minimap{width:164px;height:164px;display:block;opacity:.92}
.mapcorner{position:absolute;width:9px;height:9px;border:1px solid var(--gold)}
.mapcorner.tl{top:2px;left:2px;border-right:0;border-bottom:0}
.mapcorner.tr{top:2px;right:2px;border-left:0;border-bottom:0}
.mapcorner.bl{bottom:2px;left:2px;border-right:0;border-top:0}
.mapcorner.br{bottom:2px;right:2px;border-left:0;border-top:0}
.maplabel{position:absolute;bottom:-18px;right:2px;font-family:var(--mono);font-size:9px;
  letter-spacing:1px;color:var(--gold-dim);opacity:.8}
.duelchip{font-size:10px;letter-spacing:2px;color:var(--rose);border:1px solid rgba(178,58,46,.35);
  padding:4px 10px;background:rgba(40,8,16,.6);box-shadow:0 0 16px rgba(178,58,46,.15)}

/* --- 底部：气血灵力 / 技能 --- */
.hud-bottom{position:absolute;bottom:18px;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.orbs{position:absolute;left:30px;bottom:6px;display:flex;gap:18px}
.orb{position:relative;width:78px;height:78px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 62%,#0a1018,#04070c);
  border:1px solid rgba(176,141,60,.35);
  box-shadow:0 0 24px rgba(0,0,0,.8),inset 0 0 18px rgba(0,0,0,.9)}
.orb::after{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 16px rgba(0,0,0,.5),inset 0 10px 18px rgba(255,255,255,.05);
  z-index:4}
.orb::before{content:"";position:absolute;left:12%;right:12%;top:8%;height:26%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none;z-index:5}
.orb-fill{position:absolute;left:0;right:0;bottom:0;height:100%;transition:height .2s ease}
.orb.hp .orb-fill{background:linear-gradient(180deg,rgba(178,58,46,.92),rgba(82,20,16,.9));
  box-shadow:0 0 20px rgba(255,80,100,.5),inset 0 0 14px rgba(255,180,190,.35)}
.orb.mp .orb-fill{background:linear-gradient(180deg,rgba(111,151,168,.9),rgba(26,48,58,.9));
  box-shadow:0 0 20px rgba(111,151,168,.45),inset 0 0 14px rgba(160,240,255,.35)}
.orb-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0}
.orb-txt b{font-family:var(--mono);font-size:15px;color:#fff;text-shadow:0 1px 6px #000,0 0 12px rgba(0,0,0,.9)}
.orb-txt em{font-style:normal;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.6)}

/* 技能栏 */
.actionbar{display:flex;align-items:flex-end;gap:14px}
.rootswitch{display:flex;flex-direction:column;gap:4px;padding-bottom:4px}
.rchip{width:34px;height:26px;display:grid;place-items:center;font-family:var(--serif);
  font-size:13px;color:var(--text-dim);border:1px solid rgba(255,255,255,.1);
  background:rgba(8,12,20,.7);cursor:pointer;transition:.18s;position:relative;pointer-events:auto}
.rchip.on{color:#fff;border-color:var(--rc,#b08d3c);
  box-shadow:0 0 14px color-mix(in srgb,var(--rc,#b08d3c) 45%,transparent),
             inset 0 0 12px color-mix(in srgb,var(--rc,#b08d3c) 18%,transparent);
  background:color-mix(in srgb,var(--rc,#b08d3c) 14%,rgba(8,12,20,.85))}
.rchip.locked{opacity:.22;cursor:not-allowed}
.rchip .rk{position:absolute;right:1px;bottom:0;font-family:var(--mono);font-size:7px;
  color:var(--text-dim)}
.skills{display:flex;gap:9px}
.slot{position:relative;width:70px;height:70px;pointer-events:auto;cursor:pointer;
  background:radial-gradient(circle at 50% 30%,rgba(30,44,66,.9),rgba(6,10,16,.95) 75%);
  border:1px solid rgba(176,141,60,.24);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .12s,box-shadow .2s,border-color .2s;overflow:hidden}
.slot:hover{transform:translateY(-3px);border-color:var(--rc,#b08d3c);
  box-shadow:0 0 22px color-mix(in srgb,var(--rc,#b08d3c) 40%,transparent)}
.slot.small{width:58px;height:58px;opacity:.9}
.slot-key{position:absolute;top:3px;left:6px;font-family:var(--mono);font-size:9px;
  color:var(--gold);opacity:.75;letter-spacing:.5px;z-index:3}
.slot-icon{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-size:28px;color:var(--gold-2);text-shadow:0 2px 6px rgba(0,0,0,.75);opacity:.95;
  transition:.2s}
.slot.small .slot-icon{font-size:22px}
.slot-name{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;
  letter-spacing:1px;color:rgba(233,227,214,.72);z-index:3;text-shadow:0 1px 4px #000}
.slot .cd{position:absolute;inset:0;background:rgba(3,6,10,.66);z-index:4;
  transform-origin:bottom;transform:scaleY(0);transition:transform .08s linear}
.slot .cd::after{content:attr(data-t);position:absolute;inset:0;display:flex;
  align-items:flex-end;justify-content:flex-end;padding:0 5px 3px 0;
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.85);text-shadow:0 0 8px #000}
.slot.locked{filter:grayscale(1);opacity:.35}
.slot.locked .slot-icon::after{content:"封";position:absolute;font-size:11px;
  font-family:var(--sans);color:var(--rose);letter-spacing:1px;transform:translateY(16px)}
.slot.ready{animation:slotReady 1.6s ease-out}
@keyframes slotReady{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.assist{display:flex;gap:8px;padding-bottom:2px}
.hud-hints{display:flex;gap:16px;font-size:9px;letter-spacing:1px;color:rgba(154,160,174,.65);
  padding-bottom:2px;font-family:var(--mono)}
.hud-hints b{color:var(--gold);font-weight:400;margin-right:3px;
  border:1px solid rgba(176,141,60,.3);padding:0 4px;border-radius:2px}

/* --- 交互提示 / 任务 / 消息 --- */
#interactPrompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:9px 18px;
  background:rgba(6,10,16,.86);border:1px solid rgba(176,141,60,.4);
  box-shadow:0 0 30px rgba(176,141,60,.15);backdrop-filter:blur(6px);
  animation:floatIn .25s ease-out;white-space:nowrap}
#interactPrompt b{font-family:var(--mono);color:var(--ink);background:var(--gold);
  width:20px;height:20px;display:grid;place-items:center;font-size:11px;border-radius:2px}
#interactPrompt span{font-size:12px;letter-spacing:2px;color:#fff3dd}
@keyframes floatIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

#objective{position:absolute;right:24px;bottom:170px;width:230px;text-align:right;
  border-right:1px solid var(--line);padding-right:12px}
.obj-title{font-size:9px;letter-spacing:4px;color:var(--gold-dim);margin-bottom:4px}
.obj-text{font-size:11.5px;line-height:1.7;color:rgba(233,227,214,.85);letter-spacing:.5px}

#feed{position:absolute;right:24px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-height:44vh;overflow:hidden}
.feeditem{display:flex;align-items:center;gap:8px;font-size:11px;color:#e6dcc8;
  background:linear-gradient(90deg,transparent,rgba(8,14,22,.9) 30%);
  padding:5px 10px 5px 40px;border-right:1px solid rgba(176,141,60,.5);
  animation:feedIn .3s ease-out,feedOut .5s ease-in 4.2s forwards;letter-spacing:.5px}
.feeditem b{color:var(--gold-2);font-weight:500}
.feeditem .ic{font-family:var(--serif);color:var(--rc,var(--cyan));width:16px;text-align:center}
@keyframes feedIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes feedOut{to{opacity:0;transform:translateX(14px)}}

#toast{position:absolute;left:50%;bottom:212px;transform:translateX(-50%);
  font-family:var(--serif);font-size:17px;letter-spacing:6px;color:var(--gold-2);
  text-shadow:0 0 24px rgba(255,220,150,.5),0 2px 8px #000;opacity:0;transition:opacity .35s;white-space:nowrap}
#toast.on{opacity:1}

/* --- 区域 / 事件横幅 --- */
#banner{position:absolute;left:50%;top:118px;transform:translateX(-50%);text-align:center;
  pointer-events:none;animation:bannerIn .55s cubic-bezier(.16,1,.3,1)}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.banner-kicker{font-family:var(--mono);font-size:9px;letter-spacing:9px;color:var(--gold-dim);
  padding-left:9px}
.banner-main{font-family:var(--serif);font-size:30px;letter-spacing:12px;color:#fff6e6;
  margin-top:5px;padding-left:12px;
  text-shadow:0 0 34px rgba(255,220,160,.42),0 2px 12px rgba(0,0,0,.95)}
.banner-sub{margin-top:7px;font-size:10px;letter-spacing:2.5px;color:rgba(233,227,214,.6)}

/* --- 目标血条 --- */
#targetBar{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:280px;
  display:flex;flex-direction:column;gap:4px;align-items:center}
#targetBar span{font-family:var(--serif);font-size:13px;letter-spacing:3px;color:#ffd9d9;
  text-shadow:0 0 14px rgba(255,80,90,.5)}
#targetBar .bar{width:100%;height:6px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,90,100,.25)}
#targetBar .bar>i{background:linear-gradient(90deg,#6d1220,#b23a2e,#ffb3b8);
  box-shadow:0 0 14px rgba(255,70,90,.6)}

/* --- 对战中顶部血条 --- */
#duelBanner{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;padding:8px 18px;
  background:linear-gradient(180deg,rgba(40,8,16,.85),rgba(6,10,16,.6));
  border-top:1px solid rgba(178,58,46,.3);border-bottom:1px solid rgba(178,58,46,.12)}
.duel-side{width:220px;display:flex;flex-direction:column;gap:4px}
.duel-side span{font-family:var(--serif);font-size:13px;letter-spacing:2px;color:#fff}
.duel-side.left{align-items:flex-start}
.duel-side.right{align-items:flex-end}
.duel-side.left{--self:1}
.duel-side .bar{width:100%;height:7px;background:rgba(255,255,255,.08)}
.duel-side.left .bar>i{background:linear-gradient(90deg,#0c5f6b,#6f97a8);box-shadow:0 0 12px rgba(111,151,168,.6)}
.duel-side.right .bar>i{background:linear-gradient(90deg,#7a1024,#b23a2e);box-shadow:0 0 12px rgba(255,80,90,.6)}
.duel-mid{text-align:center;min-width:74px}
.duel-mid span{display:block;font-size:9px;letter-spacing:3px;color:var(--gold);margin-bottom:2px}
.duel-mid b{font-family:var(--mono);font-size:20px;color:#fff;text-shadow:0 0 16px rgba(178,58,46,.6)}

/* ============================================================
   遮罩层通用
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,9,.78);backdrop-filter:blur(9px) saturate(.9);
  animation:ovIn .3s ease-out;padding:24px}
@keyframes ovIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   开局界面
   ============================================================ */
#start{background:radial-gradient(ellipse at 50% 0%,rgba(13,26,42,.92) 0%,rgba(6,10,17,.94) 45%,rgba(3,5,10,.97) 100%);
  overflow-y:auto;align-items:center;padding:38px 24px 40px}
#start .start-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(ellipse at 22% 24%,rgba(176,141,60,.07),transparent 46%),
    radial-gradient(ellipse at 78% 20%,rgba(140,108,68,.06),transparent 44%),
    radial-gradient(ellipse at 50% 94%,rgba(120,80,50,.07),transparent 52%),
    repeating-linear-gradient(90deg,rgba(150,125,85,.028) 0 1px,transparent 1px 150px),
    repeating-linear-gradient(0deg,rgba(150,125,85,.028) 0 1px,transparent 1px 150px)}
#start .start-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(3,5,9,.9) 100%)}
.start-inner{position:relative;width:100%;max-width:1120px;display:flex;flex-direction:column;
  align-items:center;gap:26px;animation:startIn .8s cubic-bezier(.16,1,.3,1)}
@keyframes startIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.start-head{text-align:center;position:relative}
.start-head::before{content:"";position:absolute;left:50%;top:46%;width:520px;height:520px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(176,141,60,.10);
  background:conic-gradient(from 0deg,rgba(176,141,60,.05),transparent 28%,rgba(111,151,168,.05) 52%,transparent 78%,rgba(176,141,60,.05));
  animation:spin 90s linear infinite}
.start-head::after{content:"";position:absolute;left:50%;top:46%;width:360px;height:360px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px dashed rgba(111,151,168,.10);animation:spin 60s linear infinite reverse}
.start-kicker{font-family:var(--mono);font-size:10px;letter-spacing:7px;color:var(--cyan-dim);margin-bottom:14px}
.start-title{font-family:var(--serif);font-size:82px;font-weight:400;letter-spacing:16px;
  line-height:1;color:#fff8ea;padding-left:16px;
  text-shadow:0 0 60px rgba(176,141,60,.28),0 0 120px rgba(111,151,168,.12),0 4px 20px rgba(0,0,0,.9)}
.start-title span{color:var(--gold-2);position:relative}
.start-title span::after{content:"";position:absolute;inset:-8px -6px;border:1px solid rgba(176,141,60,.25);
  animation:pulseBorder 3.4s ease-in-out infinite}
@keyframes pulseBorder{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.75;transform:scale(1.03)}}
.start-rule{width:280px;height:1px;margin:22px auto 18px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 14px rgba(176,141,60,.6)}
.start-desc{font-size:13px;line-height:2;letter-spacing:1.5px;color:var(--text-dim)}
.start-desc b{color:var(--gold);font-weight:400}

.start-section{width:100%}
.section-label{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  border-bottom:1px solid rgba(176,141,60,.14);padding-bottom:8px}
.section-label span{font-family:var(--serif);font-size:15px;letter-spacing:6px;color:#fff4e2}
.section-label em{font-style:normal;font-size:10px;letter-spacing:2px;color:var(--gold-dim)}

.roots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.rootcard{position:relative;padding:16px 14px 14px;cursor:pointer;overflow:hidden;
  background:linear-gradient(165deg,rgba(16,24,38,.94),rgba(6,10,16,.96));
  border:1px solid rgba(255,255,255,.09);transition:.25s cubic-bezier(.16,1,.3,1);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.rootcard::before{content:"";position:absolute;inset:0;opacity:0;transition:.25s;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--rc) 30%,transparent),transparent 62%)}
.rootcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rc) 55%,transparent)}
.rootcard:hover::before{opacity:.55}
.rootcard.on{border-color:var(--rc);box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 40%,transparent),
  0 12px 40px color-mix(in srgb,var(--rc) 22%,transparent)}
.rootcard.on::before{opacity:1}
.rootcard.on::after{content:"已 择";position:absolute;top:8px;right:10px;font-size:9px;
  letter-spacing:2px;color:var(--rc);font-family:var(--mono)}
.root-glyph{font-family:var(--serif);font-size:46px;line-height:1;color:var(--rc);
  text-shadow:0 0 30px color-mix(in srgb,var(--rc) 70%,transparent);margin-bottom:10px;
  transition:.3s}
.rootcard:hover .root-glyph{transform:scale(1.08) translateY(-2px)}
.root-name{font-family:var(--serif);font-size:17px;letter-spacing:3px;color:#fff8ec;margin-bottom:3px}
.root-en{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--rc);opacity:.65;
  text-transform:uppercase;margin-bottom:10px}
.root-line{height:1px;background:linear-gradient(90deg,var(--rc),transparent);opacity:.4;margin-bottom:9px}
.root-desc{font-size:10.5px;line-height:1.75;color:var(--text-dim);letter-spacing:.3px;min-height:52px}
.root-skills{margin-top:9px;display:flex;flex-wrap:wrap;gap:3px}
.root-skills i{font-style:normal;font-size:9px;color:rgba(233,227,214,.62);
  border:1px solid rgba(255,255,255,.1);padding:1px 5px;border-radius:2px;letter-spacing:.5px}
.rootcard .selbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--rc);
  box-shadow:0 0 12px var(--rc);transition:width .3s}
.rootcard.on .selbar{width:100%}

.start-name{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:6px}
.name-label{font-family:var(--serif);font-size:13px;letter-spacing:5px;color:var(--gold)}
#nameInput{width:190px;padding:11px 14px;background:rgba(255,255,255,.03);
  border:1px solid rgba(176,141,60,.24);color:#fff8ea;font-family:var(--serif);
  font-size:16px;letter-spacing:3px;outline:none;transition:.2s}
#nameInput:focus{border-color:var(--gold);box-shadow:0 0 22px rgba(176,141,60,.2)}
#nameInput::placeholder{color:rgba(154,160,174,.4)}
.start-actions{display:flex;gap:12px}
.btn-primary{position:relative;padding:13px 42px;font-family:var(--serif);font-size:15px;
  letter-spacing:8px;color:#1a1206;background:linear-gradient(100deg,#d9b46a,#ffe6ae 45%,#c69a4e);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:.22s;
  text-indent:4px;box-shadow:0 0 30px rgba(176,141,60,.25)}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 0 46px rgba(255,225,160,.45);
  transform:translateY(-1px)}
.btn-primary:disabled{opacity:.28;cursor:not-allowed;box-shadow:none}
.btn-ghost{padding:13px 28px;border:1px solid rgba(176,141,60,.3);color:var(--gold);
  font-family:var(--serif);font-size:13px;letter-spacing:4px;transition:.2s}
.btn-ghost:hover{background:rgba(176,141,60,.08);border-color:var(--gold);text-shadow:0 0 12px rgba(176,141,60,.5)}
.start-hint{font-size:10.5px;letter-spacing:2px;color:var(--rose);opacity:.8;min-width:150px}
.start-hint.ok{color:var(--jade);opacity:.9}
.start-foot{margin-top:-6px;font-family:var(--mono);font-size:9px;letter-spacing:3px;
  color:rgba(154,160,174,.4);text-align:center}
.start-controls{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);width:100%;font-size:10px;color:var(--text-dim);letter-spacing:1px}
.start-controls b{color:var(--gold);font-family:var(--mono);font-weight:400;margin-right:4px;
  border:1px solid rgba(176,141,60,.28);padding:0 4px}

/* ============================================================
   面板
   ============================================================ */
#panel{background:rgba(3,6,11,.72)}
.panel-box{width:min(920px,94vw);max-height:86vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(14,22,34,.97),rgba(6,10,16,.98));
  border:1px solid rgba(176,141,60,.22);box-shadow:0 30px 90px rgba(0,0,0,.8),
  inset 0 0 60px rgba(111,151,168,.03);animation:panelIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:1px solid rgba(176,141,60,.16);
  background:linear-gradient(90deg,rgba(176,141,60,.06),transparent)}
.panel-title{display:flex;align-items:center;gap:12px}
.panel-title span{font-size:9px;letter-spacing:3px;color:var(--gold-dim);border:1px solid rgba(176,141,60,.3);
  padding:2px 6px}
.panel-title b{font-family:var(--serif);font-size:19px;letter-spacing:6px;color:#fff6e6}
.panel-close{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--text-dim);
  cursor:pointer;transition:.2s;padding:4px 8px}
.panel-close:hover{color:var(--rose)}
.panel-body{padding:20px 22px;overflow-y:auto;scrollbar-width:thin}
.panel-body::-webkit-scrollbar{width:6px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(176,141,60,.25)}

/* 境界面板 */
.realms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.realmcard{padding:9px 10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.015);
  position:relative;transition:.2s}
.realmcard.done{border-color:rgba(111,242,196,.25);background:rgba(111,242,196,.05)}
.realmcard.cur{border-color:var(--gold);background:rgba(176,141,60,.09);
  box-shadow:0 0 24px rgba(176,141,60,.14)}
.realmcard.lock{opacity:.35}
.realmcard .rn{font-size:11px;letter-spacing:1px;color:#e6dcc8}
.realmcard.cur .rn{color:var(--gold-2)}
.realmcard .rt{font-family:var(--mono);font-size:8px;color:var(--text-dim);margin-top:3px}
.realmcard.done::after{content:"✓";position:absolute;right:7px;top:6px;font-size:9px;color:var(--jade)}

/* 功法面板 */
.skillgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skillcard{display:flex;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);position:relative}
.skillcard.locked{opacity:.4}
.skillcard .sic{width:44px;height:44px;flex:none;display:grid;place-items:center;font-family:var(--serif);
  font-size:20px;color:var(--rc,var(--gold));border:1px solid color-mix(in srgb,var(--rc,var(--gold)) 30%,transparent);
  background:color-mix(in srgb,var(--rc,var(--gold)) 8%,transparent)}
.skillcard .sinfo{flex:1;min-width:0}
.skillcard .sname{font-family:var(--serif);font-size:14px;letter-spacing:2px;color:#fff6e6;
  display:flex;justify-content:space-between;align-items:baseline}
.skillcard .sname em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--gold)}
.skillcard .sdesc{font-size:10px;line-height:1.65;color:var(--text-dim);margin-top:4px}
.skillcard .smeta{display:flex;gap:10px;margin-top:6px;font-family:var(--mono);font-size:9px;color:var(--cyan-dim)}
.lvup{position:absolute;right:8px;bottom:8px;font-size:9px;letter-spacing:1px;color:var(--gold);
  border:1px solid rgba(176,141,60,.35);padding:2px 7px;transition:.2s;background:rgba(176,141,60,.06)}
.lvup:hover{background:rgba(176,141,60,.18);box-shadow:0 0 14px rgba(176,141,60,.25)}
.lvup:disabled{opacity:.3;cursor:not-allowed}

/* 法宝面板 */
.artgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.artcard{display:flex;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.018);cursor:pointer;transition:.2s;position:relative}
.artcard:hover{border-color:rgba(176,141,60,.4);background:rgba(176,141,60,.04)}
.artcard.equipped{border-color:var(--gold);background:rgba(176,141,60,.08);
  box-shadow:inset 0 0 24px rgba(176,141,60,.06)}
.artcard.equipped::after{content:"已祭炼";position:absolute;right:8px;top:7px;font-size:9px;
  letter-spacing:1px;color:var(--gold);font-family:var(--mono)}
.artcard .aic{width:44px;height:44px;flex:none;display:grid;place-items:center;font-family:var(--serif);
  font-size:19px;color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 28%,transparent);
  background:color-mix(in srgb,var(--rc) 7%,transparent)}
.artcard .aname{font-family:var(--serif);font-size:14px;letter-spacing:2px;color:#fff2df}
.artcard .adesc{font-size:10px;line-height:1.6;color:var(--text-dim);margin-top:4px}
.artcard .smeta{display:flex;gap:10px;margin-top:6px;font-family:var(--mono);font-size:9px;
  color:var(--cyan-dim);flex-wrap:wrap}
.artcard .smeta span:last-child{color:var(--rc);opacity:.9}
.artcard .apass{font-size:9.5px;color:var(--jade);margin-top:5px;letter-spacing:.5px}
.rarity-仙品{--rc:#c49a3a}.rarity-灵品{--rc:#8a7f96}.rarity-玄品{--rc:#6f97a8}.rarity-凡品{--rc:#8f8676}

.empty{text-align:center;padding:50px 20px;color:var(--text-dim);font-size:12px;letter-spacing:2px}
.empty b{display:block;font-family:var(--serif);font-size:40px;color:rgba(176,141,60,.18);margin-bottom:12px}

/* ============================================================
   开箱 / 突破
   ============================================================ */
#loot{background:rgba(2,4,8,.86)}
.loot-box{text-align:center;animation:lootIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes lootIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.loot-kicker{font-family:var(--mono);font-size:10px;letter-spacing:8px;color:var(--gold-dim);margin-bottom:18px}
.loot-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;max-width:900px}
.lootcard{width:200px;padding:20px 16px;position:relative;
  background:linear-gradient(170deg,rgba(26,38,56,.98),rgba(8,13,20,.99));
  border:1px solid color-mix(in srgb,var(--rc) 60%,transparent);
  box-shadow:0 0 50px color-mix(in srgb,var(--rc) 18%,transparent),0 20px 60px rgba(0,0,0,.8);
  animation:cardIn .55s cubic-bezier(.16,1,.3,1) backwards;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.lootcard:nth-child(1){animation-delay:.05s}.lootcard:nth-child(2){animation-delay:.18s}
.lootcard:nth-child(3){animation-delay:.31s}.lootcard:nth-child(4){animation-delay:.44s}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) rotateX(20deg)}to{opacity:1;transform:none}}
.lootcard::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--rc) 30%,transparent),transparent 62%);
  pointer-events:none}
.lootcard .lrar{font-family:var(--mono);font-size:9px;letter-spacing:3px;color:var(--rc)}
.lootcard .licon{font-family:var(--serif);font-size:46px;color:var(--rc);margin:10px 0 8px;
  text-shadow:0 0 30px color-mix(in srgb,var(--rc) 70%,transparent)}
.lootcard .lname{font-family:var(--serif);font-size:17px;letter-spacing:3px;color:#fff6e6}
.lootcard .ldesc{font-size:10px;line-height:1.7;color:var(--text-dim);margin-top:8px}
.loot-hint{margin-top:26px;font-size:10px;letter-spacing:3px;color:rgba(154,160,174,.6);
  animation:blink 1.8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:.9}}

/* 突破 */
#ceremony{background:radial-gradient(circle at 50% 50%,rgba(20,14,4,.55),rgba(2,3,6,.94) 70%)}
.cere-ring{position:absolute;width:130vmax;height:130vmax;border-radius:50%;
  border:1px solid rgba(176,141,60,.12);
  background:repeating-conic-gradient(from 0deg,rgba(176,141,60,.06) 0deg 1deg,transparent 1deg 6deg);
  animation:spin 60s linear infinite}
.cere-ring::before{content:"";position:absolute;inset:18%;border:1px solid rgba(111,151,168,.14);
  border-radius:50%}
.cere-ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,233,184,.10),transparent 42%)}
@keyframes spin{to{transform:rotate(360deg)}}
.cere-inner{position:relative;text-align:center;animation:cereIn .9s cubic-bezier(.16,1,.3,1)}
.cere-inner::before{content:"";position:absolute;left:50%;top:50%;width:760px;height:420px;
  transform:translate(-50%,-46%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,220,150,.12),transparent 65%);
  animation:cereGlow 3s ease-in-out infinite}
@keyframes cereGlow{0%,100%{opacity:.55;transform:translate(-50%,-46%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-46%) scale(1.08)}}
@keyframes cereIn{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.02)}100%{transform:scale(1)}}
.cere-kicker{font-family:var(--mono);font-size:10px;letter-spacing:12px;color:var(--gold-dim);margin-bottom:22px}
.cere-title{font-family:var(--serif);font-size:22px;letter-spacing:20px;color:var(--gold);
  padding-left:20px;margin-bottom:14px;text-shadow:0 0 30px rgba(176,141,60,.6);position:relative}
.cere-title::before,.cere-title::after{content:"";position:absolute;top:50%;width:140px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold))}
.cere-title::before{right:calc(100% - 60px)}
.cere-title::after{left:calc(100% - 60px);transform:scaleX(-1)}
.cere-main{font-family:var(--serif);font-size:76px;letter-spacing:10px;color:#fff8e8;line-height:1.1;
  padding-left:10px;
  background:linear-gradient(180deg,#fff 0%,#e3cfa8 42%,#c69a4e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,220,150,.45))}
.cere-sub{margin-top:14px;font-size:12px;letter-spacing:4px;color:var(--text-dim)}
.cere-rewards{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.cere-rewards span{font-size:11px;letter-spacing:2px;color:var(--gold-2);
  border:1px solid rgba(176,141,60,.3);padding:5px 14px;background:rgba(176,141,60,.05)}

/* 分支 */
#branch{background:radial-gradient(circle at 50% 0%,rgba(24,18,40,.9),rgba(2,4,8,.95))}
.branch-box{text-align:center;max-width:820px;width:100%}
.branch-kicker{font-family:var(--mono);font-size:10px;letter-spacing:10px;color:var(--violet);margin-bottom:16px}
.branch-title{font-family:var(--serif);font-size:38px;letter-spacing:8px;color:#fff6e6;
  text-shadow:0 0 40px rgba(155,140,255,.35)}
.branch-sub{font-size:11px;letter-spacing:3px;color:var(--text-dim);margin-top:10px}
.branch-opts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.branchopt{padding:26px 22px;cursor:pointer;text-align:left;position:relative;transition:.25s;
  background:linear-gradient(165deg,rgba(18,26,42,.96),rgba(6,10,16,.98));
  border:1px solid rgba(255,255,255,.1);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.branchopt:hover{border-color:var(--bc,var(--violet));transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,var(--bc,var(--violet)) 22%,transparent)}
.branchopt{overflow:hidden}
.branchopt .bglyph{position:absolute;right:-6px;top:-14px;font-family:var(--serif);font-size:110px;
  line-height:1;color:var(--bc,var(--violet));opacity:.10;pointer-events:none;
  text-shadow:0 0 40px currentColor}
.branchopt .bname{font-family:var(--serif);font-size:24px;letter-spacing:5px;color:#fff6e6;position:relative}
.branchopt .btag{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:9px;
  letter-spacing:2px;color:var(--bc,var(--violet));border:1px solid currentColor;padding:2px 7px;opacity:.8}
.branchopt .bdesc{font-size:11.5px;line-height:1.9;color:var(--text-dim);margin-top:14px;letter-spacing:.5px}
.branchopt .bmods{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.branchopt .bmods i{font-style:normal;font-size:9.5px;color:var(--jade);
  background:rgba(111,242,196,.08);border:1px solid rgba(111,242,196,.22);padding:2px 7px}

/* 擂台选人 */
.duel-box{width:min(860px,94vw);text-align:center}
.duel-kicker{font-family:var(--mono);font-size:10px;letter-spacing:10px;color:var(--rose);margin-bottom:14px}
.duel-title{font-family:var(--serif);font-size:42px;letter-spacing:12px;color:#fff4e8;padding-left:12px;
  text-shadow:0 0 40px rgba(178,58,46,.3)}
.duel-sub{font-size:11px;letter-spacing:2px;color:var(--text-dim);margin-top:10px}
.duel-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.duelopt{position:relative;padding:20px 16px;cursor:pointer;transition:.25s;text-align:left;
  background:linear-gradient(170deg,rgba(22,18,30,.96),rgba(6,10,16,.98));
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.duelopt:hover{border-color:var(--dc,#b23a2e);transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,var(--dc,#b23a2e) 20%,transparent)}
.duelopt .dproot{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--text-dim)}
.duelopt .dname{font-family:var(--serif);font-size:21px;letter-spacing:3px;color:#fff6e6;margin:5px 0}
.duelopt .drealm{font-size:11px;letter-spacing:2px;color:var(--dc,#b23a2e)}
.duelopt .dline{height:1px;background:linear-gradient(90deg,var(--dc,#b23a2e),transparent);opacity:.35;margin:11px 0}
.duelopt .dinfo{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--text-dim)}
.duelopt .dskills{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.duelopt .dskills i{font-style:normal;font-size:9px;color:rgba(233,227,214,.7);
  border:1px solid rgba(255,255,255,.12);padding:1px 5px}
.duelopt .drank{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:9px;
  color:var(--gold);letter-spacing:1px}

/* 暂停 */
.pause-box{text-align:center;min-width:340px}
.pause-title{font-family:var(--serif);font-size:44px;letter-spacing:22px;color:#fff4e2;
  padding-left:22px;margin-bottom:28px;text-shadow:0 0 40px rgba(176,141,60,.3)}
.pause-btns{display:flex;flex-direction:column;gap:10px;align-items:center}
.pause-btns .btn-primary,.pause-btns .btn-ghost{width:260px;text-align:center}
.pause-meta{margin-top:24px;font-family:var(--mono);font-size:9px;letter-spacing:1px;
  color:var(--text-dim);line-height:2}

/* 帮助 */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.helpsec h4{font-family:var(--serif);font-size:15px;letter-spacing:4px;color:var(--gold);
  margin-bottom:10px;border-bottom:1px solid rgba(176,141,60,.16);padding-bottom:7px}
.helpsec p,.helpsec li{font-size:11px;line-height:1.95;color:var(--text-dim);letter-spacing:.4px}
.helpsec ul{list-style:none}
.helpsec li::before{content:"·";color:var(--gold);margin-right:7px}
.helpsec b{color:var(--gold-2);font-weight:500}
.kbd{font-family:var(--mono);font-size:10px;border:1px solid rgba(176,141,60,.3);
  padding:0 5px;color:var(--gold);border-radius:2px}

/* 响应式 */
@media (max-width:1100px){
  .roots{grid-template-columns:repeat(3,1fr)}
  .start-title{font-size:64px}
  .realms{grid-template-columns:repeat(3,1fr)}
  .skillgrid,.artgrid{grid-template-columns:1fr}
  .help-grid{grid-template-columns:1fr}
  .branch-opts{grid-template-columns:1fr}
  .duel-list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .roots{grid-template-columns:1fr 1fr}
  .start-title{font-size:48px}
  .orbs{display:none}
  .hud-hints{display:none}
  .slot{width:56px;height:56px}
  .hud-right .mapwrap{width:120px;height:120px}
  #minimap{width:108px;height:108px}
  .lootcard{width:150px}
}


/* ============================================================
   校园 / 教程 / 对话 / 商店
   ============================================================ */
#tutorial{position:absolute;top:132px;left:24px;width:262px;pointer-events:auto;
  background:linear-gradient(150deg,rgba(10,18,26,.9),rgba(6,10,16,.82));
  border-left:1px solid rgba(125,155,122,.45);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  padding:10px 12px 11px;animation:floatIn .4s ease-out}
.tut-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  border-bottom:1px solid rgba(125,155,122,.18);padding-bottom:6px}
.tut-head>span{font-family:var(--serif);font-size:12px;letter-spacing:3px;color:#cfc6ae}
.tut-head>em{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--jade);opacity:.8;margin-right:auto}
#tutSkip{font-size:9px;letter-spacing:1px;color:var(--text-dim);border:1px solid rgba(255,255,255,.14);
  padding:1px 6px;transition:.2s}
#tutSkip:hover{color:var(--rose);border-color:rgba(178,58,46,.5)}
.tut-step{display:flex;gap:8px;padding:4px 0;opacity:.38;transition:.3s}
.tut-step i{font-style:normal;font-family:var(--mono);font-size:9px;width:15px;height:15px;flex:none;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;margin-top:1px}
.tut-step b{display:block;font-size:10.5px;color:#e6efea;letter-spacing:1px;font-weight:500}
.tut-step span{display:block;font-size:9.5px;line-height:1.55;color:var(--text-dim);margin-top:1px}
.tut-step.cur{opacity:1}
.tut-step.cur i{color:#0a1410;background:var(--jade);border-color:var(--jade);
  box-shadow:0 0 12px rgba(111,242,196,.6);animation:pulseDot 1.6s ease-in-out infinite}
.tut-step.cur b{color:#d8fff0}
@keyframes pulseDot{0%,100%{box-shadow:0 0 6px rgba(111,242,196,.4)}50%{box-shadow:0 0 16px rgba(111,242,196,.9)}}
.tut-step.done{opacity:.85}
.tut-step.done i{color:#0a1410;background:var(--jade);border-color:var(--jade)}
.tut-step.done b{color:rgba(200,240,225,.75);text-decoration:line-through;text-decoration-color:rgba(111,242,196,.4)}

.itemchips{position:absolute;left:30px;bottom:104px;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.chip{display:flex;align-items:center;gap:7px;padding:4px 9px 4px 7px;cursor:pointer;
  background:rgba(8,14,22,.8);border:1px solid rgba(176,141,60,.2);transition:.2s}
.chip:hover{border-color:rgba(176,141,60,.55);transform:translateX(2px)}
.chip b{font-family:var(--mono);font-size:9px;color:var(--ink);background:var(--gold);
  width:14px;height:14px;display:grid;place-items:center;border-radius:2px}
.chip i{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--gold-2)}
.chip em{font-style:normal;font-family:var(--mono);font-size:11px;color:#fff;margin-left:2px}
.chip.empty{opacity:.4}

#combo{position:absolute;right:70px;top:44%;transform:translateY(-50%);text-align:right;
  pointer-events:none;animation:comboIn .25s cubic-bezier(.16,1,.3,1)}
#combo b{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:#fff6e6;
  text-shadow:0 0 30px rgba(255,200,120,.6),0 2px 10px #000;font-weight:400}
#combo span{font-family:var(--mono);font-size:9px;letter-spacing:6px;color:var(--gold);opacity:.8}
@keyframes comboIn{from{opacity:0;transform:translateY(-50%) scale(1.35)}to{opacity:1;transform:translateY(-50%) scale(1)}}

/* 对话 */
.dlg-box{width:min(760px,92vw);display:flex;gap:16px;padding:20px 22px;position:relative;
  background:linear-gradient(160deg,rgba(14,22,34,.98),rgba(6,10,16,.99));
  border:1px solid rgba(176,141,60,.28);
  box-shadow:0 30px 90px rgba(0,0,0,.85),inset 0 0 50px rgba(111,151,168,.03);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  animation:dlgIn .35s cubic-bezier(.16,1,.3,1);cursor:pointer}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg-avatar{width:78px;height:78px;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:34px;color:var(--rc,var(--gold));
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc,var(--gold)) 22%,transparent),rgba(8,12,18,.9) 72%);
  border:1px solid color-mix(in srgb,var(--rc,var(--gold)) 45%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--rc,var(--gold)) 18%,transparent)}
.dlg-main{flex:1;min-width:0}
.dlg-top{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid rgba(176,141,60,.16);padding-bottom:7px;margin-bottom:10px}
.dlg-top b{font-family:var(--serif);font-size:19px;letter-spacing:3px;color:#fff6e6;font-weight:400}
.dlg-top span{font-size:9px;letter-spacing:2px;color:var(--gold-dim)}
.dlg-text{font-size:13px;line-height:2;color:rgba(233,227,214,.92);letter-spacing:.6px;min-height:52px}
.dlg-foot{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono);font-size:9px;color:var(--text-dim)}
.dlg-foot em{font-style:normal;color:var(--gold-dim);animation:blink 1.8s ease-in-out infinite}

/* 商店 */
.shop-box{width:min(860px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(16,22,30,.98),rgba(8,10,14,.99));
  border:1px solid rgba(176,141,60,.26);box-shadow:0 30px 90px rgba(0,0,0,.85)}
.shop-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;
  border-bottom:1px solid rgba(176,141,60,.16);
  background:linear-gradient(90deg,rgba(176,141,60,.08),transparent)}
.shop-head b{font-family:var(--serif);font-size:22px;letter-spacing:8px;color:#fff6e6;font-weight:400}
.shop-head span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--text-dim);margin-top:4px}
.shop-credits{font-family:var(--serif);font-size:13px;letter-spacing:3px;color:var(--gold)}
.shop-credits b{font-family:var(--mono);font-size:20px;color:#e3cfa8;letter-spacing:0;margin-left:4px}
.shop-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px 24px;overflow-y:auto}
.shopitem{display:flex;gap:12px;padding:13px;cursor:pointer;transition:.2s;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);position:relative}
.shopitem:hover{border-color:color-mix(in srgb,var(--rc) 55%,transparent);
  background:color-mix(in srgb,var(--rc) 7%,transparent);transform:translateY(-2px)}
.shopitem .sic{width:46px;height:46px;flex:none;display:grid;place-items:center;font-family:var(--serif);
  font-size:21px;color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 32%,transparent);
  background:color-mix(in srgb,var(--rc) 8%,transparent)}
.shopitem .sname{font-family:var(--serif);font-size:15px;letter-spacing:2px;color:#fff2df;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.shopitem .sprice{font-family:var(--mono);font-size:11px;color:var(--gold)}
.shopitem .sdesc{font-size:10px;line-height:1.6;color:var(--text-dim);margin-top:5px}
.shopitem .sown{position:absolute;right:10px;bottom:8px;font-size:9px;color:var(--cyan-dim);font-family:var(--mono)}
.shopitem.cant{opacity:.45}
.shop-foot{padding:12px 24px;border-top:1px solid rgba(176,141,60,.12);font-size:9.5px;
  letter-spacing:1.5px;color:var(--text-dim);text-align:center}

/* 短屏（≤820px 高）紧凑化 */
@media (max-height:820px){
  #tutorial{width:228px;top:118px;padding:8px 10px}
  .tut-step{padding:3px 0}
  .tut-step span{display:none}
  .tut-step.cur span{display:block}
  .tut-step b{font-size:10px}
  .hud-hints{display:none}
  .slot{width:62px;height:62px}
  .skill-wrap .slot{width:62px;height:62px}
  .itemchips{bottom:92px}
  #objective{bottom:150px}
  .statline{gap:10px}
  .stat b{font-size:11px}
}


/* 世界地图 */
.wm-box{width:min(940px,95vw);max-height:94vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(12,16,22,.98),rgba(6,8,12,.99));
  border:1px solid rgba(176,141,60,.28);box-shadow:0 30px 100px rgba(0,0,0,.9)}
.wm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;
  border-bottom:1px solid rgba(176,141,60,.16)}
.wm-head b{font-family:var(--serif);font-size:22px;letter-spacing:8px;color:#fff6e6;font-weight:400}
.wm-head em{font-style:normal;display:block;font-size:9.5px;letter-spacing:2px;color:var(--text-dim);margin-top:3px}
.wm-head span{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--gold-dim)}
#wmCanvas{width:100%;height:auto;max-height:74vh;object-fit:contain;display:block;
  background:radial-gradient(circle at 50% 50%,#0a1018,#05080d 70%)}
.wm-legend{display:flex;gap:16px;justify-content:center;padding:10px 16px;
  border-top:1px solid rgba(176,141,60,.12);font-size:9.5px;color:var(--text-dim);letter-spacing:1px}
.wm-legend span{display:flex;align-items:center;gap:5px}
.wm-legend i{width:9px;height:9px;display:inline-block}
.lg-campus{background:#b08d3c;border-radius:50%}
.lg-zone{background:#6f97a8;border-radius:50%;transform:scale(.7)}
.lg-mark{background:transparent;border:1px solid #c49a3a;transform:rotate(45deg)}
.lg-camp{background:#b5643a;clip-path:polygon(50% 0,100% 100%,0 100%)}
.lg-chest{background:#e3cfa8}
.lg-rift{background:#8a7f96;border-radius:50%}
.lg-player{background:#fff;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%)}


/* 连杀 */
#streak{position:absolute;right:70px;top:30%;transform:translateY(-50%);text-align:right;pointer-events:none}
#streak b{display:block;font-family:var(--serif);font-size:34px;line-height:1;color:#c49a3a;
  text-shadow:0 0 26px rgba(255,200,110,.7),0 2px 10px #000;font-weight:400}
#streak span{font-family:var(--mono);font-size:9px;letter-spacing:6px;color:var(--gold);opacity:.8}
#streak.bump{animation:streakBump .22s ease-out}
@keyframes streakBump{0%{transform:translateY(-50%) scale(1.3)}100%{transform:translateY(-50%) scale(1)}}

/* 装备面板 */
.gear-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px}
.gear-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gear-slot{position:relative;min-height:104px;padding:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);transition:.2s}
.gear-slot:hover{border-color:color-mix(in srgb,var(--rc,#b08d3c) 55%,transparent)}
.gear-slot.empty{display:grid;place-items:center;color:rgba(154,160,174,.5);font-size:11px;letter-spacing:2px}
.gear-slot .gname{font-family:var(--serif);font-size:12.5px;letter-spacing:1px;color:#fff2df;line-height:1.35}
.gear-slot .gpow{font-family:var(--mono);font-size:9px;color:var(--rc);margin-top:2px}
.gear-slot .gaf{font-size:9px;color:var(--jade);line-height:1.5;margin-top:3px}
.gear-slot .gslot-tag{position:absolute;right:6px;top:6px;font-size:8px;color:var(--text-dim);letter-spacing:1px}
.bag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:52vh;overflow-y:auto}
.bag-item{position:relative;padding:9px 10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);transition:.2s;cursor:pointer}
.bag-item:hover{border-color:color-mix(in srgb,var(--rc) 55%,transparent);background:color-mix(in srgb,var(--rc) 6%,transparent)}
.bag-item .bname{font-family:var(--serif);font-size:12px;letter-spacing:1px;color:#fff2df}
.bag-item .bmeta{font-family:var(--mono);font-size:8.5px;color:var(--text-dim);margin-top:2px}
.bag-item .baf{font-size:8.5px;color:var(--jade);line-height:1.5;margin-top:3px}
.bag-item .bacts{display:flex;gap:6px;margin-top:6px}
.bag-item button{font-size:8.5px;letter-spacing:1px;padding:2px 8px;border:1px solid rgba(176,141,60,.35);
  color:var(--gold);background:rgba(176,141,60,.06)}
.bag-item button:hover{background:rgba(176,141,60,.18)}
.bag-item button.salv{border-color:rgba(178,58,46,.35);color:var(--rose)}
.gear-stat{font-size:10.5px;line-height:1.9;color:var(--text-dim);letter-spacing:.5px}
.gear-stat b{color:var(--gold-2)}

/* ============ 账号 / 排行 / 好友 ============ */
.acct{position:absolute;top:228px;right:20px;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;
  border:1px solid rgba(176,141,60,.18);background:rgba(8,12,18,.72);backdrop-filter:blur(8px);z-index:6}
.acct-avatar{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(176,141,60,.5);
  color:#e3cfa8;font-family:var(--serif);font-size:15px;background:radial-gradient(circle,rgba(176,141,60,.16),transparent)}
.acct-main{display:flex;flex-direction:column;min-width:62px;line-height:1.25}
.acct-main b{font-family:var(--serif);font-size:11.5px;font-weight:400;color:#fff2df;letter-spacing:1px;
  max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-main em{font-style:normal;font-size:8px;letter-spacing:1px;color:var(--text-dim)}
.acct-btn{width:22px;height:22px;border:1px solid rgba(176,141,60,.22);color:var(--gold);
  font-size:9.5px;background:transparent;font-family:var(--sans);cursor:pointer}
.acct-btn:hover{background:rgba(176,141,60,.14)}
.acct.guest .acct-avatar{border-color:rgba(154,160,174,.4);color:#8f8676}

/* 登录框 */
#auth{z-index:80;background:radial-gradient(circle at 50% 42%,rgba(10,14,20,.94),rgba(4,6,10,.99))}
.auth-box{width:380px;max-width:92vw;padding:34px 34px 26px;background:linear-gradient(170deg,rgba(16,21,28,.98),rgba(7,10,15,.99));
  border:1px solid rgba(176,141,60,.26);box-shadow:0 40px 120px rgba(0,0,0,.9)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.auth-seal{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(176,141,60,.6);
  font-family:var(--serif);font-size:22px;color:#e3cfa8;background:radial-gradient(circle,rgba(176,141,60,.14),transparent)}
.auth-brand b{display:block;font-family:var(--serif);font-size:20px;letter-spacing:5px;color:#fff6e6;font-weight:400}
.auth-brand em{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--gold-dim)}
.auth-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid rgba(176,141,60,.16)}
.auth-tabs button{flex:1;padding:9px 0;background:transparent;border:1px solid transparent;border-bottom:2px solid transparent;
  color:var(--text-dim);font-family:var(--serif);font-size:13px;letter-spacing:4px;cursor:pointer}
.auth-tabs button.on{color:#e3cfa8;border-bottom-color:var(--gold)}
.auth-field{display:block;font-size:9.5px;letter-spacing:2px;color:var(--text-dim);margin-bottom:12px}
.auth-field input{display:block;width:100%;margin-top:5px;padding:10px 12px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);color:#fff;font-family:var(--sans);font-size:13px;outline:none;letter-spacing:1px}
.auth-field input:focus{border-color:rgba(176,141,60,.55);background:rgba(176,141,60,.05)}
.auth-msg{min-height:16px;font-size:10px;letter-spacing:1px;color:var(--rose);margin:2px 0 8px}
.auth-msg.ok{color:#8aa07a}
#authSubmit{width:100%;padding:11px;background:linear-gradient(180deg,#b08d3c,#c8a45e);color:#22180c;
  font-family:var(--serif);font-size:14px;letter-spacing:8px;border:none;cursor:pointer;transition:.2s}
#authSubmit:hover{filter:brightness(1.08)}
#authSubmit:disabled{opacity:.55;cursor:wait}
.auth-alt{margin-top:12px;text-align:center}
.auth-alt button{background:transparent;border:none;color:var(--gold-dim);font-size:10px;letter-spacing:2px;cursor:pointer}
.auth-alt button:hover{color:var(--gold)}
.auth-note{margin-top:14px;font-size:8.5px;line-height:1.8;color:rgba(154,160,174,.6);text-align:center;letter-spacing:.5px}

/* 排行榜 */
.rank-box{width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(12,16,22,.98),rgba(6,8,12,.99));border:1px solid rgba(176,141,60,.28);
  box-shadow:0 30px 100px rgba(0,0,0,.9)}
.rank-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid rgba(176,141,60,.14)}
.rank-head b{font-family:var(--serif);font-size:21px;letter-spacing:8px;color:#fff6e6;font-weight:400}
.rank-head em{display:block;font-style:normal;font-size:9px;letter-spacing:2px;color:var(--text-dim);margin-top:3px}
.rank-head span{font-family:var(--mono);font-size:9px;color:var(--gold-dim)}
.rank-tabs{display:flex;gap:6px;padding:12px 22px 0}
.rank-tabs button{padding:6px 14px;background:transparent;border:1px solid rgba(255,255,255,.1);
  color:var(--text-dim);font-size:10.5px;letter-spacing:2px;cursor:pointer}
.rank-tabs button.on{border-color:rgba(176,141,60,.5);color:#e3cfa8;background:rgba(176,141,60,.07)}
.rank-list{flex:1;overflow-y:auto;padding:12px 22px;min-height:240px}
.rank-row{display:grid;grid-template-columns:42px 1fr 120px 84px 70px;align-items:center;gap:8px;
  padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px}
.rank-row.me{background:rgba(176,141,60,.08);border-left:2px solid var(--gold)}
.rank-row .rk{font-family:var(--mono);color:var(--gold-dim);font-size:11px}
.rank-row .rk.top1{color:#c49a3a}.rank-row .rk.top2{color:#cfd8e3}.rank-row .rk.top3{color:#e0a878}
.rank-row .rn{font-family:var(--serif);color:#fff2df;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .rn i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7d9b7a;margin-right:7px;vertical-align:middle}
.rank-row .rn i.off{background:#4a5260}
.rank-row .rv{color:#9fe8ff;font-size:10px;letter-spacing:.5px}
.rank-row .rp{font-family:var(--mono);color:var(--gold);font-size:10.5px;text-align:right}
.rank-row .rw{font-family:var(--mono);color:var(--text-dim);font-size:10px;text-align:right}
.rank-foot{padding:10px 22px;border-top:1px solid rgba(176,141,60,.12);font-size:9.5px;color:var(--text-dim);letter-spacing:1px}
.rank-empty{padding:50px 0;text-align:center;color:var(--text-dim);font-size:11px;letter-spacing:2px;line-height:2}

/* 好友 */
.fr-box{width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(12,16,22,.98),rgba(6,8,12,.99));border:1px solid rgba(176,141,60,.28);
  box-shadow:0 30px 100px rgba(0,0,0,.9)}
.fr-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(176,141,60,.14)}
.fr-head b{font-family:var(--serif);font-size:20px;letter-spacing:7px;color:#fff6e6;font-weight:400}
.fr-head em{display:block;font-style:normal;font-size:9px;letter-spacing:1.5px;color:var(--text-dim);margin-top:3px}
.fr-head span{font-family:var(--mono);font-size:9px;color:var(--gold-dim)}
.fr-add{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.fr-add input{flex:1;padding:8px 10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:12px;outline:none}
.fr-add input:focus{border-color:rgba(176,141,60,.5)}
.fr-add button{padding:8px 14px;background:rgba(176,141,60,.12);border:1px solid rgba(176,141,60,.4);
  color:var(--gold);font-size:10px;letter-spacing:1px;cursor:pointer}
.fr-add button:hover{background:rgba(176,141,60,.22)}
.fr-body{flex:1;overflow-y:auto;padding:12px 20px 18px;min-height:200px}
.fr-sec{font-size:9px;letter-spacing:3px;color:var(--gold-dim);margin:14px 0 8px}
.fr-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);margin-bottom:7px}
.fr-item .fav{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(176,141,60,.35);
  font-family:var(--serif);font-size:13px;color:#e3cfa8}
.fr-item .fmain{flex:1;min-width:0}
.fr-item .fname{font-family:var(--serif);font-size:12px;color:#fff2df;letter-spacing:1px}
.fr-item .fmeta{font-size:8.5px;color:var(--text-dim);letter-spacing:.5px;margin-top:2px}
.fr-item .fonline{width:7px;height:7px;border-radius:50%;background:#7d9b7a;box-shadow:0 0 8px #7d9b7a}
.fr-item .fonline.off{background:#4a5260;box-shadow:none}
.fr-item button{padding:4px 9px;background:transparent;border:1px solid rgba(255,255,255,.16);
  color:var(--text);font-size:9px;letter-spacing:1px;cursor:pointer}
.fr-item button.ok{border-color:rgba(125,155,122,.5);color:#8aa07a}
.fr-item button.del{border-color:rgba(178,58,46,.35);color:var(--rose)}
.fr-item button:hover{background:rgba(255,255,255,.07)}
.fr-empty{text-align:center;color:var(--text-dim);font-size:10.5px;letter-spacing:2px;padding:26px 0;line-height:2}
#rank, #friends{z-index:70}

/* 超前学习 */
.topic-head{padding:10px 12px;border:1px solid rgba(176,141,60,.16);background:rgba(176,141,60,.03);margin-bottom:14px}
.topic-head b{font-family:var(--serif);font-size:16px;color:#e3cfa8;font-weight:400;letter-spacing:1px}
.topic-head em{display:block;font-style:normal;margin-top:5px;font-size:9.5px;line-height:1.7;color:var(--text-dim);letter-spacing:.5px}
.topic-sec{margin-bottom:16px}
.topic-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.ts-glyph{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--rc);
  font-family:var(--serif);font-size:13px;color:var(--rc)}
.ts-name{font-family:var(--serif);font-size:13px;letter-spacing:2px;color:#fff2df}
.ts-count{font-size:9px;letter-spacing:1px;color:var(--text-dim);margin-left:auto}
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.topic-card{padding:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:.18s}
.topic-card.can{border-color:color-mix(in srgb,var(--rc) 45%,transparent)}
.topic-card.can:hover{background:color-mix(in srgb,var(--rc) 8%,transparent)}
.topic-card.done{border-color:color-mix(in srgb,var(--rc) 30%,transparent);background:color-mix(in srgb,var(--rc) 5%,transparent)}
.topic-card .ttop{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.topic-card .ttop b{font-family:var(--serif);font-size:12.5px;letter-spacing:1px;color:#fff2df;font-weight:400}
.topic-card .ttop em{font-style:normal;font-size:8px;color:var(--text-dim);white-space:nowrap}
.tdesc{margin-top:6px;font-size:9.5px;line-height:1.65;color:rgba(230,220,200,.72);letter-spacing:.3px;min-height:32px}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.tcost{font-family:var(--mono);font-size:8.5px;color:var(--gold-dim)}
.tdone{font-family:var(--serif);font-size:11px;letter-spacing:3px;color:var(--rc)}
.topic-card button{padding:3px 10px;font-size:9px;letter-spacing:1px;border:1px solid color-mix(in srgb,var(--rc) 50%,transparent);
  color:var(--rc);background:transparent}
.topic-card button:hover:not(:disabled){background:color-mix(in srgb,var(--rc) 16%,transparent)}
.topic-card button:disabled{opacity:.35;cursor:not-allowed}

/* ============================================================
   宣纸水墨 · 去霓虹化覆盖
   ============================================================ */
html,body{background:#12100c}
#vignette{background:radial-gradient(ellipse at 50% 44%,transparent 40%,rgba(12,9,6,.55) 82%,rgba(6,5,3,.92) 100%)}
#grain{opacity:.05;mix-blend-mode:multiply;animation:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .12  0 0 0 0 .10  0 0 0 0 .07  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}

/* 面板：换成旧纸/墨底，去掉玻璃与霓虹 */
.panel-box,.shop-box,.rank-box,.fr-box,.auth-box,.wm-box,.branch-box,.pause-box,.dlg-box,.loot-box,.duel-box{
  background:linear-gradient(168deg,#1d1811 0%,#15120c 60%,#100e09 100%)!important;
  border:1px solid #3d3527!important;
  box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,240,210,.03)!important;
  clip-path:none!important;
}
.panel-box::before,.shop-box::before,.rank-box::before,.fr-box::before,.auth-box::before,.wm-box::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(176,141,60,.13);pointer-events:none;
}
.panel-box,.shop-box,.rank-box,.fr-box,.auth-box,.wm-box{position:relative}
.panel-head,.rank-head,.fr-head,.wm-head,.shop-head{border-bottom:1px solid rgba(176,141,60,.20)!important}

/* 主按钮：朱砂印 */
.btn-primary{background:#a8362a!important;color:#f4e8d2!important;
  border:1px solid #c0503f!important;box-shadow:none!important;text-shadow:none!important;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)!important;letter-spacing:7px}
.btn-primary:hover{background:#bb4032!important}
.btn-ghost{border:1px solid rgba(176,141,60,.35)!important;color:var(--gold-2)!important;background:transparent!important}

/* 角色卡：纸签 + 朱砂印 */
.pcard{background:linear-gradient(100deg,#1c1711 0%,#15120c 72%,rgba(21,18,12,0) 100%)!important;
  border:1px solid #3a3224!important;clip-path:none!important;box-shadow:none!important}
.pcard-sigil{border-radius:2px!important;background:#a8362a!important;color:#f4e8d2!important;
  border:1px solid #7c2a21!important;box-shadow:none!important;text-shadow:none!important;transform:rotate(-2deg);
  font-size:26px}
.pcard-name,.pcard-realm{text-shadow:none!important}

/* 技能格：墨块 */
.slot{background:linear-gradient(160deg,#211b13,#12100b)!important;border:1px solid #3b3325!important;
  clip-path:none!important;box-shadow:none!important}
.slot:hover{transform:translateY(-2px);border-color:var(--rc,#b08d3c)!important}
.slot .cd{background:rgba(10,8,5,.72)!important}
.slot-key{color:#8f8676}

/* 开局：纸底 + 朱砂题款 */
#start{background:radial-gradient(ellipse at 50% 0%,#1e1912 0%,#14110c 48%,#0b0a07 100%)!important}
#start .start-bg{opacity:.32!important}
.start-kicker{font-family:var(--serif)!important;font-size:11px!important;letter-spacing:7px!important;
  color:#a8362a!important}
.start-title{letter-spacing:16px!important;text-shadow:0 6px 30px rgba(0,0,0,.8)!important}
.start-rule{background:linear-gradient(90deg,transparent,#a8362a 20%,#b08d3c 50%,#a8362a 80%,transparent)!important}

/* HUD 数字与提示降亮 */
#hud{text-shadow:0 1px 4px rgba(0,0,0,.75)}
.hud-hints b{color:#c9b184!important}
.acct{background:#17130d!important;border:1px solid #3a3224!important}
.acct-avatar{border-radius:2px!important;border:1px solid #7c2a21!important;background:#a8362a!important;color:#f4e8d2!important}

/* 学根卡：纸墨化 */
.rootcard{background:linear-gradient(168deg,#1d1811 0%,#14110c 70%,#100e09 100%)!important;
  border:1px solid #3a3224!important;clip-path:none!important;box-shadow:none!important}
.rootcard::before{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%)!important}
.rootcard:hover{border-color:color-mix(in srgb,var(--rc) 65%,transparent)!important;transform:translateY(-3px)}
.rootcard.on{border-color:var(--rc)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent)!important}
.rootcard .root-glyph{text-shadow:none!important}
.rootcard .root-en{color:#7d6a4a!important}
.rootcard .root-tag{color:#9a8a6c!important}

.root-glyph{filter:saturate(.82) brightness(.96)}

/* 考题 */
#quiz{z-index:95;background:radial-gradient(circle at 50% 45%,rgba(18,14,9,.9),rgba(6,5,3,.97))}
.quiz-box{width:min(620px,94vw);padding:26px 28px 20px;background:linear-gradient(168deg,#1d1811,#14110c 70%,#100e09);
  border:1px solid #3d3527;position:relative;box-shadow:0 26px 70px rgba(0,0,0,.7)}
.quiz-box::before{content:"";position:absolute;inset:6px;border:1px solid rgba(176,141,60,.12);pointer-events:none}
.quiz-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.quiz-head b{font-family:var(--serif);font-size:19px;letter-spacing:5px;color:#fff6e6;font-weight:400}
.quiz-head em{display:block;font-style:normal;font-size:9px;letter-spacing:2px;color:var(--text-dim);margin-top:4px}
.quiz-head span{font-family:var(--mono);font-size:9px;color:var(--gold-dim)}
.quiz-q{font-family:var(--serif);font-size:17px;line-height:1.85;letter-spacing:1px;color:#efe4cc;margin-bottom:16px}
.quiz-opts{display:grid;gap:8px}
.quiz-opts button{text-align:left;padding:11px 14px;border:1px solid #3a3224;background:#191510;
  color:#e6dcc8;font-size:13px;letter-spacing:.5px;transition:.15s}
.quiz-opts button:hover:not(:disabled){border-color:#b08d3c;background:#211b13}
.quiz-opts button.right{border-color:#7d9b7a;background:rgba(125,155,122,.12);color:#cfe0c4}
.quiz-opts button.wrong{border-color:#b23a2e;background:rgba(178,58,46,.12);color:#e8b9ae}
.quiz-opts button:disabled{cursor:default}
.quiz-fb{margin-top:12px;font-size:10.5px;line-height:1.8;color:var(--text-dim);letter-spacing:.5px;min-height:18px}
.quiz-fb b{color:#cfe0c4;font-weight:400}
.quiz-fb i{color:#e8b9ae;font-style:normal}
.quiz-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.quiz-foot button{padding:7px 18px;font-size:10px;letter-spacing:2px;border:1px solid #3a3224;color:var(--text-dim);background:transparent}
.quiz-foot button:hover{border-color:#b08d3c;color:#e3cfa8}
.quiz-foot #quizLearn{border-color:#7d9b7a;color:#cfe0c4}
.quiz-foot #quizNext{border-color:#b08d3c;color:#e3cfa8}
.topic-practice{margin-left:14px;padding:3px 10px;font-size:9px;letter-spacing:1px;border:1px solid rgba(176,141,60,.45);
  color:var(--gold-2);background:transparent;vertical-align:2px}
.topic-practice:hover{background:rgba(176,141,60,.12)}