/* ── globe.css local palette (6.1 colour hoist) — this file's own colours, named and in ONE
   place so the surface can be re-tinted without hunting through the rules below. ── */
:root {
  --gbtn-fg: #1b0f04;
  --gl-on-fg: #1b1304;
  --rel-war-bg: #dc4636;
  --rel-rivalry-bg: #e0904a;
  --rel-alliance-bg: #5ac86e;
  --rel-trade-bg: #5aa0dc;
  --rel-tribute-bg: #b478d2;
}

/* Globe view styles — lifted from the old self-contained /globe page, now scoped to the SPA-mounted
   .globe-stage. The shell (index.html) provides the topbar/footer + theme tokens, so the page-level
   body{overflow:hidden} and main.app-main overrides are gone; only the stage + its panels remain. */
.globe-stage{position:relative;height:calc(100dvh - var(--topbar-h,3.5rem) - 5.75rem);min-height:32.5rem;
  border:0.0625rem solid var(--border);border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.05),transparent 60%),var(--bg-deep)}
.globe-stage canvas{display:block;width:100%;height:100%}
/* Scoped to the globe stage — `.gpanel` is ALSO the app-wide generic glass-card (relative, in
   flow); a bare global rule here knocked every card out of flow (broke flex no-scroll layouts). */
.globe-stage .gpanel{position:absolute;background:rgba(23,18,12,.86);border:0.0625rem solid var(--border);
  border-radius:var(--r-xl);backdrop-filter:blur(0.5rem);box-shadow: var(--shadow-drop-md);z-index:5}
.globe-ui{top:1rem;left:1rem;padding:var(--sp-8) var(--sp-9);width:15rem}
.globe-ui h1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-modal);letter-spacing:.01em;color:var(--gold);margin:0 0 0.6875rem;line-height:1}
.globe-ui label{display:block;color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;margin:0.6875rem 0 var(--sp-2)}
.globe-ui .v{float:right;color:var(--text);font-variant-numeric:tabular-nums}
.globe-ui input[type=range]{width:100%;accent-color:var(--accent)}
.globe-ui input[type=number]{width:5.25rem;background:var(--bg);border:0.0625rem solid var(--border);color:var(--text);padding:0.3125rem 0.4375rem;border-radius:var(--r-md);font:inherit}
.globe-ui .row{display:flex;gap:var(--sp-5);align-items:center;margin-top:0.5625rem}
.globe-ui .muted{color:var(--muted);font-family:var(--font-mono);font-size: var(--fs-xs)}
.gbtn{background:var(--accent);color:var(--gbtn-fg);border:0;padding:0.4375rem var(--sp-7);border-radius:var(--r-md);
  font-family:var(--font-mono);font-weight:600;font-size: var(--fs-sm);letter-spacing:.02em;cursor:pointer;transition:filter .15s,transform .05s,border-color .15s,color .15s}
.gbtn:hover{filter:brightness(1.08)} .gbtn:active{transform:translateY(0.0625rem)}
.gbtn.ghost{background:var(--panel-2);color:var(--text);border:0.0625rem solid var(--border)}
.gbtn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.globe-meas.on{background:var(--gold);color:var(--gl-on-fg);border-color:var(--gold)}
.globe-hud{top:1rem;right:1rem;padding:0.6875rem var(--sp-9);text-align:right}
.globe-scale{font-family:var(--font-mono);font-size: var(--fs-md);letter-spacing:.05em;color:var(--gold);font-weight:600}
.globe-enterhint{color:var(--muted);font-family:var(--font-mono);font-size: var(--fs-2xs);margin-top:0.3125rem;transition:opacity .2s}
.globe-relief{margin-top:0.5625rem;text-align:right}
.globe-relief label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-6);
  font-family:var(--font-mono);font-size: var(--fs-2xs);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.globe-relief label span{color:var(--gold);text-transform:none;letter-spacing:0}
.globe-relief input[type=range]{width:100%;margin-top:var(--sp-3);accent-color:var(--gold);cursor:pointer}
/* Biome key / legend — floating glass panel on the 3D stage + a static list under the 2D preview */
.globe-stage .biome-key.floating{bottom:2.875rem;left:0.875rem;padding:var(--sp-6) var(--sp-7);max-width:20rem}
.biome-key-hl{display:flex;align-items:center;gap:0.4375rem;margin-bottom:var(--sp-5);cursor:pointer;
  font-family:var(--font-mono);font-size: var(--fs-xs);color:var(--text);letter-spacing:.02em}
