/* ==========================================================
   Under Construction pages
   Loaded after style.css. Each page sets its planet color as
   --pc on <body>. Everything is sized from --planet-d, the
   big planet's diameter, so the scene scales as one piece.
   ========================================================== */

.uc {
  --planet-d: min(80vw, 44vh, 580px);
}
.uc--ringed { --planet-d: min(48vw, 46vh, 500px); }
.uc--game { --planet-d: min(64vw, 44vh, 520px); }

/* ---------- Main scene ---------- */
.uc-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem 1rem;
  text-align: center;
}
.uc-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 2.1rem);
  line-height: 1.4;
  color: #fff;
  text-shadow:
    0.125em 0.125em 0 color-mix(in srgb, var(--pc) 55%, transparent),
    0 0 6px var(--pc),
    0 0 20px var(--pc),
    0 0 44px color-mix(in srgb, var(--pc) 60%, transparent);
}

/* The stage reserves room above the planet for the saucers; the sign sits in
   the normal flow and slides up over the planet's lower part. */
.uc-stage {
  position: relative;
  width: 100%;
  padding-top: calc(var(--planet-d) * 1.3);
  margin-top: 0.75rem;
}
.uc--game .uc-stage { padding-top: calc(var(--planet-d) * 1.15); }
.uc-stage.is-shaking { animation: shake 0.32s steps(4, end); }

/* The big planet */
.uc-planet-wrap {
  position: absolute;
  top: calc(var(--planet-d) * 0.3);
  left: 50%;
  translate: -50% 0;
}
.uc-planet {
  --scale: calc(var(--planet-d) / 80);
  position: relative;
  filter: drop-shadow(0 0 6px var(--pc));
}
/* A soft halo behind the planet. Drawn once instead of re-glowing the
   spinning planet every frame, which keeps the animation smooth. */
.uc-planet-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--planet-d) * 1.45);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc) 42%, transparent) 30%, color-mix(in srgb, var(--pc) 14%, transparent) 50%, transparent 70%);
  pointer-events: none;
}

/* ---------- Tractor-beam saucers ---------- */
.tractor {
  position: absolute;
  z-index: 3;
  width: calc(var(--planet-d) * 0.15);
  animation: float 4s ease-in-out infinite;
}
.tractor--left { top: calc(var(--planet-d) * 0.02); left: calc(50% - var(--planet-d) * 0.56); }
.tractor--right { top: calc(var(--planet-d) * 0.06); left: calc(50% + var(--planet-d) * 0.38); animation-delay: -2s; }
.uc--game .tractor--right { top: calc(var(--planet-d) * -0.04); left: calc(50% + var(--planet-d) * 0.62); }
.alien--tractor {
  width: 100%;
  filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 12px rgba(45, 226, 255, 0.5));
}

/* The beam itself: positioned and aimed every frame by js/construction.js */
.beam {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(var(--planet-d) * 0.09);
  height: 0;
  transform-origin: top center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(45, 226, 255, 0.55), rgba(45, 226, 255, 0.12));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 6px var(--cyan));
}
.beam span {
  position: absolute;
  left: 50%;
  width: max(5px, calc(var(--planet-d) * 0.014));
  aspect-ratio: 1;
  translate: -50% 0;
  background: var(--c, #fff);
  box-shadow: 0 0 6px var(--c, #fff);
  animation: beam-block 1.5s steps(10, end) infinite;
  animation-delay: var(--delay, 0s);
}

/* ---------- Repair satellite ---------- */
.satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: calc(var(--planet-d) * 0.16);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(232, 244, 255, 0.8)) drop-shadow(0 0 12px rgba(77, 124, 255, 0.55));
}
.satellite.is-behind {
  z-index: 0;
  filter: brightness(0.55);
}
.satellite svg { display: block; width: 100%; height: auto; }

/* ---------- Loading bar ---------- */
.loading {
  width: min(84vw, 22rem);
  margin: 0.9rem auto 0;
}
.loading__label {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.45rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  line-height: 1.4;
  color: var(--ink);
  text-shadow: 0 0 6px var(--pc);
}
.loading__track {
  height: 14px;
  padding: 3px;
  background: rgba(12, 8, 38, 0.85);
  box-shadow:
    0 -2px 0 0 var(--pc), 0 2px 0 0 var(--pc),
    -2px 0 0 0 var(--pc), 2px 0 0 0 var(--pc),
    0 0 14px 1px color-mix(in srgb, var(--pc) 40%, transparent);
}
.loading__fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--pc) 0 8px, transparent 8px 11px);
  filter: drop-shadow(0 0 4px var(--pc));
}

