/*
 * Player detail page — the dossier for a single player.
 *
 * Loaded only when $hlx_modern_section === 'player-detail'. Everything here is
 * scoped to .hlx-pd-* or to .hlx-player-detail-content, so the shared legacy
 * rules in detail.css keep serving clan / weapon / action pages unchanged.
 */

.hlx-modern-section-player-detail {
	/* Player names routinely contain emoji; without the fallback they render as
	   tofu on systems whose default sans has no emoji coverage. */
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--hlx-pd-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--hlx-pd-gap: 22px;
	--hlx-pd-plate: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------------ hero */

.hlx-pd-hero {
	display: grid;
	gap: 20px;
	overflow: hidden;
	margin-bottom: 16px;
	padding: 24px 26px;
	position: relative;
	isolation: isolate;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-lg);
	background:
		radial-gradient(circle at 88% -10%, rgba(84, 202, 239, 0.12), transparent 24rem),
		var(--hlx-surface);
	box-shadow: var(--hlx-shadow);
}

/* Steam calls this the mini-profile background: it is the artwork shown behind
   the hover card, not the unrelated full profile-page wallpaper. */
.hlx-pd-hero__steam-bg {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
}

.hlx-pd-hero__steam-bg video,
.hlx-pd-hero__steam-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
}

.hlx-pd-hero.has-steam-background {
	border-color: rgba(84, 202, 239, 0.22);
	background: #0b1015;
}

.hlx-pd-hero.has-steam-background::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(7, 11, 15, 0.9) 0%, rgba(7, 11, 15, 0.64) 48%, rgba(7, 11, 15, 0.8) 100%),
		linear-gradient(0deg, rgba(7, 11, 15, 0.86) 0%, transparent 72%);
	content: "";
	pointer-events: none;
}

.hlx-pd-hero > :not(.hlx-pd-hero__steam-bg) {
	position: relative;
	z-index: 2;
}

.hlx-pd-hero.has-steam-background .hlx-pd-identity__body h1,
.hlx-pd-hero.has-steam-background .hlx-pd-figures strong,
.hlx-pd-hero.has-steam-background .hlx-pd-rank-rail__heading strong {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

.hlx-pd-hero.has-steam-background .hlx-pd-figures,
.hlx-pd-hero.has-steam-background .hlx-pd-rank-rail {
	background: rgba(9, 14, 19, 0.68);
	backdrop-filter: blur(10px) saturate(0.82);
}

.hlx-pd-hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	flex-wrap: wrap;
}

.hlx-pd-identity {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 20px;
}

/* The Steam avatar is the anchor of the page: real portrait, real frame when
   the player owns one. The monogram is the fallback, not the default. */
.hlx-pd-avatar {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 96px;
	height: 96px;
	margin: 0;
	position: relative;
}

.hlx-pd-avatar__base {
	display: block;
	width: 79px;
	height: 79px;
	border: 1px solid var(--hlx-line-strong);
	border-radius: 14px;
	background: var(--hlx-surface-soft);
	object-fit: cover;
}

.hlx-pd-avatar.has-frame .hlx-pd-avatar__base {
	border-color: transparent;
	border-radius: 12px;
}

/* Steam frames are authored with transparent padding around a 1:1 portrait. */
.hlx-pd-avatar__frame {
	position: absolute;
	inset: 0;
	width: 96px;
	height: 96px;
	pointer-events: none;
	object-fit: contain;
}

.hlx-pd-avatar--empty {
	border: 1px solid var(--hlx-line-strong);
	border-radius: 14px;
	background: var(--hlx-surface-soft);
	color: #6d7a85;
	font-size: 30px;
	font-weight: 800;
}

.hlx-pd-identity__body {
	min-width: 0;
}

.hlx-pd-identity__body h1 {
	margin: 4px 0 0;
	color: var(--hlx-text);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.hlx-pd-identity__meta {
	display: flex;
	gap: 6px 16px;
	flex-wrap: wrap;
	margin: 9px 0 0;
	color: var(--hlx-muted);
	font-size: 12px;
}

.hlx-pd-identity__meta > span {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}

.hlx-pd-identity__meta > span + span::before {
	margin-right: 10px;
	color: #4b545d;
	content: "·";
}

.hlx-pd-identity__meta a {
	color: var(--hlx-cyan);
	font-weight: 650;
}

.hlx-pd-figures {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: repeat(4, minmax(86px, 1fr));
	overflow: hidden;
	border: 1px solid var(--hlx-line-strong);
	border-radius: var(--hlx-radius-md);
	background: rgba(255, 255, 255, 0.018);
}

.hlx-pd-figures > div {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	border-right: 1px solid var(--hlx-line);
	text-align: right;
}

.hlx-pd-figures > div:last-child {
	border-right: 0;
}

.hlx-pd-figures strong {
	color: var(--hlx-cyan);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hlx-pd-figures span {
	color: var(--hlx-muted);
	font-size: 9px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hlx-pd-figures__rank strong {
	color: var(--hlx-text);
}

.hlx-pd-figures__rank.is-banned strong {
	color: var(--hlx-red);
	font-size: 15px;
}

.hlx-pd-figures__rank.is-hidden strong,
.hlx-pd-figures__rank.is-inactive strong,
.hlx-pd-figures__rank.is-unknown strong {
	color: var(--hlx-muted);
	font-size: 15px;
}

/* Signature element: progression through the kill-count ranks, visible on every
   tab. The numbers already existed — they were buried at the foot of "Общее". */
.hlx-pd-rank-rail {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
}

.hlx-pd-rank-rail__badge {
	flex: 0 0 auto;
	max-width: 76px;
	max-height: 44px;
	object-fit: contain;
}

.hlx-pd-rank-rail__body {
	display: grid;
	gap: 9px 20px;
	grid-template-areas:
		"heading heading"
		"track caption";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	min-width: 0;
	flex: 1 1 auto;
}

.hlx-pd-rank-rail__heading {
	display: flex;
	gap: 12px;
	grid-area: heading;
	align-items: baseline;
	flex-wrap: wrap;
}

.hlx-pd-rank-rail__heading strong {
	color: var(--hlx-text);
	font-size: 14px;
	font-weight: 750;
}

.hlx-pd-rank-rail__track {
	overflow: hidden;
	grid-area: track;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
}

.hlx-pd-rank-rail__track > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(84, 202, 239, 0.55), var(--hlx-cyan));
}

.hlx-pd-rank-rail__caption {
	margin: 0;
	grid-area: caption;
	color: var(--hlx-muted);
	font-size: 11px;
	text-align: right;
}

.hlx-pd-rank-rail__caption strong {
	color: #dfe6ea;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- section rhythm */

.hlx-player-detail-content {
	display: grid;
	gap: var(--hlx-pd-gap);
	padding: 24px 26px 26px;
}

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

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

.hlx-player-detail-content img,
.hlx-player-detail-content canvas,
.hlx-player-detail-content svg,
.hlx-player-detail-content meter {
	max-width: 100%;
}

/* Legacy spacers: the tabs are laid out with grid gap now. */
.hlx-player-detail-content > br,
.hlx-player-detail-content > div[style*="clear:both"],
.hlx-player-detail-content > div[style*="clear: both"] {
	display: none;
}

.hlx-pd-section-title {
	display: flex;
	gap: 6px 14px;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0;
	padding-left: 12px;
	position: relative;
	color: var(--hlx-text);
	font-size: 15px;
	font-weight: 750;
	letter-spacing: -0.01em;
}

.hlx-pd-section-title::before {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--hlx-cyan);
	content: "";
}

.hlx-pd-section-note {
	color: var(--hlx-muted);
	font-size: 11px;
	font-weight: 500;
}

/* Legacy printSectionTitle() output still appears in tabs that were not
   rewritten; align it with the new heading instead of leaving two styles. */
.hlx-player-detail-content .fHeading {
	display: block !important;
	margin: 0 !important;
	padding-left: 12px !important;
	position: relative;
	color: var(--hlx-text) !important;
	font-size: 15px !important;
	font-weight: 750;
}

.hlx-player-detail-content .fHeading::before {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--hlx-cyan);
	content: "";
}

/* ------------------------------------------------------------------ cards */

.hlx-pd-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: start;
}

