@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Special+Elite&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Special Elite', monospace;
  background: #0a0a0a;
  color: #e0e0e0;
}

.horror-title {
  font-family: 'Creepster', cursive;
  color: #DC143C;
  text-shadow: 
    0 0 10px rgba(220, 20, 60, 0.8),
    0 0 20px rgba(220, 20, 60, 0.6),
    0 0 30px rgba(220, 20, 60, 0.4),
    3px 3px 0 #000;
  letter-spacing: 2px;
}

.flicker {
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.7;
  }
}

.horror-card {
  background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid #2a0a0a;
  box-shadow: 
    0 0 20px rgba(139, 0, 0, 0.2),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  position: relative;
}

.horror-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  border-radius: inherit;
}

.horror-input {
  background: #0d0d0d;
  border: 1px solid #3a1a1a;
  color: #e0e0e0;
  font-family: 'Special Elite', monospace;
  transition: all 0.3s ease;
}

.horror-input:focus {
  outline: none;
  border-color: #8B0000;
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

.horror-input::placeholder {
  color: #4a4a4a;
  font-style: italic;
}

.generate-btn {
  background: linear-gradient(180deg, #8B0000 0%, #5a0000 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.generate-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(220, 20, 60, 0.3) 0%, transparent 70%);
  animation: pulse-glow 2s infinite;
}

.generate-btn:hover {
  transform: scale(1.02);
  box-shadow: 
    0 0 20px rgba(220, 20, 60, 0.6),
    0 0 40px rgba(220, 20, 60, 0.3);
}

.generate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.quick-btn {
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-btn:hover {
  background: #2a2a2a;
  border-color: #8B0000;
  color: #fff;
}

.cursed-active {
  background: #2a0a2a !important;
  border-color: #8B008B !important;
  color: #ff00ff !important;
  animation: cursed-pulse 1s infinite;
}

@keyframes cursed-pulse {
  0%, 100% { box-shadow: 0 0 5px #ff00ff; }
  50% { box-shadow: 0 0 15px #ff00ff; }
}

.action-btn {
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #e0e0e0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #2a2a2a;
  border-color: #DC143C;
}

.poster-frame {
  background: #000;
  border: 4px solid #1a1a1a;
  box-shadow: 
    inset 0 0 50px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(0, 0, 0, 0.5);
}

.developing-animation {
  animation: develop 2s infinite;
}

@keyframes develop {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.pulse {
  animation: pulse-icon 1s infinite;
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.vhs-gallery {
  scrollbar-width: thin;
  scrollbar-color: #8B0000 #1a1a1a;
}

.vhs-gallery::-webkit-scrollbar {
  height: 8px;
}

.vhs-gallery::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.vhs-gallery::-webkit-scrollbar-thumb {
  background: #8B0000;
  border-radius: 4px;
}

.vhs-tape {
  transition: all 0.3s ease;
  border: 2px solid #2a2a2a;
  padding: 8px;
  background: #0d0d0d;
  border-radius: 4px;
}

.vhs-tape:hover {
  transform: rotate(0deg) scale(1.05) !important;
  border-color: #8B0000;
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.5);
}

.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(50, 50, 50, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(50, 50, 50, 0.1) 0%, transparent 50%);
  animation: fog-drift 20s infinite linear;
}

@keyframes fog-drift {
  0% { background-position: 0 0, 100% 100%; }
  100% { background-position: 100% 100%, 0 0; }
}

.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 1000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

.glitch-skull {
  animation: glitch 0.2s linear;
  color: #DC143C !important;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .horror-title {
    font-size: 1.8rem !important;
  }
  
  .horror-card {
    padding: 1rem;
  }
  
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}