#stage{z-index:0;width:100vw;height:100dvh;display:block;position:fixed;inset:0}body:after{content:"";z-index:1;pointer-events:none;background:radial-gradient(at 50% 42%,#0000 38%,#040a0e57 100%),linear-gradient(#03080c29,#0000 24% 72%,#03080c38);position:fixed;inset:0}#controls{touch-action:none;z-index:2;position:fixed;inset:0}#landing-progress{opacity:0;pointer-events:none;z-index:4;background:#f3ca781f;height:2px;transition:opacity .12s;position:fixed;bottom:0;left:0;right:0;overflow:hidden}#landing-progress[data-show=yes]{opacity:1}#landing-progress i{transform-origin:0;background:#f3ca78b8;width:100%;height:100%;transition:transform 80ms linear;display:block;transform:scaleX(0)}#hud{top:calc(var(--vo-safe-top) + 8px);left:calc(var(--vo-safe-left) + 8px);right:calc(var(--vo-safe-right) + 8px);letter-spacing:.035em;color:#d6dedc;text-shadow:0 1px 2px #071116,0 0 10px #071116cc;pointer-events:none;z-index:3;align-items:flex-start;gap:10px;font:650 12px/1.3 ui-sans-serif,system-ui,sans-serif;display:flex;position:fixed}#hud #goal{pointer-events:auto;color:#f4e9d8;letter-spacing:.09em;text-transform:uppercase;text-shadow:0 1px 10px #07101580;background:linear-gradient(#182931e6,#0c1a21e6);border:1px solid #b78c4db8;border-radius:999px;padding:6px 12px;font-weight:780;box-shadow:inset 0 1px #fff4d614,0 3px 10px #040a0d47}#best{font-variant-numeric:tabular-nums;text-transform:uppercase;color:#b7c2c0;white-space:nowrap;flex:none;align-self:center}#best[hidden]{display:none}#run-time{color:#aebbb9;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap;flex:none;align-self:center;font-size:12px}#run-score{box-sizing:border-box;color:#f3ca78;font-variant-numeric:tabular-nums;letter-spacing:.07em;text-align:center;text-transform:uppercase;white-space:nowrap;transform-origin:50%;background:#081419db;border:1px solid #dfb66eb8;border-radius:999px;flex:none;align-self:center;min-width:76px;padding:6px 11px;font-size:14px;font-weight:850}#run-score.score-bump{animation:.34s cubic-bezier(.2,1.6,.35,1) both score-bump}#run-score.score-drop{animation:.42s ease-out both score-drop}@keyframes score-bump{0%{color:#fff5c7;transform:scale(.88)}48%{transform:scale(1.2);box-shadow:0 0 22px #ffcd5eb8}to{transform:scale(1)}}@keyframes score-drop{0%,to{transform:translate(0)}25%{color:#ff7965;transform:translate(-5px)scale(1.08)}55%{color:#ff7965;transform:translate(5px)scale(1.08)}}#prompt{text-align:center;pointer-events:none;letter-spacing:.16em;color:#f2e4cf;text-shadow:0 2px 18px #000000d9;opacity:0;z-index:3;margin:0;font:800 34px/1 ui-sans-serif,system-ui,sans-serif;transition:opacity .18s;position:fixed;top:79%;left:0;right:0}#prompt[data-show=yes]{opacity:.92}#sub-prompt{text-align:center;pointer-events:none;letter-spacing:.08em;color:#9aa8bd;opacity:0;z-index:3;margin:0;font:600 14px/1.3 ui-sans-serif,system-ui,sans-serif;transition:opacity .18s;position:fixed;top:calc(79% + 44px);left:0;right:0}#sub-prompt[data-show=yes]{opacity:.9}#prompt[data-phase=landed]{color:#58d68d;top:24%}#sub-prompt[data-phase=landed],#sub-prompt[data-phase=missed]{top:calc(24% + 46px)}#sub-prompt[data-show=yes][data-phase=missed]{letter-spacing:.14em;text-transform:uppercase;color:#f4e9d8;text-shadow:0 2px 16px #000000e6;font-size:24px;font-weight:800;line-height:1;animation:.68s ease-in-out infinite alternate retry-pulse}@keyframes retry-pulse{0%{opacity:.7;transform:scale(.94)}to{opacity:1;transform:scale(1.12)}}#score{text-align:center;pointer-events:none;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:#dfb66e;text-shadow:0 2px 14px #000c;opacity:0;z-index:3;margin:0;font:700 20px/1 ui-sans-serif,system-ui,sans-serif;transition:opacity .18s;position:fixed;top:calc(24% + 80px);left:0;right:0}#score[data-show=yes]{opacity:.95}#score-pop{pointer-events:none;color:#ffd778;letter-spacing:.1em;text-align:center;text-transform:uppercase;text-shadow:0 3px #5b330cb3,0 0 24px #ffc0408c,0 5px 20px #000c;opacity:0;z-index:4;margin:0;font:900 clamp(28px,4.5vw,46px)/1 ui-sans-serif,system-ui,sans-serif;position:fixed;top:54%;left:0;right:0}#score-pop.play{animation:score-pop var(--score-pop-duration,1.9s) cubic-bezier(.16, .8, .25, 1) both}#score-pop[data-tone=lost]{color:#ff7965;text-shadow:0 3px #5f1711bf,0 0 24px #e25a4280,0 5px 20px #000c}@keyframes score-pop{0%{opacity:0;transform:translateY(18px)scale(.62)}20%{opacity:1;transform:translateY(0)scale(1.18)}56%{opacity:1;transform:translateY(-8px)scale(1)}to{opacity:0;transform:translateY(-42px)scale(.92)}}@keyframes score-pop-fade{0%,to{opacity:0}12%,72%{opacity:1}}#menu{z-index:5;opacity:0;pointer-events:none;background:0 0;transition:opacity .16s;position:fixed;inset:0;overflow:hidden}#menu[data-open=yes]{opacity:1;pointer-events:auto}body[data-menu=yes] #controls,body[data-menu=yes] #hud,body[data-menu=yes] #landing-progress,body[data-menu=yes] #prompt,body[data-menu=yes] #sub-prompt,body[data-menu=yes] #score,body[data-menu=yes] #score-pop{visibility:hidden}.menu-panel[hidden]{display:none}.menu-panel{z-index:3;box-sizing:border-box;width:100%;height:100%;padding:calc(var(--vo-safe-top) + 10px) calc(var(--vo-safe-right) + 16px) calc(var(--vo-safe-bottom) + 10px) calc(var(--vo-safe-left) + 16px);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}#menu-title{letter-spacing:.22em;text-transform:uppercase;color:#f4e9d8;text-shadow:0 2px 18px #000000e6;margin:0;font:850 30px/1 ui-sans-serif,system-ui,sans-serif}#menu-courses,#menu-scores{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;display:grid}#menu-play{color:#f4e9d8;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(#2b444e,#16303a);border:1px solid #b78c4db8;border-radius:999px;margin-top:10px;padding:11px 46px;font:780 14px/1 ui-sans-serif,system-ui,sans-serif;box-shadow:inset 0 1px #fff4d61a,0 3px 10px #040a0d59}#menu-open-courses,#menu-open-scores,#menu-exit,.menu-back{color:#b7c2c0;letter-spacing:.14em;text-transform:uppercase;background:#081419d1;border:1px solid #697f8499;border-radius:999px;padding:8px 34px;font:650 12px/1 ui-sans-serif,system-ui,sans-serif}#menu-play:active,#menu-open-courses:active,#menu-open-scores:active,#menu-exit:active,.menu-back:active{transform:translateY(1px)}.menu-heading{letter-spacing:.2em;text-transform:uppercase;color:#f4e9d8;margin:0 0 2px;font:780 15px/1 ui-sans-serif,system-ui,sans-serif}#menu-total{letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:#8fa0a4;margin:0;font:600 11px/1 ui-sans-serif,system-ui,sans-serif}#menu-total[hidden]{display:none}.course-row{color:#d6dedc;letter-spacing:.07em;text-transform:uppercase;background:#081419cc;border:1px solid #0000;border-radius:999px;justify-content:space-between;align-items:center;gap:22px;padding:9px 16px;font:650 13px/1.3 ui-sans-serif,system-ui,sans-serif;display:flex}.course-row:active{background:#ffebcd14}.course-row[data-active=yes]{color:#f4e9d8;border-color:#b78c4d99}.course-best{color:#dfb66e;font-variant-numeric:tabular-nums;letter-spacing:.05em}#hud button{pointer-events:auto;color:#e3e5df;font:inherit;white-space:nowrap;background:linear-gradient(#22353deb,#13232aeb);border:1px solid #697f84b3;border-radius:999px;flex:none;padding:7px 12px;transition:border-color 90ms,transform 70ms,background 90ms;box-shadow:inset 0 1px #ffffff14,0 2px 8px #02080b33}#hud button:active{background:linear-gradient(#263c44,#182d35);border-color:#c29754c7;transform:translateY(1px)}#hud #reset{margin-left:auto}#hud #reset,#hud #quit{border-radius:50%;place-content:center;width:34px;height:34px;padding:0;font-size:15px;line-height:1;display:grid}.touch-ui{pointer-events:none;position:absolute;inset:0}.joystick-ui,.action-ui{bottom:calc(var(--vo-safe-bottom) + 18px);isolation:isolate;opacity:.9;border-radius:50%;width:120px;height:120px;transition:opacity .1s;position:absolute}.action-ui{filter:drop-shadow(0 8px 12px #02080b6b)}.joystick-ui{left:calc(var(--vo-safe-left) + 24px)}.joystick-base{background:radial-gradient(circle at 46% 34%,#314750fa,#0d1d26fc 69%) padding-box padding-box,conic-gradient(from 210deg,#74532d,#cda15c 20%,#8a6336 42%,#dfb66e 67%,#8d6739 84%,#74532d) border-box;border:2px solid #0000;border-radius:50%;transition:box-shadow .12s;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px 2px #fff0d21f,inset 0 -10px 20px #02090d66,0 0 0 2px #051015b8,0 0 0 4px #ab834829}.joystick-base:before{content:"";z-index:0;border:1px solid #dbb57338;border-radius:50%;position:absolute;inset:6px;box-shadow:inset 0 1px #fff5dc0f}.joystick-base:after{content:"";z-index:0;background:linear-gradient(#030d1252,#3d51561f 48%,#030c114d);border:1px solid #a3b9bb1f;border-radius:999px;height:30px;position:absolute;top:50%;left:16px;right:16px;transform:translateY(-50%);box-shadow:inset 0 2px 4px #00050857,0 1px #dfece50d}.joystick-puck{--stick-x:0px;--stick-scale:1;z-index:2;width:54px;height:54px;transform:translateX(calc(-50% + var(--stick-x))) translateY(-50%) scale(var(--stick-scale));background:radial-gradient(circle at 37% 28%,#fffef7 0 12%,#0000 35%),radial-gradient(circle at 43% 38%,#f5eee2,#ded5c8 72%,#aaa398 100%);border:1px solid #fffdefdb;border-radius:50%;transition:transform 45ms linear,box-shadow 90ms;position:absolute;top:50%;left:50%;box-shadow:inset 0 -6px 9px #5b554c2e,inset 0 2px 2px #ffffffad,0 4px 9px #01080ba3,0 0 0 2px #040d113d}.joystick-puck:after{content:"";background:linear-gradient(#ffffff57,#0000);border-radius:50%;height:16px;position:absolute;top:6px;left:9px;right:9px}.joystick-arrow{z-index:2;opacity:.76;filter:drop-shadow(0 1px #00000059);border-top:8px solid #0000;border-bottom:8px solid #0000;width:0;height:0;margin-top:-8px;transition:opacity .1s;position:absolute;top:50%}.joystick-arrow--left{border-right:10px solid #e9e4d7;left:16px}.joystick-arrow--right{border-left:10px solid #e9e4d7;right:16px}.joystick-ui[data-active=yes]{opacity:1}.joystick-ui[data-active=yes] .joystick-base{box-shadow:inset 0 1px 2px #fff0d226,inset 0 -10px 20px #02090d66,0 0 0 2px #051015c7,0 0 0 4px #cd9f5640}.joystick-ui[data-active=yes] .joystick-puck{--stick-scale:1.035;box-shadow:inset 0 -6px 9px #5b554c2e,inset 0 2px 2px #ffffffb8,0 5px 11px #01080bb3,0 0 0 2px #d1a86538}.joystick-ui[data-active=yes] .joystick-arrow{opacity:.96}.action-ui{right:calc(var(--vo-safe-right) + 24px);background:radial-gradient(circle at 42% 30%,#ee8b75,#d06453 69%,#b64d40 100%) padding-box padding-box,conic-gradient(from 200deg,#76532d,#cba05d 23%,#8b6235 44%,#dfb46b 67%,#8b6337 86%,#76532d) border-box;border:2px solid #0000;transition:transform 70ms,filter 70ms,opacity 70ms,box-shadow 70ms;overflow:hidden;box-shadow:inset 0 2px 2px #ffe5cd66,inset 0 -10px 18px #5e1e193d,0 0 0 2px #391b18a3,0 0 0 4px #b589492e}.action-ui:before{content:"";border:2px solid #612b256b;border-radius:50%;position:absolute;inset:8px;box-shadow:inset 0 1px #ffebd740,0 1px #ffc0a814}.action-ui:after{content:"";background:radial-gradient(at 50% 0,#ffe7d34a,#0000 72%);border-radius:50%;height:31px;position:absolute;top:9px;left:21px;right:21px}.action-glyph{z-index:2;width:52px;transition:transform 70ms,opacity 70ms;position:absolute;top:50%;left:50%;transform:translate(-50%,-48%)}.action-glyph svg{filter:drop-shadow(0 1px 1px #4d221c4d);width:52px;height:42px;display:block}.action-glyph path{fill:none;stroke:#f4e7d2;stroke-width:8px;stroke-linecap:round;stroke-linejoin:round}.action-ui[data-pressed=yes]{opacity:1;filter:brightness(.87)drop-shadow(0 3px 5px #02080b57);transform:translateY(2px)scale(.93);box-shadow:inset 0 3px 7px #4f19154d,inset 0 -3px 8px #ffad8f14,0 0 0 2px #391b18b8,0 0 0 4px #b5894924}.action-ui[data-pressed=yes] .action-glyph{opacity:.86;transform:translate(-50%,-38%)scale(.96)}#rotate-note{z-index:3;display:none}@media (orientation:portrait) and (pointer:coarse){#controls,#hud,#score,#score-pop,#menu{display:none}#rotate-note{letter-spacing:.09em;text-transform:uppercase;color:#d6dedc;text-shadow:0 1px 10px #07101599;background:linear-gradient(#0e171c 0%,#1b2b31 58%,#2a3b40 100%);place-content:center;justify-items:center;gap:22px;margin:0;font:650 14px/1.4 ui-sans-serif,system-ui,sans-serif;display:grid;position:fixed;inset:0}#rotate-note:before{content:"";background:radial-gradient(circle at 12px,#dfb66ee6 0 3px,#0000 4px),linear-gradient(#182931e6,#0c1a21e6);border:3px solid #cda15c;border-radius:11px;width:92px;height:48px;box-shadow:inset 0 1px #fff4d61f,0 6px 18px #03080b80,0 0 0 4px #ab834824}}
