:root{
  --pin:#D4A017;           /* chrysanthemum gold for pins */
  --pin-hover:#E7B93C;
  --border:#e8e8e8;
}

/* Container keeps the map’s aspect ratio so it never warps */
/* MAP CARD + FRAME */
.map-card{border:1px solid #e8e8e8;border-radius:14px;background:#fff;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.map-frame{
  position:relative;
  width:100%;
  /* keeps it modest on desktop, roomy on mobile */
  max-width: clamp(360px, 48vw, 640px);
  margin: 0 auto;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #e8e8e8;
  background:#fff;
}
/* Let the image define the height so pins line up exactly */
.map-frame > img{
  display:block; width:100%; height:auto;
  user-select:none; -webkit-user-drag:none;
}

/* PINS */
.pin{
  position:absolute; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:#D4A017; border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25); outline:none;
}
.pin:hover,.pin:focus-visible{ background:#E7B93C; }

/* Tooltip (hover/focus only) */
.pin .tooltip{
  position:absolute; top:-10px; left:50%; transform:translate(-50%,-100%);
  background:#111; color:#fff; font-size:.85rem; padding:.25rem .5rem; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.pin:hover .tooltip,.pin:focus-visible .tooltip{ opacity:1; }

@media (min-width: 900px){ .pin{ width:18px; height:18px } }

/* Always-visible label for Tokyo */
.pin.tokyo .label{
  position:absolute; top:-10px; left:50%; transform:translate(-50%,-100%);
  background:#111; color:#fff; font-size:.9rem; padding:.28rem .5rem; border-radius:6px;
  white-space:nowrap; pointer-events:none;
  /* small shadow so it reads over the map */
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}