:root {
  --bg: #100b06;
  --bg2: #16100a;
  --bg3: #241a10;
  --cyan: #f4b23e;      /* amber phosphor = primary */
  --magenta: #e2593b;   /* burnt orange accent */
  --green: #8fd14f;     /* CRT green */
  --amber: #f4b23e;
  --red: #d94a3a;
  --text: #e7d6bd;
  --text-dim: #8a7355;
  --line: #3a2c1a;
  --glow-cyan: 0 0 0 1px #3a2c1a, 2px 2px 0 #000;
  --glow-amber: 0 0 0 1px #4a3616, 2px 2px 0 #000;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  overflow: hidden;
  height: 100vh; width: 100vw;
  /* faint CRT scanline + vignette texture — hand-built, not a stock gradient */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, rgba(244,178,62,0.05), transparent 60%);
}
</parameter>

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

/* HEADER */
#header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px;
  background: var(--bg2);
  border-bottom: 2px solid var(--line); flex-shrink: 0;
}
#header-left { display:flex; flex-direction:column; gap:0; }
#title {
  font-family: 'VT323', monospace; font-weight: 400; font-size: 34px; letter-spacing: 1px;
  color: var(--amber); line-height: 1;
  text-shadow: 0 0 6px rgba(244,178,62,0.45);
  animation: crtFlicker 6s steps(1) infinite;
}
@keyframes crtFlicker {
  0%,100% { opacity: 1; } 48% { opacity: 1; } 49% { opacity: 0.82; }
  50% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.9; } 94% { opacity: 1; }
}
#subtitle { font-family: 'VT323', monospace; font-size: 15px; color: var(--text-dim); letter-spacing: 0.5px; }

#fps-counter {
  font-family: 'VT323', monospace; font-size: 20px; font-weight: 400;
  padding: 1px 10px; border-radius: 0; background: #0c0904;
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  color: var(--green); min-width: 80px; text-align: center; letter-spacing: 1px;
}
#fps-counter.warn { color: var(--amber); border-left-color: var(--amber); }
#fps-counter.bad { color: var(--red); border-left-color: var(--red); }

/* CONTROLS */
#controls {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: var(--bg); border-bottom: 2px solid var(--line); flex-shrink: 0; flex-wrap: wrap;
}
#controls-left { display:flex; gap:6px; align-items:center; }
#controls-center { display:flex; gap:16px; align-items:center; flex:1; justify-content:center; flex-wrap:wrap; }
#controls-right { display:flex; gap:6px; }

#btn-load {
  position: relative; background: var(--amber);
  border: 1px solid #7a5510; border-top-color: #ffcf6e; color: #2a1c05;
  font-family: 'VT323', monospace; font-size: 18px; font-weight: 400;
  padding: 4px 16px; border-radius: 2px; cursor: pointer; letter-spacing: 1px;
  transition: transform 0.06s, filter 0.15s; box-shadow: 0 2px 0 #000, 0 3px 4px rgba(0,0,0,0.5); overflow: hidden;
}
#btn-load:hover { filter: brightness(1.1); }
#btn-load:active { transform: translateY(2px); box-shadow: 0 0 0 #000; }
#btn-load input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.ctrl-btn {
  width: 36px; height: 34px; border-radius: 2px; border: 1px solid #000;
  border-top: 1px solid #453320;
  background: linear-gradient(180deg, #2c2013, #1a1109); color: var(--text); font-size: 15px; cursor: pointer;
  transition: transform 0.06s, color 0.12s; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 #000;
}
.ctrl-btn:hover:not(:disabled) { color: var(--amber); border-top-color: var(--amber); }
.ctrl-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.ctrl-btn:disabled { opacity: 0.28; cursor: default; }

