@layer map {
  .mapview {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, var(--ocean), var(--ocean-deep));
    touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
    outline: none;
  }
  .mapview:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
  .mapview.is-grabbing { cursor: grabbing; }
  .mapview__svg { width: 100%; height: 100%; display: block; }

  .m-ocean { fill: transparent; }
  .m-grat { fill: none; stroke: var(--graticule); stroke-width: 1; }
  .m-land { fill: var(--land); stroke: none; }
  .m-land--outer, .m-coast { stroke: var(--coast); stroke-width: 0.8; stroke-linejoin: round; }
  .m-coast { fill: none; }
  .m-borders { fill: none; stroke: var(--border); stroke-width: 0.7; stroke-dasharray: 3 2; stroke-linejoin: round; }
  .m-inset__frame { fill: var(--ocean); stroke: var(--coast); stroke-width: 1.2; }
  .m-inset__land { stroke: var(--coast); stroke-width: 0.8; stroke-linejoin: round; }
  .m-lakes { fill: var(--water-fill); stroke: var(--water-line); stroke-width: 1; }
  .m-rivers { fill: none; stroke: var(--water-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* highlights */
  .hl { pointer-events: none; stroke-linejoin: round; stroke-linecap: round; animation: hl-in 380ms var(--ease); }
  .hl--area.hl--target { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2; }
  .hl--line.hl--target { fill: none; stroke: var(--accent); stroke-width: 4.5; }
  .hl--area.hl--ok { fill: color-mix(in srgb, var(--ok) 26%, transparent); stroke: var(--ok); stroke-width: 2; }
  .hl--line.hl--ok { fill: none; stroke: var(--ok); stroke-width: 4.5; }
  .hl--area.hl--answer { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); stroke-width: 2.2; }
  .hl--line.hl--answer { fill: none; stroke: var(--accent); stroke-width: 4.5; }
  .hl--target { animation: hl-in 380ms var(--ease), hl-pulse 1.8s ease-in-out 400ms infinite; }
  @keyframes hl-in { from { opacity: 0; } }
  @keyframes hl-pulse { 50% { opacity: 0.55; } }

  /* tap pins */
  .pin { pointer-events: none; }
  .pin circle { animation: pin-in 260ms var(--ease); }
  .pin__halo { fill: currentColor; opacity: 0.22; }
  .pin__dot { fill: currentColor; stroke: #fff; stroke-width: 2; }
  .pin--ok { color: var(--ok); }
  .pin--near { color: var(--near); }
  .pin--bad { color: var(--bad); }
  @keyframes pin-in { from { transform: scale(0); } }

  /* marks (constant screen size: scaled by 1/(k·s0) in JS) */
  .mark { cursor: pointer; }
  .mark__bg { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transition: fill var(--t-fast), stroke var(--t-fast); }
  .mark__n { font: 750 12.5px var(--font-ui); fill: var(--ink); pointer-events: none; font-variant-numeric: tabular-nums; }
  .mark__dot { fill: var(--accent); }
  .mark__pulse { fill: var(--accent); opacity: 0; }
  .mark--active .mark__bg { fill: var(--accent); stroke: var(--accent-ink); }
  .mark--active .mark__n { fill: var(--accent-ink); }
  .mark--active .mark__dot { fill: var(--accent-ink); }
  .mark--active .mark__pulse { animation: mark-pulse 1.6s ease-out infinite; }
  .mark--ok .mark__bg { fill: var(--ok); stroke: var(--surface); }
  .mark--near .mark__bg { fill: var(--near); stroke: var(--surface); }
  .mark--bad .mark__bg { fill: var(--bad); stroke: var(--surface); }
  .mark--ok .mark__n, .mark--near .mark__n, .mark--bad .mark__n { fill: var(--surface); }
  .mark--ok .mark__dot, .mark--bad .mark__dot { fill: var(--surface); }
  @keyframes mark-pulse { 0% { opacity: 0.45; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }

  .m-cross__ring { fill: none; stroke: var(--accent); stroke-width: 2.5; }
  .m-cross__lines { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }

  .mapview__controls {
    position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: 10px;
    display: grid; gap: 4px; padding: 4px; border-radius: 14px;
    background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-2);
  }
  .map-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); }
  .map-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .map-btn:active { transform: scale(0.94); }
}