/* BkL: слой эффектов (fx.js) и мелкая подсветка кнопки Play. Всё выключается при prefers-reduced-motion. */
.fx-layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.fx-layer > i { position: absolute; top: 0; border-radius: 2px; will-change: transform, opacity; }
.fx-layer > b { font-size: 52px; font-weight: 900; letter-spacing: .02em; color: var(--gold); text-shadow: 0 4px 24px rgba(0, 0, 0, .6), 0 0 28px rgba(255, 210, 0, .45); }
:root[data-theme="light"] .fx-layer > b { color: var(--red); text-shadow: 0 4px 20px rgba(255, 255, 255, .8); }

/* Play пульсирует, пока раунд не начат (на старте у табличек класс .pre) */
@keyframes playpulse { 0% { box-shadow: 0 0 0 0 rgba(229, 37, 45, .55); } 70% { box-shadow: 0 0 0 16px rgba(229, 37, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 37, 45, 0); } }
.melody:has(.opts.pre) .stage .playbtn { animation: playpulse 1.8s ease-out infinite; }

/* огни старта гонки: три огня загораются по секундам, на старте все зелёные */
.rlights { display: flex; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.rlights i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.rlights i.on { background: var(--red); box-shadow: 0 0 12px rgba(229, 37, 45, .7); }
.rlights.go i { background: #3ecf6a; box-shadow: 0 0 12px rgba(62, 207, 106, .7); }

@media (prefers-reduced-motion: reduce) {
  .melody:has(.opts.pre) .stage .playbtn { animation: none; }
  .rlights i { transition: none; }
}

/* киберпанк-подложка меню и раунда: ноты плывут вверх, снизу дышит неоновое свечение (бас из game.js);
   всё лежит под плитками и табличками (z-index 0), они остаются сплошными */
.fxnotes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fxnotes::before {
  content: ""; position: absolute; left: 50%; bottom: -30%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(var(--hue, 340) 100% 55% / .45), transparent 72%);
  transform: translateX(-50%) scale(calc(.75 + var(--bass, 0) * .5)); opacity: calc(.22 + var(--bass, 0) * .6); will-change: transform, opacity;
}
.fxnotes i {
  position: absolute; bottom: -12%; font-style: normal; font-weight: 700; line-height: 1; color: hsl(var(--hue, 340) 100% 66%);
  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor; opacity: 0; animation: noteup linear infinite; will-change: transform, opacity;
}
@keyframes noteup {
  0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
  12% { opacity: .38; }
  85% { opacity: .3; }
  100% { transform: translateY(-115vh) rotate(12deg); opacity: 0; }
}
:root[data-theme="light"] .fxnotes i { text-shadow: none; color: hsl(var(--hue, 340) 85% 45%); }
:root[data-theme="light"] .fxnotes::before { opacity: calc(.12 + var(--bass, 0) * .3); }
@media (prefers-reduced-motion: reduce) {
  .fxnotes i { animation: none; bottom: var(--y, 20%); opacity: .13; text-shadow: none; }
  .fxnotes::before { transform: translateX(-50%); opacity: .2; }
}