:root { color-scheme: dark; background: #000; color: #eee7f5; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
#stage { width: 100%; height: 100%; height: 100dvh; }
#game { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
[hidden] { display: none !important; }
#loading { position: fixed; inset: 0; display: grid; place-content: center; background: #000; color: #ffb568; text-align: center; padding: 2rem; }
#loading.error { color: #d2b0ff; }
#power-on { position: fixed; inset: 0; touch-action: manipulation; }
#pumpkin-start { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 42%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#pumpkin-start:disabled { cursor: default; }
#pumpkin-start:focus { outline: none; }
#pumpkin-start:focus-visible { outline: 3px dashed #ffb568; outline-offset: 5px; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#focus-hint { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 9px 16px; border: 1px solid #594265; border-radius: 8px; background: #1b1b22ed; color: #efd8ff; font: 14px/1.3 system-ui, sans-serif; text-align: center; }
#diagnostics { pointer-events: none; position: fixed; top: 8px; left: 8px; max-width: min(640px, calc(100vw - 16px)); max-height: 65vh; overflow: auto; margin: 0; padding: 12px; background: #000e; color: #bef58a; font: 11px/1.35 monospace; white-space: pre-wrap; }