/* Extracted verbatim from the inline <style> blocks that used to live in
   header.php. Served as a cacheable file instead of ~44 KB of CSS re-sent
   inside the markup of every single page view.

   themePath() calls became paths relative to this directory, the same form
   the other css/main/*.css files already use.

   LOAD ORDER IS LOAD-BEARING. header-base.css must come before
   languageselector/responsiveheader/accountui/accountdelete/serverrates,
   and header-shell.css must come after them -- that is the order the three
   inline blocks sat in. See the <link> comments in header.php. */

		html,
		body {
			overflow-x: hidden;
		}

		/*	'FuturaEugenia', 'Informb' and 'Inforoman' are deliberately NOT loaded.
			Their .ttf files exist and are valid, but they render small and dated,
			so the font stacks below are left to fall through to Arial Black /
			sans-serif instead. To bring one back, re-add its @font-face here:

				fonts/FuturaEugeniaCTT.ttf  -> 'FuturaEugenia'
				fonts/INFORMB.ttf           -> 'Informb'
				fonts/INFROMAN.ttf          -> 'Inforoman'	(currently unused)	*/

		@font-face {
			font-family: 'FutureCondensed';
			src: url('../../fonts/FutureCondensedMedium.ttf') format('truetype');
			font-display: swap;
		}

		@font-face {
			font-family: 'Grobold';
			src: url('../../fonts/GROBOLD.ttf') format('truetype');
			font-display: swap;
		}

		/* Reset & Base */
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html {
			height: 100%;
			background: #dceef8;
		}

		body {
			font-family: 'Informb', 'Arial Black', sans-serif;
			background: url('../../assets/background-trivalro.png') no-repeat center top fixed !important;
			background-size: cover !important;
			min-height: 100vh !important;
			display: flex !important;
			flex-direction: column !important;
		}

		/* TOP NAVBAR */
		#top-navbar {
			background: #f0f2f5;
			border-bottom: 1px solid #d8dde4;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			transform: scale(1.10);
			z-index: 100;
			height: 46px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 14px rgba(120, 170, 210, 0.18);
		}

		#top-navbar .nav-inner {
			width: 100%;
			max-width: 1200px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30px;
			height: 100%;
		}

		.nav-left,
		.nav-right {
			display: flex;
			align-items: center;
			gap: 6px;
			flex: 1;
		}

		.nav-right {
			justify-content: flex-end;
		}

		/* Players Online PILL (horizontal) */
		.po-nopill {
			display: inline-flex;
			align-items: center;
			gap: 3px;
			background: linear-gradient(180deg, #ecf0f500 0%rgba(255, 255, 255, 0)ff 100%);
			border: 1px solid #d3dae300;
			border-radius: 999px;
			padding: 3px 14px 3px 5px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
			margin-right: 4px;
		}

		.po-pill {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 7px;
			background: linear-gradient(180deg, #dfe1e2 0%, #d1dadf 100%);
			border: 1px solid #d3dae3;
			border-radius: 999px;
			padding-left: 6px;
			padding-right: 6px;
			padding-top: 4px;
			min-width: 60px;
			padding-bottom: 4px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
		}

		.po-pill .po-dot {
			width: 24px;
			height: 24px;
			object-fit: contain;
			flex-shrink: 0;
		}

		.po-nopill .po-label {
			color: #5d90ce;
			font-family: 'FuturaEugenia', sans-serif;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: 0.8px;
			white-space: nowrap;
		}

		.po-pill .po-count {
			color: #284151;
			font-family: 'FuturaEugenia', sans-serif;
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			letter-spacing: -0.3px;
		}

		/* Server status cluster */
		.nav-label {
			color: #5d90ce;
			font-size: 9px;
			font-weight: 300;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			margin-right: 8px;
			white-space: nowrap;
		}

		.nav-sep {
			color: #c8cacdbc;
			margin: 0 5px;
			font-size: 10px;
			line-height: 0.6;
		}

		.server-item {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.server-item a {
			color: #3a8fc4;
			text-decoration: none;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.4px;
			transition: color 0.15s;
		}

		.server-item a:hover {
			color: #1a6fa8;
			text-decoration: underline;
		}

		.poring-img {
			width: 24px;
			height: 24px;
			object-fit: contain;
			flex-shrink: 0;
			vertical-align: middle;
		}

		.server-time {
			color: #5d90ce;
			font-size: 9px;
			font-weight: 500;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.server-time .time-val {
			color: #3a8fc4;
			font-size: 11px;
			letter-spacing: 0.8px;
			font-weight: 400;
		}

		/* Login button (before language dropdown) */
		.btn-login {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			background: linear-gradient(180deg, #40b5ef 0%, #28abf7 100%);
			color: #fff;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.6px;
			text-transform: uppercase;
			text-decoration: none;
			padding: 6px 16px;
			border-radius: 999px;
			border: 1px solid #2aa0e0;
			margin-left: 18px;
			transition: filter 0.15s;
			white-space: nowrap;
		}

		.btn-login:hover {
			filter: brightness(1.06);
			color: #fff;
		}

		/* Language dropdown (remove this block if styled elsewhere) */
		.lang-dd {
			position: relative;
			margin-left: 14px;
		}

		.lang-dd summary {
			display: flex;
			align-items: center;
			gap: 5px;
			list-style: none;
			cursor: pointer;
			color: #3a8fc4;
			font-size: 11px;
			font-weight: 700;
			padding: 3px 6px;
			border-radius: 4px;
		}

		.lang-dd summary::-webkit-details-marker {
			display: none;
		}

		.lang-dd summary:hover {
			background: #e6ebf1;
		}

		.lang-flag {
			width: 18px;
			height: auto;
			border-radius: 2px;
			display: block;
		}

		.lang-caret {
			font-size: 8px;
			color: #8aa2bd;
		}

		.lang-list {
			position: absolute;
			right: 0;
			top: calc(100% + 6px);
			list-style: none;
			background: #fff;
			border: 1px solid #d8dde4;
			border-radius: 6px;
			box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
			min-width: 150px;
			padding: 4px 0;
			z-index: 200;
		}

		.lang-list li a {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 7px 12px;
			text-decoration: none;
			color: #4a5566;
			font-size: 12px;
		}

		.lang-list li a:hover,
		.lang-list li a.active {
			background: #eef4fa;
			color: #1a6fa8;
		}

		/* SUB-HEADER - slightly transparent */
		#sub-header {
			position: fixed;
			top: 48px;
			left: 0;
			width: 100%;
			height: 28px;
			background: rgba(217, 230, 244, 0.71);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
			border-bottom: 1px solid rgba(226, 231, 238, 0);
			box-shadow: 0 2px 8px rgba(120, 170, 210, 0.10);
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#sub-header .sub-inner {
			width: 100%;
			max-width: 1200px;
			height: 100%;
			display: flex;
			align-items: stretch;
			justify-content: center;
			gap: 26px;
			padding: 0 30px;
			overflow: visible;
		}

		.sub-dd {
			position: relative;
			height: 100%;
		}

		.sub-dd>summary {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			height: 100%;
			padding: 0 19px;
			font-family: 'FuturaEugenia', sans-serif;
			color: #5a6675;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			cursor: pointer;
			list-style: none;
			white-space: nowrap;
			border-bottom: 2px solid transparent;
			transition: color 0.15s, border-color 0.15s;
		}

		.sub-dd>summary::-webkit-details-marker {
			display: none;
		}

		.sub-dd>summary:hover {
			color: #1a6fa8;
		}

		.sub-dd[open]>summary {
			color: #1a6fa8;
			border-bottom-color: #28abf7;
		}

		.sub-caret {
			font-size: 12px;
			color: #7f8c99;
			padding-top: 4px;
			transition: transform 0.16s ease;
		}

		.sub-dd[open] .sub-caret {
			transform: rotate(180deg);
		}

		/* panel open / close animation */
		@keyframes subOpen {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes subClose {
			from {
				opacity: 1;
				transform: translateY(0);
			}

			to {
				opacity: 0;
				transform: translateY(-10px);
			}
		}

		/* each item fades/slides in one by one, top → bottom */
		@keyframes subItem {
			from {
				opacity: 0;
				transform: translateY(-8px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.sub-list {
			position: absolute;
			left: 0;
			top: 100%;
			margin-top: 14px;
			list-style: none;
			background: #fff;
			border: 1px solid #e3e9f0;
			border-radius: 8px;
			box-shadow: 0 14px 34px rgba(40, 110, 170, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
			min-width: 120px;
			padding: 6px 0;
			z-index: 200;
			animation: subOpen 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		}

		.account-sub-dd .sub-list {
			min-width: 210px;
		}

		.account-sub-dd .sub-list li a {
			white-space: nowrap;
		}

		.sub-list::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: -14px;
			height: 14px;
			background: transparent;
		}

		.sub-list.closing {
			animation: subClose 0.14s ease forwards;
		}

		/* items visible by default (no-JS fallback); stagger only when JS adds .animate */
		.sub-list li {
			opacity: 1;
		}

		.sub-list.animate li {
			opacity: 0;
			animation: subItem 0.24s ease forwards;
		}

		.sub-list.animate li:nth-child(1) {
			animation-delay: 0.05s;
		}

		.sub-list.animate li:nth-child(2) {
			animation-delay: 0.10s;
		}

		.sub-list.animate li:nth-child(3) {
			animation-delay: 0.15s;
		}

		.sub-list.animate li:nth-child(4) {
			animation-delay: 0.20s;
		}

		.sub-list.animate li:nth-child(5) {
			animation-delay: 0.25s;
		}

		.sub-list.animate li:nth-child(6) {
			animation-delay: 0.30s;
		}

		.sub-list.animate li:nth-child(7) {
			animation-delay: 0.35s;
		}

		.sub-list.animate li:nth-child(8) {
			animation-delay: 0.40s;
		}

		.sub-list.animate li:nth-child(9) {
			animation-delay: 0.45s;
		}

		.sub-list.animate li:nth-child(10) {
			animation-delay: 0.50s;
		}

		.sub-list.animate li:nth-child(11) {
			animation-delay: 0.55s;
		}

		.sub-list.animate li:nth-child(12) {
			animation-delay: 0.60s;
		}

		/* keep items put while closing - don't re-stagger */
		.sub-list.closing li {
			animation: none;
			opacity: 1;
		}

		.sub-list li a {
			display: block;
			padding: 6px 12px;
			font-family: 'FuturaEugenia', sans-serif;
			color: #4a5566;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 0.4px;
			text-decoration: none;
			text-transform: none;
			transition: background 0.12s, color 0.12s;
		}

		.sub-list li a:hover {
			background: #eef4fa;
			color: #1a6fa8;
		}



		/* HERO HEADER BANNER */
		#site-header {
			background: linear-gradient(180deg, #4aaee000 0%, #6dc6ec00 25%, #90d5f368 55%, #b9e6f800 80%, #d8f0fb00 100%);
			width: 100%;
			transform: translateY(10px) !important;
			min-height: 600px;
			position: relative;
			overflow: hidden;
		}

		#site-header::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 50px;
			background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0));
			pointer-events: none;
		}

		#site-header .hero-img {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 100%;
			max-height: 30000px;
			width: auto;
			object-fit: contain;
			object-position: left bottom;
			-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
			mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
		}

		#site-header::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120px;
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			-webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
			mask-image: linear-gradient(180deg, transparent, #000 70%);
			pointer-events: none;
			z-index: 2;
		}

		#site-header .site-logo-wrap {
			position: absolute;
			right: 10%;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
		}

		.logo-title {
			font-family: 'Arial Rounded MT Bold', 'Arial Black', 'Trebuchet MS', sans-serif;
			font-size: 64px;
			font-weight: 900;
			color: #fff;
			letter-spacing: 1px;
			line-height: 1;
			text-shadow: 0 0 0 #fff, 2px 2px 0 #9ed4ef, 4px 4px 0 #6ab8e0, 6px 6px 0 rgba(80, 160, 210, 0.35), 0 8px 20px rgba(30, 100, 160, 0.3);
		}

		.logo-slogan {
			color: rgba(255, 255, 255, 0.82);
			font-size: 14px;
			font-style: italic;
			letter-spacing: 0.8px;
			margin-top: 6px;
			text-shadow: 0 1px 6px rgba(0, 60, 130, 0.35);
		}

		#site-header .header-actions {
			position: absolute;
			bottom: 20px;
			right: 30px;
			display: flex;
			gap: 10px;
		}

		.btn-hero {
			background: rgba(255, 255, 255, 0.22);
			border: 2px solid rgba(255, 255, 255, 0.75);
			color: #fff;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			padding: 8px 22px;
			border-radius: 5px;
			text-decoration: none;
			backdrop-filter: blur(4px);
			transition: background 0.2s, border-color 0.2s;
			cursor: pointer;
			white-space: nowrap;
		}

		.btn-hero:hover {
			background: rgba(255, 255, 255, 0.4);
			border-color: #fff;
			color: #fff;
		}

		.btn-hero.primary {
			background: rgba(13, 122, 181, 0.72);
			border-color: #6dd0f5;
		}

		.btn-hero.primary:hover {
			background: rgba(13, 122, 181, 1);
		}

		/* MAIN LAYOUT */
		#main-wrapper {
			flex: 1 0 auto !important;
			min-height: 500px;
			width: 100%;
			max-width: 1800px;
			margin: 60px auto;
			display: flex;
			gap: 22px;
			padding: 0 30px;
		}


		#sidebar-col {
			width: 200px;
			flex-shrink: 0;
		}

		#content-col {
			flex: 1;
			padding: 0 16px;
			min-width: 0;
		}

		#content-box {
			background: #f5f5f500;
			border-radius: 5px;
			overflow: visible;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0);
		}

		#content-box .content-inner {
			padding: 20px 22px;
		}

		p.message {
			background: #dff0d8;
			border: 1px solid #bce8b0;
			color: #3a7d2b;
			padding: 8px 12px;
			border-radius: 3px;
			margin-bottom: 10px;
		}

		p.notice {
			background: #fff3cd;
			border: 1px solid #ffc107;
			color: #856404;
			padding: 8px 12px;
			border-radius: 3px;
			margin-bottom: 10px;
		}

		/* Responsive */
		@media (max-width: 960px) {
			#main-wrapper {
				flex-direction: column;
				padding: 0 24px;
			}

			#sidebar-col {
				width: 100%;
			}

			.nav-label {
				display: none;
			}
		}

		@media (max-width: 640px) {
			#site-header {
				min-height: 180px;
			}

			.logo-title {
				font-size: 38px;
			}

			.server-time {
				display: none;
			}

			.nav-right .nav-sep {
				display: none;
			}

			.po-pill .po-count {
				font-size: 15px;
			}

			.sub-dd>summary {
				padding: 0 11px;
			}
		}


		/* HERO inner flex layout */
		#site-header .hero-inner {
			position: relative;
			max-width: 1200px;
			margin: 0 auto;
			min-height: 300px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 40px;
			padding: 0 40px;
		}

		#site-header .hero-img {
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(-50vw + 50%);
			width: 100vw;
			height: 100%;
			object-fit: cover;
			object-position: center;
			opacity: 0.2;
			pointer-events: none;
			transform: none !important;
		}

		#site-header .hero-badge {
			position: absolute;
			top: 150px;
			left: 50%;
			width: 110px;
			height: auto;
			z-index: 3;
			pointer-events: none;
			filter: drop-shadow(0 8px 16px rgba(30, 100, 160, 0.4));
			animation: badgeFloat 3s ease-in-out infinite;
		}

		@keyframes badgeFloat {

			0%,
			100% {
				transform: translateX(-500%) translateY(0) rotate(-4deg);
			}

			50% {
				transform: translateX(-500%) translateY(-14px) rotate(-4deg);
			}
		}

		@media (max-width: 640px) {
			#site-header .hero-badge {
				width: 70px;
				top: 60px;
				left: 16px;
			}
		}

		/* Promo slogan block (left side) */
		.hero-promo {
			flex: 1;
			transform: translateY(100px) !important;
			max-width: 560px;
		}

		.hero-promo .promo-img {
			display: block;
			margin-left: 260px;
			max-width: 90%;
			height: auto;
		}

		.hero-promo .promo-img-2 {
			margin-top: 14px;
		}

		.hero-promo .promo-kicker {
			display: inline-block;
			font-family: 'FuturaEugenia', sans-serif;
			color: #1a6fa8;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 1.4px;
			text-transform: uppercase;
			background: rgba(255, 255, 255, 0.55);
			padding: 4px 12px;
			border-radius: 999px;
			margin-bottom: 14px;
		}

		.hero-promo .promo-title {
			font-family: 'Arial Rounded MT Bold', 'Arial Black', 'Trebuchet MS', sans-serif;
			font-size: 46px;
			font-weight: 900;
			color: #fff;
			line-height: 1.05;
			letter-spacing: 0.5px;
			text-shadow: 2px 2px 0 #6ab8e0, 4px 4px 0 rgba(80, 160, 210, 0.35), 0 8px 20px rgba(30, 100, 160, 0.3);
		}

		.hero-promo .promo-title span {
			color: #ffe16b;
			text-shadow: 2px 2px 0 #c79a1e, 0 8px 20px rgba(120, 90, 0, 0.3);
		}

		.hero-promo .promo-sub {
			color: #ffffff;
			font-size: 15px;
			font-weight: 500;
			line-height: 1.45;
			margin-top: 14px;
			text-shadow: 0 1px 6px rgba(0, 60, 130, 0.45);
		}

		/* LOGIN CONTAINER (right side) */
		.hero-login {
			width: 300px;
			flex-shrink: 0;
			position: relative;
			z-index: 30;
			background: rgba(252, 254, 255, 0.84);
			backdrop-filter: blur(6px);
			transform: translateY(160px) !important;
			-webkit-backdrop-filter: blur(6px);
			border: 1px solid rgba(255, 255, 255, 0.9);
			border-radius: 12px;
			box-shadow: 0 14px 34px rgba(40, 110, 170, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08);
			padding: 22px 22px 20px;
		}

		.hero-login.hero-login-register {
			width: 420px;
			transform: translateX(45px) translateY(120px) !important;
		}

		.hero-login.hero-login-reset {
			width: 340px;
			transform: translateX(45px) translateY(150px) !important;
		}


		.hero-login .login-input::placeholder {
			color: #9aa7b5;
			font-weight: 500;
		}

		.hero-login .login-input:focus {
			border-color: #40b5ef;
			box-shadow: 0 0 0 3px rgba(64, 181, 239, 0.18);
		}

		/* Password wrapper + eye toggle */
		.hero-login .pw-wrap {
			position: relative;
		}

		.hero-login .pw-wrap .login-input {
			padding-right: 42px;
		}

		.hero-login .pw-toggle {
			position: absolute;
			top: 50%;
			right: 6px;
			transform: translateY(-50%);
			background: none;
			border: none;
			padding: 6px;
			cursor: pointer;
			color: #8aa2bd;
			display: flex;
			align-items: center;
			transition: color 0.15s;
		}

		.hero-login .pw-toggle:hover {
			color: #3a8fc4;
		}

		/* Divider */
		.hero-login .login-divider {
			display: flex;
			align-items: center;
			text-align: center;
			margin: 16px 0 12px;
			color: #aab6c2;
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.hero-login .login-divider::before,
		.hero-login .login-divider::after {
			content: '';
			flex: 1;
			height: 1px;
			background: #e0e6ec;
		}

		.hero-login .login-divider span {
			padding: 0 12px;
		}

		/* Logo space at top of card */
		.hero-login .login-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 14px;
		}

		.hero-login .login-logo img {
			max-height: 104px;
			max-width: 100%;
			transform: scale(1.5) translateY(-23px);
			width: auto;
			object-fit: contain;
			animation: loginLogoFloat 2.8s ease-in-out infinite;
		}

		@keyframes loginLogoFloat {

			0%,
			100% {
				transform: scale(1.5) translateY(-23px);
			}

			50% {
				transform: scale(1.5) translateY(-26px);
			}
		}

		.nav-left .nav-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
		}

		.nav-left .nav-logo img {
			max-height: 38px;
			max-width: 100%;
			margin-left: 50px;
			transform: translateY(4px) !important;
			width: auto;
			object-fit: contain;
		}

		.hero-login .login-head {
			letter-spacing: 2px;
			color: #2991d7;
			font-size: 13px;
			font-family: 'Grobold', 'Arial Black', sans-serif;
			font-weight: 300;
			text-transform: uppercase;
			text-align: center;
		}

		.hero-login .field {
			margin-bottom: 12px;
		}

		.hero-login .hero-form-grid {
			display: grid;
			gap: 10px 12px;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hero-login .hero-form-grid .field {
			margin-bottom: 0;
		}

		.hero-login label {
			display: block;
			color: #5a6675;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			margin-bottom: 4px;
		}

		.hero-login input[type="text"],
		.hero-login input[type="password"],
		.hero-login input[type="email"] {
			width: 100%;
			border: 2px solid #9eb6d8 !important;
			border-radius: 6px;
			padding: 9px 11px;
			font-size: 13px;
			color: #284151;
			background: #ecf1f9 !important;
			outline: none;
			transition: border-color 0.15s, box-shadow 0.15s;
		}

		.hero-login input[type="text"]:focus,
		.hero-login input[type="password"]:focus,
		.hero-login input[type="email"]:focus {
			border-color: #2cb7fc !important;
			box-shadow: 0 0 0 3px rgba(64, 181, 239, 0) !important;
		}

		.hero-login select {
			width: 100%;
			border: 2px solid #9eb6d8 !important;
			border-radius: 6px;
			padding: 9px 11px;
			font-size: 13px;
			color: #284151;
			background: #ecf1f9 !important;
			outline: none;
		}

		.hero-login .hero-date-field {
			background: rgba(236, 241, 249, 0.68);
			border: 2px solid #9eb6d8;
			border-radius: 6px;
			margin-top: 10px;
			padding: 8px 10px;
		}

		.hero-login .hero-date-field label {
			margin-bottom: 6px;
		}

		.hero-login .hero-date-field select,
		.hero-login .hero-date-field input {
			display: inline-block;
			margin: 2px 3px 2px 0;
			padding: 6px 8px;
			width: auto;
		}

		.hero-login .hero-gender-field {
			align-items: center;
			background: rgba(236, 241, 249, 0.68);
			border: 2px solid #9eb6d8;
			border-radius: 6px;
			display: flex;
			gap: 12px;
			min-height: 43px;
			padding: 8px 10px;
		}

		.hero-login .hero-gender-field label {
			align-items: center;
			cursor: pointer;
			display: inline-flex;
			gap: 5px;
			margin: 0;
		}

		/* The group caption, not a control label -- it must not look clickable or
		   sit at the same weight as the two choices beside it. */
		.hero-login .hero-gender-caption {
			color: #284151;
			flex: 0 0 auto;
			font-size: 12px;
			font-weight: 700;
		}

		/* .login-input styling makes every input in the card full-width and 40px
		   tall; a radio inherited that and rendered as a giant box on its own line. */
		.hero-login .hero-gender-field input[type="radio"] {
			height: auto;
			margin: 0;
			padding: 0;
			width: auto;
		}

		.hero-login .hero-form-error {
			background: rgba(255, 232, 232, 0.95);
			border: 1px solid #e88c8c;
			border-radius: 6px;
			color: #a42626;
			font-size: 11px;
			font-weight: 700;
			line-height: 1.4;
			margin: 8px 0 10px;
			padding: 8px 10px;
			text-align: center;
		}

		.hero-login .hero-form-note {
			color: #536c82;
			font-size: 12px;
			line-height: 1.45;
			margin: 8px 0 12px;
			text-align: center;
		}

		/* ══ "ACCOUNT MUST BE VERIFIED" PANEL ══
		   Replaces the register form after a successful registration. */
		.hero-login .hero-verify-panel {
			text-align: center;
		}

		.hero-login .hero-verify-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 52px;
			margin: 2px auto 12px;
			border-radius: 50%;
			background: rgba(47, 143, 216, 0.14);
			color: #1f6ba6;
		}

		.hero-login .hero-verify-icon svg {
			width: 26px;
			height: 26px;
		}

		.hero-login .hero-verify-lead {
			background: rgba(226, 243, 255, 0.95);
			border: 1px solid #8ec4e8;
			border-radius: 8px;
			color: #17547f;
			font-size: 12px;
			font-weight: 600;
			line-height: 1.5;
			margin: 0 0 10px;
			padding: 10px 12px;
		}

		/* The send failed: the account still cannot be played, but the action the
		   player must take is different, so it must not look like the happy path. */
		.hero-login .hero-verify-lead--warn {
			background: rgba(255, 244, 226, 0.95);
			border-color: #e6b769;
			color: #8a5a00;
		}

		.hero-login .hero-verify-body {
			color: #40596e;
			font-size: 12px;
			line-height: 1.55;
			margin: 0 0 10px;
			/* Long addresses would otherwise widen the whole hero card. */
			overflow-wrap: anywhere;
		}

		.hero-login .hero-verify-small {
			color: #6b8092;
			font-size: 11px;
			line-height: 1.5;
			margin: 0 0 14px;
		}

		.hero-login .hero-verify-actions {
			margin-bottom: 4px;
		}

		/* .btn-submit is styled for <button>; as an <a> it needs the block box back. */
		.hero-login .hero-verify-btn {
			display: block;
			box-sizing: border-box;
			text-align: center;
			text-decoration: none;
		}

		.hero-login .security-code img {
			max-width: 100%;
			border-radius: 6px;
			margin-bottom: 6px;
		}

		.hero-login .captcha-refresh {
			font-size: 10px;
			margin-top: 4px;
		}

		.hero-login .captcha-refresh a {
			color: #3a8fc4;
			text-decoration: none;
		}

		.hero-login .btn-submit {
			width: 100%;
			background: linear-gradient(180deg, #5cc3f5 0%, #34a8ef 48%, #1e90d8 100%);
			color: #fff;
			border: 1px solid #2a93cf;
			border-bottom: 4px solid #1573b0;
			border-radius: 20px;
			padding: 16px 0 13px;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 2px;
			text-transform: uppercase;
			font-family: 'Grobold', 'Arial Black', sans-serif;
			cursor: pointer;
			margin-top: 6px;
			text-shadow: 0 1px 2px rgba(0, 60, 110, 0.55);
			box-shadow:
				inset 0 2px 1px rgba(255, 255, 255, 0.55),
				inset 0 -3px 6px rgba(0, 70, 120, 0.35),
				0 4px 10px rgba(40, 130, 200, 0.4);
			transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
		}

		.hero-login .btn-submit:hover {
			filter: brightness(1.05);
		}

		.hero-login .btn-submit:active {
			transform: translateY(3px);
			border-bottom-width: 1px;
			box-shadow:
				inset 0 2px 4px rgba(0, 70, 120, 0.45),
				0 1px 3px rgba(40, 130, 200, 0.4);
		}

		.hero-login .login-links {
			display: flex;
			gap: 16px;
			justify-content: center;
			font-weight: 600;
			margin-top: 6px;
		}

		.hero-login .login-links a {
			color: #346aa3;
			font-size: 11px;
			text-decoration: none;
		}

		.hero-login .login-links a:hover {
			color: #1a6fa8;
			text-decoration: underline;
		}

		/* Logged-in card */
		.hero-login .acct-welcome {
			text-align: center;
			color: #284151;
			font-size: 13px;
			margin-top: 6px;
			margin-bottom: 12px;
		}

		.hero-login .acct-welcome strong {
			color: #1a6fa8;
		}

		/* Red logout button */
		.hero-login .logout-wrap {
			padding-top: 2px;
			border-top: 1px solid #e0e6ec;
		}

		.char-circles {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 10px;
			margin: 6px 0 14px;
		}

		.char-circle {
			position: relative;
			width: 76px;
			height: 76px;
			border-radius: 50%;
			overflow: hidden;
			background: linear-gradient(180deg, #eaf5fc, #d6ebf7);
			border: 3px solid #fff;
			box-shadow: 0 3px 10px rgba(40, 110, 170, 0.28);
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}

		.char-circle img {
			/*
			 * Scale to the circle's height rather than being cropped to a square.
			 * Head sprites are taller than they are wide (59x64), so object-fit:
			 * cover sliced the sides off; leaving them at natural size instead
			 * left the head floating in a much larger circle. Driving height and
			 * letting width follow keeps the aspect ratio, fills the circle, and
			 * flex centring does the rest.
			 */
			height: 100%;
			width: auto;
			max-width: 100%;
			display: block;
			image-rendering: pixelated;
		}

		.char-circle .char-initial {
			display: none;
			font-family: 'Grobold', 'Arial Black', sans-serif;
			font-size: 28px;
			line-height: 1;
			color: #1a6fa8;
		}

		.char-circle.no-img .char-initial {
			display: block;
		}

		.hero-login .logout-link {
			display: block;
			text-align: center;
			font-family: 'Grobold', 'Arial Black', sans-serif;
			background: linear-gradient(180deg, #ff7b73 0%, #f75c54 48%, #e83f37 100%);
			color: #fff;
			border: 1px solid #e0463e;
			border-bottom: 4px solid #b8302a;
			border-radius: 20px;
			padding: 16px 0 13px;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-decoration: none;
			text-shadow: 0 1px 2px rgba(110, 20, 15, 0.55);
			box-shadow:
				inset 0 2px 1px rgba(255, 255, 255, 0.5),
				inset 0 -3px 6px rgba(130, 25, 20, 0.35),
				0 4px 10px rgba(200, 60, 55, 0.4);
			transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
		}

		.hero-login .logout-link:hover {
			color: #fff;
			text-decoration: none;
			filter: brightness(1.05);
		}

		.hero-login .logout-link:active {
			transform: translateY(3px);
			border-bottom-width: 1px;
			box-shadow:
				inset 0 2px 4px rgba(130, 25, 20, 0.45),
				0 1px 3px rgba(200, 60, 55, 0.4);
		}

		.hero-login .logout-link:hover {
			color: #fff;
			text-decoration: none;
			filter: brightness(1.06);
		}

		@media (max-width: 960px) {
			#site-header .hero-inner {
				flex-direction: column;
				justify-content: center;
				gap: 24px;
				padding: 30px 24px;
			}

			.hero-promo {
				text-align: center;
			}

			.hero-login {
				width: 100%;
				max-width: 340px;
			}

			.hero-login.hero-login-register,
			.hero-login.hero-login-reset {
				max-width: 420px;
				width: min(92vw, 420px);
				transform: translateY(95px) !important;
			}
		}

		@media (max-width: 640px) {
			.hero-login .hero-form-grid {
				grid-template-columns: 1fr;
			}

			.hero-login.hero-login-register,
			.hero-login.hero-login-reset {
				max-width: 360px;
			}

			.hero-promo .promo-title {
				font-size: 32px;
			}
		}
	.hero-dl-btns {
    display: flex;
    position: relative;
    z-index: 20;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    transform: translateY(-108px) translateX(-125px) scale(1.08) !important;
    gap: 10px;
    width: 100%;
    padding: 0 30px;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.btn-dl {
    display: inline-flex;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Grobold', 'Arial Black', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 26px 11px;
    border-radius: 8px;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.08s;
    cursor: pointer;
    flex: 0 0 auto;                /* ← don't stretch, hug content */
    text-align: center;
    border: none;
}

.btn-dl:hover  { filter: brightness(1.10); transform: translateY(-2px); }
.btn-dl:active { filter: brightness(0.95); transform: translateY(0px); }
.btn-dl-yellow {
    background: linear-gradient(180deg, #ffe84d 0%, #f5c800 50%, #d4a800 100%);
    color: #5a3a00;
    text-shadow: 0 1px 2px rgba(120, 80, 0, 0.35);
    border-bottom: 4px solid #b08a00;
    box-shadow:
        inset 0 2px 1px rgba(255,255,255,.5),
        inset 0 -3px 6px rgba(150,100,0,.25),
        0 4px 14px rgba(200,160,0,.4);
}

.btn-dl-yellow:hover {
    background: linear-gradient(180deg, #ffef70 0%, #f8d200 50%, #dbb000 100%);
    color: #5a3a00;
}

.btn-dl-blue {
    background: linear-gradient(180deg, #5cc3f5 0%, #2fa8ef 50%, #1a88d8 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,60,110,.55);
    border-bottom: 4px solid #1573b0;
    box-shadow:
        inset 0 2px 1px rgba(255,255,255,.4),
        inset 0 -3px 6px rgba(0,70,120,.3),
        0 4px 14px rgba(30,130,210,.4);
}

.btn-dl-blue:hover {
    background: linear-gradient(180deg, #74ccf7 0%, #3db5f5 50%, #2298e8 100%);
    color: #fff;
}
.btn-dl-primary {
    background: linear-gradient(180deg, #5cc3f5 0%, #2fa8ef 50%, #1a88d8 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,60,110,.55);
    box-shadow:
        inset 0 2px 1px rgba(255,255,255,.4),
        inset 0 -3px 6px rgba(0,70,120,.3),
        0 4px 14px rgba(30,130,210,.4);
}

.btn-dl-secondary {
    background: rgba(30, 100, 160, 0.55);
    color: #e8f4ff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 4px rgba(0,60,130,.5);
    box-shadow: 0 4px 14px rgba(0,60,130,.25);
}

.btn-dl-secondary:hover {
    background: rgba(30, 100, 160, 0.80);
    color: #fff;
}

@media (max-width: 640px) {
    .hero-dl-btns { gap: 8px; padding: 0 16px; }
    .btn-dl { font-size: 9px; padding: 11px 10px 9px; letter-spacing: 0.8px; }
}

/* Register page only: keep the download buttons clear of the account card.
 *
 * The card is taller and wider in register mode than in login mode, so its
 * left edge reaches further into the hero and "Play Mobile" ends up tucked
 * underneath it.
 *
 * Extra RIGHT padding rather than a bigger translateX. The row is
 * justify-content: center inside a width:100% box, so padding-right shrinks the
 * content box and re-centres the group: the right edge moves left by half the
 * padding added, and the left edge by the same amount. A larger negative
 * translateX would move the whole group left at full value instead, pushing
 * "Download Full PC Client" toward the edge of the hero for no benefit.
 *
 * 160px = the existing 30px gutter plus 130px, which pulls the right edge in by
 * about 65px -- enough to clear the card and leave a visible gap at the widths
 * where the two actually meet. Tuned against the live layout.
 *
 * Desktop only: below this the hero stacks and the card is no longer beside the
 * buttons, so reserving a third of the row for it would just squash them. */
@media (min-width: 1024px) {
    body.account-action-create .hero-dl-btns {
        padding-right: 160px;
    }
}