/* ─── mobile.css ─────────────────────────────────────────────────────────────
   The entire phone layout: @media (max-width: 900px) — top bar, bottom sheet, drawer (see setMobileLayout() in game.js).
   Split out of the old style.css as a pure ordered slice. The <link> order
   in index.html (base → menu → online → board → folks → war → overlays →
   mobile → free-mode) preserves the original cascade — do not reorder. ─── */

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE LAYOUT
   Desktop hides all mobile chrome. Under 900px the board scales to fit and
   setMobileLayout() (game.js) relocates the side panels into a sticky top
   bar, a contextual bottom sheet, and a slide-in "More" drawer.
   ───────────────────────────────────────────────────────────────────────── */
#mobile-topbar, #mobile-banner-host, #mobile-sheet,
#mobile-drawer, #mobile-drawer-backdrop,
#mobile-board-top, #mobile-board-bottom { display: none; }

/* Phones in either orientation: narrow viewports, or short touch viewports
   (a rotated phone is ~900px wide but <520px tall — still a phone). Keep this
   query in sync with mobileMQ in src/ui/mobile.js. */
@media (max-width: 900px), ((max-height: 520px) and (pointer: coarse)) {
  /* --board-scale is a unitless number set by updateBoardScale() in game.js.
     (CSS calc can't divide a length by a length to make a ratio, so the scale
     must be computed in JS.) Falls back to 1 (defined at :root) before JS runs. */

  /* The off-canvas drawer sits at translateX(100%); without this it extends
     the scrollable width on phones (horizontal pan / can't-zoom-out). */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Undo-request banner + the notices card float over the board on mobile —
     give them a solid background so they're readable instead of see-through
     (the desktop translucent amber only works against the dark sidebar). */
  .undo-banner { background: #2e2114; }
  #mobile-banner-host .notice-board { background: #2a2410; box-shadow: 0 2px 8px rgba(0,0,0,0.5); margin-top: 6px; }

  /* The setup hint rides in the bottom sheet (not floating over the board, where
     it had no background and sat unreadable over the reserve strip). On the
     sheet's dark card it reads as a plain intro line. */
  #mobile-sheet #setup-hint {
    color: #cdd0e0; font-style: normal; font-size: 0.8rem; line-height: 1.25;
    text-align: left; padding: 0 2px 4px; border-bottom: 1px solid #2a2a3a;
  }

  /* Desktop lays the war screen out as a grid (exile | board | sidebar); on
     mobile the side tracks are hidden, so collapse to one centered column
     (this is also what centers the smaller scaled board on landscape phones). */
  #screen-war.active { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  /* margin auto centers the column when the scaled board is narrower than the
     viewport (landscape phones — portrait fills the width anyway). */
  /* padding-top clears the fixed top bar PLUS the fixed banner host (notices /
     request banners) which floats just under it — --mobile-banner-h is its live
     height (mobile.js), 0 when empty. Without it the banner covers the
     opponent's reserve/exile strip and you can't scroll it into view. */
  #board-assembly { flex-direction: column; align-items: center; gap: 0; padding-top: calc(56px + env(safe-area-inset-top) + var(--mobile-banner-h, 0px)); max-width: 100vw; margin: 0 auto; }

  /* Scale the frame; size its column to the scaled footprint so the page
     flows correctly. No JS pixel math changes. */
  #board-col {
    flex: none;
    width: calc(601px * var(--board-scale));
    height: calc(852px * var(--board-scale));
    /* transform scales the frame visually but its layout box stays 601×852;
       clip the leftover so it doesn't force page-wide horizontal scroll */
    overflow: hidden;
  }
  /* --board-zoom (default 1) is the double-tap zoom factor (mobile.js); the
     column box keeps the FIT footprint, so the zoomed frame overflows inside
     it and pans via native scrolling. */
  #board-frame { transform: scale(calc(var(--board-scale) * var(--board-zoom, 1))); transform-origin: top left; }
  body.board-zoomed #board-col { overflow: auto; -webkit-overflow-scrolling: touch; }

  /* Setup creature popup lives inside the scaled frame — counter-scale so it
     stays readable/tappable, and keep it within the screen. */
  .cell-popup { transform: translateX(-50%) scale(calc(1 / var(--board-scale))); max-width: 80vw; }

  /* Popups presented as a bottom sheet (presentCellPopup in game.js): full
     width, comfortable >=44px touch rows, above the regular sheet. */
  .cell-popup.popup-sheet {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    transform: none; max-width: none; width: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: #15151f; border: none; border-top: 1px solid #555;
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,0.65);
    z-index: 600;   /* above the bottom sheet (500), below the drawer (1000) */
  }
  .cell-popup.popup-sheet button { min-height: 44px; font-size: 0.95rem; }
  .cell-popup.popup-sheet kbd { display: none; }              /* keyboard hints are desktop-only */
  .cell-popup.popup-sheet .kos-orient-row { grid-column: 1 / -1; display: flex; gap: 8px; }
  .cell-popup.popup-sheet .kos-orient-row button { flex: 1; min-height: 48px; font-size: 1.2rem; }

  /* Top-bar extras: quick Undo (left) + live VP/TP chips (right of the banner) */
  #btn-mobile-undo {
    background: #222; color: #ddd; border: 1px solid #444; border-radius: 6px;
    font-size: 1.1rem; padding: 2px 10px; cursor: pointer; flex: none;
  }
  /* Live score: one accent-bordered pill per player so P1/P2 read apart at a
     glance — VP over TP on two lines (narrower, less cramped). The text uses the
     accent's readable-on-dark variant so a near-black P2 accent isn't invisible. */
  #mobile-score { display: flex; gap: 6px; white-space: nowrap; flex: none; align-items: center; }
  #mobile-score .mts {
    display: inline-flex; flex-direction: column; gap: 0; line-height: 1.05;
    padding: 2px 7px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid currentColor;
  }
  #mobile-score .mts-row { display: flex; align-items: baseline; gap: 3px; }
  #mobile-score .mts b { font-size: 0.82rem; font-weight: 700; margin-left: auto; }
  #mobile-score .mts i { font-style: normal; font-weight: 600; margin-left: auto; opacity: 0.95; font-size: 0.78rem; }
  #mobile-score small { font-size: 0.5rem; opacity: 0.6; letter-spacing: 0.03em; }
  #mobile-score .mts-p1 { color: var(--p1-accent-onbg, #e44); }
  #mobile-score .mts-p2 { color: var(--p2-accent-onbg, #aaa); }

  /* Tap feedback: a subtle press state on interactive elements */
  #board-war .cell:active { filter: brightness(1.3); }
  #mobile-sheet button:active, #mobile-drawer-body button:active,
  .cell-popup.popup-sheet button:active, #mobile-topbar button:active {
    transform: scale(0.96); filter: brightness(1.15);
  }

  /* Comfortable touch targets (>=44px). Measured defaults were 27-37px — too
     small to tap reliably. Bump every tappable control in the phone chrome. */
  #mobile-sheet button, #mobile-sheet select,
  #mobile-drawer-body button, #mobile-drawer-body select {
    min-height: 44px;
  }
  #btn-mobile-undo, #btn-mobile-more, #btn-mobile-close {
    min-height: 40px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* The History header's < > >> nav buttons keep their compact desktop look in
     the drawer (the 44px rule above would bloat them) — just a touch larger for
     the finger. */
  #mobile-drawer-body .tl-nav-btn {
    min-height: 0; min-width: 0;
    width: 30px; height: 30px;
    font-size: 1.05rem;
  }
  #mobile-drawer-body .log-header { font-size: 0.78rem; }

  /* Desktop side columns are emptied by reparenting; hide their shells */
  #exile-col, #sidebar { display: none; }

  /* ── Sticky top bar: turn status + menu button ── */
  #mobile-topbar {
    display: flex; align-items: center; gap: 0.5rem;
    position: fixed; top: 0; left: 0; right: 0; height: calc(48px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0.5rem 0; background: #12121f;
    border-bottom: 1px solid #2a2a3a; z-index: 500;
  }
  #mobile-turn-host { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mobile-turn-host .turn-banner {
    font-size: 0.9rem; padding: 0.3rem 0.5rem; border-bottom: none;
    flex-wrap: nowrap; justify-content: flex-start;   /* one line; host ellipsis-truncates */
  }
  #btn-mobile-more { flex: 0 0 auto; background: #2a2a3a; color: #fff; font-size: 1.2rem; line-height: 1; padding: 0.35rem 0.7rem; }

  /* ── Online undo-request banners: fixed just under the top bar ── */
  #mobile-banner-host { display: block; position: fixed; top: calc(48px + env(safe-area-inset-top)); left: 0; right: 0; padding: 0 0.5rem; z-index: 490; }
  #mobile-banner-host:empty { display: none; }
  /* Request-Undo (shown when you're not on the latest state) sits here, full
     width, so it's reachable without opening the drawer. */
  #mobile-banner-host .btn-request { width: 100%; margin-top: 6px; min-height: 40px; }

  /* ── Contextual bottom sheet (only when there's something to act on) ── */
  #mobile-sheet {
    display: flex; flex-direction: column; gap: 0.5rem;
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 45vh; overflow-y: auto;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: #12121f;
    border-top: 1px solid #2a2a3a; box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
    z-index: 500;
  }
  body:not(.sheet-active) #mobile-sheet { display: none; }

  /* Phase-aware visibility for reparented elements (tagged m-war / m-setup) */
  body.phase-setup .m-war   { display: none !important; }
  body.phase-war   .m-setup { display: none !important; }

  /* ── Compact setup sheet ──
     Setup only needs the folk picker + PL counter (+ Done at 10, + the online
     hint/opponent status). Tighten the spacing so the sheet stays a thin strip
     and doesn't crowd the lower board. Interactive controls (the dropdown, the
     Done button) keep the 44px tap-target min-height set above. */
  body.phase-setup #mobile-sheet {
    gap: 0.3rem;
    padding-top: 0.4rem;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
  }
  /* Folk picker: one inline row (label + dropdown) instead of a stacked card. */
  #mobile-sheet #setup-folk {
    flex-direction: row; align-items: center; gap: 0.5rem;
    margin: 0; padding: 0; background: none; border-radius: 0;
  }
  #mobile-sheet #setup-folk .menu-label { margin: 0; flex: 0 0 auto; }
  #mobile-sheet #setup-folk select { flex: 1; min-width: 0; }
  /* Non-interactive text rows: drop the stacked margins. */
  #mobile-sheet #setup-pl-info { margin: 0; font-size: 0.9rem; }
  #mobile-sheet #setup-opponent-status { margin: 0; }

  /* ── Slide-in "More" drawer ── */
  #mobile-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 900; }
  #mobile-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    background: #16161f; border-left: 1px solid #2a2a3a;
    transform: translateX(100%); transition: transform 0.2s ease; z-index: 1000;
  }
  body.drawer-open #mobile-drawer { transform: translateX(0); }
  body.drawer-open #mobile-drawer-backdrop { display: block; }
  #mobile-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem; border-bottom: 1px solid #2a2a3a; font-weight: bold;
  }
  #btn-mobile-close { background: #2a2a3a; color: #fff; padding: 0.2rem 0.6rem; }
  #mobile-drawer-body { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; }

  /* Setup name fields are touch inputs — the desktop 0.85rem/3px is too small. */
  #mobile-drawer-body #setup-names .setup-name-row { font-size: 0.95rem; gap: 8px; }
  #mobile-drawer-body #setup-names .setup-name-row input { font-size: 1rem; padding: 10px 12px; min-height: 44px; }

  /* ── Reserve/exile strips flanking the board (opponent above, me below) ── */
  #mobile-board-top, #mobile-board-bottom {
    display: flex; gap: 6px; width: 100%; max-width: 100vw;
    padding: 4px 4px 0; flex: none;
  }
  #mobile-board-bottom { padding: 0 4px 4px; }
  #mobile-board-top .exile-area, #mobile-board-bottom .exile-area {
    flex: 1; min-width: 0; border-radius: 6px;
    border: 1px solid #2a2a3a; padding: 5px 7px;
  }
  /* Reserve holds up to 15 dice; exile is usually small/empty — give Reserve the
     larger share so its dice fit in fewer rows instead of towering. */
  #mobile-board-top .reserve-area, #mobile-board-bottom .reserve-area { flex: 1.7; }
  /* Legible labels with a count badge so you read "Reserve · 12" at a glance
     instead of squinting at near-invisible 0.55rem #555 titles + counting dice. */
  #mobile-board-top .exile-title, #mobile-board-bottom .exile-title {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    font-size: 0.6rem; color: #9a9aac; margin-bottom: 5px;
  }
  #mobile-board-top .exile-title .area-count, #mobile-board-bottom .exile-title .area-count {
    display: inline-block; flex: none; font-size: 0.72rem; font-weight: 700; color: #edeef5;
    background: rgba(255,255,255,0.1); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center;
  }
  #mobile-board-top .reserve-die, #mobile-board-bottom .reserve-die {
    width: 22px; height: 22px; border-radius: 4px;
  }
  #mobile-board-top .exile-dice, #mobile-board-bottom .exile-dice {
    flex: none; height: auto; align-content: flex-start;
  }

  /* Menu + overlays fit narrow screens */
  #main-menu-controls, .online-panel { width: min(300px, 92vw); }
  #connection-box, #game-over-box { max-width: 92vw; }
}