.g-water-sort-puzzle{--c0:#e53935;--c1:#1e88e5;--c2:#43a047;--c3:#fdd835;--c4:#fb8c00;--c5:#8e24aa;--c6:#00acc1;--c7:#ec407a;--c8:#8d6e63;--c9:#c0ca33;--c10:#90a4ae;--c11:#3f51b5;position:relative;margin:14px auto 26px;max-width:100%;display:grid;grid-template-columns:repeat(var(--cols,7),var(--tw));gap:calc(var(--gap,8px) + 8px)var(--gap,8px);justify-content:center;touch-action:manipulation}.g-water-sort-puzzle .ws-tube{position:relative;width:var(--tw);height:calc(var(--uh) * 4 + 12px);padding:0;margin:0;border:2px solid var(--muted);border-top-color:transparent;border-radius:4px 4px calc(var(--tw)/2)calc(var(--tw)/2);background:var(--surface-2);cursor:pointer;font:inherit;color:var(--ink);transition:transform 200ms ease,box-shadow 150ms ease;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible}.g-water-sort-puzzle .ws-tube:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.g-water-sort-puzzle .ws-tube.is-cur:focus{outline:3px solid var(--focus);outline-offset:3px}.g-water-sort-puzzle .ws-tube.is-sel{transform:translateY(calc(var(--uh) * -.55));box-shadow:0 6px 12px rgba(0,0,0,.25);border-color:var(--accent)}.g-water-sort-puzzle .ws-tube.is-done{border-color:var(--accent)}.g-water-sort-puzzle .ws-tube.is-hint-from,.g-water-sort-puzzle .ws-tube.is-hint-to{box-shadow:0 0 0 3px var(--gold)}.g-water-sort-puzzle .ws-tube.is-hint-to{box-shadow:0 0 0 3px var(--gold),0 0 0 6px var(--accent-soft)}.g-water-sort-puzzle .ws-num{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:.75rem;color:var(--muted);pointer-events:none}.g-water-sort-puzzle .ws-fill{display:flex;flex-direction:column-reverse;padding:3px 3px 4px;pointer-events:none}.g-water-sort-puzzle .ws-unit{display:grid;place-items:center;height:var(--uh);background:var(--uc);color:var(--uf,#fff);font-style:normal;font-size:calc(var(--uh) * .5);line-height:1;transform-origin:bottom}.g-water-sort-puzzle .ws-unit:last-child{border-radius:3px 3px 0 0;box-shadow:inset 0 2px rgba(255,255,255,.35)}.g-water-sort-puzzle .ws-unit:first-child{border-radius:0 0 calc(var(--tw)/2 - 6px)calc(var(--tw)/2 - 6px)}.g-water-sort-puzzle .ws-unit:only-child{border-radius:3px 3px calc(var(--tw)/2 - 6px)calc(var(--tw)/2 - 6px)}.g-water-sort-puzzle .ws-sym{display:none;text-shadow:0 0 2px rgba(0,0,0,.65),0 0 1px rgba(0,0,0,.8);font-family:var(--font)}.g-water-sort-puzzle.show-symbols .ws-sym{display:block}.g-water-sort-puzzle .ws-unit.is-in{animation:ws-fill 200ms ease-out}@keyframes ws-fill{from{transform:scaleY(0);opacity:.4}to{transform:scaleY(1);opacity:1}}.g-water-sort-puzzle.is-balls .ws-fill{padding:2px 3px 4px}.g-water-sort-puzzle.is-balls .ws-unit{border-radius:50%!important;box-shadow:none;transform-origin:center;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 45%),var(--uc);margin:1px 0;height:calc(var(--uh) - 2px)}.g-water-sort-puzzle.is-balls .ws-unit.is-in{animation:ws-drop 220ms ease-in}@keyframes ws-drop{from{transform:translateY(calc(var(--uh) * -2));opacity:.3}to{transform:translateY(0);opacity:1}}.g-water-sort-puzzle [data-c="0"]{--uc:var(--c0)}.g-water-sort-puzzle [data-c="1"]{--uc:var(--c1)}.g-water-sort-puzzle [data-c="2"]{--uc:var(--c2)}.g-water-sort-puzzle [data-c="3"]{--uc:var(--c3);--uf:#222}.g-water-sort-puzzle [data-c="4"]{--uc:var(--c4)}.g-water-sort-puzzle [data-c="5"]{--uc:var(--c5)}.g-water-sort-puzzle [data-c="6"]{--uc:var(--c6)}.g-water-sort-puzzle [data-c="7"]{--uc:var(--c7)}.g-water-sort-puzzle [data-c="8"]{--uc:var(--c8)}.g-water-sort-puzzle [data-c="9"]{--uc:var(--c9);--uf:#222}.g-water-sort-puzzle [data-c="10"]{--uc:var(--c10)}.g-water-sort-puzzle [data-c="11"]{--uc:var(--c11)}.g-water-sort-puzzle [data-c="3"] .ws-sym,.g-water-sort-puzzle [data-c="9"] .ws-sym{text-shadow:0 0 2px rgba(255,255,255,.6)}@media(max-width:420px){.g-water-sort-puzzle .ws-num{font-size:.68rem}.g-water-sort-puzzle .ws-tube{border-width:2px}}@media(prefers-reduced-motion:reduce){.g-water-sort-puzzle .ws-tube{transition:none}.g-water-sort-puzzle .ws-unit.is-in{animation:none}}