:root {
   --card-radius: 2em;
   --card-ease: cubic-bezier(0.22, 1, 0.36, 1);
   --card-transition: 250ms var(--card-ease);
   --card-active-scale: 1.03;
   --card-front-active-transform: translateY(-8%) scale(0.86);
   --card-portrait-active-opacity: 0.3;
   --card-portrait-active-transform: scale(0.7);
   --card-background-active-transform: scale(1);
   --card-background-image-active-transform: scale(1.5);
}

.wrapper {
   container-name: card-page;
   min-height: 100svh;
   display: grid;
   place-items: center;
   overflow: hidden;
}

.game {
   position: relative;
   display: block;
   width: min(16rem, calc(100cqi - 2rem));
   aspect-ratio: 4 / 5;
   border-radius: var(--card-radius);
   color: inherit;
   text-decoration: none;
   cursor: pointer;
   touch-action: manipulation;
   isolation: isolate;
   transform-origin: center;
   transition: transform var(--card-transition);
}

@media (hover: none) and (pointer: coarse) {
   .game::before {
      position: absolute;
      inset: -1rem;
      z-index: 3;
      content: "";
      touch-action: manipulation;
   }

   .game.is-revealed::before {
      inset: -2rem;
   }
}

.front {
   position: relative;
   height: 100%;
   pointer-events: none;
   transition: transform var(--card-transition);
}

.game .front>img {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: auto;
   max-height: 72%;
   object-fit: contain;
   transition: opacity var(--card-transition), transform var(--card-transition);
}

.game .front h1 {
   position: relative;
   z-index: 1;
   margin: 0;
   font-size: var(--fs-2);
   text-align: center;
   transition: opacity 180ms ease, visibility 180ms ease;
}

.stats {
   position: relative;
   z-index: 1;
   text-align: center;
   transition: opacity 180ms ease, visibility 180ms ease;
}

.back {
   position: absolute;
   inset: 0;
   z-index: 2;
   display: grid;
   place-items: center;
   opacity: 0;
   transform: translateY(8%);
   transition: opacity 180ms ease, transform var(--card-transition);
}

.game-stat {
   margin: 0;
   color: var(--text-color);
   font-size: var(--fs-2);
   font-weight: 700;
   text-align: center;
}

.background {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   border-radius: var(--card-radius);
   background: transparent;
   opacity: 0;
   visibility: hidden;
   transform: scale(0.92, 0.96);
   transition: opacity 180ms ease, visibility 0s linear 180ms, transform var(--card-transition);
}

.background img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   transition: transform var(--card-transition);
}

@container card-page (min-width: 48rem) {
   .game {
      width: clamp(20rem, 30cqi, 28rem);
   }

   .back {
      place-items: end center;
      padding-block-end: 4%;
   }

   .game-stat {
      font-size: var(--fs-3);
   }
}

.game.is-revealed,
.game:is(:hover, :focus-visible) {
   transform: scale(var(--card-active-scale));
}

.game.is-revealed .front,
.game:is(:hover, :focus-visible) .front {
   transform: var(--card-front-active-transform);
}

.game.is-revealed .front>img,
.game:is(:hover, :focus-visible) .front>img {
   opacity: var(--card-portrait-active-opacity);
   transform: var(--card-portrait-active-transform);
}

.game.is-revealed :is(.name, .stats),
.game:is(:hover, :focus-visible) :is(.name, .stats) {
   visibility: hidden;
   opacity: 0;
}

.game.is-revealed .back,
.game:is(:hover, :focus-visible) .back {
   opacity: 1;
   transform: translateY(0);
}

.game.is-revealed .game-stat,
.game:is(:hover, :focus-visible) .game-stat {
   animation: fade 1.2s ease-in-out infinite alternate;
}

.game.is-revealed .background,
.game:is(:hover, :focus-visible) .background {
   opacity: 1;
   visibility: visible;
   transform: var(--card-background-active-transform);
   transition-delay: 0s;
}

.game.is-revealed .background img,
.game:is(:hover, :focus-visible) .background img {
   transform: var(--card-background-image-active-transform);
}

@keyframes fade {
   from {
      opacity: 0.7;
      transform: scale(0.94);
   }

   to {
      opacity: 1;
      transform: scale(1.06);
   }
}

@media (prefers-reduced-motion: reduce) {
   .game,
   .front,
   .game .front>img,
   .game .front h1,
   .stats,
   .back,
   .background,
   .background img {
      transition: none;
   }

   .game-stat {
      animation: none !important;
   }
}