:root{--bg:#06101f;--bg2:#09192f;--text:#f7fbff;--muted:#8fa4bd;--line:rgba(255,255,255,.1);--glass:rgba(255,255,255,.065);--cyan:#55e4ff;--purple:#9c7cff;--pink:#ff6cb5;--amber:#ffcb67;--green:#62e6a8;--danger:#ff6c84}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#153967 0,#08182d 32%,#050d19 70%);color:var(--text);font-family:Manrope,system-ui,sans-serif}body{overflow-x:hidden}.app-shell{min-height:100vh;position:relative;z-index:2}.ambient{position:fixed;border-radius:50%;filter:blur(85px);opacity:.16;pointer-events:none}.ambient-a{width:420px;height:420px;background:#4d69ff;top:-100px;right:-150px}.ambient-b{width:370px;height:370px;background:#b455ff;bottom:-140px;left:-160px}.noise{position:fixed;inset:0;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}.screen{display:none;min-height:100vh;padding:0 clamp(20px,5vw,72px) 40px}.screen-active{display:block;animation:screenIn .35s ease}.topbar,.game-topbar{height:92px;display:flex;align-items:center;justify-content:space-between}.brand{border:0;background:none;color:#fff;display:flex;gap:11px;align-items:center;font:800 14px Outfit;letter-spacing:2px;cursor:pointer}.brand-orb{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 20deg,var(--cyan),var(--purple),var(--pink),var(--amber),var(--cyan));box-shadow:0 0 22px rgba(85,228,255,.45);position:relative}.brand-orb:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#081629}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn,.round-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(12px)}.profile-pill{height:42px;border:1px solid var(--line);border-radius:24px;background:var(--glass);color:#fff;padding:4px 13px 4px 5px;display:flex;gap:8px;align-items:center;cursor:pointer}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#5664ff,#a55dff);font-weight:800}.hero-grid{min-height:570px;max-width:1240px;margin:20px auto 0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px}.hero-copy{padding:35px 0}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:800;color:#a8bcd3;display:inline-flex;align-items:center;gap:8px}.eyebrow>span{width:22px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:4px}.hero-copy h1,.section-heading h2{font-family:Outfit,sans-serif;letter-spacing:-3px;margin:16px 0 20px;line-height:.92}.hero-copy h1{font-size:clamp(66px,8vw,112px)}.hero-copy h1 em{font-style:normal;background:linear-gradient(100deg,#54e1ff,#927cff 46%,#ff73bd);-webkit-background-clip:text;color:transparent}.hero-copy>p{max-width:590px;color:#9db0c7;line-height:1.7;font-size:16px}.hero-actions{display:flex;gap:12px;margin:34px 0}.btn{height:52px;border-radius:16px;padding:0 22px;border:1px solid transparent;font-weight:800;font-family:Manrope;cursor:pointer;color:#fff}.btn-primary{background:linear-gradient(105deg,#536cfb,#9b63ff);box-shadow:0 14px 38px rgba(92,92,255,.24)}.btn-primary:hover{transform:translateY(-2px)}.btn-glass{background:rgba(255,255,255,.06);border-color:var(--line)}.full{width:100%}.mini-stats{display:flex;gap:45px;margin-top:42px}.mini-stats div{display:flex;flex-direction:column}.mini-stats strong{font:700 23px Outfit}.mini-stats span{font-size:11px;color:var(--muted);margin-top:3px}.hero-art{height:500px;position:relative;perspective:900px}.halo{position:absolute;border-radius:50%;filter:blur(2px)}.halo-one{width:330px;height:330px;background:radial-gradient(circle,rgba(102,102,255,.2),transparent 68%);top:90px;left:70px}.halo-two{width:250px;height:250px;border:1px solid rgba(100,223,255,.12);top:125px;left:112px}.hero-bottle{width:110px;height:290px;border:2px solid rgba(211,239,255,.28);border-top-width:1px;border-radius:22px 22px 34px 34px;position:absolute;bottom:65px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.01) 30%,rgba(255,255,255,.06));box-shadow:inset 12px 0 25px rgba(255,255,255,.025),0 30px 60px rgba(0,0,0,.25);transform-origin:bottom}.hero-bottle:before{content:"";position:absolute;width:62px;height:43px;border:2px solid rgba(211,239,255,.28);border-bottom:0;border-radius:8px 8px 0 0;top:-35px;left:22px}.hero-bottle i{position:absolute;width:8px;height:230px;left:13px;top:30px;background:linear-gradient(180deg,rgba(255,255,255,.38),transparent);border-radius:20px;opacity:.35}.hero-bottle .liquid{position:absolute;left:5px;right:5px;height:34%;bottom:4px;border-radius:8px 8px 26px 26px;box-shadow:inset 0 5px 12px rgba(255,255,255,.18)}.hero-bottle .liquid:nth-child(2){bottom:34%;border-radius:6px}.l-pink{background:linear-gradient(#ff85c3,#ed4ca0)}.l-cyan{background:linear-gradient(#78ebff,#28bddb)}.l-purple{background:linear-gradient(#b291ff,#7651e7)}.l-amber{background:linear-gradient(#ffd976,#f2a947)}.l-green{background:linear-gradient(#7bf0be,#3fc88d)}.bottle-a{left:50px;transform:rotate(-8deg);animation:float1 5.5s ease-in-out infinite}.bottle-b{left:190px;height:335px;bottom:55px;z-index:2;animation:float2 6s ease-in-out infinite}.bottle-c{left:340px;transform:rotate(7deg);animation:float1 6.5s ease-in-out infinite reverse}.float-dot{position:absolute;border-radius:50%;filter:blur(.2px);box-shadow:0 0 24px currentColor;animation:drift 5s ease-in-out infinite}.d1{width:8px;height:8px;background:var(--pink);color:var(--pink);left:55px;top:80px}.d2{width:5px;height:5px;background:var(--cyan);color:var(--cyan);right:65px;top:130px}.d3{width:6px;height:6px;background:var(--purple);color:var(--purple);left:245px;bottom:48px}.mode-row{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mode-card{min-height:130px;text-align:left;display:grid;grid-template-columns:46px 1fr 20px;gap:13px;align-items:center;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.045);color:#fff;padding:20px;cursor:pointer;transition:.2s}.mode-card:hover{background:rgba(255,255,255,.075);transform:translateY(-3px)}.mode-card.daily{background:linear-gradient(125deg,rgba(83,111,255,.16),rgba(164,91,255,.10));border-color:rgba(135,124,255,.3)}.mode-icon{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#89dcff}.mode-card small{font-size:9px;letter-spacing:1.5px;color:#7990aa}.mode-card strong{display:block;font:700 17px Outfit;margin:4px 0}.mode-card p{margin:0;font-size:11px;color:var(--muted)}.arrow{color:#879bb2}.panel-wrap{max-width:1100px;margin:40px auto}.panel-wrap.narrow{max-width:920px}.section-heading{text-align:center;margin:55px auto 48px}.section-heading h2{font-size:clamp(46px,6vw,72px)}.section-heading p{color:var(--muted)}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.difficulty-card{height:380px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.045);color:#fff;padding:25px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:.25s}.difficulty-card:hover{transform:translateY(-6px);border-color:rgba(120,207,255,.35)}.difficulty-card.featured{background:linear-gradient(150deg,rgba(84,95,255,.15),rgba(154,93,255,.11))}.recommended{position:absolute;right:18px;top:17px;font-size:8px;letter-spacing:1.4px;background:#7969ff;border-radius:20px;padding:6px 9px}.difficulty-card small{font-size:9px;letter-spacing:1.8px;color:#8da2ba}.difficulty-card strong{display:block;font:700 30px Outfit;margin-top:7px}.difficulty-card p{font-size:12px;color:#b2c3d5}.difficulty-card em{font-style:normal;color:#758aa3;font-size:11px}.difficulty-art{height:190px;display:flex;gap:7px;align-items:flex-end;justify-content:center;padding-bottom:24px}.difficulty-art span{width:31px;height:100px;border:1px solid rgba(255,255,255,.25);border-radius:8px 8px 13px 13px;background:linear-gradient(to top,#55d8ff 0 25%,#966cff 25% 50%,#ff6fb4 50% 75%,rgba(255,255,255,.03) 75%)}.medium-art span:nth-child(2n){height:125px;background:linear-gradient(to top,#fbc765 0 25%,#58e5aa 25% 50%,#55d8ff 50% 75%,#966cff 75%)}.hard-art span{width:25px;height:130px}.hard-art span:nth-child(odd){background:linear-gradient(to top,#ff6fb4 0 25%,#fbc765 25% 50%,#966cff 50% 75%,#55d8ff 75%)}.game-screen{padding-bottom:25px}.game-topbar{max-width:1040px;margin:auto}.game-title{text-align:center;display:flex;flex-direction:column}.game-title small{font-size:9px;letter-spacing:1.8px;color:#7f95ad}.game-title strong{font:600 14px Outfit;margin-top:4px}.game-meta{display:flex;justify-content:center;gap:27px;align-items:center;margin:10px 0 0}.game-meta div:not(.meta-divider){text-align:center;min-width:70px}.game-meta span{font-size:8px;letter-spacing:1.5px;color:#70869f;display:block}.game-meta strong{font:700 19px Outfit}.meta-divider{width:1px;height:27px;background:var(--line)}.game-stage{max-width:1000px;min-height:525px;margin:12px auto 0;position:relative;display:grid;place-items:center}.stage-glow{position:absolute;width:70%;height:60%;background:radial-gradient(ellipse,rgba(88,80,255,.11),transparent 66%);filter:blur(15px)}.bottle-board{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:36px 28px;position:relative;z-index:1;padding:30px}.game-bottle{width:68px;height:202px;border:2px solid rgba(204,236,255,.26);border-radius:13px 13px 24px 24px;position:relative;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 35%,rgba(255,255,255,.04));cursor:pointer;transition:transform .2s,filter .2s;box-shadow:inset 9px 0 17px rgba(255,255,255,.025),0 20px 30px rgba(0,0,0,.15);padding:4px;display:flex;flex-direction:column-reverse;overflow:visible}.game-bottle:before{content:"";position:absolute;width:38px;height:29px;border:2px solid rgba(204,236,255,.26);border-bottom:0;border-radius:6px 6px 0 0;top:-25px;left:13px}.game-bottle:after{content:"";position:absolute;left:9px;top:18px;width:5px;height:145px;border-radius:10px;background:linear-gradient(rgba(255,255,255,.3),transparent);opacity:.32;z-index:3}.game-bottle.selected{transform:translateY(-18px);filter:drop-shadow(0 0 12px rgba(114,217,255,.42))}.game-bottle.hint{animation:hintPulse .8s ease 2}.segment{height:25%;width:100%;position:relative;box-shadow:inset 0 4px 8px rgba(255,255,255,.12);transition:.25s}.segment:first-child{border-radius:0 0 18px 18px}.segment:last-child{border-radius:5px 5px 0 0}.segment:after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.15);border-radius:50%}.game-controls{display:flex;justify-content:center;gap:11px;margin-top:-8px}.control-btn{min-width:100px;height:44px;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:14px;color:#9eb1c6;font-weight:700;cursor:pointer}.control-btn span{margin-right:7px;color:#d8e9f8}.main-control{background:linear-gradient(120deg,rgba(83,105,255,.18),rgba(145,94,255,.13));color:#dfe7ff;border-color:rgba(126,113,255,.25)}.game-tip{text-align:center;color:#657c96;font-size:10px;margin-top:15px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{border:1px solid var(--line);border-radius:20px;background:var(--glass);padding:24px}.stat-card span{font-size:9px;letter-spacing:1.4px;color:#7e94ac}.stat-card strong{display:block;font:700 35px Outfit;margin:8px 0}.stat-card small{color:#71869f}.leaderboard{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.035)}.leader-row{display:grid;grid-template-columns:45px 1fr auto;align-items:center;padding:17px 21px;border-bottom:1px solid var(--line)}.leader-row:last-child{border-bottom:0}.leader-rank{font:700 17px Outfit;color:#7e94aa}.leader-name{display:flex;align-items:center;gap:11px;font-weight:700}.leader-score{text-align:right}.leader-score strong{display:block}.leader-score span{font-size:9px;color:#748aa2}.modal-backdrop{position:fixed;inset:0;background:rgba(1,7,16,.74);backdrop-filter:blur(16px);z-index:20;display:grid;place-items:center;padding:20px}.hidden{display:none!important}.modal{width:min(420px,100%);background:linear-gradient(155deg,#10223d,#0a172a);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:32px;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.45)}.modal-close{position:absolute;right:18px;top:14px;background:none;border:0;color:#8fa4bb;font-size:24px;cursor:pointer}.modal small{font-size:9px;letter-spacing:1.8px;color:#7e95ad}.modal h3{font:700 30px Outfit;margin:8px 0 10px}.modal p{color:#8fa4bd;font-size:13px;line-height:1.6}.modal input{width:100%;height:49px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.055);color:white;padding:0 15px;outline:none;margin:10px 0 13px}.win-modal{text-align:center}.win-burst{font-size:40px;color:#78dfff;text-shadow:0 0 30px #7a73ff;margin-bottom:10px;animation:winSpin 2.5s ease-in-out infinite}.score-reveal{border:1px solid var(--line);border-radius:18px;padding:14px;margin:20px 0}.score-reveal span{font-size:9px;letter-spacing:1.5px;color:#788ea7;display:block}.score-reveal strong{font:800 36px Outfit}.text-btn{background:none;border:0;color:#8298b1;margin-top:15px;cursor:pointer}@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes float1{50%{transform:translateY(-13px) rotate(-5deg)}}@keyframes float2{50%{transform:translateY(-18px) rotate(2deg)}}@keyframes drift{50%{transform:translate(15px,-16px);opacity:.55}}@keyframes hintPulse{50%{transform:translateY(-15px);filter:drop-shadow(0 0 15px #6ddcff)}}@keyframes winSpin{50%{transform:rotate(90deg) scale(1.2)}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;min-height:0}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.mini-stats{justify-content:center}.hero-art{height:390px;max-width:500px;width:100%;margin:auto;transform:scale(.82)}.mode-row,.difficulty-grid{grid-template-columns:1fr}.difficulty-card{height:260px;display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto auto auto auto;column-gap:15px;align-content:center}.difficulty-art{grid-row:1/5;height:200px}.recommended{z-index:3}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.screen{padding-left:16px;padding-right:16px}.topbar{height:74px}.profile-pill #playerNameTop{display:none}.profile-pill{padding-right:5px}.hero-grid{margin-top:0}.hero-copy{padding-top:35px}.hero-copy h1{font-size:65px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.mini-stats{gap:20px}.mini-stats div{flex:1}.hero-art{height:330px;transform:scale(.66);transform-origin:top center;margin-bottom:-95px}.mode-row{margin-top:0}.mode-card{min-height:112px}.section-heading{margin:38px auto 30px}.section-heading h2{font-size:48px}.difficulty-card{height:215px;grid-template-columns:120px 1fr;padding:15px}.difficulty-art{height:160px;transform:scale(.78)}.game-topbar{height:70px}.game-stage{min-height:475px}.bottle-board{gap:33px 17px;padding:32px 4px}.game-bottle{width:52px;height:165px}.game-bottle:before{width:28px;height:25px;left:10px;top:-22px}.game-bottle:after{height:120px;left:7px}.game-controls{gap:7px}.control-btn{min-width:0;flex:1}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{padding:18px}.stat-card strong{font-size:29px}}

/* ===== PrismPour V2: liquid motion, prism bonuses, pour animation, fail state ===== */
.moves-left{display:block!important;font-size:7px!important;letter-spacing:.55px!important;color:#536d88!important;margin-top:2px}.icon-btn.muted{opacity:.48}.game-stage{overflow:visible}.bottle-board{isolation:isolate}.game-bottle{transform-origin:50% 100%;will-change:transform}.game-bottle.pour-source-hidden{opacity:.10;transition:opacity .12s}.segment{overflow:hidden;isolation:isolate;animation:liquidBreath 2.8s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.segment:before{content:"";position:absolute;left:-20%;right:-20%;top:-7px;height:14px;border-radius:45%;background:rgba(255,255,255,.24);filter:blur(.2px);animation:surfaceWave 2.2s ease-in-out infinite alternate;z-index:2}.segment:after{height:7px!important;background:radial-gradient(ellipse,rgba(255,255,255,.42),rgba(255,255,255,.06) 52%,transparent 67%)!important;animation:liquidShine 2.9s ease-in-out infinite}.segment.prism{background-size:220% 220%!important;animation:prismFlow 3.2s linear infinite,liquidBreath 2.4s ease-in-out infinite alternate;box-shadow:inset 0 4px 10px rgba(255,255,255,.24),0 0 12px rgba(111,225,255,.12)}.segment.prism:before{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.65),rgba(255,255,255,.15));}.game-bottle.prism-complete{filter:drop-shadow(0 0 12px rgba(124,219,255,.34)) drop-shadow(0 0 20px rgba(215,112,255,.18))}.game-bottle.prism-complete:before{border-color:rgba(202,235,255,.52)}
.wild-status{position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:1.35px;font-weight:800;color:#9eb5cc;background:rgba(9,24,43,.64);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 11px;z-index:4;backdrop-filter:blur(12px);white-space:nowrap}.prism-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:linear-gradient(135deg,#ff6fca,#8b7cff,#55e8ff,#6bf0ad,#ffd66e);box-shadow:0 0 10px rgba(111,225,255,.55);animation:prismFlow 2.2s linear infinite;background-size:250% 250%}
.pour-clone{position:absolute!important;margin:0!important;z-index:20!important;pointer-events:none!important;transition:transform .22s cubic-bezier(.2,.9,.25,1),filter .2s!important}.pour-clone.pour-right{transform:translate(var(--pour-x),var(--pour-y)) rotate(76deg)!important}.pour-clone.pour-left{transform:translate(var(--pour-x),var(--pour-y)) rotate(-76deg)!important}.pour-clone.pouring{filter:drop-shadow(0 0 17px rgba(117,218,255,.28))}.pour-stream{position:absolute;width:13px;height:0;top:-10px;left:50%;border-radius:50% 50% 9px 9px;transform:translateX(-50%);opacity:0;box-shadow:0 0 10px currentColor;transition:height .22s ease,opacity .12s}.pour-clone.pouring .pour-stream{height:84px;opacity:.92;animation:streamPulse .22s ease-in-out infinite alternate}.pour-stream.prism-stream{background-size:250% 250%!important;animation:prismFlow 1s linear infinite,streamPulse .22s ease-in-out infinite alternate!important}.pour-clone.pour-right .pour-stream{left:32%;top:-13px}.pour-clone.pour-left .pour-stream{left:68%;top:-13px}
.game-toast{position:absolute;left:50%;bottom:24px;transform:translate(-50%,12px) scale(.96);opacity:0;pointer-events:none;z-index:30;font:800 10px Outfit;letter-spacing:1.7px;color:#d7e9fa;border:1px solid rgba(255,255,255,.12);background:rgba(8,21,39,.84);backdrop-filter:blur(16px);border-radius:999px;padding:10px 15px;transition:.25s}.game-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.game-toast.bonus{color:#fff;border-color:rgba(140,211,255,.28);background:linear-gradient(110deg,rgba(118,80,255,.75),rgba(41,174,204,.68));box-shadow:0 10px 40px rgba(84,94,255,.18)}.bonus-pop{animation:bonusPop 1.15s cubic-bezier(.18,.9,.2,1)}
.lose-modal{text-align:center;overflow:hidden}.lose-modal:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,94,131,.13),transparent 68%);left:50%;top:-95px;transform:translateX(-50%);pointer-events:none}.lose-icon{height:58px;display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:0 auto 10px;transform:rotate(6deg)}.lose-icon span{width:16px;height:45px;border:1.5px solid rgba(230,242,255,.3);border-radius:5px 5px 9px 9px;background:linear-gradient(to top,#ff6c84 0 42%,rgba(255,255,255,.02) 43%)}.lose-icon span:nth-child(2){height:54px;transform:translateY(7px) rotate(-13deg);background:linear-gradient(to top,#8a6cf2 0 34%,#4dd3ee 35% 66%,rgba(255,255,255,.02) 67%)}.lose-icon span:nth-child(3){height:41px;transform:rotate(10deg);background:linear-gradient(to top,#f6be55 0 55%,rgba(255,255,255,.02) 56%)}.lose-copy{font-size:11px!important;color:#6f879f!important;margin-top:-4px}.retry-btn{margin-top:20px}
@keyframes liquidBreath{0%{filter:saturate(1) brightness(.98)}100%{filter:saturate(1.18) brightness(1.08)}}@keyframes surfaceWave{0%{transform:translateX(-4%) rotate(-1deg) scaleX(.96)}100%{transform:translateX(5%) rotate(1deg) scaleX(1.05)}}@keyframes liquidShine{50%{transform:translateX(8%) scaleX(.86);opacity:.7}}@keyframes prismFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}@keyframes streamPulse{from{width:10px;filter:brightness(1)}to{width:14px;filter:brightness(1.18)}}@keyframes bonusPop{0%{transform:scale(1)}20%{transform:translateY(-20px) scale(1.08);filter:drop-shadow(0 0 18px #70ddff)}45%{transform:translateY(-10px) scale(.98)}70%{transform:translateY(-16px) scale(1.04);filter:drop-shadow(0 0 22px #d879ef)}100%{transform:none}}@media(max-width:600px){.wild-status{top:5px}.game-toast{bottom:5px}.pour-clone.pour-right{transform:translate(var(--pour-x),var(--pour-y)) rotate(72deg)!important}.pour-clone.pour-left{transform:translate(var(--pour-x),var(--pour-y)) rotate(-72deg)!important}.pour-clone.pouring .pour-stream{height:68px}}

/* ===== PrismPour V2.2: destination-aware bottle travel ===== */
.pour-clone-v21{position:absolute!important;margin:0!important;z-index:30!important;pointer-events:none!important;transform-origin:50% 100%!important;will-change:left,top,transform,filter!important;transition:none!important}
.pour-stream-board{position:absolute;z-index:29;width:10px;height:0;border-radius:7px;opacity:0;pointer-events:none;transform-origin:top center;box-shadow:0 0 12px rgba(255,255,255,.18);transition:height .11s ease,opacity .08s ease;will-change:height,opacity}
.pour-stream-board.active{height:66px;opacity:.94;animation:streamPulse .18s ease-in-out infinite alternate}
.pour-stream-board.prism-stream.active{background-size:250% 250%!important;animation:prismFlow .9s linear infinite,streamPulse .18s ease-in-out infinite alternate!important}
@media(max-width:600px){.pour-stream-board.active{height:52px}}

/* ===== PrismPour V2.3: softer Prism liquid, rewards, power-ups ===== */
.segment.prism{
  background-size:100% 100%!important;
  animation:liquidBreath 3.8s ease-in-out infinite alternate!important;
  box-shadow:inset 0 4px 12px rgba(255,255,255,.2),0 0 13px rgba(111,225,255,.13);
}
.segment.prism:before{
  left:8%;right:auto;top:13%;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.52)!important;
  box-shadow:20px 15px 0 -2px rgba(255,255,255,.26),34px -3px 0 -3px rgba(255,255,255,.42);
  animation:prismBubbles 3.6s ease-in-out infinite!important;
}
.segment.prism:after{
  content:""!important;position:absolute!important;width:6px!important;height:6px!important;left:55%!important;top:55%!important;border-radius:50%!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:12px 13px 0 -2px rgba(255,255,255,.26),-19px 10px 0 -1px rgba(255,255,255,.2)!important;
  animation:prismBubblesAlt 4.4s ease-in-out infinite!important;
}
.prism-dot{background:linear-gradient(135deg,#ff70c7,#9b78ff 28%,#58e6ff 52%,#69e7ae 76%,#ffd56c)!important;background-size:100% 100%!important;animation:prismDotPulse 2.8s ease-in-out infinite!important}
@keyframes prismBubbles{0%,100%{transform:translateY(7px) scale(.82);opacity:.45}50%{transform:translateY(-5px) scale(1.08);opacity:.8}}
@keyframes prismBubblesAlt{0%,100%{transform:translate(0,6px) scale(.9);opacity:.34}50%{transform:translate(3px,-7px) scale(1.1);opacity:.68}}
@keyframes prismDotPulse{50%{transform:scale(1.22);filter:brightness(1.14)}}

.powerup-bar{display:flex;justify-content:center;gap:10px;margin:10px auto 0;flex-wrap:wrap}.powerup-btn{height:42px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.055);color:#eaf7ff;padding:0 10px 0 7px;display:flex;align-items:center;gap:7px;font:700 10px Manrope;letter-spacing:.2px;cursor:pointer;backdrop-filter:blur(12px);transition:.2s}.powerup-btn:hover{transform:translateY(-2px);border-color:rgba(110,220,255,.28)}.powerup-btn.empty{opacity:.48}.powerup-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(85,228,255,.18),rgba(156,124,255,.22));font-size:17px}.powerup-btn b{min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.1);font:800 10px Outfit}.menu-stack{display:grid;gap:9px;margin:18px 0 4px}.game-menu-modal{text-align:center}.reward-modal{text-align:center}.reward-burst{font-size:44px;color:#80eaff;text-shadow:0 0 28px #a269ff;animation:rewardFloat 1.6s ease-in-out infinite}.reward-chip{margin:18px 0;padding:14px 16px;border-radius:16px;border:1px solid rgba(117,225,255,.22);background:linear-gradient(135deg,rgba(85,228,255,.09),rgba(156,124,255,.11),rgba(255,108,181,.08));font:800 14px Outfit;letter-spacing:.4px;color:#dffaff}.mini-stats{flex-wrap:wrap}.mini-stats>div{min-width:90px}.game-controls{flex-wrap:wrap}.game-controls .control-btn{flex:1}.game-tip{margin-top:10px}@keyframes rewardFloat{50%{transform:translateY(-5px) rotate(8deg) scale(1.1)}}
@media(max-width:600px){.powerup-bar{gap:7px}.powerup-btn{font-size:9px;padding-right:8px}.powerup-icon{width:26px;height:26px}.game-controls{display:grid!important;grid-template-columns:repeat(4,1fr)!important}.game-controls .control-btn{font-size:9px!important;padding-left:4px!important;padding-right:4px!important}.game-controls .control-btn span{font-size:17px!important}}

/* ===== PrismPour V2.4: staged liquid fill + in-game logo ===== */
.game-title{gap:2px;align-items:center}.game-brand-mark{display:flex;align-items:center;gap:7px;font:800 10px Outfit;letter-spacing:1.7px;color:#eef9ff;margin-bottom:2px}.game-brand-mark .brand-orb{width:15px;height:15px;box-shadow:0 0 14px rgba(85,228,255,.36)}.game-brand-mark .brand-orb:after{inset:4px}.liquid-fill-preview{position:absolute;inset:4px;pointer-events:none;z-index:2;overflow:hidden;border-radius:8px 8px 18px 18px}.fill-unit{position:absolute;left:0;right:0;height:25%;transform:scaleY(0);transform-origin:bottom center;box-shadow:inset 0 4px 9px rgba(255,255,255,.16);overflow:hidden}.fill-unit:before{content:"";position:absolute;left:-18%;right:-18%;top:-6px;height:13px;border-radius:48%;background:rgba(255,255,255,.27);animation:surfaceWave 1.1s ease-in-out infinite alternate}.fill-unit.prism:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;left:22%;bottom:14%;background:rgba(255,255,255,.5);box-shadow:21px -5px 0 -2px rgba(255,255,255,.35),31px 8px 0 -2px rgba(255,255,255,.25);animation:prismBubbles 2s ease-in-out infinite}.fill-unit:first-child{border-radius:0 0 17px 17px}.fill-unit:last-child{border-radius:5px 5px 0 0}
@media(max-width:600px){.game-brand-mark{font-size:9px;letter-spacing:1.35px}.game-brand-mark .brand-orb{width:13px;height:13px}.game-title small{font-size:7px}.game-title strong{font-size:11px}}

/* ===== PrismPour V2.5: audio controls + continuous liquid rendering ===== */
.game-top-actions{display:flex;align-items:center;gap:9px}.game-volume-control{height:42px;display:flex;align-items:center;gap:7px;padding:0 9px 0 0;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}.game-volume-control .round-btn{width:40px;height:40px;border:0;background:transparent}.game-volume-control input[type=range]{width:92px;accent-color:#8d72ff;cursor:pointer}.game-volume-control>span{min-width:31px;font:700 9px Outfit;color:#8fa7c1;letter-spacing:.2px}.volume-mute.muted{opacity:.48}
/* Liquid should read as one continuous column, not four inset tiles. */
.segment{box-shadow:none!important;border-radius:0!important;transition:height .18s ease,opacity .18s ease!important}
.segment:first-child{border-radius:0 0 18px 18px!important}
.segment:last-child{border-radius:7px 7px 0 0!important}
.segment:before,.segment:after{display:none!important}
/* Only the exposed top surface gets a liquid meniscus/highlight. */
.segment:last-child:before{display:block!important;content:"";position:absolute;left:-18%;right:-18%;top:-7px;height:14px;border-radius:48%;background:rgba(255,255,255,.25)!important;filter:blur(.2px);animation:surfaceWave 2.2s ease-in-out infinite alternate;z-index:2}
.segment:last-child:after{display:block!important;content:"";position:absolute;top:-1px;left:4%;right:4%;height:5px!important;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.34),rgba(255,255,255,.05) 58%,transparent 72%)!important;animation:liquidShine 2.9s ease-in-out infinite}
/* Prism keeps subtle bubbles without restoring the old block-edge shadows. */
.segment.prism{box-shadow:none!important}
.segment.prism:last-child:before{left:8%;right:auto;top:13%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.52)!important;box-shadow:20px 15px 0 -2px rgba(255,255,255,.26),34px -3px 0 -3px rgba(255,255,255,.42);animation:prismBubbles 3.6s ease-in-out infinite!important}
.segment.prism:last-child:after{width:6px!important;height:6px!important;left:55%!important;right:auto!important;top:55%!important;border-radius:50%!important;background:rgba(255,255,255,.34)!important;box-shadow:12px 13px 0 -2px rgba(255,255,255,.26),-19px 10px 0 -1px rgba(255,255,255,.2)!important;animation:prismBubblesAlt 4.4s ease-in-out infinite!important}
.fill-unit{box-shadow:none!important;border-radius:0!important}.fill-unit:first-child{border-radius:0 0 17px 17px!important}.fill-unit:last-child{border-radius:6px 6px 0 0!important}.fill-unit:before{display:none!important}.fill-unit:last-child:before{display:block!important}
@media(max-width:700px){.game-volume-control{padding-right:6px}.game-volume-control input[type=range]{width:64px}.game-volume-control>span{display:none}.game-top-actions{gap:5px}}
@media(max-width:430px){.game-volume-control input[type=range]{width:48px}.game-volume-control{gap:2px}.game-volume-control .round-btn{width:34px}.game-top-actions>.round-btn{width:38px;height:38px}}


/* ===== PrismPour V2.6: sculpted bottle silhouette ===== */
/* A narrower neck, shoulder transition and rounded glass body make the play
   pieces read as bottles rather than straight test tubes. */
.game-bottle{
  width:76px;
  height:188px;
  margin-top:24px;
  border:2px solid rgba(204,236,255,.30);
  border-top-color:transparent;
  border-radius:24px 24px 30px 30px;
  padding:5px;
  clip-path:polygon(
    30% 0,70% 0,
    70% 10%,78% 14%,90% 21%,97% 30%,
    100% 38%,100% 88%,97% 94%,90% 98%,
    78% 100%,22% 100%,10% 98%,3% 94%,0 88%,
    0 38%,3% 30%,10% 21%,22% 14%,30% 10%
  );
  background:
    linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 30%,rgba(255,255,255,.055) 72%,rgba(255,255,255,.018)),
    rgba(8,21,42,.10);
  box-shadow:inset 10px 0 18px rgba(255,255,255,.028),0 20px 30px rgba(0,0,0,.15);
  overflow:hidden;
}
/* Bottle lip/rim. It lives inside the clipped neck so it also travels with
   cloned bottles during pour animations. */
.game-bottle:before{
  content:"";
  position:absolute;
  width:30px;
  height:8px;
  left:50%;
  top:1px;
  transform:translateX(-50%);
  border:2px solid rgba(218,242,255,.48);
  border-radius:5px;
  background:rgba(213,239,255,.055);
  box-shadow:0 2px 4px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.12);
  z-index:5;
}
/* Curved glass shine following the shoulder/body rather than a straight bar. */
.game-bottle:after{
  content:"";
  position:absolute;
  left:10px;
  top:38px;
  width:7px;
  height:112px;
  border-radius:70% 20% 40% 60%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 50%,transparent);
  transform:rotate(2deg);
  opacity:.34;
  z-index:4;
  pointer-events:none;
}

/* Let the fluid occupy the wider body while keeping a little glass edge. */
.game-bottle .layer{
  margin-left:0;
  margin-right:0;
}

/* Home-screen bottles get the same recognizable neck/shoulder language. */
.hero-bottle{
  border-radius:30px 30px 38px 38px;
  clip-path:polygon(28% 0,72% 0,72% 8%,79% 12%,90% 19%,97% 28%,100% 36%,100% 89%,96% 96%,86% 100%,14% 100%,4% 96%,0 89%,0 36%,3% 28%,10% 19%,21% 12%,28% 8%);
  overflow:hidden;
  border-top-color:transparent;
}
.hero-bottle:before{
  width:48px;
  height:12px;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  border:2px solid rgba(211,239,255,.40);
  border-radius:7px;
  background:rgba(220,244,255,.045);
  z-index:5;
}

@media(max-width:700px){
  .game-bottle{
    width:58px;
    height:158px;
    margin-top:20px;
    border-radius:19px 19px 23px 23px;
  }
  .game-bottle:before{
    width:23px;
    height:7px;
    top:1px;
  }
  .game-bottle:after{
    left:8px;
    top:32px;
    height:92px;
    width:5px;
  }
}


/* ===== PrismPour V2.7: true four-layer liquid chamber + organic fluid ===== */
.game-bottle{
  /* The neck/shoulders remain empty. The flex content area begins only where
     the bottle's main chamber starts, so four liquid units fit completely
     below the shoulders. */
  box-sizing:border-box;
  padding:52px 5px 5px;
  height:204px;
  width:76px;
  clip-path:polygon(
    34% 0,66% 0,66% 11%,70% 14%,82% 19%,92% 26%,98% 34%,
    100% 40%,100% 88%,97% 95%,88% 99%,75% 100%,25% 100%,
    12% 99%,3% 95%,0 88%,0 40%,2% 34%,8% 26%,18% 19%,30% 14%,34% 11%
  );
  border-radius:22px 22px 30px 30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.018) 24%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.075) 84%,rgba(255,255,255,.015)),
    rgba(8,21,42,.08);
}
.game-bottle:before{
  width:27px;
  height:9px;
  top:2px;
  border-color:rgba(225,245,255,.55);
}
.game-bottle:after{
  top:55px;
  height:112px;
}

