:root {
  --shell-bg: #7b3fa0;
  --shell-light: #9b5fc0;
  --shell-dark: #5a2080;
  --shell-edge: #4a1870;
  --btn-primary: #f0c030;
  --btn-primary-dark: #c09020;
  --btn-accent: #e06040;
  --lcd-bg: #8bac0f;
  --lcd-dark: #306230;
  --lcd-text: #1a3a1a;
  --accent: #f0c030;
  --speaker-color: #3a1860;
  --cartridge-bg: #6a2f90;
  --cartridge-border: #9b5fc0;
  --body-bg: #4a3a2a;
  --body-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="toxic-green"] {
  --shell-bg: #1a3a1a;
  --shell-light: #2a5a2a;
  --shell-dark: #0a2a0a;
  --shell-edge: #052005;
  --btn-primary: #222;
  --btn-primary-dark: #111;
  --btn-accent: #00ff80;
  --lcd-bg: #ff9900;
  --lcd-dark: #995500;
  --lcd-text: #331a00;
  --accent: #00ff80;
  --speaker-color: #0a1a0a;
  --cartridge-bg: #1a3a1a;
  --cartridge-border: #00ff80;
  --body-bg: #0a0a0a;
}

[data-theme="clear-blue"] {
  --shell-bg: #4a8abf;
  --shell-light: #6aaae0;
  --shell-dark: #2a6a9f;
  --shell-edge: #1a5a8f;
  --btn-primary: #fff;
  --btn-primary-dark: #ccc;
  --btn-accent: #00c0ff;
  --lcd-bg: #d0e8ff;
  --lcd-dark: #6090c0;
  --lcd-text: #1a3050;
  --accent: #00c0ff;
  --speaker-color: #2a5a8f;
  --cartridge-bg: #3a7aaf;
  --cartridge-border: #6aaae0;
  --body-bg: #1a2a3a;
}

[data-theme="school-bus"] {
  --shell-bg: #f0c000;
  --shell-light: #ffe040;
  --shell-dark: #c09000;
  --shell-edge: #a07000;
  --btn-primary: #e02020;
  --btn-primary-dark: #b01010;
  --btn-accent: #2060e0;
  --lcd-bg: #90e090;
  --lcd-dark: #308030;
  --lcd-text: #103010;
  --accent: #e02020;
  --speaker-color: #a07000;
  --cartridge-bg: #e0b000;
  --cartridge-border: #ffe040;
  --body-bg: #3a3020;
}

[data-theme="turbo"] {
  --shell-bg: #1a1a1a;
  --shell-light: #3a3a3a;
  --shell-dark: #0a0a0a;
  --shell-edge: #000;
  --btn-primary: #e02020;
  --btn-primary-dark: #b01010;
  --btn-accent: #ff4040;
  --lcd-bg: #300000;
  --lcd-dark: #1a0000;
  --lcd-text: #ff2020;
  --accent: #e02020;
  --speaker-color: #0a0a0a;
  --cartridge-bg: #2a1a1a;
  --cartridge-border: #e02020;
  --body-bg: #0a0505;
}

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

body {
  background: var(--body-bg);
  background-image: var(--body-pattern);
  font-family: 'Russo One', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  color: #eee;
}

.lcd-font {
  font-family: 'Press Start 2P', monospace;
}

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

@keyframes lcd-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}

@keyframes lcd-glow {
  0%, 100% { text-shadow: 0 0 4px var(--lcd-text), 0 0 8px var(--lcd-text); }
  50% { text-shadow: 0 0 6px var(--lcd-text), 0 0 12px var(--lcd-text); }
}

@keyframes pulse-drop {
  0%, 100% { box-shadow: inset 0 0 20px rgba(255,255,0,0.1); }
  50% { box-shadow: inset 0 0 30px rgba(255,255,0,0.3); }
}

@keyframes speaker-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
}

.toy-btn {
  position: relative;
  border: none;
  border-radius: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.08s ease;
  user-select: none;
  -webkit-user-select: none;
  min-height: 48px;
  min-width: 48px;
  text-transform: uppercase;
}

.toy-btn:not(:disabled) {
  box-shadow: 0 4px 0 var(--btn-primary-dark), 0 6px 8px rgba(0,0,0,0.3);
  background: var(--btn-primary);
  color: #1a1a1a;
}

.toy-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--btn-primary-dark), 0 7px 10px rgba(0,0,0,0.35);
  filter: brightness(1.1);
}

.toy-btn:not(:disabled):active,
.toy-btn.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-primary-dark), 0 2px 4px rgba(0,0,0,0.2);
  filter: brightness(0.9);
}

.toy-btn:disabled {
  background: #555;
  color: #888;
  box-shadow: 0 2px 0 #444, 0 3px 4px rgba(0,0,0,0.2);
  cursor: not-allowed;
  opacity: 0.5;
}

.toy-btn .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  position: absolute;
  top: 6px;
  right: 8px;
  transition: all 0.15s;
}

.toy-btn .led.active {
  background: #0f0;
  box-shadow: 0 0 6px #0f0, 0 0 12px #0f0;
}

.screw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #999, #555);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5);
  position: absolute;
}

.screw::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #444;
  font-weight: bold;
  line-height: 1;
}

.cartridge-card {
  background: var(--cartridge-bg);
  border: 2px solid var(--cartridge-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  transition: all 0.15s;
}

.cartridge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.drop-zone-active {
  animation: pulse-drop 0.6s ease-in-out infinite;
}

.waveform-container {
  background: #111;
  border-radius: 8px;
  border: 3px solid var(--shell-dark);
  overflow: hidden;
  position: relative;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--shell-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--shell-light);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .toy-btn {
    font-size: 8px;
  }
}