.spider-game{flex:1;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:.375rem .75rem;min-height:44px}.game-stats{display:flex;align-items:baseline}.game-stat{display:flex;flex-direction:row;align-items:baseline;gap:.375rem}.game-stat:not(:first-child):before{content:"";width:3px;height:3px;border-radius:50%;background:var(--scg-text-muted);opacity:.6;align-self:center;margin:0 .75rem}.game-stat__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--scg-text-muted)}.game-stat__value{font-size:1rem;font-weight:600;color:var(--scg-text-primary);font-variant-numeric:tabular-nums}.game-stat__value--score{color:var(--scg-accent)}.game-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.game-controls__difficulty{display:flex;background:transparent;border:1px solid rgba(255,255,255,.08);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)}.difficulty-btn--active{color:var(--scg-text-primary);background:var(--scg-surface-raised)}.game-controls__actions{display:flex;gap:.25rem}.control-btn{display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:36px;padding:.35rem .6rem;font-size:.75rem;font-weight:500;color:var(--scg-text-secondary);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}.control-btn:hover:not(:disabled){color:var(--scg-text-primary);background:var(--scg-surface)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn span{display:none}@media(min-width:480px){.control-btn span{display:inline}}@media(max-width:479px){.control-btn{min-width:40px;min-height:40px;padding:.25rem}}.game-board{position:relative;flex:1;display:flex;flex-direction:column;background:var(--scg-table-bg);background-image:radial-gradient(ellipse 120% 90% at 50% 35%,transparent 55%,rgba(0,0,0,.22)),var(--scg-table-texture);padding:1rem .875rem 1.5rem}.game-board__topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.game-board__tableau{display:flex;gap:clamp(4px,.8vw,10px)}.game-board__pause-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a140ecc;backdrop-filter:blur(4px);font-size:1.5rem;font-weight:700;color:var(--scg-text-primary);z-index:100}.column{flex:1;position:relative;container-type:inline-size;--scg-stack-up: clamp(18px, 27cqw, 34px);--scg-stack-down: clamp(8px, 12cqw, 16px);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__spacer{width:100%;aspect-ratio:64 / 89;pointer-events:none}.column--empty .column__empty-indicator{width:100%;aspect-ratio:64 / 89;height:auto;border:1.5px dashed var(--scg-surface-border);border-radius:clamp(4px,9cqw,12px);opacity:.4}.card{position:absolute;width:100%;aspect-ratio:64 / 89;border-radius:clamp(4px,9cqw,12px);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 var(--scg-accent-glow)}.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);box-shadow:var(--scg-card-shadow)}50%{transform:translateY(-6px);box-shadow:0 6px 18px var(--scg-accent-glow)}}.card.card--face{cursor:grab}.card.card--face:active{cursor:grabbing}@media(prefers-reduced-motion:no-preference){.card--face:hover:not(.card--selected):not(.card--dragging){transform:translateY(-2px);box-shadow:0 2px 4px #00000059,0 6px 16px #0000004d}}.card--dragging{opacity:0;pointer-events:none;transition:none}.drag-ghost{container-type:inline-size;--scg-stack-up: clamp(18px, 27cqw, 34px);--scg-stack-down: clamp(8px, 12cqw, 16px);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,#1c4230,#10281c);background-size:cover}.card__corner{position:absolute;display:flex;flex-direction:row;align-items:baseline;line-height:1;gap:6cqw}.card__corner--tl{top:6cqw;left:8cqw}.card__corner--br{bottom:6cqw;right:8cqw;transform:rotate(180deg)}@container (max-width: 72px){.card__corner--br{display:none}}.card__rank{font-size:clamp(11px,30cqw,26px);font-weight:750;letter-spacing:-.02em;line-height:1}.card__suit{font-size:clamp(9px,24cqw,21px);line-height:1}.card__center{position:absolute;top:56%;left:50%;transform:translate(-50%,-50%);font-size:clamp(18px,52cqw,64px);line-height:1}.stock-pile-area{flex-shrink:0}.stock-pile{position:relative;width:clamp(44px,6.5vw,64px);aspect-ratio:64 / 89;height:auto;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 var(--scg-accent-glow)}.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:100%;height:100%;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:var(--scg-table-bg);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:clamp(30px,4vw,42px);aspect-ratio:64 / 89;height:auto;border-radius:6px;border:1px dashed var(--scg-surface-border);opacity:.75;display:flex;align-items:center;justify-content:center;transition:background .2s}.completed-suit-slot--filled{opacity:1}.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:.4}.win-modal-overlay{position:fixed;inset:0;background:#08100bc7;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.win-modal{background:var(--scg-surface);border:1px solid rgba(217,164,65,.25);border-radius:16px;padding:2rem;max-width:380px;width:90%;text-align:center}@media(prefers-reduced-motion:no-preference){.win-modal-overlay{animation:fade-in .3s ease}.win-modal{animation:slide-up .35s cubic-bezier(.22,1,.36,1)}}@keyframes slide-up{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.win-modal__icon{color:var(--scg-accent);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;margin-bottom:1rem}.win-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.25rem .75rem;color:var(--scg-text-secondary);font-size:.8125rem}.win-stat+.win-stat{border-left:1px solid rgba(255,255,255,.08)}.win-stat strong{font-size:1.25rem;font-weight:700;color:var(--scg-text-primary);font-variant-numeric:tabular-nums}.win-stat--record{color:var(--scg-selected-border)!important}.win-modal__record{font-size:.875rem;font-weight:600;color:var(--scg-accent);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:#1c1608}.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{padding:.5rem .375rem 1rem}.spider-game{padding:.5rem 0}.completed-suit-symbol{font-size:1.1rem}.spider-game__toolbar{flex-direction:column;align-items:stretch;min-height:0}.game-stats{justify-content:center}.game-stat__value{font-size:.9375rem}.game-controls{justify-content:center;flex-wrap:nowrap;gap:.375rem}.game-controls__actions{gap:0}.difficulty-btn{padding:.3rem .4rem;font-size:.6875rem}}@media(prefers-reduced-motion:reduce){.card,.stock-pile,.column{transition:none}.card--hinted,.stock-pile--hinted{animation:none}}