/* The Rummy table: the others across the top, the stock and the discard
   pile with the melds beside them, and your hand along the bottom - 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 {
  /* Eleven cards, each showing more than half of itself, across the window
     at most; and the others, the piles and your hand within its height. */
  --cw-root: min(calc(92px * var(--card-scale, 1)), calc((100vw - 40px) / 7.4), calc((100vh - 300px) / 3.7));
  --cw: var(--cw-root);
  --ch: calc(var(--cw) * 1.4);
  --small: calc(var(--cw) * .42);       /* the others' cards, face down */
  --mw: calc(var(--cw) * .62);          /* a meld's cards */
}
/* A part of the table 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) * .42); --mw: calc(var(--cw) * .62); }
.others { position: relative; }
.table { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; min-height: 0; user-select: none; -webkit-user-select: none; }

/* The others: a box each, in turn order. */
.others { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.player { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; }
.player.turn .who, .mine.turn .who { outline: 2px solid var(--accent); box-shadow: 0 0 12px rgb(242 193 78 / .45); }
.who .score { font-variant-numeric: tabular-nums; color: var(--accent); }
.who .dealer { font-size: 11px; color: #1b1b1b; background: var(--accent); border-radius: 4px; padding: 0 5px; }
.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) * -.75); }
.player .left { display: flex; }
.player .left img { width: var(--small); border-radius: 3px; }
.player .left img + img { margin-left: calc(var(--small) * -.55); }

/* The middle: the piles, and the melds beside them. */
.middle { position: relative; display: flex; gap: 18px; align-items: flex-start; flex: 1; min-height: calc(var(--ch) + 24px); }
.piles { display: flex; gap: 14px; flex: none; align-items: flex-start; }
.pile-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile { position: relative; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07); outline: 2px solid rgb(255 255 255 / .14); outline-offset: -2px; }
.pile .card, .pile .edge { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07); }
.pile .card { box-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.pile .edge { pointer-events: none; background: #f2f2ee; border: 1px solid rgb(0 0 0 / .18); box-shadow: 0 1px 2px rgb(0 0 0 / .35);
              --step: clamp(1.5px, calc(var(--cw) * .025), 2.5px); transform: translate(calc(var(--k) * var(--step)), calc(var(--k) * var(--step))); }
img.edge { background: none; border: 0; }
.pile.live { cursor: pointer; }
.pile.live .card { box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgb(0 0 0 / .5); }
.pile.live:hover .card { transform: translate(-1px, -3px); }

.melds { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 10px 18px; max-height: calc(var(--ch) * 2.6); overflow: auto; padding: 2px 4px 4px; }
.melds:empty::before { content: "No melds on the table yet."; color: rgb(255 255 255 / .35); font-size: 13px; }
/* One player's melds, under their bar. */
.meld-group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.meld-group .group { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.meld { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 8px; border: 2px solid transparent; }
.meld .cards { display: flex; }
.meld img { width: var(--mw); height: calc(var(--mw) * 1.4); border-radius: 4px; box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.meld img + img { margin-left: calc(var(--mw) * -.6); }
.meld.target { cursor: pointer; border-color: rgb(242 193 78 / .6); }
.meld.target:hover { border-color: var(--accent); background: rgb(242 193 78 / .1); }
.meld.fresh img { box-shadow: 0 0 0 2px 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 / .6); text-align: center;
}

/* Your hand: fanned, each card showing more than half of itself, so a card
   between two chosen ones is still seen; the ones chosen raised where they lie. */
.mine { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hand { display: flex; justify-content: center; min-height: calc(var(--ch) + 16px); padding-top: 16px; }
.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: pointer; }
.hand .card + .card { margin-left: calc(var(--cw) * -.38); }
.hand .card:hover { transform: translateY(-6px); box-shadow: 0 5px 9px rgb(0 0 0 / .45); }
.hand .card.chosen { transform: translateY(-16px); box-shadow: 3px 12px 16px rgb(0 0 0 / .55); outline: 3px solid var(--accent); outline-offset: -1px; }
.hand .card.taken { box-shadow: 0 0 0 3px rgb(255 255 255 / .6); }

/* At the end of a hand: what each had left. */
.left-list { list-style: none; padding: 0; margin: 0 0 12px; }
.left-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.left-list .cards { display: flex; flex: 1; }
.left-list img { width: 30px; border-radius: 3px; }
.left-list img + img { margin-left: -14px; }
.left-list .pts { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

@media (max-width: 600px) {
  .table { padding: 6px; }
  .middle { flex-direction: column; gap: 26px; }
  .player { min-width: 0; padding: 4px 6px; }
}