/* ============================================================
   墨影江湖 · 水墨样式表
   纯 CSS，无外链资源，离线可用
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --font-serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --cinnabar:#b03a2e;
  --cinnabar-soft:#c9604f;
  --gold:#c9a227;
  --gold-soft:#e0c46a;
  --cyan:#7ba8a0;
  --radius:3px;
  --ease:cubic-bezier(.22,.68,.24,1);
  --shadow-md:0 10px 26px -18px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.04) inset;
  --paper-tex:none;
}

/* 夜墨主题（默认） */
html[data-theme="ink"]{
  --bg-0:#0b0e0d;
  --bg-1:#111614;
  --bg-2:#161c19;
  --text:#ddd4c0;
  --text-strong:#f0e8d6;
  --text-dim:#9a9384;
  --text-faint:#6d6a5f;
  --panel-bg:linear-gradient(165deg,rgba(24,30,27,.86),rgba(15,19,17,.9));
  --panel-solid:#141a17;
  --panel-head-bg:rgba(18,23,21,.94);
  --panel-border:rgba(201,162,39,.22);
  --panel-border-strong:rgba(201,162,39,.42);
  --panel-border-inner:rgba(233,224,207,.06);
  --hairline:rgba(233,224,207,.09);
  --slot-bg:rgba(255,255,255,.015);
  --track:rgba(0,0,0,.45);
  --input-bg:rgba(0,0,0,.25);
  --shadow:0 12px 30px -20px #000;
  --mtn-far-a:#1b2420; --mtn-far-b:#121816;
  --mtn-mid-a:#0e1311; --mtn-mid-b:#0a0d0c;
  --mtn-near-a:#080b0a; --mtn-near-b:#050706;
  --mtn-ink:#040605;
  --pine:#0b100e;
  --pagoda:#0c1210;
  --moon-a:rgba(240,230,205,.92);
  --moon-b:rgba(226,205,150,.18);
  --moon-glow:rgba(232,214,170,.16);
  --mist:rgba(233,224,207,.075);
  --grain-opacity:.045;
  --seal-text:#f4e6cf;
  --grad-hp:linear-gradient(90deg,#7d2b23,#b03a2e 55%,#d4685a);
  --grad-hp-low:linear-gradient(90deg,#5f1d16,#a3271f 60%,#c93b2c);
  --grad-qi:linear-gradient(90deg,#1f3f4a,#3d6f7d 60%,#6fa3a8);
  --grad-exp:linear-gradient(90deg,#6a5312,#c9a227 65%,#e6cd6f);
  --grad-enemy:linear-gradient(90deg,#4d1a14,#a3271f 60%,#d4453a);
  --k-narr:#d8d0bb; --k-room:#a3d3c4; --k-combat:#e6965a; --k-dmg:#ea6a5a;
  --k-heal:#7cc47f; --k-gain:#e4c55e; --k-item:#7ecbd2; --k-quest:#b995dd;
  --k-level:#f2dd93; --k-npc:#dcc9a2; --k-sys:#8e8a7b; --k-error:#f07a6a;
  --k-hint:#c9a227; --k-ambient:#7ba59b; --k-death:#d1483a; --k-title:#eac86f;
  --k-cmd:#c9a227;
  color-scheme:dark;
}

/* 宣纸主题 */
html[data-theme="paper"]{
  --bg-0:#e9e0cf;
  --bg-1:#e3d9c5;
  --bg-2:#dcd1bb;
  --text:#332d23;
  --text-strong:#1d1911;
  --text-dim:#6b6250;
  --text-faint:#918873;
  --panel-bg:linear-gradient(165deg,rgba(252,248,239,.82),rgba(240,232,215,.78));
  --panel-solid:#f3ecdc;
  --panel-head-bg:rgba(247,241,229,.9);
  --panel-border:rgba(90,68,32,.24);
  --panel-border-strong:rgba(90,68,32,.42);
  --panel-border-inner:rgba(90,68,32,.08);
  --hairline:rgba(90,68,32,.16);
  --slot-bg:rgba(255,255,255,.28);
  --track:rgba(90,68,32,.14);
  --input-bg:rgba(255,255,255,.35);
  --shadow:0 16px 34px -26px rgba(70,50,20,.75);
  --mtn-far-a:#cdc1a8; --mtn-far-b:#bdb098;
  --mtn-mid-a:#b3a68c; --mtn-mid-b:#a2947a;
  --mtn-near-a:#8e816a; --mtn-near-b:#7a6e59;
  --mtn-ink:#5f5644;
  --pine:#6f6450;
  --pagoda:#6a6049;
  --moon-a:rgba(176,58,46,.85);
  --moon-b:rgba(176,58,46,.05);
  --moon-glow:rgba(176,58,46,.12);
  --mist:rgba(255,252,244,.5);
  --grain-opacity:.07;
  --seal-text:#f6ead4;
  --grad-hp:linear-gradient(90deg,#8c2d24,#b03a2e 55%,#c9634f);
  --grad-hp-low:linear-gradient(90deg,#6d211a,#a3271f 60%,#c43a2c);
  --grad-qi:linear-gradient(90deg,#335f6a,#4d818b 60%,#7faeae);
  --grad-exp:linear-gradient(90deg,#8a6c15,#c9a227 65%,#dcc267);
  --grad-enemy:linear-gradient(90deg,#6d211a,#a3271f 60%,#c43a2c);
  --k-narr:#3a342b; --k-room:#2f5e56; --k-combat:#9c4a17; --k-dmg:#a3271f;
  --k-heal:#2f6b3a; --k-gain:#7a5a0e; --k-item:#1f5f66; --k-quest:#5b3a86;
  --k-level:#7a5209; --k-npc:#5d4a2c; --k-sys:#7a7264; --k-error:#a3271f;
  --k-hint:#8a6a10; --k-ambient:#4d6f68; --k-death:#8c1d12; --k-title:#7a5209;
  --k-cmd:#7a5a0e;
  color-scheme:light;
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-serif);
  background:var(--bg-0);
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,form{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
input{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:rgba(176,58,46,.35);color:var(--text-strong)}

*{scrollbar-width:thin;scrollbar-color:rgba(201,162,39,.28) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(201,162,39,.26);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.45);background-clip:padding-box}

.screen{position:fixed;inset:0}

/* ---------- 3. 背景水墨 ---------- */
.bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 0%,var(--bg-2) 0%,var(--bg-1) 45%,var(--bg-0) 100%)}
.bg-sky{position:absolute;inset:0;background:
  radial-gradient(60% 42% at 72% 20%,var(--moon-glow),transparent 70%),
  linear-gradient(180deg,transparent 30%,rgba(0,0,0,.16) 100%)}
.bg-moon{position:absolute;top:11%;right:19%;width:clamp(120px,13vw,190px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,var(--moon-a),var(--moon-b) 72%,transparent 74%);
  filter:blur(.3px);box-shadow:0 0 90px 24px var(--moon-glow);opacity:.9;animation:moonBreath 14s var(--ease) infinite}
.bg-mountains{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(78vh,900px);opacity:.95}
.mtn-far{opacity:.55}
.mtn-far path{fill:url(#gFar)}
.mtn-mid{opacity:.85}
.mtn-mid path{fill:url(#gMid)}
.mtn-near path{fill:url(#gNear)}
.mtn-near .mtn-ink{fill:var(--mtn-ink);opacity:.9}
.s-far-a{stop-color:var(--mtn-far-a)}.s-far-b{stop-color:var(--mtn-far-b)}
.s-mid-a{stop-color:var(--mtn-mid-a)}.s-mid-b{stop-color:var(--mtn-mid-b)}
.s-near-a{stop-color:var(--mtn-near-a)}.s-near-b{stop-color:var(--mtn-near-b)}
.pine{opacity:.75}
.pine path{fill:none;stroke:var(--pine);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pagoda{opacity:.8}
.pagoda path,.pagoda rect{fill:var(--pagoda)}
.pagoda-hollow{fill:var(--bg-0);opacity:.65}
.birds{opacity:.5}
.bird{fill:none;stroke:var(--text-dim);stroke-width:1.5;stroke-linecap:round}
.bird.b1{transform:translate(360px,210px)}
.bird.b2{transform:translate(412px,188px) scale(.8)}
.bird.b3{transform:translate(470px,224px) scale(.68)}
.birds{animation:birdsDrift 26s ease-in-out infinite alternate}
.bg-mist{position:absolute;left:-20%;right:-20%;height:34%;filter:blur(26px);opacity:.9;
  background:radial-gradient(ellipse at 40% 50%,var(--mist),transparent 62%)}
.bg-mist.m1{top:46%;animation:mistDrift 52s linear infinite}
.bg-mist.m2{top:62%;height:26%;opacity:.7;animation:mistDrift 74s linear infinite reverse}
.bg-mist.m3{top:34%;height:20%;opacity:.45;animation:mistDrift 96s linear infinite}
.bg-grain{position:absolute;inset:0;opacity:var(--grain-opacity);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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:180px 180px}
html[data-theme="paper"] .bg-grain{mix-blend-mode:multiply;opacity:.055}
html[data-theme="paper"] .bg-mountains{opacity:.72}

/* ---------- 4. 面板与通用件 ---------- */
.panel{
  position:relative;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(7px) saturate(1.04);
  -webkit-backdrop-filter:blur(7px) saturate(1.04);
}
.panel::before{content:"";position:absolute;inset:3px;border:1px solid var(--panel-border-inner);border-radius:2px;pointer-events:none}
.corner{position:absolute;width:11px;height:11px;border:1px solid var(--gold);opacity:.6;pointer-events:none;z-index:3}
.corner.tl{top:4px;left:4px;border-right:0;border-bottom:0}
.corner.tr{top:4px;right:4px;border-left:0;border-bottom:0}
.corner.bl{bottom:4px;left:4px;border-right:0;border-top:0}
.corner.br{bottom:4px;right:4px;border-left:0;border-top:0}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px 8px;border-bottom:1px solid var(--hairline);
  background:var(--panel-head-bg);border-radius:var(--radius) var(--radius) 0 0;
  position:sticky;top:0;z-index:4;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.panel-title{font-size:12.5px;letter-spacing:.28em;color:var(--gold);white-space:nowrap}
.panel-sub{font-size:9.5px;letter-spacing:.2em;color:var(--text-faint);white-space:nowrap}
.panel-body{padding:10px 12px 13px}

.btn-primary{position:relative;display:block;width:100%;margin-top:16px;padding:13px 18px;
  background:linear-gradient(180deg,rgba(176,58,46,.96),rgba(133,40,31,.96));
  color:#f7ecd8;letter-spacing:.42em;text-indent:.42em;font-size:15px;border-radius:2px;
  border:1px solid rgba(201,162,39,.5);box-shadow:0 8px 22px -12px rgba(176,58,46,.9),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .18s var(--ease),box-shadow .24s var(--ease),filter .2s}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 12px 28px -12px rgba(176,58,46,.95),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.link-btn{display:block;width:100%;margin-top:10px;padding:6px;font-size:12px;letter-spacing:.2em;color:var(--text-dim);transition:color .2s}
.link-btn:hover{color:var(--gold)}
.mock-note{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;padding:7px 9px;
  border:1px dashed rgba(201,162,39,.34);border-radius:2px;background:rgba(201,162,39,.05);
  font-size:11px;letter-spacing:.04em;color:var(--text-dim);line-height:1.6}
.mock-note[hidden]{display:none}
.mock-tag{flex:0 0 auto;padding:0 5px;border:1px solid rgba(201,162,39,.42);border-radius:2px;
  color:var(--gold);font-size:9.5px;letter-spacing:.14em}
.mock-text{flex:1;min-width:0}
.mock-enter{flex:0 0 auto;color:var(--gold);font-size:11px;letter-spacing:.08em;padding:1px 2px;
  border-bottom:1px solid rgba(201,162,39,.4);transition:color .2s,border-color .2s}
.mock-enter:hover{color:#f2dd93;border-color:#f2dd93}
.mini-btn{padding:3px 8px;font-size:10.5px;letter-spacing:.12em;color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:2px;background:transparent;transition:all .2s var(--ease);white-space:nowrap}
.mini-btn:hover{color:var(--gold);border-color:var(--panel-border-strong)}
.mini-btn.is-on{color:var(--gold);border-color:var(--panel-border-strong);background:rgba(201,162,39,.08)}

.tag{display:inline-block;padding:0 5px;font-size:9.5px;line-height:1.6;letter-spacing:.12em;border:1px solid currentColor;border-radius:2px;opacity:.9;white-space:nowrap}
.tag.safe{color:var(--k-heal)}
.tag.danger{color:var(--k-dmg)}
.tag.gold{color:var(--gold)}
.tag.mob{color:var(--k-combat)}
.tag.boss{color:var(--k-death)}
.tag.npc{color:var(--k-item)}

.empty{padding:14px 8px;text-align:center;font-size:11.5px;letter-spacing:.14em;color:var(--text-faint)}

/* ---------- 5. 登录页 ---------- */
.login{display:flex;align-items:center;justify-content:center;padding:clamp(16px,3.6vw,62px);overflow:auto;z-index:2}
.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(348px,452px);
  gap:clamp(24px,4.6vw,84px);width:min(1240px,100%);align-items:center}
.login-hero{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:26px;min-height:min(72vh,620px);padding-right:clamp(0px,2.6vw,36px)}
.hero-inner{display:flex;flex-direction:row;gap:clamp(16px,2.4vw,34px);align-items:flex-start}
.hero-sub{writing-mode:vertical-rl;text-orientation:mixed;
  padding-top:clamp(30px,6vw,82px);font-size:clamp(12px,1.05vw,15px);letter-spacing:.42em;color:var(--text-dim);line-height:2.05}
.hero-title{margin:0;writing-mode:vertical-rl;text-orientation:mixed;display:flex;gap:0;
  font-size:clamp(48px,6.6vw,96px);font-weight:600;letter-spacing:.2em;line-height:1.16;
  color:var(--text-strong);text-shadow:0 2px 26px rgba(0,0,0,.5),0 0 1px rgba(255,255,255,.2)}
html[data-theme="paper"] .hero-title{text-shadow:0 2px 20px rgba(90,68,32,.22)}
.hero-title span{display:inline-block;animation:inkIn 1.1s var(--ease) both}
.hero-title span:nth-child(1){animation-delay:.05s}
.hero-title span:nth-child(2){animation-delay:.18s;transform:translateY(-.03em)}
.hero-title span:nth-child(3){animation-delay:.31s}
.hero-title span:nth-child(4){animation-delay:.44s}
.hero-title span:nth-child(2),.hero-title span:nth-child(4){font-weight:400;opacity:.92}
.hero-meta{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;color:var(--text-faint)}
.hero-line{display:inline-block;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.login-card{position:relative;padding:clamp(22px,2.4vw,32px) clamp(20px,2.5vw,34px) clamp(18px,2vw,26px);
  max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--shadow-lg)}
.login-kicker{font-size:10px;letter-spacing:.42em;color:var(--gold);opacity:.85;padding-right:66px}
.login-h{margin-top:2px;font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:.3em;color:var(--text-strong);line-height:1.4}
.login-lede{margin-top:2px;font-size:12px;letter-spacing:.22em;color:var(--text-dim)}

.seal{position:absolute;display:grid;place-items:center;background:
  linear-gradient(145deg,rgba(176,58,46,.95),rgba(126,34,26,.96));
  color:var(--seal-text);font-family:var(--font-serif);border-radius:2px;
  box-shadow:inset 0 0 0 2px rgba(255,240,215,.22),inset 0 0 14px rgba(0,0,0,.35),0 6px 18px -10px rgba(176,58,46,.9);
  transform:rotate(-6deg);filter:saturate(1.05)}
.seal-login{top:20px;right:20px;width:52px;height:52px;font-size:18px;
  writing-mode:vertical-rl;text-orientation:upright;line-height:1.02;letter-spacing:0;padding:2px}
.seal-login::after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,240,215,.34);border-radius:1px;pointer-events:none}

.field{display:block;margin-top:22px;position:relative}
.field-label{display:block;font-size:10.5px;letter-spacing:.4em;color:var(--gold);margin-bottom:4px}
.field input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--panel-border-strong);
  padding:6px 2px 9px;font-size:21px;letter-spacing:.16em;color:var(--text-strong);outline:none;
  transition:border-color .25s,box-shadow .25s}
.field input::placeholder{color:var(--text-faint);font-size:16px;letter-spacing:.14em;opacity:.7}
.field input:focus{border-bottom-color:var(--gold);box-shadow:0 10px 24px -20px var(--gold)}
.form-error{margin-top:10px;padding:7px 10px;font-size:12px;letter-spacing:.08em;color:var(--k-error);
  border-left:2px solid var(--cinnabar);background:rgba(176,58,46,.1);animation:shake .34s ease}
.sect-label{display:flex;align-items:baseline;gap:8px;margin:20px 0 9px;font-size:10.5px;letter-spacing:.32em;color:var(--gold)}
.sect-label em{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--text-faint)}
.sect-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sect-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:8px 9px;
  border:1px solid var(--panel-border);border-radius:2px;background:var(--slot-bg);
  transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s,box-shadow .25s}
.sect-card:hover{transform:translateY(-1px);border-color:var(--panel-border-strong);background:rgba(201,162,39,.05)}
.sect-card.is-selected{border-color:rgba(176,58,46,.85);background:rgba(176,58,46,.09);
  box-shadow:inset 0 0 0 1px rgba(176,58,46,.3),0 0 20px -12px var(--cinnabar)}
.sect-top{display:flex;align-items:center;gap:8px;min-width:0}
.sect-emblem{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;color:var(--cinnabar);border:1px solid var(--panel-border-strong);
  background:radial-gradient(circle at 34% 28%,rgba(201,162,39,.16),transparent 70%)}
.sect-card.is-selected .sect-emblem{color:#f3e6cd;background:rgba(176,58,46,.9);border-color:rgba(233,224,207,.4)}
.sect-names{min-width:0;display:flex;flex-direction:column;gap:1px}
.sect-name{font-size:13.5px;letter-spacing:.1em;color:var(--text-strong);line-height:1.35;white-space:nowrap}
.sect-title{font-size:9.5px;letter-spacing:.14em;color:var(--gold);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sect-desc{font-size:10.5px;line-height:1.55;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.login-foot{margin-top:14px;text-align:center;font-size:10.5px;letter-spacing:.16em;color:var(--text-faint)}
.login-foot .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6;margin-right:6px;vertical-align:2px}

/* ---------- 6. 主界面骨架 ---------- */
.game{
  display:grid;z-index:2;
  grid-template-columns:280px minmax(0,1fr) 344px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top top" "left center right" "left cmd right";
  gap:10px 14px;padding:0 16px 14px;height:100dvh;
}
.topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:10px 2px 9px;border-bottom:1px solid var(--hairline);min-width:0}
.brand{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.brand-seal{display:grid;place-items:center;width:30px;height:30px;font-size:10px;letter-spacing:0;
  color:var(--seal-text);background:linear-gradient(150deg,rgba(176,58,46,.95),rgba(126,34,26,.95));
  border-radius:2px;writing-mode:vertical-rl;text-orientation:upright;line-height:1.05;
  box-shadow:inset 0 0 0 1px rgba(255,240,215,.24)}
.brand-word{font-size:19px;letter-spacing:.26em;color:var(--text-strong);text-indent:.26em}
.top-loc{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;letter-spacing:.16em;color:var(--text-dim)}
.top-room{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
.top-sep{color:var(--gold);opacity:.5}
.top-region{color:var(--text-faint);white-space:nowrap}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.phase{font-size:11px;letter-spacing:.2em;color:var(--text-dim);padding:2px 8px;border:1px solid var(--hairline);border-radius:2px;white-space:nowrap}
.conn{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.14em;color:var(--text-dim);
  padding:3px 8px;border:1px solid var(--hairline);border-radius:2px;white-space:nowrap}
.conn-dot{width:5px;height:5px;border-radius:50%;background:var(--text-faint);box-shadow:0 0 0 0 transparent}
.conn[data-state="live"]{color:var(--k-heal);border-color:rgba(124,196,127,.3)}
.conn[data-state="live"] .conn-dot{background:var(--k-heal);animation:dotPulse 2.4s infinite}
.conn[data-state="mock"]{color:var(--gold);border-color:var(--panel-border-strong)}
.conn[data-state="mock"] .conn-dot{background:var(--gold)}
.conn[data-state="reconnecting"]{color:var(--k-combat);border-color:rgba(230,150,90,.35)}
.conn[data-state="reconnecting"] .conn-dot{background:var(--k-combat);animation:dotPulse 1s infinite}
.conn[data-state="offline"]{color:var(--k-error);border-color:rgba(240,122,106,.32)}
.conn[data-state="offline"] .conn-dot{background:var(--k-error)}
.icon-btn{width:30px;height:30px;display:grid;place-items:center;font-size:12px;color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:2px;transition:all .2s var(--ease)}
.icon-btn:hover{color:var(--gold);border-color:var(--panel-border-strong);background:rgba(201,162,39,.07)}

.leftcol{grid-area:left;min-height:0;display:flex;flex-direction:column}
.center{grid-area:center;min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.rightcol{grid-area:right;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.scene-strip{display:none}
.tabbar{display:none}

/* ---------- 7. 角色面板 ---------- */
.pane-char{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.char-top{display:flex;align-items:center;gap:12px;padding:14px 12px 4px}
.avatar{position:relative;flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 26%,rgba(201,162,39,.2),rgba(0,0,0,.34) 70%);
  border:1px solid var(--panel-border-strong);box-shadow:inset 0 0 16px rgba(0,0,0,.5),0 0 0 4px var(--slot-bg)}
.avatar::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px dashed var(--hairline);
  animation:slowSpin 46s linear infinite}
.avatar-emblem{font-size:25px;color:var(--gold);text-shadow:0 0 14px rgba(201,162,39,.35)}
.char-id{min-width:0}
.char-name{display:flex;align-items:baseline;gap:7px;font-size:18px;letter-spacing:.13em;color:var(--text-strong);line-height:1.4}
.lv-badge{font-size:9.5px;font-weight:400;letter-spacing:.08em;color:var(--gold);border:1px solid var(--panel-border-strong);
  padding:0 5px;line-height:1.7;border-radius:2px;white-space:nowrap}
.char-sect{font-size:11.5px;letter-spacing:.1em;color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-sub{font-size:10px;letter-spacing:.14em;color:var(--text-faint);margin-top:1px}
.bars{padding:10px 12px 0}
.bar{margin-bottom:9px}
.bar:last-child{margin-bottom:0}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:10px;letter-spacing:.14em;color:var(--text-dim);margin-bottom:3px}
.bar-top b{font-weight:400;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:10.5px}
.bar-track{position:relative;height:7px;background:var(--track);border:1px solid var(--hairline);border-radius:1px;overflow:hidden}
.bar-fill{position:relative;height:100%;width:0;background:var(--grad-hp);transition:width .6s var(--ease);overflow:hidden}
.bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 46%,transparent 70%);
  transform:translateX(-100%);animation:sheen 4.6s var(--ease) infinite}
.bar.qi .bar-fill{background:var(--grad-qi)}
.bar.exp .bar-fill{background:var(--grad-exp)}
.bar.enemy .bar-fill{background:var(--grad-enemy)}
.bar.hp.low .bar-fill{background:var(--grad-hp-low);animation:lowPulse 1.6s ease-in-out infinite}
.attr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:12px 12px 0;background:var(--hairline);border:1px solid var(--hairline);border-radius:2px;overflow:hidden}
.attr{background:var(--panel-solid);padding:7px 3px 6px;text-align:center}
.attr b{display:block;font-size:15.5px;font-weight:500;color:var(--text-strong);line-height:1.35;font-variant-numeric:tabular-nums}
.attr span{display:block;font-size:9px;letter-spacing:.2em;color:var(--text-faint)}
.sec-label{display:flex;align-items:center;gap:7px;padding:13px 12px 6px;font-size:10px;letter-spacing:.3em;color:var(--gold);opacity:.9}
.sec-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hairline),transparent)}
.sec-label.tight{padding:10px 0 6px;letter-spacing:.24em;opacity:.8}
.equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px}
.equip-slot{display:flex;flex-direction:column;gap:1px;padding:6px 8px;min-height:48px;justify-content:center;
  border:1px dashed var(--hairline);border-radius:2px;background:var(--slot-bg);text-align:left;
  transition:border-color .2s,background .2s;min-width:0}
.equip-slot.has{border-style:solid;border-color:var(--panel-border)}
.equip-slot:not(.has){cursor:default}
.equip-slot:hover{border-color:var(--panel-border-strong)}
.equip-slot.has:hover{background:rgba(201,162,39,.06)}
.slot-label{font-size:8.5px;letter-spacing:.22em;color:var(--text-faint)}
.equip-name{font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.equip-name.is-empty{color:var(--text-faint);font-size:11px}
.char-stats{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 12px 14px;font-size:10px;letter-spacing:.1em;color:var(--text-faint)}
.char-stats b{font-weight:400;color:var(--text-dim);font-variant-numeric:tabular-nums}
.meditate-flag{display:inline-flex;align-items:center;gap:5px;color:var(--k-heal)}
.meditate-flag .pulse{width:5px;height:5px;border-radius:50%;background:var(--k-heal);animation:dotPulse 1.8s infinite}

/* ---------- 8. 叙事日志 ---------- */
.logwrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.log-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 7px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
.log-title{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.3em;color:var(--gold)}
.brush-dot{width:6px;height:6px;border-radius:50%;background:var(--cinnabar);box-shadow:0 0 10px 1px rgba(176,58,46,.5);animation:dotPulse 3.2s infinite}
.log-tools{display:flex;gap:6px}
.log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 30px;
  font-size:14.5px;line-height:1.95;letter-spacing:.02em}
.log-line{display:flex;align-items:flex-start;gap:7px;padding:1.5px 0;animation:lineIn .28s var(--ease) both}
.log-line .ln-icon{flex:0 0 13px;width:13px;text-align:center;font-size:10.5px;line-height:1.95;opacity:.85;user-select:none}
.log-line .ln-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:break-word}
.k-narr .ln-text{color:var(--k-narr)}
.k-room .ln-text{color:var(--k-room);font-size:15px;letter-spacing:.1em;font-weight:600}
.k-room{padding-top:7px;padding-bottom:3px}
.k-room .ln-text::before{content:"「";opacity:.4}
.k-room .ln-text::after{content:"」";opacity:.4}
.k-combat .ln-text{color:var(--k-combat)}
.k-dmg .ln-text{color:var(--k-dmg)}
.k-heal .ln-text{color:var(--k-heal)}
.k-gain .ln-text{color:var(--k-gain)}
.k-item .ln-text{color:var(--k-item)}
.k-quest .ln-text{color:var(--k-quest)}
.k-level .ln-text{color:var(--k-level);font-weight:600;letter-spacing:.06em;text-shadow:0 0 18px rgba(242,221,147,.3)}
.k-npc .ln-text{color:var(--k-npc)}
.k-sys .ln-text{color:var(--k-sys);font-size:12.5px;letter-spacing:.1em}
.k-error .ln-text{color:var(--k-error);font-weight:600}
.k-hint .ln-text{color:var(--k-hint);font-size:13px}
.k-ambient .ln-text{color:var(--k-ambient);font-style:italic;font-size:13px;letter-spacing:.06em;opacity:.9}
.k-death .ln-text{color:var(--k-death);font-weight:600;letter-spacing:.14em}
.k-title .ln-text{color:var(--k-title);letter-spacing:.12em}
.k-narr .ln-icon::before{content:"·"}
.k-room .ln-icon::before{content:"⌂"}
.k-combat .ln-icon::before{content:"⚔"}
.k-dmg .ln-icon::before{content:"✦"}
.k-heal .ln-icon::before{content:"✚"}
.k-gain .ln-icon::before{content:"❖"}
.k-item .ln-icon::before{content:"◈"}
.k-quest .ln-icon::before{content:"❑"}
.k-level .ln-icon::before{content:"✧"}
.k-npc .ln-icon::before{content:"☰"}
.k-sys .ln-icon::before{content:"·"}
.k-error .ln-icon::before{content:"⊘"}
.k-hint .ln-icon::before{content:"❯"}
.k-ambient .ln-icon::before{content:"〜"}
.k-death .ln-icon::before{content:"✝"}
.k-title .ln-icon::before{content:"✪"}
.log-line.echo{padding-top:5px;padding-bottom:1px}
.log-line.echo .ln-icon::before{content:"❯"}
.log-line.echo .ln-icon{color:var(--k-cmd);opacity:.9}
.log-line.echo .ln-text{color:var(--text-strong);letter-spacing:.06em}
.log-line.divider{padding:8px 0 4px}
.log-line.divider .ln-text{height:1px;background:linear-gradient(90deg,var(--hairline),transparent 72%);font-size:0;line-height:0}
.log-line{cursor:default;border-radius:1px}
.log-line.is-picked{background:linear-gradient(90deg,rgba(201,162,39,.1),rgba(201,162,39,.02) 60%,transparent);box-shadow:inset 2px 0 0 var(--gold)}
.log-line.is-picked .ln-text{color:var(--text-strong)}
.ln-text.typing::after{content:"▏";margin-left:1px;color:var(--gold);opacity:.7;animation:blink .9s steps(2) infinite}

/* ---------- 9. 战斗 ---------- */
.combat-dock{flex:0 0 auto;border-top:1px solid var(--panel-border);padding:10px 14px 11px;
  background:linear-gradient(180deg,rgba(176,58,46,.09),rgba(176,58,46,.02));position:relative;
  box-shadow:0 -16px 26px -20px rgba(0,0,0,.9)}
.combat-dock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--cinnabar),transparent)}
.combat-head{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.2em;color:var(--k-combat);margin-bottom:7px}
.combat-head .round{color:var(--text-dim)}
.combat-head .cd{margin-left:auto;color:var(--text-faint);letter-spacing:.1em}
.enemy-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:5px}
.enemy-name{color:var(--text-strong);letter-spacing:.1em}
.enemy-name .lv{font-size:10px;color:var(--k-combat);margin-left:6px;letter-spacing:.06em}
.enemy-hp{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.enemy-bar{margin-bottom:10px}
.combat-actions{display:flex;flex-wrap:wrap;gap:6px}
.cbt-btn{padding:6px 14px;font-size:12.5px;letter-spacing:.18em;border:1px solid var(--panel-border-strong);border-radius:2px;
  color:var(--text-strong);background:var(--slot-bg);transition:all .18s var(--ease)}
.cbt-btn:hover{background:rgba(201,162,39,.12);border-color:var(--gold);color:var(--gold)}
.cbt-btn.attack{background:linear-gradient(180deg,rgba(176,58,46,.9),rgba(133,40,31,.9));color:#f7ecd8;border-color:rgba(201,162,39,.45)}
.cbt-btn.attack:hover{filter:brightness(1.1);color:#fff}
.cbt-btn.flee{color:var(--text-dim)}
.cbt-btn.skill{font-size:11.5px;letter-spacing:.1em;padding:5px 10px;display:inline-flex;align-items:center;gap:6px}
.cbt-btn.skill .cost{font-size:9.5px;color:var(--cyan);opacity:.9}
.cbt-btn.skill:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.5)}
.cbt-btn.skill:disabled:hover{background:var(--slot-bg);color:var(--text-strong);border-color:var(--panel-border-strong)}
.combat-skills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--hairline)}
.combat-skills-label{font-size:9px;letter-spacing:.24em;color:var(--text-faint);width:100%}

