/* Component: map additions (lane UI-V): rival faces and their "⏳ 2 days" badges, cargo badges (only when you
   can see that port), Iron Maud's 🦾 ribbon, and the 🧤 tag on small ports. */

.map-rival-emoji {
  font-size: 15px;
}

.map-rival-badge-text {
  font-size: 14px;
  font-weight: 900;
  fill: var(--ink);
}

.map-rival.has-face {
  filter: drop-shadow(0 1px 1.5px rgba(13, 48, 71, 0.3));
}

.map-copy-ribbon {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 14;
  opacity: 0.55;
}

.map-copy-text {
  font-size: 15px;
}

.map-small-port__icon {
  font-size: 12px;
}

.map--compact .map-rival-emoji {
  font-size: 17px;
}

/* ── Lane UI-M: region maps (SPEC-2 §4.13) ─────────────────
   An iced port's ring and 🧊 badge, storm clouds over a zone in its storm season, the scale bar and the
   ocean exits at a gateway. Each region's art (src/ui/maps/) paints its own sea, land and labels. */

.map--sunrise {
  background: #5ec4d6;
}

.map--frost {
  background: #6f9fbf;
}

.map--crowns {
  background: #6db3c9;
}

.map--dragon {
  background: #5e8fa8;
}

/* Iced in: a pale ring of ice round the port, and its dot goes frosty. */
.map-port-ice {
  fill: rgba(240, 249, 255, 0.92);
  stroke: #b9dcef;
  stroke-width: 5;
  stroke-dasharray: 7 4;
}

.map-port.is-iced .map-port-dot {
  fill: #e8f5fc;
}

.map-ice-badge__icon {
  font-size: 14px;
}

/* Storm season: soft grey clouds with slanted rain. */
.map-storm-puff {
  fill: #eef2f5;
  stroke: #8a9caa;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.map-storm-rain {
  fill: none;
  stroke: #5f86a3;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.8;
}

.map-storm {
  filter: drop-shadow(0 2px 2px rgba(13, 48, 71, 0.25));
}

/* The scale bar: "⛴️ 1 day" over a two-tone bar. */
.map-scale-back {
  fill: rgba(255, 255, 255, 0.72);
}

.map-scale-label {
  font-size: 17px;
  font-weight: 800;
  fill: var(--sea-800);
}

.map-scale-bar.is-dark {
  fill: var(--sea-800);
}

.map-scale-bar.is-light {
  fill: #ffffff;
  stroke: var(--sea-800);
  stroke-width: 1.5;
}

.map-scale-ticks {
  fill: none;
  stroke: var(--sea-800);
  stroke-width: 2;
  stroke-linecap: round;
}

/* The ocean exits: a pill with the way across the ocean, and its arrowhead. */
.map-exit-pill {
  fill: #ffffff;
  stroke: var(--sea-600);
  stroke-width: 2.5;
}

.map-exit-head {
  fill: var(--sea-600);
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linejoin: round;
  paint-order: stroke;
}

.map-exit-shaft {
  fill: none;
  stroke: var(--sea-600);
  stroke-width: 6;
  stroke-linecap: round;
}

.map-exit-text {
  font-size: 19px;
  font-weight: 900;
  fill: var(--sea-800);
}

/* The exit's tap area (a button only): clear, over the pill, 92 units tall (map.js EXIT_HIT). */
.map-exit-hit {
  fill: transparent;
}

.map-exit.is-closed .map-exit-pill {
  stroke-dasharray: 6 5;
  fill: #f3f8fb;
}

.map-exit.is-button {
  cursor: pointer;
}

.map-exit.is-button:hover .map-exit-pill {
  fill: var(--accent-100);
  stroke: var(--accent-600);
}

.map-exit:focus-visible {
  outline: none;
}

.map-exit:focus-visible .map-exit-pill {
  fill: #fff3c4;
  stroke: var(--focus-dark);
  stroke-width: 4;
}

/* Phones: the map is about 358 px wide here. The exit's tap area grows taller (EXIT_HIT.phoneGrow, so it
   stays ≥ 44 px for fingers, as the ports' do), the 🧊 badge grows (PHONE_GROW.ice, round an inner group:
   the outer one is placed by its transform attribute), and the scale bar's words grow inside its back.
   tests/unit/map-lanes.test.js reads these numbers. */
@media (max-width: 37.5em) {
  .map-exit-hit {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1, 1.4);
  }

  .map-scale-label {
    font-size: 22px;
  }

  .map-ice-badge__body {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.2);
  }
}

/* ── C4: navy convoys. The 🔱 pill under a convoy strait's pirate badge (mapView.convoys): calm sea blue, a
   stronger rim on the convoy's day. ── */
.map-convoy__pill {
  fill: #e8f4fb;
  stroke: #1f6f9e;
  stroke-width: 2;
}

.map-convoy.is-today .map-convoy__pill {
  fill: #d6eef8;
  stroke-width: 3;
}

.map-convoy__text {
  font-size: 16px;
  font-weight: 900;
  fill: #12445f;
}