/* ==========================================================================
   THE PAGE — there is almost nothing here on purpose.

   The whole game is drawn on ONE canvas, full screen, scaled to fit (see
   src/ui/stage.js). The palette, the type, the card frames and every mark on
   the table live in src/ui/paint.js, because a canvas cannot read a
   stylesheet. What is left for css is the page the canvas sits in: a black
   ground with no scrollbars and no margins, so the table can fill the window
   at any size.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--table);
  /* A PHONE IS NOT A DOCUMENT. Without these the table rubber-bands when a drag
     runs off a card, pinches to zoom mid-fight, and flashes a grey box under
     every tap. None of that is behaviour a card table has. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  position: fixed;
  inset: 0;
}

body {
  color: var(--ink);
  font-family: var(--font-label);
  -webkit-font-smoothing: antialiased;
}

/* the table fills the window; the canvas handles its own letterboxing */
#table {
  display: block;
  width: 100%;
  height: 100%;
  /* `manipulation` still allows double-tap zoom, which fires when a player
     taps a card twice quickly — which is exactly what playing a card is */
  touch-action: none;
}

/* FROZEN self-test target — read by the headless lane, never seen by a player */
#selftest-result {
  position: fixed;
  left: 0;
  bottom: 0;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--dim);
  opacity: 0.5;
  pointer-events: none;
}