/* ---------- 10. 指令栏 ---------- */
.cmdwrap{grid-area:cmd;display:flex;flex-direction:column;gap:7px;min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:1px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:4px 11px;font-size:11.5px;letter-spacing:.14em;color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:999px;background:var(--slot-bg);transition:all .18s var(--ease);white-space:nowrap}
.chip:hover{color:var(--gold);border-color:var(--panel-border-strong);background:rgba(201,162,39,.09)}
.chip.hot{color:var(--cinnabar-soft);border-color:rgba(176,58,46,.4)}
.chip.hot:hover{color:#f2d9c6;background:rgba(176,58,46,.22);border-color:rgba(176,58,46,.7)}
.cmd-form{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(7px);transition:border-color .25s,box-shadow .25s}
.cmd-form:focus-within{border-color:var(--panel-border-strong);box-shadow:0 0 0 1px rgba(201,162,39,.14),0 12px 26px -22px #000}
.cmd-mark{color:var(--gold);font-size:14px;line-height:1;opacity:.85;animation:blink 2.4s steps(2) infinite}
#cmd-input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:14.5px;letter-spacing:.1em;
  color:var(--text-strong);padding:5px 0}
#cmd-input::placeholder{color:var(--text-faint);font-size:13px;letter-spacing:.08em}
.cmd-send{flex:0 0 auto;width:42px;height:32px;display:grid;place-items:center;font-size:14px;
  color:var(--seal-text);background:linear-gradient(180deg,rgba(176,58,46,.95),rgba(133,40,31,.95));
  border:1px solid rgba(201,162,39,.35);border-radius:2px;letter-spacing:0;transition:filter .2s,transform .12s}
.cmd-send:hover{filter:brightness(1.12)}
.cmd-send:active{transform:translateY(1px)}
.cmd-form.shake{animation:shake .36s ease;border-color:var(--cinnabar)}

/* ---------- 11. 场景面板 ---------- */
.pane-scene{flex:0 0 auto;overflow:hidden}
.room-block{padding:11px 12px 12px}
.room-name{display:flex;align-items:baseline;gap:8px;font-size:19px;letter-spacing:.14em;color:var(--text-strong);line-height:1.4}
.room-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:10px;letter-spacing:.16em;color:var(--text-faint)}
.room-meta .region{color:var(--gold);opacity:.85}
.room-desc{margin-top:9px;font-size:12.8px;line-height:1.85;color:var(--text);opacity:.94;text-align:justify}
.exits-compass{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);
  grid-template-areas:"nw n ne" "w c e" "sw s se";gap:4px;margin-top:12px}
