/* Styles for animating gamble results */
#gamble-result {
    --offset: 100px;
    --position-0-x: calc(-1 * var(--offset));
    --position-0-y: calc(-1 * var(--offset));
    --position-1-x: var(--offset);
    --position-1-y: calc(-1 * var(--offset));
    --position-2-x: 0;
    --position-2-y: 0;
    --position-3-x: var(--offset);
    --position-3-y: var(--offset);
    --position-4-x: calc(-1 * var(--offset));
    --position-4-y: var(--offset);

    /* Animation timings */
    --duration-cycle: 750ms;
    --duration-zoom: 250ms;
    --duration-roll: 250ms;

    position: relative;
}
#gamble-result[data-player-count="3"] {
    --position-0-x: calc(-1 * var(--offset));
    --position-0-y: var(--offset);
    --position-1-x: 0;
    --position-1-y: calc(-1 * var(--offset));
    --position-2-x: var(--offset);
    --position-2-y: var(--offset);
}

#gamble-result.winner-0 {--position-final-x: var(--position-0-x); --position-final-y: var(--position-0-y);}
#gamble-result.winner-1 {--position-final-x: var(--position-1-x); --position-final-y: var(--position-1-y);}
#gamble-result.winner-2 {--position-final-x: var(--position-2-x); --position-final-y: var(--position-2-y);}
#gamble-result.winner-3 {--position-final-x: var(--position-3-x); --position-final-y: var(--position-3-y);}
#gamble-result.winner-4 {--position-final-x: var(--position-4-x); --position-final-y: var(--position-4-y);}

@keyframes bounce-through-all {
    0% {left: var(--position-0-x); top: var(--position-0-y);}
    20% {left: var(--position-1-x); top: var(--position-1-y);}
    40% {left: var(--position-2-x); top: var(--position-2-y);}
    60% {left: var(--position-3-x); top: var(--position-3-y);}
    80% {left: var(--position-4-x); top: var(--position-4-y);}
    100% {left: var(--position-final-x); top: var(--position-final-y);}
}

@keyframes fade-out-die {
    0% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

@keyframes expand-player {
    0% {top: var(--position-final-y); left: var(--position-final-x); transform: translate(-50%, -50%) scale(1); z-index: 5;}
    100% {top: 0; left: calc(2 * var(--position-0-x)); transform: translate(-50%, -50%) scale(2.5); z-index: 5;}
}
@keyframes expand-gamble {
    0% {top: var(--position-final-y); left: var(--position-final-x); transform: translate(-50%, -50%) scale(1); z-index: 5;}
    100% {top: 0; left: calc(2 * var(--position-1-x)); transform: translate(-50%, -50%) scale(3); z-index: 5;}
}
@keyframes coin-roll {
    0% {left: calc(2 * var(--position-1-x)); transform: translate(-50%, -50%) scale(1) rotate(360deg);}
    80% {left: 0; transform: translate(-50%, -50%) scale(1) rotate(0deg);}
    100% {left: 0; transform: translate(-50%, -50%) scale(2) rotate(0deg);}
}

#gamble-result.no-response > *:not(.always-show) {display: none !important; opacity: 0 !important; animation: none !important;}
#gamble-result.no-response #no-response {position: absolute; transform: translate(-50%, -50%); width: 50vw;}

#gamble-result > div {position: absolute;}
#gamble-result div.player {position: absolute; transform: translate(-50%, -50%);}
#gamble-result div.player-0 {top: var(--position-0-y); left: var(--position-0-x);}
#gamble-result div.player-1 {top: var(--position-1-y); left: var(--position-1-x);}
#gamble-result div.player-2 {top: var(--position-2-y); left: var(--position-2-x);}
#gamble-result div.player-3 {top: var(--position-3-y); left: var(--position-3-x);}
#gamble-result div.player-4 {top: var(--position-4-y); left: var(--position-4-x);}

#gamble-result p {margin: 0;}
#gamble-result #message {
    position: absolute;
    top: calc(-2 * var(--offset));
    width: 100vw;
    transform: translateX(-50%);
}
#gamble-result #result p {
    position: absolute;
    top: calc(var(--offset) / 2);
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.3em;
    z-index: 10;
    display: none;
}

