/* Solitaire (Klondike) — panels, buttons and status come from shared/games.css. */

.sol-layout { grid-template-columns: minmax(0, 760px) minmax(260px, 1fr); }

@media (max-width: 991px) {
  .sol-layout { grid-template-columns: 1fr; }
}

.sol-table {
  width: 100%;
  max-width: 760px;
  padding: 12px;
  background: var(--gm-surface, #1b2740);
  border: 1px solid var(--gm-line, rgba(255, 255, 255, 0.09));
  border-radius: var(--gm-radius, 12px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.sol-board {
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sol-slot {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 2px dashed var(--gm-line-2, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  background: var(--gm-bg-2, rgba(0, 0, 0, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-muted, rgba(242, 238, 230, 0.66));
}

.sol-slot svg { width: 38%; height: auto; opacity: 0.55; fill: currentColor; }
.sol-slot.is-stock { cursor: pointer; }
.sol-slot.is-stock:hover { border-color: var(--gm-accent-bright, #e0584a); }

.sol-card {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 5px, transparent 5px 10px),
    var(--gm-accent, #c0392b);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
  will-change: transform;
}

.sol-card.is-up {
  background: var(--gm-piece-w, #f7f3ea);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.sol-card.is-back { cursor: pointer; }
.sol-card.is-drag { transition: none; cursor: grabbing; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.22); }
.sol-card.is-nudge { animation: sol-nudge 0.3s ease; }

.sol-card:focus-visible {
  outline: 3px solid var(--gm-accent-bright, #e0584a);
  outline-offset: 1px;
}

.sol-card svg { display: none; width: 100%; height: 100%; pointer-events: none; }
.sol-card.is-up svg { display: block; }

.sol-f { fill: var(--gm-piece-b, #14161c); }
.sol-f.r { fill: var(--gm-card-red, #b8332b); }
.sol-rk { font: 700 15px/1 var(--gm-body, "DM Sans", system-ui, sans-serif); }
.sol-fr { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.55; }
.sol-f .sol-fr { stroke: var(--gm-piece-b, #14161c); }
.sol-f.r .sol-fr { stroke: var(--gm-card-red, #b8332b); }

.sol-win {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: var(--gm-surface, rgba(15, 21, 32, 0.9));
  border-radius: 10px;
}

.sol-win.is-on { display: flex; animation: sol-fade 0.8s ease; }
.sol-win h2 { margin: 0; font-family: var(--gm-display, "Fraunces", Georgia, serif); font-weight: 500; font-size: clamp(1.4rem, 4vw, 2rem); }
.sol-win p { margin: 0 0 8px; color: var(--gm-muted, rgba(242, 238, 230, 0.66)); }

@keyframes sol-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sol-nudge {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -5px; }
  75% { margin-left: 5px; }
}

.gm-seg button, .gm-actions .gm-btn { min-height: 44px; }

@media (max-width: 480px) {
  .sol-table { padding: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-card { transition: none; }
  .sol-card.is-nudge, .sol-win.is-on { animation: none; }
}