/* ═══════════════════════════════════════════════════════════
   FATE THEATER 命運劇場 — base stylesheet
   midnight black-purple · velvet red · antique gold · moonlight
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg-main:#05030A;
  --bg-deep:#120B1F;
  --velvet-red:#2A0D18;
  --velvet-dark:#180712;
  --antique-gold:#C8A45D;   /* 古金 */
  --light-gold:#E0C27A;     /* 香檳金（不亮黃、不橘黃） */
  --gold-dim:#8F6F35;       /* 暗金 */
  --moonlight:#EEE6D8;
  --text-muted:#A79BB7;
  --arcane-purple:#7B5CFF;
  --blood-wine:#6E1F32;
  --panel-bg:rgba(255,255,255,0.055);
  --panel-border:rgba(198,161,91,0.42);
  --shadow-heavy:rgba(0,0,0,0.72);

  --font-display:"Cinzel Decorative","Cinzel",serif;
  --font-head:"Cinzel",serif;
  --font-body:"Cormorant Garamond",Georgia,serif;
  --font-zh:"Noto Serif TC","PMingLiU",serif;

  --ease-soft:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-drama:cubic-bezier(0.83,0,0.17,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-main);
  color:var(--moonlight);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* deep stage gradient */
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a0f2e 0%, transparent 55%),
    radial-gradient(90% 70% at 50% 115%, #160a14 0%, transparent 60%),
    linear-gradient(180deg,#070410 0%, var(--bg-main) 45%, #060309 100%);
}
.zh{font-family:var(--font-zh)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ambient layers ───────────────────────────── */
#dust-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:50;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(2,1,6,0.55) 86%, rgba(1,0,4,0.85) 100%);}
.grain{position:fixed;inset:-50%;z-index:51;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:grainShift 1.4s steps(4) infinite;}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}

/* ── marquee ─────────────────────────────────── */
.marquee{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:18px;justify-content:center;
  padding:14px 24px;
  font-family:var(--font-head);font-size:11px;letter-spacing:.42em;color:var(--antique-gold);
  opacity:0;transform:translateY(-100%);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(5,3,10,.92), rgba(5,3,10,0));
}
.marquee.show{opacity:1;transform:translateY(0)}
.marquee-line{flex:1;max-width:180px;height:1px;background:linear-gradient(90deg,transparent,rgba(198,161,91,.5))}
.marquee-line:last-child{background:linear-gradient(270deg,transparent,rgba(198,161,91,.5))}
.marquee-name i{font-style:normal;font-family:var(--font-zh);font-size:10px;letter-spacing:.3em;color:var(--text-muted);margin-left:8px}
.marquee-chapter{color:var(--text-muted);font-size:10px;letter-spacing:.34em}

/* ── sound toggle ────────────────────────────── */
.sound-toggle{
  position:fixed;top:10px;right:14px;z-index:45;cursor:pointer;
  background:rgba(5,3,10,.6);border:1px solid rgba(198,161,91,.3);
  color:var(--antique-gold);
  font-family:var(--font-head);font-size:9.5px;letter-spacing:.24em;
  padding:8px 14px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .4s, color .4s, opacity .4s;
}
.sound-toggle i{font-style:normal;font-family:var(--font-zh);font-size:9px;letter-spacing:.2em;color:var(--text-muted)}
.sound-toggle span{font-size:12px}
.sound-toggle:hover{border-color:rgba(242,213,138,.6)}
.sound-toggle.muted{color:var(--text-muted);opacity:.6}
.sound-toggle.muted span{text-decoration:line-through}
.sound-toggle:focus-visible{outline:1px solid var(--light-gold);outline-offset:3px}

/* ── chapters ─────────────────────────────────── */
.chapter{
  display:none;
  min-height:100vh;
  padding:96px 24px 72px;
  max-width:1180px;margin:0 auto;
  position:relative;z-index:1;
  flex-direction:column;
}
.chapter.active{display:flex;animation:chapterIn 1.1s var(--ease-out) both}
@keyframes chapterIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.chapter-full{max-width:none;padding-left:0;padding-right:0}

.chapter-head{text-align:center;margin-bottom:48px}
.overline{font-family:var(--font-head);font-size:11px;letter-spacing:.52em;color:var(--antique-gold);opacity:.85;margin-bottom:18px}
.chapter-title{font-family:var(--font-head);font-weight:500;font-size:clamp(28px,4.4vw,46px);letter-spacing:.14em;color:var(--moonlight)}
.chapter-title-zh{font-family:var(--font-zh);font-size:15px;letter-spacing:.5em;color:var(--text-muted);margin-top:10px;text-indent:.5em}
.chapter-sub{margin-top:22px;font-size:18px;font-style:italic;color:rgba(238,230,216,.78);line-height:1.7}
.chapter-sub .zh{font-style:normal;font-size:13.5px;color:var(--text-muted);letter-spacing:.12em}
.chapter-foot{margin-top:auto;padding-top:48px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}

