/* =====================================================================
   TGL — LGENX-LYRICS MOBILE OPTIMIZATION
   Optimized padding for lgenx-lyrics element across all devices
   Focuses on mobile view for better readability & viewport usage
   Does NOT affect ads or other editorial surfaces
   ===================================================================== */

/* ---- DESKTOP (>= 1200px) -------------------------------------------- */
@media (min-width: 1200px) {
  .lgenx-lyrics {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ---- TABLET (769px - 1199px) ----------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .lgenx-lyrics {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---- MOBILE (768px - 768px) ------------------------------------------- */
@media (max-width: 768px) {
  /* Optimal mobile padding: better readability, no text cutoff, efficient use of viewport */
  .lgenx-lyrics {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---- SMALL PHONE (< 430px) -------------------------------------------- */
@media (max-width: 430px) {
  /* Tighter padding on smallest screens while maintaining readability */
  .lgenx-lyrics {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =====================================================================
   Notes:
   - No changes to ads CSS, editorial surface positioning, or layout
   - Only affects padding on .lgenx-lyrics element
   - Mobile-first approach optimizes for readability on phones
   - Inherits line-height and font-size from parent (no changes)
   - Loaded last so it wins the cascade without disrupting others
   ===================================================================== */