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

body {
  background: #050508;
  color: #aaa;
  font-family: 'VT323', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 9999;
}

@keyframes flicker {
  0% { opacity: 0.97; }
  5% { opacity: 0.95; }
  10% { opacity: 0.98; }
  15% { opacity: 0.96; }
  20% { opacity: 0.99; }
  50% { opacity: 0.96; }
  80% { opacity: 0.98; }
  100% { opacity: 0.97; }
}

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

@keyframes boot-glow {
  0% { text-shadow: 0 0 4px currentColor; }
  50% { text-shadow: 0 0 12px currentColor, 0 0 20px currentColor; }
  100% { text-shadow: 0 0 4px currentColor; }
}

.crt-container {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow:
    0 0 40px rgba(0,0,0,0.8),
    inset 0 0 60px rgba(0,0,0,0.4),
    0 0 4px rgba(51,255,51,0.1);
}

.crt-container.amber {
  box-shadow:
    0 0 40px rgba(0,0,0,0.8),
    inset 0 0 60px rgba(0,0,0,0.4),
    0 0 4px rgba(255,170,0,0.1);
}

.crt-bezel {
  background: linear-gradient(145deg, #2a2520, #1a1815, #2a2520);
  border-radius: 24px;
  padding: 20px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}

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

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

.flicker-effect {
  animation: flicker 0.15s infinite;
}

.keyboard-plate {
  background: linear-gradient(180deg, #3a3530, #2a2520, #1a1510);
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.key-btn {
  background: linear-gradient(180deg, #f5f0e1, #e8e0cc, #d8d0b8);
  color: #222;
  border: 1px solid #999;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 4px;
  min-width: 38px;
  min-height: 42px;
  box-shadow:
    0 3px 0 #888,
    0 4px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition: all 0.08s ease;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

.key-btn:hover {
  background: linear-gradient(180deg, #faf5e6, #f0e8d4, #e0d8c0);
  transform: translateY(1px);
  box-shadow:
    0 2px 0 #888,
    0 3px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.key-btn:active, .key-btn.pressed {
  background: linear-gradient(180deg, #d0c8b0, #c8c0a8, #c0b8a0);
  transform: translateY(3px);
  box-shadow:
    0 0px 0 #888,
    0 1px 2px rgba(0,0,0,0.3),
    inset 0 2px 4px rgba(0,0,0,0.15);
}

.key-btn.modifier {
  background: linear-gradient(180deg, #d8d0c0, #c8c0a8, #b8b098);
  font-size: 12px;
}

.key-btn.modifier.active {
  background: linear-gradient(180deg, #a0c8a0, #80b080, #609860);
  border-color: #4a8a4a;
  color: #1a3a1a;
}

.key-btn.cr-key {
  background: linear-gradient(180deg, #e8c090, #d8a870, #c89858);
  border-color: #a07040;
}

.key-btn.cr-key:hover {
  background: linear-gradient(180deg, #f0c898, #e0b078, #d0a060);
}

.led-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s;
}

.led-indicator.on {
  background: #33ff33;
  box-shadow: 0 0 6px #33ff33, 0 0 12px rgba(51,255,51,0.4);
}

.led-indicator.off {
  background: #1a3a1a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

.rom-upload-slot {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s;
}

.rom-upload-slot:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
}

.rom-upload-slot.loaded {
  border-color: rgba(51,255,51,0.3);
  border-style: solid;
  background: rgba(51,255,51,0.03);
}

input[type="file"] {
  display: none;
}

.file-label {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #aaa;
  transition: all 0.2s;
}

.file-label:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #ddd;
}

.ctrl-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;
}

.ctrl-btn.primary {
  background: rgba(51,255,51,0.15);
  border-color: rgba(51,255,51,0.3);
  color: #33ff33;
}

.ctrl-btn.primary:hover:not(:disabled) {
  background: rgba(51,255,51,0.25);
}

.ctrl-btn.primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ctrl-btn.secondary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #aaa;
}

.ctrl-btn.secondary:hover {
  background: rgba(255,255,255,0.1);
  color: #ddd;
}

.ctrl-btn.danger {
  background: rgba(255,80,80,0.12);
  border-color: rgba(255,80,80,0.3);
  color: #ff6060;
}

.ctrl-btn.danger:hover {
  background: rgba(255,80,80,0.2);
}

.debug-panel {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-family: 'VT323', monospace;
}

.register-box {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 4px 8px;
  text-align: center;
}

@media (max-width: 640px) {
  .key-btn {
    min-width: 26px;
    min-height: 36px;
    font-size: 12px;
    padding: 4px 2px;
  }
  .keyboard-plate {
    padding: 8px;
  }
  .crt-bezel {
    padding: 10px;
    border-radius: 16px;
  }
}