/* VELVET_DIRECT_MAP_CRITICAL_BUNDLE_R1_20260918 — exact ordered bundle; source files retained */

/* SOURCE_BEGIN dc-map-canonical-r3c1.css */
/* VELVET_DIRECT_MAP_CANONICAL_R3C9_20260913 */
html.dc-map-canonical-pending-r3c1,html.dc-map-canonical-pending-r3c1 body{background:#020403!important;}
html.dc-map-canonical-pending-r3c1 body{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html.dc-map-canonical-pending-r3c1::before{content:"VELVET DIRECT";position:fixed;z-index:2147483640;left:0;right:0;top:43%;text-align:center;color:#f0c966;font:800 24px/1.15 system-ui,sans-serif;letter-spacing:.16em;}
html.dc-map-canonical-pending-r3c1::after{content:"Loading Trail Guide…";position:fixed;z-index:2147483640;left:0;right:0;top:49%;text-align:center;color:#a9d987;font:600 14px/1.2 system-ui,sans-serif;letter-spacing:.05em;}
html.dc-map-canonical-ready-r3c1:not(.dc-auth-pending-r3c1) body{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
html.dc-map-canonical-ready-r3c1:not(.dc-auth-pending-r3c1)::before,html.dc-map-canonical-ready-r3c1:not(.dc-auth-pending-r3c1)::after{content:none!important;display:none!important;}

html.dc-map-canonical-error-r3c9::before{content:"VELVET DIRECT"!important;color:#f0c966!important;}
html.dc-map-canonical-error-r3c9::after{content:"Trail Guide could not finish loading. Refresh to retry."!important;color:#ffb8a8!important;top:49%!important;}

/* SOURCE_END dc-map-canonical-r3c1.css */

/* SOURCE_BEGIN dc-trail-guide-map-r1.css */
/* DIRECT_CONNECT_TRAIL_GUIDE_FIRST_SLICE_R1_20260816 */
:root{
  --dc-bg:#05030a;
  --dc-panel:rgba(8,6,13,.93);
  --dc-purple:#a83dff;
  --dc-gold:#f4c542;
  --dc-text:#f7f4fa;
  --dc-muted:#aaa0b1;
  --dc-line:rgba(168,61,255,.32);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--dc-bg);color:var(--dc-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
button,a{font:inherit}
.dc-trail-shell{position:fixed;inset:0;background:var(--dc-bg)}
#dcTrailMap{position:absolute;inset:0 0 calc(72px + env(safe-area-inset-bottom,0px)) 0;background:#07100b;isolation:isolate;z-index:0}
#dcTrailMap::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;background:#07100b;opacity:0;transition:opacity .22s ease}
html.dc-map-render-pending-r1 #dcTrailMap::after{opacity:1}
html.dc-map-render-ready-r1 #dcTrailMap::after{opacity:0}
.dc-trail-top{
  position:absolute;z-index:20;top:0;left:0;right:0;
  padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;
  background:linear-gradient(180deg,rgba(5,3,10,.97),rgba(5,3,10,.75),transparent);
  pointer-events:none
}
.dc-trail-head{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;max-width:680px;margin:auto;pointer-events:auto}
.dc-trail-head a,.dc-trail-head button{
  min-height:40px;border:1px solid var(--dc-line);border-radius:13px;background:rgba(9,7,15,.9);color:#fff;text-decoration:none;display:grid;place-items:center;font-weight:900
}
.dc-trail-title{text-align:center;line-height:1}
.dc-trail-title strong{display:block;font-size:15px;letter-spacing:.12em;color:var(--dc-gold)}
.dc-trail-title span{display:block;margin-top:5px;font-size:9px;letter-spacing:.18em;color:#b7a9c1}
.dc-trail-modebar{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:420px;margin:8px auto 0;pointer-events:auto}
.dc-mode{
  min-height:36px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(7,5,12,.9);color:#ddd;font-size:11px;font-weight:900;letter-spacing:.05em
}
.dc-mode.on{border-color:rgba(244,197,66,.72);color:var(--dc-gold);background:rgba(244,197,66,.08)}
.dc-trail-status{
  position:absolute;z-index:18;top:calc(103px + env(safe-area-inset-top,0px));left:10px;
  max-width:min(76vw,330px);padding:7px 10px;border:1px solid rgba(168,61,255,.28);
  border-radius:12px;background:rgba(5,3,10,.78);font-size:10px;font-weight:800;color:#d6ccd9;backdrop-filter:blur(8px)
}
.dc-trail-tools{
  position:absolute;z-index:20;left:10px;right:10px;bottom:calc(82px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-width:680px;margin:auto
}
.dc-tool{
  min-height:48px;border:1px solid var(--dc-line);border-radius:15px;background:var(--dc-panel);color:#fff;
  font-size:10px;font-weight:950;letter-spacing:.035em;box-shadow:0 8px 24px rgba(0,0,0,.3)
}
.dc-tool.primary{border-color:rgba(244,197,66,.52);color:var(--dc-gold)}
.dc-tool.live{border-color:#f4c542;color:#f4c542;box-shadow:0 0 18px rgba(244,197,66,.18)}
.dc-trail-nav{
  position:absolute;z-index:30;left:0;right:0;bottom:0;height:calc(72px + env(safe-area-inset-bottom,0px));
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border-top:1px solid var(--dc-line);background:rgba(5,3,10,.98)
}
.dc-trail-nav a{display:grid;place-items:center;border:1px solid rgba(168,61,255,.28);border-radius:14px;color:#ddd;text-decoration:none;font-size:11px;font-weight:900}
.dc-trail-nav a.active{color:var(--dc-gold);border-color:rgba(244,197,66,.48);background:rgba(244,197,66,.06)}
.dc-waypoint-sheet{
  position:fixed;z-index:2147483635;inset:auto 10px calc(86px + env(safe-area-inset-bottom,0px)) 10px;
  max-width:520px;margin:auto;padding:14px;border:1px solid rgba(168,61,255,.5);border-radius:20px;background:rgba(7,5,12,.98);box-shadow:0 18px 60px #000
}
.dc-waypoint-sheet[hidden]{display:none}
.dc-waypoint-sheet h2{margin:0 0 4px;color:var(--dc-gold);font-size:16px}
.dc-waypoint-sheet p{margin:0 0 12px;color:var(--dc-muted);font-size:11px}
.dc-waypoint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dc-waypoint-grid button{min-height:46px;border:1px solid var(--dc-line);border-radius:13px;background:#100c15;color:#fff;font-weight:900;font-size:11px}
.dc-waypoint-close{width:100%;min-height:42px;margin-top:8px;border:0;border-radius:12px;background:transparent;color:#b8acbe;font-weight:800}
.dc-trail-user-marker{width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:#a83dff;box-shadow:0 0 0 7px rgba(168,61,255,.18),0 0 18px rgba(168,61,255,.7)}
.dc-contact-marker{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border:2px solid #f4c542;border-radius:18px;background:#100c15;color:#fff;font-size:9px;font-weight:900;box-shadow:0 0 15px rgba(244,197,66,.3);white-space:nowrap}
.dc-waypoint-marker{width:18px;height:18px;border:2px solid #fff;border-radius:4px;background:#f4c542;box-shadow:0 0 14px rgba(244,197,66,.55)}
.maplibregl-ctrl-bottom-right{bottom:92px!important}
.maplibregl-ctrl-attrib{font-size:9px!important}
@media(max-width:390px){
  .dc-trail-tools{gap:5px;left:7px;right:7px}
  .dc-tool{font-size:9px}
  .dc-trail-modebar{max-width:300px}
}

/* DC_HOME_MAP_EMBED_R2
   #dcTrailPage is targeted only when the home iframe uses
   /direct-connect/map.html#dcTrailPage. Standalone Trail Guide keeps its full UI.
*/
body#dcTrailPage:target .dc-trail-top,
body#dcTrailPage:target .dc-trail-status,
body#dcTrailPage:target .dc-trail-tools,
body#dcTrailPage:target .dc-trail-nav,
body#dcTrailPage:target .dc-waypoint-sheet{
  display:none!important;
}
body#dcTrailPage:target #dcTrailMap{
  inset:0!important;
}
body#dcTrailPage:target .maplibregl-ctrl-bottom-right{
  right:8px!important;
  bottom:8px!important;
}
body#dcTrailPage:target .maplibregl-ctrl-bottom-left{
  left:6px!important;
  bottom:4px!important;
}

/* DC_HOME_MAP_CLEAN_EMBED_R3_20260816
   Explicit ?embed=home mode. Standalone Trail Guide remains full-featured.
*/
html.dc-home-map-embed-r3,
html.dc-home-map-embed-r3 body,
html.dc-home-map-embed-r3 .dc-trail-shell{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  background:#07100b!important;
}
html.dc-home-map-embed-r3 .dc-trail-top,
html.dc-home-map-embed-r3 .dc-trail-status,
html.dc-home-map-embed-r3 .dc-trail-tools,
html.dc-home-map-embed-r3 .dc-trail-nav,
html.dc-home-map-embed-r3 .dc-waypoint-sheet{
  display:none!important;
}
html.dc-home-map-embed-r3 #dcTrailMap{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
html.dc-home-map-embed-r3 .maplibregl-ctrl-top-left,
html.dc-home-map-embed-r3 .maplibregl-ctrl-top-right,
html.dc-home-map-embed-r3 .maplibregl-ctrl-bottom-right{
  display:none!important;
}
html.dc-home-map-embed-r3 .maplibregl-ctrl-bottom-left{
  left:5px!important;
  bottom:3px!important;
  opacity:.62!important;
}


/* DIRECT_CONNECT_R2S1_TRAIL_MODAL_HIERARCHY_20260821
   map < cockpit/HUD < modal backdrop < modal sheet */
#dcWaypointBackdropR2S1{
  position:fixed!important;
  inset:0!important;
  z-index:2147483630!important;
  background:rgba(0,0,0,.64)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
#dcWaypointBackdropR2S1[hidden]{display:none!important;}
#dcWaypointSheet{
  z-index:2147483635!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
html.dc-r2s1-waypoint-open #dcTrailMap{pointer-events:none!important;}

/* SOURCE_END dc-trail-guide-map-r1.css */

/* SOURCE_BEGIN dc-radar-view-r2.css */
/* DIRECT_CONNECT_RADAR_R2_MAP_RADAR_TOGGLE_20260818 */

#dcRadarToggleR2{
  appearance:none;
  border:1px solid rgba(190,92,255,.55);
  background:rgba(10,7,15,.9);
  color:#efe4ff;
  border-radius:999px;
  min-width:62px;
  height:38px;
  padding:0 12px;
  font:900 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
#dcRadarToggleR2[aria-pressed="true"]{
  background:linear-gradient(135deg,#5a189a,#9d4edd);
  border-color:transparent;
  color:#fff;
}

.dc-radar-view-r2{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at center,rgba(114,34,165,.16) 0 2%,transparent 2.5%),
    radial-gradient(circle at center,rgba(31,255,177,.06),transparent 56%),
    linear-gradient(180deg,#05080a,#06110c 48%,#030708);
  color:#fff;
  transition:opacity .18s ease;
}
html.dc-radar-active-r2 .dc-radar-view-r2{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
html.dc-radar-active-r2 #dcTrailMap{
  opacity:0!important;
  pointer-events:none!important;
}
html.dc-radar-active-r2 .dc-trail-modebar,
html.dc-radar-active-r2 .dc-trail-status,
html.dc-radar-active-r2 .dc-trail-tools{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.dc-radar-active-r2 .dc-trail-top,
html.dc-radar-active-r2 .dc-trail-nav{
  z-index:8!important;
}

.dc-radar-stage-r2{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw,680px);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(126,34,206,.12),rgba(2,10,8,.78) 64%,rgba(0,0,0,.92));
  box-shadow:
    inset 0 0 90px rgba(31,255,177,.05),
    0 0 60px rgba(88,28,135,.12);
}

.dc-radar-ring-r2{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(94,234,212,.22);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.dc-radar-ring-r2.r1{width:25%;height:25%}
.dc-radar-ring-r2.r2{width:50%;height:50%}
.dc-radar-ring-r2.r3{width:75%;height:75%}
.dc-radar-ring-r2.r4{width:99%;height:99%;border-color:rgba(192,132,252,.34)}

.dc-radar-axis-r2{
  position:absolute;
  background:rgba(94,234,212,.11);
  pointer-events:none;
}
.dc-radar-axis-r2.v{width:1px;height:100%;left:50%;top:0}
.dc-radar-axis-r2.h{height:1px;width:100%;left:0;top:50%}

.dc-radar-north-r2{
  position:absolute;
  left:50%;
  top:3.5%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.5);
  font:900 11px/1 system-ui,sans-serif;
  letter-spacing:.14em;
}

.dc-radar-pulse-r2{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  border:2px solid rgba(31,255,177,.42);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.04);
  opacity:0;
  animation:dcRadarPulseR2 3.2s linear infinite;
  pointer-events:none;
}
.dc-radar-pulse-r2.p2{animation-delay:1.06s}
.dc-radar-pulse-r2.p3{animation-delay:2.12s}

@keyframes dcRadarPulseR2{
  0%{transform:translate(-50%,-50%) scale(.04);opacity:0}
  8%{opacity:.62}
  75%{opacity:.12}
  100%{transform:translate(-50%,-50%) scale(.98);opacity:0}
}

.dc-radar-self-r2{
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:5px solid #9d4edd;
  box-shadow:0 0 0 8px rgba(157,78,221,.18),0 0 28px rgba(157,78,221,.9);
  z-index:5;
}
.dc-radar-self-heading-r2{
  position:absolute;
  left:50%;
  top:-16px;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:11px solid #fff;
  transform:translateX(-50%);
  transform-origin:50% 26px;
  opacity:.9;
}

.dc-radar-blip-r2{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border:0;
  border-radius:50%;
  padding:0;
  background:#c084fc;
  box-shadow:0 0 0 5px rgba(192,132,252,.12),0 0 18px rgba(192,132,252,.8);
  cursor:pointer;
  z-index:4;
}
.dc-radar-blip-r2.is-live{
  background:#2dd4bf;
  box-shadow:0 0 0 5px rgba(45,212,191,.12),0 0 18px rgba(45,212,191,.8);
}
.dc-radar-blip-r2.is-stale{
  background:#facc15;
  box-shadow:0 0 0 5px rgba(250,204,21,.12),0 0 18px rgba(250,204,21,.7);
}
.dc-radar-blip-r2::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:22px;
  transform:translateX(-50%);
  max-width:110px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(2,6,8,.78);
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:800 9px/1.15 system-ui,sans-serif;
  pointer-events:none;
}

.dc-radar-meta-r2{
  position:absolute;
  left:50%;
  top:max(118px,calc(env(safe-area-inset-top,0px) + 94px));
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 32px);
  padding:7px 10px;
  border-radius:999px;
  background:rgba(2,7,8,.72);
  border:1px solid rgba(94,234,212,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.72);
  font:800 10px/1 system-ui,sans-serif;
  white-space:nowrap;
}
.dc-radar-meta-r2 b{color:#fff}

.dc-radar-empty-r2{
  position:absolute;
  left:50%;
  top:66%;
  transform:translate(-50%,-50%);
  width:min(82vw,360px);
  color:rgba(255,255,255,.52);
  text-align:center;
  font:700 12px/1.45 system-ui,sans-serif;
  z-index:3;
}

.dc-radar-selection-r2{
  position:absolute;
  left:50%;
  bottom:max(92px,calc(env(safe-area-inset-bottom,0px) + 78px));
  transform:translateX(-50%);
  z-index:7;
  width:min(88vw,430px);
  padding:11px 14px;
  border-top:1px solid rgba(192,132,252,.28);
  border-bottom:1px solid rgba(192,132,252,.18);
  background:rgba(4,5,9,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.dc-radar-selection-r2[hidden]{display:none!important}
.dc-radar-selection-r2 strong{
  display:block;
  color:#fff;
  font:900 14px/1.2 system-ui,sans-serif;
}
.dc-radar-selection-r2 span{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.58);
  font:700 11px/1.3 system-ui,sans-serif;
}

html.dc-home-map-preview-r3r1 #dcRadarToggleR2,
html.dc-home-map-preview-r3r1 #dcRadarViewR2{
  display:none!important;
}

@media(max-width:390px){
  .dc-radar-stage-r2{width:96vw}
  .dc-radar-meta-r2{top:max(108px,calc(env(safe-area-inset-top,0px) + 86px))}
}

/* SOURCE_END dc-radar-view-r2.css */

/* SOURCE_BEGIN dc-trail-terrain-layout-r3.css */
/* DIRECT_CONNECT_TERRAIN_LAYOUT_R3_20260818
 *
 * Trail Guide chrome becomes compact, safe-area aware and edge-to-edge.
 * Map/Radar remain the visual surface; controls float above without giant pill stacking.
 */

:root{
  --dc-r3-vh:100dvh;
  --dc-r3-vw:100vw;
  --dc-r3-top-h:102px;
  --dc-r3-nav-h:122px;
  --dc-r3-tools-h:76px;
  --dc-r3-edge:12px;
  --dc-r3-control-bg:rgba(7,7,12,.90);
  --dc-r3-control-border:rgba(179,85,255,.34);
  --dc-r3-gold:#ffd233;
}

html,body{
  width:100%;
  min-height:100%;
  overflow:hidden;
}

body{
  height:var(--dc-r3-vh,100dvh)!important;
  max-height:var(--dc-r3-vh,100dvh)!important;
}

#dcTrailMap,
#dcRadarViewR2{
  position:absolute!important;
  inset:0!important;
}

/* ── top header ───────────────────────────────────────── */

.dc-trail-top{
  top:0!important;
  left:0!important;
  right:0!important;
  min-height:calc(env(safe-area-inset-top,0px) + 102px)!important;
  padding:
    calc(env(safe-area-inset-top,0px) + 10px)
    var(--dc-r3-edge)
    10px!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) 72px!important;
  align-items:start!important;
  gap:8px!important;
  background:
    linear-gradient(180deg,rgba(4,3,9,.93) 0%,rgba(4,3,9,.70) 62%,rgba(4,3,9,0) 100%)!important;
  pointer-events:none!important;
}

.dc-trail-top>*{
  pointer-events:auto!important;
}

.dc-trail-title{
  grid-column:2!important;
  min-width:0!important;
  padding:6px 0 0!important;
  text-align:center!important;
}

.dc-trail-title strong{
  display:block!important;
  margin:0!important;
  font-size:clamp(22px,5.5vw,29px)!important;
  line-height:1!important;
  letter-spacing:.13em!important;
  white-space:nowrap!important;
}

.dc-trail-title span{
  display:block!important;
  margin-top:8px!important;
  font-size:clamp(10px,2.8vw,13px)!important;
  line-height:1.05!important;
  letter-spacing:.22em!important;
  white-space:normal!important;
}

.dc-trail-top>.dc-trail-back,
.dc-trail-top>button:first-child{
  grid-column:1!important;
  justify-self:start!important;
}

#dcRadarToggleR2{
  grid-column:3!important;
  justify-self:end!important;
  min-width:64px!important;
  width:64px!important;
  height:44px!important;
  margin:0!important;
  padding:0 7px!important;
  border-radius:11px!important;
  font-size:11px!important;
  letter-spacing:.07em!important;
  box-shadow:none!important;
}

/* Generic top utility controls become compact squares. */
.dc-trail-top button:not(#dcRadarToggleR2),
.dc-trail-top a{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  border-radius:11px!important;
  box-shadow:none!important;
}

/* ── left map utilities ───────────────────────────────── */

#dcRecenterBtn{
  position:fixed!important;
  left:var(--dc-r3-edge)!important;
  top:calc(env(safe-area-inset-top,0px) + 108px)!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  border-radius:11px!important;
  padding:0!important;
  z-index:18!important;
}

/* ── activity mode selector ───────────────────────────── */

.dc-trail-modebar{
  position:fixed!important;
  top:calc(env(safe-area-inset-top,0px) + 166px)!important;
  left:var(--dc-r3-edge)!important;
  right:var(--dc-r3-edge)!important;
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;
  background:rgba(8,8,13,.88)!important;
  box-shadow:none!important;
  z-index:17!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

.dc-trail-modebar button{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:clamp(13px,3.7vw,17px)!important;
}

.dc-trail-modebar button+button{
  border-left:1px solid rgba(255,255,255,.10)!important;
}

.dc-trail-modebar button[aria-pressed="true"],
.dc-trail-modebar .active,
.dc-trail-modebar .is-active{
  background:rgba(255,210,51,.10)!important;
  color:var(--dc-r3-gold)!important;
}

/* Context/status becomes text on the map, not another bubble. */
.dc-trail-status{
  position:fixed!important;
  top:calc(env(safe-area-inset-top,0px) + 220px)!important;
  left:var(--dc-r3-edge)!important;
  right:var(--dc-r3-edge)!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:6px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.58)!important;
  font-size:11px!important;
  line-height:1.25!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
  z-index:16!important;
  pointer-events:none!important;
}

/* ── bottom trail actions ─────────────────────────────── */

.dc-trail-tools{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:var(--dc-r3-nav-h,122px)!important;
  width:100%!important;
  max-width:none!important;
  min-height:68px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
  border-bottom:1px solid rgba(179,85,255,.22)!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:rgba(5,5,10,.91)!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  z-index:20!important;
}

.dc-trail-tools button,
.dc-trail-tools a{
  min-width:0!important;
  width:100%!important;
  min-height:68px!important;
  height:auto!important;
  margin:0!important;
  padding:8px 5px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:clamp(10px,2.8vw,13px)!important;
  line-height:1.15!important;
}

.dc-trail-tools>*+*{
  border-left:1px solid rgba(255,255,255,.10)!important;
}

/* ── bottom primary navigation ────────────────────────── */

.dc-trail-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  min-height:calc(104px + env(safe-area-inset-bottom,0px))!important;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  border-top:1px solid rgba(179,85,255,.28)!important;
  border-radius:0!important;
  background:rgba(3,3,8,.97)!important;
  box-shadow:none!important;
  z-index:22!important;
}

.dc-trail-nav a,
.dc-trail-nav button{
  min-width:0!important;
  width:100%!important;
  min-height:82px!important;
  margin:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

/* ── map/radar viewport relation ─────────────────────── */

html:not(.dc-radar-active-r2) #dcTrailMap{
  filter:saturate(.92) contrast(1.02)!important;
}

html.dc-radar-active-r2 .dc-trail-modebar,
html.dc-radar-active-r2 .dc-trail-status,
html.dc-radar-active-r2 .dc-trail-tools,
html.dc-radar-active-r2 #dcRecenterBtn{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Radar keeps the same compact top/footer geometry. */
html.dc-radar-active-r2 .dc-radar-meta-r2{
  top:calc(env(safe-area-inset-top,0px) + 150px)!important;
}

html.dc-radar-active-r2 .dc-radar-stage-r2{
  width:min(94vw,680px)!important;
  max-height:calc(
    var(--dc-r3-vh,100dvh)
    - var(--dc-r3-nav-h,122px)
    - env(safe-area-inset-top,0px)
    - 165px
  )!important;
}

/* Embedded home preview remains untouched. */
html.dc-home-map-preview-r3r1 #dcRadarToggleR2,
html.dc-home-map-preview-r3r1 #dcRadarViewR2{
  display:none!important;
}

/* Short devices: compress chrome before shrinking the map. */
@media(max-height:760px){
  .dc-trail-top{
    min-height:calc(env(safe-area-inset-top,0px) + 88px)!important;
  }
  .dc-trail-title strong{font-size:21px!important}
  .dc-trail-title span{margin-top:5px!important;font-size:9px!important}
  #dcRecenterBtn{top:calc(env(safe-area-inset-top,0px) + 94px)!important}
  .dc-trail-modebar{top:calc(env(safe-area-inset-top,0px) + 148px)!important}
  .dc-trail-modebar button{min-height:42px!important}
  .dc-trail-status{top:calc(env(safe-area-inset-top,0px) + 194px)!important}
  .dc-trail-tools{min-height:58px!important}
  .dc-trail-tools button,
  .dc-trail-tools a{min-height:58px!important}
  .dc-trail-nav{
    min-height:calc(92px + env(safe-area-inset-bottom,0px))!important;
  }
  .dc-trail-nav a,
  .dc-trail-nav button{min-height:70px!important}
}

/* Narrow devices: prevent header and bottom labels from clipping. */
@media(max-width:370px){
  :root{--dc-r3-edge:8px}
  .dc-trail-top{
    grid-template-columns:58px minmax(0,1fr) 58px!important;
  }
  #dcRadarToggleR2{
    width:58px!important;
    min-width:58px!important;
    font-size:10px!important;
  }
  .dc-trail-top button:not(#dcRadarToggleR2),
  .dc-trail-top a,
  #dcRecenterBtn{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }
  .dc-trail-title strong{font-size:20px!important}
  .dc-trail-tools button,
  .dc-trail-tools a{font-size:9.5px!important}
  .dc-trail-nav a,
  .dc-trail-nav button{font-size:11px!important}
}

/* SOURCE_END dc-trail-terrain-layout-r3.css */

/* SOURCE_BEGIN dc-trail-hud-r5.css */
/* DIRECT_CONNECT_HUD_R5_TERRAIN_FIDELITY_20260818 */

:root{
  --dc-r5-purple:#a855f7;
  --dc-r5-purple-deep:#5b21b6;
  --dc-r5-gold:#f6c83f;
  --dc-r5-red:#ef3340;
  --dc-r5-bg:rgba(5,5,10,.90);
  --dc-r5-edge:18px;
  --dc-r5-nav-h:102px;
  --dc-r5-tools-h:88px;
}

html,body,.dc-trail-shell{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
}

#dcTrailMap,
#dcRadarViewR2{
  position:absolute!important;
  inset:0!important;
}

/* R5 replaces R4B presentation, not its canonical data owners. */
html.dc-hud-r5-ready #dcTrailHudR4B{
  display:none!important;
}

html.dc-hud-r5-ready .dc-trail-top{
  display:none!important;
}

html.dc-hud-r5-ready #dcTrailStatus{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  clip:rect(0 0 0 0)!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Hide duplicate MapLibre chrome. */
html.dc-hud-r5-ready .maplibregl-ctrl-bottom-right{
  display:none!important;
}

#dcTrailHudR5{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#fff;
}

#dcTrailHudR5 button,
#dcTrailHudR5 a{
  -webkit-tap-highlight-color:transparent;
}

/* ── Header ────────────────────────────────────────── */

.dc-r5-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:calc(env(safe-area-inset-top,0px) + 88px);
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--dc-r5-edge) 12px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 78px;
  align-items:start;
  gap:8px;
  background:linear-gradient(180deg,rgba(3,3,8,.92),rgba(3,3,8,.54) 70%,transparent);
  pointer-events:none;
}

