@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: 'VT323', monospace;
  overflow-x: hidden;
}

.font-pixel {
  font-family: 'Press Start 2P', cursive;
}

.font-mono {
  font-family: 'VT323', monospace;
}

/* Pixelated images */
.pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* CRT Effects */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
}

.crt-curve {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Glitch text effect */
.glitch-text {
  position: relative;
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    text-shadow: 
      2px 0 #ff00ff,
      -2px 0 #00ffff;
  }
  25% {
    text-shadow: 
      -2px 0 #ff00ff,
      2px 0 #00ffff;
  }
  50% {
    text-shadow: 
      2px 2px #ff00ff,
      -2px -2px #00ffff;
  }
  75% {
    text-shadow: 
      -2px 2px #ff00ff,
      2px -2px #00ffff;
  }
  100% {
    text-shadow: 
      2px 0 #ff00ff,
      -2px 0 #00ffff;
  }
}

/* Screen shake */
.screen-shake {
  animation: shake 0.2s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-1deg); }
  50% { transform: translateX(5px) rotate(1deg); }
  75% { transform: translateX(-3px) rotate(-0.5deg); }
}

/* Glitch effect */
.glitch-effect {
  animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
  0% { filter: none; }
  20% { filter: hue-rotate(90deg) saturate(200%); }
  40% { filter: invert(1); transform: skewX(5deg); }
  60% { filter: hue-rotate(180deg) contrast(150%); }
  80% { filter: saturate(300%) brightness(1.5); transform: skewX(-3deg); }
  100% { filter: none; }
}

/* Typewriter cursor */
.typing-cursor::after {
  content: '▊';
  animation: blink 0.7s infinite;
  color: #00ffff;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Phosphor glow */
.phosphor-glow {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a0a2e;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff69b4, #8b00ff);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff99cc, #aa55ff);
}

/* Button hover effects */
button {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}

button:hover::before {
  left: 100%;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .font-pixel {
    font-size: 0.625rem;
  }
  
  .scanlines {
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 3px
    );
  }
}

/* Dithering pattern overlay */
.dither-overlay {
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23000' fill-opacity='0.1'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000' fill-opacity='0.1'/%3E%3C/svg%3E");
}

/* Neon border animation */
@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 
      0 0 5px #ff00ff,
      0 0 10px #ff00ff,
      inset 0 0 5px rgba(255, 0, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 0 10px #00ffff,
      0 0 20px #00ffff,
      inset 0 0 10px rgba(0, 255, 255, 0.3);
  }
}

.neon-border {
  animation: neon-pulse 2s infinite;
}

/* VHS tracking effect */
@keyframes vhs-tracking {
  0% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

.vhs-effect {
  animation: vhs-tracking 0.1s infinite;
}