/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/app/games/flag/flag.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
.aspect-ratio-9-16 {
  aspect-ratio: 9/16;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@keyframes raiseUpperArm {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

@keyframes raiseForearm {
  0% {
    transform: rotate(210deg);
  }
  100% {
    transform: rotate(120deg);
  }
}

@keyframes raiseUpperArm-left {
  0% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes raiseForearm-left {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(60deg);
  }
}

.stickman-body {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-top: 6rem solid #fff6d2;
  position: relative;
}

.stickman-body-inner {
  width: 0;
  height: 0;
  position: absolute;
  border-left: 1.75rem solid transparent;
  border-right: 1.75rem solid transparent;
  border-top: 5.4rem solid black;
  top: -5.85rem;
  left: -1.75rem;
}

.stickman-arm {
  position: absolute;
  top: 0;
  width: 2rem; /* 32px */
  height: 0.15rem; /* 4px */
  background-color: #fff6d2;
  transform-origin: center;
}

.stickman-arm.left {
  right: 2rem; /* 逆三角形の左側に配置 */
  top: -6rem;
  transform-origin: right center;
  transform: rotate(30deg);
}

.stickman-arm.right {
  left: 2rem; /* 逆三角形の右側に配置 */
  top: -6rem;
  transform-origin: left center;
  transform: rotate(-30deg);
}

.stickman-forearm {
  width: 2.5rem; /* 32px */
  height: 0.15rem; /* 4px */
  background-color: #fff6d2;
  position: absolute;
  right: 0;
  transform-origin: right center;
  transform: rotate(120deg);
}

.stickman-forearm-left {
  width: 2.5rem; /* 32px */
  height: 0.15rem; /* 4px */
  background-color: #fff6d2;
  position: absolute;
  right: 2rem;
  transform-origin: right center;
  transform: rotate(60deg);
}

.right-joint {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  right: -2.2rem; /* 上腕の端に配置し、中央に調整 */
  top: -6.2rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.bottom-joint {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  right: -0.3rem; /* 上腕の端に配置し、中央に調整 */
  top: -0.43rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.left-joint {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  left: -2.2rem; /* 上腕の端に配置し、中央に調整 */
  top: -6.2rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.joint {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  right: -0.4rem; /* 上腕の端に配置し、中央に調整 */
  top: -0.25rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.joint-left {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  right: 1.8rem; /* 上腕の端に配置し、中央に調整 */
  top: -0.3rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.hand-joint {
  width: 0.6rem; /* 8px */
  height: 0.6rem; /* 8px */
  border: 0.15rem solid #fff6d2; /* 外側の枠 */
  border-radius: 50%; /* 円形にする */
  background-color: black; /* 背景を透明にする */
  position: absolute;
  left: -0.5rem; /* 前腕の先端に配置 */
  top: -0.3rem; /* 中心に来るように調整 */
  z-index: 1; /* 上腕と前腕の間に表示 */
}

.hand-left {
  font-size: 1.3rem;
  position: absolute;
  left: -3.5rem;
  top: -1.5rem;
  /*background-color: rgba(200, 200, 100, 0.7);*/
  padding: 0.1rem;
  transform: rotate(-90deg);
  z-index: 70;
  width: 6rem;
}

.hand-right {
  font-size: 1.3rem;
  position: absolute;
  left: -3.5rem;
  top: -1.3rem;
  /*background-color: rgba(200, 200, 100, 0.7);*/
  padding: 0.1rem;
  transform: rotate(270deg);
  z-index: 70;
  width: 6rem;
}

.hand-label {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 6px;
  border-radius: 50%;
}

.stickman-face {
  position: absolute;
  top: -9rem; /* 顔の位置を調整 */
  left: -1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 2px solid #fff6d2;
  border-radius: 50%;
}

.left-hand-img {
  transform: rotateX(180deg) scale(-1);
}

@keyframes bounce {
  0% {
    transform: scale(0.5);
  }
  20% {
    transform: scale(1.4);
  }
  40% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.result {
  animation: bounce 1s ease-out;
  animation-fill-mode: forwards;
}