.dc-r5-top>*{pointer-events:auto}

.dc-r5-back{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(168,85,247,.55);
  border-radius:17px;
  background:rgba(6,6,12,.92);
  color:#fff;
  text-decoration:none;
  font-size:34px;
  font-weight:500;
  box-shadow:0 9px 28px rgba(0,0,0,.28);
}

.dc-r5-title{
  padding-top:4px;
  text-align:center;
}

.dc-r5-title strong{
  display:block;
  color:#fff;
  font-size:clamp(22px,6vw,29px);
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
  text-shadow:0 2px 10px rgba(0,0,0,.88);
  white-space:nowrap;
}

.dc-r5-title span{
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.72);
  font-size:clamp(9px,2.5vw,11px);
  line-height:1.05;
  font-weight:850;
  letter-spacing:.18em;
  text-shadow:0 2px 8px rgba(0,0,0,.88);
}

#dcR5Radar{
  display:grid;
  place-items:center;
  width:72px;
  height:48px;
  border:1px solid rgba(168,85,247,.58);
  border-radius:17px;
  background:rgba(7,7,13,.92);
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  box-shadow:0 9px 28px rgba(0,0,0,.24);
}

#dcR5Radar[aria-pressed="true"]{
  background:linear-gradient(135deg,#6d28d9,#a855f7);
  border-color:transparent;
}

