/* Local visual upgrade: sculpted glass, saturated colors and dimensional light. */
:root{--bg:#120c29;--panel:#281d48;--gold:#ffce59;--lav:#cd9fff;--muted:#baa8d9}
body{background:radial-gradient(ellipse at 50% 0%,#432363 0,transparent 65%),#120c29}
.ambient{background:radial-gradient(ellipse at 88% 17%,#b547ff28,transparent 50%),radial-gradient(ellipse at 5% 65%,#26d5e423,transparent 50%)}
.brand-icon{background:linear-gradient(135deg,#9964ed,#4d2885);border-color:#d9aeff80;box-shadow:inset 0 2px 1px #ffffff60,0 5px 15px #0005;color:#ffdf75}
h1 em{color:#d2a3ff;text-shadow:0 3px 0 #58377d,0 0 28px #a35eff40}
.mascots svg{filter:drop-shadow(0 12px 5px #0005) drop-shadow(0 0 24px #bb64ff33);transform:perspective(600px) rotateY(-7deg);}
.game-card{background:linear-gradient(130deg,#3c2b60 0,#271c46 48%,#201735);border:1px solid #ba8eff45;box-shadow:inset 0 2px 0 #ffffff14,inset 0 -3px 0 #100b25,0 16px 30px #06020f66,0 0 50px #9b45ff0c}
.game-top{background:linear-gradient(100deg,#925be317,#45297910)}
.game-top h2{color:#fff7df;text-shadow:0 2px 2px #0006}
.stats{background:#100b2850;border-color:#d9b3ff15}.stats b{color:#ffe496}.stats #difficulty{color:#70eace}
.mode-switch{box-shadow:inset 0 2px 6px #0007;border:1px solid #ffffff16}.mode-switch button.active{background:linear-gradient(#a66dec,#7045ad);box-shadow:inset 0 1px #e0bdff8c,0 2px 4px #0005}
.board{position:relative;perspective:900px;background:radial-gradient(ellipse at 50% 80%,#ab65ea15,transparent 65%);padding-bottom:34px}
.board:before{content:'';pointer-events:none;position:absolute;left:4%;right:4%;bottom:11px;height:76px;border-radius:50%;background:radial-gradient(ellipse,#aa80ed25,#8f66c90b 48%,transparent 71%);transform:rotateX(62deg);box-shadow:0 12px 35px #0003}
.bottle-wrap{z-index:1;gap:14px}.bottle-wrap:before{content:'';position:absolute;bottom:24px;left:-8px;right:-8px;height:16px;border-radius:50%;background:radial-gradient(ellipse,#060212a8,transparent 72%);filter:blur(3px);transform:scaleX(1.2);pointer-events:none}
.bottle{filter:drop-shadow(5px 8px 4px #05001380);transform-style:preserve-3d;transition:transform .23s cubic-bezier(.2,.8,.3,1),filter .23s}
.bottle:hover{transform:translateY(-8px) rotate(-2deg);filter:drop-shadow(5px 12px 7px #05001380) drop-shadow(0 0 8px #cf94ff35)}
.bottle.selected{transform:translateY(-20px) rotate(-4deg);filter:drop-shadow(5px 17px 6px #05001380) drop-shadow(0 0 12px #ffdc7e9c)}
.bottle .glass{inset:10px 0 0;border:2px solid #d9ddff8a;border-top:0;border-radius:8px 8px 17px 17px;background:linear-gradient(90deg,#e2eaff38 0%,#b3b2ff05 17%,#15122d19 54%,#ffffff0a 74%,#c9d4ff42 95%,#ffffff6b);box-shadow:inset 3px 0 5px #ffffff36,inset -4px 0 7px #090a2659,inset 0 -5px 4px #dce4ff3b,2px 3px 1px #07051c80;overflow:hidden}
.bottle .glass:after{left:6px;top:10px;bottom:17px;width:5px;border-radius:50%;background:linear-gradient(#ffffffa6,#ffffff35 35%,#ffffff15 85%);box-shadow:9px -3px 0 -1px #ffffff20;z-index:5}
.bottle .glass:before{content:'';position:absolute;top:8px;right:5px;width:2px;bottom:12px;background:linear-gradient(transparent,#ffffff60 30%,#ffffff12);border-radius:50%;z-index:5}
.bottle .rim{top:3px;left:-3px;right:-3px;height:12px;border:2px solid #d7c9ffb3;border-bottom-color:#776297;border-radius:50%/40%;background:radial-gradient(ellipse at 50% 30%,#251b3f 45%,#977bb95c 55%,#e6d9ff85 70%,#70618b 90%);box-shadow:0 2px 2px #08021c9c,inset 0 2px 2px #fff8;z-index:8}
.liquid-stack{left:3px;right:3px;bottom:4px;height:calc(100% - 12px);border-radius:0 0 11px 11px}
.layer{isolation:isolate;background:linear-gradient(90deg,#00000036,transparent 22%,#ffffff1a 46%,transparent 65%,#00000038),linear-gradient(180deg,#ffffff14,transparent 55%,#00000019),var(--color);border-bottom:1px solid #0000000d;box-shadow:inset 0 1px 0 #ffffff24;color:#0c10388c;text-shadow:0 1px #ffffff55}
.layer:last-child{border-radius:50% 50% 0 0/13% 13% 0 0;box-shadow:inset 0 3px 2px #ffffff80,0 -1px 3px #ffffff38}
.layer:last-child:after{content:'';position:absolute;left:0;right:0;top:0;height:7px;border-radius:50%;background:linear-gradient(180deg,#ffffff70,#ffffff08);border:1px solid #ffffff38;pointer-events:none}
.layer:not(.hidden):before{content:'';position:absolute;left:65%;top:45%;width:3px;height:3px;border-radius:50%;background:#ffffff75;box-shadow:-14px 8px 0 -1px #ffffff50,4px -6px 0 -1px #ffffff80;opacity:.65;animation:potion-bubbles 3.2s ease-in-out infinite}
.layer.hidden{background:repeating-linear-gradient(135deg,#463063,#463063 6px,#533c72 6px,#533c72 12px);box-shadow:inset 2px 2px 7px #140c274d;color:#dac2ff;text-shadow:0 2px 2px #160f27}.layer.hidden:after{opacity:.2}
.sand .layer:not(.hidden){background:radial-gradient(circle,#fff8 .65px,transparent .9px),radial-gradient(circle,#0005 .55px,transparent .8px),linear-gradient(90deg,#0004,transparent 25%,#fff1 50%,#0003),var(--color);background-size:4px 5px,3px 4px,100% 100%,100% 100%;box-shadow:inset 0 2px 2px #ffffff4a,inset 0 -3px 4px #0002}
.sand .layer:not(.hidden):before{display:none}.sand .layer:last-child:after{height:5px;background:linear-gradient(170deg,#ffffff65,transparent);transform:rotate(-2deg)}
.bottle.complete .rim{background:linear-gradient(#ffefad,#ffca3d 45%,#aa651c);border-color:#ffeb9c;box-shadow:0 0 13px #ffd54f4d,inset 0 2px #fff8}.bottle.complete{filter:drop-shadow(0 4px 7px #09031870) drop-shadow(0 0 8px #ffc84b38)}.bottle.complete:after{color:#ffe485;text-shadow:0 2px 2px #9a5219,0 0 12px #ffd84a;font-size:21px;top:-24px}.bottle-index{color:#b5a0d3;font-weight:650}
.obstacle{background:linear-gradient(135deg,#c5faff73,#73c8ff66 35%,#a0e9ff4a 45%,#edffffa3 48%,#65b5f949 51%,#b0e7ff66);border:2px solid #c4fbffb3;box-shadow:inset 3px 3px 8px #fff7,inset -3px -5px 8px #1b4a9c80,0 0 18px #76d2ff40;text-shadow:0 2px 3px #2b62a6}
.obstacle.lock{background:linear-gradient(145deg,#6d497bd9,#261c38ec);border:3px solid var(--lock);box-shadow:inset 2px 2px 3px #fffa,inset -3px -3px 7px #0009,0 0 12px color-mix(in srgb,var(--lock) 45%,transparent);text-shadow:0 3px 2px #09051d}
.tools{background:linear-gradient(#3e285333,#180f2c66);border-top-color:#c197ec26}.tools button{border:1px solid #c9a4f13b;background:linear-gradient(145deg,#65438366,#3c275f66);box-shadow:inset 0 1px 0 #f2d6ff38,inset 0 -3px 0 #1007206b,0 3px 5px #0a031d44;font-weight:650;color:#eadbff}.tools button:hover{background:linear-gradient(145deg,#9763cf88,#573a9188);transform:translateY(-3px);box-shadow:inset 0 1px #f2d6ff66,0 7px 12px #0004}.tools button>span{text-shadow:0 2px 1px #1c1038,0 0 12px currentColor}.tools button:nth-child(1)>span{color:#77c8ff}.tools button:nth-child(2)>span{color:#ffdf6a}.tools button:nth-child(3)>span{color:#73efd3}.tools button:nth-child(4)>span{color:#e29aff}.tools button:nth-child(5)>span{color:#ffad6a}.tools button:nth-child(6)>span{color:#ff7fae}.tools small{color:#ffe491}
.broadcast{background:linear-gradient(135deg,#7041847a,#38245d66);box-shadow:inset 0 1px #dfafff21,0 7px 18px #08011740;border-color:#da9bff40}.quest-card,.loot-card,.guide-grid article{background:linear-gradient(145deg,#3b285b,#241a3e);box-shadow:inset 0 1px #ffffff14,0 7px 18px #08011733;border-color:#b38bde30}.primary{background:linear-gradient(#ffe694,#ffc847);border-color:#ffe39c;box-shadow:inset 0 2px #fff8,inset 0 -3px #c0802070,0 4px 12px #0004}.win h2{text-shadow:0 2px #8c5525,0 0 25px #ffc72b38}.tabs button.active{color:#ffe18a;box-shadow:0 2px #ffd15d;text-shadow:0 0 16px #ffbe5b33}
.pour-ghost{filter:drop-shadow(5px 10px 6px #05001380) drop-shadow(0 0 9px #ffffff22);transition:transform .3s cubic-bezier(.22,.8,.3,1)}
.pour-stream{width:7px;background:linear-gradient(90deg,#ffffff70,transparent 40%,#0003),var(--pour-color)!important;box-shadow:0 0 7px var(--pour-color),inset 1px 0 1px #ffffff90;animation:stream .42s forwards;}
.pour-stream.grain-stream{width:6px;background:repeating-linear-gradient(180deg,#ffffff60 0 1px,transparent 1px 4px),var(--pour-color)!important;background-size:100% 6px;box-shadow:0 0 4px var(--pour-color);}
.pour-particle{position:fixed;pointer-events:none;z-index:65;width:var(--size,5px);height:var(--size,5px);border-radius:50%;background:var(--particle-color);box-shadow:inset 1px 1px 1px #ffffffb3,0 0 6px var(--particle-color);animation:pour-spark .55s ease-out forwards}.pour-particle.grain{border-radius:2px;box-shadow:0 0 3px var(--particle-color)}
.bottle.just-poured .layer:last-child{animation:liquid-settle .65s ease-out}.sand .bottle.just-poured .layer:last-child{animation:sand-settle .5s ease-out}
.bottle.just-completed{animation:complete-bounce .6s cubic-bezier(.25,.8,.3,1)}
.pour-flow{position:fixed;inset:0;pointer-events:none;z-index:64;overflow:visible}.flowing-water{stroke-dasharray:9 13;animation:flow-down .35s linear infinite}.flowing-grains{stroke-dasharray:1 3;animation:flow-down .15s linear infinite}.receiving-layer{min-height:0!important;flex-shrink:0}.sand-ghost .layer:not(.hidden){background:radial-gradient(circle,#fff8 .65px,transparent .9px),radial-gradient(circle,#0005 .55px,transparent .8px),linear-gradient(90deg,#0004,transparent 25%,#fff1 50%,#0003),var(--color);background-size:4px 5px,3px 4px,100% 100%,100% 100%}.sand-ghost .layer:before{display:none}
@keyframes flow-down{to{stroke-dashoffset:-44}}
@keyframes potion-bubbles{0%,100%{transform:translateY(3px);opacity:.3}50%{transform:translateY(-4px);opacity:.8}}
@keyframes pour-spark{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes liquid-settle{0%{transform:skewY(-8deg)}25%{transform:skewY(6deg)}50%{transform:skewY(-3deg)}100%{transform:skewY(0)}}
@keyframes sand-settle{0%{transform:skewY(-5deg)}100%{transform:skewY(0)}}
@keyframes complete-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px) scale(1.06)}70%{transform:translateY(2px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.layer:before{animation:none}.bottle,.tools button{transition:none}}

/* v0.3: keep layers legible by giving deep vials real physical height. */
.capacity-5 .bottle{height:187px}.capacity-6 .bottle{height:223px}.capacity-8 .bottle{height:291px}.capacity-6{min-height:344px}.capacity-8{min-height:412px}.capacity-6 .bottle-wrap,.capacity-8 .bottle-wrap{width:70px}.capacity-6 .bottle,.capacity-8 .bottle{width:61px}.capacity-8 .bottle .glass{border-radius:8px 8px 19px 19px}.capacity-8 .bottle .glass:after{bottom:23px}.capacity-6 .bottle-index,.capacity-8 .bottle-index{color:#d1b8ee}
@media(max-width:740px){.capacity-5 .bottle{height:169px}.capacity-6 .bottle{height:201px}.capacity-8 .bottle{height:265px}.capacity-6{min-height:316px}.capacity-8{min-height:380px}.capacity-6 .bottle-wrap,.capacity-8 .bottle-wrap{width:58px}.capacity-6 .bottle,.capacity-8 .bottle{width:53px}}

.capacity-12 .bottle{height:365px}.capacity-16 .bottle{height:445px}.capacity-12,.capacity-16{min-height:490px;gap:26px 15px}.capacity-12 .bottle-wrap,.capacity-16 .bottle-wrap{width:64px}.capacity-12 .bottle,.capacity-16 .bottle{width:55px}.donut-tiara{filter:drop-shadow(0 1px 2px #fff6)}.donut-shades{transform-origin:202px 110px;animation:donut-attitude 7s ease-in-out infinite}@keyframes donut-attitude{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-2deg)}94%{transform:rotate(1deg)}}
@media(max-width:740px){.capacity-12 .bottle{height:325px}.capacity-16 .bottle{height:405px}.capacity-12,.capacity-16{min-height:430px;gap:24px 11px}.capacity-12 .bottle-wrap,.capacity-16 .bottle-wrap{width:51px}.capacity-12 .bottle,.capacity-16 .bottle{width:47px}}

/* v0.4: only the two bottles participating in each pour are occupied. */
.bottle.pouring{cursor:progress}.bottle.pouring:hover{transform:none}.bottle-wrap:has(.pouring) .bottle-index{color:#f9d887;text-shadow:0 0 8px #ffe69366}

/* v0.4 container silhouettes. Shape changes leave game units and capacities intact. */
.skin-beaker .bottle-wrap{width:85px}.skin-beaker .bottle{width:76px;height:142px}.skin-beaker .glass{inset:12px 0 0;border-radius:3px 3px 9px 9px}.skin-beaker .rim{top:7px;height:9px;left:-5px;right:-4px;border-radius:3px 9px 2px 3px;clip-path:polygon(0 0,100% 0,96% 100%,8% 100%)}.skin-beaker .glass:before{right:8px;top:22px;bottom:20px;width:12px;border-radius:0;background:repeating-linear-gradient(0deg,transparent 0 16px,#fff8 16px 18px,transparent 18px 27px);box-shadow:none}.skin-beaker .liquid-stack{border-radius:0 0 5px 5px}
.skin-flask .bottle-wrap{width:88px}.skin-flask .bottle{width:81px;height:157px}.skin-flask .glass{inset:9px 0 0;border-radius:8px 8px 16px 16px;clip-path:polygon(33% 0,67% 0,67% 29%,100% 90%,94% 100%,6% 100%,0 90%,33% 29%);background:linear-gradient(105deg,#ffffff50,transparent 28%,#c9caff0d 75%,#ffffff60);box-shadow:inset 2px -3px 6px #e1dfff66}.skin-flask .rim{left:30%;right:30%;top:4px}.skin-flask .liquid-stack{left:3px;right:3px;border-radius:0 0 10px 10px}.skin-flask .glass:after{left:22%;transform:rotate(12deg);bottom:8px;top:43%;background:#ffffff60}
.skin-orb .bottle-wrap{width:87px}.skin-orb .bottle{width:80px;height:157px}.skin-orb .glass{inset:9px 0 0;border-radius:30px 30px 42px 42px;clip-path:polygon(35% 0,65% 0,65% 27%,84% 39%,96% 56%,100% 74%,94% 90%,78% 98%,50% 100%,22% 98%,6% 90%,0 74%,4% 56%,16% 39%,35% 27%)}.skin-orb .rim{left:32%;right:32%;top:4px}.skin-orb .glass:after{left:15%;top:43%;bottom:18%;width:7px;transform:rotate(12deg)}.skin-orb .glass:before{right:11%;top:51%;bottom:20%;width:4px}.skin-orb .liquid-stack{border-radius:0 0 40px 40px}
.skin-jar .bottle-wrap{width:83px}.skin-jar .bottle{width:75px;height:133px}.skin-jar .glass{inset:12px 0 0;border-radius:12px 12px 18px 18px}.skin-jar .rim{left:2px;right:2px;top:3px;height:15px;border-radius:4px;background:repeating-linear-gradient(0deg,#a9a1c0 0 2px,#6c617f 2px 4px);border-color:#ded5ef}.skin-jar .liquid-stack{border-radius:0 0 12px 12px}.skin-jar .bottle.complete .rim{background:repeating-linear-gradient(0deg,#fbd879 0 2px,#c18b3d 2px 4px)}
.board.capacity-6 .bottle{height:223px}.board.capacity-8 .bottle{height:291px}.board.capacity-12 .bottle{height:365px}.board.capacity-16 .bottle{height:445px}.board.capacity-5 .bottle{height:187px}
/* A lifted clone keeps the same silhouette outside the board's skin selector. */
.pour-ghost.vessel-beaker .glass{inset:12px 0 0;border-radius:3px 3px 9px 9px}.pour-ghost.vessel-beaker .rim{top:7px;height:9px;border-radius:3px}.pour-ghost.vessel-flask .glass{border-radius:8px 8px 16px 16px;clip-path:polygon(33% 0,67% 0,67% 29%,100% 90%,94% 100%,6% 100%,0 90%,33% 29%)}.pour-ghost.vessel-flask .rim{left:30%;right:30%}.pour-ghost.vessel-orb .glass{border-radius:30px 30px 42px 42px;clip-path:polygon(35% 0,65% 0,65% 27%,84% 39%,96% 56%,100% 74%,94% 90%,78% 98%,50% 100%,22% 98%,6% 90%,0 74%,4% 56%,16% 39%,35% 27%)}.pour-ghost.vessel-orb .rim{left:32%;right:32%}.pour-ghost.vessel-jar .glass{inset:12px 0 0;border-radius:12px 12px 18px 18px}.pour-ghost.vessel-jar .rim{left:2px;right:2px;height:15px;border-radius:4px;background:repeating-linear-gradient(0deg,#a9a1c0 0 2px,#6c617f 2px 4px)}.pour-ghost.vessel-round .glass{border-radius:8px 8px 26px 26px}.pour-ghost.vessel-royal .glass{border-color:#d9b57299}
@media(max-width:740px){.skin-beaker .bottle-wrap,.skin-flask .bottle-wrap,.skin-orb .bottle-wrap,.skin-jar .bottle-wrap{width:64px}.skin-beaker .bottle,.skin-flask .bottle,.skin-orb .bottle,.skin-jar .bottle{width:60px}.skin-beaker .bottle{height:130px}.skin-flask .bottle,.skin-orb .bottle{height:145px}.skin-jar .bottle{height:125px}.board.capacity-5 .bottle{height:169px}.board.capacity-6 .bottle{height:201px}.board.capacity-8 .bottle{height:265px}.board.capacity-12 .bottle{height:325px}.board.capacity-16 .bottle{height:405px}}

/* v0.5: receiving bottles remain interactive. */
.bottle.pouring{cursor:pointer}.bottle{touch-action:manipulation}

/* v0.6 mobile and achievement accessibility */
.achievement-summary{grid-column:1/-1;color:#d7cbe8;line-height:1.7}.loot-card progress{display:block;width:100%;height:8px;accent-color:#f3cf72;margin:16px 0 8px}.loot-card.earned{border-color:#f3cf7277;background:linear-gradient(135deg,#392b47,#211a36)}
button{touch-action:manipulation;min-height:44px}.game-layout>*{min-width:0}.tabs{overflow-x:auto}.stats{flex-wrap:wrap}.shell{padding-bottom:env(safe-area-inset-bottom)}dialog{max-height:calc(100dvh - 32px);overflow-y:auto}.tools button{min-height:58px}.board{touch-action:pan-y}.brand small{white-space:nowrap}
@media(max-width:540px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}.tools button{font-size:11px}.game-top{flex-wrap:wrap;gap:12px}.stats{gap:10px}.stats .text-btn{font-size:11px}.tabs button{min-height:48px}.cards{grid-template-columns:1fr}.loot-card p,.muted{font-size:12px}aside{grid-template-columns:1fr}.game-bottom{gap:8px;flex-wrap:wrap}.game-bottom button{font-size:11px}.intro{overflow:hidden}.mascots{flex-shrink:0}.bottle-wrap{flex-shrink:0}.board{gap:24px 12px;padding-left:12px;padding-right:12px}.mode-switch button{min-height:44px}}
@media(max-width:360px){.shell{padding-left:8px;padding-right:8px}.brand{font-size:12px}.mascots{width:132px}.intro p{max-width:165px}.stats{font-size:10px}}