/* Sound button in the header and the speaker button beside the question. */

.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sound {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; cursor: pointer;
}
.sound[aria-pressed="true"] { background: var(--sun); color: var(--ink); }
.sound[aria-pressed="true"] .off { display: none; }
.sound[aria-pressed="false"] .waves { display: none; }

.qrow { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.qrow .question { margin: 0; }
.replay {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; padding: 0; border: 4px solid var(--ink); border-radius: 999px;
  background: var(--sky); color: var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer;
}
.replay:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

@media (max-width: 560px) {
  .sound { width: 48px; height: 48px; }
  .replay { width: 56px; height: 56px; }
  .qrow { gap: 10px; margin: 2px 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .replay:active { transform: none; } }