/* Base responsive enhancements */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { max-width: 100%; overflow-x: hidden; }

img, video, canvas, svg { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }

table { width: 100%; border-collapse: collapse; }
th, td { word-break: break-word; overflow-wrap: anywhere; }

a { word-break: break-word; }

/* Try to keep the header/banner image fluid */
td[valign="top"] img { height: auto; }

/* Ensure main containers span small screens */
.bodyline, .forumline { width: 100%; }

/* Typographic scaling for small screens */
@media (max-width: 768px) {
  body { padding: 0 8px; }
  .maintitle { font-size: clamp(18px, 6vw, 22px); line-height: 1.25; }
  th, td { padding: 8px !important; }
  .nav { white-space: normal; }
  marquee { white-space: normal; }
  /* Soften oversized inline font in marquee blocks on phones */
  marquee * { font-size: clamp(14px, 5.5vw, 18px) !important; }
}

@media (max-width: 480px) {
  .gensmall, .genmed, .gen { font-size: clamp(12px, 4vw, 16px); }
}

/* Force media to scale to container width */
video, iframe, embed, object {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}

/* Override legacy nowrap attributes that cause overflow */
[nowrap], th[nowrap], td[nowrap] { white-space: normal !important; }

@media (max-width: 768px) {
  /* Allow legacy tables to scroll instead of breaking layout */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Let flex rows wrap to new lines on small screens */
  [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="display: flex"] > * { min-width: 0; }
}