/**
 * Solitaire Classic Stylesheet - Popyca Games
 *
 * Warm cream, slate, and terracotta visual aesthetic.
 * Mobile-first responsive card table with touch gestures.
 */

:root {
  --sol-table-bg: #ece5d8;
  --sol-card-bg: #ffffff;
  --sol-card-border: #d8cebe;
  --sol-card-back: #e26938;
  --sol-card-back-pattern: #cb5626;

  --sol-red: #e26938;
  --sol-black: #1f1d1a;

  /* Card dimensions: responsive to viewport */
  --sol-card-width: min(12.5vw, 68px);
  --sol-card-height: calc(var(--sol-card-width) * 1.4);
  --sol-card-radius: 6px;
  --sol-tableau-offset: min(3.8vw, 22px);
}

@media (min-width: 640px) {
  :root {
    --sol-card-width: 68px;
    --sol-tableau-offset: 24px;
  }
}

/* Solitaire Stage Container */
.solitaire-stage {
  width: 100%;
  max-width: 620px;
  background: var(--sol-table-bg);
  border-radius: 14px;
  padding: 12px 10px 32px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.05);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 0 auto;
}

/* Upper Deck: Stock, Waste, and 4 Foundations */
.sol-upper-deck {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 8px;
}

.sol-stock-waste-group {
  display: flex;
  gap: 8px;
}

.sol-foundations-group {
  display: flex;
  gap: 8px;
}

/* Slot Placeholders */
.sol-slot {
  width: var(--sol-card-width);
  height: var(--sol-card-height);
  border: 1.5px dashed #cbbeab;
  border-radius: var(--sol-card-radius);
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89a87;
  font-size: 18px;
}

.sol-slot.stock-slot {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.02);
}

.sol-slot.stock-slot:hover {
  border-color: var(--color-primary);
}

.stock-reload-icon {
  font-size: 22px;
  color: #a89a87;
}

/* Lower Deck: 7 Tableau Columns */
.sol-tableau {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  min-height: 280px;
}

.sol-column {
  min-height: calc(var(--sol-card-height) + 120px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sol-column-slot {
  width: var(--sol-card-width);
  height: var(--sol-card-height);
  border: 1.5px dashed #cbbeab;
  border-radius: var(--sol-card-radius);
  position: absolute;
  top: 0;
}

/* Playing Card Component */
.sol-card {
  width: var(--sol-card-width);
  height: var(--sol-card-height);
  background: var(--sol-card-bg);
  border: 1px solid var(--sol-card-border);
  border-radius: var(--sol-card-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
}

.sol-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.sol-card.selected {
  outline: 2.5px solid var(--color-primary);
  outline-offset: -1px;
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(226, 105, 56, 0.3);
  z-index: 50 !important;
}

/* Card Face Content */
.sol-card.face-up {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 5px;
}

.sol-card.suit-red {
  color: var(--sol-red);
}

.sol-card.suit-black {
  color: var(--sol-black);
}

.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-corner.corner-top-left {
  align-self: flex-start;
}

.card-corner.corner-bottom-right {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card-rank {
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
}

.card-suit-mini {
  font-size: 10px;
  line-height: 1;
}

.card-center-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  opacity: 0.85;
}

/* Card Back Design */
.sol-card.face-down {
  background: var(--sol-card-back);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: default;
}

.sol-card.face-down::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--sol-card-back),
    var(--sol-card-back) 4px,
    var(--sol-card-back-pattern) 4px,
    var(--sol-card-back-pattern) 8px
  );
}

/* Win Celebration Modal */
.win-celebration-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-charcoal);
  margin-bottom: 8px;
}