.clouds {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.clouds > .cloud {
	display: block;
	position: absolute;
	top: 120px;
	left: 10%;
	background-image: url("../img/cloud.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 392px;
	height: 254px;
}

.clouds > .cloud:nth-child(1) {
	opacity: 0.7;
}

.clouds > .cloud:nth-child(2) {
	left: auto;
	top: 240px;
	right: 5%;
	width: 261px;
	height: 169px;
}

.clouds > .cloud:nth-child(3) {
	left: auto;
	top: auto;
	bottom: 10%;
	right: 45%;
	width: 301px;
	height: 195px;
	opacity: 0.5;
}

.slide {
	display: grid;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	position: relative;
	z-index: 1;
	padding: 20px 0;
}

.slide > .slide-up-target,
.slide > .slide-down-target,
.slide > .slide-top-target {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 40px;
	line-height: 40px;
	height: 40px;
	text-align: center;
	display: block;
	color: #424242;
	font-size: 24px;
}

.slide > .slide-up-target > .fa,
.slide > .slide-down-target > .fa,
.slide > .slide-top-target > .fa {
	position: relative;
	animation: slide-arrow 0.5s infinite alternate;
}

@keyframes slide-arrow {
	from {
		top: 0;
	}
	to {
		top: 12px;
	}
}

.slide:not(.bg-white) {
	color: #fff;
	padding-bottom: 40px;
}

.slide .slide-name {
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	color: #667EEA;
	padding-bottom: 40px;
}

.slide:not(.bg-white) .slide-name {
	color: #fff;
	padding-bottom: 40px;
}

.slide#cover {
	text-align: center;
	background-image: url("../img/clouds.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}

.slide#cover .sitename {
	font-size: 7rem;
	font-weight: bold;
}

.slide#cover .sitedesc {
	font-size: 1.21rem;
	padding: 20px 0;
}

.slide#cover .online {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;
	width: 660px;
	margin: auto;
	padding-top: 20px;
}

.slide#cover .online > div {
	border-radius: 4px;
	background-color: rgba(0,0,0,0.4);
	padding: 20px;
}

.slide#cover .online .value {
	font-weight: bold;
	font-size: 40px;
	padding-bottom: 8px;
}

.slide#cover .online .type {
	text-transform: uppercase;
	font-size: 12px;
}

.slide#cover .ips {
	width: 660px;
	margin: auto;
	position: relative;
	height: 76px;
}

.slide#cover .ips > .ips-wrapper {
	max-height: 76px;
	overflow: hidden;
	border-radius: 4px;
	background-color: rgba(0,0,0,0.4);
}

.slide#cover .ips > .ips-wrapper > .server-id {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: calc(100% - 276px) 200px 36px;
	align-items: center;
	padding: 0 20px 20px 20px;
}

.slide#cover .ips > .ips-wrapper > .server-id:first-child {
	grid-template-columns: calc(100% - 220px) 200px;
	padding: 20px;
}

.slide#cover .ips > .ips-wrapper > .server-id > .ip {
	font-size: 20px;
	line-height: 36px;
}

.slide#cover .ips > .ips-wrapper > .server-id .btn {
	display: block;
	width: 100%;
	margin: 0;
}

.slide#cover .ips > .ips-open {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 36px;
	margin: 0;
}

.slide#cover .ips.active > .ips-wrapper {
	max-height: 204px;
	overflow: auto;
	background-color: rgba(0,0,0,0.6);
}

.slide#donate .donate-form {
	width: 480px;
	margin: auto;
}

.slide#donate .form-group-vk {
	display: none;
}

.slide#donate .buyform #buy {
	line-height: normal;
	height: auto;
	padding: 10px 8px;
}

.slide#last .donate-list {
	padding-top: 20px;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	width: 660px;
	margin: auto;
}

.slide#last .donate-list > .donate-id {
	text-align: center;
}

.slide#last .donate-list > .donate-id > .avatar {
	width: 64px;
	height: 64px;
	margin: auto;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,0.12) 0 1px 6px, rgba(0,0,0,0.12) 0 1px 4px;
	background-color: #fff;
}

.slide#last .donate-list > .donate-id > .username {
	padding-top: 12px;
}

.slide#last .donate-list > .donate-id > .group {
	padding-top: 8px;
	font-size: 12px;
}

