@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 900;
    font-stretch: normal;
    src: url('../../fonts/Inconsolata-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
    src: url('../../fonts/Inconsolata-Medium.ttf') format('truetype');
}

#playercard_dom p {
    margin: 0 0 0.6em;
    padding: 0;
}

#playercard_dom table {
    border-collapse: collapse;
    margin: 0;
}

#playercard_dom table tr:nth-child(2n) {
    background-color: #0000 !important;
}

#playercard_dom hr {
    border: 0;
    margin: 1.25em auto;
    border-top: 0.0625em solid #eee;
    background: none;
}

#playercard_dom.displaynone,
#playercard_dom .displaynone {
    display: none;
}

#playercard_dom.hide,
#playercard_dom .hide {
    opacity: 0;
}

#playercard_dom .fade {
    transition: 1s opacity;
}

/* Player badge */
#playerbadge_dom {
    position: relative;
    width: 39.375em;
    height: 9.375em;
    margin: 2em auto;
    cursor: default;
    font-family: 'Inconsolata', monospace;

    transform-style: preserve-3d;
}

#playerbadge_dom .player_logo {
    width: 10em;
    height: 8.75em;
    /* border-radius: 5000px; */
    background: linear-gradient(to bottom, rgb(var(--gradient-start)), rgb(var(--gradient-end)));
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: 2;
    position: absolute;
}

#playerbadge_dom.use3d .player_logo {
    transform: translateZ(20px);
}

#playerbadge_dom .player_logo div {
    width: 9.375em;
    height: 8.125em;
    margin: 0.3125em;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

#playerbadge_dom .player_logo img {
    width: 100%;
    margin-top: -0.625em;
}

.horizontal_bar {
    position: absolute;
    top: 1.375em;
    left: 4.375em;
    height: 6.25em;
    width: 35em;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(to right, rgb(var(--gradient-start)), rgb(var(--gradient-end)));
    clip-path: polygon(0% 0%, 94% 0%, 100% 50%, 94% 100%, 0% 100%);
    padding: 0.25em;
}

.horizontal_bar .team_logo {
    position: absolute;
    height: 5em;
    left: 6.25em;
    top: 0.625em;
}

.use3d .horizontal_bar .team_logo {
    transform: translateZ(20px);
}

.horizontal_bar .team_logo img {
    height: 100%;
}

.horizontal_bar .player_name {
    position: absolute;
    top: 0.625em;
    left: 12.5em;
    font-size: 2.1875em;
    color: black;
    font-weight: 900;
    transform: scaleX(0.9);
    transform-origin: left;
    text-shadow: 0 0 0.625em #fff4;
}

.use3d .horizontal_bar .player_name {
    transform: translateZ(20px);
}

.horizontal_bar .team_name {
    position: absolute;
    top: 2.8125em;
    left: 12.5em;
    font-size: 1.875em;
    color: lightgray;
    font-weight: 900;
    font-variant: small-caps;
    text-shadow: 0.0625em 0.0625em black;
}

.horizontal_bar .team_name {
    transform: translateZ(20px);
}

.horizontal_bar .background_image {
    position: absolute;
    width: 50em;
    overflow: hidden;
    top: -20.625em;
    left: -7.5em;
    filter: blur(30px);
    z-index: -1;
}

.horizontal_bar .background_image_container {
    position: absolute;
    width: 34.5em;
    height: 5.75em;
    overflow: hidden;
    clip-path: polygon(0% 0%, 94% 0%, 100% 50%, 94% 100%, 0% 100%);
    z-index: -1;
}


/* Playercard */
#playercard_dom {
    width: 40em;
    height: 55em;
    position: relative;
    border-radius: 1.8em;
    /* overflow: hidden; */
    background: linear-gradient(to top, rgb(var(--gradient-start)), rgb(var(--gradient-end)));
    margin: auto;
    padding: 0.625em;
    cursor: default;
    font-family: 'Inconsolata', monospace;
    font-weight: 900;
    box-sizing: border-box;
    line-height: 1.9em;


    transform-style: preserve-3d;
}

#playercard_dom .js-tilt-glare {
    border-radius: 1.8em;
}

