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

:root {
  --green: #33ff33;
  --green-dim: #22aa22;
  --green-glow: rgba(51, 255, 51, 0.3);
  --green-dark: #115511;
  --bg: #0a0a0a;
  --bg-panel: #111111;
  --border: #33ff33;
  --btn-bg: #222;
  --btn-border: #555;
  --kb-housing: #c8b88a;
  --kb-housing-light: #d4c89e;
  --kb-housing-dark: #a89868;
  --kb-key-bg: #b8c4d4;
  --kb-key-text: #1a1a2a;
  --kb-key-red: #cc2222;
  --kb-key-red-hover: #b01e1e;
  --kb-key-red-active: #991919;
  --key-size: 42px;
  --key-gap: 4px;
}

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

#app { width: 100%; max-width: 1060px; padding: 16px; }

header { text-align: center; margin-bottom: 12px; }

h1 {
  font-size: 2.2rem;
  letter-spacing: 4px;
  text-shadow: 0 0 20px var(--green-glow), 0 0 40px var(--green-glow);
  color: var(--green);
}

.subtitle { font-size: 0.8rem; color: var(--green-dim); margin-top: 2px; }

#status-bar {
  display: flex; justify-content: center; gap: 12px; margin-top: 8px;
  font-size: 0.72rem; color: var(--green-dim); flex-wrap: wrap;
}
#status-bar span { padding: 2px 8px; border: 1px solid #333; }

#control-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 8px; border: 1px solid #333; background: var(--bg-panel);
}