.slide#gallery .image-list {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}

.slide#gallery .image-list > .image-id {
	height: 200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.slide#download .sitedesc {
	font-size: 1.21rem;
	padding: 20px 0;
	text-align: center;
}

.slide#download .download-title {
	padding-top: 20px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
}

.slide#download .download-button {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 100%;
	padding-top: 40px;
	width: 80%;
	margin: auto;
}

.modal[data-id="ip"] > .wrapper {
	max-width: 600px;
}

#accept-block {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: auto auto;
	align-items: center;
	padding-bottom: 20px;
}

#accept-block > .block-right {
	text-align: right;
	font-size: 0;
}

#accept-block img {
	max-width: 100%;
	display: inline-block;
	vertical-align: middle;
}

#accept-block #megafon {
	max-height: 32px;
	max-width: 30%;
}

#accept-block #paym {
	max-width: 70%;
}

#accept-block .input-block {
	padding-bottom: 0;
}

#accept-block .input-block > label {
	line-height: 20px;
}

.terms h2 {
	font-size: 24px;
	padding-top: 20px;
}

.terms .page-name {
	display: block;
	padding-bottom: 20px;
	font-size: 32px;
	color: #000;
}

.terms .page-desc {
	font-style: italic;
	padding-bottom: 20px;
}

.terms ul.page-list {
	padding-left: 20px;
	padding-top: 12px;
	line-height: 24px;
}

.terms ul.page-list > li {
	list-style: none;
}

.slide#last {
	padding-bottom: 20px;
}

#methods > ul {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	padding: 0;
	margin: 0;
}

#methods > ul > li {
	list-style: none;
	display: flex;
}

#methods > ul > li > .payment-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 12px;
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.25s ease;
	gap: 10px;
	min-height: 100px;
	font-family: inherit;
	font-size: 14px;
	color: #212121;
	position: relative;
	text-decoration: none;
}

#methods > ul > li > .payment-btn:hover {
	background: #f0f1f3;
	border-color: #667EEA;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
}

#methods > ul > li > .payment-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

#methods > ul > li > .payment-btn .btn-icon {
	display: block;
	width: 48px;
	height: 48px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

#methods > ul > li > .payment-btn .subtext {
	font-size: 12px;
	font-weight: 500;
	color: #495057;
	text-align: center;
	line-height: 1.3;
	word-break: break-word;
	opacity: 0.9;
}

#methods > ul > li > .payment-btn:hover .subtext {
	color: #667EEA;
}

