/* =========================================================
   Altar Místico — Hoja de estilos principal
   Fase 1: Estilos base para centrar el juego en pantalla
   ========================================================= */

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Página: fondo negro y juego centrado */
html,
body {
  width: 100%;
  height: 100%;
  background-color: #000000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Georgia, "Times New Roman", serif;
}

/* Contenedor del juego (Phaser monta el canvas aquí) */
#game {
  display: block;
  line-height: 0;
  position: relative; /* Necesario para anclar #game-dom en esquinas */
}

/* ---------------------------------------------------------
   FIX: el DOM container que Phaser crea para los inputs
   (id "<parent>-dom", es decir "game-dom") NO escala con
   el canvas cuando se usa Phaser.Scale.FIT. Esto provocaba
   que los <input> se desalinearan respecto a las etiquetas
   y, como efecto colateral, que ambos inputs reaccionaran
   al teclado (el click caía en el input equivocado).

   Solución: le damos el mismo tamaño lógico que el juego
   (960x640) y dejamos que JS le aplique un transform: scale
   sincronizado con el canvas en cada resize.
   --------------------------------------------------------- */
#game-dom {
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 640px;
  transform-origin: 0 0;
  pointer-events: none;       /* el canvas recibe clicks por defecto */
  z-index: 1;                 /* encima del canvas */
}
#game-dom > * {
  pointer-events: auto;       /* pero los inputs SÍ son clickeables */
}