/* Globe mode (Globe Handoff, Nov 6 2026) — overlay, handoff morph,
 * honesty chips, layer panel. Switch/chip classes reuse the flat
 * map's .lyr-sw / .lyr-state system (face.css) on purpose: one
 * state language for both stages. */
#globeOverlay{position:fixed; inset:0; z-index:2400; background:#04070f; color:#eef3ea;
  display:flex; flex-direction:column}
#globeOverlay[hidden]{display:none}
.globe-canvaswrap{position:absolute; inset:0; overflow:hidden}
.globe-canvaswrap canvas{display:block; width:100%; height:100%}
@keyframes globeIn{from{opacity:.25; transform:scale(1.22)} to{opacity:1; transform:scale(1)}}
@keyframes globeOut{from{opacity:1; transform:scale(1)} to{opacity:.2; transform:scale(.82)}}
.globe-morph-in{animation:globeIn .65s ease-out}
.globe-morph-out{animation:globeOut .38s ease-in}
.globe-top{position:relative; z-index:3; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px}
.globe-title{font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:13px; color:#cfe8c9}
.globe-back,.globe-laybtn{background:#12233d; color:#eef3ea; border:1px solid #2b4a73;
  border-radius:999px; padding:8px 14px; font-weight:700; font-size:13px; cursor:pointer}
.globe-laybtn{margin-left:auto}
.globe-hint{position:absolute; left:0; right:0; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:3;
  text-align:center; font-size:11.5px; color:#9fb6d8; padding:0 18px; pointer-events:none}
.globe-layers{position:absolute; z-index:4; top:64px; right:12px; width:min(330px,86vw);
  max-height:70vh; overflow:auto; background:rgba(10,18,32,.96); border:1px solid #24405f;
  border-radius:16px; padding:14px 16px; box-shadow:0 18px 44px rgba(0,0,0,.5)}
.globe-layers h3{margin:0 0 8px; font-size:15px}
.globe-lyr-row{display:flex; align-items:center; gap:9px; padding:7px 0}
.globe-dot{width:9px; height:9px; border-radius:50%; flex:none}
.globe-lyr-tx{flex:1; font-weight:600; font-size:14px}
.globe-note{margin:-2px 0 8px 18px; font-size:12px; line-height:1.45; color:#a9bedd}
#globeOverlay .lyr-state.mid{color:#FFC24B}
html[data-theme="light"] #globeOverlay .lyr-state.mid{color:#FFC24B}
.globe-card{position:absolute; z-index:4; left:12px; right:12px; bottom:calc(38px + env(safe-area-inset-bottom));
  background:rgba(10,18,32,.97); border:1px solid #24405f; border-radius:16px; padding:14px 40px 14px 16px}
.globe-card[hidden]{display:none}
.globe-card-t{font-weight:800; font-size:15px}
.globe-card-d{font-size:13px; color:#c6d4ea; margin-top:3px; line-height:1.45}
.globe-card-s{font-size:11.5px; color:#8fa8c9; margin-top:5px; text-transform:uppercase; letter-spacing:.06em}
.globe-card-x{position:absolute; top:8px; right:10px; background:none; border:0; color:#c6d4ea;
  font-size:20px; line-height:1; cursor:pointer}
.globe-btn{display:inline-flex; align-items:center; gap:6px; background:#0d2f57; color:#eaf2ff;
  border:1px solid #2b4a73; border-radius:999px; padding:7px 12px; font-weight:700; font-size:13px; cursor:pointer}
@media (prefers-reduced-motion: reduce){
  .globe-morph-in,.globe-morph-out{animation:none}
}