:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}#safe-probe{width:0;height:0;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);visibility:hidden;pointer-events:none;position:fixed;top:0;left:0}html,body,#app,#app *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#000;width:100%;height:100%;margin:0;padding:0}#app{touch-action:none;overscroll-behavior:none;background:#000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#screen{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;justify-content:center;align-items:center;display:flex}#screen canvas{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;max-width:100%;max-height:100%;display:block}#pad{--pad-scale:1;--dpad-size:calc(96px * var(--pad-scale));--ab-size:calc(120px * var(--pad-scale));--pill-hit:calc(58px * var(--pad-scale));--side-space:0px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#pad[data-pad-size=S]{--pad-scale:.85}#pad[data-pad-size=M]{--pad-scale:1}#pad[data-pad-size=L]{--pad-scale:1.15}#pad.pad-hidden{display:none}.pad-col{flex-direction:column;align-items:center;display:flex}.pad-dpad{width:var(--dpad-size);height:var(--dpad-size);background:#2b2b38;border-radius:18%;flex:none;position:relative;box-shadow:inset 0 0 0 2px #16161c,0 2px 3px #00000080}.pad-dpad-hub,.pad-dpad-arrow{pointer-events:none;background:#55556a;position:absolute}.pad-dpad-hub{background:#1c1c24;border-radius:50%;width:28%;height:28%;top:50%;left:50%;transform:translate(-50%,-50%)}.pad-dpad-up,.pad-dpad-down{width:32%;height:38%;left:34%}.pad-dpad-left,.pad-dpad-right{width:38%;height:32%;top:34%}.pad-dpad-up{border-radius:20% 20% 6px 6px;top:2%}.pad-dpad-down{border-radius:6px 6px 20% 20%;bottom:2%}.pad-dpad-left{border-radius:20% 6px 6px 20%;left:2%}.pad-dpad-right{border-radius:6px 20% 20% 6px;right:2%}.pad-ab{width:var(--ab-size);height:var(--ab-size);flex:none;position:relative}.pad-btn{pointer-events:none;width:48%;height:48%;font:700 calc(var(--ab-size) * .125) / 1 ui-monospace, monospace;color:#16161c;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 -3px #00000040,0 2px 3px #0006}.pad-btn-b{background:#e46a36;top:62%;left:25%}.pad-btn-a{background:#a8cf3a;top:38%;left:75%}.pad-pill{width:var(--pill-hit);height:var(--pill-hit);flex:none;justify-content:center;align-items:center;display:flex}.pad-pill-visual{color:#d8d8e6;pointer-events:none;width:100%;height:44%;font:700 calc(9px * var(--pad-scale)) / 1 ui-monospace, monospace;letter-spacing:1px;background:#4a4a5c;border-radius:999px;justify-content:center;align-items:center;display:flex;box-shadow:inset 0 0 0 1px #2a2a34}body[data-layout=desktop] #pad{display:none}body[data-layout=portrait] #app{flex-direction:column;justify-content:flex-start;align-items:stretch}body[data-layout=portrait] #screen{padding:calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) 20px calc(6px + var(--safe-l));background:#3a3a4a;border-radius:0 0 28px 28px;flex:none;position:relative;box-shadow:inset 0 0 0 3px #24242e,0 6px 14px #00000080}body[data-layout=portrait] #screen canvas{border:3px solid #16161c;border-radius:3px}body[data-layout=portrait] #screen:after{content:"DINK QUEST";text-align:center;color:#8f8fa8;letter-spacing:3px;font:700 10px/1 ui-monospace,monospace;position:absolute;bottom:5px;left:0;right:0}body[data-layout=portrait] #pad{--dpad-size:min(calc(min(34vw, 150px) * var(--pad-scale)), 38vw);--ab-size:min(calc(max(120px, min(42vw, 184px)) * var(--pad-scale)), 46vw);--pill-hit:calc(60px * var(--pad-scale));width:100%;max-width:520px;padding:10px calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l));box-sizing:border-box;flex:auto;grid-template-rows:auto auto;grid-template-columns:1fr auto auto 1fr;align-content:center;align-items:center;gap:4px 14px;margin:0 auto;display:grid}body[data-layout=portrait] .pad-col{display:contents}body[data-layout=portrait] .pad-dpad{grid-area:1/1/auto/3;justify-self:start}body[data-layout=portrait] .pad-ab{grid-area:1/3/auto/5;justify-self:end}body[data-layout=portrait] .pad-pill[data-zone=select]{grid-area:2/2}body[data-layout=portrait] .pad-pill[data-zone=start]{grid-area:2/3}body[data-layout=portrait] .pad-pill{--pill-hit:calc(64px * var(--pad-scale))}body[data-layout=landscape] #app{padding:var(--safe-t) 0 var(--safe-b);box-sizing:border-box}body[data-layout=landscape] #screen{position:relative}body[data-layout=landscape] #pad{--dpad-size:max(calc(96px * var(--pad-scale)), min(var(--side-space) * .72, calc(150px * var(--pad-scale))));--ab-size:max(calc(120px * var(--pad-scale)), min(var(--side-space) - 18px, calc(176px * var(--pad-scale))));pointer-events:none;opacity:var(--pad-opacity,.85);position:absolute;inset:0}body[data-layout=landscape] .pad-col{top:var(--safe-t);bottom:var(--safe-b);width:max(var(--side-space), var(--ab-size) + 16px);box-sizing:border-box;pointer-events:none;justify-content:center;gap:6px;padding:0 8px;position:absolute}body[data-layout=landscape] .pad-col>*{pointer-events:auto}body[data-layout=landscape] .pad-col-left{left:var(--safe-l)}body[data-layout=landscape] .pad-col-right{right:var(--safe-r)}body[data-layout=landscape] .pad-col-left .pad-dpad{margin:calc((var(--ab-size) - var(--dpad-size)) / 2) 0}