/* 缝合像素字体 Fusion Pixel 12px 点阵（OFL-1.1 免费商用）
   规则：字号必须是 12 的整数倍，否则点阵会被灰度插值糊掉
   放大倍数越大笔画越粗：8px×3(旧) 偏壮 → 现用 12px×2，粗细接近常规字体
   正文 24px(×2) / UI 小字 12px(×1) / 次标题 36px(×3) / 倒计时 36px(×3) / 大标题 60px(×5)
   移动端整体小两号：正文 18px、次标题/倒计时 30px（18 非 12 倍数，点阵略有柔化，属可接受取舍）
   子集化 29KB；改文案后重跑 tools/subset-font.py */
@font-face {
  font-family: 'Fusion Pixel';
  src: url('../assets/fonts/fusion-pixel-12px-subset.woff2?v=20261016f') format('woff2');
  font-display: swap;
}
/* ============================================================
 * 瓷 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;
  /* 像素框：最外实色描边 + 内侧交叉网纹带（老游戏机对话框质感） */
  --px-edge: rgba(214, 224, 205, 0.55);   /* 最外一圈实色线 */
  --px-ink: rgba(214, 224, 205, 0.42);    /* 网纹线色 */
  --serif: "Fusion Pixel", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "Fusion Pixel", "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: none;
  /* 纯展示页无复制需求：禁双击/长按选中文字与图片，避免蓝色选区破坏画面 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS 长按不弹出储存/拷贝菜单 */
  touch-action: manipulation;    /* 移动端双击不触发页面缩放 */
}

/* 图片同样禁止拖拽成半透明幽灵图 */
img { -webkit-user-drag: none; }

/* ---------- 氛围层 ---------- */
.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;
}

/* ---------- 自定义光标（仅精确指针设备）：复古像素手电筒 ----------
   灯头镜面中心 = 指针热点。素材 128×88（2x），页面显示 64×44；
   灯身朝右下、灯头朝左上（20261016o 起，原稿备份 tools/_originals/）。
   镜面中心在素材 (20.0%, 22.2%) → 图片相对指针锚点偏移 (-12.8px, -9.8px) */
.cursor {
  display: none;
  position: fixed; z-index: 100; pointer-events: none;
  left: 0; top: 0;
  width: 0; height: 0;                 /* 元素本身是 0×0 锚点，钉在指针上 */
  opacity: 0;                          /* 鼠标动过之前不显示，避免左上角露出半截 */
}
.cursor.is-live { opacity: 1; }
.cursor img {
  position: absolute;
  width: 64px; height: 44px;
  left: -12.8px; top: -9.8px;          /* 让镜面中心正好压在指针坐标上 */
  transform-origin: 20% 22.2%;         /* 缩放以镜面为轴，热点不漂移 */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  transition: transform 0.18s var(--ease-out), filter 0.18s;
  will-change: transform;
}
.cursor.is-hover img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 12px rgba(190, 214, 168, 0.55)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.cursor.is-down img { transform: scale(0.94); }   /* 按下时轻轻一沉 */
@media (pointer: fine) {
  .cursor { display: block; }
  /* 隐藏系统箭头：覆盖 body 及其所有后代（含 .hotspot 等 div），
     否则在 body/a/button 之外的区域会叠出原生箭头 + 手电筒两个鼠标。
     !important 用于压过 .hotspot{ cursor:pointer } 等局部声明（同优先级且写在后面）。 */
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: none !important; }
}

/* ---------- 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);
  pointer-events: none;  /* 纯展示层：不能挡住右上角问号等元素的点击 */
}
.hud-brand { font-family: var(--serif); }

/* ---------- 场景底图（桌面/移动双版） ---------- */
.scene-art.has-img {
  background-image: var(--img-m, var(--img));
}
/* 横屏/宽屏用横版图；窄屏 或 任何竖屏（含 iPad 竖屏）都用竖版图，
   否则竖屏用横版图会被裁掉左右各约 25%，物件就跑出屏幕了 */
