:root{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#eef6ff;--mint:#77e8d0;--gold:#ffd879;--violet:#a892ff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{min-height:100dvh;display:grid;place-items:center;background:#0c1530}
body:before{content:"";position:fixed;inset:-20px;background:linear-gradient(#0c1530bd,#0c1530d9),url('laboratuvar-modern-masaustu.webp') center/cover;filter:blur(15px);pointer-events:none}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.42}
.game{position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:min(100%,980px);height:min(100dvh,860px);overflow:hidden;border:1px solid #afd8ff36;border-radius:24px;background:radial-gradient(ellipse at 50% 52%,#315f8169 0%,transparent 56%),radial-gradient(circle at 9% 25%,#4463a84d,transparent 36%),radial-gradient(circle at 91% 81%,#633f9c52,transparent 37%),linear-gradient(160deg,#172544,#111a35 55%,#151d3d);box-shadow:0 28px 80px #020817b8}
.game:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;background:url('laboratuvar-modern-masaustu.webp') center/cover}
.hud{position:relative;z-index:2;padding:14px 22px 11px;background:linear-gradient(180deg,#0a1432ed,#111f3eda);border-bottom:1px solid #a7dfff28;box-shadow:0 8px 30px #080f2466}
.hud-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.home-link{justify-self:start;display:inline-flex;align-items:center;gap:4px;color:#bed0ee;text-decoration:none;font-size:13px;font-weight:800;padding:9px 11px;border-radius:12px}
.home-link:hover{background:#ffffff13;color:white}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.brand h1{font-size:clamp(20px,2.7vw,28px);line-height:1;margin:0;color:#fff;letter-spacing:-.06em;text-shadow:0 2px 16px #8bd8ff42}
.brand small{display:block;margin-top:4px;color:#8dd9e7;font-size:9px;font-weight:900;letter-spacing:.33em;text-align:center}
.brand-symbol{position:relative;display:flex;align-items:flex-end;gap:3px;height:28px;padding:3px 3px 2px;border-radius:5px 5px 8px 8px;background:#d1f3ff26;border:1px solid #bceeff8f}
.brand-symbol i{display:block;width:6px;height:8px;border-radius:3px 3px 2px 2px;background:#ff748b;box-shadow:0 0 7px #ff748baa}
.brand-symbol i:nth-child(2){height:17px;background:#62d2ff;box-shadow:0 0 7px #62d2ffaa}
.brand-symbol i:nth-child(3){height:12px;background:#f5c95d;box-shadow:0 0 7px #f5c95daa}
.hud-actions{justify-self:end;display:flex;gap:7px}
.icon-button,.level-arrow{display:grid;place-items:center;color:#d8e8ff;border:1px solid #c4e6ff4d;background:linear-gradient(#294266,#1b2b4d);box-shadow:inset 0 1px #ffffff28,0 3px 0 #08152b;border-radius:12px;font-weight:900}
.icon-button{width:37px;height:35px;font-size:18px}
.level-arrow{width:34px;height:32px;font-size:25px;line-height:1}
.icon-button:hover:not(:disabled),.level-arrow:hover:not(:disabled){background:linear-gradient(#36547d,#263964);border-color:#caf3ff}
.hud-bottom{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:20px;align-items:center;margin-top:12px}
.levelbar{display:flex;align-items:center;gap:7px}
.pill{min-width:87px;text-align:center;color:#fff9de;font-weight:900;font-size:13px;letter-spacing:.02em}
.progress{height:8px;max-width:280px;width:100%;justify-self:center;border-radius:999px;background:#06122a;border:1px solid #a4d3ec57;box-shadow:inset 0 2px 4px #0009,0 1px #ffffff1f;overflow:hidden}
.progress>div{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#51d7ee,#8af1ce,#ffe27f);box-shadow:0 0 12px #7bf3de;transition:width .35s ease}
.hud-score{display:flex;align-items:center;gap:9px;white-space:nowrap}
.moves{font-size:12px;font-weight:800;color:#b9c9e4}
.coins{padding:5px 9px;color:#ffe49a;border:1px solid #f7d97b66;border-radius:10px;background:#f3bd4820;font-size:12px;font-weight:900}
.coin-symbol{color:#ffd166;font-size:16px}
main{min-height:0;display:grid;place-items:center;padding:13px 20px 10px}
.board{position:relative;isolation:isolate;width:min(100%,720px);max-height:100%;display:flex;flex-direction:column;padding:14px 21px 17px;border:2px solid #b4e7ff68;border-radius:25px;background:radial-gradient(circle at 50% -15%,#6cc3e62c,transparent 52%),linear-gradient(160deg,#1f3659f0,#14253ef5 62%,#1b2948f2);box-shadow:inset 0 2px #e6f8ff3d,inset 0 -12px 27px #05152788,0 10px 0 #091327,0 20px 35px #030a1db2}
.board:before{content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;border-radius:23px;background:repeating-linear-gradient(90deg,transparent 0 70px,#bdefff09 71px 72px),radial-gradient(circle at 8% 84%,#69c5b71b,transparent 30%),radial-gradient(circle at 94% 20%,#ad8aff1c,transparent 30%)}
.tubes{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-content:center;justify-items:center;gap:17px 6px;width:100%;max-width:620px;margin:0 auto}
.tube-wrap{width:100%;min-width:0;display:grid;place-items:center;position:relative}
.tube{position:relative;isolation:isolate;width:min(81px,86%);height:clamp(150px,21vh,180px);padding:0;border:0;background:transparent;transition:transform .18s ease,filter .18s ease;outline-offset:4px}
.tube:hover:not(:disabled){transform:translateY(-3px)}
.tube.selected{transform:translateY(-12px) rotate(-5deg);filter:drop-shadow(0 0 11px #ffd16b)}
.tube.hinted{filter:drop-shadow(0 0 10px #ffd16b)}
.glass{position:absolute;inset:8px 6px 0;overflow:hidden;border:3px solid #a8e5ffbd;border-top:0;border-radius:6px 6px 20px 20px;background:linear-gradient(95deg,#ffffff36,#b8e5ff0b 22%,#1a335418 72%,#ffffff3b);box-shadow:inset 4px 0 5px #e4f9ff2b,inset -3px 0 5px #05132a66,0 8px 10px #050e2499}
.rim{position:absolute;z-index:3;top:1px;left:0;width:100%;height:15px;border-radius:50%;border:3px solid #c6efff;background:linear-gradient(#ffffff,#91cbe6);box-shadow:0 2px 5px #00152e8c}
.contents{position:absolute;left:1px;right:1px;bottom:1px;height:calc(100% - 12px);display:flex;flex-direction:column-reverse;overflow:hidden;border-radius:0 0 16px 16px}
.liquid{position:relative;height:25%;flex-shrink:0;border-top:2px solid #ffffff8c;background:linear-gradient(90deg,#00163262 0%,#ffffff41 23%,#ffffff87 42%,#ffffff18 60%,#00163270 100%),var(--color);box-shadow:inset 0 3px 7px #ffffff35,0 -1px 8px #ffffff38}
.liquid:before{content:"";position:absolute;top:21%;right:12%;width:5px;height:5px;border:1px solid #fff9;border-radius:50%}
.liquid:first-child{border-radius:0 0 16px 16px}
.tube .number{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);font-size:10px;font-weight:900;color:#b4cbe1}
.star{position:absolute;right:-1px;top:-11px;color:#ffe58c;font-size:20px;text-shadow:0 0 7px #ffd467}
.tube.can-fill .glass{border-color:#81f5ca;box-shadow:inset 4px 0 5px #e4f9ff2b,0 0 0 3px #78f0c35e,0 0 15px #78f0c37c}
.tube.can-fill .rim{border-color:#81f5ca}
.tube:focus-visible{outline:3px solid #ffda8a;border-radius:10px}
.rack{height:12px;margin:21px 0 0;border-radius:8px;background:linear-gradient(180deg,#a5bbd2,#546d90 45%,#24395b 46%,#314c72);border:1px solid #c6e7ff80;box-shadow:inset 0 1px #fff8,0 5px 8px #07142ebd}
.controls{z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 19px 7px;background:linear-gradient(#0b1830d8,#0a142cea);border-top:1px solid #b7eaff29}
.action{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;padding:5px 9px;border-radius:14px;border:1px solid #b4d9ff6b;background:linear-gradient(#354b72,#1e3359);color:#edf5ff;font-weight:900;font-size:13px;box-shadow:inset 0 2px #ffffff2b,0 4px 0 #06152d,0 7px 11px #0208188c}
.action.primary{border-color:#ffe397;background:linear-gradient(#ffdb7b,#ecab50);color:#3b2743;box-shadow:inset 0 2px #fff5bf,0 4px 0 #8f592e,0 7px 13px #0208189c}
.control-mark{font-size:24px;line-height:1}
.action:hover:not(:disabled){filter:brightness(1.13);transform:translateY(-2px)}
.action:active:not(:disabled),.icon-button:active:not(:disabled),.level-arrow:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px #ffffff22,0 1px 0 #06152d}
.action:focus-visible,.icon-button:focus-visible,.level-arrow:focus-visible,.home-link:focus-visible,.dialog button:focus-visible{outline:3px solid #ffdb82;outline-offset:2px}
.credit{z-index:2;padding:2px 0 max(5px,env(safe-area-inset-bottom));text-align:center;background:#0a142cea;color:#8fa9c9;font-size:10px;font-weight:900;letter-spacing:.07em}
.toast{position:absolute;z-index:10;left:50%;bottom:88px;width:max-content;max-width:88%;padding:10px 16px;transform:translateX(-50%);pointer-events:none;border:1px solid #a5f2e4;border-radius:13px;background:#142842;color:#e4fffa;box-shadow:0 12px 26px #020817a8;font-size:12px;font-weight:800;text-align:center;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}
.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:16px;background:#030b20c9;backdrop-filter:blur(7px)}
.modal[hidden]{display:none}
.dialog{width:min(100%,390px);max-height:min(92dvh,700px);overflow-y:auto;padding:26px 24px;text-align:center;border:2px solid #96d7ffad;border-radius:24px;background:radial-gradient(circle at 50% 0,#395c80,#1b2b4c 50%,#14223e);box-shadow:inset 0 2px #ffffff38,0 10px 0 #080f25,0 24px 60px #000b;color:#eff8ff}
.dialog h2{margin:9px 0 8px;font-size:clamp(22px,6vw,28px);line-height:1.15;color:#fff}
.dialog p{margin:10px 0 17px;color:#c4d7e9;line-height:1.5}
.dialog .big{font-size:52px;line-height:1}
.dialog button{min-height:45px;margin:5px;padding:9px 18px;border:1px solid #ffe5a7;border-radius:12px;background:linear-gradient(#ffe191,#e9ae59);color:#3c2b47;box-shadow:0 4px 0 #9b6337;font-weight:900}
.dialog button.secondary{border-color:#a3d8fa6b;background:linear-gradient(#456081,#304569);color:#f2f7ff;box-shadow:0 4px 0 #11213c}
.settings-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid #a3d5ee3d;text-align:left}
.settings-line input{width:23px;height:23px;accent-color:#81e6cc}
.small{font-size:12px!important}
.pause-avatar{display:block;width:128px;height:128px;object-fit:contain;object-position:center;margin:0 auto 9px;filter:drop-shadow(0 9px 10px #030b24)}
.victory-mark{color:#ffe08b;text-shadow:0 0 18px #ffdb70}
.stuck-art{position:relative;width:54px;height:68px;margin:0 auto 15px;border:5px solid #a6dbf8;border-top:0;border-radius:5px 5px 22px 22px;background:linear-gradient(180deg,#ffffff25 52%,#6dd3e2aa 53%);box-shadow:inset 4px 0 #fff8,0 7px 13px #05152e66;transform:rotate(-11deg)}
.stuck-art:before{content:"";position:absolute;left:-9px;right:-9px;top:-7px;height:11px;border:4px solid #a6dbf8;border-radius:50%;background:#fff}
.stuck-art:after{content:"";position:absolute;left:5px;bottom:9px;width:12px;height:23px;border-radius:12px;background:#fff9;transform:rotate(25deg)}
.screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[data-berfin-nida-credit],[data-berfin-nida-pause]{display:none!important}
.game.show-labels .liquid:before{display:none}
.game.show-labels .liquid:after{content:attr(data-label);position:absolute;left:50%;top:50%;display:grid;place-items:center;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:5px;background:#18233eb5;color:#fff;font-size:10px;font-weight:900}
.pour-layer{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:visible}
.pour-drop{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 8%,#ffffffa8 11% 22%,var(--color) 55%,color-mix(in srgb,var(--color),#273459 32%) 100%);box-shadow:0 2px 5px #34447164,0 0 0 1px #ffffff88}
.tube.receiving .rim{filter:drop-shadow(0 0 7px #e5fff1)}
.tube.invalid-target{animation:invalid-shake .27s ease-out}
.liquid.fresh{animation:liquid-settle .28s cubic-bezier(.2,.9,.3,1.2) both}
.tube.just-filled{animation:fill-bounce .35s ease-out}
.tube.completed-now .glass{animation:tube-celebrate .65s ease-out;box-shadow:inset 3px 0 3px #fff,0 0 0 4px #ffe79fc7,0 0 24px #ffc34b}
.tube.completed-now .star{animation:star-pop .65s cubic-bezier(.2,.9,.3,1.3)}
.progress.completed-now{animation:progress-glow .65s ease-out}
.action.recovery:not(:disabled){animation:recovery-pulse .65s ease-in-out 3;outline:3px solid #f1ae5e;outline-offset:2px}
.pour-effect{position:absolute;inset:0;z-index:9;width:100%;height:100%;overflow:visible}
.pour-preview{position:absolute;left:0;right:0;z-index:1;border-top:2px solid #ffffff91;background:linear-gradient(90deg,#1b2a6c38 0%,#ffffff12 27%,#ffffff2c 45%,#ffffff08 62%,#16246445 100%),var(--color);transform-origin:bottom;box-shadow:inset 0 3px 4px #ffffff22,0 -1px 8px #ffffff38}
@keyframes invalid-shake{25%{transform:translateX(-4px)}55%{transform:translateX(4px)}85%{transform:translateX(-2px)}}
@keyframes liquid-settle{0%{transform:scaleY(.3);transform-origin:bottom;opacity:.55}72%{transform:scaleY(1.08);transform-origin:bottom}100%{transform:scaleY(1);opacity:1}}
@keyframes fill-bounce{45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes tube-celebrate{40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes star-pop{0%{transform:scale(.25);opacity:0}60%{transform:scale(1.4);opacity:1}100%{transform:scale(1)}}
@keyframes progress-glow{50%{box-shadow:0 0 0 5px #ffd77088,0 0 16px #ffa940}}
@keyframes recovery-pulse{50%{transform:translateY(-3px);filter:brightness(1.1)}}
@media(max-width:699px){
 .game{width:100%;height:100dvh;border:0;border-radius:0}
 .hud{padding:10px 12px 8px}
 .hud-top{gap:6px}
 .home-link{padding:7px 3px;font-size:12px}
 .brand{gap:6px}
 .brand h1{font-size:clamp(17px,4.5vw,22px)}
 .brand small{font-size:7px;letter-spacing:.24em}
 .brand-symbol{transform:scale(.83);transform-origin:center}
 .hud-actions{gap:4px}
 .icon-button{width:32px;height:31px;font-size:16px;border-radius:9px}
 .hud-bottom{gap:8px;margin-top:9px}
 .progress{height:7px}
 .moves{font-size:10px}
 .coins{font-size:10px;padding:4px 6px}
 main{padding:7px 9px 5px}
 .board{padding:10px 11px 11px;border-radius:20px}
 .tubes{gap:10px 3px}
 .tube{width:min(72px,88%);height:clamp(102px,18.5vh,158px)}
 .rack{margin-top:16px}
 .controls{padding:8px 9px 6px;gap:5px}
 .action{flex-direction:column;gap:1px;min-height:60px;padding:4px 2px;font-size:10px;border-radius:11px}
 .control-mark{font-size:22px}
 .credit{font-size:9px}
}
@media(max-width:380px){
 .home-link span{display:none}
 .brand-symbol{display:none}
 .brand h1{font-size:18px}
 .pill{min-width:67px;font-size:11px}
 .level-arrow{width:27px;height:28px}
 .levelbar{gap:3px}
 .hud-score{gap:4px}
 .board{padding-inline:7px}
 .tube{width:min(63px,86%)}
}
@media(max-height:760px){
 .hud{padding-top:7px;padding-bottom:6px}
 .hud-bottom{margin-top:5px}
 .board{padding-top:8px;padding-bottom:8px}
 .tubes{row-gap:8px}
 .rack{margin-top:14px;height:9px}
 .controls{padding-top:6px;padding-bottom:4px}
 .action{min-height:52px}
}
@media(max-height:960px){
 .game.many-tubes .tube{height:clamp(76px,calc((100dvh - 302px)/3),138px)}
 .game.many-tubes .tubes{row-gap:8px}
 .game.many-tubes .tube .number{bottom:-7px;font-size:9px}
 .game.many-tubes .rack{margin-top:15px}
 .game.many-tubes.show-labels .liquid:after{width:12px;height:12px;font-size:8px}
}
@media(max-width:360px) and (max-height:700px){
 .hud{padding-inline:7px}
 .hud-bottom{gap:4px}
 .brand h1{font-size:17px}
 .game.many-tubes .tube{height:clamp(70px,calc((100dvh - 344px)/3),99px)}
 .game.many-tubes .tubes{row-gap:6px}
 .game.many-tubes.show-labels .liquid:after{width:10px;height:10px;font-size:7px}
 .action{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.tube,.liquid,.action,.icon-button,.level-arrow,.progress,.progress>div{animation:none!important;transition:none!important}.tube.completed-now .glass,.tube.completed-now .star{animation:none!important}}