.card { width: var(--cw); height: var(--ch); position: relative; flex: none; border-radius: 4.6% / 3.3%; background: #15191e; box-shadow: 0 0 0 1px #000, 0 2px 4px #000a, 0 5px 12px #0006; transition: transform .14s, box-shadow .14s, filter .14s; cursor: grab; }
.card img { width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }
.card.tapped { transform: rotate(90deg); }
.card:hover { filter: brightness(1.1); }
.card.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 14px 2px #e6b65599, 0 5px 12px #0006; z-index: 5; }
.card.token { box-shadow: 0 0 0 1px #000, 0 0 0 2px #d9b45a, 0 2px 4px #000a; }
.card.token.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 14px 2px #e6b65599; }
.card.facedown::after { content: "face down"; position: absolute; left: 3px; top: 3px; font-size: 9px; background: #000c; padding: 0 5px; border-radius: 8px; text-transform: uppercase; letter-spacing: .06em; }

.rowline > .card { --chh: min(calc(var(--rh) - 10px), var(--ch)); height: var(--chh); width: calc(var(--chh) * var(--ar)); margin-left: var(--tm, 0px); margin-right: var(--tm, 0px); }
.rowline > .card + .card { margin-left: calc(var(--tm, 0px) + var(--ov, 0px)); }
.rowline > .card.tapped { --tm: calc(var(--chh) * (1 - var(--ar)) / 2); }
.rowline > .card:hover { z-index: 4; }
.zone.row .card { width: calc(var(--cw) * .5); height: calc(var(--ch) * .5); }
.zone.hand:not(.opp) .card { height: calc(var(--hand-h) - 20px); width: calc((var(--hand-h) - 20px) * var(--ar)); }
.zone.hand:not(.opp) .card:hover { transform: translateY(-7px); z-index: 4; box-shadow: 0 0 0 1px #000, 0 10px 18px #000b; }
.zone.hand:not(.opp) .card.sel:hover { box-shadow: 0 0 0 2px var(--gold), 0 0 14px 2px #e6b65599, 0 10px 18px #000b; }
.zone.hand.opp .card { width: calc(var(--cw) * .5); height: calc(var(--ch) * .5); margin-left: -14px; } .zone.hand.opp .card:first-child { margin-left: 0; }

.back { width: 100%; height: 100%; border-radius: inherit; border: 2px solid #c3cde3; box-shadow: inset 0 0 0 1px #0009;
  background: var(--back-img, none) center / 100% 100% no-repeat, radial-gradient(ellipse at 50% 50%, #3d5b96 0 28%, transparent 29%), repeating-linear-gradient(45deg, #2a3f6b 0 6px, #233559 6px 12px); }
.face { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(160deg, #f4ecd8, #e2d5b3); color: #2b2112; border: 3px solid #4d3f24; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 11px; line-height: 1.15; font-weight: 600; overflow: hidden; word-break: break-word; }
.face.big { width: 100%; height: 100%; font-size: 24px; }
.ctrs { position: absolute; left: 3px; right: 3px; bottom: 3px; display: flex; flex-wrap: wrap; gap: 2px; pointer-events: none; }
.ctrs span { background: #0b0f14e6; color: #ffd86b; font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 8px; border: 1px solid #e6b65580; }
.card.tapped .ctrs { transform: none; }

/* Piles: library shows its top card on a thick stack; graveyard and exile cascade so every title can be read. */
.pile { display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.pile-label { font-size: clamp(9.5px, calc(var(--pw) * .155), 13px); color: #b9c6d3; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 4px; line-height: 1.2; white-space: nowrap; }
.pile-label .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pile-n { position: absolute; top: -6px; right: -6px; z-index: 12; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 5px; border-radius: 10px; color: #2a1c02; background: linear-gradient(#f3cf7c, #cf9a35); box-shadow: 0 0 0 1px #000, 0 2px 5px #000a; font-variant-numeric: tabular-nums; pointer-events: none; }
.pile-label.viewable { cursor: pointer; } .pile-label.viewable:hover { color: var(--gold); }
.pile-stack { position: relative; width: var(--pw); height: calc(var(--pw) / var(--ar)); border-radius: 4.6% / 3.3%; }
.pile-stack.empty { background: #0b0f1480; box-shadow: inset 0 0 0 1px #ffffff1f, inset 0 3px 8px #000a; }
.pile-stack.cascade { height: auto; flex: 1; min-height: calc(var(--pw) / var(--ar)); border-radius: 5px; }
.pile-stack.cascade.empty { background: none; box-shadow: none; }
.pile-stack.cascade.empty::before { content: ''; position: absolute; left: 0; top: 0; width: var(--pw); height: calc(var(--pw) / var(--ar)); border-radius: 4.6% / 3.3%; background: #0b0f1480; box-shadow: inset 0 0 0 1px #ffffff1f, inset 0 3px 8px #000a; }
.pile-stack .card { position: absolute; left: 0; top: 0; width: var(--pw); height: calc(var(--pw) / var(--ar)); }
.pile-stack.cascade .card { box-shadow: 0 0 0 1px #000, 0 -2px 5px #0009; transition: none; }
.pile-stack.cascade .card:hover { z-index: 9; box-shadow: 0 0 0 1px var(--gold), 0 4px 14px #000c; }
.pile-stack.thick .card { box-shadow: 0 0 0 1px #000, 1px 2px 0 #c3cde3, 1px 3px 0 #1b2740, 2px 4px 0 #c3cde3, 2px 5px 0 #1b2740, 3px 6px 0 #8090b0, 4px 9px 10px #000b; }
.pile .card.tapped { transform: none; }
.pile.over .pile-stack { box-shadow: 0 0 0 2px var(--gold), 0 0 14px #e6b65580; }
.pile.zone.over { outline: none; box-shadow: none; }

#preview { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; pointer-events: none; width: min(320px, 46vh); aspect-ratio: var(--ar); border-radius: 4.6% / 3.3%; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 12px 36px #000d; background: #111; }
#preview img { width: 100%; height: 100%; display: block; }
.pile-stack.cascade .face { align-items: flex-start; padding: 1px 3px; font-size: clamp(8.5px, calc(var(--pw) * .13), 12px); border-width: 2px; }
.pile-stack.cascade .face span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }