*, *::before, *::after { box-sizing: border-box; }
:root { --activeColor: #A48EFF; --buttonBg: #373952 }
body { line-height: 1.5; letter-spacing: 0.00938em; background-color: #0C0D14; margin:0; padding:0; font-size: 14px; color:#fff; font-family: Nunito, Arial, "Helvetica Neue", Helvetica, sans-serif; }
header { background:rgba(33, 34, 51, 0.9); position:fixed; top:0; left:0; z-index:10; width:100%; height:60px; display:flex; justify-content: space-between; align-items:center; }
a { text-decoration: none; color: #a48eff; }
a:hover { color: #6842FF; }

h1, h2, h3, h4, h5, h6 { font-weight: 900; color: #fff; margin-block: 0; }
h1 { font-size: 24px; line-height: 31px; }

.btn { border: none; border-radius: 30px; padding: 8px 16px; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 16px; cursor: pointer; font-family: Nunito, Arial, "Helvetica Neue", Helvetica, sans-serif; }
.btn-primary { background: var(--buttonBg); color: #fff; }
.btn svg { display:inline-block; fill:#fff; width:20px; height:20px; margin-right:8px; }

header .logoWrapper { padding-left: 8px; display:flex; gap:12px; }
header button {  padding: 0; background: transparent; border:none; width:48px; height:48px; cursor:pointer; }
header button svg { width:24px; height:24px; fill:#fff; }
.aLogo { display:flex; align-items:center; }
.aLogo img { max-height: 38px; display:block; }
.aLogo .aLogoFirst { width:52px; }
.aLogo .aLogoSecond { width:150px; }

#mainNav { width: 200px; height: calc(100vh - 60px); position: fixed; top: 60px; left: 0; border-right: 1px solid #28293D; transition: left 0.5s; }
#mainNav .sidebarWrapper { width:100%; height:100%; padding-top: 16px; padding-bottom: 30px; overflow: auto; overflow-x: hidden; overflow-anchor: none; scrollbar-width: none; }
#mainNav .sidebarWrapper a { display:block; }
#mainNav .sidebarWrapper a .navLinkWrapper { display:flex; flex-wrap: nowrap; width: 200px; height: 34px; align-items: center; border-left:6px solid transparent; }
#mainNav .sidebarWrapper a .navLinkWrapper svg { fill:#878A9E; width: 60px; height: 34px; padding: 0 19px; text-align: center; margin-left: -6px; }
#mainNav .sidebarWrapper a .navLinkText { transition:all 0.3s; color:#fff; }
#mainNav .sidebarWrapper a:hover .navLinkText { transform: translate(8px, 0); }
#mainNav .sidebarWrapper a:hover .navLinkWrapper svg { opacity:0.8; }
#mainNav .sidebarWrapper a.active svg { fill: var(--activeColor); }
#mainNav .sidebarWrapper a.active .navLinkText { color:var(--activeColor); }
#mainNav .sidebarWrapper a.active .navLinkWrapper { border-color:var(--activeColor); }
#mainNav .sidebarWrapper hr { margin:8px 16px; border:1px solid rgba(255, 255, 255, 0.12); border-bottom:none; }
#mainNav.active { left:-200px; }

#siteMain { padding-left: 200px; margin-top: 60px; }
#mainNav.active ~ #siteMain { padding-left: 0; transition: padding-left 0.5s; }
.siteMainWrapper { padding-left: 8px; padding-bottom: 20px; }
.gamesSection { padding-top:10px; }
.sectionTitle { display:flex; width:100%; }
.sectionTitle h2 { padding:0 16px 3px 12px; }
.sectionTitle a { align-self: center; }
.sectionSliderWrapper { padding:10px 8px; }
.sectionSlider { position:relative; }
.sectionSlider .slick-arrow { text-indent:-9999px; opacity:0; overflow:hidden; z-index:2; position:absolute; top:0; left:0; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; border:0; width:50px; height:100%; transition:all 0.25s; background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuMjM3IDE3LjIzN3YtMi40NzRsMTQgMTRjLjY4NC42ODMuNjg0IDEuNzkgMCAyLjQ3NGExLjc0OCAxLjc0OCAwIDAxLTIuNDc0IDBsLTE0LTE0YTEuNzQ4IDEuNzQ4IDAgMDEwLTIuNDc0bDE0LTE0YTEuNzQ4IDEuNzQ4IDAgMDEyLjQ3NCAwYy42ODQuNjgzLjY4NCAxLjc5IDAgMi40NzRsLTE0IDE0eiIgZmlsbD0iI0VGRjFGMSIvPjwvc3ZnPg=="); background-position: 50% center; background-repeat: no-repeat; }
.sectionSlider .slick-next { left:initial; right:0; background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0Ljc2MyAxNy4yMzd2LTIuNDc0bC0xNCAxNGExLjc0OCAxLjc0OCAwIDAwMCAyLjQ3NGMuNjgzLjY4NCAxLjc5LjY4NCAyLjQ3NCAwbDE0LTE0YTEuNzQ4IDEuNzQ4IDAgMDAwLTIuNDc0bC0xNC0xNEExLjc1IDEuNzUgMCAwMC43NjMgMy4yMzdsMTQgMTR6IiBmaWxsPSIjRUZGMUYxIi8+PC9zdmc+); }
.sectionSlider .slick-disabled { opacity:0 !important; }
.sectionSlider:hover .slick-arrow { opacity:1; }

.gameItem { width: calc((100vw - 216px) / 7.25); height:calc(((((100vw - (200px)) / 7.25) - 4px) * 0.5617977528089888) + 4px); }
.gameItem a { position: relative; display: block; height: 100%; color: #fff; border: 2px solid transparent; border-radius: 10px; transition: all .2s; margin: 4px; overflow: hidden; }
.gameItem a .gameImage { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; }
.gameItem a img { width: 100%; height: 100%; object-fit: cover; }
.gameItem a:after { content:''; display:block; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0) 50%); position: absolute; bottom: -100%; z-index: 3; height: 100%; width: 100%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.gameItem a .gameName { z-index:4; position:absolute; bottom:5px; padding:8px; bottom:-100%; transition:all .2s; }
.gameItem a:hover { border-color:var(--activeColor); }
.gameItem a:hover .gameName { bottom:0; }
.gameItem a:hover:after { bottom:0; }

.slick-list,.slick-slider,.slick-track{position:relative;display:block}
.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl]
.slick-slide{float:right}
.slick-initialized .slick-slide,.slick-slide img{display:block}
.slick-arrow.slick-hidden,.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

.gamePage { display:grid; max-width:1888px; margin:auto; padding-top:8px }
.gamePage .gameItem { width:initial; height:initial; }
.gamePage .gameItem a { width: 182px; height: 104px; margin:4px 0; }
.gamePage .gameItem .gameName { font-size:11px; }
.related1x6 { grid-area: related1x6; }
.related1x6b { grid-area: related1x6b; }
.related8x1 { grid-area: related8x1; }
.related8x1b { grid-area: related8x1b; }
.related1x3 { grid-area: related1x3; }
.related1x3b { grid-area: related1x3b; }
.related1x6 .gamesWrapper,
.related1x6b .gamesWrapper,
.related1x3 .gamesWrapper,
.related1x3b .gamesWrapper { margin: -6px; display: flex; flex-flow: wrap; justify-content: center; }
.related8x1 .gamesWrapper,
.related8x1b .gamesWrapper { margin: -6px -2px; display: flex; justify-content: space-between; }


.gameWrapper { grid-area: game; }
.gameContainer { position: relative; width: 1128px; height: 660px;}

.gamePage { grid-template-columns: repeat(10, 178px); grid-template-rows: repeat(9, 100px); grid-template-areas:
		"related1x6 game game game game game game related1x6b banner2x3 banner2x3"
		"related1x6 game game game game game game related1x6b banner2x3 banner2x3"
		"related1x6 game game game game game game related1x6b banner2x3 banner2x3"
		"related1x6 game game game game game game related1x6b banner2x6 banner2x6"
		"related1x6 game game game game game game related1x6b banner2x6 banner2x6"
		"related1x6 game game game game game game related1x6b banner2x6 banner2x6"
		"related8x1 related8x1 related8x1 related8x1 related8x1 related8x1 related8x1 related8x1 banner2x6 banner2x6"
		/*"related2x1 related2x1 banner4x1 banner4x1 banner4x1 banner4x1 related2x1b related2x1b banner2x6 banner2x6"*/
		"related8x1b related8x1b related8x1b related8x1b related8x1b related8x1b related8x1b related8x1b banner2x6 banner2x6"
		"related1x3 info info info info info info related1x3b related3x3 related3x3"
		"related1x3 info info info info info info related1x3b related3x3 related3x3"
		"related1x3 info info info info info info related1x3b related3x3 related3x3"
		"related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2"
		"related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2 related10x2"; gap: 12px; }

.gameInfoContainer { grid-area: info; }
.gameInfoWrapper { border-radius: 8px; background: #1A1B28; padding:18px 24px; }
.gameButtons { padding:12px 0; }
.gameSumItem { display:flex; min-height:30px; }
.gameSumTitle { width: 110px; color: #767A8E; }
.gameSumValue { display:flex; }
.gameSumValue span { font-size: 12px; padding: 0 8px; }
.gameSumValue span.seperator { font-size: 12px; display:inline-block; }
.gameSumValue a { font-weight:900; }
.gameTags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.gameTags .tagItem { line-height:22px; }
.gameTags .tagItem a { display: block; background: var(--buttonBg); border-radius: 8px; padding: 8px 16px; color: #fff; font-size: 16px; font-weight: 800; }
.gameTags .tagItem a:hover { background: #6842ff; }
.gameShortDescription { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 12px; margin-top: 12px; }
.gameDescription { padding-top:12px; margin-top:12px; }

.categoryPage { padding: 16px 16px; }
.categoryTitle { margin-bottom:12px; }
.categorySummary { color:#aaadbe; padding-top:8px; }
.categoryGameGrid { display: grid; grid-template-columns: repeat(7, 1fr); justify-content: center; gap: 6px 0px; }
.categoryDescription { padding: 15px; background: #1A1B28; border-radius:10px; margin-top:32px; }

.paginationWrapper { display: flex; justify-content: center; margin-top: 60px; }
.pagination { display: flex; justify-content: center; background: #13141e; border-radius:60px; padding:10px; gap:4px; }
.pageBefore, .pageAfter { background: #0c0d14; width: 50px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50px; }
.pageBefore svg, .pageAfter svg { width: 20px; height: 20px; fill: #2f3148; }
.pageBefore a, .pageAfter a { background: #6842ff; width: 50px; height: 40px; border-radius: 50px; display: flex; justify-content: center; align-items: center; }
.pageBefore a svg, .pageAfter a svg { fill:#fff; }

.pageNumbers { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; }
.pageNumbers a { display: block; font-size: 16px; font-weight: 700; color: #fff; padding: 8px; height: 40px; border-radius: 50px; transition: all .1s ease-in; border:1px solid transparent; }
.pageNumbers a:hover { background: #6842ff }
.pageNumbers div { font-size: 16px; font-weight: 700; color: #666a7f; padding: 8px; width: 26px; height: 40px; }
.pageNumbers a.current { border: 1px solid #6842ff; }

@media (max-width:1750px) {
	:root { --gameCount: 1; }
	.gamePage { display: flex; flex-wrap: wrap; max-width: initial; padding: 16px; justify-content: flex-start; align-items: flex-start; }
	.gameWrapper { order: 1; width: calc(100% - 211px); }
	.gameContainer { width: 100%; }
	.related1x6 { order: 2; }
	.related1x6b { order: 4; }
	.related8x1, .related8x1b { order: 3; width: 100%; }
	.related1x3 { order: 5; }
	.gameInfoContainer { order: 3; width: calc(100% - 400px); }
	.related1x3b { display:none; }


	.related1x6 .gamesWrapper,
	.related1x6b .gamesWrapper,
	.related1x3 .gamesWrapper,
	.related1x3b .gamesWrapper { margin: 0; width: 178px; }
	
}

@media (max-width:1700px) {
	.related8x1, .related8x1b { padding-right:20px; }
	.related8x1 .gameItem:nth-child(8),
	.related8x1b .gameItem:nth-child(8) { display: none; }
}
@media (max-width:1520px) {
	#mainNav { left: -200px; background: #1a1b28; z-index: 99; }
	#mainNav.active { left: 0px; }
	#siteMain { padding-left: 0px; }
}

@media (max-width:1350px) {
	.related8x1 .gameItem:nth-child(7),
	.related8x1b .gameItem:nth-child(7) { display: none; }
}

	@media (max-width:1200px) {
		:root { --gameCount: 6; }
		.gameItem { width: calc(((100vw - 16px) / var(--gameCount))); height: calc((100vw / var(--gameCount)) + 50px) }
		.gameItem a { display: flex; flex-direction: column; }
		.gameItem a:after { display: none; }
		.gameItem a:hover { border-color: transparent; }
		.gameItem a .gameName { position: relative; bottom: initial; width: 100%; text-align: center; padding: 8px 8px 0 8px; order: 2; font-size: 12px; }
		.gameItem a .gameImage { height: calc(100% - 58px); order: 1; }
		.slick-slide { display: block; }
		.sectionSliderWrapper { width: 100%; overflow: hidden; overflow-x: scroll; scrollbar-width: none; scroll-padding: 50px; }
		.sectionSlider { display: flex; flex-wrap: nowrap; }
		.sectionTitle { justify-content: space-between; }
		.sectionTitle a { padding-right: 15px; }

		.siteMainWrapper { padding-left: 0; }

		.categoryGameGrid { grid-template-columns: repeat(var(--gameCount), 1fr); }
		.categoryGameGrid .gameItem { width: 100%; height: calc(((100vw - 32px) / var(--gameCount)) + 50px); }
		.gamePage { display: flex; flex-wrap: wrap; flex-direction: column; max-width: initial; padding: 16px; justify-content: flex-start; align-items: flex-start; }
		.gameWrapper { order: 1; }
		.related1x6 { order: 2; }
		.related1x6b { order: 3; }
		.related8x1, .related8x1b { order: 4; padding-right:0; }
		/*.related1x3, .related1x3b { order: 5; }*/
		.gameInfoContainer { order: 3; width:100%; }

		.related1x6 .gamesWrapper,
		.related1x6b .gamesWrapper,
		.related1x3 .gamesWrapper,
		.related1x3b .gamesWrapper,
		.related8x1 .gamesWrapper,
		.related8x1b .gamesWrapper { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(var(--gameCount), 1fr); }



		.gamePage .gameItem { width: 100%; height: calc(((100vw - 32px) / var(--gameCount)) + 50px); }
		.gamePage .gameItem a { width: initial; height: 100%; margin: 4px 2px; }

		.gameWrapper { width: 100%; }
		.gameContainer { width: 100%; height: 400px; }
		.related8x1 .gameItem:nth-child(7), .related8x1 .gameItem:nth-child(8),
		.related8x1b .gameItem:nth-child(7), .related8x1b .gameItem:nth-child(8),
		.related1x3,
		.related1x3b { display: none; }
	}

	@media (max-width:480px) {
		:root { --gameCount: 3; }
	}