/* RUEZALS™ Particle Toggle Control
   Styled to match dashboard UI — gold border, dark background, smooth transitions
*/

.particles-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.particles-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(200, 150, 42, 0.4);
  background: rgba(3, 12, 7, 0.8);
  color: rgba(200, 150, 42, 0.7);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.particles-toggle:hover {
  border-color: rgba(200, 150, 42, 0.7);
  color: var(--gold-bright, #e8bd4f);
  background: rgba(200, 150, 42, 0.1);
}

.particles-toggle.active {
  border-color: var(--gold, #c8962a);
  color: var(--gold-bright, #e8bd4f);
  background: rgba(200, 150, 42, 0.15);
  box-shadow: 0 0 12px rgba(200, 150, 42, 0.25);
}

.toggle-icon {
  display: inline-block;
  font-size: 0.8em;
  opacity: 0.8;
  transition: opacity 0.25s ease;
}

.particles-toggle.active .toggle-icon {
  opacity: 1;
  animation: sparkle 0.6s ease infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.toggle-label {
  display: none;
}

/* Show label on larger screens */
@media (min-width: 800px) {
  .toggle-label {
    display: inline;
  }
}

/* Responsive: stack vertically on mobile */
@media (max-width: 600px) {
  .particles-toggle {
    padding: 6px 10px;
    font-size: 0.62rem;
  }
}

/* Canvas opacity transition */
.realm-canvas {
  transition: opacity 0.3s ease;
}