/* ============================================================
   黃埔軍校編年史 · 地圖裝飾層（羅盤 / 比例尺 / 圖例 / 聲明 / 南海附圖）
   均為螢幕固定疊加，不隨鏡頭平移縮放
   ============================================================ */

.deco{ position:absolute; z-index:30; pointer-events:none; }

/* 羅盤（移至右上，右下角整體讓給圖例與高程色階） */
.deco-compass{ right:24px; top:74px; opacity:.9; filter:drop-shadow(0 3px 6px rgba(40,28,16,.3)); }

/* 比例尺 */
.deco-scale{ left:26px; bottom:140px; opacity:.85; }
.deco-scale .scale-line{ display:flex; height:7px; border:1px solid rgba(60,44,28,.6); border-top:none; }
.deco-scale .scale-line span{ flex:1; border-right:1px solid rgba(60,44,28,.6); }
.deco-scale .scale-line span:last-child{ border-right:none; }
.deco-scale .scale-label{ margin-top:5px; font-size:11px; letter-spacing:.12em; color:var(--ink-2); }
.deco-scale .scale-label i{ font-style:normal; color:var(--ink-3); font-size:10px; }

/* 圖例（圖例 + 地形高程色階合併，置於最右下角） */
.deco-legend{
  right:10px; bottom:10px; width:178px;
  background:rgba(217,210,180,.86); border:1px solid var(--line);
  padding:7px 10px 8px; font-size:10.5px; letter-spacing:.07em; color:var(--ink-2);
  box-shadow:0 3px 12px rgba(60,42,24,.16);
}
.deco-legend .legend-title{ font-size:10px; letter-spacing:.2em; color:var(--ink-3); margin-bottom:5px; border-bottom:1px solid var(--line-soft); padding-bottom:4px; }
.deco-legend .legend-row{ display:flex; align-items:center; gap:7px; margin:3px 0; }
.deco-legend .lg-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.deco-legend .lg-dot.lg-event{ background:var(--cinnabar); }
.deco-legend .lg-dot.lg-battle{ background:var(--steel); border:1.5px solid var(--steel-deep); }
.deco-legend .lg-dot.lg-city{ background:#3a3320; }
.deco-legend .lg-line{ width:16px; height:0; border-top:3px solid var(--steel); display:inline-block; flex:none; }
.deco-legend .lg-river{ width:16px; height:0; border-top:1.6px solid #2b6f8c; display:inline-block; flex:none; }

/* 高程色階（嵌在圖例底部） */
.deco-legend .elev-block{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft); }
.deco-legend .elev-title{ font-size:9.5px; letter-spacing:.16em; color:var(--ink-3); margin-bottom:4px; }
.deco-legend .elev-bar{ width:100%; height:10px; border:1px solid rgba(71,63,44,.4); display:flex; }
.deco-legend .elev-bar i{ display:block; height:100%; }
.deco-legend .elev-scale{ display:flex; justify-content:space-between; margin-top:4px; font-size:8px; color:var(--ink-3); letter-spacing:0; }
.deco-legend .legend-credit{ margin-top:5px; padding-top:4px; border-top:1px solid var(--line-soft);
  font-size:7.5px; color:rgba(74,58,38,.6); letter-spacing:.02em; text-align:right; }

/* 合規聲明 */
.deco-disclaimer{ left:26px; bottom:22px; max-width:280px; font-size:10.5px; line-height:1.6; color:var(--ink-3); letter-spacing:.04em; background:rgba(217,210,180,.55); padding:7px 10px; border-left:2px solid var(--brass); }
.deco-disclaimer b{ color:var(--ink-2); letter-spacing:.1em; }

/* 南海諸島附圖（標準表達；合規所需，縮到最小、貼右緣、降低透明度）
   圖例佔用最右下角，附圖緊貼其上方，仍靠右不壓住圖面中心 */
.deco-nanhai{ right:5px; bottom:214px; margin-right:0; opacity:.5; }
.deco-nanhai .nh-title{ font-size:8.5px; letter-spacing:.14em; color:rgba(60,44,28,.62); text-align:center; margin-bottom:2px; }
.deco-nanhai svg{ display:block; }

@media (max-width: 880px){
  .deco-compass{ top:64px; right:14px; transform:scale(.66); transform-origin:top right; }
  .deco-scale{ bottom:120px; left:14px; transform:scale(.85); transform-origin:bottom left; }
  .deco-legend{ right:6px; bottom:6px; width:158px; transform:scale(.92); transform-origin:bottom right; font-size:10px; }
  .deco-nanhai{ bottom:196px; right:5px; opacity:.45; transform:scale(.88); transform-origin:bottom right; }
  .deco-disclaimer{ max-width:200px; font-size:9.5px; bottom:14px; left:14px; }
}