/* ─────────────────────────────────────────────────────────────────────────
   ПУЛЬТ ЛАЭР МК-V · vintage console over the rocket-launch video stage
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  background: #000;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #d8c8a8;
  overflow: hidden;
}

/* ── Video background (rocket scene) ────────────────────────────────────
   Ambient loops as live background. Launch plays once on ПУСК.
   Both Veo-generated from the same source → invisible cross-fade. */
.bg-stage { position: fixed; inset: 0; z-index: 0; background: #000; overflow: hidden; }
.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.bg-ambient { z-index: 1; opacity: 1; transition: opacity 0.25s ease-out;
  /* Push video right so the rocket lands at the original framing position */
  transform: translateX(10%);
}
.bg-launch  { z-index: 1; opacity: 0; transition: opacity 0.25s ease-in;
  transform: translateX(10%);
}
.bg-stage.launching .bg-ambient { opacity: 0; }
.bg-stage.launching .bg-launch  { opacity: 1; }

/* Vignette + dim layer over video so the console pops */
.bg-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

/* Cover Veo watermark (bottom-right) */
.veo-cover {
  position: fixed;
  right: 0; bottom: 0;
  width: 24%; height: 7%;
  background: #000;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  mask-image:         linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  pointer-events: none;
  z-index: 4;
}

#root {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}

.scene {
  width: min(96vw, 1320px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* Fit-scale: shrink the console on short viewports (browser zoom, small windows)
     so the pult always fits in one screen. --fit-scale is set by JS on resize. */
  transform: scale(var(--fit-scale, 1));
  transform-origin: center center;
}

.console-wrap {
  position: relative;
  width: 100%;
}

/* ─────────────────────────────  Console body  ───────────────────────────── */
.console {
  position: relative;
  border-radius: 14px;
  padding: 28px 36px 22px;
  border: 2px solid rgba(0,0,0,0.6);
  /* Inset edges only — no outer shadow so the bg behind the pult stays clean */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.06),
    inset 0 -2px 0 rgba(0,0,0,0.5);
}

/* Material variants — each shifts the body color + grain */
.console.material-olive {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #5d6240 0%, #4a4f33 50%, #3a3e28 100%);
}
.console.material-bakelit {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3a2a22 0%, #2a1d17 50%, #1d130e 100%);
}
.console.material-graphite {
  /* Brushed/scratched dark steel — multiple grain layers + diagonal scuffs */
  background:
    /* fine vertical brush */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.04)   0 1px,
      rgba(0,0,0,0.04)         1px 2px,
      transparent              2px 3px),
    /* sparse horizontal scratches */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025)  0 1px,
      transparent              1px 4px,
      rgba(0,0,0,0.05)         4px 5px,
      transparent              5px 11px),
    /* random diagonal scuff #1 */
    repeating-linear-gradient(28deg,
      transparent              0 17px,
      rgba(255,255,255,0.022)  17px 18px,
      transparent              18px 41px),
    /* random diagonal scuff #2 */
    repeating-linear-gradient(-22deg,
      transparent              0 37px,
      rgba(0,0,0,0.07)         37px 38px,
      transparent              38px 73px),
    /* longer brush highlights */
    repeating-linear-gradient(95deg,
      transparent              0 60px,
      rgba(255,255,255,0.018)  60px 62px,
      transparent              62px 130px),
    /* uneven base lighting */
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.25) 0%, transparent 70%),
    /* base steel gradient */
    linear-gradient(180deg, #34322e 0%, #25231f 50%, #181612 100%);
}
.console.material-steel {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #88909a 0%, #6c727b 50%, #4f5460 100%);
  color: #1a1a1a;
}
.console.material-yellow {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #f5c83a 0%, #d9a91f 50%, #b88a10 100%);
  color: #1a1a1a;
}
/* Yellow material: tweak inner labels for legibility on warm bg */
.console.material-yellow .ind-label,
.console.material-yellow .brand,
.console.material-yellow .btn-label,
.console.material-yellow .btn-status,
.console.material-yellow .launch-label-top,
.console.material-yellow .launch-progress,
.console.material-yellow .power-strip,
.console.material-yellow .serial-plate {
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,240,160,0.3);
}

.console .case,
.console .case-scuff,
.console .case-bevel {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
}
.console .case-scuff {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(255,255,255,0.05) 0%, transparent 35%),
    radial-gradient(ellipse at 88% 78%, rgba(0,0,0,0.18) 0%, transparent 40%);
  mix-blend-mode: overlay;
}
.console .case-bevel {
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04), inset 0 0 20px rgba(0,0,0,0.4);
}

/* Hex screws on the four corners */
.screw {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #d6d2c2 0%, #6a6457 45%, #2c2820 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -1px 1px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.6);
}
.screw::after {
  content: ""; position: absolute; inset: 3px;
  background: linear-gradient(45deg, transparent 45%, rgba(0,0,0,0.6) 47%, rgba(0,0,0,0.6) 53%, transparent 55%);
  border-radius: 50%;
}
.screw.tl { top: 8px; left: 8px; }
.screw.tr { top: 8px; right: 8px; }
.screw.bl { bottom: 8px; left: 8px; }
.screw.br { bottom: 8px; right: 8px; }

.inner {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
}

/* ─────────────────────────────  Top bar  ───────────────────────────── */
.top-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  flex-wrap: wrap;
}

.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: #d8c8a8;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.brand-mark {
  width: 16px; height: 16px;
  background: radial-gradient(circle, #ff5a26 0%, #b3340b 65%, #481408 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 100, 40, 0.7), inset 0 0 4px rgba(0,0,0,0.4);
}

