/* ================================================================
   SHOCK & AWE — Card Template/Frame System
   The visual shell every card uses. Designed for 10 card types,
   4 rarity tiers, placeholder image area, and multi-size rendering.
   ================================================================ */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Base palette */
  --ct-bg-dark: #08090c;
  --ct-bg-card: #10141c;
  --ct-bg-card-inner: #0c1018;
  --ct-text: #eaeaf0;
  --ct-text-dim: #6a6e7a;
  --ct-text-muted: #3a3e4a;
  --ct-border: #1a2030;
  --ct-border-light: #252a3a;

  /* Rarity colors */
  --ct-common: #7a7d85;
  --ct-common-bg: rgba(122,125,133,0.08);
  --ct-uncommon: #c5f467;
  --ct-uncommon-bg: rgba(197,244,103,0.08);
  --ct-rare: #4488ff;
  --ct-rare-secondary: #ffd700;
  --ct-rare-bg: rgba(68,136,255,0.08);
  --ct-legendary: #ffd700;
  --ct-legendary-secondary: #ff8c00;
  --ct-legendary-bg: rgba(255,215,0,0.06);

  /* Type colors — 10 types */
  --ct-type-vehicle: #e8a020;
  --ct-type-aircraft: #44c8ff;
  --ct-type-naval: #20a8e0;
  --ct-type-infantry: #70dd50;
  --ct-type-specops: #c840ff;
  --ct-type-equipment: #ff8020;
  --ct-type-tactical: #22c55e;
  --ct-type-command: #ef4444;
  --ct-type-opfor: #dc2626;
  --ct-type-commanders: #a855f7;

  /* Stat colors */
  --ct-stat-fpr: #ff6b35;
  --ct-stat-arm: #4488ff;
  --ct-stat-spd: #ffcc00;
  --ct-stat-acc: #ff3a5c;
  --ct-stat-int: #22d3ee;
  --ct-stat-dep: #c5f467;

  /* Fonts */
  --ct-font-main: 'Space Grotesk', sans-serif;
  --ct-font-mono: 'JetBrains Mono', monospace;
}

/* ========================================
   CARD FRAME — Full Size (Gallery/Detail)
   ~280px wide, shows everything
   ======================================== */
.sa-card {
  position: relative;
  width: 280px;
  background: var(--ct-bg-card);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--ct-font-main);
  color: var(--ct-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.sa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* ── Rarity outer border ── */
.sa-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 5;
}

/* Common: subtle steel border */
.sa-card.rarity-common::before {
  border: 1.5px solid rgba(122,125,133,0.35);
}

/* Uncommon: green border */
.sa-card.rarity-uncommon::before {
  border: 1.5px solid rgba(197,244,103,0.4);
}

/* Rare: blue/gold gradient border */
.sa-card.rarity-rare::before {
  border: 2px solid transparent;
  background: linear-gradient(var(--ct-bg-card), var(--ct-bg-card)) padding-box,
              linear-gradient(135deg, var(--ct-rare), var(--ct-rare-secondary), var(--ct-rare)) border-box;
}

/* Legendary: animated gold glow border */
.sa-card.rarity-legendary::before {
  border: 2px solid transparent;
  background: linear-gradient(var(--ct-bg-card), var(--ct-bg-card)) padding-box,
              linear-gradient(135deg, var(--ct-legendary), var(--ct-legendary-secondary), var(--ct-legendary), var(--ct-legendary-secondary)) border-box;
  animation: legendaryBorderShift 3s linear infinite;
  background-size: 100% 100%, 300% 300%;
}

@keyframes legendaryBorderShift {
  0% { background-position: 0 0, 0% 0%; }
  50% { background-position: 0 0, 100% 100%; }
  100% { background-position: 0 0, 0% 0%; }
}

/* Legendary outer glow */
.sa-card.rarity-legendary::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  background: transparent;
  box-shadow: 0 0 15px rgba(255,215,0,0.2), 0 0 30px rgba(255,215,0,0.1);
  animation: legendaryPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes legendaryPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,215,0,0.15), 0 0 30px rgba(255,215,0,0.08); }
  50% { box-shadow: 0 0 22px rgba(255,215,0,0.3), 0 0 44px rgba(255,215,0,0.15); }
}

/* ── Rarity top accent bar ── */
.sa-card-accent {
  height: 4px;
  position: relative;
  z-index: 2;
}

