:root { color-scheme: dark; background: #080608; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: #080608; }
.home-page { min-height: 100vh; overflow: hidden; display: grid; place-items: center; }
.home-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  flex: 0 0 auto;
}
.home-approved-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home-hotspot { position: absolute; z-index: 2; display: block; border-radius: 2.5%; }
.home-hotspot[href] { cursor: pointer; }
.home-hotspot:focus-visible { outline: 3px solid #f5d68e; outline-offset: 4px; }
.hotspot-solo { left: 9.81%; top: 45.91%; width: 33.91%; height: 13.28%; }
.hotspot-multiplayer { left: 9.93%; top: 60.04%; width: 33.79%; height: 11.16%; cursor: not-allowed; }
.hotspot-rules { left: 9.93%; top: 72.48%; width: 33.73%; height: 12%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }