:root {
  font-family: system-ui;
  font-size: 1rem;
  box-sizing: border-box; /* default content-box */
}

@media (orientation: landscape) {
  :root {
    --tile-side: 11vh;
  }
}

@media (orientation: portrait) {
  :root {
    --tile-side: 11vw;
  }
}

.tableau {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, var(--tile-side));
  justify-content: center;
  align-content: center;
  gap: 0;
  max-width: 99%;
  background-color: blue;
}

.tableau > div {
  touch-action: none;
  text-align: center; 
}

.tile {
  touch-action: none;
  width: var(--tile-side);
  height: var(--tile-side);
}

.tileText {
  touch-action: none;
  position: absolute;
  visibility: hidden;
  font-size: calc(0.7 * var(--tile-side));
  color: red;
  z-index: 2;
}


.msgBox {
  grid-column: 2 / span 4;
}

#msg {
  justify-self: start;
  align-content: center;
}

#newgame {
  place-content: center;
}