#map-gl{position:fixed;z-index:0;top:0;right:0;bottom:0;left:272px;width:calc(100vw - 272px);height:100dvh;background:#03101a}
#map-gl[hidden]{display:none!important}
#map-gl .maplibregl-canvas{outline:none}
#map-gl .maplibregl-ctrl-top-left{top:70px;left:10px}
#map-gl .maplibregl-ctrl-group{overflow:hidden;border:1px solid rgba(102,201,232,.25);border-radius:12px;background:rgba(5,18,28,.9);box-shadow:0 10px 28px rgba(0,0,0,.45)}
#map-gl .maplibregl-ctrl button{width:38px;height:38px;filter:invert(1) hue-rotate(160deg)}
#map-gl .maplibregl-popup-content{padding:14px;border:1px solid rgba(102,201,232,.24);border-radius:14px;background:#0a1a27;color:#edf7fb;box-shadow:0 18px 50px rgba(0,0,0,.58)}
#map-gl .maplibregl-popup-tip{border-top-color:#0a1a27;border-bottom-color:#0a1a27}
#map-gl .maplibregl-popup-close-button{color:#edf7fb;font-size:20px}
.map-webgl-3d #coord-readout{border-color:rgba(246,195,107,.42)}
.map-3d-mobile-toggle{display:none}
@media(max-width:767px){
  #map-gl{left:0;width:100vw}#map-gl .maplibregl-ctrl-top-left{top:66px;left:7px}
  .map-3d-mobile-toggle{position:fixed;z-index:790;right:10px;bottom:calc(122px + var(--tc-safe-bottom));display:flex;align-items:center;gap:6px;min-height:42px;padding:8px 10px;border:1px solid rgba(78,216,239,.34);border-radius:12px;background:linear-gradient(145deg,rgba(8,25,38,.96),rgba(5,15,24,.96));box-shadow:0 12px 34px rgba(0,0,0,.48);color:#d8f4fa;font-size:9px;letter-spacing:.08em}
  .map-3d-mobile-toggle span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(78,216,239,.12);color:#4ed8ef;font-size:15px}.map-3d-mobile-toggle b{color:#7894a0;font-size:7px}.map-3d-mobile-toggle.active{border-color:rgba(241,174,72,.56);background:linear-gradient(145deg,rgba(54,39,19,.97),rgba(7,25,35,.97))}.map-3d-mobile-toggle.active span,.map-3d-mobile-toggle.active b{color:#f1ae48}
  body.reference-open .map-3d-mobile-toggle,body.tc-home-open .map-3d-mobile-toggle,body.tc-utility-open .map-3d-mobile-toggle,body:has(#panel:not(.closed)) .map-3d-mobile-toggle{display:none}
}


.map-4d-hud{position:absolute;z-index:4;top:70px;right:14px;display:grid;gap:8px;width:min(520px,calc(100% - 86px));padding:10px;border:1px solid rgba(92,213,241,.28);border-radius:14px;background:rgba(4,15,25,.9);box-shadow:0 16px 40px rgba(0,0,0,.42);backdrop-filter:blur(14px);color:#e9f9ff}
.map-4d-top,.map-4d-time{display:flex;align-items:center;gap:8px}
.map-4d-top{flex-wrap:wrap}
@media(min-width:768px){
 body:has(#panel:not(.closed)) .map-4d-hud{right:394px;width:min(520px,calc(100% - 462px))}
}
.map-4d-live{padding:5px 8px;border-radius:999px;background:#0f745f;color:#dffff7;font:800 10px/1 system-ui;letter-spacing:.12em}
.map-4d-hud.replay .map-4d-live{background:#8b5d16;color:#fff0c7}
.map-4d-top b{font:800 11px/1 system-ui;letter-spacing:.1em}
.map-4d-hud button,.map-4d-hud select{min-height:34px;border:1px solid rgba(132,192,214,.24);border-radius:9px;background:#0a1c2a;color:#e9f9ff;padding:0 10px}
.map-4d-top select{margin-left:auto;max-width:140px}
.map-4d-time input{min-width:80px;flex:1;accent-color:#54dff0}
.map-4d-time time{min-width:64px;color:#9fc3d1;font:700 10px/1.2 system-ui;text-align:center}
#map-4d-return{border-color:rgba(242,181,77,.42);color:#ffd68d}
#map-4d-trails.active{border-color:rgba(84,223,240,.44);background:rgba(35,123,143,.18);color:#8ef4ff}
@media(max-width:680px){
 .map-4d-hud{top:66px;right:8px;width:calc(100% - 72px);padding:8px}
 .map-4d-top{flex-wrap:wrap}.map-4d-top select{order:4;width:100%;max-width:none;margin:0}
 .map-4d-top b{font-size:9px}.map-4d-hud button{padding:0 8px;font-size:10px}
}

/* Keep the 4D timeline clear of the always-available mobile GPS card. */
@media(max-width:680px){body.map-webgl-3d .map-4d-hud{top:calc(165px + var(--tc-safe-top))}}

/* v22 final mobile map chrome: keep navigation and replay controls off the terrain. */
#map-4d-hud-toggle{display:none;min-width:30px!important;width:30px;padding:0!important;font-size:16px!important;line-height:1}
@media(max-width:767px){#map-gl .maplibregl-ctrl-top-left{display:block!important}}
@media(max-width:680px){
 body.map-webgl-3d .map-4d-hud{top:calc(158px + var(--tc-safe-top));right:10px;width:min(330px,calc(100vw - 20px));padding:7px 8px;gap:6px;border-radius:12px}
 #map-4d-hud-toggle{display:block}
 .map-4d-hud.compact{width:auto!important;min-width:0;padding:6px 7px;background:rgba(4,15,25,.82);backdrop-filter:none;-webkit-backdrop-filter:none}
 .map-4d-hud.compact .map-4d-top{flex-wrap:nowrap;gap:6px}
 .map-4d-hud.compact #map-4d-world,.map-4d-hud.compact #map-4d-reset,.map-4d-hud.compact .map-4d-time{display:none!important}
 .map-4d-hud.compact .map-4d-scale{font-size:8px;white-space:nowrap}
 .map-4d-hud.compact #map-4d-trails{min-height:28px;padding:0 7px;font-size:7px;letter-spacing:.08em}
 .map-4d-hud.compact .map-4d-live{padding:4px 7px;font-size:9px}
 .map-4d-hud:not(.compact) .map-4d-top{display:grid;grid-template-columns:auto 1fr auto auto;gap:7px}
 .map-4d-hud:not(.compact) .map-4d-top select{grid-column:1/5;grid-row:2;width:100%;max-width:none;margin:0}
 .map-4d-hud:not(.compact) #map-4d-reset{grid-column:2;grid-row:1;justify-self:end}
 .map-4d-hud:not(.compact) #map-4d-trails{grid-column:3;grid-row:1}
 .map-4d-hud:not(.compact) #map-4d-hud-toggle{grid-column:4;grid-row:1}
}

.tc-actor-nameplate{pointer-events:none;display:grid;gap:1px;min-width:96px;max-width:180px;padding:5px 8px 5px 11px;border:1px solid rgba(161,205,220,.38);border-left:3px solid var(--actor-accent,#5ad8ff);border-radius:9px;background:rgba(3,12,20,.90);box-shadow:0 5px 18px rgba(0,0,0,.52);backdrop-filter:blur(7px);color:#f4fbff;text-align:left;white-space:nowrap}.tc-actor-nameplate strong{overflow:hidden;text-overflow:ellipsis;font:800 11px/1.05 system-ui,sans-serif;letter-spacing:.025em}.tc-actor-nameplate small{overflow:hidden;text-overflow:ellipsis;color:#9fc3d1;font:700 7px/1.1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}@media(max-width:680px){.tc-actor-nameplate{min-width:82px;max-width:140px;padding:4px 6px 4px 9px;border-radius:8px}.tc-actor-nameplate strong{font-size:10px}.tc-actor-nameplate small{font-size:6.5px}}
#map-4d-follow.active{border-color:rgba(241,174,72,.48);background:rgba(241,174,72,.12);color:#ffd68d;box-shadow:inset 0 0 0 1px rgba(255,190,90,.08)}#map-4d-follow.active:before{content:"◉";margin-right:5px;font-size:7px}.map-4d-hud.replay #map-4d-follow{opacity:.45;pointer-events:none}

/* The GPS card changes height when expanded; keep map controls beneath its actual bounds. */
body.map-webgl-3d .map-4d-hud{top:var(--tc-gps-hud-top,100px)}

#raw-terrain-diagnostics{display:block;font:11px/1.45 system-ui;color:#bad3df;max-width:100%;overflow-wrap:anywhere}