:root {
  --brown-dark: #3E1E00;
  --brown: #6B3A1F;
  --brown-mid: #8B4513;
  --brown-light: #A0522D;
  --orange: #D2691E;
  --orange-bright: #FF8C00;
  --cream: #FFF8DC;
  --cream-dark: #F5DEB3;
  --charcoal: #2A2A2A;
  --bezel: #1A1A1A;
  --led-on: #00FF44;
  --led-off: #334433;
}

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

body {
  background: linear-gradient(180deg, #1a0e05 0%, #2d1810 30%, #1a0e05 100%);
  min-height: 100vh;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--cream);
  overflow-x: hidden;
}

.font-retro { font-family: 'Press Start 2P', cursive; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

/* Woodgrain texture */
.woodgrain {
  background: linear-gradient(90deg,
    #5C3317 0%, #6B3A1F 8%, #5C3317 15%, #7A4422 20%,
    #6B3A1F 30%, #5C3317 40%, #7A4422 50%, #6B3A1F 60%,
    #5C3317 70%, #7A4422 78%, #6B3A1F 85%, #5C3317 92%, #6B3A1F 100%
  );
  position: relative;
}
.woodgrain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
}

/* CRT bezel */
.crt-bezel {
  background: linear-gradient(145deg, #3a3a3a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 0 0 3px #555,
    0 0 0 6px #222,
    inset 0 0 30px rgba(0,0,0,0.8),
    0 10px 40px rgba(0,0,0,0.6);
}

/* CRT screen effects */
.crt-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
}
.crt-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 2;
}
.crt-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Cartridge slot */
.cart-slot {
  background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%);
  border: 3px solid #333;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 5px 15px rgba(0,0,0,0.8);
  transition: all 0.3s ease;
}
.cart-slot.drag-over {
  border-color: var(--orange-bright);
  box-shadow: inset 0 5px 15px rgba(0,0,0,0.8), 0 0 20px rgba(255,140,0,0.4);
}
.cart-slot-top {
  background: linear-gradient(180deg, #333 0%, #222 100%);
  border: 3px solid #333;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  height: 12px;
}

/* Console buttons */
.console-btn {
  background: linear-gradient(180deg, var(--brown-light) 0%, var(--brown) 100%);
  border: 2px solid var(--brown-dark);
  border-radius: 4px;
  padding: 8px 16px;
  color: var(--cream);
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--brown-dark), 0 4px 8px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.console-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--brown-dark), 0 2px 4px rgba(0,0,0,0.3);
}
.console-btn:hover {
  background: linear-gradient(180deg, var(--orange) 0%, var(--brown-light) 100%);
}

.console-btn-orange {
  background: linear-gradient(180deg, var(--orange-bright) 0%, var(--orange) 100%);
  border-color: var(--brown-mid);
  box-shadow: 0 3px 0 var(--brown-mid), 0 4px 8px rgba(0,0,0,0.3);
}
.console-btn-orange:hover {
  background: linear-gradient(180deg, #FFa500 0%, var(--orange-bright) 100%);
}

/* LED indicators */
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.15s;
}
.led-on {
  background: var(--led-on);
  box-shadow: 0 0 6px var(--led-on), 0 0 12px rgba(0,255,68,0.3);
}
.led-off {
  background: var(--led-off);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

/* Debug panel */
.debug-panel {
  background: rgba(10,10,10,0.95);
  border: 1px solid #333;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

/* Scratchpad grid */
.scratch-cell {
  font-size: 9px;
  padding: 2px 3px;
  text-align: center;
  border: 1px solid #222;
  background: #111;
  color: #888;
  font-family: 'IBM Plex Mono', monospace;
}
.scratch-cell.active {
  background: #332200;
  color: var(--orange-bright);
  border-color: var(--orange);
}

/* Power-on animation */
@keyframes powerOn {
  0% { filter: brightness(0) contrast(0.5); transform: scaleY(0.01); }
  30% { filter: brightness(2) contrast(1.5); transform: scaleY(1.05); }
  50% { filter: brightness(1.2) contrast(1.1); transform: scaleY(1); }
  100% { filter: brightness(1) contrast(1); transform: scaleY(1); }
}
.power-on {
  animation: powerOn 0.8s ease-out forwards;
}

/* Static noise */
@keyframes staticNoise {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.06; }
}
.static-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* Key indicator */
.key-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 2px 6px;
  background: linear-gradient(180deg, #444 0%, #333 100%);
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  box-shadow: 0 2px 0 #222;
  color: #ccc;
}
.key-cap.pressed {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #222;
  background: linear-gradient(180deg, var(--orange) 0%, var(--brown-light) 100%);
  color: white;
}

/* Palette swatch */
.palette-swatch {
  width: 24px;
  height: 24px;
  border: 2px solid #555;
  border-radius: 3px;
  display: inline-block;
}

@media (max-width: 768px) {
  .crt-bezel { padding: 10px; border-radius: 12px; }
  .console-btn { padding: 6px 10px; font-size: 7px; }
  .key-cap { min-width: 24px; height: 24px; font-size: 8px; }
}