/* Each unit is 25% of the BODY chamber, never of the neck. */
.segment{
  flex:0 0 25%;
  height:25%!important;
  min-height:0;
  width:100%;
  margin:0;
  overflow:hidden;
  position:relative;
  border-radius:0!important;
  box-shadow:none!important;
  background-size:180% 180%!important;
  animation:liquidDrift 5.8s ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
  filter:saturate(1.18) brightness(1.05);
  isolation:isolate;
}
/* Slight one-pixel overlap removes hairline seams without turning layers into tiles. */
.segment + .segment{margin-bottom:-1px}
.segment:first-child{border-radius:0 0 22px 22px!important}
.segment:last-child{border-radius:0!important}

/* Interior caustic light slowly drifts through every fluid band. */
.segment:after{
  display:block!important;
  content:"";
  position:absolute;
  inset:-18% -35%;
  background:
    radial-gradient(ellipse at 34% 45%,rgba(255,255,255,.17),transparent 27%),
    radial-gradient(ellipse at 72% 62%,rgba(255,255,255,.09),transparent 25%);
  transform:translate3d(-5%,0,0) rotate(-4deg);
  animation:liquidCaustic 4.6s ease-in-out infinite alternate;
  animation-delay:calc(var(--delay,0s) * .7);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.8;
}

