background-image: url("img/startplayer.png");
    background-size: cover;
    height:32px;
    width:12px;

    float:right;

}
.player-board .cube_supply,
.player-board .disc_supply {
    clear:both;
    position: relative;
    padding:2px 5px;
}
.player-board .cube_supply > .cube20 {
    position: relative;
    float:left;
}
.player-board .disc_supply > .disc30 {
    position: relative;
    float:left;

.loccont .agentarea .investigator {
    display: inline-block;
}

    bottom:-4px;
    left:-4px;

    bottom:-2px;
    left:-2px;

    width:50px;

.locslot .cube20:nth-of-type(1) { bottom:0; z-index:200; }
.locslot .cube20:nth-of-type(2) { bottom:0; left:17px; z-index:200; }
.locslot .cube20:nth-of-type(3) { bottom:13px; z-index:201; }
.locslot .cube20:nth-of-type(4) { bottom:13px; left:17px; z-index:201; }
.locslot .cube20:nth-of-type(5) { bottom:26px; z-index:203; }

/*
 Cubes and disc on a tile:
 Closest to the middle looks best, so we start there.
    ------------
    |       d  |
    | 4 3  ddd |
    | 2 1   d  |
    | 6 5      |
    ------------
*/
.locslot .cube20:nth-of-type(1) { bottom:13px; left:17px; z-index:201; }
.locslot .cube20:nth-of-type(2) { bottom:13px; left: 0px; z-index:201; }
.locslot .cube20:nth-of-type(3) { bottom:26px; left:17px; z-index:203; }
.locslot .cube20:nth-of-type(4) { bottom:26px; left:0px; z-index:203; }
.locslot .cube20:nth-of-type(5) { bottom:0; left:17px; z-index:200; }
.locslot .cube20:nth-of-type(6) { bottom:0; left: 0px; z-index:200; }

.agentarea .investigator {
    display: inline-block;
    margin-right:3px;
}
.agentarea .investigator:last-of-type {
    margin-right:0;
}

}
.investigator .cube20 {
    top:-2px;

    bottom:-1px;
    right:-2px;
 }
 .investigator > div:nth-of-type(1) { left: -5px; bottom:-2px; z-index:200; }
 .investigator > div:nth-of-type(2) { right: -5px; bottom:-2px; left:17px; z-index:200; }
 .investigator > div:nth-of-type(3) { left: -5px; bottom:13px; z-index:201; }

    bottom:-4px;
}
.investigator > div:nth-of-type(1) { left:-3px; z-index:200; }
.investigator > div:nth-of-type(2) { left:8px;z-index:201; }
.investigator > div:nth-of-type(3) { left:19px; z-index:202; }

