#header.play-mode-active {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#header.play-mode-active #main-nav > div:first-child {
  opacity: 0;
}

#play-mode-container {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s 0.4s;
  visibility: hidden;
  padding-left: 4rem;
  padding-right: 4rem;
}

#play-mode-container.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
  z-index: 30;
  transition-delay: 0s;
}

.question-card {
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s, background-color 0.5s;
  cursor: grab;
}

.question-card.grabbing {
  cursor: grabbing;
}

.question-card.hidden-stack {
  opacity: 0;
  transform: translateY(50px);
  pointer-events: none;
}

.question-card.invisible {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s !important;
}