/* Only the exposed top has a curved moving surface. Internal boundaries remain
   clean, flat fluid-to-fluid contact instead of separated game pieces. */
.segment:last-child:before{
  display:block!important;
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:-5px;
  height:11px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 55%,transparent)!important;
  filter:blur(.15px);
  animation:liquidSurface 1.7s ease-in-out infinite alternate;
  transform-origin:center;
  z-index:3;
}

/* Prism is bubbly/gradient rather than a fast sweep. */
.segment.prism{
  background-size:145% 145%!important;
  animation:prismFloat 7.5s ease-in-out infinite alternate,liquidBreath 3.6s ease-in-out infinite alternate!important;
}
.segment.prism:after{
  opacity:1;
  background:
    radial-gradient(circle at 18% 75%,rgba(255,255,255,.62) 0 3px,transparent 3.7px),
    radial-gradient(circle at 44% 43%,rgba(255,255,255,.38) 0 2px,transparent 2.8px),
    radial-gradient(circle at 76% 70%,rgba(255,255,255,.48) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 64% 24%,rgba(255,255,255,.25) 0 1.8px,transparent 2.4px);
  animation:prismBubbleRise 5s ease-in-out infinite;
  mix-blend-mode:screen;
}

/* Preview occupies exactly the same body chamber, so the animated incoming
   fluid never appears in the bottle neck. */
.liquid-fill-preview{
  left:5px!important;
  right:5px!important;
  top:52px!important;
  bottom:5px!important;
  border-radius:0 0 22px 22px!important;
  overflow:hidden;
}
.fill-unit{
  height:25%!important;
  box-shadow:none!important;
  border-radius:0!important;
  background-size:180% 180%!important;
  animation:liquidDrift 5.8s ease-in-out infinite alternate;
  filter:saturate(1.18) brightness(1.05);
}
.fill-unit:first-child{border-radius:0 0 22px 22px!important}
.fill-unit:last-child{border-radius:0!important}
.fill-unit:before{
  left:-10%;
  right:-10%;
  top:-5px;
  height:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.05) 55%,transparent)!important;
  animation:liquidSurface 1.7s ease-in-out infinite alternate!important;
}

/* Pouring clones inherit the exact same chamber proportions. */
.pour-clone-v21{padding-top:52px!important}

@keyframes liquidDrift{
  0%{background-position:12% 40%;filter:saturate(1.13) brightness(1.02)}
  45%{background-position:62% 52%;filter:saturate(1.25) brightness(1.08)}
  100%{background-position:92% 60%;filter:saturate(1.17) brightness(1.04)}
}
@keyframes liquidCaustic{
  0%{transform:translate3d(-8%,1%,0) rotate(-5deg) scale(1)}
  100%{transform:translate3d(10%,-3%,0) rotate(4deg) scale(1.08)}
}
@keyframes liquidSurface{
  0%{transform:translateX(-2%) scaleY(.72) rotate(-.6deg);opacity:.72}
  100%{transform:translateX(2%) scaleY(1.08) rotate(.6deg);opacity:.95}
}
@keyframes prismFloat{
  0%{background-position:18% 28%}
  50%{background-position:58% 56%}
  100%{background-position:82% 68%}
}
@keyframes prismBubbleRise{
  0%{transform:translateY(13px) scale(.88);opacity:.55}
  45%{opacity:1}
  100%{transform:translateY(-15px) scale(1.08);opacity:.5}
}

@media(max-width:700px){
  .game-bottle{
    width:60px;
    height:174px;
    padding:45px 4px 4px;
  }
  .game-bottle:before{width:22px;height:7px}
  .game-bottle:after{top:47px;height:98px}
  .liquid-fill-preview{left:4px!important;right:4px!important;top:45px!important;bottom:4px!important}
  .pour-clone-v21{padding-top:45px!important}
}


/* ===== PrismPour V2.8: square-neck bottle + flush equal liquid layers ===== */

/* Larger bottle proportions with a short square neck and broad shoulders,
   based on classic reagent/medicine bottles. */
.game-bottle{
  width:82px;
  height:228px;
  margin-top:20px;
  box-sizing:border-box;
  padding:54px 2px 2px;
  border:2px solid rgba(216,240,255,.34);
  border-top-color:transparent;
  border-radius:22px 22px 26px 26px;
  clip-path:polygon(
    31% 0,69% 0,
    69% 13%,74% 13%,82% 18%,90% 24%,96% 32%,100% 41%,
    100% 91%,97% 96%,91% 99%,82% 100%,
    18% 100%,9% 99%,3% 96%,0 91%,0 41%,
    4% 32%,10% 24%,18% 18%,26% 13%,31% 13%
  );
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.11) 0%,
      rgba(255,255,255,.025) 22%,
      rgba(255,255,255,.012) 62%,
      rgba(255,255,255,.07) 84%,
      rgba(255,255,255,.018) 100%),
    rgba(6,17,34,.08);
  overflow:hidden;
}

/* Squared-off neck/lip */
.game-bottle:before{
  content:"";
  position:absolute;
  width:32px;
  height:14px;
  left:50%;
  top:1px;
  transform:translateX(-50%);
  border:2px solid rgba(225,245,255,.56);
  border-radius:2px 2px 4px 4px;
  background:rgba(220,242,255,.055);
  box-shadow:inset 0 1px rgba(255,255,255,.18);
  z-index:6;
}

/* Narrow vertical reflection in the body */
.game-bottle:after{
  content:"";
  position:absolute;
  left:7px;
  top:58px;
  width:6px;
  height:145px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 55%,transparent);
  opacity:.32;
  z-index:5;
  pointer-events:none;
}

