/* ============================================================
   MAPSTR — REAL MapLibre map of France · CARTO voyager basemap
   The French Atelier by Acadomia
   Big, beautiful, 3D-tilted map · WHITE standout cards · gold markers
   ============================================================ */

.ms-root{
  --ms-navy:#000034;
  --ms-navy-deep:#00001F;
  --ms-navy-soft:#1C2238;
  --ms-gold:#C8A96B;
  --ms-gold-soft:#D8BC85;
  --ms-gold-deep:#A98D52;
  --ms-ivory:#F3EFE9;
  --ms-paper:#FAF7F1;
  --ms-on-dark:#F3EEE3;
  --ms-on-dark-soft:rgba(243,238,227,.72);
  --ms-gold-line:rgba(200,169,107,.45);
  --ms-serif:'Cormorant Garamond',Georgia,serif;
  --ms-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ms-navy-deep);
  color:var(--ms-on-dark);
  width:100%;
  overflow:hidden;
}

.ms-shell{
  max-width:1440px;
  margin:0 auto;
  padding:4.2rem 1.4rem 4.6rem;
}
.ms-compact .ms-shell{padding:3.4rem 1.4rem 3.4rem}

/* ----- Header ----- */
.ms-head{text-align:center;max-width:64ch;margin:0 auto 2rem}
.ms-eyebrow{
  display:inline-block;font-family:var(--ms-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ms-gold-soft);margin-bottom:1rem;
}
.ms-eyebrow::before{content:"";display:inline-block;width:32px;height:1px;background:var(--ms-gold-line);vertical-align:middle;margin-right:.7rem}
.ms-eyebrow::after{content:"";display:inline-block;width:32px;height:1px;background:var(--ms-gold-line);vertical-align:middle;margin-left:.7rem}
.ms-title{
  font-family:var(--ms-serif);font-weight:600;line-height:1.04;letter-spacing:-.012em;
  font-size:clamp(2.7rem,6vw,4.8rem);color:var(--ms-on-dark);margin:0 0 1.2rem;
}
.ms-ital{font-style:italic;color:var(--ms-gold-soft);font-weight:500}
.ms-tagline{
  font-family:var(--ms-serif);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--ms-on-dark-soft);line-height:1.5;margin:0;
}

/* ----- Journey selector — APPLE-SLEEK 3D LAYERED NEON cards ----- */
.ms-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin:0 auto 1.9rem;max-width:1180px;
  perspective:1400px;align-items:stretch;
}
/* All-Journeys hero spans the full top row; the 7 course cards flow beneath in
   a clean 4-column grid so every row is perfectly aligned (no staggered wrap). */
/* Individual course card — frosted glass, fine 3D depth, neon-blue edge that
   intensifies on hover/active. Quiet at rest, expensive in motion. */
.ms-tab{
  grid-column:span 1;min-width:0;text-align:left;cursor:pointer;
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 150% at 16% 0%,rgba(47,164,255,.10) 0%,rgba(47,164,255,0) 50%),
    linear-gradient(170deg,rgba(20,32,60,.78) 0%,rgba(8,16,40,.92) 100%);
  border:1px solid rgba(111,196,255,.16);border-radius:18px;
  padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.3rem;
  color:var(--ms-on-dark);font-family:var(--ms-sans);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 1px 0 rgba(160,210,255,.10) inset,
    0 0 0 1px rgba(111,196,255,.04) inset,
    0 18px 40px -26px rgba(0,8,40,.85);
  transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,border-color .34s ease,background .34s ease;
  transform-style:preserve-3d;
}
/* fine neon top-edge highlight — the "layered" Apple-sleek depth */
.ms-tab::before{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(111,196,255,.5),transparent);
  opacity:.5;transition:opacity .34s ease;pointer-events:none;
}
/* neon-blue edge glow layer (off at rest, blooms on hover/active) */
.ms-tab::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(47,164,255,0) , 0 0 0 0 rgba(47,164,255,0);
  opacity:0;transition:opacity .34s ease,box-shadow .34s ease;z-index:-1;
}
.ms-tab:hover{
  transform:translateY(-5px) scale(1.012);
  border-color:rgba(47,164,255,.55);
  background:
    radial-gradient(120% 150% at 16% 0%,rgba(47,164,255,.18) 0%,rgba(47,164,255,0) 52%),
    linear-gradient(170deg,rgba(26,40,72,.85) 0%,rgba(10,20,48,.94) 100%);
  box-shadow:
    0 1px 0 rgba(160,210,255,.16) inset,
    0 0 0 1px rgba(47,164,255,.35),
    0 0 26px -2px rgba(47,164,255,.45),
    0 30px 58px -28px rgba(0,8,40,.9);
}
.ms-tab:hover::before{opacity:1}
.ms-tab.active{
  border-color:rgba(111,196,255,.9);
  background:
    radial-gradient(120% 150% at 16% 0%,rgba(47,164,255,.26) 0%,rgba(47,164,255,0) 56%),
    linear-gradient(170deg,rgba(30,46,84,.92) 0%,rgba(12,24,56,.96) 100%);
  box-shadow:
    0 1px 0 rgba(160,210,255,.2) inset,
    0 0 0 1.5px #2FA4FF,
    0 0 28px -2px rgba(47,164,255,.6),
    0 0 60px -6px rgba(111,196,255,.45),
    0 30px 56px -28px rgba(0,8,40,.9);
}
.ms-tab.active::before{opacity:1}
.ms-tab-level{font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ms-gold-soft)}
.ms-tab.active .ms-tab-level{color:#6FC4FF}
.ms-tab-name{font-family:var(--ms-serif);font-size:1.36rem;font-weight:700;line-height:1.1;color:#F6FAFF}
.ms-tab-region{font-size:.8rem;color:rgba(191,228,255,.72);line-height:1.3}

/* ----- "All Journeys" MASTER button — the whole map of France.
   Full-width hero card on its OWN row, much wider & taller than the course
   cards, so it visually encompasses the SUM of all seven journeys. Deep navy
   glass with layered neon-blue lighting (Apple-sleek 3D). ----- */
/* DISTINCT COLOR from the 7 blue course cards: the All-Journeys hero is a warm
   GOLD-on-royal-navy treatment (gold edge, gold ambient wash, gold mark). This
   reads as the premium "master" card, clearly separate from the cool-blue
   course cards beneath it. */
.ms-tab-all{
  grid-column:1 / -1;width:100%;
  flex-direction:row;align-items:center;gap:1.15rem;display:flex;
  padding:1.5rem 1.7rem;border-radius:22px;
  background:
    radial-gradient(130% 200% at 10% 0%,rgba(200,169,107,.26) 0%,rgba(200,169,107,0) 44%),
    linear-gradient(135deg,#0A0726 0%,#140B33 46%,#1E1330 100%);
  border:1px solid rgba(200,169,107,.55);
  box-shadow:
    0 1px 0 rgba(216,188,133,.22) inset,
    0 0 0 1px rgba(200,169,107,.12) inset,
    0 24px 60px -28px rgba(0,8,40,.92),
    0 0 42px -10px rgba(200,169,107,.34);
  overflow:hidden;
}
.ms-tab-all::before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(216,188,133,.14) 48%,transparent 58%);
  opacity:.0;transition:opacity .5s ease;
}
.ms-tab-all:hover::before{opacity:1}
.ms-tab-all .ms-tab-level{color:var(--ms-gold-soft);letter-spacing:.22em}
.ms-tab-all .ms-tab-name{color:#FBF6EC;font-size:1.7rem;letter-spacing:-.01em}
.ms-tab-all .ms-tab-region{color:rgba(232,220,196,.82);font-size:.92rem}
.ms-tab-all .ms-tab-text{display:flex;flex-direction:column;gap:.18rem;flex:1 1 auto;min-width:0}
.ms-tab-all .ms-tab-all-mark{
  flex:none;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#F0DFB8;
  background:
    radial-gradient(circle at 38% 30%,rgba(216,188,133,.6) 0%,rgba(200,169,107,.2) 45%,rgba(200,169,107,.04) 100%);
  border:1px solid rgba(216,188,133,.66);
  box-shadow:
    0 0 0 6px rgba(200,169,107,.10),
    0 0 22px rgba(200,169,107,.55),
    0 0 44px rgba(216,188,133,.32),
    0 6px 16px rgba(0,0,30,.5);
}
.ms-tab-all .ms-tab-all-mark svg{width:30px;height:30px}
/* a subtle "spans the courses" cue: a fine gold rail on the right */
.ms-tab-all .ms-tab-all-cue{
  flex:none;align-self:stretch;display:flex;align-items:center;gap:.4rem;
  padding-left:1.1rem;margin-left:.4rem;border-left:1px solid rgba(200,169,107,.30);
  color:rgba(232,220,196,.9);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.ms-tab-all .ms-tab-all-cue b{font-family:var(--ms-serif);font-weight:700;font-size:1.5rem;color:var(--ms-gold-soft);letter-spacing:0}
.ms-tab-all:hover{
  transform:translateY(-4px);
  border-color:rgba(216,188,133,.8);
  box-shadow:
    0 1px 0 rgba(216,188,133,.26) inset,
    0 0 0 1px rgba(200,169,107,.22) inset,
    0 30px 70px -28px rgba(0,8,40,.95),
    0 0 58px -8px rgba(200,169,107,.55);
}
.ms-tab-all.active{
  border-color:#D8BC85;
  box-shadow:
    0 0 0 1.5px #C8A96B,
    0 0 34px rgba(200,169,107,.7),
    0 0 80px -6px rgba(216,188,133,.5),
    0 28px 64px -28px rgba(0,8,40,.95);
}

/* ----- Stage (map + panel + legend) — MUCH larger ----- */
.ms-stage{
  position:relative;width:100%;height:85vh;min-height:600px;max-height:920px;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(200,169,107,.32);
  box-shadow:0 50px 110px -50px rgba(0,0,0,.92),inset 0 0 0 1px rgba(255,255,255,.03);
}
.ms-compact .ms-stage{height:66vh;min-height:480px;max-height:760px}

.ms-map{position:absolute;inset:0;width:100%;height:100%;background:#0a1024}

/* MapLibre canvas + controls tone (voyager is a light basemap) */
.ms-map .maplibregl-canvas{outline:none}
.ms-map .maplibregl-ctrl-attrib{
  background:rgba(255,255,255,.82)!important;color:rgba(0,0,52,.7)!important;
  font-size:10px;border-radius:6px 0 0 0;
}
.ms-map .maplibregl-ctrl-attrib a{color:var(--ms-gold-deep)!important}
.ms-map .maplibregl-ctrl-group{
  background:#fff!important;border:1px solid rgba(0,0,52,.14)!important;
  border-radius:10px!important;overflow:hidden;box-shadow:0 8px 22px -10px rgba(0,0,0,.5)!important;
}
.ms-map .maplibregl-ctrl-group button+button{border-top:1px solid rgba(0,0,52,.1)!important}
.ms-map .maplibregl-ctrl button:hover{background:rgba(200,169,107,.16)!important}

/* ----- Apple-sleek BLUE-DOT markers ---------------------------------
   Design intent: small, calm, restrained blue dots at rest. On hover/active
   they light up to a strong neon-blue beacon (scale + layered glow). Quiet
   by default, electric on interaction — a premium, innovative map feel.
   CRITICAL (do not change): MapLibre wraps .ms-marker in a .maplibregl-marker
   div it positions with translate(). Keep that wrapper absolute and keep the
   inner node width:max-content with NO transform of its own, or pins detach
   from their coordinates (the prior vertical-drift bug). Animate .ms-marker-pin. */
.ms-map .maplibregl-marker{
  position:absolute!important;top:0!important;left:0!important;
  will-change:transform;
}
.ms-marker{
  position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;
  width:max-content;
}
.ms-marker:focus{outline:none}
.ms-marker:focus-visible .ms-marker-pin{box-shadow:0 0 0 4px rgba(111,196,255,.85)}

/* Small calm dot at rest — deep navy core, thin luminous blue ring, faint
   ambient halo. Reads as a refined point of light, never a clunky disc. */
.ms-marker-pin{
  position:relative;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#FFFFFF 0%,#CFEBFF 26%,#6FC4FF 52%,#2FA4FF 78%,#0A6BD6 100%);
  border:1px solid rgba(235,247,255,.98);
  box-shadow:
    0 1px 2px rgba(0,0,20,.45),
    0 0 0 4px rgba(47,164,255,.16),
    0 0 10px 1px rgba(47,164,255,.62),
    0 0 20px 3px rgba(111,196,255,.42);
  display:flex;align-items:center;justify-content:center;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease,background .26s ease,border-color .26s ease;
}
/* The number is hidden at rest on EVERY pin — the map reads as an elegant
   constellation of calm blue points of light, never a numbered metro route.
   The stop number fades in only on hover / active (inside the enlarged pin). */
.ms-marker-num{
  font-family:var(--ms-sans);font-weight:700;font-size:.5rem;
  color:#ffffff;line-height:1;opacity:0;transition:opacity .2s ease;
  text-shadow:0 1px 2px rgba(0,0,30,.7);
}
/* Numbered (single-course) pins are the SAME refined small dot as all-mode. */
.ms-marker:not(.ms-marker-dot) .ms-marker-pin{width:11px;height:11px}

.ms-marker-label{
  /* Absolutely positioned so it is OUTSIDE the flex flow MapLibre measures
     for anchor:'center' (prevents vertical detachment). */
  position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-3px);
  font-family:var(--ms-sans);font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:var(--ms-on-dark);white-space:nowrap;
  background:rgba(0,0,31,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:4px 11px;border-radius:999px;
  border:1px solid rgba(111,196,255,.55);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6),0 0 16px rgba(47,164,255,.4);
  opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;
}

/* ---- HOVER / ACTIVE: light up to strong neon blue ---- */
.ms-marker:hover{z-index:5}
.ms-marker.active{z-index:6}
.ms-marker:hover .ms-marker-pin,.ms-marker.active .ms-marker-pin{
  transform:scale(2.4);
  background:radial-gradient(circle at 40% 32%,#FFFFFF 0%,#9FD4FF 30%,#2FA4FF 70%,#0A6BD6 100%);
  border-color:#ffffff;
  box-shadow:
    0 0 0 5px rgba(47,164,255,.22),
    0 0 14px 3px rgba(47,164,255,.85),
    0 0 34px 8px rgba(111,196,255,.6),
    0 2px 6px rgba(0,0,20,.55);
}
.ms-marker.active .ms-marker-pin{transform:scale(2.6)}
.ms-marker:hover .ms-marker-label,.ms-marker.active .ms-marker-label{opacity:1;transform:translate(-50%,0)}
.ms-marker:hover .ms-marker-num,.ms-marker.active .ms-marker-num{opacity:1}

/* ----- Legend (kept dark glass, sits over a light map → readable) ----- */
.ms-legend{
  position:absolute;left:18px;bottom:18px;z-index:4;
  background:rgba(0,0,31,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(200,169,107,.36);border-radius:13px;padding:.85rem 1.05rem;
  font-family:var(--ms-sans);max-width:62vw;
  box-shadow:0 22px 52px -26px rgba(0,0,0,.9);
}
.ms-legend-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.4rem}
.ms-legend-dot{
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#BFE4FF 0%,#3A8FE0 45%,#0A4F9E 100%);
  border:1.5px solid rgba(191,228,255,.9);flex:none;
  box-shadow:0 0 8px rgba(47,164,255,.6),0 0 0 3px rgba(47,164,255,.14);
}
.ms-legend-line{
  width:24px;height:0;flex:none;
  border-top:3px dotted var(--ms-gold);opacity:.85;
}
.ms-legend-txt{font-size:.76rem;font-weight:600;color:var(--ms-on-dark);letter-spacing:.01em}
.ms-legend-sub{font-weight:600;color:var(--ms-on-dark-soft);font-size:.72rem;padding-left:1.85rem}
.ms-legend-hint{font-size:.68rem;color:var(--ms-on-dark-soft);margin-top:.35rem;letter-spacing:.02em}

/* ============================================================
   INFO PANEL — WHITE glass card, navy text, gold accents (STANDOUT)
   ============================================================ */
.ms-panel{
  position:absolute;top:18px;right:18px;z-index:7;width:372px;max-width:calc(100% - 36px);
  max-height:calc(100% - 36px);overflow-y:auto;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(255,255,255,.9);border-radius:18px;
  padding:1.5rem 1.5rem 1.6rem;color:var(--ms-navy);
  box-shadow:
    0 50px 100px -36px rgba(0,0,20,.62),
    0 12px 30px -14px rgba(0,0,20,.4),
    inset 0 0 0 1px rgba(0,0,52,.04);
  opacity:0;transform:translateX(22px) scale(.98);pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.ms-panel.open{opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.ms-panel::before{
  content:"";position:absolute;left:0;top:0;width:5px;height:100%;
  background:linear-gradient(180deg,var(--ms-gold-soft),var(--ms-gold-deep));
  border-radius:18px 0 0 18px;
}
.ms-panel-close{
  position:absolute;top:.8rem;right:.85rem;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,52,.06);border:1px solid rgba(0,0,52,.12);
  color:var(--ms-navy);font-size:1.35rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.ms-panel-close:hover{background:rgba(200,169,107,.24)}
.ms-panel-step{
  font-family:var(--ms-sans);font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ms-gold-deep);
}
.ms-panel-city{font-family:var(--ms-serif);font-size:1.85rem;font-weight:700;line-height:1.08;margin:.35rem 0 .35rem;color:var(--ms-navy)}
.ms-panel-loc{font-size:.84rem;color:rgba(0,0,52,.66);line-height:1.45;margin:0}
.ms-panel-course{margin:1rem 0 .9rem}
.ms-panel-coursetag{
  display:inline-block;font-family:var(--ms-sans);font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#3a2c0f;
  background:linear-gradient(120deg,#F4E3BD,#D8BC85);padding:.4rem .8rem;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(154,128,73,.4);
}
.ms-panel-units{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.ms-unit{
  border-left:3px solid var(--ms-gold);padding:.1rem 0 .1rem .9rem;
}
.ms-unit-num{font-family:var(--ms-sans);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ms-gold-deep)}
.ms-unit-fr{font-family:var(--ms-serif);font-size:1.2rem;font-weight:700;line-height:1.2;margin:.2rem 0 .3rem;color:var(--ms-navy)}
.ms-unit-en{font-size:.84rem;line-height:1.5;color:rgba(0,0,52,.72);margin:0}
.ms-panel-cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-family:var(--ms-sans);font-size:.85rem;font-weight:700;letter-spacing:.02em;
  color:#fff;background:linear-gradient(120deg,#1C2238,#000034);
  padding:.8rem 1.2rem;border-radius:11px;text-decoration:none;
  box-shadow:0 14px 28px -14px rgba(0,0,52,.7);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ms-panel-cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(0,0,52,.8)}
.ms-panel-cta svg{transition:transform .2s ease}
.ms-panel-cta:hover svg{transform:translateX(3px)}

/* ----- Fallback (no MapLibre) ----- */
.ms-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:2rem;color:var(--ms-on-dark-soft)}
.ms-fallback p{margin:0;font-family:var(--ms-serif);font-size:1.3rem;color:var(--ms-on-dark)}
.ms-fallback-sub{font-family:var(--ms-sans)!important;font-size:.85rem!important;max-width:42ch}

/* ----- Responsive ----- */
@media (max-width:760px){
  .ms-shell{padding:2.4rem .9rem 2.8rem}
  /* Tabs become a single-row horizontal SWIPE slider — no tall stacked list */
  /* On mobile: All Journeys stays a full-width hero on top; the 7 course
     cards become a horizontal snap-scroll row beneath it. */
  .ms-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    padding:.2rem .2rem 1rem;margin-bottom:1.2rem;max-width:none;
  }
  .ms-tab{
    grid-column:span 1;max-width:none;
    padding:.9rem 1rem;order:2;
  }
  /* the course cards scroll horizontally as a group, the all-tab does not */
  .ms-tab-all{
    order:1;grid-column:1 / -1;width:100%;padding:1.15rem 1.2rem;gap:.85rem;margin-bottom:.3rem;
  }
  .ms-tab-all .ms-tab-name{font-size:1.4rem}
  .ms-tab-all .ms-tab-region{font-size:.82rem}
  .ms-tab-all .ms-tab-all-mark{width:48px;height:48px}
  .ms-tab-all .ms-tab-all-mark svg{width:26px;height:26px}
  .ms-tab-all .ms-tab-all-cue{display:none}
  .ms-tab-name{font-size:1.18rem}
  .ms-tab-region{font-size:.74rem}
  .ms-stage{height:78vh;min-height:520px}
  .ms-compact .ms-stage{height:70vh;min-height:440px}
  .ms-panel{
    top:auto;bottom:0;right:0;left:0;width:100%;max-width:100%;
    max-height:72%;border-radius:20px 20px 0 0;
    transform:translateY(24px);
  }
  .ms-panel::before{width:100%;height:5px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--ms-gold-soft),var(--ms-gold-deep))}
  .ms-panel.open{transform:translateY(0)}
  .ms-legend{left:12px;bottom:12px;padding:.55rem .7rem;max-width:58vw}
  .ms-legend-hint{display:none}
  /* Keep the Apple-sleek small dot on mobile. Slightly larger hit area via a
     transparent padding ring on the wrapper so taps land reliably without
     enlarging the visible dot. */
  .ms-marker-dot .ms-marker-pin{width:10px;height:10px}
  .ms-marker:not(.ms-marker-dot) .ms-marker-pin{width:10px;height:10px}
  .ms-marker::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%}
  .ms-marker-num{font-size:.5rem}
  /* Hide the always-on city labels on mobile — they were huge & non-interactive.
     City name still appears in the info panel on tap. */
  .ms-marker-label{display:none !important}
  .ms-panel-city{font-size:1.5rem}
  /* Photo pop-up: scale down so it doesn't dominate the small map */
  .ms-photo-pop{max-width:46vw;top:10px;left:10px}
}
@media (max-width:400px){
  .ms-stage{min-height:520px}
  .ms-title{font-size:2.2rem}
}

