.spider-board{width:100%;max-width:calc(10 * var(--card-w) + 9 * var(--card-gap));margin:0 auto;position:relative}.sp-top-row{display:flex;align-items:center;margin-bottom:var(--card-gap);gap:var(--space-3)}.sp-stock{width:var(--card-w);height:var(--card-h);border-radius:var(--card-radius);position:relative;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--color-card-back1),var(--color-card-back1) 4px,var(--color-card-back2) 4px,var(--color-card-back2) 8px);border:2px solid var(--color-border-mid);box-shadow:var(--shadow-sm)}.sp-stock:hover{box-shadow:var(--shadow-md)}.sp-stock.empty{background:var(--color-surface);border-style:dashed;cursor:default}.sp-stock.empty:hover{box-shadow:var(--shadow-sm)}.sp-stock-count{background:var(--color-navy);color:var(--color-btn-text);font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:10px;position:absolute;bottom:-6px;right:-6px;min-width:20px;text-align:center}.sp-stock.empty .sp-stock-count{display:none}.sp-spacer{flex:1}.sp-completed-indicator{font-size:calc(var(--card-h) * .35);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-1);user-select:none}.sp-completed-indicator .completed-suit{opacity:.25;transition:opacity .3s}.sp-completed-indicator .completed-suit.done{opacity:1;color:var(--color-amber)}.sp-tableau{display:grid;grid-template-columns:repeat(10,var(--card-w));gap:var(--card-gap)}.sp-col{position:relative;min-height:var(--card-h);border-radius:var(--card-radius);border:2px dashed transparent;transition:border-color .1s}.sp-col:empty{border-color:var(--color-border-mid)}.sp-col>.card{position:absolute;left:0;cursor:pointer}.sp-diff-toggle{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.sp-diff-toggle .btn-toggle{border-radius:0;border:none;background:var(--color-surface);color:var(--color-text-muted)}.sp-diff-toggle .btn-toggle.active{background:var(--color-navy);color:var(--color-btn-text)}.sp-diff-toggle .btn-toggle:not(.active):hover{background:var(--color-border);color:var(--color-text)}.sp-deal-blocked{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:var(--color-navy);color:var(--color-btn-text);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:.85rem;z-index:100;box-shadow:var(--shadow-lg);animation:sp-toast-in .2s ease-out}#spider-titlebar{max-width:calc(10 * var(--card-w) + 9 * var(--card-gap))}.spider-board~.instructions{max-width:calc(10 * var(--card-w) + 9 * var(--card-gap))}.sp-stat-list{display:grid;gap:var(--space-2);margin:0;padding:0}.sp-stat-list>div{display:flex;justify-content:space-between;gap:var(--space-4)}.sp-stat-list dt{color:var(--color-text-muted);font-size:.85rem}.sp-stat-list dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.sp-stats-actions{margin-top:var(--space-3);text-align:center}.spider-board .card.face-up:hover{box-shadow:0 0 0 1px var(--color-navy),var(--shadow-md)}@media(max-width:1023px){.sp-tableau{gap:calc(var(--card-gap) * .8)}}@media(max-width:767px){.spider-board{--card-w: 33px;--card-h: 46px;--card-radius: 3px;--card-gap: 3px}.spider-board .card .card-tl,.spider-board .card .card-br{font-size:.45rem}.spider-board .card .card-center{font-size:.6rem}.sp-diff-toggle .btn-toggle{font-size:.6rem;padding:2px 4px}.sp-game-number{font-size:.65rem}}.sp-game-number{font-size:.8rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;background:none;border:1px dashed transparent;border-radius:var(--radius-sm);padding:2px 6px;cursor:pointer;transition:border-color .15s,color .15s}.sp-game-number:hover{border-color:var(--color-border-mid);color:var(--color-text)}.sp-toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:var(--color-navy);color:var(--color-btn-text);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:.85rem;z-index:100;box-shadow:var(--shadow-lg);animation:sp-toast-in .2s ease-out}.sp-toast.error{background:var(--color-red, #c0392b)}@keyframes sp-toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}