/* Keep the opened reward card centered, with room for the complete prize text. */
.modal-card.game:has(.gcard.picked) {
  width: min(920px, calc(100vw - 24px));
  height: min(800px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px 18px;
}

.modal-card.game:has(.gcard.picked) > .eyebrow,
.modal-card.game:has(.gcard.picked) > h3,
.modal-card.game:has(.gcard.picked) > .game-sub {
  grid-area: auto;
  margin: 0;
  transform: none;
}

.modal-card.game .game-deck:has(.gcard.picked) {
  grid-area: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 8px auto 10px;
  display: grid;
  place-items: center;
}

.modal-card.game .game-deck .gcard.picked {
  grid-area: 1 / 1;
  width: min(320px, 30vw, 42svh);
  height: auto;
  aspect-ratio: 132 / 190;
  margin: 0;
  transform: none;
  justify-self: center;
}

.modal-card.game:has(.gcard.picked) > .game-result {
  grid-area: auto;
  align-self: center;
  margin: 0;
}

.modal-card.game .gcard.picked .gcard-face {
  padding: 0;
  container-type: inline-size;
}

.modal-card.game .gcard.picked .gcard-title {
  position: absolute;
  top: 27%;
  left: 10%;
  right: 10%;
  min-height: 32%;
  display: grid;
  place-items: center;
  color: #4b0d2b;
  font-family: var(--font-title);
  font-size: clamp(25px, 11cqw, 36px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-align: center;
  overflow-wrap: normal;
  text-wrap: balance;
  z-index: 1;
}

.modal-card.game .gcard.picked .gcard-face.reward-shipping .gcard-title,
.modal-card.game .gcard.picked .gcard-face.reward-none .gcard-title {
  font-size: clamp(23px, 9.5cqw, 32px);
}

.modal-card.game .gcard.picked .gcard-face::after {
  bottom: 11%;
  left: 38%;
  width: 24%;
  font-size: clamp(20px, 10cqw, 32px);
}

@media (max-width: 640px) {
  .modal-card.game:has(.gcard.picked) {
    gap: 6px;
    padding: 22px 12px;
  }

  .modal-card.game .game-deck .gcard.picked {
    width: min(72vw, 290px);
  }
}

@media (max-height: 620px) {
  .modal-card.game:has(.gcard.picked) {
    align-content: start;
    gap: 4px;
    padding-top: 20px;
  }

  .modal-card.game .game-deck .gcard.picked {
    width: min(63vw, 230px);
  }
}