/* 轮播壳：全屏舞台 + 左右翻页按钮 + 底部标题/圆点。
   作品页各自在 iframe 里跑，壳只负责切换与导航。 */
:root {
  --fg: rgba(255, 255, 255, 0.82);
  --fg-dim: rgba(255, 255, 255, 0.38);
  --nav-size: 56px;
  --fade: 550ms;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--fg);
  font: 13px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 舞台：iframe 叠放，切换时新旧淡入淡出 + 轻微横移 */
#stage { position: fixed; inset: 0; }
#stage iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  background: #000;
  opacity: 0;
  transform: translateX(var(--from, 0));
  transition: opacity var(--fade) ease, transform var(--fade) cubic-bezier(.22,.61,.36,1);
}
#stage iframe.on { opacity: 1; transform: none; }
#stage iframe.off { opacity: 0; transform: translateX(var(--to, 0)); pointer-events: none; }

/* 左右翻页按钮 */
.nav {
  position: fixed; top: 50%; z-index: 10;
  width: var(--nav-size); height: var(--nav-size);
  margin-top: calc(var(--nav-size) / -2);
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: var(--fg);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 320ms ease, background 160ms ease, transform 160ms ease;
}
.nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav:hover { background: rgba(255, 255, 255, 0.16); }
.nav:active { transform: scale(0.94); }
.nav:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#prev { left: max(18px, env(safe-area-inset-left)); }
#next { right: max(18px, env(safe-area-inset-right)); }

/* 底部 HUD：标题 + 圆点 */
#hud {
  position: fixed; left: 0; right: 0; z-index: 10;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: opacity 320ms ease;
}
#title { letter-spacing: 0.08em; }
#dots { display: flex; gap: 10px; pointer-events: auto; }
#dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fg-dim); cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
#dots button:hover { transform: scale(1.3); }
#dots button[aria-current="true"] { background: var(--fg); }

#loading {
  position: fixed; left: 50%; top: 50%; z-index: 5;
  transform: translate(-50%, -50%);
  color: var(--fg-dim); letter-spacing: 0.2em;
  pointer-events: none;
}

/* 无操作一段时间后隐藏导航（PC 与触屏一致）。
   隐藏期间按钮与圆点不接受点击：第一下触摸只负责唤醒，避免看不见时误翻页 */
body.idle .nav, body.idle #hud { opacity: 0; }
body.idle .nav, body.idle #dots { pointer-events: none; }
@media (hover: none) {
  :root { --nav-size: 44px; }
}