/* shared components */
.element-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-element-desktop);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  user-select: none;
  padding: 0.4em 0.3em;
  text-align: center;
  min-height: var(--element-size-desktop);
  border: 2px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-family);
}

/* light theme */
body.light-theme .element-cell {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

.element-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.element-cell:hover::before {
  left: 100%;
}

.element-cell:hover {
  transform: scale(1.15);
  z-index: 50;
  box-shadow:
    0 8px 30px rgba(0, 212, 255, 0.6),
    0 0 0 3px rgba(0, 212, 255, 0.4);
}

body.light-theme .element-cell:hover {
  box-shadow:
    0 8px 30px rgba(0, 102, 204, 0.4),
    0 0 0 3px rgba(0, 102, 204, 0.3);
}

.element-cell .atomic-number {
  position: absolute;
  top: 0.4em;
  right: 0.5em;
  font-size: var(--font-size-atomic-desktop);
  font-weight: 800;
  opacity: 0.95;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

body.light-theme .element-cell .atomic-number {
  color: #1a1a2e;
  text-shadow: none;
}

.element-cell .symbol {
  font-size: var(--font-size-symbol-desktop);
  font-weight: 900;
  line-height: 1;
  margin-top: auto;
  margin-bottom: 0.2em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.02em;
  z-index: 2;
}

body.light-theme .element-cell .symbol {
  color: #1a1a2e;
  text-shadow: none;
}

.element-cell .fa-name {
  font-size: var(--font-size-name-desktop);
  font-weight: 700;
  line-height: 1.2;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.3em;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

body.light-theme .element-cell .fa-name {
  color: #333;
  text-shadow: none;
}


.فلز-قلیایی {
  background: linear-gradient(135deg, #ff6b35, #ff8e35);
  border-color: rgba(255, 107, 53, 0.5);
}
.فلز-قلیایی-خاکی {
  background: linear-gradient(135deg, #ffd166, #ffb347);
  border-color: rgba(255, 209, 102, 0.5);
}
.فلز-انتقالی {
  background: linear-gradient(135deg, #118ab2, #06d6a0);
  border-color: rgba(17, 138, 178, 0.5);
}
.لانتانید {
  background: linear-gradient(135deg, #7209b7, #4361ee);
  border-color: rgba(114, 9, 183, 0.5);
}
.آکتینید {
  background: linear-gradient(135deg, #f72585, #b5179e);
  border-color: rgba(247, 37, 133, 0.5);
}
.فلز, .شبه‌فلز {
  background: linear-gradient(135deg, #06d6a0, #118ab2);
  border-color: rgba(6, 214, 160, 0.5);
}
.نافلز {
  background: linear-gradient(135deg, #ffd166, #ef476f);
  border-color: rgba(255, 209, 102, 0.5);
}
.هالوژن {
  background: linear-gradient(135deg, #ef476f, #ff6b35);
  border-color: rgba(239, 71, 111, 0.5);
}
.گاز-نجیب {
  background: linear-gradient(135deg, #7209b7, #3a0ca3);
  border-color: rgba(114, 9, 183, 0.5);
}


body.light-theme .فلز-قلیایی {
  background: linear-gradient(135deg, #e85d35, #e07a35);
}
body.light-theme .فلز-قلیایی-خاکی {
  background: linear-gradient(135deg, #e5c266, #e5a847);
}
body.light-theme .فلز-انتقالی {
  background: linear-gradient(135deg, #0e7a9e, #05c090);
}
body.light-theme .لانتانید {
  background: linear-gradient(135deg, #6209a7, #3355dd);
}
body.light-theme .آکتینید {
  background: linear-gradient(135deg, #e01575, #a0158e);
}
body.light-theme .فلز, body.light-theme .شبه‌فلز {
  background: linear-gradient(135deg, #05c090, #0e7a9e);
}
body.light-theme .نافلز {
  background: linear-gradient(135deg, #e5c266, #df3e5f);
}
body.light-theme .هالوژن {
  background: linear-gradient(135deg, #df3e5f, #e85d35);
}
body.light-theme .گاز-نجیب {
  background: linear-gradient(135deg, #6209a7, #2a0c93);
}

/* atomic model */
.atomic-model {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 2rem auto;
  flex-shrink: 0;
}

/* nucleus */
.nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #ff6b9a, #ff2a6d);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  color: white;
  z-index: 10;
  font-size: 1.3rem;
  box-shadow:
    0 0 25px #ff2a6d,
    0 0 40px rgba(255, 42, 109, 0.6);
  animation: nucleusPulseDesktop 4s ease-in-out infinite;
}

body.light-theme .nucleus {
  background: radial-gradient(circle, #e05a8a, #d01a5d);
  box-shadow: 0 0 20px #d01a5d, 0 0 30px rgba(208, 26, 93, 0.4);
}

@keyframes nucleusPulseDesktop {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 25px #ff2a6d, 0 0 40px rgba(255, 42, 109, 0.6);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 35px #ff2a6d, 0 0 55px rgba(255, 42, 109, 0.8);
  }
}

/* shell */
.shell {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(0, 212, 255, 0.6);
  border-radius: 50%;
  animation: shellRotateDesktop 35s linear infinite;
  transform-origin: center;
}

body.light-theme .shell {
  border: 2px solid rgba(0, 102, 204, 0.5);
}

@keyframes shellRotateDesktop {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* electron */
.electron {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #05d9e8, #00a2ff);
  border-radius: 50%;
  margin-left: -6px;
  margin-top: -6px;
  box-shadow: 0 0 15px #05d9e8, 0 0 25px rgba(5, 217, 232, 0.7);
  animation: electronGlowDesktop 2.5s ease-in-out infinite alternate;
}

body.light-theme .electron {
  background: radial-gradient(circle, #0099ff, #0066cc);
}

/* element cell */
.element-cell.search-no-match {
  opacity: 0.15;
  filter: grayscale(80%);
  transform: scale(0.92);
}