:root{font-family:ui-rounded,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#eafaff;background:#062e42;font-synthesis:none;font-weight:500;--muted:#9ec8d5;--mint:#83f4da;--line:#c0eeff1c;--yellow:#ffe592}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 42% -20%,#158093 0,transparent 54%),linear-gradient(140deg,#063f55,#062839);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible{outline:3px solid #b2fff0;outline-offset:4px}button:disabled{cursor:default;opacity:.35}button:not(:disabled){transition:transform .18s,background .18s,filter .18s}button:not(:disabled):hover{filter:brightness(1.14)}button:not(:disabled):active{transform:scale(.95)}.sea-light{position:fixed;inset:0 0 auto;height:550px;background:url(/assets/caustics.png) center top/100% 100% no-repeat;opacity:.12;pointer-events:none;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}.bubble-field{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.bubble-field i{position:absolute;border:1px solid #b9f7ff38;border-radius:50%;background:radial-gradient(circle at 28% 20%,#ffffff3b,transparent 40%);animation:rise linear infinite}@keyframes rise{0%{transform:translateY(110vh)}to{transform:translateY(-100px)}}#app{position:relative;max-width:1216px;margin:auto;padding:24px 38px 18px}.topbar{height:87px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.brand{display:flex;gap:23px;align-items:center;text-decoration:none;color:inherit}.brand img{width:130px;filter:drop-shadow(0 8px 12px #01233355)}.brand p{font-size:18px;margin:6px 0 0;letter-spacing:.16em}.eyebrow{font-size:9px;letter-spacing:.2em;color:#99cdd5;font-weight:700}.topbar nav{display:flex;gap:10px;align-items:center}.nav-btn,.round-btn{background:#042c3d5e;border:1px solid #ffffff20;box-shadow:0 2px #011c2929}.nav-btn{padding:11px 16px;border-radius:15px;font-size:12px;display:flex;align-items:center;gap:9px}.grid-icon{font-size:23px;line-height:1}.round-btn{height:44px;width:44px;border-radius:50%;font-size:22px}.round-btn.muted{color:#7da5b6;position:relative}.round-btn.muted:after{content:"";position:absolute;left:12px;top:20px;width:21px;height:2px;background:#7da5b6;transform:rotate(-45deg)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:23px}.ocean-panel{position:relative;overflow:hidden;border:1px solid #a5efff26;border-radius:30px;background:radial-gradient(ellipse at 50% 28%,#17759480,transparent 64%),linear-gradient(160deg,#105069,#06394e);box-shadow:inset 0 1px #ffffff10,0 24px 65px #001c3033}.ocean-panel:before{content:"";position:absolute;inset:auto 0 65px;height:210px;background:url(/assets/rocks.png) center bottom/100% auto no-repeat;opacity:.44;pointer-events:none}.stage-header{display:flex;align-items:center;justify-content:space-between;padding:25px 28px 0;position:relative;z-index:1;gap:20px}.level-heading h1{font-size:25px;letter-spacing:.02em;line-height:1.3;margin:8px 0 0;white-space:nowrap;font-weight:600}.level-heading h1 b{font-variant-numeric:tabular-nums;font-size:29px}.level-heading h1 span{font-size:10px;color:#a7e9e3;background:#92e6da17;padding:5px 8px;border-radius:6px;margin-left:8px;vertical-align:middle;font-weight:400}.progress-wrap{width:160px;flex-shrink:0}.progress-label{display:flex;justify-content:space-between;font-size:10px;color:#aacdd8;margin-bottom:8px}.progress-label b{color:var(--mint);font-variant-numeric:tabular-nums}.progress-track{height:6px;border-radius:5px;background:#06293c;box-shadow:0 1px #ffffff15;overflow:hidden}.progress-track i{height:100%;width:0;display:block;background:linear-gradient(90deg,#32cbb6,#a5ffe8);border-radius:5px;transition:width .25s}#viewport{height:435px;position:relative;cursor:grab;touch-action:none}#viewport:active{cursor:grabbing}#game-canvas{width:100%;height:100%;display:block}.board-tip{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#96c4d6;font-size:11px;letter-spacing:.04em;pointer-events:none}.board-tip span{font-size:18px;margin-right:6px}.view-reset{position:absolute;bottom:0;right:24px;width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:#07374c8c;font-size:24px;color:#9ac7d4}.slots-area{position:relative;background:linear-gradient(#052b3b09,#042d40ba);padding:20px 28px 19px}.section-label{display:flex;justify-content:space-between;align-items:center;color:#acd0dc;font-size:11px;margin-bottom:14px}.section-label>span:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;background:#a7ffdc;border-radius:50%;box-shadow:0 0 8px #9fffd4}.slots{display:flex;justify-content:center;gap:11px}.slot{height:72px;flex:1;max-width:92px;border:1px dashed #a5cfd03b;background:linear-gradient(#04283689,#0c425376);border-radius:17px;position:relative;display:flex;align-items:center;justify-content:center;color:#86b8c345;font-size:22px}.slot.filled{border:1px solid #b4ffeb33;box-shadow:0 0 18px #a6fbe608;background:#13708555}.slot.filled img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 2px #02243380);animation:float 3s ease-in-out infinite}.slot .amount{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding-top:6px;font-size:21px;color:#fff;font-weight:850;text-shadow:0 2px 0 #30212c,1px 0 3px #30212c,-1px 0 3px #30212c}.slot .slot-meter{position:absolute;bottom:5px;height:3px;left:12px;right:12px;background:#032f4566;border-radius:3px;overflow:hidden}.slot-meter i{display:block;height:100%;background:#fffcb9;transition:width .1s}.slot .link-badge{right:3px;top:3px;font-size:9px;padding:2px 4px}.slot-caption{text-align:center;color:#c8e6e7;font-size:11px;margin-top:15px;min-height:16px}.slot-caption.warn{color:#ffdf9c}.queue-panel{border:1px solid var(--line);border-radius:28px;padding:26px 22px 20px;background:linear-gradient(170deg,#104355c9,#0b3445cb);display:flex;flex-direction:column;box-shadow:inset 0 1px #ffffff06}.queue-heading{display:flex;align-items:center;justify-content:space-between}.queue-heading h2{font-size:21px;margin:8px 0 0;letter-spacing:.06em}.counter-pill{border:1px solid #b3e5e328;border-radius:20px;padding:7px 10px;font-size:11px;color:#b8dedb}.queue-instruction{font-size:12px;line-height:1.8;color:#9bbfcd;margin:16px 0 24px}.queues{display:grid;gap:10px;flex:1;align-items:start;min-height:235px}.queue-column{display:flex;flex-direction:column;gap:7px;align-items:center;position:relative;min-width:0}.batch{width:100%;height:78px;max-width:96px;background:transparent;position:relative;display:grid;place-items:center;border-radius:16px;padding:0;transform-origin:center}.batch img{width:76px;height:76px;max-width:100%;object-fit:contain;filter:drop-shadow(0 5px 3px #00182466)}.batch .amount{position:absolute;left:0;right:0;text-align:center;top:31px;font-weight:850;font-size:23px;color:#fff;text-shadow:0 2px 0 #3e292b,1px 0 2px #3e292b,-1px 0 2px #3e292b;line-height:1}.batch.front{background:#a1e7e308;border:1px solid #a6efe522;box-shadow:0 6px 14px #001f2b30}.batch.front:not(:disabled):hover{background:#a1e7e31b;transform:translateY(-4px)}.batch.back{opacity:.68;pointer-events:none;transform:scale(.87)}.batch.back+.batch.back{opacity:.42;transform:scale(.74);margin-top:-12px}.batch:disabled{opacity:.65}.batch.hidden-shell .amount{font-size:24px}.batch.hinted{outline:2px solid #a5ffe0;background:#5cf1b626;animation:hint 1s infinite}.queue-column.empty{min-height:230px;justify-content:center;border:1px dashed #96c4cf17;border-radius:16px;color:#81afba55}.more-count{font-size:10px;color:#84b3c2;letter-spacing:.03em;padding-top:2px}.link-badge{position:absolute;top:4px;right:2px;border:1px solid #ffd37e55;background:#173e4ed9;color:#ffdfa1;font-size:9px;padding:3px 5px;border-radius:10px;z-index:1}.queue-bottom{display:flex;justify-content:space-between;margin:10px 0 22px;font-size:10px;color:#82b3c3}.queue-direction{color:#b4d8dc}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:20px;border-top:1px solid var(--line)}.tools button{background:#164b5d65;border:1px solid #c1ffff14;border-radius:15px;display:flex;align-items:center;flex-direction:column;height:72px;position:relative;gap:5px}.tool-icon{font-size:26px;line-height:34px;margin-top:2px;color:#c8e8db}.tools strong{font-size:10px;font-weight:500;color:#d1e7e5}.tools small{position:absolute;right:5px;top:4px;width:14px;height:14px;background:#ffe09b;color:#5f552b;border-radius:50%;font-size:9px;display:grid;place-items:center}.tidbit{margin-top:18px;border-radius:12px;background:#07334455;padding:11px 10px;display:flex;align-items:flex-start;gap:8px}.tidbit-icon{color:#b7e0cd;font-size:16px;line-height:1.8}.tidbit p{color:#93b8c6;font-size:10px;line-height:1.8;margin:0}.footer{display:flex;align-items:center;justify-content:space-between;margin-top:22px;font-size:10px;color:#7aa7b7}.footer>span{display:flex;align-items:center;gap:6px}.footer i{width:4px;height:4px;background:#7de6c9;border-radius:50%}.footer>div{display:flex;align-items:center;gap:20px}.footer button{background:transparent;padding:6px 0;color:#a4c9d1;font-size:11px}#toast{position:absolute;left:50%;bottom:45px;transform:translate(-50%,10px);max-width:90%;width:max-content;background:#032534ec;border:1px solid #80cfc744;box-shadow:0 7px 18px #01233433;color:#def9ec;border-radius:30px;padding:10px 18px;font-size:12px;opacity:0;transition:.25s;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translate(-50%)}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:13px;color:#a0e5e5;background:#0b4256;z-index:3}#loading.hidden{display:none}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#001a2ad6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px}.hidden{display:none!important}.modal-card{background:linear-gradient(160deg,#185369,#0b364b);border:1px solid #b2f4f531;border-radius:28px;max-width:460px;width:100%;padding:38px 30px 30px;position:relative;box-shadow:0 25px 100px #0008;text-align:center;max-height:90svh;overflow:auto}.modal-close{position:absolute;top:10px;right:13px;background:transparent;width:32px;height:32px;border-radius:50%;font-size:24px;color:#97bcca}.modal-logo{width:145px}.modal h2{font-size:28px;margin:16px 0 12px;letter-spacing:.05em}.modal p{font-size:13px;color:#b7d8dc;line-height:1.9;margin:12px 0 24px}.modal .primary{display:block;background:linear-gradient(#b8fdd9,#70dfb5);color:#164f47;font-size:14px;font-weight:750;border-radius:15px;padding:15px 22px;width:100%;box-shadow:0 4px #438779;margin-top:15px}.modal .secondary{display:block;width:100%;background:#07364a60;border:1px solid #b9e2ed28;border-radius:14px;padding:12px;color:#d1eced;font-size:12px;margin-top:14px}.result-icon{font-size:42px;color:#ffe6a0;text-shadow:0 4px 25px #ffd04a55}.result-stat{display:flex;justify-content:center;gap:35px;margin:24px 0}.result-stat b{display:block;font-size:24px;color:#fff1ba;font-variant-numeric:tabular-nums}.result-stat span{font-size:10px;color:#a9ced2}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;text-align:center}.level-grid button{background:#082d3f99;border:1px solid #a1cddd25;border-radius:12px;height:49px;font-size:14px;color:#c8e9ed}.level-grid button.current{outline:2px solid #8af3d0;background:#2b776f}.level-grid button.done{color:#f4df9d}.help-steps{text-align:left;display:grid;gap:15px;margin:20px 0 25px}.help-steps>div{display:flex;gap:12px;align-items:center;color:#b8d5db;font-size:12px;line-height:1.8}.help-steps b{border:1px solid #b1e4e335;flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff4c9}.help-steps img{width:48px;margin-left:auto}.error-message{padding:24px;color:#ffe3a3;font-size:14px;line-height:1.8}@keyframes float{50%{transform:translateY(-3px)}}@keyframes hint{50%{box-shadow:0 0 20px #7efed966}}@media(min-width:1400px){#app{padding-top:40px}.game-layout{gap:28px}.topbar{margin-bottom:26px}#viewport{height:465px}}@media(max-width:950px){#app{padding:18px 22px}.brand div{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.queue-panel{padding:23px 17px}.stage-header{padding:23px 20px 0;align-items:flex-start;gap:10px}.level-heading h1 span{display:none}.progress-wrap{width:120px;margin-top:15px}.slots-area{padding:18px}.slots{gap:7px}.slot{height:62px}.slot.filled img{width:54px;height:54px}}@media(max-width:700px){#app{max-width:490px;padding:10px 14px 22px}.topbar{height:63px;margin-bottom:12px}.brand img{width:98px}.topbar nav{gap:8px}.nav-btn{padding:8px 10px;font-size:10px;border-radius:12px}.grid-icon{font-size:20px}.round-btn{width:37px;height:37px;font-size:19px}.round-btn.muted:after{left:9px;top:17px}.game-layout{display:flex;flex-direction:column;gap:13px}.ocean-panel{border-radius:24px}.stage-header{padding:18px 20px 0;align-items:center}.level-heading h1{font-size:20px;margin-top:5px}.level-heading h1 b{font-size:24px}.eyebrow{font-size:8px}.progress-wrap{width:126px;margin-top:6px}.progress-label{font-size:9px}#viewport{height:300px}.board-tip{bottom:7px;font-size:10px}.view-reset{right:15px;bottom:2px;width:30px;height:30px;font-size:22px}.slots-area{padding:13px 18px 14px}.section-label{margin-bottom:10px;font-size:10px}.slots{gap:7px}.slot{height:60px;border-radius:14px}.slot .amount{font-size:19px}.slot.filled img{height:52px;width:52px}.slot-caption{font-size:10px;margin-top:12px}.queue-panel{padding:18px 17px 16px;border-radius:24px;display:block;position:relative}.queue-heading h2{font-size:17px;margin-top:5px}.queue-heading .eyebrow{display:none}.counter-pill{font-size:10px;padding:5px 9px}.queue-instruction{font-size:10px;margin:10px 0 13px;line-height:1.7}.queue-instruction br{display:none}.queues{min-height:140px;gap:7px;margin:0 4px}.queue-column{gap:0}.batch{height:65px;max-width:75px}.batch img{height:62px;width:62px}.batch .amount{top:27px;font-size:20px}.batch.back{height:46px;transform:scale(.78);margin-top:0}.batch.back+.batch.back{display:none}.queue-column.empty{min-height:130px}.more-count{padding-top:5px;font-size:9px}.queue-bottom{margin:10px 3px 14px;font-size:9px}.tools{padding-top:12px;gap:9px}.tools button{height:44px;border-radius:13px;flex-direction:row;justify-content:center;gap:7px}.tool-icon{font-size:23px;line-height:1;margin:0}.tools strong{font-size:10px}.tools small{top:3px;right:4px;width:12px;height:12px;font-size:8px}.tidbit{display:none}.footer{margin-top:14px;font-size:9px}.footer>div{gap:13px}.footer button{font-size:10px}.footer>span{font-size:9px}.modal-card{padding:32px 24px 25px}.modal h2{font-size:24px}.link-badge{font-size:8px;right:-3px}.queue-panel:has(.queues[data-columns="5"]) .batch .amount{font-size:17px}.queues[data-columns="5"] .batch img{width:55px}.level-grid{gap:7px}}@media(max-width:380px){#app{padding:9px 10px 18px}.nav-btn span:last-child{display:none}#viewport{height:270px}.footer>span{display:none}.footer{justify-content:center}.progress-wrap{width:112px}.slots-area{padding:12px 14px}.slot{height:53px}.queue-panel{padding:15px}.slot.filled img{width:47px;height:47px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:700px)and (max-height:900px){#viewport{height:clamp(220px,28svh,250px)}.queue-instruction,.queue-bottom{display:none}.queues{min-height:114px;margin-top:12px;margin-bottom:9px}.queue-column.empty{min-height:114px}.queue-panel{padding-top:14px;padding-bottom:12px}.queue-heading h2{margin-top:0}.tools{padding-top:10px}.batch.back{height:38px}.more-count{padding-top:3px}.footer{margin-top:10px}.slot-caption{margin-top:9px}.topbar{margin-bottom:10px}}@media(max-width:700px)and (max-height:900px){.batch.back{height:43px}.batch.back img{width:46px;height:46px}.batch.back .amount{top:18px;font-size:17px}.batch.back .link-badge{top:-2px}.more-count{padding-top:4px}}