:root {
  --z-map: 0;
  --z-panel: 1200;
  --z-handle: 1300;
  --z-bars: 9000;
--tab-width: 28px;
--panel-offset: 28px;    /* handle width */
 --panel-width-presets: 260px;
--panel-width-info: 280px;
}
 

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }

 /* Map fills the screen minus the status bar */
 #map {
   position: fixed;
   top: 40px;
   left: 0;
   right: 0;
   bottom: 40px;
   /* same as status bar height */
   background: #e0e0e0;
z-index: var(--z-map);
   /* fallback background so it's not just white */
 }

#overlay-root {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* IMPORTANT */
  z-index: 1500;
}

#overlay-root > * {
  pointer-events: auto;
}


.preset-info {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.preset-info:hover {
  background: rgba(0,0,0,0.05);
}

.preset-desc {
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 2px;
}


 /* ----- GDU VIDEO MODE ----- */
 body.gdu-mode #map {
   /* still between the top and bottom bars */
   top: 40px;
   bottom: 40px;

   /* height is full between bars */
   height: auto;
   /* Leaflet will use this block */

   /* center horizontally */
   left: 50%;
   right: auto;
   transform: translateX(-50%);

   /* 5:8 aspect ratio (W:H) relative to available height */
   width: calc((100vh - 80px) * 0.625);
   /* 80px = 40 top + 40 bottom */
   max-width: 100%;
   /* safety on narrow windows */

   /* Optional: small rounded corners to see the box */
   border-radius: 8px;
   overflow: hidden;
 }

 /* make sure transform is reset in normal mode */
 body:not(.gdu-mode) #map {
   transform: none;
 }


 .details-follow-btn.details-following {
   background: #27ae60;
   box-shadow: 0 2px 6px rgba(39, 174, 96, 0.5);
 }

 #followBtn {
   width: 100%;
   display: block;
   box-sizing: border-box;
   padding: 12px 14px;
   margin-top: 12px;

   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.3px;

   border-radius: 8px;
   border: none;
   cursor: pointer;

   transition: background 0.2s ease, box-shadow 0.2s ease;
 }

 /* Normal (not following) */
 #followBtn:not(.details-following) {
   background: #3b82f6;
   color: #fff;
 }

 /* Following state */
 #followBtn.details-following {
   background: #27ae60;
   color: #fff;
   box-shadow: 0 2px 8px rgba(39, 174, 96, 0.45);
 }

 .status-item.centered {
   outline: 2px solid #00cfff;
   outline-offset: 2px;
   box-shadow: 0 0 8px rgba(0, 207, 255, 0.9);
 }



 /*.status-bar-top,
.control-bar-bottom {
  background: linear-gradient(
    180deg,
    #2a2f36 0%,
    #1c2026 45%,
    #12161c 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 4px 12px rgba(0,0,0,0.4);

  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.8);
}*/






 /* === BOTTOM-LEFT DETAILS CARD (CLEAN COLLAPSE) === */

.details-panel {
  position: fixed;
  left: var(--tab-width);
  bottom: 48px;

  width: var(--panel-width-info);
  height: 50vh;
  max-height: calc(100vh - 40px - 48px - 16px);

  background: #fdfdfd;
  border-radius: 0 12px 12px 0;

  /* FULLY hide behind the tab */
  transform: translateX(
    calc(-1 * (var(--panel-width-info) + var(--tab-width)))
  );

  transition: transform 0.25s ease;
  z-index: var(--z-panel);
}

