.spider-game{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0;user-select:none;-webkit-user-select:none}.spider-game__toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.game-stats{display:flex;gap:1.25rem}.game-stat{display:flex;flex-direction:column;align-items:center;gap:.125rem;min-width:52px}.game-stat__label{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--scg-text-muted)}.game-stat__value{font-size:1.125rem;font-weight:700;color:var(--scg-text-primary);font-variant-numeric:tabular-nums}.game-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.game-controls__difficulty{display:flex;background:var(--scg-surface);border:1px solid var(--scg-surface-border);border-radius:8px;overflow:hidden}.difficulty-btn{padding:.3rem .75rem;font-size:.75rem;font-weight:600;color:var(--scg-text-secondary);background:none;border:none;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}.difficulty-btn:hover{color:var(--scg-text-primary);background:var(--scg-surface-raised)}.difficulty-btn--active{color:var(--scg-accent);background:#3b82f61f}.game-controls__actions{display:flex;gap:.375rem}.control-btn{display:flex;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.75rem;font-weight:500;color:var(--scg-text-secondary);background:var(--scg-surface);border:1px solid var(--scg-surface-border);border-radius:6px;cursor:pointer;transition:color .15s,background .15s,border-color .15s;white-space:nowrap}.control-btn:hover:not(:disabled){color:var(--scg-text-primary);border-color:var(--scg-text-muted)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn span{display:none}@media(min-width:480px){.control-btn span{display:inline}}.game-board{position:relative;background:var(--scg-table-bg);background-image:var(--scg-table-texture);border-radius:12px;padding:.75rem}.game-board__topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.game-board__tableau{display:flex;gap:6px}.game-board__pause-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0f1ebf;backdrop-filter:blur(4px);border-radius:12px;font-size:1.5rem;font-weight:700;color:var(--scg-text-primary);z-index:100}.column{flex:1;position:relative;min-height:120px;border-radius:8px;transition:background .15s}.column--valid-target{background:var(--scg-highlight);outline:1.5px dashed var(--scg-highlight-border);outline-offset:-1px}.column--empty .column__empty-indicator{width:100%;height:120px;border:1.5px dashed var(--scg-surface-border);border-radius:8px;opacity:.4}.card{position:absolute;width:100%;height:120px;border-radius:var(--scg-card-radius);box-shadow:var(--scg-card-shadow);transition:var(--scg-card-transition);overflow:hidden}.card--face{background:var(--scg-card-bg);border:1px solid var(--scg-card-border)}.card--face.card--red .card__corner,.card--face.card--red .card__center{color:var(--scg-suit-red)}.card--face:not(.card--red) .card__corner,.card--face:not(.card--red) .card__center{color:var(--scg-suit-black)}.card--back{background:var(--scg-surface-raised);border:1px solid var(--scg-surface-border)}.card--selected{outline:2px solid var(--scg-selected-border);outline-offset:-2px;transform:translateY(-4px);box-shadow:0 6px 20px #facc154d}.card--hinted{outline:2px solid var(--scg-accent);outline-offset:-2px;animation:hint-pulse .5s ease-in-out 2}@keyframes hint-pulse{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.card--dragging{opacity:0;pointer-events:none;transition:none}.drag-ghost{filter:drop-shadow(0 8px 32px rgba(0,0,0,.5));transform:rotate(1.5deg);transform-origin:top left}.card__back-pattern{width:100%;height:100%;background:var(--scg-card-back-url),linear-gradient(135deg,#1a3a5c,#0f2440);background-size:cover}.card__corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;gap:1px}.card__corner--tl{top:4px;left:5px}.card__corner--br{bottom:4px;right:5px;transform:rotate(180deg)}.card__rank{font-size:.75rem;font-weight:700;line-height:1}.card__suit{font-size:.6rem;line-height:1}.card__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.75rem;line-height:1;opacity:.15}.stock-pile-area{flex-shrink:0}.stock-pile{position:relative;width:60px;height:84px;border-radius:var(--scg-card-radius);background:var(--scg-surface-raised);border:1px solid var(--scg-surface-border);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;overflow:visible}.stock-pile:hover:not(:disabled){transform:scale(1.03);box-shadow:0 4px 16px #3b82f640}.stock-pile--empty{opacity:.4;cursor:not-allowed}.stock-pile--hinted{outline:2px solid var(--scg-accent);animation:hint-pulse .5s ease-in-out 2}.stock-pile__card-shadow{position:absolute;width:60px;height:84px;background:var(--scg-surface);border:1px solid var(--scg-surface-border);border-radius:var(--scg-card-radius)}.stock-pile__top-card{position:absolute;inset:0;border-radius:var(--scg-card-radius);overflow:hidden}.stock-pile__count{position:absolute;bottom:6px;right:6px;font-size:.65rem;font-weight:700;background:var(--scg-accent);color:#fff;border-radius:9999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;z-index:10}.stock-pile__empty-label{font-size:1.25rem;color:var(--scg-text-muted)}.completed-suits{display:flex;gap:4px}.completed-suit-slot{width:42px;height:58px;border-radius:6px;border:1px dashed var(--scg-surface-border);display:flex;align-items:center;justify-content:center;transition:background .2s}.completed-suit-slot--filled{background:var(--scg-success-glow);border-style:solid;border-color:var(--scg-success)}.completed-suit-symbol{font-size:1.5rem;line-height:1}.completed-suit-empty{font-size:1.125rem;color:var(--scg-surface-border);opacity:.5}.win-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.win-modal{background:var(--scg-surface);border:1px solid var(--scg-surface-border);border-radius:16px;padding:2rem;max-width:380px;width:90%;text-align:center;animation:slide-up .3s cubic-bezier(.22,1,.36,1)}@keyframes slide-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.win-modal__icon{color:#facc15;margin-bottom:.75rem;display:flex;justify-content:center}.win-modal__title{font-size:1.75rem;font-weight:800;color:var(--scg-text-primary);margin:0 0 .25rem}.win-modal__subtitle{font-size:.875rem;color:var(--scg-text-secondary);margin:0 0 1.25rem}.win-modal__stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.win-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--scg-text-secondary);font-size:.8125rem}.win-stat strong{font-size:1.25rem;font-weight:700;color:var(--scg-text-primary)}.win-stat--record{color:#facc15!important}.win-modal__record{font-size:.875rem;font-weight:600;color:#facc15;margin-bottom:1rem}.win-modal__actions{display:flex;gap:.75rem;justify-content:center}.btn{padding:.625rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;border:none;transition:background .15s,transform .1s}.btn:active{transform:scale(.97)}.btn--primary{background:var(--scg-accent);color:#fff}.btn--primary:hover{background:var(--scg-accent-hover)}.btn--secondary{background:var(--scg-surface-raised);color:var(--scg-text-primary);border:1px solid var(--scg-surface-border)}.btn--secondary:hover{border-color:var(--scg-text-muted)}@media(max-width:600px){.game-board__tableau{gap:3px}.game-board{padding:.5rem}.spider-game{padding:.5rem 0}.completed-suit-slot{width:32px;height:44px}.completed-suit-symbol{font-size:1.1rem}.stock-pile{width:48px;height:66px}.card{height:90px}.column{min-height:90px}}