:root{--asphalt: #5b5370;--asphalt2: #463f5a;--chalk: #fdfbf3;--pink: #ff9cc0;--lemon: #ffe37a;--mint: #98f0cf;--sky: #9fd6ff;--lilac: #cdb3ff;--rope: #ff4f6d;--display: "Chalkduster", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;--text: "Euphemia UCAS", "Optima", "Candara", "Segoe UI", system-ui, sans-serif;--wobble: 22px 18px 24px 16px / 16px 24px 18px 22px}html,body{background:var(--asphalt2);color:var(--chalk);font-family:var(--text)}.stage{background:var(--asphalt)}.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none}.chip{background:#463f5ad1;border:2px dashed rgba(253,251,243,.75);border-radius:var(--wobble)}.btn{pointer-events:auto;width:46px;height:46px;display:grid;place-items:center;color:var(--chalk);text-decoration:none;transition:transform .12s ease}.btn:active{transform:scale(.9) rotate(-4deg)}.btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.mute .spk{fill:currentColor;stroke:none}.mute .off,.mute[aria-pressed=true] .wav{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true]{color:#fdfbf380}.board{display:flex;flex-direction:column;align-items:center}.score{min-width:3.4ch;padding:6px 16px 4px;text-align:center;font:30px/1 var(--display);color:var(--chalk);background:#463f5ad1;border:2px dashed rgba(253,251,243,.7);border-radius:var(--wobble);text-shadow:0 0 6px rgba(255,255,255,.25);font-variant-numeric:tabular-nums;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}.score.pop{transform:scale(1.12) rotate(-2deg)}.meta{display:flex;gap:6px;margin-top:5px;align-items:center}.mult{padding:3px 10px 2px;font:700 14px/1.2 var(--text);background:#463f5ad1;color:var(--lemon);border-radius:999px;border:1.5px solid rgba(255,227,122,.6);transition:transform .3s cubic-bezier(.2,1.6,.4,1),background .3s ease}.mult.hot{background:var(--pink);color:#4a2140;border-color:var(--chalk)}.mult.pop{transform:scale(1.3) rotate(4deg)}.hearts{display:inline-flex;gap:3px;padding:3px 7px;background:#463f5ad1;border-radius:999px}.hearts svg{width:15px;height:15px;fill:var(--rope);stroke:var(--chalk);stroke-width:1.2;transition:opacity .3s ease,transform .3s ease}.hearts svg.gone{opacity:.25;transform:scale(.75) rotate(-20deg);fill:none}.hearts.shake{animation:shake .5s ease}@keyframes shake{20%{transform:translate(-4px) rotate(-3deg)}40%{transform:translate(4px) rotate(3deg)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.title,.card,.paused,.calib,.gallery{position:absolute;z-index:2;pointer-events:none;text-align:center}.pill,.gallery,.calib{pointer-events:auto}.slate{position:relative;width:min(318px,calc(100vw - 36px));margin:0 auto;padding:20px 18px 18px;background:#463f5ae6;border:3px dashed rgba(253,251,243,.82);border-radius:28px 22px 30px 20px/22px 30px 20px 28px;box-shadow:0 18px 50px #1e0f3273,inset 0 0 40px #ffffff0d}.slate:after{content:"";position:absolute;inset:7px;border:1.5px solid rgba(253,251,243,.18);border-radius:inherit;pointer-events:none}.kicker{font:18px/1 var(--display);color:var(--lemon);letter-spacing:.04em}.title{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(64px + var(--safe-t)) 18px calc(22px + var(--safe-b))}.title .slate{padding:14px 16px}.row.foot{margin:0}.title.fade{animation:fadeOut .45s ease forwards}@keyframes fadeOut{to{opacity:0;transform:translateY(-12px) rotate(-2deg)}}.title h1{margin:0;font:64px/.95 var(--display);color:var(--chalk);text-shadow:0 0 10px rgba(255,255,255,.25)}.title h1 span{display:inline-block;animation:jumpL 1.4s ease-in-out infinite}.title h1 span:nth-child(1){color:var(--pink)}.title h1 span:nth-child(2){color:var(--lemon);animation-delay:.12s}.title h1 span:nth-child(3){color:var(--mint);animation-delay:.24s}.title h1 span:nth-child(4){color:var(--sky);animation-delay:.36s}@keyframes jumpL{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px) rotate(-4deg)}}.hop{width:120px;height:62px;margin:4px auto 0;display:block;overflow:visible}.hop .rope{fill:none;stroke:var(--rope);stroke-width:3.5;stroke-linecap:round;transform-origin:60px 22px;animation:swing 1.2s linear infinite}@keyframes swing{0%{transform:scaleY(1)}25%{transform:scaleY(0)}50%{transform:scaleY(-1)}75%{transform:scaleY(0)}to{transform:scaleY(1)}}.hop .kid{fill:var(--lemon);stroke:var(--chalk);stroke-width:2.6;stroke-linecap:round;animation:hopK 1.2s ease-in-out infinite}.hop .kid circle{stroke:none}@keyframes hopK{0%,70%,to{transform:translateY(-14px)}85%{transform:translateY(0)}92%{transform:translateY(0)}}.hop .tap circle{fill:var(--chalk);opacity:.8}.hop .tap .ring{fill:none;stroke:var(--chalk);stroke-width:1.5;transform-origin:100px 58px;animation:tapR 1.2s ease-out infinite}@keyframes tapR{0%,60%{transform:scale(.6);opacity:0}62%{opacity:1}to{transform:scale(2.6);opacity:0}}.sub{margin:4px 0 0;font:600 14px/1.3 var(--text);color:#efe6f7}.cta{margin-top:12px;font:20px/1.2 var(--display);color:var(--mint);animation:breathe 1.4s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}.row{display:flex;gap:10px;justify-content:center;margin-top:14px}.pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;font:600 14px/1 var(--text);color:var(--chalk);background:#fdfbf314;border:2px dashed rgba(253,251,243,.7);border-radius:var(--wobble);transition:transform .12s ease,background .2s ease}.pill:active{transform:scale(.94) rotate(2deg);background:#fdfbf32e}.pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.best{margin-top:10px;font:16px/1 var(--display);color:var(--pink)}.calib{inset:0;display:grid;place-items:center;padding:0 18px}.calib .ring{--p: 0;position:relative;width:150px;height:150px;margin:16px auto 8px}.calib .ring i{position:absolute;inset:0;border:3px dashed var(--chalk);border-radius:50%;transform:scale(calc(.55 + var(--p) * .45));opacity:calc(.3 + var(--p) * .7)}.calib .ring b{position:absolute;inset:40px;border-radius:50%;background:var(--rope);box-shadow:0 0 0 6px #ff4f6d40;transition:transform .12s ease}.calib .ring.hit b{transform:scale(1.25);background:var(--lemon)}.msg{margin:6px 0 10px;font:18px/1.3 var(--display);color:var(--chalk)}.dots{display:flex;gap:7px;justify-content:center;margin-bottom:14px}.dots i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(253,251,243,.6)}.dots i.on{background:var(--mint);border-color:var(--mint)}.dots i.off{background:var(--lilac);border-color:var(--lilac)}.card{left:50%;top:50%;transform:translate(-50%,-46%) scale(.94) rotate(-2deg);opacity:0;transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.4,.4,1)}.card.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}.big{font:64px/1 var(--display);color:var(--chalk);margin-top:6px;text-shadow:0 0 10px rgba(255,255,255,.3)}.newbest{display:inline-block;margin-top:6px;padding:5px 14px 4px;font:16px/1 var(--display);color:#4a2140;background:var(--lemon);border-radius:var(--wobble);animation:shine 1.2s ease-in-out infinite}@keyframes shine{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}.split{display:flex;gap:12px;align-items:center;margin:12px 0 10px;text-align:left}.post{width:44%;aspect-ratio:3 / 4;object-fit:cover;border:4px solid var(--chalk);border-radius:4px;transform:rotate(-3deg);box-shadow:0 8px 18px #140a2873;background:var(--asphalt2)}.rows{flex:1}.r{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0 3px;border-bottom:1.5px dashed rgba(253,251,243,.25);font:600 13px/1.2 var(--text);color:#e3d9ee}.r b{font:19px/1 var(--display);color:var(--chalk)}.gallery{inset:0;display:grid;place-items:center;padding:calc(64px + var(--safe-t)) 14px calc(20px + var(--safe-b));background:#281e3ce0;z-index:4}.slate.wide{width:min(360px,calc(100vw - 28px));max-height:100%;display:flex;flex-direction:column;align-items:center}.slate.wide .grid{align-self:stretch}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin:14px 2px;overflow-y:auto;padding:4px}.grid figure{margin:0}.grid figure:nth-child(odd){transform:rotate(-2.5deg)}.grid figure:nth-child(2n){transform:rotate(2deg)}.grid img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border:3px solid var(--chalk);border-radius:3px;display:block;box-shadow:0 6px 12px #140a2866}.grid figcaption{margin-top:4px;font:12px/1.2 var(--display);color:var(--lemon)}.empty{grid-column:1 / -1;font:16px/1.4 var(--display);color:#e3d9ee}.paused{inset:0;display:grid;place-items:center;background:#281e3c99}@media(max-height:700px){.title{padding-top:calc(60px + var(--safe-t))}.title h1{font-size:50px}.hop{height:48px}.title .cta{margin-top:6px}.big{font-size:50px}.slate{padding:14px}}@media(prefers-reduced-motion:reduce){.title h1 span,.hop .rope,.hop .kid,.hop .tap .ring,.cta,.newbest{animation:none;opacity:1}.score,.mult{transition:none}.hearts.shake{animation:none}}.gallery .slate{background:#4a425f}:root{--asphalt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.38'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");--chalk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4.2 0 0 0 -1.0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23c)'/%3E%3C/svg%3E")}.slate,.chip,.score,.hearts,.mult:not(.hot){background-image:var(--asphalt-grain),radial-gradient(130% 90% at 85% -10%,#ffe2b433,#ffe2b400 60%);background-blend-mode:soft-light,normal;background-size:180px 180px,100% 100%}.slate{background-color:#4c4462ed;box-shadow:0 18px 46px #1e0f3280,0 3px #1e0f3259,inset 0 1.5px #fff4de29,inset 0 -14px 30px #140a2352}.title h1,.big,.kicker,.cta,.msg,.best,.r b,.grid figcaption,.empty{-webkit-mask-image:var(--chalk-grain);mask-image:var(--chalk-grain);-webkit-mask-size:140px 140px;mask-size:140px 140px}.title h1{text-shadow:0 0 12px rgba(255,255,255,.3),0 0 2px rgba(255,255,255,.4)}.grid figure{cursor:pointer}.grid figure.pinned img{border-color:var(--lemon)}.grid figure.pinned figcaption:before{content:"★"}.big-post{width:min(240px,62vw);margin:14px auto 6px;transform:rotate(-2deg)}.row.btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}.pill.ad:after{content:"AD";margin-left:2px;padding:1px 4px;border-radius:4px;font:700 9px/1.2 var(--text);letter-spacing:.08em;background:#00000047}
