/* The SVG map drawn by src/map.js. The background screentone is CSS, so its dots stay 5px
   on screen at any zoom. Unlit segments are grey via CSS, which overrides the line colour
   set as an SVG attribute; once a segment is lit, the attribute colour shows. */
.mapwrap {
  position: relative;
  min-height: 0;
  border-right: 1px solid var(--rule);
  background: var(--ground);
}
/* Screentone darkening toward the edges, like a manga panel; the line network stays clean. */
.mapwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--tone);
  -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000);
  mask-image: radial-gradient(closest-side, transparent 55%, #000);
}
#map { position: relative; }

#map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#map:active { cursor: grabbing; }

#map .palace { fill: url(#palace-tone); }
#map .palace-dot { fill: #5f7f5a; opacity: 0.6; }
#map .yamanote { fill: none; stroke: #9a9f99; stroke-width: 1.4px; stroke-dasharray: 2 5; stroke-linecap: round; }
#map .ref-label {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  stroke: var(--ground);
  paint-order: stroke;
  stroke-linejoin: round;
}
#map .ref { transition: opacity 0.2s ease; }

#map .seg { stroke-width: 4.5px; stroke-linecap: round; transition: stroke 0.35s ease, stroke-width 0.35s ease; }
#map .seg:not(.lit) { stroke: var(--rail-off); stroke-width: 2px; }
/* A focused line, and every line after the answers are revealed, keeps a faint own colour. */
#map[data-focus] .seg:not(.lit):not(.dim),
#map.revealed .seg:not(.lit) { stroke: var(--lc); stroke-opacity: 0.42; stroke-width: 3px; }
#map[data-focus] .ref { opacity: 0.3; }

#map .st { fill: var(--surface); stroke: #9a9f99; }
#map .st.on { stroke: var(--ink); }
#map .st.miss { stroke: var(--stamp); fill: #fff; }

#map .lbl {
  font-family: var(--font-station);
  font-weight: 700;
  fill: var(--ink);
  stroke: var(--ground);
  paint-order: stroke;
  stroke-linejoin: round;
}
/* Missed names stay quiet ink; red is kept to the small ring on the dot (景観: no big red areas). */
#map .lbl.missed { fill: var(--ink-soft); font-weight: 400; }

/* Line focus (set by map.focusLine): everything off the chosen line fades back. */
#map .seg.dim { opacity: 0.07; }
#map .st.dim, #map .lbl.dim { opacity: 0.15; }

#map .pulse {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 2.5px;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 0.75s ease-out forwards;
}
@keyframes pulse {
  from { transform: scale(0.25); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}

.mapctl { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.mapctl button {
  width: 44px; height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font: 700 1.05rem/1 var(--font-station);
  cursor: pointer;
}
.mapctl button:hover { background: #f7f7f4; }

/* On a phone a vertical stack would hide the eastern ends of the Tozai and Shinjuku lines. */
@media (max-width: 900px) {
  .mapctl { flex-direction: row; top: 8px; right: 8px; bottom: auto; gap: 6px; }
  .mapctl button { width: 38px; height: 38px; background: rgb(255 255 255 / 0.85); }
}

/* Quiz view: no station names (they are the answers), no recall-game found marks. */
#map.quizview .labels { display: none; }
#map.quizview .st.on, #map.quizview .st.miss { stroke: #9aa19a; }
#map .target {
  fill: none;
  stroke: var(--stamp);
  stroke-width: 2.5px;
  stroke-dasharray: 4 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: target-spin 6s linear infinite;
}
@keyframes target-spin { to { transform: rotate(360deg); } }