/* PlayCalm Solitaire (Klondike). Reuses .sd-head / .levels / .side / .buddy / .bubble / .win / .confirm patterns. */
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; }
.sd-head h1 { font-size: 28px; }
.levels { display: flex; gap: 8px; flex-wrap: wrap; }
.levels .btn[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.sol-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 20px; margin: 16px 0; align-items: start; }
.sol-main { min-width: 0; }
.sol-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 10px; font-weight: 700; }
.sol-bar .sol-stats { display: flex; gap: 18px; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sol-bar .sol-stats span { display: inline-flex; gap: 6px; align-items: center; }
.sol-bar .sol-stats small { color: var(--text-2); font-weight: 600; }

/* the table */
.sol-table {
  --sol-felt: #DCE7DF; --sol-slot: rgba(36, 84, 69, .22);
  position: relative; direction: ltr; border-radius: 18px; background: var(--sol-felt);
  border: 2px solid var(--border); padding: var(--pad); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  overflow: hidden; transition: height .2s ease;
}
[data-theme="dark"] .sol-table { --sol-felt: #1E2A24; --sol-slot: rgba(220, 231, 223, .18); }
.sol-slot { position: absolute; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .09);
  border: 2px dashed var(--sol-slot); display: flex; align-items: center; justify-content: center; color: var(--sol-slot); }
.sol-slot svg { width: 46%; height: auto; }
.sol-a { font: 800 calc(var(--cw) * .34) "Plus Jakarta Sans", sans-serif; }
.sol-slot.stock { cursor: pointer; border-style: solid; background: transparent; padding: 0; font: inherit; color: var(--primary); }
.sol-slot:focus-visible, .sol-card:focus-visible { outline: 3px solid var(--focus, #E8931A); outline-offset: 2px; }
.sol-card { position: absolute; width: var(--cw); height: var(--ch); padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--cw) * .09); transition: left .16s ease-out, top .16s ease-out, transform .16s ease-out;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .14)) drop-shadow(0 2px 4px rgba(0, 0, 0, .10)); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.sol-card.drag { touch-action: none; }   /* only cards you can pick up stop the page from scrolling */
.sol-card svg { width: 100%; height: 100%; display: block; }
.sol-card.down { cursor: default; }
.sol-card.dragging { transition: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28)); }
.sol-card.sel { transform: translateY(-4px); }
.sol-card.sel::after, .sol-card.hint::after, .sol-slot.hint::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid #E8931A; pointer-events: none; }
.sol-card.hint::after, .sol-slot.hint::after { border-color: #2E8B57; animation: sol-pulse 1s ease-in-out 2; }
@keyframes sol-pulse { 50% { opacity: .25; } }
.sol-card.done { animation: sol-glow 1.4s ease-in-out 1; }
@keyframes sol-glow { 50% { filter: drop-shadow(0 0 10px rgba(232, 147, 26, .8)); } }
@media (prefers-reduced-motion: reduce) { .sol-card { transition: none; } .sol-card.hint::after, .sol-card.done { animation: none; } }

.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.actions .btn { min-height: 52px; }
.actions .wide { grid-column: 1 / -1; }
.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 200px; margin: 0 auto; width: 100%; }
.bubble { background: var(--raised); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 600; min-height: 56px; }
.win { text-align: center; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.win h2 { font-size: 24px; color: var(--primary); }
.stat { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.confirm { max-width: 420px; }
.confirm-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.confirm-body h2 { font-size: 22px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { min-height: 52px; }
@media (max-width: 1000px) { .sol-layout { grid-template-columns: 1fr; } .side { order: 2; } }
@media (max-width: 560px) { .main-sol { padding: 0 2px; } .sol-table { border-width: 1px; } .sd-head h1 { font-size: 24px; } .levels { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .sol-bar { padding: 8px 10px; } .sol-table { border-radius: 12px; } }