/* 三维场景中的地名、悬停标注和聚合点。 */
html,body{margin:0;height:100%;background:#04060a;overflow:hidden}
  canvas{display:block}

  /* ---------- 地图地名：只用文字颜色、字号和字重区分 ---------- */
  #labels{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
  #labels .anno{
    position:absolute;left:0;top:0;height:24px;padding:0 4px;
    border:0;background:transparent;pointer-events:auto;
    font-family:"Inter","Noto Sans SC",system-ui,sans-serif;
    font-weight:620;letter-spacing:.025em;white-space:nowrap;
    opacity:0;transition:opacity .18s linear;
    text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85);
    will-change:transform;
  }
  #labels [data-kind="mountain"]{color:#efddb0}
  #labels [data-kind="snow"]{color:#eff6f7}
  #labels [data-kind="meadow"]{color:#d2e5ad}
  #labels [data-kind="center"]{color:#d5eafa;font-weight:720}
  #labels [data-kind="city"]{color:#dcecf3}
  #labels [data-kind="region"]{color:#bdd4aa}
  body[data-map-mode="city"] #labels .anno:not([data-kind="city"]),
  body:not([data-map-mode="city"]) #labels [data-kind="city"]{display:none}
  #labels [data-kind="transfer"]{color:#9ac6e4;font-weight:540}
  #labels :is([data-kind="start"],[data-kind="finish"],[data-kind="start-finish"]){color:#a3ece9}
  #labels .anno:is(:hover,:focus-visible){color:#fff;text-decoration:underline}

  /* ---------- 悬停标注的定位与基础排版 ---------- */
  #tip{
    position:fixed;left:0;top:0;z-index:8;pointer-events:none;
    opacity:0;transition:opacity .22s ease;
    font-family:"Inter","Noto Sans SC",system-ui,sans-serif;
  }
  #tip.on{opacity:1}
  #tip .anchor{
    position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;
    border-radius:50%;background:#8ce8ff;box-shadow:0 0 12px #8ce8ff;
  }
  #tip .body{
    position:absolute;left:0;top:0;
    padding-left:11px;border-left:1px solid rgba(140,232,255,.5);
    white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.9);
  }
  #tip .an-name{margin-bottom:5px;font-size:15px;font-weight:600;letter-spacing:.04em;color:#f2fbff}
  #tip .an-diff{
    font-size:10px;letter-spacing:.1em;padding:1px 5px;border-radius:2px;
    background:rgba(255,255,255,.1);color:#dfeef7;
  }
  #tip .an-diff.d-easy{background:rgba(74,222,128,.2);color:#8df0b4}
  #tip .an-diff.d-mid{background:rgba(251,191,36,.2);color:#ffd166}
  #tip .an-diff.d-hard{background:rgba(239,68,68,.22);color:#ff9b9b}
  #tip .an-row{
    display:grid;grid-template-columns:5em max-content;align-items:baseline;gap:6px;
    font-size:11px;letter-spacing:.12em;line-height:1.75;
    color:#bed4de;
  }
  #tip .an-row b{
    font-weight:500;color:#e9f7ff;letter-spacing:.04em;
    font-variant-numeric:tabular-nums;
  }
  #tip .an-photo .an-row{grid-template-columns:6em max-content}

  /* ---------- 路线聚合 ---------- */
  #clusters{position:fixed;inset:0;pointer-events:none;z-index:6}
  .cluster{
    position:absolute;transform:translate(-50%,-50%);
    min-width:26px;height:26px;padding:0 7px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;gap:3px;
    font:600 11px/1 "Inter","Noto Sans SC",system-ui,sans-serif;letter-spacing:.04em;
    color:#04121b;background:rgba(150,236,255,.94);
    box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 18px rgba(140,232,255,.55);
    pointer-events:auto;cursor:pointer;
    transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s;
  }
  .cluster:hover{background:#fff;transform:translate(-50%,-50%) scale(1.12)}
  .cluster i{font-style:normal;opacity:.62;font-size:10px}

  #dbg{
    position:fixed;left:14px;bottom:12px;z-index:9;
    font:10px/1.6 ui-monospace,monospace;letter-spacing:.14em;
    color:rgba(200,230,245,.42);text-transform:uppercase;pointer-events:none;
  }
  #err{
    position:fixed;inset:0;display:none;place-content:center;text-align:center;
    background:#000;color:#ff9b9b;font:13px/1.8 ui-monospace,monospace;padding:8vw;z-index:99;
  }

/* 地图内的视角切换与路线标签。 */
.map-tools button[data-overview] { width: 46px; font-size: 12px; }
#tip .anchor { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff1ba; box-shadow: none; }
#tip .body { border-left-color: #ded3ac99; }
.terrain-credit {
  display: none; position: fixed; z-index: 10; bottom: calc(var(--footer) + 10px); left: var(--map-left);
  color: #c7c9ba; font: 10px/1.5 var(--f-sans); text-shadow: 0 1px 3px #000;
}
body[data-view="map"] .terrain-credit { display: block; }