#playercard_dom .content {
    width: 100%;
    height: 100%;
    background-color: #222;
    border-radius: 1.5em;
    /* overflow: hidden; */
    position: relative;
    box-sizing: border-box;

    transform-style: preserve-3d;
}

#playercard_dom .player_logo {
    width: 15em;
    height: 15em;
    top: 3.125em;
    left: 3.125em;
    border-radius: 3.125em;
    box-shadow: 0 0 3.125em #000 !important;
    background: linear-gradient(to bottom, rgb(var(--gradient-start)), rgb(var(--gradient-end)));
    z-index: 2;
    position: absolute;
}

#playercard_dom.use3d .player_logo {
    transform: translateZ(1px);
}

#playercard_dom .player_logo img {
    width: 14.375em;
    height: 14.375em;
    border-radius: 3.125em;
    margin: 0.3125em;
    background-color: #151515;
    box-sizing: border-box;
}

#playercard_dom .team_stats {
    color: lightgray;
    width: 22.5em;
    position: absolute;
    left: 15.75em;
    top: 1.25em;
    text-transform: uppercase;
    transform-style: preserve-3d;
}

#playercard_dom .team_stats p {
    font-size: 1.4375em;
}

#playercard_dom .team_stats .team_logo {
    width: 7.5em;
    height: 7.5em;
    top: 0.3em;
    position: relative;
    margin: auto;
    display: block;
}

#playercard_dom.use3d .team_stats .team_logo {
    transform: translateZ(20px);
}

img[src=""] {
    content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
}

#playercard_dom .team_stats hr {
    border-color: black;
    width: 12em;
    border-width: 0.15em;
    padding: 0;
    opacity: 1;
}

#playercard_dom .team_stats table {
    width: 100%;
}


#playercard_dom .team_stats td {
    padding: 0.25em;
    border: none;
    font-size: 1.5em;
}

#playercard_dom .team_stats td:nth-child(1) {
    color: var(--primary-text);
    text-align: right;
    border-right: 0.1em solid black;
    padding-right: .6em;
    width: 7em;
}

#playercard_dom .team_stats td:nth-child(2) {
    padding-left: .6em;
    width: 7em;
}

#playercard_dom .team_stats td img {
    width: 1.3em;
    margin: -0.375em 0.375em 0 -0.1875em;
    vertical-align: middle;
}

#playercard_dom .player_name_box {
    width: 100%;
    position: absolute;
    top: 24em;
    background: linear-gradient(to right, #000a, #0005);
    height: 5.75em;
    transform-style: preserve-3d;
    box-shadow: 0 0 2em #0008;
    clip-path: inset(-10em 0 0 0)
}

#playercard_dom .player_name_box .player_name {
    font-size: 2.5em;
    color: lightgray;
    margin: .4em 0 0 1.1em;
}

#playercard_dom.use3d .player_name_box .player_name {
    transform: translateZ(20px);
}

#playercard_dom .player_name_box .team_name {
    font-size: 1.8em;
    color: var(--primary-text);
    margin-left: 1.5em;
    margin-top: .1em;
    font-variant: all-small-caps;
    font-weight: bold;
}

#playercard_dom .stats_area {
    background: linear-gradient(to bottom, rgba(var(--gradient-start), .7), rgba(var(--gradient-end), .7));
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 24em;
    padding: 1.4em 2.8em;
    font-family: 'Inconsolata', monospace;
    color: #000a;
    font-weight: 900;
    transform-style: preserve-3d;
    border-radius: 0 0 1.5em 1.5em;
    box-sizing: border-box;
}

#playercard_dom .stats_area > div > p {

    font-size: 1.5625em;
}

#playercard_dom .stats_area > div > p > span {
    font-weight: 100;

}

#playercard_dom .stats_area > div {
    position: relative;
    transform-style: preserve-3d;
}

#playercard_dom .stats_area > div > div {
    width: 22em;
    position: absolute;
    background-color: #0005;
    left: 10em;
    top: 0.3125em;
    height: 1.875em;
}

#playercard_dom .watermark {
    width: 37.5em;
    position: absolute;
    left: 0.9375em;
    bottom: 0.9375em;
    overflow: hidden;
    height: 52.9375em;
}

