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

:root {
  --wood-dark: #3D2510;
  --wood-mid: #5C3A21;
  --wood-light: #8B6914;
  --chrome: #C0C0C0;
  --chrome-dark: #808080;
  --charcoal: #1A1A1A;
  --terminal-green: #00FF41;
  --terminal-dim: #007718;
  --terminal-bg: #0A0A0A;
  --led-red: #FF2020;
  --led-green: #20FF40;
  --o2-blue: #2040A0;
  --key-bg: #B0B0B0;
  --key-border: #888;
}

body {
  background: #0D0D0D;
  color: #E0E0E0;
  font-family: 'Fira Code', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

#app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

/* Console Bezel */
#console-bezel {
  background: linear-gradient(145deg, var(--wood-mid), var(--wood-dark) 30%, var(--wood-mid) 50%, var(--wood-dark) 70%, var(--wood-light) 100%);
  border-radius: 16px;
  padding: 16px;
  border: 3px solid var(--wood-light);
  box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

#console-bezel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.05) 3px,
    rgba(0,0,0,0.05) 6px
  );
  pointer-events: none;
}

#bezel-top {
  display: flex;
  align-items: center;
  padding: 8px 12px 12px;
  gap: 16px;
}

#power-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--led-red);
  box-shadow: 0 0 6px var(--led-red);
  transition: all 0.3s;
  flex-shrink: 0;
}

#power-led.on {
  background: var(--led-green);
  box-shadow: 0 0 12px var(--led-green), 0 0 24px rgba(32,255,64,0.3);
  animation: led-pulse 2s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--led-green); }
  50% { box-shadow: 0 0 18px var(--led-green), 0 0 30px rgba(32,255,64,0.4); }
}

#console-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.4em;
  background: linear-gradient(180deg, #E8E8E8 0%, #A0A0A0 40%, #D0D0D0 60%, #909090 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  letter-spacing: 3px;
  flex-grow: 1;
  text-align: center;
  user-select: none;
}

#top-controls {
  display: flex; gap: 8px;
}

#top-controls button {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--wood-light);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

#top-controls button:hover { background: rgba(0,0,0,0.5); }

/* Screen */
#screen-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 2px rgba(255,255,255,0.1);
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
  border-radius: 12px;
}

#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  border-radius: 12px;
}

/* Cartridge Slot */
#bezel-bottom {
  padding: 12px;
  display: flex;
  justify-content: center;
}

#cartridge-slot {
  width: 220px;
  height: 60px;
  background: linear-gradient(180deg, #1A1A1A, #0A0A0A);
  border: 2px solid #444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

#cartridge-slot:hover, #cartridge-slot.drag-over {
  border-color: var(--terminal-green);
  box-shadow: 0 0 16px rgba(0,255,65,0.3), inset 0 0 12px rgba(0,255,65,0.1);
}

#cartridge-slot.drag-over {
  animation: slot-pulse 0.8s ease-in-out infinite;
}

@keyframes slot-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(0,255,65,0.3); }
  50% { box-shadow: 0 0 28px rgba(0,255,65,0.5), inset 0 0 20px rgba(0,255,65,0.2); }
}

#cart-label {
  font-size: 10px;
  color: var(--chrome);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#cart-visual {
  display: none;
  position: absolute;
  bottom: -40px;
  width: 80px;
  height: 50px;
  background: linear-gradient(180deg, #444, #333);
  border: 2px solid #555;
  border-radius: 4px 4px 0 0;
  transition: bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cart-visual.inserted {
  display: block;
  bottom: 0;
}

#cart-visual::after {
  content: attr(data-name);
  position: absolute;
  width: 60px;
  top: 5px;
  left: 8px;
  background: #DDD;
  color: #222;
  font-size: 5px;
  padding: 2px;
  text-align: center;
  border-radius: 1px;
  word-break: break-all;
  line-height: 1.2;
  max-height: 30px;
  overflow: hidden;
}

/* Control Bar */
#control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  align-items: center;
  justify-content: center;
}

.ctrl-btn {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  padding: 8px 16px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #CCC;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ctrl-btn:hover { background: #333; border-color: #666; }
.ctrl-btn.power-on { border-color: var(--led-green); color: var(--led-green); box-shadow: 0 0 8px rgba(32,255,64,0.2); }
.ctrl-btn.power-off { border-color: var(--led-red); color: var(--led-red); }

.speed-controls {
  display: flex;
  gap: 4px;
  background: #111;
  border-radius: 6px;
  padding: 3px;
}

.speed-btn {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
}

.speed-btn.active { background: #333; color: var(--terminal-green); }
.speed-btn:hover { color: #CCC; }

.demo-select select {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  padding: 7px 12px;
  background: #222;
  color: #CCC;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
}

/* Keyboard Panel */
#keyboard-panel {
  background: linear-gradient(180deg, #999, #B0B0B0, #888);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0;
}

#keyboard-label {
  text-align: center;
  font-size: 9px;
  color: #444;
  letter-spacing: 3px;
  margin-bottom: 8px;
}

#keyboard-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 3px;
  max-width: 600px;
  margin: 0 auto;
}

.o2-key {
  font-family: 'Fira Code', monospace;
  font-size: 10px;
  padding: 6px 2px;
  background: #C8C8C8;
  border: 1px solid #999;
  border-radius: 2px;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
  user-select: none;
}

.o2-key:hover { background: #DDD; }
.o2-key:active, .o2-key.pressed { background: #888; color: #FFF; transform: translateY(1px); }
.o2-key.wide { grid-column: span 2; }

/* Joystick Panel */
#joystick-panel {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 12px 0;
}

.joystick-area {
  text-align: center;
}

.joy-label {
  font-size: 10px;
  color: #666;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.dpad {
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 2px;
}

.dpad-btn {
  background: #333;
  border: 1px solid #555;
  border-radius: 4px;
  color: #AAA;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}

.dpad-btn.center { background: #222; cursor: default; }
.dpad-btn:active:not(.center) { background: var(--terminal-green); color: #000; }

.action-btn {
  margin-top: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #C02020;
  border: 3px solid #901010;
  color: #FFF;
  font-family: 'Fira Code', monospace;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.1s;
}

.action-btn:active { transform: scale(0.95); background: #FF3030; }

/* Inspector */
#inspector-toggle {
  text-align: center;
  padding: 8px;
}

#btn-inspector {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  padding: 8px 20px;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-dim);
  border-radius: 6px;
  color: var(--terminal-green);
  cursor: pointer;
  transition: all 0.2s;
}

#btn-inspector:hover { background: #151515; border-color: var(--terminal-green); }

#inspector-panel {
  display: none;
  background: var(--terminal-bg);
  border: 1px solid #1A3A1A;
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
  max-height: 600px;
  overflow-y: auto;
}

#inspector-panel.open { display: block; }

.inspector-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1A2A1A;
}

.inspector-section h3 {
  font-size: 11px;
  color: var(--terminal-green);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #0A1A0A;
}

#cpu-registers, #gpu-state, #rom-info {
  font-size: 11px;
  line-height: 1.8;
  color: #00CC33;
}

.reg-label { color: var(--terminal-dim); }
.reg-value { color: var(--terminal-green); font-weight: 600; }
.reg-changed { color: #FFFF00; }

#cpu-disasm {
  font-size: 10px;
  color: #00AA22;
  margin-top: 8px;
  padding: 6px;
  background: #050505;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
}

#cpu-disasm .current-instr {
  color: #FFF;
  background: #002200;
}

#sprite-preview {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.sprite-box {
  text-align: center;
}

.sprite-box canvas {
  border: 1px solid #1A3A1A;
  image-rendering: pixelated;
}

.sprite-box div {
  font-size: 9px;
  color: var(--terminal-dim);
  margin-top: 2px;
}

#memmap-canvas {
  border: 1px solid #1A3A1A;
  image-rendering: pixelated;
  width: 100%;
  max-width: 512px;
  height: auto;
}

#instr-log {
  font-size: 9px;
  color: #009920;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px;
  background: #050505;
  border-radius: 4px;
  line-height: 1.6;
}

/* Footer */
#app-footer {
  text-align: center;
  padding: 20px;
  font-size: 11px;
  color: #555;
}

#app-footer em { color: #444; }

#app-footer a {
  color: var(--terminal-green);
  text-decoration: none;
  border-bottom: 1px solid var(--terminal-dim);
}

#app-footer a:hover { color: #FFF; }

/* CRT Power Animation */
@keyframes crt-on {
  0% { transform: scaleY(0.005) scaleX(0.3); filter: brightness(5); }
  40% { transform: scaleY(0.005) scaleX(1); filter: brightness(3); }
  60% { transform: scaleY(1) scaleX(1); filter: brightness(1.5); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}

@keyframes crt-off {
  0% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
  40% { transform: scaleY(0.005) scaleX(1); filter: brightness(3); }
  80% { transform: scaleY(0.005) scaleX(0.1); filter: brightness(5); }
  100% { transform: scaleY(0) scaleX(0); filter: brightness(0); }
}

#canvas.crt-on { animation: crt-on 0.6s ease-out; }
#canvas.crt-off { animation: crt-off 0.5s ease-in forwards; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: var(--terminal-dim); border-radius: 3px; }

/* Responsive */
@media (min-width: 1100px) {
  #app-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-rows: auto auto auto auto;
    gap: 12px;
  }
  #console-bezel { grid-column: 1; grid-row: 1; }
  #control-bar { grid-column: 1; grid-row: 2; }
  #keyboard-panel { grid-column: 1; grid-row: 3; }
  #joystick-panel { grid-column: 1; grid-row: 4; }
  #inspector-toggle { grid-column: 2; grid-row: 1; align-self: start; }
  #inspector-panel {
    grid-column: 2;
    grid-row: 1 / 5;
    display: block;
    max-height: calc(100vh - 40px);
    position: sticky;
    top: 10px;
    margin-top: 40px;
  }
  #inspector-toggle { display: none; }
}

@media (max-width: 500px) {
  #console-logo { font-size: 1em; letter-spacing: 1px; }
  #keyboard-grid { grid-template-columns: repeat(10, 1fr); }
  .dpad { grid-template-columns: 34px 34px 34px; grid-template-rows: 34px 34px 34px; }
  #joystick-panel { gap: 20px; }
}