:root {
  --bg: #0f1724;
  --surface: #071025;
  --muted: rgba(230, 238, 246, .72);
  --text: #e6eef6;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #071025);
  color: var(--text)
}

/* Page container: centered, no giant white pill */
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px
}

.title {
  margin: 0 0 18px 0;
  font-size: clamp(20px, 4vw, 32px);
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35)
}

.buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 920px
}

/* Thick, pill buttons */
.sound-btn {
  border: none;
  color: white;
  padding: 20px 36px;
  border-radius: 999px;
  font-size: 18px;
  min-width: 150px;
  min-height: 64px;
  font-weight: 800;
  letter-spacing: .6px;
  cursor: pointer;
  box-shadow: 0 14px 36px rgba(2, 6, 23, .55), inset 0 -8px 18px rgba(0, 0, 0, .12);
  transition: transform .12s cubic-bezier(.2, .9, .3, 1), box-shadow .12s, filter .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25)
}

.sound-btn:active {
  transform: translateY(4px) scale(.985);
  box-shadow: 0 8px 22px rgba(2, 6, 23, .52);
  filter: brightness(.98)
}

.sound-btn:focus {
  outline: 4px solid rgba(255, 255, 255, .08);
  outline-offset: 6px
}

/* Colors */
.sound-btn[data-sound$="/correct.wav"],
.sound-btn[data-sound$="correct.wav"] {
  background: linear-gradient(180deg, #2dd4bf, #10b981)
}

.sound-btn[data-sound$="/incorrect.wav"],
.sound-btn[data-sound$="incorrect.wav"] {
  background: linear-gradient(180deg, #fb7185, #ef4444)
}

.sound-btn[data-sound$="/babing.wav"],
.sound-btn[data-sound$="babing.wav"] {
  background: linear-gradient(180deg, #60a5fa, #2563eb)
}

.sound-btn[data-sound$="/fanfare.wav"],
.sound-btn[data-sound$="fanfare.wav"] {
  background: linear-gradient(180deg, #ffb662, #ffa60d);
}

.sound-btn[data-sound$="/mi-bombo.wav"],
.sound-btn[data-sound$="mi-bombo.wav"] {
  background: linear-gradient(180deg, #fc4dd6, #f50bde);
}

.hint {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px
}

@media (max-width:640px) {
  .buttons {
    gap: 12px
  }

  .sound-btn {
    width: 100%;
    min-width: 0;
    padding: 18px;
    border-radius: 14px
  }
}