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

body {
  background: #0a0e27;
  min-height: 100vh;
}

/* Scanlines overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Background grid */
.bg-grid {
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridScroll 20s linear infinite;
}

@keyframes gridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Glitch text animation */
@keyframes glitch {
  0%, 100% { text-shadow: 2px 0 #ff006e, -2px 0 #00d4ff; }
  25% { text-shadow: -2px -1px #ff006e, 2px 1px #00d4ff; }
  50% { text-shadow: 1px 2px #ff006e, -1px -2px #00d4ff; }
  75% { text-shadow: -1px 1px #ff006e, 1px -1px #00d4ff; }
}

.glitch-text {
  animation: glitch 3s ease-in-out infinite;
}

@keyframes glitchHard {
  0%, 90%, 100% { 
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  92% {
    clip-path: inset(20% 0 40% 0);
    transform: translate(-4px, 2px);
  }
  94% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(4px, -2px);
  }
  96% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(-2px, 1px);
  }
  98% {
    clip-path: inset(70% 0 5% 0);
    transform: translate(2px, -1px);
  }
}

.glitch-hard {
  position: relative;
}

.glitch-hard::before,
.glitch-hard::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-hard::before {
  color: #ff006e;
  animation: glitchHard 5s infinite linear;
  z-index: -1;
}

.glitch-hard::after {
  color: #00d4ff;
  animation: glitchHard 5s infinite linear reverse;
  z-index: -1;
}

/* Fade in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* Pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 212, 255, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.2); }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Neon border */
.neon-border {
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.1), inset 0 0 10px rgba(0, 212, 255, 0.05);
}

.neon-border:hover {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), inset 0 0 20px rgba(0, 212, 255, 0.1);
}

/* Golden border for featured */
.golden-border {
  border: 2px solid #ffd700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2), inset 0 0 15px rgba(255, 215, 0, 0.05);
}

.golden-border:hover {
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.1);
}

/* Glass morphism */
.glass {
  background: rgba(17, 22, 64, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Matrix rain for loading */
@keyframes matrixFall {
  0% { transform: translateY(-100%); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Typewriter */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink::after {
  content: '▊';
  animation: blink 0.8s step-end infinite;
  color: #00d4ff;
}

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.marquee-text {
  animation: marquee 25s linear infinite;
  white-space: nowrap;
}

/* Browser chrome */
.browser-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* Pixel building animation */
@keyframes pixelBuild {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Card hover lift */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
}

/* Loading bar animation */
@keyframes loadingBar {
  0% { width: 0%; }
  20% { width: 15%; }
  40% { width: 45%; }
  60% { width: 65%; }
  80% { width: 85%; }
  100% { width: 100%; }
}

.loading-bar-anim {
  animation: loadingBar 2.5s ease-in-out;
}

/* Star rating */
.star-btn {
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.star-btn:hover {
  transform: scale(1.3);
}

/* Poll bar animation */
@keyframes pollBarGrow {
  from { width: 0%; }
}

.poll-bar {
  animation: pollBarGrow 1s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0e27;
}

::-webkit-scrollbar-thumb {
  background: #1a2060;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00d4ff;
}

/* Hit counter retro */
.hit-counter {
  font-family: 'Fira Code', monospace;
  background: #000;
  border: 2px inset #444;
  padding: 4px 12px;
  color: #0f0;
  letter-spacing: 3px;
}

/* Pixel art gravestone */
.gravestone {
  image-rendering: pixelated;
}

/* Responsive masonry */
.masonry-grid {
  column-count: 1;
  column-gap: 16px;
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

.masonry-grid > * {
  break-inside: avoid;
  margin-bottom: 16px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}