/* Dutch theme override for engine CatchGame.vue */
/* This file overrides the engine's CatchGame.css to use Dutch assets */

.play-area {
    background-image: url('../catchgame/frozenLake.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Remove borders and shadows from players, use different colored skaters */
.player {
    width: 15% !important;
    height: 15%!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Different colored skaters for each player position - using data attribute instead of nth-child */
.player[data-player-id="0"] { background-image: url('../catchgame/red-ice-skater.png') !important; }
.player[data-player-id="1"] { background-image: url('../catchgame/green-ice-skater.png') !important; }
.player[data-player-id="2"] { background-image: url('../catchgame/blue-ice-skater.png') !important; }
.player[data-player-id="3"] { background-image: url('../catchgame/yellow-ice-skater.png') !important; }
.player[data-player-id="4"] { background-image: url('../catchgame/pink-ice-skater.png') !important; }
.player[data-player-id="5"] { background-image: url('../catchgame/cyan-ice-skater.png') !important; }
.player[data-player-id="6"] { background-image: url('../catchgame/orange-ice-skater.png') !important; }
.player[data-player-id="7"] { background-image: url('../catchgame/purple-ice-skater.png') !important; }

/* Fallback for any additional players */
.player[data-player-id]:not([data-player-id="0"]):not([data-player-id="1"]):not([data-player-id="2"]):not([data-player-id="3"]):not([data-player-id="4"]):not([data-player-id="5"]):not([data-player-id="6"]):not([data-player-id="7"]) { background-image: url('../catchgame/ice-skater.png') !important; }

/* Remove borders and shadows from falling objects (stroopwafels) */
.falling-object {
    width: 4% !important;
    height: 4%!important;
    background-image: url('../catchgame/stroopwafel.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}