*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:linear-gradient(160deg,#0d3b2e 0%,#145a42 100%);color:#f5f5f5;min-height:100vh;padding:10px;overflow-x:auto}
.bar{text-align:center;margin-bottom:8px}
.bar h1{font-size:1.35rem}
.sub{font-size:.85rem;opacity:.85}
#toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:12px}
button{padding:8px 16px;border:none;border-radius:6px;background:#ffd166;color:#1a1a2e;font-weight:700;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
#stats{font-size:.9rem;margin-left:8px}
#board{max-width:1100px;margin:0 auto}
.pile-zone{display:inline-flex;vertical-align:top;min-width:72px;min-height:100px;margin:4px;border:2px dashed rgba(255,255,255,.25);border-radius:8px;position:relative;align-items:flex-start;justify-content:center}
.pile-label{font-size:.65rem;position:absolute;top:2px;left:4px;opacity:.7}
#tableau{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;margin-top:8px}
.column{width:72px;min-height:420px;position:relative;border-radius:6px}
.card{position:absolute;width:68px;height:96px;border-radius:6px;background:#fff;color:#111;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:1rem;transition:outline .12s}
.card.red{color:#c0392b}
.card.face-down{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:transparent}
.card.selected{outline:3px solid #ffd166;z-index:50}
.card.dragging{opacity:.85;z-index:100}
#msg{text-align:center;min-height:1.5em;margin:10px;font-weight:600}
footer{text-align:center;font-size:.75rem;opacity:.7;margin-top:12px}