:root {
  --bg: #08080c;
  --neon: #ff2d2d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,45,45,0.12), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(255,150,45,0.06), transparent 50%),
    var(--bg);
  color: #fff;
  min-height: 100vh;
}

/* CRT scanline overlay */
.scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* Hero number sizing */
.hero-number {
  font-size: clamp(3.2rem, 18vw, 9rem);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.75; }
  98% { opacity: 0.95; }
  99% { opacity: 0.6; }
}

.colon-blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* Banner */
.banner {
  background: linear-gradient(180deg, rgba(255,45,45,0.08), rgba(255,45,45,0.02));
  box-shadow: 0 0 30px rgba(255,45,45,0.15), inset 0 0 20px rgba(255,45,45,0.05);
  animation: bannerPulse 2.5s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,45,45,0.12), inset 0 0 20px rgba(255,45,45,0.04); }
  50% { box-shadow: 0 0 45px rgba(255,45,45,0.3), inset 0 0 25px rgba(255,45,45,0.09); }
}

/* Status dot */
.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 10px #ff2d2d, 0 0 20px #ff2d2d;
  animation: dotPulse 1.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* Glitch effect during reboot / intro */
.glitch {
  position: relative;
  animation: glitchShift 0.25s infinite;
}
@keyframes glitchShift {
  0% { transform: translate(0,0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0,0); }
}

.reboot-btn {
  box-shadow: 0 0 18px rgba(255,45,45,0.4);
}
.reboot-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.log-panel::-webkit-scrollbar { width: 6px; }
.log-panel::-webkit-scrollbar-thumb { background: rgba(0,255,100,0.3); border-radius: 3px; }

/* Staggered page-load reveals */
.fade-in { animation: rise 0.6s ease both; }
.fade-in-2 { animation: rise 0.6s ease both; animation-delay: 0.15s; }
.fade-in-3 { animation: rise 0.6s ease both; animation-delay: 0.3s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

button:focus { outline: none; }