.rarity-common .sa-card-accent { background: var(--ct-common); }
.rarity-uncommon .sa-card-accent { background: linear-gradient(90deg, var(--ct-uncommon), #88cc22); }
.rarity-rare .sa-card-accent { background: linear-gradient(90deg, var(--ct-rare), var(--ct-rare-secondary), var(--ct-rare)); }
.rarity-legendary .sa-card-accent {
  background: linear-gradient(90deg, var(--ct-legendary), var(--ct-legendary-secondary), var(--ct-legendary));
  animation: legendaryAccentShimmer 2s linear infinite;
  background-size: 200% 100%;
}

@keyframes legendaryAccentShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ── Card Header (Name + Deploy Cost) ── */
.sa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.65rem 0.75rem 0.35rem;
  position: relative;
  z-index: 2;
}

.sa-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.sa-card-subtitle {
  font-family: var(--ct-font-mono);
  font-size: 0.55rem;
  color: var(--ct-text-dim);
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}

.sa-card-deploy {
  font-family: var(--ct-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-stat-dep);
  background: rgba(197,244,103,0.1);
  border: 1px solid rgba(197,244,103,0.2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* ── Placeholder Image Area ── */
.sa-card-image {
  position: relative;
  height: 150px;
  margin: 0 0.5rem;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Type-colored background wash */
.sa-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
}

/* Angular grid/mesh pattern as placeholder */
.sa-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.015) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.015) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,0.015) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,0.015) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  pointer-events: none;
}

/* Type color wash on image area */
.sa-card.type-vehicle .sa-card-image::before { background: var(--ct-type-vehicle); }
.sa-card.type-aircraft .sa-card-image::before { background: var(--ct-type-aircraft); }
.sa-card.type-naval .sa-card-image::before { background: var(--ct-type-naval); }
.sa-card.type-infantry .sa-card-image::before { background: var(--ct-type-infantry); }
.sa-card.type-special-ops .sa-card-image::before { background: var(--ct-type-specops); }
.sa-card.type-equipment .sa-card-image::before { background: var(--ct-type-equipment); }
.sa-card.type-tactical .sa-card-image::before { background: var(--ct-type-tactical); }
.sa-card.type-command .sa-card-image::before { background: var(--ct-type-command); }
.sa-card.type-opfor .sa-card-image::before { background: var(--ct-type-opfor); }
.sa-card.type-commanders .sa-card-image::before { background: var(--ct-type-commanders); }

.sa-card-image-bg {
  position: absolute;
  inset: 0;
  background: var(--ct-bg-card-inner);
  border: 1px solid var(--ct-border);
}

/* Placeholder icon (SVG from card type) */
.sa-card-image-icon {
  position: relative;
  z-index: 3;
  width: 64px;
  height: 64px;
  opacity: 0.25;
  filter: drop-shadow(0 0 12px currentColor);
}

/* Real artwork (when swapped in) */
.sa-card-image img,
.sa-card-image .sa-card-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* ── Type & Rarity Bar ── */
.sa-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  position: relative;
  z-index: 2;
}

.sa-card-type-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--ct-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ct-border);
}

.sa-card-type-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Type dot colors */
.type-vehicle .sa-card-type-dot { background: var(--ct-type-vehicle); }
.type-aircraft .sa-card-type-dot { background: var(--ct-type-aircraft); }
.type-naval .sa-card-type-dot { background: var(--ct-type-naval); }
.type-infantry .sa-card-type-dot { background: var(--ct-type-infantry); }
.type-special-ops .sa-card-type-dot { background: var(--ct-type-specops); }
.type-equipment .sa-card-type-dot { background: var(--ct-type-equipment); }
.type-tactical .sa-card-type-dot { background: var(--ct-type-tactical); }
.type-command .sa-card-type-dot { background: var(--ct-type-command); }
.type-opfor .sa-card-type-dot { background: var(--ct-type-opfor); }
.type-commanders .sa-card-type-dot { background: var(--ct-type-commanders); }

