:root {
  /* Layout: full-bleed globe in a dark sky; four floating instrument panels pinned to the corners. */
  --space: #04070c;
  --ink: #e9edf2;
  --gmuted: #94a0b0;
  --faint: #626d7c;
  --panel: rgba(11, 16, 24, 0.82);
  --panel-solid: #0e141d;
  --gline: rgba(225, 235, 255, 0.11);
  --brass: #d6b06a;
  --brass-soft: rgba(214, 176, 106, 0.16);
  --on-brass: #1b1407;
  --display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--space); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
canvas { position: fixed; inset: 0; display: block; }
#fg { touch-action: none; cursor: grab; }
#fg.dragging { cursor: grabbing; }

.hud {
  position: fixed; inset: 0; pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "tl . tr" ". . ." "bl . br";
  gap: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(var(--hdr, 0px) + 12px) max(16px, env(safe-area-inset-bottom, 0px));
}
.hud button, .hud input, .hud label, .panel { pointer-events: auto; }
.tl { grid-area: tl; display: grid; gap: 10px; align-content: start; min-width: 0; }
.tr { grid-area: tr; display: grid; justify-items: end; align-content: start; gap: 8px; }
.bl { grid-area: bl; align-self: end; min-width: 0; }
.br { grid-area: br; align-self: end; display: grid; gap: 6px; }

