/* Mobile broadcast HUD: the top band.
 *
 * The overlay is authored at 1920x1080 and letterboxed (scale.js), which leaves a
 * tiny centred band on a phone. On phones we break the HUD out of that scaled
 * canvas into a real full-width TOP BAND instead: the Pot stack (amount / board /
 * phase) on the left, then the seats as a horizontally-scrolling row. The two
 * blocks are shrunk with `zoom` rather than the stage transform, so the band stays
 * in ordinary viewport coordinates.
 *
 * Shared by /watch and /agent-coach. Each page adds its own bottom sheet (the
 * status bar / the coaching dock) and, on watch, the caption -- those are NOT here.
 * The seat-row auto-scroll lives in hud.js (guarded on flex-direction:row, which
 * only this file sets), so it activates wherever this stylesheet is linked.
 */
@media (max-width: 760px) {
  :root { --m-zoom: 0.5; }   /* how far the design-px HUD shrinks on a phone; tune here */

  /* The seat row scrolls horizontally inside .hud-right; the PAGE must never. */
  html, body { overflow-x: hidden; }

  /* Out of the letterbox: full-width band pinned to the top of the stage. */
  #stage.hud-stage {
    transform: none !important;
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 6px 4px;
  }

  /* Pot stack: amount over board over phase (its existing column order). */
  .hud-left {
    position: static;
    left: auto; top: auto;
    zoom: var(--m-zoom);
    flex: 0 0 auto;
    gap: 8px;
  }
  /* The board reads at full size on the wide desktop rail, but there it would eat
     most of a phone's width and leave the seats no room. Shrink it (same aspect). */
  .card--board { --w: 58px; --h: 81px; }

  /* Seats: a horizontal, scrolling row instead of the desktop vertical rail. Its
     top aligns with the Pot amount (both flex-start against the band's top).
     position:relative so it is the seats' offset parent -- hud.js scrolls the
     acting seat to the front by offsetLeft. padding-bottom reserves the room the
     acting/winner seat drops into. */
  .hud-right {
    position: relative;
    right: auto; top: auto;
    transform: none !important;
    zoom: var(--m-zoom);
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    margin-top: 0;
    padding-bottom: 46px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    scrollbar-width: none;
  }
  .hud-right::-webkit-scrollbar { display: none; }

  /* Turn / win indication on mobile: the seat drops DOWN out of the row rather
     than stepping left (there is no "toward the table" on a top band). It lands
     inside the reserved padding-bottom above, so the scroll box never clips it. */
  .seat--acting,
  .seat--winner { transform: translateY(30px); }
}