/* =====================
   = REUSED TAGS start =
   ===================== */
/* Corner tags */
.top-left {
    top: 0;
    left: 0;
}
.top-right {
    top: 0;
    right: 0;
}
.bottom-left {
    bottom: 0;
    left: 0;
}
.bottom-right {
    bottom: 0;
    right: 0;
}

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

#leaderboard {
    width: 460px;
    height: 400px;
    display: flex;
    position: absolute;

    overflow: hidden;
}

#leaderboard.top-left, #leaderboard.top-right {
    flex-direction: column;
}

#leaderboard.bottom-left, #leaderboard.bottom-right {
    flex-direction: column-reverse;
}

tr {
    margin: 2px 5px;
    padding: 5px 10px 5px 10px;

    display: inline-block;
    position: absolute;

    background-color: rgb(98, 98, 98);

    border-radius: 3px;
    line-height: 40px;

    font-family: Arial, Helvetica, sans-serif;
    color: white;

    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
}

#leaderboard.top-left tr, #leaderboard.bottom-left tr {
    left: 0;
}

#leaderboard.top-right tr, #leaderboard.bottom-right tr {
    right: 0;
}

.grouped {
    display: inline-flex;
    flex-direction: column;
}

.pseudo, .avatar, .score, .percentage {
    margin-left: 5px;
}

.position {
    min-width: 28px;
    display: inline-block;

    font-weight: bold;
}

.avatar {
    width: 35px;
    height: 35px;
    display: inline-block;

    background-image: url("./pictures/oculus.png");
    background-repeat: no-repeat;
    background-size: contain;

    border-radius: 50%;
}

.pseudo {
    width: 130px;
    margin-left: 3px;
    padding-left: 5px;
    display: inline-block;

    border-left: 1px solid rgba(255, 255, 255, 0.36);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score {
    width: 80px;
    display: inline-block;

    text-align: right;
}

.percentage {
    width: 60px;
    display: inline-block;

    text-align: right;
}

.percentage:after {
    content: "%";
}

.missed {
    margin-top: -8px;
    line-height: 11px;

    text-align: right;
    font-size: 11px;
    font-weight: bold;

    color: #ff9c66;
    text-shadow: 0 0 2px #000;
}

.missed:after {
    content: " miss";
}

.combo {
    margin-top: -8px;
    line-height: 11px;

    text-align: right;
    font-size: 11px;
    font-weight: bold;

    color: #82ffac;

    text-shadow: 0 0 2px #000;
}

.combo:before {
    content: "ₓ ";
    margin-right: 3px;
}

.localPlayer {
    color: #fff;
    text-shadow:
            0 0 7px #0fa,
            0 0 10px #0fa,
            0 0 21px #0fa;
}

#row-seperator {
    width: 357px;
    line-height: 20px;

    background-color: rgb(84, 76, 135);

    font-size: 20px;
}

.first {
    zoom: 1.15 !important;
    background-color: #c48f0d;
}

.second {
    zoom: 1.10 !important;
    background-color: #afafaf;
}

.third {
    zoom: 1.05 !important;
    background-color: #885125;
}

.joined {
    animation: joinedColor 0.5s linear;
}

.leaved {
    animation: leavedColor 0.5s linear;
}

.miss {
    animation: missColor 0.2s linear;
}

.fail {
    opacity: 70%;
    box-shadow: 0 0 40px rgb(238, 82, 66) inset;
}

.levelUp {
    animation: zoomInOut 0.5s linear;
}

.levelDown {
    animation: fadeInOut 0.5s linear;
}

@keyframes joinedColor {
    0% {
        background-color: rgb(77, 77, 77);
    }

    50% {
        box-shadow: 0 0 50px rgb(66, 198, 238);
        background-color: rgb(66, 198, 238);
    }

    100% {
        background-color: rgb(77, 77, 77);
    }
}

@keyframes leavedColor {
    0% {
        background-color: rgb(77, 77, 77);
    }

    50% {
        opacity: 70%;
        box-shadow: 0 0 40px rgb(238, 82, 66) inset;
    }

    100% {
        opacity: 0%;
    }
}

@keyframes missColor {
    0% {}

    50% {
        box-shadow: 0 0 50px rgb(238, 82, 66);
        background-color: rgb(238, 82, 66);
    }

    100% {}
}

@keyframes levelUp {
    0% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 50px rgb(129, 150, 134);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 100%;
    }

    70% {
        opacity: 30%;
    }

    100% {
        opacity: 100%;
    }
}