:root{--gap:clamp(6px, 1.1vw, 14px);--pad:clamp(10px, 1.6vw, 22px);--card-w-from-width:calc((100vw - 2 * var(--pad) - 6 * var(--gap)) / 7);--pile-depth:3.6;--card-w-from-height:calc((100dvh - 2 * var(--pad) - var(--toolbar-h) - 2 * var(--gap)) / (1.4 * (1 + var(--pile-depth))));--card-w:min(var(--card-w-from-width), var(--card-w-from-height), 168px);--card-h:calc(var(--card-w) * 1.4);--radius:calc(var(--card-w) * .09);--fan-down:calc(var(--card-h) * .19);--fan-up:calc(var(--card-h) * .3);--toolbar-h:clamp(44px, 6.5dvh, 62px);--felt:#17693f;--felt-edge:#0d4c2c;--card-face:#fdfdfb;--card-edge:#00000047;--card-back:#2f5fa8;--card-back-alt:#24487d;--slot:#ffffff21;--slot-line:#ffffff47;--red:#c8102e;--black:#16181d;--text:#f2f6f3;--toolbar-bg:#00000047;--btn-bg:#ffffff24;--btn-bg-active:#ffffff4d;--shadow:0 2px 6px #00000052;--lift:0 10px 24px #00000073}@media (prefers-color-scheme:dark){:root{--felt:#10402a;--felt-edge:#07271a;--card-face:#ecedf0;--card-back:#23477f;--card-back-alt:#1a3560;--red:#d5253f;--text:#dfe6e1}}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{color:var(--text);background:radial-gradient(ellipse at 50% 0%, var(--felt) 0%, var(--felt-edge) 100%);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{height:100dvh;padding:var(--pad);padding-top:max(var(--pad), env(safe-area-inset-top));padding-bottom:max(var(--pad), env(safe-area-inset-bottom));gap:var(--gap);flex-direction:column;display:flex}.toolbar{min-height:var(--toolbar-h);align-items:center;gap:calc(var(--gap) * .5) var(--gap);padding:calc(var(--gap) * .4) calc(var(--gap) * .5);background:var(--toolbar-bg);border-radius:calc(var(--radius) * 1.4);flex-wrap:wrap;flex:none;display:flex}.toolbar__stats{gap:calc(var(--gap) * 1.5);font-variant-numeric:tabular-nums;opacity:.9;font-size:clamp(12px,1.5dvh,15px);display:flex}.toolbar__stat b{font-weight:600}.toolbar__spacer{flex:1}.btn{appearance:none;color:var(--text);background:var(--btn-bg);border-radius:calc(var(--radius) * 1.2);cursor:pointer;border:none;min-width:44px;min-height:38px;padding:0 clamp(9px,1.4vw,16px);font-size:clamp(12px,1.6dvh,15px);font-weight:550;transition:background .15s,opacity .15s}.btn:active:not(:disabled){background:var(--btn-bg-active)}.btn:disabled{opacity:.35;cursor:default}.btn--accent{color:#2a1e00;background:#ffd666e6}.board{gap:var(--gap);flex-direction:column;flex:1;align-items:center;min-height:0;display:flex}.board>.row{width:100%}.row{grid-template-columns:repeat(7, var(--card-w));gap:var(--gap);justify-content:center;display:grid}.row--top{flex:none}.row--tableau{scrollbar-width:none;flex:1;align-items:start;min-height:0;overflow:hidden auto}.row--tableau::-webkit-scrollbar{display:none}.pile{width:var(--card-w);height:var(--card-h);position:relative}.pile--tableau{height:auto;min-height:calc(var(--card-h) + var(--fan-up) * 4)}.slot{height:var(--card-h);border:2px dashed var(--slot-line);border-radius:var(--radius);background:var(--slot);font-size:calc(var(--card-w) * .42);color:#ffffff52;place-items:center;display:grid;position:absolute;inset:0}.pile--gap .slot{font-size:calc(var(--card-w) * .46)}.card{width:var(--card-w);height:var(--card-h);border-radius:var(--radius);box-shadow:var(--shadow);will-change:transform;position:absolute;left:0}.card__face,.card__back{border-radius:var(--radius);position:absolute;inset:0}.card__face{background:var(--card-face);border:1px solid var(--card-edge);padding:calc(var(--card-w) * .06);flex-direction:column;display:flex}.card__back{background:repeating-linear-gradient(45deg, var(--card-back) 0 calc(var(--card-w) * .07), var(--card-back-alt) calc(var(--card-w) * .07) calc(var(--card-w) * .14));box-shadow:inset 0 0 0 calc(var(--card-w) * .045) #ffffff29;border:1px solid #00000059}.card--red .card__face{color:var(--red)}.card--black .card__face{color:var(--black)}.card__corner{align-items:baseline;gap:calc(var(--card-w) * .03);font-weight:650;line-height:1;font-size:calc(var(--card-w) * .29);font-variant-numeric:tabular-nums;display:flex}.card__corner span{font-size:calc(var(--card-w) * .25)}.card__pip{font-size:calc(var(--card-w) * .5);flex:1;place-items:center;line-height:1;display:grid}.drag-layer{z-index:500;pointer-events:none;position:fixed;inset:0}.card--dragging{box-shadow:var(--lift);transition:none}.card--hint{outline-offset:-1px;outline:3px solid #ffdc78e6}.pile--target .slot,.pile--target .card:last-child{outline-offset:-1px;border-radius:var(--radius);outline:3px solid #ffdc78bf}.stock-recycle{font-size:calc(var(--card-w) * .4)}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:900;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay__card{text-align:center;background:#141e18f2;border-radius:18px;max-width:min(88vw,420px);padding:clamp(20px,4vw,38px);box-shadow:0 20px 60px #00000080}.overlay__card h2{margin:0 0 8px;font-size:clamp(22px,3.4dvh,32px)}.overlay__card p{opacity:.85;margin:0 0 18px;font-size:clamp(13px,1.9dvh,16px)}.overlay__actions{justify-content:center;gap:10px;display:flex}.confetti{width:var(--card-w);height:var(--card-h);border-radius:var(--radius);z-index:850;pointer-events:none;position:fixed}@media (prefers-reduced-motion:reduce){.card,.confetti{transition:none!important;animation:none!important}}