:root{
  --bg: #070A12;
  --panel: rgba(10, 16, 28, 0.68);
  --border: rgba(255, 255, 255, 0.14);

  --text: rgba(245, 250, 255, 0.92);
  --muted: rgba(245, 250, 255, 0.62);

  /* Saturated green */
  --accent: rgba(110, 255, 210, 1);
  --glow: rgba(110, 255, 210, 0.45);

  /* Background tuning */
  --bg-saturation: 1.08;
  --bg-contrast: 1.05;
  --bg-brightness: 1.05;
}

*{ box-sizing: border-box; }
html, body{
  height: 100%;
  width: 100%;
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.scene{
  position: relative;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

.bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  background-image: url("./space-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  filter: saturate(var(--bg-saturation)) contrast(var(--bg-contrast)) brightness(var(--bg-brightness));
}

.vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1400px 900px at 50% 35%,
      rgba(0,0,0,0.08),
      rgba(0,0,0,0.45)
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.40)
    );
}

.event-branding{
  position: absolute;
  inset: 0;
  background-image: url("./event-branding.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.18;
  filter: saturate(1.2) contrast(1.1);
  pointer-events: none;
  z-index: 1;
}

.console{
  position: relative;
  z-index: 2;

  width: min(900px, 92vw);
  padding: 22px 22px 16px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

.console::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0.00) 3px,
      rgba(0,0,0,0.00) 6px
    );
  opacity: 0.30;
}

.console__header{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}

.badge__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px var(--glow);
}

.badge__text{
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text);
}

.meta{
  display: grid;
  gap: 4px;
}
.meta__label{
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.meta__value{
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text);
}

.readout{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 0 26px rgba(110,255,210,0.12);
}

.readout__prefix{
  font-size: clamp(20px, 3vw, 28px);
  color: var(--muted);
  letter-spacing: 0.1em;
}

.readout__time{
  font-family: Oxanium, ui-monospace, system-ui, sans-serif;
  font-size: clamp(84px, 14vw, 160px);
  letter-spacing: 0.08em;
  line-height: 0.95;

  color: var(--accent);
  text-shadow:
    0 0 12px rgba(110, 255, 210, 0.9),
    0 0 36px rgba(110, 255, 210, 0.6),
    0 0 90px rgba(110, 255, 210, 0.35);
  filter: saturate(1.35) contrast(1.15);
}

.mission-date{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  text-align: center;
}

.mission-date__label{
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.mission-date__value{
  margin-top: 6px;
  font-family: Oxanium, system-ui, sans-serif;
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 0.14em;
  color: rgba(160, 255, 220, 0.9);
  text-shadow:
    0 0 10px rgba(110,255,210,0.35),
    0 0 28px rgba(110,255,210,0.18);
}

.console__footer{
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  color: var(--text);
}

/* States */
.console.is-running .badge__dot{
  animation: pulse 1.1s ease-in-out infinite;
}

.console.is-urgent .readout__time{
  animation: flicker 0.85s linear infinite;
}

.console.is-final10 .readout__time{
  animation: pulseBig 0.6s ease-in-out infinite;
}

.console.is-launch{
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 60px rgba(110,255,210,0.18);
  animation: launchFlash 1.1s ease-in-out 1;
}

@keyframes pulse{
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px var(--glow); }
  50% { transform: scale(1.25); box-shadow: 0 0 30px rgba(110,255,210,0.32); }
}

@keyframes flicker{
  0% { opacity: 1; }
  10% { opacity: 0.86; }
  12% { opacity: 1; }
  22% { opacity: 0.92; }
  24% { opacity: 1; }
  55% { opacity: 0.88; }
  57% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes pulseBig{
  0%, 100% {
    transform: scale(1);
    text-shadow:
      0 0 16px rgba(110,255,210,0.8),
      0 0 48px rgba(110,255,210,0.5),
      0 0 110px rgba(110,255,210,0.35);
  }
  50% {
    transform: scale(1.02);
    text-shadow:
      0 0 28px rgba(110,255,210,1),
      0 0 80px rgba(110,255,210,0.75),
      0 0 160px rgba(110,255,210,0.45);
  }
}

@keyframes launchFlash{
  0% { transform: translateY(0); }
  12% { transform: translateY(-2px); }
  24% { transform: translateY(0); }
  36% { transform: translateY(-2px); }
  48% { transform: translateY(0); }
  60% { box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 90px rgba(110,255,210,0.22); }
  100% { box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 60px rgba(110,255,210,0.18); }
}