@charset "UTF-8";
:root {
  color-scheme: dark;
  font-family:
    "Yu Gothic UI",
    "Meiryo",
    system-ui,
    sans-serif;
  font-synthesis: none;
  color: #e1ebee;
  background: #11191e;
  --ink:#e1ebee;
  --muted:#9eafb7;
  --line:#384950;
  --amber:#ffba62;
  --cyan:#8edee7;
  --green:#8fe0bc;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(
      ellipse at 50% 0,
      #30424b 0,
      transparent 62%) fixed;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 5px;
  font-weight: 700;
  font-size: .875rem;
  padding: .65rem .9rem;
  transition: filter .15s, background .15s;
}
button:disabled {
  cursor: default;
  opacity: .38;
}
button:hover:not(:disabled) {
  filter: brightness(1.15);
}
button:active:not(:disabled) {
  translate: 0 1px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
canvas:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.quiet {
  background: transparent;
  color: var(--muted);
}
.panel-button,
.secondary {
  background: linear-gradient(#31414a, #202f36);
  border: 1px solid #4a5c65;
  box-shadow: inset 0 1px #ffffff0c, 0 2px 2px #0005;
  color: #d7e5eb;
}
.primary {
  background: var(--cyan);
  color: #11272e;
  border-color: #b6f3f9;
  box-shadow: inset 0 1px #ffffff80, 0 3px 0 #406b74;
  padding: .85rem 1.1rem;
}
.primary span {
  float: right;
  margin-left: 20px;
}
.app {
  max-width: 1500px;
  margin: auto;
  padding: 0 24px;
}
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mission-mark {
  font:
    600 20px ui-monospace,
    Consolas,
    monospace;
  color: var(--amber);
  border: 1px solid #6c6960;
  padding: 4px 9px;
  line-height: 1;
  transform: skew(-5deg);
}
.mission-mark span {
  display: block;
  font-size: 10px;
  letter-spacing: .15em;
  margin-top: 5px;
}
.brand h1 {
  font-size: 1.3rem;
  letter-spacing: .05em;
  margin: 0;
}
.brand p {
  font-size: .7rem;
  margin: 4px 0 0;
  color: var(--muted);
  letter-spacing: .08em;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: .75rem;
}
.masthead a {
  text-decoration: none;
  color: var(--muted);
}
.masthead nav button {
  font-size: .75rem;
  border: 1px solid var(--line);
}
.flight-deck {
  position: relative;
  padding: 0 9px 8px;
  border: 1px solid #5c6b73;
  border-radius: 13px;
  background:
    linear-gradient(
      110deg,
      #35464f 0,
      #1d2b33 22%,
      #273740 76%,
      #35444b);
  box-shadow:
    inset 0 1px 1px #b4c2c94d,
    inset 0 -2px 1px #060c10,
    0 18px 55px #0005;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
.flight-deck::before,
.flight-deck::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #82919a 0,
      #38464c 42%,
      #0b171e 43% 56%,
      #65767d 57%);
  box-shadow: 0 1px 2px #0008;
}
.flight-deck::before {
  left: 11px;
}
.flight-deck::after {
  right: 11px;
}
.flight-deck * {
  -webkit-tap-highlight-color: transparent;
}
.instrument-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 16px;
}
.clock {
  min-width: 138px;
  padding: 3px 12px;
  background: #0b151b;
  border: 1px solid #53626a;
  border-radius: 4px;
  box-shadow: inset 0 2px 6px #0006;
}
.clock > span {
  display: block;
  font:
    10px ui-monospace,
    Consolas,
    monospace;
  color: var(--muted);
  letter-spacing: .1em;
}
.clock strong {
  font:
    500 29px ui-monospace,
    Consolas,
    monospace;
  font-variant-numeric: tabular-nums;
  color: #b4e9ef;
  text-shadow: 0 0 12px #8edee72a;
}
.clock small {
  font-size: 12px;
  color: var(--muted);
  margin-left: 5px;
}
.mission {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
  color: #8c9fa9;
  font-size: .8rem;
}
.mission li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.mission b {
  font:
    11px ui-monospace,
    Consolas,
    monospace;
  color: #9aacb5;
}
.mission li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0e1b22;
  box-shadow: inset 0 1px 2px #0008, 0 1px #ffffff20;
}
.mission .active {
  color: var(--amber);
}
.mission .active::before {
  background: var(--amber);
  box-shadow: 0 0 8px #ffba6260;
}
.mission .done {
  color: var(--green);
}
.mission .done::before {
  background: var(--green);
  box-shadow: 0 0 7px #8fe0bc40;
}
.instrument-bar > button {
  font-size: .75rem;
  min-height: 38px;
  white-space: nowrap;
}
.viewport {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100dvh - 200px);
  min-height: 420px;
  max-height: 1000px;
  background: #173543;
  border: 2px solid #071219;
  border-radius: 5px;
  box-shadow: 0 1px #64757d;
  overflow: hidden;
}
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #c0e1ee25;
  box-shadow: inset 0 0 28px #00101940;
  pointer-events: none;
  border-radius: 3px;
}
#scene {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.display-id {
  position: absolute;
  left: 14px;
  top: 11px;
  font:
    9px ui-monospace,
    Consolas,
    monospace;
  letter-spacing: .07em;
  color: #bed6df;
  pointer-events: none;
}
.display-id i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  margin: 0 0 2px 5px;
  box-shadow: 0 0 5px #8fe0bc70;
}
.engine-instrument {
  position: absolute;
  left: 12px;
  top: 33px;
  width: 120px;
  padding: 8px 8px 6px;
  background: #09171ee8;
  border: 1px solid #68808b91;
  border-radius: 4px;
  box-shadow: inset 0 1px #b0d7e60a;
  pointer-events: none;
}
.instrument-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #a9c0cb;
}
.instrument-title strong {
  font-size: 10px;
  color: #9eb3bd;
}
.instrument-title strong.on {
  color: var(--amber);
  text-shadow: 0 0 9px #ffba6270;
}
.instrument-title strong::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  margin-right: 5px;
}
.nozzle-schematic {
  display: block;
  width: 100%;
  height: 83px;
}
.nozzle-reference {
  fill: none;
  stroke: #769aa65a;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.nozzle-flame {
  fill: #ffba62;
  opacity: 0;
}
.engine-instrument.firing .nozzle-flame {
  opacity: .8;
}
.nozzle-axis {
  fill: none;
  stroke: #92adba;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.engine-instrument.firing .nozzle-axis {
  stroke: var(--amber);
  filter: drop-shadow(0 0 2px #ffb96265);
}
.nozzle-target {
  fill: none;
  stroke: #f1f6f8;
  stroke-width: 1.4;
}
.nozzle-numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #879ea9;
  font-size: 9px;
}
.nozzle-numbers b {
  font:
    600 15px ui-monospace,
    Consolas,
    monospace;
  color: #e1eef2;
  font-variant-numeric: tabular-nums;
}
.mass-readout{margin:4px 0 0;padding-top:4px;border-top:1px solid #829fa233;font-size:9px;line-height:1.45;color:#a3bdc9}
.mass-readout>div{display:flex;justify-content:space-between;align-items:baseline;gap:3px;white-space:nowrap}
.mass-readout dt{font-size:8px}.mass-readout dd{margin:0;color:#dfedf0;font-size:10px;font-variant-numeric:tabular-nums}
.mass-readout.fuel-fixed{border-color:#9cdcc86b}.mass-readout.fuel-fixed dt{color:#ade5ce}
@media(max-width:780px){.mass-readout{margin-top:3px;padding-top:3px;line-height:1.3}.mass-readout dt{font-size:7.5px}.mass-readout dd{font-size:9px}}
@media(max-height:600px) and (orientation:landscape){.engine-instrument .nozzle-schematic{height:40px}.mass-readout{margin-top:2px;padding-top:2px;line-height:1.2}.mass-readout dt{font-size:7px}.mass-readout dd{font-size:8px}}
.engine-instrument > small {
  display: block;
  text-align: center;
  font-size: 9px;
  white-space: nowrap;
  color: #92aab5;
  margin-top: 5px;
}
.engine-instrument > small i {
  display: inline-block;
  margin: 0 4px 1px 6px;
  width: 5px;
  height: 5px;
  border-right: 1px solid white;
  border-top: 1px solid white;
  transform: rotate(-45deg);
}
.preflight .engine-instrument {
  visibility: hidden;
}
.map-toggle {
  position: absolute;
  right: 12px;
  top: 130px;
  background: #0c1d26e6;
  border: 1px solid #7796a3a6;
  color: #d1e3eb;
  font-size: 11px;
  padding: 6px 10px;
}
.flight-image{grid-row:2;position:relative;min-width:0;min-height:0;overflow:hidden}
.pilot-control{grid-row:3;position:relative;min-width:0;height:78px;padding:5px 14px 6px;background:linear-gradient(#263b47,#0e202a 38%,#101c25);border-top:1px solid #7fa4b8;box-shadow:inset 0 1px #d0eafa18,inset 0 -3px 8px #0005;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pilot-control>*{pointer-events:none}
.pilot-control::before,.pilot-control::after{content:"";position:absolute;bottom:8px;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#9aacb5,#384c57 43%,#04131c 45% 55%,#758792 57%);box-shadow:0 1px 2px #0009}
.pilot-control::before{left:10px}.pilot-control::after{right:10px}
.pilot-labels{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:5px;align-items:center;font-size:12px;line-height:16px;color:#9bb5c3}
.pilot-labels strong{text-align:center;font-size:12px;font-weight:600;color:#bfdfeb;white-space:nowrap}
.pilot-labels>span:last-child{text-align:right}
.pilot-rail{position:relative;height:48px;margin:2px 18px 0}
.pilot-track{position:absolute;left:0;right:0;top:50%;height:12px;transform:translateY(-50%);border:1px solid #5c788a;border-radius:8px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#65849455 calc(10% - 1px) 10%),linear-gradient(#020b11,#172b37);box-shadow:inset 0 2px 5px #000,0 1px #b7d6e229}
.pilot-fill{position:absolute;left:50%;top:calc(50% - 3px);height:6px;width:0;background:#6fc7d7;box-shadow:0 0 7px #6fc7d744;border-radius:3px}
.pilot-centre{position:absolute;left:50%;top:4px;bottom:4px;width:2px;background:#6fc7d74d;transform:translateX(-50%)}
.pilot-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);padding:5px;border:1px solid #99bdcc;border-radius:50%;background:repeating-conic-gradient(#8cabb8 0deg 5deg,#314b5b 6deg 10deg);box-shadow:0 4px 5px #000b,0 0 0 3px #07151d,0 0 0 4px #506f7f,inset 0 1px 3px #d6e8ee77;transition:left .12s ease-out}
.pilot-knob-face{position:relative;display:block;width:100%;height:100%;border-radius:50%;border:1px solid #6f94a6;background:radial-gradient(ellipse at 35% 23%,#6a8291,#2b424f 50%,#152633 85%);box-shadow:inset 0 1px 2px #d5e7f14d,inset 0 -2px 4px #031018;transition:transform .08s ease-out}
.pilot-knob-face::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #728e9b;background:#20323d;box-shadow:0 1px 2px #0008}
.pilot-knob-face i{position:absolute;left:50%;top:3px;width:4px;height:12px;transform:translateX(-50%);border-radius:2px;background:#9ce8ed;box-shadow:0 0 5px #6ed5e977}
.pilot-control.firing{cursor:grabbing;border-top-color:#e1aa66;background:linear-gradient(#3c3d36,#1d292b 38%,#101c25)}
.pilot-control.firing .pilot-labels strong{color:#ffce8d}
.pilot-control.firing .pilot-fill{background:#ffc377;box-shadow:0 0 9px #ffb96688}
.pilot-control.firing .pilot-knob{border-color:#f5c88d;box-shadow:0 2px 3px #000b,0 0 0 3px #07151d,0 0 0 4px #c28c50,0 0 14px #ffc06a44,inset 0 1px 3px #ffe7bd66;transition:none}
.pilot-control.firing .pilot-knob-face i{background:#ffe2a8;box-shadow:0 0 8px #ffb966aa}
.pilot-control.unavailable{opacity:.55;cursor:default}
.pilot-control:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.flight-deck.ending .engine-instrument {
  opacity: .45;
}
.nozzle-command {
  grid-row:1;
  margin: 0;
  padding: 4px 14px 3px;
  background: linear-gradient(#07151d, #10242c);
  border: 1px solid #526b76;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: inset 0 2px 8px #0006, 0 1px #c2e1ed14;
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.command-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.2;
  color: #c4d8df;
}
.command-heading strong {
  color: #ffd296;
  font: 600 16px ui-monospace, Consolas, "Meiryo", monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.command-burn {
  justify-self: end;
  font-size: 12px;
  color: #9cb1bb;
}
.nozzle-command.firing .command-burn {
  color: #ffd296;
}
.command-scale {
  position: relative;
  height: 18px;
  margin: 0 8px;
}
.command-track {
  position: absolute;
  inset: 9px 0 3px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #91abb33d calc(10% - 1px) 10%), #020b12;
  border: 1px solid #45616c;
  border-radius: 2px;
}
.command-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  background: #b38b50;
}
.nozzle-command.firing .command-fill {
  background: #ffba62;
  box-shadow: 0 0 10px #ffba6255;
}
.command-centre {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: #8edee7;
}
.command-marker {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 4px #ffc27866);
}
.command-marker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #ffd296;
}
.command-marker::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 8px;
  width: 2px;
  background: #ffd296;
}
.command-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 1px;
  color: #9cb8c3;
  font-size: 12px;
  line-height: 1;
}
.command-labels span:nth-child(2) { text-align: center; color: #b9dce0; }
.command-labels span:last-child { text-align: right; }
.deck-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 9px 0;
}
.control-copy {
  min-width: 0;
}
#touchGuide {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  color: #acbfc8;
  line-height: 1.7;
}
#touchGuide b {
  color: #e1edf1;
  font-size: 13px;
  white-space: nowrap;
}
#flightHint {
  font-size: 11px;
  color: #92a9b5;
  line-height: 1.6;
  margin: 5px 0 0;
  min-height: 18px;
}
.restart {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 164px;
  min-height: 62px;
  padding: 8px 22px;
  background: linear-gradient(#ffd08a, #efa64c);
  color: #2e2112;
  border: 1px solid #ffe2b2;
  box-shadow:
    inset 0 1px #fff7,
    0 4px 0 #865c2d,
    0 6px 9px #0005;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1.2;
}
.restart > span:first-child {
  font: 32px Arial, sans-serif;
}
.restart small {
  display: block;
  font:
    9px ui-monospace,
    Consolas,
    monospace;
  letter-spacing: .2em;
  margin-top: 5px;
  color: #62431d;
}
.restart:active:not(:disabled) {
  translate: 0 2px;
  box-shadow: inset 0 1px #fff7, 0 2px 0 #865c2d;
}
.eyebrow {
  display: block;
  font:
    10px ui-monospace,
    Consolas,
    monospace;
  letter-spacing: .16em;
  color: #94b4c3;
}
.briefing,
.result-panel {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: min(90%, 390px);
  max-height: calc(100% - 26px);
  overflow-y: auto;
  padding: 25px 27px;
  background:
    linear-gradient(
      140deg,
      #1c303ced,
      #101e27f7);
  border: 1px solid #79929e;
  border-radius: 6px;
  box-shadow: inset 0 1px #c9e8f012, 0 18px 60px #00101966;
}
.briefing::before,
.result-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 3px;
  background: var(--cyan);
}
.briefing h2,
.result-panel h2 {
  font-size: 1.65rem;
  line-height: 1.5;
  letter-spacing: .04em;
  margin: 12px 0;
}
.briefing p,
.result-panel p {
  font-size: 13px;
  line-height: 1.85;
  color: #b6cbd4;
  margin: 0;
}
.mission-sketch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 21px 0;
  color: #c5d9e2;
  font-size: 11px;
}
.mission-sketch i {
  color: #8aabb8;
  font: 22px Arial;
}
.sketch-gate {
  border: 1px dashed var(--amber);
  color: var(--amber);
  padding: 12px 9px;
}
.briefing > .primary,
.result-panel > .primary {
  width: 100%;
  text-align: left;
  margin-top: 9px;
  min-height: 46px;
}
.briefing .first-hint {
  margin-top: 17px;
  font-size: 11px;
  color: #8da7b5;
}
.pause-banner {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0a1a23ae;
  pointer-events: none;
  backdrop-filter: blur(3px);
}
.pause-banner strong {
  font-size: 1.6rem;
  letter-spacing: .1em;
}
.pause-banner span {
  color: #b6cad4;
  font-size: 12px;
}
.outcome-banner {
  position: absolute;
  z-index: 3;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 460px);
  padding: 14px 17px;
  text-align: center;
  pointer-events: none;
  color: #e7f1f5;
  background: #071922d9;
  border-top: 1px solid #7da5b966;
  border-bottom: 1px solid #7da5b966;
  box-shadow: 0 12px 26px #0a1e2730;
}
.outcome-banner > .eyebrow {
  color: #9dbdcb;
  font-size: 9px;
}
.outcome-banner > strong {
  display: block;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: .08em;
  line-height: 1.5;
  margin: 5px 0;
}
.outcome-banner p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  color: #bdd0d9;
}
.outcome-banner button {
  pointer-events: auto;
  font-size: 11px;
  margin-top: 9px;
  padding: 5px 12px;
}
.outcome-banner[data-kind=success] > strong {
  color: var(--green);
}
.outcome-banner[data-kind=splash] > strong {
  color: var(--cyan);
}
.outcome-banner[data-kind=topple] > strong,
.outcome-banner[data-kind=crash] > strong {
  color: #ffb891;
}
.news-flash {
  position: absolute;
  z-index: 5;
  left: 14px;
  right: 14px;
  bottom: 16px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 14px 18px 12px;
  color: #fff;
  background: linear-gradient(100deg, #081a3af5, #102545ee);
  border-top: 4px solid #f7efd1;
  box-shadow: 0 -8px 30px #00102355, inset 0 1px #fff9;
  animation: news-arrives .24s ease-out;
}
.news-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 10px;
}
.news-kicker strong {
  padding: 4px 12px;
  background: #bc172a;
  border: 1px solid #ffd6dc;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .12em;
}
.news-kicker span {
  color: #c3cee1;
  font-size: 12px;
}
.news-flash h3 {
  color: #fff2a6;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.45;
  margin: 0 0 9px;
  text-shadow: 1px 2px #020b1c, -1px -1px #020b1c;
}
.news-flash p {
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.7;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 2px #000;
}
.news-flash button {
  display: block;
  min-height: 40px;
  margin: 10px 0 0 auto;
  padding: 5px 15px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #abbdd4;
  background: #10223a;
}
@keyframes news-arrives {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 380px) {
  .news-flash { left: 8px; right: 8px; padding: 11px 12px; }
  .news-kicker strong { padding: 4px 8px; letter-spacing: .06em; }
}
.result-panel {
  width: min(94%, 470px);
  top: 46%;
}
.result-panel h2 {
  font-size: 1.55rem;
  margin: 9px 0;
}
.result-numbers {
  display: flex;
  gap: 25px;
  margin: 17px 0;
  font:
    500 25px ui-monospace,
    Consolas,
    monospace;
  font-variant-numeric: tabular-nums;
  color: #d3e6ed;
}
.result-numbers.scored {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid #54717e73;
  border-bottom: 1px solid #54717e73;
}
.result-numbers em {
  font-style: normal;
  font-size: 12px;
  margin-left: 4px;
  color: #9fb9c6;
}
.result-numbers small {
  display: block;
  font:
    10px "Yu Gothic UI",
    "Meiryo",
    sans-serif;
  line-height: 1.7;
  color: #98b2bf;
  margin-top: 5px;
  white-space: nowrap;
}
.total-score {
  color: var(--green);
}
.result-panel .impact-detail {
  font-size: 10px;
  line-height: 1.8;
  color: #90aab8;
  margin: 8px 0 10px;
}
.result-panel #saveState {
  font-size: 10px;
  color: #9acbbb;
  min-height: 18px;
  margin: 12px 0 5px;
}
.result-panel #saveState button {
  font-size: 10px;
  text-decoration: underline;
  padding: 4px 6px;
  color: var(--amber);
}
.result-panel:not([hidden]) {
  animation: score-arrives .24s ease-out;
}
@keyframes score-arrives {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.records-section {
  margin: 34px 0 20px;
  padding: 23px;
  background: #101c24;
  border: 1px solid #3c505d;
  border-radius: 6px;
  box-shadow: inset 0 1px #ffffff08;
}
.records-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.records-heading h2 {
  font-size: 1.3rem;
  letter-spacing: .08em;
  margin: 7px 0 16px;
}
.pilot-name {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: #afc2cc;
}
.pilot-name input {
  background: #09151d;
  border: 1px solid #49616f;
  border-radius: 3px;
  padding: 10px 12px;
  width: 180px;
  font-size: 13px;
  color: var(--ink);
}
.record-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.record-tabs button {
  background: transparent;
  color: #a5bdc9;
  font-size: 13px;
  min-width: 66px;
}
.record-tabs .selected {
  background: #254656;
  color: #c9f3f7;
  border: 1px solid #588295;
}
.record-tabs #refresh {
  margin-left: auto;
  min-width: 0;
}
.records-section > p {
  font-size: 11px;
  color: #9cb3c0;
  line-height: 1.8;
}
.score-guide button {
  font-size: 11px;
  padding: 3px 8px;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}
th {
  font-size: 11px;
  color: #91acbc;
  font-weight: 500;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}
td {
  font-size: 12px;
  padding: 15px 13px;
  border-bottom: 1px solid #2d4350;
}
td:nth-child(3),
td:nth-child(4),
td:nth-child(5),
td:nth-child(6),
td:nth-child(7),
td:nth-child(8) {
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  font-variant-numeric: tabular-nums;
}
tr.mine {
  background: #17392f;
}
td.rank-metric {
  color: var(--green);
  font-weight: 800;
}
.status-good {
  color: var(--green);
}
.status-bad {
  color: #d4b492;
}
#more {
  margin-top: 16px;
  font-size: 12px;
}
.page-footer {
  font-size: 11px;
  color: #829aa8;
  line-height: 1.9;
  padding: 8px 0 25px;
  max-width: 760px;
}
dialog {
  border: 1px solid #647b89;
  border-radius: 7px;
  max-width: 610px;
  width: calc(100% - 28px);
  max-height: 86dvh;
  overflow: auto;
  background: #152630;
  color: var(--ink);
  padding: 27px;
  box-shadow: 0 25px 100px #0008;
}
dialog::backdrop {
  background: #030e16c4;
  backdrop-filter: blur(4px);
}
dialog h2 {
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 12px 0 22px;
}
dialog ol {
  padding-left: 22px;
}
dialog li {
  font-size: 13px;
  line-height: 1.95;
  margin: 16px 0;
  padding-left: 4px;
  color: #b2c9d4;
}
dialog b {
  display: block;
  color: #e3eef2;
}
dialog p {
  font-size: 12px;
  line-height: 1.95;
  color: #b2c9d4;
}
.dialog-close {
  float: right;
  padding: 3px 6px;
  font-size: 12px;
}
.landing-limits {
  background: #203e49;
  border-left: 2px solid var(--cyan);
  padding: 15px 17px;
  margin: 20px 0;
}
.landing-limits strong {
  font-size: 13px;
  color: #d5eeee;
}
.landing-limits p {
  margin: 6px 0 0;
  font-size: 12px;
}
dialog details {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 20px 0;
}
dialog summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--cyan);
}
.keyboard-help {
  font-size: 11px;
}
dialog form:last-child {
  margin-top: 22px;
}
@media (min-width: 1700px) {
  .app {
    max-width: 1670px;
  }
  .viewport {
    max-height: 1100px;
  }
}
@media (max-width: 780px) {
  .app {
    padding: 0 6px;
  }
  .masthead {
    padding: 7px 3px;
    gap: 6px;
  }
  .brand {
    gap: 8px;
  }
  .brand h1 {
    font-size: 1.05rem;
  }
  .brand p {
    display: none;
  }
  .mission-mark {
    font-size: 16px;
    padding: 4px 6px;
  }
  .mission-mark span {
    font-size: 8px;
  }
  .masthead nav {
    gap: 6px;
    font-size: 10px;
  }
  .masthead nav button {
    font-size: 10px;
    padding: 7px;
  }
  .flight-deck {
    padding: 0 3px 6px;
    border-radius: 9px;
  }
  .flight-deck::before,
  .flight-deck::after {
    top: 9px;
    width: 5px;
    height: 5px;
  }
  .flight-deck::before {
    left: 7px;
  }
  .flight-deck::after {
    right: 7px;
  }
  .instrument-bar {
    padding: 6px 9px;
    gap: 6px;
  }
  .clock {
    min-width: 98px;
    padding: 3px 8px;
  }
  .clock > span {
    font-size: 8px;
  }
  .clock strong {
    font-size: 24px;
  }
  .clock small {
    font-size: 10px;
  }
  .mission {
    font-size: 10px;
    gap: 12px;
  }
  .mission li {
    gap: 4px;
  }
  .mission b {
    display: none;
  }
  .mission li::before {
    width: 4px;
    height: 4px;
  }
  .instrument-bar > button {
    font-size: 10px;
    padding: 6px 8px;
    min-height: 34px;
  }
  .viewport {
    height: calc(100svh - 190px);
    min-height: 320px;
    max-height: 850px;
  }
  .display-id {
    font-size: 8px;
    left: 10px;
    top: 9px;
  }
  .engine-instrument {
    left: 8px;
    top: 27px;
    width: 92px;
    padding: 5px 6px 4px;
  }
  .nozzle-schematic {
    height: 56px;
  }
  .instrument-title,
  .instrument-title strong {
    font-size: 9px;
  }
  .nozzle-numbers b {
    font-size: 13px;
  }
  .engine-instrument > small {
    font-size: 8px;
    margin-top: 4px;
  }
  .map-toggle {
    top: calc((100vw - 22px) * .186 + 23px);
    right: 12px;
    font-size: 10px;
    padding: 5px 8px;
  }
  .pilot-control{height:76px;padding:4px 12px 6px}
  .pilot-labels,.pilot-labels strong{font-size:11px}
  .deck-footer {
    padding: 6px 5px 0;
    gap: 10px;
  }
  #touchGuide {
    display: block;
    font-size: 10px;
    line-height: 1.8;
  }
  #touchGuide b {
    font-size: 12px;
    display: block;
  }
  #touchGuide span {
    display: block;
  }
  #flightHint {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 3px;
    min-height: 0;
  }
  .restart {
    min-width: 129px;
    min-height: 62px;
    gap: 9px;
    padding: 8px 13px;
    font-size: 15px;
  }
  .restart > span:first-child {
    font-size: 28px;
  }
  .restart small {
    font-size: 8px;
  }
  .briefing {
    padding: 21px 23px;
    width: min(88%, 350px);
  }
  .briefing h2 {
    font-size: 1.45rem;
  }
  .briefing p {
    font-size: 12px;
  }
  .mission-sketch {
    margin: 15px 0;
  }
  .briefing .first-hint {
    font-size: 10px;
    margin-top: 14px;
  }
  .result-panel {
    padding: 20px;
    width: min(94%, 440px);
    top: 45%;
  }
  .result-panel h2 {
    font-size: 1.35rem;
  }
  .result-panel p {
    font-size: 12px;
  }
  .result-numbers {
    font-size: 22px;
    gap: 18px;
    margin: 14px 0;
  }
  .result-numbers.scored {
    gap: 8px;
    padding: 12px 0;
  }
  .result-numbers small {
    font-size: 9px;
  }
  .result-panel .impact-detail {
    font-size: 9px;
  }
  .records-section {
    margin-top: 24px;
    padding: 17px 13px;
  }
  .records-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
  }
  .records-heading h2 {
    font-size: 1.15rem;
  }
  .pilot-name {
    font-size: 11px;
    margin: 0 0 16px;
  }
  .pilot-name input {
    font-size: 16px;
    width: 170px;
    padding: 8px 10px;
  }
  .record-tabs {
    gap: 4px;
  }
  .record-tabs button {
    font-size: 12px;
    padding: 8px;
    min-width: 46px;
  }
  .records-section th,
  .records-section td {
    font-size: 11px;
    padding: 11px;
  }
  .outcome-banner {
    top: 28%;
    padding: 11px 13px;
  }
  .outcome-banner p {
    font-size: 11px;
  }
  .page-footer {
    font-size: 10px;
  }
}
@media (max-width: 360px) {
  .app {
    padding: 0 5px;
  }
  .mission-mark {
    display: none;
  }
  .brand h1 {
    font-size: 1rem;
  }
  .masthead nav {
    gap: 4px;
  }
  .masthead nav a {
    font-size: 9px;
  }
  .mission {
    gap: 7px;
  }
  .clock {
    min-width: 88px;
  }
  .clock strong {
    font-size: 22px;
  }
  .instrument-bar {
    padding-left: 7px;
    padding-right: 6px;
  }
  .restart {
    min-width: 116px;
    padding: 8px 9px;
    font-size: 14px;
  }
  .deck-footer {
    gap: 7px;
  }
  #touchGuide span {
    font-size: 9px;
  }
  .briefing {
    padding: 17px 19px;
  }
  .briefing h2 {
    font-size: 1.3rem;
  }
  .mission-sketch {
    margin: 12px 0;
  }
  .result-numbers {
    font-size: 20px;
  }
  .result-numbers small {
    font-size: 8px;
  }
  .record-tabs button {
    font-size: 11px;
    padding: 7px;
  }
  .map-toggle {
    top: calc((100vw - 22px) * .186 + 23px);
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .nozzle-command {
    padding: 4px 14px;
  }
  .command-heading strong {
    font-size: 14px;
  }
  .command-labels {
    display: none;
  }
  .app {
    padding: 0 8px;
  }
  .masthead {
    padding: 7px 3px;
  }
  .brand p {
    display: none;
  }
  .brand h1 {
    font-size: 1rem;
  }
  .mission-mark {
    display: none;
  }
  .instrument-bar {
    padding: 5px 10px;
  }
  .clock {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 140px;
    padding: 3px 9px;
  }
  .clock strong {
    font-size: 21px;
  }
  .instrument-bar > button {
    min-height: 30px;
  }
  .viewport {
    height: calc(100svh - 142px);
    min-height: 180px;
    max-height: none;
  }
  .deck-footer {
    padding-top: 7px;
    gap: 12px;
  }
  .restart {
    min-height: 48px;
    min-width: 140px;
    gap: 9px;
    font-size: 14px;
  }
  .restart small {
    display: none;
  }
  .restart > span:first-child {
    font-size: 25px;
  }
  #touchGuide {
    display: flex;
    font-size: 10px;
    gap: 10px;
  }
  #touchGuide b {
    display: inline;
    font-size: 11px;
  }
  #flightHint {
    font-size: 9px;
    margin-top: 1px;
  }
  .pilot-control{height:56px;padding:4px 18px}
  .pilot-labels,.pilot-labels strong{line-height:12px;font-size:10px}
  .pilot-rail{height:34px;margin:1px 24px 0}
  .pilot-knob{width:34px;height:34px;padding:4px}
  .pilot-knob-face i{height:8px;top:2px}
  .display-id {
    display: none;
  }
  .engine-instrument {
    width: 88px;
    top: 7px;
    left: 8px;
    padding: 4px 5px;
  }
  .nozzle-schematic {
    height: 48px;
  }
  .engine-instrument > small {
    display: none;
  }
  .nozzle-numbers b {
    font-size: 11px;
  }
  .instrument-title,
  .instrument-title strong {
    font-size: 8px;
  }
  .map-toggle {
    top: 12px;
    right: calc(min(170px, 36%) + 25px);
  }
  .briefing,
  .result-panel {
    top: 50%;
    max-height: calc(100% - 14px);
    padding: 13px 21px;
  }
  .briefing h2,
  .result-panel h2 {
    font-size: 1.2rem;
    margin: 6px 0;
  }
  .briefing p,
  .result-panel p {
    font-size: 11px;
  }
  .briefing > .primary {
    margin-top: 12px;
    min-height: 36px;
    padding: 7px 12px;
  }
  .briefing .first-hint {
    margin-top: 10px;
  }
  .mission-sketch {
    display: none;
  }
  .eyebrow {
    font-size: 9px;
  }
  .result-numbers.scored {
    padding: 8px 0;
    margin: 10px 0;
    font-size: 20px;
  }
  .result-panel > .primary {
    min-height: 36px;
    padding: 7px 12px;
  }
  .outcome-banner {
    top: 12%;
    padding: 8px 12px;
    width: 360px;
  }
  .outcome-banner > strong {
    font-size: 1.2rem;
    margin: 2px 0;
  }
  .outcome-banner button {
    padding: 3px 8px;
    margin-top: 5px;
  }
  .outcome-banner p {
    font-size: 10px;
  }
}
@media (max-width: 780px) and (max-height: 640px) and (orientation: portrait) {
  .viewport {
    min-height: 220px;
  }
  .briefing {
    padding: 16px 20px;
    top: 50%;
  }
  .briefing h2 {
    font-size: 1.25rem;
    margin: 7px 0;
  }
  .briefing p {
    font-size: 11px;
  }
  .mission-sketch {
    display: none;
  }
  .briefing > .primary {
    margin-top: 15px;
    min-height: 42px;
  }
  .briefing .first-hint {
    margin-top: 12px;
  }
  .result-panel {
    padding: 16px 18px;
    top: 50%;
  }
  .result-panel h2 {
    font-size: 1.2rem;
  }
  .result-panel p {
    font-size: 11px;
  }
  .result-numbers.scored {
    padding: 10px 0;
    margin: 12px 0;
  }
  .result-panel > .primary {
    min-height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Leaderboard scores use the same three components as the result panel. */
.records-section td.record-score{min-width:76px;padding-left:10px;padding-right:10px;font-size:14px}
.record-time{display:block;font-size:10px;font-weight:400;color:#b3cbd5;margin-top:5px}

/* Flight paths and the tucked-away mission-control log share the deck's instruments. */
#gameTitle{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.trace-button{min-height:40px;padding:7px 12px;border:1px solid #648c9b;border-radius:3px;background:linear-gradient(#274652,#1a313d);color:#d7eff0;font-size:12px;white-space:nowrap;touch-action:manipulation}
.trace-button:hover{background:#355967}.trace-button:focus-visible{outline:2px solid #b5eadc;outline-offset:3px}
.record-trace{display:block;margin-top:7px;min-height:36px;padding:6px 10px;font-size:11px}
.result-flight{margin:13px 0;padding:10px;border:1px solid #476675;border-radius:4px;background:#101f29}
.trace-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.trace-heading h3{margin:0;font-size:13px;font-weight:500;color:#d0e6ed}
.trace-heading .trace-button{min-height:34px;padding:5px 10px}
.trajectory-chart{display:block;width:100%;height:auto;border-radius:3px;overflow:hidden}
.trajectory-chart text{font:12px 'Yu Gothic UI',Meiryo,sans-serif;fill:#a6c6d4}
.trace-bg{fill:#10212c}.trace-grid{fill:none;stroke:#325164;stroke-width:1;stroke-dasharray:3 5}
.trace-sea{fill:none;stroke:#638ca0;stroke-width:1.5}.trace-pad{fill:none;stroke:#ffe1a0;stroke-width:5;stroke-linecap:round}
.trace-gate{fill:#8bd6c810;stroke:#8bd6c8;stroke-width:1.4;stroke-dasharray:6 4}
.trace-burn{fill:none;stroke:#ffc071;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trace-coast{fill:none;stroke:#86d7ed;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.trace-attitude{fill:#eaf7fc;stroke:#10212c;stroke-width:1}.trace-start{fill:#eaf7fc;stroke:#10212c;stroke-width:2}.trace-passed{fill:#a7eed1;stroke:#10212c;stroke-width:2}
.trajectory-chart .trace-end{fill:#eef8f6;font-weight:600}
.trace-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 14px;font-size:10px;color:#b6ced9;margin:8px 0 0;line-height:1.7}
.trace-legend span{display:inline-flex;align-items:center;gap:5px}.burn-key:before,.coast-key:before{content:'';display:inline-block;width:15px;height:3px;border-radius:1px;background:#ffc071}.coast-key:before{background:#86d7ed}
.trace-dialog{max-width:820px}.trace-dialog h2,.log-dialog h2{margin-bottom:8px}
.trace-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.trace-details>div{padding:9px 10px;border:1px solid #41616e;background:#19323d;border-radius:3px;min-width:0}
.trace-details dt{font-size:11px;color:#abc6d3;line-height:1.5}.trace-details dd{font:500 15px ui-monospace,Consolas,monospace;color:#e5f2ef;margin:5px 0 0;overflow-wrap:anywhere}
.trace-dialog .trace-legend{font-size:12px}.trace-empty{padding:30px 12px;text-align:center}
.log-dialog{max-width:1160px;max-height:92svh}
.log-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:18px 0}
.log-toolbar label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#bcd1dc}
.log-toolbar select{min-height:42px;min-width:140px;background:#0e2531;border:1px solid #57798a;color:#e0eff2;border-radius:3px;padding:8px 28px 8px 10px;font:inherit}
.log-toolbar .secondary{min-height:42px;margin:0}
.log-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.log-stat-grid>div{padding:10px 12px;background:linear-gradient(#213c47,#1a303b);border:1px solid #42616f;border-radius:3px}
.log-stat-grid span{display:block;font-size:11px;color:#b1c8d4}.log-stat-grid strong{display:block;font:600 22px ui-monospace,Consolas,monospace;color:#d9f3e6;margin-top:6px}
.log-dialog .log-average{font-size:12px;color:#c8e0e3}.log-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:14px 0}
.log-reasons>div{display:flex;align-items:center;gap:8px;font-size:11px;color:#bdd5df}.log-reasons span{min-width:110px}.log-reasons i{height:5px;flex:1;background:#304d5d;min-width:30px}.log-reasons b{height:100%;background:#92c9bb}
.log-reasons strong{font:12px ui-monospace,Consolas,monospace;min-width:22px;text-align:right}
.log-bands{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 18px}
.log-bands>div{min-width:0;font-size:10px;color:#b4ced9}.log-bands strong{display:block;font:14px ui-monospace,Consolas,monospace;color:#d7eadf;margin:4px 0}.log-bands i{display:block;background:#2b4757;height:5px}.log-bands b{background:#92c9bb;height:100%}
.log-dialog .table-wrap{max-height:45svh;border:1px solid #3c5c6c;border-radius:3px}
.log-dialog th{position:sticky;top:0;background:#1c3542;z-index:1}.log-dialog td{padding:10px 12px}.log-dialog td:nth-child(3){font-family:inherit}.log-dialog td small{display:block;color:#97b5c4;font-size:10px;margin-top:4px}
.log-dialog #logMore{margin-top:12px}.log-dialog .log-note{font-size:11px;color:#a6c0cd}
@media(max-width:600px){.trace-dialog,.log-dialog{padding:17px;width:calc(100% - 18px)}.trace-details{grid-template-columns:repeat(2,minmax(0,1fr))}.log-stat-grid{gap:7px}.log-stat-grid>div{padding:9px}.log-stat-grid strong{font-size:18px}.log-reasons{grid-template-columns:1fr}.log-toolbar{gap:8px}.log-toolbar select{min-width:120px}.result-flight{padding:7px}.trace-heading h3{font-size:12px}}

/* Result instruments: every headline value is a score. Raw measurements live below. */
.result-panel{top:50%;width:min(94%,520px);padding:20px;max-height:calc(100% - 20px);scrollbar-width:thin;scrollbar-color:#52737e #12232d;touch-action:pan-y;overscroll-behavior:contain}
.result-numbers.scored{gap:8px;padding:12px 0;margin:12px 0 6px}
.result-numbers.scored>div{min-width:0}
.result-numbers.scored>.total-score{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px 12px;border:1px solid #568a7770;border-radius:3px;background:linear-gradient(110deg,#173730,#102c2d)}
.result-numbers .total-score small{margin:0;color:#bdebd5;font-size:13px}
.result-numbers .total-score strong{font-size:38px;line-height:1.1}
.result-numbers .total-score span{margin:0;color:#b4d7ca}
.records-section td small{display:block;font-size:10px;color:#a5bac5;margin-top:3px}
.result-numbers.scored small{font-size:12px;margin:0 0 6px;color:#bfd2db}
.result-numbers strong{display:block;font:600 29px ui-monospace,Consolas,monospace;letter-spacing:-.03em}
.result-numbers span{display:block;font:12px 'Yu Gothic UI',Meiryo,sans-serif;color:#9db4c0;margin-top:4px}
.result-numbers em{font-size:11px;margin-left:3px}
.result-panel .flight-summary{font-size:12px;color:#b4cbd5;margin:4px 0 12px}
.unscored{font:12px 'Yu Gothic UI',Meiryo,sans-serif;color:#a9beca}
.landing-assessment{padding:12px;background:#172d38;border:1px solid #466472;border-radius:4px;margin-top:10px}
.assessment-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.assessment-heading h3{font-size:14px;font-weight:600;margin:0;color:#d6e8ec}
.assessment-heading>strong{color:#b8f1df;font:600 17px ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.result-panel .assessment-grade{font-size:12px;color:#b2d7d8;margin:3px 0 8px}
.posture-details{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
.posture-item>span{display:flex;justify-content:space-between;gap:5px;font-size:12px;color:#c3d8e1;flex-wrap:wrap}
.posture-item b{font:12px ui-monospace,Consolas,monospace;color:#e2edf1}
.posture-item small{font-size:11px;color:#adc7d4;margin-left:2px;font-weight:400}
.posture-item>strong{display:block;font:13px ui-monospace,Consolas,monospace;color:#c1e9e1;margin:4px 0}
.posture-item>i{display:block;height:3px;background:#324b57;overflow:hidden}
.posture-item>i>i{display:block;height:100%;background:#80c7b9}
.landing-precision{margin-top:12px;padding-top:12px;border-top:1px solid #49616d}
.offset-reading{display:flex;align-items:baseline;gap:10px;font-size:12px;color:#c4dae3}
.offset-reading strong{font:600 16px ui-monospace,Consolas,monospace;color:#dcf1f3}
.precision-track{position:relative;height:10px;margin-top:11px;background:linear-gradient(90deg,#37525e,#9dceb7 50%,#37525e);border-radius:2px}
.precision-center{position:absolute;left:50%;width:1px;top:-3px;bottom:-3px;background:#d2eee3}
.precision-marker{position:absolute;top:-4px;bottom:-4px;width:4px;transform:translateX(-50%);border:1px solid #173c48;background:#fff6d3;box-shadow:0 0 6px #fff6d350}
.precision-labels{display:flex;justify-content:space-between;font-size:11px;color:#b1cddd;margin-top:5px}
.landing-precision>small{display:block;font-size:11px;line-height:1.7;color:#b0ced8;margin-top:6px}
.pilot-standing{padding:12px;margin-top:12px;border:1px solid #a98b4e;background:linear-gradient(110deg,#39352888,#22353d88);border-radius:4px}
.result-panel .pilot-standing #standingPopulation{font-size:15px;font-weight:700;line-height:1.7;color:#ffe1a0;margin:0 0 12px}
.pilot-standing h3{font-size:12px;font-weight:400;color:#b9d3dd;margin:0 0 7px}
.standing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.standing-cards>div{min-width:0;padding:8px 4px;background:#0d202980;text-align:center;border:1px solid #52666c88;border-radius:3px}
.standing-cards span{display:block;font-size:12px;color:#a9c0cd}
.standing-cards strong{display:block;font:600 20px ui-monospace,Consolas,monospace;color:#d1e0e7;margin:3px 0}
.standing-cards strong small{font-size:10px;margin-left:3px}
.standing-cards b{display:block;font-size:11px;color:#a8c9bb;font-weight:500}
.standing-cards>.standing-total{grid-column:1/-1;padding:12px 8px;background:linear-gradient(135deg,#51422588,#1b333ae6);border-color:#c5a15c;box-shadow:inset 0 1px #f8da9420}
.standing-cards .standing-total>span{font-size:14px;font-weight:600;letter-spacing:.04em;color:#f0d597}
.standing-cards .standing-total>strong{font-size:clamp(32px,9vw,42px);color:#fff1c8;line-height:1.15;margin:7px 0 5px}
.standing-cards .standing-total>strong small{font-size:16px;margin-left:5px}
.standing-cards .standing-total>b{font-size:14px;color:#e6d5a9}
.trace-secret{fill:none;stroke:#9b927a;stroke-width:1.3;stroke-linejoin:round}
/* The flight report settles quickly; controls remain available throughout. */
.result-seal{display:inline-flex;align-items:center;gap:9px;min-height:30px;padding:5px 12px;margin-bottom:13px;border:1px solid #678693;color:#b7d1dc;font-size:12px;letter-spacing:.08em;background:#172d39}
.result-seal::before{content:'•';font-size:16px}
.result-seal.seal-success{color:#c6f4db;border-color:#81b9a1;background:#1a3a31}.seal-success::before{content:'✓'}
.result-seal.seal-secret{color:#ffe1ae;border-color:#bb985e;background:#3b3025}.seal-secret::before{content:'✦'}
.result-panel[data-kind="secret"]{border-color:#ba9d6c;background:linear-gradient(155deg,#302b24,#0e222e 75%)}
.result-panel.result-enter{animation:report-arrival .26s ease-out both}
.result-enter .result-seal{animation:report-stamp .32s .06s ease-out both}
.result-numbers.scored>div{position:relative;overflow:hidden;padding-bottom:12px}
.result-numbers.scored>div::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#9ac9ba;transform-origin:left;transform:scaleX(var(--score-progress))}
.result-numbers.scored>.total-score::after{background:#f6d598}
.result-enter .result-numbers.scored>div::after{animation:score-fill .65s .16s ease-out both}
.result-enter .result-numbers.scored>div:nth-child(3)::after{animation-delay:.26s}
.result-enter .result-numbers.scored>div:nth-child(4)::after{animation-delay:.36s}
.result-enter .standing-total{animation:rank-settle .45s .85s ease-out both}
.result-panel[data-reveal="complete"] .total-score{box-shadow:inset 0 0 22px #f3cf7c13}
.secret-discovery{grid-column:1/-1;text-align:center;border:1px solid #b99b65;background:linear-gradient(135deg,#4b3c27,#18333d);padding:20px 12px;color:#ffe3aa}
.secret-discovery span{display:block;font-size:12px;letter-spacing:.1em}.secret-discovery strong{display:block;font-size:24px;margin:7px 0}.secret-discovery small{display:block;font-size:12px;color:#cfc3a7}
.result-panel[data-kind="secret"] .secret-discovery{position:relative;isolation:isolate;padding:20px 12px 22px;background:radial-gradient(ellipse at 50% 18%,#bc8f4b35,transparent 62%),linear-gradient(145deg,#332e24,#102936);box-shadow:inset 0 0 35px #f1cd7d10}
.secret-medal{display:block;width:104px;height:104px;margin:0 auto 12px;filter:drop-shadow(0 0 13px #ebc98038)}
.secret-discovery .discovery-subtitle{display:block;color:#cfddcd;font-size:12px;line-height:1.7;margin:8px 0 0}
.result-enter .secret-medal{animation:discovery-emblem .8s .12s ease-out both}
.result-enter[data-kind="secret"] .result-seal{border-color:#e6c37a;box-shadow:0 0 18px #e7c97d20}
.outcome-actions{display:flex;justify-content:center;align-items:center;gap:10px}
.secret-ending .viewport{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.secret-ending #nozzleCommand,.secret-ending #pilotControl{display:none}
.secret-ending .flight-image{grid-row:1;grid-column:1}
.secret-ending .engine-instrument,.secret-ending .map-toggle,.secret-ending .display-id{visibility:hidden}
.secret-ending #outcomeBanner{position:absolute;top:var(--secret-caption-top,20%);left:var(--secret-caption-left,50%);transform:translateX(-50%);width:min(calc(100% - 24px),460px);max-height:calc(100% - 80px);overflow-y:auto;padding:12px 16px;text-align:left;pointer-events:auto;cursor:default;touch-action:manipulation;user-select:none;border:1px solid #c3ac7ab3;border-radius:5px;background:linear-gradient(120deg,#10232bf5,#15232cf5);box-shadow:0 6px 24px #020c1399,0 0 14px #ddc48a12}
.secret-ending #outcomeBanner>strong{color:#ffe4ae;font-size:17px;line-height:1.4;letter-spacing:.03em;margin:6px 0}
.secret-ending #outcomeBanner>.eyebrow{color:#c7b98d}
.secret-ending #outcomeBanner p{color:#d3e3e6;font-size:13px;line-height:1.6}
.secret-ending #outcomeStep{position:absolute;right:16px;top:12px;color:#adbeae;font:10px ui-monospace,Consolas,monospace}
.secret-ending .outcome-actions{display:none}
.secret-autoplay{display:flex;align-items:center;gap:12px;margin-top:10px;color:#aebfae;font-size:10px}
.secret-story-track{height:2px;flex:1;background:#99ccb626;overflow:hidden}
.secret-story-track>i{display:block;width:100%;height:100%;background:#d4c58c;transform:scaleX(0);transform-origin:left}
.secret-ending #outcomeBanner button{margin:0;min-height:40px;font-size:12px;padding:8px 14px}
@keyframes discovery-emblem{from{opacity:0;scale:.86;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.result-enter .secret-medal{animation:none}}
@media(max-height:600px) and (orientation:landscape){.secret-ending #outcomeBanner{width:min(calc(100% - 24px),560px);padding:8px 14px}.secret-ending #outcomeStep{top:8px;right:14px}.secret-ending #outcomeBanner>strong{font-size:15px;margin:4px 0}.secret-ending #outcomeBanner p{font-size:12px}.secret-autoplay{margin-top:8px}}
.image-share-actions{display:flex;flex-wrap:wrap;gap:8px}.image-share-actions>button{flex:1 1 140px;min-height:44px;padding:9px 10px;font-size:12px;border-color:#607e8e}
.image-share-actions>button:disabled{opacity:.55}
.result-panel .image-share-state{font-size:11px;color:#a9c4cf;line-height:1.6;margin:7px 0 12px}
.sound-button{white-space:nowrap;min-height:34px;font-size:11px}
@keyframes report-arrival{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes report-stamp{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes score-fill{from{transform:scaleX(0)}to{transform:scaleX(var(--score-progress))}}
@keyframes rank-settle{from{opacity:.4;box-shadow:inset 0 0 26px #ffdc9b40}to{opacity:1;box-shadow:inset 0 1px #f8da9420}}
@media(prefers-reduced-motion:reduce){.result-panel.result-enter,.result-enter .result-seal,.result-enter .result-numbers.scored>div::after,.result-enter .standing-total{animation:none}}
@media(max-width:380px){.masthead nav{gap:3px}.masthead nav>a{font-size:10px}.sound-button{padding:5px 6px}.result-seal{margin-bottom:9px}.secret-discovery strong{font-size:21px}}
.pilot-standing>small{display:block;font-size:11px;line-height:1.7;color:#bbcfc9;margin-top:8px}
.result-panel .standing-state{font-size:12px;color:#cfc09d;margin:10px 0 0}
.outcome-banner[data-kind="space"]{top:22%;border-color:#8ab8d4;background:#0c1727e8}
@media(max-width:380px){.result-panel{padding:14px}.result-numbers strong{font-size:24px}.landing-assessment,.pilot-standing{padding:10px}.posture-details{gap:8px}.assessment-heading>strong{font-size:16px}}
.flight-deck.space-ending .engine-instrument,.flight-deck.space-ending .map-toggle,.flight-deck.space-ending .display-id{visibility:hidden}
@media(max-height:600px) and (orientation:landscape){.outcome-banner[data-kind="space"]{top:6px;padding:7px 12px;width:min(94%,680px);display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left}.outcome-banner[data-kind="space"]>.eyebrow{display:none}.outcome-banner[data-kind="space"]>strong{font-size:16px;margin:0}.outcome-banner[data-kind="space"] p{font-size:11px}.outcome-banner[data-kind="space"] button{margin:0}}

/* Keep the command readout above the finger, and teach the same input before ignition. */
.brand{min-width:0}.brand h1{font-size:1.2rem;letter-spacing:.02em;line-height:1.25}.brand h1 span{display:inline-block}
.control-lesson{padding:13px 0;margin:12px 0;border-top:1px solid #59748280;border-bottom:1px solid #59748280}
.control-lesson>strong{display:block;font-size:14px;font-weight:600;color:#bce5e8;margin-bottom:10px}
.control-lesson p{font-size:12px;color:#c0d5dd;margin-top:9px}
.control-diagram{display:block;width:100%;max-width:360px;height:auto;margin:0 auto;pointer-events:none}
.control-diagram>img{display:block;width:100%;height:auto;margin:4px 0}
.diagram-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 6px;font-size:13px;line-height:1.4;color:#d4e9ed;text-align:center}
.control-caption{display:block;padding:0 6px;font-size:13px;line-height:1.4;color:#d4e9ed;text-align:center}
#resultDetail{white-space:pre-line}
dialog .control-diagram{margin:16px auto}
.idle-guide{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);width:min(92%,430px);max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;padding:11px 14px;pointer-events:auto;background:#0b1d29e6;border:1px solid #81b4c0;border-radius:4px;box-shadow:0 8px 22px #0005}
.idle-guide>strong{display:block;color:#c2f0ef;font-size:14px;font-weight:600;text-align:center;margin-bottom:8px}
.idle-guide p{font-size:12px;line-height:1.6;text-align:center;color:#c0d7df;margin:8px 0 0}
.idle-guide #guideOk{display:block;width:100%;min-height:44px;padding:8px 12px;margin-top:10px;touch-action:manipulation}
.result-numbers.scored small{white-space:normal}
.share-result{display:flex;justify-content:center;align-items:center;gap:9px;min-height:44px;border:1px solid #adbdc8;border-radius:3px;color:#f5f8fa;background:linear-gradient(#263442,#14232e);text-decoration:none;font-size:14px;margin:10px 0}
.share-result>b{font:600 21px Arial,sans-serif}.share-result:hover{background:#304452}.share-result:focus-visible{outline:2px solid #a4e4ec;outline-offset:3px}
@media(max-width:780px){.brand h1{font-size:clamp(14px,3.8vw,17px);line-height:1.25}.brand h1 span{display:block}.viewport{height:calc(100svh - 196px)}}
@media(max-width:360px){.mission-mark{display:none}.masthead nav{gap:3px}.idle-guide{padding:9px 10px}.idle-guide>strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.pilot-knob,.pilot-knob-face{transition:none}}
@media(max-height:600px) and (orientation:landscape){.brand h1{font-size:16px}.brand h1 span{display:inline-block}.viewport{height:calc(100svh - 142px)}.idle-guide{left:12px;bottom:8px;transform:none;width:min(94%,560px);max-height:calc(100% - 16px);padding:8px 10px;display:grid;grid-template-columns:1.2fr 1fr;column-gap:12px}.idle-guide>strong{grid-column:1/-1;font-size:12px;margin-bottom:6px}.idle-guide .control-diagram{grid-column:1;grid-row:2/4;align-self:center}.idle-guide p{grid-column:2;font-size:11px;margin:0}.idle-guide #guideOk{grid-column:2;margin-top:6px}}