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

.retro-header {
  background: linear-gradient(45deg, #001122, #003344);
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #00ff41;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
  position: relative;
}

.retro-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.03) 2px,
    rgba(0, 255, 65, 0.03) 4px
  );
  pointer-events: none;
}

.terminal-glow {
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
  background: linear-gradient(135deg, #001122, #002233);
}

.retro-button {
  background: linear-gradient(45deg, #ff00ff, #00ffff) !important;
  color: black !important;
  text-shadow: 1px 1px 0 white;
  border: 3px solid #ffff00 !important;
  box-shadow: 0 0 15px rgba(255, 255, 0, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.scan-lines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
}

/* Custom scrollbar for retro feel */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #001122;
}

::-webkit-scrollbar-thumb {
  background: #00ff41;
  border-radius: 6px;
}

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

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: #00ff41;
}

/* Range slider styling */
input[type="range"] {
  accent-color: #00ff41;
}

/* Select and input styling */
select, input[type="text"], input[type="color"], textarea {
  background: #001122 !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
}

select:focus, input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

/* Fun hover effects */
button:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Easter egg - konami code ready */
.konami-active {
  animation: rainbow-bg 2s infinite;
}

@keyframes rainbow-bg {
  0% { background-color: red; }
  16% { background-color: orange; }
  32% { background-color: yellow; }
  48% { background-color: green; }
  64% { background-color: blue; }
  80% { background-color: indigo; }
  100% { background-color: violet; }
}