/* ---- Card Base ---- */
.card {
  width: 108px;
  height: 156px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  scroll-snap-align: center;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow:
    0 2px 8px var(--card-shadow),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  overflow: hidden;
  background-color: var(--bg-light);
}

/* Art-based cards */
.card.card-art {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(255,255,255,0.2);
}

/* Foil shine effect */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .card.hand-card:hover::before,
  .card.selected::before {
    opacity: 1;
    animation: shineSwipe 0.6s ease forwards;
  }
}

@keyframes shineSwipe {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Skull King continuous shimmer */
@media (prefers-reduced-motion: no-preference) {
  .card.type-skull_king::before {
    opacity: 1;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(212,168,67,0.12) 45%,
      rgba(212,168,67,0.25) 50%,
      rgba(212,168,67,0.12) 55%,
      transparent 70%
    );
    animation: skullShimmer 3s ease-in-out infinite;
  }
}

@keyframes skullShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.card > * {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

/* ---- Suit Colors (fallback if no art loads) ---- */
.card.suit-yellow:not(.card-art) {
  background: linear-gradient(135deg, #e6c229, #c4a000);
  color: #3a2e00;
  border-color: #f0d860;
}

.card.suit-blue:not(.card-art) {
  background: linear-gradient(135deg, #2980b9, #1a5276);
  color: #e0f0ff;
  border-color: #5dade2;
}

.card.suit-red:not(.card-art) {
  background: linear-gradient(135deg, #c0392b, #922b21);
  color: #ffe0dd;
  border-color: #e74c3c;
}

.card.suit-black:not(.card-art) {
  background: linear-gradient(135deg, #2c3e50, #1a252f);
  color: #e0e0e0;
  border-color: #4a6fa5;
}

/* ---- Special Card Fallbacks ---- */
.card.type-escape:not(.card-art) {
  background: linear-gradient(135deg, #5d6d7e, #3d4e5e);
  color: #d0d8e0;
  border-color: #7f8c8d;
}

.card.type-pirate:not(.card-art) {
  background: linear-gradient(135deg, #8b1a1a, #5c0e0e);
  color: #ffd4cc;
  border-color: #c0392b;
}

.card.type-skull_king:not(.card-art) {
  background: linear-gradient(135deg, #1a1a2e, #0d0d1a);
  color: #ffd700;
  border-color: #d4a843;
}

.card.type-mermaid:not(.card-art) {
  background: linear-gradient(135deg, #1abc9c, #0e6655);
  color: #e0fff8;
  border-color: #48c9b0;
}

.card.type-tigress:not(.card-art) {
  background: linear-gradient(135deg, #8e44ad, #5b2c6f);
  color: #f0ddf8;
  border-color: #bb8fce;
}

.card.type-kraken:not(.card-art) {
  background: linear-gradient(135deg, #3a0a2a, #1a0515);
  color: #ff66aa;
  border-color: #6a1a4a;
}

.card.type-white_whale:not(.card-art) {
  background: linear-gradient(135deg, #2a5a6a, #1a3a4a);
  color: #88ccdd;
  border-color: #4a8a9a;
}

.card.type-loot:not(.card-art) {
  background: linear-gradient(135deg, #8a7a1a, #5a4a0a);
  color: #ffd700;
  border-color: #bba030;
}

/* Art card border tints */
.card.card-art.suit-yellow { border-color: #f0d860; }
.card.card-art.suit-blue { border-color: #5d8fbf; }
.card.card-art.suit-red { border-color: #4a8a5a; }
.card.card-art.suit-black { border-color: #8b3a3a; }
.card.card-art.type-skull_king {
  border-color: #d4a843;
  box-shadow: 0 2px 12px rgba(212, 168, 67, 0.3),
    inset 0 1px 0 rgba(212,168,67,0.15);
}
.card.card-art.type-mermaid { border-color: #48c9b0; }
.card.card-art.type-pirate { border-color: #c0392b; }
.card.card-art.type-tigress { border-color: #d4a060; }
.card.card-art.type-escape { border-color: #8faaba; }
.card.card-art.type-kraken { border-color: #6a1a4a; }
.card.card-art.type-white_whale { border-color: #4a8a9a; }
.card.card-art.type-loot { border-color: #bba030; }

/* Special card hover glow */
@media (prefers-reduced-motion: no-preference) {
  .card.type-skull_king.hand-card:not(.invalid):hover {
    box-shadow: 0 4px 20px rgba(212,168,67,0.5);
  }
  .card.type-mermaid.hand-card:not(.invalid):hover {
    box-shadow: 0 4px 20px rgba(26,188,156,0.4);
  }
  .card.type-pirate.hand-card:not(.invalid):hover {
    box-shadow: 0 4px 20px rgba(192,57,43,0.4);
  }
  .card.type-tigress.hand-card:not(.invalid):hover {
    box-shadow: 0 4px 20px rgba(142,68,173,0.4);
  }
}

/* ---- Card States ---- */
.card.selected {
  transform: translateY(-16px);
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.5);
  border-color: var(--accent) !important;
  z-index: 10;
}

.card.invalid {
  opacity: 0.35;
  pointer-events: none;
}

.card.hand-card {
  margin: 0 -19px;
  position: relative;
}

.card.hand-card:not(.selected):not(.invalid):hover {
  transform: translateY(-6px);
  z-index: 5;
}

/* Deal animation */
@media (prefers-reduced-motion: no-preference) {
  .card.deal-animate {
    animation: dealCard 0.35s ease both;
    animation-delay: calc(var(--i, 0) * 0.06s);
  }
}

@keyframes dealCard {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.7) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* ---- Trick display cards ---- */
.card.trick-card {
  width: 91px;
  height: 132px;
  cursor: default;
}

/* Trump label (for non-art fallback) */
.card.suit-black .trump-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 6px;
  background: #4a6fa5;
  padding: 1px 3px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  opacity: 0.8;
  z-index: 2;
}

/* ---- Preplay (queued card) ---- */
.card.preplay {
  transform: translateY(-10px);
  box-shadow: 0 6px 18px rgba(212,168,67,0.3);
  border-color: var(--accent) !important;
  z-index: 8;
}

@media (prefers-reduced-motion: no-preference) {
  .card.preplay {
    animation: preplayPulse 1.5s ease-in-out infinite;
  }
}

@keyframes preplayPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(212,168,67,0.3); }
  50% { box-shadow: 0 6px 24px rgba(212,168,67,0.5); }
}

@media (min-width: 600px) {
  .card {
    width: 115px;
    height: 166px;
  }
  .card.trick-card {
    width: 96px;
    height: 138px;
  }
}