/* ════════════════════════════════════════════════════════════════
   滄瀾界誌 · 連載站 — 沉浸電影感深色閱讀系統
   零外部依賴(系統字)、file:// 相容、與遊戲/story.html 同一個滄瀾界調性
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#04060e; --ink-deep:#010206; --ink-soft:#0a0e1a; --ink-panel:#0d1322;
  --paper:#ece7db; --paper-soft:#c6bfae; --paper-dim:#8b8576;
  --gold:#f0b454; --gold-bright:#ffd089; --gold-dim:#7d5f30;
  --cyan:#a8d6ff; --ember:#e0512f; --jade:#7fd3a8;
  --line:rgba(240,180,84,.16); --line-soft:rgba(236,231,219,.10);
  --serif:"Songti TC","Songti SC","STSong","Source Han Serif TC","Noto Serif CJK TC","Shippori Mincho",serif;
  --sans:"Optima","Avenir Next","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --col:52rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--paper); font-family:var(--serif);
  line-height:1.95; overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body::before{ /* 全域暈影 + 暖頂光 */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 70% at 50% -10%, rgba(240,180,84,.06), transparent 50%),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.6));
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(240,180,84,.28);color:#fff}

/* —— 頂部閱讀進度 —— */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  box-shadow:0 0 12px rgba(240,180,84,.6);transition:width .1s linear}

/* —— 頂部返回列 —— */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;padding:14px 22px;
  background:linear-gradient(180deg,rgba(4,6,14,.86),transparent);
  transition:background .4s,backdrop-filter .4s}
.topbar.solid{background:rgba(4,6,14,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.topbar a.home{font-family:var(--sans);font-size:13px;letter-spacing:.18em;color:var(--paper-soft);
  display:inline-flex;align-items:center;gap:.5em;transition:color .25s}
.topbar a.home:hover{color:var(--gold-bright)}
.topbar .seal{font-family:var(--serif);font-size:15px;letter-spacing:.5em;color:var(--gold);
  text-shadow:0 0 18px rgba(240,180,84,.4);padding-left:.5em}

/* ════ 閱讀頁 Hero ════ */
.hero{position:relative;height:100svh;min-height:560px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;z-index:1}
.hero video,.hero .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(80% 60% at 50% 42%, transparent, rgba(4,6,14,.35) 70%),
    linear-gradient(180deg,rgba(4,6,14,.5) 0%,transparent 28%,transparent 55%,rgba(4,6,14,.95) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 24px;animation:rise 1.6s var(--ease) both}
.hero .eyebrow{font-family:var(--sans);font-size:14px;letter-spacing:.62em;color:var(--gold);
  text-transform:uppercase;margin-bottom:18px;padding-left:.62em;
  text-shadow:0 0 22px rgba(240,180,84,.5)}
.hero h1{font-size:clamp(3.2rem,11vw,6.4rem);font-weight:400;letter-spacing:.16em;line-height:1.1;
  color:#fff;text-shadow:0 2px 50px rgba(240,180,84,.35),0 0 2px rgba(0,0,0,.6);padding-left:.16em}
.hero .sub{margin-top:22px;font-size:clamp(.95rem,2.6vw,1.18rem);letter-spacing:.34em;
  color:var(--paper-soft);padding-left:.34em}
.hero .meta{margin-top:30px;font-family:var(--sans);font-size:12px;letter-spacing:.28em;color:var(--paper-dim)}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--paper-dim);
  display:flex;flex-direction:column;align-items:center;gap:8px;animation:fade 2.6s var(--ease) infinite}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent)}

/* ════ 正文 ════ */
.reader{position:relative;z-index:2;background:linear-gradient(180deg,var(--ink) 0%,var(--ink-soft) 100%)}
.chapter-body{max-width:var(--col);margin:0 auto;padding:clamp(40px,9vw,96px) 26px 40px}
.chapter-head{text-align:center;margin-bottom:clamp(40px,8vw,80px)}
.chapter-head .ornament{margin-bottom:18px}
.chapter-head .ornament img{width:clamp(220px,42%,300px);height:auto;display:block;margin:0 auto;
  opacity:.92;filter:drop-shadow(0 0 18px rgba(240,180,84,.22))}
