:root {
  color-scheme: dark;
  --ink: #f7ead2;
  --muted: #bca985;
  --gold: #f3b84b;
  --red: #b32318;
  --crimson: #6b1012;
  --steel: #15181d;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050506;
  color: var(--ink);
  font-family: "Trebuchet MS", "Arial Narrow", system-ui, sans-serif;
}

#gameShell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(189, 40, 16, 0.2), transparent 34%),
    linear-gradient(180deg, #13100f, #040405 58%, #020202);
}

#gameCanvas {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  max-width: 100vw;
  max-height: 100vh;
  image-rendering: auto;
  box-shadow: 0 0 0 1px rgba(243, 184, 75, 0.25), 0 28px 80px rgba(0, 0, 0, 0.72);
  background: #070707;
}

@media (orientation: portrait) and (max-width: 700px) {
  #gameCanvas {
    width: min(100vh, calc(100vw * 16 / 9));
    height: min(100vw, calc(100vh * 9 / 16));
    transform: rotate(90deg);
    transform-origin: center;
  }
}

.boot-overlay {
  display: none;
}

.boot-overlay.hidden {
  display: none;
}