/* Import retro fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Courier+Prime:wght@400;700&display=swap');

/* Wood grain background */
.wood-grain-bg {
  background-image: 
    linear-gradient(45deg, #8B4513 25%, transparent 25%, transparent 75%, #8B4513 75%),
    linear-gradient(-45deg, #8B4513 25%, transparent 25%, transparent 75%, #8B4513 75%),
    linear-gradient(90deg, #A0522D, #D2B48C);
  background-size: 60px 60px, 60px 60px, 100% 100%;
  background-position: 0 0, 30px 30px, 0 0;
  position: relative;
}

.wood-grain-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(139, 69, 19, 0.1) 0px,
      rgba(160, 82, 45, 0.1) 2px,
      rgba(210, 180, 140, 0.1) 4px
    );
  pointer-events: none;
}

/* Retro text shadow */
.retro-shadow {
  text-shadow: 
    4px 4px 0 #D2B48C,
    8px 8px 0 rgba(139, 69, 19, 0.3),
    12px 12px 20px rgba(0, 0, 0, 0.3);
}

/* TV cabinet styling */
.tv-cabinet {
  position: relative;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.3);
}

.tv-cabinet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(139, 69, 19, 0.1) 0px,
      rgba(160, 82, 45, 0.1) 1px,
      transparent 2px
    );
  border-radius: inherit;
  pointer-events: none;
}

/* TV screen border effect */
.tv-screen-border {
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 255, 0, 0.1);
}

/* Scanlines effect */
.scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 2px,
    rgba(0, 255, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 10;
}

/* Color bars animation */
.color-bars {
  background: linear-gradient(
    90deg,
    #ff0000 0%, #ff0000 14.28%,
    #ffa500 14.28%, #ffa500 28.56%,
    #ffff00 28.56%, #ffff00 42.84%,
    #00ff00 42.84%, #00ff00 57.12%,
    #00ffff 57.12%, #00ffff 71.4%,
    #0000ff 71.4%, #0000ff 85.68%,
    #ff00ff 85.68%, #ff00ff 100%
  );
  animation: colorBarShift 3s ease-in-out infinite alternate;
}

@keyframes colorBarShift {
  0% { opacity: 0.8; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.02); }
  100% { opacity: 0.8; transform: scaleX(1); }
}

/* Neon glow effect */
.neon-glow {
  box-shadow: 
    0 0 20px rgba(255, 176, 0, 0.5),
    0 0 40px rgba(255, 176, 0, 0.3),
    0 0 60px rgba(255, 176, 0, 0.1);
  transition: all 0.3s ease;
}

.neon-glow:hover {
  box-shadow: 
    0 0 30px rgba(255, 176, 0, 0.8),
    0 0 60px rgba(255, 176, 0, 0.5),
    0 0 90px rgba(255, 176, 0, 0.3);
}

/* Feature panel styling */
.feature-panel {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid rgba(139, 69, 19, 0.3);
}

.feature-panel:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Retro font styling */
h1, h2 {
  font-family: 'Orbitron', monospace;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .retro-shadow {
    text-shadow: 
      2px 2px 0 #D2B48C,
      4px 4px 0 rgba(139, 69, 19, 0.3),
      6px 6px 15px rgba(0, 0, 0, 0.3);
  }
  
  .wood-grain-bg {
    background-size: 30px 30px, 30px 30px, 100% 100%;
    background-position: 0 0, 15px 15px, 0 0;
  }
}

/* CRT glow animation */
@keyframes crtGlow {
  0%, 100% { 
    box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
  }
  50% { 
    box-shadow: inset 0 0 30px rgba(0, 255, 0, 0.2);
  }
}

.tv-screen-border {
  animation: crtGlow 4s ease-in-out infinite;
}