/* 意中阁 · 游园层
   静帧场景 + 分级调色 + 持续动效层 + 物件热点 + 隐入景物的极简 HUD
   读书层样式不受影响；场景状态与交互逻辑一律不动 */

body.theme-garden { overflow: hidden; background: #10120F; }
body.theme-garden .paper { display: none; }
body.theme-garden .toast { z-index: 90; }

.world[hidden] { display: none !important; }
.world {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: #10120F; color: #F4EFE2;
  --fz-verse: 17px;
  font-family: Georgia, "Songti SC", "STSong", "SimSun", serif;
}

/* ── 场景与镜头 ── */
.w-stage { position: absolute; inset: 0; overflow: hidden; }
.w-parallax {
  position: absolute; inset: -4%;
  transform: translate3d(var(--px, 0%), var(--py, 0%), 0) scale(1.02);
  transition: transform .55s ease-out;
  will-change: transform;
}
.w-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transition: filter .9s ease, background-size .9s ease, background-position .9s ease;
}
.w-bg.is-enter { animation: w-push 2.4s cubic-bezier(.2, .72, .2, 1) both; }
@keyframes w-push { from { transform: scale(1.075); } to { transform: scale(1); } }

/* 四景分级调色：靠色温 / 饱和 / 对比分天色，不靠把画面压黑 */
.world[data-light="dusk"]  .w-bg { filter: brightness(.9)  saturate(1.05) contrast(1.05) sepia(.09) hue-rotate(-6deg); }
.world[data-light="dawn"]  .w-bg { filter: brightness(1.04) saturate(.93) contrast(1.02) hue-rotate(6deg); }
.world[data-light="noon"]  .w-bg { filter: brightness(1.07) saturate(1.12) contrast(1.06) sepia(.05); }
.world[data-light="night"] .w-bg { filter: brightness(.9)  saturate(.84) contrast(1.06) hue-rotate(-14deg); }

/* 色温层：mix-blend-mode:color 只改色相与饱和、不动亮度，夜色才不会压黑画面 */
.w-parallax::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: color; opacity: .4; transition: background .9s ease;
}
.world[data-light="dusk"]  .w-parallax::before { background: linear-gradient(180deg, #4c3a68 0%, #a8653e 100%); }
.world[data-light="dawn"]  .w-parallax::before { background: linear-gradient(180deg, #7fa8aa 0%, #d9cba8 100%); }
.world[data-light="noon"]  .w-parallax::before { background: linear-gradient(180deg, #f0cd92 0%, #8b9d7e 100%); }
.world[data-light="night"] .w-parallax::before {
  background: linear-gradient(180deg, #1c3e6e 0%, #122c46 100%); opacity: .62;
}

/* 胶片颗粒：极轻一层，去掉写实图的「数码干净感」 */
.w-parallax::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .1; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, .5) .5px, transparent .6px);
  background-size: 3px 3px;
}

.w-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 74% at 50% 45%, transparent 42%, rgba(10, 14, 12, .42) 100%);
}
.world[data-light="night"] .w-veil {
  background: radial-gradient(ellipse 74% 68% at 50% 46%, transparent 38%, rgba(6, 10, 16, .48) 100%);
}
/* 灯火暖晕：screen 只提亮局部，不压暗画面 */
.world[data-light="dusk"] .w-veil::before,
.world[data-light="night"] .w-veil::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 100px at 21% 43%, rgba(255, 184, 100, .30), transparent 72%),
    radial-gradient(circle 78px at 76% 39%, rgba(255, 184, 100, .24), transparent 72%),
    radial-gradient(circle 62px at 51% 63%, rgba(255, 198, 126, .18), transparent 72%);
  animation: w-lamp 4.6s ease-in-out infinite alternate;
}
@keyframes w-lamp { from { opacity: .58; } to { opacity: 1; } }

/* 夜空染色：原图是白天暖光，近白天空用 mix-blend-mode:color 改不动色相。
   只在画面上半部叠极淡深蓝，地面、水潭与宣纸完全不染；
   不压整体亮度，避免回到「对比度太强看不见背景」的老问题。 */
.world[data-light="night"] .w-veil::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(22, 42, 78, .34) 0%,
    rgba(22, 42, 78, .20) 30%,
    rgba(22, 42, 78, .06) 52%,
    rgba(22, 42, 78, 0) 66%);
}