#methods > ul > li > .payment-btn .btn-icon[data-method="rus_card"] {
	background-image: url("/templates/img/payments/card.png");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="ua_card"] {
	background-image: url("/templates/img/payments/card_ua.png");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="kzx"] {
	background-image: url("/templates/img/payments/card_kzx.png");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="skins"] {
	background-image: url("/templates/img/payments/skins.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="ym"] {
	background-image: url("/templates/img/payments/ym.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="yk"] {
	background-image: url("/templates/img/platforms/yookassa.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="sbp"] {
	background-image: url("/templates/img/payments/sbp.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="card"] {
	background-image: url("/templates/img/payments/card.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="eur"] {
	background-image: url("/templates/img/payments/eur.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="usd"] {
	background-image: url("/templates/img/payments/usd.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="usdt"] {
	background-image: url("/templates/img/payments/usdt.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="ton"] {
	background-image: url("/templates/img/payments/gram.png");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="volet"] {
	background-image: url("/templates/img/payments/volet.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="btc"] {
	background-image: url("/templates/img/payments/btc.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="eth"] {
	background-image: url("/templates/img/payments/eth.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="bch"] {
	background-image: url("/templates/img/payments/bch.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="ltc"] {
	background-image: url("/templates/img/payments/ltc.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="dash"] {
	background-image: url("/templates/img/payments/dash.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="zec"] {
	background-image: url("/templates/img/payments/zec.svg");
}

#methods > ul > li > .payment-btn .btn-icon[data-method="doge"] {
	background-image: url("/templates/img/payments/doge.svg");
}

.modal[data-id="contact"] > .wrapper {
	width: 600px;
	max-width: 100%;
}

#topdonaters {
	position: relative;
	padding: 20px 0;
	width: 100%;
}

#topdonaters .slide-name {
	margin-bottom: 25px;
	text-align: center;
	font-size: 48px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	letter-spacing: 1px;
}

.top-filter {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 30px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.filter-btn {
	padding: 8px 24px;
	border-radius: 25px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	backdrop-filter: blur(10px);
}

.filter-btn:hover {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.1);
}

.filter-btn.active {
	background: #fff;
	color: #1a1a2e;
	border-color: #fff;
	box-shadow: 0 4px 25px rgba(255, 255, 255, 0.2);
}

.filter-btn:active {
	transform: scale(0.95);
}

.top-donaters-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.top-donaters-list-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 300px;
}

.top-donaters-list {
	position: relative;
	width: 100%;
	display: flex !important;
	flex-direction: row !important;
	gap: 15px;
	opacity: 1;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.top-donaters-list.fade-out {
	opacity: 0;
	transform: translateY(15px);
	pointer-events: none;
}

.top-donaters-list.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.top-loading-skeleton {
	display: flex;
	flex-direction: row;
	gap: 15px;
	padding: 10px 0;
}

.skeleton-card {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	border: 2px solid rgba(255, 255, 255, 0.05);
	flex: 1;
	min-height: 280px;
	animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}

.skeleton-info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.skeleton-line {
	height: 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
}

.skeleton-line.short {
	width: 50%;
}

.skeleton-line.long {
	width: 80%;
}

@keyframes skeleton-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.top-card {
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	transform: translateY(25px) scale(0.96);
	border-radius: 20px;
	padding: 30px 10px;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
	gap: 20px !important;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(15px);
	border: 2px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	cursor: default;
	flex: 1 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.top-card.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.top-card.place-1 {
	background: linear-gradient(135deg, rgba(255, 20, 60, 0.2), rgba(255, 20, 60, 0.04));
	border-color: rgba(255, 20, 60, 0.4);
	box-shadow: 0 4px 40px rgba(255, 20, 60, 0.2), inset 0 0 80px rgba(255, 20, 60, 0.06);
}
.top-card.place-1::before {
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(255, 20, 60, 0.15), transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.top-card.place-2 {
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.16), rgba(0, 191, 255, 0.04));
	border-color: rgba(0, 191, 255, 0.35);
	box-shadow: 0 4px 40px rgba(0, 191, 255, 0.15), inset 0 0 80px rgba(0, 191, 255, 0.05);
}

.top-card.place-3 {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.04));
	border-color: rgba(255, 215, 0, 0.35);
	box-shadow: 0 4px 40px rgba(255, 215, 0, 0.15), inset 0 0 80px rgba(255, 215, 0, 0.05);
}

.top-card.place-4 {
	background: linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(192, 192, 192, 0.03));
	border-color: rgba(192, 192, 192, 0.25);
	box-shadow: 0 4px 40px rgba(192, 192, 192, 0.1);
}

.top-card.place-5 {
	background: linear-gradient(135deg, rgba(205, 127, 50, 0.12), rgba(205, 127, 50, 0.03));
	border-color: rgba(205, 127, 50, 0.25);
	box-shadow: 0 4px 40px rgba(205, 127, 50, 0.1);
}

.top-medal {
	width: 180px !important;
	height: 180px !important;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.top-medal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.top-medal::after {
	content: '';
	position: absolute;
	inset: -12px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.top-card:hover .top-medal::after { opacity: 1; }
.top-card:hover .top-medal img {
	transform: scale(1.1) rotate(-5deg);
	filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.5));
}

.top-place-badge {
	position: absolute;
	top: 12px;
	font-size: 13px;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.1);
	letter-spacing: 1px;
	font-family: 'Arial Black', sans-serif;
	z-index: 1;
	width: 100%;
	text-align: center;
	left: 0;
}

.top-card.place-1 .top-place-badge { color: rgba(255, 20, 60, 0.3); font-size: 14px; }
.top-card.place-2 .top-place-badge { color: rgba(0, 191, 255, 0.25); }
.top-card.place-3 .top-place-badge { color: rgba(255, 215, 0, 0.25); }

.top-card-info {
	width: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top-nick {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
	text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
	letter-spacing: 0.3px;
	word-break: break-all;
	max-width: 100%;
}

.top-card.place-1 .top-nick { color: #ff4757; text-shadow: 0 2px 25px rgba(255, 20, 60, 0.35); }
.top-card.place-2 .top-nick { color: #4dc9f6; text-shadow: 0 2px 25px rgba(0, 191, 255, 0.3); }
.top-card.place-3 .top-nick { color: #ffd700; text-shadow: 0 2px 25px rgba(255, 215, 0, 0.3); }
.top-card.place-4 .top-nick { color: #e0e0e0; }
.top-card.place-5 .top-nick { color: #dba87a; }

.top-stats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.top-sum {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	gap: 4px;
}

.top-sum .currency {
	font-size: 16px;
	font-weight: 300;
	opacity: 0.8;
}

.top-card.place-1 .top-sum { color: #ff4757; }
.top-card.place-2 .top-sum { color: #4dc9f6; }
.top-card.place-3 .top-sum { color: #ffd700; }
.top-card.place-4 .top-sum { color: #e8e8e8; }
.top-card.place-5 .top-sum { color: #dba87a; }

.top-orders {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.35);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
}

.top-orders::before {
	font-size: 12px;
	opacity: 0.6;
}

@keyframes medalPop {
	0% { transform: scale(0) rotate(-40deg); opacity: 0; }
	50% { transform: scale(1.25) rotate(8deg); opacity: 1; }
	70% { transform: scale(0.92) rotate(-3deg); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.top-card.visible .top-medal img {
	animation: medalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.top-loading {
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	padding: 40px 0;
	font-size: 16px;
}

@media (max-width: 992px) {
	.top-donaters-list,
	.top-loading-skeleton {
		flex-direction: column !important;
	}

	.skeleton-card {
		flex-direction: row;
		min-height: 80px;
		align-items: center;
	}

	.skeleton-info {
		align-items: flex-start;
	}

	.top-card {
		flex-direction: row !important;
		justify-content: flex-start;
		text-align: left;
		padding: 14px 18px;
		min-height: 72px;
		gap: 16px !important;
		border-radius: 16px;
		margin-bottom: 12px;
	}

	.top-card-info {
		align-items: flex-start;
	}

	.top-stats {
		flex-direction: row;
		gap: 14px;
	}

	.top-medal {
		width: 64px !important;
		height: 64px !important;
	}

	.top-nick { font-size: 17px; margin-bottom: 4px; text-align: left; }
	.top-sum { font-size: 19px; }
	.top-sum .currency { font-size: 16px; }
	.top-orders { font-size: 12px; }
	.filter-btn { padding: 6px 16px; font-size: 12px; }
	.top-filter { gap: 6px; margin-bottom: 20px; }

	.top-place-badge {
		font-size: 11px;
		top: 8px;
		right: 12px;
		left: auto;
		width: auto;
		text-align: right;
	}
	.top-card.place-1 .top-place-badge { font-size: 14px; }
}

@media (max-width: 480px) {
	.top-donaters-wrapper { padding: 0 8px; }
	#topdonaters .slide-name { font-size: 32px; margin-bottom: 16px; }
	.top-card { padding: 11px 14px; min-height: 62px; gap: 12px !important; border-radius: 14px; margin-bottom: 10px; border-width: 1.5px; }
	.top-medal { width: 52px !important; height: 52px !important; }
	.top-nick { font-size: 15px; margin-bottom: 3px; }
	.top-sum { font-size: 16px; }
	.top-sum .currency { font-size: 14px; }
	.top-orders { font-size: 11px; }
	.top-stats { gap: 10px; }
	.filter-btn { padding: 5px 12px; font-size: 11px; border-radius: 16px; }
	.top-filter { gap: 5px; margin-bottom: 16px; }
	.top-place-badge { font-size: 9px; top: 5px; right: 8px; }
	.top-card.place-1 .top-place-badge { font-size: 11px; }
	.skeleton-card { padding: 11px 14px; min-height: 62px; gap: 12px; }
	.skeleton-avatar { width: 52px; height: 52px; }
}

@media (max-width: 360px) {
	.top-card { padding: 10px 12px; min-height: 56px; gap: 10px !important; border-radius: 12px; }
	.top-medal { width: 44px !important; height: 44px !important; }
	.top-nick { font-size: 13px; }
	.top-sum { font-size: 14px; }
	.top-sum .currency { font-size: 12px; }
	.top-orders { font-size: 10px; }
}