:root {
  color-scheme: light;
  --panel: rgba(255, 255, 255, 0.9);
  --ink: #12212f;
  --muted: #49657d;
  --blue: #0877d8;
  --orange: #ff7a1a;
  --green: #28b85a;
  --yellow: #ffc93d;
  --red: #f14a3d;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #9cd7ff;
  color: var(--ink);
  font-family:
    Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

.rocket-game-shell {
  min-height: 100vh;
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, #82d7ff, #d4f5ff);
}

.rocket-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  --camera-scale: 1;
  --camera-origin-x: 50%;
  --camera-origin-y: 70%;
}

.menu-toggle {
  position: absolute;
  right: clamp(12px, 2vw, 22px);
  top: clamp(12px, 2.3vw, 22px);
  z-index: 12;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 12px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(18, 33, 47, 0.2);
  cursor: pointer;
}

.menu-toggle span {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #16334d;
}

.rocket-game-shell.panel-open .menu-toggle {
  opacity: 0;
  pointer-events: none;
}

.world-camera {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(var(--camera-x, 0px), var(--camera-y, 0px), 0) scale(var(--camera-scale));
  transform-origin: var(--camera-origin-x) var(--camera-origin-y);
  transition:
    transform 520ms cubic-bezier(0.22, 0.74, 0.27, 1),
    transform-origin 520ms cubic-bezier(0.22, 0.74, 0.27, 1);
  will-change: transform;
}

.adventure-world-bg,
.launch-center-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adventure-world-bg {
  display: none;
  object-fit: fill;
}

.rocket-game-shell.adventure-mode {
  background: #07172c;
}

.rocket-game-shell.adventure-mode .world-camera {
  inset: auto;
  left: 0;
  top: 0;
  width: 4096px;
  height: 2304px;
  overflow: visible;
  transform-origin: 0 0;
  transition: none;
}

.rocket-game-shell.adventure-mode .adventure-world-bg {
  display: block;
}

.rocket-game-shell.adventure-mode .launch-center-bg,
.rocket-game-shell.adventure-mode .launch-pad-ring,
.rocket-game-shell.adventure-mode .rocket-wrap,
.rocket-game-shell.adventure-mode .stations-layer {
  display: none;
}

.rocket-game-shell.adventure-mode .sky-readout {
  background: rgba(255, 255, 255, 0.88);
}

.rocket-game-shell.rover-mode .sky-readout {
  left: clamp(10px, 2.6vw, 28px);
  top: clamp(10px, 2.4vh, 22px);
  max-width: min(340px, 38vw);
  gap: 2px;
  padding: 9px 12px;
  border-width: 2px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 18px rgba(18, 33, 47, 0.14);
}

.rocket-game-shell.rover-mode .sky-readout span {
  font-size: 0.66rem;
}

.rocket-game-shell.rover-mode .sky-readout strong {
  font-size: clamp(1rem, 1.75vw, 1.45rem);
  line-height: 1;
}

.rocket-game-shell.adventure-mode .mission-panel,
.rocket-game-shell.adventure-mode .menu-toggle {
  display: none;
}

.sky-readout {
  position: absolute;
  left: clamp(14px, 5vw, 64px);
  top: clamp(14px, 4vh, 42px);
  z-index: 5;
  display: grid;
  gap: 4px;
  max-width: min(420px, 46vw);
  padding: 12px 16px;
  border: 3px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 30px rgba(18, 33, 47, 0.18);
}

.sky-readout span {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.sky-readout strong {
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  line-height: 1.02;
}

.launch-pad-ring {
  position: absolute;
  left: 50%;
  bottom: 8.5vh;
  z-index: 1;
  width: min(48vw, 560px);
  aspect-ratio: 2.9;
  border: 4px solid rgba(255, 216, 62, 0.66);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 247, 184, 0.34), transparent 65%);
  transform: translateX(-50%) rotateX(70deg);
  pointer-events: none;
}

.rocket-wrap {
  position: absolute;
  left: 50%;
  bottom: clamp(54px, 9vh, 86px);
  z-index: 3;
  width: clamp(230px, 29vw, 380px);
  aspect-ratio: 2 / 3;
  transform: translateX(-50%);
  transform-origin: 50% 92%;
  transition:
    transform 360ms ease,
    filter 360ms ease;
}

.rocket-wrap.ready {
  filter: drop-shadow(0 0 28px rgba(255, 201, 61, 0.7));
}

.rocket-wrap.launching {
  animation: toy-rocket-launch 2.7s cubic-bezier(0.19, 0.72, 0.22, 1) forwards;
}

.toy-rocket {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 26px rgba(24, 35, 45, 0.34));
}

