/* NFA Donkey Poker — desktop (1280px and wider): three panes, mouse and keyboard. */

/* Hover and keyboard focus only where there is a mouse */
@media (hover: hover) {
  .c.pick:hover { transform: translateY(-6px) }
  .c.pick.sel:hover { transform: translateY(-12px) }
  .ver:hover { border-color: #555 }
  .families button:hover:not([aria-pressed=true]) { border-color: #555; color: var(--ink) }
  .seg button:hover:not([aria-pressed=true]) { color: var(--ink) }
  .amts button:hover:not([aria-pressed=true]) { border-color: #666 }
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* The table: felt, my hand underneath, game info and log down the right */
#play { grid-template-columns: minmax(0, 1fr) 340px }
.tablewrap { min-height: 440px }

/* Big monitors: more room for the felt and the cards */
@media (min-width: 1600px) {
  #play { grid-template-columns: minmax(0, 1fr) 380px }
  .felt { inset: 48px 110px 36px }
  .c { width: 70px; height: 98px }
  .board .slot { width: 70px; height: 98px }
  .myhand .c { width: 82px; height: 116px; font-size: 21px }
  .seat .cards .c { width: 38px; height: 54px; font-size: 14px }
  .pot { font-size: 52px }
  #lobby { max-width: 1280px }
}
@media (min-width: 1900px) {
  #play { grid-template-columns: minmax(0, 1fr) 420px }
  .myhand .c { width: 92px; height: 130px; font-size: 23px }
  .seat .cards .c { width: 42px; height: 60px; font-size: 15px }
  .seat { width: 280px }
  .seat .nm { max-width: 170px }
}

/* Short laptop screens: keep the felt from squashing */
@media (max-height: 820px) {
  .myarea { min-height: 170px; padding-top: 8px; padding-bottom: 10px }
  .myhand { padding-top: 12px; padding-bottom: 14px }
  .myhand .c { width: 64px; height: 90px; font-size: 17px }
  .tablewrap { min-height: 380px }
}