/* ---------- Astronaut welding ---------- */
.astronaut {
  position: absolute;
  z-index: 2;
  top: calc(var(--planet-d) * 0.64);
  left: calc(50% - var(--planet-d) * 0.63);
  width: calc(var(--planet-d) * 0.17);
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
}
.astronaut > svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 4px rgba(232, 244, 255, 0.9)) drop-shadow(0 0 14px rgba(45, 226, 255, 0.5));
}
.uc--game .astronaut {
  top: calc(var(--planet-d) * 0.36);
  left: calc(50% - var(--planet-d) * 0.775);
}

.sparks {
  position: absolute;
  top: 47.5%;
  left: 98%;
}
.sparks span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  opacity: 0;
  animation: spark 0.6s steps(5, end) infinite;
  animation-delay: var(--delay);
}

/* ---------- Aliens ---------- */
.alien {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 0 3px var(--green)) drop-shadow(0 0 10px rgba(57, 255, 136, 0.55));
}
.alien svg { display: block; width: 100%; height: auto; overflow: visible; }
.alien__lid {
  opacity: 0;
  animation: alien-blink 4.2s steps(1, end) infinite;
  animation-delay: var(--blink, 0s);
}
.alien__bulb { animation: blink 1.4s steps(1, end) infinite; animation-delay: var(--blink, 0s); }
.alien__arm {
  transform-box: fill-box;
  transform-origin: left center;
}
.alien.is-waving .alien__arm { animation: wave 0.22s steps(2, end) 5 alternate; }
.alien.is-waving svg { animation: hop 0.5s steps(3, end) 2 alternate; }

/* The alien peeking over the sign */
.sign__peeker {
  position: absolute;
  top: -46px;
  right: 14%;
  z-index: 0;
  width: 52px;
  animation: peek 7s steps(3, end) infinite;
}

/* Delivery saucer zipping around with parts */
.delivery {
  position: absolute;
  top: calc(var(--planet-d) * 0.62);
  left: 88%;
  z-index: 3;
  width: calc(var(--planet-d) * 0.15);
  animation: deliver 16s linear infinite;
}
.alien--saucer {
  filter: drop-shadow(0 0 4px var(--magenta)) drop-shadow(0 0 12px rgba(255, 43, 214, 0.5));
}

/* ---------- The construction sign ---------- */
.sign {
  position: relative;
  z-index: 4;
  width: min(92vw, 34rem);
  margin: calc(var(--planet-d) * -0.3) auto 0;
}
.js .sign { visibility: hidden; }
.js .sign.is-dropping,
.js .sign.is-landed { visibility: visible; }
.sign.is-dropping { animation: sign-drop 0.9s both; }

.sign__board {
  position: relative;
  z-index: 1;
  background: #120c2e;
  box-shadow:
    0 -4px 0 0 #5d5f80, 0 4px 0 0 #5d5f80,
    -4px 0 0 0 #5d5f80, 4px 0 0 0 #5d5f80,
    0 0 26px 4px rgba(255, 233, 74, 0.3),
    0 0 70px 6px color-mix(in srgb, var(--pc) 22%, transparent);
}
.sign__stripes {
  height: 16px;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 12px, #141018 12px 24px);
  box-shadow: 0 0 12px rgba(255, 233, 74, 0.45);
}
.sign__panel {
  padding: 1.1rem 1.25rem 1.2rem;
}
.sign__headline {
  margin: 0 0 0.9rem;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: clamp(0.9rem, 2.6vw, 1.3rem);
  line-height: 1.5;
  color: #fffbe0;
  text-shadow: 0 0 6px var(--yellow), 0 0 18px var(--yellow), 0 0 36px rgba(255, 138, 61, 0.6);
}
.sign__msg {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 8px var(--pc), 0 0 20px color-mix(in srgb, var(--pc) 70%, transparent);
}

/* Blinking warning lights on the sign's top corners */
.sign__light {
  position: absolute;
  top: -14px;
  z-index: 2;
  width: 14px;
  height: 10px;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange), 0 0 22px var(--orange);
  animation: blink 0.9s steps(1, end) infinite;
}
.sign__light--left { left: 10px; }
.sign__light--right { right: 10px; animation-delay: 0.45s; }