.hlx-pd-grid--wide {
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.hlx-pd-card {
	display: grid;
	gap: 0;
	overflow: hidden;
	min-width: 0;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
}

.hlx-pd-card__head {
	display: flex;
	gap: 8px 14px;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hlx-line);
	background: rgba(255, 255, 255, 0.022);
	color: #8d97a1;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.hlx-pd-card__head b {
	color: var(--hlx-text);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.hlx-pd-card__body {
	padding: 14px 16px;
	color: var(--hlx-muted);
	font-size: 12px;
}

.hlx-pd-card__body--center {
	display: grid;
	gap: 12px;
	justify-items: center;
	text-align: center;
}

/* Definition rows: the profile and summary panels were 2-column tables whose
   cell widths were hard-coded in percentages. */
.hlx-pd-dl {
	display: grid;
	margin: 0;
	grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
}

.hlx-pd-dl > dt,
.hlx-pd-dl > dd {
	margin: 0;
	padding: 9px 16px;
	border-bottom: 1px solid var(--hlx-line);
	font-size: 12px;
	line-height: 1.45;
}

.hlx-pd-dl > dt {
	color: #7f8993;
	overflow-wrap: break-word;
}

.hlx-pd-dl > dd {
	color: #cdd5db;
	overflow-wrap: anywhere;
}

.hlx-pd-dl > dt:nth-last-of-type(1),
.hlx-pd-dl > dd:nth-last-of-type(1) {
	border-bottom: 0;
}

.hlx-pd-dl > dd strong,
.hlx-pd-dl > dd b {
	color: var(--hlx-text);
	font-weight: 700;
}

.hlx-pd-dl > dd a {
	color: var(--hlx-cyan);
}

.hlx-pd-dl > dd em {
	color: #6d7780;
	font-style: normal;
}

/* Reference value plus the "* last N days" recomputed value beside it. */
.hlx-pd-recent {
	margin-left: 6px;
	color: #7d8791;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.hlx-pd-dl > dd .hlx-pd-meter {
	margin-top: 5px;
}

.hlx-pd-num {
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- meters */

.hlx-pd-meter {
	display: block;
	overflow: hidden;
	width: 100%;
	min-width: 46px;
	height: 7px;
	border-radius: 999px;
	background: var(--hlx-meter-track);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.hlx-pd-meter > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hlx-cyan);
}

.hlx-pd-meter--low > span {
	background: var(--hlx-meter-low);
}

.hlx-pd-meter--mid > span {
	background: var(--hlx-meter-mid);
}

.hlx-pd-meter--high > span {
	background: var(--hlx-meter-high);
}

/* Progression, not performance — matched to the hero rank rail. */
.hlx-pd-meter--progress > span {
	background: linear-gradient(90deg, rgba(84, 202, 239, 0.55), var(--hlx-cyan));
}

/* Tables rendered by class_table.php still emit native <meter>, which paints an
   opaque light track in every engine. Repaint it for the dark surface. */
.hlx-player-detail-content meter {
	display: block;
	width: 100%;
	min-width: 42px;
	height: 7px;
	border: 0;
	border-radius: 999px;
	background: var(--hlx-meter-track);
	-webkit-appearance: none;
	appearance: none;
}

.hlx-player-detail-content meter::-webkit-meter-bar {
	border: 0;
	border-radius: 999px;
	background: var(--hlx-meter-track);
}

.hlx-player-detail-content meter::-webkit-meter-optimum-value {
	border-radius: 999px;
	background: var(--hlx-meter-high);
}

.hlx-player-detail-content meter::-webkit-meter-suboptimum-value {
	border-radius: 999px;
	background: var(--hlx-meter-mid);
}

.hlx-player-detail-content meter::-webkit-meter-even-less-good-value {
	border-radius: 999px;
	background: var(--hlx-meter-low);
}

.hlx-player-detail-content meter::-moz-meter-bar {
	border: 0;
	border-radius: 999px;
	background: var(--hlx-meter-high);
}

.hlx-player-detail-content meter:-moz-meter-sub-optimum::-moz-meter-bar {
	background: var(--hlx-meter-mid);
}

.hlx-player-detail-content meter:-moz-meter-optimum::-moz-meter-bar {
	background: var(--hlx-meter-high);
}

.hlx-player-detail-content meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	background: var(--hlx-meter-low);
}

/* ----------------------------------------------------------------- tables */

.hlx-pd-table {
	overflow: hidden;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
}

.hlx-pd-table__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-color: var(--hlx-line-strong) transparent;
	scrollbar-width: thin;
}

