/* ======================== */
/* CARDS                    */
/* ======================== */

.creditsCard {
    display:flex;
    position:relative;
    flex-direction:column;
    /* transition:transform 0.2s, box-shadow 0.2s; */
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.25);
    border-radius:5px;
    background:var(--colPrimaryMid);
    height:auto;
    overflow:hidden;
}

.creditsCard:before {
	position:absolute;
    z-index:3;
	inset:0;
	box-shadow:inset 2px 2px 1.5px rgba(255, 255, 255, 0.2), inset -2px -2px 1.5px rgba(0, 0, 0, 0.2);
	background:radial-gradient(ellipse 75% 50% at 40% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events:none;
	content:"";
}

.creditsNameplate {
    display:flex;
    position:relative;
    gap:8px;
    padding:8px;
    color:var(--colSecondaryDarker);
    font-size:18px;
    font-family:var(--fontSecondary);
    text-shadow:1px 1px 2px rgba(0, 0, 0, 0.35);
    word-break:break-word;
}

.creditsNameplate div {
    z-index:2;
}

.creditsNameplate img {
    z-index:2;
    border:3px solid var(--colPrimaryMid);
    border-radius:5px;
    background:var(--colSecondaryLight);
    width:64px;
    height:64px;
}

.creditsInfo {
    display:flex;
    position:relative;
    flex-wrap:wrap;
    align-content:flex-start;
    justify-content:end;
    gap:4px;
    z-index:1;
    background:var(--banner) 0% 50% / cover no-repeat, linear-gradient(90deg, var(--colPrimaryDark), var(--colPrimaryDarker));
    padding:8px;
    height:100%;
    overflow:hidden;
}

.creditsInfo div {
    box-shadow:0px 2px 2px rgba(0,0,0,0.25);
    border-radius:5px;
    background:var(--colPrimaryMid);
    padding:2px 4px;
    color:var(--colSecondaryDarker);
    font-weight:bold;
    font-size:11px;
}

/* Fix harsh text shadows on Safari */
@supports (-webkit-touch-callout: none) {
	.creditsNameplate div {
		text-shadow:1px 1px 2px rgba(0, 0, 0, 0.15) !important;
	}
}

/* ======================== */
/* CARD SIZES               */
/* ======================== */

.creditsCard.large, .creditsCard.medium {
    width:235px;
    min-width:235px;
}

.creditsCard.large .creditsNameplate {
    background:var(--icon) calc(100% + 16px) calc(50% + 10px) / 96px 96px no-repeat;
}

.creditsCard.large .creditsNameplate:before {
    position:absolute;
    z-index:1;
    inset:0;
    background:var(--colPrimaryDarker);
    height:20px;
    content:"";
}

.creditsCard.large .creditsNameplate div {
    margin-top:18px;
}

.creditsCard.medium .creditsNameplate, .creditsCard.small .creditsNameplate {
    border-left:6px solid var(--colTFMid);
}

.creditsCard.small .creditsNameplate {
    padding:4px 8px;
}

@media (max-width: 1000px) {
    .creditsCard.large, .creditsCard.medium {
        flex:1 1 30% !important;
        width:100% !important;
    }
}

/* ======================== */
/* MEDAL TOYS               */
/* ======================== */

.creditsMedal {
	vertical-align:bottom;
	filter:drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
	transition:transform 0.2s;
	cursor:pointer;
	margin-top:-10px;
	margin-right:10px;
    height:35px;
	user-select:none;
}

.creditsMedal:hover, .creditsMedal:focus {
	transform:translate(0px, -1px);
}

.creditsMedal:active, .creditsMedalClick {
	transform:translate(0px, 0px) !important;
	transition:transform 0s !important;
}