/* ═══════════════════════════════════════════════════════════
   FATE THEATER — performance.css (v3)
   Orbit Deck · Act Slots · Arcane Card Manifestation ·
   Living Tarot · Spread Completion
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ ORBIT DECK 命運牌環 ═══════════ */
#ch-hidden{padding-top:80px;padding-bottom:40px}
#ch-hidden .chapter-head{margin-bottom:14px}
.orbit-deck{
  position:relative;width:100%;max-width:980px;height:430px;
  margin:4px auto 0;perspective:1200px;
}
.orbit-card{
  position:absolute;left:50%;top:50%;
  width:104px;aspect-ratio:2/3;
  margin-left:-52px;margin-top:-78px;
  cursor:pointer;border:none;background:none;padding:0;
  will-change:transform,opacity;
  /* transform / opacity 由 rAF 每幀直接驅動 → 不加 transition，避免與 rAF 互打造成卡頓 */
}
.orbit-card:focus-visible{outline:1px solid var(--light-gold);outline-offset:3px}
.oc-inner{
  position:absolute;inset:0;
  transition:transform .4s var(--ease-soft), box-shadow .4s;
  box-shadow:0 6px 16px rgba(0,0,0,.5);   /* 單層輕陰影，移動時不爆 raster */
  background:#070410;
}
.oc-inner svg{width:100%;height:100%;display:block}
/* 牌環內 22 張牌背一律靜態：停掉每張牌內部的無限動畫，旋轉才會順 */
.orbit-card .oc-inner svg *{animation:none !important}
.orbit-card.hovered .oc-inner{
  transform:translateY(-16px) scale(1.12);
  box-shadow:0 16px 34px rgba(0,0,0,.6), 0 0 18px rgba(200,164,93,.3);
}
.orbit-card.selected{opacity:0 !important;pointer-events:none;transition:opacity .3s}

/* 牌背互動細節（orbit 與卡槽共用） */
.card-back .cb-sigil{opacity:.72;transition:opacity .7s, filter .7s;
  animation:llBreatheSoft 6s ease-in-out infinite}
.card-back .cb-moon{opacity:.4;transition:opacity .55s;transition-delay:calc(var(--mi) * 65ms)}
.card-back .cb-orbit{opacity:.7;transition:opacity .6s;
  animation:llSpin 40s linear infinite;transform-origin:center;transform-box:fill-box}
.card-back .cb-frame{transition:filter .8s}
.orbit-card.hovered .cb-sigil, .orbit-card.selected .cb-sigil, .slot-card .cb-sigil{
  opacity:1;filter:drop-shadow(0 0 6px rgba(224,194,122,.85)) drop-shadow(0 0 18px rgba(224,194,122,.35));}
.orbit-card.hovered .cb-moon, .slot-card .cb-moon{opacity:1}
.orbit-card.hovered .cb-orbit{opacity:1}
.orbit-card.hovered .cb-frame{filter:drop-shadow(0 0 3px rgba(200,164,93,.5))}

/* ── Act 卡槽（選牌章） ── */
.acts-legend{display:flex;justify-content:center;align-items:stretch;gap:0;margin-bottom:4px;flex-wrap:wrap}
.act-slot{
  position:relative;text-align:center;padding:11px 20px 13px;min-width:164px;
  border:1px solid rgba(200,164,93,.2);background:var(--panel-bg);
  transition:border-color .6s, box-shadow .6s;
}
.act-slot b{display:block;font-family:var(--font-head);font-weight:600;font-size:12.5px;letter-spacing:.38em;color:var(--antique-gold)}
.act-slot span:not(.slot-card){display:block;font-family:var(--font-head);font-size:11.5px;letter-spacing:.12em;color:var(--moonlight);margin-top:6px}
.act-slot i{display:block;font-style:normal;font-family:var(--font-zh);font-size:10px;letter-spacing:.28em;color:var(--text-muted);margin-top:4px}
.slot-card{
  display:block;width:64px;aspect-ratio:2/3;margin:12px auto 0;
  border:1px dashed rgba(200,164,93,.35);
  position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .5s, box-shadow .5s;
}
.slot-card svg{width:100%;height:100%;display:block}
.act-slot.filled{border-color:rgba(224,194,122,.55);box-shadow:0 0 26px rgba(200,164,93,.14)}
.act-slot.filled b{animation:slotGlow 1.2s var(--ease-soft)}
@keyframes slotGlow{0%{text-shadow:none}40%{text-shadow:0 0 16px rgba(224,194,122,.95)}100%{text-shadow:none}}
.act-slot.filled .slot-card{border-style:solid;border-color:rgba(224,194,122,.7)}
.act-slot.filled .slot-card:hover{box-shadow:0 0 18px rgba(224,194,122,.35)}
.act-slot.filled .slot-card::after{ /* 取消提示 */
  content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--light-gold);font-size:18px;background:rgba(5,3,10,.55);
  opacity:0;transition:opacity .4s;
}
.act-slot.filled .slot-card:hover::after{opacity:1}
.slot-link{
  width:46px;align-self:center;height:1px;margin:0 2px;
  background:linear-gradient(90deg,transparent,var(--antique-gold),transparent);
  transform:scaleX(0);transition:transform .9s var(--ease-soft);
}
.slot-link.on{transform:scaleX(1)}

/* ═══════════ MANIFESTATION 顯現區 ═══════════ */
#ch-performance{align-items:center;justify-content:flex-start;padding-top:84px}
.perf-caption{
  position:relative;z-index:8;
  text-align:center;min-height:96px;margin-bottom:14px;padding:8px 22px 16px;
  scroll-margin-top:64px;
  background:linear-gradient(180deg, rgba(5,3,10,.88) 0%, rgba(5,3,10,.55) 60%, rgba(5,3,10,0) 100%);
  width:min(720px,94vw);
}
.pc-act{font-family:var(--font-head);font-size:12px;letter-spacing:.5em;text-indent:.5em;color:var(--antique-gold);min-height:18px}
.pc-line-en{font-style:italic;font-size:clamp(16px,2.2vw,20px);color:rgba(238,230,216,.9);margin-top:10px;min-height:26px}
.pc-line-zh{font-family:var(--font-zh);font-size:13px;letter-spacing:.16em;color:var(--text-muted);margin-top:8px;min-height:20px}
.pc-act,.pc-line-en,.pc-line-zh{opacity:0;transition:opacity 1s var(--ease-soft)}
.perf-caption.show .pc-act,.perf-caption.show .pc-line-en,.perf-caption.show .pc-line-zh{opacity:1}
.perf-caption.show .pc-line-en{transition-delay:.25s}
.perf-caption.show .pc-line-zh{transition-delay:.5s}

.manifest-wrap{
  position:relative;display:flex;flex-direction:column;align-items:center;
  width:100%;min-height:0;
  max-height:1400px;
  transition:max-height 1s var(--ease-drama), opacity .7s var(--ease-soft), margin .8s;
}
#ch-performance.complete .manifest-wrap{max-height:0;opacity:0;overflow:hidden;pointer-events:none;margin:0}

/* Lunar Manifestation Ring 月相顯現之環 */
.arcane-circle{
  position:absolute;left:50%;top:46%;width:min(580px,96vw);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);
  color:var(--antique-gold);opacity:0;pointer-events:none;z-index:1;
  transition:opacity .9s var(--ease-soft), transform 1.2s var(--ease-drama);
}
.arcane-circle svg{width:100%;height:100%;overflow:visible}
.arcane-circle.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.arcane-circle.off{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
.arcane-circle.flare{animation:ringFlare .9s var(--ease-drama)}
@keyframes ringFlare{0%{filter:none}30%{filter:brightness(2.1) drop-shadow(0 0 40px rgba(224,194,122,.7))}100%{filter:none}}
/* ═══ Arcane Magic Circle 兩層動畫 ═══ */
@keyframes acSpin{to{transform:rotate(360deg)}}
.outerMagicCircleLayer{animation:acSpin 46s linear infinite;transform-origin:center;transform-box:fill-box}
.innerMagicCircleLayer{animation:acSpin 30s linear infinite reverse;transform-origin:center;transform-box:fill-box}
.glowLayer{animation:llBreatheSoft 7s ease-in-out infinite}
/* 月相依序亮起 */
.mc-moon{animation:moonSeq 7.2s ease-in-out infinite;animation-delay:calc(var(--pi) * 1.2s)}
@keyframes moonSeq{0%,22%,100%{opacity:.45;filter:none}8%{opacity:1;filter:drop-shadow(0 0 6px rgba(224,194,122,.9))}}
/* 能量節點依序連線點亮 */
.mc-node{animation:nodeLink 8.4s ease-in-out infinite;animation-delay:calc(var(--ni) * .6s)}
@keyframes nodeLink{0%,16%,100%{opacity:.5;filter:none}6%{opacity:1;filter:drop-shadow(0 0 5px rgba(224,194,122,.95))}}
/* 符文短暫閃爍後穩定 */
.mc-rune{animation:runeFlare 13s ease-in-out infinite;animation-delay:calc(var(--ri) * 1.4s)}
@keyframes runeFlare{0%,7%,100%{opacity:.62;filter:none}2%{opacity:1;filter:drop-shadow(0 0 5px rgba(224,194,122,.9))}4%{opacity:.72}5.5%{opacity:1;filter:drop-shadow(0 0 4px rgba(224,194,122,.7))}}
/* 中央召喚口低速呼吸（保持淨空） */
.mc-portal{animation:llBreatheSoft 5.5s ease-in-out infinite}

/* 啟動：外圈描線→內層由中心展開→節點亮起 */
.arcane-circle.on .mc-draw{stroke-dasharray:1232;stroke-dashoffset:1232;animation:lrDrawGo 1.6s var(--ease-drama) forwards}
.arcane-circle.on .mc-draw2{stroke-dasharray:1195;stroke-dashoffset:1195;animation:lrDrawGo 1.6s var(--ease-drama) .25s forwards}
@keyframes lrDrawGo{to{stroke-dashoffset:0}}
.arcane-circle.on .outerMagicCircleLayer{animation:awFadeIn .9s var(--ease-soft) .3s both, acSpin 46s linear 1.2s infinite;transform-origin:center;transform-box:fill-box}
.arcane-circle.on .innerMagicCircleLayer{animation:geomExpand 1s var(--ease-out) .5s both, acSpin 30s linear 1.5s infinite reverse;transform-origin:center;transform-box:fill-box}
@keyframes geomExpand{from{opacity:0;transform:scale(.5) rotate(-22deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.arcane-circle.on .energyNodeLayer{animation:awFadeIn .8s var(--ease-soft) 1s both}
@keyframes awFadeIn{from{opacity:0}to{opacity:1}}

/* 召喚收束：卡牌飛出時，內層收束、中央召喚口全開、整陣短暫加速感 */
.arcane-circle.surge{filter:brightness(1.6) drop-shadow(0 0 36px rgba(224,194,122,.5));transition:filter .4s}
.arcane-circle.surge .innerMagicCircleLayer{animation:geomSnap .9s var(--ease-drama);transform-origin:center;transform-box:fill-box}
@keyframes geomSnap{0%{transform:scale(1) rotate(0)}45%{transform:scale(.86) rotate(14deg)}100%{transform:scale(1) rotate(24deg)}}
.arcane-circle.portal-open .mc-portal{animation:portalOpen 1.1s var(--ease-drama) forwards}
@keyframes portalOpen{
  0%{opacity:.85}
  45%{opacity:1;filter:drop-shadow(0 0 14px rgba(224,194,122,1));transform:scale(1.18);transform-origin:center;transform-box:fill-box}
  100%{opacity:1;filter:drop-shadow(0 0 7px rgba(224,194,122,.7));transform:scale(1.06)}
}

/* 顯現中的卡（實體牌面 2:3） */
.manifest-wrap{perspective:1300px}
.stage-card{
  position:relative;z-index:3;
  width:min(290px,62vw);aspect-ratio:2/3;
  max-height:58vh;
  transform-style:preserve-3d;
  margin-top:6px;
}
/* 空的時候完全透明（不顯示黑框），有牌時才上黑底＋陰影 */
.scene-mount{position:absolute;inset:0;overflow:hidden;border-radius:10px}
.scene-mount:not(:empty){background:#070410;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.scene-mount svg{width:100%;height:100%;display:block}
.card-img{
  width:100%;height:100%;display:block;
  object-fit:contain;background:#070410;
  user-select:none;-webkit-user-drag:none;
}

/* 召喚光縫（非門）：環心垂直細金光 */
.summon-beam{
  position:absolute;left:50%;top:46%;z-index:2;pointer-events:none;
  width:2.5px;height:0;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,transparent,var(--light-gold) 22%,#fdf3da 50%,var(--light-gold) 78%,transparent);
  box-shadow:0 0 18px rgba(224,194,122,.9),0 0 60px rgba(224,194,122,.4);
  opacity:0;
  transition:height .55s var(--ease-drama), opacity .4s;
}
.summon-beam.on{height:min(420px,56vh);opacity:1}

/* Arcane Burst 符文爆發（一次性） */
.arcane-burst{
  position:absolute;left:50%;top:46%;width:min(460px,82vw);aspect-ratio:1;z-index:2;
  transform:translate(-50%,-50%) scale(.3);
  color:var(--antique-gold);opacity:0;pointer-events:none;
}
.arcane-burst svg{width:100%;height:100%;overflow:visible}
.arcane-burst.go{animation:burstGo .95s var(--ease-drama) forwards}
@keyframes burstGo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.32) rotate(-40deg);filter:blur(4px)}
  28%{opacity:1;filter:blur(0) drop-shadow(0 0 22px rgba(224,194,122,.7))}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.34) rotate(14deg);filter:blur(2px)}
}

