@import url('./assets/fonts/fonts.css');
:root{font-family:'Golos Text',sans-serif;color:#34453e;background:#eeebe4;font-synthesis:none;--green:#344d40;--line:#dadcd1}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #b38643;outline-offset:4px}button:hover:not(:disabled){filter:brightness(.96)}
.app{max-width:1600px;margin:auto;height:100dvh;padding:0 5vw;display:grid;grid-template-rows:96px minmax(0,1fr) 48px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--green);text-decoration:none;font-weight:700;font-size:32px;letter-spacing:-1.6px}.brand-icon{font-size:51px;font-weight:400;line-height:1;transform:rotate(-30deg)}.brand-caption{display:block;font-size:8px;letter-spacing:2px;margin-top:2px;font-weight:500}
.header-actions{display:flex;align-items:center;gap:12px}.quiet-label{font-size:9px;letter-spacing:1.6px;margin-right:22px;color:#7d8479}.icon-button{border:1px solid #d7dbd0;background:transparent;border-radius:50%;height:40px;width:40px;font-size:21px}.icon-button.active{background:#d7dfcf}
.workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:4vw;min-height:0;padding:24px 0}
.sidebar{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:#838a78}.sidebar h1{font-family:'Manrope',sans-serif;font-weight:500;font-size:42px;letter-spacing:-2px;line-height:1.16;margin:22px 0}.intro{color:#7e867b;font-size:13px;line-height:1.9}.collection{margin-top:26px;border-top:1px solid var(--line);padding-top:20px;max-width:208px}.collection-art{display:block;background:#dce0d2;width:64px;height:51px;border-radius:7px;font-size:43px;line-height:45px;color:#627961;position:relative;overflow:hidden}.collection-art i{position:absolute;font-style:normal;right:0;top:13px;color:#aab997}.collection p{font-size:13px;margin:15px 0 7px}.collection>span:not(.collection-art){font-size:10px;color:#858d7b}.progress-track{background:#dce0d5;height:3px;margin-top:12px}.progress-track i{display:block;height:3px;background:#697f58;transition:width .3s}.text-button{border:0;background:none;padding:0;font-size:12px;align-self:flex-start;margin-top:24px}.text-button span{margin-left:50px}
/* The board, status and toolbar have separate reserved grid tracks. */
.game-panel{background:#f9f8f2;border:1px solid #fff;border-radius:24px;box-shadow:0 18px 50px #38472c06;display:grid;grid-template-rows:40px 105px minmax(0,1fr) 48px 72px;padding:24px 30px 16px;min-height:0;min-width:0;position:relative;overflow:hidden}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.level-pill{border:1px solid #dfe3d6;background:#edf0e6;border-radius:30px;padding:10px 15px;font-size:10px;letter-spacing:1px;display:flex;gap:9px;align-items:center;white-space:nowrap}.metrics{display:flex;gap:22px;font-size:9px;letter-spacing:1px;color:#838a78;white-space:nowrap}.metrics b{font-size:14px;color:#596650;margin-left:8px;font-weight:500}
.stage-heading{text-align:center;align-self:center}.stage-heading h2{font-family:'Manrope',sans-serif;font-weight:500;font-size:25px;letter-spacing:-.8px;margin:10px 0}.stage-heading p{font-size:12px;color:#818976;margin:0}
.board{display:grid;grid-template-columns:repeat(var(--columns,5),minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),max-content);column-gap:var(--gap,20px);row-gap:var(--rowGap,20px);align-content:center;justify-items:center;width:100%;max-width:750px;min-height:0;min-width:0;margin:0 auto;position:relative;isolation:isolate}
.tube-wrap{border:0;background:none;padding:8px 4px 0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:110px;min-width:0;gap:8px;user-select:none;transition:transform .18s}
.tube-wrap.selected{transform:translateY(-7px)}.tube-wrap.selected .glass{outline:2px solid #8d9d77;outline-offset:4px}.tube-wrap.hinted .glass{outline:2px dashed #b79148;outline-offset:4px}.tube-wrap.shake{animation:shake .3s}
.glass{position:relative;width:var(--tubeWidth,48px);height:var(--tubeHeight,128px);flex-shrink:0;border:2px solid #d4ddd6;border-top:0;border-radius:3px 3px 26px 26px;background:linear-gradient(90deg,#e1e9e733,#fff9 35%,#d9e3de33);box-shadow:inset 3px 0 4px #fff9,3px 7px 10px #41583906;display:flex;align-items:flex-end;padding:0 3px 4px;transition:filter .2s}
.glass:before{content:'';position:absolute;left:-4px;right:-4px;top:-5px;height:7px;border:2px solid #d2dbd4;border-radius:5px;background:#f4f7f2;z-index:3}.glass:after{content:'';position:absolute;left:7px;top:10px;bottom:15px;width:4px;background:#ffffff55;border-radius:8px;pointer-events:none}
.liquids{width:100%;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;border-radius:0 0 20px 20px;overflow:hidden}.liquid{height:25%;flex-shrink:0;background:var(--color);position:relative;border-top:1px solid #ffffff20;display:grid;place-items:center;color:#fff9;font-size:11px;min-height:0;overflow:hidden}.liquid:last-child{border-radius:45% 45% 0 0 / 5px 5px 0 0;box-shadow:inset 0 3px 0 #ffffff1c}.tube-label{font-size:9px;height:12px;line-height:12px;color:#8d977f;letter-spacing:1px}.tube-wrap.finished .tube-label{color:#648453}.tube-wrap.finished .glass,.tube-wrap.finished .glass:before{border-color:#b6c7ab}
.status{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.5;color:#7f896f;margin:0;padding:5px 2px;overflow:hidden;z-index:2}.status.notice{color:#8b6438}
.toolbar{border-top:1px solid #e6e8df;display:flex;justify-content:center;align-items:center;gap:26px;padding-top:8px}.toolbar button{position:relative;border:0;background:none;display:flex;align-items:center;gap:8px;font-size:11px;padding:6px 0 17px;white-space:nowrap}.toolbar button>span{font-size:23px;font-family:Arial,sans-serif;font-weight:400}.toolbar button small{position:absolute;top:33px;left:0;right:0;text-align:center;color:#778567;font-size:6px;letter-spacing:.65px}.toolbar-divider{width:1px;height:25px;background:#e0e4d7;flex-shrink:0}
footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#868f7c}footer>span:nth-child(2){font-size:8px;letter-spacing:1.8px}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#8eaa7b;margin-right:7px}
dialog{border:1px solid #fff;background:#f9f8f2;border-radius:22px;padding:30px;color:#34453e;max-width:460px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 30px 100px #24362933}dialog::backdrop{background:#253c3455;backdrop-filter:blur(5px)}dialog h2{font-size:26px;font-weight:500;margin:10px 0 16px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#727d6a}dialog ol{padding-left:20px}.primary,.secondary{border:0;border-radius:12px;padding:13px 20px;width:100%;margin-top:12px;font-size:14px}.primary{background:var(--green);color:#fff}.secondary{background:#e9eddf}.win-icon{font-size:48px;color:#95aa77}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}.level-grid button{height:42px;border:1px solid #dde2d3;border-radius:8px;background:#edf0e6;font-size:12px}.level-grid button.current{background:var(--green);color:white}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0;font-size:14px}.setting input{width:20px;height:20px;accent-color:var(--green)}.setting input[type=range]{width:55%}.music-label{display:block;font-size:12px;margin-bottom:8px}#music-track{width:100%;padding:12px;border-radius:10px;background:#f1f3e9;color:var(--green);border:1px solid var(--line);font:inherit}.file-button{display:block;text-align:center;cursor:pointer;position:relative}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.file-button:focus-within{outline:2px solid #b38643;outline-offset:3px}
.pour-ghost{position:fixed;z-index:20;pointer-events:none;transform-origin:50% 0;outline:none!important;filter:drop-shadow(0 10px 9px #344d4020);will-change:transform}.pour-stream{position:fixed;width:4px;border-radius:3px;pointer-events:none;z-index:19;opacity:0;box-shadow:1px 0 0 #ffffff50;transform-origin:top;transition:opacity .08s}.animated-fill{min-height:0!important}
.tube-wrap.in-motion{background:#e7eddf40;border-radius:12px}.tube-wrap.in-motion.selected{outline:2px solid #8d9d77;outline-offset:0;transform:none}.tube-wrap.queued .tube-label:after{content:' ···';color:#a58240}
@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(max-width:1100px){.workspace{grid-template-columns:190px minmax(0,1fr);gap:25px}.sidebar h1{font-size:35px}.game-panel{padding:20px 20px 12px}.quiet-label{display:none}.toolbar{gap:18px}.metrics{gap:12px}}
@media(max-width:850px){.app{padding:0 18px;grid-template-rows:76px minmax(0,1fr) 32px}.workspace{grid-template-columns:minmax(0,1fr);padding:16px 0}.sidebar{display:none}.brand{font-size:27px}.brand-icon{font-size:42px}.brand-caption{font-size:6px}.header-actions{gap:8px}.icon-button{width:36px;height:36px}.game-panel{padding:18px 16px 10px;border-radius:20px;grid-template-rows:36px 100px minmax(0,1fr) 52px 74px}.stage-heading h2{font-size:22px}.stage-heading p{font-size:11px}.metrics{font-size:8px;gap:10px}.metrics b{font-size:12px;margin-left:4px}.level-pill{font-size:8px;padding:9px 12px}.toolbar{gap:24px;padding-top:8px}.toolbar button{flex-direction:column;gap:3px;font-size:9px;padding:3px 0 15px}.toolbar button small{top:43px;font-size:5px;letter-spacing:.15px}.toolbar-divider{margin:0}.status{font-size:10px}footer{font-size:8px}footer>span:nth-child(2){display:none}}
@media(max-height:700px){.app{grid-template-rows:64px minmax(0,1fr) 28px}.workspace{padding:12px 0}.game-panel{grid-template-rows:32px 78px minmax(0,1fr) 44px 62px;padding:14px 16px 8px}.stage-heading h2{font-size:20px;margin:7px 0}.stage-heading .eyebrow{font-size:8px}.stage-heading p{font-size:10px}.sidebar h1{font-size:30px;margin:14px 0}.intro{font-size:11px}.collection{margin-top:10px;padding-top:12px}.toolbar{gap:20px}.toolbar button>span{font-size:20px}.toolbar button small{top:39px}.status{font-size:9px;line-height:1.35}}
@media(max-width:360px){.app{padding:0 10px}.game-panel{padding-left:12px;padding-right:12px}.header-actions{gap:5px}.icon-button{width:32px;height:32px}.toolbar{gap:17px}.metrics{gap:7px;font-size:7px}.stage-heading h2{font-size:19px}}
@media(max-height:500px){.app{grid-template-rows:44px minmax(0,1fr) 20px}.workspace{padding:6px 0;grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.game-panel{grid-template-rows:30px minmax(0,1fr) 25px 44px;padding:8px 20px 4px}.stage-heading{display:none}.toolbar button{flex-direction:row;padding:3px 0 12px}.toolbar button small{top:25px}.toolbar{padding:2px;gap:32px}.brand-icon{font-size:30px}.brand{font-size:22px}.brand-caption{display:none}.icon-button{height:30px;width:30px}.status{font-size:9px}}
/* Explicit text rows: glyph metrics must never move a price over its label. */
.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:4px;align-items:center}
.toolbar button{display:grid;grid-template-rows:24px 13px 9px;justify-items:center;align-items:center;gap:2px;padding:3px 0;width:100%;min-width:0;height:56px}
.toolbar button .tool-icon{grid-row:1;font-size:23px;line-height:24px;height:24px;font-family:Arial,sans-serif}
.toolbar button .tool-label{grid-row:2;font:inherit;font-size:11px;line-height:13px;height:13px}
.toolbar button small{position:static;grid-row:3;font-size:6px;line-height:9px;height:9px;letter-spacing:0;white-space:nowrap}
@media(max-width:850px){.toolbar{gap:4px}.toolbar button .tool-label{font-size:10px}}
@media(max-height:500px){.toolbar{padding-top:0}.toolbar button{grid-template-rows:18px 11px 8px;gap:1px;padding:1px 0;height:41px}.toolbar button .tool-icon{font-size:18px;line-height:18px;height:18px}.toolbar button .tool-label{font-size:9px;line-height:11px;height:11px}.toolbar button small{font-size:6px;line-height:8px;height:8px}}
.music-controls{display:flex;justify-content:center;gap:18px;margin:20px 0}.music-controls button{border:1px solid var(--line);border-radius:50%;width:48px;height:48px;background:#edf0e6;font-size:20px}.music-controls #music-toggle{background:var(--green);color:white}#music-position{width:100%;accent-color:var(--green)}#music-time{font-size:11px;text-align:right;margin:2px 0}#music-title{margin:10px 0 4px;font-size:19px;overflow-wrap:anywhere}#music-artist{margin:0;font-size:12px}#levels{cursor:default}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

html,body{overscroll-behavior:none}.game-panel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.board{touch-action:none}dialog{overscroll-behavior:contain}.setting select{font:inherit;max-width:60%;padding:8px;border:1px solid var(--line);border-radius:8px;background:#f1f3e9;color:var(--green)}

.result-moves strong{font-size:26px;color:var(--green);font-weight:500}

/* Episode themes affect the workshop, never the puzzle's liquid palette. */
:root{--page:#eeebe4;--panel:#f9f8f2;--soft:#e9eddf;--ink:#34453e}
:root[data-theme=blue]{--page:#e5edf5;--panel:#f4f8fc;--soft:#dce8f4;--green:#315b87;--line:#cbd9e7;--ink:#304d69}
:root[data-theme=red]{--page:#f2e5e3;--panel:#fff7f4;--soft:#f1dcd7;--green:#944e48;--line:#e5cbc5;--ink:#674540}
:root[data-theme=yellow]{--page:#f3edd8;--panel:#fffbec;--soft:#eee2b8;--green:#806222;--line:#e2d5ab;--ink:#65522b}
:root[data-theme=purple]{--page:#ece6f4;--panel:#faf6ff;--soft:#e5dbee;--green:#6c4c8a;--line:#dacbe6;--ink:#564166}
:root[data-theme=teal]{--page:#e0f0ed;--panel:#f3fcf9;--soft:#d0e9e3;--green:#2c6e64;--line:#bfddd5;--ink:#345f56}
html{background:var(--page);color:var(--ink)}.game-panel,dialog{background:var(--panel);color:var(--ink)}
.level-pill,.icon-button.active,.secondary,.collection-art,.music-controls button,.setting select{background:var(--soft)}
.progress-track i,.live-dot{background:var(--green)}.collection-art,.collection-art i,.win-icon{color:var(--green)}
.tube-wrap.selected .glass,.tube-wrap.in-motion.selected{outline-color:var(--green)}
.liquid{height:calc(100% / var(--capacity,4))}.unknown-liquid{background:#a4a6aa;border-top-color:transparent}
.fixed-tube .glass{border-bottom:5px solid var(--green);box-shadow:0 4px 0 var(--soft)}
.sealed-tube .glass{outline:2px dashed var(--green);outline-offset:3px;filter:saturate(.5)}
.tube-feature{font-size:11px;font-weight:700;letter-spacing:0}.stage-heading .eyebrow{letter-spacing:1px}
.game-panel.dense{grid-template-rows:36px 64px minmax(0,1fr) 36px 62px}
.dense .stage-heading h2{font-size:20px;margin:5px 0}
.dense .stage-heading p{display:none}
.dense .liquid{font-size:clamp(6px,calc(var(--tubeHeight) / var(--capacity) * .7),11px);line-height:1}
.dense .tube-wrap{max-width:120px}
@media(max-height:700px){.game-panel.dense{grid-template-rows:32px 46px minmax(0,1fr) 30px 58px}.dense .stage-heading h2{font-size:17px}.dense .stage-heading .eyebrow{display:none}}
@media(max-height:500px){.game-panel.dense{grid-template-rows:30px minmax(0,1fr) 25px 44px}}