.hlx-player-detail-content table.data-table {
	width: 100% !important;
	margin: 0 !important;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	table-layout: auto;
}

/* `overflow-wrap: anywhere` (the shared legacy rule) lets a column shrink to a
   single character, which split every "1.49%" across two lines and doubled the
   height of long tables. `break-word` only breaks a word that cannot fit. */
.hlx-player-detail-content table.data-table td,
.hlx-player-detail-content table.data-table th {
	padding: 9px 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--hlx-line) !important;
	background: transparent !important;
	color: #b5bec6 !important;
	font-size: 12px !important;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	overflow-wrap: break-word !important;
	vertical-align: middle;
	word-break: normal !important;
}

.hlx-player-detail-content table.data-table tr {
	background: transparent !important;
}

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

/* Row 1 is the header, so even rows are the odd data rows. */
.hlx-player-detail-content table.data-table tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.014) !important;
}

.hlx-player-detail-content table.data-table tr:not(.data-table-head):hover td {
	background: rgba(84, 202, 239, 0.055) !important;
}

/* Header cells must break between words only. `overflow-wrap: anywhere` (the
   shared legacy rule) lets the intrinsic width collapse to one character, which
   is what split "МЕСТО" into "МЕСТ О". */
.hlx-player-detail-content table.data-table tr.data-table-head td,
.hlx-player-detail-content table.data-table tr.data-table-head th {
	padding: 11px 10px !important;
	border-bottom: 1px solid var(--hlx-line-strong) !important;
	background: rgba(255, 255, 255, 0.022) !important;
	color: #8d97a1 !important;
	font-size: 9px !important;
	font-weight: 800;
	hyphens: none;
	letter-spacing: 0.06em;
	overflow-wrap: normal !important;
	text-transform: uppercase;
	vertical-align: bottom;
	white-space: normal !important;
	word-break: normal !important;
}

/* The sort arrow follows the label inline, and in a narrow column it wrapped to
   a second line — which pushed that one label a row above its neighbours. Take
   it out of flow and reserve the space instead. */
.hlx-player-detail-content table.data-table tr.data-table-head td:has(img[src*="sort-"]) {
	padding-right: 22px !important;
	position: relative;
}

.hlx-player-detail-content table.data-table tr.data-table-head img[src*="sort-"] {
	position: absolute;
	right: 7px;
	bottom: 13px;
	width: 7px !important;
	height: 7px !important;
	padding: 0 !important;
	object-fit: contain;
}

.hlx-player-detail-content table.data-table tr.data-table-head a {
	color: inherit !important;
}

.hlx-player-detail-content table.data-table tr.data-table-head a:hover,
.hlx-player-detail-content table.data-table tr.data-table-head a:focus-visible {
	color: var(--hlx-cyan) !important;
}

.hlx-player-detail-content table.data-table strong,
.hlx-player-detail-content table.data-table b {
	color: var(--hlx-text);
}

.hlx-player-detail-content table.data-table a {
	color: var(--hlx-cyan);
}

/* Position column: a genuine sequence, so the number carries meaning. */
/* Specificity has to clear both the shared legacy cell rule in detail.css and
   the header rule above, which both force `white-space: normal !important`. */
.hlx-player-detail-content table.data-table tr td.hlx-pd-rank-col {
	width: 52px;
	color: #6d7780 !important;
	font-variant-numeric: tabular-nums;
	text-align: right !important;
	white-space: nowrap !important;
}

/* Weapon and role sprites are authored on light backgrounds; a plate keeps them
   from reading as a rendering fault. */
.hlx-player-detail-content table.data-table td img[src*="/weapons/"],
.hlx-player-detail-content table.data-table td img[src*="/roles/"] {
	padding: 3px 6px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.9);
	vertical-align: middle;
}

/* The HL2DM set uses transparent white silhouettes. Keep them compact in the
   legacy profile tables and give them enough contrast to stay legible. */
.hlx-player-detail-content table.data-table td img[src*="/games/hl2mp/weapons/"],
.hlx-pd-dl img[src*="/games/hl2mp/weapons/"] {
	box-sizing: border-box;
	width: 88px !important;
	height: 48px !important;
	padding: 4px 8px;
	border: 1px solid rgba(84, 202, 239, 0.15);
	border-radius: 7px;
	background: #11181d;
	object-fit: contain;
	vertical-align: middle;
}

.hlx-player-detail-content table.data-table td img.tableicon {
	vertical-align: middle;
}

.hlx-player-detail-content table.data-table img[src*="/mmranks/"] {
	width: 50px !important;
	height: 20px !important;
	object-fit: contain;
}

.hlx-pd-note-warning {
	color: #f0956b;
}

/* Archive sub-pages (events, sessions, awards, chat) end with a way back into
   the profile they were opened from. */
.hlx-pd-jumpback {
	margin: 0;
	color: var(--hlx-muted);
	font-size: 12px;
	text-align: right;
}

.hlx-pd-jumpback a {
	font-weight: 650;
}

.hlx-pd-empty {
	padding: 22px 16px;
	border: 1px dashed var(--hlx-line-strong);
	border-radius: var(--hlx-radius-md);
	color: var(--hlx-muted);
	font-size: 12px;
	text-align: center;
}

/* ------------------------------------------------------------- pagination */

.hlx-pd-pagination {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	color: var(--hlx-muted);
	font-size: 11px;
}

.hlx-pd-pagination b,
.hlx-pd-pagination a {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 0 9px;
	border: 1px solid var(--hlx-line);
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}

.hlx-pd-pagination a {
	color: var(--hlx-cyan);
}

.hlx-pd-pagination a:hover,
.hlx-pd-pagination a:focus-visible {
	border-color: var(--hlx-line-strong);
	background: rgba(255, 255, 255, 0.045);
}

.hlx-pd-pagination b {
	border-color: transparent;
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
}

.hlx-pd-pagination__label {
	margin-right: 4px;
}

/* ----------------------------------------------------------------- panels */

.hlx-pd-toolbar {
	display: flex;
	gap: 10px 14px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 12px 16px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
	color: var(--hlx-muted);
	font-size: 12px;
}

.hlx-pd-toolbar__group {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.hlx-player-detail-content select,
.hlx-player-detail-content input[type="text"],
.hlx-player-detail-content input[type="date"],
.hlx-player-detail-content input[type="number"] {
	padding: 7px 10px;
	border: 1px solid var(--hlx-line-strong);
	border-radius: 8px;
	background: var(--hlx-surface-raised);
	color: var(--hlx-text);
	font-family: inherit;
	font-size: 12px;
}

.hlx-player-detail-content input[type="button"],
.hlx-player-detail-content input[type="submit"],
.hlx-player-detail-content button {
	padding: 7px 14px !important;
	border: 1px solid var(--hlx-line-strong);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--hlx-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
}

.hlx-player-detail-content input[type="button"]:hover,
.hlx-player-detail-content input[type="submit"]:hover,
.hlx-player-detail-content button:hover {
	border-color: rgba(84, 202, 239, 0.4);
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
}

.hlx-player-detail-content :focus-visible {
	outline: 2px solid var(--hlx-cyan);
	outline-offset: 2px;
}

/* Quick links out of the profile: history, sessions, awards, chat, search. */
.hlx-pd-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hlx-pd-links a {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid var(--hlx-line);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.022);
	color: #cdd5db;
	font-size: 11px;
	font-weight: 650;
}

.hlx-pd-links a:hover,
.hlx-pd-links a:focus-visible {
	border-color: rgba(84, 202, 239, 0.34);
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
}

.hlx-pd-links img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.hlx-pd-links b {
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--hlx-text);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.hlx-pd-links a:hover b,
.hlx-pd-links a:focus-visible b {
	background: rgba(84, 202, 239, 0.2);
	color: var(--hlx-cyan);
}

/* Medals and global awards: sprite walls, so give them a real grid. */
.hlx-pd-medals {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.hlx-pd-medals img {
	max-height: 36px;
	padding: 5px 7px;
	border: 1px solid var(--hlx-line);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	object-fit: contain;
}

.hlx-pd-rank-history {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.hlx-pd-rank-history img {
	max-height: 28px;
	object-fit: contain;
}

.hlx-pd-insignia {
	max-width: 100%;
	max-height: 96px;
	object-fit: contain;
}

.hlx-pd-trend {
	max-width: 100%;
	border-radius: 10px;
}

.hlx-pd-signature textarea {
	width: 100%;
	min-height: 62px;
	padding: 9px 11px;
	border: 1px solid var(--hlx-line-strong);
	border-radius: 9px;
	background: var(--hlx-surface-raised);
	color: #cdd5db;
	font-family: var(--hlx-pd-mono);
	font-size: 11px;
	resize: vertical;
}

.hlx-pd-signature__formats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.hlx-pd-signature__formats button {
	font-size: 11px !important;
}

.hlx-pd-signature img {
	max-width: 100%;
	border-radius: 8px;
}

/* ------------------------------------------------------- 3D model section */

.hlx-player-detail-content .model-viewer-profile-block {
	padding: 0;
}

.hlx-player-detail-content .model-viewer-layout {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	align-items: stretch;
}

.hlx-player-detail-content .model-viewer-panel {
	max-width: none;
	padding: 16px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
	color: var(--hlx-muted);
}

.hlx-player-detail-content .model-viewer-title {
	margin: 0 0 6px;
	color: var(--hlx-text);
	font-size: 13px;
	font-weight: 750;
}

.hlx-player-detail-content .model-viewer-description {
	color: var(--hlx-muted);
	font-size: 11px;
}

.hlx-player-detail-content .model-viewer-status {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hlx-muted);
	font-size: 11px;
}

.hlx-player-detail-content .model-viewer-profile-meta {
	margin: 12px 0;
	padding: 10px 12px;
	border: 1px solid var(--hlx-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.022);
}

.hlx-player-detail-content .model-viewer-profile-label {
	color: #7f8993;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hlx-player-detail-content .model-viewer-profile-value {
	margin-top: 4px;
	color: var(--hlx-text);
	font-size: 13px;
	font-weight: 700;
}

.hlx-player-detail-content .model-viewer-link {
	display: inline-flex;
	padding: 8px 12px;
	border: 1px solid rgba(84, 202, 239, 0.32);
	border-radius: 9px;
	background: var(--hlx-cyan-soft);
	color: var(--hlx-cyan);
	font-size: 11px;
	font-weight: 700;
}

/* A definite height stops the canvas / stage feedback loop: the stage sized
   itself from the canvas while the canvas sized itself from the stage. */
.hlx-player-detail-content .model-viewer-stage {
	flex: none;
	min-height: 0;
	height: clamp(300px, 42vh, 460px);
	padding: 12px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background:
		radial-gradient(circle at 30% 15%, rgba(84, 202, 239, 0.11), transparent 60%),
		var(--hlx-surface-soft);
}

.hlx-player-detail-content .model-viewer-canvas {
	min-height: 0;
	height: 100%;
}

/* The model loader is the same component the Tabs object injects on
   «Победы на картах» — it just sits as an overlay on the stage rather than
   replacing a panel, so only the placement differs. */
.hlx-player-detail-content .model-viewer-loading.hlx-tab-loader {
	position: absolute;
	inset: 0;
	z-index: 2;
	min-height: 0;
	padding: 24px;
	border-radius: var(--hlx-radius-md);
	background:
		radial-gradient(circle at 50% 50%, rgba(84, 202, 239, 0.07), transparent 18rem),
		repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(255, 255, 255, 0.012) 80px),
		#12171c;
	color: var(--hlx-text);
	cursor: progress;
}

.hlx-player-detail-content .model-viewer-loading.is-hidden {
	display: none;
}

.hlx-player-detail-content .model-viewer-profile-placeholder {
	display: grid;
	gap: 6px;
	place-content: center;
	height: 100%;
	color: var(--hlx-muted);
	font-size: 12px;
	text-align: center;
}

.hlx-player-detail-content .model-viewer-profile-placeholder-title {
	color: var(--hlx-text);
	font-size: 14px;
	font-weight: 700;
}

/* -------------------------------------------------------- hitbox subpanel */

.hlx-pd-hint {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--hlx-line);
	border-radius: var(--hlx-radius-md);
	background: var(--hlx-surface-soft);
	color: var(--hlx-muted);
	font-size: 12px;
}

.hlx-pd-hitbox-layout {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
	align-items: start;
}

.hlx-pd-hitbox-table,
.hlx-pd-hitbox-figure {
	min-width: 0;
}

.hlx-pd-hitbox-figure {
	align-self: start;
}