/* ── buttons ─────────────────────────────────── */
.btn{
  position:relative;cursor:pointer;border:none;background:none;
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  padding:18px 46px;
  font-family:var(--font-head);
  transition:transform .5s var(--ease-soft), opacity .4s;
  isolation:isolate;
}
.btn:disabled{opacity:.32;cursor:not-allowed;filter:saturate(.4)}
.btn .btn-en{font-size:15px;letter-spacing:.3em;text-indent:.3em;color:var(--light-gold)}
.btn .btn-zh{font-family:var(--font-zh);font-size:11px;letter-spacing:.4em;text-indent:.4em;color:var(--text-muted)}
.btn-gold::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg, rgba(198,161,91,.1), rgba(198,161,91,.02) 50%, rgba(198,161,91,.08));
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
  transition:background .5s,border-color .5s, box-shadow .6s;
}
.btn-gold::after{
  content:"";position:absolute;inset:4px;z-index:-1;
  border:1px solid rgba(198,161,91,.16);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);
}
.btn-gold:not(:disabled):hover{transform:translateY(-2px)}
.btn-gold:not(:disabled):hover::before{
  background:linear-gradient(180deg, rgba(242,213,138,.18), rgba(198,161,91,.05) 55%, rgba(242,213,138,.14));
  border-color:rgba(242,213,138,.65);
  box-shadow:0 0 34px rgba(198,161,91,.22), inset 0 0 22px rgba(198,161,91,.1);
}
.btn-ghost{padding:16px 36px}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(167,155,183,.28);transition:border-color .4s, background .4s}
.btn-ghost .btn-en{color:rgba(238,230,216,.85);font-size:13px}
.btn-ghost:not(:disabled):hover::before{border-color:var(--panel-border);background:rgba(198,161,91,.05)}
.btn:focus-visible{outline:1px solid var(--light-gold);outline-offset:5px}
.hidden-btn{visibility:hidden;opacity:0;transform:translateY(14px)}
.hidden-btn.show{visibility:visible;opacity:1;transform:none;transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft)}

/* ═══════════ CHAPTER 0 · ARCANE THEATER AWAKENING ═══════════ */
#ch-gate{max-width:none;padding:0;overflow:hidden}
/* 首頁＝關閉的劇場：布幕覆蓋舞台，文字永遠在最上層；午夜敲門後布幕拉開、舞台魔法陣顯現 */
.gate-room{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,7vh,72px) 18px 32px;
}

/* 舞台層（布幕後方）：魔法陣，初始隱藏，開幕後顯現 */
.gate-stage{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1.1s var(--ease-soft) .3s;
}
body.curtains-open .gate-stage{opacity:1;animation:stageReveal 1.8s var(--ease-soft) .3s}
@keyframes stageReveal{0%{filter:brightness(1)}38%{filter:brightness(1.45) drop-shadow(0 0 42px rgba(224,194,122,.5))}100%{filter:brightness(1)}}
.magic-circle-safe-area{
  position:relative;flex:0 0 auto;
  width:min(420px,42vh,76vw);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
}
.awaken-ring{
  position:relative;width:100%;height:100%;aspect-ratio:1/1;border-radius:50%;
  color:var(--antique-gold);pointer-events:none;
  animation:ringBreath 8s ease-in-out infinite;
}
@keyframes ringBreath{0%,100%{filter:drop-shadow(0 0 10px rgba(200,164,93,.15))}50%{filter:drop-shadow(0 0 26px rgba(224,194,122,.32))}}
.awaken-ring svg{width:100%;height:100%;display:block;overflow:visible}
/* 舞台後方的魔法陣：外圈順時針、內圈逆時針，明顯反向且有動感 */
.awaken-ring .outerMagicCircleLayer{animation:acSpin 42s linear infinite;transform-origin:center;transform-box:fill-box}
.awaken-ring .innerMagicCircleLayer{animation:acSpin 28s linear infinite reverse;transform-origin:center;transform-box:fill-box}
/* 開幕啟動：內外圈快速反向爆衝半圈，再回到穩定旋轉 */
body.curtains-open .awaken-ring .outerMagicCircleLayer{animation:mcSpinCW 1.5s var(--ease-out), acSpin 42s linear 1.5s infinite}
body.curtains-open .awaken-ring .innerMagicCircleLayer{animation:mcSpinCCW 1.4s var(--ease-out), acSpin 28s linear 1.4s infinite reverse}
@keyframes mcSpinCW{from{transform:rotate(-210deg)}to{transform:rotate(0)}}
@keyframes mcSpinCCW{from{transform:rotate(210deg)}to{transform:rotate(0)}}
/* 開幕的能量節點齊閃一下 */
body.curtains-open .awaken-ring .energyNodeLayer{animation:nodeBurst 1.2s var(--ease-out) .2s}
@keyframes nodeBurst{0%{filter:none}40%{filter:drop-shadow(0 0 10px rgba(224,194,122,.95)) brightness(1.5)}100%{filter:none}}
/* gate 專屬：overline 加可讀陰影（不影響其他章節） */
#ch-gate .overline{text-shadow:0 1px 5px rgba(0,0,0,.55)}

