@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Poiret+One&family=Press+Start+2P&family=Source+Sans+Pro:wght@200&display=swap');

:root {
    --walk1-y: 50%;
    --walk1-x: -90%;
    
    --walk2-y: -100%;
    --walk2-x: 50%;

    --walk3-y: 150%;
    --walk3-x: 20%;

    --slide-in-x: 300px;

    --breakout-window-text-font-size: 1em;
    --breakout-window-btn-font-size: 1em;

    --modal-height: 100vh;
    --modal-width: 100vw;
    --modal-grid-rows: 1fr;

    --map-height: 100vh;
    --map-width: 100vw;
    --map-template-rows: 1fr;
    --map-text-bubble-font-size: 1.3em;
    --map-attack-btn-font-size: 2em;
    
    --fight-modal-height: 100vh;
    --fight-modal-width: 100vw;
    --fight-modal-template-rows: 33%;
    --fight-character-text-font-size: 30px;
    --fight-modal-btn-font-size: 10px;

    --cooper-map-above-hight: 90%;
    --cooper-map-above-width: 60%;
    --cooper-map-side-height: 50%;
    --cooper-map-side-width: 50%;

    --max-height: 900px;
    --max-width: 1600px;
    --min-height: 360px;
    --min-width: 640px;
}

@keyframes walk-story-1 {
    0% {
    opacity:0;
    transform:translate(0, 0);
    }
    10% {
    opacity: 100;
    transform: translate(0, 0);
    }
    30% {
    transform: translate(0, var(--walk1-y));
    }
    100% {
    transform: translate(var(--walk1-x), var(--walk1-y));
    }
}

@keyframes walk-story-2{
    0% {
    opacity: 0;
    transform: translate(0, 0);
    }
    10% {
    opacity: 100;
    transform: translate(0, 0);
    }
    30% {
    transform: translate(0, var(--walk2-y));
    }
    100% {
    transform: translate(var(--walk2-x), var(--walk2-y));
    }
}

@keyframes walk-story-3{
    0% {
    opacity: 0;
    transform: translate(0, 0);
    }
    10% {
    opacity: 100;
    transform: translate(0, 0);
    }
    30% {
    transform: translate(var(--walk3-x), 0);
    }
    100% {
    transform: translate(var(--walk3-x), var(--walk3-y));
    }
}

@keyframes fade-out {
    0% {
      opacity: 100;
    }
    95% {
        opacity: 0;
      }
    100% {
      opacity: 0;
    }
}

@keyframes fade-in {
    0% {
      opacity: 0;
    }
    90% {
      opacity: 0;
    }
    100% {
      opacity: 100;
    }
}

@keyframes flicker {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 100;
    }
    50% {
        opacity: 0;
    }
    100% {
      opacity: 100;
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translate(var(--slide-in-x), 0);
    }
    80% {
        opacity: 0;
        transform: translate(var(--slide-in-x), 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes blow-up {
    0% {
        transform: scaleX(0.0);
        transform: scaleY(0.0);
    }
    75% {
        transform: scaleX(0.0);
        transform: scaleY(0.0);
    }
    0% {
        transform: scaleX(0.0);
        transform: scaleY(0.0);
    }
    100% {
        transform: scaleX(-1);
        transform: scaleY(1);
    }
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10px, 0);
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(-10px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes kill-animation {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(0, 500px);
        opacity: 0;
    }
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black; }
}  

@keyframes stretch {
    0% {
        transform: scaleX(1);
        transform: scaleY(1);
    }
    50% {
        color: orange;
        transform: scaleX(-0.9);
        transform: scaleY(0.8);
    }
    100% {
        color: red;
        transform: scaleX(1);
        transform: scaleY(1);
    }
}

body {
    font-family: 'Press Start 2P';
}

button:hover {
    transform: scale(1.2);
}

#new-game-modal {
    display: none;
    height: 100vh;
    width: 100vw;
    max-height: var(--max-height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: var(--min-width);
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 30% 30% 25% 5% 10%;
}

#cooper-keyboard-photo {
    justify-self: center;
    border: solid yellow 20px;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
}

#opening-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.main-title {
    color: black;
    font-size: 3em;
}

#vs-title {
    color: red;
    font-size: 4em;
    animation-name: stretch;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#new-game-text {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    font-size: var(--breakout-window-text-font-size);
}

.new-game-button {
    font-size: var(--breakout-window-btn-font-size);
    grid-column: 2;
    grid-row: 4;
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family:'Press Start 2P';
    align-self: top;
}

#game-map-modal{
    display:none;
    height: var(--map-height);
    width: var(--map-width);
    max-height: var(--max-height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: var(--min-width);
    background-image: url("images/cooper_game_map_169.jpg");
    background-size: contain;
    background-repeat: repeat-x;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    animation-name: fade-in;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    grid-template-areas: 
    "grass1 grass2 speech"
    "grass4 house1 cooper"
    "road1 road2 road3";
}

.show {
    display: grid!important;
}

