.sol-area { max-width:760px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { display:flex; gap:18px; color:var(--muted); font-size:14px; }
.stats b { color:var(--ink); font-size:17px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.table { display:block; }
.pile { min-height:120px; position:relative; }
.slot { border:1px dashed var(--rule); border-radius:6px; height:72px; }
.card { position:absolute; width:56px; height:76px; border-radius:6px; background:var(--panel); border:1px solid var(--rule); box-shadow:0 1px 2px rgba(0,0,0,.12); font-size:13px; font-weight:700; display:flex; flex-direction:column; align-items:flex-start; padding:4px 6px; cursor:pointer; user-select:none; }
.card.red { color:#d64545; }
.card.black { color:var(--ink); }
.card.face-down { background:var(--blue); color:transparent; }
.card.face-down::after { content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.4); border-radius:4px; }
.card.selected { outline:2px solid var(--orange); outline-offset:-1px; }
.top-row { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:10px; }
.top-slot { min-height:84px; position:relative; }
.stock { cursor:pointer; }
.waste { cursor:pointer; }
.foundation { cursor:default; }
.win-panel { max-width:360px; margin:16px 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:46px; height:64px; font-size:11px; padding:3px 4px; } .slot { height:64px; } .top-slot { min-height:72px; } .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .actions { justify-content:center; } }