/* 關閉布幕：左右各半覆蓋整個舞台，敲門後向兩側拉開 */
.stage-curtain{position:absolute;inset:0;z-index:2;pointer-events:none}
.sc-half{
  position:absolute;top:0;bottom:0;width:51%;
  box-shadow:0 0 70px rgba(0,0,0,.7);
  transition:transform 2s var(--ease-drama);
}
.sc-left{left:0}.sc-right{right:0}
.sc-folds{
  position:absolute;inset:0;display:block;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 16%, transparent 60%, rgba(0,0,0,.66)),
    repeating-linear-gradient(90deg,
      #3a1320 0 16px, var(--velvet-red) 16px 30px, #1f0a12 30px 46px, var(--velvet-dark) 46px 64px);
}
.sc-folds::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,205,170,.045) 16px 22px, transparent 22px 64px);
}
.sc-right .sc-folds{transform:scaleX(-1)}
/* 中央接縫：細金光線（布幕閉合處） */
.sc-seam{
  position:absolute;left:50%;top:0;bottom:0;width:3px;z-index:3;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(224,194,122,.5) 14%,rgba(224,194,122,.5) 86%,transparent);
  box-shadow:0 0 14px rgba(224,194,122,.4);
  transition:opacity .6s;
}
.gate-valance{
  position:absolute;top:0;left:0;right:0;height:62px;z-index:3;pointer-events:none;
  background:repeating-radial-gradient(32px 40px at 50% -10px, #3a1320 0 9px, var(--velvet-red) 9px 20px, var(--velvet-dark) 20px 32px);
  border-bottom:1px solid rgba(200,164,93,.5);
  box-shadow:0 8px 34px rgba(0,0,0,.7);
}
.gate-valance::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;
  background:repeating-linear-gradient(90deg, transparent 0 16px, rgba(200,164,93,.5) 16px 18px, transparent 18px 34px);
}
body.curtains-open .sc-left{transform:translateX(-101%)}
body.curtains-open .sc-right{transform:translateX(101%)}
body.curtains-open .sc-seam{opacity:0}
body.curtains-open .gate-valance{transition:transform 1.6s var(--ease-drama);transform:translateY(-110%)}

/* 文字層：永遠在最上層、附柔和暗襯，確保布幕上完全可讀 */
.gate-content{
  position:relative;z-index:4;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(24px,6.5vh,64px);text-align:center;
}
/* 每個文字群組各有一層柔和、均勻的暗襯，把字和布幕條紋分開（不是硬框、不偏一邊） */
.gate-title-zone,.gate-action-zone{position:relative;z-index:0}
.gate-title-zone::before,.gate-action-zone::before{
  content:"";position:absolute;inset:-24% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 50%,
    rgba(5,3,10,.72) 0%, rgba(5,3,10,.6) 42%, rgba(5,3,10,.32) 66%, transparent 84%);
  filter:blur(8px);
}
.gate-title-zone{text-align:center}
.gate-action-zone{display:flex;flex-direction:column;align-items:center;gap:14px}

/* 敲門 → 拉開布幕、文字淡出 */
body.knocking .gate-room{animation:knockShake .5s var(--ease-drama) 2}
@keyframes knockShake{0%,100%{transform:none}20%{transform:translateX(-5px) translateY(2px)}45%{transform:translateX(4px)}70%{transform:translateX(-3px) translateY(-2px)}}
body.curtains-open .gate-content{animation:gateContentOut 1.2s var(--ease-drama) forwards}

