@media (max-width: 1024px) {
  .vinyl-disc {
    opacity: 0.98;
  }
}

@media (max-width: 768px) {
  .settings-bar {
    top: 0.5rem;
    padding: 0.35rem 0.45rem;
  }

  .cover-wrapper {
    width: clamp(200px, 60vw, 240px);
  }

  .vinyl-disc {
    width: clamp(180px, 56vw, 210px);
  }

  .message-card {
    padding: clamp(1.25rem, 6vw, 1.75rem);
  }

  .paper {
    transform: rotate(-0.15deg);
    animation-duration: 6200ms;
  }

  .card-item {
    width: min(92vw, 560px);
  }
}

@media (max-width: 480px) {
  .quote-text {
    max-width: 88vw;
  }

  .volume-wrapper {
    display: none;
  }

  .controls-main {
    gap: 0.5rem;
  }

  .paper-fold {
    width: clamp(50px, 16vw, 60px);
    height: clamp(50px, 16vw, 60px);
  }

  .memory-overlay {
    transform: translateY(0);
    background: linear-gradient(
      to top,
      rgba(20, 16, 36, 0.96) 0%,
      rgba(20, 16, 36, 0.55) 70%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  #hearts-canvas,
  #floating-hearts,
  #floating-stars {
    display: none !important;
  }

  .vinyl-disc {
    animation: none !important;
  }

  .paper {
    animation: none !important;
    transform: rotate(0deg);
  }
}

@media (hover: none) {
  #cursor-dot,
  #cursor-ring {
    display: none !important;
  }

  body {
    cursor: default;
  }
}