/* ============================================================
   场景样式：视口 / 热点 / NPC 立绘 / 氛围
   ============================================================ */

.scene-viewport {
  position: relative; overflow: hidden; background: #090b10;
}

/* 场景背景（1920x1080 贴图，cover 填充） */
.scene-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity var(--t-slow) var(--ease);
}
.scene-bg.fading { opacity: 0; }

/* 暗角氛围 */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(5,7,10,.72) 100%);
}

/* 场景旁白字幕 */
.scene-caption {
  position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  max-width: 86%; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-sm); color: var(--c-muted);
  letter-spacing: .08em; line-height: 1.8;
  background: rgba(14,17,22,.72); border: 1px solid var(--c-line);
  padding: 8px 20px; border-radius: var(--r-md);
  pointer-events: none;
}

/* ---------- 可交互热点 ---------- */
.hotspot-layer { position: absolute; inset: 0; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  background: transparent; border: none; padding: 14px;
  display: grid; place-items: center;
}
.hotspot .hs-ring {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(232,179,75,.85);
  background: rgba(232,179,75,.28);
  box-shadow: 0 0 12px rgba(232,179,75,.55);
  animation: hsPulse 2.2s ease-in-out infinite;
}
.hotspot .hs-label {
  position: absolute; top: 110%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--fs-xs); color: var(--c-text);
  background: rgba(14,17,22,.85); border: 1px solid var(--c-line);
  padding: 3px 10px; border-radius: 999px;
  opacity: 0; transition: opacity var(--t-fast);
  pointer-events: none;
}
.hotspot:hover .hs-label, .hotspot:focus-visible .hs-label { opacity: 1; }
.hotspot.done .hs-ring { border-color: rgba(154,163,178,.5); background: rgba(154,163,178,.15); box-shadow: none; animation: none; }
.hotspot.clue-type .hs-ring { border-color: rgba(95,179,161,.9); background: rgba(95,179,161,.28); box-shadow: 0 0 12px rgba(95,179,161,.55); }
.hotspot.puzzle-type .hs-ring { border-color: rgba(217,108,95,.9); background: rgba(217,108,95,.28); box-shadow: 0 0 12px rgba(217,108,95,.5); }

@keyframes hsPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.35); opacity: .65; }
}

/* ---------- NPC 立绘锚点 ---------- */
.npc-layer { position: absolute; inset: 0; pointer-events: none; }
.npc-anchor {
  position: absolute; transform: translate(-50%, -100%);
  pointer-events: none; /* 容器不拦截，仅名字标签可点击 */
  text-align: center;
}
.npc-anchor img {
  height: clamp(180px, 34vh, 320px);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.6));
  animation: npcIn var(--t-mid) var(--ease);
  pointer-events: none; /* 图片不拦截点击，让热点可穿透 */
}
.npc-anchor .npc-name {
  display: inline-block; margin-top: 6px;
  font-size: var(--fs-xs); color: var(--c-text);
  background: rgba(14,17,22,.85); border: 1px solid var(--c-accent);
  border-radius: 999px; padding: 3px 12px;
  pointer-events: auto; cursor: pointer;
  font-family: inherit;
  appearance: none; -webkit-appearance: none; /* 重置 button 默认样式 */
  outline: none;
  transition: transform var(--t-fast) var(--ease);
}
.npc-anchor .npc-name:hover { transform: translateY(-2px); }
@keyframes npcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 场景切换滤镜（昼夜） ---------- */
.scene-viewport.night .scene-bg { filter: brightness(.72) saturate(.8) hue-rotate(8deg); }

@media (max-width: 720px) {
  .npc-anchor img { height: clamp(100px, 20vh, 160px); }
  .scene-caption { font-size: var(--fs-xs); bottom: var(--sp-2); padding: 6px 14px; max-width: 92%; }
  .hotspot { padding: 18px; }
  .hotspot .hs-ring { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  .npc-anchor img { height: clamp(80px, 16vh, 120px); }
  .scene-caption { font-size: 11px; padding: 5px 12px; max-width: 96%; letter-spacing: .04em; }
  .hotspot { padding: 22px; }
  .hotspot .hs-ring { width: 24px; height: 24px; }
  .npc-anchor .npc-name { font-size: 11px; padding: 2px 8px; }
}