/* NFA Donkey Poker — iPhone (up to 767px wide, and phones held sideways): one column, thumb-sized controls. */

body { font-size: 14px }
input, select { font-size: 16px; min-height: 42px } /* 16px stops iOS zooming into fields */
.btn { min-height: 44px; padding: 10px 14px }
.btn.big { padding: 12px 16px; font-size: 15px }
.btn.sm { min-height: 34px; padding: 6px 10px; font-size: 12.5px }

/* ---------- lobby ---------- */
#lobby { padding: calc(18px + env(safe-area-inset-top)) 14px calc(36px + env(safe-area-inset-bottom)) }
.brand { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 16px; margin-bottom: 18px }
.brand > div:last-child { text-align: left !important }
.brand h1 { font-size: 50px }
.brand p { font-size: 14px }
.families { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px 14px; padding: 0 14px; scrollbar-width: none }
.families::-webkit-scrollbar { display: none }
.families button { flex: none; font-size: 16px; padding: 9px 14px }
.versions { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px }
.ver { padding: 14px 16px }
.ver .head { font-size: 20px }
.ver small { font-size: 13px }
.lobbygrid { grid-template-columns: 1fr; gap: 12px }
.box { padding: 16px; border-radius: 14px }
.row { gap: 8px }
.row label { min-width: 100%; margin-bottom: -2px }
.row label[style*="min-width:auto"] { min-width: auto !important }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }
.seg::-webkit-scrollbar { display: none }
.seg button { padding: 10px 12px; font-size: 13.5px; flex: none; min-height: 42px }
#nameSet { width: 100% }
.money { grid-template-columns: repeat(3, 1fr) }
.actions .btn.big { flex: 1 1 100% }
.joinrow input { flex: 1; width: auto }

/* ---------- waiting room ---------- */
#room { padding: calc(24px + env(safe-area-inset-top)) 14px 30px }
.code { font-size: 54px }
.seatlist { grid-template-columns: 1fr 1fr }
#roomLink { display: block; word-break: break-all; margin-top: 6px }

/* ---------- table ---------- */
#play { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(46px + env(safe-area-inset-top)) 1fr; -webkit-user-select: none; user-select: none }
#play input { -webkit-user-select: text; user-select: text }
.topbar { grid-column: 1; gap: 6px; padding: env(safe-area-inset-top) 10px 0 }
.topbar .logo { font-size: 15px; white-space: nowrap }
.topbar .tag { display: none }
.sideBtn { display: inline-flex; align-items: center }
#settleBtn { display: none }
.side {
  position: fixed; top: 0; right: 0; bottom: 0; width: 88vw; max-width: 380px; z-index: 40;
  transform: translateX(100%); transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0,0,0,.55);
  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,.55); z-index: 39 }

.tablewrap { min-height: 0; padding: 4px }
.felt { inset: 22px 6px 14px; border-width: 7px; border-radius: 130px }
.center { width: 92%; top: 48% }
.potl { font-size: 10px }
.pot { font-size: 28px }
.status { font-size: 12px; padding: 4px 10px; margin-top: 6px; max-width: 100% }
.wildline { font-size: 11px; margin-top: 6px }
.board { gap: 4px; min-height: 56px; margin: 4px 0 2px }
.board .c, .board .slot { width: 40px; height: 56px; font-size: 13px; padding: 3px }
.board .slot { border-width: 1.5px }

