/* 梦侧两屏的样式（js/views/dream.js）：
     #dream        书目   ← demos/rooms/beyond.css（P-10 书目 / P-11 阅读）
     #dream/index  连线   ← demos/rooms/map.css（P-13 星图 / P-14 说明 / P-17 醒时之物）
   门族（.pm-door / .pmd-*）来自 demos/rooms/doors.css，两屏共用。

   写法和 hall.css 一样逐条搬，只做三件事：
     1. 用 [data-view-slot="beyond"] / "map" / "note" / "waking" 隔离，互不污染；
        共用的门族规则写在 :is(两槽) 上。
     2. 图片路径改到产品侧：本文件在 styles/pages/ 下，
        ../house/*.webp 是 styles/house/，../../assets/decor/* 是 assets/decor/。
        墙外的景（.h-beyond 那一层）已经在 styles/page-shell.css 里，本文件不重复。
     3. r3 靠 body[data-v="index"|"note"|"waking"] 切换的三个视图，在产品里是三条子
        地址：连线 / 说明 / 醒时之物各占一槽，各自只有自己那一节
        （.h-map-view--index / --note / --waking）。

   加载顺序：tokens → fonts → decor → page-shell → shell → 本文件。 */

/* ------------------------------------------------------------------ */
/* 两屏的共同项                                                        */
/* ------------------------------------------------------------------ */