.details-panel.open {
  transform: translateX(0);
}


 .details-panel::before {
   content: "";
   position: absolute;
   inset: 0;
   /* cover the entire panel */
   height: 100%;
   /* FULL HEIGHT */

   background: linear-gradient(180deg,
       rgba(175, 205, 245, 0.95) 0%,
       /* strong blue at the top */
       rgba(210, 225, 245, 0.70) 35%,
       /* soft mid fade */
       rgba(245, 247, 250, 0.40) 70%,
       /* very light wash */
       rgba(253, 253, 253, 0.10) 100%
       /* almost white at bottom */
     );

   pointer-events: none;
   border-radius: 0 12px 12px 0;
   z-index: -1;
 }





 /* Open state */
 .details-panel.open {
   transform: translateX(0);
 }

 .details-handle {
   position: fixed;
left: 0;
   
   /* floats OUTSIDE the card */
   top: 50%;
   transform: translateY(-50%);

   width: var(--tab-width);
   height: 90px;
   /* a bit taller to fit icon + text */

   background: #fdfdfd;
   border-radius: 0 8px 8px 0;
   box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   padding: 6px 4px;

   cursor: pointer;
  z-index: var(--z-handle);
   /* above the card */
 }

 /* little info icon */
 .details-handle-icon {
   font-size: 16px;
   line-height: 1;
   color: #3498db;
   /* matches your blue accents */
 }

 .details-handle-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #333;

   writing-mode: vertical-rl;
   text-orientation: mixed;
   transform: rotate(180deg);
   /* so it reads top-to-bottom */
 }

 /* arrow at the bottom */
 .details-handle-arrow {
   font-size: 16px;
   font-weight: 700;
   color: #333;
   line-height: 1;
   pointer-events: none;
   transition: transform 0.2s ease;
 }


 /* Flip arrow when open */
 .details-panel.open .details-handle-arrow {
   transform: rotate(180deg);
 }


 .details-inner {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 14px 18px 14px;
   /* a bit more air */
 }

 .details-header {
   display: flex;
   align-items: center;
   gap: 16px;
   padding-bottom: 10px;
   border-bottom: 1px solid #e4e4e4;
 }



 .details-icon {
   width: 72px;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: visible;
 }

 .details-header-text {
   flex: 1;
   /* take all remaining space */
   display: flex;
   flex-direction: column;
   align-items: center;
   /* horizontal centering */
   text-align: center;
   /* center the text itself */
 }

 .details-name {
   font-weight: 700;
   font-size: 22px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #111;
 }

 .details-id {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.16em;
   color: #999;
   margin-top: 3px;
 }

 .details-body {
   margin-top: 12px;
   flex: 1;
   overflow-y: auto;
 }

 .details-row {
   display: flex;
   align-items: baseline;
   margin-bottom: 6px;
   font-size: 13px;
 }

 .details-label {
   min-width: 90px;
   /* keeps the column straight */
   color: #777;
 }

 .details-value {
   flex: 1;
   text-align: right;
   font-family: "JetBrains Mono", "Fira Code", monospace;
   color: #222;
 }

.details-handle,
.presets-handle {
  z-index: var(--z-handle);
}

/* INFO panel */
.details-panel {
  position: fixed;
  left: var(--tab-width);
  bottom: 48px;

  width: var(--panel-width-info);
  height: 50vh;

  transform: translateX(
    calc(-1 * (var(--panel-width-info) + var(--tab-width)))
  );

  transition: transform 0.25s ease;
  z-index: var(--z-panel);
}

.details-panel.open {
  transform: translateX(0);
}

/* PRESETS panel */
.presets-panel {
  position: fixed;
  left: var(--tab-width);
  bottom: -20px;

  width: var(--panel-width-presets);
  height: 40vh;

  transform: translateX(
    calc(-1 * (var(--panel-width-presets) + var(--tab-width)))
  );

  transition: transform 0.25s ease;
  z-index: var(--z-panel);
}