.rocket-part-glow {
  position: absolute;
  z-index: 4;
  border: 4px solid rgba(255, 201, 61, 0);
  border-radius: 999px;
  pointer-events: none;
}

.rocket-part-glow.on {
  border-color: rgba(255, 201, 61, 0.9);
  box-shadow:
    0 0 0 8px rgba(255, 201, 61, 0.18),
    0 0 24px rgba(255, 201, 61, 0.54);
  animation: toy-pop 520ms ease-out;
}

.rocket-part-glow.nose {
  left: 35%;
  top: 1%;
  width: 30%;
  height: 22%;
}

.rocket-part-glow.fin-left {
  left: 3%;
  top: 58%;
  width: 31%;
  height: 23%;
  transform: rotate(-13deg);
}

.rocket-part-glow.fin-right {
  right: 3%;
  top: 58%;
  width: 31%;
  height: 23%;
  transform: rotate(13deg);
}

.fuel-gauge {
  position: absolute;
  right: 27%;
  top: 74%;
  z-index: 6;
  width: 7%;
  height: 10%;
  display: grid;
  align-items: end;
  padding: 12% 18%;
  border-radius: 999px;
  background: rgba(13, 30, 48, 0.3);
  overflow: hidden;
}

.fuel-gauge span {
  display: block;
  width: 100%;
  height: var(--fuel, 0%);
  border-radius: 999px;
  background: linear-gradient(180deg, #a6ff73, #19c954);
  box-shadow: 0 0 12px rgba(52, 225, 99, 0.7);
  transition: height 420ms ease;
}

.wire-hotspots {
  position: absolute;
  left: 32.5%;
  top: 72%;
  z-index: 7;
  width: 35%;
  height: 13%;
  pointer-events: none;
}

.wire-hotspots.plugging::before {
  content: "";
  position: absolute;
  inset: -16% -9%;
  border: 4px solid rgba(255, 235, 125, 0.82);
  border-radius: 16px;
  box-shadow:
    0 0 0 8px rgba(255, 216, 62, 0.14),
    0 0 28px rgba(255, 216, 62, 0.52);
  animation: wire-panel-pulse 880ms ease-out both;
}

.wire-plug {
  position: absolute;
  bottom: 18%;
  width: 18%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(0, -52px) scale(0.58);
  transform-origin: 50% 50%;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.wire-plug.on {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.wire-plug i,
.wire-plug b {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.wire-plug i {
  bottom: 54%;
  width: 34%;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wire-color), white 28%),
    var(--wire-color)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--wire-color), transparent 42%);
  transform: translateX(-50%) rotate(var(--wire-tilt, 0deg));
  transform-origin: 50% 100%;
}

.wire-plug b {
  bottom: 0;
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: var(--wire-color);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.18),
    0 0 18px color-mix(in srgb, var(--wire-color), transparent 50%);
  transform: translateX(-50%);
}

.wire-plug.on i {
  height: 58%;
}

.wire-plug.plugging {
  animation: wire-plug-snap 620ms cubic-bezier(0.22, 0.74, 0.27, 1) both;
}

.wire-plug.plugging i {
  animation: wire-cable-feed 620ms cubic-bezier(0.22, 0.74, 0.27, 1) both;
}

.wire-plug.plugging b {
  animation: wire-plug-bounce 620ms cubic-bezier(0.22, 0.74, 0.27, 1) both;
}

.wire-plug.plugging::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  z-index: -1;
  width: 128%;
  aspect-ratio: 1;
  border: 4px solid color-mix(in srgb, var(--wire-color), white 18%);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--wire-color), transparent 28%);
  transform: translateX(-50%) scale(0.4);
  animation: wire-socket-ripple 700ms ease-out both;
}

.wire-plug:nth-child(1) {
  left: 2%;
  --wire-tilt: -10deg;
}

.wire-plug:nth-child(2) {
  left: 27%;
  --wire-tilt: -3deg;
}

.wire-plug:nth-child(3) {
  left: 52%;
  --wire-tilt: 4deg;
}

.wire-plug:nth-child(4) {
  left: 77%;
  --wire-tilt: 10deg;
}

