:root{--bg-color-1:#0d1b2e;--bg-color-2:#0a1220;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--text-color:#f0f6ff;--primary:#8b5cf6;--primary-hover:#7c3aed;--cyan:#38bdf8;--cyan-glow:#38bdf859}*{box-sizing:border-box;touch-action:manipulation;margin:0;padding:0;font-family:Space Grotesk,Inter,-apple-system,BlinkMacSystemFont,sans-serif}:root{--tube-width:50px;--tube-height:200px;--tube-border:#4ebeff59;--tube-bg:linear-gradient(135deg, #ffffff14, #ffffff05)}body{color:var(--text-color);background:radial-gradient(at top,#16253d 0%,#0a1220 70%);flex-direction:column;align-items:center;min-height:100vh;font-family:Space Grotesk,sans-serif;display:flex;overflow:hidden auto}header{z-index:10;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:20px;display:flex}h1{background:linear-gradient(to right, #e0f2fe, var(--cyan));-webkit-text-fill-color:transparent;text-shadow:none;letter-spacing:-.02em;-webkit-background-clip:text;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:800}.stats{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;gap:15px;padding:8px 16px;font-size:.9rem;font-weight:600;display:flex}.toolbar{z-index:10;gap:10px;margin-bottom:20px;display:flex}button{color:var(--text-color);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:12px;align-items:center;gap:8px;padding:10px 20px;font-family:Space Grotesk,sans-serif;font-size:.9rem;font-weight:600;transition:transform .18s,background .18s,box-shadow .18s,border-color .18s;display:flex}button:hover{background:#38bdf81f;border-color:#38bdf866;transform:scale(1.03);box-shadow:0 0 14px #38bdf833}button:active{box-shadow:none;transform:scale(.97)}button.primary{background:var(--primary);border-color:var(--primary)}button.primary:hover{background:var(--primary-hover)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.game-area{flex:1;justify-content:center;align-items:center;width:100vw;max-width:1200px;margin:0 auto;padding:10px;display:flex;position:relative}.board{text-align:center;width:100%;height:100%;padding-bottom:20px;display:block}#game-board{text-align:center;margin:0 auto;padding-bottom:20px;display:block}.tube-wrapper{vertical-align:bottom;display:inline-block}.tube{width:var(--tube-width);height:var(--tube-height);cursor:pointer;background:linear-gradient(135deg,#ffffff14,#ffffff05);border:1px solid #4ebeff59;border-top:none;border-radius:4px 4px 22px 22px;flex-direction:column-reverse;transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s,border-color .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 14px #38bdf826,inset 0 0 12px #ffffff0a,inset 0 -10px 10px #0006}.tube:not(.has-water){border-color:#4ebeff1f;box-shadow:inset 0 0 8px #ffffff05,inset 0 -8px 8px #0000004d}.tube:after{content:"";pointer-events:none;z-index:10;background:#ffffff38;border-radius:4px;width:6px;height:40%;position:absolute;top:5%;left:5px}.tube-rim{z-index:11;background:#4ebeff66;border-radius:3px;height:5px;position:absolute;top:-3px;left:-3px;right:-3px}.tube.selected{border-color:var(--cyan);transform:translateY(-18px)scale(1.05);box-shadow:0 0 22px #38bdf880,inset 0 0 12px #38bdf81a,inset 0 -10px 20px #0006}.tube.completed{animation:1.6s ease-in-out infinite alternate pulse-glow}.water{width:100%;height:var(--water-segment-height);transition:height .35s ease-out,opacity .35s ease-out;position:relative}.water:last-child:before{content:"";background:#ffffff47;border-radius:50% 50% 0 0;height:4px;position:absolute;top:0;left:0;right:0}@keyframes pulse-glow{0%{border-color:#38bdf873;box-shadow:0 0 10px #38bdf84d,inset 0 -8px 16px #0006}to{border-color:#38bdf8f2;box-shadow:0 0 28px #38bdf8bf,inset 0 -8px 16px #0006}}.pour-stream{z-index:60;border-radius:5px;width:10px;animation:.4s ease-out forwards pourFlow;position:absolute;top:-30px;left:50%}@keyframes pourFlow{0%{opacity:1;height:0;transform:translate(-50%)}50%{opacity:1;height:100px;transform:translate(-50%)}to{opacity:0;height:0;transform:translate(-50%)translateY(100px)}}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;opacity:0;pointer-events:none;background:#000000b3;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{border:1px solid var(--glass-border);text-align:center;background:#1e293be6;border-radius:24px;width:400px;max-width:90%;padding:30px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:scale(.9);box-shadow:0 25px 50px -12px #00000080}.modal-overlay.active .modal{transform:scale(1)}.modal h2{margin-bottom:20px;font-size:1.8rem}.modal p{color:#94a3b8;margin-bottom:25px;line-height:1.5}.difficulty-selector{flex-direction:column;gap:12px;margin-bottom:25px;display:flex}.diff-option{background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;color:var(--text-color);border-radius:12px;justify-content:space-between;padding:15px;font-size:1.1rem;font-weight:700;transition:all .2s;display:flex}.diff-option span.desc{color:#cbd5e1;font-size:.9rem;font-weight:400}.diff-option:hover{background:#ffffff1a;transform:translateY(-2px)}.diff-option.active{background:var(--primary);border-color:var(--primary);box-shadow:0 4px 15px #8b5cf666}#confetti{pointer-events:none;z-index:50;width:100%;height:100%;position:fixed;top:0;left:0}@media (max-width:480px){header{padding:15px}h1{font-size:1.2rem}}@media (max-height:650px){.game-area{padding:10px}}@media screen and (max-width:768px){.header-bar{flex-direction:column;gap:5px;padding:10px}.header-bar h1{font-size:1.5rem}.controls{justify-content:space-evenly;width:100%}.btn{padding:8px 15px;font-size:.9rem}.modal{width:95%;max-width:400px;padding:20px}.tube-option{width:35px;height:35px;font-size:1rem}.difficulty-selector{gap:8px}.diff-option{padding:10px;font-size:1rem}.game-area{width:100%;padding:5px}}