/* FreeCell, Spider, Pyramid and Golf solitaire (scripts/games-cards.mjs, public/games/{freecell,spider,pyramid,golf}.js).
   Cards use the Klondike card styles in games.css (.sol-card, .sol-corner, .sol-mid, .back). */
.gm[data-game="freecell"] .gm-stage, .gm[data-game="spider"] .gm-stage, .gm[data-game="pyramid"] .gm-stage, .gm[data-game="golf"] .gm-stage { container-type: inline-size; margin: 0 auto; }
.gm[data-game="freecell"] .gm-stage { max-width: 900px; }
.gm[data-game="spider"] .gm-stage { max-width: 1000px; }
.gm[data-game="pyramid"] .gm-stage { max-width: 640px; }
.gm[data-game="golf"] .gm-stage { max-width: 720px; }
.gm[data-game="freecell"] .gm-board, .gm[data-game="spider"] .gm-board, .gm[data-game="pyramid"] .gm-board, .gm[data-game="golf"] .gm-board { --gap: clamp(3px, 1.2cqi, 12px); --ch: calc(var(--cw) * 1.4); --off: calc(var(--cw) * .3); --offd: calc(var(--cw) * .12); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gm[data-game="freecell"] .gm-board { --cw: calc((100cqi - 7 * var(--gap)) / 8); }
.gm[data-game="spider"] .gm-board { --cw: calc((100cqi - 9 * var(--gap)) / 10); }
.gm[data-game="pyramid"] .gm-board, .gm[data-game="golf"] .gm-board { --cw: calc((100cqi - 6 * var(--gap)) / 7); }
.gm-big[data-game="freecell"] .gm-board, .gm-big[data-game="spider"] .gm-board, .gm-big[data-game="golf"] .gm-board { --off: calc(var(--cw) * .44); }
.gm-num { font: inherit; width: 7.5em; min-height: 48px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); }
.gm-big .gm-num { font-size: 1.2rem; min-height: 56px; }

/* Piles: empty spaces, foundation suit marks, selection */
.fc-c, .fc-f, .sp-s, .py-s, .py-w, .gf-s, .gf-w { background: rgba(29, 29, 59, .06); box-shadow: inset 0 0 0 2px rgba(29, 29, 59, .18); }
.fc-t.empty, .sp-t.empty { background: rgba(29, 29, 59, .06); box-shadow: inset 0 0 0 2px rgba(29, 29, 59, .18); }
.fc-f::before { content: attr(data-suit); position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); color: rgba(29, 29, 59, .3); }
.py-s.recycle::before { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); color: rgba(29, 29, 59, .55); }
.py-slot:focus-visible, .sp-s:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

/* FreeCell */
.fc-top, .fc-tab { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap); }
.fc-top { margin-bottom: calc(var(--gap) * 2.5); }
.fc-c:nth-child(4) { margin-right: calc(var(--gap) * -.5); }
.fc-t { --o: calc(var(--off) * var(--k, 1)); height: calc(var(--ch) + (var(--n, 1) - 1) * var(--o)); min-height: var(--ch); }
.fc-t .sol-card { top: calc(var(--i) * var(--o)); }

/* Spider */
.sp-top { display: flex; align-items: flex-start; gap: calc(var(--gap) * 3); margin-bottom: calc(var(--gap) * 2.5); min-height: var(--ch); }
.sp-s { width: calc(var(--cw) + 4 * 6px); flex: none; }
.sp-s .sol-card { width: var(--cw); left: calc(var(--i) * 6px); }
.sp-done { position: relative; flex: 1; height: var(--ch); }
.sp-done .sol-card { width: var(--cw); left: calc(var(--i) * var(--cw) * .45); cursor: default; }
.sp-tab { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--gap); }
.sp-t { --o: calc(var(--off) * var(--k, 1)); --od: calc(var(--offd) * var(--k, 1)); height: calc(var(--ch) + max(0, var(--n, 1) - var(--nd, 0) - 1) * var(--o) + var(--nd, 0) * var(--od)); min-height: var(--ch); }
.sp-t .sol-card { top: calc(min(var(--i), var(--nd, 0)) * var(--od) + max(0, var(--i) - var(--nd, 0)) * var(--o)); }

/* Pyramid */
.py-pyr { position: relative; height: calc(var(--ch) * 4); margin: 0 auto calc(var(--gap) * 3); width: 100%; }
.py-slot { position: absolute; width: var(--cw); height: var(--ch); left: calc((3 - var(--r) / 2 + var(--c)) * (var(--cw) + var(--gap))); top: calc(var(--r) * var(--ch) * .5); z-index: var(--r); }
.py-slot[hidden] { display: none; }
.py-slot .sol-card { position: absolute; inset: 0; height: 100%; }
.py-slot.covered .sol-card { background: #e2e2ea; cursor: default; }
.py-slot .sol-mid { inset: 3% 6% auto auto; font-size: calc(var(--cw) * .32); }
.py-low, .gf-low { display: flex; align-items: center; gap: calc(var(--gap) * 3); flex-wrap: wrap; }
.py-s, .py-w, .gf-s, .gf-w { width: var(--cw); flex: none; }
.py-pass { margin: 0; font-weight: 700; flex: 1 1 10em; }
.gm-big .py-pass, .gm-big .gm-sel { font-size: 1.2rem; }

/* Golf */
.gf-tab { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); margin-bottom: calc(var(--gap) * 3); }
.gm[data-game="golf"] .gm-board { --off: calc(var(--cw) * .4); }
.gm-big[data-game="golf"] .gm-board { --off: calc(var(--cw) * .5); }
.gf-t { height: calc(var(--ch) + 4 * var(--off)); }
.gf-t .sol-card { top: calc(var(--i) * var(--off)); }
.gf-t.fits .sol-card:last-child { box-shadow: 0 0 0 3px var(--green), 0 1px 2px rgba(29, 29, 59, .15); }
.gf-t.fits .sol-card.sel:last-child, .gf-t .sol-card.sel { box-shadow: 0 0 0 3px var(--sun), 0 0 0 5px var(--ink); }

