.spider-area { max-width:900px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { display:flex; gap:16px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:17px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.table { display:grid; grid-template-columns:repeat(10,1fr); gap:6px; }
.pile { min-height:130px; position:relative; }
.slot { border:1px dashed var(--rule); border-radius:6px; height:70px; }
.card { position:absolute; width:54px; height:72px; border-radius:6px; background:var(--panel); border:1px solid var(--rule); box-shadow:0 1px 2px rgba(0,0,0,.12); font-size:12px; font-weight:700; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; padding:3px 5px; cursor:pointer; user-select:none; }
.card.selected { outline:2px solid var(--orange); outline-offset:-1px; }
.stock-btn { cursor:pointer; }
.win-panel { max-width:360px; margin:14px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .card { width:42px; height:58px; font-size:10px; padding:2px 3px; } .slot { height:58px; } .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .actions { justify-content:center; } }