/* Modern shells around entity pages whose statistical modules are still shared with HLstatsX. */

.hlx-clan-monogram {
	padding: 8px;
	color: var(--hlx-cyan);
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	overflow-wrap: anywhere;
}

.hlx-entity-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
	margin-bottom: 18px;
	padding: 5px;
	border: 1px solid var(--hlx-line);
	border-radius: 13px;
	background: rgba(21, 25, 30, 0.76);
}

.hlx-entity-tabs a {
	min-width: 0;
	padding: 10px 12px;
	border-radius: 9px;
	color: var(--hlx-muted);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	overflow-wrap: anywhere;
}

.hlx-entity-tabs a:hover,
.hlx-entity-tabs a:focus-visible {
	background: rgba(255, 255, 255, 0.045);
	color: var(--hlx-text);
}

.hlx-entity-tabs a.is-active {
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
}

.hlx-player-tabs {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hlx-player-archive-tabs {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hlx-player-hero-flag {
	display: inline-block;
	width: 16px;
	height: 11px;
	margin-right: 7px;
	object-fit: cover;
	vertical-align: 2px;
}

.hlx-detail-country-flag {
	width: 48px;
	height: 32px;
	padding: 7px;
	border: 1px solid var(--hlx-line);
	border-radius: 10px;
	background: var(--hlx-surface-soft);
	object-fit: contain;
}

.hlx-detail-content {
	overflow: hidden;
	margin-bottom: 18px;
	padding: 24px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-lg);
	background: var(--hlx-surface);
	box-shadow: var(--hlx-shadow);
}

.hlx-legacy-detail,
.hlx-legacy-detail * {
	box-sizing: border-box;
}

.hlx-legacy-detail .block,
.hlx-legacy-detail .subblock {
	max-width: 100%;
	border: 0;
	background: transparent;
	color: var(--hlx-muted);
}

.hlx-legacy-detail .block {
	margin: 0 0 22px;
	padding: 0;
}

.hlx-legacy-detail .subblock {
	padding: 0;
}

.hlx-legacy-detail .fHeading,
.hlx-legacy-detail h1.fHeading {
	color: #eef2f4 !important;
	font-size: 15px !important;
	font-weight: 750;
}

.hlx-legacy-detail .fHeading img {
	display: none;
}

.hlx-legacy-detail a {
	color: var(--hlx-cyan);
}

.hlx-legacy-detail .subsection_tabs {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px;
	width: 100% !important;
	height: auto !important;
	margin: 0 0 16px !important;
	padding: 5px !important;
	border: 1px solid var(--hlx-line);
	border-radius: 12px;
	background: rgba(21, 25, 30, 0.76) !important;
	list-style: none;
}

.hlx-legacy-detail .subsection_tabs li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hlx-legacy-detail .subsection_tabs a {
	display: block !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 8px;
	background: transparent !important;
	color: var(--hlx-muted) !important;
	font-size: 11px;
	font-weight: 750;
	text-align: center;
}

.hlx-legacy-detail .subsection_tabs a.active,
.hlx-legacy-detail .subsection_tabs a:hover,
.hlx-legacy-detail .subsection_tabs a:focus-visible {
	background: var(--hlx-cyan-soft) !important;
	color: var(--hlx-cyan) !important;
}

.hlx-legacy-detail form {
	max-width: 100%;
	color: var(--hlx-muted);
}

.hlx-legacy-detail .fTitle,
.hlx-legacy-detail h1.fTitle {
	color: #eef2f4 !important;
	font-size: 15px !important;
	line-height: 1.45;
}

.hlx-legacy-detail pre {
	max-width: 100%;
	padding: 14px;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	border: 1px solid var(--hlx-line);
	border-radius: 10px;
	background: var(--hlx-surface-soft);
	color: #c8d0d7;
}

.hlx-legacy-detail input[type="text"],
.hlx-legacy-detail input[type="number"],
.hlx-legacy-detail input[type="date"],
.hlx-legacy-detail select {
	max-width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--hlx-line);
	border-radius: 8px;
	background: var(--hlx-surface-soft);
	color: var(--hlx-text);
}

.hlx-legacy-detail input[type="submit"],
.hlx-legacy-detail button {
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
	font-weight: 750;
	cursor: pointer;
}

.hlx-search-content form table.data-table {
	width: min(100%, 680px) !important;
	margin-inline: auto !important;
}

.hlx-search-content form table.data-table td:first-child:not([colspan]) {
	width: 160px !important;
	font-weight: 700;
	white-space: normal !important;
}

.hlx-search-content form input[type="text"],
.hlx-search-content form select {
	width: 100% !important;
}

.hlx-legacy-detail table.data-table {
	width: 100% !important;
	max-width: 100%;
	margin: 10px 0 20px !important;
	border: 1px solid var(--hlx-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	background: var(--hlx-surface-soft);
	color: var(--hlx-muted);
	table-layout: auto;
}

.hlx-legacy-detail table.data-table td,
.hlx-legacy-detail table.data-table th {
	padding: 9px 10px !important;
	border: 0 !important;
	border-right: 1px solid var(--hlx-line) !important;
	border-bottom: 1px solid var(--hlx-line) !important;
	background: transparent !important;
	color: #aeb7bf !important;
	font-size: 11px !important;
	line-height: 1.4;
	white-space: normal !important;
	overflow-wrap: anywhere;
}

.hlx-legacy-detail table.data-table tr {
	background: var(--hlx-surface-soft) !important;
}

.hlx-legacy-detail table.data-table tr.data-table-head {
	background: rgba(255, 255, 255, 0.025) !important;
}

.hlx-legacy-detail table.data-table tr:last-child td {
	border-bottom: 0 !important;
}

.hlx-legacy-detail table.data-table td:last-child,
.hlx-legacy-detail table.data-table th:last-child {
	border-right: 0 !important;
}

.hlx-legacy-detail table.data-table tr.data-table-head td,
.hlx-legacy-detail table.data-table tr.data-table-head th {
	background: rgba(255, 255, 255, 0.025) !important;
	color: #7f8993 !important;
	font-size: 9px !important;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hlx-legacy-detail table.data-table strong,
.hlx-legacy-detail table.data-table b {
	color: #eef2f4;
}

.hlx-legacy-detail table.data-table img,
.hlx-legacy-detail object,
.hlx-legacy-detail embed,
.hlx-legacy-detail canvas,
.hlx-legacy-detail svg {
	max-width: 100%;
}

/* Preserve the natural proportions of small legacy UI assets. */
.hlx-legacy-detail img[src*="sort-ascending.gif"],
.hlx-legacy-detail img[src*="sort-descending.gif"] {
	width: 7px !important;
	height: 7px !important;
	object-fit: contain;
}

.hlx-legacy-detail img[src*="hlstatsimg/mmranks/"],
.hlx-legacy-detail img[src*="/mmranks/"] {
	width: 50px !important;
	height: 20px !important;
	object-fit: contain;
}

.hlx-player-detail-content img[src$="/history.gif"],
.hlx-player-detail-content img[src="hlstatsimg/history.gif"] {
	box-sizing: content-box;
	width: 16px !important;
	height: 16px !important;
	object-fit: contain;
}

/* The generic legacy button rule must not reduce gallery-card contrast. */
.hlx-model-viewer-content .model-viewer-card {
	border-color: rgba(77, 213, 255, 0.16);
	background: #142731;
	color: #d7e0e5;
}

.hlx-model-viewer-content .model-viewer-card-select {
	padding: 0;
	background: transparent;
	color: inherit;
}

.hlx-model-viewer-content .model-viewer-card-label {
	color: #d7e0e5;
	font-size: 11px;
	line-height: 1.35;
}

.hlx-model-viewer-content .model-card-owner {
	min-height: 24px;
	padding: 5px 8px;
	font-size: 11px;
	line-height: 1.3;
}

.hlx-model-viewer-content .model-card-owner a {
	color: #fff3b0;
}

.hlx-model-viewer-content .model-viewer-archive-label {
	color: #aeb7bf;
}

.hlx-legacy-detail meter {
	max-width: 100%;
}

.hlx-legacy-detail #clanmap {
	min-height: 300px;
	overflow: hidden;
	border: 1px solid var(--hlx-line);
	border-radius: 10px;
}

.hlx-legacy-detail:not(.has-clan-map) .subblock > div[style*="48.5"] {
	float: none !important;
	width: min(100%, 640px) !important;
	margin-inline: auto;
}

.hlx-detail-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
	padding: 15px 18px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface);
	color: var(--hlx-muted);
	font-size: 10px;
}

