.board{width:100%;max-width:none;padding:var(--board-pad);grid-template-columns:repeat(7, var(--card-w));place-content:start center;column-gap:var(--gap-x);row-gap:var(--row-gap);--card-h-budget:4.4;--card-w:min(var(--card-w-max), max(var(--card-w-min), min(calc(100cqi / var(--card-w-divisor)), calc(100cqh * var(--card-aspect) / var(--card-h-budget)))));box-sizing:border-box;touch-action:pan-y;-webkit-overflow-scrolling:touch;grid-template-areas:"stock waste gap foundation-0 foundation-1 foundation-2 foundation-3""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6";min-height:100%;margin-inline:auto;display:grid}.board[data-variant=freecell]{grid-template-columns:repeat(8, var(--card-w));grid-template-areas:"cell-0 cell-1 cell-2 cell-3 foundation-0 foundation-1 foundation-2 foundation-3""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6 tableau-7"}.board[data-variant=yukon]{grid-template-columns:repeat(7, var(--card-w));grid-template-areas:"foundation-0 foundation-1 foundation-2 foundation-3. . .""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6"}.board[data-variant=golf]{grid-template-columns:repeat(7, var(--card-w));grid-template-areas:"stock waste gap. . . .""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6"}.board[data-variant=spider]{grid-template-columns:repeat(10, var(--card-w));grid-template-areas:"foundation-0 foundation-1 foundation-2 foundation-3 foundation-4 foundation-5 foundation-6 foundation-7 gap stock""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6 tableau-7 tableau-8 tableau-9"}.board__pile{width:var(--card-w);min-height:var(--card-h);position:relative}.board__pile--gap{pointer-events:none;grid-area:gap}.board__pile--stock{grid-area:stock}.board__pile--waste{grid-area:waste}.board__pile--foundation-0{grid-area:foundation-0}.board__pile--foundation-1{grid-area:foundation-1}.board__pile--foundation-2{grid-area:foundation-2}.board__pile--foundation-3{grid-area:foundation-3}.board__pile--foundation-4{grid-area:foundation-4}.board__pile--foundation-5{grid-area:foundation-5}.board__pile--foundation-6{grid-area:foundation-6}.board__pile--foundation-7{grid-area:foundation-7}.board__pile--cell-0{grid-area:cell-0}.board__pile--cell-1{grid-area:cell-1}.board__pile--cell-2{grid-area:cell-2}.board__pile--cell-3{grid-area:cell-3}.board__pile--tableau-0{grid-area:tableau-0}.board__pile--tableau-1{grid-area:tableau-1}.board__pile--tableau-2{grid-area:tableau-2}.board__pile--tableau-3{grid-area:tableau-3}.board__pile--tableau-4{grid-area:tableau-4}.board__pile--tableau-5{grid-area:tableau-5}.board__pile--tableau-6{grid-area:tableau-6}.board__pile--tableau-7{grid-area:tableau-7}.board__pile--tableau-8{grid-area:tableau-8}.board__pile--tableau-9{grid-area:tableau-9}.card-view{width:var(--card-w);height:var(--card-h);border-radius:var(--card-radius);border:1px solid var(--card-border);box-shadow:var(--elev-card-resting);background:var(--card-face);-webkit-user-select:none;user-select:none;touch-action:none;font-family:Tahoma,Verdana,sans-serif;display:block;position:absolute;top:0;left:0;overflow:hidden}.card-view__inner,.card-view__inner svg{pointer-events:none;width:100%;height:100%;display:block}.classic-face{background:var(--card-face);position:absolute;inset:0}.classic-face__corner{font-weight:700;font-size:clamp(11px, calc(var(--card-w) * .2), 15px);text-align:center;line-height:.85;position:absolute}.classic-face__corner--tl{top:3px;left:5px}.classic-face__corner--br{bottom:3px;right:5px;transform:rotate(180deg)}.classic-face__center{font-size:clamp(22px, calc(var(--card-w) * .45), 34px);place-items:center;display:grid;position:absolute;inset:0}.classic-back{border:3px solid var(--card-back-edge);border-radius:inherit;background-color:var(--card-back-base);background-image:var(--card-back-image);background-size:var(--card-back-size,auto);position:absolute;inset:0}@media (pointer:coarse){.card-view:before,.board__pile[role=button]:before{content:"";inset:max(-8px, calc((44px - var(--card-h)) / 2)) max(-4px, calc((40px - var(--card-w)) / 2));z-index:-1;position:absolute}.card-view--selected{outline-offset:1px;outline-width:3px}}.card-view--hint{animation:.55s ease-in-out infinite hintpulse;z-index:calc(var(--z-card-base) + 50)!important}.card-view__inner--four-color .card-face-art,html[data-four-color=true] .card-view__inner:not(.card-view__inner--four-color) .card-face-art{filter:none}.card-view--selected{outline:2px solid var(--accent);outline-offset:2px}.card-view--drag-source{opacity:0}.card-view--shake{animation:.32s ease-in-out card-invalid-shake}@keyframes card-invalid-shake{0%,to{transform:translate(0)}20%{transform:translateX(calc(-1 * var(--invalid-shake-px,6px)))}40%{transform:translateX(var(--invalid-shake-px,6px))}60%{transform:translateX(calc(-1 * var(--invalid-shake-px,6px)))}80%{transform:translateX(var(--invalid-shake-px,6px))}}.card-view--focused,.card-view:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card-view--dragging{box-shadow:var(--elev-card-dragging)}.board__pile--drop-valid{outline:2px solid var(--highlight-valid);outline-offset:2px;box-shadow:0 0 18px color-mix(in srgb, var(--highlight-valid) 55%, transparent);transition:transform var(--dur-hover-lift) var(--ease-standard);transform:scale(1.03)}.board--dealing .card-view--deal-hidden{visibility:hidden}.card-view--invalid-flash{box-shadow:0 0 0 2px var(--highlight-invalid)}.card-view--foundation-sparkle{animation:foundation-sparkle .6s var(--ease-decel)}@keyframes hint-pulse{0%,to{outline-color:#0000}50%{outline-color:var(--hint-pulse)}}@keyframes foundation-sparkle{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--highlight-valid) 70%, transparent)}to{box-shadow:0 0 0 14px #0000}}.autocomplete-bar{justify-content:center;padding:.5rem 0 .75rem;display:flex}.reduced-win-overlay{background:color-mix(in srgb, var(--baize-edge) 72%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.reduced-win-overlay__panel{min-height:100%;color:var(--ui-text);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.reduced-win-overlay__icon{background:var(--accent);width:4rem;height:4rem;color:var(--accent-text);border-radius:999px;justify-content:center;align-items:center;display:flex}.reduced-win-overlay__title{font-family:var(--font-ui);font-size:var(--text-title);font-weight:700}.reduced-win-overlay__stats,.reduced-win-overlay__hint{font-family:var(--font-ui);color:var(--ui-text-muted)}.card-view__flip{perspective:800px;pointer-events:none}.card-view__face{pointer-events:none;width:100%;height:100%}.board__pile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pile-placeholder__suit-ghost{font-size:clamp(22px, calc(var(--card-w) * .45), 34px);place-items:center;line-height:1;display:grid}.pile-placeholder__suit-ghost svg{width:1em;height:1em;display:block}.pile-placeholder{z-index:var(--z-pile-placeholder);border-radius:var(--card-radius);background:var(--placeholder-fill);border:1px dashed var(--placeholder-stroke);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000047}.pile-placeholder--hint{outline:2px solid var(--hint-pulse);outline-offset:2px}.pile-placeholder__recycle{width:calc(var(--card-w) * .36);height:calc(var(--card-w) * .36);color:var(--placeholder-stroke)}.board--left-handed{grid-template-areas:"foundation-0 foundation-1 foundation-2 foundation-3 gap waste stock""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6"}.board--left-handed[data-variant=freecell]{grid-template-areas:"foundation-0 foundation-1 foundation-2 foundation-3 cell-0 cell-1 cell-2 cell-3""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6 tableau-7"}.board--left-handed[data-variant=yukon]{grid-template-areas:". . .foundation-0 foundation-1 foundation-2 foundation-3""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6"}.board--left-handed[data-variant=golf]{grid-template-areas:". . . .gap waste stock""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6"}.board--left-handed[data-variant=spider]{grid-template-areas:"foundation-0 foundation-1 foundation-2 foundation-3 foundation-4 foundation-5 foundation-6 foundation-7 gap stock""tableau-0 tableau-1 tableau-2 tableau-3 tableau-4 tableau-5 tableau-6 tableau-7 tableau-8 tableau-9"}.board--left-handed .board__pile--gap{grid-area:gap}.board--left-handed .board__pile--stock{grid-area:stock}.board--left-handed .board__pile--waste{grid-area:waste}@supports not (width:1cqi){.board{--card-w:min(var(--card-w-max), max(var(--card-w-min), min(calc(100vw / var(--card-w-divisor)), calc(100vh * var(--card-aspect) / var(--card-h-budget)))))}}.board--slots,.board[data-variant=pyramid],.board[data-variant=tripeaks]{justify-content:flex-start;align-items:center;gap:calc(var(--card-h) * .06);--slot-cols:7;--slot-gap-ratio:.06;--card-h-budget:4.2;--board-pad:max(4px, calc(var(--card-w) * .06));--card-w:min(72px, max(28px, min(calc((100cqi - 2 * 6px) / (var(--slot-cols) + (var(--slot-cols) - 1) * var(--slot-gap-ratio))), calc(100cqh * var(--card-aspect) / var(--card-h-budget)))));flex-direction:column;grid-template-columns:none;grid-template-areas:none;display:flex}.board[data-variant=tripeaks]{--slot-cols:10;--slot-gap-ratio:.04}.board[data-variant=pyramid]{--slot-cols:7;--slot-gap-ratio:.08}.board__slot-toolbar{justify-content:center;align-items:flex-start;gap:calc(var(--card-w) * .18);width:100%;margin-bottom:calc(var(--card-h) * .04);flex-wrap:nowrap;flex-shrink:0;display:flex}.board__slot-toolbar .board__pile{width:var(--card-w);min-height:var(--card-h);flex:none;position:relative}.board__slot-field{align-items:center;gap:calc(var(--card-h) * -.44);flex-direction:column;width:100%;min-width:0;max-width:100%;display:flex;overflow:visible}.board__slot-row{justify-content:center;align-items:flex-start;gap:calc(var(--card-w) * var(--slot-gap-ratio));z-index:1;box-sizing:border-box;width:100%;min-width:0;max-width:100%;display:flex;position:relative}.board__slot-row .board__pile--slot{width:var(--card-w);min-height:var(--card-h);flex:0 0 var(--card-w);max-width:var(--card-w);position:relative}.board__pile--slot-covered{filter:brightness(.92)}.board__pile--slot-covered .card-view{pointer-events:none}@media (max-width:900px){.board--slots,.board[data-variant=pyramid],.board[data-variant=tripeaks]{--board-pad:4px;--card-h-budget:4;--card-w:min(52px, max(22px, min(calc((100cqi - 8px) / (var(--slot-cols) + (var(--slot-cols) - 1) * var(--slot-gap-ratio))), calc(100cqh * var(--card-aspect) / var(--card-h-budget)))));gap:4px;padding-block:6px;padding-inline:4px}.board[data-variant=tripeaks]{--slot-gap-ratio:.03;--card-h-budget:3.6}.board[data-variant=pyramid]{--card-h-budget:4.1}.board__slot-field{gap:calc(var(--card-h) * -.48)}.board[data-variant=tripeaks] .board__slot-field{gap:calc(var(--card-h) * -.52)}.board__slot-toolbar{gap:calc(var(--card-w) * .14);margin-bottom:2px}}@media (max-width:420px){.board[data-variant=tripeaks]{--slot-gap-ratio:.02}.board[data-variant=tripeaks] .board__slot-field{gap:calc(var(--card-h) * -.55)}}@supports not (width:1cqi){.board--slots,.board[data-variant=pyramid],.board[data-variant=tripeaks]{--card-w:min(72px, max(22px, min(calc((100vw - 24px) / (var(--slot-cols) + (var(--slot-cols) - 1) * var(--slot-gap-ratio))), calc(100vh * var(--card-aspect) / var(--card-h-budget)))))}}@media (orientation:landscape) and (max-height:560px){.board{--card-h-budget:3.6}.board--slots,.board[data-variant=pyramid],.board[data-variant=tripeaks]{--card-h-budget:3.5;gap:2px;padding-block:2px}.board[data-variant=tripeaks]{--card-h-budget:3.2}.board__slot-field{gap:calc(var(--card-h) * -.56)}.board[data-variant=tripeaks] .board__slot-field{gap:calc(var(--card-h) * -.58)}.board__slot-toolbar{margin-bottom:0}}