/* ── Mode selector ─────────────────────────────────── */

.dc-r5-mode{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 94px);
  left:50%;
  transform:translateX(-50%);
  width:min(65vw,390px);
  min-height:48px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:15px;
  background:rgba(7,7,12,.88);
  box-shadow:0 8px 28px rgba(0,0,0,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:auto;
}

.dc-r5-mode button{
  min-width:0;
  min-height:48px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:13px;
  font-weight:950;
  letter-spacing:.06em;
}

.dc-r5-mode button+button{
  border-left:1px solid rgba(255,255,255,.12);
}

.dc-r5-mode button.on,
.dc-r5-mode button[aria-pressed="true"]{
  color:var(--dc-r5-gold);
  background:linear-gradient(135deg,rgba(246,200,63,.08),rgba(122,90,10,.28));
  box-shadow:inset 0 0 0 1px rgba(246,200,63,.38);
}

/* ── Left rail / full compass ──────────────────────── */

.dc-r5-left{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 158px);
  left:var(--dc-r5-edge);
  width:92px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  pointer-events:auto;
}

.dc-r5-compass{
  position:relative;
  width:88px;
  height:88px;
  border:2px solid rgba(168,85,247,.9);
  border-radius:50%;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(96,28,139,.96) 0 27%,rgba(28,11,37,.97) 29% 55%,rgba(7,7,13,.97) 58% 100%);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.11),
    0 0 28px rgba(168,85,247,.48),
    0 10px 30px rgba(0,0,0,.28);
  color:#fff;
}