.seat { width: 104px }
#seats.crowd .seat { width: 88px }
.seat .plate { padding: 3px 6px; gap: 4px; border-radius: 8px; max-width: 100%; flex-wrap: wrap; justify-content: center }
.seat .nm { font-size: 11.5px; max-width: 70px }
#seats.crowd .seat .nm { max-width: 56px }
.seat .cpuTag { display: none }
.seat .bal, .seat .stack { font-size: 11px }
.dbtn { width: 15px; height: 15px; font-size: 9px }
.allinTag { font-size: 8.5px }
.seat .cards { margin-top: 3px }
.seat .cards .c { width: 22px; height: 31px; font-size: 9px; padding: 2px; border-radius: 4px }
.seat .cards .c .s { display: none }
.seat .cards .c.back { border-width: 2px }
.seat .cards.many .c + .c { margin-left: -9px }
.seat .cards.lots .c + .c { margin-left: -12px }
.seat .cards .c .wild { top: -6px; right: -5px }
.seat .cards .c .wild i { font-size: 7px; padding: 0 2px }
.seat .say { font-size: 10px; height: 13px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.seat .meta { font-size: 9.5px; white-space: nowrap; overflow: hidden }
.betchip { font-size: 10px; padding: 0 6px }

/* my cards and my move */
.myarea { grid-template-columns: 1fr; gap: 4px; padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); min-height: 0; align-items: stretch }
.myhand { justify-content: center; gap: 5px; padding: 12px 2px 16px; overflow-x: auto; scrollbar-width: none }
.myhand::-webkit-scrollbar { display: none }
.myhand .c { width: 46px; height: 66px; font-size: 14px }
.myhand:has(.c:nth-child(8)) { justify-content: flex-start }
.c .wild i { font-size: 8px }
.c.hidden-mine::before { font-size: 8px; bottom: -13px }
.c.sel { transform: translateY(-9px) }
.panel { text-align: center }
.prompt { font-size: 16px }
.hint { font-size: 12px; margin-bottom: 8px }
.btns { gap: 6px; justify-content: center }
.btns > .btn.big { flex: 1 1 auto; min-width: 30% }
.decl button { min-width: 0; flex: 1 1 22% }
.amts { justify-content: center }
.amts button { padding: 8px 10px; min-height: 38px; font-size: 13px }
.raisebox { display: flex; width: 100%; justify-content: center }
.raisebox > .btn { flex: 1 1 100% }
.raisebox input[type=range] { flex: 1; width: auto; height: 30px }
.raisebox input[type=number] { width: 84px }

/* sheets slide up from the bottom */
.shade { padding: 0; place-items: end stretch }
.sheet { border-radius: 18px 18px 0 0; max-height: 90vh; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch }
.sheet h2 { font-size: 24px }
.resrow { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px }
.resrow > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2 }
.resrow .c { width: 30px; height: 43px; font-size: 11px }
.resrow .cards { flex-wrap: wrap; row-gap: 6px }
.take { font-size: 18px }
.splits div { font-size: 12.5px; padding: 6px 10px }
.toast { bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 90vw; text-align: center }
.splash .head { font-size: 22px; padding: 0 24px }

/* Phone held sideways: felt on the left, my cards and buttons on the right */
@media (orientation: landscape) {
  #play { grid-template-rows: calc(40px + env(safe-area-inset-top)) 1fr; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right) }
  .topbar { padding-top: 0 }
  .main { flex-direction: row }
  .tablewrap { flex: 1 }
  .felt { inset: 16px 30px 10px; border-radius: 110px }
  .myarea { width: 300px; border-top: 0; border-left: 1px solid var(--line); overflow-y: auto; align-content: center }
  .myhand { flex-wrap: wrap; overflow: visible; padding-top: 10px }
  .myhand .c { width: 40px; height: 57px; font-size: 13px }
  .center { top: 50% }
  .board .c, .board .slot { width: 36px; height: 50px }
  .seat { width: 120px }
  .seat .nm { max-width: 80px }
  #seats.crowd .seat { width: 100px }
  #lobby { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)) }
  .versions { grid-template-columns: 1fr 1fr }
}

/* top bar: one line on the narrowest phones */
.topbar .btn.sm { padding: 6px 8px; font-size: 12px; min-height: 32px }
@media (max-width: 400px) { .topbar .logo { font-size: 13px } }
/* nine seats: smaller board so the seats clear it */
#seats.crowd ~ .center .board .c, #seats.crowd ~ .center .board .slot { width: 34px; height: 48px; font-size: 12px }
.tablewrap.crowd .board .c, .tablewrap.crowd .board .slot { width: 34px; height: 48px; font-size: 12px }
.seat .plate { padding: 2px 5px }

/* opponents picker on a phone */
.opp { padding: 12px 10px }
.opphead label { min-width: 0 !important; flex: 1 1 100% }
.setgrid { grid-template-columns: 1fr 1fr }
.lineup { grid-template-columns: 1fr }
.opp1 select { font-size: 16px }

.mystack { justify-content: center; font-size: 12.5px }
.mystack .msk { font-size: 17px }

/* top bar: rules live in the lobby and drawer on phones */
#rulesBtn2 { display: none }
#prefsBtn2 { padding: 6px 9px }
.drawerBtns { display: block }