.site {
  font-family: "Segoe UI", "Segoe UI Variable", "SegoeUI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: "Segoe UI", "Segoe UI Variable", "SegoeUI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
}

.wiki-content img {
  float: right;
  max-width: 300px;
  height: auto;
  margin: 0 0 1rem 1rem;
}

.summary {
  font-style: italic;
}

.hexmap {
  /* Same core geometry */
  --hex-r: 15px;
  --hex-h: calc(0.8660254 * var(--hex-r)); /* sqrt(3)/2 ≈ 0.8660 */

  position: relative;

  /* Add a bit of breathing room around the theoretical bounds */
  width:  calc(4 * var(--hex-r) + 16px);   /* 4r + 16px padding */
  height: calc(3 * var(--hex-h) + 16px);   /* 3h + 16px padding */

  padding: 8px;              /* puts that 16px split as 8px on each side */
  box-sizing: content-box;   /* padding extends outside the layout math */

  margin: 1rem auto 1.5rem;
}


/* Each hex image is treated as a 60×52 box.
   60px ≈ 2 * side length (s = 15)
   52px ≈ (√3 / 2) * 60  */
.hex-tile {
  position: absolute;
  width: 60px;
  height: 52px;
}

.hex-tile img {
  display: block;
  width: 100%;
  height: auto;
}

/* Geometry:
   dx = 0.75 * 60 = 45
   dy = 0.5 * 52 = 26
   H  = 52
   Center top-left = (45, 52)
*/

/* centre */
.hex--center { left: 45px;  top: 52px; }

/* neighbours, perfectly edge-touching */
.hex--N  { left: 45px;  top:   0px; }
.hex--S  { left: 45px;  top: 104px; }

.hex--NW { left:   0px; top:  26px; }
.hex--SW { left:   0px; top:  78px; }

.hex--NE { left: 90px; top:  26px; }
.hex--SE { left: 90px; top:  78px; }

.world-map-wrapper {
  overflow: auto;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

.world-map {
  --hex-width: 30px;
  --hex-height: 26px;
  --hex-x-step: 22.5px;
  --hex-y-step: 26px;
  --hex-y-offset: 13px;

  position: relative;
  width: calc(var(--hex-x-step) * 44 + var(--hex-width));
  height: calc(var(--hex-y-step) * 29 + var(--hex-height) + var(--hex-y-offset));
  margin: 0;
}

.world-map__tile {
  position: absolute;
  width: var(--hex-width);
  height: var(--hex-height);
}

.world-map__tile img {
  display: block;
  width: 100%;
  height: auto;
}

.world-map__tile--static {
  cursor: default;
}

.world-map__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-map__label {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #f5f2e8;
  font-family: "Segoe UI", "Segoe UI Variable", "SegoeUI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.world-map__label--region {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.85);
}

.world-map__label--road-river {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
}

.world-map__label--city {
  background: rgba(10, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.world-map__label--town {
  background: rgba(10, 12, 18, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: none;
}

.world-map-page {
  margin: 0;
  max-width: none;
  padding: 0;
}

.world-map-page nav,
.world-map-page footer {
  display: none;
}

.region-map-wrapper {
  overflow: auto;
  margin: 1.5rem 0;
}

.region-map {
  --hex-width: 30px;
  --hex-height: 26px;
  --hex-x-step: 22.5px;
  --hex-y-step: 26px;
  --hex-y-offset: 13px;

  position: relative;
  width: calc(var(--hex-x-step) * (var(--region-cols, 0) - 1) + var(--hex-width));
  height: calc(
    var(--hex-y-step) * (var(--region-rows, 0) - 1)
    + var(--hex-height)
    + var(--hex-y-offset)
  );
}

.region-map__tile {
  position: absolute;
  width: var(--hex-width);
  height: var(--hex-height);
}

.region-map__tile img {
  display: block;
  width: 100%;
  height: auto;
}

.region-map__tile--static {
  cursor: default;
}

.region-map__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.region-map__label {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #f5f2e8;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.region-map__label--region {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.85);
}

.region-map__label--road-river {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
}

.region-map__label--city {
  background: rgba(10, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.region-map__label--town {
  background: rgba(10, 12, 18, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: none;
}