:root{--straw:#FF2255;--rasp:#FF2BD6;--blue:#00F0FF;--black:#0A0018;--leaf:#39FF88;--cream:#F0F8FF}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#2a0648,#05000f 70%);font-family:'Fredoka',sans-serif;color:var(--cream);touch-action:none;user-select:none;-webkit-user-select:none}
#scene-container{position:fixed;inset:0}
#bokeh{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#bokeh i{position:absolute;border-radius:50% 50% 45% 45%;filter:blur(18px);opacity:.35;animation:float 18s ease-in-out infinite}
#bokeh i:nth-child(1){width:180px;height:200px;background:var(--straw);left:5%;top:10%}
#bokeh i:nth-child(2){width:120px;height:120px;background:var(--blue);right:8%;top:30%;animation-delay:-4s}
#bokeh i:nth-child(3){width:220px;height:220px;background:var(--rasp);left:60%;bottom:5%;animation-delay:-8s}
#bokeh i:nth-child(4){width:90px;height:100px;background:var(--leaf);left:20%;bottom:20%;animation-delay:-2s}
#bokeh i:nth-child(5){width:140px;height:150px;background:#8a3fbf;right:30%;top:5%;animation-delay:-11s}
#bokeh i:nth-child(6){width:100px;height:100px;background:var(--straw);right:5%;bottom:30%;animation-delay:-6s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-60px) scale(1.2)}}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
.topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.scorebox{background:#0a0018cc;border:2px solid var(--rasp);padding:6px 16px;border-radius:6px;box-shadow:0 0 14px var(--rasp),inset 0 0 12px #ff2bd666;clip-path:polygon(0 0,100% 0,100% 70%,90% 100%,0 100%)}
.lbl{font-size:11px;letter-spacing:3px;opacity:.85}
#score{font-family:'Baloo 2';font-size:32px;line-height:1;color:var(--blue);text-shadow:0 0 8px var(--blue),0 0 20px var(--blue)}
.mult{font-family:'Baloo 2';font-size:26px;color:var(--leaf);background:#0a0018cc;border:2px solid var(--leaf);padding:4px 14px;border-radius:6px;box-shadow:0 0 14px var(--leaf);text-shadow:0 0 8px var(--leaf);transition:transform .2s}
.mult.pop{transform:scale(1.5) rotate(-10deg)}
.side{text-align:right}
#balls span{display:inline-block;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fa3ff,var(--blue) 50%,#1b1d66);margin-left:3px;box-shadow:0 2px 0 #0008}
.hi{font-size:13px;opacity:.8;margin-top:3px}
.btns{position:absolute;top:80px;right:10px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.btns button{width:42px;height:42px;border-radius:6px;border:2px solid var(--blue);background:#0a0018cc;color:var(--blue);font-family:'Baloo 2';font-size:18px;box-shadow:0 0 10px var(--blue)}
#cup{position:absolute;left:12px;top:90px;width:34px;height:150px;border:3px solid var(--rasp);box-shadow:0 0 12px var(--rasp);border-top:none;border-radius:0 0 14px 14px;overflow:hidden;background:#0004}
#cupfill{position:absolute;bottom:0;left:0;right:0;height:0%;background:repeating-linear-gradient(-45deg,var(--rasp) 0 8px,#ff8fb0 8px 16px);transition:height .3s;animation:swirl 1s linear infinite}
@keyframes swirl{to{background-position:0 22px}}
#cup span{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font-size:9px;letter-spacing:2px;white-space:nowrap;top:60px}
#msg{position:absolute;top:28%;left:0;right:0;text-align:center;font-family:'Baloo 2';font-size:clamp(26px,7vw,54px);color:var(--cream);text-shadow:0 0 6px #fff,0 0 16px var(--rasp),0 0 32px var(--rasp),3px 0 0 var(--blue);opacity:0;transition:opacity .3s}
#msg.show{opacity:1;animation:wob .5s}
@keyframes wob{0%{transform:scale(.3)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
#launchBtn{position:absolute;right:10px;bottom:20px;width:84px;height:84px;border-radius:50%;border:0;background:#0a0018cc;border:3px solid var(--rasp);color:var(--rasp);text-shadow:0 0 8px var(--rasp);font-family:'Baloo 2';font-size:14px;box-shadow:0 0 18px var(--rasp),inset 0 0 14px #ff2bd666;pointer-events:auto;display:none}
#launchBtn.on{display:block}
#popups{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;font-family:'Baloo 2';font-size:22px;color:#fff;text-shadow:0 0 6px var(--rasp),0 0 14px var(--rasp);transform:translate(-50%,-50%);animation:rise 1s ease-out forwards;white-space:nowrap}
.pop.big{font-size:34px;text-shadow:0 0 8px var(--blue),0 0 20px var(--blue)}
@keyframes rise{0%{transform:translate(-50%,-50%) scale(.4)}25%{transform:translate(-50%,-80%) scale(1.25)}100%{transform:translate(-50%,-220%) scale(1);opacity:0}}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
#drip{position:fixed;left:0;right:0;top:-100%;height:100%;pointer-events:none;background:linear-gradient(#7a1030,#b3163e 80%,transparent);-webkit-mask:radial-gradient(circle at 10% 100%,transparent 30px,#000 31px);opacity:.85}
#drip.go{animation:drip 1.4s ease-in forwards}
@keyframes drip{0%{top:-100%}40%{top:-40%}100%{top:120%}}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#1a0b2699;backdrop-filter:blur(3px);padding:14px}
.panel{background:linear-gradient(180deg,#140028ee,#0a0018ee),repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 3px);color:var(--cream);border:2px solid var(--blue);border-radius:10px;padding:22px;max-width:420px;width:100%;text-align:center;box-shadow:0 0 24px var(--blue),inset 0 0 30px #00f0ff22,0 30px 60px #000;max-height:95vh;overflow:auto}
.logo{margin:0 0 12px;font-family:'Baloo 2';line-height:.85;animation:bounce 1.6s ease-in-out infinite}
.logo span{display:block;font-size:64px;color:#fff;text-shadow:0 0 8px var(--rasp),0 0 22px var(--rasp),0 0 44px var(--rasp);animation:flick 4s infinite}
.logo span+span{text-shadow:0 0 8px var(--blue),0 0 22px var(--blue),0 0 44px var(--blue);animation-delay:-1.3s}
.logo small{display:block;font-size:26px;letter-spacing:10px;color:var(--leaf);text-shadow:0 0 10px var(--leaf);margin-top:8px}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}95%{opacity:1}96%{opacity:.3}}
@keyframes bounce{50%{transform:translateY(-8px) rotate(-2deg)}}
button{font-family:'Fredoka';cursor:pointer}
.big{border:2px solid var(--rasp);background:#ff2bd622;color:#fff;font-size:22px;font-weight:700;padding:14px 28px;border-radius:6px;box-shadow:0 0 16px var(--rasp),inset 0 0 12px #ff2bd666;text-shadow:0 0 8px var(--rasp);animation:pulse 1.2s infinite}
.big:active{transform:translateY(2px)}
@keyframes pulse{50%{transform:scale(1.06)}}
.controls{font-size:13px;margin:16px 0;opacity:.8;line-height:1.7}
h3{margin:10px 0 4px;color:var(--blue);text-shadow:0 0 10px var(--blue);letter-spacing:2px}
.board{text-align:left;margin:0 auto;padding-left:30px;max-width:280px;font-size:15px}
.board li{padding:2px 0}
.board li b{float:right;color:var(--straw)}
.remix{display:inline-block;margin-top:14px;color:var(--blue);opacity:.55;font-size:13px}
.splat{font-family:'Baloo 2';font-size:60px;margin:0;color:#fff;text-shadow:0 0 10px var(--straw),0 0 30px var(--straw)}
.finalnum{font-family:'Baloo 2';font-size:52px;color:var(--blue);text-shadow:0 0 14px var(--blue)}
.namerow{display:flex;gap:6px;margin:10px 0}
.namerow input{flex:1;border:2px solid var(--rasp);background:#0a0018;color:var(--cream);border-radius:6px;box-shadow:0 0 8px var(--rasp);padding:8px 12px;font-family:'Fredoka';font-size:16px}
.namerow button,#shareBtn{border:2px solid var(--leaf);background:#39ff8822;color:var(--leaf);border-radius:6px;padding:8px 16px;font-size:16px;box-shadow:0 0 10px var(--leaf)}
.row{display:flex;gap:10px;justify-content:center;align-items:center;margin:12px 0}
.small{font-size:13px;min-height:18px}
.small a{color:var(--blue)}