/* Original Colorbass splash artwork and atmosphere. */
:root {
  --bg-base: #020202;
  --bg-deep: #000000;
  --glow-primary: rgba(120, 255, 54, 0.2);
  --glow-secondary: rgba(214, 72, 181, 0.14);
  --glow-tertiary: rgba(255, 255, 255, 0.04);
  --sprite-shadow: rgba(117, 255, 80, 0.34);
  --rotation-start: 0deg;
  --rotation-end: 1turn;
  --rotation-duration: 40s;
  --sprite-size: clamp(12rem, 56vw, 22rem);
  --hero-field-size: clamp(24rem, 82vw, 42rem);
  --star-mask-size: clamp(16rem, 56vw, 29rem);
  --cloud-mask-size: clamp(19rem, 72vw, 38rem);
  --orb-size: clamp(20rem, 74vw, 42rem);
  --orb-blur: clamp(3rem, 10vw, 8rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  background-color: var(--bg-base);
}

body {
  position: relative;
  overflow-x: clip;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 46%, var(--glow-tertiary) 0%, transparent 28%),
    radial-gradient(circle at 50% 50%, var(--glow-primary) 0%, transparent 24%),
    radial-gradient(circle at 56% 43%, var(--glow-secondary) 0%, transparent 34%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
  color: #f8f8f8;
  font-family: Georgia, "Times New Roman", serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.05) 0%, transparent 18%),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.03) 0%, transparent 16%),
    radial-gradient(circle at 66% 78%, rgba(255, 255, 255, 0.03) 0%, transparent 22%);
  opacity: 0.8;
}

body::after {
  background:
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.04) 55%, rgba(0, 0, 0, 0.7) 100%);
  mix-blend-mode: multiply;
}

.scene {
  position: relative;
  z-index: 1;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  isolation: isolate;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, calc(var(--hero-field-size) + 6rem));
  aspect-ratio: 1;
  isolation: isolate;
  z-index: 2;
}

.hero.living-tint { filter: hue-rotate(var(--planet-hue, 0deg)) saturate(1.45); }
.hero.living-tint .sprite-window { filter: drop-shadow(0 0 1rem var(--sprite-shadow)) drop-shadow(0 0 2.8rem rgba(0, 0, 0, .72)); }

.js .hero {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 500ms ease, transform 700ms ease;
}

.js .hero.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: var(--orb-size);
  height: var(--orb-size);
  background:
    radial-gradient(circle, var(--glow-primary) 0%, transparent 58%);
  filter: blur(var(--orb-blur));
  opacity: 0.8;
  transform: translate(-4%, 4%);
  animation: auraShift 12s ease-in-out infinite;
}

.hero::after {
  width: calc(var(--orb-size) * 0.7);
  height: calc(var(--orb-size) * 0.7);
  background:
    radial-gradient(circle, var(--glow-secondary) 0%, transparent 62%);
  filter: blur(calc(var(--orb-blur) * 0.72));
  mix-blend-mode: screen;
  opacity: 0.55;
  transform: translate(8%, -10%);
  animation: auraShiftReverse 16s ease-in-out infinite;
}

.scene-atmosphere,
.hero-clouds {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.scene-atmosphere {
  z-index: 1;
  width: var(--hero-field-size);
  height: var(--hero-field-size);
  overflow: visible;
}

.scene-stars {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--star-mask-size);
  height: var(--star-mask-size);
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  opacity: 0.54;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.96) 24%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.12) 74%, transparent 86%);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.96) 24%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.12) 74%, transparent 86%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.sprite-shell {
  position: relative;
  z-index: 3;
  width: var(--sprite-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: drift 10s ease-in-out infinite;
}

.sprite-rotator {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: center;
  animation: orbitSpin var(--rotation-duration) linear infinite;
}

.sprite-shell::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, transparent 66%);
  filter: blur(1.5rem);
  opacity: 0.35;
  z-index: 0;
}

.sprite-window {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  filter:
    drop-shadow(0 0 1rem var(--sprite-shadow))
    drop-shadow(0 0 2.8rem rgba(0, 0, 0, 0.72))
    hue-rotate(var(--planet-hue, 0deg));
}

.js .sprite-window {
  opacity: 0;
  transition: opacity 320ms ease;
}

.js .hero.is-ready .sprite-window {
  opacity: 1;
}

.sprite-sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.sprite-strip {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
}

.hero-clouds {
  z-index: 5;
  width: var(--cloud-mask-size);
  height: var(--cloud-mask-size);
  overflow: hidden;
  opacity: 0.82;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.9) 28%, rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.24) 64%, rgba(0, 0, 0, 0.08) 76%, transparent 88%);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.9) 28%, rgba(0, 0, 0, 0.62) 48%, rgba(0, 0, 0, 0.24) 64%, rgba(0, 0, 0, 0.08) 76%, transparent 88%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-clouds::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.024) 0%, transparent 78%);
  filter: blur(2rem);
  opacity: 0.18;
}

.cloud-layer {
  position: absolute;
  left: -18%;
  width: 136%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 104% 100%;
  border-radius: 999px;
  overflow: hidden;
  filter: blur(0.12rem);
  mix-blend-mode: normal;
  transform-origin: center;
  will-change: transform;
}

.cloud-layer-a {
  top: 18%;
  height: 30%;
  opacity: 0.52;
  animation: cloudDriftA 34s linear infinite;
  animation-delay: -18s;
}

.cloud-layer-b {
  top: 39%;
  height: 34%;
  opacity: 0.6;
  animation: cloudDriftB 43s linear infinite;
  animation-delay: -26s;
}

.cloud-layer-c {
  top: 58%;
  height: 26%;
  opacity: 0.36;
  animation: cloudDriftC 55s linear infinite;
  animation-delay: -39s;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-0.55rem) scale(1.015);
  }
}

@keyframes orbitSpin {
  from {
    transform: rotate(var(--rotation-start));
  }

  to {
    transform: rotate(var(--rotation-end));
  }
}

@keyframes cloudDriftA {
  from {
    transform: translateX(-9%) translateY(2%) rotate(-7deg) scale(1.02);
  }

  to {
    transform: translateX(11%) translateY(-3%) rotate(-4deg) scale(1.12);
  }
}

@keyframes cloudDriftB {
  from {
    transform: translateX(7%) translateY(-2%) rotate(5deg) scale(1.07);
  }

  to {
    transform: translateX(-10%) translateY(4%) rotate(8deg) scale(1.16);
  }
}

@keyframes cloudDriftC {
  from {
    transform: translateX(-5%) translateY(1%) rotate(-4deg) scale(1.04);
  }

  to {
    transform: translateX(8%) translateY(-2%) rotate(-8deg) scale(1.14);
  }
}

@keyframes auraShift {
  0%,
  100% {
    transform: translate(-4%, 4%) scale(0.98);
  }

  50% {
    transform: translate(2%, -2%) scale(1.04);
  }
}

@keyframes auraShiftReverse {
  0%,
  100% {
    transform: translate(8%, -10%) scale(0.96);
  }

  50% {
    transform: translate(-8%, 8%) scale(1.02);
  }
}

@media (max-width: 40rem) {
  :root {
    --sprite-size: clamp(11rem, 58vw, 17rem);
    --hero-field-size: clamp(22rem, 94vw, 30rem);
    --star-mask-size: clamp(14rem, 68vw, 21rem);
    --cloud-mask-size: clamp(18rem, 88vw, 26rem);
    --orb-size: clamp(18rem, 90vw, 30rem);
  }

  body::before {
    opacity: 0.55;
  }

  .cloud-layer {
    filter: blur(0.08rem);
  }
}

.art-poster { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Native-resolution frame crop keeps the filtered texture small and crisp. */
.sprite-frame { position:relative; z-index:1; display:block; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }

.sprite-glow { position:absolute; inset:-22%; width:144%; height:144%; pointer-events:none; image-rendering:auto; }
.hero.living-tint .sprite-window.has-frame-crop { filter:none; overflow:visible; }
.hero:not(.living-tint) .sprite-window.has-frame-crop { filter:hue-rotate(var(--planet-hue,0deg)); overflow:visible; }