/* #region Fonts */

*{
    font-family: "Caveat", monospace;
}

/* #endregion Fonts */


/* Colour Schemes */

.colour1
{
    background-color: rgba(216, 210, 194);
    color: black;
}

.colour2
{
    background-color: rgba(250, 247, 240);
    color: black;
}

.colour3
{
    background-color: rgba(177, 116, 87);
    color: white;
}

.colour4
{
    background-color: rgba(74, 73, 71);
    color: white;
}


/* #region Background CSS */
    .backgroundImage
    {

        background-image: url("./images/deckbuilder/GOG_UI_BG_Deckbuilder_Landscape_Words.png");

        @media (max-width : 768px) {
        background-image: url("./images/deckbuilder/GOG_UI_BG_Deckbuilder_Portrait_Words.png");          
        }    

    }
/* #endregion Background CSS End */


/* #region Post-Login Menu */

.startMenu__div
{
    display: none; 
    position: absolute; 
    width: 80dvw;
    height: 40dvh;
    top: 50dvh;
    left: 10dvw;
    grid-template-columns: 1fr; 
    z-index: 3; 
    font-size: 36px;     
    
}

.startMenu__newGame__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    

    font-size: 36px;

    

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 24px;
    }

    
}

.startMenu__continueGame__btn
{
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    
    font-size: 36px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 24px;
    }
}

.startMenu__chooseChar__text
{
    display: none;

    height: 90%;
    width: 100%;    
    
    word-wrap: normal; 
    overflow: scroll;
        
    grid-column: span 3;

    font-size: 36px;

    

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }

}

.startMenu__choose__btn
{
    display: none;
    
    height: 90%;
    width: 100%;    
    
    word-wrap: normal; 
    overflow: scroll;
        
    font-size: 36px;

    
    
    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 24px;
    }
}

.startMenu__back__btn
{
    display: none;
    
    height: 90%;
    width: 100%;    
    
    word-wrap: normal; 
    overflow: scroll;
    
    grid-column: span 3;
    
    font-size: 36px;

    
    
    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
    
}
/* #endregion Post-Login Menu */


/* #region Narration */
.narrationBar
{
    display: none; 
    position: absolute; 

    width: 100%;
    height: 10%;

    left: 0;
    top: 70%;

    border: 4px solid black; 
    z-index: 7; 
    font-size: 36px; 
    
    opacity: 0.8
}

/* #endregion Narration */


/* #region Toolbar */

.toolbar__deckview
{
    display: none; 
    position:absolute; 

    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;

    grid-template-columns: repeat(5,1fr); 
    grid-template-rows: 1fr 1fr;
    
    z-index: 10; 
    border: 0; 

    font-size: 32px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 28px;
    }
    
    
}

.toolbar__deckview__scrollRight
{
    display: none; 
    position: absolute; 

    width: 10%; 
    height: 20%;
    top: 40%;
    left: 90%;

    z-index: 10; 

    font-size: 32px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
}

.toolbar__deckview__scrollLeft
{
    display: none; 
    position: absolute; 

    width: 10%; 
    height: 20%;
    top: 40%;
    left: 90%;


    z-index: 10; 

    font-size: 32px;     

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
}

.toolbar__div
{
    display: none; 
    position: absolute;

    width: 95%;
    height: 5vw;
    top: 0;
    left: 5%;

    grid-template-columns: 2fr 1fr 1fr 2fr 2fr; 
    grid-template-rows: repeat(1, 1fr);  
    z-index: 3; 
    font-size: 12px; 
    border: 1px solid black; 
    
}

.toolbar__name
{
    display: block;     
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    
    padding: 5px;
    
    
    border: solid 1px black; 
    overflow: hidden;

    font-size: 24px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 10px;
    }
}

.toolbar__health__image
{
    display: block; 

    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 5px;    
    font-size: 24px; 
    border: solid 1px black; 
    overflow: hidden;

    background-image: url('./images/ui/UI_Icon_Heart.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.toolbar__health__text
{
    display: block; 
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    
    padding: 5px;
    
    border: solid 1px black; 
    overflow: hidden;

    font-size: 24px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 10px;
    }
}

.toolbar__deck__btn
{
    display: block; 
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    
    padding: 5px;
    
    border: solid 1px black; 
    overflow: hidden;

    font-size: 24px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 10px;
    }
}

.toolbar__level
{
    display: block; 
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    
    padding: 5px;
    
    border: solid 1px black; 
    overflow: hidden;

    font-size: 24px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 10px;
    }
}

/* #endregion Toolbar */


/* #region Campaign Map */

.campaignMap__div
{
    display: none; 

    position: absolute;
    width: 80dvw;
    height: 60dvh;
    top: 20dvh;
    left: 10dvw;

    grid-template-columns: repeat(3,1fr); 
    grid-template-rows: 1fr 5fr;  
    position:absolute;
    z-index: 6; 
    font-size: 32px;
}

.campaignMap__text
{
    display: block; 
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;

    padding: 5px;
    
    border: 0; 
    overflow: hidden;

    

    font-size: 24px; 

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }

    
    
}

.campaignMap__option
{
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 25px;
    font-size: 14px; 
    border: solid black 1px; 
    overflow: hidden;

    
}

/* #endregion Campaign Map */


/* #region Scenario */

.scenario__div
{
    display: none; 
    position: absolute;

    width: 80dvw;
    height: 80dvh;
    left: 10%;
    top: 10%;

    grid-template-columns: repeat(2,1fr); 
    grid-template-rows: 3fr 1fr;
    position:absolute; 
    z-index: 5; 
    font-size: 20px;     

    @media (max-height: 500px)
    {
        top: 15%;
        height: 75%;
    }
        
    
}

.scenario__text
{
    display: block; 

    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;    
    
    grid-column: span 2;

    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        grid-column: span 1;
        font-size: 18px;
    }
}

.scenario__option
{
    display: block; 

    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;        

    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 18px;
    }
}

.scenario__finish__btn
{
    display: none; 
    
    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;        
    
    grid-column: span 2;

    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 18px;
    }
}

/* #endregion Scenario */


/* #region Battle Div */

.battle__div
{
    display: none;
    position: absolute;

    width: 100dvw;
    height: 100dvh;
    top: 0;
    left: 0;

    margin: auto; 
    z-index: 3; 
    font-size: 32px; 
    box-sizing: border-box;
}

/* #endregion Battle Div */

/* #region Battle - Player */
.battle__player__div
{
    display: grid;
    position: absolute;

    width: 20%;
    height: 10%;
    top: 10%;
    left: 0;

    margin: auto; 
    z-index: 5; 
    font-size: 32px; 
    box-sizing: border-box;

    grid-template-rows: 1fr 1fr; 
    grid-template-columns: repeat(6,1fr);

    border: solid 1px black;

}

.battle__player__details
{
    position: absolute; 
    display: grid;
    border: 1px solid black;
}

