#pad{display:none}body.pad{--shell-top:#e6e9ef;--shell-bottom:#bfc5d0;--bezel:#1c2233;--navy:#24365f;--navy-down:#4361a3;--navy-edge:#13203d;--label:#eef1f7;--graphite:#2c3241;--graphite-down:#4a5674;--silver:#d6dae3;--silver-down:#b4bbc9;--silver-edge:#9aa2b2;--silver-ink:#46506b;--pad:min(44vw, 32dvh, 260px);box-sizing:border-box;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:linear-gradient(var(--shell-top), var(--shell-bottom));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;display:grid;position:relative}body.pad,body.pad *{touch-action:none}html:has(body.pad){background:#e6e9ef}body.pad #pad{display:contents}body.pad #screen{min-width:0;min-height:0;box-shadow:0 0 0 4px var(--bezel);background:#000;grid-area:screen;position:relative;inset:auto}body.pad #hud,body.pad #loading{grid-area:screen;align-self:start}body.pad #loading{justify-self:end;top:10px;bottom:auto}@media (orientation:portrait){body.pad{grid-template:"screen screen"min(75vw - 5px,58dvh)"left right"1fr/1fr 1fr}body.pad #screen{border-radius:4px;margin:10px 10px 0}}@media (orientation:landscape){body.pad{--pad:min(calc(22vw - 28px), 44dvh, 210px);grid-template:"left screen right"1fr/minmax(150px,22vw) 1fr minmax(150px,22vw)}body.pad.keys{--pad:clamp(120px, calc(var(--screen-h) * .5), min(calc(15vw - 50px), 40dvh, 190px));--side:calc(var(--pad) + 56px);--shell:#d9dde5;grid-template:"left screen right" max(calc(var(--screen-h) + 36px), calc(var(--pad) + 190px)) / var(--side) calc(var(--screen-w) + 36px) var(--side);background:#0e121b;place-content:center}html:has(body.pad.keys){background:#0e121b}body.pad.keys #screen{background:var(--shell);box-shadow:none}body.pad.keys #screen>canvas{box-shadow:0 0 0 4px var(--bezel)}body.pad.keys #pad .side{background:var(--shell);padding:18px 12px}body.pad.keys #pad .side.left{border-radius:28px 0 0 28px}body.pad.keys #pad .side.right{border-radius:0 28px 28px 0}}#pad .side{flex-direction:column;justify-content:space-between;align-items:center;gap:12px;min-height:0;padding:14px 12px;display:flex}#pad .side>*{flex-shrink:0}#pad .side.left{grid-area:left}#pad .side.right{grid-area:right}@media (orientation:portrait){body.pad.keys #pad .side{padding-top:46px}}#pad [data-button],#pad .dpad{cursor:pointer}#pad .shoulder{width:min(100%, calc(var(--pad) * 1.15));border:2px solid var(--silver-edge);background:var(--silver);height:clamp(34px,6dvh,48px);color:var(--silver-ink);border-radius:8px 8px 18px 18px;justify-content:center;align-items:center;gap:8px;font:600 18px/1 system-ui,sans-serif;display:flex}#pad .shoulder:is(.held,.lit){background:var(--silver-down)}#pad .dpad{width:var(--pad);height:var(--pad);position:relative}#pad .dpad .arm,#pad .dpad .hub{background:var(--graphite);position:absolute}#pad .dpad .up,#pad .dpad .down{width:34%;height:36%;left:33%}#pad .dpad .left,#pad .dpad .right{width:36%;height:34%;top:33%}#pad .dpad .up{border-radius:6px 6px 0 0;top:0}#pad .dpad .down{border-radius:0 0 6px 6px;bottom:0}#pad .dpad .left{border-radius:6px 0 0 6px;left:0}#pad .dpad .right{border-radius:0 6px 6px 0;right:0}#pad .dpad .hub{width:34%;height:34%;top:33%;left:33%}#pad .dpad .arm:is(.held,.lit){background:var(--graphite-down)}#pad .dpad .arm:after{content:"";border:7px solid #0000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#pad .dpad .up:after{border-bottom-color:#7f89a3;margin-top:-4px}#pad .dpad .down:after{border-top-color:#7f89a3;margin-top:4px}#pad .dpad .left:after{border-right-color:#7f89a3;margin-left:-4px}#pad .dpad .right:after{border-left-color:#7f89a3;margin-left:4px}#pad .face{width:var(--pad);height:var(--pad);position:relative}#pad .round{box-sizing:border-box;border:2px solid var(--navy-edge);background:var(--navy);width:36%;height:36%;color:var(--label);font:600 calc(var(--pad) * .13)/1 system-ui, sans-serif;box-shadow:0 3px 0 var(--navy-edge);border-radius:50%;place-items:center;display:grid;position:absolute}#pad .round:is(.held,.lit){background:var(--navy-down);box-shadow:none;transform:translateY(3px)}#pad .round.x{top:0;left:32%}#pad .round.y{top:32%;left:0}#pad .round.a{top:32%;right:0}#pad .round.b{bottom:0;left:32%}#pad .small{color:var(--silver-ink);letter-spacing:.08em;align-items:center;gap:8px;padding:6px 10px;font:600 12px/1 system-ui,sans-serif;display:flex}#pad .small .pill{border:2px solid var(--silver-edge);background:var(--silver);border-radius:9px;width:34px;height:14px}#pad .small:is(.held,.lit) .pill{background:var(--silver-down)}#pad .key{display:none}body.keys #pad .key{color:#7a8399;letter-spacing:0;white-space:nowrap;font:500 11px/1.2 system-ui,sans-serif;display:block}body.keys #pad :is(.round,.dpad,.shoulder) .key{position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%)}body.keys #pad .shoulder{position:relative}body.keys #pad .dpad .key{top:calc(100% + 6px)}#pad-toggle{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 12px);z-index:3;color:#dfe4ee;cursor:pointer;background:#1c2233b3;border:1px solid #eef1f740;border-radius:6px;padding:6px 10px;font:500 12px/1 system-ui,sans-serif;position:fixed}#pad-toggle:hover{background:#1c2233e6}#pad-toggle[hidden]{display:none}body.pad #pad-toggle{border-color:var(--silver-edge);background:var(--silver);color:var(--silver-ink)}body.pad #pad-toggle:hover{background:var(--silver-down)}body.awaiting-start #pad .round.a{animation:1.4s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 3px 0 var(--navy-edge), 0 0 0 0 #7fa6dde6}to{box-shadow:0 3px 0 var(--navy-edge), 0 0 0 calc(var(--pad) * .07) #7fa6dd00}}#screen>canvas,#start{grid-area:1/1}#start{z-index:1;width:var(--screen-w,100%);height:var(--screen-h,100%);background:#000;transition:opacity .35s ease-out;position:relative;overflow:hidden;container-type:size}#start.gone{opacity:0;pointer-events:none}body:has(#start) #loading{display:none}#start img{width:100%;height:100%;image-rendering:pixelated;display:block}#start .band{background:#13203dc7;place-items:center;padding:2.4cqh 0;display:grid;position:absolute;bottom:7%;left:0;right:0}#start .bar{border:2px solid #eef1f7;border-radius:99px;width:46%;height:max(6px,1.8cqh);overflow:hidden}#start .fill{background:#eef1f7;width:0;height:100%;transition:width .2s ease-out}#start .prompt{color:#eef1f7;letter-spacing:.02em;font:600 max(13px,4.4cqw)/1 system-ui,sans-serif}#start .prompt[hidden],#start .bar[hidden]{display:none}#start .prompt b{color:#13203d;background:#eef1f7;border-radius:.35em;padding:.1em .45em}@media (prefers-reduced-motion:reduce){#pad .round:is(.held,.lit){transform:none}body.awaiting-start #pad .round.a{box-shadow:0 3px 0 var(--navy-edge), 0 0 0 5px #7fa6ddcc;animation:none}#start .fill{transition:none}}