/* República Pixel — página: canvas centralizado e nítido, overlay CRT, campos de texto ocultos. */

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* fundo escuro com xadrez sutil (a sobra da tela fora do canvas) */
body {
  background-color: #0b0a12;
  background-image:
    linear-gradient(45deg, #110f1c 25%, transparent 25%, transparent 75%, #110f1c 75%),
    linear-gradient(45deg, #110f1c 25%, transparent 25%, transparent 75%, #110f1c 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ocupa a área visível; js/tela.js ajusta posição/tamanho ao visualViewport e centraliza o canvas */
#jogo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#jogo canvas {
  display: block;
  position: absolute;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
  outline: none;
}

/* scanlines com período de 1 px virtual (--px, definido por tela.js) + vinheta */
.crt {
  --px: 2px;
  position: absolute;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(var(--px) * 0.55),
      rgba(0, 0, 0, 0.22) calc(var(--px) * 0.55), rgba(0, 0, 0, 0.22) var(--px)),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
}

/* <input> real por baixo do campo desenhado no canvas: recebe o toque e abre o teclado */
.rp-campo {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  opacity: 0.01;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; /* evita o zoom automático do iOS ao focar */
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}