/* NFA Donkey Poker — iPad (768–1279px wide): touch first. Landscape keeps a slim side panel; portrait slides it in. */

/* Touch: bigger targets, no hover effects, no text selection on the table */
.btn { min-height: 44px }
.btn.sm { min-height: 38px; padding: 8px 12px }
.seg button { padding: 10px 14px; min-height: 42px }
.amts button { padding: 9px 12px; min-height: 40px; font-size: 14px }
input, select { font-size: 16px; min-height: 42px }
#play { -webkit-user-select: none; user-select: none }
#play input { -webkit-user-select: text; user-select: text }
.raisebox input[type=range] { width: 240px; height: 32px }

/* Lobby */
#lobby { padding: 28px 22px 48px }
.brand h1 { font-size: 64px }
.versions { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.families { overflow-x: auto; -webkit-overflow-scrolling: touch }
.families button { flex: none }

/* Table, landscape (1024 and wider): slim side panel */
#play { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 52px 1fr; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right) }
.topbar { gap: 10px; padding: 0 14px }
.topbar .tag { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.felt { inset: 34px 40px 24px; border-width: 12px }
.seat { width: 200px }
.seat .nm { max-width: 110px }
#seats.crowd .seat { width: 170px }
#seats.crowd .seat .nm { max-width: 84px }
.myarea { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); gap: 16px }
.myhand .c { width: 66px; height: 94px; font-size: 18px }
.sbox { padding: 12px 14px }
.log { font-size: 12.5px }

/* Table, portrait: the felt gets the full width; log and chat slide in from the right */
@media (max-width: 1023px) {
  #play { grid-template-columns: minmax(0, 1fr) }
  .topbar .tag { display: none }
  .raisebox { display: flex; width: 100%; justify-content: center }
  .raisebox input[type=range] { flex: 1; width: auto }
  .raisebox > .btn { flex: 1 1 100% }
  .topbar { grid-column: 1 }
  .sideBtn { display: inline-flex; align-items: center }
  .side {
    position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 86vw; z-index: 40;
    transform: translateX(100%); transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0,0,0,.5);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  }
  #play.side-open .side { transform: none }
  #play.side-open .sideShade { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39 }
  .tablewrap { min-height: 520px }
  .felt { inset: 40px 26px 28px; border-radius: 180px }
  .seat { width: 170px }
  .seat .nm { max-width: 92px }
  #seats.crowd .seat { width: 150px }
  .myarea { grid-template-columns: 1fr; gap: 8px; min-height: 0 }
  .myhand { justify-content: center; padding-top: 14px; padding-bottom: 18px; overflow-x: auto }
  .panel { text-align: center }
  .panel .btns { justify-content: center }
  .lobbygrid { grid-template-columns: 1fr }
  .resrow { grid-template-columns: 140px 1fr 90px }
}

/* Sheets fit the screen and scroll on their own */
.sheet { max-height: 86vh; -webkit-overflow-scrolling: touch }