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

/* ===== Base ===== */
html {
	font-size: 16px;
}
html, body {
	margin: 0;
	max-width: 100%;
	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%;
}

/* ===== Game hub navigation ===== */
.hw-game-curtains {
	align-items: flex-start;
	background:
		linear-gradient(180deg, rgba(207, 216, 221, 0.82), rgba(148, 164, 173, 0.78)),
		url('/scin/h5hammers/scroll_05.png');
	border: 1px solid rgba(68, 88, 99, 0.62);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	box-sizing: border-box;
	box-shadow:
		inset 0 0 0 1px rgba(250, 255, 255, 0.28),
		0 2px 7px rgba(22, 38, 47, 0.26);
	display: flex;
	gap: 3px;
	justify-content: center;
	left: 0;
	max-width: calc(100vw - 12px);
	margin: 0 auto;
	padding: 4px 6px 7px;
	position: fixed;
	right: 0;
	top: 0;
	width: max-content;
	z-index: 50;
}

.hw-game-curtain {
	align-items: center;
	background: linear-gradient(180deg, rgba(190, 198, 202, 0.82), rgba(109, 126, 136, 0.76));
	border: 1px solid rgba(60, 75, 84, 0.6);
	border-radius: 4px 4px 7px 7px;
	box-sizing: border-box;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.24),
		0 1px 2px rgba(21, 34, 42, 0.28);
	color: #1c2a30;
	display: flex;
	flex-direction: column;
	font-family: "Times New Roman", serif;
	font-size: 0.7rem;
	font-weight: bold;
	line-height: 1.05;
	min-height: 50px;
	padding: 4px 5px 7px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(235, 244, 248, 0.6);
	width: 84px;
}

.hw-game-curtain-toggle {
	align-self: stretch;
	background: linear-gradient(180deg, rgba(214, 220, 224, 0.86), rgba(126, 145, 156, 0.78));
	border: 1px solid rgba(60, 75, 84, 0.58);
	border-radius: 4px 4px 7px 7px;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
	color: #24333a;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.68rem;
	font-weight: bold;
	line-height: 1;
	min-height: 50px;
	padding: 0 8px;
	text-shadow: 0 1px 0 rgba(235, 244, 248, 0.58);
}

.hw-game-curtain-toggle:hover,
.hw-game-curtain-toggle:focus {
	background: linear-gradient(180deg, rgba(229, 234, 237, 0.92), rgba(145, 163, 173, 0.84));
	outline: none;
}

.hw-game-curtains-collapsed .hw-game-curtain {
	display: none;
}

.hw-game-curtains-collapsed {
	padding: 3px 5px 5px;
}

.hw-game-curtains-collapsed .hw-game-curtain-toggle {
	font-size: 0.75rem;
	min-height: 32px;
	padding: 0 12px;
}

.hw-game-curtain::after {
	border-left: 42px solid transparent;
	border-right: 42px solid transparent;
	border-top: 7px solid rgba(109, 126, 136, 0.82);
	bottom: -7px;
	content: "";
	left: 0;
	position: absolute;
}

.hw-game-curtain img {
	filter: drop-shadow(0 1px 1px rgba(20, 33, 40, 0.42));
	height: 30px;
	margin-bottom: 4px;
	width: 30px;
}

.hw-game-curtain span {
	display: block;
	opacity: 0.86;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
	width: 100%;
}

@media only screen and (min-width: 701px) and (max-width: 1080px) {
	.hw-game-curtains {
		gap: 4px;
		max-width: calc(100vw - 8px);
		padding: 4px 5px 7px;
	}
	.hw-game-curtain {
		font-size: 0.64rem;
		min-height: 54px;
		padding: 4px 4px 7px;
		width: 66px;
	}
	.hw-game-curtain::after {
		border-left-width: 33px;
		border-right-width: 33px;
	}
	.hw-game-curtain img {
		height: 30px;
		width: 30px;
	}
	.hw-game-curtain span {
		line-height: 1.05;
		max-height: 2.2em;
		overflow: hidden;
		white-space: normal;
	}
	.hw-game-curtain-toggle {
		font-size: 0.64rem;
		min-height: 54px;
		padding: 0 7px;
	}
}