.chapter-head .label{font-family:var(--sans);font-size:13px;letter-spacing:.5em;color:var(--gold);padding-left:.5em}
.chapter-head h2{font-size:clamp(2rem,7vw,3rem);font-weight:400;letter-spacing:.2em;margin:14px 0;color:#fff;padding-left:.2em}
.chapter-head .sub{font-size:.92rem;letter-spacing:.2em;color:var(--paper-dim)}

.chapter-body p{font-size:clamp(1.06rem,2.7vw,1.2rem);margin:0 0 1.5em;color:var(--paper);
  letter-spacing:.02em;text-wrap:pretty}
/* 首段下沉大字 */
.chapter-body .first-real::first-letter{float:left;font-size:3.5em;line-height:.82;padding:.06em .12em 0 0;
  color:var(--gold);font-weight:400;text-shadow:0 0 26px rgba(240,180,84,.4)}
/* 短行(獨句)節奏 */
.chapter-body p.solo{text-align:center;color:var(--paper-soft);letter-spacing:.14em;
  font-size:clamp(1.1rem,3vw,1.28rem);margin:1.7em 0}

/* —— 全幅插圖 —— */
figure.bleed{position:relative;width:100vw;left:50%;transform:translateX(-50%);
  margin:clamp(48px,9vw,96px) 0;max-width:1180px}
@media(min-width:1240px){figure.bleed{width:min(92vw,1180px)}}
figure.bleed .frame{position:relative;overflow:hidden;border-radius:3px;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px var(--line)}
figure.bleed img{width:100%;aspect-ratio:1456/816;object-fit:cover;
  filter:saturate(1.04) contrast(1.03)}
figure.bleed .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,transparent 62%,rgba(4,6,14,.55));
  box-shadow:inset 0 0 80px rgba(0,0,0,.5)}
figure.bleed figcaption{margin-top:16px;text-align:center;font-size:.86rem;letter-spacing:.14em;
  color:var(--paper-dim);padding:0 26px;font-style:normal}
figure.bleed figcaption::before{content:"— ";color:var(--gold-dim)}

/* —— 章末 —— */
.chapter-foot{max-width:var(--col);margin:0 auto;text-align:center;
  padding:clamp(40px,8vw,80px) 26px clamp(60px,12vw,120px)}
.chapter-foot .fin{font-size:1.3rem;letter-spacing:.6em;color:var(--gold);padding-left:.6em;margin-bottom:14px}
.chapter-foot .fin-sub{font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--paper-dim);margin-bottom:40px}
.nextbar{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* —— 通用按鈕 —— */
.lnk{font-family:var(--sans);font-size:13px;letter-spacing:.22em;padding:13px 26px;
  border:1px solid var(--line);border-radius:2px;color:var(--paper-soft);
  transition:all .3s var(--ease);background:rgba(240,180,84,.02);cursor:pointer;display:inline-block}
.lnk:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(240,180,84,.08);
  box-shadow:0 0 24px rgba(240,180,84,.12);transform:translateY(-2px)}
.lnk.ghost{border-color:var(--line-soft);color:var(--paper-dim)}
.lnk.ghost:hover{color:var(--paper);border-color:var(--line)}

/* ════ 目錄頁 ════ */
.index-hero{position:relative;min-height:62svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:120px 24px 70px;overflow:hidden;z-index:1}
.index-hero .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.5;filter:saturate(1) brightness(.9)}
.index-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(70% 60% at 50% 40%,transparent,var(--ink) 78%),
    linear-gradient(180deg,rgba(4,6,14,.7),transparent 40%,var(--ink))}
.index-hero .inner{position:relative;z-index:2;animation:rise 1.4s var(--ease) both}
.index-hero .brand-seal{position:relative;width:76px;height:76px;margin:0 auto 28px}
.index-hero .brand-seal img{width:100%;height:100%;object-fit:contain;opacity:.92;
  filter:drop-shadow(0 0 16px rgba(240,180,84,.25))}
.index-hero .brand-seal b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:400;font-size:30px;color:var(--gold-bright);
  text-shadow:0 0 14px rgba(240,180,84,.55);padding-bottom:2px}
.index-hero .eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.6em;color:var(--gold);
  padding-left:.6em;margin-bottom:20px;text-shadow:0 0 20px rgba(240,180,84,.5)}
.index-hero h1{font-size:clamp(2.8rem,9vw,5rem);font-weight:400;letter-spacing:.3em;color:#fff;
  padding-left:.3em;text-shadow:0 2px 50px rgba(240,180,84,.3)}
.index-hero .tagline{margin-top:24px;max-width:30rem;font-size:1.02rem;letter-spacing:.08em;
  line-height:2;color:var(--paper-soft)}
.index-hero .count{margin-top:26px;font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--paper-dim)}

.toc{max-width:880px;margin:0 auto;padding:20px 22px 40px;position:relative;z-index:2}
.toc-title{font-family:var(--sans);font-size:13px;letter-spacing:.4em;color:var(--gold);
  text-align:center;margin:30px 0 36px;padding-left:.4em}
.toc-title::before,.toc-title::after{content:"";display:inline-block;width:40px;height:1px;
  background:var(--line);vertical-align:middle;margin:0 18px}

.ch-card{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:26px;align-items:center;
  padding:18px;border:1px solid var(--line-soft);border-radius:4px;margin-bottom:22px;
  background:linear-gradient(135deg,rgba(13,19,34,.6),rgba(10,14,26,.3));
  transition:all .4s var(--ease);position:relative;overflow:hidden}
.ch-card:hover{border-color:var(--line);transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ch-card .cover{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:16/9}
.ch-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ch-card:hover .cover img{transform:scale(1.06)}
.ch-card .cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(4,6,14,.5))}
.ch-card .body{display:flex;flex-direction:column;justify-content:center;padding:8px 8px 8px 0}
.ch-card .label{font-family:var(--sans);font-size:12px;letter-spacing:.4em;color:var(--gold);padding-left:.4em}
.ch-card h3{font-size:1.85rem;font-weight:400;letter-spacing:.14em;margin:8px 0 10px;color:#fff}
.ch-card .sub{font-size:.92rem;color:var(--paper-soft);letter-spacing:.06em;line-height:1.8;margin-bottom:16px}
.ch-card .stat{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;color:var(--paper-dim);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ch-card .stat .badge{color:var(--jade);border:1px solid rgba(127,211,168,.3);border-radius:99px;
  padding:2px 12px;letter-spacing:.2em}
.ch-card .stat .badge.soon{color:var(--paper-dim);border-color:var(--line-soft)}
.ch-card.locked{opacity:.5;pointer-events:none;filter:grayscale(.4)}

.toc-foot{text-align:center;padding:40px 22px 80px;position:relative;z-index:2}
.toc-foot .links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.toc-foot .note{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--paper-dim);opacity:.7}

/* —— 進場動畫(reveal-on-scroll)——
   用獨立 translate 屬性(非 transform)→ 與 figure 全幅置中/卡片 hover 的 transform 合成不衝突 */
.reveal{opacity:0;translate:0 26px;transition:opacity 1s var(--ease),translate 1s var(--ease)}
.reveal.in{opacity:1;translate:0 0}
@keyframes rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes fade{0%,100%{opacity:.25}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;transition:none}
  *{animation:none!important;scroll-behavior:auto}
}

/* —— 手機 —— */
@media(max-width:680px){
  body{line-height:1.9}
  .ch-card{grid-template-columns:1fr;gap:0}
  .ch-card .cover{aspect-ratio:16/9;margin-bottom:16px}
  .ch-card .body{padding:4px 6px 10px}
  .ch-card h3{font-size:1.5rem}
  figure.bleed figcaption{font-size:.8rem}
  .chapter-body .first-real::first-letter{font-size:3em}
}