:root {
  color-scheme: dark;
  --navy: #050c19;
  --mist: #dcece9;
  --cyan: #8be6d5;
  --gold: #f0d6a4;
  --muted: #9baeb8;
  --line: #acdcd728;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  background: var(--navy);
  color: var(--mist);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a, canvas { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button:disabled { cursor: default; opacity: .45; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#hud { position: fixed; inset: 0 0 auto; z-index: 5; display: flex; align-items: flex-start; gap: 20px; padding: calc(12px + var(--safe-top)) max(18px, env(safe-area-inset-right)) 22px max(18px, env(safe-area-inset-left)); background: linear-gradient(#050c19ec, #050c1970 67%, transparent); pointer-events: none; }
.hud-brand { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.arcade-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 11px; color: #b6cbd0; pointer-events: auto; }
.arcade-link:hover { color: var(--cyan); }
.arcade-link span { font-size: 18px; }
.hud-title { font-size: 13px; font-weight: 700; letter-spacing: .13em; line-height: 1.5; }
#sector-name { display: block; color: var(--cyan); font-size: 10px; font-weight: 500; letter-spacing: .05em; }
#objective { align-self: center; flex: 1; max-width: 410px; margin: 0 auto; color: #c7dcd8; text-align: center; font-size: 12px; line-height: 1.5; text-wrap: balance; }
.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: 19px; }
.readout { min-width: 60px; }
.readout-label { display: block; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.readout strong { display: block; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; color: var(--gold); }
.lives-readout { min-width: 25px; }
.lives-readout strong { font-size: 17px; color: var(--cyan); }
.hud-actions { display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.hud-actions button { min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; background: #0c192870; color: #c6dbdd; font-size: 10px; white-space: nowrap; }
.hud-actions button:hover { background: #163140; border-color: var(--line); }
.mini-map-wrap { position: absolute; top: calc(77px + var(--safe-top)); right: max(18px, env(safe-area-inset-right)); width: 172px; padding: 8px; border: 1px solid #acdcd718; border-radius: 7px; background: #050c1970; }
.mini-map-label { display: block; font-size: 7px; letter-spacing: .2em; color: #9abfbf; margin-bottom: 5px; }
#mini-map { display: block; width: 100%; height: auto; }
#message { position: fixed; z-index: 8; top: calc(110px + var(--safe-top)); left: 50%; transform: translateX(-50%); max-width: min(440px, 82vw); text-align: center; font-size: 14px; font-weight: 500; color: var(--gold); padding: 12px 19px; line-height: 1.45; background: #071423dc; border: 1px solid #d5dbaa35; border-radius: 7px; box-shadow: 0 8px 35px #0003; pointer-events: none; }
#message:empty, #message:not(.visible) { display: none; }
#transit-panel { position: fixed; inset: 0; z-index: 9; pointer-events: none; color: #f6ead6; background: linear-gradient(0deg, #02050eb8, transparent 35%, transparent 85%, #02050e75); }
.transit-caption { position: absolute; left: 24px; right: 24px; bottom: max(100px, 15vh); text-align: center; text-shadow: 0 2px 24px #000; }
#transit-stage { margin: 0 0 12px; color: #edcea2; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
#transit-title { font-size: clamp(32px, 5.5vw, 68px); letter-spacing: -.03em; color: #fff2da; }
#transit-route { margin: 12px 0 18px; color: #a7bbc8; font-size: 11px; letter-spacing: .09em; }
#transit-progress { width: 100px; height: 1px; margin: 0 auto; background: #e9dab42b; overflow: hidden; }
#transit-progress span { display: block; height: 100%; background: #f4dca5; transform: scaleX(0); transform-origin: left; }
#skip-transit { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: calc(22px + var(--safe-bottom)); min-height: 44px; padding: 10px 16px; border: 1px solid #eed3a945; border-radius: 4px; background: #06111bc9; color: #e6d9c4; font-size: 12px; pointer-events: auto; }
#skip-transit span { margin-left: 14px; }
#warp-readout { position: absolute; top: calc(76px + var(--safe-top)); left: max(22px, env(safe-area-inset-left)); right: 22px; text-align: left; text-shadow: 0 2px 14px #000; }
.warp-label { display: block; font-size: 9px; letter-spacing: .2em; color: #a0cedb; }
#warp-count { display: block; margin-top: 5px; font-size: clamp(18px, 3vw, 25px); font-weight: 500; color: #ffe2a0; }
#warp-help { margin: 7px 0 0; color: #dcf0f5; font-size: 11px; line-height: 1.45; }
#warp-readout[data-complete="true"] #warp-count { color: #a1f4d7; }
.has-surf .transit-caption { bottom: max(85px, 11vh); }
.has-surf #transit-title { font-size: clamp(24px, 4vw, 38px); }
.has-surf #transit-stage { margin-bottom: 7px; }
.has-surf #transit-route { margin: 8px 0 12px; }
@media (max-height: 500px) and (orientation: landscape) {
  #warp-readout { top: 22px; left: 22px; right: auto; max-width: 240px; }
  #warp-help { max-width: 155px; font-size: 10px; }
  .has-surf .transit-caption { bottom: 22px; left: 155px; right: 155px; }
  .has-surf #transit-title { font-size: 22px; }
  .has-surf #transit-stage { margin-bottom: 4px; }
  .has-surf #transit-route { margin: 4px 0 8px; font-size: 10px; }
}
body.in-transit #controls, body.in-transit #message, body.in-transit .mini-map-wrap, body.in-transit .hud-brand, body.in-transit #objective, body.in-transit .readout, body.in-transit #map-button, body.in-transit #fullscreen-button { display: none; }
body.in-transit #hud { justify-content: flex-end; z-index: 10; background: none; }
body.in-transit .hud-actions button { background: #06111b99; }
@media (max-height: 500px) and (orientation: landscape) {
  .transit-caption { bottom: 35px; left: 150px; right: 150px; }
  #transit-title { font-size: 32px; }
  #transit-stage { margin-bottom: 6px; font-size: 9px; }
  #transit-route { margin: 7px 0 12px; }
}
.overlay { position: fixed; inset: 0; z-index: 20; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.menu-overlay { display: flex; align-items: center; min-height: 100%; isolation: isolate; padding: calc(86px + var(--safe-top)) max(7vw, env(safe-area-inset-right)) calc(48px + var(--safe-bottom)); background: radial-gradient(ellipse at 75% 32%, #25576a33 0, transparent 52%), linear-gradient(90deg, #050c19 2%, #07101def 30%, #06142180 64%, #071321a3); }
.menu-overlay::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(0deg, #050c19 0, transparent 28%, transparent 85%, #050c19a8); }
.menu-back { position: absolute; top: calc(18px + var(--safe-top)); left: max(7vw, env(safe-area-inset-left)); }
.menu-content { position: relative; max-width: 535px; z-index: 1; }
.eyebrow { margin: 0 0 24px; color: var(--cyan); font-size: 9px; font-weight: 600; letter-spacing: .25em; line-height: 1.8; }
.signal-dot { display: inline-block; width: 5px; height: 5px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px #8be6d5a8; }
h1 { margin: 0; color: var(--mist); font-family: Georgia, "Times New Roman", serif; font-size: clamp(72px, 8.2vw, 122px); font-weight: 400; line-height: .96; letter-spacing: -.055em; }
.title-star { display: inline-block; margin-left: 20px; vertical-align: top; padding-top: 12px; font-family: Georgia, serif; font-size: .28em; color: var(--gold); }
.menu-subtitle { margin: 22px 0 18px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.35vw, 33px); line-height: 1.2; }
.menu-pitch { max-width: 395px; color: #b8cad0; font-size: 14px; line-height: 1.8; margin: 0; text-wrap: pretty; }
.voyage-facts { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 21px 0 28px; color: #a2bdc2; font-size: 10px; }
.voyage-facts span::before { content: "·"; color: var(--cyan); margin-right: 8px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 54px; border: 1px solid #b6f1dc; border-radius: 4px; padding: 14px 22px; background: var(--cyan); color: #0b262d; font-weight: 650; font-size: 14px; box-shadow: 0 4px 26px #75e3c61a; transition: background .16s, transform .16s; }
.primary-button:hover { background: #b8f2e6; transform: translateY(-1px); }
.primary-button:active { transform: translateY(1px); }
.primary-button > span { font-size: 22px; font-weight: 400; }
#play-button { width: 265px; }
.motion-controls { margin-top: 14px; }
.menu-motion { max-width: 350px; }
.motion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.motion-button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: #0c1928b0; color: #c6dbdd; font-size: 11px; }
.motion-button:hover { background: #163140; }
.motion-button[aria-pressed="true"] { color: var(--cyan); border-color: #8be6d570; }
.motion-status { margin: 7px 0 0; color: #98b0ba; font-size: 10px; line-height: 1.6; }
.pause-motion { margin: -9px 0 22px; }
.flight-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 25px; margin-top: 34px; padding-top: 25px; border-top: 1px solid var(--line); max-width: 460px; }
.flight-guide > div { display: flex; gap: 11px; align-items: flex-start; }
.guide-symbol { flex: 0 0 29px; color: var(--gold); font-size: 20px; line-height: 1.45; font-family: Georgia, serif; }
.flight-guide p { margin: 0; color: #98b0ba; font-size: 10px; line-height: 1.6; }
.flight-guide strong { display: block; font-size: 11px; color: #d1e3e0; font-weight: 550; }
.keyboard-hint { margin: 24px 0 0; color: #8299a6; font-size: 9px; line-height: 1.8; }
kbd { font: inherit; font-size: 9px; color: #adc6c8; border: 1px solid #c1d8d72c; border-radius: 3px; padding: 2px 4px; }
.keyboard-hint span { margin: 0 6px; color: #637c89; }
.upgrade-key { display: inline-block; margin-right: 8px; vertical-align: 2px; }
.desktop-key { margin-left: 5px; }
.menu-coordinate { position: absolute; right: max(6vw, env(safe-area-inset-right)); bottom: calc(33px + var(--safe-bottom)); text-align: right; font-size: 9px; letter-spacing: .2em; line-height: 1.9; color: #b2d0d1; }
.menu-coordinate span { color: #6e959f; font-size: 8px; }
.menu-sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(circle at 76% 40%, #276c823f, transparent 35%), radial-gradient(ellipse at 85% 88%, #40406940, transparent 60%), #050c19; }
.menu-sky { background-image: url("./assets/deep-space.webp"); background-position: center; background-size: cover; }
.menu-sky::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle at 10% 15%, #e0f8ed 0 1px, transparent 1.5px), radial-gradient(circle at 80% 34%, #aed5da 0 1px, transparent 1.5px), radial-gradient(circle at 54% 78%, #e0f8ed 0 1px, transparent 1.5px), radial-gradient(circle at 32% 59%, #aed5da 0 .5px, transparent 1px); background-size: 197px 187px, 311px 231px, 457px 369px, 137px 123px; }
.menu-planet { position: absolute; width: min(43vw, 640px); aspect-ratio: 1; border-radius: 50%; right: 1.5vw; top: 19%; background-image: url("./assets/celestial-sprites.webp"); background-size: 287.615%; background-position: .611% 15.281%; background-repeat: no-repeat; filter: drop-shadow(0 0 48px #39748430); }
.menu-orbit { position: absolute; z-index: 1; width: 71vw; height: 21vw; right: -14vw; top: 39%; border: 1px solid #b6d9c561; border-radius: 50%; transform: rotate(-28deg); box-shadow: 0 0 22px #b6d9c515; }
.orbit-two { width: 80vw; height: 28vw; right: -18vw; top: 34%; opacity: .38; }
.menu-moon { position: absolute; width: 4vw; min-width: 24px; aspect-ratio: 1; right: 37vw; top: 27%; border-radius: 50%; background: radial-gradient(circle at 27% 25%, #d5d4b4, #505b64 48%, #0c1b2e 80%); box-shadow: 0 0 23px #cce8d41a; }
.panel-overlay { display: grid; place-items: center; padding: calc(24px + var(--safe-top)) max(20px, env(safe-area-inset-right)) calc(24px + var(--safe-bottom)) max(20px, env(safe-area-inset-left)); background: #030a17d9; backdrop-filter: blur(14px); }
.dialog-card { width: min(100%, 470px); padding: 38px; border: 1px solid #a1dacf35; border-radius: 10px; background: linear-gradient(145deg, #132432ee, #081421f5); box-shadow: 0 20px 120px #0005; }
.dialog-card .eyebrow { margin-bottom: 12px; }
h2 { margin: 0; font: 400 clamp(28px, 4vw, 39px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; color: var(--mist); }
.panel-description { margin: 18px 0 29px; color: #aabfc6; font-size: 13px; line-height: 1.8; }
.dialog-card .primary-button { width: 100%; }
.secondary-button { min-height: 46px; width: 100%; margin-top: 10px; padding: 12px; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: #c6dcda; font-size: 12px; }
.secondary-button:hover { background: #8be6d510; }
.quiet-link { display: block; min-height: 44px; width: max-content; margin: 20px auto 0; padding: 13px 6px; font-size: 11px; color: #9bb8bc; }
.quiet-link:hover { color: var(--cyan); }
.upgrade-card { width: min(100%, 860px); }
.upgrade-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.upgrade-options button { position: relative; min-height: 166px; padding: 24px 20px; text-align: left; background: #102330; border: 1px solid #8be6d52e; border-radius: 6px; font-size: 13px; line-height: 1.6; }
.upgrade-options button:hover, .upgrade-options button:focus-visible { border-color: var(--cyan); background: #16343f; }
.upgrade-options button strong, .upgrade-options button h3 { display: block; color: var(--gold); font-size: 16px; margin: 0 0 12px; line-height: 1.3; }
.upgrade-options button small, .upgrade-options button p, .upgrade-options button span { display: block; color: #aac5c7; font-size: 12px; line-height: 1.6; margin: 0; }
.panel-footnote { color: #7e9ca8; font-size: 10px; margin: 22px 0 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 25px; }
.icon-button { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #ffffff08; border: 1px solid var(--line); color: #aac6c9; }
.map-overlay { background: linear-gradient(90deg, transparent 55%, #030b1840); backdrop-filter: none; }
.route-card { position: absolute; right: max(26px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: 330px; max-height: calc(100% - 100px - var(--safe-top) - var(--safe-bottom)); padding: 26px; overflow: auto; background: linear-gradient(145deg, #112533eb, #06111ded); backdrop-filter: blur(14px); border-color: #b1dcd330; }
.route-card h2 { font-size: 33px; }
.route-card .eyebrow { margin-bottom: 9px; font-size: 8px; letter-spacing: .18em; }
.route-card .panel-heading { gap: 8px; margin-bottom: 22px; }
#map-progress { margin: 10px 0 0; color: #91adae; font-size: 11px; }
.map-footnote { margin: 20px 0 0; color: #7d999e; font-size: 10px; line-height: 1.5; }
body.playing.showing-map #controls, body.showing-map #message, body.showing-map .mini-map-wrap, body.showing-map #objective, body.showing-map .hud-actions { display: none; }
body.showing-map #hud { justify-content: space-between; background: linear-gradient(#050c19c0, transparent); }
.route-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.route-list > * { list-style: none; position: relative; padding: 14px 15px 14px 30px; border-left: 1px solid #8be6d52c; color: #9cb4c1; font-size: 13px; line-height: 1.5; }
.route-list > *::before { content: ""; position: absolute; top: 22px; left: -4px; width: 7px; height: 7px; background: var(--route-color, #365460); opacity: .5; border-radius: 50%; box-shadow: 0 0 0 4px #0f1d2b; }
.route-list .current { color: var(--cyan); background: linear-gradient(90deg, #8be6d50a, transparent); }
.route-list .current::before, .route-list .complete::before, .route-list .done::before { background: var(--route-color, var(--cyan)); opacity: 1; box-shadow: 0 0 12px var(--route-color, #8be6d555); }
.route-list strong { color: var(--mist); }
.route-list small, .route-list span { display: block; margin-top: 3px; color: #809da9; font-size: 11px; }
#controls { position: fixed; z-index: 7; bottom: calc(16px + var(--safe-bottom)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: none; align-items: flex-end; justify-content: space-between; gap: 15px; pointer-events: none; }
body.playing #controls { display: flex; }
#controls button { touch-action: none; user-select: none; -webkit-user-select: none; pointer-events: auto; }
.flipper-button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(26vw, 220px); min-height: 60px; padding: 10px 20px; border: 1px solid #8be6d548; border-radius: 9px; background: linear-gradient(#122635e0, #0c1c2aea); color: #cee8e3; font-size: 9px; font-weight: 600; letter-spacing: .12em; box-shadow: 0 8px 30px #0004; }
.flipper-arrow { color: var(--cyan); font-size: 26px; line-height: 1; }
.flipper-button:active, .flipper-button.active, .flipper-button.held { background: #8be6d5; border-color: #cefff0; color: #0b2630; box-shadow: 0 0 28px #8be6d543; }
.flipper-button:active .flipper-arrow, .flipper-button.active .flipper-arrow, .flipper-button.held .flipper-arrow { color: #0c302f; }
.flipper-button.scoop-ready { border-color: #f2cf88; background: linear-gradient(#453728ef, #1b2532ed); color: #fff0c6; box-shadow: 0 0 22px #ffd38632; }
.flipper-button.scoop-ready .flipper-arrow { color: #ffe0a0; }
.flipper-button.shot-ready { border-color: #ffe3a4; color: #fff1cf; background: linear-gradient(#4b3d28ed, #182732ed); box-shadow: 0 0 24px #ebbd5938; }
.flipper-button.shot-ready .flipper-arrow { color: #ffe3a4; }
.center-controls { position: relative; display: flex; gap: 8px; }
.center-controls button { min-height: 49px; min-width: 92px; padding: 9px 16px; border-radius: 8px; background: #102736e6; border: 1px solid #8be6d548; font-size: 12px; font-weight: 550; }
.center-controls button > span { margin-right: 7px; font-size: 18px; vertical-align: -1px; }
.center-controls .launch-button { position: relative; overflow: hidden; color: var(--gold); border-color: #f0d6a44d; }
.center-controls .launch-button::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--charge, 0) * 100%); height: 3px; background: var(--gold); box-shadow: 0 0 12px #f0d6a470; pointer-events: none; }
.center-controls .pulse-button { color: var(--cyan); }
.center-controls .field-button { color: #cab7fa; border-color: #b8a3f45c; }
.center-controls .field-button[aria-pressed="true"] { color: #101b2b; background: #cbb4ff; }
.control-readouts { position: absolute; bottom: calc(100% + 24px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 4px; width: max-content; max-width: 90vw; pointer-events: none; }
#field-status, #rally-status { padding: 5px 9px; border-radius: 5px; background: #061321ed; font-size: 10px; color: #b6c9cf; text-align: center; line-height: 1.3; }
#rally-status { border: 1px solid #acdcd72b; color: #d4e9e1; font-variant-numeric: tabular-nums; }
#rally-status[data-state="powered"] { color: #ffe3a4; border-color: #eac07870; }
#rally-status[data-state="return"] { color: #fff0c9; border-color: #eac07870; }
#field-status[data-active="true"] { color: #ddcfff; }
.field-guide { max-width: 450px; margin: 20px 0 0; color: #98b0ba; font-size: 11px; line-height: 1.7; }
.field-guide strong { color: #cab7fa; font-weight: 500; }
#field-placement { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
#field-aim-help { position: absolute; top: calc(101px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(420px, 88vw); margin: 0; padding: 10px 14px; border: 1px solid #cbb4ff55; border-radius: 6px; background: #071423ed; color: #eee6ff; font-size: 12px; line-height: 1.5; text-align: center; }
.field-tools { position: absolute; bottom: calc(92px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100vw - 20px); padding: 7px; border: 1px solid #cbb4ff55; border-radius: 8px; background: #081522f5; pointer-events: auto; }
.field-tools button { min-width: 48px; min-height: 44px; padding: 8px 13px; border: 1px solid #8be6d533; border-radius: 4px; background: #122736; color: #cce3e1; font-size: 11px; touch-action: manipulation; }
.field-kinds { display: flex; gap: 3px; }
#field-pull[aria-pressed="true"] { background: #8be6d5; color: #08252c; }
#field-push[aria-pressed="true"] { background: #cbb4ff; color: #201732; }
#deploy-field { color: #f0d6a4; }
.aiming-field .control-readouts, .aiming-field #message { visibility: hidden; }
.aiming-field #view { cursor: crosshair; }
.aiming-field .flipper-button, .aiming-field #pulse-button { opacity: .4; }
.center-controls button:active { background: #23495c; }
@media (min-width: 1500px) { .menu-content { margin-left: 4vw; }.menu-planet { right: 6vw; }.menu-pitch { font-size: 16px; max-width: 460px; }.flight-guide p { font-size: 12px; }.flight-guide strong { font-size: 13px; } }
@media (max-width: 1100px) { #hud { gap: 12px; }.hud-brand { gap: 10px; }.hud-right { gap: 12px; }.hud-actions button { padding: 8px; }#objective { font-size: 10px; max-width: 240px; }#fullscreen-button { width: 44px; padding: 8px; font-size: 0; }#fullscreen-button::after { content: "⛶"; font-size: 19px; }.mini-map-wrap { width: 145px; }.menu-content { max-width: 490px; }.menu-planet { right: -10vw; top: 27%; width: 58vw; }.menu-orbit { right: -24vw; }.menu-coordinate { right: 5vw; } }
@media (max-width: 760px) {
  #hud { flex-wrap: wrap; align-items: center; gap: 5px 12px; padding: calc(7px + var(--safe-top)) 12px 24px; }
  .hud-brand { flex: 1; gap: 9px; }.hud-brand .arcade-link { font-size: 0; min-width: 22px; gap: 0; }.arcade-link { font-size: 10px; }.hud-title { font-size: 11px; }#sector-name { font-size: 9px; }
  .hud-right { gap: 10px; }.readout { min-width: 47px; }.readout strong { font-size: 17px; }.readout-label { font-size: 7px; }.lives-readout { min-width: 20px; }.lives-readout strong { font-size: 14px; }
  .hud-actions { gap: 2px; }.hud-actions button { padding: 8px; font-size: 9px; }#sound-button { position: absolute; right: 12px; top: calc(51px + var(--safe-top)); min-height: 44px; padding: 8px; font-size: 9px; }
  #objective { order: 3; flex: 1 0 100%; max-width: none; margin: 0; padding: 4px 76px 0 0; text-align: left; font-size: 10px; }.mini-map-wrap { display: none; }#message { top: calc(99px + var(--safe-top)); font-size: 12px; }
  .menu-overlay { align-items: flex-start; padding: calc(93px + var(--safe-top)) 7vw calc(35px + var(--safe-bottom)); background: linear-gradient(90deg, #050c19e0, #07101dbf), linear-gradient(0deg, #050c19, transparent); }
  .menu-content { max-width: 480px; }.menu-back { left: 7vw; }.menu-content .eyebrow { font-size: 8px; margin-bottom: 20px; }h1 { font-size: clamp(72px, 15vw, 100px); }.title-star { margin-left: 15px; }.menu-subtitle { font-size: 28px; margin-top: 19px; }.menu-pitch { font-size: 13px; max-width: 340px; }.voyage-facts { font-size: 9px; margin: 20px 0 25px; }
  .menu-planet { width: 96vw; right: -39vw; top: 5%; opacity: .7; }.menu-orbit { width: 143vw; height: 52vw; right: -71vw; top: 19%; }.orbit-two { width: 163vw; height: 65vw; top: 15%; }.menu-moon { width: 8vw; right: 18vw; top: 8%; }.menu-coordinate { display: none; }
  .flight-guide { gap: 18px 16px; margin-top: 28px; padding-top: 23px; max-width: 390px; }.flight-guide > div { gap: 9px; }.guide-symbol { flex-basis: 23px; }.flight-guide p { font-size: 10px; }
  .dialog-card { padding: 27px; }.upgrade-options { grid-template-columns: 1fr; }.upgrade-options button { min-height: 94px; padding: 18px; }.upgrade-options button strong, .upgrade-options button h3 { font-size: 15px; margin-bottom: 7px; }.panel-description { margin-bottom: 20px; }
  #controls { left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); gap: 9px; }.flipper-button { width: 26vw; min-height: 61px; padding: 10px 11px; gap: 5px; font-size: 7px; letter-spacing: .06em; }.flipper-button kbd { display: none; }.flipper-arrow { font-size: 22px; }.center-controls { gap: 5px; }.center-controls button { min-width: 58px; min-height: 48px; padding: 8px 9px; font-size: 10px; }.center-controls button > span { display: block; margin: 0 0 2px; font-size: 17px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  #hud { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto; gap: 4px 12px; padding-bottom: 17px; }
  .hud-brand { grid-column: 1; grid-row: 1; min-width: 0; }.hud-right { display: contents; }
  .hud-right > .readout:not(.lives-readout) { grid-column: 2; grid-row: 1; }.lives-readout { grid-column: 3; grid-row: 1; }
  .hud-title { white-space: nowrap; }#sector-name { white-space: normal; }
  .hud-actions { grid-row: 2; grid-column: 1 / -1; justify-self: end; gap: 2px; }
  #sound-button { position: static; min-height: 44px; }
  #objective { grid-row: 2; grid-column: 1 / -1; margin: 0; padding: 0 210px 0 0; line-height: 1.4; font-size: 9px; }
  #message { top: calc(110px + var(--safe-top)); }
  .map-overlay { background: linear-gradient(0deg, #030b1850, transparent 45%); }
  .route-card { top: auto; bottom: calc(14px + var(--safe-bottom)); right: 14px; left: 14px; transform: none; width: auto; max-height: 260px; padding: 16px 20px; }
  .route-card .eyebrow, .map-footnote { display: none; }
  .route-card h2 { font-size: 27px; }
  .route-card .panel-heading { align-items: center; margin-bottom: 10px; }
  #map-progress { font-size: 10px; margin-top: 5px; }
  .route-list { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .route-list > * { padding: 8px 0 8px 13px; font-size: 11px; }
  .route-list > *::before { top: 14px; width: 6px; height: 6px; }
  .route-list span { margin-top: 2px; font-size: 9px; }
}
@media (max-width: 390px) { .hud-title { font-size: 10px; }.hud-brand { gap: 8px; }.hud-right { gap: 7px; }.hud-actions button { padding: 8px 6px; }.menu-overlay { padding-left: 6vw; padding-right: 6vw; }.menu-pitch { font-size: 12px; }#controls { left: 8px; right: 8px; gap: 5px; }.flipper-button { width: 24vw; }.flipper-button > span:not(.flipper-arrow) { max-width: 41px; line-height: 1.45; }.center-controls button { min-width: 57px; } }
@media (orientation: landscape) and (max-height: 620px) {
  #hud { flex-wrap: nowrap; gap: 14px; padding: calc(5px + var(--safe-top)) max(13px, env(safe-area-inset-right)) 20px max(13px, env(safe-area-inset-left)); }.hud-brand { flex: 0 0 auto; }.hud-title { font-size: 10px; }#objective { order: 0; flex: 1; max-width: 250px; margin: 0 auto; padding: 0; font-size: 9px; text-align: center; }.hud-right { gap: 10px; }#sound-button { position: static; min-height: 44px; }.hud-actions button { padding: 8px; }.mini-map-wrap { display: none; }#message { top: calc(64px + var(--safe-top)); font-size: 11px; padding: 8px 15px; }
  .menu-overlay { padding: calc(72px + var(--safe-top)) 7vw calc(24px + var(--safe-bottom)); align-items: flex-start; }.menu-content { width: 100%; max-width: 780px; display: grid; grid-template-columns: minmax(250px, 1.1fr) minmax(220px, 1fr); column-gap: 7vw; }.menu-content .eyebrow { grid-column: 1; margin-bottom: 14px; }h1 { grid-column: 1; font-size: clamp(61px, 9vw, 85px); }.menu-subtitle { grid-column: 1; margin: 12px 0; font-size: 25px; }.menu-pitch { grid-column: 1; font-size: 11px; line-height: 1.65; }.voyage-facts { grid-column: 1; font-size: 8px; gap: 5px 11px; margin: 15px 0 19px; }#play-button { grid-column: 1; width: min(100%, 240px); min-height: 47px; padding: 10px 18px; font-size: 12px; }.flight-guide { grid-column: 2; grid-row: 1 / span 5; grid-template-columns: 1fr; margin: 0; padding: 3px 0 0 20px; border-top: 0; border-left: 1px solid var(--line); gap: 16px; align-content: center; }.flight-guide p { font-size: 10px; }.keyboard-hint { grid-column: 1 / -1; margin-top: 19px; }.menu-planet { width: 58vw; top: 8%; right: -4vw; opacity: .5; }.menu-orbit { width: 80vw; height: 26vw; top: 34%; right: -13vw; }.menu-coordinate { display: none; }.menu-back { top: calc(9px + var(--safe-top)); }
  #controls { bottom: calc(10px + var(--safe-bottom)); left: max(13px, env(safe-area-inset-left)); right: max(13px, env(safe-area-inset-right)); }.flipper-button { min-height: 49px; width: min(23vw, 185px); font-size: 8px; }.center-controls button { min-height: 44px; min-width: 81px; padding: 8px 12px; }.center-controls button > span { display: inline; margin-right: 5px; }.panel-overlay { padding-top: calc(14px + var(--safe-top)); padding-bottom: calc(14px + var(--safe-bottom)); }.dialog-card { padding: 25px; }.upgrade-card { width: min(100%, 850px); }.upgrade-options { grid-template-columns: repeat(3, 1fr); }.upgrade-options button { min-height: 120px; padding: 16px; }.panel-footnote { margin-top: 16px; }
  .route-card { width: 260px; right: 20px; top: 50%; max-height: calc(100% - 28px - var(--safe-top) - var(--safe-bottom)); padding: 18px 20px; }
  body.showing-map .hud-right { visibility: hidden; }
  .route-card h2 { font-size: 27px; }.route-card .eyebrow, .map-footnote { display: none; }.route-card .panel-heading { margin-bottom: 7px; gap: 8px; }#map-progress { margin-top: 5px; font-size: 10px; }
  .route-list > * { padding: 7px 0 7px 16px; font-size: 11px; }.route-list > *::before { top: 14px; }.route-list span { margin-top: 1px; font-size: 9px; }
}
@media (pointer: coarse) { .keyboard-hint, .flipper-button kbd, .desktop-key, .upgrade-key { display: none; } }
@media (orientation: landscape) and (max-height: 620px) { .menu-motion { grid-column: 1; }.pause-motion { margin-bottom: 15px; } }
@media (max-width: 760px) { #field-status { font-size: 9px; }.center-controls .field-button { min-width: 60px; }.field-tools { gap: 5px; padding: 5px; }.field-tools button { padding: 8px 10px; } }
@media (orientation: landscape) and (max-height: 620px) { .field-guide { grid-column: 1 / -1; font-size: 10px; max-width: none; margin-top: 16px; }#field-aim-help { top: calc(61px + var(--safe-top)); font-size: 11px; padding: 7px 12px; }.field-tools { bottom: calc(74px + var(--safe-bottom)); } }
/* The menu leads with Start voyage. The guides fold away under How to play. */
.how-to-play { max-width: 460px; margin-top: 24px; border-top: 1px solid var(--line); }
.how-to-play summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: #c7dcd8; font-size: 12px; letter-spacing: .04em; list-style: none; }
.how-to-play summary::-webkit-details-marker { display: none; }
.how-to-play summary::after { content: "+"; margin-left: 10px; color: var(--gold); font-size: 17px; }
.how-to-play[open] summary::after { content: "−"; }
.how-to-play .flight-guide { margin-top: 4px; padding-top: 0; border-top: 0; }
.how-to-play .field-guide { margin-top: 16px; }
@media (orientation: landscape) and (max-height: 620px) {
  .how-to-play { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; padding-left: 20px; border-top: 0; border-left: 1px solid var(--line); }
  .how-to-play .flight-guide { grid-template-columns: 1fr; padding: 0; border-left: 0; }
}
/* One line at the dock says what to do. */
#objective:empty { visibility: hidden; }
#rally-status[data-state="ready"] { padding: 7px 12px; border-color: #f0d6a466; color: var(--gold); font-size: 12px; }
@media (orientation: landscape) and (max-height: 500px) {
  .control-readouts { bottom: calc(100% + 6px); }
  #rally-status[data-state="ready"] { padding: 5px 10px; font-size: 11px; }
}
body.first-launch .center-controls .launch-button { animation: launch-ready 1.2s ease-in-out infinite; }
@keyframes launch-ready { 50% { border-color: var(--gold); box-shadow: 0 0 0 5px #f0d6a42e, 0 0 26px #f0d6a455; } }
/* The pad for the flipper the ball will reach. FLIP NOW uses .shot-ready. */
.flipper-button.incoming { border-color: #9debdcb5; color: #e5fff7; background: linear-gradient(#173b42ed, #0e2331ed); box-shadow: 0 0 20px #8be6d533; }
.flipper-button.incoming .flipper-arrow { color: #b8fff0; }
/* Today's voyage is the same for everyone. A text button picks a random one. */
.voyage-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 10px 0 0; color: #a9c0c6; font-size: 11px; }
.text-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--cyan); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: #b8f2e6; }
@media (orientation: landscape) and (max-height: 620px) { .voyage-choice { grid-column: 1; margin-top: 4px; } }
/* The share line, ready to copy. */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
#share-line { flex: 1 1 200px; margin: 0; padding: 10px 12px; border: 1px dashed #a1dacf45; border-radius: 6px; color: #e6f2ef; font-size: 13px; font-variant-numeric: tabular-nums; user-select: all; }
.share-row .secondary-button { flex: 0 0 auto; width: auto; margin: 0; padding: 12px 16px; }
/* The end card: how far the voyage went and how close it came to the best. */
.end-worlds { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.end-worlds li { flex: 0 0 28px; height: 8px; border-radius: 4px; background: #253744; }
.end-worlds li.cleared { background: var(--world-color, var(--cyan)); box-shadow: 0 0 10px color-mix(in srgb, var(--world-color, #8be6d5) 55%, transparent); }
.end-worlds li.reached { background: linear-gradient(90deg, var(--world-color, var(--cyan)) 45%, #253744 45%); }
.end-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 16px 0 0; }
.end-score strong { color: var(--gold); font: 400 42px/1 Georgia, "Times New Roman", serif; font-variant-numeric: tabular-nums; }
#end-best { color: #c7dcd8; font-size: 14px; }
#end-best[data-result="new"] { color: var(--cyan); font-weight: 650; }
.end-score + .panel-description { margin-top: 10px; }
/* On a short landscape screen, the result sits beside the actions, so the card fits without a scroll. */
@media (orientation: landscape) and (max-height: 620px) {
  .end-card { width: min(100%, 780px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .end-card .panel-description { margin-bottom: 0; }
  .end-card .quiet-link { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }