/* 舞台 1920×1080。場景容器用 data-start／data-duration 控制顯示，容器內元素以 left/top 定位基準點、
   動畫只動 transform 與 opacity（GSAP 的 x/y/scale/rotation），逐格輸出才穩定。 */
/* 系統字型用 local() 宣告，渲染器才不會退回通用字型 */
@font-face { font-family: "PingFang TC"; src: local("PingFang TC"), local("PingFangTC-Regular"); font-weight: 400; }
@font-face { font-family: "PingFang TC"; src: local("PingFangTC-Medium"); font-weight: 500; }
@font-face { font-family: "PingFang TC"; src: local("PingFangTC-Semibold"); font-weight: 600 700; }
@font-face { font-family: "Noto Sans TC"; src: local("Noto Sans TC"); }
@font-face { font-family: "Noto Sans CJK TC"; src: local("Noto Sans CJK TC"); }
:root {
  --bg: #070b10;
  --bg2: #0d1620;
  --accent: #4fc3f7;
  --accent-soft: rgba(79, 195, 247, 0.18);
  --mint: #7fdccd;
  --amber: #e8a95c;
  --text: rgba(255, 255, 255, 0.9);
  --muted: #7d8a98;
  --font: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }

.clip { position: absolute; inset: 0; }
.abs { position: absolute; left: 0; top: 0; }
.ctr { transform: translate(-50%, -50%); }

/* ── 全片底層 ── */
#bg { background: radial-gradient(ellipse 75% 65% at 50% 46%, var(--bg2) 0%, var(--bg) 62%, #020406 100%); }
#floorGrid {
  position: absolute; left: -50%; width: 200%; top: 52%; height: 1400px;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.16) 1px, transparent 1px);
  background-size: 80px 80px;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 45%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 45%, transparent 85%);
}
#tintWarm { background: radial-gradient(ellipse 85% 75% at 50% 58%, rgba(220, 96, 40, 0.26), rgba(120, 30, 10, 0.1) 55%, transparent 100%); opacity: 0; }
#tintCool { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(79, 195, 247, 0.16), transparent 70%); opacity: 0; }
#vignette { background: radial-gradient(ellipse 72% 72% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75) 100%); pointer-events: none; }
#grain {
  opacity: 0.06; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#flash { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(160, 225, 255, 0.55), rgba(79, 195, 247, 0.12) 60%, transparent 100%); opacity: 0; mix-blend-mode: screen; }
#blackout { background: #000; opacity: 0; }

/* ── 字幕 ── */
.cap {
  position: absolute; left: 960px; top: 968px; transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 500; letter-spacing: 0.05em; white-space: nowrap; color: var(--text);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8);
}
.cap .ch, .split .ch { display: inline-block; white-space: pre; }

