@charset "UTF-8";

@import url(style.css);

body.game {
    /*color: white;*/
    /*background: black;*/
    margin: 0;
}

.game #navi {
    width: 800px;
    margin: 0 auto;
}

.game #navi a {
    color: white;
    text-decoration: none;
}

#title {
    background: white;
    color: black;
    width: 640px;
    margin: 200px auto;
    padding: 15px;
    text-align: center;
}
#title h1 {
    height: 150px;
    margin: 0px;
}
#title img {
    width: 600px;
}
#title .version {
    width: 560px;
    margin: 0 auto;
    text-align: right;
    font-family: Times, sans;
    font-size: 24px;
}
#title .loading {
    width: 560px;
    margin: 0 auto;
    text-align: left;
    font-family: Verdana, sans-serif;
    font-size: 24px;
    color: #666;
}
#title .error {
    color: red;
}

.game-canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    width: 800px;
    height: 680px;
    margin: 0px auto;
    background: #036;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
.game-canvas > * {
    position: absolute;
    transform-origin: 0% 0%;
    cursor: default;
}

.game-canvas > .kaiju {
    display: none;
    position: relative;
    border: solid 1px #666;
    width:  580px;
    background: #111;
    margin: auto;
    margin-top: 120px;
}
.kaiju .title {
    margin: 40px 20px;
    font-family: "Georgia", serif;
    font-size: 32px;
    text-align: center;
}
.kaiju .player {
    margin: 40px 20px;
    height: 132px;
    font-family: "Georgia", serif;
    font-size: 24px;
}
.kaiju .player > div {
    position: absolute;
    width: 240px;
    height: 38px;
    padding: 0px 10px;
    background: #333;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kaiju .player .main {
    transform: translate(140px, 96px);
}
.kaiju .player .xiajia {
    transform: translate(280px, 48px);
}
.kaiju .player .duimian {
    transform: translate(140px, 0px);
}
.kaiju .player .shangjia {
    transform: translate(0px, 48px);
}

.chang {
    background: #111;
    width: 280px;
    height: 160px;
    border-radius: 4px;
    transform: translate(260px, 260px);
    color: white;
}

.chang *{
    position: relative;
}

.chang .gameinfo {
    height: 35%;
    margin-bottom: 1vh;
    border-bottom: solid 1px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.chang  .brand {
    color: gold;
    font-weight: bold;
}

.chang .gameinfo .info {
    text-align: right;
}

.chang .defen {
    clear: both;
    font-size: 14px;
}

.chang .defen span {
    display: block;
    width: 120px;
    height: 24px;
    position: absolute;
    transform-origin: 0% 0%;
}
.chang .defen .main {
    text-align: center;
    transform: translate(80px, 48px);
}
.chang .defen .xiajia {
    text-align: right;
    transform: translate(150px, 24px);
}
.chang .defen .duimian {
    text-align: center;
    transform: translate(80px, 0px);
}
.chang .defen .shangjia {
    text-align: left;
    transform: translate(10px, 24px);
}

.game-canvas > .player {
    width: 120px;
    height: 30px;
    border-radius: 12px 0px;
    padding: 2px 20px;
    background: #111;
    font-size: 20px;
    font-family: "Georgia", serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.game-canvas > .player.main {
    transform: translate(120px, 570px);
}
.game-canvas > .player.xiajia {
    transform: translate(710px, 580px) rotate(270deg);
}
.game-canvas > .player.duimian {
    transform: translate(640px, 90px) rotate(180deg);
}
.game-canvas > .player.shangjia {
    transform: translate(90px, 100px) rotate(90deg);
}

.shoupai.main {
    width: 680px;
    height: 80px;
    transform: translate(120px, 600px);
}
.shoupai.xiajia {
    width: 580px;
    height: 70px;
    transform: translate(730px, 580px) rotate(270deg);
}
.shoupai.duimian {
    width: 640px;
    height: 70px;
    transform: translate(640px, 70px) rotate(180deg);
}
.shoupai.shangjia {
    width: 580px;
    height: 70px;
    transform: translate(70px, 100px) rotate(90deg);
}
.shoupai.xiajia .pai,
.shoupai.duimian .pai,
.shoupai.shangjia .pai,
.fulou .pai {
    max-height: 48px;
}
.shoupai.xiajia .fulou,
.shoupai.duimian .fulou,
.shoupai.shangjia .fulou {
    margin-top: 22px;
}

.voidsuit {
    opacity: 0.6;
}

#table .user {
    height: 50px;
    display: flex;
}

#table .user  img {
    max-width: 50px;
    max-height: 50px;
}


#table .user{
    display: flex;
}

#table .user .icon{
    display: none;
    margin: 0 1em;
}

#table .user .voidsuit-box{
    margin: 0 1em;
}

.wintiles {
    box-shadow: 0 0 10px gold;
    margin: 0 3px;
}


#table .user.main {
    transform: translate(120px, 540px);
}
#table .user.xiajia {
    transform: translate(670px, 480px) rotate(270deg);
}
#table .user.duimian {
    transform: translate(650px, 130px) rotate(180deg);
}
#table .user.shangjia {
    transform: translate(130px, 150px) rotate(90deg);
}

.meld {
    margin-left: 1em;
}

.he.main, .he.duimian {
    width: 280px;
}

.he.shangjia, .he.xiajia {
    width: 210px;
}


.he.main {
    transform: translate(260px, 420px);
}
.he.xiajia {
    transform: translate(540px, 420px) rotate(270deg);
}
.he.duimian {
    transform: translate(540px, 260px) rotate(180deg);
}
.he.shangjia {
    transform: translate(260px, 260px) rotate(90deg);
}
.he div.lizhi {
    width: 200px;
    text-align: center;
}

.say {
    display: none;
    width:  200px;
    height: 100px;
    font-size: 64px;
    font-family: serif;
    color: white;
    text-shadow:  0px -2px 4px #333,
                  2px -2px 4px #333,
                  2px  0px 4px #333,
                  2px  2px 4px #333,
                  0px  2px 4px #333,
                 -2px  2px 4px #333,
                 -2px  0px 4px #333,
                 -2px -2px 4px #333;
}
.say.main {
    text-align: center;
    transform: translate(300px, 520px);
}
.say.xiajia {
    text-align: left;
    transform: translate(600px, 290px);
}
.say.duimian {
    text-align: center;
    transform: translate(300px, 50px);
}
.say.shangjia {
    text-align: right;
    transform: translate(0px, 290px);
}

.UI {
    display: none;
    width: 550px;
    text-align: right;
    transform: translate(120px, 550px);
}
.UI span {
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    background: black;
    border-radius: 5px;
    white-space: nowrap;    
    cursor: pointer;
}

.tip.main{
    transform: translate(300px, 500px);
    text-align: center;
    padding: 2px 1em;
    max-width: 200px;
    background-color: darkgreen;
    display: none;
}
.tip.main span{
    font-size: 18px;
    color: aliceblue;
}
.tip.main img{
    max-height: 40px;
    max-width: 30px;
}


.game-canvas > .jiesuan {
    position: relative;
    transform: translate(0px, 100px);
}
.jiesuan {
    display: table;
    min-width: 460px;
    padding: 1em;
    background: rgba(0,0,0,0.8);
    margin: auto;
}
.jiesuan .shan {
    width: 90%;
    margin: 0px auto;
    padding: 1px;
    text-align: center;
}
.jiesuan .baopai {
    float:   left;
}
.jiesuan .fubaopai {
    float:   right;
}
.jiesuan .shan .pai {
    max-height: 36px;
    vertical-align: bottom;
}
.jiesuan .shan:after {
    display: block;
    content: '';
    clear: both;
}
.jiesuan .shoupai {
    clear: both;
    width: auto;
    text-align: center;
    white-space: pre;
}
.jiesuan .shoupai .pai {
    max-height: 48px;
}
.jiesuan .shoupai .fulou {
    margin-top: 22px;
    margin-left: 4px;
}
.jiesuan .hupai table {
    margin: 10px auto;
    min-width:  280px;
}
.jiesuan .hupai table .fanshu {
    text-align: right;
}
.jiesuan .hupai table .defen {
    text-align: right;
}
.jiesuan .jicun {
    font-size: 16px;
    font-family: "Georgia", serif;
    text-align: center;
}
.jiesuan .choma {
    width: 60px;
    height: 8px;
    padding-left: 8px;
}
.jiesuan .pingju {
    margin-top:     50px;
    margin-bottom: 100px;
    text-align: center;
}
.jiesuan .restart-tip{
    color:greenyellow;
    text-align: right;
}
.jiesuan .fenpei {
    width: 380px;
    height: 80px;
    margin: 15px auto;
    line-height: 16px;
}
.jiesuan .fenpei .name {
    clear: both;
    display: block;
    float: left;
}
.jiesuan .fenpei .defen {
    display: block;
    float: left;
}
.jiesuan .fenpei .diff {
    display: block;
    float: right;
}
.jiesuan .fenpei .main,
.jiesuan .fenpei .xiajia,
.jiesuan .fenpei .duimian,
.jiesuan .fenpei .shangjia {
    position: absolute;
    width: 88px;
}
.jiesuan .fenpei .main {
    transform: translate(146px, 60px);
}
.jiesuan .fenpei .xiajia {
    transform: translate(292px, 30px);
}
.jiesuan .fenpei .duimian {
    transform: translate(146px, 0px);
}
.jiesuan .fenpei .shangjia {
    transform: translate(146px, 60px);
    transform: translate(0px, 30px);
}

