/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 29.07.2017, 17:26:23
    Author     : Андрей
*/

#tetrisBox{
    margin: 20px auto;
    min-width: 477px;
    max-width: 555px;
    overflow: hidden;
    border: 10px solid #ccc;
    padding: 10px;
}
#tetrisBox .tetris-wrapper{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
}
#tetris-score{
    font-weight: bold;
}
#tetris-field{
    overflow: hidden;
    border: 1px solid #ccc;
    width: 252px;
    position: relative;
}
#tetrisBox .score-box{
    display:block;
    margin: 5px;
}
#tetrisBox .tetris-row{
    line-height: 1;
}
#tetrisBox .tetris-cell{
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
}
#tetrisBox .occupied-cell{
    background: #ccc;
    /*box-shadow: 0px -1px 9px 5px #005b90 inset;*/
}
#tetrisBox .figure-cell{
    background: #ffffff; /*greenyellow;*/
    /*box-shadow: 0px -1px 9px 5px #d62121 inset;*/
}
#tetrisBox .tetris-wrapper .tetris-cell.type-cube{
	background: #03A9F4;
	box-shadow: inset -3px -3px 5px 0px rgb(1, 111, 160), inset 3px 3px 5px 0px #a3e2ff;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-tee{
	background: #673AB7;
	box-shadow: inset -3px -3px 5px 0px rgb(59, 28, 113), inset 3px 3px 5px 0px #b087f9;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-stick{
	background: #d80909;
	box-shadow: inset -3px -3px 5px 0px rgb(146, 6, 6), inset 3px 3px 5px 0px #f9b6b6;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-corner-left{
	background: #FFC107;
	box-shadow: inset -3px -3px 5px 0px rgb(185, 139, 2), inset 3px 3px 5px 0px #ffeaaa;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-corner-right{
	background: #E91E63;
	box-shadow: inset -3px -3px 5px 0px rgb(125, 17, 54), inset 3px 3px 5px 0px #ffc0d6;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-zigzag-left{
	background: #4CAF50;
	box-shadow: inset -3px -3px 5px 0px rgb(31, 109, 34), inset 3px 3px 5px 0px #afe6b1;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-zigzag-right{
	background: #3F51B5;
	box-shadow: inset -3px -3px 5px 0px #202e79, inset 3px 3px 5px 0px #7384e2;
}
#tetrisBox .tetris-wrapper .tetris-cell.type-ground {
	background: #999999;
    box-shadow: inset -3px -3px 5px 0px rgb(57, 57, 57), inset 3px 3px 5px 0px #cdcdcd;
}
/*#tetrisBox .tetris-wrapper .tetris-cell.must-removed {
	background: #8a8a8a;
	box-shadow: inset -3px -3px 5px 0px rgb(68, 68, 68), inset 3px 3px 5px 0px #bfbfbf;
}*/

@keyframes collapse {
	50%{transform:scale(1);}
	60%{transform:scale(.8);}
	70%{transform:scale(.6);}
	80%{transform:scale(.4);}
	90%{transform:scale(.2);}
	100%{transform:scale(0);}
}

#tetrisBox .tetris-wrapper .tetris-cell.must-removed {
  animation: collapse 1s 1 ease-in-out;
}

#tetrisBox .tetris-notice{
    position: absolute;
    padding: 20px;
    width: inherit;
    text-align: center;
    top: 220px;
}