.game-board {
  --card-width: 112px;
  --card-height: 156.8px;
  --gap: 16px;
  --face-down-offset: 20px;
  --face-up-offset: 32px;
  --waste-offset: 52px;
  --dragged-card-width: var(--card-width);
  --dragged-card-height: var(--card-height);
}
.playing-card, .empty-pile { width: var(--card-width); height: var(--card-height); display: block; padding: 0; overflow: hidden; border: 0; border-radius: calc(var(--card-width) * .055); background: transparent; }
.playing-card { position: relative; cursor: grab; box-shadow: 0 3px 9px rgba(0,0,0,.35); touch-action: manipulation; transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease; }
.playing-card[data-source-type] { touch-action: none; }
.playing-card:active { cursor: grabbing; }
.playing-card:focus-visible, .playing-card.is-selected { z-index: 10; outline: 3px solid #f0c85f; outline-offset: 2px; filter: brightness(1.08); transform: translateY(-3px); box-shadow: 0 7px 18px rgba(0,0,0,.5); }
.playing-card:disabled { cursor: default; opacity: 1; }
.playing-card img, .card-art { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 50%; pointer-events: none; }
.empty-pile { display: grid; place-items: center; border: 1px solid rgba(238,226,189,.28); background: rgba(4,17,19,.14); color: rgba(238,226,189,.36); font-family: var(--serif); font-size: calc(var(--card-width) * .36); }
.pile-count { position: absolute; right: 5px; bottom: 5px; min-width: 22px; padding: 3px 5px; border-radius: 20px; background: rgba(7,23,37,.86); color: white; font-size: 10px; font-weight: 800; }
.foundation-pile { border-radius: calc(var(--card-width) * .055); }
.foundation-pile.is-empty { display: grid; height: var(--card-height); place-items: center; box-sizing: border-box; border: clamp(2px, calc(var(--card-width) * .024), 3px) solid rgba(238,226,189,.72); background: rgba(4,17,19,.16); }
.foundation-placeholder { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.foundation-placeholder__suit { display: block; font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--card-width) * .48); font-weight: 900; line-height: 1; opacity: .88; }
.foundation-pile.hearts, .foundation-pile.diamonds { color: #8d2938; }
.foundation-pile.spades, .foundation-pile.clubs { color: #161b1a; }
.pile.is-snap-target::after { position: absolute; z-index: 40; inset: -5px; border: 2px solid rgba(240,200,95,.9); border-radius: calc(var(--card-width) * .075); background: rgba(240,200,95,.1); box-shadow: 0 0 0 2px rgba(7,23,37,.5), 0 0 18px rgba(240,200,95,.32); content: ""; pointer-events: none; }
.tableau-pile.is-snap-target::after { top: auto; bottom: calc(var(--card-height) * -.22); height: calc(var(--card-height) * 1.22); }
.card-drag-overlay { position: fixed; z-index: 1000; top: 0; left: 0; pointer-events: none; will-change: transform; }
.card-drag-overlay .drag-overlay-card { position: absolute !important; right: auto !important; bottom: auto !important; margin: 0; filter: none !important; transform: none !important; box-shadow: 0 9px 24px rgba(0,0,0,.52); opacity: .98; }
.playing-card.is-drag-source { visibility: hidden !important; }
.is-card-dragging { cursor: grabbing; user-select: none; }
.waste-card { position: absolute; z-index: calc(var(--waste-position) + 1); left: calc(var(--waste-position) * var(--waste-offset)); top: 0; }
.waste-card:disabled { filter: brightness(.92); }
@media (max-width: 560px) { .playing-card, .empty-pile { border-radius: 3px; } }