:root{--p:3px;--ink:#34305c;--cream:#fbf3df;--cream-hi:#fff;--cream-lo:#e4d3aa;--sun:#ffd24a;--sun-hi:#fff0a8;--sun-lo:#e59a1f;--orange:#f7902e;--orange-hi:#ffc46a;--orange-lo:#c75a14;--value:#d9681a;--track:#3f3a6e;--drop-color:#18163c73;--frame:0 calc(-1*var(--p))0 var(--ink),0 var(--p)0 var(--ink),calc(-1*var(--p))0 0 var(--ink),var(--p)0 0 var(--ink);--drop:drop-shadow(0 var(--p)0 var(--drop-color));--heel:0 calc(2*var(--p))0 calc(-1*var(--p))var(--ink);--chunky:"Jersey 25","DotGothic16",system-ui,sans-serif;--small:"DotGothic16",system-ui,sans-serif;--outline:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}*{box-sizing:border-box}html,body,#root{overflow:hidden;font-family:var(--chunky);font-synthesis:none;color:var(--ink);background:#1f4fd1;height:100%;margin:0}.stage{position:relative;background:linear-gradient(to bottom,var(--sky-top),var(--sky-bottom));height:100%}.stage canvas{image-rendering:pixelated;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.reroll,.style-bar button,.course-panel button,.course-panel select,.turns button,.shot-panel button{--fill:var(--cream);--hi:var(--cream-hi);--lo:var(--cream-lo);font:18px/1 var(--chunky);color:var(--ink);background:var(--fill);box-shadow:var(--bands);filter:var(--drop);cursor:pointer;position:relative;isolation:isolate;transform:rotate(var(--tilt,0deg));border:0;border-radius:0;padding:6px 12px 7px}.reroll,.style-bar button,.course-panel button,.course-panel select,.turns button,.shot-panel button,.pill,.panel-body,.shot-panel{--bands:inset 0 var(--p)0 var(--hi),inset 0 calc(-1*var(--p))0 var(--lo);--dither:repeating-conic-gradient(var(--lo)0 25%,transparent 0 50%)0 0/calc(2*var(--p))calc(2*var(--p))}.reroll:before,.style-bar button:before,.course-panel button:before,.turns button:before,.shot-panel button:before,.pill:before,.panel-body:before,.shot-panel:before{content:"";position:absolute;z-index:-1;pointer-events:none;background:var(--dither);-webkit-mask:linear-gradient(#0000 50%,#000 50%);mask:linear-gradient(#0000 50%,#000 50%);inset:0}.presets button:nth-child(odd),.knobs button:nth-child(3n+1),.shot-row>:nth-child(odd){--tilt:-1deg}.presets button:nth-child(2n),.knobs button:nth-child(3n+2),.shot-row>:nth-child(2n){--tilt:.8deg}@media (hover:hover){.reroll:hover,.style-bar button:hover,.course-panel button:hover,.turns button:hover,.shot-panel button:hover:not(:disabled){animation:.32s steps(6,end) boing}}@keyframes boing{0%{transform:rotate(var(--tilt,0deg))}35%{transform:translateY(calc(-2*var(--p)))rotate(calc(var(--tilt,0deg)*-2))}70%{transform:translateY(0)scale(1.06,.92)}to{transform:rotate(var(--tilt,0deg))}}.reroll:active,.style-bar button:active,.course-panel button:active,.turns button:active,.shot-panel button:active:not(:disabled),.presets button[aria-pressed=true],.course-presets button[aria-pressed=true],.shot-panel button[aria-pressed=true]{transform:translateY(var(--p))rotate(var(--tilt,0deg));filter:none;animation:none}.shot-panel button:disabled{opacity:.5;cursor:default}.presets button[aria-pressed=true],.course-presets button[aria-pressed=true],.shot-panel button[aria-pressed=true]{--fill:var(--sun);--hi:var(--sun-hi);--lo:var(--sun-lo)}kbd{font:13px/1 var(--chunky);display:inline-block;color:var(--ink);vertical-align:1px;background:#34305c24;margin-left:6px;padding:2px 5px 3px}.top{position:absolute;display:flex;pointer-events:none;flex-direction:column;gap:10px;inset:16px 16px auto}.title{display:flex;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items: center;gap:12px}.title h1{font-family:var(--chunky);color:#fff;-webkit-font-smoothing:none;display:flex;gap:.12em;margin:0;font-size:clamp(34px,7.5vw,60px);font-weight:400}.title-letter{display:inline-block;color:#fff;--o:.06em;text-shadow:var(--o)0 var(--ring),calc(-1*var(--o))0 var(--ring),0 var(--o)var(--ring),0 calc(-1*var(--o))var(--ring),var(--o)var(--o)var(--ring),calc(-1*var(--o))var(--o)var(--ring),var(--o)calc(-1*var(--o))var(--ring),calc(-1*var(--o))calc(-1*var(--o))var(--ring),0 calc(2.5*var(--o))#0b103059;animation:2.4s ease-in-out infinite title-wave;animation-delay:calc(var(--i)*-.16s)}.title-gap{display:inline-block;width:.35em}@keyframes title-wave{0%,to{transform:translateY(.06em)}50%{transform:translateY(-.1em)}}.title-letter{translate:calc((var(--mid,0) - var(--i))*var(--charge,0)*.08em)0;scale:calc(1 - var(--charge,0)*.06)calc(1 - var(--charge,0)*.05);transition:translate .22s ease-out,scale .22s ease-out}.title h1.charging{animation:80ms step-end infinite buzz}.charging .title-letter{animation:2.4s ease-in-out infinite title-wave,90ms step-end infinite tremble;animation-delay:calc(var(--i)*-.16s),calc(var(--i)*-37ms);transition:translate 60ms linear,scale 60ms linear}@keyframes buzz{0%{translate:calc(var(--charge)*.6px)0}25%{translate:calc(var(--charge)*-.6px)calc(var(--charge)*.3px)}50%{translate:calc(var(--charge)*.3px)calc(var(--charge)*-.3px)}75%{translate:calc(var(--charge)*-.3px)0}}@keyframes tremble{0%{rotate:calc(var(--charge)*1.5deg)}50%{rotate:calc(var(--charge)*-1.5deg)}}.sprung .title-letter{animation:2.4s ease-in-out infinite title-wave,.75s ease-out spring;animation-delay:calc(var(--i)*-.16s),0s}@keyframes spring{0%{translate:calc((var(--mid) - var(--i))*var(--fling)*.08em)0;scale:calc(1 - var(--fling)*.06)calc(1 - var(--fling)*.05)}22%{translate:calc((var(--i) - var(--mid))*var(--fling)*.14em)calc(var(--fling)*-.35em);scale:calc(1 + var(--fling)*.12)calc(1 + var(--fling)*.06)}45%{translate:calc((var(--mid) - var(--i))*var(--fling)*.06em)0;scale:calc(1 - var(--fling)*.04)calc(1 - var(--fling)*.02)}68%{translate:calc((var(--i) - var(--mid))*var(--fling)*.025em)calc(var(--fling)*-.06em);scale:1}to{translate:0;scale:1}}.cheering .title-letter{animation:2.4s ease-in-out infinite title-wave,.9s steps(8,end) infinite cheer;animation-delay:calc(var(--i)*-.16s),calc(var(--i)*90ms)}@keyframes cheer{0%,60%,to{translate:0;scale:1}15%{translate:0 calc(var(--cheer)*-.4em);scale:calc(1 - var(--cheer)*.06)calc(1 + var(--cheer)*.1)}40%{translate:0;scale:calc(1 + var(--cheer)*.14)calc(1 - var(--cheer)*.12)}}.banner{position:absolute;display:flex;font-family:var(--chunky);font-size:clamp(40px,calc(6vw + 30px*var(--cheer)),120px);pointer-events:none;-webkit-font-smoothing:none;animation:3.2s steps(40,end) forwards banner;z-index:5;justify-content:center;gap:.08em;margin:0;line-height:1;inset:34% 0 auto}.banner .title-letter{--o:.07em;animation:.42s steps(6,end) backwards banner-pop,.9s steps(8,end) .42s infinite cheer;animation-delay:calc(var(--i)*45ms),calc(.42s + var(--i)*90ms)}.banner-ace .title-letter{--o:.08em}@keyframes banner{0%,80%{opacity:1;translate:0}to{opacity:0;translate:0 -40vh}}@keyframes banner-pop{0%{scale:0;translate:0 .6em}60%{scale:1.35 1.2;translate:0 -.2em}to{scale:1;translate:0}}.boost-pop{position:absolute;display:flex;font-family:var(--chunky);pointer-events:none;-webkit-font-smoothing:none;animation:.9s steps(14,end) forwards boost-pop;z-index:5;--cheer:.6;justify-content:center;gap:.06em;margin:0;font-size:clamp(30px,6vw,56px);line-height:1;inset:22% 0 auto}.boost-pop .title-letter{--o:.07em;animation:.3s steps(5,end) backwards banner-pop;animation-delay:calc(var(--i)*30ms)}.boost-pop.combo{inset:32% 0 auto}.boost-pop.combo .title-letter{color:#d6ffe9}.pips{display:inline-flex;align-items: center;gap:3px;margin-left:6px}.pips i{background:#3fe0b0;width:9px;height:9px;box-shadow:0 0 0 2px #10142e}.pips i.gone{opacity:.45;background:0 0;box-shadow:inset 0 0 0 2px #10142e}.boost-pop.perfect .title-letter{color:#fff6a8}@keyframes boost-pop{0%,55%{opacity:1;translate:0}to{opacity:0;translate:0 -12vh}}.flash{position:absolute;pointer-events:none;z-index:4;animation:.42s steps(4,end) forwards flash;background:#fff;inset:0}@keyframes flash{0%{opacity:.85}to{opacity:0}}@media (prefers-reduced-motion:reduce){.title-letter,.charging .title-letter,.sprung .title-letter,.cheering .title-letter,.banner .title-letter,.boost-pop .title-letter,.title h1.charging{animation:none;translate:none;scale:none}.flash{display:none}}.reroll{pointer-events:auto;--fill:var(--sun);--hi:var(--sun-hi);--lo:var(--sun-lo);--tilt:1.5deg;padding:8px 16px 9px;font-size:20px}.style-bar,.course-panel{pointer-events:auto;align-self: flex-start;max-width:100%}.style-bar{display:flex;flex-wrap:wrap;align-items: center;gap:12px}.course-panel{display:flex;flex-direction:column;gap:12px}.style-bar button,.course-panel button,.course-panel select{padding:5px 10px 6px;font-size:16px}.presets{border:0;min-width:0;margin:0;padding:0}.presets,.knobs{display:flex;flex-wrap:wrap;align-items: center;gap:12px 10px}.custom[hidden]{display:inline;visibility:hidden}.custom{color:#fff;text-shadow:var(--outline);font-size:17px}.knob b,.tune b,.panel-toggle b{display:inline-block;color:var(--value);text-align:left;font-weight:400}.knob.idle{opacity:.55}.panel-toggle{align-self: flex-start}.panel-body{--hi:var(--cream-hi);--lo:var(--cream-lo);position:relative;isolation:isolate;overflow-y:auto;display:flex;margin:var(--p);background:var(--cream);box-shadow:var(--bands);filter:var(--drop);flex-direction:column;gap:10px;width:min(340px,100%);max-height:60vh;padding:12px}.panel-row{display:flex;gap:10px;margin-bottom:4px}.panel-row select{flex:1}.slider{display:grid;grid-template-columns:70px 1fr 40px;font:13px var(--small);align-items: center;gap:8px}.slider select{font:13px var(--small);color:var(--ink);border:2px solid var(--ink);background:#fff;border-radius:0;min-width:0}.slider input{accent-color:var(--orange);width:100%;min-width:0}.slider output{text-align:right;font-variant-numeric:tabular-nums}.course-presets{margin-bottom:4px}.course-panel .custom{color:var(--ink);text-shadow:none}.tune{align-self: flex-start}.turns{position:absolute;display:flex;gap:12px;bottom:22px;right:16px}.turns button{padding:6px 10px 7px;font-size:18px}.turns button:first-child{--tilt:-2deg}.turns button:last-child{--tilt:2deg}.turns kbd{margin:0 4px}.shot-panel{--hi:var(--cream-hi);--lo:var(--cream-lo);position:absolute;isolation:isolate;display:flex;background:var(--cream);box-shadow:var(--bands);filter:var(--drop);flex-direction:column;gap:10px;width:min(580px,100% - 32px);padding:12px 14px;font-size:16px;bottom:22px;left:50%;transform:translate(-50%)}.shot-panel:before{-webkit-mask:linear-gradient(transparent calc(100% - 4*var(--p)),#000 0);mask:linear-gradient(transparent calc(100% - 4*var(--p)),#000 0)}.shot-row{display:flex;flex-wrap:wrap;align-items: center;gap:12px 10px}.shot-panel button{--fill:#fff;--lo:var(--cream-lo);padding:5px 10px 6px;font-size:17px}.shot-panel input{font:13px var(--small);color:var(--ink);box-shadow:inset 0 var(--p)0 var(--cream-lo),var(--frame);background:#fff;border:0;border-radius:0;padding:6px 10px}.pill{--hi:var(--sun-hi);--lo:var(--sun-lo);position:relative;isolation:isolate;display:flex;background:var(--sun);box-shadow:var(--bands);flex-direction:column;align-items: center;min-width:56px;padding:4px 8px 6px;line-height:1;transform:rotate(-3deg)}.pill span{letter-spacing:.06em;color:var(--ink);font-size:13px}.pill b{color:#fff;text-shadow:var(--outline);margin-top:1px;font-size:26px;font-weight:400}.shot-panel .score{flex-direction:row;align-items:baseline;gap:6px;padding:3px 10px 5px}.shot-panel .score b{font-size:28px}.shot-panel .score span{font-size:16px}.aim{display:flex;align-items: center;gap:8px}.aim button{padding:4px 8px 5px}.shot-panel .spin-pad{overflow:hidden;--fill:#fff;--hi:#fff;--lo:var(--cream-lo);background:linear-gradient(var(--ink),var(--ink))center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink))center/2px 100% no-repeat,#fff;border:2px solid var(--ink);touch-action:none;border-radius:50%;width:38px;height:38px;padding:0}.shot-panel .spin-pad.ground{background:linear-gradient(var(--ink),var(--ink))center/100% 2px no-repeat,linear-gradient(#34305c40,#34305c40)center/2px 100% no-repeat,#fff}.spin-dot{position:absolute;background:var(--sun);border:2px solid var(--ink);box-sizing:border-box;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;transition:left 80ms steps(2,end),top 80ms steps(2,end)}.shot-panel .swing.boost{--fill:#ff6fb2;--hi:#ffa3cf;--lo:#d94b8f}.compass{display:grid;border:2px solid var(--ink);background:#fff;border-radius:50%;place-items: center;width:32px;height:32px;font-size:18px}.compass i{display:inline-block;font-style:normal}.loft{display:flex;border:0;align-items: flex-end;gap:6px;margin:0;padding:0}.loft-bars{display:flex;align-items: flex-end;gap:4px}.shot-panel .loft .bar{--tilt:0deg;border:2px solid var(--ink);box-shadow:none;filter:none;background:#fff;border-radius:3px;width:10px;min-width:0;padding:0;transform:none}.shot-panel .loft .bar:before{display:none}.shot-panel .loft .bar.on{background:var(--sun)}.loft-name{font-size:17px}.meter{position:relative;background:var(--track);border:2px solid var(--ink);box-shadow:inset 0 var(--p)0 #0000004d;overflow:hidden;border-radius:6px;flex:200px;height:26px}.meter-fill{position:absolute;background:linear-gradient(#fff6 0 var(--p),transparent 0),linear-gradient(transparent calc(100% - var(--p)),#00000040 0),linear-gradient(to right,#6ad548 0 50%,#ffd84a 0 80%,#ff5a3d 0);inset:0}.meter output{position:absolute;z-index:3;display:grid;color:#fff;text-shadow:var(--outline);place-items: center;font-size:18px;inset:0}.meter.perfect .meter-fill{background:linear-gradient(#ffffff80 0 var(--p),transparent 0),linear-gradient(transparent calc(100% - var(--p)),#00000040 0),#ff6fb2}.meter-mark{position:absolute;z-index:2;width:var(--p);box-shadow:0 0 0 2px var(--ink);background:#fff;margin-left:-1px;top:0;bottom:0}.shot-panel .swing{--fill:var(--orange);--hi:var(--orange-hi);--lo:var(--orange-lo);--tilt:2deg;color:#fff;text-shadow:var(--outline);touch-action:none;user-select:none;-webkit-user-select:none;animation:1.6s step-end infinite itch;padding:5px 16px 7px;font-size:22px}@keyframes itch{0%,80%{transform:rotate(2deg)}85%{transform:rotate(-2deg)translateY(-2px)}90%{transform:rotate(3deg)}95%{transform:rotate(0)translateY(-1px)}}.shot-panel .swing:active:not(:disabled){animation:none}.shot-panel .swing kbd{text-shadow:none;background:#ffffff59}@media (prefers-reduced-motion:reduce){.shot-panel .swing{animation:none}}.schemes{display:flex;border:0;flex-wrap:wrap;flex:1;gap:10px;margin:0;padding:0}.schemes button{flex:1 1 0}.shot-message{font:13px var(--small);color:var(--ink);min-height:1.3em;margin:0}.replay-row .code{flex:160px;min-width:0}.shot-panel .more{min-width:0;padding:4px 10px 6px}.panel-head{flex-wrap:nowrap;justify-content:space-between}.shot-panel.compact{gap:4px;width:min(660px,100% - 440px);padding:8px 12px}.shot-panel.compact .shot-message{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}.shot-panel.compact .shot-row{flex-wrap:nowrap;gap:10px}.shot-panel.compact .meter{flex:60px;min-width:60px}@media (max-width:1000px){.shot-panel.compact{width:calc(100% - 32px)}.turns{bottom:calc(22px + var(--shot-height,64px) + 16px)}}@media (max-width:700px){.shot-panel.compact{padding:8px}.shot-panel.compact .shot-row{justify-content:space-between;gap:4px}.shot-panel.compact .score{white-space:nowrap;flex-shrink:0;min-width:0;padding:2px 6px 4px}.shot-panel.compact .score b{font-size:24px}.shot-panel.compact .score span{font-size:14px}.shot-panel.compact .loft-name,.shot-panel.compact .swing kbd{display:none}.shot-panel.compact .loft-bars{gap:3px}.shot-panel.compact .loft .bar{width:8px}.shot-panel.compact .spin-pad{width:32px;height:32px}.shot-panel.compact .meter{flex:30px;min-width:30px}.shot-panel.compact .meter output{font-size:12px}.shot-panel.compact .swing{padding:4px 10px 6px;font-size:20px}.shot-panel.compact .more{padding:4px 7px 6px}}.landing{display:flex;background:linear-gradient(#1f4fd1,#6fb3f2);flex-direction:column;justify-content:center;align-items: center;gap:28px;height:100%;padding:16px}.landing .title h1{font-size:clamp(56px,16vw,120px)}.landing .reroll{padding:10px 22px 11px;font-size:24px}.sign-in{overflow:visible;align-items:stretch;width:min(300px,100%);max-height:none;font-size:18px}.sign-in label{display:flex;flex-direction:column;gap:4px}.sign-in input{font:18px/1 var(--small);color:var(--ink);background:var(--cream-hi);margin:var(--p);box-shadow:var(--frame),inset 0 var(--p)0 var(--cream-lo);outline:none;border:0;border-radius:0;padding:7px 8px}.sign-in input:focus{box-shadow:var(--frame),inset 0 var(--p)0 var(--cream-lo),0 0 0 calc(2*var(--p))var(--sun)}.sign-in .reroll{align-self: center;margin-top:4px}.sign-in .reroll:disabled{opacity:.6;cursor:default}.sign-in-error{margin:var(--p);font:18px/1 var(--chunky);text-align:center;color:#fff;box-shadow:var(--frame),inset 0 calc(-1*var(--p))0 #8e1428;background:#c0203a;padding:5px 8px 6px}