/* ============================================================
   ENHANCEMENT — Real place photo in panel (3D pop-up) + blue neon
   markers + richer map lighting. Added per client request.
   ============================================================ */
.ms-root{
  --ms-neon:#2FA4FF;
  --ms-neon-bright:#6FC4FF;
  --ms-neon-deep:#0A6BD6;
}

/* ----- Floating TOP-LEFT real-place photo card: pops up in 3D on click ----- */
.ms-photo-pop{
  position:absolute;top:18px;left:18px;z-index:9;
  width:min(38%, 420px);max-width:calc(100% - 36px);
  margin:0;border-radius:18px;overflow:hidden;
  background:var(--ms-navy-deep);
  border:1px solid rgba(111,196,255,.55);
  box-shadow:
    0 40px 80px -28px rgba(0,0,20,.78),
    0 0 0 1px rgba(47,164,255,.30),
    0 0 34px 2px rgba(47,164,255,.45),
    0 0 70px 10px rgba(47,164,255,.22);
  transform-origin:top left;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:perspective(1100px) rotateX(18deg) rotateY(-6deg) translateY(-16px) scale(.92);
  transition:visibility 0s linear .5s;
}
.ms-photo-pop.open{
  visibility:visible;pointer-events:auto;
  animation:msPhotoPop .66s cubic-bezier(.22,1,.36,1) forwards;
  transition:none;
}
.ms-photo-pop .ms-photo-pop-img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 7s ease;
}
.ms-photo-pop.open .ms-photo-pop-img{transform:scale(1.0)}
/* animated neon rim that breathes around the card */
.ms-photo-pop-glow{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(111,196,255,.5), inset 0 0 26px rgba(47,164,255,.30);
  animation:msPhotoGlow 2.6s ease-in-out infinite;
}
@keyframes msPhotoGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(111,196,255,.45), inset 0 0 22px rgba(47,164,255,.24)}
  50%{box-shadow:inset 0 0 0 1px rgba(111,196,255,.85), inset 0 0 40px rgba(47,164,255,.5)}
}
.ms-photo-pop-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem 1.1rem .85rem;
  background:linear-gradient(180deg,rgba(0,0,20,0),rgba(0,0,20,.82));
  color:#fff;
}
.ms-photo-pop-step{
  display:block;font-family:var(--ms-serif);font-size:.62rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.78);
  text-shadow:0 1px 6px rgba(0,0,20,.55);margin-bottom:.35rem;font-style:italic;
}
.ms-photo-pop-city{
  display:block;font-family:var(--ms-serif);font-size:1.32rem;font-weight:700;
  line-height:1.12;text-shadow:0 2px 14px rgba(0,0,20,.85);
}
.ms-photo-pop-credit{
  display:block;margin-top:.35rem;font-family:var(--ms-sans);
  font-size:.6rem;letter-spacing:.02em;color:rgba(255,255,255,.6);
}
@keyframes msPhotoPop{
  to{opacity:1;transform:perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1)}
}

