/* ============ 天空之成 · 暮色叙事界面 ============ */
:root{
  --night-950:#050b12;
  --night-900:#08111d;
  --night-850:#0b1725;
  --night-800:#102033;
  --night-700:#183049;
  --ink:#f3eee4;
  --ink-soft:#c7c3ba;
  --muted:#8f9bab;
  --gold:#e8b665;
  --gold-pale:#f3d7a2;
  --line:rgba(223,232,240,.14);
  --line-strong:rgba(232,182,101,.45);
  --glass:rgba(7,16,27,.64);
  --glass-solid:#0c1928;
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 22px 70px rgba(1,6,12,.46);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-ui:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --font-display:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--night-950);color:var(--ink)}
body{font-family:var(--font-ui);font-synthesis:none}
button{font:inherit;color:inherit}
button,.hotspot{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}

/* 开机 */
#boot{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--night-950);transition:opacity .55s var(--ease),visibility .55s}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
#boot.error .boot-mark{border-color:#d88678}
#boot p{margin:0;color:var(--muted);font-size:12px;letter-spacing:.24em}
.boot-mark,.title-mark{position:relative;width:54px;height:54px;border:1px solid rgba(232,182,101,.42);border-radius:50%;display:grid;place-items:center}
.boot-mark::before,.title-mark::before{content:"";width:13px;height:24px;border:1px solid var(--gold);border-radius:13px 13px 3px 3px}
.boot-mark span,.title-mark span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 20px var(--gold);animation:orbit 1.8s linear infinite}
@keyframes orbit{from{transform:rotate(0deg) translateY(-27px)}to{transform:rotate(360deg) translateY(-27px)}}

/* 漫游世界 */
#stage{position:fixed;inset:0;z-index:0;background:var(--night-950)}
#worldFallback{position:absolute;z-index:0;left:0;top:0;display:none;max-width:none;pointer-events:none;user-select:none;transform-origin:0 0}
#stage.file-world #worldFallback{display:block}
#game{position:relative;z-index:0;display:block;width:100%;height:100%;touch-action:none;outline:none}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(3,9,17,.16),transparent 26%,transparent 64%,rgba(3,8,14,.4)),radial-gradient(ellipse at center,transparent 48%,rgba(2,7,13,.44) 100%)}
#stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}

