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

:root {
  --tweed-a: #c9a96b;
  --tweed-b: #8a6e3f;
  --tweed-c: #5e4a26;
  --cream: #e8dcb5;
  --ink: #1a1410;
  --silkscreen: #f4ecd0;
  --red: #d4321a;
  --red-glow: #ff6a4a;
  --brass: #b8924a;
}

html, body {
  height: 100%;
  background: var(--tweed-c);
  color: var(--silkscreen);
  font: 13px/1.3 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", system-ui, sans-serif;
  font-stretch: condensed;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-x: hidden;
}

/* Tweed/burlap fabric background — woven texture via crossed gradients */
body {
  min-height: 100dvh;
  padding: 14px;
  background-color: var(--tweed-b);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.18) 0 2px,
      rgba(255,255,255,0.04) 2px 4px,
      rgba(0,0,0,0.10) 4px 6px,
      transparent 6px 8px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.14) 0 2px,
      rgba(255,255,255,0.05) 2px 4px,
      rgba(50,30,10,0.18) 4px 7px,
      transparent 7px 9px),
    radial-gradient(circle at 30% 20%, #b08550 0%, #6b4a22 60%, #3d2a14 100%);
  background-blend-mode: multiply, multiply, normal;
}

/* Header */
.hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 14px;
}
.brand { display: flex; align-items: baseline; gap: 14px; }
.logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--silkscreen);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.model {
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.18em;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 10px;
  color: var(--silkscreen);
  letter-spacing: 0.18em;
}
.meta-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}
.meta-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
}

/* Main rig — looks like a metal chassis sitting on the tweed */
.rig {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(180deg, #2a201a 0%, #1a1410 100%);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 6px 0 rgba(0,0,0,0.5),
    0 16px 30px rgba(0,0,0,0.4);
  padding: 16px;
  position: relative;
}
/* Screw heads in corners */
.rig::before, .rig::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 35% 35%, #c8b890 0%, #8a7a52 50%, #3d3220 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #1a1410;
}
.rig::before { top: 6px; left: 6px; }
.rig::after { top: 6px; right: 6px; }

/* Neck */
.neck-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 8px;
  background: #1a1410;
  border: 2px solid #000;
  border-radius: 2px;
  padding: 6px;
  margin-bottom: 14px;
}
.neck {
  width: 100%;
  height: 240px;
  display: block;
  border: 2px solid #1a1410;
  background: #2a1810;
  border-radius: 2px;
}
.neck .board { filter: url(#noise); }
.neck text { font-family: inherit; }

/* String visuals — animated wobble via CSS */
#strings line {
  stroke: #f0e4c4;
  stroke-width: 2;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.7));
  transition: stroke 0.05s, opacity 0.15s;
  vector-effect: non-scaling-stroke;
}
#strings line.thick-1 { stroke-width: 4; stroke: #c8b890; }
#strings line.thick-2 { stroke-width: 3.5; stroke: #d4c8a8; }
#strings line.thick-3 { stroke-width: 3; stroke: #e0d4b0; }
#strings line.thick-4 { stroke-width: 2.5; stroke: #ecdfba; }
#strings line.thick-5 { stroke-width: 2; stroke: #f0e4c4; }
#strings line.thick-6 { stroke-width: 1.5; stroke: #f8eecd; }
#strings line.muted { opacity: 0.18; stroke-dasharray: 6 6; }
#strings line.plucked { animation: wobble 0.4s ease-out; }
@keyframes wobble {
  0%   { stroke-width: 4; filter: drop-shadow(0 0 4px #fff); }
  100% {}
}

#inlays circle { fill: url(#inlay); opacity: 0.85; }
#presses circle.press {
  fill: #f4ecd0;
  stroke: #1a1410;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px #ff6a4a);
}

/* Strum zone */
.strum-zone {
  position: relative;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.25) 0 1px,
      transparent 1px 4px),
    linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
  border: 2px solid #000;
  border-radius: 2px;
  cursor: ns-resize;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.strum-zone * { pointer-events: none; }
.strum-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,180,80,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Ghost strings inside the strum zone */
.zone-string {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: #f0e4c4;
  opacity: 0.45;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.18s ease-out, box-shadow 0.18s ease-out;
  border-radius: 1px;
}
.zone-string.s1 { top: 8.333%;  height: 4px;   background: #c8b890; opacity: 0.55; }
.zone-string.s2 { top: 25%;     height: 3.5px; background: #d4c8a8; opacity: 0.5; }
.zone-string.s3 { top: 41.666%; height: 3px;   background: #e0d4b0; }
.zone-string.s4 { top: 58.333%; height: 2.5px; background: #ecdfba; }
.zone-string.s5 { top: 75%;     height: 2px;   background: #f0e4c4; }
.zone-string.s6 { top: 91.666%; height: 1.5px; background: #f8eecd; }
.zone-string.muted {
  opacity: 0.12 !important;
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
}
.zone-string.plucked {
  animation: zonePluck 0.45s ease-out;
}
@keyframes zonePluck {
  0%   { opacity: 1; box-shadow: 0 0 14px #ffc880, 0 0 6px #fff; }
  60%  { opacity: 0.95; }
  100% { box-shadow: none; }
}
.strum-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--brass);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s;
}
.strum-zone.active .strum-hint { opacity: 0; }
.chord-name {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 32px;
  font-weight: 700;
  color: var(--silkscreen);
  text-shadow: 0 0 12px var(--red-glow), 0 2px 0 #000;
  letter-spacing: 0.04em;
  pointer-events: none;
  min-height: 38px;
}

/* Strum trail (drawn on the strum zone via JS) */
.strum-trail {
  position: absolute;
  width: 3px;
  background: linear-gradient(180deg, transparent, #ffb060 50%, transparent);
  pointer-events: none;
  opacity: 0.8;
  animation: fade 0.3s forwards;
}
@keyframes fade { to { opacity: 0; } }

/* Panel */
.panel {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.2) 0 1px,
      transparent 1px 6px),
    linear-gradient(180deg, #3a2c20 0%, #2a1f15 100%);
  border: 2px solid #000;
  border-radius: 2px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.panel-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.led-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #c8b890 0%, #8a7a52 100%);
  border: 2px solid #1a1410;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.14em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 3px 0 rgba(0,0,0,0.5);
}
.led-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.5); }
.led {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a1a0a 0%, #3a0a04 80%);
  border: 1px solid #000;
  transition: background 0.1s, box-shadow 0.1s;
}
.led-btn[aria-pressed="true"] .led,
body[data-state="recording"] .led {
  background: radial-gradient(circle at 35% 35%, #ffb0a0 0%, #ff3018 50%, #a01000 100%);
  box-shadow: 0 0 12px var(--red-glow), 0 0 20px var(--red);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 12px var(--red-glow), 0 0 20px var(--red); }
  50%      { box-shadow: 0 0 6px var(--red-glow),  0 0 10px var(--red); }
}

.time {
  font: 700 22px/1 "Courier New", ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: var(--red-glow);
  background: #0a0604;
  border: 2px inset #1a1410;
  padding: 6px 12px;
  border-radius: 2px;
  text-shadow: 0 0 8px var(--red);
  min-width: 90px;
  text-align: center;
}

.knob-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.knob {
  width: 54px; height: 54px;
  background: radial-gradient(circle at 35% 30%, #2a1f15 0%, #0a0604 100%);
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.6), 0 2px 0 rgba(0,0,0,0.5);
  cursor: ns-resize;
  position: relative;
  touch-action: none;
}
.knob svg {
  width: 100%; height: 100%;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.05s;
}
.knob-lbl {
  font-size: 9px;
  color: var(--brass);
  letter-spacing: 0.2em;
}

.btn {
  padding: 10px 14px;
  background: linear-gradient(180deg, #c8b890 0%, #8a7a52 100%);
  border: 2px solid #1a1410;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.14em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 0 rgba(0,0,0,0.5);
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.5); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost {
  background: transparent;
  color: var(--silkscreen);
  border-color: var(--silkscreen);
  box-shadow: none;
}
.btn.ghost:hover:not(:disabled) {
  background: rgba(244,236,208,0.1);
}

/* Pads (mobile chord buttons) */
.pads {
  display: none;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  margin-bottom: 14px;
}
.pads .pad.mod { grid-row: 2; }
.pads .pad[data-mod="minor"]   { grid-column: 1; }
.pads .pad[data-mod="sus4"]    { grid-column: 2; }
.pads .pad[data-mod="seventh"] { grid-column: 3; }
.pads .pad[data-mod="palmmute"]{ grid-column: 4 / span 2; }
.pad {
  padding: 18px 8px;
  background: linear-gradient(180deg, #c8b890 0%, #8a7a52 100%);
  border: 2px solid #1a1410;
  border-radius: 2px;
  font: 700 18px/1 inherit;
  letter-spacing: 0.08em;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 0 rgba(0,0,0,0.5);
}
.pad.active {
  background: linear-gradient(180deg, #f4ecd0 0%, #d4c8a8 100%);
  transform: translateY(2px);
  box-shadow: inset 0 0 8px rgba(255,160,60,0.6), 0 1px 0 rgba(0,0,0,0.5);
}
.pad.mod { background: linear-gradient(180deg, #6a5238 0%, #3a2c20 100%); color: var(--silkscreen); }
.pad.mod.active { background: linear-gradient(180deg, #d4321a 0%, #8a2010 100%); color: var(--silkscreen); }

/* Legend */
.legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 10px 4px 2px;
}
.leg-block {}
.leg-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--brass);
  padding-bottom: 4px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(184,146,74,0.4);
}
.leg-sub {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--silkscreen);
  opacity: 0.55;
  text-transform: none;
  font-style: italic;
}
.keys {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px 10px;
  align-items: center;
  font-size: 11px;
  color: var(--silkscreen);
}
.keys .arr {
  color: var(--brass);
  opacity: 0.7;
  font-size: 12px;
  text-align: center;
}
kbd {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 2px 5px;
  background: #d4c8a8;
  color: var(--ink);
  border: 1px solid #1a1410;
  border-radius: 2px;
  font: 700 10px/1 inherit;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 0 #000;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: var(--silkscreen);
  color: var(--ink);
  border: 2px solid var(--ink);
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobile */
@media (max-width: 720px) {
  body { padding: 8px; }
  .hdr { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 4px 10px; margin-bottom: 8px; }
  .logo { font-size: 22px; }
  .meta { font-size: 9px; }
  .rig { padding: 10px; }
  .neck-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: 180px 160px;
  }
  .neck { height: 180px; }
  .panel-row { gap: 10px; }
  .time { font-size: 16px; min-width: 70px; padding: 4px 8px; }
  .knob { width: 42px; height: 42px; }
  .btn, .led-btn { padding: 8px 10px; font-size: 11px; }
  .pads { display: grid; }
  .legend { display: none; }
  .strum-hint { transform: translate(-50%, -50%); font-size: 11px; }
  .chord-name { font-size: 24px; }
}