/**
 * Compact mobile play layout
 * max-width: 767px only — Desktop untouched.
 *
 * Goal: no large mid/top voids.
 * Stack from top: Header → Stats → Players → Draw → Turn → Hand → Tip → Actions
 * Leftover viewport space sits BELOW the action bar (safe).
 */

@media (max-width: 767px) {
  /* Shell: children content-sized; spare height below rail */
  body.is-playing.play .game-shell > .wrap,
  body.is-playing .game-shell > .wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.is-playing.play #battle-table,
  body.is-playing #battle-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) #battle-table {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important; /* do NOT grow — kills voids */
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  body.is-playing .table-stage,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .table-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    gap: 2px !important;
  }

  body.is-playing .led-scoreboard {
    margin: 2px 0 2px !important;
    flex: 0 0 auto !important;
  }

  body.is-playing .board-arena,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .board-arena {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "seat-l seat-r"
      "felt felt" !important;
    align-content: start !important;
    align-items: start !important;
    row-gap: 2px !important;
    column-gap: 8px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 6px !important;
    overflow: visible !important;
  }

  body.is-playing .felt-table,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-table {
    grid-area: felt !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.is-playing .felt-inner,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .felt-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 2px !important;
    overflow: visible !important;
  }

  body.is-playing .felt-decor {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }
  body.is-playing .ai-row {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-playing .battle .table-mid,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .battle .table-mid {
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 24px !important;
  }

  body.is-playing .stock-visual,
  body.is-playing .discard-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .stock-visual,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .discard-visual {
    width: 50px !important;
    height: 70px !important;
  }

  body.is-playing .felt-inner > .seat-float.bottom,
  body.is-playing .seat-float.bottom {
    flex: 0 0 auto !important;
    margin: 2px auto !important;
  }

  body.is-playing .hand-stage.on-felt,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    overflow: visible !important;
  }
  body.is-playing .hand-stage.on-felt .hand,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .hand {
    gap: 8px !important;
    padding: 2px 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  body.is-playing .hand-stage.on-felt .suit-group,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .suit-group {
    gap: 2px !important;
    padding: 1px 1px 2px !important;
  }
  body.is-playing .hand-stage.on-felt .pcard,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .hand-stage.on-felt .pcard {
    width: 40px !important;
    height: 58px !important;
    font-size: .7rem !important;
  }

  /* Rail directly under hand/tip — spare space below rail only */
  body.is-playing .player-rail,
  body.is-playing .game-shell:has(#battle-table:not([hidden])) .player-rail {
    flex: 0 0 auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }
  body.is-playing .tip-row {
    margin: 0 0 6px !important;
  }

  body.is-playing .side-rail .seat,
  body.is-playing .seat-float.side-left,
  body.is-playing .seat-float.side-right {
    transform: none !important;
    margin: 0 !important;
  }
}