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

:root {
  --vic-black: #000000;
  --vic-white: #ffffff;
  --vic-red: #772d26;
  --vic-cyan: #85d4dc;
  --vic-purple: #a85fb4;
  --vic-green: #559e4a;
  --vic-blue: #42348b;
  --vic-yellow: #bdcc71;
  --vic-orange: #a8734a;
  --vic-lorange: #e9b287;
  --vic-lred: #b66862;
  --vic-lcyan: #c5ffff;
  --vic-lpurple: #e99df5;
  --vic-lgreen: #92df87;
  --vic-lblue: #7e70ca;
  --vic-lyellow: #ffffb0;
  --bg-dark: #0a0a1a;
  --bg-panel: #111128;
  --bg-card: #1a1a3e;
  --text-primary: #c5ffff;
  --text-dim: #7e70ca;
  --accent: #85d4dc;
}

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--vic-blue) 0%, #2a1a5e 100%);
  border-bottom: 3px solid var(--vic-cyan);
}

.header-title {
  font-family: 'VT323', monospace;
  font-size: 28px;
  color: var(--vic-lcyan);
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(133,212,220,0.5);
}

.header-sub {
  font-size: 14px;
  color: var(--vic-lblue);
  margin-left: 10px;
  opacity: 0.8;
}

.berry-badge {
  font-size: 13px;
  color: var(--vic-lorange);
  background: rgba(0,0,0,0.3);
  padding: 4px 10px;
  border-radius: 4px;
}

#main-layout {
  display: flex;
  flex: 1;
  padding: 10px;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
}

#screen-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 800px;
  width: 100%;
}

#crt-bezel {
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0d0d0d 100%);
  border-radius: 20px;
  padding: 18px 22px 10px;
  box-shadow:
    0 0 0 2px #333,
    0 0 0 4px #111,
    inset 0 2px 8px rgba(0,0,0,0.8),
    0 8px 32px rgba(0,0,0,0.7);
  position: relative;
}

#crt-inner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
  line-height: 0;
}

#canvas {
  width: 768px;
  height: 544px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  background: #000;
}

#scanline-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

#scanline-overlay.active {
  opacity: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0.15) 2px
  );
}

#crt-label {
  text-align: center;
  padding: 6px 0 2px;
  color: #555;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

#control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 6px;
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid #222244;
  width: 100%;
}

.ctrl-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid #333366;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s;
}

.ctrl-btn:hover { background: #252560; border-color: var(--accent); }
.ctrl-btn:active { transform: scale(0.95); }
.ctrl-btn.active { background: var(--vic-blue); border-color: var(--vic-cyan); color: var(--vic-lcyan); }
.ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ctrl-select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid #333366;
  padding: 6px 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

#rom-panel {
  background: var(--bg-panel);
  border: 1px solid #222244;
  border-radius: 10px;
  padding: 14px;
  width: 100%;
}

#rom-panel h3 {
  color: var(--vic-yellow);
  font-family: 'VT323', monospace;
  font-size: 22px;
  margin-bottom: 10px;
  text-align: center;
}

.rom-slots, .peripheral-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.peripheral-slots {
  flex-direction: row;
  gap: 6px;
}

.rom-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 2px dashed #333366;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.rom-slot:hover { border-color: var(--accent); background: #1e1e48; }
.rom-slot.loaded { border-color: var(--vic-green); border-style: solid; }
.rom-slot.error { border-color: var(--vic-red); border-style: solid; }
.rom-slot.small { flex: 1; }

.rom-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.rom-icon { font-size: 24px; }
.rom-info { flex: 1; }
.rom-name { font-size: 14px; color: var(--text-primary); font-weight: bold; }
.rom-file { font-size: 11px; color: var(--text-dim); }
.rom-addr { font-size: 11px; color: var(--vic-orange); }
.rom-status { font-size: 20px; }

.power-btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-family: 'VT323', monospace;
  font-size: 26px;
  background: linear-gradient(180deg, #333 0%, #1a1a1a 100%);
  color: #555;
  border: 2px solid #444;
  border-radius: 10px;
  cursor: not-allowed;
  transition: all 0.3s;
  letter-spacing: 4px;
}