.indicator-bank {
  display: flex; gap: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.ind-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 32px;
}
.ind-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(216,200,168,0.7);
}
.ind-lamp {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2a2520;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.6),
    inset 0 -1px 1px rgba(255,255,255,0.05);
}
.ind-lamp.green {
  background: radial-gradient(circle, #5dff7a 0%, #1f9933 70%, #0c3315 100%);
  box-shadow: 0 0 6px rgba(80,255,120,0.8), inset 0 0 2px rgba(255,255,255,0.4);
}
.ind-lamp.amber {
  background: radial-gradient(circle, #ffc760 0%, #d97a1a 70%, #4a2406 100%);
  box-shadow: 0 0 6px rgba(255,180,60,0.8), inset 0 0 2px rgba(255,255,255,0.4);
}
.ind-lamp.cyan {
  background: radial-gradient(circle, #7df0ff 0%, #1f9fc8 70%, #073449 100%);
  box-shadow: 0 0 6px rgba(120,220,255,0.8), inset 0 0 2px rgba(255,255,255,0.4);
}
.ind-lamp.red {
  background: radial-gradient(circle, #ff6a6a 0%, #c2241a 70%, #3d0805 100%);
  box-shadow: 0 0 7px rgba(255,80,60,0.85), inset 0 0 2px rgba(255,255,255,0.4);
}
.ind-lamp.dim { background: #2a2520; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6); }
.ind-lamp.pulse  { animation: lamp-pulse 1.4s ease-in-out infinite; }
.ind-lamp.pulse2 { animation: lamp-pulse 0.9s ease-in-out infinite; }
.ind-lamp.pulse3 { animation: lamp-pulse 2.1s ease-in-out infinite; }
.ind-lamp.flick  { animation: lamp-flick 1.7s steps(2, end) infinite; }
.ind-lamp.flick2 { animation: lamp-flick 0.8s steps(2, end) infinite; }
.ind-lamp.morse  { animation: lamp-morse 1.6s steps(8, end) infinite; }
@keyframes lamp-pulse { 0%, 100% { filter: brightness(0.8); } 50% { filter: brightness(1.4); } }
@keyframes lamp-flick { 0%, 60% { filter: brightness(0.7); } 70%, 100% { filter: brightness(1.3); } }
@keyframes lamp-morse {
  0%, 12%, 50%, 62%, 75% { filter: brightness(0.5); }
  6%, 25%, 56%, 70%      { filter: brightness(1.4); }
}

/* Analog gauge — needle rotates based on --ang */
.gauge {
  position: relative;
  margin-left: auto;
  width: 84px; height: 56px;
  background: radial-gradient(ellipse at 50% 95%, #1a1612 0%, #0a0907 80%);
  border: 2px solid rgba(0,0,0,0.7);
  border-radius: 50% 50% 6px 6px / 90% 90% 6px 6px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.gauge-label {
  position: absolute; left: 50%; top: 8px;
  transform: translateX(-50%);
  font-size: 7.5px; letter-spacing: 0.12em; color: rgba(216,200,168,0.5);
  font-weight: 700;
}
.gauge::before {
  content: "";
  position: absolute; left: 8%; right: 8%; top: 18%; height: 60%;
  border-top: 1px dashed rgba(216,200,168,0.18);
  border-radius: 50%;
}
.gauge-needle {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 2px; height: 38px;
  background: linear-gradient(to top, #ff8c40 0%, #fff5b0 100%);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--ang, 0deg));
  box-shadow: 0 0 4px rgba(255,140,40,0.7);
  transition: transform 0.5s cubic-bezier(0.5, 1.6, 0.5, 1);
}
.gauge-cap {
  position: absolute; left: 50%; bottom: 2px;
  width: 8px; height: 8px;
  background: radial-gradient(circle, #ddd 0%, #555 60%, #111 100%);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ─────────────────────────────  Screen frame  ───────────────────────────── */
.screen-frame {
  position: relative;
  border: 3px solid rgba(0,0,0,0.5);
  border-radius: 6px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7);
}
.mini-screw {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c0bba8 0%, #5a5448 50%, #1d1a14 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(0,0,0,0.5);
}
.mini-screw.tl { top: 4px; left: 4px; }
.mini-screw.tr { top: 4px; right: 4px; }
.mini-screw.bl { bottom: 4px; left: 4px; }
.mini-screw.br { bottom: 4px; right: 4px; }

.screen {
  position: relative;
  min-height: 200px;
  padding: 12px 14px;
  border-radius: 3px;
  background: #050a07;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  /* CRT scanlines + slight glow */
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    inset 0 0 6px currentColor;
}
.screen::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  );
  pointer-events: none;
}
.screen::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* Theme variants */
.screen.theme-phosphor { color: #65ff8d; text-shadow: 0 0 4px rgba(80,255,140,0.6); }
.screen.theme-amber    { color: #ffb44a; text-shadow: 0 0 4px rgba(255,180,70,0.6); }
.screen.theme-cyan     { color: #6fe6ff; text-shadow: 0 0 4px rgba(110,230,255,0.6); }
.screen.theme-mono     { color: #d8d8d0; text-shadow: 0 0 3px rgba(220,220,210,0.5); }

.screen.flicker { animation: screen-flicker 0.34s ease-out; }
@keyframes screen-flicker {
  0%, 100% { filter: brightness(1); }
  20%      { filter: brightness(1.6) blur(0.5px); }
  40%      { filter: brightness(0.7); }
  60%      { filter: brightness(1.3) blur(0.3px); }
  80%      { filter: brightness(0.9); }
}
.screen.launch-flash { animation: screen-launch 0.7s ease-out; }
@keyframes screen-launch {
  0%   { filter: brightness(1) blur(0); }
  20%  { filter: brightness(2.2) blur(1px); }
  60%  { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}

.screen-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  margin-bottom: 8px;
  opacity: 0.85;
}
.blip {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: blip-pulse 1.0s ease-in-out infinite;
}
@keyframes blip-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.screen-idle .title {
  font-size: 18px; font-weight: 700; margin-bottom: 6px;
}
.cursor {
  display: inline-block; width: 9px; height: 16px;
  background: currentColor;
  margin-left: 4px; vertical-align: -2px;
  animation: cursor-blink 1s steps(2, end) infinite;
}
@keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.screen-idle .sub { font-size: 11px; opacity: 0.75; margin-bottom: 12px; }
.screen-ascii { font-size: 11px; white-space: pre; opacity: 0.65; line-height: 1.35; }

.screen-grid {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
}
.screen-list { list-style: none; }
.screen-list li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
  padding: 1px 0;
  opacity: 0;
  transform: translateX(-10px);
  animation: list-item-in 0.3s ease-out forwards;
}
@keyframes list-item-in {
  0%   { opacity: 0; transform: translateX(-10px); filter: brightness(2); }
  100% { opacity: 1; transform: translateX(0);   filter: brightness(1); }
}
.screen-list .marker { font-weight: 700; opacity: 0.6; min-width: 32px; }
.screen-side {
  font-size: 10px; line-height: 1.5;
  opacity: 0.85; letter-spacing: 0.04em;
}
.screen-side .bar {
  height: 4px; margin: 4px 0;
  background: rgba(255,255,255,0.1);
  position: relative;
  border-radius: 1px;
  overflow: hidden;
}
.screen-side .bar::before {
  content: ""; position: absolute; inset: 0; right: auto; width: var(--w, 0%);
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  transition: width 0.3s ease-out;
}

.launch-message .big {
  font-size: 18px; font-weight: 700; margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.launch-message .meta {
  font-size: 11px; line-height: 1.4; margin-bottom: 4px;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────  Lower block  ───────────────────────────── */
.lower {
  display: flex; align-items: stretch; gap: 18px;
  margin-top: 8px;
}
.button-row {
  display: flex; gap: 14px; flex: 1;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.btn {
  appearance: none; border: 0; padding: 0; background: transparent;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
  font-family: inherit; color: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-bezel {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2a2520 0%, #100c08 100%);
  padding: 4px;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.08),
    inset 0 -3px 4px rgba(0,0,0,0.7),
    0 3px 6px rgba(0,0,0,0.6);
}
.btn-cap {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* dark metal knob with soft top highlight */
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22) 0%, transparent 50%),
    radial-gradient(circle, #4a4a4d 0%, #2a2a2c 60%, #18181a 95%);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.75),
    inset 0 2px 3px rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}
.btn-led {
  /* silver-chrome center cap rather than an LED */
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, #f6f5ef 0%, #cfcdc6 35%, #807e76 75%, #2c2a26 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -1px 1px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
  transition: all 0.2s;
}
.btn.is-active .btn-cap {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,200,140,0.28) 0%, transparent 50%),
    radial-gradient(circle, #6a4630 0%, #3a2818 65%, #1d1208 95%);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.8),
    inset 0 2px 3px rgba(255,180,90,0.25),
    0 0 12px rgba(255,140,40,0.35);
}
.btn.is-active .btn-led {
  background: radial-gradient(circle at 40% 30%, #ffe4a8 0%, #ff8c2a 55%, #b04508 95%);
  box-shadow:
    0 0 10px rgba(255,160,60,0.95),
    inset 0 0 3px rgba(255,255,255,0.6);
}
.btn.is-pressing .btn-cap { transform: scale(0.94); box-shadow: inset 0 -1px 3px rgba(0,0,0,0.7); }
.btn:hover:not(:disabled) .btn-cap { filter: brightness(1.15); }
.btn:disabled { cursor: not-allowed; opacity: 0.7; }

.btn-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: #f0e6cc;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  text-align: center;
  max-width: 100px;
  line-height: 1.1;
}
.btn-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(216,200,168,0.75);
}
.stencil { font-family: 'JetBrains Mono', monospace; }

/* ─────────────────────────────  Launch block  ───────────────────────────── */
.launch-block {
  position: relative;
  width: 180px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 6px, rgba(255,255,255,0.02) 6px 12px),
    rgba(0,0,0,0.3);
  border: 2px solid rgba(0,0,0,0.6);
  border-radius: 6px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
  transition: filter 0.3s;
}
.launch-stripes {
  position: absolute; inset: 4px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 200, 0, 0.18) 0 8px,
    rgba(0,0,0,0.18) 8px 16px
  );
  border-radius: 4px;
  opacity: 0.65;
  pointer-events: none;
}
.launch-block.is-dim { filter: brightness(0.55) saturate(0.6); }
.launch-block.is-ready .launch-stripes {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 80, 30, 0.36) 0 8px,
    rgba(0,0,0,0.4) 8px 16px
  );
  animation: ready-stripes 1.4s linear infinite;
}
@keyframes ready-stripes { 0% { background-position: 0 0; } 100% { background-position: 22px 0; } }

.launch-label-top {
  position: relative;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: #ffd28a;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  text-transform: uppercase;
}

.launch-cage {
  position: relative;
  width: 100px; height: 100px;
}
.launch-bezel {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1c0c06 0%, #0a0402 100%);
  padding: 6px;
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,0.08),
    inset 0 -4px 6px rgba(0,0,0,0.8),
    0 4px 8px rgba(0,0,0,0.7);
}
.launch-cap {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* warm orange (industrial signal-orange) — matches reference */
  background:
    radial-gradient(circle at 35% 25%, rgba(255,240,180,0.32) 0%, transparent 55%),
    radial-gradient(circle, #ff9430 0%, #d65510 70%, #6a2208 95%);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.7),
    inset 0 3px 4px rgba(255,220,140,0.30);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, filter 0.2s;
}
.launch-text {
  font-size: 14px; font-weight: 800; letter-spacing: 0.08em;
  color: #fff5d8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 8px rgba(255,200,100,0.4);
}
.launch-block.is-ready .launch-cap {
  animation: ready-pulse 1.1s ease-in-out infinite;
}
@keyframes ready-pulse {
  0%, 100% { box-shadow: inset 0 -4px 8px rgba(0,0,0,0.7), inset 0 3px 4px rgba(255,255,255,0.18), 0 0 0 0 rgba(255,80,30,0.6); }
  50%      { box-shadow: inset 0 -4px 8px rgba(0,0,0,0.7), inset 0 3px 4px rgba(255,255,255,0.18), 0 0 0 14px rgba(255,80,30,0); }
}
.launch-cap:active { transform: scale(0.96); }
.launch-block.is-launching .launch-cap { transform: scale(0.92); }
.launch-block.is-launched .launch-cap {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(circle, #2c8a3a 0%, #0c3a16 85%);
}

.launch-progress {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: #ffd28a;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.pips { display: inline-flex; gap: 4px; }
.pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,140,40,0.18);
  border: 1px solid rgba(255,140,40,0.45);
}
.pip.on {
  background: #ff8c2a;
  border-color: #ff8c2a;
  box-shadow: 0 0 6px rgba(255,140,40,0.85);
}

/* ─────────────────────────────  Body vents + plates  ───────────────────────────── */
.body-vent {
  position: absolute; bottom: 12px;
  width: 30px; height: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.6) 2px 4px),
    rgba(0,0,0,0.3);
  border-radius: 1px;
  pointer-events: none;
}
.body-vent.left  { left: 60px; }
.body-vent.right { right: 60px; }

.power-strip {
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(216,200,168,0.7);
  padding: 4px 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  margin-top: 4px;
}

.serial-plate {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-end;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(216,200,168,0.5);
  padding: 4px 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.serial-plate .dot {
  width: 3px; height: 3px;
  background: rgba(216,200,168,0.4);
  border-radius: 50%;
}

/* steel material has darker labels */
.console.material-steel .ind-label,
.console.material-steel .brand,
.console.material-steel .btn-label,
.console.material-steel .btn-status,
.console.material-steel .launch-label-top,
.console.material-steel .launch-progress,
.console.material-steel .power-strip,
.console.material-steel .serial-plate {
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

/* Smaller screens */
@media (max-width: 880px) {
  .console { padding: 22px 22px 16px; }
  .lower { flex-direction: column; }
  .launch-block { width: 100%; }
  .indicator-bank { order: 3; flex-basis: 100%; justify-content: center; }
  .gauge { order: 4; margin: 0; }
}