/*
 * Blue Wave Baseball — MOBILE IN-GAME LAYOUT (v1)
 * ===============================================
 * Governing rule:  PORTRAIT -> stacked one-view layout.
 *                  LANDSCAPE -> the desktop layout.
 *
 * Width alone cannot express that: a landscape phone (844x390) is WIDER than a
 * portrait tablet (768x1024) but needs the opposite treatment. So every block
 * here is gated on `orientation`, never on width alone.
 *
 * This file is loaded LAST and contains no desktop rules. Deleting the <link>
 * in index.html restores the previous behaviour exactly.
 *
 * Depends on two structural changes made elsewhere (both desktop-neutral):
 *   - index.html : #game-hud is a SIBLING of #game-field, after it, inside
 *                  .game-shell. Portrait puts it in flow with `order: -1`.
 *   - career.js  : .mr-layer is appended to .game-shell, not #game-field.
 *   - script.js  : setGameVisible() toggles `body.in-game`.
 */

/* ================================================================== *
 * BLOCK A — PORTRAIT (phones and tablets, up to 920px)
 *
 * The whole game becomes one locked screen:
 *
 *   [ account strip ]  fixed bar, folded in as a top strip
 *   [ HUD band      ]  in flow, order: -1
 *   [ field         ]  flex: 1 — takes everything that is left
 *
 * Before this, the field was a fixed-height box with the HUD painted on top
 * of it: the pitch type and the hit call rendered underneath the scoreboard,
 * and 144px (phone) to 565px (iPad portrait) sat dead below the field.
 * ================================================================== */

