/* Region callouts: each leader terminates on its actual area of the Japan map. */
.padel-japan-map .map-pin {
  --leader-width: 90px;
  --leader-angle: 0deg;
  --leader-dot-y: 0px;
}

.padel-japan-map .map-pin::before {
  width: var(--leader-width);
  transform: rotate(var(--leader-angle));
}

.padel-japan-map .map-pin-hokkaido,
.padel-japan-map .map-pin-kanto,
.padel-japan-map .map-pin-chubu {
  right: 8px;
}

.padel-japan-map .map-pin-hokkaido::before,
.padel-japan-map .map-pin-kanto::before,
.padel-japan-map .map-pin-chubu::before {
  right: 100%;
  transform-origin: right center;
}

.padel-japan-map .map-pin-hokkaido::after,
.padel-japan-map .map-pin-kanto::after,
.padel-japan-map .map-pin-chubu::after {
  right: calc(100% + var(--leader-width) - 4px);
  top: calc(50% - 4px + var(--leader-dot-y));
}

.padel-japan-map .map-pin-kinki,
.padel-japan-map .map-pin-shikoku,
.padel-japan-map .map-pin-kyushu {
  left: 8px;
}

.padel-japan-map .map-pin-kinki::before,
.padel-japan-map .map-pin-shikoku::before,
.padel-japan-map .map-pin-kyushu::before {
  left: 100%;
  transform-origin: left center;
}

.padel-japan-map .map-pin-kinki::after,
.padel-japan-map .map-pin-shikoku::after,
.padel-japan-map .map-pin-kyushu::after {
  left: calc(100% + var(--leader-width) - 4px);
  top: calc(50% - 4px + var(--leader-dot-y));
}

/* Desktop: cards stay outside the silhouette; dots identify the region. */
.padel-japan-map .map-pin-hokkaido {
  top: 12%;
  --leader-width: 96px;
  --leader-angle: -7deg;
  --leader-dot-y: 6px;
}

.padel-japan-map .map-pin-kanto {
  top: 57%;
  --leader-width: 120px;
  --leader-angle: 0deg;
  --leader-dot-y: 0px;
}

.padel-japan-map .map-pin-chubu {
  top: 62%;
  --leader-width: 160px;
  --leader-angle: 0deg;
  --leader-dot-y: 0px;
}

/* Kinki sits on the Sea of Japan side and points southeast to the Kinki area. */
.padel-japan-map .map-pin-kinki {
  top: 52%;
  --leader-width: 240px;
  --leader-angle: 12deg;
  --leader-dot-y: 50px;
}

.padel-japan-map .map-pin-shikoku {
  top: 70%;
  --leader-width: 215px;
  --leader-angle: 0deg;
  --leader-dot-y: 0px;
}

.padel-japan-map .map-pin-kyushu {
  top: 84%;
  --leader-width: 175px;
  --leader-angle: 0deg;
  --leader-dot-y: 0px;
}

@media (max-width: 850px) {
  .padel-japan-map .map-pin-hokkaido,
  .padel-japan-map .map-pin-kanto,
  .padel-japan-map .map-pin-chubu { right: 3px; }

  .padel-japan-map .map-pin-kinki,
  .padel-japan-map .map-pin-shikoku,
  .padel-japan-map .map-pin-kyushu { left: 3px; }

  .padel-japan-map .map-pin-hokkaido { top: 12%; --leader-width: 44px; --leader-angle: -8deg; --leader-dot-y: 5px; }
  .padel-japan-map .map-pin-kanto { top: 52%; --leader-width: clamp(54px, 18vw, 140px); --leader-angle: 0deg; --leader-dot-y: 0px; }
  .padel-japan-map .map-pin-chubu { top: 59%; --leader-width: clamp(70px, 22vw, 165px); --leader-angle: 0deg; --leader-dot-y: 0px; }
  .padel-japan-map .map-pin-kinki { top: 48%; --leader-width: clamp(102px, 32vw, 240px); --leader-angle: 13deg; --leader-dot-y: clamp(23px, 7vw, 52px); }
  .padel-japan-map .map-pin-shikoku { top: 70%; --leader-width: 92px; --leader-angle: 0deg; --leader-dot-y: 0px; }
  .padel-japan-map .map-pin-kyushu { top: 82%; --leader-width: 74px; --leader-angle: 0deg; --leader-dot-y: 0px; }
}