#playercard_dom .watermark img {
    width: 76.875em;
    position: absolute;
    left: -9.4375em;
    bottom: -4.375em;
    opacity: 0.04;
}

/* Foreground */
#playercard_dom .stats_area > div > div:nth-child(3) {
    background-color: var(--primary-text);
}

#playercard_dom.use3d .stats_area > div > div:nth-child(3) {
    transform: translateZ(10px);
}

#playercard_dom .powered_by {
    position: absolute;
    bottom: 0.5em;
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 1.25em;
    color: #0005;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

#playercard_img {
    margin: 2em auto;
    display: block;
    position: relative;
    width: 39.375em;
    height: 55em;
    transition: transform .1s;
}

#playercard_img:hover {
    transform: scale(1.02);
}

.card_flip_in {
    animation: card_flip_in 2s ease-out;
}

.card_flip_in_slower {
    animation: card_flip_in_slower 2s ease-out;
}

@keyframes card_flip_in {

    0% {
        opacity: 0;
        top: 20em;
        transform: rotate3d(1, -1, 0, -90deg);
    }

    10% {
        opacity: 0;
        top: 20em;
        transform: rotate3d(1, -1, 0, -90deg);
    }

    100% {
        opacity: 1;
        top: 0em;
        transform: rotate3d(1, -1, 0, 0deg);
    }
}


@keyframes card_flip_in_slower {

    0% {
        opacity: 0;
        top: 20em;
        transform: rotate3d(1, -1, 0, -90deg);
    }

    20% {
        opacity: 0;
        top: 20em;
        transform: rotate3d(1, -1, 0, -90deg);
    }

    100% {
        opacity: 1;
        top: 0em;
        transform: rotate3d(1, -1, 0, 0deg);
    }
}


/* Divisions */
.Master {
    --primary-text: rgb(255, 187, 0);
    --gradient-start: 251, 186, 7;
    --gradient-end: 243, 120, 4;
    --accent-color: yellow;
}

.Diamond2 {
    --primary-text: rgb(207, 207, 207);
    --gradient-start: 202, 200, 192;
    --gradient-end: 105, 105, 105;
    --accent-color: white;
}

.Diamond {
    --primary-text: rgb(69, 199, 216);
    --gradient-start: 110, 167, 181;
    --gradient-end: 69, 200, 216;
    --accent-color: white;
}

.Platinum {
    --primary-text: rgb(210, 230, 233);
    --gradient-start: 166, 175, 177;
    --gradient-end: 209, 218, 219;
    --accent-color: white;
}

.Gold {
    --primary-text: rgb(243, 209, 17);
    --gradient-start: 251, 186, 7;
    --gradient-end: 231, 206, 64;
}

.Silver {
    --primary-text: rgb(139, 139, 139);
    --gradient-start: 165, 161, 152;
    --gradient-end: 77, 75, 74;
}

.Bronze {
    --primary-text: rgb(153, 92, 22);
    --gradient-start: 128, 68, 19;
    --gradient-end: 170, 97, 29;
}

.None2 {
    --primary-text: rgb(69, 199, 216);
    --gradient-start: 85, 181, 102;
    --gradient-end: 69, 200, 216;
}

.None {
    --primary-text: rgb(138, 114, 170);
    --gradient-start: 121, 111, 143;
    --gradient-end: 148, 135, 176;
}


#playercard_dom.Master .content,
#playercard_dom.Diamond .content {
    border: 0.125em solid var(--accent-color);
    margin: -0.125em;

}


#playercard_dom.Master .player_name_box,
#playercard_dom.Diamond .player_name_box {
    width: 37.875em;
}

#playercard_dom.Master .stats_area,
#playercard_dom.Diamond .stats_area {
    height: 24.125em;
}

#playercard_dom.Master .player_logo img,
#playercard_dom.Diamond .player_logo img {
    border: 0.125em solid var(--accent-color);
}

#playerbadge_dom.None .horizontal_bar .player_name {
    top: 0.9375em;
    left: 8.125em;
    font-size: 2.8125em;
    color: #000c;
}

#playercard_dom.None .player_logo {
    top: 3.75em;
    left: 11.5625em;
}

#playercard_dom.None .player_name_box .player_name {
    top: 0.3em;
    position: absolute;
}