* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111; font-family: system-ui, sans-serif; }
body { display: grid; place-items: center; }
#canvas { display: none; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 0; outline: none; touch-action: none; background: #111; }
#canvas.active { display: block; }
#canvas.paused { filter: brightness(.45); }
#canvas.unpaused { filter: none; }
.loading { position: fixed; z-index: 2; inset: 0; display: grid; place-content: center; gap: .75rem; padding: 2rem; color: #fff; background: #111; text-align: center; }
.emscripten { font: 600 16px/1.5 system-ui, sans-serif; }
#spinner { width: 28px; height: 28px; margin: auto; border: 3px solid #777; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
progress { width: min(70vw, 360px); height: 8px; accent-color: #df2929; }
#pauseMenuContainer:not([hidden]) { position: fixed; z-index: 3; inset: 0; display: grid; place-items: center; background: #0009; }
#pauseMenu { display: grid; gap: .75rem; min-width: 12rem; padding: 1.5rem; border: 4px solid #d72323; background: #171717; }
#pauseMenu button { min-height: 2.75rem; border: 0; color: #fff; background: #b71e1e; font: 700 1rem system-ui, sans-serif; cursor: pointer; }
#message-container:not([hidden]) { position: fixed; z-index: 4; top: 1rem; left: 1rem; max-width: min(90vw, 32rem); padding: .75rem 1rem; color: #fff; background: #222e; font: 14px/1.45 system-ui, sans-serif; }
#unity-error:not([hidden]) { position: fixed; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; max-height: 35vh; overflow: auto; padding: .8rem 1rem; color: #fff; background: #7c1d1d; white-space: pre-wrap; font: 14px/1.4 system-ui, sans-serif; }
body.scrollingDisabled { overflow: hidden; }