.g-spider-solitaire{--cw:32px;--ch:45px;--fs:11px;--gap:2px;--card-face:#fbfaf6;--card-ink:#1d2320;--card-red:#c0392b;padding:4px;border-radius:8px;background:var(--accent-soft);outline-offset:2px;touch-action:manipulation}.g-spider-solitaire .sp-top,.g-spider-solitaire .sp-cols{display:grid;grid-template-columns:repeat(10,var(--cw));gap:var(--gap);justify-content:center}.g-spider-solitaire .sp-top{margin-bottom:calc(var(--gap) * 3 + 4px)}.g-spider-solitaire .sp-col{position:relative;min-height:var(--ch)}.g-spider-solitaire .sp-col::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--ch);border:1px dashed var(--line);border-radius:calc(var(--cw) * .1);pointer-events:none}.g-spider-solitaire .sp-col.is-drop-ok::before{border:2px solid var(--accent);background:rgba(255,255,255,.18)}.g-spider-solitaire .sp-col.is-hint-to::before{border:3px solid var(--gold)}.g-spider-solitaire .sp-col.is-cursor-col::before{border:3px solid var(--focus)}.g-spider-solitaire .sp-card,.g-spider-solitaire .sp-found,.g-spider-solitaire .sp-stock{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .1);border:1px solid #8e9791;font-size:var(--fs);font-weight:700;line-height:1;color:var(--card-ink);background:var(--card-face);box-shadow:0 1px 1px rgba(0,0,0,.25)}.g-spider-solitaire .sp-card{position:absolute;left:0;overflow:hidden;touch-action:none;cursor:grab}.g-spider-solitaire .sp-card.red,.g-spider-solitaire .sp-found.red{color:var(--card-red)}.g-spider-solitaire .sp-ix{position:absolute;left:.18em;top:.16em;white-space:nowrap;letter-spacing:-.04em}.g-spider-solitaire .sp-ix i{font-style:normal;margin-left:.04em}.g-spider-solitaire .sp-mid{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:calc(var(--cw) * .62);line-height:1}.g-spider-solitaire .sp-card.down,.g-spider-solitaire .sp-stock:not(.is-empty){background:repeating-linear-gradient(45deg,#2c6b8c 0 3px,#245a76 3px 6px);border-color:#f3f1ea;border-width:2px;cursor:default}.g-spider-solitaire .sp-found{position:relative;background:0 0;border:1px dashed var(--line);box-shadow:none}.g-spider-solitaire .sp-found.is-full{background:var(--card-face);border:1px solid #8e9791;box-shadow:0 1px 1px rgba(0,0,0,.25)}.g-spider-solitaire .sp-stock{position:relative;padding:0;display:grid;place-items:center;cursor:pointer;font-family:inherit}.g-spider-solitaire .sp-stock.is-empty{background:0 0;border:1px dashed var(--line);box-shadow:none;cursor:default}.g-spider-solitaire .sp-stock__n{background:rgba(255,255,255,.92);color:#1d2320;border-radius:999px;min-width:1.5em;padding:.15em .3em;font-size:var(--fs)}.g-spider-solitaire .sp-stock:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.g-spider-solitaire .sp-card.is-lifted{visibility:hidden}.g-spider-solitaire .sp-drag{position:absolute;left:0;top:0;width:0;height:0;z-index:30;pointer-events:none;will-change:transform}.g-spider-solitaire .sp-drag .sp-card{box-shadow:0 4px 10px rgba(0,0,0,.4);cursor:grabbing}.g-spider-solitaire .sp-card.is-hint{box-shadow:0 0 0 3px var(--gold),0 1px 1px rgba(0,0,0,.25);z-index:2}.g-spider-solitaire .sp-card.is-hint-to{box-shadow:0 0 0 3px var(--gold);z-index:2}.g-spider-solitaire .sp-card.is-cursor{outline:3px solid var(--focus);outline-offset:-1px;z-index:3}.g-spider-solitaire .sp-card.is-cursor-run{box-shadow:0 0 0 2px var(--focus)}.g-spider-solitaire .is-shake{animation:sp-shake .35s}.g-spider-solitaire .is-flash{animation:sp-flash .5s 2}@keyframes sp-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}@keyframes sp-flash{50%{box-shadow:0 0 0 3px var(--danger)}}