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

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: grid; place-items: center; color: #ccc; font: 14px Verdana, Tahoma, sans-serif; }
#stage { position: relative; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
#stage canvas, #stage img { position: absolute; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fallback { display: none; padding: 16px; max-width: 30rem; }
.fallback a { color: #88c088; }
body.no3d #stage { display: none; }
/* Now playing (hub.js): text over the HUD at its scale, so the composer's
   name can be a link to their page. */
#np { position: absolute; right: calc(6px * var(--s, 1)); bottom: calc(5px * var(--s, 1)); text-align: right; pointer-events: none;
  font: calc(12px * var(--s, 1))/1 "VT323", monospace; color: #8a8aa0; text-shadow: calc(1px * var(--s, 1)) calc(1px * var(--s, 1)) 0 #000; }
#np p { margin: 0; white-space: nowrap; }
#np a { color: #c8c8e0; pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
body.no3d .fallback { display: block; }