/* Playing card component - HTML/CSS, large touch targets */

.ab-playing-card {
  position: relative;
  width: var(--ab-card-w, 3.2rem);
  height: var(--ab-card-h, 4.48rem);
  flex: 0 0 var(--ab-card-w, 3.2rem);
  border-radius: 0.45rem;
  border: 2px solid #c8c2b8;
  background: var(--ab-card-face, #fffcf7);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  padding: 0.18rem 0.2rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
  touch-action: manipulation;
}

.ab-playing-card__rank {
  align-self: flex-start;
  text-align: left;
  font-size: clamp(0.78rem, 2.1cqi, 1.05rem);
}

.ab-playing-card__suit {
  font-size: clamp(0.9rem, 2.4cqi, 1.2rem);
  align-self: center;
}

.ab-playing-card__corner {
  font-size: clamp(0.68rem, 1.8cqi, 0.88rem);
  align-self: flex-end;
  transform: rotate(180deg);
}

/* Four-colour suits - matches the site-wide palette (lesson-designed.css) */
.ab-playing-card--spades {
  color: #0645ad;
}

.ab-playing-card--hearts {
  color: #e53935;
}

.ab-playing-card--diamonds {
  color: #f9a825;
}

.ab-playing-card--clubs {
  color: #2e7d32;
}

.ab-playing-card--face-down {
  background:
    repeating-linear-gradient(
      135deg,
      #1C5F51 0 6px,
      #3a6e58 6px 12px
    );
  color: transparent;
  border-color: #1e3d31;
}

.ab-playing-card--face-down .ab-playing-card__rank,
.ab-playing-card--face-down .ab-playing-card__suit,
.ab-playing-card--face-down .ab-playing-card__corner {
  visibility: hidden;
}

.ab-playing-card--selectable {
  cursor: pointer;
}

.ab-playing-card--selectable:hover,
.ab-playing-card--selectable:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
  outline: none;
  border-color: #c45c26;
}

.ab-playing-card--selected {
  transform: translateY(-10px);
  border-color: #ffe08a;
  box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.85), 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ab-playing-card--playable {
  box-shadow: 0 0 0 3px rgba(255, 224, 138, 0.7), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ab-playing-card--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ab-playing-card--correct {
  border-color: #1f6b4a;
  box-shadow: 0 0 0 3px rgba(31, 107, 74, 0.55);
}

.ab-playing-card--incorrect {
  border-color: #c45c26;
  box-shadow: 0 0 0 3px rgba(196, 92, 38, 0.45);
  animation: ab-card-shake 0.35s ease;
}

.ab-playing-card--to-table {
  animation: ab-card-to-table 0.45s ease forwards;
}

.ab-playing-card--winner {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px #ffe08a, 0 10px 20px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

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

@keyframes ab-card-to-table {
  from { transform: translateY(40px) scale(0.95); opacity: 0.6; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-playing-card--incorrect {
    animation: none;
  }
  .ab-playing-card--to-table {
    animation: none;
  }
}

button.ab-playing-card {
  font-family: inherit;
  appearance: none;
}