:root{--paper:#e8d9b5;--paper-dark:#d9c59a;--ink:#3b2418;--ink-soft:#6b4a36;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-family:Comic Sans MS,Chalkboard SE,Comic Neue,ui-rounded,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 40%, var(--paper) 55%, var(--paper-dark) 100%)}.game-screen{width:100%;height:100%;position:relative}.game-canvas{touch-action:none;cursor:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.hud{align-items:center;gap:calc(var(--u) * 24px);padding-bottom:calc(var(--u) * 14px);font-size:max(12px, calc(var(--u) * 38px));pointer-events:none;-webkit-user-select:none;user-select:none;grid-template-columns:1fr 2fr 1fr;display:grid;position:absolute}.hud-left{align-items:center;gap:.3em;font-size:1.25em;display:flex}.hud-timer{font-variant-numeric:tabular-nums;font-weight:700}.hud-center{flex-direction:column;align-items:center;gap:.2em;display:flex}.hud-level{letter-spacing:.05em;text-transform:uppercase;font-weight:700}.hp-bar{border:max(2px, calc(var(--u) * 6px)) solid var(--ink);background:#fffaeb99;border-radius:255px 18px 225px/18px 225px 18px 255px;width:100%;height:1.3em;position:relative;overflow:hidden}.hp-fill{background:linear-gradient(#e0583f,#b3261e);height:100%;transition:width .16s ease-out}.hp-mid .hp-fill{background:linear-gradient(#e99a3a,#c66a12)}.hp-low .hp-fill{background:linear-gradient(#9b2c22,#6d1610);animation:.6s ease-in-out infinite alternate hp-pulse}@keyframes hp-pulse{to{opacity:.6}}.hp-text{color:var(--ink);text-shadow:0 0 3px #fff8e8,0 0 3px #fff8e8;place-items:center;font-size:.75em;font-weight:700;display:grid;position:absolute;inset:0}.hud-right{flex-direction:column;align-items:flex-end;gap:.15em;display:flex}.hud-coins{align-items:center;gap:.3em;font-size:1.25em;font-weight:700;display:flex}.coin{border:max(2px, calc(var(--u) * 5px)) solid var(--ink);background:radial-gradient(circle at 35% 35%,#ffe58a,#e0a82e);border-radius:50%;width:.9em;height:.9em;display:inline-block}.hud-stats{color:var(--ink-soft);font-size:.7em}.box-overlay{font-size:max(12px, calc(var(--u) * 38px));pointer-events:none;place-items:center;display:grid;position:absolute}.box-overlay .hint{color:var(--ink-soft);align-self:start;margin:1.5em 0 0;font-size:1.3em;animation:1.2s ease-in-out infinite alternate hint-bob}@keyframes hint-bob{to{transform:translateY(-.3em)}}.summary{border:max(2px, calc(var(--u) * 7px)) solid var(--ink);text-align:center;pointer-events:auto;background:#faf3e0f5;border-radius:255px 20px 225px/20px 225px 20px 255px;min-width:9em;padding:.6em 1.2em .8em;animation:.4s cubic-bezier(.2,1.6,.4,1) 1.4s both summary-in;box-shadow:.15em .15em #3b24184d}@keyframes summary-in{0%{opacity:0;visibility:hidden;transform:scale(.4)rotate(-8deg)}to{visibility:visible}}.summary h2{color:#b3261e;margin:0;font-size:2em;line-height:1.1;transform:rotate(-4deg)}.summary-level{color:var(--ink-soft);margin:0 0 .2em;font-size:.75em}.summary-stars{justify-content:center;gap:.1em;margin-bottom:.25em;font-size:1.9em;line-height:1;display:flex}.summary-stars .star.on{animation:.45s cubic-bezier(.2,1.8,.4,1) both star-pop;animation-delay:calc(1.6s + var(--i) * .22s)}@keyframes star-pop{0%{transform:scale(0)rotate(-90deg)}}.summary .badge{vertical-align:middle;background:#f2c230;border-radius:.3em;margin-left:.4em;padding:0 .35em;font-size:.7em}.summary-coins{justify-content:center;align-items:center;gap:.3em;margin-bottom:.6em;font-size:1.3em;font-weight:700;display:flex}.summary-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:.4em;display:flex}.summary-done{color:var(--ink-soft);font-weight:700}.summary button.primary{background:#f2c230}.summary button.primary:hover{background:#f6d35c}.summary dl{text-align:left;grid-template-columns:auto auto;gap:.15em 1em;margin:0 0 .7em;display:grid}.summary dt{color:var(--ink-soft)}.summary dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:700}.summary button{border:max(2px, calc(var(--u) * 5px)) solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;border-radius:.4em;padding:.2em 1em;font-weight:700}.summary button:hover{background:#f3e6c4}.tuning{top:calc(64px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));flex-direction:column;align-items:flex-end;gap:6px;font-size:13px;display:flex;position:absolute}.tuning-toggle{border:2px solid var(--ink);background:var(--paper);width:32px;height:32px;color:var(--ink);cursor:pointer;opacity:.6;border-radius:50%;font-size:18px;line-height:1}.tuning-toggle:hover{opacity:1}.tuning-panel{border:2px solid var(--ink);background:#f7eed6f2;border-radius:10px;width:min(320px,100vw - 16px);max-height:calc(100vh - 60px);padding:10px 12px;overflow-y:auto;box-shadow:3px 3px #3b241840}.tuning-panel h3{margin:0 0 8px;font-size:15px}.tuning-row{grid-template-columns:1fr 110px 44px;align-items:center;gap:6px;margin-bottom:4px;display:grid}.tuning-row input{width:100%;accent-color:var(--ink)}.tuning-row output{text-align:right;font-variant-numeric:tabular-nums}.tuning-buttons{gap:6px;margin-top:8px;display:flex}.tuning-buttons button{border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;border-radius:6px;flex:1;padding:4px 6px}.tuning-hint{color:var(--ink-soft);margin:8px 0 0}.corner-buttons{gap:6px;display:flex}.tuning-check{align-items:center;gap:6px;margin-top:8px;display:flex}.tuning-check input{accent-color:var(--ink)}.star{color:#3b241838}.star.on{color:#f2c230;-webkit-text-stroke:1px var(--ink)}.hud-level-name{text-transform:none;letter-spacing:0;color:var(--ink-soft);font-weight:400}.ink-button,.menu-button,.play-button,.levels-button,.level-select .back{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;border-radius:255px 15px 225px/15px 225px 15px 255px;font-weight:700;box-shadow:3px 3px #3b241840}.menu-button:hover,.levels-button:hover,.level-select .back:hover{background:#f3e6c4}.menu-button{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));opacity:.75;min-height:40px;padding:4px 14px;font-size:16px;position:absolute}.menu-button:hover{opacity:1}.screen{width:100%;height:100%;position:relative}.totals{align-items:center;gap:.35em;font-weight:700;display:flex}.totals .coin{margin-left:.6em}.title-canvas{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.title-menu{pointer-events:none;flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;bottom:6vh;left:0;right:0}.title-menu>*{pointer-events:auto}.play-button{letter-spacing:.04em;background:#f2c230;border-width:5px;padding:.15em 1.1em;font-size:clamp(36px,8vh,72px);animation:.5s cubic-bezier(.2,1.8,.4,1) both play-in}.play-button:hover{background:#f6d35c;transform:rotate(-2deg)scale(1.04)}@keyframes play-in{0%{transform:scale(0)rotate(-12deg)}}.levels-button{padding:4px 18px;font-size:20px;animation:.5s cubic-bezier(.2,1.8,.4,1) .15s both play-in}.title-menu .totals{font-size:18px}.skip-hint{text-align:center;width:100%;color:var(--ink-soft);opacity:.7;pointer-events:none;margin:0;position:absolute;bottom:12px}.level-select{flex-direction:column;align-items:center;padding:16px;display:flex;overflow-y:auto}.level-select header{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(960px,100%);display:grid}.level-select h1{margin:0;font-size:clamp(24px,5vw,40px)}.level-select .back{justify-self:start;padding:4px 14px;font-size:16px}.level-select header .totals{justify-self:end}.level-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;width:min(960px,100%);margin:20px 0 0;padding:0;list-style:none;display:grid}.level-card{border:3px solid var(--ink);width:100%;color:var(--ink);font:inherit;cursor:pointer;background:#faf3e0e6;border-radius:225px 15px 255px/15px 255px 15px 225px;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;transition:transform .12s;display:flex;box-shadow:3px 3px #3b241840}.level-card:hover:not(:disabled){background:#fff8e6;transform:rotate(-1.5deg)scale(1.03)}.level-card.locked{opacity:.5;cursor:not-allowed}.level-num{font-size:36px;font-weight:700;line-height:1}.level-name{text-align:center;font-size:15px;font-weight:700}.level-stars{font-size:22px}.level-best{color:var(--ink-soft);font-size:13px}@media (prefers-reduced-motion:reduce){.summary,.summary-stars .star.on,.play-button,.levels-button,.box-overlay .hint,.hp-low .hp-fill{animation:none}}.store-button,.header-shop,.shop .back,.shop-action button{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;border-radius:255px 15px 225px/15px 225px 15px 255px;font-weight:700;box-shadow:3px 3px #3b241840}.store-button{padding:8px 16px;font-size:20px;animation:.5s cubic-bezier(.2,1.8,.4,1) .25s both play-in;position:absolute;top:14px;left:14px}.store-button:hover,.header-shop:hover,.shop .back:hover,.shop-action button:hover:not(:disabled){background:#f3e6c4}.header-shop{padding:4px 14px;font-size:16px}.level-select header{grid-template-columns:1fr auto auto 1fr}.shop{flex-direction:column;align-items:center;padding:16px;display:flex;overflow-y:auto}.shop header{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(1000px,100%);display:grid}.shop h1{margin:0;font-size:clamp(24px,5vw,40px)}.shop .back{justify-self:start;padding:4px 14px;font-size:16px}.shop header .totals{justify-self:end;font-size:22px}.shop h2{width:min(1000px,100%);margin:22px 0 8px;font-size:22px}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;width:min(1000px,100%);margin:0;padding:0;list-style:none;display:grid}.shop-card{border:3px solid var(--ink);text-align:center;background:#faf3e0eb;border-radius:225px 15px 255px/15px 255px 15px 225px;flex-direction:column;align-items:center;padding:12px;display:flex;box-shadow:3px 3px #3b241840}.shop-card.equipped{background:#fff6d6;box-shadow:0 0 0 4px #f2c230,3px 3px 0 4px #3b241840}.shop-card.bought{animation:.5s cubic-bezier(.2,1.8,.4,1) bought}@keyframes bought{50%{transform:scale(1.06)rotate(-2deg)}}.shop-card.locked{opacity:.6}.shop-card h3{margin:4px 0 2px;font-size:19px}.shop-desc{min-height:2.6em;color:var(--ink-soft);margin:0 0 8px;font-size:14px}.cleat-preview{width:200px;height:110px}.gadget-icon{filter:grayscale(.6);place-items:center;height:110px;font-size:64px;display:grid}.stats{text-align:left;grid-template-columns:auto 1fr;gap:4px 8px;width:100%;margin:0 0 6px;font-size:13px;display:grid}.stats dd{align-items:center;margin:0;display:flex}.stat-bar{border:2px solid var(--ink);background:#fff9;border-radius:6px;width:100%;height:10px;position:relative;overflow:hidden}.stat-bar span{background:linear-gradient(#e0583f,#b3261e);height:100%;display:block}.shop-special{color:#1f4fa8;margin:0 0 6px;font-size:13px;font-weight:700}.shop-action{margin-top:auto;padding-top:4px}.shop-action button{align-items:center;gap:6px;padding:4px 16px;font-size:16px;display:inline-flex}.shop-action button.buy{background:#f2c230}.shop-action button.buy:hover{background:#f6d35c}.shop-action button:disabled{opacity:.55;cursor:not-allowed}.equipped-tag,.soon{color:var(--ink-soft);font-weight:700}.shop-note{width:min(1000px,100%);color:var(--ink-soft);margin:-4px 0 10px;font-size:14px}.shop-slot{color:var(--ink-soft);margin:0 0 6px;font-size:13px;font-weight:700}.shop-card:not(.locked) .gadget-icon{filter:none}body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}.corner-controls{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));z-index:5;gap:8px;display:flex;position:absolute}.round-button{border:3px solid var(--ink);background:var(--paper);width:44px;height:44px;color:var(--ink);cursor:pointer;border-radius:50%;font-size:20px;line-height:1;box-shadow:2px 2px #3b241840}.round-button:hover{background:#f3e6c4}.store-button{top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}.modal-backdrop{z-index:20;background:#3b241859;place-items:center;padding:16px;animation:.15s ease-out fade-in;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.modal{border:4px solid var(--ink);background:#faf3e0;border-radius:255px 20px 225px/20px 225px 20px 255px;width:min(380px,100%);max-height:calc(100vh - 32px);padding:16px 20px 18px;overflow-y:auto;box-shadow:5px 5px #3b24184d}.modal h2{text-align:center;margin:0 0 12px;font-size:28px}.toggle{cursor:pointer;border-bottom:2px dashed #3b241833;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:4px 2px;font-size:18px;font-weight:700;display:flex;position:relative}.toggle.disabled{opacity:.5;cursor:default}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-track{border:3px solid var(--ink);background:#d9c59a;border-radius:18px;flex:none;width:56px;height:30px;transition:background .15s;position:relative}.toggle-thumb{border:2px solid var(--ink);background:#fffdf6;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-track{background:#f2c230}.toggle input:checked+.toggle-track .toggle-thumb{transform:translate(26px)}.toggle input:focus-visible+.toggle-track{outline-offset:2px;outline:3px solid #1f4fa8}.settings-danger{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.settings button{border:3px solid var(--ink);background:var(--paper);min-height:40px;color:var(--ink);font:inherit;cursor:pointer;border-radius:.5em;padding:4px 14px;font-weight:700}.settings button.danger{color:#b3261e}.settings button.danger.armed{color:#fff;background:#b3261e}.settings-note{color:var(--ink-soft);text-align:center;margin:14px 0 10px;font-size:14px}.settings button.done{background:#f2c230;width:100%;display:block}.toast{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;border:3px solid var(--ink);pointer-events:none;background:#fff6d6;border-radius:999px;padding:8px 18px;font-weight:700;animation:3.2s ease-in-out both toast;position:fixed;box-shadow:3px 3px #3b241840}@keyframes toast{0%{opacity:0;transform:translate(-50%,20px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%)}}.rotate-hint{left:12px;right:12px;top:calc(66px + env(safe-area-inset-top));z-index:25;border:3px solid var(--ink);background:#fff6d6;border-radius:14px;align-items:center;gap:10px;padding:10px 12px;font-weight:700;display:flex;position:fixed;box-shadow:3px 3px #3b241840}.rotate-icon{font-size:22px}.rotate-hint button{border:2px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:50%;width:36px;height:36px;margin-left:auto;font-size:16px}@media (prefers-reduced-motion:reduce){.toast{animation:none;transform:translate(-50%)}}.ball-select{flex-direction:column;align-items:center;padding:16px;display:flex;overflow-y:auto}.ball-select header{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(1100px,100%);display:grid}.ball-select h1{margin:0;font-size:clamp(24px,5vw,40px)}.ball-select .back{border:3px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:255px 15px 225px/15px 225px 15px 255px;justify-self:start;padding:4px 14px;font-family:inherit;font-size:16px;font-weight:700}.ball-select .header-shop{justify-self:end}.ball-select-note{color:var(--ink-soft);text-align:center;margin:8px 0 0}.ball-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;width:min(1100px,100%);margin:16px 0 0;padding:0;list-style:none;display:grid}.ball-card{border:3px solid var(--ink);text-align:center;background:#faf3e0eb;border-radius:225px 15px 255px/15px 255px 15px 225px;flex-direction:column;align-items:center;padding:12px 14px 14px;display:flex;position:relative;box-shadow:3px 3px #3b241840}.ball-card.selected{background:#fff6d6;box-shadow:0 0 0 4px #f2c230,3px 3px 0 4px #3b241840}.ball-card.locked{opacity:.75}.ball-card h3{margin:0;font-size:22px}.ball-title{color:var(--ink-soft);margin:0 0 6px;font-weight:700}.ball-personality{margin:0 0 8px;font-size:14px}.traits{text-align:left;width:100%;margin:0 0 8px;padding:0;font-size:13px;list-style:none}.traits .good{color:#2e7d32}.traits .bad{color:#b3261e}.ball-progress{justify-content:space-between;width:100%;margin-bottom:8px;font-weight:700;display:flex}.ball-actions{gap:8px;margin-top:auto;display:flex}.ball-actions button{border:3px solid var(--ink);background:var(--paper);min-height:40px;color:var(--ink);font:inherit;cursor:pointer;border-radius:255px 15px 225px/15px 225px 15px 255px;padding:4px 18px;font-weight:700;box-shadow:2px 2px #3b241840}.ball-actions button.primary{background:#f2c230;font-size:18px}.ball-locked-hint{color:var(--ink-soft);margin:4px 0 0;font-weight:700}.ball-preview.locked{filter:brightness(.25)contrast(.8);opacity:.7}.ribbon{border:2px solid var(--ink);background:#f2c230;border-radius:4px;padding:2px 10px;font-size:13px;font-weight:700;position:absolute;top:10px;right:-6px;transform:rotate(6deg)}.ribbon.done{background:#8bc34a}.current-ball,.unlock-banner{border:3px solid var(--ink);color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:#fff6d6;border-radius:999px;align-items:center;gap:10px;margin-top:12px;padding:4px 16px 4px 6px;display:flex;box-shadow:2px 2px #3b241840}.current-ball span,.unlock-banner span{flex-direction:column;display:flex}.current-ball small,.unlock-banner small{color:var(--ink-soft)}.unlock-banner{background:#f2c230;margin:4px auto 8px;font-size:.7em;animation:.5s cubic-bezier(.2,1.8,.4,1) 2s both star-pop}.ball-select header{grid-template-columns:1fr auto 1fr}.ball-select-right{justify-content:flex-end;align-items:center;gap:12px;display:flex}.ball-card.for-sale{border-style:dashed}.ball-card.bought{animation:.5s cubic-bezier(.2,1.8,.4,1) bought}.ball-actions button:disabled{opacity:.55;cursor:not-allowed}.ball-actions button .coin{vertical-align:middle}.ribbon.sale{background:#64b5f6}.outfit-group{width:min(1000px,100%)}.outfit-slot{color:var(--ink-soft);margin:10px 0 6px;font-size:17px}.outfit-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.outfit-card{padding:8px}.outfit-card h3{font-size:15px}.outfit-card .shop-action button{padding:3px 10px;font-size:14px}.upgrade-row{border-top:2px dashed #3b241833;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:10px;padding-top:8px;display:flex}.upgrade-row.flash{animation:.5s cubic-bezier(.2,1.8,.4,1) bought}.tier{align-items:center;gap:8px;font-weight:700;display:flex}.pips{gap:4px;display:inline-flex}.pip{border:2px solid var(--ink);background:#fff9;border-radius:50%;width:14px;height:14px}.pip.on{background:#f2c230}.next-upgrade{color:var(--ink-soft);text-align:center;margin:0;font-size:13px}.max-tier{color:#2e7d32;font-weight:700}.upgrade-row button{border:3px solid var(--ink);color:var(--ink);font:inherit;cursor:pointer;background:#f2c230;border-radius:255px 15px 225px/15px 225px 15px 255px;align-items:center;gap:6px;padding:4px 14px;font-weight:700;display:inline-flex;box-shadow:2px 2px #3b241840}.upgrade-row button:disabled{opacity:.55;cursor:not-allowed}.bonus-heading{width:min(960px,100%);margin:28px 0 0;font-size:24px}.bonus-note{width:min(960px,100%);color:var(--ink-soft);margin:2px 0 0}.bonus-grid{margin-top:12px}.level-card.bonus{background:#f3e5f5;border-style:dashed}.level-twist{color:var(--ink-soft);text-align:center;font-size:12px}
