:root{--paper: #f6f1e4;--rule: #c9d8ef;--margin: #f0a3a3;--ink: #2d5bd8;--ball: #ff5a4f;--graphite: #3b3b4f;--goal: #2fb36b;--star: #f5b82e;--sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#c98a4b;font-family:Patrick Hand,Comic Sans MS,cursive;color:var(--graphite);user-select:none;-webkit-user-select:none;overscroll-behavior:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#ui{position:fixed;inset:0;pointer-events:none}.nogl{color:var(--paper);font-size:22px;text-align:center;margin-top:30vh;padding:0 24px}.btn{pointer-events:auto;font:inherit;color:var(--graphite);background:var(--paper);border:2.5px solid var(--graphite);border-radius:var(--sketch);min-width:48px;min-height:48px;padding:6px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:3px 4px #1e140a59;transition:transform .12s ease,box-shadow .12s ease,background .15s}.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:4px 6px #1e140a59}.btn:active{transform:translateY(2px);box-shadow:1px 1px #1e140a59}.btn:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}.btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:currentColor}.btn svg path[fill=none]{fill:none}.btn.round{width:56px;height:56px;padding:0;border-radius:48% 52% 50% 46%/52% 46% 54% 48%}.btn.small{width:48px;height:48px}.btn.big{font-size:26px;min-height:60px;padding:6px 26px}.btn.primary{background:var(--ink);color:#fff;border-color:#1b3a95}.btn.play{width:76px;height:76px;padding:0;border-radius:50% 46% 52% 48%/48% 52% 46% 50%}.btn.play svg{width:36px;height:36px}.btn.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:3px 4px #1e140a59,0 0 #2d5bd88c}50%{box-shadow:3px 4px #1e140a59,0 0 0 14px #2d5bd800}}.row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px;align-items:stretch}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}.screen.show{opacity:1;visibility:visible}.title-screen{justify-content:flex-start;padding-top:calc(5vh + var(--safe-t));gap:6px}.title-screen .row{margin-top:14px}.logo{margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);font-weight:400;line-height:.9}.logo-icon{display:block;flex:none;width:clamp(110px,min(30vh,26vw),280px);height:auto;border-radius:19%;box-shadow:0 12px 26px #3c1e054d;animation:logo-bob 4.5s ease-in-out infinite}@keyframes logo-bob{0%,to{translate:0 0}50%{translate:0 -8px}}.logo-words{display:flex;flex-direction:column;font-size:clamp(44px,min(11vh,9vw),112px);transform:rotate(-3deg);text-shadow:3px 4px 0 rgba(30,20,10,.18)}.logo .g1{color:var(--graphite)}.logo .g2{color:var(--ink);margin-left:.5em}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tagline{margin:10px 0 0;font-size:clamp(18px,2.6vw,28px);color:var(--ball);transform:rotate(-2deg)}.level-screen{background:#281a1059;backdrop-filter:blur(3px);justify-content:flex-start;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));overflow-y:auto;pointer-events:auto}.level-head{display:flex;align-items:center;gap:16px;width:min(980px,100%)}.level-head h2{margin:0;font-size:40px;font-weight:400;color:var(--paper);text-shadow:2px 3px 0 rgba(0,0,0,.3);flex:1}.star-total{font-size:26px;color:var(--star);text-shadow:2px 2px 0 rgba(0,0,0,.35)}.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:18px;width:min(980px,100%);margin-top:14px}.world{position:relative;background:var(--paper) repeating-linear-gradient(transparent 0 29px,var(--rule) 29px 30px);border:2.5px solid var(--graphite);border-radius:6px 10px 8px 12px;padding:10px 14px 14px 34px;box-shadow:4px 6px #0000004d}.world:before{content:"";position:absolute;left:22px;top:0;bottom:0;border-left:2px solid var(--margin)}.world:nth-child(odd){transform:rotate(-.6deg)}.world:nth-child(2n){transform:rotate(.5deg)}.world h3{margin:0 0 8px;font-weight:400;font-size:28px}.world h3 small{font-size:18px;color:var(--ball);margin-right:6px}.level-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.level-tile{font:inherit;cursor:pointer;pointer-events:auto;background:#fffdf6;border:2px solid var(--graphite);border-radius:var(--sketch);min-height:84px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--graphite);transition:transform .12s}.level-tile:hover:not(:disabled){transform:translateY(-3px) rotate(-2deg)}.level-tile b{font-size:26px;line-height:1;color:var(--ink)}.level-tile .name{font-size:13px;line-height:1.05;text-align:center;min-height:2.1em}.level-tile .stars i{font-style:normal;color:#cfc6b0;font-size:16px}.level-tile .stars i.on{color:var(--star);text-shadow:0 0 1px #a07400}.level-tile.done{background:#f0f7ee}.level-tile:disabled{cursor:not-allowed;opacity:.45}.lock-note{position:absolute;inset:44px 10px 10px 30px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px;color:var(--graphite);background:#f6f1e4b3;border-radius:8px}.lock-note svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}.hud{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .25s}.hud.show{opacity:1;visibility:visible}.hud-top{position:absolute;top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));display:flex;gap:12px;align-items:center}.hud-info{background:#f6f1e4f0;border:2px solid var(--graphite);border-radius:var(--sketch);padding:4px 14px 6px;box-shadow:3px 4px #1e140a4d;min-width:min(360px,60vw)}.level-name{font-size:22px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-name b{color:var(--ink);font-weight:400}.ink{display:flex;align-items:center;gap:8px}.ink-label{font-size:18px;color:var(--ink)}.ink-bar{position:relative;flex:1;height:14px;border:2px solid var(--graphite);border-radius:10px 4px 9px 5px;background:#fffdf6;overflow:hidden}.ink-fill{height:100%;width:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,#3f6ce6 6px 12px);transition:width .08s linear}.ink-fill.low{background:repeating-linear-gradient(-45deg,var(--ball) 0 6px,#ff7b72 6px 12px)}.ink-marks i{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--star);box-shadow:0 0 0 1px #3c280080}.ink-marks i.three{background:#ffe28a}.ink-pct{font-size:18px;min-width:3.2em;text-align:right}.hint{position:absolute;top:calc(78px + var(--safe-t));left:50%;transform:translate(-50%) rotate(-1.5deg);font-size:clamp(18px,2.4vw,26px);color:var(--ink);background:#f6f1e4d9;padding:2px 14px;border-radius:var(--sketch);white-space:nowrap;transition:opacity .5s}.hint:empty,.hint.gone{opacity:0}.actions{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));display:flex;gap:12px;align-items:flex-end}body.left-hand .actions{right:auto;left:calc(16px + var(--safe-l));flex-direction:row-reverse}body.left-hand .hud-top{flex-direction:row-reverse;justify-content:flex-start}.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#281a1073;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;pointer-events:auto;padding:16px}.modal.show{opacity:1;visibility:visible}.card{background:var(--paper) repeating-linear-gradient(transparent 0 33px,var(--rule) 33px 34px);border:2.5px solid var(--graphite);border-radius:8px 12px 10px 14px;padding:18px 28px 24px 44px;min-width:min(380px,92vw);max-width:92vw;text-align:center;position:relative;box-shadow:6px 8px #0000004d;transform:rotate(-1deg) scale(.9);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}.card:before{content:"";position:absolute;left:28px;top:0;bottom:0;border-left:2px solid var(--margin)}.modal.show .card{transform:rotate(-1deg) scale(1)}.card h2{margin:0 0 8px;font-weight:400;font-size:44px;color:var(--ink)}.win-stars{display:flex;justify-content:center;gap:10px;margin:4px 0 6px}.win-star{font-size:64px;line-height:1;color:#d8cfb8;transform:scale(.8);transition:transform .3s cubic-bezier(.2,2,.4,1),color .2s}.win-star:nth-child(2){transform:translateY(-10px) scale(.8)}.win-star.on{color:var(--star);transform:scale(1.15) rotate(-8deg);text-shadow:2px 3px 0 #b07f00}.win-star:nth-child(2).on{transform:translateY(-10px) scale(1.25) rotate(6deg)}.win-detail{font-size:22px;margin:6px 0 4px}.win-detail small{display:block;font-size:16px;opacity:.75}.win-best{margin:0 0 6px;color:var(--ball);font-size:24px;transform:rotate(-3deg)}.card .row{margin-top:14px}.toggle{display:flex;align-items:center;gap:14px;font-size:26px;min-height:52px;cursor:pointer;text-align:left}.toggle input{position:absolute;opacity:0}.toggle .switch{width:58px;height:32px;border:2.5px solid var(--graphite);border-radius:18px 14px 16px 18px;background:#e2dac6;position:relative;flex:none;transition:background .2s}.toggle .switch:after{content:"";position:absolute;top:3px;left:4px;width:21px;height:21px;border-radius:50%;background:var(--graphite);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.toggle input:checked+.switch{background:var(--goal)}.toggle input:checked+.switch:after{transform:translate(25px);background:#fff}.toggle input:focus-visible+.switch{outline:3px dashed var(--ink);outline-offset:2px}.settings .card>.btn{margin-top:12px}.flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,#ff5a4f0d,#ff3c3273);opacity:0}.flash.go{animation:flash .45s ease-out}@keyframes flash{0%{opacity:1}to{opacity:0}}.toast{position:absolute;bottom:calc(110px + var(--safe-b));left:50%;transform:translate(-50%,20px) rotate(-2deg);background:var(--graphite);color:var(--paper);font-size:22px;padding:4px 16px;border-radius:var(--sketch);opacity:0;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%) rotate(-2deg)}body[data-layout=side] .actions{flex-direction:column-reverse;align-items:center}body.left-hand[data-layout=side] .actions{flex-direction:column-reverse}.hint{top:calc(var(--hud-bottom, 80px) - 4px);max-width:calc(100vw - 32px);white-space:normal;text-align:center}.btn,.level-tile,.toggle{touch-action:manipulation;-webkit-touch-callout:none}@media (hover: none){.btn:hover,.level-tile:hover:not(:disabled){transform:none;box-shadow:3px 4px #1e140a59}.level-tile:hover:not(:disabled){box-shadow:none}.btn:active,.level-tile:active:not(:disabled){transform:translateY(2px) scale(.97)}}.card{max-height:calc(100vh - 24px - var(--safe-t) - var(--safe-b));max-height:calc(100dvh - 24px - var(--safe-t) - var(--safe-b));overflow-y:auto;overscroll-behavior:contain}@media (min-width: 1100px) and (min-height: 700px){.hud-info{min-width:400px;padding:6px 18px 8px}.level-name{font-size:26px}.btn.round{width:62px;height:62px}.btn.play{width:84px;height:84px}}@media (max-height: 500px){.hud-top{top:calc(6px + var(--safe-t));gap:8px}.hud-info{padding:2px 12px 4px;min-width:min(300px,46vw)}.level-name{font-size:18px}.ink-label,.ink-pct{font-size:15px}.ink-bar{height:11px}.btn.round{width:46px;height:46px}.btn.small{width:44px;height:44px}.btn.round svg{width:22px;height:22px}.btn.play{width:60px;height:60px}.btn.big{font-size:22px;min-height:50px;padding:4px 20px}.actions{gap:8px;bottom:calc(10px + var(--safe-b));right:calc(10px + var(--safe-r))}body.left-hand .actions{left:calc(10px + var(--safe-l))}.hint{font-size:17px}.card{padding:10px 20px 14px 40px}.card h2{font-size:32px;margin-bottom:4px}.card .row{margin-top:8px}.col{gap:8px}.win-star{font-size:46px}.win-detail{font-size:18px}.toggle{min-height:44px;font-size:22px}.logo-icon{width:clamp(90px,27vh,160px)}.logo-words{font-size:clamp(36px,11vh,64px)}.tagline{margin-top:2px;font-size:17px}.title-screen .row{margin-top:8px}.title-screen{padding-top:calc(3vh + var(--safe-t))}.level-head h2{font-size:30px}.level-tile{min-height:70px}}@media (max-width: 600px){.hud-info{min-width:0;flex:1}.level-head h2{font-size:28px}.star-total{font-size:20px}.world{padding:8px 10px 10px 28px}.world:before{left:18px}.world h3{font-size:23px}.level-row{gap:5px}.level-tile .name{font-size:11px}.level-tile b{font-size:22px}.card{padding:14px 16px 18px 34px}.card:before{left:22px}.card h2{font-size:34px}}.rotate-overlay{display:none}@media (orientation: portrait) and (max-width: 600px){body:not(.portrait-ok) .rotate-overlay{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;background:#c98a4bf0;backdrop-filter:blur(4px)}}.rotate-overlay .phone{width:70px;height:116px;border:4px solid var(--graphite);border-radius:14px;background:var(--paper);box-shadow:4px 5px #00000040;animation:turn 2.2s ease-in-out infinite}@keyframes turn{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}.rotate-overlay p{margin:0;font-size:28px;line-height:1.15;color:var(--paper);text-shadow:2px 3px 0 rgba(0,0,0,.25)}.rotate-overlay .btn{font-size:20px;min-height:48px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}