form
  input.you type='radio' id='you-1' name='you'
  input.you type='radio' id='you-2' name='you'
  input.you type='radio' id='you-3' name='you'
  input.skynet type='radio' id='skynet-1' name='skynet'
  input.skynet type='radio' id='skynet-2' name='skynet'
  input.skynet type='radio' id='skynet-3' name='skynet'

  div.options
    label.r for='you-1'
    label.p for='you-2'
    label.s for='you-3'
  div.game
    div.go
      label for='skynet-1'
      label for='skynet-2'
      label for='skynet-3'
  div.it
    div.r
    div.p
    div.s
  div.results
    div.win Win
    div.lose Lose
    div.tie Tie
    button type="reset" Again

$bg: #E5E0BE;
$size: 120px;

html,
body,
form {
  height: 100%;
}

body {
  background: $bg;
  font-family: 'Slabo 27px', serif;
}

form {
  align-items: center;
  display: flex;
  justify-content: center;
}

input {
  left: 50%;
  opacity: 0.01;
  position: fixed;
  top: 50%;
}

.options {
  display: flex;
  flex-direction: column;
  margin: 0 60px;
  
  label {
    background-color: #E0D6AF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: $size;
    margin: 10px auto;
    transition:  transform 0.2s;
    transform: scale(1);
    width: $size;
    
    &:hover {
      background-color: #D1C79F;
      background-size: 65%;
    }
    
    &.r {
      background-image: url('http://www.jerrylow.com/demo/rps/rock.svg');
      background-size: 50%;
      
      &:hover {
        background-size: 55%; 
      }
    }
    
    &.p {
      background-image: url('http://www.jerrylow.com/demo/rps/paper.svg');
    }
    
    &.s {
      background-image: url('http://www.jerrylow.com/demo/rps/scissor.svg');
    }
  }
}

input.you:checked ~ .options label {
  transform: scale(.8);
}

input.you:nth-of-type(1):checked ~ .options label.r,
input.you:nth-of-type(2):checked ~ .options label.p,
input.you:nth-of-type(3):checked ~ .options label.s {
  background-color: #BFCCA3;
  transform: scale(1.25);
}

.it {
  display: flex;
  flex-direction: column;
  margin: 0 60px;
  width: $size;
  
  div {
    background-color: #C9A185;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    border-radius: 50%;
    display: none;
    height: $size;
    transform: scale(1.25);
    width: $size;
    
    &.r {
      background-image: url('http://www.jerrylow.com/demo/rps/rock.svg');
      background-size: 50%;
    }
    
    &.p {
      background-image: url('http://www.jerrylow.com/demo/rps/paper.svg');
    }
    
    &.s {
      background-image: url('http://www.jerrylow.com/demo/rps/scissor.svg');
    }
  }
}

.game {
  border-radius: 50%;
  height: $size;
  overflow: hidden;
  position: relative;
  width: $size;
  z-index: 10;
  
  &:before,
  &:after {
    align-items: center;
    background: lighten(#706C59, 20%);
    color: white;
    content: 'Choose your weapon';
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  
  &:after {
    background: #706C59;
    content: 'Fight!';
    cursor: pointer;
    font-size: 26px;
    pointer-events: none;
    transition: font 0.2s;
    z-index: 1;
  }
  
  &:hover:after {
    font-size: 30px;
  }
  
  .go {
    animation-duration: .02s;
    animation-name: random;
    animation-iteration-count: infinite;
    display: flex;
    flex-direction: column;

    &:active {
      animation-play-state: paused;
    }
  }
  
  label {
    cursor: pointer;
    height: $size;
    width: $size;
  }
}

input.skynet:checked ~ .game .go {
  animation-play-state: paused;
}

@keyframes random {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-#{$size * 2});
  }
}

/**
 * Start
 **/
input.you:checked ~ .game:before {
  display: none;
}

/**
 * Results
 **/
input#you-1:checked ~ input#skynet-1:checked,
input#you-2:checked ~ input#skynet-2:checked,
input#you-3:checked ~ input#skynet-3:checked {
  ~ .results .tie {
    display: flex;
  }
}

input#you-1:checked ~ input#skynet-3:checked,
input#you-2:checked ~ input#skynet-1:checked,
input#you-3:checked ~ input#skynet-2:checked {
  ~ .results .win {
    display: flex;
  }
}

input#you-1:checked ~ input#skynet-2:checked,
input#you-2:checked ~ input#skynet-3:checked,
input#you-3:checked ~ input#skynet-1:checked {
  ~ .results .lose {
    display: flex;
  }
}

input#skynet-1:checked ~ .it .r,
input#skynet-2:checked ~ .it .p,
input#skynet-3:checked ~ .it .s {
  display: flex;
}

input.you:checked ~ input.skynet:checked ~ .results {
  display: flex;
}

.results {
  align-items: center;
  display: none;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;

  .win,
  .lose,
  .tie {
    align-items: center;
    background: #D1B354;
    border-radius: 50%;
    color: white;
    display: none;
    font-size: 40px;
    height: $size + 20px;
    justify-content: center;
    width: $size + 20px;
  }

  button {
    background: #706C59;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    height: 40px;
    margin: 20px 0 -60px;
    width: 80px;
  }
}