/* 金光掃過牌面（Reveal 完成） */
.stage-card.swept::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:10px;
  background:linear-gradient(115deg,transparent 30%,rgba(255,247,222,.32) 48%,rgba(224,194,122,.18) 52%,transparent 68%);
  background-size:300% 100%;background-position:120% 0;
  animation:sweepGo .8s var(--ease-soft) forwards;
  mix-blend-mode:screen;
}
@keyframes sweepGo{from{background-position:120% 0}to{background-position:-60% 0}}

/* Settle：微沉＋一次呼吸光 */
.stage-card.settle{animation:cardSettle 1.1s var(--ease-soft)}
@keyframes cardSettle{
  0%{transform:translateY(0)}
  35%{transform:translateY(7px)}
  70%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}
.stage-card.settle .scene-mount{animation:settleGlow 1.1s var(--ease-soft)}
@keyframes settleGlow{
  0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.6)}
  45%{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 46px rgba(224,194,122,.45),0 0 0 1.5px rgba(224,194,122,.5)}
}

/* 1 · Card Emerge：牌背自環心旋轉飛出 */
.stage-card.emerging{animation:cardEmerge 1.3s var(--ease-drama) both}
@keyframes cardEmerge{
  0%{opacity:0;transform:scale(.08) rotateZ(-560deg)}
  55%{opacity:1;transform:scale(1.06) rotateZ(8deg)}
  78%{transform:scale(.99) rotateZ(-2deg)}
  100%{opacity:1;transform:none}
}
.stage-card.afloat{animation:cardFloat 5s ease-in-out infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 2 · Sigil Wake：牌背印記甦醒 */
.stage-card.sigil-wake .cb-sigil{
  opacity:1;animation:none;
  filter:drop-shadow(0 0 8px rgba(224,194,122,1)) drop-shadow(0 0 28px rgba(224,194,122,.55));
  transition:all .9s var(--ease-drama);
}
.stage-card.sigil-wake .cb-moon{opacity:1;transition-delay:calc(var(--mi) * 90ms)}
.stage-card.sigil-wake .cb-orbit{opacity:1}
.stage-card .card-back{transition:opacity .7s var(--ease-soft), filter .7s}
.stage-card.back-dissolve .card-back{opacity:0;filter:brightness(2.6) blur(6px)}

/* 3 · Frame Trace 邊框描線（畫在圖片外側，不遮蓋牌面） */
.frame-trace{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);z-index:4;pointer-events:none;opacity:0}
.frame-trace.on{opacity:1}
.ftr-outer,.ftr-inner{stroke:var(--light-gold);stroke-width:2}
.ftr-inner{stroke-width:0.8;stroke:var(--antique-gold)}
.frame-trace.on .ftr-outer{stroke-dasharray:1560;stroke-dashoffset:1560;animation:ftrDraw 1.3s var(--ease-drama) forwards}
.frame-trace.on .ftr-inner{stroke-dasharray:1500;stroke-dashoffset:1500;animation:ftrDraw 1.3s var(--ease-drama) .25s forwards}
@keyframes ftrDraw{to{stroke-dashoffset:0}}
.frame-trace.fade{opacity:0;transition:opacity .9s}

