/* ============================================================
   黃埔軍校編年史 · 核心樣式
   視覺基調：黃埔官兵軍服灰綠 / 卡其 · 暖鏽紅事件 · 鋼藍進軍
   ============================================================ */

:root{
  --paper:#d9d2b4; --paper-light:#e7e0c6; --paper-dark:#c4b994;
  --ink:#2c2a20; --ink-2:#473f2c; --ink-3:#6a6043;
  --line:rgba(71,63,44,.34); --line-soft:rgba(71,63,44,.16);
  --cinnabar:#9c4a30; --cinnabar-2:#b3573a;   /* 事件暖鏽紅 */
  --brass:#a98c4f;
  --steel:#2f5d86; --steel-deep:#21456a;       /* 進軍鋼藍 */
  --olive:#5f6b46; --olive-deep:#46512f;       /* 軍服灰綠 */
  --panel:rgba(217,210,180,.965);
  --shadow:0 8px 30px rgba(40,34,20,.3);
  --serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun","MingLiU",serif;
  --kai:"Kaiti SC","STKaiti","KaiTi","楷体",var(--serif);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  background:#b3a986; color:var(--ink); font-family:var(--serif);
  -webkit-font-smoothing:antialiased; user-select:none;
}
button,input{ font-family:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }

#app{ position:relative; width:100vw; height:100vh; overflow:hidden; }

/* ---------- 題頭 ---------- */
#masthead{
  position:absolute; z-index:40; top:0; left:0;
  display:flex; align-items:center; gap:16px;
  padding:20px 26px 22px 30px; pointer-events:none;
}
.mh-seal{
  width:54px; height:54px; flex:0 0 54px;
  border:2px solid var(--cinnabar); border-radius:4px;
  color:var(--cinnabar); display:flex; align-items:center; justify-content:center;
  font-family:var(--kai); font-size:17px; font-weight:700; line-height:1.05;
  text-align:center; letter-spacing:1px; transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(156,74,48,.22); opacity:.92;
}
.mh-text h1{
  margin:0; font-size:29px; font-weight:600; letter-spacing:.20em;
  color:#33301f; text-shadow:0 1px 0 rgba(240,232,210,.7);
}
.mh-sub{ margin:4px 0 0; font-size:12.5px; letter-spacing:.24em; color:var(--ink-3); }
.mh-sub i{ font-style:normal; color:var(--cinnabar); padding:0 4px; }
.mh-era{
  margin:7px 0 0; display:inline-block; font-size:11.5px; letter-spacing:.18em;
  color:#f3ead2; background:var(--olive-deep); padding:2px 12px 3px; border-radius:1px;
  box-shadow:1px 2px 0 rgba(40,46,24,.3);
}
.mh-stats{
  margin:7px 0 0; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3);
  background:rgba(243,234,213,.55); display:inline-block; padding:2px 8px;
  border-left:2px solid var(--brass);
}

/* ---------- 地圖舞台 ---------- */
#stage{ position:absolute; inset:0 0 118px 0; overflow:hidden; }
#map{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
/* 紙紋壓暗層調淡，避免整張地形被 multiply 壓成一片灰、喪失高程對比 */
#grainOverlay{ mix-blend-mode:multiply; opacity:.22; }
#map.dragging{ cursor:grabbing; }

/* SVG 地理要素（真實 GeoJSON 邊界 + 真實地形栅格） */
#map .coast-line{ fill:none; stroke:rgba(38,30,18,.68); stroke-width:1.6; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#map .province-line{ fill:none; stroke:rgba(74,58,38,.15); stroke-width:.6; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
/* 真實高程矢量等高線：non-scaling-stroke，放大後線寬恆定、不糊 */
#map .contour{ fill:none; stroke:rgba(78,60,34,.30); stroke-width:.65;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:none; }
#map .contour.major{ stroke:rgba(70,52,28,.46); stroke-width:1; }
#map .contour.alpine{ stroke:rgba(246,242,230,.72); stroke-width:.9; }
#map .graticule{ fill:none; stroke:rgba(74,58,38,.09); stroke-width:.8; vector-effect:non-scaling-stroke; }
/* 真實河網（Natural Earth 1:10m）：幹流 → 支流 → 細流，逐級減細減淡，
   避免 90 段河網在縮小視圖下糊成一片藍色蛛網 */
#map .river{ fill:none; stroke:#2b6f8c; stroke-opacity:.92; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#map .river-major{ stroke-width:2.3; stroke-opacity:1; }
#map .river-thin{ fill:none; stroke:#3a7e95; stroke-opacity:.62; stroke-width:.9;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

/* 螢幕恆定標註（labels.js）：文字在 viewBox 下 1:1，換算到螢幕為常數 */
#map .geo-label .gl-text{
  font-family:var(--serif); fill:#2c2316;
  paint-order:stroke; stroke:rgba(244,236,212,.92); stroke-width:3px; stroke-linejoin:round;
}
#map .geo-label .gl-sub{
  font-family:var(--serif); fill:var(--ink-3);
  paint-order:stroke; stroke:rgba(244,236,212,.9); stroke-width:2.4px; stroke-linejoin:round;
}
#map .gl-dot{ fill:#3a3320; stroke:rgba(246,238,218,.95); stroke-width:1.2; }
#map .gl-dot-major{ fill:var(--cinnabar); }
#map .geo-label.gl-city-major .gl-text{ font-weight:600; stroke-width:3.4px; }
#map .geo-label.gl-culture .gl-text{
  font-family:var(--kai); fill:rgba(70,52,30,.5); letter-spacing:.34em;
  stroke:rgba(244,236,212,.5); stroke-width:2.6px;
}
#map .geo-label.gl-sea .gl-text{
  font-family:var(--kai); fill:rgba(26,56,70,.8); letter-spacing:.3em;
  stroke:rgba(210,228,230,.6);
}
#map .geo-label.gl-range .gl-text{ fill:rgba(70,52,30,.9); letter-spacing:.14em; }
#map .geo-label.gl-peak .gl-text{ fill:rgba(60,44,26,.94); letter-spacing:.04em; }
#map .geo-label.gl-river .gl-text{ fill:#2b6f8c; letter-spacing:.12em; }
#map .geo-label.gl-grat .gl-text{ fill:rgba(74,58,38,.52); stroke:none; letter-spacing:.06em; }

/* 事件標牌（SVG · 螢幕恆定 · 四角如意雲紋 · 雙層匾框） */
#map .evt-pin{ transition:opacity .42s ease; }
#map .evt-core{ fill:var(--cinnabar); stroke:#f4ead2; stroke-width:2.2; }
#map .evt-pulse{ animation:evtPulse 2.4s ease-out infinite; transform-box:fill-box; transform-origin:center; fill:var(--cinnabar); }
@keyframes evtPulse{ 0%{ r:5; opacity:.85 } 100%{ r:30; opacity:0 } }
#map .evt-pin .pin-frame{ fill:#f1e7cd; stroke:#6f5a2e; stroke-width:1.6; }
#map .evt-pin .pin-tail{ fill:#f1e7cd; stroke:#6f5a2e; stroke-width:1.4; }
#map .evt-pin .pin-inner{ fill:none; stroke:rgba(169,140,79,.8); stroke-width:.8; }
#map .evt-pin .pin-rule{ fill:none; stroke:rgba(169,140,79,.65); stroke-width:.8; }
#map .evt-pin .pin-crown{ fill:var(--brass); stroke:#6f5a2e; stroke-width:.5; }
#map .evt-pin .pin-cloud{ fill:none; stroke:#8a6c39; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
#map .evt-pin .pin-cloud-dot{ fill:#8a6c39; }
#map .evt-pin.active .pin-frame,
#map .evt-pin.active .pin-tail{ stroke:var(--cinnabar); stroke-width:2; }
#map .evt-pin.active .pin-cloud{ stroke:var(--cinnabar); }
#map .evt-pin.active .pin-cloud-dot{ fill:var(--cinnabar); }
#map .evt-pin.active .pin-crown{ fill:var(--cinnabar); }
/* 收牌：朗讀結束後淡出並由 ui.js 從 DOM 移除，不留半透明殘影 */
#map .evt-pin.faded{ opacity:0; pointer-events:none; }
#map .pin-date{ fill:var(--ink-3); font-size:11px; letter-spacing:.14em;
  paint-order:stroke; stroke:rgba(244,236,212,.94); stroke-width:2.6px; }
