@import '/css/global.css';

/* =============================================================================
   Klondike Solitaire — casino green felt table, white cards, alternating
   red/black suits.  The board is landscape so we override the shared square
   aspect-ratio and let it size itself from its content (board grows as
   columns deepen). Overflow on the shell is exposed so the overlay covers the
   full grown height.
   ============================================================================= */

/* Allow the shell to grow vertically with the tableau. */
.game-shell {
  overflow: visible;
}

.solitaire-board {
  aspect-ratio: auto;
  background: var(--sol-felt);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--border-radius-md);
  user-select: none;
  touch-action: manipulation;
}

/* ---- Top row: 7 equal-width slots ---- */
.sol-top {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  flex-shrink: 0;
}

/* ---- Tableau ---- */
.sol-tableau {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: start;
}

/* ---- Slot (stock / waste / foundation) ---- */
.sol-slot {
  width: var(--sol-cw, 80px);
  height: var(--sol-ch, 112px);
  border-radius: var(--border-radius-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sol-slot-bg);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow: visible;
  cursor: pointer;
}

/* ---- Column ---- */
.sol-col {
  display: flex;
  flex-direction: column;
  min-height: var(--sol-ch, 112px);
  cursor: pointer;
  /* Outline a droppable empty column */
  border-radius: var(--border-radius-sm);
  border: 1.5px solid transparent;
}

/* ---- Playing cards ----
   The frame, red/black ink, back hatch and label geometry come from the shared
   playing-cards component (.pc-card / .pc-corner / .pc-pip / .pc-back). Only
   Solitaire's interactions, felt-specific bits and responsive scale live here. */
.sol-card {
  cursor: pointer;
  transition: transform 0.1s ease;
}

/* Face-up card */
.sol-card.is-face-up {
  background: var(--sol-card-bg);
}

/* Face-down card: the shared .pc-back paints the blue hatch; only the cursor
   differs from a playable card. */
.sol-card.is-face-down {
  cursor: default;
}

/* Selected card(s): gold outline */
.sol-card.is-selected {
  outline: 2.5px solid var(--sol-select);
  outline-offset: 1px;
  transform: translateY(-3px);
  z-index: 5;
}

/* ---- Card label scale (geometry is shared via .pc-corner / .pc-pip) ---- */
.sol-card-tl,
.sol-card-br {
  font-size: clamp(0.6rem, 1.5cqw, 0.85rem);
}

.sol-card-center {
  font-size: clamp(1rem, 3.5cqw, 2rem);
  opacity: 0.75;
}

/* ---- Foundation suit label (when empty) ---- */
.sol-suit-label {
  font-size: clamp(1rem, 3cqw, 1.6rem);
  opacity: 0.45;
  color: var(--white-color);
  pointer-events: none;
}

/* ---- Stock count badge ---- */
.sol-stock-count {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 1px 5px;
  pointer-events: none;
}

/* ---- Recycle symbol (empty stock) ---- */
.sol-recycle {
  font-size: clamp(1.4rem, 4cqw, 2.2rem);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* ---- Hover effects ---- */
.sol-stock:hover .sol-card.is-face-down {
  transform: scale(1.03);
}

.sol-col .sol-card.is-face-up:not(.is-selected):hover {
  transform: translateY(-2px);
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .solitaire-board {
    padding: 6px;
    gap: 6px;
  }

  .sol-top,
  .sol-tableau {
    gap: 3px;
  }
}