body,html{
    margin:0;
    padding:0;
    background-color:#00f;
    color:#fff;
    font-family:"Hobo Std",Impact,"Marker Felt","Comic Sans MS";
    font-size:18px;background-image:url("../img/advice_dog_background.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat
}
body{
    margin:20px 0
}

.heading:after{
    content:"";
    display:block;
    clear:both
}

h1.title{
    font-size:40px;
    font-weight:700;
    margin:0 0 5px;
    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
}

.best-container,.score-container{
    position:relative;
    display:inline-block;
    background:#000;
    padding:15px 25px;
    font-size:25px;
    height:25px;
    line-height:47px;
    font-weight:700;
    border-radius:3px;
    color:#fff;
    margin-top:8px;
    text-align:center
}

.best-container:after,.score-container:after{
    position:absolute;
    width:100%;
    top:10px;
    left:0;
    text-transform:uppercase;
    font-size:13px;
    line-height:13px;
    text-align:center;
    color:#d00
}

.best-container .score-addition,.score-container .score-addition{
    position:absolute;
    right:30px;
    color:red;
    font-size:25px;
    line-height:25px;
    font-weight:700;
    color:rgba(255,255,255,.9);
    z-index:100;
    -webkit-animation:move-up .6s ease-in;
    -moz-animation:move-up .6s ease-in;
    animation:move-up .6s ease-in;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;animation-fill-mode:both
}

.score-container:after{
    content:"Score"
}

.best-container:after{
    content:"Best"
}
p{
    margin-top:0;margin-bottom:10px;
    line-height:1.65
}
a{
    color:#fff;
    font-weight:700;
    text-decoration:underline;
    cursor:pointer
}

strong.important{
    text-transform:uppercase
}

hr{
    border:none;
    border-bottom:1px solid #fff;
    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
    }
}

.game-container{
    margin-top:20px;
    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:#000;
    border-radius:6px;
    width:500px;
    height:500px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.game-container .game-message{
    display:none;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(221,0,0,.5);
    z-index:100;
    text-align:center;
    -webkit-animation:fade-in .8s ease 1.2s;
    -moz-animation:fade-in .8s ease 1.2s;
    animation:fade-in .8s ease 1.2s;
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    animation-fill-mode:both
}

.game-container .game-message p{
    font-size:60px;
    font-weight:700;
    height:60px;
    line-height:60px;
    margin-top:222px
}

.game-container .game-message .lower{
    display:block;
    margin-top:59px
}

.game-container .game-message a{
    display:inline-block;
    background:#000;
    border-radius:3px;padding:0 20px;
    text-decoration:none;color:#fff;
    height:40px;line-height:42px;
    margin-left:9px
}

.game-container .game-message a.keep-playing-button{
    display:none
}

.game-container .game-message.game-won{
    background:rgba(255,0,0,.5);
    color:#fff
}

.game-container .game-message.game-won a.keep-playing-button{
    display:inline-block
}

.game-container .game-message.game-over,.game-container .game-message.game-won{
    display:block
}

.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:rgba(255,0,212,0.767)
}

.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(0,0);
    -moz-transform:translate(0,0);
    transform:translate(0,0)
}

.tile.tile-position-1-2{
    -webkit-transform:translate(0,121px);
    -moz-transform:translate(0,121px);
    transform:translate(0,121px)
}

.tile.tile-position-1-3{
    -webkit-transform:translate(0,242px);
    -moz-transform:translate(0,242px);
    transform:translate(0,242px)
}

.tile.tile-position-1-4{
    -webkit-transform:translate(0,363px);
    -moz-transform:translate(0,363px);
    transform:translate(0,363px)
}

.tile.tile-position-2-1{
    -webkit-transform:translate(121px,0);
    -moz-transform:translate(121px,0);
    transform:translate(121px,0)
}

.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,0);
    -moz-transform:translate(242px,0);
    transform:translate(242px,0)
}

.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,0);
    -moz-transform:translate(363px,0);
    transform:translate(363px,0)
}

.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:.1s ease-in-out;
    -moz-transition:.1s ease-in-out;
    transition:.1s ease-in-out;
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    transition-property:transform
}

.tile .tile-inner{
    border-radius:3px;
    background:#d00;
    text-align:center;
    font-weight:700;
    z-index:10;
    font-size:55px
}

.tile.tile-2 .tile-inner{
    background:#d00;
    box-shadow:0 0 30px 10px rgba(255,77,77,0),inset 0 0 0 1px rgba(255,255,255,0)
}

.tile.tile-4 .tile-inner{
    background:#e00000;
    box-shadow:0 0 30px 10px rgba(255,77,77,0),inset 0 0 0 1px rgba(255,255,255,0)
}

.tile.tile-8 .tile-inner{
    color:#fff;
    background:#ee4e27
}

.tile.tile-16 .tile-inner{
    color:#fff;
    background:#f23319
}

.tile.tile-32 .tile-inner{
    color:#fff;
    background:#f51c1c
}

.tile.tile-64 .tile-inner{
    color:#fff;
    background:#f70000
}

.tile.tile-128 .tile-inner{
    color:#fff;
    background:#f10000;
    box-shadow:0 0 30px 10px rgba(255,77,77,.2381),inset 0 0 0 1px rgba(255,255,255,.14286);
    font-size:45px
}

@media screen and (max-width:520px){
    .tile.tile-128 .tile-inner{
        font-size:25px
    }
}

.tile.tile-256 .tile-inner{
    color:#fff;
    background:#f40000;
    box-shadow:0 0 30px 10px rgba(255,77,77,.31746),inset 0 0 0 1px rgba(255,255,255,.19048);
    font-size:45px
}

