/* Completed Sprite-family celebration treatment. Loaded after app.css. */
.family.complete{
  --family-x:50%;
  --family-y:28%;
  --family-tilt-x:0deg;
  --family-tilt-y:0deg;
  isolation:isolate;
  transform:perspective(1000px) rotateX(var(--family-tilt-x)) rotateY(var(--family-tilt-y));
  transform-style:preserve-3d;
  border-color:rgba(255,215,105,.72);
  background:
    radial-gradient(circle at var(--family-x) var(--family-y),rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 15% 15%,rgba(73,226,255,.08),transparent 34%),
    radial-gradient(circle at 85% 80%,rgba(255,91,206,.07),transparent 36%),
    linear-gradient(160deg,#171d31,#0d1220 72%);
  box-shadow:0 0 34px rgba(255,212,92,.15),0 18px 44px rgba(0,0,0,.28);
  transition:transform .24s cubic-bezier(.2,.75,.2,1),box-shadow .24s ease,border-color .24s ease;
}
.family.complete::before,.family.complete::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.family.complete::before{
  z-index:0;
  inset:-45% -65%;
  background:conic-gradient(from 205deg,transparent 0 16%,rgba(69,226,255,.16) 24%,rgba(145,99,255,.18) 34%,rgba(255,211,91,.22) 46%,rgba(255,96,205,.16) 57%,transparent 70% 100%);
  filter:blur(16px);
  opacity:.42;
  animation:family-aurora 8s linear infinite;
}
.family.complete::after{
  z-index:1;
  inset:-22% -70%;
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.06) 44%,rgba(255,236,172,.30) 49%,rgba(122,232,255,.18) 53%,transparent 60%);
  transform:translateX(-52%) rotate(2deg);
  opacity:.58;
  animation:family-sweep 5.4s ease-in-out infinite;
}
.family.complete>*{position:relative;z-index:2}
.family.complete:hover{
  border-color:rgba(255,225,126,.95);
  box-shadow:0 0 24px rgba(72,225,255,.11),0 0 42px rgba(255,212,92,.22),0 22px 48px rgba(0,0,0,.34);
}
.family.complete:active{
  border-color:rgba(255,232,151,.98);
  box-shadow:0 0 25px rgba(73,226,255,.16),0 0 42px rgba(255,212,92,.25),0 16px 34px rgba(0,0,0,.28);
}
.family.complete .familybanner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(92deg,#6849ee 0%,#36d8f2 27%,#ffd35e 54%,#ff64c9 78%,#6849ee 100%);
  background-size:220% 100%;
  animation:family-banner-flow 7s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 5px 18px rgba(255,210,90,.12);
}
.family.complete .familyname{ text-shadow:0 0 16px rgba(255,221,116,.13) }
.family.complete .count{ text-shadow:0 0 14px rgba(255,212,92,.26) }
@keyframes family-aurora{to{transform:rotate(360deg)}}
@keyframes family-sweep{0%,48%{transform:translateX(-58%) rotate(2deg)}78%,100%{transform:translateX(58%) rotate(2deg)}}
@keyframes family-banner-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (pointer:coarse){
  .family.complete{transform:none!important}
  .family.complete:hover{box-shadow:0 0 34px rgba(255,212,92,.15),0 18px 44px rgba(0,0,0,.28)}
}
@media (prefers-reduced-motion:reduce){
  .family.complete,.family.complete::before,.family.complete::after,.family.complete .familybanner{animation:none!important;transition:none!important;transform:none!important}
  .family.complete::after{opacity:.12}
}