.panel {
  background: var(--panel); border: 1px solid var(--gline); border-radius: 10px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.g-brand { display: flex; gap: 10px; align-items: center; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.g-brand svg { flex: none; }
.g-brand h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.2em; line-height: 1.15; }
.g-brand p { margin: 3px 0 0; font-size: 12px; color: var(--gmuted); letter-spacing: 0.04em; }

.search { position: relative; pointer-events: auto; }
.search svg { position: absolute; left: 12px; top: 12px; pointer-events: none; color: var(--gmuted); }
.search input {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px 0 36px;
  font: 14px var(--ui); color: var(--ink);
  background: var(--panel); border: 1px solid var(--gline); border-radius: 9px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.search input::placeholder { color: var(--faint); }
.search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.results {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 5; margin: 0; padding: 4px; list-style: none;
  background: var(--panel-solid); border: 1px solid var(--gline); border-radius: 9px;
  max-height: min(56vh, 380px); overflow: auto; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.results li { margin: 0; }
.results button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 7px 10px; border-radius: 6px;
}
.results li[aria-selected="true"] button, .results button:hover { background: var(--brass-soft); }
.res-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-sub { grid-column: 1; font-size: 12px; color: var(--gmuted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-kind {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 11px; color: var(--brass); border: 1px solid rgba(214, 176, 106, 0.38); border-radius: 4px; padding: 1px 6px;
}
.results .empty { padding: 10px; font-size: 13px; color: var(--gmuted); }

.g-card { position: relative; padding: 14px 16px 14px; }
.g-card .eyebrow { font-size: 11px; letter-spacing: 0.16em; color: var(--brass); }
.g-card h2 { margin: 4px 36px 0 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.25; text-wrap: balance; }
.g-card .en { margin-top: 2px; font-size: 12.5px; color: var(--gmuted); }
.g-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 12px 0 12px; font-size: 13px; }
.g-card dt { color: var(--gmuted); }
.g-card dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.g-card .coord { font-family: var(--mono); font-size: 12.5px; }
.g-card .g-src { font-size: 11px; color: var(--faint); margin: 0 0 10px; }
.g-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.g-btn {
  all: unset; cursor: pointer; font-size: 12.5px; padding: 6px 11px; border-radius: 6px;
  border: 1px solid var(--gline); color: var(--ink); background: rgba(255, 255, 255, 0.04);
}
.g-btn:hover { border-color: rgba(214, 176, 106, 0.5); }
.g-btn:focus-visible, .x:focus-visible, .ctl:focus-visible, .g-seg button:focus-visible, .results button:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.x { all: unset; position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; color: var(--gmuted); }
.x:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.layers { box-sizing: border-box; width: 236px; padding: 12px; }
.layers h3 { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--gmuted); }
.g-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.g-seg button { all: unset; cursor: pointer; text-align: center; height: 30px; line-height: 30px; border-radius: 6px; font-size: 13px; color: var(--gmuted); }
.g-seg button[aria-pressed="true"] { background: var(--brass); color: var(--on-brass); font-weight: 600; }
.g-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.layer-list { display: grid; gap: 1px; margin: 12px 0 0; }
.layer { display: grid; grid-template-columns: 16px 1fr 26px; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.layer:hover { background: rgba(255, 255, 255, 0.045); }
.layer input { margin: 0; width: 15px; height: 15px; accent-color: var(--brass); }
.layer svg { justify-self: end; }
.note { margin: 10px 2px 0; font-size: 11px; line-height: 1.55; color: var(--faint); }
.note b { font-weight: 500; color: var(--gmuted); }
#layersBtn { display: none; }

.readout { box-sizing: border-box; padding: 10px 12px; display: grid; gap: 7px; font-family: var(--mono); font-size: 12px; max-width: 100%; }
.scale { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.scale .bar { height: 6px; border: 1.5px solid var(--ink); border-top: 0; box-sizing: border-box; transition: width 0.12s; }
.scale .km { color: var(--ink); }
.scale .ratio { color: var(--gmuted); }
#coords { color: var(--gmuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#coords .place { font-family: var(--ui); color: var(--ink); }

.ctl {
  all: unset; cursor: pointer; box-sizing: border-box; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--gline); border-radius: 9px; color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ctl:hover { border-color: rgba(214, 176, 106, 0.55); color: var(--brass); }
.ctl-group { display: grid; gap: 0; border-radius: 9px; overflow: hidden; }
.ctl-group .ctl { border-radius: 0; }
.ctl-group .ctl + .ctl { border-top: 0; }
.ctl-group .ctl:first-child { border-radius: 9px 9px 0 0; }
.ctl-group .ctl:last-child { border-radius: 0 0 9px 9px; }

.g-loading {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 13px; color: var(--gmuted); letter-spacing: 0.08em; transition: opacity 0.5s;
}
.g-loading div { display: grid; justify-items: center; gap: 14px; }
.g-loading i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(214, 176, 106, 0.2); border-top-color: var(--brass); animation: spin 1s linear infinite; }
.g-loading.done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g-loading i { animation: none; } .scale .bar { transition: none; } }

@media (max-width: 680px) {
  .hud { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tl tr" ". ." "bl br"; gap: 8px; }
  .g-brand p { display: none; }
  .g-brand h1 { font-size: 19px; }
  #layersBtn { display: grid; }
  .layers { position: absolute; top: 48px; right: 0; z-index: 6; }
  .tr { position: relative; }
  .g-card {
    position: fixed; z-index: 4;
    left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 96px);
    max-height: 46vh; overflow: auto;
  }
  .readout { font-size: 11px; }
}

/* ---- 舆图站：站点顶栏（style.css）浮在地球上 ---- */
html, body { line-height: normal; }
body.globe-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: rgba(8, 11, 16, .72); }
body.globe-page .site-header .hsearch { display: none; }
body.globe-page .g-loading { top: var(--hdr, 0px); }

/* 指北针、2D / 3D 按钮 */
#compassIcon { transition: none; }
#compass.on { color: var(--brass); border-color: rgba(214, 176, 106, 0.55); }
#tilt span { font: 600 12.5px var(--ui); letter-spacing: 0.04em; }

/* 点地名弹的气泡：left / top 由 JS 定在地点上，自己往上挪（--ax 是小三角相对中心的偏移） */
.g-bubble {
  position: fixed; left: 0; top: 0; z-index: 8; box-sizing: border-box; width: min(300px, 80vw);
  padding: 12px 14px 12px; transform: translate(-50%, calc(-100% - 32px)); font-size: 13px; line-height: 1.6;
}
.g-bubble.below { transform: translate(-50%, 14px); }
.g-bubble.off { visibility: hidden; }
.g-bubble::after {
  content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--panel-solid); border-right: 1px solid var(--gline); border-bottom: 1px solid var(--gline); transform: rotate(45deg);
}
.g-bubble.below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.g-bubble h3 { margin: 0 26px 2px 0; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; }
.g-bubble .sub { margin: 0 0 8px; color: var(--gmuted); font-size: 12px; }
.g-bubble .fig img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.g-bubble .desc p { margin: 0 0 6px; }
.g-bubble .cr { font-size: 10.5px; color: var(--faint); margin: 3px 0 8px; overflow-wrap: anywhere; }
.g-bubble .cr a, .g-bubble .desc a { color: var(--gmuted); text-decoration: underline; text-underline-offset: 2px; }
.g-bubble .wait { color: var(--faint); font-size: 12px; }
.g-bubble .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.g-bubble .x { position: absolute; top: 9px; right: 9px; }