/* ============ 秘伽罗 · 三世剧场 reel.css ============ */
/* 复用 theme.css 的 token 与 .bg-layer / #embers / .sound-btn */

.reel-body { background: var(--ink); overflow-x: hidden; }
.reel-body[data-who="xaro"] { --guide: var(--xaro); }
.reel-body[data-who="enchi"] { --guide: var(--enchi); }

.bg-veil{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(5,6,9,.55) 100%),
    linear-gradient(to bottom, rgba(8,9,12,.35), transparent 22%, transparent 70%, rgba(8,9,12,.75));
}

/* ---------- 顶栏 ---------- */
.reel-topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(.9rem + env(safe-area-inset-top)) 1.4rem .9rem;
  background:linear-gradient(to bottom, rgba(8,9,12,.82), transparent);
}
.reel-actions{display:flex; align-items:center; gap:.6rem;}

/* ---------- 幕容器 ---------- */
.reel{position:relative; z-index:5;}
.reel-act{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:6.5rem 1.5rem 4rem; position:relative;
}
.act-inner{
  max-width:40rem; width:100%; text-align:center;
  animation:actIn .9s ease both;
}
@keyframes actIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.act-eyebrow{
  font-size:.82rem; letter-spacing:.42em; text-indent:.42em;
  color:var(--guide); margin-bottom:1.1rem; opacity:.85;
}
.act-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,8vw,4rem); letter-spacing:.18em; text-indent:.18em;
  color:var(--paper); line-height:1.1; margin-bottom:2rem;
  text-shadow:0 0 42px rgba(214,178,102,.22);
}
.act-guide{
  font-size:clamp(1.02rem,2.6vw,1.28rem); line-height:2.1; color:var(--paper);
  max-width:30rem; margin:0 auto 1.4rem; opacity:.92;
}
.act-sub{
  font-size:.92rem; line-height:1.9; color:var(--muted-text);
  max-width:28rem; margin:0 auto 2.4rem;
}
.reel-note{margin-top:1.5rem; font-size:.8rem; color:var(--muted-text); letter-spacing:.05em;}

/* 旋转卷印 */
.seal-turn{
  width:5.2rem; height:5.2rem; margin:0 auto 2.2rem; border-radius:50%;
  display:grid; place-items:center; position:relative;
  border:1px solid color-mix(in srgb,var(--guide) 55%, transparent);
  box-shadow:0 0 30px -6px var(--guide), inset 0 0 18px -8px var(--guide);
  animation:sealSpin 26s linear infinite;
}
.seal-turn::before{
  content:""; position:absolute; inset:.5rem; border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--paper) 30%, transparent);
}
.seal-char{
  font-family:var(--font-display); font-size:2rem; font-weight:700;
  color:var(--cinnabar); text-shadow:0 0 14px rgba(158,59,50,.6);
  animation:sealSpin 26s linear infinite reverse;
}
@keyframes sealSpin{to{transform:rotate(360deg);}}

/* ---------- 剧场舞台 ---------- */
.reel-stage{
  position:relative; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:calc(4.6rem + env(safe-area-inset-top)) 0 calc(1.2rem + env(safe-area-inset-bottom));
}
.reel[hidden], .reel-stage[hidden], .reel-act[hidden]{display:none !important;}

.reel-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:61;
  background:rgba(233,226,208,.08);
}
.reel-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(to right,var(--xaro),var(--gold),var(--enchi));
  box-shadow:0 0 10px var(--guide); transition:width .5s ease;
}