/* Fixed prefecture targets: Hokkaido, Tokyo, Aichi, Osaka, Ehime and Fukuoka. */
.padel-japan-map .map-region-leaders {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.padel-japan-map .map-region-leaders line {
  fill: none;
  stroke: #ef3028;
  stroke-width: .18;
  vector-effect: non-scaling-stroke;
}

.padel-japan-map .map-region-leaders circle {
  display: none;
}

.padel-japan-map .map-prefecture-target {
  position: absolute;
  z-index: 4;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #f0bd3d;
  box-shadow: 0 0 0 5px rgba(240,189,61,.2);
  pointer-events: none;
}

.padel-japan-map .target-hokkaido { left: 65%; top: 18%; }
.padel-japan-map .target-kanto { left: 61%; top: 66%; }
.padel-japan-map .target-chubu { left: 54.5%; top: 70.2%; }
.padel-japan-map .target-kinki { left: 47.9%; top: 76.1%; }
.padel-japan-map .target-shikoku { left: 40.9%; top: 80.7%; }
.padel-japan-map .target-kyushu { left: 32.2%; top: 84.3%; }

.padel-japan-map .map-pin {
  z-index: 3;
}

.padel-japan-map .map-pin::before,
.padel-japan-map .map-pin::after {
  display: none;
}

.padel-japan-map .map-pin-hokkaido { top: 13%; }
.padel-japan-map .map-pin-kanto { top: 61%; }
.padel-japan-map .map-pin-chubu { top: 69%; }
.padel-japan-map .map-pin-kinki { top: 73%; }
.padel-japan-map .map-pin-shikoku { top: 79%; }
.padel-japan-map .map-pin-kyushu { top: 84%; }

@media (max-width: 850px) {
  .padel-japan-map { min-height: 500px; }
  .padel-japan-map .map-pin-hokkaido { top: 13%; }
  .padel-japan-map .map-pin-kanto { top: 61%; }
  .padel-japan-map .map-pin-chubu { top: 69%; }
  .padel-japan-map .map-pin-kinki { top: 73%; }
  .padel-japan-map .map-pin-shikoku { top: 79%; }
  .padel-japan-map .map-pin-kyushu { top: 84%; }
}

/*
 * Coordinate-locked layout.
 * The map has dedicated left/right label columns, so the leader dots stay on
 * their regions instead of drifting when the viewport changes.
 */
.padel-japan-map {
  min-height: 620px;
}

.padel-japan-map .japan-map-image {
  width: 52%;
  margin: 0 auto;
}

.padel-japan-map .map-pin {
  width: 132px;
}

.padel-japan-map .map-pin-hokkaido { top: 13%; --leader-width: 42px; --leader-angle: 0deg; --leader-dot-y: 0px; }
.padel-japan-map .map-pin-kanto    { top: 43%; --leader-width: 58px; --leader-angle: 0deg; --leader-dot-y: 0px; }
.padel-japan-map .map-pin-chubu    { top: 53%; --leader-width: 96px; --leader-angle: 0deg; --leader-dot-y: 0px; }
.padel-japan-map .map-pin-kinki    { top: 52%; --leader-width: 112px; --leader-angle: 0deg; --leader-dot-y: 0px; }
.padel-japan-map .map-pin-shikoku  { top: 63%; --leader-width: 72px; --leader-angle: 0deg; --leader-dot-y: 0px; }
.padel-japan-map .map-pin-kyushu   { top: 73%; --leader-width: 35px; --leader-angle: 0deg; --leader-dot-y: 0px; }

@media (max-width: 850px) {
  .padel-japan-map {
    min-height: 440px;
    padding-top: 30px;
  }

  .padel-japan-map .japan-map-image {
    width: 45%;
  }

  .padel-japan-map .map-pin {
    width: 95px;
    min-height: 40px;
  }

  .padel-japan-map .map-pin-hokkaido,
  .padel-japan-map .map-pin-kanto,
  .padel-japan-map .map-pin-chubu { right: 5px; }

  .padel-japan-map .map-pin-kinki,
  .padel-japan-map .map-pin-shikoku,
  .padel-japan-map .map-pin-kyushu { left: 5px; }

  .padel-japan-map .map-pin-hokkaido { top: 13%; --leader-width: 138px; }
  .padel-japan-map .map-pin-kanto    { top: 60%; --leader-width: 138px; }
  .padel-japan-map .map-pin-chubu    { top: 69%; --leader-width: 194px; }
  .padel-japan-map .map-pin-kinki    { top: 71%; --leader-width: 255px; }
  .padel-japan-map .map-pin-shikoku  { top: 79%; --leader-width: 215px; }
  .padel-japan-map .map-pin-kyushu   { top: 87%; --leader-width: 155px; }
}