.hlx-detail-footer div {
	display: flex;
	gap: 10px 18px;
	flex-wrap: wrap;
}

.hlx-detail-footer a {
	color: var(--hlx-cyan);
	font-weight: 700;
}

@media (max-width: 1180px) {
	.hlx-legacy-detail [style*="float:left"],
	.hlx-legacy-detail [style*="float: left"],
	.hlx-legacy-detail [style*="float:right"],
	.hlx-legacy-detail [style*="float: right"] {
		float: none !important;
		width: 100% !important;
	}

	.hlx-legacy-detail table.hlx-responsive-data-table,
	.hlx-legacy-detail table.hlx-responsive-data-table > tbody {
		display: block;
		width: 100% !important;
		border: 0;
		background: transparent;
	}

	.hlx-legacy-detail table.hlx-responsive-data-table tr[data-hlx-table-header] {
		display: none;
	}

	.hlx-legacy-detail table.hlx-responsive-data-table tr[data-hlx-responsive-row] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1px;
		margin-bottom: 8px;
		overflow: hidden;
		border: 1px solid var(--hlx-line);
		border-radius: 9px;
		background: var(--hlx-line);
	}

	.hlx-legacy-detail table.hlx-responsive-data-table tr[data-hlx-responsive-row] > td {
		display: block;
		width: auto !important;
		min-width: 0;
		padding: 8px 9px !important;
		border: 0 !important;
		background: var(--hlx-surface-soft) !important;
		text-align: left !important;
	}

	.hlx-legacy-detail table.hlx-responsive-data-table tr[data-hlx-responsive-row] > td::before {
		display: block;
		margin-bottom: 4px;
		color: #69737d;
		content: attr(data-label);
		font-size: 8px;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.hlx-legacy-detail table.hlx-responsive-data-table tr:not([data-hlx-responsive-row]):not([data-hlx-table-header]) td {
		display: block;
		width: 100% !important;
		border: 0 !important;
	}
}

@media (max-width: 620px) {
	.hlx-entity-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hlx-detail-content {
		padding: 16px 12px;
	}

	.hlx-player-profile-table,
	.hlx-player-profile-table > tbody {
		display: block;
		width: 100% !important;
		border: 0 !important;
		background: transparent !important;
	}

	.hlx-player-profile-table tr {
		display: block;
		margin-bottom: 1px;
		border: 1px solid var(--hlx-line);
		border-radius: 7px;
		overflow: hidden;
	}

	.hlx-player-profile-table td,
	.hlx-player-profile-table th {
		display: block;
		width: 100% !important;
		border-right: 0 !important;
		overflow-wrap: break-word;
		word-break: normal;
	}

	.hlx-player-profile-table tr > td + td {
		padding-top: 2px !important;
	}

	.hlx-player-profile-table #player_avatar {
		padding: 8px 10px 14px !important;
		text-align: center !important;
	}

	.hlx-detail-footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.hlx-legacy-detail .subsection_tabs {
		grid-template-columns: 1fr;
	}

	.hlx-search-content form table.data-table,
	.hlx-search-content form table.data-table > tbody,
	.hlx-search-content form table.data-table tr,
	.hlx-search-content form table.data-table td {
		display: block;
		width: 100% !important;
	}

	.hlx-search-content form table.data-table tr {
		padding: 8px 0;
	}

	.hlx-search-content form table.data-table td {
		padding: 5px 8px !important;
		border: 0 !important;
	}
}