.chapter-tag{
  align-self:center; text-align:center;
  font-family:var(--font-display); letter-spacing:.34em; text-indent:.34em;
  font-size:.92rem; padding:.42rem 1.2rem; margin-bottom:.9rem;
  color:var(--paper); border:1px solid color-mix(in srgb,var(--guide) 45%,transparent);
  border-radius:999px; background:rgba(8,9,12,.45); backdrop-filter:blur(4px);
}
.chapter-tag.ch-past{color:#cfe0dd;}
.chapter-tag.ch-present{color:var(--gold);}
.chapter-tag.ch-future{color:#e9e2d0;}

/* ---------- 舞台：立绘 + 分镜 + 旁白 ---------- */
.theatre{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* 引卷官立绘（移动端：右侧淡入的半身，不抢戏） */
.guide-standee{
  position:fixed; right:-6vw; bottom:0; z-index:4;
  height:62vh; pointer-events:none; opacity:0;
  transform:translateX(28%);
  transition:opacity 1.1s ease, transform 1.1s ease;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--guide) 45%,transparent));
}
.guide-standee img{
  height:100%; width:auto; object-fit:contain;
  -webkit-mask-image:linear-gradient(to top,#000 72%,transparent 99%);
          mask-image:linear-gradient(to top,#000 72%,transparent 99%);
}
.reel-playing .guide-standee{opacity:.5; transform:translateX(0);}
.reel-playing .guide-standee:hover{opacity:.82;}
.standee-glow{
  position:absolute; inset:12% -20% 0; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 60% 38%, color-mix(in srgb,var(--guide) 30%,transparent), transparent 72%);
  filter:blur(18px);
}

/* 分镜 */
.scene-frame{
  position:relative; width:min(74vw,24rem); aspect-ratio:3/4; margin:0 auto;
  border-radius:var(--radius-lg); overflow:hidden; z-index:6;
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:0 28px 80px -30px #000, 0 0 60px -30px var(--guide);
  background:#000;
}
.scene-kenburns{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
}
.scene-kenburns.kb{animation:kenburns 18s ease-out both;}
@keyframes kenburns{
  from{transform:scale(1.12) translateY(2%);}
  to{transform:scale(1.0) translateY(0);}
}
/* 换图淡入 */
.scene-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 0 transparent;
}
.scene-mist{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 40% at 30% 18%, rgba(214,178,102,.12), transparent 60%),
    radial-gradient(60% 36% at 78% 78%, color-mix(in srgb,var(--guide) 16%,transparent), transparent 60%);
  animation:mistDrift 12s ease-in-out infinite alternate;
}
@keyframes mistDrift{from{opacity:.5; transform:translateX(-2%);} to{opacity:.9; transform:translateX(2%);}}
.scene-vignette{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px 18px rgba(0,0,0,.72);
  background:linear-gradient(to top, rgba(5,6,9,.78), transparent 32%, transparent 55%, rgba(5,6,9,.42));
}

/* ---------- 穿越 / 跨世转场遮罩 ---------- */
.warp{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 50%, rgba(8,9,14,.2), rgba(4,5,8,.92));
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s;
}
.warp.is-on{opacity:1; visibility:visible; transition:opacity .45s ease;}
.warp-vortex{position:relative; width:min(70vmin,26rem); aspect-ratio:1;}
.warp-core{
  position:absolute; inset:42%; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--guide) 38%, transparent 72%);
  filter:blur(2px); opacity:0;
}
.warp-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--guide) 65%,transparent);
  opacity:0;
}
.warp.is-dive .warp-ring{animation:ringDive 2.5s ease-out infinite;}
.warp.is-dive .warp-ring.r2{animation-delay:.32s;}
.warp.is-dive .warp-ring.r3{animation-delay:.64s;}
.warp.is-dive .warp-core{animation:coreDive 2.5s ease-in-out;}
@keyframes ringDive{
  0%{transform:scale(.2); opacity:0; border-width:3px;}
  25%{opacity:.9;}
  100%{transform:scale(1.35); opacity:0; border-width:1px;}
}
@keyframes coreDive{
  0%{transform:scale(.3); opacity:0;}
  45%{transform:scale(1.15); opacity:.95;}
  70%{transform:scale(1.6); opacity:1;}
  100%{transform:scale(2.4); opacity:0;}
}
.warp.is-leap .warp-ring{animation:ringLeap 1.4s ease-out;}
.warp.is-leap .warp-ring.r2{animation-delay:.14s;}
.warp.is-leap .warp-ring.r3{animation-delay:.28s;}
.warp.is-leap .warp-core{animation:coreLeap 1.4s ease-in-out;}
@keyframes ringLeap{
  0%{transform:scale(.55) rotate(0); opacity:0;}
  35%{opacity:.85;}
  100%{transform:scale(1.25) rotate(120deg); opacity:0;}
}
@keyframes coreLeap{
  0%{transform:scale(.5); opacity:0;}
  40%{transform:scale(1.1); opacity:.9;}
  100%{transform:scale(1.8); opacity:0;}
}
.warp-word{
  position:absolute; left:0; right:0; bottom:22%; text-align:center;
  font-family:var(--font-display); letter-spacing:.5em; text-indent:.5em;
  font-size:clamp(1.1rem,4.4vw,1.8rem); color:var(--paper);
  text-shadow:0 0 24px color-mix(in srgb,var(--guide) 70%,transparent);
  opacity:0; transform:translateY(10px);
}
.warp.is-on .warp-word{animation:wordIn .9s ease .25s forwards;}
@keyframes wordIn{to{opacity:1; transform:none;}}