:is([data-view-slot="beyond"], [data-view-slot="map"]) { position: relative; z-index: 1; color: #DCE7E5; }

/* 墙外的景（.h-beyond）由外壳挂进视图槽里，自带 z-index: 0。槽本身是 z-index: 1 的
   堆叠上下文，于是景在"定位元素"那一层（z 0）之上、而卷头、卷名行、图例、说明页的
   纸、醒时之物的小屋这些没有定位的流内内容在它下面——题头（.h-scrim 定位）与门
   （.h-gate 定位）看得见，其余的都被景的夜色盖住了。r3 里景挂在 body 下、正文
   z-index: 1，景本来就在所有文字后面；这里把景压到负层，四个槽都恢复那个次序。 */
:is([data-view-slot="beyond"], [data-view-slot="map"], [data-view-slot="note"], [data-view-slot="waking"]) > .h-beyond { z-index: -1; }

/* 醒来锁：按用户要求挪到月亮正中。
   月亮在 page-shell.css 里是 .h-beyond（position:fixed; inset:0）内的
   right:22% / top:11% / 76×76（≤899px 为 right:12% / 56×56），
   所以这里用同一组坐标 + 同尺寸的固定盒把锁钉在月心；盒内网格居中，
   锁本体 44×44 自然落在月心，转动的刻度盘仍按 .pm-lock__dial 自己溢出。
   梦侧四条子地址（书目 / 连线 / 说明 / 醒时之物）都挂这把锁。 */
:is([data-view-slot="beyond"], [data-view-slot="map"], [data-view-slot="note"], [data-view-slot="waking"]) .h-dream-lock {
  position: fixed; top: 11%; right: 22%; width: 76px; height: 76px;
  margin: 0; padding: 0; display: grid; place-items: center;
  z-index: 12; pointer-events: none;
}
:is([data-view-slot="beyond"], [data-view-slot="map"], [data-view-slot="note"], [data-view-slot="waking"]) .h-dream-lock > .pm-lock { pointer-events: auto; }
@media (max-width: 899px) {
  :is([data-view-slot="beyond"], [data-view-slot="map"], [data-view-slot="note"], [data-view-slot="waking"]) .h-dream-lock { right: 12%; width: 56px; height: 56px; }
}

/* ------------------------------------------------------------------ */
/* 门族（demos/rooms/doors.css）                                       */
/* ------------------------------------------------------------------ */

:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door { position: relative; display: inline-block; width: var(--door-w, 36px); aspect-ratio: 2 / 3; flex: none; vertical-align: bottom; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door > svg { display: block; width: 100%; height: 100%; overflow: visible; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-shut { opacity: 0; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-rim { fill: none; stroke: rgb(186 214 216 / .42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-glow { transition: opacity 300ms; }

/* 亮门 */
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="1"] > svg { filter: drop-shadow(0 0 var(--door-glow, 4px) rgb(var(--door-light-rgb) / .38)); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="1"] .pmd-rim { stroke: rgb(var(--door-light-rgb) / .3); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="1"] .pmd-paper { fill: var(--door-light); opacity: .72; }
/* 暗门：门洞无光、门体压到约 35% 明度，轮廓的月光描边不变，形制照样认得出 */
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="0"] .pmd-shut { opacity: 1; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="0"] .pmd-body { filter: brightness(.36) saturate(.62); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="0"] .pmd-glow { opacity: 0; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door[data-lit="0"] .pmd-extra { opacity: .5; }

/* 七族的悬停小动作（都在 .pmd-act 上，≤ 600ms） */
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-act { transform-box: fill-box; transition: transform 480ms var(--pm-ease-out, cubic-bezier(.2, .7, .2, 1)), opacity 480ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--frame .pmd-act { transform-origin: 50% 0; transition-duration: 520ms; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--frame .pmd-act { transform: scaleY(.72) skewX(-5deg); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--fall .pmd-act { transform-origin: 50% 0; transform: scaleY(.62); opacity: .72; transition-duration: 460ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--fall .pmd-act { transform: none; opacity: 1; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--return .pmd-act { transform-origin: 100% 50%; transform: scaleX(.5); transition-duration: 560ms; transition-timing-function: cubic-bezier(.3, 1.8, .5, 1); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--return .pmd-act { transform: scaleX(.26); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--seat .pmd-act { opacity: 0; transition: opacity 300ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--seat .pmd-s2 { transition-delay: 120ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--seat .pmd-s1 { transition-delay: 240ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--seat .pmd-act { opacity: .95; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--legend .pmd-act { transform-origin: 50% 50%; transition-duration: 380ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--legend .pmd-act { transform: rotate(-14deg) scale(1.16); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--folio .pmd-leaf1 { transform-origin: 0 50%; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--folio .pmd-leaf2 { transform-origin: 100% 50%; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--folio .pmd-act { transition-duration: 450ms; }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--folio .pmd-act { transform: scaleX(.7); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door--net .pmd-act { transform-origin: 50% 0; transition-duration: 560ms; transition-timing-function: cubic-bezier(.3, 1.9, .5, 1); }
:is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door--net .pmd-act { transform: skewX(-7deg); }

/* 不动：站内开关与系统设置一样干净 */
html.pm-motion-off :is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-act,
html.pm-motion-off :is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-glow { transition: none !important; }
html.pm-motion-off :is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door .pmd-act { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-act,
  :is([data-view-slot="beyond"], [data-view-slot="map"]) .pmd-glow { transition: none !important; }
  :is([data-view-slot="beyond"], [data-view-slot="map"]) .pm-door-host:is(:hover, :focus-visible, :focus-within) .pm-door .pmd-act { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 书目（demos/rooms/beyond.css）                                      */
/* ------------------------------------------------------------------ */

[data-view-slot="beyond"] .h-past-head { padding: var(--pm-s-8) 0 var(--pm-s-7); max-width: 34em; }
[data-view-slot="beyond"] .h-past-head .pm-display { color: #EEF5F3; text-shadow: 0 2px 0 rgb(0 0 0 / .5), 0 0 30px rgb(168 214 222 / .2); }
[data-view-slot="beyond"] .h-past-head .pm-lede { color: #C3D6D5; }
[data-view-slot="beyond"] .h-past-head .pm-rule { color: #8FB9BE; }

/* 门（作品）：一分卷一行卷名，同卷的门在格子里错落 */
[data-view-slot="beyond"] .h-woodgate { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; padding-bottom: var(--pm-s-9); }
[data-view-slot="beyond"] .h-gate { padding: 0 6px; }
[data-view-slot="beyond"] .h-gate__arch { transition: transform 420ms var(--pm-ease-out); }

/* 门里的光：--gate-rgb 由本族的门光算好（r3 不用 color-mix：基线 Chrome 90 不支持） */
[data-view-slot="beyond"] .h-gate__light { background: radial-gradient(ellipse 70% 55% at 50% 74%, #F4FBF8, rgb(var(--gate-rgb) / .55) 30%, rgb(var(--gate-rgb) / .2) 62%, #08171A 96%); }
/* 门槛下的字：背后一团夜色；整扇门不再可点（没有读页），所以不加铺满的链接层 */
[data-view-slot="beyond"] .h-gate__sill { display: grid; gap: 8px; justify-items: center; margin: -14px -30px -18px; padding: 14px 30px 18px; background: radial-gradient(ellipse 50% 50%, rgb(3 9 11 / .7), transparent 75%); }
[data-view-slot="beyond"] .h-gate__state { font: 12px var(--pm-font-mono); color: #9DB5B4; }
[data-view-slot="beyond"] .h-gate:hover .h-gate__arch,
[data-view-slot="beyond"] .h-gate:focus-within .h-gate__arch { transform: translateY(-4px); }

/* 卷头：《无墙之墙》二十篇 */
[data-view-slot="beyond"] .h-series { display: flex; align-items: flex-end; gap: 22px; margin: 0 0 40px; }
/* 卷头左边那块碑：r3 是总封的雾影（book-veil.webp），产品侧没有这张图，
   位置、尺寸、下沿化进雾的遮罩照留，只是空的（没有背景图就不画东西）。 */
[data-view-slot="beyond"] .h-series__veil { width: 96px; height: 144px; flex: none; background: center / cover no-repeat; opacity: .55; filter: blur(1.5px);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }
[data-view-slot="beyond"] .h-series__text { display: grid; gap: 8px; padding-bottom: 14px; }
[data-view-slot="beyond"] .h-series__title { margin: 0; font: 600 1.75rem/1.2 var(--pm-font-serif); color: #EEF5F3; text-shadow: 0 2px 8px #000; }

/* 篇名是链接（r3）：字色跟门牌，::after 铺满整扇门，于是一整扇门可点；
   焦点轮廓交给门拱（.h-gate:focus-within），链接自己不出框。 */
[data-view-slot="beyond"] .h-gate__title a { color: inherit; text-decoration: none; }
[data-view-slot="beyond"] .h-gate__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
[data-view-slot="beyond"] .h-gate__title a:focus-visible { outline: none; }
[data-view-slot="beyond"] .h-gate:focus-within .h-gate__arch { outline: 2px solid #9FE3EC; outline-offset: 5px; }
[data-view-slot="beyond"] .h-gate--book:focus-within .h-gate__arch { outline-offset: 8px; }

/* 卷名一行：前面一扇该族的缩样小门 */
[data-view-slot="beyond"] .h-vol-head { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 10px; margin: 18px 0 -8px; padding-bottom: 8px;
  font: 600 13px/1 var(--pm-font-sans); letter-spacing: .24em; color: #BFDDE4; border-bottom: 1px solid rgb(168 214 222 / .16); }
[data-view-slot="beyond"] .h-vol-head:first-child { margin-top: 0; }
[data-view-slot="beyond"] .h-vol-head .pm-door { --door-w: 16px; --door-glow: 2px; }

/* 书目的门 = 分卷门族：亮门有门后光晕与地上的一摊光，暗门都收起 */
[data-view-slot="beyond"] .h-gate--book .h-gate__arch { width: min(78%, 216px); aspect-ratio: 2 / 3; padding: 0; border-radius: 0; background: none; box-shadow: none; }
[data-view-slot="beyond"] .h-gate--book .h-gate__light { position: absolute; inset: -10% -26% -4%; height: auto; overflow: visible; border-radius: 50%; box-shadow: none; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 56%, rgb(var(--door-light-rgb) / .2), rgb(var(--door-light-rgb) / .06) 55%, transparent 72%); transition: opacity 300ms; }
[data-view-slot="beyond"] .h-gate--book .h-gate__light::before,
[data-view-slot="beyond"] .h-gate--book .h-gate__light::after { display: none; }
[data-view-slot="beyond"] .h-gate--book[data-lit="0"] .h-gate__light { opacity: 0; }
[data-view-slot="beyond"] .h-gate--book .h-past-door { --door-w: 100%; --door-glow: 12px; position: relative; display: block; left: auto; top: auto; bottom: auto; width: 100%;
  transform: none; border-radius: 0; background: none; box-shadow: none; transition: none; }
[data-view-slot="beyond"] .h-gate--book .h-gate__spill { margin-top: -10px; }
[data-view-slot="beyond"] .h-gate--book[data-lit="0"] .h-gate__spill { opacity: 0; }
[data-view-slot="beyond"] .h-gate--book .h-gate__kind { color: #9FD8E8; }
[data-view-slot="beyond"] .h-gate--book[data-lit="1"] .h-gate__state { color: var(--door-light); }
[data-view-slot="beyond"] .h-woodgate > .h-gate--low { margin-top: 48px; }
html.pm-motion-off [data-view-slot="beyond"] .h-gate__arch,
html.pm-motion-off [data-view-slot="beyond"] .h-gate--book .h-gate__light { transition: none; }
html.pm-motion-off [data-view-slot="beyond"] .h-gate:hover .h-gate__arch { transform: none; }

/* 取出一页（P-11 r4 阅读）：r3 由 body[data-v="reading"] 打开；产品还没有阅读
   视图，所以这一节照 r3 的默认收着，里面的纸不铺任何示范正文。 */
[data-view-slot="beyond"] .h-past-reading { display: none; padding: var(--pm-s-7) 0 var(--pm-s-9); }
[data-view-slot="beyond"] .h-past-close { display: inline-flex; align-items: center; gap: 8px; color: #BFE6EC; text-decoration: none; font-family: var(--pm-font-serif); margin-bottom: 22px; padding: 6px 2px; }
[data-view-slot="beyond"] .h-past-close svg { width: 16px; height: 16px; }
[data-view-slot="beyond"] .h-past-close:hover { color: #EEF5F3; }
[data-view-slot="beyond"] .h-past-leaf.pm-read.h-vellum { padding: var(--pm-s-7) var(--pm-s-7) var(--pm-s-8); border-radius: 2px; max-width: 980px; margin-inline: auto;
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgb(var(--h-moon) / .26), transparent 72%), linear-gradient(180deg, transparent 70%, rgb(30 50 54 / .12)), url("../../assets/decor/foxing.png"), url("../../assets/decor/paper-night.webp");
  background-size: 100% 100%, 100% 100%, 100% 100%, 512px 512px;
  box-shadow: inset 0 0 0 1px rgb(255 250 236 / .35), inset 0 0 44px rgb(110 76 30 / .28), 0 50px 80px -30px #000, 0 0 0 1px rgb(0 0 0 / .4), 0 0 80px rgb(var(--h-moon) / .12); }
[data-view-slot="beyond"] .h-past-leaf .pm-read__body::before { content: ""; display: block; height: 2px; margin: -18px 0 26px; background: linear-gradient(90deg, transparent, rgb(var(--h-moon) / .6), transparent); }

/* 窄屏：门槛下的字不再用 -30px 的负边距（390 宽会顶出 .pm-wrap） */
@media (max-width: 899px) {
  [data-view-slot="beyond"] .h-past-head { padding-top: var(--pm-s-6); }
  [data-view-slot="beyond"] .h-woodgate > .h-gate--low { margin-top: 0; }
}
@media (max-width: 599px) {
  [data-view-slot="beyond"] .h-woodgate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  [data-view-slot="beyond"] .h-gate { padding: 0; }
  [data-view-slot="beyond"] .h-gate--book .h-gate__arch { width: min(88%, 150px); }
  [data-view-slot="beyond"] .h-gate--book .h-gate__title { font-size: 1rem; }
  [data-view-slot="beyond"] .h-gate__sill { margin-inline: -8px; padding-inline: 8px; }
  [data-view-slot="beyond"] .h-vol-head { font-size: 12px; letter-spacing: .16em; }
  [data-view-slot="beyond"] .h-series__veil { width: 72px; height: 108px; }
  [data-view-slot="beyond"] .h-series__title { font-size: 1.375rem; }
}

/* ------------------------------------------------------------------ */
/* 连线（demos/rooms/map.css）                                         */
/* ------------------------------------------------------------------ */

/* 连线槽里只有连线那一节；说明与醒时之物各在自己的槽里，一屏一节 */
[data-view-slot="map"] .h-map-view { display: none; position: relative; z-index: 1; }
[data-view-slot="map"] .h-map-view--index { display: block; }

[data-view-slot="map"] .h-map-head { max-width: 34em; padding: var(--pm-s-7) 0 var(--pm-s-5); }
[data-view-slot="map"] .h-map-head .pm-kicker { color: #9FD8E8; }
[data-view-slot="map"] .h-map-head h1 { font: 600 clamp(2rem, 1.3rem + 2vw, 3rem)/1.2 var(--pm-font-serif); color: #EEF5F3; margin: 0 0 10px; text-shadow: 0 2px 0 rgb(0 0 0 / .5), 0 0 30px rgb(168 214 222 / .2); }
[data-view-slot="map"] .h-map-head p { font: 1.0625rem/1.85 var(--pm-font-serif); color: #C3D6D5; margin: 0; }

/* 星图：一块夜空，横向可滚（390 宽也不顶出页面） */
[data-view-slot="map"] .h-map-sky { position: relative; height: 640px; margin: 0 0 var(--pm-s-4); border-radius: 6px; overflow-x: auto; overflow-y: hidden;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, rgb(3 9 11 / .8), rgb(3 9 11 / .55) 70%, rgb(3 9 11 / .3));
  box-shadow: inset 0 0 0 1px rgb(168 214 222 / .14); }
[data-view-slot="map"] .h-map-plane { position: relative; width: 1214px; min-width: 100%; height: 640px; }
[data-view-slot="map"] .h-map-lines { position: absolute; left: 0; top: 0; width: 1214px; height: 640px; pointer-events: none; overflow: visible; }
[data-view-slot="map"] .h-ln { fill: none; pointer-events: none; stroke-linecap: round; transition: opacity 200ms, stroke-width 200ms; }
/* 暗线：两头没都发出来，只有 .12 */
[data-view-slot="map"] .h-ln[data-on="0"] { stroke: rgb(196 220 222); stroke-width: 1; opacity: .12; }
[data-view-slot="map"] .h-ln[data-on="0"][data-kind="echo"] { stroke-width: 1.6; stroke-dasharray: 0 4.6; }

/* 门与门牌（r3 是 <a class="h-map-node pm-door-host">：字色与下划线按链接清掉） */
[data-view-slot="map"] .h-map-node { position: absolute; z-index: 1; width: 124px; margin-left: -62px; display: grid; justify-items: center; gap: 5px; text-align: center; text-decoration: none; color: #DCE7E5;
  transition: opacity 200ms, filter 200ms; }
[data-view-slot="map"] .h-map-node .h-map-node__door { --door-w: 36px; transition: transform 260ms var(--pm-ease-out); }
[data-view-slot="map"] .h-map-node:hover .h-map-node__door,
[data-view-slot="map"] .h-map-node:focus-visible .h-map-node__door { transform: translateY(-2px); }
[data-view-slot="map"] .h-map-node__label { display: grid; gap: 1px; max-width: 124px; padding: 3px 7px 4px; border-radius: 3px; background: rgb(3 9 11 / .7); }
[data-view-slot="map"] .h-map-node__label b { font: 600 12px/1.35 var(--pm-font-serif); color: #EEF5F3; }
[data-view-slot="map"] .h-map-node__label .no { font: 11px/1.3 var(--pm-font-mono); color: #A9C1C0; white-space: nowrap; }
[data-view-slot="map"] .h-map-plane[data-focus] .h-map-node:not([data-on]) { opacity: .3; filter: saturate(.2); }
[data-view-slot="map"] .h-map-node:focus-visible { outline: none; }
[data-view-slot="map"] .h-map-node:focus-visible .h-map-node__label { box-shadow: 0 0 0 2px #9FE3EC; }
html.pm-motion-off [data-view-slot="map"] .h-map-node,
html.pm-motion-off [data-view-slot="map"] .h-map-node .h-map-node__door { transition: none; }
html.pm-motion-off [data-view-slot="map"] .h-map-node:hover .h-map-node__door,
html.pm-motion-off [data-view-slot="map"] .h-map-node:focus-visible .h-map-node__door { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-view-slot="map"] .h-map-node, [data-view-slot="map"] .h-map-node .h-map-node__door,
  [data-view-slot="map"] .h-ln { transition: none; }
  [data-view-slot="map"] .h-map-node:hover .h-map-node__door { transform: none; }
}

/* 卷名标签：星图顶上一排，前面一扇该族的缩样小门 */
[data-view-slot="map"] .h-map-vol { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: flex-end; gap: 6px; font: 600 11px/1 var(--pm-font-sans); letter-spacing: .2em; color: rgb(190 222 230 / .82);
  white-space: nowrap; pointer-events: none; }
[data-view-slot="map"] .h-map-vol .pm-door { --door-w: 10px; }
[data-view-slot="map"] .h-map-vol .pm-door > svg { filter: none; }

/* 图例：平实的话 */
[data-view-slot="map"] .h-map-legend { display: grid; gap: 8px; font-size: 13px; line-height: 1.6; color: #C3D6D5; }
[data-view-slot="map"] .h-map-legend p[hidden] { display: none; }
[data-view-slot="map"] .h-map-legend p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
[data-view-slot="map"] .h-lg-door { display: inline-flex; }
[data-view-slot="map"] .h-lg-door .pm-door,
[data-view-slot="map"] .h-lg-fam .pm-door { --door-w: 14px; }
[data-view-slot="map"] .h-lg-gap { width: 18px; }
[data-view-slot="map"] .h-lg-fam { display: inline-flex; align-items: flex-end; gap: 5px; margin-right: 12px; color: #DCE7E5; }
[data-view-slot="map"] .h-lg-line { display: inline-block; width: 30px; height: 0; border-top: 1px solid rgb(196 220 222 / .5); }
[data-view-slot="map"] .h-lg-line--dot { border-top: 0; height: 2px; background: radial-gradient(circle, rgb(196 220 222 / .7) 0 1px, transparent 1.2px) 0 50% / 5px 2px repeat-x; }
[data-view-slot="map"] .h-lg-line--on { border-top: 1.5px solid #E9F3EF; box-shadow: 0 0 6px rgb(207 232 236 / .6); }
/* 站长登记的两种说法：线旁写着名字（found）／线中间断开（open）。这一行只在真有
   登记时出现（#lg-reg 默认 hidden），样式照样备着。 */
[data-view-slot="map"] .h-lg-line--found { border-top: 2px solid #FFFFFF; box-shadow: 0 0 8px rgb(207 232 236 / .8); }
[data-view-slot="map"] .h-lg-line--open { border-top: 0; height: 1.5px; background: linear-gradient(90deg, #E9F3EF 0 40%, transparent 40% 60%, #E9F3EF 60%); }
[data-view-slot="map"] .h-map-hint { font-size: 13px; color: #A9C1C0; margin: 10px 0 0; }
[data-view-slot="map"] .h-map-empty { margin: 0 0 18px; padding: 8px 0 0; font: 1.0625rem/1.8 var(--pm-font-serif); color: #C3D6D5; text-align: center; }

/* 关系清单：读屏与窄屏的等价物 */
@media (max-width: 599px) { [data-view-slot="map"] .h-map-legend { font-size: 12.5px; } [data-view-slot="map"] .h-lg-fam { margin-right: 8px; } }

/* 梦态只有三个去向（书目 / 连线 / 醒来），窄屏也放得下，不必收进抽屉；
   抽屉里是醒态栏目，在梦态打开只会把人拽回醒态。 */
html[data-state="dream"] nav.pm-nav { display: flex; }
html[data-state="dream"] .pm-menubtn { display: none; }
@media (max-width: 899px) {
  html[data-state="dream"] nav.pm-nav { gap: 10px; margin-left: auto; }
  html[data-state="dream"] nav.pm-nav a { font-size: 13px; }
  html[data-state="dream"] nav.pm-nav svg { display: none; }
}
/* 月亮是亮的，锁是银的：加一层暗边，让它在月面上读得出来不是环形山 */
:is([data-view-slot="beyond"], [data-view-slot="map"], [data-view-slot="note"], [data-view-slot="waking"]) .h-dream-lock .pm-lock__rose {
  filter: drop-shadow(0 0 3px rgb(0 0 0 / .55)) drop-shadow(0 1px 1px rgb(0 0 0 / .7));
}

/* 梦态不显示门楣上那枚锁：梦侧自己的锁在月亮里（同一功能，位置不同）。 */
html[data-state="dream"] .pm-lintel .h-foyer-lock { display: none; }

/* ---------------- 梦 · 说明（r3 map.html?v=note，逐字搬；图片路径改到产品 assets） ---------------- */
[data-view-slot="note"] .h-map-note { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--pm-s-7); align-items: center; padding: var(--pm-s-7) 0 var(--pm-s-9); }
[data-view-slot="note"] .h-map-frame { position: relative; justify-self: center; width: min(280px, 90%); aspect-ratio: 5 / 8; pointer-events: none; }
[data-view-slot="note"] .h-map-frame::before { content: ""; position: absolute; inset: 0; border-radius: 999px 999px 4px 4px / 999px 999px 4px 4px;
  background: linear-gradient(90deg, transparent calc(50% - 3px), #2A3A3C calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
              linear-gradient(180deg, transparent 52%, #2A3A3C 52% calc(52% + 6px), transparent calc(52% + 6px)),
              radial-gradient(ellipse 60% 40% at 50% 30%, rgb(168 214 222 / .35), transparent 70%), rgb(10 21 24 / .4);
  box-shadow: inset 0 0 0 14px #3F5556, inset 0 0 0 16px #1D2C2E, 0 30px 40px -24px #000; }
[data-view-slot="note"] .h-map-frame::after { content: ""; position: absolute; left: -20%; right: -60%; top: 30%; height: 110%; transform: skewX(-24deg); transform-origin: 0 0;
  background: linear-gradient(180deg, rgb(168 214 222 / .16), transparent 80%); filter: blur(10px); }
[data-view-slot="note"] .h-map-leaf { position: relative; max-width: 34em; padding: 34px 36px 30px; border-radius: 3px; color: var(--pm-ink);
  background: radial-gradient(ellipse 80% 60% at 10% 0%, rgb(168 214 222 / .28), transparent 70%), url("../../assets/decor/foxing.png") 0 0 / 100% 100%, url("../../assets/decor/paper-night.webp") 0 0 / 512px 512px, #EFE4CC;
  box-shadow: inset 0 0 40px rgb(110 76 30 / .25), 0 30px 50px -26px #000; }
[data-view-slot="note"] .h-map-leaf h1 { font: 600 2rem/1.25 var(--pm-font-serif); margin: 0 0 16px; color: var(--pm-ink); }
[data-view-slot="note"] .h-map-leaf p { font: 1.0625rem/1.9 var(--pm-font-serif); margin: 0 0 .5em; }
[data-view-slot="note"] .h-map-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(110 76 30 / .3); }
[data-view-slot="note"] .h-map-out small { font-size: 13px; color: var(--pm-ink-2); }
[data-view-slot="note"] .h-map-tag { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px 0 26px; border-radius: 19px; position: relative; text-decoration: none;
  color: #1D2A2C; font: 600 15px/1 var(--pm-font-serif); background: linear-gradient(180deg, #F3EBD6, #DCCDAA); box-shadow: inset 0 0 0 1px #6B8C90, 0 6px 10px -6px rgb(0 0 0 / .7); }
[data-view-slot="note"] .h-map-tag::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #0B1A1E; box-shadow: 0 0 0 2px #A9C1C0; }
[data-view-slot="note"] .h-map-tag:hover { box-shadow: inset 0 0 0 1px #2F6E76, 0 0 0 3px rgb(111 214 227 / .25), 0 8px 12px -6px rgb(0 0 0 / .7); }
[data-view-slot="note"] .h-map-tag:focus-visible { outline: 2px solid #0B1A1E; outline-offset: 2px; box-shadow: 0 0 0 4px #9FE3EC; }

/* 说明视图：窗框挪到右边、立在月亮正下方——月光穿过窗框，斜落到左边那页纸上 */
@media (min-width: 900px) { [data-view-slot="note"] .h-map-note { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-top: var(--pm-s-8); } }
[data-view-slot="note"] .h-map-frame { order: 2; margin-top: 60px; }
[data-view-slot="note"] .h-map-frame::after { left: -150%; right: 30%; top: 22%; transform: skewX(28deg); transform-origin: 100% 0;
  background: linear-gradient(180deg, rgb(168 214 222 / .2), rgb(168 214 222 / .06) 60%, transparent 85%); }
[data-view-slot="note"] .h-map-leaf { z-index: 1; }
@media (max-width: 899px) {
  [data-view-slot="note"] .h-map-frame { order: 0; margin-top: 0; width: min(150px, 46%); }
  [data-view-slot="note"] .h-map-frame::after { display: none; }
}

/* ---------------- 梦 · 醒时之物（r3 map.html?v=waking，逐字搬） ---------------- */
[data-view-slot="waking"] .h-map-waking { display: grid; justify-items: center; gap: var(--pm-s-6); padding: var(--pm-s-7) 0 var(--pm-s-9); }
[data-view-slot="waking"] .h-map-house { position: relative; width: min(520px, 100%); height: 200px; pointer-events: none; }
/* 远处馆的剪影：屋脊、一座小塔、几扇黑窗，只有一扇亮着 */
[data-view-slot="waking"] .h-map-house::before { content: ""; position: absolute; inset: 0; background: #0A1416;
  clip-path: polygon(0 100%, 0 58%, 14% 58%, 14% 44%, 30% 30%, 46% 44%, 46% 52%, 58% 52%, 58% 20%, 62% 10%, 66% 20%, 66% 52%, 78% 52%, 78% 40%, 90% 40%, 90% 58%, 100% 58%, 100% 100%); }
[data-view-slot="waking"] .h-map-house__win { position: absolute; width: 12px; height: 18px; border-radius: 6px 6px 1px 1px; background: #12201F; }
[data-view-slot="waking"] .h-map-house__win--lit { background: radial-gradient(ellipse at 50% 60%, #FFE6B0, #F2B866 60%, #A86A2A); box-shadow: 0 0 18px 6px rgb(255 196 112 / .45), 0 0 60px 24px rgb(255 196 112 / .12); }
[data-view-slot="waking"] .h-map-house::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30px; height: 70px; background: url("../../assets/house/mist.webp") 0 100% / 700px 100% repeat-x; opacity: .7;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
[data-view-slot="waking"] .h-map-card { width: min(480px, 100%); padding: 32px 34px 26px; border-radius: 12px; color: #221D17; font-family: var(--pm-font-serif); line-height: 1.9;
  background: linear-gradient(180deg, #F5EEDC, #E7DCC2); box-shadow: inset 0 0 40px rgb(110 76 30 / .18), 0 28px 44px -26px #000; }
[data-view-slot="waking"] .h-map-card p { margin: 0; font-size: 1.0625rem; }
[data-view-slot="waking"] .h-map-card .h-map-back { margin-top: 20px; }
[data-view-slot="waking"] .h-map-card .h-map-back a { color: #1F5F68; font-weight: 600; }
[data-view-slot="waking"] .h-map-card small { display: block; margin-top: 4px; font-size: var(--pm-fs-sm); color: #5A5045; }

@media (max-width: 899px) {
  [data-view-slot="note"] .h-map-note { grid-template-columns: 1fr; gap: var(--pm-s-5); }
  [data-view-slot="note"] .h-map-frame { width: min(180px, 60%); }
  [data-view-slot="note"] .h-map-leaf { padding: 28px 22px 24px; }
  [data-view-slot="waking"] .h-map-house { height: 140px; }
}