/* Il Grimorio a tutta pagina: il gioco sopra, la barra dei tasti sotto. */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/pixelify-sans.ttf") format("truetype");
}
:root {
  --grg-notte: #0d0a14;
  --grg-carta: #efe2c4;
  --grg-inchiostro: #3a2a1e;
  --grg-viola: #9b7fd0;
  --grg-oro: #f2c94c;
}
html, body.grg-body { margin: 0; height: 100%; background: var(--grg-notte); color: var(--grg-carta); }
.grg { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--grg-notte); }
.grg-game { flex: 1 1 auto; min-height: 0; }
.grg-loading { font-family: "Pixelify Sans", system-ui, sans-serif; margin: auto; }
.grg-keys {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem 1rem .55rem;
  border-top: 2px solid #2f2049;
  background: #1a1423;
  font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.2;
}
.grg-keys ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.3rem; margin: 0 auto; padding: 0; list-style: none; }
.grg-keys li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; color: #d8cfe8; }
.grg-keys kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: .05em .45em .12em;
  border: 2px solid var(--grg-inchiostro);
  border-bottom-width: 4px;
  border-radius: 5px;
  background: var(--grg-carta);
  color: var(--grg-inchiostro);
  font: inherit;
  font-weight: 600;
  text-align: center;
}
.grg-back { color: var(--grg-viola); text-decoration: none; font-size: 13px; white-space: nowrap; }
.grg-back:hover, .grg-back:focus-visible { color: var(--grg-oro); }
.grg:fullscreen { width: 100vw; height: 100vh; }
@media (max-width: 760px) { .grg-back { display: none; } .grg-keys { font-size: 13px; } }