.biome-key-hl input{accent-color:var(--gold);cursor:pointer}
/* bottom info bar — names the biome under the cursor */
.globe-infobar{position:absolute;left:0;right:0;bottom:0;height:2.125rem;display:flex;align-items:center;gap:var(--sp-6);
  padding:0 var(--sp-8);background:linear-gradient(to top,rgba(11,8,5,.93),rgba(11,8,5,.72));border-top:0.0625rem solid var(--border);
  backdrop-filter:blur(0.5rem);z-index:6;font-family:var(--font-mono);font-size: var(--fs-sm);pointer-events:none}
.globe-infobar .gi-sw{width:0.875rem;height:0.875rem;border-radius:var(--r-xs);border:0.0625rem solid rgba(0,0,0,.4);
  box-shadow:0 0 0 0.0625rem rgba(255,255,255,.07);flex:0 0 auto}
.globe-infobar .gi-name{color:var(--gold);font-weight:600;letter-spacing:.02em}
.globe-infobar .gi-coord{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.globe-infobar .gi-hint{color:var(--muted);letter-spacing:.03em}
.globe-infobar .gi-kind{color:var(--muted);text-transform:capitalize;letter-spacing:.02em}
.globe-infobar .gi-desc{color:var(--text);opacity:.85;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}
/* layers toggle panel (top-left, clears the relief/hud which are top-right) */
.globe-stage .globe-layers{top:1rem;left:1rem;padding:var(--sp-6) 0.8125rem;min-width:9.375rem}
.globe-layers-head{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--gold);margin-bottom:0.4375rem}
.globe-layer-row{display:flex;align-items:center;gap:0.4375rem;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text);cursor:pointer;padding:var(--sp-1) 0}
.globe-layer-row input{accent-color:var(--gold);cursor:pointer}
/* Map-lens selector: a mutually-exclusive segmented control (only one thematic raster at a time) */
.globe-lens{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-1)}
.biome-key-toggle{background:var(--panel-2);color:var(--text);border:0.0625rem solid var(--border);
  padding:var(--sp-4) 0.6875rem;border-radius:var(--r-md);font-family:var(--font-mono);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.03em;cursor:pointer;transition:border-color .15s,color .15s}
.biome-key-toggle:hover{border-color:var(--accent);color:var(--accent)}
.biome-key.floating.open .biome-key-toggle{margin-bottom:0.5625rem}
.biome-key-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-8)}
.biome-key-row{display:flex;align-items:center;gap:0.4375rem;min-width:0}
.biome-key-sw{flex:0 0 auto;width:0.8125rem;height:0.8125rem;border-radius:var(--r-xs);border:0.0625rem solid rgba(0,0,0,.4);
  box-shadow:0 0 0 0.0625rem rgba(255,255,255,.06)}
.biome-key-name{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biome-key.static .biome-key-list{margin-top:var(--sp-3)}
.globe-tileload{top:1.125rem;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:0.5625rem;
  padding:var(--sp-5) 0.9375rem var(--sp-5) var(--sp-7);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.03em;color:var(--gold)}
.globe-tileload.on{display:flex;animation:globe-loadfade .25s ease both}
.globe-tileload .ring{width:0.9375rem;height:0.9375rem;border-radius:var(--r-round);border:0.125rem solid rgba(var(--gold-rgb),.25);
  border-top-color:var(--gold);animation:globe-loadspin .8s linear infinite;flex:0 0 auto}
.globe-travel{display:none;bottom:2.875rem;left:1rem;width:17.375rem;padding:var(--sp-8) var(--sp-9)}
.globe-travel.on{display:block}
.globe-travel h2{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--sp-4)}
.globe-travel .dist{color:var(--text);font-size: var(--fs-md);margin-bottom:0.5625rem;font-weight:600}
.globe-travel .row2{display:flex;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-3) 0;border-top:0.0625rem solid var(--border-soft);font-size: var(--fs-sm)}
.globe-travel .row2 .m{color:var(--muted)} .globe-travel .row2 .t{color:var(--text);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.globe-travel .hint{color:var(--muted);font-size: var(--fs-2xs);margin-top:0.5625rem}
.globe-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;
  background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.07),transparent 62%),rgba(11,8,5,.86);
  backdrop-filter:blur(0.1875rem);animation:globe-loadfade .4s var(--ease-soft,ease) both}
