:root{--paper: #fdf8f0;--paper-2: #faf0e2;--paper-3: #f3e4cd;--cream: #fffdf8;--ink: #2b2b2b;--ink-soft: #4d463b;--ink-muted: #6f6759;--line: #ecdcc4;--line-strong: #d8c5a4;--sunset: #b45130;--sunset-hover: #9b4226;--sunset-soft: #fae7dd;--terracotta-ink: #a55630;--sunrise: #ffd27f;--night: #1f1b18;--radius: 14px;--pill: 999px;--shadow-float: 0 10px 28px rgba(60, 40, 20, .24), 0 2px 6px rgba(60, 40, 20, .14);--font-heading: "Fraunces", Georgia, "Times New Roman", serif;--font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;--pad: clamp(112px, 34vmin, 168px);--btn: clamp(52px, 15vmin, 72px);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--cream),var(--paper));color:var(--ink);font:13.5px / 1.45 var(--font-body);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.arcade{height:100dvh;display:grid;grid-template:"stage" 1fr / 1fr;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));touch-action:none}.stage{grid-area:stage;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.screen{position:relative;background:var(--night);border-radius:10px;box-shadow:0 0 0 6px var(--night),0 0 0 7px #3a332d,var(--shadow-float);overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:10px;background:#1f1b188c}.overlay[hidden]{display:none}.card{max-width:min(88%,320px);max-height:92%;overflow:auto;padding:clamp(8px,3vmin,14px) clamp(10px,4vmin,18px) clamp(10px,3vmin,16px);text-align:center;background:linear-gradient(180deg,var(--cream),var(--paper));border:1px solid #e8d6b8;border-radius:var(--radius);box-shadow:inset 0 0 0 1px #ffffffa6,var(--shadow-float)}.card h2{margin:0 0 4px;font:560 18px / 1.2 var(--font-heading);font-variation-settings:"opsz" 36,"SOFT" 60,"WONK" 1}.card p{margin:0 0 10px;color:var(--ink-muted)}.card p:empty{display:none}button{font:inherit;touch-action:manipulation;cursor:pointer}.primary,.secondary{border-radius:var(--pill);padding:7px 14px;font-size:13px;font-weight:650}.primary{border:0;background:var(--sunset);color:#fffaf4}.primary:hover,.primary:focus-visible{background:var(--sunset-hover)}.secondary{border:1px solid var(--line-strong);background:var(--cream);color:var(--ink-soft)}button:focus-visible{outline:2px solid #b4623b;outline-offset:2px}.strip{display:flex;align-items:center;gap:8px;max-width:100%;min-height:32px}.strip:empty{display:none}.hint{margin:0;color:var(--ink-muted);font-size:12.5px;text-align:center}.speed{min-width:48px}.bar{position:relative;flex:1;min-width:60px;height:6px;border-radius:var(--pill);background:var(--paper-3);overflow:hidden}.bar i{position:absolute;inset:0 auto 0 0;background:var(--sunset)}.where{color:var(--ink-muted);font-variant-numeric:tabular-nums;font-size:12.5px}.live{padding:2px 8px;border-radius:var(--pill);background:var(--sunset-soft);color:var(--terracotta-ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.pad{display:none}.dpad{position:relative;width:var(--pad);height:var(--pad);touch-action:none}.arm,.hub{position:absolute;background:var(--ink-soft);display:grid;place-items:center}.arm{width:34%;height:34%}.arm svg{width:60%;height:60%;fill:var(--paper-2)}.arm.up{left:33%;top:0;border-radius:10px 10px 0 0}.arm.down{left:33%;bottom:0;border-radius:0 0 10px 10px}.arm.left{top:33%;left:0;border-radius:10px 0 0 10px}.arm.right{top:33%;right:0;border-radius:0 10px 10px 0}.hub{left:33%;top:33%;width:34%;height:34%}.arm.held,.btn.held{filter:brightness(.82)}.arm.held svg{fill:var(--sunrise)}.face{position:relative;width:calc(var(--btn) * 2.4);height:calc(var(--btn) * 1.9);touch-action:none}.btn{position:absolute;width:var(--btn);height:var(--btn);border-radius:50%;display:grid;place-items:center;color:#fffaf4;font:700 18px / 1 var(--font-body);box-shadow:inset 0 -3px #0000002e,0 2px 6px #3c281433;transition:transform 60ms}.btn.a{right:0;top:0;background:var(--sunset)}.btn.b{left:0;bottom:0;background:var(--terracotta-ink)}.btn.held{transform:translateY(2px) scale(.96)}[data-touch="1"][data-players="1"] [data-pad="0"],[data-touch="1"][data-players="2"] .pad{display:flex}[data-touch="1"][data-players="1"][data-orient=tall]{grid-template:"stage" minmax(0,1fr) "pad0" auto / 1fr}[data-touch="1"][data-players="1"][data-orient=tall] [data-pad="0"]{grid-area:pad0;align-items:center;justify-content:space-between;padding:8px 6px max(8px,3vh)}[data-touch="1"][data-players="1"][data-orient=wide]{grid-template:"left stage right" minmax(0,1fr) / auto minmax(0,1fr) auto}[data-touch="1"][data-players="1"][data-orient=wide] [data-pad="0"]{display:contents}[data-touch="1"][data-players="1"][data-orient=wide] [data-pad="0"] .dpad{grid-area:left;align-self:center}[data-touch="1"][data-players="1"][data-orient=wide] [data-pad="0"] .face{grid-area:right;align-self:center}[data-touch="1"][data-players="2"]{--pad: clamp(96px, 26vmin, 140px);--btn: clamp(44px, 12vmin, 60px)}[data-touch="1"][data-players="2"][data-orient=tall]{grid-template:"pad1" auto "stage" minmax(0,1fr) "pad0" auto / 1fr}[data-touch="1"][data-players="2"][data-orient=tall] .pad{align-items:center;justify-content:space-between;padding:0 4px}[data-touch="1"][data-players="2"][data-orient=tall] [data-pad="0"]{grid-area:pad0}[data-touch="1"][data-players="2"][data-orient=tall] [data-pad="1"]{grid-area:pad1;transform:rotate(180deg)}[data-touch="1"][data-players="2"][data-orient=wide]{grid-template:"pad0 stage pad1" minmax(0,1fr) / auto minmax(0,1fr) auto}[data-touch="1"][data-players="2"][data-orient=wide] .pad{flex-direction:column;align-items:center;justify-content:space-evenly}[data-touch="1"][data-players="2"][data-orient=wide] [data-pad="0"]{grid-area:pad0}[data-touch="1"][data-players="2"][data-orient=wide] [data-pad="1"]{grid-area:pad1}@media(prefers-reduced-motion:reduce){.btn{transition:none}}