/* Solitaire — card table, cards and drag ghost. The page layout comes from play-page.css. */
body[data-game='soliter'] { --frame: #0f7a55; --title: #0f7a55; --title-shadow: #0a5239; }

.board-frame { display: grid; }
.card-table { --gap: 10px; --card-w: 76px; --card-h: 106px; display: grid; grid-template-columns: repeat(7, var(--card-w)); gap: 18px var(--gap); justify-content: center; align-content: start; min-height: calc(var(--card-h) * 4.4); user-select: none; -webkit-user-select: none; touch-action: none; }
.pile, .column { position: relative; width: var(--card-w); }
.pile { height: var(--card-h); border-radius: calc(var(--card-w) * .1); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .22); }
.pile.foundation::after { content: attr(data-suit); position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .28); font-size: calc(var(--card-w) * .5); }
.pile.stock { padding: 0; border: 0; background: transparent; cursor: pointer; }
.pile.stock.empty::after { content: '↻'; position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / .55); font: 700 calc(var(--card-w) * .45) 'Fredoka', sans-serif; }
.pile.waste { box-shadow: none; }
.column { min-height: var(--card-h); }
.column::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--card-h); border-radius: calc(var(--card-w) * .1); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .14); }
.drop-ok { outline: 3px solid #fecf40; outline-offset: 3px; border-radius: calc(var(--card-w) * .1); }

.card { position: absolute; top: 0; left: 0; display: block; width: var(--card-w); height: var(--card-h); padding: 0; border: 0; border-radius: calc(var(--card-w) * .1); background: #fff; color: #1b2240; box-shadow: 0 1px 0 rgb(0 0 0 / .12), 0 2px 5px rgb(0 0 0 / .18); font-family: 'Roboto Condensed', sans-serif; text-align: left; cursor: pointer; transition: transform .12s; }
.card.red { color: #d62f3a; }
.card .corner { position: absolute; top: 5%; left: 8%; display: flex; align-items: baseline; gap: 1px; font-size: calc(var(--card-w) * .25); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.card .corner small { font-size: calc(var(--card-w) * .22); }
.card .corner.end { top: auto; right: 8%; bottom: 5%; left: auto; transform: rotate(180deg); }
.card .pip { position: absolute; top: 50%; left: 50%; font-size: calc(var(--card-w) * .48); line-height: 1; transform: translate(-50%, -42%); }
.card.back { background: repeating-linear-gradient(45deg, #2f6fe0 0 6px, #2a61c8 6px 12px); box-shadow: inset 0 0 0 3px #fff, 0 2px 5px rgb(0 0 0 / .18); cursor: default; }
.card.back > * { display: none; }
.card:focus-visible { outline: 3px solid #fecf40; outline-offset: 2px; z-index: 1; }
.card.lifted { visibility: hidden; }
.card.hint { animation: card-hint .9s ease-in-out 2; }
@keyframes card-hint { 50% { box-shadow: 0 0 0 4px #fecf40, 0 2px 5px rgb(0 0 0 / .18); transform: translateY(-4px); } }
@media (hover: hover) { .card:not(.back):hover { transform: translateY(-2px); } }

.drag-stack { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .3)); }
.drag-stack .card { transition: none; }

.auto-button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #fecf40; color: var(--ink); font: 700 16px 'Fredoka', sans-serif; cursor: pointer; animation: card-hint 1.2s ease-in-out infinite; }
body[data-game='soliter'] .goal-equation { gap: 8px; flex-wrap: nowrap; }
body[data-game='soliter'] .goal-equation b { min-width: 54px; padding: 0 8px; font-family: 'Roboto Condensed', sans-serif; font-size: 26px; }
body[data-game='soliter'] .goal-equation b.goal-light { color: #1b2240; }
body[data-game='soliter'] .goal-equation b.goal-red { color: #d62f3a; }

@media (max-width: 760px) {
  .card-table { --gap: 5px; row-gap: 12px; }
  .card .corner { top: 4%; left: 7%; }
  .card .corner.end { display: none; }
  .card .pip { top: auto; bottom: 6%; left: 50%; font-size: calc(var(--card-w) * .5); transform: translateX(-50%); }
  .card.back { background: repeating-linear-gradient(45deg, #2f6fe0 0 4px, #2a61c8 4px 8px); box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgb(0 0 0 / .18); }
  .auto-button { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .card, .auto-button, .card.hint { transition: none; animation: none; } }