/* Playing card styling. */

.card {
  position: relative;
  width: 80px;
  height: 120px;
  background: linear-gradient(145deg, #FFF8E7, #F5EBD0);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.5);
  font-family: 'Cairo', sans-serif;
  user-select: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  overflow: hidden;
}

/* Image-based card art (professional SVGs from assets) */
.card.card-art { padding: 0; }
.card.card-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
}

@media (min-width: 768px) {
  .card { width: 100px; height: 150px; padding: 8px; }
}

.card:hover { transform: translateY(-12px); box-shadow: 0 12px 25px -4px rgba(0,0,0,0.6); }
.card.selected { transform: translateY(-22px); box-shadow: 0 0 24px rgba(201, 169, 97, 0.7); }
.card.selectable { outline: 2px dashed rgba(201, 169, 97, 0.7); outline-offset: -2px; }
.card.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.card-corner.top-right { align-self: flex-end; }
.card-center {
  font-size: 36px;
  text-align: center;
  font-weight: 700;
  margin: auto;
}

.card-figure {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.card-figure svg { display: block; max-width: 100%; max-height: 100%; }
.card-name {
  text-align: center;
  font-size: 9px;
  color: rgba(0,0,0,0.55);
  font-family: 'Reem Kufi', sans-serif;
}

/* Hayya — 7 of diamonds */
.card.hayya {
  background: linear-gradient(145deg, #FFF6D6, #FFE8A0);
  border: 2px solid #C9A961;
  box-shadow:
    0 0 18px rgba(255, 215, 0, 0.7),
    0 0 30px rgba(255, 215, 0, 0.3),
    inset 0 0 10px rgba(255, 215, 0, 0.4);
  animation: hayyaPulse 2.4s ease-in-out infinite;
}
.card.hayya .card-name::before { content: '🐍 '; }

@keyframes hayyaPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.3); }
  50%      { box-shadow: 0 0 28px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.5); }
}

/* Card back (hidden cards) */
.card.hidden-card {
  background:
    repeating-linear-gradient(45deg,
      #1B4965 0px, #1B4965 6px,
      #C9A961 6px, #C9A961 7px),
    #1B4965;
  border: 2px solid #C9A961;
}
.card.hidden-card > * { display: none; }
.card.hidden-card::after {
  content: '★';
  display: block;
  margin: auto;
  font-size: 28px;
  color: #C9A961;
  text-align: center;
}

/* Captured pile — small stack */
.captured-pile-card {
  position: absolute;
  width: 50px;
  height: 75px;
  background: rgba(201, 169, 97, 0.4);
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.3);
}