.canvas.pips{background:radial-gradient(120% 90% at 20% 0,#f08a45 0%,#de6a2b 40%,#bf4a18 100%)}.canvas.pips .scene{background-image:radial-gradient(#fff6e629 1.2px,#0000 1.6px);background-size:22px 22px}.canvas.pips .s1{background:#ffdcaa38;width:420px;height:420px;top:-180px;right:-120px}.canvas.pips .s2{background:#78280838;width:300px;height:300px;bottom:-140px;left:-100px}.canvas.pips .s3{background:#ffdcaa1f;width:160px;height:160px;bottom:-70px;left:38%}.canvas.pips .stage{flex-wrap:wrap;align-content:flex-start}.canvas.pips .plate,.canvas.pips .rack{position:relative;left:clamp(0px,50% - 408px,180px)}.canvas.pips .plate{--cell:min(100px, calc(420px / max(var(--cols), var(--rows))));box-sizing:content-box;border-radius:var(--rl);background:#f3e6cf;flex:none;padding:18px;transition:box-shadow .3s;box-shadow:0 8px #cdb48e,0 18px 30px #461e0061}.canvas.pips .plate.done,.canvas.done.pips .plate{box-shadow:0 8px #cdb48e,0 18px 30px #461e0061,0 0 0 6px #fff6e68c}.canvas.pips .board{grid-template-columns:repeat(var(--cols), var(--cell));grid-template-rows:repeat(var(--rows), var(--cell));border-radius:10px;display:grid;position:relative}.canvas.pips .board:focus{outline:none}.canvas.pips .board:focus-visible{outline-offset:8px;outline:3px solid #1e5b50}.canvas.pips .pocket{cursor:pointer;background:#e6d5b5;border-radius:9px;margin:3px;box-shadow:inset 0 3px 4px #5a320a38,inset 0 -1px #ffffff8c}.canvas.pips .pocket.bad{background:repeating-linear-gradient(135deg,#e6d5b5 0 6px,#e2b9a0 6px 9px)}.canvas.pips .pocket.anchor{box-shadow:inset 0 3px 4px #5a320a38,0 0 0 3px #f2c14e}.canvas.pips .pocket.drop{background:#cfe6d4;box-shadow:inset 0 0 0 3px #1e5b50}.canvas.pips .pocket.hinted{animation:.9s ease-out 2 pips-pulse}.canvas.pips .board:focus-visible .pocket.cursor{outline-offset:-2px;outline:3px dashed #1e5b50}.canvas.pips .rg{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0}.canvas.pips .rg path{fill:none;stroke:#7a3a14;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.canvas.pips .rg path.bad{stroke:#c2321c;stroke-dasharray:7 5}.canvas.pips .tag{z-index:4;pointer-events:none;color:#fff6e6;height:22px;font-weight:600;font-size:var(--fs-s);font-variant-numeric:tabular-nums;background:#3b1e0e;border-radius:7px;place-self:start;align-items:center;gap:3px;margin:-14px 0 0 -8px;padding:0 7px;transition:background .2s;display:inline-flex;position:relative;box-shadow:0 2px #1f0e05}.canvas.pips .tag .ic{fill:none;stroke:currentColor;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round;width:13px;height:13px}.canvas.pips .tag.ok{background:#2f8f5b;box-shadow:0 2px #1e6640}.canvas.pips .tag.bad{background:#c2321c;box-shadow:0 2px #7e1e0f}.canvas.pips .tag.ok.fx{animation:.2s ease-out pips-pop}.canvas.pips .tag.bad.fx{animation:.3s ease-out pips-shake}.canvas.pips .placed{box-sizing:border-box;z-index:3;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;padding:6px;position:relative}.canvas.pips .placed .dom{width:100%;height:100%}.canvas.pips .placed.land{animation:.15s ease-out pips-land}.canvas.pips .placed.hinted .dom-face{fill:#fff1b8}.canvas.pips .placed.dragging,.canvas.pips .tray-dom.dragging{opacity:.3}.canvas.pips .dom{filter:drop-shadow(0 5px 6px #3c140059);display:block;overflow:visible}.canvas.pips .dom-face{fill:#fffbf2}.canvas.pips .dom-edge{fill:#c9b99f}.canvas.pips .dom-mid{stroke:#d7c9b0;stroke-width:3px}.canvas.pips .pip{fill:#1f1a17}.canvas.pips .rack{box-sizing:border-box;border-radius:var(--rl);background:#8a4a22;flex:none;justify-content:center;width:332px;padding:16px;display:flex;box-shadow:inset 0 2px #ffdcaa40,0 8px #5e2e10,0 18px 30px #461e0061}.canvas.pips .tray{grid-template-columns:repeat(2,124px);gap:12px;display:grid}.canvas.pips .tray-dom,.canvas.pips .tray-gap{border-radius:10px;width:124px;height:62px;display:block}.canvas.pips .tray-gap{border:2px dashed #ffdcaa47}.canvas.pips .tray-dom{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;padding:0}.canvas.pips .tray-dom .dom{width:100%;height:100%;transition:transform .12s}.canvas.pips .tray-dom:hover .dom,.canvas.pips .tray-dom:focus-visible .dom{transform:translateY(-3px)}.canvas.pips .tray-dom:focus-visible{outline-offset:3px;outline:3px solid #fff6e6}.canvas.pips .tray-dom.sel{outline-offset:3px;outline:3px solid #f2c14e}.canvas.pips .tray-dom.sel .dom{transform:translateY(-3px)}.canvas.pips .pips-ghost{z-index:60;pointer-events:none;box-sizing:border-box;padding:6px;position:fixed}.canvas.pips .pips-ghost .dom{filter:drop-shadow(0 12px 12px #3c140073);width:100%;height:100%;display:block;overflow:visible}@keyframes pips-pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes pips-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}}@keyframes pips-land{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes pips-pulse{0%{box-shadow:inset 0 3px 4px #5a320a38,0 0 #f2c14ee6}to{box-shadow:inset 0 3px 4px #5a320a38,0 0 0 10px #f2c14e00}}@media (width<=640px){.canvas.pips .stage{align-content:center}.canvas.pips .plate{--cell:min(78px, calc(318px / max(var(--cols), var(--rows))), calc((100vw - 72px) / var(--cols)));padding:14px}.canvas.pips .tag{height:20px;font-size:var(--fs-xs);margin:-13px 0 0 -7px;padding:0 6px}.canvas.pips .rack{width:auto;padding:10px}.canvas.pips .tray{grid-template-columns:repeat(3,96px);gap:8px}.canvas.pips .tray-dom,.canvas.pips .tray-gap{width:96px;height:48px}}@media (prefers-reduced-motion:reduce){.canvas.pips .tag,.canvas.pips .plate,.canvas.pips .tray-dom .dom{transition:none}.canvas.pips .tag.fx,.canvas.pips .placed.land,.canvas.pips .pocket.hinted{animation:none}}