/* =====================================================================
   INCEPTIA CITY — the interactive map section on the home page.
   Engine: js/world.js, art: js/world-art.js. Uses the site tokens
   (--cy pink, --mi cyan, --hd, --sf, --mo).
   ===================================================================== */
.wn {
  position: relative;
  padding: clamp(70px, 10vw, 130px) 0 0;
}
.wn-hd {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
.wn-hd h2 {
  font-size: clamp(40px, 6.6vw, 96px);
  margin-top: 12px;
}
.wn-sub {
  margin: 18px 0 0;
  font: 400 clamp(16px, 1.6vw, 20px)/1.5 var(--sf);
  font-style: italic;
  color: var(--mut);
  letter-spacing: 0.01em;
}
.wn-wrap {
  position: relative;
  margin: clamp(26px, 4vw, 48px) auto 0;
  width: min(100vw - 24px, 1760px);
  left: 50%;
  transform: translateX(-50%);
}
.wn-skip {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 30;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  padding: 0;
  background: var(--cy);
  color: var(--ink);
  font: 700 13px var(--mo);
  letter-spacing: 0.06em;
}
.wn-skip:focus {
  width: auto;
  height: auto;
  clip: auto;
  padding: 8px 12px;
}

/* frame + stage */
.wn-frame {
  position: relative;
  background: #04060f;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
.wn-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cy) 38%, transparent),
    inset 0 0 70px rgba(2, 3, 10, 0.6);
}
.wn-stage {
  contain: layout paint;
  position: relative;
  height: clamp(560px, 86vh, 980px);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  outline: none;
  background: #04060f;
}
.wn-stage.drag {
  cursor: grabbing;
}
.wn-stage:focus-visible {
  box-shadow: inset 0 0 0 2px var(--mi);
}
#wn-svg,
#wn-svg2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s;
}
.wn-stage.ready #wn-svg,
.wn-stage.ready #wn-svg2 {
  opacity: 1;
}
.wn-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.6s;
}
.wn-stage.ready .wn-boot {
  opacity: 0;
}
.wn-boot span {
  font: 12px var(--mo);
  letter-spacing: 0.2em;
  color: var(--mi);
  animation: wn-pl 1.2s ease-in-out infinite;
}
.wn-fog {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(3, 5, 14, 0.5));
}
#wn-dust {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}
#wn-dust i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mi);
  opacity: 0;
  animation: wn-dust 12s linear infinite;
}
#wn-dust i:nth-child(3n) {
  background: var(--cy);
  width: 2px;
  height: 2px;
}

/* island + route states */
.isl {
  cursor: pointer;
  outline: none;
}
.isl-in {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.3s;
}
.isl.hot .isl-in,
.isl:focus-visible .isl-in {
  transform: translateY(-10px);
  filter: brightness(1.3) saturate(1.2) drop-shadow(0 0 16px var(--ic));
}
.isl.launch .isl-in {
  animation: wn-launch 0.5s ease-in forwards;
}
.fring {
  opacity: 0;
  transition: opacity 0.25s;
}
.isl.hot .fring,
.isl:focus-visible .fring {
  opacity: 0.95;
}
.rt .rt-o {
  opacity: 0.22;
  transition: opacity 0.25s;
}
.rt.hot .rt-o {
  opacity: 0.85;
}
.rt .rt-c {
  transition: stroke-width 0.25s;
}
.rt.hot .rt-c {
  stroke-width: 3;
}
.ne {
  animation: wn-ne 4s steps(16) infinite;
}
.ne,
.nx,
.fring {
  vector-effect: non-scaling-stroke;
}

