/* #region Fonts */

*{
    font-family: "Pixelify Sans", system-ui;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

/* #endregion Fonts */


/* Colour Schemes */

.colour1
{
    background-color: rgb(255, 69, 0);
    color: orange;
    opacity: 1;
}

.colour1:hover
{
    background-color: rgb(244, 128, 40);
}

.color1:disabled
{
    opacity: 0.6;
}

.color1:disabled:hover
{
    background-color: rgba(255, 118, 206);
    opacity: 0.6;
}

.colour2
{
    background-color: rgba(253, 255, 194);
    color: black;
}

.colour3
{
    background-color:rgba(148, 255, 216);
    color: black;
}

.colour4
{
    background-color: rgba(163, 216, 255);
    color: black;
}

.colour__playerCharacter
{
    background-color: rgba(54, 119, 240, 1);
    color: black;
}

.colour__enemyCharacter
{
    background-color: rgba(119, 3, 3, 1);
    color: black;
}

/* #region Background CSS */
    .backgroundImage
    {
        z-index: 0;
        background-color: rgba(163, 216, 255);

        @media (max-width : 768px) {
            background-color: rgba(163, 216, 255);
        }    

    }
/* #endregion Background CSS End */

.title__mid__div
{
    opacity: 0.8    
}

/* #region Global Script Updates */

.mainMenu__guest__btn
{
    display: none;
}

/* #endregion Global Script Updates */



/* #region Start Menu */
.startMenu__div
{
    display: none; 
    position: absolute; 
    width: 60dvw;
    height: 30dvh;
    top: 50dvh;
    left: 50dvw;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr; 
    transform: translate(-50%, -50%);
    z-index: 3; 
    font-size: 24px;     
    
}

.startMenu__btn
{
    display: none;
    height: 90%;
    width: 100%;    
    word-wrap: normal; 
    overflow: scroll;        
    font-size: 24px;
    border: solid black 4px;

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

.welcomeText
{
    display: block; 
    position:absolute;

    background-color: rgba(255, 148, 112, 1); 
    
    top:0; 
    left: 0; 
    
    width: 100dvw; 
    height: 100dvh; 
    
    background-size: cover; 
    
    z-index: 10; 
    justify-content: center; 
    align-content: center; 
    text-align: center; 
    
    font-size: 64px;
}


/* #endregion Start Menu End */

/* #region Tutorial */

.tutorial__shader
{
    position:absolute;

    background-color: rgba(255,255,255,0.5);
    
    width: 100%;
    height: 100%;
    
    top:0;
    left:0;
    
    display: none;
    
    z-index: 10;
}

.tutorial__div
{
    display: none; 
    position: absolute; 
    
    top: 15dvh; 
    left: 15dvw; 
    width: 70dvw; 
    height: 70dvh;

    grid-template-rows: 5fr 1fr; 
    grid-template-columns: 1fr;
    
    background-color: rgba(255, 148, 112,0.8);  
    
    z-index: 10; 
    justify-content: center; 
    align-content: center; 
    text-align: center; 
    font-size: 48px;
}

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

    font-size: 36px;
}

.tutorial__btn
{
    width: 100%; 
    height: 100%; 
    
    border: solid black 1px; 
    background-color: rgba(249, 105, 14,0.8);

    font-size: 36px;
}

/* #endregion Tutorial */

/* #region Overlapping Div */
.overlappingDiv
{
    display: block;
    position: absolute; 

    top: 0dvh; 
    left: 0dvw; 
    
    width: 100dvw;
    height: 100dvh;
    
    background-color: black; 

    opacity: 0; 
    pointer-events: none;
    z-index: 10;
}

/* #endregion Overlapping Div*/

/* #region Map UI */

/* .testSprite
{
    display: block; 
    position: absolute;

    top: 30dvh;
    left: 15dvw;

    height: 5dvh;
    width: 5dvw;

    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 0;
    
    background-image: url(./images/draggleSprite.png);
} */

.map__div
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;

}

.map__dialogueBox
{
    position: absolute;
    display: none;

    bottom: 0dvh;
    left: 0dvh;

    width: 100dvw;
    height: 20dvh;

    border: 4px black solid;
    
    padding: 12px;
    z-index: 15;

    font-size: 24;

    pointer-events: none;
}

.map__playerDisplay
{
    
    position: absolute;
    display: none;

    top: 7.5dvh;
    left: 0dvh;
    width: 20dvw;
    /* height: 25dvh; */
    height: auto;

    
    border: 4px black solid;
    padding: 12px;
    min-width: 6%;

    @media (max-width : 800px) {
        top: 10dvh;
    }  

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

    
}

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

    background-color: white; 
    border: black solid 4px;

    font-size: 20px;
}

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

    background-color: white; 
    border: black solid 4px;

    font-size: 14px;
}

.map__playerDisplay__healthBarBG
{
    height: 5px; 
    background-color: #ccc; 
    margin-top: 10px;
}

.map__playerDisplay__healthBar
{
    margin-top: 10px;
    margin-bottom: 10px;
    height: 10px; 
    background-color: green; 
    width: 100%;
        
}

.map__playerStats__div
{
    width:100%; 
    display: grid; 
    grid-template-columns: repeat(1,1fr); 
    margin-top: 10px;

    box-sizing: border-box;
}

.map__playerStats__btn
{
    display: block;

    width: 100%;
    height: 100%;

    font-size: 18px;

    padding: 10px;

    background-color: green;
    color: white;
    border: solid black 1px;

    
}

.map__playerStats
{
    display: none;

    width: 100%;
    height: 100%;

    font-size: 16px;

    padding: 5px;

    background-color: green;
    color: white;
    
    border: solid black 1px;

    
}

.map__playerMoves__div
{
    width:100%; 
    display: grid; 
    grid-template-columns: repeat(1,1fr); 
    margin-top: 10px;
}

.map__playerMoves__btn
{
    display: block;

    width: 100%;
    height: 100%;

    font-size: 18px;

    padding: 10px;

    background-color: red;
    color: white;
    border: solid black 1px;
}

.map__playerMoves
{
    display: none;

    width: 100%;
    height: 100%;

    font-size: 16px;

    padding: 5px;

    background-color: red;
    color: white;

    border: solid black 1px;
}

.map__narration__div
{
    display: none;
    position: absolute; 
    
    bottom:0dvh; 
    left: 0dvw; 

    width: 100dvw;
    height: 20dvh;
    
    background-color: white; 
    padding: 12px;
    
}

/* #endregion Map UI */

/* #region DPAD */

.dpad__div
{
    position: absolute; 
    display: none; 

    bottom: 5dvh; 
    left: 5dvw; 

    width: 25dvw; 
    height: 25dvw;
    
    grid-template-columns: repeat(3,3fr);

    @media (orientation : portrait) {
        width: 30dvw;
        height: 30dvw;
    }   
}

.dpad__upButton
{
    grid-column-start: 2;
    grid-row-start: 1;
       
    background-image: url("./images/dpad/buttonUp.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 24px;
                    
}

.dpad__rightButton
{
    grid-column-start: 3;
    grid-row-start: 2;
       
    background-image: url("./images/dpad/buttonRight.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 24px;
                    
}

.dpad__downButton
{
    grid-column-start: 2;
    grid-row-start: 3;
       
    background-image: url("./images/dpad/buttonDown.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 24px;
                    
}

.dpad__leftButton
{
    grid-column-start: 1;
    grid-row-start: 2;
       
    background-image: url("./images/dpad/buttonLeft.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    font-size: 24px;
                    
}



.actionButton__div
{
    position: absolute;
    display: none;

    bottom: 15dvh;
    right: 5dvw;
    width: 15dvw;
    height: 15dvw;

    font-size: 20px;

    @media screen and (orientation : portrait){
        width: 25dvw;
        height: 25dvw;
        bottom: 6dvh;

        font-size: 36px;
    }  
}

/* #endregion DPAD */

/* #region Shader */

.shaderBG
{
    position: absolute;
    display: none;
    
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 

    width: 100dvw;
    height: 100dvh;
    
    background-color: rgba(255,255,255,0.5);
    padding: 12px;
    
    border: 4px black solid;
    z-index: 2;
}

/* #endregion Shader */

/* #region battle__playerActionBar */

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

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

.battleScene__playerTurn__name
{
    display: none;
}

.battleScene__playerMoves__skipTurn__btn
{
    display: none;
}

.battleScene__playerMoves__div
{    
    border: solid black 1px;
}

/* #endregion battle__playerActionBar */





/* #region Battle - Characters - Enemy */

.battle__enemy__display
{
    background-color:white; 
    width: 250px; 
    position: absolute;
    display: grid;
    top: 10dvh;
    left: 10dvw;

    width: 30dvw;
    height: 15dvh;

    border: 4px black solid;
    padding: 12px;

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

.battle__enemy__name
{
    font-size: 16px; 
    display: flex;
}

.battle__enemy__health
{
    font-size: 16px; 
    display: flex;
}

.battle__enemy__healthBar
{
    height: 5px; 

    width: 100%;
    
    background-color: green; 

    grid-column: span 2;

}

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

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

    grid-column: span 2;
}

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

.battle__enemy__stats
{
    display: none;
    height: 100%;
    width:100%;
    grid-column: span 2;
    
    grid-template-columns: repeat(3,1fr);
}

.battle__enemy__stats__element
{
    width: 100%;
    font-size: 20px;
}

.battle__enemy__moves
{
    display: none;
    height: 100%;
    width:100%;
    grid-column: span 2;
    
    grid-template-columns: repeat(4,1fr)
}

.battle__enemy__moves__element
{
    width: 100%;
    font-size: 20px;
}


.battle__enemy__moveDescription
{
    display: none;

    width: 100%; 
    top: 0px;
    
    background-color:white; 
        
    font-size: 14px;
        
    justify-content: center;
}



/* #endregion Battle - Characters - Enemy */

/* #region Battle - Characters - Player */

.battle__player__display
{
    position: absolute;
    display: grid;

    bottom: 25dvh;
    left: 60dvw;

    width: 30dvw;
    height: 15dvh;

    background-color:white; 
    border: 4px black solid;
    padding: 12px;

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

    
}

.battle__player__name
{
    font-size: 16px; 
    display: flex;
}

.battle__player__health
{
    font-size: 16px; 
    display: flex;
}

.battle__player__healthBar
{
    /* position: absolute;  */

    height: 5px; 
    width: 100%;
    
    background-color: green; 

    grid-column: span 2;

}

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

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

    grid-column: span 2;
}

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


.battle__player__stats
{
    display: none;
    height: 100%;
    width:100%;
    
    grid-column: span 2;
    grid-template-columns: repeat(3,1fr);
}

.battle__player__stats__element
{
    width: 100%;
    font-size: 20px;
}

.battle__player__moves
{
    display: none;
    height: 100%;
    width:100%;
    
    grid-column: span 2;
    grid-template-columns: repeat(4,1fr)
}

.battle__player__moves__element
{
    width: 100%;
    font-size: 20px;
}


.battle__player__moveDescription
{
    display: none;

    width: 100%; 
    top: 0px;
    
    background-color:white; 
        
    font-size: 14px;
        
    justify-content: center;
}


.battleScene__characters__div
{
    display: none;
}

.battleScene__playerMoves__moveInfo__div
{
    display: grid;

    border: solid black 1px
}

.battleScene__playerMoves__moveInfo__text
{
    display: none;
}

.battleScene__playerMoves__moveInfo__btn
{
    display: none;
}

/* #endregion Battle - Characters - Player */







/* #region Narration - Storyline Narration */

.storyline__narration__div
{    
    left: 0dvw;
    width: 100dvw;
    height: 20dvh;    

    @media screen and (orientation : portrait){
        grid-template-columns: 1fr 3fr 2fr;
    }

}

/* #endregion Narration - Storyline Narration */