/* Odznaky - na světlých stránkách účtu i na tmavé stránce výzvy */
.bdg-groups, .bdg-list {
	--bdg-bg: #fff;
	--bdg-line: var(--line);
	--bdg-text: var(--ink);
	--bdg-muted: var(--muted);
	--bdg-locked: #eceef2;
	--bdg-locked-icon: #b3b9c6;
}
.challenge .bdg-groups, .challenge .bdg-list {
	--bdg-bg: rgba(255, 255, 255, 0.04);
	--bdg-line: rgba(255, 255, 255, 0.08);
	--bdg-text: #fff;
	--bdg-muted: var(--muted-dark);
	--bdg-locked: rgba(255, 255, 255, 0.07);
	--bdg-locked-icon: rgba(255, 255, 255, 0.3);
}

.bdg-groups { display: grid; gap: 26px; }
.bdg-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; color: var(--bdg-text); }
.bdg-group-head strong { font-family: var(--heading); font-size: 1.05rem; }
.bdg-group-head span { color: var(--bdg-muted); font-size: 0.88rem; }
.bdg-group-head small { flex-basis: 100%; color: var(--bdg-muted); font-size: 0.85rem; }

.bdg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bdg-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 16px 10px 14px;
	border-radius: 16px;
	background: var(--bdg-bg);
	border: 1px solid var(--bdg-line);
	color: var(--bdg-text);
}
.bdg-medal {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--bdg-locked);
	color: var(--bdg-locked-icon);
}
.bdg-medal svg { width: 30px; height: 30px; }
.bdg-title { font-size: 0.9rem; line-height: 1.25; font-weight: 800; }
.bdg-sub { color: var(--bdg-muted); font-size: 0.76rem; line-height: 1.3; }
.bdg-item:not(.is-earned) .bdg-title { color: var(--bdg-muted); }
.bdg-progress { width: 70%; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--bdg-locked); overflow: hidden; }
.bdg-progress span { display: block; height: 100%; border-radius: 4px; background: var(--bdg-locked-icon); }
.bdg-item.is-earned .bdg-progress { display: none; }

/* Získané - barva podle skupiny */
.bdg-item.is-earned .bdg-medal { color: #fff; box-shadow: 0 0 0 4px var(--bdg-ring), 0 10px 22px var(--bdg-glow); }
.bdg-streak { --bdg-ring: rgba(255, 90, 31, 0.16); --bdg-glow: rgba(255, 90, 31, 0.3); }
.bdg-amount { --bdg-ring: rgba(245, 158, 11, 0.18); --bdg-glow: rgba(245, 158, 11, 0.3); }
.bdg-months { --bdg-ring: rgba(34, 197, 94, 0.16); --bdg-glow: rgba(34, 197, 94, 0.3); }
.bdg-total { --bdg-ring: rgba(124, 58, 237, 0.16); --bdg-glow: rgba(124, 58, 237, 0.3); }
.bdg-different { --bdg-ring: rgba(37, 99, 235, 0.16); --bdg-glow: rgba(37, 99, 235, 0.3); }
.bdg-streak.is-earned .bdg-medal { background: linear-gradient(135deg, #ff9a3d, #ff3d1f); }
.bdg-amount.is-earned .bdg-medal { background: linear-gradient(135deg, #ffd257, #f59e0b); }
.bdg-months.is-earned .bdg-medal { background: linear-gradient(135deg, #4ade80, #16a34a); }
.bdg-total.is-earned .bdg-medal { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.bdg-different.is-earned .bdg-medal { background: linear-gradient(135deg, #60a5fa, #2563eb); }

/* Právě získaný - vyskočí */
.bdg-item.is-new .bdg-medal { animation: bdg-pop 0.7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bdg-pop {
	0% { transform: scale(0) rotate(-30deg); }
	100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bdg-item.is-new .bdg-medal { animation: none; } }

/* Sekce na stránce výzvy */
.badges-section { margin-top: 40px; }
.badges-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.badges-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.5rem; }
.badges-head h2 small { color: var(--muted-dark); font-family: var(--text); font-size: 0.95rem; font-weight: 600; }
.badges-head h2 b { color: #fff; }

/* Okno dne - nový odznak */
.dialog-badges { margin-top: 18px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #fff7ec, #fff1ea); text-align: center; }
.dialog-badges[hidden] { display: none; }
.dialog-badges-title { font-family: var(--heading); font-weight: 900; font-size: 1.15rem; color: var(--accent); margin-bottom: 10px; }
.dialog-badges .bdg-list { display: flex; flex-wrap: wrap; justify-content: center; }
.dialog-badges .bdg-item { flex: 0 1 160px; background: #fff; border-color: transparent; }

/* Stránka Moje odznaky */
.bdg-summary { font-weight: 700; color: var(--muted); }
.bdg-summary b { font-family: var(--heading); font-size: 1.6rem; color: var(--ink); }
.bdg-intro { margin-top: -10px; }
.bdg-card { background: #fff; border-radius: 22px; padding: 24px; margin-top: 18px; }
.bdg-card h2 { font-size: 1.25rem; margin: 0 0 16px; }
.bdg-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bdg-card-head h2 { margin: 0; }
.bdg-card-head small { color: var(--muted); }
.bdg-card-head .btn { margin-left: auto; }
.bdg-card .bdg-item { background: var(--paper); border-color: transparent; }
@media (max-width: 520px) {
	.bdg-card { padding: 18px 14px; }
	.bdg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.bdg-item { padding: 12px 6px 10px; border-radius: 14px; }
	.bdg-medal { width: 48px; height: 48px; margin-bottom: 4px; }
	.bdg-medal svg { width: 24px; height: 24px; }
	.bdg-title { font-size: 0.8rem; }
	.bdg-sub { font-size: 0.7rem; }
	.bdg-card-head .btn { display: none; }
}