:root {
  --black: #050505;
  --white: #f1f0e9;
  --green: #a4f58a;
  --orange: #ff914d;
  --grey: #81858a;
  --line: rgba(241, 240, 233, 0.18);
  --panel: rgba(5, 5, 5, 0.92);
  /* The pilot's chosen instrument colour. Set from JS on the document root by
     applyAccent(); the default matches --green so a page with no settings read
     yet still looks like the default build. */
  --accent: #a4f58a;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --sans: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
}

body {
  user-select: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: 4px;
}

::selection {
  color: var(--black);
  background: var(--orange);
}

#space {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--black);
  transition: filter 180ms ease;
}

#space.damage-flash {
  filter: brightness(1.55);
}

.screen-fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scanlines,
.grain,
.vignette {
  position: absolute;
  inset: 0;
}

.scanlines {
  opacity: 0.16;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(5, 5, 5, 0.62) 3px,
    rgba(5, 5, 5, 0.62) 4px
  );
  mix-blend-mode: multiply;
  transition: opacity 200ms ease;
}

.no-scanlines .scanlines {
  opacity: 0;
}

.grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain-shift 0.22s steps(2) infinite;
}

.vignette {
  box-shadow: inset 0 0 180px 45px rgba(5, 5, 5, 0.88);
}

.reduced-motion .grain,
.reduced-motion .signal-dot,
.reduced-motion .system-dashes,
.reduced-motion .toast,
.reduced-motion .alert-banner,
.reduced-motion .alert-lamp.lit,
.reduced-motion .alert-board,
.reduced-motion .transmission-row.is-active .transmission-text::after {
  animation: none !important;
}

.reduced-motion .transmission-row {
  transition: none;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.5%, 1%); }
  50% { transform: translate(1%, -1.5%); }
  75% { transform: translate(1.5%, 1.5%); }
}

.hidden {
  display: none !important;
}

.interface {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: auto;
}

.screen.active {
  display: flex;
  animation: screen-in 320ms ease both;
}

@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

.signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: signal-pulse 1.4s ease-in-out infinite;
}

@keyframes signal-pulse {
  50% { opacity: 0.3; }
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(241, 240, 233, 0.55);
  border-style: solid;
}

.corner-tl { top: 28px; left: 28px; border-width: 1px 0 0 1px; }
.corner-tr { top: 28px; right: 28px; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 28px; left: 28px; border-width: 0 0 1px 1px; }
.corner-br { right: 28px; bottom: 28px; border-width: 0 1px 1px 0; }

#home-screen {
  padding: clamp(32px, 5vw, 76px);
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.77) 45%, rgba(5, 5, 5, 0.12) 100%);
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(330px, 0.72fr);
  align-items: center;
  width: min(1400px, 100%);
  height: 100%;
  margin: 0 auto;
  gap: clamp(60px, 10vw, 170px);
}

.intro-block {
  max-width: 660px;
}

.intro-block h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(82px, 10.5vw, 166px);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.72;
  text-transform: uppercase;
  text-shadow: 0 0 38px rgba(241, 240, 233, 0.08);
}

.intro-block h1 em {
  display: block;
  margin: 0.25em 0 0 0.03em;
  color: transparent;
  font-family: var(--mono);
  font-size: 0.34em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.33em;
  -webkit-text-stroke: 1px var(--orange);
}

.intro-block .year {
  display: inline-block;
  margin: 27px 0 0 4px;
  padding: 6px 10px 5px;
  color: var(--black);
  background: var(--orange);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.intro-copy {
  margin: 25px 0 33px 5px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.system-line {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  width: min(390px, 100%);
  margin-left: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.system-status {
  justify-self: end;
  color: var(--green);
}

.system-dashes {
  margin-left: 15px;
  color: var(--green);
  overflow: hidden;
  animation: dash-flicker 5s steps(1) infinite;
}

/* SAVE.LINK reports whether the pilot's progress can actually be kept. When it
   cannot, saying so plainly beats a silent failure that only shows up as a lost
   career much later. */
#storage-line.blocked .system-status,
#storage-line.blocked .system-dashes {
  color: var(--orange);
}

#storage-line.blocked .system-dashes {
  animation: none;
  opacity: 0.5;
}

@keyframes dash-flicker {
  0%, 91%, 94%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.25; }
}

.main-menu {
  border-top: 1px solid var(--line);
}

.menu-button {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 26px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0 16px 0 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease, padding 160ms ease, background 160ms ease;
}

.menu-button::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.menu-button > * {
  position: relative;
  z-index: 1;
}

.menu-button:hover,
.menu-button:focus-visible,
.menu-button:focus {
  padding-left: 14px;
  color: var(--black);
}

.menu-button:hover::before,
.menu-button:focus-visible::before,
.menu-button:focus::before {
  transform: scaleX(1);
}

.menu-index {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.menu-button:hover .menu-index,
.menu-button:focus .menu-index {
  color: var(--black);
}

.menu-label {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.menu-arrow {
  font-family: var(--mono);
  font-size: 18px;
  text-align: right;
}

.home-footer {
  position: absolute;
  right: clamp(32px, 5vw, 76px);
  bottom: 28px;
  left: clamp(32px, 5vw, 76px);
  display: flex;
  gap: clamp(18px, 3vw, 48px);
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.home-footer .footer-build {
  margin-left: auto;
  color: rgba(241, 240, 233, 0.35);
}

.sub-screen,
.overlay-screen {
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(5, 5, 5, 0.68);
  backdrop-filter: blur(2px);
}

.panel,
.overlay-panel,
.dialog {
  border: 1px solid rgba(241, 240, 233, 0.3);
  background: var(--panel);
  box-shadow: 18px 18px 0 rgba(5, 5, 5, 0.5);
}

.panel {
  width: min(520px, 100%);
  max-height: calc(100dvh - 56px);
  padding: 34px;
  overflow-y: auto;
  overflow-x: hidden;
}

.panel.wide-panel {
  width: min(960px, 100%);
}

.panel::before,
.overlay-panel::before,
.dialog::before {
  position: absolute;
  display: block;
  width: 34px;
  height: 3px;
  margin: -1px 0 0 -1px;
  content: "";
  background: var(--orange);
}

.panel,
.overlay-panel,
.dialog {
  position: relative;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.panel-header .eyebrow {
  margin-bottom: 8px;
}

.panel h2,
.overlay-panel h2,
.dialog h2 {
  margin: 0;
  /* Last-resort guard: a long single word breaks instead of pushing the
     panel wider than its own box. */
  overflow-wrap: break-word;
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}

.panel-code {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.settings-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--grey);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.settings-tab i {
  color: var(--grey);
  font-style: normal;
  font-size: 7px;
  opacity: 0.7;
}

.settings-tab:hover {
  color: var(--white);
  background: rgba(241, 240, 233, 0.04);
}

.settings-tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
  background: rgba(164, 245, 138, 0.07);
}

.settings-tab.active i {
  color: var(--orange);
  opacity: 1;
}

.settings-tab:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: -1px;
}

.settings-tab-index {
  align-self: center;
  margin-left: auto;
  padding-left: 16px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.settings-panels {
  min-height: 320px;
}

.settings-tabpanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: start;
  gap: 34px 46px;
}

.settings-tabpanel[hidden] {
  display: none;
}

.settings-tabpanel > .setting-group:only-child {
  max-width: 620px;
}

.settings-tabpanel:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: 6px;
}

.rule-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 4px;
}

.rule-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  background: rgba(241, 240, 233, 0.02);
}

.rule-card > b {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.08);
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.rule-card span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.rule-card i {
  color: var(--white);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.rule-card.is-current {
  border-color: var(--green);
  background: rgba(164, 245, 138, 0.07);
}

.rule-card.is-current > b {
  color: var(--green);
}

.rule-card.is-current i {
  color: var(--orange);
}

.setting-group + .setting-group {
  margin-top: 34px;
}

.setting-group h3 {
  margin: 0 0 16px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.range-setting {
  display: block;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.08);
  cursor: pointer;
}

.range-setting span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
}

