@import url(fonts/clear-sans.css);

html,

body {

    margin: 0;


    color: #fff;

    font-family: Comic Sans Ms, "Helvetica Neue", Arial, sans-serif;

    font-size: 18px;

}



body {

    padding: 80px 0;

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/di-devlin-maincraft.jpg);

    background-size: cover;

    background-attachment: fixed;

}
h2 {
    display: inline-block;
    font-size: 16px;
    line-height: 1.1;
    margin: 0;
}
ol li {
    text-align: left;
}
p {
    text-align: left;
}
.list-link {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 10px;
    -ms-flex-align: center;
    list-style: none;
}
.list-link, .list-link li {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.list-link li {
    -ms-flex: 1 0 48%;
    flex: 1 0 48%;
    border: 1px solid #fff;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    padding: 5px 0;
}
.list-link li a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}


input {

    display: inline-block;

    background: #8f7a66;

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    cursor: pointer;

    font: inherit;

    border: none;

    outline: none;

    box-sizing: border-box;

    font-weight: bold;

    margin: 0;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}



input[type="text"],

input[type="email"] {

    cursor: auto;

    background: #fcfbf9;

    font-weight: normal;

    color: #776e65;

    padding: 0 15px;

}



input[type="text"]::-webkit-input-placeholder,

input[type="email"]::-webkit-input-placeholder {

    color: #9d948c;

}



input[type="text"]::-moz-placeholder,

input[type="email"]::-moz-placeholder {

    color: #9d948c;

}



input[type="text"]:-ms-input-placeholder,

input[type="email"]:-ms-input-placeholder {

    color: #9d948c;

}



.heading:after {

    content: "";

    display: block;

    clear: both;

}



h1.title {

    font-size: 30px;

    font-weight: bold;

    margin: 0;

    display: block;

    float: left;

}



@-webkit-keyframes move-up {

    0% {

        top: 25px;

        opacity: 1;

    }

    100% {

        top: -50px;

        opacity: 0;

    }

}



@-moz-keyframes move-up {

    0% {

        top: 25px;

        opacity: 1;

    }

    100% {

        top: -50px;

        opacity: 0;

    }

}



@keyframes move-up {

    0% {

        top: 25px;

        opacity: 1;

    }

    100% {

        top: -50px;

        opacity: 0;

    }

}



.scores-container {

    float: right;

    text-align: right;

}



.score-container,

.best-container {

    position: relative;

    display: inline-block;

    background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(../images/btn-bgc.jpg);

    background-size: cover;

    background-position-y: bottom;

    filter: drop-shadow(2px 4px 6px black);

    padding: 15px 55px;

    font-size: 25px;

    height: 25px;

    line-height: 47px;

    font-weight: bold;

    border-radius: 3px;

    color: white;

    margin-top: 8px;

    text-align: center;

}



.score-container:after,

.best-container:after {

    position: absolute;

    width: 100%;

    top: 10px;

    left: 0;

    text-transform: uppercase;

    font-size: 13px;

    line-height: 13px;

    text-align: center;

    color: #eee4da;

}



.score-container .score-addition,

.best-container .score-addition {

    position: absolute;

    right: 30px;

    color: red;

    font-size: 25px;

    line-height: 25px;

    font-weight: bold;

    color: rgba(119, 110, 101, 0.9);

    z-index: 100;

    -webkit-animation: move-up 600ms ease-in;

    -moz-animation: move-up 600ms ease-in;

    animation: move-up 600ms ease-in;

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    animation-fill-mode: both;

}



.score-container:after {

    content: "Счёт";

}



.best-container:after {

    content: "Лучший счёт";

}



p {

    margin-top: 0;

    margin-bottom: 10px;

    line-height: 1.65;

}



a {

    color: #d600bf;

    font-weight: bold;

    text-decoration: underline;

    cursor: pointer;

}



strong.important {

    text-transform: uppercase;

}



hr {

    border: none;

    border-bottom: 1px solid #d8d4d0;

    margin-top: 20px;

    margin-bottom: 30px;

}



.container {

    width: 500px;

    margin: 0 auto;

}



