:root {
  --bg: #0a0e13;
  --panel-top: #18212b;
  --panel-bottom: #10171e;
  --edge: #2b3846;
  --edge-soft: #22303c;
  --screen: #03090e;
  --key: #151d26;
  --key-on: #0f2a36;
  --text: #dff6ff;
  --muted: #8aa4b6;
  --cyan: #45e3ff;
  --cyan-glow: rgba(69, 227, 255, 0.45);
  --amber: #ffb347;
  --orange: #ff9b3d;
  --red: #ff4d5e;
  --red-soft: #ff8a96;
  --green: #5dff9e;
  --violet: #b3a9ff;
  --display: "Orbitron", "Share Tech Mono", system-ui, sans-serif;
  --mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--mono);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* Hull plating. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 120px 120px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Full-screen colour washes for shields, alerts, jumps. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transition: box-shadow .4s, background .2s;
}
body.shielded .overlay { box-shadow: inset 0 0 80px 10px rgba(69, 227, 255, .45); }
body.red-alert .overlay { animation: alert 1.1s infinite; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 160px rgba(255, 30, 50, .35); }
body.firing .overlay { background: rgba(255, 80, 80, .18); }
body.jump .overlay { background: rgba(255, 255, 255, .85); transition: background .6s; }
body.charging .overlay { animation: charge .25s infinite; }

/* --------------------------------------------------------- materials */

/* A bolted metal panel: bevelled edge, dark frame and four corner screws. */
.panel {
  --screw: radial-gradient(circle, #7b8996 0 1.5px, #3a4652 2.5px 3.5px, #0a0e12 4px 4.5px, transparent 5px);
  position: relative;
  min-width: 0;
  padding: 40px 18px 18px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background:
    var(--screw) 9px 9px / 10px 10px no-repeat,
    var(--screw) calc(100% - 9px) 9px / 10px 10px no-repeat,
    var(--screw) 9px calc(100% - 9px) / 10px 10px no-repeat,
    var(--screw) calc(100% - 9px) calc(100% - 9px) / 10px 10px no-repeat,
    linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    0 0 0 3px #070a0e,
    0 0 0 4px #1c2631,
    0 10px 24px rgba(0, 0, 0, .55);
}

/* Stencilled label plate in the panel's top-left corner. */
.plate {
  position: absolute;
  top: 11px;
  left: 30px;
  right: 30px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.plate b {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--amber);
  color: #1a1004;
  letter-spacing: .06em;
  font-weight: 900;
}
.plate small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
}

/* A recessed display with scan lines. */
.screen {
  position: relative;
  overflow: hidden;
  border: 1px solid #05090d;
  border-radius: 6px;
  background: var(--screen);
  box-shadow: inset 0 0 0 1px rgba(69, 227, 255, .14), inset 0 0 28px rgba(0, 0, 0, .95);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}