/* The liquid chamber fills the body wall-to-wall. Four layers are identical
   in width and height. No glass padding around the sides/bottom. */
.segment{
  flex:0 0 25%;
  width:100%;
  height:25%!important;
  min-height:0;
  margin:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden;
  position:relative;
  animation:none!important;
  background-size:100% 100%!important;
  filter:saturate(1.12) brightness(1.04);
}

/* Remove seams and tile-like borders entirely. */
.segment + .segment{margin-bottom:0!important}
.segment:first-child{border-radius:0 0 22px 22px!important}
.segment:last-child{border-radius:0!important}

/* Normal colours stay visually liquid, but static and stable.
   No drifting/caustic animation = no reset glitch on re-render. */
.segment:not(.prism):after{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.035) 14%,
      transparent 38%,
      transparent 70%,
      rgba(255,255,255,.08) 88%,
      transparent 100%);
  opacity:.75;
  pointer-events:none;
  animation:none!important;
}

/* Only the top exposed surface gets a subtle meniscus. */
.segment:last-child:before{
  display:block!important;
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-4px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.04) 60%,transparent)!important;
  animation:none!important;
  z-index:4;
}

/* Wildcard keeps the full animated treatment. */
.segment.prism{
  background-size:150% 150%!important;
  animation:prismFloat 7.5s ease-in-out infinite alternate,liquidBreath 3.6s ease-in-out infinite alternate!important;
  filter:saturate(1.2) brightness(1.08);
}
.segment.prism:after{
  display:block!important;
  opacity:1;
  background:
    radial-gradient(circle at 18% 75%,rgba(255,255,255,.65) 0 3px,transparent 3.8px),
    radial-gradient(circle at 44% 43%,rgba(255,255,255,.42) 0 2px,transparent 2.8px),
    radial-gradient(circle at 76% 70%,rgba(255,255,255,.52) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 64% 24%,rgba(255,255,255,.28) 0 1.8px,transparent 2.4px);
  animation:prismBubbleRise 5s ease-in-out infinite!important;
  mix-blend-mode:screen;
}

/* Incoming liquid preview fills the exact same wall-to-wall body chamber. */
.liquid-fill-preview{
  left:2px!important;
  right:2px!important;
  top:54px!important;
  bottom:2px!important;
  border-radius:0 0 22px 22px!important;
  overflow:hidden;
}
.fill-unit{
  left:0!important;
  right:0!important;
  width:100%!important;
  height:25%!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-size:100% 100%!important;
  filter:saturate(1.12) brightness(1.04);
  animation:none!important;
}
.fill-unit:first-child{border-radius:0 0 22px 22px!important}
.fill-unit:last-child{border-radius:0!important}
.fill-unit:before{
  left:0!important;
  right:0!important;
  top:-4px!important;
  height:9px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.04) 60%,transparent)!important;
  animation:none!important;
}
.fill-unit.prism{
  background-size:150% 150%!important;
  animation:prismFloat 7.5s ease-in-out infinite alternate!important;
}
.fill-unit.prism:after{
  animation:prismBubbleRise 5s ease-in-out infinite!important;
}

/* Pour clones use identical bottle/chamber geometry. */
.pour-clone-v21{padding-top:54px!important}

/* Home-screen bottle styling: squarer neck to match gameplay bottles. */
.hero-bottle{
  clip-path:polygon(
    31% 0,69% 0,69% 11%,74% 11%,82% 17%,91% 25%,97% 34%,100% 41%,
    100% 91%,96% 97%,87% 100%,13% 100%,4% 97%,0 91%,0 41%,
    3% 34%,9% 25%,18% 17%,26% 11%,31% 11%
  );
}
.hero-bottle:before{
  width:46px;
  height:15px;
  top:1px;
  border-radius:2px 2px 4px 4px;
}

/* Mobile keeps four equal liquid bands while scaling the entire bottle up
   slightly compared with V2.7. */
@media(max-width:700px){
  .game-bottle{
    width:64px;
    height:188px;
    padding:46px 2px 2px;
  }
  .game-bottle:before{
    width:25px;
    height:11px;
  }
  .game-bottle:after{
    top:50px;
    height:116px;
    left:6px;
    width:5px;
  }
  .liquid-fill-preview{
    left:2px!important;
    right:2px!important;
    top:46px!important;
    bottom:2px!important;
  }
  .pour-clone-v21{padding-top:46px!important}
}


/* ===== PrismPour V2.9: reference-matched premium bottles ===== */
.game-bottle{
  width:74px;
  height:246px;
  margin-top:18px;
  box-sizing:border-box;
  padding:54px 3px 3px;
  border:2px solid rgba(222,241,255,.48);
  border-top-color:transparent;
  border-radius:13px 13px 15px 15px;
  clip-path:polygon(
    31% 0,69% 0,69% 12%,73% 12%,77% 15%,84% 18%,90% 22%,95% 27%,99% 34%,
    100% 39%,100% 94%,98% 98%,94% 100%,6% 100%,2% 98%,0 94%,0 39%,
    1% 34%,5% 27%,10% 22%,16% 18%,23% 15%,27% 12%,31% 12%
  );
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.018) 18%,rgba(255,255,255,.012) 73%,rgba(255,255,255,.10) 90%,rgba(255,255,255,.025)),
    rgba(6,16,31,.12);
  box-shadow:
    inset 5px 0 8px rgba(255,255,255,.05),
    inset -4px 0 7px rgba(255,255,255,.025),
    0 16px 24px rgba(0,0,0,.18);
  overflow:hidden;
}
/* short, straight, square neck/rim */
.game-bottle:before{
  width:31px;height:11px;left:50%;top:1px;transform:translateX(-50%);
  border:2px solid rgba(231,246,255,.62);
  border-radius:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.22);
  z-index:7;
}
/* restrained glass reflection */
.game-bottle:after{
  left:6px;top:58px;width:4px;height:164px;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 65%,transparent);
  opacity:.36;z-index:6;
}

/* Four equal, square-edged liquid units. No gaps between liquid and glass. */
.segment{
  flex:0 0 25%;
  width:100%;height:25%!important;min-height:0;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden;position:relative;
  animation:none!important;
  background-size:100% 100%!important;
  filter:saturate(1.12) brightness(1.03);
}
.segment:first-child,.segment:last-child{border-radius:0!important}
.segment + .segment{margin:0!important}

/* static glassy depth for normal colours; no animation/re-render glitch */
.segment:not(.prism):after{
  display:block!important;content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),transparent 14%,transparent 78%,rgba(255,255,255,.06)),
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 18%,transparent 82%,rgba(0,0,0,.05));
  opacity:1;animation:none!important;pointer-events:none;
}
/* Keep boundaries square/clean like reference. A tiny highlight only on the exposed top. */
.segment:last-child:before{
  display:block!important;content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:0!important;
  background:rgba(255,255,255,.18)!important;
  filter:none!important;animation:none!important;transform:none!important;z-index:4;
}
/* No top-line decoration on internal layers */
.segment:not(:last-child):before{display:none!important}

/* Wildcard is the only fully animated fluid. */
.segment.prism{
  background-size:145% 145%!important;
  animation:prismFloat 7s ease-in-out infinite alternate,liquidBreath 3.4s ease-in-out infinite alternate!important;
  filter:saturate(1.22) brightness(1.08);
}
.segment.prism:after{
  display:block!important;
  background:
    radial-gradient(circle at 18% 78%,rgba(255,255,255,.72) 0 3px,transparent 3.8px),
    radial-gradient(circle at 43% 48%,rgba(255,255,255,.45) 0 2px,transparent 2.8px),
    radial-gradient(circle at 77% 72%,rgba(255,255,255,.56) 0 2.6px,transparent 3.4px),
    radial-gradient(circle at 65% 25%,rgba(255,255,255,.32) 0 1.8px,transparent 2.5px);
  animation:prismBubbleRise 4.8s ease-in-out infinite!important;
  mix-blend-mode:screen;opacity:1;
}

/* Transfer preview is identical to the real chamber. */
.liquid-fill-preview{
  left:3px!important;right:3px!important;top:54px!important;bottom:3px!important;
  border-radius:0!important;overflow:hidden;
}
.fill-unit{
  left:0!important;right:0!important;width:100%!important;height:25%!important;
  border-radius:0!important;box-shadow:none!important;
  background-size:100% 100%!important;animation:none!important;
  filter:saturate(1.12) brightness(1.03);
}
.fill-unit:first-child,.fill-unit:last-child{border-radius:0!important}
.fill-unit:before{
  left:0!important;right:0!important;top:0!important;height:3px!important;
  border-radius:0!important;background:rgba(255,255,255,.18)!important;
  animation:none!important;transform:none!important;
}
.fill-unit.prism{background-size:145% 145%!important;animation:prismFloat 7s ease-in-out infinite alternate!important}
.fill-unit.prism:after{animation:prismBubbleRise 4.8s ease-in-out infinite!important}

/* Clone uses the exact same chamber geometry. */
.pour-clone-v21{padding-top:54px!important}

/* Mobile: keep reference proportions, simply scale down. */
@media(max-width:700px){
  .game-bottle{width:60px;height:202px;padding:45px 3px 3px}
  .game-bottle:before{width:25px;height:9px}
  .game-bottle:after{top:49px;height:132px;left:5px}
  .liquid-fill-preview{left:3px!important;right:3px!important;top:45px!important;bottom:3px!important}
  .pour-clone-v21{padding-top:45px!important}
}


/* ===== PrismPour V3.0: ONE canonical bottle design everywhere =====
   Target: straight rectangular body, small square neck, subtle shoulder,
   thin glass outline, four flush square liquid layers. */

/* GAME BOTTLE */
.game-bottle{
  width:76px;
  height:238px;
  margin-top:16px;
  padding:50px 2px 2px;
  box-sizing:border-box;
  position:relative;
  border:2px solid rgba(222,241,255,.54);
  border-top-color:transparent;
  border-radius:8px 8px 10px 10px;
  clip-path:polygon(
    34% 0,66% 0,66% 13%,72% 13%,72% 16%,
    82% 18%,91% 22%,97% 27%,100% 32%,
    100% 96%,98% 99%,94% 100%,6% 100%,2% 99%,0 96%,
    0 32%,3% 27%,9% 22%,18% 18%,28% 16%,28% 13%,34% 13%
  );
  background:linear-gradient(90deg,
    rgba(255,255,255,.10),rgba(255,255,255,.015) 16%,
    rgba(4,13,28,.025) 48%,rgba(255,255,255,.055) 87%,rgba(255,255,255,.015));
  box-shadow:inset 4px 0 6px rgba(255,255,255,.035),inset -3px 0 5px rgba(255,255,255,.025),0 14px 22px rgba(0,0,0,.16);
  overflow:hidden;
}
.game-bottle:before{
  content:"";position:absolute;left:50%;top:1px;transform:translateX(-50%);
  width:25px;height:10px;border:2px solid rgba(232,247,255,.65);
  border-radius:0;background:rgba(221,241,255,.045);
  box-shadow:inset 0 1px rgba(255,255,255,.2);z-index:8;
}
.game-bottle:after{
  content:"";position:absolute;left:5px;top:54px;width:3px;height:158px;
  border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.05) 68%,transparent);
  opacity:.32;z-index:7;pointer-events:none;
}

/* LIQUID: no bevels, no shadows, no layer-top highlights. */
.segment,
.segment:first-child,
.segment:last-child{
  flex:0 0 25%;width:100%;height:25%!important;min-height:0;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;filter:saturate(1.10) brightness(1.02);
  animation:none!important;background-size:100% 100%!important;overflow:hidden;position:relative;
}
.segment:before{display:none!important}
.segment:not(.prism):after{
  display:block!important;content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 13%,transparent 84%,rgba(255,255,255,.035));
  opacity:.7;animation:none!important;transform:none!important;box-shadow:none!important;pointer-events:none;
}
/* Wildcard animation is deliberately isolated to its own pseudo-layer.
   The base segment never animates, preventing the re-render jump/glitch. */
.segment.prism{animation:none!important;background-size:100% 100%!important}
.segment.prism:after{
  display:block!important;content:"";position:absolute;inset:-10% 0;
  background:
    radial-gradient(circle at 20% 78%,rgba(255,255,255,.70) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 47% 55%,rgba(255,255,255,.42) 0 2px,transparent 2.7px),
    radial-gradient(circle at 78% 72%,rgba(255,255,255,.55) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 63% 29%,rgba(255,255,255,.30) 0 1.7px,transparent 2.3px);
  animation:wildBubblesOnly 4.8s linear infinite!important;
  mix-blend-mode:screen;opacity:.9;
}
@keyframes wildBubblesOnly{
  0%{transform:translateY(9px);opacity:.58}
  45%{opacity:.95}
  100%{transform:translateY(-9px);opacity:.58}
}

/* TRANSFER PREVIEW: exactly the same chamber and no Tetris highlight. */
.liquid-fill-preview{
  left:2px!important;right:2px!important;top:50px!important;bottom:2px!important;
  border-radius:0!important;overflow:hidden;
}
.fill-unit,.fill-unit:first-child,.fill-unit:last-child{
  left:0!important;right:0!important;width:100%!important;height:25%!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background-size:100% 100%!important;animation:none!important;
}
.fill-unit:before{display:none!important}
.fill-unit.prism{animation:none!important;background-size:100% 100%!important}
.fill-unit.prism:after{animation:wildBubblesOnly 4.8s linear infinite!important}
.pour-clone-v21{padding-top:50px!important}

/* HOMEPAGE: same silhouette, scaled up. */
.hero-bottle{
  width:92px;height:280px;
  border:2px solid rgba(222,241,255,.42);border-top-color:transparent;
  border-radius:9px 9px 12px 12px;
  clip-path:polygon(34% 0,66% 0,66% 13%,72% 13%,72% 16%,82% 18%,91% 22%,97% 27%,100% 32%,100% 96%,98% 99%,94% 100%,6% 100%,2% 99%,0 96%,0 32%,3% 27%,9% 22%,18% 18%,28% 16%,28% 13%,34% 13%);
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 18%,rgba(255,255,255,.055) 87%,rgba(255,255,255,.015));
}
.hero-bottle:before{
  width:30px;height:12px;top:1px;left:50%;transform:translateX(-50%);
  border:2px solid rgba(232,247,255,.60);border-radius:0;background:rgba(221,241,255,.04);
}
.hero-bottle i{left:7px;top:62px;width:4px;height:175px;opacity:.3}
.hero-bottle .liquid{
  left:2px!important;right:2px!important;height:25%!important;
  border-radius:0!important;box-shadow:none!important;
}
.hero-bottle .liquid:nth-child(1){bottom:2px!important}
.hero-bottle .liquid:nth-child(2){bottom:calc(25% + 1px)!important}

/* DIFFICULTY CARDS: replace generic rounded bars with the same bottle shape. */
.difficulty-art{height:190px;display:flex;gap:9px;align-items:flex-end;justify-content:center;padding-bottom:18px}
.difficulty-art span{
  width:34px!important;height:128px!important;position:relative;
  border:1.5px solid rgba(222,241,255,.42)!important;border-top-color:transparent!important;
  border-radius:4px 4px 5px 5px!important;
  clip-path:polygon(34% 0,66% 0,66% 13%,72% 13%,72% 16%,82% 18%,91% 22%,97% 27%,100% 32%,100% 96%,98% 100%,2% 100%,0 96%,0 32%,3% 27%,9% 22%,18% 18%,28% 16%,28% 13%,34% 13%)!important;
  background:
    linear-gradient(to top,#22cfe9 0 25%,#7851e8 25% 50%,#ef4b9f 50% 75%,rgba(8,20,38,.14) 75%)!important;
  box-shadow:none!important;overflow:hidden;
}
.difficulty-art span:before{
  content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:12px;height:5px;border:1px solid rgba(232,247,255,.58);background:rgba(255,255,255,.04)
}
.medium-art span:nth-child(2n){
  background:linear-gradient(to top,#f5b93d 0 25%,#43d994 25% 50%,#22cfe9 50% 75%,#7851e8 75% 100%)!important
}
.hard-art span:nth-child(odd){
  background:linear-gradient(to top,#ef4b9f 0 25%,#f5b93d 25% 50%,#7851e8 50% 75%,#22cfe9 75% 100%)!important
}

/* Mobile */
@media(max-width:700px){
  .game-bottle{width:60px;height:194px;padding:41px 2px 2px}
  .game-bottle:before{width:20px;height:8px}
  .game-bottle:after{top:45px;height:126px;left:4px}
  .liquid-fill-preview{left:2px!important;right:2px!important;top:41px!important;bottom:2px!important}
  .pour-clone-v21{padding-top:41px!important}
}


/* ===== PrismPour V3.1: old medicine bottle silhouette =====
   No sloping shoulders. Rectangular body with rounded corners,
   straight vertical neck, hard horizontal shoulder transition. */

.game-bottle{
  width:76px;
  height:238px;
  margin-top:16px;
  padding:46px 2px 2px;
  box-sizing:border-box;
  position:relative;
  border:2px solid rgba(222,241,255,.54);
  border-top-color:transparent;
  border-radius:9px 9px 12px 12px;
  clip-path:polygon(
    32% 0,68% 0,
    68% 18%,100% 18%,
    100% 96%,98% 99%,94% 100%,
    6% 100%,2% 99%,0 96%,
    0 18%,32% 18%
  );
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.015) 16%,
      rgba(4,13,28,.025) 48%,
      rgba(255,255,255,.055) 87%,
      rgba(255,255,255,.015));
  box-shadow:
    inset 4px 0 6px rgba(255,255,255,.035),
    inset -3px 0 5px rgba(255,255,255,.025),
    0 14px 22px rgba(0,0,0,.16);
  overflow:hidden;
}

/* squared medicine-bottle neck/rim */
.game-bottle:before{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  transform:translateX(-50%);
  width:27px;
  height:11px;
  border:2px solid rgba(232,247,255,.68);
  border-radius:1px;
  background:rgba(221,241,255,.045);
  box-shadow:inset 0 1px rgba(255,255,255,.2);
  z-index:8;
}

/* body glass reflection starts under the hard shoulder */
.game-bottle:after{
  content:"";
  position:absolute;
  left:5px;
  top:50px;
  width:3px;
  height:160px;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.27),rgba(255,255,255,.05) 68%,transparent);
  opacity:.32;
  z-index:7;
  pointer-events:none;
}

/* liquid chamber begins immediately below the neck/body shoulder */
.liquid-fill-preview{
  left:2px!important;
  right:2px!important;
  top:46px!important;
  bottom:2px!important;
}
.pour-clone-v21{padding-top:46px!important}

/* Homepage uses exactly the same silhouette, scaled up */
.hero-bottle{
  width:92px;
  height:280px;
  border:2px solid rgba(222,241,255,.42);
  border-top-color:transparent;
  border-radius:10px 10px 13px 13px;
  clip-path:polygon(
    32% 0,68% 0,
    68% 18%,100% 18%,
    100% 96%,98% 99%,94% 100%,
    6% 100%,2% 99%,0 96%,
    0 18%,32% 18%
  );
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 18%,rgba(255,255,255,.055) 87%,rgba(255,255,255,.015));
}
.hero-bottle:before{
  width:32px;
  height:13px;
  top:1px;
  left:50%;
  transform:translateX(-50%);
  border:2px solid rgba(232,247,255,.62);
  border-radius:1px;
  background:rgba(221,241,255,.04);
}
.hero-bottle i{
  left:7px;
  top:57px;
  width:4px;
  height:178px;
  opacity:.3;
}

/* Difficulty selection bottles use same hard-shoulder medicine shape */
.difficulty-art span{
  width:34px!important;
  height:128px!important;
  position:relative;
  border:1.5px solid rgba(222,241,255,.42)!important;
  border-top-color:transparent!important;
  border-radius:4px 4px 5px 5px!important;
  clip-path:polygon(
    32% 0,68% 0,
    68% 18%,100% 18%,
    100% 96%,98% 100%,
    2% 100%,0 96%,
    0 18%,32% 18%
  )!important;
}
.difficulty-art span:before{
  content:"";
  position:absolute;
  top:1px;
  left:50%;
  transform:translateX(-50%);
  width:12px;
  height:5px;
  border:1px solid rgba(232,247,255,.58);
  border-radius:0;
  background:rgba(255,255,255,.04);
}

/* mobile version stays square-shouldered */
@media(max-width:700px){
  .game-bottle{
    width:60px;
    height:194px;
    padding:38px 2px 2px;
  }
  .game-bottle:before{
    width:21px;
    height:8px;
  }
  .game-bottle:after{
    top:42px;
    height:128px;
    left:4px;
  }
  .liquid-fill-preview{
    left:2px!important;
    right:2px!important;
    top:38px!important;
    bottom:2px!important;
  }
  .pour-clone-v21{padding-top:38px!important}
}


/* ===== PrismPour V3.2: refined canonical medicine bottle ===== */
/* Wider neck, continuous outline into neck, subtly rounded body corners. */
.game-bottle{
  width:78px;
  height:238px;
  padding:46px 2px 2px;
  border:2px solid rgba(222,241,255,.56);
  border-top-color:rgba(222,241,255,.56);
  border-radius:10px 10px 12px 12px;
  clip-path:polygon(
    29% 0,71% 0,
    71% 18%,100% 18%,
    100% 96%,99% 98%,97% 99%,94% 100%,
    6% 100%,3% 99%,1% 98%,0 96%,
    0 18%,29% 18%
  );
}
/* Rim follows the neck width instead of floating above it. */
.game-bottle:before{
  width:31px;
  height:10px;
  top:1px;
  border:2px solid rgba(232,247,255,.70);
  border-radius:2px;
  background:rgba(221,241,255,.045);
}

/* HOME: exact same geometry, scaled. */
.hero-bottle{
  width:94px;
  height:280px;
  border:2px solid rgba(222,241,255,.44);
  border-top-color:rgba(222,241,255,.44);
  border-radius:11px 11px 14px 14px;
  clip-path:polygon(
    29% 0,71% 0,
    71% 18%,100% 18%,
    100% 96%,99% 98%,97% 99%,94% 100%,
    6% 100%,3% 99%,1% 98%,0 96%,
    0 18%,29% 18%
  );
}
.hero-bottle:before{
  width:37px;
  height:12px;
  top:1px;
  border-radius:2px;
}

/* DIFFICULTY: same silhouette and explicitly reserve top 18% for EMPTY neck.
   Liquid gradients start only below the hard shoulder line. */
.difficulty-art span{
  width:36px!important;
  height:132px!important;
  border:1.5px solid rgba(222,241,255,.46)!important;
  border-top-color:rgba(222,241,255,.46)!important;
  border-radius:5px 5px 6px 6px!important;
  clip-path:polygon(
    29% 0,71% 0,
    71% 18%,100% 18%,
    100% 96%,99% 99%,96% 100%,
    4% 100%,1% 99%,0 96%,
    0 18%,29% 18%
  )!important;
  background:
    linear-gradient(to bottom,
      rgba(8,20,38,.10) 0 18%,
      #ef4b9f 18% 38.5%,
      #7851e8 38.5% 59%,
      #22cfe9 59% 79.5%,
      #43d994 79.5% 100%)!important;
}
.difficulty-art span:before{
  width:14px;
  height:5px;
  top:1px;
  border-radius:1px;
}
/* Variation stays below neck; neck always transparent/empty. */
.medium-art span:nth-child(2n){
  background:linear-gradient(to bottom,
    rgba(8,20,38,.10) 0 18%,
    #7851e8 18% 38.5%,
    #22cfe9 38.5% 59%,
    #43d994 59% 79.5%,
    #f5b93d 79.5% 100%)!important;
}
.hard-art span:nth-child(odd){
  background:linear-gradient(to bottom,
    rgba(8,20,38,.10) 0 18%,
    #22cfe9 18% 38.5%,
    #7851e8 38.5% 59%,
    #f5b93d 59% 79.5%,
    #ef4b9f 79.5% 100%)!important;
}

@media(max-width:700px){
  .game-bottle{
    width:62px;
    height:194px;
    padding:38px 2px 2px;
  }
  .game-bottle:before{width:25px;height:8px}
}


/* ===== PrismPour V3.3: canonical bottle rebuild =====
   No clip-path. Body = rounded rectangle. Neck = separate outlined rectangle.
   This preserves the outline around the neck/top and keeps the same shape
   across gameplay, homepage and difficulty selection. */

/* ---------- GAMEPLAY BOTTLE ---------- */
.game-bottle{
  width:78px;
  height:188px;
  margin-top:48px;
  padding:0;
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  overflow:hidden;

  border:3px solid rgba(215,236,252,.62);
  border-radius:12px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.018) 17%,
      rgba(5,15,31,.025) 58%,
      rgba(255,255,255,.05) 87%,
      rgba(255,255,255,.015) 100%);
  box-shadow:
    inset 4px 0 7px rgba(255,255,255,.035),
    inset -3px 0 5px rgba(255,255,255,.025),
    0 14px 22px rgba(0,0,0,.16);
  clip-path:none!important;
}

/* Neck itself: wider, vertical, fully outlined, rounded only slightly. */
.game-bottle:before{
  content:"";
  position:absolute;
  z-index:10;
  width:34px;
  height:46px;
  left:50%;
  top:-48px;
  transform:translateX(-50%);
  border:3px solid rgba(215,236,252,.62);
  border-bottom:0;
  border-radius:6px 6px 0 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.07),
      rgba(8,20,38,.05) 50%,
      rgba(255,255,255,.04));
  box-sizing:border-box;
}

/* Bottle lip/rim above the neck. */
.game-bottle:after{
  content:"";
  position:absolute;
  z-index:11;
  width:40px;
  height:10px;
  left:50%;
  top:-54px;
  transform:translateX(-50%);
  border:2px solid rgba(225,243,255,.72);
  border-radius:3px;
  background:rgba(222,242,255,.07);
  box-shadow:
    inset 0 1px rgba(255,255,255,.20),
    0 1px 2px rgba(0,0,0,.15);
  box-sizing:border-box;
}

/* Liquids fill the body flush to the inner glass edge.
   Four identical square-edged layers, no top shadow or bevel. */
.segment,
.segment:first-child,
.segment:last-child{
  flex:0 0 25%;
  width:100%;
  height:25%!important;
  min-height:0;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden;
  position:relative;
  animation:none!important;
  background-size:100% 100%!important;
  filter:saturate(1.10) brightness(1.02);
}
.segment:before{display:none!important}
.segment:not(.prism):after{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.09),
    transparent 14%,
    transparent 84%,
    rgba(255,255,255,.03)
  );
  animation:none!important;
  transform:none!important;
  opacity:.72;
  pointer-events:none;
}

/* Wildcard: static base gradient; only bubbles move. */
.segment.prism{
  animation:none!important;
  background-size:100% 100%!important;
}
.segment.prism:after{
  display:block!important;
  content:"";
  position:absolute;
  inset:-8% 0;
  background:
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.70) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 48% 57%,rgba(255,255,255,.43) 0 2px,transparent 2.7px),
    radial-gradient(circle at 78% 73%,rgba(255,255,255,.55) 0 2.5px,transparent 3.2px),
    radial-gradient(circle at 64% 31%,rgba(255,255,255,.30) 0 1.7px,transparent 2.3px);
  animation:wildBubblesV33 4.8s linear infinite!important;
  mix-blend-mode:screen;
  opacity:.9;
}
@keyframes wildBubblesV33{
  0%{transform:translateY(7px);opacity:.58}
  50%{opacity:.95}
  100%{transform:translateY(-7px);opacity:.58}
}

/* Pour fill preview now matches the rectangular body exactly. */
.liquid-fill-preview{
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  border-radius:9px!important;
  overflow:hidden;
}
.fill-unit,
.fill-unit:first-child,
.fill-unit:last-child{
  left:0!important;
  right:0!important;
  width:100%!important;
  height:25%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-size:100% 100%!important;
  animation:none!important;
}
.fill-unit:before{display:none!important}
.fill-unit.prism:after{animation:wildBubblesV33 4.8s linear infinite!important}