.dc-r5-compass-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:25px;
  line-height:1;
  font-weight:950;
  text-shadow:0 0 10px rgba(255,255,255,.45);
}

.dc-r5-compass-pointer{
  position:absolute;
  left:50%;
  top:6px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:9px solid var(--dc-r5-purple);
  filter:drop-shadow(0 0 5px rgba(168,85,247,.8));
}

.dc-r5-compass-ring{
  position:absolute;
  inset:0;
  transition:transform .15s linear;
}

.dc-r5-degree{
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  margin-left:-14px;
  margin-top:-5px;
  color:rgba(255,255,255,.85);
  font-size:8px;
  line-height:1;
  font-weight:900;
  text-align:center;
  transform-origin:14px 5px;
}

.dc-r5-degree.d0{transform:translateY(-35px)}
.dc-r5-degree.d45{transform:translate(25px,-25px)}
.dc-r5-degree.d90{transform:translate(36px,0)}
.dc-r5-degree.d135{transform:translate(25px,25px)}
.dc-r5-degree.d180{transform:translateY(35px)}
.dc-r5-degree.d225{transform:translate(-25px,25px)}
.dc-r5-degree.d270{transform:translate(-36px,0)}
.dc-r5-degree.d315{transform:translate(-25px,-25px)}

.dc-r5-square{
  display:grid;
  place-items:center;
  width:62px;
  min-width:62px;
  height:62px;
  min-height:62px;
  padding:5px 3px;
  border:1px solid rgba(168,85,247,.48);
  border-radius:15px;
  background:rgba(7,7,13,.91);
  color:#fff;
  box-shadow:0 9px 28px rgba(0,0,0,.24);
  text-decoration:none;
}

