/* Hueward — page frame only.
   The HUD lives under #hud and is owned entirely by src/ui.js + src/ui.css; the only rule
   here that touches it is the positioning of the mount itself. */

html, body {
  margin: 0;
  height: 100%;
  background: #08070c;
  overflow: hidden;
  color: #ece6d6;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  /* a faint paper tooth behind the letterbox bars, so the frame is never a dead black */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(70, 62, 84, 0.35), rgba(0, 0, 0, 0) 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
}

#wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stage is exactly the letterboxed canvas box, so the HUD can lay itself out in
   percentages and stay glued to the picture at any window size. --ui-scale is the ratio
   of the on-screen box to the 960x540 design grid; src/ui.css may use it to scale text. */
#stage {
  position: relative;
  --ui-scale: 1;
  box-shadow: 0 0 0 1px rgba(185, 179, 184, 0.16), 0 24px 70px rgba(0, 0, 0, 0.75);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

#hud {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}