* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f0c08; color: #f5f0e8; font-family: 'DM Sans', sans-serif; min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; }
#root { min-height: 100vh; }
.sleeve-thumb:hover .hover-overlay { opacity: 1 !important; }

/* ── Mobile layout overrides ─────────────────────────────── */
@media (max-width: 600px) {
  /* Hero */
  .df-hero              { grid-template-columns: 1fr !important; min-height: unset !important; }
  .df-hero-sleeve       { width: 340px; height: 340px; max-width: calc(100vw - 24px); order: -1; margin-left: auto; margin-right: auto; }
  .df-hero-copy         { padding: 20px 16px 24px !important; }
  .df-hero-title        { font-size: 36px !important; }
  .df-hero-desc         { font-size: 13px !important; }
  /* Deep cuts */
  .df-deepcuts          { padding: 20px 12px 24px !important; }
  .df-deepcuts-grid     { grid-template-columns: 1fr !important; }
  /* Listening paths */
  .df-paths             { padding: 20px 12px 24px !important; }
  .df-paths-grid        { grid-template-columns: repeat(2,1fr) !important; }
  /* Header */
  .df-header        { padding: 16px 16px 14px !important; }
  .df-logo          { font-size: 28px !important; }
  /* Filter bars */
  .df-filterbar     { padding: 8px 12px !important; }
  /* Search */
  .df-searchbar     { padding: 8px 12px 10px !important; }
  /* Crate label row */
  .df-crate-header  { padding: 18px 12px 10px !important; }
  /* Card grid: 3 tight columns on phones */
  .df-grid          { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; padding: 0 0 40px !important; }

  /* Detail modal */
  .df-detail-outer { position: fixed; inset: 0; z-index: 100; }

  .df-detail-panel  { margin-top: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; }
  /* Share / Close buttons row */
  .df-detail-actions { top: 0 !important; right: 0 !important; left: 0 !important;
    display: flex !important; width: 100% !important;
    border-bottom: 1px solid #2e2820; background: #0f0c08; padding: 10px 12px;
    position: sticky !important; z-index: 110; }
  .df-detail-actions button { flex: 1; font-size: 10px !important; padding: 10px 8px !important; }
  /* Hero: stack image above text */
  .df-detail-hero   { grid-template-columns: 1fr !important; }
  .df-detail-cover  { width: 340px; height: 340px; max-width: calc(100vw - 24px); margin-left: auto; margin-right: auto; }
  .df-detail-meta   { padding: 20px 16px !important; border-left: none !important; border-top: 1px solid #2e2820; }
  .df-artist-name   { font-size: 40px !important; }
  .df-track-title   { font-size: 22px !important; margin-bottom: 16px !important; }
  .df-meta-grid     { grid-template-columns: 1fr 1fr !important; }
  /* Video */
  /* Story / Questions: stack vertically */
  .df-bottom-grid   { grid-template-columns: 1fr !important; }
  .df-story-col     { padding: 20px 16px !important; border-right: none !important; border-bottom: 1px solid #2e2820; }
  .df-questions-col { padding: 20px 16px !important; }
  /* Related records: 2 columns on mobile */
  .df-related-grid { grid-template-columns: repeat(2,1fr) !important; }
  .df-detail-panel [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* World map: full bleed on mobile, no side padding */
  .df-world-map-wrap { padding: 16px 0 16px !important; }
  .df-world-map-wrap > div { padding: 0 12px !important; }
  .df-world-map-svg { min-height: 220px !important; }
  .df-quiz-card { padding: 16px !important; }
  /* Quiz answer buttons: 44px min tap target on mobile */
  .df-quiz-card button[disabled], .df-quiz-card button:not([aria-label]) { min-height: 44px !important; padding: 10px 14px !important; }
}
  @media (min-width: 600px) { .df-list-subgenre { display: block !important; } }
  .df-modal-close-bar { display: flex; }
  .df-filter-mobile   { display: block; }
  .df-filter-desktop { display: none; }
  @media (min-width: 768px) {
    .df-filter-mobile   { display: none; }
    .df-filter-desktop  { display: block; }
    .df-modal-close-bar { display: none; }
  }

  /* Cover Flow */
  .df-cflow-wrap {
    position: relative; height: 420px;
    display: flex; align-items: center; justify-content: center;
    background: #0a0807;
    border-top: 1px solid #1a1714; border-bottom: 1px solid #1a1714;
    overflow: hidden;
  }
  .df-cflow-card {
    position: absolute;
    width: 340px; height: 340px;
    max-width: calc(100vw - 32px); max-height: calc(100vw - 32px);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94), opacity .4s ease, box-shadow .4s ease;
    border-radius: 2px;
    will-change: transform;
  }
  .df-cflow-card img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 2px; display: block;
  }