/* Merged territory blobs on the world map.
   Rendered by /worldmap-blobs.js into an overlay inside the tile host, so the
   shapes share the hex grid's coordinate space and pan/zoom with the map.

   Overview mode ("worldmap-blobs-on") strips the per-hex chrome from owned
   hexes — outline, tint, castle sprite, owner marker — and lets the blob
   underneath carry the colour, so a player's holdings read as one landmass.
   Hovering / tapping a territory adds "is-blob-revealed" to that player's
   hexes and fades their blob out, restoring the exact per-hex view. */

.worldmap-blob-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  --wm-blob-inv-z: 1;
}

/* z-index: -1 keeps the fill behind the tiles (so capital castles and badges
   stay crisp on top) without giving .worldmap-tile a stacking context, which
   would trap the attacker/attackable hex highlight inside its own tile. The
   negative layer is scoped to .worldmap-map-wrapper's stacking context (it has
   a transform), so it can never sink below the map's paper background. */
.worldmap-blob-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}

.worldmap-blob-labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
}

.worldmap-blob {
  opacity: 1;
  transition: opacity 0.18s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

.worldmap-blob.is-revealed {
  opacity: 0;
}

.worldmap-blob-own path {
  stroke-dasharray: none;
}

/* ── Name plate, anchored under the cluster's capital hex ─────────────────── */

.worldmap-blob-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(24, 17, 9, 0.78);
  border: 1px solid var(--blob-color, rgba(255, 255, 255, 0.35));
  color: #f3e5c6;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%) scale(var(--wm-blob-inv-z));
  transform-origin: top center;
  transition: opacity 0.18s ease;
}

.worldmap-blob-label.is-revealed {
  opacity: 0;
}

/* Lost the space to a bigger neighbour at this zoom level. */
.worldmap-blob-label.is-crowded {
  display: none;
}

.worldmap-blob-label-own {
  background: rgba(46, 30, 6, 0.85);
  border-color: #e0b03a;
  color: #ffe9a8;
}

/* A cluster whose owner is already named elsewhere still shows its status pips. */
.worldmap-blob-label-badges-only {
  padding: 2px 4px;
  gap: 3px;
}

/* Rolled-up status pips reuse the per-hex badge palette, one size down. */
.worldmap-blob-pip.worldmap-hex-badge {
  width: 15px;
  height: 15px;
  font-size: 0.55rem;
  flex: none;
}

.worldmap-blob-label-count {
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ── Owned hexes in merged mode ───────────────────────────────────────────── */

.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed) {
  border-color: transparent;
}

.worldmap-blobs-on
  .worldmap-hex-owned:not(.is-blob-revealed):not(.worldmap-hex-attacker):not(.worldmap-hex-attackable) {
  box-shadow: none;
}

/* Hover scale would make an otherwise-invisible hex twitch in the split second
   before the reveal lands. */
.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed):hover {
  transform: none;
}

/* Inline style sets opacity: 1 on the tint, hence !important. */
.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed) .hex-overlay {
  opacity: 0 !important;
}

.worldmap-blobs-on .worldmap-hex-owned .worldmap-hex-castle,
.worldmap-blobs-on .worldmap-hex-owned .worldmap-own-marker,
.worldmap-blobs-on .worldmap-hex-owned .worldmap-enemy-marker,
.worldmap-blobs-on .worldmap-hex-owned .worldmap-hex-badge {
  transition: opacity 0.18s ease;
}

.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed) .worldmap-hex-castle,
.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed) .worldmap-own-marker,
.worldmap-blobs-on .worldmap-hex-owned:not(.is-blob-revealed) .worldmap-enemy-marker {
  opacity: 0;
}

/* Status pips move to the territory plate; landmark markers stay put, since
   they name a specific place rather than a transient state. */
.worldmap-blobs-on
  .worldmap-hex-owned:not(.is-blob-revealed)
  .worldmap-hex-badge:not(.worldmap-hex-badge-special) {
  opacity: 0;
}

/* One castle per landmass: the hex nearest the cluster centroid keeps its
   sprite as the kingdom's seat. */
