html, body, #canvas { margin: 0; padding: 0; border: 0; }
body { color: #eef0e2; background-color: #0c1512; overflow: hidden; touch-action: none; }
#canvas { display: block; }
#canvas:focus { outline: none; }
#status, #status-splash, #status-progress { position: absolute; left: 0; right: 0; }
#status, #status-splash { top: 0; bottom: 0; }
#status { background-color: #0c1512; display: flex; flex-direction: column; justify-content: center; align-items: center; visibility: hidden; font-family: 'Noto Sans', 'DejaVu Sans', Arial, sans-serif; }
#status-splash { max-height: 100%; max-width: 100%; margin: auto; }
#status-splash.show-image--false { display: none; }
#status-splash.fullsize--true { height: 100%; width: 100%; object-fit: contain; }
#status-splash.use-filter--false { image-rendering: pixelated; }
#status-label { position: absolute; bottom: 14%; margin: 0; letter-spacing: 0.08em; color: #f2c46b; }
#status-progress, #status-notice { display: none; }
#status-progress { bottom: 10%; width: 50%; margin: 0 auto; accent-color: #9fd27a; }
#status-notice { background-color: #3b2a22; border-radius: 0.5rem; border: 1px solid #ef8a6f; color: #eef0e2; line-height: 1.3; margin: 0 2rem; overflow: hidden; padding: 1rem; text-align: center; z-index: 1; }