/* 阅读空间 · 公共阅读与播放样式（四页共用）
   页面自身的 <style> 写在本文件之后，可覆盖这里的任何一条。 */

:root { color-scheme:dark; --ink:#f5f0e7; --muted:#aeb9cb; --line:rgba(255,255,255,.1); --gold:#e7a64b; --gold-soft:rgba(231,166,75,.15); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:#101825; }
body { margin:0; min-height:100vh; background:radial-gradient(900px 480px at 10% -15%,#263d58 0%,transparent 65%),#101825; color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }

/* 统一的键盘焦点提示：零特异性，不打乱既有层叠 */
:where(.episode,.back-link,.book-card,.start-reading):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

.shell { width:min(1180px,100%); margin:auto; padding:clamp(24px,5vw,64px) 20px 48px; }
.back-link { appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:0 0 18px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(21,31,48,.6); color:var(--muted); font:14px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; cursor:pointer; text-decoration:none; transition:color .2s ease,border-color .2s ease; }
.back-link:hover { color:var(--ink); border-color:rgba(255,255,255,.28); }

header { border-left:3px solid var(--gold); padding-left:14px; margin-bottom:22px; }
header p { margin:2px 0 0; color:var(--muted); font-size:14px; }

.intro { border:1px solid var(--line); border-radius:20px; background:rgba(21,31,48,.78); padding:22px 22px 20px; margin-bottom:28px; }
.intro h2 { margin:0 0 10px; color:var(--gold); font-size:14px; font-weight:700; letter-spacing:.25em; }
.intro p { margin:0; color:var(--ink); font-size:14.5px; line-height:1.75; }
.intro-meta { margin:0 0 12px; padding-bottom:14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.7; }
/* 四页统一的简介段间距（原先 dopamine 漏了这条，正文两段会挤在一起） */
.intro-body + .intro-body { margin-top:8px; }

.series-block { margin:0 0 28px; padding:14px 18px; border:1px solid rgba(231,166,75,.35); border-radius:14px; background:var(--gold-soft); }
.series-block p { margin:0; font-size:14px; line-height:1.6; }

.grid { display:grid; grid-template-columns:minmax(300px,440px) minmax(340px,1fr); align-items:start; gap:28px; }
.stage { position:sticky; top:20px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#05080d; box-shadow:0 20px 48px rgba(0,0,0,.28); scroll-margin-top:12px; }
.now { padding:16px 18px 18px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#171f2d,#111926); }
.now small, .eyebrow { color:var(--gold); letter-spacing:.08em; font-size:12px; }
.now h2 { margin:3px 0 2px; font-size:20px; line-height:1.3; }
.now p { margin:0; color:var(--muted); font-size:14px; }
.stage-alert { margin:8px 0 0; padding:7px 10px; border:1px solid rgba(218,91,91,.5); border-radius:8px; background:rgba(148,37,37,.16); color:#efb0aa; font-size:13px; line-height:1.5; }
.video-wrap { aspect-ratio:9/16; max-height:72vh; margin:auto; background:#05080d; }
.video-wrap video { display:block; width:100%; height:100%; }

.episodes { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:rgba(21,31,48,.78); }
.episodes-head { padding:19px 20px 14px; border-bottom:1px solid var(--line); }
.episodes h2 { margin:0; font-size:18px; }
.episodes-head p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.part-heading { margin:0; padding:12px 20px; border-bottom:1px solid var(--line); color:var(--gold); font-size:14px; font-weight:600; }
.episode { appearance:none; width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:start; padding:15px 20px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.episode:last-child { border-bottom:0; }
.episode:hover { background:rgba(255,255,255,.055); }
.episode[aria-current="true"] { background:var(--gold-soft); }
.number { color:var(--gold); font-variant-numeric:tabular-nums; font-weight:700; padding-top:4px; }
.episode-copy { min-width:0; display:grid; gap:1px; }
.title { font-weight:700; line-height:1.35; }
.summary { color:var(--muted); font-size:14px; line-height:1.45; }
.duration { color:var(--muted); font-size:13px; white-space:nowrap; padding-top:4px; }
.note { margin:20px 4px 0; color:var(--muted); font-size:13px; }

@media (max-width:760px) {
  .shell { padding:20px 14px 36px; }
  .intro { padding:18px 16px 16px; }
  .grid { grid-template-columns:1fr; gap:20px; }
  .stage { position:relative; top:auto; max-width:440px; width:100%; margin:auto; }
  .episodes { border-radius:16px; }
  .episode { padding:14px 15px; grid-template-columns:34px minmax(0,1fr) auto; }
  .episodes-head { padding:16px; }
  .part-heading { padding-left:15px; padding-right:15px; }
  .note { margin-left:2px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}