.dc-r5-square svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dc-r5-square small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.74);
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
}

/* ── Right rail ────────────────────────────────────── */

.dc-r5-right{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 238px);
  right:var(--dc-r5-edge);
  width:64px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:11px;
  pointer-events:auto;
}

.dc-r5-right .dc-r5-square{
  width:62px;
  height:62px;
}

.dc-r5-dc{
  border-color:rgba(246,200,63,.48);
}

.dc-r5-dc b{
  color:#fff;
  font-size:14px;
  letter-spacing:-.03em;
}

.dc-r5-dc b em{
  color:var(--dc-r5-purple);
  font-style:normal;
}

.dc-r5-hazard{
  border-color:rgba(239,51,64,.7);
  background:rgba(62,8,13,.92);
  color:#ff4d58;
}

.dc-r5-share{
  position:relative;
  border-color:rgba(168,85,247,.68);
}

.dc-r5-share-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 5px;
  border:2px solid #12071b;
  border-radius:999px;
  background:var(--dc-r5-purple);
  color:#fff;
  font-size:10px;
  font-weight:950;
}

/* ── Trail info card ───────────────────────────────── */

.dc-r5-trail-card{
  position:absolute;
  left:var(--dc-r5-edge);
  bottom:calc(var(--dc-r5-nav-h) + var(--dc-r5-tools-h) + 18px);
  width:min(48vw,295px);
  min-width:205px;
  padding:14px 15px 13px;
  border:1px solid rgba(168,85,247,.38);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(9,9,14,.95),rgba(12,9,18,.88));
  box-shadow:0 14px 38px rgba(0,0,0,.32);
  pointer-events:auto;
}

.dc-r5-trail-kicker{
  color:var(--dc-r5-gold);
  font-size:9px;
  line-height:1;
  font-weight:950;
  letter-spacing:.13em;
}

.dc-r5-trail-name{
  margin-top:7px;
  color:#fff;
  font-size:17px;
  line-height:1.06;
  font-weight:950;
}

.dc-r5-trail-place{
  margin-top:7px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  line-height:1.2;
  font-weight:700;
}

.dc-r5-elev-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.dc-r5-elev{
  color:#bf73ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.04em;
}

.dc-r5-elev-bars{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:28px;
}

.dc-r5-elev-bars i{
  display:block;
  width:4px;
  border-radius:4px;
  background:linear-gradient(#bf73ff,#5b21b6);
  opacity:.82;
}

.dc-r5-trail-info-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:42px;
  margin-top:12px;
  padding:0 11px;
  border:1px solid rgba(246,200,63,.62);
  border-radius:11px;
  background:rgba(24,19,8,.54);
  color:var(--dc-r5-gold);
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
}

/* ── Bottom action bar ─────────────────────────────── */