.power-btn:not(:disabled) {
  background: linear-gradient(180deg, var(--vic-green) 0%, #2a6622 100%);
  color: var(--vic-lgreen);
  border-color: var(--vic-green);
  cursor: pointer;
  box-shadow: 0 0 20px rgba(85,158,74,0.3);
}

.power-btn:not(:disabled):hover {
  box-shadow: 0 0 30px rgba(85,158,74,0.5);
  transform: scale(1.02);
}

.power-btn:not(:disabled):active {
  transform: scale(0.98);
}

.power-circle {
  display: inline-block;
  transition: transform 0.3s;
}

#keyboard-container {
  width: 100%;
  overflow-x: auto;
}

#virtual-keyboard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: #3c2a14;
  border-radius: 8px;
  border: 2px solid #5a3d1a;
  min-width: 680px;
}

.kb-row {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.kb-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 2px 6px;
  background: linear-gradient(180deg, #e8dcc8 0%, #c8b8a0 100%);
  color: #2a1a0a;
  border: 1px solid #8a7a5a;
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 0 #6a5a3a;
  transition: all 0.08s;
  white-space: nowrap;
}

.kb-key:active, .kb-key.pressed {
  transform: translateY(2px);
  box-shadow: 0 0 0 #6a5a3a;
  background: linear-gradient(180deg, #c8b8a0 0%, #b0a080 100%);
}

.kb-key.special {
  background: linear-gradient(180deg, #8a7a6a 0%, #6a5a4a 100%);
  color: #e8dcc8;
  border-color: #5a4a3a;
  box-shadow: 0 2px 0 #3a2a1a;
}

.kb-key.wide { min-width: 54px; }
.kb-key.wider { min-width: 72px; }
.kb-key.widest { min-width: 200px; }

#debug-panel {
  width: 340px;
  min-width: 300px;
  background: var(--bg-panel);
  border: 1px solid #222244;
  border-radius: 10px;
  padding: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  font-size: 12px;
}

#debug-panel.hidden { display: none; }

.debug-section {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #222244;
}

.debug-section h4 {
  color: var(--vic-yellow);
  font-size: 13px;
  margin-bottom: 6px;
  font-family: 'VT323', monospace;
  font-size: 16px;
}

.debug-reg-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
  border-radius: 2px;
  transition: background 0.3s;
}

.debug-reg-row.changed { background: rgba(133,212,220,0.15); }

.debug-reg-label { color: var(--vic-orange); }
.debug-reg-value { color: var(--vic-lgreen); font-family: 'Share Tech Mono', monospace; }

.flag-indicator {
  display: inline-block;
  width: 22px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin: 1px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.flag-on { background: var(--vic-green); color: #fff; }
.flag-off { background: #222; color: #555; }

#cpu-instr {
  color: var(--vic-lcyan);
  padding: 4px;
  background: #0a0a1a;
  border-radius: 4px;
  min-height: 22px;
}

#disasm-view {
  font-size: 11px;
  color: var(--text-dim);
  background: #0a0a1a;
  border-radius: 4px;
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.disasm-line { padding: 1px 4px; }
.disasm-line.current { color: var(--vic-lcyan); background: rgba(133,212,220,0.1); }

.vic-reg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  font-size: 11px;
  border-radius: 2px;
  transition: background 0.3s;
}

.vic-reg-row.changed { background: rgba(189,204,113,0.15); }
.vic-reg-addr { color: var(--vic-orange); width: 40px; }
.vic-reg-desc { color: #888; flex: 1; margin: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vic-reg-val { color: var(--vic-lgreen); font-family: 'Share Tech Mono', monospace; }

.debug-controls {
  display: flex;
  gap: 4px;
}

#status-bar {
  display: flex;
  justify-content: space-between;
  padding: 5px 16px;
  background: var(--bg-panel);
  border-top: 1px solid #222244;
  font-size: 12px;
  color: var(--text-dim);
}

footer {
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

footer a {
  color: var(--vic-cyan);
  text-decoration: none;
}

footer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  #main-layout { flex-direction: column; align-items: center; }
  #debug-panel { width: 100%; max-width: 800px; max-height: 50vh; }
  #canvas { width: 100%; height: auto; }
  #crt-bezel { padding: 10px 12px 6px; }
  .header-title { font-size: 20px; }
  .header-sub { display: none; }
}