/* gate text */
.gate-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(38px,6.2vw,76px);
  letter-spacing:.04em;line-height:1.36;
  padding:.18em .34em .16em;overflow:visible;  /* 右側留白，避免裝飾性 R 尾被切 */
  background:linear-gradient(105deg,
    var(--gold-dim) 0%, var(--light-gold) 32%, #fdf3da 50%, var(--light-gold) 68%, var(--gold-dim) 100%);
  background-size:230% 100%;background-position:85% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(200,164,93,.3));
  animation:titleShine 9s ease-in-out 3.4s infinite;
}
@keyframes titleShine{0%,100%{background-position:85% 0}50%{background-position:15% 0}}
.gate-title span{display:inline-block}
.gate-title-zh{font-family:var(--font-zh);font-weight:300;font-size:clamp(14px,2.2vw,20px);letter-spacing:1.1em;text-indent:1.1em;color:var(--antique-gold);margin-top:9px;text-shadow:0 1px 5px rgba(0,0,0,.55)}
.gate-rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:30px auto;color:var(--antique-gold);font-size:12px}
.gate-rule::before,.gate-rule::after{content:"";width:min(150px,22vw);height:1px;background:linear-gradient(90deg,transparent,rgba(198,161,91,.6))}
.gate-rule::after{background:linear-gradient(270deg,transparent,rgba(198,161,91,.6))}
.gate-rule i{font-style:normal;animation:starTwinkle 3.4s ease-in-out infinite}
@keyframes starTwinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.tagline-en{font-size:clamp(16px,2.1vw,21px);font-style:italic;color:rgba(238,230,216,.9);line-height:1.7;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tagline-zh{font-family:var(--font-zh);font-size:13px;letter-spacing:.18em;color:rgba(207,197,222,.92);margin-top:10px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#btn-knock{margin-top:14px}

/* staggered reveal on load */
.reveal-1,.reveal-2,.reveal-3,.reveal-4,.reveal-5,.reveal-6{opacity:0;animation:gateReveal 1.6s var(--ease-out) forwards}
.reveal-1{animation-delay:.3s}.reveal-2{animation-delay:.7s}.reveal-3{animation-delay:1.15s}
.reveal-4{animation-delay:1.5s}.reveal-5{animation-delay:1.8s}.reveal-6{animation-delay:2.2s}
@keyframes gateReveal{from{opacity:0;transform:translateY(20px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gateContentOut{0%{opacity:1}45%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.12) translateY(-30px);filter:blur(8px)}}

/* ═══════════ CHAPTER 1 · PLAY CARDS ═══════════ */
.play-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.play-card{
  position:relative;cursor:pointer;border:1px solid rgba(198,161,91,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 40%, rgba(0,0,0,.18)),
    var(--bg-deep);
  padding:0;text-align:center;color:inherit;font:inherit;
  overflow:hidden;
  transition:transform .7s var(--ease-soft), border-color .6s, box-shadow .7s;
  opacity:0;transform:translateY(30px);
  animation:playIn 1s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * .12s);
}
@keyframes playIn{to{opacity:1;transform:none}}
.play-card:focus-visible{outline:1px solid var(--light-gold);outline-offset:4px}

/* mini curtain inside play card */
.pc-curtain{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex}
.pc-curtain i{
  flex:1;
  background:repeating-linear-gradient(90deg, var(--velvet-red) 0 10px, #1d0911 10px 18px, #330f1d 18px 28px, var(--velvet-dark) 28px 40px);
  opacity:.16;
  transition:transform 1.1s var(--ease-soft), opacity 1.1s;
}
.pc-curtain i:first-child{transform-origin:left}
.pc-curtain i:last-child{transform-origin:right}
.play-card:hover .pc-curtain i:first-child,.play-card.selected .pc-curtain i:first-child{transform:translateX(-30%) scaleX(.7);opacity:.08}
.play-card:hover .pc-curtain i:last-child,.play-card.selected .pc-curtain i:last-child{transform:translateX(30%) scaleX(.7);opacity:.08}

.pc-body{position:relative;z-index:2;padding:34px 26px 28px;display:flex;flex-direction:column;align-items:center;min-height:330px}
.pc-num{font-family:var(--font-head);font-size:10px;letter-spacing:.5em;color:var(--antique-gold);opacity:.7;margin-bottom:18px}
.pc-sigil{width:88px;height:88px;color:var(--antique-gold);margin-bottom:22px;filter:drop-shadow(0 0 10px rgba(198,161,91,.18))}
.pc-sigil svg{width:100%;height:100%;overflow:visible}
.pc-title-en{font-family:var(--font-head);font-weight:500;font-size:20px;letter-spacing:.12em;color:var(--moonlight);transition:letter-spacing .8s var(--ease-soft), color .6s}
.play-card:hover .pc-title-en{letter-spacing:.18em;color:var(--light-gold)}
.pc-title-zh{font-family:var(--font-zh);font-size:13px;letter-spacing:.3em;color:var(--text-muted);margin-top:8px}
.pc-tagline{font-style:italic;font-size:14.5px;line-height:1.65;color:rgba(238,230,216,.66);margin-top:18px}
.pc-tagline-zh{font-family:var(--font-zh);font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.8}
.pc-goldline{position:absolute;left:14%;right:14%;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--antique-gold),transparent);
  transform:scaleX(0);transition:transform .9s var(--ease-soft)}
.play-card:hover .pc-goldline,.play-card.selected .pc-goldline{transform:scaleX(1)}

.play-card:hover{transform:translateY(-7px);border-color:rgba(198,161,91,.5);box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(198,161,91,.12)}
.play-card.selected{
  border-color:rgba(242,213,138,.8);
  box-shadow:0 0 0 1px rgba(242,213,138,.35), 0 30px 70px rgba(0,0,0,.6), 0 0 60px rgba(198,161,91,.18);
  transform:translateY(-7px) scale(1.015);
}
.play-card.selected::after{ /* spotlight */
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(75% 60% at 50% 0%, rgba(242,213,138,.13), transparent 70%);
  animation:spotFade .9s var(--ease-soft);
}
@keyframes spotFade{from{opacity:0}to{opacity:1}}
.play-grid.has-choice .play-card:not(.selected){opacity:.38;filter:saturate(.5) brightness(.7);transform:none}
.play-grid.has-choice .play-card:not(.selected):hover{opacity:.8;filter:none}

/* play sigil micro-animations */
.pc-sigil .sg-float{animation:sgFloat 4.5s ease-in-out infinite}
@keyframes sgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pc-sigil .sg-pulse{animation:sgPulse 3.6s ease-in-out infinite}
@keyframes sgPulse{0%,100%{opacity:.45}50%{opacity:1}}
.pc-sigil .sg-spin{transform-origin:center;animation:sgSpin 22s linear infinite}
@keyframes sgSpin{to{transform:rotate(360deg)}}
.pc-sigil .sg-sway{transform-origin:top center;animation:sgSway 5s ease-in-out infinite}
@keyframes sgSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ═══════════ CHAPTER 2 · PLAYBILL ═══════════ */
.playbill-wrap{display:flex;justify-content:center;perspective:1200px}
.playbill{
  position:relative;width:min(560px,100%);
  border:1px solid var(--panel-border);
  background:
    linear-gradient(160deg, rgba(242,213,138,.05), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--bg-deep);
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.35);
  transition:transform 1s var(--ease-soft), box-shadow 1s;
  transform-style:preserve-3d;
}
.playbill::before,.playbill::after{ /* corner ticks */
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--antique-gold);opacity:.7;
}
.playbill::before{top:8px;left:8px;border-right:none;border-bottom:none}
.playbill::after{bottom:8px;right:8px;border-left:none;border-top:none}
.playbill-inner{padding:44px 46px 36px}
.pb-head{font-family:var(--font-head);text-align:center;font-size:17px;letter-spacing:.5em;text-indent:.5em;color:var(--light-gold)}
.pb-head-zh{font-family:var(--font-zh);text-align:center;font-size:11px;letter-spacing:.6em;text-indent:.6em;color:var(--text-muted);margin-top:8px}
.pb-rule{text-align:center;color:var(--antique-gold);font-size:9px;letter-spacing:1em;margin:20px 0 26px;opacity:.8}
.pb-rows{display:flex;flex-direction:column;gap:20px}
.pb-row{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;
  border-bottom:1px dashed rgba(198,161,91,.2);padding-bottom:16px}