.hlx-pd-weapon-filter label {
	color: #cdd5db;
	font-weight: 650;
}

.hlx-pd-weapon-filter input[type="date"] {
	color-scheme: dark;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
	.hlx-pd-grid--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.hlx-player-detail-content .model-viewer-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.hlx-pd-hitbox-layout {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (max-width: 900px) {
	.hlx-pd-hero__top {
		align-items: flex-start;
		flex-direction: column;
	}

	.hlx-pd-figures {
		width: 100%;
	}
}

@media (max-width: 620px) {
	.hlx-pd-hero {
		padding: 18px 16px;
	}

	.hlx-pd-hero__steam-bg video,
	.hlx-pd-hero__steam-bg img {
		object-position: 58% 50%;
	}

	.hlx-pd-identity {
		gap: 14px;
	}

	.hlx-pd-avatar {
		width: 72px;
		height: 72px;
	}

	.hlx-pd-avatar__base {
		width: 59px;
		height: 59px;
	}

	.hlx-pd-avatar__frame {
		width: 72px;
		height: 72px;
	}

	.hlx-pd-identity__body h1 {
		font-size: 21px;
	}

	.hlx-pd-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hlx-pd-figures > div:nth-child(2n) {
		border-right: 0;
	}

	.hlx-pd-figures > div:nth-child(-n + 2) {
		border-bottom: 1px solid var(--hlx-line);
	}

	.hlx-pd-rank-rail {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.hlx-pd-rank-rail__body {
		width: 100%;
		grid-template-areas:
			"heading"
			"track"
			"caption";
		grid-template-columns: minmax(0, 1fr);
	}

	.hlx-pd-rank-rail__caption {
		text-align: left;
	}

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

	.hlx-pd-dl {
		grid-template-columns: minmax(0, 1fr);
	}

	.hlx-pd-dl > dt {
		padding-bottom: 0;
		border-bottom: 0;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.hlx-pd-dl > dd {
		padding-top: 4px;
	}
}

/* Steam frames are animated PNGs, which CSS cannot pause — so drop the
   decoration and keep the portrait. */
@media (prefers-reduced-motion: reduce) {
	.hlx-pd-avatar__frame {
		display: none;
	}

	.hlx-pd-hero__steam-bg--video {
		display: none;
	}
}

/* ------------------------------------------------- table → card conversion
 *
 * legacy-detail.js marks every wide table with .hlx-responsive-data-table; the
 * media queries below decide when that markup actually turns into cards.
 * Tables of seven columns or more (class_table.php adds .is-wide) switch on
 * tablets, everything else waits for the phone breakpoint — a four-column table
 * reads better as a table than as four stacked label/value pairs.
 */

@media (max-width: 1024px) {
	.hlx-pd-table.is-wide:has(table.hlx-responsive-data-table) {
		overflow: visible;
		border: 0;
		background: transparent;
	}

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

	.hlx-pd-table.is-wide table.hlx-responsive-data-table tr[data-hlx-table-header] {
		display: none;
	}

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

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

	.hlx-pd-table.is-wide table.hlx-responsive-data-table tr[data-hlx-responsive-row]:hover > td {
		background: var(--hlx-surface-soft) !important;
	}

	.hlx-pd-table.is-wide 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;
	}

	/* The position cell leads the card, so it spans both columns. */
	.hlx-pd-table.is-wide table.hlx-responsive-data-table tr[data-hlx-responsive-row] > td.hlx-pd-rank-col {
		width: auto !important;
		grid-column: 1 / -1;
		background: rgba(255, 255, 255, 0.03) !important;
		text-align: left !important;
	}
}

@media (max-width: 620px) {
	.hlx-pd-table:has(table.hlx-responsive-data-table) {
		overflow: visible;
		border: 0;
		background: transparent;
	}

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

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

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

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

	.hlx-pd-table table.hlx-responsive-data-table tr[data-hlx-responsive-row]:hover > td {
		background: var(--hlx-surface-soft) !important;
	}

	.hlx-pd-table 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-pd-table table.hlx-responsive-data-table tr[data-hlx-responsive-row] > td.hlx-pd-rank-col {
		width: auto !important;
		grid-column: 1 / -1;
		background: rgba(255, 255, 255, 0.03) !important;
		text-align: left !important;
	}
}