/* A brief cosmic perimeter, without capturing input or obscuring the globe. */
.admin-egg-frame {
  --egg-ice: #a5f6ff;
  --egg-rose: #cbb4ff;
  --egg-gold: #ffe6b5;
  position: fixed;
  inset: 1px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 2%, var(--egg-ice) 30%, var(--egg-rose) 70%, transparent 98%) top / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 2%, var(--egg-rose) 42%, var(--egg-gold) 78%, transparent 98%) right / 2px 100% no-repeat,
    linear-gradient(90deg, transparent 2%, var(--egg-gold) 30%, var(--egg-ice) 70%, transparent 98%) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 2%, var(--egg-ice) 32%, var(--egg-gold) 72%, transparent 98%) left / 2px 100% no-repeat,
    radial-gradient(ellipse at 8% 0, #7665d646, transparent 38%),
    radial-gradient(ellipse at 95% 12%, #41bdd52e, transparent 35%);
  box-shadow: inset 0 0 34px #a5f6ff25, inset 0 0 5px #cbb4ff70;
}
.admin-egg-frame::before, .admin-egg-frame::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #fff, var(--egg-ice));
  clip-path: polygon(50% 0, 57% 42%, 100% 50%, 57% 57%, 50% 100%, 42% 57%, 0 50%, 42% 42%);
}
.admin-egg-frame::before { top: 10px; left: 10px; }
.admin-egg-frame::after { right: 10px; bottom: 10px; background: linear-gradient(135deg, #fff, var(--egg-gold)); }
.admin-egg-frame[data-phase="complete"] {
  box-shadow: inset 0 0 60px #a5f6ff38, inset 0 0 12px #cbb4ff99;
}
.admin-egg-stars { position: absolute; inset: 0; }
.admin-egg-star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #e9faff;
  opacity: .75;
  box-shadow: 0 0 5px #a5f6ffb3;
}
.admin-egg-star.is-bright { background: #fff; box-shadow: 0 0 12px 3px #cbb4ff80; }
.admin-egg-star[hidden] { display: none; }
.admin-egg-star.is-bright::before, .admin-egg-star.is-bright::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #e9faff, transparent);
  width: calc(var(--star-size) * 4);
  height: 1px;
}
.admin-egg-star.is-bright::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .admin-egg-frame, .admin-egg-frame[data-phase="complete"] { box-shadow: inset 0 0 24px #a5f6ff25; }
}