/* ==========================================================================
   realm.css —— 世界 · 国书与场景（类名 rm- / sc-）
   国书：左边一张推进后的大陆地图（读到哪，地图移到哪），右边按固定的六章往下读。
   场景：整屏一幕，一句话；「此刻」是视觉小说式的对白框；档案从右边抽出来。
   只动 transform / opacity；地图是一张图加一层标记，整体平移缩放。
   ========================================================================== */
body[data-page="world"] { background: #090c10; }

/* ---------------------------------------------------------------- 一镜到底：地图层、国书面板、场景层 */
.rw { position: relative; min-height: 100vh; }
/* 地图层：始终固定在底层；读国书时用 clip-path 裁成左栏（窄屏裁成顶栏） */
/* 大陆时：一卷摊开的地图，四边留白，顶栏不压图（与 realm.js 的 view() 对应：上 88、下 28、左右 4vw） */
.rw { --fs: max(16px, 4vw); --ft: 88px; --fb: 28px; }
.rw-map { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #0b0f13; clip-path: inset(var(--ft) var(--fs) var(--fb) var(--fs) round 3px); transition: clip-path 1.2s cubic-bezier(.45, 0, .15, 1); }
.rw:not(.is-wide) .rw-map { cursor: grab; }
.rw[data-state="world"] .rw-map .hot { cursor: pointer; }
.rw-map.is-drag { cursor: grabbing; }
.rw-map.is-drag .rm-cam { transition: none; }
.rw[data-state="book"] .rw-map { clip-path: inset(0 56% 0 0 round 0); touch-action: pan-y; }
/* 展开阅读：地图收成左边一截竖长的纸条（宽 22vw），右缘是撕开的毛边；正文从 22vw 起铺开 */
.rw.is-wide .rw-map { clip-path: inset(0 78% 0 0 round 0); cursor: pointer; }
.rw.is-wide .rw-map::after { opacity: 1; background: linear-gradient(90deg, transparent 15%, rgba(9, 12, 16, .5) 22%), linear-gradient(180deg, rgba(9, 12, 16, .45), transparent 14%, transparent 86%, rgba(9, 12, 16, .55)); }
.rw.is-wide .rm-up { opacity: 0; pointer-events: none; }
.rw-map::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(22vw - 16px); width: 18px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'120'%20viewBox%3D'0%200%2018%20120'%3E%3Cpath%20d%3D'M18%200%20L18%20120%20L9%20120%20L12%20112%20L7%20104%20L11%2096%20L5%2088%20L10%2079%20L6%2070%20L12%2062%20L8%2053%20L13%2045%20L6%2037%20L10%2028%20L5%2020%20L11%2011%20L7%204%20L9%200%20Z'%20fill%3D'%23090c10'%2F%3E%3C%2Fsvg%3E") repeat-y; filter: drop-shadow(-3px 0 4px rgba(0, 0, 0, .45)); }
.rw.is-wide .rw-map::before { opacity: 1; transition-delay: .7s; }
.rm-wide { position: fixed; right: clamp(20px, 3vw, 40px); top: 92px; z-index: 30; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(236, 240, 244, .85); background: rgba(9, 12, 16, .75); border: 1px solid rgba(214, 226, 234, .25); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: border-color .3s, color .3s; }
.rm-wide:hover { color: #fff; border-color: rgba(245, 233, 207, .7); }
.rw.is-scene .rm-wide { display: none; }
.rm-text { transition: opacity .8s .35s, transform 1.1s .25s cubic-bezier(.2, .7, .2, 1), margin-left 1s cubic-bezier(.45, 0, .15, 1), padding-left 1s cubic-bezier(.45, 0, .15, 1); }
.rw.is-wide .rm-text { margin-left: 22vw; padding-left: clamp(40px, 6vw, 110px); }
.rw.is-wide .rm-text > * { max-width: 860px; }
/* 卷轴：开场从正中往两边展开，两根卷轴杆跟着走到两边 */
.rw.is-rolled .rw-map { clip-path: inset(var(--ft) 50% var(--fb) 50% round 3px); transition: none; }
.rw.is-unrolling .rw-map { transition: clip-path 1.9s cubic-bezier(.6, 0, .2, 1); }
.rw.is-unrolling .rw-rolls i { transition-duration: 1.9s; }
/* 大陆标题：卷轴上方一行，不压在地图上 */
.rw-world-head { position: fixed; left: 0; right: 0; top: calc(var(--ft) - 50px); z-index: 3; display: flex; align-items: baseline; justify-content: center; gap: 18px; pointer-events: none; transition: opacity .8s, transform .8s; }
.rw-world-head h1 { font-family: var(--serif); font-weight: 300; font-size: 26px; letter-spacing: .5em; text-indent: .5em; color: #f2e8d2; margin: 0; }
.rw-world-head i { font-family: var(--display-latin); font-size: 17px; color: rgba(232, 208, 155, .75); }
.rw-world-head p { font-family: var(--serif); font-size: 14px; letter-spacing: .16em; color: rgba(214, 226, 234, .6); margin: 0 0 0 10px; }
.rw[data-state="world"] .rw-map { background: #cdb68b; } /* 纸面比例和地图不完全一样时，剩下的缝用纸色补 */
.rw.is-rolled .rw-world-head, .rw.is-unrolling:not(.is-start) .rw-world-head { opacity: 0; }
.rw-rolls { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity .6s; }
.rw[data-state="book"] .rw-rolls { opacity: 0; }
.rw-rolls i { position: absolute; top: calc(var(--ft) - 30px); bottom: calc(var(--fb) - 30px); width: 36px;
  background: url(../img/scroll-rod.png) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
  transition: left 1.6s cubic-bezier(.6, 0, .2, 1), right 1.6s cubic-bezier(.6, 0, .2, 1); }
/* 纸从杆里卷出来：杆内侧一道卷边的阴影 */
.rw-rolls i::after { content: ''; position: absolute; top: 30px; bottom: 30px; width: 26px; pointer-events: none; }
.rw-rolls .l::after { left: 26px; background: linear-gradient(90deg, rgba(40, 26, 12, .55), rgba(40, 26, 12, 0)); }
.rw-rolls .r::after { right: 26px; background: linear-gradient(270deg, rgba(40, 26, 12, .55), rgba(40, 26, 12, 0)); }
.rw-rolls .l { left: calc(var(--fs) - 24px); } .rw-rolls .r { right: calc(var(--fs) - 24px); }
.rw.is-rolled .rw-rolls .l { left: calc(50% - 36px); transition: none; } .rw.is-rolled .rw-rolls .r { right: calc(50% - 36px); transition: none; }
.rw-start { position: absolute; left: 0; right: 0; top: 46%; z-index: 3; margin: 0; text-align: center; pointer-events: none;
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: .5em; text-indent: .5em; color: #2a1d10;
  text-shadow: 0 0 24px rgba(250, 240, 220, .95), 0 0 6px rgba(250, 240, 220, .9); opacity: 0; transform: translateY(8px); transition: opacity 1s, transform 1.2s; }
.rw.is-start .rw-start { opacity: 1; transform: none; }
.rm-cam { position: absolute; left: 0; top: 0; width: 2048px; height: 1152px; transform-origin: 0 0; will-change: transform; transition: transform 1.6s cubic-bezier(.45, 0, .15, 1); --inv: 1; }
.rm-cam.no-anim, .rm-cam.no-anim .rm-pin { transition: none; }
.rm-cam > img { width: 100%; height: 100%; display: block; transition: filter 1.2s; }
.rw[data-state="book"] .rm-cam > img { filter: saturate(.75) brightness(.8); }
.rw-map::after { /* 国书时右缘压暗，让地图退到文字后面 */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s;
  background: linear-gradient(90deg, transparent 32%, rgba(9, 12, 16, .9) 44%), linear-gradient(180deg, rgba(9, 12, 16, .45), transparent 16%, transparent 84%, rgba(9, 12, 16, .55));
}
.rw[data-state="book"] .rw-map::after { opacity: 1; }
/* 大陆：国家色块与名字（与旧世界页同一份 MAP_SVG） */
.rw-hot { position: absolute; inset: 0; transition: opacity .8s; }
.rw-hot .map-hot { position: absolute; inset: 0; width: 100%; height: 100%; }
.rw[data-state="book"] .rw-hot { opacity: 0; pointer-events: none; }
.rw[data-state="book"] .rw-world-head { opacity: 0; transform: translateX(-30px); }
/* 标记 */
.rw-pins { position: absolute; inset: 0; transition: opacity .6s; pointer-events: none; }
.rw[data-state="book"] .rm-pin { pointer-events: auto; }
.rw[data-state="world"] .rw-pins { opacity: 0; }
.rm-pin { position: absolute; width: 0; height: 0; text-decoration: none; transform: scale(var(--inv)); transition: transform 1.6s cubic-bezier(.45, 0, .15, 1); }
.rm-pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: rgba(9, 12, 16, .7); border: 1.5px solid rgba(245, 233, 207, .85); box-shadow: 0 0 0 4px rgba(9, 12, 16, .25); transition: background .4s, box-shadow .4s; }
.rm-pin span { position: absolute; left: 14px; top: -11px; white-space: nowrap; font-family: var(--serif); font-size: 17px; letter-spacing: .14em; color: #f5ecd8; text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, .8); }
.rm-pin.is-mark i { width: 8px; height: 8px; left: -4px; top: -4px; border-color: rgba(214, 226, 234, .7); }
.rm-pin.is-mark span { font-size: 14px; color: rgba(236, 240, 244, .85); }
.rm-pin.is-on i { background: #f5e9cf; box-shadow: 0 0 0 6px rgba(245, 233, 207, .18), 0 0 22px rgba(245, 233, 207, .7); }
.rm-pin.is-on span { color: #fff8e6; }
.rm-cam.is-rel .rw-pins { opacity: .25; }
/* 邦交：古地图上的墨线（realm.js drawRel） */
.rw-rel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .8s; pointer-events: none; }
.rm-cam.is-rel .rw-rel { opacity: 1; }
.rm-cam.is-rel > img { filter: none !important; }
.rel { --ink: #2b1d10; transition: opacity .3s; }
.rel.k-dep { --ink: #24394a; } .rel.k-hos { --ink: #7e2616; } .rel.k-tra { --ink: #5e4210; } .rel.k-riv { --ink: #3a2652; }
.rel .draw { fill: none; stroke: #fff; stroke-width: 40; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.4, 0, .2, 1); }
.rm-cam.is-rel .rel .draw { stroke-dashoffset: 0; }
.rel:nth-child(2) .draw { transition-delay: .15s; } .rel:nth-child(3) .draw { transition-delay: .3s; } .rel:nth-child(4) .draw { transition-delay: .45s; } .rel:nth-child(5) .draw { transition-delay: .6s; } .rel:nth-child(6) .draw { transition-delay: .75s; }
.rel .halo { fill: none; stroke: rgba(248, 238, 214, .75); stroke-width: 26; stroke-linecap: round; }
.rel .ink { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; transition: stroke-width .3s; }
.rel.k-tra .ink { stroke-dasharray: 2 22; stroke-width: 12; }
.rel.k-hos .ink { stroke-dasharray: 38 18; }
.rel.k-riv .ink { stroke-width: 18; }
.rel.k-riv .gap { fill: none; stroke: rgba(248, 238, 214, .95); stroke-width: 6; }
.rel .x { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; paint-order: stroke; }
.rel .coin { fill: rgba(248, 238, 214, .9); stroke: var(--ink); stroke-width: 3.5; }
.rel .from { fill: var(--ink); stroke: rgba(248, 238, 214, .9); stroke-width: 3; }
.rel .to { fill: rgba(248, 238, 214, .85); stroke: var(--ink); stroke-width: 3.5; }
.rel .to-dot { fill: var(--ink); }
.rel .x, .rel .coin, .rel .from, .rel .to, .rel .to-dot, .rel text { opacity: 0; transition: opacity .8s 1.4s; }
.rm-cam.is-rel .rel :is(.x, .coin, .from, .to, .to-dot, text) { opacity: 1; }
.rel text { text-anchor: middle; paint-order: stroke; stroke: rgba(248, 238, 214, .92); stroke-linejoin: round; }
.rel .nm { font-family: var(--serif); font-size: 62px; letter-spacing: .14em; fill: var(--ink); stroke-width: 14px; }
.rel .tg { font-family: var(--serif); font-size: 38px; letter-spacing: .4em; fill: var(--ink); stroke-width: 10px; }
.rw-rel:has(.is-hi) .rel:not(.is-hi) { opacity: .18; }
.rel.is-hi .ink { stroke-width: 13; }
.rel.k-riv.is-hi .ink { stroke-width: 24; }
.rw-map:has(.rm-cam.is-rel)::after { opacity: .3; }
.rm-up { position: absolute; left: 24px; bottom: 24px; z-index: 3; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(214, 226, 234, .85); text-decoration: none; padding: 9px 16px; border: 1px solid rgba(214, 226, 234, .25); border-radius: 999px; background: rgba(9, 12, 16, .6); transition: color .3s, border-color .3s; }
.rm-up:hover { color: #fff; border-color: rgba(245, 233, 207, .7); }

/* 国书面板：在右边，从右滑入 */
.rm-text { position: relative; z-index: 2; margin-left: 44vw; min-height: 100vh; background: #090c10; padding: 96px clamp(28px, 5vw, 90px) 120px clamp(28px, 3.4vw, 56px);
  opacity: 0; transform: translateX(70px); pointer-events: none; transition: opacity .8s .35s, transform 1.1s .25s cubic-bezier(.2, .7, .2, 1); }
.rm-text.is-in { opacity: 1; transform: none; pointer-events: auto; }
.rm-text.is-swap { opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; }
.rm-text > * { max-width: 720px; }
.rw[data-state="world"] .rm-text { position: fixed; inset: 0 0 0 auto; width: 56vw; }
.rm-crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(214, 226, 234, .45); }
.rm-crumbs a { color: rgba(214, 226, 234, .7); text-decoration: none; }
.rm-crumbs a::after { content: '›'; margin-left: 10px; color: rgba(214, 226, 234, .35); }
.rm-crumbs a:hover { color: #f5e9cf; }
/* 大场景：国书第一屏 */
.rm-hero { position: relative; margin: 24px 0 0; max-width: none !important; }
.rm-hero img { width: 100%; height: min(70vh, 640px); object-fit: cover; display: block; border-radius: 3px; }
.rm-hero::after { content: ''; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(180deg, transparent 40%, rgba(9, 12, 16, .9)); pointer-events: none; }
.rm-hero figcaption { position: absolute; left: clamp(20px, 3vw, 40px); right: 20px; bottom: clamp(20px, 3vw, 36px); z-index: 1; }
.rm-hero h1, .rm-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: .16em; line-height: 1.2; color: #f8f3e8; margin: 12px 0 4px; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.rm-hero-cap { position: absolute; right: 0; bottom: 6px; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: rgba(236, 240, 244, .55); }
.rm-head { padding: 40px 0 0; }
.rm-kicker { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .9); margin: 0; }
.rm-en { font-family: var(--display-latin); font-style: italic; font-size: 24px; color: rgba(214, 230, 238, .9); margin: 0; }
.rm-intro { padding: 36px 0 10px; }
.rm-lede { font-family: var(--serif); font-size: 17px; line-height: 2.05; color: rgba(222, 232, 238, .86); margin: 0; }
.rm-epi { margin: 34px 0 0; padding: 4px 0 4px 26px; border-left: 1px solid rgba(232, 208, 155, .45); }
.rm-epi p { font-family: var(--serif); font-size: 17px; line-height: 2; color: #efe4cc; margin: 0; }
.rm-epi cite { display: block; margin-top: 12px; font-family: var(--serif); font-style: normal; font-size: 12.5px; letter-spacing: .26em; color: rgba(232, 208, 155, .65); }
.rm-epi cite::before { content: '—— '; letter-spacing: 0; }
.rm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 40px 0 0; border-top: 1px solid rgba(159, 194, 212, .14); border-bottom: 1px solid rgba(159, 194, 212, .14); }
.rm-facts div { padding: 16px 14px 16px 0; }
.rm-facts dt { font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(159, 194, 212, .6); }
.rm-facts dd { margin: 6px 0 0; font-family: var(--serif); font-size: 16px; color: #f2ecdf; white-space: nowrap; }
.rm-toc { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 30px 0 0; }
.rm-toc a { font-family: var(--serif); font-size: 14px; letter-spacing: .2em; color: rgba(214, 226, 234, .66); text-decoration: none; transition: color .3s; }
.rm-toc a span { font-family: var(--display-latin); margin-right: 8px; color: rgba(232, 208, 155, .7); letter-spacing: 0; }
.rm-toc a:hover { color: #f5e9cf; }
.rm-toc a.is-stub { color: rgba(214, 226, 234, .3); }
.rm-ch { padding: clamp(60px, 10vh, 100px) 0 10px; scroll-margin-top: 80px; }
.rm-ch-h { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(232, 208, 155, .22); margin-bottom: 30px; }
.rm-ch-no { font-family: var(--display-latin); font-size: 30px; color: rgba(232, 208, 155, .8); min-width: 1.2em; }
.rm-ch-h h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: .4em; color: var(--ice); margin: 0; }
.rm-ch-h h2 i { font-family: var(--display-latin); font-size: 20px; letter-spacing: .04em; color: var(--frost); margin-left: 14px; }
.rm-ch.is-stub .rm-ch-h h2, .rm-ch.is-stub .rm-ch-no { opacity: .4; }
.rm-stub { font-family: var(--serif); font-size: 14px; letter-spacing: .2em; color: rgba(214, 226, 234, .4); margin: 0; }
.rm-plate { margin: 0 0 34px; }
.rm-plate img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; border-radius: 3px; filter: saturate(.85); }
.rm-plate figcaption, .rm-fig figcaption { font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: rgba(214, 226, 234, .45); margin-top: 10px; }
.rm-e { padding: 6px 0 30px; }
.rm-e + .rm-e { border-top: 1px solid rgba(159, 194, 212, .08); padding-top: 28px; }
.rm-e h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: .3em; color: #f5e9cf; margin: 0 0 12px; }
.rm-e > p { font-family: var(--serif); font-size: 16px; line-height: 2.05; color: rgba(222, 232, 238, .84); margin: 0; }
.rm-n { margin: 14px 0 0 !important; font-size: 13px !important; line-height: 1.9 !important; color: rgba(214, 226, 234, .5) !important; }
.rm-n em { font-style: normal; color: rgba(232, 208, 155, .7); margin-right: 10px; letter-spacing: .2em; }
.rm-fig { margin: 0 0 22px; }
.rm-fig img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; border-radius: 3px; filter: saturate(.85); }
.rm-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 2px; }
.rm-list a { display: flex; justify-content: space-between; gap: 20px; padding: 11px 14px; text-decoration: none; border-radius: 4px; transition: background .3s; }
.rm-list a:hover { background: rgba(159, 194, 212, .06); }
.rm-list b { font-family: var(--serif); font-weight: 400; font-size: 15.5px; letter-spacing: .2em; color: #f2ecdf; }
.rm-list span { font-family: var(--serif); font-size: 13px; color: rgba(214, 226, 234, .55); }
.rm-foe-k { font-family: var(--serif); font-size: 13px; letter-spacing: .14em; color: rgba(214, 226, 234, .5); margin: 0 0 10px; }
.rm-foe { list-style: none; padding: 0; margin: 0; }
.rm-foe li + li { border-top: 1px solid rgba(159, 194, 212, .08); }
.rm-foe a { display: block; padding: 20px 10px; text-decoration: none; border-radius: 4px; transition: background .3s; }
.rm-foe a:hover { background: rgba(159, 194, 212, .05); }
.rm-foe-h { display: flex; align-items: baseline; gap: 12px; }
.rm-foe b { font-family: var(--serif); font-weight: 400; font-size: 17px; letter-spacing: .2em; color: #f5e9cf; }
.rm-foe i { font-family: var(--display-latin); font-size: 15px; color: var(--frost); }
.rm-foe em { margin-left: auto; font-style: normal; font-family: var(--serif); font-size: 12px; letter-spacing: .3em; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.rm-foe .t-dep { color: #8fb8c9; border-color: rgba(143, 184, 201, .4); }
.rm-foe .t-hos { color: #d98a70; border-color: rgba(217, 138, 112, .4); }
.rm-foe .t-tra { color: #e2c47e; border-color: rgba(226, 196, 126, .4); }
.rm-foe .t-riv { color: #b9a3e0; border-color: rgba(185, 163, 224, .4); }
.rm-foe-p { display: block; margin-top: 8px; font-family: var(--serif); font-size: 15px; line-height: 1.95; color: rgba(222, 232, 238, .76); }
.rm-foe-v { display: block; margin-top: 6px; font-family: var(--serif); font-size: 12.5px; letter-spacing: .1em; color: rgba(232, 208, 155, .6); }
.rm-story ol { list-style: none; padding: 0; margin: 0; }
.rm-story a { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: baseline; padding: 14px 4px; text-decoration: none; border-bottom: 1px solid rgba(159, 194, 212, .08); }
.rm-story span { font-family: var(--serif); font-size: 13px; letter-spacing: .14em; color: rgba(232, 208, 155, .7); }
.rm-story b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: #f2ecdf; }
.rm-story em { font-style: normal; font-family: var(--serif); font-size: 13px; color: rgba(214, 226, 234, .5); }
.rm-down { margin-top: 80px; }
.rm-down-k { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .75); margin: 0 0 16px; }
.rm-down div { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.rm-down a { padding: 18px 18px; border: 1px solid rgba(159, 194, 212, .16); border-radius: 4px; text-decoration: none; transition: border-color .3s, background .3s; }
.rm-down a:hover { border-color: rgba(245, 233, 207, .55); background: rgba(245, 233, 207, .03); }
.rm-down b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; letter-spacing: .2em; color: #f5e9cf; }
.rm-down span { display: block; margin-top: 6px; font-family: var(--serif); font-size: 12.5px; color: rgba(214, 226, 234, .5); }
/* 场景层：从地图上那一点展开 */
.sc-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; clip-path: circle(0 at var(--px, 50%) var(--py, 50%)); transition: clip-path 1.1s cubic-bezier(.5, 0, .2, 1); }
.sc-layer.is-open { pointer-events: auto; clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); }
body:has(.rw.is-scene) { overflow: hidden; }

@media (max-width: 860px) {
  .rw { --fs: 12px; --ft: 72px; --fb: 16px; }
  .rw[data-state="book"] .rw-map { clip-path: inset(0 0 64% 0 round 0); }
  .rw-map::after { background: linear-gradient(180deg, transparent 26%, rgba(9, 12, 16, .9) 36%); }
  .rm-text { margin-left: 0; margin-top: 36vh; padding: 20px 20px 90px; }
  .rw[data-state="world"] .rm-text { width: 100%; }
  .rm-up { top: calc(36vh - 52px); bottom: auto; left: 14px; padding: 6px 12px; }
  .rm-pin span { font-size: 14px; }
  .rm-hero img { height: 46vh; }
  .rm-story a { grid-template-columns: 70px 1fr; } .rm-story em { display: none; }
}

/* ---------------------------------------------------------------- 场景 */
.sc { position: relative; height: 100svh; overflow: hidden; background: #05080b; }
.sc-bg { position: absolute; inset: 0; }
.sc-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); opacity: 0; transition: opacity 1.6s, transform 6s cubic-bezier(.2, .6, .2, 1); }
.sc.is-in .sc-bg img { opacity: 1; transform: none; }
.sc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 11, .55) 0%, transparent 22%, transparent 50%, rgba(5, 8, 11, .82) 86%, #05080b 100%); }
.sc-crumbs { position: absolute; left: clamp(20px, 4vw, 60px); top: 96px; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(236, 240, 244, .6); z-index: 2; }
.sc-crumbs a { color: rgba(236, 240, 244, .8); text-decoration: none; }
.sc-crumbs a::after { content: '›'; margin-left: 10px; color: rgba(236, 240, 244, .4); }
.sc-crumbs a:hover { color: #fff; }
.sc-mid { position: absolute; left: clamp(20px, 4vw, 60px); right: 20px; bottom: 120px; z-index: 2; opacity: 0; transform: translateY(12px); transition: opacity 1.4s .5s, transform 1.4s .5s cubic-bezier(.2, .7, .2, 1); }
.sc.is-in .sc-mid { opacity: 1; transform: none; }
.sc-kicker { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .85); margin: 0; }
.sc-kicker i { font-family: var(--display-latin); font-size: 16px; letter-spacing: .04em; margin-left: 14px; color: rgba(232, 208, 155, .6); }
.sc-mid h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.4vw, 78px); letter-spacing: .16em; color: #f8f3e8; margin: 16px 0 4px; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.sc-en { font-family: var(--display-latin); font-style: italic; font-size: 24px; color: rgba(214, 230, 238, .85); margin: 0; }
.sc-line { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .12em; color: #f2e8d2; margin: 26px 0 0; }
.sc-line::before { content: '「'; } .sc-line::after { content: '」'; }
.sc-bar { position: absolute; left: clamp(20px, 4vw, 60px); right: clamp(20px, 4vw, 60px); bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; z-index: 2; opacity: 0; transition: opacity 1s 1.4s; }
.sc.is-in .sc-bar { opacity: 1; }
.sc-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 14px; letter-spacing: .26em; color: #f5ecd8; background: rgba(5, 8, 11, .45); border: 1px solid rgba(245, 233, 207, .35); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: border-color .3s, background .3s; }
.sc-btn:hover { border-color: rgba(245, 233, 207, .85); background: rgba(5, 8, 11, .7); }
.sc-btn i { width: 6px; height: 6px; border-radius: 50%; background: #f5e9cf; box-shadow: 0 0 10px rgba(245, 233, 207, .9); animation: sc-blink 2.4s ease-in-out infinite; }
@keyframes sc-blink { 50% { opacity: .3; } }
.sc-near { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-family: var(--serif); font-size: 14px; letter-spacing: .16em; }
.sc-near em { font-style: normal; font-size: 12px; letter-spacing: .3em; color: rgba(236, 240, 244, .5); }
.sc-near a { color: #f5ecd8; text-decoration: none; border-bottom: 1px solid rgba(245, 233, 207, .3); padding-bottom: 2px; }
.sc-near a:hover { border-color: #f5e9cf; }
.sc-rooms { position: absolute; right: clamp(20px, 4vw, 60px); top: 100px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.sc-rooms button { width: 150px; height: 72px; border: 1px solid rgba(245, 233, 207, .3); border-radius: 4px; background-size: cover; background-position: center; position: relative; cursor: pointer; }
.sc-rooms button.is-on { border-color: #f5e9cf; box-shadow: 0 0 0 1px #f5e9cf, 0 0 18px rgba(245, 233, 207, .35); }
.sc-rooms span { position: absolute; left: 8px; bottom: 6px; font-family: var(--serif); font-size: 12.5px; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 4px #000; }
/* 此刻：对白框 */
.sc-vn { position: absolute; left: 50%; bottom: 36px; width: min(860px, calc(100% - 40px)); transform: translate(-50%, 16px); z-index: 4; padding: 26px 34px 20px; cursor: pointer;
  background: linear-gradient(180deg, rgba(8, 12, 16, .88), rgba(5, 8, 11, .94)); border: 1px solid rgba(245, 233, 207, .25); border-radius: 6px; opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.sc.is-vn .sc-vn { opacity: 1; transform: translate(-50%, 0); }
.sc.is-vn .sc-mid, .sc.is-vn .sc-bar { opacity: 0; transition-delay: 0s; transition-duration: .4s; }
.sc-vn-t { font-family: var(--serif); font-size: 12.5px; letter-spacing: .4em; color: rgba(232, 208, 155, .8); margin: 0 0 14px; }
.sc-vn-t em { font-style: normal; margin-left: 14px; letter-spacing: .2em; color: rgba(222, 140, 120, .85); border: 1px solid rgba(222, 140, 120, .4); padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.sc-vn-lines p { font-family: var(--serif); font-size: 17px; line-height: 2; letter-spacing: .06em; color: #f2ecdf; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.sc-vn-lines p.is-on { opacity: 1; transform: none; }
.sc-vn-lines p.is-past { opacity: .42; }
.sc-vn-lines p.is-say { color: #fff6e2; padding-left: 1em; }
.sc-vn-hint { font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(236, 240, 244, .45); text-align: right; margin: 12px 0 0; }
/* 档案抽屉 */
.sc-arch { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 5; padding: 110px 36px 40px; overflow: auto;
  background: rgba(7, 10, 14, .94); border-left: 1px solid rgba(245, 233, 207, .18); transform: translateX(102%); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.sc.is-arch .sc-arch { transform: none; }
.sc-arch-x { position: absolute; right: 30px; top: 84px; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(236, 240, 244, .7); background: none; border: 0; cursor: pointer; }
.sc-arch-x:hover { color: #fff; }
.sc-arch-k { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .8); margin: 0; }
.sc-arch-k i { font-family: var(--display-latin); font-size: 16px; letter-spacing: .04em; margin-left: 12px; }
.sc-arch h2 { font-family: var(--serif); font-weight: 300; font-size: 28px; letter-spacing: .14em; color: var(--ice); margin: 14px 0 24px; }
.sc-arch dl { margin: 0 0 26px; border-top: 1px solid rgba(159, 194, 212, .14); }
.sc-arch dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(159, 194, 212, .1); }
.sc-arch dt { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: rgba(159, 194, 212, .65); }
.sc-arch dd { margin: 0; font-family: var(--serif); font-size: 15px; color: #f2ecdf; text-align: right; }
.sc-arch > p { font-family: var(--serif); font-size: 15px; line-height: 2.05; color: rgba(222, 232, 238, .82); margin: 0 0 14px; }
@media (max-width: 760px) {
  .sc-mid { bottom: 150px; } .sc-en { font-size: 19px; }
  .sc-near { margin-left: 0; }
  .sc-vn { padding: 20px 22px 16px; } .sc-vn-lines p { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .rm-cam, .rm-pin, .sc-bg img { transition: none !important; } }

@media (max-width: 760px) { .sc-rooms { top: auto; bottom: 150px; right: 12px; left: 12px; flex-direction: row; overflow-x: auto; } .sc-rooms button { flex: none; width: 110px; height: 56px; } .rw-world-head h1 { font-size: 42px; } .rw-sub { font-size: 13px; } }
/* 大陆标题压在羊皮纸上：垫一层纸色的晕 */
/* 手机：地图条固定在上方，正文从它下面滑过；场景里的切换条放在标题上面 */
@media (max-width: 860px) {
  .rw[data-state="book"] .rw-map { z-index: 3; }
  .rw[data-state="book"] .rw-map::after { background: linear-gradient(180deg, transparent 80%, rgba(9, 12, 16, .9)); }
}
@media (max-width: 760px) {
  .sc:has(.sc-rooms) .sc-mid { bottom: 230px; }
  .sc-rooms { bottom: 160px; }
}

@media (max-width: 860px) { .rm-wide { display: none; } .rw-rolls i { width: 22px; } .rw-rolls .l { left: calc(var(--fs) - 14px); } .rw-rolls .r { right: calc(var(--fs) - 14px); } }

@media (max-width: 760px) { .rw-world-head { top: 64px; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px; } .rw-world-head h1 { font-size: 20px; } .rw-world-head p { flex-basis: 100%; text-align: center; font-size: 12px; margin: 0; } }

/* 地图上的地标（同画风的生成图）：边缘羽化融进底图，色调压一点 */
.rw-lms { position: absolute; inset: 0; pointer-events: none; }
.rw-lms img { position: absolute; transform: translate(-50%, -100%); filter: sepia(.3) saturate(.8) brightness(.92);
  -webkit-mask: radial-gradient(closest-side, #000 64%, transparent); mask: radial-gradient(closest-side, #000 64%, transparent); }
/* 标记：铜钉；正在读的那一处是一枚蜡封 */
.rm-pin i { left: -9px; top: -9px; width: 18px; height: 18px; border: 0; border-radius: 0; box-shadow: none; background: url(../img/map-mk-pin.png) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); transition: transform .4s; }
.rm-pin.is-mark i { left: -7px; top: -7px; width: 14px; height: 14px; border: 0; opacity: .85; }
.rm-pin.is-on i { left: -15px; top: -15px; width: 30px; height: 30px; background: url(../img/map-mk-seal.png) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); }
.rm-pin span { left: 20px; }
.rm-pin.is-on span { left: 24px; }

/* 自己逛地图：＋ / − / 复原；画面外地点的边缘小签 */
.rw-ctl { position: absolute; z-index: 4; display: flex; gap: 6px; right: calc(var(--fs) + 16px); bottom: calc(var(--fb) + 16px); }
.rw[data-state="book"] .rw-ctl { right: calc(56% + 16px); bottom: 24px; }
.rw.is-wide .rw-ctl, .rw.is-rolled .rw-ctl, .rw.is-unrolling .rw-ctl { opacity: 0; pointer-events: none; }
.rw-ctl button { height: 34px; min-width: 34px; padding: 0 10px; border-radius: 999px; font-family: var(--serif); font-size: 15px; letter-spacing: .1em; cursor: pointer;
  color: #3a2a17; background: rgba(248, 238, 214, .88); border: 1px solid rgba(60, 44, 24, .4); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background .3s, color .3s, opacity .3s; }
.rw[data-state="book"] .rw-ctl button { color: #f2ecdf; background: rgba(9, 12, 16, .7); border-color: rgba(214, 226, 234, .3); }
.rw-ctl button:hover { border-color: #b8913f; }
.rw-ctl .rw-home { font-size: 13px; opacity: .45; }
.rw.is-free .rw-ctl .rw-home { opacity: 1; background: #f5e9cf; color: #2a1d10; border-color: #b8913f; }
.rw-hints { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rw-hint { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--serif); font-size: 13px; letter-spacing: .12em; color: #f5ecd8; background: rgba(9, 12, 16, .72); border: 1px solid rgba(232, 208, 155, .45); border-radius: 999px; padding: 4px 12px 4px 8px; cursor: pointer; }
.rw-hint i { font-style: normal; font-size: 11px; color: #e8d09b; display: inline-block; }
.rw-hint:hover { border-color: #f5e9cf; }
.rm-list em { font-style: normal; font-family: var(--serif); font-size: 12px; letter-spacing: .2em; color: rgba(232, 208, 155, .8); margin-left: 14px; opacity: 0; transition: opacity .3s; }
.rm-list a:hover em { opacity: 1; }
@media (max-width: 860px) { .rw[data-state="book"] .rw-ctl { right: 14px; bottom: auto; top: calc(36vh - 50px); } }

/* 地图里不出现浏览器自带的拖拽影子与文字选中 */
.rw-map, .rw-map * { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }