/* 主场景：底图、呼吸光点、场景边缘按钮、选中浮标、任务目标 */

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

.scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1.2s var(--ease-in-out), opacity .45s var(--ease-in-out);
  filter: brightness(.8) saturate(.9);   /* 内帐初始：油灯还亮着，只压一点亮度 */
}
/* 外帐：没点上烛台之前几乎全黑，只留一点轮廓 */
.scene[data-scene="outer"]:not(.is-lit) .scene__bg { filter: brightness(.12) saturate(.45); }

/* 点燃烛火后提亮（不额外画图，纯 CSS 调色） */
.scene.is-lit .scene__bg { filter: brightness(1) saturate(1.02); }

/* 暖色光晕，随点亮状态淡入 */
.scene__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease-in-out);
  background:
    radial-gradient(28cqw 30cqw at 30% 52%, rgba(240, 178, 74, .16), transparent 70%),
    radial-gradient(70cqw 60cqw at 50% 60%, rgba(120, 70, 20, .12), transparent 75%);
}
.scene.is-lit .scene__veil { opacity: 1; }
/* 内帐的油灯本来就没熄：先给半层暖光，点起蜡烛后再补满 */
.scene[data-scene="inner"]:not(.is-lit) .scene__veil { opacity: .45; }

/* 场景切换时的擦除过渡 */
.scene.is-fading .scene__bg { opacity: 0; }

/* ---------- 光点 ---------- */
.scene__hotspots {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur-fast);
}

.hotspot {
  position: absolute;
  width: 6.4cqw;
  height: 6.4cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 5;
  /* 等场景切换/淡入结束后再亮起 */
  animation: hs-in .9s var(--ease-out) .6s both;
}
@keyframes hs-in { from { opacity: 0; } to { opacity: 1; } }
/* 视觉光晕比点击区域小一圈（防误触） */
.hotspot__dot {
  width: 1.5cqw;
  height: 1.5cqw;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, var(--amber) 40%, rgba(240, 178, 74, 0) 72%);
  box-shadow: 0 0 1.6cqw .5cqw rgba(240, 178, 74, .38);
  animation: breathe 3.4s var(--ease-in-out) infinite;
  transition: transform var(--dur-fast);
}
.hotspot__label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -.2cqw);
  padding: .35cqw .8cqw;
  font-size: .92cqw;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--paper);
  background: rgba(8, 6, 4, .82);
  border: 1px solid var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label { opacity: 1; transform: translate(-50%, -.6cqw); }
.hotspot:hover .hotspot__dot { transform: scale(1.25); }
.hotspot:active .hotspot__dot { transform: scale(.9); }

/* 未触发光点的"观察四周"爆闪 */
.hotspot.is-flash .hotspot__dot { animation: flash .55s var(--ease-out) 4; }

