.spider-suit-picker{border:1px solid var(--room-seam,#ffffff1f);border-radius:var(--room-radius-group,13px);background:#00000014;align-items:center;min-height:40px;padding:3px;display:inline-flex}.spider-suit-picker button{min-width:3.5rem;min-height:44px;color:var(--room-ink-muted,var(--color-text-muted));font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:.25rem .55rem;font-size:.75rem;font-weight:650}.spider-suit-picker button.is-active{color:var(--room-ink,var(--color-text));background:#ffffff1f;box-shadow:0 1px 3px #0000002e}.spider-suit-label-compact{display:none}@media (width<=1120px){.spider-suit-picker button{min-width:2.75rem}.spider-suit-label-full{display:none}.spider-suit-label-compact{display:inline}}@media (width<=799px){.spider-game-shell .spider-suit-picker button{min-height:44px}}@media (width<=700px){.spider-game-shell .spider-suit-picker button{min-width:2.8rem}}@media (prefers-reduced-motion:reduce){.spider-suit-picker button{transition:none}}.spider-board{--spider-gap:clamp(.12rem, .45vw, .42rem);--spider-width-cap:min(3.4rem, calc((100cqi - 9 * var(--spider-gap)) / 10 / var(--card-scale-user,1.2)));--card-width:var(--spider-width-cap);--card-height:calc(var(--card-width) * 1.4);--card-scale:var(--card-scale-user,1.2);--card-w:calc(var(--card-width) * var(--card-scale));--card-h:calc(var(--card-height) * var(--card-scale));--spider-fan-down:clamp(.22rem, 1.1vh, .65rem);--spider-fan-up:clamp(.82rem, 3.1vh, 1.75rem);width:100%;height:100%;min-height:0;padding:clamp(.25rem, .8vh, .6rem) var(--spider-gap) .5rem;overscroll-behavior:contain;scrollbar-gutter:stable;direction:ltr;grid-template-rows:auto minmax(0,1fr);align-content:start;gap:clamp(.3rem,.9vh,.65rem);display:grid;overflow:auto;container-type:inline-size}@media (width>=721px){.spider-board{--spider-gap:clamp(.18rem, .4vw, .3rem);--spider-width-cap:min(4.1rem, calc((100cqi - 9 * var(--spider-gap)) / 10 / var(--card-scale-user,1.2)))}}@media (width>=1025px){.spider-board{--spider-gap:clamp(.22rem, .4vw, .35rem);--spider-width-cap:min(5.15rem, calc((100cqi - 9 * var(--spider-gap)) / 10 / var(--card-scale-user,1.2)))}}@media (width>=1401px){.spider-board{--spider-gap:clamp(.25rem, .4vw, .4rem);--spider-width-cap:min(5.95rem, calc((100cqi - 9 * var(--spider-gap)) / 10 / var(--card-scale-user,1.2)))}}.spider-top-row,.spider-tableau{grid-template-columns:repeat(10, var(--card-w));gap:var(--spider-gap);justify-content:center;align-items:start;min-width:0;display:grid}.spider-top-row{min-height:var(--card-h)}.spider-stock{width:var(--card-w);height:var(--card-h);color:inherit;cursor:pointer;border-radius:var(--radius-card);transition:transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);background:0 0;border:0;grid-column:1;padding:0;position:relative}.spider-stock .card{position:absolute;inset:0}.spider-stock:not(:disabled):hover{filter:brightness(1.04);transform:translateY(-2px)}.spider-stock:disabled{cursor:default;opacity:.65}.spider-stock-count{z-index:4;color:#151515;background:var(--color-accent);border:2px solid var(--color-surface);border-radius:999px;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;font-size:.7rem;font-weight:800;line-height:1;display:inline-grid;position:absolute;bottom:-.25rem;right:-.25rem}.spider-empty-stock{border:1px dashed color-mix(in srgb, var(--color-text-muted) 55%, transparent);border-radius:var(--radius-card);color:var(--color-text-muted);opacity:.7;place-items:center;font-size:clamp(.65rem,1.4vw,.9rem);display:grid;position:absolute;inset:0}.spider-foundations{grid-column:3/11;grid-template-columns:repeat(8, var(--card-w));gap:var(--spider-gap);display:grid}.spider-foundation-slot{width:var(--card-w);height:var(--card-h);position:relative}.spider-foundation-slot .spider-foundation-empty{width:var(--card-w);height:var(--card-h);opacity:.55}.spider-foundation-slot .card{animation:.36s cubic-bezier(.33,1,.68,1) both spider-run-complete;position:absolute;inset:0}.spider-tableau{align-items:start;padding-bottom:1rem}.spider-tableau-pile{width:var(--card-w);min-height:var(--card-h);transition:height var(--duration-fast) var(--ease-out);position:relative}.spider-tableau-pile>.empty-pile{width:var(--card-w);height:var(--card-h)}.spider-tableau .card{touch-action:pan-y}.spider-card-drag-source{opacity:0!important}.spider-dealt-card{animation:spider-card-deal .18s var(--ease-out) both}.spider-stock-hint{animation:spider-stock-pulse .9s var(--ease-out)}@keyframes spider-stock-pulse{0%,to{transform:scale(1);box-shadow:0 0 #0000}40%{box-shadow:0 0 1.25rem color-mix(in srgb, var(--color-accent) 50%, transparent);transform:scale(1.05)}}@keyframes spider-run-complete{0%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}@keyframes spider-card-deal{0%{opacity:.25;transform:translateY(-1.25rem)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=720px){.spider-board{--spider-gap:clamp(.06rem, .35vw, .18rem);--spider-width-cap:calc((100cqi - 9 * var(--spider-gap)) / 10);--card-scale:1;--spider-fan-down:clamp(.18rem, .8vh, .4rem);--spider-fan-up:clamp(.68rem, 2.4vh, 1.05rem);--radius-card:.25rem;scrollbar-gutter:auto;padding-top:.35rem}.spider-stock-count{border-width:1px;min-width:1rem;height:1rem;font-size:.58rem;bottom:-.12rem;right:-.12rem}}@media (height<=600px) and (orientation:landscape){.spider-board{--card-scale:min(var(--card-scale-user,1.2), 1);--card-height:min(calc((100dvh - var(--header-height,3.25rem) - var(--dock-height,3.5rem) - 2rem) / 3.6), calc((100dvw - 1.5rem) / 10 / .714));--card-width:calc(var(--card-height) / 1.4);--spider-fan-up:clamp(.55rem, 2.7vh, .9rem);--spider-fan-down:clamp(.16rem, 1.1vh, .34rem)}}@media (prefers-reduced-motion:reduce){.spider-stock,.spider-tableau-pile,.spider-foundation-slot .card,.spider-dealt-card,.spider-stock-hint{transition:none!important;animation:none!important}}html[data-reduced-motion=true] .spider-stock,html[data-reduced-motion=true] .spider-tableau-pile,html[data-reduced-motion=true] .spider-foundation-slot .card,html[data-reduced-motion=true] .spider-dealt-card,html[data-reduced-motion=true] .spider-stock-hint{transition:none!important;animation:none!important}