/* 展笺打开时临时提亮夜景：让亭台楼阁水潭重新可辨，不改动夜景本身 */
.world[data-light="night"]:has(.w-panel--poem.is-on) .w-bg {
  filter: brightness(1.03) saturate(.96) hue-rotate(-4deg);
  /* 展笺特写：镜头缓推，把石桌上原图自带的空白纸裁出视野，避免「两张纸」穿帮 */
  background-size: auto 145%;
  background-position: center 0%;
}
.world[data-light="night"]:has(.w-panel--poem.is-on) .w-veil {
  background: radial-gradient(ellipse 76% 70% at 50% 46%, transparent 50%, rgba(6, 10, 16, .20) 100%);
}

/* ── 持续动效层：雾分两层反向流动、水面细波、微尘、香炉青烟 ── */
.w-mist {
  position: absolute; inset: 0; pointer-events: none;
  transform: translateX(var(--mx, 0%));
  background: radial-gradient(ellipse 58% 16% at 48% 62%, rgba(232, 240, 232, .30), transparent 74%);
  animation: w-drift 19s ease-in-out infinite alternate;
}
.w-mist::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 13% at 24% 72%, rgba(232, 240, 232, .26), transparent 76%);
  animation: w-drift2 23s ease-in-out infinite alternate;
}
.w-mist::after {
  content: ""; position: absolute; left: 0; right: 0; top: 60%; height: 32%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(226, 238, 232, .14) 0 1px, transparent 1px 10px);
  opacity: .42; animation: w-ripple 8.5s linear infinite;
}
@keyframes w-drift  { from { opacity: .34; } to { opacity: .66; } }
@keyframes w-drift2 { from { opacity: .55; transform: translateX(-4%); } to { opacity: .3; transform: translateX(5%); } }
@keyframes w-ripple { from { transform: translateY(0); } to { transform: translateY(10px); } }

.w-dust {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  transform: translateX(var(--mx, 0%));
  background-image:
    radial-gradient(2px 2px at 18% 32%, rgba(255, 246, 220, .6), transparent 60%),
    radial-gradient(2px 2px at 63% 21%, rgba(255, 246, 220, .45), transparent 60%),
    radial-gradient(1px 1px at 81% 57%, rgba(255, 246, 220, .5), transparent 60%),
    radial-gradient(2px 2px at 34% 74%, rgba(255, 246, 220, .35), transparent 60%);
  animation: w-float 14s ease-in-out infinite alternate;
}
@keyframes w-float { from { transform: translate(0, 0); } to { transform: translate(1.5%, -2%); } }
/* 香炉青烟：只在琴台（午后）这一景升起 */
.world[data-light="noon"] .w-dust::after {
  content: ""; position: absolute; right: 19%; bottom: 34%; width: 3px; height: 74px;
  background: linear-gradient(0deg, rgba(240, 240, 228, .6), rgba(240, 240, 228, 0));
  border-radius: 50%; transform-origin: bottom center;
  animation: w-smoke 5.5s ease-in-out infinite alternate;
}
@keyframes w-smoke {
  from { transform: skewX(-7deg) translateY(0); opacity: .45; }
  to   { transform: skewX(9deg) translateY(-12px); opacity: .9; }
}

/* ── 物件热点：不是网页按钮，是景物里自己会呼吸的光 ── */
.w-hots { position: absolute; inset: 0; transition: opacity .35s ease; }
.w-hot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border: 0; background: transparent; color: inherit;
  cursor: pointer; font-family: inherit;
}
.w-hot-dot {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  background: #F0D69B; border: 1px solid rgba(255, 246, 220, .85);
  animation: w-breathe 3.4s ease-in-out infinite;
  transition: transform .22s ease;
}
@keyframes w-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(240, 214, 155, .12), 0 0 12px rgba(240, 214, 155, .4); }
  50%      { box-shadow: 0 0 0 9px rgba(240, 214, 155, .2), 0 0 20px rgba(240, 214, 155, .72); }
}
.w-hot.is-seen .w-hot-dot {
  background: #B9A988; animation: none;
  box-shadow: 0 0 0 4px rgba(185, 169, 136, .12);
}
.w-hot:hover .w-hot-dot, .w-hot:focus-visible .w-hot-dot { transform: scale(1.3); }
.w-hot-label {
  font-size: 12px; letter-spacing: .16em; white-space: nowrap;
  padding: 3px 7px; border: 0; border-left: 1px solid rgba(240, 214, 155, .45);
  background: rgba(10, 14, 12, .34);
  color: #F6E4BC; opacity: .9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .85);
  transition: opacity .2s ease, color .2s ease, background .2s ease;
}
.w-hot:hover .w-hot-label, .w-hot:focus-visible .w-hot-label {
  opacity: 1; color: #FFF3D4; background: rgba(16, 20, 16, .6);
}