.pb-row dt{font-family:var(--font-head);font-size:11px;letter-spacing:.28em;color:var(--antique-gold)}
.pb-row dt .zh{display:block;font-size:10px;letter-spacing:.3em;color:var(--text-muted);margin-top:4px}
.pb-play-en{display:block;font-family:var(--font-head);font-size:19px;letter-spacing:.08em;color:var(--moonlight)}
.pb-play-zh{display:block;font-family:var(--font-zh);font-size:12.5px;letter-spacing:.24em;color:var(--text-muted);margin-top:5px}
.pb-mono{font-family:var(--font-head);font-size:13px;letter-spacing:.2em;color:rgba(238,230,216,.85)}
.pb-foot{margin-top:26px;text-align:center;font-family:var(--font-head);font-size:9.5px;letter-spacing:.4em;color:var(--text-muted);opacity:.75}

#question-input{
  width:100%;background:rgba(0,0,0,.25);
  border:1px solid rgba(198,161,91,.2);
  color:var(--moonlight);
  font-family:var(--font-body);font-size:16.5px;font-style:normal;line-height:1.6;
  padding:14px 16px;resize:none;
  transition:border-color .5s, box-shadow .5s;
}
#question-input::placeholder{color:rgba(167,155,183,.55);font-size:13.5px;font-style:normal}
#question-input:focus{outline:none;border-color:rgba(242,213,138,.55);box-shadow:0 0 24px rgba(198,161,91,.12), inset 0 0 18px rgba(0,0,0,.3)}

/* ── sealing animation ── */
.pb-stamp{
  position:absolute;left:50%;top:42%;width:130px;height:130px;z-index:5;
  transform:translate(-50%,-50%) translateY(-340px) rotate(-260deg) scale(1.7);
  color:var(--light-gold);opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(242,213,138,.45));
}
.pb-stamp .stamp-txt{font-family:var(--font-head)}
.playbill.sealing .pb-stamp{animation:stampDrop 1.25s var(--ease-drama) .55s forwards}
@keyframes stampDrop{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(-340px) rotate(-260deg) scale(1.7)}
  18%{opacity:1}
  78%{transform:translate(-50%,-50%) translateY(0) rotate(-12deg) scale(1.04)}
  88%{transform:translate(-50%,-50%) rotate(-12deg) scale(.94)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
}
.playbill.sealing{animation:pbLift 1s var(--ease-soft) forwards}
@keyframes pbLift{to{transform:translateY(-14px) rotateX(4deg);box-shadow:0 60px 110px rgba(0,0,0,.7)}}
.playbill.stamped .playbill-inner{animation:inkGlow 1.6s var(--ease-soft)}
@keyframes inkGlow{0%{text-shadow:none}40%{text-shadow:0 0 18px rgba(242,213,138,.6)}100%{text-shadow:none}}
.playbill.stamped{animation:stampShock .7s var(--ease-drama)}
@keyframes stampShock{0%{transform:translateY(-14px) rotateX(4deg)}30%{transform:translateY(-8px) rotateX(2deg) scale(.985)}60%{transform:translateY(-16px) rotateX(5deg) scale(1.005)}100%{transform:translateY(-14px) rotateX(4deg)}}
.pb-sealed-text{
  position:absolute;left:0;right:0;top:62%;text-align:center;z-index:6;opacity:0;pointer-events:none;
}
.pb-sealed-text .en{display:block;font-family:var(--font-head);font-size:21px;letter-spacing:.5em;text-indent:.5em;color:var(--light-gold);text-shadow:0 0 26px rgba(242,213,138,.5)}
.pb-sealed-text .zh{display:block;font-family:var(--font-zh);font-size:12px;letter-spacing:.7em;text-indent:.7em;color:var(--antique-gold);margin-top:10px}
.playbill.stamped .pb-sealed-text{animation:sealedTextIn 1.2s var(--ease-out) .2s forwards}
@keyframes sealedTextIn{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.playbill.folding{animation:pbFold 1.7s var(--ease-drama) forwards;transform-origin:50% 30%}
@keyframes pbFold{
  0%{transform:translateY(-14px) rotateX(4deg)}
  35%{transform:translateY(-30px) rotateX(38deg) scale(.92)}
  65%{transform:translateY(-10px) rotateX(74deg) scaleY(.5) scale(.7);opacity:1}
  100%{transform:translateY(60px) rotateX(88deg) scaleY(.08) scale(.3);opacity:0}
}

/* ═══════════ CHAPTER 4 · ORBIT DECK ═══════════ */
/* （Orbit Deck 與 Act 卡槽樣式位於 performance.css） */

/* ── Oracle Core 神諭核心：問題被命運系統收錄 ── */
.oracle-core{
  position:absolute;left:50%;top:-86px;width:128px;aspect-ratio:1;z-index:7;
  transform:translate(-50%,-50%) scale(.15) rotate(-160deg);
  color:var(--antique-gold);opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease-soft), transform 1.1s var(--ease-drama);
}
.oracle-core svg{width:100%;height:100%;overflow:visible}
.oracle-core.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);
  filter:drop-shadow(0 0 16px rgba(224,194,122,.4))}
.oracle-core .fs-ring{animation:acSpin 30s linear infinite;transform-origin:center;transform-box:fill-box}
.oracle-core.flare{animation:coreFlare 1s var(--ease-drama)}
@keyframes coreFlare{
  0%{filter:drop-shadow(0 0 16px rgba(224,194,122,.4))}
  35%{filter:brightness(2.4) drop-shadow(0 0 56px rgba(224,194,122,.9))}
  100%{filter:drop-shadow(0 0 16px rgba(224,194,122,.4))}
}
.oc-label{
  position:absolute;left:50%;top:108%;transform:translateX(-50%);
  font-family:var(--font-head);font-size:9.5px;letter-spacing:.34em;text-indent:.34em;
  color:var(--light-gold);white-space:nowrap;text-align:center;
}
.oc-label i{display:block;font-style:normal;font-family:var(--font-zh);font-size:8.5px;letter-spacing:.4em;color:var(--text-muted);margin-top:4px}

/* 契約四角亮起 → 被吸入核心 */
.playbill.corners-lit::before,.playbill.corners-lit::after{
  border-color:var(--light-gold);
  box-shadow:0 0 14px rgba(224,194,122,.8);
  transition:all .6s var(--ease-soft);
}
.playbill.absorbed{
  animation:pbAbsorb 1.2s var(--ease-drama) forwards !important;
  transform-origin:50% -86px;
}
@keyframes pbAbsorb{
  0%{opacity:1;transform:translateY(-14px) rotateX(4deg) scale(1)}
  40%{opacity:1;transform:translateY(-40px) rotateX(10deg) scale(.7);filter:brightness(1.5)}
  100%{opacity:0;transform:translateY(-150px) rotateX(18deg) scale(.04) rotate(6deg);filter:brightness(2.6) blur(5px)}
}

/* orbit 飛行卡旋轉入槽 */
.orbit-flyer{transition:all .6s var(--ease-drama)}
.orbit-flyer svg{width:100%;height:100%}

