/* Cargostrife - mobile guards. ONE file, linked LAST by every page.
 *
 * USER REPORT 2026-07-29, from a phone: "some screens need me to scroll right,
 * and the backgrounds are fixed and don't exist behind the text in the scrolled
 * version."
 *
 * BOTH SYMPTOMS ARE ONE BUG. Something is wider than the viewport, so the page
 * scrolls sideways - and the full-width bars (.nav, .bar) are width:100% of the
 * VIEWPORT, so once you scroll past that they simply run out and the text sits
 * on bare canvas. Fixing the overflow fixes the "missing background" for free;
 * painting the bars wider would only hide it.
 *
 * MEASURED CULPRITS, not guessed - from an audit of every page's own CSS:
 *   tables            guide 1, players 3, servers 3, recaps 1 - none of them
 *                     inside anything scrollable, and a table will not shrink
 *                     below its content width
 *   white-space:nowrap .pagehead h1, .pts, .hof .when, .sched .mono
 *   min-width:170px    talents #q
 *
 * Linked as a separate file rather than pasted into eight <style> blocks,
 * because eight copies of a rule is how the currency table and the tier tables
 * rotted. Load it AFTER the page's own <style> so these win.
 */

/* ---------------------------------------------------------------------------
 * THE GUARD. `overflow-x: clip` prevents sideways scrolling WITHOUT creating a
 * scroll container, so position:sticky navs keep working - `overflow-x: hidden`
 * here silently breaks them, which is why it is not used.
 * Belt and braces only: the real fixes are below. If this is ever the only
 * thing standing between the site and a horizontal scrollbar, something else is
 * genuinely too wide and should be found instead.
 * ------------------------------------------------------------------------- */
html { overflow-x: clip; }

/* The bars paint the viewport width. Should anything still overflow on a very
 * old browser that ignores `clip`, at least they cover what is scrolled to. */
.nav, .bar { min-width: 100%; }

@media (max-width: 760px) {

  /* TABLES SCROLL INSIDE THEMSELVES, never push the page wide. `display:block`
   * turns the table into a scrollable box; the page stays put. This is the
   * single biggest cause of sideways scroll on the site - 8 tables across 4
   * pages, none of them previously wrapped in anything. */
  table:not(.bs) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* .bs is the recap balance sheet: two short columns that already fit a phone,
   * and it right-aligns its figures with td:last-child. `display:block` shrinks
   * the internal table to its content, so the numbers would align to the middle
   * of the card instead of its edge - a fix that breaks the thing it touches. */
  table.bs { width: 100%; }

  /* A headline that cannot wrap WILL overflow a 360px phone. clamp() shrinks
   * the type but nowrap still forces one line, so release it. */
  .pagehead h1, .hero h1, h1 { white-space: normal; }

  /* Keep the nowrap where it earns its place (a reset time like "00 / 08 / 16"
   * reads badly broken) but let those cells shrink inside the scrolling table
   * rather than widening the page. */
  .sched .mono, .hof .when, .pts { white-space: nowrap; }

  /* The search box had a hard 170px floor; on a narrow screen it should give. */
  #q { min-width: 0; width: 100%; }

  /* A long unbroken string - a share code, a URL - is a classic silent
   * overflow. Nothing on the site should be able to push a row wider than the
   * screen just by not containing a space. */
  code, pre, .mono { overflow-wrap: anywhere; word-break: break-word; }

  /* ...but NEVER tabular numerics (user report 2026-07-30, from a phone: the
   * players XP column rendered 45,105 as six stacked lines). `anywhere` makes
   * every character a break point, which collapses the cell's MIN-CONTENT
   * width to one character - so instead of the table scrolling, auto layout
   * crushes the numeric column to 1ch and stacks the digits. A figure is one
   * word. The table already scrolls inside itself; let it. Higher specificity
   * than the blanket rule above, so order cannot silently flip the winner. */
  table .mono, td.mono, table code { overflow-wrap: normal; word-break: normal;
                                     white-space: nowrap; }

  /* Media never exceeds its column - EXCEPT the talent board. #tree is
   * width:100%/height:100% inside an overflow:hidden .treewrap and pans by
   * viewBox with touch-action:none, so `height:auto` here would collapse it.
   * The ID selector already wins on specificity; excluding it is insurance and,
   * more usefully, a note that the board must never be treated as flow media. */
  img, svg:not(#tree), canvas { max-width: 100%; height: auto; }

  /* Flex and grid children default to min-width:auto, which refuses to shrink
   * below their content - the usual reason a "responsive" row still overflows. */
  .nav-in > *, .live > *, .ctarow > *, .grid > *, .cls > * { min-width: 0; }

  /* Seven nav links plus a button wrap onto several rows on a phone and eat the
   * screen before any content is visible. Tighten rather than hide - a link a
   * visitor cannot find is worse than one that is small. */
  .nav-in { gap: 12px 14px; padding: 10px 14px; }
  .nav a.lnk { font-size: 13px; }
  .brand { font-size: 15.5px; }
  .brand small { display: none; }

  .wrap { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 430px) {
  /* At true phone width give the nav its own line so the Discord button stops
   * being pushed onto a row of its own with nothing beside it. */
  .nav .dc { margin-left: 0 !important; width: 100%; text-align: center; }
}