/* CSS Custom Properties for Color Scheme */
:root {
  /* Card Colors */
  --red-joker: #dc2626;      /* red-600 */
  --black-joker: #1f2937;    /* gray-800 */
  --card-a: #3b82f6;         /* blue-500 */
  --card-2: #10b981;         /* emerald-500 */
  --card-3: #f59e0b;         /* amber-500 */
  --card-4: #8b5cf6;         /* violet-500 */
  --card-collapsed: #6b7280; /* gray-500 */
  --background: #f3f4f6;     /* gray-100 */
  
  /* Player Colors */
  --accent-red: #dc2626;     /* red-600 */
  --accent-blue: #3b82f6;    /* blue-500 */
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --card-text-size: 1.5rem;  /* 24px */
}

/* Base Styles and Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: var(--background);
  line-height: 1.6;
}

/* Typography Utilities */
.card-text {
  font-size: var(--card-text-size);
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Card Hover Effects */
.card {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

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

.card:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Player pawn styles */
.player-pawn {
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  z-index: 10;
}

.player-pawn.red {
  color: var(--accent-red);
}

.player-pawn.blue {
  color: var(--accent-blue);
}

/* Current player highlight */
.card.current-player {
  box-shadow: 0 0 0 3px var(--accent-blue);
  animation: pulse-highlight 2s infinite;
}

@keyframes pulse-highlight {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--accent-blue);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
  }
}