:root {
  /* Light mode colors */
  --body-bg: #fff8e7;
  --controls-bg: #f0e2c2;
  --canvas-bg: #f5deb3;
  --canvas-border: #663300;
  --legend-dot-border: #888;

  --interval-1: #ff3b3b;
  --interval-2: #ff9800;
  --interval-3: #ffd700;
  --interval-4: #4caf50;
  --interval-5: #2196f3;
  --interval-6: #9c27b0;
  --interval-7: #e91e63;

  --select-border: #999;
  --select-bg: #fff;
}

.dark-mode {
  --body-bg: #1e1e1e;
  --controls-bg: #2a2a2a;
  --canvas-bg: #222;
  --canvas-border: #ccc;
  --legend-dot-border: #aaa;

  --interval-1: #ff6b6b;
  --interval-2: #ffb86c;
  --interval-3: #ffe75c;
  --interval-4: #69ff94;
  --interval-5: #6ca0ff;
  --interval-6: #d78aff;
  --interval-7: #ff6fcf;

  --select-border: #ccc;
  --select-bg: #333;
}

/* Body and layout */

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: var(--body-bg);
}

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

/* Top controls */

.top-controls{
  display:flex;
  gap:6px;
  padding:6px;
  background: var(--controls-bg);
  border-bottom:2px solid var(--canvas-border);
  overflow-x:auto;
}

select{
  font-size:14px;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid var(--select-border);
  background: var(--select-bg);
  min-width:70px;
}

/* Dark Mode Button */
.amp-button-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
  user-select: none;
}

/* Button */
.amp-button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #eee, #aaa);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 3px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s;
  position: relative;
}

/* Press effect */
.amp-button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 6px rgba(0,0,0,0.4),
    0 1px 2px rgba(0,0,0,0.3);
}


/* LED next to button */
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #222;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  transition: background 0.2s, box-shadow 0.2s;
}

/* LED lights red in dark mode */
.dark-mode #darkModeLED {
  background: red;
  box-shadow: 0 0 6px red;
}

/* Fretboard */

.fretboard-area{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
}

canvas{
  border:2px solid var(--canvas-border);
  background: var(--canvas-bg);
  width:100%;
  height:auto;
}

/* Legend */

#legend{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;

  padding:6px;
  background: var(--controls-bg);
  border-top:2px solid var(--canvas-border);

  font-weight:bold;
  font-size:13px;
}

.legend-item{
  display:flex;
  align-items:center;
}

.legend-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  margin-right:5px;
  border:1px solid var(--legend-dot-border);
}

/* Legend interval colors using variables */

.legend-1 { background: var(--interval-1); }
.legend-2 { background: var(--interval-2); }
.legend-3 { background: var(--interval-3); }
.legend-4 { background: var(--interval-4); }
.legend-5 { background: var(--interval-5); }
.legend-6 { background: var(--interval-6); }
.legend-7 { background: var(--interval-7); }


.amp-head {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(145deg, #666, #aaa);
  border-top: 4px solid #444;
  border-bottom: 4px solid #333;
  padding: 10px;
  position: relative;
}

.dial {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #eee, #aaa);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 3px 6px rgba(0,0,0,0.5);
  position: relative;
  cursor: grab;
  touch-action: none; /* for mobile drag */
}

.dial:active { cursor: grabbing; }

.dial::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  top: 6px; left: 50%;
  transform: translateX(-50%);
}

.dial::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.25), transparent 70%);
  pointer-events: none;
}