:root{font-family:Inter,ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17314d;background:#eef8ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{min-width:320px;min-height:100vh;overflow-x:hidden}button{font:inherit}.game-shell{min-height:100vh;width:100%;overflow:hidden;position:relative;padding:max(14px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.96) 0 16%,transparent 42%),radial-gradient(circle at 90% 18%,rgba(184,226,255,.55),transparent 34%),linear-gradient(180deg,#f9fdff,#eaf7ff 58%,#dff2fb)}.bubble-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}.bubble-bg i{position:absolute;display:block;border:1px solid rgba(255,255,255,.75);background:#ffffff2e;border-radius:50%;animation:drift 7s ease-in-out infinite alternate}.bubble-bg i:nth-child(1){width:70px;height:70px;left:-25px;top:18%}.bubble-bg i:nth-child(2){width:34px;height:34px;right:8%;top:11%;animation-delay:-2s}.bubble-bg i:nth-child(3){width:52px;height:52px;right:-16px;top:55%;animation-delay:-4s}.bubble-bg i:nth-child(4){width:24px;height:24px;left:12%;bottom:8%;animation-delay:-1s}@keyframes drift{to{transform:translateY(18px) translate(6px)}}.topbar,.board-wrap,.bottom-tools{position:relative;z-index:2;max-width:520px;margin-inline:auto}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.icon-btn,.tool-btn,.primary-btn{border:0;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,opacity .12s ease,box-shadow .2s ease}.icon-btn:active,.tool-btn:active,.primary-btn:active{transform:scale(.96)}.icon-btn:disabled,.tool-btn:disabled{opacity:.42;cursor:default}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;color:#365a79;background:#ffffffb8;box-shadow:0 7px 20px #396f971a,inset 0 0 0 1px #ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-copy{text-align:center}.title{margin:0;font-size:clamp(24px,7vw,34px);line-height:1;letter-spacing:-.04em;color:#183853}.level-label{margin-top:6px;color:#6e8ca5;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.header-right{display:flex;justify-content:flex-end;gap:8px}.stats{margin:20px auto 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:420px}.stat{padding:9px 8px;text-align:center;border-radius:16px;background:#ffffff94;border:1px solid rgba(255,255,255,.86);box-shadow:0 5px 18px #3a6c8e0f}.stat b{display:block;color:#254763;font-size:17px}.stat span{display:block;margin-top:2px;color:#83a0b7;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.message{min-height:25px;margin:8px auto 4px;text-align:center;color:#64839b;font-weight:700;font-size:13px}.board-wrap{padding:4px 2px 8px}.board{--cols: 4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:end;justify-items:center;gap:clamp(16px,5vw,26px) clamp(7px,2.5vw,15px);padding:10px 0 4px;min-height:340px}.tube{position:relative;width:min(64px,15vw);min-width:50px;aspect-ratio:.53;border:0;padding:0;background:transparent;cursor:pointer;touch-action:manipulation;transform-origin:50% 92%;transition:transform .16s ease,filter .16s ease}.tube:after{content:"";position:absolute;left:12%;right:12%;bottom:-8px;height:9px;border-radius:50%;background:#375f7a1f;filter:blur(2px);transition:transform .15s ease,opacity .15s ease}.tube.selected{transform:translateY(-12px);filter:drop-shadow(0 8px 8px rgba(70,117,148,.18))}.tube.selected:after{transform:translateY(12px) scale(.8);opacity:.65}.tube.invalid{animation:shake .28s ease}@keyframes shake{25%{transform:translate(-5px)}55%{transform:translate(5px)}80%{transform:translate(-3px)}}.tube.pour-left{animation:pourLeft .52s ease-in-out;z-index:8}.tube.pour-right{animation:pourRight .52s ease-in-out;z-index:8}@keyframes pourLeft{0%{transform:translateY(-12px)}38%,70%{transform:translate(-18px,-32px) rotate(-58deg)}to{transform:none}}@keyframes pourRight{0%{transform:translateY(-12px)}38%,70%{transform:translate(18px,-32px) rotate(58deg)}to{transform:none}}.glass{position:absolute;inset:6px 6px 2px;border:4px solid rgba(91,143,176,.48);border-top:0;border-radius:0 0 24px 24px;background:linear-gradient(90deg,#ffffff2e,#ffffffb8 36%,#ffffff29);box-shadow:inset 4px 0 #ffffff8c,inset -3px 0 #7ab7d814;overflow:hidden}.glass:before,.glass:after{content:"";position:absolute;top:-3px;width:10px;height:4px;border-radius:10px;background:#548caf94;z-index:5}.glass:before{left:-1px}.glass:after{right:-1px}.liquid-stack{position:absolute;inset:0;overflow:hidden;border-radius:0 0 19px 19px}.liquid{position:absolute;left:0;right:0;height:25%;bottom:calc(var(--slot) * 25%);background:var(--color);box-shadow:inset 0 4px 6px #ffffff2b,inset 0 -3px 4px #0000000d;transform-origin:center bottom}.liquid.top:before{content:"";position:absolute;left:-4%;right:-4%;top:-4px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--color) 90%,white 10%);box-shadow:0 -1px 2px #ffffff73 inset}.stream{position:fixed;width:8px;height:58px;background:var(--stream-color, #7ec8ff);border-radius:999px;opacity:0;pointer-events:none;z-index:50;transform-origin:top center;box-shadow:inset 2px 0 #ffffff40}.stream.active{animation:stream .34s ease .13s both}@keyframes stream{0%{opacity:0;transform:scaleY(.2)}20%{opacity:.9}80%{opacity:.9}to{opacity:0;transform:scaleY(1)}}.bottom-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:360px;margin-top:12px}.tool-btn{min-height:48px;border-radius:17px;background:#ffffffc7;color:#365a78;font-weight:850;box-shadow:0 8px 22px #3064891a,inset 0 0 0 1px #fffffff2}.tool-btn .emoji{margin-right:6px}.win-overlay{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:#e3f5ff94;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.22s ease}.win-overlay.show{opacity:1;visibility:visible}.win-card{width:min(360px,92vw);padding:24px 22px 20px;border-radius:28px;text-align:center;background:#ffffffed;border:1px solid rgba(255,255,255,.95);box-shadow:0 24px 80px #295b7f33;transform:translateY(12px) scale(.96);transition:transform .25s cubic-bezier(.2,.8,.2,1)}.win-overlay.show .win-card{transform:none}.trophy{font-size:54px;line-height:1}.win-card h2{margin:11px 0 5px;font-size:29px;color:#1f405c}.win-card p{margin:0 0 16px;color:#7895aa;font-weight:700}.win-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}.win-grid div{padding:10px;border-radius:15px;background:#f1f9fd}.win-grid b{display:block;color:#294d68;font-size:19px}.win-grid span{font-size:10px;color:#8aa4b7;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.primary-btn{width:100%;min-height:52px;border-radius:17px;background:linear-gradient(135deg,#4bb6f1,#477ce8);color:#fff;font-weight:900;box-shadow:0 10px 24px #4486dd40}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:90}.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:3px;animation:fall 1.8s linear forwards}@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(620deg)}}@media(max-width:380px){.game-shell{padding-inline:10px}.board{gap:14px 5px;min-height:320px}.tube{width:min(58px,15.5vw)}.stats{margin-top:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}