*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0F1117;
  --surface: #181b2a;
  --text: #fff;
  --subtext: #9b9bb4;
  --radius: 14px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

header {
  text-align: center;
  margin-bottom: 28px;
}

h1 {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px #ff4757, 0 0 40px #ff4757;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.subtitle {
  color: var(--subtext);
  font-size: 0.9rem;
  margin-top: 6px;
}

.now-playing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto;
  background: var(--surface);
  border: 1px solid #2e3255;
  border-radius: 50px;
  padding: 6px 18px;
  width: fit-content;
  font-size: 0.82rem;
  color: var(--subtext);
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #555;
  transition: background 0.2s;
}
.dot.active { background: #2ed573; box-shadow: 0 0 8px #2ed573; }

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.ctrl-btn {
  background: var(--surface);
  color: var(--text);
  border: 2px solid #2e3255;
  border-radius: 50px;
  padding: 7px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ctrl-btn:hover { border-color: #ff4757; color: #ff4757; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sound-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 10px;
  border: none;
  border-radius: var(--radius);
  font-size: 2.2rem;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s, box-shadow 0.1s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sound-btn span {
  font-size: 0.68rem;
  text-align: center;
  line-height: 1.2;
}

.sound-btn:nth-child(1)  { background: #ff4757; color: #fff; box-shadow: 0 6px 24px #ff475766; }
.sound-btn:nth-child(2)  { background: #2f3542; color: #a4b0be; box-shadow: 0 6px 24px #0005; border: 2px solid #3d4a5e; }
.sound-btn:nth-child(3)  { background: #1e1e2e; color: #e84393; box-shadow: 0 6px 24px #e8439344; border: 2px solid #e8439355; }
.sound-btn:nth-child(4)  { background: #FFE66D; color: #1a1a1a; box-shadow: 0 6px 24px #ffe66d44; }
.sound-btn:nth-child(5)  { background: #ff6b6b; color: #fff; box-shadow: 0 6px 24px #ff6b6b44; }
.sound-btn:nth-child(6)  { background: #2d3436; color: #fff; box-shadow: 0 6px 24px #000a; border: 2px solid #636e72; }
.sound-btn:nth-child(7)  { background: #e84393; color: #fff; box-shadow: 0 6px 24px #e8439344; }
.sound-btn:nth-child(8)  { background: #55efc4; color: #1a1a1a; box-shadow: 0 6px 24px #55efc444; }
.sound-btn:nth-child(9)  { background: #636e72; color: #fff; box-shadow: 0 6px 24px #00000055; }
.sound-btn:nth-child(10) { background: #2ed573; color: #1a1a1a; box-shadow: 0 6px 24px #2ed57344; }
.sound-btn:nth-child(11) { background: #ffa502; color: #1a1a1a; box-shadow: 0 6px 24px #ffa50244; }
.sound-btn:nth-child(12) { background: #3742fa; color: #fff; box-shadow: 0 6px 24px #3742fa44; }

.sound-btn:hover { transform: translateY(-3px) scale(1.04); }
.sound-btn:active { transform: scale(0.9); }

.sound-btn.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%  { transform: scale(0.9) rotate(-2deg); }
  25% { transform: scale(1.08) rotate(2deg); }
  50% { transform: scale(1.04) rotate(-1deg); }
  75% { transform: scale(1.02) rotate(1deg); }
  100%{ transform: scale(1) rotate(0); }
}

.sound-btn.flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.35);
  animation: flashOut 0.3s ease forwards;
}

@keyframes flashOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

footer {
  text-align: center;
  margin-top: 32px;
  color: var(--subtext);
  font-size: 0.75rem;
}

@media (max-width: 400px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}