* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a0a; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow-x: hidden; }

/* CRT Scanline overlay */
.crt-overlay {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 2;
}

.crt-barrel {
  border-radius: 12px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6), 0 0 20px rgba(0,255,65,0.05);
}

.crt-vignette {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.7) 100%);
  z-index: 3;
}

/* Woodgrain bezel */
.wood-bezel {
  background:
    linear-gradient(135deg, #5c3a1e 0%, #8b5e3c 15%, #6b432a 30%, #9b6f4f 45%, #7a4e30 60%, #a0764e 75%, #6b432a 90%, #5c3a1e 100%);
  background-size: 200% 200%;
  border: 3px solid #3a2010;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 4px 20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 20px;
}

/* Power LED */
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.led-on { animation: led-pulse 2s ease-in-out infinite; }

/* Register flash */
@keyframes reg-flash {
  0% { background-color: rgba(212, 160, 23, 0.4); }
  100% { background-color: transparent; }
}
.reg-written { animation: reg-flash 0.5s ease-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Tab underline */
.tab-active { border-bottom: 2px solid #D4A017; color: #D4A017; }
.tab-inactive { border-bottom: 2px solid transparent; color: #888; }
.tab-inactive:hover { color: #bbb; }

/* Toggle switch */
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: #333; position: relative; cursor: pointer; transition: background 0.2s;
}
.toggle-track.on { background: #D4A017; }
.toggle-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #eee; position: absolute; top: 2px; left: 2px;
  transition: transform 0.2s;
}
.toggle-track.on .toggle-thumb { transform: translateX(16px); }

/* Drop zone */
.drop-zone {
  border: 2px dashed #555;
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  transition: all 0.2s;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: #D4A017;
  background: linear-gradient(180deg, #1f1a10 0%, #15100a 100%);
}

/* Retro button */
.retro-btn {
  background: linear-gradient(180deg, #333 0%, #222 100%);
  border: 1px solid #444;
  color: #ddd;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 4px;
}
.retro-btn:hover { background: linear-gradient(180deg, #444 0%, #333 100%); border-color: #D4A017; }
.retro-btn:active { transform: scale(0.96); }
.retro-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Category colors */
.cat-sync { border-left: 3px solid #4488ff; }
.cat-size { border-left: 3px solid #44cc44; }
.cat-color { border-left: 3px solid #cccc44; }
.cat-pf { border-left: 3px solid #dd8844; }
.cat-pos { border-left: 3px solid #dd4444; }
.cat-audio { border-left: 3px solid #aa44dd; }
.cat-gfx { border-left: 3px solid #4488ff; }
.cat-motion { border-left: 3px solid #888; }
.cat-enable { border-left: 3px solid #886644; }

/* Collision matrix */
.collision-on { background: #ff4444; box-shadow: 0 0 6px #ff4444; }
.collision-off { background: #222; }

/* Memory viewer highlight colors */
.mem-tia { background: rgba(68,136,255,0.1); }
.mem-ram { background: rgba(68,204,68,0.1); }
.mem-riot { background: rgba(221,136,68,0.1); }
.mem-rom { background: rgba(170,68,221,0.1); }

/* Mobile */
@media (max-width: 768px) {
  .wood-bezel { padding: 10px; }
}

/* Canvas crisp rendering */
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }