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

html,body {
  width:100%; height:100%; overflow:hidden;
  /* el mismo negro violeta del arranque: lo que sobre alrededor del
     lienzo no se ve, ni asoma un borde de otro color */
  background:#0A0410;
  touch-action:none;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

body { display:flex; justify-content:center; align-items:center; }

#wrap {
  position:fixed; inset:0;
  display:flex; justify-content:center; align-items:center;
  background:#0A0410;
}

canvas { display:block; touch-action:none; user-select:none; }

/* El campo de los nombres. Es un <input> de verdad porque en movil solo
   asi sale el teclado del sistema, pero se dibuja como el resto.

   OJO con las tres ultimas lineas: el body lleva user-select:none y
   touch-action:none para que el juego no seleccione texto ni haga scroll,
   y user-select SI se hereda. Un input que hereda user-select:none no se
   deja escribir en iOS — se ve, se enfoca, y no entra ni una letra. Hay
   que devolverselo aqui a mano. */
#ny-campo {
  position:fixed; display:none; z-index:9998;
  box-sizing:border-box;
  border:4px solid #FF2E88; border-radius:4px;
  background:#160A24; color:#FFEAF4;
  font-family:'Press Start 2P', monospace;
  font-size:16px; text-align:center; text-transform:uppercase;
  letter-spacing:.04em;
  outline:none; -webkit-appearance:none; appearance:none;
  padding:10px 12px;

  -webkit-user-select:text; user-select:text;
  touch-action:manipulation;
  pointer-events:auto;
}
#ny-campo::placeholder { color:#6B4A80; }

/* La camara y el reproductor no se ven nunca: son la fuente de pixeles
   que el juego dibuja en el lienzo. Se dejan de 2px en una esquina en
   vez de display:none porque un video oculto del todo no se decodifica
   en algunos navegadores, y entonces no hay nada que dibujar. */
#ny-cam, #ny-play, #ny-fondo, #ny-logo, #ny-conoc {
  position:fixed; left:-20px; top:-20px;
  width:2px; height:2px; opacity:0; pointer-events:none; z-index:-1;
}