.dc-r5-tools{
  position:absolute;
  left:var(--dc-r5-edge);
  right:var(--dc-r5-edge);
  bottom:var(--dc-r5-nav-h);
  height:var(--dc-r5-tools-h);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(168,85,247,.4);
  border-radius:16px;
  background:rgba(7,7,12,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
}

.dc-r5-tools button{
  min-width:0;
  margin:0;
  padding:7px 3px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:8.5px;
  line-height:1.1;
  font-weight:950;
}

.dc-r5-tools button+button{
  border-left:1px solid rgba(255,255,255,.12);
}

.dc-r5-tool-icon{
  display:grid;
  place-items:center;
  height:34px;
  margin-bottom:3px;
  color:#fff;
  font-size:24px;
}

.dc-r5-tools button:first-child,
.dc-r5-tools button:last-child{
  color:var(--dc-r5-gold);
}

.dc-r5-tools button:first-child .dc-r5-tool-icon,
.dc-r5-tools button:last-child .dc-r5-tool-icon{
  color:var(--dc-r5-gold);
}

/* ── Bottom navigation ─────────────────────────────── */

html.dc-hud-r5-ready .dc-trail-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:90!important;
  width:100%!important;
  min-height:var(--dc-r5-nav-h)!important;
  padding:8px 7px calc(8px + env(safe-area-inset-bottom,0px))!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:2px!important;
  border:0!important;
  border-top:1px solid rgba(168,85,247,.28)!important;
  border-radius:0!important;
  background:rgba(3,3,8,.98)!important;
  box-shadow:none!important;
}

html.dc-hud-r5-ready .dc-trail-nav a{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:0!important;
  min-height:74px!important;
  margin:0!important;
  padding:5px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.52)!important;
  text-decoration:none!important;
  font-size:9px!important;
  font-weight:900!important;
}

html.dc-hud-r5-ready .dc-trail-nav a.active{
  color:var(--dc-r5-gold)!important;
  background:radial-gradient(circle at 50% 100%,rgba(246,200,63,.16),transparent 60%)!important;
}

.dc-r5-nav-icon{
  display:block;
  color:currentColor;
  font-size:25px;
  line-height:1;
}

/* ── Map presentation ──────────────────────────────── */

html.dc-hud-r5-ready:not(.dc-radar-active-r2) #dcTrailMap{
  background:#111!important;
}

html.dc-hud-r5-ready:not(.dc-radar-active-r2) #dcTrailMap canvas{
  /* R20G7: do not CSS-filter the MapLibre/WebGL canvas. */
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
}

html.dc-hud-r5-ready:not(.dc-radar-active-r2) #dcTrailMap::after{
  /* R20G7: retire HUD tint above the WebGL map surface. */
  content:none!important;
  display:none!important;
}

/* Keep map markers and controls above the visual tint. */
html.dc-hud-r5-ready .maplibregl-marker,
html.dc-hud-r5-ready .maplibregl-control-container{
  z-index:3;
}

.dc-waypoint-marker.dc-waypoint-hazard-r4b{
  background:#b91c1c!important;
  border-color:#fff!important;
}

/* Radar remains the proven R2 surface. */
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-mode,
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-left,
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-right,
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-trail-card,
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-tools{
  display:none!important;
}

html.dc-radar-active-r2 #dcRadarViewR2{
  z-index:75!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-top{
  z-index:82!important;
}

html.dc-home-map-preview-r3r1 #dcTrailHudR5{
  display:none!important;
}

@media(max-height:760px){
  :root{
    --dc-r5-nav-h:90px;
    --dc-r5-tools-h:72px;
    --dc-r5-edge:12px;
  }
  .dc-r5-top{
    min-height:calc(env(safe-area-inset-top,0px) + 76px);
    grid-template-columns:52px minmax(0,1fr) 64px;
  }
  .dc-r5-back{width:46px;height:46px;border-radius:14px;font-size:30px}
  #dcR5Radar{width:62px;height:43px;border-radius:14px;font-size:10px}
  .dc-r5-title strong{font-size:20px}
  .dc-r5-title span{margin-top:5px;font-size:8px}
  .dc-r5-mode{top:calc(env(safe-area-inset-top,0px) + 80px);min-height:42px}
  .dc-r5-mode button{min-height:42px;font-size:11px}
  .dc-r5-left{top:calc(env(safe-area-inset-top,0px) + 130px);width:78px}
  .dc-r5-compass{width:74px;height:74px}
  .dc-r5-degree.d0{transform:translateY(-29px)}
  .dc-r5-degree.d45{transform:translate(21px,-21px)}
  .dc-r5-degree.d90{transform:translate(30px,0)}
  .dc-r5-degree.d135{transform:translate(21px,21px)}
  .dc-r5-degree.d180{transform:translateY(29px)}
  .dc-r5-degree.d225{transform:translate(-21px,21px)}
  .dc-r5-degree.d270{transform:translate(-30px,0)}
  .dc-r5-degree.d315{transform:translate(-21px,-21px)}
  .dc-r5-square{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}
  .dc-r5-right{top:calc(env(safe-area-inset-top,0px) + 190px)}
  .dc-r5-trail-card{padding:11px 12px;width:min(48vw,270px)}
  .dc-r5-trail-name{font-size:15px}
  .dc-r5-trail-info-btn{min-height:36px}
  html.dc-hud-r5-ready .dc-trail-nav a{min-height:62px!important}
}

@media(max-width:370px){
  :root{--dc-r5-edge:9px}
  .dc-r5-top{grid-template-columns:48px minmax(0,1fr) 58px;gap:5px}
  .dc-r5-back{width:44px;height:44px}
  #dcR5Radar{width:56px;font-size:9px}
  .dc-r5-title strong{font-size:18px}
  .dc-r5-mode{width:68vw}
  .dc-r5-left{width:70px}
  .dc-r5-compass{width:68px;height:68px}
  .dc-r5-square{width:49px!important;height:49px!important;min-width:49px!important;min-height:49px!important}
  .dc-r5-right{width:50px}
  .dc-r5-trail-card{min-width:0;width:52vw}
  .dc-r5-trail-name{font-size:14px}
  .dc-r5-trail-place{font-size:9px}
  .dc-r5-tools button{font-size:7.5px}
}

@media(max-height:590px){
  .dc-r5-mode{display:none}
  .dc-r5-right .dc-r5-dc{display:none}
  .dc-r5-trail-card{display:none}
}

/* =====================================================================
   DIRECT_CONNECT_UI_R7B_SHARED_VELVET_HUD_CONVERGENCE_20260818
   UI-only convergence. Functional owners remain unchanged.
   ===================================================================== */

:root{
  --dc-r7b-edge:max(12px,env(safe-area-inset-left,0px));
  --dc-r7b-right:max(12px,env(safe-area-inset-right,0px));
  --dc-r7b-top:env(safe-area-inset-top,0px);
  --dc-r7b-bottom:env(safe-area-inset-bottom,0px);
  --dc-r7b-tile:68px;
  --dc-r7b-gap:10px;
  --dc-r7b-purple:#9d3cff;
  --dc-r7b-gold:#f2c94c;
  --dc-r7b-surface:rgba(18,18,27,.93);
  --dc-r7b-border:rgba(168,85,247,.62);
}

