:root {
  --sc-ink: #f3f7f8;
  --sc-muted: rgba(221, 233, 236, 0.62);
  --sc-dim: rgba(221, 233, 236, 0.38);
  --sc-line: rgba(215, 235, 237, 0.16);
  --sc-panel: rgba(7, 14, 18, 0.76);
  --sc-cyan: #91eff0;
  --sc-green: #9be2be;
  --sc-amber: #e9c477;
  --sc-red: #f1897f;
  --sc-bg: #05090d;
  --sc-serif: Georgia, 'Times New Roman', serif;
  --sc-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sc-mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

body.artemis-soft-capture-page {
  margin: 0 !important;
  background: var(--sc-bg) !important;
  color: var(--sc-ink);
  overflow: hidden !important;
}

body.artemis-soft-capture-page #wpadminbar,
body.artemis-soft-capture-page .site-header,
body.artemis-soft-capture-page .site-footer {
  display: none !important;
}

.sc-game,
.sc-game *,
.sc-hero,
.sc-hero * {
  box-sizing: border-box;
}

.sc-game button,
.sc-hero button {
  font: inherit;
}

.sc-game {
  position: relative;
  width: 100%;
  min-height: 680px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: var(--sc-ink);
  background: #030608;
  font-family: var(--sc-sans);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

.sc-game canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.sc-game::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.24)),
    radial-gradient(circle at 50% 44%, transparent 42%, rgba(0, 0, 0, 0.32) 100%);
}

.sc-hidden {
  display: none !important;
}

.sc-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.sc-hud.is-muted {
  opacity: 0.22;
}

.sc-stage-complete {
  position: absolute;
  z-index: 22;
  left: 50%;
  top: max(126px, calc(env(safe-area-inset-top) + 112px));
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(430px, calc(100% - 32px));
  padding: 14px 17px;
  overflow: hidden;
  border: 1px solid rgba(155, 226, 190, 0.48);
  background: linear-gradient(105deg, rgba(7, 18, 21, 0.96), rgba(4, 11, 14, 0.88));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.46), inset 0 0 34px rgba(155, 226, 190, 0.035);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translate(-50%, -12px) scale(0.98);
  pointer-events: none;
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

.sc-stage-complete[hidden] {
  display: none;
}

.sc-stage-complete.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.sc-stage-complete::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--sc-green);
  box-shadow: 0 0 10px rgba(155, 226, 190, 0.58);
  transform: scaleX(0);
  transform-origin: left;
}

.sc-stage-complete.is-visible::after {
  animation: sc-stage-confirm 2.1s linear forwards;
}

.sc-stage-complete__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(155, 226, 190, 0.58);
  border-radius: 50%;
  color: var(--sc-green);
  background: rgba(155, 226, 190, 0.07);
  box-shadow: 0 0 18px rgba(155, 226, 190, 0.09);
  font: 500 18px/1 var(--sc-sans);
}

.sc-stage-complete__copy small,
.sc-stage-complete__copy strong,
.sc-stage-complete__copy em {
  display: block;
}

.sc-stage-complete__copy small {
  color: var(--sc-green);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.sc-stage-complete__copy strong {
  margin-top: 6px;
  color: var(--sc-ink);
  font: 500 15px/1.1 var(--sc-sans);
  letter-spacing: 0.045em;
}

.sc-stage-complete__copy em {
  margin-top: 5px;
  color: var(--sc-dim);
  font: 400 9px/1.3 var(--sc-mono);
  letter-spacing: 0.03em;
  font-style: normal;
}

@keyframes sc-stage-confirm {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.sc-topbar {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.sc-wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}

.sc-wordmark__mark {
  position: relative;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
}

.sc-wordmark__mark::before,
.sc-wordmark__mark::after {
  content: '';
  position: absolute;
  background: var(--sc-cyan);
}

.sc-wordmark__mark::before {
  left: 50%;
  top: -4px;
  width: 1px;
  height: 37px;
  transform: translateX(-50%);
}

.sc-wordmark__mark::after {
  top: 50%;
  left: -4px;
  height: 1px;
  width: 37px;
  transform: translateY(-50%);
}

.sc-wordmark__copy span,
.sc-wordmark__copy small {
  display: block;
}

.sc-wordmark__copy span {
  font: 600 12px/1.2 var(--sc-sans);
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.sc-wordmark__copy small {
  margin-top: 4px;
  color: var(--sc-dim);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-stage {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(440px, 38vw);
  text-align: center;
}

.sc-stage__label {
  display: block;
  color: var(--sc-muted);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sc-stage__name {
  display: block;
  margin-top: 7px;
  font: 500 13px/1.2 var(--sc-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sc-stage__objective {
  display: block;
  margin-top: 6px;
  color: rgba(221, 233, 236, 0.58);
  font: 400 8px/1.35 var(--sc-mono);
  letter-spacing: 0.045em;
}

.sc-stage__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 9px;
}

.sc-stage__track i {
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 300ms ease, box-shadow 300ms ease;
}

.sc-stage__track i.is-complete {
  background: rgba(145, 239, 240, 0.44);
}

.sc-stage__track i.is-active {
  background: var(--sc-cyan);
  box-shadow: 0 0 10px rgba(145, 239, 240, 0.55);
}

.sc-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  pointer-events: auto;
}

.sc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--sc-line);
  border-radius: 2px;
  color: var(--sc-muted);
  background: rgba(3, 8, 11, 0.58);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.sc-icon-button:hover,
.sc-icon-button:focus-visible {
  color: var(--sc-ink);
  border-color: rgba(145, 239, 240, 0.5);
  background: rgba(12, 24, 29, 0.82);
  outline: none;
}

.sc-telemetry {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  top: 112px;
  width: 205px;
  border-top: 1px solid rgba(145, 239, 240, 0.44);
  background: linear-gradient(135deg, rgba(5, 12, 16, 0.82), rgba(5, 12, 16, 0.42));
  backdrop-filter: blur(10px);
}

.sc-panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--sc-line);
  color: var(--sc-dim);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sc-panel-label::after {
  content: 'LIVE';
  color: var(--sc-green);
  letter-spacing: 0.08em;
}

.sc-telemetry dl {
  margin: 0;
  padding: 3px 12px 5px;
}

.sc-reading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-reading:last-child {
  border-bottom: 0;
}

.sc-reading dt {
  color: var(--sc-dim);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-reading dd {
  margin: 0;
  font: 500 12px/1 var(--sc-mono);
  letter-spacing: 0.04em;
}

.sc-reading dd b {
  font-weight: 500;
}

.sc-reading dd small {
  margin-left: 4px;
  color: var(--sc-dim);
  font-size: 8px;
}

.sc-reading.is-good dd {
  color: var(--sc-green);
}

.sc-reading.is-warn dd {
  color: var(--sc-amber);
}

.sc-reading.is-bad dd {
  color: var(--sc-red);
}

.sc-propellant {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  top: 112px;
  width: 180px;
  padding: 12px;
  border-top: 1px solid rgba(145, 239, 240, 0.44);
  background: linear-gradient(225deg, rgba(5, 12, 16, 0.82), rgba(5, 12, 16, 0.42));
  backdrop-filter: blur(10px);
}

.sc-propellant__head,
.sc-propellant__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-propellant__head {
  color: var(--sc-dim);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sc-propellant__head b {
  color: var(--sc-ink);
  font-size: 11px;
  font-weight: 500;
}

.sc-propellant__bar {
  height: 3px;
  margin: 10px 0 9px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.sc-propellant__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sc-cyan);
  box-shadow: 0 0 8px rgba(145, 239, 240, 0.45);
  transform-origin: left;
  transition: transform 160ms linear, background 200ms ease;
}

.sc-propellant__foot {
  color: var(--sc-dim);
  font: 400 7px/1 var(--sc-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sc-gate-card {
  position: absolute;
  top: 220px;
  right: max(20px, env(safe-area-inset-right));
  width: 180px;
  padding: 12px;
  border: 1px solid var(--sc-line);
  background: rgba(5, 12, 16, 0.62);
  backdrop-filter: blur(8px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.sc-gate-card[hidden] {
  display: block;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

.sc-gate-card__title {
  display: flex;
  justify-content: space-between;
  color: var(--sc-ink);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sc-gate-card__title span:last-child {
  color: var(--sc-amber);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color 200ms ease, text-shadow 200ms ease;
}

.sc-gate-card.is-counting .sc-gate-card__title span:last-child {
  color: var(--sc-green);
  text-shadow: 0 0 10px rgba(155, 226, 190, 0.5);
}

.sc-gate-card__bar {
  height: 2px;
  margin: 11px 0;
  background: rgba(255, 255, 255, 0.1);
}

.sc-gate-card__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sc-green);
  box-shadow: 0 0 8px rgba(155, 226, 190, 0.55);
  transition: width 100ms linear;
}

.sc-gate-card p {
  margin: 0;
  color: var(--sc-dim);
  font: 400 8px/1.55 var(--sc-mono);
  letter-spacing: 0.04em;
}

.sc-gate-card.is-outside {
  border-color: rgba(241, 161, 77, 0.52);
  box-shadow: inset 3px 0 rgba(241, 161, 77, 0.72), 0 0 22px rgba(241, 161, 77, 0.07);
}

.sc-gate-card.is-outside .sc-gate-card__title span:last-child,
.sc-gate-card.is-outside p {
  color: rgb(241, 178, 105);
}

.sc-gate-card.is-outside .sc-gate-card__bar i {
  background: rgb(241, 161, 77);
  box-shadow: 0 0 10px rgba(241, 161, 77, 0.56);
}

.sc-center-reticle {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(130px, 19vw, 236px);
  height: clamp(130px, 19vw, 236px);
  transform: translate(-50%, -50%);
  opacity: 0.72;
  transition: width 500ms ease, height 500ms ease, opacity 300ms ease;
}

.sc-center-reticle::before,
.sc-center-reticle::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.sc-center-reticle::before {
  inset: 0;
  border: 1px solid rgba(223, 245, 246, 0.24);
  border-radius: 50%;
  background:
    linear-gradient(var(--sc-cyan), var(--sc-cyan)) center top / 1px 11px no-repeat,
    linear-gradient(var(--sc-cyan), var(--sc-cyan)) center bottom / 1px 11px no-repeat,
    linear-gradient(90deg, var(--sc-cyan), var(--sc-cyan)) left center / 11px 1px no-repeat,
    linear-gradient(90deg, var(--sc-cyan), var(--sc-cyan)) right center / 11px 1px no-repeat;
}

.sc-center-reticle::after {
  inset: 29%;
  border: 1px solid rgba(223, 245, 246, 0.38);
  border-radius: 50%;
}

.sc-center-reticle.is-final {
  width: clamp(180px, 25vw, 330px);
  height: clamp(180px, 25vw, 330px);
  opacity: 0.9;
}

.sc-reticle-cross-x,
.sc-reticle-cross-y {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(223, 245, 246, 0.66);
}

.sc-reticle-cross-x {
  width: 23%;
  height: 1px;
  transform: translate(-50%, -50%);
}

.sc-capture-envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 1px dashed rgba(233, 196, 119, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(4, 10, 13, 0.34), inset 0 0 18px rgba(233, 196, 119, 0.04);
  transition: width 100ms linear, height 100ms linear, border-color 140ms ease, box-shadow 140ms ease;
}

.sc-capture-envelope.is-acceptable {
  border-style: solid;
  border-color: var(--sc-green);
  box-shadow: 0 0 13px rgba(155, 226, 190, 0.36), inset 0 0 16px rgba(155, 226, 190, 0.08);
}

.sc-capture-envelope.is-ideal {
  border-color: var(--sc-cyan);
  box-shadow: 0 0 17px rgba(145, 239, 240, 0.6), inset 0 0 20px rgba(145, 239, 240, 0.12);
}

.sc-reticle-cross-y {
  width: 1px;
  height: 23%;
  transform: translate(-50%, -50%);
}

.sc-roll-index {
  position: absolute;
  left: 50%;
  top: -15px;
  width: 1px;
  height: 10px;
  background: var(--sc-cyan);
  transform-origin: 0 calc(50% + clamp(65px, 9.5vw, 118px));
  transition: transform 100ms linear;
}

.sc-corridor-arrow {
  --sc-arrow-x: 0px;
  --sc-arrow-y: 0px;
  --sc-arrow-angle: 0rad;
  position: absolute;
  z-index: 6;
  left: calc(50% + var(--sc-arrow-x));
  top: calc(var(--sc-arrow-centre, 47%) + var(--sc-arrow-y));
  width: clamp(48px, 6vw, 68px);
  height: 30px;
  transform: translate(-50%, -50%) rotate(var(--sc-arrow-angle));
  filter: drop-shadow(0 0 7px rgba(241, 161, 77, 0.82));
  pointer-events: none;
  animation: sc-corridor-arrow 760ms ease-in-out infinite alternate;
}

.sc-corridor-arrow[hidden] {
  display: none;
}

.sc-corridor-arrow span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--sc-arrow-angle))) translateY(30px);
  padding: 4px 7px;
  white-space: nowrap;
  color: #ffc17d;
  background: rgba(3, 9, 12, .94);
  border-radius: 3px;
  font: 600 11px/1.3 var(--sc-mono);
  filter: none;
}

.sc-corridor-arrow i,
.sc-corridor-arrow i::before,
.sc-corridor-arrow i::after {
  position: absolute;
  display: block;
  content: '';
}

.sc-corridor-arrow i {
  left: 3px;
  right: 4px;
  top: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgb(241, 161, 77);
}

.sc-corridor-arrow i::before,
.sc-corridor-arrow i::after {
  right: -1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgb(241, 161, 77);
  transform-origin: right center;
}

.sc-corridor-arrow i::before {
  transform: rotate(42deg);
}

.sc-corridor-arrow i::after {
  transform: rotate(-42deg);
}

@keyframes sc-corridor-arrow {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

.sc-axis-guide {
  position: absolute;
  left: 50%;
  top: 102px;
  width: min(460px, calc(100vw - 540px));
  min-width: 340px;
  padding: 13px 14px 14px;
  border: 1px solid rgba(214, 236, 238, 0.28);
  background: linear-gradient(180deg, rgba(3, 9, 12, 0.94), rgba(4, 11, 14, 0.84));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.sc-axis-guide[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
}

.sc-axis-guide.is-all-green {
  border-color: rgba(97, 242, 164, 0.72);
  box-shadow: 0 0 22px rgba(97, 242, 164, 0.14), 0 14px 36px rgba(0, 0, 0, 0.38);
}

.sc-axis-guide header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
  color: var(--sc-dim);
  font: 600 9px/1 var(--sc-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sc-axis-guide header strong {
  color: #ff5d57;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 93, 87, 0.45);
}

.sc-axis-guide.is-all-green header strong {
  color: #61f2a4;
  text-shadow: 0 0 10px rgba(97, 242, 164, 0.45);
}

.sc-axis-guide__lights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.sc-axis-guide__lights > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 9px auto;
  align-items: center;
  column-gap: 6px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 93, 87, 0.42);
  background: rgba(255, 93, 87, 0.08);
  transition: border-color 130ms ease, background 130ms ease;
}

.sc-axis-guide__lights > div.is-good {
  border-color: rgba(97, 242, 164, 0.5);
  background: rgba(97, 242, 164, 0.08);
}

.sc-axis-guide__lights i {
  grid-column: 1 / -1;
  width: 100%;
  height: 7px;
  border-radius: 1px;
  background: #ff5d57;
  box-shadow: 0 0 13px rgba(255, 93, 87, 0.86);
  transition: background 130ms ease, box-shadow 130ms ease;
}

.sc-axis-guide__lights .is-good i {
  background: #61f2a4;
  box-shadow: 0 0 14px rgba(97, 242, 164, 0.9);
}

.sc-axis-guide__lights b {
  color: var(--sc-ink);
  font: 700 12px/1 var(--sc-mono);
}

.sc-axis-guide__lights small {
  color: var(--sc-dim);
  font: 500 7px/1.1 var(--sc-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sc-axis-guide p {
  margin: 11px 0 0;
  color: #ff746f;
  font: 600 11px/1.25 var(--sc-mono);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.sc-axis-guide.is-all-green p {
  color: #61f2a4;
}

.sc-drift-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid var(--sc-amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(233, 196, 119, 0.2);
  transition: border-color 150ms ease;
}

.sc-drift-marker::before,
.sc-drift-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}

.sc-drift-marker::before {
  width: 21px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.sc-drift-marker::after {
  width: 1px;
  height: 21px;
  transform: translate(-50%, -50%);
}

.sc-drift-marker.is-good {
  color: var(--sc-green);
  border-color: var(--sc-green);
}

.sc-mission-control {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(470px, calc(100vw - 440px));
  min-height: 68px;
  padding: 10px 14px 10px 10px;
  border-left: 1px solid var(--sc-cyan);
  background: linear-gradient(90deg, rgba(3, 9, 12, 0.86), rgba(3, 9, 12, 0.28));
  backdrop-filter: blur(9px);
}

.sc-mission-control__signal {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  width: 38px;
  height: 34px;
  padding-bottom: 7px;
  border: 1px solid rgba(145, 239, 240, 0.2);
  border-radius: 50%;
}

.sc-mission-control__signal i {
  width: 2px;
  height: 5px;
  background: var(--sc-cyan);
  animation: sc-signal 800ms ease-in-out infinite alternate;
}

.sc-mission-control__signal i:nth-child(2) {
  height: 10px;
  animation-delay: -300ms;
}

.sc-mission-control__signal i:nth-child(3) {
  height: 7px;
  animation-delay: -550ms;
}

.sc-mission-control__copy small,
.sc-mission-control__copy p {
  display: block;
  margin: 0;
}

.sc-mission-control__copy small {
  margin-bottom: 5px;
  color: var(--sc-cyan);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.sc-mission-control__copy p {
  color: rgba(245, 249, 250, 0.88);
  font: 400 12px/1.45 var(--sc-mono);
  letter-spacing: 0.01em;
}

@keyframes sc-signal {
  to { transform: scaleY(1.7); opacity: 0.55; }
}

.sc-flight-controls {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px));
  display: grid;
  grid-template-columns: repeat(2, 106px);
  gap: 8px;
  pointer-events: auto;
}

.sc-flight-controls.has-roll {
  grid-template-columns: 78px 78px 106px 106px;
}

.sc-thrust-button[hidden] {
  display: none;
}

.sc-roll-button::before {
  background: var(--sc-amber);
}

.sc-thrust-button {
  position: relative;
  height: 64px;
  padding: 10px 11px;
  border: 1px solid rgba(214, 236, 238, 0.24);
  border-radius: 2px;
  color: var(--sc-ink);
  background: rgba(4, 11, 14, 0.72);
  cursor: pointer;
  backdrop-filter: blur(10px);
  touch-action: none;
  transition: background 100ms ease, border-color 100ms ease, transform 100ms ease;
}

.sc-thrust-button::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--sc-cyan);
  opacity: 0.45;
}

.sc-thrust-button span,
.sc-thrust-button small {
  display: block;
  margin-left: 10px;
  text-align: left;
  text-transform: uppercase;
}

.sc-thrust-button span {
  font: 600 10px/1 var(--sc-sans);
  letter-spacing: 0.11em;
}

.sc-thrust-button small {
  margin-top: 8px;
  color: var(--sc-dim);
  font: 400 7px/1 var(--sc-mono);
  letter-spacing: 0.08em;
}

.sc-thrust-button:hover,
.sc-thrust-button:focus-visible,
.sc-thrust-button.is-active {
  border-color: rgba(145, 239, 240, 0.62);
  background: rgba(15, 34, 39, 0.88);
  outline: none;
}

.sc-thrust-button.is-active {
  transform: translateY(1px);
}

.sc-thrust-button.is-active::before {
  opacity: 1;
  box-shadow: 0 0 9px var(--sc-cyan);
}

.sc-control-hint {
  position: absolute;
  left: 50%;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 16px));
  transform: translateX(-50%);
  width: 250px;
  padding: 9px 12px;
  color: var(--sc-dim);
  background: rgba(4, 10, 13, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 8px/1.5 var(--sc-mono);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  transition: opacity 300ms ease;
}

.sc-control-hint strong {
  color: var(--sc-muted);
  font-weight: 500;
}

.sc-pulse {
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid rgba(145, 239, 240, 0.72);
  border-radius: 50%;
  pointer-events: none;
  animation: sc-control-pulse 420ms ease-out forwards;
}

@keyframes sc-control-pulse {
  from { opacity: 0.8; transform: scale(0.35); }
  to { opacity: 0; transform: scale(1.35); }
}

.sc-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
  background:
    radial-gradient(circle at 74% 43%, rgba(78, 142, 153, 0.09), transparent 30%),
    linear-gradient(90deg, rgba(2, 6, 8, 0.97) 0%, rgba(3, 8, 11, 0.9) 46%, rgba(3, 8, 11, 0.55) 100%);
  transition: opacity 500ms ease, visibility 500ms ease;
}

.sc-overlay[hidden] {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sc-intro {
  width: min(1120px, 100%);
  min-height: min(690px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.75fr);
  align-items: center;
  gap: clamp(46px, 8vw, 120px);
}

.sc-intro__copy {
  max-width: 650px;
}

.sc-kicker {
  margin: 0 0 24px;
  color: var(--sc-cyan);
  font: 500 10px/1 var(--sc-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sc-intro h1 {
  margin: 0;
  font: 400 clamp(52px, 7.6vw, 112px)/0.85 var(--sc-serif);
  letter-spacing: -0.055em;
}

.sc-intro h1 span {
  display: block;
  margin-left: clamp(32px, 8vw, 116px);
  color: var(--sc-cyan);
  font-size: 0.86em;
  font-style: italic;
  font-weight: 400;
}

.sc-intro__dek {
  max-width: 590px;
  margin: 32px 0 0;
  color: rgba(231, 238, 239, 0.72);
  font: 400 clamp(15px, 1.35vw, 19px)/1.65 var(--sc-sans);
}

.sc-intro__alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  width: fit-content;
  margin-top: 30px;
  padding: 9px 12px 9px 10px;
  border-left: 2px solid var(--sc-red);
  background: linear-gradient(90deg, rgba(241, 137, 127, 0.13), rgba(241, 137, 127, 0.025));
  color: var(--sc-red);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sc-intro__alert span {
  color: rgba(241, 184, 177, 0.68);
}

.sc-intro__alert strong {
  font-weight: 500;
}

.sc-intro__dek strong {
  color: var(--sc-ink);
  font-weight: 500;
}

.sc-intro__alert + .sc-intro__dek {
  margin-top: 18px;
}

.sc-intro__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 37px;
}

.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(145, 239, 240, 0.5);
  border-radius: 2px;
  color: var(--sc-ink);
  background: rgba(145, 239, 240, 0.09);
  font: 600 10px/1 var(--sc-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.sc-button i {
  color: var(--sc-cyan);
  font: 400 17px/1 var(--sc-sans);
  font-style: normal;
}

.sc-button:hover,
.sc-button:focus-visible {
  color: #031012;
  background: var(--sc-cyan);
  border-color: var(--sc-cyan);
  transform: translateY(-1px);
  outline: none;
}

.sc-button:hover i,
.sc-button:focus-visible i {
  color: #031012;
}

.sc-button--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
}

.sc-button--small {
  min-height: 45px;
  gap: 20px;
}

.sc-intro__time {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sc-dim);
  font: 400 9px/1.3 var(--sc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-intro__time::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--sc-green);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(155, 226, 190, 0.16);
}

.sc-intro__basis {
  max-width: 550px;
  margin: 30px 0 0;
  color: var(--sc-dim);
  font: 400 8px/1.65 var(--sc-mono);
  letter-spacing: 0.04em;
}

.sc-tutorial-overlay {
  background: rgba(2, 7, 10, 0.48);
  backdrop-filter: blur(7px);
}

.sc-tutorial {
  width: min(790px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: clamp(25px, 4vw, 42px);
  border-top: 1px solid var(--sc-cyan);
  background: rgba(5, 13, 17, 0.94);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

.sc-tutorial__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sc-tutorial__header .sc-kicker {
  margin: 0;
}

.sc-tutorial__skip {
  padding: 7px 0 7px 10px;
  border: 0;
  color: var(--sc-dim);
  background: transparent;
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.sc-tutorial__skip span {
  margin-left: 6px;
  color: var(--sc-cyan);
  font-size: 15px;
}

.sc-tutorial__skip:hover,
.sc-tutorial__skip:focus-visible {
  color: var(--sc-ink);
  outline: none;
}

.sc-tutorial h2 {
  margin: 16px 0 25px;
  font: 400 clamp(34px, 5vw, 56px)/0.95 var(--sc-serif);
  letter-spacing: -0.04em;
}

.sc-tutorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sc-tutorial__section {
  padding: 17px;
  border: 1px solid var(--sc-line);
  background: rgba(145, 239, 240, 0.025);
}

.sc-tutorial__section h3 {
  margin: 0 0 13px;
  color: var(--sc-cyan);
  font: 600 9px/1 var(--sc-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-tutorial__item,
.sc-tutorial__control {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: start;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-tutorial__item b,
.sc-tutorial__control kbd {
  color: var(--sc-ink);
  font: 500 8px/1.35 var(--sc-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sc-tutorial__control kbd {
  width: fit-content;
  padding: 3px 5px;
  border: 1px solid rgba(145, 239, 240, 0.3);
  border-radius: 2px;
  background: rgba(145, 239, 240, 0.06);
}

.sc-tutorial__item span,
.sc-tutorial__control span {
  color: var(--sc-muted);
  font: 400 9px/1.45 var(--sc-mono);
}

.sc-tutorial__control span b {
  color: var(--sc-ink);
  font-weight: 500;
}

.sc-tutorial__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--sc-line);
}

.sc-tutorial__footer p {
  margin: 0;
  color: var(--sc-muted);
  font: 400 10px/1.55 var(--sc-mono);
}

.sc-tutorial__footer p strong {
  color: var(--sc-amber);
  font-weight: 500;
  text-transform: uppercase;
}

.sc-intro__briefing {
  position: relative;
  align-self: center;
  padding-left: 30px;
  border-left: 1px solid rgba(145, 239, 240, 0.2);
}

.sc-intro__briefing::before {
  content: 'MISSION SEQUENCE · CADET FLIGHT PLAN';
  position: absolute;
  top: -34px;
  left: 29px;
  color: var(--sc-dim);
  font: 400 8px/1 var(--sc-mono);
  letter-spacing: 0.15em;
}

.sc-briefing-orbit {
  position: relative;
  height: 208px;
  margin-bottom: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 67% 36%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 23% 28%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.5px),
    #020507;
}

.sc-briefing-orbit::before {
  content: '';
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -116px;
  height: 205px;
  border-top: 2px solid rgba(157, 225, 236, 0.85);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0%, #326276 0, #18344a 36%, #091826 67%, #03090f 100%);
  box-shadow: 0 -7px 22px rgba(96, 186, 218, 0.28);
}

.sc-briefing-target {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 57px;
  height: 57px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(220, 239, 241, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 0 11px rgba(175, 203, 207, 0.08), 0 0 0 12px rgba(220, 239, 241, 0.18);
}

.sc-briefing-target::before,
.sc-briefing-target::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(145, 239, 240, 0.76);
}

.sc-briefing-target::before {
  width: 94px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.sc-briefing-target::after {
  width: 1px;
  height: 94px;
  transform: translate(-50%, -50%);
}

.sc-briefing-card {
  display: grid;
  grid-template-columns: 29px 1fr;
  gap: 13px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sc-briefing-card > span {
  display: grid;
  place-items: center;
  align-self: start;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(145, 239, 240, 0.35);
  border-radius: 50%;
  color: var(--sc-cyan);
  font: 500 8px/1 var(--sc-mono);
}

.sc-briefing-card h3,
.sc-briefing-card p {
  margin: 0;
}

.sc-briefing-card h3 {
  color: var(--sc-ink);
  font: 600 10px/1.3 var(--sc-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-briefing-card p {
  margin-top: 6px;
  color: var(--sc-dim);
  font: 400 9px/1.55 var(--sc-mono);
}

.sc-dialog {
  width: min(540px, 100%);
  padding: clamp(28px, 5vw, 54px);
  border-top: 1px solid var(--sc-cyan);
  background: rgba(5, 13, 17, 0.9);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
}

.sc-dialog .sc-kicker {
  margin-bottom: 18px;
}

.sc-dialog h2 {
  margin: 0;
  font: 400 clamp(38px, 6vw, 64px)/0.95 var(--sc-serif);
  letter-spacing: -0.04em;
}

.sc-dialog > p:not(.sc-kicker) {
  margin: 20px 0 26px;
  color: var(--sc-muted);
  font: 400 14px/1.65 var(--sc-sans);
}

.sc-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-capture-overlay {
  align-content: end;
  justify-items: stretch;
  padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  background: linear-gradient(0deg, rgba(2, 6, 8, 0.82) 0%, transparent 62%);
  pointer-events: none;
}

.sc-capture-sequence {
  width: min(850px, 100%);
  margin: 0 auto;
  text-align: center;
}

.sc-capture-sequence span {
  display: block;
  opacity: 0;
  color: var(--sc-ink);
  font: 500 clamp(18px, 2.1vw, 28px)/1.3 var(--sc-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sc-capture-sequence span.is-visible {
  animation: sc-capture-copy 1.2s ease both;
}

.sc-capture-sequence span:nth-child(2) {
  color: var(--sc-cyan);
  font-size: clamp(30px, 5vw, 66px);
}

@keyframes sc-capture-copy {
  0% { opacity: 0; transform: translateY(6px); }
  25%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.28; }
}

.sc-results-overlay {
  justify-items: end;
  background: linear-gradient(90deg, transparent 0%, rgba(2, 6, 8, 0.2) 44%, rgba(2, 6, 8, 0.88) 67%, rgba(2, 6, 8, 0.98) 100%);
}

.sc-results {
  width: min(485px, 100%);
  padding: clamp(26px, 4vw, 46px);
  border-top: 1px solid var(--sc-green);
  background: rgba(5, 13, 17, 0.86);
  backdrop-filter: blur(16px);
}

.sc-results__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  color: var(--sc-green);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sc-results__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-green);
  box-shadow: 0 0 9px rgba(155, 226, 190, 0.7);
}

.sc-results h2 {
  margin: 0 0 8px;
  font: 400 clamp(40px, 5vw, 66px)/0.95 var(--sc-serif);
  letter-spacing: -0.045em;
}

.sc-results__rating {
  margin: 0 0 10px;
  color: var(--sc-cyan);
  font: 500 11px/1 var(--sc-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sc-results__score-key {
  margin: 0 0 22px;
  color: var(--sc-dim);
  font: 400 9px/1.4 var(--sc-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-results dl {
  margin: 0 0 27px;
  border-top: 1px solid var(--sc-line);
}

.sc-result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sc-line);
}

.sc-result-row dt,
.sc-result-row dd {
  margin: 0;
  font: 400 10px/1 var(--sc-mono);
}

.sc-result-row dt {
  color: var(--sc-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sc-result-row dd {
  color: var(--sc-ink);
}

.sc-result-row--category {
  align-items: center;
  padding: 14px 0;
}

.sc-result-row--category dt strong,
.sc-result-row--category dt small,
.sc-result-row--category dd b,
.sc-result-row--category dd small,
.sc-result-row--score dd b,
.sc-result-row--score dd small {
  display: block;
}

.sc-result-row--category dt strong {
  margin-bottom: 6px;
  color: var(--sc-ink);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.sc-result-row--category dt small {
  color: var(--sc-dim);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: none;
}

.sc-result-row--category dd,
.sc-result-row--score dd {
  text-align: right;
}

.sc-result-row--category dd b,
.sc-result-row--score dd b {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sc-result-row--category dd small,
.sc-result-row--score dd small {
  margin-top: 5px;
  color: var(--sc-dim);
  font-size: 8px;
}

.sc-result-row--score {
  align-items: center;
  padding: 16px 0;
}

.sc-result-row--penalty dt strong,
.sc-result-row--penalty dd {
  color: var(--sc-amber);
}

.sc-result-row--score dt,
.sc-result-row--score dd {
  color: var(--sc-cyan);
  font-weight: 500;
}

.sc-results__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.sc-results__actions .sc-button:first-child {
  grid-column: 1 / -1;
}

.sc-toast {
  position: absolute;
  left: 50%;
  top: max(88px, calc(env(safe-area-inset-top) + 70px));
  z-index: 20;
  transform: translate(-50%, -10px);
  padding: 10px 14px;
  border: 1px solid rgba(145, 239, 240, 0.35);
  color: var(--sc-cyan);
  background: rgba(3, 10, 13, 0.9);
  font: 500 9px/1 var(--sc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.sc-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sc-abort-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(79, 13, 10, 0.18);
  box-shadow: inset 0 0 100px rgba(241, 137, 127, 0.22);
  color: var(--sc-red);
  font: 500 clamp(18px, 2vw, 28px)/1 var(--sc-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.sc-abort-flash.is-visible {
  animation: sc-abort 1.1s ease both;
}

@keyframes sc-abort {
  0%, 100% { opacity: 0; }
  12%, 68% { opacity: 1; }
}

.sc-launcher-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #030608;
}

.sc-launcher-modal[hidden] {
  display: none;
}

.sc-modal-close {
  position: absolute;
  z-index: 1000010;
  top: max(15px, env(safe-area-inset-top));
  right: max(15px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.62);
  background: rgba(2, 7, 9, 0.74);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.sc-modal-close span {
  color: var(--sc-cyan);
  font-size: 16px;
}

.sc-modal-close:hover,
.sc-modal-close:focus-visible {
  color: white;
  border-color: rgba(145, 239, 240, 0.55);
  outline: none;
}

/* Lightweight front-page feature */
.sc-hero {
  position: relative;
  min-height: min(740px, 84vh);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(50px, 8vw, 110px) clamp(24px, 8vw, 120px);
  color: var(--sc-ink);
  background:
    radial-gradient(circle at 76% 42%, rgba(76, 142, 151, 0.11), transparent 22%),
    linear-gradient(118deg, #060b0e 0%, #030608 58%, #071117 100%);
  font-family: var(--sc-sans);
}

.sc-hero__content {
  position: relative;
  z-index: 2;
  width: min(650px, 55%);
}

.sc-hero h2 {
  margin: 0;
  color: var(--sc-ink);
  font: 400 clamp(50px, 7vw, 106px)/0.88 var(--sc-serif);
  letter-spacing: -0.055em;
}

.sc-hero h2 span {
  display: block;
  color: var(--sc-cyan);
  font-size: 0.72em;
  font-style: italic;
  white-space: nowrap;
}

.sc-hero__content > p:not(.sc-kicker) {
  width: min(570px, 100%);
  margin: 28px 0 34px;
  color: rgba(227, 236, 238, 0.67);
  font: 400 clamp(15px, 1.35vw, 18px)/1.65 var(--sc-sans);
}

.sc-hero__orbit {
  position: absolute;
  inset: 0 0 0 48%;
  overflow: hidden;
}

.sc-hero__orbit::before,
.sc-hero__orbit::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: white;
  box-shadow:
    61px 84px rgba(255,255,255,.5), 235px 35px rgba(255,255,255,.42), 410px 123px rgba(255,255,255,.52),
    120px 203px rgba(255,255,255,.4), 529px 61px rgba(255,255,255,.34), 331px 251px rgba(255,255,255,.46),
    19px 312px rgba(255,255,255,.31), 475px 338px rgba(255,255,255,.52), 252px 405px rgba(255,255,255,.29),
    590px 441px rgba(255,255,255,.45), 98px 512px rgba(255,255,255,.33), 390px 564px rgba(255,255,255,.46);
}

.sc-hero__orbit::before { left: 0; top: 0; }
.sc-hero__orbit::after { left: 166px; top: 94px; opacity: .7; }

.sc-hero__earth {
  position: absolute;
  left: -10%;
  right: -18%;
  bottom: -49%;
  height: 72%;
  border-top: 2px solid rgba(150, 228, 240, 0.86);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 40% 3%, rgba(130, 157, 135, 0.25) 0 3%, transparent 3.5%),
    radial-gradient(ellipse at 63% 9%, rgba(176, 178, 151, 0.17) 0 5%, transparent 5.5%),
    radial-gradient(ellipse at 50% 0%, #326b7d 0, #18384d 35%, #0b1d2c 66%, #040a10 100%);
  box-shadow: 0 -10px 36px rgba(91, 194, 222, 0.27);
}

.sc-hero__target {
  position: absolute;
  left: 62%;
  top: 38%;
  width: clamp(120px, 16vw, 240px);
  height: clamp(120px, 16vw, 240px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(223, 242, 244, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(183, 205, 208, 0.035), 0 0 0 23px rgba(223, 242, 244, 0.11);
  animation: sc-target-float 6s ease-in-out infinite;
}

.sc-hero__target::before,
.sc-hero__target::after,
.sc-hero__target i::before,
.sc-hero__target i::after {
  content: '';
  position: absolute;
  background: rgba(145, 239, 240, 0.56);
}

.sc-hero__target::before { left: -36px; right: -36px; top: 50%; height: 1px; }
.sc-hero__target::after { top: -36px; bottom: -36px; left: 50%; width: 1px; }
.sc-hero__target i::before { inset: 22%; border: 1px solid rgba(229,244,245,.42); border-radius: 50%; background: rgba(209,228,230,.06); }
.sc-hero__target i::after { left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); }

.sc-hero__target b {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(223, 242, 244, 0.18);
  border-radius: 50%;
  animation: sc-rotate 24s linear infinite;
}

.sc-hero__orion {
  position: absolute;
  right: -3%;
  top: 51%;
  width: clamp(80px, 10vw, 150px);
  height: clamp(34px, 4.2vw, 62px);
  border: 1px solid rgba(218, 231, 233, 0.22);
  border-radius: 50% 13% 13% 50%;
  background: linear-gradient(180deg, rgba(210, 224, 225, 0.34), rgba(44, 59, 61, 0.28) 45%, rgba(6, 12, 15, 0.66));
  box-shadow: -25px 0 40px rgba(185, 226, 230, 0.06);
}

.sc-hero__orion::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -50%;
  width: 62%;
  height: 18%;
  border: 1px solid rgba(218, 231, 233, 0.16);
  transform: translateY(-50%);
  background: rgba(160, 188, 191, 0.08);
}

@keyframes sc-target-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(calc(-50% + 7px), calc(-50% - 5px)); }
}

@keyframes sc-rotate { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .sc-game { min-height: 620px; }

  .sc-topbar { top: max(12px, env(safe-area-inset-top)); }
  .sc-stage { width: min(380px, 42vw); }
  .sc-wordmark__copy small { display: none; }
  .sc-actions { min-width: 120px; }

  .sc-telemetry { top: 87px; width: 174px; }
  .sc-propellant { top: 87px; width: 160px; }
  .sc-gate-card { top: 194px; width: 160px; }
  .sc-reading { padding: 7px 0; }
  .sc-mission-control { width: calc(100vw - 440px); }
  .sc-control-hint { display: none; }

  .sc-intro {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 50px;
  }

  .sc-intro h1 { font-size: clamp(50px, 8.2vw, 74px); }
  .sc-intro__briefing { padding-left: 22px; }

  .sc-hero__content { width: min(650px, 65%); }
  .sc-hero__orbit { left: 40%; opacity: 0.78; }
}

@media (max-width: 700px) {
  .sc-game { min-height: 540px; }

  .sc-topbar {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }

  .sc-wordmark { min-width: 0; }
  .sc-wordmark__copy span { font-size: 10px; }
  .sc-wordmark__mark { width: 25px; height: 25px; }
  .sc-wordmark__mark::before { height: 31px; }
  .sc-wordmark__mark::after { width: 31px; }

  .sc-stage {
    top: 42px;
    width: calc(100vw - 24px);
  }

  .sc-stage__track { display: none; }
  .sc-stage__label { font-size: 6px; letter-spacing: 0.14em; }
  .sc-stage__name { margin-top: 4px; font-size: 9px; color: var(--sc-ink); }
  .sc-stage__objective {
    max-width: 270px;
    margin: 4px auto 0;
    font-size: 7px;
    line-height: 1.3;
  }
  .sc-stage-complete {
    top: max(108px, calc(env(safe-area-inset-top) + 96px));
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 11px 13px;
  }
  .sc-stage-complete__mark { width: 34px; height: 34px; font-size: 15px; }
  .sc-stage-complete__copy strong { font-size: 13px; }
  .sc-actions { min-width: 0; }
  .sc-icon-button { min-width: 37px; height: 34px; padding: 0 9px; font-size: 0; }
  .sc-icon-button::after { content: attr(data-short); font: 500 9px/1 var(--sc-mono); }

  .sc-telemetry {
    left: max(12px, env(safe-area-inset-left));
    top: 100px;
    width: 146px;
    background: rgba(4, 10, 13, 0.56);
  }

  .sc-panel-label { padding: 8px 9px 7px; }
  .sc-telemetry dl { padding: 2px 9px 3px; }
  .sc-reading { padding: 6px 0; }
  .sc-reading dt { font-size: 7px; }
  .sc-reading dd { font-size: 9px; }
  .sc-reading dd small { font-size: 6px; }
  .sc-reading:nth-child(4),
  .sc-reading:nth-child(5) { display: none; }

  .sc-propellant {
    right: max(12px, env(safe-area-inset-right));
    top: 100px;
    width: 126px;
    padding: 9px;
    background: rgba(4, 10, 13, 0.56);
  }
  .sc-propellant__foot { display: none; }

  .sc-gate-card {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    top: 174px;
    width: 126px;
    padding: 9px;
    transform: none;
  }
  .sc-gate-card[hidden] { transform: translateY(-7px); }
  .sc-gate-card__title {
    align-items: flex-end;
    gap: 4px;
    font-size: 7px;
    line-height: 1.25;
    text-align: right;
  }
  .sc-gate-card__title span:first-child { max-width: 72px; }
  .sc-gate-card__title span:last-child { flex: 0 0 auto; font-size: 10px; }
  .sc-gate-card__bar { margin: 8px 0 0; }
  .sc-gate-card p { display: none; }

  .sc-center-reticle { top: 44%; }

  .sc-axis-guide {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    top: auto;
    bottom: max(170px, calc(env(safe-area-inset-bottom) + 160px));
    width: auto;
    min-width: 0;
    padding: 9px 10px 10px;
    transform: none;
  }
  .sc-axis-guide[hidden] { transform: translateY(6px); }
  .sc-axis-guide header { margin-bottom: 8px; }
  .sc-axis-guide__lights { gap: 5px; }
  .sc-axis-guide__lights > div { min-height: 39px; grid-template-columns: auto 1fr; grid-template-rows: 8px auto; padding: 5px 6px; column-gap: 4px; }
  .sc-axis-guide__lights i { height: 6px; }
  .sc-axis-guide__lights b { font-size: 11px; }
  .sc-axis-guide__lights small { display: none; }
  .sc-axis-guide p { margin-top: 8px; font-size: 9px; }

  .sc-mission-control {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 86px));
    width: auto;
    min-height: 52px;
    padding: 8px 10px 8px 8px;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 8px;
  }
  .sc-mission-control__signal { width: 28px; height: 28px; }
  .sc-mission-control__copy p { font-size: 9px; line-height: 1.35; }

  .sc-flight-controls {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sc-flight-controls.has-roll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc-thrust-button { height: 68px; }
  .sc-flight-controls.has-roll .sc-thrust-button { padding: 8px 5px; }
  .sc-flight-controls.has-roll .sc-thrust-button span,
  .sc-flight-controls.has-roll .sc-thrust-button small { margin-left: 7px; }
  .sc-flight-controls.has-roll .sc-thrust-button span { font-size: 8px; letter-spacing: 0.06em; }
  .sc-flight-controls.has-roll .sc-thrust-button small { font-size: 6px; }

  .sc-intro {
    display: block;
    min-height: 0;
    padding: 32px 2px;
  }
  .sc-intro__copy { max-width: 100%; }
  .sc-intro h1 { font-size: clamp(48px, 15vw, 76px); }
  .sc-intro h1 span { margin-left: 10vw; }
  .sc-intro__dek { margin-top: 25px; font-size: 14px; }
  .sc-intro__alert { margin-top: 24px; }
  .sc-intro__actions { margin-top: 28px; }
  .sc-intro__basis { margin-top: 23px; }
  .sc-intro__briefing {
    display: block;
    margin-top: 52px;
    padding-left: 0;
    border-left: 0;
  }
  .sc-intro__briefing::before { left: 0; }
  .sc-briefing-orbit { display: none; }

  .sc-tutorial-overlay { align-items: end; padding: 12px; }
  .sc-tutorial {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 22px 18px;
  }
  .sc-tutorial h2 { margin: 12px 0 18px; font-size: 38px; }
  .sc-tutorial__grid { grid-template-columns: 1fr; }
  .sc-tutorial__section { padding: 13px; }
  .sc-tutorial__item,
  .sc-tutorial__control { grid-template-columns: 82px 1fr; padding: 7px 0; }
  .sc-tutorial__footer { grid-template-columns: 1fr; gap: 14px; }
  .sc-tutorial__footer .sc-button { width: 100%; }

  .sc-results-overlay {
    align-items: end;
    background: linear-gradient(0deg, rgba(2, 6, 8, 0.98) 0%, rgba(2, 6, 8, 0.62) 63%, transparent 100%);
  }
  .sc-results { width: 100%; max-height: 92vh; overflow: auto; padding: 25px; }
  .sc-results h2 { font-size: 42px; }
  .sc-result-row { padding: 9px 0; }

  .sc-hero { min-height: 690px; align-items: end; padding-bottom: 66px; }
  .sc-hero__content { width: 100%; }
  .sc-hero__content > p:not(.sc-kicker) { font-size: 15px; }
  .sc-hero__orbit { inset: 0; opacity: 0.62; }
  .sc-hero__target { left: 68%; top: 24%; }
  .sc-hero__orion { top: 34%; }
  .sc-hero__earth { bottom: -43%; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .sc-telemetry, .sc-propellant { top: 76px; }
  .sc-gate-card { top: 184px; }
  .sc-axis-guide { top: 74px; }
  .sc-reading { padding: 6px 0; }
  .sc-center-reticle { top: 44%; }
  .sc-mission-control { bottom: 18px; }
  .sc-flight-controls { bottom: 18px; }
  .sc-intro { min-height: 590px; }
  .sc-intro h1 { font-size: clamp(54px, 8vw, 82px); }
  .sc-briefing-orbit { height: 160px; }
  .sc-briefing-card { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-mission-control__signal i,
  .sc-corridor-arrow,
  .sc-hero__target,
  .sc-hero__target b {
    animation: none !important;
  }

  .sc-overlay,
  .sc-button,
  .sc-toast,
  .sc-stage-complete,
  .sc-hud {
    transition-duration: 0.01ms !important;
  }
}

/* Leaderboard shares the Daily / All-time flow used by Lander and Trivia. */
.sc-game .sc-score-open { min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--sc-cyan); font: 500 14px/1.4 var(--sc-mono); cursor: pointer; }
.sc-score-overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 9, .88); backdrop-filter: blur(12px); touch-action: pan-y; }
.sc-score-overlay[hidden], .sc-score-entry[hidden], .sc-score-scroll[hidden] { display: none; }
.sc-score-panel { width: min(740px, 100%); max-height: 100%; overflow: auto; padding: 30px; border: 1px solid rgba(145, 239, 240, .3); border-top: 2px solid var(--sc-cyan); background: #071116; box-shadow: 0 24px 80px #0008; }
.sc-score-panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sc-score-eyebrow { margin: 0 0 8px; color: var(--sc-muted); font: 500 12px/1.5 var(--sc-mono); text-transform: uppercase; letter-spacing: .12em; }
.sc-score-panel h2 { margin: 0; font: 400 clamp(30px, 4vw, 44px)/1.15 var(--sc-serif); color: var(--sc-ink); }
.sc-game .sc-score-panel button, .sc-game .sc-score-entry button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--sc-line); background: #102028; color: var(--sc-ink); font: 500 14px/1.4 var(--sc-mono); cursor: pointer; }
.sc-game .sc-score-panel [data-score-close] { font: 400 26px/1 var(--sc-sans); padding: 6px 14px; }
.sc-score-scope { color: #a9c3c6; font: 400 14px/1.5 var(--sc-sans); margin: 14px 0 24px; }
.sc-score-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.sc-game .sc-score-tabs [aria-pressed="true"] { border-color: var(--sc-cyan); color: var(--sc-cyan); background: #153039; box-shadow: inset 0 -2px var(--sc-cyan); }
.sc-score-status { color: #bfd1d3; font: 400 16px/1.5 var(--sc-sans); }
.sc-score-status:empty { display: none; }
.sc-score-scroll { overflow-x: auto; }
.sc-score-panel table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 14px/1.5 var(--sc-sans); }
.sc-score-caption { text-align: left; color: #92adb0; font-size: 12px; margin-bottom: 12px; }
.sc-score-panel th { color: #91afb3; text-transform: uppercase; font: 500 12px/1.5 var(--sc-mono); }
.sc-score-panel th, .sc-score-panel td { padding: 13px 8px; border-bottom: 1px solid var(--sc-line); text-align: left; overflow-wrap: anywhere; }
.sc-score-panel th:first-child { width: 12%; }
.sc-score-panel th:nth-child(2) { width: 42%; }
.sc-score-panel th:nth-child(3) { width: 23%; text-align: right; }
.sc-score-panel th:last-child { width: 23%; text-align: right; }
.sc-score-panel td:nth-child(3) { color: var(--sc-cyan); text-align: right; font: 600 16px/1.5 var(--sc-mono); }
.sc-score-panel td:last-child { color: #a2b9bc; font-size: 12px; text-align: right; }
.sc-score-panel tbody tr:nth-child(-n+3) td:first-child { color: var(--sc-amber); }
.sc-score-panel .is-your-score { background: #14302a; outline: 1px solid #5d998a; outline-offset: -1px; }
.sc-score-panel footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; font: 400 12px/1.5 var(--sc-sans); color: #9ab3b7; }
.sc-score-entry { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 20px 0; border-top: 1px solid var(--sc-line); }
.sc-score-entry label { display: grid; gap: 8px; color: #c7dadd; font: 500 14px/1.4 var(--sc-sans); }
.sc-score-entry input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #436169; background: #071116; color: var(--sc-ink); font: 400 16px/1.4 var(--sc-sans); user-select: text; }
.sc-score-entry p { grid-column: 1 / -1; margin: 0; color: #a6c1c4; font: 400 14px/1.5 var(--sc-sans); }
.sc-game .sc-score-entry button { border-color: #76b3af; color: var(--sc-cyan); }
.sc-game .sc-score-entry button:disabled { opacity: .55; cursor: default; }
.sc-score-panel button:focus-visible, .sc-score-entry input:focus-visible, .sc-score-entry button:focus-visible, .sc-score-open:focus-visible { outline: 2px solid var(--sc-cyan); outline-offset: 3px; }
@media (max-width: 560px) {
  .sc-score-overlay { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .sc-score-panel { padding: 20px 14px; }
  .sc-score-panel th, .sc-score-panel td { padding: 12px 5px; }
  .sc-score-panel footer { flex-wrap: wrap; }
  .sc-score-entry { grid-template-columns: 1fr; }
}

/* Title screen: typography over the live spacecraft view. */
.sc-start-overlay {
  place-items: stretch;
  padding: 0;
  background:
    linear-gradient(0deg, rgba(2, 6, 9, 0.8), transparent 24%, transparent 80%, rgba(2, 6, 9, 0.6)),
    linear-gradient(90deg, rgba(2, 6, 9, 0.97), rgba(3, 8, 11, 0.87) 32%, rgba(3, 8, 11, 0.22) 59%, transparent 79%);
}

.sc-start-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(145, 239, 240, 0.025) 3px 4px);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.38) 68%, transparent);
}

.sc-title-screen {
  position: relative;
  z-index: 1;
  width: min(1380px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 68px) clamp(26px, 6vw, 92px) clamp(24px, 3.6vw, 54px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(28px, 4vh, 54px);
}

.sc-title-screen::after {
  content: '';
  position: absolute;
  top: clamp(28px, 4.5vw, 68px);
  left: clamp(26px, 6vw, 92px);
  right: clamp(26px, 6vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, var(--sc-cyan), rgba(145, 239, 240, 0.12) 42%, transparent 78%);
  transform: translateY(31px);
  pointer-events: none;
}

.sc-title-screen__masthead,
.sc-title-screen__footer,
.sc-title-screen__meta,
.sc-title-screen__brand,
.sc-title-screen__status {
  display: flex;
  align-items: center;
}

.sc-title-screen__masthead {
  justify-content: space-between;
  gap: 24px;
  color: rgba(229, 239, 241, 0.58);
  font: 600 9px/1 var(--sc-mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.sc-title-screen__brand,
.sc-title-screen__status {
  gap: 10px;
}

.sc-title-screen__brand i {
  width: 19px;
  height: 19px;
  border: 1px solid rgba(145, 239, 240, 0.48);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(145, 239, 240, 0.06);
}

.sc-title-screen__status {
  color: var(--sc-green);
}

.sc-title-screen__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-green);
  box-shadow: 0 0 12px rgba(155, 226, 190, 0.75);
}

.sc-title-screen__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
  align-items: center;
  gap: clamp(44px, 8vw, 132px);
}

.sc-title-screen__copy {
  max-width: 750px;
}

.sc-title-screen__copy .sc-kicker {
  margin-bottom: clamp(18px, 2.6vh, 28px);
}

.sc-title-screen h1 {
  margin: 0;
  color: var(--sc-ink);
  font: 400 clamp(60px, 8.4vw, 124px)/0.79 var(--sc-serif);
  letter-spacing: -0.062em;
  text-wrap: balance;
}

.sc-title-screen h1 small {
  display: block;
  margin: 0 0 13px 5px;
  color: rgba(231, 241, 242, 0.55);
  font: 600 clamp(11px, 1.1vw, 15px)/1 var(--sc-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.sc-title-screen h1 span {
  display: block;
  margin-left: clamp(26px, 5vw, 74px);
  color: var(--sc-cyan);
  font-style: italic;
  font-weight: 400;
}

.sc-title-screen__alert {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: min(570px, 100%);
  margin-top: clamp(26px, 4vh, 42px);
  border: 1px solid rgba(241, 137, 127, 0.22);
  border-left: 2px solid var(--sc-red);
  background: linear-gradient(90deg, rgba(241, 137, 127, 0.11), rgba(241, 137, 127, 0.02));
  color: var(--sc-red);
  font: 600 8px/1 var(--sc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sc-title-screen__alert span,
.sc-title-screen__alert strong {
  padding: 12px 14px;
}

.sc-title-screen__alert span {
  border-right: 1px solid rgba(241, 137, 127, 0.18);
  color: rgba(241, 184, 177, 0.58);
}

.sc-title-screen__alert strong {
  font-weight: 600;
}

.sc-title-screen__brief {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(226, 236, 238, 0.68);
  font: 400 clamp(14px, 1.25vw, 18px)/1.65 var(--sc-sans);
}

.sc-title-screen__brief strong {
  color: rgba(245, 249, 249, 0.96);
  font-weight: 500;
}

.sc-title-screen__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vh, 42px);
}

.sc-button--launch {
  min-width: 224px;
  min-height: 62px;
  padding: 0 21px;
  border-color: rgba(145, 239, 240, 0.78);
  background: linear-gradient(110deg, rgba(145, 239, 240, 0.2), rgba(145, 239, 240, 0.07));
  box-shadow: inset 0 0 22px rgba(145, 239, 240, 0.035), 0 12px 35px rgba(0, 0, 0, 0.2);
}

.sc-button--quiet {
  min-height: 62px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(3, 9, 12, 0.28);
  color: rgba(231, 239, 241, 0.62);
}

.sc-button--quiet i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(145, 239, 240, 0.32);
  border-radius: 50%;
  font-size: 11px;
}

.sc-title-target {
  position: relative;
  justify-self: center;
  width: min(31vw, 350px);
  min-width: 250px;
}

.sc-title-target__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(145, 239, 240, 0.11);
  border-radius: 50%;
  background:
    linear-gradient(rgba(145, 239, 240, 0.1), rgba(145, 239, 240, 0.1)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(145, 239, 240, 0.1), rgba(145, 239, 240, 0.1)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, transparent 0 17%, rgba(145, 239, 240, 0.05) 17.4% 17.8%, transparent 18.2% 42%, rgba(145, 239, 240, 0.09) 42.4% 42.8%, transparent 43.2%);
  box-shadow: 0 0 90px rgba(39, 117, 132, 0.07);
}

.sc-title-target__visual::before,
.sc-title-target__visual::after,
.sc-title-target__visual i,
.sc-title-target__visual span {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.sc-title-target__visual::before {
  width: 64%;
  height: 64%;
  border: 1px dashed rgba(145, 239, 240, 0.3);
  animation: sc-title-target-spin 32s linear infinite;
}

.sc-title-target__visual::after {
  width: 37%;
  height: 37%;
  border: 1px solid rgba(145, 239, 240, 0.48);
  box-shadow: 0 0 0 10px rgba(145, 239, 240, 0.025), inset 0 0 32px rgba(145, 239, 240, 0.045);
}

.sc-title-target__visual i {
  width: 9px;
  height: 9px;
  background: var(--sc-green);
  box-shadow: 0 0 16px rgba(155, 226, 190, 0.74);
}

.sc-title-target__visual span {
  width: 8%;
  height: 8%;
  border: 1px solid rgba(234, 244, 245, 0.58);
}

.sc-title-target__readout {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(270px, 84%);
  padding: 14px 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(145, 239, 240, 0.17);
  background: rgba(3, 9, 12, 0.83);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.36);
}

.sc-title-target__readout > span,
.sc-title-target__readout em {
  display: block;
  color: var(--sc-dim);
  font: 500 7px/1.35 var(--sc-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sc-title-target__readout strong {
  display: block;
  margin: 5px 0 7px;
  color: var(--sc-ink);
  font: 500 27px/1 var(--sc-mono);
  letter-spacing: -0.05em;
}

.sc-title-target__readout strong small {
  color: var(--sc-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-title-target__readout em {
  color: var(--sc-green);
  font-style: normal;
  letter-spacing: 0.06em;
}

.sc-title-screen__footer {
  justify-content: space-between;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sc-title-screen__meta {
  gap: clamp(18px, 3vw, 42px);
}

.sc-title-screen__meta span {
  color: var(--sc-dim);
  font: 500 8px/1 var(--sc-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-title-screen__meta b {
  margin-right: 4px;
  color: rgba(235, 243, 244, 0.84);
  font-weight: 500;
}

.sc-title-screen__footer p {
  margin: 0;
  color: rgba(221, 233, 236, 0.25);
  font: 400 7px/1.45 var(--sc-mono);
  letter-spacing: 0.05em;
  text-align: right;
}

.sc-tutorial-overlay {
  background: rgba(2, 6, 9, 0.68);
  backdrop-filter: blur(12px) saturate(0.8);
}

.sc-tutorial {
  width: min(860px, 100%);
  border: 1px solid rgba(145, 239, 240, 0.18);
  border-top-color: rgba(145, 239, 240, 0.72);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(7, 17, 22, 0.985), rgba(3, 10, 14, 0.97));
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.72), inset 0 1px rgba(255, 255, 255, 0.025);
}

.sc-tutorial__section {
  border-radius: 5px;
  background: rgba(145, 239, 240, 0.018);
}

@keyframes sc-title-target-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 820px) {
  .sc-title-screen {
    min-height: 100%;
    padding: 28px 22px 24px;
    gap: 26px;
  }

  .sc-title-screen::after {
    top: 28px;
    left: 22px;
    right: 22px;
  }

  .sc-title-screen__body { grid-template-columns: 1fr; }
  .sc-title-target { display: none; }
  .sc-title-screen h1 { font-size: clamp(58px, 16vw, 92px); }
  .sc-title-screen__copy { max-width: 680px; }
  .sc-title-screen__footer { align-items: flex-end; }
  .sc-title-screen__footer p { max-width: 240px; }
}

@media (max-width: 560px) {
  .sc-start-overlay { overflow: auto; }
  .sc-title-screen { min-height: 100dvh; }
  .sc-title-screen__status { display: none; }
  .sc-title-screen__body { align-items: start; }
  .sc-title-screen__alert { grid-template-columns: 1fr; }
  .sc-title-screen__alert span { padding-bottom: 5px; border-right: 0; }
  .sc-title-screen__alert strong { padding-top: 6px; }
  .sc-title-screen__actions { align-items: stretch; }
  .sc-title-screen__actions .sc-button { width: 100%; }
  .sc-title-screen__footer { display: block; }
  .sc-title-screen__meta { justify-content: space-between; gap: 10px; }
  .sc-title-screen__footer p { margin-top: 14px; max-width: none; text-align: left; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .sc-title-screen { padding-top: 26px; padding-bottom: 23px; gap: 24px; }
  .sc-title-screen::after { top: 26px; }
  .sc-title-screen h1 { font-size: clamp(58px, 8vw, 88px); }
  .sc-title-screen__alert { margin-top: 24px; }
  .sc-title-screen__brief { font-size: 14px; }
  .sc-title-screen__actions { margin-top: 25px; }
  .sc-title-target { width: min(27vw, 280px); min-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-title-target__visual::before { animation: none !important; }
}

.sc-start-stage {
  width: min(620px, 100%);
  margin-top: 26px;
}

.sc-start-stage > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(221, 233, 236, 0.38);
  font: 500 7px/1 var(--sc-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-start-stage > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.sc-start-stage button {
  min-width: 0;
  min-height: 43px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: rgba(2, 8, 11, 0.44);
  color: rgba(229, 239, 241, 0.42);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.sc-start-stage button b,
.sc-start-stage button small {
  display: block;
}

.sc-start-stage button b {
  color: inherit;
  font: 600 9px/1 var(--sc-mono);
  letter-spacing: 0.08em;
}

.sc-start-stage button small {
  margin-top: 5px;
  overflow: hidden;
  font: 500 7px/1 var(--sc-sans);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sc-start-stage button:hover,
.sc-start-stage button:focus-visible {
  border-color: rgba(145, 239, 240, 0.38);
  color: rgba(237, 245, 246, 0.82);
  outline: none;
  transform: translateY(-1px);
}

.sc-start-stage button.is-active {
  border-color: rgba(145, 239, 240, 0.66);
  background: rgba(145, 239, 240, 0.11);
  color: var(--sc-cyan);
  box-shadow: inset 0 -2px rgba(145, 239, 240, 0.45);
}

@media (max-width: 560px) {
  .sc-start-stage > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-height: 720px) and (min-width: 821px) {
  .sc-start-stage { margin-top: 18px; }
  .sc-start-stage button { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  .sc-start-stage button small { margin-top: 3px; }
}

/* Mission opening — flight instruments appear only after the handover. */
.sc-game.is-preflight .sc-hud { visibility: hidden; opacity: 0; }
.sc-start-overlay { overflow-y: auto; touch-action: pan-y; }
.sc-title-screen {
  width: min(1480px, 100%);
  padding: 28px clamp(24px, 5.7vw, 82px) 24px;
  gap: 26px;
}
.sc-title-screen::after { display: none; }
.sc-title-screen__masthead { font-size: 12px; letter-spacing: 0.1em; }
.sc-title-screen__brand { flex-wrap: wrap; }
.sc-title-screen__brand > span { color: var(--sc-dim); }
.sc-title-screen__body { grid-template-columns: minmax(0, 1fr) minmax(230px, 0.7fr); gap: 40px; }
.sc-title-screen__copy .sc-kicker { margin-bottom: 22px; font-size: 12px; letter-spacing: 0.17em; }
.sc-title-screen h1 { font-size: clamp(72px, 8.7vw, 122px); line-height: 0.86; }
.sc-title-screen h1 small { margin: 0 0 14px 4px; font-size: 13px; }
.sc-title-screen h1 span { margin-left: clamp(20px, 3.2vw, 48px); }
.sc-title-screen__alert {
  display: inline-flex;
  width: auto;
  margin-top: 28px;
  font-size: 12px;
  background: rgba(35, 15, 13, 0.56);
}
.sc-title-screen__alert span,
.sc-title-screen__alert strong { padding: 9px 12px; }
.sc-title-screen__alert span { color: var(--sc-red); border-right: 1px solid rgba(241, 137, 127, 0.18); }
.sc-title-screen__brief { font-size: 16px; line-height: 1.7; margin-top: 14px; }
.sc-title-screen__brief strong { font-size: 20px; line-height: 1.8; }
.sc-title-screen__actions { margin-top: 24px; gap: 24px; }
.sc-game .sc-button--launch {
  min-height: 58px;
  min-width: 236px;
  justify-content: space-between;
  font: 600 14px/1.2 var(--sc-mono);
  letter-spacing: 0.06em;
  color: #091719;
  background: #bce5e0;
  border-color: #bce5e0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.sc-game .sc-button--launch:hover { background: #dbf7ee; border-color: #dbf7ee; }
.sc-game .sc-title-link,
.sc-game .sc-title-sound {
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #becdce;
  font: 500 14px/1.4 var(--sc-mono);
  cursor: pointer;
}
.sc-game .sc-title-sound { padding: 10px 14px; border: 1px solid rgba(214, 233, 233, 0.28); white-space: nowrap; }
.sc-game .sc-title-link:hover,
.sc-game .sc-title-sound:hover { color: var(--sc-ink); }
.sc-game .sc-title-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.sc-game .sc-title-skip { display: block; margin-top: 2px; color: #93aaac; font-size: 12px; }
.sc-game .sc-title-link:focus-visible,
.sc-game .sc-title-sound:focus-visible,
.sc-game .sc-button--launch:focus-visible,
.sc-start-stage summary:focus-visible { outline: 2px solid var(--sc-cyan); outline-offset: 5px; }
.sc-start-stage { width: min(490px, 100%); margin-top: 10px; border-top: 1px solid rgba(214, 233, 233, 0.16); }
.sc-start-stage summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 0;
  color: #acbfc1;
  font: 500 12px/1.4 var(--sc-mono);
  list-style: none;
  cursor: pointer;
}
.sc-start-stage summary::-webkit-details-marker { display: none; }
.sc-start-stage summary::before { content: '+'; font-size: 18px; color: var(--sc-cyan); }
.sc-start-stage[open] summary::before { content: '−'; }
.sc-start-stage summary > span { margin-left: auto; color: #82aaaa; font-size: 12px; }
.sc-start-stage > div { padding-bottom: 12px; }
.sc-start-stage button { min-height: 52px; color: #bdcbcc; }
.sc-start-stage button b { font-size: 12px; }
.sc-start-stage button small { font-size: 12px; }
.sc-title-target {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: min(63vh, 530px);
  padding: 12px 0;
  color: rgba(228, 244, 244, 0.8);
  font: 500 12px/1.5 var(--sc-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
  pointer-events: none;
}
.sc-title-target__identity { padding: 8px 0; border-top: 1px solid rgba(198, 233, 232, 0.4); }
.sc-title-target__link { display: flex; align-items: center; gap: 9px; }
.sc-title-target__link i,
.sc-opening__channel i { width: 5px; height: 5px; border-radius: 50%; background: var(--sc-green); box-shadow: 0 0 12px rgba(155, 226, 190, 0.5); }
.sc-title-screen__footer { padding-top: 16px; gap: 20px; }
.sc-title-screen__meta { gap: 24px; }
.sc-title-screen__meta span { color: #9ab0b4; font-size: 12px; letter-spacing: 0.04em; line-height: 1.5; }
.sc-title-screen__footer p { color: #869b9f; font-size: 12px; }

.sc-opening {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 56px);
  background: linear-gradient(0deg, rgba(2, 7, 10, 0.98), rgba(2, 7, 10, 0.87) 27%, transparent 65%, rgba(2, 7, 10, 0.6));
}
.sc-opening { animation: sc-opening-reveal 500ms ease both; }
.sc-opening[hidden] { display: none; }
@keyframes sc-opening-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-opening { animation: none; } }
.sc-opening__header { display: flex; justify-content: space-between; gap: 16px; color: #a0b9bd; font: 500 12px/1.4 var(--sc-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.sc-opening__transmission { width: min(700px, 100%); margin: 0 auto clamp(10px, 4vh, 40px); }
.sc-opening__channel { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--sc-cyan); font: 500 12px/1.5 var(--sc-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sc-opening__channel i { flex: 0 0 5px; }
.sc-opening h2 { margin: 0 0 12px; color: #fff3e1; font: 400 clamp(26px, 3vw, 40px)/1.1 var(--sc-serif); letter-spacing: -0.02em; }
.sc-opening__line { min-height: 3em; margin: 0; color: #d1dee0; font: 400 clamp(18px, 2.1vw, 25px)/1.5 var(--sc-sans); }
.sc-opening__progress { height: 2px; margin-top: 24px; overflow: hidden; background: rgba(193, 224, 226, 0.17); }
.sc-opening__progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--sc-cyan); }
.sc-opening__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.sc-opening__footer > span { color: #8ea5a9; font: 500 12px/1.5 var(--sc-mono); }
.sc-opening__footer .sc-title-link { color: var(--sc-ink); }
.sc-opening__footer .sc-title-link span { margin-left: 12px; color: var(--sc-cyan); }

@media (max-width: 1000px) {
  .sc-title-screen__body { grid-template-columns: 1fr; }
  .sc-title-screen__copy { max-width: 540px; }
  .sc-title-target { display: none; }
  .sc-title-screen__footer { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .sc-game.is-preflight { min-height: 100dvh; }
  .sc-start-overlay { background: linear-gradient(90deg, rgba(2, 6, 9, 0.83), rgba(2, 6, 9, 0.2)), linear-gradient(0deg, #020609 20%, rgba(2, 6, 9, 0.94) 48%, transparent 88%); }
  .sc-title-screen { min-height: 100%; padding: max(18px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom)); gap: 24px; }
  .sc-title-screen__masthead { gap: 12px; font-size: 12px; letter-spacing: 0.05em; }
  .sc-title-screen__brand { gap: 6px; max-width: 205px; }
  .sc-title-screen__brand i { width: 14px; height: 14px; }
  .sc-game .sc-title-sound { font-size: 12px; padding: 10px; }
  .sc-title-screen__body { align-items: center; }
  .sc-title-screen__copy .sc-kicker { margin-bottom: 18px; font-size: 12px; }
  .sc-title-screen h1 { font-size: clamp(68px, 16vw, 96px); }
  .sc-title-screen h1 small { font-size: 12px; }
  .sc-title-screen__alert { margin-top: 22px; }
  .sc-title-screen__brief { font-size: 16px; }
  .sc-title-screen__brief strong { font-size: 18px; }
  .sc-title-screen__actions { flex-wrap: nowrap; gap: 18px; margin-top: 20px; }
  .sc-title-screen__actions .sc-button { width: auto; min-width: 0; flex: 1; padding: 0 16px; font-size: 12px; }
  .sc-title-screen__actions .sc-title-link { flex-shrink: 0; font-size: 12px; }
  .sc-title-screen__footer { display: block; }
  .sc-title-screen__meta { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; }
  .sc-title-screen__meta span { font-size: 12px; }
  .sc-title-screen__footer p { max-width: none; margin-top: 8px; font-size: 12px; text-align: left; }
  .sc-start-stage { margin-top: 8px; }
  .sc-opening { padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
  .sc-opening__header { font-size: 12px; letter-spacing: 0.04em; }
  .sc-opening__channel { font-size: 12px; margin-bottom: 16px; }
}
@media (max-height: 740px) and (min-width: 701px) {
  .sc-title-screen { padding-top: 14px; padding-bottom: 14px; gap: 14px; }
  .sc-title-screen h1 { font-size: clamp(64px, 7.3vw, 90px); }
  .sc-title-screen__copy .sc-kicker { margin-bottom: 16px; }
  .sc-title-screen__alert { margin-top: 20px; }
  .sc-title-screen__brief { font-size: 16px; margin-top: 12px; }
  .sc-title-screen__brief strong { font-size: 18px; }
  .sc-title-screen__actions { margin-top: 16px; }
  .sc-game .sc-button--launch { min-height: 52px; }
  .sc-start-stage { margin-top: 0; }
  .sc-title-screen__footer { padding-top: 12px; }
}

/* Keep the hub exit legible and available on both preflight and debrief. */
.sc-game .sc-game-hub {
  min-height: 44px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  justify-content: center;
  white-space: normal;
}
.sc-results__actions .sc-game-hub { grid-column: 1 / -1; }
/* Compact Lander-style welcome menu; the existing animated artwork stays intact. */
.sc-game .sc-start-overlay { background: rgba(2, 6, 9, .28); }
.sc-game .sc-title-screen { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.sc-game .sc-title-screen__body { display: block; width: min(560px, 100%); margin: auto; }
.sc-game .sc-title-screen__copy { width: 100%; max-width: none; padding: clamp(24px, 4vw, 40px); border: 1px solid #365461; border-radius: 22px; background: rgba(5, 11, 17, .91); box-shadow: 0 16px 64px #0005; text-align: center; }
.sc-game #sc-game-title { margin: 0; padding: 0; border: 0; font: 800 clamp(28px, 4vw, 40px)/1.15 var(--sc-sans); letter-spacing: .07em; text-transform: uppercase; color: #e2f7ff; text-shadow: 0 0 18px #8de9ff30; }
.sc-game #sc-game-title span { display: inline; margin: 0; font: inherit; color: inherit; }
.sc-game .sc-welcome-tagline { margin: 18px 0 0; color: #79d4e4; font: 600 clamp(15px, 2vw, 18px)/1.5 var(--sc-sans); }
.sc-game .sc-welcome-hint { margin: 18px 0 22px; color: #a4afb8; font: 400 15px/1.5 var(--sc-sans); }
.sc-game .sc-welcome-actions { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sc-game .sc-welcome-actions > button { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 54px; flex: none; margin: 0; padding: 14px; border: 1px solid #424952; border-radius: 13px; background: #141920; color: #c3ccd5; font: 800 16px/1.25 var(--sc-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.sc-game .sc-welcome-actions > .sc-button--launch { color: #88eaff; background: #1a303b; border-color: #4a8b9a; }
.sc-game .sc-welcome-actions > button:hover { background: #243844; border-color: #8bd9e7; }
.sc-game .sc-welcome-actions > button:focus-visible, .sc-game .sc-welcome-options summary:focus-visible { outline: 2px solid #88eaff; outline-offset: 3px; }
.sc-game .sc-welcome-options { margin-top: 18px; color: #a4b9c3; font: 400 13px/1.5 var(--sc-sans); }
.sc-game .sc-welcome-options > summary { cursor: pointer; min-height: 32px; padding: 6px; }
.sc-game .sc-welcome-options .sc-title-link, .sc-game .sc-welcome-options .sc-title-sound { margin: 6px 8px; font-size: 13px; }
.sc-game .sc-welcome-options .sc-start-stage { width: 100%; text-align: left; }
@media (max-width: 700px) {
  .sc-title-screen__actions { flex-wrap: wrap; }
  .sc-title-screen__actions .sc-game-hub { flex: 1 0 100%; font-size: 14px; }
}