:root{--ink: #1b1b1f;--paper: #f6f6f2;--accent: #f7d23e}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:#bfe3f2;overflow:hidden;overscroll-behavior:none}body{font:600 14px/1.2 ui-monospace,Menlo,monospace;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none}.app{position:fixed;top:0;right:0;bottom:0;left:0}.app canvas{image-rendering:pixelated;image-rendering:crisp-edges}.hud.top{position:absolute;top:max(12px,env(safe-area-inset-top));left:16px;right:16px;display:flex;gap:6px;align-items:center}.hud select,.hud button{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:0;padding:6px 8px;box-shadow:3px 3px 0 var(--ink)}.hud button[aria-pressed=true]{background:var(--accent)}.hud select{min-width:0;flex:0 1 auto}.fps{margin-left:auto;font-size:12px;white-space:nowrap;background:var(--ink);color:var(--paper);padding:4px 8px}.toast{position:absolute;left:50%;bottom:calc(190px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--paper);border:3px solid var(--ink);padding:8px 14px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}.dpad{position:absolute;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));width:156px;height:156px;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr)}.dpad button{font-size:20px;color:var(--paper);background:#1b1b1fc7;border:0;touch-action:none}.dpad button:active{background:var(--ink);color:var(--accent)}.dpad .up{grid-area:1 / 2;border-radius:8px 8px 0 0}.dpad .left{grid-area:2 / 1;border-radius:8px 0 0 8px}.dpad .right{grid-area:2 / 3;border-radius:0 8px 8px 0}.dpad .down{grid-area:3 / 2;border-radius:0 0 8px 8px}