.globe-load.hide{display:none}
.globe-load-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3)}
.globe-load-orb{position:relative;width:4.625rem;height:4.625rem;margin-bottom:var(--sp-8)}
.globe-load-orb::after{content:"";position:absolute;inset:1.875rem;border-radius:var(--r-round);
  background:radial-gradient(circle,var(--gold),var(--accent));box-shadow:0 0 1.125rem -0.125rem rgba(var(--accent-rgb),.8);
  animation:globe-loadpulse 1.6s ease-in-out infinite}
.globe-load-orb span{position:absolute;inset:0;border-radius:var(--r-round);border:0.125rem solid transparent}
.globe-load-orb span:nth-child(1){border-top-color:var(--accent);animation:globe-loadspin 1.1s linear infinite}
.globe-load-orb span:nth-child(2){inset:0.5625rem;border-top-color:var(--gold);border-right-color:rgba(var(--gold-rgb),.4);animation:globe-loadspin 1.6s linear infinite reverse}
.globe-load-orb span:nth-child(3){inset:1.125rem;border-bottom-color:rgba(var(--accent-rgb),.7);animation:globe-loadspin 2.1s linear infinite}
.globe-load-msg{font-family:var(--font-display);font-weight:600;font-size:var(--fs-card);color:var(--gold);line-height:1.1}
.globe-load-sub{font-family:var(--font-mono);font-size: var(--fs-xs);letter-spacing:.04em;color:var(--muted)}
.globe-load-msg.err{color:var(--accent)}
@keyframes globe-loadspin{to{transform:rotate(360deg)}}
@keyframes globe-loadpulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
@keyframes globe-loadfade{from{opacity:0}to{opacity:1}}
.globe-overlay{display:none;position:absolute;inset:0;background:rgba(11,8,5,.93);z-index:30;align-items:center;justify-content:center;flex-direction:column}
.globe-overlay.on{display:flex}
.globe-ov-panel{max-width:94%;max-height:94%;display:flex;flex-direction:column;gap:var(--sp-6)}
.globe-ov-bar{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-family:var(--font-mono);font-size: var(--fs-sm)}
.globe-ov-img{max-width:88vw;max-height:72vh;border-radius:var(--r-lg);border:0.0625rem solid var(--border);background:var(--panel);min-width:18.75rem;min-height:18.75rem}

/* ═══════════ World 3D view — redesigned panels: Settings (TL) · Map Key (BL) · Locations (R) ═══════════ */
.gp-head{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  padding:0.5625rem 0.8125rem;border-bottom:0.0625rem solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex:0 0 auto}
.gp-scroll{overflow-y:auto;padding:0.5625rem 0.8125rem;min-height:0}
.gp-sec-label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--sp-6) 0 var(--sp-3)}
.gp-sec-label:first-child{margin-top:0}

/* TOP-LEFT — Settings */
.globe-stage .globe-settings{top:1rem;left:1rem;width:13.375rem;max-height:min(58%,33.75rem);display:flex;flex-direction:column;padding:0;overflow:hidden}
.globe-settings .globe-relief{margin-top:var(--sp-7);text-align:left}
.globe-settings .globe-meas{margin-top:var(--sp-7);width:100%}
.globe-layer-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.globe-layer-row .gi-sw{width:0.6875rem;height:0.6875rem;border-radius:var(--r-xs);flex:0 0 auto;border:0.0625rem solid rgba(0,0,0,.45)}

/* BOTTOM-LEFT — Map Key (accordion) */
.globe-stage .globe-key{left:1rem;bottom:2.75rem;width:13.375rem;max-height:min(44%,26.875rem);display:flex;flex-direction:column;padding:0;overflow:hidden}
.gk-scroll{overflow-y:auto;min-height:0;padding:var(--sp-2) 0}
.gk-sec{border-bottom:0.0625rem solid var(--border-soft)}
.gk-sec:last-child{border-bottom:0}
.gk-head{width:100%;display:flex;align-items:center;gap:0.4375rem;background:none;border:0;cursor:pointer;
  padding:0.4375rem 0.8125rem;color:var(--text);font-family:var(--font-mono);font-size: var(--fs-xs);letter-spacing:.02em;text-align:left}
