.button {
  position: relative;
  display: grid;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: none;
  cursor: pointer;
  color: white;
  transition: background 150ms ease;
}

.button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.button:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Icon positioning - both occupy same grid cell */
.playIcon,
.pauseIcon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
}

/* Show/hide icons based on paused state using data attributes */
.button[data-paused] .playIcon {
  opacity: 1;
}

.button[data-paused] .pauseIcon {
  opacity: 0;
}

.button:not([data-paused]) .playIcon {
  opacity: 0;
}

.button:not([data-paused]) .pauseIcon {
  opacity: 1;
}