.bg-layout{display:grid;grid-template-columns:minmax(0,560px) minmax(150px,1fr);gap:28px;align-items:start}.bg-stage{position:relative;min-width:0}.bg-board{--cols:8;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:5px;background:#24483f;padding:13px;border-radius:20px;box-shadow:0 14px 35px #153e3526;isolation:isolate}.bg-cell{min-width:0;aspect-ratio:1;border:0;border-radius:7px;display:grid;place-items:center;position:relative;background:#417769;padding:5px;cursor:pointer}.bg-cell:focus-visible,.bg-column:focus-visible{outline:3px solid #ffdb78;outline-offset:-3px;z-index:1}.bg-piece{position:relative;width:88%;height:88%;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.7,.25,1),opacity .2s;pointer-events:none;opacity:1}.bg-piece[data-side="0"]{opacity:0;transform:scale(.2)}.bg-piece[data-side="2"]{transform:rotateY(180deg)}.bg-piece i{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;background:radial-gradient(circle at 35% 25%,#556077,#162033 65%);box-shadow:0 3px 5px #13272d66}.bg-piece i:last-child{transform:rotateY(180deg);background:radial-gradient(circle at 35% 25%,#fff,#dbe5e7 70%)}.bg-cell.is-legal:after{content:'';position:absolute;width:14%;height:14%;border:2px solid #d3f3df99;border-radius:50%}.bg-cell.is-last{outline:2px solid #f6c769;outline-offset:-3px}.bg-board[data-kind="four-in-row"]{--cols:7;background:#233d65;gap:7px}.bg-board[data-kind="four-in-row"] .bg-cell{border-radius:50%;background:#14243e;cursor:default;padding:2px}.bg-board[data-kind="four-in-row"] .bg-piece i{background:linear-gradient(145deg,#ffa892,#df614e)}.bg-board[data-kind="four-in-row"] .bg-piece i:last-child{background:linear-gradient(145deg,#a7d8ff,#3a85d0)}.bg-board[data-kind="four-in-row"] .bg-piece[data-side="2"]:after{content:'◆';position:absolute;inset:0;display:grid;place-items:center;transform:rotateY(180deg);color:#123765;font-size:clamp(10px,2vw,20px);backface-visibility:hidden}.bg-drop{animation:bg-fall .42s cubic-bezier(.3,.1,.4,1)}@keyframes bg-fall{from{translate:0 var(--drop-distance,-300px)}70%{translate:0 0}85%{translate:0 -7px}to{translate:0 0}}.bg-columns{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;padding:0 13px;margin-bottom:9px}.bg-column{border:1px solid #c4d2e5;background:#f0f5fc;color:#294d7f;min-height:42px;border-radius:9px;cursor:pointer;font-weight:700}.bg-column:disabled{opacity:.45;cursor:default}.bg-board[data-kind="lights-out"]{background:#172b44;gap:9px;padding:16px}.bg-board[data-kind="lights-out"] .bg-cell{background:#29415c;box-shadow:inset 0 0 0 1px #3b5875;transition:background .3s,box-shadow .3s,transform .22s}.bg-board[data-kind="lights-out"] .bg-cell[data-value="1"]{background:#ffcf6b;box-shadow:0 0 18px #ffcc5355,inset 0 0 0 1px #ffe7ae}.bg-board[data-kind="lights-out"] .bg-cell:active{transform:scale(.94)}.bg-cell.is-hint{outline:4px solid #69e6ee;outline-offset:-4px}.bg-actions{display:grid;gap:10px}.bg-actions p{font-size:13px;line-height:1.8;color:#5b6b7b;margin-top:8px}.bg-actions .cg-button{justify-content:center}.bg-workspace [hidden]{display:none!important}.bg-stage .cg-pause-cover{z-index:5;border-radius:20px;background:#eff4faed;backdrop-filter:blur(6px)}@media(max-width:700px){.bg-layout{grid-template-columns:1fr;gap:18px}.bg-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-actions p{grid-column:1/-1}.bg-board{padding:9px;gap:4px}.bg-board[data-kind="four-in-row"]{gap:5px}.bg-columns{gap:5px;padding:0 9px}.bg-column{min-height:44px}.bg-workspace .cg-toolbar{gap:10px}.bg-board[data-kind="lights-out"]{padding:12px;gap:7px}}@media(prefers-reduced-motion:reduce){.bg-workspace *{animation:none!important;transition:none!important}}