:root{--ink:#eaf8ff;--panel:#0c2048;--cyan:#64e6ff;--purple:#9a8eff;--muted:#9eb8d9;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:#06132f}button{font:inherit;-webkit-tap-highlight-color:transparent}.app{width:min(100%,400px);min-height:100vh;margin:auto;padding:max(16px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));overflow:hidden;position:relative;background:radial-gradient(circle at 50% -10%,#17618b 0,transparent 34%),radial-gradient(circle at 12% 61%,rgba(47,72,177,.2),transparent 30%),linear-gradient(145deg,#07152f 0%,#0a1c47 63%,#06142c 100%)}.app:before,.app:after{content:"";position:absolute;width:4px;border-radius:99px;background:linear-gradient(#61d2ff00,#65d6ff,#61d2ff00);opacity:.65}.app:before{top:31%;left:16px;height:115px}.app:after{top:55%;right:16px;height:65px}.topbar{height:54px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.icon-button{width:43px;height:43px;border:1px solid #8ceaff99;border-radius:13px;background:linear-gradient(145deg,#2b92c8,#12639b);box-shadow:inset 0 1px #b9f7ff88,0 5px 0 #083b70,0 9px 17px #0005;cursor:pointer;position:relative}.icon-button:active{transform:translateY(4px);box-shadow:inset 0 1px #b9f7ff88,0 1px 0 #083b70}.restart-mark,.sound-mark,.tool-icon{display:block;position:absolute;inset:0;margin:auto}.restart-mark{width:18px;height:18px;border:3px solid #fff;border-left-color:transparent;border-radius:50%}.restart-mark:after{content:"";position:absolute;top:-5px;left:-2px;border:5px solid transparent;border-right-color:#fff;transform:rotate(21deg)}.sound-mark:before{content:"";position:absolute;left:12px;top:15px;width:7px;height:12px;background:#fff;clip-path:polygon(0 28%,42% 28%,100% 0,100% 100%,42% 72%,0 72%)}.sound-mark:after{content:"";position:absolute;left:22px;top:12px;width:10px;height:17px;border:2px solid #fff;border-top-color:transparent;border-bottom-color:transparent;border-left:0;border-radius:0 50% 50% 0}.icon-button:not(.sound-on) .sound-mark{opacity:.36}.level-badge{min-width:116px;padding:7px 13px;border:2px solid #85e6ff;border-radius:999px;background:linear-gradient(180deg,#8a80d9,#5751a5);box-shadow:inset 0 2px #d8dcff88,0 4px 0 #342b7a;color:#fff;text-align:center;text-shadow:0 2px #372c80}.level-badge span{font-size:12px;font-weight:800;letter-spacing:.08em}.level-badge strong{margin-left:5px;font-size:22px}.mission{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 5px 10px;padding:12px 14px;border:1px solid #71dfff44;border-radius:17px;background:linear-gradient(90deg,#102958d9,#14255299);box-shadow:inset 0 1px #bdefff26}.mission-copy{display:grid;gap:3px;white-space:nowrap}.mission-copy span{color:#64e6ff;font-size:10px;font-weight:900;letter-spacing:.16em}.mission-copy b{font-size:14px}.sample-rack{display:flex;gap:6px}.sample{width:20px;height:29px;border:2px solid #d9fbff;border-radius:5px 5px 8px 8px;position:relative;overflow:hidden;background:#173253}.sample:before{content:"";position:absolute;top:-4px;left:4px;width:8px;height:5px;border:2px solid #d9fbff;border-bottom:0;border-radius:4px 4px 0 0}.sample i{position:absolute;right:0;bottom:0;left:0;height:69%;background:var(--sample);box-shadow:inset 0 3px #ffffff55}.status-line{display:flex;align-items:center;gap:7px;padding:9px 7px;color:#c5e8ff;font-size:13px;font-weight:700}.move-label{margin-left:auto;color:#8fb2d7;font-size:12px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#7bf4e1;box-shadow:0 0 9px #7bf4e1;animation:pulse 1.5s infinite}.bottle-stage{min-height:calc(100vh - 285px);display:grid;grid-template-columns:repeat(4,minmax(56px,1fr));align-content:start;gap:28px 17px;padding:28px 7px 24px;position:relative}.bottle-stage:after{content:"";position:absolute;right:4%;bottom:24px;left:4%;height:17px;border-radius:50%;background:#0006;filter:blur(10px);pointer-events:none}.bottle-wrap{height:180px;display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1;touch-action:none}.bottle{--bottle-w:min(18vw,85px);width:min(100%,var(--bottle-w));height:calc(var(--bottle-w)*1.77);padding:0;border:3px solid #64dfff;border-top:0;border-radius:12px 12px 23px 23px;background:linear-gradient(90deg,#1a3e6738,#c0f5ff1b 45%,#4ec7ee35);box-shadow:inset 6px 0 #c6f9ff32,inset -7px 0 #02244866,0 7px 0 #041832,0 9px 13px #0006;cursor:grab;position:relative;overflow:visible;transform-origin:center 88%;transition:transform .28s cubic-bezier(.2,.85,.35,1.2),filter .15s}.bottle:before{content:"";position:absolute;z-index:2;top:-18px;left:calc(50% - 16px);width:26px;height:18px;border:3px solid #64dfff;border-radius:8px 8px 4px 4px;background:linear-gradient(90deg,#15406d,#8fdbf5,#15375e);box-shadow:inset 2px 0 #e6ffff66}.bottle:after{content:"";position:absolute;z-index:3;top:-3px;left:-3px;width:calc(100% + 6px);height:13px;border:3px solid #64dfff;border-bottom:0;border-radius:50% 50% 0 0;background:#173964aa}.bottle .glass{position:absolute;inset:0;overflow:hidden;border-radius:8px 8px 20px 20px}.liquid{position:absolute;right:0;left:0;height:25%;border-top:2px solid #ffffff99;box-shadow:inset 0 5px #ffffff18,inset 0 -7px #00142b35}.liquid:before{content:"";position:absolute;top:-5px;right:6%;left:6%;height:8px;border-radius:50%;background:#ffffff35}.blue{background:linear-gradient(90deg,#1452d7,#2379ff 55%,#0c3cac)}.lime{background:linear-gradient(90deg,#5b9d07,#9ce22b 53%,#639c08)}.violet{background:linear-gradient(90deg,#6128a2,#a84ee1 55%,#5a278b)}.coral{background:linear-gradient(90deg,#c82631,#ff5961 55%,#ae182b)}.amber{background:linear-gradient(90deg,#d76c00,#ffab1e 55%,#bd5100)}.cyan{background:linear-gradient(90deg,#067ea8,#30c8ef 55%,#066891)}.bottle.selected{filter:drop-shadow(0 0 11px #7af1ff);transform:translateY(-13px)}.bottle.dragging{cursor:grabbing;transform:translateY(-25px) scale(1.05);filter:drop-shadow(0 0 14px #8ef7ff)}.bottle.pour-left{transform:translate(-13px,-15px) rotate(-27deg)}.bottle.pour-right{transform:translate(13px,-15px) rotate(27deg)}.bottle.hint{animation:bounce .55s ease-in-out 2}.stream{width:10px;height:0;position:absolute;z-index:8;top:8px;opacity:0;border-radius:10px;transform-origin:top}.stream.active{height:85px;opacity:1;transition:height .2s ease-out,opacity .12s}.stream.right{left:calc(100% - 3px);transform:rotate(-52deg)}.stream.left{right:calc(100% - 3px);transform:rotate(52deg)}.tool-dock{display:flex;justify-content:center;gap:14px;padding:5px 0 4px;position:relative;z-index:5}.tool-button{width:82px;height:61px;padding:7px 4px 5px;border:1px solid #70ddff77;border-radius:16px;background:linear-gradient(180deg,#194674,#102c5a);box-shadow:inset 0 1px #b8f3ff33,0 5px 0 #071936;color:#e7faff;cursor:pointer;display:grid;place-items:center;gap:1px}.tool-button:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 1px #b8f3ff33,0 1px 0 #071936}.tool-button:disabled{opacity:.38}.tool-button b{font-size:12px}.tool-icon{position:relative;width:23px;height:23px;margin:0}.undo-icon{border:3px solid #78e7ff;border-right-color:transparent;border-radius:50%}.undo-icon:before{content:"";position:absolute;left:-4px;top:-4px;border:6px solid transparent;border-right-color:#78e7ff}.hint-icon{border:3px solid #ffe27b;border-radius:50%}.hint-icon:before{content:"?";position:absolute;inset:-4px;color:#ffe27b;font-weight:900;font-size:20px;line-height:22px}.palette-icon{border-radius:50%;background:conic-gradient(#7eeeff 0 25%,#a58aff 0 50%,#83db46 0 75%,#ffb047 0)}.palette-icon:after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;border-radius:50%;background:#18335e}.toast{position:fixed;z-index:20;bottom:88px;left:50%;padding:10px 15px;border:1px solid #95eaff99;border-radius:99px;background:#0b234ee8;color:#e8fbff;font-size:13px;transform:translate(-50%,18px);opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#030a22b8;opacity:0;visibility:hidden;transition:.25s}.modal.show{opacity:1;visibility:visible}.modal-card{width:min(355px,100%);padding:33px 24px 25px;overflow:hidden;position:relative;border:1px solid #8beaff;border-radius:25px;background:linear-gradient(160deg,#173c70,#0b1e4c);box-shadow:0 18px 50px #000b,inset 0 1px #d9ffff44;text-align:center;transform:translateY(18px) scale(.94);transition:.25s}.modal.show .modal-card{transform:none}.modal-card p{margin:0;color:#74e7ff;font-size:10px;font-weight:900;letter-spacing:.17em}.modal-card h1{margin:8px 0 15px;font-size:31px}.result-stars{display:flex;justify-content:center;gap:9px;color:#ffdb70;font-size:32px;text-shadow:0 2px #b7721c}.result-line{display:flex;justify-content:space-between;margin:17px 5px;color:#b8d7f2;font-size:13px}.next-button{width:100%;padding:13px;border:0;border-radius:14px;background:linear-gradient(#7aeaff,#2998e3);box-shadow:0 5px #1261ae;color:#fff;font-weight:900;cursor:pointer}.next-button:active{transform:translateY(4px);box-shadow:0 1px #1261ae}.sparkles i{position:absolute;width:7px;height:19px;background:#75eaff;transform:rotate(30deg)}.sparkles i:nth-child(1){top:8px;left:12%;background:#ffe078}.sparkles i:nth-child(2){top:-4px;left:32%;background:#b88cff}.sparkles i:nth-child(3){top:8px;right:14%;background:#88e45a}.sparkles i:nth-child(4){top:31px;right:5%;background:#ff8094}.sparkles i:nth-child(5){top:25px;left:4%;background:#79eaff}@keyframes pulse{50%{transform:scale(1.5);opacity:.45}}@keyframes bounce{50%{transform:translateY(-18px) rotate(-4deg)}}@media(max-width:390px){.app{padding-right:13px;padding-left:13px}.bottle-stage{gap:27px 8px}.tool-dock{gap:9px}.tool-button{width:79px}.mission{margin-right:0;margin-left:0}}@media(min-width:580px){.bottle-stage{grid-template-columns:repeat(5,minmax(70px,1fr));gap:33px 28px}.bottle-wrap{height:205px}}

[hidden]{display:none!important}.home-screen{width:min(100%,400px);min-height:100vh;margin:auto;overflow:hidden;position:relative;padding:22px 22px max(25px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 54%,#1d78a9aa 0,transparent 24%),radial-gradient(circle at 50% 29%,#144e8f88 0,transparent 27%),linear-gradient(180deg,#080d37 0%,#0a2457 58%,#080b32 100%);color:#f8fdff}.home-header{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.home-setting{width:45px;height:45px;border:1px solid #78e5ff88;border-radius:14px;background:linear-gradient(#2f9bd7,#175eaa);box-shadow:inset 0 2px #d1ffff77,0 4px #0a397a;position:relative;cursor:pointer}.home-setting span,.home-setting i,.home-setting b{position:absolute;left:50%;top:50%;width:23px;height:4px;border-radius:9px;background:#fff;transform:translate(-50%,-50%)}.home-setting i{transform:translate(-50%,-50%) rotate(60deg)}.home-setting b{transform:translate(-50%,-50%) rotate(-60deg)}.home-status{padding:7px 10px;border:1px solid #80dfff44;border-radius:999px;color:#82e6ff;font-size:10px;font-weight:900;letter-spacing:.15em}.stars-bg i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #a5ecff;animation:twinkle 2.4s infinite}.stars-bg i:nth-child(1){top:12%;left:15%}.stars-bg i:nth-child(2){top:19%;right:13%;animation-delay:.5s}.stars-bg i:nth-child(3){top:39%;left:8%;animation-delay:1s}.stars-bg i:nth-child(4){top:46%;right:12%;animation-delay:1.5s}.stars-bg i:nth-child(5){top:67%;left:22%;animation-delay:2s}.home-hero{position:relative;z-index:1;padding-top:62px;text-align:center}.home-hero p{margin:0;color:#75e9ff;font-size:11px;font-weight:900;letter-spacing:.22em}.home-hero h1{margin:8px 0 8px;color:#ffd45f;font-size:clamp(48px,14vw,66px);font-weight:1000;line-height:.92;letter-spacing:.03em;text-shadow:0 3px #c86619,0 7px #164d9e,0 9px 0 #05235d}.home-hero h1 span{color:#ffb94c}.home-hero b{color:#caefff;font-size:13px}.showcase-bottles{height:350px;display:flex;align-items:flex-end;justify-content:center;gap:23px;position:relative;z-index:1}.showcase-bottles:before{content:"";position:absolute;bottom:21px;width:85%;height:74%;border-radius:50%;background:radial-gradient(ellipse,#6ee6ff77,transparent 67%);filter:blur(5px)}.show-bottle{--show-w:86px;width:var(--show-w);height:calc(var(--show-w)*1.78);position:relative;overflow:hidden;border:4px solid #3cbbfb;border-top:0;border-radius:17px 17px 29px 29px;background:linear-gradient(90deg,#153669bb,#4aa8d822,#092656cc);box-shadow:inset 7px 0 #d6ffff38,inset -9px 0 #061b4d99,0 9px 0 #051331,0 15px 21px #0008}.show-bottle:before{content:"";position:absolute;z-index:2;top:-20px;left:calc(50% - 18px);width:30px;height:19px;border:4px solid #3cbbfb;border-radius:8px 8px 4px 4px;background:#17418b}.show-bottle:after{content:"";position:absolute;z-index:2;top:-4px;left:-4px;width:calc(100% + 8px);height:15px;border:4px solid #3cbbfb;border-bottom:0;border-radius:50% 50% 0 0;background:#15346ccc}.show-bottle.center{--show-w:104px;height:calc(var(--show-w)*1.84);border-color:#6bcfff;box-shadow:inset 9px 0 #e4ffff42,inset -10px 0 #061b4d99,0 0 28px #5fe7ff99,0 9px 0 #051331}.show-bottle .liquid{height:25%}.home-actions{display:grid;grid-template-columns:1fr 1.7fr 1fr;grid-template-rows:67px 64px;gap:13px 14px;align-items:stretch;position:relative;z-index:2}.start-action{grid-column:2;padding:5px;border:1px solid #a8efff;border-radius:18px;background:linear-gradient(#61d8ff,#277eea);box-shadow:inset 0 2px #e2ffff99,0 6px #1050ad;color:#fff;cursor:pointer;text-shadow:0 2px #164493}.start-action small{display:block;font-size:9px;letter-spacing:.17em}.start-action strong{font-size:22px}.start-action span{margin-left:8px;font-size:28px;vertical-align:-2px}.side-action,.rank-action{border:1px solid #9ce9ff77;border-radius:16px;background:linear-gradient(#385dd8,#172e96);box-shadow:inset 0 1px #d9ffff66,0 5px #0d195e;color:#fff;cursor:pointer;display:grid;place-items:center;padding:5px;text-shadow:0 2px #121a61}.side-action.green{background:linear-gradient(#75df80,#208950);box-shadow:inset 0 1px #e6ffe066,0 5px #13552f}.side-action b,.rank-action b{font-size:11px}.medal-shape{width:25px;height:22px;border-radius:50% 50% 9px 9px;background:#ffc34c;border:3px solid #fff2a7}.invite-shape{width:24px;height:17px;border-radius:50% 50% 35% 35%;background:#f1fff2;position:relative}.invite-shape:before{content:"";position:absolute;left:7px;top:-11px;width:10px;height:10px;border-radius:50%;background:#f1fff2}.rank-action{grid-column:1;grid-row:2;background:linear-gradient(#ffc764,#de8c24);box-shadow:inset 0 1px #fff6af,0 5px #a25614}.rank-action span{font-size:14px;font-weight:1000}.settings-panel{position:absolute;z-index:7;top:76px;left:22px;width:180px;padding:14px;border:1px solid #8ceeff;border-radius:15px;background:#112a59f5;box-shadow:0 14px 30px #0008;display:grid;gap:10px}.settings-panel b{color:#82eaff}.settings-panel button{padding:8px;border:1px solid #76dfffa8;border-radius:9px;background:#1e5595;color:#fff;cursor:pointer}.home-toast{position:fixed;z-index:12;bottom:27px;left:50%;max-width:calc(100% - 45px);padding:10px 15px;border:1px solid #8eeaff;border-radius:999px;background:#102a59ed;color:#e9fcff;font-size:13px;transform:translate(-50%,15px);opacity:0;transition:.2s;pointer-events:none}.home-toast.show{opacity:1;transform:translate(-50%,0)}.back-mark{color:#fff;font-size:36px;line-height:30px;font-weight:300}.restart-tool-icon{border:3px solid #7eeaff;border-left-color:transparent;border-radius:50%}.restart-tool-icon:before{content:"";position:absolute;top:-5px;right:-3px;border:5px solid transparent;border-bottom-color:#7eeaff;transform:rotate(21deg)}@keyframes twinkle{50%{opacity:.15;transform:scale(.45)}}
.sample.packed{border-color:#8dffbe;box-shadow:0 0 11px #6dffae}.sample.packed:after{content:'✓';position:absolute;z-index:3;top:-7px;right:-7px;width:14px;height:14px;border-radius:50%;background:#5bdd86;color:#062337;font-size:11px;font-weight:900;line-height:14px;text-align:center}