/* Full spatial viewport. */
html.dc-hud-r5-ready,
html.dc-hud-r5-ready body,
html.dc-hud-r5-ready .dc-trail-shell{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  background:#05030a!important;
}

html.dc-hud-r5-ready #dcTrailMap{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
}

@supports not (height:100dvh){
  html.dc-hud-r5-ready #dcTrailMap{
    height:100vh!important;
    min-height:100vh!important;
  }
}

/* R7B removes the navbar from source. This is cache-safe retirement. */
html.dc-hud-r5-ready .dc-trail-nav{
  display:none!important;
}

html.dc-hud-r5-ready .dc-trail-top,
html.dc-hud-r5-ready #dcTrailStatus{
  display:none!important;
}

/* Top identity remains light and floats over the map. */
#dcTrailHudR5 .dc-r5-top{
  position:fixed!important;
  left:var(--dc-r7b-edge)!important;
  right:var(--dc-r7b-right)!important;
  top:calc(var(--dc-r7b-top) + 10px)!important;
  min-height:62px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 70px!important;
  align-items:center!important;
  gap:8px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:2147482500!important;
}

#dcTrailHudR5 .dc-r5-top > *{
  pointer-events:auto!important;
}

#dcTrailHudR5 .dc-r5-title{
  min-width:0!important;
  padding:0 4px!important;
  text-align:center!important;
  text-shadow:0 2px 8px rgba(0,0,0,.95)!important;
}

#dcTrailHudR5 .dc-r5-title strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(20px,5.1vw,29px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.115em!important;
  white-space:nowrap!important;
}

#dcTrailHudR5 .dc-r5-title span{
  display:block!important;
  margin-top:5px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:.17em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#dcTrailHudR5 .dc-r5-back,
#dcTrailHudR5 #dcR5Radar{
  display:grid!important;
  place-items:center!important;
  height:58px!important;
  min-height:58px!important;
  border:1px solid var(--dc-r7b-border)!important;
  border-radius:18px!important;
  background:var(--dc-r7b-surface)!important;
  color:#fff!important;
  box-shadow:0 7px 20px rgba(0,0,0,.42)!important;
  text-decoration:none!important;
}

#dcTrailHudR5 .dc-r5-back{
  width:58px!important;
  min-width:58px!important;
}

#dcTrailHudR5 #dcR5Radar{
  width:70px!important;
  min-width:70px!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}

/* Two outdoor modes only. */
#dcTrailHudR5 .dc-r5-mode{
  position:fixed!important;
  top:calc(var(--dc-r7b-top) + 82px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(52vw,260px)!important;
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(168,85,247,.42)!important;
  border-radius:17px!important;
  background:rgba(18,18,27,.92)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.36)!important;
  z-index:2147482400!important;
}

#dcTrailHudR5 .dc-r5-mode button{
  min-height:42px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}

#dcTrailHudR5 .dc-r5-mode button+button{
  border-left:1px solid rgba(255,255,255,.12)!important;
}

#dcTrailHudR5 .dc-r5-mode button.on,
#dcTrailHudR5 .dc-r5-mode button[aria-pressed="true"]{
  color:var(--dc-r7b-gold)!important;
  background:linear-gradient(
    180deg,
    rgba(242,201,76,.15),
    rgba(242,201,76,.045)
  )!important;
  box-shadow:inset 0 -2px 0 rgba(242,201,76,.74)!important;
}

/* Shared Velvet-style rails. */
#dcTrailHudR5 .dc-r5-left{
  position:fixed!important;
  left:var(--dc-r7b-edge)!important;
  top:calc(var(--dc-r7b-top) + 134px)!important;
  width:var(--dc-r7b-tile)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:var(--dc-r7b-gap)!important;
  z-index:2147482300!important;
  pointer-events:none!important;
}

#dcTrailHudR5 .dc-r5-left > *{
  pointer-events:auto!important;
}

#dcTrailHudR5 .dc-r5-right{
  position:fixed!important;
  right:var(--dc-r7b-right)!important;
  top:calc(var(--dc-r7b-top) + 154px)!important;
  width:var(--dc-r7b-tile)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:var(--dc-r7b-gap)!important;
  z-index:2147482300!important;
  pointer-events:none!important;
}

#dcTrailHudR5 .dc-r5-right > *{
  pointer-events:auto!important;
}

/* Canonical Velvet compass visual vocabulary. */
#dcTrailHudR5 .dc-r5-compass.vw-owner-compass-v2{
  position:relative!important;
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  margin-left:20px!important;
  margin-bottom:2px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:50%!important;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(82,18,112,.97) 0 37%,
      rgba(33,12,49,.98) 62%,
      rgba(9,6,15,.98) 100%
    )!important;
  box-shadow:
    0 0 0 1px rgba(183,89,255,.72),
    0 0 0 4px rgba(93,25,132,.42),
    0 0 18px rgba(157,60,255,.58),
    0 7px 22px rgba(0,0,0,.48)!important;
}

#dcTrailHudR5 .dc-r5-compass .vw-owner-degree-ring{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:4!important;
  transition:transform 180ms linear!important;
}

#dcTrailHudR5 .dc-r5-compass .vw-owner-degree{
  position:absolute!important;
  display:block!important;
  width:26px!important;
  text-align:center!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:850!important;
  color:#fff!important;
  opacity:.96!important;
  visibility:visible!important;
  text-shadow:
    0 1px 3px rgba(0,0,0,.98),
    0 0 3px rgba(255,255,255,.22)!important;
  z-index:5!important;
}

/* Existing Direct Connect d0..d315 geometry is retained;
   the canonical classes are now shared for visual identity. */

#dcTrailHudR5 .dc-r5-compass .vw-owner-cardinal-center{
  color:#fff!important;
  font-size:clamp(20px,5vw,28px)!important;
  line-height:.94!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  text-shadow:
    0 0 6px rgba(255,255,255,.28),
    0 0 12px rgba(174,71,255,.92)!important;
  z-index:6!important;
}

/* Same tile grammar as Velvet Wayz: dark face, purple edge, compact label. */
#dcTrailHudR5 .dc-r5-square{
  position:relative!important;
  width:var(--dc-r7b-tile)!important;
  height:var(--dc-r7b-tile)!important;
  min-width:var(--dc-r7b-tile)!important;
  min-height:var(--dc-r7b-tile)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:5px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  border:1px solid var(--dc-r7b-border)!important;
  border-radius:18px!important;
  background:var(--dc-r7b-surface)!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:0 7px 20px rgba(0,0,0,.42)!important;
}

#dcTrailHudR5 .dc-r5-square svg{
  width:31px!important;
  height:31px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}

#dcTrailHudR5 .dc-r5-square small{
  margin:0!important;
  color:rgba(255,255,255,.78)!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
}

#dcTrailHudR5 .dc-r7b-emoji{
  display:block!important;
  font-size:31px!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))!important;
}