@media (min-width: 721px) and (orientation: landscape) {
  .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), (orientation: portrait) {
  .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(48px, 9vw, 60px);
  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 式） ----------
   像素框结构（由外向内）：2px 实色描边 → 8px 交叉网纹带 → 1px 内细线 → 内容
   网纹由两层 repeating-linear-gradient 45°/-45° 叠出（老游戏机 crosshatch），
   纯渐变零图片；线 1px、格 4px 精确可控，任意尺寸不糊 */
.dialogue {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  border: 2px solid var(--px-edge);
  background:
    repeating-linear-gradient(45deg, var(--px-ink) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--px-ink) 0 1px, transparent 1px 4px),
    rgba(20,24,20,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);   /* 描边外侧压一道暗线，亮场景里也能立住 */
  backdrop-filter: blur(6px);
  padding: 22px 26px 24px;
  z-index: 20;
}
/* 边框内里的面板：盖住网纹中部，只留四周 8px 纹理带（负层级垫在文字下方） */
.dialogue::before {
  content: ""; position: absolute; inset: 8px; z-index: -1;
  background: rgba(13,15,13,0.94);
  border: 1px solid rgba(214,224,205,0.16);
  pointer-events: none;
}
.dialogue-slim { width: min(560px, calc(100vw - 32px)); padding-bottom: 16px; }
.dialogue-text {
  font-family: var(--serif);
  font-size: 24px; line-height: 2;
  min-height: 3.5em; color: var(--text);
}
.dialogue-text p + p { margin-top: 0.55em; }
/* 像素体加粗：单字重字体不用 font-weight 合成（会糊点阵），用 1px 偏移投影增粗 */
.px-bold { font-weight: 400; text-shadow: 1px 0 0 currentColor, 0 1px 0 currentColor; }
.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 {
  position: relative;
  flex: 1 1 auto; min-width: 120px;
  font-family: var(--serif); font-size: 24px; letter-spacing: 0.12em;
  color: var(--text);
  border: 2px solid var(--px-edge);
  background:
    repeating-linear-gradient(45deg, var(--px-ink) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--px-ink) 0 1px, transparent 1px 4px),
    rgba(20,24,20,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
  padding: 11px 18px; cursor: pointer; text-align: center;
  transition: color 0.25s, border-color 0.25s;
}
/* 内容底板：盖住网纹中部，只留四周 4px 纹理带（负层级垫在文字下方） */
.choice { isolation: isolate; }
.choice::before {
  content: ""; position: absolute; inset: 4px; z-index: -1;
  background: var(--panel-2);
  border: 1px solid rgba(214,224,205,0.1);
  transition: background 0.25s;
}
.choice:hover { color: var(--accent); border-color: rgba(159,185,138,0.6); }
.choice:hover::before { background: #1a201a; }
.choice.choice-leave:hover { color: var(--danger); border-color: rgba(176,86,63,0.6); }

/* ---------- 场景三：QR 背景切换按钮（正方形，图标居中） ---------- */
/* QR 二维码按钮：默认隐藏，仅移动/竖屏显示（见文件末尾媒体查询）。
 * 用 .choice.choice-qr 高优先级覆盖移动端 .choice 的 min-width / padding。 */
.choice-qr { display: none; }
/* 激活态：图标/描边亮绿，提示当前是二维码背景 */
.choice-qr.is-on { color: var(--accent); border-color: rgba(159,185,138,0.6); }
.choice-qr.is-on::before { background: #1a201a; }
/* 激活时把场景三底图换成二维码图（id 选择器优先级高于 .scene-art.has-img 的变量规则） */
#end-art.qr-on { background-image: url("../assets/img/scene-end-qr.jpg"); }

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

/* ---------- 热点：物件图 / 圆圈占位 ---------- */
.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: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  background: rgba(31, 48, 40, 0.7);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 3px;
  border: 1px solid rgba(214, 224, 205, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap; opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; }
/* 黑色问号：强制正圆（宽度是百分比、高度必须跟着走，否则会拉成椭圆） */
.hotspot.hotspot-mystery {
  aspect-ratio: 1 / 1;
  height: auto;
  border-color: rgba(214, 224, 205, 0.3);
}
.hotspot.hotspot-mystery::before {
  inset: 0;
  background: none;
  font-family: var(--serif);
  /* 更粗更亮：确保在任何底图上都能看清 */
  font-size: 36px; font-weight: 400; color: #ffffff;
  content: "？"; display: flex; align-items: center; justify-content: center;
  transform: none; line-height: 1;
  /* 深色描边 + 暗投影，压住亮背景也能立住 */
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.55);
  text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 0 18px rgba(255,255,255,0.45);
}
/* 问号图加载成功后：只保留喷漆问号图，去掉外圈边框与呼吸光圈 */
.hotspot.hotspot-mystery.has-img {
  border: none;
  border-radius: 0;
}
.hotspot.hotspot-mystery.has-img::before { content: none; }  /* 图已就位，去掉 CSS 兜底问号 */
.hotspot.hotspot-mystery.has-img::after { content: none; }   /* 去掉呼吸光圈 */
.hotspot.hotspot-mystery:hover::before {
  color: #ffffff; background: none; transform: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 26px rgba(255,255,255,0.75);
}

/* ---------- 浮层 ---------- */
.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;
  /* 与对话框同一套像素框：2px 实色描边 + 8px 交叉网纹带。
   * 面板本体不再铺底——网纹带由 ::before 只画在四周 8px 环上（中间挖空），
   * 文字区底色由 ::after 内衬承担，图位区因此是干净的无纹理区 */
  border: 2px solid var(--px-edge);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  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-panel { isolation: isolate; }
/* 网纹带：整块铺满后用 mask 挖掉内部，只留四周 8px 环（图位区因此没有网格） */
.overlay-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, var(--px-ink) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--px-ink) 0 1px, transparent 1px 4px);
  padding: 8px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* 内容底板：只铺文字区（左侧让开 300px 图位列），图位区保持通透 */
