*{box-sizing:border-box}html{color-scheme:light}body{margin:0;color:#252e48;background:#f6f7fb;font-family:Arial,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #3267ed;outline-offset:4px}.topbar{max-width:1040px;margin:auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;font-weight:900;letter-spacing:-1px;display:flex;gap:4px;align-items:baseline}.brand>span{width:6px;height:6px;border-radius:2px;background:#fb8c70}.back{font-size:12px;color:#69738c;padding:12px}.back>span{margin-left:8px}main{max-width:520px;padding:0 18px;margin:0 auto}.toy{text-align:center;padding-top:9px}.eyebrow{display:flex;justify-content:center;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:2px;color:#707d99;margin:7px 0 15px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#93b3eb}h1{font-size:40px;letter-spacing:-2px;line-height:1.15;margin:0;font-weight:900}.title-dot{color:#7b8ff1}.subtitle{font-size:13px;color:#7b859c;margin:13px 0 21px;letter-spacing:-.2px}.subtitle strong{color:#6578b1;font-weight:700}.controls{display:flex;gap:8px;justify-content:center}.controls button{border:1px solid #dfe5f1;background:#ffffffb0;border-radius:30px;min-height:44px;padding:9px 15px;display:flex;align-items:center;gap:7px;font-size:12px;color:#4d5d7b;cursor:pointer}.controls button[aria-pressed="true"]{background:#eaf0ff;border-color:#d6e1f8;color:#405c9a}.controls button:disabled{color:#858d9d;background:#f0f2f7;cursor:default}.controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hint{font-size:11px;color:#79859b;margin:17px 0 13px}.sheet-wrap{position:relative;margin:auto;padding:12px 12px 28px;border:1px solid #d9e5f3;border-top-color:#fff;border-radius:25px;background:linear-gradient(135deg,#eaf4ffbb,#dce9f7b0 46%,#f1f5ff);box-shadow:0 15px 35px -24px #54749d99,inset 0 0 0 3px #ffffff58;max-width:438px}.sheet{--tint:211;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative;padding:3px;border-radius:18px}.bubble{border:0;aspect-ratio:1;min-width:0;padding:0;position:relative;background:transparent;border-radius:50%;cursor:pointer;touch-action:none}.bubble:before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid hsla(var(--tint),42%,71%,.65);background:radial-gradient(ellipse at 33% 25%,#fff 0%,#ffffffbd 14%,#ffffff08 33%),radial-gradient(ellipse at 62% 73%,hsla(var(--tint),70%,80%,.3) 15%,hsla(var(--tint),63%,91%,.2) 38%,hsla(var(--tint),45%,69%,.33) 78%,#fff 97%),linear-gradient(145deg,hsla(var(--tint),76%,98%,.94),hsla(var(--tint),63%,84%,.68));box-shadow:inset 0 2px 3px #ffffffed,inset 0 -4px 6px hsla(var(--tint),40%,52%,.23),inset -2px -1px 3px #ffffffa1,1px 4px 4px #647fa62b,0 0 0 3px #ffffff27;transform:translateZ(0);transition:filter .1s}.bubble:after{content:"";position:absolute;left:21%;top:15%;width:38%;height:18%;border-radius:50%;transform:rotate(-32deg);background:linear-gradient(#fffffff0,#ffffff05);box-shadow:0 -1px 0 #ffffff80;pointer-events:none}.bubble.popped:before{background:radial-gradient(ellipse at 40% 25%,#c9d9eb44,transparent 55%),conic-gradient(from 20deg,#dce6f05c,#ffffffb0 23deg,#c3d4e777 27deg,#e3edf633 63deg,#f9fcff99 104deg,#d4e0ee99 110deg,#ecf2f744 180deg,#c5d6e966 232deg,#fff8 237deg,#dce6f05c);border-color:#c5d5e877;box-shadow:inset 1px 2px 5px #7392b121,inset 0 -1px 1px #ffffffbd,0 1px 1px #fff8;transform:scale(.88,.79);animation:deflate .19s ease-out}.bubble.popped:after{background:#ffffff66;opacity:.25;transform:translateY(7px) rotate(-22deg) scale(.7);box-shadow:none}.bubble.special:before{border-color:#bcb1e4;background:radial-gradient(ellipse at 35% 30%,#fff,#e7dffd88 48%,#c9bdf266)}.sheet-edge{position:absolute;bottom:10px;left:0;right:0;font-size:7px;letter-spacing:3px;color:#9cadc6;font-weight:700;pointer-events:none}.sheet-wrap.complete{animation:complete .48s ease-out}.sheet-wrap.recoil{animation:recoil .18s ease-out}.status{min-height:18px;font-size:12px;color:#637599;margin:19px 0 8px;letter-spacing:-.2px}.device-note{font-size:10px;color:#929aab;margin:0 0 32px;line-height:1.6}.ad-space{margin:150px 0 25px;border:1px dashed #e0e5ee;border-radius:14px;min-height:272px;text-align:center;padding:12px;font-size:10px;color:#a0a9b9}.ad-space>div{min-height:246px}footer{max-width:484px;margin:0 auto;padding:24px 18px calc(26px + env(safe-area-inset-bottom));border-top:1px solid #e5e8f0;color:#8c96aa;font-size:10px;display:flex;align-items:center;flex-wrap:wrap;gap:20px}footer nav{display:flex;gap:15px;margin-left:auto}footer small{width:100%;font-size:9px}#effects{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}.paused *{animation-play-state:paused!important}@keyframes deflate{0%{transform:scale(.92,.91)}35%{transform:scale(.79,.68)}75%{transform:scale(.9,.83)}100%{transform:scale(.88,.79)}}@keyframes complete{45%{box-shadow:0 0 24px #9fbfff55,inset 0 0 0 3px #fff8;transform:translateY(-2px)}}@keyframes recoil{30%{transform:translateY(2px)}65%{transform:translateY(-1px)}}
@media(min-width:760px){.toy{padding-top:28px}.eyebrow{margin-bottom:18px}h1{font-size:46px}.sheet-wrap{margin-top:17px}.hint{margin-top:20px}.ad-space{min-height:112px}.ad-space>div{min-height:86px}}
@media(max-width:380px){.topbar{padding:14px 18px}main{padding:0 13px}.toy{padding-top:6px}h1{font-size:35px}.subtitle{margin:11px 0 16px}.sheet{gap:7px}.sheet-wrap{padding:10px 9px 25px}.hint{margin-top:13px}.eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Each new sheet has its own material, palette and backing pattern. Hit areas stay fixed. */
.sheet-wrap[data-design="peach"]{background:radial-gradient(circle at 10% 5%,#fff4ec 0,transparent 50%),repeating-linear-gradient(135deg,#ffe4dd55 0 10px,#fff0e722 10px 20px),#f6ddd5;border-color:#eed0c5}
[data-design="peach"] .bubble:not(.popped):before{border-color:#ebb6a6;background:radial-gradient(ellipse at 30% 22%,#fff8ee 2%,#fff5df88 16%,transparent 42%),radial-gradient(ellipse at 66% 75%,hsl(var(--tint),89%,78%),hsl(var(--tint),95%,90%) 72%,#fff6ec);box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 8px #df8e6740,0 4px 5px #bd7f5f26}
[data-design="peach"] .bubble:not(.popped):after{width:24%;height:25%;left:21%;top:15%;background:#fff7edb0;filter:blur(1px)}
.sheet-wrap[data-design="pearl"]{background:radial-gradient(ellipse at 90% 5%,#f6ecff,transparent 60%),repeating-radial-gradient(circle at 0 0,#fff2 0 1px,transparent 2px 18px),#e6dff2;border-color:#d8cbe9}
[data-design="pearl"] .bubble:not(.popped):before{border-color:#c5b4d8;background:radial-gradient(ellipse at 32% 25%,#fff 2%,#f9edffa1 22%,transparent 45%),conic-gradient(from 140deg,#c9b5df,#e6d8f3,#c5cce7,#fff2f2,#dfc9ea,#c9b5df);box-shadow:inset 0 1px 4px #fff,inset 0 -3px 5px #a080c035,0 4px 4px #8875a836}
[data-design="pearl"] .bubble:not(.popped):after{width:18%;height:18%;left:23%;top:20%;background:#fff9;border-radius:50%}
.sheet-wrap[data-design="mint"]{background:repeating-linear-gradient(0deg,#fff0 0 22px,#ffffff48 23px 24px),repeating-linear-gradient(90deg,#fff0 0 22px,#ffffff48 23px 24px),#dbefe9;border-color:#c1ddd4}
[data-design="mint"] .bubble:not(.popped):before{border-color:#a8cfc3;background:radial-gradient(ellipse at 33% 22%,#fff 3%,#fafffcbb 15%,transparent 33%),radial-gradient(circle at 50% 49%,hsl(var(--tint),55%,89%) 48%,hsl(var(--tint),49%,74%) 70%,#edfff8 88%,#a6c9bf 99%);box-shadow:inset 0 2px 3px #ffffffe0,inset 0 -3px 4px #71ae9e40,0 4px 3px #6c9c8e28,0 0 0 3px #f0fff344}
.sheet-wrap[data-design="honey"]{background:radial-gradient(circle,#cfb26726 1px,transparent 2px) 0 0/12px 12px,linear-gradient(130deg,#fff6d8,#f4e1b6);border-color:#e4cfa5}
[data-design="honey"] .bubble:not(.popped):before{border-color:#daba80;background:radial-gradient(ellipse at 34% 24%,#fffbed 3%,#fff8d499 16%,transparent 36%),radial-gradient(ellipse at 65% 75%,hsl(var(--tint),88%,70%),hsl(var(--tint),93%,84%) 68%,#fff2b8 91%,#d3aa59);box-shadow:inset 0 2px 4px #fffbed,inset 0 -5px 6px #bc8b2244,0 4px 5px #987a342a}
[data-design="honey"] .bubble:not(.popped):after{height:11%;width:40%;left:20%;top:20%}
.sheet-wrap[data-design="rainbow"]{background:radial-gradient(ellipse at 4% 8%,#f8e2ed99,transparent 50%),radial-gradient(ellipse at 95% 85%,#dcd4f988,transparent 55%),repeating-linear-gradient(140deg,#fff4 0 14px,transparent 14px 28px),#edf2f7;border-color:#d9dce9}
[data-design="rainbow"] .bubble:not(.popped):before{border-color:hsla(var(--tint),42%,68%,.5);background:radial-gradient(ellipse at 35% 26%,#fff 1%,#ffffff96 18%,transparent 39%),radial-gradient(ellipse at 60% 78%,hsl(var(--tint),69%,78%),hsl(var(--tint),82%,89%) 70%,hsl(var(--tint),55%,82%) 99%);box-shadow:inset 0 2px 4px #fff9,inset 0 -4px 5px hsla(var(--tint),52%,47%,.22),0 4px 4px #8e89a626}
.sheet-edge{font-size:8px;letter-spacing:1.8px}.sheet-wrap:not([data-design="ice"]) .sheet-edge{color:#8e859b}
/* Milk, soda, ceramic, sea glass, marbled chocolate and a translucent night sky. */
.sheet-wrap[data-design="strawberry"]{background:radial-gradient(circle,#e8a0b336 1.5px,transparent 2px) 0 0/14px 14px,linear-gradient(140deg,#fff0f4,#f2d1dd);border-color:#e6bbca}
[data-design="strawberry"] .bubble:not(.popped):before{border-color:#dca4b8;background:radial-gradient(ellipse at 32% 22%,#fff7f9 3%,#fff6f8a8 20%,transparent 44%),linear-gradient(155deg,hsl(var(--tint),68%,90%) 20%,hsl(var(--tint),64%,76%) 70%,#f7dce6);box-shadow:inset 0 3px 5px #fff9,inset 0 -5px 8px #b45d8035,0 4px 5px #bf79902a}
[data-design="strawberry"] .bubble:not(.popped):after{width:34%;height:23%;left:20%;top:14%;filter:blur(2px);background:#fff9}
.sheet-wrap[data-design="orange"]{background:radial-gradient(circle at 6px 6px,transparent 3px,#fff6 3.5px 4.5px,transparent 5px) 0 0/23px 29px,linear-gradient(140deg,#fff1d2,#f2d0a0);border-color:#e7c38e}
[data-design="orange"] .bubble:not(.popped):before{border-color:#dca454;background:radial-gradient(circle at 69% 67%,#fff9 0 2%,transparent 3%),radial-gradient(circle at 58% 79%,#fff6 0 3%,transparent 4%),radial-gradient(ellipse at 30% 23%,#fffbe6 2%,#fffdde99 15%,transparent 35%),radial-gradient(ellipse at 60% 66%,hsl(var(--tint),92%,66%) 20%,hsl(var(--tint),90%,78%) 65%,#fff0b9 90%,#c89651);box-shadow:inset 0 2px 3px #fff9,inset 0 -4px 6px #b7763544,0 4px 4px #b687432d}
[data-design="orange"] .bubble:not(.popped):after{width:21%;height:28%;left:17%;top:15%;background:linear-gradient(#fffd,#fff1)}
.sheet-wrap[data-design="matcha"]{background:repeating-linear-gradient(90deg,#fff2 0 1px,transparent 1px 19px),linear-gradient(145deg,#f0efda,#d7ddbf);border-color:#c7cfb0}
[data-design="matcha"] .bubble:not(.popped):before{border-color:#a6b487;background:radial-gradient(ellipse at 35% 24%,#f7f5df99,transparent 58%),linear-gradient(148deg,hsl(var(--tint),26%,77%),hsl(var(--tint),25%,61%) 74%,#d6ddb9);box-shadow:inset 0 2px 5px #ffffe770,inset 0 -4px 7px #61773b28,0 3px 4px #7e88522a}
[data-design="matcha"] .bubble:not(.popped):after{width:40%;height:20%;opacity:.35;filter:blur(4px);background:#fff9}
.sheet-wrap[data-design="ocean"]{background:repeating-radial-gradient(ellipse at 0 50%,transparent 0 18px,#fff5 19px 20px,transparent 21px 34px),linear-gradient(130deg,#dff5f2,#c6e3ec);border-color:#afd0d9}
[data-design="ocean"] .bubble:not(.popped):before{border-color:#80b7c8;background:radial-gradient(ellipse at 29% 22%,#f6ffff 2%,#eaffffa0 16%,transparent 38%),radial-gradient(ellipse at 62% 68%,hsl(var(--tint),60%,70%,.62) 25%,hsl(var(--tint),68%,86%,.5) 65%,#edffffb8 84%,#68aebca6);box-shadow:inset 0 2px 3px #f5ffff, inset 0 -5px 6px #3f9ba64a,0 4px 5px #598f9b30,0 0 0 2px #e6ffff44}
[data-design="ocean"] .bubble:not(.popped):after{width:11%;height:37%;left:18%;top:18%;transform:rotate(32deg);background:linear-gradient(#fffe,#fff0)}
.sheet-wrap[data-design="chocolate"]{background:repeating-linear-gradient(45deg,#ffffff16 0 1px,transparent 1px 12px),linear-gradient(140deg,#ede0d1,#d1b69e);border-color:#c0a48d}
[data-design="chocolate"] .bubble:not(.popped):before{border-color:#a88163;background:radial-gradient(ellipse at 31% 23%,#fff0d58c,transparent 42%),conic-gradient(from 70deg,hsl(var(--tint),33%,52%) 0deg,#e7ccb0 45deg,#f0dcc4 65deg,hsl(var(--tint),31%,57%) 100deg,#b18b6c 170deg,#f0dfc5 220deg,#c7a78a 270deg,hsl(var(--tint),33%,52%) 360deg);box-shadow:inset 0 2px 3px #fff4df7a,inset 0 -4px 7px #5937203b,0 4px 4px #69503930}
[data-design="chocolate"] .bubble:not(.popped):after{width:25%;height:14%;left:22%;top:18%;background:#fff4db8c;filter:blur(1px)}
.sheet-wrap[data-design="galaxy"]{background:radial-gradient(circle at 5px 8px,#ffffff98 0 1px,transparent 1.5px) 0 0/47px 59px,radial-gradient(circle at 24px 32px,#b5c3ff88 0 1px,transparent 1.6px) 0 0/71px 83px,radial-gradient(ellipse at 95% 10%,#67558c88,transparent 65%),linear-gradient(135deg,#323d65,#252d50);border-color:#586182}
[data-design="galaxy"] .bubble:not(.popped):before{border-color:#a5aee580;background:radial-gradient(ellipse at 30% 23%,#f2f2ffda 2%,#d8d8ff6b 14%,transparent 34%),radial-gradient(ellipse at 60% 72%,hsl(var(--tint),53%,73%,.64),hsl(var(--tint),45%,54%,.53) 57%,#d1d5ff8c 84%,#7677b9);box-shadow:inset 0 2px 4px #e0e5ffb3,inset 0 -4px 7px #c8b4ff57,0 0 8px #bdc5ff18,0 4px 4px #101e4233}
[data-design="galaxy"] .bubble:not(.popped):after{width:14%;height:20%;background:#fff9;left:22%;top:17%}
[data-design="galaxy"] .bubble.popped:before{border-color:#99a4d759;background:conic-gradient(from 20deg,#7e83bc22,#e0dfff48 23deg,#919bd455 27deg,#7480b122 63deg,#c7cfff55 104deg,#a3b2ec33 110deg,#6977a822 180deg,#c9cfff55 232deg,#e0e7ff44 237deg,#7e83bc22);box-shadow:inset 1px 2px 5px #0e164f38,inset 0 -1px 1px #cbd3ff55}
.sheet-wrap[data-design="galaxy"] .sheet-edge{color:#c3c9e4}
.bubble.juicy:before{background:radial-gradient(ellipse at 50% 65%,var(--juice),transparent 66%),conic-gradient(from 20deg,#ffffff33,#fff9 28deg,#ffffff22 95deg,#fff8 110deg,#ffffff22 230deg,#fff8 237deg,#ffffff33)}
.bubble.juicy:after{left:24%;top:53%;width:52%;height:23%;background:radial-gradient(ellipse at 34% 20%,#fffc 0 9%,transparent 14%),var(--juice);opacity:.7;border-radius:44% 55% 41% 58%;box-shadow:inset 0 -2px 2px #ffffff55;transform:scale(.85,.7);animation:juice-puddle .48s ease-out}
@keyframes juice-puddle{0%{transform:scale(.1);opacity:1}45%{transform:translateY(3px) scale(1,.8);opacity:.9}100%{transform:scale(.85,.7);opacity:.7}}
/* Mode choice and speed rankings stay outside the swipe surface. */
[hidden]{display:none!important}.mode-switch{display:flex;background:#e9edf6;border:1px solid #e0e5ef;border-radius:16px;padding:4px;max-width:310px;margin:0 auto 15px;gap:4px}.mode-switch button{flex:1;border:0;border-radius:12px;min-height:44px;background:transparent;color:#778299;font-size:13px;font-weight:700;cursor:pointer}.mode-switch button[aria-pressed="true"]{background:#fff;color:#405de0;box-shadow:0 2px 7px #273b7020}.speed-clock-panel{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:438px;margin:0 auto 12px;padding:13px 16px;border:1px solid #dce3fa;border-radius:17px;background:#eef2ff}.speed-clock-panel>span{font-size:11px;color:#60739a}.speed-clock-panel strong{font-size:28px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:#3d5bd3}.speed-clock-panel strong span{font-size:14px;padding-left:3px}.speed-primary{border:0;border-radius:12px;background:#4566e8;color:#fff;font-weight:700;min-height:44px;padding:11px 17px;cursor:pointer}.speed-primary:disabled{opacity:.55;cursor:wait}#speed-again{margin:4px auto 12px}.speed-secondary{border:1px solid #dce2ef;border-radius:11px;background:#fff;color:#667aab;min-height:44px;padding:10px 13px;font-size:12px;cursor:pointer}.speed-rankings{margin:0 auto 30px;max-width:438px;padding:20px 18px;border:1px solid #e0e5ef;border-radius:23px;background:#ffffffc9}.speed-rank-result{font-size:13px;line-height:1.65;color:#586b9b;margin:0 0 16px}.speed-rank-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.speed-rank-heading h2{font-size:20px;letter-spacing:-.7px;margin:0}.speed-board-date{font-size:11px;color:#8993a9;margin:2px 0 15px}.speed-rank-list{list-style:none;padding:0;margin:0}.speed-rank-list li{display:flex;align-items:center;gap:10px;padding:12px 3px;border-top:1px solid #eef0f5;font-size:13px;min-height:49px}.speed-rank-number{color:#8192b5;font-size:12px;font-weight:700;width:20px;text-align:center;flex-shrink:0}.speed-rank-name{flex:1;min-width:0;overflow-wrap:anywhere}.speed-rank-list strong{font-size:14px;font-variant-numeric:tabular-nums;color:#4e67b8;white-space:nowrap}.speed-rank-list .empty{color:#a0a9bb;font-size:12px}.speed-rank-list .empty strong{color:#b7bfcd}.speed-rank-heading.all-time{margin:26px 0 12px}.all-time span{font-size:11px;color:#9b88ad}#speed-all-time li:first-child .speed-rank-number{color:#b98b33}#speed-all-time{background:#fbf9f2;border-radius:12px;padding:0 9px}#speed-all-time li:first-child{border-top:0}.speed-board-note{font-size:10px;line-height:1.7;color:#8a95ab;margin:15px 0 0}.speed-name-form{padding:15px;background:#f0f4ff;border-radius:14px;margin:0 0 22px}.speed-name-form label{display:block;font-size:12px;color:#52669c;font-weight:700;margin-bottom:9px}.speed-name-form>div{display:flex;gap:7px}.speed-name-form input{min-width:0;flex:1;width:100%;border:1px solid #d3def3;border-radius:10px;padding:11px 10px;font:inherit;font-size:13px;background:#fff}.speed-name-form button{font-size:12px;white-space:nowrap;padding:10px 12px}.speed-name-form small{display:block;font-size:10px;color:#8a95ab;margin-top:8px;line-height:1.5}@media(max-width:380px){.speed-rankings{padding:17px 13px}.speed-clock-panel{padding:11px 12px}.speed-clock-panel strong{font-size:25px}.speed-clock-panel>span{font-size:10px}}