@font-face {
  font-family: "GameFont";
  src: url("./fonts/edmunds/edmunds.ttf") format("truetype");
}

@font-face {
  font-family: "GameText";
  src: url("./fonts/PT_Sans/PTSans-Bold.ttf") format("truetype");
}

:root {
  --game-max-width: 720px;
  --game-max-height: 480px;
  --page-gap: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --edge-top: max(var(--page-gap), var(--safe-top));
  --edge-right: max(var(--page-gap), var(--safe-right));
  --edge-bottom: max(var(--page-gap), var(--safe-bottom));
  --edge-left: max(var(--page-gap), var(--safe-left));
  --page-background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 210, 92, 0.55),
      transparent 26%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 111, 0, 0.35),
      transparent 24%
    ),
    linear-gradient(135deg, #4c2408 0%, #9a4f13 42%, #d99235 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html {
  background: #1b0f06;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: GameText, Arial, Helvetica, sans-serif;
  overscroll-behavior: none;
  background: var(--page-background);
}

body.fullscreen-scroll-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

button {
  font: inherit;
}

button,
[role="button"] {
  cursor: pointer;
}

#game-container {
  position: relative;
  flex: 0 0 auto;
  width: min(var(--game-max-width), 100%);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  background: #1b0f06;
  box-shadow:
    0 0 0 4px rgba(255, 194, 87, 0.22),
    0 22px 60px rgba(0, 0, 0, 0.48);
}

.game-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 187, 75, 0.18),
      transparent 45%
    ),
    linear-gradient(180deg, #6d3109, #1b0f06);
}

canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#game-container.fullscreen-active {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

#game-container.pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

#game-container.fullscreen-active .game-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

.hidden {
  display: none !important;
}