/*
 * Touch behaviour for a site that was written mouse-first.
 *
 * Loaded after each page's own <style>, so the rules here win where they
 * overlap -- except where a page asks for something stricter: touch-action
 * is intersected down the tree, so a canvas that says `none` (Tron, Pong,
 * the 2048 board) keeps saying none inside a container that says
 * `manipulation`.
 */

/* `manipulation` keeps panning and pinch-zoom but drops double-tap zoom.
   Double-tap zoom is what used to swallow the second tap of a two-tap move:
   pick up a checker, tap the destination, and the browser decided the pair
   was a zoom gesture instead. */
#page,
#app,
#gameArea,
#backBar,
#trainBlock,
#thinkBlock,
#article,
#filters,
#tableWrap {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* iOS shows a selection loupe and a callout menu on a long press, which
   collides with the long-press-to-flag in Minesweeper and just gets in the
   way everywhere else on a playfield */
.cell,
.stone,
.opt,
.key,
.tile,
.dot,
canvas,
.gameCard,
.rankRow {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Hover is a mouse idea. On a touch screen the state is applied on tap and
   then sticks until something else is tapped, which reads as "this is
   selected" when nothing is. Only the visible ones are undone here. */
@media (hover: none) {
  #back:hover,
  #globalScore:hover,
  .gameCard:hover { background: #ffff99; }
  .menuTitle:hover,
  .menuItem:hover { background: transparent; }
  .rankRow:hover { background: transparent; }
  .card:hover { background: #ffffff; }
  .key:hover { background: #ffffff; }
  .opt:hover { background: #ffffff; }
  #heroTools a:hover,
  td.game a:hover { text-decoration: none; }
}