*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:#191a18;color:#f3f5f1;font:14px system-ui,sans-serif;display:flex;flex-direction:column}button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #b9c6ff;outline-offset:3px}[hidden]{display:none!important}header{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid #ffffff18}.identity{min-width:0}.identity h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 3px}.identity span,.level small{font-size:10px;color:#aeb7c5;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level{text-align:center;white-space:nowrap}.level strong{font-size:12px}.level small{margin-top:3px}nav{display:flex;justify-self:end;gap:5px}nav button{min-width:32px;background:#ffffff09;border:1px solid #ffffff25;border-radius:9px;padding:7px}button:disabled{opacity:.38;cursor:default}#playArea{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px}.ambient{position:absolute;width:70%;height:55%;top:22%;background:radial-gradient(ellipse,#30374a45,transparent 70%);pointer-events:none}#intro{text-align:center;z-index:1;flex:none;margin-bottom:clamp(10px,3vh,28px)}#intro span{color:#a6b5ff;letter-spacing:.18em;font-size:9px;font-weight:750}#intro h2{font-size:clamp(20px,3vw,28px);letter-spacing:-.04em;margin:6px 0}#intro p{font-size:11px;line-height:1.5;color:#aeb7c5;margin:0}#board{position:relative;z-index:2;width:min(100%,590px);display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));justify-items:center;align-content:center;gap:clamp(10px,3vh,25px) 5px}.bottle-slot{position:relative;display:flex;align-items:flex-end;justify-content:center;background:none;border:0;padding:11px 3px 4px;min-width:44px;cursor:pointer;overflow:visible;touch-action:manipulation}.bottle-slot .glass{position:relative;width:clamp(35px,10vw,58px);height:clamp(75px,19vw,118px);border:2px solid #dfe8fdbe;border-top:1px solid #eaf0ffad;border-radius:4px 4px 13px 13px;background:linear-gradient(100deg,#ffffff1b,transparent 30%,#ffffff0a 75%,#ffffff1c);box-shadow:inset 3px 0 5px #ffffff15,0 7px 12px #0004;transform-origin:bottom center;transition:transform .2s,filter .2s}.glass:before{content:"";position:absolute;z-index:3;left:-4px;right:-4px;top:-4px;height:6px;border:2px solid #dce7fac7;border-radius:6px;background:#202427}.glass:after{content:"";position:absolute;z-index:2;top:8px;left:5px;bottom:9px;width:3px;background:#ffffff37;border-radius:5px;pointer-events:none}.liquid-area{position:absolute;inset:2px;bottom:2px;border-radius:1px 1px 10px 10px;overflow:hidden}.layer{position:absolute;left:0;width:100%;height:25%;background:var(--color);box-shadow:inset 0 2px 1px #ffffff2c,inset 0 -2px 2px #0002;transform-origin:bottom}.layer.new{animation:fill .38s ease-out both}@keyframes fill{from{transform:scaleY(.05)}to{transform:scaleY(1)}}.bottle-slot.selected .glass{transform:translateY(-10px);filter:drop-shadow(0 0 7px #bccaffaa)}.bottle-slot.pouring-right,.bottle-slot.pouring-left{z-index:3}.bottle-slot.pouring-right .glass{transform:translate(var(--shift-x,0px),var(--shift-y,-38px)) rotate(55deg)}.bottle-slot.pouring-left .glass{transform:translate(var(--shift-x,0px),var(--shift-y,-38px)) rotate(-55deg)}.bottle-slot.complete-flash .glass{animation:glow 1.2s ease-out}@keyframes glow{0%,100%{filter:none}25%{filter:drop-shadow(0 0 11px var(--glow)) brightness(1.35)}}#stream{position:absolute;z-index:4;width:5px;border-radius:20px;background:var(--pour);transform-origin:50% 0;pointer-events:none;box-shadow:0 0 7px var(--pour);animation:stream .68s ease both}@keyframes stream{0%,15%{opacity:0;scale:1 0}30%{opacity:1;scale:1 1}75%{opacity:1;scale:1 1}100%{opacity:0;scale:1 1}}.burst{position:absolute;z-index:6;top:10px;left:50%;width:0;height:0;pointer-events:none}.spark{position:absolute;left:0;top:0;width:6px;height:9px;border-radius:1px;background:var(--spark);will-change:transform,opacity;animation:confetti 1.25s cubic-bezier(.2,.65,.25,1) forwards}@keyframes confetti{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}42%{opacity:1;transform:translate3d(calc(var(--x)*.55),var(--peak),0) rotate(calc(var(--spin)*.55))}100%{opacity:0;transform:translate3d(var(--x),var(--fall),0) rotate(var(--spin))}}#bigBurst{position:absolute;z-index:8;left:50%;top:37%;pointer-events:none}#win{position:absolute;z-index:7;left:50%;bottom:clamp(10px,5vh,40px);transform:translateX(-50%);width:min(310px,calc(100% - 24px));padding:15px;text-align:center;border:1px solid #ffffff26;border-radius:18px;background:#20242bef;box-shadow:0 14px 35px #0006}#win span{font-size:9px;letter-spacing:.12em;color:#a9d7bf;font-weight:700}#win h2{font-size:20px;margin:6px 0}#win p{font-size:11px;color:#b5bfce;margin:0 0 11px}#win button,#join{border:0;border-radius:11px;background:#aebdff;color:#141929;font-weight:750;padding:10px 18px}#win button span{font-size:15px;color:inherit}footer{text-align:center;color:#bbc1c9;font-size:11px;padding:7px;min-height:28px}#nameGate{position:absolute;inset:0;display:grid;place-items:center;background:#191a18;z-index:10;padding:16px}#nameForm{width:min(280px,100%);padding:20px;background:#20242bee;border:1px solid #ffffff22;border-radius:20px;text-align:center;box-shadow:0 12px 40px #0003}#nameForm h2{font:700 18px/1.2 system-ui;margin:0}#nameForm p{font:11px/1.5 system-ui;margin:6px 0;color:#bcc4d2}#nickname{width:100%;margin:8px 0 0;padding:12px;border:1px solid #ffffff30;border-radius:12px;font:16px/1.25 system-ui;color:#f4f6fa;background:#ffffff0a}#join{width:100%;margin-top:10px;padding:12px;background:#3554ed;color:#fff;box-shadow:0 4px 0 #2038b8}#nameStatus{color:#ff9bb7!important}#nameStatus:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:540px){header{padding:7px;gap:5px}.identity h1{font-size:10px;letter-spacing:-.02em}.identity span{font-size:9px}.level strong,.level small{font-size:10px}nav{gap:3px}nav button{padding:6px}#intro{margin-bottom:12px}#intro h2{font-size:20px}#intro p{font-size:10px}footer{font-size:10px;padding:5px}.bottle-slot .glass{height:clamp(68px,19vw,96px)}}@media(max-height:520px){#intro{margin-bottom:6px}#intro span,#intro p{display:none}#intro h2{font-size:17px}.bottle-slot .glass{height:clamp(55px,14vh,80px)}#board{row-gap:6px}#playArea{padding:4px 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spark,#stream{display:none!important}.bottle-slot.complete-flash .glass{filter:brightness(1.2)}}
/* Original glass and gravity-aligned liquid rendering. */
.bottle-slot .glass{border:2px solid #e1eaf2cc;border-top:1px solid #eff7ffad;border-radius:3px 3px 45% 45%;background:linear-gradient(90deg,#e8f6ff30 0%,#dcecff08 19%,#ffffff03 50%,#dcecff0c 78%,#e5f4ff2c 100%);box-shadow:inset 3px 0 6px #ffffff1c,inset -3px 0 8px #080f2266,0 8px 15px #0005;transform-origin:50% 0;transition:transform .3s cubic-bezier(.22,.7,.3,1),filter .2s}
.glass:before{left:-3px;right:-3px;top:-3px;height:5px;border:1px solid #f0f8ffdd;border-radius:50%;background:#17202a;box-shadow:0 1px 2px #0007}
.glass:after{top:10px;left:5px;bottom:14px;width:3px;background:linear-gradient(#fff9,#fff3 60%,transparent);filter:blur(.4px)}
.liquid-area{inset:2px 2px 3px;border-radius:0 0 45% 45%;background:transparent}
.layer{background:linear-gradient(90deg,#ffffff21 0%,transparent 23%,#00000012 85%,#00000022 100%),var(--color);box-shadow:none}
.layer:last-child:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:50%;background:linear-gradient(90deg,#ffffff40,#ffffff18,#ffffff45)}
.liquid-area.animated .layer{opacity:0}.fluid-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.bottle-slot.pouring-right .glass{transform:translate(var(--shift-x,0px),var(--shift-y,-45px)) rotate(78deg)}
.bottle-slot.pouring-left .glass{transform:translate(var(--shift-x,0px),var(--shift-y,-45px)) rotate(-78deg)}
#stream{width:4px;background:linear-gradient(90deg,#ffffff6b,var(--pour) 40%,var(--pour) 75%,#ffffff66);box-shadow:0 0 4px color-mix(in srgb,var(--pour),transparent 50%);animation:stream 2.2s ease both}
.confetti-anchor{position:absolute;width:0;height:0;z-index:6;pointer-events:none}
.bottle-slot .glass{border-radius:3px 3px 50% 50% / 3px 3px 24% 24%}
.liquid-area{border-radius:0 0 50% 50% / 0 0 24% 24%}
#intro{transition:opacity .2s}.pouring-active #intro{opacity:.14}

/* Taller rounded glass, with a little more dimensionality in the liquid. */
.bottle-slot .glass{width:clamp(30px,8vw,48px);height:clamp(86px,23vw,138px);background:linear-gradient(90deg,#e7f5ff42,#cbe2f314 15%,#ffffff04 43%,#8daacb0b 75%,#e4f6ff38);box-shadow:inset 2px 0 5px #ffffff32,inset -3px 0 8px #0007,0 8px 15px #0005}
.layer{background:linear-gradient(90deg,#ffffff37 0%,#ffffff0b 20%,transparent 45%,#0000001c 88%,#00000028 100%),var(--color)}
@media(max-width:540px){.bottle-slot .glass{width:clamp(30px,8vw,42px);height:clamp(76px,20vw,100px)}}
@media(max-height:520px){.bottle-slot .glass{height:clamp(55px,14vh,80px)}}
/* Give the two active glasses more height while keeping older crowded boards usable. */
.bottle-slot .glass{height:clamp(115px,26vw,170px)}
@media(max-width:540px){.bottle-slot .glass{height:clamp(100px,28vw,130px)}}
@media(max-height:520px){.bottle-slot .glass{height:clamp(90px,18vh,110px)}}
#board.many-bottles .bottle-slot .glass{height:clamp(65px,15vh,105px)}

/* Keep high-level boards and their touch targets inside the game field. */
#playArea{container-type:size}
#board.many-bottles{row-gap:clamp(3px,1.8cqh,12px)}
#board.many-bottles .bottle-slot .glass{height:clamp(48px,calc((100cqh - 110px)/var(--rows,4) - 16px),105px)}

/* Colorful original confetti and small glints inside completed glass. */
.spark.ribbon{width:5px;height:10px;border-radius:1px}.spark.square{width:6px;height:6px;border-radius:1px}.spark.star{width:10px;height:10px;clip-path:polygon(50% 0,61% 33%,95% 35%,69% 57%,78% 92%,50% 72%,22% 92%,31% 57%,5% 35%,39% 33%)}
.glass-spark{position:absolute;width:5px;height:5px;z-index:5;pointer-events:none;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:glass-twinkle 1.15s ease-out both;filter:drop-shadow(0 0 3px #fff)}
@keyframes glass-twinkle{0%,100%{opacity:0;transform:scale(.2)}25%{opacity:.95;transform:scale(1.5)}60%{opacity:.75;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.glass-spark{display:none!important}}

/* A glossy, gently undulating stream follows each transfer. */
#stream{width:7px;margin-left:-1px;overflow:hidden;background:linear-gradient(90deg,transparent 0%,var(--pour) 18%,#ffffffa0 42%,var(--pour) 70%,transparent 100%);filter:drop-shadow(0 0 3px var(--pour));box-shadow:none}
#stream:after{content:"";position:absolute;inset:-12px 0;background:repeating-linear-gradient(170deg,transparent 0 7px,#ffffff80 9px,transparent 12px);animation:water-wave .32s linear infinite;opacity:.65}
@keyframes water-wave{to{transform:translateY(12px)}}

/* Animated ripples follow the uninterrupted liquid stream. */
#stream{border-radius:40%;clip-path:polygon(20% 0,75% 0,95% 20%,78% 40%,96% 60%,80% 80%,72% 100%,24% 100%,6% 80%,22% 60%,4% 40%,22% 20%)}

/* Continuous narrow flow, with a soft impact ripple at the liquid surface. */
#stream{overflow:visible;clip-path:none;border-radius:45% 45% 30% 30%;transform-origin:top center;will-change:transform,opacity}
#stream:before{content:"";position:absolute;bottom:-3px;left:50%;width:18px;height:6px;border:1px solid color-mix(in srgb,var(--pour),white 45%);border-radius:50%;transform:translateX(-50%);animation:pour-impact .42s ease-out infinite;box-shadow:0 0 4px var(--pour)}
#stream:after{inset:0;border-radius:inherit}
@keyframes pour-impact{from{transform:translateX(-50%) scale(.4);opacity:.85}to{transform:translateX(-50%) scale(1.35);opacity:0}}