/* The Solitaire table, seven columns wide, on the felt and under the bar
   every table has (css/table.css). A card's width follows the window, so the
   whole table fits a phone held upright as well as a desktop. */
/* On the body, where the gear in the Stock's bar sets the table's size (--pile). */
body {
  --gap: clamp(6px, 1.4vw, 14px);
  /* The size chosen in the panel (--card-scale), as far as the window allows. */
  --cw: min(calc(104px * var(--card-scale, 1) * var(--pile, 1)), calc((100vw - 2 * var(--gap) - 6 * var(--gap)) / 7));
  --ch: calc(var(--cw) * 1.4);
  --down: calc(var(--cw) * .13);     /* how much of a face-down card shows under the next */
  --up: calc(var(--cw) * .3);        /* and of a face-up one */
}
.table { padding: var(--gap); max-width: calc(7 * var(--cw) + 8 * var(--gap)); margin: 0 auto; user-select: none; -webkit-user-select: none; }
.top, .tableau { display: grid; grid-template-columns: repeat(7, var(--cw)); gap: var(--gap); }
.top { margin-bottom: calc(var(--gap) * 1.6); }

/* A pile under its bar, as narrow as a card: the name and count, the "?"
   when the bot's next move starts here, and in the Stock's the gear. */
.cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cell .pile-bar { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 2px 4px; width: 100%; min-height: 24px;
                  padding: 2px 5px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.cell .pile-bar .k { font-size: 11px; }
.cell .pile-bar .red { color: var(--red); }
.cell .pile-bar .hand-gear, .cell .pile-bar .hand-hint { margin: -2px -3px -2px 2px; flex: none; }
.cell .pile-bar .hand-hint { height: 18px; padding: 0 5px; font-size: 11px; }
.pile-bar.hinted { outline: 2px solid var(--accent); }
.info button.small { padding: 1px 8px; font-size: 12px; }

.pile { position: relative; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07); }
/* An empty place: a faint outline, a suit's sign on a foundation. */
.pile.empty, .foundation, .column { outline: 2px solid rgb(255 255 255 / .14); outline-offset: -2px; }
.foundation::before { content: attr(data-sign); position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .45); color: rgb(255 255 255 / .16); }
.column { height: auto; min-height: var(--ch); }
.stock { cursor: pointer; }
.stock.empty::before { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); color: rgb(255 255 255 / .3); }
.stock.spent::before { content: ""; }

.card {
  position: absolute; left: 0; top: 0; display: block;
  width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .07);
  box-shadow: 0 1px 3px rgb(0 0 0 / .45); background: #fff;
  -webkit-user-drag: none; -webkit-touch-callout: none; touch-action: none;
}
.card.up { cursor: grab; }
.card.selected { outline: 3px solid var(--accent); outline-offset: -1px; }
/* Picked up: lifted off the table a little, with a shadow beneath. */
.card.selected { transform: translate(-2px, -4px); box-shadow: 3px 8px 14px rgb(0 0 0 / .5); z-index: 1; }
/* The cards under a pile's top card: their edges, down and to the right. */
.edge {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); pointer-events: none;
  border-radius: calc(var(--cw) * .07); 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; }
.card.lifted { visibility: hidden; }
/* Three from the waste, fanned when drawing three. */
.waste .card:nth-last-child(2) { left: 0; }
.waste.fan { width: calc(var(--cw) * 1.5); }
.drop { outline: 3px solid var(--accent) !important; outline-offset: -2px; }

/* What is carried while dragging. */
.carry { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10; }
.carry .card { box-shadow: 0 8px 18px rgb(0 0 0 / .5); }