/* Kotek Biegacz — nadpisania nad wspólnym assets/css/game.css */

body {
  /* bez "pociągnij, aby odświeżyć" i gumowego odbicia w trakcie grania */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*
 * Wspólny arkusz zakłada kwadratową planszę (`aspect-ratio: 1; max-width: 520px`),
 * a ta gra ma format 900×320. Poniższe nadpisania są obowiązkowe — bez nich canvas
 * zostaje spłaszczony do kwadratu. Logika gry i tak liczy się w jednostkach 900×320
 * pobranych z atrybutów canvasu; za skalowanie odpowiada wyłącznie CSS.
 */
canvas {
  max-width: 900px;
  aspect-ratio: 900 / 320;
  height: auto;
  background: #8fd3f4;
  border-color: rgba(255, 255, 255, .18);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  cursor: pointer;
  /* Dotknięcie planszy ma wywołać wyłącznie skok — bez podświetlenia, zaznaczania,
     menu kontekstowego po przytrzymaniu i obramowania fokusu.
     `touch-action: none` (nie `manipulation`) blokuje też przewijanie i zoom. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

canvas:focus,
canvas:active {
  outline: none;
  background: #8fd3f4;
}