.hw-game-curtain:hover,
.hw-game-curtain:focus {
	background: linear-gradient(180deg, rgba(215, 222, 226, 0.9), rgba(130, 149, 160, 0.84));
	outline: none;
	transform: translateY(2px);
}

.hw-game-curtain-current {
	background: linear-gradient(180deg, rgba(213, 198, 155, 0.9), rgba(151, 128, 79, 0.84));
	border-color: rgba(94, 79, 45, 0.62);
	box-shadow:
		inset 0 0 0 1px rgba(255, 246, 210, 0.35),
		0 2px 4px rgba(41, 35, 22, 0.28);
}

.hw-game-curtain-current::after {
	border-top-color: rgba(151, 128, 79, 0.88);
}

@media only screen and (max-width: 700px) {
	.hw-game-curtains {
		align-items: center;
		gap: 3px;
		justify-content: flex-start;
		max-width: 100vw;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 4px 30px 5px 5px;
		scrollbar-width: thin;
		width: 100vw;
		-webkit-overflow-scrolling: touch;
	}
	.hw-game-curtain {
		flex: 0 0 50px;
		font-size: 0.75rem;
		min-height: 50px;
		padding: 4px 2px 5px;
		width: 50px;
	}
	.hw-game-curtain-toggle {
		align-self: stretch;
		flex: 0 0 48px;
		font-size: 0.58rem;
		min-height: 50px;
		order: -1;
		padding: 0 7px;
	}
	.hw-game-curtain::after {
		display: none;
	}
	.hw-game-curtain img {
		height: 28px;
		margin-bottom: 3px;
		width: 28px;
	}

	.hw-game-curtain span {
		letter-spacing: 0;
		line-height: 0.9;
		max-height: 1.8em;
		overflow: hidden;
		white-space: normal;
	}

	.hw-game-curtains::after {
		background: linear-gradient(90deg, rgba(202, 211, 218, 0), rgba(202, 211, 218, 0.92));
		content: "";
		height: 100%;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		width: 28px;
	}

	.hw-game-curtains-collapsed {
		overflow: visible;
		padding: 3px 5px 5px;
		width: max-content;
	}

	.hw-game-curtains-collapsed::after {
		display: none;
	}

	.hw-game-curtains-collapsed .hw-game-curtain {
		display: none;
	}

	.hw-game-curtains-collapsed .hw-game-curtain-toggle {
		min-height: 26px;
		padding: 0 10px;
		width: auto;
	}
}

/* ===== 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 {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 81px 1fr 81px;
	grid-template-rows: 68px minmax(550px, auto) 84px;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}
.hw-scroll > * {
	min-width: 0;
}
.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;
	box-sizing: border-box;
	padding: 0 8px;
	overflow-x: hidden;
	overflow-y: visible;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.hw-scroll-cc img,
.hw-scroll-cc iframe,
.hw-scroll-cc object,
.hw-scroll-cc embed,
.hw-scroll-cc video {
	max-width: 100%;
}
.hw-scroll-cc img,
.hw-scroll-cc video {
	height: auto;
}
.hw-scroll-cc table {
	max-width: 100%;
}
.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;
	}
	.hw-scroll-cc iframe,
	.hw-scroll-cc object,
	.hw-scroll-cc embed,
	.hw-scroll-cc video {
		height: auto;
	}
}

/* ===== 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.75rem;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.2rem 0.4rem;
	text-align: center;
}

/* ===== Main layout ===== */
.main_layout {
	margin-top: 10rem;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 0;
	max-width: 100%;
	min-width: 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_col_left,
.main_layout_content {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.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_content {
		width: 100%;
	}
	.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 {
	max-width: 100%;
	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 {
	max-width: 100%;
	width: 290px;
}

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