/* =========================================
   TCG CARD CONTAINER (The Flip Wrapper)
   ========================================= */
.tcg-card {
  perspective: 1000px; /* Essential for 3D flip */
  width: 100%;
  aspect-ratio: 2.5 / 3.5; /* Force Poker Card Ratio */
  position: relative;
  cursor: pointer;
  z-index: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: block; /* Ensure it takes up space */
}

/* The inner container that actually flips */
.tcg-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Hover Lift Effect (Desktop Only) */
@media (hover: hover) {
  .tcg-card:hover .tcg-inner {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    z-index: 10;
  }
  
  /* When flipped, hover should still lift but maintain rotation */
  .tcg-card.flipped:hover .tcg-inner {
    transform: translateY(-5px) rotateY(180deg);
  }
}

/* Flipped State (Applied by JS) */
.tcg-card.flipped .tcg-inner {
  transform: rotateY(180deg);
}

/* Disable flip behavior if specified */
.tcg-card.no-flip { cursor: default; }
.tcg-card.no-flip .tcg-inner { transform: none !important; }


/* =========================================
   CARD FACES (Front & Back)
   ========================================= */
.tcg-face {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  backface-visibility: hidden; /* Hides the back when facing away */
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
}

.tcg-front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* Back Face needs to be rotated 180deg initially */
.tcg-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

/* =========================================
   THE GAME CARD DESIGN (Inner Content)
   ========================================= */
.game-card {
  width: 100%; 
  height: 100%;
  position: relative;
  background: #151515;
  color: #fff;
  border: 4px solid #444; /* Default Border */
  box-sizing: border-box; /* Includes border in width */
  display: flex;
  flex-direction: column;
}

/* Card Image - Crucial Fixes */
.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills container, cropping if needed */
  object-position: center top; /* Focus on player face usually at top */
  position: absolute;
  top: 0; 
  left: 0; 
  z-index: 1;
  transition: transform 0.3s ease;
  background-color: #222; /* Fallback color */
}

/* Zoom image slightly on hover */
.tcg-card:hover .card-image {
  transform: scale(1.05);
}

/* UI Overlay (Gradient at bottom for text) */
.card-ui {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.4) 0%, 
    transparent 30%, 
    transparent 60%, 
    rgba(0,0,0,0.95) 100%
  );
  pointer-events: none; /* Let clicks pass through */
}

/* Overall Rating Badge */
.card-ovr {
  position: absolute; 
  top: 6px; 
  left: 6px;
  width: 32px; 
  height: 32px;
  background: rgba(0,0,0,0.85);
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-weight: 900; 
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  z-index: 5;
  color: #fff;
}

/* Text Info Area */
.card-info {
  position: absolute; 
  bottom: 8px; 
  left: 5px; 
  right: 5px;
  text-align: center;
}

.card-name { 
  font-weight: 900; 
  text-transform: uppercase; 
  font-size: 13px; 
  letter-spacing: 0.5px; 
  text-shadow: 0 2px 4px #000; 
  line-height: 1.1;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta { 
  font-size: 9px; 
  color: #ddd; 
  text-transform: uppercase; 
  font-weight: 600;
  text-shadow: 0 1px 2px #000;
}

/* =========================================
   RARITY STYLES
   ========================================= */

.game-card.common { border-color: #7f8c8d; }
.game-card.common .card-ovr { border-color: #7f8c8d; color: #bdc3c7; }

.game-card.rare { border-color: #3498db; }
.game-card.rare .card-ovr { border-color: #2980b9; color: #3498db; }

.game-card.super_rare { border-color: #9b59b6; }
.game-card.super_rare .card-ovr { border-color: #8e44ad; color: #9b59b6; }

.game-card.epic { border-color: #e91e63; }
.game-card.epic .card-ovr { border-color: #c2185b; color: #e91e63; }

.game-card.legendary { 
  border-color: #f1c40f; 
  box-shadow: 0 0 15px rgba(241,196,15,0.3);
}
.game-card.legendary .card-ovr { 
  border-color: #f39c12; 
  color: #f1c40f; 
  background: #000;
  box-shadow: 0 0 10px rgba(241,196,15,0.5);
}

/* =========================================
   SPECIAL EFFECTS
   ========================================= */

/* Foil Shine Animation */
.tcg-card.is-foil .game-card {
  position: relative;
  overflow: hidden;
}
.tcg-card.is-foil .foil-shine {
  content: "";
  position: absolute; 
  top: -100%; 
  left: -100%; 
  width: 300%; 
  height: 300%;
  background: linear-gradient(
    45deg, 
    transparent 40%, 
    rgba(255, 255, 255, 0.25) 45%, 
    rgba(255, 255, 255, 0.5) 50%, 
    rgba(255, 255, 255, 0.25) 55%, 
    transparent 60%
  );
  animation: foilMove 4s infinite linear;
  pointer-events: none;
  z-index: 3;
}

@keyframes foilMove { 
  0% { transform: translate(0, 0); } 
  100% { transform: translate(50px, 50px); } 
}

/* Status Badges Stack (Locked, Injured, etc) */
.card-status-stack .badge {
  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 1px #000;
  font-weight: 800;
  display: inline-block;
  white-space: nowrap;
}

/* 3D Glare Effect (Requires JS to move --glare-x variables, optional) */
.game-card::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 4;
}
.tcg-card:hover .game-card::after { opacity: 1; }

/* Faded state */
.tcg-card.faded { 
  opacity: 0.4; 
  filter: grayscale(1); 
  cursor: default; 
}
.tcg-card.faded:hover .tcg-inner { 
  transform: none; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}