/* Portrait-only cleanup layer.
   Desktop and landscape phone layouts are intentionally untouched. */

@media (max-width: 700px) and (orientation: portrait) {
  /* Setup deliberately fades the shared piles on desktop. On portrait that
     makes the centre unreadable, so restore contrast while keeping it inert. */
  body[data-game-phase="setup"] .centre-zone {
    opacity: .88 !important;
    pointer-events: none !important;
  }

  /* Draw / Pile / Burn live in the clear middle of the felt, below the
     opponents' cards rather than underneath them. */
  .centre-zone {
    top: 44% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 56px) !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: 17px !important;
  }

  .centre-zone::before {
    inset: -25px -22px -18px !important;
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(22,13,9,.16) !important;
  }

  .centre-zone .pile-wrap {
    position: relative !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  .centre-zone .pile-label,
  #drawPile::before {
    position: absolute !important;
    top: -18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    color: rgba(255,255,255,.9) !important;
    font-size: .58rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    z-index: 12 !important;
  }

  #drawPile::before {
    content: "Draw";
    pointer-events: none;
  }

  .pile,
  .pile .card {
    width: 56px !important;
    min-height: 79px !important;
  }

  #drawPile .card-back {
    opacity: .98 !important;
    filter: none !important;
  }

  #discardPile .empty-pile {
    opacity: .38 !important;
    border: 2px dashed rgba(255,255,255,.62) !important;
    background: rgba(255,255,255,.04) !important;
  }

  .pile-burn {
    opacity: .86 !important;
  }

  .pile-burn:not(.has-cards) .burn-card {
    opacity: .38 !important;
    filter: grayscale(.2) brightness(.84) !important;
    border-style: dashed !important;
  }

  .pile-count {
    right: -8px !important;
    bottom: -7px !important;
    min-width: 25px !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(19,11,7,.9) !important;
    color: #fff !important;
    font-size: .66rem !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.28) !important;
  }

  /* During setup the long table-card label repeats the instruction already in
     the READY strip and is the source of the visible text collision. */
  body[data-game-phase="setup"] .player-label {
    display: none !important;
  }

  /* Four distinct portrait bands: opponents, centre piles, local table cards,
     then setup controls / held hand. Keep local table cards clear of the pile. */
  body[data-game-phase="setup"] .self-table-zone {
    bottom: 27% !important;
  }

  .self-identity-row {
    right: 1.5% !important;
    bottom: 28% !important;
    transform: scale(.68) !important;
    transform-origin: right bottom !important;
    z-index: 250 !important;
  }

  body[data-game-phase="setup"] .setup-actions {
    left: 42% !important;
    bottom: 17% !important;
    width: 70% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
    padding: 5px 7px !important;
    transform: translateX(-50%) scale(.9) !important;
    transform-origin: center bottom !important;
    white-space: normal !important;
  }

  body[data-game-phase="setup"] .setup-ready {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
  }

  /* Short mobile instruction: the full desktop wording is unnecessary here. */
  body[data-game-phase="setup"] .setup-hint {
    min-width: 0 !important;
    max-width: 176px !important;
    font-size: 0 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body[data-game-phase="setup"] .setup-hint::after {
    content: "Tap a hand card, then a table card to swap.";
    font-size: .62rem !important;
    line-height: 1.15 !important;
  }

  /* Keep the held cards above Safari's overlay toolbar. */
  .hand {
    bottom: 8px !important;
  }

  /* In play the desktop action row normally lives below the table edge.
     Give PLAY / PICK UP / FINISH TURN a guaranteed portrait dock above hand. */
  body[data-game-phase="play"] .play-actions {
    position: absolute !important;
    left: 50% !important;
    bottom: 118px !important;
    transform: translateX(-50%) !important;
    z-index: 360 !important;
    width: max-content !important;
    max-width: 72% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  body[data-game-phase="play"] .play-selected,
  body[data-game-phase="play"] .pickup-pile,
  body[data-game-phase="play"] .finish-turn {
    min-width: 88px !important;
    min-height: 42px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    line-height: 1 !important;
  }

  /* SORT shares the same vertical action band but stays at the right edge,
     leaving PLAY/PICK UP centred and unobscured. */
  .sort-hand {
    left: auto !important;
    right: 2% !important;
    bottom: 120px !important;
    transform: none !important;
    z-index: 365 !important;
    min-height: 42px !important;
    padding: 7px 10px !important;
  }
}