/* The page is a frame around one canvas. Everything visual is drawn in-game. */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #120c07;
  color: #a08a72;
  font: 13px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  display: grid;
  place-items: center;
}

main {
  display: grid;
  justify-items: center;
  gap: 10px;
}

#game {
  display: block;
  /* Keep the upscale hard-edged: the whole point of a 320x180 backing store. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #3f6fa8;
  border: 2px solid #2a1a0d;
  box-shadow: 0 0 0 1px #000, 0 10px 40px rgb(0 0 0 / 60%);
  cursor: pointer;
  touch-action: manipulation;
}

#hint {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-size: 12px;
}

/* Below roughly one integer scale of headroom, drop the chrome and let the
   canvas have the whole viewport. */
@media (max-height: 460px) {
  #hint {
    display: none;
  }
}