/* Create By Asking: Klondike solitaire (projects/solitaire). Cards are drawn with HTML and CSS. */
.sol { background: var(--screen); border-radius: 18px; padding: clamp(10px, 2.4vw, 24px); color: #F2ECFF; position: relative; }
.sol-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: clamp(10px, 2vw, 18px); }
.sol-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.sol-stat { background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 6px 12px; font-size: 0.75rem; color: #CBBFE8; display: grid; line-height: 1.2; min-width: 64px; }
.sol-stat b { font: 800 1.15rem/1.1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.sol-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sol-draw { display: inline-flex; background: rgba(255, 255, 255, 0.07); border-radius: 99px; padding: 3px; }
.sol-draw button { font: 700 0.85rem/1 var(--body); border: 0; background: none; color: #CBBFE8; padding: 8px 12px; border-radius: 99px; cursor: pointer; }
.sol-draw button[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.sol .btn { background: #FFC93C; color: #1C0F3F; }
.sol .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #F2ECFF; }
.sol .btn:disabled { opacity: 0.4; cursor: default; }

.sol-board { position: relative; width: 100%; max-width: 760px; margin: 0 auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.sol-slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * 0.1); border: 2px dashed rgba(255, 255, 255, 0.16); box-sizing: border-box; }
.sol-slot-found { border-style: solid; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
.sol-slot-found::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--cw) * 0.4)/1 var(--display); color: rgba(255, 255, 255, 0.13); }
.sol-slot-stock { cursor: pointer; }
.sol-slot-stock.sol-recycle::after { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--cw) * 0.5)/1 var(--body); color: rgba(255, 255, 255, 0.45); }
.sol-slot-waste { border-color: transparent; }

.sc { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); touch-action: none; cursor: default; transition: transform 0.2s ease; will-change: transform; }
.sc.up { cursor: grab; }
.sc.drag { transition: none; cursor: grabbing; }
.sol-still .sc, .sol-still .sol-slot { transition: none !important; }
.sc-in { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.1); }
.sc.drag .sc-in { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }
.sc.shake .sc-in { animation: sol-shake 0.3s; }
@keyframes sol-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.sc-front, .sc-back { position: absolute; inset: 0; border-radius: inherit; box-sizing: border-box; overflow: hidden; }
.sc-front { display: none; background: #FFFDF8; border: 1px solid #CFC6E2; color: #1C0F3F; }
.sc.red .sc-front { color: #D3123E; }
.sc.up .sc-front { display: block; }
.sc.up .sc-back { display: none; }
.sc-back { border: calc(var(--cw) * 0.06) solid #FFFDF8; background-color: #FF2E7E;
  background-image: radial-gradient(circle at 50% 50%, #FFC93C 0 calc(var(--cw) * 0.07), transparent calc(var(--cw) * 0.07 + 0.5px)),
    repeating-linear-gradient(45deg, rgba(28, 15, 63, 0.22) 0 calc(var(--cw) * 0.05), transparent 0 calc(var(--cw) * 0.12)),
    repeating-linear-gradient(-45deg, rgba(28, 15, 63, 0.22) 0 calc(var(--cw) * 0.05), transparent 0 calc(var(--cw) * 0.12)); }

.sc-idx { position: absolute; left: calc(var(--cw) * 0.07); top: calc(var(--cw) * 0.05); display: flex; align-items: center; gap: calc(var(--cw) * 0.02); font: 800 calc(var(--cw) * 0.29)/1 var(--display); letter-spacing: -0.04em; }
.sc-idx b { font-weight: 800; }
.sc-isuit { width: calc(var(--cw) * 0.25); height: calc(var(--cw) * 0.25); fill: currentColor; flex: none; }
.sc-idx2 { left: auto; top: auto; right: calc(var(--cw) * 0.07); bottom: calc(var(--cw) * 0.05); transform: rotate(180deg); }
.sc-mid { position: absolute; left: 0; right: 0; top: 34%; bottom: 14%; display: grid; place-items: center; align-content: center; }
.sc-pip { width: calc(var(--cw) * 0.56); height: calc(var(--cw) * 0.56); fill: currentColor; }
.sc-face-letter { font: 400 calc(var(--cw) * 0.6)/0.9 var(--brand); }
.sc-face-suit { width: calc(var(--cw) * 0.24); height: calc(var(--cw) * 0.24); fill: currentColor; margin-top: calc(var(--cw) * 0.02); }
@media (max-width: 520px) { .sc-idx2 { display: none; } .sc-mid { top: 38%; bottom: 8%; } }

.sol-win { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 8, 39, 0.72); border-radius: 18px; z-index: 3000; padding: 16px; text-align: center; }
.sol-win[hidden] { display: none; }
.sol-win > div { background: var(--screen); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 22px 24px; max-width: 340px; }
.sol-win h3 { font: 800 1.6rem/1.1 var(--display); margin: 0 0 8px; color: #FFC93C; }
.sol-win p { margin: 0 0 16px; color: #CBBFE8; }