.overlay-panel::after {
  content: ""; position: absolute; inset: 8px 8px 8px 300px; z-index: -1;
  background: var(--panel);
  border: 1px solid rgba(214,224,205,0.1); border-left: none;
  pointer-events: none;
}

.overlay-art {
  position: relative;
  /* 完全透明：直接露出浮层遮罩的深色半透模糊，与整页统一深浅（不再另加磨砂/暗罩） */
  background: transparent center / contain no-repeat;
  border-right: 1px solid var(--line);
  min-height: 320px;
}
.overlay-art .ph-label { top: 50%; }
/* 问号浮层：图位由 JS 挂 assets/img/mystery-art.png（像素滴流唱片盒），
 * 与普通物件同一套 contain 显示，原 CSS 大问号占位已移除 */

.overlay-body { padding: 30px 30px 24px; overflow-y: auto; }
.overlay-kicker {
  font-size: 12px; letter-spacing: 0.22em; color: var(--text-dim);
  margin-bottom: 10px;
}
.overlay-title {
  font-family: var(--serif); font-size: 36px; font-weight: 400;
  color: var(--text); letter-spacing: 0.06em; margin-bottom: 14px;
}
.overlay-desc {
  font-family: var(--serif); font-size: 24px; line-height: 1.95;
  color: var(--text); opacity: 0.92; margin-bottom: 16px;
}
.overlay-voice {
  font-family: var(--serif); font-size: 24px; 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: 12px; 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: 12px; letter-spacing: 0.22em; color: var(--text-dim); margin-bottom: 8px; }
.cd-time {
  font-family: var(--sans); font-size: 24px; font-weight: 400;
  letter-spacing: 0.04em; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: baseline;
}
/* 倒计时四组：大数字 + 右侧英文小单位（days/hours/min/sec），参考稿布局 */
.cd-seg { display: inline-flex; align-items: baseline; }
.cd-u {
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-dim); margin-left: 5px;
}
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; }
  /* 手机端对话框：比桌面略抬高，但不能盖住下方一排物件（曾 10vh，压到物品6/7，退回 5vh） */
  .dialogue { bottom: 5vh; padding: 18px 18px 20px; }
  /* 移动端正文比桌面小两号：24 -> 18（次级标题同步 36 -> 30） */
  .dialogue-text { font-size: 18px; line-height: 1.9; min-height: 2.5em; }
  .choice { min-width: 128px; padding: 12px 18px; font-size: 18px; }
  .choices-corner .choice { font-size: 18px; }
  /* 浮层文字（用户定稿）：标题 15px、正文/心声 12px（12 为正点阵倍数，最锐利） */
  .overlay-desc, .overlay-voice { font-size: 12px; }
  .overlay-title { font-size: 15px; }
  .hotspot { width: 72px; height: 72px; }  /* 触控热区放大 */
  .hotspot.has-img { width: auto; height: auto; }
  .hotspot.has-img .hotspot-img { min-width: 88px; min-height: 88px; }
  /* 问号宽度纯走 data 里的百分比（wm），不套用物件的 88px 下限：
   * 下限作用在图片上会把正方形撑成长条，问号本身比物件小一档，按百分比缩放即可 */
  .hotspot.hotspot-mystery.has-img .hotspot-img { min-width: 0; min-height: 0; }
  .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-width: 2px 0;
  }
  /* 全宽底部抽屉：左右贴屏幕边，网纹带只保留上下两条；内衬让开顶部 220px 图位区 */
  .overlay-panel::before { padding: 8px 0; }
  .overlay-panel::after { inset: 220px 0 8px 0; border: none; border-top: 1px solid rgba(214,224,205,0.1); }
  .overlay-art { margin: 0; border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .overlay-body { padding: 20px 20px 18px; }
  .cd-time { font-size: 18px; }
  .cd-u { font-size: 10px; margin-left: 3px; }
}

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

/* ---------- 问号浮层：倒计时 ---------- */
.overlay-countdown { margin: 14px 0 4px; }
.cd-label {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.26em; color: var(--text-dim);
  margin-bottom: 8px;
}
/* .cd-time 的完整定义在上方 .overlay 区块（437 行附近）；
 * 此处不再重复声明，否则会覆盖移动端媒体查询里的 18px */

/* ---------- 问号浮层：流媒体平台图标（复古墨绿圆牌） ---------- */
.overlay-platforms { margin: 14px 0 4px; }
/* 平台横向滚动（以后加更多平台也不会挤成一团） */
.platform-list {
  list-style: none;
  display: flex; flex-wrap: nowrap; gap: 14px;
  margin-top: 10px; padding: 4px 0 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 224, 205, 0.28) transparent;
}
.platform-list::-webkit-scrollbar { height: 4px; }
.platform-list::-webkit-scrollbar-track { background: rgba(214, 224, 205, 0.08); border-radius: 2px; }
.platform-list::-webkit-scrollbar-thumb { background: rgba(214, 224, 205, 0.28); border-radius: 2px; }
.platform-list li { flex: 0 0 auto; scroll-snap-align: start; }
.platform-list a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pi {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #24352c;                       /* 深墨绿复古底 */
  border: 1px solid rgba(214, 224, 205, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
/* 图标 = <img> 直出（SVG 已统一苔绿 #9fb98a 剪影）。
 * 曾用 CSS mask 渲染，但在浮层过渡动画中偶发整枚消失（Chromium/WebKit 图层竞态），故弃用 */
.pi-ico {
  display: block; width: 24px; height: 24px;
  -webkit-user-drag: none;
}
.platform-list a:hover .pi,
.platform-list a:focus-visible .pi {
  background: var(--pc, var(--accent));      /* hover 亮起品牌色 */
  border-color: var(--pc, var(--accent));
  transform: translateY(-3px);
}
.platform-list a:hover .pi-ico,
.platform-list a:focus-visible .pi-ico { filter: brightness(0) invert(1); }   /* 苔绿 → 白 */
/* 上线前：链接位不可点（置灰），点击弹提示 */
.platform-list a.is-waiting { cursor: default; }
.platform-list a.is-waiting .pi { filter: grayscale(1); opacity: 0.45; }
.platform-list a.is-waiting:hover .pi,
.platform-list a.is-waiting:focus-visible .pi {
  background: #24352c; border-color: rgba(214, 224, 205, 0.22); transform: none;
}
.platform-list a.is-waiting:hover .pi-ico { filter: none; }

/* ---------- 轻提示 toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 16vh; z-index: 120;
  transform: translate(-50%, 10px);
  padding: 10px 20px; border-radius: 0;
  background: rgba(31, 48, 40, 0.92);
  border: 2px solid var(--px-edge);            /* 与对话框同一圈实色描边 */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.5);
  color: var(--text); font-family: var(--serif);
  font-size: 12px; letter-spacing: 0.1em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) { .toast { bottom: 12vh; } }

