:root {
  --globe-max: 1260px;
  --moon-image: url("./assets/moon-kudosquest.webp");
  --moon-glow: rgba(244, 217, 112, .22);
}

.globe-shell {
  width: min(var(--globe-max), calc(100% - 32px));
  grid-template-columns: minmax(240px, .62fr) minmax(560px, 1.55fr);
  gap: clamp(28px, 4.5vw, 68px);
}

.viewer-wrap {
  min-height: 500px;
  background:
    radial-gradient(ellipse at 14% 22%, rgba(83, 55, 177, .34) 0%, rgba(63, 41, 133, .18) 25%, transparent 54%),
    radial-gradient(ellipse at 86% 76%, rgba(18, 121, 164, .26) 0%, rgba(13, 82, 121, .12) 26%, transparent 55%),
    radial-gradient(circle at 52% 46%, rgba(82, 63, 145, .15), transparent 48%),
    linear-gradient(150deg, #040315 0%, #07091f 48%, #02040d 100%);
}

.viewer-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: inherit;
  opacity: .94;
  background:
    radial-gradient(circle at 63.1% 5.4%, rgba(255,255,255,.84) 0 2.2px, rgba(255,255,255,.18) 3.2px, transparent 5.5px),
    radial-gradient(circle at 24% 72.2%, rgba(170,215,255,.92) 0 2.2px, rgba(170,215,255,.18) 3.2px, transparent 5.5px),
    radial-gradient(circle at 86.9% 11.2%, rgba(255,255,255,.86) 0 2.2px, rgba(255,255,255,.18) 3.2px, transparent 5.5px),
    radial-gradient(circle at 6.4% 24.1%, rgba(170,215,255,.88) 0 2.2px, rgba(170,215,255,.18) 3.2px, transparent 5.5px),
    radial-gradient(circle at 54.2% 23.7%, rgba(170,215,255,.9) 0 2.2px, rgba(170,215,255,.18) 3.2px, transparent 5.5px),
    radial-gradient(circle at 79.1% 3.6%, rgba(157,196,255,.87) 0 1.4px, rgba(157,196,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 68.6% 35%, rgba(255,255,255,.69) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 93% 34.6%, rgba(255,255,255,.68) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 12.1% 82.7%, rgba(157,196,255,.81) 0 1.4px, rgba(157,196,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 78.9% 71.6%, rgba(255,255,255,.79) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 94.5% 38.6%, rgba(255,255,255,.8) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 81% 61.1%, rgba(157,196,255,.88) 0 1.4px, rgba(157,196,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 57.3% 69.2%, rgba(255,255,255,.66) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 24.4% 30.2%, rgba(255,255,255,.67) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 24.9% 12.5%, rgba(157,196,255,.73) 0 1.4px, rgba(157,196,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 62.8% 37.3%, rgba(255,255,255,.75) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 22.7% 28.1%, rgba(255,255,255,.9) 0 1.4px, rgba(255,255,255,.18) 2px, transparent 3.6px),
    radial-gradient(circle at 63.9% 60.3%, rgba(255,255,255,.51) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 71.5% 18.4%, rgba(255,255,255,.58) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 96% 63.2%, rgba(120,195,255,.64) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 67.4% 82.2%, rgba(255,255,255,.72) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 24.5% 6%, rgba(255,255,255,.56) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 28.2% 22.8%, rgba(255,255,255,.78) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 85.4% 32.6%, rgba(120,195,255,.68) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 40.2% 89%, rgba(255,255,255,.61) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 27.7% 58%, rgba(255,255,255,.76) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 40.5% 23.6%, rgba(120,195,255,.8) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 50.9% 11.5%, rgba(255,255,255,.47) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 13.3% 62%, rgba(255,255,255,.73) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 42.7% 9%, rgba(255,255,255,.58) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 96.6% 52.7%, rgba(120,195,255,.79) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 83.9% 4.1%, rgba(255,255,255,.7) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 67.1% 53.5%, rgba(255,255,255,.54) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 63.3% 13.5%, rgba(255,255,255,.6) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 45.7% 92.7%, rgba(120,195,255,.76) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 27.8% 50.1%, rgba(255,255,255,.51) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 88.8% 84.8%, rgba(255,255,255,.55) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 74.7% 53.7%, rgba(120,195,255,.72) 0 .8px, rgba(120,195,255,.18) 1.3px, transparent 2.5px),
    radial-gradient(circle at 52.9% 3.1%, rgba(255,255,255,.56) 0 .8px, rgba(255,255,255,.18) 1.3px, transparent 2.5px),
    linear-gradient(124deg, transparent 18%, rgba(102,78,190,.035) 34%, rgba(122,173,225,.08) 49%, rgba(93,66,176,.045) 64%, transparent 82%);
  background-repeat: no-repeat;
  box-shadow: none;
  filter: none;
  transition: none;
  pointer-events: none;
}

.pixel-moon {
  position: absolute;
  z-index: 1;
  top: clamp(10px, 3%, 34px);
  right: clamp(8px, 3%, 32px);
  width: clamp(170px, 30%, 270px);
  aspect-ratio: 1;
  background: var(--moon-image) center / contain no-repeat;
  opacity: .97;
  filter:
    drop-shadow(0 0 15px rgba(255,255,255,.1))
    drop-shadow(0 0 36px var(--moon-glow));
  pointer-events: none;
  transition: background-image .2s step-end, filter .35s ease;
}

body[data-world="original"] {
  --moon-image: url("./assets/moon-original.webp");
  --moon-glow: rgba(244,217,112,.22);
}
body[data-world="kudosquest"] {
  --moon-image: url("./assets/moon-kudosquest.webp");
  --moon-glow: rgba(244,217,112,.22);
}
body[data-world="lava"] {
  --moon-image: url("./assets/moon-lava.webp");
  --moon-glow: rgba(255,88,35,.3);
}
body[data-world="candy"] {
  --moon-image: url("./assets/moon-candy.webp");
  --moon-glow: rgba(255,158,216,.3);
}
body[data-world="frozen"] {
  --moon-image: url("./assets/moon-frozen.webp");
  --moon-glow: rgba(133,224,255,.31);
}
body[data-world="toxic"] {
  --moon-image: url("./assets/moon-toxic.webp");
  --moon-glow: rgba(145,255,55,.3);
}
body[data-world="jungle"] {
  --moon-image: url("./assets/moon-jungle.webp");
  --moon-glow: rgba(118,196,126,.25);
}
body[data-world="desert"] {
  --moon-image: url("./assets/moon-desert.webp");
  --moon-glow: rgba(244,195,90,.29);
}
body[data-world="neon"] {
  --moon-image: url("./assets/moon-neon.webp");
  --moon-glow: rgba(155,82,255,.32);
}
body[data-world="haunted"] {
  --moon-image: url("./assets/moon-haunted.webp");
  --moon-glow: rgba(255,255,255,.25);
}
body[data-world="crystal"] {
  --moon-image: url("./assets/moon-crystal.webp");
  --moon-glow: rgba(201,167,255,.31);
}
body[data-world="ocean"] {
  --moon-image: url("./assets/moon-ocean.webp");
  --moon-glow: rgba(93,238,190,.3);
}

@media (max-width: 860px) {
  .viewer-column { width: min(100%, 760px); }
  .viewer-wrap { min-height: 0; }
}

@media (max-width: 620px) {
  .globe-shell { width: min(100% - 20px, var(--globe-max)); }
  .pixel-moon {
    top: 3%;
    right: 2%;
    width: clamp(118px, 35%, 170px);
    opacity: .94;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-moon { transition: none; }
}