/* ===============================
   1. Global
================================= */

body {
    font-family: 'Tiny5', sans-serif;
    background-color: #FFFAFC;
}

:root {
    --lightpink: #E2C1D4;
    --pink: #D497A9;
    --lightgreen: #BAE0BB;
    --green: #90B78F;
    --darkgreen: #698a69 ;
    --purple: #8BA1D9;
    --black: #000;
    --lightgrey: #f3f3f3;
    --darkgrey: #d9d9d9;
    --shadow: rgb(85, 85, 85);
}

/* ===============================
   2. Utilities
================================= */

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

.text-outline {
    color: #fff;
    text-shadow:
        -2px -2px 0 var(--black),  
        2px -2px 0 var(--black),
        -2px  2px 0 var(--black),
        2px  2px 0 var(--black);
}

.btn {
    font-family: 'Tiny5', sans-serif;
    font-size: 16px;
    border: 2px solid var(--black);
    padding: 6px 12px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--shadow);
}

.btn:active {
    box-shadow: none;
    transform: translate(2px, 2px);
}

h1 {
    font-family: 'Micro 5', sans-serif;
    font-size: 200px;
    font-weight: 200;
    text-align: center;
    line-height: 0.6;
    margin: 32px 0;
}

/* ===============================
   3. Frame & Graphics
================================= */

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
    cursor:cell;
}

.left-graphics {
    position: relative;
    left: -10vh;
    image-rendering: pixelated; 
}

.right-graphics {
    position: relative;
    right: -10vh;
    image-rendering: pixelated; 
}

.frame-inside {
    background-color: var(--lightgrey); 
    background-image: 
        linear-gradient(to right, #0000000d 1px, transparent 1px),
        linear-gradient(to bottom, #0000000d 1px, transparent 1px);
    background-size: 10px 10px; 
    border: 3px solid var(--pink);
    outline: 2px solid var(--pink);
    width: 800px;
    height: 400px;
    padding: 20px 40px;
}

.frame-outside {
    background-color: var(--lightpink);
    border: 3px solid var(--black);
    outline: 2px solid var(--shadow);
    padding: 10px;
    box-shadow: 5px 5px var(--shadow); 
}

/* ===============================
   4. Start Screen
================================= */

#rock { color: var(--pink); }
#paper { color: var(--green); }
#scissors { color: var(--purple); }

#startBtn {
    font-size: 32px;
    background: var(--lightgrey);
}

#startBtn:active {
    background-color: var(--darkgrey);
}

/* ===============================
   5A. Game Screen: Battle Area
================================= */

.battle-area {
    width: 800px;
    height: 280px;
    display: flex;
}

/* ===============================
   5A-1. Status (Name & HP Bar)
================================= */

.name {
    font-size: 24px;
    color: var(--darkgreen);
    margin-bottom: 2px;
}

.status.computer {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-bottom: 60px;
}

.status.player {
    display: flex;
    flex-direction: column;
}

.hp-bar {
    width: 250px;
    height: 20px;
    border: 3px solid var(--green);
    border-radius: 5px;
    box-shadow: 3px 3px 0 var(--darkgreen);
}

.hp-fill {
    height: 20px;    
    background-color: var(--lightgreen);
    transition: width 0.3s steps(5); 
}

#playerHP {
    width: 100%;
}

#computerHP {
    width: 100%;
}

/* ===============================
   5A-2. Sprite & Platform
================================= */

.sprite {
    width: 150px;   
    image-rendering: pixelated; 
}

.platform {
    transform: scale(0.9);
    position: relative;
    top: -100px;
    z-index: 1;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0px var(--darkgreen));
} 

.sprite.player {
    position: relative;
    right: -100px;
    z-index: 2;
}

.sprite-container.computer {
    height: 200px;
    position: relative;
    top: -30px;
}

.sprite.computer {
    position: relative;
    right: -120px;
    bottom: -15px;
    z-index: 2;
}

/* ===============================
   5B. Game Screen: Dialogue Area
================================= */

.boxes {
    display: flex;
    height: 100px;
    gap: 16px;
    justify-content: space-between;
    z-index: 3;
    margin-top: 10px;
}

.dialogue-box {
    display: flex;
    align-items: center;
    width: 600px;
    border: 3px solid var(--black);
    padding: 12px;
    font-size: 20px;
    color: #1f1f1f;
    background-color: var(--lightgrey);
    box-shadow: 2px 2px 0 var(--shadow);
}

/* ===============================
   5C. Game Screen: Choices Area
================================= */

.choice-box {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

#rockBtn { background: var(--pink); }
#paperBtn { background: var(--green); }
#scissorsBtn { background: var(--purple); }

/* ===============================
   6. GameOver Screen
================================= */

#win-screen { color: var(--lightgreen); }
#lose-screen { color: var(--lightpink); }

.gameover-text {
    margin: 100px 0 32px 0;
}

#winBtn {
    font-size: 24px;
    background: var(--lightpink);
}

#loseBtn {
    font-size: 24px;
    background: var(--lightgreen);
}

#winBtn:active { background-color: var(--pink); }
#loseBtn:active { background-color: var(--green); }