.shake-board {
    animation: shake;
    animation-delay: 1.2s;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.part-1 {
    animation-name: walk-story-1;
    animation-duration: 8.8s;
    animation-fill-mode: forwards;
}

.part-2 {
    animation-name: walk-story-2;
    animation-duration: 8.8s;
    animation-fill-mode: forwards;
}

.part-3 {
    animation-name: walk-story-3;
    animation-duration: 8.8s;
    animation-fill-mode: forwards;
}

.cooper-walking {
    position: relative;
    grid-area: house1;
}

.cooper-walking img {
    position: absolute;
    left: 90%;
}

.cooper-walking #cooper-above {
    animation-name: fade-out;
    animation-delay: 2.7s;
    animation-duration: 0.05s;
    animation-fill-mode: forwards;
    height: var(--cooper-map-above-hight);
    width: var(--cooper-map-above-widthe);
}

.cooper-walking #cooper-side {
    opacity: 0;
    animation-name: fade-in;
    animation-delay: 2.7s;
    animation-duration: 0.05s;
    animation-fill-mode: forwards;
    height: var(--cooper-map-side-height);
    width: var(--cooper-map-side-width);
}

.cooper-walking #cooper-side-red {
    opacity: 0;
    animation-name: flicker;
    animation-delay: 6.8s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    height: var(--cooper-map-side-height);
    width: var(--cooper-map-side-width);
}

#cooper-talking {
    opacity: 0;
    grid-area: cooper;
    margin-left: 30%;
    animation-name: slide-in-right;
    animation-delay: 8s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#talking-photo{
    height: 100%;
    width: 100%;
}

#bubble-and-text {
    opacity: 0;
    grid-area: speech;
    height: 80%;
    width: 80;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    animation-name: fade-in;
    animation-delay: 8s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.text {
    position: absolute;
    z-index: 10;
    font-size: var(--map-text-bubble-font-size);
    margin-left: 3%;
}

.bubble {
    margin-right: 20px;
    height: 90%;
    opacity: 0.8;
    position: absolute;
    top: 0;
    z-index: 2;
}

#attack-button {
    grid-area: house1;
    height: 50%;
    width: 80%;
    opacity: 0;
    font-size: var(--map-attack-btn-font-size);
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family: 'Press Start 2P';
    animation-name: flicker;
    animation-delay: 9s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

#fight-modal {
    display: none;
    font-size: var(--fight-character-text-font-size);
    height: 90vh;
    width: 90vw;
    max-height: var(--max-height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: var(--min-width);
    border: solid black 15px;
    border-style: double;
    border-radius: 5%;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, var(--fight-modal-template-rows));
    grid-template-areas: 
      "photo1 stats1"
      "stats2 photo2"
      "text text";
}

#enemy-stats {
    grid-area: stats1;
}

#player-stats {
    grid-area: stats2;
}

#enemy-photo {
    grid-area: photo1;
    display: flex;
    justify-content: center;
    transition: width 2s linear 1s;
    animation-name: blow-up;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#player-photo {
    grid-area: photo2;
    display: flex;
    justify-content: center;
    transition: width 2s linear 1s;
    height: 100%;
    width: 60%;
}

.stats-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 43% 14% 43%;
    row-gap: 10%;
}

.progress {
      background: red;
      width: 70%;
      height: 100%;
      border: solid blue;
}

#enemy-hp {
    background: greenyellow;
    width: 100%;
    height: 100%;
    transition: width 0.5s linear;
}

#cooper-hp {
    background: greenyellow;
    width: 100%;
    height: 100%;
    transition: width 0.5s linear;
}

.action-buttons {
      display: flex;
      width: 90%;
}

.action-buttons button {
    flex:1;
    height: 40%;
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family:'Press Start 2P';
    font-size: var(--fight-modal-btn-font-size);
}

#enemy-turn-btn {
      display: none;
      animation: blink-caret .55s step-end infinite;
}

#text-area {
    grid-area: text;
    border: solid grey 15px;
    border-radius: 2%;
    background: orange;
}

.kill {
    animation: kill-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
}

#player-lost-modal {
    display: none;
    height: 100vh;
    width: 100vw;
    max-height: var(--max-height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: var(--min-width);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, var(--modal-grid-rows));
    animation-name: fade-in;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#cooper-lost-photo {
    justify-self: center;
    border:solid yellow 20px;
    grid-column: 2;
    grid-row: 1;
    height: 150%;
}

#restart-game {
    font-size: var(--breakout-window-btn-font-size);
    grid-column: 2;
    grid-row: 3;
    height: 50%;
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family: 'Press Start 2P';
}

#player-won-modal {
    display: none;
    height: 100vh;
    width: 100vw;
    max-height: var(--max-height);
    max-width: var(--max-width);
    min-height: var(--min-height);
    min-width: var(--min-width);
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 30% 30% 10% 30%;
    animation-name: fade-in;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#restart-game2 {
    font-size: var(--breakout-window-btn-font-size);
    grid-column: 2;
    grid-row: 3;
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family: 'Press Start 2P';
}

#cooper-won-photo {
    justify-self: center;
    border: solid yellow 20px;
    grid-column: 2;
    grid-row: 2;
    height: 110%;
}

#win-text {
    grid-column: 2;
    align-self: center;
    justify-self: center;
    font-size: 2em;
}

.items-button {
    border-radius: 8px;
    background-color: white;
    border: solid black 4px;
    border-style: solid none;
    font-family: 'Press Start 2P';
}