/* scenes.css —— 意境页：全屏舞台 + 玻璃 dock */
.scenes-page {
  --sc-ink: #f2f0f7;
  --sc-dim: rgba(242, 240, 247, .62);
  --sc-glass: rgba(10, 12, 20, .42);
  --sc-line: rgba(255, 255, 255, .14);
  margin: 0;
  background: #0a0c14;
  color: var(--sc-ink);
  font-family: Nunito, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  overflow: hidden;
}
.scenes-page #siteNav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
/* 暗色导航覆盖（nav.css 默认浅色玻璃） */
.scenes-page .site-nav {
  background: linear-gradient(180deg, rgba(10, 12, 20, .9), rgba(10, 12, 20, .72));
  border-bottom-color: rgba(90, 80, 140, .35);
}
.scenes-page .nav-logo { color: #f2f0f7; }
.scenes-page .nav-links a { color: #a9a2c2; }
.scenes-page .nav-links a:hover { color: #f2f0f7; background: rgba(167, 139, 250, .10); }
.scenes-page .nav-quick a { background: rgba(255, 255, 255, .05); border-color: rgba(167, 139, 250, .22); }
.scenes-page .nav-burger { background: rgba(255, 255, 255, .06); border-color: rgba(167, 139, 250, .25); }
.scenes-page .nav-burger span,
.scenes-page .nav-burger span::before,
.scenes-page .nav-burger span::after { background: #f2f0f7; }
.scenes-page .nav-panel a { background: rgba(255, 255, 255, .05); border-color: rgba(167, 139, 250, .14); color: #d8d2e8; }
.scenes-page .nav-panel a[aria-current="page"] {
  background: linear-gradient(120deg, rgba(167, 139, 250, .22), rgba(103, 232, 249, .18));
  color: #fff;
}
.scenes-page .site-foot { border-top-color: rgba(90, 80, 140, .3); color: #8f86a8; }
.scenes-page .site-foot a { color: #8f86a8; }
.scenes-page .site-foot a:hover { color: #c4b5fd; }

#sceneStage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  display: block;
}
.sc-fade {
  position: fixed; inset: 0; z-index: 5;
  background: #05060c; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.sc-fade.on { opacity: 1; }

.sc-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.sc-ui > * { pointer-events: auto; }

.sc-back {
  position: absolute; top: 84px; left: 26px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--sc-line); border-radius: 999px;
  background: var(--sc-glass);
  backdrop-filter: blur(10px);
  color: var(--sc-dim); text-decoration: none; font-size: 13px;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.sc-back:hover { color: var(--sc-ink); border-color: rgba(255,255,255,.4); transform: translateX(-2px); }
.sc-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sc-poem {
  position: absolute; left: 30px; bottom: 128px;
  max-width: min(46vw, 460px);
}
.sc-name {
  margin: 0 0 10px;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}
.sc-line {
  margin: 0;
  color: var(--sc-dim);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.9;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
/* 场景切换时文案重新浮上来 */
.sc-name.swap, .sc-line.swap { animation: poemIn .8s cubic-bezier(.2, .8, .25, 1) both; }
.sc-name.swap { animation-delay: .05s; }
@keyframes poemIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 快捷键提示（仅桌面显示，手机用滑动） */
.sc-keys {
  position: absolute; right: 26px; bottom: 86px;
  color: var(--sc-dim); font-size: 11.5px; letter-spacing: .1em;
  opacity: .65; pointer-events: none;
}

.sc-dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 26px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5, 6, 12, .55), transparent);
}
.sc-scenes { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-tab {
  appearance: none; cursor: pointer;
  border: 1px solid var(--sc-line);
  background: var(--sc-glass);
  backdrop-filter: blur(10px);
  color: var(--sc-dim);
  font-family: inherit; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .25s ease;
}
.sc-tab i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-dim);
  transition: all .25s ease;
}
.sc-tab:hover { color: var(--sc-ink); border-color: rgba(255,255,255,.38); }
.sc-tab[aria-selected="true"] {
  color: var(--sc-ink); border-color: rgba(255,255,255,.55);
  background: rgba(255, 255, 255, .10);
}
.sc-tab[aria-selected="true"] i { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.9); }

.sc-tools { display: flex; gap: 8px; }
.sc-tool {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--sc-line);
  background: var(--sc-glass);
  backdrop-filter: blur(10px);
  color: var(--sc-dim);
  font-family: inherit; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
  transition: all .25s ease;
}
.sc-tool:hover { color: var(--sc-ink); border-color: rgba(255,255,255,.4); }
.sc-tool[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.sc-tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#scSound .ic-on { display: none; }
#scSound[aria-pressed="true"] .ic-on { display: block; }
#scSound[aria-pressed="true"] .ic-off { display: none; }
#scFull .ic-exit { display: none; }
#scFull[aria-pressed="true"] .ic-exit { display: block; }
#scFull[aria-pressed="true"] .ic-enter { display: none; }

/* 覆盖全站导航配色（暗色沉浸页） */
.scenes-page { --nav-bg: rgba(10, 12, 20, .5); --nav-ink: #f2f0f7; --nav-line: rgba(255,255,255,.12); }

/* 跳转链接：平时藏在屏幕外，聚焦时出现 */
.scenes-page .skip-link {
  position: fixed; left: -9999px; top: 10px; z-index: 100;
  background: #a78bfa; color: #17102e;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.scenes-page .skip-link:focus { left: 12px; }

@media (max-width: 640px) {
  .sc-back { top: 76px; left: 16px; }
  .sc-poem { left: 18px; right: 18px; bottom: 148px; max-width: none; }
  .sc-keys { display: none; }
  .sc-dock {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: nowrap; align-items: center; gap: 10px;
  }
  .sc-scenes {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    flex: 1; min-width: 0;
    scrollbar-width: none;
  }
  .sc-scenes::-webkit-scrollbar { display: none; }
  .sc-tab { padding: 8px 12px; flex: none; }
  .sc-tools { flex: none; }
  .sc-tool span { display: none; }
  .sc-tool { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-fade { transition: none; }
}