#vision-zone .worldmap{ margin-top: clamp(3rem, 7vw, 7rem); }
#vision-zone .map-hint{ margin-bottom: 1rem; text-align: left; font-size: .72rem; letter-spacing: .12em; }
#vision-zone .map-wrap{
  position: relative; width: 100%; height: clamp(420px, 70svh, 760px); margin: 0; overflow: hidden;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-deep) 92%, var(--accent) 8%);
  isolation: isolate; touch-action: none;
}
#vision-zone .map-wrap::before{
  content: ""; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid color-mix(in srgb, var(--hairline) 65%, transparent); pointer-events: none;
}
#vision-zone .map-wrap svg{ width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#vision-zone .map-wrap svg:active{ cursor: grabbing; }
#vision-zone .map-grid-line,#vision-zone .map-grid-major{ stroke: color-mix(in srgb, var(--ink) 7%, transparent); stroke-width: .55; }
#vision-zone .map-grid-major{ stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: .7; }
#vision-zone .map-land{
  fill: color-mix(in srgb, var(--accent) 17%, var(--bg-deep));
  stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: .75; stroke-linejoin: round;
}
#vision-zone .map-toolbar{
  position: absolute; z-index: 4; top: 22px; right: 22px; display: flex; overflow: hidden;
  border: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
}
#vision-zone .map-toolbar button{
  width: 44px; height: 44px; margin: 0; border: 0; border-right: 1px solid var(--hairline);
  background: transparent; color: var(--ink); font: 400 1.05rem/1 var(--sans); cursor: pointer;
}
#vision-zone .map-toolbar button:last-child{ border-right: 0; }
#vision-zone .map-toolbar button:hover,#vision-zone .map-toolbar button:focus-visible{
  background: var(--accent); color: var(--bg); outline: none;
}
#vision-zone .map-toolbar .map-reset{
  position: static; display: block; opacity: 1; pointer-events: auto;
  transform: none; padding: 0; border-radius: 0;
}
#vision-zone .map-coordinate,#vision-zone .map-corner-label{
  position: absolute; z-index: 3; color: color-mix(in srgb, var(--ink-dim) 72%, transparent);
  font: 500 .55rem/1 var(--sans); letter-spacing: .08em; pointer-events: none;
}
#vision-zone .map-corner-label{ left: 24px; top: 24px; letter-spacing: .17em; }
@media (max-width: 640px){#vision-zone .worldmap{ margin-top: 2.5rem; }
#vision-zone .map-wrap{ height: clamp(380px, 60svh, 480px); }
#vision-zone .map-toolbar{ top: 18px; right: 18px; }
#vision-zone .map-corner-label{ left: 20px; top: 21px; width: calc(100% - 190px); line-height: 1.4; }
#vision-zone .map-coordinate{ display: none; }
}
@media (max-width: 360px){#vision-zone .map-wrap{ height: clamp(340px, 60svh, 420px); }
#vision-zone .map-corner-label{ width: calc(100% - 180px); }
}