.range-setting b {
  font-weight: 500;
}

.range-setting output {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 10px;
}

input[type="range"] {
  width: 100%;
  height: 2px;
  margin: 0;
  border-radius: 0;
  outline: none;
  background: var(--grey);
  appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  cursor: ew-resize;
  appearance: none;
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  cursor: ew-resize;
}

.voice-select-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 55px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.08);
}

.voice-select-setting > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.voice-select-setting b {
  font-size: 12px;
  font-weight: 500;
}

.voice-select-setting small {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
}

.voice-select-setting select {
  width: min(210px, 48%);
  min-width: 150px;
  padding: 8px 24px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  color: var(--green);
  background: var(--black);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.voice-select-setting select:hover,
.voice-select-setting select:focus {
  border-color: var(--green);
}

.choice-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
}

.choice-buttons button {
  padding: 10px 5px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--grey);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.choice-buttons button:hover,
.choice-buttons button.active {
  border-color: var(--white);
  color: var(--black);
  background: var(--white);
}

.audio-engine-test {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(164, 245, 138, 0.24);
  color: var(--green);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.audio-status-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.voice-status {
  color: var(--orange);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.audio-engine-test button {
  flex: 0 0 auto;
  max-width: 125px;
  padding: 6px 8px;
  border: 1px solid var(--green);
  border-radius: 0;
  color: var(--green);
  background: transparent;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.audio-engine-test button:hover {
  color: var(--black);
  background: var(--green);
}

.toggle-setting {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 55px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.08);
  cursor: pointer;
}

.toggle-setting span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-setting b {
  font-size: 12px;
  font-weight: 500;
}

.toggle-setting small {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.03em;
}

.toggle-setting input {
  position: absolute;
  opacity: 0;
}

.toggle-setting i {
  position: relative;
  flex: 0 0 auto;
  width: 35px;
  height: 16px;
  border: 1px solid var(--grey);
  background: var(--black);
  transition: border-color 160ms ease;
}

.toggle-setting i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--grey);
  transition: transform 160ms ease, background 160ms ease;
}

.toggle-setting input:checked + i {
  border-color: var(--green);
}

.toggle-setting input:checked + i::after {
  background: var(--green);
  transform: translateX(17px);
}

.toggle-setting input:focus-visible + i {
  outline: 1px solid var(--orange);
  outline-offset: 3px;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 30px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.action-button,
.text-button,
.small-button,
.icon-button {
  border-radius: 0;
  cursor: pointer;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 185px;
  min-height: 46px;
  padding: 0 17px;
  /* The primary call to action on every screen wears the pilot's accent. It is
     the one element present in every menu, so it is where a chosen accent is
     most visible without being loud. */
  border: 1px solid var(--accent);
  color: var(--black);
  background: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.action-button:hover,
.action-button:focus-visible {
  border-color: var(--orange);
  background: var(--orange);
}

.text-button {
  padding: 12px 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--grey);
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.text-button:hover,
.text-button:focus-visible {
  border-color: var(--grey);
  color: var(--white);
}

.text-button.danger,
.danger-button {
  color: var(--orange);
}

/* The pilot profile is the one full-bleed screen in the game. It is not a dialog
   that happens to be wide: it *is* the viewport, so it claims all of the width and
   all of the height and lets its three columns divide the space between them.

   The reason it needs this much structure is `min-height: auto`. Every grid and
   flex child defaults to refusing to shrink below its content, so a tall column
   silently pushes the parent into a scrollbar. Undoing that is what removes the
   vertical scrollbar — `minmax(0, 1fr)` on the body row, `min-height: 0` on each
   column, and an internal scroller on the one region whose length is genuinely
   unbounded (the flight log). Everything else is sized to fit by construction. */
#profile-screen {
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(10px, 1.4vh, 18px) clamp(10px, 1.4vw, 20px);
}

.profile-panel {
  display: grid;
  /* header / bays / records band / actions. The records band is `auto` so it
     takes only the height it needs; the bay row is the one that flexes. */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  /* The column is pinned to the panel. Left implicit it would be `auto`, whose
     minimum is the widest row's min-content — 474px from the nowrap action row
     — and that pushed the whole panel 155px past a 390px viewport. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 1760px;
  max-height: none;
  height: 100%;
  padding: clamp(14px, 1.8vw, 26px) clamp(16px, 2vw, 30px);
  /* The panel itself never scrolls. Columns own their own overflow, so at worst
     one region scrolls instead of the whole page sliding under the header. */
  overflow: hidden;
}

/* Reclaim the header and action-row chrome so the three columns get the height.
   Both rules already carry a rule and padding, so the extra margins were pure
   cost on a screen that is height-starved. */
.profile-panel .panel-header {
  margin-bottom: 0;
  padding-bottom: 12px;
}

.profile-panel .panel-header h2 {
  font-size: clamp(24px, 2.6vw, 36px);
}

.profile-panel .panel-actions {
  margin-top: 0;
  padding-top: 12px;
}

.profile-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr) minmax(0, 1.05fr);
  gap: clamp(14px, 1.6vw, 28px);
  min-height: 0;
  align-items: stretch;
}

/* Each column is a flex stack that may shrink; whichever child inside it is
   flexible takes up the slack, and the column never forces a page scrollbar. */
.profile-col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 15px);
  min-width: 0;
  min-height: 0;
}

.profile-col > * {
  flex: 0 0 auto;
}

/* The record bay's header is the first child, so it opts out of the flat stack
   and behaves like the headers above the avatar and hangar bays. */
.profile-col > .hangar-header {
  flex: 0 0 auto;
}

/* The column's `gap` is now the single source of vertical rhythm. These three
   blocks still carry margins from when the profile was one long stack, and
   those margins were costing the stat grid 46px of a height-starved column. */
.profile-col-id .profile-id-block,
.profile-col-id .profile-dates {
  margin: 0;
}

.profile-col > .hangar-block:first-child,
.profile-col > .history-block:first-child {
  padding-top: 0;
  border-top: 0;
}

/* The bay that holds the 24 avatars grows to fill whatever the record column and
   the hangar leave behind, and its rows divide that height evenly, so the grid
   reads as a full bay instead of a small block floating under a heading. */
.profile-col-faces .hangar-block,
.profile-col-log .hangar-block {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.hangar-header {
  flex: 0 0 auto;
}

.profile-id-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pilot-avatar {
  position: relative;
  display: grid;
  /* 82px so the 16x16 face painted at scale 5 lands 1:1 on whole pixels inside
     the content box. At 72px the canvas overflowed this clip box and lost its
     last row and column. */
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--green);
  background: rgba(164, 245, 138, 0.04);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.pilot-avatar canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.xp-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 13px;
  border: 1px solid var(--line);
  /* Fallback first: color-mix is well supported but a tint that silently fails
     to apply would leave the career panel flat, so the old fixed value stays. */
  background: rgba(164, 245, 138, 0.03);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.xp-head,
.xp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.xp-head strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.xp-foot span {
  color: var(--white);
  font-size: 8px;
}

.xp-meter {
  height: 8px;
  border: 1px solid var(--line);
  background: rgba(241, 240, 233, 0.03);
  overflow: hidden;
}

.xp-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--orange));
  transition: width 320ms ease;
}

/* `1fr` rows mean the avatars divide the bay's height evenly rather than
   stacking at a fixed 101px and overflowing it. The 66px floor keeps a card
   readable on a very short window; below that the bay scrolls instead. */
