/* ─── Mobile / iPhone optimisations ─────────────────────────────────────────
 * Loaded after game.css (and, on the experience arena, after experience.css)
 * so these rules win via media-query specificity + source order. Targets
 * narrow viewports regardless of orientation. Keeps the full game reachable
 * without requiring the player to pinch-zoom on a 390px-wide iPhone.
 *
 * Design goals:
 *   - Stack the board vertically, no horizontal scroll.
 *   - Cards large enough to read without pinch (min tile height ~100px).
 *   - 44px+ touch targets on every control (Apple HIG).
 *   - Phase bar collapses to a compact scrollable strip.
 *   - Hand sits as a bottom drawer with a toggle; zone-scrolls swipe.
 *   - Overlays become full-screen sheets instead of fixed-size modals.
 *   - Right-click menus replaced by single-tap to open the same ctx-menu.
 */

@media (max-width: 820px) {
  html, body {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
    /* Shared heights so the fixed hand bar and the log drawer stay in
       sync. --m-log-h is the bottom log drawer height; the active
       player's hand is pinned just above it; --m-hand-reserve is the
       vertical space #board keeps clear at the bottom so scrolled board
       content never hides under the fixed hand + log. */
    --m-log-h: 30vh;
    --m-hand-reserve: 158px;
  }

  /* ── Board: single-column flow, vertically scrollable ─────────────────
   * html/body have overflow:hidden (for desktop's viewport-locked
   * layout), so we make #board itself the scroll container. It gets a
   * fixed 100dvh height and overflow-y:auto — when content (phase bar
   * + evil + shared + two player mats + hands) exceeds one screen,
   * the user can scroll inside the board to reach their own hand.
   * Phase bar is position:sticky so it stays pinned at the top. */
  #board {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 2px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Phase bar: compact horizontal strip at the very top (fixed).
     order:-1 promotes the bar above Evil + Shared Zones in the flex
     column so the active phase and advance/undo controls stay on top
     regardless of the DOM source order. */
  #phase-bar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* One compact horizontal strip — never a tall stack. Items sit in a single
       row and scroll horizontally if they overflow, so the top bar stays short. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    padding: 2px 6px !important;
    gap: 5px !important;
    font-size: 10px !important;
    z-index: 900 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    order: -1 !important;
  }
  #phase-bar::-webkit-scrollbar { display: none; }
  #phase-bar #turn-banner { gap: 4px; font-size: 10px; }
  #phase-bar #turn-round-tag { font-size: 9px; }
  #phase-bar #phase-track {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 1px !important;
  }
  #phase-bar #phase-track::-webkit-scrollbar { display: none; }
  #phase-bar .phase-step {
    min-width: 28px !important;
    padding: 1px 2px !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
  }
  #phase-bar .phase-step img,
  #phase-bar .phase-step svg { width: 18px !important; height: 18px !important; }
  /* Compact controls — a short single-row bar beats big touch targets that
     wrap into a tall stack. Everything stays on one line (the bar scrolls
     horizontally if needed). */
  #phase-bar button,
  #phase-bar .btn-primary,
  #phase-bar .btn-icon,
  #phase-bar .ch-round-btn,
  #phase-bar .action-btn {
    min-height: 30px !important;
    max-height: 34px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  #phase-bar .btn-icon,
  #phase-bar .ch-round-btn { min-width: 32px !important; }
  /* Failed/Resisted tallies stay inline + compact, never their own row. */
  #phase-bar .phase-bar-piles { flex-shrink: 0 !important; }
  #phase-bar #turn-banner { flex-shrink: 0 !important; flex-wrap: nowrap !important; }

  /* Evil area: tight on mobile so two player areas still get room. */
  #board .player-area.evil,
  #board #evil-entity {
    max-height: 13vh !important;
    overflow: hidden;
    flex: 0 0 auto !important;
  }
  .player-area.coop-evil {
    min-height: 32px !important;
    max-height: 44px !important;
  }

  /* Shared zones sit just below the evil strip — compact. Failed /
     Resisted piles render as tiny inline pills instead of the big
     vertical count+label+bar stack they use on desktop. Saves ~60px
     of vertical space on a phone. */
  #shared-zones {
    flex: 0 0 auto !important;
    max-height: 8vh !important;
    padding: 2px 4px !important;
    gap: 4px !important;
    align-items: center !important;
  }
  #shared-zones .pile-display {
    font-size: 10px;
    padding: 2px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 10px;
  }
  #shared-zones .pile-display .pile-count {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  #shared-zones .pile-display .pile-label {
    font-size: 9px !important;
    letter-spacing: 0.05em;
    margin: 0 !important;
  }
  #shared-zones .pile-bar { display: none !important; }

  /* Righteous player area: don't compete for vertical space. Each area
     sizes to its natural content (playmat + hand) and the scrollable
     #board handles overflow. Critical on 2-player phones where trying
     to cram both mats into one viewport leaves no room for either hand. */
  #board .player-area.righteous {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── DUEL, evil viewer (body.sides-flip): the local player IS evil ──────────
   * The rules above assume evil = the AI opponent (a compact 13vh strip), which
   * hides a HUMAN evil player's own hand entirely at this width. When the local
   * viewer is evil, mirror the treatment: give THEIR (evil) area the full space
   * at the BOTTOM and compress the opponent (righteous) into the strip at top,
   * via flex `order`. This keeps "your own zones + hand" the priority when space
   * is tight — exactly what the responsive layout should do. (A righteous viewer
   * keeps the defaults above, which already put them at the bottom.) The
   * phase-bar keeps its own order:-1 so it stays pinned at the very top. */
  body.sides-flip #shared-zones                  { order: 0 !important; }
  body.sides-flip #board .player-area.righteous  {
    order: 1 !important;
    max-height: 13vh !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  body.sides-flip #board .player-area.evil {
    order: 2 !important;
    max-height: none !important;
    overflow: visible !important;
    /* Compact (stats + cost) at the top of its slot; the hand is a pinned drawer
       at the very bottom (below), so the area itself sizes to its non-hand
       content. */
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* The lone evil seat lives inside #evil-strip (display:contents), so the flex
     order must sit on the actual .player-area.evil (done above) — the strip
     itself is transparent to flex. */
  /* The local hand drawer (righteous OR evil) gets a generous default height so
     it fills the lower screen with big readable cards instead of a thin strip;
     the top grip resizes it (overrides this). */
  html body #board .player-area-local > .zone-row.hand-row {
    max-height: 44vh !important;
    min-height: 26vh !important;
  }

  /* Playmat grid (Good / Evil / Active / Field quads): 2x2 compact. */
  .playmat-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 3px !important;
    padding: 3px !important;
  }
  .playmat-quad {
    min-height: 60px !important;
    padding: 2px 4px !important;
  }
  .playmat-quad .quad-label {
    font-size: 9px !important;
    letter-spacing: 0.05em;
  }

  /* ── Hand: bottom drawer ─────────────────────────────────────────────── */
  /* On mobile the playmat-grid's 220px min-height combined with two player
   * areas was pushing the hand fan below the viewport entirely. Shrink
   * playmat and reserve explicit space for hand (header + cards) so both
   * stay on screen. */
  .zone-row.hand-row {
    flex: 0 0 auto !important;
    min-height: 108px !important;
    max-height: 28vh;
  }
  .playmat-grid {
    flex: 1 1 auto !important;
    min-height: 300px !important;   /* ~2 rows of 78px habituals + gaps */
  }
  .playmat-quad {
    min-height: 0 !important;
  }
  /* Tabs view: the fixed-position tab bar sits above the sticky phase
     bar on mobile. Add top padding to #board so the first visible row
     doesn't hide under the tabs. */
  body.view-tabs .player-tabs {
    top: 0 !important;
    font-size: 11px !important;
    padding: 3px 4px !important;
  }
  body.view-tabs .player-tabs .player-tab {
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 30px !important;
  }
  body.view-tabs #board {
    padding-top: 40px !important;
  }

  /* Cost-zone spread: the desktop overlap (-36px available, -56px
   * spent) buries all but the top two cards on a 72px-wide tile,
   * so "Tap 5" looks the same as "Tap 2" visually. Loosen the
   * overlap on mobile and let the zone scroll horizontally when
   * there's still more than fits. */
  .playmat-quad.quad-available.cost-spread-stacked .card-tile {
    margin-left: -20px !important;
  }
  .playmat-quad.quad-spent.cost-spread-stacked .card-tile.rotated {
    margin-left: -30px !important;
  }
  .playmat-quad.quad-available .zone-scrollable,
  .playmat-quad.quad-spent .zone-scrollable {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    touch-action: pan-x !important;
  }

  /* Rotated (tapped) habitual / evil-habitual cards: the default
     .card-tile.rotated adds margin: 0 18px, which combined with a
     54-wide tile eats 90px of row width per rotated card and forces
     the row to wrap prematurely on a ~190px quad. Tighten margin so
     a tapped card costs little more row space than an un-tapped one. */
  .playmat-quad.quad-good-habituals .card-tile.rotated,
  .playmat-quad.quad-evil-habituals .card-tile.rotated {
    margin: 0 2px !important;
  }
  .hand-zone-header {
    padding: 4px 8px !important;
    min-height: 30px;
  }
  .hand-fan {
    padding: 4px 6px !important;
    gap: 2px !important;
  }
  .hand-fan .card-tile {
    width: 68px !important;
    height: 100px !important;
    margin-right: -34px !important;  /* still fan-overlap but tighter */
    flex-shrink: 0;
  }
  .hand-fan .card-tile:hover,
  .hand-fan .card-tile:focus {
    transform: translateY(-12px) scale(1.05) !important;
    margin-right: -24px !important;
  }

  /* ── Cards on the mat ───────────────────────────────────────────────── */
  /* No hard-coded !important sizes here — the playmat-quad rule in
     game.css (width: calc(var(--base-tile-w) * var(--zone-zoom)) !important)
     owns tile sizing so the right-click Zoom in/out can actually take
     effect. Mobile size defaults live on the quad via --base-tile-w/h. */
  .playmat-quad.quad-good-habituals .ch-card-root,
  .playmat-quad.quad-evil-habituals .ch-card-root {
    --ch-scale: 0.072;
  }

  /* Habitual quads: allow wrapping to a second row so 3–4 cards fit inside
     the zone without relying on horizontal-scroll (which is easy to miss
     on touch). Cost quads (available/spent) keep the nowrap + touch-pan
     scroll since they frequently hold ~7 cards and vertical space is tight. */
  .playmat-quad.quad-good-habituals .zone-scrollable,
  .playmat-quad.quad-evil-habituals .zone-scrollable {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    align-content: flex-start !important;
    row-gap: 4px;
  }
  /* Enable native touch-pan scrolling as a reliable fallback for zones
     that stay nowrap (cost zones). Without touch-action: pan-x the mobile
     long-press listener can swallow the scroll gesture. */
  .playmat-quad .zone-scrollable {
    touch-action: pan-x pan-y;
  }
  /* Tap target zones scroll horizontally instead of wrapping. */
  .zone-scrollable {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 2px;
  }

  /* ── Stat badges ────────────────────────────────────────────────────── */
  .player-stats {
    padding: 3px 4px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    font-size: 10px !important;
  }
  .stat-badge {
    padding: 2px 6px !important;
    font-size: 10px !important;
    min-height: 24px;
  }
  /* Collapse button sits first — keep it prominent so it's obvious
     how to expand a folded player area. */
  .player-stats .stat-collapse-btn {
    order: -1;
    font-size: 10px !important;
  }

  /* ── Context menu — full-width at bottom (sheet style) ──────────────── */
  #ctx-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  #ctx-menu .ctx-item {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px !important;
  }
  #ctx-menu .ctx-divider { margin: 6px 0; }

  /* ── Overlays / Help / Menu: full-screen sheets ─────────────────────── */
  .overlay .overlay-box,
  .overlay-wide {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }
  #help-overlay { padding-top: 56px !important; }

  /* Penalty dialog: full screen on mobile by default so the body fills
     the viewport. When the user taps the — minimize button we let the
     dialog shrink to a small pill — the .dlg-minimized rules on the
     root win only if the mobile full-screen rules don't force 100vw. */
  .penalty-floating:not(.dlg-minimized) {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    resize: none !important;
  }
  .penalty-floating.dlg-minimized,
  .card-pin-panel.dlg-minimized,
  .hand-modal-panel.dlg-minimized,
  #pile-modal.dlg-minimized {
    left: 8px !important;
    right: auto !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 60vw !important;
    max-height: 48px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6) !important;
  }
  .penalty-floating::after { display: none; }
  .penalty-floating .penalty-drag-handle { cursor: default; }
  .penalty-floating .pen-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }

  /* Pinned card inspector: cap to a sensible phone size + centre. Old
     desktop-cached sizes were leaking over and putting the ✕/match/view
     buttons in the header off the right edge with no way to reach them. */
  .card-pin-panel:not(.dlg-minimized) {
    left: 2vw !important;
    right: auto !important;
    top: 8vh !important;
    width: 96vw !important;
    max-width: 96vw !important;
    height: auto !important;
    max-height: 80vh !important;
  }

  /* ── Hand modal (full-view) ─────────────────────────────────────────── */
  #hand-modal {
    padding: 4px !important;
  }
  #hand-modal-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 4px !important;
  }

  /* ── Log panel: compact bottom drawer, never over the hand ──────────── */
  /* Ignore the saved right/side dock preference — a 260px side column
     leaves no room for the actual game on a 390px-wide phone. Override
     every dimension so the log is a full-width bottom drawer of a FIXED
     height (--m-log-h). The player's hand is pinned as a fixed bar
     directly above this drawer (see .player-area.righteous hand-row
     below), so the log can never grow up and occlude the hand — the
     P0 mobile bug where an expanding log buried the whole hand row. */
  html body #log-panel,
  html body.log-open #log-panel.visible,
  html body:not(.log-hidden) #log-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100vw !important;
    height: var(--m-log-h) !important;
    max-height: var(--m-log-h) !important;
    overflow-y: auto !important;
    z-index: 1050 !important;   /* above board, below .overlay sheets (1100) */
    border-radius: 8px 8px 0 0;
  }
  /* And kill any margin/padding the side-dock mode adds to the board.
     Use html body <selector> to out-specify every existing rule so we
     never lose the cascade on any combination of help-dock-* +
     log-dock-* body classes. */
  html body #board,
  html body.log-open #board,
  html body.log-open.log-dock-bottom #board,
  html body.log-open.log-dock-right #board,
  html body.help-dock-right #board,
  html body.help-dock-left #board,
  html body.help-dock-right.log-open #board,
  html body.help-dock-left.log-open #board {
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── Player hand: pinned bottom bar, always visible & tappable ────────
   * P0 fix: on a phone the hand is the single most important surface, but
   * it lived at the very bottom of the scrollable board where the log
   * drawer covered it. Pin the ACTIVE righteous player's hand as a fixed
   * bar sitting directly above the log drawer (bottom: --m-log-h). When
   * the log is toggled off it drops to the very bottom (bottom: 0). The
   * board reserves matching bottom space so nothing scrolls under it. */
  /* Safety: #board.playmat-bg gives .player-area a backdrop-filter, which
     would create a containing block and make position:fixed resolve
     against the player area instead of the viewport. Null it on the
     righteous area so the pinned hand always anchors to the viewport. */
  #board.playmat-bg .player-area-local {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Pin THE LOCAL PLAYER'S hand as a fixed bottom drawer — the seat(s) this
   * client controls, marked .player-area-local (righteous, or the evil duelist).
   * Always pinned (not just on your turn) so it stays accessible AND fills the
   * board's reserved bottom padding, leaving no empty gap. Keying on "active
   * righteous" before pinned the OPPONENT's hand over the evil player's own. */
  html body #board .player-area-local > .zone-row.hand-row {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--m-log-h) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 1060 !important;      /* above the log drawer (1050), below .overlay sheets (1100) */
    margin: 0 !important;
    min-height: 0 !important;
    max-height: 30vh !important;
    background: linear-gradient(180deg, rgba(10,14,22,0.94), rgba(4,6,12,0.98)) !important;
    border-top: 1px solid rgba(201,168,76,0.35) !important;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.55) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    transition: bottom 0.18s ease !important;
  }
  /* Log hidden → hand sits flush on the bottom edge. */
  html body.log-hidden #board .player-area-local > .zone-row.hand-row {
    bottom: 0 !important;
  }
  /* Reserve bottom space in the scroll flow so the board's own bottom
     content (e.g. the playmat) can scroll fully into view above the fixed
     hand + log rather than hiding beneath them. */
  html body #board {
    padding-bottom: calc(var(--m-log-h) + var(--m-hand-reserve)) !important;
  }
  html body.log-hidden #board {
    padding-bottom: var(--m-hand-reserve) !important;
  }

  /* ── Header overlap fix (P0) ──────────────────────────────────────────
   * The per-area "▶ You — Your Turn" pill is position:absolute at the
   * top-right of the player area and, at 390w, lands on top of the deck /
   * stat badges — reads as broken. The phase bar already shows the active
   * player + phase prominently, so the pill is redundant on a phone.
   * Hide it to give the stat row its own clean space. */
  #board .player-area .turn-banner {
    display: none !important;
  }

  /* ── YOU badge + view-mode button: bigger touch targets ─────────────── */
  .view-mode-toggle,
  .log-toggle,
  .menu-toggle-btn,
  #help-toggle-btn {
    min-width: 44px !important;
    min-height: 40px !important;
  }

  /* ── Hide elements that are only useful with a precise pointer ──────── */
  .pen-hint,
  .pen-hint-inline { display: none; }

  /* Penalty body padding tighter on mobile (more room for cards). */
  .penalty-floating .penalty-body { padding: 8px 10px !important; }
  .penalty-floating .pen-obey { flex-direction: column; }
  .penalty-floating .pen-obey-card { max-width: 100%; }
}

