/*
	Rem sizing reference:
	10pt - 0.83rem | 14pt - 1.16rem | 16pt - 1.33rem
	11px - 0.68rem | 9pt  - 0.75rem
*/

/* ===== Base ===== */
html {
	font-size: calc(1em + 0.5vw);
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	background-color: #CAD3DA;
	background-image: url(//heroesworld.ru/scin/h5hammers/background_mobile.jpg);
	background-image: image-set(
		url(//heroesworld.ru/scin/h5hammers/background_mobile.avif) type("image/avif"),
		url(//heroesworld.ru/scin/h5hammers/background_mobile.webp) type("image/webp"),
		url(//heroesworld.ru/scin/h5hammers/background_mobile.jpg) type("image/jpeg")
	);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100%;
}

/* ===== Head space (responsive background spacer) ===== */
.hw-head-space { height: 50px; }

@media only screen and (min-width: 481px) {
	.hw-head-space { height: 100px; }
	body { background-size: 720px 352px; }
}
@media only screen and (min-width: 701px) {
	.hw-head-space { height: 150px; }
	body { background-size: 1024px 501px; }
}
@media only screen and (min-width: 1024px) {
	body {
		background-image: url(//heroesworld.ru/scin/h5hammers/background_720p.jpg);
		background-image: image-set(
			url(//heroesworld.ru/scin/h5hammers/background_720p.avif) type("image/avif"),
			url(//heroesworld.ru/scin/h5hammers/background_720p.webp) type("image/webp"),
			url(//heroesworld.ru/scin/h5hammers/background_720p.jpg) type("image/jpeg")
		);
		background-size: 1280px 627px;
	}
	.hw-head-space { height: 305px; }
}
@media only screen and (min-width: 1201px) {
	body {
		background-image: url(//heroesworld.ru/scin/h5hammers/background_1080p.jpg);
		background-image: image-set(
			url(//heroesworld.ru/scin/h5hammers/background_1080p.avif) type("image/avif"),
			url(//heroesworld.ru/scin/h5hammers/background_1080p.webp) type("image/webp"),
			url(//heroesworld.ru/scin/h5hammers/background_1080p.jpg) type("image/jpeg")
		);
		background-size: 1920px 941px;
	}
	.hw-head-space { height: 400px; }
}
@media only screen and (min-width: 1920px) {
	.hw-head-space { height: 400px; }
}
@media only screen and (min-width: 2500px) {
	body {
		background-image: url(//heroesworld.ru/scin/h5hammers/background_4k.jpg);
		background-image: image-set(
			url(//heroesworld.ru/scin/h5hammers/background_4k.avif) type("image/avif"),
			url(//heroesworld.ru/scin/h5hammers/background_4k.webp) type("image/webp"),
			url(//heroesworld.ru/scin/h5hammers/background_4k.jpg) type("image/jpeg")
		);
		background-size: 3840px 1882px;
	}
	.hw-head-space { height: 600px; }
}

/* ===== Scroll container (CSS Grid 3x3) ===== */
.hw-scroll {
	display: grid;
	grid-template-columns: 81px 1fr 81px;
	grid-template-rows: 68px minmax(550px, auto) 84px;
}
.hw-scroll-tl {
	background: url('/scin/h5hammers/scroll_01.png') no-repeat;
	background-size: 100% 100%;
}
.hw-scroll-tc {
	background: url('/scin/h5hammers/scroll_02.png') repeat-x;
	background-size: auto 100%;
}
.hw-scroll-tr {
	background: url('/scin/h5hammers/scroll_03.png') no-repeat;
	background-size: 100% 100%;
}
.hw-scroll-cl {
	background: url('/scin/h5hammers/scroll_04.png') repeat-y;
	background-size: 100% auto;
}
.hw-scroll-cc {
	background: url('/scin/h5hammers/scroll_05.png') repeat;
	padding: 0 8px;
	overflow-x: hidden;
	overflow-y: visible;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.hw-scroll-cr {
	background: url('/scin/h5hammers/scroll_06.png') repeat-y;
	background-size: 100% auto;
}
.hw-scroll-bl {
	background: url('/scin/h5hammers/scroll_07.png') no-repeat;
	background-size: 100% 100%;
}
.hw-scroll-bc {
	background: url('/scin/h5hammers/scroll_08.png') repeat-x;
	background-size: auto 100%;
}
.hw-scroll-br {
	background: url('/scin/h5hammers/scroll_09.png') no-repeat;
	background-size: 100% 100%;
}

/* Content area width overrides */
#content_0 .hw-scroll-cc {
	min-width: 0;
}
.main_layout_content .hw-scroll {
	grid-template-columns: 81px minmax(0, 1000px) 81px;
}
#content_11 .hw-scroll,
#content_12 .hw-scroll,
#content_24 .hw-scroll {
	grid-template-columns: 81px minmax(0, 700px) 81px;
}

/* ===== Scroll responsive (mobile) ===== */
@media only screen and (max-width: 900px) {
	.hw-scroll {
		grid-template-columns: 40px 1fr 40px;
		grid-template-rows: 34px minmax(200px, auto) 42px;
	}
	.main_layout_content .hw-scroll {
		grid-template-columns: 40px 1fr 40px;
	}
	#content_11 .hw-scroll,
	#content_12 .hw-scroll,
	#content_24 .hw-scroll {
		grid-template-columns: 40px 1fr 40px;
	}
}
@media only screen and (max-width: 480px) {
	body { overflow-x: hidden; }
	.hw-scroll {
		grid-template-columns: 24px 1fr 24px;
		grid-template-rows: 20px minmax(100px, auto) 25px;
	}
	.main_layout_content .hw-scroll {
		grid-template-columns: 24px 1fr 24px;
	}
	#content_11 .hw-scroll,
	#content_12 .hw-scroll,
	#content_24 .hw-scroll {
		grid-template-columns: 24px 1fr 24px;
	}
	.hw-scroll-cc {
		padding: 0 4px;
	}
}

/* ===== Title decoration ===== */
.hw-title {
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.hw-title-left,
.hw-title-right {
	width: 1.4rem;
	min-width: 1.3rem;
	background-size: 1.4rem 1rem;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}
.hw-title-left  { background-image: url('/scin/h5hammers/title_left.png'); }
.hw-title-right { background-image: url('/scin/h5hammers/title_right.png'); }
.hw-title-center {
	background-size: contain;
	background-image: url('/scin/h5hammers/title_repeat.png');
	background-repeat: repeat-x;
	font-size: 0.5rem;
	padding: 0.2rem 0.4rem;
	text-align: center;
	white-space: nowrap;
}

/* ===== Main layout ===== */
.main_layout {
	margin-top: 10rem;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 0;
}
.main_layout > *:nth-child(1) { order: 1; }
.main_layout > *:nth-child(2) { order: 2; }
.main_layout > *:nth-child(3) { order: 3; }
.main_layout > *:nth-child(4) { order: 4; }
.main_layout > *:nth-child(5) { order: 5; }
.main_layout > *:nth-child(6) { order: 6; }
.main_layout > *:nth-child(7) { order: 7; }
.main_layout > *:nth-child(8) { order: 8; }
.main_layout > *:nth-child(9) { order: 9; }
.main_layout > *:nth-child(10) { order: 10; }

@media only screen and (max-width: 1713px) {
	.main_layout > *:nth-child(1) { order: 2; }
	.main_layout > *:nth-child(2) { order: 1; }
}

@media only screen and (max-width: 900px) {
	.main_layout {
		margin-top: 2rem;
		padding: 0 4px;
	}
}
@media only screen and (max-width: 480px) {
	.main_layout {
		margin-top: 1rem;
		padding: 0 2px;
	}
}

.hw_flex_break {
	flex-basis: 100%;
	width: 0;
}

/* ===== Logo ===== */
.hw_logo {
	height: 400px;
	display: flex;
	align-items: center;
	align-content: center;
}
.hw_logo img {
	width: 370px;
}
#hw_logo { border: 0; }

/* ===== Social ===== */
.hw_social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}
.hw_social > * {
	padding: 32px;
}
.hw_social img {
	width: 64px;
}

/* ===== Form elements ===== */
.hw_button {
	BORDER-LEFT: #26221F 2px solid;
	BORDER-RIGHT: #26221F 2px solid;
	BORDER-TOP: #26221F 2px solid;
	BORDER-BOTTOM: #26221F 2px solid;
	FONT-WEIGHT: bold;
	FONT-SIZE: 10pt;
	COLOR: #000000;
	FONT-FAMILY: Arial, serif;
	BACKGROUND-COLOR: #BCBEB5;
}
input { height: 1rem; }
#hw_login { width: 150px; }
#hw_password { width: 150px; }
#hw_submit { }
.hw_username { font-size: 0.9rem; }

/* ===== Misc ===== */
.icon {
	width: 64px;
	border: 0;
}
.avatar_image {
	border: 1px solid black;
}

/* ===== Files gallery ===== */
.hw_files_items {
	padding-top: 16px;
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.hw_files_items a {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.hw_files_item_art {
	margin: 4px;
	border: 2px solid black;
}
.hw_files_item_art img:hover {
	opacity: 0.5;
}
.art_img {
	width: 290px;
}

/* ===== Legacy compatibility (old class names still referenced in some modules) ===== */
.scroll_center_center {
	min-width: 400px;
	max-width: 400px;
	height: 550px;
}