.m3{gap:10px}.m3-goals{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;width:min(100%,460px)}.m3-moves,.m3-goal{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-variant-numeric:tabular-nums;min-height:40px}.m3-moves b{font-size:1.35rem;line-height:1}.m3-moves span{color:var(--muted);font-size:.85rem}.m3-goal-icon svg{width:28px;height:28px;display:block}.m3-goal-num{font-weight:800}.m3-goal.score{flex:1 1 200px}.m3-goal-label{font-weight:700;font-size:.85rem}.m3-bar{flex:1;height:8px;border-radius:999px;background:color-mix(in oklab,var(--cell-line) 70%,transparent);overflow:hidden;min-width:50px}.m3-bar i{display:block;height:100%;background:var(--good);border-radius:inherit;transition:width .3s ease-out}.m3-goal.score .m3-goal-num{font-size:.8rem;font-weight:700;color:var(--muted)}.m3-goal.done{border-color:var(--good);background:color-mix(in oklab,var(--good) 14%,var(--surface-2))}.m3-goal.done .m3-goal-num{color:var(--good)}.m3-board{--soil-a: color-mix(in oklab, var(--good) 14%, var(--surface-2));--soil-b: color-mix(in oklab, var(--good) 24%, var(--surface-2));position:relative;width:min(100%,460px);aspect-ratio:var(--cols) / var(--rows);border-radius:16px;overflow:hidden;touch-action:none;outline:none;background-color:var(--soil-a);background-image:conic-gradient(var(--soil-b) 25%,transparent 0 50%,var(--soil-b) 0 75%,transparent 0);background-size:calc(200% / var(--cols)) calc(200% / var(--rows));box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--good) 30%,var(--border))}.m3-board:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.m3-layer,.m3-fx{position:absolute;inset:0}.m3-fx{pointer-events:none;z-index:5}.m3-piece,.m3-cursor,.m3-beam{position:absolute;left:0;top:0;width:calc(100% / var(--cols));height:calc(100% / var(--rows));transform:translate(calc(var(--c) * 100%),calc(var(--r) * 100%))}.m3-piece{transition:transform .26s cubic-bezier(.5,0,.75,1.1);display:grid;place-items:center;cursor:pointer}.m3-piece.no-tr{transition:none}.m3-piece svg{width:84%;height:84%;display:block;filter:drop-shadow(0 2px 1.5px rgb(0 0 0 / .22));transition:transform .15s;pointer-events:none}.m3-piece.sel svg{transform:scale(1.14)}.m3-piece.sel:before{content:"";position:absolute;inset:6%;border-radius:30%;background:color-mix(in oklab,var(--hl) 75%,transparent);box-shadow:0 0 0 2px var(--focus)}.m3-piece.hint svg{animation:m3-wiggle .9s ease-in-out infinite}@keyframes m3-wiggle{0%,to{transform:rotate(0)}20%{transform:rotate(-12deg) scale(1.08)}40%{transform:rotate(10deg) scale(1.08)}60%{transform:rotate(0)}}.m3-piece.nope svg{animation:m3-nope .26s}@keyframes m3-nope{25%{transform:translate(-10%)}75%{transform:translate(10%)}}.m3-piece.clearing svg{animation:m3-clear .23s ease-in forwards}@keyframes m3-clear{0%{transform:scale(1)}40%{transform:scale(1.25);filter:brightness(1.4)}to{transform:scale(0);opacity:0}}.m3-piece.born svg{animation:m3-born .26s ease-out}@keyframes m3-born{0%{transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.2)}to{transform:scale(1)}}.m3-piece.shuffle{transition-duration:.42s;transition-timing-function:ease-in-out}.m3-piece.sp-row:after,.m3-piece.sp-col:after{content:"";position:absolute;border-radius:999px;pointer-events:none;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .95),transparent);box-shadow:0 0 6px #ffffffe6;animation:m3-shine 1.4s ease-in-out infinite}.m3-piece.sp-row:after{left:4%;right:4%;top:45%;height:10%}.m3-piece.sp-col:after{top:4%;bottom:4%;left:45%;width:10%;background:linear-gradient(180deg,transparent,rgb(255 255 255 / .95),transparent)}.m3-piece.sp-area:before{content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffec96bf 30%,#ffc83c00 70%);animation:m3-halo 1.2s ease-in-out infinite}@keyframes m3-shine{50%{opacity:.45}}@keyframes m3-halo{50%{transform:scale(1.18);opacity:.7}}.m3-beam{z-index:6}.m3-beam.row{width:100%;transform:translateY(calc(var(--r) * 100%));background:linear-gradient(180deg,transparent 30%,rgb(255 255 255 / .9) 50%,transparent 70%);animation:m3-beam .42s ease-out forwards}.m3-beam.col{height:100%;transform:translate(calc(var(--c) * 100%));background:linear-gradient(90deg,transparent 30%,rgb(255 255 255 / .9) 50%,transparent 70%);animation:m3-beam .42s ease-out forwards}.m3-beam.area{border-radius:50%;background:radial-gradient(circle,#fff0aaf2,#ffbe3c00 70%);animation:m3-burst .42s ease-out forwards}@keyframes m3-beam{0%{opacity:1}to{opacity:0}}@keyframes m3-burst{0%{opacity:1;scale:.5}to{opacity:0;scale:3.2}}.m3-cursor{display:none;pointer-events:none;z-index:4;box-shadow:inset 0 0 0 3px var(--focus);border-radius:10px;transition:transform 90ms}.m3-board.kb .m3-cursor{display:block}.m3-float{position:absolute;transform:translate(-50%,-50%);font-weight:800;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgb(0 0 0 / .6),0 0 8px rgb(0 0 0 / .35);animation:m3-float .9s ease-out forwards;font-size:1rem}.m3-float.big{font-size:1.35rem;color:#fff6c9}@keyframes m3-float{0%{opacity:0;margin-top:6px}20%{opacity:1}to{opacity:0;margin-top:-42px}}.m3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}