*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  /* border: 1px solid red; */
}
:root {
  --Scissors-A: #efa81c;
  --Scissors-B: #c26b1c;
  --Paper-A: #566ff0;
  --Paper-B: #2c46bf;
  --Rock-A: #e13859;
  --Rock-B: #9c1734;

  /* text */
  --Dark-Text: #454e85;
  --Score-Text: #565366;
  --Header-Outline: #5c6e86;

  /* background */
  /* --white-type: white; */
  --white-type: #eeeeee;
  --white-score: #f9f9f7;
  --background-A: rgba(31, 55, 86, 0.99);
  --background-B: hsl(237, 49%, 15%);

  /* sizes */
  /* --size-circle: 6.1em; */
  /* --size-circle-desk: 8.125em; */
  --size-circle-picked: 12.5em;
}
body {
  width: 100vw;

  background-image: radial-gradient(
    circle at 50% 0,
    var(--background-A),
    var(--background-B)
  );
  background-repeat: no-repeat;

  font-family: 'Barlow Semi Condensed', sans-serif;
  color: white;
  font-size: 16px;

  position: relative;
}
button {
  font-family: 'Barlow Semi Condensed', sans-serif;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.main-activity {
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  position: relative;

  overflow: hidden;
}
/* ----------------------header---------------------- */
.header {
  height: 5.9em;
  width: 85%;
  min-width: 19em;
  max-width: 800px;

  margin-top: 2em;
  padding: 0 0.6em 0 1.2em;

  border: 0.2em solid var(--Header-Outline);
  border-radius: 0.5em;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__titles {
  font-size: 0.6em;
  line-height: 1.8em;
  font-weight: 600;
}

.header__score {
  height: 4.4em;
  width: 5em;
  background-color: var(--white-score);

  border-radius: 0.3125em;
  line-height: 1.6em;
  text-align: center;
}
.header__score__title {
  margin-top: 3px;
  font-size: 0.7em;
  color: var(--Dark-Text);
  letter-spacing: 1px;
  font-weight: 600;
}
.header__score__value {
  font-size: 2.5em;
  font-weight: 700;
  color: var(--Score-Text);
}

/* ----------------------body---------------------- */
.container {
  font-size: 16px;

  margin-top: -2.813em;
  width: 19.5em;
  height: 17.6em;

  background-image: url('../images/bg-triangle.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55%;

  position: relative;
}
.container__arc-blue,
.container__arc-yellow,
.container__arc-red {
  --size-arc-container: 8.315em;

  width: var(--size-arc-container);
  height: var(--size-arc-container);

  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.container__arc-blue {
  background-color: var(--Paper-A);
  box-shadow: 0 -0.94em 0 -0.5em var(--Paper-B) inset;
}
.container__arc-yellow {
  background-color: var(--Scissors-A);
  box-shadow: 0 -0.94em 0 -0.5em var(--Scissors-B) inset;
}
.container__arc-red {
  background-color: var(--Rock-A);
  box-shadow: 0 -0.94em 0 -0.5em var(--Rock-B) inset;
}

.container__arc-blue-position,
.container__arc-yellow-position,
.container__arc-red-position {
  position: absolute;
  cursor: pointer;
}

.container__arc-blue-position {
  left: 0;
  top: 0;
}
.container__arc-yellow-position {
  top: 0;
  right: 0;
}
.container__arc-red-position {
  left: calc(50% - (var(--size-arc-container) / 2));
  bottom: 0;
}

.circle {
  background-color: var(--white-type);
  height: calc(var(--size-arc-container) * 0.74);
  width: calc(var(--size-arc-container) * 0.74);
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: 0 1.25em 0 -0.625em #dedede inset;
}
.circle:hover {
  background-color: #dedede;
}
.circle > img {
  width: 48%;
}
/* -------------------------RULES-------------------- */
.rules {
  display: block;
  margin-bottom: 55px;

  border: 3px solid var(--Header-Outline);
  border-radius: 8px;

  background-color: transparent;
  color: white;
  font-size: 1em;
  font-weight: 500;

  height: 2.8em;
  width: 8.125em;

  cursor: pointer;
}
.rules:focus {
  outline: none;
}
.rules:hover {
  background-color: var(--Dark-Text);
}

/* WINDOWS-RULES */

.window-rules-back {
  z-index: 10;

  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;

  background-color: rgba(200, 200, 200, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;
}
.window-rules {
  width: 100vw;
  height: 100vh;

  background-color: var(--white-score);

  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;

  font-size: 16px;
}
.window-rules > h2 {
  color: var(--Score-Text);
  font-size: 2em;
}
.close {
  height: 2em;
  width: 2em;

  background-image: url('../images/icon-close.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;

  cursor: pointer;
}

/*----------- GAME ------------------------------------*/
.game {
  font-size: 16px;

  width: 19.5em;
  margin-top: 3em;

  display: flex;
  justify-content: space-between;

  flex-wrap: wrap;
}
.clicked {
  width: 9.4em;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  /* border: 1px solid red; */
}
.clicked__player {
  font-size: 1.1em;
  margin-top: 20px;
  font-weight: 600;
}
.game_result {
  text-align: center;
  font-size: 56px;
  font-weight: 700;
  width: 100%;
  height: 60px;

  margin-top: 20%;
  margin-bottom: 15px;
}
.play-again {
  width: 200px;
  height: 45px;
  margin: 0 auto 5px;

  border: none;
  border-radius: 8px;

  background-color: var(--white-score);
  color: var(--Score-Text);
  font-size: 16px;

  cursor: pointer;
}
.play-again:focus {
  outline: none;
}

.game__gradient {
  --size-arc-container: 8.315em;

  width: var(--size-arc-container);
  height: var(--size-arc-container);

  border-radius: 50%;

  position: relative;
}
.game__gradient::before {
  content: '';

  --b-size: calc(var(--size-arc-container) * 2.5);

  height: var(--b-size);
  width: var(--b-size);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(210, 210, 210, 0.2) 0%,
    rgba(215, 215, 215, 0.1) 40%,
    rgba(221, 221, 221, 0.05) 40%,
    rgba(225, 225, 225, 0.05) 50%,
    rgba(227, 227, 227, 0.025) 50%,
    rgba(229, 229, 229, 0.025) 60%,
    rgba(230, 230, 230, 0.0125) 60%,
    rgba(232, 232, 232, 0) 70%
  );

  position: absolute;
  top: calc((var(--size-arc-container) / 2) - (var(--b-size) / 2));
  right: calc((var(--size-arc-container) / 2) - (var(--b-size) / 2));

  z-index: -1;
}

@media all and (min-width: 810px) {
  /* ---------- RULES ---------- */
  .window-rules {
    --height-wr: 28em;
    --width-wr: 25em;

    height: var(--height-wr);
    width: var(--width-wr);
    border-radius: 10px;

    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .window-rules h2 {
    order: 1;
    margin-left: 35px;
  }
  .window-rules img {
    order: 3;
    margin: 0 auto;
  }
  .close {
    order: 2;
    margin-right: 35px;
  }

  .main-activity {
    justify-content: start;
  }

  /* ---------- RULES BUTTON ---------- */
  .rules {
    position: absolute;
    bottom: 2em;
    right: 2em;
    margin: 0;
  }

  .header {
    font-size: 24px;
  }
  .header__titles {
    font-size: 0.7em;
  }
  .header__score {
    width: 5.5em;
  }
  /* ---------- CONTAINER ---------- */
  .container {
    font-size: 22px;
    margin-top: 4%;
  }

  /* ---------- THE GAME ---------- */
  .game {
    width: 95%;
    max-width: 850px;
    /* height: 50%; */

    /* border: 1px solid red; */

    font-size: 30px;
    position: relative;
  }
  /*
  .clicked {
    padding-top: 40px;
    
    width: calc(var(--size-circle-desk) * 2);
    height: 100%;
  }
  .clicked .circle {
    width: var(--size-circle-picked);
    height: var(--size-circle-picked);
  }
  .outline {
    width: calc(var(--size-circle-picked) + 40px);
    height: calc(var(--size-circle-picked) + 40px);
  }
  .game img {
    display: none;
    width: calc(var(--size-circle-picked) - 100px);
    height: calc(var(--size-circle-picked) - 100px);
  }
  .game > h2 {
    width: 30%;
    position: absolute;
    top: 35%;
    left: 35%;

    
    margin-top: 0;

    display: none;
  }*/
  .game_result {
    --width-result: 100%;

    text-align: center;

    width: var(--width-result);
    position: absolute;
    top: 35%;
    /* left: calc(50% - (var(--width-result) / 2)); */

    margin: 0;
  }
  .play-again {
    position: absolute;
    top: 60%;
    left: calc(50% - 100px);
    font-size: 20px;
  }
}