/* filepath: games/water-sort/css/style.css */
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Noto Sans CJK SC,sans-serif;color:#46372f;background:#f7f3ec;--ink:#46372f;--muted:#8d7869;--wood:#b98a5e;--coral:#d9674f;--cream:#fffaf3;--line:#dfcdb9;--shadow:0 24px 60px rgba(116,76,48,.16)}*{box-sizing:border-box}html{overscroll-behavior:none}body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 18% 5%,#fffdf7 0 16%,transparent 40%),linear-gradient(135deg,#f7f3ec,#f2e8db 55%,#f9f0e6);position:relative}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(rgba(104,71,47,.14) .7px,transparent .7px);background-size:6px 6px;mix-blend-mode:multiply}.ambient{position:fixed;border-radius:50%;filter:blur(8px);pointer-events:none;opacity:.45;animation:drift 16s ease-in-out infinite alternate}.ambient-a{width:42vw;height:42vw;right:-14vw;top:8vh;background:radial-gradient(circle,#f5bb91,transparent 70%)}.ambient-b{width:34vw;height:34vw;left:-13vw;bottom:4vh;background:radial-gradient(circle,#c8ddca,transparent 70%);animation-delay:-6s}@keyframes drift{to{transform:translate(18px,-12px) scale(1.05)}}#app{max-width:1440px;margin:0 auto;padding:18px 28px max(76px,calc(34px + env(safe-area-inset-bottom)));position:relative;z-index:1}.topbar{height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.home-link,.icon-btn{color:var(--ink);text-decoration:none;border:1px solid rgba(120,83,54,.18);background:rgba(255,252,245,.7);box-shadow:0 5px 14px rgba(105,70,45,.08);border-radius:14px;min-height:42px}.home-link{display:inline-flex;align-items:center;gap:10px;padding:0 15px;width:max-content;font-size:13px;font-weight:700}.home-link span:first-child{font-size:22px;color:var(--coral)}.brand{display:flex;align-items:center;gap:11px;text-align:center}.brand-mark{font-size:35px;line-height:1;color:var(--coral);transform:rotate(-18deg);text-shadow:0 2px #f5bf9e}.brand h1{font-size:22px;letter-spacing:.08em;margin:0;font-weight:850}.brand p{margin:3px 0 0;color:var(--muted);font-size:10px;letter-spacing:.2em}.top-actions{display:flex;justify-content:flex-end;gap:9px}.icon-btn{width:43px;cursor:pointer;font-weight:800;font-size:12px;transition:.18s}.icon-btn:hover,.tool-btn:hover,.primary-btn:hover{transform:translateY(-2px)}.icon-btn:active,.tool-btn:active,.primary-btn:active{transform:translateY(2px)}button{font:inherit;color:inherit}.lab-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:stretch;margin-top:18px}.bench{min-height:760px;border-radius:30px;padding:25px 30px 20px;background:linear-gradient(150deg,rgba(255,253,247,.92),rgba(247,238,226,.95));border:1px solid rgba(163,114,76,.22);box-shadow:var(--shadow);position:relative;overflow:hidden}.bench:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-28px;height:96px;background:linear-gradient(180deg,#c89b6f,#a9794f);border-top:8px solid rgba(105,65,40,.12);box-shadow:0 -8px 25px rgba(100,64,37,.14);transform:perspective(260px) rotateX(5deg);transform-origin:bottom;z-index:0}.bench>*{position:relative;z-index:1}.bench-header{display:flex;justify-content:space-between;align-items:flex-start}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:900;color:#b26b57}.bench h2{margin:5px 0 0;font-size:clamp(24px,3vw,37px);letter-spacing:-.04em}.level-chip{display:flex;align-items:baseline;gap:5px;padding:9px 13px;border-radius:13px;background:#fff8ec;border:1px solid #e4cdb0;color:var(--muted);font-size:12px;box-shadow:0 4px 10px rgba(120,75,40,.08)}.level-chip strong{font-size:26px;color:var(--coral);line-height:1}.tube-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:38px 10px;max-width:100%;margin:52px auto 34px;align-items:start;align-content:start;grid-auto-flow:row;justify-items:center;position:relative}.tube{width:94px;height:248px;border:0;background:transparent;padding:8px 8px 4px;position:relative;cursor:pointer;transition:transform .18s;filter:drop-shadow(0 8px 7px rgba(87,53,31,.12))}.tube:before{content:"";position:absolute;inset:0 5px 0;border-radius:27px 27px 19px 19px;border:3px solid rgba(126,103,91,.43);background:linear-gradient(105deg,rgba(255,255,255,.72) 0 9%,rgba(255,255,255,.12) 10% 45%,rgba(212,230,228,.22) 70%,rgba(255,255,255,.6));box-shadow:inset 7px 0 10px rgba(255,255,255,.45),inset -6px 0 11px rgba(93,101,99,.11)}.tube:after{content:"";position:absolute;top:-7px;left:7px;right:7px;height:16px;border-radius:50%;border:3px solid rgba(126,103,91,.48);background:rgba(255,255,255,.52);box-shadow:0 3px 0 rgba(255,255,255,.55)}.tube:hover{transform:translateY(-5px)}.tube.selected{transform:translateY(-13px);filter:drop-shadow(0 12px 13px rgba(211,93,70,.35))}.tube.selected:after{box-shadow:0 0 0 6px rgba(218,103,79,.18),0 0 20px 5px rgba(218,103,79,.35)}.tube.shape-2{width:88px}.tube.shape-2:before{border-radius:30px 30px 16px 16px}.tube.shape-3{width:102px}.tube.shape-3:before{border-radius:26px 26px 12px 12px;inset:0 1px}.tube.shape-3 .liquid-stack{left:9px;right:9px}.tube.pouring{animation:pouring .48s ease}.tube.receiving{animation:receiving .48s ease}@keyframes pouring{35%{transform:translateY(-9px) rotate(-7deg)}70%{transform:translateY(-4px) rotate(4deg)}}@keyframes receiving{45%{transform:translateY(-4px) scale(1.045)}75%{transform:translateY(0) scale(.98)}}.tube.invalid{animation:shake .28s ease}.tube.hint{animation:hintPulse .75s ease 2}.tube.solved:before{border-color:rgba(211,157,73,.75)}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@keyframes hintPulse{50%{transform:translateY(-9px) scale(1.04);filter:drop-shadow(0 0 16px rgba(224,168,64,.8))}}.liquid-stack{position:absolute;z-index:2;left:12px;right:12px;bottom:9px;height:222px;display:flex;flex-direction:column-reverse;justify-content:flex-start;overflow:hidden;border-radius:16px 16px 13px 13px}.liquid{height:25%;min-height:25%;position:relative;border-top:1px solid rgba(255,255,255,.34);box-shadow:inset 0 5px 5px rgba(255,255,255,.12),inset 0 -5px 7px rgba(75,44,35,.11);background:var(--liquid)}.liquid:first-child{border-radius:0 0 11px 11px}.liquid:last-child{border-radius:11px 11px 0 0}.liquid:after{content:"";position:absolute;left:13%;right:13%;top:5px;height:4px;border-radius:50%;background:rgba(255,255,255,.33)}.liquid:before{content:"·  ·";position:absolute;right:12px;top:27px;font-size:14px;color:rgba(255,255,255,.35);letter-spacing:5px}.empty-mark{position:absolute;z-index:2;top:110px;left:0;right:0;text-align:center;color:rgba(117,99,88,.28);font-size:23px}.tube-label{position:absolute;bottom:-26px;left:0;right:0;text-align:center;color:#9a765d;font-size:10px;font-weight:800}.bench-foot{position:absolute;left:30px;right:30px;bottom:18px;display:flex;gap:9px;align-items:center;color:#fff7e8;font-size:12px;font-weight:750;z-index:2;background:linear-gradient(180deg,rgba(111,69,38,.7),rgba(83,47,26,.62));border:1px solid rgba(255,239,204,.5);border-radius:12px;padding:8px 11px;box-shadow:0 5px 12px rgba(73,40,21,.22),inset 0 1px rgba(255,249,226,.28)}.hint-dot{width:8px;height:8px;background:#ffe2a0;border-radius:50%;box-shadow:0 0 0 5px rgba(255,226,160,.18),0 0 9px rgba(255,226,160,.6);flex:none}.shortcut{margin-left:auto;color:#fff0d1;font-size:11px;font-weight:750;text-shadow:0 1px 2px rgba(54,29,15,.45)}.record-panel{display:flex;flex-direction:column;gap:14px}.record-card,.score-card,.console-card,.daily-card{border:1px solid rgba(163,114,76,.2);box-shadow:0 15px 30px rgba(117,76,43,.1);background:rgba(255,251,244,.86);border-radius:22px}.record-card{padding:22px}.card-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#af7a61;font-weight:900}.chapter-name{font-size:29px;font-weight:900;margin:8px 0 3px}.record-card p{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 18px}.progress-track{height:7px;border-radius:9px;background:#eadcca;overflow:hidden}.progress-track i{display:block;height:100%;background:linear-gradient(90deg,#e49364,#cd5d54);border-radius:9px;transition:width .3s}.score-card{padding:12px 20px}.score-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed #e5d5c3;font-size:12px;color:var(--muted)}.score-row:last-child{border:0}.score-row strong{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}.score-row:first-child strong{color:var(--coral)}.console-card{padding:18px}.console-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}.tool-btn{border:1px solid #dbc2a7;background:linear-gradient(180deg,#fffdf8,#f1e1cd);border-radius:13px;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;box-shadow:0 4px 0 #d0b395,0 8px 12px rgba(108,65,35,.08);transition:.18s}.tool-btn span{font-size:25px;color:var(--coral);line-height:1}.tool-btn b{font-size:11px}.text-btn{border:0;background:none;cursor:pointer;color:#b75c4d;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}.console-card .text-btn{display:block;margin:0 auto}.daily-card{padding:14px;display:flex;align-items:center;gap:10px;background:linear-gradient(125deg,#fff7e4,#f9ead8)}.daily-seal{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e3a455;color:#fff9ed;box-shadow:0 3px 0 #bd7e3d}.daily-card b{font-size:13px}.daily-card p{margin:3px 0 0;color:var(--muted);font-size:10px}.daily-card button{margin-left:auto;border:0;background:#d66b4f;color:white;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:800;cursor:pointer}.modal{position:fixed;inset:0;background:rgba(75,47,34,.35);backdrop-filter:blur(8px);z-index:10;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.modal-inner{position:relative;width:min(620px,100%);max-height:min(700px,90vh);overflow:auto;padding:30px;border-radius:25px;background:#fffaf2;box-shadow:0 25px 80px rgba(56,36,27,.28)}.modal-inner h2{margin:7px 0 20px;font-size:30px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px;color:#ad8068;cursor:pointer}.level-list{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.level-option{border:1px solid #e1cdb8;background:#fffdf8;border-radius:12px;padding:11px 5px;cursor:pointer}.level-option strong{display:block;font-size:18px;color:var(--coral)}.level-option small{font-size:10px;color:var(--muted)}.level-option.current{background:#f8dfc9;border-color:#d9795e}.help-inner li{margin:13px 0;color:#6b5547;line-height:1.65}.primary-btn{border:0;background:linear-gradient(135deg,#da7555,#c6534e);color:white;border-radius:13px;padding:12px 19px;font-weight:850;cursor:pointer;box-shadow:0 4px 0 #a9403d,0 8px 15px rgba(182,75,62,.2);transition:.18s}.help-inner .primary-btn{display:block;margin:23px auto 0}.result-inner{text-align:center}.result-score{margin:13px 0 18px;color:#b17444}.result-score strong{font-size:58px;letter-spacing:-.07em;color:var(--coral)}.result-stats{display:flex;justify-content:center;gap:30px;margin-bottom:15px}.result-stats span{display:grid;gap:3px}.result-stats b{font-size:23px}.result-stats small{font-size:10px;color:var(--muted)}#result-note{color:#c77c44;font-weight:800;min-height:18px}.result-actions{display:flex;gap:15px;justify-content:center;align-items:center;margin-top:20px}.no-script{position:fixed;inset:20px;background:#fff;padding:30px;z-index:20}@media (max-width:900px){#app{padding:12px 14px 25px}.lab-shell{grid-template-columns:1fr}.record-panel{display:grid;grid-template-columns:1fr 1fr}.console-card,.daily-card{grid-column:span 1}.bench{min-height:700px}.tube-grid{gap:34px 13px}.shortcut{display:none}}@media (max-width:600px){.topbar{display:flex;justify-content:space-between;gap:8px;position:relative}.brand{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.home-link{z-index:2;padding:0 10px}.top-actions{z-index:2;gap:4px;margin-left:auto}.tube-grid{width:100%;min-width:0}.tube{min-width:0}.icon-btn{width:34px;min-height:38px}.brand p{display:none}.brand h1{font-size:18px}.brand-mark{font-size:28px}.lab-shell{margin-top:13px}.bench{padding:19px 12px 15px;border-radius:24px;min-height:630px}.bench:after{height:72px}.bench h2{font-size:24px}.level-chip{font-size:10px}.level-chip strong{font-size:21px}.tube-grid{grid-template-columns:repeat(5,minmax(48px,1fr));gap:30px 0;margin:42px auto 25px}.tube{width:100%;max-width:72px;height:190px;padding:6px}.liquid-stack{height:169px;left:10px;right:10px;bottom:7px}.bench-foot{font-size:11px}.record-panel{display:flex;gap:10px}.record-card{padding:17px}.score-card{padding:8px 17px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:18px}.score-row{padding:9px 0}.score-row strong{font-size:18px}.console-buttons{gap:6px}.tool-btn{min-height:61px}.daily-card{padding:11px}.level-list{grid-template-columns:repeat(4,1fr)}}@media (max-width:390px){#app{padding-left:9px;padding-right:9px}.bench{padding-left:8px;padding-right:8px}.tube-grid{gap:25px 0}.tube{width:100%;max-width:68px;height:184px}.liquid-stack{height:163px;left:9px;right:9px}.bench-foot{font-size:10px}.level-chip{padding:7px 8px}}@media (max-height:620px) and (orientation:landscape){.bench{min-height:440px}.tube-grid{margin-top:20px;gap:18px}.tube{height:150px}.liquid-stack{height:132px}.record-card p,.daily-card{display:none}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media (min-width:601px){.tube-grid[data-count="9"],.tube-grid[data-count="10"]{grid-template-columns:repeat(5,minmax(72px,1fr))}.tube-grid[data-count="11"],.tube-grid[data-count="12"]{grid-template-columns:repeat(6,minmax(72px,1fr))}.tube-grid[data-count="13"]{grid-template-columns:repeat(7,minmax(72px,1fr))}}
@media (min-width:601px) and (max-width:900px){.tube-grid[data-count="9"],.tube-grid[data-count="10"]{grid-template-columns:repeat(5,minmax(58px,1fr))}.tube-grid[data-count="11"],.tube-grid[data-count="12"]{grid-template-columns:repeat(6,minmax(58px,1fr))}.tube-grid[data-count="13"]{grid-template-columns:repeat(7,minmax(58px,1fr))}.tube{width:86px;height:230px}.tube.shape-2{width:82px}.tube.shape-3{width:92px}.liquid-stack{height:204px}}