/* ── mismatch dialog ── */
.mismatch-veil{
  position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;
  background:rgba(3,2,8,.78);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .45s var(--ease-soft);padding:20px;
}
.mismatch-veil.show{opacity:1}
.mismatch-box{
  width:min(520px,100%);text-align:center;
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--bg-deep);
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(198,161,91,.08);
  padding:42px 36px 38px;
  transform:translateY(16px);transition:transform .5s var(--ease-out);
}
.mismatch-veil.show .mismatch-box{transform:none}
.mm-head{font-family:var(--font-head);font-size:14px;letter-spacing:.34em;color:var(--light-gold)}
.mm-head-zh{font-family:var(--font-zh);font-size:11px;letter-spacing:.4em;color:var(--text-muted);margin-top:8px}
.mm-en{font-style:italic;font-size:17px;color:rgba(238,230,216,.9);margin-top:4px}
.mm-en i{color:var(--light-gold)}
.mm-zh{font-family:var(--font-zh);font-size:13.5px;color:var(--text-muted);margin-top:10px;letter-spacing:.1em}
.mm-actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ═══════════ CHAPTER 9 · ORACLE REVIEW ═══════════ */
.review-body{display:flex;flex-direction:column;gap:34px;max-width:880px;margin:0 auto;width:100%}
.rv-panel{
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--bg-deep);
  padding:38px 42px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(26px);
  animation:rvIn 1s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * .22s);
}
@keyframes rvIn{to{opacity:1;transform:none}}
.rv-head{font-family:var(--font-head);font-size:14px;letter-spacing:.42em;color:var(--light-gold);text-align:center}
.rv-head-zh{font-family:var(--font-zh);font-size:11px;letter-spacing:.5em;color:var(--text-muted);text-align:center;margin-top:7px}
.rv-rule{text-align:center;color:var(--antique-gold);font-size:9px;letter-spacing:.9em;margin:18px 0 22px;opacity:.75}
.rv-meta{display:flex;flex-direction:column;gap:14px}
.rv-meta-row{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:baseline;border-bottom:1px dashed rgba(198,161,91,.18);padding-bottom:12px}
.rv-meta-row dt{font-family:var(--font-head);font-size:11px;letter-spacing:.26em;color:var(--antique-gold)}
.rv-meta-row dt .zh{display:block;font-size:10px;color:var(--text-muted);margin-top:3px}
.rv-meta-row dd .en{display:block;font-family:var(--font-head);font-size:16px;letter-spacing:.06em;color:var(--moonlight)}
.rv-meta-row dd .zh{display:block;font-family:var(--font-zh);font-size:12.5px;color:var(--text-muted);margin-top:4px;letter-spacing:.14em}
.rv-meta-row dd .q{font-style:italic;font-size:16.5px;color:rgba(238,230,216,.92)}

/* ── 牌陣畫面：三張牌等寬、間距舒服（只顯示三張牌，無組合卡） ── */
.rv-spread-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;margin-top:6px}
.rv-card-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0}
.rv-col-name,.rv-col-act{max-width:100%}
.rv-col-act{font-family:var(--font-head);font-size:12px;letter-spacing:.3em;color:var(--antique-gold)}
.rv-col-act i{display:block;font-style:normal;font-family:var(--font-zh);font-size:10px;letter-spacing:.28em;color:var(--text-muted);margin-top:3px}
.rv-card-holder{display:flex;justify-content:center;width:100%}
.rv-card-holder .living-card{width:min(190px,42vw)}
.rv-col-name{font-family:var(--font-head);font-size:11.5px;letter-spacing:.05em;color:var(--moonlight);line-height:1.45;
  min-height:3.3em;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-wrap:break-word}
