// The VP markers (1st case, 2nd case, 3rd case)

  // The VP markers (1st case, 2nd case, 3rd case; but indexed 0, 1, 2!)

.vpbox,

    bottom:25px;

}
.penaltybox {
    bottom:25px;
}
.vpbox {
    top:58px;

#vp_7 { top: 58px; left: 24px; }
#vp_5 { top: 50px; left: 95px; }
#vp_3 { top: 45px; left: 165px; }
#vp_1 { top: 50px; left: 796px; }
#vp_0 { top: 46px; left: 868px; }

.token.penalty {

.token.penalty,
.token.vpmarker {

#vp_red_0 { background-position: 0 0 }
#vp_red_1 { background-position: -32px 0 }
#vp_red_2 { background-position: -64px 0 }
#vp_blue_0 { background-position: -96px 0 }
#vp_blue_1 { background-position: -128px 0 }
#vp_blue_2 { background-position: -160px 0 }
#vp_green_0 { background-position: 0 32px }
#vp_green_1 { background-position: -32px 32px }
#vp_green_2 { background-position: -64px 32px }
#vp_purple_0 { background-position: -96px 32px }
#vp_purple_1 { background-position: -128px 32px }
#vp_purple_2 { background-position: -160px 32px }
#vp_yellow_0 { background-position: -192px 0 }
#vp_yellow_1 { background-position: -224px 0 }
#vp_yellow_2 { background-position: -256px 0 }
/* Just make it look a little random. In 5P games they might be many tokens on one spot. */
.vpbox .vpmarker {
    display: inline-block;
    margin-right:-12px;
    margin-bottom:-12px;
}
.vpbox .vpmarker:nth-of-type(2n) {
    margin-bottom:-6px;
    margin-top:0;
}
.vpbox .vpmarker:nth-of-type(2n+1),
.vpbox .vpmarker:nth-of-type(4n) {
    margin-left:-6px;
    margin-top:-6px;
}

                array_values($this->tokens->getTokensInLocation('penalty_%'))

                array_values($this->tokens->getTokensInLocation('penalty_%')),
                array_values($this->tokens->getTokensInLocation('vp_%'))

        $minigame = self::getGameStateValue('minigame');

            $points_winnable = self::getGameStateValue('points_winnable');

                SET player_score = player_score + " . self::getGameStateValue('points_winnable') . ",

                SET player_score = player_score + " . $points_winnable . ",

            $this->tokens->moveToken("vp_{$color}_" . ($minigame - 1), "vp_{$points_winnable}");

                    $this->tokens->getTokensOfTypeInLocation("pi_{$color}_%")

                    $this->tokens->getTokensOfTypeInLocation("pi_{$color}_%"),
                    $this->tokens->getTokensOfTypeInLocation("vp_{$color}_%")

                // Put VP token of unsolved player to "0"
                $unsolved_player_id = array_shift($unsolved_player_ids);
                $unsolved_player = self::loadPlayersBasicInfos()[$unsolved_player_id];
                $unsolved_color = $this->constants['HEX2COLORNAME'][$unsolved_player['player_color']];
                $token_key = "vp_{$unsolved_color}_" . ($minigame - 1);
                $token_target = "vp_0";
                $this->tokens->moveToken($token_key, $token_target);
                self::notifyAllPlayers(
                    'placeToken',
                    clienttranslate('${player_name} did not solve in this mini-game and gets 0 points.'),
                    array(
                        'token' => array("key" => $token_key, "location" => $token_target),
                        'player_name' => $unsolved_player['player_name'],
                    )
                );
                // Mini-game is over

    <div id="vp_7" class="vpbox"></div>
    <div id="vp_5" class="vpbox"></div>
    <div id="vp_3" class="vpbox"></div>
    <div id="vp_1" class="vpbox"></div>
    <div id="vp_0" class="vpbox"></div>

var jstpl_token_vp = '<div id="${key}" class="token vpmarker"></div>';