/* lx-fleet — map of the replayed fleet. The host fills whatever box the page gives it (position it from outside). */
.lx-fleet{position:absolute;inset:0;display:flex;flex-direction:column;background:#040a18;font-family:Montserrat,'Segoe UI',system-ui,sans-serif}
.lx-fleet__window{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(60% 60% at 50% 46%,rgba(30,118,255,.16),transparent 70%)}
.lx-fleet__stage{position:absolute}
.lx-fleet__map,.lx-fleet__web,.lx-fleet__names,.lx-fleet__fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.lx-fleet__map,.lx-fleet__names{overflow:visible}   /* land continues beyond the frame of the basemap */
.lx-fleet__web{mix-blend-mode:screen}

/* names: countries whisper, cities speak; a dark halo keeps both readable over the web of roads */
.lx-fleet__country{fill:#a9c6ff;fill-opacity:.5;font-weight:600;paint-order:stroke;stroke:#071433;stroke-opacity:.55;stroke-linejoin:round}
.lx-fleet__city{fill:#eaf1ff;fill-opacity:.9;font-weight:500;paint-order:stroke;stroke:#050d24;stroke-opacity:.9;stroke-linejoin:round}
.lx-fleet__city-dot{fill:#050d24;stroke:#cfe0ff;stroke-opacity:.9}

/* top bar: what am I looking at, when, and how many */
.lx-fleet__bar{position:absolute;z-index:2;left:16px;right:16px;top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.lx-fleet__chip,.lx-fleet__counts{border:1px solid rgba(255,210,74,.32);border-radius:4px;background:rgba(4,10,24,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lx-fleet__chip{display:flex;align-items:center;gap:9px;padding:9px 13px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b9c9ea;white-space:nowrap}
.lx-fleet__clock{color:#fff;font-weight:600;letter-spacing:.1em;min-width:13.5ch;padding-left:9px;border-left:1px solid rgba(132,168,255,.28);font-variant-numeric:tabular-nums}
.lx-fleet__dot{flex:none;width:8px;height:8px;border-radius:50%;background:#2af0a0;box-shadow:0 0 0 0 rgba(42,240,160,.7);animation:lxFleetPing 2s infinite}
@keyframes lxFleetPing{70%{box-shadow:0 0 0 9px rgba(42,240,160,0)}100%{box-shadow:0 0 0 0 rgba(42,240,160,0)}}
.lx-fleet__counts{display:flex}
.lx-fleet__count{padding:6px 14px 7px;text-align:center;min-width:64px}
.lx-fleet__count+.lx-fleet__count{border-left:1px solid rgba(132,168,255,.2)}
.lx-fleet__count b{display:block;font-size:18px;line-height:1.15;font-weight:700;color:#ffd24a;font-variant-numeric:tabular-nums}
.lx-fleet__count:nth-child(3) b{color:#78beff}
.lx-fleet__count span{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#b9c9ea;white-space:nowrap}

/* legend: the three marks of the map, drawn exactly as the map draws them */
.lx-fleet__legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 16px;border-top:1px solid rgba(132,168,255,.2);background:#060e22;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#dbe6fb}
.lx-fleet__key{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lx-fleet__sym{flex:none;display:inline-block}
.lx-fleet__sym--drive{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff 0 28%,#ffd24a 32% 100%);box-shadow:0 0 8px 2px rgba(255,210,74,.6)}
.lx-fleet__sym--rest{width:9px;height:9px;border-radius:50%;border:1.5px solid #78beff;background:#0a183c}
.lx-fleet__sym--trail{width:26px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,rgba(42,240,160,0),#2af0a0 45%,#ffd24a)}
.lx-fleet__note{margin:0 0 0 auto;font-size:9.5px;letter-spacing:.14em;color:#8ea3cf}

/* narrow host (phone): the clock chip shrinks to the clock, counters stay, the note goes */
.lx-fleet--narrow .lx-fleet__bar{left:10px;right:10px;top:10px}
.lx-fleet--narrow .lx-fleet__chip-label{display:none}
.lx-fleet--narrow .lx-fleet__clock{border-left:0;padding-left:0;min-width:0}
.lx-fleet--narrow .lx-fleet__chip{padding:8px 10px;font-size:9.5px;gap:7px}
.lx-fleet--narrow .lx-fleet__clock{min-width:0;letter-spacing:.06em}
.lx-fleet--narrow .lx-fleet__count{min-width:0;padding:5px 7px 6px}
.lx-fleet--narrow .lx-fleet__count b{font-size:15px}
.lx-fleet--narrow .lx-fleet__count span{font-size:7.5px;letter-spacing:.1em}
.lx-fleet--narrow .lx-fleet__legend{font-size:9px;gap:5px 12px;padding:8px 12px}
.lx-fleet--narrow .lx-fleet__note{margin-left:0}
/* compact host (a column of a panel): the label of the chip and the side note give their room to the numbers */
.lx-fleet--compact .lx-fleet__chip-label{display:none}
.lx-fleet--compact .lx-fleet__clock{border-left:0;padding-left:0}
.lx-fleet--compact .lx-fleet__count{min-width:0;padding:6px 11px 7px}

.lx-reduced .lx-fleet__dot{animation:none}
@media (prefers-reduced-motion:reduce){html:not(.js) .lx-fleet__dot{animation:none}}