/* Small cards (phones, ten Spider columns): bigger corner, smaller middle suit */
@container (max-width: 560px) {
  .gm[data-game="freecell"] .sol-corner, .gm[data-game="spider"] .sol-corner, .gm[data-game="golf"] .sol-corner, .gm[data-game="pyramid"] .sol-corner { font-size: calc(var(--cw) * .42); }
  .gm[data-game="spider"] .sol-mid, .gm[data-game="freecell"] .sol-mid { font-size: calc(var(--cw) * .5); inset: 40% 0 0; }
  .gm[data-game="freecell"] .gm-board, .gm[data-game="spider"] .gm-board { --off: calc(var(--cw) * .44); }
  .gm[data-game="golf"] .gm-board { --off: calc(var(--cw) * .5); }
}

/* Solitaire pack (5 Nov 2026): Yukon, Scorpion, Forty Thieves, Canfield (public/games/patience.js + <game>.js) */
.gm[data-game="yukon"] .gm-stage, .gm[data-game="scorpion"] .gm-stage, .gm[data-game="forty-thieves"] .gm-stage, .gm[data-game="canfield"] .gm-stage { container-type: inline-size; margin: 0 auto; max-width: 760px; }
.gm[data-game="forty-thieves"] .gm-stage { max-width: 1000px; }
.gm[data-game="canfield"] .gm-stage { max-width: 700px; }
.gm[data-game="yukon"] .gm-board, .gm[data-game="scorpion"] .gm-board, .gm[data-game="forty-thieves"] .gm-board, .gm[data-game="canfield"] .gm-board { --cols: 7; --gap: clamp(3px, 1.2cqi, 12px); --cw: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols)); --ch: calc(var(--cw) * 1.4); --off: calc(var(--cw) * .32); --offd: calc(var(--cw) * .12); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gm[data-game="forty-thieves"] .gm-board { --cols: 10; }
.gm-big[data-game="yukon"] .gm-board, .gm-big[data-game="scorpion"] .gm-board, .gm-big[data-game="forty-thieves"] .gm-board, .gm-big[data-game="canfield"] .gm-board { --off: calc(var(--cw) * .44); }
.pk-row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); align-items: start; }
.pk-top { margin-bottom: calc(var(--gap) * 2.5); min-height: var(--ch); }
.pk-t { --o: calc(var(--off) * var(--k, 1)); --od: calc(var(--offd) * var(--k, 1)); height: calc(var(--ch) + max(0, var(--n, 1) - var(--nd, 0) - 1) * var(--o) + var(--nd, 0) * var(--od)); min-height: var(--ch); }
.pk-t .sol-card { top: calc(min(var(--i), var(--nd, 0)) * var(--od) + max(0, var(--i) - var(--nd, 0)) * var(--o)); }
.pk-t.empty, .pk-w.empty, .pk-r.empty { background: rgba(29, 29, 59, .06); box-shadow: inset 0 0 0 2px rgba(29, 29, 59, .18); }
.pk-s[data-left]:not([data-left="0"])::after, .pk-r[data-left]:not([data-left="0"])::after { content: attr(data-left); position: absolute; right: -4px; bottom: -6px; z-index: 5; min-width: 1.6em; padding: 1px 5px; border-radius: 99px; background: var(--ink); color: #fff; font: 800 .8rem/1.4 var(--font); text-align: center; }
.gm[data-game="scorpion"] .pk-s .sol-card { left: calc(var(--i) * 5px); }
.pk-done { position: relative; grid-column: 2 / -1; height: var(--ch); }
.pk-done .sol-card { width: var(--cw); left: calc(var(--i) * (var(--cw) + var(--gap))); cursor: default; }
.pk-fan { grid-column: span 2; overflow: visible; }
.pk-fan .sol-card { width: var(--cw); left: calc(var(--i) * var(--cw) * .32); }
.pk-r .sol-card { left: 0; }
.pk-base { grid-column: span 2; margin: 0; align-self: center; font-weight: 700; line-height: 1.25; font-size: clamp(.8rem, 2.6cqi, 1.05rem); }
.gm-big .pk-base { font-size: clamp(.95rem, 3.2cqi, 1.25rem); }
@container (max-width: 560px) {
  .gm[data-game="yukon"] .sol-corner, .gm[data-game="scorpion"] .sol-corner, .gm[data-game="forty-thieves"] .sol-corner, .gm[data-game="canfield"] .sol-corner { font-size: calc(var(--cw) * .42); }
  .gm[data-game="yukon"] .sol-mid, .gm[data-game="scorpion"] .sol-mid, .gm[data-game="forty-thieves"] .sol-mid, .gm[data-game="canfield"] .sol-mid { font-size: calc(var(--cw) * .5); inset: 40% 0 0; }
  .gm[data-game="yukon"] .gm-board, .gm[data-game="scorpion"] .gm-board, .gm[data-game="forty-thieves"] .gm-board, .gm[data-game="canfield"] .gm-board { --off: calc(var(--cw) * .46); }
}