* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: #9ccaff;
  font-family: "Courier New", monospace;
  overflow: hidden;
}

.monitor {
  width: 100vw;
  height: 100vh;
  padding: clamp(14px, 3vw, 38px);
  background:
    radial-gradient(circle at center, rgba(30,120,255,.18), transparent 45%),
    linear-gradient(#02070d, #000);
  border: 12px solid #050505;
  box-shadow:
    inset 0 0 100px #000,
    inset 0 0 35px #1e7fff,
    0 0 80px #000;
  text-shadow: 0 0 8px #4ea1ff;
}

.hidden { display: none !important; }

.start {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 18px;
}

.start h1 {
  font-size: clamp(28px, 5vw, 68px);
  letter-spacing: 6px;
}

button {
  font-family: inherit;
  font-weight: bold;
  font-size: 22px;
  color: #b8dcff;
  background: #02070d;
  border: 2px solid #6bb6ff;
  padding: 16px 42px;
  cursor: pointer;
  box-shadow: 0 0 20px #1e7fff, inset 0 0 15px #12365f;
  text-shadow: 0 0 8px #4ea1ff;
  transition: transform .12s, box-shadow .12s;
}

button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 35px #4ea1ff, inset 0 0 22px #1e7fff;
}

button:active {
  transform: scale(1.02) translateY(3px);
}

.boot {
  max-width: 1050px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: clamp(13px, 1.5vw, 20px);
  opacity: .75;
  letter-spacing: 2px;
}

.logo {
  width: min(320px, 46vw);
  max-height: 28vh;
  object-fit: contain;
  margin: 22px 0 10px;
  filter:
    brightness(1.35)
    contrast(1.25)
    drop-shadow(0 0 25px #4ea1ff);
  animation: logoGlow 2.5s infinite alternate;

h2 {
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 2px;
  margin: 8px 0 14px;
}

.lines {
  width: min(760px, 90vw);
  font-size: clamp(12px, 1.45vw, 18px);
}

.line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0;
}

.line span:first-child::after {
  content: "....................";
  opacity: .65;
}

.progress {
  margin-top: 14px;
  height: 20px;
}

#bar {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    #9ccaff 0 8px,
    #2f8dff 8px 13px,
    transparent 13px 18px
  );
  box-shadow: 0 0 18px #4ea1ff;
}

#percent {
  margin-top: 8px;
  font-size: 22px;
}

.enter {
  margin-top: 16px;
}

.clock {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: .65;
  font-size: 20px;
}

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06),
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: screen;
  animation: flicker .1s infinite;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.78) 100%);
}

@keyframes flicker {
  0%, 100% { opacity: .18; }
  50% { opacity: .32; }
}

@keyframes logoGlow {
  from { transform: scale(1); opacity: .88; }
  to { transform: scale(1.025); opacity: 1; }
}

.coming-soon {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: grid;
  place-content: center;
  text-align: center;
  overflow: hidden;
}

.coming-logo {
  width: min(720px, 88vw);
  filter:
    brightness(1.45)
    contrast(1.3)
    drop-shadow(0 0 18px #2f8dff)
    drop-shadow(0 0 55px #005dff);
  animation: floatLogo 4s ease-in-out infinite, logoShimmer 2.8s ease-in-out infinite;
}

.coming-text {
  margin-top: 34px;
  color: #9ccaff;
  font-family: "Courier New", monospace;
  font-size: clamp(18px, 3vw, 38px);
  letter-spacing: 5px;
  text-shadow:
    0 0 8px #2f8dff,
    0 0 20px #2f8dff;
}

.coming-text strong {
  margin: 0 18px;
}

@keyframes floatLogo {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-14px) scale(1.025);
  }
}

@keyframes logoShimmer {
  0%, 100% {
    filter:
      brightness(1.25)
      contrast(1.25)
      drop-shadow(0 0 18px #2f8dff)
      drop-shadow(0 0 45px #005dff);
  }
  50% {
    filter:
      brightness(1.7)
      contrast(1.45)
      drop-shadow(0 0 28px #6bb6ff)
      drop-shadow(0 0 75px #2f8dff);
  }
}
.final-screen {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.final-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(0.92);
}

.final-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0px,
    rgba(255,255,255,0.10) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.38;
  mix-blend-mode: overlay;
  animation: scanMove 0.45s linear infinite, scanFlicker 0.12s infinite;
}

.final-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.82) 100%);
}

@keyframes scanMove {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

@keyframes scanFlicker {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.48; }
}

.final-screen {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
}

.final-art {
  position: absolute;
  inset: 0;
  background-image: url("coming-soon.png?v=20");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80% auto;
}

.final-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.16) 0px,
    rgba(255,255,255,0.16) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
  animation: scanMove 0.35s linear infinite, scanFlicker 0.12s infinite;
}

.final-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  background: radial-gradient(circle at center, transparent 48%, rgba(0,0,0,0.82) 100%);
}

@keyframes scanMove {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

@keyframes scanFlicker {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.62; }
}

#comingScreen {
  position: fixed !important;
  inset: 0 !important;
  background: #000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#comingImage {
  width: 70vw !important;
  height: auto !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  display: block !important;
}

#scanlines {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 999 !important;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.12) 0px,
    rgba(255,255,255,0.12) 1px,
    transparent 1px,
    transparent 4px
  ) !important;
  opacity: 0.55 !important;
  animation: scanlinesMove 0.35s linear infinite !important;
}

@keyframes scanlinesMove {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}