/* ── S1 法規 ── */
#radar { left: 960px; top: 520px; width: 1200px; height: 1200px; border-radius: 50%; }
#radar .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(79, 195, 247, 0.12); }
#radar .ring.r2 { inset: 200px; } #radar .ring.r3 { inset: 400px; }
#radarSweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(79, 195, 247, 0.32), rgba(79, 195, 247, 0.0) 60deg, transparent 360deg);
}
.reg { font-size: 56px; font-weight: 600; letter-spacing: 0.02em; color: #9fb0c0; white-space: nowrap; }
.reg.hot { color: var(--amber); text-shadow: 0 0 24px rgba(232, 169, 92, 0.35); }
#odo { left: 960px; top: 470px; height: 280px; overflow: hidden; display: flex; gap: 6px; }
.odoCol { width: 160px; height: 280px; overflow: hidden; position: relative; }
.odoStrip { position: absolute; left: 0; top: 0; width: 160px; }
.odoStrip div {
  height: 280px; line-height: 280px; text-align: center; font-size: 260px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.04em; text-shadow: 0 0 60px rgba(79, 195, 247, 0.45); font-variant-numeric: tabular-nums;
}
#odoSub { left: 960px; top: 660px; font-size: 46px; font-weight: 500; letter-spacing: 0.14em; color: var(--text); white-space: nowrap; }

/* ── S2／S3 壓力與翻轉 ── */
#pileStage { perspective: 1400px; }
.doc {
  width: 176px; height: 122px; border-radius: 8px; background: #e7ecf2; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(#aeb9c6, #aeb9c6), linear-gradient(#cfd7e0, #cfd7e0), linear-gradient(#cfd7e0, #cfd7e0), linear-gradient(#cfd7e0, #cfd7e0);
  background-repeat: no-repeat; background-size: 74px 9px, 126px 6px, 104px 6px, 116px 6px;
  background-position: 20px 22px, 20px 50px, 20px 66px, 20px 82px; backface-visibility: hidden;
}
.doc.ok { background-color: #eaf7fd; box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.8), 0 0 26px rgba(79, 195, 247, 0.35); }
.chip {
  font-family: var(--mono); font-size: 25px; color: #c9d3dd; padding: 9px 20px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
}
#countdown { left: 1560px; top: 92px; display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 600; color: var(--amber); letter-spacing: 0.08em; }
#cdWin { position: relative; width: 74px; height: 44px; overflow: hidden; }
#cdStrip { position: absolute; left: 0; top: 0; width: 74px; }
#cdStrip div { height: 44px; line-height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
#sweep {
  left: 0; top: 0; width: 6px; height: 1080px; background: #bfeaff;
  box-shadow: 0 0 30px 8px rgba(79, 195, 247, 0.9), 0 0 140px 60px rgba(79, 195, 247, 0.28);
}
#sweepTrail { left: 0; top: 0; width: 520px; height: 1080px; background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.16)); }

/* ── 品牌 ── */
#brand { left: 960px; top: 520px; display: flex; align-items: center; gap: 34px; white-space: nowrap; transform-origin: 0 50%; }
#brand svg { display: block; width: 128px; height: 128px; filter: drop-shadow(0 0 30px rgba(127, 220, 205, 0.45)); }
#brandName .brandAi .ch { background: linear-gradient(135deg, #4fc3f7, #81c784); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
#brandName { font-size: 120px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
#flare { left: 960px; top: 520px; width: 1600px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(160, 230, 255, 0.9), transparent); filter: blur(2px); }
#company { font-size: 24px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; text-transform: uppercase; }
#tagline { left: 960px; top: 650px; font-size: 54px; font-weight: 500; letter-spacing: 0.1em; white-space: nowrap; color: var(--text); }

/* ── S4a 拆解派工 ── */
.cell { width: 22px; height: 22px; border-radius: 4px; background: rgba(79, 195, 247, 0.55); box-shadow: 0 0 10px rgba(79, 195, 247, 0.35); }
.dept {
  width: 250px; height: 520px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.025);
  display: flex; flex-direction: column; align-items: center; padding-top: 22px;
}
.dept .name { font-size: 30px; font-weight: 600; color: var(--text); letter-spacing: 0.08em; }
.dept .who { margin-top: 10px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(79, 195, 247, 0.6);
  background: radial-gradient(circle at 50% 38%, rgba(79, 195, 247, 0.55) 0 22%, transparent 23%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(79, 195, 247, 0.45) 0 70%, transparent 71%); }
.due { font-family: var(--mono); font-size: 22px; color: var(--mint); white-space: nowrap; }

/* ── S4b 檢測 ── */
.edge { height: 2px; background: rgba(255, 255, 255, 0.14); transform-origin: 0 50%; }
.node { width: 34px; height: 34px; border-radius: 8px; background: var(--bg); border: 2px solid rgba(79, 195, 247, 0.5); }
.nodeLit { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); box-shadow: 0 0 26px rgba(79, 195, 247, 0.9); opacity: 0; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: #dff6ff; box-shadow: 0 0 16px 4px rgba(79, 195, 247, 0.9); opacity: 0; }
#agent { left: 960px; top: 470px; width: 150px; height: 150px; }
#agent .hex { position: absolute; inset: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: linear-gradient(160deg, rgba(79, 195, 247, 0.9), rgba(40, 110, 160, 0.9)); }
#agent .lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 700; color: #04121c; letter-spacing: 0.04em; }
#scanRing { left: 960px; top: 470px; width: 420px; height: 420px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(79, 195, 247, 0.5), transparent 80deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 58%, #000 59%, #000 70%, transparent 71%); }
.report { width: 132px; height: 88px; border-radius: 8px; background: #e7ecf2; color: #263240; font-size: 22px; font-weight: 700;
  display: flex; align-items: flex-end; padding: 0 0 10px 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
#vault { left: 960px; top: 830px; width: 520px; height: 110px; border-radius: 16px; border: 1px solid rgba(127, 220, 205, 0.6);
  background: rgba(127, 220, 205, 0.06); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; color: var(--mint); letter-spacing: 0.2em; }

/* ── S4c 延續 ── */
#yearsStage { perspective: 1600px; }
.year { width: 360px; height: 360px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.035);
  display: flex; flex-direction: column; align-items: center; padding-top: 22px; transform-style: preserve-3d; }
