/* The interactive game is intentionally separate from this art layer. */
:root{color:#35426e;--mint:#12a6a8;--gold:#d48126;--violet:#7854b8}
body{background:#bcdbe8}
body:before{inset:-18px;opacity:.7;background:url('laboratuvar-modern-masaustu.webp') center/cover;filter:blur(17px)}
.game{border:2px solid #ffffffd9;background:url('laboratuvar-modern-masaustu.webp') center/cover;box-shadow:0 24px 70px #55718d86}
.game:before{display:none}
.hud{background:linear-gradient(180deg,#fffdf7ed,#fbf8f0da 75%,#fff9ed00);border:0;box-shadow:none}
.home-link{color:#516487}
.home-link:hover{background:#ffffffc9;color:#354b7b}
.brand h1{display:flex;align-items:baseline;gap:5px;letter-spacing:-.065em;text-shadow:0 2px #fff,0 3px 9px #654a9580}
.brand-color{font-size:1.1em;color:#ff6f8b}
.brand-name{font-size:.91em;color:#6255ae}
.brand small{color:#80649d}
.brand-symbol{border-color:#cad8ef;background:#fff9;box-shadow:0 3px 0 #aebcdd}
.icon-button,.level-arrow{color:#594f9b;border:1px solid #c2c7e9;background:linear-gradient(#fff,#eeedff);box-shadow:inset 0 2px #fff,0 3px 0 #aeb2da,0 6px 12px #7375a933}
.icon-button:hover:not(:disabled),.level-arrow:hover:not(:disabled){background:linear-gradient(#fff,#e8eaff);border-color:#978ed8}
.pill{color:#43577e}
.progress{border-color:#c4c3e0;background:#e6e5f5;box-shadow:inset 0 2px 4px #65709338}
.progress>div{background:linear-gradient(90deg,#4acbc9,#9295ee,#ffb07a);box-shadow:0 0 10px #56cdda9c}
.moves{color:#58698c}
.coins{color:#9d621d;border-color:#e9d1a8;background:#fff4d7;box-shadow:0 2px 0 #d7bd99}
.coin-symbol{color:#eba743}
main{place-items:center;padding:8px 20px}
.board{width:min(100%,800px);padding:0 14px 7px;border:0;border-radius:0;background:transparent;box-shadow:none}
.board:before{display:none}
.tubes{display:flex;flex-direction:column;gap:9px;max-width:740px}
.tube-row{position:relative;isolation:isolate;display:flex;justify-content:center;width:100%;padding-bottom:14px}
.tube-row:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:15px;border:1px solid #ffffff;border-radius:12px;background:linear-gradient(180deg,#fff 0%,#e7efff 31%,#a7b8df 67%,#859acb 100%);box-shadow:inset 0 2px #fff,0 4px 0 #8092bf,0 9px 13px #526b9752}
.tube-wrap{width:calc(100%/var(--cols));z-index:1}
.tube{width:min(100px,90%);height:clamp(160px,22vh,185px);filter:drop-shadow(0 7px 5px #6c7da252)}
.tube:after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:url('tup-3d.webp') center/100% 100% no-repeat}
.tube:hover:not(:disabled){filter:drop-shadow(0 11px 8px #516c9990)}
.tube.selected{filter:drop-shadow(0 0 11px #ffb85a)}
.tube .glass{inset:13px 11px 11px;overflow:hidden;border:0;border-radius:4px 4px 24px 24px;background:transparent;box-shadow:none}
.tube .rim{display:none}
.tube .contents{left:2px;right:2px;bottom:2px;height:calc(100% - 16px);border-radius:0 0 22px 22px}
.tube .liquid{border-top:2px solid #ffffff91;background:linear-gradient(90deg,#1b2a6c38 0%,#ffffff12 27%,#ffffff2c 45%,#ffffff08 62%,#16246445 100%),var(--color);box-shadow:inset 0 3px 4px #ffffff22}
.tube .liquid:before{background:#fff9;border:0;box-shadow:0 0 3px #fff}
.tube .number{z-index:5;bottom:-10px;color:#5f6e9a}
.tube.can-fill .glass{box-shadow:0 0 0 3px #63e1bd,0 0 15px #2dd5b5a3}
.tube.hinted{filter:drop-shadow(0 0 9px #ffbc64)}
.tube.transferring:after,.tube.receiving:after{filter:drop-shadow(0 0 9px #ffffff)}
.tube.completed-now:after{filter:drop-shadow(0 0 9px #ffd06b)}
.star{z-index:5;color:#f5ab35;text-shadow:0 1px #fff,0 0 8px #ffc86e}
.rack{display:none}
.controls{display:flex;justify-content:center;align-items:center;gap:clamp(9px,2vw,17px);padding:8px 12px 11px;background:linear-gradient(#ffffff00,#e8e8f0bd);border:0;box-shadow:none}
.action,.action.primary,.action:nth-child(2),.action:nth-child(4){flex:none;width:60px;height:58px;min-height:58px;padding:3px;border:1px solid #fff;border-radius:17px;background:linear-gradient(#fff,#eef4ff);box-shadow:inset 0 2px #fff,0 4px 0 #adb4d7,0 7px 12px #5d6f9e42}
.action:nth-child(2){background:linear-gradient(#fff,#efeaff)}
.action.primary{background:linear-gradient(#fffaf1,#fff0d5)}
.action:nth-child(4){background:linear-gradient(#fff,#ffedf6)}
.action img{display:block;width:41px;height:41px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #5e669642)}
@media(hover:hover) and (pointer:fine){.action{position:relative}.action::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);z-index:12;transform:translateX(-50%) translateY(4px);padding:6px 10px;border:1px solid #fff;border-radius:9px;background:#fffdf9;color:#514b7f;box-shadow:0 5px 13px #4d547c40;font-size:12px;font-weight:800;line-height:1.1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.action:hover:not(.tooltip-dismissed)::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}}
.action:active:not(:disabled),.icon-button:active:not(:disabled),.level-arrow:active:not(:disabled){box-shadow:inset 0 2px #fff,0 1px 0 #9faad1}
.credit{background:#e8e8f0bd;color:#6c6a92;text-shadow:0 1px #fff}
.toast{border-color:#fff;background:#fffdf7;color:#5b5680;box-shadow:0 9px 22px #60739c59}
.modal{background:#354e7891}
.dialog{border-color:#fff;background:linear-gradient(#fff,#f4f2ff);box-shadow:inset 0 2px #fff,0 8px 0 #b0b7dc,0 22px 60px #34446e84;color:#444c77}
.dialog h2{color:#6255a5}
.dialog p{color:#687393}
.dialog button{border-color:#f3c784;background:linear-gradient(#fff0b4,#fbc272);color:#855125;box-shadow:0 4px 0 #d59b56}
.dialog button.secondary{border-color:#c6c8e9;background:linear-gradient(#fff,#e7e5f8);color:#5f589b;box-shadow:0 4px 0 #afb1d3}
.settings-line{border-color:#d5d9eb}
.settings-line input{accent-color:#8271cb}
.victory-mark{color:#f4b647;text-shadow:0 0 18px #ffd77f}
.screen-reader{color:#444c77}
@media(min-width:700px){.game:not(.many-tubes){height:min(100dvh,720px)}.game.many-tubes{height:min(100dvh,800px)}}
@media(min-width:700px) and (max-height:960px){.game.many-tubes .tube{width:min(104px,90%);height:clamp(144px,calc((100dvh - 340px)/2),184px)}}
@media(max-width:699px){
 .game{border:0;background:url('laboratuvar-modern-mobil.webp') center/cover}
 .hud{background:linear-gradient(#fffdf4f2,#fffdf4dc 78%,#fffdf400)}
 .hud-top{grid-template-columns:58px minmax(0,1fr) 72px}
 .brand-symbol{display:none}
 .brand h1{gap:3px;font-size:clamp(19px,5.1vw,23px)}
 .board{padding:0 5px 3px}
 main{padding:6px 9px}
 .tubes{gap:6px}
 .tube-row{padding-bottom:10px}
 .tube-row:after{height:12px}
 .tube{width:min(70px,88%)}
 .controls{gap:8px;padding:6px 8px 10px}
 .action,.action.primary,.action:nth-child(2),.action:nth-child(4){width:56px;height:54px;min-height:54px;padding:2px;border-radius:15px}
 .action img{width:38px;height:38px}
}
@media(min-width:381px) and (max-width:699px) and (min-height:760px){.game.many-tubes .tube{width:min(76px,88%);height:150px}}
@media(max-width:380px){.brand h1{font-size:18px}.brand-name{font-size:.82em}.board{padding:0 2px 3px}.tube{width:min(61px,86%)}.action,.action.primary,.action:nth-child(2),.action:nth-child(4){width:52px;height:50px;min-height:50px}.action img{width:34px;height:34px}}
@media(max-height:760px){main{padding-bottom:6px}}