.gk-head:hover{color:var(--accent)}
.gk-caret{color:var(--muted);font-size: var(--fs-micro);width:0.5625rem;flex:0 0 auto}
.gk-htitle{flex:1 1 auto}
.gk-count{color:var(--muted);font-size: var(--fs-2xs)}
.gk-body{padding:0.0625rem 0.8125rem 0.5625rem 1.8125rem}
.gk-note{color:var(--muted);font-size: var(--fs-2xs);margin:0 0 0.3125rem;font-style:italic}
.gk-row{display:flex;align-items:center;gap:0.4375rem;padding:0.09375rem 0;min-width:0}
.gk-sym{flex:0 0 0.875rem;text-align:center;color:var(--gold);font-size: var(--fs-xs)}
.gk-dot{flex:0 0 auto;width:0.625rem;height:0.625rem;border-radius:var(--r-round);border:0.0625rem solid rgba(0,0,0,.45);box-shadow:0 0 0 0.0625rem rgba(255,255,255,.05)}
.gk-line{flex:0 0 auto;width:1rem;height:0.1875rem;border-radius:var(--r-xs)}
.gk-name{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* RIGHT — Locations (search · filter · selected details) */
.globe-stage .globe-locations{top:1rem;right:1rem;bottom:2.75rem;width:18rem;display:flex;flex-direction:column;padding:0;overflow:hidden}
.gl-count{color:var(--muted);font-size: var(--fs-2xs);font-weight:400}
.gl-detail{border-bottom:0.0625rem solid var(--border-soft);padding:var(--sp-6) 0.8125rem;background:rgba(var(--accent-rgb),.06)}
.gl-d-head{display:flex;align-items:center;gap:var(--sp-5)}
.gl-d-head .gl-sym{font-size:var(--fs-md);color:var(--gold)}
.gl-d-name{flex:1 1 auto;color:var(--gold);font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-d-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size: var(--fs-base);padding:var(--sp-1) var(--sp-3);flex:0 0 auto}
.gl-d-x:hover{color:var(--accent)}
.gl-d-meta{color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-2xs);margin-top:var(--sp-2);text-transform:capitalize}
.gl-d-flags{display:flex;gap:var(--sp-7);margin-top:0.3125rem;font-size: var(--fs-xs);color:var(--text)}
.gl-d-desc{margin:0.4375rem 0 0;font-size:var(--fs-smplus);line-height:1.5;color:var(--text);opacity:.92}
.gl-d-within{margin-top:0.4375rem;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--muted);font-style:italic}
/* NATION card — the heraldic banner + nation facts for the selected settlement's realm */
.nation-card{display:flex;gap:0.5625rem;align-items:center;margin-top:0.5625rem;padding:0.4375rem var(--sp-5);border:0.0625rem solid var(--border);
  border-radius:var(--r-md);background:rgba(255,255,255,.018)}
.nation-banner{flex:0 0 auto;width:1.875rem;height:2.375rem;border-radius:var(--r-xs);border:0.09375rem solid;display:flex;
  align-items:center;justify-content:center;box-shadow: var(--shadow-drop-sm)}
.nation-charge{font-size:var(--fs-lg);line-height:1;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.4)}
.nation-info{min-width:0;flex:1}
.nation-name{font-family:var(--font-display);font-size:var(--fs-md);color:var(--gold);line-height:1.15}
.nation-demonym{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.02em}
.nation-sub{font-family:var(--font-mono);font-size: var(--fs-2xs);color:var(--muted);margin-top:var(--sp-1);text-transform:capitalize}
.nation-arms{font-size: var(--fs-xs);color:var(--text);opacity:.8;margin-top:var(--sp-1);font-style:italic}
.nation-exports{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:0.3125rem}
.nation-res{font-family:var(--font-mono);font-size:var(--fs-micro);text-transform:capitalize;color:var(--text);
  background:rgba(214,178,64,.14);border:0.0625rem solid rgba(214,178,64,.3);border-radius:var(--r-lg);padding:0.0625rem 0.4375rem}
