/* ---------- акты: нарисованные обложки и заметные кнопки ---------- */

.act {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.act__art {
	height: 216px;
	background-color: #0a0d14;
	background-position: center 58%;
	background-size: cover;
	background-repeat: no-repeat;
}

/* фигуры, которые рисовались CSS, больше не нужны — есть арт */
.act__art > i {
	display: none;
}

.act__art--school {
	background-image:
		linear-gradient(180deg, rgba(6, 9, 16, 0) 52%, rgba(8, 10, 16, 0.92) 100%),
		url("../assets/art/act1-school.jpg");
}

.act__art--blast {
	background-image:
		linear-gradient(180deg, rgba(10, 6, 8, 0) 52%, rgba(10, 7, 9, 0.92) 100%),
		url("../assets/art/act2-blast.jpg");
}

.act--school:hover .act__art,
.act--school:focus-visible .act__art {
	background-position: center 52%;
}

.act--act2-beta {
	border-color: rgba(255, 160, 110, 0.42);
}

.act--act2-beta:hover .act__art,
.act--act2-beta:focus-visible .act__art {
	background-position: center 52%;
	filter: saturate(1.08) brightness(1.06);
}

.act__go--beta {
	background: #f3a05e;
	color: #1b0e08;
}

/* ---------- кнопки в панелях: теперь их видно ---------- */

.menu__row .button,
.menu__row .button--ghost {
	min-height: 50px;
	border: 1px solid rgba(226, 232, 248, 0.34);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(62, 68, 88, 0.95), rgba(30, 34, 46, 0.95));
	color: #f3f5fb;
	font-weight: 600;
	letter-spacing: 0.05em;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.menu__row .button:hover,
.menu__row .button:focus-visible,
.menu__row .button--ghost:hover,
.menu__row .button--ghost:focus-visible {
	border-color: rgba(255, 255, 255, 0.6);
	background: linear-gradient(180deg, rgba(84, 92, 118, 1), rgba(42, 47, 62, 1));
	color: #fff;
}

.menu__row .button--primary {
	border-color: rgba(255, 160, 150, 0.55);
	background: linear-gradient(180deg, rgba(206, 58, 50, 0.98), rgba(132, 28, 24, 0.98));
	color: #fff2f0;
}

.menu__row .button--primary:hover,
.menu__row .button--primary:focus-visible {
	border-color: rgba(255, 200, 192, 0.85);
	background: linear-gradient(180deg, rgba(228, 72, 62, 1), rgba(152, 34, 28, 1));
}

#acts-back,
#settings-back,
#controls-back,
#about-back,
#online-back {
	min-width: 200px;
}

.menu__note {
	color: rgba(226, 232, 248, 0.62);
}

@media (max-width: 640px) {
	.act__art {
		height: 172px;
	}
}