*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101614;color:#edf3dc}body{display:grid;place-items:center;touch-action:none}.screen,canvas#screen,canvas.library{width:min(480px,94vw,calc((100dvh - 112px)*1.5));width:min(480px,94vw,calc((100vh - 112px)*1.5));aspect-ratio:3/2;height:auto;image-rendering:pixelated}.screen{position:relative}.screen video{position:absolute;top:0;width:100%;height:91%;object-fit:contain;image-rendering:pixelated}.screen canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.hub-controls{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.hub-controls button{appearance:none;width:44px;height:44px;padding:8px;border:2px solid #a7d07a;border-radius:50%;background:#18251e;color:#edf3dc;touch-action:none;cursor:pointer}.hub-controls button:active{background:#476838}.hub-controls button:focus-visible{outline:3px solid #edf3dc;outline-offset:2px}.hub-controls svg{width:100%;height:100%;fill:currentColor}.hub-controls .back{position:fixed;left:8px;top:8px}.hub-controls .spacer{width:10px}@media(max-width:380px){.hub-controls{gap:3px}.hub-controls button{width:39px;height:39px;padding:8px}.hub-controls .spacer{width:1px}}@media(max-height:360px){.hub-controls button{width:34px;height:34px;padding:6px}.screen,canvas#screen,canvas.library{width:min(480px,90vw,calc((100vh - 76px)*1.5))}}

/* Gameplay uses the full viewport; touch controls float above it. Keep the
   intrinsic framebuffer and aspect ratio intact for sharp pixel-art scaling. */
canvas#screen{width:min(100vw,calc(100vh * 1.5));width:min(100vw,calc(100dvh * 1.5));height:auto;aspect-ratio:3/2;image-rendering:pixelated}