/* Klondike Draw 3 Solitaire Styles */

.klondike-root {
  width: 100%;
  height: 100%;
  padding: 8px 8px 16px 8px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  --tableau-columns: 7;
  --column-gap: 1.5rem;
  --card-width: calc(
    (70vw - (var(--tableau-columns) - 1) * var(--column-gap))
    / var(--tableau-columns)
  );
  --card-height: calc(var(--card-width) * 1.4);
}

.klondike-game-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
/*  max-width: 800px;
  margin: 0 auto; */
  padding: 8px 12px;
}

/* Top row: Stock/Waste and Foundations */
.klondike-top-row {
  display: grid;  /* was: flex */
  grid-template-columns: repeat(var(--tableau-columns), var(--card-width));
  column-gap: var(--column-gap);
  align-items: flex-start;
  height: var(--card-height);
  margin-bottom: 1.5rem;
}

.klondike-stock-waste {
  display: flex;
  gap: var(--column-gap);
  grid-column: 1 / span 2;   /* new */
  margin-right: 0;           /* remove the old margin-right calc */
}

.klondike-foundations {
  display: flex;
  gap: var(--column-gap);
  grid-column: 4 / span 4;   /* new */
  justify-content: flex-start;
}

/* Card piles styling */
.klondike-stock-pile,
.klondike-waste-pile {
  width: var(--card-width);
  height: var(--card-height);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.klondike-foundation {
  width: var(--card-width);
  height: var(--card-height);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  cursor: default;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.klondike-stock-pile:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}



.klondike-waste-pile {
  cursor: default;
  position: relative;
  overflow: visible;
}

/* Tableau columns */
.klondike-tableau {
  display: flex;
  gap: var(--column-gap);
  flex: 1;
  min-height: 300px;
  justify-content: flex-start;
}

.klondike-tableau-column {
 /* flex: 1; */
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  min-height: 120px;
  position: relative;
  transition: all 0.15s ease;
}

/* Card styling with two-face 3D structure */
.klondike-card {
  width: var(--card-width);
  height: var(--card-height);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  position: relative;
  perspective: 1000px;
}

/* Inner wrapper that rotates to show front or back */
.klondike-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-in-out;
  /* Default state (face-down): rotated 180deg to show back */
  transform: rotateY(180deg);
}

/* When card is face-up, rotate to 0deg to show front */
.klondike-card.is-face-up .klondike-card-inner {
  transform: rotateY(0deg);
}

/* Both faces positioned absolutely, full size */
.klondike-card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Front face (rank/suit) - starts at 0deg */
.klondike-card-face-front {
  transform: rotateY(0deg);
  background: #ffffff;
  color: #333;
}

/* Back face (pattern) - starts at 180deg */
.klondike-card-face-back {
  transform: rotateY(180deg);
  background: #817a7b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.klondike-card-back-pattern {
  font-size: 40px;
  opacity: 0.3;
}

/* Hover effects only on face-up cards, don't interfere with transform */
.klondike-card.is-face-up .klondike-card-face-front:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.klondike-card.is-face-up:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.klondike-card-active {
  border-color: #4CAF50;
}

.klondike-card-active .klondike-card-face {
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}

.klondike-card-content {
  width: 100%;
  height: 100%;
  padding: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.klondike-card-content.red {
  color: #d32f2f;
}

.klondike-card-content.black {
  color: #333333;
}

.klondike-card-rank {
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.klondike-card-suit {
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Card placeholders */
.klondike-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 500;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
}

/* Foundation placeholders have bigger icons */
.klondike-foundation .klondike-card-placeholder {
  font-size: 24px;
  border: none;
  background: transparent;
}

.klondike-empty-tableau {
  border: none !important;
  background: transparent !important;
  min-height: 95px;
  font-size: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .klondike-root {
    padding: 8px;
    --column-gap: 1rem; /* Smaller gaps on tablets */
  }
  
  .klondike-game-area {
    gap: 16px;
  }
  
  .klondike-card-suit {
    font-size: 14px;
  }
  
  .klondike-card-rank {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .klondike-root {
    --column-gap: 0.5rem; /* Even smaller gaps on mobile */
  }
  
  .klondike-top-row {
    flex-direction: column;
    gap: 12px;
    height: auto;
  }
  
  .klondike-stock-waste {
    align-self: flex-start;
  }
  
  .klondike-foundations {
    align-self: flex-end;
  }
  
  .klondike-card-suit {
    font-size: 12px;
  }
  
  .klondike-card-rank {
    font-size: 8px;
  }
}

/* Drag and Drop Styles */
.klondike-card-selected {
  outline: none;
  box-shadow: none;
}

.drag-over {
  background: transparent !important;
  border: none !important;
}

/* Make cards draggable */
.klondike-card.klondike-card-face-up[draggable="true"]:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Floating drag stack styles */
.klondike-floating-drag-stack {
  opacity: 0.8;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.klondike-drag-stack-card {
  transform: rotate(2deg);
  transition: none;
}

.klondike-card-hidden-for-drag {
  transition: opacity 0.1s ease;
}

/* Hint highlight styles
   - Source: the card the player should pick up.
   - Destination: the pile the player should drop on.
   * These are purely visual and controlled from the engine (requestHint). */
.klondike-hint-source {
  /* Make the suggested card stand out clearly above others */
  outline: 3px solid rgba(255, 255, 0, 0.9); /* strong yellow outline */
  outline-offset: 2px;
  transform: translateY(-3px) scale(1.03);
  z-index: 5;
  animation: klondike-hint-pulse-source 0.9s ease-in-out 0s 2 alternate;
}

.klondike-hint-dest {
  /* Highlight the target pile/card without changing its layout */
  box-shadow: 0 0 0 3px rgba(173, 216, 230, 0.7); /* soft light-blue ring */
  border-color: rgba(255, 255, 255, 0.7);
  animation: klondike-hint-pulse-dest 0.9s ease-in-out 0s 2 alternate;
}

/* Keep hint styles lightweight on very small screens */
@media (max-width: 480px) {
  .klondike-hint-source {
    outline-width: 2px;
    transform: translateY(-2px) scale(1.02);
  }

  .klondike-hint-dest {
    box-shadow: 0 0 0 2px rgba(173, 216, 230, 0.7);
  }
}

/* Subtle pulse animations to draw the eye without being annoying */
@keyframes klondike-hint-pulse-source {
  0% {
    box-shadow: 0 0 4px rgba(255, 255, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 255, 0, 1);
  }
  100% {
    box-shadow: 0 0 4px rgba(255, 255, 0, 0.7);
  }
}

@keyframes klondike-hint-pulse-dest {
  0% {
    box-shadow: 0 0 0 3px rgba(173, 216, 230, 0.6);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(173, 216, 230, 1);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(173, 216, 230, 0.6);
  }
}

/* No-move feedback for waste pile */
.klondike-no-move {
  animation: shake 0.15s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Card animation for smooth slide-in (not used for reveals) */
@keyframes klondike-card-slide-to-target {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Note: pop-in animations removed - reveals now use only flip rotation */

/* Card piles get a subtle transition when updated */
.klondike-stock-pile,
.klondike-waste-pile,
.klondike-foundation {
  transition: all 0.2s ease;
}

/* Tableau columns smoothly transition on card addition */
.klondike-tableau-column {
  transition: all 0.15s ease;
}

/* Card movement animations */
@keyframes klondike-card-move-to-foundation {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes klondike-card-move-to-tableau {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes klondike-card-move-to-waste {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


.klondike-card-moving {
  position: fixed !important;
  z-index: 9999 !important;
  transition: all 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}