.avatar-grid {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  grid-auto-rows: minmax(66px, 1fr);
  gap: 5px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.avatar-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(241, 240, 233, 0.02);
  color: var(--grey);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

/* `min-width: 0` alone is not enough here. A column flex line takes its cross
   size from its items' *hypothetical* cross size, which for a nowrap run is the
   full max-content width — so this blurb set the line to 142px inside a 95px
   card, the ellipsis never engaged, and the spill became a horizontal scroll on
   the avatar grid. `max-width: 100%` on the children clamps the line back to the
   card, and then the ellipsis does its job. */
.avatar-card > * {
  max-width: 100%;
}

.avatar-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--grey);
  font-size: 6px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avatar-card:hover:not([aria-disabled="true"]) {
  border-color: var(--white);
  transform: translateY(-2px);
}

.avatar-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

.avatar-card[aria-disabled="true"]:hover {
  border-color: var(--line);
  transform: none;
}

.avatar-card:focus-visible,
.choice-buttons button:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: 2px;
}

.avatar-card.selected {
  border-color: var(--green);
  background: rgba(164, 245, 138, 0.08);
}

.avatar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 7px;
  letter-spacing: 0.1em;
}

.avatar-card.selected .avatar-card-top b {
  color: var(--green);
}

.avatar-card.unlocked .avatar-card-top b {
  color: var(--white);
}

.avatar-sprite {
  align-self: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: rgba(5, 5, 5, 0.55);
  border: 1px solid rgba(241, 240, 233, 0.08);
}

.avatar-card h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.avatar-card.selected h3 {
  color: var(--green);
}

.hud-avatar {
  align-self: center;
  margin-left: 6px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.6);
}

.xp-readout {
  position: relative;
  min-width: 92px;
}

.xp-readout strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.xp-readout b {
  color: var(--accent);
  font-weight: 500;
}

.xp-readout i {
  color: var(--grey);
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.06em;
}

.xp-bar {
  height: 3px;
  margin-top: 5px;
  background: rgba(241, 240, 233, 0.1);
  overflow: hidden;
}

.xp-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 260ms ease;
}

.xp-readout.pulsing .xp-bar i {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

.xp-readout.pulsing b {
  color: var(--orange);
}

.scanline-aperture .scanlines {
  opacity: 0.2;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 2px,
    rgba(5, 5, 5, 0.6) 2px,
    rgba(5, 5, 5, 0.6) 4px
  );
}

.scanline-bold .scanlines {
  opacity: 0.28;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(5, 5, 5, 0.72) 2px,
    rgba(5, 5, 5, 0.72) 7px
  );
}

.choice-buttons button.locked,
.choice-buttons button:disabled,
.choice-buttons button[aria-disabled="true"] {
  color: var(--grey);
  opacity: 0.45;
  cursor: not-allowed;
}