#map .pin-title{ fill:#2b2018; font-size:16.5px; font-weight:700; letter-spacing:.06em;
  paint-order:stroke; stroke:rgba(244,236,212,.96); stroke-width:3.4px; }
#map .pin-sub{ fill:var(--ink-3); font-size:10.5px; letter-spacing:.1em;
  paint-order:stroke; stroke:rgba(244,236,212,.92); stroke-width:2.4px; }
#map .evt-pin:hover .pin-frame,
#map .evt-pin:hover .pin-tail{ fill:#fbeecf; }

/* 進軍路線 */
#map .route-shadow{ fill:none; stroke:rgba(246,236,212,.85); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#map .route-line{ fill:none; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#map .route-dash{ fill:none; stroke-width:1.2; stroke-dasharray:2 7; opacity:.85; vector-effect:non-scaling-stroke; }
#map .route-name{ font-family:var(--serif); font-size:12.5px; letter-spacing:.12em; paint-order:stroke; stroke:rgba(244,236,212,.92); stroke-width:4px; stroke-linejoin:round; }
/* 戰役節點 */
#map .battle-ring{ fill:none; stroke-width:1.8; vector-effect:non-scaling-stroke; }
#map .battle-core{ stroke:#f4ead2; stroke-width:1.8; vector-effect:non-scaling-stroke; }
/* 同地點多場戰役散開時的引線：細、虛、低對比，不搶戰役節點 */
#map .battle-lead{ stroke-width:1; stroke-dasharray:2 3; opacity:.55; vector-effect:non-scaling-stroke; }
#map .battle-name{ font-family:var(--serif); font-size:13px; font-weight:600; paint-order:stroke; stroke:rgba(244,236,212,.94); stroke-width:4px; stroke-linejoin:round; }
/* 戰役節點只建立一次（見 routes.js 增量更新），入場改為平緩淡入，
   不再因逐日重建 DOM 而反覆重播造成閃爍。 */
#map .battle-appear{ animation:battleFade 1.2s ease-out both; transform-box:fill-box; transform-origin:center; }
@keyframes battleFade{ 0%{ transform:scale(.78); opacity:0 } 45%{ opacity:1 } 100%{ transform:scale(1); opacity:1 } }
#map .campaign-battles .battle-name{ font-size:14px; }

/* ---------- 鏡頭 HUD ---------- */
.camera-hud{
  position:absolute; z-index:35; top:22px; right:24px;
  display:flex; align-items:center; gap:9px;
  background:rgba(217,210,180,.92); border:1px solid var(--line);
  padding:7px 12px; font-size:11.5px; letter-spacing:.12em; color:var(--ink-2);
  box-shadow:0 3px 12px rgba(60,42,24,.16);
}
.ch-dot{ width:7px; height:7px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 3px rgba(95,107,70,.2); }
.camera-hud.manual .ch-dot{ background:var(--cinnabar); box-shadow:0 0 0 3px rgba(156,74,48,.2); }
#resumeAutoBtn{ border:1px solid var(--cinnabar); background:transparent; color:var(--cinnabar); font-size:10.5px; padding:3px 9px; letter-spacing:.1em; }
#resumeAutoBtn:hover{ background:var(--cinnabar); color:#fff; }

