/* ============================================================
 * 瓷 ci · 安东乐园失物招领处
 * 暗色主题 / 第一人称解谜叙事
 * ============================================================ */

:root {
  --bg: #0a0b0a;
  --panel: #111311;
  --panel-2: #161a16;
  --line: rgba(214, 224, 205, 0.16);
  --text: #cfd6c8;
  --text-dim: #7d8578;
  --accent: #9fb98a;         /* 苔绿 */
  --accent-dim: #55684a;
  --danger: #b0563f;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 氛围层 ---------- */
.vignette, .grain, .flashlight { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.vignette {
  background: radial-gradient(ellipse at center,
    transparent 42%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%);
}
.grain {
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.4s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(-14px, 9px); }
  66% { transform: translate(11px, -7px); }
  100% { transform: translate(0,0); }
}
.flashlight {
  background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 45%),
    rgba(190, 214, 168, 0.06), transparent 70%);
  transition: opacity 0.6s;
}

/* ---------- 自定义光标（仅精确指针设备） ---------- */
.cursor {
  display: none;
  position: fixed; z-index: 100; pointer-events: none;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transition: transform 0.18s var(--ease-out), border-color 0.18s;
}
.cursor::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px;
  border-radius: 50%; background: var(--accent);
}
.cursor.is-hover { transform: scale(1.7); border-color: var(--text); }
@media (pointer: fine) {
  .cursor { display: block; }
  body.has-custom-cursor, body.has-custom-cursor a,
  body.has-custom-cursor button { cursor: none; }
}

/* ---------- HUD ---------- */
.hud {
  position: fixed; z-index: 60; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--text-dim);
}
.hud-brand { font-family: var(--serif); }

/* ---------- 场景底图（桌面/移动双版） ---------- */
.scene-art.has-img {
  background-image: var(--img-m, var(--img));
}
@media (min-width: 721px) {
  .scene-art.has-img { background-image: var(--img); }
}
/* 舞台：与底图 cover 裁切范围严格对齐，热点坐标才不会漂移 */
.scene-art .stage {
  display: none;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * var(--ar, 1)));
  height: max(100vh, calc(100vw / var(--ar, 1)));
}
.scene-art.has-img .stage { display: block; }
/* 移动端若启用竖版图，裁切比例随之变化，舞台尺寸要用竖版比例 */
@media (max-width: 720px) {
  .scene-art .stage {
    width: max(100vw, calc(100vh * var(--ar-m, var(--ar, 1))));
    height: max(100vh, calc(100vw / var(--ar-m, var(--ar, 1))));
  }
}

/* ---------- 场景① VI logo ---------- */
.scene-logo {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  text-align: center; z-index: 15; pointer-events: none;
  animation: logoIn 1.6s var(--ease-out) both 0.2s;
}
@keyframes logoIn {
  from { opacity: 0; letter-spacing: 0.6em; filter: blur(6px); }
  to { opacity: 1; letter-spacing: 0.14em; filter: blur(0); }
}
.logo-main {
  display: block;
  font-family: var(--serif); font-size: clamp(40px, 8vw, 88px);
  letter-spacing: 0.14em; color: var(--text);
  text-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.logo-sub {
  display: block; margin-top: 10px;
  font-style: normal; font-size: 12px; letter-spacing: 0.5em;
  color: var(--text-dim);
}
.scene-logo.has-img img { max-width: min(70vw, 520px); max-height: 32vh; }
.scene-logo.is-hidden { display: none; }

/* ---------- 舞台与场景 ---------- */
#stage { position: fixed; inset: 0; }
.scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease-out), visibility 1.1s;
}
.scene.is-active { opacity: 1; visibility: visible; }

.scene-art {
  position: absolute; inset: 0;
  background: #101210 center / cover no-repeat;
}
/* 只改颜色，不用 background 简写：否则会重置 cover/center，底图放进来会错位 */
.scene-art-black { background-color: #050505; }
.ph-label {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%);
  font-size: 12px; letter-spacing: 0.1em; color: rgba(207,214,200,0.35);
  border: 1px dashed rgba(207,214,200,0.2); padding: 10px 16px; white-space: nowrap;
}

/* ---------- 对话框（DRPG 式） ---------- */
.dialogue {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  background: rgba(13,15,13,0.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  padding: 22px 26px 24px;
  z-index: 20;
}
.dialogue::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(214,224,205,0.07); pointer-events: none;
}
.dialogue-slim { width: min(560px, calc(100vw - 32px)); padding-bottom: 16px; }
.dialogue-text {
  font-family: var(--serif);
  font-size: 15.5px; line-height: 2;
  min-height: 3.5em; color: var(--text);
}
.dialogue-text p + p { margin-top: 0.55em; }
.dialogue-text .caret {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--accent); vertical-align: -0.12em; margin-left: 2px;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 选项框 ---------- */
.choices {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 16px;
}
.choices[hidden] { display: none; }
.choice {
  flex: 1 1 auto; min-width: 120px;
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.12em;
  color: var(--text-dim); background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 11px 18px; cursor: pointer; text-align: center;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.choice:hover { color: var(--accent); border-color: var(--accent-dim); background: #1a201a; }
.choice.choice-leave:hover { color: var(--danger); border-color: #6d3527; }

/* 小型角标按钮：靠右下角，不占满一行 */
.choices-corner {
  justify-content: flex-end;
  margin-top: 12px;
}
.choices-corner .choice {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 16px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: rgba(22,26,22,0.6);
}

/* ---------- 热点：物件图 / 圆圈占位 ---------- */
.hotspots { position: absolute; inset: 0; z-index: 10; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: none; border: 1px solid rgba(214,224,205,0.25);
  cursor: pointer; padding: 0;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s;
}
.hotspot::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: rgba(214,224,205,0.22);
  transition: background 0.3s, transform 0.3s;
}
.hotspot::after {  /* 呼吸光圈 */
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(214,224,205,0.18);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0.2; }
}
.hotspot:hover, .hotspot:focus-visible {
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
  outline: none;
}
.hotspot:hover::before { background: var(--accent); transform: scale(1.15); }
/* 已摆入物件图：去掉圆圈样式，图片即热点 */
.hotspot.has-img {
  height: auto; aspect-ratio: 1 / 1;
  border: none; border-radius: 0; overflow: visible;
}
.hotspot.has-img::before, .hotspot.has-img::after { content: none; }
.hotspot-img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
  transition: filter 0.3s, transform 0.3s var(--ease-out);
}
.hotspot.has-img:hover .hotspot-img,
.hotspot.has-img:focus-visible .hotspot-img {
  filter: drop-shadow(0 0 14px rgba(159,185,138,0.55)) drop-shadow(0 10px 18px rgba(0,0,0,0.55));
  transform: scale(1.05);
}
.hotspot-label {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim);
  white-space: nowrap; opacity: 0; transition: opacity 0.25s;
}
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; }
.hotspot.hotspot-mystery::before {
  inset: 0;
  background: none;
  font-family: var(--serif); font-size: 26px; color: var(--text-dim);
  content: "？"; display: flex; align-items: center; justify-content: center;
  transform: none;
  text-shadow: 0 0 12px rgba(214,224,205,0.35);
}
.hotspot.hotspot-mystery:hover::before { color: var(--text); background: none; transform: none; }

/* ---------- 浮层 ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; }
.overlay[hidden] { display: none; }
.overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,3,2,0.78); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.45s;
}
.overlay.is-open .overlay-backdrop { opacity: 1; }
.overlay-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  opacity: 0; translate: 0 22px;
  transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
  overflow: hidden;
}
.overlay.is-open .overlay-panel { opacity: 1; translate: 0 0; }

.overlay-art {
  position: relative;
  background: #0d0f0d center / contain no-repeat;
  border-right: 1px solid var(--line);
  min-height: 320px;
}
.overlay-art .ph-label { top: 50%; }
/* 问号浮层：无物件图，居中显示一个衬线大问号 */
.overlay-art.is-mystery::after {
  content: "？";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(64px, 14vw, 96px);
  color: rgba(214,224,205,0.4);
  text-shadow: 0 0 24px rgba(214,224,205,0.25);
}

.overlay-body { padding: 30px 30px 24px; overflow-y: auto; }
.overlay-kicker {
  font-size: 11px; letter-spacing: 0.22em; color: var(--text-dim);
  margin-bottom: 10px;
}
.overlay-title {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  color: var(--text); letter-spacing: 0.06em; margin-bottom: 14px;
}
.overlay-desc {
  font-family: var(--serif); font-size: 14px; line-height: 1.95;
  color: var(--text); opacity: 0.92; margin-bottom: 16px;
}
.overlay-voice {
  font-family: var(--serif); font-size: 13.5px; line-height: 1.9;
  color: var(--accent);
  border-left: 2px solid var(--accent-dim);
  padding: 4px 0 4px 14px; margin-bottom: 18px;
}
.overlay-track {
  font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim);
  border-top: 1px solid var(--line); padding-top: 14px;
}
.overlay-choices { margin-top: 20px; }

/* 倒计时 / 平台链接 */
.overlay-countdown, .overlay-platforms { margin: 8px 0 6px; }
.cd-label { font-size: 11px; letter-spacing: 0.22em; color: var(--text-dim); margin-bottom: 8px; }
.cd-time {
  font-family: var(--sans); font-size: 30px; font-weight: 300;
  letter-spacing: 0.08em; color: var(--text); font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.platform-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.platform-list a {
  display: inline-block;
  font-size: 13px; letter-spacing: 0.08em; color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 9px 18px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.platform-list a:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); }

body.overlay-open { overflow: hidden; }

/* ---------- 场景进场文字逐行浮现 ---------- */
.scene.is-active .dialogue { animation: rise 0.9s var(--ease-out) both 0.3s; }
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .hud { padding: 14px 16px; }
  .dialogue { bottom: 3vh; padding: 18px 18px 20px; }
  .dialogue-text { font-size: 14px; line-height: 1.9; min-height: 2.5em; }
  .choice { min-width: 96px; padding: 10px 12px; font-size: 13px; }
  .hotspot { width: 72px; height: 72px; }  /* 触控热区放大 */
  .hotspot.has-img { width: auto; height: auto; }
  .hotspot.has-img .hotspot-img { min-width: 88px; min-height: 88px; }
  .overlay-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    left: 0; bottom: 0; top: auto; transform: none;
    translate: 0 30px;
    width: 100vw; max-height: 88vh; border-left: 0; border-right: 0;
  }
  .overlay-art { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .overlay-body { padding: 20px 20px 18px; }
  .overlay-title { font-size: 19px; }
  .cd-time { font-size: 24px; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}