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

:root {
  --bg: #080810;
  --surface: #0e0e1a;
  --surface2: #14141f;
  --accent: #8B0000;
  --purple: #4a0080;
  --red: #cc0033;
  --text: #d4d4e8;
  --subtext: #666688;
  --radius: 12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: radial-gradient(ellipse at top, #1a0033 0%, #080810 60%);
}

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

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

.skull-row {
  font-size: 1.4rem;
  letter-spacing: 12px;
  margin-bottom: 8px;
  opacity: 0.5;
}

h1 {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
  color: #c0002a;
  text-shadow: 0 0 30px #8B000099, 0 0 60px #4a008066;
  letter-spacing: 3px;
  text-transform: uppercase;
}

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

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

.ctrl-btn {
  background: var(--surface2);
  color: #8888aa;
  border: 1px solid #2a2a3a;
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ctrl-btn:hover { border-color: var(--red); color: var(--red); }

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

.sound-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 10px;
  border: 1px solid #1e1e2e;
  border-radius: var(--radius);
  font-size: 2rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  background: var(--surface);
}

.sound-btn span {
  font-size: 0.65rem;
  text-align: center;
  color: #8888aa;
  line-height: 1.2;
}

.sound-btn:nth-child(1)  { border-color: #3d0020; }
.sound-btn:nth-child(2)  { border-color: #1e002a; }
.sound-btn:nth-child(3)  { border-color: #2a001a; }
.sound-btn:nth-child(4)  { border-color: #1a0040; }
.sound-btn:nth-child(5)  { border-color: #280028; }
.sound-btn:nth-child(6)  { border-color: #0d0d1a; }
.sound-btn:nth-child(7)  { border-color: #3a0010; }
.sound-btn:nth-child(8)  { border-color: #1a0030; }
.sound-btn:nth-child(9)  { border-color: #200020; }
.sound-btn:nth-child(10) { border-color: #1e0010; }
.sound-btn:nth-child(11) { border-color: #150015; }
.sound-btn:nth-child(12) { border-color: #100020; }

.sound-btn:hover {
  border-color: #8B0000;
  box-shadow: 0 0 20px #8B000055, inset 0 0 20px #8B000011;
  transform: translateY(-3px);
}
.sound-btn:hover span { color: #cc4466; }

.sound-btn:active { transform: scale(0.93); }

/* Flicker animation for some buttons */
.sound-btn.flicker {
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96%           { opacity: 0.5; }
  97%           { opacity: 1; }
  98%           { opacity: 0.3; }
  99%           { opacity: 0.9; }
}

.sound-btn.played {
  animation: darkPulse 0.5s ease;
}

@keyframes darkPulse {
  0%   { box-shadow: 0 0 0 0 #8B000000; transform: scale(0.93); }
  50%  { box-shadow: 0 0 40px 10px #8B000066; transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 #8B000000; transform: scale(1); }
}

footer {
  text-align: center;
  margin-top: 32px;
  color: #333344;
  font-size: 0.72rem;
}

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