#dcTrailHudR5 .dc-r5-hazard{
  border-color:rgba(255,64,92,.72)!important;
  background:rgba(78,9,24,.93)!important;
}

#dcTrailHudR5 .dc-r5-share-badge{
  position:absolute!important;
  top:-8px!important;
  right:-7px!important;
  min-width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 6px!important;
  border:2px solid #09060e!important;
  border-radius:999px!important;
  background:#8b2cff!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  z-index:5!important;
}

/* Compact trail identity card, not another giant panel. */
#dcTrailHudR5 .dc-r5-trail-card{
  position:fixed!important;
  left:var(--dc-r7b-edge)!important;
  bottom:calc(var(--dc-r7b-bottom) + 92px)!important;
  width:min(48vw,245px)!important;
  min-width:0!important;
  padding:11px 12px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(168,85,247,.58)!important;
  border-radius:17px!important;
  background:rgba(10,9,15,.88)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.48)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  z-index:2147482200!important;
}

#dcTrailHudR5 .dc-r5-trail-kicker{
  color:var(--dc-r7b-gold)!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
}

#dcTrailHudR5 .dc-r5-trail-name{
  margin-top:4px!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.08!important;
  font-weight:950!important;
}

#dcTrailHudR5 .dc-r5-trail-place{
  margin-top:5px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:9px!important;
  font-weight:800!important;
}

#dcTrailHudR5 .dc-r5-trail-info-btn{
  min-height:34px!important;
  margin-top:8px!important;
  border:1px solid rgba(242,201,76,.58)!important;
  border-radius:12px!important;
  background:rgba(242,201,76,.055)!important;
  color:var(--dc-r7b-gold)!important;
}

/* Outdoor controls are floating tiles, not a bottom navigation bar. */
#dcTrailHudR5 .dc-r5-tools{
  position:fixed!important;
  left:50%!important;
  bottom:calc(var(--dc-r7b-bottom) + 12px)!important;
  transform:translateX(-50%)!important;
  width:min(calc(100vw - 24px),430px)!important;
  height:68px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:2147482300!important;
}

#dcTrailHudR5 .dc-r5-tools button{
  min-width:0!important;
  min-height:68px!important;
  padding:5px 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border:1px solid rgba(168,85,247,.52)!important;
  border-radius:17px!important;
  background:rgba(18,18,27,.93)!important;
  color:#fff!important;
  box-shadow:0 7px 20px rgba(0,0,0,.42)!important;
  font-size:7.5px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:.025em!important;
}

#dcTrailHudR5 .dc-r5-tool-icon{
  color:var(--dc-r7b-gold)!important;
  font-size:23px!important;
  line-height:1!important;
}

/* ================================================================
   Radar = alternate spatial canvas under the same cockpit.
   These late rules intentionally override R5's prior hide behavior.
   ================================================================ */

html.dc-radar-active-r2 #dcTrailHudR5{
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:2147482100!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-top{
  display:grid!important;
  visibility:visible!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-mode{
  display:grid!important;
  visibility:visible!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-left,
html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-right{
  display:flex!important;
  visibility:visible!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-tools{
  display:grid!important;
  visibility:visible!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 .dc-r5-trail-card{
  display:block!important;
  visibility:visible!important;
  opacity:.72!important;
}

html.dc-radar-active-r2 #dcTrailHudR5 a,
html.dc-radar-active-r2 #dcTrailHudR5 button{
  pointer-events:auto!important;
}

html.dc-radar-active-r2 #dcRadarViewR2{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  z-index:70!important;
}

html.dc-radar-active-r2 #dcTrailMap{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Home preview remains a clean embedded map. */
html.dc-home-map-preview-r3r1 #dcTrailHudR5{
  display:none!important;
}

@media(max-height:760px){
  :root{
    --dc-r7b-tile:58px;
    --dc-r7b-gap:8px;
  }

  #dcTrailHudR5 .dc-r5-top{
    top:calc(var(--dc-r7b-top) + 7px)!important;
    min-height:52px!important;
    grid-template-columns:50px minmax(0,1fr) 62px!important;
  }

  #dcTrailHudR5 .dc-r5-back{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }

  #dcTrailHudR5 #dcR5Radar{
    width:62px!important;
    height:50px!important;
    min-width:62px!important;
    min-height:50px!important;
  }

  #dcTrailHudR5 .dc-r5-title strong{
    font-size:19px!important;
  }

  #dcTrailHudR5 .dc-r5-title span{
    margin-top:4px!important;
    font-size:7.5px!important;
  }

  #dcTrailHudR5 .dc-r5-mode{
    top:calc(var(--dc-r7b-top) + 66px)!important;
    min-height:38px!important;
  }

  #dcTrailHudR5 .dc-r5-mode button{
    min-height:38px!important;
  }

  #dcTrailHudR5 .dc-r5-left{
    top:calc(var(--dc-r7b-top) + 112px)!important;
  }

  #dcTrailHudR5 .dc-r5-right{
    top:calc(var(--dc-r7b-top) + 128px)!important;
  }

  #dcTrailHudR5 .dc-r5-compass.vw-owner-compass-v2{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    margin-left:16px!important;
  }

  #dcTrailHudR5 .dc-r5-trail-card{
    bottom:calc(var(--dc-r7b-bottom) + 80px)!important;
    width:min(46vw,220px)!important;
    padding:9px 10px!important;
  }

  #dcTrailHudR5 .dc-r5-trail-info-btn{
    display:none!important;
  }

  #dcTrailHudR5 .dc-r5-tools{
    bottom:calc(var(--dc-r7b-bottom) + 9px)!important;
    height:60px!important;
  }

  #dcTrailHudR5 .dc-r5-tools button{
    min-height:60px!important;
    font-size:6.8px!important;
  }

  #dcTrailHudR5 .dc-r5-tool-icon{
    font-size:20px!important;
  }
}

@media(max-width:370px){
  :root{
    --dc-r7b-edge:max(8px,env(safe-area-inset-left,0px));
    --dc-r7b-right:max(8px,env(safe-area-inset-right,0px));
    --dc-r7b-tile:54px;
    --dc-r7b-gap:7px;
  }

  #dcTrailHudR5 .dc-r5-title strong{
    font-size:17px!important;
    letter-spacing:.08em!important;
  }

  #dcTrailHudR5 .dc-r5-title span{
    font-size:7px!important;
  }

  #dcTrailHudR5 .dc-r5-mode{
    width:48vw!important;
  }

  #dcTrailHudR5 .dc-r5-compass.vw-owner-compass-v2{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    margin-left:12px!important;
  }

  #dcTrailHudR5 .dc-r5-square small{
    font-size:7px!important;
  }

  #dcTrailHudR5 .dc-r7b-emoji{
    font-size:26px!important;
  }

  #dcTrailHudR5 .dc-r5-trail-card{
    width:48vw!important;
  }

  #dcTrailHudR5 .dc-r5-tools{
    width:calc(100vw - 16px)!important;
    gap:5px!important;
  }
}

/* SOURCE_END dc-trail-hud-r5.css */