/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Colour Pallete
# Generic (CALLED IN NORMALIZE.CSS)
# Base
	- Typography
	- Elements
    - Reuseable Classes
# Components
    -Landing Screen
    -Character Selection
    -Info
    -Gameboard 
    -Game Results 
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography */
@font-face {
    font-family: Minecraft;
    src: url(../fonts/Minecraft.ttf);
}

body {
    font-family: Minecraft;
    color: #FFFFFF;
    font-weight: 400;
    line-height: 1.5;
}

/* Elements */
h1,
h2,
h3,
h4 {
    margin: 0;
}

/* Reusable classes */
.full-display-view {
    width: 100vw;
    height: 100vh;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Landing screen */
.landing-screen,
.character-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #DB8D57;
}

.landing-screen {
    gap: 10rem;
}

.landing-screen h1 {
    font-size: 7rem;
}

.start-btn {
    font-size: 5rem;
    width: 20rem;
    height: 10rem;
    border: none;
}

.start-btn:hover {
    cursor: pointer;
    background-color: #f4d45c;
}

/* Character Selection */
.character-selection {
    gap: 10rem;
}

.male {
    margin: 0 auto;
    width: 20rem;
    height: 20rem;
    background: url(../images/male-character/male-character-10th-gup.svg);
    animation: move 1.2s steps(5) infinite;
}

.male-display:hover,
.female-display:hover {
    cursor: pointer;
    background-color: #f4d45c;
}

.female {
    margin: 0 auto;
    width: 20rem;
    height: 20rem;
    background: url(../images/female-character/female-character-10th-gup.svg);
    animation: move 1.2s steps(5) infinite;
}

.selected {
    background-color: #f4d45c;
}

.gender-selection {
    display: flex;
    gap: 5rem;
}

.character-selection-wrapper {
    display: none;
}

.avatar-display {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    border-bottom: 0.5rem solid #f4d45c;
    padding: 1rem;
}

.name-input {
    display: flex;
    align-items: end;
    gap: 1rem;
    font-size: 1.5rem;
}

.name-section {
    display: flex;
    flex-direction: column;
}

.name-input input {
    padding: 1rem;
    border: none;
}

.btn-submit:hover {
    background-color: #f4d45c;
    cursor: pointer;
}

/* Info */
.info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #FFFFFF;
    border: 0.3rem solid #f4d45c;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
}

.info-btn:hover {
    cursor: pointer;
}

.info-btn img{
    width: 1.5rem;
}

.instructions {
    font-family: sans-serif;
    width: 50rem;
    display: none;
    position: absolute;
    top: 5rem;
    right: 5rem;
    background-color: #f4d45c;
    color: #000000;
    padding: 1rem;
    border-radius: 1rem;
}

/* Gameboard */
.game-board-wrapper {
    display: none;
    background-color: #DB8D57;
}

.game-board {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    height: 100vh;
}

.health-bar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #C63131;
    width: 40rem;
    height: 4.5rem;
}

.player-display,
.npc-display {
    display: grid;
    grid-template-rows: 2rem 5rem 1fr 8rem;
    height: 100vh;
    padding: 5rem;
    align-items: center;
    gap: 1rem;
}

.player-health-bar {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background-color: #5E9627;
}

.player-avatar {
    margin: 0 auto;
    width: 20rem;
    height: 20rem;
    animation: move 1.2s steps(5) infinite;
}

@keyframes move {
    
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -1600px 0;
    }
}

.npc-health-bar {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background-color: #5E9627;
}

.npc-avatar {
    margin: 0 auto;
    width: 20rem;
    height: 20rem;
    animation: move 1.2s steps(5) infinite;
}

.health-points {
    position: absolute;
}

.action-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.action-controls button{
    background-color: transparent;
    background-image: url("../images/game-actions/player-action-selection-border.svg");
    width: 8rem;
    height: 8rem;
    border: none;
    padding: 1rem 2rem;
}

.action-controls button:hover {
    cursor: pointer;
    background-image: url("../images/game-actions/action-border.svg");
}

.icons {
    width: 10rem;
}

.action-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.action-board div{
    background-image: url("../images/game-actions/player-action-selection-border.svg");
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
}

.player-action img,
.npc-action img{
    width: 3rem;
    height: 3rem;
}

/* Game results */
.game-results {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    align-self: center;
    justify-self: center;
    opacity: 0;
    width: 40rem;
    height: 30rem;
    background-color: #f4d45c;
    color: #000000;
    position: absolute;
    border-radius: 1rem;
    transition: opacity 1s ease-in;
}

.game-results h2 {
    font-size: 5rem;
}

.game-results p {
    font-size: 1.5rem;
}

.continue-btn,
.play-again-btn {
    display: none;
    width: 10rem;
    height: 5rem;
    border: none;
}

.continue-btn:hover,
.play-again-btn:hover {
    cursor: pointer;
    background-color: #DB8D57;
}