/* ============================================================
   《國寶》垂直切片 —— 一切都在舞台口之內
   三色：黑 / 萌葱 / 柿
   ============================================================ */
/* Noto Serif TC（SIL Open Font License 1.1）
   已依遊戲實際用字 subset 為 2114 字：16MB → 944KB。
   自架而非依賴系統字型，確保 Windows／Android 上的排版與 macOS 一致。 */
@font-face {
  font-family: "Kokuho Serif";
  src: url("../assets/font/NotoSerifTC-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kokuho Serif";
  src: url("../assets/font/NotoSerifTC-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --black: #0b0a09;
  --sumi: #1a1815;
  --moegi: #00694f;
  --moegi-dim: #0d3b2f;
  --kaki: #d4622f;
  --kaki-bright: #ef8148;
  --paper: #e8dcc4;
  --paper-dim: #b8ab8e;
  --mincho: "Kokuho Serif", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif TC", "Songti TC", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans TC", sans-serif;
  --display: "Kokuho Serif", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--black); }
body { font-family: var(--mincho); color: var(--paper); cursor: default; -webkit-font-smoothing: antialiased; }
button { font-family: var(--mincho); cursor: pointer; }

.v { writing-mode: vertical-rl; text-orientation: upright; }

/* ---------- 標題畫面 ---------- */
#title-screen { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.title-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.title-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11,10,9,.1) 0%, rgba(11,10,9,.78) 100%); }
.title-mark { position: relative; writing-mode: vertical-rl; font-family: var(--display); font-weight: 900; font-size: clamp(64px, 11vh, 120px); letter-spacing: .35em; color: var(--paper); text-shadow: 0 0 24px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.8); animation: rise 1.6s ease both; }
.title-mark span:first-child { color: var(--paper); }
.title-sub { position: relative; margin-top: 2.2vh; font-size: 13px; letter-spacing: .5em; color: var(--paper-dim); animation: rise 1.6s .4s ease both; }
.title-menu { position: relative; margin-top: 5vh; display: flex; gap: 32px; animation: rise 1.6s .8s ease both; }
.title-menu button { background: none; border: none; border-bottom: 1px solid transparent; color: var(--paper); font-size: 17px; letter-spacing: .4em; padding: 10px 6px 8px 12px; transition: all .3s; }
.title-menu button:hover { color: var(--kaki-bright); border-bottom-color: var(--kaki); }
.title-note { position: absolute; bottom: 3vh; font-size: 11px; letter-spacing: .3em; color: rgba(232,220,196,.45); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 作品聲明 ---------- */
#statement { position: fixed; inset: 0; z-index: 70; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6vh; }
.statement-body { display: flex; flex-direction: row-reverse; gap: 3.2vw; height: 52vh; align-items: center; }
.statement-body .v { font-size: clamp(16px, 2.4vh, 22px); line-height: 2.1; letter-spacing: .28em; color: var(--paper); opacity: 0; animation: rise 1.2s ease forwards; }
.statement-body .v:nth-child(1) { animation-delay: .2s; }
.statement-body .v:nth-child(2) { animation-delay: 1.1s; }
.statement-body .v:nth-child(3) { animation-delay: 2.0s; color: var(--kaki-bright); }
.statement-body .v:nth-child(4) { animation-delay: 2.9s; }
.statement-body .v:nth-child(5) { animation-delay: 3.6s; }
#btn-statement-ok { background: none; border: 1px solid var(--moegi); color: var(--paper); font-size: 15px; letter-spacing: .5em; padding: 12px 28px 12px 36px; opacity: 0; animation: rise 1s 4.4s ease forwards; transition: all .3s; }
#btn-statement-ok:hover { background: var(--moegi-dim); border-color: var(--kaki); }

/* ---------- 舞台 ---------- */
#theater { position: fixed; inset: 0; }

/* ============================================================
   演出（cutscene）：被導演過的段落
   ============================================================ */
#blackout { position: absolute; inset: 0; z-index: 20; background: #030303; opacity: 0;
  pointer-events: none; transition: opacity 1.2s ease; }
#blackout.on { opacity: 1; }

#cine { position: absolute; inset: 0; z-index: 21; pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
#cine-text { font-family: var(--display); text-align: center; color: var(--paper);
  max-width: 74vw; line-height: 2.05; letter-spacing: .22em; }
#cine-skip { position: absolute; right: 4vw; bottom: 5vh; font-size: 11px; letter-spacing: .3em;
  color: rgba(232,220,196,.34); animation: fadein 1.4s 1.4s both; }

/* 演出字：四種語氣共用同一個字級，只以字重、顏色與運動區分。
   字級不變，畫面才穩；忽大忽小會讓段落散掉。 */
#cine-text { font-size: clamp(21px, 3.6vh, 38px); }
#cine-text.cine-vert { font-size: clamp(20px, 3.4vh, 34px); }

/* 獨白：從模糊裡浮起，字距慢慢收攏 */
.cine-solo { font-weight: 400; color: var(--paper); }
.cine-solo.in  { animation: cine-rise 1.6s cubic-bezier(.16,.85,.26,1) both, cine-drift 6s ease-out 1.6s both; }
.cine-solo.out { animation: cine-out 1s cubic-bezier(.4,0,.7,.2) both; }
@keyframes cine-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); letter-spacing: .58em; }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: .22em; }
}
/* 停留時極慢地往上飄一點點——字不是死的 */
@keyframes cine-drift { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* 低語：同字級，但暗一階、慢一倍 */
.cine-whisper { font-weight: 400; color: rgba(232,220,196,.62); }
.cine-whisper.in  { animation: cine-rise 2.4s cubic-bezier(.2,.8,.3,1) both, cine-drift 8s ease-out 2.4s both; }
.cine-whisper.out { animation: cine-out 1.4s ease both; }

/* 重擊：同字級，靠字重、白與光暈壓下來 */
.cine-slam { font-weight: 900; color: #fff; text-shadow: 0 0 36px rgba(255,255,255,.30), 0 0 4px rgba(255,255,255,.5); }
.cine-slam.in  { animation: cine-slam-in .68s cubic-bezier(.12,.92,.18,1) both; }
.cine-slam.out { animation: cine-out .8s ease both; }
@keyframes cine-slam-in {
  0%   { opacity: 0; filter: blur(14px); letter-spacing: .85em; }
  48%  { opacity: 1; filter: blur(0); letter-spacing: .30em; }
  72%  { letter-spacing: .19em; }
  100% { opacity: 1; filter: blur(0); letter-spacing: .22em; }
}

/* 直排：說書人把人收編進故事時用 */
.cine-vert { writing-mode: vertical-rl; text-orientation: mixed; max-height: 68vh; font-weight: 400; }
.cine-vert.in  { animation: cine-vert-in 1.8s cubic-bezier(.16,.85,.26,1) both; }
.cine-vert.out { animation: cine-out 1s ease both; }
@keyframes cine-vert-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); filter: blur(6px); }
  70%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
}
@keyframes cine-out { to { opacity: 0; filter: blur(6px); transform: translateY(-12px); } }

/* 運鏡：緩推 / 緩拉 */
#stage3d.push-in  { animation: push-in var(--camms, 6s) cubic-bezier(.32,0,.36,1) both; }
#stage3d.push-out { animation: push-out var(--camms, 6s) cubic-bezier(.32,0,.36,1) both; }
@keyframes push-in  { from { transform: scale(1); } to { transform: scale(1.24); } }
@keyframes push-out { from { transform: scale(1.24); } to { transform: scale(1); } }

/* ---------- 回り舞台：換章時整座舞台轉過去 ---------- */
#stage3d { position: absolute; inset: 0; perspective: 1400px; transform-style: preserve-3d; }
#stage3d.revolve { animation: revolve 2.2s cubic-bezier(.55,.02,.35,1) both; }
@keyframes revolve {
  0%   { transform: rotateY(0deg) scale(1); }
  45%  { transform: rotateY(-46deg) scale(.86); }
  55%  { transform: rotateY(46deg) scale(.86); }
  100% { transform: rotateY(0deg) scale(1); }
}

/* ---------- 光柱：舞台永遠有光在流動 ---------- */
#rays { position: absolute; inset: -20%; pointer-events: none; z-index: 3; overflow: hidden;
  mix-blend-mode: screen; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 6%, #000 12%, rgba(0,0,0,.55) 46%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 6%, #000 12%, rgba(0,0,0,.55) 46%, transparent 82%); }
#rays i { position: absolute; inset: -30%; display: block; transform-origin: 50% 0%;
  background: repeating-linear-gradient(101deg,
      rgba(255,247,228,0) 0 42px,
      rgba(255,247,228,.055) 42px 66px,
      rgba(255,247,228,.10) 66px 74px,
      rgba(255,247,228,0) 74px 132px); }
#rays i:nth-child(1) { animation: rays-drift 34s ease-in-out infinite alternate; }
#rays i:nth-child(2) { opacity: .6; filter: blur(3px);
  background: repeating-linear-gradient(96deg,
      rgba(255,240,210,0) 0 90px, rgba(255,240,210,.07) 90px 120px, rgba(255,240,210,0) 120px 220px);
  animation: rays-drift2 48s ease-in-out infinite alternate; }
@keyframes rays-drift  { from { transform: translateX(-4%) rotate(-.6deg); } to { transform: translateX(4%) rotate(.6deg); } }
@keyframes rays-drift2 { from { transform: translateX(5%)  rotate(.4deg);  } to { transform: translateX(-5%) rotate(-.4deg); } }
/* 妖／喪失的章節把光柱轉冷 */
#theater.cold #rays i { background: repeating-linear-gradient(101deg,
      rgba(206,226,222,0) 0 42px, rgba(206,226,222,.05) 42px 66px,
      rgba(206,226,222,.09) 66px 74px, rgba(206,226,222,0) 74px 132px); }

/* ---------- 追光：舞台中央的一池光，極慢地呼吸 ---------- */
#spot { position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 46% 40% at 50% 44%, rgba(255,246,224,.34), rgba(255,246,224,.10) 46%, transparent 72%);
  animation: spot-breathe 11s ease-in-out infinite; }
@keyframes spot-breathe { 0%,100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } }

/* ---------- 見得：共振的那一瞬，隈取的線從中心炸開 ---------- */
#mie { position: absolute; inset: 0; pointer-events: none; z-index: 18; opacity: 0; }
#mie i { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: block; border-radius: 50%; }
#mie .burst { width: 12vmax; height: 12vmax;
  background: repeating-conic-gradient(from 0deg,
      rgba(239,129,72,.85) 0deg 1.1deg, transparent 1.1deg 5deg,
      rgba(232,220,196,.55) 5deg 5.7deg, transparent 5.7deg 11deg);
  -webkit-mask-image: radial-gradient(circle, transparent 16%, #000 30%, #000 64%, transparent 86%);
  mask-image: radial-gradient(circle, transparent 16%, #000 30%, #000 64%, transparent 86%); }
#mie .ring { width: 8vmax; height: 8vmax; border: .32vmax solid rgba(239,129,72,.9); }
#mie.on { animation: mie-hold 1.9s ease-out both; }
#mie.on .burst { animation: mie-burst 1.9s cubic-bezier(.1,.75,.2,1) both; }
#mie.on .ring  { animation: mie-ring 1.5s cubic-bezier(.1,.75,.2,1) both; }
@keyframes mie-hold  { 0% { opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mie-burst { 0% { transform: translate(-50%,-50%) scale(.18) rotate(0deg); }
                       100% { transform: translate(-50%,-50%) scale(4.4) rotate(26deg); } }
@keyframes mie-ring  { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; border-width: .5vmax; }
                       100% { transform: translate(-50%,-50%) scale(3.6); opacity: 0; border-width: .04vmax; } }
/* 共振瞬間的頓挫：畫面先被按住，再放開 */
#theater.mie-punch #stage3d { animation: mie-punch .95s cubic-bezier(.2,.9,.25,1) both; }
@keyframes mie-punch { 0% { transform: scale(1); filter: none; }
                       14% { transform: scale(1.055); filter: contrast(1.3) saturate(1.35) brightness(1.2); }
                       100% { transform: scale(1); filter: none; } }

/* ---------- 墨拭：墨自中心暈開蓋住畫面，再散去 ---------- */
#inkwipe { position: absolute; inset: 0; pointer-events: none; z-index: 16; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #050505 0%, #050505 42%, rgba(5,5,5,.86) 58%, rgba(5,5,5,0) 74%);
  transform: scale(.1); }
#inkwipe.on { animation: ink-wipe 2.6s cubic-bezier(.5,.02,.4,1) both; }
@keyframes ink-wipe {
  0%   { opacity: 0; transform: scale(.05) rotate(-6deg); }
  28%  { opacity: 1; transform: scale(3.2) rotate(2deg); }
  62%  { opacity: 1; transform: scale(3.6) rotate(4deg); }
  100% { opacity: 0; transform: scale(4.6) rotate(8deg); }
}

/* ---------- 背景：雙層交叉溶接 + 極慢的推鏡 ---------- */
#bg, #bg-next { position: absolute; inset: -2.5%; background-size: cover; background-position: center 30%;
  filter: brightness(.5) saturate(.85); will-change: transform, opacity; }
#bg-next { opacity: 0; transition: opacity 1s ease; }
#bg-next.in { opacity: 1; }
#bg.paper { background-image: none !important; background-color: #d9cbaa; filter: none; }
#bg.black { background-image: none !important; background-color: var(--black); filter: none; }
/* 推鏡：每一場景交替方向，慢到幾乎察覺不到，但畫面始終是活的 */
.kb-a { animation: kenburns-a 42s ease-out forwards; }
.kb-b { animation: kenburns-b 42s ease-out forwards; }
@keyframes kenburns-a { from { transform: scale(1.00) translate3d(0,0,0); } to { transform: scale(1.07) translate3d(-1.2%, 0.8%, 0); } }
@keyframes kenburns-b { from { transform: scale(1.07) translate3d(1.2%, -0.6%, 0); } to { transform: scale(1.00) translate3d(0,0,0); } }

/* ---------- 環境粒子（雪・塵・花瓣・燼） ---------- */
/* canvas 是替換元素，inset:0 撐不開，必須給明確尺寸 */
#fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; z-index: 4; opacity: 0; transition: opacity 1.6s ease; }
#fx.on { opacity: 1; }

/* ---------- 暗角 ---------- */
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse 78% 68% at 50% 46%, transparent 40%, rgba(6,5,5,.42) 78%, rgba(6,5,5,.82) 100%);
  animation: breathe 14s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .92; } 50% { opacity: 1; } }

#grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay; z-index: 4;
  background-image: repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.02) 0 1px, transparent 1px 4px), repeating-radial-gradient(circle at 73% 64%, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); }

/* ---------- 電影黑邊（舞台判定・終局） ---------- */
/* 黑邊框住的是畫面，不是介面：壓在背景與粒子之上，文字與立繪之下 */
#letterbox { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#letterbox .lb { position: absolute; left: 0; right: 0; height: 0; background: #050505;
  transition: height .9s cubic-bezier(.7,0,.2,1); display: block; }
#letterbox .lb.top { top: 0; }
#letterbox .lb.bottom { bottom: 0; }
#letterbox.on .lb { height: 11vh; }

/* ---------- 閃光（共振・衝擊） ---------- */
#flash { position: absolute; inset: 0; pointer-events: none; z-index: 19; opacity: 0; background: #fff; }
#flash.bloom { animation: bloom 1.5s ease-out; }
#flash.strike { animation: strike .5s ease-out; }
@keyframes bloom { 0% { opacity: 0; } 12% { opacity: .82; } 100% { opacity: 0; } }
@keyframes strike { 0% { opacity: 0; } 8% { opacity: .55; } 100% { opacity: 0; } }

/* 失敗：畫面失血、微顫 */
#theater.shaken { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 1px, 0); }
  40%, 60% { transform: translate3d(4px, -1px, 0); }
}
#theater.drained #bg, #theater.drained #bg-next { filter: brightness(.34) saturate(.15) contrast(1.05); transition: filter 1.4s ease; }

/* 舞台口 */
#proscenium { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#proscenium .beam { position: absolute; background: var(--black); }
#proscenium .beam.top { top: 0; left: 0; right: 0; height: 6vh; border-bottom: 2px solid #2c261e;
  background: linear-gradient(180deg, var(--black) 55%, #131110 100%); }
#proscenium .beam.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 12px;
  background: repeating-linear-gradient(90deg, #10100f 0 60px, var(--moegi-dim) 60px 120px, #7c3a1c 120px 180px); opacity: .85; }
#proscenium .beam.left  { top: 0; bottom: 0; left: 0; width: 3.2vw; border-right: 1px solid #2c261e; }
#proscenium .beam.right { top: 0; bottom: 0; right: 0; width: 3.2vw; border-left: 1px solid #2c261e; }

/* 章名卡 */
#titlecard { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 4vw; background: rgba(11,10,9,.88); }
.tc-no { writing-mode: vertical-rl; font-size: clamp(15px, 2.4vh, 21px); letter-spacing: .6em; color: var(--kaki-bright); border-right: 1px solid var(--kaki); padding-right: 14px; height: 32vh; display: flex; align-items: center; }
.tc-title { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--display); font-size: clamp(34px, 7vh, 64px); font-weight: 900; letter-spacing: .3em; color: var(--paper); text-shadow: 0 0 30px rgba(0,0,0,.6); }
#titlecard.show { animation: fadein .9s ease both; }
/* 章名的筆畫書寫：SVG 當場寫出來，寫完才落墨 */
#tc-ink { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 62vh; width: 40vw; overflow: visible; pointer-events: none; }
#tc-ink .ink-stroke { fill: none; stroke: var(--paper); stroke-width: 14; stroke-linecap: round;
  stroke-linejoin: round; opacity: .92; }
#tc-ink .ink-fill { fill: var(--paper); opacity: 0; }
#titlecard.inked .tc-title { visibility: hidden; }

/* 章名：自上而下如掛軸展開，橫線先掃過 */
#titlecard.show .tc-title { animation: scroll-open 1.05s cubic-bezier(.16,.8,.3,1) .12s both; }
#titlecard.show .tc-no { animation: rise .8s ease .34s both; }
#titlecard.show .tc-pov { animation: rise .8s ease .5s both; }
@keyframes scroll-open {
  from { clip-path: inset(0 0 100% 0); opacity: 0; letter-spacing: .55em; }
  to   { clip-path: inset(0 0 0 0);   opacity: 1; letter-spacing: .3em; }
}
#titlecard::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kaki), transparent); transform: translate(-50%, -50%); }
#titlecard.show::after { animation: wipe 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wipe { 0% { width: 0; opacity: 0; } 30% { opacity: .9; } 60% { width: 62vw; opacity: .55; } 100% { width: 72vw; opacity: 0; } }

/* 旁白（直排） */
#narration { position: absolute; top: 12vh; right: 7vw; bottom: 18vh; z-index: 10;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: clamp(17px, 2.5vh, 23px); line-height: 2.05; letter-spacing: .14em;
  color: var(--paper); text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.85);
  max-width: 56vw; overflow: hidden; }
/* 旁白：如捲軸自上而下拉開 */
#narration.show { animation: nar-in 1.05s cubic-bezier(.16,.8,.28,1) both; }
@keyframes nar-in {
  from { opacity: 0; transform: translateX(-16px); filter: blur(3px); clip-path: inset(0 0 100% 0); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); clip-path: inset(0 0 0 0); }
}

/* 對白（橫排） */
#dialogue { position: absolute; left: 50%; transform: translateX(-50%); bottom: 7.5vh; z-index: 10;
  width: min(860px, 82vw); background: rgba(13,12,10,.86); border-left: 3px solid var(--moegi);
  padding: 18px 26px 20px; box-shadow: 0 6px 30px rgba(0,0,0,.55); }
#dialogue.show { animation: rise-center .5s ease both; }
@keyframes rise-center { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
#speaker { font-family: var(--gothic); font-size: 13px; letter-spacing: .35em; color: var(--kaki-bright); margin-bottom: 8px; }
#line { font-family: var(--gothic); font-size: clamp(15px, 2.2vh, 19px); line-height: 1.9; letter-spacing: .06em; color: var(--paper); }
/* 逐字浮現：不是硬切出現，是從紙面浮起來 */
#line .ch { opacity: 0; display: inline; transition: opacity .22s ease, filter .22s ease; filter: blur(2px); }
#line .ch.on { opacity: 1; filter: blur(0); }

/* 立繪：說話者亮起 */
#portrait { position: absolute; left: 2vw; bottom: 9vh; z-index: 9; width: min(27vw, 340px); pointer-events: none;
  opacity: 0; transform: translate3d(-26px, 22px, 0) scale(.965);
  filter: brightness(.26) contrast(.82) drop-shadow(0 6px 16px rgba(0,0,0,.85));
  transition: opacity .6s ease, transform .72s cubic-bezier(.16,.9,.24,1.06), filter .6s ease; }
#portrait.lit { opacity: 1; transform: none;
  filter: brightness(1) contrast(1) drop-shadow(0 12px 30px rgba(0,0,0,.92)); }
#portrait img { width: 100%; display: block; animation: fig-breathe 6.8s ease-in-out infinite; }
/* 立繪不是貼紙：他在呼吸，說話時上身會微微前傾一下 */
@keyframes fig-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.55%) scale(1.007); } }
#portrait.said img { animation: fig-said .62s cubic-bezier(.2,.85,.3,1), fig-breathe 6.8s ease-in-out infinite .62s; }
@keyframes fig-said { 0% { transform: translateY(0) scale(1); } 26% { transform: translateY(1.1%) scale(1.014); } 100% { transform: translateY(0) scale(1); } }

/* 妖的聲音 —— 六道位置 */
#voice-layer { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.voice { position: absolute; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: clamp(15px, 2.2vh, 20px); line-height: 2; letter-spacing: .18em;
  color: var(--kaki-bright); text-shadow: 0 0 14px rgba(212,98,47,.55), 0 1px 3px rgba(0,0,0,.9);
  animation: voice-in 1.4s ease both; max-height: 36vh; }
/* max-height 的上限由「上下同欄不能相撞」決定，不是隨手填的：
   tc 自 9vh 起、bc 自下方 16vh 起 → 9+H ≤ 84−H → H ≤ 37.5vh。
   胡弓那一段六道聲音同時在場，46vh 會讓上下兩道疊成一團字。 */
.voice .voice-who { font-size: .72em; color: rgba(239,129,72,.75); margin-bottom: 10px; display: block; }
@keyframes voice-in { 0% { opacity: 0; filter: blur(6px); } 100% { opacity: 1; filter: blur(0); } }
.voice.pos-tc { top: 9vh;  left: 50%; transform: translateX(-50%); }
.voice.pos-tl { top: 11vh; left: 6vw; }
.voice.pos-tr { top: 11vh; right: 6vw; }
.voice.pos-bl { bottom: 12vh; left: 6vw; }
.voice.pos-br { bottom: 12vh; right: 6vw; }
.voice.pos-bc { bottom: 16vh; left: 50%; transform: translateX(-50%); }

/* 演目卡 */
#perform-card { position: absolute; inset: 0; z-index: 18; display: flex; align-items: center; justify-content: center; gap: 3vw; background: rgba(11,10,9,.72); }
.pf-play { writing-mode: vertical-rl; font-family: var(--display); font-size: clamp(30px, 6vh, 54px); font-weight: 900; letter-spacing: .28em; color: var(--paper); }
.pf-role { writing-mode: vertical-rl; font-size: clamp(15px, 2.4vh, 20px); letter-spacing: .5em; color: var(--kaki-bright); border-left: 1px solid var(--kaki); padding-left: 14px; height: 24vh; display: flex; align-items: center; }
#perform-card.show { animation: fadein .8s ease both; }
/* 演目名：像看板被推上來，帶一次呼吸般的光 */
#perform-card.show .pf-play {
  animation: play-in 1.5s cubic-bezier(.14,.8,.24,1) both;
  text-shadow: 0 0 0 rgba(232,220,196,0); }
#perform-card.show .pf-role { animation: rise 1s ease .45s both; }
@keyframes play-in {
  0%   { opacity: 0; transform: translateY(26px) scale(.94); letter-spacing: .7em; filter: blur(6px); }
  55%  { opacity: 1; filter: blur(0); text-shadow: 0 0 26px rgba(232,220,196,.5); }
  100% { opacity: 1; transform: none; letter-spacing: .28em; text-shadow: 0 0 10px rgba(232,220,196,.18); }
}

/* 選擇 */
#choices { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; background: rgba(11,10,9,.66); backdrop-filter: blur(2px); }
#choice-prompt { writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(17px, 2.6vh, 23px); letter-spacing: .2em; line-height: 2; color: var(--paper); max-height: 30vh; }
#choice-list { display: flex; flex-direction: column; gap: 18px; }
.choice-btn { position: relative; overflow: hidden; background: rgba(13,12,10,.9); border: 1px solid rgba(232,220,196,.28); color: var(--paper);
  font-size: clamp(15px, 2.2vh, 18px); letter-spacing: .12em; line-height: 1.7; padding: 14px 34px; min-width: 340px; max-width: 70vw;
  opacity: 0; transform: translateY(10px);
  animation: choice-in .5s cubic-bezier(.2,.7,.3,1) forwards;
  transition: border-color .3s, color .3s, background .3s, transform .3s, box-shadow .3s; }
.choice-btn:nth-child(1) { animation-delay: .05s; }
.choice-btn:nth-child(2) { animation-delay: .15s; }
.choice-btn:nth-child(3) { animation-delay: .25s; }
.choice-btn:nth-child(4) { animation-delay: .35s; }
.choice-btn:nth-child(5) { animation-delay: .45s; }
.choice-btn:nth-child(6) { animation-delay: .55s; }
@keyframes choice-in { to { opacity: 1; transform: none; } }
/* 墨線自左掃過 */
.choice-btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(212,98,47,.20), rgba(212,98,47,.04));
  transition: width .42s cubic-bezier(.2,.7,.3,1); }
.choice-btn:hover::before, .choice-btn:focus-visible::before { width: 100%; }
.choice-btn:hover, .choice-btn:focus-visible { border-color: var(--kaki); color: var(--kaki-bright);
  transform: translateX(4px); box-shadow: -3px 0 0 0 var(--kaki); outline: none; }
.choice-btn > * { position: relative; }
.choice-btn .cnum { color: var(--moegi); margin-right: 14px; font-size: .85em; }

/* 獲得聲音 */
#acquire { position: absolute; inset: 0; z-index: 30; background: var(--black); display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 5vw; padding: 6vh 6vw; }
.aq-name { position: relative; writing-mode: vertical-rl; text-orientation: upright; font-family: var(--display); font-size: clamp(34px, 7vh, 60px); font-weight: 900; letter-spacing: .25em; color: var(--paper); animation: fadein 1.2s ease both; }
.aq-ink { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%; background: radial-gradient(closest-side, #050505 72%, rgba(5,5,5,.92) 88%, rgba(5,5,5,0)); transform: translate(-50%, -60%) rotate(-8deg); }
#acquire.inked:not(.done) .aq-ink { animation: ink-spread 1.8s .3s cubic-bezier(.6,.02,.35,1) forwards; }
@keyframes ink-spread { 0% { width: 0; height: 0; opacity: 0; } 25% { opacity: 1; } 100% { width: 30vh; height: 58vh; opacity: .96; } }
/* 墨塗：玩家親手抹掉名字。這一筆不能由系統代勞。 */
/* 名字獨立成一欄，墨筆的畫布正好蓋在它上面 */
.aq-col { position: relative; display: flex; align-items: center; justify-content: center; }
#aq-brush { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26vh; height: 100%; min-height: 44vh; z-index: 2; cursor: crosshair; touch-action: none; }
#acquire.done #aq-brush { pointer-events: none; }
.aq-prompt { position: absolute; bottom: 12vh; font-size: 12px; letter-spacing: .42em;
  color: rgba(232,220,196,.42); z-index: 3;
  animation: prompt-pulse 2.6s ease-in-out infinite; }
@keyframes prompt-pulse { 0%,100% { opacity: .35; } 50% { opacity: .85; } }
#acquire.done .aq-prompt { display: none; }

.aq-caption { writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(15px, 2.2vh, 19px); letter-spacing: .2em; line-height: 2.05; color: var(--kaki-bright); text-shadow: 0 0 16px rgba(212,98,47,.5); opacity: 0; max-height: 74vh; }
#acquire.inked:not(.done) .aq-caption { animation: voice-in 1.6s 2.4s ease forwards; }

/* 花道（進度） */
#hanamichi { position: absolute; left: 0; right: 0; bottom: 0; height: 4.5vh; z-index: 12;
  background: linear-gradient(180deg, rgba(11,10,9,0) 0%, rgba(11,10,9,.9) 40%);
  border-top: 1px solid rgba(232,220,196,.14); }
#hanamichi-fill { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--moegi), var(--kaki)); transition: width .6s ease; box-shadow: 0 0 8px rgba(212,98,47,.6); }

/* 番付・音樂按鈕 */
#btn-banzuke { position: absolute; top: 9vh; left: 1.1vw; z-index: 26; background: rgba(13,12,10,.8); border: 1px solid rgba(232,220,196,.3); color: var(--paper); font-size: 13px; letter-spacing: .1em; line-height: 1.5; padding: 10px 8px; transition: all .3s; }
#btn-banzuke:hover { border-color: var(--kaki); color: var(--kaki-bright); }
#btn-bgm { position: absolute; top: calc(9vh + 76px); left: 1.1vw; z-index: 26; background: rgba(13,12,10,.8); border: 1px solid rgba(232,220,196,.3); color: var(--paper); font-size: 13px; line-height: 1.5; padding: 10px 8px; white-space: pre-line; transition: all .3s; }
#btn-bgm:hover { border-color: var(--kaki); color: var(--kaki-bright); }

/* 前進提示 */
#advance-hint { position: absolute; right: 4.6vw; bottom: 5.6vh; z-index: 11; color: rgba(232,220,196,.65); font-size: 13px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(5px); opacity: .9; } }

/* ---------- 番付 ---------- */
#banzuke { position: fixed; inset: 0; z-index: 62; background: rgba(5,5,4,.82); display: flex; align-items: center; justify-content: center; }
.bz-paper { position: relative; width: min(980px, 92vw); height: min(640px, 86vh); background:
  radial-gradient(ellipse at 20% 15%, rgba(120,100,60,.12), transparent 60%),
  radial-gradient(ellipse at 85% 80%, rgba(120,100,60,.1), transparent 55%),
  #e2d4b2; box-shadow: 0 12px 60px rgba(0,0,0,.8); border: 10px solid #14120f; padding: 4vh 4vw; color: #21190f; display: flex; flex-direction: column; }
.bz-title { position: absolute; top: 4vh; right: 3vw; writing-mode: vertical-rl; font-size: clamp(22px, 3.6vh, 32px); font-weight: 600; letter-spacing: .5em; border-right: 2px solid #21190f; padding-right: 12px; }
#bz-names { flex: 1; display: flex; flex-direction: row-reverse; justify-content: center; gap: 2.6vw; align-items: flex-start; padding-top: 2vh; margin-right: 10vw; }
.bz-name { position: relative; writing-mode: vertical-rl; text-orientation: upright; font-size: clamp(17px, 2.8vh, 24px); font-weight: 500; letter-spacing: .18em; }
.bz-en { display: block; margin-top: 12px; writing-mode: vertical-rl; }
.bz-en i { display: block; width: 3px; background: #6d5a35; margin: 0 auto; }
.bz-name.dead { color: rgba(33,25,15,.35); }
.bz-name.dead::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 1.5em; height: 105%;
  background: radial-gradient(ellipse 60% 48% at 50% 18%, #0a0908 60%, rgba(10,9,8,.85) 78%, transparent 92%),
              radial-gradient(ellipse 55% 55% at 48% 55%, #0a0908 55%, rgba(10,9,8,.9) 75%, transparent 90%),
              radial-gradient(ellipse 50% 40% at 52% 88%, #0a0908 50%, rgba(10,9,8,.8) 72%, transparent 90%);
  border-radius: 40%; }
.bz-stats { display: flex; gap: 3vw; justify-content: center; padding: 1.6vh 0 0; border-top: 1px solid rgba(33,25,15,.3); }
.bz-stat { display: flex; align-items: baseline; gap: 10px; font-size: 15px; letter-spacing: .2em; }
.bz-k { font-weight: 600; color: #7c3a1c; }
#st-ayakashi { letter-spacing: 4px; color: #7c3a1c; }
#btn-banzuke-close { position: absolute; bottom: 2.4vh; right: 3vw; background: none; border: 1px solid #21190f; color: #21190f; font-size: 13px; letter-spacing: .4em; padding: 8px 16px 8px 22px; transition: all .25s; }
#btn-banzuke-close:hover { background: #21190f; color: #e2d4b2; }

/* ---------- 終幕 ---------- */
#end-screen { position: fixed; inset: 0; z-index: 58; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.5vh; }
.end-frame { display: flex; flex-direction: row; gap: 5vw; align-items: center; height: 56vh; }
.end-body { display: flex; flex-direction: row-reverse; gap: 2.6vw; align-items: center; }
.end-body .v { font-size: clamp(14px, 2.2vh, 19px); line-height: 2.1; letter-spacing: .24em; color: var(--paper); opacity: 0; animation: rise 1.4s ease forwards; max-height: 52vh; }
.end-big { writing-mode: vertical-rl; font-family: var(--display); font-size: clamp(38px, 7vh, 64px); font-weight: 900; color: var(--kaki-bright); letter-spacing: .4em; border-right: 1px solid var(--kaki); padding-right: 20px; animation: fadein 2s ease both; }
#end-stats { font-size: 13px; letter-spacing: .35em; color: var(--paper-dim); }
.end-btns { display: flex; gap: 26px; }
.end-btns button { background: none; border: 1px solid var(--moegi); color: var(--paper); font-size: 14px; letter-spacing: .4em; padding: 10px 22px 10px 30px; transition: all .3s; }
.end-btns button:hover { border-color: var(--kaki); color: var(--kaki-bright); }

/* ---------- 視角・行動點 ---------- */
.tc-pov { writing-mode: vertical-rl; font-size: clamp(13px, 2vh, 17px); letter-spacing: .5em; color: var(--paper-dim); }
.tc-pov:empty { display: none; }
#choice-points { font-size: 15px; letter-spacing: .4em; color: var(--kaki-bright); }
.choice-btn.spent { opacity: .32; border-color: rgba(232,220,196,.12); text-decoration: line-through; }
.choice-btn .cnote { display: block; margin-top: 6px; font-size: .78em; color: var(--paper-dim); letter-spacing: .1em; }

/* ---------- 侵蝕：對白被說書收編（直排） ---------- */
#narration.as-line { color: var(--kaki-bright); text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 20px rgba(212,98,47,.35); }

/* ---------- 交出控制權：自由行走 ---------- */
#walk { position: absolute; inset: 0; z-index: 28; background: linear-gradient(180deg, #060505 0%, #0d0c0a 70%, #14110d 100%); cursor: pointer; }
.walk-floor { position: absolute; left: 0; right: 0; bottom: 18vh; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,220,196,.5) 15%, rgba(232,220,196,.5) 85%, transparent); }
#walk-figure { position: absolute; bottom: 18vh; left: 50%; transform: translateX(-50%); width: 26px; height: 15vh; transition: left .18s linear; }
#walk-figure .wf-head { width: 13px; height: 13px; border-radius: 50%; background: #dcd0b6; margin: 0 auto; transform: rotate(10deg) translateX(2px); }
#walk-figure .wf-body { width: 17px; height: calc(100% - 15px); margin: 2px auto 0; background: #dcd0b6; border-radius: 8px 8px 3px 3px; }
#walk-figure.flip .wf-head { transform: rotate(-10deg) translateX(-2px); }
.walk-hint { position: absolute; top: 42vh; font-size: 14px; letter-spacing: .5em; color: rgba(232,220,196,.4); animation: bob 2.4s ease-in-out infinite; }
.walk-hint.left { left: 7vw; }
.walk-hint.right { right: 7vw; }

/* ---------- 定式幕 ---------- */
#curtain { position: fixed; inset: 0; z-index: 65; pointer-events: none; transform: translateX(-102%);
  background: repeating-linear-gradient(90deg, #101010 0 90px, var(--moegi-dim) 90px 180px, #8a3f1d 180px 270px);
  box-shadow: inset 0 -30px 60px rgba(0,0,0,.6); }
#curtain.sweep-in  { animation: sweep-in 1.1s cubic-bezier(.65,.05,.36,1) forwards; }
#curtain.sweep-out { animation: sweep-out 1.1s cubic-bezier(.65,.05,.36,1) forwards; }
@keyframes sweep-in  { from { transform: translateX(-102%); } to { transform: translateX(0); } }
@keyframes sweep-out { from { transform: translateX(0); } to { transform: translateX(102%); } }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
[hidden] { display: none !important; }

/* 尊重系統的減少動態設定 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  #fx { display: none; }
}

/* ============================================================
   響應式（手機・平板）
   ============================================================ */

/* 直式螢幕：改用縱向構圖的背景，並讓取景略偏上（下半留給對話框） */
@media (max-aspect-ratio: 4/5) {
  .title-art { background-image: url('../assets/p/title.jpg') !important; }
  #bg { background-position: center 38%; }
  /* 直式標題圖的幕縫是亮的，暗角遮罩壓不到字；改成整體壓暗＋中段加重 */
  .title-veil { background:
      linear-gradient(180deg, rgba(11,10,9,.55) 0%, rgba(11,10,9,.30) 22%, rgba(11,10,9,.72) 46%,
                      rgba(11,10,9,.72) 66%, rgba(11,10,9,.45) 82%, rgba(11,10,9,.8) 100%); }
}
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#theater, #title-screen, #statement, #end-screen { user-select: none; -webkit-user-select: none; }

@media (max-width: 900px) {
  #dialogue { width: 90vw; }
  .choice-btn { min-width: 0; width: min(560px, 88vw); }
  #bz-names { gap: 2vw; margin-right: 8vw; }
}

@media (max-width: 640px) {
  /* 舞台框變薄 */
  #proscenium .beam.left, #proscenium .beam.right { width: 2vw; }
  #proscenium .beam.top { height: 4.5vh; }

  /* 直排旁白：手機上留更多欄寬 */
  #narration { top: 9vh; right: 5vw; bottom: 20vh; max-width: 76vw; font-size: 16px; line-height: 1.9; letter-spacing: .1em; }

  /* 對白 */
  #dialogue { width: 94vw; bottom: 5.5vh; padding: 12px 14px 14px; border-left-width: 2px; }
  #line { font-size: 15px; line-height: 1.75; }
  #speaker { font-size: 11px; }

  /* 選擇與行動點 */
  #choices { gap: 2.6vh; padding: 0 4vw; }
  #choice-prompt { max-height: 26vh; font-size: 15px; letter-spacing: .12em; }
  .choice-btn { width: 92vw; padding: 12px 14px; font-size: 14px; }
  .choice-btn .cnum { margin-right: 8px; }
  #choice-points { font-size: 13px; }

  /* 章名卡與演目卡 */
  .tc-title { font-size: clamp(26px, 8vw, 40px); }
  .pf-play { font-size: clamp(24px, 8vw, 40px); }
  .pf-role { height: 20vh; font-size: 13px; }

  /* 立繪 */
  #portrait { width: 42vw; left: 1.2vw; bottom: 17vh; }

  /* 妖的聲音 */
  .voice { font-size: 13px; line-height: 1.85; max-height: 34vh; letter-spacing: .12em; }
  /* 3vw 會讓左上那道聲音鑽到番付／音兩顆鈕底下（手機上兩顆鈕就佔到 x=30px）。
     左側讓開到 10vw，字才不會被鈕壓著。 */
  .voice.pos-tl { left: 10vw; }
  .voice.pos-bl { left: 3vw; }
  .voice.pos-tr, .voice.pos-br { right: 3vw; }

  /* 獲得聲音 */
  .aq-name { font-size: clamp(30px, 11vw, 52px); }
  .aq-caption { font-size: 14px; max-height: 44vh; }

  /* 番付：橫向可捲 */
  .bz-paper { width: 96vw; height: 90vh; padding: 3vh 3vw; border-width: 6px; }
  .bz-title { font-size: 17px; top: 3vh; right: 2.5vw; }
  #bz-names { gap: 10px; margin-right: 0; padding: 2vh 9vw 0 0; overflow-x: auto; justify-content: flex-start; }
  .bz-name { font-size: 14px; flex: 0 0 auto; }
  .bz-stats { flex-wrap: wrap; gap: 8px 18px; font-size: 12px; justify-content: flex-start; padding-right: 88px; }
  .bz-stat { font-size: 12px; }
  #btn-banzuke-close { bottom: 1.6vh; right: 2.5vw; font-size: 12px; padding: 6px 10px 6px 16px; }

  /* 側鈕 */
  #btn-banzuke { top: 7vh; font-size: 11px; padding: 8px 6px; }
  #btn-bgm { top: calc(7vh + 62px); font-size: 11px; padding: 8px 6px; }
  #advance-hint { right: 4vw; bottom: 5vh; }

  /* 標題・聲明・終幕 */
  .title-mark { font-size: clamp(48px, 16vw, 84px); }
  .title-menu { gap: 20px; }
  .title-menu button { font-size: 15px; }
  .statement-body { gap: 5vw; height: 56vh; }
  .statement-body .v { font-size: 15px; letter-spacing: .2em; }
  .end-frame { gap: 6vw; height: auto; max-height: 62vh; max-width: 92vw; overflow-x: auto; }
  .end-body { gap: 4vw; }
  .end-body .v { font-size: 13px; max-height: 56vh; letter-spacing: .18em; }
  .end-big { font-size: clamp(28px, 10vw, 44px); padding-right: 12px; }
  .end-btns { flex-direction: column; gap: 12px; align-items: center; }
  #end-stats { font-size: 11px; letter-spacing: .25em; }

  /* 行走終局 */
  .walk-hint { font-size: 12px; top: 38vh; }
  #walk-figure { width: 20px; height: 13vh; }
  #walk-figure .wf-head { width: 11px; height: 11px; }
  #walk-figure .wf-body { width: 14px; }
}

/* 橫向手機：直排旁白高度吃緊時縮小 */
@media (max-height: 480px) {
  #narration { top: 7vh; bottom: 16vh; font-size: 14px; }
  #dialogue { bottom: 3vh; padding: 8px 12px 10px; }
  .statement-body { height: 70vh; }
}