@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=VT323:wght@400&display=swap');

.font-orbitron {
  font-family: 'Orbitron', monospace;
}

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

/* CRT Screen Effects */
.crt-screen {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.95) 70%, rgba(0,0,0,1) 100%);
  box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}

.crt-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  z-index: 10;
}

/* Scan Lines */
.scan-lines {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 255, 0, 0.1) 2px,
    rgba(0, 255, 0, 0.1) 4px
  );
  animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
  0% { transform: translateY(0px); }
  100% { transform: translateY(4px); }
}

/* TV Static */
.tv-static {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.1) 2px,
      rgba(255,255,255,0.1) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.1) 2px,
      rgba(255,255,255,0.1) 4px
    );
  animation: static 0.2s linear infinite;
}

@keyframes static {
  0% { 
    background-position: 0px 0px, 0px 0px;
    opacity: 0.8;
  }
  25% { 
    background-position: 1px 1px, -1px 0px;
    opacity: 0.6;
  }
  50% { 
    background-position: -1px 2px, 1px -1px;
    opacity: 0.9;
  }
  75% { 
    background-position: 2px -1px, -2px 1px;
    opacity: 0.7;
  }
  100% { 
    background-position: -2px 0px, 2px 2px;
    opacity: 0.8;
  }
}

/* TV Frame */
.tv-frame {
  background: 
    linear-gradient(135deg, #8B4513 0%, #A0522D  25%, #8B4513 50%, #654321 75%, #8B4513 100%),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 69, 19, 0.1) 2px, rgba(139, 69, 19, 0.1) 4px);
  border: 3px solid #654321;
  position: relative;
}

.tv-frame::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, #A0522D, #8B4513, #654321, #8B4513);
  border-radius: inherit;
  z-index: -1;
}

/* Test Pattern */
.test-pattern {
  background: linear-gradient(
    to right,
    #FFFFFF 0%, #FFFFFF 12.5%,
    #FFFF00 12.5%, #FFFF00 25%,
    #00FFFF 25%, #00FFFF 37.5%,
    #00FF00 37.5%, #00FF00 50%,
    #FF00FF 50%, #FF00FF 62.5%,
    #FF0000 62.5%, #FF0000 75%,
    #0000FF 75%, #0000FF 87.5%,
    #000000 87.5%, #000000 100%
  );
}

/* Scrolling text */
@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-scroll-left {
  animation: scroll-left 20s linear infinite;
}

/* Custom slider styling */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FCD34D;
  cursor: pointer;
  border: 2px solid #F59E0B;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FCD34D;
  cursor: pointer;
  border: 2px solid #F59E0B;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tv-frame {
    padding: 1rem;
  }
  
  .crt-screen {
    border-width: 2px;
  }
}

/* Glow effects for interactive elements */
.tv-frame button:hover {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.tv-frame input[type="range"]:hover {
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.5);
}

/* Power button glow when on */
.tv-frame button.bg-red-500 {
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}