*
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

body
{
    width: 100%;
    background-color: #FE8;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    text-transform: uppercase;
    font-style: normal;
    color: #FFD;
    text-align: center;
}

#game
{
    width: 300px;
    margin: 30px auto;
}

#new-game-button
{
    display: inline-block;
    margin: 80px auto 60px;
}

#new-game-image
{
    width: 50px;
    height: 50px;
    -webkit-transition: -webkit-transform 300ms ease-in-out;
    transition: -webkit-transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

#new-game-button:hover #new-game-image
{
    -webkit-transform: rotate(90deg) scale(1.2);
        -ms-transform: rotate(90deg) scale(1.2);
            transform: rotate(90deg) scale(1.2);
}

#disclaimer
{
    width: 280px;
    padding-left: 20px;
    margin: 0 auto;
    font-size: 10px;
    color: #91A;
    text-align: justify;
    font-weight: 400;
}

#header-image
{
    width: 300px;
    height: 150px;
}

#score
{
    width: 300px;
    height: 30px;
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 30px;
    white-space: nowrap;
    text-align: center;
    text-shadow: #9a2fe6 1px 1px, #b35ecc 2px 2px, #cd8cb3 3px 3px, #e6bb99 4px 4px, #ffea80 5px 5px, #8100FF 0px 0px;
}

#board
{
    width: 300px;
    height: 300px;
}

.char,
.card,
.card-side,
.card-side-front,
.card-side-front::before,
.card-side-front::after,
.card-side-back
{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.char
{
    cursor: pointer;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    transition: -webkit-transform 500ms ease-in-out;
    -o-transition: transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

#board.shuffle .char
{
    transition-delay: 500ms;
}

#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='0'] { z-index: 10; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='1'] { z-index: 20; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='2'] { z-index: 30; -webkit-transform: translate(200%, 0); -ms-transform: translate(200%, 0); transform: translate(200%, 0); }

#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='3'] { z-index: 40; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='4'] { z-index: 50; -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='5'] { z-index: 60; -webkit-transform: translate(200%, 100%); -ms-transform: translate(200%, 100%); transform: translate(200%, 100%); }

#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='6'] { z-index: 70; -webkit-transform: translate(0, 200%); -ms-transform: translate(0, 200%); transform: translate(0, 200%); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='7'] { z-index: 80; -webkit-transform: translate(100%, 200%); -ms-transform: translate(100%, 200%); transform: translate(100%, 200%); }
#board[data-word-char-count='3'][data-word-char-count='3'] .char[data-position='8'] { z-index: 90; -webkit-transform: translate(200%, 200%); -ms-transform: translate(200%, 200%); transform: translate(200%, 200%); }

@-webkit-keyframes load-card-animation
{
    from {opacity: 0; -webkit-transform: translate(500%, 500%); transform: translate(500%, 500%)}
    to {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0)}
}

@keyframes load-card-animation
{
    from {opacity: 0; -webkit-transform: translate(500%, 500%); transform: translate(500%, 500%)}
    to {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0)}
}

.card
{
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translate(500%, 500%);
            transform: translate(500%, 500%);
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
    -webkit-animation-name: load-card-animation;
            animation-name: load-card-animation;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.char:nth-child(1) .card, .char.collect-char:nth-child(1) .card:not(:last-child) { -webkit-animation-delay: 0; animation-delay: 0; }
.char:nth-child(2) .card, .char.collect-char:nth-child(2) .card:not(:last-child) { -webkit-animation-delay: 100ms; animation-delay: 100ms; }
.char:nth-child(3) .card, .char.collect-char:nth-child(3) .card:not(:last-child) { -webkit-animation-delay: 200ms; animation-delay: 200ms; }
.char:nth-child(4) .card, .char.collect-char:nth-child(4) .card:not(:last-child) { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
.char:nth-child(5) .card, .char.collect-char:nth-child(5) .card:not(:last-child) { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
.char:nth-child(6) .card, .char.collect-char:nth-child(6) .card:not(:last-child) { -webkit-animation-delay: 500ms; animation-delay: 500ms; }
.char:nth-child(7) .card, .char.collect-char:nth-child(7) .card:not(:last-child) { -webkit-animation-delay: 600ms; animation-delay: 600ms; }
.char:nth-child(8) .card, .char.collect-char:nth-child(8) .card:not(:last-child) { -webkit-animation-delay: 700ms; animation-delay: 700ms; }
.char:nth-child(9) .card, .char.collect-char:nth-child(9) .card:not(:last-child) { -webkit-animation-delay: 800ms; animation-delay: 800ms; }

.char.collect-char:nth-child(1) .card:last-child { -webkit-animation-delay: 500ms; animation-delay: 500ms; }
.char.collect-char:nth-child(2) .card:last-child { -webkit-animation-delay: 600ms; animation-delay: 600ms; }
.char.collect-char:nth-child(3) .card:last-child { -webkit-animation-delay: 700ms; animation-delay: 700ms; }
.char.collect-char:nth-child(4) .card:last-child { -webkit-animation-delay: 800ms; animation-delay: 800ms; }
.char.collect-char:nth-child(5) .card:last-child { -webkit-animation-delay: 900ms; animation-delay: 900ms; }
.char.collect-char:nth-child(6) .card:last-child { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; }
.char.collect-char:nth-child(7) .card:last-child { -webkit-animation-delay: 1100ms; animation-delay: 1100ms; }
.char.collect-char:nth-child(8) .card:last-child { -webkit-animation-delay: 1200ms; animation-delay: 1200ms; }
.char.collect-char:nth-child(9) .card:last-child { -webkit-animation-delay: 1300ms; animation-delay: 1300ms; }

@-webkit-keyframes collect-card-animation
{
    0% {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) }
    50% {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) }
    100% {opacity: 0; -webkit-transform: translate(-500%, -500%); transform: translate(-500%, -500%) }
}

@keyframes collect-card-animation
{
    0% {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) }
    50% {opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0) }
    100% {opacity: 0; -webkit-transform: translate(-500%, -500%); transform: translate(-500%, -500%) }
}

.char.collect-char .card:not(:last-child)
{
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-animation-duration: 800ms;
            animation-duration: 800ms;
    -webkit-animation-name: collect-card-animation;
            animation-name: collect-card-animation;
}

.card-side
{
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    transition: -webkit-transform 200ms ease-in-out;
    -o-transition: transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.char.char-selected .card-side
{
    -webkit-transform: translate(-10%, -10%);
        -ms-transform: translate(-10%, -10%);
            transform: translate(-10%, -10%);
}

.char.collect-char .card:not(:last-child) .card-side
{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

.char[data-position='0'].collect-char .card:not(:last-child) .card-side,
.char[data-position='3'].collect-char .card:not(:last-child) .card-side,
.char[data-position='6'].collect-char .card:not(:last-child) .card-side
{
    -webkit-transition-delay: 0;
         -o-transition-delay: 0;
            transition-delay: 0;
}

.char[data-position='1'].collect-char .card:not(:last-child) .card-side,
.char[data-position='4'].collect-char .card:not(:last-child) .card-side,
.char[data-position='7'].collect-char .card:not(:last-child) .card-side
{
    -webkit-transition-delay: 100ms;
         -o-transition-delay: 100ms;
            transition-delay: 100ms;
}

.char[data-position='2'].collect-char .card:not(:last-child) .card-side,
.char[data-position='4'].collect-char .card:not(:last-child) .card-side,
.char[data-position='8'].collect-char .card:not(:last-child) .card-side
{
    -webkit-transition-delay: 200ms;
         -o-transition-delay: 200ms;
            transition-delay: 200ms;
}

.card-side-front,
.card-side-back
{
    line-height: 100px;
    font-size: 90px;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.card-side-front
{
    background-color: transparent;
    -webkit-transition: text-shadow 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    transition: text-shadow 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
    -o-transition: text-shadow 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;
    transition: text-shadow 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;
    transition: text-shadow 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.card-side-back
{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    background-color: transparent;
    color: #FFFFD9;
}

.char[data-position='0'] .card-side-front,
.char[data-position='1'] .card-side-front,
.char[data-position='2'] .card-side-front
{
    text-shadow: #ff6439 1px 1px, #ff663b 2px 2px, #ff693c 3px 3px, #ff6c3e 4px 4px, #ff6f3f 5px 5px, #ff7141 6px 6px, #ff7442 7px 7px, #ff7744 8px 8px, #ff7a45 9px 9px, #ff7c46 10px 10px, #ff7f48 11px 11px, #ff8249 12px 12px, #ff854b 13px 13px, #ff874c 14px 14px, #ff8a4e 15px 15px, #ff8d4f 16px 16px, #ff9050 17px 17px, #ff9252 18px 18px, #ff9553 19px 19px, #ff9855 20px 20px, #ff9b56 21px 21px, #ff9d58 22px 22px, #ffa059 23px 23px, #ffa35b 24px 24px, #ffa65c 25px 25px, #ffa85d 26px 26px, #ffab5f 27px 27px, #ffae60 28px 28px, #ffb062 29px 29px, #ffb363 30px 30px, #ffb665 31px 31px, #ffb966 32px 32px, #ffbb68 33px 33px, #ffbe69 34px 34px, #ffc16a 35px 35px, #ffc46c 36px 36px, #ffc66d 37px 37px, #ffc96f 38px 38px, #ffcc70 39px 39px, #ffcf72 40px 40px, #ffd173 41px 41px, #ffd474 42px 42px, #ffd776 43px 43px, #ffda77 44px 44px, #ffdc79 45px 45px, #ffdf7a 46px 46px, #ffe27c 47px 47px, #ffe57d 48px 48px, #ffe77f 49px 49px, #ffea80 50px 50px, #FF6138 0px 0px;
}

.char[data-position='3'] .card-side-front,
.char[data-position='4'] .card-side-front,
.char[data-position='5'] .card-side-front
{
    text-shadow: #05a488 1px 1px, #0aa688 2px 2px, #0fa788 3px 3px, #14a987 4px 4px, #1aaa87 5px 5px, #1fac87 6px 6px, #24ad87 7px 7px, #29ae87 8px 8px, #2eb087 9px 9px, #33b186 10px 10px, #38b386 11px 11px, #3db486 12px 12px, #42b586 13px 13px, #47b786 14px 14px, #4db886 15px 15px, #52ba85 16px 16px, #57bb85 17px 17px, #5cbd85 18px 18px, #61be85 19px 19px, #66bf85 20px 20px, #6bc185 21px 21px, #70c284 22px 22px, #75c484 23px 23px, #7ac584 24px 24px, #80c784 25px 25px, #85c884 26px 26px, #8ac984 27px 27px, #8fcb84 28px 28px, #94cc83 29px 29px, #99ce83 30px 30px, #9ecf83 31px 31px, #a3d083 32px 32px, #a8d283 33px 33px, #add383 34px 34px, #b3d582 35px 35px, #b8d682 36px 36px, #bdd882 37px 37px, #c2d982 38px 38px, #c7da82 39px 39px, #ccdc82 40px 40px, #d1dd81 41px 41px, #d6df81 42px 42px, #dbe081 43px 43px, #e0e181 44px 44px, #e6e381 45px 45px, #ebe481 46px 46px, #f0e680 47px 47px, #f5e780 48px 48px, #fae980 49px 49px, #ffea80 50px 50px, #00A388 0px 0px;
}

.char[data-position='6'] .card-side-front,
.char[data-position='7'] .card-side-front,
.char[data-position='8'] .card-side-front
{
    text-shadow: #055db2 1px 1px, #0a60b1 2px 2px, #0f63b0 3px 3px, #1466af 4px 4px, #1a68ae 5px 5px, #1f6bad 6px 6px, #246eac 7px 7px, #2971ab 8px 8px, #2e74aa 9px 9px, #3377a9 10px 10px, #387aa8 11px 11px, #3d7da7 12px 12px, #427fa6 13px 13px, #4782a5 14px 14px, #4d85a4 15px 15px, #5288a3 16px 16px, #578ba2 17px 17px, #5c8ea1 18px 18px, #6191a0 19px 19px, #66949f 20px 20px, #6b969e 21px 21px, #70999d 22px 22px, #759c9c 23px 23px, #7a9f9b 24px 24px, #80a29a 25px 25px, #85a598 26px 26px, #8aa897 27px 27px, #8fab96 28px 28px, #94ae95 29px 29px, #99b094 30px 30px, #9eb393 31px 31px, #a3b692 32px 32px, #a8b991 33px 33px, #adbc90 34px 34px, #b3bf8f 35px 35px, #b8c28e 36px 36px, #bdc58d 37px 37px, #c2c78c 38px 38px, #c7ca8b 39px 39px, #cccd8a 40px 40px, #d1d089 41px 41px, #d6d388 42px 42px, #dbd687 43px 43px, #e0d986 44px 44px, #e6dc85 45px 45px, #ebde84 46px 46px, #f0e183 47px 47px, #f5e482 48px 48px, #fae781 49px 49px, #ffea80 50px 50px, #005AB3 0px 0px;
}

.char[data-position='0'].char-selected .card-side-front,
.char[data-position='1'].char-selected .card-side-front,
.char[data-position='2'].char-selected .card-side-front
{
    text-shadow: #ff7c46 1px 1px, #ff9855 2px 2px, #ffb363 3px 3px, #ffcf72 4px 4px, #ffea80 5px 5px, #FF6138 0px 0px;
}

.char[data-position='3'].char-selected .card-side-front,
.char[data-position='4'].char-selected .card-side-front,
.char[data-position='5'].char-selected .card-side-front
{
    text-shadow: #33b186 1px 1px, #66bf85 2px 2px, #99ce83 3px 3px, #ccdc82 4px 4px, #ffea80 5px 5px, #00A388 0px 0px;
}

.char[data-position='6'].char-selected .card-side-front,
.char[data-position='7'].char-selected .card-side-front,
.char[data-position='8'].char-selected .card-side-front
{
    text-shadow: #3377a9 1px 1px, #66949f 2px 2px, #99b094 3px 3px, #cccd8a 4px 4px, #ffea80 5px 5px, #005AB3 0px 0px;
}

.card-side-front::before
{
    display: block;
    width: 50px;
    height: 20px;
    position: absolute;
    left: 15px;
    top: 0;
    white-space: nowrap;
    letter-spacing: -25px;
    line-height: 63px;
}

.card[data-char='á'] .card-side-front::before,
.card[data-char='é'] .card-side-front::before,
.card[data-char='í'] .card-side-front::before,
.card[data-char='ó'] .card-side-front::before,
.card[data-char='ú'] .card-side-front::before,
.card[data-char='ý'] .card-side-front::before
{
    content: '´';
}

.card[data-char='č'] .card-side-front::before,
.card[data-char='ď'] .card-side-front::before,
.card[data-char='ě'] .card-side-front::before,
.card[data-char='ň'] .card-side-front::before,
.card[data-char='ř'] .card-side-front::before,
.card[data-char='š'] .card-side-front::before,
.card[data-char='ť'] .card-side-front::before,
.card[data-char='ž'] .card-side-front::before
{
    content: '`´';
}

.card[data-char='ů'] .card-side-front::before
{
    content: '˚';
    left: 12px;
}

.card[data-char='a'] .card-side-front::after { content: 'A' }
.card[data-char='á'] .card-side-front::after { content: 'A' }
.card[data-char='b'] .card-side-front::after { content: 'B' }
.card[data-char='c'] .card-side-front::after { content: 'C' }
.card[data-char='č'] .card-side-front::after { content: 'C' }
.card[data-char='d'] .card-side-front::after { content: 'D' }
.card[data-char='ď'] .card-side-front::after { content: 'D' }
.card[data-char='e'] .card-side-front::after { content: 'E' }
.card[data-char='é'] .card-side-front::after { content: 'E' }
.card[data-char='ě'] .card-side-front::after { content: 'E' }
.card[data-char='f'] .card-side-front::after { content: 'F' }
.card[data-char='g'] .card-side-front::after { content: 'G' }
.card[data-char='h'] .card-side-front::after { content: 'H' }
.card[data-char='@'] .card-side-front::after { content: 'CH' }
.card[data-char='i'] .card-side-front::after { content: 'I' }
.card[data-char='í'] .card-side-front::after { content: 'I' }
.card[data-char='j'] .card-side-front::after { content: 'J' }
.card[data-char='k'] .card-side-front::after { content: 'K' }
.card[data-char='l'] .card-side-front::after { content: 'L' }
.card[data-char='m'] .card-side-front::after { content: 'M' }
.card[data-char='n'] .card-side-front::after { content: 'N' }
.card[data-char='ň'] .card-side-front::after { content: 'N' }
.card[data-char='o'] .card-side-front::after { content: 'O' }
.card[data-char='ó'] .card-side-front::after { content: 'O' }
.card[data-char='p'] .card-side-front::after { content: 'P' }
.card[data-char='q'] .card-side-front::after { content: 'Q' }
.card[data-char='r'] .card-side-front::after { content: 'R' }
.card[data-char='ř'] .card-side-front::after { content: 'R' }
.card[data-char='s'] .card-side-front::after { content: 'S' }
.card[data-char='š'] .card-side-front::after { content: 'S' }
.card[data-char='t'] .card-side-front::after { content: 'T' }
.card[data-char='ť'] .card-side-front::after { content: 'T' }
.card[data-char='u'] .card-side-front::after { content: 'U' }
.card[data-char='ú'] .card-side-front::after { content: 'U' }
.card[data-char='ů'] .card-side-front::after { content: 'U' }
.card[data-char='v'] .card-side-front::after { content: 'V' }
.card[data-char='w'] .card-side-front::after { content: 'W' }
.card[data-char='x'] .card-side-front::after { content: 'X' }
.card[data-char='y'] .card-side-front::after { content: 'Y' }
.card[data-char='ý'] .card-side-front::after { content: 'Y' }
.card[data-char='z'] .card-side-front::after { content: 'Z' }
.card[data-char='ž'] .card-side-front::after { content: 'Z' }

.card-side-front::before,
.card-side-front::after
{
    transition: color 400ms ease-in-out;
}

.char.hint .card-side-front::before,
.char.hint .card-side-front::after
{
    color: #FA0;
}

@-webkit-keyframes hint-animation
{
    0%, 100% { color: #FFD; }
    50% { color: #FA0; }
}

@keyframes hint-animation
{
    0%, 100% { color: #FFD; }
    50% { color: #FA0; }
}

.char.hint .card-side-front::before,
.char.hint .card-side-front::after
{
    -webkit-animation-duration: 800ms;
            animation-duration: 800ms;
    -webkit-animation-name: hint-animation;
            animation-name: hint-animation;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.card-side-back
{
    text-shadow: #ffb503 1px 1px, #ffb605 2px 2px, #ffb708 3px 3px, #ffb80a 4px 4px, #ffb90d 5px 5px, #ffba0f 6px 6px, #ffbc12 7px 7px, #ffbd14 8px 8px, #ffbe17 9px 9px, #ffbf1a 10px 10px, #ffc01c 11px 11px, #ffc11f 12px 12px, #ffc221 13px 13px, #ffc324 14px 14px, #ffc426 15px 15px, #ffc529 16px 16px, #ffc62c 17px 17px, #ffc72e 18px 18px, #ffc931 19px 19px, #ffca33 20px 20px, #ffcb36 21px 21px, #ffcc38 22px 22px, #ffcd3b 23px 23px, #ffce3d 24px 24px, #ffcf40 25px 25px, #ffd043 26px 26px, #ffd145 27px 27px, #ffd248 28px 28px, #ffd34a 29px 29px, #ffd44d 30px 30px, #ffd54f 31px 31px, #ffd752 32px 32px, #ffd854 33px 33px, #ffd957 34px 34px, #ffda5a 35px 35px, #ffdb5c 36px 36px, #ffdc5f 37px 37px, #ffdd61 38px 38px, #ffde64 39px 39px, #ffdf66 40px 40px, #ffe069 41px 41px, #ffe16c 42px 42px, #ffe26e 43px 43px, #ffe471 44px 44px, #ffe573 45px 45px, #ffe676 46px 46px, #ffe778 47px 47px, #ffe87b 48px 48px, #ffe97d 49px 49px, #ffea80 50px 50px, #FFB400 0px 0px;
}

.char[data-value="1"] .card-side-back::before { content: '+1'; }
.char[data-value="2"] .card-side-back::before { content: '+2'; }
.char[data-value="3"] .card-side-back::before { content: '+3'; }
.char[data-value="4"] .card-side-back::before { content: '+4'; }
.char[data-value="5"] .card-side-back::before { content: '+5'; }