.ctrl-btn {
  font-family: inherit; font-size: 0.8rem; color: var(--green);
  background: var(--btn-bg); border: 2px outset var(--btn-border);
  padding: 6px 14px; cursor: pointer; transition: all 0.1s;
}
.ctrl-btn:hover { background: #2a2a2a; color: #55ff55; box-shadow: 0 0 8px var(--green-glow); }
.ctrl-btn:active { border-style: inset; }
.ctrl-btn.sm { padding: 3px 8px; font-size: 0.7rem; }

.power-btn { background: #1a0000; border-color: #883333; color: #ff5555; }
.power-btn.on { background: #001a00; border-color: #33aa33; color: var(--green); box-shadow: 0 0 12px var(--green-glow); }

.matrix-btn { margin-left: auto; font-size: 0.7rem; padding: 4px 10px; }
.matrix-btn.active { background: #002200; border-color: var(--green); box-shadow: 0 0 10px var(--green-glow); }

.ram-selector { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.ram-selector select { font-family: inherit; font-size: 0.8rem; color: var(--green); background: #1a1a1a; border: 1px solid #444; padding: 4px; }

#crt-container {
  position: relative; margin: 0 auto 0; border-radius: 16px 16px 4px 4px;
  overflow: hidden; border: 3px solid #333;
  box-shadow: 0 0 30px var(--green-glow), 0 0 60px rgba(51,255,51,0.1), inset 0 0 60px rgba(0,0,0,0.5);
  background: #000; display: flex; justify-content: center;
}

#screen { display: block; width: 100%; max-width: 640px; height: auto; image-rendering: pixelated; }

#scanlines {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 3px);
  pointer-events: none;
}

#keyboard-housing {
  background: linear-gradient(180deg, var(--kb-housing-light) 0%, var(--kb-housing) 30%, var(--kb-housing-dark) 100%);
  border-radius: 0 0 12px 12px; padding: 14px 16px 18px; margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.15);
  border: 1px solid #a09070; border-top: none; position: relative;
}

#keyboard-container { display: flex; gap: 24px; justify-content: center; align-items: start; }

.kb-key {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 0.62rem; font-weight: 700;
  width: var(--key-size); height: var(--key-size);
  min-width: var(--key-size); max-width: var(--key-size);
  min-height: var(--key-size); max-height: var(--key-size);
  padding: 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; user-select: none; line-height: 1.1; white-space: pre-line;
  position: relative; border: none; outline: none; overflow: hidden;
  background: linear-gradient(180deg, #ccd4e0 0%, var(--kb-key-bg) 40%, #a8b0c0 100%);
  color: var(--kb-key-text); border-radius: 5px;
  box-shadow: 0 2px 0 #8890a0, 0 3px 4px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08);
  transition: all 0.06s ease;
}

.kb-key .key-main { font-size: 0.72rem; font-weight: 800; color: var(--kb-key-text); line-height: 1.05; overflow: hidden; }
.kb-key.two-line-key .key-main { font-size: 0.52rem; line-height: 1.05; }

.kb-key:hover { background: linear-gradient(180deg, #c0c8d6 0%, #aab2c4 40%, #9aa2b4 100%); }
.kb-key:active, .kb-key.active {
  background: linear-gradient(180deg, #a0a8b8 0%, #9098aa 40%, #8890a0 100%);
  box-shadow: 0 0 0 #8890a0, 0 1px 2px rgba(0,0,0,0.2), inset 0 2px 3px rgba(0,0,0,0.1);
  transform: translateY(2px);
}

.kb-key.red-key {
  background: linear-gradient(180deg, #e02828 0%, var(--kb-key-red) 40%, #aa1a1a 100%);
  color: #fff;
  box-shadow: 0 2px 0 #881414, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.15);
}
.kb-key.red-key .key-main { color: #fff; }
.kb-key.red-key:hover { background: linear-gradient(180deg, #d42222 0%, var(--kb-key-red-hover) 40%, #991616 100%); }
.kb-key.red-key:active, .kb-key.red-key.active {
  background: linear-gradient(180deg, #b01e1e 0%, var(--kb-key-red-active) 40%, #801212 100%);
  box-shadow: 0 0 0 #881414, 0 1px 2px rgba(0,0,0,0.3), inset 0 2px 3px rgba(0,0,0,0.15);
  transform: translateY(2px);
}
.kb-key.red-key.two-line-key .key-main { font-size: 0.52rem; line-height: 1.05; color: #fff; }

.kb-key.space-key { width: auto; max-width: none; min-width: unset; height: var(--key-size); min-height: var(--key-size); max-height: var(--key-size); }

.kb-key.return-key {
  width: var(--key-size); min-width: var(--key-size); max-width: var(--key-size);
  height: calc(var(--key-size) * 2 + var(--key-gap));
  min-height: calc(var(--key-size) * 2 + var(--key-gap));
  max-height: calc(var(--key-size) * 2 + var(--key-gap));
  padding: 4px 2px; display: flex; align-items: center; justify-content: center;
}
.kb-key.return-key .return-label { font-size: 0.68rem; font-weight: 900; line-height: 1.0; color: #fff; text-align: center; }

.kb-key .matrix-tooltip {
  display: none; position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%);
  background: #000; border: 1px solid var(--green); color: var(--green);
  font-size: 0.5rem; padding: 2px 5px; white-space: nowrap; z-index: 100;
  pointer-events: none; border-radius: 3px; font-weight: normal;
}
.kb-key:hover .matrix-tooltip { display: block; }

#kbd-matrix-panel { margin-bottom: 8px; }
.matrix-panel-header { background: #0a1a0a; color: var(--green); text-shadow: 0 0 6px var(--green-glow); cursor: default !important; }

#matrix-info-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: 0.72rem; color: var(--green-dim); }
#matrix-info-bar b { color: var(--green); font-size: 0.8rem; }

#matrix-grid-container { overflow-x: auto; margin-bottom: 8px; }
#matrix-grid { border-collapse: collapse; font-size: 0.6rem; width: 100%; }
#matrix-grid th, #matrix-grid td { border: 1px solid #333; padding: 3px 4px; text-align: center; min-width: 60px; font-family: inherit; }
#matrix-grid th { background: #1a1a1a; color: var(--green-dim); font-weight: normal; }
#matrix-grid td { background: #0a0a0a; color: #555; height: 28px; transition: background 0.05s, color 0.05s; }
#matrix-grid td.key-label { font-size: 0.55rem; color: #666; }
#matrix-grid td.cell-pressed { background: #004400; color: var(--green); text-shadow: 0 0 4px var(--green-glow); }
#matrix-grid td.cell-scanned { border-color: var(--green-dim); }
#matrix-grid tr.row-active td { border-top: 1px solid var(--green); border-bottom: 1px solid var(--green); }
#matrix-grid tr.row-active td:first-child { background: #003300; color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

#matrix-port-readback { font-size: 0.75rem; color: var(--green-dim); margin-top: 4px; }
#matrix-bits { font-family: inherit; letter-spacing: 3px; }
.bit-high { color: #555; }
.bit-low { color: var(--green); text-shadow: 0 0 4px var(--green-glow); font-weight: bold; }

.panel { border: 1px solid #333; margin-bottom: 8px; background: var(--bg-panel); }
.panel-header { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; color: var(--green); border-bottom: 1px solid #222; user-select: none; }
.panel-header:hover { background: #1a1a1a; }
.panel-body { display: none; padding: 10px 12px; }
.panel-body.open { display: block; }
.panel-info { font-size: 0.75rem; color: var(--green-dim); margin-bottom: 8px; }

.drop-zone {
  border: 2px dashed #444; padding: 20px; text-align: center; cursor: pointer;
  font-size: 0.8rem; color: var(--green-dim); margin-bottom: 10px; position: relative; transition: border-color 0.2s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--green); color: var(--green); }
.drop-zone input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.rom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; font-size: 0.72rem; }
.rom-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #222; }
.rom-item.loaded { border-color: var(--green-dark); }
.rom-check { font-size: 1rem; }
.rom-check.ok { color: var(--green); }
.rom-check.missing { color: #ff4444; }

.tab-content { display: none; font-size: 0.8rem; }
.tab-content.active { display: block; }
.tab-content p { margin-bottom: 8px; color: var(--green-dim); }

.file-info { font-size: 0.75rem; color: var(--green-dim); padding: 4px; margin: 6px 0; }

.debug-section { margin-bottom: 8px; font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.debug-section b { color: #55ff55; margin-left: 2px; }
.debug-section .flags { color: #888; font-size: 0.65rem; }

.mono-box {
  background: #000; border: 1px solid #222; padding: 6px; font-size: 0.7rem;
  min-height: 40px; white-space: pre; overflow-x: auto; display: block; line-height: 1.4;
}

.hex-input {
  font-family: inherit; font-size: 0.75rem; color: var(--green);
  background: #1a1a1a; border: 1px solid #444; padding: 2px 6px; width: 50px; text-transform: uppercase;
}

footer { text-align: center; margin-top: 20px; padding: 12px; font-size: 0.75rem; }
footer a { color: var(--green-dim); text-decoration: none; }
footer a:hover { color: var(--green); text-decoration: underline; }

@keyframes crt-on {
  0% { opacity: 0; transform: scaleY(0.01); }
  40% { opacity: 0.8; transform: scaleY(0.5); }
  100% { opacity: 1; transform: scaleY(1); }
}
#crt-container.power-on #screen { animation: crt-on 0.6s ease-out; }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 30px var(--green-glow), 0 0 60px rgba(51,255,51,0.1), inset 0 0 60px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 40px var(--green-glow), 0 0 80px rgba(51,255,51,0.15), inset 0 0 60px rgba(0,0,0,0.5); }
}
#crt-container.power-on { animation: glow-pulse 3s ease-in-out infinite; }

@media (max-width: 800px) {
  :root { --key-size: 28px; --key-gap: 2px; }
  #app { padding: 8px; }
  h1 { font-size: 1.4rem; letter-spacing: 2px; }
  #keyboard-housing { padding: 8px 6px 12px; }
  #keyboard-container { gap: 10px; }
  .kb-key .key-main { font-size: 0.48rem; }
  .kb-key.two-line-key .key-main { font-size: 0.36rem; }
  .kb-key.red-key.two-line-key .key-main { font-size: 0.36rem; }
  .kb-key.return-key .return-label { font-size: 0.42rem; }
  #control-panel { gap: 4px; }
  .ctrl-btn { padding: 4px 8px; font-size: 0.7rem; }
  .rom-grid { grid-template-columns: 1fr; }
}