.wire-flight {
  position: absolute;
  left: var(--flight-left);
  bottom: 6%;
  z-index: 12;
  width: 32%;
  height: 128%;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: wire-flight-land 880ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.wire-flight i,
.wire-flight b {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.wire-flight i {
  bottom: 36%;
  width: 18%;
  height: 76%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wire-color), white 34%),
    var(--wire-color)
  );
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.42),
    0 0 18px color-mix(in srgb, var(--wire-color), transparent 20%);
  transform: translateX(-50%) rotate(-18deg);
  transform-origin: 50% 100%;
  animation: wire-flight-cable 880ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.wire-flight b {
  bottom: 20%;
  width: 74%;
  aspect-ratio: 1;
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.76), transparent 24%),
    var(--wire-color);
  box-shadow:
    0 8px 0 color-mix(in srgb, var(--wire-color), black 24%),
    0 0 26px color-mix(in srgb, var(--wire-color), transparent 20%);
  transform: translateX(-50%);
  animation: wire-flight-head 880ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.engine-flame {
  position: absolute;
  left: 50%;
  top: 91%;
  z-index: 1;
  width: 38%;
  height: 28%;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 16%, #fff6a8 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 28%, #ffdc4c 0 36%, transparent 37%),
    radial-gradient(ellipse at 50% 52%, #ff7a1a 0 54%, transparent 55%);
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
  transform-origin: top;
}

.rocket-wrap.launching .engine-flame,
.engine-flame.test {
  opacity: 1;
  animation: flame-flicker 140ms ease-in-out infinite alternate;
}

.astronaut {
  position: absolute;
  z-index: 4;
  width: clamp(100px, 12vw, 156px);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  filter: drop-shadow(0 14px 15px rgba(20, 35, 50, 0.34));
  pointer-events: none;
  transform: translate3d(var(--x, 9vw), var(--y, 72vh), 0) scaleX(var(--face, 1));
  transform-origin: 50% 76%;
  transition: filter 160ms ease;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: transform, background-position;
}

.build-helper {
  background-image: url("data/generated-assets/rocket-foundations/astronaut-build-helper-v15-atlas.png");
}

.wire-helper {
  background-image: url("data/generated-assets/rocket-foundations/astronaut-wire-helper-v17-atlas.png");
}

.player {
  background-image: url("data/generated-assets/rocket-foundations/astronaut-build-helper-walk-v1-atlas.png");
  z-index: 7;
}

.wire-buddy {
  background-image: url("data/generated-assets/rocket-foundations/astronaut-wire-helper-walk-v1-atlas.png");
  z-index: 6;
}

.astronaut.waiting {
  background-position: 0 0;
}

.astronaut.dir-right.waiting {
  background-position: 33.333% 33.333%;
}

.astronaut.dir-left.waiting {
  background-position: 33.333% 66.667%;
}

.astronaut.dir-up.waiting {
  background-position: 0 100%;
}

.astronaut.pointing {
  background-position: 100% 0;
}

.astronaut.celebrate {
  background-position: 100% 66.667%;
  animation: helper-celebrate 760ms ease-in-out infinite alternate;
}

.wire-buddy.plugging,
.wire-buddy.celebrate {
  background-image: url("data/generated-assets/rocket-foundations/astronaut-wire-helper-v17-atlas.png");
}

.astronaut.walking {
  animation: helper-walk-down 560ms steps(1, end) infinite;
}

.astronaut.dir-right.walking {
  animation-name: helper-walk-right;
}

.astronaut.dir-left.walking {
  animation-name: helper-walk-left;
}

.astronaut.dir-up.walking {
  animation-name: helper-walk-up;
}

.astronaut.plugging {
  animation: helper-plug 820ms steps(1, end) infinite;
}

.spark-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.stations-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.adventure-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
}

.rocket-game-shell.adventure-mode .adventure-layer {
  display: block;
}

