*, *::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-bg-light: #c8d0de;
  --kb-key-bg-dark: #a0aab8;
  --kb-key-text: #1a1a2a;
  --kb-key-graphic: #3355aa;
  --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.85rem; color: var(--green-dim); margin-top: 2px; }

#status-bar {
  display: flex; justify-content: center; gap: 20px; margin-top: 8px;
  font-size: 0.75rem; 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;
}

/* ============================================================ */
/* CHICLET KEYBOARD                                             */
/* ============================================================ */

#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-housing::before {
  content: ''; position: absolute; top: 0; left: 8px; right: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
#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-graphic { font-size: 0.5rem; color: var(--kb-key-graphic); line-height: 1; opacity: 0.8; }
.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 .key-graphic { color: rgba(255,255,255,0.7); }
.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; }

/* ============================================================ */
/* DATASETTE PANEL                                              */
/* ============================================================ */

.datasette-housing {
  background: linear-gradient(180deg, #d8d0bc 0%, #c8b898 50%, #b0a078 100%);
  border-radius: 8px; padding: 12px; border: 2px solid #907850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 10px rgba(0,0,0,0.4);
}
.datasette-title {
  text-align: center; font-size: 0.82rem; font-weight: bold;
  color: #2a1a00; margin-bottom: 10px; letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.datasette-deck {
  background: #1a1a1a; border-radius: 6px; padding: 10px;
  border: 2px inset #555; margin-bottom: 10px;
}
.datasette-window {
  background: linear-gradient(180deg, #2a2a2a, #111);
  border-radius: 6px; padding: 12px; margin-bottom: 8px;
  border: 1px solid #444; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; overflow: hidden;
}
.tape-reel {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #555; background: #222;
  position: absolute;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}
.tape-reel::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: #444; transform: translate(-50%, -50%);
  border: 1px solid #666;
}
.left-reel { left: 20px; }
.right-reel { right: 20px; }
.tape-reel.spinning { animation: reel-spin 0.6s linear infinite; }
.tape-reel.spinning-fast { animation: reel-spin 0.2s linear infinite; }
@keyframes reel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.tape-label {
  font-size: 0.65rem; color: #666; text-align: center; z-index: 1;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.datasette-counter-row {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;
}
.tape-counter {
  display: flex; gap: 1px; background: #000; padding: 3px 6px; border-radius: 3px;
  border: 1px solid #444;
}
.counter-digit {
  font-family: 'Share Tech Mono', monospace; font-size: 1.1rem; font-weight: bold;
  color: #eee; background: #1a1a1a; padding: 1px 4px; min-width: 16px; text-align: center;
  border: 1px solid #333;
}
.counter-reset-btn {
  font-family: inherit; font-size: 0.55rem; color: #ccc; background: #333;
  border: 1px outset #555; padding: 2px 6px; cursor: pointer; border-radius: 2px;
}
.counter-reset-btn:hover { background: #444; }

.datasette-transport {
  display: flex; gap: 4px; justify-content: center; padding: 4px 0;
}
.transport-btn {
  font-family: inherit; font-size: 0.9rem; width: 40px; height: 32px;
  background: linear-gradient(180deg, #555 0%, #333 100%);
  color: #ddd; border: 2px outset #666; cursor: pointer; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.08s;
}
.transport-btn:hover { background: linear-gradient(180deg, #666 0%, #444 100%); color: #fff; }
.transport-btn:active { border-style: inset; transform: translateY(1px); }
.transport-btn.active-transport { background: linear-gradient(180deg, #336633 0%, #224422 100%); border-color: #44aa44; color: var(--green); }

.play-btn { color: #4f4; }
.rec-btn { color: #f44; }
.stop-btn { color: #ff8; }
.eject-btn { font-size: 0.8rem; }

.datasette-status-row {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
}
.datasette-led-group {
  display: flex; gap: 10px; align-items: center; padding: 6px 0;
}
.led-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 0.5rem; color: #3a2a10; font-weight: bold;
}
.led {
  width: 10px; height: 10px; border-radius: 50%;
  background: #331a00; border: 1px solid #555;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  transition: all 0.1s;
}
.led.led-on { background: #33ff33; box-shadow: 0 0 6px #33ff33, 0 0 12px rgba(51,255,51,0.4); }
.led.led-sense-on { background: #ffaa00; box-shadow: 0 0 6px #ffaa00, 0 0 12px rgba(255,170,0,0.4); }
.led.led-data-on { background: #ff3333; box-shadow: 0 0 6px #ff3333, 0 0 12px rgba(255,51,51,0.4); }

.datasette-info {
  font-size: 0.62rem; color: #3a2a10; line-height: 1.5; flex: 1;
}
.datasette-info span { color: #1a0a00; font-weight: bold; }

.datasette-insert-zone {
  border: 2px dashed #907850; padding: 10px; text-align: center;
  cursor: pointer; font-size: 0.7rem; color: #5a4a20;
  margin-top: 8px; border-radius: 4px; position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.datasette-insert-zone:hover, .datasette-insert-zone.dragover {
  border-color: #4a3a10; background: rgba(0,0,0,0.05);
}
.datasette-insert-zone input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* Keyboard Matrix Panel */
#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; line-height: 1.3; }
#matrix-grid td {
  background: #0a0a0a; color: #555; position: relative; 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); box-shadow: inset 0 0 6px rgba(51,255,51,0.2); }
#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); }
@keyframes row-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
#matrix-grid tr.row-active td:first-child { animation: row-pulse 0.3s ease-in-out infinite; }
#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; }

/* Panels */
.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-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.tab-btn {
  font-family: inherit; font-size: 0.7rem; color: var(--green-dim);
  background: #1a1a1a; border: 1px solid #333; padding: 4px 10px; cursor: pointer;
}
.tab-btn.active { color: var(--green); background: #222; border-bottom-color: var(--green); }
.tab-content { display: none; font-size: 0.8rem; }
.tab-content.active { display: block; }
.tab-content p { margin-bottom: 8px; color: var(--green-dim); }
.tab-content input[type="file"] { margin-bottom: 8px; }
.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;
}
.pia-watch { flex-direction: column; align-items: flex-start; }
.pia-title { color: var(--green); font-size: 0.75rem; margin-bottom: 4px; text-shadow: 0 0 4px var(--green-glow); }
.pia-watch .mono-box { width: 100%; font-size: 0.68rem; }

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); }
  50% { opacity: 0.3; transform: scaleY(1); }
  70% { opacity: 0.9; transform: scaleY(1); }
  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 .key-graphic { font-size: 0.32rem; }
  .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; }
  #matrix-grid td, #matrix-grid th { min-width: 40px; font-size: 0.5rem; padding: 2px; }
  #matrix-info-bar { font-size: 0.6rem; gap: 6px; }
  .datasette-housing { padding: 8px; }
  .transport-btn { width: 32px; height: 28px; font-size: 0.75rem; }
}