/* Type text color */
.type-vehicle .sa-card-type-badge { color: var(--ct-type-vehicle); }
.type-aircraft .sa-card-type-badge { color: var(--ct-type-aircraft); }
.type-naval .sa-card-type-badge { color: var(--ct-type-naval); }
.type-infantry .sa-card-type-badge { color: var(--ct-type-infantry); }
.type-special-ops .sa-card-type-badge { color: var(--ct-type-specops); }
.type-equipment .sa-card-type-badge { color: var(--ct-type-equipment); }
.type-tactical .sa-card-type-badge { color: var(--ct-type-tactical); }
.type-command .sa-card-type-badge { color: var(--ct-type-command); }
.type-opfor .sa-card-type-badge { color: var(--ct-type-opfor); }
.type-commanders .sa-card-type-badge { color: var(--ct-type-commanders); }

.sa-card-rarity-badge {
  font-family: var(--ct-font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.rarity-common .sa-card-rarity-badge { background: rgba(122,125,133,0.15); color: var(--ct-common); }
.rarity-uncommon .sa-card-rarity-badge { background: rgba(197,244,103,0.12); color: var(--ct-uncommon); }
.rarity-rare .sa-card-rarity-badge { background: rgba(68,136,255,0.15); color: var(--ct-rare); }
.rarity-legendary .sa-card-rarity-badge { background: rgba(255,215,0,0.12); color: var(--ct-legendary); }

/* ── Stats Grid ── */
.sa-card-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.sa-stat {
  text-align: center;
  padding: 0.35rem 0.1rem 0.3rem;
  background: rgba(255,255,255,0.025);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.03);
}

.sa-stat-icon {
  font-size: 0.65rem;
  margin-bottom: 0.1rem;
  display: block;
  line-height: 1;
}

.sa-stat-val {
  font-family: var(--ct-font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

.sa-stat-label {
  font-family: var(--ct-font-mono);
  font-size: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ct-text-dim);
  display: block;
}

/* Stat value colors */
.sa-stat-fpr .sa-stat-val { color: var(--ct-stat-fpr); }
.sa-stat-arm .sa-stat-val { color: var(--ct-stat-arm); }
.sa-stat-spd .sa-stat-val { color: var(--ct-stat-spd); }
.sa-stat-acc .sa-stat-val { color: var(--ct-stat-acc); }
.sa-stat-int .sa-stat-val { color: var(--ct-stat-int); }
.sa-stat-dep .sa-stat-val { color: var(--ct-stat-dep); }

/* High stat highlight (8+) */
.sa-stat.high-stat {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

/* ── Specials / Abilities ── */
.sa-card-specials {
  padding: 0.5rem 0.75rem 0.65rem;
  border-top: 1px solid var(--ct-border);
  margin: 0 0.25rem;
  position: relative;
  z-index: 2;
}

.sa-special {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--ct-text-dim);
  margin-bottom: 0.3rem;
}

.sa-special:last-child {
  margin-bottom: 0;
}

.sa-special-name {
  font-weight: 600;
  color: var(--ct-uncommon);
}

.sa-special-dash {
  color: var(--ct-text-muted);
  margin: 0 0.15rem;
}

/* ── Faction Icon (bottom corner) ── */
.sa-card-faction {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  opacity: 0.12;
  z-index: 3;
}

/* ========================================
   CARD FRAME — Medium Size (Deck Builder)
   ~200px wide, slightly condensed
   ======================================== */
.sa-card.sa-card-md {
  width: 200px;
}

.sa-card-md .sa-card-header {
  padding: 0.5rem 0.6rem 0.25rem;
}

.sa-card-md .sa-card-name {
  font-size: 0.7rem;
}

.sa-card-md .sa-card-subtitle {
  font-size: 0.48rem;
}

.sa-card-md .sa-card-deploy {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
}

.sa-card-md .sa-card-image {
  height: 100px;
  margin: 0 0.35rem;
}

.sa-card-md .sa-card-image-icon {
  width: 44px;
  height: 44px;
}

.sa-card-md .sa-card-meta {
  padding: 0.3rem 0.6rem;
}

.sa-card-md .sa-card-type-badge {
  font-size: 0.48rem;
  padding: 0.15rem 0.4rem;
}

.sa-card-md .sa-card-type-dot {
  width: 5px;
  height: 5px;
}

.sa-card-md .sa-card-rarity-badge {
  font-size: 0.42rem;
  padding: 0.15rem 0.4rem;
}

.sa-card-md .sa-card-stats {
  gap: 2px;
  padding: 0 0.35rem;
  margin-bottom: 0.35rem;
}

.sa-card-md .sa-stat {
  padding: 0.25rem 0.05rem 0.2rem;
}

.sa-card-md .sa-stat-icon {
  font-size: 0.55rem;
}

.sa-card-md .sa-stat-val {
  font-size: 0.75rem;
}

.sa-card-md .sa-stat-label {
  font-size: 0.35rem;
}

.sa-card-md .sa-card-specials {
  padding: 0.35rem 0.6rem 0.5rem;
}

.sa-card-md .sa-special {
  font-size: 0.58rem;
  line-height: 1.35;
}

/* ========================================
   CARD FRAME — Small Size (Thumbnail)
   ~140px wide, compact for grids
   ======================================== */
.sa-card.sa-card-sm {
  width: 140px;
}

.sa-card-sm .sa-card-accent {
  height: 3px;
}

.sa-card-sm .sa-card-header {
  padding: 0.4rem 0.45rem 0.2rem;
}

.sa-card-sm .sa-card-name {
  font-size: 0.58rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-card-sm .sa-card-subtitle {
  display: none;
}

.sa-card-sm .sa-card-deploy {
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  margin-left: 0.3rem;
}

.sa-card-sm .sa-card-image {
  height: 64px;
  margin: 0 0.25rem;
}

.sa-card-sm .sa-card-image-icon {
  width: 32px;
  height: 32px;
}

.sa-card-sm .sa-card-meta {
  padding: 0.25rem 0.45rem;
}

.sa-card-sm .sa-card-type-badge {
  font-size: 0.4rem;
  padding: 0.1rem 0.3rem;
  gap: 0.2rem;
}

.sa-card-sm .sa-card-type-dot {
  width: 4px;
  height: 4px;
}

.sa-card-sm .sa-card-rarity-badge {
  display: none;
}

.sa-card-sm .sa-card-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 0.25rem;
  margin-bottom: 0.3rem;
}

/* Hide second row stats on small cards */
.sa-card-sm .sa-stat:nth-child(n+4) {
  display: none;
}

.sa-card-sm .sa-stat {
  padding: 0.15rem 0;
}

.sa-card-sm .sa-stat-icon {
  font-size: 0.45rem;
}

.sa-card-sm .sa-stat-val {
  font-size: 0.65rem;
}

.sa-card-sm .sa-stat-label {
  font-size: 0.3rem;
}

.sa-card-sm .sa-card-specials {
  padding: 0.25rem 0.45rem 0.35rem;
}

.sa-card-sm .sa-special {
  font-size: 0.48rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Only show first special on small cards */
.sa-card-sm .sa-special:nth-child(n+2) {
  display: none;
}

/* ========================================
   CARD FRAME — XS Size (Hand/Battle)
   ~110px wide, minimal info
   ======================================== */
.sa-card.sa-card-xs {
  width: 110px;
}

.sa-card-xs .sa-card-accent { height: 3px; }

.sa-card-xs .sa-card-header {
  padding: 0.35rem 0.4rem 0.15rem;
}

.sa-card-xs .sa-card-name {
  font-size: 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-card-xs .sa-card-subtitle { display: none; }

.sa-card-xs .sa-card-deploy {
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  margin-left: 0.25rem;
  border: none;
  background: rgba(197,244,103,0.12);
}

.sa-card-xs .sa-card-image {
  height: 48px;
  margin: 0 0.2rem;
}

.sa-card-xs .sa-card-image-icon {
  width: 26px;
  height: 26px;
}

.sa-card-xs .sa-card-meta { display: none; }

.sa-card-xs .sa-card-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 0.2rem;
  margin-bottom: 0.2rem;
}

.sa-card-xs .sa-stat:nth-child(n+4) { display: none; }

.sa-card-xs .sa-stat {
  padding: 0.1rem 0;
  border: none;
  background: none;
}

.sa-card-xs .sa-stat-icon { display: none; }

.sa-card-xs .sa-stat-val {
  font-size: 0.6rem;
}

.sa-card-xs .sa-stat-label {
  font-size: 0.28rem;
}

.sa-card-xs .sa-card-specials { display: none; }

/* ========================================
   CARD GRID LAYOUTS
   ======================================== */
.sa-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.sa-card-grid.grid-compact {
  gap: 0.75rem;
}

/* ========================================
   TYPE ACCENT BAR (left edge)
   ======================================== */
.sa-card-type-accent {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 0 0;
  z-index: 3;
}

.type-vehicle .sa-card-type-accent { background: var(--ct-type-vehicle); }
.type-aircraft .sa-card-type-accent { background: var(--ct-type-aircraft); }
.type-naval .sa-card-type-accent { background: var(--ct-type-naval); }
.type-infantry .sa-card-type-accent { background: var(--ct-type-infantry); }
.type-special-ops .sa-card-type-accent { background: var(--ct-type-specops); }
.type-equipment .sa-card-type-accent { background: var(--ct-type-equipment); }
.type-tactical .sa-card-type-accent { background: var(--ct-type-tactical); }
.type-command .sa-card-type-accent { background: var(--ct-type-command); }
.type-opfor .sa-card-type-accent { background: var(--ct-type-opfor); }
.type-commanders .sa-card-type-accent { background: var(--ct-type-commanders); }

/* ========================================
   DIAGONAL CORNER CUTS (military aesthetic)
   ======================================== */
.sa-card-corner-tl,
.sa-card-corner-br {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.sa-card-corner-tl {
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
}

.sa-card-corner-br {
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .sa-card {
    width: 260px;
  }

  .sa-card-image {
    height: 130px;
  }

  .sa-card-grid {
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .sa-card {
    width: 100%;
    max-width: 300px;
  }

  .sa-card.sa-card-md {
    width: 100%;
    max-width: 200px;
  }

  .sa-card.sa-card-sm {
    width: 130px;
  }

  .sa-card.sa-card-xs {
    width: 100px;
  }
}

/* ========================================
   CARD HOVER STATES (interactive)
   ======================================== */
.sa-card.interactive {
  cursor: pointer;
}

.sa-card.interactive.rarity-legendary:hover {
  box-shadow: 0 8px 32px rgba(255,215,0,0.15), 0 0 20px rgba(255,215,0,0.08);
}

.sa-card.interactive.rarity-rare:hover {
  box-shadow: 0 8px 32px rgba(68,136,255,0.15), 0 0 20px rgba(68,136,255,0.08);
}

.sa-card.interactive.rarity-uncommon:hover {
  box-shadow: 0 8px 32px rgba(197,244,103,0.12), 0 0 16px rgba(197,244,103,0.06);
}

.sa-card.interactive.rarity-common:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ========================================
   CARD SELECTED STATE
   ======================================== */
.sa-card.selected {
  transform: translateY(-2px);
}

.sa-card.selected.rarity-legendary {
  box-shadow: 0 0 0 2px var(--ct-legendary), 0 0 20px rgba(255,215,0,0.25);
}

.sa-card.selected.rarity-rare {
  box-shadow: 0 0 0 2px var(--ct-rare), 0 0 16px rgba(68,136,255,0.2);
}

.sa-card.selected.rarity-uncommon {
  box-shadow: 0 0 0 2px var(--ct-uncommon), 0 0 16px rgba(197,244,103,0.15);
}

.sa-card.selected.rarity-common {
  box-shadow: 0 0 0 2px var(--ct-common), 0 0 12px rgba(122,125,133,0.15);
}

/* ========================================
   ANIMATION: Card entrance
   ======================================== */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sa-card.animate-in {
  animation: cardReveal 0.35s cubic-bezier(0.22, 0.9, 0.5, 1.1) forwards;
}

/* Stagger animation for grid */
.sa-card-grid .sa-card.animate-in:nth-child(1) { animation-delay: 0ms; }
.sa-card-grid .sa-card.animate-in:nth-child(2) { animation-delay: 50ms; }
.sa-card-grid .sa-card.animate-in:nth-child(3) { animation-delay: 100ms; }
.sa-card-grid .sa-card.animate-in:nth-child(4) { animation-delay: 150ms; }
.sa-card-grid .sa-card.animate-in:nth-child(5) { animation-delay: 200ms; }
.sa-card-grid .sa-card.animate-in:nth-child(6) { animation-delay: 250ms; }
.sa-card-grid .sa-card.animate-in:nth-child(7) { animation-delay: 300ms; }
.sa-card-grid .sa-card.animate-in:nth-child(8) { animation-delay: 350ms; }
.sa-card-grid .sa-card.animate-in:nth-child(9) { animation-delay: 400ms; }
.sa-card-grid .sa-card.animate-in:nth-child(10) { animation-delay: 450ms; }
.sa-card-grid .sa-card.animate-in:nth-child(n+11) { animation-delay: 500ms; }