/* HUD */
#hud{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left));pointer-events:none;background:linear-gradient(180deg,rgba(3,9,16,.52),transparent)}
.hud-left{display:grid;justify-items:start;gap:10px;min-width:0;pointer-events:none}
.hud-brand,.hud-actions{display:flex;align-items:center;gap:10px;pointer-events:auto}
.hud-brand{min-width:0}
.brand-mark{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;background:rgba(7,16,27,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.brand-mark::before{content:"";width:10px;height:18px;border:1px solid var(--gold);border-radius:9px 9px 2px 2px}
.brand-mark i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.brand-copy{display:grid;min-width:0;text-shadow:0 2px 15px rgba(0,0,0,.75)}
.brand-copy b{font-size:15px;letter-spacing:.12em;font-weight:650}
.brand-copy small{margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.icon-btn,.progress-chip{height:44px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 35px rgba(1,7,14,.22)}
.icon-btn{cursor:pointer;border-radius:14px;display:flex;align-items:center;gap:9px;padding:0 15px;transition:transform .22s var(--ease),border-color .22s,background .22s;white-space:nowrap}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--line-strong);background:rgba(12,27,43,.8)}
.icon-btn:active{transform:translateY(1px) scale(.98)}
.icon-btn.icon-only{width:44px;padding:0;justify-content:center}
.icon-btn.accent{background:var(--gold);border-color:var(--gold);color:#18202b;font-weight:700}
.button-label{font-size:13px;letter-spacing:.06em}
.progress-chip{position:relative;border-radius:14px;padding:0 13px 0 42px;display:grid;align-content:center;min-width:92px}
.progress-chip b{font-size:13px;line-height:1;font-variant-numeric:tabular-nums}
.progress-chip small{font-size:9px;color:var(--muted);letter-spacing:.16em;margin-top:4px}
.progress-orbit{position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--gold) var(--progress,0%),rgba(255,255,255,.1) 0);mask:radial-gradient(transparent 48%,#000 50%);-webkit-mask:radial-gradient(transparent 48%,#000 50%)}
.progress-chip.flash{animation:progressFlash .55s var(--ease)}
@keyframes progressFlash{50%{border-color:var(--gold);transform:scale(1.04)}}

/* 庄园雷达 */
#radar{width:240px;overflow:hidden;border:1px solid rgba(232,182,101,.28);border-radius:16px;background:rgba(5,13,22,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 44px rgba(1,7,14,.34);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}
.radar-head{height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;border-bottom:1px solid rgba(232,182,101,.18);background:linear-gradient(90deg,rgba(232,182,101,.08),transparent)}
.radar-head span{display:flex;align-items:center;gap:7px;color:var(--gold-pale);font-size:9px;font-weight:700;letter-spacing:.16em;white-space:nowrap}
.radar-head span i{width:7px;height:7px;border:1px solid var(--gold);border-radius:50%;box-shadow:0 0 9px rgba(232,182,101,.55)}
.radar-head small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:8px;letter-spacing:.08em;white-space:nowrap}
.radar-map{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#08131f;isolation:isolate}
.radar-map::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(rgba(232,182,101,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(232,182,101,.09) 1px,transparent 1px),radial-gradient(circle at center,transparent 38%,rgba(3,9,16,.4));background-size:25% 50%,25% 50%,100% 100%}
.radar-map img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.55) contrast(1.1) brightness(.72);opacity:.9;user-select:none}
#radarCanvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* CSS 图标 */
.ui-icon{position:relative;display:block;width:17px;height:17px;flex:0 0 auto}
.icon-document{border:1.5px solid currentColor;border-radius:2px}
.icon-document::before{content:"";position:absolute;left:3px;right:3px;top:5px;height:1px;background:currentColor;box-shadow:0 4px 0 currentColor}
.icon-document::after{content:"";position:absolute;right:-1px;top:-1px;width:5px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;background:inherit}
.icon-help{border:1.5px solid currentColor;border-radius:50%}
.icon-help::before{content:"?";position:absolute;inset:-2px 0 0;display:grid;place-items:center;font-size:12px;font-weight:700}
.icon-arrow::before{content:"";position:absolute;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);left:2px;top:4px}
.icon-arrow::after{content:"";position:absolute;left:3px;right:1px;top:8px;height:1.5px;background:currentColor}
.icon-print{border:1.5px solid currentColor;border-radius:2px;top:5px;height:9px}
.icon-print::before{content:"";position:absolute;left:2px;right:2px;top:-6px;height:7px;border:1.5px solid currentColor;background:inherit}
.icon-print::after{content:"";position:absolute;left:3px;right:3px;bottom:-4px;height:5px;border:1.5px solid currentColor;background:inherit}
.icon-enter{border:1.5px solid currentColor;border-radius:50%}
.icon-enter::before{content:"";position:absolute;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);left:4px;top:5px}
.icon-pan::before,.icon-pan::after{content:"";position:absolute;top:8px;width:7px;height:7px;border-top:1px solid currentColor}
.icon-pan::before{left:0;border-left:1px solid currentColor;transform:rotate(-45deg)}
.icon-pan::after{right:0;border-right:1px solid currentColor;transform:rotate(45deg)}

