:root{
  --bg: #070A12;
  --panel: rgba(10, 16, 28, 0.68);
  --border: rgba(255, 255, 255, 0.14);
 --glow: rgba(110, 255, 210, 0.45);
  --text: rgba(245, 250, 255, 0.92);
  --muted: rgba(245, 250, 255, 0.62);
    --accent: rgba(110, 255, 210, 1);
  --danger: rgba(255, 110, 130, 0.92);
}

* { box-sizing: border-box; }
html, body { height: 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;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

.bg{
  position: absolute;
  inset: 0;
  background-image: url("event-branding.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05) brightness(0.85);
  transform: scale(1.03);
}

.vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0.20), rgba(0,0,0,0.75)),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.65));
}

.event-branding{
  position: absolute;
  inset: 0;
  background-image: url("assets/event-branding.png");
  background-repeat: no-repeat;
  background-position: centre;
  background-size: contain;

  opacity: 0.18;              /* default subtle presence */
  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(120,255,220,0.10);
}

.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: rgba(110, 255, 210, 1);
  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);
}

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

.subreadout__cell{
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.subreadout__label{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.subreadout__value{
  margin-top: 6px;
  font-family: Oxanium, ui-monospace, monospace;
  font-size: 42px;
  letter-spacing: 0.08em;

  color: rgba(110, 255, 210, 0.95);
  text-shadow:
    0 0 10px rgba(110, 255, 210, 0.6),
    0 0 28px rgba(110, 255, 210, 0.35);
}


.controls{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.btn{
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.btn:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--primary{
  border-color: rgba(120,255,220,0.35);
  background: rgba(120,255,220,0.08);
}

.btn--danger{
  border-color: rgba(255,110,130,0.35);
  background: rgba(255,110,130,0.08);
}

.console__footer{
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}

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);
}

.muted{ color: var(--muted); }

/* State styles driven by JS */
.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(120,255,220,0.18);
  animation: launchFlash 1.1s ease-in-out 1;
}
.console.is-launch .badge__dot{
  background: var(--accent);
  box-shadow: 0 0 26px rgba(120,255,220,0.35);
}

@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(120,255,220,0.32); }
}

@keyframes flicker{
  0% { opacity: 1; }
  10% { opacity: 0.85; }
  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(120,255,220,0.22); }
  100% { box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 60px rgba(120,255,220,0.18); }
}

@media (max-width: 640px){
  .controls{ grid-template-columns: repeat(2, 1fr); }
}