klondike-solitaire{--sol-felt:#0b6b3a;--sol-felt-hi:#148a4d;--sol-slot:#fff6;--sol-face:#fcfcf7;--sol-ink:#111827;--sol-red:#b4161b;--sol-edge:#1c2433;--sol-back-a:#1f3f8f;--sol-back-b:#2a52b0;--sol-back-c:#ffffff29;--sol-back-mark:#ffb547;--sol-shadow:#00000059;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:block;container-type:inline-size}:root[data-theme=dark] klondike-solitaire{--sol-felt:#0a3d2e;--sol-felt-hi:#11553f;--sol-slot:#ffffff4d;--sol-face:#f3f4ee;--sol-red:#b01419;--sol-edge:#02050b;--sol-back-a:#1b2f6e;--sol-back-b:#25408f}klondike-solitaire .sol-bar{white-space:nowrap;align-items:center;gap:4px;margin-bottom:6px;display:flex}klondike-solitaire .sol-bar button{min-width:0;padding:0 10px}klondike-solitaire .sol-draw{align-items:center;gap:4px;display:inline-flex}@media (pointer:coarse){klondike-solitaire .sol-bar button,klondike-solitaire .sol-bar select{min-height:var(--touch)}}klondike-solitaire .sol-felt{--gap:clamp(3px, 1.5cqi, 12px);--pad:clamp(4px, 2cqi, 14px);--cw:clamp(40px, min(12.5vw, (100cqi - 2 * var(--pad) - 6 * var(--gap)) / 7), 72px);--ch:calc(var(--cw) * 1.4);--od:calc(var(--cw) * .12);--ou:calc(var(--cw) * .3);--ox:calc(var(--cw) * .26);--r:calc(var(--cw) * .07);padding:var(--pad);background:radial-gradient(120% 90% at 50% 20%, var(--sol-felt-hi), var(--sol-felt) 70%);box-shadow:inset 1px 1px var(--button-shadow), inset -1px -1px var(--button-highlight);position:relative;overflow:hidden}klondike-solitaire .sol-top,klondike-solitaire .sol-tab{grid-template-columns:repeat(7, var(--cw));gap:var(--gap);justify-content:center;display:grid}klondike-solitaire .sol-tab{margin-top:calc(var(--gap) * 2);min-height:calc(var(--ch) + 6 * var(--od) + 7 * var(--ou))}klondike-solitaire .sol-felt .sol-pile.sol-pile,klondike-solitaire .sol-felt .sol-pile.sol-pile:active{width:var(--cw);height:var(--ch);border-radius:var(--r);min-width:0;min-height:0;box-shadow:none;text-shadow:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;display:block;position:relative}klondike-solitaire .sol-felt .sol-tab .sol-pile.sol-pile{height:auto;min-height:var(--ch)}klondike-solitaire .sol-pile:focus:not(:focus-visible){outline:none}klondike-solitaire .sol-pile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}klondike-solitaire .sol-pile:before{content:"";width:var(--cw);height:var(--ch);box-sizing:border-box;border:1px solid var(--sol-slot);border-radius:var(--r);position:absolute;top:0;left:0}klondike-solitaire .sol-found:after,klondike-solitaire [data-pile=stock]:after{content:"A";width:var(--cw);line-height:var(--ch);text-align:center;color:var(--sol-slot);font:bold calc(var(--cw) * .4) / var(--ch) var(--font-doc);position:absolute;top:0;left:0}klondike-solitaire [data-pile=stock]:after{content:"↻"}klondike-solitaire .sol-card{z-index:1;left:calc(var(--x,0) * var(--ox));top:calc(var(--d,0) * var(--od) + var(--u,0) * var(--ou));width:var(--cw);height:var(--ch);box-sizing:border-box;border:1px solid var(--sol-edge);border-radius:var(--r);background:var(--sol-face);color:var(--sol-ink);font-family:var(--font-doc);box-shadow:0 1px 1px var(--sol-shadow);touch-action:none;font-weight:700;line-height:1;position:absolute}klondike-solitaire .sol-red{color:var(--sol-red)}klondike-solitaire .sol-i{font-size:calc(var(--cw) * .25);letter-spacing:-.04em;white-space:nowrap;position:absolute;top:4%;left:6%}klondike-solitaire .sol-i2{inset:auto 6% 4% auto;transform:rotate(180deg)}klondike-solitaire .sol-pip{font-size:calc(var(--cw) * .5);place-items:center;display:grid;position:absolute;inset:22% 0 10%}klondike-solitaire .sol-court{font-size:calc(var(--cw) * .38);border:1px solid;border-radius:2px;inset:26% 18% 16%}@container (width<=420px){klondike-solitaire .sol-i2{display:none}}klondike-solitaire .sol-card.sol-down{background:repeating-conic-gradient(var(--sol-back-c) 0 25%, transparent 0 50%) 0 0 / 8px 8px, repeating-conic-gradient(var(--sol-back-a) 0 25%, var(--sol-back-b) 0 50%) 0 0 / 2px 2px;box-shadow:inset 0 0 0 2px var(--sol-face), 0 1px 1px var(--sol-shadow)}klondike-solitaire .sol-down>*{display:none}klondike-solitaire .sol-down:after{content:"J";color:var(--sol-back-mark);font:11px/1 var(--font-chrome);position:absolute;bottom:6%;right:12%}klondike-solitaire .sol-sel,klondike-solitaire .sol-drop>.sol-card:last-child,klondike-solitaire .sol-drop:empty:before{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 2px var(--sol-face)}klondike-solitaire .sol-cur{outline:2px dashed var(--accent);outline-offset:1px}klondike-solitaire .sol-lift{visibility:hidden}klondike-solitaire .sol-ghost{z-index:50;pointer-events:none;will-change:transform;position:absolute;top:0;left:0}klondike-solitaire .sol-ghost .sol-card{box-shadow:2px 4px 6px var(--sol-shadow)}klondike-solitaire .sol-canvas{z-index:60;cursor:pointer;position:absolute;inset:0}klondike-solitaire .sol-dialog{max-width:min(320px,100vw - 32px);padding:0}klondike-solitaire .sol-dialog .title-bar-text{font-size:inherit;margin:0}klondike-solitaire .sol-dialog p{font:var(--step-0) / 1.5 var(--font-doc);margin:8px 4px 16px}klondike-solitaire .sol-dlg-btns{justify-content:flex-end;gap:6px;display:flex}@media (pointer:coarse){klondike-solitaire .sol-dlg-btns button{min-height:var(--touch)}}