*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#86eef6}body{font-family:Fredoka,ui-rounded,system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}#app canvas{display:block;touch-action:none}kbd{display:inline-block;min-width:1.7em;padding:.05em .45em;margin:0 .1em;border-radius:.45em;background:#ffffffeb;color:#2a6f8f;font:600 .85em Fredoka,system-ui,sans-serif;text-align:center;box-shadow:0 2px #14506e59}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#1e78a00d,#0f466e59);transition:opacity 1.6s ease,visibility 1.6s}#overlay.gone{opacity:0;visibility:hidden}.card{text-align:center;text-shadow:0 3px 14px rgba(10,60,90,.45)}.card h1{margin:0;font-size:clamp(64px,12vw,132px);font-weight:600;letter-spacing:.02em;line-height:1;color:#fff;-webkit-text-stroke:0;text-shadow:0 5px 0 #2b9fc4,0 10px 30px rgba(10,60,90,.4)}.tag{margin:.4em 0 1.6em;font-size:22px;opacity:.95;letter-spacing:.08em}#start{font:600 22px Fredoka,system-ui,sans-serif;color:#2a7fa6;background:#fff;border:0;padding:.65em 1.8em;border-radius:999px;cursor:pointer;box-shadow:0 5px #2b9fc4,0 12px 30px #0a3c5a4d;transition:transform .15s ease,box-shadow .15s ease,opacity .4s}#start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px #2b9fc4,0 16px 34px #0a3c5a4d}#start:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #2b9fc4}#start:disabled{opacity:0;pointer-events:none}#loading{margin:0 auto 1em;width:220px;font-size:15px;transition:opacity .5s;height:2.6em}#loading.done{opacity:0;height:0;margin:0}.track{margin-top:8px;height:8px;border-radius:99px;background:#ffffff59;overflow:hidden}#loading-bar{height:100%;width:0;background:#fff;border-radius:99px;transition:width .3s}.keys{margin-top:2em;font-size:17px;line-height:2.1}.soft{opacity:.8}.small{font-size:14px;margin-top:1.2em}#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 2s ease 1s}body.playing #hud{opacity:1}body.hide-hud #hud>:not(#place-card){opacity:0}#distance,#clock{position:absolute;left:26px;font-size:18px;text-shadow:0 2px 8px rgba(10,60,90,.5);transition:opacity .6s}#distance{bottom:24px}#clock{bottom:50px;font-size:14px;opacity:.85;letter-spacing:.1em;text-transform:uppercase}#buttons{position:absolute;top:20px;right:22px;display:flex;gap:10px;pointer-events:auto;transition:opacity .6s}#buttons button{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:#ffffffd9;box-shadow:0 3px #1e78a080;position:relative}#buttons svg{width:22px;height:22px;fill:none;stroke:#2a7fa6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#buttons button.off{opacity:.55}#buttons button.off:after{content:"";position:absolute;width:26px;height:2.5px;background:#e8546b;border-radius:2px;transform:rotate(-45deg)}#place-card{position:absolute;top:9vh;left:50%;transform:translate(-50%,-8px);text-align:center;opacity:0;transition:opacity 1.4s ease,transform 1.4s ease;text-shadow:0 3px 12px rgba(10,60,90,.55)}#place-card.show{opacity:1;transform:translate(-50%)}#place{font-size:clamp(30px,4.4vw,50px);font-weight:500;letter-spacing:.06em;font-variant:small-caps}#place-card .rule{margin:6px auto;height:3px;width:70%;border-radius:3px;background:linear-gradient(90deg,transparent,#ff8a5c,transparent)}#place-sub{font-size:16px;opacity:.9;letter-spacing:.05em}#fork-hint{position:absolute;bottom:12vh;left:50%;transform:translate(-50%,10px);font-size:20px;padding:.5em 1.1em;border-radius:999px;background:#145a8247;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .8s ease,transform .8s ease;text-shadow:0 2px 6px rgba(10,60,90,.4)}#fork-hint.show{opacity:1;transform:translate(-50%)}#meters{position:absolute;right:24px;bottom:22px;display:flex;flex-direction:column;gap:10px;transition:opacity .6s}.meter{display:flex;align-items:center;gap:9px}.meter svg{width:26px;height:26px;padding:4px;border-radius:50%;background:#ffffffe0;fill:none;stroke:#2a7fa6;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;box-shadow:0 2px #1e78a073}.meter .bar{width:150px;height:12px;border-radius:99px;overflow:hidden;background:#1450734d;box-shadow:inset 0 2px 3px #0a325040,0 1px #ffffff59}.meter .fill{height:100%;transform-origin:left center;border-radius:99px;transition:background .4s}#stamina .fill{background:linear-gradient(180deg,#ffe58a,#ffc23d)}#food .fill{background:linear-gradient(180deg,#ffb48a,#ff7f4d)}#stamina.active svg{stroke:#e89a00;animation:bob .45s ease-in-out infinite alternate}#stamina.tired .fill{background:linear-gradient(180deg,#c9d6de,#9fb2bf)}#stamina.tired svg{stroke:#8aa0ae}#food.hungry svg{stroke:#e8546b;animation:wobble .9s ease-in-out infinite}@keyframes bob{to{transform:translateY(-2px)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}#tip{position:absolute;top:24vh;left:50%;transform:translate(-50%,6px);max-width:min(560px,86vw);text-align:center;font-size:18px;padding:.45em 1.1em;border-radius:999px;background:#145a824d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .8s ease,transform .8s ease;text-shadow:0 2px 6px rgba(10,60,90,.4)}#tip.show{opacity:1;transform:translate(-50%)}#pops{position:absolute;left:50%;top:46%}.pop{position:absolute;transform:translate(-50%);white-space:nowrap;font-size:26px;font-weight:600;color:#fff;text-shadow:0 3px 0 #ff8a3d,0 6px 16px rgba(10,60,90,.5);animation:rise 1.7s ease-out forwards}.pop.golden{font-size:32px;text-shadow:0 3px 0 #e8a800,0 0 18px rgba(255,220,90,.9)}@keyframes rise{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.08)}to{opacity:0;transform:translate(-50%,-90px) scale(1)}}#speed{align-self:flex-end;display:flex;align-items:baseline;gap:8px;padding:2px 12px 3px;border-radius:999px;background:#145a8247;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 2px 6px rgba(10,60,90,.4);transition:background .4s,transform .2s}#speed-val{font-size:22px;font-weight:600}#combo-val{font-size:13px;opacity:.85}#speed.hot{background:#46aa3c73}#speed.hot #speed-val{color:#e9ffb0}#speed.bump{animation:speedbump .35s ease-out}#speed.lost{animation:speedlost .5s ease-out;background:#e8546b80}@keyframes speedbump{40%{transform:scale(1.18)}}@keyframes speedlost{20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}}.pop.frog{text-shadow:0 3px 0 #3f9a2e,0 6px 16px rgba(10,60,90,.5)}.pop.bonk{color:#ffe3e8;text-shadow:0 3px 0 #e8546b,0 6px 16px rgba(10,60,90,.5)}#ride{align-self:flex-end;display:flex;align-items:center;gap:7px;padding:2px 12px 3px;border-radius:999px;background:#145a8247;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:14px;letter-spacing:.04em;text-shadow:0 2px 6px rgba(10,60,90,.4);transition:transform .2s}#ride-icon{font-size:17px}#ride.bump{animation:speedbump .4s ease-out}.pop.swap{text-shadow:0 3px 0 #2fb3d6,0 6px 16px rgba(10,60,90,.5)}