/******************** Global *************************/

html, body
{
    width: 100%;
    height: 100%;
}



/*********************************************/


.noselect 
{
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.header {
    display: flex;
    width: 100%;
    height: 27px;
    background: #d76e16;
    border-bottom: 3px solid #e59b5b;
    flex-direction: row;
    justify-content: space-between;
}

.bodyPart {
    width: 100%;
    height: calc(100% - 30px);
    position: relative;
    background: #ffd17b;
}


.mainMenu {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #ffd17b;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    font-size: 32px;
    color: #eea317;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
}

.mainMenu.active
{
    display: flex;
}

.playground {
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/*********************************************/

.header .bt_button {
    font-family: fantasy;
    font-size: 21px;
    color: #eea317;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
    cursor: pointer;
}
.header .bt_button:hover {
    color: #ffac12;
}

.header .bt_back {
    margin-left: 10px;
}

.header .connectionPart {
    margin-right: 10px;
}

.header .connected:not(.isConnected) {
    display: none;
}

.header .NotConnected.isConnected {
    display: none;
}

.header .connected {display: flex;flex-direction: row;flex-wrap: nowrap;}

.header .name {
    font-family: fantasy;
    font-size: 21px;
    color: #ee6617;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
    margin-right: 20px;
}

.header .gameDisplayName {
    font-family: fantasy;
    font-size: 22px;
    color: #ee1717;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
}

/*********************************************/

.messagesToUser
{
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;

    background: #FFFFFF;
    text-align: center;
    color: #e11919;
    font-size: 21px;
    font-family: sans-serif;
}

/*********************************************/


.mainMenuPage.active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mainMenuPage {
    display: none;
}

.mainMenu .title {
    color: #db0d0d;
    font-size: 64px;
}

.mainMenu .bt_button,
.deckSelector .bt_button
{
    cursor: pointer;
}

.mainMenu .bt_button:hover,
.deckSelector .bt_button:hover
{
    color: #ffac12;
}

.createGamePage .line 
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.createGamePage .line>div 
{
    margin: auto;
    padding: 10px;
}


/*********************************************/

.main
{
    position: relative;
    width: 473px;
    height: 835px;

    background-color: #eea317;
    box-shadow: 12px 11px 16px 0px #cb8a11;
}




.player
{
    width: 100%;
    height: 162px;
}
.player>.body
{
    width: 100%;
    height: 136px;
}
.player>.id
{
    display: none;
}

.player>.name
{
    width: 100%;
    height: 26px;

    color: #ffffff;
    background-color: #d76e16;
}
.player .nbCards
{
    width: 81px;
    height: 100%;
    font-size: 64px;
    line-height: 122px;
    color: #ffffff;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.player .deck
{
    width: calc(100% - 108px);
    height: 100%;

    vertical-align: middle;
    overflow-x: auto;
    display: inline-block;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 20px;
}
.player .card
{
    display: inline-block;
    width: 89px;
    height: 116px;
    
    /* Todo leger decallage space -3px */
    margin-left: -20px;
    margin-top: 10px;
    cursor: pointer;
}

.player.gameOn:not(.yourTurn)
{ 
    filter: sepia(100%); 
}

.battleField {
    width: 100%;
    height: calc(100% - 324px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.maskNoClick
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    filter: blur(2px);
}
.maskNoClick.gameOn
{
    display: block;
}
.maskNoClick.gameOn.yourTurn
{
    height: 162px;
}

/*********************************************/

.card
{
    position: relative;
    width: 80px;
    height: 116px;
    vertical-align: middle;
    border-radius: 11px;
    overflow: hidden;
}

.card.used
{
    opacity: 0.5;
    display: none;
}

.card .background,
.card .image,
.card .foreground
{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.card .image {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    left: 4px;
    top: 4px;
}

.card .background { background-color: #57584b; }
.card[player_index="0"] .background { background-color: #3461b4; }
.card[player_index="1"] .background { background-color: #b43434; }


.card .image img {
    width: auto;
    height: 100%;
    margin: auto;
    text-align: center;
    vertical-align: middle;
}

.card .name {
    position: absolute;
    bottom: 0px;
    text-align: center;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
    left: 0px;
    width: 100%;
    text-shadow: 2px 2px 2px #000000, -2px -2px 2px #000000, -2px 2px 2px #000000, 2px -2px 2px #000000;
}

.card .foreground
{
    border: 4px solid #d9bc91;
    border-radius: 11px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

.player .card:hover .foreground,
.player .card.selected .foreground,
.deckSelector .card:hover .foreground,
.deckSelector .card.selected .foreground 
{
    border-color: #ff3001;
}

.card .points
{
    position: absolute;
    top: 3px;
    left: 3px;
    width: 31px;
    height: 39px;
    text-shadow: 2px 2px 2px #000000, -2px -2px 2px #000000, -2px 2px 2px #000000, 2px -2px 2px #000000;
    color: #FFFFFF;
}

.card .points .left,
.card .points .top,
.card .points .right,
.card .points .bottom
{
    position: absolute;
    width: 50%;
    height: 50%;
}

.card .points .left
{
    top: 25%;
    left: 0px;
}
.card .points .right
{
    top: 25%;
    right: 0px;
}
.card .points .top
{
    top: 0px;
    left: 25%;
}
.card .points .bottom
{
    bottom: 0px;
    left: 25%;
}

.card .points .name
{
    position: absolute;
    bottom: 3px;
    left: 0px;
    width: 100%;
    height: 20px;

    font-size: 20px;
}


/*********************************************/

.winScreen
{
    display: none;

    width: 100%;
    height: 100%;
    position: absolute;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: fantasy;
    font-size: 37px;
    color: #ee1717;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
    background: #ffffff5c;
}

.winScreen.active
{
    display: flex;
}

.playground .bt_exitGame
{
    display: none;
    position: absolute;
    bottom: 183px;
    font-family: fantasy;
    font-size: 32px;
    color: #eea317;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
}
.playground .bt_exitGame.active
{
    display: block;
}
.playground .bt_exitGame.active:hover
{
    color: #ff3001;
}


/*********************************************/

.deckSelector {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
}

.deckSelector.active {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #e5b45bc4;
}

.deckSelector .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 100px;
    max-height: calc(100% - 150px);
    overflow-y: auto;
}

.deckSelector .bt_button,
.deckSelector .title,
.deckSelector .nbCards
{
    font-family: fantasy;
    font-size: 32px;
    color: #eea317;
    text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #ffffff, -2px 2px 2px #ffffff, 2px -2px 2px #ffffff;
}


/*********************************************/

.jointGamePage {
    width: 100%;
}

.listGameinstance {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-height: calc(100% - 100px);
}

.joinGame {width: 100%;border: 1px solid #e2a34b;display: flex;flex-wrap: nowrap;justify-content: space-between;font-size: 20px;}

.joinGame.selected {
    background: #e7101045;
}

.joinTableEmpty
{
    text-align: center;
    font-size: 25px;
}

/*********************************************/


.battleField_place {
    width: 240px;
    height: 348px;
}


.battleField .line {
    height: 116px;
    width: 100%;
    display: flex;
}

.battleField .cardPlaceHolder {
    width: 80px;
    height: 116px;
    display: inline-flex;
    border: 1px solid #cb8825;
    border-radius: 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.battleField .cardPlaceHolder:hover {
    border-color: #ffffff;
}

.battleField .card {
    display: inline-flex;
}





/*********************************************/

#mainMenu
{
    position: fixed;
    left: 50%;
    top: 0%;
    z-index: 999;
}


#mainMenu .button, .panelsContainer .button
{
    height: 30px;
    border: 1px solid rgba(0,0,0, 0.75);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}
#mainMenu .button:hover, .panelsContainer .button:hover
{
    background-color: rgba(128, 128, 128, 0.5);
}



/******************** Image Effects *************************/

/* https://www.w3schools.com/howto/howto_css_image_effects.asp */
.effect_blur { filter: blur(2px); }
.effect_brightness { filter: brightness(150%); }
.effect_darkness { filter: brightness(50%); }
.effect_contrast { filter: contrast(150%); }
.effect_lessContrast { filter: contrast(50%); }
.effect_grayscale { filter: grayscale(100%); }
.effect_lessColor { filter: grayscale(50%); }
.effect_huerotate_90 { filter: hue-rotate(90deg); }
.effect_huerotate_180 { filter: hue-rotate(180deg); }
.effect_huerotate_270 { filter: hue-rotate(270deg); }
.effect_invertColor { filter: invert(100%); }
.effect_saturate { filter: saturate(5); }
.effect_sepia { filter: sepia(100%); }