.opps { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; } .opp { background:rgba(0,0,0,.25); border-radius:10px; padding:6px 12px; } .opp.active { outline:2px solid #fbbf24; }
.mid { display:flex; gap:30px; justify-content:center; align-items:center; margin:10px 0; --cw:clamp(54px, 14vw, 86px); } .pile { display:flex; flex-direction:column; align-items:center; gap:6px; } .pile small { color:#cfe8d8; } #suit { font-size:1.4rem; color:#fff; } #suit.red { color:#ff8da1; }
.suits { display:flex; gap:10px; justify-content:center; align-items:center; margin:8px 0; } .suits button { font-size:1.6rem; width:56px; } .suits .red { color:#ff8da1; }
.row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:100px; --cw:clamp(44px, 10.5vw, 74px); } #hand .pcard.ok { cursor:pointer; box-shadow:0 0 0 3px #4ade80, 0 3px 8px rgba(0,0,0,.4); } #hand .pcard.dim { opacity:.55; cursor:default; }
.log { width:min(560px, 96vw); max-height:140px; overflow:auto; font-size:.85rem; color:var(--muted); display:flex; flex-direction:column; gap:2px; }

.felt { background:linear-gradient(135deg,#a96c42,#754326); border-color:#643a20; box-shadow:0 14px 27px rgba(55,31,14,.24), inset 0 2px 0 rgba(255,255,255,.24); }
.felt .opp { background:rgba(58,29,13,.3); }