.battle__player__title
{
    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;

    grid-column: span 6;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__player__image
{
    height: 100%;
    width: 100%;

    display: none;

    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;

    background-image: url('./images/ui/UI_Icon_Coin.png');    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__player__wallet__text
{
    height: 100%;
    width: 100%;

    display: none;

    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;

    background-image: url('./images/ui/UI_Icon_Coin.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__player__health__image
{
    height: 100%;
    width: 100%;    

    word-wrap: normal; 
    overflow: scroll;
    border: solid 1px black;

    background-image: url(./images/ui/UI_Icon_Heart.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__player__health__text
{
    height: 100%;
    width: 100%;    
    
    word-wrap: normal; 
    overflow: scroll;
    border: solid 1px black;

    grid-column: span 2;
    overflow: hidden;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__player__armour__image
{
    height: 100%;
    width: 100%;    
    
    word-wrap: normal; 
    overflow: scroll;
    border: solid 1px black;

    background-image: url(./images/ui/UI_Icon_Shield.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__player__armour__text
{
    height: 100%;
    width: 100%;    

    word-wrap: normal; 
    overflow: scroll;
    border: solid 1px black;
    
    grid-column: span 2;
    overflow: hidden;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

/* #endregion Battle - Player */

/* #region Battle - Enemy */

.battle__enemy__div
{
    display: grid;
    position: absolute;

    width: 20%;
    height: 60%;
    top: 10%;
    right: 0;

    right: 0; 
    grid-template-rows: 1fr 1fr; 
    grid-template-columns: repeat(6,1fr);
    
    z-index: 5;
    
    
}

.battle__enemy
{
    display: grid;
    position: absolute;

    width: 20%;
    height: 100%;
    top: 10%;
    right: 0;

    right: 0; 
    grid-template-rows: 1fr 1fr; 
    grid-template-columns: repeat(6,1fr);    

    border: solid 1px black;
    
}

.battle__enemy__title
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;    

    grid-column: span 6; 
    overflow: hidden; 
    word-wrap: normal;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__enemy__health__image
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;    

    background-image: url(./images/ui/UI_Icon_Heart.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__enemy__health__text
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;    

    grid-column: span 2;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__enemy__armour__image
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;    

    background-image: url(./images/ui/UI_Icon_Shield.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__enemy__armour__text
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    border: solid black 1px;    

    grid-column: span 2;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

/* #endregion Battle - Enemy */

/* #region Battle - Sprites */

.battle__sprites
{
    position: absolute;
    display: grid; 

    width: 60%;
    height: 60%;
    left: 20%;
    top: 10%;

    grid-template-rows: 1fr 1fr; 
    grid-template-columns: 2fr 1fr 2fr 2fr 2fr; 
    border: solid black 4px; 
    
    align-items: center; 
    justify-content: center; 
}

.battle__sprites__player
{
    display: grid; 
    width: 100%;
    height: 50%;
    grid-row-start: 2; 
    grid-column-start: 1; 
    grid-template-rows: 1fr 2fr 2fr; 
    border:solid transparent 4px; 
    grid-row: span 4;
    
}

.battle__sprites__player__name
{
    display: flex;

    width: 100%; 
    height: 100%; 
    max-height: 100%;

    
    align-items: flex-end;
    justify-content: center;
    

    padding: 5px;        
    border:solid transparent 1px; 
    overflow: hidden;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__sprites__player__image
{
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 5px;
    color: white; 
    font-size: 14px; 
    border:solid transparent 1px; 
    overflow: hidden;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.battle__sprites__player_actionPlanned
{
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 5px;
    color: white;     
    border:solid transparent 1px; 
    overflow: hidden;

    font-size: 14px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 10px;
    }
}

.battle__sprites__divider
{
    display: block; 
    grid-row: span 4; 
    border: 0;
}

.battle__sprites__enemy__1
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 1; 
    grid-column-start: 3; 
    grid-template-rows: 1fr 2fr 1fr; 
    border: solid transparent 4px;
    overflow: hidden;

}

.battle__sprites__enemy__3
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 1; 
    grid-column-start: 4; 
    grid-template-rows: 1fr 2fr 1fr; 
    border:solid transparent 4px;
    overflow: hidden;

}

.battle__sprites__enemy__5
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 1; 
    grid-column-start: 5; 
    grid-template-rows: 1fr 2fr 1fr; 
    border: solid transparent 4px;
    overflow: hidden;
    
}

.battle__sprites__enemy__2
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 2; 
    grid-column-start: 3; 
    grid-template-rows: 1fr 2fr 1fr; 
    border: solid transparent 4px;
    overflow: hidden;

}

.battle__sprites__enemy__4
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 2; 
    grid-column-start: 4; 
    grid-template-rows: 1fr 2fr 1fr; 
    border: solid transparent 4px;
    overflow: hidden;

}

.battle__sprites__enemy__6
{
    display: none; 
    width: 100%;
    height: 100%;
    grid-row-start: 2; 
    grid-column-start: 5; 
    grid-template-rows: 1fr 2fr 1fr; 
    border: solid transparent 4px;
    overflow: hidden;

}

.battle__sprites__enemy__gridElements
{
    display: flex;
    
    height: 100%;
    width: 100%;
    overflow: hidden;
    word-wrap: normal;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    align-items: flex-end;
    justify-content: center;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }

}

.battle__sprites__enemy__actionPlanned
{
    height: 100%;
    width: 100%;
    overflow: hidden;
    word-wrap: normal;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }

}

.battle__sprites__moveDescription
{
    display: none;
    position: absolute;

    height: 10%;
    width: 60%;
    top: 70%;
    left: 20%;

    border: solid 1px black;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 16px;
    }
}

/* #endregion Battle - Sprites */

/* #region Battle - Hand */

.battle__hand__div
{
    display: none; 
    position: absolute;

    width: 100dvw; 
    height: 30dvh;
    bottom: 0;
    left: 0;

    grid-template-columns: repeat(6,1fr); 
    z-index: 3; 
    font-size: 24px;

}

.battle__hand__card
{
    display: none; 
    position: absolute; 
    height: 20dvh;
    width: 15dvw;
    left: 0;
    bottom: 0; 
    
    word-wrap: normal;
    grid-template-columns: 1fr 3fr; 
    grid-template-rows: 1fr 2fr 2fr;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        height: 15dvh;
        font-size: 12px;
        width: 20dvw;
    }
}

.battle__hand__card__top
{
    display: grid; 

    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: 0;

    grid-template-columns: 1fr 3fr; 
    grid-column: span 2;
}

.battle__hand__card__cost
{

    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: 0;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__hand__card__title
{
    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: 0;
    padding: 5px;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

.battle__hand__card__image
{
    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: 0;

    grid-column: span 2;
}

.battle__hand__card__description
{
    height: 100%;
    width: 100%;
    box-sizing: border-box; 
    word-wrap: normal; 
    overflow: scroll;
    border: 0;

    grid-column: span 2;

    font-size: 16px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 12px;
    }
}

/* #endregion Battle - Hand */

/* #region Battle - End Turn */

.battle__endTurn__btn
{
    display: none; 
    position: absolute;  
    width: 15dvw; 
    height: 10dvh;
    right: 0;
    bottom: 0;
    
    
    z-index: 3; 
    font-size: 20px;     
    overflow: scroll; 
    word-wrap: normal;

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        width: 20%;
        font-size: 12px;
    }
}

/* #endregion Battle - End Turn */

/* #region Battle - Wallet */

.battle__walletCounter__div
{
    display: none; 
    position: absolute; 

    width: 15dvw; 
    height: 10dvh;
    right: 0;
    bottom: 10dvh;

    z-index: 3; 
    
    border: solid black 4px;
    
    grid-template-columns: 1fr 1fr; 

    font-size: 20px;

    @media (max-width: 450px),(max-height: 500px)
    {
        width: 20%;
        font-size: 12px;
    }
}

.battle__walletCounter__image
{
    display:block; 

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./images/ui/UI_Icon_Coin.png);
}

/* #endregion Battle - Wallet */


/* #region Rewards */

.rewards__div
{
    display: none; 
    position:absolute;

    width: 80dvw;
    height: 80dvh;
    left: 10dvw;
    top: 10dvh;
    
    z-index: 4; 
    font-size: 32px; 
    border: 4px solid black; 
    
    grid-template-columns: repeat(3,1fr); 
    grid-template-rows: 1fr 4fr 1fr;  
}

.rewards__text
{
    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;    

    font-size: 24px;

    grid-column: span 3; 
    

    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
}

.rewards__option
{
    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;  
    
    

    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
}

.rewards__skip__btn
{
    height: 100%;
    width: 100%;
    
    word-wrap: normal; 
    overflow: scroll;    

    grid-column: span 3; 
    


    font-size: 24px;

    @media (max-width: 450px),(max-height: 500px)
    {
        font-size: 20px;
    }
}

.rewards__shader
{
    display: none; 
    position: absolute; 
    
    width: 100dvw; 
    height: 100dvh; 
    top: 0; 
    left: 0; 
    
    background-color: rgba(255,255,255,0.5); 
    z-index: 4;
}

/* #endregion Rewards */