/* SID Synth — Commodore 64 (1982) */

:root {
  /* The C64 is two materials: a breadbin-beige case and that blue screen.
     Making everything blue lost the contrast the machine is built on, so
     the page background is the case and each panel is a screen inside it. */
  --chassis: #a9a08e;
  --chassis-edge: rgba(45, 40, 34, 0.55);
  --case-ink: #5b5345;         /* print on the beige case (panel-hw.css) */
  --logo: #3a33b8;             /* the case badge is screen blue on beige */
  --bg: #b3aa98;              /* breadbin beige case */
  --panel-bg: #4038c8;        /* C64 screen blue */
  --panel-border: #7d76e0;
  --accent: #d5d2ff;          /* light-blue screen text */
  --accent-dim: #9a94ee;
  --accent-bright: #ffffff;
  --text: #e3e1ff;
  --text-dim: #b8b4f5;        /* still legible on the screen blue */
  --knob-track: #2b2596;
  --slider-thumb: #b8b4f5;
  --danger: #ff6b5e;
  --led: #ff5b45;
  --cap: #cfc7b6;
  --display-bg: #2b2596;
  --display-ink: #a8a2ff;
  --display-grid: rgba(168, 162, 255, 0.13);
  --readout-bg: #2b2596;
  --readout-ink: #d5d2ff;
  --panel-radius: 0px;        /* blocky, like the machine */
  --label-tracking: 1.2px;
  --title-tracking: 2.6px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 12px;
  overflow-x: hidden;
}

.synth-container { max-width: 1200px; margin: 0 auto; padding: 10px; }

.synth-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 8px; margin-bottom: 8px;
}
.synth-header h1 { font-size: 18px; font-weight: 700; color: var(--accent-bright); letter-spacing: 3px; text-transform: uppercase; }
.synth-header .subtitle { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.header-controls { display: flex; align-items: center; gap: 12px; }

.synth-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.synth-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.effects-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.bottom-row { display: grid; grid-template-columns: 340px 1fr; gap: 8px; margin-bottom: 8px; }

.panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 6px; padding: 10px; }
.panel-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border); }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-dim); margin: 6px 0 2px; }

.control-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.control-row label { width: 60px; font-size: 10px; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; }
.control-row .val { width: 50px; text-align: right; font-size: 10px; font-family: 'Courier New', monospace; color: var(--accent); flex-shrink: 0; }

input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; background: var(--knob-track); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--slider-thumb); cursor: pointer; box-shadow: 0 0 4px rgba(120,120,255,0.4); }
input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 8px rgba(120,120,255,0.7); }

select { background: #2a2a50; color: var(--text); border: 1px solid var(--panel-border); border-radius: 3px; padding: 2px 4px; font-size: 11px; font-family: 'Courier New', monospace; outline: none; }
select:focus { border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }

.checkbox-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.checkbox-row label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }

.btn { background: var(--accent-dim); color: #fff; border: none; border-radius: 4px; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; font-family: 'Courier New', monospace; transition: background 0.15s; }
.btn:hover { background: var(--accent); color: #000; }
.btn:disabled { background: #333; color: #666; cursor: default; }
.btn-small { padding: 3px 8px; font-size: 10px; }
.btn-danger { background: var(--danger); }

/* ADSR with SID-style 0-15 display */
.sid-adsr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.sid-adsr .control-row label { width: 14px; }

/* Waveform toggle buttons */
.wave-toggles { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.wave-toggles button { padding: 3px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; background: #2a2a50; color: var(--text-dim); border: 1px solid var(--panel-border); border-radius: 3px; cursor: pointer; font-family: 'Courier New', monospace; }
.wave-toggles button.active { background: var(--accent-dim); color: #fff; border-color: var(--accent); }

.fx-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fx-header .panel-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

#scope { width: 100%; height: 120px; border-radius: 4px; background: #181840; }

.status-bar { display: flex; gap: 16px; font-size: 10px; color: var(--text-dim); padding: 4px 0; }
.status-bar span { font-family: 'Courier New', monospace; }

/* Piano keyboard */
#piano-keyboard { position: relative; height: 100px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.white-key { display: inline-block; width: 38px; height: 100px; background: linear-gradient(180deg, #d8d8f0, #c0c0e0); border: 1px solid #8888aa; border-radius: 0 0 4px 4px; position: relative; cursor: pointer; vertical-align: top; margin-right: 1px; }
.white-key:hover { background: linear-gradient(180deg, #e0e0ff, #d0d0f0); }
.white-key.active { background: linear-gradient(180deg, #aaaaff, #7878cc); }
.black-key { position: absolute; width: 24px; height: 60px; background: linear-gradient(180deg, #2a2a50, #1a1a30); border: 1px solid #000; border-radius: 0 0 3px 3px; cursor: pointer; z-index: 2; top: 0; }
.black-key:hover { background: linear-gradient(180deg, #3a3a60, #2a2a40); }
.black-key.active { background: linear-gradient(180deg, #5555aa, #333388); }
.key-label { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #8888aa; pointer-events: none; }

@media (max-width: 900px) { .synth-grid { grid-template-columns: 1fr; } .effects-row { grid-template-columns: 1fr 1fr; } }


/* ─── C64 screen frame ─────────────────────────────────────────────────────
   Each panel is a screen: the lighter border-blue inset the machine drew
   around its text area, on a beige case. */
.panel,
.synth-header,
.transport {
  box-shadow: inset 0 0 0 4px #6c5eb5, 0 1px 0 rgba(255, 255, 255, 0.35);
}
.panel > * { position: relative; }

/* Body text on the case, not on a screen, needs case-coloured ink. */
.help-text,
.keyboard-hint,
body > .hint { color: #4a4436; }