.rv-col-name i{display:block;font-style:normal;font-family:var(--font-zh);font-size:12px;letter-spacing:.18em;color:var(--text-muted);margin-top:4px}
.rv-orient{display:inline-block;white-space:nowrap;font-family:var(--font-head);font-size:9.5px;letter-spacing:.26em;padding:3px 10px;border:1px solid}
.rv-orient.up{color:var(--light-gold);border-color:rgba(242,213,138,.4)}
.rv-orient.rev{color:#d98a9d;border-color:rgba(110,31,50,.8);background:rgba(110,31,50,.18)}

/* ── 解析段落：自然標題＋自然語句 ── */
.rv-read .rv-sec-head{font-family:var(--font-head);font-weight:500;font-size:13px;letter-spacing:.32em;color:var(--light-gold);text-align:center}
.rv-read .rv-sec-head .zh{display:block;font-family:var(--font-zh);font-size:12px;letter-spacing:.36em;color:var(--text-muted);margin-top:8px}
.rv-sec-body{margin-top:18px;font-family:var(--font-zh);font-size:15px;line-height:2.05;color:rgba(238,230,216,.9);text-align:justify}
.rv-read .rv-core{display:block;font-size:16.5px;line-height:1.95;color:var(--moonlight);text-align:center;letter-spacing:.02em}
.rv-advice-list{margin:18px 0 0;padding:0;list-style:none;counter-reset:adv;display:flex;flex-direction:column;gap:14px}
.rv-advice-list li{position:relative;padding-left:40px;font-family:var(--font-zh);font-size:14.5px;line-height:1.9;color:rgba(238,230,216,.9);counter-increment:adv}
.rv-advice-list li::before{
  content:counter(adv);position:absolute;left:0;top:1px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:12px;color:var(--light-gold);
  border:1px solid rgba(198,161,91,.5);border-radius:50%;
}

/* toast */
.toast{
  position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:80;font-family:var(--font-head);font-size:12px;letter-spacing:.3em;
  color:var(--light-gold);background:rgba(5,3,10,.92);border:1px solid var(--panel-border);
  padding:14px 30px;opacity:0;pointer-events:none;transition:all .6s var(--ease-soft);
}
.toast .zh{font-family:var(--font-zh);font-size:10px;color:var(--text-muted);margin-left:12px;letter-spacing:.3em}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* chapter wipe transition — 天鵝絨布幕＋金光中縫 */
.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;display:flex;visibility:hidden}
.wipe-l,.wipe-r{flex:1;position:relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 22%, transparent 64%, rgba(0,0,0,.65)),
    repeating-linear-gradient(90deg, var(--velvet-red) 0 26px, #1f0a12 26px 44px, #36111f 44px 68px, var(--velvet-dark) 68px 98px);
  box-shadow:0 0 80px rgba(0,0,0,.8);
}
.wipe-r{background:
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 22%, transparent 64%, rgba(0,0,0,.65)),
    repeating-linear-gradient(270deg, var(--velvet-red) 0 26px, #1f0a12 26px 44px, #36111f 44px 68px, var(--velvet-dark) 68px 98px)}
.wipe-l::after,.wipe-r::after{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--light-gold) 30%,var(--light-gold) 70%,transparent);
  box-shadow:0 0 18px rgba(224,194,122,.8),0 0 50px rgba(224,194,122,.35);
}
.wipe-l::after{right:0}
.wipe-r::after{left:0}
.wipe-l{transform:translateX(-101%)}
.wipe-r{transform:translateX(101%)}
.wipe.run{visibility:visible}
.wipe.run .wipe-l{animation:wipeL 1.7s var(--ease-drama) forwards}
.wipe.run .wipe-r{animation:wipeR 1.7s var(--ease-drama) forwards}
@keyframes wipeL{0%{transform:translateX(-101%)}42%{transform:translateX(0)}58%{transform:translateX(0)}100%{transform:translateX(-101%)}}
@keyframes wipeR{0%{transform:translateX(101%)}42%{transform:translateX(0)}58%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1020px){
  .play-grid{grid-template-columns:repeat(2,1fr)}
  .mini-grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .chapter{padding:80px 16px 56px}
  .play-grid{grid-template-columns:1fr;gap:18px}
  .pc-body{min-height:0;padding:28px 20px 24px}
  .mini-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .acts-legend{gap:10px}
  .act-slot{min-width:0;flex:1;padding:12px 8px 12px}
  .act-slot span{font-size:10px;letter-spacing:.08em}
  .playbill-inner{padding:32px 18px 26px}
  .pb-row{grid-template-columns:1fr;gap:8px}
  #question-input{font-size:15px}
  #question-input::placeholder{font-size:11.5px}
  .chapter-foot{flex-direction:column;align-items:stretch}
  .chapter-foot .btn{width:100%}
  .rv-panel{padding:28px 20px}
  .rv-meta-row{grid-template-columns:1fr;gap:6px}
  /* 手機牌陣：三張牌縮小但完整不裁切，間距收窄 */
  .rv-spread-row{gap:8px}
  .rv-card-holder .living-card{width:100%}
  .rv-col-act{font-size:10px;letter-spacing:.2em}
  .rv-col-name{font-size:10px}
  .rv-col-name i{font-size:10px}
  .rv-orient{font-size:8px;letter-spacing:.2em;padding:2px 7px}
  .rv-sec-body{font-size:14px}
  .marquee{padding:10px 12px;letter-spacing:.2em;font-size:9px;justify-content:flex-start}
  .marquee-chapter{display:none}
  .marquee-line{display:none}
  /* 手機：聲音鈕縮成圖示，避免壓到跑馬燈 */
  .sound-toggle{top:6px;right:10px;padding:7px 10px;font-size:0;letter-spacing:0;gap:0}
  .sound-toggle i{display:none}
  .sound-toggle span{font-size:13px}
  /* 手機首頁：閉幕版面、標題不切、魔法陣（開幕後）完整正圓 */
  .gate-room{padding:60px 14px 30px}
  .magic-circle-safe-area{width:min(80vw,320px)}
  .gate-content{gap:clamp(20px,5vh,44px)}
  .gate-action-zone{gap:12px}
  .gate-title{font-size:clamp(36px,11.5vw,60px)}
  #ch-gate .overline{margin-bottom:10px;letter-spacing:.3em;font-size:10px}
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;animation-iteration-count:1 !important}
  .grain{display:none}
}