:root {
  font-family:Inter,Arial,sans-serif;
  color:#eeeef0;
  background:#000;
  font-synthesis:none;
  --lime:#bdf77d;
  --muted:#808791;
  --border:#2b3039;
}
* { box-sizing:border-box; }
body { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,select:focus-visible,#game:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:4px;
}
.app { max-width:1512px; margin:auto; padding:0 52px; }
.header {
  min-height:92px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:24px;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  color:#f8f7ee;
  text-decoration:none;
  font-size:25px;
  font-weight:900;
  letter-spacing:-1px;
}
.brand-accent { color:var(--lime); }
.brand small { display:block; font-size:8px; letter-spacing:2px; color:#9ca09f; margin-top:5px; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.header-controls { display:flex; gap:13px; align-items:center; }
.live-dot {
  width:6px;
  height:6px;
  background:var(--lime);
  display:inline-block;
  border-radius:50%;
  box-shadow:0 0 8px #bdf77d55;
}
.sector { font:10px monospace; letter-spacing:1px; color:#b7b9ba; margin-right:23px; }
.sector span { color:#525864; padding:0 7px; }
.icon-button { width:34px; height:34px; border:1px solid #363c44; background:none; color:#adb3b8; border-radius:50%; position:relative; }
.sound-slash { position:absolute; left:16px; font-size:18px; color:#c6c8c6; }
.dev-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; font:9px monospace; letter-spacing:.8px; color:#a9b7c5; }
.dev-controls label { display:flex; align-items:center; gap:8px; }
.dev-controls [hidden] { display:none; }
.dev-controls select,.design-button { color:#e1edda; background:#26322b; border:1px solid #526245; border-radius:5px; }
.dev-controls select { width:154px; font:11px monospace; padding:6px; }
.dev-controls select:disabled,.design-button:disabled { opacity:.65; }
.design-button { padding:8px 10px; font:10px monospace; white-space:nowrap; }
.design-button[aria-pressed=true] { color:#10141b; background:var(--lime); border-color:var(--lime); }
main { padding-top:12px; }
.level-heading { margin:0 24px 12px; font:9px monospace; letter-spacing:.8px; color:#a9b7c5; }
.eyebrow { font:600 10px monospace; letter-spacing:2.2px; color:var(--lime); margin:0 0 9px; }
.arcade { border:1px solid #454252; border-radius:16px; overflow:hidden; box-shadow:0 15px 55px #0003; }
.dashboard {
  position:absolute;
  inset:16px 28px auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;
  gap:20px;
  pointer-events:none;
}
.stat-label { font:9px monospace; letter-spacing:1.4px; color:#9299a4; }
.bank-stat { display:flex; flex-direction:column; gap:2px; }
.bank-stat strong { font:27px monospace; letter-spacing:-1px; }
.hud-center { display:flex; align-items:center; justify-content:center; gap:48px; }
.hud-center .stat,.fuel-readout { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.hud-center .stat strong { font:18px monospace; letter-spacing:-1px; }
.tip-stat strong { color:var(--lime); }
.tip-stat.negative strong { color:#ff8499; }
.stat-unit { font-size:16px; color:#66717a; }
.hud-center .lives-stat strong { color:#c3adee; letter-spacing:0; }
.fuel-readout meter { appearance:none; width:80px; height:14px; border:0; border-radius:9px; background:#ffffff18; overflow:hidden; }
.fuel-readout meter::-webkit-meter-bar { height:100%; background:#ffffff18; border:0; border-radius:9px; }
.fuel-readout meter::-webkit-meter-optimum-value { background:var(--lime); border-radius:9px; }
.fuel-readout meter::-webkit-meter-suboptimum-value,.fuel-readout meter::-webkit-meter-even-less-good-value { background:#ff8499; border-radius:9px; }
.fuel-readout meter::-moz-meter-bar { background:var(--lime); border-radius:9px; }
.fuel-readout.low-fuel meter::-moz-meter-bar { background:#ff8499; }
.fuel-readout.low-fuel .stat-label { color:#ff8499; }
.pause-button { justify-self:end; background:#171c3380; border:1px solid #5b5c7755; border-radius:5px; width:31px; height:31px; color:#bebfd9; font-size:15px; pointer-events:auto; }
.world-wrap {
  aspect-ratio:1280/760;
  position:relative;
  background:#191b39;
  overflow:hidden;
}

#game {
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
}

.sub-hud {
  position:absolute;
  bottom:12px;
  left:22px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:7px 10px;
  border-radius:5px;
  background:#0009;
  pointer-events:none;
}
.world-label { display:flex; align-items:center; gap:8px; font:9px monospace; letter-spacing:1.3px; color:#c8c8dd; }
.world-label .live-dot { width:4px; height:4px; }
.world-coordinates { color:#797c9e; }
.landing-readout { display:flex; flex-direction:column; gap:2px; font:8px monospace; letter-spacing:1px; color:#acacca; }
#velocity { font-size:14px; color:var(--lime); }
#velocity.unsafe { color:#ff899d; }

.overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#10162955;
  backdrop-filter:blur(2px);
  z-index:2;
}

.overlay[hidden] {
  display:none;
}

.overlay-card {
  text-align:center;
  padding:29px 40px 26px;
  border:1px solid #8489a535;
  border-radius:14px;
  background:linear-gradient(145deg,#22263fed,#161c2fed);
  box-shadow:0 20px 80px #0006;
  max-width:90%;
}

.card-tag {
  font:9px monospace;
  color:var(--lime);
  letter-spacing:2px;
  margin-bottom:20px;
}

h2 {
  font-size:35px;
  line-height:1.15;
  letter-spacing:-1px;
  margin:0 0 17px;
}

.overlay-card em {
  font-style:normal;
  color:var(--lime);
}

.overlay-card p {
  color:#b4b7cb;
  font-size:12px;
  line-height:1.8;
  margin:0 0 24px;
}

.primary-button {
  background:var(--lime);
  color:#1a2a1b;
  border:0;
  border-radius:6px;
  padding:15px 24px;
  font:11px monospace;
  font-weight:bold;
  letter-spacing:1px;
  display:inline-flex;
  gap:33px;
  align-items:center;
  justify-content:center;
  min-width:246px;
}

.primary-button:hover {
  background:#d4ff9f;
  transform:translateY(-1px);
}

.primary-button span {
  font-size:21px;
  line-height:15px;
}

.intro-controls {
  display:flex;
  gap:26px;
  justify-content:center;
  margin-top:21px;
  font:8px monospace;
  color:#a0a6b5;
  align-items:center;
}

.intro-controls span {
  display:flex;
  gap:4px;
  align-items:center;
}

.intro-controls kbd {
  font-size:9px;
  border-color:#656b7e;
  color:#d2d5e1;
  margin-right:1px;
}

.intro-note {
  display:block;
  font:8px monospace;
  color:#7e859d;
  margin-top:14px;
}

.toast {
  position:absolute;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  padding:12px 20px;
  border:1px solid #bbf58a60;
  background:#1b2a2bea;
  color:#d4fcae;
  border-radius:8px;
  font:12px/1.5 monospace;
  opacity:0;
  text-align:center;
  pointer-events:none;
  max-width:85%;
  width:max-content;
  z-index:1;
}
.toast.visible { animation:toast-fade 4.8s both; }
.toast.order-popup { border-color:var(--lime); box-shadow:0 6px 30px #0006,0 0 24px #bdf77d20; font-weight:600; }
.toast.order-popup.visible { animation:order-popup 6.4s both; }
@keyframes toast-fade {
  0% { opacity:0; }
  5%,55% { opacity:1; }
  100% { opacity:0; }
}
@keyframes order-popup {
  0% { opacity:0; transform:translateX(-50%) scale(.55); }
  5% { opacity:1; transform:translateX(-50%) scale(1.12); }
  8% { transform:translateX(-50%) scale(.96); }
  12%,45% { opacity:1; transform:translateX(-50%) scale(1); }
  100% { opacity:0; transform:translateX(-50%) scale(1); }
}
@media(prefers-reduced-motion:reduce) {
  .toast.order-popup.visible { animation-name:toast-fade; }
}

.flight-manual {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  color:#969ca6;
  font-size:10px;
  gap:20px;
}

.control-guide {
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.footer-label {
  font:8px monospace;
  letter-spacing:1.3px;
  color:#737d89;
}

.control-guide>span {
  display:flex;
  align-items:center;
  gap:3px;
}

.control-guide b {
  font-weight:400;
  padding-left:4px;
  font-size:10px;
}

kbd {
  font:9px monospace;
  border:1px solid #3a424d;
  border-radius:3px;
  padding:3px 5px;
  color:#b5bcc7;
  min-width:18px;
  display:inline-block;
  text-align:center;
  background:#ffffff03;
}

.footer-note {
  font-size:10px;
  color:#6e7580;
  white-space:nowrap;
}

.bottom-line {
  display:flex;
  justify-content:space-between;
  padding:6px 0 26px;
  font:8px monospace;
  letter-spacing:1.1px;
  color:#626c77;
}

.bottom-line span span {
  color:var(--lime);
  padding-left:4px;
}

.touch-controls {
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  gap:14px;
  touch-action:none;
}

.touch-direction {
  display:grid;
  grid-template-columns:repeat(3, 65px);
  grid-template-rows:repeat(2, 61px);
  align-items:center;
  gap:10px;
}
.touch-direction button[data-control=left] { grid-column:1; grid-row:1 / 3; }
.touch-direction button[data-control=up] { grid-column:2; grid-row:1; }
.touch-direction button[data-control=down] { grid-column:2; grid-row:2; }
.touch-direction button[data-control=right] { grid-column:3; grid-row:1 / 3; }

.touch-controls button {
  width:65px;
  height:61px;
  color:#dcead1;
  border:1px solid #526245;
  background:#26322b;
  border-radius:10px;
  font-size:27px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.touch-controls button:active,.touch-controls button.held {
  background:#5f7e45;
  border-color:var(--lime);
}

.touch-controls button small {
  display:block;
  font:8px monospace;
  letter-spacing:1px;
  margin-top:1px;
}

.touch-gear {
  background:#302b3c!important;
  border-color:#665178!important;
}

.touch-controls button:disabled {
  opacity:.35;
}

dialog {
  background:#1b2130;
  color:#c5cada;
  border:1px solid #495265;
  border-radius:14px;
  padding:36px;
  max-width:560px;
  width:calc(100% - 32px);
  box-shadow:0 30px 100px #0008;
}

dialog::backdrop {
  background:#0a0d18bb;
  backdrop-filter:blur(5px);
}

dialog h2 {
  font-size:28px;
}

dialog p,dialog li {
  font-size:12px;
  line-height:1.8;
}

dialog ul {
  padding-left:18px;
}

dialog li {
  margin:12px 0;
}

dialog b {
  color:#eef2e9;
}

.dialog-close {
  position:absolute;
  top:10px;
  right:15px;
  border:0;
  background:none;
  color:#a5b0bf;
  font-size:27px;
}

dialog .primary-button {
  margin-top:10px;
  width:100%;
}

@media(min-width:1550px) {
  .app { max-width:1420px; }
}
@media(max-width:1150px) {
  .app { padding:0 28px; }
  .hud-center { gap:24px; }
  .hud-center .stat,.fuel-readout { gap:8px; }
  .hud-center .stat { flex-direction:column; gap:4px; }
  .footer-note { display:none; }
  .control-guide { gap:16px; }
}
@media(max-width:850px) {
  .header { grid-template-columns:auto auto; gap:12px; padding:12px 0; }
  .header-right { display:contents; }
  .header-controls { justify-self:end; }
  .dev-controls { grid-column:1 / -1; }
  .sector,.header-controls>.live-dot { display:none; }
  .dashboard { inset:14px 16px auto; gap:10px; }
  .hud-center { gap:18px; }
  .stat-label { font-size:8px; letter-spacing:.6px; }
  .hud-center .stat strong { font-size:16px; }
  .fuel-readout { flex-direction:column; gap:4px; }
  .fuel-readout meter { width:60px; height:12px; }
}
@media(pointer:coarse) {
  .touch-controls { display:flex; }
}
@media(max-width:600px) {
  .app { padding:0 14px; }
  .brand { font-size:21px; gap:9px; }
  .brand img { width:35px; height:35px; }
  .brand small { font-size:6px; letter-spacing:1.3px; }
  .header-controls { gap:8px; }
  .dev-controls { width:100%; justify-content:space-between; gap:8px; font-size:8px; letter-spacing:0; }
  .dev-controls label { flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:4px; }
  .dev-controls select { width:100%; min-width:0; font-size:10px; padding:5px 3px; }
  .design-button { font-size:8px; padding:8px 6px; align-self:flex-end; min-height:28px; }
  main { padding-top:4px; }
  .level-heading { margin:0 10px 10px; font-size:8px; }
  .arcade { border-radius:8px; }
  .dashboard { inset:10px 10px auto; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .bank-stat strong { font-size:18px; }
  .bank-stat .stat-label { font-size:7px; }
  .hud-center { gap:8px 14px; flex-wrap:wrap; }
  .hud-center .stat strong { font-size:13px; }
  .stat-label { font-size:6px; letter-spacing:.3px; }
  .stat-unit { font-size:11px; }
  .fuel-readout meter { width:44px; height:9px; }
  .pause-button { width:28px; height:28px; }
  .sub-hud { left:8px; bottom:8px; gap:12px; padding:5px 7px; }
  .landing-readout { font-size:5px; }
  #velocity { font-size:10px; }
  .world-label { gap:5px; font-size:6px; letter-spacing:.4px; }
  .overlay-card { padding:12px 14px; }
  .card-tag { font-size:7px; margin-bottom:7px; }
  h2 { font-size:21px; margin-bottom:8px; }
  .overlay-card p { font-size:9px; line-height:1.5; margin-bottom:8px; }
  .primary-button { padding:10px 13px; min-width:205px; font-size:9px; }
  .intro-controls { display:none; }
  .intro-note { font-size:6px; margin-top:8px; }
  .toast { font-size:9px; padding:9px 12px; bottom:50px; }
  .flight-manual { padding:14px 0; }
  .control-guide { gap:8px; }
  .footer-label { display:none; }
  .control-guide b { font-size:9px; }
  .bottom-line { font-size:6px; letter-spacing:.7px; }
  .touch-controls { display:flex; }
}
/* Compact landscape screens retain the full game view with flight controls overlaid. */
@media(max-height:600px) and (orientation:landscape) {
  .app { padding:0 env(safe-area-inset-right, 8px) 0 env(safe-area-inset-left, 8px); }
  .header { min-height:0; padding:6px 12px; }
  .brand { font-size:18px; }
  .brand img { width:30px; height:30px; }
  .brand small { display:none; }
  .header-right { display:flex; flex-direction:row; align-items:center; gap:12px; }
  .header-controls { order:2; gap:6px; }
  .sector,.header-controls>.live-dot { display:none; }
  .icon-button { width:28px; height:28px; }
  .dev-controls { width:auto; gap:8px; font-size:7px; }
  .dev-controls label { flex-direction:row; align-items:center; gap:5px; }
  .dev-controls select { width:112px; font-size:9px; padding:5px 3px; }
  .design-button { font-size:8px; padding:7px; }
  main { padding:0; }
  .level-heading { margin:2px 12px 6px; font-size:7px; }
  .arcade { width:min(100%,calc((100dvh - 75px) * 1280 / 760)); margin:auto; }
  .dashboard { inset:8px 12px auto; gap:8px; }
  .bank-stat strong { font-size:18px; }
  .stat-label { font-size:6px; letter-spacing:.4px; }
  .hud-center { gap:16px; }
  .hud-center .stat { flex-direction:column; gap:3px; }
  .hud-center .stat strong { font-size:13px; }
  .fuel-readout { flex-direction:column; gap:3px; }
  .fuel-readout meter { width:44px; height:9px; }
  .pause-button { width:28px; height:28px; }
  .sub-hud { bottom:8px; left:8px; }
  .landing-readout { font-size:6px; }
  #velocity { font-size:11px; }
  .world-label { font-size:7px; }
  .flight-manual,.bottom-line { display:none; }
  .touch-controls { position:fixed; inset:auto 12px 8px; display:flex; padding:0; pointer-events:none; z-index:3; }
  .touch-direction { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px); gap:6px; }
  .touch-controls button { width:44px; height:44px; font-size:22px; pointer-events:auto; background:#26322bbd; }
  .touch-controls button small { font-size:6px; }
  .touch-gear { align-self:flex-end; }
  .overlay { padding:8px; overflow-y:auto; z-index:4; }
  .overlay-card { padding:14px 18px; max-height:100%; overflow-y:auto; }
  .overlay-card h2 { font-size:24px; margin-bottom:8px; }
  .overlay-card p { font-size:10px; line-height:1.5; margin-bottom:12px; }
  .overlay-card .card-tag { font-size:7px; margin-bottom:10px; }
  .overlay-card .intro-controls { display:none; }
  dialog { max-height:calc(100dvh - 16px); overflow-y:auto; padding:24px; }
}
@media(max-width:600px) and (max-height:600px) and (orientation:landscape) {
  .header { grid-template-columns:30px minmax(0,1fr); }
  .brand>span { display:none; }
  .header-right { justify-content:flex-end; }
}