:root {
  --map-padding: 8vmin;
  --map-cell: calc(100vmin - (var(--map-padding) * 2));
  --map-size: calc(var(--map-cell) * 3);
  --map-field-size: calc(var(--map-cell) * 2);
  /* Authored assets: 1254px field / 418px seamless tile = exactly three tiles. */
  --map-pixel-size: calc(var(--map-field-size) / 3);
  --site-size: clamp(2.65rem, calc(2.15rem + 1.25vmin), 3.75rem);
  --site-core-size: clamp(3.9rem, calc(3.05rem + 2vmin), 5.55rem);
}

body.screen-village {
  background-color: var(--map-base);
}

body.screen-village::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background-color: var(--map-base);
  background-image: url("assets/map-pixel.png");
  background-repeat: repeat;
  background-size: var(--map-pixel-size) var(--map-pixel-size);
  background-position:
    calc(50% - (var(--map-field-size) / 2))
    calc(50% - (var(--map-field-size) / 2));
  image-rendering: auto;
  pointer-events: none;
}

body.screen-village::after {
  content: "";
  position: fixed;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, transparent 35%, rgb(5 7 8 / .13) 72%, rgb(5 7 8 / .34) 100%),
    linear-gradient(rgb(17 20 16 / .06), rgb(17 20 16 / .22));
  pointer-events: none;
}

.village-map {
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--map-field-size);
  height: var(--map-field-size);
  max-width: none;
  object-fit: fill;
  transform: translate(-50%, -50%);
  image-rendering: auto;
  pointer-events: none;
}

.village-workspace {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--map-size);
  height: var(--map-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.show-schema .village-workspace::before,
body.show-schema .village-workspace::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgb(94 207 211 / .28);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  pointer-events: none;
}
body.show-schema .village-workspace::before { width: calc(var(--map-cell) * .82); height: calc(var(--map-cell) * .58); }
body.show-schema .village-workspace::after { width: calc(var(--map-cell) * .48); height: calc(var(--map-cell) * .34); }

.site {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: inline-grid;
  inline-size: var(--site-size);
  block-size: var(--site-size);
  min-inline-size: 0;
  min-block-size: 0;
  aspect-ratio: 1 / 1;
  place-items: center;
  padding: 0;
  border-color: rgb(94 207 211 / .78);
  border-radius: 50%;
  background: rgb(8 10 11 / .5);
  box-shadow: 0 .45rem 1rem rgb(0 0 0 / .34), inset 0 0 0 1px rgb(255 255 255 / .035);
  font-family: var(--font-display);
  font-size: clamp(.76rem, calc(.66rem + .28vmin), 1rem);
  font-weight: 760;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.site-core {
  inline-size: var(--site-core-size);
  block-size: var(--site-core-size);
  border-color: var(--yellow-bright);
  background: radial-gradient(circle, rgb(217 189 88 / .2), transparent 68%), rgb(8 10 11 / .74);
  box-shadow: 0 1rem 2.4rem rgb(0 0 0 / .42), 0 0 0 .35rem rgb(217 189 88 / .08), inset 0 0 0 1px rgb(255 255 255 / .06);
  font-size: clamp(1rem, calc(.88rem + .4vmin), 1.36rem);
}
.site-inner { border-color: rgb(94 207 211 / .82); }
.site-outer { border-color: rgb(102 184 155 / .78); }
.site:hover,
.site:focus-visible,
.site[aria-pressed="true"] { background: rgb(8 10 11 / .88); transform: translate(-50%, -50%) scale(1.07); }
.site.is-active { animation: site-pulse 420ms ease; }

.site-a { --x: 50%; --y: 50%; }
.site-b { --x: 50%; --y: 44.35%; }
.site-c { --x: 55.657%; --y: 46.005%; }
.site-d { --x: 58%; --y: 50%; }
.site-e { --x: 55.657%; --y: 53.995%; }
.site-f { --x: 50%; --y: 55.65%; }
.site-g { --x: 44.343%; --y: 53.995%; }
.site-h { --x: 42%; --y: 50%; }
.site-i { --x: 44.343%; --y: 46.005%; }
.site-j { --x: 50%; --y: 40.4%; }
.site-k { --x: 56.8%; --y: 41.686%; }
.site-l { --x: 61.778%; --y: 45.2%; }
.site-m { --x: 63.6%; --y: 50%; }
.site-n { --x: 61.778%; --y: 54.8%; }
.site-o { --x: 56.8%; --y: 58.314%; }
.site-p { --x: 50%; --y: 59.6%; }
.site-q { --x: 43.2%; --y: 58.314%; }
.site-r { --x: 38.222%; --y: 54.8%; }
.site-s { --x: 36.4%; --y: 50%; }
.site-t { --x: 38.222%; --y: 45.2%; }
.site-u { --x: 43.2%; --y: 41.686%; }

@keyframes site-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.16); }
}

@media (max-width: 760px) {
  :root {
    --map-padding: 8vmin;
    --site-size: clamp(2.45rem, calc(2.1rem + 1.05vmin), 3rem);
    --site-core-size: clamp(3.5rem, calc(3rem + 1.5vmin), 4.25rem);
  }
}