:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0e1018;color:#eef0f6}body{font:600 12px/1 ui-monospace,Consolas,monospace;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}#screen canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:4px;box-shadow:0 0 0 3px #222a44,0 0 0 6px #0b0e1a,0 12px 40px #00000080}#pad{display:none;width:min(100%,420px);align-items:center;justify-content:space-between;gap:8px}@media(pointer:coarse){#pad{display:flex}}#pad button{font:inherit;color:#eef0f6;background:#2a3354;border:0;box-shadow:inset 0 -3px #161b2e,inset 0 2px #3a4670;touch-action:none}#pad button.on{background:#3a4670;box-shadow:inset 0 2px #161b2e}.dpad{display:grid;grid-template:repeat(3,44px) / repeat(3,44px)}.dpad .up{grid-area:1 / 2;border-radius:6px 6px 0 0}.dpad .left{grid-area:2 / 1;border-radius:6px 0 0 6px}.dpad .right{grid-area:2 / 3;border-radius:0 6px 6px 0}.dpad .down{grid-area:3 / 2;border-radius:0 0 6px 6px}.mid{display:flex;flex-direction:column;gap:10px}.pill{border-radius:12px;padding:7px 10px;font-size:10px!important;letter-spacing:.08em}.ab{display:grid;grid-template:44px 52px / 52px 52px;gap:6px 8px;align-items:center}.ab .b,.ab .a{width:52px;height:52px;border-radius:50%;font-size:16px!important;background:#8a2f4f!important}.ab .a{grid-area:1 / 2 / 3 / 3;align-self:start}.ab .b{grid-area:2 / 1}.ab .drop{grid-area:1 / 1;border-radius:12px;height:32px;font-size:10px!important}