* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0a0a0a;
  color: #ffffff;
  font-family: 'Press Start 2P', cursive;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Title ── */
.title {
  font-size: clamp(2rem, 8vw, 5rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  color: #ffffff;
  user-select: none;
}

/* ── Glitch pseudo-layers ── */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.glitch::before {
  color: #ff00ff;
  clip-path: inset(0 0 0 0);
  animation: glitch-top 0.15s linear infinite alternate-reverse;
}

.glitch::after {
  color: #00ffff;
  clip-path: inset(0 0 0 0);
  animation: glitch-bottom 0.2s linear infinite alternate-reverse;
}

/* ── VHS scan-line overlay (applied via JS class) ── */
.glitch-active .title::before,
.glitch-active .title::after {
  /* layers visible during glitch phase */
}

/* When glitch phase ends, remove pseudo-layer animations */
.glitch-done::before,
.glitch-done::after {
  display: none;
}

/* ── Keyframes ── */
@keyframes glitch-top {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate(-4px, -2px); }
  20%  { clip-path: inset(50% 0 10% 0); transform: translate(3px, 1px); }
  40%  { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 3px); }
  60%  { clip-path: inset(80% 0 5% 0);  transform: translate(5px, -1px); }
  80%  { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 2px); }
  100% { clip-path: inset(60% 0 20% 0); transform: translate(2px, -3px); }
}

@keyframes glitch-bottom {
  0%   { clip-path: inset(70% 0 5% 0);  transform: translate(3px, 2px); }
  20%  { clip-path: inset(5% 0 60% 0);  transform: translate(-4px, -1px); }
  40%  { clip-path: inset(40% 0 30% 0); transform: translate(2px, -3px); }
  60%  { clip-path: inset(15% 0 50% 0); transform: translate(-3px, 1px); }
  80%  { clip-path: inset(55% 0 15% 0); transform: translate(4px, -2px); }
  100% { clip-path: inset(25% 0 45% 0); transform: translate(-2px, 3px); }
}

@keyframes scanline {
  0%   { top: -10%; }
  100% { top: 110%; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
  75%      { opacity: 0.9; }
}

/* ── VHS scanline bar (injected by JS) ── */
.scanline {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: scanline 0.8s linear infinite;
  pointer-events: none;
  z-index: 10;
}

/* ── VHS flicker on body ── */
.vhs-flicker {
  animation: flicker 0.12s infinite;
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 1.5rem;
  font-size: clamp(0.55rem, 1.5vw, 0.75rem);
  opacity: 0.5;
  letter-spacing: 0.05em;
}

/* ── Responsive tweaks ── */
@media (max-width: 480px) {
  .footer {
    padding: 1rem;
  }
}