/* ============================================================
   PIXEL ART SPRITE SYSTEM — Box-shadow technique
   Each sprite is a 4×4px element with box-shadow offsets
   creating a 16×16 pixel grid. Colors injected per-unit by JS.
   ============================================================ */

.pixel-sprite {
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  flex-shrink: 0;
  image-rendering: pixelated;
}

/* Sprite sizing contexts — 16x16 grid at 4px = 64px native */
.sprite-card {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px auto;
  position: relative;
  overflow: hidden;
}
.sprite-card .pixel-sprite {
  transform: scale(0.75);
}

.sprite-ghost {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sprite-ghost .pixel-sprite {
  transform: scale(0.875);
}

.sprite-next {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sprite-next .pixel-sprite {
  transform: scale(0.3);
}

/* ============================================================
   SPELL ICON SPRITES — Pure CSS, no canvas
   ============================================================ */

.spell-icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto 4px auto;
  flex-shrink: 0;
}

.spell-icon::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  opacity: 0.85;
}

.spell-icon::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 7px;
  left: 7px;
  background: rgba(255,255,255,0.6);
  box-shadow: 2px 2px 0 rgba(255,255,255,0.3);
}

.spell-icon-fireball {
  background: radial-gradient(circle at 35% 35%, #ff8a5b 0%, #ff5b3d 40%, #a83322 100%);
  box-shadow: 0 0 12px rgba(255,91,61,0.5), inset 0 -3px 6px rgba(0,0,0,0.3);
}
.spell-icon-fireball::before {
  background: radial-gradient(circle at 40% 40%, #ffd76a 0%, #ff5b3d 60%, transparent 100%);
}

.spell-icon-frost {
  background: radial-gradient(circle at 35% 35%, #a8e8ff 0%, #4ac9f5 40%, #2384a8 100%);
  box-shadow: 0 0 12px rgba(74,201,245,0.5), inset 0 -3px 6px rgba(0,0,0,0.3);
}
.spell-icon-frost::before {
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #a8e8ff 60%, transparent 100%);
}

/* ============================================================
   EFFECTS LAYER — Overlay for damage numbers & spell effects
   ============================================================ */

#effects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

/* ============================================================
   ELEMENT GLOW RINGS — Synergy indicator
   ============================================================ */

.synergy-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--glow-color, #fff);
  opacity: 0;
  pointer-events: none;
  animation: synergy-pulse 1.2s ease-in-out infinite;
}

@keyframes synergy-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

/* ============================================================
   CARD ELEMENT ACCENTS — Colored glow per element
   ============================================================ */

.card[data-element="fire"] { --accent: var(--fire); }
.card[data-element="nature"] { --accent: var(--nature); }
.card[data-element="earth"] { --accent: var(--earth); }
.card[data-element="lightning"] { --accent: var(--lightning); }
.card[data-element="water"] { --accent: var(--water); }

.card-glow {
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 0 8px 1px var(--accent), inset 0 0 6px 0 var(--accent);
}

.card:hover .card-glow { opacity: 0.6; }
.card.selected .card-glow { opacity: 1; }