.map-station {
  position: absolute;
  width: clamp(86px, 10vw, 132px);
  aspect-ratio: 1;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.office-portal {
  position: absolute;
  width: clamp(82px, 8vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  pointer-events: auto;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.office-portal::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 15%;
  height: 54%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px 8px 5px 5px;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(255, 255, 255, 0.28) 20% 27%, transparent 27% 48%, rgba(255, 255, 255, 0.28) 48% 55%, transparent 55% 76%, rgba(255, 255, 255, 0.28) 76% 83%, transparent 83%),
    linear-gradient(180deg, #2a86c8, #135384);
  box-shadow:
    inset 0 -8px 0 rgba(4, 32, 55, 0.18),
    0 12px 16px rgba(18, 33, 47, 0.24);
}

.office-portal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 42%;
  height: 34%;
  border-left: 4px solid #16334d;
  border-top: 4px solid #16334d;
  border-radius: 8px 0 0 0;
  transform: translateX(-15%) rotate(28deg);
}

.office-portal span {
  position: relative;
  z-index: 1;
  min-width: 50px;
  padding: 5px 8px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: #ff7a1a;
  box-shadow: 0 5px 0 #b94e08;
  line-height: 1;
}

.office-portal.near {
  animation: station-pulse 760ms ease-in-out infinite alternate;
}

.office-portal.near::before {
  box-shadow:
    inset 0 -8px 0 rgba(4, 32, 55, 0.18),
    0 0 0 8px rgba(255, 201, 61, 0.2),
    0 0 28px rgba(255, 201, 61, 0.62),
    0 12px 16px rgba(18, 33, 47, 0.24);
}

.adventure-hotspot {
  position: absolute;
  z-index: 6;
  width: 120px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.adventure-hotspot::before {
  content: "";
  width: 48px;
  aspect-ratio: 1;
  border: 7px solid #ffffff;
  border-radius: 50%;
  background: var(--node-color, #ffc93d);
  box-shadow:
    0 8px 0 color-mix(in srgb, var(--node-color, #ffc93d), black 28%),
    0 0 0 12px color-mix(in srgb, var(--node-color, #ffc93d), transparent 78%);
}

.adventure-hotspot.next::after {
  content: "";
  position: absolute;
  width: 80px;
  aspect-ratio: 1;
  border: 5px solid color-mix(in srgb, var(--node-color, #ffc93d), white 32%);
  border-radius: 50%;
  box-shadow: 0 0 26px color-mix(in srgb, var(--node-color, #ffc93d), transparent 24%);
  animation: beacon-ring 900ms ease-in-out infinite alternate;
}

.adventure-hotspot.done::before {
  background: #28b85a;
  box-shadow:
    0 8px 0 #167938,
    0 0 0 12px rgba(40, 184, 90, 0.18);
}

.adventure-hotspot.goal::before {
  clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 56%, 82% 100%, 50% 72%, 18% 100%, 31% 56%, 0 35%, 38% 35%);
  border-radius: 0;
  background: #ffc93d;
}

.adventure-compass {
  position: absolute;
  z-index: 11;
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95) 0 42%, transparent 43%),
    color-mix(in srgb, var(--node-color, #ffc93d), white 18%);
  box-shadow:
    0 8px 0 color-mix(in srgb, var(--node-color, #ffc93d), black 28%),
    0 14px 22px rgba(3, 13, 28, 0.26);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}

.adventure-compass span {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 22px solid #12212f;
  transform: rotate(var(--compass-angle, 0rad));
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.55));
}

.adventure-compass::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid color-mix(in srgb, var(--node-color, #ffc93d), transparent 54%);
  border-radius: 50%;
  animation: beacon-ring 900ms ease-in-out infinite alternate;
}

.adventure-breadcrumbs {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.adventure-breadcrumbs span {
  position: absolute;
  width: 18px;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: color-mix(in srgb, var(--node-color, #ffc93d), white 12%);
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--node-color, #ffc93d), black 24%),
    0 9px 15px rgba(3, 13, 28, 0.22);
  transform: translate(-50%, -50%);
  animation: breadcrumb-pulse 900ms ease-in-out infinite alternate;
  animation-delay: var(--dot-delay, 0ms);
}

.adventure-rover {
  position: absolute;
  z-index: 7;
  width: 238px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("data/generated-assets/lego-rocket-game/adventure-rover-v4-eight-angle-atlas.png");
  background-repeat: no-repeat;
  background-size: 800% 100%;
  background-position: var(--rover-frame, 0 0);
  pointer-events: auto;
  transform: translate(-50%, -62%);
  transform-origin: 50% 76%;
  cursor: pointer;
  filter: drop-shadow(0 18px 16px rgba(3, 13, 28, 0.42));
}

.adventure-rover:focus {
  outline: none;
}

.adventure-rover:focus-visible::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 54%;
  height: 22%;
  border: 3px solid rgba(8, 119, 216, 0.78);
  border-radius: 50%;
  transform: translateX(-50%);
}

.adventure-rover.near::before,
.adventure-rover.driving::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: -1;
  width: 68%;
  height: 28%;
  border: 4px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(255, 201, 61, 0.16);
  box-shadow: 0 0 18px rgba(255, 201, 61, 0.42);
}

.adventure-rover.driving::before {
  bottom: 8%;
  width: 58%;
  height: 22%;
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 201, 61, 0.1);
  box-shadow: 0 0 14px rgba(255, 201, 61, 0.24);
}

.adventure-rover.driving {
  z-index: 8;
  animation: rover-drive-bob 420ms ease-in-out infinite alternate;
}

.rocket-game-shell.rover-mode .player,
.rocket-game-shell.rover-mode .wire-buddy {
  opacity: 0;
}

.rocket-game-shell.adventure-mode .astronaut {
  width: clamp(128px, 5.7vw, 182px);
  filter: drop-shadow(0 16px 14px rgba(3, 13, 28, 0.42));
}

.map-station img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(18, 33, 47, 0.24));
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.map-station.active {
  animation: station-pulse 1s ease-in-out infinite alternate;
}

.map-station.active::before,
.map-station.done::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: -1;
  width: 74%;
  height: 28%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--station-color), transparent 54%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--station-color), transparent 30%);
  transform: translateX(-50%) rotateX(64deg);
}

.map-station.done {
  opacity: 0.96;
}

.station-state {
  position: absolute;
  right: 8%;
  top: 12%;
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #28b85a;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  opacity: 0;
  box-shadow: 0 4px 0 rgba(14, 95, 43, 0.28);
}

.map-station.done .station-state {
  opacity: 1;
}

.spark {
  position: absolute;
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spark-color, #ffe96a);
  box-shadow: 0 0 16px var(--spark-color, #ffe96a);
  animation: spark-pop 760ms ease-out forwards;
}

.mission-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: min(360px, calc(100vw - 18px));
  min-height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 12px;
  padding: clamp(14px, 2.5vw, 20px);
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(231, 248, 255, 0.94)),
    var(--panel);
  box-shadow: -22px 0 34px rgba(18, 33, 47, 0.18);
  transform: translateX(calc(100% + 28px));
  transition:
    transform 360ms cubic-bezier(0.22, 0.74, 0.27, 1),
    box-shadow 220ms ease;
  pointer-events: none;
}

.rocket-game-shell.panel-open .mission-panel {
  transform: translateX(0);
  pointer-events: auto;
}

.panel-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: #16334d;
  color: #ffffff;
  font-weight: 1000;
  cursor: pointer;
}

.rocket-stage.station-focus .sky-readout {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(18, 33, 47, 0.22);
}

.mission-status {
  display: grid;
  gap: 6px;
  padding-right: 48px;
}

.mission-status span {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-status strong {
  min-height: 0;
  font-size: clamp(1.22rem, 2.5vw, 1.6rem);
  line-height: 1.08;
}

.task-list,
.station-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.task-card,
.station-card {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 36px auto;
  align-items: center;
  justify-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: 2px solid rgba(20, 46, 72, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-align: left;
}

.task-card.active,
.station-card.active {
  border-color: var(--blue);
  background: #e7f7ff;
  box-shadow: 0 0 0 4px rgba(8, 119, 216, 0.12);
}

.task-card.done,
.station-card.done {
  border-color: rgba(40, 184, 90, 0.55);
  background: #e9fff0;
}

.task-card .badge {
  grid-row: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcefff;
  color: var(--blue);
  font-weight: 1000;
}

.task-card.done .badge {
  background: var(--green);
  color: #ffffff;
}

.station-card-icon {
  width: 42px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(18, 33, 47, 0.18));
}

.station-card span {
  position: absolute;
  right: 5px;
  top: 5px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  font-size: 0.54rem;
  font-weight: 1000;
  opacity: 0;
}

.station-card.done span {
  opacity: 1;
}

.task-card strong,
.station-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-card small,
.station-card small {
  display: none;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
}

.choice-dock,
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mini-game-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 2px solid rgba(18, 33, 47, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.station-workbench {
  display: grid;
  justify-items: center;
  min-height: clamp(142px, 24vh, 206px);
  padding: 8px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(8, 119, 216, 0.18), transparent 58%),
    linear-gradient(180deg, #ffffff, #e8f8ff);
}

.station-workbench img {
  width: min(76%, 230px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(18, 33, 47, 0.24));
}

.mini-game-panel.ready .station-workbench {
  outline: 4px solid rgba(255, 201, 61, 0.22);
}

.mini-game-panel.far {
  background: rgba(231, 247, 255, 0.75);
}

.mini-title {
  display: grid;
  gap: 3px;
}

.mini-title strong {
  font-size: 1.08rem;
  line-height: 1;
}

.mini-title span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.mini-message {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
  line-height: 1.25;
}

.mini-progress {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border-radius: 8px;
  background: #e7f7ff;
}

.mini-progress span,
.mini-progress strong {
  position: relative;
  z-index: 2;
  font-weight: 1000;
}

.mini-progress i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress);
  background: linear-gradient(90deg, #7cffb9, #ffc93d);
  transition: width 220ms ease;
}

.play-lab {
  position: relative;
  min-height: 136px;
  display: grid;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 2px solid rgba(8, 119, 216, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 201, 61, 0.18), transparent 23%),
    radial-gradient(circle at 82% 18%, rgba(40, 184, 90, 0.14), transparent 22%),
    linear-gradient(180deg, #ffffff, #eaf9ff);
}

.play-lab::before {
  content: "";
  position: absolute;
  inset: auto -8% 0;
  height: 30%;
  background: linear-gradient(90deg, transparent, rgba(8, 119, 216, 0.12), transparent);
  pointer-events: none;
}

.part-slots,
.part-tray,
.wire-sockets,
.countdown-lab {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.part-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.part-slot {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 3px dashed rgba(18, 33, 47, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-weight: 1000;
}

.part-slot i {
  font-style: normal;
  text-transform: uppercase;
}

.part-slot small {
  font-size: 0.62rem;
}

.part-slot.done {
  border-color: rgba(40, 184, 90, 0.76);
  background: #e9fff0;
  color: #126230;
  animation: toy-pop 380ms ease-out;
}

.part-tray {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.part-token {
  min-height: 84px;
  display: grid;
  grid-template-rows: auto auto auto;
  place-items: center;
  gap: 3px;
  padding: 8px 5px;
}

.part-token span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: currentColor;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.part-token small {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.62rem;
  font-weight: 900;
}

.part-token.yellow small {
  color: rgba(54, 36, 16, 0.7);
}

.wire-sockets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wire-socket-control {
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-rows: 42px 1fr auto;
  justify-items: center;
  align-items: end;
  padding: 9px 5px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--wire-color), white 56%), transparent 34%),
    #f8fcff;
  color: #12212f;
  box-shadow: 0 8px 0 rgba(8, 37, 68, 0.18);
}

.wire-socket-control .socket-dot {
  width: 30px;
  height: 30px;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: var(--wire-color);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--wire-color), black 28%);
}

.wire-socket-control .wire-cable {
  width: 18px;
  height: 28px;
  border-radius: 999px 999px 0 0;
  background: var(--wire-color);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3);
  transform-origin: bottom;
}

.wire-socket-control.done .wire-cable,
.wire-socket-control.plugging .wire-cable {
  height: 58px;
  animation: cable-drop 440ms cubic-bezier(0.22, 0.74, 0.27, 1);
}

.wire-socket-control.done {
  outline: 4px solid color-mix(in srgb, var(--wire-color), transparent 72%);
}

.fuel-lab {
  grid-template-columns: minmax(0, 1fr) minmax(118px, 0.9fr);
  align-items: center;
}

.fuel-tank-game {
  position: relative;
  min-height: 136px;
  overflow: hidden;
  border: 5px solid #ffffff;
  border-radius: 18px;
  background: #d9f4ff;
  box-shadow:
    inset 0 -4px 0 rgba(18, 33, 47, 0.12),
    0 10px 18px rgba(18, 33, 47, 0.16);
}

.fuel-tank-game::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fuel);
  background: linear-gradient(180deg, #b8ff75, #26cf5d);
  transition: height 260ms ease;
}

.fuel-tank-game span,
.fuel-tank-game b,
.fuel-tank-game i {
  position: absolute;
  bottom: 12%;
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  animation: fuel-bubble 1.7s ease-in-out infinite;
}

.fuel-tank-game span {
  left: 24%;
}

.fuel-tank-game b {
  left: 52%;
  animation-delay: 0.35s;
}

.fuel-tank-game i {
  left: 72%;
  animation-delay: 0.7s;
}

.pump-button,
.test-button,
.lever-button {
  position: relative;
  z-index: 1;
  min-height: 86px;
}

.pump-button:active {
  animation: pump-press 180ms ease-out;
}

.engine-lab {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.9fr);
  align-items: center;
}

