html, *{user-select:none;font-family:Verdana;touch-action:manipulation;}
body{text-align:center;background:#4E251F;color:white;margin:10px auto;touch-action:manipulation;}

h2{font-size:20px;}

#admin{display:inline-block;}
#board{}
#footer{color:#CCC;margin:10px 0;}
#logo{width:100px;margin:10px;height:auto;}
#logout{display:inline-block;}

#tapis{height:200px;margin:10px;background-image:url("images/transparent-logo.png");background-repeat:no-repeat;background-size:contain;background-position:center center;}
#tapis .carte{margin:5px;}

#joueurs{height:120px;margin:10px;margin-bottom:20px;}
.sens{display:inline-block;line-height:100px;height:100px;vertical-align:top;font-size:50px;width:auto;opacity:0.7;}
.joueur{position:relative;display:inline-block;height:100px;width:150px;padding-top:20px;}

#moi{position:relative;height:100px;width:150px;margin:10px;padding-top:20px;}

.avatar{height:100%;width:auto;}

.avatar-frame{position:absolute;top:20;width:100px;height:100px;left:25px;}
.prenom{position:absolute;top:85px;left:25px;width:100px;font-size:12px;font-weight:bold;text-shadow:0px 2px 2px black;}
.points{position:absolute;top:102px;left:25px;width:100px;height:30px;background-image:url("images/avatar-score.png");background-size:contain;background-position:top center;background-repeat:no-repeat;font-weight:bold;text-shadow:0px 2px 2px black;font-size:14px;}
.G{background-image:url("images/avatar-score-winner.png");}
.P{background-image:url("images/avatar-score-looser.png");}
.nbcartes{position:absolute;top:40px;left:0px;width:44px;height:48px;line-height:40px;padding-top:2px;padding-left:4px;background-size:contain;background-position:center center;background-repeat:no-repeat;font-weight:bold;font-size:16px;text-align:center;color:#4E251F;text-shadow:rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;}
.echangees{position:absolute;top:43px;right:15px;width:29px;height:40px;line-height:40px;padding-top:2px;padding-left:4px;background-size:contain;background-position:center center;background-repeat:no-repeat;font-weight:bold;font-size:16px;}
.echangees img{width:auto;height:100%;}
.emoji{position:absolute;top:0px;right:52px;width:40px;height:40px;}
.emoji img{width:auto;height:100%;}

.lot{background-image:url("images/nbcards-lot.png");}
.average{background-image:url("images/nbcards-average.png");}
.number{background-image:url("images/nbcards-number.png");}
.few{background-image:url("images/nbcards-few.png");}
.two{background-image:url("images/nbcards-two.png");}
.one{background-image:url("images/nbcards-one.png");}

#modal{display:none;position:fixed;right:0px;bottom:0px;top:35%;left:0px;background-color:#4E251F;z-index:1050;outline:0;padding:20px;border:solid 1px rgba(255, 255, 255, 0.5);}
#modalclose{position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.5);width:50px;height:50px;border-radius:50%;color:#f1f1f1;line-height:48px;font-size:35px;font-weight:bold;transition:0.3s;cursor:pointer;}
#scores{height:100%;overflow:scroll;}
#scores table{border-spacing:0;border-collapse:collapse;}
#scores th, #scores td{padding:5px;border:solid 1px white;text-align:center;}

#emojis{margin:10px 0;max-width:560px;}
#emojis img{height:40px;margin:0 3px;cursor:pointer;}

#combinaisons td{text-align:center;}
#combinaisons .titre{font-weight: bold; padding:5px;}
#combinaisons img{width:20px;height:auto;}

#pointsparcartes td{text-align:center;}
#pointsparcartes .titre{font-weight: bold; padding:5px;}

#cartes{position:relative;margin:auto;overflow:hidden;border-bottom:solid 2px white;}
#cartes .carte{position:absolute;}
#cartes .choisi{top:0px;}

#container-controles{height:50px;}
#pourjouer{display:inline-block;}
#pourechanger{display:inline-block;}
#pourjouer input[type="button"]{margin:10px 50px;font-size:18px;}
#pourechanger input[type="button"]{margin:10px 20px;font-size:18px;}

#jouer{padding:5px 15px;margin:3px 4px;display:inline-block;color:#ffffff;font-size:30px;cursor:pointer;background:#388e3c;background:linear-gradient(top, #388e3c 0%, #1f7523 100%);background:-moz-linear-gradient(top, #388e3c 0%, #1f7523 100%);background:-webkit-linear-gradient(top, #388e3c 0%, #1f7523 100%);background:-o-linear-gradient(top, #388e3c 0%, #1f7523 100%);border:1px solid #2e7d32;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-webkit-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-o-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);text-shadow:1px 1px 0px rgba(0, 0, 0, 0.50);}
#jouer:hover {background:linear-gradient(top, #52a856 0%, #388e3c 100%);background:-moz-linear-gradient(top, #52a856 0%, #388e3c 100%);background:-webkit-linear-gradient(top, #52a856 0%, #388e3c 100%);background:-o-linear-gradient(top, #52a856 0%, #388e3c 100%);}
#jouer:disabled{visibility:hidden;}
#passer{padding:5px 15px;margin:3px 4px;display:inline-block;color:#ffffff;font-size:30px;cursor:pointer;background:#dd2c00;background:linear-gradient(top, #dd2c00 0%, #c41300 100%);background:-moz-linear-gradient(top, #dd2c00 0%, #c41300 100%);background:-webkit-linear-gradient(top, #dd2c00 0%, #c41300 100%);background:-o-linear-gradient(top, #dd2c00 0%, #c41300 100%);border:1px solid #d50000;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-webkit-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-o-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);text-shadow:1px 1px 0px rgba(0, 0, 0, 0.50);}
#passer:hover{background:linear-gradient(top, #f7461a 0%, #dd2c00 100%);background:-moz-linear-gradient(top, #f7461a 0%, #dd2c00 100%);background:-webkit-linear-gradient(top, #f7461a 0%, #dd2c00 100%);background:-o-linear-gradient(top, #f7461a 0%, #dd2c00 100%);}
#donner{padding:5px 15px;margin:3px 4px;display:inline-block;color:#ffffff;font-size:30px;cursor:pointer;background:#1976d2;background:linear-gradient(top, #1976d2 0%, #005db9 100%);background:-moz-linear-gradient(top, #1976d2 0%, #005db9 100%);background:-webkit-linear-gradient(top, #1976d2 0%, #005db9 100%);background:-o-linear-gradient(top, #1976d2 0%, #005db9 100%);border:1px solid #1565c0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-webkit-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);-o-box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.25), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);text-shadow:1px 1px 0px rgba(0, 0, 0, 0.50);}
#donner:hover{background:linear-gradient(top, #3390ec 0%, #1976d2 100%);background:-moz-linear-gradient(top, #3390ec 0%, #1976d2 100%);background:-webkit-linear-gradient(top, #3390ec 0%, #1976d2 100%);background:-o-linear-gradient(top, #3390ec 0%, #1976d2 100%);}

.buttons{margin:10px;}
.button{cursor:pointer;}
select, input[type="text"]{width:100px; font-size:16px;}
input{font-size:18px;}
h1{margin:0;color:#07711b;}