/* ---------- 黃埔校歌控件 ---------- */
.anthem-bar{
  position:absolute; z-index:44; top:64px; right:24px;
  display:flex; align-items:center; gap:8px;
  max-width:calc(100vw - 48px); flex-wrap:wrap; justify-content:flex-end;
  background:rgba(217,210,180,.92); border:1px solid var(--line);
  padding:6px 10px; box-shadow:0 3px 12px rgba(60,42,24,.16);
}
.anthem-bar button{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  font-size:11px; letter-spacing:.08em; padding:4px 9px;
}
.anthem-bar button:hover{ border-color:var(--cinnabar); color:var(--cinnabar); }
.anthem-bar button:disabled{ opacity:.5; cursor:not-allowed; }
.anthem-bar #anthemToggle.on{ background:var(--olive-deep); color:#f3ead2; border-color:var(--olive-deep); }
.anthem-bar #sfxToggle{ font-size:10px; color:var(--ink-3); border-style:dashed; }
.anthem-bar #sfxToggle.on{ border-style:solid; color:var(--olive-deep); border-color:var(--olive-deep); }
.anthem-bar #ttsToggle{ font-size:10px; color:var(--ink-3); border-style:dashed; }
.anthem-bar #ttsToggle.on{ border-style:solid; color:var(--olive-deep); border-color:var(--olive-deep); }
.anthem-bar #anthemInfoBtn{ width:26px; padding:4px 0; }
.anthem-bar #anthemSourceBtn{ font-size:10px; color:var(--ink-3); border-style:dashed; }
.anthem-bar input[type=range]{ width:74px; accent-color:var(--olive-deep); }
.ai-note code{ font-family:monospace; font-size:10px; background:rgba(120,100,60,.14); padding:1px 4px; }
.anthem-info{
  position:absolute; z-index:48; top:104px; right:24px; width:min(340px,86vw);
  background:var(--panel); border:1px solid #6f5a2e; padding:18px 20px 20px;
  box-shadow:0 8px 28px rgba(40,28,16,.32); max-height:70vh; overflow-y:auto;
}
.ai-head{ font-size:17px; letter-spacing:.14em; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--ink); }
.ai-head button{ border:1px solid var(--line); background:transparent; width:26px; height:26px; font-size:18px; color:var(--ink-2); }
.ai-formal{ font-size:12px; color:var(--cinnabar); letter-spacing:.08em; margin:0 0 6px; }
.ai-credit{ font-size:11px; color:var(--ink-3); margin:0 0 12px; }
.ai-lyrics{ font-family:var(--kai); font-size:14px; line-height:2; color:#3a2c20; padding:10px 14px; background:rgba(255,250,235,.6); border-left:3px solid var(--cinnabar); }
.ai-note{ font-size:10.5px; line-height:1.85; color:var(--ink-3); margin:14px 0 0; }
.ai-note b{ color:var(--cinnabar); }

/* 軍事行動字幕 */
.route-caption{
  position:absolute; z-index:34; left:50%; top:18px; transform:translateX(-50%);
  background:rgba(44,42,30,.92); color:#f0e3c6; padding:8px 20px; font-size:12.5px; letter-spacing:.12em;
  border-left:3px solid var(--steel); border-right:3px solid var(--steel);
  box-shadow:0 6px 20px rgba(40,28,16,.3); white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis;
}
.route-caption b{ color:#e3c08a; font-weight:600; }
.route-caption i{ font-style:normal; opacity:.6; padding:0 8px; }

/* ---------- 事件詳情面板 ---------- */
#detailPanel{
  position:absolute; z-index:45; top:0; right:0; bottom:0;
  width:min(420px, 40vw); background:var(--panel);
  border-left:2px solid #6f5a2e; box-shadow:-14px 0 40px rgba(48,34,20,.3);
  padding:34px 30px 30px; overflow-y:auto;
  animation:panelIn .36s cubic-bezier(.2,.9,.3,1) both; user-select:text;
}
@keyframes panelIn{ from{ transform:translateX(100%); opacity:.4 } to{ transform:translateX(0); opacity:1 } }
#detailPanel::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,var(--cinnabar) 0 14px,transparent 14px 20px); opacity:.75; }
#detailClose{ position:absolute; top:16px; right:18px; width:30px; height:30px; border:1px solid var(--line); background:transparent; color:var(--ink-2); font-size:21px; line-height:1; }
#detailClose:hover{ background:var(--cinnabar); color:#fff; border-color:var(--cinnabar); }
.dp-kicker{ font-size:11px; letter-spacing:.2em; color:var(--cinnabar); margin-bottom:10px; }
#dpTitle{ margin:0 0 12px; font-size:25px; font-weight:600; line-height:1.4; letter-spacing:.04em; }
.dp-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; }
.dp-meta i{ width:3px; height:3px; border-radius:50%; background:var(--brass); }
.dp-summary{ margin:18px 0 0; font-family:var(--kai); font-size:16px; line-height:1.85; color:#3a2c20; padding-left:14px; border-left:3px solid var(--cinnabar); }
.dp-rule{ height:1px; margin:22px 0 18px; background:linear-gradient(90deg,var(--line),transparent); }
.dp-body{ font-size:14px; line-height:2.05; color:var(--ink-2); text-align:justify; }
/* 詳情開啟時的時間軸凍結提示 */
.dp-paused{
  display:inline-block; margin-top:12px; padding:4px 10px;
  font-size:10.5px; letter-spacing:.1em; color:#f0e3c6;
  background:rgba(63,74,48,.88); border-left:2px solid var(--brass);
}
/* 史料影像圖集 */
.dp-photos{ margin-top:22px; }
.dp-photos h3, .dp-figures h3, .dp-sources h3{ font-size:11.5px; letter-spacing:.2em; color:var(--ink-3); font-weight:600; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); }
.dp-photo{ margin-bottom:14px; border:1px solid var(--line); background:rgba(255,250,235,.55); }
.dp-photo img{ display:block; width:100%; max-height:230px; object-fit:cover; background:#d8cdb4; filter:sepia(.16) contrast(1.03); }
/* 證書、歌譜等文獻為寬幅資料，完整顯示不可裁切 */
.dp-photo-doc img{ object-fit:contain; max-height:300px; background:#eee6cf; filter:none; }
.dp-photo .ph-tag{ font-size:9.5px; letter-spacing:.08em; padding:5px 9px 0; color:var(--ink-3); }
.dp-photo .ph-tag-related{ color:#8c3d24; font-weight:600; }
.dp-photo .ph-cap{ font-size:11.5px; line-height:1.65; padding:7px 9px 3px; color:var(--ink-2); }
.dp-photo .ph-src{ font-size:10px; line-height:1.6; padding:0 9px 8px; color:var(--ink-3); word-break:break-word; }
.dp-photo .ph-src a{ color:var(--ink-3); text-decoration:underline dotted; }
.dp-photos .ph-note{ font-size:10px; color:var(--ink-3); font-style:italic; line-height:1.75; margin-top:10px; }
.dp-photo-empty{ font-size:11px; color:var(--ink-3); font-style:italic; }
.dp-figures{ margin-top:22px; }
.fig-chip{ display:inline-flex; flex-direction:column; gap:2px; border:1px solid var(--line); background:rgba(255,250,235,.6); padding:6px 10px; margin:0 6px 7px 0; font-size:12px; }
.fig-chip b{ font-weight:600; color:var(--ink); }
.fig-chip small{ font-size:10px; color:var(--ink-3); }
.dp-sources{ margin-top:22px; }
.dp-sources li{ font-size:11px; line-height:1.8; color:var(--ink-3); margin-bottom:4px; }
.dp-sources ul{ margin:0; padding-left:18px; }
.dp-note{ font-size:10.5px; color:var(--ink-3); margin-top:14px; font-style:italic; }

/* ---------- 人物譜 ---------- */
#figureToggle{
  position:absolute; z-index:36; left:26px; bottom:22px;
  writing-mode:vertical-rl; letter-spacing:.28em;
  background:rgba(44,42,30,.9); color:#f0e3c6; border:none;
  padding:14px 9px; font-size:12px; box-shadow:0 4px 14px rgba(40,28,16,.28);
}
#figureToggle:hover{ background:var(--olive-deep); }
#figurePanel{
  position:absolute; z-index:46; left:0; top:0; bottom:0;
  width:min(340px, 34vw); background:var(--panel);
  border-right:2px solid #6f5a2e; box-shadow:14px 0 40px rgba(48,34,20,.3);
  padding:26px 24px; overflow-y:auto;
}
.fp-head{ font-size:19px; letter-spacing:.16em; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.fp-head button{ border:1px solid var(--line); background:transparent; font-size:20px; width:28px; height:28px; color:var(--ink-2); }
#figureSearch{ width:100%; padding:8px 10px; border:1px solid var(--line); background:rgba(255,250,235,.7); font-size:12.5px; color:var(--ink); outline:none; margin-bottom:14px; }
#figureSearch:focus{ border-color:var(--cinnabar); }
.fig-item{ border-bottom:1px solid var(--line-soft); padding:11px 2px; }
.fig-item b{ font-size:14px; letter-spacing:.08em; }
.fig-item .fi-role{ font-size:11px; color:var(--cinnabar); margin:3px 0; }
.fig-item .fi-note{ font-size:11.5px; color:var(--ink-3); line-height:1.7; }

/* ---------- 時間軸 ---------- */
#timelineBar{
  position:absolute; z-index:42; left:0; right:0; bottom:0; height:118px;
  display:flex; align-items:center; gap:22px; padding:0 26px;
  background:linear-gradient(180deg, rgba(95,107,70,0), rgba(60,66,42,.55) 30%, rgba(34,36,22,.85));
  color:#f0e3c6;
}
.tl-date{ flex:0 0 210px; min-width:170px; }
.tl-date-main{ font-size:21px; font-weight:600; letter-spacing:.10em; color:#f6ecd2; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.tl-date-sub{ margin-top:6px; font-size:12px; letter-spacing:.12em; color:#d8c69e; }
.tl-date-sub i{ font-style:normal; color:var(--cinnabar-2); padding:0 5px; }

.tl-center{ flex:1; min-width:0; }
.tl-eras{ display:flex; height:16px; margin-bottom:7px; border:1px solid rgba(240,230,206,.25); overflow:hidden; }
.era-seg{ font-size:9.5px; color:#fff; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; opacity:.62; cursor:pointer; border-right:1px solid rgba(0,0,0,.25); transition:opacity .2s; letter-spacing:.05em; }
.era-seg:last-child{ border-right:none; }
.era-seg.active{ opacity:1; box-shadow:inset 0 -3px 0 rgba(255,255,255,.6); }
.era-seg:hover{ opacity:.92; }

.tl-track{ position:relative; height:34px; cursor:pointer; }
.tl-track-bg{ position:absolute; left:0; right:0; top:15px; height:4px; background:rgba(240,230,206,.22); border-radius:2px; }
.tl-fill{ position:absolute; left:0; top:15px; height:4px; background:linear-gradient(90deg,var(--brass),var(--cinnabar)); border-radius:2px; width:0; }
.tl-ticks{ position:absolute; left:0; right:0; top:0; height:34px; }
.tl-tick{ position:absolute; top:9px; width:2px; height:16px; transform:translateX(-1px); opacity:.85; }
.tl-cursor{ position:absolute; top:0; left:0; width:0; height:34px; transform:translateX(-1px); }
.tl-cursor-cap{ position:absolute; top:4px; left:-7px; width:14px; height:14px; border-radius:50%; background:var(--cinnabar); border:2px solid #f6ecd2; box-shadow:0 0 0 3px rgba(156,74,48,.3); }
.tl-hint{ margin-top:5px; font-size:10.5px; letter-spacing:.14em; color:rgba(216,198,158,.8); }

.tl-controls{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.ctl-plain{ width:42px; height:42px; border:1px solid rgba(240,230,206,.35); background:rgba(44,42,30,.5); color:#f0e3c6; font-size:15px; border-radius:3px; }
.ctl-plain:hover{ background:var(--olive-deep); border-color:var(--olive-deep); }
.ctl-speed{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:62px; height:42px; border:1px solid var(--brass); background:rgba(44,42,30,.5); color:#f0e3c6; border-radius:3px; line-height:1.1; }
.ctl-speed:hover{ background:rgba(169,140,79,.3); }
.ctl-speed .sp-label{ font-size:9px; letter-spacing:.2em; opacity:.8; }
.ctl-speed .sp-value{ font-size:17px; font-weight:600; color:#e3c08a; }

/* ---------- 首次手勢引導層 ----------
   覆蓋全畫面直到使用者點擊；z-index 低於 #bootError，
   資料載入失敗時錯誤提示仍能顯示（並由 app.js 直接收起本層）。 */
.start-gate{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
  background:radial-gradient(circle at 50% 42%, rgba(58,48,32,.80), rgba(26,21,15,.95));
  backdrop-filter:blur(2px);
  transition:opacity .55s ease, visibility .55s ease;
}
.start-gate.sg-leaving{ opacity:0; visibility:hidden; pointer-events:none; }
.sg-panel{
  position:relative; width:min(560px,92vw); text-align:center;
  padding:40px 44px 34px; color:var(--ink);
  background:linear-gradient(rgba(231,224,198,.975),rgba(213,205,174,.975));
  border:1px solid #6f5a2e;
  box-shadow:0 20px 64px rgba(0,0,0,.46), inset 0 0 0 5px rgba(169,140,79,.16);
  animation:sgIn .6s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes sgIn{ from{ transform:translateY(14px) scale(.985); opacity:0 } to{ transform:none; opacity:1 } }
.sg-seal{
  width:66px; height:66px; margin:0 auto 18px;
  border:2px solid var(--cinnabar); border-radius:4px;
  color:var(--cinnabar); display:flex; align-items:center; justify-content:center;
  font-family:var(--kai); font-size:20px; font-weight:700; line-height:1.05;
  letter-spacing:1px; transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px rgba(156,74,48,.22);
}
.sg-kicker{ margin:0 0 8px; font-size:12px; letter-spacing:.26em; color:var(--ink-3); }
.sg-kicker i{ font-style:normal; color:var(--cinnabar); padding:0 4px; }
#sgTitle{ margin:0; font-size:34px; font-weight:600; letter-spacing:.22em; color:#33301f; }
.sg-rule{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px auto 20px; width:72%; }
.sg-rule::before,.sg-rule::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line)); }
.sg-rule::after{ background:linear-gradient(90deg,var(--line),transparent); }
.sg-rule span{ width:7px; height:7px; transform:rotate(45deg); background:var(--brass); }
.sg-desc{ margin:0 auto 26px; font-family:var(--kai); font-size:15px; line-height:2; color:var(--ink-2); }
.sg-desc b{ color:var(--cinnabar); font-weight:600; }
.sg-start{
  border:1px solid var(--olive-deep); background:var(--olive-deep); color:#f3ead2;
  font-size:16px; letter-spacing:.18em; padding:12px 34px;
  box-shadow:2px 3px 0 rgba(40,46,24,.35);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.sg-start:hover,.sg-start:focus-visible{
  background:var(--cinnabar); border-color:var(--cinnabar);
  transform:translateY(-2px); outline:none;
}
.sg-start em{ font-style:normal; opacity:.7; padding:0 4px; }
.sg-note{ margin:16px 0 0; font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); }

/* 錯誤提示 */
#bootError{ position:absolute; z-index:99; inset:0; display:flex; align-items:center; justify-content:center; background:#2b2118; color:#f0e3c6; font-size:16px; padding:40px; text-align:center; }

/* ---------- 響應式 ---------- */
@media (max-width: 880px){
  #timelineBar{ height:104px; gap:12px; padding:0 14px; }
  .tl-date{ flex-basis:120px; min-width:110px; }
  .tl-date-main{ font-size:16px; }
  .mh-text h1{ font-size:22px; }
  #detailPanel{ width:86vw; }
  #figurePanel{ width:80vw; }
  .sg-panel{ padding:30px 24px 26px; }
  .sg-seal{ width:54px; height:54px; font-size:17px; margin-bottom:14px; }
  #sgTitle{ font-size:25px; letter-spacing:.14em; }
  .sg-desc{ font-size:13px; line-height:1.85; }
  .sg-start{ font-size:14px; padding:11px 22px; letter-spacing:.12em; }
}