/*
	Верхний блок главной: слева промо-слайдер, справа быстрые переходы
	и карточки серверов с индикатором заполненности.
*/

.pbhero {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

/* ---------- плитки быстрых переходов ---------- */

.pbhero__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.pbhero__tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 14px 14px;
	border-radius: 16px;
	background: #25252e;
	border: 1px solid rgba(255, 255, 255, 0.05);
	text-decoration: none;
	transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.pbhero__tile:hover {
	transform: translateY(-2px);
	background: #2a2a34;
	border-color: rgba(79, 234, 159, 0.3);
	text-decoration: none;
}

.pbhero__tile-ico {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #0f1a14;
	background: linear-gradient(135deg, #5dba8d 0%, #4fea9f 100%);
}

.pbhero__tile-name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.pbhero__tile-go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: #4fea9f;
	background: rgba(79, 234, 159, 0.1);
}

/* ---------- карточки серверов ---------- */

.pbhero__servers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.pbhero__server {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	background: #25252e;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.pbhero__server--skeleton {
	height: 88px;
	background: linear-gradient(90deg, #25252e 0%, #2c2c37 50%, #25252e 100%);
	background-size: 200% 100%;
	animation: pbhero-shine 1.4s ease-in-out infinite;
	border: 0;
}

@keyframes pbhero-shine {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* круговой индикатор заполненности */
.pbhero__ring {
	position: relative;
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pbhero__ring svg {
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
}

.pbhero__ring-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.07);
	stroke-width: 5;
}

.pbhero__ring-bar {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	transition: stroke-dasharray 0.6s ease;
}

.pbhero__ring.is-calm .pbhero__ring-bar { stroke: #4fea9f; }
.pbhero__ring.is-warm .pbhero__ring-bar { stroke: #ffc247; }
.pbhero__ring.is-hot  .pbhero__ring-bar { stroke: #ff5f6d; }

.pbhero__ring b {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.pbhero__server-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.pbhero__server-name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pbhero__server-addr,
.pbhero__server-map {
	font-size: 12px;
	color: #8b8f9c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pbhero__server-play {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease;
}

.pbhero__server-play:hover {
	background: #4fea9f;
	color: #10231a;
	text-decoration: none;
}

.pbhero__empty {
	padding: 18px;
	border-radius: 16px;
	background: #25252e;
	color: #8b8f9c;
	font-size: 13px;
	text-align: center;
}

/* ---------- раскладка верхнего блока ---------- */

.pbtop-hero-row {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

@media (max-width: 1100px) {
	.pbtop-hero-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.pbhero__tiles { grid-template-columns: 1fr; }
	.pbhero__tile { flex-direction: row; align-items: center; }
	.pbhero__tile-go { margin-left: auto; }
}

/* ---------- фон карточки = картинка текущей карты ---------- */

.pbhero__server.has-map {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
}

/* затемнение поверх карты, иначе текст не читается */
.pbhero__server.has-map::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(30, 30, 38, 0.94) 0%, rgba(30, 30, 38, 0.82) 45%, rgba(30, 30, 38, 0.55) 100%);
}

.pbhero__server.has-map .pbhero__server-name,
.pbhero__server.has-map .pbhero__ring b {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ---------- боковые кнопки-ссылки ---------- */

.pbhero__top-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
	min-width: 0;
}

.pbhero__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
}

.pbhero__side-btn {
	width: 46px;
	flex: 1;
	min-height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #8b8f9c;
	background: #25252e;
	border: 1px solid rgba(255, 255, 255, 0.04);
	text-decoration: none;
	transition: color 0.16s ease, background 0.16s ease;
}

.pbhero__side-btn:hover {
	color: #4fea9f;
	background: #2c2c37;
	text-decoration: none;
}

/* ---------- лента плиток ---------- */

.pbhero__tiles-wrap {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.pbhero__tiles {
	display: flex;
	gap: 12px;
	transition: transform 0.45s ease;
}

.pbhero__tiles .pbhero__tile {
	flex: 0 0 calc((100% - 24px) / 3);
	min-width: 0;
}