/* Procedural Card Art — generates unique visuals from entity data */
/* No images needed. Each entity gets a unique card based on color, category, rarity */

.card-art {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: var(--deep, #0a0a0f);
}

/* Base layer: radial gradient from entity color */
.card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--entity-color, #c9a84c)25, transparent 70%);
  opacity: 0.6;
}

/* Pattern layer based on category */
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
}

/* Category patterns */
.card-art[data-cat="god"]::after {
  background: repeating-conic-gradient(var(--entity-color) 0% 25%, transparent 0% 50%) 50% / 60px 60px;
}
.card-art[data-cat="monster"]::after {
  background: repeating-linear-gradient(45deg, var(--entity-color) 0px, transparent 2px, transparent 20px);
}
.card-art[data-cat="spirit"]::after {
  background: radial-gradient(circle at 30% 70%, var(--entity-color)15, transparent 40%),
              radial-gradient(circle at 70% 30%, var(--entity-color)10, transparent 30%);
  opacity: 0.2;
}
.card-art[data-cat="aberration"]::after {
  background: repeating-linear-gradient(135deg, var(--entity-color) 0px, transparent 1px, transparent 8px, var(--entity-color) 9px);
  opacity: 0.05;
}
.card-art[data-cat="anomaly"]::after {
  background: conic-gradient(from 45deg, var(--entity-color)05, transparent 25%, var(--entity-color)08, transparent 50%);
}
.card-art[data-cat="cosmic"]::after {
  background: radial-gradient(circle at 50% 50%, var(--entity-color)20, transparent 30%),
              radial-gradient(circle at 20% 80%, var(--entity-color)10, transparent 20%),
              radial-gradient(circle at 80% 20%, var(--entity-color)08, transparent 15%);
  opacity: 0.3;
}
.card-art[data-cat="guardian"]::after {
  background: linear-gradient(0deg, var(--entity-color)10, transparent 30%),
              repeating-linear-gradient(90deg, var(--entity-color) 0px, transparent 1px, transparent 40px);
  opacity: 0.1;
}
.card-art[data-cat="elemental"]::after {
  background: repeating-radial-gradient(circle, var(--entity-color)08, transparent 15px, transparent 30px);
  opacity: 0.15;
}
.card-art[data-cat="temporal"]::after {
  background: repeating-linear-gradient(0deg, var(--entity-color) 0px, transparent 1px, transparent 12px);
  animation: temporalShift 3s ease-in-out infinite alternate;
  opacity: 0.1;
}
.card-art[data-cat="beast"]::after {
  background: repeating-linear-gradient(60deg, var(--entity-color) 0px, transparent 2px, transparent 30px);
  opacity: 0.06;
}

@keyframes temporalShift {
  from { transform: skewX(-2deg); }
  to { transform: skewX(2deg); }
}

/* Center icon */
.card-art-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  z-index: 2;
  filter: drop-shadow(0 0 20px var(--entity-color, #c9a84c));
  opacity: 0.7;
  transition: all 0.3s;
}
.card-art:hover .card-art-icon {
  opacity: 1;
  font-size: 4.5rem;
  filter: drop-shadow(0 0 40px var(--entity-color, #c9a84c));
}

/* Rarity border glow */
.card-art[data-rarity="Primordial"] {
  border: 2px solid rgba(255,215,0,0.4);
  box-shadow: 0 0 20px rgba(255,215,0,0.15), inset 0 0 30px rgba(255,215,0,0.05);
}
.card-art[data-rarity="Divine"] {
  border: 2px solid rgba(200,160,255,0.35);
  box-shadow: 0 0 20px rgba(200,160,255,0.12), inset 0 0 30px rgba(200,160,255,0.05);
}
.card-art[data-rarity="Unique"] {
  border: 2px solid rgba(255,215,0,0.3);
  box-shadow: 0 0 15px rgba(255,215,0,0.1);
}
.card-art[data-rarity="Legendary"] {
  border: 2px solid rgba(255,136,68,0.3);
  box-shadow: 0 0 15px rgba(255,136,68,0.1);
}
.card-art[data-rarity="Rare"] {
  border: 1px solid rgba(68,170,255,0.25);
}
.card-art[data-rarity="Uncommon"] {
  border: 1px solid rgba(68,204,136,0.15);
}
.card-art[data-rarity="Common"] {
  border: 1px solid rgba(255,255,255,0.06);
}

/* Bottom gradient for text readability */
.card-art-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(10,10,15,0.9));
  z-index: 1;
}

/* Rarity name at top */
.card-art-rarity {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-size: 0.5rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
}

/* Entity name at bottom */
.card-art-name {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  line-height: 1.3;
}
.card-art-cat {
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}