#squads-selection {
  display: flex;
  justify-content: center;
  gap: clamp( 8px , 2vw , 2rem);
  user-select: none;
  margin-block-start: 1rem;
}

.squad-card {
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: scale, filter;

  img {
    max-width: 8.75rem;
    width: 100%;
    height: auto;
  }
}
.squad-card.is-active {
  scale: 1.2;
  filter: drop-shadow(0 0 20px var(--key-color));

  img {
    filter: drop-shadow(0 0 5px var(--key-color));
  }
}

.squad-card.is-final,
#squad-confirmed-image {
  filter: drop-shadow(0 0 50px var(--key-color));

  img {
    filter: drop-shadow(0 0 5px var(--key-color));
  }
}

#squads-selection:has(.squad-card.is-final) .squad-card:not(.is-final) {
  filter: brightness(0.5);
}


.beginButtonDisabled {
  filter: saturate(0.3) brightness(0.8);
  pointer-events: none;
}

#squad-selection-modal {
  --modal-width: 36rem;
}

#squad-confirmation-modal {
  --modal-width: 24rem;
}

#squad-confirmed-name {
  color: hsl(from var(--key-color) h calc(s + 15) calc(l + 10));
}



figure:has(#squad-confirmed-image) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.particle-container {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0 auto;

  transform: scale(1.5);
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
}

/* Trigger this class when the modal opens */
.particle {
  animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    /* Each particle moves in a different direction */
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

.particle:nth-child(odd) { background: hsl(from var(--key-color) h s calc(l + 90)); }
.particle:nth-child(even) { background: var(--gold-border-color); }

/* Randomize directions using nth-child */
.particle:nth-child(1) { --dx: -2.5rem; --dy: -5rem; }
.particle:nth-child(2) { --dx: 2.5rem; --dy: -5rem; }
.particle:nth-child(3) { --dx: -5.625rem; --dy: -1.25rem; }
.particle:nth-child(4) { --dx: 5.625rem; --dy: -1.25rem; }
.particle:nth-child(5) { --dx: -3.75rem; --dy: 3.75rem; }
.particle:nth-child(6) { --dx: 3.75rem; --dy: 3.75rem; }
.particle:nth-child(7) { --dx: 0px; --dy: -6.875rem; }
.particle:nth-child(8) { --dx: 0px; --dy: 6.875rem; }