:root{--aqua:#12b5cb;--aqua-dark:#0a7f93;--deep:#0b3050;--coral:#ff5a5f;--coral-dark:#d63a44;--sun:#ffd23f;--sun-dark:#e0a800;--grape:#8e5cf7;--ink:#0f2438;--card:#fffffff0;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;font-family:var(--font);color:var(--ink);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;background:#7fd3f0;margin:0;padding:0;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}canvas#game{touch-action:none;outline:none;width:100%;height:100%;display:block;position:fixed;top:0;bottom:0;left:0;right:0}#ui{pointer-events:none;z-index:2;position:fixed;top:0;bottom:0;left:0;right:0}#ui>*{pointer-events:auto}.hidden{display:none!important}button{cursor:pointer;touch-action:manipulation;font-family:inherit}#boot{z-index:50;color:#fff;font:900 28px var(--font);letter-spacing:1px;text-shadow:0 3px #0000002e;background:linear-gradient(#2a8ff0,#7fd3f0 60%,#bfe9ff);place-items:center;transition:opacity .4s;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#boot .drop{background:#fff;border-radius:50% 50% 50% 0;width:46px;height:46px;margin:0 auto 14px;animation:1s ease-in-out infinite alternate bob;transform:rotate(-45deg)}@keyframes bob{to{transform:rotate(-45deg)translate(6px,-6px)}}.btn{pointer-events:auto;font:800 17px var(--font);color:var(--ink);background:#fff;border:0;border-radius:16px;min-height:48px;padding:12px 18px;transition:transform 80ms,box-shadow 80ms;box-shadow:0 4px #b8cbd6,0 6px 14px #0000001f}.btn:active{transform:translateY(3px);box-shadow:0 1px #b8cbd6,0 2px 6px #0000001f}.btn.primary{background:linear-gradient(180deg, #ff7a6b, var(--coral));color:#fff;box-shadow:0 5px 0 var(--coral-dark), 0 8px 18px #d63a4459;text-shadow:0 2px #00000026}.btn.primary:active{box-shadow:0 2px 0 var(--coral-dark)}.btn.sun{background:linear-gradient(180deg, #ffe16b, var(--sun));box-shadow:0 5px 0 var(--sun-dark), 0 8px 18px #e0a8004d}.btn.ghost{box-shadow:none;background:#ffffff8c;min-height:42px;font-weight:700}.btn.big{letter-spacing:.5px;width:100%;padding:16px 20px;font-size:24px}.btn.update{background:var(--grape);color:#fff;width:100%;margin-top:10px;box-shadow:0 4px #6a3fd0}.icon-btn{pointer-events:auto;width:46px;height:46px;color:var(--ink);font:900 18px var(--font);background:#ffffffe6;border:0;border-radius:14px;place-items:center;display:grid;box-shadow:0 3px #0000002e}.icon-btn:active{transform:translateY(2px)}.screen{padding:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));z-index:10;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.screen.dim{-webkit-backdrop-filter:blur(2px);background:#08284059}.card{overscroll-behavior:contain;touch-action:pan-y;background:var(--card);border-radius:26px;width:min(440px,100%);max-height:100%;padding:20px;animation:.25s ease-out pop;overflow-y:auto;box-shadow:0 16px 40px #0028464d,inset 0 0 0 3px #fffc}@keyframes pop{0%{opacity:0;transform:scale(.94)}}.card h2{text-align:center;margin:0 0 12px;font-size:26px;font-weight:900}.stack{flex-direction:column;gap:12px;display:flex}.row{gap:10px;display:flex}.row>*{flex:1}#screen-menu{justify-content:center;align-items:flex-end}#screen-menu .card{background:#ffffffe0}.logo{text-align:center;letter-spacing:-1px;color:var(--aqua);text-shadow:0 3px 0 var(--aqua-dark), 0 6px 14px #0a7f934d;margin:0 0 2px;font-size:44px;font-weight:900;line-height:1}.logo span{color:var(--coral);text-shadow:0 3px 0 var(--coral-dark), 0 6px 14px #d63a444d;margin-left:6px}.tagline{text-align:center;color:#3d5a70;margin:6px 0 14px;font-weight:700}.bests{color:#3d5a70;flex-wrap:wrap;justify-content:center;gap:14px;font-size:14px;font-weight:800;display:flex}.bests b{color:var(--ink)}.switch-row{cursor:pointer;background:#eef7fb;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:10px 14px;font-weight:800;display:flex}.switch-row input{opacity:0;pointer-events:none;position:absolute}.switch{background:#c3d3dc;border-radius:20px;flex:none;width:52px;height:30px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.switch-row input:checked+.switch{background:var(--aqua)}.switch-row input:checked+.switch:after{transform:translate(22px)}.switch-row input:focus-visible+.switch{outline:3px solid var(--grape)}.hint{color:#5b7384;margin:-4px 4px 0;font-size:13px;font-weight:600}.seg{background:#eef7fb;border-radius:14px;gap:4px;padding:4px;display:flex}.seg button{font:800 14px var(--font);color:#3d5a70;background:0 0;border:0;border-radius:10px;flex:1;min-height:40px;padding:9px 4px}.seg button.on{color:var(--ink);background:#fff;box-shadow:0 2px 6px #0000001f}.field-label{text-transform:uppercase;letter-spacing:.8px;color:#5b7384;margin:6px 4px -4px;font-size:13px;font-weight:900}input[type=range]{width:100%;accent-color:var(--aqua);touch-action:pan-x;height:30px}.slider-row{background:#eef7fb;border-radius:14px;align-items:center;gap:12px;padding:6px 14px;font-weight:800;display:flex}.slider-row output{text-align:right;min-width:44px}#screen-custom{align-items:flex-end}#screen-custom .card{background:#ffffffeb;max-height:54%;padding:14px 16px}#screen-custom .card h2{margin-bottom:4px;font-size:20px}#screen-custom .card{overflow:hidden}#custom-body{touch-action:pan-y;overscroll-behavior:contain;flex:1;min-height:0;padding:2px;overflow-y:auto}#screen-custom .stack{gap:8px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:3px solid #fff;border-radius:50%;width:40px;height:40px;padding:0;position:relative;box-shadow:0 0 0 2px #c3d3dc}.swatch.on{box-shadow:0 0 0 3px var(--ink)}.swatch.locked{filter:grayscale(.7)brightness(.8)}.swatch.locked:after,.chip.locked:after{content:"🔒";font-size:16px;position:absolute;bottom:-6px;right:-6px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{font:800 14px var(--font);color:var(--ink);background:#eef7fb;border:0;border-radius:12px;min-height:42px;padding:10px 12px;position:relative}.chip.on{background:var(--aqua);color:#fff}.chip.locked{opacity:.6}.lock-note{min-height:18px;color:var(--coral-dark);text-align:center;font-size:13px;font-weight:700}.help-list{flex-direction:column;gap:10px;margin:0;padding:0;font-weight:650;list-style:none;display:flex}.help-list li{background:#eef7fb;border-radius:14px;align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.help-list .ico{font-size:22px;line-height:1.1}kbd{font:800 12px var(--font);background:#fff;border-radius:6px;padding:1px 6px;box-shadow:0 2px #b8cbd6}.result-title{text-align:center;margin:0;font-size:40px;font-weight:900;line-height:1.05}.result-title.win{color:var(--sun-dark);text-shadow:0 3px #b07f00}.result-title.lose{color:var(--coral)}.result-sub{text-align:center;color:#3d5a70;margin:6px 0 10px;font-weight:800}.badges{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:8px;display:flex}.badge{background:var(--sun);border-radius:20px;padding:5px 10px;font-size:13px;font-weight:900}.badge.unlock{background:var(--grape);color:#fff}.results-card{overflow:hidden}.standings-wrap{overscroll-behavior:contain;touch-action:pan-y;flex:1;min-height:90px;overflow-y:auto}.standings{border-collapse:collapse;width:100%;font-size:15px;font-weight:750}.standings td{border-bottom:1px solid #e3eef3;padding:6px}.standings td:first-child{text-align:center;width:34px;font-weight:900}.standings td:last-child{text-align:right;font-variant-numeric:tabular-nums}.standings tr.me td{background:#fff5cc}.standings .dot{vertical-align:-1px;border-radius:50%;width:12px;height:12px;margin-right:6px;display:inline-block}.standings .dnf{color:var(--coral)}#hud{pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}#hud>*{pointer-events:none}.hud-top{top:calc(8px + var(--safe-t));left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));align-items:flex-start;gap:10px;display:flex;position:absolute}.hud-top #btn-pause{pointer-events:auto}.place-card{background:#ffffffeb;border-radius:18px;flex:none;justify-content:center;align-items:baseline;min-width:86px;padding:4px 12px 6px;font-weight:900;line-height:1;display:flex;box-shadow:0 3px #00000024}#hud-place{color:var(--coral);font-size:40px}#hud-place-suffix{color:var(--coral);margin-left:1px;font-size:16px}.place-card .of{color:#6b8494;margin-left:4px;font-size:18px}.place-card.first #hud-place,.place-card.first #hud-place-suffix{color:var(--sun-dark)}.hud-center{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.progress-track{background:#ffffff8c;border-radius:10px;height:14px;margin:6px 10px 0;position:relative;box-shadow:inset 0 0 0 2px #ffffffd9}#progress-fill{background:linear-gradient(90deg, var(--aqua), #52e0f0);border-radius:10px;width:0;position:absolute;top:0;bottom:0;left:0}.progress-track:after{content:"🏁";font-size:18px;position:absolute;top:-8px;right:-12px}#progress-dots{position:absolute;top:0;bottom:0;left:0;right:0}.pdot{will-change:transform;border:1.5px solid #fff;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:0}.pdot.me{width:18px;height:18px;box-shadow:0 0 0 2px var(--ink);z-index:2;border:3px solid #fff;margin:-9px 0 0 -9px}.pdot.out{opacity:.35}.hud-stats{font-variant-numeric:tabular-nums;justify-content:center;gap:8px;font-weight:900;display:flex}.hud-stats span{background:#ffffffe0;border-radius:12px;padding:4px 10px;font-size:16px;box-shadow:0 2px #0000001f}#mini-board{top:calc(66px + var(--safe-t));left:calc(10px + var(--safe-l));background:#ffffffc7;border-radius:14px;min-width:140px;margin:0;padding:6px 8px;font-size:13px;font-weight:800;list-style:none;position:absolute}#mini-board li{white-space:nowrap;align-items:center;gap:6px;padding:2px 0;display:flex}#mini-board li.me{color:var(--coral-dark)}#mini-board .n{text-align:right;color:#6b8494;width:18px}#mini-board .dot{border-radius:50%;width:10px;height:10px}#toast{text-align:center;color:#fff;text-shadow:0 3px #00000040,0 0 18px #003c5a59;opacity:0;pointer-events:none;font-size:34px;font-weight:900;position:absolute;top:28%;left:0;right:0}#toast.show{animation:1.3s ease-out forwards toast}#toast.gold{color:var(--sun)}#toast.purple{color:#d9c4ff}#toast.red{color:#ffb1b3}@keyframes toast{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.1)}25%{transform:scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-20px)}}#fps{bottom:calc(6px + var(--safe-b));color:#fff;text-shadow:0 1px 2px #000;font:700 12px ui-monospace,monospace;position:absolute;left:50%;transform:translate(-50%)}#countdown{pointer-events:none;z-index:5;place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#countdown span{color:#fff;text-shadow:0 8px 0 var(--coral), 0 14px 30px #0000004d;font-size:min(34vw,180px);font-weight:900}#countdown span.go{color:var(--sun);text-shadow:0 8px 0 var(--sun-dark), 0 14px 30px #0000004d}#countdown span.anim{animation:.9s ease-out forwards count}@keyframes count{0%{opacity:0;transform:scale(2.2)}20%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(.8)}}#controls{pointer-events:none;z-index:3;position:fixed;top:0;bottom:0;left:0;right:0}#joy-zone{pointer-events:auto;touch-action:none;width:55%;height:48%;position:absolute;bottom:0;left:0}#joy-base{left:calc(92px + var(--safe-l));top:calc(100% - 100px - var(--safe-b));opacity:.8;background:radial-gradient(circle,#ffffff38 0 55%,#fff6 56% 100%);border-radius:50%;width:128px;height:128px;margin:-64px 0 0 -64px;position:absolute;transform:translate(0);box-shadow:inset 0 0 0 3px #ffffffbf,0 4px 18px #00284633}#joy-base.active{opacity:1}#joy-base:before,#joy-base:after{content:"◀";color:#ffffffe6;font-size:16px;position:absolute;top:50%;left:8px;transform:translateY(-50%)}#joy-base:after{content:"▶";left:auto;right:8px}#joy-knob{background:radial-gradient(circle at 35% 30%,#fff,#d7eef7);border-radius:50%;width:60px;height:60px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px #003c5a40,0 6px 14px #0003}#btn-jump{right:calc(26px + var(--safe-r));bottom:calc(34px + var(--safe-b));pointer-events:auto;touch-action:none;width:108px;height:108px;font:900 20px var(--font);letter-spacing:.5px;color:#fff;background:radial-gradient(circle at 40% 30%, #ffe16b, var(--sun) 60%, #f2b800);box-shadow:0 6px 0 var(--sun-dark), 0 10px 24px #00000040, inset 0 0 0 4px #fff9;text-shadow:0 2px #96640080;border:0;border-radius:50%;position:absolute}#btn-jump:before{content:"";border-radius:50%;position:absolute;top:-22px;bottom:-22px;left:-22px;right:-22px}#btn-jump.pressed{box-shadow:0 2px 0 var(--sun-dark), 0 4px 10px #00000040, inset 0 0 0 4px #fff9;transform:translateY(4px)scale(.97)}#btn-jump.hint{animation:.5s ease-in-out infinite alternate pulse}@keyframes pulse{to{box-shadow:0 6px 0 var(--sun-dark), 0 0 0 14px #ffd23f73, inset 0 0 0 4px #fff9}}.desktop #controls{display:none}.lefty #joy-zone{left:auto;right:0}.lefty #joy-base{left:calc(100% - 92px - var(--safe-r))}.lefty #btn-jump{right:auto;left:calc(26px + var(--safe-l))}@media (orientation:portrait){#mini-board{display:none}.hud-top{flex-wrap:wrap}.hud-center{flex-basis:100%;order:3}.place-card{order:1}.hud-top #btn-pause{order:2;margin-left:auto}.hud-stats span{padding:4px 8px;font-size:15px}#toast{font-size:28px}}@media (orientation:landscape){#joy-zone{width:42%;height:72%}#joy-base{left:calc(110px + var(--safe-l));top:calc(100% - 110px - var(--safe-b))}.lefty #joy-base{left:calc(100% - 110px - var(--safe-r))}#btn-jump{right:calc(40px + var(--safe-r));bottom:calc(40px + var(--safe-b));width:118px;height:118px}.lefty #btn-jump{left:calc(40px + var(--safe-l))}#screen-menu{justify-content:flex-end;align-items:center}#screen-menu .card{width:min(400px,52%)}#screen-custom{justify-content:flex-end;align-items:center}#screen-custom .card{width:min(400px,50%);max-height:100%}}@media (orientation:landscape) and (max-height:500px){.card{border-radius:20px;padding:14px 16px}.logo{font-size:34px}.tagline{margin:4px 0 8px;font-size:14px}.btn.big{padding:12px;font-size:20px}.stack{gap:8px}#hud-place{font-size:32px}#btn-jump{width:100px;height:100px}.result-title{font-size:30px}}@media (max-width:360px){.hud-stats span{padding:3px 6px;font-size:13px}.logo{font-size:38px}}@media (prefers-reduced-motion:reduce){.card,#toast.show,#countdown span.anim,#btn-jump.hint{animation-duration:10ms}}