@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --black: #050505;
  --panel: #11130f;
  --panel-light: #1a1f16;
  --lime: #a8d94d;
  --lime-hot: #d2ff6b;
  --purple: #8b55a7;
  --cream: #f0e9d8;
  --muted: #8d987e;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black) url("images/icon.png") center / contain no-repeat;
  color: var(--cream);
}

body {
  font-family: "Space Grotesk", Arial, sans-serif;
}

.soundboard {
  display: grid;
  grid-template-rows: clamp(120px, 19vh, 184px) 1fr;
  height: 100dvh;
  max-width: 1800px;
  margin: auto;
  padding: clamp(8px, 1.2vw, 18px);
  gap: clamp(7px, 1vh, 12px);
  background:
    radial-gradient(circle at 88% -8%, rgba(139, 85, 167, 0.14), transparent 24%),
    rgba(0, 0, 0, 0.42);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(150px, 0.8fr);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(21, 24, 17, 0.58), rgba(9, 10, 8, 0.34), rgba(23, 18, 26, 0.52));
}

.hero-copy {
  align-self: center;
  padding-left: clamp(14px, 3vw, 48px);
  z-index: 1;
}

.eyebrow,
.subtitle {
  margin: 0;
  color: var(--lime);
  font-weight: 700;
}

.eyebrow {
  font-size: clamp(16px, 1.7vw, 29px);
}

h1 {
  margin: -4px 0;
  color: #b56ccc;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(42px, 5.5vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.07em;
  text-shadow: 3px 3px 0 #342041;
}

.subtitle {
  color: var(--cream);
  font-size: clamp(16px, 1.8vw, 28px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.hero-side {
  align-self: center;
  justify-self: end;
  padding-right: clamp(14px, 3vw, 48px);
  padding-left: clamp(14px, 2.3vw, 36px);
}

.board {
  display: grid;
  min-height: 0;
  padding: clamp(12px, 1.4vw, 22px);
  overflow: hidden;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(8px, 1.5vw, 28px);
  background: linear-gradient(150deg, rgba(12, 15, 10, 0.42), rgba(6, 7, 5, 0.32));
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime);
  cursor: pointer;
  font: inherit;
}

.board button {
  align-self: center;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(11px, 1.12vw, 18px);
  font-weight: 600;
  line-height: 1.16;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease, transform 120ms ease;
}

.board button:hover,
.board button:focus-visible,
.board button.playing {
  color: var(--lime-hot);
  outline: none;
  transform: translateX(4px);
}

.stop {
  display: block;
  padding: 12px 18px;
  border: 2px solid #c899d6;
  background: rgba(139, 85, 167, 0.24);
  color: #f1c9ff;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.stop:hover,
.stop:focus-visible {
  background: rgba(139, 85, 167, 0.54);
  color: #e6b7f2;
  outline: none;
  transform: scale(1.04);
}

@media (max-width: 850px) {
  .soundboard {
    grid-template-rows: 100px 1fr;
    padding: 7px;
  }

  .hero {
    grid-template-columns: 1fr 175px;
  }

  .hero-side {
    display: none;
  }

  .board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(16, minmax(0, 1fr));
    padding: 8px;
  }

  .board button {
    font-size: clamp(9px, 1.8vw, 13px);
    line-height: 1.06;
  }
}

@media (max-width: 520px) {
  .soundboard {
    grid-template-rows: 76px 1fr;
    gap: 4px;
    padding: 4px;
  }

  .hero {
    grid-template-columns: 1fr 110px;
  }

  .hero-copy {
    padding-left: 10px;
  }

  .eyebrow {
    font-size: 11px;
  }

  h1 {
    font-size: 35px;
  }

  .subtitle {
    font-size: 10px;
  }

  .board {
    padding: 5px;
  }

  .board button {
    font-size: clamp(7px, 2.1vw, 10px);
  }

}