/* 4 · Symbol Build：牌面符號依序生成 */
.scene .scene-el{opacity:0}
.scene.entered .scene-el{opacity:1}
.scene.sketching .scene-el{
  animation:symbolBuild 1.05s var(--ease-out) both;
  animation-delay:calc(var(--i) * .42s);
}
@keyframes symbolBuild{
  0%{opacity:0;transform:scale(.94);filter:brightness(2.6) blur(5px) drop-shadow(0 0 12px rgba(224,194,122,.8))}
  55%{opacity:1;filter:brightness(1.5) blur(1px) drop-shadow(0 0 6px rgba(224,194,122,.5))}
  100%{opacity:1;transform:none;filter:none}
}
.scene .layer-frame{opacity:0;transition:opacity .8s var(--ease-soft)}
.scene.framed .layer-frame, .scene.entered .layer-frame{opacity:1}

/* 高亮閃光 */
.stage-flash{
  position:absolute;inset:-4%;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(72% 60% at 50% 46%, rgba(255,248,226,.85), rgba(224,194,122,.25) 55%, transparent 80%);
  mix-blend-mode:screen;
}
.stage-flash.go{animation:flashGo .7s var(--ease-drama)}
@keyframes flashGo{0%{opacity:0}14%{opacity:1}100%{opacity:0}}

/* 5 · Seal Lock 四角封印 + 6 · Title Lock */
.card-frame{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden}
.card-frame.on{opacity:1;visibility:visible}
.cf-rune{
  position:absolute;font-size:14px;color:var(--light-gold);
  text-shadow:0 0 12px rgba(224,194,122,.9);
  opacity:0;transform:scale(.3) rotate(-90deg);
}
.cf-r1{top:10px;left:12px}.cf-r2{top:10px;right:12px}
.cf-r3{bottom:10px;left:12px}.cf-r4{bottom:10px;right:12px}
.card-frame.runes .cf-rune{animation:runeLight .5s var(--ease-out) forwards}
.card-frame.runes .cf-r1{animation-delay:0s}.card-frame.runes .cf-r2{animation-delay:.16s}
.card-frame.runes .cf-r4{animation-delay:.32s}.card-frame.runes .cf-r3{animation-delay:.48s}
@keyframes runeLight{
  0%{opacity:0;transform:scale(.3) rotate(-90deg)}
  60%{opacity:1;transform:scale(1.35) rotate(8deg);text-shadow:0 0 22px rgba(224,194,122,1)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.cf-roman{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  font-family:var(--font-head);font-weight:600;font-size:16px;letter-spacing:.3em;text-indent:.3em;
  color:var(--light-gold);text-shadow:0 0 14px rgba(224,194,122,.6);
  padding:1px 12px;opacity:0;
}
.cf-plate{
  position:absolute;left:11px;right:11px;bottom:11px;
  background:linear-gradient(180deg, rgba(7,4,14,.9), rgba(10,7,18,.96));
  border:1px solid rgba(200,164,93,.55);border-radius:7px;
  box-shadow:inset 0 0 0 2.5px #070410, inset 0 0 0 3.5px rgba(200,164,93,.35);
  text-align:center;padding:8px 6px 9px;
  opacity:0;transform:translateY(8px);
}
.card-frame.named .cf-roman{animation:nameIn .8s var(--ease-out) forwards}
.card-frame.named .cf-plate{animation:plateIn .8s var(--ease-out) .15s forwards}
@keyframes nameIn{from{opacity:0;transform:translateX(-50%) translateY(-8px);filter:blur(4px)}to{opacity:1;transform:translateX(-50%);filter:none}}
@keyframes plateIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-name-en{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.18em;color:var(--moonlight)}
.cf-name-zh{font-family:var(--font-zh);font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--text-muted);margin-top:3px}
.cf-orient{font-family:var(--font-head);font-size:8.5px;letter-spacing:.3em;margin-top:4px;color:var(--light-gold)}
.cf-orient.rev{color:#d98a9d}
.cf-shimmer{position:absolute;inset:0;overflow:hidden;opacity:0}
.card-frame.locked .cf-shimmer{opacity:1}
.cf-shimmer::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(224,194,122,.13) 45%,rgba(255,248,226,.2) 50%,rgba(224,194,122,.13) 55%,transparent);
  transform:skewX(-16deg);animation:shimmerSweep 5.5s var(--ease-soft) infinite;
}
@keyframes shimmerSweep{0%,55%{left:-80%}90%,100%{left:160%}}

