html, body, #canvas { margin: 0; padding: 0; border: 0; }
/* the front end's night sky (ui/frontend_style.gd), so the page does not flash a different colour before the canvas */
body { color: #f2f3ff; background: linear-gradient(180deg, #141d66, #4d44a4) fixed; background-color: #4d44a4; overflow: hidden; touch-action: none; }
#canvas { display: block; width: 100vw; height: 100vh; }
#canvas:focus { outline: none; }
#status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 16px sans-serif; }
#status-bar { width: min(320px, 70vw); height: 12px; border-radius: 6px; background: rgba(255,255,255,.35); overflow: hidden; }
#status-fill { width: 0; height: 100%; background: #ffd23f; }
#status-notice { margin-top: 12px; max-width: 80vw; text-align: center; }