/* ===================================================
   TRAVELLER RYO-CHAN — map.css
   Map container, region styles, pins, tooltips
   =================================================== */

/* ---------- Map Section ---------- */
#map-container {
  background: var(--bg);
  padding: 0;
}

.map-view {
  display: none;
  flex-direction: column;
  min-height: 90vh;
  padding: 32px 24px 60px;
}
.map-view.active { display: flex; }

/* ---------- Map Header ---------- */
.map-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Map view toggle (Japan ⇄ World) — sits at the right edge of map header */
.map-header-toggle {
  margin-left: auto;
}

/* Floating Japan/World toggle pinned to the top-right of the map area
   so it stays reachable even when the user has scrolled past the
   .map-header. Sits above pins and tooltips. */
.map-toggle-floating {
  position: absolute;
  top: 16px;
  left: 16px;   /* left side — top-right is reserved for the Okinawa inset */
  z-index: 50;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.85);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.map-toggle-floating:hover {
  background: rgba(255, 107, 53, 0.95);  /* brand orange */
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.map-toggle-floating:active {
  transform: translateY(0);
}

/* Onboarding hint banner — sits at top-centre of the map area. Visible
   only when not zoomed; auto-fades after first region click (handled in
   map-japan.js / map-world.js). Designed to look inviting so first-time
   visitors notice the map is interactive even before pins are visible. */
.map-hint {
  /* Sits ABOVE the map (in normal page flow within #view-japan / #view-world)
     instead of floating inside .map-wrap. This keeps it from overlapping the
     To World button, Okinawa inset, fullscreen button, and pin badges. */
  display: block;
  margin: 6px auto 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE36E, #FFB347);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;          /* keep on one line — never wrap */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
  pointer-events: none;
  animation: map-hint-bob 2.6s ease-in-out infinite;
  max-width: fit-content;
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-hint.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
@keyframes map-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (max-width: 900px) {
  .map-hint { font-size: 0.78rem; padding: 6px 12px; }
}
@media (max-width: 600px) {
  .map-hint {
    top: 8px;
    padding: 5px 10px;
    font-size: 0.7rem;
    max-width: calc(100% - 16px);
  }
}

/* Floating "← All Japan / ← World" — sits below the To World/Japan toggle.
   Only visible while the user has zoomed into a sub-region (mirrors the
   .map-breadcrumb show/hide state). */
.map-back-floating {
  position: absolute;
  top: 64px;          /* below the toggle button (16px + ~40px button + gap) */
  left: 16px;
  z-index: 50;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, background 0.15s ease;
}
.map-back-floating:hover {
  background: #fff;
  transform: translateY(-2px);
}
.map-back-floating[hidden] { display: none; }

/* Prefecture zoom dropdown — appears below the back button when a region is
   zoomed. Lets users drill down to a single prefecture (filling the viewport)
   without needing to click a possibly-pin-covered prefecture path. */
.map-pref-zoom-floating {
  position: absolute;
  top: 112px;          /* below back button (64 + ~40 + gap) */
  left: 16px;
  z-index: 50;
  padding: 8px 30px 8px 14px;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #1c1c1c;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231c1c1c' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* No translateY on hover — select elements can hit a feedback loop where
   the lifted box leaves the cursor, hover drops, box returns, hover fires
   again → visible shaking. Keep the colour shift only. */
.map-pref-zoom-floating:hover { background-color: #fff; }
.map-pref-zoom-floating[hidden] { display: none; }
@media (max-width: 600px) {
  .map-pref-zoom-floating {
    top: 92px;
    left: 10px;
    padding: 6px 26px 6px 11px;
    font-size: 0.8rem;
  }
}

/* "🏝️ 離島" jump button — only useful on the all-Japan view, where Izu /
   Ogasawara islands are too small to click reliably in the ocean. */
.map-islands-floating {
  position: absolute;
  bottom: 16px;
  right: 16px;   /* bottom-right corner */
  z-index: 50;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.map-islands-floating:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.map-islands-floating[hidden] { display: none; }
/* In fullscreen the bottom region-tab strip rises into the viewport, so the
   Izu Islands button needs to lift above it AND shrink so it stops crowding
   the corner. Applies on both desktop landscape-FS and mobile rotated-FS. */
.map-wrap.is-fullscreen .map-islands-floating {
  bottom: 64px;
  right: 12px;
  padding: 6px 11px;
  font-size: 0.78rem;
  opacity: 0.9;
}

/* Cross-jump arrow between 伊豆諸島 ↔ 小笠原諸島. Sits at bottom-centre of
   the map area so it reads as "scroll further south" (the islands chain
   continues 1000km south of 伊豆). */
.map-islands-cross-floating {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF8C42, #FF6B35);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
  animation: islands-cross-pulse 2.4s ease-in-out infinite;
}
.map-islands-cross-floating:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 22px rgba(255, 107, 53, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.map-islands-cross-floating[hidden] { display: none; }
@keyframes islands-cross-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 6px 22px rgba(255,107,53,0.55), 0 0 0 3px rgba(255,140,66,0.25); }
}
@media (max-width: 600px) {
  .map-islands-cross-floating {
    bottom: 10px;
    padding: 7px 13px;
    font-size: 0.82rem;
  }
}
@media (max-width: 600px) {
  .map-islands-floating {
    /* Lift above the bottom region-tab strip so it doesn't overlap with
       the 北海道〜沖縄 chips when the user scrolls the strip horizontally. */
    bottom: 52px;
    right: 8px;
    padding: 5px 10px;
    font-size: 0.78rem;
    opacity: 0.92;
  }
}
@media (max-width: 600px) {
  .map-back-floating {
    top: 52px;
    left: 10px;
    padding: 6px 11px;
    font-size: 0.8rem;
  }
}
@media (max-width: 600px) {
  .map-toggle-floating {
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

.map-view-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.03em;
}

.map-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  transition: background var(--transition), color var(--transition);
}
.btn-back:hover { background: var(--ink); color: var(--white); }

.breadcrumb-sep { color: var(--gray-mid); font-size: 18px; }

.breadcrumb-region {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- SVG Map Wrapper ---------- */
.map-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  min-height: 480px;
  background: #1A5A8A;           /* deep-ocean base (SVG gradient overlays) */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(28,28,28,.08), 0 8px 28px rgba(13, 59, 101, 0.18);
}

/* Japan SVG */
#japan-map {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  cursor: default;
}

/* ── Map fullscreen toggle ────────────────────────────────────────────── */
/* Small ⛶/✕ button pinned bottom-right of the Japan-map wrap. When the
   wrap has .is-fullscreen, it becomes a fixed-position viewport-filling
   panel and the icon flips to ✕ so the user knows how to exit. */
.map-fullscreen-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(28, 28, 28, 0.78);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .12s ease;
}
.map-fullscreen-btn:hover { background: #FF6B35; transform: scale(1.05); }
.map-wrap.is-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  max-width: none;
  z-index: 1000;
  border-radius: 0;
  margin: 0;
}
.map-wrap.is-fullscreen #japan-map { min-height: 100vh; }
/* Body-level lock so the page underneath can't scroll while expanded. */
body.map-fullscreen-locked { overflow: hidden; }

/* World SVG */
#world-map {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  cursor: default;
}

/* ---------- Region / Country paths ---------- */
.region-group {
  cursor: pointer;
}

.region-path {
  fill: var(--green);
  stroke: var(--white);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill 0.2s ease, filter 0.2s ease;
}

/* World country fills */
.country-path {
  fill: var(--cyan);
  stroke: var(--white);
  stroke-width: 0.5;
  transition: fill 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}
.country-path.visited {
  fill: var(--green);
}
.country-path.sea { fill: #C9EFF0; stroke: none; cursor: default; }
.country-path.graticule { fill: none; stroke: rgba(167,232,234,.4); stroke-width: 0.3; }

/* Hover states */
.region-group:hover .region-path,
.region-path:hover {
  filter: brightness(1.18) drop-shadow(0 0 8px rgba(139,232,156,.6));
}
.country-path:hover {
  fill: var(--green);
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(139,232,156,.5));
}

/* Highlighted (zoomed-in) region */
.region-path.zoomed-in { opacity: 1; }
.region-path.zoomed-out { opacity: 0.3; pointer-events: none; }

/* ---------- Pins Layer ---------- */
.pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.place-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: all;
  cursor: pointer;
  z-index: 10;
  animation: pinDrop 0.4s cubic-bezier(.17,.89,.32,1.28);
  /* WCAG 2.5.5: tap target ≥44×44px. The visible dot is 14px, so we expand
     the hit area with a transparent ::before. Visual layout unchanged. */
}
.place-pin::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 22px);
  width: 44px; height: 44px;
  border-radius: 50%;
  /* transparent — purely a hit target */
  pointer-events: auto;
  z-index: -1;
}

@keyframes pinDrop {
  from { transform: translate(-50%, -200%); opacity: 0; }
  to   { transform: translate(-50%, -100%); opacity: 1; }
}

.place-pin .pin-dot {
  width: 14px; height: 14px;
  background: var(--ink);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(28,28,28,.35);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}

.place-pin:hover .pin-dot {
  transform: scale(1.25);
  box-shadow: 0 4px 10px rgba(28,28,28,.45);
}

.pin-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}
.place-pin:hover .pin-label { opacity: 1; }

/* ---------- Post-modal-close pulse highlight ----------
   After a modal closes, the originating pin gets .just-closed for 2.1s.
   Three quick orange pulses let the user see "that's where I was". */
@keyframes pinJustClosed {
  0%   { box-shadow: 0 2px 6px rgba(28,28,28,.35); transform: scale(1.0); }
  20%  { box-shadow: 0 0 0 10px rgba(255,107,53,.45); transform: scale(1.4); }
  40%  { box-shadow: 0 0 0 16px rgba(255,107,53,.15); transform: scale(1.2); }
  60%  { box-shadow: 0 0 0 8px  rgba(255,107,53,.40); transform: scale(1.35); }
  80%  { box-shadow: 0 0 0 14px rgba(255,107,53,.12); transform: scale(1.15); }
  100% { box-shadow: 0 2px 6px rgba(28,28,28,.35); transform: scale(1.0); }
}
.place-pin.just-closed .pin-dot {
  animation: pinJustClosed 0.7s ease 3;
}
@media (prefers-reduced-motion: reduce) {
  .place-pin.just-closed .pin-dot { animation: none; }
}

