:root{--bg:#0c1b13;--felt:#0e3b26;--felt-2:#0a2f1e;--line:#1f6f4a;--accent:#e6ffb8;--gold:#ffd166;--red:#d34d4d;--card:#fff;--shadow:rgba(0,0,0,.35)}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 50% 20%,var(--felt),var(--felt-2));color:#eee;font:15px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #134e35;background:linear-gradient(#0c2f20,#0a2419)}
.left,.right{display:flex;gap:8px;align-items:center}
.brand{font-weight:700;letter-spacing:.4px}
button,.seg{background:#123a28;color:#e9ffe0;border:1px solid #16593b;padding:8px 12px;border-radius:10px;box-shadow:0 2px 6px var(--shadow);cursor:pointer}
button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px)}
.seg{display:inline-flex;gap:0;padding:0;border-radius:10px;overflow:hidden}
.seg button{border:0;border-right:1px solid #0f2a1e;background:#0f2d1f;padding:8px 10px;min-width:44px}
.seg button[aria-pressed="true"]{background:#185739;color:#fff;font-weight:600}
.stat{padding:6px 10px;border:1px solid #16593b;border-radius:10px;background:#0e2a1d;min-width:90px;text-align:center}
.table{padding:18px;display:grid;grid-template-rows:auto 1fr;gap:18px;height:calc(100% - 52px)}
.row{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;position:relative}
.top-row{align-items:start}
.pile{position:relative;width:120px;height:168px;border-radius:12px;border:2px dashed var(--line);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 4px 14px var(--shadow)}
.pile.small{width:110px;height:154px}
.label{position:absolute;bottom:-20px;left:0;font-size:12px;opacity:.7}
.card{position:absolute;top:0;left:0;width:120px;height:168px;border-radius:12px;background:var(--card);border:1px solid #e6e6e6;box-shadow:0 6px 18px var(--shadow);display:flex;align-items:center;justify-content:center;font-weight:700}
.card.small{width:110px;height:154px}
.card .face{position:absolute;inset:6px;border-radius:10px;padding:6px}
.front{background:linear-gradient(#fff,#f3f3f3)}.back{background:repeating-linear-gradient(45deg,#0d3d29 0 8px,#135239 8px 16px);border:1px solid #0b2b1d}
.rank{position:absolute;top:2px;left:6px;font-size:20px}.suit{position:absolute;bottom:2px;right:6px;font-size:20px}.center{font-size:40px}
.red{color:var(--red)}.black{color:#222}.hidden .front{display:none}.hidden .back{display:block}.back{display:none}
.tableau{--offset:28px}.tableau .card{position:absolute}.tableau .card.stacked{transform:translateY(calc(var(--i)*var(--offset)))}
.drop-target{outline:3px solid transparent;transition:outline-color .08s}.drop-ok{outline-color:var(--gold)!important}
.drag{position:fixed;pointer-events:none;z-index:9999}
/* Hide originals while dragging */.drag-origin{opacity:0}
@media (max-width:1100px){.pile,.card{width:100px;height:140px}.pile.small,.card.small{width:92px;height:128px}.tableau{--offset:24px}}
@media (max-width:900px){.pile,.card{width:86px;height:120px}.pile.small,.card.small{width:78px;height:110px}.tableau{--offset:20px}.rank,.suit{font-size:16px}.center{font-size:32px}}
@media (max-width:740px){.row{grid-template-columns:repeat(4,1fr)}.top-row{grid-template-columns:repeat(4,1fr)}.pile,.card{width:76px;height:106px}.pile.small,.card.small{width:70px;height:98px}.tableau{--offset:18px}}