/* ── HUD：从播放器控制条退成压角题签 ── */
.w-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 62;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px;
  background: linear-gradient(0deg, rgba(10, 12, 10, .52), rgba(10, 12, 10, 0));
}
.w-place { font-size: 15px; letter-spacing: .16em; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.w-sub { font-size: 11px; color: #C9C3B4; letter-spacing: .1em; text-shadow: 0 1px 5px rgba(0, 0, 0, .8); }
.w-spacer { flex: 1; }
/* 印记册入口：压角干墨款，与香龛同一语汇。朱砂只留给册页里的印，
   不再拿红框徽章当按钮——红框一出现，画面就从戏里掉回网页。 */
.w-mark {
  font-size: 11px; letter-spacing: .14em; white-space: nowrap;
  color: #C9A96A; padding: 3px 2px 3px 10px;
  border: 0; border-left: 1px solid rgba(201, 169, 106, .5); border-radius: 0;
  background: transparent; text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.w-dots { display: flex; gap: 6px; }
.w-dot {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: inherit; cursor: pointer;
  border: 1px solid rgba(244, 239, 226, .28); background: rgba(16, 18, 15, .24); color: #B9B2A2;
}
.w-dot.is-visited { color: #E8C77A; border-color: rgba(232, 199, 122, .52); }
.w-dot.is-here { background: #A32D2D; border-color: #A32D2D; color: #fff; }
.w-btn {
  font-size: 11px; letter-spacing: .1em; font-family: inherit; cursor: pointer;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid rgba(244, 239, 226, .26); background: rgba(16, 18, 15, .24); color: #E6DFD0;
}
.w-btn:hover { border-color: rgba(232, 199, 122, .7); }
.w-btn.is-off { color: #8A8377; }

.w-theme-float {
  position: fixed; top: 16px; right: 18px; z-index: 70;
  font-size: 12px; letter-spacing: .18em; font-family: inherit; cursor: pointer;
  padding: 7px 4px 7px 12px; border-radius: 0;
  background: rgba(18, 21, 18, .46); color: #E8DFC8;
  border: 0; border-bottom: 1px solid rgba(232, 199, 122, .5);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
}
.w-theme-float:hover { background: rgba(30, 34, 29, .72); }
body.theme-book .w-theme-float {
  background: transparent; color: #6A5A3E; border-bottom-color: rgba(120, 100, 70, .5);
  text-shadow: none;
}

/* ── 转场 ── */
.w-fade {
  position: absolute; inset: 0; z-index: 64; pointer-events: none;
  background: #0B0D0B; opacity: 0; transition: opacity .42s ease;
}
.w-fade.is-on { opacity: 1; }

/* ── 物件面板 ── */
.w-panel { position: absolute; inset: 0; z-index: 58; display: none; }
.w-panel.is-on { display: block; }
.w-panel-mask { position: absolute; inset: 0; background: rgba(9, 12, 10, .58); }
.w-panel-inner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.w-panel-inner > * { pointer-events: auto; }

.w-card {
  width: min(360px, 84vw); box-sizing: border-box;
  background: #FAF6EA; color: #2C2A26;
  border: 1px solid rgba(150, 130, 96, .5); border-radius: 3px;
  padding: 18px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.w-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.w-card h3 { font-size: 15px; font-weight: 500; margin: 0; letter-spacing: .1em; }
.w-card p { font-size: 13px; line-height: 1.8; color: #5F5E5A; margin: 10px 0 0; }
.w-card em { color: #A32D2D; font-style: normal; }
.w-close {
  border: 0; background: transparent; color: #8A7A5C;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit;
}

/* 十八阕曲牌浮签 */
.w-panel--tracks .w-panel-inner { justify-content: flex-end; }
.w-tracks {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw); box-sizing: border-box; overflow: auto;
  background: #F4EFE2; color: #2C2A26;
  padding: 22px 18px 80px; box-shadow: -20px 0 60px rgba(0, 0, 0, .45);
}
.w-tracks-head { display: flex; justify-content: space-between; align-items: center; }
.w-tracks h3 { font-size: 16px; font-weight: 500; margin: 0; letter-spacing: .12em; }
.w-tracks-note { font-size: 11px; color: #8A7A5C; line-height: 1.75; margin: 10px 0 16px; }
.w-float-list { display: flex; flex-direction: column; gap: 8px; }
.w-float {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(150, 130, 96, .32); background: rgba(255, 255, 255, .42);
  transition: border-color .2s ease, background .2s ease;
}
.w-float:hover { background: #fff; }
.w-float.is-on { border-color: #A32D2D; background: #FFF7EE; }
.w-float-seal {
  width: 30px; height: 30px; flex: none; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: #A32D2D; color: #fff; font-size: 14px;
}
.w-float-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.w-float-body b {
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-float-body small {
  font-size: 11px; color: #8A7A5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-float-go {
  font-size: 11px; color: #A32D2D; text-decoration: none; white-space: nowrap;
  border-left: 1px solid rgba(150, 130, 96, .3); padding-left: 9px;
}

/* 展笺：复用 scene.css 的宣纸 / 竖排规则，只改定位 */
/* 遮罩改为「纸后稍暗、四周放开」：中心衬纸不飘，边缘透出园林实景 */
.w-panel--poem .w-panel-mask {
  background-color: rgba(8, 10, 9, .14);
  background-image: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8, 10, 9, .22), rgba(8, 10, 9, 0));
}
/* 展笺时 HUD 底部渐变收淡，避免再压住纸的下缘 */
.world:has(.w-panel--poem.is-on) .w-hud {
  background: linear-gradient(0deg, rgba(10, 12, 10, .2), rgba(10, 12, 10, 0));
}
/* 展笺特写时收起热点，避免标签抢画面、也避免推近后与景物错位 */
.world:has(.w-panel--poem.is-on) .w-hots { opacity: 0; pointer-events: none; }
.w-paper-reveal { position: relative; width: min(660px, 76vw); height: min(500px, 66vh); }
/* 纸周围一圈极淡的暗角造景深；不压黑四角，园林依旧可辨 */
.w-paper-reveal::before {
  content: ""; position: absolute; inset: -46px; pointer-events: none;
  background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(8, 10, 9, .1), transparent 76%);
}
.w-paper-reveal .desk-paper { position: absolute; left: 8%; top: 7%; width: 84%; height: 86%; }
/* 收笺不用网页弹窗的圆形 ×，改用一方朱印 */
.w-close--float {
  position: absolute; right: -10px; top: -10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 2px;
  background: #FAF6EA; color: #A32D2D; border: 1px solid #A32D2D;
  font-size: 0; line-height: 1; padding: 0;
}
.w-close--float::after { content: "收"; font-size: 13px; }

/* ── 窄屏 ── */
@media (max-width: 900px) {
  .w-hud { gap: 8px; padding: 9px 12px; }
  .w-sub { display: none; }
  .w-place { font-size: 13px; }
  .w-hot-label { font-size: 11px; padding: 3px 2px; letter-spacing: .1em; }
  .w-hot-dot { width: 10px; height: 10px; }
  .w-tracks { width: 100%; }
  .w-paper-reveal { width: 88vw; height: 68vh; }
  .w-paper-reveal .desk-paper {
    left: 4%; top: 4%; width: 92%; height: 92%; padding: 10px 12px;
  }
  /* 与 scene.css 横排降级同步，抵消 (0,3,0) 优先级链 */
  .w-paper-reveal .desk-paper .verse {
    width: 100%; max-width: none; height: auto; overflow: visible;
  }
}

@media (max-width: 600px) {
  .w-hud { gap: 6px; padding: 8px 10px; }
  .w-place { font-size: 12px; letter-spacing: .08em; }
  .w-mark { font-size: 10px; letter-spacing: .04em; }
  .w-dots { gap: 4px; }
  .w-dot { width: 22px; height: 22px; font-size: 10px; }
  .w-btn { font-size: 10px; padding: 4px 7px; }
  .w-hot { gap: 5px; padding: 4px; }
  .w-hot-label {
    font-size: 10px; padding: 3px 6px; letter-spacing: .04em;
    background: rgba(10, 14, 12, .46); color: #F6E4BC;
  }
  .w-theme-float { top: 12px; right: 12px; padding: 6px 3px 6px 9px; font-size: 11px; }
  .w-card { width: 88vw; }
  /* 竖屏省掉几层动效，保住帧率 */
  .w-parallax::after, .w-mist::after, .w-dust::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .w-parallax, .w-parallax::before, .w-mist, .w-mist::before, .w-mist::after,
  .w-dust, .w-dust::after, .w-veil::before, .w-hot-dot, .w-bg.is-enter {
    animation: none !important; transition: none !important;
  }
  .w-fade { transition: none; }
}