:root {
  --bg: #0b0b0b;
  --panel: #141414;
  --accent: #ffcf66;
  --text: #eaeaea;
}

@font-face {
  font-family: 'RetroFont';
  src: url('./fonts/retrofunk.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
  display: grid;
  grid-template-columns: 320px 1fr;  /* aside + main */
  grid-template-rows: 36px 1fr;      /* header + content */
  height: 100vh;
  user-select: none;
  cursor: default;
}

/* === Controls Panel === */
#controls {
  grid-row: 2;
  background: var(--panel);
  padding: 16px;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
  z-index: 1;
  height: calc(100vh - 36px);
}

#controls > h2 {
  font-family: 'RetroFont', sans-serif;
  margin-top: 0;
  text-align: center;
  letter-spacing: 0.12em;
  color: #ffe7a3;
  text-shadow:
    0 0 1px #ffe7a3,
    0 0 4px rgba(255, 207, 102, 0.6),
    0 0 8px rgba(255, 180, 80, 0.4);
  filter: brightness(1.05);
  animation: neonFlicker 4.5s infinite;
  user-select: none;
  cursor: default;
}

@keyframes neonFlicker {
  0%,100% { opacity:1; filter:brightness(1.05); }
  92% { opacity:0.95; filter:brightness(1); }
  94% { opacity:0.85; filter:brightness(0.9); }
  96% { opacity:1; filter:brightness(1.1); }
  97% { opacity:0.9; filter:brightness(0.95); }
  98% { opacity:1; filter:brightness(1.15); }
}

h2 { margin-top:0; color: var(--accent); letter-spacing: 0.08em; }
label { display:block; margin-top:12px; font-size:0.8rem; }
input, select, button {
  width: 100%;
  margin-top:6px;
  padding:6px;
  background:#1f1f1f;
  color:white;
  border:none;
  border-radius:4px;
}
button {
  margin-top:16px;
  cursor:pointer;
  background: var(--accent);
  color:black;
  font-weight:bold;
}

/* === Main Canvas === */
main {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 36px);
}
canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* === Frame Edges === */
.frame-edge {
  position: fixed;
  background-image: url('./metal.jpg');
  background-repeat: repeat;
  z-index: 0;
  pointer-events: none;
}
.frame-top { top:36px; left:0; width:100%; height:20px; }
.frame-bottom { bottom:0; left:0; width:100%; height:20px; }
.frame-left { top:36px; left:320px; width:20px; height:calc(100% - 36px); }
.frame-right { top:36px; right:0; width:20px; height:calc(100% - 36px); }

/* === Section Accent Colors === */
.section { --accent-color:#ffcf66; }
.section-text    { --accent-color: #ffcf66; } /* amber */
.section-bg      { --accent-color: #66ffcc; } /* teal */
.section-effects { --accent-color: #ffb648; } /* magenta */
.section-crt     { --accent-color: hsl(309,100%,73%); } /* blue */
.section-analog  { --accent-color: #5eff41; } /* green */
.section-motion  { --accent-color: #47b9ff; } /* orange */

.section input[type="range"],
.section input[type="checkbox"],
.section input[type="radio"] { accent-color: var(--accent-color); }

/* === Mobile Block Screen === */
.mobile-block { display:none; }
@media (max-width:1024px) {
  body { overflow:hidden; }
  aside, main, .frame-edge { display:none !important; }
  .mobile-block {
    display:flex;
    position:fixed;
    inset:0;
    color:#eaeaea;
    align-items:center;
    justify-content:center;
    z-index:9999;
    text-align:center;
    padding:24px;
    background:
      radial-gradient(circle at center, rgba(255,255,255,0.04), rgba(0,0,0,0.85) 70%),
      repeating-radial-gradient(circle, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 2px, transparent 4px),
      #0b0b0b;
  }
  .mobile-block-content { max-width:420px; }
  .mobile-block img { width:220px; max-width:80%; margin-bottom:24px; opacity:0.9; image-rendering:pixelated; }
  .mobile-block h1 { font-family:sans-serif; font-size:1rem; margin-bottom:12px; color:#e8e8e8; text-shadow:0 0 8px rgba(16,16,16,0.6);}
  .mobile-block p { font-size:0.85rem; opacity:0.7;}
}



/* === Desktop Responsive: Hide header + aside on small screens === */
@media (max-width: 1024px) {
  body {
    display: block; /* normal flow for canvas to fill */
    margin: 0;
    height: 100vh;
  }

  /* Hide header and aside */
  #topHeader,
  #controls {
    display: none;
  }

  /* Resize the canvas to fill viewport */
  main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
  }

  canvas {
    width: 100%;
    height: 100%;
  }

  /* Keep frame edges visible */
  .frame-edge {
    /* optionally adjust top frame if needed */
  }
}


.swap-btn {
  margin-top: 8px;
  padding: 6px 10px;
  font-family: "VT323", monospace;
  font-size: 16px;
  color: #ffcc66;
  background: transparent;
  border: 1px solid #ffcc66;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.swap-btn:hover {
  background: #ffcc66;
  color: #0b0b0b;
}



/* === LFO Section Sliders === */
.section-lfo input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 14px;
  background: #1f1f1f;
  border-radius: 7px;
  border: 1px solid #444;
  margin-top: 4px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

/* Track hover effect */
.section-lfo input[type="range"]:hover {
  background: #2a2a2a;
}

/* Webkit Thumb */
.section-lfo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcf66;
  border: 2px solid #e6b84c;
  box-shadow: 0 0 6px rgba(255, 207, 102, 0.7);
  transition: background 0.2s, transform 0.1s;
}

/* Thumb hover effect */
.section-lfo input[type="range"]::-webkit-slider-thumb:hover {
  background: #ffe78c;
  transform: scale(1.1);
}

/* Firefox */
.section-lfo input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcf66;
  border: 2px solid #e6b84c;
  box-shadow: 0 0 6px rgba(255, 207, 102, 0.7);
  transition: background 0.2s, transform 0.1s;
}

.section-lfo input[type="range"]::-moz-range-track {
  background: #1f1f1f;
  border-radius: 7px;
  border: 1px solid #444;
}

/* Thumb active effect */
.section-lfo input[type="range"]:active::-webkit-slider-thumb,
.section-lfo input[type="range"]:active::-moz-range-thumb {
  background: #ffe78c;
  box-shadow: 0 0 10px rgba(255, 207, 102, 0.9);
}

/* Optional: style the label text a little */
.section-lfo label {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: #ffe7a3;
  display: block;
  margin-top: 6px;
}



/* DEV button */
#devNotesBtn {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

#devNotesBtn:hover {
  opacity: 1;
}

/* Modal */
.dev-notes {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 320px;
  height: 260px;
  background: #111;
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.hidden {
  display: none;
}

/* Header */
.dev-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 13px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
}

.dev-notes-header button {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
}

.dev-notes-header button:hover {
  color: #fff;
}

/* Textarea */
#devNotesTextarea {
  flex: 1;
  resize: none;
  background: #0d0d0d;
  color: #eaeaea;
  border: none;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  outline: none;
}