.jiesuan .hand{
    display: flex;
    justify-content: space-evenly;
    margin: 1em auto;
}

.jiesuan .meld{
    margin-left: 3px;
}

.game-canvas > .jiezhang {
    position: relative;
    transform: translate(0px, 60px);
}
.jiezhang {
    display: none;
    width: 680px;
    margin: auto;
    border: solid 1px black;
    background: rgba(0,0,0,0.9);
}
.jiezhang table {
    width: 640px;
    margin: 18px auto;
    font-size: 18px;
    font-family: "Georgia", serif;
    border-collapse: collapse;
}
.jiezhang table thead {
    border-bottom: solid 2px white;
}
.jiezhang table tfoot {
    border-top: solid 2px white;
}
.jiezhang table .name {
    width: 18%;
    text-align: center;
}
.jiezhang table .jushu {
    padding-left: 1em;
}
.jiezhang table .jieguo {
    text-align: center;
}
.jiezhang table .diff,
.jiezhang table .defen {
    width: 18%;
    padding: 0px 1.2em;
    text-align: right;
}
.jiezhang table .zhuangjia {
    background: #333;
}
.jiezhang table .baojia,
.jiezhang table .pochan,
.jiezhang table .minus {
    color: red;
}
.jiezhang table .hule,
.jiezhang table .guanjun,
.jiezhang table .plus {
    color: #0ff;
}
.jiezhang table .point {
    border-top: solid 1px white;
    text-align: center;
    font-size:  24px;
}
.jiezhang.summary tbody tr:hover,
.jiezhang.summary tbody tr:hover td {
    background: #999;
}
.jiezhang .paipu {
    width: 640px;
    margin: 10px auto;
}
.jiezhang .paipu a {
    display: inline-block;
    padding: 2px 10px;
    font-size: 14px;
    background: #666;
    border-radius: 5px;
    white-space: nowrap;    
    cursor: pointer;
    text-decoration: none;
    color: white;
}
.jiezhang .paipu .next {
    float: right;
}
.jiezhang .paipu:after {
    display: block;
    content: '';
    clear: both;
}

.controler {
    transform: translate(120px, 120px);
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: 16px;
    color: white;
    opacity: 0.3;
}
.controler:hover {
    opacity: 1.0;
}
.controler .scale .off{
    color: #666;
}

.menu {
    width: 120px;
    transform: translate(560px, 480px);
    font-size: 14px;
    text-align: right;
}
.menu a {
    color: white;
    text-decoration: none;
    opacity: 0.3;
}
.menu a:hover {
    opacity: 1.0;
}

@media print {
    body.game {
        /*color: black;*/
        /*background: white;*/
    }
    .game-canvas {
        margin: 15px auto;
        background: white;
    }
    .chang {
        background: white;
        border: solid 1px #ccc;
    }
    .game-canvas .player {
        background: white;
        border: solid 1px #ccc;
    }
    .jiesuan, .jiezhang {
        background: white;
        border: solid 1px #ccc;
    }
    .controler {
        display: none;
    }
    .menu {
        display: none !important;
    }
}