/* ! Font */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap");

/* ! Variables */
:root {
   --light-text: #ffffff;
   --dark-text: #3b4363;
   --score-text: #2a46c0;
   --outline:  #606e85;
   --bg-grad-1: #1f3756;
   --bg-grad-2: #141539;
   --scissors-1: #ec9e0e;
   --scissors-2: #eca922;
   --paper-1: #4865f4;
   --paper-2: #5671f5;
   --rock-1: #dc2e4e;
   --rock-2: #dd405d;
   --shadow-light: #00000026;
   --shadow-medium: #0000004d;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: "Barlow Semi Condensed", sans-serif;
   background: radial-gradient(at top, var(--bg-grad-1), var(--bg-grad-2));
   background-attachment: fixed;
   min-height: 100vh;
   text-transform: uppercase;
   color: var(--light-text);
}

/* ! Main Content */
.container {
   position: relative;
   max-width: 700px;
   margin: 0 auto;
   padding-top: 2rem;
}

.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 150px;
   border: 3px solid var(--outline);
   border-radius: 20px;
   padding: 1rem 1.4rem 1rem 2rem;
}

.logo img {
   height: 100%;
}

.score {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: white;
   border-radius: 10px;
   width: 150px;
   height: 100%;
   line-height: 1;
}

.score__title {
   font-size: 1.1rem;
   letter-spacing: 0.1rem;
   color: var(--score-text);
}

.score__number {
   font-size: 4rem;
   font-weight: 700;
   color: var(--dark-text);
}

/* ? Game */
.game {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-areas: 
      "paper scissors"
      "rock rock";
   place-items: center;
   height: 30rem;
   padding-top: 4rem;
}

.game::before {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   left: 28%;
   top: 35%;
   background: url('../images/bg-triangle.svg') no-repeat;
   z-index: -1;
}

.choice-btn {
   border: none;
   outline: none;
   background: none;
   cursor: pointer;
}

.choice {
   position: relative;
   width: 10rem;
   height: 10rem;
   background: white;
   border-radius: 50%;
   display: grid;
   place-items: center;
   box-shadow: inset 0 0.5rem var(--shadow-light);
}

.choice::before, .choice::after {
   content: '';
   position: absolute;
   left: -15%;
   top: -15%;
   width: 130%;
   height: 130%;
   border-radius: 50%;
   z-index: -1;
}

.choice::after {
   opacity: 0;
   transition: opacity 0.4s ease;
}

.choice-btn:focus .choice::after {
   opacity: 1;
   box-shadow: 0 0 0 2rem #223351;
   z-index: -2;
}

.choice img {
   transform: scale(1.5);
}

.choice.paper::before {
   background: linear-gradient(to bottom, var(--paper-1), var(--paper-2));
   box-shadow: 0 0.5rem var(--shadow-medium), 0 0.5rem var(--paper-2);
}

.choice.scissors::before {
   background: linear-gradient(to bottom, var(--scissors-1), var(--scissors-2));
   box-shadow: 0 0.5rem var(--shadow-medium), 0 0.5rem var(--scissors-2);
}

.choice.rock::before {
   background: linear-gradient(to bottom, var(--rock-1), var(--rock-2));
   box-shadow: 0 0.5rem var(--shadow-medium), 0 0.5rem var(--rock-2);
}

.choice-btn[data-choice="paper"] {
   grid-area: paper;
}

.choice-btn[data-choice="scissors"] {
   grid-area: scissors;
}

.choice-btn[data-choice="rock"] {
   grid-area: rock;
}

/* ? Results */
.results {
   display: grid;
   grid-template-columns: repeat (2, 1fr);
   place-items: center;
   grid-template-areas: 
      "you-title ai-title"
      "you-picked ai-picked";
   max-width: 1000px;
   margin: 0 auto;
}

.results__heading {
   font-size: 1.5rem;
   letter-spacing: 0.1em;
   padding: 4rem 0 8rem;
}

.results__result {
   min-width: 10rem;
   min-height: 10rem;
   background: #16213d;
   border-radius: 50%;
   transform: scale(1.4);
   z-index: -1;
}

.results__heading:first-of-type {
   grid-area: you-title;
}

.results__heading:last-of-type {
   grid-area: ai-title;
}

.results__result:first-of-type {
   grid-area: you-picked;
}

.results__result:last-of-type {
   grid-area: ai-picked;
}

.results.show-winner {
   grid-template-columns: repeat(3, 1fr);
   grid-template-areas: 
      "you-title . ai-title"
      "you-picked result-winner ai-picked";
}

.winner .choice::after {
   box-shadow: 0 0 0 40px #293251, 0 0 0 80px #232c4b, 0 0 0 130px #1e2949;
   animation: winner 1s ease forwards;
}

@keyframes winner {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.results__winner {
   grid-area: result-winner;
   display: grid;
   place-items: center;
}

.results__text {
   font-size: 3.5rem;
   padding-bottom: 1.5rem;
}

.play-again {
   background: white;
   outline: none;
   border: 2px solid transparent;
   border-radius: 0.6rem;
   color: var(--dark-text);
   padding: 0.6rem 3.5rem;
   font-family: inherit;
   text-transform: inherit;
   font-size: 1.3rem;
   letter-spacing: 0.1em;
   cursor: pointer;
}

.play-again:focus {
   border: 2px solid var(--outline);
}

/* ? Rules Button */
.rules-btn {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   background: none;
   outline: none;
   border: 2px solid var(--outline);
   border-radius: 0.6rem;
   color: var(--light-text);
   padding: 0.6rem 2.5rem;
   font-family: inherit;
   text-transform: inherit;
   font-size: 1.3em;
   letter-spacing: 0.1em;
   cursor: pointer;
}

.rules-btn:focus {
   border: 2px solid white;
}

/* ? Rules Modal */
.modal {
   position: fixed;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   display: grid;
   place-items: center;
   background: var(--shadow-medium);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   pointer-events: none;
}

.modal__container {
   background: white;
   border-radius: 0.5rem;
}

.modal__header {
   display: flex;
   width: 100%;
   justify-content: space-between;
   padding: 2rem 2rem 1rem;
}

.modal__heading {
   font-size: 1.5rem;
   color: var(--dark-text);
}

.close-btn {
   border: none;
   outline: none;
   background: none;
   cursor: pointer;
}

.rules-img {
   padding: 2rem 4rem;
   font-family: inherit;
}

.show-modal {
   opacity: 1;
   pointer-events: initial;
}

/* ! Utilites */
.preload * {
   transition: none;
}

.hidden {
   display: none;
}

.transition {
   transition: 1s ease-in-out;
}