/* svg animation vocabulary */
.en {
  stroke-dasharray: 7 11;
  animation: wn-dash 1.2s steps(14) infinite;
}
.rd {
  animation: wn-rd 7s steps(70) infinite;
}
.rd.rv {
  animation-direction: reverse;
}
.pl {
  animation: wn-pl 2.4s steps(12) infinite;
}
.bob {
  animation: wn-bob 4.2s steps(28) infinite;
}
.cn {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-coin 3.4s steps(28) infinite;
}
.sp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-spin 9s steps(180) infinite;
}
.sg {
  animation: wn-sig 2.8s steps(20) infinite;
  opacity: 0;
}
.bm {
  animation: wn-bm 5s steps(20) infinite;
}
.cr {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-cr 3.2s steps(24) infinite;
}
.ecg {
  stroke-dasharray: 0.2 1;
  animation: wn-ecg 3.2s steps(40) infinite;
}
.sc {
  animation: wn-pl 1.8s steps(3) infinite;
}
.rp {
  transform-box: fill-box;
  transform-origin: center;
  animation: wn-rp 5.4s steps(36) infinite;
}
#wn-svg .in,
#wn-svg2 .in {
  animation: wn-in 2.4s steps(24) infinite;
  opacity: 0;
}
@keyframes wn-dash {
  to {
    stroke-dashoffset: -36;
  }
}
@keyframes wn-rd {
  to {
    stroke-dashoffset: -140;
  }
}
@keyframes wn-pl {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes wn-coin {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(0.18);
  }
}
@keyframes wn-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wn-sig {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes wn-bm {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-cr {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.08);
  }
}
@keyframes wn-ecg {
  to {
    stroke-dashoffset: -1.2;
  }
}
@keyframes wn-rp {
  0% {
    transform: scale(0.55);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes wn-in {
  0% {
    transform: translateY(34px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-84px);
    opacity: 0;
  }
}
@keyframes wn-ne {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes wn-launch {
  to {
    transform: translateY(-14px);
    filter: brightness(2) saturate(1.4);
    opacity: 0.9;
  }
}

@keyframes wn-dust {
  0% {
    transform: translate(0, 30px);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(40px, -160px);
    opacity: 0;
  }
}
.wn-off *,
.wn-off:before,
html.bgpause .wn * {
  animation-play-state: paused !important;
}
.wn-rm * {
  animation: none !important;
}
.wn-rm .sg,
.wn-rm .in {
  opacity: 0.5;
}
.wn-rm #wn-dust {
  display: none;
}

/* labels (HTML, counter-scaled so they stay legible at any zoom) */
.wn-labels {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.wn-lb {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  transition: opacity 0.2s;
  will-change: transform;
}
.wn-lb b {
  font: 900 clamp(14px, 1.35vw, 19px)/1 var(--hd);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 5px 10px 4px;
  background: rgba(5, 6, 13, 0.78);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ic) 55%, transparent),
    0 0 14px color-mix(in srgb, var(--ic) 22%, transparent);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.wn-lb i {
  font: normal 10px var(--mo);
  letter-spacing: 0.14em;
  color: var(--ic);
  text-shadow:
    0 0 8px #000,
    0 0 3px #000;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.2s;
}
.wn-stage[data-zl="hi"] .wn-lb i,
.wn-lb.on i {
  opacity: 1;
  max-height: 16px;
}
.wn-lb.on b {
  background: var(--ic);
  color: #05060d;
  box-shadow: 0 0 22px var(--ic);
}
.wn-lb:before {
  content: "";
  order: -1;
  width: 1px;
  height: 10px;
  background: linear-gradient(transparent, var(--ic));
}

/* hologram info panel */
.wn-pan {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 14;
  width: min(290px, calc(100% - 16px));
  padding: 14px 16px 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 16%, #080c1b), rgba(5, 6, 13, 0.94));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ic) 60%, transparent),
    0 0 30px color-mix(in srgb, var(--ic) 25%, transparent);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  pointer-events: none;
  animation: wn-pop 0.22s ease-out;
  will-change: transform;
}
.wn-pan.pin {
  pointer-events: auto;
}
.wn-pan[hidden] {
  display: none;
}
.wn-pan .mo {
  display: block;
  color: var(--ic);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.wn-pan b {
  display: block;
  font: 900 26px/1 var(--hd);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 6px;
}
.wn-pan p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bone);
  opacity: 0.88;
}
.wn-enter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  font: 700 14px var(--hd);
  letter-spacing: 0.16em;
  color: #05060d;
  background: var(--ic);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.wn-enter i {
  font-style: normal;
  transition: transform 0.2s;
}
.wn-enter:hover i {
  transform: translateX(4px);
}
@keyframes wn-pop {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

/* HUD */
.wn-hud {
  position: absolute;
  z-index: 11;
  font: 11px var(--mo);
  letter-spacing: 0.14em;
  color: var(--mi);
  pointer-events: none;
  text-shadow: 0 0 6px #000;
}
.wn-hud.tl {
  left: clamp(14px, 2vw, 26px);
  top: clamp(14px, 2vw, 22px);
  display: flex;
  align-items: center;
  gap: 9px;
}
.wn-hud.tl i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35f08e;
  box-shadow: 0 0 10px #35f08e;
  animation: wn-pl 1.6s infinite;
}
.wn-hud.tr {
  right: clamp(14px, 2vw, 26px);
  top: clamp(14px, 2vw, 22px);
  text-align: right;
  opacity: 0.8;
}
.wn-hint {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: clamp(14px, 1.6vw, 20px);
  transform: translateX(-50%);
  max-width: min(720px, calc(100% - 28px));
  padding: 7px 14px;
  font: 10.5px/1.5 var(--mo);
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--bone);
  background: rgba(5, 6, 13, 0.72);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cy) 35%, transparent);
  pointer-events: none;
  text-transform: uppercase;
}
.wn-hint b {
  color: var(--cy);
  font-weight: 400;
}
.wn-ctl {
  position: absolute;
  z-index: 13;
  left: clamp(18px, 2.2vw, 30px);
  bottom: clamp(40px, 3.4vw, 50px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wn-ctl button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--mi);
  background: rgba(5, 6, 13, 0.82);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mi) 45%, transparent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition:
    background 0.2s,
    color 0.2s;
}
.wn-ctl button:hover,
.wn-ctl button:focus-visible {
  background: var(--mi);
  color: #05060d;
}
.wn-ctl svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wn-minib {
  position: absolute;
  z-index: 13;
  right: clamp(14px, 2vw, 26px);
  top: clamp(36px, 3vw, 48px);
  aspect-ratio: 2600/1620;
  background: #050813;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cy) 50%, transparent),
    0 0 20px rgba(0, 0, 0, 0.6);
  cursor: crosshair;
  touch-action: none;
}
#wn-mini {
  display: block;
  width: 100%;
  height: 100%;
}
.wn-minib span {
  position: absolute;
  left: 6px;
  top: 4px;
  font: 9px var(--mo);
  letter-spacing: 0.16em;
  color: var(--cy);
  pointer-events: none;
}

