/*<style>*/

.MatchUp #Player {display: none;}\
.MatchUp .Chunk {content-visibility: visible;}

.MatchUp .Background1 {display: block; background-image: url('graphics/games/platform/textures/stripesbig.png'); background-size: 32px;}
.MatchUp .Chunk {padding-top: 40px; text-align: center;}
.MatchUp .Message {pointer-events: none;}
.MatchUp .Card {animation: CardDeal 1s forwards; --left: 0px !important; --top: 0px !important; position: static; display: inline-block; background: transparent; width: 180px; height: 120px; border-radius: 10px; margin: 4px;}
    .CardInner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; xborder: solid 1px black; border-radius: 10px;}
    .Card.Flipped .CardInner {transform: rotateY(180deg); animation-play-state: var(--AnimationPlayState);}
    .CardFront, .CardBack {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 26pt; font-family: var(--DefaultFontFamily); padding-top: 32px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; border: solid 10px white; box-shadow: 2px 2px 2px rgba(0,0,0,0.5); box-sizing: border-box; cursor: pointer;}
        .CardBack {background-color: dodgerblue; color: white;}
        .Card.AnswerCard .CardBack {background-color: red;}
        .CardFront {background-color: white; color: dodgerblue; transform: rotateY(180deg);}
        .Card.AnswerCard .CardFront {color: red;}
        .Card.Match .CardBack, .Card.Match .CardFront {background-color: limegreen; color: white;}
        .Card.Match {animation: CardRemoval 1s forwards !important; animation-delay: 0s !important; pointer-events: none;}

        .MatchUp .Card:nth-child(1) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 50ms;}
                .MatchUp .Card:nth-child(2) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 100ms;}
                .MatchUp .Card:nth-child(3) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 150ms;}
                .MatchUp .Card:nth-child(4) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 200ms;}
                .MatchUp .Card:nth-child(5) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 250ms;}
                .MatchUp .Card:nth-child(6) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 300ms;}
                .MatchUp .Card:nth-child(7) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 350ms;}
                .MatchUp .Card:nth-child(8) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 400ms;}
                .MatchUp .Card:nth-child(9) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 450ms;}
                .MatchUp .Card:nth-child(10) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 500ms;}
                .MatchUp .Card:nth-child(11) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 550ms;}
                .MatchUp .Card:nth-child(12) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 600ms;}
                .MatchUp .Card:nth-child(13) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 650ms;}
                .MatchUp .Card:nth-child(14) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 700ms;}
                .MatchUp .Card:nth-child(15) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 750ms;}
                .MatchUp .Card:nth-child(16) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 800ms;}
                .MatchUp .Card:nth-child(17) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 850ms;}
                .MatchUp .Card:nth-child(18) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 900ms;}
                .MatchUp .Card:nth-child(19) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 950ms;}
                .MatchUp .Card:nth-child(20) {transform: translateY(-560px) rotateZ(180deg); animation-delay: 1000ms;}