/*
	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; }

.hw-mobile-menu {
	display: none;
}

.main_layout_after_scroll {
	max-width: 100%;
	width: 562px;
}

.main_layout_after_scroll > .hw-scroll {
	width: 100%;
}

.main_layout_after_scroll iframe,
.main_layout_after_scroll img {
	height: auto;
	max-width: 100%;
}

.main_layout_side_voting {
	margin-top: 1rem;
}

@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;
	}
	.main_layout_desktop_menu {
		display: none;
	}
	.main_layout_col_left {
		max-width: 100%;
		order: 8;
		width: 562px;
	}
	.main_layout_side_voting {
		margin-top: 0;
	}
	.hw-mobile-menu {
		display: block;
		margin-bottom: 0.75rem;
	}
	.hw-mobile-menu > summary {
		align-items: center;
		background-color: #c1b79b;
		background-image:
			url('/scin/h5hammers/title_left.png'),
			url('/scin/h5hammers/title_right.png'),
			url('/scin/h5hammers/title_repeat.png'),
			url('/scin/h5hammers/scroll_05.png');
		background-position:
			0.65rem center,
			right 0.65rem center,
			center center,
			center center;
		background-repeat: no-repeat, no-repeat, repeat-x, repeat;
		background-size: 1.4rem 1rem, 1.4rem 1rem, auto 1rem, auto;
		border: 1px solid #3c2617;
		box-shadow:
			inset 0 0 0 1px rgba(255, 238, 188, 0.45),
			inset 0 0 12px rgba(61, 35, 18, 0.45),
			0 1px 2px rgba(30, 18, 10, 0.45);
		color: #020b03;
		cursor: pointer;
		display: flex;
		font-family: "Cloister Black", "Times New Roman", serif;
		font-size: 1rem;
		justify-content: center;
		line-height: 1.2;
		list-style: none;
		min-height: 2.35rem;
		padding: 0.55rem 2.9rem;
		position: relative;
		text-align: center;
		text-shadow: 1px 0 0 rgba(2, 11, 3, 0.45), 0 1px 0 rgba(255, 238, 188, 0.45);
	}
	.hw-mobile-menu > summary::-webkit-details-marker {
		display: none;
	}
	.hw-mobile-menu > summary::after {
		border-left: 0.28rem solid transparent;
		border-right: 0.28rem solid transparent;
		border-top: 0.42rem solid #3a1207;
		content: "";
		position: absolute;
		right: 1.35rem;
		top: 50%;
		transform: translateY(-35%);
	}
	.hw-mobile-menu[open] > summary::after {
		border-bottom: 0.42rem solid #3a1207;
		border-top: 0;
		transform: translateY(-55%);
	}
	.hw-mobile-menu .hw-scroll {
		margin-top: 0.5rem;
	}
}
@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_file,
.hw_files_item_desc,
.hw_files_item_folder {
	flex: 0 0 100%;
}
.hw_files_item_desc {
	border-bottom: 1px solid rgba(74, 78, 70, 0.45);
	margin-bottom: 14px;
	padding-bottom: 14px;
}
.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;
}