:root {
  color-scheme: dark;
  --plum-950: #14091d;
  --plum-900: #1d1026;
  --plum-800: #2b1934;
  --plum-700: #3a2444;
  --gold: #efd89a;
  --chalk: #f7f2e8;
  --coral: #d97973;
  --ink: #281731;
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-dramatic: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--plum-950);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--chalk);
  text-rendering: geometricPrecision;
}

button,
.parcel {
  -webkit-tap-highlight-color: transparent;
}

.scene-shell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--plum-950);
}

#lunarScene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 6px;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 18px rgba(15, 7, 20, 0.55);
}

.hud span {
  font-size: clamp(10px, 0.8vw, 13px);
  color: rgba(247, 242, 232, 0.66);
}

.hud strong {
  max-width: min(72vw, 520px);
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 610;
  letter-spacing: 0.035em;
}

.hud-left {
  top: clamp(18px, 3vw, 42px);
  left: clamp(18px, 3vw, 44px);
}

.hud-kicker {
  color: var(--gold) !important;
}

.hud-right {
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 40px);
  text-align: right;
}

.motion-toggle {
  position: absolute;
  z-index: 8;
  top: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 42px);
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(239, 216, 154, 0.48);
  border-radius: 999px;
  background: rgba(29, 16, 38, 0.58);
  color: var(--chalk);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 180ms var(--ease-snap), border-color 180ms var(--ease-snap), background-color 180ms var(--ease-snap);
}

.motion-toggle:focus-visible,
.parcel:focus-visible {
  outline: 3px solid rgba(239, 216, 154, 0.95);
  outline-offset: 4px;
}

.motion-toggle:active {
  transform: scale(0.97);
}

.parcel {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}

.parcel .parcel-hit {
  pointer-events: all;
}

.parcel .priority-dot {
  transition: opacity 180ms var(--ease-snap);
}

.parcel.is-priority .priority-dot {
  opacity: 1;
}

.door-panel,
.landing-leg,
#armReach,
#claw,
#antenna,
#airlockDoor,
#conveyor,
#landingShadow {
  transform-box: fill-box;
}

#doorLeft {
  transform-origin: 96% 42%;
}

#doorRight {
  transform-origin: 4% 42%;
}

#legLeft,
#legRight {
  transform-origin: 50% 8%;
}

#armReach {
  transform-origin: 0 50%;
}

#claw {
  transform-origin: 0 50%;
}

#antenna {
  transform-origin: 50% 95%;
}

#airlockDoor {
  transform-origin: 50% 100%;
}

#conveyor {
  transform-origin: left center;
}

.stars circle:nth-child(3n + 1) {
  animation: twinkle 3.8s var(--ease-smooth) infinite alternate;
}

.stars circle:nth-child(3n + 2) {
  animation: twinkle 5.2s var(--ease-smooth) -1.7s infinite alternate;
}

.stars circle:nth-child(3n) {
  animation: twinkle 4.6s var(--ease-smooth) -2.4s infinite alternate;
}

.satellite-a {
  animation: satelliteDriftA 18s linear infinite;
}

.satellite-b {
  animation: satelliteDriftB 15s linear -4s infinite;
}

.beacon-one .beacon-light {
  animation: beaconPulse 2.15s var(--ease-smooth) infinite;
}

.beacon-two .beacon-light {
  animation: beaconPulse 2.15s var(--ease-smooth) -1.05s infinite;
}

.scanner-node:first-of-type {
  animation: scannerPulse 1.6s var(--ease-smooth) infinite;
}

.scanner-node:last-of-type {
  animation: scannerPulse 1.6s var(--ease-smooth) -0.8s infinite;
}

.dust-1 {
  animation: dustDrift 12s linear infinite;
}

.dust-2 {
  animation: dustDrift 15s linear -7s infinite;
}

.dust-3 {
  animation: dustDrift 14s linear -4s infinite reverse;
}

.dust-4 {
  animation: dustDrift 17s linear -9s infinite;
}

@keyframes twinkle {
  from { opacity: 0.36; transform: scale(0.78); }
  to { opacity: 1; transform: scale(1.22); }
}

@keyframes satelliteDriftA {
  0% { transform: translate(1405px, 126px) rotate(-2deg); }
  50% { transform: translate(950px, 250px) rotate(8deg); }
  100% { transform: translate(1405px, 126px) rotate(-2deg); }
}

@keyframes satelliteDriftB {
  0% { transform: translate(206px, 110px) rotate(-8deg); }
  50% { transform: translate(520px, 276px) rotate(12deg); }
  100% { transform: translate(206px, 110px) rotate(-8deg); }
}

@keyframes beaconPulse {
  0%, 100% { opacity: 0.22; transform: scale(0.82); }
  45% { opacity: 1; transform: scale(1.24); }
}

@keyframes scannerPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes dustDrift {
  0% { transform: translate3d(-24px, 0, 0); opacity: 0; }
  12% { opacity: 0.65; }
  76% { opacity: 0.45; }
  100% { transform: translate3d(90px, -16px, 0); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 216, 154, 0.92);
    background: rgba(58, 36, 68, 0.72);
  }

  .parcel:hover {
    filter: drop-shadow(0 0 12px rgba(239, 216, 154, 0.52));
  }
}

@media (max-width: 760px) {
  .scene-shell {
    min-height: 480px;
  }

  .hud-left {
    top: 16px;
    left: 16px;
  }

  .hud-right {
    right: 16px;
    bottom: 16px;
  }

  .hud-right span {
    display: none;
  }

  .motion-toggle {
    top: 14px;
    right: 14px;
    min-height: 34px;
    padding: 8px 11px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars circle,
  .satellite-a,
  .satellite-b,
  .beacon-light,
  .scanner-node,
  .dust-speck {
    animation: none !important;
  }

  .motion-toggle,
  .parcel .priority-dot {
    transition-duration: 1ms;
  }
}