@tailwind base;

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

body {
  background: #1a1a2e;
  font-family: 'Press Start 2P', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

/* CRT Monitor bezel */
.crt-bezel {
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-radius: 24px;
  padding: 20px;
  box-shadow:
    0 0 60px rgba(0,0,0,0.8),
    inset 0 2px 4px rgba(255,255,255,0.05),
    0 0 120px rgba(64,64,224,0.15);
  position: relative;
}

.crt-bezel::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border-radius: 20px;
  border: 2px solid #333;
  pointer-events: none;
}

/* CRT Screen effect */
.crt-screen {
  position: relative;
  background: #4040E0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.4),
    0 0 20px rgba(64,64,224,0.3);
}

.crt-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 10;
}

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

/* Phosphor glow */
.phosphor-glow {
  text-shadow: 0 0 8px rgba(108,108,255,0.6);
}

/* Scanline flicker animation */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
  75% { opacity: 0.97; }
}

.crt-flicker {
  animation: flicker 0.15s infinite;
}

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

.blink-cursor {
  animation: blink 0.6s step-end infinite;
}

/* Boot text typing */
@keyframes typeIn {
  from { width: 0; }
  to { width: 100%; }
}

/* Oscilloscope glow */
.scope-glow {
  filter: drop-shadow(0 0 4px #33FF33) drop-shadow(0 0 8px rgba(51,255,51,0.4));
}

/* Knob styling */
.knob-container {
  position: relative;
  width: 48px;
  height: 48px;
  cursor: grab;
}

.knob-container:active {
  cursor: grabbing;
}

.knob-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #555, #222);
  border: 2px solid #666;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    inset 0 1px 2px rgba(255,255,255,0.1);
  position: relative;
}

.knob-indicator {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 10px;
  background: #33FF33;
  border-radius: 2px;
  box-shadow: 0 0 4px #33FF33;
}

/* Transport buttons */
.transport-btn {
  background: linear-gradient(180deg, #444 0%, #222 100%);
  border: 2px solid #555;
  border-bottom-color: #111;
  border-right-color: #111;
  padding: 8px 16px;
  color: #ccc;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  transition: all 0.05s;
  user-select: none;
}

.transport-btn:hover {
  background: linear-gradient(180deg, #555 0%, #333 100%);
  color: #fff;
}

.transport-btn:active {
  border: 2px solid #111;
  border-top-color: #555;
  border-left-color: #555;
  transform: translateY(1px);
}

.transport-btn.active {
  background: linear-gradient(180deg, #33AA33 0%, #226622 100%);
  color: #fff;
  box-shadow: 0 0 8px rgba(51,255,51,0.3);
}

/* Waveform selector */
.wave-btn {
  background: #1a1a3e;
  border: 1px solid #4040E0;
  color: #6C6CFF;
  padding: 2px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  cursor: pointer;
}

.wave-btn.active {
  background: #4040E0;
  color: #fff;
  box-shadow: 0 0 6px rgba(64,64,224,0.5);
}

/* Song list */
.song-item {
  cursor: pointer;
  padding: 4px 8px;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item:hover {
  background: rgba(108,108,255,0.3);
}

.song-item.active {
  background: #6C6CFF;
  color: #000;
}

/* Filter type toggle */
.filter-toggle {
  background: #1a1a3e;
  border: 1px solid #4040E0;
  color: #6C6CFF;
  padding: 3px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  cursor: pointer;
}

.filter-toggle.active {
  background: #FF6633;
  border-color: #FF6633;
  color: #000;
}

/* LED display */
.led-display {
  background: #0a0a0a;
  border: 2px inset #333;
  color: #FF3333;
  font-family: 'Press Start 2P', monospace;
  padding: 4px 8px;
  text-shadow: 0 0 8px rgba(255,51,51,0.6);
}

/* Volume slider */
input[type="range"].sid-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, #222, #4040E0);
  border-radius: 3px;
  outline: none;
}

input[type="range"].sid-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, #6C6CFF, #4040E0);
  border: 2px solid #8888FF;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(108,108,255,0.5);
}

/* Chip model toggle */
.chip-toggle {
  background: #1a1a3e;
  border: 2px solid #333;
  color: #6C6CFF;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
}

.chip-toggle.active {
  background: #4040E0;
  color: #fff;
  border-color: #6C6CFF;
}

/* Scroll hex values */
@keyframes scrollHex {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.hex-scroll {
  animation: scrollHex 10s linear infinite;
}

/* Mute button */
.mute-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #6C6CFF;
  background: #33FF33;
  cursor: pointer;
  font-size: 0;
  box-shadow: 0 0 4px rgba(51,255,51,0.5);
}

.mute-btn.muted {
  background: #FF3333;
  border-color: #FF3333;
  box-shadow: 0 0 4px rgba(255,51,51,0.5);
}

/* Power LED */
.power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF3333;
  box-shadow: 0 0 6px #FF3333;
}

.power-led.on {
  background: #33FF33;
  box-shadow: 0 0 6px #33FF33;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed #4040E0;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-zone:hover {
  border-color: #6C6CFF;
  background: rgba(108, 108, 255, 0.1);
}

.upload-zone.drag-over {
  border-color: #33FF33;
  background: rgba(51, 255, 51, 0.1);
}

/* Song list scrollbar */
div::-webkit-scrollbar {
  width: 6px;
}

div::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.3);
}

div::-webkit-scrollbar-thumb {
  background: #4040E0;
  border-radius: 3px;
}

div::-webkit-scrollbar-thumb:hover {
  background: #6C6CFF;
}

/* Responsive */
@media (max-width: 768px) {
  .crt-bezel {
    border-radius: 12px;
    padding: 8px;
  }
}