/* 2D 分层场景：世界层（SVG 美术 + 热点按钮）由镜头变换平移缩放 */
.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  overflow: hidden;
  background: #0b0e10;
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transition: transform var(--camera-ms) var(--ease), opacity 0.35s ease;
  will-change: transform;
}
.world.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }

.world__art, .world__art > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.world__hotspots { position: absolute; inset: 0; }

.app.is-title .world__hotspots { display: none; }
.app.is-title .stage::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 13, 0.42); pointer-events: none; }
/* 光照画布（1/4 分辨率，由合成器放大；只在光照分档变化时重画） */
.world__light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* 热点：物件即按钮 */
.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.hotspot:hover,
.hotspot:focus-visible {
  border-color: rgba(232, 194, 122, 0.85);
  border-style: dashed;
  background: rgba(232, 194, 122, 0.06);
  box-shadow: 0 0 0 4px rgba(232, 194, 122, 0.12);
  outline: none;
}
.hotspot__label {
  position: absolute;
  left: 50%;
  top: -0.4rem;
  transform: translate(-50%, -100%);
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  background: rgba(15, 18, 20, 0.92);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 1.05rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.hotspot--label-below .hotspot__label { top: auto; bottom: -0.4rem; transform: translate(-50%, 100%); }
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label { opacity: 1; }
.app.is-readonly .hotspot[data-mutating="true"] { cursor: not-allowed; }

.stage.is-hinting .world:not(.is-hidden) .hotspot {
  border-color: rgba(232, 194, 122, 0.5);
  border-style: dashed;
}
.stage.is-hinting .world:not(.is-hidden) .hotspot__label { opacity: 0.92; }

/* 点击反馈 */
.click-ripple {
  position: fixed;
  z-index: var(--z-toast);
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--lamp);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.45s ease-out forwards;
}
@keyframes ripple {
  from { transform: scale(0.3); opacity: 0.9; }
  to { transform: scale(1.4); opacity: 0; }
}
html.reduce-motion .click-ripple { animation-duration: 0.01s; }

/* 胶片颗粒：只作用于美术层，HUD 与文字在其上方保持清晰 */
.grain {
  position: absolute;
  left: -192px;
  top: -192px;
  width: calc(100% + 384px);
  height: calc(100% + 384px);
  pointer-events: none;
  opacity: 0.1;
  will-change: transform;
}
/* 颗粒只靠位移换帧：合成器做，不重画、不混合 */
.grain.is-moving { animation: grain-shift 0.6s steps(1) infinite; }
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-97px, 61px); }
  50% { transform: translate(53px, -113px); }
  75% { transform: translate(-41px, -29px); }
}

/* ---- SVG 内部的状态与动画 ---- */
.shop-art[data-sign="closed"] .shop-sign-open { display: none; }
.shop-art[data-sign="closed"] .shop-sign-closed { display: inline; }

.shop-rain-layer { animation: rain-fall 0.6s steps(6) infinite; }
/* 不下雨就不动：看不见的雨也会让那片 SVG 每帧重画 */
.shop-art:not([data-weather="rain"]) .shop-rain-layer { animation: none; }
@keyframes rain-fall {
  from { transform: translate(0, -60px); }
  to { transform: translate(-21px, 0); }
}
.shop-walker { animation: walker 64s steps(768) infinite; animation-delay: -20s; }
@keyframes walker {
  0% { transform: translateX(760px); }
  38% { transform: translateX(1640px); }
  100% { transform: translateX(1640px); }
}
.shop-rec-dot { animation: rec-blink 1.6s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: 0; } }
.shop-exit-glow { animation: exit-breathe 4s steps(8) infinite; }
@keyframes exit-breathe { 50% { opacity: calc(var(--exit) * 0.55); } }
.shop-tube-glass { transition: opacity 0.6s; }

html.reduce-motion .shop-rain-layer,
html.reduce-motion .shop-walker,
html.reduce-motion .shop-exit-glow { animation: none; }
html.reduce-motion .shop-walker { transform: translateX(-200px); }
html.reduce-flashing .shop-rec-dot { animation: none; }

/* 阶段8：三座城共用一间铺子，只换窗外街景与灯色（data-city 由 applyLighting 设置） */
.shop-art .shop-city { display: none; }
.shop-art:not([data-city]) .shop-city--huigang,
.shop-art[data-city="huigang"] .shop-city--huigang,
.shop-art[data-city="hedu"] .shop-city--hedu,
.shop-art[data-city="beiyuan"] .shop-city--beiyuan { display: inline; }
.shop-art[data-city="hedu"] .shop-streetlamp-glow { filter: sepia(0.8) saturate(2.2) hue-rotate(-12deg); }
.shop-art[data-city="beiyuan"] .shop-streetlamp-glow { filter: saturate(0.2) brightness(1.15); }
.shop-art[data-city="hedu"] .shop-water-marks { display: none; }
/* 限电：只保照明 */
.shop-art[data-power="limited"] .shop-tube { opacity: 0.35; }