/* ================== RESET ================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ================== BODY ================== */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ================== AVISO ROTACIÓN ================== */
#rotateNotice {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 9999;
}

/* ================== CONTENEDOR JUEGO ================== */
#gameRoot {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================== TABLERO (SOLUCIÓN REAL) ================== */
#board {
  width: 100vw;
  height: 56.25vw; /* 16:9 EXACTO */

  max-height: 100vh;
  max-width: 177.78vh;

  background-image: url("img/fondo/tablero.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-color: #000;
}

/* ================== peon ================== */
.token {
  position: absolute;
  width: 5vw;
  max-width: 40px;
  aspect-ratio: 1;
  background: red; /* luego será imagen */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ================== FORZAR LANDSCAPE ================== */
@media (orientation: portrait) {
  #gameRoot {
    display: none;
  }
  #rotateNotice {
    display: flex;
  }
}