/* 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;
}

/* (The desktop-fixed-size `.card` block that used to live here is dead:
   `_overrides.css:.card { width: clamp(...) !important; height: clamp(...) !important; }`
   wins via `!important` at every viewport ≥768 px. Removed to drop the
   confusion.) */

/* Hover-only effects gated behind `(hover: hover) and (pointer: fine)`
   so they only fire on mouse devices (audit P0-5). On a touch device,
   `:hover` "sticks" after release and the card stays lifted -12 px
   until the user taps somewhere else — looks broken to a player who
   tapped a card and changed their mind. Selection feedback for touch
   uses `.selected` / `.capture-selected` instead, which JS toggles on
   tap. */
@media (hover: hover) and (pointer: fine) {
  .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[role="button"]:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: 3px;
}

.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);
}

/* Card SVG load failure fallback. card-renderer.js swaps in a
   .card-fallback div when /static/images/cards/<id>.svg fails to load,
   so the player keeps reading a real card identity (value + Arabic
   suit name) instead of a blank white rectangle that looks like a
   fake card or a state desync. The card body retains its existing
   ivory background + border, so this fallback inherits those. */
.card-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Reem Kufi', sans-serif;
  color: #4a2818;
  text-align: center;
  pointer-events: none;
}
.card-fallback-value {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  line-height: 1;
}
.card-fallback-suit {
  font-size: clamp(11px, 2.4vw, 14px);
  font-weight: 600;
  opacity: 0.78;
}