.thrust-window {
  min-height: 136px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 201, 61, 0.5), transparent 34%),
    linear-gradient(180deg, #11304b, #0c1d2e);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.18);
}

.thrust-window span {
  width: 28px;
  height: 72px;
  border-radius: 999px 999px 42% 42%;
  background: linear-gradient(180deg, #fff6a8, #ffc93d 38%, #ff7a1a 74%, transparent);
  filter: drop-shadow(0 0 16px rgba(255, 201, 61, 0.72));
  animation: thrust-dance 360ms ease-in-out infinite alternate;
}

.thrust-window span:nth-child(2) {
  height: 94px;
  animation-delay: 90ms;
}

.thrust-window span:nth-child(3) {
  animation-delay: 170ms;
}

.countdown-lab {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.count-light {
  min-height: 112px;
  border-radius: 50%;
  font-size: 2.2rem;
  box-shadow:
    inset 0 -8px 0 rgba(18, 33, 47, 0.18),
    0 10px 0 rgba(18, 33, 47, 0.16);
}

.count-light.next {
  animation: countdown-pulse 780ms ease-in-out infinite alternate;
}

.count-light.done {
  filter: brightness(1.1);
}

.launch-lab {
  min-height: 160px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 122, 26, 0.26), transparent 38%),
    linear-gradient(180deg, #ffffff, #e8f8ff);
}

.lever-button {
  width: min(100%, 250px);
  transform-origin: 50% 90%;
}

.lever-button:active {
  transform: rotate(-8deg) translateY(4px);
}

.choice-button,
.reset-button {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 1000;
  line-height: 1.05;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 8px 0 #065ca7;
}

.choice-button:active,
.reset-button:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #065ca7;
}

.choice-button.orange {
  background: var(--orange);
  box-shadow: 0 8px 0 #b94e08;
}

.choice-button.green {
  background: var(--green);
  box-shadow: 0 8px 0 #167938;
}

.choice-button.yellow {
  background: var(--yellow);
  color: #362410;
  box-shadow: 0 8px 0 #c59106;
}

.choice-button.red {
  background: var(--red);
  box-shadow: 0 8px 0 #a92d25;
}

.choice-button.purple {
  background: #7a4cff;
  box-shadow: 0 8px 0 #4b2caf;
}

.choice-button:disabled {
  opacity: 0.56;
  cursor: default;
}

.reset-button {
  min-height: 50px;
  background: #16334d;
  box-shadow: 0 8px 0 #0b1c2b;
}

@keyframes helper-walk-down {
  0%,
  24.99% {
    background-position: 0 0;
  }
  25%,
  49.99% {
    background-position: 33.333% 0;
  }
  50%,
  74.99% {
    background-position: 66.667% 0;
  }
  75%,
  100% {
    background-position: 100% 0;
  }
}

@keyframes helper-walk-right {
  0%,
  24.99% {
    background-position: 0 33.333%;
  }
  25%,
  49.99% {
    background-position: 33.333% 33.333%;
  }
  50%,
  74.99% {
    background-position: 66.667% 33.333%;
  }
  75%,
  100% {
    background-position: 100% 33.333%;
  }
}

