/* The Hearts table: four places round it, the player's own at the bottom
   with their hand fanned, on the felt and under the bar every table has
   (css/table.css). A card's width follows the window and the size chosen in
   the panel (--card-scale). */
:root {
  /* Thirteen cards, each showing 0.55 of itself, across the window at most;
     and the table's height - the hands above and below, the trick between -
     within the window's. */
  --cw-root: min(calc(96px * var(--card-scale, 1)), calc((100vw - 32px) / 7.6), calc((100vh - 290px) / 4.3));
  --cw: var(--cw-root);
  --ch: calc(var(--cw) * 1.4);
  --small: calc(var(--cw) * .45);       /* the others' cards, face down */
}
/* A place, or the trick, at its own size: the gear beside it sets --pile. */
.sized { --cw: calc(var(--cw-root) * var(--pile, 1)); --ch: calc(var(--cw) * 1.4); --small: calc(var(--cw) * .45); }

/* The places round the centre. */
.table {
  flex: 1; height: 100%; display: grid; gap: 8px; padding: 10px 12px; min-height: 0;
  grid-template: "top top top" auto "left centre right" 1fr "bottom bottom bottom" auto / minmax(90px, 1fr) minmax(0, 3fr) minmax(90px, 1fr);
  user-select: none; -webkit-user-select: none;
}
.place { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.place.top { grid-area: top; }
.place.left { grid-area: left; justify-content: center; }
.place.right { grid-area: right; justify-content: center; }
.place.bottom { grid-area: bottom; }
.who .points { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; }
.who .points.hearts { color: var(--red); }
.place.turn .who { outline: 2px solid var(--accent); box-shadow: 0 0 12px rgb(242 193 78 / .5); }
.who .done { color: var(--accent); font-size: 12px; }

/* The others' hands: as many backs as they hold, overlapping. */
.backs { display: flex; height: calc(var(--small) * 1.4); }
.backs img { width: var(--small); height: calc(var(--small) * 1.4); border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.backs img + img { margin-left: calc(var(--small) * -.72); }
.place.left .backs, .place.right .backs { flex-direction: column; height: auto; }
.place.left .backs img + img, .place.right .backs img + img { margin-left: 0; margin-top: calc(var(--small) * -1.15); }

/* The trick: each card on the side of the one who played it. */
/* The trick, under its bar. */
.centre { grid-area: centre; position: relative; min-height: calc(var(--ch) * 1.7 + 34px); }
.trick-bar { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.played { position: absolute; left: 50%; top: calc(50% + 16px); width: var(--cw); height: var(--ch); }
.played[data-pos="0"] { transform: translate(-50%, -18%); }
.played[data-pos="1"] { transform: translate(-120%, -50%); }
.played[data-pos="2"] { transform: translate(-50%, -82%); }
.played[data-pos="3"] { transform: translate(20%, -50%); }
.played img { width: 100%; height: 100%; border-radius: calc(var(--cw) * .07); box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.played.won img { outline: 3px solid var(--accent); }
.banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  max-width: 90%; padding: 10px 16px; border-radius: 10px; background: rgb(0 0 0 / .55); text-align: center;
}
.banner .received { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.banner .received img { width: calc(var(--cw) * .7); border-radius: 4px; }

/* The player's hand: fanned, each card showing a little over half of itself. */
.hand { display: flex; justify-content: center; min-height: calc(var(--ch) + 14px); padding-top: 14px; }
.hand .card { width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07); box-shadow: 0 1px 3px rgb(0 0 0 / .45); transition: transform .12s ease; cursor: default; }
.hand .card + .card { margin-left: calc(var(--cw) * -.45); }
.hand .card.legal { cursor: pointer; }
.hand .card.legal:hover { transform: translateY(-6px); box-shadow: 0 5px 9px rgb(0 0 0 / .45); }
.hand.my-turn .card:not(.legal) { filter: brightness(.6); }
/* Picked: raised off the hand, with a shadow beneath - and left where it lies
   in the fan, so the cards either side of it are still seen. */
.hand .card.lifted, .hand .card.chosen { transform: translateY(-14px); box-shadow: 3px 12px 16px rgb(0 0 0 / .55); }
.hand .card.chosen { outline: 3px solid var(--accent); outline-offset: -1px; }
.hand .card.new { box-shadow: 0 0 0 3px rgb(242 193 78 / .7); }

@media (max-width: 600px) {
  .table { grid-template-columns: minmax(56px, 1fr) minmax(0, 3fr) minmax(56px, 1fr); padding: 6px; }
  .who { font-size: 12px; padding: 2px 6px; }
}