html,body,#game{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#10131a}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:fixed;inset:0;pointer-events:none;color:#fff;z-index:10}.status,.controls{pointer-events:auto}.status{position:absolute;top:16px;left:16px;min-width:220px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0a0c12bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;line-height:1.5}.controls{position:absolute;left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);box-sizing:border-box;padding:10px 12px;border-radius:10px;background:#0a0c12a6;font-size:12px;color:#fffc}.connection{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#eab308}.connection.connected{background:#22c55e}.connection.error{background:#ef4444}.energy-bar{width:180px;height:6px;margin-top:5px;overflow:hidden;border-radius:99px;background:#ffffff1f}.energy-fill{width:100%;height:100%;transform-origin:left;background:#22c55e}.events{margin-top:8px;font-size:12px;opacity:.8}:root{--ink: #2b2140;--paper: #fff8e7;--sun: #ffd23f;--tangerine: #ff9f43;--berry: #ff6b6b;--sky: #8ecae6;--mint: #7bd88f;--cream: #f3e6c8;--font-fun: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif}.settings-cog{position:absolute;top:14px;right:14px;width:64px;height:64px;padding:4px;border:0;border-radius:50%;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 8px 10px rgba(0,0,0,.35));transition:transform .45s cubic-bezier(.34,1.8,.5,1),filter .2s,opacity .2s}.settings-cog svg{display:block;width:100%;height:100%;overflow:visible}.settings-cog .cog-body{fill:var(--sun);stroke:var(--ink);stroke-width:4;stroke-linejoin:round}.settings-cog .cog-hole{fill:var(--paper);stroke:var(--ink);stroke-width:4}.settings-cog .cog-shine{fill:none;stroke:#fff6c7;stroke-width:3.5;stroke-linecap:round}.settings-cog:hover{transform:rotate(60deg) scale(1.08)}.settings-cog:active{transform:rotate(90deg) scale(.9);filter:drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 3px 5px rgba(0,0,0,.35));transition-duration:.12s}.settings-cog.open{transform:rotate(180deg)}.settings-cog:focus-visible{outline:3px dashed var(--sun);outline-offset:4px}@keyframes cog-wobble{0%,to{rotate:0deg}30%{rotate:-14deg}60%{rotate:9deg}}.settings-cog:hover svg{animation:cog-wobble .5s ease-in-out .35s}.settings-backdrop{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;background:#0c0a188c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:settings-fade .18s ease-out}.settings-backdrop[hidden]{display:none}@keyframes settings-fade{0%{opacity:0}}@keyframes settings-pop{0%{transform:scale(.82) rotate(-2deg);opacity:0}60%{transform:scale(1.03) rotate(.5deg);opacity:1}to{transform:scale(1) rotate(0)}}.settings-modal{position:relative;box-sizing:border-box;width:min(580px,100%);max-height:calc(100vh - 48px);overflow:visible;padding:18px 22px 24px;border:4px solid var(--ink);border-radius:26px;background:var(--paper);box-shadow:0 8px 0 var(--ink),0 22px 44px #00000073;color:var(--ink);font-family:var(--font-fun);-webkit-user-select:none;user-select:none;animation:settings-pop .32s cubic-bezier(.3,1.4,.5,1)}.settings-title{margin:0 0 16px;font-size:32px;font-weight:900;letter-spacing:.5px;color:var(--ink);text-shadow:3px 3px 0 var(--sun)}.settings-close{position:absolute;top:-18px;right:-18px;width:50px;height:50px;padding:8px;border:4px solid var(--ink);border-radius:50%;background:var(--berry);box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .2s cubic-bezier(.34,1.8,.5,1)}.settings-close svg{display:block;width:100%;height:100%}.settings-close path{stroke:#fff;stroke-width:4;stroke-linecap:round;fill:none}.settings-close:hover{transform:rotate(90deg) scale(1.08)}.settings-close:active{transform:rotate(90deg) scale(.92) translateY(2px);box-shadow:0 1px 0 var(--ink)}.settings-body{display:grid;grid-template-columns:150px 1fr;gap:18px;min-height:370px}.settings-tabs{display:flex;flex-direction:column;gap:12px}.settings-tab,.mode-option,.settings-select{font-family:inherit;color:var(--ink)}.settings-tab{display:flex;align-items:center;gap:8px;padding:10px 12px;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--ink);font-size:17px;font-weight:800;text-align:left;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.8,.5,1),background .15s}.settings-tab svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.settings-tab:hover{transform:translateY(-2px)}.settings-tab:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.settings-tab[aria-selected=true]{background:var(--sun);transform:translate(6px)}.settings-pane{padding:16px 18px 18px;border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:inset 0 -5px #2b214014}.settings-pane[hidden]{display:none}.settings-pane h3{margin:0 0 14px;font-size:20px;font-weight:900}.setting-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-bottom:16px}.slider-row{display:block}.setting-row[hidden]{display:none}.setting-label{font-size:15px;font-weight:800}.setting-help{margin:4px 0 0;font-size:13px;line-height:1.45;color:#5b4f73}.settings-tab:focus-visible,.settings-close:focus-visible,.mode-option:focus-visible,.switch:focus-visible,.settings-select:focus-visible,.settings-slider:focus-visible{outline:3px dashed var(--tangerine);outline-offset:3px}.mode-switch{display:flex;align-items:center;gap:10px}.mode-option{padding:4px 2px;border:0;background:none;font-size:15px;font-weight:700;opacity:.5;cursor:pointer;transition:opacity .15s,transform .2s}.mode-option.active{opacity:1;font-weight:900;transform:scale(1.08)}.switch{position:relative;width:78px;height:42px;padding:0;border:3px solid var(--ink);border-radius:999px;background:var(--sky);box-shadow:inset 0 3px #0000001f,0 3px 0 var(--ink);cursor:pointer;transition:background .2s}.switch.on{background:var(--mint)}.switch-knob{position:absolute;top:3px;left:3px;width:30px;height:30px;box-sizing:border-box;border:3px solid var(--ink);border-radius:50%;background:#fff;transition:left .3s cubic-bezier(.34,1.6,.5,1)}.switch.on .switch-knob{left:39px}.side-switch,.side-switch.on{background:var(--tangerine)}.slider-wrap{display:flex;align-items:center;gap:12px;margin-top:6px}.settings-slider{--fill: 50%;flex:1;height:16px;margin:0;border:3px solid var(--ink);border-radius:999px;background:linear-gradient(to right,var(--tangerine) var(--fill),var(--cream) var(--fill));appearance:none;-webkit-appearance:none;cursor:pointer}.settings-slider::-webkit-slider-thumb{width:28px;height:28px;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:0 3px 0 var(--ink);-webkit-appearance:none;transition:transform .15s}.settings-slider::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:0 3px 0 var(--ink)}.settings-slider:active::-webkit-slider-thumb{transform:scale(1.15)}.slider-value{min-width:44px;padding:3px 0;border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:900;text-align:center}.select-wrap{position:relative}.settings-select{min-width:150px;padding:8px 40px 8px 14px;border:3px solid var(--ink);border-radius:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232b2140' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 20px,var(--sun);box-shadow:0 3px 0 var(--ink);font-size:16px;font-weight:800;cursor:pointer;appearance:none;-webkit-appearance:none}@media(max-width:560px){.settings-backdrop{padding:24px 14px}.settings-modal{padding:16px 14px 20px}.settings-body{grid-template-columns:minmax(0,1fr);min-height:0}.settings-tabs{flex-direction:row;gap:8px}.settings-tab{flex:1 1 0;min-width:0;justify-content:center;gap:5px;padding:8px 6px;font-size:14px}.settings-tab svg{width:20px;height:20px}.settings-pane{min-width:0;padding:14px 12px}.mode-switch{gap:8px}.mode-option{font-size:14px}.settings-tab[aria-selected=true]{transform:translateY(2px)}.settings-title{font-size:26px}}@media(prefers-reduced-motion:reduce){.settings-cog,.settings-cog svg,.settings-modal,.settings-backdrop,.switch-knob,.settings-tab,.settings-close{animation:none;transition:none}}:root{--run-size: min(108px, 24vw);--stick-size: min(144px, 34vw);--pad-gap: 12px;--edge: 18px}.action-pad{position:absolute;bottom:calc(var(--edge) + env(safe-area-inset-bottom));right:calc(var(--edge) + env(safe-area-inset-right));z-index:1;display:flex;flex-direction:row;align-items:flex-end;gap:var(--pad-gap);pointer-events:none}.action-pad[hidden]{display:none}.action-pad.left{right:auto;left:calc(var(--edge) + env(safe-area-inset-left))}.action-pad.flip{flex-direction:row-reverse}.run-button,.tag-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:var(--run-size);height:var(--run-size);padding:0;border:5px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffb27a 0 18%,#ff7a3d 45%,#f0532a);box-shadow:0 7px 0 var(--ink),0 14px 22px #0006,inset 0 -7px #00000026;color:#fff;font-family:var(--font-fun);pointer-events:auto;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.34,1.8,.5,1),box-shadow .12s,filter .12s,opacity .2s}.run-button[hidden],.tag-button[hidden]{display:none}.run-button svg,.tag-button svg{width:46px;height:46px;margin-top:4px;overflow:visible}.run-button .run-bolt{fill:var(--sun);stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}.run-button .run-lines{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;opacity:.85}.run-label{margin-top:-2px;font-size:22px;font-weight:900;letter-spacing:1.5px;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}.run-button:hover{transform:scale(1.04) rotate(-3deg)}.tag-button:hover{transform:scale(1.04) rotate(3deg)}.run-button.held{transform:translateY(5px) scale(.95);box-shadow:0 2px 0 var(--ink),0 0 0 7px #ffd23f8c,0 0 26px #ffa03ccc,inset 0 -4px #00000026;filter:saturate(1.25) brightness(1.08);transition-duration:.06s}@keyframes run-dash{0%{transform:translate(0);opacity:.9}to{transform:translate(-9px);opacity:.2}}.run-button.held .run-lines{animation:run-dash .22s linear infinite}.run-button:focus-visible,.tag-button:focus-visible{outline:3px dashed var(--sun);outline-offset:5px}.tag-button{background:radial-gradient(circle at 35% 28%,#9fdcff 0 18%,#3ea2ff 45%,#1f6fe0)}.tag-button svg{width:42px;height:42px}.tag-button .tag-burst{fill:var(--sun);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}.tag-button .tag-hand{fill:#fff;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}.tag-label{margin-top:-2px;font-size:22px;font-weight:900;letter-spacing:1.5px;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}.tag-button.held{transform:translateY(5px) scale(.95);box-shadow:0 2px 0 var(--ink),0 0 0 7px #7dd3fc8c,0 0 26px #3ea2ffcc,inset 0 -4px #00000026;filter:saturate(1.2) brightness(1.08);transition-duration:.06s}.joystick{position:absolute;bottom:calc(var(--edge) + env(safe-area-inset-bottom));left:calc(var(--edge) + env(safe-area-inset-left));z-index:1;width:var(--stick-size);height:var(--stick-size);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s}.joystick[hidden]{display:none}.joystick.right{left:auto;right:calc(var(--edge) + env(safe-area-inset-right))}.joystick-base{position:absolute;inset:0;box-sizing:border-box;border:5px solid var(--ink);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.05) 0 38%,transparent 39%),radial-gradient(circle,#ffffff52,#ffffff24 70%);box-shadow:0 6px #2b21408c,inset 0 0 0 3px #ffffff59;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.joystick-thumb{position:absolute;left:50%;top:50%;width:46%;height:46%;box-sizing:border-box;border:5px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff7c2 0 18%,#ffd23f 50%,#f2a91c);box-shadow:0 5px 0 var(--ink),inset 0 -5px #00000026;transform:translate(-50%,-50%);transition:transform .18s cubic-bezier(.34,1.8,.5,1)}.joystick.active .joystick-thumb{transition:none}.hud[data-mode=mobile] .controls{bottom:calc(var(--edge) + var(--stick-size) + 14px + env(safe-area-inset-bottom));max-width:min(420px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)))}.hud[data-mode=mobile][data-lefty=true] .controls{left:auto;right:calc(16px + env(safe-area-inset-right));text-align:right}@media(prefers-reduced-motion:reduce){.run-button,.run-button.held .run-lines,.tag-button,.joystick-thumb{animation:none;transition:none}}.status,.controls{transition:opacity .2s}.see-through{opacity:.18}.skin-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}@media(max-width:560px){.skin-cards{grid-template-columns:1fr}}.skin-card{--s: 1.05;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;border:3px solid var(--ink);border-radius:18px;background:#f4f1ff;box-shadow:0 4px 0 var(--ink);font-family:inherit;color:var(--ink);cursor:pointer;transition:transform .15s cubic-bezier(.34,1.8,.5,1),background .15s}.skin-card:hover{transform:translateY(-3px)}.skin-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.skin-card.picked{background:var(--sun);transform:rotate(-1.5deg)}.skin-card:focus-visible{outline:3px dashed var(--tangerine);outline-offset:3px}.skin-stage{position:relative;display:block;width:100%;height:calc(122px * var(--s));border-radius:12px;background:radial-gradient(ellipse 34% 7% at 50% calc(100% - 7px),rgba(43,33,64,.28),transparent 70%),linear-gradient(#c9ecff,#e9f8ff 70%,#9fd78a 70%)}.skin-preview{position:absolute;left:50%;bottom:0;width:calc(var(--fw) * var(--s) * 1px);height:calc(var(--fh) * var(--s) * 1px);transform:translate(-50%);background-image:var(--sheet);background-repeat:no-repeat;background-size:calc(var(--fw) * var(--s) * 30px) calc(var(--fh) * var(--s) * 8px);background-position-y:calc(var(--fh) * var(--s) * -2px);image-rendering:pixelated;animation:skin-breathe 1.3s steps(4) infinite}.skin-card.picked .skin-preview{animation:skin-walk .8s steps(8) infinite}@keyframes skin-breathe{0%{background-position-x:calc(var(--fw) * var(--s) * -12px)}to{background-position-x:calc(var(--fw) * var(--s) * -16px)}}@keyframes skin-walk{0%{background-position-x:calc(var(--fw) * var(--s) * -4px)}to{background-position-x:calc(var(--fw) * var(--s) * -12px)}}.skin-name{font-size:16px;font-weight:900}.skin-note{font-size:12px;font-weight:700;color:#5b4f73}@media(prefers-reduced-motion:reduce){.skin-preview,.skin-card.picked .skin-preview{animation:none;background-position-x:calc(var(--fw) * var(--s) * -12px)}}.title-screen{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 40%,rgba(12,10,24,.15),transparent 70%),linear-gradient(to bottom,#0c0a1859,#0c0a188c);animation:title-fade-in .45s ease-out}.title-screen.title-out{animation:title-fade-out .4s ease-in forwards;pointer-events:none}@keyframes title-fade-in{0%{opacity:0}}@keyframes title-fade-out{to{opacity:0}}.title-card{pointer-events:auto;box-sizing:border-box;width:min(480px,100%);padding:28px 28px 24px;border:4px solid var(--ink);border-radius:28px;background:var(--paper);box-shadow:0 10px 0 var(--ink),0 28px 50px #00000073;color:var(--ink);font-family:var(--font-fun);text-align:center;-webkit-user-select:none;user-select:none;animation:title-pop .5s cubic-bezier(.3,1.4,.5,1)}@keyframes title-pop{0%{transform:scale(.7) translateY(24px);opacity:0}70%{transform:scale(1.04) translateY(-2px);opacity:1}to{transform:scale(1) translateY(0)}}.title-screen.title-out .title-card{animation:title-card-out .35s ease-in forwards}@keyframes title-card-out{to{transform:scale(.9) translateY(12px);opacity:0}}.title-kicker{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5b4f73}.title-heading{margin:0 0 10px;font-size:clamp(42px,8vw,64px);font-weight:900;letter-spacing:.5px;line-height:1.05;color:var(--ink);text-shadow:4px 4px 0 var(--sun);animation:title-wobble 2.8s ease-in-out infinite}@keyframes title-wobble{0%,to{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}.title-blurb{margin:0 0 22px;font-size:18px;font-weight:700;line-height:1.35;color:#3d3358}.title-start{display:inline-block;min-width:200px;padding:14px 28px;border:4px solid var(--ink);border-radius:999px;background:var(--sun);box-shadow:0 6px 0 var(--ink);color:var(--ink);font-family:inherit;font-size:26px;font-weight:900;letter-spacing:.5px;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.8,.5,1),box-shadow .12s,filter .12s}.title-start:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.05)}.title-start:active{transform:translateY(4px) scale(.98);box-shadow:0 2px 0 var(--ink)}.title-start:disabled{cursor:wait;filter:saturate(.7);transform:none;box-shadow:0 4px 0 var(--ink)}.title-start:focus-visible{outline:3px dashed var(--tangerine);outline-offset:4px}@media(prefers-reduced-motion:reduce){.title-heading,.title-card,.title-screen{animation:none}}body.title-mode .status,body.title-mode .controls,body.title-mode .action-pad,body.title-mode .joystick{display:none}