@media (min-width:601px){.bench.multi-row:after{height:96px}.bench.multi-row .tube-grid{margin-top:40px;gap:24px 10px;margin-bottom:20px}.bench.multi-row .tube{width:84px;height:220px}.bench.multi-row .tube.shape-2{width:79px}.bench.multi-row .tube.shape-3{width:91px}.bench.multi-row .liquid-stack{height:194px;left:11px;right:11px;bottom:8px}.bench.multi-row .empty-mark{top:96px}}
@media (min-width:601px) and (max-width:900px){.bench.multi-row .tube{width:78px;height:202px}.bench.multi-row .tube.shape-2{width:74px}.bench.multi-row .tube.shape-3{width:84px}.bench.multi-row .liquid-stack{height:178px}}
@media (max-width:600px){.bench.multi-row{min-height:730px}.bench.multi-row:after{height:72px}.bench.multi-row .tube-grid{margin-top:32px;gap:18px 0;margin-bottom:20px}.bench.multi-row .tube{width:100%;max-width:60px;height:156px}.bench.multi-row .liquid-stack{height:138px;left:9px;right:9px;bottom:7px}.bench.multi-row .empty-mark{top:88px}}

@media (min-width:601px){.tube-grid[data-count="9"] .tube:nth-child(6),.tube-grid[data-count="11"] .tube:nth-child(7),.tube-grid[data-count="13"] .tube:nth-child(8){grid-column-start:2}}
@media (max-width:600px){.tube-grid[data-count="9"] .tube:nth-child(6),.tube-grid[data-count="12"] .tube:nth-child(11),.tube-grid[data-count="13"] .tube:nth-child(11){grid-column-start:2}.tube-grid[data-count="11"] .tube:nth-child(11){grid-column-start:3}}

/* orientation: landscape */



.tube:focus,.tube:focus-visible{outline:none}.tube{-webkit-tap-highlight-color:transparent}

.level-option.locked{cursor:not-allowed;opacity:.48;background:rgba(247,241,233,.7);border-style:dashed;box-shadow:none}.level-option.locked:hover{transform:none;color:var(--muted)}.level-option.locked strong{color:var(--muted)}.level-option.locked small{color:var(--muted);font-size:9px;line-height:1.25}.level-option:disabled{pointer-events:none}

.difficulty-note{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 0;color:var(--muted);font-size:11px;letter-spacing:.08em}.difficulty-note strong{color:var(--coral);font-size:12px;letter-spacing:.12em;white-space:nowrap}
.difficulty-note em{margin-left:auto;color:var(--ink);font-style:normal;font-weight:850;letter-spacing:.04em}.difficulty-detail{margin:7px 0 0;color:var(--muted);font-size:11px;letter-spacing:.04em}.level-difficulty{display:block;color:var(--coral);font-size:8px;letter-spacing:.07em;line-height:1.1;margin-top:2px;white-space:nowrap}.level-option.locked .level-difficulty{color:var(--muted)}