.year .y { font-size: 40px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); margin-bottom: 26px; }
.year .row { position: relative; width: 290px; height: 30px; border-radius: 7px; background: rgba(79, 195, 247, 0.28); margin-bottom: 14px; opacity: 0; }
.year .row .fx { position: absolute; inset: 0; border-radius: 7px; background: var(--amber); box-shadow: 0 0 20px rgba(232, 169, 92, 0.55); opacity: 0; }
.beam { width: 300px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, #bfeaff); box-shadow: 0 0 26px rgba(79, 195, 247, 0.9); opacity: 0; }

/* ── S4d 報告 ── */
#docFrame { left: 960px; top: 520px; width: 860px; height: 600px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); overflow: hidden; }
.chapter { width: 740px; height: 50px; border-radius: 9px; background: rgba(79, 195, 247, 0.12); color: var(--text); font-size: 28px;
  display: flex; align-items: center; padding-left: 22px; white-space: nowrap; }
#scanLine { left: 960px; top: 230px; width: 860px; height: 3px; background: #bfeaff; box-shadow: 0 0 24px 6px rgba(79, 195, 247, 0.7); opacity: 0; }
#seal { left: 1300px; top: 770px; font-size: 48px; font-weight: 700; color: var(--mint); border: 4px solid var(--mint); border-radius: 14px;
  padding: 6px 26px; letter-spacing: 0.32em; white-space: nowrap; box-shadow: 0 0 30px rgba(127, 220, 205, 0.35); }

/* ── S5 信任 ── */
#perimeter { left: 960px; top: 430px; width: 760px; height: 440px; border-radius: 28px; border: 2px solid rgba(127, 220, 205, 0.55);
  box-shadow: 0 0 40px rgba(127, 220, 205, 0.15) inset, 0 0 40px rgba(127, 220, 205, 0.12); }
.rack { width: 150px; height: 250px; border-radius: 12px; border: 1px solid rgba(79, 195, 247, 0.6); background: rgba(79, 195, 247, 0.05);
  display: flex; flex-direction: column; gap: 12px; padding: 18px 14px; }
.rack i { display: block; height: 22px; border-radius: 5px; background: rgba(79, 195, 247, 0.22); }
.rack i.led { background: linear-gradient(90deg, rgba(79, 195, 247, 0.22) 80%, var(--mint) 80% 90%, rgba(79, 195, 247, 0.22) 90%); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(79, 195, 247, 0.9); }
#lock { left: 960px; top: 195px; width: 96px; height: 120px; }
#lockBody { position: absolute; left: 0; bottom: 0; width: 96px; height: 72px; border-radius: 12px; background: var(--mint); box-shadow: 0 0 30px rgba(127, 220, 205, 0.6); }
#lockShackle { position: absolute; left: 18px; top: 0; width: 60px; height: 70px; border: 9px solid var(--mint); border-bottom: none; border-radius: 30px 30px 0 0; }
.log { font-family: var(--mono); font-size: 25px; color: var(--mint); white-space: nowrap; }
.log b { color: var(--text); font-weight: 500; }
.log em { font-style: normal; color: var(--muted); }

/* ── 真畫面：玻璃面板、聚光、括號、HUD ── */
.panel {
  overflow: hidden; border-radius: 16px; background: #0b1118; border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(79, 195, 247, 0.08), 0 0 60px rgba(79, 195, 247, 0.12);
  transform-style: preserve-3d;
}
.panel .shot { position: absolute; display: block; max-width: none; }
.panel .spot { position: absolute; inset: 0; pointer-events: none; }
.brk { position: absolute; width: 26px; height: 26px; border: 3px solid var(--accent); box-shadow: 0 0 12px rgba(79, 195, 247, 0.7); }
.brk.tl { border-right: none; border-bottom: none; } .brk.tr { border-left: none; border-bottom: none; }
.brk.bl { border-right: none; border-top: none; }   .brk.br { border-left: none; border-top: none; }
.revealLine { position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #dff6ff; box-shadow: 0 0 24px 8px rgba(79, 195, 247, 0.8); }
.hud {
  position: absolute; font-family: var(--mono); font-size: 24px; color: #dff6ff; letter-spacing: 0.06em; white-space: nowrap;
  padding: 8px 16px; border: 1px solid rgba(79, 195, 247, 0.6); background: rgba(5, 10, 16, 0.78); border-radius: 6px;
}
.hud .ch { display: inline-block; white-space: pre; }
.heroPanel { border-color: rgba(79, 195, 247, 0.5); box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 0 90px rgba(79, 195, 247, 0.28); }
.heroGlow { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(79, 195, 247, 0.12), transparent 40%, transparent 70%, rgba(79, 195, 247, 0.18)); pointer-events: none; }
.montagePanel { border-color: rgba(255, 255, 255, 0.25); }

/* ── 直接開檔的簡易播放器 ── */
#player { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: #11161c; border-top: 1px solid #222a33; display: flex; align-items: center; gap: 14px; padding: 0 16px; font-family: var(--font); font-size: 13px; color: #c9d3dd; z-index: 99; }
#player button { background: #1b232c; color: #e8f0f7; border: 1px solid #2c3742; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-family: var(--font); }
#player .time { font-family: var(--mono); min-width: 110px; text-align: right; }
#player input { flex: 1; accent-color: var(--accent); }