:root{color-scheme:light;--ink:#564852;--muted:#887b85;--accent:#a85479}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 28%,#f9e3ed80,transparent 50%),radial-gradient(ellipse at 90% 70%,#e2e8fa80,transparent 45%),#fcf9f7;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.42}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #9062b8;outline-offset:5px}.sort-shell{max-width:620px;margin:30px auto;padding:0 20px 40px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:8px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#987b87;margin:0 0 8px}h1{font-size:30px;letter-spacing:.1em;margin:0;font-weight:600}h1 span{display:block;font-size:11px;font-weight:400;letter-spacing:.15em;margin-top:6px;color:var(--muted)}.time-free{font-size:11px;white-space:nowrap;border:1px solid #ded7d9;border-radius:20px;padding:8px 12px}.puzzle{border:1px solid #eee4e9;border-radius:28px;background:#ffffffa8;box-shadow:0 15px 60px #9f7d9210;padding:22px 22px 24px}.status-bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em}.status-bar label{font-size:10px;color:var(--muted)}select{border:0;background:transparent;color:var(--ink);font-weight:600;font-size:17px;padding:7px}.status-bar strong{font-size:22px;font-weight:500}.companion{display:flex;align-items:center;gap:12px;padding:14px 0 4px}.companion img{flex:none;object-fit:cover;object-position:center top;border-radius:50%;box-shadow:0 3px 8px #b5a1ad25}.companion p{font-size:12px;line-height:1.8;flex:1}.sparkle{font-size:24px;color:#c5a570}.instruction{text-align:center;color:var(--muted);font-size:11px;margin:16px 0 22px}.board{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 20px;max-width:430px;margin:0 auto;padding:8px 0 18px}.bottle{position:relative;flex:0 0 70px;height:148px;padding:0;border:0;background:none;transition:transform .22s;isolation:isolate;color:var(--ink)}.bottle.is-selected{transform:translateY(-12px)}.bottle.is-hint{filter:drop-shadow(0 0 7px #b988c3)}.neck{position:absolute;width:30px;height:18px;left:20px;top:0;border:2px solid #c1b4c5;border-bottom:0;border-radius:6px 6px 0 0;background:#fff8;z-index:2}.glass{position:absolute;inset:15px 4px 9px;border:2px solid #c1b4c5;border-radius:13px 13px 20px 20px;background:linear-gradient(110deg,#ffffffa0,#fff1);overflow:hidden;display:flex;flex-direction:column-reverse;justify-content:flex-start;padding:3px}.glass:after{content:"";position:absolute;top:7px;bottom:10px;left:7px;width:5px;border-radius:4px;background:#ffffff80;pointer-events:none}.water{display:flex;justify-content:center;align-items:center;flex:0 0 25%;background:linear-gradient(100deg,#ffffff24,transparent),var(--water);border-top:1px solid #ffffff5c;color:#fff;text-shadow:0 1px 3px #0007;font-size:15px;animation:none}.bottle.is-complete .glass{border-color:#b79b62;box-shadow:0 0 16px #ddc08b28}.bottle-number{position:absolute;bottom:-10px;left:0;right:0;font-size:10px;color:#9a8994}.bottle.is-selected .neck{border-color:var(--accent)}.message{min-height:36px;margin:14px 0 8px;font-size:12px;text-align:center;line-height:1.6}.tools{display:flex;justify-content:center;gap:10px}.tools button{flex:1;max-width:140px;background:#f7f2f5;border:1px solid #eee4e9;border-radius:14px;min-height:48px;color:#775d71;font-size:20px}.tools span{font-size:11px;margin-left:4px}.clear-panel{text-align:center;padding:24px 0 2px}.clear-panel h2{font-size:20px;font-weight:500}.clear-panel p{font-size:12px}.clear-panel button{border:0;border-radius:24px;background:var(--accent);color:white;padding:14px 28px}.howto{padding:22px 4px;color:var(--muted);font-size:12px;line-height:1.9}.howto summary{cursor:pointer}.save-note{font-size:12px;color:#95533f}button[hidden],[hidden]{display:none!important}@keyframes fill{from{opacity:.5}to{opacity:1}}@media(max-width:400px){.sort-shell{padding:0 12px 24px;margin-top:22px}.puzzle{padding:18px 12px}.board{gap:25px 10px}.bottle{flex-basis:62px;height:138px}.neck{left:16px}.tools{gap:6px}.tools span{margin-left:0}.time-free{padding:7px 9px;font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.bottle.is-pouring{transform:translateY(-18px) rotate(var(--tilt));transform-origin:50% 25%}.bottle.is-receiving .glass{box-shadow:0 0 20px #ba8ab455}

/* Keep the complete bottle group and controls together on narrow portrait screens. */
.sort-shell{margin:8px auto;padding:0 12px 24px}
.puzzle{padding:10px 12px 14px;border-radius:22px}
.companion{gap:8px;padding:4px 0}
.companion img{width:44px;height:44px}
.companion p{margin:4px 0;line-height:1.5}
.sparkle{display:none}
.instruction{margin:6px 0 12px;min-height:17px}
.board{position:relative;max-width:304px;gap:22px 8px;padding:10px 0 16px}
.bottle{flex:0 0 calc((100% - 24px)/4);max-width:70px;height:138px;min-width:48px}
.neck{left:calc(50% - 15px)}
.bottle:disabled{opacity:1}
.bottle.is-selected{transform:translateY(-7px)}
.bottle.can-receive .glass{border:3px double var(--accent);background-color:#f8e7f0}
.bottle-badge{position:absolute;right:0;top:-8px;min-width:18px;line-height:18px;border-radius:9px;background:var(--accent);color:white;font-size:11px;z-index:4}
.bottle-badge:empty{display:none}
.bottle.is-complete .bottle-badge{background:#886a31}
.message{min-height:36px;margin:6px 0;font-size:11px}
.tools{gap:6px}
.tools button{min-height:48px}
.clear-panel{padding:8px 0 0}
.clear-panel .eyebrow{display:none}
.clear-panel h2{font-size:16px;margin:0 0 4px}
.clear-panel p{margin:4px 0}
.clear-panel button{min-height:48px;margin-top:6px;padding:10px 20px}
.clear-panel .replay{display:block;margin:4px auto 0;background:transparent;color:var(--accent);font-size:12px}
.howto{padding:12px 4px}
.pour-stream{position:absolute;height:4px;border-radius:4px;background:var(--water);transform-origin:left center;pointer-events:none;z-index:6;box-shadow:0 0 4px #fff;opacity:.8}
@media(max-height:700px){.bottle{height:118px}.board{row-gap:18px}.companion img{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.pour-stream{display:none}.bottle.is-pouring{transform:none}}

.clear-panel p:empty{display:none}