@-webkit-keyframes fade-in {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



@-moz-keyframes fade-in {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



@keyframes fade-in {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



@-webkit-keyframes slide-up {

    0% {

        margin-top: 32%;

    }

    100% {

        margin-top: 20%;

    }

}



@-moz-keyframes slide-up {

    0% {

        margin-top: 32%;

    }

    100% {

        margin-top: 20%;

    }

}



@keyframes slide-up {

    0% {

        margin-top: 32%;

    }

    100% {

        margin-top: 20%;

    }

}



.game-container {

    margin-top: 40px;

    position: relative;

    padding: 15px;

    cursor: default;

    -webkit-touch-callout: none;

    -ms-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -ms-touch-action: none;

    touch-action: none;

    background: #222;

    border-radius: 6px;

    width: 500px;

    height: 500px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}



.game-message {

    display: none;

    background: #333;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 100;

    padding-top: 0px;

    text-align: center;

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    animation-fill-mode: both;

}



.game-message p {

    font-size: 60px;

    font-weight: bold;

    height: 0px;

    line-height: 0px;

    margin-top: 0;

}



.game-message .lower {

    display: block;

    margin-top: 29px;

}



.game-message .mailing-list {

    margin-top: 52px;

}



.game-message .mailing-list strong {

    display: block;

    margin-bottom: 10px;

}



.game-message .mailing-list .mailing-list-email-field {

    width: 230px;

    margin-right: 5px;

}



.game-message a {

    display: inline-block;

    background: #d600bf;

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    cursor: pointer;

    margin-left: 85px;

}



.game-message a.keep-playing-button {

    display: none;

}



.game-message .score-sharing {

    display: inline-block;

    vertical-align: middle;

    margin-left: 10px;

}



.game-message.game-won {

    background: rgba(237, 194, 46, 0.5);

    color: #f9f6f2;

}



.game-message.game-won a.keep-playing-button {

    display: inline-block;

}



.game-message.game-won,

.game-message.game-over {

    display: block;

}



.game-message.game-won p,

.game-message.game-over p {

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    animation-fill-mode: both;

}



.game-message.game-won .mailing-list,

.game-message.game-over .mailing-list {

    -webkit-animation-fill-mode: both;

    -moz-animation-fill-mode: both;

    animation-fill-mode: both;

}



.grid-container {

    position: absolute;

    z-index: 1;

}



.grid-row {

    margin-bottom: 15px;

}



.grid-row:last-child {

    margin-bottom: 0;

}



.grid-row:after {

    content: "";

    display: block;

    clear: both;

}



.grid-cell {

    width: 106.25px;

    height: 106.25px;

    margin-right: 15px;

    float: left;

    border-radius: 3px;

    background: #333;

}



.grid-cell:last-child {

    margin-right: 0;

}



.tile-container {

    position: absolute;

    z-index: 2;

}



.tile,

.tile .tile-inner {

    width: 107px;

    height: 107px;

    line-height: 116.25px;

}



.tile.tile-position-1-1 {

    -webkit-transform: translate(0px, 0px);

    -moz-transform: translate(0px, 0px);

    transform: translate(0px, 0px);

}



.tile.tile-position-1-2 {

    -webkit-transform: translate(0px, 121px);

    -moz-transform: translate(0px, 121px);

    transform: translate(0px, 121px);

}



.tile.tile-position-1-3 {

    -webkit-transform: translate(0px, 242px);

    -moz-transform: translate(0px, 242px);

    transform: translate(0px, 242px);

}



.tile.tile-position-1-4 {

    -webkit-transform: translate(0px, 363px);

    -moz-transform: translate(0px, 363px);

    transform: translate(0px, 363px);

}



.tile.tile-position-2-1 {

    -webkit-transform: translate(121px, 0px);

    -moz-transform: translate(121px, 0px);

    transform: translate(121px, 0px);

}



.tile.tile-position-2-2 {

    -webkit-transform: translate(121px, 121px);

    -moz-transform: translate(121px, 121px);

    transform: translate(121px, 121px);

}



.tile.tile-position-2-3 {

    -webkit-transform: translate(121px, 242px);

    -moz-transform: translate(121px, 242px);

    transform: translate(121px, 242px);

}



.tile.tile-position-2-4 {

    -webkit-transform: translate(121px, 363px);

    -moz-transform: translate(121px, 363px);

    transform: translate(121px, 363px);

}



.tile.tile-position-3-1 {

    -webkit-transform: translate(242px, 0px);

    -moz-transform: translate(242px, 0px);

    transform: translate(242px, 0px);

}



.tile.tile-position-3-2 {

    -webkit-transform: translate(242px, 121px);

    -moz-transform: translate(242px, 121px);

    transform: translate(242px, 121px);

}



.tile.tile-position-3-3 {

    -webkit-transform: translate(242px, 242px);

    -moz-transform: translate(242px, 242px);

    transform: translate(242px, 242px);

}



.tile.tile-position-3-4 {

    -webkit-transform: translate(242px, 363px);

    -moz-transform: translate(242px, 363px);

    transform: translate(242px, 363px);

}



.tile.tile-position-4-1 {

    -webkit-transform: translate(363px, 0px);

    -moz-transform: translate(363px, 0px);

    transform: translate(363px, 0px);

}



.tile.tile-position-4-2 {

    -webkit-transform: translate(363px, 121px);

    -moz-transform: translate(363px, 121px);

    transform: translate(363px, 121px);

}



.tile.tile-position-4-3 {

    -webkit-transform: translate(363px, 242px);

    -moz-transform: translate(363px, 242px);

    transform: translate(363px, 242px);

}



.tile.tile-position-4-4 {

    -webkit-transform: translate(363px, 363px);

    -moz-transform: translate(363px, 363px);

    transform: translate(363px, 363px);

}



.tile {

    position: absolute;

    -webkit-transition: 100ms ease-in-out;

    -moz-transition: 100ms ease-in-out;

    transition: 100ms ease-in-out;

    -webkit-transition-property: -webkit-transform;

    -moz-transition-property: -moz-transform;

    transition-property: transform;

}



.tile .tile-inner {

    border-radius: 3px;

    background: #eee4da;

    text-align: center;

    font-weight: bold;

    z-index: 10;

    font-size: 55px;

}



.tile.tile-2 .tile-inner {

    background: url("./images/2.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);

}



.tile.tile-4 .tile-inner {

    background: url("./images/4.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);

}



.tile.tile-8 .tile-inner {

    color: #f9f6f2;

    background-size: cover;

    background: url("./images/8.gif");

}



.tile.tile-16 .tile-inner {

    color: #f9f6f2;

    background: url("./images/16.gif");

    background-size: cover;

}



.tile.tile-32 .tile-inner {

    color: #f9f6f2;

    background: url("./images/32.gif");

    background-size: cover;

}



.tile.tile-64 .tile-inner {

    color: #f9f6f2;

    background: url("./images/64.gif");

    background-size: cover;

}



.tile.tile-128 .tile-inner {

    color: #f9f6f2;

    background: url("./images/128.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);

    font-size: 45px;

}



@media screen and (max-width: 520px) {

    .tile.tile-128 .tile-inner {

        font-size: 25px;

    }

}



.tile.tile-256 .tile-inner {

    color: #f9f6f2;

    background: url("./images/256.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);

    font-size: 45px;

}



@media screen and (max-width: 520px) {

    .tile.tile-256 .tile-inner {

        font-size: 25px;

    }

}



.tile.tile-512 .tile-inner {

    color: #f9f6f2;

    background: url("./images/512.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);

    font-size: 45px;

}



@media screen and (max-width: 520px) {

    .tile.tile-512 .tile-inner {

        font-size: 25px;

    }

}



.tile.tile-1024 .tile-inner {

    color: #f9f6f2;

    background: url("./images/1024.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);

    font-size: 35px;

}



@media screen and (max-width: 520px) {

    .tile.tile-1024 .tile-inner {

        font-size: 15px;

    }

}



.tile.tile-2048 .tile-inner {

    color: #f9f6f2;

    background: url("./images/2048.gif");

    background-size: cover;

    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);

    font-size: 35px;

}



@media screen and (max-width: 520px) {

    .tile.tile-2048 .tile-inner {

        font-size: 15px;

    }

}



.tile.tile-super .tile-inner {

    color: #f9f6f2;

    background: #3c3a32;

    font-size: 30px;

}



@media screen and (max-width: 520px) {

    .tile.tile-super .tile-inner {

        font-size: 10px;

    }

}



@-webkit-keyframes appear {

    0% {

        opacity: 0;

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    100% {

        opacity: 1;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



@-moz-keyframes appear {

    0% {

        opacity: 0;

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    100% {

        opacity: 1;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes appear {

    0% {

        opacity: 0;

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    100% {

        opacity: 1;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



.tile-new .tile-inner {

    -webkit-animation: appear 200ms ease 100ms;

    -moz-animation: appear 200ms ease 100ms;

    animation: appear 200ms ease 100ms;

    -webkit-animation-fill-mode: backwards;

    -moz-animation-fill-mode: backwards;

    animation-fill-mode: backwards;

}



@-webkit-keyframes pop {

    0% {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    50% {

        -webkit-transform: scale(1.2);

        -moz-transform: scale(1.2);

        transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



@-moz-keyframes pop {

    0% {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    50% {

        -webkit-transform: scale(1.2);

        -moz-transform: scale(1.2);

        transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes pop {

    0% {

        -webkit-transform: scale(0);

        -moz-transform: scale(0);

        transform: scale(0);

    }

    50% {

        -webkit-transform: scale(1.2);

        -moz-transform: scale(1.2);

        transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        transform: scale(1);

    }

}



.tile-merged .tile-inner {

    z-index: 20;

    -webkit-animation: pop 200ms ease 100ms;

    -moz-animation: pop 200ms ease 100ms;

    animation: pop 200ms ease 100ms;

    -webkit-animation-fill-mode: backwards;

    -moz-animation-fill-mode: backwards;

    animation-fill-mode: backwards;

}

.above-game {
    display: flex;
    flex-flow: row;
    gap: 10px;
    margin: 20px 0;
}



.above-game:after {

    content: "";

    display: block;

    clear: both;

}



.game-intro {

    flex: 1 0 0;

    line-height: 24px;

    margin-bottom: 0;

}



.restart-button {

    display: inline-block;

    background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(../images/btn-bgc.jpg);

    background-size: cover;

    background-position-y: bottom;

    filter: drop-shadow(2px 4px 6px black);

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    cursor: pointer;

    display: block;

    text-align: center;

    float: right;

    margin-top: 20px;

    margin-bottom: 20px;

}



.game-explanation {

    margin-top: 50px;

}



.sharing {

    margin-top: 20px;

    text-align: center;

}



.sharing>iframe,

.sharing>span,

.sharing>form {

    display: inline-block;

    vertical-align: middle;

}



@media screen and (max-width: 520px) {

    html,

    body {

        font-size: 15px;

    }

    body {

        margin: 20px 0;

        padding: 0 20px;

    }

    h1.title {

        font-size: 27px;

        margin-top: 15px;

    }

    .container {

        width: 280px;

        margin: 0 auto;

    }

    .score-container,

    .best-container {

        margin-top: 0;

        padding: 15px 35px;

        min-width: 40px;

    }

    .heading {

        margin-bottom: 10px;

    }

    .game-intro {

        width: 55%;

        display: block;

        box-sizing: border-box;

        line-height: 1.65;

    }

    .restart-button {

        width: 42%;

        padding: 0;

        display: block;

        box-sizing: border-box;

        margin-top: 2px;

    }

    .game-container {

        margin-top: 17px;

        position: relative;

        padding: 10px;

        cursor: default;

        -webkit-touch-callout: none;

        -ms-touch-callout: none;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        -ms-touch-action: none;

        touch-action: none;

        background: #bbada0;

        border-radius: 6px;

        width: 280px;

        height: 280px;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

    .game-message {

        display: none;

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        background: rgba(238, 228, 218, 0.73);

        z-index: 100;

        padding-top: 40px;

        text-align: center;

        -webkit-animation: fade-in 800ms ease 1200ms;

        -moz-animation: fade-in 800ms ease 1200ms;

        animation: fade-in 800ms ease 1200ms;

        -webkit-animation-fill-mode: both;

        -moz-animation-fill-mode: both;

        animation-fill-mode: both;

    }

    .game-message p {

        font-size: 60px;

        font-weight: bold;

        height: 60px;

        line-height: 60px;

        margin-top: 222px;

    }

    .game-message .lower {

        display: block;

        margin-top: 29px;

    }

    .game-message .mailing-list {

        margin-top: 52px;

    }

    .game-message .mailing-list strong {

        display: block;

        margin-bottom: 10px;

    }

    .game-message .mailing-list .mailing-list-email-field {

        width: 230px;

        margin-right: 5px;

    }

    .game-message a {

        display: inline-block;

        background: #8f7a66;

        border-radius: 3px;

        padding: 0 20px;

        text-decoration: none;

        color: #f9f6f2;

        height: 40px;

        line-height: 42px;

        cursor: pointer;

        margin-left: 9px;

    }

    .game-message a.keep-playing-button {

        display: none;

    }

    .game-message .score-sharing {

        display: inline-block;

        vertical-align: middle;

        margin-left: 10px;

    }

    .game-message.game-won {

        background: rgba(237, 194, 46, 0.5);

        color: #f9f6f2;

    }

    .game-message.game-won a.keep-playing-button {

        display: inline-block;

    }

    .game-message.game-won,

    .game-message.game-over {

        display: block;

    }

    .game-message.game-won p,

    .game-message.game-over p {

        -webkit-animation: slide-up 1.5s ease-in-out 2500ms;

        -moz-animation: slide-up 1.5s ease-in-out 2500ms;

        animation: slide-up 1.5s ease-in-out 2500ms;

        -webkit-animation-fill-mode: both;

        -moz-animation-fill-mode: both;

        animation-fill-mode: both;

    }

    .game-message.game-won .mailing-list,

    .game-message.game-over .mailing-list {

        -webkit-animation: fade-in 1.5s ease-in-out 2500ms;

        -moz-animation: fade-in 1.5s ease-in-out 2500ms;

        animation: fade-in 1.5s ease-in-out 2500ms;

        -webkit-animation-fill-mode: both;

        -moz-animation-fill-mode: both;

        animation-fill-mode: both;

    }

    .grid-container {

        position: absolute;

        z-index: 1;

    }

    .grid-row {

        margin-bottom: 10px;

    }

    .grid-row:last-child {

        margin-bottom: 0;

    }

    .grid-row:after {

        content: "";

        display: block;

        clear: both;

    }

    .grid-cell {

        width: 57.5px;

        height: 57.5px;

        margin-right: 10px;

        float: left;

        border-radius: 3px;

        background: rgba(238, 228, 218, 0.35);

    }

    .grid-cell:last-child {

        margin-right: 0;

    }

    .tile-container {

        position: absolute;

        z-index: 2;

    }

    .tile,

    .tile .tile-inner {

        width: 58px;

        height: 58px;

        line-height: 67.5px;

    }

    .tile.tile-position-1-1 {

        -webkit-transform: translate(0px, 0px);

        -moz-transform: translate(0px, 0px);

        transform: translate(0px, 0px);

    }

    .tile.tile-position-1-2 {

        -webkit-transform: translate(0px, 67px);

        -moz-transform: translate(0px, 67px);

        transform: translate(0px, 67px);

    }

    .tile.tile-position-1-3 {

        -webkit-transform: translate(0px, 135px);

        -moz-transform: translate(0px, 135px);

        transform: translate(0px, 135px);

    }

    .tile.tile-position-1-4 {

        -webkit-transform: translate(0px, 202px);

        -moz-transform: translate(0px, 202px);

        transform: translate(0px, 202px);

    }

    .tile.tile-position-2-1 {

        -webkit-transform: translate(67px, 0px);

        -moz-transform: translate(67px, 0px);

        transform: translate(67px, 0px);

    }

    .tile.tile-position-2-2 {

        -webkit-transform: translate(67px, 67px);

        -moz-transform: translate(67px, 67px);

        transform: translate(67px, 67px);

    }

    .tile.tile-position-2-3 {

        -webkit-transform: translate(67px, 135px);

        -moz-transform: translate(67px, 135px);

        transform: translate(67px, 135px);

    }

    .tile.tile-position-2-4 {

        -webkit-transform: translate(67px, 202px);

        -moz-transform: translate(67px, 202px);

        transform: translate(67px, 202px);

    }

    .tile.tile-position-3-1 {

        -webkit-transform: translate(135px, 0px);

        -moz-transform: translate(135px, 0px);

        transform: translate(135px, 0px);

    }

    .tile.tile-position-3-2 {

        -webkit-transform: translate(135px, 67px);

        -moz-transform: translate(135px, 67px);

        transform: translate(135px, 67px);

    }

    .tile.tile-position-3-3 {

        -webkit-transform: translate(135px, 135px);

        -moz-transform: translate(135px, 135px);

        transform: translate(135px, 135px);

    }

    .tile.tile-position-3-4 {

        -webkit-transform: translate(135px, 202px);

        -moz-transform: translate(135px, 202px);

        transform: translate(135px, 202px);

    }

    .tile.tile-position-4-1 {

        -webkit-transform: translate(202px, 0px);

        -moz-transform: translate(202px, 0px);

        transform: translate(202px, 0px);

    }

    .tile.tile-position-4-2 {

        -webkit-transform: translate(202px, 67px);

        -moz-transform: translate(202px, 67px);

        transform: translate(202px, 67px);

    }

    .tile.tile-position-4-3 {

        -webkit-transform: translate(202px, 135px);

        -moz-transform: translate(202px, 135px);

        transform: translate(202px, 135px);

    }

    .tile.tile-position-4-4 {

        -webkit-transform: translate(202px, 202px);

        -moz-transform: translate(202px, 202px);

        transform: translate(202px, 202px);

    }

    .tile .tile-inner {

        font-size: 35px;

    }

    .game-message {

        padding-top: 0;

    }

    .game-message p {

        font-size: 30px !important;

        height: 30px !important;

        line-height: 30px !important;

        margin-top: 32% !important;

        margin-bottom: 0 !important;

    }

    .game-message .lower {

        margin-top: 10px !important;

    }

    .game-message.game-won .score-sharing {

        margin-top: 10px;

    }

    .game-message.game-over .mailing-list {

        margin-top: 25px;

    }

    .game-message .mailing-list {

        margin-top: 10px;

    }

    .game-message .mailing-list .mailing-list-email-field {

        width: 180px;

    }

    .sharing>iframe,

    .sharing>span,

    .sharing>form {

        display: block;

        margin: 0 auto;

        margin-bottom: 20px;

    }

}



.pp-donate button {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    border: none;

    font: inherit;

    color: inherit;

    display: inline-block;

    background: #8f7a66;

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    cursor: pointer;

}



.pp-donate button img {

    vertical-align: -4px;

    margin-right: 8px;

}



.btc-donate {

    position: relative;

    margin-left: 10px;

    display: inline-block;

    background: #8f7a66;

    border-radius: 3px;

    padding: 0 20px;

    text-decoration: none;

    color: #f9f6f2;

    height: 40px;

    line-height: 42px;

    cursor: pointer;

}



.btc-donate img {

    vertical-align: -4px;

    margin-right: 8px;

}



.btc-donate a {

    color: #f9f6f2;

    text-decoration: none;

    font-weight: normal;

}



.btc-donate .address {

    cursor: auto;

    position: absolute;

    width: 340px;

    right: 50%;

    margin-right: -170px;

    padding-bottom: 7px;

    top: -30px;

    opacity: 0;

    pointer-events: none;

    -webkit-transition: 400ms ease;

    -moz-transition: 400ms ease;

    transition: 400ms ease;

    -webkit-transition-property: top, opacity;

    -moz-transition-property: top, opacity;

    transition-property: top, opacity;

}



.btc-donate .address:after {

    position: absolute;

    border-top: 10px solid #bbada0;

    border-right: 7px solid transparent;

    border-left: 7px solid transparent;

    content: "";

    bottom: 0px;

    left: 50%;

    margin-left: -7px;

}



.btc-donate .address code {

    background-color: #bbada0;

    padding: 10px 15px;

    width: 100%;

    border-radius: 3px;

    line-height: 1;

    font-weight: normal;

    font-size: 15px;

    font-family: Consolas, "Liberation Mono", Courier, monospace;

    text-align: center;

}



div#addown {

    margin: auto;

    width: 720px;

    margin-left: -120px;

}



.btc-donate:hover .address,

.btc-donate .address:hover .address {

    opacity: 1;

    top: -45px;

    pointer-events: auto;

}



@media screen and (max-width: 480px) {

    .btc-donate {

        width: 120px;

    }

    .btc-donate .address {

        margin-right: -150px;

        width: 300px;

    }

    .btc-donate .address code {

        font-size: 13px;

    }

    .btc-donate .address:after {

        left: 50%;

        bottom: 2px;

    }

}