:root{--bg:#0f1419;--felt:#16604a;--felt-2:#124e3c;--text:#f5f5f5;--muted:#9aa3ad;--accent:#2563eb;--card-bg:#fdfdfd;--card-border:#0000001f;--red:#c0392b;--black:#1a1a1a;--slot:#ffffff0f;--slot-border:#ffffff1f;--shadow-card:0 1px 2px #0000002e, 0 4px 10px #0000002e;--shadow-card-hover:0 2px 4px #00000038, 0 10px 24px #00000047;--card-radius:8px;--card-tilt:0deg;--back-color:#2c5e8f}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:radial-gradient(ellipse at top, var(--felt) 0%, var(--felt-2) 60%, #0d3b2e 100%);-webkit-user-select:none;user-select:none;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;overflow:hidden}footer.credit{z-index:40;font-size:11px;position:fixed;bottom:6px;right:10px}footer.credit a{color:#ffffff59;text-decoration:none}footer.credit a:hover{color:#ffffffb3}header{-webkit-backdrop-filter:saturate(180%)blur(20px);z-index:50;background:#0f14198c;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:fixed;top:0;left:0;right:0}.brand{letter-spacing:-.01em;align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.brand .mark{flex:none;width:22px;height:22px;display:block}.stats{font-variant-numeric:tabular-nums;color:var(--muted);gap:22px;font-size:13px;display:flex}.stats span{white-space:nowrap}.stats b{color:var(--text);margin-left:6px;font-weight:600}.actions{gap:8px;display:flex}button.btn{color:var(--text);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:background .15s,border-color .15s;display:inline-flex}button.btn:hover{background:#ffffff17;border-color:#ffffff2e}button.btn:active{transform:translateY(1px)}button.btn.primary{background:var(--accent);border-color:var(--accent)}button.btn.primary:hover{background:#1d4fd1}button.btn .icon{flex:none;width:18px;height:18px}main{padding:24px;position:absolute;inset:56px 0 0}#board{width:100%;max-width:980px;height:100%;margin:0 auto;position:relative}#board[data-game=spider]{max-width:1240px}.row{grid-template-columns:repeat(var(--cols,7), 1fr);gap:var(--gap);display:grid;position:absolute;left:0;right:0}.row.top{top:0}.row.tableau{top:calc(var(--card-h) + 24px)}.slot{width:var(--card-w);height:var(--card-h);background:var(--slot);border:1px dashed var(--slot-border);color:#ffffff40;border-radius:10px;justify-content:center;align-items:center;display:flex;position:relative}.slot .icon{width:28px;height:28px}.pile{width:var(--card-w);height:var(--card-h);position:relative}.pile.tableau{height:auto;min-height:var(--card-h)}.stock-counter{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px;position:absolute;bottom:-22px;left:50%;transform:translate(-50%)}.menu-wrap{position:relative}button.btn .icon.chevron{opacity:.7;width:14px;height:14px}.menu{-webkit-backdrop-filter:saturate(180%)blur(20px);z-index:80;background:#141b21f5;border:1px solid #ffffff1a;border-radius:12px;min-width:200px;padding:6px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 40px #00000073}.menu[hidden]{display:none}.menu-group{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px;font-size:11px;font-weight:600}.menu-item{width:100%;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:8px;padding:7px 10px;font-size:13px;display:flex}.menu-item:hover,.menu-item:focus-visible{background:#ffffff14;outline:none}.menu-item .check{visibility:hidden;width:16px;height:16px;color:var(--accent);flex:none}.menu-item[aria-checked=true] .check{visibility:visible}.menu-item .hint{color:var(--muted);margin-left:auto;font-size:12px}#toast{text-align:center;opacity:0;pointer-events:none;z-index:90;background:#0f1419eb;border:1px solid #ffffff1a;border-radius:10px;max-width:calc(100% - 32px);padding:10px 16px;font-size:13px;transition:opacity .2s,transform .2s;position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px)}#toast.show{opacity:1;transform:translate(-50%)}@media (width<=700px){main{padding:12px}header{padding:0 12px}.stats{gap:14px;font-size:12px}.actions .btn span{display:none}.actions .btn{padding:8px}.actions .btn .chevron{display:none}}@media (width<=480px){.stats:has(#scoreStat:not([hidden])) #movesStat{display:none}.stats:has(#scoreStat:not([hidden])){gap:12px}.stats:has(#scoreStat:not([hidden])) span{flex-direction:column;align-items:center;font-size:10px;line-height:1.2;display:flex}.stats:has(#scoreStat:not([hidden])) b{margin-left:0;font-size:13px}}.card{width:var(--card-w);height:var(--card-h);background:var(--card-bg);border-radius:var(--card-radius);border:1px solid var(--card-border);box-shadow:var(--shadow-card);cursor:pointer;transform-style:preserve-3d;will-change:transform;transition:box-shadow .15s,transform .18s cubic-bezier(.2,.7,.2,1),top .22s cubic-bezier(.2,.7,.2,1),left .22s cubic-bezier(.2,.7,.2,1);position:absolute;top:0;left:0;overflow:hidden}.card.face-down{cursor:default;background:linear-gradient(135deg,#2c5e8f 0%,#1f4a73 100%);border-color:#00000040}.card.face-down:before{content:"";background:repeating-linear-gradient(45deg,#ffffff0a 0 4px,#0000 4px 8px);border:1.5px solid #ffffff2e;border-radius:5px;position:absolute;inset:6px}.card.face-up{padding:6px 8px}.card .corner{font-variant-numeric:tabular-nums;text-align:center;font-weight:700;line-height:1;position:absolute}.card .corner.tl{top:5px;left:6px}.card .corner .rank{font-size:15px}.card .corner .suit{font-size:13px}.card.red,.face.red{color:var(--red)}.face.black{color:#111}.card.black{color:var(--black)}.card.draggable:hover{box-shadow:var(--shadow-card-hover)}.card.dragging{z-index:1000;transition:none;box-shadow:0 8px 30px #0006}.card:not(:has(playing-card)) .corner.tl{top:4px;left:5px}.card:not(:has(playing-card)) .corner .rank{font-size:14px}.card:not(:has(playing-card)) .corner .suit{font-size:12px}.card playing-card,.card playing-card img{width:100%;height:100%;display:block}.card.face-up:has(playing-card){padding:4.2% 3%}.card.flip-host .face.front:has(playing-card){padding:4.2% 3%}.card.flying .face.front:has(playing-card){padding:4.2% 3%}.card.face-down:has(playing-card){background:0 0}.card.face-down:has(playing-card):before{content:none}:root{--paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}#board[data-mode=rich] .card{border:none;box-shadow:inset 0 1px #ffffffe6,0 0 0 .5px #00000047,0 1px 1px #00000038,0 6px 16px #0000003d}#board[data-mode=rich] .card:after{content:"";border-radius:inherit;pointer-events:none;background-image:linear-gradient(125deg, #ffffff29 0%, #fff0 42%), var(--paper-grain);opacity:.5;mix-blend-mode:soft-light;background-size:auto,120px 120px;position:absolute;inset:0}#board[data-mode=rich] .card.face-down{transform:rotate(var(--card-tilt,0deg))}.card.dragging:has(playing-card){transform:scale(1.03);box-shadow:inset 0 1px #ffffffe6,0 2px 4px #0000004d,0 18px 40px #0000006b}#board[data-mode=rich] .card.draggable:hover{box-shadow:inset 0 1px #ffffffe6,0 0 0 .5px #00000047,0 2px 3px #0000003d,0 12px 28px #0000004d}#board[data-mode=rich] .card.flying:after,#board[data-mode=rich] .card.flip-host:after{content:none}.card.flip-host{perspective:1200px;z-index:50;animation:.4s cubic-bezier(.34,.1,.34,1) both cardFlipArc;overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important}.card.flip-host .flipper{transform-style:preserve-3d;animation:.4s cubic-bezier(.5,.05,.5,.95) both cardFlipSpin;position:absolute;inset:0}.card.flip-host .face{border:1px solid var(--card-border);box-shadow:var(--shadow-card);backface-visibility:hidden;background:var(--card-bg);border-radius:8px;position:absolute;inset:0;overflow:hidden}.card.flip-host .face.back{background:linear-gradient(135deg,#2c5e8f 0%,#1f4a73 100%);border-color:#00000040}.card.flip-host .face.back:before{content:"";background:repeating-linear-gradient(45deg,#ffffff0a 0 4px,#0000 4px 8px);border:1.5px solid #ffffff2e;border-radius:5px;position:absolute;inset:6px}.card.flip-host .face.front{padding:6px 8px;transform:rotateY(180deg)}@keyframes cardFlipArc{0%{transform:translate(0,0)scale(1)}50%{transform:translate(45%,-10%)scale(1.12)}to{transform:translate(0,0)scale(1)}}@keyframes cardFlipSpin{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.card.flying{z-index:900;pointer-events:none;perspective:1200px;animation:.55s cubic-bezier(.34,.1,.34,1) both flyArc;animation-delay:var(--fly-delay,0s);overflow:visible;box-shadow:none!important;background:0 0!important;border:none!important}.card.flying .flipper{transform-style:preserve-3d;animation:.55s cubic-bezier(.5,.05,.5,.95) both flySpin;animation-delay:var(--fly-delay,0s);position:absolute;inset:0}.card.flying .face{border:1px solid var(--card-border);box-shadow:var(--shadow-card);backface-visibility:hidden;background:var(--card-bg);border-radius:8px;position:absolute;inset:0;overflow:hidden}.card.flying .face.back{background:linear-gradient(135deg,#2c5e8f 0%,#1f4a73 100%);border-color:#00000040}.card.flying .face.back:before{content:"";background:repeating-linear-gradient(45deg,#ffffff0a 0 4px,#0000 4px 8px);border:1.5px solid #ffffff2e;border-radius:5px;position:absolute;inset:6px}.card.flying .face.front{padding:6px 8px;transform:rotateY(180deg)}@keyframes flyArc{0%{transform:translate3d(var(--fly-dx), var(--fly-dy), 0) scale(.96)}50%{transform:translate3d(calc(var(--fly-dx) * .5), calc(var(--fly-dy) * .5 - 30px), 0) scale(1.12)}to{transform:translate(0,0)scale(1)}}@keyframes flySpin{0%{transform:rotateY(180deg)}to{transform:rotateY(0)}}.card.flying .face.front{transform:rotateY(0)}.card.flying .face.back{transform:rotateY(180deg)}.card.flying.slide .flipper{animation:none}.pile.drop-hover .slot,.pile.drop-hover>.card:last-child{box-shadow:0 0 0 2px var(--accent), 0 4px 14px #2563eb59;transition:box-shadow .12s ease-out}.pile.drop-hover .slot{background:#2563eb1a;border-color:#2563eb8c}.cascade-canvas{z-index:60;pointer-events:none;position:fixed;inset:0}#win{-webkit-backdrop-filter:blur(8px);z-index:70;background:#0a0f1499;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#win.show{display:flex}#win.show .win-card{animation:.55s cubic-bezier(.2,.7,.2,1.15) both winIn}@keyframes winIn{0%{opacity:0;transform:translateY(26px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}.win-card{-webkit-backdrop-filter:saturate(180%)blur(20px);text-align:center;background:#ffffff14;border:1px solid #ffffff1f;border-radius:16px;max-width:360px;padding:36px 40px;box-shadow:0 1px 2px #0000001a,0 20px 60px #0006}.win-card h2{letter-spacing:-.02em;margin:0 0 8px;font-size:28px}.win-card p{color:var(--muted);margin:0 0 24px;font-size:14px}