*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139,92,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(6,182,212,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 70% at 50% 90%, rgba(139,92,246,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 30% 50%, rgba(250,50,150,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: ambientDrift 20s ease-in-out infinite alternate;
}
@keyframes ambientDrift {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

::selection { background: rgba(139,92,246,.3); color: #fff; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button, a, .btn, .content-card, .server-btn, .genre-tab,
.studio-btn, .row-arrow, .back-to-top, select, .badge {
  touch-action: manipulation;
}

button:disabled, .btn:disabled, .server-btn:disabled, .genre-tab:disabled,
select:disabled, textarea:disabled, input:disabled {
  opacity: .35; cursor: not-allowed; pointer-events: none; filter: grayscale(.5);
}

button:active, .btn:active, .play-btn:active, .genre-tab:active {
  transform: scale(var(--press-scale)) !important;
  transition-duration: var(--dur-fast) !important;
}

nav, .back-to-top, .toast, .continue-bar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.back-to-top, .toast { bottom: max(24px, env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .content-card:hover { transform: none; }
  body::before { animation: none; }
}