:root {
	--fx-ui-accent: #57dba1;
	--fx-ui-accent-rgb: 87, 219, 161;
	--fx-ui-panel-alpha: .83;
	--fx-ui-backdrop-alpha: .85;
}

.scrollable {
	overflow-y: auto;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(111, 151, 179, .72) rgba(5, 15, 26, .68);
}

::-webkit-scrollbar-track {
	border-radius: 8px;
	background: rgba(5, 15, 26, .68);
}

::-webkit-scrollbar-thumb {
	border: 2px solid rgba(5, 15, 26, .68);
	border-radius: 8px;
	background: rgba(111, 151, 179, .72);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(141, 202, 231, .9);
}

::-webkit-scrollbar-corner {
	background: rgba(5, 15, 26, .68);
}

.window {
	position        : fixed;
	background-color: rgba(0, 0, 0, 0.7);
	width           : 90%;
	top             : 0;
	color           : white;
	font-family     : 'Trebuchet MS', 'Franklin Gothic Medium', Arial, sans-serif;
	margin          : auto;
	margin-top      : 20px;
	right           : 0;
	left            : 0;
	padding         : 15px;
	box-sizing      : border-box;
	border-color    : white;
	border-style    : solid;
	border-width    : 2px;
	border-width    : calc(0.15 * (1vw + 1vh));
	font-size       : 20px;
	font-size       : calc(13px + ((0.5 * (1.1vw - 0.1vh)) + 0.14rem));
	max-height      : 90%;
	transition      : 0.2s;
	z-index         : 10;
}

