.stats { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.actions .btn { padding: 8px 4px; font-size: 14px; }
.msg { margin: 0 2px 10px; min-height: 3em; font-size: 15px; font-weight: 600; }

.table { --g: 1.6cqw; container-type: inline-size; width: 100%; }
.tin { --gap: 1.6cqw; --cw: calc((100cqw - 6 * var(--gap)) / 7); --ch: calc(var(--cw) * 1.42); --dn: .17; --upy: .36; }
.row { display: grid; grid-template-columns: repeat(7, var(--cw)); column-gap: var(--gap); }
.row.top { margin-bottom: calc(var(--gap) * 2); }
.col { position: relative; height: calc(var(--ch) + var(--d, 0) * var(--ch) * var(--dn) + var(--u, 0) * var(--ch) * var(--upy)); }
.pile { position: relative; height: var(--ch); }
.spacer { height: var(--ch); }

.card, .slot {
  position: absolute; left: 0; width: var(--cw); height: var(--ch); margin: 0; padding: 0; border-radius: 6px; font: inherit; cursor: pointer;
  top: calc(var(--d, 0) * var(--ch) * var(--dn) + var(--u, 0) * var(--ch) * var(--upy));
}
.pile .card, .pile .slot { top: 0; }
.slot { background: rgba(255,255,255,.04); border: 2px dashed #14402A; color: #3d7a57; display: grid; place-items: center; font-size: 6cqw; }
.card { border: 1px solid #1B0E02; text-align: left; display: block; overflow: hidden; }
.card.up { background: #F4EFE2; color: #151515; }
.card.up.red { color: #B3261E; }
.card .rk { position: absolute; left: 6%; top: 1%; font-weight: 800; font-size: 4.3cqw; line-height: 1.25; white-space: nowrap; }
.card .big { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 8.5cqw; line-height: 1; }
.card.down { background: repeating-linear-gradient(45deg, #2A1A0E 0 6px, #34210F 6px 12px); border-color: #4a2f19; cursor: default; }
.card.back { background: repeating-linear-gradient(45deg, #2A1A0E 0 6px, #34210F 6px 12px); border-color: #4a2f19; color: #F0D9B5; display: grid; place-items: center; font-weight: 800; font-size: 5cqw; }
.slot.found { color: #3d7a57; }

.card:focus-visible, .slot:focus-visible { outline: 3px solid #F2C94C; outline-offset: 2px; z-index: 5; }
.sel { box-shadow: 0 0 0 3px #F2C94C, 0 0 10px 2px rgba(242,201,76,.7); z-index: 4; }
.dest { outline: 3px dashed #7BE0A0; outline-offset: 1px; }
.dest.card:focus-visible, .dest.slot:focus-visible { outline: 3px solid #F2C94C; }
.card:hover:not(.down) { filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }