* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #0d0d1a; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow-x: hidden; min-height: 100vh; }

body {
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(107,47,160,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(15,155,142,0.1) 0%, transparent 60%),
    #0d0d1a;
}

canvas#emu-screen {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 4px 2px rgba(0,255,100,0.6); }
  50% { box-shadow: 0 0 8px 4px rgba(0,255,100,0.9); }
}

@keyframes powerOn {
  0% { filter: brightness(3) contrast(0); }
  30% { filter: brightness(2) contrast(0.5); }
  100% { filter: brightness(1) contrast(1); }
}

.led-on { animation: ledPulse 2s ease-in-out infinite; }
.power-on { animation: powerOn 0.8s ease-out forwards; }

.speaker-grille {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 2px,
    transparent 2px,
    transparent 5px
  );
}

.dpad-btn {
  background: #1a1a2e;
  border: 2px solid #2a2a4e;
  transition: all 0.1s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.dpad-btn:active, .dpad-btn.pressed {
  background: #0f0f28;
  border-color: #0f9b8e;
  transform: scale(0.95);
}

.ab-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  border: 3px solid;
  transition: all 0.1s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.ab-btn:active, .ab-btn.pressed {
  transform: scale(0.92);
  filter: brightness(0.7);
}

.pill-btn {
  padding: 6px 18px;
  border-radius: 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  background: #3a3a5e;
  color: #888;
  border: none;
  transition: all 0.1s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.pill-btn:active, .pill-btn.pressed {
  background: #2a2a4e;
  transform: scale(0.95);
}

.drop-zone {
  border: 2px dashed rgba(15,155,142,0.4);
  transition: all 0.2s;
}
.drop-zone.dragover {
  border-color: #0f9b8e;
  background: rgba(15,155,142,0.1);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #3a3a5e; border-radius: 3px; }

@media (max-width: 768px) {
  .gbc-shell { transform: scale(0.85); transform-origin: top center; }
}