/* Touch play: no browser long-press, selection or double-tap zoom on the board, 44px touch controls, and a larger hand on tablets. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* No rubber-band bounce or pull-to-refresh: the page never scrolls. */
html,body{overscroll-behavior:none}

@media(pointer:coarse){
  .game-shell{touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .game-shell,.card-reveal,[data-match-piece],[data-piece-id],[data-known-piece]{-webkit-touch-callout:none}
  .card-reveal{-webkit-user-select:none;user-select:none}
  /* Apple's minimum touch target. */
  .top-actions>button,.game-menu>summary,.match-toolbar select,.match-toolbar button,.match-mode-label>button,
  .counter-button,.quiet,.board-prompt button.quiet,.piece-popover button,.fit-pager button,.dialog-close,.ai-speed select{min-height:44px}
  .board-prompt button.quiet{height:44px}
  .turn-commands #reset{width:44px;height:44px;min-width:44px}
  .dialog-close,.piece-popover-head button{min-width:44px}
  .payment-source{min-height:44px;min-width:44px}
  /* A held reveal sits beside the finger, which covers the piece itself. */
  .card-reveal{pointer-events:none}
}

/* Taps leave :hover behind on touch screens, so hover lifts would stick until the next tap. */
@media(hover:none){
  .hand-card:hover{transform:none}
  .unit:hover .piece-cutout{transform:none}
}

/* Tablets and laptops: the board has height to spare, so the hand shows tall cards with their art. */
@media(min-width:700px) and (min-height:700px){
  body[data-mode=match]{--hand-card-h:clamp(112px,15.5vh,196px)}
  body[data-mode=match] .arena{grid-template-rows:var(--resource-row,104px) minmax(0,1fr) fit-content(28%) minmax(0,1fr) var(--resource-row,104px) calc(var(--hand-card-h) + 34px)!important}
  body[data-mode=match] .hand-card{height:var(--hand-card-h)!important;flex:0 1 calc(var(--hand-card-h)*.74)!important;max-width:calc(var(--hand-card-h)*.74)}
  body[data-mode=match] .piece--hand .piece-identity{left:7px;right:7px}
  /* Names scale with the card so a long word fits whole instead of breaking mid-word. */
  body[data-mode=match] .piece--hand .piece-name{font-size:clamp(11px,calc(var(--hand-card-h)*.105),14px);overflow-wrap:normal;word-break:normal}
  body[data-mode=match] .piece--hand .dr-pip{width:22px;min-width:22px;height:22px;font-size:12px}
  /* Short desktop windows shrink resource nodes to 42px; a finger needs more. */
  body[data-mode=match] .resource{min-width:48px;min-height:48px}
}
@media(min-width:700px) and (min-height:700px) and (orientation:landscape){
  /* Sideways, height is scarce: slimmer resource rows and hand leave the battlefield room for its figures. */
  body[data-mode=match]{--hand-card-h:clamp(100px,14vh,132px);--resource-row:88px}
  body[data-mode=match] .hand-card{flex-basis:calc(var(--hand-card-h)*.8)!important;max-width:calc(var(--hand-card-h)*.8)}
}