#app{grid-template:"screen"1fr/1fr;width:100%;height:100%;display:grid}#screen{grid-area:screen;min-width:0;min-height:0;position:relative;overflow:hidden}#game{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}body.touch{--ink:#101010;--body:#c8c4be;--dark:#2c2c34;--accent:#a80020;background:var(--body);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;font-family:ui-monospace,Menlo,monospace}body.touch #app{box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body.touch #screen{background:#000}body.touch #app{--dpad:min(160px, 40vw);grid-template:"screen screen""left right"1fr/1fr 1fr}body.touch #screen{aspect-ratio:256/240;width:100%;max-height:58svh}@media (orientation:landscape){body.touch #app{--dpad:min(150px, 17vw, 40svh);grid-template:"left screen right"1fr/1fr auto 1fr}body.touch #screen{width:min(calc(100svh * 256 / 240), calc(100vw - 2 * (var(--dpad) + 40px)));aspect-ratio:auto;height:100%;max-height:none}}.pad-side{grid-template-rows:auto 1fr auto;place-items:center;min-width:0;min-height:0;padding:10px 12px 14px;display:grid}.pad-left{grid-area:left}.pad-right{grid-area:right}button{font:inherit;color:inherit;cursor:pointer;border:0;padding:0}.pad-shoulder{height:34px;color:var(--ink);background:#8c8890;border-radius:10px 10px 4px 4px;justify-self:stretch;font-size:14px;font-weight:700;box-shadow:0 3px #5c5860}.pad-left .pad-shoulder{margin-right:20%}.pad-right .pad-shoulder{margin-left:20%}.pad-dpad{width:var(--dpad);height:var(--dpad);position:relative}.pad-dpad i,.pad-dpad b{background:var(--dark);position:absolute;box-shadow:0 4px #0c0c10}.pad-dpad i{width:34%;height:34%}.pad-dpad b{width:34%;height:34%;box-shadow:none;top:33%;left:33%}.pad-dpad [data-dir=up]{border-radius:6px 6px 0 0;top:0;left:33%}.pad-dpad [data-dir=down]{border-radius:0 0 6px 6px;bottom:0;left:33%}.pad-dpad [data-dir=left]{border-radius:6px 0 0 6px;top:33%;left:0}.pad-dpad [data-dir=right]{border-radius:0 6px 6px 0;top:33%;right:0}.pad-dpad i:after{content:"";background:#4c4c58;border-radius:50%;position:absolute;inset:32%}.pad-dpad i.on{background:#4c4c58;transform:translateY(3px);box-shadow:0 1px #0c0c10}.pad-face{width:calc(var(--dpad) * 1.05);height:var(--dpad);position:relative}.pad-round{aspect-ratio:1;background:var(--accent);color:#fce0a8;border-radius:50%;width:46%;font-size:20px;font-weight:700;position:absolute;box-shadow:0 5px #600010}.pad-round[data-btn=b]{bottom:8%;left:0}.pad-round[data-btn=a]{top:8%;right:0}.pad-pills{gap:10px;display:flex}.pad-left .pad-pills{justify-self:end}.pad-right .pad-pills{justify-self:start}.pad-pill{color:#f0ece6;letter-spacing:1px;background:#6c6870;border-radius:12px;height:24px;padding:0 12px;font-size:11px;box-shadow:0 3px #48444c}.pad-mute.off{opacity:.6;text-decoration:line-through}.pad-shoulder.on,.pad-round.on,.pad-pill.on{box-shadow:none;filter:brightness(1.2);transform:translateY(3px)}@media (orientation:landscape){.pad-left .pad-pills,.pad-right .pad-pills{justify-self:center}.pad-left .pad-shoulder,.pad-right .pad-shoulder{margin:0}}body.touch.pad-hidden{background:#000}body.touch.pad-hidden .pad-side{display:none}body.touch.pad-hidden #app{grid-template:"screen"1fr/1fr}body.touch.pad-hidden #screen{aspect-ratio:auto;width:100%;height:100%;max-height:none}