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

:root {
  --crt-green: #33ff33;
  --crt-dim-green: #1a8c1a;
  --crt-bg: #0a120a;
  --bezel-dark: #1a1a1a;
  --bezel-light: #2a2a2a;
  --bg: #0d0d0d;
}

body {
  background: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  color: #aaa;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes scanline-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.97; }
  92% { opacity: 0.98; }
  95% { opacity: 0.96; }
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes power-on {
  0% { transform: scaleY(0.005) scaleX(0.3); filter: brightness(2); }
  30% { transform: scaleY(0.005) scaleX(1); filter: brightness(1.5); }
  50% { transform: scaleY(0.3) scaleX(1); filter: brightness(1.2); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}

@keyframes power-off {
  0% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
  30% { transform: scaleY(0.3) scaleX(1); filter: brightness(1.5); }
  60% { transform: scaleY(0.005) scaleX(1); filter: brightness(2); }
  100% { transform: scaleY(0) scaleX(0); filter: brightness(3); }
}

.crt-power-on {
  animation: power-on 0.8s ease-out forwards;
}

.crt-power-off {
  animation: power-off 0.4s ease-in forwards;
}

.scanlines {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0.15) 2px
  );
  animation: scanline-scroll 0.3s linear infinite;
  z-index: 2;
}

.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.5) 100%);
  z-index: 3;
}

.crt-screen {
  animation: flicker 0.15s infinite;
  border-radius: 12px;
}

.bezel {
  background: linear-gradient(145deg, #2e2e2e, #1a1a1a);
  border-radius: 20px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.8),
    0 2px 8px rgba(0,0,0,0.5);
}

.pet-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: #888;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
}

.power-switch {
  width: 48px;
  height: 24px;
  border-radius: 12px;
  background: #333;
  border: 2px solid #555;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.power-switch.on {
  background: #1a4a1a;
  border-color: #2a7a2a;
}

.power-switch-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #666, #444);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.power-switch.on .power-switch-knob {
  left: 25px;
  background: linear-gradient(145deg, var(--crt-green), #1a8c1a);
  box-shadow: 0 0 8px rgba(51,255,51,0.3);
}

.rom-dropzone {
  border: 2px dashed #444;
  border-radius: 8px;
  transition: all 0.3s;
}

.rom-dropzone.drag-over {
  border-color: var(--crt-green);
  background: rgba(51,255,51,0.05);
}

.control-btn {
  background: linear-gradient(145deg, #3a3a3a, #252525);
  border: 1px solid #555;
  border-radius: 4px;
  color: #aaa;
  padding: 6px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.15s;
}

.control-btn:hover {
  background: linear-gradient(145deg, #444, #2a2a2a);
  color: #ccc;
}

.control-btn:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  transform: translateY(1px);
}

.rom-panel {
  background: rgba(10,18,10,0.95);
  border: 1px solid #2a4a2a;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

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

.key-button {
  background: linear-gradient(145deg, #e8e0d0, #c8c0b0);
  border: 1px solid #aaa;
  border-radius: 3px;
  color: #222;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 4px 6px;
  min-width: 32px;
  cursor: pointer;
  box-shadow: 0 2px 0 #999, 0 3px 4px rgba(0,0,0,0.3);
  transition: all 0.08s;
  user-select: none;
}

.key-button:active, .key-button.pressed {
  box-shadow: 0 0 0 #999, 0 1px 2px rgba(0,0,0,0.3);
  transform: translateY(2px);
  background: linear-gradient(145deg, #d8d0c0, #b8b0a0);
}

.footer-link {
  color: var(--crt-dim-green);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--crt-green); }