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

@media (orientation: landscape) {	

  :root {
    --tile-side: 10vh;
  }
  
}

@media (orientation: portrait) {

  :root {
    --tile-side: 10vw;
  }
  
}

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

.tableau > div { /* Child combinator */
  touch-action: none;
}

.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;
}

.counter {
  touch-action: none;
  position: absolute;
  width: calc(var(--tile-side) * 0.6);
  height: calc(var(--tile-side) * 0.6);
  z-index: 1;
}

#msg {
  grid-column: 1 / span 8;
  justify-self: start;
}