/* Profile badges and achievements (views/achievements/badge.ejs, views/achievements.ejs, views/user.ejs).
   Badge art is a placeholder medal tinted by tier until real art exists. */

.badge-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 10px auto 4px;
	max-width: 600px;
}

.ach-badge {
	--tier: #8a8f96;
	--tier-dark: #5d6268;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	/* At least 92px, wider when one word of the name needs it (so words don't break mid-word). */
	width: min-content;
	min-width: 92px;
	max-width: 150px;
	outline: none;
	cursor: default;
}
.ach-badge.tier-bronze { --tier: #cd7f32; --tier-dark: #8a5220; }
.ach-badge.tier-silver { --tier: #b9c3cc; --tier-dark: #7d8790; }
.ach-badge.tier-gold { --tier: #ffc94c; --tier-dark: #c8901a; }
.ach-badge.tier-platinum { --tier: #8fe6f2; --tier-dark: #4aa5b8; }
.ach-badge.kind-staff { --tier: #e72b2b; --tier-dark: #a11b1b; }

.badge-medal {
	width: 56px;
	height: 64px;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.badge-medal .medal-face { fill: var(--tier); stroke: var(--tier-dark); stroke-width: 3; }
.badge-medal .medal-ribbon { fill: var(--tier-dark); }
.badge-medal .medal-glyph { fill: rgba(255, 255, 255, 0.85); }
/* Image icons (weapon power-ups) are filled with the same white through an SVG filter. */
.badge-medal .medal-glyph-flood { flood-color: #fff; flood-opacity: 0.85; }

/* "Shiny" platinum */
.ach-badge.tier-platinum .badge-medal .medal-shine {
	fill: rgba(255, 255, 255, 0.55);
	animation: badge-shine 3.5s ease-in-out infinite;
}
.badge-medal .medal-shine { fill: transparent; }
@keyframes badge-shine {
	0%, 60% { transform: translateX(-40px); }
	100% { transform: translateX(40px); }
}
@media (prefers-reduced-motion: reduce) {
	.ach-badge.tier-platinum .badge-medal .medal-shine { animation: none; transform: none; }
}

/* Names keep their spacing (preserve-whitespace) but must still wrap, or long ones run into the next badge. */
.ach-badge .badge-name,
.ach-badge .badge-card strong {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.badge-name {
	max-width: 100%;
	margin-top: 4px;
	font-size: 13px;
	line-height: 15px;
	text-align: center;
	font-weight: bold;
}

/* Hover card. Also shown on keyboard focus, and on tap for touchscreens (no hover there).
   A mouse click focuses the badge too, so plain :focus would leave the card up until clicking elsewhere.
   Separate rules, so a browser without :focus-visible still keeps the hover rule. */
.badge-card {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	padding: 10px 12px;
	border-radius: 6px;
	border-top: 4px solid var(--tier);
	background: var(--white);
	color: var(--gray);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	text-align: left;
	font-size: 13px;
	line-height: 18px;
	z-index: 20;
}
.ach-badge:hover .badge-card {
	display: block;
}
.ach-badge:focus-visible .badge-card {
	display: block;
}
@media (hover: none) {
	.ach-badge:focus .badge-card {
		display: block;
	}
}
.badge-card strong { font-size: 15px; }
.badge-card .badge-tier { float: right; color: var(--tier-dark); font-weight: bold; }
.badge-card .badge-line { display: block; margin-top: 3px; }
.badge-card .badge-muted { color: var(--gray3); }

html.dark .badge-card {
	background: var(--gray5);
	color: var(--white0);
}
html.dark .badge-card .badge-tier { color: var(--tier); }
html.dark .badge-card .badge-muted { color: var(--gray0); }

@media (max-width: 480px) {
	.ach-badge { min-width: 76px; }
	.badge-card { width: 190px; }
}