.sign__posts {
  display: flex;
  justify-content: space-between;
  padding: 0 18%;
}
.sign__posts span {
  width: 12px;
  height: clamp(1.25rem, 4vh, 2.75rem);
  background: repeating-linear-gradient(180deg, #8a8fb0 0 6px, #5d5f80 6px 12px);
}

/* ---------- Mini-game page: the broken UFO ---------- */
.ufo-wreck {
  position: absolute;
  top: calc(var(--planet-d) * 0.12);
  left: 50%;
  width: calc(var(--planet-d) * 1.25);
  translate: -50% 0;
}
.ufo-wreck__ship {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 6px var(--green)) drop-shadow(0 0 34px rgba(57, 255, 136, 0.45));
  animation: float 6s ease-in-out infinite;
}
.ufo-wreck .alien--ramp {
  position: absolute;
  bottom: 3%;
  left: 21%;
  width: calc(var(--planet-d) * 0.075);
}
.ufo-wreck .alien--dome {
  position: absolute;
  bottom: 99%;
  left: 52%;
  width: calc(var(--planet-d) * 0.075);
}
.smoke {
  position: absolute;
  top: 34%;
  left: 77%;
}
.smoke span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(185, 178, 230, 0.55);
  box-shadow: 0 0 10px rgba(185, 178, 230, 0.4);
  opacity: 0;
  animation: smoke 2.4s steps(8, end) infinite;
  animation-delay: var(--delay);
}

/* ---------- Caution tape across the lower corners ---------- */
.tape {
  position: fixed;
  bottom: 7rem;
  z-index: 0;
  width: 26rem;
  height: 26px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 26px, #141018 26px 52px);
  box-shadow: 0 0 16px rgba(255, 233, 74, 0.45);
  opacity: 0.85;
}
.tape--left { left: -7rem; rotate: 32deg; }
.tape--right { right: -7rem; rotate: -32deg; }

/* ---------- Animations ---------- */
@keyframes sign-drop {
  0%   { translate: 0 -110vh; animation-timing-function: ease-in; }
  60%  { translate: 0 0; animation-timing-function: ease-out; }
  72%  { translate: 0 -18px; animation-timing-function: ease-in; }
  84%  { translate: 0 0; animation-timing-function: ease-out; }
  92%  { translate: 0 -5px; animation-timing-function: ease-in; }
  100% { translate: 0 0; }
}
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -4px 3px; }
  50% { translate: 3px -2px; }
  75% { translate: -2px 1px; }
}
@keyframes beam-block {
  from { top: 0%; opacity: 1; }
  to   { top: 100%; opacity: 0.2; }
}
@keyframes spark {
  0%   { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: var(--dx) var(--dy); }
}
@keyframes smoke {
  0%   { opacity: 0.8; translate: 0 0; scale: 0.6; }
  100% { opacity: 0; translate: var(--dx) -70px; scale: 1.8; }
}
@keyframes alien-blink {
  0%   { opacity: 0; }
  92%  { opacity: 1; }
  96%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wave {
  from { rotate: 0deg; }
  to   { rotate: -70deg; }
}
@keyframes hop {
  from { translate: 0 0; }
  to   { translate: 0 -12%; }
}
@keyframes peek {
  0%, 62%, 100% { translate: 0 14px; }
  70%, 92%      { translate: 0 0; }
}
@keyframes deliver {
  0%   { left: 88%; top: calc(var(--planet-d) * 0.62); }
  25%  { left: 82%; top: calc(var(--planet-d) * 0.3); }
  50%  { left: 6%;  top: calc(var(--planet-d) * 0.36); }
  75%  { left: 9%;  top: calc(var(--planet-d) * 0.8); }
  100% { left: 88%; top: calc(var(--planet-d) * 0.62); }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .uc { --planet-d: min(80vw, 40vh); }
  .uc--ringed { --planet-d: min(50vw, 40vh); }
  .uc--game { --planet-d: min(62vw, 40vh); }

  .uc-main { justify-content: flex-start; padding-top: 1rem; }

  .sign { width: 94vw; }
  .sign__panel { padding: 0.9rem 0.9rem 1rem; }
  .sign__peeker { width: 40px; top: -36px; }

  .tape { width: 16rem; height: 18px; bottom: 7.5rem; }
  .tape--left { left: -6rem; }
  .tape--right { right: -6rem; }

}