@media (max-width: 920px) and (orientation: portrait) {

  :root {
    --mob-safe-top: env(safe-area-inset-top, 0px);
    --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mob-chip-h: 2rem;
    --mob-topbar: calc(var(--mob-safe-top) + var(--mob-chip-h) + 0.75rem);
  }

  /* ---- lock the game to exactly one screen ---------------------- */

  .game-section {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .game-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* The field is no longer a fixed box — it takes whatever the strip and
     the HUD band leave. alignPlayersToField() recomputes the mound, batter
     height and release point from clientHeight via its ResizeObserver, so
     the actors follow on their own. */
  .game-field {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* ---- account chips become the top strip ----------------------- *
   * Scoped to body.in-game so the menu and the career hub keep the
   * floating corner chips they have today.                          */

  body.in-game .game-shell {
    padding-top: var(--mob-topbar);
  }

  .account-bar {
    inset: 0 0 auto 0;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: var(--mob-topbar);
    padding: var(--mob-safe-top) 0.6rem 0;
    border-bottom: 1px solid rgba(60, 181, 234, 0.45);
    background: rgba(3, 39, 65, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .account-bar .account-chip {
    display: inline-flex;
    align-items: center;
    height: var(--mob-chip-h);
    padding-block: 0;
    white-space: nowrap;
  }

  /* The wordmark duplicated the menu branding and collided with the chips. */
  body.in-game .game-title-mark {
    display: none;
  }

  /* ---- menu: pinned chrome, scrolling view ---------------------- *
   * 282px of a 664px screen was chrome before any content: brand 61px,
   * a 45px "Choose how you want to play." line, and 156px of mode tiles
   * (Career and Leaderboard wrapped to two lines). The panel becomes a
   * flex column - tiles pinned at its top, confirm bar pinned at its
   * bottom, and whichever view is showing scrolls between them.      */

  .pregame-menu {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding: var(--mob-topbar) 0.6rem 0;
  }

  .menu-brand {
    flex: none;
    margin-bottom: 0.4rem;
    padding-top: 0.3rem;
  }

  .menu-brand h1 {
    font-size: 1.5rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* "Baseball lives here" - the wordmark carries it on a phone. */
  .menu-brand p { display: none; }

  .setup-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Redundant next to three labelled tiles, and it cost 45px. */
  .setup-heading { display: none; }

  .mode-tiles {
    flex: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.5rem;
  }

  /* styles.css spans this across a 2-column grid; here there are 3 across. */
  .mode-tile:first-child { grid-column: auto; }

  .mode-tile {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    /* Fixed floor so the row height stays predictable even if a label
       ever does wrap. */
    min-height: 3.3rem;
    padding: 0.35rem 0.15rem;
    text-align: center;
  }

  .mode-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.54rem;
  }

  .mode-copy strong {
    /* Sized so "Batting Practice" stays on one line from 360px up. */
    font-size: clamp(0.64rem, 2.7vw, 0.8rem);
    line-height: 1.15;
  }

  .mode-copy small { display: none; }

  /* setMenuView() in script.js shows exactly one of these at a time;
     whichever it is becomes the scrolling body of the panel. */
  #batting-practice-settings,
  #career-style-panel,
  #career-panel,
  #leaderboard-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Pinned bottom bar. Batting Practice was 1546px tall, so Confirm sat
     ~880px below the fold; setMenuView already hides this in the career
     hub and leaderboard views. */
  .setup-actions {
    flex: none;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.45rem 0.6rem calc(0.45rem + var(--mob-safe-bottom));
    border-top: 1px solid rgba(243, 199, 68, 0.34);
    background: rgba(2, 42, 78, 0.98);
  }

  .setup-actions p {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hidden until you have entered the game once; the auto column then
     collapses and Confirm takes the full width. */
  .menu-back-button {
    grid-column: 1;
    grid-row: 2;
    width: auto;
  }

  .confirm-selection {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    gap: 0.4rem;
  }

  .menu-back-button,
  .confirm-selection {
    min-height: 2.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* ---- HUD: overlay -> band, one row of five -------------------- */

  .game-hud {
    position: static;
    order: -1;
    flex: none;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  /* undo the two-row 6-column phone grid in styles.css */
  .game-hud > div:nth-child(-n + 3),
  .game-hud > div:nth-child(n + 4) {
    grid-column: auto;
  }

  .game-hud > div {
    /* Labels top-aligned, not centred: the heat cell has three stacked
       children to everyone else's two, so centring floats its label up. */
    justify-content: flex-start;
    min-height: clamp(3.1rem, 9vw, 4rem);
    gap: 0;
    padding: 0.32rem 0.18rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .game-hud > div:last-child {
    border-right: 0;
  }

  .game-hud span {
    font-size: clamp(0.56rem, 2.1vw, 0.75rem);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .game-hud strong {
    font-size: clamp(1.15rem, 4.4vw, 2rem);
    line-height: 1.05;
  }

  /* Heat stacks like the other four cells instead of sitting label-beside-value,
     which does not fit a fifth of a phone width. */
  .game-hud .heat-hud {
    grid-template-columns: minmax(0, 1fr);
    place-content: start center;
    justify-items: center;
    column-gap: 0;
  }

  .heat-hud small {
    width: clamp(2.6rem, 11vw, 5.5rem);
    height: 0.34rem;
    margin-top: 0.14rem;
  }

  /* ---- callouts, now that the top of the field is free ---------- */

  .pitch-telegraph {
    top: 6%;
    min-width: 0;
    padding: 0.4rem 0.75rem;
  }

  .pitch-telegraph strong { font-size: clamp(1rem, 4vw, 1.4rem); }
  .pitch-telegraph small { font-size: clamp(0.62rem, 2.4vw, 0.78rem); }

  .result-call {
    top: 20%;
    font-size: clamp(2.2rem, 9vw, 4rem);
  }

  /* ---- bottom controls clear the home indicator ----------------- */

  .game-controls { bottom: calc(1rem + var(--mob-safe-bottom)); }
  .sound-toggle  { bottom: calc(0.75rem + var(--mob-safe-bottom)); }
  .roster-toggle { bottom: calc(0.75rem + var(--mob-safe-bottom)); }
  /* Clears the swing button, which is 59px tall here (the <=560px shrink to
     51px does not apply to tablets). */
  .tbar          { bottom: calc(5.2rem + var(--mob-safe-bottom)); }

  /* ---- match results: full screen, not a 520px window ----------- *
   * It used to be appended inside #game-field with inset: 0, so ~550px of
   * panel was clipped top and bottom. Now it is in .game-shell and goes
   * fixed here, covering the strip and the band too.                */

  .mr-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    padding: calc(var(--mob-safe-top) + 0.6rem) 0.6rem calc(var(--mob-safe-bottom) + 0.6rem);
  }

  .mr-panel {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 0.85rem;
  }

  .mr-head h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .mr-totals { gap: 0.45rem; margin-top: 0.7rem; }
  .mr-total { padding: 0.45rem 0.4rem; }
  .mr-total strong { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  .mr-players { margin-top: 0.7rem; }
  .mr-row { padding: 0.38rem 0.5rem; }
  .mr-league { margin: 0.55rem 0 0; font-size: 0.68rem; }
  .mr-actions { margin-top: 0.55rem; }

  /* The chips sit at z-index 60; the results screen is modal. */
  body.mr-open .account-bar { display: none; }
}

/* ---- portrait phones only: tighter bottom gutters ---------------- */

@media (max-width: 560px) and (orientation: portrait) {
  .game-controls { bottom: calc(0.65rem + var(--mob-safe-bottom)); }
  .tbar          { bottom: calc(4.4rem + var(--mob-safe-bottom)); }
}

/* ---- very narrow portrait: let the username truncate ------------- *
 * Below ~400px the three chips stop fitting side by side. The username is
 * the one piece the player already knows, so it ellipsises rather than
 * dropping "Public chat" to a glyph.                                  */

@media (max-width: 400px) and (orientation: portrait) {
  .account-bar {
    gap: 0.28rem;
    padding-inline: 0.4rem;
  }

  .account-bar .account-chip {
    padding-inline: 0.55rem;
    font-size: 0.72rem;
  }

  .account-bar .account-chip.signed-in {
    min-width: 0;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: var(--mob-chip-h);
  }
}

/* ================================================================== *
 * BLOCK B — SHORT LANDSCAPE (phones)
 *
 * `max-height: 560px` catches landscape phones (390-430px tall) and excludes
 * every tablet landscape (768-834px tall), which stays on the desktop band
 * and is already correct.
 *
 * These viewports were NOT on the desktop layout before: they fell into the
 * <=920px band and rendered a 633px field in a 390px viewport — 243px of
 * overflow, with the swing button 168px below the fold.
 *
 * Here the HUD keeps the desktop absolute-overlay treatment (Block A's
 * `position: static` is portrait-only), just slim, and pinned LEFT. On
 * desktop the account chips overlap the HUD's top-right corner; that reads
 * fine at 900px tall and desktop is not being touched, but inheriting it at
 * 390px tall would be glaring.
 * ================================================================== */

@media (orientation: landscape) and (max-height: 560px) {

  :root {
    --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mob-safe-left: env(safe-area-inset-left, 0px);
    --mob-safe-right: env(safe-area-inset-right, 0px);
  }

  .game-section {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .game-shell { height: 100%; }

  .game-field {
    height: 100%;
    min-height: 0;
  }

  /* ---- chips: compact and bounded ------------------------------- *
   * At full size the three chips are 440px of an 844px screen, which leaves
   * the HUD nowhere to go. Capping the username makes the strip's width
   * deterministic (~21rem) so the HUD's reservation below is safe.      */

  body.in-game .account-bar .account-chip {
    padding-inline: 0.55rem;
    font-size: 0.72rem;
  }

  body.in-game .account-bar .account-chip.signed-in {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- HUD: slim overlay, past the back button, short of the chips -- */

  .game-hud {
    top: 0.5rem;
    left: calc(4.4rem + var(--mob-safe-left));
    right: auto;
    width: auto;
    max-width: calc(100% - 4.4rem - 22rem - var(--mob-safe-left) - var(--mob-safe-right));
    grid-template-columns: repeat(5, auto);
  }

  .game-hud > div {
    justify-content: flex-start;
    min-height: 2.5rem;
    gap: 0;
    padding: 0.22rem 0.4rem;
  }

  .game-hud span { font-size: 0.54rem; white-space: nowrap; }
  .game-hud strong { font-size: 0.95rem; line-height: 1.05; }

  .game-hud .heat-hud {
    grid-template-columns: minmax(0, 1fr);
    place-content: start center;
    justify-items: center;
    column-gap: 0;
  }

  .heat-hud small {
    width: 2.6rem;
    height: 0.28rem;
    margin-top: 0.1rem;
  }

  .game-title-mark { display: none; }

  /* Below the HUD band, not across it. */
  .pitch-telegraph { top: 19%; }

  .result-call {
    top: 36%;
    font-size: clamp(1.8rem, 7vw, 3rem);
  }

  /* ---- bottom controls ------------------------------------------ *
   * The hit bar goes back to its desktop treatment — centred and half
   * width — instead of the <=920px full-width version, which collides
   * with the bottom-right swing button on a 390px-tall screen.        */

  .tbar {
    left: 50%;
    right: auto;
    width: min(32rem, 48%);
    transform: translateX(-50%);
    bottom: calc(1.35rem + var(--mob-safe-bottom));
  }

  .game-controls { bottom: calc(1rem + var(--mob-safe-bottom)); right: calc(1.5rem + var(--mob-safe-right)); }
  .sound-toggle  { bottom: calc(0.75rem + var(--mob-safe-bottom)); left: calc(1rem + var(--mob-safe-left)); }
  .roster-toggle { bottom: calc(0.75rem + var(--mob-safe-bottom)); left: calc(4.1rem + var(--mob-safe-left)); }

  /* ---- match results: two columns, so it fits 390px of height ---- */

  .mr-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    padding: 0.5rem calc(0.5rem + var(--mob-safe-right)) calc(0.5rem + var(--mob-safe-bottom)) calc(0.5rem + var(--mob-safe-left));
  }

  .mr-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 0.8rem;
    align-content: start;
    width: min(100%, 46rem);
    max-height: 100%;
    overflow-y: auto;
    padding: 0.55rem 0.8rem 0.7rem;
  }

  .mr-head { grid-column: 1 / -1; }
  .mr-head h2 { font-size: 1.3rem; }
  .mr-head p { margin-top: 0.15rem; font-size: 0.62rem; }

  .mr-totals {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    margin-top: 0.5rem;
  }

  .mr-total { padding: 0.35rem 0.4rem; }
  .mr-total strong { font-size: 1.35rem; }

  .mr-players { grid-column: 2; margin-top: 0.5rem; }
  .mr-players h3 { margin-bottom: 0.3rem; }
  .mr-players ul { gap: 0.3rem; }

  .mr-row { grid-template-columns: 1.2rem 1.9rem minmax(0, 1fr) auto; gap: 0.45rem; padding: 0.28rem 0.45rem; }
  .mr-face { width: 1.9rem; height: 1.9rem; }
  .mr-who strong { font-size: 0.84rem; }

  .mr-league { grid-column: 1 / -1; margin: 0.45rem 0 0; font-size: 0.66rem; }

  .mr-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.45rem;
  }

  body.mr-open .account-bar { display: none; }
}