.exit-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-height:34px;padding:3px 2px;border:1px solid var(--hairline);border-radius:2px;background:var(--slot-bg);
  transition:all .18s var(--ease);min-width:0;overflow:hidden}
.exit-cell:hover{border-color:var(--panel-border-strong);background:rgba(201,162,39,.1);transform:translateY(-1px)}
.exit-cell .dir{font-size:11.5px;letter-spacing:.1em;color:var(--text)}
.exit-cell .dest{max-width:100%;font-size:8.5px;letter-spacing:0;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.exit-cell.locked{opacity:.45;cursor:not-allowed}
.exit-cell.locked:hover{transform:none;background:var(--slot-bg);border-color:var(--hairline)}
.exit-cell[data-dir="north"]{grid-area:n}.exit-cell[data-dir="south"]{grid-area:s}
.exit-cell[data-dir="east"]{grid-area:e}.exit-cell[data-dir="west"]{grid-area:w}
.exit-cell[data-dir="northeast"]{grid-area:ne}.exit-cell[data-dir="northwest"]{grid-area:nw}
.exit-cell[data-dir="southeast"]{grid-area:se}.exit-cell[data-dir="southwest"]{grid-area:sw}
.compass-center{grid-area:c;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.2em;color:var(--text-faint);border:1px dashed var(--hairline);border-radius:50%;
  aspect-ratio:1;min-height:34px;text-align:center;line-height:1.3}
.compass-center b{font-weight:400;font-size:11px;color:var(--gold);letter-spacing:.1em}
.exit-extra{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.exit-extra .exit-cell{flex:1 1 auto;min-height:28px;flex-direction:row;gap:5px;padding:2px 8px}
.exit-extra .exit-cell .dir{font-size:10.5px}
.exit-extra .exit-cell .dest{font-size:9px;max-width:70px}
.scene-sec{padding:0 12px 12px}
.npc-list,.item-list{display:flex;flex-direction:column;gap:4px}
.npc-row{display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--hairline);border-radius:2px;
  background:var(--slot-bg);transition:border-color .18s,background .18s}
.npc-row:hover{border-color:var(--panel-border-strong)}
.npc-main{flex:1;display:flex;align-items:center;gap:7px;min-width:0;text-align:left;padding:1px 0}
.npc-dot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--k-item)}
.npc-dot.mob{background:var(--k-combat)}
.npc-dot.boss{background:var(--k-death);box-shadow:0 0 8px rgba(209,72,58,.7)}
.npc-name{font-size:12.5px;letter-spacing:.06em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npc-lv{font-size:9.5px;color:var(--text-faint);letter-spacing:.04em;white-space:nowrap}
.npc-kind{margin-left:auto;font-size:9px;letter-spacing:.1em;color:var(--text-faint);white-space:nowrap}
.npc-acts{display:flex;gap:3px;flex:0 0 auto}
.npc-act{padding:2px 7px;font-size:10px;letter-spacing:.06em;color:var(--text-dim);border:1px solid var(--hairline);border-radius:2px;transition:all .16s}
.npc-act:hover{color:var(--gold);border-color:var(--panel-border-strong)}
.npc-act.fight{color:var(--k-combat)}
.npc-act.fight:hover{color:#f7ecd8;background:rgba(176,58,46,.72);border-color:rgba(176,58,46,.9)}
.item-row{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px dashed var(--hairline);border-radius:2px;
  background:transparent;transition:all .18s;text-align:left;width:100%}
.item-row:hover{border-color:var(--panel-border-strong);background:rgba(201,162,39,.06)}
.item-glyph{flex:0 0 auto;font-size:11px;color:var(--k-item);opacity:.85}
.item-name{font-size:12px;letter-spacing:.04em;color:var(--text)}
.item-hint{margin-left:auto;font-size:9.5px;letter-spacing:.1em;color:var(--text-faint);white-space:nowrap}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:10px;letter-spacing:.16em;color:var(--text-faint)}
.shop-head b{font-weight:400;color:var(--gold);letter-spacing:.1em}
.shop-row{display:flex;align-items:center;gap:7px;padding:5px 7px;border-bottom:1px dotted var(--hairline)}
.shop-row:last-child{border-bottom:0}
.shop-name{font-size:12px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-price{font-size:10.5px;color:var(--k-gain);letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
.buy-btn{margin-left:auto;padding:2px 8px;font-size:10px;letter-spacing:.06em;color:var(--gold);border:1px solid var(--panel-border-strong);border-radius:2px;transition:all .16s}
.buy-btn:hover{background:rgba(201,162,39,.14)}
.sold-out{font-size:9.5px;color:var(--text-faint)}

/* ---------- 12. 任务面板 ---------- */
.pane-quest{flex:0 0 auto;overflow:hidden}
.quest-block{padding:9px 12px 12px;display:flex;flex-direction:column;gap:7px}
.qcard{position:relative;padding:8px 9px 9px 11px;border:1px solid var(--hairline);border-radius:2px;background:var(--slot-bg)}
.qcard::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--cinnabar);opacity:.75;border-radius:2px}
.qcard.avail::before{background:var(--gold)}
.q-top{display:flex;align-items:center;gap:6px}
.q-name{font-size:12.5px;letter-spacing:.06em;color:var(--text-strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-type{font-size:9px;letter-spacing:.1em;color:var(--k-quest);border:1px solid currentColor;padding:0 4px;border-radius:2px;opacity:.85;white-space:nowrap}
.q-type.side{color:var(--k-item)}
.q-type.bounty{color:var(--k-combat)}
.q-giver{font-size:9.5px;color:var(--text-faint);margin-top:2px;letter-spacing:.06em}
.q-hint{font-size:10.5px;color:var(--text-dim);margin-top:4px;line-height:1.6}
.q-objs{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.q-obj{display:flex;align-items:flex-start;gap:6px;font-size:10.8px;line-height:1.55;color:var(--text-dim)}
.q-obj .mk{flex:0 0 11px;width:11px;height:11px;margin-top:2px;border:1px solid var(--panel-border-strong);border-radius:1px;font-size:8px;display:grid;place-items:center;line-height:1}
.q-obj.done{color:var(--text-faint);text-decoration:line-through;text-decoration-color:rgba(124,196,127,.45)}
.q-obj.done .mk{background:rgba(124,196,127,.2);border-color:var(--k-heal);color:var(--k-heal)}
.q-obj .oc{margin-left:auto;font-size:9.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-act{align-self:flex-start;margin-top:7px;padding:3px 12px;font-size:10.5px;letter-spacing:.14em;
  border:1px solid var(--panel-border-strong);border-radius:2px;color:var(--gold);transition:all .18s}
.q-act:hover{background:rgba(201,162,39,.12)}
.q-act.ready{color:var(--seal-text);background:linear-gradient(180deg,rgba(176,58,46,.92),rgba(133,40,31,.92));border-color:rgba(201,162,39,.4)}
.q-done-line{font-size:10px;letter-spacing:.1em;color:var(--text-faint);padding-top:2px}
.q-done-line b{font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- 13. 行囊 / 武学 ---------- */
.pane-bag{flex:0 0 auto;overflow:hidden}
.bag-tabs{display:flex;gap:0;padding:0 6px;border-bottom:1px solid var(--hairline);background:var(--panel-head-bg);position:sticky;top:0;z-index:4}
.bag-tab{position:relative;padding:8px 12px 7px;font-size:11px;letter-spacing:.24em;color:var(--text-faint);transition:color .2s}
.bag-tab:hover{color:var(--text)}
.bag-tab.is-active{color:var(--gold)}
.bag-tab.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:1.5px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.bag-tab .cnt{font-size:9px;margin-left:4px;color:var(--text-faint);letter-spacing:0}
.bag-body{padding:8px 10px 12px;max-height:min(38vh,340px);overflow-y:auto;overscroll-behavior:contain}
.inv-row{display:flex;align-items:center;gap:7px;padding:5px 6px;border-bottom:1px dotted var(--hairline);min-width:0}
.inv-row:last-child{border-bottom:0}
.inv-row.quest{opacity:.9}
.inv-glyph{flex:0 0 auto;width:16px;text-align:center;font-size:11px;color:var(--k-item)}
.inv-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:0}
.inv-name{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}
.inv-name .eq{color:var(--k-heal);font-size:9px;margin-left:5px;letter-spacing:.06em}
.inv-name .eq.todo{color:var(--cinnabar);opacity:.95}
.inv-row.can-equip{background:linear-gradient(90deg,rgba(201,162,39,.06),transparent 72%)}
.bag-note{margin:0 0 7px;padding:5px 7px;font-size:10px;letter-spacing:.06em;line-height:1.6;
  color:var(--k-hint);border-left:2px solid rgba(201,162,39,.5);background:rgba(201,162,39,.045)}
.inv-sub{font-size:9px;color:var(--text-faint);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-cnt{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.inv-acts{display:flex;gap:2px;flex:0 0 auto}
.inv-act{padding:1.5px 6px;font-size:9.5px;letter-spacing:.04em;color:var(--text-dim);border:1px solid var(--hairline);border-radius:2px;transition:all .16s;white-space:nowrap}
.inv-act:hover{color:var(--gold);border-color:var(--panel-border-strong);background:rgba(201,162,39,.08)}
.inv-act.use{color:var(--k-heal)}
.inv-act.sell{color:var(--k-gain)}
.skill-row{padding:6px 6px 7px;border-bottom:1px dotted var(--hairline);display:flex;align-items:flex-start;gap:7px}
.skill-row:last-child{border-bottom:0}
.skill-row.locked{opacity:.55}
.sk-main{min-width:0;flex:1}
.sk-top{display:flex;align-items:baseline;gap:6px}
.sk-name{font-size:12.2px;color:var(--text);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-lv{font-size:9.5px;color:var(--gold);white-space:nowrap}
.sk-meta{display:flex;gap:8px;margin-top:1px;font-size:9px;color:var(--text-faint);letter-spacing:.04em;flex-wrap:wrap}
.sk-meta .cost{color:var(--cyan)}
.sk-desc{font-size:10px;color:var(--text-dim);margin-top:2px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-act{flex:0 0 auto;padding:2px 7px;font-size:9.5px;color:var(--text-dim);border:1px solid var(--hairline);border-radius:2px;transition:all .16s}
.sk-act:hover{color:var(--gold);border-color:var(--panel-border-strong)}
.sk-act:disabled{opacity:.4;cursor:not-allowed}
.sk-act:disabled:hover{color:var(--text-dim);border-color:var(--hairline)}

/* ---------- 14. 江湖榜入口 ---------- */
.rank-entry{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--panel-border);
  border-radius:var(--radius);background:var(--panel-bg);color:var(--text-dim);text-align:left;transition:all .2s var(--ease);box-shadow:var(--shadow-md)}
.rank-entry span{font-size:12px;letter-spacing:.28em;color:var(--gold)}
.rank-entry em{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--text-faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-entry b{margin-left:auto;font-weight:400;font-size:15px;color:var(--text-faint);transition:transform .2s,color .2s}
.rank-entry:hover{border-color:var(--panel-border-strong);background:rgba(201,162,39,.07)}
.rank-entry:hover b{transform:translateX(3px);color:var(--gold)}

/* ---------- 15. 浮层：Toast / Float / Modal / Death ---------- */
.toast-layer{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,460px)}
.toast{padding:7px 16px;font-size:12px;letter-spacing:.1em;color:var(--text-strong);background:var(--panel-head-bg);
  border:1px solid var(--panel-border-strong);border-left:2px solid var(--gold);border-radius:2px;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);animation:toastIn .3s var(--ease) both}
.toast.error{border-left-color:var(--k-error);color:var(--k-error)}
.toast.quest{border-left-color:var(--k-quest)}
.toast.good{border-left-color:var(--k-heal)}
.toast.out{animation:toastOut .3s var(--ease) forwards}

.float-layer{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:min(90vw,520px)}
.float{font-size:17px;letter-spacing:.14em;color:var(--k-level);text-shadow:0 0 26px rgba(242,221,147,.45),0 2px 10px #000;animation:floatUp 2.1s var(--ease) forwards;white-space:nowrap}
.float.gain{color:var(--k-gain);font-size:14px}
.float.item{color:var(--k-item);font-size:14px}
.float.quest{color:var(--k-quest);font-size:15px}
.float.title{color:var(--k-title)}
.float small{display:block;text-align:center;font-size:10px;letter-spacing:.3em;opacity:.75;margin-top:2px}

.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-mask{position:absolute;inset:0;background:rgba(6,8,7,.66);backdrop-filter:blur(3px);animation:fadeIn .25s ease}
.modal-card{position:relative;width:min(560px,100%);max-height:min(82dvh,720px);overflow:auto;padding:18px 20px 20px;
  animation:modalIn .32s var(--ease) both;box-shadow:var(--shadow-lg)}
.modal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.modal-title{font-size:17px;letter-spacing:.28em;color:var(--text-strong)}
.modal-sub{font-size:10px;letter-spacing:.2em;color:var(--text-faint)}
.modal-close{position:absolute;top:8px;right:10px;width:26px;height:26px;display:grid;place-items:center;font-size:13px;color:var(--text-dim);transition:color .2s}
.modal-close:hover{color:var(--gold)}
.rank-list{margin-top:8px;display:flex;flex-direction:column}
.rank-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px dotted var(--hairline)}
.rank-row:last-child{border-bottom:0}
.rank-no{font-size:12px;color:var(--text-faint);text-align:center;font-variant-numeric:tabular-nums}
.rank-row.top1 .rank-no{color:var(--gold);font-size:15px}
.rank-row.top2 .rank-no{color:var(--text-strong);font-size:14px}
.rank-row.top3 .rank-no{color:var(--cinnabar-soft);font-size:14px}
.rank-main{min-width:0}
.rank-name{font-size:13.5px;letter-spacing:.1em;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-name .me{color:var(--gold);font-size:9px;border:1px solid var(--panel-border-strong);padding:0 4px;margin-left:6px;border-radius:2px}
.rank-sub{font-size:10px;color:var(--text-faint);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-val{text-align:right;font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-val b{display:block;font-weight:400;font-size:12.5px;color:var(--gold)}
.rank-val span{font-size:9.5px;color:var(--text-faint)}
.modal-note{margin-top:12px;font-size:10.5px;line-height:1.7;color:var(--text-faint);letter-spacing:.06em;text-align:center}
.confirm-actions{display:flex;gap:8px;margin-top:16px}
.confirm-actions .btn-primary{margin-top:0;flex:1;letter-spacing:.2em;text-indent:.2em;font-size:13px;padding:10px}
.btn-ghost{flex:1;padding:10px;font-size:13px;letter-spacing:.2em;border:1px solid var(--hairline);border-radius:2px;color:var(--text-dim);transition:all .2s}
.btn-ghost:hover{color:var(--text);border-color:var(--panel-border-strong)}

.death{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(52,10,8,.82),rgba(4,3,3,.96));
  animation:fadeIn .5s ease;padding:20px}
.death-inner{text-align:center;max-width:440px;animation:deathIn 1.2s var(--ease) both}
.death-seal{width:66px;height:66px;margin:0 auto 20px;display:grid;place-items:center;font-size:30px;color:#f0d9bd;
  background:linear-gradient(150deg,rgba(140,29,18,.95),rgba(70,10,6,.95));border:1px solid rgba(201,162,39,.35);
  box-shadow:inset 0 0 0 2px rgba(255,240,215,.14),0 0 40px rgba(140,29,18,.5);transform:rotate(-5deg)}
.death-title{font-size:clamp(28px,5vw,42px);letter-spacing:.36em;text-indent:.36em;color:#e8d3b5;margin-bottom:14px;writing-mode:horizontal-tb}
.death-text{font-size:13px;line-height:2.1;letter-spacing:.12em;color:rgba(232,211,181,.7);margin-bottom:8px}
.death .btn-primary{max-width:200px;margin:20px auto 0}

.noscript{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg-0);color:var(--text);z-index:99;font-size:15px;letter-spacing:.1em}

/* ---------- 16. 动画 ---------- */
@keyframes lineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(14px) scale(.94)}18%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@keyframes blink{50%{opacity:0}}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes sheen{0%,55%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
@keyframes lowPulse{0%,100%{opacity:1}50%{opacity:.66}}
@keyframes dotShadow{0%,100%{box-shadow:0 0 0 0 rgba(124,196,127,.4)}50%{box-shadow:0 0 0 5px rgba(124,196,127,0)}}
@keyframes moonBreath{0%,100%{opacity:.88;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@keyframes mistDrift{0%{transform:translateX(-6%)}50%{transform:translateX(6%)}100%{transform:translateX(-6%)}}
@keyframes birdsDrift{0%{transform:translate(0,0)}100%{transform:translate(-26px,-10px)}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(3px)}80%{transform:translateX(-2px)}}
@keyframes inkIn{from{opacity:0;filter:blur(6px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes deathIn{from{opacity:0;transform:scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes stripIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 17. 响应式 ---------- */
@media (max-width:1180px){
  .game{grid-template-columns:248px minmax(0,1fr) 312px;gap:9px 11px;padding:0 12px 12px}
  .log{font-size:14px;padding:10px 13px 16px}
  .exits-compass{grid-template-rows:repeat(3,auto)}
}
@media (max-width:1000px) and (min-width:900px){
  .game{grid-template-columns:230px minmax(0,1fr) 290px}
}

/* 移动端 */
@media (max-width:899px){
  body{font-size:14px}
  .screen{position:fixed}
  /* 登录 */
  .login{display:block;padding:0;overflow-y:auto}
  .login-layout{display:flex;flex-direction:column;gap:14px;width:100%;min-height:100%;padding:22px 16px calc(20px + env(safe-area-inset-bottom))}
  .login-hero{align-items:center;min-height:0;padding:4px 0 0;order:0;gap:10px}
  .hero-inner{flex-direction:column;align-items:center;gap:8px}
  .hero-title{writing-mode:horizontal-tb;font-size:clamp(38px,11vw,52px);letter-spacing:.3em;text-indent:.3em;line-height:1.1;flex-direction:row}
  .hero-sub{writing-mode:horizontal-tb;padding-top:0;font-size:11px;letter-spacing:.28em;display:block;text-align:center;line-height:1.8}
  .hero-meta{font-size:9px;letter-spacing:.22em;gap:8px}
  .hero-line{width:32px}
  .login-card{order:1;width:100%;max-height:none;padding:20px 17px 18px}
  .seal-login{top:14px;right:14px;width:44px;height:44px;font-size:15px}
  .login-kicker{padding-right:52px}
  .login-h{font-size:23px}
  .field{margin-top:16px}
  .field input{font-size:19px}
  .sect-label{margin:14px 0 8px}
  .sect-grid{gap:6px}
  .sect-card{padding:6px 7px;gap:2px}
  .sect-top{gap:6px}
  .sect-emblem{flex-basis:26px;width:26px;height:26px;font-size:13px}
  .sect-name{font-size:12px}
  .sect-title{font-size:8.5px}
  .sect-desc{display:none}
  .btn-primary{padding:12px;font-size:14px;margin-top:14px}
  .login-foot{font-size:9px;letter-spacing:.08em;line-height:1.7;margin-top:12px}

  /* 主界面 */
  .game{display:flex;flex-direction:column;height:100dvh;padding:0;gap:0}
  .topbar{padding:7px 10px;gap:8px;flex:0 0 auto;border-bottom:1px solid var(--hairline)}
  .brand{gap:5px}
  .brand-seal{width:24px;height:24px;font-size:8px}
  .brand-word{font-size:15px;letter-spacing:.18em;text-indent:.18em}
  .top-loc{font-size:10px;letter-spacing:.08em;gap:4px;min-width:0}
  .top-room{max-width:26vw}
  .top-right{gap:4px}
  .phase{display:none}
  .conn{padding:2px 6px;font-size:8.5px;letter-spacing:.02em;gap:4px}
  .conn-text{display:inline}
  .icon-btn{width:26px;height:26px;font-size:11px}
  .leftcol{display:contents}
  .rightcol{display:contents}
  .center{display:none;flex:1 1 auto;min-height:0;padding:0 8px;order:1;gap:6px}
  body[data-tab="world"] .center{display:flex}
  #pane-char,#pane-scene,#pane-quest,#pane-bag{display:none}
  .pane-char,.pane-quest,.pane-bag{flex:1 1 auto;min-height:0;overflow-y:auto;order:2;margin:8px;border-radius:3px}
  .pane-scene{display:none!important}
  body[data-tab="char"] #pane-char{display:flex;flex-direction:column}
  body[data-tab="quest"] #pane-quest{display:flex;flex-direction:column}
  body[data-tab="bag"] #pane-bag{display:flex;flex-direction:column}
  .pane-char .panel-body,.pane-quest .panel-body,.pane-bag .panel-body{padding-bottom:16px}
  .scene-strip{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px 10px;
    background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:3px;
    overflow-x:auto;scrollbar-width:none;animation:stripIn .3s var(--ease)}
  .scene-strip::-webkit-scrollbar{display:none}
  .strip-room{font-size:13px;letter-spacing:.1em;color:var(--text-strong);white-space:nowrap}
  .strip-region{font-size:9px;letter-spacing:.1em;color:var(--gold);white-space:nowrap;opacity:.85}
  .strip-exits{display:flex;gap:4px;margin-left:auto}
  .strip-exit{flex:0 0 auto;padding:2px 8px;font-size:10.5px;letter-spacing:.06em;color:var(--text);border:1px solid var(--hairline);border-radius:2px;background:var(--slot-bg);white-space:nowrap}
  .strip-exit:hover{border-color:var(--panel-border-strong);color:var(--gold)}
  .logwrap{flex:1;min-height:0;border-radius:3px}
  .log-head{padding:7px 10px 6px}
  .log-title{font-size:11px;letter-spacing:.24em}
  .log-tools .mini-btn:first-child{display:none}
  .log{font-size:14px;line-height:1.9;padding:10px 12px 14px}
  .k-room .ln-text{font-size:14px}
  .k-ambient .ln-text,.k-sys .ln-text{font-size:12px}
  .combat-dock{padding:8px 11px 9px}
  .combat-actions{gap:5px}
  .cbt-btn{padding:6px 12px;font-size:12px}
  .cmdwrap{order:5;flex:0 0 auto;gap:5px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--panel-head-bg);border-top:1px solid var(--hairline);z-index:12}
  .chips{gap:5px}
  .chip{padding:3px 9px;font-size:10.5px}
  .cmd-form{padding:5px 5px 5px 11px;gap:8px}
  #cmd-input{font-size:16px;padding:5px 0}
  #cmd-input::placeholder{font-size:12px}
  .cmd-send{width:44px;height:34px}
  .tabbar{order:6;flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--panel-border);background:var(--panel-head-bg);
    padding-bottom:env(safe-area-inset-bottom);z-index:10;backdrop-filter:blur(10px)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 0 6px;
    color:var(--text-faint);transition:color .2s;position:relative}
  .tab i{font-style:normal;font-size:16px;line-height:1.2;letter-spacing:0}
  .tab span{font-size:10px;letter-spacing:.14em}
  .tab.is-active{color:var(--gold)}
  .tab.is-active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:1.5px;background:var(--gold);box-shadow:0 0 9px var(--gold)}
  .rank-entry{order:4;margin:0 8px 8px;flex:0 0 auto}
  .toast-layer{bottom:calc(120px + env(safe-area-inset-bottom))}
  .float-layer{top:12%}
  .scene-strip .strip-exit{padding:2px 7px;font-size:10px}
  .modal-card{max-height:86dvh;padding:15px 15px 17px}
  .rank-row{grid-template-columns:24px minmax(0,1fr) auto;gap:7px;padding:7px 2px}
  .death-text{font-size:12px}
  .bag-body{max-height:none}
  .pane-bag .bag-body{max-height:calc(100dvh - 260px)}
}

@media (max-width:400px){
  .top-loc .top-sep,.top-region{display:none}
  .top-room{max-width:40vw}
  .sect-desc{-webkit-line-clamp:1}
  .brand-word{display:none}
  .icon-btn:nth-of-type(2){display:none}
}

@media (max-height:720px) and (min-width:900px){
  .char-top{padding-top:9px}
  .sec-label{padding-top:9px}
  .attr-grid{margin-top:8px}
  .exits-compass{grid-template-rows:repeat(3,auto)}
  .exit-cell{min-height:30px}
  .logwrap{min-height:0}
  .bag-body{max-height:min(26vh,230px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bg-mist{animation:none!important}
  .log{scroll-behavior:auto}
}