/* ----- BLUE NEON interactive lighting on the small dots (hover/focus/active) -----
   Refined for the Apple-sleek small dot: a clean layered neon halo that
   gently pulses while hovered. No heavy drop shadow / no inset white — those
   belonged to the old gold disc and looked clumsy on a 15px point of light. */
.ms-marker:hover .ms-marker-pin,
.ms-marker:focus-visible .ms-marker-pin,
.ms-marker.active .ms-marker-pin{
  border-color:var(--ms-neon-bright);
  animation:msNeonPulse 1.6s ease-in-out infinite;
}
@keyframes msNeonPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(47,164,255,.20),0 0 12px 2px rgba(47,164,255,.7),0 0 28px 6px rgba(111,196,255,.45),0 2px 6px rgba(0,0,20,.5)}
  50%{box-shadow:0 0 0 6px rgba(47,164,255,.30),0 0 20px 5px rgba(47,164,255,.95),0 0 44px 12px rgba(111,196,255,.62),0 2px 6px rgba(0,0,20,.5)}
}
/* active marker label gets a neon edge */
.ms-marker:hover .ms-marker-label,
.ms-marker.active .ms-marker-label{
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55),0 0 0 1px rgba(47,164,255,.5),0 0 16px rgba(47,164,255,.45);
}
/* numbered pin pulses a soft neon ring on the map at all times (subtle) */
.ms-marker-pin{position:relative}
.ms-marker-pin::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(47,164,255,.18);opacity:0;transition:opacity .3s ease;
}
.ms-marker:hover .ms-marker-pin::before,.ms-marker.active .ms-marker-pin::before{opacity:1}