/* Correct the rotation of the location containers for the tokens.
   The tokens look better when they are not rotated.
*/
#loccont_1 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_2 div:not(.token) > .token {
    transform:rotate(-2.5deg);
}
#loccont_3 div:not(.token) > .token {
    transform:rotate(-2.0deg);
}
#loccont_4 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_5 div:not(.token) > .token {
    transform:rotate(-1.3deg);
}
#loccont_6 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_7 div:not(.token) > .token {
    transform:rotate(-1.15deg);
}
#loccont_8 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_9 div:not(.token) > .token {
    transform:rotate(-1.7deg);
}
#loccont_10 div:not(.token) > .token {
    transform:rotate(1.5deg);
}
#loccont_11 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_12 div:not(.token) > .token {
    transform:rotate(-0deg);
}
#loccont_13 div:not(.token) > .token {
    transform:rotate(-1.5deg);
}
#loccont_14 div:not(.token) > .token {
    transform:rotate(-0deg);
}

        $current_player_id = self::getCurrentPlayerId();    // !! We must only return informations visible by this player !!
        $minigame = self::getGameStateValue("minigame");
        // Get information about players
        $sql = "
            SELECT
                player_id as id,
                player_score as score,
                player_solved_in_round as solved_in_round,
                player_no = $minigame as is_startplayer
            FROM player
        ";
        $result['players'] = self::getCollectionFromDb($sql);
        // Gather all information about current game situation (visible by player $current_player_id).

        $result = array_merge($result, $this->getPrivateGameInfos($current_player_id));

        $result = array_merge($result, $this->getPrivateGameInfos(self::getCurrentPlayerId()));

        $minigame = self::getGameStateValue("minigame");
        // Get information about players
        $sql = "
            SELECT
                player_id as id,
                player_color as color,
                player_score as score,
                player_solved_in_round as solved_in_round,
                player_no = $minigame as is_startplayer
            FROM player
        ";
        $players = self::getCollectionFromDb($sql);
        foreach ($players as $idx => $player) {
            $players[$idx]['colorname'] = $this->constants['HEX2COLORNAME'][$player['color']];
        }

            'players' => $players,

                array_values($this->tokens->getTokensInLocation('cubes_%')), // player supplies
                array_values($this->tokens->getTokensInLocation('discs_%')), // player supplies

            // TODO: show this only once; the first time, the deck runs out.
            // after that it's obvious to the players.

                clienttranslate('Evidence cards are exhausted and cannot be played anymore.'),

                clienttranslate('The evidence deck and discard pile are empty.'),

        // TODO: don't allow asking for the same location twice. It's too
        // obvious a mistake.

            // TODO: move cubes back to player supply

        // Investigators that have been used go back to the box.
        $this->tokens->moveTokens(
            array_pluck($this->tokens->getTokensOfTypeInLocation('pi_%', 'agentarea_%'), 'key'),
            'box');

            dojo.fx.wipeOut({node: $('carddisplay')}).play();

            // dojo.fx.wipeOut({node: $('carddisplay')}).play();

            dojo.fx.wipeIn({node: $('carddisplay')}).play();
            // "bug fix": if window was resized during this cards are in wrong
            // positions; reset.
            this.evidenceDisplay.resetItemsPosition();
            this.evidenceDiscard.resetItemsPosition();

            // dojo.fx.wipeIn({node: $('carddisplay')}).play();
            // // "bug fix": if window was resized during this cards are in wrong
            // // positions; reset.
            // this.evidenceDisplay.resetItemsPosition();
            // this.evidenceDiscard.resetItemsPosition();

        placeToken: function (token, target_id) {

        placeToken: function (token, target_id, delay) {

            if (!target_id) {
                // No target id given. Then derive it from the type by some easy rules.
                // TODO: explain rules
                target_id = token.location;
                if (ttype == 'cube' && target_id.startsWith('locslot_')) {
                    target_id += '_' + ttype + 's';  // "locslot_xxx_(cube|disc)s"
                }
            }

            // If no explicit target given; use the location from the DB.
            target_id = target_id || token.location;

            }
            // Cubes for 'locslot_X' go actually to 'locslot_X_cubes'
            if (ttype == 'cube' && target_id.startsWith('locslot_')) {
                target_id += '_cubes';

                    var html = '<div id="' + key + '" class="cube20 cube20_' + color + '"></div>';

                    var html = '<div id="' + key + '" class="token cube20 cube20_' + color + '"></div>';

                    var html = '<div id="' + key + '" class="disc30 disc30_' + color + '"></div>';

                    var html = '<div id="' + key + '" class="token disc30 disc30_' + color + '"></div>';

                    var html = '<div id="' + key + '" class="investigator investigator_' + color + '"></div>';

                    var html = '<div id="' + key + '" class="token investigator investigator_' + color + '"></div>';

                this.slideToObject(key, target_id).play();

                // HACK
                var html = $(key).outerHTML;
                var duration = 500;
                delay = delay || 500;
                this.slideToObjectAndDestroy(key, target_id, duration, delay);
                window.setTimeout(dojo.hitch(this, function () {
                    dojo.place(html, target_id);
                }), delay + duration);

           for (i in tokens) { this.placeToken(tokens[i], target_id) }

           for (i in tokens) { this.placeToken(tokens[i], target_id, i * 500) }

            // TODO: set new startplayer in UI

            // Re-enable player panels that may have been disabled in previous mini-game.

            // Reset active player marker
            dojo.query(".sp_marker").removeClass('visible');
            for (var player_id in notif.args.players) {
                var player = notif.args.players[player_id];
                dojo.toggleClass('sp_marker_' + player_id, 'visible', player.is_startplayer == 1);
            }
            // Cards + tiles

            // TODO: reset tokens

            // Tokens
            this.placeTokens(notif.args.tokens);

var jstpl_player_board = '<div class="cp_board"><span class="sp_marker" id="sp_marker_${id}">➊</span></div>';

var jstpl_player_board = '<div class="cp_board">' +
    '<div class="sp_marker" id="sp_marker_${id}"></div>' +
    '<div class="investigator investigator_${colorname}"></div>x99' +
    '<div class="cube_supply" id="cubes_${id}"></div>' +
    '<div class="disc_supply" id="discs_${id}"></div>' +
    '</div>';