html {
  font-family: sans-serif;
  font-size: 1em;
  box-sizing: border-box;
}

main, footer {
  padding: 1rem;
}


@media (orientation: landscape) {
  :root {
    --card-height: 24vh;
    --card-width: calc(var(--card-height) * (500/726));
    --play-area-height: var(--card-height);
  }
}

@media (orientation: portrait) {
  :root {
    --card-width: 9vw;
    --card-height: calc(var(--card-width) * (726/500));
    --play-area-height: calc(49vh - var(--card-height));
  }
}

.tableau {
  max-width: 99%;
  display: grid;
  grid-template-columns: repeat(11, var(--card-width));
  background-color: green;
  place-content: center;
}

.tableau > div {
  touch-action: none;
  border: 1px solid #999999;
  border-radius: 3px;
  place-content: center;
}

.play-area {
  height: var(--play-area-height);
}

.card-holder {
  height: var(--card-height);
}

.card {
  width: calc(var(--card-width) - 3px);
  height: calc(var(--card-height) - 3px);
}

.cardText {
  touch-action: none;
  position: absolute;
  visibility: hidden;
  font-size: calc(0.5 * var(--card-height));
  color: black;
  z-index: 2;
}

#trailAscend, #trailTraverse, #trailDescend {
  grid-column: 2 / span 5;
}

#playAscend, #playTraverse, #playDescend {
  grid-column: 7 / span 5;
}

#trailAscend, #trailTraverse, #trailDescend,
#playAscend, #playTraverse, #playDescend {
  text-align: right;
  font-size: 2rem;
  color: #999999;
}

#msg {
  touch-action: none;
  font-size: 1rem;
  text-align: left;
  padding: 1rem;
  color: black;
}