/* Very narrow viewports (≤480) — iPhone SE etc. */
@media (max-width: 480px) {
  .hand-fan .card-tile {
    width: 56px !important;
    height: 82px !important;
    margin-right: -28px !important;
  }
  /* Shrink tile defaults through the --base-tile-w/h channel so
     --zone-zoom still works; no hard-coded width/height on the tile. */
  .playmat-quad.quad-good-habituals,
  .playmat-quad.quad-evil-habituals { --base-tile-w: 48px; --base-tile-h: 70px; }
  .playmat-quad.quad-available,
  .playmat-quad.quad-spent          { --base-tile-w: 60px; --base-tile-h: 88px; }
  .playmat-quad { min-height: 0 !important; }
  #phase-bar .phase-step { min-width: 32px !important; }
  .stat-badge { font-size: 10px !important; padding: 2px 4px !important; }
}

/* Touch-only tweaks (no hover) — long-press acts as right-click.
 * The JS bridge lives in GameUI._initLongPress, which adds body.is-touch
 * and dispatches a synthetic contextmenu event after a ~450ms hold. */
@media (hover: none) and (pointer: coarse) {
  .card-tile { cursor: pointer; }
  body.is-touch #ctx-menu { touch-action: manipulation; }
  /* Suppress the native iOS copy/share callout that pops up on long-press
   * over images/text — our own ctx menu replaces it. */
  body.is-touch .card-tile,
  body.is-touch .stat-badge,
  body.is-touch .playmat-quad,
  body.is-touch .zone-scrollable,
  body.is-touch #zone-evil-field-wrap,
  body.is-touch .pile-stat,
  body.is-touch .player-area {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Tiny hint so players know long-press is the way to right-click. */
  body.is-touch .card-tile::after {
    content: '';
  }
}

/* Respect reduced-motion: don't animate the hand drawer slide when the
 * user has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  #board .player-area.righteous.active-player > .zone-row.hand-row {
    transition: none !important;
  }
}