/*
  What: User page styles (portrait wizard card).
  Connected to: user.html, js/user.js
  Amrei pls make me work: None; styling only.
*/
/* User page styles (overrides/additions). */

.wizard-card {
  /* Portrait card, centered */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(95vw, 540px);
  max-width: 540px;
  max-height: 88vh; /* keep small vertical margins */
  z-index: 2;
  overflow: visible; /* let glow extend beyond border without clipping */
}

/* Add a subtle animated edge glow like a magic card */
.wizard-card::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    #ec8bd0 0deg,
    #b49afc 120deg,
    #8ed3ff 240deg,
    #ec8bd0 360deg
  );
  animation: mpHueShift 4s linear infinite;
  filter: blur(16px) saturate(140%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 2px;
}

@media (max-width: 640px) {
  .wizard-card { width: 96vw; left: 50%; transform: translate(-50%, -50%); }
}

/* Prevent global opening animation from shifting the fixed card */
.shop-ready .wizard-card {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}