/* ── 基底 ───────────────────────────────────────────── */
:root {
  --gold: #e9c27a;
  --parchment: #f0e2c4;
  --ash: #c0ae8e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  cursor: default;
}

#app { position: fixed; inset: 0; }
#app canvas { display: block; }

body.interactive #app canvas { cursor: grab; }
body.interactive #app canvas:active { cursor: grabbing; }

/* ── 畫面質感:暗角 + 底片顆粒 ────────────────────────── */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.45) 66%,
    rgba(0,0,0,.88) 100%);
}

#grain {
  position: fixed; inset: -60%;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation: grain .55s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-1.5%, 1%); }
  66%  { transform: translate(1%, -1.5%); }
  100% { transform: translate(0, 0); }
}

/* ── 旁白字幕 ────────────────────────────────────────── */
#caption {
  position: fixed;
  left: 50%;
  bottom: 13vh;
  transform: translateX(-50%);
  width: min(90vw, 940px);
  text-align: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  text-wrap: balance;
}
#caption.show { opacity: 1; }

#caption .line-a {
  font: italic 300 clamp(15px, 1.9vw, 26px)/1.6 Georgia, "Times New Roman", serif;
  color: var(--ash);
  letter-spacing: .07em;
  opacity: .8;
}
#caption .line-b {
  margin-top: .55em;
  font: 500 clamp(17px, 2.2vw, 30px)/1.7 "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  color: var(--parchment);
  letter-spacing: .14em;
  text-shadow: 0 0 26px rgba(255, 170, 80, .28);
}

/* ── 片名 ───────────────────────────────────────────── */
#title {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1.06);
  text-align: center;
  opacity: 0;
  transition: opacity 3s ease, transform 4.5s cubic-bezier(.16,.8,.3,1);
  pointer-events: none;
}
#title.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#title .zh {
  font: 600 clamp(34px, 6.5vw, 96px)/1.1 "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(255, 160, 50, .55), 0 0 120px rgba(255, 110, 20, .35);
}
#title .en {
  margin-top: 1em;
  font: 300 clamp(11px, 1.5vw, 19px)/1.4 Georgia, "Times New Roman", serif;
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  color: rgba(233, 194, 122, .75);
}

/* ── 控制項 ─────────────────────────────────────────── */
#ui {
  position: fixed;
  right: max(18px, 2vw);
  bottom: max(18px, 2vw);
  display: flex;
  gap: 10px;
}
#ui button {
  appearance: none;
  background: rgba(20, 16, 10, .35);
  border: 1px solid rgba(233, 194, 122, .28);
  color: rgba(233, 194, 122, .8);
  font: 400 13px/1 "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: .14em;
  padding: 10px 16px;
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: opacity .6s ease, color .25s, border-color .25s, background .25s;
}
#ui button:hover {
  color: #fff3dc;
  border-color: rgba(233, 194, 122, .6);
  background: rgba(60, 40, 16, .45);
}

#hint {
  position: fixed;
  left: 50%; bottom: max(18px, 2vw);
  transform: translateX(-50%);
  font: 400 12px/1 "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: .18em;
  color: rgba(233, 194, 122, .42);
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
  white-space: nowrap;
}

/* 序幕播放中:只顯示「跳過」。序幕結束後:只顯示「重播」與操作提示 */
#replay, body.interactive #skip { opacity: 0; pointer-events: none; }
body.interactive #replay { opacity: 1; pointer-events: auto; }
body.interactive #hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
}