.nation-rels{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.nation-rel{font-family:var(--font-mono);font-size: var(--fs-2xs);padding-left:0.5625rem;position:relative;color:var(--text);opacity:.92}
.nation-rel::before{content:"";position:absolute;left:0;top:0.3125rem;width:0.3125rem;height:0.3125rem;border-radius:var(--r-round)}
.rel-war::before{background:var(--rel-war-bg)}.rel-rivalry::before{background:var(--rel-rivalry-bg)}.rel-alliance::before{background:var(--rel-alliance-bg)}
.rel-trade::before{background:var(--rel-trade-bg)}.rel-tribute::before{background:var(--rel-tribute-bg)}
.nation-why{color:var(--muted);font-style:italic;opacity:.85}
.gl-d-coord{color:var(--muted);font-family:var(--font-mono);font-size: var(--fs-2xs);margin-top:var(--sp-4);font-variant-numeric:tabular-nums}
.gl-enter{margin-top:0.5625rem;width:100%}
.gl-search{margin:0.5625rem 0.8125rem 0;padding:0.4375rem var(--sp-6);background:var(--bg);border:0.0625rem solid var(--border);border-radius:var(--r-md);color:var(--text);font:inherit;font-size:var(--fs-smplus)}
.gl-search:focus{border-color:var(--accent)}
.gl-filters{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-5) 0.8125rem var(--sp-3)}
.gl-list{flex:1 1 auto;overflow-y:auto;min-height:0;padding:var(--sp-3) var(--sp-4) var(--sp-5)}
.gl-item{width:100%;display:flex;align-items:center;gap:var(--sp-5);background:none;border:0;border-radius:var(--r-md);padding:0.3125rem 0.4375rem;cursor:pointer;text-align:left;color:var(--text)}
.gl-item:hover{background:var(--hover-bg)}
.gl-item.sel{background:rgba(var(--accent-rgb),.18);box-shadow:inset 0.125rem 0 0 var(--accent)}
.gl-item .gl-sym{flex:0 0 1rem;text-align:center;color:var(--gold);font-size: var(--fs-sm)}
.gl-item .gl-name{flex:0 1 auto;font-size:var(--fs-smplus);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-item .gl-kind{flex:1 1 auto;text-align:right;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.gl-empty{color:var(--muted);font-size: var(--fs-xs);text-align:center;padding:var(--sp-8) var(--sp-5)}

/* infobar — brief hover on the left, scale + enter hint on the right */
.globe-infobar .gi-main{display:flex;align-items:center;gap:var(--sp-6);min-width:0;flex:1 1 auto}
.globe-infobar .gi-right{display:flex;align-items:center;gap:var(--sp-7);flex:0 0 auto;margin-left:auto}
.globe-infobar .gi-tip{color:var(--muted);font-size: var(--fs-2xs);opacity:.6}
.globe-infobar .gi-scale{color:var(--text);font-family:var(--font-mono);font-size: var(--fs-xs);font-variant-numeric:tabular-nums}
.globe-infobar .gi-enterhint{color:var(--muted);font-family:var(--font-mono);font-size: var(--fs-2xs);letter-spacing:.02em}

/* travel readout — moved to bottom-centre (Map Key now owns bottom-left) */
.globe-stage .globe-travel{left:50%;right:auto;transform:translateX(-50%);bottom:2.875rem}

/* ── collapsible panels: click a panel's header to collapse it to just the label ── */
.gp-head{width:100%;background:none;border:0;border-bottom:0.0625rem solid var(--border-soft);cursor:pointer;justify-content:flex-start;text-align:left}
.gp-head:hover{color:var(--accent)}
.gp-caret{color:var(--muted);font-size: var(--fs-micro);width:0.625rem;flex:0 0 auto;text-align:center}
.globe-locations .gp-head .gl-count{margin-left:auto}
.gpanel.collapsed{max-height:none;height:auto}
.gpanel.collapsed > :not(.gp-head){display:none}
.gpanel.collapsed .gp-head{border-bottom:0}
.globe-locations.collapsed{bottom:auto}      /* un-stretch the top+bottom-anchored right panel */

/* AUDIT 2026-07-17 — lens + location filters as compact selects */
.globe-lens-sel, .gl-filter-sel { width: 100%; font: inherit; font-size: var(--fs-sm); background: var(--bg-2);
  color: var(--text); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); margin: var(--sp-1) 0 var(--sp-4); }