/* mobile-fixes.css — prevent right-side cutting on result pages.
   Targets shillong, khanapara, night, juwai, common, dream, previous etc. */

/* Allow grid/flex children to actually shrink (intrinsic min-width was forcing overflow) */
.big-rounds > *,
.main-grid > *,
.tabs,
.tabs > *,
.faq-q,
.result-header,
.result-header > *,
.tab-content .card > div > div,
[style*="grid-template-columns"] > * {
  min-width: 0;
}

/* Prevent any direct child of body or main wrappers from forcing horizontal scroll */
body > *,
main > *,
.main-grid > main > * {
  max-width: 100vw;
}

/* The chart SVG had min-width:480px inline — override on small screens so it fits */
@media (max-width: 540px) {
  section svg[role="img"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Tighter mobile breakpoint covering shillong/khanapara/night which lacked it */
@media (max-width: 600px) {
  /* Big result card */
  .big-result {
    padding: 1.25rem !important;
  }
  .big-rounds {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .big-round {
    padding: 1.1rem !important;
  }
  .big-number {
    font-size: 3.4rem !important;
  }
  .big-number.empty {
    font-size: 2.2rem !important;
  }
  .big-round-time {
    font-size: 0.7rem !important;
  }

  /* Page-hero and main-grid padding */
  .page-hero {
    padding: 1.75rem 1rem 1.25rem !important;
  }
  .page-hero h1 {
    font-size: 1.45rem !important;
  }
  .main-grid {
    padding: 1.25rem 1rem !important;
    gap: 1rem !important;
  }
  .container {
    padding: 0 1rem !important;
  }

  /* Inline-styled max-width:1100px wrappers (used by all result pages) */
  div[style*="max-width:1100px"],
  div[style*="max-width: 1100px"],
  section[style*="max-width:1200px"],
  section[style*="max-width: 1200px"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Info blocks tighter */
  .info-block {
    padding: 1.1rem !important;
  }
  .info-block h2,
  .info-block h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Cards tighter */
  .card {
    padding: 1rem !important;
  }

  /* Legal banner — make button wrap nicely so it never pushes past edge */
  #legal-banner {
    padding: 0.55rem 1rem !important;
    gap: 0.6rem !important;
    font-size: 0.7rem !important;
  }

  /* Nav padding */
  nav {
    padding: 0 1rem !important;
  }

  /* Footer */
  footer {
    padding: 1.5rem 1rem !important;
  }
  footer a {
    display: inline-block;
    margin: 0.2rem 0.4rem !important;
  }

  /* Tables: ensure horizontal scroll wrapper actually works */
  div[style*="overflow-x:auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Common-numbers tab grids — keep 2 cols but reduce padding */
  .tab-content .card div[style*="grid-template-columns:1fr 1fr"],
  .tab-content .card div[style*="grid-template-columns: 1fr 1fr"] {
    gap: 0.6rem !important;
  }

  /* The "All Teer Results Today" cross-counter strip — let it use 2 cols */
  div[style*="repeat(auto-fit,minmax(140px,1fr))"],
  div[style*="repeat(auto-fit, minmax(140px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Quick facts grid */
  div[style*="repeat(auto-fill,minmax(210px,1fr))"],
  div[style*="repeat(auto-fill, minmax(210px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Monthly archive grid */
  div[style*="repeat(auto-fill,minmax(190px,1fr))"],
  div[style*="repeat(auto-fill, minmax(190px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Related reading grid */
  div[style*="repeat(auto-fit,minmax(220px,1fr))"],
  div[style*="repeat(auto-fit, minmax(220px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
}

/* Very narrow phones (≤380px) */
@media (max-width: 380px) {
  .big-number {
    font-size: 3rem !important;
  }
  .big-number.empty {
    font-size: 2rem !important;
  }
  .big-result {
    padding: 1rem !important;
  }
  .info-block,
  .card {
    padding: 0.9rem !important;
  }
  .page-hero {
    padding: 1.5rem 0.75rem 1rem !important;
  }
  .main-grid,
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  div[style*="max-width:1100px"],
  div[style*="max-width: 1100px"],
  section[style*="max-width:1200px"],
  section[style*="max-width: 1200px"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Stack quick-facts/monthly grids to single column on tiny screens */
  div[style*="repeat(auto-fit,minmax(140px,1fr))"],
  div[style*="repeat(auto-fit, minmax(140px, 1fr))"],
  div[style*="repeat(auto-fill,minmax(160px,1fr))"],
  div[style*="repeat(auto-fill, minmax(160px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Make sure long URLs / unbroken text never overflow paragraphs */
.info-block p,
.faq-ans,
td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}