/* ===========================================================================
   GALAGA — estilo
   Quase não há CSS: o jogo é um canvas só. O que existe aqui serve a três
   coisas — fundo preto de verdade, pixel que não borra, e nada que o dedo possa
   arrastar por cima do jogo.

   PRETO ABSOLUTO, ao contrário dos irmãos. LUTA e CORRIDA usam #150713 porque
   imitam tinta impressa sobre papel; um gabinete de 1981 é um tubo CRT com o
   feixe desligado, e ali o preto é #000 mesmo. O letterbox precisa sumir.
   =========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

/* A largura/altura em CSS é escrita pelo JS: o backing store é sempre um
   múltiplo INTEIRO de 224x288 em pixels de dispositivo, e o tamanho em CSS é
   esse número dividido pelo devicePixelRatio. É o que garante vizinho-mais-
   próximo exato — escala fracionária faz uns pixels virarem 2 e outros 3, e a
   arte de 1981 morre nesse detalhe. */
canvas#tela {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* O caminho de volta ao menu do fliperama: apagado como a moldura do gabinete,
   acende em ciano quando o dedo ou o mouse chega perto. Fica no canto do
   letterbox e recupera o toque que o body desliga. */
a#voltar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 10;
  padding: 6px 8px;
  font: 11px/1 ui-monospace, 'Courier New', monospace;
  letter-spacing: .12em;
  color: #555;
  text-decoration: none;
  touch-action: auto;
}

a#voltar:hover, a#voltar:focus-visible { color: #00e8f0; outline: none; }