.bs{--tube-pad:6px;gap:var(--sp-3);-webkit-user-select:none;user-select:none;width:100%;display:grid}.bs-hud{align-items:center;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;display:flex}.bs-stat{line-height:1.1;display:grid}.bs-stat small{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-3);font-weight:700}.bs-stat b{font-family:var(--font-num);font-size:var(--fs-xl);font-variant-numeric:tabular-nums;font-weight:650}.bs-tools{gap:var(--sp-2);flex-wrap:wrap;margin-left:auto;display:flex}.bs-tool{min-height:40px;padding:0 var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius-pill);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-sm);cursor:pointer;touch-action:manipulation;font-weight:650}.bs-tool:disabled{opacity:.45;cursor:default}.bs-tool--hint{background:#fff7e2;border-color:#ffd98a}.bs-msg{min-height:1.4em;font-size:var(--fs-sm);color:var(--c-text-2);margin:0;font-weight:600}.bs-board{--ball:40px;--per-row:6;padding:calc(var(--ball) * 1.45 + 6px) var(--sp-2) 14px;border-radius:var(--radius-lg);touch-action:none;background:radial-gradient(70% 55% at 50% -12%,#fff0c857,#0000 70%),repeating-linear-gradient(0deg,#ffffff0d 0 1px,#0000 1px 36px),repeating-linear-gradient(90deg,#ffffff0d 0 1px,#0000 1px 36px),linear-gradient(170deg,#6d4ff2,#3a1fb8 75%,#2d168f);position:relative;overflow:hidden}.bs-fx{pointer-events:none;position:absolute;inset:0}.bs-fx span{--i:0;bottom:-40px;left:calc(6% + var(--i) * 12%);width:calc(10px + (var(--i) * 7px) % 18px);aspect-ratio:1;animation:bs-rise calc(9s + (var(--i) * 1.3s) % 5s) linear infinite;animation-delay:calc(var(--i) * -1.7s);background:radial-gradient(circle at 35% 30%,#ffffff59,#0000 60%);border:1.5px solid #ffffff47;border-radius:50%;position:absolute}@keyframes bs-rise{0%{opacity:0;transform:translate(0)}10%{opacity:1}50%{transform:translate(12px,-260px)}to{opacity:0;transform:translate(-6px,-560px)}}.bs.no-fx .bs-fx,[data-reduce-motion] .bs-fx{display:none}.bs-shelves{gap:calc(var(--ball) * .7);display:grid;position:relative}.bs-row{justify-content:center;align-items:flex-end;gap:calc(var(--ball) * .75);padding-bottom:12px;display:flex;position:relative}.bs-row:after{content:"";width:min(100%, calc(var(--per-row) * (var(--ball) + 18px) + (var(--per-row) - 1) * var(--ball) * .75 + 28px));background:linear-gradient(#f0d2a6,#c8955c 60%,#a8763f);border-radius:5px;height:10px;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 3px #7d5428,0 10px 16px #0a002859}.bs-tube{width:calc(var(--ball) + var(--tube-pad) * 2);height:calc(var(--ball) * var(--cap) + 3px * (var(--cap) - 1) + var(--tube-pad) * 2 + 4px);padding:var(--tube-pad);border-radius:6px 6px calc(var(--ball) / 1.4) calc(var(--ball) / 1.4);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);background:linear-gradient(90deg,#ffffff47,#ffffff14 50%,#ffffff38);border:3px solid #ffffffd9;border-top-color:#ffffff59;flex-direction:column-reverse;justify-content:flex-start;align-items:center;gap:3px;display:flex;position:relative}.bs-tube:before{content:"";top:-6px;bottom:-8px;left:calc(var(--ball) * -.375 - 3px);right:calc(var(--ball) * -.375 - 3px);position:absolute}.bs-tube:focus-visible{outline-offset:3px;outline:3px solid #ffd76a}.bs-tube.is-selected{box-shadow:0 0 0 3px #ffd76a}.bs-tube.is-done{border-color:#b4f7de;box-shadow:0 0 16px #7ef0b099}.bs-tube.is-celebrate{animation:bs-celebrate .7s var(--ease-bounce)}@keyframes bs-celebrate{0%{transform:scale(1);box-shadow:0 0 #7ef0b000}35%{transform:scale(1.08)translateY(-4px);box-shadow:0 0 34px #a0ffd2f2}to{transform:none}}.bs-spark{--k:0;pointer-events:none;background:#fff6b0;border-radius:2px;width:8px;height:8px;animation:.65s ease-out forwards bs-spark;position:absolute;top:10%;left:50%;box-shadow:0 0 8px #fff6b0}@keyframes bs-spark{0%{opacity:1;transform:translate(-50%)rotate(0)scale(1)}to{transform:translate(calc(-50% + cos(calc(var(--k) * 60deg)) * 46px), calc(sin(calc(var(--k) * 60deg)) * 46px - 20px)) rotate(180deg) scale(.3);opacity:0}}.bs-tube.is-hint-from,.bs-tube.is-hint-to{box-shadow:0 0 0 4px #ffc93c}.bs-tube.is-hint-to:after{content:"▼";top:calc(var(--ball) * -.9);color:#ffc93c;font-size:calc(var(--ball) * .5);position:absolute}.bs-tube.is-shake{animation:bs-shake .28s var(--ease)}@keyframes bs-shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.bs-ball{width:var(--ball);height:var(--ball);background:radial-gradient(circle at 34% 30%, var(--hi), var(--mid) 55%, var(--lo));transition:transform calc(var(--dur) * 1.2) var(--ease-bounce);border-radius:50%;flex:none;place-items:center;display:grid;position:relative;box-shadow:inset 0 -2px 4px #00000026}.bs-ball:before{content:"";background:#ffffffb3;border-radius:50%;width:30%;height:20%;position:absolute;top:16%;left:22%}.bs-ball.is-lifted{transform:translateY(calc(var(--ball) * -1.15 - var(--tube-pad) * 2))}.bs-ball i{font-style:normal;font-size:calc(var(--ball) * .42);color:#ffffffeb;text-shadow:0 1px 2px #00000073;pointer-events:none;display:none}.bs[data-symbols=on] .bs-ball i{display:block}.bs-c0{--hi:#ffa3a6;--mid:#ff5a5f;--lo:#c62a3a}.bs-c1{--hi:#ffeaa6;--mid:#ffc93c;--lo:#d98e00}.bs-c2{--hi:#a3f5da;--mid:#2ed3a3;--lo:#0d8f6c}.bs-c3{--hi:#acd9ff;--mid:#3fa9ff;--lo:#1665c8}.bs-c4{--hi:#d6c4ff;--mid:#9b6bff;--lo:#6236d6}.bs-c5{--hi:#ffc9a3;--mid:#ff8a3d;--lo:#cc5a12}.bs-c6{--hi:#ffc4e6;--mid:#ff7ac8;--lo:#cf3d93}.bs-c7{--hi:#9ff0ec;--mid:#13b5b1;--lo:#0a7471}.bs-c8{--hi:#e6c3a3;--mid:#a8754a;--lo:#6e4524}.bs-c9{--hi:#9aa6e8;--mid:#34418f;--lo:#1c2459}.bs.is-solved .bs-board{background:radial-gradient(70% 55% at 50% -12%,#ffffdc73,#0000 70%),repeating-linear-gradient(0deg,#ffffff0f 0 1px,#0000 1px 36px),repeating-linear-gradient(90deg,#ffffff0f 0 1px,#0000 1px 36px),linear-gradient(170deg,#2ed3a3,#0d8f6c)}[data-reduce-motion] .bs-ball,[data-reduce-motion] .bs-tube{transition:none;animation:none}@media (width<=639px){.bs{gap:var(--sp-2)}.bs-hud{gap:var(--sp-2) var(--sp-3)}.bs-stat b{font-size:var(--fs-lg)}.bs-tool{min-height:36px;font-size:var(--fs-xs);padding:0 10px}.bs-msg{min-height:1.2em;font-size:var(--fs-xs)}}
