.realm-menu {
  opacity: 0;
  transition: opacity 1s;
  background: #181c24;
  color: #f0f0f0;
  padding: 2em;
  border-radius: 1em;
  max-width: 400px;
  margin: 2em auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  text-align: center;
}

.realm-menu.visible {
  opacity: 1;
}
.realm-actions {
  margin-top: 1.5em;
}

.realm-actions h3 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
  color: #ccc;
}

.realm-actions button {
  margin: 0.3em;
  padding: 0.6em 1.2em;
  background: #333;
  color: #f0f0f0;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
}

.realm-actions button:hover {
  background: #444;
}
.realm-actions {
  margin-top: 1.5em;
}

.realm-actions h3 {
  margin-bottom: 0.5em;
  font-size: 1.2em;
  color: #ccc;
}

.realm-actions button {
  margin: 0.3em;
  padding: 0.6em 1.2em;
  background: #333;
  color: #f0f0f0;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
}

.realm-actions button:hover {
  background: #444;
}