.fx-update-prompt {
	position: fixed;
	top: 16px;
	right: 16px;
	left: auto;
	width: min(540px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	margin: 0;
	padding: 0;
	border: 1px solid rgba(110, 190, 231, .28);
	border-radius: 15px;
	background: linear-gradient(145deg, #10283b, #091725 78%);
	color: #eaf5fc;
	font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	box-shadow: 0 18px 58px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .05);
	z-index: 2147483647;
}

.fx-update-prompt::backdrop { background: rgba(2, 8, 15, .24); }
.fx-update-prompt[open] { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.fx-update-prompt-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(81, 223, 161, .28); border-radius: 12px; background: rgba(29, 148, 107, .16); color: #62e6ae; font-size: 1.65em; }
.fx-update-prompt-content { min-width: 0; }
.fx-update-prompt-eyebrow { color: #76dcb4; font-size: .68em; font-weight: 800; letter-spacing: .14em; }
.fx-update-prompt h2 { margin: 3px 0 4px; color: #f1f8fd; font-size: 1.2em; line-height: 1.25; }
.fx-update-prompt p { margin: 0; color: #a9bdcd; font-size: .86em; }
.fx-update-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.fx-update-prompt-actions button { min-height: 34px; padding: 7px 12px; border: 1px solid rgba(144, 183, 212, .2); border-radius: 8px; color: #dfeef7; font: inherit; font-size: .8em; font-weight: 700; cursor: pointer; }
.fx-update-prompt-dismiss { background: rgba(24, 42, 59, .8); }
.fx-update-prompt-apply { border-color: rgba(65, 223, 150, .34) !important; background: linear-gradient(105deg, #177a58, #159a69); color: #effff7 !important; }
.fx-update-prompt-actions button:hover { filter: brightness(1.15); }

.fx-changelog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: min(620px, calc(100vw - 32px));
	max-width: none;
	max-height: min(80vh, 720px);
	box-sizing: border-box;
	overflow: hidden;
	margin: 0;
	padding: 24px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(110, 190, 231, .28);
	border-radius: 18px;
	background: linear-gradient(145deg, #10283b, #091725 78%);
	color: #eaf5fc;
	font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	box-shadow: 0 24px 72px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 255, 255, .05);
	z-index: 2147483647;
}
.fx-changelog::backdrop { background: rgba(2, 8, 15, .68); backdrop-filter: blur(4px); }
.fx-changelog[open] { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: start; gap: 16px; }
.fx-changelog-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(81, 223, 161, .28); border-radius: 14px; background: rgba(29, 148, 107, .16); color: #76dcb4; font-size: 1.6em; font-weight: 800; }
.fx-changelog-content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; max-height: 100%; overflow: hidden; }
.fx-changelog-heading { min-width: 0; }
.fx-changelog-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 0; outline: none; }
.fx-changelog-eyebrow { color: #76dcb4; font-size: .68em; font-weight: 800; letter-spacing: .14em; }
.fx-changelog h2 { margin: 4px 0 2px; color: #f1f8fd; font-size: 1.3em; line-height: 1.25; }
.fx-changelog-date { margin: 0; color: #8ea8ba; font-size: .84em; }
.fx-changelog ul { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.fx-changelog li { position: relative; padding: 10px 12px 10px 30px; border: 1px solid rgba(144, 183, 212, .12); border-radius: 10px; background: rgba(24, 42, 59, .55); color: #d6e6f0; }
.fx-changelog li::before { position: absolute; top: 10px; left: 12px; color: #62e6ae; content: "✓"; font-weight: 800; }
.fx-changelog-history { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(144, 183, 212, .16); }
.fx-changelog-history h3 { margin: 0 0 10px; color: #9bb5c7; font-size: .72em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fx-changelog-history details { margin-top: 7px; border: 1px solid rgba(144, 183, 212, .12); border-radius: 9px; background: rgba(24, 42, 59, .36); }
.fx-changelog-history summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #d6e6f0; font-weight: 700; cursor: pointer; }
.fx-changelog-history summary span { color: #8ea8ba; font-size: .82em; font-weight: 500; }
.fx-changelog-history details ul { margin: 0; padding: 0 10px 10px; }
.fx-changelog-history details li { padding-block: 8px; }
.fx-changelog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.fx-changelog-actions button { min-height: 36px; padding: 7px 14px; border: 1px solid rgba(65, 223, 150, .34); border-radius: 8px; background: linear-gradient(105deg, #177a58, #159a69); color: #effff7; font: inherit; font-weight: 700; cursor: pointer; }
.fx-changelog-actions button:hover { filter: brightness(1.15); }
@media (max-width: 520px) { .fx-changelog { padding: 18px; } .fx-changelog[open] { grid-template-columns: 38px minmax(0,1fr); gap: 12px; } .fx-changelog-mark { width: 38px; height: 38px; } }

.fx-custom-lobby-join-overlay { position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center; box-sizing: border-box; padding: 20px; background: rgba(2,8,15,.66); backdrop-filter: blur(5px); }
.fx-custom-lobby-join-dialog { width: min(520px, 100%); box-sizing: border-box; padding: clamp(20px,4vw,30px); border: 1px solid rgba(110,190,231,.28); border-radius: 19px; background: linear-gradient(145deg,#10283b,#091725 78%); color: #eaf5fc; font: 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; box-shadow: 0 24px 72px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.05); }
.fx-custom-lobby-join-header { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(144,183,212,.15); }
.fx-custom-lobby-join-header > div { min-width: 0; flex: 1; }
.fx-custom-lobby-join-header small { color: #76dcb4; font-size: .68em; font-weight: 800; letter-spacing: .14em; }
.fx-custom-lobby-join-header h2 { margin: 4px 0; color: #f1f8fd; font-size: 1.45em; line-height: 1.2; }
.fx-custom-lobby-join-header p { margin: 0; color: #a9bdcd; font-size: .88em; }
.fx-custom-lobby-join-header > button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(144,183,212,.18); border-radius: 9px; background: rgba(4,15,24,.55); color: #d9eaf4; font: inherit; font-size: 1.35em; cursor: pointer; }
.fx-custom-lobby-join-form { margin-top: 20px; }
.fx-custom-lobby-join-form label,.fx-custom-lobby-create-row label { display: block; margin-bottom: 7px; color: #9bb5c7; font-size: .78em; font-weight: 750; }
.fx-custom-lobby-code-row { display: flex; gap: 9px; }
.fx-custom-lobby-code-row input,.fx-custom-lobby-create-row select { min-width: 0; min-height: 42px; box-sizing: border-box; padding: 9px 12px; border: 1px solid rgba(144,183,212,.2); border-radius: 9px; outline: 0; background: rgba(4,15,24,.72); color: #eaf5fc; font: inherit; }
.fx-custom-lobby-code-row input { flex: 1; text-transform: uppercase; letter-spacing: .12em; }
.fx-custom-lobby-code-row input:focus,.fx-custom-lobby-create-row select:focus { border-color: rgba(98,230,174,.65); box-shadow: 0 0 0 3px rgba(98,230,174,.12); }
.fx-custom-lobby-join-dialog button { min-height: 38px; padding: 8px 13px; border: 1px solid rgba(144,183,212,.2); border-radius: 9px; color: #dfeef7; font: inherit; font-weight: 700; cursor: pointer; }
.fx-custom-lobby-join-dialog button:disabled { opacity: .45; cursor: not-allowed; }
.fx-custom-lobby-join-dialog .is-primary,.fx-custom-lobby-code-row button { border-color: rgba(65,223,150,.34); background: linear-gradient(105deg,#177a58,#159a69); color: #effff7; }
.fx-custom-lobby-join-dialog .is-quiet { background: rgba(24,42,59,.8); }
.fx-custom-lobby-join-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #7893a7; font-size: .7em; font-weight: 800; letter-spacing: .14em; }
.fx-custom-lobby-join-divider::before,.fx-custom-lobby-join-divider::after { height: 1px; flex: 1; background: rgba(144,183,212,.15); content: ""; }
.fx-custom-lobby-create-row select { width: 100%; }
.fx-custom-lobby-join-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.fx-custom-lobby-join-unavailable { margin: 18px 0 0; padding: 13px; border: 1px solid rgba(255,190,100,.24); border-radius: 9px; background: rgba(112,70,23,.18); color: #ffdda8; }

body:has(#fx-custom-lobby-view) .window {
	z-index: 10000;
}

body:has(#fx-custom-lobby-view) :is(dialog, [role="dialog"], [class*="captcha" i], [id*="captcha" i], [class*="challenge" i], [id*="challenge" i], [class*="verify" i], [id*="verify" i]) {
	z-index: 10000 !important;
}

body:has(#fx-custom-lobby-view) #fx-propaganda-overlay {
	position: fixed !important;
	z-index: 2147483647 !important;
	isolation: isolate;
}

.fx-lobby-propaganda-dialog {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: min(620px, calc(100vw - 32px));
	max-width: none;
	max-height: min(78vh, 720px);
	margin: auto;
	padding: 0;
	border: 1px solid rgba(107, 205, 172, .48);
	border-radius: 16px;
	background: var(--fx-propaganda-card, linear-gradient(150deg, #102b3b, #081723 76%));
	color: #edf8ff;
	font: inherit;
	box-shadow: 0 24px 90px rgba(0, 0, 0, .78), 0 0 36px rgba(47, 221, 155, .16);
	z-index: 2147483647;
}
.fx-lobby-propaganda-dialog[open] { display: flex; flex-direction: column; }
.fx-lobby-propaganda-dialog::backdrop { background: var(--fx-propaganda-backdrop, rgba(1, 5, 12, .78)); backdrop-filter: blur(5px); }
.fx-lobby-propaganda-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(143, 184, 209, .18); background: var(--fx-propaganda-header, #102b3b); color: var(--fx-propaganda-title, #7de4b6); font-size: .78em; font-weight: 850; letter-spacing: .14em; }
.fx-lobby-propaganda-dialog header button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(143, 184, 209, .2); border-radius: 8px; background: rgba(4, 15, 24, .62); color: var(--fx-propaganda-button-text, #d9eaf4); font: inherit; font-size: 1.3em; cursor: pointer; }
.fx-lobby-propaganda-dialog p { overflow: auto; flex: 1 1 auto; min-height: 60px; margin: 0; padding: 22px; background: var(--fx-propaganda-card, #081723); color: var(--fx-propaganda-text, #f0f7fb); font-size: clamp(16px, 2vw, 21px); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-lobby-propaganda-dialog footer { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid rgba(143, 184, 212, .18); background: var(--fx-propaganda-footer, #102b3b); }
.fx-lobby-propaganda-dialog footer button { min-width: 100px; min-height: 38px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 9px; background: var(--fx-propaganda-button, #177a58); color: var(--fx-propaganda-button-text, #f0fff7); font: inherit; font-weight: 750; cursor: pointer; }

.window button,
.window input,
.window select {
	background-color: rgba(0, 0, 0, 0.7);
	color           : white;
	font-size       : 20px;
	font-size       : 0.9em;
	padding         : 0.4rem;
	transition      : 0.2s;
	border          : 1px solid #fff;
	border-radius   : 5px;
	margin          : 5px;
}

.window :disabled, .window .disabled {
	pointer-events: none;
	opacity: 0.65;
}

.window.settings button,
.window.settings input,
.window.settings select {
	margin: 0px;
}

.settings-section-title {
	font-size     : 1.2em;
	margin        : 1.2em 0 0.6em;
	padding-bottom: 0.2em;
	border-bottom : 1px solid rgba(255, 255, 255, 0.5);
}
.settings .scrollable > :first-child > .settings-section-title {
	margin-top: 0;
}
.window.settings small {
	opacity: 0.75;
}

.fx-settings-overlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: grid;
	place-items: center;
	padding: clamp(10px, 2vw, 28px);
	box-sizing: border-box;
	background: rgba(2, 8, 16, .72);
	backdrop-filter: blur(9px);
}

.fx-settings-dialog {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: min(1100px, 100%);
	max-height: min(92vh, 980px);
	min-height: min(520px, calc(100vh - 24px));
	color: #edf6ff;
	border: 1px solid rgba(113, 192, 255, .38);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(7, 17, 30, .99), rgba(10, 27, 44, .98));
	box-shadow: 0 24px 80px rgba(0, 0, 0, .58);
	overflow: hidden;
	font: 14px/1.45 system-ui, sans-serif;
}

.fx-settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px 22px;
	border-bottom: 1px solid rgba(113, 192, 255, .2);
	background: rgba(255, 255, 255, .025);
}

.fx-settings-header small {
	color: #77c7ff;
	font-size: .72em;
	letter-spacing: .14em;
}

.fx-settings-header h1 {
	margin: 2px 0 0;
	font-size: 1.45em;
}
.fx-settings-kind-switch { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 3px; border: 1px solid rgba(144,183,212,.16); border-radius: 10px; background: rgba(4,12,23,.44); }
.fx-settings-kind-switch button { min-height: 32px; padding: 6px 11px; border: 0; border-radius: 7px; background: transparent; color: #9bb2c7; font: inherit; font-size: .78em; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fx-settings-kind-switch button:hover { color: #eaf5fc; background: rgba(144,183,212,.08); }
.fx-settings-kind-switch button.is-active { background: linear-gradient(105deg, rgba(23,122,88,.72), rgba(21,154,105,.72)); color: #effff7; }

.fx-settings-close {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(186, 217, 241, .25);
	border-radius: 9px;
	background: rgba(255, 255, 255, .06);
	color: #edf6ff;
	font-size: 24px;
	cursor: pointer;
}

.fx-settings-body {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
}

.fx-settings-tabs {
	display: flex;
	gap: 5px;
	padding: 8px 18px 0;
	overflow-x: auto;
	border-bottom: 1px solid rgba(113, 192, 255, .2);
	background: rgba(255, 255, 255, .02);
}

.fx-settings-tabs button {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: #a9bfd1;
	font: inherit;
	cursor: pointer;
}

.fx-settings-tabs button:hover { background: rgba(255, 255, 255, .04); color: #eaf6ff; }
.fx-settings-tabs button.is-active { border-color: rgba(113, 192, 255, .28); background: rgba(30, 78, 110, .35); color: #eaf6ff; box-shadow: inset 0 -2px #53bdf5; }

.fx-settings-content {
	min-height: 0;
	overflow: auto;
	padding: 10px 22px 18px;
}

.fx-settings-category-panel > label,
.fx-settings-subsection-panel > label {
	display: block;
	margin: 4px 0 7px;
	padding: 9px 12px;
	border: 1px solid rgba(113, 192, 255, .15);
	border-radius: 10px;
	background: rgba(255, 255, 255, .035);
}

.fx-settings-category-panel > br,
.fx-settings-subsection-panel > br { display: none; }

.fx-settings-category-panel > label:has(> button),
.fx-settings-subsection-panel > label:has(> button) {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 4px 0 7px;
	padding: 0;
	border: 0;
	background: transparent;
}

.fx-settings-category-panel > label:has(> button) > br,
.fx-settings-subsection-panel > label:has(> button) > br { display: none; }

.fx-settings-category-panel { min-width: 0; }
.fx-settings-category-panel[hidden] { display: none !important; }

.fx-settings-category-panel.has-subsections {
	display: grid;
	grid-template-columns: minmax(118px, 19%) minmax(0, 1fr);
	align-items: start;
	column-gap: 18px;
}

.fx-settings-category-preamble { grid-column: 1 / -1; min-width: 0; }

.fx-settings-subtabs {
	position: sticky;
	top: 10px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	max-height: calc(100vh - 260px);
	padding: 4px 10px 4px 0;
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid rgba(113, 192, 255, .16);
}

.fx-settings-subtabs .fx-settings-subtab {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 37px;
	padding: 7px 9px;
	border: 1px solid rgba(113, 192, 255, .14);
	border-radius: 7px;
	background: rgba(17, 39, 59, .55);
	color: #9fb7ca;
	font: inherit;
	font-size: .8em;
	text-align: left;
	white-space: normal;
	line-height: 1.25;
	cursor: pointer;
	transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.fx-settings-subtabs .fx-settings-subtab:hover {
	border-color: rgba(113, 192, 255, .34);
	background: rgba(30, 70, 98, .54);
	color: #eaf6ff;
}

.fx-settings-subtabs .fx-settings-subtab.is-active {
	border-color: rgba(83, 189, 245, .45);
	background: linear-gradient(135deg, rgba(28, 91, 128, .6), rgba(17, 54, 77, .82));
	color: #eef9ff;
	box-shadow: inset 0 0 0 1px rgba(83, 189, 245, .08);
}

.fx-settings-subsection-panels { min-width: 0; grid-column: 2; }
.fx-settings-subsection-panel[hidden] { display: none; }

.fx-settings-content .settings-subsection-title {
	font-size: 1.02em;
	margin: 24px 0 10px;
	padding: 0 0 8px;
	border-bottom-color: rgba(113, 192, 255, .3);
	color: #d9efff;
}

.fx-settings-content small {
	color: #a9bfd1;
}

.fx-settings-content input:not([type="checkbox"]),
.fx-settings-content select {
	max-width: min(100%, 420px);
	padding: 8px 10px;
	border: 1px solid rgba(142, 193, 230, .35);
	border-radius: 7px;
	background: rgba(2, 10, 18, .75);
	color: #f0f7fd;
}

.fx-settings-content input[type="checkbox"] {
	accent-color: #43b9f5;
}

.fx-settings-content label.checkbox .checkmark {
	top: 50%;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
	border: 1px solid rgba(143, 183, 212, .38);
	border-radius: 6px;
	background: linear-gradient(145deg, rgba(5, 16, 28, .96), rgba(10, 27, 44, .94));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.fx-settings-content label.checkbox:hover .checkmark {
	border-color: rgba(105, 199, 255, .72);
	background: rgba(22, 52, 75, .95);
}

.fx-settings-content label.checkbox input:checked ~ .checkmark {
	border-color: rgba(78, 220, 160, .76);
	background: linear-gradient(145deg, #168c65, #0c624f);
	box-shadow: 0 0 12px rgba(57, 215, 151, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.fx-settings-content label.checkbox input:checked ~ .checkmark::after {
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border-width: 0 2px 2px 0;
}

.fx-settings-content label.checkbox input:focus-visible ~ .checkmark {
	outline: 2px solid rgba(83, 189, 245, .85);
	outline-offset: 3px;
}

.fx-settings-content label.checkbox input:disabled ~ .checkmark {
	border-color: rgba(143, 160, 174, .2);
	background: rgba(112, 130, 145, .16);
}

.fx-settings-content button {
	min-height: 34px;
	padding: 7px 11px;
	border: 1px solid rgba(113, 192, 255, .28);
	border-radius: 8px;
	background: linear-gradient(145deg, rgba(27, 67, 96, .72), rgba(13, 37, 58, .88));
	color: #e4f3ff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.fx-settings-content button:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: rgba(105, 199, 255, .6);
	background: linear-gradient(145deg, rgba(35, 91, 129, .82), rgba(16, 53, 78, .94));
	box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
}

.fx-settings-content button:focus-visible,
.fx-settings-content select:focus-visible,
.fx-settings-content input:not([type="checkbox"]):focus-visible {
	outline: 2px solid rgba(83, 189, 245, .7);
	outline-offset: 2px;
}

.fx-settings-content button:disabled {
	border-color: rgba(143, 160, 174, .16);
	background: rgba(57, 74, 88, .32);
	color: #8295a5;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.fx-settings-content input[type="range"] {
	accent-color: #54c7f3;
	padding: 0;
	border: 0;
	background: transparent;
}

.fx-settings-content input[type="range"]:focus-visible {
	outline-offset: 5px;
}

.fx-settings-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 22px 16px;
	border-top: 1px solid rgba(113, 192, 255, .2);
	background: rgba(255, 255, 255, .025);
}

.fx-settings-native-actions { flex: 1 1 auto; min-width: 0; }
.fx-settings-close-bottom { flex: 0 0 auto; min-width: 92px; font-weight: 650; }

.fx-settings-actions footer {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.fx-settings-actions button {
	padding: 8px 12px;
	border: 1px solid rgba(113, 192, 255, .35);
	border-radius: 8px;
	background: rgba(28, 78, 111, .45);
	color: #edf6ff;
	cursor: pointer;
}

@media (max-width: 650px) {
	.fx-settings-overlay { padding: 6px; }
	.fx-settings-dialog { min-height: 0; max-height: 96vh; border-radius: 11px; }
	.fx-settings-header, .fx-settings-content, .fx-settings-actions { padding-left: 12px; padding-right: 12px; }
	.fx-settings-tabs { padding-left: 10px; padding-right: 10px; }
	.fx-settings-tabs button { padding: 8px 10px; }
	.fx-settings-category-panel.has-subsections { grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); column-gap: 12px; }
	.fx-settings-subtabs { max-height: calc(100vh - 230px); padding-right: 7px; }
	.fx-settings-actions footer { justify-content: stretch; }
	.fx-settings-actions button { flex: 1 1 40%; }
}

.keybinds-input {
	margin-bottom: 1em;
}
.keybinds-input input {
	width: 10em;
}

.reminder-rules-header, .reminder-rule-row {
	display    : flex;
	gap        : 6px;
	align-items: center;
}
.reminder-rules-header {
	font-weight  : bold;
	margin-bottom: 2px;
}
.reminder-rules-header span, .reminder-rule-row select {
	flex     : 1;
	min-width: 0;
}
.reminder-rule-row button {
	flex: 0 0 auto;
}

.flex {
	display: flex;
}

.flex-column {
	display       : flex;
	flex-direction: column;
}

#customLobbyJoinMenu {
	align-items: center;
}

.customlobby-main {
	display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
	gap: 10px;
}

.lobby-player {
	margin: 5px;
	width: 15rem;
	display: flex;
    align-items: center;
    justify-content: center;
}

.lobby-player span {
	margin: 0px 5px;
    font-size: .7em;
    border-style: solid;
    border-width: 1px;
    padding: 3px 5px;
    border-color: #ffffff7d;
    border-radius: 5px;
}

.lobby-player button {
	font-size: 0.7em;
	margin: 0px 5px;
	padding: 3px 5px;
}

.d-none {
	display: none;
}

.text-align-center {
	text-align: center;
}
.text-align-left {
	text-align: left;
}

hr {
	width: 100%;
}

h1 {
	font-weight       : normal;
	margin-block-start: 0.5em;
	margin-block-end  : 0.5em;
	transition        : 0.2s;
}
#playerlist h1 {
	margin-block-start: 0.3em;
	margin-block-end  : 0.3em;
}
h3 {
	font-weight       : normal;
	margin-block-start: 0.6em;
	margin-block-end  : 0.6em;
}

canvas,
input,
textarea {
	transition: 0.2s;
}

.window button:hover {
	background-color: rgba(222, 222, 222, 0.52);
	border-radius   : 8px;
}

.window input:focus {
	background-color: rgba(222, 222, 222, 0.36);
	border-radius   : 8px;
}

td {
	padding: 0px;
}

.player-list-window {
	overflow: hidden;
}

#fx-game-shell {
	position: fixed;
	inset: 0 0 0 var(--fx-sidebar-width, 0px);
	z-index: 0;
	transform: translateZ(0);
}

#canvasA {
	position: fixed;
	top: 0;
	left: 0;
}

#fx-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 25;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 7px;
	overflow: hidden;
	border-right: 1px solid rgba(255, 255, 255, .72);
	background: rgba(7, 10, 20, .82);
	backdrop-filter: blur(8px);
	color: #fff;
	font: 13px/1.3 system-ui, sans-serif;
	transition: width .18s ease;
}

#fx-custom-lobby-view {
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: auto;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto auto minmax(220px, 1fr);
	gap: 10px;
	padding: clamp(10px, 1.2vw, 20px);
	overflow: auto;
	background-image: linear-gradient(145deg, rgba(6, 15, 29, .62), rgba(9, 20, 35, .72)), var(--fx-custom-lobby-map-background, linear-gradient(145deg, rgba(6, 15, 29, .985), rgba(9, 20, 35, .97)));
	background-position: center, center;
	background-size: cover, cover;
	background-repeat: no-repeat;
	backdrop-filter: blur(3px);
	color: #edf6ff;
	font: calc(14px * var(--fx-custom-lobby-scale, 1))/1.35 system-ui, sans-serif;
}

.fx-lobby-notifications {
	position: fixed;
	top: 16px;
	right: 18px;
	z-index: 2147483647;
	font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
	display: grid;
	gap: 0;
	width: min(360px, calc(100vw - 36px));
	max-height: 45vh;
	overflow: hidden;
	pointer-events: auto;
}

.fx-lobby-notification {
	padding: 11px 14px;
	border: 1px solid rgba(113, 192, 255, .42);
	border-left: 3px solid #43d7a1;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(135deg, rgba(8, 25, 43, .97), rgba(14, 42, 63, .95));
	box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
	color: #edf6ff;
	animation: fx-lobby-notification-in .2s ease-out;
}

.fx-lobby-notification.is-followers {
	border-color: rgba(145, 132, 255, .55);
	border-left-color: #9b8dff;
	background: linear-gradient(135deg, rgba(25, 29, 62, .98), rgba(10, 42, 64, .97));
}

.fx-lobby-notification-controls {
	display: grid;
	grid-template-columns: 42px 1fr 42px 42px;
	align-items: center;
	min-height: 38px;
	border: 1px solid rgba(113, 192, 255, .36);
	border-radius: 9px 9px 0 0;
	background: rgba(7, 18, 32, .97);
	color: #edf6ff;
	text-align: center;
	pointer-events: auto;
}

.fx-lobby-notification-controls button {
	align-self: stretch;
	border: 0;
	border-right: 1px solid rgba(180, 211, 237, .25);
	background: transparent;
	color: #edf6ff;
	font: inherit;
	cursor: pointer;
}

.fx-lobby-notification-controls button:last-child {
	border-right: 0;
	border-left: 1px solid rgba(180, 211, 237, .25);
	font-size: 1.3em;
}

.fx-lobby-notification-controls button:hover:not(:disabled) {
	background: rgba(87, 153, 194, .24);
}

.fx-lobby-notification-controls button:disabled {
	color: #64798c;
	cursor: default;
}

.fx-lobby-notification-controls strong {
	font-size: .86em;
}

.fx-lobby-notification-category {
	display: block;
	margin-bottom: 3px;
	color: #75e2b5;
	font-size: .72em;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fx-lobby-notification.is-followers .fx-lobby-notification-category {
	color: #b4aaff;
}

.fx-lobby-notification.is-followers .fx-lobby-notification-category::before {
	content: "✦";
	margin-right: 6px;
	color: #8e7cff;
}

.fx-lobby-notification-sender {
	display: block;
	margin: 2px 0 4px;
	font-size: .92em;
	font-weight: 750;
}

.fx-lobby-notification p {
	margin: 0;
	font-size: 1.08em;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

@keyframes fx-lobby-notification-in {
	from { opacity: 0; transform: translateY(-7px); }
	to { opacity: 1; transform: translateY(0); }
}

#fx-app-mount {
	position: fixed;
	inset: 0 0 0 var(--fx-sidebar-width, 0px);
	z-index: 20;
	min-width: 0;
	min-height: 0;
	pointer-events: none;
}

#fx-home-view-root {
	display: contents;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

html:has(#fx-home-view),
body:has(#fx-home-view) {
	overflow: hidden !important;
}

body:has(#fx-home-view) .window,
body:has(#fx-home-view) :is(dialog, [role="dialog"]) {
	z-index: 10000;
}
body:has(#fx-home-view:not(.is-name-view)) img[src*="logo" i],
body:has(#fx-home-view:not(.is-name-view)) a:has(img),
body:has(#fx-home-view:not(.is-name-view)) a[href*="play.google.com"],
body:has(#fx-home-view:not(.is-name-view)) a[href*="apps.apple.com"],
body:has(#fx-home-view:not(.is-name-view)) a[href*="discord.gg/pthqvpTXmh"],
body:has(#fx-home-view:not(.is-name-view)) a[href*="instagram.com"] { visibility: hidden !important; pointer-events: none !important; }
/* Native store/social badges vary in URLs and image names across game builds.
   The Vue HomeView replaces those links; keep the game canvas/map visible. */
body:has(#fx-home-view:not(.is-name-view)) :is(a, [role="link"], img):not(#fx-home-view-root *):not(#fx-sidebar *):not(#fx-sidebar-restore *) {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

#fx-home-view {
	position: fixed;
	inset: 0 0 0 var(--fx-sidebar-width, 0px);
	z-index: 20;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	padding: clamp(18px, 4vw, 64px);
	min-height: 0;
	overflow: hidden;
	color: #edf6ff;
	pointer-events: auto;
	font-size: clamp(14px, 1vw, 17px);
}

.fx-home-transition-leave-active { transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease; }
.fx-home-transition-leave-to { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(3px); }
#fx-home-view.is-leaving { pointer-events: none; }

.fx-home-orb {
	position: absolute;
	width: min(38vw, 470px);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(85px);
	opacity: .18;
	pointer-events: none;
}

.fx-home-orb-one { top: -32%; left: 4%; background: #268bd2; }
.fx-home-orb-two { right: -10%; bottom: -40%; background: #26b982; }

.fx-home-shell {
	position: relative;
	width: min(760px, 100%);
	padding: clamp(22px, 4vw, 42px);
	max-height: calc(100% - 12px);
	overflow: auto;
	border: 1px solid rgba(144, 195, 231, .22);
	border-radius: 24px;
	background: linear-gradient(145deg, rgba(14, 31, 49, .9), rgba(8, 21, 37, .94));
	box-shadow: 0 28px 90px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
	backdrop-filter: blur(22px);
}

.fx-home-header { display: flex; align-items: center; gap: 15px; }
.fx-home-brand-mark {
	display: block; width: 55px; height: 55px; flex: 0 0 55px;
	border: 0; border-radius: 14px; background: transparent;
	box-shadow: 0 8px 24px rgba(28, 190, 134, .12);
}
.fx-home-brand-copy { min-width: 0; }
.fx-home-brand-copy small, .fx-home-profile small { display: block; color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-home-brand-copy h1 { margin: 2px 0 0; color: #f2f8ff; font-size: 1.55em; letter-spacing: -.035em; }
.fx-home-brand-copy p { margin: 1px 0 0; color: #91a8bd; font-size: .84em; }
.fx-home-profile {
	display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 8px 11px;
	border: 1px solid rgba(158, 195, 225, .14); border-radius: 12px; background: rgba(4, 12, 23, .46);
	color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fx-home-profile:hover { border-color: rgba(119, 203, 240, .42); background: rgba(17, 40, 60, .72); }
.fx-home-profile-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(75, 164, 218, .2); color: #aadfff; font-weight: 800; }
.fx-home-profile strong { display: block; max-width: 150px; overflow: hidden; color: #e6f3ff; font-size: .84em; text-overflow: ellipsis; white-space: nowrap; }
.fx-home-clan { padding: 3px 7px; border: 1px solid rgba(88, 226, 157, .24); border-radius: 999px; color: #8fe5b8; font-size: .72em; font-weight: 700; }
.fx-home-profile-edit { color: #82a1b8; font-size: .92em; }
.fx-home-account-id { display: block; margin-top: 3px; color: #7f9cb2; font-size: .68em; }
.fx-home-welcome { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: clamp(30px, 5vw, 48px) 0 20px; }
.fx-home-eyebrow { color: #75d9ae; font-size: .68em; font-weight: 800; letter-spacing: .14em; }
.fx-home-welcome h2 { margin: 5px 0 0; color: #f4f8fc; font-size: clamp(1.5em, 3vw, 2em); letter-spacing: -.045em; }
.fx-home-ready { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(66, 220, 144, .2); border-radius: 999px; background: rgba(35, 157, 100, .1); color: #a2eac3; font-size: .76em; white-space: nowrap; }
.fx-home-ready i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82, 228, 154, .55); }
.fx-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx-home-action, .fx-home-secondary {
	display: flex; align-items: center; gap: 12px; min-width: 0; border: 1px solid rgba(157, 195, 226, .15);
	border-radius: 13px; background: rgba(20, 39, 58, .76); color: #eaf4fd; font: inherit; text-align: left; cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.fx-home-action { min-height: 65px; padding: 11px 14px; font-weight: 680; }
.fx-home-scenario-copy { display: grid; min-width: 0; gap: 1px; text-align: left; }
.fx-home-scenario-copy strong { color: #d6e6f0; font-size: 1em; font-weight: 650; }
.fx-home-scenario-copy small { color: #91a8bd; font-size: .72em; font-weight: 500; }
.fx-home-action:hover, .fx-home-secondary:hover { transform: translateY(-2px); border-color: rgba(119, 203, 240, .45); background-color: rgba(32, 59, 81, .92); }
.fx-home-action.is-primary { border-color: rgba(75, 226, 150, .25); background: linear-gradient(105deg, rgba(21, 114, 76, .36), rgba(19, 50, 54, .8)); }
.fx-home-action.is-scenario { background: linear-gradient(105deg, rgba(31, 94, 126, .32), rgba(20, 42, 62, .82)); }
.fx-home-action.is-account { background: linear-gradient(105deg, rgba(132, 95, 43, .26), rgba(44, 42, 40, .76)); }
.fx-home-action.is-menu { background: linear-gradient(105deg, rgba(92, 69, 100, .28), rgba(39, 37, 55, .8)); }
.fx-home-action-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: rgba(255, 255, 255, .065); color: #aee8d0; font-size: 1.18em; }
.fx-home-action b, .fx-home-secondary b { margin-left: auto; color: #7796ad; font-size: 1.35em; font-weight: 500; }
.fx-home-footer { display: grid; gap: 8px; margin-top: 18px; }
.fx-home-secondary { min-height: 43px; padding: 8px 12px; font-size: .85em; }
.fx-home-discord { box-sizing: border-box; color: #eaf4fd; text-decoration: none; }
.fx-home-discord:hover { color: #fff; }
.fx-home-secondary > span { width: 23px; color: #9fc6df; text-align: center; font-size: 1.2em; }
.fx-home-secondary.is-lobby { border-color: rgba(100, 174, 220, .22); background: rgba(30, 74, 101, .35); }
.fx-home-secondary.is-lobby .fx-home-lobby-copy { display: grid; width: auto; min-width: 0; flex: 1; gap: 1px; text-align: left; }
.fx-home-secondary.is-lobby .fx-home-lobby-copy strong { color: #d6e6f0; font-size: 1em; font-weight: 600; }
.fx-home-secondary.is-lobby .fx-home-lobby-copy small { color: #91a8bd; font-size: .78em; font-weight: 500; }

.fx-home-name-card {
	width: min(520px, 100%); box-sizing: border-box; padding: clamp(24px, 4vw, 40px);
	border: 1px solid rgba(144, 195, 231, .22); border-radius: 22px;
	background: linear-gradient(145deg, rgba(14, 31, 49, .96), rgba(8, 21, 37, .97));
	box-shadow: 0 28px 90px rgba(0, 0, 0, .48); color: #edf6ff;
}
#fx-home-view.is-name-view { position: fixed; inset: 0; z-index: 10002; }
#fx-home-view:not(.is-name-view) { pointer-events: none; }
#fx-home-view:not(.is-name-view) .fx-home-shell { pointer-events: auto; }
.fx-home-back { display: block; margin: 0 0 28px; padding: 6px 0; border: 0; background: transparent; color: #a7bfd3; font: inherit; cursor: pointer; }
.fx-home-back:hover { color: #fff; }
.fx-home-name-card h1 { margin: 8px 0; color: #f4f8fc; font-size: clamp(1.6em, 4vw, 2.2em); letter-spacing: -.04em; }
.fx-home-name-card > p { margin: 0 0 25px; color: #9bb2c7; font-size: .9em; }
.fx-home-name-form { position: relative; display: grid; gap: 8px; }
.fx-home-name-form label { color: #b4cada; font-size: .82em; font-weight: 650; }
.fx-home-name-form input { box-sizing: border-box; width: 100%; min-height: 50px; padding: 11px 75px 11px 13px; border: 1px solid rgba(119, 178, 219, .35); border-radius: 10px; outline: none; background: rgba(3, 12, 23, .7); color: #f3f8fc; font: inherit; }
.fx-home-name-form input:focus { border-color: #69c7ff; box-shadow: 0 0 0 3px rgba(68, 173, 237, .15); }
.fx-home-name-length { position: absolute; right: 12px; top: 40px; color: #7793a9; font-size: .75em; }
.fx-home-name-status { margin: 2px 0; color: #ffbd9c; font-size: .82em; }
.fx-home-name-save { min-height: 44px; margin-top: 9px; border: 1px solid rgba(83, 225, 156, .35); border-radius: 10px; background: linear-gradient(110deg, #126d4b, #145a5a); color: #ecfff5; font: inherit; font-weight: 700; cursor: pointer; }
.fx-home-name-save:hover { filter: brightness(1.12); }
.fx-home-name-history { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(144, 183, 212, .16); }
.fx-home-name-history h2 { margin: 0; color: #d7e8f5; font-size: .92em; }
.fx-home-name-history > p { margin: 4px 0 12px; color: #819caf; font-size: .78em; }
.fx-home-name-history-list { display: flex; flex-wrap: wrap; gap: 7px; }
.fx-home-name-history-list button { max-width: 100%; padding: 7px 10px; overflow-wrap: anywhere; border: 1px solid rgba(104, 168, 207, .26); border-radius: 8px; background: rgba(34, 69, 93, .42); color: #cce6f8; font: inherit; font-size: .8em; cursor: pointer; }
.fx-home-name-history-list button:hover:not(:disabled) { border-color: rgba(111, 219, 173, .5); background: rgba(28, 106, 77, .42); }
.fx-home-name-history-list button:disabled { opacity: .48; cursor: default; }

@media (max-width: 650px) {
	#fx-home-view { padding: 14px; }
	.fx-home-shell { padding: 20px; border-radius: 18px; }
	.fx-home-header { flex-wrap: wrap; }
	.fx-home-profile { width: 100%; margin-left: 0; box-sizing: border-box; }
	.fx-home-welcome { align-items: center; margin-top: 28px; }
}

@media (max-height: 740px) {
	#fx-home-view { padding-block: 8px; }
	.fx-home-shell { padding: 18px 22px; }
	.fx-home-welcome { margin-top: 22px; }
	.fx-home-action { min-height: 54px; }
	.fx-home-footer { margin-top: 12px; }
}

body[data-fx-bot-protection="active"] #fx-app-mount {
	display: none !important;
}

body[data-fx-bot-protection="active"] #fx-sidebar {
	visibility: hidden !important;
}

#fx-replay-view-root { display: contents; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-replay-overlay {
	position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; box-sizing: border-box;
	padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 12% 15%, rgba(28, 105, 148, .24), transparent 34%),
	radial-gradient(ellipse at 88% 82%, rgba(27, 151, 109, .16), transparent 33%), rgba(3, 9, 17, .94); color: #edf6ff;
	font-size: clamp(13px, 1vw, 16px); pointer-events: auto; backdrop-filter: blur(12px);
}
.fx-replay-view {
	width: min(980px, 100%); max-height: min(850px, 100%); display: flex; flex-direction: column; box-sizing: border-box;
	padding: clamp(20px, 3vw, 34px); overflow: hidden; border: 1px solid rgba(144, 195, 231, .22); border-radius: 22px;
	background: linear-gradient(145deg, rgba(14, 31, 49, .98), rgba(7, 19, 34, .98));
	box-shadow: 0 28px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.05);
}
.fx-replay-header { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(144, 183, 212, .14); }
.fx-replay-brand-mark { display: block; width: 48px; height: 48px; flex: 0 0 48px; border: 0; border-radius: 12px; background: transparent; }
.fx-replay-header small { color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-replay-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.6em; letter-spacing: -.035em; }
.fx-replay-header p { margin: 0; color: #91a8bd; font-size: .84em; }
.fx-replay-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-replay-close:hover, .fx-replay-icon-button:hover { border-color: rgba(119,203,240,.45); color: #fff; }
.fx-replay-content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .8fr); gap: 14px; min-height: 0; padding-top: 18px; overflow: auto; }
.fx-replay-input-card, .fx-replay-saved-card { min-width: 0; padding: 17px; border: 1px solid rgba(157,195,226,.14); border-radius: 15px; background: rgba(4,12,23,.4); }
.fx-replay-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.fx-replay-section-heading > div { display: flex; align-items: center; gap: 9px; }
.fx-replay-kicker { color: #67dba9; font-size: .72em; font-weight: 800; letter-spacing: .1em; }
.fx-replay-section-heading h2 { margin: 0; color: #eaf4fd; font-size: 1em; }
.fx-replay-live-dot, .fx-replay-footer i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82,228,154,.55); }
.fx-replay-input-card textarea { display: block; width: 100%; min-height: 250px; max-height: 48vh; box-sizing: border-box; resize: vertical; padding: 13px; border: 1px solid rgba(119,178,219,.25); border-radius: 10px; outline: none; background: rgba(1,8,16,.78); color: #dbeaf5; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.fx-replay-input-card textarea:focus { border-color: rgba(105,199,255,.65); box-shadow: 0 0 0 3px rgba(68,173,237,.12); }
.fx-replay-input-card textarea::placeholder { color: #607b91; }
.fx-replay-input-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: #7893a8; font-size: .74em; }
.fx-replay-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fx-replay-button { min-height: 34px; padding: 6px 10px; border: 1px solid rgba(157,195,226,.16); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; font-size: .78em; cursor: pointer; }
.fx-replay-button:hover { border-color: rgba(119,203,240,.45); background: rgba(32,59,81,.92); }
.fx-replay-button.is-primary { border-color: rgba(75,226,150,.3); background: linear-gradient(105deg, rgba(21,114,76,.62), rgba(19,70,63,.8)); color: #eafff4; font-weight: 700; }
.fx-replay-button.is-small { min-height: 30px; padding: 5px 9px; }
.fx-replay-count { display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 8px; background: rgba(75,164,218,.15); color: #a9dcf6; font-size: .78em; font-weight: 750; }
.fx-replay-empty { margin: 0; padding: 16px 4px; color: #8099ad; font-size: .82em; line-height: 1.5; }
.fx-replay-list { display: grid; gap: 7px; }
.fx-replay-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid rgba(157,195,226,.1); border-radius: 10px; background: rgba(19,37,54,.55); }
.fx-replay-index { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border-radius: 8px; background: rgba(75,164,218,.12); color: #91c9e7; font-size: .7em; font-weight: 750; }
.fx-replay-meta { display: grid; gap: 3px; min-width: 0; flex: 1; }
.fx-replay-meta strong { overflow: hidden; color: #dbeaf5; font-size: .79em; text-overflow: ellipsis; white-space: nowrap; }
.fx-replay-meta small { color: #7893a8; font-size: .68em; }
.fx-replay-icon-button { width: 29px; height: 29px; border: 1px solid rgba(157,195,226,.12); border-radius: 8px; background: transparent; color: #8da5b8; font: inherit; font-size: 1.1em; cursor: pointer; }
.fx-replay-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(144,183,212,.14); }
.fx-replay-footer > span { display: inline-flex; align-items: center; gap: 8px; color: #7e9bb4; font-size: .72em; }
@media (max-width: 720px) { .fx-replay-content { grid-template-columns: 1fr; } .fx-replay-input-card textarea { min-height: 190px; } .fx-replay-input-footer { align-items: flex-start; flex-direction: column; } .fx-replay-actions { justify-content: flex-start; } }

#fx-leaderboards-view-root { display: contents; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-leaderboards-overlay { position: fixed; inset: 0; z-index: 10002; display: grid; place-items: center; box-sizing: border-box; padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 14% 10%, rgba(28,105,148,.22), transparent 36%), radial-gradient(ellipse at 88% 82%, rgba(27,151,109,.14), transparent 33%), rgba(3,9,17,.95); color: #edf6ff; font-size: clamp(13px, 1vw, 16px); pointer-events: auto; backdrop-filter: blur(12px); }
.fx-leaderboards-view { width: min(1050px, 100%); max-height: min(850px, 100%); display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(20px, 3vw, 34px); overflow: hidden; border: 1px solid rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.fx-leaderboards-header { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(144,183,212,.14); }
.fx-leaderboards-brand-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid rgba(255,209,102,.3); border-radius: 15px; background: linear-gradient(145deg, rgba(214,160,54,.2), rgba(32,116,160,.15)); font-size: 1.65em; }
.fx-leaderboards-header small { color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-leaderboards-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.65em; letter-spacing: -.035em; }
.fx-leaderboards-header p { margin: 0; color: #91a8bd; font-size: .84em; }
.fx-leaderboards-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-leaderboards-controls { display: flex; align-items: center; gap: 10px; padding: 18px 0 14px; }
.fx-leaderboards-search { display: flex; align-items: center; gap: 8px; width: min(410px, 100%); min-height: 38px; box-sizing: border-box; padding: 0 11px; border: 1px solid rgba(119,178,219,.22); border-radius: 9px; background: rgba(1,8,16,.5); color: #7590a5; }
.fx-leaderboards-search span { font-size: 1.25em; }
.fx-leaderboards-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #e6f3ff; font: inherit; font-size: .8em; }
.fx-leaderboards-search input::placeholder { color: #668197; }
.fx-leaderboards-count { margin-left: auto; color: #7893a8; font-size: .75em; }
.fx-leaderboards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 2px 2px 14px; overflow: auto; }
.fx-leaderboards-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 82px; padding: 14px; border: 1px solid rgba(157,195,226,.15); border-radius: 13px; background: linear-gradient(120deg, rgba(20,42,62,.82), rgba(10,24,40,.78)); color: #edf6ff; font: inherit; text-align: left; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.fx-leaderboards-card:hover:not(:disabled), .fx-leaderboards-card.is-opening { transform: translateY(-1px); border-color: rgba(110,220,174,.42); background: linear-gradient(120deg, rgba(24,74,67,.78), rgba(13,37,49,.92)); }
.fx-leaderboards-card:disabled { opacity: .65; cursor: progress; }
.fx-leaderboards-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(134,193,222,.13); border-radius: 11px; background: rgba(74,157,192,.12); color: #a4dbeb; font-size: 1.15em; }
.fx-leaderboards-card-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.fx-leaderboards-card-copy strong { overflow: hidden; color: #eaf4fd; font-size: .9em; text-overflow: ellipsis; white-space: nowrap; }
.fx-leaderboards-card-copy small { color: #829caf; font-size: .72em; }
.fx-leaderboards-card-arrow { color: #7796ad; font-size: 1.4em; font-weight: 400; }
.fx-leaderboards-empty { grid-column: 1 / -1; padding: 25px 8px; color: #8aa2b5; text-align: center; }
.fx-leaderboards-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(144,183,212,.14); color: #7e9bb4; font-size: .74em; }
.fx-leaderboards-footer-note { display: inline-flex; align-items: center; gap: 8px; }
.fx-leaderboards-footer-note i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82,228,154,.55); }
.fx-leaderboards-back { min-width: 86px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(157,195,226,.16); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; cursor: pointer; }
.fx-leaderboards-back:hover { border-color: rgba(119,203,240,.45); background: rgba(32,59,81,.92); }
@media (max-width: 760px) { .fx-leaderboards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .fx-leaderboards-grid { grid-template-columns: 1fr; } .fx-leaderboards-view { padding: 18px; } }

#fx-logs-view-root { display: contents; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-logs-overlay { position: fixed; inset: 0; z-index: 10003; display: grid; place-items: center; box-sizing: border-box; padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 14% 10%, rgba(28,105,148,.22), transparent 36%), radial-gradient(ellipse at 88% 82%, rgba(27,151,109,.14), transparent 33%), rgba(3,9,17,.95); color: #edf6ff; font-size: clamp(13px, 1vw, 16px); pointer-events: auto; backdrop-filter: blur(12px); }
.fx-logs-dashboard { width: min(1280px, 100%); height: min(900px, 100%); display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(18px, 2.5vw, 30px); overflow: hidden; border: 1px solid rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.fx-logs-header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(144,183,212,.14); }
.fx-logs-brand-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid rgba(119,203,240,.25); border-radius: 15px; background: linear-gradient(145deg, rgba(39,125,162,.2), rgba(32,116,160,.15)); font-size: 1.5em; }
.fx-logs-header small { color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-logs-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.65em; letter-spacing: -.035em; }
.fx-logs-header p { margin: 0; color: #91a8bd; font-size: .84em; }
.fx-logs-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-logs-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; min-height: 0; flex: 1; padding-top: 18px; }
.fx-logs-nav { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding-right: 12px; overflow: auto; border-right: 1px solid rgba(144,183,212,.13); }
.fx-logs-nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9bb2c7; font: inherit; text-align: left; cursor: pointer; }
.fx-logs-nav-item > span { display: grid; place-items: center; width: 25px; color: #8abbd0; font-size: 1.1em; }
.fx-logs-nav-item strong { flex: 1; font-size: .8em; font-weight: 620; }
.fx-logs-nav-item i { color: #638099; font-size: 1.1em; font-style: normal; }
.fx-logs-nav-item:hover { background: rgba(37,67,89,.35); color: #e6f3ff; }
.fx-logs-nav-item.is-active { border-color: rgba(94,216,163,.24); background: linear-gradient(105deg, rgba(25,112,78,.28), rgba(25,64,68,.3)); color: #d9ffed; }
.fx-logs-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fx-logs-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fx-logs-eyebrow { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.fx-logs-heading h2 { margin: 3px 0 0; color: #f0f7fc; font-size: 1.4em; letter-spacing: -.035em; }
.fx-logs-count { padding: 6px 9px; border: 1px solid rgba(123,175,208,.16); border-radius: 8px; background: rgba(15,38,57,.55); color: #8ba8bd; font-size: .72em; white-space: nowrap; }
.fx-logs-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.fx-logs-filter-card { min-width: 0; padding: 9px; border: 1px solid rgba(144,183,212,.13); border-radius: 10px; background: rgba(5,15,26,.53); }
.fx-logs-filter-card > strong { display: block; margin-bottom: 7px; color: #aec3d3; font-size: .73em; }
.fx-logs-filter-fields { display: flex; align-items: end; gap: 6px; }
.fx-logs-filter-fields label { display: grid; gap: 4px; min-width: 0; flex: 1; color: #718ba0; font-size: .63em; }
.fx-logs-filter-fields label.is-grow { flex: 1.5; }
.fx-logs-filter-fields label.is-quantity { flex: 0 0 56px; }
.fx-logs-filter-fields input { box-sizing: border-box; width: 100%; min-width: 0; height: 31px; padding: 5px 7px; border: 1px solid rgba(116,166,199,.2); border-radius: 6px; outline: none; background: rgba(1,8,16,.75); color: #e4f1f8; font: inherit; font-size: 1.08em; }
.fx-logs-filter-fields input:focus { border-color: rgba(105,199,255,.55); }
.fx-logs-filter-fields button, .fx-logs-footer > button { flex: 0 0 auto; min-height: 31px; padding: 5px 8px; border: 1px solid rgba(75,226,150,.25); border-radius: 6px; background: rgba(21,114,76,.32); color: #dfffee; font: inherit; font-size: .72em; cursor: pointer; }
.fx-logs-table-card { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid rgba(144,183,212,.15); border-radius: 12px; background: rgba(4,13,22,.54); }
.fx-logs-table-scroll { flex: 1; min-height: 0; overflow: auto; }
.fx-logs-table-scroll table { width: 100%; border-collapse: collapse; color: #dceaf4; font-size: .8em; }
.fx-logs-table-scroll th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; background: #10263a; color: #8faabe; font-size: .82em; font-weight: 750; text-align: left; }
.fx-logs-table-scroll td { padding: 10px 12px; border-top: 1px solid rgba(144,183,212,.09); line-height: 1.4; overflow-wrap: anywhere; }
.fx-logs-table-scroll tbody tr:hover { background: rgba(46,88,112,.19); }
.fx-logs-table-scroll td.is-link { color: #91d7ff; }
.fx-logs-state { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-height: 160px; padding: 24px; color: #8ea7b9; text-align: center; }
.fx-logs-state.is-error { color: #ffb3a8; }
.fx-logs-spinner { width: 16px; height: 16px; border: 2px solid rgba(124,177,210,.2); border-top-color: #67d6b0; border-radius: 50%; animation: fx-logs-spin .7s linear infinite; }
@keyframes fx-logs-spin { to { transform: rotate(360deg); } }
.fx-logs-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-top: 1px solid rgba(144,183,212,.12); color: #7e9bb4; font-size: .74em; }
.fx-logs-pagination button { min-height: 32px; padding: 6px 10px; border: 1px solid rgba(157,195,226,.16); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; cursor: pointer; }
.fx-logs-pagination button:disabled { opacity: .45; cursor: default; }
.fx-logs-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 13px; color: #7e9bb4; font-size: .74em; }
.fx-logs-footer > button { border-color: rgba(157,195,226,.16); background: rgba(20,39,58,.76); color: #d9e9f5; }
.fx-logs-footer span { display: inline-flex; align-items: center; gap: 8px; }
.fx-logs-footer i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82,228,154,.55); }
@media (max-width: 980px) { .fx-logs-filters { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .fx-logs-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 10px; } .fx-logs-nav { flex-direction: row; padding: 0 0 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(144,183,212,.13); } .fx-logs-nav-item { flex: 0 0 auto; } }

#fx-game-settings-view-root { display: contents; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-game-settings-overlay { position: fixed; inset: 0; z-index: 10004; display: grid; place-items: center; box-sizing: border-box; padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 14% 10%, rgba(28,105,148,.22), transparent 36%), radial-gradient(ellipse at 88% 82%, rgba(27,151,109,.14), transparent 33%), rgba(3,9,17,.95); color: #edf6ff; font-size: clamp(13px, 1vw, 16px); pointer-events: auto; backdrop-filter: blur(12px); }
.fx-game-settings-dialog { width: min(1120px, 100%); height: min(850px, 100%); display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(18px, 2.5vw, 30px); overflow: hidden; border: 1px solid rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.fx-game-settings-header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(144,183,212,.14); }
.fx-game-settings-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid rgba(119,203,240,.25); border-radius: 15px; background: linear-gradient(145deg, rgba(39,125,162,.2), rgba(32,116,160,.15)); color: #a4dbeb; font-size: 1.5em; }
.fx-game-settings-header small { color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-game-settings-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.65em; letter-spacing: -.035em; }
.fx-game-settings-header p { margin: 0; color: #91a8bd; font-size: .84em; }
.fx-game-settings-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-game-settings-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 18px; min-height: 0; flex: 1; padding-top: 18px; }
.fx-game-settings-nav { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding-right: 12px; overflow: auto; border-right: 1px solid rgba(144,183,212,.13); }
.fx-game-settings-nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9bb2c7; font: inherit; text-align: left; cursor: pointer; }
.fx-game-settings-nav-item > span { display: grid; place-items: center; width: 25px; color: #8abbd0; font-size: 1.1em; }
.fx-game-settings-nav-item strong { flex: 1; font-size: .8em; font-weight: 620; }
.fx-game-settings-nav-item i { color: #638099; font-size: 1.1em; font-style: normal; }
.fx-game-settings-nav-item:hover { background: rgba(37,67,89,.35); color: #e6f3ff; }
.fx-game-settings-nav-item.is-active { border-color: rgba(94,216,163,.24); background: linear-gradient(105deg, rgba(25,112,78,.28), rgba(25,64,68,.3)); color: #d9ffed; }
.fx-game-settings-reset { margin-top: auto; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(239,130,120,.2); border-radius: 8px; background: rgba(120,46,49,.17); color: #e9b9b8; font: inherit; font-size: .74em; cursor: pointer; }
.fx-game-settings-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.fx-game-settings-section { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; overflow: auto; padding: 2px 4px 12px 1px; }
.fx-game-settings-section-heading { padding: 0 2px 5px; }
.fx-game-settings-section-heading > span { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.fx-game-settings-section-heading h2 { margin: 3px 0 4px; color: #f0f7fc; font-size: 1.35em; letter-spacing: -.035em; }
.fx-game-settings-section-heading p { margin: 0; max-width: 760px; color: #829caf; font-size: .76em; line-height: 1.45; }
.fx-game-setting-card,.fx-game-key-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 11px 13px; border: 1px solid rgba(144,183,212,.13); border-radius: 10px; background: rgba(5,15,26,.53); }
.fx-game-setting-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.fx-game-setting-copy strong,.fx-game-key-card > strong { color: #dceaf4; font-size: .82em; font-weight: 650; }
.fx-game-setting-copy small { color: #718ba0; font-size: .68em; line-height: 1.4; }
.fx-game-setting-card select,.fx-game-setting-text,.fx-game-key-card button { box-sizing: border-box; min-width: 160px; max-width: 45%; height: 36px; padding: 6px 10px; border: 1px solid rgba(116,166,199,.2); border-radius: 7px; outline: none; background: rgba(1,8,16,.75); color: #e4f1f8; font: inherit; font-size: .76em; }
.fx-game-setting-card select:focus,.fx-game-setting-text:focus,.fx-game-key-card button:focus { border-color: rgba(105,199,255,.55); }
.fx-game-setting-toggles { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fx-game-setting-toggles label,.fx-game-setting-card.is-checks label { display: inline-flex; align-items: center; gap: 7px; color: #9bb2c7; font-size: .74em; cursor: pointer; }
.fx-game-setting-toggles input,.fx-game-setting-card.is-checks input { accent-color: #57dba1; }
.fx-game-setting-card.is-checks { justify-content: flex-start; flex-wrap: wrap; gap: 12px 22px; }
.fx-game-setting-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.fx-game-setting-toggle input { position: absolute; opacity: 0; }
.fx-game-setting-toggle span { width: 34px; height: 19px; border: 1px solid rgba(116,166,199,.25); border-radius: 20px; background: rgba(1,8,16,.75); transition: .16s; }
.fx-game-setting-toggle span::after { display: block; width: 13px; height: 13px; margin: 2px; border-radius: 50%; background: #7890a3; content: ""; transition: .16s; }
.fx-game-setting-toggle input:checked + span { border-color: rgba(75,226,150,.45); background: rgba(21,114,76,.45); }
.fx-game-setting-toggle input:checked + span::after { transform: translateX(15px); background: #80f0b9; }
.fx-game-setting-range { width: min(180px,25%); accent-color: #57dba1; }
.fx-game-key-card { justify-content: space-between; }
.fx-game-key-card > div { display: flex; gap: 7px; }
.fx-game-key-card button { min-width: 112px; max-width: none; cursor: pointer; }
.fx-game-key-card button.is-capturing { border-color: rgba(94,216,163,.65); background: rgba(25,112,78,.28); color: #d9ffed; }
.fx-game-settings-reset-keys { align-self: flex-start; min-height: 34px; margin-top: 4px; padding: 6px 10px; border: 1px solid rgba(157,195,226,.16); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; font-size: .74em; cursor: pointer; }
.fx-game-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid rgba(144,183,212,.14); color: #7e9bb4; font-size: .74em; }
.fx-game-settings-footer span { display: inline-flex; align-items: center; gap: 8px; }
.fx-game-settings-footer i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82,228,154,.55); }
.fx-game-settings-footer button { min-width: 86px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(75,226,150,.25); border-radius: 8px; background: rgba(21,114,76,.32); color: #dfffee; font: inherit; cursor: pointer; }
@media (max-width: 700px) { .fx-game-settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 10px; } .fx-game-settings-nav { flex-direction: row; padding: 0 0 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(144,183,212,.13); } .fx-game-settings-nav-item { flex: 0 0 auto; } .fx-game-settings-reset { margin: 0 0 0 auto; flex: 0 0 auto; } .fx-game-setting-card { align-items: flex-start; flex-direction: column; } .fx-game-setting-card select,.fx-game-setting-text { width: 100%; max-width: none; } }

/* Match the client settings window to the Game Settings dialog. */
.fx-settings-overlay { padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 14% 10%, rgba(28,105,148,.22), transparent 36%), radial-gradient(ellipse at 88% 82%, rgba(27,151,109,.14), transparent 33%), rgba(3,9,17,.95); color: #edf6ff; font: clamp(13px, 1vw, 16px)/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-settings-dialog { display: flex; flex-direction: column; box-sizing: border-box; width: min(1120px, 100%); height: min(850px, 100%); min-height: 0; max-height: none; padding: clamp(18px, 2.5vw, 30px); border-color: rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); font: inherit; }
.fx-settings-header { flex: 0 0 auto; justify-content: flex-start; gap: 14px; padding: 0 0 18px; border-bottom-color: rgba(144,183,212,.14); background: transparent; }
.fx-settings-mark { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid rgba(119,203,240,.25); border-radius: 15px; background: linear-gradient(145deg, rgba(39,125,162,.2), rgba(32,116,160,.15)); color: #a4dbeb; font-size: 1.5em; }
.fx-settings-heading { min-width: 0; }
.fx-settings-header small { color: #7e9bb4; font-size: .68em; font-weight: 750; letter-spacing: .15em; }
.fx-settings-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.65em; letter-spacing: -.035em; }
.fx-settings-header p { margin: 0; color: #91a8bd; font-size: .84em; }
.fx-settings-kind-switch { flex: 0 0 auto; margin-left: auto; }
.fx-settings-close { display: grid; place-items: center; box-sizing: border-box; width: 38px; height: 38px; flex: 0 0 38px; margin-left: auto; padding: 0; border-color: rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; line-height: 1; cursor: pointer; }
.fx-settings-header, .fx-game-settings-header { min-height: 68px; box-sizing: border-box; }
.fx-settings-mark, .fx-game-settings-mark { box-sizing: border-box; width: 50px; height: 50px; flex: 0 0 50px; }
.fx-settings-body { grid-template-columns: 205px minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 18px; flex: 1; padding-top: 18px; }
.fx-settings-tabs { flex-direction: column; gap: 6px; min-height: 0; padding: 0 12px 0 0; overflow: auto; border-right: 1px solid rgba(144,183,212,.13); border-bottom: 0; background: transparent; }
.fx-settings-tabs button { display: flex; align-items: center; flex: 0 0 auto; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: #9bb2c7; text-align: left; }
.fx-settings-tabs button:hover { background: rgba(37,67,89,.35); color: #e6f3ff; }
.fx-settings-tabs button.is-active { border-color: rgba(94,216,163,.24); background: linear-gradient(105deg, rgba(25,112,78,.28), rgba(25,64,68,.3)); color: #d9ffed; box-shadow: none; }
.fx-settings-content { width: 100%; box-sizing: border-box; padding: 2px 4px 12px 1px; }
.fx-settings-actions { flex: 0 0 auto; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 13px 0 0; border-top-color: rgba(144,183,212,.14); background: transparent; color: #7e9bb4; font-size: .74em; }
.fx-settings-actions footer { justify-content: flex-end; }
.fx-settings-actions button { min-height: 34px; padding: 6px 12px; border-color: rgba(116,166,199,.2); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; }
.fx-settings-close-bottom { min-width: 86px; border-color: rgba(75,226,150,.25) !important; background: rgba(21,114,76,.32) !important; color: #dfffee !important; }
.fx-settings-tabs button { gap: 10px; font-size: .8em; font-weight: 620; }
.fx-settings-tabs button.is-active { font-weight: 650; }
.fx-settings-tabs button::after { content: "›"; margin-left: auto; color: #638099; font-size: 1.25em; line-height: 1; }
.fx-settings-tabs button.is-active::after { color: #8abbd0; }
.fx-settings-close { font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-settings-content { display: flex; flex-direction: column; overflow: hidden; }
.fx-settings-category-panel:not([hidden]) { min-height: 0; flex: 1 1 auto; }
.fx-settings-category-panel:not(.has-subsections) { overflow: auto; }
.fx-settings-category-panel.has-subsections { height: 100%; grid-template-rows: minmax(0,1fr); overflow: hidden; }
.fx-settings-subtabs { position: static; top: auto; height: 100%; max-height: none; overflow-x: hidden; overflow-y: auto; }
.fx-settings-subsection-panels { height: 100%; min-height: 0; overflow: hidden; }
.fx-settings-subsection-panel:not([hidden]) { height: 100%; box-sizing: border-box; overflow: auto; }
.fx-settings-content .settings-subsection-title { position: sticky; top: -2px; z-index: 2; padding: 5px 2px 9px; background: linear-gradient(180deg, rgba(14,31,49,.99) 80%, rgba(14,31,49,.9)); }
.fx-settings-category-panel > label,
.fx-settings-subsection-panel > label { margin: 0 0 8px; padding: 11px 13px; border-color: rgba(144,183,212,.13); border-radius: 10px; background: rgba(5,15,26,.53); color: #dceaf4; font-size: .82em; }
.fx-settings-category-panel > label:has(> button),
.fx-settings-subsection-panel > label:has(> button) { margin: 4px 0 8px; }
.fx-settings-content small { color: #829caf; }
.fx-settings-content .settings-subsection-title { margin: 12px 0 10px; border-bottom-color: rgba(144,183,212,.14); color: #f0f7fc; font-size: 1.2em; letter-spacing: -.025em; }
.fx-settings-content input:not([type="checkbox"]), .fx-settings-content select { height: 36px; box-sizing: border-box; border-color: rgba(116,166,199,.2); border-radius: 7px; background: rgba(1,8,16,.75); font: inherit; font-size: .76em; }
.fx-settings-content input[type="checkbox"] { accent-color: #57dba1; }
.fx-settings-content label.checkbox .checkmark { width: 18px; height: 18px; border-radius: 5px; }
.fx-settings-content label.checkbox input:checked ~ .checkmark::after { left: 5px; top: 2px; width: 5px; height: 9px; }
.fx-settings-native-actions { flex: 1 1 auto; }
.fx-settings-actions footer { justify-content: flex-start; }
@media (max-width: 700px) {
  .fx-settings-overlay { padding: 8px; }
  .fx-settings-dialog { height: min(850px, 100%); padding: 18px; border-radius: 16px; }
  .fx-settings-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 10px; }
  .fx-settings-tabs { flex-direction: row; padding: 0 0 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid rgba(144,183,212,.13); }
  .fx-settings-tabs button { flex: 0 0 auto; }
  .fx-settings-category-panel.has-subsections { grid-template-columns: minmax(104px,30%) minmax(0,1fr); column-gap: 12px; }
  .fx-settings-actions { flex-wrap: wrap; }
}
.fx-leaderboards-dashboard { width: min(1280px, 100%); height: min(900px, 100%); display: flex; flex-direction: column; box-sizing: border-box; padding: clamp(18px, 2.5vw, 30px); overflow: hidden; border: 1px solid rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.fx-leaderboards-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 18px; min-height: 0; flex: 1; padding-top: 18px; }
.fx-leaderboards-nav { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding-right: 12px; overflow: auto; border-right: 1px solid rgba(144,183,212,.13); }
.fx-leaderboards-nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9bb2c7; font: inherit; text-align: left; cursor: pointer; }
.fx-leaderboards-nav-item > span { display: grid; place-items: center; width: 25px; color: #8abbd0; font-size: 1.1em; }
.fx-leaderboards-nav-item strong { flex: 1; font-size: .8em; font-weight: 620; }
.fx-leaderboards-nav-item i { color: #638099; font-size: 1.1em; font-style: normal; }
.fx-leaderboards-nav-item:hover { background: rgba(37,67,89,.35); color: #e6f3ff; }
.fx-leaderboards-nav-item.is-active { border-color: rgba(94,216,163,.24); background: linear-gradient(105deg, rgba(25,112,78,.28), rgba(25,64,68,.3)); color: #d9ffed; }
.fx-leaderboards-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fx-leaderboards-listing-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fx-leaderboards-eyebrow { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.fx-leaderboards-listing-heading h2 { margin: 3px 0 0; color: #f0f7fc; font-size: 1.4em; letter-spacing: -.035em; }
.fx-leaderboards-row-count { padding: 6px 9px; border: 1px solid rgba(123,175,208,.16); border-radius: 8px; background: rgba(15,38,57,.55); color: #8ba8bd; font-size: .72em; white-space: nowrap; }
.fx-leaderboards-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.fx-leaderboards-quick-find { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; }
.fx-leaderboards-quick-find > span { margin-right: 2px; color: #7892a6; font-size: .69em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fx-leaderboards-quick-find button { min-height: 29px; padding: 5px 10px; border: 1px solid rgba(89,178,231,.23); border-radius: 7px; background: rgba(29,91,130,.2); color: #ccecff; font: inherit; font-size: .72em; font-weight: 650; cursor: pointer; transition: background .15s,border-color .15s,transform .15s; }
.fx-leaderboards-quick-find button:hover:not(:disabled) { border-color: rgba(105,199,255,.58); background: rgba(29,111,160,.34); transform: translateY(-1px); }
.fx-leaderboards-quick-find button:disabled { opacity: .42; cursor: not-allowed; }
.fx-leaderboards-filter-card { min-width: 0; padding: 10px; border: 1px solid rgba(144,183,212,.13); border-radius: 10px; background: rgba(5,15,26,.53); }
.fx-leaderboards-filter-card > strong { display: block; margin-bottom: 8px; color: #aec3d3; font-size: .73em; }
.fx-leaderboards-filter-fields { display: flex; align-items: end; gap: 6px; }
.fx-leaderboards-filter-fields label { display: grid; gap: 4px; min-width: 0; flex: 1; color: #718ba0; font-size: .63em; }
.fx-leaderboards-filter-fields label.is-grow { flex: 1.5; }
.fx-leaderboards-filter-fields label.is-quantity { flex: 0 0 56px; }
.fx-leaderboards-filter-fields input { box-sizing: border-box; width: 100%; min-width: 0; height: 31px; padding: 5px 7px; border: 1px solid rgba(116,166,199,.2); border-radius: 6px; outline: none; background: rgba(1,8,16,.75); color: #e4f1f8; font: inherit; font-size: 1.08em; }
.fx-leaderboards-filter-fields input:focus { border-color: rgba(105,199,255,.55); }
.fx-leaderboards-filter-fields button { flex: 0 0 auto; min-height: 31px; padding: 5px 8px; border: 1px solid rgba(75,226,150,.25); border-radius: 6px; background: rgba(21,114,76,.32); color: #dfffee; font: inherit; font-size: .67em; font-weight: 650; cursor: pointer; }
.fx-leaderboards-filter-fields button:hover { border-color: rgba(95,231,170,.55); background: rgba(21,114,76,.5); }
.fx-leaderboards-status { margin: 0 0 8px; color: #ffbd9c; font-size: .75em; }
.fx-leaderboards-table-card { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; border: 1px solid rgba(144,183,212,.14); border-radius: 11px; background: rgba(2,9,17,.44); }
.fx-leaderboards-table-scroll { min-height: 0; flex: 1; overflow: auto; }
.fx-leaderboards-table-scroll table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #dce9f2; font-size: .82em; }
.fx-leaderboards-table-scroll thead { position: sticky; top: 0; z-index: 1; background: rgba(15,76,45,.97); }
.fx-leaderboards-table-scroll th { padding: 10px 12px; border-bottom: 1px solid rgba(144,219,176,.24); color: #d3f2df; font-size: .78em; font-weight: 720; text-align: left; }
.fx-leaderboards-table-scroll td { padding: 9px 12px; overflow: hidden; border-bottom: 1px solid rgba(157,195,226,.09); color: #d9e5ee; text-overflow: ellipsis; white-space: nowrap; }
.fx-leaderboards-table-scroll tbody tr:nth-child(even) { background: rgba(255,255,255,.035); }
.fx-leaderboards-table-scroll tbody tr:hover { background: rgba(75,164,218,.1); }
.fx-leaderboards-table-scroll td:first-child { color: #9fc6df; font-variant-numeric: tabular-nums; }
.fx-leaderboards-table-scroll td.is-link { color: #e6dc65; }
.fx-leaderboards-table-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 150px; flex: 1; color: #8099ad; font-size: .85em; }
.fx-leaderboards-spinner { width: 15px; height: 15px; border: 2px solid rgba(121,170,198,.22); border-top-color: #78dcb1; border-radius: 50%; animation: fx-leaderboard-spin .8s linear infinite; }
@keyframes fx-leaderboard-spin { to { transform: rotate(360deg); } }
.fx-leaderboards-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 1px solid rgba(144,183,212,.12); color: #829caf; font-size: .7em; }
.fx-leaderboards-table-footer button { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(157,195,226,.14); border-radius: 7px; background: rgba(20,39,58,.65); color: #c7d9e6; font: inherit; cursor: pointer; }
.fx-leaderboards-table-footer button:disabled { opacity: .4; cursor: default; }
.fx-leaderboards-main-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; color: #7893a8; font-size: .7em; }
.fx-leaderboards-main-footer > span { display: inline-flex; align-items: center; gap: 7px; }
.fx-leaderboards-main-footer i { width: 6px; height: 6px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 8px rgba(82,228,154,.5); }
.fx-leaderboards-reset { padding: 5px 8px; border: 1px solid rgba(157,195,226,.12); border-radius: 7px; background: transparent; color: #96adbf; font: inherit; cursor: pointer; }
.fx-leaderboards-reset:hover { border-color: rgba(119,203,240,.36); color: #e4f1f8; }
@media (max-width: 980px) { .fx-leaderboards-layout { grid-template-columns: 165px minmax(0,1fr); gap: 12px; } .fx-leaderboards-filters { grid-template-columns: 1fr; overflow: auto; max-height: 31vh; } }
@media (max-width: 650px) { .fx-leaderboards-layout { display: flex; flex-direction: column; } .fx-leaderboards-nav { flex-direction: row; padding: 0 0 8px; overflow: auto; border-right: 0; border-bottom: 1px solid rgba(144,183,212,.13); } .fx-leaderboards-nav-item { min-width: max-content; } .fx-leaderboards-main { flex: 1; } .fx-leaderboards-filter-fields { flex-wrap: wrap; } }

.fx-custom-lobby-top,
.fx-custom-lobby-summary,
.fx-custom-lobby-content,
.fx-custom-lobby-bottom,
.fx-custom-lobby-player-header,
.fx-custom-lobby-modes,
.fx-custom-lobby-filters,
.fx-custom-lobby-actions {
	min-width: 0;
}

.fx-custom-lobby-top {
	display: grid;
	grid-template-rows: auto minmax(112px, auto);
	gap: 9px;
}

.fx-custom-lobby-heading,
.fx-custom-lobby-progress-card,
.fx-custom-lobby-next-card,
.fx-custom-lobby-player-panel,
.fx-custom-lobby-card,
.fx-custom-lobby-chat {
	border: 1px solid rgba(158, 194, 229, .24);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(16, 35, 57, .92), rgba(8, 20, 35, .91));
	box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}

.fx-custom-lobby-heading {
	flex: 1 1 30%;
	min-width: 180px;
	padding: 12px 18px;
}

.fx-custom-lobby-heading > span,
.fx-custom-lobby-next-card > span,
.fx-custom-lobby-map-card > span {
	display: block;
	color: #a8bdd0;
	font-size: .8em;
}

.fx-custom-lobby-heading h1 {
	margin: 2px 0 0;
	font-size: 1.65em;
	line-height: 1.15;
}

.fx-custom-lobby-mode-summary {
	display: block;
	margin-top: 4px;
	color: #78f0a7 !important;
	font-size: 1em !important;
}

.fx-custom-lobby-modes {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: calc(100% - max(190px, 24%) - 10px);
	padding: 2px 1px 5px;
	overflow-x: auto;
}

.fx-custom-lobby-entries {
	width: 100%;
}

.fx-custom-lobby-entry-empty {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	min-height: 5em;
	padding: 7px 14px;
	border: 1px dashed rgba(158, 194, 229, .28);
	border-radius: 11px;
	color: #a8bdd0;
	font-size: .86em;
}

.fx-custom-lobby-entry-map-image {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: 76%;
	height: 100%;
	object-fit: cover;
	opacity: .48;
	filter: saturate(1.18) contrast(1.12) brightness(.9);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 20%, #000 50%);
	pointer-events: none;
}

.fx-custom-lobby-entry > :not(.fx-custom-lobby-entry-map-image) {
	position: relative;
	z-index: 1;
}

.fx-custom-lobby button {
	box-sizing: border-box;
	min-width: 0;
	border: 1px solid rgba(158, 194, 229, .32);
	border-radius: 8px;
	background: rgba(11, 25, 42, .94);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.fx-custom-lobby button:hover,
.fx-custom-lobby button:focus-visible {
	border-color: rgba(90, 241, 155, .75);
	background-color: rgba(25, 65, 65, .92);
}

.fx-custom-lobby-mode {
	position: relative;
	overflow: hidden;
	display: grid;
	flex: 1 1 165px;
	grid-template-columns: 38px minmax(0, 1fr);
	grid-template-rows: auto minmax(1.2em, 1fr) auto;
	align-items: center;
	gap: 4px 10px;
	min-height: 5em;
	padding: 7px 11px;
	border-color: rgba(142, 179, 208, .18) !important;
	border-radius: 11px !important;
	background: linear-gradient(135deg, rgba(17, 36, 56, .94), rgba(7, 19, 33, .92)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.13);
	font-weight: 650 !important;
	text-align: left;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.fx-custom-lobby-mode::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--fx-mode-accent, #79aaff);
	content: "";
	opacity: .7;
}

.fx-custom-lobby-mode[data-mode="team"] { --fx-mode-accent: #d3a0ff; }
.fx-custom-lobby-mode[data-mode="battle-royale"] { --fx-mode-accent: #ffbd67; }
.fx-custom-lobby-mode[data-mode="duel"] { --fx-mode-accent: #77c9ff; }
.fx-custom-lobby-mode[data-mode="zombie"] { --fx-mode-accent: #8de59c; }
.fx-custom-lobby-mode:not(.is-active):hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--fx-mode-accent, #79aaff) 48%, transparent) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.24);
}

.fx-custom-lobby-entry[data-mode="team"] { --fx-mode-accent: #d3a0ff; }
.fx-custom-lobby-entry[data-mode="battle-royale"] { --fx-mode-accent: #ffbd67; }
.fx-custom-lobby-entry[data-mode="duel"] { --fx-mode-accent: #77c9ff; }
.fx-custom-lobby-entry[data-mode="zombie"] { --fx-mode-accent: #8de59c; }

.fx-custom-lobby-mode-emblem {
	display: grid;
	grid-column: 1;
	grid-row: 2 / 4;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--fx-mode-accent, #79aaff) 30%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--fx-mode-accent, #79aaff) 11%, transparent);
	color: var(--fx-mode-accent, #9bbcff);
}

.fx-custom-lobby-mode-emblem[data-mode="team"] { --fx-mode-accent: #d3a0ff; }
.fx-custom-lobby-mode-emblem[data-mode="battle-royale"] { --fx-mode-accent: #ffbd67; }
.fx-custom-lobby-mode-emblem[data-mode="duel"] { --fx-mode-accent: #77c9ff; }
.fx-custom-lobby-mode-emblem[data-mode="zombie"] { --fx-mode-accent: #8de59c; }
.fx-custom-lobby-mode-emblem.is-standalone {
	grid-column: auto;
	grid-row: auto;
	flex: 0 0 36px;
	margin: 0;
}

.fx-custom-lobby-mode-emblem svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fx-custom-lobby-mode-meta {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	color: #a8bdd0;
	font-size: .7em;
	font-weight: 500;
}

.fx-custom-lobby-mode-clock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fx-custom-lobby-mode-clock svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.fx-custom-lobby-mode-count {
	white-space: nowrap;
}

.fx-custom-lobby-mode-count-group {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.fx-custom-lobby-team-count {
	color: #d8e7f5;
	white-space: nowrap;
}

.fx-custom-lobby-mode-title {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-custom-lobby-mode-map {
	grid-column: 2;
	grid-row: 3;
	min-width: 0;
	color: #a8bdd0;
	font-size: .72em;
	font-weight: 450;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.fx-custom-lobby-entry-mode-label {
	grid-column: 2;
	grid-row: 3;
	min-width: 0;
	color: var(--fx-mode-accent, #a8bdd0);
	font-size: .72em;
	font-weight: 600;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.fx-custom-lobby-mode.is-active,
.fx-custom-lobby-filters button.is-active {
	border-color: rgba(88, 237, 157, .72) !important;
	background: linear-gradient(120deg, rgba(15, 87, 66, .94), rgba(10, 45, 51, .96)) !important;
	box-shadow: inset 0 0 0 1px rgba(100, 255, 170, .13), 0 0 18px rgba(49, 224, 140, .12);
}

.fx-custom-lobby-mode.is-active::before {
	width: 4px;
	opacity: 1;
}

.fx-custom-lobby-entry.is-contest,
.fx-custom-lobby-entry.is-contest:hover,
.fx-custom-lobby-entry.is-contest.is-active {
	border-color: rgba(255, 177, 61, .92) !important;
	background: radial-gradient(ellipse at 100% 0%, rgba(255, 164, 54, .28), transparent 64%),
		linear-gradient(135deg, rgba(55, 35, 26, .98), rgba(32, 29, 34, .96)) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 177, 61, .36), 0 0 18px rgba(244, 142, 35, .18);
}

.fx-custom-lobby-entry.is-contest::before {
	width: 4px;
	background: linear-gradient(180deg, #ffe08a, #ff9d35);
	opacity: 1;
}

.fx-custom-lobby-entry.is-contest.is-active {
	border-color: #ffe08a !important;
	background: radial-gradient(ellipse at 100% 0%, rgba(255, 195, 76, .4), transparent 64%),
		linear-gradient(135deg, rgba(80, 51, 27, .99), rgba(43, 34, 31, .98)) !important;
	box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .86), 0 0 24px rgba(255, 174, 50, .42);
}

.fx-custom-lobby-entry-selected {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 7px;
	padding: 2px 6px;
	border: 1px solid rgba(255, 224, 138, .7);
	border-radius: 999px;
	background: rgba(255, 210, 100, .16);
	color: #ffe9a8;
	font-size: .62em;
	font-weight: 750;
	vertical-align: middle;
}

.fx-custom-lobby-map-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(140px, 1fr) minmax(320px, 36%) minmax(220px, 27%);
	align-items: stretch;
	gap: 10px;
	min-height: 120px;
	padding: 14px 18px;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid rgba(158, 194, 229, .3);
	border-radius: 12px;
	background:
		radial-gradient(ellipse at 78% 5%, rgba(47, 230, 136, .18), transparent 35%),
		radial-gradient(ellipse at 15% 120%, rgba(28, 111, 157, .25), transparent 48%),
		linear-gradient(105deg, rgba(7, 23, 39, .98), rgba(13, 37, 55, .94) 56%, rgba(8, 24, 40, .98));
	box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 7px 24px rgba(0, 0, 0, .2);
}

.fx-custom-lobby-map-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, 24%);
	gap: 10px;
	min-height: 0;
}

.fx-custom-lobby-map-hero::after {
	position: absolute;
	inset: -65% 25% -80% 30%;
	border: 1px solid rgba(111, 239, 166, .12);
	border-radius: 50%;
	box-shadow: 0 0 0 18px rgba(111, 239, 166, .025), 0 0 0 38px rgba(111, 239, 166, .025), 0 0 0 58px rgba(111, 239, 166, .02);
	content: "";
	pointer-events: none;
}

.fx-custom-lobby-map-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: .55;
	filter: saturate(.92) contrast(1.08);
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .82) 42%, rgba(0, 0, 0, .28) 100%);
	pointer-events: none;
}

.fx-custom-lobby-map-heading {
	position: relative;
	z-index: 1;
	align-self: center;
	min-width: 0;
}

.fx-custom-lobby-map-heading > span {
	color: #a8bdd0;
	font-size: .82em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.fx-custom-lobby-map-heading h1 {
	margin: 2px 0 0;
	font-size: clamp(1.7em, 3vw, 2.6em);
	line-height: 1.05;
	font-weight: 760;
	letter-spacing: -.025em;
	text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}

.fx-custom-lobby-map-title-row,
.fx-custom-lobby-next-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fx-custom-lobby-map-title-row h1,
.fx-custom-lobby-next-title-row .fx-custom-lobby-next-title {
	min-width: 0;
}

.fx-custom-lobby-next-title-row {
	width: 100%;
}

.fx-custom-lobby-rating-card {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 10px;
	padding: 7px 11px;
	border: 1px solid rgba(128, 166, 196, .28);
	border-radius: 10px;
	background: rgba(5, 17, 31, .76);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
}
.fx-custom-lobby-rating-card img { width: 38px; height: 38px; object-fit: contain; }
.fx-custom-lobby-rating-card div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; }
.fx-custom-lobby-rating-card div > span { grid-column: 1 / -1; color: #a8bdd0; font-size: .7em; letter-spacing: .04em; text-transform: uppercase; }
.fx-custom-lobby-rating-card strong { color: #f2f7fc; font-size: 1.15em; }
.fx-custom-lobby-rating-card strong small, .fx-custom-lobby-rating-card div > small { color: #a8bdd0; font-size: .72em; font-weight: 500; }

.fx-custom-lobby-map-team-count {
	display: block;
	margin-top: 5px;
	color: #78f0a7;
	font-size: 1.2em;
	line-height: 1.1;
}

.fx-custom-lobby-map-mode-label {
	display: block;
	margin-top: 5px;
	color: #78f0a7;
	font-size: 1.05em;
	line-height: 1.15;
}

.fx-custom-lobby-contest-badge,
.fx-custom-lobby-rules-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-top: 8px;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: .78em;
	font-weight: 850;
	letter-spacing: .08em;
}

.fx-custom-lobby-contest-badge {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0 0 9px;
	color: #fff4d1;
	border: 1px solid rgba(255, 194, 74, .9);
	background: linear-gradient(120deg, #b84c13, #8c2119);
	box-shadow: 0 0 16px rgba(255, 141, 44, .32);
}

.fx-custom-lobby-map-hero.is-contest {
	border-color: rgba(255, 177, 61, .95);
	box-shadow: inset 0 0 0 2px rgba(255, 177, 61, .55), 0 0 24px rgba(244, 112, 35, .3);
	background: radial-gradient(ellipse at 78% 5%, rgba(255, 153, 47, .28), transparent 38%),
		radial-gradient(ellipse at 15% 120%, rgba(28, 111, 157, .25), transparent 48%),
		linear-gradient(105deg, rgba(46, 24, 17, .98), rgba(47, 38, 30, .94) 56%, rgba(24, 27, 37, .98));
}

.fx-custom-lobby-map-mode {
	display: inline-flex;
	align-self: start;
	margin-top: 4px;
	padding: 4px 9px;
	border: 1px solid color-mix(in srgb, var(--fx-mode-accent, #79aaff) 35%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--fx-mode-accent, #79aaff) 12%, rgba(2, 14, 26, .58));
	color: var(--fx-mode-accent, #c4d8ec);
	font-size: .76em;
	font-weight: 650;
}

.fx-custom-lobby-rules-badge {
	color: #e4f1ff;
	border: 1px solid rgba(125, 185, 255, .75);
	background: rgba(26, 73, 119, .9);
}
.fx-custom-lobby-map-details > .fx-custom-lobby-rules-badge {
	grid-column: 1 / -1;
	margin: 0;
}

.fx-custom-lobby-map-details {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: center;
	gap: 8px;
	padding: 10px 13px;
	border: 1px solid rgba(160, 198, 230, .17);
	border-radius: 10px;
	background: rgba(2, 14, 26, .48);
	backdrop-filter: blur(4px);
}

.fx-custom-lobby-map-details > div {
	display: grid;
	grid-template-columns: 20px minmax(70px, auto) minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: .9em;
}

.fx-custom-lobby-clan-chart-card {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 10px;
	border: 1px solid rgba(160, 198, 230, .17);
	border-radius: 10px;
	background: rgba(2, 14, 26, .48);
	backdrop-filter: blur(4px);
}

.fx-custom-lobby-clan-chart-pie {
	width: 104px;
	height: 104px;
	flex: 0 0 104px;
	overflow: visible;
}

.fx-custom-lobby-clan-chart-pie circle {
	fill: none;
	transform: rotate(-90deg);
	transform-origin: 21px 21px;
}

.fx-custom-lobby-clan-chart-track {
	stroke: rgba(184, 204, 222, .2);
	stroke-width: 7;
}

.fx-custom-lobby-clan-chart-slice {
	stroke-width: 7;
	transition: stroke-dasharray .25s ease, stroke-dashoffset .25s ease;
}

.fx-custom-lobby-clan-chart-pie text {
	fill: #fff;
	font: 700 8px/1 system-ui, sans-serif;
}

.fx-custom-lobby-clan-chart-legend {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: visible;
	font-size: .78em;
}

.fx-custom-lobby-clan-chart-legend > strong {
	flex: 0 0 100%;
	color: #c5d6e5;
	font-size: .92em;
}

.fx-custom-lobby-clan-chart-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: auto;
	max-width: 100%;
	padding: 3px 7px;
	border: 1px solid rgba(171, 202, 229, .18);
	border-radius: 999px;
	background: rgba(142, 180, 211, .08);
	white-space: nowrap;
}

.fx-custom-lobby-clan-chart-item i {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
}

.fx-custom-lobby-clan-chart-item b {
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-custom-lobby-clan-chart-item > span {
	color: #fff !important;
}

.fx-custom-lobby-clan-chart-empty {
	color: #a8bdd0;
	font-size: .92em;
}

.fx-custom-lobby-map-details > .fx-custom-lobby-entry-selection {
	grid-column: 1 / -1;
	min-height: 2.5em;
	margin-top: 2px;
	font-weight: 750;
}

.fx-custom-lobby-map-details svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #a8bdd0;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fx-custom-lobby-map-details span {
	color: #a8bdd0;
}

.fx-custom-lobby-map-details strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-custom-lobby-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, 24%);
	gap: 10px;
}

.fx-custom-lobby-progress-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	min-height: 58px;
}

.fx-custom-lobby-progress-text,
.fx-custom-lobby-next-card strong {
	font-size: 1.05em;
}

.fx-custom-lobby-progress-track {
	height: 12px;
	border-radius: 99px;
	background: rgba(169, 192, 216, .2);
	overflow: hidden;
}

.fx-custom-lobby-progress-fill {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #32e879, #12bf87);
	transition: width .2s ease;
}

.fx-custom-lobby-progress-percent {
	color: #73f397;
	font-size: 1.15em;
}

.fx-custom-lobby-progress-eta {
	color: rgba(224, 238, 250, .78);
	font-size: .9em;
	white-space: nowrap;
}

.fx-custom-lobby-next-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 9px;
	padding: 16px 20px;
	overflow: hidden;
	background: radial-gradient(ellipse at 100% 0%, rgba(62, 133, 183, .18), transparent 58%), linear-gradient(135deg, rgba(16, 35, 57, .96), rgba(8, 20, 35, .96));
}

.fx-custom-lobby-next-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .38;
	filter: saturate(.95) contrast(1.08) brightness(.8);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .62) 72%, rgba(0, 0, 0, .4));
	pointer-events: none;
}

.fx-custom-lobby-next-card > :not(.fx-custom-lobby-next-image) {
	position: relative;
	z-index: 1;
}

.fx-custom-lobby-next-card::before {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 3px;
	background: linear-gradient(90deg, #55b8ee, rgba(85, 184, 238, .12));
	content: "";
}

.fx-custom-lobby-next-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.fx-custom-lobby-next-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border: 1px solid rgba(118, 197, 238, .22);
	border-radius: 9px;
	background: rgba(75, 151, 193, .13);
	color: #8ed5f5;
}

.fx-custom-lobby-next-icon svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fx-custom-lobby-next-label {
	color: #b8cada;
	font-size: .82em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.fx-custom-lobby-next-card .fx-custom-lobby-next-title {
	color: #f2f8ff;
	font-size: clamp(1.35em, 1.8vw, 1.8em);
	font-weight: 800;
	line-height: 1.08;
}

.fx-custom-lobby-next-card .fx-custom-lobby-next-teams,
.fx-custom-lobby-next-card .fx-custom-lobby-next-mode-label {
	margin: 0;
	font-size: 1.05em;
}

.fx-custom-lobby-next-unknown,
.fx-custom-lobby-next-standard {
	margin-left: auto;
	padding: 5px 8px;
	border: 1px solid rgba(255, 199, 105, .26);
	border-radius: 7px;
	background: rgba(128, 85, 25, .2);
	color: #f4cd7e;
	font-size: .65em;
	font-weight: 800;
	letter-spacing: .04em;
	text-align: center;
}

.fx-custom-lobby-next-standard {
	border-color: rgba(100, 209, 159, .22);
	background: rgba(30, 109, 76, .17);
	color: #8de0b5;
}

.fx-custom-lobby-next-card.is-contest {
	border-color: rgba(255, 177, 61, .88);
	background: radial-gradient(ellipse at 100% 0%, rgba(255, 143, 45, .3), transparent 62%), linear-gradient(135deg, rgba(55, 35, 26, .98), rgba(24, 26, 39, .97));
	box-shadow: inset 0 0 0 1px rgba(255, 177, 61, .35), 0 0 22px rgba(244, 112, 35, .17);
}

.fx-custom-lobby-next-card.is-contest::before {
	background: linear-gradient(90deg, #ffc14c, rgba(255, 112, 44, .18));
}

.fx-custom-lobby-next-card.is-standard::before {
	background: linear-gradient(90deg, #4dd79a, rgba(77, 215, 154, .12));
}

.fx-custom-lobby-next-card.is-empty {
	border-style: dashed;
	border-color: rgba(158, 194, 229, .3);
	background: linear-gradient(135deg, rgba(20, 34, 49, .84), rgba(10, 20, 31, .9));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.fx-custom-lobby-next-card.is-empty::before {
	background: linear-gradient(90deg, rgba(158, 194, 229, .45), rgba(158, 194, 229, .05));
}

.fx-custom-lobby-next-card.is-empty .fx-custom-lobby-next-icon {
	border-color: rgba(158, 194, 229, .2);
	background: rgba(158, 194, 229, .07);
	color: #9fb3c7;
}

.fx-custom-lobby-next-card.is-empty .fx-custom-lobby-next-title {
	color: #c4d2df;
}

.fx-custom-lobby-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 24%);
	gap: 10px;
	min-height: 0;
}

.fx-custom-lobby-player-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.fx-custom-lobby-workspace {
	min-height: 0;
}

.fx-custom-lobby-workspace-tabs {
	display: flex;
	flex: 0 0 auto;
	gap: 5px;
	padding: 7px 8px;
	border-bottom: 1px solid rgba(158, 194, 229, .2);
	background: linear-gradient(180deg, rgba(9, 22, 37, .88), rgba(4, 14, 25, .62));
}

.fx-custom-lobby-workspace-tabs button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 6px 11px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: rgba(123, 160, 192, .045);
	color: #b4c7d8;
	font-weight: 650;
	white-space: nowrap;
	transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.fx-custom-lobby-workspace-tabs button > svg {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid currentColor;
	border-radius: 8px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .9;
}

.fx-custom-lobby-workspace-tabs button:hover:not(.is-active) {
	transform: translateY(-1px);
	border-color: rgba(158, 194, 229, .25);
	background: rgba(123, 160, 192, .12);
	color: #eff8ff;
}

.fx-custom-lobby-workspace-tabs button[data-tab="overview"] > svg { color: #79aaff; background: rgba(75, 130, 220, .13); }
.fx-custom-lobby-workspace-tabs button[data-tab="chat"] > svg { color: #75d5ed; background: rgba(50, 170, 200, .12); }
.fx-custom-lobby-workspace-tabs button[data-tab="players"] > svg { color: #70e4bd; background: rgba(42, 190, 135, .12); }
.fx-custom-lobby-workspace-tabs button[data-tab="clans"] > svg { color: #d3a0ff; background: rgba(155, 95, 210, .13); }
.fx-custom-lobby-workspace-tabs button[data-tab="team"] > svg { color: #ffc36e; background: rgba(220, 145, 55, .13); }
.fx-custom-lobby-workspace-tabs button[data-tab="calls"] > svg { color: #ff858d; background: rgba(210, 75, 90, .13); }

.fx-custom-lobby-workspace-tabs button.is-active {
	border-color: rgba(111, 220, 176, .42);
	background: linear-gradient(145deg, rgba(27, 105, 83, .52), rgba(15, 47, 53, .78));
	color: #f0fff5;
	box-shadow: 0 5px 14px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.fx-custom-lobby-workspace-tabs button.is-active > svg {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .1);
	color: #a4ffd0;
}

.fx-custom-lobby-workspace-tabs .fx-custom-lobby-tab-count {
	display: inline-grid;
	place-items: center;
	min-width: 2.1em;
	min-height: 1.8em;
	padding: 0 .35em;
	box-sizing: border-box;
	border: 1px solid rgba(165, 195, 222, .14);
	border-radius: 99px;
	background: rgba(2, 10, 18, .3);
	color: #c6d9e8;
	font-size: .76em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fx-custom-lobby-workspace-tabs button .fx-custom-lobby-chat-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.45em;
	height: 1.45em;
	border-radius: 99px;
	background: rgba(120, 240, 167, .18);
	color: #8cf4b0;
	font-size: .72em;
}

.fx-custom-lobby-roster-view,
.fx-custom-lobby-clans-view,
.fx-custom-lobby-chat-view {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.fx-custom-lobby-clans-view {
	gap: 8px;
	padding: 8px 10px;
	box-sizing: border-box;
}

.fx-custom-lobby-overview {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	min-height: 0;
	padding: 8px;
	box-sizing: border-box;
	overflow: hidden;
}

.fx-custom-lobby-overview-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	align-content: start;
	gap: 8px;
}

.fx-custom-lobby-overview-stats article,
.fx-custom-lobby-overview-top-ready {
	border: 1px solid rgba(158, 194, 229, .2);
	border-radius: 11px;
	background: linear-gradient(145deg, rgba(17, 37, 58, .94), rgba(8, 22, 38, .92));
	box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.fx-custom-lobby-overview-stats article {
	display: grid;
	align-content: start;
	gap: 2px;
	min-height: 68px;
	padding: 8px 11px;
	border-left: 3px solid rgba(87, 158, 199, .7);
	box-sizing: border-box;
}

.fx-custom-lobby-overview-stats article span,
.fx-custom-lobby-overview-name small,
.fx-custom-lobby-overview-clan {
	color: #a8bdd0;
	font-size: .84em;
}

.fx-custom-lobby-overview-stats article span {
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.fx-custom-lobby-overview-stats article strong {
	font-size: 1.25em;
}

.fx-custom-lobby-overview-stats article small {
	color: #a8bdd0;
	font-size: .78em;
}

.fx-custom-lobby-overview-stats .is-players { border-left-color: #47e995; }
.fx-custom-lobby-overview-stats .is-clans { border-left-color: #58b9f2; }
.fx-custom-lobby-overview-stats .is-team { border-left-color: #a98aff; }
.fx-custom-lobby-overview-stats .is-top-clan {
	border-left-color: #f4c96a;
	background: linear-gradient(135deg, rgba(75, 59, 28, .46), rgba(16, 31, 47, .95));
}

.fx-custom-lobby-overview-stats .is-top-clan strong {
	color: #ffe09a;
}

.fx-custom-lobby-overview-top-ready {
	padding: 10px;
}

.fx-custom-lobby-overview-top-ready > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.fx-custom-lobby-overview-top-ready h2 {
	margin: 0;
	font-size: 1em;
}

.fx-custom-lobby-overview-top-ready header p {
	margin: 3px 0 0;
	color: #8fa8bd;
	font-size: .78em;
}

.fx-custom-lobby-overview-count {
	padding: 4px 8px;
	border: 1px solid rgba(67, 233, 133, .25);
	border-radius: 999px;
	background: rgba(67, 233, 133, .08);
	color: #a9ffc8;
	font-size: .78em;
}

.fx-custom-lobby-overview-top-ready ol {
	display: grid;
	grid-auto-rows: 44px;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-custom-lobby-overview-top-ready li {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) minmax(0, auto);
	align-items: center;
	gap: 8px;
	padding: 6px 9px;
	border: 1px solid rgba(158, 194, 229, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .035);
	box-sizing: border-box;
	min-height: 44px;
	height: 44px;
	overflow: hidden;
}

.fx-custom-lobby-overview-top-ready li.is-self {
	background: rgba(17, 92, 61, .5);
}

.fx-custom-lobby-overview-place {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(132, 158, 180, .15);
	color: #c1d2df;
	font-size: .8em;
	font-weight: 800;
}

.fx-custom-lobby-overview-place.is-place-1 {
	background: rgba(248, 205, 103, .17);
	color: #ffdc88;
}

.fx-custom-lobby-overview-place.is-place-2 {
	background: rgba(193, 208, 221, .15);
	color: #d4e2ed;
}

.fx-custom-lobby-overview-place.is-place-3 {
	background: rgba(221, 150, 97, .16);
	color: #efb17e;
}

.fx-custom-lobby-overview-name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
}

.fx-custom-lobby-overview-name strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-custom-lobby-overview-name small {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 42%;
	color: #91a9bd;
	font-size: .72em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-custom-lobby-overview-clan {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 4px 7px;
	border: 1px solid rgba(89, 233, 145, .18);
	border-radius: 999px;
	background: rgba(89, 233, 145, .07);
	color: #a9ffc8;
	white-space: nowrap;
}

.fx-custom-lobby-clans-view > h2 {
	margin: 0;
	padding: .55em .8em;
	font-size: 1em;
}

.fx-custom-lobby-chat-view {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	gap: 10px;
	padding: 12px;
}

.fx-custom-lobby-player-header {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 7px 9px;
	border-bottom: 1px solid rgba(158, 194, 229, .18);
}

.fx-custom-lobby-player-header h2,
.fx-custom-lobby-card h2 {
	margin: 0;
	font-size: 1.05em;
}

.fx-custom-lobby-player-header input,
.fx-custom-lobby-sort select,
.fx-custom-lobby-chat input {
	box-sizing: border-box;
	min-width: 120px;
	padding: 6px 8px;
	border: 1px solid rgba(158, 194, 229, .32);
	border-radius: 7px;
	background: rgba(3, 11, 21, .68);
	color: inherit;
	font: inherit;
}

.fx-custom-lobby-player-header input {
	flex: 1 1 160px;
	min-width: 0;
}

.fx-custom-lobby-sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #a8bdd0;
	font-size: .78em;
}

.fx-custom-lobby-sort select {
	min-width: 135px;
	padding: 5px 7px;
	font: inherit;
}

.fx-custom-lobby-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.fx-custom-lobby-filter-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	width: auto;
	flex: 0 0 auto;
}

.fx-custom-lobby-filter-toolbar > .fx-custom-lobby-filters {
	flex-wrap: nowrap;
	flex: 0 0 auto;
	gap: 3px;
	padding: 0 4px;
	border-left: 1px solid rgba(158, 194, 229, .2);
}

.fx-custom-lobby-filter-toolbar > button,
.fx-custom-lobby-filter-toolbar .fx-custom-lobby-filters button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.fx-custom-lobby-filter-toolbar > button {
	padding: 8px 10px;
	font-size: .78em;
}

.fx-custom-lobby-filter-toolbar .fx-custom-lobby-filter-reset {
	margin-left: 0;
	border-color: rgba(255, 190, 110, .35);
	color: #ffd59b;
}

.fx-custom-lobby-filters button {
	padding: 4px 7px;
	font-size: .78em;
}

.fx-custom-lobby-clan-filters {
	flex-wrap: nowrap;
	width: 100%;
	gap: 8px;
}

.fx-custom-lobby-clan-filters button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.fx-custom-lobby-table-wrap {
	min-height: 0;
	flex: 1 1 auto;
	overflow: auto;
}

.fx-custom-lobby-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 3px;
	font-size: .92em;
}

.fx-custom-lobby-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 10px;
	background: #101f30;
	color: #aec4d8;
	text-align: left;
	font-size: .82em;
	font-weight: 600;
}

.fx-custom-lobby-table td {
	padding: 7px 10px;
	background: rgba(25, 43, 62, .72);
}

.fx-custom-lobby-table tbody tr {
	cursor: pointer;
}

.fx-custom-lobby-table tbody tr:hover td {
	background: rgba(34, 69, 86, .95);
}

.fx-custom-lobby-table tbody tr.is-self td {
	background: rgba(17, 92, 61, .65);
	color: var(--fx-custom-player-color, #a9ffc8);
}

.fx-custom-lobby-player-name {
	font-weight: 600;
	color: var(--fx-custom-player-color, inherit);
}

.fx-custom-lobby-player-clan {
	color: #59e991;
	font-weight: 650;
}

.fx-custom-lobby-player-status.is-ready {
	color: #70f49c;
}

.fx-custom-lobby-player-status.is-not-ready {
	color: #bcc8d4;
}

.fx-custom-lobby-status-dot {
	display: inline-block;
	width: .62em;
	height: .62em;
	margin-right: .55em;
	border-radius: 50%;
	background: #9ba8b5;
}

.fx-custom-lobby-status-dot.is-ready {
	background: #43e985;
	box-shadow: 0 0 7px rgba(67, 233, 133, .7);
}

.fx-custom-lobby-status-dot.is-not-ready {
	background: #aab6c2;
}

.fx-custom-lobby-side-panel {
	box-sizing: border-box;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	gap: 8px;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.fx-custom-lobby-side-stack {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 8px;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.fx-custom-lobby-current-player-card {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba(104, 186, 225, .28);
	border-radius: 10px;
	background: linear-gradient(120deg, rgba(17, 57, 78, .82), rgba(9, 30, 46, .9));
	box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.fx-custom-lobby-current-player-icon {
	display: grid;
	flex: 0 0 34px;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(109, 213, 176, .3);
	border-radius: 9px;
	background: rgba(52, 178, 133, .12);
	color: #79e6bb;
}

.fx-custom-lobby-current-player-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-custom-lobby-current-player-card > div { display: grid; min-width: 0; gap: 2px; }
.fx-custom-lobby-current-player-card > div > span { color: #a8bdd0; font-size: .68em; letter-spacing: .04em; text-transform: uppercase; }
.fx-custom-lobby-current-player-card strong { overflow: hidden; color: #e7f5ff; font-size: .92em; text-overflow: ellipsis; white-space: nowrap; }

.fx-custom-lobby-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 11px 12px;
}

.fx-custom-lobby-card-heading {
	display: flex;
	align-items: center;
	gap: 9px;
}

.fx-custom-lobby-clan-heading {
	display: flex;
	align-items: center;
	gap: 9px;
}

.fx-custom-lobby-clan-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	min-width: 0;
}

.fx-custom-lobby-clan-title h2 {
	margin: 0;
	color: #e8f1fb;
	font-size: .98em;
	font-weight: 650;
}

.fx-custom-lobby-clan-tag {
	padding: 2px 7px;
	border: 1px solid rgba(94, 184, 255, .26);
	border-radius: 999px;
	background: rgba(58, 145, 210, .13);
	color: #a8d9ff;
	font-size: .74em;
	font-weight: 700;
	letter-spacing: .035em;
}

.fx-custom-lobby-clan-ready {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 5px 8px;
	border: 1px solid rgba(67, 233, 133, .2);
	border-radius: 8px;
	background: rgba(67, 233, 133, .08);
	white-space: nowrap;
}

.fx-custom-lobby-clan-ready-value {
	color: #78f0a7;
	font-size: .92em;
	font-weight: 750;
}

.fx-custom-lobby-clan-ready-total {
	color: #b5c8da;
	font-weight: 600;
}

.fx-custom-lobby-clan-ready-label {
	color: #c5d5e3;
	font-size: .75em;
}

.fx-custom-lobby-card-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 8px;
	background: rgba(56, 231, 132, .13);
	color: #78f0a7;
	font-size: 1.2em;
}

.fx-custom-lobby-next-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 54px;
}

.fx-custom-lobby-next-teams {
	margin-top: 6px;
	color: #78f0a7;
	font-size: .9em;
	font-weight: 650;
}

.fx-custom-lobby-side-panel > .fx-custom-lobby-next-card {
	display: none;
}

.fx-custom-lobby-clan-members {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px;
	min-height: 0;
	overflow: auto;
}

.fx-custom-lobby-clan-member {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid transparent;
	max-width: 100%;
	padding: 4px 7px;
	border-radius: 5px;
	background: rgba(152, 184, 215, .1);
	font: inherit;
	font-size: .83em;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;
}

.fx-custom-lobby-clan-member:hover,
.fx-custom-lobby-clan-member:focus-visible {
	border-color: rgba(121, 191, 224, .38);
	background: rgba(152, 184, 215, .18);
	outline: none;
}

.fx-custom-lobby-clan-member .fx-custom-lobby-status-dot {
	width: .55em;
	height: .55em;
}

.fx-custom-lobby-map-stats {
	color: #a8bdd0;
}

.fx-custom-lobby-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.fx-custom-lobby-chat-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	gap: 8px;
	padding: 9px;
	min-height: 0;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(158, 194, 229, .24);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(16, 35, 57, .92), rgba(8, 20, 35, .91));
	box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}

.fx-custom-lobby-chat-status {
	color: #ffc66e;
	font-size: .8em;
}

.fx-custom-lobby-chat-messages {
	min-height: 0;
	max-height: none;
	overflow: auto;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(3, 11, 21, .34);
	color: #dbe8f4;
	font-size: .88em;
}

.fx-custom-lobby-chat-messages p {
	margin: 3px 0;
	padding: 2px 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.fx-custom-lobby-chat-player-name {
	margin: 0 5px 0 0;
	padding: 0 4px;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fx-custom-lobby-chat-player-name:hover,
.fx-custom-lobby-chat-player-name:focus-visible {
	text-decoration: underline;
	background: rgba(158, 194, 229, .1);
}

.fx-custom-lobby-chat-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.35;
}

.fx-custom-lobby-chat-context-menu {
	position: absolute;
	min-width: 160px;
	padding: 10px;
	display: grid;
	gap: 6px;
	border: 1px solid rgba(158, 194, 229, .3);
	border-radius: 9px;
	background: #101d2b;
	color: #eaf3fb;
	font: inherit;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
}

.fx-custom-lobby-chat-context-menu strong {
	padding: 3px 6px;
	font-size: .82em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-custom-lobby-chat-context-menu button {
	padding: 7px 9px;
	border: 1px solid rgba(158, 194, 229, .2);
	border-radius: 6px;
	background: rgba(66, 132, 192, .2);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fx-custom-lobby-chat-context-menu button:hover {
	background: rgba(66, 132, 192, .4);
}

.fx-custom-lobby-chat-empty {
	color: #91a6ba;
}

.fx-custom-lobby-chat-compose {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
}

.fx-custom-lobby-chat-compose input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(158, 194, 229, .32);
	border-radius: 7px;
	background: rgba(3, 11, 21, .68);
	color: inherit;
	font: inherit;
}

.fx-custom-lobby-chat-compose button,
.fx-custom-lobby-actions button {
	padding: 9px 12px;
}

.fx-custom-lobby-chat-compose .fx-custom-lobby-chat-clear {
	width: 36px;
	padding: 6px;
	border-color: rgba(158, 194, 229, .2);
	background: rgba(20, 39, 58, .55);
	color: #b4c7d8;
	font-size: 1.2em;
	line-height: 1;
}

.fx-custom-lobby-chat-compose .fx-custom-lobby-chat-clear:disabled {
	opacity: .45;
	cursor: default;
}

.fx-custom-lobby-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	min-height: 0;
}

.fx-custom-lobby-entry-selection.is-selected {
	border-color: rgba(74, 245, 145, .72);
	background: linear-gradient(120deg, #20a956, #10c884);
	color: #06140e;
	font-weight: 750;
}

.fx-custom-lobby-entry-selection.is-not-selected {
	border-color: rgba(255, 105, 105, .72);
	background: linear-gradient(120deg, #a9343b, #7d252d);
	color: #fff4f4;
	font-weight: 750;
}

.fx-custom-lobby-empty {
	padding: 24px !important;
	color: #afc2d5;
	text-align: center;
}

@media (max-width: 900px) {
	.fx-custom-lobby-player-header,
	.fx-custom-lobby-filter-toolbar {
		flex-wrap: wrap;
	}
	.fx-custom-lobby-filter-toolbar {
		width: 100%;
	}
	#fx-custom-lobby-view {
		grid-template-rows: auto auto minmax(320px, 1fr);
	}
	.fx-custom-lobby-content {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 30%);
	}
	.fx-custom-lobby-map-hero {
		grid-template-columns: minmax(0, 1fr) minmax(250px, 44%);
	}
	.fx-custom-lobby-clan-chart-card {
		grid-column: 1;
		grid-row: 2;
	}
	.fx-custom-lobby-map-details {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 650px) {
	.fx-custom-lobby-filter-toolbar,
	.fx-custom-lobby-clan-filters {
		flex-wrap: wrap;
	}
	.fx-custom-lobby-clan-filters button {
		white-space: normal;
	}
	#fx-custom-lobby-view {
		grid-template-rows: auto auto minmax(300px, 1fr);
		gap: 7px;
		padding: 8px;
	}
	.fx-custom-lobby-top {
		grid-template-rows: auto minmax(105px, auto);
	}
	.fx-custom-lobby-modes {
		min-height: 44px;
		width: 100%;
	}
	.fx-custom-lobby-map-hero {
		grid-template-columns: minmax(0, 1fr) minmax(170px, 42%);
		gap: 8px;
		padding: 11px;
	}
	.fx-custom-lobby-map-details {
		padding: 8px;
	}
	.fx-custom-lobby-map-details > div {
		grid-template-columns: 18px minmax(55px, auto) minmax(0, 1fr);
		gap: 5px;
		font-size: .8em;
	}
	.fx-custom-lobby-content {
		grid-template-columns: minmax(0, 1fr);
	}
	.fx-custom-lobby-side-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto;
	}
	.fx-custom-lobby-bottom {
		grid-template-columns: minmax(0, 1fr);
	}
	.fx-custom-lobby-map-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.fx-custom-lobby-clan-chart-card,
	.fx-custom-lobby-map-details {
		grid-column: auto;
		grid-row: auto;
	}
	.fx-custom-lobby-map-cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.fx-custom-lobby-summary {
		grid-template-columns: minmax(0, 1fr);
	}
	.fx-custom-lobby-map-details {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
	.fx-custom-lobby-progress-card {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.fx-custom-lobby-progress-eta {
		grid-column: 1 / -1;
	}
	.fx-custom-lobby-table th,
	.fx-custom-lobby-table td {
		padding: 6px;
	}
}

#fx-sidebar[hidden] {
	display: none;
}

#fx-sidebar-restore {
	position: fixed;
	left: 0;
	top: 50%;
	z-index: 26;
	display: none;
	width: 28px;
	min-height: 54px;
	transform: translateY(-50%);
	justify-content: center;
	padding: 4px 2px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-left: 0;
	border-radius: 0 6px 6px 0;
	background: rgba(7, 10, 20, .88);
}

#fx-sidebar-restore[hidden] {
	display: none;
}

html[data-fx-sidebar-hidden="true"] #fx-sidebar-restore {
	display: flex;
}

#fx-sidebar-restore.fx-vue-sidebar-restore {
	z-index: 10001;
	width: 42px;
	min-height: 76px;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 5px;
	border: 1px solid rgba(98, 240, 163, .58);
	border-left: 0;
	border-radius: 0 12px 12px 0;
	background: linear-gradient(160deg, rgba(11, 49, 51, .98), rgba(7, 17, 30, .98));
	box-shadow: 5px 0 18px rgba(0, 0, 0, .42), inset 0 0 12px rgba(70, 242, 145, .08);
	color: #81f4b0;
	cursor: pointer;
	transition: width .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#fx-sidebar-restore.fx-vue-sidebar-restore:hover,
#fx-sidebar-restore.fx-vue-sidebar-restore:focus-visible {
	width: 48px;
	border-color: rgba(98, 240, 163, .9);
	color: #d8ffe9;
	box-shadow: 7px 0 22px rgba(0, 0, 0, .5), inset 0 0 16px rgba(70, 242, 145, .16);
	outline: none;
}

#fx-sidebar-restore.fx-vue-sidebar-restore svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#fx-sidebar-restore.fx-vue-sidebar-restore span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fx-sidebar-heading {
	padding: 7px 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	white-space: nowrap;
}

.fx-vue-sidebar {
	background: linear-gradient(180deg, rgba(5, 11, 24, .98), rgba(6, 23, 32, .96) 72%, rgba(4, 48, 48, .98));
	border-right-color: rgba(103, 145, 180, .42) !important;
	gap: 12px !important;
	padding: 12px 10px !important;
}
.fx-vue-sidebar-brand, .fx-vue-sidebar-profile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-vue-sidebar-brand { padding: 4px 8px 12px; border-bottom: 1px solid rgba(162, 190, 215, .2); }
.fx-vue-sidebar-logo { display: block; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; box-shadow: 0 0 15px rgba(61, 190, 142, .2); }
.fx-vue-sidebar-brand strong, .fx-vue-sidebar-brand small, .fx-vue-sidebar-profile-copy strong, .fx-vue-sidebar-profile-copy span { display: block; }
.fx-vue-sidebar-brand strong { font-size: 16px; letter-spacing: .06em; }
.fx-vue-sidebar-brand small { color: #a8bdd0; font-size: 10px; }
.fx-vue-sidebar-profile { box-sizing: border-box; width: 100%; padding: 10px 8px; border: 1px solid rgba(105, 144, 177, .32); border-radius: 10px; background: rgba(14, 30, 48, .78); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fx-vue-sidebar-profile:hover { border-color: rgba(105, 211, 173, .52); background: rgba(18, 40, 58, .92); }
.fx-vue-sidebar-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: linear-gradient(145deg, #e7bb42, #986414); color: #fff8d9; font-size: 20px; font-weight: 800; }
.fx-vue-sidebar-avatar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-vue-sidebar-profile-copy { min-width: 0; flex: 1; }
.fx-vue-sidebar-profile-copy strong { overflow-wrap: anywhere; white-space: normal; }
.fx-vue-sidebar-profile-copy span { color: #a7b8c7; font-size: 11px; }
.fx-vue-sidebar-profile-copy .fx-vue-sidebar-account-id { display: block; margin-top: 2px; color: #8fa8bb; font-size: 10px; line-height: 1.2; }
.fx-vue-sidebar-profile-copy i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #39e88d; }
.fx-vue-sidebar-clan { color: #66f09a; font-weight: 700; }
.fx-vue-sidebar-summary { padding: 8px 10px; border-radius: 8px; background: rgba(6, 18, 33, .76); color: #d5e4f1; }
.fx-vue-sidebar-summary b, .fx-vue-sidebar-summary small { display: block; }
.fx-vue-sidebar-summary small { color: #a7b8c7; font-size: 10px; }
.fx-vue-sidebar-rating { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid rgba(105, 144, 177, .32); border-radius: 10px; background: rgba(14, 30, 48, .78); font-variant-numeric: tabular-nums; }
.fx-vue-sidebar-rating img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .42)); }
.fx-vue-sidebar-rating div { display: flex; flex-direction: column; min-width: 0; }
.fx-vue-sidebar-rating strong { font-size: 21px; line-height: 1; }
.fx-vue-sidebar-rating strong small { color: #a7b8c7; font-size: 11px; font-weight: 500; }
.fx-vue-sidebar-rating span { overflow: hidden; color: #a7b8c7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fx-vue-sidebar-navigation { flex: 1; gap: 12px; }
.fx-vue-sidebar-section { gap: 5px; }
.fx-vue-sidebar-section h2 { margin: 0; padding: 0 7px 3px; color: #8ea4b9; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.fx-vue-sidebar .fx-sidebar-button { min-height: 44px; border-color: transparent; border-radius: 8px; background: transparent; }
.fx-vue-sidebar .fx-sidebar-icon { font-size: 22px; }
.fx-vue-sidebar .fx-sidebar-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-vue-sidebar .fx-sidebar-button { gap: 10px; }
.fx-vue-sidebar .fx-sidebar-icon { display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; flex: 0 0 30px; margin-inline: 1px; line-height: 1; text-align: center; }
.fx-vue-sidebar .fx-sidebar-icon svg { display: block; width: 22px; height: 22px; }
.fx-vue-sidebar .fx-sidebar-label { font-size: 17px; }
.fx-vue-sidebar .fx-sidebar-button:hover, .fx-vue-sidebar .fx-sidebar-button.is-current { border-color: rgba(70, 242, 145, .7); background: linear-gradient(115deg, rgba(9, 115, 68, .82), rgba(9, 68, 58, .7)); }
.fx-vue-sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 5px 2px; margin-top: auto; color: #a8bdd0; font-size: 11px; }
.fx-vue-sidebar-footer .fx-vue-sidebar-version { white-space: nowrap; }
.fx-vue-sidebar-footer .fx-vue-sidebar-version i { margin-right: 6px; color: #4bf29a; font-style: normal; }
.fx-vue-sidebar-discord { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #a8bdd0; text-decoration: none; }
.fx-vue-sidebar-discord > span { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid rgba(126,155,180,.25); border-radius: 7px; background: rgba(88,101,242,.2); color: #c5cbff; font-size: 12px; font-weight: 800; }
.fx-vue-sidebar-discord b { font-size: 11px; font-weight: 600; }
.fx-vue-sidebar-discord:hover { color: #fff; }
.fx-vue-sidebar .fx-sidebar-mode-actions { border-top-color: rgba(162, 190, 215, .2); }
.fx-vue-sidebar .fx-sidebar-mode-action { font-size: 10px; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-brand div, .fx-vue-sidebar.is-collapsed .fx-vue-sidebar-profile-copy,
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-clan, .fx-vue-sidebar.is-collapsed .fx-vue-sidebar-summary,
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-rating div,
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-section h2, .fx-vue-sidebar.is-collapsed .fx-vue-sidebar-version, .fx-vue-sidebar.is-collapsed .fx-vue-sidebar-discord b,
.fx-vue-sidebar.is-collapsed .fx-sidebar-mode-action span { display: none; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-brand { justify-content: center; padding: 4px 0 9px; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-logo { width: 30px; height: 30px; flex-basis: 30px; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-profile { justify-content: center; padding: 2px 0; border-color: transparent; background: transparent; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-avatar svg { width: 19px; height: 19px; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-rating { justify-content: center; padding: 3px; border-color: transparent; background: transparent; }
.fx-vue-sidebar.is-collapsed .fx-vue-sidebar-rating img { width: 32px; height: 32px; flex-basis: 32px; }
.fx-vue-sidebar.is-collapsed .fx-sidebar-button { justify-content: center; padding-inline: 0; }
.fx-vue-sidebar.is-collapsed .fx-sidebar-icon { margin-inline: 0; }

.fx-sidebar-button {
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 9px;
	border: 1px solid rgba(255, 255, 255, .58);
	border-radius: 2px;
	background: rgba(0, 0, 0, .12);
	color: inherit;
	font: inherit;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.fx-sidebar-button:hover,
.fx-sidebar-button:focus-visible {
	border-color: rgba(255, 255, 255, .96);
	background: rgba(255, 255, 255, .08);
	outline: none;
}

.fx-sidebar-mode-actions {
	margin-top: auto;
	display: flex;
	gap: 4px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, .58);
}

.fx-sidebar-mode-action {
	width: auto;
	min-width: 0;
	min-height: 32px;
	flex: 1 1 0;
	padding: 4px 6px;
	border-color: rgba(255, 255, 255, .58);
	border-radius: 2px;
	font-size: 11px;
}

.fx-sidebar-mode-icon {
	width: 16px;
	flex: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.fx-sidebar-mode-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 700px) {
	#fx-sidebar.is-expanded {
		box-shadow: 6px 0 24px rgba(0, 0, 0, .48);
	}
}

.fx-sidebar-navigation {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-height: 0;
	overflow-y: auto;
}

.fx-sidebar-navigation[hidden] {
	display: none;
}

.fx-sidebar-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fx-sidebar-section + .fx-sidebar-section {
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, .42);
}

.fx-sidebar-section-heading {
	padding: 0 5px 2px;
	color: rgba(255, 255, 255, .72);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fx-sidebar-icon {
	width: 20px;
	flex: 0 0 20px;
	font-weight: 700;
	text-align: center;
}

.fx-sidebar-icon svg {
	display: block;
}

.fx-sidebar-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-sidebar-clock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 6px;
	border-block: 1px solid rgba(255, 255, 255, .58);
	color: rgba(255, 255, 255, .8);
	font-variant-numeric: tabular-nums;
}

.fx-sidebar-lobby {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 7px 5px 9px;
	border-bottom: 1px solid rgba(255, 255, 255, .58);
}

.fx-sidebar-lobby[hidden],
.fx-sidebar-lobby-actions[hidden],
.fx-sidebar-clan-join[hidden] {
	display: none;
}

.fx-sidebar-lobby-heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .72;
}

.fx-sidebar-lobby-summary {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.fx-sidebar-lobby-skill {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	padding: 8px 9px;
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 3px;
	background: rgba(255, 255, 255, .045);
}

.fx-sidebar-lobby-tier-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .42));
}

.fx-sidebar-lobby-tier-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fx-sidebar-lobby-tier-text[hidden] {
	display: none;
}

.fx-sidebar-lobby-rating-line {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.fx-sidebar-lobby-rating-value {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.fx-sidebar-lobby-rating-scale {
	font-size: 11px;
	opacity: .68;
}

.fx-sidebar-lobby-rating-meta {
	font-size: 11px;
	opacity: .76;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-sidebar-compact-rating {
	display: none;
	font-size: 10px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fx-sidebar-lobby-actions {
	width: 100%;
	margin-top: 3px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, .24);
}

.fx-sidebar-clan-join {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
	min-height: 30px;
	padding: 4px 9px;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 2px;
	background: rgba(25, 95, 65, .38);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.fx-sidebar-clan-join:hover,
.fx-sidebar-clan-join:focus-visible {
	background: rgba(35, 125, 80, .7);
	outline: none;
}

.fx-world-clock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 11px;
	white-space: nowrap;
}

.fx-world-clock svg {
	flex: 0 0 auto;
}

#fx-sidebar.is-collapsed {
	padding-inline: 5px;
}

#fx-sidebar.is-collapsed .fx-sidebar-heading {
	font-size: 0;
	padding: 0;
}

#fx-sidebar.is-collapsed .fx-sidebar-button {
	justify-content: center;
	padding-inline: 2px;
}

#fx-sidebar.is-collapsed .fx-sidebar-mode-label {
	display: none;
}

#fx-sidebar.is-collapsed .fx-sidebar-mode-action {
	justify-content: center;
	padding-inline: 1px;
}

#fx-sidebar.is-collapsed .fx-sidebar-label {
	display: none;
}

#fx-sidebar.is-collapsed .fx-sidebar-section-heading {
	display: none;
}

#fx-sidebar.is-collapsed .fx-sidebar-clock {
	padding-inline: 0;
	font-size: 9px;
	text-align: center;
}

#fx-sidebar.is-collapsed .fx-world-clock {
	gap: 3px;
}

#fx-sidebar.is-collapsed .fx-world-clock svg {
	width: 12px;
	height: 12px;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby {
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	border-bottom: 0;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-heading {
	display: none;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-summary {
	font-size: 10px;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-skill {
	flex-direction: column;
	justify-content: center;
	font-size: 9px;
	gap: 2px;
	padding: 0;
	border: 0;
	background: transparent;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-tier-icon {
	width: 32px;
	height: 32px;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-tier-text {
	display: none;
}

#fx-sidebar.is-collapsed .fx-sidebar-compact-rating:not([hidden]) {
	display: inline;
}

#fx-sidebar.is-collapsed .fx-sidebar-clan-join {
	justify-content: center;
	width: 30px;
	min-height: 27px;
	padding: 2px;
}

#fx-sidebar.is-collapsed .fx-sidebar-lobby-actions {
	width: auto;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#fx-sidebar.is-collapsed .fx-sidebar-clan-join span {
	display: none;
}

#windowContainer .window {
	left: 0;
	width: 90%;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.playerlist-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	margin-bottom: 8px;
}

.playerlist-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.playerlist-summary {
	color: #bfc7d5;
	font-size: 0.72em;
	white-space: nowrap;
}

.playerlist-controls {
	display: flex;
	align-items: center;
	gap: 4px;
}

.playerlist-controls input,
.playerlist-controls select {
	margin: 0 0 8px;
	min-width: 0;
}

.playerlist-controls input {
	width: min(30vw, 260px);
}

.playerlist-table-wrapper {
	overflow: auto;
	min-height: 0;
}

#playerlist table {
	width: 100%;
	border-spacing: 0 3px;
	table-layout: fixed;
}

#playerlist thead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: rgba(12, 15, 30, 0.97);
}

#playerlist th {
	padding: 6px 10px;
	color: #bfc7d5;
	font-size: 0.72em;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

#playerlist_content tr[data-player-id] {
	background: rgba(255, 255, 255, 0.07);
	transition: background-color 0.15s, transform 0.15s;
}

#playerlist_content tr[data-player-id]:hover {
	background: rgba(0, 255, 0, 0.2);
}

#playerlist_content.clickable tr[data-player-id] { cursor: pointer; }

#playerlist_content td {
	padding: 8px 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.playerlist-number {
	width: 3.5em;
	color: #aab2c0;
	text-align: right;
}

.playerlist-name {
	max-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.playerlist-status {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 9px;
	border-radius: 50%;
	vertical-align: middle;
	box-shadow: 0 0 7px currentColor;
}

.playerlist-status.human { color: #5ee68a; background: #5ee68a; }
.playerlist-status.bot { color: #b8b6ff; background: #b8b6ff; }

.playerlist-type {
	width: 5em;
	color: #bfc7d5;
	font-size: 0.78em;
	text-align: right;
}

.playerlist-section th {
	padding-top: 13px;
	color: #ffffff;
	font-size: 0.82em;
	text-transform: none;
	letter-spacing: 0;
}

.playerlist-section th span {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.8em;
}

.playerlist-empty {
	padding: 24px 10px !important;
	color: #bfc7d5;
	text-align: center;
}

@media (max-width: 600px) {
	.playerlist-toolbar,
	.playerlist-title,
	.playerlist-controls {
		align-items: stretch;
		flex-direction: column;
		gap: 4px;
	}
	.playerlist-controls input,
	.playerlist-controls select {
		width: 100%;
		margin: 0 0 4px;
	}
	.playerlist-summary { margin-bottom: 6px; }
	.playerlist-type { display: none; }
}

tr.new {
	animation: flashAnimation 0.4s ease-out;
}

@keyframes flashAnimation {
	0% {
		background-color: #ffffffaa;
	}
	100% {
		background-color: transparent;
	}
}

table {
	border-spacing: 0px;
}

input#userna,
input#inputfilebtn {
	transition: 0.2s
}

.selectable {
	user-select: text;
}

.color-red {
	color: #dc143c;
}

.color-green {
	color: #32cd32;
}

.color-light-gray {
	color: #aaaaaa;
}

/* Checkbox */
label.checkbox {
	display        : block;
	position       : relative;
	padding-left   : 35px;
	/*margin-bottom: 12px;*/
	cursor         : pointer;
}

label.checkbox input {
	position: absolute;
	opacity : 0;
	cursor  : pointer;
	height  : 0;
	width   : 0;
}

.checkmark {
	position          : absolute;
	top               : 0;
	left              : 0;
	height            : 25px;
	width             : 25px;
	/*background-color: #eee;*/
	background-color  : rgb(255 255 255 / 70%);
}

label.checkbox:hover .checkmark {
	background-color: #ccc;
}

label.checkbox input:checked~.checkmark {
	/*background-color: #2196F3;*/
	background-color: rgba(0, 255, 0, 0.5);
}

label.checkbox input:disabled~.checkmark {
	opacity: 0.5;
}

label.checkbox input:disabled {
	cursor: default;
}

label.checkbox:has(input:disabled) {
	cursor: default;
}

.checkmark::after {
	content : "";
	position: absolute;
	display : none;
}

label.checkbox input:checked~.checkmark:after {
	display: block;
}

label.checkbox .checkmark:after {
	left             : 9px;
	top              : 5px;
	width            : 5px;
	height           : 10px;
	border           : solid white;
	border-width     : 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform    : rotate(45deg);
	transform        : rotate(45deg);
}


#replayTimebar {
	position        : fixed;
	background-color: rgba(0, 0, 0, 0.7);
	width           : 60%;
	bottom          : calc(5vw + 12px);
	color           : white;
	font-family     : 'Trebuchet MS', 'Franklin Gothic Medium', Arial, sans-serif;
	margin          : auto;
	right           : 0;
	left            : 0;
	padding         : 8px 15px;
	box-sizing      : border-box;
	border-color    : white;
	border-style    : solid;
	border-width    : 2px;
	border-width    : calc(0.15 * (1vw + 1vh));
	font-size       : 20px;
	font-size       : calc(9px + ((0.5 * (1.1vw - 0.1vh)) + 0.14rem));
	align-items     : center;
	gap             : 10px;
	user-select     : none;
	transition      : 0.2s;
	z-index         : 9;
}

#replayTimebar .replay-time { min-width: 2.8em; text-align: center; white-space: nowrap; }

#replayTimebar .replay-track {
	position: relative; flex: 1; height: 14px; cursor: pointer; touch-action: none;
	background-color: rgb(255 255 255 / 70%);
}
#replayTimebar .replay-track:hover { background-color: #ccc; }

#replayTimebar .replay-fill {
	position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
	background-color: rgba(0, 255, 0, 0.5); pointer-events: none;
}

#replayTimebar .replay-fill::after {
	content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 22px;
	transform: translate(50%, -50%);
	background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.7);
}
#replayTimebar.seeking .replay-fill::after { animation: seekAnimation 0.8s ease-in-out infinite; }

#replayTimebar .replay-target {
	position: absolute; top: -4px; bottom: -4px; left: 0%; width: 3px;
	transform: translateX(-50%); background-color: #dc143c; pointer-events: none;
}

@keyframes seekAnimation {
	50% {
		opacity: 0.4;
	}
}

/* Custom emoji bar */
.emoji-bar-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0;
}
.emoji-bar-palette {
	display: grid;
	grid-template-columns: repeat(10, 34px);
	justify-content: start;
	gap: 2px;
	width: fit-content;
	max-width: 100%;
	margin: 6px 0;
	padding: 6px;
	background-color: rgba(30, 34, 20, 0.9);
	border: 1px solid #ffffff3d;
}
.emoji-bar-slots .emoji-slot, .emoji-bar-palette .emoji-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 2px;
	margin: 0;
	font-size: 20px;
	line-height: 1;
}
.emoji-bar-slots .emoji-slot img, .emoji-bar-palette .emoji-choice img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.emoji-bar-slots .emoji-slot.selected {
	background-color: rgba(0, 255, 0, 0.5);
	border-radius: 8px;
}
.emoji-bar-pager {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
}
/* who likes css :sob:

/* Custom Map Button */
::-webkit-file-upload-button {
	color           : white;
	background-color: #120076;
	border          : 2px solid #fff;
	top             : 0;
	bottom          : 0;
	padding-top     : 20px;
	padding-bottom  : 20px;
	padding-left    : 20px;
	padding-right   : 20px;
	font-family     : 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
	text-align      : center;
}

.fx-custom-lobby-calls-view { display: grid; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); align-content: start; align-items: stretch; gap: 10px; width: min(100%, 820px); min-height: 0; overflow: hidden; margin: 0 auto; padding: 10px; box-sizing: border-box; }
.fx-custom-lobby-call-section { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 0; padding: 10px; border: 1px solid rgba(115,168,197,.2); border-radius: 13px; background: linear-gradient(150deg, rgba(18,39,55,.82), rgba(6,17,28,.82)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.12); }
.fx-custom-lobby-call-heading { align-self: stretch; width: min(100%, 680px); }
.fx-custom-lobby-call-heading h3 { margin: 0; color: #e5f4ff; font-size: .95em; font-weight: 750; }
.fx-custom-lobby-call-heading p { margin: 4px 0 0; color: #a5bacb; font-size: .76em; line-height: 1.4; }
.fx-custom-lobby-call-join-group { width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(115,168,197,.18); }
.fx-custom-lobby-call-join-heading h3 { margin: 0 0 8px; color: #e5f4ff; font-size: .9em; font-weight: 750; }
.fx-custom-lobby-call-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: 100%; }
.fx-custom-lobby-call-actions button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 46px; padding: 8px 13px; border: 1px solid rgba(93,196,155,.38); border-radius: 10px; background: linear-gradient(145deg, rgba(22,112,83,.64), rgba(13,67,61,.72)); color: #e3fff3; font: inherit; font-size: .82em; font-weight: 750; text-align: left; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.05); transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.fx-custom-lobby-call-actions button svg { flex: 0 0 23px; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #91f2c6; }
.fx-custom-lobby-call-actions button:hover:not(:disabled), .fx-custom-lobby-call-actions button:focus-visible { transform: translateY(-1px); border-color: rgba(112,255,192,.8); background: linear-gradient(145deg, rgba(27,145,103,.78), rgba(17,91,76,.84)); box-shadow: 0 5px 16px rgba(20,178,119,.16); outline: none; }
.fx-custom-lobby-call-actions button:disabled { opacity: .4; cursor: not-allowed; }
.fx-custom-lobby-call-compass { display: grid; grid-template-columns: repeat(3, minmax(64px, 78px)); grid-template-rows: repeat(3, 46px); gap: 4px; padding: 5px; border: 1px solid rgba(115,168,197,.18); border-radius: 14px; background: radial-gradient(circle at center, rgba(28,91,123,.32), rgba(4,15,24,.72) 72%); box-shadow: 0 12px 28px rgba(0,0,0,.17), inset 0 0 24px rgba(92,175,214,.05); }
.fx-custom-lobby-call-spawn-section .fx-custom-lobby-call-heading p { display: none; }
.fx-custom-lobby-call-compass button { display: grid; place-items: center; padding: 0; border: 1px solid rgba(112,174,207,.23); border-radius: 12px; background: linear-gradient(145deg, rgba(35,79,104,.55), rgba(10,27,40,.85)); color: #e0f5ff; cursor: pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.fx-custom-lobby-call-compass button:hover:not(:disabled), .fx-custom-lobby-call-compass button:focus-visible { transform: scale(1.06); border-color: rgba(107,207,255,.75); background: rgba(29,102,139,.62); outline: none; }
.fx-custom-lobby-call-compass button:disabled { opacity: .4; cursor: not-allowed; }
.fx-custom-lobby-call-compass button > span { font-size: 1.9em; line-height: 1; }
.fx-custom-lobby-call-message { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: min(100%, 420px); margin-top: 0; }
.fx-custom-lobby-call-message input { min-width: 0; height: 36px; padding: 7px 10px; border: 1px solid rgba(112,174,207,.24); border-radius: 8px; outline: none; background: rgba(4,15,24,.72); color: #e7f5fc; font: inherit; font-size: .78em; }
.fx-custom-lobby-call-message input:focus { border-color: rgba(105,199,255,.65); }
.fx-custom-lobby-call-message input:disabled { opacity: .48; }
.fx-custom-lobby-call-message button { min-width: 70px; padding: 6px 12px; border: 1px solid rgba(96,190,144,.3); border-radius: 8px; background: rgba(21,92,63,.38); color: #dfffee; font: inherit; font-size: .78em; font-weight: 700; cursor: pointer; }
.fx-custom-lobby-call-message button:hover:not(:disabled) { border-color: rgba(94,235,164,.65); background: rgba(26,122,79,.55); }
.fx-custom-lobby-call-message button:disabled { opacity: .4; cursor: not-allowed; }
.fx-custom-lobby-call-message > span { grid-column: 1 / -1; color: #a8eec7; font-size: .7em; }
@media (max-width: 700px) { .fx-custom-lobby-calls-view { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .fx-custom-lobby-call-heading { width: 100%; } }
@media (max-width: 650px) { .fx-custom-lobby-call-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .fx-custom-lobby-call-actions button { gap: 5px; min-height: 40px; padding: 6px; font-size: .72em; } .fx-custom-lobby-call-actions button svg { flex-basis: 18px; width: 18px; height: 18px; } .fx-custom-lobby-call-compass { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 44px); gap: 4px; width: min(100%, 190px); box-sizing: border-box; padding: 5px; } .fx-custom-lobby-call-compass button > span { font-size: 1.5em; } }

#fx-my-account-view-root { display: contents; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.fx-my-account-overlay { position: fixed; inset: 0; z-index: 10004; display: grid; place-items: center; box-sizing: border-box; padding: clamp(14px, 3vw, 44px); background: radial-gradient(ellipse at 16% 12%, rgba(36,116,151,.22), transparent 36%), radial-gradient(ellipse at 86% 82%, rgba(24,145,105,.13), transparent 34%), rgba(3,9,17,.95); color: #edf6ff; font: inherit; pointer-events: auto; backdrop-filter: blur(12px); }
.fx-my-account-dialog { width: min(920px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(144,195,231,.22); border-radius: 22px; background: linear-gradient(145deg, rgba(14,31,49,.98), rgba(7,19,34,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.fx-my-account-layout { display: grid; grid-template-columns: 176px minmax(0,1fr); flex: 1; min-height: 0; }
.fx-my-account-nav { display: flex; flex-direction: column; gap: 5px; padding: 18px 12px; border-right: 1px solid rgba(144,183,212,.12); background: rgba(4,13,24,.22); }
.fx-my-account-nav button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #8fa7b9; text-align: left; font: inherit; font-size: .78em; cursor: pointer; }
.fx-my-account-nav button > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: rgba(68,102,128,.2); color: #9ac9dc; font-size: 1.05em; }
.fx-my-account-nav button:hover { background: rgba(30,57,78,.36); color: #d8e8f3; }
.fx-my-account-nav button.is-active { border-color: rgba(104,192,224,.18); background: linear-gradient(90deg,rgba(40,115,148,.27),rgba(30,71,98,.18)); color: #e6f6ff; }
.fx-my-account-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow: auto; padding: 20px 24px; }
.fx-my-account-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fx-my-account-section-heading { padding: 2px 1px 3px; }
.fx-my-account-section-heading small { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; }
.fx-my-account-section-heading h2 { margin: 4px 0 0; color: #eff7ff; font-size: 1.15em; }
.fx-my-account-action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.fx-my-account-action-grid button { display: flex; align-items: center; gap: 9px; min-height: 62px; padding: 10px; border: 1px solid rgba(144,183,212,.14); border-radius: 11px; background: rgba(10,23,37,.62); color: #dceaf4; font: inherit; text-align: left; cursor: pointer; }
.fx-my-account-action-grid button:hover,.fx-my-account-action-card button:hover,.fx-my-account-form-card button:hover { border-color: rgba(104,192,224,.4); background-color: rgba(33,77,103,.45); }
.fx-my-account-action-grid button > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: rgba(41,75,101,.4); color: #95cce0; font-size: 1.1em; }
.fx-my-account-action-grid button strong { flex: 1; font-size: .72em; line-height: 1.25; }
.fx-my-account-action-grid button i { color: #7e9bb4; font-size: 1.2em; font-style: normal; }
.fx-my-account-action-grid button.is-danger { border-color: rgba(239,130,120,.17); }
.fx-my-account-action-grid button.is-danger > span { background: rgba(120,46,49,.22); color: #e9aaa5; }
.fx-my-account-action-card,.fx-my-account-form-card { display: flex; flex-direction: column; gap: 11px; padding: 15px; border: 1px solid rgba(144,183,212,.13); border-radius: 13px; background: rgba(10,23,37,.62); }
.fx-my-account-action-card > div strong,.fx-my-account-form-card > div strong { color: #e7f1f9; font-size: .84em; }
.fx-my-account-action-card p,.fx-my-account-form-card > div p { margin: 4px 0 0; color: #8199ac; font-size: .72em; line-height: 1.4; }
.fx-my-account-action-card > button,.fx-my-account-form-card button,.fx-my-account-form-actions button { align-self: flex-start; min-height: 34px; padding: 7px 11px; border: 1px solid rgba(75,226,150,.22); border-radius: 8px; background: rgba(21,114,76,.25); color: #dfffee; font: inherit; font-size: .74em; font-weight: 650; cursor: pointer; }
.fx-my-account-action-card > button span { padding-left: 7px; color: #7bcaab; }
.fx-my-account-form-card label { display: flex; flex-direction: column; gap: 6px; color: #91a8bd; font-size: .7em; }
.fx-my-account-form-card input,.fx-my-account-form-card textarea { width: 100%; box-sizing: border-box; min-height: 37px; padding: 8px 10px; border: 1px solid rgba(144,183,212,.18); border-radius: 8px; outline: none; background: rgba(4,12,23,.62); color: #e7f5fc; font: inherit; font-size: .95em; }
.fx-my-account-form-card textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
.fx-my-account-form-card input:focus,.fx-my-account-form-card textarea:focus { border-color: rgba(105,199,255,.65); }
.fx-my-account-form-card button:disabled { opacity: .45; cursor: not-allowed; }
.fx-my-account-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8199ac; font-size: .72em; }
.fx-my-account-form-actions button { margin-left: auto; }
.fx-my-account-header { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(144,183,212,.14); }
.fx-my-account-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(119,203,240,.25); border-radius: 15px; background: linear-gradient(145deg, rgba(39,125,162,.2), rgba(32,116,160,.15)); color: #a4dbeb; }
.fx-my-account-mark svg { width: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.fx-my-account-header small { color: #7e9bb4; font-size: .67em; font-weight: 750; letter-spacing: .15em; }
.fx-my-account-header h1 { margin: 2px 0; color: #f2f8ff; font-size: 1.6em; letter-spacing: -.035em; }
.fx-my-account-header p { margin: 0; color: #91a8bd; font-size: .82em; }
.fx-my-account-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(158,195,225,.18); border-radius: 10px; background: rgba(4,12,23,.55); color: #b7cbd9; font: inherit; font-size: 1.5em; cursor: pointer; }
.fx-my-account-content { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 20px 24px; }
.fx-my-account-profile,.fx-my-account-id-card,.fx-my-account-tools { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border: 1px solid rgba(144,183,212,.13); border-radius: 13px; background: rgba(10,23,37,.62); }
.fx-my-account-data { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid rgba(144,183,212,.13); border-radius: 13px; background: rgba(10,23,37,.62); }
.fx-my-account-data > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-my-account-data > header small { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; }
.fx-my-account-data h2 { margin: 3px 0; color: #eff7ff; font-size: 1.05em; }
.fx-my-account-data h3 { margin: 3px 0 0; color: #8fa9bd; font-size: .69em; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.fx-my-account-data > header > span { padding: 5px 8px; border: 1px solid rgba(144,183,212,.16); border-radius: 999px; color: #94aabc; font-size: .66em; }
.fx-my-account-data > header > span.is-verified { border-color: rgba(82,228,154,.25); background: rgba(21,114,76,.18); color: #9df0c3; }
.fx-my-account-native-status { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #c8d9e6; font-size: .72em; }
.fx-my-account-native-status > strong { color: #8199ac; font-size: .9em; }
.fx-my-account-native-status > span { padding: 3px 7px; border-radius: 999px; font-size: .84em; }
.fx-my-account-native-status > span.is-online { background: rgba(21,114,76,.2); color: #9df0c3; }
.fx-my-account-native-status > span.is-offline { background: rgba(91,111,131,.18); color: #a5bac8; }
.fx-my-account-native-status > small { flex-basis: 100%; color: #8199ac; }
.fx-my-account-metrics,.fx-my-account-stats,.fx-my-account-clans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.fx-my-account-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fx-my-account-metrics article,.fx-my-account-stats article,.fx-my-account-clans article { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; border: 1px solid rgba(144,183,212,.1); border-radius: 9px; background: rgba(5,15,26,.42); }
.fx-my-account-metrics small,.fx-my-account-stats small,.fx-my-account-clans small { overflow: hidden; color: #829caf; font-size: .65em; text-overflow: ellipsis; white-space: nowrap; }
.fx-my-account-metrics strong,.fx-my-account-stats strong,.fx-my-account-clans strong { color: #ecf6ff; font-size: .95em; }
.fx-my-account-metrics i,.fx-my-account-stats i,.fx-my-account-clans i { color: #7895a9; font-size: .68em; font-style: normal; font-weight: 500; }
.fx-my-account-stats span,.fx-my-account-clans span { color: #91a7b8; font-size: .64em; line-height: 1.35; }
.fx-my-account-bio { padding: 10px; border: 1px solid rgba(144,183,212,.1); border-radius: 9px; background: rgba(5,15,26,.42); }
.fx-my-account-bio small { color: #829caf; font-size: .65em; font-weight: 700; text-transform: uppercase; }
.fx-my-account-bio p { margin: 6px 0 0; color: #d3e2ed; font-size: .76em; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-my-account-saved-accounts { display: flex; flex-direction: column; gap: 8px; padding: 15px; border: 1px solid rgba(144,183,212,.13); border-radius: 13px; background: rgba(10,23,37,.62); }
.fx-my-account-saved-accounts > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-my-account-saved-accounts > header small { color: #78c7a6; font-size: .64em; font-weight: 800; letter-spacing: .13em; }
.fx-my-account-saved-accounts > header h2 { margin: 3px 0; color: #eff7ff; font-size: 1.05em; }
.fx-my-account-saved-accounts > header > span { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border: 1px solid rgba(123,175,208,.16); border-radius: 999px; color: #9eb6c9; font-size: .72em; }
.fx-my-account-empty { margin: 0; padding: 8px 2px 2px; color: #8199ac; font-size: .76em; }
.fx-my-account-saved-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(144,183,212,.1); border-radius: 9px; background: rgba(5,15,26,.42); }
.fx-my-account-saved-row > div { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.fx-my-account-saved-row strong { overflow: hidden; color: #dceaf4; font-size: .82em; text-overflow: ellipsis; white-space: nowrap; }
.fx-my-account-saved-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: rgba(41,75,101,.4); color: #95cce0; }
.fx-my-account-saved-row button { min-height: 31px; padding: 5px 9px; border: 1px solid rgba(75,226,150,.2); border-radius: 7px; background: rgba(21,114,76,.22); color: #dfffee; font: inherit; font-size: .7em; cursor: pointer; }
.fx-my-account-saved-row button.is-remove { border-color: rgba(239,130,120,.18); background: rgba(120,46,49,.17); color: #e9b9b8; }
.fx-my-account-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(106,210,169,.25); border-radius: 14px; background: rgba(26,113,80,.24); color: #bcf4d9; font-size: 1.3em; font-weight: 750; }
.fx-my-account-profile-copy,.fx-my-account-id-card > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.fx-my-account-profile-copy small,.fx-my-account-id-card small { color: #829caf; font-size: .68em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fx-my-account-profile-copy strong,.fx-my-account-id-card strong { overflow: hidden; color: #eef7ff; font-size: 1em; text-overflow: ellipsis; white-space: nowrap; }
.fx-my-account-primary,.fx-my-account-id-card button,.fx-my-account-tools > button { min-height: 37px; padding: 7px 11px; border: 1px solid rgba(75,226,150,.22); border-radius: 9px; background: rgba(21,114,76,.25); color: #dfffee; font: inherit; font-size: .76em; font-weight: 650; cursor: pointer; }
.fx-my-account-primary span,.fx-my-account-tools > button span { padding-left: 8px; color: #7bcaab; font-size: 1.25em; }
.fx-my-account-id-card button { border-color: rgba(144,183,212,.18); background: rgba(31,53,73,.58); color: #d4e5f2; }
.fx-my-account-id-card button:disabled { opacity: .5; cursor: default; }
.fx-my-account-tools { justify-content: space-between; }
.fx-my-account-tools > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-my-account-tools-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; border-radius: 11px; background: rgba(41,75,101,.4); color: #95cce0; font-size: 1.2em; }
.fx-my-account-tools strong { color: #e7f1f9; font-size: .83em; }
.fx-my-account-tools p { margin: 4px 0 0; color: #8098ac; font-size: .72em; }
.fx-my-account-status { margin: 0; color: #88e2b5; font-size: .76em; }
.fx-my-account-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 24px; border-top: 1px solid rgba(144,183,212,.14); color: #7e9bb4; font-size: .74em; }
.fx-my-account-footer > span { display: inline-flex; align-items: center; gap: 8px; }
.fx-my-account-footer i { width: 7px; height: 7px; border-radius: 50%; background: #52e49a; box-shadow: 0 0 10px rgba(82,228,154,.55); }
.fx-my-account-footer button { min-width: 86px; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(157,195,226,.16); border-radius: 8px; background: rgba(20,39,58,.76); color: #d9e9f5; font: inherit; cursor: pointer; }
@media (max-width: 620px) { .fx-my-account-dialog { max-height: 94vh; } .fx-my-account-header { padding: 17px; } .fx-my-account-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); } .fx-my-account-nav { flex-direction: row; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid rgba(144,183,212,.12); } .fx-my-account-nav button { flex: 0 0 auto; min-height: 36px; padding: 6px 9px; } .fx-my-account-content { padding: 15px 17px; } .fx-my-account-profile { flex-wrap: wrap; } .fx-my-account-primary { margin-left: auto; } .fx-my-account-tools { align-items: flex-start; flex-direction: column; } .fx-my-account-stats { grid-template-columns: 1fr; } .fx-my-account-action-grid { grid-template-columns: 1fr; } }

/* Improve readability across the account dashboard's secondary labels and details. */
.fx-my-account-dialog { font-size: clamp(16px, 1.05vw, 18px); }
.fx-my-account-nav button { font-size: .9em; }
.fx-my-account-section-heading small,
.fx-my-account-header small,
.fx-my-account-data > header small,
.fx-my-account-saved-accounts > header small { font-size: .76em; }
.fx-my-account-header p { font-size: .9em; }
.fx-my-account-action-grid button strong { font-size: .85em; }
.fx-my-account-action-card > div strong,
.fx-my-account-form-card > div strong { font-size: .92em; }
.fx-my-account-action-card p,
.fx-my-account-form-card > div p,
.fx-my-account-tools p { font-size: .84em; }
.fx-my-account-action-card > button,
.fx-my-account-form-card button,
.fx-my-account-form-actions button,
.fx-my-account-primary,
.fx-my-account-id-card button,
.fx-my-account-tools > button,
.fx-my-account-saved-row button { font-size: .86em; }
.fx-my-account-form-card label { font-size: .82em; }
.fx-my-account-form-actions,
.fx-my-account-footer { font-size: .82em; }
.fx-my-account-data h3 { font-size: .8em; }
.fx-my-account-data > header > span,
.fx-my-account-native-status,
.fx-my-account-metrics small,
.fx-my-account-stats small,
.fx-my-account-clans small,
.fx-my-account-bio small,
.fx-my-account-profile-copy small,
.fx-my-account-id-card small { font-size: .78em; }
.fx-my-account-data .fx-my-account-metrics i,
.fx-my-account-data .fx-my-account-stats i,
.fx-my-account-data .fx-my-account-clans i { font-size: .78em; }
.fx-my-account-stats span,
.fx-my-account-clans span { font-size: .78em; }
.fx-my-account-bio p { font-size: .86em; }
.fx-my-account-empty,
.fx-my-account-status,
.fx-my-account-tools strong { font-size: .88em; }
.fx-my-account-saved-accounts > header > span { font-size: .82em; }
.fx-my-account-saved-row strong { font-size: .92em; }
.fx-my-account-profile-copy strong,
.fx-my-account-id-card strong { font-size: 1.06em; }

/* User-selected ZFX surface transparency and accent palette. */
#fx-custom-lobby-view {
	background-image: linear-gradient(145deg, rgba(6, 15, 29, var(--fx-ui-backdrop-alpha, .85)), rgba(9, 20, 35, var(--fx-ui-backdrop-alpha, .85))),
		linear-gradient(145deg, rgba(6, 15, 29, var(--fx-ui-panel-alpha, .83)), rgba(9, 20, 35, var(--fx-ui-panel-alpha, .83))),
		var(--fx-custom-lobby-map-background, linear-gradient(145deg, #06101d, #091423));
	background-position: center, center, center;
	background-size: cover, cover, cover;
	background-repeat: no-repeat;
}
.fx-settings-dialog,
.fx-game-settings-dialog,
.fx-leaderboards-dashboard,
.fx-logs-dashboard,
.fx-replay-view,
.fx-my-account-dialog,
.fx-home-name-card {
	background: linear-gradient(145deg, rgba(14, 31, 49, var(--fx-ui-panel-alpha, .83)), rgba(7, 19, 34, var(--fx-ui-panel-alpha, .83)));
}
.fx-settings-content input[type="checkbox"],
.fx-settings-content input[type="range"] { accent-color: var(--fx-ui-accent, #57dba1); }
.fx-settings-tabs button.is-active {
	border-color: rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .3);
	background: linear-gradient(105deg, rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .2), rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .08));
	color: color-mix(in srgb, var(--fx-ui-accent, #57dba1) 58%, white);
}
.fx-leaderboards-nav-item.is-active,
.fx-custom-lobby-workspace-tabs button.is-active,
.fx-custom-lobby-mode.is-active,
.fx-custom-lobby-filters button.is-active {
	border-color: rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .42) !important;
	background: linear-gradient(120deg, rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .24), rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .1)) !important;
	color: color-mix(in srgb, var(--fx-ui-accent, #57dba1) 38%, white) !important;
}
.fx-settings-close-bottom,
.fx-game-settings-footer button,
.fx-home-action.is-primary,
.fx-custom-lobby-entry-selection.is-selected,
.fx-custom-lobby-actions button.is-primary {
	border-color: rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .38) !important;
	background: linear-gradient(105deg, rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .26), rgba(var(--fx-ui-accent-rgb, 87, 219, 161), .12)) !important;
	color: #eefcf6 !important;
}