@keyframes helper-walk-left {
  0%,
  24.99% {
    background-position: 0 66.667%;
  }
  25%,
  49.99% {
    background-position: 33.333% 66.667%;
  }
  50%,
  74.99% {
    background-position: 66.667% 66.667%;
  }
  75%,
  100% {
    background-position: 100% 66.667%;
  }
}

@keyframes helper-walk-up {
  0%,
  24.99% {
    background-position: 0 100%;
  }
  25%,
  49.99% {
    background-position: 33.333% 100%;
  }
  50%,
  74.99% {
    background-position: 66.667% 100%;
  }
  75%,
  100% {
    background-position: 100% 100%;
  }
}

@keyframes helper-plug {
  0%,
  24.99% {
    background-position: 0 100%;
  }
  25%,
  49.99% {
    background-position: 33.333% 100%;
  }
  50%,
  74.99% {
    background-position: 66.667% 100%;
  }
  75%,
  100% {
    background-position: 100% 100%;
  }
}

@keyframes helper-celebrate {
  from {
    transform: translate3d(var(--x), var(--y), 0) translateY(0) scale(1);
  }
  to {
    transform: translate3d(var(--x), var(--y), 0) translateY(-9px) scale(1.04);
  }
}

@keyframes toy-pop {
  0% {
    transform: scale(0.86);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wire-plug-snap {
  0% {
    opacity: 0;
    transform: translate(0, -52px) scale(0.58);
  }
  55% {
    opacity: 1;
    transform: translate(16px, -18px) scale(1.08);
  }
  78% {
    transform: translate(-3px, 4px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes wire-panel-pulse {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes wire-socket-ripple {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.36);
  }
  32% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.58);
  }
}

@keyframes wire-cable-feed {
  0% {
    height: 0;
    opacity: 0;
  }
  35% {
    height: 32%;
    opacity: 1;
  }
  100% {
    height: 58%;
    opacity: 1;
  }
}

@keyframes wire-plug-bounce {
  0% {
    transform: translateX(-50%) scale(0.76);
  }
  62% {
    transform: translateX(-50%) scale(1.16);
  }
  82% {
    transform: translateX(-50%) scale(0.92);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes wire-flight-land {
  0% {
    opacity: 0;
    transform: translate(-180%, -88%) scale(1.25) rotate(-14deg);
  }
  18% {
    opacity: 1;
  }
  62% {
    transform: translate(-72%, -28%) scale(1.12) rotate(7deg);
  }
  78% {
    transform: translate(-50%, 5%) scale(0.96) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.72) rotate(0deg);
  }
}

@keyframes wire-flight-cable {
  0% {
    height: 26%;
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  70% {
    height: 84%;
  }
  100% {
    height: 42%;
    opacity: 0;
  }
}

@keyframes wire-flight-head {
  0% {
    transform: translateX(-50%) scale(0.86);
  }
  58% {
    transform: translateX(-50%) scale(1.22);
  }
  78% {
    transform: translateX(-50%) scale(0.92);
  }
  100% {
    transform: translateX(-50%) scale(0.7);
  }
}

@keyframes flame-flicker {
  from {
    transform: translateX(-50%) scaleY(0.72) scaleX(0.9);
  }
  to {
    transform: translateX(-50%) scaleY(1.08) scaleX(1.08);
  }
}

@keyframes toy-rocket-launch {
  0%,
  22% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-118vh) rotate(3deg);
  }
}

@keyframes spark-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -96px) scale(0.2);
  }
}

