:root {
  --juniora-h: 56px;

  --hand-scale: 1;
  --hand-size: 200px
}
@keyframes changeOrder {
  from {
    z-index: 9
  }
  to {
    z-index: 1
  }
}
@keyframes handShake {
  0%,
  100% {
    transform: rotate(10deg)
  }
  50% {
    transform: rotate(-10deg)
  }
}
@keyframes handShake2 {
  0%,
  100% {
    transform: rotateY(180deg) rotate(10deg)
  }
  50% {
    transform: rotateY(180deg) rotate(-10deg)
  }
}
* {
  box-sizing: border-box
}
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: var(--jn-font);
  background: #ffffff;
  color: #222;
  -webkit-tap-highlight-color: transparent
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--juniora-h) + 12px);
  overflow-x: hidden
}
form {
  position: relative;
  min-height: calc(100vh - var(--juniora-h) - 12px);
  min-height: calc(100dvh - var(--juniora-h) - 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px 12px
}
.stage {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center
}
.hint {
  text-align: center;
  font-size: clamp(13px, 3.6vw, 16px);
  color: #666;
  margin: 0 0 16px;
  line-height: 1.8
}
h1 {
  text-align: center;
  font-size: clamp(22px, 5vw, 36px);
  margin: 0 0 14px;
  font-weight: 700
}
#hands {
  direction: ltr;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: clamp(6px, 2vmin, 16px)
}
input:checked ~ div .hand,
input:checked ~ .stage .hand {
  animation: none !important
}
.hand {
  margin: clamp(4px, 1.5vmin, 14px);
  width: var(--hand-size);
  height: var(--hand-size);
  position: relative;
  transform: rotate(10deg);
  display: inline-block;
  animation: handShake 2s infinite;
  flex: 0 0 auto
}
.hand > div {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid black;
  background: gold;
  transition: all 0.1s
}
.fist {
  height: calc(110px * var(--hand-scale));
  left: calc(40px * var(--hand-scale));
  top: calc(50px * var(--hand-scale));
  width: calc(90px * var(--hand-scale));
  border-radius: calc(20px * var(--hand-scale)) 0 0 calc(20px * var(--hand-scale))
}
.finger {
  width: calc(70px * var(--hand-scale));
  height: calc(30px * var(--hand-scale));
  border-radius: calc(20px * var(--hand-scale));
  left: calc(80px * var(--hand-scale));
  transform-origin: 0 50%
}
.finger-1 {
  top: calc(50px * var(--hand-scale));
  --dif: 0px
}
.finger-2 {
  top: calc(78px * var(--hand-scale));
  left: calc(84px * var(--hand-scale));
  --dif: calc(4px * var(--hand-scale))
}
.finger-3 {
  top: calc(106px * var(--hand-scale));
  --dif: 0px
}
.finger-4 {
  top: calc(134px * var(--hand-scale));
  height: calc(26px * var(--hand-scale));
  left: calc(76px * var(--hand-scale));
  --dif: calc(-8px * var(--hand-scale))
}
div.thumb {
  width: calc(35px * var(--hand-scale));
  height: calc(70px * var(--hand-scale));
  border-radius: 0 calc(20px * var(--hand-scale)) calc(20px * var(--hand-scale)) calc(20px * var(--hand-scale));
  top: calc(50px * var(--hand-scale));
  left: calc(80px * var(--hand-scale));
  border-left: 0 solid;
  box-shadow: calc(-17px * var(--hand-scale)) calc(6px * var(--hand-scale)) 0 calc(-15px * var(--hand-scale)) black
}
div.arm {
  width: calc(22px * var(--hand-scale));
  height: calc(70px * var(--hand-scale));
  left: calc(20px * var(--hand-scale));
  top: calc(70px * var(--hand-scale));
  border: 0;
  border-top: 2px solid black;
  border-bottom: 2px solid black
}
#user-hand {
  transform: rotateY(180deg);
  animation: handShake2 2s infinite;
  position: relative
}