/* destination directory */
.wn-dirh {
  scroll-margin-top: 120px;
  max-width: 1200px;
  margin: clamp(30px, 4vw, 50px) auto 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 clamp(0px, 1vw, 8px);
}
.wn-dirh h3 {
  font-size: clamp(26px, 3vw, 38px);
}
.wn-dir {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
}
@media (max-width: 1000px) {
  .wn-dir {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .wn-dir {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wn-dir li {
  display: contents;
}
.wn-di {
  --ic: var(--cy);
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 0;
  padding: 12px 14px 12px 16px;
  color: var(--bone);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 9%, #0a0e1c), #06080f);
  box-shadow:
    inset 3px 0 0 var(--ic),
    inset 0 0 0 1px color-mix(in srgb, var(--ic) 22%, transparent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.wn-di .mo {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ic);
}
.wn-di b {
  display: block;
  font: 900 22px/1.05 var(--hd);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.wn-di small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--mut);
}
.wn-di:hover,
.wn-di.on,
.wn-di:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 22%, #0a0e1c), #06080f);
  box-shadow:
    inset 3px 0 0 var(--ic),
    inset 0 0 0 1px var(--ic),
    0 0 22px color-mix(in srgb, var(--ic) 30%, transparent);
}

@media (max-width: 760px) {
  .wn-wrap {
    width: calc(100vw - 16px);
  }
  .wn-stage {
    height: min(86svh, 820px);
    min-height: 520px;
  }
  .wn-hint {
    max-width: calc(100% - 28px);
    bottom: 14px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
  }
  .wn-minib {
    right: 12px;
  }
  .wn-ctl button {
    width: 44px;
    height: 44px;
  }
  .wn-hud.tl {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .wn-hud.tr {
    display: none;
  }
  .wn-lb b {
    font-size: 13px;
    padding: 4px 8px 3px;
  }
  .wn-lb i {
    display: none;
  }
  .wn-pan {
    width: min(270px, calc(100% - 16px));
  }
  .wn-di b {
    font-size: 19px;
  }
  .wn-di small {
    display: none;
  }
}
@media (max-width: 360px) {
  .wn-dir {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  #wn-dust {
    display: none;
  }
  #wn-svg {
    transition: none;
  }
}
.wn-hint .ht {
  display: none;
}
@media (hover: none) {
  .wn-hint .hd {
    display: none;
  }
  .wn-hint .ht {
    display: inline;
  }
}

/* .sx uses content-visibility:auto (paint containment); the map section must be allowed to extend past its padding box */
.sx.wn {
  content-visibility: visible;
  contain: none;
}

.wn-lb .sh {
  display: none;
}
.wn-stage[data-ly="tall"] .wn-lb .lg {
  display: none;
}
.wn-stage[data-ly="tall"] .wn-lb .sh {
  display: inline;
}
.wn-stage[data-ly="tall"] .wn-lb b {
  font-size: 13px;
  padding: 4px 8px 3px;
}
.wn-stage[data-ly="tall"] .wn-minib {
  width: auto;
  height: clamp(84px, 13vh, 112px);
  top: 40px;
}
@media (max-width: 760px) {
  .wn-stage.ready .wn-hint {
    animation: wn-hintfade 1s 7s forwards;
  }
}
@keyframes wn-hintfade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* sponsor pads: money-green, smaller labels */
.wn-lb.pdl b {
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.14em;
  padding: 4px 8px 3px;
  background: rgba(6, 22, 10, 0.8);
}
.wn-lb.pdl i {
  color: #9bff5a;
}
.wn-pan.pad {
  background: linear-gradient(160deg, color-mix(in srgb, #8be04a 22%, #06120a), rgba(4, 12, 7, 0.95));
}
.wn-pan.pad b:before {
  content: "$ ";
}

/* ===== DAY MODE: a bright daytime city ===== */
html[data-theme="light"] .wn-frame {
  background: #3a8ccd;
  --bone: #10253f;
  --mut: #3d5878;
  box-shadow: 0 24px 60px -24px rgba(30, 100, 170, 0.5);
}
html[data-theme="light"] .wn-frame:before {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    inset 0 0 90px rgba(255, 255, 255, 0.35);
}
html[data-theme="light"] .wn-stage {
  background: radial-gradient(120% 90% at 50% 20%, #6fb8ea, #3a8ccd 70%, #2a74b8);
}
html[data-theme="light"] .wn-fog {
  background: radial-gradient(120% 100% at 50% 45%, transparent 65%, rgba(10, 40, 90, 0.28));
}
html[data-theme="light"] #wn-dust i {
  background: #fff;
  box-shadow: 0 0 6px #fff;
}
html[data-theme="light"] .isl.hot .isl-in,
html[data-theme="light"] .isl:focus-visible .isl-in {
  filter: brightness(1.06) saturate(1.2) drop-shadow(0 8px 14px rgba(20, 80, 140, 0.45));
}
html[data-theme="light"] .wn-lb b {
  color: #10253f;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ic) 70%, #fff),
    0 4px 12px rgba(30, 90, 150, 0.25);
}
html[data-theme="light"] .wn-lb i {
  color: #0d3a63;
  text-shadow:
    0 0 6px #fff,
    0 0 3px #fff;
}
html[data-theme="light"] .wn-lb.on b {
  background: var(--ic);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ic) 60%, transparent);
}
html[data-theme="light"] .wn-lb.pdl b {
  background: rgba(236, 255, 224, 0.95);
  color: #1d5a12;
}
html[data-theme="light"] .wn-lb.pdl.on b {
  background: #3aa51a;
  color: #fff;
}
html[data-theme="light"] .wn-lb.pdl i {
  color: #1f6f10;
}
html[data-theme="light"] .wn-pan {
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--ic) 12%, #eef6ff));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ic) 65%, #fff),
    0 14px 34px -10px rgba(20, 80, 140, 0.5);
}
html[data-theme="light"] .wn-pan .mo {
  color: color-mix(in srgb, var(--ic) 70%, #10253f);
}
html[data-theme="light"] .wn-pan.pad {
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--ic) 14%, #fff));
}
html[data-theme="light"] .wn-pan.pad b:before {
  color: #3aa51a;
}
html[data-theme="light"] .wn-enter {
  color: #fff;
  background: color-mix(in srgb, var(--ic) 78%, #10253f);
}
html[data-theme="light"] .wn-hud {
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 30, 70, 0.7);
}
html[data-theme="light"] .wn-hint {
  background: rgba(255, 255, 255, 0.82);
  color: #2b4a6c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(30, 90, 150, 0.2);
}
html[data-theme="light"] .wn-hint b {
  color: #d6246e;
}
html[data-theme="light"] .wn-ctl button {
  background: rgba(255, 255, 255, 0.92);
  color: #0d5a8f;
  box-shadow:
    inset 0 0 0 1px rgba(13, 90, 143, 0.35),
    0 4px 12px rgba(30, 90, 150, 0.25);
}
html[data-theme="light"] .wn-ctl button:hover,
html[data-theme="light"] .wn-ctl button:focus-visible {
  background: #0d5a8f;
  color: #fff;
}
html[data-theme="light"] .wn-minib {
  background: #2f7fc0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    0 6px 16px rgba(30, 90, 150, 0.3);
}
html[data-theme="light"] .wn-minib span {
  color: #fff;
}
html[data-theme="light"] .wn-boot span {
  color: #0d5a8f;
}
html[data-theme="light"] .wn-di {
  --bone: #10253f;
  --mut: #3d5878;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--ic) 9%, #eef6ff));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--ic) 80%, #fff),
    inset 0 0 0 1px rgba(40, 100, 160, 0.18),
    0 6px 16px -8px rgba(30, 90, 150, 0.35);
}
html[data-theme="light"] .wn-di .mo {
  color: color-mix(in srgb, var(--ic) 65%, #10253f);
}
html[data-theme="light"] .wn-di:hover,
html[data-theme="light"] .wn-di.on,
html[data-theme="light"] .wn-di:focus-visible {
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--ic) 24%, #fff));
  box-shadow:
    inset 3px 0 0 var(--ic),
    inset 0 0 0 1px var(--ic),
    0 10px 24px -8px color-mix(in srgb, var(--ic) 55%, transparent);
}
html[data-theme="light"] .wn-hd .wn-sub {
  color: #3d5878;
}

.wn-stage[data-ly="tall"] .wn-lb.pdl {
  display: none;
}

/* ===== sponsor lighthouses: skylight, overshine, hover panel ===== */
.fx .os {
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fx .holo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1),
    filter 0.3s;
}
.fx.hot .os {
  opacity: 1;
}
.fx.hot .holo {
  transform: scale(1.35);
  filter: drop-shadow(0 0 14px var(--ic));
}
html[data-theme="light"] .fx .os {
  mix-blend-mode: normal;
}
html[data-theme="light"] .fx.hot .holo {
  filter: drop-shadow(0 6px 12px rgba(40, 120, 20, 0.5));
}
.wn-lb.pdl {
  opacity: 0;
  transition: opacity 0.2s;
}
.wn-stage[data-zl="hi"] .wn-lb.pdl,
.wn-lb.pdl.on {
  opacity: 1;
}
.wn-pan.pad {
  width: min(300px, calc(100% - 16px));
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 24%, #080612), rgba(5, 5, 12, 0.96));
  box-shadow:
    inset 0 0 0 1px var(--ic),
    0 0 60px 8px color-mix(in srgb, var(--ic) 38%, transparent);
}
.wn-lg {
  display: grid;
  place-items: center;
  height: 96px;
  margin: 0 0 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(2, 2, 10, 0.75);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 60%, transparent);
}
.wn-lg img {
  height: 78px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.wn-lg.vac {
  grid-auto-flow: column;
  gap: 14px;
  color: #8be04a;
}
.wn-lg.vac b {
  font: 900 44px/1 var(--hd);
  margin: 0;
  color: #d6ff7a;
}
.wn-lg.vac span {
  font: 700 11px/1.4 var(--mo);
  letter-spacing: 0.14em;
  text-align: left;
}
html[data-theme="light"] .wn-lg {
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 70%, #fff);
}
html[data-theme="light"] .wn-lg.vac {
  color: #2f8a12;
}
html[data-theme="light"] .wn-lg.vac b {
  color: #3aa51a;
}
html[data-theme="light"] .wn-pan.pad {
  box-shadow:
    inset 0 0 0 1px var(--ic),
    0 0 70px 10px color-mix(in srgb, var(--ic) 30%, transparent);
}
.wn-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 2px;
}
.wn-sec {
  margin-top: 12px;
  font: 700 12px var(--mo);
  letter-spacing: 0.14em;
  color: var(--ic);
  border-bottom: 1px solid color-mix(in srgb, var(--ic) 50%, transparent);
}

/* ===== declutter + friendlier map ===== */
.rt-sp {
  opacity: 0;
  transition: opacity 0.25s;
}
.rt-sp.hot {
  opacity: 1;
}
.wn-frame.wn-used .wn-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}
.wn-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 12px;
  padding: 2px 2px 4px;
}
.wn-jump::-webkit-scrollbar {
  display: none;
}
.wn-jump .mo {
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--mut);
  margin-right: 4px;
}
.wn-jump button {
  flex: none;
  cursor: pointer;
  padding: 8px 14px;
  font: 700 13px var(--hd);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy);
  background: color-mix(in srgb, var(--cy) 7%, transparent);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cy) 40%, transparent);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition:
    background 0.2s,
    color 0.2s;
}
.wn-jump button:hover,
.wn-jump button:focus-visible {
  background: var(--cy);
  color: #05060d;
  outline: none;
}
.wn-jump button[data-j="sponsors"] {
  color: #8be04a;
  box-shadow: inset 0 0 0 1px rgba(139, 224, 74, 0.5);
}
.wn-jump button[data-j="sponsors"]:hover,
.wn-jump button[data-j="sponsors"]:focus-visible {
  background: #8be04a;
  color: #05160a;
}
html[data-theme="light"] .wn-jump button {
  color: #0d5a8f;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(13, 90, 143, 0.35);
}
html[data-theme="light"] .wn-jump button:hover,
html[data-theme="light"] .wn-jump button:focus-visible {
  background: #0d5a8f;
  color: #fff;
}
html[data-theme="light"] .wn-jump button[data-j="sponsors"] {
  color: #2f8a12;
  box-shadow: inset 0 0 0 1px rgba(47, 138, 18, 0.45);
}
html[data-theme="light"] .wn-jump button[data-j="sponsors"]:hover {
  background: #2f8a12;
  color: #fff;
}
@media (min-width: 761px) {
  .wn-stage[data-ly="wide"] ~ .wn-minib,
  .wn-minib {
    top: auto;
    bottom: clamp(14px, 2vw, 26px);
  }
  .wn-stage[data-ly="tall"] .wn-minib {
    top: 40px;
    bottom: auto;
  }
}
/* keep the site's floating background decorations from drifting over the map */
.wn-wrap {
  z-index: 3;
}
.wn-frame {
  isolation: isolate;
}
.wn-minib {
  width: clamp(110px, 11.5vw, 160px);
}

/* ===== sponsor hologram projection over the whole map ===== */
.wn-holo {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
  --hc: #8be04a;
  --lx: 50%;
  --ly: 50%;
  --dx: 0px;
  --dy: 0px;
  --bl: 0px;
  --ba: 0rad;
}
.hl-dim {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
  background: radial-gradient(60% 60% at 50% 44%, rgba(2, 2, 12, 0), rgba(2, 2, 12, 0.3));
}
.wn-holo.on .hl-dim {
  opacity: 1;
}
.hl-rays {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
.hl-rays:before {
  content: "";
  position: absolute;
  width: 3000px;
  height: 3000px;
  left: -1500px;
  top: -1500px;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--hc) 38%, transparent) 0 1.8deg,
    transparent 1.8deg 9deg
  );
  -webkit-mask: radial-gradient(circle, #000 0, transparent 46%);
  mask: radial-gradient(circle, #000 0, transparent 46%);
  animation: hl-spin 30s linear infinite;
}
.wn-holo.on .hl-rays {
  opacity: 0.6;
}
.hl-beam {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: var(--bl);
  height: 230px;
  margin-top: -115px;
  transform-origin: 0 50%;
  transform: rotate(var(--ba)) scaleX(0);
  opacity: 0;
  clip-path: polygon(0 48.5%, 100% 0, 100% 100%, 0 51.5%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 90%, #fff), transparent 92%);
}
.wn-holo.on .hl-beam {
  opacity: 0.5;
  transform: rotate(var(--ba)) scaleX(1);
  animation:
    hl-beam 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    hl-pulse 2.6s ease-in-out 0.6s infinite;
}
.hl-proj {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(52%, 680px);
  transform: translate(-50%, -50%) scale(0.001);
  opacity: 0;
}
.hl-proj:before {
  content: "";
  position: absolute;
  inset: -60% -45%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--hc) 34%, transparent),
    color-mix(in srgb, var(--hc) 10%, transparent) 55%,
    transparent 100%
  );
  filter: blur(10px);
  animation: hl-pulse 3.4s ease-in-out infinite;
}
.wn-holo.on .hl-proj {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: hl-in 0.95s cubic-bezier(0.16, 0.9, 0.2, 1) 0.25s both;
}
.hl-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 500/226;
  animation:
    hl-bob 5s ease-in-out infinite,
    hl-flick 4.2s steps(1) infinite;
  filter: drop-shadow(0 0 22px var(--hc)) drop-shadow(0 0 54px color-mix(in srgb, var(--hc) 70%, transparent));
}
.hl-art img {
  width: 100%;
  display: block;
  opacity: 1;
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, rgba(0, 0, 0, 0.55) 3px 4px);
  mask-image: repeating-linear-gradient(0deg, #000 0 3px, rgba(0, 0, 0, 0.55) 3px 4px);
  filter: drop-shadow(2px 0 0 rgba(255, 60, 130, 0.45)) drop-shadow(-2px 0 0 rgba(60, 210, 255, 0.45));
}
.hl-art b {
  font: 900 clamp(90px, 16vw, 220px)/0.9 var(--hd);
  color: var(--hc);
  text-shadow:
    0 0 30px var(--hc),
    0 0 80px var(--hc);
}
.hl-art span {
  position: absolute;
  bottom: 6%;
  font: 700 clamp(12px, 1.8vw, 22px)/1.5 var(--mo);
  letter-spacing: 0.3em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 14px var(--hc);
}
.hl-art u {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hc);
  box-shadow: 0 0 10px var(--hc);
  opacity: 0;
  animation: hl-spark 4s linear infinite;
}
.hl-ring {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 96%;
  height: 24%;
  margin-left: -48%;
  border-radius: 50%;
  border: 2px solid var(--hc);
  box-shadow: 0 0 30px var(--hc);
  opacity: 0.5;
  -webkit-mask: radial-gradient(closest-side, transparent 40%, #000);
  mask: radial-gradient(closest-side, transparent 40%, #000);
  animation: hl-ring 2.8s ease-out infinite;
}
@keyframes hl-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hl-beam {
  from {
    transform: rotate(var(--ba)) scaleX(0);
    opacity: 0;
  }
}
@keyframes hl-pulse {
  50% {
    opacity: 0.35;
  }
}
@keyframes hl-in {
  0% {
    transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy))) scale(0.02);
    opacity: 0;
    filter: blur(14px);
  }
  55% {
    opacity: 1;
    filter: blur(2px);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
}
@keyframes hl-bob {
  50% {
    transform: translateY(-10px);
  }
}
@keyframes hl-flick {
  0%,
  92%,
  96% {
    opacity: 1;
  }
  93% {
    opacity: 0.55;
  }
  94% {
    opacity: 1;
    transform: translateX(5px);
  }
  97% {
    opacity: 0.7;
  }
}
@keyframes hl-spark {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateY(-220px);
    opacity: 0;
  }
}
@keyframes hl-ring {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}
html[data-theme="light"] .hl-dim {
  background: radial-gradient(60% 60% at 50% 44%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35));
}
html[data-theme="light"] .hl-art {
  filter: drop-shadow(0 0 18px var(--hc)) drop-shadow(0 6px 18px rgba(30, 20, 80, 0.3));
}
html[data-theme="light"] .hl-art img {
  filter: none;
}
html[data-theme="light"] .hl-art span {
  color: #10253f;
  text-shadow: 0 0 10px #fff;
}
html[data-theme="light"] .wn-holo.on .hl-rays {
  opacity: 0.5;
}
.wn-rm .wn-holo * {
  animation: none !important;
}
@media (max-width: 760px) {
  .hl-proj {
    width: 84%;
  }
}
/* declutter: vacant plaque is just a glyph; rename ring so hot ring uses brand colour */
.wn-pan.pad .mo,
.wn-pan.pad .wn-sec {
  color: var(--ic);
}
.wn-pan.pad b:before {
  color: var(--ic);
}
.wn-holo.on ~ .wn-labels .pdl {
  opacity: 0 !important;
}
.wn-holo.on ~ .wn-labels .wn-lb {
  opacity: 0.12 !important;
  transition: opacity 0.4s;
}
.wn-holo.on .hl-art {
  opacity: 1;
}

.hl-info {
  position: absolute;
  left: 50%;
  top: 100%;
  width: min(100%, 560px);
  margin-top: 46px;
  transform: translateX(-50%);
  text-align: center;
  display: grid;
  gap: 6px;
  color: #fff;
  text-shadow:
    0 0 14px #000,
    0 0 30px color-mix(in srgb, var(--hc) 60%, #000);
}
.hl-info .mo {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--hc) 70%, #fff);
}
.hl-info b {
  font: 900 clamp(26px, 3.2vw, 42px)/1 var(--hd);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hl-info p {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.5;
  opacity: 0.92;
}
html[data-theme="light"] .hl-info {
  color: #12183a;
  text-shadow:
    0 0 12px #fff,
    0 0 24px #fff;
}
html[data-theme="light"] .hl-info .mo {
  color: var(--hc);
}

/* taken lighthouses: frameless logo over a holographic island of light */
.fx .holo.big .hl-lg {
  filter: drop-shadow(0 0 5px var(--ic)) drop-shadow(0 0 14px color-mix(in srgb, var(--ic) 60%, transparent));
}
.fx .holo.big .isl3 {
  animation: wn-bm 5s steps(20) infinite;
}
.fx.hot .holo.big {
  transform: scale(1.06);
}
html[data-theme="light"] .fx .holo.big .hl-lg {
  filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 1px #fff);
}
html[data-theme="light"] .fx.hot .holo.big {
  filter: none;
}
.hl-art img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
}
.wn-stage.hl-on .fx .holo {
  opacity: 0.1;
  transition: opacity 0.3s;
}
.wn-stage .fx .holo {
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1),
    filter 0.3s;
}

.pk {
  offset-rotate: 0deg;
  animation-name: wn-pk;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes wn-pk {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
.wn-busy *,
.wn-busy:before {
  animation-play-state: paused !important;
}
/* phones: the stage is tall enough to show the whole city at once; one finger scrolls the page, pinch zooms the map */
.wn-stage[data-ly="tall"] {
  height: min(calc((100vw - 16px) * 2.25), calc(100svh - 150px));
  min-height: 0;
}
.wn-hud .ht {
  display: none;
}
@media (hover: none) {
  .wn-hud .hd {
    display: none;
  }
  .wn-hud .ht {
    display: inline;
  }
}
#wn-dust {
  opacity: 0.6;
}

/* touch + tablet: bleed layer pinned for GPU panning/zooming */
#wn-svg.lite,
#wn-svg2.lite {
  max-width: none;
  max-height: none;
  will-change: transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
#wn-svg2 {
  pointer-events: none;
}
/* while an island's info panel is open it already shows the district kicker, so the small sub-label under the map label steps aside instead of being half-covered by the panel */
.wn-frame:has(.wn-pan:not([hidden])) .wn-lb i {
  opacity: 0;
}
/* lite devices: the map's SVG art rests between bursts (see wake/sleep in world.js); the drifting dust keeps moving */
.wn-rest svg * {
  animation-play-state: paused !important;
}