/* 狀態行 */
.stage-status{
  margin-top:22px;font-family:var(--font-head);font-size:11.5px;letter-spacing:.4em;text-indent:.4em;
  color:var(--antique-gold);opacity:0;transition:opacity .8s;text-align:center;z-index:3;
}
.stage-status .zh{font-family:var(--font-zh);display:block;font-size:10px;letter-spacing:.5em;color:var(--text-muted);margin-top:7px}
.stage-status.show{opacity:.9}
.stage-status i{font-style:normal;animation:ellip 1.6s steps(4) infinite}
@keyframes ellip{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

/* 飛行卡 */
.flying-card{
  position:fixed;z-index:70;pointer-events:none;
  transition:all .9s var(--ease-drama);
  transform-origin:center;
}
.flying-card svg{width:100%;height:100%;display:block}
.absorb-flyer{transition:all .55s var(--ease-drama)}

/* Cards Into Lunar Ring 吸收疊層 */
.ring-overlay{
  position:fixed;inset:0;z-index:65;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,2,8,.5);
  opacity:0;transition:opacity .65s var(--ease-soft);
}
.ring-overlay.show{opacity:1}
.ring-overlay .ro-ring{
  width:min(560px,92vmin);aspect-ratio:1;
  color:var(--antique-gold);
  filter:drop-shadow(0 0 18px rgba(200,164,93,.25));
}
.ring-overlay .ro-ring svg{width:100%;height:100%;overflow:visible}
.ro-ring.flare{animation:ringFlare .8s var(--ease-drama)}

/* 章節無簾幕淡出 */
.chapter-out{animation:chapterOut .55s var(--ease-soft) forwards}
@keyframes chapterOut{to{opacity:0;transform:translateY(-14px)}}

/* ═══════════ SPREAD 牌陣區 ═══════════ */
.spread-row-wrap{position:relative;width:min(820px,96vw);margin-top:34px}
.spread-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.sl-line,.sl-arc{
  fill:none;stroke:var(--antique-gold);stroke-width:1.1;opacity:.9;
  stroke-dasharray:400;stroke-dashoffset:400;
  filter:drop-shadow(0 0 4px rgba(224,194,122,.5));
}
.sl-line.on,.sl-arc.on{animation:slDraw 1.1s var(--ease-drama) forwards}
.sl-arc{stroke-width:.7;opacity:.6;stroke-dasharray:900;stroke-dashoffset:900}
.sl-arc.on{animation:slDrawArc 1.6s var(--ease-drama) forwards}
@keyframes slDraw{to{stroke-dashoffset:0}}
@keyframes slDrawArc{to{stroke-dashoffset:0}}
.fate-sigil{
  position:absolute;left:50%;top:-16px;width:64px;aspect-ratio:1;z-index:4;
  transform:translate(-50%,-58%) scale(.3) rotate(-120deg);
  color:var(--antique-gold);opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease-soft), transform 1.2s var(--ease-drama);
}
.fate-sigil svg{width:100%;height:100%;overflow:visible}
.fate-sigil.on{
  opacity:1;transform:translate(-50%,-58%) scale(1) rotate(0deg);
  filter:drop-shadow(0 0 12px rgba(224,194,122,.45));
}
.fate-sigil .fs-ring{animation:acSpin 40s linear infinite;transform-origin:center;transform-box:fill-box}
.fate-sigil.on .fs-core{animation:llBreatheSoft 5s ease-in-out infinite}