.worldmap-blobs-on
  .worldmap-hex-owned.is-blob-capital:not(.is-blob-revealed)
  .worldmap-hex-castle {
  opacity: 1;
}

.worldmap-blob-toggle.is-active {
  border-color: #e0b03a;
  color: #ffd766;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(224, 176, 58, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .worldmap-blob,
  .worldmap-blob-label,
  .worldmap-blobs-on .worldmap-hex-owned .worldmap-hex-castle,
  .worldmap-blobs-on .worldmap-hex-owned .worldmap-own-marker,
  .worldmap-blobs-on .worldmap-hex-owned .worldmap-enemy-marker {
    transition: none;
  }
}

/* ── Sea & coast (public/worldmap-sea.js) ────────────────────────────────
   Hexes outside the claim boundary are drawn as open water on a per-tile
   canvas behind the hexes, so the hex elements themselves get out of the way:
   no grey fill, no border, no lock badge. They stay in the DOM because they
   are still clickable and still explain the boundary in their tooltip. */
.worldmap-sea-layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  /* Below the territory blob fill (z-index -1), which is itself behind the
     tiles. .worldmap-tile has no stacking context of its own, so both land on
     the map wrapper's context in the right order: terrain, then blobs, then
     hexes. Painting the land at z-index 0 hid every owner colour. */
  z-index: -2;
}

.worldmap-tile-host .worldmap-tile .worldmap-hex {
  z-index: 1;
}

.worldmap-tile-host .worldmap-hex.worldmap-hex-locked {
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  filter: none;
}

.worldmap-tile-host .worldmap-hex-locked:hover {
  opacity: 1;
  transform: none;
  box-shadow: none;
  /* No border: on a hexagon-clipped box it only draws the straight sides, which
     read as a broken rectangle floating on the water. */
  border-color: transparent;
}

.worldmap-tile-host .worldmap-hex-locked .worldmap-hex-badge-locked {
  display: none;
}

/* The hex sheen would draw a hexagon outline across open water. */
.worldmap-tile-host .worldmap-hex-locked .hex-overlay {
  display: none;
}

/* A coast hex is clipped to its own shoreline, so the straight hexagon border
   would cut across the water. The beach is painted on the canvas instead. */
.worldmap-tile-host .worldmap-hex-coast {
  border-color: transparent;
  box-shadow: none;
}

/* The map used to sit on a single ragged-edged sheet of parchment: one copy
   pinned behind the viewport, another stretched over the loaded tiles. Both
   edges cut across the map as soon as it was panned, and the bare background
   colour showed beyond them. The land is now painted per tile in world space
   (public/worldmap-sea.js), so the sheets are redundant — what is left is a
   flat parchment tone for the moments before a tile has arrived. */
.worldmap-map-viewport {
  background-image: none;
  background-color: #608778;
}

/* Open water is the host's own background: one pre-tinted texture repeating
   from world origin (the host sits at 0,0 of the map wrapper), rasterised only
   where it is on screen. It replaced a full-resolution canvas per tile, which
   cost ~160MB for a map that is mostly sea. The URLs come from the view as
   custom properties so they can point at the CDN.

   z-index makes the host a stacking context, so its background paints BELOW
   the land canvases (z -2) and territory blobs (z -1) inside it — without one,
   a descendant's background would paint above negative-z content. The attack
   arrows are a sibling at z 25 and stay on top. */
.worldmap-tile-host.worldmap-hex-map {
  z-index: 0;
  background-color: #608778;
  background-image: var(--wm-sea-light);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--wm-sea-size, 543px) var(--wm-sea-size, 543px);
}

:root[data-theme="dark"] .worldmap-tile-host.worldmap-hex-map {
  background-color: #182833;
  background-image: var(--wm-sea-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .worldmap-tile-host.worldmap-hex-map {
    background-color: #182833;
    background-image: var(--wm-sea-dark);
  }
}

:root[data-theme="dark"] .worldmap-map-viewport {
  background-color: #182833;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .worldmap-map-viewport {
    background-color: #182833;
  }
}

:root[data-theme="light"] .worldmap-map-viewport {
  background-color: #608778;
}