@font-face {
  font-family: "avenir-bold";
  src: url("../res/typo/AvenirLTStd-Black.otf") format('opentype');
}
@font-face {
  font-family: "avenir";
  src: url("../res/typo/AvenirLTStd-Roman.otf") format('opentype');
}
svg {
  --color-card: #048dff;
  --color-bg: #00569d;
  --color-slot: #b2dbff;
}
* {
  box-sizing: border-box;
}
#qs-ref {
  height: 30em;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: min(5vw, 1cm);
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
body > .content {
  background-color: #00569d;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  font-family: "avenir", sans-serif;
  text-align: center;
  color: white;
}
section.title {
  padding: 1em;
}
section.title span {
  font-family: "avenir-bold", "avenir", sans-serif;
  font-size: 2em;
  white-space: nowrap;
}
section.game > .content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
section.game .player-hand .card {
  margin: 1.2em;
  margin-bottom: 0;
  margin-top: .5em;
}
section.game .player-hand .card img,
section.game .player-hand .card svg {
  float: left;
  width: 3em;
}
section.game .board span {
  font-size: .5em;
}
section.game .board .card {
  display: flex;
  justify-content: center;
  margin-top: .5em;
}
section.game .board .card img,
section.game .board .card svg {
  float: left;
  width: 7.2em;
}
section.bottom > .content {
  display: flex;
  justify-content: space-between;
  margin: 1.8em;
  margin-top: 1em;
  margin-bottom: 1em;
}
section.bottom .message,
section.bottom .score {
  font-size: .5em;
}
.dialog.hidden > .content {
  top: -100%;
}
.dialog.hidden .backdrop {
  visibility: hidden;
  opacity: 0;
}
.dialog .backdrop {
  transition: opacity .5s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000099;
}
.dialog .buttons {
  margin: 1em;
}
.dialog button {
  border: 0;
  outline: 0;
  background-color: #2fd049;
  color: white;
  padding: .5em;
  padding-right: 1em;
  padding-left: 1em;
  font-size: .8em;
  border-radius: .3em;
  transition: all .2s;
}
.dialog button.removed {
  display: none;
}
.dialog button:hover {
  background-color: #57e16d;
}
.dialog button.hidden {
  opacity: 0;
}
.dialog > .content {
  transition: top .5s;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1em;
  border-radius: 15px;
  color: black;
  width: max-content;
  max-width: 90%;
  overflow: auto;
  max-height: 90%;
}
.dialog.prompt .coins {
  display: flex;
  justify-content: center;
  width: 16em;
  height: 4em;
}
.dialog.prompt .coins .coin {
  width: 3em;
  height: 3em;
  background-image: url(../res/coin-head.svg);
  background-size: 100%;
  margin: 0.5em;
  transition: opacity 1s;
}
.dialog.prompt .coins .coin.hidden {
  opacity: 0;
}
.dialog.prompt .coins .coin.tail {
  background-image: url(../res/coin-tail.svg);
}
.dialog.welcome .buttons {
  display: flex;
}
.dialog.welcome .buttons button.selected {
  background: #1d7b2c;
}
.dialog.welcome .buttons button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: .5em;
  border-right: 1px solid lightgrey;
}
.dialog.welcome .buttons button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: .5em;
}
.dialog.welcome .settings {
  text-align: left;
  margin: 1em;
  font-size: .5em;
  display: grid;
  align-items: center;
  grid-auto-columns: max-content;
  grid-gap: 10px;
  grid-template-areas: "label input";
  transition: opacity .2s;
}
.dialog.welcome .settings.hidden {
  opacity: 0;
}
.dialog.welcome .settings label {
  user-select: none;
}
.dialog.welcome .settings *:nth-child(2n) {
  justify-self: end;
}
.dialog.welcome .settings input[type=number] {
  width: 5em;
}