/* DOWNLOAD button + menu (amber = headline feature) */
#download-wrap { position: relative; }
.dl-btn {
  border-color: #000; color: #2a1c05;
  background: linear-gradient(180deg, #ffcf6e, var(--amber));
  font-weight: 400;
}
.dl-btn { width: auto; padding: 0 12px; font-family: 'VT323', monospace; font-size: 18px; letter-spacing: 1px; gap: 4px; }
.dl-btn:hover:not(:disabled) { color: #2a1c05; filter: brightness(1.1); }
.dl-btn:disabled { filter: grayscale(0.6); }
.dl-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* PERF MODE toggle — hardware LED look */
.perf-btn { border-color: #000; color: var(--green); }
.perf-btn:hover:not(:disabled) { color: var(--green); border-top-color: var(--green); }
.perf-btn.active { background: var(--green); color: #123400; border-top-color: #d6f9a8; text-shadow: none; box-shadow: 0 0 10px rgba(143,209,79,0.7), 0 2px 0 #000; }
#download-menu {
  position: absolute; top: 42px; left: 0; z-index: 30;
  background: var(--bg2); border: 1px solid var(--amber);
  border-radius: 2px; padding: 6px; min-width: 250px;
  box-shadow: 4px 4px 0 #000, 0 0 0 1px #000;
  display: flex; flex-direction: column; gap: 2px;
  animation: dropIn 0.12s steps(2);
}
@keyframes dropIn { from { opacity:0; transform: translateY(-4px);} to {opacity:1; transform:none;} }
#download-menu.hidden { display: none; }
.dl-item {
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-family: 'Space Mono', monospace; font-size: 12px; text-align: left;
  padding: 7px 10px; border-radius: 0; cursor: pointer; transition: none;
}
.dl-item:hover { background: var(--bg3); border-left: 3px solid var(--amber); color: var(--amber); padding-left: 7px; }

.slider-group { display: flex; align-items: center; gap: 8px; }
.slider-group label { font-size: 10px; letter-spacing: 2px; color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.slider-group input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 92px; height: 6px; border-radius: 0;
  background: #0c0904; border: 1px solid var(--line); outline: none;
}
.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 18px; border-radius: 0;
  background: var(--amber); border: 1px solid #000; cursor: pointer;
}
.slider-group input[type="range"]::-moz-range-thumb {
  width: 8px; height: 18px; border: 1px solid #000; border-radius: 0;
  background: var(--amber); cursor: pointer;
}
#fall-slider::-webkit-slider-thumb { background: var(--magenta); }
#fall-slider::-moz-range-thumb { background: var(--magenta); }
.slider-group span { font-family: 'VT323', monospace; font-size: 17px; color: var(--amber); min-width: 46px; text-align: right; }

/* PROGRESS */
#progress-bar-container { padding: 4px 16px 6px; background: var(--bg); flex-shrink: 0; }
#progress-bar { height: 8px; background: #0c0904; border: 1px solid var(--line); border-radius: 0; cursor: pointer; position: relative; overflow: hidden; }
#progress-fill { height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--amber) 0 6px, #c98a1e 6px 8px);
  transition: width 0.1s linear; }
#time-display { display: flex; justify-content: space-between; font-family: 'VT323', monospace; font-size: 16px; color: var(--text-dim); margin-top: 2px; }

/* MAIN */
#main-area { flex: 1; display: flex; min-height: 0; position: relative; }
#canvas-container { flex: 1; position: relative; min-width: 0; }
canvas { display: block; width: 100%; height: 100%; }

#stats-overlay {
  position: absolute; top: 8px; left: 8px; display: flex; gap: 0;
  background: rgba(12,9,4,0.85); border: 1px solid var(--line); border-radius: 0; padding: 4px 4px; pointer-events: none;
}
#stats-overlay div { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 10px; border-right: 1px solid var(--line); }
#stats-overlay div:last-child { border-right: none; }
.stat-label { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; }
#stats-overlay span:not(.stat-label) { font-family: 'VT323', monospace; font-size: 19px; font-weight: 400; color: var(--green); }
#stat-fall { color: var(--magenta) !important; }

#drop-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,11,6,0.92); z-index: 10; transition: opacity 0.3s; }
#drop-overlay.hidden { opacity:0; pointer-events:none; }
#drop-content { text-align: center; }
#drop-icon { font-size: 64px; margin-bottom: 16px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.25; } }
#drop-text { font-family: 'VT323', monospace; font-size: 26px; color: var(--amber); letter-spacing: 1px; text-shadow: 0 0 6px rgba(244,178,62,0.4); }
#drop-text span { font-size: 16px; color: var(--text-dim); font-family: 'VT323', monospace; }

