/* Responsive overrides for mobile layout issues */
html, body { overflow-x: hidden; }

/* Make atmospheric backdrop responsive rather than fixed 1000px */
.atmosphere-backdrop { width: min(1000px, 100vw); left: 50%; transform: translateX(-50%); }

/* Allow inputs/buttons to shrink properly inside flex containers */
#searchForm { flex-wrap: wrap; }
#searchForm > .relative { flex: 1 1 auto; min-width: 0; }
#searchForm input { min-width: 0; width: 100%; }
#searchForm button#submitBtn { flex: 0 0 auto; min-width: 64px; }

/* Override problematic minimum widths inside tracker card */
#trackerCard [class*="min-w-[280px]"],
#trackerCard [class*="min-w-[90px]"] {
  min-width: 0 !important;
}

/* Ensure any fixed 1000px width falls back to viewport on small screens */
[class*="w-[1000px]"] { width: min(1000px, 100vw) !important; }

/* General image/svg safeguards */
img, svg { max-width: 100%; height: auto; }

/* Responsive typography and padding adjustments */
@media (max-width: 1024px) {
  .max-w-4xl { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 768px) {
  .text-6xl { font-size: 2.25rem; }
  .md\:text-8xl { font-size: 3rem; }
  .px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
  main { padding-left: 0.75rem; padding-right: 0.75rem; }
  #trackerCard { padding: 1rem; }
  .rounded-2xl { border-radius: 0.75rem; }
  .w-24 { width: 5.5rem; height: 5.5rem; }
  .sm\:w-28 { width: 6rem; height: 6rem; }
}

@media (max-width: 480px) {
  .text-6xl { font-size: 1.75rem; }
  .md\:text-8xl { font-size: 2.4rem; }
  #submitBtn { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-4 { padding-left: 0.5rem; padding-right: 0.5rem; }
}