/* g53online — shared mobile layout corrections
   ------------------------------------------------------------------
   Player feedback 2026-08-09 (id 16): "Mobile layout of each game is not
   appropriate". A Playwright audit at 390x844 found 24 of 53 games with real
   defects, and they shared one root cause rather than 24 separate ones:

     vertical  — .wrap has min-height:auto and simply grows, so
                 bar(43) + .stage + .dock exceeds the viewport. .dock is the
                 bulk of it (300-540px on card games) because it stacks
                 turn card + scorecard + match line + hint vertically.
                 That is what pushed the per-seat trick counter off screen
                 and produced feedback id 14 ("not visible who has how many
                 hands") on a scorecard that already existed.

     horizontal— .stage / boards render wider than the viewport.

   So this file compacts the dock and constrains the stage at mobile widths.
   It is injected site-wide by build_seo.py, after each game's own <style>,
   so these rules win on specificity-ties by source order.

   Rule of thumb when editing: never hide information, only reflow it.
   ------------------------------------------------------------------ */

@media (max-width: 820px) {

  /* ---- 1. nothing may exceed the viewport width ---- */
  html, body { max-width: 100%; overflow-x: hidden; }

  .wrap, .stage, .table, .board, canvas, #tray, .trayscroll {
    max-width: 100% !important;
  }
  .stage, .table { margin-left: auto; margin-right: auto; }

  /* boards are square-ish and canvas-driven — let them shrink to fit */
  .stage > canvas, .table > canvas, canvas#c, canvas#cv {
    max-width: 100% !important;
    height: auto !important;
  }

  /* horizontally scrollable strips stay scrollable rather than widening the page */
  #tray, .trayscroll, .trayhead, .locrow, #locRow, #kdiffRow {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* these strips must stay ONE row — wrapping is what pushed Kingdom's Journey
     strip below the fold rather than any single element being oversized */
  #locRow, #kdiffRow, .locrow {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 2px;
  }
  #locRow > *, #kdiffRow > *, .locrow > * { flex: 0 0 auto; }
  #locRow button, #kdiffRow button, .locrow button {
    padding: 5px 9px !important;
    font-size: .72rem !important;
    white-space: nowrap;
  }
  #locRow .lab, .locrow .lab { display: none; }   /* the strip's own caption is redundant on mobile */
  #tray::-webkit-scrollbar, .trayscroll::-webkit-scrollbar,
  #locRow::-webkit-scrollbar { display: none; }

  /* ---- 2. compact the dock so the HUD stays above the fold ---- */
  .dock {
    gap: 6px !important;
    padding: 6px 8px !important;
    font-size: .82rem;
  }

  /* the scorecard is the thing players were losing — keep it on one row */
  .dock .scorecard, .scorecard {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 6px !important;
    width: 100%;
    padding: 4px 6px !important;
  }
  .scorecard .scol, .scol {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px !important;
    text-align: center;
  }
  .scol .slab, .slab { font-size: .58rem !important; line-height: 1.15; display: block;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scol b, .scol .scv { font-size: .92rem !important; line-height: 1.1; }

  /* turn card + match line: tighter, side by side where they'll fit */
  .turncard { padding: 5px 8px !important; font-size: .8rem !important; }
  .dock .hint, #hint, .matchline, #mtxt {
    font-size: .72rem !important;
    line-height: 1.25;
    margin: 2px 0 !important;
  }

  /* secondary button rows wrap instead of forcing height */
  .secondary, .btnrow, .controls {
    display: flex; flex-wrap: wrap; gap: 6px !important;
    justify-content: center;
  }
  .secondary button, .btnrow button { padding: 6px 10px !important; font-size: .8rem !important; }

  /* objectives / journey strips scroll sideways rather than stacking tall */
  #objStrip, .obj {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  #objStrip .o, .obj .o { flex: 0 0 auto; font-size: .68rem; }

  /* ---- 2b. card tables: the single biggest vertical spend ---- */
  /* .table is sized off vh (clamp(430px,66vh,560px)); with bar + dock that
     overshoots the viewport on every trick-taking game. Trim it so the table
     AND the scorecard fit together. */
  .stage { padding: 8px !important; }
  .table {
    width: min(94vw, 520px) !important;
    height: clamp(280px, 42vh, 420px) !important;
  }
  .matchrow, .matchline { padding: 5px 9px !important; font-size: .7rem !important; }
  .turncard .tname { font-size: .9rem !important; }
  .turncard .tdot { width: 18px !important; height: 18px !important; }
  .secondary { margin-top: 0 !important; padding-top: 7px !important; }

  /* ---- 2c. Kingdom's build palette ----
     .menu is used only by Kingdom. It wraps to ~215px on a phone, which alone
     pushed the Journey strip and objectives off screen. A horizontal scroll
     strip is the normal mobile pattern for a builder palette. */
  .menu {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu > * { flex: 0 0 auto; }
  .menu button, .menu .b { padding: 5px 8px !important; font-size: .72rem !important; }

  /* ---- 3. trim the shell's own vertical spend ---- */
  .wrap { padding-top: 6px !important; padding-bottom: 8px !important; gap: 6px !important; }
  .stage { margin-bottom: 4px !important; }
  .bar { padding: 4px 8px !important; }

  /* ---- 4. tap targets: nothing interactive below 32px ---- */
  .suitbtn, .dock button, .secondary button, .bar button { min-height: 32px; }
}

/* very short viewports (landscape phones) — claw back more vertical space */
@media (max-height: 520px) {
  .dock { gap: 4px !important; padding: 4px 6px !important; }
  .dock .hint, #hint { display: none; }      /* rules text, not game state */
  .wrap { padding-top: 2px !important; }
}