input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0
}
input[id$="scissors"]:checked ~ .stage #user-hand .finger-1,
input[id^="scissors"]:checked ~ .stage #computer-hand .finger-1 {
  width: calc(130px * var(--hand-scale));
  transform: rotate(-5deg)
}
input[id$="scissors"]:checked ~ .stage #user-hand .finger-2,
input[id^="scissors"]:checked ~ .stage #computer-hand .finger-2 {
  width: calc(130px * var(--hand-scale));
  transform: rotate(5deg)
}
input[id$="paper"]:checked ~ .stage #user-hand .finger-1,
input[id$="paper"]:checked ~ .stage #user-hand .finger-2,
input[id$="paper"]:checked ~ .stage #user-hand .finger-3,
input[id$="paper"]:checked ~ .stage #user-hand .finger-4,
input[id^="paper"]:checked ~ .stage #computer-hand .finger-1,
input[id^="paper"]:checked ~ .stage #computer-hand .finger-2,
input[id^="paper"]:checked ~ .stage #computer-hand .finger-3,
input[id^="paper"]:checked ~ .stage #computer-hand .finger-4 {
  left: calc(124px * var(--hand-scale));
  left: calc((124px * var(--hand-scale)) + var(--dif));
  width: calc(80px * var(--hand-scale));
  border-left: 0;
  border-radius: 0 calc(20px * var(--hand-scale)) calc(20px * var(--hand-scale)) 0
}
#rock-rock:checked ~ #message h2::before,
#paper-paper:checked ~ #message h2::before,
#scissors-scissors:checked ~ #message h2::before {
  content: "مساوی شد!"
}
#rock-paper:checked ~ #message h2::before,
#paper-scissors:checked ~ #message h2::before,
#scissors-rock:checked ~ #message h2::before {
  content: "تو بردی! 🎉"
}
#rock-scissors:checked ~ #message h2::before,
#paper-rock:checked ~ #message h2::before,
#scissors-paper:checked ~ #message h2::before {
  content: "کامپیوتر برد!"
}
#message {
  text-align: center;
  display: none;
  margin-top: clamp(8px, 2vmin, 18px)
}
#message h2 {
  font-size: clamp(20px, 4.5vw, 30px);
  margin: 0 0 12px
}
#message input[type="reset"] {
  font: inherit;
  font-weight: 600;
  background: #292929;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: clamp(14px, 2.4vw, 16px)
}
#message input[type="reset"]:active {
  transform: translateY(1px)
}
input:checked ~ #message {
  display: block
}
#icons {

  width: clamp(44px, 12vmin, 60px);
  height: auto;
  display: inline-flex;
  flex-direction: column;
  flex: 0 0 auto
}
#icons > div {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 12vmin, 60px);
  height: clamp(44px, 12vmin, 60px);
  overflow: hidden;
  position: relative
}
label:active {
  position: static;
  margin-left: clamp(44px, 12vmin, 60px)
}
label:active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(44px, 12vmin, 60px);
  z-index: 10;
  height: clamp(44px, 12vmin, 60px)
}
label {
  animation: changeOrder 0.45s infinite linear;
  background: #f5f5f5;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(44px, 12vmin, 60px);
  width: clamp(44px, 12vmin, 60px);
  line-height: 1;
  font-size: clamp(1.4rem, 5vmin, 2rem);
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}
label:nth-of-type(1) {
  animation-delay: -0.00s
}
label:nth-of-type(2) {
  animation-delay: -0.15s
}
label:nth-of-type(3) {
  animation-delay: -0.30s
}

@media (max-width: 900px) {
  :root {
    --hand-scale: 0.8;
    --hand-size: 160px
  }
}
@media (max-width: 640px) {
  :root {
    --hand-scale: 0.66;
    --hand-size: 132px
  }
}

@media (max-width: 480px) {
  :root {
    --juniora-h: 52px;
    --hand-scale: 0.55;
    --hand-size: 110px
  }
  h1 {
    font-size: 20px;
    margin-bottom: 10px
  }
  #hands {
    gap: 4px
  }
  .hand {
    margin: 4px
  }
}

@media (max-width: 360px) {
  :root {
    --hand-scale: 0.46;
    --hand-size: 92px
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --hand-scale: 0.4;
    --hand-size: 80px
  }
  .hint {
    display: none
  }
  form {
    padding: 4px 8px
  }
  form {
    padding: 8px
  }
  h1 {
    font-size: 18px;
    margin-bottom: 6px
  }
}

.juniora-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--juniora-h);
  background: #292929;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 0 16px
}
.juniora-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--jn-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9
}
.juniora-logo {
  width: 28px;
  height: auto;
  display: block
}
.juniora-text {
  letter-spacing: normal
}
@media (max-width: 480px) {
  .juniora-link {
    font-size: 12.5px
  }
}

.juniora-overlay {
  height: var(--juniora-h)
}
.juniora-link {
  font-family: var(--jn-font);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: normal;
  gap: 8px;
  white-space: nowrap
}
.juniora-logo {
  width: 22px;
  height: auto
}
.juniora-text {
  letter-spacing: normal
}
@media (max-height: 520px) {
  .juniora-link {
    font-size: 12px
  }
  .juniora-logo {
    width: 18px
  }
}

#jn-cursor {
  position: fixed;
  display: none;
  pointer-events: none;
  border: 3px solid var(--jn-green);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(160, 231, 71, 0.2);
  z-index: 500
}

#icons {
  direction: ltr;
}

.mc-btn, .jump-btn, #jumpBtn, #controls button, .mc-fire {
  font-family: var(--jn-font);
  font-weight: 700;
}