#game-score, #game-timer {
    display: none
}

#game-score.active, #game-timer.active {
    display: block
}

.visualization {
    background-color: #080;
    opacity: .2;
    position: absolute;
    z-index: 1000000
}

.overlayContainer {
    display: none;
    position: absolute;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .8)
}

.dummy {
    visibility: none
}

.tile {
    background-repeat: no-repeat;
    background-position: center
}

.tileB1 {
    background-image: url(../images/b1.svg);
    background-size: cover
}

.tileB2 {
    background-image: url(../images/b2.svg);
    background-size: cover
}

.tileB3 {
    background-image: url(../images/b3.svg);
    background-size: cover
}

.tileB4 {
    background-image: url(../images/b4.svg);
    background-size: cover
}

.tileB5 {
    background-image: url(../images/b5.svg);
    background-size: cover
}

.tileB6 {
    background-image: url(../images/b6.svg);
    background-size: cover
}

.tileB7 {
    background-image: url(../images/b7.svg);
    background-size: cover
}

.tileB8 {
    background-image: url(../images/b8.svg);
    background-size: cover
}

.tileB9 {
    background-image: url(../images/b9.svg);
    background-size: cover
}

.tileC1 {
    background-image: url(../images/c1.svg);
    background-size: cover
}

.tileC2 {
    background-image: url(../images/c2.svg);
    background-size: cover
}

.tileC3 {
    background-image: url(../images/c3.svg);
    background-size: cover
}

.tileC4 {
    background-image: url(../images/c4.svg);
    background-size: cover
}

.tileC5 {
    background-image: url(../images/c5.svg);
    background-size: cover
}

.tileC6 {
    background-image: url(../images/c6.svg);
    background-size: cover
}

.tileC7 {
    background-image: url(../images/c7.svg);
    background-size: cover
}

.tileC8 {
    background-image: url(../images/c8.svg);
    background-size: cover
}

.tileC9 {
    background-image: url(../images/c9.svg);
    background-size: cover
}

.tileDG {
    background-image: url(../images/dg.svg);
    background-size: cover
}

.tileDR {
    background-image: url(../images/dr.svg);
    background-size: cover
}

.tileDW {
    background-image: url(../images/dw.svg);
    background-size: cover
}

.tileF {
    background-image: url(../images/f.svg);
    background-size: cover
}

.tileF1 {
    background-image: url(../images/f1.svg);
    background-size: cover
}

.tileF2 {
    background-image: url(../images/f2.svg);
    background-size: cover
}

.tileF3 {
    background-image: url(../images/f3.svg);
    background-size: cover
}

.tileF4 {
    background-image: url(../images/f4.svg);
    background-size: cover
}

.tileN1 {
    background-image: url(../images/n1.svg);
    background-size: cover
}

.tileN2 {
    background-image: url(../images/n2.svg);
    background-size: cover
}

.tileN3 {
    background-image: url(../images/n3.svg);
    background-size: cover
}

.tileN4 {
    background-image: url(../images/n4.svg);
    background-size: cover
}

.tileN5 {
    background-image: url(../images/n5.svg);
    background-size: cover
}

.tileN6 {
    background-image: url(../images/n6.svg);
    background-size: cover
}

.tileN7 {
    background-image: url(../images/n7.svg);
    background-size: cover
}

.tileN8 {
    background-image: url(../images/n8.svg);
    background-size: cover
}

.tileN9 {
    background-image: url(../images/n9.svg);
    background-size: cover
}

.tileS {
    background-image: url(../images/s.svg);
    background-size: cover
}

.tileS1 {
    background-image: url(../images/s1.svg);
    background-size: cover
}

.tileS2 {
    background-image: url(../images/s2.svg);
    background-size: cover
}

.tileS3 {
    background-image: url(../images/s3.svg);
    background-size: cover
}

.tileS4 {
    background-image: url(../images/s4.svg);
    background-size: cover
}

.tileWE {
    background-image: url(../images/we.svg);
    background-size: cover
}

.tileWN {
    background-image: url(../images/wn.svg);
    background-size: cover
}

.tileWS {
    background-image: url(../images/ws.svg);
    background-size: cover
}

.tileWW {
    background-image: url(../images/ww.svg);
    background-size: cover
}

@media (max-width: 520px) {
    .mahjongPage .solitr-menu-item {
        padding: 0 10px
    }
}

@media (max-width: 420px) {
    .mahjongPage .solitr-menu-item {
        font-size: 14px
    }
}

.mahjongContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    height: calc(100vh - 86px)
}

.mahjongContainer::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.mahjongContainer .mahjongGame {
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    max-width: 100vw
}

.mahjongContainer .mahjongAd {
    position: absolute;
    overflow: hidden;
    left: calc(((100vh - 111px) * 1.48026 + 20px) + 140px);
    top: 17px;
    bottom: 0;
    right: 0
}

.mahjong-shuffle-dropdown {
    left: auto !important;
    right: 0 !important
}

#mahjongCanvas {
    position: relative;
    z-index: 0;
    cursor: default;
    width: 100%;
    height: 100%
}

.tileOverlay.unblocked {
    cursor: pointer
}

.tile.removed, .tileOverlay.removed, .tileShadow.removed {
    visibility: hidden;
    pointer-events: none
}

.animatedStar {
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmNWNkNjt9LmNscy0ye2ZpbGw6bm9uZTtzdHJva2U6IzgwMWE2NjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+c3RhcjI8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTMyLDBBMzIsMzIsMCwwLDAsNjQsMzIsMzIsMzIsMCwwLDAsMzIsNjQsMzIsMzIsMCwwLDAsMCwzMiwzMiwzMiwwLDAsMCwzMiwwWiIvPjxjaXJjbGUgY2xhc3M9ImNscy0yIiByPSIzMiIvPjxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeD0iNjQiIHI9IjMyIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTIiIGN4PSI2NCIgY3k9IjY0IiByPSIzMiIvPjxjaXJjbGUgY2xhc3M9ImNscy0yIiBjeT0iNjQiIHI9IjMyIi8+PC9zdmc+);
    background-size: cover;
    will-change: opacity;
    transform: translate3d(0, 0, 0)
}

.tileOverlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .01) 7%, rgba(0, 0, 0, .01) 93%, rgba(0, 0, 0, .1) 100%), linear-gradient(to right, rgba(0, 0, 0, .02) 0, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .02) 100%)
}

.tileOverlay.selected {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .05) 7%, rgba(0, 0, 0, .05) 93%, rgba(0, 0, 0, .1) 100%), linear-gradient(to right, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .03) 100%), linear-gradient(to bottom, rgba(255, 210, 0, .2), rgba(255, 0, 0, .2))
}

.tileOverlay.hinted {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .05) 7%, rgba(0, 0, 0, .05) 93%, rgba(0, 0, 0, .1) 100%), linear-gradient(to right, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, .03) 100%), linear-gradient(to bottom, rgba(255, 210, 0, .12), rgba(255, 0, 0, .12))
}