/* 章节导航 */
#chapterRail{position:fixed;z-index:9;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));transform:translateX(-50%);display:flex;align-items:center;padding:6px;border:1px solid var(--line);border-radius:18px;background:rgba(6,14,24,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow)}
#chapterRail button{position:relative;min-width:76px;height:48px;border:0;border-radius:13px;background:transparent;cursor:pointer;color:var(--muted);display:grid;place-content:center;gap:3px;transition:color .25s,background .25s,transform .25s var(--ease)}
#chapterRail button:hover,#chapterRail button.active{color:var(--ink);background:rgba(255,255,255,.07);transform:translateY(-1px)}
#chapterRail button.active::before{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
#chapterRail button.complete::after{content:"";position:absolute;right:10px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
#chapterRail i{font:normal 9px Georgia,serif;color:var(--gold);letter-spacing:.1em}
#chapterRail span{font-size:11px;letter-spacing:.06em;white-space:nowrap}

/* 漫游提示和通知 */
#hint{position:fixed;z-index:12;left:50%;bottom:100px;transform:translate(-50%,10px);opacity:0;pointer-events:none;white-space:nowrap;padding:10px 16px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(6,15,25,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;letter-spacing:.06em;color:var(--gold-pale);transition:opacity .2s,transform .3s var(--ease)}
#hint.on{opacity:1;transform:translate(-50%,0)}
#toasts{position:fixed;z-index:100;top:max(78px,calc(env(safe-area-inset-top) + 64px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:min(92vw,560px)}
.toast{max-width:100%;padding:11px 17px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(7,17,29,.9);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:13px;color:var(--gold-pale);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:toastIn .3s var(--ease);transition:opacity .4s,transform .4s}
.toast.out{opacity:0;transform:translateY(-8px)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}}

/* 移动端控制 */
#touch{position:fixed;z-index:11;inset:0;display:none;pointer-events:none}
#touch.on{display:block}
#stick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom));width:116px;height:116px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(5,13,22,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto;touch-action:none}
#stick::before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
#knob{position:absolute;left:50%;top:50%;width:48px;height:48px;border:1px solid rgba(243,215,162,.48);border-radius:50%;background:rgba(232,182,101,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transform:translate(-50%,-50%)}
#knob span{position:absolute;inset:17px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(232,182,101,.7)}
#actBtn{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:calc(35px + env(safe-area-inset-bottom));width:66px;height:66px;border:1px solid var(--gold);border-radius:50%;background:rgba(232,182,101,.9);color:#14202c;box-shadow:0 14px 35px rgba(1,7,14,.45);display:grid;place-items:center;pointer-events:auto;touch-action:manipulation}
#actBtn .ui-icon{width:23px;height:23px}
#actBtn:active{transform:scale(.96)}