@media screen and (max-width:520px){
    .tile.tile-256 .tile-inner{
        font-size:25px
    }
}

.tile.tile-512 .tile-inner{
    color:#fff;
    background:#f80000;
    box-shadow:0 0 30px 10px rgba(255,77,77,.39683),inset 0 0 0 1px rgba(255,255,255,.2381);
    font-size:45px
}

@media screen and (max-width:520px){
    .tile.tile-512 .tile-inner{
        font-size:25px}
    }
    
    .tile.tile-1024 .tile-inner{
        color:#fff;
        background:#fb0000;
        box-shadow:0 0 30px 10px rgba(255,77,77,.47619),inset 0 0 0 1px rgba(255,255,255,.28571);
        font-size:35px}
        
        @media screen and (max-width:520px){
            .tile.tile-1024 .tile-inner{
                font-size:15px
            }
        }
        
        .tile.tile-2048 .tile-inner{
            color:#fff;
            background:red;
            box-shadow:0 0 30px 10px rgba(255,77,77,.55556),inset 0 0 0 1px rgba(255,255,255,.33333);
            font-size:35px
        }
        
        @media screen and (max-width:520px){
            .tile.tile-2048 .tile-inner{
                font-size:15px
            }
        }
        
        .tile.tile-super .tile-inner{
            color:#fff;
            background:#3d3030;
            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 .2s ease .1s;
                -moz-animation:appear .2s ease .1s;
                animation:appear .2s ease .1s;
                -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 .2s ease .1s;
                -moz-animation:pop .2s ease .1s;
                animation:pop .2s ease .1s;
                -webkit-animation-fill-mode:backwards;
                -moz-animation-fill-mode:backwards;
                animation-fill-mode:backwards
            }
            
            .above-game{
                margin-top:20px
            }
            
            .above-game:after{
                content:"";
                display:block;
                clear:both
            }
            .game-intro{float:left;
                line-height:42px;
                margin-bottom:0
            }
            .restart-button{
                display:inline-block;
                background:#000;
                border-radius:3px;
                padding:0 20px;
                text-decoration:none;
                color:#fff;
                height:40px;
                line-height:42px;
                display:block;
                text-align:center;
                float:right
            }
            .game-explanation{
                margin-top:50px
            }
            .browser-buttons{
                text-align:center
            }
            @media screen and (max-width:520px){
                body,html{
                    font-size:15px
                }
                body{
                    margin:20px 0;
                    padding:0 20px}
                    h1.title{
                        font-size:27px;
                        margin-top:15px
                    }
                    .container{
                        width:280px;
                        margin:0 auto
                    }
                    .best-container,.score-container{
                        margin-top:0;
                        padding:15px 10px;
                        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:#000;
                        border-radius:6px;
                        width:280px;
                        height:280px;
                        -webkit-box-sizing:border-box;
                        -moz-box-sizing:border-box;
                        box-sizing:border-box
                    }
                    
                    .game-container .game-message{
                        display:none;
                        position:absolute;
                        top:0;
                        right:0;
                        bottom:0;
                        left:0;
                        background:rgba(221,0,0,.5);
                        z-index:100;
                        text-align:center;
                        -webkit-animation:fade-in .8s ease 1.2s;
                        -moz-animation:fade-in .8s ease 1.2s;animation:fade-in .8s ease 1.2s;
                        -webkit-animation-fill-mode:both;
                        -moz-animation-fill-mode:both;
                        animation-fill-mode:both
                    }
                    .game-container .game-message p{
                        font-size:60px;
                        font-weight:700;
                        height:60px;
                        line-height:60px;
                        margin-top:222px
                    }
                    .game-container .game-message .lower{
                        display:block;
                        margin-top:59px
                    }
                    .game-container .game-message a{
                        display:inline-block;
                        background:#000;
                        border-radius:3px;
                        padding:0 20px;
                        text-decoration:none;
                        color:#fff;
                        height:40px;
                        line-height:42px;
                        margin-left:9px
                    }
                    .game-container .game-message a.keep-playing-button{
                        display:none
                    }
                    .game-container .game-message.game-won{
                        background:rgba(255,0,0,.5);
                        color:#fff
                    }
                    .game-container .game-message.game-won a.keep-playing-button{
                        display:inline-block
                    }
                    .game-container .game-message.game-over,.game-container .game-message.game-won{
                        display:block
                    }
                    .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(255, 0, 212, 0.767)
                    }
                    .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(0,0);
                        -moz-transform:translate(0,0);
                        transform:translate(0,0)
                    }
                    .tile.tile-position-1-2{
                        -webkit-transform:translate(0,67px);
                        -moz-transform:translate(0,67px);
                        transform:translate(0,67px)
                    }
                    .tile.tile-position-1-3{
                        -webkit-transform:translate(0,135px);
                        -moz-transform:translate(0,135px);
                        transform:translate(0,135px)
                    }
                    .tile.tile-position-1-4{
                        -webkit-transform:translate(0,202px);
                        -moz-transform:translate(0,202px);
                        transform:translate(0,202px)
                    }
                    .tile.tile-position-2-1{
                        -webkit-transform:translate(67px,0);
                        -moz-transform:translate(67px,0);
                        transform:translate(67px,0)
                    }
                    .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,0);
                        -moz-transform:translate(135px,0);
                        transform:translate(135px,0)
                    }
                    .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,0);
                        -moz-transform:translate(202px,0);
                        transform:translate(202px,0)
                    }
                    .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 p{
                        font-size:30px!important;
                        height:30px!important;
                        line-height:30px!important;
                        margin-top:90px!important
                    }
                    .game-message .lower{
                        margin-top:30px!important
                    }
                }