noname/layout/mode/chess.css

#arena.chess{
    width:100% !important;
    height:100% !important;
    left:0 !important;
    top:0 !important;
    transition:all 0s !important;
}
#arena.chess>#me,
#arena.chess>#mebg{
    bottom:0;
    top:auto;
    border-radius:0;
}

#chess-container{
    width:100%;
    height :calc(100% - 120px);
    left:0;
    top:0;
    overflow:scroll;
    text-align:center;
    position: absolute;
}
#chess{
    margin-top:36px;
    margin-bottom:36px;
    position:relative;
}
#arena .card.thrown{
    z-index:4;
}
#canvas2{
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

#handcards1{
    height:120px;
    padding:0;
    top:calc(100% - 120px);
    width:calc(100% - 240px);
    left:120px;
}
#handcards2{
    display:none;
}
#mebg,#me{
    height:120px;
}

#system{
    z-index:5;
}
#arena>.dialog{
    width:400px;
    height:240px;
    left:calc(50% - 200px);
    top:calc(50% - 120px);
    background: rgba(0,0,0,0.2);
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
	border-radius:8px;
}
#arena>.dialog.slim:not(.center){
    top:40px;
}
#control{
    top:calc(100% - 155px);
}
/*#arena.mobile #control{
    top:calc(100% - 170px);
}*/
.fakeme{
    width:120px;
    height:120px;
    border-radius:0px;
    top:0;
}
.fakeme.avatar{
    left:0;
    background-size:cover;
}
.fakeme.player{
    left:calc(100% - 120px);
    overflow:scroll;
    text-align:center;
    transition: all 0s;
}
.fakeme.player.zoomed{
    width: 240px;
    height: 240px;
    left:calc(100% - 240px);
    top:calc(100% - 240px);
    background-size:200%;
}
.fakeme.player.zoomed>div{
    width: 90px;
    height: 90px;
    left: 0;
    top: 16px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 16px;
}
.fakeme.player>div{
    width:45px;
    height:45px;
    background-size:cover;
    border-radius:4px;
    position:relative;
    left:0;
    top:8px;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 8px;
    transition:box-shadow 0.5s;
}

.fakeme.player>.selectable{
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 1) 0 0 5px, rgba(0, 133, 255, 1) 0 0 10px;
}
.fakeme.player>.selected{
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(255, 0, 0, 1) 0 0 5px, rgba(255, 0, 0, 1) 0 0 10px !important;
}
.fakeme.player>.dead{
    filter:grayscale(1);
    -webkit-filter:grayscale(1);
    opacity:0.5;
}
.card.drawing{
    animation: drawing2 1s;
    animation-fill-mode: forwards;
    -webkit-animation: drawing2 1s;
    -webkit-animation-fill-mode: forwards;
}

.player.playergrid,.player.obstacle{
    background: rgba(0,0,0,0.2);
	box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
	border-radius:8px;
}
.player.playerblank{
    background: none;
}
.player.obstacle{
    background: repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.2) 10px,
      rgba(0,0,0,0.1) 10px,
      rgba(0,0,0,0.1) 20px
    );
}
.playergrid.temp{
    opacity:0.3;
}
.chessscroll{
    height:calc(100% - 162px);
    width:20px;
    top:42px;
    z-index:1;
    position:fixed;
}
.chessscroll.left{
    left:0;
}
.chessscroll.right{
    right:0;
}
.button.forbidden{
    opacity:0.6
}
#arena.leaderhide>*:not(canvas){
    opacity:0 !important;
    transition: all 0.5s !important;
}
#arena.leadercontrol>#control{
    transition: all 0.5s !important;
}
.player.treasure{
    box-shadow: none;
}
.player.treasure .count,
.player.treasure .identity{
    display: none;
}
.player.treasure .avatar{
    width: 120px;
    height: 120px;
    left: 0;
    top: 0;
}
.player.minskin .action{
    text-shadow: black 0 0 1px !important;
    font-size: 16px !important;
    left:0;
}
.player .action.thunder{
    color: rgb(117,186,255);
}
#arena.selecting .player .action:not(.hidden){
    opacity: 1 !important;
}
.button .intro.showintro.tafang{
    font-family: 'xinwei';
    font-size: 20px;
    top: 66px;
    right: 5px;
    left:auto;
}
.dialog .buttons>.button.character.squarebutton{
    height:90px;
}
.dialog .buttons>.button.character.squarebutton>.hp.text{
    /*left:22px;*/
    right: 4px;
    text-align: right;
    bottom: 4px;
    top: auto;
    left: auto;
}
.dialog .buttons>.button.character.squarebutton>.name{
    top:8px;
}