/* ---------- Tooltip ---------- */
.map-tooltip {
  position: absolute;
  background: rgba(28,28,28,.88);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.15s;
}
/* World-map tooltip when it carries video CTAs (#world-tooltip rendered via
   showCountryTooltip): switches to a vertical card so multiple "▶ 動画はコチラ"
   chips can stack. We override pointer-events in JS so the user can travel
   the cursor into the tooltip and click a link. */
#world-tooltip {
  white-space: normal;
  max-width: 240px;
  padding: 8px 11px;
  line-height: 1.35;
}
.wtt-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.wtt-watch-list {
  display: flex; flex-direction: column; gap: 4px;
}
.wtt-watch {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: #FF3B3B;
  color: #fff !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .01em;
  transition: background .15s ease, transform .12s ease;
}
.wtt-watch:hover { background: #E22A2A; transform: translateY(-1px); }
.wtt-watch-sub {
  font-weight: 500;
  font-size: 10.5px;
  opacity: .85;
}

/* ── Mountain video markers (data/mountains.json) ─────────────────────── */
/* Tooltip: same dark glass treatment as the world tooltip so the two read
   as a family. Sticky-hover (pointer-events auto) so the user can click
   into the watch link. */
.mountain-tooltip {
  position: fixed;
  background: rgba(28,28,28,.92);
  color: #fff;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 60;
  max-width: 240px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: auto;
}
.mountain-tooltip[hidden] { display: none; }
.mtt-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mtt-sub  { font-size: 11px; color: #C8C2B4; margin-bottom: 6px; }
.mtt-watch {
  display: inline-block;
  padding: 5px 11px;
  background: #FF3B3B;
  color: #fff !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s ease, transform .12s ease;
}
.mtt-watch:hover { background: #E22A2A; transform: translateY(-1px); }

/* "Look here!" pulse used when the user picks 山の動画 from the TOC. */
.mountain-marker.mountain-pulse circle {
  animation: mountainPulse 1.6s ease-out;
}
@keyframes mountainPulse {
  0%   { r: 10; filter: drop-shadow(0 0 3px #7B5E3C88); }
  40%  { r: 18; filter: drop-shadow(0 0 14px #FFB347); }
  100% { r: 10; filter: drop-shadow(0 0 3px #7B5E3C88); }
}

/* ---------- Loading state ---------- */
.map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: var(--gray-mid);
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
}
.map-loading .spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--gray-light);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Marine life idle animations ----------
   SVG <text> emojis — each species gets a distinct idle motion so the
   ocean feels alive. transform-box:fill-box so `transform-origin:center`
   rotates around the glyph itself, not the SVG viewport origin. */
.sea-creature {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
/* Whales / orcas / dolphins — gentle vertical bob like breaching */
@keyframes swim-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(2px, -6px) rotate(-3deg); }
}
/* Sharks — slow horizontal cruise with slight tail yaw */
@keyframes swim-shark {
  0%       { transform: translate(-7px, 0) rotate(-4deg); }
  50%      { transform: translate( 7px, 2px) rotate( 4deg); }
  100%     { transform: translate(-7px, 0) rotate(-4deg); }
}
/* Turtles — slow paddle rotation */
@keyframes swim-turtle {
  0%, 100% { transform: translate(0, 0)    rotate(-6deg); }
  50%      { transform: translate(3px,-3px) rotate( 6deg); }
}
/* Fish / squid / octopus / manta — darting s-curve */
@keyframes swim-fish {
  0%       { transform: translate(0, 0)    rotate(-5deg); }
  25%      { transform: translate(5px,-2px) rotate( 0deg); }
  50%      { transform: translate(9px, 1px) rotate( 5deg); }
  75%      { transform: translate(5px, 3px) rotate( 0deg); }
  100%     { transform: translate(0, 0)    rotate(-5deg); }
}
/* Polar bear / penguin — small wobble only (they stand on ice) */
@keyframes swim-wobble {
  0%, 100% { transform: translate(0, 0)    rotate(-2deg); }
  50%      { transform: translate(0,-2px)  rotate( 2deg); }
}
.anim-bob    { animation: swim-bob    4.5s ease-in-out infinite; }
.anim-shark  { animation: swim-shark  7s   ease-in-out infinite; }
.anim-turtle { animation: swim-turtle 6s   ease-in-out infinite; }
.anim-fish   { animation: swim-fish   5s   ease-in-out infinite; }
.anim-wobble { animation: swim-wobble 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sea-creature { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .map-view { padding: 20px 12px 40px; }
  #japan-map, #world-map { min-height: 340px; }
  .map-wrap { min-height: 340px; }
}

/* ====================================================
   Cluster pins — multiple places at (nearly) the same
   screen location collapse into one badge with a count.
   Click expands the members in a sunflower arrangement.
   ==================================================== */
/* Cluster pins have no tip — anchor their CENTER (not bottom) to the coord,
   otherwise the whole badge floats ~15–30px north of the real location,
   which on a zoomed regional view shifts e.g. Asakusa visibly into Saitama. */
.place-pin.cluster {
  transform: translate(-50%, -50%);
  animation: cluster-drop 0.4s cubic-bezier(.17,.89,.32,1.28);
}
@keyframes cluster-drop {
  from { transform: translate(-50%, -150%) scale(.6); opacity: 0; }
  to   { transform: translate(-50%, -50%)  scale(1);  opacity: 1; }
}
.place-pin.cluster .pin-dot {
  /* Was 30px — too dominant on a zoomed prefecture view (40+ clusters
     filling the whole peninsula). Trimmed ~20% for a calmer composition. */
  width: 24px; height: 24px;
  background: linear-gradient(135deg, var(--accent), #E25A28);
  box-shadow: 0 3px 10px rgba(255,107,53,.5), 0 0 0 2.5px rgba(255,255,255,.9);
  animation: cluster-pulse 2.2s ease-in-out infinite;
}
.place-pin.cluster .pin-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* Pulse applied to .pin-dot (inside .place-pin), so no translate needed here —
   the parent .place-pin already handles center-anchoring with translate(-50%,-50%). */
@keyframes cluster-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,107,53,.55), 0 0 0 3px rgba(255,255,255,.9), 0 0 0 0  rgba(255,107,53,.4); transform: scale(1);    }
  50%      { box-shadow: 0 4px 14px rgba(255,107,53,.7),  0 0 0 3px rgba(255,255,255,.9), 0 0 0 14px rgba(255,107,53,0); transform: scale(1.08); }
}
/* expanded-member pin — when cluster is clicked, members fan out */
.place-pin.cluster-member {
  animation: cluster-fan-in .35s cubic-bezier(.17,.89,.32,1.1) backwards;
}
@keyframes cluster-fan-in {
  from { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
  to   { transform: translate(-50%,-100%) scale(1); opacity: 1; }
}

/* Count badge — parent now uses translate(-50%,-50%), so offset it to the
   upper-right of the circle (previously positioned assuming -100% anchor). */
.place-pin.cluster .pin-count {
  top: -8px;
  right: -8px;
}

/* ====================================================
   Country flag flash — briefly shown after zoom-in
   ==================================================== */
.flag-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 1;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s ease, transform .55s cubic-bezier(.17,.89,.32,1.2);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  z-index: 50;
  user-select: none;
}
.flag-overlay.show {
  opacity: 1;
  transform: scale(1);
}

/* ====================================================
   Demo-mode hint — shown while the auto-tour is running
   ==================================================== */
.demo-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(28,28,28,.72);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 40;
}
.demo-hint.show { opacity: 1; }
.demo-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #8BE89C;
  animation: demo-pulse 1.4s ease-in-out infinite;
}
@keyframes demo-pulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .place-pin.cluster .pin-dot { animation: none; }
  .place-pin.cluster-member   { animation: none; }
  .demo-dot                   { animation: none; }
}

/* ========== GPX ROUTE TRACKS (YAMAP / 自転車NAVITIME) ========== */

/* Route tooltip — floats near cursor, same style as map tooltips */
.route-tooltip {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  background: rgba(18, 18, 16, 0.94);
  color: #E8E4DA;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 0;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  width: 220px;
  max-width: 220px;
  white-space: normal;
  animation: routeTTIn 0.18s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes routeTTIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Bike thumbnails strip — compact, fixed height so it never blows up */
.rtt-bikes        { display: flex; gap: 2px; height: 110px; }
.rtt-bikes .rtt-bike { flex: 1; overflow: hidden; background: #2a2a26; }
.rtt-bikes .rtt-bike img { width: 100%; height: 100%; object-fit: cover;
                           display: block; }

.rtt-body { padding: 8px 11px 10px; }
.rtt-name { font-weight: 700; font-size: 13px; color: #FAFAF7;
            margin-bottom: 3px; line-height: 1.25; letter-spacing: .01em; }
.rtt-meta { font-size: 10.5px; color: #9C988D; letter-spacing: .03em;
            margin-bottom: 6px; }
.rtt-dot  { margin: 0 4px; opacity: .45; }
.rtt-hype { font-size: 11.5px; font-weight: 600; color: #FFD66B;
            line-height: 1.4; margin-bottom: 5px; }
.rtt-desc { font-size: 10.5px; color: #C8C2B4; line-height: 1.45;
            padding-top: 6px; margin-top: 3px;
            border-top: 1px solid rgba(255,255,255,.08); }
/* "▶ 動画はコチラ" CTA — only renders when route.youtubeUrl is present.
   Bright YouTube-red so the user notices it sits below the description, with
   a hover lift to invite the click. pointer-events: auto in case the parent
   tooltip ever gets pointer-events: none for any reason. */
.rtt-watch {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 11px;
  background: #FF3B3B;
  color: #fff !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .01em;
  transition: background .15s ease, transform .12s ease;
  pointer-events: auto;
}
.rtt-watch:hover {
  background: #E22A2A;
  transform: translateY(-1px);
}

/* Animated dash flow on the route core after draw-on completes */
.route-track.route-flowing {
  animation: routeFlow 1.4s linear infinite;
}
@keyframes routeFlow {
  to { stroke-dashoffset: -14; }
}

/* Route source legend that appears in the map header area */
.route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.route-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px 2px 6px;
  border-radius: 12px;
  background: rgba(28,28,28,.06);
}
.route-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.route-legend-item.yamap    { color: #1A6B3E; }
.route-legend-item.navitime { color: #005A9E; }
[data-theme="dark"] .route-legend-item { background: rgba(255,255,255,.06); }
[data-theme="dark"] .route-legend-item.yamap    { color: #5DE890; }
[data-theme="dark"] .route-legend-item.navitime { color: #5AADFF; }


/* ── World map region jump buttons ───────────────────────────────────── */
.map-region-group {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 28px);
  z-index: 8;
  pointer-events: auto;
}
.map-region-group[hidden] { display: none; }

/* Japan-specific override: 9 regions need to fit on a single row. We
   disable wrap, shrink padding/font, and let the strip scroll
   horizontally on narrow viewports rather than spilling onto a second
   line that obscures the map. */
#japan-region-group {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 28px);
  scrollbar-width: none;
}
#japan-region-group::-webkit-scrollbar { display: none; }
#japan-region-group .map-region-btn {
  padding: 5px 9px;
  font-size: .72rem;
  flex: 0 0 auto;
}
.map-region-btn {
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  transition: background .15s ease, transform .12s ease;
  white-space: nowrap;
}
.map-region-btn:hover {
  background: #FF6B35;
  transform: translateY(-1px);
}
.map-region-btn:active { transform: translateY(0); }
@media (max-width: 768px) {
  .map-region-group {
    bottom: 8px; left: 8px;
    gap: 4px;
  }
  .map-region-btn {
    padding: 6px 10px;
    font-size: .74rem;
  }
}

/* Landscape-recommendation toast — fades in over the fullscreen map after
   the user taps ⛶ on mobile. One-shot per session. */
.map-landscape-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: rgba(28,28,28,0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 99999;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.map-landscape-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}