html,
body {
  margin: 0;
  height: 100%;
  background: #0f131b;
  overflow: hidden;
}

#jogo {
  width: 100vw;
  height: 100vh;
}

canvas {
  display: block;
}

#girar {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #141a26;
  color: #fff4dc;
  font-family: Fredoka, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
}

#girar[hidden] {
  display: none;
}

#girar .cartao {
  max-width: 320px;
  padding: 24px;
  border: 3px solid #2b2233;
  border-radius: 20px;
  background: #fff4dc;
  color: #2b2233;
}

#girar .titulo {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
}

#girar p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.4;
}

#girar button {
  padding: 12px 20px;
  border: 3px solid #2b2233;
  border-radius: 22px;
  border-bottom-width: 6px;
  background: #ff8a4c;
  color: #fff4dc;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}

#girar button:active {
  border-bottom-width: 3px;
  transform: translateY(3px);
}

/* Fredoka no próprio site (variável, pesos 300 a 700): funciona sem internet depois da primeira visita. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fredoka-latin.woff2') format('woff2');
}

/* Estande: nada de selecionar texto ou arrastar o canvas sem querer. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}