:root{--ink:#22303a;--ink-soft:#6b767e;--paper:#f4f2ec;--paper-2:#e9e6de;--line:#dcd8ce;--accent:#f2c94c;--accent-deep:#d9b03a;--ok:#4f8f45;--bad:#d8463a;--radius:22px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0;overflow:hidden}body{color:var(--ink);font:14px/1.4 var(--font);background:#0f171d;place-items:center;display:grid}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}#game{background:#56656b;width:min(100vw,70dvh);height:100dvh;position:relative;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block}header{z-index:2;padding:max(10px, env(safe-area-inset-top)) 14px 10px;align-items:center;gap:8px;display:flex;position:absolute;top:0;left:0;right:0}header button{background:var(--paper);width:44px;height:44px;color:var(--ink);box-shadow:0 3px 0 var(--line), 0 6px 14px #0004;border:0;border-radius:12px;place-items:center;display:grid}header button:active{box-shadow:0 1px 0 var(--line), 0 3px 8px #0004;transform:translateY(2px)}header button:disabled{opacity:.45;cursor:default}header button svg{width:22px;height:22px}.level{background:var(--paper);min-width:56px;height:44px;color:var(--ink);box-shadow:0 3px 0 var(--line), 0 6px 14px #0004;border-radius:12px;place-items:center;margin-left:2px;padding:0 14px;font-size:20px;font-weight:800;display:grid}#status{display:none}#undo{margin-left:auto}body.home-open header,body.home-open .progress{display:none}.progress{top:calc(max(10px, env(safe-area-inset-top)) + 52px);background:var(--paper);width:120px;height:10px;box-shadow:0 2px 0 var(--line);z-index:3;border-radius:6px;position:absolute;left:14px;overflow:hidden}#progress{background:var(--accent);border-radius:6px;width:0;height:100%;transition:width .4s;display:block}.sign{z-index:5;background:#0f171db3;place-items:center;padding:24px;transition:opacity .25s;display:grid;position:absolute;inset:0}.sign[hidden]{opacity:0;pointer-events:none;display:grid}#settings{z-index:8}.board{width:100%;max-width:360px;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}.sign[hidden] .board{transform:translateY(24px)}.stripe{display:none}.plate{background:var(--paper);border-radius:var(--radius);padding:30px 22px 22px;position:relative;box-shadow:0 30px 70px #000a}.stencil,.plate p{display:none}.plate h1{text-align:center;background:var(--paper-2);border-radius:12px;width:max-content;min-width:96px;margin:0 auto 18px;padding:10px 22px;font-size:32px;font-weight:800;line-height:1;box-shadow:inset 0 3px #0000000f,inset 0 -2px #fffa,0 1px #fff}.plate h1:empty{display:none}.badge{color:#fff;background:radial-gradient(circle at 40% 32%,#6aa85e,#3f7d37 72%);border-radius:50%;place-items:center;width:64px;height:64px;margin:-60px auto 14px;display:grid;box-shadow:0 8px 18px #0005,inset 0 -4px #0000001f}.sign.win .badge:after{content:"";border:5px solid #fff;border-width:0 5px 5px 0;width:16px;height:30px;margin-top:-6px;transform:rotate(45deg)}.sign.stuck .badge{background:radial-gradient(circle at 40% 32%,#e2705f,#c6463a 72%);width:130px;height:130px;margin:2px auto 22px;box-shadow:0 10px 22px #0004,inset 0 -6px #0000001f}.sign.stuck .badge:after{content:"";background:#fff3f0;border-radius:4px;width:78px;height:20px;box-shadow:inset 0 -2px #0000001a}.stars{justify-content:center;align-items:flex-end;gap:2px;height:98px;margin:-2px 0 10px;display:none}.stars i{filter:drop-shadow(0 4px 3px #0003);width:78px;height:78px;display:block}.stars i:first-child{transform:rotate(-14deg)translateY(10px)}.stars i:nth-child(3){transform:rotate(14deg)translateY(10px)}.stars i:nth-child(2){width:92px;height:92px}.stars svg{width:100%;height:100%;overflow:visible}.stars .star-shadow{fill:#c8901c}.stars i:not(.on) .star-shadow{fill:#b9b6ab}.stars i:not(.on) .star-body{fill:#d9d6cb}.stars i:not(.on) .star-shine{display:none}.sign.win .stars{display:flex}.stats{grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 20px;display:grid}.stats[hidden]{display:none}.stats div{box-shadow:0 3px 0 var(--line), 0 1px 2px #0000000a;background:#fbfaf6;border-radius:14px;justify-items:center;gap:4px;padding:10px 4px 9px;display:grid}.stats dt svg{width:28px;height:28px;color:var(--ink)}.stats dd{margin:0;font-size:17px;font-weight:800}.dots{gap:4px;display:flex}.dots i{background:#c9c6bb;border-radius:50%;width:9px;height:9px;box-shadow:inset 0 -1px #0000001a}.c-blue i{background:#3a74c9}.c-red i{background:#d2483c}.c-yellow i{background:#f0b429}.c-grey i{background:#9a9c98}.actions{gap:12px;display:flex}.actions button,.ad{border:0;border-radius:16px;place-items:center;min-height:78px;padding:0 8px;transition:transform 80ms,box-shadow 80ms;display:grid;position:relative}.actions button{flex:1}.actions button:before,.actions button:after,.ad:before,.ad:after{content:"";background:radial-gradient(circle at 50% 4px, var(--bolt) 3.2px, transparent 4px) top / 8px 8px no-repeat, radial-gradient(circle at 50% calc(100% - 4px), var(--bolt) 3.2px, transparent 4px) bottom / 8px 8px no-repeat;filter:drop-shadow(0 1px #fff8);width:8px;position:absolute;top:9px;bottom:9px}.actions button:before,.ad:before{left:9px}.actions button:after,.ad:after{right:9px}.actions button:active,.ad:active{transform:translateY(4px)}.actions button[hidden]{display:none}.actions button:disabled{opacity:.4}.actions button svg{width:34px;height:34px}.actions button.big{flex:1.7}.actions button.big svg{width:46px;height:46px}.yellow{--bolt:#c48f1f;color:var(--ink);box-shadow:0 6px 0 var(--accent-deep), inset 0 2px 0 #fff5;background:linear-gradient(#f6cf5a,#f0bf3c)}.yellow:active{box-shadow:0 1px 0 var(--accent-deep)!important}.steel{--bolt:#8f949a;color:var(--ink);background:linear-gradient(#e7e6e0,#d7d6cf);box-shadow:0 6px #b4b2a8,inset 0 2px #fff8}.steel:active{box-shadow:0 1px #b4b2a8!important}.ad{--bolt:#8f949a;width:100%;color:var(--ink);background:linear-gradient(#e7e6e0,#d7d6cf);justify-content:center;align-items:center;gap:22px;margin-top:18px;font-size:30px;font-weight:800;display:flex;box-shadow:0 6px #b4b2a8,inset 0 2px #fff8}.ad:active{box-shadow:0 1px #b4b2a8}.ad[hidden],.sign.win .ad{display:none!important}.ad svg{width:44px;height:44px}.sign.stuck .actions:after{display:none}.sign.stuck .divider{background:var(--line);height:2px;margin:18px 6px 0}.sign.stuck .confetti{display:none}.ad-art{justify-content:center;align-items:center;gap:12px;margin:4px 0 22px;font-size:40px;font-weight:800;display:flex}.ad-art svg{width:60px;height:60px}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{opacity:0;border-radius:2px;width:8px;height:12px;animation:2.6s linear forwards fall;position:absolute;top:-12px}.sign[hidden] .confetti i{animation:none}@keyframes fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.9;transform:translateY(110vh)rotate(720deg)}}.home{z-index:7;background:0 0;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;inset:0}.home[hidden]{display:none}.home-sheet{height:52%;margin:0 10px max(10px, env(safe-area-inset-bottom));background:var(--paper);border-radius:26px;flex-direction:column;align-items:center;gap:14px;padding:16px 12px 12px;display:flex;position:relative;box-shadow:0 -10px 30px #0004,inset 0 2px #fff}.play{width:min(100%,300px);min-height:92px;color:var(--ink);box-shadow:0 8px 0 var(--accent-deep), 0 16px 30px #0005, inset 0 2px 0 #fff5;background:linear-gradient(#f6cf5a,#f0bf3c);border:0;border-radius:18px;justify-content:center;align-items:center;gap:16px;margin-top:-70px;font-size:44px;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:flex;position:relative}.play:before,.play:after{content:"";filter:drop-shadow(0 1px #fff8);background:radial-gradient(circle at 50% 4.5px,#c48f1f 3.6px,#0000 4.5px) top/9px 9px no-repeat,radial-gradient(circle at 50% calc(100% - 4.5px),#c48f1f 3.6px,#0000 4.5px) bottom/9px 9px no-repeat;width:9px;position:absolute;top:11px;bottom:11px}.play:before{left:11px}.play:after{right:11px}.play:active{box-shadow:0 2px 0 var(--accent-deep), 0 6px 16px #0005, inset 0 2px 0 #fff5;transform:translateY(6px)}.play svg{width:46px;height:46px}.levels{overscroll-behavior:none;touch-action:pan-y;scrollbar-width:none;flex:1;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:10px;width:100%;max-width:400px;min-height:0;padding:2px 2px 10px;display:grid;overflow:hidden auto}.levels::-webkit-scrollbar{display:none}.levels button{aspect-ratio:1;min-width:0;color:var(--ink);background:linear-gradient(#f1efe8,#e4e2da);border:0;border-radius:14px;align-content:center;place-items:center;gap:2px;padding:0 0 2px;font-size:19px;font-weight:800;display:grid;position:relative;box-shadow:0 4px #c9c6bb,inset 0 2px #fff}.levels button:active{transform:translateY(3px);box-shadow:0 1px #c9c6bb,inset 0 2px #fff}.levels button.current{box-shadow:0 4px 0 var(--accent-deep), inset 0 2px 0 #fff5;background:linear-gradient(#f6cf5a,#f0bf3c)}.levels button:disabled{color:#6f7478;cursor:default;background:linear-gradient(#e2e0d8,#d5d3cb);box-shadow:0 4px #bdbab0,inset 0 2px #fff8}.levels button:disabled svg{color:#3f474d;width:22px;height:22px}.levels button .s{justify-content:center;gap:0;width:min(60px,100% - 8px);display:flex}.levels button .s svg{aspect-ratio:1;width:33.333%;height:auto;overflow:visible}.levels button .s svg:first-child{transform:rotate(-12deg)translateY(2px)}.levels button .s svg:nth-child(3){transform:rotate(12deg)translateY(2px)}.levels button .s .star-shadow{fill:#b7b4a9}.levels button .s .star-body{fill:#d2cfc4}.levels button .s .star-shine{display:none}.levels button .s svg.on .star-shadow{fill:#c8901c}.levels button .s svg.on .star-body{fill:#f5c43c}.levels button .s svg.on .star-shine{fill:#fff4c2;opacity:.8;display:block}.levels button.current .s .star-shadow{fill:#c9a23a}.levels button.current .s .star-body{fill:#e3c466}.home-bar{justify-content:space-between;gap:12px;width:100%;max-width:400px;display:flex}.home-bar button{border:0;border-radius:16px;place-items:center;width:112px;min-height:64px;transition:transform 80ms,box-shadow 80ms;display:grid;position:relative}.home-bar button svg{width:34px;height:34px}.home-bar button:before,.home-bar button:after{content:"";background:radial-gradient(circle at 50% 4px, var(--bolt) 3.2px, transparent 4px) top / 8px 8px no-repeat, radial-gradient(circle at 50% calc(100% - 4px), var(--bolt) 3.2px, transparent 4px) bottom / 8px 8px no-repeat;filter:drop-shadow(0 1px #fff8);width:8px;position:absolute;top:8px;bottom:8px}.home-bar button:before{left:8px}.home-bar button:after{right:8px}.home-bar button:active{transform:translateY(4px);box-shadow:0 1px #b4b2a8!important}.premium-row{margin-bottom:12px}.premium-row:has(>[hidden]:only-child),.premium-row:not(:has(>:not([hidden]))){display:none}#settings-premium{justify-content:center;align-items:center;gap:14px;font-size:28px;font-weight:800;display:flex}#settings-premium[hidden]{display:none}#settings-premium img{width:28px;height:28px}.premium-on{flex:1;justify-content:center;align-items:center;gap:8px;min-height:48px;display:flex}.premium-on[hidden]{display:none}.premium-on svg{width:30px;height:30px}#settings-reset.armed{--bolt:#a33;background:linear-gradient(#f0a69d,#e58b80);box-shadow:0 6px #b9544a}#error{color:#fff;background:#0f171d;place-items:center;padding:24px;display:grid;position:absolute;inset:0}#error[hidden]{display:none}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}#replay-bar{left:50%;bottom:max(12px, env(safe-area-inset-bottom));z-index:9;color:#fff;font-variant-numeric:tabular-nums;background:#0f171dd9;border-radius:14px;align-items:center;gap:12px;padding:8px 14px;font-weight:700;display:flex;position:absolute;transform:translate(-50%)}#replay-bar button,#replay-speed{background:var(--accent);color:var(--ink);font:inherit;cursor:pointer;border:0;border-radius:8px;padding:4px 10px}#replay-note:empty{display:none}#replay-cursor{z-index:10;border:3px solid var(--accent);pointer-events:none;background:#f2c94c55;border-radius:50%;width:28px;height:28px;margin:-14px 0 0 -14px;transition:left 80ms,top 80ms;position:absolute}#replay-cursor[hidden]{display:none}#replay-cursor.down{background:#f2c94caa;transform:scale(.8)}#replay-cursor.pulse{animation:.5s ease-out replay-pulse}@keyframes replay-pulse{0%{box-shadow:0 0 #f2c94c99}to{box-shadow:0 0 0 26px #f2c94c00}}.replay-hit{outline-offset:2px;outline:4px solid var(--accent)!important}.loading{z-index:20;color:#f4f2ec;background:#101c24;flex-direction:column;justify-content:center;align-items:center;transition:opacity .45s;display:flex;position:absolute;inset:0;overflow:hidden}.loading-done{opacity:0;pointer-events:none}.loading-glow{background:radial-gradient(at 50% 48%,#30576280,#0000 65%);animation:4s ease-in-out infinite alternate loading-glow;position:absolute;inset:0}.loading-brand{color:#dfe7ea;letter-spacing:.2em;text-shadow:0 0 40px #9cdae133;margin-bottom:26px;padding-left:.2em;font-size:clamp(30px,9vw,44px);font-weight:900;line-height:1;position:relative}.loading-brand span{color:var(--accent);letter-spacing:0;font-size:8px;position:absolute;top:0;right:-10px}.loading-port{width:min(84%,360px);margin:0 0 26px;position:relative;overflow:visible}.loading-cargo{transform-origin:252px 76px;animation:3.2s ease-in-out infinite loading-cargo}.loading-water{animation:3s ease-in-out infinite alternate loading-water}.loading-beacon{animation:2s ease-in-out infinite loading-beacon}.loading-track{background:#536d784d;border-radius:3px;width:112px;height:3px;position:relative;overflow:hidden}.loading-track i{border-radius:inherit;background:var(--accent);width:45%;height:100%;animation:1.5s ease-in-out infinite loading-travel;display:block;box-shadow:0 0 12px #f2c94c88}.loading-retry{width:48px;height:48px;color:var(--accent);background:#223640;border:1px solid #536d78;border-radius:14px;margin-top:22px;position:relative}.loading-retry[hidden]{display:none}.loading-retry svg{width:24px;height:24px}.loading-failed .loading-track{display:none}.loading-failed *,.loading-done *{animation-play-state:paused}@keyframes loading-cargo{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)translateY(8px)}}@keyframes loading-water{to{opacity:.4;transform:translate(12px)}}@keyframes loading-beacon{50%{opacity:.35}}@keyframes loading-glow{to{opacity:.55}}@keyframes loading-travel{0%{transform:translate(-110%)}to{transform:translate(330%)}}@media (prefers-reduced-motion:reduce){.loading *{animation:none}.loading-track i{opacity:.7;width:100%}.loading{transition-duration:10ms}}.stars i{position:relative}.stars .star-slot .star-body{fill:#e0ddd3;stroke:#c9c5b9;stroke-width:1.5px}.stars .star-slot .star-shadow{fill:#b9b5a9}.stars .star-slot .star-shine{display:none}.stars .star-award{position:absolute;inset:0}.stars i:not(.on) .star-award{display:none}