/* Hooshi GameBato Octagon Container — 2.0.0 */

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) {
	--hgbo-accent: #ff2238;
	--hgbo-accent-dark: #930013;
	--hgbo-accent-soft: rgba(255, 34, 56, .12);
	--hgbo-surface-light: #17191e;
	--hgbo-surface-dark: #050608;
	--hgbo-metal: #3a3d44;
	--hgbo-text: #f4f5f7;
	--hgbo-muted: #9da1a8;
	--hgbo-cut: 20px;
	--hgbo-frame-width: 1px;
	--hgbo-glow: 16px;
	--hgbo-min-height: 84px;
	--hgbo-pointer-x: 50%;
	--hgbo-pointer-y: 18%;
	--hgbo-menu-direction: inherit;
	--hgbo-menu-justify: center;
	--hgbo-menu-gap: 8px;
	--hgbo-menu-font-size: 16px;
	--hgbo-item-pad-x: 18px;
	--hgbo-item-pad-y: 15px;
	--hgbo-submenu-width: 980px;
	--hgbo-mega-columns: 3;
	--hgbo-menu-duration: 380ms;
	position: relative !important;
	z-index: 0;
	isolation: isolate;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--hgbo-min-height);
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	color: var(--hgbo-text);
}

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
),
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) *,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) *::before,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) *::after {
	box-sizing: border-box;
}

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
)::before,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
)::after {
	content: "" !important;
	position: absolute !important;
	pointer-events: none !important;
	clip-path: polygon(
		var(--hgbo-cut) 0,
		calc(100% - var(--hgbo-cut)) 0,
		100% var(--hgbo-cut),
		100% calc(100% - var(--hgbo-cut)),
		calc(100% - var(--hgbo-cut)) 100%,
		var(--hgbo-cut) 100%,
		0 calc(100% - var(--hgbo-cut)),
		0 var(--hgbo-cut)
	) !important;
	border-radius: 0 !important;
}

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
)::before {
	inset: 0 !important;
	z-index: -2 !important;
	background:
		linear-gradient(90deg, transparent 0 2%, var(--hgbo-accent) 13%, transparent 35%) top / 100% 2px no-repeat,
		linear-gradient(270deg, transparent 0 3%, var(--hgbo-accent) 14%, transparent 37%) bottom / 100% 2px no-repeat,
		linear-gradient(135deg,
			var(--hgbo-metal) 0 14%,
			#202329 23%,
			var(--hgbo-accent-dark) 34%,
			var(--hgbo-accent) 43%,
			var(--hgbo-accent-dark) 52%,
			#202329 63%,
			var(--hgbo-metal)
		) !important;
	filter: drop-shadow(0 0 var(--hgbo-glow) rgba(255, 34, 56, .52));
	opacity: .98;
}

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
)::after {
	inset: var(--hgbo-frame-width) !important;
	z-index: -1 !important;
	background:
		linear-gradient(115deg, rgba(255,34,56,.12), transparent 38%),
		radial-gradient(520px circle at var(--hgbo-pointer-x) var(--hgbo-pointer-y), var(--hgbo-accent-soft), transparent 57%),
		linear-gradient(180deg, rgba(255,255,255,.045), transparent 34%),
		linear-gradient(135deg, var(--hgbo-surface-light), var(--hgbo-surface-dark) 72%, #020304) !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.06),
		inset 0 -18px 38px rgba(0,0,0,.44) !important;
}

:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) > *,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) > .e-con-inner,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) .elementor-widget,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) .elementor-widget-container,
:where(
	.hgbo-skin-octagon-menu,
	.hgbo-skin-octagon-panel,
	.hgbo-skin-octagon-logo,
	.hgbo-skin-octagon-tools,
	.hgbo-skin-octagon-icon,
	.hgbo-octagon-menu,
	.hgbo-octagon-frame
) nav {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.hgbo-skin-header-row,
.hgbo-header-row {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: var(--hgbo-header-gap, 10px) !important;
	width: 100%;
	overflow: visible !important;
}

.hgbo-skin-octagon-menu,
.hgbo-octagon-menu {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	padding: 10px 18px !important;
}

.hgbo-skin-octagon-panel,
.hgbo-octagon-frame {
	padding: 16px 20px !important;
}

.hgbo-skin-octagon-logo {
	padding: 16px 24px !important;
	min-width: 225px;
}

.hgbo-skin-octagon-tools {
	padding: 12px 16px !important;
}

.hgbo-skin-octagon-icon {
	--hgbo-cut: 13px;
	min-width: 64px;
	min-height: 64px;
	padding: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.hgbo-edge-yes::before,
.hgbo-octagon-menu::before,
.hgbo-octagon-frame::before {
	animation: hgbo-edge-sweep 5.8s linear infinite;
	background-size: 180% 2px, 180% 2px, auto !important;
}

@keyframes hgbo-edge-sweep {
	0% { background-position: 0% 0, 100% 100%, 0 0; }
	100% { background-position: 100% 0, 0% 100%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hgbo-edge-yes::before,
	.hgbo-octagon-menu::before,
	.hgbo-octagon-frame::before {
		animation: none;
	}
}

/* Automatic menu styling. The manual class always enables this. */
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-root,
.hgbo-octagon-menu .hgbo-menu-root,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-root ul,
.hgbo-octagon-menu .hgbo-menu-root ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-root,
.hgbo-octagon-menu .hgbo-menu-root {
	direction: var(--hgbo-menu-direction);
	width: 100%;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item,
.hgbo-octagon-menu .hgbo-menu-item {
	position: relative !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item > a,
.hgbo-octagon-menu .hgbo-menu-item > a {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-height: 52px;
	padding: var(--hgbo-item-pad-y) var(--hgbo-item-pad-x) !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: transparent !important;
	box-shadow: inset 0 -2px 0 transparent !important;
	color: var(--hgbo-text) !important;
	font-size: var(--hgbo-menu-font-size) !important;
	font-weight: 650 !important;
	line-height: 1.15 !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition:
		color 220ms ease,
		background 220ms ease,
		box-shadow 220ms ease,
		translate 220ms ease !important;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item > a::after,
.hgbo-octagon-menu .hgbo-menu-item > a::after {
	content: "" !important;
	position: absolute !important;
	inset-inline: 14px !important;
	bottom: 5px !important;
	height: 2px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, transparent, var(--hgbo-accent), transparent) !important;
	opacity: 0;
	transform: scaleX(.35);
	transition: opacity 240ms ease, transform 240ms ease !important;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item > a:hover,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.hgbo-open > a,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.current-menu-item > a,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.current-menu-ancestor > a,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.current_page_item > a,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item > a.elementor-item-active,
.hgbo-octagon-menu .hgbo-menu-item > a:hover,
.hgbo-octagon-menu .hgbo-menu-item.hgbo-open > a,
.hgbo-octagon-menu .hgbo-menu-item.current-menu-item > a,
.hgbo-octagon-menu .hgbo-menu-item.current-menu-ancestor > a,
.hgbo-octagon-menu .hgbo-menu-item.current_page_item > a,
.hgbo-octagon-menu .hgbo-menu-item > a.elementor-item-active {
	color: var(--hgbo-accent) !important;
	background: linear-gradient(180deg, rgba(255,34,56,.16), rgba(255,34,56,.035)) !important;
	box-shadow:
		inset 0 -2px 0 var(--hgbo-accent),
		inset 0 0 0 1px rgba(255,34,56,.1),
		0 0 18px rgba(255,34,56,.05) !important;
}

.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item > a:hover::after,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.hgbo-open > a::after,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.current-menu-item > a::after,
.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-item.current-menu-ancestor > a::after,
.hgbo-octagon-menu .hgbo-menu-item > a:hover::after,
.hgbo-octagon-menu .hgbo-menu-item.hgbo-open > a::after,
.hgbo-octagon-menu .hgbo-menu-item.current-menu-item > a::after,
.hgbo-octagon-menu .hgbo-menu-item.current-menu-ancestor > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.hgbo-submenu {
	background:
		linear-gradient(115deg, rgba(255,34,56,.075), transparent 34%),
		linear-gradient(135deg, rgba(18,20,24,.985), rgba(4,5,7,.99)) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow:
		0 26px 70px rgba(0,0,0,.62),
		inset 0 0 0 1px rgba(255,34,56,.34),
		0 0 30px rgba(255,34,56,.11) !important;
	clip-path: polygon(
		18px 0,
		calc(100% - 18px) 0,
		100% 18px,
		100% calc(100% - 18px),
		calc(100% - 18px) 100%,
		18px 100%,
		0 calc(100% - 18px),
		0 18px
	) !important;
}

.hgbo-submenu li {
	position: relative;
	list-style: none !important;
	margin: 0 !important;
}

.hgbo-submenu a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100%;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0)) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
	color: var(--hgbo-text) !important;
	font-size: 14px !important;
	font-weight: 520 !important;
	text-decoration: none !important;
	transition:
		color 220ms ease,
		background 220ms ease,
		box-shadow 220ms ease,
		translate 220ms ease !important;
}

.hgbo-submenu a:hover,
.hgbo-submenu li.current-menu-item > a {
	color: var(--hgbo-accent) !important;
	background: linear-gradient(180deg, rgba(255,34,56,.17), rgba(255,34,56,.045)) !important;
	box-shadow: inset 0 0 0 1px rgba(255,34,56,.16) !important;
}

@media (min-width: 1025px) {
	.hgbo-skin-octagon-menu.hgbo-auto-menu-yes .hgbo-menu-root,
	.hgbo-octagon-menu .hgbo-menu-root {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: center !important;
		justify-content: var(--hgbo-menu-justify) !important;
		gap: var(--hgbo-menu-gap) !important;
		position: relative !important;
		overflow: visible !important;
	}

	.hgbo-menu-item > .hgbo-submenu {
		display: grid !important;
		grid-template-columns: 1fr;
		gap: 9px;
		position: absolute !important;
		top: calc(100% + 14px) !important;
		inset-inline-start: 0 !important;
		inset-inline-end: auto !important;
		width: max-content !important;
		min-width: 280px !important;
		max-width: min(92vw, 620px) !important;
		padding: 15px !important;
		margin: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(16px) scale(.98) !important;
		transform-origin: top center !important;
		filter: blur(10px);
		transition:
			opacity var(--hgbo-menu-duration) ease,
			transform var(--hgbo-menu-duration) cubic-bezier(.16,1,.3,1),
			visibility 0s linear var(--hgbo-menu-duration),
			filter var(--hgbo-menu-duration) ease !important;
		z-index: 999999 !important;
	}

	.hgbo-menu-item.hgbo-open > .hgbo-submenu,
	.hgbo-menu-item:hover > .hgbo-submenu,
	.hgbo-menu-item:focus-within > .hgbo-submenu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) scale(1) !important;
		filter: blur(0);
		transition-delay: 0s !important;
	}

	.hgbo-menu-item.hgbo-mega,
	.hgbo-menu-item.hgch-mega {
		position: static !important;
	}

	.hgbo-menu-item.hgbo-mega > .hgbo-submenu,
	.hgbo-menu-item.hgch-mega > .hgbo-submenu {
		left: 50% !important;
		right: auto !important;
		inset-inline-start: auto !important;
		width: min(var(--hgbo-submenu-width), calc(100vw - 36px)) !important;
		max-width: min(var(--hgbo-submenu-width), calc(100vw - 36px)) !important;
		grid-template-columns: repeat(var(--hgbo-mega-columns), minmax(0, 1fr));
		gap: 18px;
		padding: 22px !important;
		transform: translate(-50%, 16px) scale(.98) !important;
	}

	.hgbo-menu-item.hgbo-mega:hover > .hgbo-submenu,
	.hgbo-menu-item.hgbo-mega.hgbo-open > .hgbo-submenu,
	.hgbo-menu-item.hgbo-mega:focus-within > .hgbo-submenu,
	.hgbo-menu-item.hgch-mega:hover > .hgbo-submenu,
	.hgbo-menu-item.hgch-mega.hgbo-open > .hgbo-submenu,
	.hgbo-menu-item.hgch-mega:focus-within > .hgbo-submenu {
		transform: translate(-50%, 0) scale(1) !important;
	}

	.hgbo-menu-item.hgbo-mega > .hgbo-submenu > li > a,
	.hgbo-menu-item.hgch-mega > .hgbo-submenu > li > a {
		padding: 6px 4px 12px !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--hgbo-accent) !important;
		font-size: 15px !important;
		font-weight: 760 !important;
	}

	.hgbo-menu-item.hgbo-mega > .hgbo-submenu > li > ul,
	.hgbo-menu-item.hgch-mega > .hgbo-submenu > li > ul {
		display: grid !important;
		gap: 9px !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

@media (max-width: 1024px) {
	.hgbo-skin-header-row,
	.hgbo-header-row {
		gap: 6px !important;
	}

	:where(
		.hgbo-skin-octagon-menu,
		.hgbo-skin-octagon-panel,
		.hgbo-skin-octagon-logo,
		.hgbo-skin-octagon-tools,
		.hgbo-skin-octagon-icon,
		.hgbo-octagon-menu,
		.hgbo-octagon-frame
	) {
		--hgbo-cut: 14px;
		--hgbo-min-height: 64px;
	}

	.hgbo-menu-item > .hgbo-submenu {
		max-width: 100% !important;
	}
}