/* ======================
   = PLAYER TAGS start =
   ====================== */
#playerCard {
    width: 300px;
    height: 140px;
    margin: 3% 3%;

    position: absolute;

    display: flex;
    justify-content: space-between;

    overflow: hidden;

    font-family: "Walkway", Arial, serif;
    color: white;
}

#playerCard.top-left, #playerCard.bottom-left {
    flex-direction: row;
}

#playerCard.top-right, #playerCard.bottom-right {
    flex-direction: row-reverse;
}

/* =============================
   = PLAYER TAGS/ Avatar start =
   ============================= */
#avatar {
    width: 140px;
    height: 140px;

    border-radius: 5px;
    overflow: hidden;

    background-image: url("../../../pictures/default/notFound.jpg");
    background-repeat: no-repeat;
    background-size: contain;

    z-index: 1;
}

#playerFlag {
    width: 30px;
    height: 30px;
    margin: 3% 5%;

    background-image: url("../../../pictures/country/FR.svg");
}

#playerCard.top-left #playerFlag, #playerCard.bottom-left #playerFlag {
    transform-origin: right;
    float: right;
}

#playerCard.top-right #playerFlag, #playerCard.bottom-right #playerFlag {
    transform-origin: left;
    float: left;
}
/* ===========================
   = PLAYER TAGS/ Avatar end =
   =========================== */

/* ===========================
   = PLAYER TAGS/ Info start =
   =========================== */
#playerData {
    width: 150px;
    height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    font-size: 25px;
}

#playerCard.top-left #playerData,
#playerCard.bottom-left #playerData {
    text-align: left;
}

#playerCard.top-right #playerData,
#playerCard.bottom-right #playerData {
    text-align: right;
}

#playerCard.top-left #topCountry::before,
#playerCard.bottom-left #topCountry::before,
#playerCard.top-left #topWorld::before,
#playerCard.bottom-left #topWorld::before {
    content: "# ";

    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 800;
}

#playerCard.top-left #topWorld::after,
#playerCard.bottom-left #topWorld::after {
    content: "";

    width: 18px;
    height: 18px;
    margin-left: 5px;

    background-image: url("../../../pictures/World-icon.svg");
    background-size: 18px 18px;

    display: inline-block;
}

#playerCard.top-right #topCountry::after,
#playerCard.bottom-right #topCountry::after,
#playerCard.top-right #topWorld::after,
#playerCard.bottom-right #topWorld::after {
    content: " #";

    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 800;
}

#playerCard.top-right #topWorld::before,
#playerCard.bottom-right #topWorld::before {
    content: "";

    width: 18px;
    height: 18px;
    margin-right: 5px;

    background-image: url("../../../pictures/World-icon.svg");
    background-size: 18px 18px;

    display: inline-block;
}

#performancePoint::after {
    content: " pp";
}
/* =========================
   = PLAYER TAGS/ Info end =
   ========================= */

/* =============================
   = ANIMATION AND STATE Start =
   ============================= */

/* Player Card Variables */
#playerCard {
    --show: 500ms;
    --hide: 500ms;
}

#playerCard.top-right, #playerCard.bottom-right {
    --transitionSide: 50px;
}

#playerCard.top-left, #playerCard.bottom-left {
    --transitionSide: -50px;
}

/* Avatar */
#playerCard #avatar  {
    transition:
            opacity var(--show);
}

#playerCard.hidden #avatar  {
    transition-delay: 500ms !important;
    opacity: 0;
    transition:
            opacity var(--hide);
}

/* Player Flag */
#playerCard.top-left #playerFlag, #playerCard.bottom-left #playerFlag {
    --marginBase: -5% -20% 0 0;
    --marginModify: 3% 5%;
    --rotateDegre: 45deg;
    animation: rotateCountry 20s ease infinite;
}

#playerCard.top-right #playerFlag, #playerCard.bottom-right #playerFlag {
    --marginBase: -5% 0 0 -18%;
    --marginModify: 3% 6%;
    --rotateDegre: -45deg;
    animation: rotateCountry 20s ease infinite;
}

#playerCard.hidden #playerFlag  {
    animation: none;
}

/* Player Data */
#playerCard #playerData > * {
    transform: translate(0, 0);
    transition:
            opacity var(--show),
            transform var(--show);
}

#playerCard.hidden #playerData > * {
    transform: translate(var(--transitionSide), 0);
    opacity: 0;
    transition:
            opacity var(--show),
            transform var(--show);
}

#playerCard #playerData > *:nth-child(3) {
    transition-delay: 300ms;
}

#playerCard #playerData > *:nth-child(2) {
    transition-delay: 200ms;
}

#playerCard #playerData > *:nth-child(1) {
    transition-delay: 100ms;
}

/*  ==============================
    == COUNTRY ROTATE LEFT MODE ==
    ==============================
*/
@keyframes rotateCountry {
    0% {
        width: 90px;
        height: 90px;
        margin: var(--marginBase);

        transform: rotate(var(--rotateDegre));
    }

    5% {
        width: 30px;
        height: 30px;
        margin: var(--marginModify);

        transform: rotate(0deg);
    }

    30% {
        width: 30px;
        height: 30px;
        margin: var(--marginModify);

        transform: rotate(0deg);
    }

    35% {
        width: 90px;
        height: 90px;
        margin: var(--marginBase);

        transform: rotate(var(--rotateDegre));
    }

    100% {
        width: 90px;
        height: 90px;
        margin: var(--marginBase);

        transform: rotate(var(--rotateDegre));
    }
}