.presets-panel.open {
  transform: translateX(0);
}





 .coords-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .garmin-field {
   font-family: "JetBrains Mono", "Consolas", monospace;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.5px;

   color: #dffaff;
   background: rgba(0, 0, 0, 0.35);

   padding: 3px 8px 4px 8px;
   border-radius: 4px;

   border: 1px solid #00c6ff;
   outline: 1px solid rgba(0, 198, 255, 0.2);
   outline-offset: -2px;

   box-shadow:
     0 0 6px rgba(0, 198, 255, 0.35),
     inset 0 0 4px rgba(0, 198, 255, 0.25);

   min-width: 20ch;
   text-align: center;

   /* Prevent copying, selecting, dragging */
   user-select: none;
   pointer-events: none;
 }



 /* ==== PRESETS PANEL ==== */
 .presets-panel {
   position: absolute;
   .presets-panel {
  transform: translateX(calc(-100% - var(--panel-offset)));
}

   bottom: -20px;

   width: 260px;
   height: 40vh;

   background: #fdfdfd;
   box-shadow: 8px 0 18px rgba(0, 0, 0, 0.18);
   border-radius: 0 12px 12px 0;

   transform: translateX(calc(-100% - var(--tab-width)));

   transition: transform 0.25s ease;
   z-index: 1190;
   /* just below details panel */
 }

 /* Open state */
 .presets-panel.open {
   transform: translateX(0);
 }

 /* Handle (matching style of details panel) */
 .presets-handle {
   position: fixed;
left: 0;
  
   top: calc(50% + 110px);
   transform: translateY(-50%);
    width: var(--tab-width);
   height: 90px;

   background: #fdfdfd;
   border-radius: 0 8px 8px 0;
   box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 6px 4px;
   gap: 4px;
 z-index: var(--z-handle);
   cursor: pointer;
 }

 .presets-handle-icon {
   font-size: 16px;
   color: #9b59b6;
   /* purple-ish, change to taste */
 }

 .presets-handle-label {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   color: #333;
 }

 .presets-handle-arrow {
   font-size: 16px;
   color: #333;
   transition: transform 0.2s ease;
 }

 .presets-panel.open .presets-handle-arrow {
   transform: rotate(180deg);
 }

 /* Panel inner */
 .presets-inner {
   height: 100%;
   padding: 12px;
   overflow-y: auto;
 }

 .presets-header h3 {
   margin: 0 0 12px 0;
   font-size: 16px;
   text-align: center;
 }

 .presets-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 /* Each preset row */
 .preset-row {
   display: grid;
   grid-template-columns: 20px 40px 1fr 26px;
   align-items: center;
   padding: 6px 8px;
   border-radius: 6px;
   background: #fafafa;
   border: 1px solid #ddd;
   font-size: 13px;
 }

 .preset-letter {
   font-weight: 700;
   font-size: 15px;
 }

 .preset-coords {
   font-family: "JetBrains Mono", monospace;
   font-size: 11px;
   color: #555;
 }

 /* small color picker */
 .preset-color {
   width: 22px;
   height: 18px;
   border: 1px solid #aaa;
   border-radius: 4px;
   padding: 0;
 }


 .status-pill {
   display: inline-flex;
   align-items: center;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }

 /* we’ll toggle these from JS */
 .status-live {
   background: #e5f7eb;
   color: #1c7c3a;
 }

 .status-delayed {
   background: #fff4e0;
   color: #aa6a07;
 }

 .status-stale {
   background: #fde5e5;
   color: #b53535;
 }

 .details-footer {
   margin-top: 12px;
   padding-top: 10px;
   border-top: 1px solid #e4e4e4;
   display: flex;
   justify-content: flex-end;
 }

 .details-follow-btn {
   padding: 7px 14px;
   border-radius: 999px;
   border: none;
   background: #3498db;
   color: #fff;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(52, 152, 219, 0.4);
 }

 .details-follow-btn:disabled {
   background: #c9d7e6;
   box-shadow: none;
   cursor: default;
 }





 /* ----- TOP STATUS BAR (names only) ----- */
 .status-bar-top {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 40px;
   background: #111;
   display: flex;
   align-items: center;
   padding: 4px 8px;
   gap: 6px;
   box-sizing: border-box;
   color: #fff;
  z-index: var(--z-bars);
   overflow-x: auto;
   scrollbar-width: thin;

 }

 /* ----- BOTTOM CONTROL BAR (sliders etc) ----- */
 .control-bar-bottom {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 40px;
   background: #111;
   display: flex;
   align-items: center;
   padding: 4px 12px;
   gap: 12px;
   box-sizing: border-box;
   color: #ccc;
   z-index: var(--z-bars);
   font-size: 11px;
 }


 .status-item {
   min-width: 40px;
   max-width: 100px;

   padding: 0 6px;
   height: 24px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 600;
   color: #f5f7fa;
   box-sizing: border-box;
   border: 1px solid rgba(0, 0, 0, 0.4);
   user-select: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
 }




 .status-green {
   background: #2ecc71;
 }

 .status-orange {
   background: #f39c12;
 }

 .status-red {
   background: #e74c3c;
 }

 .config-button {
   padding: 4px 8px;
   border-radius: 4px;
   border: 1px solid #555;
   background: #333;
   color: white;
   cursor: pointer;
   font-size: 12px;
   white-space: nowrap;
 }

 .config-button:hover {
   background: #444;
 }

 /* Configuration panel overlays on top, near top-left */
 .config-panel {
   position: fixed;
   top: 50px;
   left: 10px;
   border: 1px solid #ddd;
   border-radius: 6px;
   padding: 8px;
   max-width: 750px;
   font-size: 13px;
   background: rgba(250, 250, 250, 0.96);
   z-index: 9000;
   display: none;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .config-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   gap: 8px;
   flex-wrap: wrap;
   cursor: move;
 }

 .config-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 6px;
 }

 .config-item {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }

 .config-item label {
   font-size: 12px;
   white-space: nowrap;
 }

 .config-desc {
   flex: 1;
   min-width: 0;
   font-size: 11px;
   padding: 2px 4px;
   border-radius: 4px;
   border: 1px solid #ccc;
   box-sizing: border-box;
 }

 .config-select {
   font-size: 11px;
   padding: 2px 4px;
   border-radius: 4px;
   border: 1px solid #ccc;
   background: #fff;
 }

 .config-color {
   width: 32px;
   height: 18px;
   padding: 0;
   border-radius: 4px;
   border: 1px solid #ccc;
   box-sizing: border-box;
 }

 /* Custom map markers (icon + small label) */
 .custom-src-marker .marker-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   transform: translateZ(0);
 }

 /* Symbol container */
 .marker-symbol {
   position: relative;
   width: 40px;
   height: 40px;
   transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   /* base rotation (for how the art is drawn) + live heading from JS */
   transform: rotate(calc(var(--base-rot, 0deg) + var(--heading-rot, 0deg)));
 }

 .marker-symbol {
   filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
 }


 /* Small direction arrow container (for non-arrow types) */
 .direction-arrow {
   position: absolute;
   top: -10px;
   left: 50%;
   width: 10px;
   height: 16px;
   margin-left: -5px;
   transform-origin: 50% 14px;
   /* pivot near the base */
   filter: drop-shadow(0 0 1px #000);
   z-index: 10;
   /*  make sure it’s above the icon */
   pointer-events: none;
   /* so clicks pass through to the marker */
 }

 /* Triangle head */
 .direction-arrow-head {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 8px solid var(--status-color, #2ecc71);
 }

 /* Little tail to make direction obvious */
 .direction-arrow-tail {
   position: absolute;
   top: 8px;
   left: 4px;
   width: 2px;
   height: 6px;
   background: var(--status-color, #2ecc71);
   border-radius: 2px;
 }

 /* Hide the tail for all icons except boat */
 .marker-symbol:not(.marker-type-boat) .direction-arrow-tail {
   display: none;
 }


 .marker-label {
   font-size: 12px;
   font-weight: 700;
   color: #000;
   text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
   line-height: 1;
   margin-top: 2px;
 }

 /* ---------- Arrow icon (uses icon color = status color) ---------- */
 .marker-symbol.marker-type-arrow .arrow-body {
   position: absolute;
   left: 50%;
   top: 8px;
   width: 4px;
   height: 18px;
   margin-left: -2px;
   background: var(--icon-color, #2ecc71);
   border-radius: 2px;
 }

 .marker-symbol.marker-type-arrow .arrow-head {
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -6px;
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 9px solid var(--status-color, #2ecc71);
 }

 /* ---------- Plane icon (upright, main color = icon color) ---------- */
 .marker-symbol.marker-type-plane .plane-body {
   position: absolute;
   top: 6px;
   /* moved a bit up */
   left: 50%;
   width: 7px;
   /* was 5 */
   height: 24px;
   /* was 18 */
   margin-left: -3.5px;
   /* half of width */
   background: var(--icon-color, #3498db);
   border-radius: 4px;
 }

 .marker-symbol.marker-type-plane .plane-wing {
   position: absolute;
   top: 14px;
   left: 50%;
   width: 24px;
   /* was 18 */
   height: 5px;
   /* was 4 */
   margin-left: -12px;
   /* half of width */
   background: var(--icon-color, #3498db);
   border-radius: 4px;
 }

 .marker-symbol.marker-type-plane .plane-tail {
   position: absolute;
   top: 4px;
   /* a bit higher */
   left: 50%;
   width: 14px;
   /* was 10 */
   height: 4px;
   /* was 3 */
   margin-left: -7px;
   /* half of width */
   background: var(--icon-color, #3498db);
   border-radius: 3px;
 }

 /* ---------- Helicopter top-down (upright) ---------- */
 .marker-symbol.marker-type-helicopter .heli-body {
   position: absolute;
   top: 15px;
   left: 50%;
   width: 10px;
   height: 12px;
   margin-left: -5px;
   background: var(--icon-color, #e67e22);
   border-radius: 3px;
 }

 .marker-symbol.marker-type-helicopter .heli-tail {
   position: absolute;
   top: 10px;
   left: 50%;
   width: 3px;
   height: 14px;
   margin-left: -1.5px;
   background: var(--icon-color, #e67e22);
   border-radius: 2px;
 }

 .marker-symbol.marker-type-helicopter .heli-tail-rotor {
   position: absolute;
   top: 8px;
   left: 50%;
   margin-left: -5px;
   width: 10px;
   height: 2px;
   background: var(--icon-color, #e67e22);
   border-radius: 1px;
 }



 .marker-symbol.marker-type-helicopter .heli-rotor-cross {
   position: absolute;
   top: 0;
   left: 50%;
   width: 28px;
   height: 28px;
   margin-left: -14px;
 }

 .marker-symbol.marker-type-helicopter .heli-rotor-cross::before,
 .marker-symbol.marker-type-helicopter .heli-rotor-cross::after {
   content: "";
   position: absolute;
   background: var(--icon-color, #e67e22);
   opacity: 0.9;
 }

 .marker-symbol.marker-type-helicopter .heli-rotor-cross::before {
   top: 13px;
   left: 0;
   width: 28px;
   height: 2px;
 }

 .marker-symbol.marker-type-helicopter .heli-rotor-cross::after {
   top: 0;
   left: 13px;
   width: 2px;
   height: 28px;
 }

 /* Plane + heli art is drawn "nose down", so we rotate 180° as a base */
 .marker-symbol.marker-type-plane,
 .marker-symbol.marker-type-helicopter {
   --base-rot: 180deg;
 }

 /* Move the small status arrow a bit in front of the nose for plane & heli */
 .marker-symbol.marker-type-plane .direction-arrow,
 .marker-symbol.marker-type-helicopter .direction-arrow {
   top: +6px;
   /* try -16 / -18 / -20px to taste */
 }

 /* ---------- Moto icon (upright, thicker) ---------- */
 .marker-symbol.marker-type-moto .moto-body {
   position: absolute;
   top: 6px;
   left: 50%;
   width: 12px;
   height: 22px;
   margin-left: -6px;
   background: var(--icon-color, #e91e63);
   border-radius: 6px;
 }

 /* Helmet / rider bump on top of the body */
 .marker-symbol.marker-type-moto .moto-body::before {
   content: "";
   position: absolute;
   top: -6px;
   left: 50%;
   width: 8px;
   height: 8px;
   margin-left: -4px;
   background: var(--icon-color, #e91e63);
   border-radius: 50%;
 }

 /* Front & rear wheels */
 .marker-symbol.marker-type-moto .moto-wheel-front,
 .marker-symbol.marker-type-moto .moto-wheel-rear {
   position: absolute;
   width: 6px;
   height: 6px;
   background: #111;
   border-radius: 50%;
 }

 .marker-symbol.marker-type-moto .moto-wheel-front {
   top: 2px;
   left: 50%;
   margin-left: -3px;
 }

 .marker-symbol.marker-type-moto .moto-wheel-rear {
   top: 28px;
   left: 50%;
   margin-left: -3px;
 }

 /* Seat */
 .marker-symbol.marker-type-moto .moto-seat {
   position: absolute;
   top: 14px;
   left: 50%;
   width: 10px;
   height: 4px;
   margin-left: -5px;
   background: var(--icon-color, #e91e63);
   border-radius: 2px;
 }

 /* Handlebars */
 .marker-symbol.marker-type-moto .moto-handle {
   position: absolute;
   top: 4px;
   left: 50%;
   width: 16px;
   height: 2px;
   margin-left: -8px;
   background: var(--icon-color, #e91e63);
   border-radius: 1px;
 }

 /* Moto: center the little heading arrow */
 .marker-symbol.marker-type-moto .direction-arrow,
 .marker-symbol.marker-type-racecar .direction-arrow {
   top: 8px;
   /* vertical centering */
   left: 50%;
   margin-left: -5px;
   /* center horizontally (arrow width = 10px) */
 }

 /* ---------- Racecar top-down (upright) ---------- */
 .marker-symbol.marker-type-racecar .race-body {
   position: absolute;
   top: 6px;
   left: 50%;
   width: 16px;
   /* overall width of car */
   height: 26px;
   /* overall length of car */
   margin-left: -8px;
   /* half of width */
   background: var(--icon-color, #e91e63);
   border-radius: 9px;
   /* capsule shape */
 }


 /* When the config is open on mobile, prevent the page behind from scrolling */
 body.config-open {
   overflow: hidden;
 }

 /* Mobile layout for the config panel */
 @media (max-width: 768px) {
   .config-panel {
     top: 40px;
     /* just under the top bar */
     left: 0;
     right: 0;
     bottom: 0;
     max-width: none;
     height: auto;

     border-radius: 0;
     border-left: none;
     border-right: none;

     padding: 8px 10px 16px;
     background: rgba(250, 250, 250, 0.98);
     overflow-y: auto;
   }

   /* Stack items instead of a dense grid */
   .config-grid {
     grid-template-columns: 1fr;
     /* single column */
     gap: 8px;
   }

   .config-item {
     padding: 6px 4px;
     border-bottom: 1px solid #ddd;
   }

   /* Make tap targets bigger */
   .config-item label {
     font-size: 14px;
   }

   .config-desc,
   .config-select,
   .config-color {
     font-size: 14px;
     height: 32px;
   }

   /* Bigger buttons for fingers */
   .config-button {
     font-size: 13px;
     padding: 6px 10px;
   }

   /* Slightly bigger checkboxes / radios */
   .config-item input[type="checkbox"],
   .config-item input[type="radio"] {
     transform: scale(1.3);
     margin-right: 4px;
   }
 }

 /* dark cockpit in the middle */
 .marker-symbol.marker-type-racecar .race-cockpit {
   position: absolute;
   top: 10px;
   left: 50%;
   width: 10px;
   height: 12px;
   margin-left: -5px;
   background: #111;
   border-radius: 6px;
   opacity: 0.85;
 }

 /* white center stripe */
 .marker-symbol.marker-type-racecar .race-stripe {
   position: absolute;
   top: 6px;
   left: 50%;
   width: 3px;
   height: 26px;
   margin-left: -1.5px;
   background: #fff;
   border-radius: 3px;
   opacity: 0.95;
 }

 /* put the small direction arrow roughly in the middle of the car */
 .marker-symbol.marker-type-racecar .direction-arrow {
   top: 11px;
   /* vertical center of the body */
   left: 50%;
   margin-left: -5px;
   /* center horizontally */
 }

 /* ---------- Truck top-down ---------- */
 .marker-symbol.marker-type-truck .truck-body {
   position: absolute;
   top: 8px;
   left: 50%;
   width: 22px;
   height: 18px;
   margin-left: -11px;
   background: var(--icon-color, #9b59b6);
   border-radius: 3px;
 }

 .marker-symbol.marker-type-truck .truck-cab {
   position: absolute;
   top: 4px;
   left: 50%;
   width: 16px;
   height: 10px;
   margin-left: -8px;
   background: var(--icon-color, #9b59b6);
   border-radius: 3px;
 }

 .marker-symbol.marker-type-truck .truck-wheel {
   position: absolute;
   width: 4px;
   height: 4px;
   background: #111;
   border-radius: 50%;
 }

 .marker-symbol.marker-type-truck .wheel-front-left {
   top: 6px;
   left: 6px;
 }

 .marker-symbol.marker-type-truck .wheel-front-right {
   top: 6px;
   right: 6px;
 }

 .marker-symbol.marker-type-truck .wheel-rear-left {
   bottom: 10px;
   left: 6px;
 }

 .marker-symbol.marker-type-truck .wheel-rear-right {
   bottom: 10px;
   right: 6px;
 }


 /* ----- Truck: parabolic dish + feedhorn (OUTWARD) ----- */
 .marker-symbol.marker-type-truck .truck-dish {
   position: absolute;
   top: -6px;
   /* lift it above the roof */
   left: 28px;
   /* push it outside the body */
   width: 12px;
   height: 12px;
   box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid var(--status-color, #9b59b6);
   border-right-color: transparent;
   /* OPEN outward */
   border-top-color: transparent;
   background: transparent;
   transform: rotate(0deg);
   filter: drop-shadow(0 0 1px #000);
 }







 /* ---------- Boat icon (upright) ---------- */
 .marker-symbol.marker-type-boat .boat-hull {
   position: absolute;
   bottom: 6px;
   left: 6px;
   width: 20px;
   height: 8px;
   background: var(--icon-color, #16a085);
   border-radius: 0 0 10px 10px;
 }

 .marker-symbol.marker-type-boat .boat-bow {
   display: none;
 }

 .marker-symbol.marker-type-boat .boat-mast {
   position: absolute;
   bottom: 14px;
   left: 10px;
   width: 2px;
   height: 10px;
   background: var(--icon-color, #16a085);
 }

 .marker-symbol.marker-type-boat .boat-sail {
   position: absolute;
   bottom: 16px;
   left: 12px;
   width: 0;
   height: 0;
   border-left: 8px solid var(--icon-color, #16a085);
   border-top: 9px solid transparent;
   border-bottom: 0 solid transparent;
 }

 /* Boat: center the small arrow on the hull */
 .marker-symbol.marker-type-boat .direction-arrow {
   top: 0px;
   /* roughly vertical center of boat hull */
   left: 50%;
   width: 10px;
   height: 16px;
   margin-left: -5px;
   /* true horizontal centering */
 }


 .config-close {
   background: transparent;
   border: none;
   font-size: 18px;
   font-weight: bold;
   color: #444;
   cursor: pointer;
   padding: 0 6px;
 }

 .config-close:hover {
   color: #f0f3f7;
 }

 /* Clean color picker styling (bottom bar) */
 .control-bar-bottom input[type="color"] {
   -webkit-appearance: none;
   appearance: none;
   width: 32px;
   height: 18px;
   padding: 0;
   border-radius: 4px;
   border: 1px solid #555;
   background: transparent;
   cursor: pointer;
   box-sizing: border-box;
 }

 /* Remove the ugly inner frame in Chrome/Safari */
 .control-bar-bottom input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
   border-radius: 4px;
 }

.details-handle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.presets-handle {
  position: fixed;
  left: 0;
  top: calc(50% + 110px); /* stacked below INFO */
  transform: translateY(-50%);
}


 .control-bar-bottom input[type="color"]::-webkit-color-swatch {
   border: none;
   border-radius: 4px;
 }

 /* Firefox */
 .control-bar-bottom input[type="color"]::-moz-color-swatch {
   border: none;
   border-radius: 4px;
 }

#presetsHandle,
#presetsPanel {
  display: none !important;
}