#gamble-result #gamble-img, #gamble-result #result img {
    position: absolute;
    height: var(--offset);
    width: var(--offset);
    transform: translate(-50%, -50%);
    z-index: 5;
}
#gamble-result #result img.cover {
    opacity: 1;
    z-index: 10;
}
#gamble-result .player img {height: var(--offset);}

#gamble-result #result {z-index: 10;}
#gamble-result:not(.roll) #result {display: none;}

#gamble-result.cycle #gamble-img {
    animation-name: bounce-through-all;
    animation-iteration-count: 1;
    animation-duration: var(--duration-cycle);
    animation-fill-mode: forwards;
}

#gamble-result.zoom:not(.no-response) .player:not(.winner) {animation: fade-out-die forwards var(--duration-zoom);}
#gamble-result.zoom:not(.no-response) .player.winner {animation: expand-player forwards var(--duration-zoom);}
#gamble-result.zoom:not(.no-response) #gamble-img {animation: expand-gamble forwards var(--duration-zoom);}

#gamble-result.roll #result img.cover {animation: fade-out-die forwards var(--duration-roll);}
#gamble-result.roll #result {animation: coin-roll forwards var(--duration-roll);}
#gamble-result.roll #gamble-img {animation: fade-out-die forwards var(--duration-roll);}

#gamble-result.payout #result p {display: block;}
#gamble-result.payout #gamble-img {display: none;}

/* Additional three-player-gamble plugin support */
#gamble-result.intro.choice:not(.result) > div.player {visibility: hidden;}

.choice:not(.result) #gamble-choice {visibility: visible;}
#gamble-choice {
    width: 100%;
    height: 100%;
    visibility: hidden;
}
.gamble-icons {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
img.gamble-icon {
    margin: 1em;
    cursor: pointer;
}
img.gamble-icon.participant-spurned {cursor: not-allowed;}

.gamble-icons > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: flex-end;
}
.votes {position: absolute; display: none;}
.votes.show {display: flex;}
#gamble-result .votes > div {
    width: 100px;
    transform: none;
    position: static;
    margin: 0 .5em;
}
.votes > div p {background-color: var(--background-color); border: 1px solid black;}
.votes img {max-width: 100%;}

#gamble-result.payout:not(.no-response):not(.ratings) #message {
    font-size: 1.6em;
    font-weight: bold;
}

#gamble-result.zoom.ratings .player.winner {animation: none;}
#gamble-result.zoom.ratings .player.non-winner {animation: none;}

#gamble-result.roll.ratings #result {visibility: hidden;}

.player input[type="range"] {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.player.changed p {color: lightgrey;}

#gamble-result.ratings .player:hover {
    padding: var(--offset);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-model {position: relative;}
.gamble-choice {
    position: absolute;
    top: 0;
    right: 100%;
    visibility: hidden;
}
.gamble-result {
    position: absolute;
    top: calc(var(--offset) / 2);
    right: 100%;
    visibility: hidden;
}
#gamble-result img.summary-icon {
    height: calc(var(--offset) / 2);
    width: calc(var(--offset) / 2);
}
#gamble-result.ratings .gamble-choice {
    visibility: visible;
}
#gamble-result.ratings .winner .gamble-result {
    visibility: visible;
}

.slider {
    visibility: hidden;
    position: absolute;
    width: calc(2 * var(--offset));
    transform: translateY(calc(-0.4 * var(--offset)));
}
.player:hover .slider {visibility: visible;}
.labels {
    display: flex;
    width: 100%;
    position: absolute;
}
.labels > p {
    position: absolute;
    width: 50%;
    text-align: center;
    background-color: var(--background-color);
    border-radius: 1em;
}
.labels > p:first-child {left: -50%;}
.labels > p:last-child {left: 100%;}