body { background-image: url(bg.jpg);
    background-size: cover; font-family: 'rpg',monospace; min-width:750px; overflow-y: hidden;}
*{
  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}
#wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:50px auto;position: relative;width: calc(100% - 60px)}

#player { display: block; font-size:12px;  height:30px; line-height:20px; max-width:890px;}
#player .gage { width: 145px;display: block;color: white;height:30px;position: relative; float:right;}
#player .gage .value { display: inline-block;line-height:20px;}
#player .gage .value .unit { color:#999; padding-left:5px;}
#player .gage .event { display: inline-block;line-height:24px; padding-left:5px;}
#player .gage .progress { display:block !important; height:10px; width:140px; position:absolute; bottom:-10px}
#player .gage .progress .bar{ height:10px; display:block !important;}
#player a.escape {font-size: large; background: #fff;padding:  8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid black; margin-top:-2px;}
#player a.escape:hover {font-size: large; cursor:pointer; border:2px solid white; padding:8px; background:none; color:white; }
#player div.timeline { font-size: x-large;left: 40%;display: inline-block;color:white;position: absolute;
    bottom: 0px;}

#player.locked a.escape { display:none;}

#board, #table { display:block; position: absolute; margin-top: 15px; width: calc(100% + 15px)}
#board card, #table card { display: inline-block !important;background: white;height: calc(25vw * 1.25);max-height:300px;max-width:200px;width: calc(25% - 15px);margin-right: 15px;border-radius: 7px; position:relative; overflow:hidden; border:2px solid white;}
#board card { top:10px; opacity:0.01; z-index:900;}
#board card:hover { cursor:pointer;}
#board card .face { 
display:block;width: 100%;height: calc(100% - 5px);border-radius: 7px;text-align: center;
    background-image: url(./cardbg.png);

    background-size: cover;
}
#board card .face img { 
   max-height: 100%;
    max-width: 100%;
    position: relative;
    /* bottom: 0px; */
    /* left: 0px; */
    margin: 0px auto;
    margin-top: 40%;
	}
#board card .face .value   { display: block;position: absolute;width: 30px;height: 30px;left: 15px;top: 60px;font-size: 12px;text-align: center;}
#board card .face .badge   { display: block;position: absolute;width: 200px;height: 300px;left: 0px;top: 0px;text-align: center;}
#board card .face .icon    { display: block;position: absolute;width: 30px;height: 30px;left: 15px;top: 15px;font-size: 11px; z-index:900;}
#board card .face .name    { 
	display: block;
    background-color: burlywood;;
    position: absolute;
    bottom: 0px;
    text-align: center;
    font-size: 1.2em;
    width: 100%;
color: black;
}
#board card.heart .face { color:red;}
#board card.diamond .face { color:red;}

#table card { 




	border:1px solid rgb(63, 50, 29);

	-webkit-box-shadow: 20px 20px 0px 5px rgba(0, 255, 0, 0.1); /* WebKit */
	-moz-box-shadow:  inset 20px 20px 0px 5px rgb(63, 50, 29,0.5); /* Firefox */
	box-shadow: inset 2px 2px 0px 2px rgba(0, 0, 0,.90);
	   background: rgba(0,0,0,.5);

border: 2px solid #333;}
#table card .shortcut { position:absolute; right:20px; bottom:15px; color:#555;}

#board card:nth-child(2), #table card:nth-child(2) { position:absolute; left:25%;}
#board card:nth-child(3), #table card:nth-child(3) { position:absolute; left:50%;}
#board card:nth-child(4), #table card:nth-child(4) { position:absolute; left:75%;}

.card_11 .face .name,.card_13 .face .name,.card_15 .face .name,.card_17 .face .name { color:white;}

#tips { color: #555;position: absolute;bottom:0px;font-size: 12px; width:100%;max-width:900px}
#tips .key { color:#999; }
#tips a:hover { color:white;}
.btnplay{
	background-image: url(../playbtn.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.btnguide{
	background-image: url(../hoytoplaybtn.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.btnback{
	background-image: url(../backbtn.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.boton{
	color:white;
	text-align:center;
	min-width: 40%;
    max-width: 300px;
    height: 80px;
    vertical-align: middle;
    /* padding-top: 20px; */
	    margin: 0px auto;
    font-size: 2em;
	border:1px solid rgb(63, 50, 29);

	-webkit-box-shadow: 20px 20px 0px 5px rgba(0, 255, 0, 0.1); /* WebKit */
	-moz-box-shadow:  inset 20px 20px 0px 5px rgb(63, 50, 29,0.5); /* Firefox */
	box-shadow: inset 2px 2px 0px 2px rgba(0, 0, 0,.90);
	   background: rgba(0,0,0,.5);

}
#gameover,#youwin{
	    margin: 0px auto;
    text-align: center;
	margin-top: 20px;
	background-image: url(./cardbg.png);
    background-size: cover;
    width: 80%;
}
#splash { text-align: center;position:fixed; top:0px; left:0px; width:100%; height:100%;  z-index: 9000 }
#guide{
background-image: url(./cardbg.png);
    background-size: cover;
    width: 80%;
    margin: 0px auto;
    padding: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
    overflow-y: scroll;
    height: 95%;
}