:root {
  --green: rgb(200, 255, 40);
  --red: rgb(255, 120, 80);
  --yellow: rgb(255, 210, 40);
  --gray: rgb(195, 195, 195);
  --light-yellow: rgb(255, 240, 210);
  --mid-gray: rgb(185, 185, 185);
  --dark-gray: rgb(100, 100, 100);
}

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

.no-select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.no-select:focus {
  outline: none !important;
}

html {
  font-size: 62.5%;
  font-family: 'Protest Revolution', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2rem;
}

body {
  width: 100%;
  min-width: 48rem;
  font-size: 1.6rem;
  background-color: var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  padding: 2rem 0;
  background-color: var(--dark-gray);
  color: var(--yellow);
}

main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  flex: auto;
  gap: 1rem;
  padding: 2rem;
}

.title {
  max-width: fit-content;
  margin: 0 auto;
  font-family: 'Moirai One', system-ui;
  font-weight: 700;
  font-style: normal;
  font-size: 5rem;
  text-wrap: wrap;
  padding: 0 2rem;
}

/* Information */
.info {
  width: fit-content;
}

/* Scoreboard */
.scoreboard {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 1rem;
  padding: 2rem;
}

.scoreboard div {
  display: flex;
  align-items: center;
  min-width: max-content;
  padding: 1rem 2rem;
  background-color: var(--yellow);
  box-shadow: 0 0.2rem 1rem 0.2rem var(--dark-gray);
  border-radius: 1rem;
}

.scoreboard .score {
  display: inline-block;
  width: 5rem;
  text-align: center;
  font-size: 2rem;
}

/* Game controls */
.game-controls {
  display: flex;
  gap: 2rem;
}

.game-controls img {
  cursor: pointer;
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  pointer-events: none;
}

.control {
  width: 7rem;
  height: 7rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: white;
  box-shadow: 0 0.2rem 1rem 0.2rem var(--dark-gray);
}

#play {
  animation: play 1s ease-in-out infinite alternate;
  z-index: 1;
}

#play:hover {
  background-color: var(--green);
  animation: none;
}

#play.disabled {
  background-color: var(--mid-gray);
  animation: none;
  pointer-events: none;
}

@keyframes play {
  0% {
    transform: translate(0, 10%);
    background-color: white;
  }
  100% {
    transform: translate(0, -10%);
    background-color: var(--green);
  }
}

#reset:hover {
  background-color: var(--red);
}

#reset.disabled {
  background-color: var(--mid-gray);
  pointer-events: none;
}

/* Game area */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.round-count {
  font-size: 2rem;
}

.round-result {
  font-size: 4rem;
  height: 4rem;
}

.container-wrapper {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
}

.outer-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
}

.inner-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background-color: var(--yellow);
  border-radius: 1rem;
  align-items: center;
  box-shadow: 0 0.2rem 1rem 0.2rem var(--dark-gray);
}

.outer-container.player {
  pointer-events: none;
}

.outer-container.computer {
  width: 28rem;
}

.player-title {
  font-size: 2rem;
  text-align: center;
}

.svg-container {
  min-height: 20rem;
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.game-area .choice-svg {
  min-width: 12rem;
  flex: auto;
  padding: 1rem;
  background-color: white;
  border-radius: 50%;
}

.game-area .player .choice-svg:hover {
  background-color: var(--light-yellow);
}

.player .choice-svg {
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}

.player .choice-svg:hover {
  cursor: pointer;
  transform: rotate(90deg) scale(1.1);
}

.computer .choice-svg {
  transform: rotate(-90deg);
}

.player-choice,
.computer-choice {
  text-transform: capitalize;
}

.computer-round-wins,
.player-round-wins {
  font-size: 5rem;
  font-style: italic;
  font-weight: 700;
  height: 3rem;
  display: flex;
  align-items: center;
}

.round-wins {
  display: flex;
}

.vs {
  padding: 2rem;
  font-size: 4rem;
}
@media screen and (max-width: 895px) {
  .vs {
    width: 100%;
    text-align: center;
  }
}
/* Tooltip */
.tooltip {
  position: relative;
  pointer-events: auto;
}

.tooltip .tooltip-text {
  font-family: monospace;
  font-size: 1.6rem;
  text-wrap: nowrap;
  text-align: center;
  color: white;
  visibility: hidden;
  min-width: 12rem;
  background-color: black;
  padding: 0.5rem 1rem;

  position: absolute;
  left: 50%;
  top: -25%;
  z-index: 1;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
}

/* Popup */
.popup.on {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s ease-out;
  animation: jitter 0.5s ease infinite alternate;
  cursor: pointer;
  font-size: 20rem;
}

@keyframes jitter {
  0% {
    transform: translate(-50%, -50%);
  }
  15% {
    transform: translate(-52%, -48%);
  }
  30% {
    transform: translate(-48%, -52%);
  }
  45% {
    transform: translate(-53%, -47%);
  }
  60% {
    transform: translate(-47%, -53%);
  }
  75% {
    transform: translate(-51%, -49%);
  }
  90% {
    transform: translate(-49%, -51%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

.popup-container.on {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 80rem;
  height: 80rem;
  border-radius: 1rem;
  background: radial-gradient(
    white,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0)
  );
}
.popup-message.on {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 40rem;
  text-align: center;
}

.overlay.on {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  cursor: not-allowed;
}