/* AI BUTTON — glowing magenta headline */
.ai-btn {
  width: auto; padding: 0 12px; font-family: 'VT323', monospace; font-size: 18px;
  letter-spacing: 1px; color: #2a0518; border-color: #000;
  background: linear-gradient(180deg, #ff9ec0, var(--magenta));
  animation: aiPulse 2.2s ease-in-out infinite;
}
.ai-btn:hover:not(:disabled) { color: #2a0518; filter: brightness(1.12); }
@keyframes aiPulse {
  0%,100% { box-shadow: 0 2px 0 #000, 0 0 4px rgba(226,89,59,0.4); }
  50% { box-shadow: 0 2px 0 #000, 0 0 14px rgba(226,89,59,0.9); }
}

/* AI OVERLAY */
#ai-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #05050add; z-index: 45; }
#ai-overlay.hidden { display: none; }
#ai-box { width: min(480px, 92%); padding: 22px 26px; background: var(--bg2); border: 1px solid var(--magenta); box-shadow: 6px 6px 0 #000, 0 0 24px rgba(226,89,59,0.25); }
#ai-title { font-family: 'VT323', monospace; color: var(--magenta); letter-spacing: 2px; font-size: 30px; text-shadow: 0 0 8px rgba(226,89,59,0.5); }
#ai-sub { font-family: 'VT323', monospace; font-size: 16px; color: var(--text-dim); margin: 2px 0 14px; }
#ai-prompt { width: 100%; height: 74px; resize: none; background: #0c0904; border: 1px solid var(--line); color: var(--text); font-family: 'Space Mono', monospace; font-size: 13px; padding: 10px; outline: none; }
#ai-prompt:focus { border-color: var(--magenta); }
#ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ai-chip { background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-family: 'VT323', monospace; font-size: 15px; padding: 3px 9px; cursor: pointer; letter-spacing: 0.5px; }
.ai-chip:hover { border-color: var(--magenta); color: var(--magenta); }
#ai-actions { display: flex; gap: 8px; }
#ai-generate { flex: 1; background: linear-gradient(180deg, #ff9ec0, var(--magenta)); color: #2a0518; border: 1px solid #000; font-family: 'VT323', monospace; font-size: 20px; letter-spacing: 1px; padding: 6px; cursor: pointer; box-shadow: 0 2px 0 #000; }
#ai-generate:hover:not(:disabled) { filter: brightness(1.12); }
#ai-generate:active { transform: translateY(2px); box-shadow: none; }
#ai-generate:disabled { filter: grayscale(0.6); cursor: wait; }
#ai-cancel { background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-family: 'VT323', monospace; font-size: 18px; padding: 6px 14px; cursor: pointer; }
#ai-cancel:hover { border-color: var(--text); color: var(--text); }
#ai-status { font-family: 'VT323', monospace; font-size: 15px; color: var(--amber); margin-top: 10px; min-height: 18px; }
#ai-status.err { color: var(--red); }

/* RENDER OVERLAY (WAV export) */
#render-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #05050add; z-index: 40; }
#render-overlay.hidden { display: none; }
#render-box { text-align: center; padding: 24px 32px; background: var(--bg2); border: 1px solid var(--amber); border-radius: 0; box-shadow: 6px 6px 0 #000; min-width: 300px; }
#render-title { font-family: 'VT323', monospace; color: var(--amber); letter-spacing: 2px; font-size: 26px; margin-bottom: 14px; }
#render-bar { height: 10px; background: #0c0904; border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
#render-fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--amber) 0 6px, #c98a1e 6px 8px); transition: width 0.2s; }
#render-note { font-family: 'VT323', monospace; font-size: 15px; color: var(--text-dim); margin-top: 10px; }

/* SIDEBAR */
#sidebar { width: 260px; background: var(--bg2); border-left: 2px solid var(--line); padding: 12px; overflow-y: auto; flex-shrink: 0; transition: width 0.3s, padding 0.3s, opacity 0.3s; }
#sidebar.hidden { width: 0; padding: 0; opacity: 0; overflow: hidden; }
#sidebar h3 { font-family: 'VT323', monospace; font-size: 22px; letter-spacing: 1px; color: var(--amber); margin-bottom: 10px; }
#sidebar h4 { font-family: 'VT323', monospace; font-size: 17px; letter-spacing: 1px; color: var(--text-dim); margin: 12px 0 6px; }
.sidebar-empty { font-size: 11px; color: var(--text-dim); }
.track-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #1a1a2a; font-size: 10px; }
.track-color { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.track-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.track-notes { color: var(--text-dim); font-size: 9px; }
.track-btn { font-size: 8px; padding: 2px 5px; border: 1px solid #2a2a4a; background: transparent; color: var(--text-dim); border-radius: 3px; cursor: pointer; font-family: 'JetBrains Mono', monospace; }
.track-btn.active { border-color: var(--amber); color: var(--amber); background: rgba(244,178,62,0.12); }
.track-btn:hover { border-color: var(--amber); }
#channel-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ch-item { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--text-dim); }
.ch-dot { width: 8px; height: 8px; border-radius: 2px; }

/* FOOTER */
#footer { display: flex; justify-content: space-between; align-items: center; padding: 5px 16px; font-family: 'VT323', monospace; font-size: 15px; color: var(--text-dim); background: var(--bg2); border-top: 2px solid var(--line); flex-shrink: 0; }
#footer a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber); }
#footer a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

body.drag-over #drop-overlay { background: rgba(30,20,6,0.92); border: 2px dashed var(--amber); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* ============================================================
   VIEWPORT FIT FIX — make the whole piano visible "from above"
   without needing to zoom the browser to 50%.
   The canvas now always fills its container at 1:1 CSS pixels,
   and the layout never overflows the screen.
   ============================================================ */
#main-area {
  flex: 1 1 auto;
  min-height: 0;      /* critical: lets the flex child shrink to fit */
  display: flex;
  overflow: hidden;
}
#canvas-container {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  #controls-center { gap: 8px; }
  .slider-group input[type="range"] { width: 70px; }
  #stats-overlay { gap: 8px; padding: 4px 8px; }
  .stat-label { font-size: 7px; }
  #stats-overlay span:not(.stat-label) { font-size: 10px; }
  #sidebar { width: 200px; }
  #title { font-size: 14px; }
}