/* Playing cards. Set --cw (card width) on the table; height follows. */
.card {
  position: absolute;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .12);
  background: #FBF8F4;
  color: #3E322B;
  box-shadow: 0 1px 3px rgb(74 59 51 / .25);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  transition: left .25s cubic-bezier(.3, .7, .3, 1), top .25s cubic-bezier(.3, .7, .3, 1), box-shadow .2s ease, transform .2s ease;
}
.card.red { color: #B9614E; }
.card .corner { position: absolute; top: 4%; left: 8%; font-size: calc(var(--cw) * .3); text-align: center; letter-spacing: -.04em; }
.card .pip { position: absolute; right: 8%; bottom: 6%; font-size: calc(var(--cw) * .48); opacity: .85; }
.card .val { position: absolute; left: 8%; bottom: 6%; font-size: calc(var(--cw) * .22); font-weight: 600; opacity: .6; }
.card.down {
  background: var(--tile);
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .1) 0 4px, transparent 4px 8px);
  box-shadow: 0 1px 3px rgb(74 59 51 / .25), inset 0 0 0 3px rgb(255 255 255 / .25);
}
.card.sel { box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgb(74 59 51 / .25); transform: translateY(-3px); }
.card.free { cursor: pointer; }
.card.blocked { filter: brightness(.86) saturate(.8); cursor: default; }
.slot {
  position: absolute;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .12);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--muted) 40%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  font-size: calc(var(--cw) * .4);
}
.table {
  position: relative;
  background: color-mix(in srgb, #88B04B 22%, var(--board));
  border-radius: calc(var(--radius) + 4px);
  padding: 10px;
  touch-action: manipulation;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card:not(.down) { background: #EFE7DF; }
}
/* the same, when the player chose dark with the toggle */
:root[data-theme="dark"] .card:not(.down) { background: #EFE7DF; }
.table { background: var(--sunk); }
.card.red { color: var(--clay, #9A4729); }
.card .stackn { position: absolute; right: -4px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ink-1, #191F2B); color: var(--paper, #fff); font-size: 11px; line-height: 18px; text-align: center; }
.nextlabel { position: absolute; font-size: 11px; line-height: 14px; color: var(--ink-2, #49505E); text-align: center; font-weight: 600; }
.card.free { box-shadow: 0 0 0 2px var(--lagoon, #136868), 0 2px 6px rgb(25 31 43 / .2); }