/* Общие медали (награды) для всех игр — 10 кругляшков в шапке + прогресс.
   Подключается и в основной игре (game.html), и в модулях (module.html). */
.medals { display: flex; align-items: center; gap: 10px; }
.medals__row { display: flex; align-items: center; gap: 5px; }
.medal {
	width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; line-height: 1; cursor: default; user-select: none;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	filter: grayscale(1); opacity: .38; transition: transform .2s, opacity .2s;
}
.medal.is-earned {
	filter: none; opacity: 1;
	background: radial-gradient(circle at 50% 35%, #ffe08a, #d8a41f);
	border-color: #f0d585; box-shadow: 0 0 9px rgba(240, 213, 133, .6);
}
.medal--pop { animation: medal-pop .55s ease; }
@keyframes medal-pop { 0% { transform: scale(.25); } 60% { transform: scale(1.55); } 100% { transform: scale(1); } }
.medals__next { font-size: 12px; color: #d3c093; white-space: nowrap; }
@media (max-width: 760px) {
	.medals__next { display: none; }
	.medal { width: 18px; height: 18px; font-size: 10px; }
}

/* Празднование новой медали: вылетает в центр, светится лучами, держится 5 с
   и улетает в шапку на своё место. */
.medal-cele {
	position: fixed; inset: 0; z-index: 3000; display: flex;
	align-items: center; justify-content: center;
	background: rgba(10, 8, 16, .55); transition: background .4s ease;
}
.medal-cele__box {
	position: relative; display: flex; flex-direction: column; align-items: center;
	gap: 6px; color: #fff; text-align: center;
	animation: cele-in .6s cubic-bezier(.2, 1.3, .4, 1);
}
.medal-cele__rays {
	position: absolute; width: 300px; height: 300px; top: 50%; left: 50%;
	transform: translate(-50%, -62%); border-radius: 50%; z-index: -1; filter: blur(2px);
	background: conic-gradient(from 0deg,
		rgba(255, 224, 138, 0), rgba(255, 224, 138, .55) 8%, rgba(255, 224, 138, 0) 16%,
		rgba(255, 224, 138, .55) 25%, rgba(255, 224, 138, 0) 33%,
		rgba(255, 224, 138, .55) 50%, rgba(255, 224, 138, 0) 58%,
		rgba(255, 224, 138, .55) 75%, rgba(255, 224, 138, 0) 83%,
		rgba(255, 224, 138, .55) 92%, rgba(255, 224, 138, 0));
	animation: rays-spin 7s linear infinite;
}
@keyframes rays-spin { to { transform: translate(-50%, -62%) rotate(360deg); } }
.medal-cele__icon { font-size: 96px; line-height: 1; filter: drop-shadow(0 0 26px rgba(255, 224, 138, .95)); }
.medal-cele__title { font-size: 22px; font-weight: 800; color: #ffe08a; }
.medal-cele__name { font-size: 18px; font-weight: 700; }
@keyframes cele-in { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }