html,
body {
  margin: 0;
  background: transparent;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  width: 1920px;
  height: 1080px;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
}

.scene-inner {
  position: absolute;
  inset: 40px;
}

.single-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 12px rgba(255, 214, 102, 0.18));
  transform-origin: center;
}

.single-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

#cometLayer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: visible;
}

#frameHost {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.status-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 155, 0.35);
  background: rgba(25, 12, 14, 0.72);
  color: #f6e6b4;
  font: 12px/1.2 Arial, sans-serif;
}

.debug-button {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 228, 155, 0.4);
  background: rgba(25, 12, 14, 0.82);
  color: #f6e6b4;
  font-size: 14px;
  cursor: pointer;
}

body:not(.debug) .debug-button,
body:not(.debug) .status-badge {
  display: none;
}

.comet-orb-rainbow {
  background:
    radial-gradient(circle,
      hsla(40, 100%, 90%, 1) 0%,
      hsla(40, 95%, 75%, 0.95) 18%,
      hsla(40, 85%, 60%, 0.55) 38%,
      hsla(40, 80%, 55%, 0.08) 62%,
      transparent 72%
    );
  animation: cometHueShift 3.2s linear infinite;
}

.comet-trail-rainbow {
  background:
    linear-gradient(90deg,
      transparent 0%,
      hsla(40, 85%, 60%, 0.10) 18%,
      hsla(40, 95%, 80%, 0.42) 45%,
      hsla(40, 100%, 95%, 0.95) 100%
    );
  animation: cometHueShift 3.2s linear infinite;
}

@keyframes cometHueShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}