/* ---------- 旁白 ---------- */
.narration{
  position:relative; z-index:6;
  width:min(88vw,32rem); margin:1.1rem auto 0; text-align:center;
  cursor:pointer;
}
.narrator{
  font-size:.82rem; letter-spacing:.2em; color:var(--guide); margin-bottom:.6rem;
}
.narr-line{
  font-size:clamp(1rem,2.5vw,1.2rem); line-height:2.05; color:var(--paper);
  min-height:6.4em; text-shadow:0 2px 14px rgba(0,0,0,.8);
  transition:opacity .3s;
}
.narr-dots{display:flex; justify-content:center; gap:.9rem; margin-top:.9rem;}
.narr-dots i{
  font-style:normal; font-size:.62rem; letter-spacing:.08em;
  color:var(--muted-text); opacity:.55;
  position:relative; padding-top:.7rem;
}
.narr-dots i::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:.42rem; height:.42rem; border-radius:50%;
  background:rgba(233,226,208,.25);
}
.narr-dots i.is-cur{color:var(--paper); opacity:1;}
.narr-dots i.is-cur::before{background:var(--guide); box-shadow:0 0 8px var(--guide);}
.narr-dots i.is-done{color:var(--guide); opacity:.8;}
.narr-dots i.is-done::before{background:var(--guide);}

/* ---------- 控制 ---------- */
.reel-ctrl{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:1.1rem;
  padding:1.2rem 1.5rem 0;
}
.line-count{
  font-size:.8rem; letter-spacing:.12em; color:var(--muted-text);
  min-width:3.4rem; text-align:center;
}
.btn-small{padding:.72rem 1.7rem; font-size:.95rem; min-width:9rem;}
.ghost-btn{
  background:transparent; border:1px solid color-mix(in srgb,var(--paper) 28%,transparent);
  color:var(--paper); border-radius:var(--radius-pill);
  padding:.72rem 1.4rem; font-size:.92rem; cursor:pointer;
  transition:.25s;
}
.ghost-btn:hover{border-color:var(--guide); color:var(--guide);}
.ghost-btn:disabled{opacity:.3; cursor:not-allowed;}

/* ---------- 付费墙 ---------- */
.reel-paywall{
  background:
    radial-gradient(90% 50% at 50% 0%, color-mix(in srgb,var(--guide) 12%,transparent), transparent 60%),
    linear-gradient(to bottom, rgba(8,9,12,.4), var(--ink) 30%);
}
.pay-inner{max-width:40rem; width:100%; text-align:center;}
.quote-mark{
  font-family:var(--font-display); font-size:3.4rem; line-height:1;
  color:var(--guide); opacity:.5; margin-bottom:.2rem;
}
.final-quote{
  font-family:var(--font-display); font-size:clamp(1.18rem,3.2vw,1.55rem);
  line-height:2.1; color:var(--paper); letter-spacing:.04em;
  max-width:30rem; margin:0 auto .9rem; text-shadow:0 0 28px rgba(214,178,102,.18);
}
.quote-from{font-size:.86rem; color:var(--guide); letter-spacing:.18em; margin-bottom:2.4rem;}