/* ----- sponsor hologram: keep the words readable -----
   The rays, halo and glow used to sit right on top of the sponsor's name and
   the info text. They are now much fainter, the map labels fade out almost
   fully behind the hologram, and the info text has a soft dark backing. */
.wn-holo.on .hl-rays {
  opacity: 0.22;
}
.wn-holo.on .hl-beam {
  opacity: 0.3;
}
.hl-proj:before {
  opacity: 0.45;
}
.hl-art {
  filter: drop-shadow(0 0 10px var(--hc)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.hl-art img {
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
.hl-dim {
  background: radial-gradient(60% 60% at 50% 44%, rgba(2, 2, 12, 0.12), rgba(2, 2, 12, 0.3));
}
.wn-holo.on ~ .wn-labels .wn-lb {
  opacity: 0.03 !important;
}
.wn-stage.hl-on .fx .holo {
  opacity: 0.04;
}
.hl-info {
  isolation: isolate;
  padding: 14px 22px 16px;
  text-shadow:
    0 1px 3px #000,
    0 0 12px #000;
}
.hl-info:before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(3, 4, 14, 0.62), rgba(3, 4, 14, 0.38) 70%, transparent);
}
.hl-info p {
  opacity: 1;
}
html[data-theme="light"] .hl-info:before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45) 70%, transparent);
}
html[data-theme="light"] .hl-info {
  text-shadow: 0 0 10px #fff;
}
html[data-theme="light"] .wn-holo.on .hl-rays {
  opacity: 0.18;
}
html[data-theme="light"] .hl-art img {
  filter: none;
}