/* #region Global Elements */

*{    
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    user-select: none;
    font-size: 20;
    -webkit-user-select: none;
    height: 100%;
    
    color: black;

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    
}

body{

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

@media (max-width : 768px) 
{
    height: 100dvh;
    max-height: 100dvh;
}

position: fixed;
touch-action: manipulation;

background-attachment: scroll;
overscroll-behavior-y: none;    
overflow-y: hidden;
overflow-x: hidden;
overscroll-behavior-x: none;
color: black;
overflow-wrap: break-word;

background-repeat: no-repeat;
box-sizing: border-box;
margin: 0;
padding: 0;

}

div
{
box-sizing: border-box;
display: block;
align-items: center;
background-size: 100% 100%;
font-size: 20;
color: black;
padding: 0;
margin: 0;
border: 0;

}

button{
border: solid black 4px;
cursor: pointer;    
display: block;
box-sizing: border-box;
background-size: 100% 100%;
font-size: 8;
color: black;
text-align: center; 
padding: 0;
margin: 0;
opacity: 1;

}

/* button:hover
{
opacity: 0.8;

@media (max-width : 768px), (max-height : 768px) 
{
    opacity: 1;
}        
} */

button:disabled
{        
opacity: 0.6;                
}

button:disabled:hover
{        
opacity: 0.6;                
}

/* #endregion Global Elements End */

/* #region Buttons UI */

.button__yellow__landscape
{
background-image: url("./images/ui/buttons/yellow__landscape.png");
border: 0;
}

.button__yellow__landscape:hover
{
background-image: url("./images/ui/buttons/orange__landscape.png");
border: 0;
}

.button__yellow__square
{
background-image: url("./images/ui/buttons/yellow__square.png");
border: 0;
}

.button__yellow__square:hover
{
background-image: url("./images/ui/buttons/orange__square.png");
border: 0;
}

.button__yellow__square__fixed
{
background-image: url("./images/ui/buttons/yellow__square.png");
border: 0;
}

.button__yellow__square__fixed:hover
{
background-image: url("./images/ui/buttons/yellow__square.png");
border: 0;
}

.button__white__landscape
{
background-image: url("./images/ui/buttons/white__landscape.png");
border: 0;
}

.button__white__landscape:hover
{
background-image: url("./images/ui/buttons/orange__landscape.png");
border: 0;
}

.button__white__square
{
background-image: url("./images/ui/buttons/white__square.png");
border: 0;
}

.button__white__square:hover
{
background-image: url("./images/ui/buttons/orange__square.png");
border: 0;
}

.button__white__square:disabled:hover
{
background-image: url("./images/ui/buttons/white__square.png");
border: 0;
}

.button__white__square__fixed
{
background-image: url("./images/ui/buttons/white__square.png");
border: 0;
}

.button__white__square__fixed:hover
{
background-image: url("./images/ui/buttons/white__square.png");
border: 0;
}

.button__red__landscape
{
background-image: url("./images/ui/buttons/red__landscape.png");
border: 0;
}

.button__red__landscape:hover
{
background-image: url("./images/ui/buttons/red__landscape.png");
border: 0;
}

.button__red__square
{
background-image: url("./images/ui/buttons/red__square.png");
border: 0;
}

.button__red__square:hover
{
background-image: url("./images/ui/buttons/red__square.png");
border: 0;
}

/* #endregion Buttons UI End*/

/* #region Background CSS */
.backgroundImage
{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: 0;

}
/* #endregion Background CSS End */


/* #region textBars.js */
.title__top__div
{
    display: none;
    position: absolute; 
    width:80dvw;
    height: 10dvh;
    min-height: 100px;
    top: 0dvh;
    left: 10dvw;
    margin: auto; 
    z-index: 25; 
    font-size: 32px; 
    text-align: center; 
    align-content: center;
    color: white;

    border: solid black 2px;

    @media (max-width : 768px), (max-height : 768px) {
        height: 5dvh;
        font-size: 16px;
    }        
}

.title__mid__div
{
    display: none;
    position: absolute; 
    width: 100dvw;
    height: 10dvh;
    min-height: 100px;
    top: 45dvh;
    left: 0dvw;
    margin: auto; 
    z-index: 25; 
    font-size: 32px; 
    text-align: center; 
    align-content: center;
    color: white;

    border: solid black 2px;

    

    @media (max-width : 768px), (max-height : 768px) {
        top: 47.5dvh;
        height: 5dvh;
        font-size: 16px;
    }        
}

.title__bottom__div
{
    display: none;
    position: absolute; 
    width: 80dvw;
    height: 10dvh;
    min-height: 100px;
    bottom: 0dvh;
    left: 10dvw;
    margin: auto; 
    z-index: 25; 
    font-size: 24px; 
    text-align: center; 
    align-content: center;
    color: white;

    border: solid black 2px;

    

    @media (max-width : 768px) {
        height: 5dvh;
        font-size: 16px;
    }
    
}
/* #endregion Text Bars End */


/* #region narration.js */

.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.js */


/* #region optionsMenu.js */
.options__menu__btn
{
position: absolute;
display: block;
top: 0;
left: 0;
width: 5dvw;
max-height: 5dvh; 
height: 5dvw;
max-height: 50px;
background-color: white;
z-index: 30;
font-size: 24px;
color: white;    


@media (max-width : 768px), (max-height : 768px) 
{    
    height: 10dvw;
    max-height: 10dvh; 
    width: 10dvw;
    font-size: 12px;
}



}

.options__menu__btn:hover
{    
opacity: 0.8;    
}

.options__menu__div
{
position: absolute;
display: none;
top: 50dvh;
left: 50dvw;
width: 60dvw;
height: 60dvh;

z-index: 30;
transform: translate(-50%, -50%);
grid-template-rows: repeat(3,1fr); 
grid-template-columns: repeat(1,1fr); 
font-size: 24px;
}

.options__menu_shader
{
position: absolute;
display: none;

top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
z-index: 14;

background-color: rgba(255,255,255,0.3);
}

.options__menu__mainMenu__btn
{
height: 100%;
width: 100%;
box-sizing: border-box; 
word-wrap: normal; 
overflow: scroll;
font-size: 24px;
color: white;
}

.options__menu__signIn__btn
{
height: 100%;
width: 100%;
box-sizing: border-box; 
word-wrap: normal; 
overflow: scroll;
font-size: 24px;
color: white;
}
/* #endregion Menu Button and Area End */

/* #region login.js */
.login__div
{
position: absolute;
display: none; 
width: 100dvw;
height: 100dvh;
top: 0dvh;
left: 0dvw;

z-index: 15;
border: 0;

}

.login_usernameDiv
{
    position: absolute;
    display: grid;

    top: 35%;
    left: 20%;
    height: 25%; 
    width: 60%; 
    padding: 15px;

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

    
}

.login__text
{
height: 70%; 
width: 90%;  
color: white;    
border: 0; 
font-size: 20px;
@media (max-width : 768px), (max-height : 768px)   
{
    font-size: 12px;
}

}

.login__text:hover
{
opacity:1;
pointer-events: "none";
}

.login__inputField
{    
display: block;
height: 70%;
width: 90%;          
color: white;
border-bottom: solid black 2px; 
font-size: 24px;
outline:none;

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

}

.login__login__btn
{
    position: absolute;

    top: 70%;
    left: 50%;
    height: 10%; 
    width: 30%; 
    
    color: white;    
    font-size: 16px;
    border: solid black 2px;

    
}

.login__cancel__btn
{

    position: absolute;

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

    color: white;    
    font-size: 16px;
    border: solid black 2px;

    
}

.login__warning
{
position: absolute;
display: block;

top: 25%;
left: 20%;
height: 10%; 
width: 60%; 
grid-column: span 2;  
color: white;    
font-size: 16px;
border: solid black 4px;



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

.login__shader
{
position: absolute;
display: none;

top: 0dvh;
left: 0dvw;
width: 100dvw;
height: 100dvh;
z-index: 14;

background-color: rgba(255,255,255,0.6);
}

.saveLoginData__check__div
{
    display: grid;
    position: absolute;
    height: 10%;
    min-height: 50px; 
    width: 60%;
    top: 60%;
    left: 20%; 
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    color: white;    
    font-size: 16px;
    border: solid black 2px;    
    justify-items: center;

    
}

.saveLoginData__check
{
    height: 100%; 
    width: 100%; 
    text-align: left;
    
    color: white;    
    font-size: 16px;
    border: 0
}


.saveLoginData__check__btn
{
    height: 50%; 
    width: 50%; 
    
    
    color: white;    
    font-size: 16px;
    border: 0
}

.mainMenu__div
{
position: absolute;
display: none;
top: 70dvh;
left: 50dvw;
width: 60dvw;
height: 30dvh;

z-index: 5;
transform: translate(-50%, -50%);
grid-template-rows: repeat(2,1fr); 
grid-template-columns: repeat(1,1fr); 

font-size: 24px;
}

.mainMenu__signIn__btn
{
height: 90%;
width: 100%;
box-sizing: border-box; 
word-wrap: normal; 
overflow: scroll;
font-size: 48px;


color: white;

@media (max-width : 768px), (max-height : 768px) {
    font-size: 32px;
    }

}

.mainMenu__guest__btn
{
height: 90%;
width: 100%;
box-sizing: border-box; 
word-wrap: normal; 
overflow: scroll;
font-size: 48px;    



color: white;

@media (max-width : 768px), (max-height : 768px) {
font-size: 36px;
}

}

/* #endregion login.js */

/* #region accountDetails.js */

.account__menu__btn
{
display: none;              
background-color: white;
z-index: 20;
font-size: 24px;
color: white;    


@media (max-width : 768px) {
    font-size: 24px;            
}        
}

.account__menu__div
{
position: absolute;
display: none;
top: 50dvh;
left: 50dvw;
width: 60dvw;
height: 60dvh;

z-index: 35;
transform: translate(-50%, -50%);
grid-template-rows: 1fr 3fr 2fr 1fr; 
grid-template-columns: repeat(1,1fr); 
font-size: 24px;
}

.account__menu__div__title
{
display: block;        
width:100%;
height: 100%;
top: 0%;
left: 0%;
margin: auto; 
z-index: 20; 
font-size: 24px; 
text-align: center; 
align-content: center;
color: white;

border: solid black 4px;



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

.account__menu__div__info
{
display: block;        
width:100%;
height: 100%;
top: 0%;
left: 0%;
margin: auto; 
z-index: 20; 
font-size: 24px; 
text-align: center; 
align-content: center;
color: white;

border: solid black 4px;



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

.account__menu__shader
{
position: absolute;
display: none;

top: 0dvh;
left: 0dvw;
width: 100dvw;
height: 100dvh;
z-index: 14;

background-color: rgba(255,255,255,0.3);
}

.account__menu__savedPlayers__btn
{
height: 100%;
width: 100%;
box-sizing: border-box; 
word-wrap: normal; 
overflow: scroll;
font-size: 24px;
color: white;
}



/*Account Menu - Main Menu */
.account__savedPlayers__div
{
position: absolute;
display: none;
top: 5dvh;
left: 5dvw;
width: 90%;
height: 90%;
background-color: white;
z-index: 36;
/* transform: translate(-50%, -50%); */
grid-template-rows: 1fr 5fr 1fr 1fr; 
grid-template-columns: repeat(1,1fr); 
font-size: 24px;
}

.account__savedPlayers__totalText
{
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 15;
/* transform: translate(-50%, -50%); */
font-size: 24px;
color: white;


}

.account__savedPlayers__grid
{
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 15;
/* transform: translate(-50%, -50%); */
/* grid-template-rows: repeat(5,1fr); 
grid-template-columns: 1fr;  */
font-size: 24px;    

overflow-y: scroll;
}

.account__savedPlayers__addNewPlayer__btn
{
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 15;
/* transform: translate(-50%, -50%); */
grid-template-rows: repeat(5,1fr); 
grid-template-columns: repeat(1,1fr); 
font-size: 24px;
color: white;


}

/* Account Menu - Name Input */
.account__savedPlayers__nameInput__div
{
position: absolute;
display: none; 
width: 80dvw;
height: 30dvh;
top: 15dvh;
left: 10dvw;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 2fr 1fr 1fr;        

z-index: 37;
border: solid black 4px;

}

.account__savedPlayers__nameInput__text
{
height: 70%; 
width: 90%;  
color: white;    
border: 0; 
font-size: 24px;
@media (max-width : 768px), (max-height : 768px) 
{
    font-size: 20px;
}        
}

.account__savedPlayers__nameInput__text:hover
{
opacity:1;
pointer-events: "none";
}

.account__savedPlayers__nameInput__inputField
{    
display: block;
height: 70%;
width: 90%;
grid-column: span 3;  
color: white;
border-bottom: solid black 2px; 
font-size: 24px;
outline:none;        
}

.account__savedPlayers__nameInput__btn
{

height: 100%; 
width: 100%; 
grid-column: span 4;  
color: white;    
font-size: 24px;
}

/*Account Menu - Info Box  */
.account__savedPlayers__info__div
{
position: absolute;
display: none; 
width: 80dvw;
height: 30dvh;
top: 15dvh;
left: 10dvw;
grid-template-columns: repeat(1,1fr);
grid-template-rows: repeat(2,1fr);    

z-index: 36;
border: solid black 4px;

}

.account__savedPlayers__info__remove
{
display: block; 
width: 100%;
height: 100%;
top: 0%;
left: 0%;    

z-index: 15;
border: solid black 4px;
color: white;
font-size: 24px;

}

.account__savedPlayers__info__cancel
{
display: block; 
width: 100%;
height: 100%;
top: 0%;
left: 0%;    

z-index: 15;
border: solid black 4px;
color: white;
font-size: 24px;

}
/* #endregion accountDetails.js */

/* #region characterInput.js */

/* #region Character Input */
.charInput__div
{
    display: none;      
    position: absolute;
    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;
}

.charInput__title
{
    display: block;
    position: absolute;    
    left: 50dvw;
    height: 10dvh;
    top: 10dvh;
    transform: translate(-50%, -50%);
    color: white;
    justify-content: center;
    font-size: 24px;
    
}

.charInput__playerGrid
{
    display: grid; 
    position: absolute;   
    padding: 0px;
    margin: 0px;  
    height: 50dvh;
    width: 80dvw;
    top: 15dvh;
    left: 10dvw;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr;

    border: 0;
    z-index: 2; 
    font-size: 24px;     

    @media (max-width : 768px), (max-height : 768px) {
        grid-template-columns: 1fr; 
        grid-template-rows: repeat(8,1fr);
    }

}

.charInput__playerGrid__addNewPlayer__btn
{
    display: block;
    position: absolute;
    height: 10dvh;
    width: 80dvw;
    top: 5dvh;
    left: 10dvw;
    padding: 0px;
    margin: 0px;

    z-index: 3;
    
    font-size: 24px;
    
    
    color: white;        
}

.charInput__startGame__btn
{
    position: absolute;     
    height: 10dvh; 
    width: 80dvw; 
    top: 65dvh;
    left: 10dvw;
    color: white;
    font-size: 24px;
    z-index: 3;
    

}

.charInput__playerGrid__preset
{
    display: grid; 
    position: absolute; 
    width: 100dvw;
    height: 20dvh;
    bottom: 0dvh;
    left: 0dvw;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,1fr); 

    margin: auto; 
    z-index: 3; 
    font-size: 32px; 

    border: solid black 0px;

    overflow-y: scroll;
    
}

.charInput__playerGrid__preset__btn
{
    display: block;
    height: 100%;  
    width: 100%;
    color: white;              
    border: solid 4px black;    
    
    background-size: 100% 100%; 
    font-size: 16px;  
}
/* #endregion Character Input */

/* #region Name Input */
.nameInput__div
{
    position: absolute;
    display: none; 
    width: 80dvw;
    height: 60dvh;
    top: 25dvh;
    left: 10dvw;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 3fr 1fr 1fr 3fr;        
    z-index: 10;
    border: solid black 4px;

    

}


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

.nameInput__name__text
{
    height: 70%; 
    width: 90%;  
    color: white;    
    border: 0; 
    font-size: 24px;
    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.nameInput__name__text:hover
{
    opacity:1;
    pointer-events: "none";
}

.nameInput__inputField
{   
    display: block; 
    height: 70%;
    width: 90%;        
    color: white;
    border-bottom: solid black 2px; 
    font-size: 24px;
    outline:none;

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

.nameInput__btn
{
    
    height: 100%; 
    width: 100%; 
    grid-column: span 2;  
    color: white;    
    font-size: 24px;

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

.nameInput__preset__div
{
    display: grid;    

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

    grid-column: span 2;
    
    width: 100%;
    height: 100%;
}

.nameInput__preset__title
{
    display: block;    
    
    grid-column: span 2;

    font-size: 24px;
}



/* #endregion Name Input */

/* #endregion characterInput.js */

/* #region turnDynamics.js */

.turnDynamics__textBar
{
    display: none;
    position: absolute; 
    width: 50dvw;
    height: 30dvh;
    top: 20dvh;  
    left: 25dvw;    
    font-size: 24px;
}

/* #endregion turnDynamics.js */


/* #region customCards.js */


/* #region Custom Cards - Menu */
.customCards__menu
{
    position: absolute;
    display: none;
    top: 0dvh;
    right: 0dvw;
    width: 25dvw;
    height: 80dvh;    
    z-index: 10;    
    border: 0;

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

    @media (max-width : 768px){            
        width: 30dvw
    }        
}

.customCards__view__customiseGame__btn
{
    
    display: block;        
    width: 100%;
    height: 100%;        
    z-index: 20;
    font-size: 20px;
    
    border: solid 2px black;        

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

.customCards__view__default__btn
{
    
    display: block;        
    width: 100%;
    height: 100%;
    
    z-index: 20;
    font-size: 20px;
    
    border: solid 1px black;         

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

.customCards__back__btn
{
    
    display: block;        
    width: 100%;
    height: 100%;
    
    z-index: 20;
    font-size: 20px;
    
    border: solid 1px black;         

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

.customCards__view__btn
{
    
    display: block;        
    width: 100%;
    height: 100%;
    
    z-index: 20;
    font-size: 20px;
    
    border: solid 1px black;           

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

.customCards__add__btn
{
    
    display: block;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 100%;
    
    z-index: 20;
    font-size: 20px;
    
    border: solid 1px black;         

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

/* #endregion Custom Cards - Menu */

/* #region Custom Cards - Add Card */
.customCards__add__div
{
    position: absolute;
    display: none; 
    width: 60dvw;
    height: 80dvh;
    top: 50dvh;
    left: 50dvw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 1fr 1fr;         
    z-index: 15;
    border: solid black 4px;

    transform: translate(-50%, -50%);


    @media (max-width : 768px), (max-height : 768px) {
        width: 80dvw; 
        height: 40dvh;           
    }        
}

.customCards__text
{
    height: 70%; 
    width: 90%;          
    border: 0; 
    font-size: 24px;
    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.customCards__text:hover
{
    opacity:1;
    pointer-events: "none";
}

.customCards__inputField
{    
    display: block;
    height: 100%;
    width: 100%;               
    border: solid black 2px; 
    font-size: 24px;
    padding: 15px;
    outline:none;

    word-wrap: break-word;

    resize:none;
    
    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.customCards__btn
{
    
    height: 100%; 
    width: 100%;         
    font-size: 16px;
    border: solid black 2px;
}

/* #endregion Custom Cards - Add Card */

/* #region Custom Cards - View Card */
.customCards__view__shader
{
    position: absolute;
    display: none;

    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;
    z-index: 14;

    background-color: rgba(255,255,255,0.3);
}

.customCards__view__div
{
    position: absolute;
    display: none; 
    width: 60dvw;
    height: 70dvh;
    top: 50dvh;
    left: 50dvw;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: 5fr 5fr;        
    
    z-index: 15;
    border: solid black 4px;

    transform: translate(-50%, -50%);


    @media (max-width : 768px), (max-height : 768px) {
        width: 80dvw; 
        height: 40dvh;           
    }        
}

.customCards__view__card
{
    width: 100%;
    height: 100%;
    
    overflow: scroll;
    font-size: 16px;        

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 8px;          
    }        
}

.customCards__view__back__btn
{
    position: absolute;
    display: block;
    top: 45%;
    left: -5%;
    width: 10%;
    height: 15%;
    
    z-index: 20;
    font-size: 24px;
    
    

    transform: translate(-50%, -50%);

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

.customCards__view__more__btn
{
    position: absolute;
    display: block;
    top: 45%;
    left: 105%;
    width: 10%;
    height: 15%;
    
    z-index: 20;
    font-size: 24px;             

    transform: translate(-50%, -50%);

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

.customCards__view__cancel__btn
{   
    position: absolute;
    display: block;        
    width: 40%;
    height: 10%;
    top: 110%;
    left: 50%;
    
    z-index: 20;
    font-size: 24px;
    
    
    grid-column: span 5;

    transform: translate(-50%, -50%);

    @media (max-width : 768px), (max-height : 768px) {
        font-size: 12px;
    }        
}
/* #endregion Custom Cards - View Card */

/* #region Custom Cards - Remove Card */
.customCards__removeCardCheck__div
{
    position: absolute;
    display: none; 
    width: 60dvw;
    height: 30dvh;
    top: 50dvh;
    left: 50dvw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr; 
    
    z-index: 15;
    border: solid black 4px;

    transform: translate(-50%, -50%);


    @media (max-width : 768px), (max-height : 768px) {
        width: 80dvw; 
        height: 20dvh;           
    }        
}

.customCards__removeCardCheck__text
{
    height: 70%; 
    width: 90%;          
    border: 0; 
    font-size: 24px;
    @media (max-width : 768px), (max-height : 768px) {
        font-size: 16px;
    }        
}

.customCards__removeCardCheck__text:hover
{
    opacity:1;
    pointer-events: "none";
}

.customCards__removeCardCheck__account__btn
{
    
    height: 100%; 
    width: 100%;         
    font-size: 16px;
    border: solid black 2px;
}

.customCards__removeCardCheck__game__btn
{
    
    height: 100%; 
    width: 100%;         
    font-size: 16px;
    border: solid black 2px;
}

.customCards__removeCardCheck__cancel__btn
{
    
    height: 100%; 
    width: 100%;         
    font-size: 16px;
    border: solid black 2px;
}
/* #endregion Custom Cards - Remove Card */

/* #endregion customCards.js */

/* #region deckDrawing1.js */

.deckDrawing__div
{
    display: none;
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    top: 0dvh;
    left: 0dvw;
}

.deckDrawing__title
{
    position: absolute; 
    width: 50dvw;
    height: 30dvh;
    top: 20dvh;  
    left: 25dvw;
    /* transform: translate(-50%, -50%); */
    font-size: 24px;

    

}

.deckDrawing__title:hover
{
    opacity:1;
    pointer-events: "none";
}

.deckDrawing__drawCard__btn
{
    display: block; 
    position: absolute; 
    width: 30dvw;
    height: 10dvh;
    top: 75dvh;
    left: 35dvw;
    font-size: 36px; 
    border: solid 2px black;

    @media (max-width : 768px), (max-height : 768px) {
        width: 80dvw;
        left: 10dvw;
        top: 75dvh;
        font-size: 24px;
    }
    
}

.deckDrawing__shuffleCard__btn
{
    display: none; 
    position: absolute; 
    width: 30dvw;
    height: 15dvh;
    top: 80dvh;
    left: 35dvw;
    font-size: 36px; 
    border: solid 2px black;

    @media (max-width : 768px), (max-height : 768px) {
        width: 80dvw;
        left: 10dvw;
        top: 70dvh;
        font-size: 24px;
    }
    
}

.deckDrawing__textCard__div
{
    display: block; 
    position: absolute; 
    justify-content: center; 
    align-items: center; 
    background-size: 100% 100%;
    border: solid 2px black;

   
    height: 60dvh;
    right: 10dvw;
    top: 10dvh;
    width: 80dvw;

    @media (max-width : 768px), (max-height : 768px) {            
        height: 50dvh;
        left: 10dvw;
        top: 15dvh;
    }        
}

.deckDrawing__textCard__text
{
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 25px;
    font-size: 24px; 
    border: 0; 
    overflow: hidden;
    color: white;

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

.deckDrawing__textCard__text:hover
{
    opacity:1;
    pointer-events: "none";
}


/* #endregion deckDrawing1.js */

/* #region deckDrawing3.js */

.deckDrawing3__div
{
    display: none;
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    top: 0;
    left: 0;
}

.deckDrawing3__title:hover
{
    opacity:1;
    pointer-events: "none";
}

.deckDrawing3__card__div
{
    display: none; 
    position: absolute; 
    width: 20%;
    height: 30%;
    margin: auto; 
    border: solid black 4px; 
    justify-content: center; 
    align-items: center; 
    background-size: 100% 100%; 
    ;

    @media (max-width : 720px)
    {
        width: 40%;
        height: 15%;
    }
}

.deckDrawing3__card__cover
{
    display: none; 
    position: absolute; 
    width: 20%;
    height: 30%;
    margin: auto; 
    border: solid black 4px; 
    justify-content: center; 
    align-items: center; 
    background-size: 100% 100%; 
    

    @media (max-width : 720px)
    {
        width: 40%;
        height: 15%;
    }
}

.deckDrawing3__newChoices__btn
{
    display: none; 
    position: absolute; 
    height: 10%;
    width: 40%;
    top: 80%;
    left: 30%;
    margin: auto; 
    border: solid black 4px; 
    justify-content: center; 
    align-items: center; 
    background-size: 100% 100%; 
    
    font-size: 20px;
}

.deckDrawing3__card__text
{
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 5px;
    font-size: 24px; 
    border: 0; 
    word-wrap: normal;
    color: white;

}

/* #endregion deckDrawing3.js */

/* #region scoreboard.js */

/* #region Main Card Game CSS */

.scoreboard__div
{
    display: grid; 
    position: absolute; 
    height: 90%;
    width: 90%;
    top: 5%;
    left: 7.5%;
    grid-template-columns: repeat(1, 1fr); 
    grid-template-rows: repeat(6,1fr); 
    align-items: center; 
    align-content: center; 
    justify-items: center;
    border: 0;
    row-gap: 5px;
    border: 0;

    @media (max-width : 768px)
    {        
        font-size: 22px;
        row-gap: 20px;
    }
}

.scoreboard__player__div
{
    display: none;
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    
    font-size: 36px;
    grid-template-columns: 4fr 3fr 1fr 1fr 1fr 1fr;    
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    
    border: solid white 2px;

    @media (max-width : 768px) 
    {
        grid-template-columns: 4fr 3fr 2fr 2fr;
        grid-template-rows: 1fr 1fr;

        height: 100%;
        font-size: 22px;
    }
}

.scoreboard__player
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    
    font-size: 24px;
    border: solid white 2px;

    grid-row: span 1;
        

    

    @media (max-width : 768px) 
    {
        grid-row: span 2;
        font-size: 22px;
    }
}

.scoreboard__player__score
{
    height: 90%;
    width: 90%;    
    word-wrap: normal; 
    overflow: scroll;
    color: black;
    font-size: 50px;
    border: 0;    

    grid-row: span 1;

    text-align: center;
    
    @media (max-width : 768px) 
    {
        height: 85%;
        font-size: 42px;
        grid-row: span 2;
    }
}

.scoreboard__player__btn
{
    height: 100%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;
    color: white;
    font-size: 40px;
    border: solid white 1px;
    

    @media (max-width : 768px) 
    {
        height: 100%;
        font-size: 32px;
    }
}




/* #endregion scoreboard.js */

/* #endregion scoreboard.js */

/* #region handCard.js */

.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;

}

.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;
    }
}

.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;
}

.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;
    }
}

.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;
    }
}

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

    grid-column: span 2;
}

.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 handCard.js */


/* #region battlefieldUI.js */

.battleScene__div
{
    display: none;
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    top: 0dvh;
    left: 0dvw;    
    z-index: 10;


}

.battleScene__characters__div
{
    display: block;
    position: absolute;
    width: 70dvw;
    height: 100dvh;
    top: 0dvh;
    left: 0dvw;
    grid-template-rows: 3fr 1fr 3fr;
    
    border: 0;

    z-index: 10;
       
}

.battleScene__title
{
    display: none;
    position: absolute;
    width: 80dvw;
    height: 80dvh;
    top: 5dvh;
    left: 10dvw;
    grid-template-rows: 1fr 2fr 1fr 3fr;

    border: solid black 1px;

    z-index: 10;

}

.battleScene__enemyCharacters__div
{
    display: block;
    height: 100%;    
    width: 100%;
    
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}

.battleScene__playerCharacters__div
{
    display: grid;
    height: 100%;
    max-height: 100%;
    width: 100%;
    
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
}

/* .battleScene__enemy__div
{
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    width:90%;  
    height:100%;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
} */

/* #region Battle Scene - Enemy Character UI */

.battleScene__enemy1__div
{
    position:absolute;
    top:15dvh;
    left:30dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__enemy2__div
{
    position:absolute;
    top:5dvh;
    left:15dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__enemy3__div
{
    position:absolute;
    top:5dvh;
    left:45dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__enemy4__div
{
    position:absolute;
    top:15dvh;
    left:0dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__enemy5__div
{
    position:absolute;
    top:15dvh;
    left:60dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}


/* #endregion Battle Scene - Enemy Character UI */


/* #region Battle Scene - Player Character UI */

.battleScene__player1__div
{
    position:absolute;
    top:55dvh;
    left:30dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__player2__div
{
    position:absolute;
    top:65dvh;
    left:15dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__player3__div
{
    position:absolute;
    top:65dvh;
    left:45dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__player4__div
{
    position:absolute;
    top:55dvh;
    left:0dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__player5__div
{
    position:absolute;
    top:55dvh;
    left:60dvw;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr;
    width:10dvw;  
    height:20dvh;
    
    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}


/* #endregion Battle Scene - Player Character UI */


/* .battleScene__player__div
{
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    width:90%;  
    height:100%;

    font-size: 20px;
    border: solid 4px transparent;
    
    box-sizing: content-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
} */

.battleScene__character__name
{
    display: block;
        
        
    text-wrap: nowrap;
    overflow: scroll;
    
    font-size: 16px;
    border: 0;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 12px;
    }
}

.battleScene__character__image
{
    display: block;
    color: black;
    
    font-size: 20px;
    border: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

.battleScene__character__info
{
    display: none;
    color: black;
    text-wrap: nowrap;
    overflow: scroll;

    width: 100%;
    height: 100%;
    
    font-size: 14px;
    border: 0;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 3fr;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}

.battleScene__character__energyBar
{
    display: block;  
    border: 0;
    padding: 0;
    margin: 0; 
    width: 100%;
    height: 100%;
    
    grid-column: span 2;
} 

.battleScene__character__goodStatuses
{
    display: block;
    
    font-size: 12px;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: white;
    
    background-color: rgba(3, 119, 3, 1);
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}

.battleScene__character__badStatuses
{
    display: block;
    
    font-size: 12px;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: white;

    background-color: rgba(119, 3, 3, 1);
    
    
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}


.battleScene__player__name
{
    display: block;
    color: black;
    text-wrap: nowrap;
    overflow: scroll;
    
    font-size: 16px;
    border: 0;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 12px;
    }
}

.battleScene__player__image
{
    display: block;
    color: black;
    
    font-size: 20px;
    border: solid black 1px;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
    
}

.battleScene__player__info
{
    display: block;
    color: black;
    text-wrap: nowrap;
    overflow: scroll;
    
    font-size: 14px;
    border: 0;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}

.battleScene__playerTurn__div
{
    position: absolute;
    display: none;
    bottom: 0dvh;
    left: 0dvw;
    width: 20dvw;
    height: 10dvh;        
    
    z-index: 20;
    font-size: 16px;
    
    grid-template-columns: 1fr;    
    grid-template-rows: 1fr 3fr;
    border: solid black 2px;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__playerTurn__name
{
    display: block;
    
    
    font-size: 24px;
    border: 0;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 18px;
    }
}

.battleScene__playerTurn__image
{
    display: block;
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    font-size: 14px;
    border: 0;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}

.battleScene__actionBar__div
{
    position: absolute;
    display: grid;
    bottom: 0dvh;
    right: 0dvw;
    width: 30dvw;
    height: 30dvh;        
    
    z-index: 20;
    font-size: 16px;
    
    grid-template-columns: 1fr;    
    grid-template-rows: 1fr 5fr 1fr;
    border: solid black 1px;
    
    
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__playerMoves__div
{    
    display: grid;           
    
    z-index: 20;
    font-size: 16px;    
    
    grid-template-columns: repeat(2,1fr);    
    grid-template-rows: 1fr 1fr;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__playerMoves__skipTurn__btn
{
    display: block;
        
    font-size: 20px;
    border: 0;
    padding: 5px;
    
    box-sizing: border-box;

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

.battleScene__moveDetails__div
{
    position: absolute;
    display: none;
    bottom: 30dvh;
    right: 0dvw;
    width: 30dvw;
    height: 20dvh;        
    
    z-index: 20;
    font-size: 24px; 
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr;
    
    @media (max-width : 768px) {
        font-size: 16px;        
    }        
}

.battleScene__moveDetails__name
{
    display: block;
        
    font-size: 24px;
    border: solid black 1px;
    grid-column: span 2;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }    
}

.battleScene__moveDetails__image
{
    display: block;
        
    font-size: 24px;
    border: solid black 1px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }    
}

.battleScene__moveDetails__description
{
    display: block;
        
    font-size: 24px;
    border: solid black 1px;
    
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }    
}

.battleScene__playerMoves__moveInfo__div
{
    display: none;

    width: 100%;
    height: 100%;

    grid-template-rows: 2fr 1fr;
    grid-template-columns: 1fr;
}

.battleScene__playerMoves__moveInfo__text
{
    display: block;
    width: 100%;
    font-size: 18px;

}

.battleScene__playerMoves__moveInfo__btn
{
    display: block;
    width: 100%;
    font-size: 24px;

}

.battleScene__characterDetails__statuses__div
{
    position: absolute;
    display: none;
    bottom: 30dvh;
    right: 0dvw;
    width: 30dvw;
    height: 7.5dvh;        
    
    z-index: 20;
    font-size: 16px;
    
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 4fr 1fr;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }     
}

.battleScene__characterDetails__statuses__text
{
    display: block;
        
    font-size: 14px;
    border: solid black 1px;
    grid-column: span 3;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }   
}

.battleScene__characterDetails__div
{
    position: absolute;
    display: none;
    top: 0dvh;
    right: 0dvw;
    width: 30dvw;
    height: 50dvh;        
    
    z-index: 20;
    font-size: 16px;
    
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__characterDetails__text
{
    display: block;
    
    
    font-size: 18px;
    border: solid black 1px;
    color: white;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 12px;
    }    
}

.battleScene__characterDetails__description
{    
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,1fr);
    
    color: white;

    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__characterDetails__description__text
{
    display: block;
    
    color: white;
    font-size: 18px;
    border: solid black 1px;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 12px;
    }    
}

.battleScene__useMove__btn
{
    position: absolute;
    display: none;
    bottom: 0dvh;
    right: 30dvw;
    width: 15dvw;
    height: 15dvh;        
    
    z-index: 20;
    font-size: 16px;
        
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__playerMoves__move__div
{
    display: block;
    
    
    font-size: 14px;
    border: 0;
    
    
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 10px;
    }
}

.battleScene__playerMoves__move__image
{        
    display: block;    
    color: black;    
    
    font-weight: bold;
    font-size: large;    
    border: 0;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-sizing: border-box;
    background-color: white;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: medium;
    }
}


/* #region Battle Scene - Rewards */
.battleScene__rewards__div
{
    position: absolute;
    display: none;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;            
    z-index: 10;
    font-size: 24px;
        
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5fr 2fr;

    @media (max-width : 768px) {
        font-size: 18px;        
    }    
}

.battleScene__rewards__title
{
    display: block;
    
    
    font-size: 36px;
    border: 0;


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

.battleScene__rewards__description
{
    display: block;
    
    
    font-size: 26px;
    border: 0;


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

.battleScene__rewards__continue__btn
{
    display: block;
    
    
    font-size: 32px;
    border: solid black 1px;


    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 22px;
    }
}
/* #endregion Battle Scene - Rewards */

/* #region Battle Scene - Tilemap - Action Bar */

.battleScene__tileMap__actionBar__div
{
    position: absolute;
    display: none;
    bottom: 0dvh;
    left: 20dvw;
    width: 80dvw;
    height: 10dvh;        
    
    z-index: 20;
    font-size: 16px;
    color: white;
    grid-template-columns: 5fr 1fr;    
    grid-template-rows: 1fr;
    border: 0;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }        
}

.battleScene__tileMap__actionBar__main__div
{
    display: grid;

    width: 100%;
    height: 100%;

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

.battleScene__tileMap__actionBar__skill__div
{    
    display: none;

    width: 100%;
    height: 100%;

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

.battleScene__tileMap__actionBar__skills__move__image
{        
    display: block;    
    color: white;    

    width: 100%;
    height: 100%;
    
    font-weight: bold;
    font-size: 28px;    
    border: solid black 1px;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-sizing: border-box;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 24px;
    }
}

.battleScene__skills__endTurn__btn
{
    display: block;
    
    width: 100%;
    height: 100%;

    font-size: 28px;
}
/* #endregion Battle Scene - Tilemap - Action Bar */

/* #region Battle Scene - Tilemap - Character Info */



.battleScene__tileMap__characterInfo__div
{
    position: absolute; 
    display: none; 

    top: 5dvh;
    left: 0dvw;
    width: 15dvw;
    height: 70dvh;
    
    grid-template-columns: repeat(2,1fr); 
    grid-template-rows: 1fr 3fr 2fr; 
    z-index: 5;     
}

.battleScene__tileMap__characterInfo__image
{
    border: 2px solid black; 
    width: 100%; 
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


    font-size: 24px;
}

.battleScene__tileMap__characterInfo__text
{
    border: 2px solid black; 
    width: 100%; 
    height: 100%;

    font-size: 24px;
}

.battleScene__tileMap__characterInfo__stats
{
    border: 2px solid black; 
    width: 100%; 
    height: 100%; 
    grid-column-end: span 2;

    font-size: 24px;
}

.battleScene__tileMap__characterInfo__moves
{
    border: 2px solid black; 
    width: 100%; 
    height: 100%; 
    grid-column-end: span 3;
    font-size: 24px;
}

/* #endregion Battle Scene - Tilemap - Character Info */

/* #endregion battlefieldUI.js */


/* #region teamSelect.js */

.teamSelect__div
{
    display: none;
    position: absolute;
    width: 100dvw;
    height: 90dvh;
    top: 10dvh;
    left: 0dvw;
    grid-template-rows: 1fr 2fr 3fr;

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

    z-index: 10;
    
}

.teamSelect__text
{
    display: block; 
    width: 100%;
    justify-content: center; 
    align-items: center;         
    font-size: 32px;
    border: solid black 1px;
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 18px;
    }
        
}

.teamSelect__text:hover
{
    opacity: 1;
}

.teamSelect__topBar
{
    display: grid;
    width: 100%;
    height: 100%;

    grid-template-columns: 1fr 3fr 1fr;
}

.teamSelect__options
{
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr;
    column-gap: 10px;
}

.teamSelect__start__btn
{
    display: block; 
    
    /* width: 100%;
    height: 100%; */
    font-size: 24px; 
    
    

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


.teamSelect__back__btn
{
    display: block; 
    
    font-size: 24px; 
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
    
}


.teamSelect__selectedCharacters__div
{
    display: grid;
    width: 90dvw;
    
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    row-gap: 5px;
    column-gap: 5px;
    

    /*  */
}

.teamSelect__selectedCharacters
{
    display: block;
    
    font-size: 24px;
    height: 90%;
    border: solid black 1px;
    
    
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
    
}

.teamSelect__possibleCharacters__div
{
    display: grid;
    width: 90dvw;

    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(2,1fr);
}

.teamSelect__possibleCharacters
{
    display: block;
        
    font-size: 20px;
    border: solid black 1px;
    height: 90%;
    width: 90%;
    
    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 16px;
    }
}

/* #endregion teamSelect.js */


/* #region scenario.js */

.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.js */

/* #region campaignMap__storylineOptions.js */

.campaignMap__storylineOptions__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__storylineOptions__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__storylineOptions__option
{
    
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 25px;
    font-size: 14px; 
    border: solid black 1px; 
    overflow: hidden;

    
}

/* #endregion campaignMap.js */


/* #region toolbar.js */

.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; 
    
}

/* #endregion toolbar.js */

/* #region rewards.js */

.rewards__shader
{
    display: none;
    position: absolute;

    top: 0dvh;
    left: 0dvw;

    height: 100dvh;
    width: 100dvw;

    background-color: rgba(255,255,255,0.6);

}

.rewards__div
{
    display: none;
    position: absolute;

    top: 10dvh;
    left: 10dvw;

    height: 80dvh;
    width: 80dvw;

    z-index: 15;

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


}

.rewards__text
{
    display: block;

    grid-column: span 3;

    font-size: 24px;

}

.rewards__option
{
    display: block;

    font-size: 24px;

}

.rewards__skip__btn
{
    grid-column: span 3;

    font-size: 24px;
}



/* #endregion rewards.js */


/* #region homeMap.js */
.homeMap__div
{
    position: absolute;
    display: none;
    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;        
    
    z-index: 10;
    font-size: 16px;
          
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.homeMap__missions__btn
{
    position: absolute;
    display: block;
    top: 25dvh;
    left: 15dvw;
    width: 20dvw;
    height: 25dvh;      
    
    
    z-index: 20;
    font-size: 24px;    
          
    
    
    @media (max-width : 768px) {
        font-size: 16px;        
    }   
}


.homeMap__characters__btn
{
    position: absolute;
    display: block;
    top: 30dvh;
    left: 60dvw;
    width: 20vw;
    height: 25dvh;   
    
    
    z-index: 20;
    font-size: 24px;
    
          
    
    
    @media (max-width : 768px) {
        font-size: 16px;        
    }   
}


.homeMap__shop__btn
{
    position: absolute;
    display: block;
    top: 65dvh;
    left: 30dvw;
    width: 20dvw;
    height: 25dvh;   
    
    
    z-index: 20;
    font-size: 24px;
    
          
    
    
    @media (max-width : 768px) {
        font-size: 16px;        
    }   
}
/* #endregion Home Map */

/* #region campaignMap__missionSelect.js */

.campaignMap__missionSelect__div
{
    position: absolute;
    display: none;
    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;        
    
    z-index: 10;
    font-size: 16px;
          
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.campaignMap__missionSelect__title__text
{
    position: absolute;
    display: block;
    top: 7.5dvh;
    left: 0dvw;
    width: 100dvw;
    height: 10dvh;        
    
    z-index: 10;
    font-size: 32px;
          
    border: solid black 1px;  

    
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.campaignMap__missionSelect__missions__div
{
    position: absolute;
    display: block;
    top: 20dvh;
    left: 20dvw;
    width: 60dvw;
    height: 60dvh;        
    
    z-index: 10;
    font-size: 16px;
            
    border: 0;  
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.campaignMap__missionSelect__missions__campaignGrid__div
{
    display: grid;    
    width: 100%;
    height: 100%;        
    
    z-index: 10;
    font-size: 16px;
            
    border: 0;  

    row-gap: 5px;
    column-gap: 5px;
    
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.campaignMap__missionSelect__missions__campaign
{
    display: none;    
    width: 100%;
    height: 100%;        
    
    z-index: 10;
    font-size: 24px;
        
    padding: 10px;

    border: solid black 4px;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.campaignMap__missionSelect__missions__missionGrid__div
{
    display: none;    
    width: 100%;
    height: 100%;        
    
    z-index: 10;
    font-size: 16px;
            
    border: 0;  
    row-gap: 5px;
    column-gap: 5px;
    
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.campaignMap__missionSelect__missions__mission
{
    display: none;    
    width: 100%;
    height: 100%;         
    
    z-index: 10;
    font-size: 24px;
        
    border: solid black 4px;
    
    
    padding: 25px;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.campaignMap__missionSelect__missions__mission:hover
{
    font-size: 18px;

    @media (max-width : 768px) {
        font-size: 16px;        
    }   
}

.campaignMap__missionSelect__menu__div
{
    position: absolute;
    display: grid;
    top: 10dvh;
    left: 0dvw;
    width: 20dvw;
    height: 70dvh;        
    
    z-index: 10;
    font-size: 16px;
        
    
    border: solid black 1px;
    
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6,1fr);
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.campaignMap__missionSelect__menu__back__btn
{   
    position: absolute;
    display: block;
    top: 90dvh;
    left: 40dvw;
    width: 20dvw;
    height: 5dvh;
    font-size: 16px;
            
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}


/* #endregion Campaign Map End */

/* #region shop.js */

.shop__div
{
    display: none;
    position: absolute;
    width:100dvw;
    height:90dvh;
    top: 6dvh;
    left: 0dvw;

    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr 1fr 1fr 4fr 2fr 1fr;
    z-index: 15;

    justify-content: center;
    justify-items: center;
    align-items: center;
}

.shop__filter
{    
    display: grid;    
    width: 100%;
    height: 100%;

    z-index: 10;
    font-size: 20px;

    grid-column: span 2;

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

    font-size: 24px;

    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.shop__title
{
    display: block;
    height: 100%;
    width: 100%;
    grid-column: span 2;

    font-size: 48px;

    @media (max-width : 768px) {
        font-size: 28px;        
    }  
}

.shop__filter__btns
{
    display: block;
    height: 100%;
    width: 100%;    

    font-size: 28px;

    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.shop__availableFunds
{
    height: 100%;
    width: 100%;
    display: block;

    font-size: 32px;

    @media (max-width : 768px) {
        font-size: 22px;        
    }  
}

.shop__inventoryLink
{
    height: 100%;
    width: 100%;
    display: block;

    font-size: 32px;

    @media (max-width : 768px) {
        font-size: 22px;        
    }  
}

.shop__items__div
{
    height: 100%;
    width: 100%;
    display: grid;
    grid-column: span 2;

    grid-template-columns: repeat(4,1fr);
}

.shop__items
{
    display: grid;
    height: 90%;
    width: 90%;

    grid-template-rows: 1fr 2fr 1fr;
}

.shop__items__description
{
    height: 100%;
    width: 100%;
    grid-column: span 2;

    font-size: 28px;

    @media (max-width : 768px) {
        font-size: 20px;        
    }  
}

.shop__leave
{
    height: 100%;
    width: 100%;
    grid-column: span 2; 
    
    font-size: 32px;

    @media (max-width : 768px) {
        font-size: 22px;        
    }  
}

/* #endregion shop.js */

/* #region roster.js */

/* #region Roster - Main Div */

.roster__div
{
    position: absolute;
    display: none;
    top: 0dvh;
    left: 0dvw;
    width: 100dvw;
    height: 100dvh;        
    
    z-index: 18;
    font-size: 16px;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__filter
{
    position: absolute;
    display: grid;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 5%;

    z-index: 10;
    font-size: 20px;

    grid-template-columns: repeat(3,1fr)

}

.roster__characters__filter__btns
{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

.roster__characters__filter__trait__options__div
{
    position: absolute;
    display: none;
    top: 15%;
    left: 30%;
    width: 40%;
    height: 80%;

    z-index: 15;

    grid-template-rows: 1fr 1fr 6fr 1fr;

    
    justify-items: center;
    align-items: center;
    vertical-align: middle;
}

.roster__characters__filter__trait__options
{
    
    display: grid;    
    width: 100%;
    height: 100%;

    border: solid black 4px;

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

    
    justify-items: center;
    align-items: center;

    row-gap: 5px;

    opacity:0.9;

    z-index: 16;
}

.roster__filter__checkBox
{
    width: 90%;
    height: 90%;

    
    justify-items: center;
    align-items: center;
}

.roster__filter__label
{
    width: 100%;
    height: 50%;

}

.roster__characters__filter__trait__clear
{
    display: block;
    width: 100%;
    height: 100%;    

    font-size: 24px;
}

.roster__characters__div
{
    position: absolute;
    display: grid;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 65%;        
    
    z-index: 10;
    font-size: 16px;
          
    row-gap: 5px;
    column-gap: 5px;

    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(4,1fr);
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__more__btn
{
    position: absolute;
    display: none;
    top: 45%;
    left: 90%;
    width: 5%;
    height: 10%;        
    
    z-index: 10;
    font-size: 16px;
          
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__less__btn
{
    position: absolute;
    display: none;
    top: 45%;
    left: 5%;
    width: 5%;
    height: 10%;        
    
    z-index: 10;
    font-size: 16px;
          
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__back__btn
{
    position: absolute;
    display: block;
    top: 90%;
    left: 35%;
    width: 30%;
    height: 5%;        
    
    z-index: 10;
    font-size: 16px;
          
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

/* #endregion Roster - Main Div */

/* #region Roster - Character Info Screen */

.roster__characters__info__div
{
    position: absolute;
    display: none;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 75%;        
    
    z-index: 10;
    font-size: 16px;
    border: solid black 4px;
    
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(8,1fr);
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__back__btn
{
    position: absolute;
    display: none;
    top: 90%;
    left: 35%;
    width: 30%;
    height: 5%;        
        
    z-index: 10;
    font-size: 16px;
          
    grid-template-rows: 1fr 3fr;    

    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__info__name
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 3;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}


.roster__characters__info__image
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 2;
    grid-row: span 2;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__level
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 1;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__xp
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 2;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__traits
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 6;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__stats
{
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 8;
    grid-row: span 4;
    border: solid 4px black;

    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(5,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__health__text
{
    display: block;    
    grid-column: span 2;
    z-index: 10;
    font-size: 16px;
          
     
    border: solid 1px black;
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__text
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
     
    border: solid 1px black;
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__moves__div
{
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 8;
    grid-row: span 1;
    border: solid black 1px;

    grid-template-columns: 2fr 4fr 2fr;
    grid-template-rows: repeat(1,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__equippedMoves__div
{
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    
    /* grid-column: span 8; */
    grid-row: span 1;
    border: solid black 1px;

    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(1,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__move__title
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
      
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__move
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    background-color: rgba(119, 3, 3, 1);  
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__passiveMove
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    background-color: yellow;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__equipment__div
{
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    
    grid-column: span 8;
    grid-row: span 2;
    border: solid black 1px;

    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(1,1fr);
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__equipment__title
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
       
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__equipment
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
       
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

/* #endregion Roster - Character Info Screen */

/* #region Roster - Character Info - Equip Moves */

.roster__characters__info__equipMoves__div
{
    position: absolute;
    display: none;    

    top: 10%;
    left: 10%;
    width: 80%;
    height: 75%;    
    
    z-index: 12;
    font-size: 16px;
        
    
    border: 0;
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 2fr 2fr 1fr 2fr 1fr;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__info__equipMoves__text
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
               
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.roster__characters__info__equipMoves__equippedMoves__div
{
    display: grid;

    grid-template-columns: repeat(5,1fr);
}

.roster__characters__info__equipMoves__equippedMoves__move
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
               
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__info__equipMoves__description__div
{
    display: grid;
    

    grid-template-columns: repeat(4,1fr);
}

.roster__characters__info__equipMoves__description
{
    display: none;    
    
    z-index: 10;
    font-size: 16px;
    padding: 10px;
               
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }  
}

.roster__characters__info__equipMoves__possibleMoves__div
{
    display: grid;

    grid-template-columns: repeat(8,1fr);
}

.roster__characters__info__equipMoves__possibleMoves__move
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
               
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }
}

.roster__characters__info__equipMoves__possibleMoves__level__div
{
    display: grid;

    grid-template-columns: repeat(8,1fr);
}

.roster__characters__info__equipMoves__possibleMoves__move__level
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
               
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }
}

/* #endregion Roster - Character Info - Equip Moves */

/* #region Roster - Equipment */
.roster__characters__info__equipment__equip__div
{
    position: absolute;
    display: none;    

    top: 10%;
    left: 10%;
    width: 80%;
    height: 75%;    
    
    z-index: 12;
    font-size: 24px;
    color: black;    
    
    border: 0;
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.roster__characters__info__equipment__text
{
    display: block;    
    
    z-index: 10;
    font-size: 24px;
          
               
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.roster__characters__info__equipment__equipped__div
{
    display: grid;

    grid-template-columns: repeat(4,1fr);
}

.roster__characters__info__equipment__equipped
{
    display: block;    
    
    z-index: 10;
    font-size: 24px;
          
               
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.roster__characters__info__equipment__description
{
    display: block;    
    
    z-index: 10;
    font-size: 24px;
                   
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.roster__characters__info__equipment__description__btn
{
    display: none;    
    
    width: 100%;
    height: 100%;
    z-index: 10;
    font-size: 24px;
          
      
    padding: 5px;         
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}


.roster__characters__info__equipment__possibleEquipment__div
{
    display: grid;
    font-size: 24px;
    
    grid-template-columns: repeat(6,1fr);

    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.roster__characters__info__equipment__possibleEquipment
{
    display: block;    
    
    z-index: 10;
    font-size: 24px;
          
               
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }
}

.roster__characters__info__equipment__possibleEquipment__remove
{
    display: none;    
    
    z-index: 10;
    font-size: 24px;
          
               
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }
}

.roster__characters__info__equipment__possibleEquipment__level__div
{
    display: grid;

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

.roster__characters__info__equipment__possibleEquipment__less
{
    position: absolute;
    display: none;
    top: 75%;
    left: 5%;
    width: 5%;
    height: 5%;        
    
    z-index: 10;
    font-size: 24px;
          
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.roster__characters__info__equipment__possibleEquipment__more
{
    position: absolute;
    display: none;
    top: 75%;
    left: 90%;
    width: 5%;
    height: 5%;        
    
    z-index: 10;
    font-size: 24px;
          
    grid-template-rows: 1fr 3fr;
    

    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}


/* #endregion Roster - Equipment */

/* #endregion roster.js */

/* #region levelUp.js */

.levelUp__div
{
    position: absolute;
    display: none;
    top: 10dvh;
    left: 10dvw;
    width: 80dvw;
    height: 75dvh;  
    
    background-color: darkcyan;
    border: solid black 2px;
    
    z-index: 10;
    font-size: 16px;
        
    
    grid-template-rows: 1fr 1fr 1fr 1fr 3fr;
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__title
{
    display: block;    
    
    z-index: 10;
    font-size: 20px;
          
    border: 0;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__name
{
    display: block;    
    
    z-index: 10;
    font-size: 20px;
          
    border: 0;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__level__div
{
    display: grid;    
    
    z-index: 10;
    font-size: 16px;
          
    
    border: 0;
    
    grid-template-columns: 2fr 2fr;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__level
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    border: 0;
    
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__levelPoints
{
    display: block;    
    
    z-index: 10;
    font-size: 16px;
          
    
    border: 0;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.levelUp__buttons__div
{
    display:grid;

    grid-template-columns: repeat(7,1fr);
    grid-template-rows: 1fr 2fr 1fr;
    row-gap: 5px;
    column-gap: 5px;

    height: 100%;
    width: 100%;
}

.levelUp__buttons
{
    display:block;
    
}

.levelUp__buttons__plus
{
    display: grid;        
    z-index: 10;              
    border: 1px solid white;
    
    grid-template-rows: 2fr 1fr;
       
}

.levelUp__buttons__plus__value
{
    display: block;
    z-index: 10;
    font-size: 36px;
              
    border: 0;
    padding: 5px;    

    color: white;
    
    @media (max-width : 768px) {
        font-size: 24px;        
    }   
}

.levelUp__buttons__plus__cost
{
    display: block;
    z-index: 10;
    font-size: 24px;
              
    border: 0;
    padding: 5px;    

    color: white;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.levelUp__buttons
{
    display: block;    
    
    z-index: 10;
    font-size: 28px;
          
    
    border: 0;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.levelUp__buttons__value
{
    display: grid;    
    
    z-index: 10;
    font-size: 24px;
          
    border: 0;
    padding: 10px;    

    grid-template-rows: 2fr 3fr;
    
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.levelUp__buttons__less
{
    display: block;    
    
    z-index: 10;
    font-size: 24px;
          
    
    border: 1px solid white;
    
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }   
}

.levelUp__save__btn
{
    position: absolute;
    display: none;
    top: 90%;
    left: 15%;
    width: 30%;
    height: 10%;        
    
    z-index: 10;
    font-size: 24px;
          
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.levelUp__cancel__btn
{
    position: absolute;
    display: none;
    top: 90%;
    left: 55%;
    width: 30%;
    height: 10%;        
    
    z-index: 10;
    font-size: 24px;
          
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}


/* #endregion levelUp.js End */

/* #region tutorial.js */

.tutorialDisplay__div
{
    display: none;
    position: absolute;
    width: 80dvw;
    height: 80dvh;
    top: 10dvh;
    left: 10dvw;
    grid-template-rows: 1fr 4fr 1fr;

    border: solid black 4px;
    
    justify-items: center;
    align-items: center;
    

    z-index: 30;
}

.tutorialDisplay__shader
{
    display: none;
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    top: 0;
    left: 0;

    z-index: 19;

    background-color: rgba(255,255,255,0.8)
}

.tutorialDisplay__title
{
    display: block;
    width: 100%;
    height: 100%;

    font-size: 32px;
    
    @media (max-width : 768px) {
        font-size: 24px;        
    }  
}

.tutorialDisplay__description
{
    display: block;
    width: 100%;
    height: 100%;

    font-size: 24px;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

.tutorialDisplay__continue__btn
{
    display: block;
    width: 100%;
    height: 100%;
    
    font-size: 24px;
    
    @media (max-width : 768px) {
        font-size: 18px;        
    }  
}

/* #endregion tutorial.js */

/* #region unlockStoryline */

.unlockStoryline__div
{
    display: none;
    position: absolute;
    width: 80dvw;
    height: 60dvh;
    top: 20dvh;
    left: 10dvw;

    z-index: 15;

    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 1fr;

}

.unlockStoryline__title
{
    
    width: 100%;
    height: 100%;
    
    
    /* transform: translate(-50%, -50%); */
    font-size: 24px;

    

}

.unlockStoryline__title:hover
{
    opacity:1;
    pointer-events: "none";
}

.unlockStoryline__textArea__div
{
    display: block; 
    
    justify-content: center; 
    align-items: center; 
    background-size: 100% 100%;
    border: solid 2px black;

    
   
    height: 100%;    
    width: 100%;
    
}

.unlockStoryline__textArea__text
{
    display: block;     
    width: 100%; 
    height: 100%; 
    max-height: 100%;
    padding: 25px;
     
    font-size: 24px; 
    border: 0; 
    overflow: hidden;

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

.unlockStoryline__textArea__text:hover
{
    opacity:1;
    pointer-events: "none";
}

.unlockStoryline__continue__btn
{
    display: block; 
    
    width: 100%;
    height: 100%;
    font-size: 24px; 
     
    border: solid 2px black;

    

    

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

/* #endregion unlockStoryline */

/* #region storylineNarration.js */

.storyline__narration__div
{
    display: none;
    position: absolute; 
    width:100dvw;
    height: 20dvh;
    bottom: 0dvh;
    left: 0dvw;
    margin: auto; 
    z-index: 25; 
    font-size: 32px; 
    text-align: center; 
    align-content: center;
    
    grid-template-columns: 2fr 8fr 1fr;
    grid-template-rows: 1fr;

    border: solid black 4px;

    

    @media (max-width : 768px), (max-height : 768px) {
        height: 20dvh;
        width: 100dvw;
        left: 0;
        font-size: 16px;
    }        
}

.storyline__narration__character__div
{
    display: grid;    
    margin: auto; 
    width: 100%;
    height: 100%;
    z-index: 25; 
    font-size: 32px; 
    text-align: center; 
    align-content: center;
    

    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr;

    border: solid black 4px;

    

    @media (max-width : 768px), (max-height : 768px) {        
        font-size: 32px; 
    }        
}

.storyline__narration__shader
{
    position: absolute;
    display: none;    
    width: 100dvw;
    height: 100dvh;
    top: 0dvh;
    left: 0dvw;
    margin: auto; 
    z-index: 25; 
    font-size: 32px; 
    text-align: center; 
    align-content: center;
    
    background-color: rgba(255,255,255,0.5);
}

.storyline__narration__character__name
{
    display: block;    
    
    z-index: 10;
    font-size: 20px;
       
    border: 0;
    
    overflow: scroll;
    
    @media (orientation: portrait) {
        font-size: 20px;        
    }   
}

.storyline__narration__character__image
{
    display: block;    
    
    height: 100%;    
    z-index: 10;
    font-size: 20px;
      
    border: 0;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

.storyline__narration__character__text
{
    display: block;    
    
    z-index: 10;
    font-size: 36px;
       
    border: solid black 4px;
    text-align: left;
    align-content: baseline;
    padding: 10px;
    
    @media (max-width : 768px) {
        font-size: 24px;         
    }   
}

.storyline__narration__character__continue__btn
{    
    display: block;    
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
    z-index: 10;
    font-size: 20px;
       
    border: solid black 4px;
    
    @media (max-width : 768px) {
        font-size: 12px;        
    }   
}

/* #endregion storylineNarration.js End */


progress::-webkit-progress-value {
    -webkit-appearance: none;
    background: grey;
    white-space: pre;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
  }
  
progress::-webkit-progress-bar {
    -webkit-appearance: none;
    white-space: pre;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34) inset;
  }

    progress.red::-webkit-progress-value {
    -webkit-appearance: none;
    background: red;
    white-space: pre;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
    }

    progress.green::-webkit-progress-value {
    -webkit-appearance: none;
    background: green;
    white-space: pre;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
    }
      
    progress.orange::-webkit-progress-value {
        -webkit-appearance: none;
        background: orange;
        white-space: pre;
        border-radius: 2px;
        box-shadow: 0 2px 5px rgba(249, 255, 249, 0.78) inset;
        }