.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.9s var(--ease-smooth), opacity 0.6s ease;
}

.loading-screen.is-leaving {
  transform: translateY(-100%);
}

.loading-screen__crt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 2px, transparent 4px);
  pointer-events: none;
}

.loading-screen__scan {
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(63,224,224,0.12), transparent);
  animation: scanMove 3s linear infinite;
  pointer-events: none;
}

@keyframes scanMove {
  0% { top: -120px; }
  100% { top: 100%; }
}

.loading-screen__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: noiseShift 0.5s steps(4) infinite;
}

@keyframes noiseShift {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
}

.loading-screen__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(90vw, 480px);
}

.loading-screen__logo {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  letter-spacing: 0.02em;
  margin-bottom: 2.5rem;
  animation: logoWobble 2.4s ease-in-out infinite;
}

.loading-screen__logo .blink {
  color: var(--red);
  animation: blinkOpacity 0.9s steps(2) infinite;
}

@keyframes blinkOpacity { 50% { opacity: 0; } }

@keyframes logoWobble {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-4px); }
}

.loading-screen__bar {
  position: relative;
  height: 22px;
  border: var(--border-w) solid var(--cream);
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(244,241,232,0.15) 6px 8px);
  margin-bottom: 1rem;
  image-rendering: pixelated;
  overflow: hidden;
}

.loading-screen__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, var(--yellow) 10px 20px);
  transition: width 0.25s steps(10);
}

.loading-screen__bar-pixels {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px);
  opacity: 0.5;
  pointer-events: none;
}

.loading-screen__msg {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  min-height: 1.2em;
}

.loading-screen__percent {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  opacity: 0.7;
}