@charset "UTF-8";
html,body{
  padding:0;margin:0;
}
body{
  position: fixed;
  top: 0;  left: 0;  bottom: 0;  right: 0;
}

.ttrbg-layout{
  border: 3px solid #ccc;
  border-width: 0 3px 3px 3px;
  display: inline-block;
}

.ttrbg{
    font-size:30px;
    margin:0 auto;
    position: relative;
}

.ttrbg[data-gaming="1"]{
    filter:grayscale(0)
}
.ttrbg[data-gaming="0"]{
    transition: filter  1s ease-out;
    filter:grayscale(1);
}



.ttrbg .ready,.ttrbg .end ,.ttrbg .next {
  margin:0 auto;
  display: grid !important;
  /* grid-template-columns: repeat(6,1em);
  grid-template-rows: repeat(12,1em); */
}
.ttrbg .ttrbg-grid.next{
  font-size:0.5em;
  border:0px dashed transparent;
  border-width:0px 0px 1px 1px;
  grid-template-columns: repeat(4,1em);
  grid-template-rows: repeat(4,1em);
  width:4em;
  /* height:4em; */
  margin:0 0 2px auto;
  opacity: 0.4;
}
.ttrbg .ttrbg-grid.ready{
  border:0px dashed transparent;
  /* border-width:0px 0px 0 1px; */
}
.ttrbg .ttrbg-grid.end{
  background-color: #eee;
}

/* .ttrbg div{ width:1em;height:1em;} */



.ttrbg-grid div.box{
 box-sizing: content-box;
 opacity: 1;
}
.ttrbg-grid div.box-ready{
  border:0px dashed transparent;
  /* border-width:1px 1px 0 0; */
}
.ttrbg-grid div.box-next{
  border:0px dashed transparent;
  /* border-width:1px 1px 0 0; */
}
.ttrbg-grid div.box-end{
  /* border:1px solid #999; */
  /* border-width:1px 1px 0 0; */
}

/* 삭제될 요소 */
.ttrbg-grid div.box[data-moving="2"]{
  transition: filter  0.2s ease-out;
  filter: brightness(2);
}
.ttrbg-grid div.box[data-moving="1"]:not([data-color="0"]){
  filter: brightness(1.2);
}
.ttrbg-grid div.box[data-moving="0"]:not([data-color="0"]){
  filter: brightness(0.8);
}
.ttrbg-grid div.box[data-moving="0"]{
}

div.box[data-color="0"]{
  background-color:  transparent;
}
div.box[data-color="1"]{
  background-color:  #A80000;
}
div.box[data-color="2"]{
  background-color:  #A800A8;
}
div.box[data-color="3"]{
  background-color:  #A85400;
}
div.box[data-color="4"]{
  background-color:  #00A800;
}
div.box[data-color="5"]{
  background-color:  #00A8A8;
}
div.box[data-color="6"]{
  background-color:  #0000A8;
}
div.box[data-color="7"]{
  background-color:  #A6A800;
}
div.box[data-color="8"]{
  background-color:  #aaa;
}

div.box[data-color="80"]{
  background-color:  #999;
}
div.box[data-color="90"]{
  background-color:  #000;
}
div.box[data-color="90"]::after{
  position: absolute;
  top:0;bottom: 0;right:0;left:0;
  font-size: 0.5em;
  content: "🏆";
  overflow:hidden;
  display: flex ;
  justify-content: center;  /* 가로 중앙 */
  align-items: center; /* 세로 중앙 */
}


.info-box{
  
  display: block;
  position: relative;
  height: 2em;
  margin-bottom: 10px;
  z-index: 10px;
  margin-bottom: -2em;
}
.textInfo{
  font-size:0.5em;
  position: absolute;

  line-height: 1em;
  z-index: 10;
}
.textInfo::before{
  font-size:0.5em;
  text-transform: uppercase;
}

.textLevel{
  top: 0em;
  left:0;
}
.textLevel::before{
  content: "LEVEL : ";
}
.textScore{
  top: 1em;
  left:0;
}
.textScore::before{
  content: "SCORE : ";

}
.textRemovedBlocks{
  top: 1em;
  right: 0em;
}
.textRemovedBlocks::before{
  content: "Removed Blocks : ";
}

.textUsedTetriminoes{
  top: 0em;
  right: 0em;
}
.textUsedTetriminoes::before{
  content: "Used Tetriminoes : ";
}




.appear-box{
  pointer-events:none;
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  overflow: hidden;
  display: none;
}
.appear-box.on{
  display:inherit ;
}
.appear-box-fence{
  position: absolute;
  top:0;left:0;right:0;bottom:0;
  background-color: rgba(0,0,0,0.6);
}
.appear-box-item-center{
  display: flex ;
  justify-content: center;
  align-items: center;
}
.appear-box-content{
  white-space: pre;
  color:#fff;
  font-weight: bold;
}