/* ==========================================================================
   场景二：陀螺仪 / 鼠标 3D 景深
   --------------------------------------------------------------------------
   原理：外层给 perspective，整层 .plx 随设备角度做 rotateX/rotateY。
   旋转中心用 transform-origin 推到底图后方 20px，底图 Z=0、物件 Z=0~130px——
   于是底图几乎不动、物件越近动得越多，且两者同向（真实视差的样子）。
   位移量只由「离旋转中心的距离」决定，与 perspective 无关；
   perspective 取 4000px 是为了压住梯形变形和近处物件的放大，避免破坏既定坐标。
   角度由 js/parallax.js 写入 --rx / --ry，每帧只改一个容器的 transform。
   ========================================================================== */
.scene-art-plx {
  perspective: 4000px;
  perspective-origin: 50% 50%;
  overflow: hidden;                 /* 裁掉旋转时露出的画面外区域 */
}
/* 底图改由 .plx-bg 承载（才能参与 3D），元素本身不再画背景，避免重影 */
.scene-art-plx.has-img { background-image: none; }

.scene-art-plx .plx {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* 旋转中心放在底图后方：底图就成了「静止的房间」，物件在里面浮动 */
  transform-origin: 50% 50% -20px;
  /* scale 整体放大一点，吸收旋转时远端内缩露出的边；
     背景与物件同步放大，彼此相对关系不变，物件坐标依然准确 */
  transform: scale(1.06) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}
/* 远景底图：Z=0 即旋转中心所在平面，几乎不动 */
.scene-art-plx .plx-bg {
  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)));
  background: #101210 center / cover no-repeat;
  background-image: var(--img-m, var(--img));
}
@media (min-width: 721px) and (orientation: landscape) {
  .scene-art-plx .plx-bg { background-image: var(--img); }
}
@media (max-width: 720px), (orientation: portrait) {
  .scene-art-plx .plx-bg {
    width: max(100vw, calc(100vh * var(--ar-m, var(--ar, 1))));
    height: max(100vh, calc(100vw / var(--ar-m, var(--ar, 1))));
  }
  /* 场景三：二维码切换按钮只在移动/竖屏出现；显式正方形（em 跟随字号，与其等高） */
  .choice.choice-qr {
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 2.9em; height: 2.9em; min-width: 0; padding: 0;
  }
  .choice.choice-qr svg { width: 52%; height: 52%; }
}
/* 舞台与热点容器都要透传 3D，否则物件的 translateZ 会被压平 */
.scene-art-plx .stage,
.scene-art-plx .hotspots { transform-style: preserve-3d; }

/* 近景物件：--z 由 JS 按画面纵向位置分配（越靠下越近） */
.scene-art-plx .hotspot {
  transform: translate(-50%, -50%) translateZ(var(--z, 0px));
}
.scene-art-plx .hotspot:hover,
.scene-art-plx .hotspot:focus-visible {
  transform: translate(-50%, -50%) translateZ(var(--z, 0px)) scale(1.06);
}

/* 尊重系统「减少动态效果」设置：直接不做视差 */
@media (prefers-reduced-motion: reduce) {
  .scene-art-plx .plx { transform: scale(1.06); }
  .scene-art-plx .plx-bg { transform: translate(-50%, -50%); }
  .scene-art-plx .hotspot,
  .scene-art-plx .hotspot:hover,
  .scene-art-plx .hotspot:focus-visible { transform: translate(-50%, -50%); }
}