/* Clone needs no internal top padding because liquid fills only the rectangular body. */
.pour-clone-v21{padding:0!important}

/* ---------- HOMEPAGE BOTTLES ---------- */
.hero-bottle{
  width:96px;
  height:232px;
  bottom:58px;
  overflow:hidden;
  position:absolute;

  border:3px solid rgba(215,236,252,.48);
  border-radius:14px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.015) 18%,
      rgba(255,255,255,.05) 87%,
      rgba(255,255,255,.015));
  box-shadow:
    inset 5px 0 9px rgba(255,255,255,.035),
    0 24px 42px rgba(0,0,0,.22);
  clip-path:none!important;
}
.hero-bottle:before{
  content:"";
  position:absolute;
  width:42px;
  height:56px;
  left:50%;
  top:-58px;
  transform:translateX(-50%);
  border:3px solid rgba(215,236,252,.48);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:rgba(8,20,38,.05);
  box-sizing:border-box;
}
.hero-bottle:after{
  content:"";
  position:absolute;
  width:48px;
  height:11px;
  left:50%;
  top:-64px;
  transform:translateX(-50%);
  border:2px solid rgba(225,243,255,.62);
  border-radius:3px;
  background:rgba(222,242,255,.06);
  box-sizing:border-box;
}
.hero-bottle i{
  left:8px;
  top:18px;
  width:5px;
  height:178px;
  opacity:.28;
}
.hero-bottle .liquid{
  left:0!important;
  right:0!important;
  height:25%!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero-bottle .liquid:nth-child(1){bottom:0!important}
.hero-bottle .liquid:nth-child(2){bottom:25%!important}

/* ---------- DIFFICULTY CARD BOTTLES ---------- */
.difficulty-art{
  height:190px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
}
.difficulty-art span{
  width:36px!important;
  height:108px!important;
  margin-top:32px;
  position:relative;
  overflow:hidden;

  border:1.8px solid rgba(215,236,252,.48)!important;
  border-radius:5px!important;
  clip-path:none!important;
  box-shadow:none!important;

  /* body only: four equal liquid bands */
  background:linear-gradient(
    to top,
    #43d994 0 25%,
    #22cfe9 25% 50%,
    #7851e8 50% 75%,
    #ef4b9f 75% 100%
  )!important;
}
.difficulty-art span:before{
  content:"";
  position:absolute;
  z-index:5;
  width:16px;
  height:25px;
  left:50%;
  top:-27px;
  transform:translateX(-50%);
  border:1.8px solid rgba(215,236,252,.48);
  border-bottom:0;
  border-radius:3px 3px 0 0;
  background:rgba(8,20,38,.08);
  box-sizing:border-box;
}
.difficulty-art span:after{
  content:"";
  position:absolute;
  z-index:6;
  width:20px;
  height:6px;
  left:50%;
  top:-31px;
  transform:translateX(-50%);
  border:1px solid rgba(225,243,255,.60);
  border-radius:2px;
  background:rgba(222,242,255,.05);
  box-sizing:border-box;
}

/* Variations affect body only, never the neck. */
.medium-art span:nth-child(2n){
  background:linear-gradient(
    to top,
    #f5b93d 0 25%,
    #43d994 25% 50%,
    #22cfe9 50% 75%,
    #7851e8 75% 100%
  )!important;
}
.hard-art span:nth-child(odd){
  background:linear-gradient(
    to top,
    #ef4b9f 0 25%,
    #f5b93d 25% 50%,
    #7851e8 50% 75%,
    #22cfe9 75% 100%
  )!important;
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
  .game-bottle{
    width:62px;
    height:152px;
    margin-top:40px;
    border-radius:10px;
  }
  .game-bottle:before{
    width:28px;
    height:38px;
    top:-40px;
    border-radius:5px 5px 0 0;
  }
  .game-bottle:after{
    width:34px;
    height:8px;
    top:-46px;
  }
}


/* ===== PrismPour V3.4: structural bottle rebuild =====
   Body, neck, rim and liquid chamber are separate elements.
   Desktop body is 72px wide x 288px tall, so four liquid units are exactly 72x72 squares. */

.game-bottle{
  --bottle-w:72px;
  --body-h:288px;
  --neck-w:34px;
  --neck-h:42px;
  width:var(--bottle-w);
  height:var(--body-h);
  margin-top:54px;
  padding:0!important;
  position:relative;
  box-sizing:border-box;
  overflow:visible!important;
  display:block!important;

  border:3px solid rgba(215,236,252,.64);
  border-radius:11px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.015) 16%,
    rgba(4,14,29,.025) 55%,
    rgba(255,255,255,.05) 88%,
    rgba(255,255,255,.015));
  box-shadow:inset 4px 0 7px rgba(255,255,255,.03),0 14px 22px rgba(0,0,0,.16);
  clip-path:none!important;
}

/* Disable all legacy bottle pseudos. */
.game-bottle:before,.game-bottle:after{content:none!important;display:none!important}

/* Explicit neck and rim — cannot be clipped away. */
.bottle-neck{
  position:absolute;
  z-index:10;
  width:var(--neck-w);
  height:var(--neck-h);
  left:50%;
  top:calc(var(--neck-h) * -1);
  transform:translateX(-50%);
  box-sizing:border-box;
  border:3px solid rgba(215,236,252,.64);
  border-bottom:0;
  border-radius:6px 6px 0 0;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(7,18,35,.04) 55%,rgba(255,255,255,.04));
  pointer-events:none;
}
.bottle-rim{
  position:absolute;
  z-index:11;
  width:calc(var(--neck-w) + 7px);
  height:10px;
  left:50%;
  top:calc((var(--neck-h) * -1) - 6px);
  transform:translateX(-50%);
  box-sizing:border-box;
  border:2px solid rgba(228,244,255,.74);
  border-radius:3px;
  background:rgba(225,243,255,.07);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.12);
  pointer-events:none;
}

/* Dedicated chamber fills the rectangular body. */
.bottle-liquid-chamber{
  position:absolute;
  inset:0;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  z-index:2;
}

/* Exact squares: width = 72, each height = body/4 = 72. */
.segment,
.segment:first-child,
.segment:last-child{
  flex:0 0 25%;
  width:100%;
  height:25%!important;
  min-height:0;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-size:100% 100%!important;
  animation:none!important;
  overflow:hidden;
  position:relative;
  filter:saturate(1.12) brightness(1.03);
}
.segment:before{display:none!important}
.segment:not(.prism):after{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.09),transparent 14%,transparent 84%,rgba(255,255,255,.03));
  animation:none!important;
  transform:none!important;
  opacity:.68;
  pointer-events:none;
}

/* Wildcard restored: static rainbow base + only bubbles animate.
   Because the base itself doesn't animate, re-rendering won't produce the sweeping reset glitch. */
.segment.prism{
  animation:none!important;
  background-size:100% 100%!important;
}
.segment.prism:after{
  display:block!important;
  content:"";
  position:absolute;
  inset:-12% 0;
  background:
    radial-gradient(circle at 18% 82%,rgba(255,255,255,.80) 0 3px,transparent 3.7px),
    radial-gradient(circle at 43% 62%,rgba(255,255,255,.46) 0 2px,transparent 2.8px),
    radial-gradient(circle at 78% 75%,rgba(255,255,255,.62) 0 2.7px,transparent 3.5px),
    radial-gradient(circle at 66% 34%,rgba(255,255,255,.34) 0 1.8px,transparent 2.5px),
    radial-gradient(circle at 31% 30%,rgba(255,255,255,.24) 0 1.4px,transparent 2.1px);
  animation:wildBubbleRiseV34 4.6s linear infinite!important;
  mix-blend-mode:screen;
  opacity:.95;
}
@keyframes wildBubbleRiseV34{
  0%{transform:translateY(13px);opacity:.58}
  45%{opacity:1}
  100%{transform:translateY(-13px);opacity:.58}
}

/* Transfer preview matches the full body and the same 4-square geometry. */
.liquid-fill-preview{
  position:absolute!important;
  inset:0!important;
  border-radius:8px!important;
  overflow:hidden;
  z-index:3;
}
.fill-unit,.fill-unit:first-child,.fill-unit:last-child{
  position:absolute;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:25%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-size:100% 100%!important;
  animation:none!important;
}
.fill-unit:before{display:none!important}
.fill-unit.prism:after{animation:wildBubbleRiseV34 4.6s linear infinite!important}

/* Cloned bottle keeps exact structural dimensions. */
.pour-clone-v21{padding:0!important;overflow:visible!important}