.hazard { background: repeating-linear-gradient(-45deg, var(--amber) 0 10px, #15100a 10px 20px); }

/* Static stars for the start screen. */
.stars {
  background-color: #02060c;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #cfe9ff, transparent),
    radial-gradient(1px 1px at 22% 72%, #9fc6e6, transparent),
    radial-gradient(1.4px 1.4px at 31% 26%, #fff, transparent),
    radial-gradient(1px 1px at 44% 88%, #9fc6e6, transparent),
    radial-gradient(1.2px 1.2px at 63% 9%, #cfe9ff, transparent),
    radial-gradient(1px 1px at 71% 61%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 86% 33%, #cfe9ff, transparent),
    radial-gradient(1px 1px at 93% 81%, #9fc6e6, transparent),
    radial-gradient(1px 1px at 14% 46%, #fff, transparent),
    radial-gradient(1px 1px at 79% 12%, #fff, transparent),
    radial-gradient(1px 1px at 4% 92%, #cfe9ff, transparent),
    radial-gradient(1px 1px at 38% 6%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 58% 94%, #cfe9ff, transparent),
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(40, 80, 140, .28), transparent);
}

/* Indicator lamps. */
.lamp {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3540;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.lamp.ok { background: var(--green); box-shadow: 0 0 8px rgba(93, 255, 158, .8); }
.lamp.warn { background: var(--amber); box-shadow: 0 0 8px rgba(255, 179, 71, .8); }
.lamp.bad { background: var(--red); box-shadow: 0 0 8px rgba(255, 77, 94, .8); }

/* LED segment rows, lit by the app with .on */
.leds { display: flex; gap: 4px; }
.leds span { flex: 1; border-radius: 2px; transition: background .08s, box-shadow .08s; }

/* -------------------------------------------------------- start screen */

.start-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}
body.started .start-screen { display: none; }

.start-card {
  width: min(900px, 100%);
  padding: 56px clamp(20px, 5vw, 56px) 36px;
  display: grid;
  gap: 32px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 3px #070a0e,
    0 0 0 4px #1c2631,
    0 24px 60px rgba(0, 0, 0, .7);
}
.start-title { display: flex; align-items: center; gap: 18px; }
.start-title .logo { width: 52px; height: 52px; flex-shrink: 0; color: var(--cyan); filter: drop-shadow(0 0 10px rgba(69, 227, 255, .6)); }
.start-title h1 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1;
  letter-spacing: .14em;
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(69, 227, 255, .5);
}
.start-title p { margin: 0; font-size: 19px; color: #a9c2d2; }

.start-body { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: center; justify-content: center; }

.checklist { flex: 1 1 320px; padding: 20px 22px; display: grid; gap: 14px; }
.checklist h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.checklist p { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.checklist .lamp { margin-top: 5px; }

.ignition { display: grid; justify-items: center; gap: 14px; }
.ring-guard { padding: 14px; border-radius: 50%; box-shadow: 0 0 0 3px #070a0e, 0 0 0 4px var(--edge); }
.socket { padding: 10px; border-radius: 50%; background: #0b1016; box-shadow: inset 0 4px 10px rgba(0, 0, 0, .8); }
.start-btn {
  width: 196px;
  height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffcf85, var(--orange) 45%, #b4520f 100%);
  box-shadow: 0 0 40px rgba(255, 155, 61, .6), inset 0 -8px 16px rgba(0, 0, 0, .35), inset 0 6px 10px rgba(255, 255, 255, .35);
  color: #2a1404;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}
.start-btn .ico { width: 40px; height: 40px; stroke-width: 2.4; }
.start-btn:active { transform: scale(.97); filter: brightness(1.1); }
.ignition .caption { font-size: 12px; letter-spacing: .2em; color: var(--muted); }

.start-card .fine {
  margin: 0;
  padding-top: 18px;
  border-top: 1px dashed var(--edge);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------- layout */

.console {
  max-width: 1480px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  margin-bottom: 18px;
}

main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.telemetry-panel { grid-column: span 3; }
.flight { grid-column: span 6; }
.systems-panel { grid-column: span 3; }
.sim { grid-column: span 5; }
.hangar { grid-column: span 4; }
.config { grid-column: span 3; }

/* -------------------------------------------------------------- header */

.top .panel { padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.brand .logo { width: 30px; height: 30px; flex-shrink: 0; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(69, 227, 255, .6)); }
.brand-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .18em;
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan-glow);
}
.brand-ship { margin-top: 3px; font-size: 12px; letter-spacing: .16em; color: var(--muted); }

.top .log-panel { padding: 10px; }
.log-screen { flex: 1; align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 10px 18px; min-height: 46px; }
.tag {
  flex-shrink: 0;
  padding: 3px 6px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--muted);
}
.log {
  min-width: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--green);
  text-shadow: 0 0 10px rgba(93, 255, 158, .5);
}
.log.flash { animation: type .5s steps(8); }
body.red-alert .log { color: var(--red-soft); text-shadow: 0 0 10px rgba(255, 77, 94, .6); }

.top .status { justify-content: space-between; gap: 16px; }
.stardate-box { display: grid; gap: 2px; }
.stardate-box span { font-size: 10px; letter-spacing: .24em; color: var(--muted); }
.stardate-box b { font-family: var(--display); font-size: 16px; letter-spacing: .1em; }

.chips { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 16px; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2a3540;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4);
}
.chip.ok::before { background: var(--green); box-shadow: 0 0 9px rgba(93, 255, 158, .8); }
.chip.info::before { background: var(--cyan); box-shadow: 0 0 9px rgba(69, 227, 255, .8); }
.chip.warn::before { background: var(--amber); box-shadow: 0 0 9px rgba(255, 179, 71, .8); }
.chip.bad::before { background: var(--red); box-shadow: 0 0 9px rgba(255, 77, 94, .9); }
.chip.bad { color: var(--red-soft); }

/* ----------------------------------------------------------- telemetry */

.telemetry-panel { display: flex; flex-direction: column; gap: 14px; }

.compass { height: 64px; flex-shrink: 0; }
.tape {
  position: absolute;
  top: 12px;
  left: 50%;
  height: 22px;
  transition: transform .4s ease-out;
}
.tape span {
  position: absolute;
  width: 40px;
  margin-left: -20px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
}
.tape span.cardinal { color: var(--cyan); text-shadow: 0 0 8px rgba(69, 227, 255, .6); font-size: 15px; }
.caret {
  position: absolute;
  left: 50%;
  bottom: 8px;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--amber);
}

.telemetry {
  flex: 1;
  margin: 0;
  padding: 6px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.telemetry > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(69, 227, 255, .16);
}
.telemetry > div:last-child { border-bottom: 0; }
.telemetry dt { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.telemetry dd {
  margin: 0;
  font-size: 19px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(69, 227, 255, .45);
}
.telemetry .reactor dd { color: var(--green); text-shadow: 0 0 8px rgba(93, 255, 158, .45); }
.reactor-leds { flex-basis: 100%; gap: 3px; }
.reactor-leds span { height: 12px; background: #12251c; }
.reactor-leds span.on { background: var(--green); box-shadow: 0 0 6px rgba(93, 255, 158, .7); }

/* ----------------------------------------------------- primary flight */

.flight { display: flex; flex-direction: column; gap: 14px; }

.viewport {
  flex: 1;
  min-height: 420px;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  transition: box-shadow .4s;
}
body.shielded .viewport { box-shadow: inset 0 0 0 1px rgba(69, 227, 255, .5), inset 0 0 70px rgba(69, 227, 255, .35); }

.stars-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Radar sweep while scanning. */
.viewport::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg, rgba(93, 255, 158, .28), transparent 70deg);
  transition: opacity .3s;
}
body.scanning .viewport::before { opacity: 1; animation: sweep 1.1s linear infinite; }

.bar {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.bar-label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.bar.thrust .bar-label, .bar.thrust .bar-value { color: var(--amber); }
.bar.retro .bar-label, .bar.retro .bar-value { color: var(--red-soft); }
.bar-track {
  padding: 6px;
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  background: #070b10;
}
.bar-track .leds { flex-direction: column-reverse; width: 34px; height: 304px; }
.bar.thrust .leds span { background: #2a2014; }
.bar.thrust .leds span.on { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.bar.retro .leds span { background: #2a1418; }
.bar.retro .leds span.on { background: var(--red); box-shadow: 0 0 8px var(--red); }
.bar-value { font-size: 15px; font-variant-numeric: tabular-nums; }

.gauge {
  --pct: 0;
  position: relative;
  z-index: 2;
  flex: 0 1 380px;
  min-width: 0;
  aspect-ratio: 1;
  container-type: inline-size;
}
.gauge > div { position: absolute; border-radius: 50%; }

.bezel {
  inset: -12px;
  background: #0a1016;
  border: 2px solid #2e3b48;
  box-shadow: inset 0 0 0 5px #141d26, inset 0 0 30px rgba(0, 0, 0, .9), 0 8px 20px rgba(0, 0, 0, .6);
}

.ring {
  inset: 0;
  background: conic-gradient(
    from 225deg,
    var(--cyan) 0deg,
    #7a6bff calc(var(--pct) * 270deg),
    rgba(69, 227, 255, .08) 0 270deg,
    transparent 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 20px), #000 calc(100% - 19px));
  /* Scale the ring with the gauge where container units are supported. */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5.2cqw), #000 calc(100% - 5.2cqw + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5.2cqw), #000 calc(100% - 5.2cqw + 1px));
  filter: drop-shadow(0 0 12px var(--cyan-glow));
}
body.thrusting .ring { filter: drop-shadow(0 0 22px rgba(255, 155, 61, .8)); }
body.braking .ring { filter: drop-shadow(0 0 22px rgba(255, 77, 94, .8)); }

.minor-ticks {
  inset: 28px;
  inset: 7.4cqw;
  background: repeating-conic-gradient(from 225deg, rgba(138, 164, 182, .55) 0deg .7deg, transparent .7deg 9deg);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)),
    conic-gradient(from 225deg, #000 0deg 271deg, transparent 271deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)),
    conic-gradient(from 225deg, #000 0deg 271deg, transparent 271deg);
  mask-composite: intersect;
}

.dial { inset: 0; }
/* A major tick: a full-size layer rotated to its angle with the mark at the top. */
.dial .mark { position: absolute; inset: 24px; inset: 6.3cqw; }
.dial .mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 15px;
  height: 4cqw;
  margin-left: -1px;
  background: var(--text);
}
.dial-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.tip {
  inset: 0;
  transform: rotate(calc(-135deg + var(--pct) * 270deg));
}
.tip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  top: .8cqw;
  width: 14px;
  height: 14px;
  width: 3.6cqw;
  height: 3.6cqw;
  margin-left: -7px;
  margin-left: -1.8cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 18px var(--cyan);
}

.readout {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.readout .label { font-size: 13px; letter-spacing: .34em; color: var(--muted); }
.speed {
  font-family: var(--display);
  font-size: 92px;
  font-size: 24cqw;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: #f2fbff;
  text-shadow: 0 0 22px rgba(69, 227, 255, .55);
}
.unit { color: var(--muted); font-size: 18px; }

/* A small dial drops its numbers rather than crowding them. */
@container (max-width: 230px) {
  .dial-label, .readout .label { display: none; }
  .unit { font-size: 14px; }
}

.gauge .warp {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid #3a3466;
  border-radius: 4px;
  background: #070b10;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--violet);
  text-shadow: 0 0 10px rgba(122, 107, 255, .7);
  white-space: nowrap;
}

.warp-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.strip-label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--muted); }
.strip-note { font-size: 13px; color: var(--muted); }
.pips { gap: 6px; }
.pips span { flex: 0 0 38px; height: 10px; background: #1b1a33; }
.pips span.on { background: var(--violet); box-shadow: 0 0 10px rgba(122, 107, 255, .8); }

/* -------------------------------------------------------- ship systems */

.systems-panel { display: flex; flex-direction: column; gap: 12px; }

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

/* An illuminated push-button with an indicator strip along the top. */
.sys {
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 6px 10px;
  border: 1px solid #2c3a48;
  border-radius: 6px;
  background: var(--key);
  color: var(--muted);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45);
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.sys::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 12px;
  right: 12px;
  height: 4px;
  border-radius: 2px;
  background: #1d2a35;
  transition: background .15s, box-shadow .15s;
}
.sys .ico { width: 28px; height: 28px; }
.sys .name { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sys .code { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.sys:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45); }

.sys.on,
body.firing [data-system="lasers"],
body.scanning [data-system="scan"] {
  border-color: var(--cyan);
  background: var(--key-on);
  color: var(--text);
  box-shadow: 0 0 16px rgba(69, 227, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .45);
}
.sys.on::before,
body.firing [data-system="lasers"]::before,
body.scanning [data-system="scan"]::before {
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.guard { padding: 6px; border-radius: 8px; }
.sys.alert {
  width: 100%;
  min-height: 66px;
  flex-direction: row;
  gap: 12px;
  padding: 10px;
  border: 2px solid #6a2c34;
  border-radius: 4px;
  background: #1d1113;
  color: var(--red-soft);
}
.sys.alert::before { display: none; }
.sys.alert .name { font-size: 17px; font-weight: 900; letter-spacing: .18em; }
.sys.alert.on {
  border-color: var(--red);
  background: #5a1019;
  color: #ffe3e6;
  box-shadow: 0 0 24px rgba(255, 77, 94, .75), inset 0 -3px 0 rgba(0, 0, 0, .5);
}

/* ----------------------------------------------------------- simulator */

.sim { display: flex; gap: 16px; align-items: stretch; }

.pedal {
  flex: 0 0 136px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .5);
  touch-action: none;
}
.pedal .ico { width: 26px; height: 26px; }
.pedal small { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; }
.pedal.thrust { border: 2px solid var(--amber); background: rgba(255, 179, 71, .08); color: #ffc477; }
.pedal.thrust small { color: #ffd9a8; }
.pedal.brake { border: 2px solid var(--red); background: rgba(255, 77, 94, .08); color: var(--red-soft); }
.pedal.brake small { color: #ffb3bb; }
.pedal.thrust.held { background: rgba(255, 179, 71, .35); box-shadow: 0 0 26px rgba(255, 179, 71, .8), inset 0 -2px 0 rgba(0, 0, 0, .5); }
.pedal.brake.held { background: rgba(255, 77, 94, .35); box-shadow: 0 0 26px rgba(255, 77, 94, .8), inset 0 -2px 0 rgba(0, 0, 0, .5); }

.sim-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--muted);
}
.stack { display: grid; gap: 4px; font-size: 14px; letter-spacing: .1em; color: var(--muted); }

.throttle { display: grid; gap: 6px; padding: 10px 14px; }
.throttle .row { font-size: 13px; letter-spacing: .12em; }
.throttle b { font-weight: 400; color: var(--amber); }

input[type=range] {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 30px;
  margin: 0;
  accent-color: var(--amber);
}

/* Checkboxes drawn as flip switches. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 32px;
  margin: 0;
  border: 1px solid #2c3a48;
  border-radius: 16px;
  background: #0b1118;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
  cursor: pointer;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9aa8b5, #39444f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  transition: transform .15s;
}
.switch:checked { border-color: var(--green); background: #0e3324; }
.switch:checked::before { transform: translateX(30px); }
.switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.wide {
  min-height: 48px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--key);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wide:active { transform: translateY(1px); }
body.manual #auto { color: var(--amber); }

/* -------------------------------------------------------------- hangar */

.ships {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ship {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 12px;
  text-align: left;
  border: 1px solid #2c3a48;
  border-radius: 6px;
  background: #10171f;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45);
}
.ship .ico { width: 72px; height: 36px; color: var(--muted); }
.ship-bay { font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.ship-name { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ship-blurb { font-size: 12px; color: var(--muted); }
.ship.active { border-color: var(--cyan); background: var(--key-on); box-shadow: 0 0 16px rgba(69, 227, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .45); }
.ship.active .ico, .ship.active .ship-bay { color: var(--cyan); }

/* -------------------------------------------------------------- config */

.config { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }

.seg { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--edge); border-radius: 6px; background: #070b10; }
.seg button { min-width: 64px; height: 36px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-weight: 700; }
.seg button.active { background: var(--cyan); color: #021018; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 22px 16px 40px;
}

/* ------------------------------------------------------ fit the screen */

/* On a car screen every control must be in view without scrolling, so the
   console takes exactly the screen height and the panels shrink to fit.
   Phones, and portrait screens too short to fit it all, are left to scroll. */
@media (min-width: 721px) and (min-height: 540px) and (orientation: landscape),
       (min-width: 721px) and (min-height: 1100px) and (orientation: portrait) {
  html, body { height: 100%; overflow: hidden; }

  .console {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
  }
  .top { flex-shrink: 0; margin-bottom: 0; }
  /* A long log line must never wrap: in a narrow column it would stretch the header. */
  .log { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main {
    flex: 1;
    min-height: 0;
    gap: 14px;
    /* The bottom row takes what its controls need; the flight display gets the rest. */
    grid-template-rows: minmax(0, 1fr) auto;
  }
  main > .panel { min-height: 0; overflow: hidden; padding-top: 36px; }
  .plate { top: 10px; }
  footer { display: none; }

  /* Flight display: the gauge and LED bars size themselves from the space left. */
  .viewport { min-height: 0; padding: 16px; container-type: size; }
  .gauge {
    flex: none;
    width: min(380px, calc(100cqh - 56px), calc(100cqw - 230px));
  }
  .bar-track .leds { height: min(304px, calc(100cqh - 100px)); }

  .systems { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .sys { min-height: 0; padding: 16px 6px 8px; }
  .sys.alert { min-height: 52px; }

  .telemetry { min-height: 0; overflow: hidden; }
  .telemetry > div { padding: 6px 0; }

  .pedal { flex-basis: clamp(90px, 9vw, 136px); min-height: 0; }
  .sim-controls { gap: 8px; }
  .throttle { padding: 6px 12px; gap: 2px; }
  .wide { min-height: 42px; }

  .ships { min-height: 0; }
  .ship { min-height: 0; overflow: hidden; }
}

/* Short landscape screens: tighten the details that cost height. */
@media (min-width: 721px) and (min-height: 540px) and (max-height: 820px) and (orientation: landscape) {
  .top .panel { padding-top: 8px; padding-bottom: 8px; }
  .log-screen { min-height: 40px; padding: 6px 14px; }
  .log { font-size: 16px; }
  .compass { height: 46px; }
  .tape { top: 6px; }
  .caret { bottom: 5px; }
  .telemetry dd { font-size: 17px; }
  .sys .code { display: none; }
  .sys .ico { width: 24px; height: 24px; }
  .ship .ico { width: 56px; height: 28px; }
  .ship-blurb { display: none; }
  .warp-strip .strip-note { display: none; }
}

/* Very short landscape screens (the Tesla browser window is about 800 x 620 CSS px):
   a slim header and a compact bottom row leave the room to the flight display. */
@media (min-width: 721px) and (min-height: 540px) and (max-height: 720px) and (orientation: landscape) {
  .console { gap: 10px; padding: 10px 12px; }
  main { gap: 10px; }
  main > .panel { padding: 30px 12px 12px; }
  .plate { top: 7px; left: 24px; right: 24px; letter-spacing: .14em; }
  .plate small { display: none; }

  .top { gap: 10px; }
  .top .panel { padding: 6px 20px; gap: 10px; }
  .brand .logo { width: 22px; height: 22px; }
  .brand-name { font-size: 16px; letter-spacing: .14em; }
  .top .log-panel { padding: 5px; }
  .log-screen { min-height: 0; padding: 4px 10px; gap: 10px; }
  .log { font-size: 14px; }
  .tag { display: none; }
  .stardate-box { display: none; }
  .chips { gap: 2px 12px; }
  .chip { gap: 6px; font-size: 10px; letter-spacing: .04em; }
  .chip::before { width: 8px; height: 8px; }

  .telemetry-panel, .systems-panel, .flight { gap: 8px; }
  .telemetry { padding: 2px 12px; }
  .telemetry dt { font-size: 11px; letter-spacing: .1em; }
  .telemetry dd { font-size: 15px; }

  .systems { gap: 6px; }
  .sys { flex-direction: row; gap: 10px; padding: 8px 4px 6px; }
  .sys::before { top: 4px; }
  .sys .ico { display: none; }
  .sys .name { font-size: 11px; letter-spacing: .04em; }
  .sys.alert .ico { display: block; width: 18px; height: 18px; }
  .sys.alert { min-height: 38px; }
  .sys.alert .name { font-size: 14px; }
  .guard { padding: 4px; }
  .warp-strip { display: none; }

  /* Slimmer LED bars so the speed gauge gets the width. */
  .viewport { gap: 14px; padding: 10px; }
  .bar-label { font-size: 10px; letter-spacing: .12em; }
  .bar-track { padding: 4px; }
  .bar-track .leds { width: 22px; }
  .gauge { width: min(380px, calc(100cqh - 40px), calc(100cqw - 160px)); }

  .sim { gap: 10px; }
  .pedal { font-size: 15px; gap: 2px; }
  .pedal small { font-size: 11px; }
  .sim-controls { gap: 6px; }
  .row, .stack { font-size: 12px; }
  .throttle { padding: 4px 10px; }
  .throttle .row { font-size: 11px; }
  input[type=range] { height: 24px; }
  .switch { width: 50px; height: 26px; }
  .switch::before { width: 18px; height: 18px; }
  .switch:checked::before { transform: translateX(24px); }
  .wide { min-height: 34px; font-size: 11px; letter-spacing: .08em; }

  .ships { gap: 6px; }
  .ship { padding: 5px 10px; }
  .ship-name { font-size: 12px; }

  .config { gap: 6px; }
  .config .row { flex-wrap: wrap; gap: 4px 8px; }
  .seg { flex: 1 0 auto; }
  .seg button { flex: 1; min-width: 44px; height: 28px; }
}

/* Portrait screens (older Model S / X): stack the panels. Tall ones fit
   without scrolling, the flight display taking whatever height is left. */
@media (min-width: 721px) and (orientation: portrait) {
  .top { grid-template-columns: minmax(0, 1fr) auto; }
  .top .log-panel { grid-column: 1 / -1; grid-row: 2; }
  main {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  .flight { grid-column: 1 / -1; order: -1; }
  .telemetry-panel, .systems-panel { grid-column: span 3; }
  .sim { grid-column: 1 / -1; }
  .hangar { grid-column: span 4; }
  .config { grid-column: span 2; }
}

/* Narrower landscape screens: give the bottom row's busier panels more room. */
@media (min-width: 721px) and (max-width: 1180px) and (orientation: landscape) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .brand-ship { display: none; }
  /* The hangar becomes a compact list so the flight sim gets the room. */
  .sim { grid-column: span 6; }
  .hangar { grid-column: span 3; }
  .config { grid-column: span 3; }
  .ships { grid-template-columns: minmax(0, 1fr); }
  .ship { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 10px; }
  .ship .ico { width: 40px; height: 20px; flex-shrink: 0; }
  .ship-bay, .ship-blurb { display: none; }
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 720px) {
  .console { padding: 12px 16px 0; }
  .top { grid-template-columns: minmax(0, 1fr); }
  .top .status { flex-wrap: wrap; }
  main { grid-template-columns: minmax(0, 1fr); }
  .flight { order: -1; }
  .telemetry-panel, .flight, .systems-panel, .sim, .hangar, .config { grid-column: 1 / -1; }
  .viewport { min-height: 0; padding: 20px 10px; gap: 10px; }
  .bar-track .leds { width: 18px; height: 200px; gap: 3px; }
  .bar-label { font-size: 9px; letter-spacing: .1em; }
  .dial-label { font-size: 11px; }
  .readout .label { display: none; }
  .gauge .warp { font-size: 12px; padding: 4px 8px; }
  .sim { flex-wrap: wrap; }
  .pedal { flex: 1 1 120px; min-height: 110px; }
  .sim-controls { flex-basis: 100%; order: 3; }
  .ships { grid-template-columns: minmax(0, 1fr); }
  .ship { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ship-blurb { flex-basis: 100%; }
}

/* ---------------------------------------------------------- animations */

@keyframes alert {
  0%, 100% { background: rgba(255, 30, 50, 0); }
  50% { background: rgba(255, 30, 50, .22); }
}
@keyframes charge {
  0%, 100% { box-shadow: inset 0 0 60px 0 rgba(122, 107, 255, .3); }
  50% { box-shadow: inset 0 0 120px 20px rgba(122, 107, 255, .6); }
}
@keyframes sweep {
  to { transform: rotate(1turn); }
}
@keyframes type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}