/**
 * 10xWin — Compact premium gaming HUD navbar.
 * Same footprint as bundled NavBar (1.22667rem). Nothing protrudes outside the bar.
 */

:root {
	--tw-hud-bar-h: 1.22667rem;
	--tw-hud-logo-h: 1.15rem;
	--tw-hud-bg: linear-gradient(180deg, #0e1a32 0%, #071018 55%, #050810 100%);
	--tw-hud-border: rgba(0, 207, 255, 0.32);
	--tw-hud-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%2300cfff' stroke-width='0.4' opacity='0.5'%3E%3Cpath d='M14 0l14 8v16l-14 8L0 24V8z'/%3E%3Cpath d='M14 25l14 8v16l-14 8L0 49V33z' transform='translate(0,-25)'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Preserve original bar height --- */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .navbar.main[data-v-214b87c9] {
	height: var(--tw-hud-bar-h) !important;
	min-height: var(--tw-hud-bar-h) !important;
	max-height: var(--tw-hud-bar-h) !important;
	overflow: hidden !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar-fixed[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .navbar-fixed[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar-fixed[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .register__container .navbar .navbar-fixed[data-v-12a80a3e],
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar-fixed[data-v-12a80a3e] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	height: var(--tw-hud-bar-h) !important;
	min-height: calc(env(safe-area-inset-top, 0px) + var(--tw-hud-bar-h)) !important;
	max-height: none !important;
	padding-top: env(safe-area-inset-top, 0px) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* --- Main bar panel (fills original area) --- */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content[data-v-12a80a3e],
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content[data-v-12a80a3e] {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	height: var(--tw-hud-bar-h) !important;
	min-height: var(--tw-hud-bar-h) !important;
	max-height: var(--tw-hud-bar-h) !important;
	padding-left: 2.05rem !important;
	padding-right: 2.05rem !important;
	border-radius: 0 0 0.1rem 0.1rem !important;
	overflow: hidden !important;
	color: #eaf6ff !important;
	background: var(--tw-hud-bg) !important;
	border: 1px solid rgba(0, 207, 255, 0.22) !important;
	border-top: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		inset 0 -1px 0 rgba(0, 207, 255, 0.08),
		0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Hex texture */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content[data-v-12a80a3e]::after,
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content[data-v-12a80a3e]::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: var(--tw-hud-hex);
	background-size: 0.38rem 0.66rem;
	z-index: 0;
}

/* Top inner highlight (subtle depth) */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content[data-v-12a80a3e]::before,
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content[data-v-12a80a3e]::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 220, 255, 0.35) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* --- Center: flush highlight panel + logo --- */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center[data-v-12a80a3e],
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content-center[data-v-12a80a3e] {
	position: absolute !important;
	left: 50% !important;
	top: 0 !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	max-width: 58% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	z-index: 2 !important;
	pointer-events: none;
	text-align: center;
	overflow: hidden !important;
}

/* No background box behind logo */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center[data-v-12a80a3e]::before,
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content-center[data-v-12a80a3e]::before {
	content: none !important;
	display: none !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center[data-v-12a80a3e]::after {
	content: none !important;
	display: none !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center .headLogo[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .navbar__content-center .headLogo,
body.tw-cl-spa-login-active #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content-center .headLogo[data-v-12a80a3e] {
	width: var(--tw-hud-logo-h) !important;
	height: var(--tw-hud-logo-h) !important;
	max-width: var(--tw-hud-logo-h) !important;
	max-height: var(--tw-hud-logo-h) !important;
	position: relative;
	z-index: 1;
	margin: 0 auto !important;
	flex-shrink: 0;
	background-image: url(/images/logo/double-removebg-preview.png) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	filter: none !important;
	pointer-events: auto;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center .navbar__content-title[data-v-12a80a3e] {
	position: relative;
	z-index: 1;
	color: #f0f6ff !important;
	font-weight: 600;
	pointer-events: auto;
}

/* --- Left: back arrow (original position) + divider --- */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-left[data-v-12a80a3e] {
	left: 0.32rem !important;
	z-index: 3 !important;
	padding-right: 0.24rem !important;
	height: 100% !important;
	top: 0 !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-left .van-icon[data-v-12a80a3e] {
	color: #f0f6ff !important;
	font-size: 0.48rem !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-left[data-v-12a80a3e]::after {
	content: "";
	position: absolute;
	right: 0;
	top: 24%;
	height: 52%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(0, 207, 255, 0.35), transparent);
	opacity: 0.85;
	pointer-events: none;
}

/* --- Right: language pill (inside bar) + divider --- */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-right[data-v-12a80a3e] {
	right: 0.32rem !important;
	z-index: 3 !important;
	display: flex !important;
	align-items: center !important;
	height: 0.64rem !important;
	max-height: 72% !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	padding: 0 0.12rem 0 0.1rem !important;
	border-radius: 999px !important;
	border: 1px solid rgba(0, 207, 255, 0.32) !important;
	background: rgba(6, 16, 32, 0.82) !important;
	box-shadow: inset 0 0 8px rgba(0, 180, 255, 0.05) !important;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-right[data-v-12a80a3e]::before {
	content: "";
	position: absolute;
	left: -0.2rem;
	top: 24%;
	height: 52%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(0, 207, 255, 0.35), transparent);
	opacity: 0.85;
	pointer-events: none;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-right .right[data-v-8610bd15] {
	display: flex !important;
	align-items: center !important;
	font-size: 0.34rem !important;
	font-weight: 600 !important;
	color: #f0f6ff !important;
	letter-spacing: 0.04em;
	line-height: 1;
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-right .right .img[data-v-8610bd15] {
	width: 0.48rem !important;
	height: 0.48rem !important;
	margin-right: 0.06rem !important;
	border: 1px solid rgba(0, 207, 255, 0.28);
}

body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-right .right .img img[data-v-8610bd15] {
	height: 0.48rem !important;
}

/* Text / icon colors */
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar-fixed .navbar__content-left .van-icon[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar-fixed .navbar__content-center[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .login__container .navbar .navbar__content[data-v-12a80a3e],
body #app:not(:has(.container[data-v-6cf5705a])) .register__container .navbar .navbar__content[data-v-12a80a3e] {
	color: #eaf6ff !important;
}

@media screen and (max-width: 500px) {
	body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar-fixed[data-v-12a80a3e] {
		width: 100% !important;
		left: 0 !important;
		transform: none !important;
		-webkit-transform: none !important;
	}

	body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content[data-v-12a80a3e] {
		padding-left: 1.9rem !important;
		padding-right: 1.9rem !important;
	}

	body #app:not(:has(.container[data-v-6cf5705a])) .navbar .navbar__content-center .headLogo[data-v-12a80a3e],
	body #app:not(:has(.container[data-v-6cf5705a])) .navbar__content-center .headLogo {
		width: 1.08rem !important;
		height: 1.08rem !important;
		max-width: 1.08rem !important;
		max-height: 1.08rem !important;
	}
}