@keyframes station-pulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.08);
  }
}

@keyframes beacon-ring {
  from {
    opacity: 0.58;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes breadcrumb-pulse {
  from {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.82);
  }
  to {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes cable-drop {
  0% {
    transform: scaleY(0.25);
  }
  70% {
    transform: scaleY(1.12);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes rover-drive-bob {
  from {
    filter: drop-shadow(0 18px 16px rgba(3, 13, 28, 0.42));
  }
  to {
    filter: drop-shadow(0 22px 18px rgba(3, 13, 28, 0.36));
  }
}

@keyframes fuel-bubble {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.6);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-78px) scale(1.12);
  }
}

@keyframes pump-press {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(8px) scale(0.96);
  }
}

@keyframes thrust-dance {
  from {
    transform: scaleY(0.72) scaleX(0.88);
  }
  to {
    transform: scaleY(1.12) scaleX(1.06);
  }
}

@keyframes countdown-pulse {
  from {
    filter: brightness(1);
    box-shadow:
      inset 0 -8px 0 rgba(18, 33, 47, 0.18),
      0 10px 0 rgba(18, 33, 47, 0.16);
  }
  to {
    filter: brightness(1.16);
    box-shadow:
      inset 0 -8px 0 rgba(18, 33, 47, 0.18),
      0 10px 0 rgba(18, 33, 47, 0.16),
      0 0 0 7px rgba(255, 201, 61, 0.24);
  }
}

@media (max-width: 860px) {
  body {
    overflow: hidden;
  }

  .rocket-game-shell {
    min-height: 100dvh;
    display: block;
  }

  .rocket-stage {
    min-height: 100dvh;
    --camera-scale: 1;
  }

  .sky-readout {
    max-width: calc(100vw - 28px);
  }

  .rocket-game-shell.rover-mode .sky-readout {
    left: 10px;
    top: 10px;
    max-width: calc(100vw - 20px);
    padding: 7px 10px;
    gap: 1px;
    border-width: 2px;
  }

  .rocket-game-shell.rover-mode .sky-readout span {
    font-size: 0.58rem;
  }

  .rocket-game-shell.rover-mode .sky-readout strong {
    font-size: clamp(0.98rem, 5vw, 1.28rem);
  }

  .rocket-wrap {
    width: min(62vw, 290px);
    bottom: 38px;
  }

  .astronaut {
    width: clamp(86px, 25vw, 126px);
  }

  .map-station {
    width: 66px;
  }

  .office-portal {
    width: 70px;
  }

  .adventure-hotspot {
    width: 96px;
  }

  .adventure-hotspot::before {
    width: 42px;
  }

  .adventure-rover {
    width: 188px;
  }

  .adventure-compass {
    display: none;
  }

  .adventure-breadcrumbs {
    display: none;
  }

  .mission-panel {
    width: min(360px, calc(100vw - 14px));
    min-height: 100dvh;
    max-height: 100dvh;
    box-shadow: -18px 0 30px rgba(18, 33, 47, 0.2);
  }

  .station-workbench {
    min-height: 126px;
  }

  .station-workbench img {
    width: min(58%, 150px);
  }

  .play-lab {
    min-height: 122px;
    padding: 10px;
  }

  .fuel-lab,
  .engine-lab {
    grid-template-columns: 1fr;
  }

  .wire-sockets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wire-socket-control {
    min-height: 96px;
  }

  .part-token {
    min-height: 76px;
  }

  .count-light {
    min-height: 82px;
    font-size: 1.8rem;
  }

  .mission-status strong {
    min-height: 0;
    font-size: 1.4rem;
  }

  .task-list {
    max-height: 270px;
  }

  .station-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .station-card {
    min-height: 72px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}