/* ============================================================
   HERO CROWN MODULE — FULL FILE (v=20240614-1210)
   Modular • Cinematic • Cache‑Safe
============================================================ */

.hero-crown-wrapper {
  position: relative;
  width: 462px;
  height: 462px;
  margin: 0 auto;
  z-index: 50 !important;
  overflow: visible;
  pointer-events: none;
}

.hero-crown {
  position: absolute;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 462px;
  height: 462px;
  object-fit: contain;

  opacity: 0;
  transition: opacity 8s ease-in-out, filter 8s ease-in-out;

  filter: drop-shadow(0 0 25px rgba(255,255,255,0.9));
  animation: crownShimmer 6s ease-in-out infinite;
  z-index: 51 !important;
}

.crown-day {
  opacity: 1;
}

body.dark-mode .crown-day {
  opacity: 0;
}

body.dark-mode .crown-night {
  opacity: 1;
}

@keyframes crownShimmer {
  0%   { filter: drop-shadow(0 0 15px rgba(255,255,255,0.6)); }
  50%  { filter: drop-shadow(0 0 28px rgba(255,255,255,1)); }
  100% { filter: drop-shadow(0 0 15px rgba(255,255,255,0.6)); }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 352px;
    height: 352px;
  }
}

@media (max-width: 600px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 286px;
    height: 286px;
  }
}

@media (max-width: 400px) {
  .hero-crown-wrapper,
  .hero-crown {
    width: 220px;
    height: 220px;
  }
}