/* NO CARRIER: a painted steel console with one inset CRT. Only the tube glows.
   Amber marks the ship's machines; teal marks what is outside the hull. */

:root {
  --enamel: #34332b;
  --enamel-raised: #403e34;
  --enamel-deep: #262520;
  --bakelite: #16130f;
  --bakelite-edge: #4a4438;
  --tube: #190e05;
  --ink: #e2bb7c;
  --ink-dim: #b59863;
  --amber: #ffb547;
  --teal: #7fd0b8;
  --key: #a79a7d;
  --key-edge: #6b6250;
  --key-ink: #1d1a14;
  --fault: #e06a45;
  --mono: ui-monospace, 'IBM Plex Mono', 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, monospace;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  background: var(--enamel-deep);
  color: var(--ink);
  font: 13px/1.4 var(--mono);
}

/* The faintest scanlines over the whole console; the tube has its own. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.07) 2px 3px);
}

[hidden] {
  display: none !important;
}

.console {
  display: grid;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  background: var(--enamel);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.07),
    inset 0 -3px 0 rgb(0 0 0 / 0.35),
    0 6px 18px rgb(0 0 0 / 0.5);
}

/* Nameplate */

.nameplate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.34em;
}

/* Keys */

button,
select {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  background: var(--key);
  color: var(--key-ink);
  font: 700 12px/1.2 var(--mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 3px 0 var(--key-edge);
}

button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 1px 0 var(--key-edge);
}

button[aria-pressed='true'] {
  transform: translateY(2px);
  background: var(--amber);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 1px 0 #8e5f18;
}

select option {
  background: var(--enamel-deep);
  color: var(--ink);
}

#power {
  min-height: 44px;
  padding: 10px 26px;
  background: #c8702e;
  color: #1a0f05;
  font-size: 15px;
  letter-spacing: 0.14em;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 4px 0 #7a4019;
}

#power[aria-pressed='true'] {
  background: var(--amber);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* The tube: the one thing here that glows */

.deck {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px;
}

.crt {
  padding: 12px;
  background: var(--bakelite);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px var(--bakelite-edge),
    inset 0 6px 14px rgb(0 0 0 / 0.8);
}

.glass {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 240px;
  padding: 14px 16px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #2a1707 0%, var(--tube) 70%, #0d0702 100%);
  border-radius: 22px / 26px;
  color: var(--amber);
  text-shadow: 0 0 6px rgb(255 170 60 / 0.55);
  box-shadow: inset 0 0 26px rgb(0 0 0 / 0.75);
  filter: brightness(0.22) saturate(0.5);
  transition: filter 1.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The tube lights when the log says the display came online. */
body[data-power='on'] .glass {
  filter: none;
  transition-delay: 0.55s;
}

.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.26) 2px 4px);
}

#log {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  font-size: 13px;
  scrollbar-width: none;
}

#log div {
  overflow-wrap: anywhere;
}

#log .fault {
  color: var(--fault);
  text-shadow: 0 0 6px rgb(224 106 69 / 0.6);
}

#diag {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgb(255 181 71 / 0.25);
  color: #d9984a;
  font: 11px/1.4 var(--mono);
  white-space: pre-wrap;
}

/* Plates */

.desk {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-width: 0;
}

.plate,
.bank {
  background: var(--enamel-raised);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -2px 0 rgb(0 0 0 / 0.3);
}

.plate {
  padding: 14px;
}

#macros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 8px;
}

#profiles {
  display: grid;
  align-content: center;
  gap: 12px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
  font-size: 11px;
}

.field output {
  min-width: 8ch;
  color: var(--ink);
}

/* Knobs */

.knob {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}

.knob-dial {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
}

.knob.large .knob-dial {
  width: 82px;
  height: 82px;
}

.knob-ticks {
  position: absolute;
  inset: 0;
  stroke: var(--ink-dim);
  stroke-width: 1.4;
}

.knob-cap {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #3a342a 0%, var(--bakelite) 62%);
  box-shadow:
    0 0 0 1px var(--bakelite-edge),
    0 3px 5px rgb(0 0 0 / 0.6);
  transform: rotate(var(--angle, 0deg));
}

.knob-cap::after {
  content: '';
  position: absolute;
  top: 7%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 32%;
  border-radius: 1px;
  background: #e6dcc0;
}

.knob-label {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.knob.large .knob-label {
  font-size: 12px;
  font-weight: 700;
}

.knob output {
  color: var(--ink-dim);
  font-size: 11px;
}

/* Room plan: the machines seen from above, with you at the bottom */

.plan {
  padding: 8px 12px 28px;
}

.plan h2 {
  margin: 0 0 8px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.plan-floor {
  position: relative;
  height: 230px;
  margin: 0 56px;
  background:
    radial-gradient(circle at 50% 100%, transparent 0 32%, rgb(226 187 124 / 0.14) 32% calc(32% + 1px), transparent calc(32% + 1px) 62%, rgb(226 187 124 / 0.14) 62% calc(62% + 1px), transparent calc(62% + 1px)),
    linear-gradient(to right, transparent calc(50% - 0.5px), rgb(226 187 124 / 0.1) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  box-shadow: 0 0 0 1px rgb(226 187 124 / 0.2);
}

.listener {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
}

.marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--key);
  color: var(--key-ink);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%) scale(var(--near, 1));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 2px 0 var(--key-edge);
}

.marker:active {
  cursor: grabbing;
}

.marker .lamp {
  width: 8px;
  height: 8px;
  --lamp: #a15a10;
}

/* Racks */

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

.bank[data-zone='radio'] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.bank[data-zone='machines'] {
  grid-column: 1 / -1;
  grid-row: 3;
}

.bank {
  --lamp: var(--amber);
  padding: 8px 12px 12px;
  border-top: 3px solid var(--lamp);
}

.bank[data-zone='outside'],
.bank[data-zone='radio'] {
  --lamp: var(--teal);
}

.bank[data-zone='room'] {
  --lamp: var(--ink-dim);
}

.bank h2 {
  margin: 0 0 8px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}

.module {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px 10px 10px;
  background: var(--enamel);
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45);
}

.module-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.module-head .mute {
  margin-left: auto;
  min-height: 24px;
  padding: 2px 7px;
  font-size: 10px;
}

.lamp {
  position: relative;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #17140f;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.8);
}

/* Dim while powered, so an idle lamp still reads as a live circuit. */
body[data-power='on'] .lamp::before,
.lamp .glow {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lamp);
}

body[data-power='on'] .lamp::before {
  opacity: 0.2;
}

.lamp .glow {
  opacity: 0;
  box-shadow: 0 0 8px var(--lamp);
}

.knobs {
  display: flex;
  justify-content: space-evenly;
}

.triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.triggers button {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 10px;
}

/* Below this the console becomes a single column */

@media (max-width: 860px) {
  .deck,
  .racks {
    grid-template-columns: minmax(0, 1fr);
  }

  .bank[data-zone='machines'],
  .bank[data-zone='radio'] {
    grid-row: auto;
  }

  .glass {
    min-height: 200px;
    max-height: 240px;
  }

  .plan-floor {
    margin: 0 32px;
  }
}

@media (max-width: 520px) {
  body {
    padding: 0;
  }

  .console {
    padding: 16px;
    border-radius: 0;
  }

  h1 {
    font-size: 19px;
  }

  #macros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (prefers-reduced-motion: reduce) {
  .glass {
    transition: none;
  }
}