.unlockable-setting small[data-unlock-hint] {
  color: var(--orange);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.unlockable-setting small[data-unlock-hint].unlocked {
  color: var(--accent);
}

/* ── Colour customisation ────────────────────────────────────────────────
   The swatch row is the reason these three settings are usable at all: a
   dropdown can name a colour but cannot show one. Each swatch paints the value
   that is actually selected, set from JS, so the menu and the game read from
   the same source. */
.tint-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 4px 0 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.tint-swatch {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  background: rgba(5, 5, 5, 0.6);
}

.tint-swatch i {
  display: block;
  height: 22px;
  background: var(--white);
}

.tint-swatch span {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.set-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.set-row {
  padding: 12px 13px;
  background: rgba(5, 5, 5, 0.6);
}

.set-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.set-head b {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.set-state {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.set-row.is-owned .set-head b {
  color: var(--accent);
}

.set-row.is-owned .set-state {
  color: var(--accent);
}

.set-award {
  margin-top: 7px;
  color: var(--white);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.set-grants {
  margin-top: 6px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.6;
}

select.has-locked {
  border-color: rgba(255, 145, 77, 0.4);
}

.callsign-field,
.text-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
}

.callsign-field span,
.text-field span {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.callsign-field input,
.text-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--grey);
  border-radius: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.callsign-field input {
  padding: 9px 0;
}

.text-field textarea {
  min-height: 98px;
  padding: 13px;
  border: 1px solid var(--grey);
  resize: none;
  font-size: 11px;
  line-height: 1.6;
  user-select: text;
}

.callsign-field input:focus,
.text-field textarea:focus {
  border-color: var(--orange);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* `flex-basis: 0` so the grid takes *exactly* the column's free space rather
     than its content height plus a share of the slack — otherwise the rows are
     sized by the intrinsic content and the slack is left unclaimed at the bottom
     of the bay. The row floor is 46px (the 6px label, the 7px gap and the 15px
     value); below that the grid scrolls itself rather than pushing the panel. */
  flex: 1 1 0;
  grid-auto-rows: minmax(46px, 1fr);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.profile-stats > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-stats span,
.seed-archive span {
  display: block;
  margin-bottom: 7px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: 0.1em;
}

.profile-stats strong {
  color: var(--white);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
}

.seed-archive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
  border: 1px solid var(--line);
}

.seed-archive div {
  min-width: 0;
}

.seed-archive strong {
  display: block;
  overflow: hidden;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.award-profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(164, 245, 138, 0.35);
  border-radius: 0;
  color: var(--white);
  background: rgba(164, 245, 138, 0.035);
  cursor: pointer;
  text-align: left;
}

/* On the profile the award link joins the action row instead of sitting on its
   own full-width line — a whole row of chrome for one button is expensive when
   the three content columns are competing for the same height. */
.profile-actions {
  flex-wrap: wrap;
  gap: 12px 18px;
}

/* On desktop the three actions sit on one line; the archive link takes the
   slack. Below the dashboard breakpoint there is no slack to give, so the two
   buttons drop to a second row instead of forcing a min-content width. */
@media (min-width: 1001px) {
  .profile-actions {
    flex-wrap: nowrap;
    gap: 18px;
  }
}

.profile-actions .award-profile-link {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-actions .award-profile-link span {
  min-width: 0;
}

.profile-actions .award-profile-link b,
.profile-actions .award-profile-link small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-actions .text-button {
  flex: 0 0 auto;
}

.award-profile-link span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.award-profile-link b {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.award-profile-link small {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
}

.award-profile-link strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
}

.award-profile-link:hover {
  border-color: var(--orange);
  background: rgba(255, 145, 77, 0.06);
}

.small-button {
  margin-left: 14px;
  padding: 8px 10px;
  border: 1px solid var(--grey);
  color: var(--white);
  background: transparent;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.small-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.awards-panel {
  width: min(1080px, 100%);
}

.award-summary {
  display: grid;
  /* minmax(0, 220px) so the label column can shrink on very narrow screens
     instead of forcing the panel wider than its own box */
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid var(--line);
}

.award-summary span {
  display: block;
  margin-bottom: 6px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.award-summary strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
}

.award-summary-bar {
  height: 4px;
  margin-bottom: 7px;
  background: rgba(129, 133, 138, 0.3);
}

.award-summary-bar i {
  display: block;
  height: 100%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(164, 245, 138, 0.45);
  transition: width 240ms ease;
}

.award-filters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 18px;
}

.award-filters button {
  padding: 9px 5px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--grey);
  background: transparent;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.award-filters button:hover,
.award-filters button.active {
  border-color: var(--white);
  color: var(--black);
  background: var(--white);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.award-card {
  position: relative;
  min-height: 210px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(241, 240, 233, 0.12);
  background: rgba(5, 5, 5, 0.62);
}

.award-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 3px;
  content: "";
  background: var(--grey);
}

.award-card.unlocked {
  border-color: rgba(164, 245, 138, 0.42);
  background: rgba(164, 245, 138, 0.035);
}

.award-card.unlocked::after {
  background: var(--green);
}

.award-card.locked {
  opacity: 0.62;
}

.award-card-top {
  display: flex;
  justify-content: space-between;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.award-card.unlocked .award-card-top {
  color: var(--green);
}

.award-card-top b {
  font-weight: 500;
}

.award-glyph {
  position: absolute;
  top: 31px;
  right: 14px;
  color: var(--grey);
  font-size: 22px;
}

.award-card.unlocked .award-glyph {
  color: var(--green);
  text-shadow: 0 0 12px rgba(164, 245, 138, 0.65);
}

.award-card > small {
  display: block;
  margin-top: 27px;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.award-card h3 {
  margin: 5px 0 7px;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.award-card p {
  min-height: 38px;
  margin: 0 0 13px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.5;
}

.award-progress {
  height: 2px;
  background: rgba(129, 133, 138, 0.3);
}

.award-progress i {
  display: block;
  height: 100%;
  background: var(--grey);
}

.award-card.unlocked .award-progress i {
  background: var(--green);
}

.award-progress-text {
  display: block;
  margin-top: 6px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  text-align: right;
}

.award-archive-note {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.recovery-panel {
  width: min(650px, 100%);
}

.recovery-copy {
  margin: 0 0 26px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
}

.recovery-error {
  min-height: 16px;
  margin-top: 10px;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.overlay-panel {
  /* Query container so overlay titles scale to the panel's own width instead of
     the viewport's — a fixed viewport-based size overflows a 440px panel. */
  container-type: inline-size;
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 38px;
  /* Split overflow: a vertical scrollbar must never eat width and cause a
     horizontal one, and nothing inside an overlay is allowed to scroll sideways. */
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

.overlay-panel .eyebrow {
  justify-content: center;
  margin-bottom: 12px;
}

.overlay-panel h2 {
  /* Viewport fallback (safe on its own) for engines without container queries. */
  font-size: clamp(30px, 5.4vw, 58px);
  font-size: clamp(28px, 15cqi, 58px);
  text-wrap: balance;
}

.pause-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 28px 0 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pause-status span {
  padding: 13px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.pause-status b {
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-size: 15px;
}

.overlay-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 20px;
}

.overlay-menu .action-button {
  width: 100%;
  min-height: 55px;
}

.overlay-menu .text-button {
  min-height: 39px;
}

.shortcut-note {
  margin: 24px 0 0;
  color: rgba(241, 240, 233, 0.25);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.final-score {
  margin: 30px 0 24px;
}

.final-score span,
.result-grid span,
.recovery-copyout span {
  display: block;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.15em;
}

.final-score strong {
  display: block;
  margin: 4px 0;
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 400;
  letter-spacing: -0.06em;
}

.final-score em {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.12em;
}

.final-score em.hidden {
  display: none;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.result-grid div {
  padding: 14px 5px;
  border-right: 1px solid var(--line);
}

.result-grid div:last-child {
  border-right: 0;
}

.result-grid b {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

.recovery-copyout {
  margin-top: 23px;
  padding: 12px;
  border: 1px solid var(--line);
  text-align: left;
}

.recovery-copyout code {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--green);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-menu {
  margin-top: 16px;
}

.briefing-panel {
  width: min(560px, 100%);
}

/* ── Intro transmission ─────────────────────────────────────────────────────
   The uplink log on the briefing screen. The window is a fixed height with the
   newest line anchored to the bottom, so a transmission arriving line by line
   never resizes the panel under the pilot's cursor — the one thing a typing
   block inside a fixed-height overlay must not do. */
.transmission {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  text-align: left;
}

.transmission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.16em;
}

.transmission-skip {
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.transmission-skip:hover,
.transmission-skip:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

.transmission.is-complete .transmission-skip {
  visibility: hidden;
}

.transmission-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 134px;
  margin: 0;
  padding: 10px 11px;
  overflow: hidden;
  list-style: none;
}

.transmission-row {
  margin-bottom: 8px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.62;
  opacity: 0.3;
  transition: opacity 240ms ease;
}

.transmission-row:last-child {
  margin-bottom: 0;
}

.transmission-row.is-active {
  color: var(--white);
  opacity: 1;
}

.transmission-row.is-done {
  opacity: 0.58;
}

.transmission-stamp {
  display: inline-block;
  min-width: 82px;
  margin-right: 6px;
  color: var(--orange);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/* A block caret on the line currently being received, so the eye can find
   where the transmission is without reading the whole feed. */
.transmission-row.is-active .transmission-text::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-left: 2px;
  background: var(--white);
  vertical-align: -1px;
  animation: transmission-caret 900ms steps(2, end) infinite;
}

@keyframes transmission-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.briefing-copy {
  margin: 25px auto;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
}

.briefing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
  border: 1px solid var(--line);
}

.briefing-stats div {
  padding: 12px 6px;
  border-right: 1px solid var(--line);
}

.briefing-stats div:last-child {
  border-right: 0;
}

.briefing-stats span {
  display: block;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.briefing-stats b {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefing-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 25px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

kbd {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-right: 4px;
  place-items: center;
  border: 1px solid var(--grey);
  color: var(--white);
  background: var(--black);
  font-family: var(--mono);
  font-size: 8px;
  box-shadow: none;
}

.launch-button {
  width: 100%;
  min-height: 54px;
}

.game-hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: var(--mono);
}

.hud-top,
.hud-bottom {
  position: absolute;
  right: clamp(18px, 3vw, 45px);
  left: clamp(18px, 3vw, 45px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hud-top {
  top: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.16);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--grey);
  font-size: 8px;
  letter-spacing: 0.13em;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 9px;
}

.hud-readouts {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
}

.readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.readout span {
  color: var(--grey);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.readout strong {
  font-size: 15px;
  font-weight: 500;
}

.score-readout strong {
  color: var(--green);
  font-size: 20px;
  letter-spacing: 0.05em;
}

.hud-readout.hull-readout strong.low-hull {
  color: var(--orange);
  animation: low-hull 0.8s steps(2) infinite;
}

@keyframes low-hull {
  50% { opacity: 0.35; }
}

.icon-button {
  display: grid;
  width: 34px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--grey);
  color: var(--white);
  background: rgba(5, 5, 5, 0.7);
  font-family: var(--mono);
  font-size: 9px;
  pointer-events: auto;
}

.icon-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.setting-note {
  margin: 0 0 12px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.now-playing {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(164, 245, 138, 0.22);
  background: rgba(164, 245, 138, 0.04);
}

.now-playing-label {
  grid-column: 1 / -1;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.2em;
}

.now-playing strong {
  color: var(--green);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-playing em {
  color: var(--orange);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-align: right;
  white-space: nowrap;
}

/* ── Cheat console ──────────────────────────────────────────────────────── */

.cheater-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.cheater-mark span {
  color: var(--orange);
  font-family: var(--mono);
  font-size: clamp(52px, 13vw, 168px);
  font-weight: 900;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  opacity: 0.07;
  transform: rotate(-13deg);
  user-select: none;
  white-space: nowrap;
}

.cheater-mark.active {
  opacity: 1;
}

.cheats-panel {
  width: min(600px, 100%);
}

.cheat-grid {
  display: grid;
  gap: 5px;
}

.cheat-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  color: var(--grey);
  background: rgba(5, 5, 5, 0.6);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.cheat-row:hover,
.cheat-row:focus-visible {
  border-color: var(--white);
  color: var(--white);
}

.cheat-code {
  padding: 3px 0;
  border: 1px solid var(--line);
  color: var(--grey);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-align: center;
}

.cheat-body {
  min-width: 0;
}

.cheat-body strong {
  display: block;
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.cheat-body em {
  display: block;
  margin-top: 4px;
  color: var(--grey);
  font-size: 8px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.cheat-state {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-align: right;
}

.cheat-row.on {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 145, 77, 0.1);
}

.cheat-row.on .cheat-code {
  border-color: var(--orange);
  color: var(--orange);
}

.cheat-row.on .cheat-state {
  color: var(--orange);
}

.cheat-status {
  margin: 14px 0 0;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.cheat-status.locked {
  color: var(--orange);
}

.cheats-actions {
  margin-top: 22px;
}

/* ── Cockpit master caution ─────────────────────────────────────────────── */

.alert-banner {
  position: absolute;
  top: 86px;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100% - 48px));
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: rgba(5, 5, 5, 0.88);
  font-size: 8px;
  letter-spacing: 0.16em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 140ms ease, transform 140ms ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}

.alert-banner.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.alert-banner .alert-tag {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid currentColor;
  font-size: 7px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.alert-banner strong {
  flex: 0 0 auto;
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.alert-banner em {
  flex: 0 1 auto;
  color: var(--grey);
  font-style: normal;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-banner.info { border-color: var(--green); color: var(--green); }
.alert-banner.caution { border-color: var(--white); color: var(--white); }
.alert-banner.critical { animation: alert-flash 620ms steps(2) infinite; }

@keyframes alert-flash {
  0%, 100% { background: rgba(5, 5, 5, 0.88); }
  50% { background: rgba(255, 145, 77, 0.22); }
}

.alert-board {
  position: absolute;
  top: 132px;
  left: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(58vw, 460px);
  pointer-events: none;
}

.alert-board-label,
.alert-board-clear {
  color: rgba(241, 240, 233, 0.22);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* The all-clear caption and the STATUS label are mutually exclusive: showing
   "ALL SYSTEMS NOMINAL" beside a lit lamp board would be a lie. */
.alert-board-label {
  display: none;
}

.alert-board-clear {
  display: inline;
}

.alert-board.active .alert-board-label {
  display: inline;
}

.alert-board.active .alert-board-clear {
  display: none;
}

.alert-lamps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Unlit lamps are removed rather than dimmed: a board that reserves space for
   thirteen boxes all the time pushes the active alerts around and eats the
   play area on a phone. */
.alert-lamp {
  display: none;
  padding: 3px 6px;
  border: 1px solid rgba(241, 240, 233, 0.16);
  color: rgba(241, 240, 233, 0.2);
  background: rgba(5, 5, 5, 0.66);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.alert-lamp.lit {
  display: block;
  border-color: currentColor;
  background: rgba(255, 145, 77, 0.16);
}

.alert-lamp.info.lit {
  color: var(--green);
  background: rgba(164, 245, 138, 0.12);
}

.alert-lamp.caution.lit,
.alert-lamp.warning.lit {
  color: var(--orange);
}

.alert-lamp.critical.lit {
  background: rgba(255, 145, 77, 0.26);
  animation: lamp-blink 900ms steps(2) infinite;
}

@keyframes lamp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.proximity-warning {
  position: absolute;
  top: 132px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--grey);
  color: var(--grey);
  background: rgba(5, 5, 5, 0.78);
  font-size: 8px;
  letter-spacing: 0.14em;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -8px);
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, border-color 120ms ease;
}

.proximity-warning span,
.proximity-warning strong {
  display: block;
}

.proximity-warning strong {
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
}

.proximity-warning.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* Flight guidance: the grace countdown and the gate range share one strip
   directly under the proximity readout, which is where the pilot's eye already
   goes for "something is happening right now". It is hidden with `hidden`
   rather than faded to zero so it never reserves a row it is not using. */
.flight-guidance {
  position: absolute;
  top: 166px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid var(--green);
  color: var(--green);
  background: rgba(5, 5, 5, 0.78);
  font-size: 8px;
  letter-spacing: 0.14em;
  pointer-events: none;
  animation: guidance-in 180ms ease both;
}

.flight-guidance[hidden] {
  display: none;
}

.flight-guidance strong {
  color: var(--white);
  font-size: 10px;
  font-weight: 500;
}

/* The jump and the shield-down countdown get the warning colour, because both
   end with the ship suddenly being on its own. */
.flight-guidance.warp {
  border-color: var(--orange);
  color: var(--orange);
}

.flight-guidance.grace {
  border-color: var(--green);
}

@keyframes guidance-in {
  from { opacity: 0; transform: translate(0, -6px); }
  to { opacity: 1; transform: translate(0, 0); }
}

.proximity-warning.level-2,
.proximity-warning.level-3 {
  border-color: var(--orange);
  color: var(--orange);
}

.proximity-warning.level-3 {
  animation: proximity-pulse 240ms steps(2) infinite;
}

@keyframes proximity-pulse {
  50% { opacity: 0.42; }
}

.hud-bottom {
  bottom: 23px;
  align-items: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(241, 240, 233, 0.16);
}

.hud-meters {
  display: flex;
  width: min(340px, 33vw);
  gap: 18px;
}

.meter-block {
  flex: 1;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--grey);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.meter-label span:last-child {
  color: var(--white);
}

.meter {
  height: 3px;
  background: rgba(129, 133, 138, 0.35);
}

.meter i {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width 160ms ease, background 160ms ease;
}

.meter i.danger {
  background: var(--orange);
}

.meter.shield i {
  background: var(--white);
}

.weapon-readout {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
}

.weapon-slots {
  display: grid;
  /* Three slots now that the Destructor has one. The track widens with them so
     the buttons do not shrink into unreadable slivers. */
  grid-template-columns: 1fr 1fr 1fr;
  width: min(480px, 52vw);
  gap: 5px;
  margin-bottom: 2px;
}

.weapon-slot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--grey);
  color: var(--grey);
  background: rgba(5, 5, 5, 0.82);
  font-family: var(--mono);
  text-align: left;
  pointer-events: auto;
}

.weapon-slot kbd {
  grid-row: 1 / 3;
  align-self: center;
}

.weapon-slot span {
  font-size: 6px;
  letter-spacing: 0.12em;
}

.weapon-slot b {
  overflow: hidden;
  color: var(--grey);
  font-size: 7px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weapon-slot.active {
  border-color: var(--green);
  color: var(--green);
  box-shadow: inset 2px 0 0 var(--green);
}

.weapon-slot.active b {
  color: var(--white);
}

.weapon-slot:disabled {
  opacity: 0.42;
}

/* Hyper Destructor. The only slot with a state beyond locked/active, because it
   is the only one that can be selected and still refuse to fire. READY is
   green and pulses; SPENT stays selectable and goes cold orange so the reason
   it will not fire is legible without switching away and back. */
.weapon-slot.rare:not(:disabled) {
  border-color: rgba(241, 240, 233, 0.34);
}

.weapon-slot.rare.charged:not(.active) {
  border-color: rgba(100, 245, 138, 0.55);
  color: var(--green);
}

.weapon-slot.rare.charged b {
  color: var(--green);
  animation: destructor-ready 1.5s ease-in-out infinite;
}

.weapon-slot.rare.spent {
  color: var(--orange);
  border-color: rgba(255, 145, 77, 0.4);
}

.weapon-slot.rare.spent b {
  color: var(--orange);
  opacity: 0.8;
}

@keyframes destructor-ready {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .weapon-slot.rare.charged b {
    animation: none;
  }
}

.weapon-name {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.weapon-ammunition {
  color: var(--orange);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.weapon-status {
  color: var(--grey);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.weapon-status.warning,
.mine-count {
  color: var(--orange);
}

.mine-count {
  margin-top: 1px;
  font-size: 6px;
  letter-spacing: 0.12em;
}

.hud-keys {
  display: flex;
  gap: 18px;
  color: rgba(241, 240, 233, 0.46);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.hud-keys kbd {
  min-width: 16px;
  height: 16px;
  margin-right: 3px;
  color: var(--grey);
  font-size: 6px;
}

.combo-callout,
.wave-callout {
  position: absolute;
  top: 48%;
  left: 50%;
  pointer-events: none;
  text-align: center;
}

.combo-callout {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translate(-50%, 25px);
}

.combo-callout.show {
  animation: combo-rise 900ms ease both;
}

@keyframes combo-rise {
  0% { opacity: 0; transform: translate(-50%, 18px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -30px); }
}

.wave-callout {
  width: min(520px, 80vw);
  color: var(--white);
  opacity: 0;
}

.wave-callout.show {
  animation: wave-in 2.4s ease both;
}

.wave-callout strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.25em;
}

.wave-callout span {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

@keyframes wave-in {
  0% { opacity: 0; transform: translateY(12px); filter: blur(8px); }
  16%, 72% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.award-callout {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(230px, 24vw);
  padding: 7px 10px;
  border-top: 1px solid var(--green);
  border-right: 0;
  border-bottom: 1px solid var(--green);
  border-left: 3px solid var(--green);
  opacity: 0;
  background: rgba(5, 5, 5, 0.76);
  font-family: var(--mono);
  pointer-events: none;
  transform: translate(105%, -50%);
}

.award-callout.show {
  animation: award-in 2.2s ease both;
}

.award-callout span,
.award-callout strong,
.award-callout small {
  display: block;
}

.award-callout span {
  margin-bottom: 5px;
  color: var(--green);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.award-callout strong {
  font-size: 13px;
  letter-spacing: 0.04em;
}

.award-callout small {
  margin-top: 5px;
  color: var(--grey);
  font-size: 7px;
  line-height: 1.4;
}

@keyframes award-in {
  0% { opacity: 0; transform: translate(105%, -50%); filter: blur(3px); }
  14%, 76% { opacity: 0.8; transform: translate(0, -50%); filter: blur(0); }
  100% { opacity: 0; transform: translate(105%, -50%); filter: blur(2px); }
}

.toast-region {
  position: fixed;
  top: 88px;
  right: 28px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  padding: 12px 15px;
  border: 1px solid var(--grey);
  border-left: 3px solid var(--green);
  color: var(--white);
  background: rgba(5, 5, 5, 0.9);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  animation: toast-in 2.8s ease both;
}

.toast.warning {
  border-left-color: var(--orange);
}

.toast strong {
  color: var(--green);
  font-weight: 500;
}

.toast.warning strong {
  color: var(--orange);
}

@keyframes toast-in {
  0% { opacity: 0; transform: translateX(15px); }
  10%, 80% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(8px); }
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 5, 5, 0.82);
  pointer-events: auto;
}

.dialog-backdrop[hidden] {
  display: none;
}

.dialog {
  container-type: inline-size;
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 30px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog h2 {
  font-size: clamp(26px, 4.6vw, 44px);
  font-size: clamp(24px, 15cqi, 48px);
}

.dialog p:not(.eyebrow) {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 28px;
}

.danger-button {
  color: var(--black);
  background: var(--orange);
  border-color: var(--orange);
}

@media (max-width: 900px) {
  #home-screen {
    align-items: flex-start;
    padding-top: 10vh;
    overflow: auto;
  }

  .home-grid {
    grid-template-columns: 1fr;
    width: min(600px, 100%);
    height: auto;
    gap: 45px;
  }

  .intro-block h1 {
    font-size: clamp(75px, 18vw, 130px);
  }

  .main-menu {
    width: 100%;
  }

  .home-footer {
    display: none;
  }

  .settings-tabpanel {
    gap: 28px;
  }

  .hud-keys {
    display: none;
  }
}

@media (max-width: 650px) {
  .voice-select-setting {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
  }

  .voice-select-setting select {
    width: 100%;
    min-width: 0;
  }

  .panel {
    padding: 25px;
  }

  .settings-tabpanel {
    grid-template-columns: 1fr;
  }

  .settings-panels {
    min-height: 300px;
  }

  .rule-legend {
    grid-template-columns: 1fr;
  }

  .settings-tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 10px 11px 11px;
    font-size: 7px;
  }

  .settings-tab-index {
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    text-align: right;
  }

  .profile-stats {
    grid-template-columns: 1fr 1fr;
  }

  .awards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .award-filters {
    grid-template-columns: repeat(3, 1fr);
  }

  .hud-brand > span:last-child,
  .hud-readouts .hull-readout {
    display: none;
  }

  .hud-bottom .weapon-readout {
    bottom: 68px;
  }

  .weapon-slots {
    width: min(420px, 86vw);
  }

  .proximity-warning {
    top: 132px;
    right: 12px;
  }

  /* On a phone the lamp board moves below the proximity readout so the two
     cannot collide at the same row. The guidance strip is part of that stack. */
  .alert-board {
    top: 168px;
    max-width: calc(100vw - 36px);
  }

  /* The board owns the left of this row, so the guidance strip goes under it
     rather than sharing the line. No layout shift when it appears. */
  .flight-guidance {
    top: 202px;
    right: 12px;
  }

  /* With every lamp lit the board is allowed to span almost the full width on
     a phone, which would run it straight under the guidance strip. Capping it
     while the strip is up keeps the two on their own sides of the screen. The
     lamps wrap to more rows instead, which is the right thing to give up. */
  .alert-board:has(~ .flight-guidance:not([hidden])) {
    max-width: calc(52vw);
  }

  .award-callout {
    top: 50%;
    right: 0;
    width: min(185px, 52vw);
    padding: 6px 8px;
  }

  .hud-bottom .weapon-name {
    font-size: 12px;
  }

  .hud-top {
    top: 15px;
  }

  .hud-bottom {
    bottom: 15px;
  }

  .hud-meters {
    width: 100%;
  }

  .sub-screen,
  .overlay-screen {
    padding: 12px;
  }

  .overlay-panel {
    padding: 28px 20px;
  }

  .result-grid {
    grid-template-columns: 1fr 1fr;
  }

  .result-grid div:nth-child(2) {
    border-right: 0;
  }

  .result-grid div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  /* Two columns rather than four stacked rows: the intro transmission takes
     the height the stats were using, so the panel does not start scrolling on
     a phone. */
  .briefing-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Narrow panels cannot afford a 82px stamp column, so the stamp moves onto
     its own line and the feed keeps the same fixed height. */
  .transmission-stamp {
    display: block;
    min-width: 0;
    margin-right: 0;
  }

  .transmission-log {
    height: 146px;
  }

  .briefing-stats div {
    border-bottom: 1px solid var(--line);
  }

  .briefing-stats div:nth-child(even) {
    border-right: 0;
  }

  .briefing-stats div:nth-child(n+3) {
    border-bottom: 0;
  }

  .briefing-controls {
    display: none;
  }
}

@media (max-height: 700px) {
  .intro-block h1 {
    font-size: min(16vh, 120px);
  }

  .intro-copy {
    margin: 18px 0 22px;
  }

  .menu-button {
    min-height: 57px;
  }

  .profile-id-block {
    margin-bottom: 16px;
  }

  /* Short viewports give the uplink feed fewer lines rather than letting the
     briefing panel grow a scrollbar the pilot has to discover. */
  .transmission-log {
    height: 108px;
  }

  .transmission {
    margin-bottom: 16px;
  }

  .briefing-copy {
    margin: 16px auto;
  }
}

/* Expanded flight deck controls */
.voice-event-toggles,
.background-mini-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}

.mini-toggle,
.background-mini-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.mini-toggle input {
  accent-color: var(--green);
}

.advanced-tts-controls {
  border-top: 1px solid rgba(164, 245, 138, 0.16);
  margin-top: 4px;
}

.select-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 55px;
  border-bottom: 1px solid rgba(241, 240, 233, 0.08);
}

.select-setting > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.select-setting b {
  font-size: 12px;
  font-weight: 500;
}

.select-setting small,
.setting-detail {
  color: var(--grey);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
}

.select-setting select,
.background-mini-controls select {
  min-width: 170px;
  padding: 8px 22px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--green);
  background: var(--black);
  font-family: var(--mono);
  font-size: 8px;
}

.setting-detail {
  margin: 10px 0 2px;
  color: var(--orange);
}

/* A control that is deliberately held shut for the duration of a flight. Dimmed
   rather than hidden: the pilot can still read what the setting is, which is the
   point of the "LOCKED FOR THIS FLIGHT" line beside it. */
.select-setting select:disabled,
.background-mini-controls select:disabled {
  color: var(--grey);
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
  cursor: not-allowed;
  opacity: 0.72;
}

.background-mini-controls {
  justify-content: space-between;
  margin-top: 10px;
}

.background-mini-controls label {
  flex: 1;
  justify-content: space-between;
  padding: 7px 8px;
  border: 1px solid var(--line);
}

.background-mini-controls select {
  min-width: 100px;
  padding: 5px 18px 5px 5px;
  font-size: 7px;
}

.background-choice {
  margin-top: 12px;
  grid-template-columns: repeat(3, 1fr);
}

.controller-readout-setting {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line);
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.controller-readout-setting strong {
  color: var(--green);
  font-size: 8px;
  font-weight: 500;
}

.controller-map {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(241, 240, 233, 0.08);
  color: var(--grey);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.controller-map span {
  white-space: nowrap;
}

.controller-map kbd {
  min-width: 17px;
  height: 17px;
  margin-right: 2px;
  font-size: 7px;
}

.hud-readouts .difficulty-readout strong {
  color: var(--orange);
}

.hud-readouts .controller-readout strong {
  max-width: 120px;
  overflow: hidden;
  color: var(--grey);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-readouts .controller-readout strong.connected {
  color: var(--green);
}

.hud-keys #hud-ship {
  color: var(--green);
}

.profile-dates {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 18px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.06em;
}

.profile-dates b {
  color: var(--white);
  font-weight: 500;
}

/* Per-difficulty records, as a full-width band under the three bays. Three
   cards side by side use the horizontal space that the record column cannot
   spare, and cost one row of height instead of three. */
.profile-records {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.record-row {
  display: grid;
  grid-template-columns: 54px repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.45);
  font-family: var(--mono);
}

.record-row.empty {
  opacity: 0.45;
}

.record-name {
  overflow: hidden;
  color: var(--green);
  font-size: 8px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.record-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  /* The band inherits the panel's text alignment, which right-aligns the
     figures. Names and figures read together, so they share a left edge. */
  text-align: left;
}

.record-cell small {
  color: var(--grey);
  font-size: 6px;
  letter-spacing: 0.08em;
}

.record-cell b {
  overflow: hidden;
  color: var(--white);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.records-block {
  min-width: 0;
  margin-top: clamp(10px, 1.4vh, 15px);
}

.hangar-block,
.history-block {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.hangar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.hangar-header small {
  color: var(--grey);
  font-size: 7px;
}

.hangar-grid {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ship-card {
  min-width: 0;
  min-height: 132px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--white);
  background: rgba(5, 5, 5, 0.72);
  cursor: pointer;
  text-align: left;
}

.ship-card:hover:not(:disabled),
.ship-card.selected {
  border-color: var(--green);
  background: rgba(164, 245, 138, 0.06);
}

.ship-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.ship-card-top {
  display: flex;
  justify-content: space-between;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 6px;
}

.ship-card-top b {
  color: var(--orange);
  font-weight: 500;
}

.ship-card.selected .ship-card-top b,
.ship-card.unlocked .ship-card-top b {
  color: var(--green);
}

.ship-wire {
  display: block;
  width: 100%;
  height: 58px;
  margin: 3px 0;
  overflow: visible;
}

.ship-wire line {
  stroke: currentColor;
  stroke-width: 0.045;
  vector-effect: non-scaling-stroke;
}

.ship-card h3 {
  margin: 0 0 3px;
  /* HYPERION is the longest hull name and the card is only 65px of content at
     the 5-column desktop layout — 11px/0.05em is the widest setting that keeps
     every name on one line instead of clipping it. */
  overflow-wrap: break-word;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.ship-card p {
  min-height: 24px;
  margin: 0 0 5px;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 7px;
  line-height: 1.3;
}

.ship-card small {
  display: block;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 6px;
  line-height: 1.3;
}

/* The log is the only unbounded region — 12 runs, and more once a pilot has
   history — so it takes the leftover height and scrolls inside its own bay with
   a thin scrollbar. That is the single scroller on this screen, and it lives
   where the variable content actually is. */
.profile-history {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 5px;
  min-height: 0;
  margin: 0;
  padding: 0 6px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.profile-history li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  padding: 8px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 7px;
}

.profile-history li span,
.profile-history li small {
  color: var(--grey);
}

.profile-history li b {
  color: var(--green);
  font-weight: 500;
}

.profile-history li small {
  grid-column: 1 / 3;
  font-size: 6px;
}

.profile-history .history-empty {
  display: block;
  color: var(--grey);
  text-align: center;
}

.respawn-panel {
  border-color: var(--orange);
}

.respawn-panel .pause-status {
  grid-template-columns: repeat(3, 1fr);
}

.respawn-panel .pause-status b {
  color: var(--orange);
}

@media (max-width: 900px) {
  .hangar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hud-readouts .controller-readout {
    display: none;
  }
}

@media (max-width: 650px) {
  .advanced-tts-controls .range-setting {
    padding-top: 8px;
  }

  .select-setting {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
  }

  .select-setting select {
    width: 100%;
  }

  .profile-dates {
    flex-direction: column;
    gap: 5px;
  }

  .hangar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-history {
    grid-template-columns: 1fr;
  }

  .respawn-panel .pause-status {
    grid-template-columns: 1fr;
  }

  .respawn-panel .pause-status span {
    display: flex;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .respawn-panel .pause-status span:last-child {
    border-bottom: 0;
  }
}

/* ── Pilot profile: responsive bays ─────────────────────────────────────────
   The three-column dashboard is the desktop layout. As the window narrows the
   bays stack in priority order — record, then avatars, then hangar and log —
   and the screen scrolls as one column again, which is the right trade on a
   phone: one predictable scroll instead of three nested scrollers. */
/* Wide layout: four stat columns, so twelve cells make three rows rather than
   four. That is the difference between the record bay fitting and its stat grid
   starting to scroll once the records band takes its share of the height. */
@media (min-width: 1181px) {
  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  /* Two bays on top, hangar and log beneath, both at their natural height. The
     record column needs ~480px of the 565px body on its own at this size, so
     pairing it side by side with a full avatar bay is what keeps the whole
     screen scroll-free. */
  .profile-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);
  }

  .profile-col-log {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 28px);
    align-items: start;
  }

  /* This row is content-sized, so anything with `flex-basis: 0` inside it would
     report a hypothetical size of zero and collapse — the hangar and the log
     hand their height back to the content and drop their scrollers. */
  .profile-col-log .hangar-grid,
  .profile-col-log .profile-history {
    flex: 0 0 auto;
    overflow-y: visible;
  }

  /* Two rows of hangar cards and four rows of avatars have to share the body.
     Trimming the card floor to 108px and the avatar floor to 62px is what makes
     the sum fit at 1024x768 instead of pushing the avatar bay into a scroll. */
  .ship-card {
    min-height: 108px;
  }

  .avatar-grid {
    grid-auto-rows: minmax(58px, 1fr);
  }

  /* Four stat columns instead of three: twelve cells then make three rows
     instead of four, which is what lets the record column stop scrolling in the
     shorter row this layout gives it. */
  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(36px, 1fr);
  }

  /* The records band competes with the bays for height at this size, so each row
     drops to a single compact line: name plus the three figures that matter most.
     Flights and time are hidden rather than wrapped, which would silently turn
     the row into two and give back the height this was meant to save. */
  .record-row {
    grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 4px 7px;
  }

  .record-row > :nth-child(4),
  .record-row > :nth-child(6) {
    display: none;
  }

  .record-cell b {
    font-size: 8px;
  }

  .records-block {
    margin-top: 10px;
  }

  .profile-stats > div {
    padding: 5px 10px;
  }

  .profile-stats span,
  .seed-archive span {
    margin-bottom: 4px;
  }

  .seed-archive {
    padding: 10px 13px;
  }

  /* Side by side, the rule above the log would read as a stray divider. */
  .profile-col-log .history-block {
    padding-top: 0;
    border-top: 0;
  }

  /* 70px minimum cards fit six across a 448px bay, so 24 avatars make four rows
     instead of five. That is the difference between filling the bay and
     scrolling it at 1024x768. */
  .avatar-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
}

@media (max-width: 1000px) {
  /* Below this the three bays genuinely do not fit side by side — the record
     column alone wants ~460px and a 900x700 window offers ~475px for the whole
     body. So the bays stack in priority order and the *body* becomes the single
     scroller, while the panel stays a fixed-height grid: the title and the
     action row remain pinned, which is the difference between a scrolling
     dashboard and a dialog with a scrollbar in it. */
  .profile-body {
    display: block;
    min-height: 0;
    padding-right: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .profile-col {
    display: block;
  }

  /* The `gap` was a flex thing; stacked, the rhythm comes back as margins. */
  .profile-col > * + * {
    margin-top: 15px;
  }

  .profile-col + .profile-col {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .profile-col-faces .hangar-block,
  .profile-col-log .hangar-block,
  .history-block {
    display: block;
  }

  /* Content-sized again, so nothing needs a scroller of its own. */
  .avatar-grid,
  .hangar-grid,
  .profile-history,
  .profile-stats {
    overflow: visible;
  }

  .avatar-grid {
    grid-auto-rows: minmax(66px, auto);
  }

  .hangar-grid {
    grid-auto-rows: minmax(96px, auto);
  }

  .profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(54px, auto);
  }

  /* Stacked, the three record cards are too narrow for five cells a row. */
  .profile-records {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-row {
    grid-template-columns: 58px repeat(5, minmax(0, 1fr));
  }
}

/* Short desktop windows: the record column is the height-critical one, so its
   stat cells drop toward a tighter floor rather than starting to scroll. Four
   rows at 40px plus the 1px rules is 163px, which is what the column actually
   has left at 640px of window height. */
@media (max-height: 700px) and (min-width: 1001px) {
  .profile-stats {
    grid-auto-rows: minmax(40px, 1fr);
  }

  .profile-stats > div {
    padding: 5px 11px;
  }

  .profile-stats span,
  .seed-archive span {
    margin-bottom: 4px;
  }

  .profile-stats strong {
    font-size: 13px;
  }

  .xp-block {
    padding: 9px 12px 10px;
  }

  /* A full 12-run log is the one genuinely variable region. Trimming its row
     padding by 3px a side buys back 36px across six rows, which is the 23px it
     was over at 1280x700 — so even a full history fits without a scroller. */
  .profile-history li {
    padding: 5px 7px;
  }
}

/* The mine rule is the one difficulty trait that kills you outright, so it is
   called out on the card rather than left to the prose detail line further up. */
.rule-card .rule-caution {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid rgba(241, 240, 233, 0.08);
  color: var(--grey);
}

.rule-card .rule-caution i {
  color: var(--white);
}

.rule-card .rule-caution.is-lethal {
  color: var(--orange);
}

.rule-card .rule-caution.is-lethal i {
  color: var(--orange);
  font-weight: 800;
}

/* Engine afterburner meter. Three states the pilot has to be able to read at a
   glance without parsing a number: burning, recharging, and spent. The recharge
   drains toward empty rather than filling, because the bar tracks the cooldown
   that is actually running — a filling bar would say "more boost soon" while
   the number beside it counts down, and the two would disagree. */
.meter.boost i {
  background: var(--green);
}

.meter.boost.burning i {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(255, 145, 77, 0.7);
}

.meter.boost.recharging i {
  background: rgba(129, 133, 138, 0.9);
}

.meter.boost.spent i {
  background: var(--orange);
  animation: boost-spent 0.9s ease-in-out infinite;
}

/* The state class goes on the wrapper, not the bar: the readout sits BEFORE the
   meter in the DOM, so a sibling selector hanging off the meter could never
   reach it. Descendant from the block is the only relation that holds. */
.meter-block.spent .meter-label span:last-child {
  color: var(--orange);
}

.meter-block.recharging .meter-label span:last-child {
  color: var(--grey);
}

@keyframes boost-spent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ── Flight manual ───────────────────────────────────────────────────────────
   A reference document, not a marketing page: dense, monospaced, two columns
   of key/value data. It has to stay readable from 360px up without becoming a
   wall of single-word lines, so the definition lists collapse to one column
   below 700px and the table of contents becomes a wrapping row rather than a
   sidebar it has no room for. */
.manual-panel {
  width: min(940px, 94vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  /* The panel scrolls, not the body. A multi-column body needs an AUTO height:
     give it a definite one and the columns stop filling downwards and start
     spilling sideways, so the text runs off into columns 3, 4 and 5 while the
     visible area scrolls almost nothing. Letting the panel take the full
     document height is what makes the two columns actually balance. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 133, 138, 0.5) transparent;
}

.manual-toc {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 4px 6px;
  padding: 0 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(129, 133, 138, 0.22);
}

.manual-toc a {
  padding: 4px 7px;
  border: 1px solid rgba(129, 133, 138, 0.26);
  color: var(--grey);
  font-size: 7px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}

.manual-toc a:hover,
.manual-toc a:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

.manual-body {
  flex: 0 0 auto;
  padding-right: 10px;
  /* Two text columns on anything wide enough to carry them. A single 870px
     column of 9px text runs to roughly 130 characters a line, which is
     unreadable for the prose sections and doubles the scroll for a document
     this long. At two columns each line lands near 65 characters, which is the
     usual target, and the whole manual fits in about half the scrolling. */
  column-count: 2;
  column-gap: 34px;
}

.manual-section {
  padding: 20px 0 4px;
  /* Sections are not split across the column break. A section too tall for one
     column is still allowed to break rather than being clipped, which is why
     this is `avoid` and not a hard containment. */
  break-inside: avoid;
}

.manual-section + .manual-section {
  border-top: 1px solid rgba(129, 133, 138, 0.16);
}

.manual-section h3 {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.manual-section h4 {
  margin: 16px 0 7px;
  color: var(--white);
  font-size: 8px;
  letter-spacing: 0.14em;
}

.manual-section p {
  margin: 0 0 10px;
  color: var(--grey);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.manual-section p strong {
  color: var(--white);
  font-weight: 600;
}

.manual-table {
  margin: 0 0 12px;
  border-top: 1px solid rgba(129, 133, 138, 0.18);
}

.manual-table > div {
  display: grid;
  grid-template-columns: minmax(84px, 30%) 1fr;
  gap: 3px 14px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(129, 133, 138, 0.12);
}

.manual-table dt {
  color: var(--white);
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.manual-table dt.ok { color: var(--green); }
.manual-table dt.warn { color: var(--orange); }
.manual-table dt.cool { color: var(--grey); }

.manual-table dd {
  margin: 0;
  color: var(--grey);
  font-size: 9px;
  line-height: 1.75;
  letter-spacing: 0.03em;
}

.manual-table .alt {
  color: rgba(129, 133, 138, 0.65);
}

.manual-table kbd {
  font-size: 7px;
}

.manual-notes {
  margin: 0 0 12px;
  padding-left: 16px;
  color: var(--grey);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.manual-notes li {
  margin-bottom: 4px;
}

.manual-section .tag {
  padding: 1px 5px;
  border: 1px solid rgba(100, 245, 138, 0.3);
  color: var(--green);
  font-size: 7px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .manual-body {
    column-count: 1;
  }

  .manual-section {
    scroll-margin-top: 12px;
  }
}

@media (max-width: 700px) {
  .manual-table > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .manual-panel {
    width: 96vw;
  }
}

/* The manual is a document, not a status readout. A full-size panel title and
   the 30px header margin cost a fifth of the viewport before a single word of
   body text, on a panel whose whole job is showing text. Tightened to give the
   columns back their height while keeping the same type treatment. */
.manual-panel .panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.manual-panel .panel-header h2 {
  font-size: clamp(20px, 2.1vw, 28px);
}

.manual-panel .panel-header .eyebrow {
  margin-bottom: 5px;
}