.cast-row{display:flex;gap:30px;justify-content:center;align-items:flex-start;width:100%;position:relative;z-index:3;flex-wrap:wrap}
.cast-slot{
  width:158px;aspect-ratio:2/3;
  border:1px dashed rgba(200,164,93,.3);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:border-color .6s, transform .9s var(--ease-soft);
}
.cast-slot .cs-label{font-family:var(--font-head);font-size:10px;letter-spacing:.32em;color:rgba(167,155,183,.6)}
.cast-slot.filled{border-color:transparent}
.cast-slot.filled .cs-label{display:none}
.cast-slot .living-card{animation:castArrive .8s var(--ease-out)}
@keyframes castArrive{0%{transform:scale(1.12);box-shadow:0 0 60px rgba(224,194,122,.5)}100%{transform:scale(1)}}

/* 牌陣完成：三牌浮起＋細金線＋極簡印記，無卡後圓圈 */
.spread-row-wrap.complete .cast-slot{transform:translateY(-11px)}
.spread-row-wrap.complete .living-card{animation:spreadBreath 2.6s var(--ease-soft) 1}
@keyframes spreadBreath{0%,100%{box-shadow:0 0 0 1px rgba(200,164,93,.25),0 16px 44px rgba(0,0,0,.6)}45%{box-shadow:0 0 0 1px rgba(224,194,122,.6),0 16px 50px rgba(0,0,0,.65),0 0 44px rgba(224,194,122,.35)}}