@media (prefers-reduced-motion: reduce){
  .ms-photo-pop.open{animation:none;opacity:1;transform:none}
  .ms-photo-pop-glow{animation:none}
  .ms-marker:hover .ms-marker-pin{animation:none}
}
/* mobile: photo pop sits above the bottom sheet, smaller */
@media (max-width:760px){
  .ms-photo-pop{top:10px;left:10px;width:min(46vw,260px)}
  .ms-photo-pop-city{font-size:1rem}
  .ms-photo-pop-step{font-size:.54rem}
}

/* ----- Map ambient BLUE NEON atmosphere (more lighting in the map) ----- */
.ms-stage::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  /* richer multi-point neon glow: top, bottom, and two corner accents */
  background:
    radial-gradient(120% 90% at 50% 4%, rgba(47,164,255,.30), rgba(47,164,255,0) 46%),
    radial-gradient(150% 130% at 50% 124%, rgba(10,107,214,.42), rgba(10,107,214,0) 58%),
    radial-gradient(80% 80% at 4% 94%, rgba(111,196,255,.32), rgba(111,196,255,0) 52%),
    radial-gradient(80% 80% at 98% 8%, rgba(47,164,255,.28), rgba(47,164,255,0) 52%),
    radial-gradient(100% 100% at 50% 50%, rgba(0,0,20,0) 56%, rgba(0,0,20,.5) 100%);
  mix-blend-mode:screen;
  animation:msAtmosBreathe 7s ease-in-out infinite;
}
/* a luminous neon edge frame hugging the whole map */
.ms-stage{box-shadow:0 50px 110px -50px rgba(0,0,0,.92),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 0 60px -12px rgba(47,164,255,.35)}
@keyframes msAtmosBreathe{
  0%,100%{opacity:.85}
  50%{opacity:1}
}
/* a glowing neon edge frame around the whole map */
.ms-stage{position:relative}
.ms-stage > .ms-map{position:relative}
.ms-stage::marker{content:none}
/* a slow travelling sheen of light across the map surface */
.ms-stage::after{
  content:"";position:absolute;inset:-40% -10%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg, rgba(47,164,255,0) 42%, rgba(111,196,255,.10) 50%, rgba(47,164,255,0) 58%);
  transform:translateX(-30%);
  animation:msSheen 9s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes msSheen{
  0%{transform:translateX(-35%)}
  50%{transform:translateX(35%)}
  100%{transform:translateX(-35%)}
}
/* keep interactive layers above the atmosphere */
.ms-panel,.ms-legend,.ms-map .maplibregl-ctrl{z-index:8}
@media (prefers-reduced-motion: reduce){ .ms-stage::after{animation:none} }