.matchgame{display:grid;width:var(--container-width);height:var(--container-height);min-height:var(--container-height);margin:0;grid-template-columns:repeat(var(--grid-width),1fr);grid-template-rows:repeat(var(--grid-height),1fr);grid-gap:0;--animation-duration:.3s}.matchgame .grid-image{position:relative;overflow:hidden;margin:var(--grid-grip-gap);cursor:pointer;transition:all .3s;opacity:1;border-radius:.5rem}.matchgame .grid-image.cell-revealed{pointer-events:none;opacity:0}.matchgame .grid-image .cover-image{z-index:0}.matchgame .grid-image .cell-image{z-index:1}.matchgame .grid-image img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:1;object-fit:cover}.matchgame .grid-image .cover-image.hidden{transform:rotateY(90deg)}.matchgame .grid-image .cover-image.shown{animation:cover-image-show var(--animation-duration)}.matchgame .grid-image .cover-image.shown.wrong{animation:cover-image-hide-show .6s!important;animation-delay:.3s}.matchgame .grid-image .cell-image.hidden{transform:rotateY(90deg)}.matchgame .grid-image .cell-image.shown{animation:cell-image-show var(--animation-duration)}.matchgame .grid-image .cell-image.hidden.wrong{animation:cell-image-show-hide 1.2s!important}@keyframes cell-reveal {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}@keyframes cover-image-show {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}@keyframes cover-image-hide-show {
  0% {
    transform: rotateY(90deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}@keyframes cover-image-hide {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}@keyframes cell-image-show {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}@keyframes cell-image-show-hide {
  0% {
    transform: rotateY(90deg);
  }
  33% {
    transform: rotateY(0deg);
  }
  66% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}@keyframes cell-image-hide {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(90deg);
  }
}.matchgame-timer h2{color:var(--color-timer-stopped)}.matchgame-win,.matchgame-lost{position:fixed;z-index:100;top:730px;left:120px;overflow:visible;width:900px;min-width:900px;height:450px;transition:all .4s;transform:scale(0);opacity:0;box-shadow:0 0 50px rgba(0,0,0,.45)}.matchgame-win.shown,.matchgame-lost.shown{transform:scale(1);opacity:1}