/* The plan: paper of an old Plan de Paris, the Seine as a soft grey-blue ribbon, the city
   limits dotted, the métro drawn over them. Strokes are non-scaling, so widths are screen px. */

.mapwrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 45%, transparent 60%, rgb(120 98 60 / 0.10)),
    #f3eddf;
}
/* A faint paper grain. */
.mapwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgb(90 70 40 / 0.05) 0 0.6px, transparent 1px) 0 0 / 6px 6px,
    radial-gradient(circle, rgb(90 70 40 / 0.04) 0 0.6px, transparent 1px) 3px 3px / 6px 6px;
}

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

/* ---------- cartouche ---------- */
.map-caption {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 1;
  display: grid;
  gap: 1px;
  padding: 10px 14px 9px;
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  background: rgb(251 249 243 / 0.9);
  pointer-events: none;
}
.map-kicker { font: 600 0.62rem/1.2 var(--font-sign); letter-spacing: 0.22em; color: var(--ink-soft); }
.map-title { font: italic 700 2rem/1 var(--font-display); letter-spacing: -0.01em; }
.map-title small { font: 600 0.62rem/1 var(--font-sign); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.5em; color: var(--rouge); }
.map-index { font: 600 0.62rem/1.4 var(--font-sign); letter-spacing: 0.16em; color: var(--ink-soft); }
.map-index span { color: var(--rouge); }
.map-edition {
  position: absolute; right: 20px; bottom: 16px; z-index: 1;
  font: italic 500 0.78rem/1.2 var(--font-display); color: var(--ink-soft); pointer-events: none;
}

@media (max-width: 900px) {
  .map-caption { top: 10px; left: 10px; padding: 6px 9px 5px; outline-offset: 2px; }
  .map-title { font-size: 1.3rem; }
  .map-kicker, .map-index { font-size: 0.52rem; }
  .map-edition { display: none; }
}

/* ---------- reference layer ---------- */
.seine { fill: none; stroke: var(--seine); stroke-width: 9px; stroke-linecap: round; stroke-linejoin: round; }
.seine-edge { fill: none; stroke: #9db3bd; stroke-width: 11px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.limits { fill: rgb(255 253 246 / 0.55); stroke: #a39880; stroke-width: 1.4px; stroke-dasharray: 1 4; stroke-linecap: round; }
.ref-label { fill: #7d93a0; font-family: var(--font-display); font-style: italic; font-weight: 600; paint-order: stroke; stroke: #f3eddf; stroke-linejoin: round; }
.ref-label.ref-city { fill: #b4a88d; font-style: normal; font-family: var(--font-sign); font-weight: 600; letter-spacing: 0.4em; }

/* ---------- lines ---------- */
.seg { stroke: var(--rail-off); stroke-width: 2px; stroke-linecap: round; opacity: 0.8; transition: stroke-width 0.25s ease, opacity 0.25s ease; }
.seg.lit { stroke: var(--lc); stroke-width: 4.5px; opacity: 1; }
.seg.dim { opacity: 0.12; }
.revealed .seg:not(.lit) { stroke: var(--lc); opacity: 0.4; }

/* ---------- stations ---------- */
.st { fill: #fbf9f3; stroke: var(--rail-off); }
.st.on { fill: #fff; stroke: var(--ink); }
.st.miss { fill: var(--violet); stroke: #fff; }
.st.dim { opacity: 0.15; }

.lbl { fill: var(--ink); font-family: var(--font-sign-narrow); font-weight: 600; paint-order: stroke; stroke: #f3eddf; stroke-linejoin: round; }
.lbl.missed { fill: var(--violet); font-weight: 500; font-style: italic; }
.lbl.dim { opacity: 0.15; }

/* A hint circles a station; an answer sends out one ring. */
.target { fill: none; stroke: var(--violet); stroke-width: 2px; stroke-dasharray: 4 3; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.pulse { fill: none; stroke: var(--amber); stroke-width: 3px; transform-box: fill-box; transform-origin: center; animation: pulse 0.9s ease-out forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- zoom ---------- */
.mapctl { position: absolute; right: 16px; top: 16px; z-index: 1; display: grid; gap: 4px; }
.mapctl button {
  width: 38px; height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 600 1.15rem/1 var(--font-sign);
  cursor: pointer;
}
.mapctl button:hover { background: #fff; }
@media (max-width: 900px) { .mapctl { top: auto; bottom: 10px; right: 10px; grid-auto-flow: column; } .mapctl button { width: 34px; height: 34px; } }