@charset "UTF-8";

@media screen and (max-width: 500px),
 screen and (max-height: 598px){

    .game #navi {
        display: none;
    }

    #title {
        margin-top: 100px;
    }

    body {
        margin: 0;
    }

    .game-canvas {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*margin: auto;*/
        margin: auto 0;
    }

    .game-canvas > .kaiju {
        margin-top: 60px;
    }

    .chang {
        width: 40vw;
        height: 30vh;
        transform: translate(30vw, 30vh);
	overflow: hidden
    }

    .chang .xiaoxi {
        /*width: 140px;*/
    }

    .chang .title {
        width: 80px;
        float: left;
        font-size: 26px;
    }

    .chang .jicun {
        width: 60px;
        float: left;
    }

    .chang .shan {
        /*width: 120px;*/
    }

    .chang .pai {
        max-height: 32px;
    }

    .chang .choma {
        width: 30px;
        height: 6px;
    }

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

    .chang .defen span {
        display: block;
        width: 20vw;
        height: 5vh;
        position: absolute;
        transform-origin: 0% 0%;
	overflow: hidden;
    }

    .chang .defen .main {
        text-align: center;
        transform: translate(10vw, 12vh);
    }

    .chang .defen .xiajia {
        text-align: right;
        transform: translate(20vw, 6vh);
    }

    .chang .defen .duimian {
        text-align: center;
        transform: translate(10vw, 0);
    }

    .chang .defen .shangjia {
        text-align: left;
        transform: translate(0, 6vh);
    }

    .game-canvas > .player {
        width: 120px;
        height: 24px;
        border-radius: 10px 0px;
        padding: 2px 16px;
        font-size: 18px;
    }

    .game-canvas > .player.main {
        transform: translate(120px, 340px);
    }

    .game-canvas > .player.xiajia {
        transform: translate(664px, 360px) rotate(270deg);
    }

    .game-canvas > .player.duimian {
        transform: translate(680px, 70px) rotate(180deg);
    }

    .game-canvas > .player.shangjia {
        transform: translate(136px, 40px) rotate(90deg);
    }

    .shoupai.main {
        width: 90vw;
        height: 10vh; 
        transform: translate(10vw, 85vh);
    }

    .shoupai.xiajia {
        width: 60vh;
        height: 10vw;
        transform: translate(90vw, 75vh) rotate(270deg);
    }

    .shoupai.duimian {
        width: 60vw;
        height: 10vh;
        transform: translate(80vw, 10vh) rotate(180deg);
    }

    .shoupai.shangjia {
        width: 60vh;
        height: 10vw;
        transform: translate(10vw, 10vh) rotate(90deg);
    }

    #table .user.main{
        transform: translate(10vw, 75vh);
    }
    #table .user.xiajia{
        transform: translate(80vw, 65vh);
    }
    #table .user.duimian{
        transform: translate(70vw, 10vh);
    }
    #table .user.shangjia{
        transform: translate(10vw, 20vh);
    }

    #table .user {
        height: min(10vw, 10vh);
    }

    #table .user img {
        max-width: min(10vw, 10vh);
        max-height: min(10vw, 10vh);
    }

    #table .user .void-suit img{
        max-width: min(10vw, 10vh);
        max-height: min(10vw, 10vh);
    }

    .shoupai.main .pai {
        max-height: 13vh;
	max-width: 6vw;
    }

    .shoupai.main .fulou {
        margin-top: 0;
    }

    .shoupai.main .fulou .pai {
        max-height: 10vh;
    }

    .shoupai.main .fulou .rotate {
        width: auto;
        transform: translate(100%, 0) rotate(270deg);
	transform-origin: bottom left;
    }


    .shoupai.duimian .pai,
    .fulou .pai {
        max-height: 7vh;
	max-width: 4vw;
    }

    .shoupai.xiajia .pai,
    .shoupai.shangjia .pai,
    .fulou .pai {
        max-height: 7vw;
	max-width: 4vh;
    }

    .shoupai.xiajia .fulou,
    .shoupai.duimian .fulou,
    .shoupai.shangjia .fulou {
	margin-top: 0;
    }
    
    .shoupai.xiajia .fulou,
    .shoupai.shangjia .fulou {

    }

    .shoupai.xiajia .fulou .rotate,
    .shoupai.duimian .fulou .rotate,
    .shoupai.shangjia .fulou .rotate {
        width: 4vw;
        transform: translate(100%, 0) rotate(270deg);
	transform-origin: bottom left;
    }

    .he.main, .he.duimian {
        width: 40vw;
        height: 60vh;
    }

    .he.shangjia, .he.xiajia {
        width: 30vh;
        height: 30vm;
    }

    .he.main {
        transform: translate(30vw, 60vh);
    }

    .he.xiajia {
        transform: translate(70vw, 60vh) rotate(270deg);
    }

    .he.duimian {
        transform: translate(70vw, 30vh) rotate(180deg);
    }

    .he.shangjia {
        transform: translate(30vw, 30vh) rotate(90deg);
    }

    .he .pai {
        max-height: 32px;
    }

    .he span.lizhi {
        width: 32px;
    }

    .he div.lizhi {
        width: 140px;
        height: 12px;
	display:none;
    }

    .he div.lizhi .choma {
        max-width: 100px;
    }

    .say.main {
        text-align: center;
        transform: translate(300px, 260px);
    }

    .say.xiajia {
        text-align: left;
        transform: translate(550px, 150px);
    }

    .say.duimian {
        text-align: center;
        transform: translate(300px, 50px);
    }

    .say.shangjia {
        text-align: right;
        transform: translate(50px, 150px);
    }

    .UI {
	    width: 70vw;
        transform: translate(10vw, 75vh);
    }

    .tip.main{
        transform: translate(25vw, 75vh);
    }

    .game-canvas > .jiesuan {
        transform: translate(0px, 40px);
    }

    .jiesuan {
        padding: 1em;
        font-size: 16px;
        line-height: 1em;
    }

    .jiesuan .shan {
	padding: 1px;
    }

    .jiesuan .shan .pai {
        max-height: 32px;
	width: 5%;
    }

    .jiesuan .shoupai .pai {
        max-height: 44px;
	width: 5%;
    }

    .jiesuan .shoupai .bingpai {
        margin-top: 0;
    }

    .jiesuan .shoupai .fulou {
        margin-top: 0;
    }

    .jiesuan .shoupai .rotate {
        width: 44px;
        transform: translate(100%, 0) rotate(270deg);
	transform-origin: bottom left;
    }

    .jiesuan .fenpei {
        margin: 10px auto 0px auto;
        height: 70px;
    }

    .jiesuan .fenpei .main {
        transform: translate(146px, 40px);
    }

    .jiesuan .fenpei .xiajia {
        transform: translate(292px, 20px);
    }

    .jiesuan .fenpei .duimian {
        transform: translate(146px, 0px);
    }

    .jiesuan .fenpei .shangjia {
        transform: translate(0px, 20px);
    }

    .game-canvas > .jiezhang {
        transform: translate(0px, 10px);
    }

    .jiezhang table {
        font-size: 14px;
    }

    .jiezhang table .point {
        font-size: 20px;
    }

    .controler {
        transform: translate(150px, 60px);
    }

    .menu {
        transform: translate(530px, 280px);
    }
}