:root{--ink: #1c1d21;--ink-2: rgba(28, 29, 33, .6);--ink-3: rgba(28, 29, 33, .4);--ink-unit: rgba(28, 29, 33, .58);--hairline: rgba(28, 29, 33, .1);--fill: rgba(28, 29, 33, .06);--primary: #1c1d21;--primary-hover: #303238;--primary-press: #090a0c;--gem: #2d62c8;--gem-deep: #1e4aa6;--ball: #1a9150;--sky: #eef3f8;--glass: rgba(255, 255, 255, .92);--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--fs-caption: .8125rem;--fs-secondary: .9375rem;--fs-body: 1.0625rem;--fs-title: 2rem;--fs-hud: min( calc(20.6px + 2.93vmin) , 8.6vw);--fs-hero: 4.5rem;--s1: .25rem;--s2: .5rem;--s3: .75rem;--s4: 1rem;--s5: 1.25rem;--s6: 1.5rem;--s7: 1.75rem;--s8: 2rem;--ease: cubic-bezier(.2, .8, .2, 1);--spring: cubic-bezier(.3, 1.35, .5, 1);--shadow-float: 0 0 0 .5px rgba(20, 32, 52, .06), 0 2px 6px rgba(20, 32, 52, .06), 0 8px 24px -6px rgba(20, 32, 52, .14)}*{box-sizing:border-box}@font-face{font-family:HamburgJ;src:url(/ball-roll-3d/brand/hamburgj.ttf) format("truetype");font-display:swap}.brand{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + var(--s3));left:calc(env(safe-area-inset-left) + var(--s3));display:inline-flex;align-items:center;gap:var(--s2);height:2.25rem;padding:0 .875rem 0 .625rem;border-radius:999px;background:var(--glass);box-shadow:var(--shadow-float);color:#000000de;text-decoration:none;font-family:"HamburgJ",var(--font);font-size:1.2rem;font-weight:500;letter-spacing:.02em;text-transform:lowercase;line-height:1;-webkit-tap-highlight-color:transparent;transition:opacity .15s var(--ease)}.brand img{display:block;width:24px;height:24px}@media(hover:hover){.brand:hover{opacity:.87}}.brand:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.mute{position:fixed;z-index:6;right:calc(env(safe-area-inset-right) + var(--s3));bottom:calc(env(safe-area-inset-bottom) + var(--s3));display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:999px;background:var(--glass);box-shadow:var(--shadow-float);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}.mute-icon{width:1.25rem;height:1.25rem;background:currentColor;-webkit-mask:url(/ball-roll-3d/icons/volume-2.svg) center / contain no-repeat;mask:url(/ball-roll-3d/icons/volume-2.svg) center / contain no-repeat}.mute[aria-pressed=false] .mute-icon{-webkit-mask-image:url(/ball-roll-3d/icons/volume-x.svg);mask-image:url(/ball-roll-3d/icons/volume-x.svg)}.mute[aria-pressed=false]{color:var(--ink-2)}@media(hover:hover){.mute:hover{opacity:.87}}.mute:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media(max-width:480px){body.running .brand span{display:none}body.running .brand{padding:0 .375rem}}html{font-size:clamp(15px,calc(13.15px + .73vmin),21px)}html,body{margin:0;height:100%;overflow:hidden;background:var(--sky);color:var(--ink);font-family:var(--font);font-weight:400;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}p,dl,dd,h1{margin:0}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}[hidden]{display:none!important}.hud-dist,.hud-gems,.result-dist,.stats dd,.intro .best b{font-weight:600;font-variant-numeric:tabular-nums}.unit{margin-left:.12em;font-size:.5em;font-weight:400;letter-spacing:0;color:var(--ink-unit)}.gem-icon{display:inline-block;flex:none;width:.7em;height:.84em;background:linear-gradient(to bottom,rgba(255,255,255,.28) 0 34%,transparent 34%),linear-gradient(to right,transparent 50%,var(--gem-deep) 50%),var(--gem);clip-path:polygon(24% 0,76% 0,100% 34%,50% 100%,0 34%)}.pill{display:inline-flex;align-items:center;background:#ffffffeb;border-radius:999px;box-shadow:var(--shadow-float)}#hud{position:fixed;inset:0;pointer-events:none;z-index:2;transition:opacity .35s var(--ease) .3s,transform .35s var(--ease) .3s}#hud.out{opacity:0;transform:translateY(-.5rem)}#hud .hud-center{animation:hud-in .5s .14s var(--ease) both}#hud .hud-gems{animation:hud-in-r .5s .22s var(--ease) both}@keyframes hud-in{0%{opacity:0;transform:translate(-50%,-.5rem)}}@keyframes hud-in-r{0%{opacity:0;transform:translate(.75rem)}}.hud-gems{position:absolute;top:calc(env(safe-area-inset-top) + var(--s3) + (var(--fs-hud) - 2.25rem) / 2 + 1px);right:calc(env(safe-area-inset-right) + var(--s4));display:inline-flex;align-items:center;gap:var(--s2);height:2.25rem;padding:0 .625rem 0 .75rem;font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.hud-gems .gem-icon{font-size:1.16em}#gem-count{font-weight:600;color:var(--ink);text-box:trim-both cap alphabetic}#hud .hud-gems.bump{animation:bump .32s var(--spring)}@keyframes bump{30%{transform:scale(1.12)}}.hud-gems{--heat: 0;transition:box-shadow .25s var(--ease)}.hud-gems.hot{box-shadow:0 0 0 calc(2px + var(--heat) * 1px) rgba(42,130,234,calc(.3 + var(--heat) * .2)),0 0 calc(14px + var(--heat) * 10px) calc(1px + var(--heat) * 2px) rgba(42,130,234,calc(.22 + var(--heat) * .18)),var(--shadow-float)}#hud .hud-gems.clear{animation:clear .9s var(--ease)}@keyframes clear{0%{transform:scale(1);box-shadow:0 0 #1553d48c,var(--shadow-float)}18%{transform:scale(1.16)}40%{transform:scale(1)}to{box-shadow:0 0 0 1.1rem #1553d400,var(--shadow-float)}}.hatch{--p: 0;--ring: .2em;position:relative;flex:none;width:1.4em;height:1.4em;margin-left:.125rem;margin-right:-.125rem;border-radius:50%}.hatch b{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ball) calc(var(--p) * 1turn),rgba(28,29,33,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring) - .5px),#000 calc(100% - var(--ring)));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring) - .5px),#000 calc(100% - var(--ring)))}.hatch b:before,.hatch b:after{content:"";position:absolute;top:0;left:calc(50% - var(--ring) / 2);width:var(--ring);height:var(--ring);border-radius:50%;background:var(--ball);opacity:min(1,calc(var(--p) * 60))}.hatch b:after{height:50%;background:radial-gradient(circle at 50% calc(var(--ring) / 2),var(--ball) calc(var(--ring) / 2 - .5px),transparent calc(var(--ring) / 2)) top / var(--ring) var(--ring) no-repeat;border-radius:0;transform-origin:50% 100%;transform:rotate(calc(var(--p) * 1turn))}.hatch i{position:absolute;inset:calc(var(--ring) + .12em);border-radius:50%;background:radial-gradient(circle at 34% 30%,#7fd29c 0,var(--ball) 46%,#25804a 100%);transform:scale(calc(.32 + .68 * var(--p)))}.hatch:after{content:"";position:absolute;inset:-1px;border-radius:50%;background:#fff;opacity:0}.hatch.pop{animation:hatch-pop .55s var(--spring)}.hatch.pop:after{animation:hatch-flash .36s var(--ease)}@keyframes hatch-pop{0%{transform:scale(1);box-shadow:0 0 #319b57bf}24%{transform:scale(1.5)}62%{transform:scale(1)}to{box-shadow:0 0 0 .75em #319b5700}}@keyframes hatch-flash{0%{opacity:0}22%{opacity:.95}}#veil{position:fixed;inset:0;z-index:3;pointer-events:none;background:#eef3f9;opacity:0;transition:opacity .2s ease-in}#veil.on{opacity:.18;transition:opacity .25s var(--ease)}#fx-layer{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}.fx-spark{--tl: 0;position:absolute;left:-10px;top:-10px;width:20px;height:20px;will-change:transform}.fx-spark:before{content:"";position:absolute;top:4px;right:50%;width:calc(10px + var(--tl) * 10px);height:12px;border-radius:6px;background:linear-gradient(to left,#1553d4e6,#3d8bf273 60%,#3d8bf200)}.fx-spark:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 42% 40%,#fff 0 16%,#9cc6ff 34%,#2f7df0 62%,var(--gem) 100%);box-shadow:0 0 0 .5px #0f3ea366,0 1px 3px #0f3ea34d}.hud-center{position:absolute;top:calc(env(safe-area-inset-top) + var(--s3));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.hud-dist{display:flex;align-items:baseline;font-size:var(--fs-hud);line-height:1;letter-spacing:-.02em;text-shadow:0 0 1px rgba(255,255,255,.18),0 0 .5rem rgba(255,255,255,.9),0 0 1.5rem rgba(255,255,255,.6)}.hud-dist.mile{animation:mile .7s var(--spring)}@keyframes mile{25%{transform:scale(1.14)}}.hud-dist.passed{animation:passed 1s var(--ease)}@keyframes passed{0%,44%,to{transform:scale(1)}14%{transform:scale(1.2)}58%{transform:scale(1.1)}}.overlay{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:calc(env(safe-area-inset-top) + clamp(1rem,4vh,3rem)) var(--s4) calc(env(safe-area-inset-bottom) + 3rem);text-align:center;overflow-y:auto;touch-action:none;background:linear-gradient(to bottom,#ecf2f880,#ecf2f800 70%);transition:opacity .4s var(--ease)}@starting-style{.overlay{opacity:0}}.overlay.leaving{opacity:0;pointer-events:none;transition:opacity .2s ease-in}.overlay.leaving .card{transform:scale(.98);transition:transform .2s ease-in}.card{display:flex;flex-direction:column;align-items:center;gap:var(--s5);width:min(21rem,100%);padding:var(--s6) var(--s6) var(--s6);background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-radius:1.75rem;box-shadow:inset 0 0 0 1px #ffffffbf,0 0 0 .5px #14203414,0 2px 6px #1420340d,0 16px 40px -12px #14203433;animation:card-in .32s var(--ease) both}@media(pointer:coarse){.card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fffffff5}}@keyframes card-in{0%{opacity:0;transform:translateY(.75rem) scale(.98)}}.card>*{animation:rise .36s var(--ease) both}.card>:nth-child(2){animation-delay:.04s}.card>:nth-child(3){animation-delay:.08s}.card>:nth-child(4){animation-delay:.12s}@keyframes rise{0%{opacity:0;transform:translateY(.5rem)}}.intro{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}.title{font-size:var(--fs-title);font-weight:600;line-height:1.1;letter-spacing:-.02em}.title span{font-weight:400;color:#6f7278}.title .logo{display:block;width:min(20rem,70vw);height:auto;margin:calc(-1 * var(--s2)) auto 0;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.intro .best{font-size:var(--fs-secondary);color:var(--ink-2)}.intro .best b{color:var(--ink)}.result{display:flex;flex-direction:column;align-items:center;width:100%}.result-head{display:contents}.result-cause{order:0;font-size:var(--fs-secondary);font-weight:600;line-height:1.3;color:#3a3a3c}.result.beaten .result-cause{order:2;margin-top:var(--s2)}.result-dist{order:1;display:flex;align-items:baseline;justify-content:center;margin-top:calc(var(--s1) + 6px);font-size:min(var(--fs-hero),10vh);line-height:1;letter-spacing:-.035em}#result-dist{display:inline-block;text-align:right}.new-best{order:0;padding:.3125rem .75rem;font-size:var(--fs-caption);font-weight:600;line-height:1.2;color:#fff;background:var(--primary);border-radius:999px;animation:pop .6s .75s var(--spring) both}@keyframes pop{0%{opacity:0;transform:scale(.8)}}.new-best.wait,.new-best.wait:after{visibility:hidden;animation:none}.new-best.in{animation:pop .5s var(--spring) both}.new-best.in:after{animation-delay:.3s}.new-best{position:relative;overflow:hidden}.new-best:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translate(-120%);animation:shine .9s 1.2s var(--ease) both}@keyframes shine{to{transform:translate(120%)}}.result-dist .landed{animation:land .45s var(--spring)}@keyframes land{30%{transform:scale(1.05)}}.stats{order:3;display:flex;justify-content:center;width:100%;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hairline)}.stats>div{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}.stats>div:not([hidden])~div:not([hidden]){border-left:1px solid var(--hairline)}.stats dt{font-size:var(--fs-caption);color:var(--ink-2)}.stats dd{display:flex;align-items:center;gap:.375rem;font-size:var(--fs-body);line-height:1.3}.stats .gem-icon{font-size:.9em}.play{width:100%;height:3rem;font-family:inherit;font-size:var(--fs-body);font-weight:600;color:#fff;background:var(--primary);border:0;border-radius:999px;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 1px 2px #14161c29,0 6px 16px -8px #14161c73;transition:transform .35s var(--spring),background-color .15s,box-shadow .2s var(--ease)}@media(hover:hover){.play:hover{background:var(--primary-hover);box-shadow:inset 0 1px #ffffff1a,0 1px 2px #14161c29,0 10px 22px -10px #14161c80}}#menu-intro:not([hidden])~.play{animation:rise .6s .1s var(--ease) both,breathe 2.8s 1.2s ease-in-out infinite}@keyframes breathe{50%{box-shadow:inset 0 1px #ffffff1a,0 1px 2px #14161c29,0 10px 26px -8px #14161c8c,0 0 0 5px #1c1d2112}}.play:active,.play.pressed{background:var(--primary-press);transform:scale(.97);transition-duration:.08s}.play:focus-visible{outline:3px solid rgba(28,29,33,.3);outline-offset:3px}.controls{display:flex;justify-content:center;font-size:var(--fs-secondary);line-height:1.5;color:var(--ink-2)}.controls .keys{display:inline-flex;align-items:center;gap:.3em}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .35em;font:inherit;font-size:.86em;font-weight:600;line-height:1;color:var(--ink);background:#fff;border-radius:.375rem;box-shadow:0 0 0 .5px #1c1d2124,0 1px #1c1d2124}kbd+kbd{margin-left:-.1em}kbd.arrow:before{content:"";width:.36em;height:.36em;border:solid currentColor;border-width:0 0 .12em .12em;transform:translate(.08em) rotate(45deg)}kbd.arrow.r:before{transform:translate(-.08em) rotate(-135deg)}.controls .touch{display:none}@media(hover:none)and (pointer:coarse){.controls .keys{display:none}.controls .touch{display:inline;font-size:.8125rem;color:#6e6e73}.result-cause{font-size:.875rem}}#result:not([hidden])~.controls{display:none}.pause,.overlay.pause{padding-top:calc(env(safe-area-inset-top) + var(--s3) + var(--fs-hud) + var(--s6))}.pause{z-index:5;cursor:pointer;background:linear-gradient(to bottom,#ecf2f899,#ecf2f840 70%)}.pause .card{gap:var(--s2);width:auto;min-width:min(16rem,100%);padding:var(--s6) var(--s8)}.pause-icon{width:1.125rem;height:1.25rem;margin-bottom:var(--s2);background:linear-gradient(var(--ink),var(--ink)) left / .375rem 100% no-repeat,linear-gradient(var(--ink),var(--ink)) right / .375rem 100% no-repeat;border-radius:2px}.pause-label{font-size:var(--fs-title);font-weight:600;line-height:1.1;letter-spacing:-.02em}@media(orientation:portrait)and (min-height:721px){.overlay{padding-top:calc(env(safe-area-inset-top) + 8vh)}}@media(max-height:720px){.overlay{padding-top:calc(env(safe-area-inset-top) + 4vh)}.card{gap:var(--s4);padding:var(--s6) var(--s6) var(--s4)}.stats{margin-top:var(--s4);padding-top:var(--s3)}}@media(max-height:500px){.overlay{justify-content:center;align-items:flex-start;padding:calc(env(safe-area-inset-top) + var(--s3)) var(--s4) calc(env(safe-area-inset-bottom) + var(--s3)) calc(env(safe-area-inset-left) + var(--s6))}.card{width:min(20rem,42vw)}.overlay.pause{padding-top:calc(env(safe-area-inset-top) + var(--s3))}.card>.controls{display:none}.pause .controls{display:flex}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}