:root{--ink:#292a28;--muted:#73736c;--line:#dcdad1;--accent:#3058ad;--cell:clamp(28px,5.5vw,49px);--gap:calc(var(--cell) * .09);--unit:26px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{color:var(--ink);background:#f4f2eb;margin:0;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:16px 4vw;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand .logo{border-radius:6px;width:32px;height:32px}.brand h1{letter-spacing:2px;margin:0;font-size:20px}.brand em{color:var(--muted);letter-spacing:1px;font-size:10px;font-style:normal}.topbar-right{align-items:center;gap:6px;display:flex}.iconbtn{background:0 0;border:0;border-radius:6px;min-width:36px;height:36px}.iconbtn:hover{background:#e8e5dc}.iconbtn.off{opacity:.4}main{-webkit-user-select:none;user-select:none;max-width:990px;margin:auto;padding:30px 24px 24px}.workspaceHead{justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px;display:flex}.eyebrow{letter-spacing:2px;color:var(--muted);margin:0 0 6px;font-size:10px}.workspaceHead h2{letter-spacing:1px;margin:0;font-size:25px;font-weight:600}.workspaceHead p:last-child{color:var(--muted);margin:0;font-size:12px}#levelSelect{border:1px solid var(--line);max-width:180px;min-height:34px;color:var(--ink);font:inherit;background:#fffdf6;border-radius:5px;margin-top:10px;padding:5px 9px;font-size:12px}.lvRow{gap:10px;margin-bottom:26px;padding:2px 2px 8px;display:flex;overflow-x:auto}.lvChip{background:#eae7de;border:1px solid #0000;border-radius:5px;flex-direction:column;flex:1;align-items:center;gap:7px;min-width:66px;padding:9px;font-size:12px;font-weight:600;transition:background .15s,transform .15s;display:flex}.lvChip:hover{background:#e0ddd2;transform:translateY(-2px)}.lvChip.cur{border-color:var(--ink);background:#fffdf6}.lvChip.done .levelNumber:after{content:" ✓";color:#38794c}.levelMini{grid-template-columns:repeat(8,1fr);gap:1px;width:48px;height:48px;display:grid}.levelMini i{background:#fbf9f2;border-radius:1px}.levelMini i.black{background:#292a28}.randChip{color:var(--muted);justify-content:center}.randChip:before{content:"↻";height:48px;font-size:28px;font-weight:400}.playRow{justify-content:space-between;align-items:flex-start;gap:48px;display:flex}.boardCol{flex-direction:column;flex-shrink:0;align-items:stretch;gap:20px;display:flex}.tray{padding:calc(var(--cell) * .38);background:linear-gradient(145deg,#999b95,#7e817d);border-radius:18px;position:relative;box-shadow:inset 0 2px 2px #c6c7c0,inset 0 -4px 1px #626560,0 14px 24px #33382f25,0 3px 4px #36392e30}.well{padding:calc(var(--cell) * .18);background:#5f625c;border-radius:7px;box-shadow:inset 0 3px 5px #20282070,0 1px 1px #cacbc280}#board{grid-template-columns:repeat(8,var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);touch-action:pan-y;display:grid;position:relative}.cell{background:#777a74;border-radius:16%;position:relative;box-shadow:inset 0 2px 3px #373b3550,0 1px 1px #c7c9be60}.cell:after{content:"";border:2px solid #a3a69e;border-bottom-color:#686d64;border-radius:18%;position:absolute;inset:13%;box-shadow:0 2px 2px #22282080,inset 0 2px 2px #272d2660}#pieceLayer{pointer-events:none;position:absolute;inset:0}#pieceLayer>.piece{pointer-events:auto}.piece,.fixedBlock,.hintGhost,.ghost{left:calc(var(--gx) * (var(--cell) + var(--gap)));top:calc(var(--gy) * (var(--cell) + var(--gap)));width:calc(var(--pw) * var(--cell) + (var(--pw) - 1) * var(--gap));height:calc(var(--ph) * var(--cell) + (var(--ph) - 1) * var(--gap));position:absolute}.piece,.tpiece{cursor:grab;touch-action:none}.piece{z-index:5}.fixedBlock{z-index:2;pointer-events:none}.fixedBlock .pbody{box-shadow:inset 0 2px 1px #ffffff16,inset 0 -3px 1px #0006,0 2px 2px #0005}.piece.lift{visibility:hidden}.piece.sel,.tpiece.sel{outline-offset:5px;border-radius:5px;outline:2px solid #3058ad}.pbody{background:linear-gradient(145deg,var(--pc-top),var(--pc));box-shadow:inset 0 2px 1px #ffffff50,inset 0 -3px 1px #0002,0 3px 0 var(--pc-side),0 5px 6px #22222235;pointer-events:none;border-radius:5px;position:absolute;inset:0}.pc-red{--pc:#dc302b;--pc-top:#ed4940;--pc-side:#a72221}.pc-blue{--pc:#294aa4;--pc-top:#3c64bb;--pc-side:#203777}.pc-yellow{--pc:#f1be08;--pc-top:#ffd127;--pc-side:#be8f02}.pc-white{--pc:#eeeae0;--pc-top:#fffdf6;--pc-side:#bcb8ac}.pc-black{--pc:#232523;--pc-top:#363934;--pc-side:#141613}.pieceSize{white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff9;font-size:10px;position:absolute;bottom:7px;right:8px}.tpiece.narrow .pieceSize{writing-mode:vertical-rl;right:5px}.pc-white .pieceSize,.pc-yellow .pieceSize{color:#38372c99}.piece .pieceSize,.dragPiece .pieceSize,.hintGhost .pieceSize{display:none}.pPanel{width:310px;min-width:260px;padding:5px 0 0}.pPanel.droptarget{outline:2px dashed var(--accent);outline-offset:10px}.pHead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:15px;display:flex}.pHead h3{margin:0;font-size:16px;font-weight:600}.cnt{color:var(--muted);font-size:11px}#pTray{flex-wrap:wrap;align-content:flex-start;align-items:center;gap:20px;min-height:335px;padding:24px 7px;display:flex}.tpiece{width:calc(var(--pw) * var(--unit));height:calc(var(--ph) * var(--unit));flex-shrink:0;transition:filter .12s;position:relative}.tpiece:hover{filter:brightness(1.06)}.tpiece.dragging{opacity:.25}.trayEmpty{text-align:center;width:100%;color:var(--muted);padding:80px 0;font-size:14px}.ctlRow{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:8px;padding-top:16px;display:grid}.cbtn{background:0 0;border:1px solid #cfcdc3;border-radius:5px;min-height:40px;font-size:12px;transition:background .12s}.cbtn:hover{background:#e7e4da}#btnHint{background:var(--ink);border-color:var(--ink);color:#fff}#btnHint:hover{background:#44463f}.tip,.hint{color:var(--muted);font-size:12px;line-height:1.8}.tip{margin:14px 0 0}.hint{text-align:center;margin-top:28px}#statusLine{color:#66685f;font-variant-numeric:tabular-nums;justify-content:center;font-size:12px;display:flex}.progress{background:#deddd3;border-radius:2px;height:3px;margin-top:-10px;overflow:hidden}#progressFill{background:var(--accent);width:0;height:100%;transition:width .18s}.ghost{z-index:4;pointer-events:none;border-radius:5px;display:none}.ghost.ok{background:#91dbad66;border:2px dashed #d5ffe3;display:block}.ghost.bad{background:#f74a4a55;border:2px dashed #ffb0a3;display:block}.hintGhost{pointer-events:none;opacity:.65;z-index:8;outline-offset:2px;border-radius:5px;outline:3px dashed #fff;animation:1s ease-in-out 3 hintPulse}#dragLayer{pointer-events:none;z-index:90;position:fixed;inset:0}.dragPiece{will-change:transform;position:fixed;top:0;left:0}body.dragging,body.dragging *{cursor:grabbing!important}#toast{color:#fff;visibility:hidden;z-index:95;background:#292a28;border-radius:8px;width:max-content;max-width:90vw;padding:12px 20px;font-size:13px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}#toast.show{visibility:visible}.overlay,.modal{z-index:60;background:#25282055;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.hidden{display:none!important}.winCard,.help-card{background:#fffdf5;border-radius:12px;max-width:480px;max-height:85vh;padding:28px;overflow:auto;box-shadow:0 20px 60px #24282030}.winCard{text-align:center}.miniRow{justify-content:center;gap:5px;display:flex}.miniRow i{width:18px;height:18px}.winCard h2{margin:18px 0 8px;font-size:28px}.stats{color:var(--muted);font-size:13px}.row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px;display:flex}.btn{border:1px solid var(--line);background:0 0;border-radius:5px;padding:10px 16px;font-size:13px}.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.help-card{font-size:14px;line-height:1.9}.help-card h2{margin:0;font-size:20px}.foot{text-align:right}.seo{border-top:1px solid var(--line);max-width:940px;color:var(--muted);margin:20px auto 40px;padding:22px 24px 0;font-size:12px;line-height:1.9}.seo h2{color:var(--ink);font-size:13px;font-weight:600}.piece.shake,.tpiece.shake{animation:.25s shake}.piece.winPulse{animation:.4s winPulse;animation-delay:var(--d,0s)}@keyframes shake{30%{translate:-3px}60%{translate:3px}}@keyframes winPulse{50%{filter:brightness(1.2)}}@keyframes hintPulse{50%{opacity:.35}}@media (width<=800px){.brand em{display:none}.playRow{gap:24px}:root{--cell:4.9vw;--unit:23px}main{padding:24px 18px}.pPanel{min-width:240px}}@media (width<=620px){:root{--cell:calc((100vw - 78px) / 8.63);--unit:23px}.topbar{gap:8px;min-height:60px;padding:12px 16px}.brand{gap:7px}.brand .logo{width:25px;height:25px}.brand h1{letter-spacing:0;font-size:15px}.topbar-right{gap:0}.iconbtn{min-width:30px;padding:3px}.workspaceHead{align-items:start;margin-bottom:16px}.workspaceHead h2{font-size:21px}.workspaceHead p:last-child{text-align:right;max-width:146px;font-size:11px;line-height:1.7}main{padding:22px 18px}.lvRow{gap:7px;margin-bottom:20px}.lvChip{min-width:60px;padding:7px}.levelMini{width:40px;height:40px}.playRow{flex-direction:column;align-items:center;gap:28px}.boardCol{width:max-content;max-width:100%}.pPanel{width:100%;min-width:0}#pTray{gap:18px;min-height:0;padding:22px 6px}.ctlRow{grid-template-columns:repeat(4,1fr)}.hint{margin-top:18px;font-size:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}