:root{--bg: #2b2f34;--ink: #e9ecef;--muted: #a3abb4;--panel: #383d44;--pen: #1b1e22;--undo: #e0802d;--restart: #d4574a;--hint: #3a78de;--airlift: #8a5cc6;--settings: #2a9486;--next: #3fb26b;--off: #636a73;--over: #f08a5d;--stamp: #3fb26b;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.sprite{position:absolute;width:0;height:0;overflow:hidden}.app{height:100dvh;max-width:560px;margin:0 auto;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));gap:6px}.ico{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(.5px 1.5px 0 rgba(0,0,0,.28))}.ico .soft{fill:currentColor;fill-opacity:.22}.ico .solid{fill:currentColor}.btn{--fill: var(--hint);--tilt: 0deg;position:relative;display:grid;place-items:center;width:64px;height:58px;padding:0;font:inherit;color:#fff;background:var(--fill);border:3px solid var(--pen);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;box-shadow:0 4px 0 var(--pen);transform:rotate(var(--tilt));cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,opacity .15s ease,filter .15s ease}.btn:after{content:"";position:absolute;top:5px;left:18%;width:46%;height:22%;border-radius:60% 40% 50% 50%;background:#fff3;pointer-events:none}.btn:active{transform:rotate(var(--tilt)) translateY(3px);box-shadow:0 1px 0 var(--pen)}.btn:disabled{opacity:.35;filter:saturate(.4);cursor:default}.btn:disabled:active{transform:rotate(var(--tilt));box-shadow:0 4px 0 var(--pen)}.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}.btn.nudge{animation:wiggle 1.8s ease-in-out infinite}.btn.shake{animation:shake .45s ease-in-out}.btn-undo{--fill: var(--undo);--tilt: -2deg;border-radius:46% 54% 44% 56%/55% 45%}.btn-restart{--fill: var(--restart);--tilt: 1.5deg;border-radius:52% 48% 57% 43%/44% 52% 48% 56%}.btn-hint{--fill: var(--hint);--tilt: -1deg;border-radius:55% 45% 45% 55%/50% 58% 42% 50%}.btn-airlift{--fill: var(--airlift);--tilt: 2.5deg;border-radius:47% 53% 58% 42%/54% 44% 56% 46%}.btn-airlift .stop,.btn-airlift.cancel .heli{display:none}.btn-airlift.cancel .stop{display:block}.btn-next{--fill: var(--next);--tilt: 2deg}.btn-settings{--fill: var(--settings);--tilt: 3deg;width:48px;height:46px;border-radius:50% 46% 54% 48%/52% 48% 54% 46%}.btn-settings .ico{width:26px;height:26px}.top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}.level{font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:62px;padding:3px 10px 5px;line-height:1;background:var(--panel);border:3px solid var(--pen);border-radius:14px 22px 12px 20px/20px 12px 22px 14px;box-shadow:0 3px 0 var(--pen);transform:rotate(-2deg);position:relative}.level .fps{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%) rotate(2deg);font-size:11px;font-weight:700;white-space:nowrap;color:var(--muted)}.level .cap{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.level .num{font-size:24px;font-weight:800}.steps{display:flex;align-items:center;gap:5px;min-height:50px;padding:4px 14px 5px 11px;font-size:22px;font-variant-numeric:tabular-nums;background:var(--panel);border:3px solid var(--pen);border-radius:20px 13px 22px 15px/14px 21px 13px 20px;box-shadow:0 3px 0 var(--pen);transform:rotate(1.5deg)}.steps .ico{width:22px;height:22px;color:var(--muted)}.steps .of{color:var(--muted);font-weight:600;margin:0 2px}.steps b{font-weight:800}.steps.over #steps{color:var(--over)}.board-wrap{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}.tutor{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform,opacity}.tutor[hidden]{display:none}.tutor-hand{position:absolute;left:-18px;top:-3px;width:56px;height:69px;fill:#fff6ea;stroke:var(--pen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform-origin:18px 3px;transform:rotate(-14deg) scale(var(--press, 1));filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35))}.tutor-ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:3px solid #fff6ea;opacity:var(--ring, 0);transform:scale(var(--ring-size, .4))}.controls{display:flex;justify-content:center;gap:22px;padding:4px 0 6px}.controls[hidden]{display:none}.frame{position:relative;background:var(--panel);border:3px solid var(--pen);border-radius:26px 18px 28px 16px/18px 28px 16px 26px;box-shadow:0 6px 0 var(--pen)}.overlay{border:none;padding:0;background:none;color:var(--ink);overflow:visible}.overlay::backdrop{background:#1214179e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay .frame:focus{outline:none}.overlay[open] .frame{animation:pop .3s cubic-bezier(.3,1.5,.5,1)}.win-card{width:min(86vw,330px);padding:22px 20px 24px;text-align:center;transform:rotate(-1deg)}.win-actions{display:flex;justify-content:center;gap:22px;margin-top:18px}.win-actions .btn[hidden]{display:none}.stars{display:flex;justify-content:center;gap:6px;line-height:1}.star{font-size:54px;color:#f2b71e;-webkit-text-stroke:3px var(--pen);paint-order:stroke fill;text-shadow:0 4px 0 var(--pen);animation:star-pop .45s cubic-bezier(.3,1.7,.5,1) both}.star:nth-child(1){transform:rotate(-12deg) translateY(6px);animation-delay:.15s}.star:nth-child(2){font-size:66px;animation-delay:.32s}.star:nth-child(3){transform:rotate(12deg) translateY(6px);animation-delay:.49s}.star.off{color:#4a5058}.stamp{position:absolute;top:-20px;right:-14px;transform:rotate(10deg);border:3px solid var(--stamp);color:var(--stamp);background:var(--panel);border-radius:10px 6px 11px 7px;padding:5px 12px;font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 var(--pen);animation:stamp .4s .75s cubic-bezier(.3,1.6,.5,1) both}.stamp[hidden]{display:none}.picker .frame{width:min(94vw,420px);padding:30px 12px 16px;transform:rotate(-.5deg)}.picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:70dvh;overflow-y:auto;padding:4px 4px 8px}.picker-grid button{display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:2px;padding:4px 4px 5px;font:inherit;color:var(--ink);background:#454b53;border:2px solid var(--pen);border-radius:12px 9px 13px 10px/10px 13px 9px 12px;box-shadow:0 2px 0 var(--pen);cursor:pointer}.picker-grid .map{display:block;width:100%;aspect-ratio:1;border-radius:6px 5px 7px;background:#a9cf8f}.picker-grid .info{display:flex;align-items:baseline;justify-content:space-between;gap:3px;padding:0 2px}.picker-grid button:active{transform:translateY(2px);box-shadow:none}.picker-grid h3{grid-column:1 / -1;margin:8px 0 0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.picker-grid h3:first-child{margin-top:0}.picker-grid button.current{background:var(--settings)}.picker-grid .no{font-size:16px;font-weight:800;line-height:1.1}.picker-grid .got{font-size:9px;letter-spacing:0;color:#f2b71e}.picker-grid .got .miss{color:#6b727b}.picker-grid .tier{text-align:center;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.picker-grid button.current .tier{color:#d9f2ee}.settings .frame{width:min(86vw,330px);padding:34px 22px 26px;transform:rotate(-1deg)}.tape{position:absolute;top:-17px;left:50%;margin:0;padding:5px 20px 6px;font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3a3220;background:#f2d67a;border:3px solid var(--pen);border-radius:4px 7px 5px 8px;transform:translate(-50%) rotate(2deg)}.btn-close{--fill: var(--restart);--tilt: 6deg;position:absolute;top:-18px;right:-16px;width:42px;height:40px;border-radius:52% 48% 46% 54%/50% 54% 46% 50%}.btn-close .ico{width:22px;height:22px}.switches{display:flex;justify-content:center;gap:18px}.track{display:flex;align-items:center;gap:10px;margin-top:22px;padding:8px 8px 8px 12px;background:#2e3238;border:3px solid var(--pen);border-radius:16px 11px 18px 12px/12px 18px 11px 16px;transition:opacity .2s ease}.btn-tick{--fill: var(--next);--tilt: -3deg;width:38px;height:36px;flex:none;border-radius:10px 13px 9px 12px/12px 9px 13px 10px}.btn-tick:after{display:none}.btn-tick .ico{width:24px;height:24px;stroke-width:3}.btn-tick[aria-checked=false]{--fill: #4a5058}.btn-tick[aria-checked=false] .ico{visibility:hidden}.track-name.out{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}.track-name{flex:1;min-width:0;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track.off{opacity:.45}.btn-skip{--fill: var(--hint);--tilt: 3deg;width:46px;height:42px;flex:none;border-radius:54% 46% 50% 50%/48% 54% 46% 52%}.btn-skip .ico{width:22px;height:22px}.btn-toggle{--fill: var(--settings);width:72px;height:66px}.btn-toggle:nth-child(1){--tilt: -2deg;border-radius:55% 45% 50% 50%/46% 54%}.btn-toggle:nth-child(2){--tilt: 1.5deg;border-radius:46% 54% 56% 44%/52% 46% 54% 48%}.btn-toggle:nth-child(3){--tilt: -1deg;border-radius:52% 48% 44% 56%/56% 50% 50% 44%}.btn-toggle .ico{grid-area:1 / 1;width:32px;height:32px}.btn-toggle .slash{display:none}.btn-toggle .slash .outline{stroke:var(--pen);stroke-width:6}.btn-toggle[aria-pressed=false]{--fill: var(--off)}.btn-toggle[aria-pressed=false] .ico:not(.slash){opacity:.55}.btn-toggle[aria-pressed=false] .slash{display:block}.title{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;overflow:hidden;background:var(--bg);cursor:pointer;transition:opacity .45s ease,scale .45s ease}.title:before{content:"";position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background:url(/title.jpg) center / cover;filter:blur(28px) brightness(.7)}.title img{position:relative;width:100%;max-width:62dvh;height:100dvh;object-fit:cover;-webkit-user-select:none;user-select:none;animation:title-in 2.4s ease-out both}.title.gone{opacity:0;scale:1.04;pointer-events:none}@keyframes title-in{0%{opacity:0;scale:1.06}25%{opacity:1}}@keyframes stamp{0%{transform:rotate(10deg) scale(2.4);opacity:0}}@keyframes wiggle{0%,40%,to{rotate:0deg;scale:1}10%{rotate:-9deg;scale:1.08}20%{rotate:8deg;scale:1.08}30%{rotate:-4deg}}@keyframes shake{20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:3px 0}}@keyframes star-pop{0%{scale:0;opacity:0}}@keyframes pop{0%{transform:rotate(-1deg) scale(.6);opacity:0}}