/* ==========================================================================
   Element Card DOM Component (140px x 180px)
   ========================================================================== */

.element-card {
  width: 140px;
  height: 180px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: 
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
    box-shadow 0.25s ease, 
    opacity 0.3s ease, 
    border-color 0.25s ease, 
    filter 0.3s ease;
  position: relative;
  overflow: hidden;
}

.element-card:hover {
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 28px var(--card-glow, rgba(56, 189, 248, 0.6)) !important;
  z-index: 1000;
}

/* Card Header (Atomic Number) */
.card-number {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Card Center (Chemical Symbol) */
.card-symbol {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #ffffff;
  letter-spacing: -1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  margin: auto 0;
}

/* Card Footer (Name & Atomic Mass) */
.card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.card-name {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-mass {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
  text-align: center;
}

/* ==========================================================================
   10-Family Chemical Category Styling & Color Borders
   ========================================================================== */

.element-card[data-category="alkali-metal"] {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(239, 68, 68, 0.5);
}

.element-card[data-category="alkaline-earth-metal"] {
  border-color: rgba(249, 115, 22, 0.45);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(249, 115, 22, 0.5);
}

.element-card[data-category="transition-metal"] {
  border-color: rgba(6, 182, 212, 0.45);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(6, 182, 212, 0.5);
}

.element-card[data-category="post-transition-metal"] {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(59, 130, 246, 0.5);
}

.element-card[data-category="metalloid"] {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(16, 185, 129, 0.5);
}

.element-card[data-category="nonmetal"] {
  border-color: rgba(132, 204, 22, 0.45);
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(132, 204, 22, 0.5);
}

.element-card[data-category="halogen"] {
  border-color: rgba(234, 179, 8, 0.45);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(234, 179, 8, 0.5);
}

.element-card[data-category="noble-gas"] {
  border-color: rgba(168, 85, 247, 0.45);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(168, 85, 247, 0.5);
}

.element-card[data-category="lanthanide"] {
  border-color: rgba(251, 113, 133, 0.45);
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(251, 113, 133, 0.5);
}

.element-card[data-category="actinide"] {
  border-color: rgba(217, 70, 239, 0.45);
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.12), rgba(15, 23, 42, 0.85));
  --card-glow: rgba(217, 70, 239, 0.5);
}

/* ==========================================================================
   Search / Filter Dimmed and Highlighted States
   ========================================================================== */

.element-card.dimmed {
  opacity: 0.12 !important;
  filter: grayscale(80%) brightness(0.4) !important;
  pointer-events: none;
}

.element-card.highlighted {
  opacity: 1.0 !important;
  filter: none !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 32px var(--card-glow, #38bdf8) !important;
}