/* 墨痕卡 */
.ink-card{
  position:relative; text-align:left;
  background:linear-gradient(160deg, rgba(20,21,27,.92), rgba(12,13,17,.94));
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  border-radius:var(--radius-lg); padding:1.9rem 1.7rem 1.7rem;
  box-shadow:0 30px 90px -40px #000, inset 0 0 40px -30px var(--gold);
  overflow:hidden;
}
.ink-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(80% 40% at 50% 0%, color-mix(in srgb,var(--guide) 12%,transparent), transparent 70%);
}
.ink-title{
  font-family:var(--font-display); font-size:1.12rem; color:var(--gold);
  letter-spacing:.06em; margin-bottom:1.3rem; text-align:center; position:relative;
}
.ink-list{list-style:none; position:relative; margin-bottom:1.7rem;}
.ink-list li{
  display:flex; align-items:center; gap:.8rem; padding:.62rem 0;
  border-bottom:1px dashed rgba(233,226,208,.08);
}
.ink-list li:last-child{border-bottom:0;}
.ink-blob{
  flex:0 0 auto; width:2.1rem; height:1.15rem; border-radius:45%;
  background:
    radial-gradient(60% 70% at 35% 40%, #05060a, #15131a 70%),
    #000;
  filter:blur(.2px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
  position:relative;
}
.ink-blob::after{
  content:""; position:absolute; inset:-2px 2px; border-radius:45%;
  background:radial-gradient(closest-side, rgba(20,18,26,.9), transparent);
}
.ink-list em{
  font-style:normal; font-size:.96rem; line-height:1.5; color:var(--paper); opacity:.9;
}
.ink-list li:hover .ink-blob{box-shadow:0 0 10px -2px var(--guide);}

.price-row{
  display:flex; align-items:baseline; justify-content:center; gap:.7rem;
  margin-bottom:1.2rem; position:relative;
}
.price-old{
  font-size:1.05rem; color:var(--muted-text); text-decoration:line-through; opacity:.7;
}
.price-now{
  font-family:var(--font-display); font-size:2.5rem; font-weight:700;
  color:var(--gold); text-shadow:0 0 24px rgba(214,178,102,.35);
}
.price-tag{
  font-size:.74rem; color:var(--cinnabar); border:1px solid var(--cinnabar);
  border-radius:999px; padding:.12rem .55rem; letter-spacing:.08em;
  background:rgba(158,59,50,.1);
}
.btn-unlock{
  width:100%; padding:1.05rem; font-size:1.08rem; margin-bottom:.8rem; position:relative;
}
.pay-micro{
  text-align:center; font-size:.74rem; color:var(--muted-text); letter-spacing:.03em;
}
.pay-locked-note{
  margin-top:1rem; text-align:center; font-size:.86rem; line-height:1.7;
  color:var(--paper); opacity:.85;
  padding:.9rem 1rem; border-radius:var(--radius-md);
  background:rgba(63,166,160,.08); border:1px solid color-mix(in srgb,var(--underworld) 30%,transparent);
}

.pay-foot{
  margin-top:2.1rem; display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.5rem;
}
.linklike{
  background:none; border:0; color:var(--muted-text); font-size:.86rem;
  cursor:pointer; text-decoration:none; padding:.2rem .3rem;
  transition:color .2s;
}
.linklike:hover{color:var(--paper);}
.dot-sep{color:var(--muted-text); opacity:.4; font-size:.8rem;}
.ai-note{
  margin-top:1.6rem; font-size:.72rem; line-height:1.7; color:var(--muted-text);
  opacity:.65; max-width:26rem; margin-left:auto; margin-right:auto;
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .reel-topbar{padding:calc(.8rem + env(safe-area-inset-top)) 1rem .8rem;}
  .reel-stage{padding-top:calc(4.1rem + env(safe-area-inset-top));}
  .scene-frame{width:min(72vw,19rem);}
  /* 手机端立绘更淡、更靠边，避免压住画面 */
  .guide-standee{right:-14vw; height:52vh; opacity:0;}
  .reel-playing .guide-standee{opacity:.34;}
  .narr-line{min-height:6.6em; line-height:1.92; font-size:1.02rem;}
  .ink-card{padding:1.5rem 1.2rem 1.4rem;}
  .price-now{font-size:2.1rem;}
}
@media (min-width:960px){
  .reel-stage{
    display:grid;
    grid-template-columns: minmax(13rem,17rem) minmax(20rem,27rem) minmax(22rem,30rem);
    grid-template-rows:auto 1fr auto;
    align-content:center; gap:0 2rem;
    max-width:84rem; margin:0 auto; width:100%;
    padding-left:2rem; padding-right:2rem;
  }
  .chapter-tag{grid-column:1 / -1; justify-self:center;}
  .theatre{display:contents;}
  /* 桌面立绘：左侧常驻，完整更高 */
  .guide-standee{
    position:static; grid-row:2; grid-column:1;
    height:auto; max-height:68vh; justify-self:center; align-self:end;
    opacity:0; transform:translateY(18%);
  }
  .reel-playing .guide-standee{opacity:.92; transform:none;}
  .guide-standee img{
    height:auto; max-height:68vh; width:100%; object-fit:contain;
    -webkit-mask-image:linear-gradient(to top,#000 80%,transparent 99%);
            mask-image:linear-gradient(to top,#000 80%,transparent 99%);
  }
  .scene-frame{grid-row:2; grid-column:2; width:100%; max-height:66vh; align-self:center;}
  .narration{grid-row:2; grid-column:3; align-self:center; margin:0; text-align:left; width:100%;}
  .narrator{text-align:left;}
  .narr-dots{justify-content:flex-start;}
  .reel-ctrl{grid-column:1 / -1; grid-row:3;}
}

@media (prefers-reduced-motion: reduce){
  .scene-kenburns, .scene-mist, .seal-turn, .seal-char,
  .guide-standee, .warp-ring, .warp-core, .warp-word{animation:none !important;}
  .reel-playing .guide-standee{opacity:.8; transform:none;}
}