/* 线索型光点（偏冷白）与元素型（暖黄）区分 */
.hotspot[data-tone="clue"] .hotspot__dot {
  background: radial-gradient(circle, #ffffff 0%, #bcd7e6 42%, rgba(188, 215, 230, 0) 72%);
  box-shadow: 0 0 1.6cqw .5cqw rgba(188, 215, 230, .3);
}

/* 已经处理完的光点（开过的箱子 / 翻空的包裹）：纯白，呼吸放慢 */
.hotspot[data-tone="done"] .hotspot__dot {
  background: radial-gradient(circle, #ffffff 0%, #e6e9ec 46%, rgba(230, 233, 236, 0) 74%);
  box-shadow: 0 0 1.3cqw .35cqw rgba(236, 240, 244, .22);
  animation-duration: 4.6s;
}

@keyframes breathe {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes flash {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.5); }
}

/* ---------- 场景边缘切换按钮 ---------- */
.scene__edge {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .6cqw;
  padding: 1cqw 1.4cqw;
  font-size: 1.05cqw;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  color: var(--gold);
  background: linear-gradient(90deg, rgba(10, 8, 6, .0), rgba(10, 8, 6, .75));
  transition: color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.scene__edge:hover { color: var(--amber); }
.scene__edge--right { right: 0; transform: translateY(-50%); }
.scene__edge--right:hover { transform: translateY(-50%) translateX(-.4cqw); }
.scene__edge--left { left: 0; transform: translateY(-50%) scaleX(-1); }
.scene__edge--left span { transform: scaleX(-1); }

/* ---------- 选中物品浮标 ---------- */
.held {
  position: absolute;
  left: 50%;
  bottom: 9cqh;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: .5cqw .6cqw .5cqw 1.1cqw;
  background: linear-gradient(180deg, rgba(44, 34, 22, .95), rgba(12, 9, 6, .96));
  border: 1px solid var(--gold);
  box-shadow: 0 0 2.4cqw rgba(200, 163, 90, .28), 0 1cqh 3cqh rgba(0, 0, 0, .55);
  animation: held-in .26s var(--ease-out);
}
.held__icon svg { width: 2.4cqw; height: 2.4cqw; display: block; }
.held__name { font-size: 1.05cqw; letter-spacing: .12em; color: var(--paper); }
.held__x {
  position: relative;
  flex: 0 0 auto;
  width: 2cqw; height: 2cqw;
  padding: 0;
  font-size: 0;
  color: var(--paper-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.held__x::before,
.held__x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42%; height: 1px;
  background: currentColor;
}
.held__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.held__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.held__x:hover { color: var(--blood-lit); border-color: var(--blood); }
@keyframes held-in { from { opacity: 0; transform: translate(-50%, 1.4cqh); } to { opacity: 1; } }

/* ---------- 任务目标 ---------- */
.quest {
  position: absolute;
  left: 1.6cqw;
  top: 1.6cqh;
  z-index: 20;
  width: 22cqw;
  font-size: .98cqw;
  background: linear-gradient(160deg, rgba(30, 24, 16, .86), rgba(10, 8, 6, .78));
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  box-shadow: 0 1cqh 3cqh rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
  transition: width var(--dur) var(--ease-out);
  /* 目标卡只是信息展示，不能挡住背后的光点 */
  pointer-events: none;
}
.quest__head { pointer-events: auto; }
.quest__head {
  display: flex;
  align-items: center;
  gap: .7cqw;
  width: 100%;
  padding: .8cqw 1cqw;
  text-align: left;
}
.quest__seal {
  width: .85cqw; height: .85cqw;
  background: var(--blood);
  box-shadow: 0 0 1cqw rgba(140, 42, 30, .9);
  transform: rotate(45deg);
}
.quest__title { letter-spacing: .2em; color: var(--gold); font-size: .92cqw; }
.quest__list {
  margin: 0;
  padding: 0 1cqw 1cqw 1.9cqw;
  list-style: none;
  max-height: 30cqh;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease-out), opacity var(--dur);
}
.quest__list li {
  position: relative;
  padding: .28cqw 0;
  line-height: 1.5;
  color: var(--paper-2);
}
.quest__list li::before {
  content: "";
  position: absolute;
  left: -1cqw; top: .85cqw;
  width: .35cqw; height: .35cqw;
  background: var(--gold);
  transform: rotate(45deg);
}
.quest__list li.is-done { color: rgba(200, 163, 90, .45); text-decoration: line-through; }
.quest[data-open="false"] { width: 11cqw; }
.quest__title { white-space: nowrap; }
.quest[data-open="false"] .quest__list { max-height: 0; opacity: 0; padding-bottom: 0; }
.quest.is-new { animation: quest-new 1.2s var(--ease-out); }
@keyframes quest-new {
  0%, 100% { border-left-color: var(--gold); }
  25%      { border-left-color: #ffd894; box-shadow: 0 0 3cqw rgba(240, 178, 74, .5); }
}