/* Homepage bottle: same exact proportions, scaled 1.25x. */
.hero-bottle{
  --bottle-w:90px;
  --body-h:360px;
  --neck-w:42px;
  --neck-h:52px;
  width:var(--bottle-w)!important;
  height:var(--body-h)!important;
  bottom:42px;
  position:absolute;
  overflow:visible!important;
  border:3px solid rgba(215,236,252,.48);
  border-radius:13px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 18%,rgba(255,255,255,.05) 87%,rgba(255,255,255,.015));
  clip-path:none!important;
}
.hero-bottle:before{
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:10;
  width:var(--neck-w)!important;
  height:var(--neck-h)!important;
  left:50%!important;
  top:calc(var(--neck-h) * -1)!important;
  transform:translateX(-50%)!important;
  border:3px solid rgba(215,236,252,.48)!important;
  border-bottom:0!important;
  border-radius:7px 7px 0 0!important;
  background:rgba(8,20,38,.04)!important;
  box-sizing:border-box;
}
.hero-bottle:after{
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:11;
  width:49px!important;
  height:11px!important;
  left:50%!important;
  top:-58px!important;
  transform:translateX(-50%)!important;
  border:2px solid rgba(228,244,255,.64)!important;
  border-radius:3px!important;
  background:rgba(225,243,255,.06)!important;
}
.hero-bottle i{left:8px;top:20px;width:5px;height:280px;opacity:.28}
.hero-bottle .liquid{
  left:0!important;right:0!important;
  height:25%!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero-bottle .liquid:nth-child(1){bottom:0!important}
.hero-bottle .liquid:nth-child(2){bottom:25%!important}

/* Difficulty bottles: same proportions, 28px square liquid units. */
.difficulty-art{height:190px;overflow:visible}
.difficulty-art span{
  --mini-w:28px;
  --mini-body:112px;
  width:var(--mini-w)!important;
  height:var(--mini-body)!important;
  margin-top:34px!important;
  position:relative;
  overflow:visible!important;
  border:1.6px solid rgba(215,236,252,.48)!important;
  border-radius:5px!important;
  clip-path:none!important;
  box-shadow:none!important;

  background:linear-gradient(to top,
    #43d994 0 25%,
    #22cfe9 25% 50%,
    #7851e8 50% 75%,
    #ef4b9f 75% 100%)!important;
}
.difficulty-art span:before{
  content:"";
  position:absolute;
  width:14px;
  height:25px;
  left:50%;
  top:-26px;
  transform:translateX(-50%);
  border:1.6px solid rgba(215,236,252,.48);
  border-bottom:0;
  border-radius:3px 3px 0 0;
  background:rgba(8,20,38,.06);
  box-sizing:border-box;
}
.difficulty-art span:after{
  content:"";
  position:absolute;
  width:18px;
  height:5px;
  left:50%;
  top:-30px;
  transform:translateX(-50%);
  border:1px solid rgba(228,244,255,.62);
  border-radius:2px;
  background:rgba(225,243,255,.05);
}
.medium-art span:nth-child(2n){
  background:linear-gradient(to top,#f5b93d 0 25%,#43d994 25% 50%,#22cfe9 50% 75%,#7851e8 75% 100%)!important;
}
.hard-art span:nth-child(odd){
  background:linear-gradient(to top,#ef4b9f 0 25%,#f5b93d 25% 50%,#7851e8 50% 75%,#22cfe9 75% 100%)!important;
}

/* Mobile retains exact square layers: 56px body width = 224px body height. */
@media(max-width:700px){
  .game-bottle{
    --bottle-w:56px;
    --body-h:224px;
    --neck-w:27px;
    --neck-h:36px;
    width:var(--bottle-w);
    height:var(--body-h);
    margin-top:46px;
    border-radius:9px;
  }
  .bottle-rim{
    width:33px;
    height:8px;
    top:-42px;
  }
}


/* ===== PrismPour V3.4.1 small refinements ===== */

/* Hard mode bottles stay in one row. On smaller viewports the row scrolls
   horizontally instead of wrapping into a second line. */
#gameBoard.hard-one-row,
.board.hard-one-row{
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  max-width:100%!important;
  padding-left:12px;
  padding-right:12px;
  scrollbar-width:thin;
}
#gameBoard.hard-one-row .game-bottle,
.board.hard-one-row .game-bottle{
  flex:0 0 var(--bottle-w)!important;
}


/* ===== PrismPour V3.5 gameplay additions ===== */
#bottleBoard.hard-one-row{flex-wrap:nowrap!important;justify-content:center!important;overflow-x:auto!important;overflow-y:visible!important;max-width:100%!important;padding-left:14px;padding-right:14px}
#bottleBoard.hard-one-row .game-bottle{flex:0 0 var(--bottle-w)!important}
.pour-stream-board.active{height:var(--stream-length,66px)!important;transform:rotate(var(--stream-angle,0deg))!important;transform-origin:top center!important;opacity:.94;animation:streamPulse .18s ease-in-out infinite alternate}
.pour-stream-board.prism-stream.active{background-size:100% 100%!important;animation:streamPulse .18s ease-in-out infinite alternate!important}
.water-wisdom{margin:14px 0 19px;padding:14px 16px;border:1px solid rgba(93,214,255,.13);border-radius:16px;background:linear-gradient(125deg,rgba(51,181,218,.08),rgba(123,92,255,.07));text-align:left}
.water-wisdom small{color:#69ddf6!important;letter-spacing:1.5px}.water-wisdom p{margin:5px 0 0!important;color:#b5c8d9!important;font-size:12px!important;line-height:1.55!important}
.pattern-target{width:min(960px,100%);margin:14px auto 8px;padding:12px 15px;border:1px solid rgba(115,204,255,.14);border-radius:18px;background:rgba(5,18,35,.55);backdrop-filter:blur(12px);position:relative;z-index:3}
.pattern-heading{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:9px}.pattern-heading small{font-size:7px;letter-spacing:1.2px;color:#7f98b1}.pattern-heading strong{font:700 12px Outfit}.pattern-heading span{font-size:8px;color:#ffd45d;border:1px solid rgba(255,212,93,.2);border-radius:999px;padding:3px 7px}
.pattern-vials{display:flex;justify-content:center;gap:7px;overflow-x:auto;padding:5px 2px 2px}.pattern-vial{width:24px;height:96px;border:1.5px solid rgba(215,236,252,.45);border-radius:4px;position:relative;flex:0 0 24px;margin-top:14px}.pattern-vial:before{content:"";position:absolute;width:11px;height:14px;left:50%;top:-15px;transform:translateX(-50%);border:1.5px solid rgba(215,236,252,.45);border-bottom:0;border-radius:2px 2px 0 0}.pattern-chamber{position:absolute;inset:0;overflow:hidden;border-radius:2px;display:flex;flex-direction:column-reverse}.pattern-chamber span{height:25%;width:100%;display:block}
#bottleBoard.pattern-board{margin-top:6px}
@media(max-width:700px){#bottleBoard.hard-one-row{justify-content:flex-start!important}.pattern-target{padding:10px}.pattern-heading{flex-wrap:wrap}.pattern-vials{justify-content:flex-start}}


/* ===== V3.5.2 pour alignment ===== */
.pour-stream-board.active{
  transform:rotate(0deg)!important;
  transform-origin:top center!important;
}

/* ===== V3.5.3 fixed-axis pour ===== */
.pour-stream-board{margin:0!important;translate:none!important;}
.pour-stream-board.active{transform:rotate(0deg)!important;transform-origin:top center!important;}
\n\n/* ===== PrismPour V3.5.6: featured Flow Thought / Water Fact ===== */\n.water-wisdom{\n  margin:18px 0 22px!important;\n  padding:17px 18px 18px!important;\n  border:1px solid rgba(111,218,255,.28)!important;\n  border-radius:18px!important;\n  background:\n    radial-gradient(circle at 12% 18%,rgba(88,218,255,.12),transparent 36%),\n    linear-gradient(125deg,rgba(37,124,181,.18),rgba(101,72,201,.17))!important;\n  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(3,11,26,.20);\n  text-align:left!important;\n  position:relative;\n  overflow:hidden;\n}\n.water-wisdom:before{\n  content:'✦';position:absolute;right:14px;top:10px;font-size:28px;\n  color:rgba(121,222,255,.12);line-height:1;pointer-events:none\n}\n.water-wisdom small{\n  display:inline-block;color:#79e7ff!important;font-weight:800!important;\n  letter-spacing:1.8px!important;font-size:9px!important;\n  background:rgba(76,195,238,.10);border:1px solid rgba(111,218,255,.15);\n  padding:5px 8px;border-radius:999px\n}\n.water-wisdom p{\n  margin:9px 0 0!important;color:#e0edf8!important;font-size:14px!important;\n  line-height:1.55!important;font-weight:600!important;padding-right:18px\n}\n

/* ===== PrismPour V3.5.7 evening polish ===== */

/* Ocean mode wraps naturally again — no horizontal scrolling. */
#bottleBoard.hard-one-row,
#gameBoard.hard-one-row,
.board.hard-one-row{
  flex-wrap:wrap!important;
  justify-content:center!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  max-width:100%!important;
}
#bottleBoard.hard-one-row .game-bottle,
#gameBoard.hard-one-row .game-bottle,
.board.hard-one-row .game-bottle{
  flex:0 0 auto!important;
}

/* Stack the celebration popup and wisdom card without overlapping them. */
.win-backdrop{
  align-content:center;
  overflow-y:auto;
}
.win-stack{
  width:min(440px,100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin:auto;
}
.win-stack .win-modal{width:100%}

/* A distinct floating Flow Thought / Water Fact card. */
.floating-wisdom{
  position:relative;
  margin:0 12px!important;
  padding:18px 20px 19px!important;
  border:1px solid rgba(105,224,255,.38)!important;
  border-radius:20px!important;
  text-align:left;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(120deg,
      rgba(24,115,168,.48),
      rgba(85,66,185,.44),
      rgba(23,139,155,.38))!important;
  background-size:220% 220%!important;
  box-shadow:
    0 14px 42px rgba(0,0,0,.26),
    0 0 28px rgba(84,193,255,.08),
    inset 0 1px rgba(255,255,255,.10)!important;
  backdrop-filter:blur(18px);
  animation:wisdomFloat 4.8s ease-in-out infinite, wisdomGlow 10s ease-in-out infinite alternate;
}
.floating-wisdom:before{
  content:"";
  position:absolute;
  inset:-70% -30%;
  z-index:-1;
  background:
    radial-gradient(circle at 25% 50%,rgba(82,220,255,.18),transparent 28%),
    radial-gradient(circle at 72% 42%,rgba(169,111,255,.18),transparent 31%);
  animation:wisdomDrift 12s linear infinite;
}
.floating-wisdom small{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  margin-bottom:8px;
  border-radius:999px;
  background:rgba(4,18,37,.28);
  border:1px solid rgba(137,230,255,.18);
  color:#8cecff!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:1.7px!important;
}
.floating-wisdom small:before{content:"✦";font-size:9px}
.floating-wisdom p{
  margin:0!important;
  color:#eef9ff!important;
  font:600 15px/1.5 Outfit,system-ui,sans-serif!important;
  text-shadow:0 1px 12px rgba(0,0,0,.18);
}
@keyframes wisdomFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes wisdomGlow{
  0%{background-position:0% 45%}
  100%{background-position:100% 55%}
}
@keyframes wisdomDrift{
  0%{transform:translateX(-8%) rotate(0deg)}
  50%{transform:translateX(8%) rotate(5deg)}
  100%{transform:translateX(-8%) rotate(0deg)}
}
@media(max-width:600px){
  .win-stack{gap:10px}
  .floating-wisdom{margin:0 6px!important;padding:15px 16px!important}
  .floating-wisdom p{font-size:13px!important}
}


/* ===== PrismPour V4.1 ===== */

/* Truly center the game identity regardless of left/right controls. */
.game-topbar{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
}
.game-topbar > #gameBack{justify-self:start!important}
.game-topbar > .game-title{
  grid-column:2!important;
  justify-self:center!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  min-width:0;
  text-align:center!important;
}
.game-topbar > .game-top-actions{
  grid-column:3!important;
  justify-self:end!important;
}
.game-title .game-brand-mark{
  justify-content:center!important;
}
@media(max-width:700px){
  .game-topbar{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:6px;
  }
  .game-top-actions{gap:4px!important}
  .game-volume-control input[type=range]{width:58px!important}
  .game-volume-control>span{display:none}
}

/* Account modal */
.account-modal{width:min(470px,100%)}
.account-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:5px;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.account-tab{
  border:0;
  border-radius:10px;
  padding:10px 12px;
  background:transparent;
  color:#8197ae;
  font:700 11px Outfit;
  cursor:pointer;
}
.account-tab.active{
  color:#eef8ff;
  background:linear-gradient(120deg,rgba(72,154,220,.22),rgba(123,91,234,.18));
  box-shadow:inset 0 0 0 1px rgba(132,214,255,.10);
}
.account-pane label{
  display:block;
  margin:11px 0;
  color:#8da4ba;
  font-size:10px;
  letter-spacing:.7px;
}
.account-pane label span{color:#607a94}
.account-pane input{
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(5,17,33,.74);
  color:#eef8ff;
  outline:none;
}
.account-pane input:focus{
  border-color:rgba(100,218,255,.38);
  box-shadow:0 0 0 3px rgba(91,188,255,.07);
}
.account-error{
  margin:10px 0;
  padding:9px 11px;
  border:1px solid rgba(255,103,126,.18);
  border-radius:10px;
  background:rgba(133,34,60,.12);
  color:#ff9aae;
  font-size:11px;
}
.auth-status{
  margin-left:8px;
  color:#6f8ca7;
  font-size:8px!important;
  letter-spacing:1px;
  text-transform:uppercase;
}
.auth-status.online{color:#6de2bf}

/* Real leaderboard filters */
.leaderboard-filters{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:-25px 0 18px;
}
.leader-filter{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.035);
  color:#8198af;
  font:700 10px Outfit;
  cursor:pointer;
}
.leader-filter.active{
  color:#eff9ff;
  border-color:rgba(102,211,255,.24);
  background:linear-gradient(115deg,rgba(66,155,213,.16),rgba(118,91,222,.14));
}
.leaderboard-empty{
  padding:30px;
  text-align:center;
  color:#738aa1;
}


/* ===== PrismPour V4.2 ===== */

/* Homepage has four feature cards now. */
.mode-row{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:900px){.mode-row{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.mode-row{grid-template-columns:1fr!important}}

/* Play style selector */
.play-style-picker{
  display:grid;grid-template-columns:repeat(2,minmax(0,220px));
  justify-content:center;gap:12px;margin:-18px auto 24px;
}
.play-style{
  border:1px solid var(--line);border-radius:18px;padding:14px 16px;
  background:rgba(255,255,255,.035);color:#8ca2b9;cursor:pointer;
  display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
  text-align:left;column-gap:9px;align-items:center;transition:.2s;
}
.play-style>span{grid-row:1/3;font-size:22px}
.play-style strong{font:700 14px Outfit;color:#cfe0ef}
.play-style small{font-size:9px;color:#6f849c}
.play-style.active{
  border-color:rgba(96,216,255,.28);
  background:linear-gradient(130deg,rgba(47,151,202,.15),rgba(112,85,224,.14));
  transform:translateY(-2px)
}

/* Mode photography — blue game stage remains dominant. */
.game-stage{
  overflow:hidden;
  border-radius:28px;
}
.game-stage:before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.16;mix-blend-mode:screen;
  filter:saturate(.8) contrast(.92) brightness(.78);
  transition:background-image .3s ease,opacity .3s ease;
}
.game-stage.mode-river:before{background-image:linear-gradient(rgba(4,19,39,.40),rgba(4,19,39,.72)),url('../assets/backgrounds/river.jpg')}
.game-stage.mode-lake:before{background-image:linear-gradient(rgba(4,19,39,.42),rgba(4,19,39,.70)),url('../assets/backgrounds/lake.jpg')}
.game-stage.mode-ocean:before{background-image:linear-gradient(rgba(4,19,39,.40),rgba(4,19,39,.68)),url('../assets/backgrounds/ocean.jpg')}
.game-stage .stage-glow,.game-stage .wild-status,.game-stage .bottle-board,.game-stage .game-toast{z-index:2}

/* Challenge timing */
.game-screen.relaxed-mode #timer{color:#77a0bd}
.game-screen.relaxed-mode #timer:after{content:" · ZEN";font-size:7px;letter-spacing:1px;color:#58758f}
.game-screen.challenge-mode #timer{color:#ffdc70;text-shadow:0 0 18px rgba(255,202,77,.18)}

/* Cabinet */
.cabinet-summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px
}
.cabinet-stat{
  border:1px solid var(--line);border-radius:18px;padding:18px;
  background:rgba(255,255,255,.035);text-align:center
}
.cabinet-stat small{display:block;color:#7189a2;font-size:8px;letter-spacing:1.3px}
.cabinet-stat strong{display:block;font:700 28px Outfit;margin-top:6px}
.achievement-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:13px
}
.achievement-card{
  min-height:156px;border:1px solid var(--line);border-radius:20px;padding:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  position:relative;overflow:hidden
}
.achievement-card.locked{opacity:.42;filter:saturate(.55)}
.achievement-icon{font-size:28px;margin-bottom:10px;display:block}
.achievement-card strong{display:block;font:700 15px Outfit}
.achievement-card p{font-size:10px;line-height:1.5;color:#7890a7}
.achievement-badge{
  position:absolute;right:12px;top:12px;border-radius:999px;padding:4px 7px;
  font-size:7px;letter-spacing:1px;background:rgba(95,218,255,.10);color:#7de7ff
}
.achievement-card.locked .achievement-badge{background:rgba(255,255,255,.04);color:#708399}
@media(max-width:800px){.achievement-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.achievement-grid,.cabinet-summary{grid-template-columns:1fr}}

/* Share */
.share-win-btn{margin-top:8px}

/* Win splash/fireworks celebration */
.win-celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.win-celebration span{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,#dfffff 0 18%,#5ddfff 28% 55%,transparent 60%);
  box-shadow:0 0 18px rgba(85,222,255,.45);
  animation:splashPop 1.5s ease-out forwards
}
.win-celebration span:nth-child(3n){background:radial-gradient(circle,#fff1a8 0 18%,#ffb747 28% 55%,transparent 60%)}
.win-celebration span:nth-child(4n){background:radial-gradient(circle,#efc8ff 0 18%,#9f72ff 28% 55%,transparent 60%)}
@keyframes splashPop{
  0%{transform:translate(0,0) scale(.25);opacity:0}
  12%{opacity:1}
  70%{opacity:.95}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.25);opacity:0}
}


/* ===== PrismPour V4.2.2 safe background layering =====
   IMPORTANT: photos live in their own pseudo-layer. They do not alter
   bottle overflow, bottle z-index, or control layout. */

.game-stage{
  position:relative;
  overflow:visible!important;
  border-radius:28px;
  isolation:auto!important;
}

/* Keep photo physically inside the stage bounds, behind everything. */
.game-stage:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0!important;
  border-radius:28px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34!important;
  pointer-events:none;
  filter:saturate(.82) contrast(.94) brightness(.76);
  mix-blend-mode:screen;
}

/* Blue tint above photo but still behind board content. */
.game-stage:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:28px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,15,31,.20),rgba(4,15,31,.38)),
    radial-gradient(ellipse at center,rgba(20,57,91,.08),rgba(2,11,24,.18));
}

.game-stage.mode-river:before{
  background-image:linear-gradient(rgba(4,19,39,.22),rgba(4,19,39,.42)),url('../assets/backgrounds/river.jpg');
}
.game-stage.mode-lake:before{
  background-image:linear-gradient(rgba(4,19,39,.22),rgba(4,19,39,.42)),url('../assets/backgrounds/lake.jpg');
}
.game-stage.mode-ocean:before{
  background-image:linear-gradient(rgba(4,19,39,.22),rgba(4,19,39,.42)),url('../assets/backgrounds/ocean.jpg');
}

/* Explicit content order. Bottles/liquids remain exactly as V4.2 rendered them. */
.game-stage .stage-glow{z-index:2!important}
.game-stage .wild-status{position:relative;z-index:5!important}
.game-stage .bottle-board{
  position:relative;
  z-index:6!important;
  overflow:visible!important;
}
.game-stage .game-toast{z-index:20!important}

/* Controls are OUTSIDE the photo/stage stacking context and always visible. */
.game-controls,
.powerup-bar,
.game-tip,
.pattern-target{
  position:relative;
  z-index:30!important;
  overflow:visible!important;
}

/* Difficulty cards: photo at 50%, no emojis, dark overlay for readability. */
.difficulty-card{
  isolation:isolate;
  background:rgba(6,18,35,.80)!important;
}
.difficulty-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.50;
  pointer-events:none;
}
.difficulty-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,16,31,.18),rgba(5,16,31,.62)),
    radial-gradient(circle at 50% 35%,transparent,rgba(4,14,28,.20) 80%);
  pointer-events:none;
}
.difficulty-card[data-difficulty="easy"]:before{background-image:url('../assets/backgrounds/river.jpg')}
.difficulty-card[data-difficulty="medium"]:before{background-image:url('../assets/backgrounds/lake.jpg')}
.difficulty-card[data-difficulty="hard"]:before{background-image:url('../assets/backgrounds/ocean.jpg')}
.difficulty-card > *{position:relative;z-index:2}
.difficulty-card.featured{background:rgba(6,18,35,.80)!important}
.difficulty-card:hover:before{opacity:.57;transition:opacity .25s ease}

/* Ensure controls never get clipped by any ancestor introduced for stage visuals. */
.game-screen,
.game-screen .screen-inner,
.game-screen .game-shell{
  overflow:visible!important;
}


/* ===== PrismPour V4.2.3 gameplay fixes ===== */
.modal-backdrop{
  z-index:10000!important;
}
.win-backdrop,
#rewardModal,
#loseModal,
#profileModal,
#gameMenuModal{
  z-index:10000!important;
}
.win-stack,
.modal{
  position:relative;
  z-index:10001!important;
}
.win-celebration{
  z-index:10000!important;
}


/* ===== PrismPour V4.2.5 completion-state hardening ===== */

/* The completion layer is a viewport UI, completely independent of game-stage stacking. */
#winModal.modal-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:2147483000!important;
  place-items:center!important;
  background:rgba(1,7,16,.78)!important;
  backdrop-filter:blur(16px)!important;
  overflow-y:auto!important;
  pointer-events:auto!important;
}
#winModal:not(.hidden){
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}
#winModal .win-stack{
  position:relative!important;
  z-index:2147483001!important;
  pointer-events:auto!important;
}
#winModal .win-celebration{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  pointer-events:none!important;
}
body.modal-open{overflow:hidden!important}

/* Once solved, board is visibly finished and cannot receive clicks. */
.bottle-board.game-completed,
.bottle-board.game-completed .game-bottle{
  pointer-events:none!important;
}


/* ===== PrismPour V4.2.7 account state ===== */
.signed-profile-card{
  display:flex;align-items:center;gap:15px;margin:15px 0 16px;padding:16px;
  border:1px solid rgba(111,218,255,.16);border-radius:18px;
  background:linear-gradient(135deg,rgba(45,146,198,.11),rgba(120,83,220,.10));
}
.signed-avatar{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font:700 22px Outfit;
  background:linear-gradient(135deg,#5171ff,#985dff);color:white;
}
.signed-profile-card small{color:#66ddb9!important;font-size:8px!important;letter-spacing:1.4px}
.signed-profile-card strong{display:block;font:700 20px Outfit;margin:3px 0}
.signed-profile-card p{margin:0!important;font-size:10px!important;line-height:1.45!important}
.signed-sync-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px
}
.signed-sync-grid>div{
  text-align:center;padding:12px 8px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.03)
}
.signed-sync-grid small{display:block;font-size:7px!important;color:#7189a2!important;letter-spacing:1px!important}
.signed-sync-grid strong{display:block;margin-top:4px;font:700 18px Outfit}


/* ===== PrismPour V4.3 ===== */

/* Power-ups are now a first-class action row above main controls. */
.prominent-powerups{
  margin:8px auto 11px!important;
  gap:12px!important;
}
.prominent-powerups .powerup-btn{
  min-width:185px!important;
  min-height:48px!important;
  padding:8px 14px!important;
  border-color:rgba(105,214,255,.20)!important;
  background:linear-gradient(120deg,rgba(40,139,197,.13),rgba(111,78,212,.12))!important;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.prominent-powerups .powerup-btn:not(.empty):hover{
  border-color:rgba(106,221,255,.36)!important;
  transform:translateY(-2px);
}
.game-controls{margin-top:0!important}

/* Theme selector */
.music-theme-wrap{position:relative}
.music-theme-btn{
  height:38px;border:1px solid var(--line);border-radius:12px;
  padding:0 12px;background:rgba(255,255,255,.045);color:#bcd0e2;
  font:700 9px Outfit;letter-spacing:1px;cursor:pointer;white-space:nowrap
}
.music-theme-btn:hover{background:rgba(255,255,255,.075)}
.music-theme-menu{
  position:absolute;right:0;top:46px;width:225px;z-index:5000;
  padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(8,20,38,.96);backdrop-filter:blur(20px);
  box-shadow:0 20px 55px rgba(0,0,0,.38)
}
.music-theme-menu>button{
  width:100%;display:grid;grid-template-columns:31px 1fr;align-items:center;
  gap:8px;padding:10px;border:0;border-radius:11px;background:transparent;
  color:#9eb2c5;text-align:left;cursor:pointer
}
.music-theme-menu>button:hover,.music-theme-menu>button.active{
  background:linear-gradient(110deg,rgba(58,161,213,.15),rgba(121,84,225,.13));
  color:#eef9ff
}
.music-theme-menu>button>span{font-size:17px;text-align:center}
.music-theme-menu strong{display:block;font:700 11px Outfit}
.music-theme-menu small{display:block;margin-top:2px;color:#6f879f;font-size:8px}

/* Bigger, richer celebration particles. */
.win-celebration span{
  width:12px!important;height:12px!important;
  box-shadow:0 0 24px rgba(85,222,255,.58)!important;
}
.win-celebration span:nth-child(5n){width:7px!important;height:7px!important}
.win-celebration span:nth-child(7n){width:16px!important;height:16px!important}

/* Keep top controls usable on smaller screens. */
@media(max-width:800px){
  .music-theme-btn{padding:0 9px}
  .music-theme-menu{right:-45px}
}
@media(max-width:560px){
  .prominent-powerups{display:grid!important;grid-template-columns:1fr 1fr!important;width:calc(100% - 24px)}
  .prominent-powerups .powerup-btn{min-width:0!important}
  .music-theme-btn{height:34px;font-size:8px}
}


/* ===== PrismPour V4.3.2 mobile stability ===== */

/* Never allow the app chrome or game board to create sideways page scrolling. */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
  overscroll-behavior-x:none;
}
.app,
.screen{
  width:100%;
  max-width:100vw;
  box-sizing:border-box;
}

/* Screens remain vertically scrollable on mobile. */
@media(max-width:800px){
  html,body{
    min-height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.modal-open){
    position:static!important;
    height:auto!important;
    overflow-y:auto!important;
    touch-action:pan-y!important;
  }
  .screen.active,
  .game-screen.active{
    min-height:100dvh;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  .game-topbar,
  .game-meta,
  .game-stage,
  .prominent-powerups,
  .game-controls,
  .game-tip{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .bottle-board{
    max-width:100%!important;
  }

  /* Controls shrink instead of forcing viewport overflow. */
  .game-controls{
    width:calc(100% - 16px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .game-controls .control-btn{
    min-width:0!important;
    width:100%!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .prominent-powerups{
    max-width:calc(100% - 16px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Only an actually visible modal may lock body scrolling. */
body.modal-open{overflow:hidden!important}


/* ===== PrismPour V4.3.3 Prism pour stability ===== */

/* Hide the rack copy completely while its animated clone is pouring.
   The old 10% ghost was especially visible on Prism bottle #5. */
.game-bottle.pour-source-hidden{
  opacity:0!important;
  transition:opacity .08s linear!important;
}

/* Freeze only the bubble overlay on the moving Prism clone.
   Its rainbow liquid stays visible, but the animated compositor layer
   cannot flicker/jump while the entire bottle is being transformed. */
.prism-pour-clone .segment.prism:after{
  animation:none!important;
  transform:none!important;
  opacity:.82!important;
}
.prism-pour-clone,
.prism-pour-clone .bottle-liquid-chamber,
.prism-pour-clone .segment{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.prism-pour-clone{
  will-change:left,top,transform;
  transform-style:flat!important;
}

/* Keep the vertical stream clean and attached visually to the outside rim. */
.pour-stream-board.active{
  transform:rotate(0deg)!important;
  transform-origin:top center!important;
}


/* ===== PrismPour V4.4: discovery, history & challenge comparison ===== */
.about-prismpour{margin:34px auto 10px;padding:24px 28px;max-width:1120px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:rgba(255,255,255,.025);display:grid;grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr);gap:34px}.about-prismpour h2{font:700 25px/1.14 Outfit;margin:10px 0 0}.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:20px}.about-copy p{margin:0;color:#8197ad;font-size:12px;line-height:1.75}.history-toolbar{margin-top:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}.history-toolbar strong{display:block;font:700 18px Outfit}.history-toolbar small{display:block;margin-top:3px;color:#70869e;font-size:9px}.history-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.history-filter{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.025);color:#7188a0;font:700 8px Outfit;cursor:pointer}.history-filter.active{color:#eef9ff;border-color:rgba(96,214,255,.22);background:rgba(63,157,214,.12)}.history-list{margin-top:12px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.025)}.history-row{display:grid;grid-template-columns:48px minmax(120px,1fr) repeat(4,minmax(70px,.48fr));align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.055)}.history-row:last-child{border-bottom:0}.history-mode{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(80,150,220,.10);font-size:17px}.history-main strong{display:block;font:700 12px Outfit}.history-main small,.history-cell small{display:block;color:#688099;font-size:7px;letter-spacing:.7px}.history-cell strong{display:block;margin-top:2px;font:700 11px Outfit;color:#c9d9e8}.history-empty{padding:28px;text-align:center;color:#70869e;font-size:11px}.challenge-compare{margin:12px 0 4px;padding:12px 14px;border:1px solid rgba(94,219,255,.18);border-radius:14px;background:linear-gradient(120deg,rgba(31,143,198,.10),rgba(111,79,219,.09));font-size:10px;color:#9eb6ca}.challenge-compare strong{display:block;color:#eaf8ff;font:700 13px Outfit;margin-bottom:3px}.challenge-compare.win{border-color:rgba(79,228,168,.25)}.challenge-compare.close{border-color:rgba(255,200,83,.23)}
@media(max-width:780px){.about-prismpour{grid-template-columns:1fr;margin:24px 12px 8px;padding:20px}.about-copy{grid-template-columns:1fr}.history-toolbar{align-items:flex-start;flex-direction:column}.history-filters{justify-content:flex-start}.history-row{grid-template-columns:42px 1fr repeat(2,minmax(64px,.4fr))}.history-row .history-cell:nth-last-child(-n+2){display:none}}


/* ===== PrismPour V4.4.2 leaderboard visibility ===== */
.leaderboard-empty{
  min-height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  border-radius:20px;
}
.leaderboard-empty strong{
  color:#dbeaf7;
  font:700 13px Outfit,sans-serif;
}
.leaderboard-empty span{
  color:#7189a1;
  font-size:9px;
}


/* ===== PrismPour V4.4.3 safe live-fill preview ===== */
.safe-fill-preview{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:hidden;
}
.safe-fill-unit{
  position:absolute;
  left:0;
  width:100%;
  height:25%;
  display:block;
  transform:scaleY(0);
  transform-origin:bottom center;
}
.safe-fill-unit.prism{
  background-size:200% 100%!important;
}






/* ===== PrismPour V4.4.6 true final-state transfer ===== */
.safe-fill-preview{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:hidden;
}

/* Only positioning/reveal differs. Visual treatment comes entirely from .segment. */
.safe-fill-preview .pour-fill-unit.segment{
  position:absolute!important;
  left:0!important;
  width:100%!important;
  height:25%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:inset(100% 0 0 0);
  pointer-events:none!important;
}

/* Critical: final Prism is a STATIC left→right rainbow. Do not sweep it during pour. */
.safe-fill-preview .pour-fill-unit.segment.prism{
  animation:none!important;
  background-size:100% 100%!important;
}

/* Keep bubble phase deterministic across preview → real rerender. */
.segment.prism:after{
  animation-delay:var(--delay,0s)!important;
}
.safe-fill-preview .pour-fill-unit.segment.prism:after{
  animation:wildBubbleRiseV34 4.6s linear infinite!important;
  animation-delay:var(--delay,0s)!important;
}


/* ===== PrismPour V4.4.7 Prism redraw stability ===== */
/* Every Prism segment uses a shared wall-clock phase, preventing its bubbles
   from restarting at frame zero whenever renderGame rebuilds the board. */
.segment.prism:after{
  animation:wildBubbleRiseV34 4.6s linear infinite!important;
  animation-delay:var(--prism-phase,0s)!important;
}

/* The live-fill Prism uses the exact same phase during a pour. */
.safe-fill-preview .pour-fill-unit.segment.prism:after{
  animation:wildBubbleRiseV34 4.6s linear infinite!important;
  animation-delay:var(--prism-phase,0s)!important;
}