.card { display: block; padding: 0; border: 0; background: none; border-radius: 7px; box-shadow: 0 2px 6px #0006; }
.cardsvg { display: block; width: 100%; height: auto; }
.card.sm { width: 46px; }
.a-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.a-opp { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px; text-align: center; transition: .2s; min-width: 0; }
.a-opp.turn { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.a-opp.done { opacity: .6; }
.a-opp.passed .a-ocards::after { content: " · passt"; color: var(--text-muted); }
.a-oname { font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-ocards { font-size: .85rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mini-back { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: repeating-linear-gradient(45deg, #3b2f8f 0 3px, #4a3db0 3px 6px); border: 1px solid #fff8; }
.a-role { display: inline-block; font-size: .68rem; padding: 1px 7px; border-radius: 99px; background: var(--border); color: var(--text-muted); margin-top: 2px; }
.a-role.r-p { background: #e8c46a33; color: var(--gold); }
.a-role.r-a { background: #ff5d7333; color: var(--danger); }
.a-felt { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.a-pile { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
.a-play { position: absolute; display: flex; gap: 0; transform: translate(calc(var(--i) * 10px), calc(var(--i) * 8px)) rotate(calc(var(--i) * -4deg)); opacity: calc(1 + var(--i) * .25); }
.a-play .card { margin-left: -18px; width: 58px; }
.a-play .card:first-child { margin-left: 0; }
.a-play.top { z-index: 2; }
.a-who { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .75rem; color: #cde; white-space: nowrap; }
.a-play:not(.top) .a-who { display: none; }
.a-empty { color: #9ab; border: 2px dashed #ffffff30; border-radius: 10px; padding: 22px 16px; font-size: .9rem; }
.a-exinfo { text-align: center; font-size: .8rem; color: #cde; }
.a-me { text-align: center; min-height: 18px; margin-top: 6px; }
/* hand: cards overlap to always fit the width, no horizontal scroll */
.hand { display: flex; justify-content: center; padding: 18px 4px 4px; min-height: 110px; }
.hand .hc { width: 64px; flex: 0 0 auto; cursor: pointer; transition: transform .15s ease, box-shadow .15s; margin-left: calc(max(-48px, (100vw - 40px - 64px * var(--n)) / max(var(--n) - 1, 1)));
  min-height: 44px; }
.hand .hc:first-child { margin-left: 0; }
@media (min-width: 600px) { .hand .hc { margin-left: calc(max(-48px, min(4px, (520px - 64px * var(--n)) / max(var(--n) - 1, 1)))); } }
.hand .hc.sel { transform: translateY(-16px); box-shadow: 0 0 0 3px var(--gold), 0 6px 14px #0008; }
.hand .hc:focus-visible { outline: 3px solid var(--accent); }