/* ═══════════ LIVING CARD（實體圖片版 2:3） ═══════════ */
.living-card{
  position:relative;width:100%;aspect-ratio:2/3;background:#070410;
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(200,164,93,.3), 0 16px 44px rgba(0,0,0,.6), 0 0 26px rgba(200,164,93,.12);
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .5s var(--ease-soft), box-shadow .6s;
}
.living-card .lc-img{
  width:100%;height:100%;display:block;object-fit:contain;background:#070410;
  user-select:none;-webkit-user-drag:none;
  transition:transform .9s var(--ease-drama);
}
.living-card.rev .lc-img{transform:rotate(180deg)}
.living-card .lc-shimmer{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.living-card .lc-shimmer::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:50%;
  background:linear-gradient(100deg,transparent,rgba(224,194,122,.08) 45%,rgba(255,248,226,.13) 50%,transparent 60%);
  transform:skewX(-16deg);animation:shimmerSweep 7s var(--ease-soft) infinite;
}
.living-card.tiltable{transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.living-card.tiltable .lc-img{transform:translate(var(--px,0px),var(--py,0px)) scale(1.03)}
.living-card.tiltable.rev .lc-img{transform:rotate(180deg) translate(var(--px,0px),var(--py,0px)) scale(1.03)}
.living-card.tiltable:hover{box-shadow:0 0 0 1px rgba(224,194,122,.45),0 26px 60px rgba(0,0,0,.7),0 0 40px rgba(200,164,93,.25)}

/* 卡槽中的牌：輕微浮動＋金色光暈 */
.spread-row-wrap:not(.complete) .cast-slot.filled{animation:slotIdle 6s ease-in-out 1.2s infinite}
@keyframes slotIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cast-slot.filled .living-card{box-shadow:0 0 0 1px rgba(224,194,122,.35),0 16px 44px rgba(0,0,0,.6),0 0 30px rgba(200,164,93,.22)}

/* curtain call complete 狀態 */
#ch-performance.complete .perf-caption{margin-bottom:12px}
#ch-performance.complete .spread-row-wrap{margin-top:14px}
#ch-performance.complete .cast-slot{width:min(200px,26vw)}
#ch-performance.complete .chapter-foot{margin-top:0;padding-top:38px}

/* ═══════════ LIVING LOOPS（微動循環） ═══════════ */
.ll-breathe{animation:llBreathe 4.6s ease-in-out infinite}
@keyframes llBreathe{0%,100%{opacity:.55}50%{opacity:1}}
.ll-breathe-soft{animation:llBreatheSoft 6s ease-in-out infinite}
@keyframes llBreatheSoft{0%,100%{opacity:.75}50%{opacity:1}}
.ll-sway{animation:llSway 5.4s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
@keyframes llSway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.ll-sway-slow{animation:llSway 8s ease-in-out infinite;transform-origin:bottom center;transform-box:fill-box}
.ll-float{animation:llFloat 5s ease-in-out infinite;transform-box:fill-box}
@keyframes llFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ll-float-d{animation:llFloat 6.4s ease-in-out 1.4s infinite;transform-box:fill-box}
.ll-spin{animation:llSpin 26s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes llSpin{to{transform:rotate(360deg)}}
.ll-spin-slow{animation:llSpin 48s linear infinite;transform-origin:center;transform-box:fill-box}
.ll-flicker{animation:llFlicker 3.2s ease-in-out infinite}
@keyframes llFlicker{0%,100%{opacity:.9}12%{opacity:.5}24%{opacity:1}46%{opacity:.65}68%{opacity:1}84%{opacity:.7}}
.ll-wave{animation:llWave 6s ease-in-out infinite;transform-box:fill-box}
@keyframes llWave{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
.ll-wave-r{animation:llWaveR 7s ease-in-out infinite;transform-box:fill-box}
@keyframes llWaveR{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.ll-fall{animation:llFall 7s linear infinite;transform-box:fill-box}
@keyframes llFall{0%{transform:translateY(-12px) rotate(0deg);opacity:0}12%{opacity:1}80%{opacity:.9}100%{transform:translateY(42px) rotate(20deg);opacity:0}}
.ll-rise{animation:llRise 8s linear infinite;transform-box:fill-box}
@keyframes llRise{0%{transform:translateY(14px);opacity:0}18%{opacity:.8}80%{opacity:.5}100%{transform:translateY(-38px);opacity:0}}
.ll-pulse-line{stroke-dasharray:5 7;animation:llDash 9s linear infinite}
@keyframes llDash{to{stroke-dashoffset:-120}}
.ll-glowpulse{animation:llGlowPulse 4.4s ease-in-out infinite;transform-box:fill-box}
@keyframes llGlowPulse{0%,100%{filter:drop-shadow(0 0 2px currentColor);opacity:.85}50%{filter:drop-shadow(0 0 8px currentColor);opacity:1}}
.ll-crack{animation:llCrack 5.5s ease-in-out infinite}
@keyframes llCrack{0%,100%{opacity:.6}10%{opacity:1;filter:drop-shadow(0 0 6px rgba(224,194,122,.9))}20%{opacity:.7}55%{opacity:.95}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:760px){
  .orbit-deck{height:360px}
  .orbit-card{width:72px;margin-left:-36px;margin-top:-54px}
  .acts-legend{gap:6px}
  .act-slot{min-width:0;flex:1;padding:10px 6px 12px}
  .act-slot span:not(.slot-card){font-size:9px;letter-spacing:.06em}
  .slot-link{display:none}
  .slot-card{width:46px}
}
@media (max-width:640px){
  #ch-performance{padding-top:104px}
  .pc-act{letter-spacing:.22em;text-indent:.22em;font-size:10.5px}
  .stage-card{width:min(228px,58vw)}
  .cast-row{gap:12px}
  .cast-slot{width:96px}
  #ch-performance.complete .cast-row{gap:12px}
  #ch-performance.complete .cast-slot{width:min(108px,28vw)}
  .living-card .lc-name-en{font-size:7.5px}
  .living-card .lc-name-zh{font-size:7px;letter-spacing:.18em}
  .living-card .lc-roman{font-size:9px}
  .perf-caption{min-height:110px}
  .rv-card-holder .living-card{width:150px}
  .fate-sigil{width:64px}
}