sound-board {
    display: block;
    width: 50%;
}

.soundboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  padding: 2rem;
}

.sb-tile {
  background: var(--background);
  border: 1px solid var(--prim-color);
  border-radius: 16px;
  padding: 16px;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-rows: 1fr auto auto;     /* title | icon | key */
  align-items: center;
  justify-items: center;                 /* center everything by default */
  cursor: pointer;
  transition: border-width .08s ease, background-color .18s ease, transform .08s ease;
  user-select: none;
  outline: none;

  /* Make the tile a container so the icon can size relative to its width */
  container-type: inline-size;
}

.sb-tile:hover { border-width: 2px; }
.sb-tile:active { background-color: var(--prim-color); }

.sb-title {
  color: var(--prim-color);
  letter-spacing: .04em;
  text-transform: lowercase;
  font-variant: small-caps;
  width: 100%;
}

.sb-key {
  color: var(--gray-500);
  opacity: .9;
  width: 100%;
}

/* Tile while audio is playing */
.sb-tile.playing {
  background: var(--prim-color);
  color: #fff;
  border-color: var(--prim-color);
}

.sb-tile.playing .sb-title { color: #fff; }
.sb-tile.playing .sb-key   { color: rgba(255,255,255,.9); }
.sb-tile.playing .sb-icon  { background-color: #fff; }

/* Keep the thicker border on hover even when playing */
.sb-tile.playing:hover { border-width: 2px; }

.sb-header {
  margin: 0 0 10px 2px;
  color: var(--text-color);
  font: 700 1.05rem/1.2 system-ui, -apple-system, Segoe UI, Roboto;
}

/* Focus ring for accessibility */
.sb-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(141,90,225,.25);
}

.sb-icon {
  /* Size: exactly 75% of the pad width.
     Use 75cqi (container query) with a 75% fallback for older browsers. */
  width: 60cqi;
  max-width: 60%;
  aspect-ratio: 1 / 1;

  background-color: var(--prim-color);
  display: block;

  /* Center it in the middle track */
  align-self: center;
  justify-self: center;

  /* Mask the SVG (cross-browser) */
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

@media (max-width: 1000px) {
    sound-board {
        width: 100%;
    }
}