/* 标题屏 */
#title{position:fixed;z-index:70;inset:0;display:grid;place-items:center;overflow:hidden;background:var(--night-950);opacity:1;transition:opacity .5s var(--ease),transform .65s var(--ease)}
#title.hide{display:none}
#title.leaving{opacity:0;transform:scale(1.025)}
.title-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);filter:saturate(.88) contrast(1.04)}
.title-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,17,.92) 0%,rgba(4,10,17,.72) 34%,rgba(4,10,17,.22) 68%,rgba(4,10,17,.4) 100%),linear-gradient(180deg,rgba(4,10,17,.32),transparent 52%,rgba(4,10,17,.55));box-shadow:inset 0 0 180px rgba(0,0,0,.32)}
.title-content{position:relative;z-index:2;width:min(1180px,calc(100vw - 80px));display:flex;flex-direction:column;align-items:flex-start;opacity:0;transform:translateY(20px);transition:opacity .9s .2s var(--ease),transform .9s .2s var(--ease)}
#title.ready .title-content{opacity:1;transform:none}
.title-mark{width:48px;height:48px;margin-bottom:24px;background:rgba(6,15,26,.38)}
.title-mark span{width:4px;height:4px;animation-duration:5s}
.t-eyebrow{margin:0 0 14px;color:var(--gold);font-size:11px;font-weight:650;letter-spacing:.28em}
#title h1{margin:0;font-family:var(--font-display);font-size:clamp(48px,7vw,94px);font-weight:540;letter-spacing:.16em;line-height:1;text-shadow:0 20px 55px rgba(0,0,0,.5)}
.t-tag{margin:22px 0 0;max-width:460px;color:var(--ink-soft);font-size:16px;line-height:1.8;letter-spacing:.08em}
.t-actions{display:flex;align-items:center;gap:22px;margin-top:36px}
.title-primary{height:52px;padding:0 20px 0 24px;border:1px solid var(--gold);border-radius:14px;background:var(--gold);color:#18212a;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:26px;cursor:pointer;box-shadow:0 15px 40px rgba(4,9,14,.35);transition:transform .25s var(--ease),box-shadow .25s}
.title-primary:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(4,9,14,.48)}
.title-primary:active{transform:translateY(1px) scale(.98)}
.title-primary:disabled{opacity:.55;cursor:wait}
.title-primary i{position:relative;width:22px;height:22px;border:1px solid rgba(24,33,42,.45);border-radius:50%}
.title-primary i::before{content:"";position:absolute;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);left:6px;top:7px}
.title-secondary{height:44px;padding:0 2px;border:0;border-bottom:1px solid rgba(255,255,255,.32);background:transparent;color:var(--ink-soft);font-size:13px;letter-spacing:.08em;cursor:pointer;transition:color .2s,border-color .2s}
.title-secondary:hover{color:var(--ink);border-color:var(--gold)}
.t-controls{margin:24px 0 0;color:var(--muted);font-size:11px;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.keycap{display:inline-grid;place-items:center;min-width:30px;height:25px;padding:0 8px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(4,10,17,.36);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);color:var(--ink-soft);font-size:10px;font-weight:700;letter-spacing:.06em}
.title-chapters{position:absolute;z-index:2;right:38px;bottom:32px;display:flex;gap:22px;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.12em}

/* 场景 */
#sceneLayer{position:fixed;z-index:30;inset:0;display:none;overflow:hidden;background:var(--night-950);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#sceneLayer.on{display:block}
#sceneViewport{position:absolute;inset:0;overflow:hidden;background:linear-gradient(145deg,#122337,#07111d)}
#sceneLayer.loading #sceneViewport::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#0a1624 20%,#13283d 48%,#0a1624 76%);background-size:200% 100%;animation:loadingShimmer 1.4s linear infinite}
@keyframes loadingShimmer{to{background-position:-200% 0}}
#sceneStage{position:absolute;left:0;top:0;will-change:transform;cursor:grab;transform-origin:0 0}
#sceneStage.dragging{cursor:grabbing}
#sceneBg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;filter:saturate(.94) contrast(1.02)}
.scene-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,14,.54),transparent 26%,transparent 62%,rgba(2,8,14,.36)),radial-gradient(ellipse at center,transparent 55%,rgba(2,7,13,.42) 100%)}
#sceneLayer.entering #sceneViewport{animation:sceneIn .8s var(--ease)}
@keyframes sceneIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
.scene-topbar{position:absolute;z-index:5;top:0;left:0;right:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 36px max(22px,env(safe-area-inset-left));pointer-events:none}
.scene-topbar>*{pointer-events:auto}
.scene-back{background:rgba(7,16,27,.58)}
.scene-heading{min-width:0;text-shadow:0 3px 18px rgba(0,0,0,.75)}
.scene-chapter{font-size:10px;color:var(--gold);letter-spacing:.3em;margin-bottom:4px}
.scene-title{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-progress{display:grid;grid-template-columns:auto auto;align-items:center;gap:9px;padding:7px 12px 7px 7px;border:1px solid var(--line);border-radius:15px;background:rgba(7,16,27,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.progress-ring{--progress:0%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--progress),rgba(255,255,255,.11) 0);position:relative}
.progress-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#0c1928}
.progress-ring b{position:relative;font-size:8px;font-variant-numeric:tabular-nums}
.progress-copy{font-size:10px;color:var(--muted);letter-spacing:.08em}
.scene-progress.done .progress-ring{background:conic-gradient(var(--gold) 100%,var(--gold) 0)}
#sceneIntro{position:absolute;z-index:8;inset:0;display:none;place-content:center;justify-items:center;text-align:center;pointer-events:none;background:rgba(3,9,16,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#sceneIntro.on{display:grid;animation:intro 2.25s ease forwards}
.intro-rule{width:1px;height:54px;margin-bottom:16px;background:linear-gradient(transparent,var(--gold))}
.si-chapter{font-size:11px;color:var(--gold);letter-spacing:.48em;margin-left:.48em}
.si-title{margin-top:10px;font-family:var(--font-display);font-size:clamp(36px,6vw,68px);font-weight:520;letter-spacing:.18em;margin-left:.18em;text-shadow:0 16px 50px rgba(0,0,0,.7)}
.si-sub{margin-top:14px;color:var(--ink-soft);font-size:13px;letter-spacing:.12em}
@keyframes intro{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
#panHint{position:absolute;z-index:5;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));transform:translateX(-50%);display:none;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(6,15,25,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--muted);font-size:10px;letter-spacing:.08em;pointer-events:none}
#panHint.on{display:flex;animation:toastIn .3s var(--ease)}

/* 线索热点 */
.hotspot{position:absolute;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;color:var(--ink)}
.hs-aura{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle,rgba(243,215,162,.28),rgba(232,182,101,.09) 45%,transparent 72%);animation:aura 2.8s calc(var(--delay) * -1) ease-in-out infinite}
.hs-core{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(243,215,162,.75);background:rgba(8,17,28,.56);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 0 22px rgba(232,182,101,.28)}
.hs-core::before{content:"";position:absolute;inset:-8px;border:1px solid rgba(232,182,101,.28);animation:ring 2.8s var(--delay) ease-out infinite}
.hs-core i{position:absolute;inset:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.hs-index{position:absolute;left:calc(50% + 23px);top:calc(50% + 13px);font:9px Georgia,serif;color:var(--gold-pale);text-shadow:0 2px 8px #000}
.hs-label{position:absolute;left:50%;bottom:58px;transform:translate(-50%,7px);opacity:0;pointer-events:none;white-space:nowrap;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(6,15,25,.86);box-shadow:0 12px 28px rgba(0,0,0,.3);font-size:11px;letter-spacing:.06em;transition:opacity .2s,transform .25s var(--ease)}
.hotspot:hover .hs-label,.hotspot:focus-visible .hs-label{opacity:1;transform:translate(-50%,0)}
.hotspot:hover .hs-core{border-color:var(--gold-pale)}
.hotspot.explored .hs-aura{opacity:.35;animation:none}
.hotspot.explored .hs-core{border-color:rgba(255,255,255,.42);box-shadow:none}
.hotspot.explored .hs-core i{background:#b9c6c5;box-shadow:0 0 8px rgba(185,198,197,.5)}
.hotspot.explored::after{content:"";position:absolute;right:6px;top:7px;width:9px;height:5px;border-left:1.5px solid var(--gold-pale);border-bottom:1.5px solid var(--gold-pale);transform:rotate(-45deg)}
@keyframes aura{50%{transform:scale(1.12);opacity:.72}}
@keyframes ring{0%{transform:scale(.7);opacity:.8}75%,100%{transform:scale(1.55);opacity:0}}

/* 资料与帮助 */
#dialogWrap,#helpWrap{position:fixed;z-index:80;inset:0;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(2,7,13,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#dialogWrap.on,#helpWrap.on{display:flex}
.dialog{width:min(760px,100%);max-height:min(82dvh,760px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(16,32,51,.98),rgba(7,16,27,.98));box-shadow:0 35px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.07);animation:dialogIn .35s var(--ease);overflow:hidden}
.dialog-s{width:min(590px,100%)}
@keyframes dialogIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.d-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.clue-number{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font:12px Georgia,serif;color:var(--gold)}
.d-head-text{min-width:0}
.d-eyebrow{font-size:9px;color:var(--gold);letter-spacing:.22em;margin-bottom:5px}
.d-head h3{margin:0;font-family:var(--font-display);font-size:20px;font-weight:590;line-height:1.35;letter-spacing:.04em;text-wrap:balance}
.close-btn{position:relative;width:38px;height:38px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--muted)}
.close-btn:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.close-btn::before,.close-btn::after{content:"";position:absolute;left:11px;right:11px;top:18px;height:1px;background:currentColor}
.close-btn::before{transform:rotate(45deg)}
.close-btn::after{transform:rotate(-45deg)}
.d-body{padding:22px 25px 27px;overflow-y:auto;font-size:14px;line-height:1.85;color:var(--ink-soft)}
.d-body p{margin:.45em 0 .9em}
.d-body h4{margin:1.5em 0 .45em;color:var(--gold);font-size:10px;letter-spacing:.2em;font-weight:650}
.d-body .note{font-size:12px;color:var(--muted)}
.d-body .quote{margin:1.1em 0;padding:12px 15px;border-left:1px solid var(--gold);background:rgba(232,182,101,.045);color:#d9d2c6}
.todo{display:inline-block;padding:4px 9px;border:1px solid rgba(232,182,101,.36);border-radius:7px;background:rgba(232,182,101,.07);color:var(--gold-pale);font-size:.92em}
.tags,.rtags{display:flex;flex-wrap:wrap;gap:8px;margin:.7em 0 1em}
.tags span,.rtags span{padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.035);font-size:11px;color:var(--ink-soft)}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}
.photo{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--night-900)}
.photo img,.ph-empty{width:100%;aspect-ratio:4/3;display:block;object-fit:cover}
.ph-empty{display:grid;place-items:center;color:var(--muted);background:linear-gradient(135deg,#0b1827,#102239);font-size:11px}
.photo figcaption{padding:8px 10px;color:var(--muted);font-size:11px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);padding:1px}
.help-item{display:flex;align-items:center;gap:14px;padding:18px;background:#0d1b2b}
.help-item .keycap{min-width:58px}
.help-item p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.help-item b{color:var(--ink);font-size:13px}
.help-grid .wide{grid-column:1/-1;margin:0;padding:15px 18px;background:#0d1b2b}

/* 简历 */
#resume{position:fixed;z-index:110;inset:0;display:none;overflow-y:auto;background:#07111c;color:var(--ink)}
#resume.on{display:block}
.r-top{position:sticky;z-index:4;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(7,17,28,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.r-note{font-size:10px;color:var(--gold);letter-spacing:.14em;text-align:center}
.paper{width:min(900px,calc(100% - 36px));margin:28px auto 70px;padding:58px 64px;background:#f0f1ed;color:#17202a;box-shadow:0 30px 90px rgba(0,0,0,.45);border-radius:18px;line-height:1.65}
.resume-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding-bottom:28px;border-bottom:1px solid #bdc5c5}
.resume-kicker{margin:0 0 10px;color:#56636c;font-size:9px;letter-spacing:.28em}
.paper h1{margin:0;font-size:35px;font-weight:620;letter-spacing:.06em}
.r-sub{margin:8px 0 0;color:#52606a;font-size:14px}
.resume-contact{display:grid;gap:5px;text-align:right;color:#52606a;font-size:11px}
.r-banner{margin:24px 0;padding:11px 14px;border-left:3px solid #a9782d;background:#e4e1d8;color:#665536;font-size:12px}
.resume-section{margin-top:30px}
.resume-section>h2{margin:0 0 16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#34434c}
.timeline-list{position:relative;display:grid;gap:0}
.timeline-list::before{content:"";position:absolute;left:72px;top:11px;bottom:11px;width:1px;background:#bcc6c5}
.timeline-list article{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:11px 0}
.timeline-list time{font-size:11px;font-weight:700;color:#9a6a25}
.timeline-list article>div{position:relative}
.timeline-list article>div::before{content:"";position:absolute;left:-28px;top:7px;width:7px;height:7px;border-radius:50%;background:#f0f1ed;border:1px solid #9a6a25}
.paper h3{margin:0;font-size:13px;font-weight:700}
.paper p{margin:4px 0;color:#58646b;font-size:12px}
.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.experience-grid article{padding:18px;border:1px solid #cbd1ce;border-radius:12px}
.experience-grid span{display:block;margin-bottom:8px;color:#9a6a25;font-size:10px;letter-spacing:.14em}
.paper .rtags span{border-color:#c5ccc9;background:#e5e8e3;color:#34434c;font-size:11px}
.r-foot{text-align:center;margin-top:38px!important;color:#87918f!important;font-size:10px!important;letter-spacing:.08em}

/* 响应式 */
@media (max-width:760px){
  #hud{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}
  .hud-left{gap:7px}
  .brand-copy b{font-size:13px}.brand-copy small{max-width:28vw}.button-label{display:none}
  .icon-btn{width:42px;height:42px;padding:0;justify-content:center}.progress-chip{height:42px;min-width:78px;padding-left:36px;padding-right:9px}.progress-orbit{left:9px;top:10px}
  #radar{width:154px;border-radius:12px}.radar-head{height:24px;padding:0 8px}.radar-head span{font-size:7px;letter-spacing:.12em}.radar-head small{display:none}
  #chapterRail{bottom:max(15px,calc(env(safe-area-inset-bottom) + 8px));width:calc(100% - 24px);overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  #chapterRail::-webkit-scrollbar{display:none}#chapterRail button{min-width:64px;height:44px}
  #hint{bottom:82px;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
  .title-content{width:calc(100vw - 40px);align-items:flex-start}.title-scrim{background:linear-gradient(90deg,rgba(4,10,17,.9),rgba(4,10,17,.5)),linear-gradient(180deg,rgba(4,10,17,.3),rgba(4,10,17,.6))}
  #title h1{font-size:clamp(42px,14vw,68px)}.t-tag{font-size:14px}.title-chapters{display:none}.t-actions{gap:14px;flex-wrap:wrap}.title-primary{height:50px}
  .scene-topbar{grid-template-columns:auto 1fr auto;gap:8px;padding:max(11px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 30px max(10px,env(safe-area-inset-left))}.scene-title{font-size:15px}.scene-chapter{font-size:8px}.scene-progress{padding-right:7px}.progress-copy{display:none}
  .dialog{max-height:88dvh;border-radius:20px}.d-head{padding:16px}.d-body{padding:18px 18px 23px;font-size:13px}.help-grid{grid-template-columns:1fr}.help-grid .wide{grid-column:auto}
  .paper{width:calc(100% - 20px);margin:12px auto 35px;padding:30px 21px;border-radius:12px}.resume-hero{display:grid;align-items:start}.resume-contact{text-align:left}.experience-grid{grid-template-columns:1fr}.r-note{font-size:8px}
}
@media (pointer:coarse){
  #chapterRail{display:none}#hint{bottom:calc(152px + env(safe-area-inset-bottom))}
}
body.touch-enabled #chapterRail{display:none}
body.touch-enabled #hint{bottom:calc(152px + env(safe-area-inset-bottom))}
@media (max-height:620px){
  .title-mark{display:none}.title-content{gap:0}.t-eyebrow{margin-bottom:8px}.t-tag{margin-top:12px}.t-actions{margin-top:20px}.t-controls{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hs-aura,.hs-core::before{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .icon-btn,.progress-chip,#radar,#chapterRail,#hint,.scene-progress,#panHint,#dialogWrap,#helpWrap{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-solid)}
}
@media print{
  #stage,#hud,#chapterRail,#hint,#touch,#toasts,#title,#boot,#sceneLayer,#dialogWrap,#helpWrap,.r-top{display:none!important}
  html,body{overflow:visible;background:#fff}
  #resume{display:block!important;position:static;overflow:visible;background:#fff}
  .paper{width:auto;max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0}
}