/* ============================================================
   Online Basketball Manager — Landscape Game UI
   The only stylesheet of the game (plus flags.css for the flag sprite).
   Everything is sized in rem; the root
   font-size scales with the viewport so a 1920x1080 screen gets
   1rem = 16px and smaller landscape screens shrink proportionally
   (like a game stage) without horizontal scrolling.
   ============================================================ */

:root {
	--pos-PG: #2f8cff;
	--pos-SG: #22b85a;
	--pos-SF: #ff8a1a;
	--pos-PF: #9b51f0;
	--pos-C:  #ef3e5c;
	--navy:   #0d1630;
	--navy2:  #16224a;
	--navy3:  #0a1126;
	--panel:  #1c2a55;
	--panel2: #22336a;
	--line:   #2f3f7a;
	--line2:  #3b4e94;
	--gold:   #ffb81c;
	--gold2:  #ffd766;
	--gold3:  #a86a00;
	--cyan:   #3fd8ff;
	--green:  #4be38a;
	--red:    #ff5a6a;
	--orange: #ff7a2a;
	--purple: #8a4ee9;
	--pink:   #e94e8a;
	--muted:  #8b98c9;
	--soft:   #c4cbe8;
	--inside: #ff6b3d;
	--mid:    #ffb81c;
	--three:  #3fd8ff;

	--rail-w: 7rem;
	--head-h: 6.5rem;
	--gap:    1.5rem;
	--pad:    2.25rem;
	--r1:     0.75rem;
	--r2:     1.125rem;
	--r3:     1.75rem;

	/* Safe-area insets along the stage's own edges (swapped when the stage is rotated) */
	--sa-t: env(safe-area-inset-top, 0px);
	--sa-r: env(safe-area-inset-right, 0px);
	--sa-b: env(safe-area-inset-bottom, 0px);
	--sa-l: env(safe-area-inset-left, 0px);

	/* Viewport units along the stage's own axes (swapped when the stage is rotated) */
	--vw: 1vw;
	--vh: 1vh;

	--f-head: "Oswald", "Arial Narrow", Impact, sans-serif;
	--f-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

@supports (height: 1dvh) { :root { --vh: 1dvh; } }

/* ============================================================
   BASE (replaces the legacy stylesheet)
   ============================================================ */
:root { --danger: var(--red); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol, li { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
.hidden, .clear { display: none !important; }
.site-footer { display: none; }
#cover {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: none;
	background: rgba(5, 9, 22, 0.72);
	backdrop-filter: blur(6px);
}
#loading { position: fixed; inset: 0; z-index: 901; display: none; }
#loading > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1.2rem 2rem;
	border-radius: 1.2rem;
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	font: 700 1.2rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--gold2);
}
#yellowArrow {
	position: absolute;
	z-index: 950;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 0.6rem rgba(255, 184, 28, 0.2), 0 0 2rem rgba(255, 184, 28, 0.55);
}
.confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(5, 9, 22, 0.7);
	backdrop-filter: blur(6px);
}
.confirm-box { width: min(92 * var(--vw), 32rem); text-align: center; }
.confirm-actions { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.5rem; }
.confirm-btn { flex: 1; cursor: pointer; }
.flag { display: inline-block; vertical-align: middle; border-radius: 0.2rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.lm-panel { display: none; }
.lm-panel-active { display: block; }
.language-links-footer { padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1.8; color: rgba(255, 255, 255, 0.3); text-align: center; }
.language-links-footer a { color: rgba(255, 255, 255, 0.35); }
.language-links-footer a:hover { color: rgba(255, 255, 255, 0.6); }
.seo-descriptions { display: inline; }
.seo-descriptions-toggle { display: inline-flex; cursor: pointer; list-style: none; color: rgba(255, 255, 255, 0.3); vertical-align: middle; margin-left: 0.3rem; }
.seo-descriptions-toggle::-webkit-details-marker { display: none; }
.seo-descriptions-content { max-width: 44rem; margin: 0.5rem auto 0; text-align: left; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.35); }

/* ============================================================
   MATCH COMPONENTS: 2D court renderer, box score, live coaching,
   match/reward overlays. Page styles further down refine these.
   ============================================================ */
@keyframes questRewardFloat {
	0%   { opacity: 1;   transform: translateX(-50%) translateY(0);    }
	60%  { opacity: 1;   transform: translateX(-50%) translateY(-2.25rem); }
	100% { opacity: 0;   transform: translateX(-50%) translateY(-3.75rem); }
}
@keyframes lmc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.6), 0 0.125rem 0.5rem rgba(0,0,0,.4); }
	70%  { box-shadow: 0 0 0 0.75rem rgba(245,197,24,0), 0 0.125rem 0.5rem rgba(0,0,0,.4); }
	100% { box-shadow: 0 0 0 0 rgba(245,197,24,0), 0 0.125rem 0.5rem rgba(0,0,0,.4); }
}
@keyframes lm2dSwish {
	0% { transform: scale(1); }
	30% { transform: scale(.72); filter: brightness(1.8); }
	100% { transform: scale(1); }
}
@keyframes lm2dRimMade {
	0%, 100% { box-shadow: 0 0 0 1px rgba(60,15,0,.75), inset 0 0 0 1px rgba(60,15,0,.6), 0 0 0.5rem 0.125rem rgba(255,120,30,.6); }
	25% { box-shadow: 0 0 0 1px rgba(60,15,0,.75), inset 0 0 0 1px rgba(60,15,0,.6), 0 0 1.125rem 0.4375rem rgba(74,222,128,.95); }
}
@keyframes lm2dClank {
	0% { transform: translate(0, 0); border-color: #fff; }
	20% { transform: translate(-0.125rem, 1px); }
	40% { transform: translate(0.125rem, -1px); border-color: #ffd0b0; }
	60% { transform: translate(-1px, 1px); }
	100% { transform: translate(0, 0); border-color: #ff6a14; }
}
@keyframes lm2dRing {
	0% { opacity: .95; transform: scale(.45); }
	100% { opacity: 0; transform: scale(1.5); }
}
@keyframes lm2dPop {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
	15% { opacity: 1; transform: translate(-50%, -90%) scale(1.25); }
	100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}
@keyframes lm2dMark {
	0% { opacity: 0; }
	8% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes lm-skip-fadein {
	from { opacity: 0; transform: translateY(0.625rem); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes lm-btn-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.0), 0 0.25rem 0.875rem rgba(255,193,7,.35); }
	50%       { box-shadow: 0 0 0 0.4375rem rgba(255,193,7,.0), 0 0.25rem 1.375rem rgba(255,193,7,.65); }
}
@keyframes lm-clutch-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.0); }
	50%       { box-shadow: 0 0 0.875rem 0.1875rem rgba(255,193,7,.7); }
}
@keyframes qrPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; }
}
@keyframes qrPulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); }
}
.quest-reward-pop {
	position: absolute;
	z-index: 9999;
	pointer-events: none;
	transform: translateX(-50%);
	color: var(--gold);
	font-size: 0.8125rem;
	font-weight: 800;
	text-shadow: 0 1px 0.375rem rgba(0,0,0,.7);
	white-space: nowrap;
	animation: questRewardFloat 1.6s ease-out forwards;
}
html.lm-first-instant-match .mobile-bottom-nav, html.lm-first-instant-match .screen-titlebar > .screen-btn {
	display: none !important;
}
.lm-ticker {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.625rem;
	padding: 0.75rem 0.875rem;
	margin-bottom: 0.625rem;
	height: 7.5rem;
	overflow-y: auto;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #e6eaff;
}
.lm-ticker-notice {
	text-align: center;
	color: var(--muted);
	font-size: 0.75rem;
}
.lm-ticker-notice a {
	color: var(--gold);
	text-decoration: none;
}
.lm-ticker-notice a:hover {
	color: var(--gold2);
}
.lm-name-a {
	color: var(--gold);
	font-weight: 700;
}
.lm-name-b {
	color: var(--cyan);
	font-weight: 700;
}
.lm-stats-card {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	overflow: hidden;
}
.lm-stats-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.625rem 0.875rem;
	background: linear-gradient(135deg, #0d1340 0%, #162060 100%);
	font-weight: 700;
	font-size: 0.75rem;
	color: #e6eaff;
	border-bottom: 1px solid var(--line);
}
.lm-stats-vs {
	color: var(--muted);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
.lm-stat-row {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	font-size: 0.6875rem;
}
.lm-stat-alt {
	background: rgba(80,110,220,0.04);
}
.lm-stat-val {
	flex: 1;
	color: #e6eaff;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.lm-stat-val:last-child {
	text-align: right;
}
.lm-stat-label {
	flex: 1.2;
	text-align: center;
	color: var(--muted);
	font-weight: 500;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.lm-stat-footer {
	padding: 0.5rem 0.875rem;
	text-align: center;
	font-size: 0.6875rem;
	color: var(--muted);
	border-top: 1px solid var(--line);
	background: rgba(80,110,220,0.04);
}
.lm-stat-footer span {
	color: var(--gold);
	font-weight: 700;
}
.lm-chat-card {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.lm-chat-input {
	display: flex;
	gap: 0.375rem;
	padding: 0.625rem 0.5rem;
	border-bottom: 1px solid var(--line);
	background: var(--navy);
}
.lm-chat-field {
	flex: 1 1 0;
	min-width: 0;
	background: var(--navy3);
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	padding: 0.5rem 0.5rem;
	color: #e6eaff;
	font-size: 0.8125rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lm-chat-field:focus {
	border-color: var(--gold);
}
.lm-chat-field::placeholder {
	color: var(--muted);
}
.lm-chat-send {
	padding: 0.5rem 0.75rem;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
	color: #000;
	border: none;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: opacity 0.2s;
	flex-shrink: 0;
	white-space: nowrap;
}
.lm-chat-send:hover {
	opacity: 0.85;
}
.lm-chat-messages {
	padding: 0.625rem 0.75rem;
	max-height: 25rem;
	overflow-y: auto;
}
.lm-chat-msg {
	padding: 0.375rem 0;
	font-size: 0.75rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(80,110,220,0.06);
}
.lm-chat-msg:last-child {
	border-bottom: none;
}
.lm-chat-time {
	color: var(--muted);
	margin-right: 0.375rem;
	font-size: 0.6875rem;
}
.lm-chat-author {
	color: var(--gold);
	font-weight: 600;
	margin-right: 0.375rem;
	text-decoration: none;
}
.lm-chat-author:hover {
	color: var(--gold2);
}
.lm-chat-text {
	color: #e6eaff;
}
.lm-spectators-card {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	overflow: hidden;
}
.lm-spectators-header {
	padding: 0.625rem 0.875rem;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--gold);
	background: var(--navy);
	border-bottom: 1px solid var(--line);
}
.lm-spectators-list {
	padding: 0.5rem 0.75rem;
}
.lm-spectator-row {
	display: flex;
	align-items: center;
	padding: 0.375rem 0;
	font-size: 0.8125rem;
	border-bottom: 1px solid rgba(80,110,220,0.06);
}
.lm-spectator-row:last-child {
	border-bottom: none;
}
.lm-spectator-num {
	color: var(--muted);
	width: 1.75rem;
	font-size: 0.75rem;
}
.lm-spectator-name {
	color: #e6eaff;
	text-decoration: none;
	font-weight: 500;
}
.lm-spectator-name:hover {
	color: var(--gold);
}
.lm-tactics-card {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	padding: 0.875rem;
}
.lm-tac-section {
	margin-bottom: 1rem;
}
.lm-tac-section-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 0.625rem;
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--line);
}
.lm-tac-row {
	margin-bottom: 0.75rem;
}
.lm-tac-label {
	display: block;
	font-size: 0.75rem;
	color: #e6eaff;
	font-weight: 600;
	margin-bottom: 0.375rem;
}
.lm-tac-slider {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.lm-tac-hint {
	font-size: 0.625rem;
	color: var(--muted);
	white-space: nowrap;
	min-width: 1.875rem;
	text-align: center;
}
.lm-tac-input {
	flex: 1;
}
.lm-tac-input input[type="text"] {
	width: 100%;
	background: var(--navy3);
	border: 1px solid var(--line);
	border-radius: 0.375rem;
	padding: 0.375rem 0.625rem;
	color: #e6eaff;
	font-size: 0.8125rem;
	text-align: center;
	font-family: inherit;
	outline: none;
}
.lm-tac-input input[type="text"]:focus {
	border-color: var(--gold);
}
.lm-tac-select {
	margin-top: 0.125rem;
}
.lm-select {
	width: 100%;
	background: var(--navy3);
	border: 1px solid var(--line);
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	color: #e6eaff;
	font-size: 0.8125rem;
	font-family: inherit;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a88b8' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 0.75rem;
	cursor: pointer;
}
.lm-select:focus {
	border-color: var(--gold);
}
.lm-tac-submit {
	display: block;
	width: 100%;
	padding: 0.75rem;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
	color: #000;
	border: none;
	border-radius: 0.625rem;
	font-size: 0.875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.15s;
}
.lm-tac-submit:hover {
	opacity: 0.9;
}
.lm-tac-submit:active {
	transform: scale(0.98);
}
.lmb-team-color {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 1px 0.1875rem rgba(0,0,0,.4);
}
.lmb-team-color--home {
	background: linear-gradient(135deg, #1a4fd4 0%, #2563eb 100%);
}
.lmb-team-color--away {
	background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.lmc-court {
	margin-bottom: 0.625rem;
	max-width: 31.25rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.lmc-court .ct-court-surface {
	aspect-ratio: 1 / 0.75;
	background-color: #c17a2e;
	background-image:
		
		repeating-linear-gradient(
			90deg,
			transparent, transparent 3.375rem,
			rgba(0,0,0,.06) 3.375rem, rgba(0,0,0,.06) 3.4375rem
		),
		
		repeating-linear-gradient(
			90deg,
			transparent, transparent 0.375rem,
			rgba(0,0,0,.015) 0.375rem, rgba(0,0,0,.015) 0.4375rem
		),
		
		linear-gradient(
			to bottom,
			transparent calc(100% - 0.125rem),
			rgba(255,255,255,.5) calc(100% - 0.125rem),
			rgba(255,255,255,.5) 100%
		),
		
		radial-gradient(ellipse 56% 62% at 50% 0%,
			transparent 58%,
			rgba(255,255,255,.35) 58%, rgba(255,255,255,.35) 60%,
			transparent 60%
		),
		
		linear-gradient(to right,
			transparent calc(50% - 3rem),
			rgba(206,95,48,.22) calc(50% - 3rem),
			rgba(206,95,48,.22) calc(50% + 3rem),
			transparent calc(50% + 3rem)
		),
		
		radial-gradient(circle at 50% 38%,
			transparent 1.875rem,
			rgba(255,255,255,.3) 1.875rem, rgba(255,255,255,.3) 2rem,
			transparent 2rem
		),
		
		linear-gradient(to right,
			transparent calc(50% - 1.125rem),
			rgba(255,255,255,.6) calc(50% - 1.125rem),
			rgba(255,255,255,.6) calc(50% + 1.125rem),
			transparent calc(50% + 1.125rem)
		),
		
		radial-gradient(circle at 50% 3%,
			rgba(255,100,50,.6) 0.25rem,
			transparent 0.3125rem
		),
		
		linear-gradient(to right, rgba(255,255,255,.3), rgba(255,255,255,.3));
	background-size:
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 40%,
		100% 100%,
		100% 3%,
		100% 100%,
		calc(100% - 0.625rem) calc(100% - 0.625rem);
	background-position:
		0 0,
		0 0,
		center bottom,
		center top,
		center top,
		center,
		center 2%,
		center top,
		center;
	background-repeat: no-repeat;
}
.lmc-players {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.lmc-dot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: auto;
	transition: left 0.6s ease, top 0.6s ease;
}
.lmc-dot-circle {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 0.125rem rgba(0,0,0,.5);
	box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.4);
	border: 0.125rem solid rgba(255,255,255,.5);
}
.lmc-dot-name {
	font-size: 0.5625rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 0.1875rem rgba(0,0,0,.7);
	margin-top: 0.125rem;
	white-space: nowrap;
}
.lmc-dot--home .lmc-dot-circle {
	background: linear-gradient(135deg, #1a4fd4 0%, #2563eb 100%);
}
.lmc-dot--away .lmc-dot-circle {
	background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}
.lmc-dot--primary .lmc-dot-circle {
	animation: lmc-pulse 1.2s ease-out;
	box-shadow: 0 0 0 0 rgba(245,197,24,.6), 0 0.125rem 0.5rem rgba(0,0,0,.4);
}
.lmc-court {
	max-width: 23.75rem;
}
.lmc-dot-circle {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0.5625rem;
}
.lmc-dot-name {
	font-size: 0.5rem;
}
.lm2d {
	--lm2d-tok: 1.625rem;
	--lm2d-rim: 1rem;
	position: relative;
	width: 100%;
	aspect-ratio: 104 / 60;
	margin: 0 auto 0.625rem;
	border-radius: 0.875rem;
	overflow: hidden;
	background: #07080d;
	box-shadow: 0 0.5rem 1.625rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
	contain: layout paint;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.lm2d--vertical {
	aspect-ratio: 60 / 78;
	max-width: 32.5rem;
}
.lm2d--vertical::before, .lm2d--vertical::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2.125rem;
	z-index: 350;
	pointer-events: none;
}
.lm2d--vertical::before {
	top: 0;
	background: linear-gradient(rgba(7,8,13,.75), transparent);
}
.lm2d--vertical::after {
	bottom: 0;
	background: linear-gradient(transparent, rgba(7,8,13,.75));
}
.lm2d-world {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}
.lm2d.lm2d--fs {
	position: fixed;
	inset: 0;
	z-index: 10000;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	aspect-ratio: auto;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}
html.lm2d-fs-lock, html.lm2d-fs-lock body {
	overflow: hidden;
}
.lm2d-fs-btn {
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	z-index: 460;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	padding: 0;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 0.625rem;
	background: rgba(10,12,20,.72);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(0.25rem);
	backdrop-filter: blur(0.25rem);
}
.lm2d-fs-btn:active {
	transform: scale(.94);
}
.lm2d-fs-close, .lm2d--fs .lm2d-fs-open {
	display: none;
}
.lm2d--fs .lm2d-fs-close {
	display: block;
}
.lm2d--fs .lm2d-fs-btn {
	top: calc(0.5rem + var(--sa-t));
	right: calc(0.5rem + var(--sa-r));
	width: 2.5rem;
	height: 2.5rem;
}
.lm2d-score {
	display: none;
}
.lm2d--fs .lm2d-score {
	position: absolute;
	top: calc(0.5rem + var(--sa-t));
	left: 50%;
	z-index: 420;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - 7.5rem);
	padding: 0.375rem 0.75rem;
	border-radius: 0.75rem;
	background: rgba(10,12,20,.85);
	color: #fff;
	font: 700 0.75rem/1 Roboto, sans-serif;
	white-space: nowrap;
	transform: translateX(-50%);
	pointer-events: none;
}
.lm2d-score:empty {
	display: none !important;
}
.lm2d-score b {
	font-size: 1.0625rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}
.lm2d-score em {
	color: #ffb020;
	font-style: normal;
	font-size: 0.6875rem;
}
.lm2d-score-team {
	display: inline-block;
	min-width: 0;
	overflow: hidden;
	max-width: 5.625rem;
	text-overflow: ellipsis;
}
.lm2d-score-team::before {
	content: '';
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.3125rem;
	border-radius: 50%;
	vertical-align: 1px;
}
.lm2d-score-team--home::before {
	background: #2563eb;
}
.lm2d-score-team--away::before {
	background: #e74c3c;
}
.lm2d--fs .lm2d-shot {
	top: calc(0.5rem + var(--sa-t));
	left: calc(0.5rem + var(--sa-l));
	padding: 0.5rem 0.625rem;
}
.lm2d--fs .lm2d-score {
	max-width: calc(100% - 11.875rem);
}
.lm2d--fs .lm2d-tags {
	bottom: calc(0.625rem + var(--sa-b));
	left: 0.625rem;
}
.lm2d--fs .lm2d-caption {
	font-size: 0.875rem;
}
.lm2d-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.lm2d-layer {
	position: absolute;
	inset: 0;
}
.lm2d-marks {
	pointer-events: none;
}
.lm2d-p {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--lm2d-tok);
	height: var(--lm2d-tok);
	margin: calc(var(--lm2d-tok) / -2) 0 0 calc(var(--lm2d-tok) / -2);
	will-change: transform;
	transition: opacity .5s ease;
	cursor: pointer;
}
.lm2d-p--out {
	opacity: 0;
	pointer-events: none;
}
.lm2d-p-disc {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
	border: 0.125rem solid rgba(0,0,0,.55);
	box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 0.1875rem 0.5rem rgba(0,0,0,.6);
}
.lm2d-p--home .lm2d-p-disc {
	background: radial-gradient(circle at 50% 35%, #6f9bff, #1d4fd0 75%);
}
.lm2d-p--away .lm2d-p-disc {
	background: radial-gradient(circle at 50% 35%, #ff8f6a, #d0391f 75%);
}
.lm2d-p-disc img {
	position: absolute;
	left: 50%;
	top: -4%;
	display: block;
	width: auto;
	height: 140%;
	max-width: none;
	transform: translateX(-50%);
}
.lm2d-p--ball .lm2d-p-disc {
	box-shadow: 0 0 0 0.125rem #ffd34d, 0 0 0.625rem 0.125rem rgba(255,190,60,.65), 0 0.1875rem 0.5rem rgba(0,0,0,.6);
}
.lm2d-p-pos {
	position: absolute;
	right: -0.375rem;
	top: -0.25rem;
	padding: 1px 0.1875rem;
	border-radius: 0.25rem;
	background: #111827;
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	font: 800 0.4375rem/1.1 Roboto, sans-serif;
}
.lm2d-p-name {
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 1px;
	transform: translateX(-50%);
	color: #fff;
	font: 900 0.5rem/1 Roboto, sans-serif;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0.125rem 0.25rem rgba(0,0,0,.8);
}
.lm2d-ball, .lm2d-ball-shadow {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--lm2d-tok) * .42);
	height: calc(var(--lm2d-tok) * .42);
	margin: calc(var(--lm2d-tok) * -.21) 0 0 calc(var(--lm2d-tok) * -.21);
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.lm2d-ball {
	z-index: 300;
	background: radial-gradient(circle at 35% 30%, #ffb35c, #e3661b 60%, #a8400c);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 0.125rem rgba(0,0,0,.4);
}
.lm2d-ball::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		linear-gradient(90deg, transparent 45%, rgba(40,15,0,.55) 45%, rgba(40,15,0,.55) 55%, transparent 55%),
		linear-gradient(0deg, transparent 45%, rgba(40,15,0,.55) 45%, rgba(40,15,0,.55) 55%, transparent 55%);
}
.lm2d-ball-shadow {
	z-index: 5;
	background: rgba(0,0,0,.35);
	filter: blur(1px);
}
.lm2d-ball.lm2d-ball--under {
	z-index: 240;
	opacity: .85;
}
.lm2d-hoop {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 250;
	width: var(--lm2d-rim);
	height: var(--lm2d-rim);
	margin: calc(var(--lm2d-rim) / -2) 0 0 calc(var(--lm2d-rim) / -2);
	pointer-events: none;
	will-change: transform;
}
.lm2d-hoop-net {
	position: absolute;
	inset: 16%;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(10,12,20,.55) 0 28%, transparent 30%),
		repeating-conic-gradient(rgba(255,255,255,.9) 0 7deg, transparent 7deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 26%, #000 28%);
	mask: radial-gradient(circle, transparent 26%, #000 28%);
	opacity: .9;
}
.lm2d-hoop-rim {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border: max(0.125rem, calc(var(--lm2d-rim) * .14)) solid #ff6a14;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(60,15,0,.75), inset 0 0 0 1px rgba(60,15,0,.6), 0 0 0.5rem 0.125rem rgba(255,120,30,.6);
}
.lm2d-hoop-fx {
	position: absolute;
	inset: -40%;
	box-sizing: border-box;
	border-radius: 50%;
	opacity: 0;
}
.lm2d-hoop--made .lm2d-hoop-net {
	animation: lm2dSwish .7s ease-out;
}
.lm2d-hoop--made .lm2d-hoop-rim {
	animation: lm2dRimMade .9s ease-out;
}
.lm2d-hoop--made .lm2d-hoop-fx {
	border: 0.1875rem solid #4ade80;
	animation: lm2dRing .9s ease-out;
}
.lm2d-hoop--miss .lm2d-hoop-rim {
	animation: lm2dClank .5s ease-out;
}
.lm2d-hoop--miss .lm2d-hoop-fx {
	border: 0.125rem dashed rgba(255,255,255,.9);
	animation: lm2dRing .5s ease-out;
}
.lm2d-pop {
	position: absolute;
	z-index: 320;
	color: #fff;
	font: 900 1.125rem/1 Roboto, sans-serif;
	white-space: nowrap;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0.125rem 0.375rem rgba(0,0,0,.8);
	pointer-events: none;
	animation: lm2dPop 1.4s ease-out forwards;
}
.lm2d-pop--home {
	color: #9dbcff;
}
.lm2d-pop--away {
	color: #ffa08c;
}
.lm2d-shot {
	position: absolute;
	top: 0.375rem;
	left: 0.375rem;
	z-index: 400;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5625rem 0.3125rem;
	border-radius: 0.625rem;
	background: rgba(10,12,20,.85);
	color: #9aa3b5;
	font: 700 0.5625rem/1 Roboto, sans-serif;
	letter-spacing: .08em;
	pointer-events: none;
}
.lm2d-shot b {
	min-width: 1.125rem;
	color: #ffb020;
	font-size: 0.875rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.lm2d-shot--low b {
	color: #ff4d4d;
}
.lm2d-tags {
	position: absolute;
	left: 0.375rem;
	bottom: 0.375rem;
	z-index: 400;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	max-width: 75%;
	pointer-events: none;
}
.lm2d-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1875rem 0.4375rem;
	border-radius: 62.4375rem;
	background: rgba(10,12,20,.8);
	color: #e8ecf5;
	font: 700 0.5625rem/1 Roboto, sans-serif;
}
.lm2d-tag i {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
}
.lm2d-tag--home i {
	background: #2563eb;
}
.lm2d-tag--away i {
	background: #e74c3c;
}
.lm2d-caption {
	position: absolute;
	left: 50%;
	bottom: 2.125rem;
	z-index: 450;
	max-width: 80%;
	padding: 0.4375rem 0.75rem;
	border-left: 0.1875rem solid #ffb020;
	border-radius: 0.5rem;
	background: rgba(12,14,22,.82);
	box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,.4);
	color: #fff;
	font: 700 0.75rem/1.25 Roboto, sans-serif;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 0.375rem);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.lm2d-caption--top {
	top: 2.375rem;
	bottom: auto;
	transform: translate(-50%, -0.375rem);
}
.lm2d--fs .lm2d-caption {
	bottom: calc(2.75rem + var(--sa-b));
}
.lm2d--fs .lm2d-caption--top {
	top: calc(3.75rem + var(--sa-t));
	bottom: auto;
}
.lm2d-caption--show {
	opacity: 1;
	transform: translate(-50%, 0);
}
.lm2d-mark {
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	margin: -0.375rem 0 0 -0.375rem;
	animation: lm2dMark 6s ease forwards;
}
.lm2d-mark--miss::before, .lm2d-mark--miss::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 0.125rem;
	height: 100%;
	margin-left: -1px;
	border-radius: 1px;
	background: #fff;
	box-shadow: 0 0 0.125rem rgba(0,0,0,.7);
	transform: rotate(45deg);
}
.lm2d-mark--miss::after {
	transform: rotate(-45deg);
}
.lm2d-mark--made {
	box-sizing: border-box;
	border: 0.125rem solid #4ade80;
	border-radius: 50%;
	box-shadow: 0 0 0.375rem rgba(74,222,128,.8);
}
.lm2d-mark--block, .lm2d-mark--steal {
	box-sizing: border-box;
	border: 0.125rem solid #ffd34d;
	border-radius: 0.1875rem;
	transform: rotate(45deg);
	box-shadow: 0 0 0.375rem rgba(255,211,77,.8);
}
.lmc-ticker-line {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3125rem 0;
	border-bottom: 1px solid rgba(80,110,220,0.06);
	font-size: 0.75rem;
	line-height: 1.4;
}
.lmc-ticker-line:last-child {
	border-bottom: none;
}
.lmc-ticker-line--event {
	justify-content: center;
	padding: 0.5rem 0;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--gold);
	border-bottom: 1px solid rgba(255,193,7,0.15);
}
.lmc-ticker-time {
	color: var(--muted);
	font-size: 0.625rem;
	min-width: 3.625rem;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.lmc-ticker-icon {
	font-size: 0.875rem;
	flex-shrink: 0;
	width: 1.25rem;
	text-align: center;
}
.lmc-ticker-text {
	flex: 1;
	color: #e6eaff;
}
.lmc-ticker-score {
	color: var(--gold);
	font-weight: 700;
	font-size: 0.6875rem;
	min-width: 2.25rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.lmc-stats-card {
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 0.625rem;
}
.lmc-stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.6875rem;
	min-width: 30rem;
}
.lmc-stats-table th {
	padding: 0.5rem 0.25rem;
	text-align: center;
	color: var(--muted);
	font-weight: 600;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid var(--line);
	background: var(--navy);
	position: sticky;
	top: 0;
}
.lmc-st-groups th {
	font-size:0.5625rem;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:rgba(255,255,255,.3);
	padding:0.3125rem 0.125rem 0.1875rem;
	border-bottom:1px solid var(--line) !important;
	background:var(--navy);
	position:sticky;
	top:0;
}
.lmc-st-groups th:not(:empty) {
	color:var(--gold);
	border-left:1px solid rgba(255,255,255,.08);
	border-right:1px solid rgba(255,255,255,.08);
}
.lmc-stats-table td {
	padding: 0.4375rem 0.25rem;
	text-align: center;
	color: #e6eaff;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid rgba(80,110,220,0.06);
}
.lmc-stats-table tr:last-child td {
	border-bottom: none;
}
.lmc-stats-table tr:nth-child(even) {
	background: rgba(80,110,220,0.03);
}
.lmc-st-pos {
	width: 2.25rem;
	position: sticky;
	left: 0;
	z-index: 2;
}
.lmc-st-name {
	text-align: left !important;
	font-weight: 600;
	white-space: nowrap;
	max-width: 5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	position: sticky;
	left: 2.25rem;
	z-index: 2;
	box-shadow: 0.125rem 0 0.25rem rgba(0,0,0,0.08);
}
.lmc-stats-table th.lmc-st-pos, .lmc-stats-table th.lmc-st-name {
	z-index: 3;
	background: var(--navy);
}
.lmc-stats-table th.lmc-st-name {
	text-align: left !important;
}
.lmc-stats-table td.lmc-st-pos, .lmc-stats-table td.lmc-st-name {
	background: var(--navy2);
}
.lmc-stats-table tr:nth-child(even) td.lmc-st-pos, .lmc-stats-table tr:nth-child(even) td.lmc-st-name {
	background: var(--navy2);
}
.lmc-pos-badge {
	display: inline-block;
	padding: 0.125rem 0.3125rem;
	border-radius: 0.25rem;
	font-size: 0.5625rem;
	font-weight: 800;
	letter-spacing: 0.5px;
}
.lmc-pos-badge--PG, .lmc-pos-badge--SG {
	background: rgba(46,204,113,.18);
	color: #2ecc71;
}
.lmc-pos-badge--SF, .lmc-pos-badge--PF {
	background: rgba(241,196,15,.18);
	color: #f1c40f;
}
.lmc-pos-badge--C {
	background: rgba(231,76,60,.18);
	color: #e74c3c;
}
.lmc-pos-badge--backup {
	opacity: 0.3;
}
.lmc-backup td {
	color: var(--muted);
}
.lmc-backup .lmc-st-name {
	font-weight: 400;
}
.lmc-st-name--click {
	cursor: pointer;
}
.lmc-summary-row td {
	border-top: 0.125rem solid rgba(255,255,255,.12);
}
.lmc-summary-row td.lmc-st-name {
	background: var(--navy2);
}
.lmc-summary-row td.lmc-st-pos {
	background: var(--navy2);
}
.lmco-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	max-width: 31.25rem;
	margin: 0 auto 0.625rem;
	padding: 0.625rem;
	background: linear-gradient(135deg, rgba(245,197,24,.10), rgba(77,126,255,.08));
	border: 1px solid rgba(245,197,24,.35);
	border-radius: 1rem;
}
.lmco-open {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5625rem 0.875rem;
	border: none;
	border-radius: 0.625rem;
	background: linear-gradient(135deg, var(--gold), var(--gold2));
	color: #1a1a2e;
	font-size: 0.8125rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 0.25rem 0.875rem rgba(245,197,24,.25);
	transition: transform .15s, filter .15s;
}
.lmco-open--tactics {
	background: linear-gradient(135deg, #506edc, #3a55c0);
	color: #fff;
	box-shadow: 0 0.25rem 0.875rem rgba(77,126,255,.25);
}
.lmco-open:active {
	transform: scale(.96);
}
.lmco-bar-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 100%;
	padding: 0 0.125rem;
	border: none;
	background: transparent;
	color: var(--gold);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.lmco-bar-chevron {
	transition: transform .2s;
}
.lmco-bar-content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 1 1 100%;
}
.lmco-bar--collapsed {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.lmco-bar--collapsed .lmco-bar-content {
	display: none;
}
.lmco-bar--collapsed .lmco-bar-chevron {
	transform: rotate(-90deg);
}
.lmco-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	flex: 1 1 100%;
	min-width: 0;
}
.lmco-sum-chip {
	padding: 0.1875rem 0.5rem;
	border-radius: 62.4375rem;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--line);
	color: #e6eaff;
	font-size: 0.625rem;
	font-weight: 700;
	white-space: nowrap;
}
.lmco-overlay {
	position: fixed;
	inset: 0;
	background: rgba(3,5,15,.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
	z-index: 9000;
}
.lmco-overlay--show {
	opacity: 1;
	pointer-events: auto;
}
.lmco-sheet {
	position: fixed;
	left: 50%;
	bottom: calc(var(--bottom-nav-h, 3.625rem) + max(var(--sa-b), var(--android-nav-bottom, 0px)));
	width: 100%;
	max-width: 35rem;
	max-height: calc(100 * var(--vh) - var(--bottom-nav-h, 3.625rem) - max(var(--sa-b), var(--android-nav-bottom, 0px)) - max(var(--sa-t), 0.5rem));
	display: flex;
	flex-direction: column;
	background: var(--navy2);
	border: 1px solid var(--line2);
	border-bottom: none;
	border-radius: 1.4rem 1.4rem 0 0;
	box-shadow: 0 -0.75rem 2.5rem rgba(0,0,0,.55);
	transform: translate(-50%, 105%);
	transition: transform .25s cubic-bezier(.2,.9,.3,1);
	z-index: 9001;
	padding-bottom: var(--sa-b);
}
.lmco-sheet--show {
	transform: translate(-50%, 0);
}
.lmco-sheet {
	top: 50%;
	bottom: auto;
	max-width: 28.75rem;
	height: auto;
	max-height: calc(80 * var(--vh));
	border-bottom: 1px solid var(--line2);
	border-radius: 1.4rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -46%);
	transition: transform .2s ease, opacity .2s ease;
}
.lmco-sheet--show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%);
}
.lmco-grip {
	display: none;
}
.lmco-head {
	padding-top: 0.75rem;
}
.lmco-grip {
	width: 2.5rem;
	height: 0.25rem;
	margin: 0.5rem auto 0.125rem;
	border-radius: 0.125rem;
	background: var(--line2);
}
.lmco-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem 0.5rem;
}
.lmco-title {
	flex: 1;
	color: var(--gold);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: .02em;
}
.lmco-head-score {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.lmco-head-clock {
	padding: 0.1875rem 0.5rem;
	border-radius: 0.375rem;
	background: var(--navy);
	color: var(--muted);
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.lmco-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--navy);
	color: #e6eaff;
	cursor: pointer;
}
.lmco-tabs {
	display: flex;
	gap: 0.375rem;
	margin: 0 0.875rem 0.5rem;
	padding: 0.25rem;
	background: var(--navy3);
	border-radius: 0.625rem;
}
.lmco-tab {
	flex: 1;
	padding: 0.5rem 0;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}
.lmco-tab--active {
	background: var(--navy);
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--line2);
}
.lmco-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0.875rem 0.625rem;
}
.lmco-actions {
	display: none;
	flex: 0 0 auto;
	padding: 0.5rem 0.875rem 0.25rem;
	border-top: 1px solid var(--line);
}
.lmco-actions--show {
	display: block;
}
.lmco-hint {
	padding: 0.5rem 0.875rem 0.75rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.6875rem;
	text-align: center;
}
.lmco-section-label {
	margin: 0.25rem 0 0.375rem;
	color: var(--muted);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.lmco-slot {
	margin-bottom: 0.375rem;
	padding: 0.4375rem 0.5rem;
	background: var(--navy);
	border: 1px solid var(--line);
	border-radius: 0.625rem;
	transition: border-color .15s;
}
.lmco-slot--active {
	border-color: var(--gold);
}
.lmco-slot--pending {
	border-color: rgba(77,126,255,.6);
}
.lmco-slot-main, .lmco-cand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}
.lmco-face {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--navy3);
	border: 1px solid var(--line2);
	object-fit: cover;
	object-position: center 10%;
}
.lmco-face--empty {
	display: inline-block;
}
.lmco-pinfo {
	flex: 1;
	min-width: 0;
}
.lmco-pname {
	overflow: hidden;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.lmco-psub {
	margin-top: 0.125rem;
	color: var(--muted);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lmco-meter {
	height: 0.25rem;
	margin-top: 0.25rem;
	border-radius: 0.1875rem;
	background: rgba(255,255,255,.07);
	overflow: hidden;
}
.lmco-meter-fill {
	height: 100%;
	border-radius: 0.1875rem;
	transition: width .4s ease;
}
.lmco-swap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	flex-shrink: 0;
	border: 1px solid rgba(245,197,24,.45);
	border-radius: 0.5625rem;
	background: rgba(245,197,24,.10);
	color: var(--gold);
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.lmco-swap:active {
	transform: scale(.94);
}
.lmco-swap--active {
	background: var(--gold);
	color: #1a1a2e;
}
.lmco-plan {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: 1px dashed var(--line);
	font-size: 0.625rem;
}
.lmco-plan-label {
	flex-shrink: 0;
	color: var(--muted);
	font-weight: 700;
}
.lmco-plan-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: #e6eaff;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.lmco-plan-name em {
	color: var(--muted);
	font-style: normal;
}
.lmco-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	cursor: pointer;
}
.lmco-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.lmco-switch-track {
	position: relative;
	width: 1.75rem;
	height: 1rem;
	border-radius: 0.5rem;
	background: rgba(255,255,255,.12);
	transition: background .15s;
}
.lmco-switch-track::after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s;
}
.lmco-switch input:checked + .lmco-switch-track {
	background: var(--green);
}
.lmco-switch input:checked + .lmco-switch-track::after {
	transform: translateX(0.75rem);
}
.lmco-switch input:focus-visible + .lmco-switch-track {
	outline: 0.125rem solid var(--gold);
	outline-offset: 0.125rem;
}
.lmco-switch-text {
	color: #e6eaff;
	font-weight: 700;
}
.lmco-switch--off {
	opacity: .45;
	cursor: default;
}
.lmco-pending {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	padding: 0.3125rem 0.5rem;
	border-radius: 0.5rem;
	background: rgba(77,126,255,.14);
	color: #9fb6ff;
	font-size: 0.6875rem;
	font-weight: 700;
}
.lmco-picker {
	margin-top: 0.625rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--line);
}
.lmco-picker-head {
	margin-bottom: 0.375rem;
	color: var(--gold);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.lmco-cand {
	flex-wrap: wrap;
	padding: 0.5rem;
	margin-bottom: 0.375rem;
	background: var(--navy2);
	border: 1px solid var(--line);
	border-radius: 0.625rem;
}
.lmco-cand--backup {
	border-color: rgba(61,186,76,.5);
}
.lmco-rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.375rem;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.lmco-rating small {
	color: var(--muted);
	font-size: 0.5625rem;
	font-weight: 700;
}
.lmco-cand-actions {
	display: flex;
	gap: 0.375rem;
	flex: 1 1 100%;
	justify-content: flex-end;
}
.lmco-tag {
	padding: 1px 0.375rem;
	border-radius: 62.4375rem;
	background: rgba(61,186,76,.18);
	color: var(--green);
	font-size: 0.5625rem;
	font-weight: 800;
	vertical-align: middle;
}
.lmco-picker-foot {
	display: flex;
	gap: 0.375rem;
	justify-content: flex-end;
	margin-top: 0.25rem;
}
.lmco-btn {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line2);
	border-radius: 0.5rem;
	background: var(--navy);
	color: #e6eaff;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s, transform .15s;
}
.lmco-btn:active {
	transform: scale(.96);
}
.lmco-btn--primary {
	border-color: transparent;
	background: linear-gradient(135deg, var(--gold), var(--gold2));
	color: #1a1a2e;
}
.lmco-btn--ghost {
	background: transparent;
}
.lmco-btn:disabled {
	opacity: .4;
	cursor: default;
	transform: none;
}
.lmco-tgroup {
	margin-bottom: 0.75rem;
}
.lmco-tlabel {
	margin-bottom: 0.375rem;
	color: var(--muted);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.lmco-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.lmco-chip {
	position: relative;
	flex: 1 1 0;
	min-width: 4.5rem;
	padding: 0.625rem 0.375rem;
	border: 1px solid var(--line);
	border-radius: 0.625rem;
	background: var(--navy);
	color: #e6eaff;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.lmco-chip--cur::after {
	content: '';
	position: absolute;
	top: 0.3125rem;
	right: 0.3125rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--green);
}
.lmco-chip--sel {
	border-color: var(--gold);
	background: rgba(245,197,24,.14);
	color: #fff;
}
.lmco-apply {
	width: 100%;
	padding: 0.75rem;
	font-size: 0.875rem;
}
.lmco-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	max-width: 90%;
	padding: 0.625rem 1rem;
	border-radius: 0.625rem;
	background: var(--navy);
	border: 1px solid var(--line2);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0.75rem);
	transition: opacity .2s, transform .2s;
	z-index: 9100;
}
.lmco-toast--show {
	opacity: 1;
	transform: translate(-50%, 0);
}
.lmco-toast--bad {
	border-color: var(--danger);
}
.lmc-ticker-line--sub .lmc-ticker-text {
	color: var(--gold);
	font-weight: 700;
}
.lm-reward-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	z-index: 9999;
	animation: lm-skip-fadein .3s ease;
}
.lm-reward-popup {
	background: var(--navy2);
	border: 0.125rem solid #ffc107;
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	max-width: 21.25rem;
	width: 90%;
	text-align: center;
	box-shadow: 0 0.5rem 2.5rem rgba(255,193,7,.25);
}
.lm-reward-icon {
	font-size: 3rem;
	margin-bottom: 0.75rem;
}
.lm-reward-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: #ffc107;
	margin-bottom: 0.5rem;
}
.lm-reward-text {
	font-size: 0.875rem;
	color: #e6eaff;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.lm-reward-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	background: linear-gradient(135deg, #ffc107, #ffab00);
	color: #1a1a2e;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: 0.625rem;
	margin-bottom: 0.75rem;
	border: none;
	cursor: pointer;
	animation: lm-btn-pulse 1.8s ease-in-out infinite;
}
.lm-reward-link:active {
	transform: scale(0.97);
}
.lm-reward-close {
	display: block;
	margin: 0 auto;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 0.8125rem;
	cursor: pointer;
	padding: 0.375rem 0.75rem;
}
.lm-reward-result {
	display:flex;
	align-items:center;
	gap:0.5rem;
	padding:0.625rem 0.75rem;
	background:rgba(255,255,255,.04);
	border-radius:0.5rem;
	margin-bottom:0.75rem;
}
.lm-rr-val {
	font-size:1.375rem;
	font-weight:900;
	color:#e6eaff;
	letter-spacing:.02em;
	flex-shrink:0;
}
.lm-rr-team {
	font-size:0.6875rem;
	font-weight:600;
	flex:1;
	min-width:0;
	text-align:center;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--muted);
}
.lm-reward-popup--win {
	border-color:var(--green) !important;
	box-shadow:0 0.5rem 2.5rem rgba(61,186,76,.2) !important;
}
.lm-reward-popup--loss {
	border-color:#e55 !important;
	box-shadow:0 0.5rem 2.5rem rgba(220,80,80,.2) !important;
}
.lm-clutch-seg {
	margin-bottom: 1rem;
}
.lm-clutch-glow {
	border-color: var(--gold);
	animation: lm-clutch-glow 1.4s ease-in-out infinite;
}
.quest-reward-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0,0,0,.72);
	z-index: 10001;
}
.quest-reward-popup {
	width: min(100%, 22.5rem);
	padding: 1.625rem 1.375rem 1.25rem;
	text-align: center;
	background: var(--navy2);
	border: 0.125rem solid #ffc107;
	border-radius: 1rem;
	box-shadow: 0 0.625rem 2.75rem rgba(255,193,7,.3);
	animation: qrPop .35s ease;
}
.quest-reward-popup--claimed {
	border-color: var(--green);
	box-shadow: 0 0.625rem 2.75rem rgba(61,186,76,.3);
}
.qr-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 0.375rem;
	color: #ffc107;
}
.qr-title {
	color: #ffc107;
	font-size: 1.25rem;
	font-weight: 800;
}
.qr-sub {
	margin: 0.375rem 0 0.875rem;
	color: var(--muted);
	font-size: 0.8125rem;
}
.qr-balance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	margin: 0 0 1rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--line);
	border-radius: 0.625rem;
	background: rgba(255,255,255,.06);
}
.qr-balance-label {
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.qr-balance-value {
	color: #e6eaff;
	font-size: 1.1875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.qr-balance-value--pulse {
	color: var(--green);
	animation: qrPulse 1.1s ease;
}
.qr-claim-btn {
	width: 100%;
	padding: 0.8125rem 0.875rem;
	border: 0;
	border-radius: 0.625rem;
	background: linear-gradient(135deg, #ffc107, #ffab00);
	color: #1a1a2e;
	font-size: 0.875rem;
	font-weight: 800;
	cursor: pointer;
}
.qr-claim-btn--loading {
	opacity: .65;
	cursor: wait;
}
.rankup-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0,0,0,.72);
	z-index: 10002;
}
.rankup-popup {
	width: min(100%, 19.375rem);
	padding: 1rem 0.875rem 0.875rem;
	text-align: center;
	background: var(--navy2);
	border: 0.125rem solid #5b9dff;
	border-radius: 1rem;
	box-shadow: 0 0.625rem 2.75rem rgba(91,157,255,.3);
	animation: qrPop .35s ease;
}
.rankup-icon {
	font-size: 1.75rem;
	margin-bottom: 0.125rem;
}
.rankup-title {
	color: #5b9dff;
	font-size: 1.0625rem;
	font-weight: 800;
}
.rankup-sub {
	margin: 0.1875rem 0 0.5625rem;
	color: var(--muted);
	font-size: 0.75rem;
}
.rankup-list {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 0.625rem;
}
.rankup-reward {
	display: none;
	margin-top: 0.625rem;
	color: #6ee07c;
	font-size: 0.9375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.rankup-balance {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.375rem;
	padding: 0.375rem 0.5625rem;
	border-radius: 0.5rem;
	background: rgba(255,255,255,.05);
	color: var(--muted);
	font-size: 0.6875rem;
}
.rankup-balance strong {
	color: #e6eaff;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}
.rankup-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	background: var(--navy2);
	border-bottom: 1px solid var(--line);
	font-size: 0.8125rem;
}
.rankup-confirm-btn {
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem;
	border: 0;
	border-radius: 0.5625rem;
	background: #5b9dff;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
	cursor: pointer;
}
.rankup-confirm-btn:disabled {
	opacity: .65;
	cursor: wait;
}
.rankup-row:last-child {
	border-bottom: 0;
}
.rankup-row--me {
	z-index: 2;
	background: rgba(255,193,7,.14);
	box-shadow: 0 0 0 1px rgba(255,193,7,.45);
	font-weight: 800;
	will-change: transform;
}
.rankup-rank {
	flex: 0 0 2.125rem;
	color: var(--muted);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.rankup-row--me .rankup-rank {
	color: #ffc107;
}
.rankup-rank--up {
	animation: qrPulse 1s ease;
}
.rankup-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #e6eaff;
	text-align: left;
}
.rankup-wins {
	flex: 0 0 auto;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.lm-tactics-card {
	overflow: hidden;
}
.lm-tactics-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--line);
}
.lm-tactics-team {
	padding: 0.75rem 1rem 0.875rem;
}
.lm-tactics-team + .lm-tactics-team {
	border-left: 1px solid var(--line);
}
.lm-tactics-team-name {
	font-size: 0.75rem;
	font-weight: 800;
	color: #e6eaff;
	margin-bottom: 0.4375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lm-tactics-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	padding: 0.25rem 0;
	font-size: 0.75rem;
}
.lm-tactics-row > span {
	color: var(--muted);
}
.lm-tactics-row strong {
	color: #e6eaff;
	text-align: right;
}
.lm-tactics-row--guess strong {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}
.lm-guess-icon {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.lm-guess-icon--correct {
	stroke: var(--green);
}
.lm-guess-icon--wrong {
	stroke: #ef5963;
}


/* ============================================================
   COMPONENT MECHANICS: layout and show/hide behaviour of page widgets
   (look and feel lives in the page sections below)
   ============================================================ */
.shoutbox-form { display: grid; gap: 0.75rem; }
.shoutbox-input-wrap input, .shoutbox-controls select, #inputValue { min-height: 3.25rem; }
.shoutbox-controls { display: grid; grid-template-columns: minmax(0, 1fr) 11.25rem; gap: 0.75rem; }
.message-item .message { word-break: break-word; }
.shoutbox-more { text-align: center; }
body:has(.lp) .discord-btn { display: none !important; }
.content-columns--quest-overlay .users-col.open { pointer-events: auto; }
.users-col { position: absolute; top: 0; left: 0; bottom: 0; z-index: 20; display: none; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.users-col.open { display: flex; }
.users-col-close { position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer; transition: color .15s; }
.content-columns--user-overlay .users-col { top: var(--titlebar-h); left: 0; right: auto; bottom: auto; max-height: min(70 * var(--vh), 35rem); z-index: 95; }
.user-list-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.user-count-bar { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.online-dot { flex-shrink: 0; }
.online-count-badge { position: absolute; top: -0.25rem; right: -0.375rem; pointer-events: none; }
.online-player-item a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-player-country { opacity: 0.6; }
.users-col-actions { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; }
.news-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-input-bar { flex-shrink: 0; display: flex; align-items: center; gap: 0.375rem; flex-wrap: nowrap; overflow: visible; }
.chat-input { flex: 1 1 0; min-width: 0; min-height: 2.25rem; transition: border-color 0.2s; overflow: hidden; text-overflow: ellipsis; }
.chat-lang-select { cursor: pointer; flex-shrink: 0; min-width: 0; }
.chat-send-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.2s; flex-shrink: 0; }
.news-feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; min-height: 0; }
.message-meta { display: flex; align-items: center; gap: 0.3125rem; }
.message-body { word-break: break-word; }
.online-user-toggle { cursor: pointer; user-select: none; }
.onboarding-task-bar { flex-shrink: 0; }
.onboarding-task-link { display: flex; align-items: center; gap: 0.375rem; transition: color .15s; }
.onboarding-label { white-space: nowrap; }
.onboarding-text { flex: 1; min-width: 0; }
.instant-match-bar { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3125rem; }
.im-action-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.instant-match-btn { display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.15s, transform 0.1s; }
.instant-match-btn:hover { opacity: 0.9; }
.instant-match-btn:active { transform: scale(0.97); }
.im-energy-wait { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.25rem; }
.game-tabs { flex-shrink: 0; display: flex; }
.game-tab-btn { flex: 1 1 0; min-width: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.game-tab-panel { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; }
.game-tab-panel.is-active { display: flex; }
.game-tab-panel--chat { overflow: hidden; }
.game-tab-panel--chat .news-col { flex: 1; }
.im-panel { display: block; }
.im-rank-row { display: flex; align-items: center; gap: 0.5rem; }
.im-rank-pos { flex: 0 0 2.375rem; }
.im-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-rank-wins { flex-shrink: 0; }
.im-last-table th { text-align: left; }
.im-last-table th:last-child, .im-last-table td:last-child { text-align: right; }
.im-last-opp { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-last-result { white-space: nowrap; }
.im-last-earned { white-space: nowrap; }
.im-draw-bar { flex-shrink: 0; align-items: center; justify-content: center; gap: 0.625rem; }
.im-draw-label { white-space: nowrap; }
.im-draw-arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.im-draw-arrow:hover { transform: translateX(0.1875rem); }
.onboarding-quests { flex: 0 0 auto; max-height: calc(45 * var(--vh)); min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; }
.onboarding-quest { display: flex; align-items: center; gap: 0.625rem; transition: background .15s, transform .1s; }
.onboarding-quest:active { transform: scale(.98); }
.onboarding-quest > .oq-text { flex: 1 1 0; min-width: 0; overflow: visible; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.oq-step-reward { display: block; min-width: max-content; white-space: nowrap; }
.oq-step-reward--done { opacity: .5; }
.oq-side { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.25rem; }
.oq-cta { display: block; text-align: center; white-space: nowrap; }
.onboarding-group { display: flex; flex-direction: column; gap: 0.375rem; }
.onboarding-quest--done { pointer-events: none; cursor: default; opacity: .5; }
.oq-reward-title, .oq-reward-sub { word-break: normal; overflow-wrap: normal; }
.instant-match-quest { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.instant-match-quest--actionable { cursor: pointer; }
.instant-match-quest .oq-text { min-width: 0; }
.im-quest-progress { justify-self: end; white-space: nowrap; }
.im-quest-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0.5rem; opacity: .78; }
.im-quest-meta > span { flex: 0 1 auto; min-width: 0; }
.onboarding-quest-reward { display: flex; align-items: center; gap: 0.625rem; text-align: left; cursor: default; }
.onboarding-quest-reward .oq-reward-icon { flex-shrink: 0; }
.onboarding-quest-reward .oq-reward-body { flex: 1; min-width: 0; }
.oq-reward-amount { display: inline-block; white-space: nowrap; }
.onboarding-quest-reward .oq-reward-sub { opacity: .75; }
.onboarding-quest-reward .oq-reward-progress { overflow: hidden; }
.onboarding-quest-reward .oq-reward-progress-fill { display: block; min-width: 0.25rem; transition: width .4s ease; }
.onboarding-quest-reward--preview { opacity: .85; }
.onboarding-quest-reward--claimable { cursor: pointer; }
.onboarding-quest-reward--claimable .oq-reward-chev { flex-shrink: 0; opacity: .9; }
.onboarding-quest-reward--loading { opacity: .6; cursor: wait; }
.onboarding-quest-reward--claimed { opacity: .85; }
.onboarding-quest-reward--claimed .oq-reward-check { flex-shrink: 0; }
.onboarding-next-step { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 1rem; border: 0; background: transparent; color: #fff; overflow: auto; z-index: 10000; transform: none; }
.onboarding-next-step[open] { display: grid; place-items: center; }
.onboarding-next-step::backdrop { background: rgba(0,0,0,.72); }
.onboarding-next-step__dialog { display: grid; gap: 0.75rem; width: 100%; min-width: 0; max-width: 27.5rem; max-height: calc(100 * var(--vh) - max(var(--sa-t), 1rem) - max(var(--sa-b), 1rem)); overflow-y: auto; }
.onboarding-next-step__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.625rem; }
.onboarding-next-step__primary { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; text-align: center; }
.onboarding-next-step__later { min-height: 2.75rem; cursor: pointer; }
.oq-g2-countdown { display: flex; align-items: center; gap: 0.5rem; }
.instant-match-running { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; transition: opacity 0.15s, transform 0.1s; }
.im-running-row .instant-match-running { flex: 0 1 16.25rem; max-width: 100%; min-width: 0; }
.instant-match-running:hover { opacity: 0.9; }
.instant-match-running:active { transform: scale(0.97); }
.im-running-label { display: flex; align-items: center; gap: 0.5rem; }
.im-progress-bar { overflow: hidden; }
.im-progress-fill { transition: width 0.3s ease; }
.cal-week { display: flex; flex-direction: column; gap: 0.5rem; }
.cal-day { overflow: hidden; }
.cal-day-header { display: flex; align-items: center; gap: 0.5rem; }
.cal-day-events { display: flex; flex-direction: column; gap: 0.25rem; }
.cal-event { display: flex; align-items: baseline; gap: 0.5rem; transition: background .15s; }
.cal-event-link { display: block; }
.cal-event-time { white-space: nowrap; min-width: 2.375rem; }
.cal-event-title { word-break: break-word; }
.prof-tabs { display: flex; flex-wrap: wrap; column-gap: 0.375rem; overflow: visible; position: sticky; top: 0; z-index: 5; }
.prof-tabs::before { content: ''; position: absolute; top: -0.75rem; left: -0.75rem; right: -0.75rem; bottom: 0; z-index: -1; }
.prof-tab { flex: 1 1 calc((100% - 0.75rem) / 3); max-width: calc((100% - 0.75rem) / 3); text-align: center; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
#tmTabs .prof-tab { white-space: normal; min-height: 2.125rem; display: flex; align-items: center; justify-content: center; }
.mt-stat-scroll { overflow-x: auto; }
.mt-stat-row { display: grid; grid-template-columns: 5.125rem 1.625rem 2.375rem 2.375rem 2.375rem 2.375rem 2rem 2rem 4.25rem 4.25rem; min-width: 28.75rem; align-items: center; gap: 0.125rem; }
.mt-stat-row--empty { opacity: 0.5; }
.mt-stat-cell { text-align: center; }
.mt-stat-cell--name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-stat-cell--fg { white-space: nowrap; }
.mt-stat-sortable { cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.125rem; white-space: nowrap; }
.mt-trophy-row { display: flex; align-items: center; gap: 0.625rem; }
.mt-trophy-icon { display: flex; align-items: center; }
.mt-trophy-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mt-trophy-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-trophy-season { white-space: nowrap; }
.mt-trophy-cup-badge { display: inline-block; vertical-align: middle; }
.tm-error { min-height: 0; }
.tm-error:empty { display: none; }
.tm-card { overflow: hidden; }
.tm-input { flex: 1; }
.tm-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.tm-btn--gold:hover { opacity: .9; }
.tm-create-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tm-create-form .tm-btn { flex-shrink: 0; }
.tm-recv-invite { display: flex; align-items: center; justify-content: space-between; }
.tm-recv-actions { display: flex; gap: 0.625rem; }
.tm-recv-btn { display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.tm-chem { display: flex; align-items: center; gap: 0.625rem; }
.tm-chem-label { white-space: nowrap; }
.tm-chem-bar { flex: 1; overflow: hidden; }
.tm-chem-fill { transition: width .3s; }
.tm-chem-value { min-width: 1.75rem; text-align: right; }
.tm-member { display: flex; align-items: center; gap: 0.5rem; }
.tm-member-info { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; }
.tm-member-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-member-activity { display: flex; gap: 0.1875rem; align-items: center; }
.tm-member-activity .square_green, .tm-member-activity .square_red { display: inline-block; }
.tm-legend { display: flex; gap: 0.875rem; justify-content: center; }
.tm-legend-item { display: flex; align-items: center; gap: 0.3125rem; }
.tm-dot { display: inline-block; }
.tm-match { display: flex; align-items: center; justify-content: space-between; }
.tm-match-players { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; }
.tm-match-players a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-match-result { white-space: nowrap; }
.tm-chat-form { display: flex; gap: 0.5rem; }
.tm-msg-head { display: flex; gap: 0.5rem; align-items: baseline; }
.tm-chat-more { text-align: center; }
.tm-invite-row { display: flex; align-items: center; justify-content: space-between; }
.tm-invite-info { display: flex; align-items: center; gap: 0.375rem; }
.tm-filter-form { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.tm-collapse-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.tm-collapse-chevron { transition: transform .2s; }
.tm-collapse.open .tm-collapse-chevron { transform: rotate(180deg); }
.tm-collapse-body { display: none; }
.tm-collapse.open .tm-collapse-body { display: block; }
.tm-check-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.tm-inline-form { display: flex; gap: 0.5rem; align-items: center; }
.tr-msg { min-height: 0; }
.tr-msg:empty { display: none; }
.tr-intensity-bar { display: flex; align-items: baseline; gap: 0.25rem; }
.tr-intensity-val { transition: color .2s; }
.tr-skills { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.tr-skill-row { display: flex; align-items: center; justify-content: space-between; }
.tr-skill-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-skill-ctrl { flex-shrink: 0; }
.tr-stepper { display: inline-flex; align-items: center; gap: 0; overflow: hidden; }
.tr-stepper-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, background .15s; }
.tr-stepper-input { text-align: center; }
.tr-save { text-align: center; }
.tr-btn-save { display: inline-block; max-width: 20rem; cursor: pointer; transition: opacity .15s; }
.tr-btn-save:active { opacity: .85; }
.tr-preview { overflow: hidden; }
.tr-preview-head { display: flex; align-items: center; justify-content: space-between; }
.tr-coach-toggle { display: flex; align-items: center; gap: 0.5rem; }
.tr-switch { position: relative; display: inline-block; }
.tr-switch input { opacity: 0; }
.tr-switch-slider { position: absolute; cursor: pointer; inset: 0; transition: background .2s; }
.tr-switch-slider::before { content: ""; position: absolute; left: 0.125rem; top: 0.125rem; transition: transform .2s, background .2s; }
.tr-switch input:checked + .tr-switch-slider::before { transform: translateX(1.125rem); }
.tr-prog-row { display: flex; align-items: center; gap: 0.5rem; }
.tr-prog-label { flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-prog-bar { flex: 1; overflow: hidden; }
.tr-prog-fill { transition: width .3s, background .3s; min-width: 0.125rem; }
.tr-prog-val { min-width: 2.75rem; text-align: right; }
.ct-tut-overlay { display: none; position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.ct-tut-overlay--show { display: block; }
.tr-breakdown { max-width: 27rem; }
.ps-msg { text-align: center; min-height: 0.25rem; }
.ps-card { position: relative; z-index: 1; }
.ps-card-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ps-chev { transition: transform .2s; }
.ps-collapsed .ps-chev { transform: rotate(-90deg); }
.ps-collapsed .ps-card-body { display: none !important; }
.ps-card-body { display: block !important; }
.ps-stars { display: flex; gap: 1px; flex-wrap: wrap; overflow: hidden; }
.ps-star { flex-shrink: 0; }
.ps-staff-row { display: flex; align-items: center; gap: 0.75rem; }
.ps-staff-photo { object-fit: cover; }
.ps-staff-info { flex: 1; min-width: 0; }
.ps-staff-actions { text-align: right; }
.ps-btn-extend { cursor: pointer; }
.ps-btn-extend:active { opacity: .8; }
.ps-filter { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.ps-select { flex: 1 1 0; min-width: 0; }
.ps-btn-filter { cursor: pointer; white-space: nowrap; }
.ps-auction-top { display: flex; align-items: center; gap: 0.75rem; }
.ps-auction-photo { object-fit: cover; }
.ps-auction-info { flex: 1; min-width: 0; }
.ps-detail-row { display: flex; justify-content: space-between; }
.ps-bid-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ps-bid-input { flex: 1 1 5rem; min-width: 5rem; }
.ps-bid-btns { display: flex; gap: 0.375rem; }
.ps-btn-bid { cursor: pointer; }
.ps-btn-autobid { cursor: pointer; }
.fr-msg { text-align: center; min-height: 0.125rem; }
.fr-msg:empty { display: none; }
.fr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.fr-label { display: block; }
.fr-btn-send { display: block; cursor: pointer; }
.tcc-tabs.prof-tabs { overflow: hidden; }
.tcc-tabs .prof-tab { white-space: normal; }
.tc-btn-danger { display: inline-block; cursor: pointer; }
.tc-btn-danger:active { opacity: .85; }
.tcc-messages { overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; }
.tcc-empty { text-align: center; }
.tcc-msg { display: flex; flex-direction: column; max-width: 80%; }
.tcc-msg--mine { align-self: flex-end; align-items: flex-end; }
.tcc-msg-bubble { word-break: break-word; white-space: pre-wrap; }
.tcc-form { display: flex; flex-direction: column; gap: 0.5rem; }
.tcc-input { resize: none; min-height: 0; overflow-y: auto; }
.tcc-send-btn { align-self: flex-end; display: inline-block !important; }
.fr-req-top { display: flex; align-items: center; justify-content: space-between; }
.fr-req-info { display: flex; align-items: center; gap: 0.5rem; }
.fr-req-detail { display: flex; align-items: center; justify-content: space-between; }
.fr-req-actions { display: flex; gap: 0.5rem; }
.fr-btn-accept, .fr-btn-reject { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fr-match-item { display: block; }
.fr-match-players { display: flex; align-items: center; gap: 0.5rem; }
.fr-match-bottom { display: flex; align-items: center; gap: 0.625rem; }
.fr-empty { text-align: center; }
.kt-balance { display: flex; gap: 0.625rem; }
.kt-bal-item { flex: 1; text-align: center; }
.kt-bal-label { display: block; }
.kt-bal-value { display: block; }
.sat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sat-card--overall { grid-column: 1 / -1; }
.sat-card--payout { grid-column: 1 / -1; text-align: center; }
.sat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.sat-info { position: relative; flex: 0 0 auto; }
.sat-info summary { display: grid; place-items: center; cursor: pointer; list-style: none; }
.sat-info summary::-webkit-details-marker { display: none; }
.sat-info-text { position: absolute; z-index: 10; top: 1.875rem; right: 0; }
.sat-value-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sat-context { text-align: right; }
.sat-meter { overflow: hidden; }
.sat-meter-fill { transition: width .4s ease; }
.sat-scale { display: flex; justify-content: space-between; }
.kt-tx-top { display: flex; align-items: center; justify-content: space-between; }
.mn-tabs { display: flex; gap: 0.375rem; }
.mn-tab { flex: 1; text-align: center; }
.mn-player-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.mn-status { min-width: 3.875rem; text-align: right; }
.mn-player { display: flex; align-items: center; gap: 0.375rem; flex: 1; }
.mn-player .flag { flex-shrink: 0; }
.mn-search-row { display: flex; align-items: center; justify-content: space-between; }
.mn-btn-msg { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-tabs { display: flex; gap: 0.375rem; }
.sp-tabs .tab { flex: 1; text-align: center; }
.sp-tabs .tab a.sp-tab { display: block; }
.sp-list { list-style: none; }
.sp-list li { position: relative; }
.sp-list li::before { position: absolute; left: 0; }
.sp-btn-buy { display: block; cursor: pointer; }
.sp-info-badge { display: flex; align-items: center; gap: 0.375rem; }
.rk-nav { display: flex; align-items: center; gap: 0.375rem; }
.rk-nav-btn { display: flex; align-items: center; justify-content: center; min-width: 2.375rem; }
.rk-select { flex: 1; }
.rk-player { display: flex; align-items: center; gap: 0.625rem; }
.rk-pos { min-width: 2rem; text-align: right; flex-shrink: 0; }
.rk-player .flag { flex-shrink: 0; }
.rk-player-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rk-player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-tabs { display: flex; gap: 0.25rem; position: sticky; top: 0; z-index: 10; }
.ri-tab { flex: 1; text-align: center; transition: background .15s, color .15s; }
.ri-nav { display: flex; align-items: center; gap: 0.375rem; }
.ri-nav-btn-disabled { opacity: .35; pointer-events: none; }
.ri-ranking-pagination { justify-content: center; }
.ri-page-status { min-width: 3.375rem; text-align: center; }
.ri-player { display: flex; align-items: center; gap: 0.5rem; }
.ri-pos { min-width: 1.75rem; text-align: right; flex-shrink: 0; }
.ri-player-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ri-player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-color-banned { opacity: .45; }
.ri-match { display: block; }
.ri-countdown { display: flex; align-items: center; gap: 0.375rem; }
.ri-countdown svg { flex-shrink: 0; }
.ri-legend-title { display: flex; align-items: center; gap: 0.3125rem; }
.ri-info-btn { display: inline-flex; align-items: center; cursor: pointer; opacity: .7; transition: opacity .15s; }
.ri-info-btn:hover { opacity: 1; }
.ri-legend-item { display: flex; align-items: center; gap: 0.5rem; }
.ri-legend-dot { flex-shrink: 0; }
.ri-energy-head { display: flex; justify-content: space-between; align-items: center; }
.ri-energy-bar { overflow: hidden; }
.ri-energy-fill { transition: width .4s ease; }
.ri-energy-meta { display: flex; justify-content: space-between; align-items: center; }
.mb-tabs { display: flex; gap: 0.25rem; }
.mb-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; cursor: pointer; transition: background .15s, color .15s; }
.mb-status { text-align: center; }
.mb-msg-row { display: flex; align-items: center; gap: 0.625rem; }
.mb-msg { flex: 1; min-width: 0; }
.mb-msg-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-msg-del { display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.mb-label { display: block; }
.mb-textarea { min-height: 6.25rem; resize: vertical; }
.mb-btn { display: block; cursor: pointer; }
.mb-detail-row { display: flex; align-items: baseline; gap: 0.625rem; }
.mb-detail-label { min-width: 4.375rem; flex-shrink: 0; }
.mb-btn-row { display: flex; gap: 0.5rem; justify-content: center; }
.mb-btn-row .mb-btn { flex: none; text-align: center; }
.mb-btn-back { display: inline-flex; align-items: center; justify-content: center; }
.st-status { text-align: center; }
.st-btn { display: block; cursor: pointer; }
.st-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.gu-card-body .gu-table-wrap { overflow-x: auto; }
.gu-card-body table.gu-table { min-width: 27.5rem; }
.gu-card-body .gu-table th, .gu-card-body .gu-table td { text-align: left; vertical-align: top; }
.gu-card-body [dir="rtl"] .gu-table th, .gu-card-body [dir="rtl"] .gu-table td { text-align: right; }
.gu-card-body .gu-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; list-style: none; }
.gu-card-body .gu-timeline li { min-width: 0; }
.gu-card-body .gu-timeline strong { display: block; }
.lm-tabs { display: flex; gap: 0.25rem; }
.lm-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; cursor: pointer; transition: all 0.2s; }
.lm-tab svg { opacity: 0.6; transition: opacity 0.2s; }
.lm-tab:hover svg { opacity: 0.85; }
.lm-tab-active svg { opacity: 1; }
.lm-panel { display: none; }
.lm-panel-active { display: block; }
.sponsor-reward-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10000; }
.sponsor-reward-popup { width: min(100%, 23.75rem); text-align: center; }
.sponsor-reward-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; justify-content: center; }
.sponsor-reward-link { flex: 1 1 8.75rem; }
.sponsor-reward-close { cursor: pointer; }
.new-manager-prompt { display: flex; align-items: center; gap: 0.75rem; }
.new-manager-prompt-text { flex: 1; min-width: 0; }
.new-manager-prompt-cta { flex-shrink: 0; }
.ftr-title { display: block; }
.ftr-title .ct-bench-pos { display: inline-flex; vertical-align: middle; }
.ftr-offers { display: flex; flex-direction: column; gap: 0.375rem; }
.ftr-offer { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.5rem; }
.ftr-offer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftr-market-pick-label { display: inline-flex; }
.ftr-market-all { display: flex; justify-content: center; }
.ftr-rec-market-cta { min-height: 2.625rem; align-items: center; }
.tr2-training-countdown-head, .tr2-training-countdown-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tr2-start-training { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.625rem; cursor: pointer; }
.tr2-start-training--pulse { position: relative; z-index: 1; }
.tr2-start-training:disabled { opacity: .65; cursor: wait; }
.tr2-training-countdown-empty { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; overflow-x: hidden; }
.lp-hero { display: flex; justify-content: center; text-align: center; }
.lp-hero-inner { max-width: 37.5rem; }
.lp-hero-badge { display: inline-block; }
.lp-hero-sub { max-width: 30rem; }
.lp-cta-box { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: transform .15s, opacity .15s, box-shadow .15s; }
.lp-btn:active { transform: scale(.97); }
.lp-btn--primary:hover { opacity: .92; }
.lp-btn--xl { min-width: 13.75rem; }
.lp-highlights { list-style: none; max-width: 25rem; text-align: left; }
.lp-highlights li { position: relative; }
.lp-highlights li::before { position: absolute; left: 0; }
.lp-auth { max-width: 26.25rem; display: flex; flex-direction: column; align-items: center; }
.lp--android { justify-content: center; }
.lp-alert { text-align: center; }
.lp-form-head { text-align: center; }
.lp-field-label { display: block; }
.lp-manager-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.lp-manager-field .lp-field-label { white-space: nowrap; }
.lp-form { display: flex; flex-direction: column; gap: 0.75rem; }
.lp-field { position: relative; }
.lp-input, .lp-select { transition: border-color .15s; }
.lp-country-detected { display: flex; align-items: center; gap: 0.5rem; }
.lp-forgot { text-align: center; }
.lp-switch { text-align: center; }
.lp-proof { max-width: 30rem; }
.lp-proof-head { text-align: center; }
.lp-ranking { overflow: hidden; }
.lp-ranking-header { display: grid; grid-template-columns: 2.5rem 1fr 3.75rem; }
.lp-ranking-row { display: grid; grid-template-columns: 2.5rem 1fr 3.75rem; align-items: center; }
.lp-rank-name { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-rank-pts { text-align: right; }
.lp-lang { max-width: 30rem; text-align: center; }
.lp-lang-wrap { display: inline-block; }
body:has(.lp) .mobile-bottom-nav, body:has(.lp) .site-footer { display: none !important; }
body:has(.lp) .server-time { display: none !important; }
body:has(.lp) .header-shell { display: none !important; }
html:has(.lp) { overflow: auto !important; }
body:has(.lp) { overflow: auto !important; display: block !important; }
body:has(.lp) .page-shell { flex: none !important; overflow: visible !important; display: block !important; max-width: 100% !important; }
.lp-footer { text-align: center; }
.lp-footer-sep { opacity: 0.4; }
.lp-lang-top { display: flex; justify-content: flex-end; }
.language-links-footer { text-align: center; }
.seo-descriptions { display: inline; }
.seo-descriptions-toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; vertical-align: middle; transition: color 0.2s; }
.seo-descriptions-toggle::-webkit-details-marker { display: none; }
.seo-descriptions-toggle::marker { display: none; content: ''; }
.seo-descriptions-content { max-width: 43.75rem; text-align: left; }
.lp-cta-box { flex-direction: row; gap: 0.875rem; justify-content: center; }
.lp-cta-or { display: none; }
.mt-profile-card { overflow: hidden; }
.mt-profile-header { display: flex; align-items: center; gap: 0.625rem; }
.mt-profile-header .flag { flex-shrink: 0; }
.mt-profile-name { flex: 1; }
.mt-online { display: flex; align-items: center; gap: 0.3125rem; }
.mt-online::before { content: ''; }
.mt-detail { display: flex; justify-content: space-between; align-items: center; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mt-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; transition: background .15s, border-color .15s; cursor: pointer; }
.mt-roster-header { display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
.mt-roster-row { display: flex; align-items: center; gap: 0.25rem; overflow: hidden; transition: background .12s; }
.mt-rh-face, .mt-player-face { flex-shrink: 0; }
.mt-rh-name, .mt-player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mt-player-nation { text-align: center; flex-shrink: 0; }
.mt-rh-age, .mt-player-age { text-align: center; flex-shrink: 0; white-space: nowrap; }
.mt-rh-skill, .mt-player-skill { text-align: right; flex-shrink: 0; white-space: nowrap; }
.mt-player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.draft-page { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.draft-container { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.draft-header { display: flex; gap: 0.5rem; }
.draft-row { display: flex; align-items: center; gap: 0.5rem; transition: background .12s, transform .15s; cursor: pointer; }
.draft-row.draft-dragging { opacity: .5; }
.draft-col-rank { text-align: center; flex-shrink: 0; }
.draft-col-handle { flex-shrink: 0; cursor: grab; user-select: none; }
.draft-col-handle:active { cursor: grabbing; }
.draft-col-arrows { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.draft-col-check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.draft-col-check input.draft-check { cursor: pointer; }
.draft-bulk-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.draft-bulk-selectall { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.draft-bulk-selectall input { cursor: pointer; }
.draft-bulk-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; transition: opacity .15s; }
.draft-bulk-btn:disabled { opacity: .4; cursor: not-allowed; }
.draft-bulk-count { min-width: 1.125rem; text-align: center; }
.draft-bulk-summary td:last-child { text-align: right; }
.draft-arrow { cursor: pointer; }
.draft-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-col-skill, .draft-col-potential { text-align: center; flex-shrink: 0; }
.draft-list { flex: 1; overflow-y: auto; min-height: 0; }
.draft-topbar { display: flex; align-items: center; gap: 0.5rem; }
.draft-info-btn { cursor: pointer; display: flex; align-items: center; transition: color .15s; }
.draft-tooltip { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.draft-tooltip-inner { position: relative; min-width: 15rem; max-width: 21.25rem; }
.draft-tooltip-close { position: absolute; top: 0.375rem; right: 0.75rem; cursor: pointer; }
.draft-tt-btn { display: block; cursor: pointer; text-align: center; }
.draft-tt-stats td:last-child { text-align: right; }
.draft-tt-potential { text-align: center; }
.mt-empty { text-align: center; }
.mt-transfer-row { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.mt-transfer-player { flex: 1; min-width: 0; }
.mt-transfer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mt-transfer-detail { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.mt-transfer-meta { text-align: right; flex-shrink: 0; }
.mt-transfer-price { display: block; }
.mt-transfer-date { display: block; }
.mt-transfer-flag { flex-shrink: 0; cursor: pointer; transition: background .15s, color .15s; display: flex; align-items: center; }
.mt-result-row { display: flex; align-items: center; gap: 0.625rem; transition: background .15s; }
.mt-result-type { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; min-width: 5.625rem; }
.mt-result-teams { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; justify-content: center; }
.mt-result-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5rem; text-align: center; }
.mt-result-score { flex-shrink: 0; }
.mt-result-date { flex-shrink: 0; text-align: right; min-width: 5rem; }
.tr2-section { overflow: hidden; }
.tr2-section-head { display: flex; align-items: center; gap: 0.625rem; }
.tr2-section-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr2-section-title { flex: 1; }
.tr2-badge { min-width: 1.375rem; text-align: center; }
.tr2-hint { display: flex; align-items: center; gap: 0.5rem; }
.tr2-hint::before { flex-shrink: 0; }
.tr2-auto-assign-focus { position: relative; }
.tr2-auto-assign-focus::after { content: ''; position: absolute; left: 1.75rem; bottom: -0.4375rem; transform: rotate(45deg); }
.tr2-auto-assign { display: flex; align-items: center; justify-content: center; gap: 0.375rem; max-width: calc(100% - 1.75rem); cursor: pointer; transition: background .15s, transform .15s, opacity .15s; }
.tr2-auto-assign:active { transform: scale(.98); }
.tr2-auto-assign:disabled { cursor: wait; opacity: .65; }
.tr2-player--auto-flying { position: relative; z-index: 3; }
.tr2-quick-assign { display: flex; gap: 0.25rem; flex-shrink: 0; }
.tr2-quick-btn { cursor: pointer; white-space: nowrap; transition: transform .1s, opacity .1s; }
.tr2-quick-btn:hover { opacity: .85; }
.tr2-quick-btn:active { transform: scale(.95); }
.tr2-section--group1 .tr2-quick-btn--a { display: none; }
.tr2-section--group2 .tr2-quick-btn--b { display: none; }
.tr2-skill-select { display: flex; align-items: center; gap: 0.5rem; }
.tr2-skill-icon { flex-shrink: 0; }
.tr2-select { flex: 1; cursor: pointer; }
.tr2-player-list { min-height: 3.125rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tr2-player-list:empty::after { display: flex; align-items: center; justify-content: center; min-height: 3.125rem; opacity: .5; }
.tr2-player { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: transform .1s, border-color .15s, box-shadow .15s; user-select: none; flex: 0 0 100%; min-width: 0; }
.tr2-player:active { transform: scale(.97); }
.tr2-player-face { object-fit: contain; flex-shrink: 0; }
.tr2-player-info { flex: 1; min-width: 0; }
.tr2-player-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr2-player-skill { display: flex; align-items: center; gap: 0.1875rem; }
.tr2-btn-save { display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; transition: opacity .15s, transform .1s; }
.tr2-btn-save:hover { opacity: .9; }
.tr2-btn-save:active { transform: scale(.98); }
.tr2-msg { display: flex; align-items: center; gap: 0.5rem; }
.tr2-flash { position: fixed; top: 0.625rem; left: 50%; transform: translateX(-50%) translateY(-3.125rem); z-index: 9999; opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; }
.tr2-flash--show { transform: translateX(-50%) translateY(0); opacity: 1; }
.tr2-quest-hint { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.68); z-index: 10001; }
.tr2-quest-hint-popup { width: min(100%, 21.25rem); text-align: center; }
.tr2-quest-hint-text { margin: 0.5rem 0 1rem; line-height: 1.45; }
.tr2-quest-hint-btn { width: 100%; padding: 0.7rem 0.75rem; border: 0; cursor: pointer; }
.tr2-info-btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.tr2-player-meta { display: flex; align-items: center; gap: 0.5rem; }
.tr2-player-age::before { content: ''; display: inline-block; vertical-align: -1px; }
.tr2-overlay { display: none; position: fixed; inset: 0; z-index: 999; }
.tr2-tooltip { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 17.5rem; max-width: calc(88 * var(--vw)); max-height: calc(70 * var(--vh)); z-index: 1000; flex-direction: column; }
.tr2-tooltip-head { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.tr2-tooltip-face { width: 1.875rem; height: 2.625rem; object-fit: contain; flex-shrink: 0; }
.tr2-tooltip-head-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mt-pot-stars { display: block; }
.tr2-tooltip-close { cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.tr2-tooltip-skills { overflow-y: auto; flex: 1; }
.tr2-tt-row { display: flex; align-items: center; gap: 0.375rem; }
.tr2-tt-label { flex-shrink: 0; }
.tr2-tt-bar { flex: 1; overflow: hidden; }
.tr2-tt-fill { transition: width .3s ease; }
.tr2-tt-val { text-align: right; flex-shrink: 0; }
.tr2-tt-potbar-head { display: flex; justify-content: space-between; }
.tr2-tt-potbar-track { overflow: hidden; }
.tr2-tt-potbar-fill { transition: width .4s ease; }
.tr2-playtime { overflow: hidden; }
.tr2-pt-th-name { text-align: left; }
.tr2-pt-th { text-align: center; }
.tr2-pt-th { white-space: nowrap; }
.tr2-info-icon { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; }
.tr2-info-tooltip { display: none; }
.tr2-info-section { display: flex; align-items: center; gap: 0.5625rem; }
.tr2-info-range { min-width: 7rem; text-align: center; }
.tr2-pt-name { white-space: nowrap; }
.tr2-pt-min { text-align: center; }
.tr2-progress-lock { min-height: 14.375rem; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.tr2-progress-lock-text { max-width: 20rem; }
.tr2-supporter-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; }
.tr2-supporter-btn:active { transform: translateY(1px); }
.tr2-prog-filters { display: flex; gap: 0.5rem; }
.tr2-prog-btn { flex: 1; cursor: pointer; transition: all .15s; }
.tr2-training-complete { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(255,193,7,.5); background: rgba(255,193,7,.09); }
.tr2-training-complete span { min-width: 0; flex: 1 1 auto; }
.tr2-training-complete button { flex: 0 1 auto; max-width: 100%; padding: 0.6rem 1rem; border: 0; border-radius: 0.8rem; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0.25rem 0 var(--gold3); color: #3a2400; font: 700 1rem var(--f-head); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.tr2-prog-paywall { min-height: 14.375rem; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.tr2-prog-row { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; transition: background .15s; }
.tr2-prog-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr2-name-link { cursor: pointer; }
.tr2-prog-info-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; flex-shrink: 0; }
.tr2-prog-bar-wrap { overflow: hidden; }
.tr2-prog-bar { transition: width .3s; }
.tr2-prog-next { flex-shrink: 0; }
.tr2-prog-next-lbl { display: flex; justify-content: space-between; }
.tr2-prog-next .tr2-prog-bar-wrap { display: flex; }
.tr2-prog-bar--gain { transition: width .65s ease-out; }
.tr2-prog-delta { text-align: right; }
.tr2-prog-detail-head { display: flex; align-items: center; gap: 0.625rem; }
.tr2-prog-back { cursor: pointer; }
.tr2-progd-row { display: flex; align-items: center; gap: 0.5rem; }
.tr2-progd-label { white-space: nowrap; }
.tr2-progd-val { text-align: right; }
.tr2-progd-bar-wrap { flex: 1; overflow: hidden; }
.tr2-progd-bar { transition: width .3s; }
.tr2-progd-delta { text-align: right; }
.tr2-progd-total { display: flex; align-items: center; justify-content: space-between; }
.tr2-progd-row--fitness { opacity: .7; }
.pls-table { overflow-x: auto; }
.pls-row { display: flex; align-items: center; gap: 0.125rem; }
.pls-cell { flex: 0 0 2rem; text-align: center; white-space: nowrap; }
.pls-cell--opp { flex: 1 1 0; min-width: 4.375rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-cell--score { flex: 0 0 2.75rem; text-align: center; }
.tm-listing { display: block; transition: background .12s; cursor: pointer; }
.tm-tutorial-page .mobile-bottom-nav, .tm-tutorial-page .primary-nav, .tm-tutorial-page .nav-drawer, .tm-tutorial-page #tmTabs, .tm-tutorial-page .tm-filters, .tm-tutorial-page .screen-titlebar > .screen-btn { display: none !important; }
.tm-tut-active .tm-listing:not(.tm-listing--gold) { display: none; }
.tm-tut-overlay { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tm-tut-active .tm-listing--gold { position: relative; z-index: 95; }
.tm-tut-active .tm-listing:not(.tm-listing--gold) { opacity: .3; pointer-events: none; transition: opacity .3s, filter .3s; }
.tm-tut-active .tm-filters, .tm-tut-active #tmTabs { opacity: .3; pointer-events: none; }
.tm-coach-bubble { position: relative; z-index: 95; display: flex; align-items: flex-start; gap: 0.625rem; }
.tm-coach-icon { flex-shrink: 0; }
.tm-coach-bubble::after { content: ''; position: absolute; bottom: -0.5rem; left: 50%; transform: rotate(45deg); }
.tm-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.tm-player { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.tm-listing-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-listing-price { flex-shrink: 0; }
.tm-row-mid { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.tm-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.tm-details { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tm-bid-info { display: flex; align-items: center; gap: 0.75rem; }
.tm-bid-form { display: flex; align-items: center; gap: 0.375rem; }
.tm-actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.tm-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.tm-filter-group { display: flex; align-items: center; gap: 0.25rem; }
.tm-filter-label { white-space: nowrap; }
.tm-filter-select { min-width: 3.75rem; }
.tm-filter-input { text-align: center; }
.tm-actions form { display: flex; align-items: center; gap: 0.375rem; }
.tm-actions .st-btn { display: inline-block; }
.tm-empty { text-align: center; }
.tm-sell-label { display: block; }
.tm-listing-fee-help { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: 1px; cursor: help; }
.tm-listing-fee-tooltip { position: fixed; z-index: 10000; width: 17.5rem; max-width: calc(100 * var(--vw) - 1.5rem); text-align: left; white-space: pre-line; visibility: hidden; opacity: 0; transform: translateY(0.25rem); transition: opacity .15s ease, transform .15s ease; pointer-events: auto; }
.tm-listing-fee-tooltip.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.tm-listing-fee-tooltip-close { position: absolute; top: 0.25rem; right: 0.3125rem; width: 1.375rem; height: 1.375rem; cursor: pointer; }
.lg-matchday-nav { display: flex; align-items: center; justify-content: space-between; }
.lg-matchday-controls { display: flex; align-items: center; gap: 0.625rem; }
.lg-select { max-width: 10rem; }
.lg-divisions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.lg-nav-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lg-card { overflow: hidden; }
.lg-standing-header, .lg-standing-row { display: grid; grid-template-columns: 1.75rem 1fr 2rem 2rem 3rem 2.5rem; align-items: center; }
.lg-standing-rank { text-align: center; }
.lg-standing-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-standing-w, .lg-standing-l { text-align: center; }
.lg-standing-diff { text-align: center; }
.lg-standing-pts { text-align: center; }
.lg-legend { display: flex; gap: 1rem; justify-content: center; }
.lg-legend-item { display: flex; align-items: center; gap: 0.3125rem; }
.lg-legend-dot { display: inline-block; }
.lg-game-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.375rem; }
.lg-game-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.375rem; min-width: 0; }
.lg-game-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lg-game-vs { flex-shrink: 0; }
.lg-game-result { display: flex; min-width: 2.75rem; align-items: center; justify-content: flex-end; gap: 0.3125rem; text-align: right; }
.lg-game-result--stack { flex-direction: column; align-items: flex-end; gap: 0.125rem; min-width: 3.625rem; }
.lg-game-action { display: inline-flex; align-items: center; gap: 0.1875rem; flex-shrink: 0; }
.lg-game-action svg { flex-shrink: 0; }
.lg-stat-cats { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.lg-stat-cat { cursor: pointer; transition: all .12s; }
.lg-stat-header, .lg-stat-row { display: grid; grid-template-columns: 1.75rem 1fr 5.625rem 3rem 3rem; align-items: center; }
.lg-stat-rank { text-align: center; }
.lg-stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-stat-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-stat-val { text-align: center; }
.lg-stat-avg { text-align: center; }
.lg-empty { text-align: center; }
.lg-draw-countdown { text-align: center; }
.staff-tip-btn { cursor: pointer; vertical-align: middle; opacity: 0.8; }
.staff-tip-btn:active { opacity: 1; }
.staff-tip-overlay { display: none; position: fixed; inset: 0; z-index: 1200; }
.staff-tip-overlay--show { display: block; }
.staff-tip-popup { display: none; position: fixed; bottom: calc(var(--bottom-nav-h, 3.625rem) + max(var(--sa-b), var(--android-nav-bottom, 0px))); left: 0; right: 0; max-height: calc(60 * var(--vh)); overflow-y: auto; z-index: 1201; }
.staff-tip-popup--show { display: block; }
.staff-tip-close { display: block; cursor: pointer; }
.imp-card { overflow: hidden; }
.imp-opp { display: flex; align-items: center; gap: 0.625rem; }
.imp-opp-flag { flex-shrink: 0; transform: scale(1.4); transform-origin: left center; }
.imp-opp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-opp-avg { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; }
.imp-opp-avg-lbl { text-align: right; }
.imp-ratings-head { display: flex; align-items: center; gap: 0.5rem; }
.imp-rh-side { flex: 0 0 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-rh-side--opp { text-align: right; }
.imp-rh-cat { flex: 1; }
.imp-row { display: flex; align-items: center; gap: 0.5rem; }
.imp-val { flex: 0 0 1.875rem; text-align: center; }
.imp-cat { flex: 1; text-align: center; }
.imp-bar { flex: 0 0 3.25rem; overflow: hidden; }
.imp-bar--opp { transform: scaleX(-1); }
.imp-countdown { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.imp-actions { display: flex; flex-direction: column; gap: 0.625rem; }
.imp-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; }
.imp-btn--primary:disabled { opacity: .6; cursor: default; }
.imp-prep-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.imp-prep-countdown { display: flex; align-items: center; gap: 0.5rem; }
.imp-btn--ready { flex-shrink: 0; }
.trating-row { display: flex; align-items: center; gap: 0.625rem; }
.trating-lbl { flex: 0 0 42%; }
.trating-bar { flex: 1; overflow: hidden; }
.trating-val { flex: 0 0 1.875rem; text-align: right; }
.mt-pie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.mt-pie-card { min-width: 0; }
.mt-pie-title { min-height: 2rem; }
.mt-pie-content { display: flex; align-items: center; gap: 0.875rem; }
.mt-pie { display: grid; flex: 0 0 5.75rem; place-items: center; }
.mt-pie::after { grid-area: 1 / 1; content: ''; }
.mt-pie span { position: relative; z-index: 1; grid-area: 1 / 1; }
.mt-pie-legend { display: grid; min-width: 0; gap: 0.4375rem; flex: 1; }
.mt-pie-legend-item { display: grid; grid-template-columns: 0.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.375rem; }
.mt-pie-legend-item span:not(.mt-pie-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-pie-dot { display: block; }
.game-tab-badge { display: inline-block; min-width: 1rem; }


html {
	font-size: clamp(9px, min(0.8333vw, 1.4815vh), 20px);
	height: 100%;
}

body.gx-app {
	margin: 0;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	display: grid;
	grid-template-columns: var(--rail-w) minmax(0, 1fr);
	color: #fff;
	font-family: var(--f-body);
	font-size: 1rem;
	background: radial-gradient(circle at 30% 0%, #23336b 0%, var(--navy) 55%, #080e22 100%) fixed;
	-webkit-font-smoothing: antialiased;
}

body.gx-app.gx-guest {
	grid-template-columns: minmax(0, 1fr);
	overflow-y: auto;
}

body.gx-app .app-background { display: none; }

.gx-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 50% 40% at 85% 110%, rgba(255, 184, 28, 0.07), transparent 70%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 46px);
}

.gx-i {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

.gx-h {
	font-family: var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* ── Legacy header: hidden for logged-in users (time lives in the HUD) ── */
body.gx-app #header { display: none; }
body.gx-app.gx-guest #header { display: block; }
body.gx-app .mobile-bottom-nav { display: none !important; }

/* ============================================================
   RAIL — left icon navigation
   ============================================================ */
.gx-rail {
	position: relative;
	z-index: 120;
	grid-column: 1;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 1rem 0 1rem;
	padding-left: var(--sa-l);
	background: linear-gradient(180deg, rgba(22, 34, 74, 0.92), rgba(10, 17, 38, 0.96));
	border-right: 2px solid var(--line);
	box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.35);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
}
.gx-rail::-webkit-scrollbar { display: none; }

.gx-rail a,
.gx-rail button {
	position: relative;
	width: 6rem;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 0.55rem 0 0.45rem;
	border-radius: 1rem;
	color: var(--muted);
	font: 600 0.85rem/1.1 var(--f-head);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	background: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.gx-rail a .gx-i,
.gx-rail button .gx-i { width: 1.75rem; height: 1.75rem; }
.gx-rail a span,
.gx-rail button span {
	max-width: 100%;
	overflow: hidden;
	padding: 0 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
	hyphens: auto;
}
.gx-rail a:hover,
.gx-rail button:hover {
	color: #fff;
	background: rgba(63, 216, 255, 0.08);
}
.gx-rail a.is-active {
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	box-shadow: 0 0.25rem 0 var(--gold3), 0 0.5rem 1.2rem rgba(255, 184, 28, 0.3);
}
.gx-rail-sep {
	width: 3rem;
	height: 2px;
	flex-shrink: 0;
	margin: 0.35rem 0;
	background: var(--line);
	border-radius: 2px;
}
.gx-rail-spacer { flex: 1; min-height: 0.5rem; }
.gx-rail .gx-badge {
	position: absolute;
	top: 0.25rem;
	right: 0.9rem;
}

.gx-badge {
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.35rem;
	border-radius: 0.7rem;
	background: var(--red);
	color: #fff;
	font: 700 0.75rem/1.25rem var(--f-body);
	text-align: center;
	box-shadow: 0 0 0 2px var(--navy);
}
.gx-badge:empty { display: none; }

/* ============================================================
   MENU OVERLAY — full game menu (all sections as tiles)
   ============================================================ */
body.gx-app .gx-menu {
	position: fixed;
	inset: 0;
	left: var(--rail-w);
	z-index: 115;
	display: none;
	padding: 3rem var(--pad);
	overflow-y: auto;
	background: rgba(8, 13, 32, 0.93);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	max-height: none;
	bottom: 0;
}
.gx-menu-close {
	position: absolute;
	top: 1.75rem;
	right: var(--pad);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	display: grid;
	place-items: center;
	background: var(--panel);
	border: 2px solid var(--line);
	color: var(--gold);
	cursor: pointer;
}
.gx-menu-close .gx-i { width: 1.6rem; height: 1.6rem; }
.gx-menu-title {
	font: 700 3.25rem/1 var(--f-head);
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 2rem;
}
/* Groups flow as columns; inside a group the tiles are rows (icon + label), two per
   row once a group is wide enough. Long labels wrap instead of pushing into the next group. */
.gx-menu-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	align-items: start;
	gap: 1.75rem var(--gap);
}
.gx-menu-group { min-width: 0; }
.gx-menu-group h3 {
	font: 600 1.25rem var(--f-head);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--line);
}
.gx-menu-group .drawer-section {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}
.gx-tile {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
	min-height: 4.2rem;
	padding: 0.6rem 0.9rem;
	border-radius: var(--r2);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gx-tile:hover {
	transform: translateY(-0.2rem);
	border-color: var(--gold);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45), 0 0 1.25rem rgba(255, 184, 28, 0.2);
}
.gx-tile .gx-tile-ico {
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 0.8rem;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--c, var(--cyan));
	box-shadow: inset 0 -0.25rem 0 rgba(0, 0, 0, 0.2);
}
.gx-tile .gx-tile-ico .gx-i { width: 1.5rem; height: 1.5rem; }
.gx-tile li,
.gx-tile .gx-tile-label {
	min-width: 0;
	list-style: none;
	font: 600 1.1rem/1.15 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	overflow-wrap: anywhere;
	hyphens: auto;
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	body.gx-app .gx-menu { padding: 1.6rem var(--pad); }
	.gx-menu-close { top: 1rem; width: 32px; height: 32px; }
	.gx-menu-title { font-size: 2.4rem; margin-bottom: 1rem; }
	.gx-menu-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 0.9rem; }
	.gx-menu-group h3 { font-size: 11px; margin-bottom: 6px; padding-bottom: 4px; }
	.gx-menu-group .drawer-section { grid-template-columns: minmax(0, 1fr); gap: 5px; }
	.gx-tile { min-height: 34px; gap: 7px; padding: 4px 7px; border-radius: 9px; }
	.gx-tile .gx-tile-ico { width: 24px; height: 24px; border-radius: 7px; }
	.gx-tile .gx-tile-ico .gx-i { width: 14px; height: 14px; }
	.gx-tile li, .gx-tile .gx-tile-label { font-size: 11.5px; letter-spacing: 0.02em; }
}

/* ============================================================
   MAIN + HUD
   ============================================================ */
body.gx-app .page-shell,
body.gx-app #mainContent {
	position: relative;
	z-index: auto; /* no stacking context: page modals must cover rail + HUD */
	grid-column: 2;
	grid-row: 1;
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	zoom: 1;
	width: auto;
	max-width: none;
	margin: 0;
	display: flex;
	flex-direction: column;
}
body.gx-app.gx-guest .page-shell,
body.gx-app.gx-guest #mainContent {
	grid-column: 1;
	height: auto;
	overflow: visible;
}

.gx-hud {
	position: fixed;
	z-index: 110;
	top: 0;
	right: 0;
	height: var(--head-h);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 var(--pad) 0 0;
	padding-right: calc(var(--pad) + var(--sa-r));
	pointer-events: none;
}
.gx-hud > * { pointer-events: auto; }

.gx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 3.25rem;
	padding: 0 1.1rem 0 0.45rem;
	border-radius: 1.1rem;
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	color: #fff;
	transition: border-color 0.15s;
}
a.gx-chip:hover { border-color: var(--line2); }
.gx-chip-ico {
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 0.75rem;
	display: grid;
	place-items: center;
	background: var(--c, var(--gold));
	color: var(--ci, #3a2400);
	box-shadow: inset 0 -0.2rem 0 rgba(0, 0, 0, 0.18);
}
.gx-chip-ico .gx-i { width: 1.35rem; height: 1.35rem; }
.gx-chip-val {
	font: 700 1.45rem/1 var(--f-head);
	letter-spacing: 0.02em;
}
.gx-chip-sub {
	font: 600 0.72rem/1.1 var(--f-head);
	letter-spacing: 0.12em;
	color: var(--muted);
	text-transform: uppercase;
}
.gx-chip-stack { display: flex; flex-direction: column; gap: 0.15rem; }
.gx-chip--icon { padding: 0; width: 3.25rem; justify-content: center; position: relative; }
.gx-chip--icon .gx-i { width: 1.5rem; height: 1.5rem; color: var(--soft); }
.gx-chip--icon .gx-badge { position: absolute; top: -0.4rem; right: -0.4rem; }
.gx-chip--energy .gx-chip-ico { --c: var(--cyan); --ci: #06283a; }
.gx-chip--train .gx-chip-ico { --c: var(--green); --ci: #08321a; }
.gx-chip--time .gx-chip-ico { --c: var(--panel2); --ci: var(--soft); }
.gx-pips { display: flex; gap: 0.2rem; margin-top: 0.15rem; }
.gx-pips i {
	width: 0.55rem;
	height: 0.4rem;
	border-radius: 0.2rem;
	background: rgba(255, 255, 255, 0.15);
}
.gx-pips i.on { background: var(--cyan); box-shadow: 0 0 0.4rem rgba(63, 216, 255, 0.6); }
.gx-chip--train .gx-pips i.on { background: var(--green); box-shadow: 0 0 0.4rem rgba(75, 227, 138, 0.6); }

/* ============================================================
   PAGE SKELETON
   ============================================================ */
.gx-page {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 var(--pad) calc(var(--gap) + var(--sa-b));
	padding-right: calc(var(--pad) + var(--sa-r));
}

.gx-head {
	flex-shrink: 0;
	height: var(--head-h);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-right: var(--hud-w, 34rem);
	min-width: 0;
}
.gx-back {
	width: 3.75rem;
	height: 3.75rem;
	flex-shrink: 0;
	border-radius: 1.1rem;
	display: grid;
	place-items: center;
	background: var(--panel);
	border: 2px solid var(--line);
	color: var(--gold);
	transition: border-color 0.15s, transform 0.15s;
}
.gx-back:hover { border-color: var(--gold); transform: translateY(-1px); }
.gx-back .gx-i { width: 1.75rem; height: 1.75rem; }
.gx-title {
	font: 700 3.6rem/1 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--gold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex-shrink: 1;
}
.gx-title small {
	display: block;
	font: 600 0.95rem/1.2 var(--f-head);
	letter-spacing: 0.14em;
	color: var(--muted);
	text-shadow: none;
	margin-top: 0.25rem;
}

/* Segmented tabs (header) */
.gx-tabs {
	display: flex;
	flex-shrink: 0;
	background: var(--navy2);
	border-radius: 1.25rem;
	padding: 0.375rem;
	border: 2px solid var(--line);
	gap: 0.25rem;
}
.gx-tabs > a,
.gx-tabs > button,
.gx-tabs > div,
.gx-tabs > span {
	min-width: 9rem;
	padding: 0.7rem 1.4rem;
	border-radius: 0.95rem;
	font: 600 1.35rem/1 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted);
	text-align: center;
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	transition: color 0.15s, background 0.15s;
}
.gx-tabs > *:hover { color: #fff; }
.gx-tabs > .is-active,
.gx-tabs > .active,
.gx-tabs > .selected {
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	color: #3a2400;
	box-shadow: 0 0.25rem 0 var(--gold3);
}
.gx-tabs .gx-badge { box-shadow: none; }
.gx-tabs--sm > a,
.gx-tabs--sm > button,
.gx-tabs--sm > div { min-width: 0; padding: 0.55rem 1rem; font-size: 1.05rem; }

.gx-body {
	flex: 1;
	min-height: 0;
	display: grid;
	gap: var(--gap);
}

/* Grid helpers */
.gx-cols-2   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gx-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-cols-12  { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.gx-cols-21  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.gx-cols-side { grid-template-columns: minmax(0, 1fr) 34rem; }
.gx-cols-sidel { grid-template-columns: 30rem minmax(0, 1fr); }
.gx-stack { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.gx-row   { display: flex; align-items: center; gap: 0.75rem; }
.gx-grow  { flex: 1; min-height: 0; min-width: 0; }
.gx-scroll {
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--line2) transparent;
}
.gx-scroll::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
.gx-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 0.5rem; }
.gx-scroll::-webkit-scrollbar-track { background: transparent; }
.gx-hscroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--line2) transparent;
}

/* ============================================================
   PANELS
   ============================================================ */
.gx-panel {
	position: relative;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	border-radius: var(--r3);
	padding: 1.6rem 1.85rem;
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.38);
}
.gx-panel--gold {
	border: 0.3rem solid var(--gold);
	box-shadow: 0 0 0 0.3rem rgba(168, 106, 0, 0.27), 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
}
.gx-panel--flat { background: var(--navy2); box-shadow: none; }
.gx-panel--glow::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 90%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 122, 42, 0.28), transparent 65%);
	pointer-events: none;
}
.gx-panel--tight { padding: 1.1rem 1.25rem; }
.gx-panel-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.1rem;
	flex-shrink: 0;
	min-width: 0;
}
.gx-panel-title {
	font: 700 1.85rem/1.05 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--gold);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.gx-panel-title--sm { font-size: 1.35rem; }
.gx-panel-kicker {
	font: 600 1.05rem var(--f-head);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.gx-panel-head .gx-tabs { margin-left: auto; }
.gx-panel-head .gx-more {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font: 600 0.95rem var(--f-head);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cyan);
	white-space: nowrap;
}
.gx-panel-head .gx-more .gx-i { width: 1rem; height: 1rem; }

/* ============================================================
   BUTTONS + CONTROLS
   ============================================================ */
.gx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border-radius: 1.1rem;
	font: 700 1.3rem/1 var(--f-head);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	border: none;
	box-shadow: 0 0.35rem 0 var(--gold3), 0 0.75rem 1.75rem rgba(255, 184, 28, 0.25);
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
	text-decoration: none;
}
.gx-btn:hover { filter: brightness(1.06); }
.gx-btn:active { transform: translateY(0.25rem); box-shadow: 0 0.1rem 0 var(--gold3); }
.gx-btn:disabled,
.gx-btn.is-disabled { filter: grayscale(0.9) brightness(0.7); cursor: not-allowed; }
.gx-btn .gx-i { width: 1.35em; height: 1.35em; }
.gx-btn--xl {
	padding: 1.45rem 2rem;
	border-radius: 1.5rem;
	font-size: 2.3rem;
	letter-spacing: 0.08em;
	box-shadow: 0 0.5rem 0 var(--gold3), 0 1.1rem 2.5rem rgba(255, 184, 28, 0.33);
}
.gx-btn--lg { padding: 1.1rem 1.8rem; font-size: 1.6rem; border-radius: 1.25rem; }
.gx-btn--sm { padding: 0.55rem 1rem; font-size: 1rem; border-radius: 0.8rem; box-shadow: 0 0.22rem 0 var(--gold3); }
.gx-btn--block { width: 100%; }
.gx-btn--cyan {
	color: #04263a;
	background: linear-gradient(180deg, #8eeaff, var(--cyan));
	box-shadow: 0 0.35rem 0 #1784a3, 0 0.75rem 1.75rem rgba(63, 216, 255, 0.22);
}
.gx-btn--green {
	color: #062c17;
	background: linear-gradient(180deg, #8ff5b7, var(--green));
	box-shadow: 0 0.35rem 0 #1d8a4c, 0 0.75rem 1.75rem rgba(75, 227, 138, 0.22);
}
.gx-btn--red {
	color: #fff;
	background: linear-gradient(180deg, #ff8b97, var(--red));
	box-shadow: 0 0.35rem 0 #a3202f, 0 0.75rem 1.75rem rgba(255, 90, 106, 0.22);
}
.gx-btn--ghost {
	color: var(--soft);
	background: var(--navy);
	border: 2px solid var(--line);
	box-shadow: none;
}
.gx-btn--ghost:hover { border-color: var(--line2); color: #fff; }
.gx-btn--icon { padding: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; }

/* Segmented option pickers (like mockup tempo selector) */
.gx-seg { display: flex; gap: 0.6rem; }
.gx-seg > * {
	flex: 1;
	text-align: center;
	padding: 0.75rem 0.4rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: 2px solid var(--line);
	font: 600 1.2rem/1 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.gx-seg > *:hover { color: #fff; border-color: var(--line2); }
.gx-seg > .is-on,
.gx-seg > .active,
.gx-seg > .selected {
	border-color: var(--cyan);
	color: #fff;
	background: rgba(63, 216, 255, 0.13);
	box-shadow: 0 0 1.1rem rgba(63, 216, 255, 0.4);
}

/* Inputs */
.gx-input,
body.gx-app .gx-page input[type="text"],
body.gx-app .gx-page input[type="password"],
body.gx-app .gx-page input[type="email"],
body.gx-app .gx-page input[type="number"],
body.gx-app .gx-page select,
body.gx-app .gx-page textarea {
	font: 500 1.1rem var(--f-body);
	color: #fff;
	background: var(--navy);
	border: 2px solid var(--line);
	border-radius: 0.85rem;
	padding: 0.75rem 1rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	max-width: 100%;
}
body.gx-app .gx-page input:focus,
body.gx-app .gx-page select:focus,
body.gx-app .gx-page textarea:focus {
	border-color: var(--cyan);
	box-shadow: 0 0 0 0.2rem rgba(63, 216, 255, 0.2);
}
/* Selects center their text natively; vertical padding clips it inside fixed heights */
body.gx-app .gx-page select { padding-top: 0; padding-bottom: 0; min-height: 3rem; line-height: 1.3; }
body.gx-app .gx-page select option { background: var(--navy2); }
.gx-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font: 600 1.1rem var(--f-body);
	color: var(--soft);
	margin-bottom: 0.6rem;
}
.gx-label b { color: #fff; }

/* Progress bars */
.gx-bar {
	position: relative;
	height: 0.75rem;
	border-radius: 0.5rem;
	background: var(--navy);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.gx-bar > i {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #21b866, var(--green));
	box-shadow: 0 0 0.6rem rgba(75, 227, 138, 0.45);
}
.gx-bar--gold > i { background: linear-gradient(90deg, var(--gold), var(--gold2)); box-shadow: 0 0 0.6rem rgba(255, 184, 28, 0.45); }
.gx-bar--cyan > i { background: linear-gradient(90deg, #17a6d1, var(--cyan)); box-shadow: 0 0 0.6rem rgba(63, 216, 255, 0.45); }
.gx-bar--red > i { background: linear-gradient(90deg, #c92f3f, var(--red)); }
.gx-bar--fat { height: 1.1rem; }
.gx-segbar { display: flex; gap: 0.35rem; }
.gx-segbar i {
	flex: 1;
	height: 0.85rem;
	border-radius: 0.45rem;
	background: rgba(255, 255, 255, 0.1);
}
.gx-segbar i.on { background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0.15rem 0 var(--gold3); }

/* Stat boxes */
.gx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.gx-stat {
	padding: 1rem 1.1rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid var(--line);
	min-width: 0;
}
.gx-stat-lbl { font: 600 0.95rem var(--f-body); color: var(--soft); margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-stat-val { font: 700 2.1rem/1 var(--f-head); color: #fff; white-space: nowrap; }
.gx-stat-val small { font: 700 1rem var(--f-body); color: var(--green); margin-left: 0.35rem; }
.gx-stat-val--gold { color: var(--gold2); }

.gx-big {
	font: 700 6rem/0.9 var(--f-head);
	color: var(--gold2);
}
.gx-big small { font-size: 0.45em; color: var(--soft); text-shadow: none; margin-left: 0.4rem; }

/* Tips / notices */
.gx-tip {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem 1.35rem;
	border-radius: 1.25rem;
	background: rgba(75, 227, 138, 0.09);
	border: 2px solid var(--green);
	color: #d9f8e6;
	font: 600 1.1rem/1.35 var(--f-body);
}
.gx-tip b { color: #fff; }
.gx-tip-ico {
	width: 3.1rem;
	height: 3.1rem;
	flex-shrink: 0;
	border-radius: 0.9rem;
	display: grid;
	place-items: center;
	background: var(--green);
	color: var(--navy);
	font: 700 1.8rem var(--f-head);
}
.gx-tip-ico .gx-i { width: 1.6rem; height: 1.6rem; }
.gx-tip--gold { background: rgba(255, 184, 28, 0.08); border-color: var(--gold); color: #fff1cf; }
.gx-tip--gold .gx-tip-ico { background: var(--gold); }
.gx-tip--cyan { background: rgba(63, 216, 255, 0.08); border-color: var(--cyan); color: #d8f6ff; }
.gx-tip--cyan .gx-tip-ico { background: var(--cyan); }
.gx-tip--red { background: rgba(255, 90, 106, 0.09); border-color: var(--red); color: #ffe0e3; }
.gx-tip--red .gx-tip-ico { background: var(--red); color: #fff; }

/* Pills / position tags */
.gx-pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: 0.15rem 0.55rem;
	border-radius: 0.6rem;
	border: 2px solid var(--gold);
	color: var(--gold);
	font: 700 1rem/1.25 var(--f-head);
	letter-spacing: 0.04em;
	background: var(--navy);
}
.gx-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.7rem;
	border-radius: 2rem;
	font: 600 0.85rem/1.2 var(--f-head);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.08);
	color: var(--soft);
	white-space: nowrap;
}
.gx-pill--gold { background: rgba(255, 184, 28, 0.15); color: var(--gold2); }
.gx-pill--green { background: rgba(75, 227, 138, 0.15); color: var(--green); }
.gx-pill--red { background: rgba(255, 90, 106, 0.15); color: var(--red); }
.gx-pill--cyan { background: rgba(63, 216, 255, 0.15); color: var(--cyan); }
.gx-up { color: var(--green); }
.gx-down { color: var(--red); }
.gx-muted { color: var(--muted); }
.gx-gold { color: var(--gold2); }

/* Initials avatar (fallback when no face) */
.gx-avatar {
	width: 4.75rem;
	height: 4.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	font: 700 1.75rem var(--f-head);
	color: #fff;
	background: var(--c, #5a6aa8);
	border: 0.2rem solid rgba(255, 255, 255, 0.33);
	box-shadow: inset 0 -0.5rem 0 rgba(0, 0, 0, 0.2);
}
/* Faces are portrait (89x125) with the head in the top square: crop to that square */
.gx-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 10%;
}
.gx-avatar--sm { width: 2.75rem; height: 2.75rem; font-size: 1.05rem; border-width: 0.15rem; }
.gx-avatar--md { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }

/* ============================================================
   PLAYER CARD — collectible style (gold frame, face, POS/OVR plate)
   ============================================================ */
.gx-pcard {
	--tier1: #fff0a6;
	--tier2: #f5c518;
	--tier3: #c98a0b;
	--tierText: #2b1d02;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 1.4rem;
	padding: 0.32rem;
	background: linear-gradient(160deg, var(--tier1), var(--tier2) 40%, var(--tier3));
	box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
	color: var(--tierText);
	transition: transform 0.18s, box-shadow 0.18s;
	text-align: center;
	overflow: visible;
}
a.gx-pcard:hover,
.gx-pcard.is-clickable:hover {
	transform: translateY(-0.35rem) rotate(-0.4deg);
	box-shadow: 0 1.4rem 2.4rem rgba(0, 0, 0, 0.5), 0 0 1.6rem rgba(255, 215, 102, 0.35);
}
.gx-pcard--silver { --tier1: #ffffff; --tier2: #c9d3ea; --tier3: #7d8bb0; --tierText: #18213d; }
.gx-pcard--bronze { --tier1: #ffd2a8; --tier2: #d58a4e; --tier3: #8a4a1d; --tierText: #2a1305; }
.gx-pcard--elite  { --tier1: #b9f8ff; --tier2: #6a5cff; --tier3: #c13cff; --tierText: #fff; }
.gx-pcard-in {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 1.15rem;
	overflow: hidden;
	background:
		repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, 0.16) 0 6deg, transparent 6deg 18deg),
		linear-gradient(180deg, var(--tier2), var(--tier3));
}
.gx-pcard-art {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: 0.5rem;
	container-type: size;
}
.gx-pcard-portrait {
	position: relative;
	height: min(100cqh, 105cqw);
	aspect-ratio: 89 / 125;
	display: block;
}
.gx-pcard-face {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 0.4rem 0.4rem rgba(0, 0, 0, 0.3));
}
.gx-pcard-initials {
	position: relative;
	align-self: center;
	font: 700 3.4rem var(--f-head);
	color: #fff;
	margin-bottom: 18%;
}
.gx-pcard-jersey {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 0;
	height: 22%;
	border-radius: 45% 45% 0 0 / 70% 70% 0 0;
	background: linear-gradient(180deg, #2c5fd6, #1d3f9a);
	box-shadow: inset 0 0.25rem 0 rgba(255, 255, 255, 0.25);
}
.gx-pcard-plate {
	position: relative;
	margin: 0 0.45rem 0.45rem;
	padding: 0.4rem 0.4rem 0.45rem;
	border-radius: 0.85rem;
	background: linear-gradient(180deg, #ffffff, #e9edf7);
	color: #0d1630;
	box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.25);
}
.gx-pcard-pos {
	display: inline-block;
	min-width: 3.2rem;
	padding: 0.22rem 0.7rem;
	border-radius: 0.55rem;
	font: 700 1.05rem/1 var(--f-head);
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--pc, #23305e);
	box-shadow: inset 0 -0.15rem 0 rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.gx-pcard-ovr { font: 700 2.5rem/1 var(--f-head); color: #0d1630; }
.gx-pcard-name {
	font: 700 0.95rem/1.15 var(--f-body);
	color: #0d1630;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 0.15rem;
}
.gx-pcard-meta {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	font: 600 0.78rem var(--f-body);
	color: #55628f;
	white-space: nowrap;
}
.gx-pcard-tag {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 2;
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	background: rgba(13, 22, 48, 0.82);
	color: #fff;
	font: 700 0.8rem/1.3 var(--f-head);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.gx-pcard-tag--r { left: auto; right: 0.55rem; }
.gx-pcard-tag--green { background: var(--green); color: #062c17; }
.gx-pcard-tag--red { background: var(--red); }
.gx-pcard-tag--cyan { background: var(--cyan); color: #04263a; }
.gx-pcard-stars { color: #fff; font-size: 0.8rem; letter-spacing: 0.05em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Compact horizontal player card (mockup tactics card) */
.gx-mcard {
	position: relative;
	border-radius: 1.4rem;
	padding: 0.25rem;
	background: linear-gradient(180deg, var(--gold2), #f5a300);
	box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.5);
	min-width: 0;
}
.gx-mcard-in {
	position: relative;
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: center;
	padding: 0.9rem 1rem 0.75rem;
	border-radius: 1.15rem;
	background: linear-gradient(180deg, #1f2d5e, var(--navy2));
}
.gx-mcard-name { font: 700 1.15rem/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-mcard-ovr { font: 700 2.5rem/1.05 var(--f-head); color: var(--gold2); }
.gx-mcard-pos {
	position: absolute;
	top: -1.1rem;
	left: 1.1rem;
	z-index: 2;
	background: var(--navy);
	border: 0.2rem solid var(--gold);
	color: var(--gold);
	font: 700 1.25rem/1.3 var(--f-head);
	padding: 0 0.85rem;
	border-radius: 0.75rem;
}

/* Row list (progress table style from training mockup) */
.gx-list { display: flex; flex-direction: column; gap: 0.6rem; }
.gx-list-head,
.gx-li {
	display: grid;
	align-items: center;
	gap: 1rem;
	grid-template-columns: var(--cols, 4rem minmax(0, 1fr) 5rem 5rem);
}
.gx-list-head {
	padding: 0 1.25rem 0.6rem;
	border-bottom: 2px solid var(--line);
	font: 600 0.95rem var(--f-head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.gx-li {
	padding: 0.8rem 1.25rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid transparent;
	transition: border-color 0.15s, background 0.15s;
	min-width: 0;
}
a.gx-li:hover,
.gx-li.is-clickable:hover { border-color: var(--line2); }
.gx-li.is-me,
.gx-li.is-hl {
	border-color: var(--green);
	background: rgba(75, 227, 138, 0.08);
}
.gx-li.is-gold { border-color: var(--gold); background: rgba(255, 184, 28, 0.07); }
.gx-li-name { font: 700 1.2rem/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-li-sub { font: 500 0.9rem var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-li-num { font: 700 1.65rem/1 var(--f-head); color: var(--gold2); }
.gx-li-num--w { color: #fff; }

/* Generic table (for remaining tabular data) */
.gx-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 0.4rem;
	font: 500 1.05rem var(--f-body);
}
.gx-table th {
	padding: 0 0.9rem 0.35rem;
	font: 600 0.9rem var(--f-head);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	white-space: nowrap;
}
.gx-table td {
	padding: 0.7rem 0.9rem;
	background: var(--navy);
	white-space: nowrap;
}
.gx-table td:first-child { border-radius: 0.9rem 0 0 0.9rem; }
.gx-table td:last-child { border-radius: 0 0.9rem 0.9rem 0; }
.gx-table tr.is-me td { background: rgba(75, 227, 138, 0.1); }
.gx-table .num { text-align: right; font-family: var(--f-head); font-weight: 700; font-size: 1.2rem; }
.gx-table th.num { text-align: right; }

/* Empty state */
.gx-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 2rem;
	text-align: center;
	color: var(--muted);
	font: 600 1.15rem var(--f-body);
}
.gx-empty .gx-i { width: 3.5rem; height: 3.5rem; color: var(--line2); }

/* Court surface reused by several pages */
.gx-court {
	position: relative;
	overflow: hidden;
	border-radius: var(--r3);
	background: repeating-linear-gradient(90deg, #d79a5c 0 2.5rem, #cf9152 2.5rem 5rem);
	border: 0.375rem solid var(--gold);
	box-shadow: inset 0 0 4.4rem rgba(0, 0, 0, 0.45), 0 0 0 0.375rem rgba(168, 106, 0, 0.27), 0 1.25rem 3rem rgba(0, 0, 0, 0.5);
}
.gx-court > svg.gx-court-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Animations */
@keyframes gxPulse {
	0%, 100% { box-shadow: 0 0.5rem 0 var(--gold3), 0 1.1rem 2.5rem rgba(255, 184, 28, 0.33); }
	50% { box-shadow: 0 0.5rem 0 var(--gold3), 0 1.1rem 3.4rem rgba(255, 184, 28, 0.7); }
}
.gx-pulse { animation: gxPulse 2s ease-in-out infinite; }
@keyframes gxRise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.gx-rise > * { animation: gxRise 0.4s ease-out both; }
.gx-rise > *:nth-child(2) { animation-delay: 0.05s; }
.gx-rise > *:nth-child(3) { animation-delay: 0.1s; }
.gx-rise > *:nth-child(4) { animation-delay: 0.15s; }
.gx-rise > *:nth-child(5) { animation-delay: 0.2s; }
.gx-rise > *:nth-child(6) { animation-delay: 0.25s; }

/* Confirm dialog + loading overlay in game style */
body.gx-app .confirm-box {
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	border-radius: var(--r3);
	padding: 2rem;
	font-family: var(--f-body);
	max-width: 32rem;
}
body.gx-app .confirm-box p { font: 600 1.25rem/1.4 var(--f-body); color: #fff; }
body.gx-app .confirm-btn {
	font: 700 1.2rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 1rem;
	padding: 0.8rem 1.6rem;
}
body.gx-app .confirm-btn--ok { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; box-shadow: 0 0.3rem 0 var(--gold3); }
body.gx-app .confirm-btn--cancel { background: var(--navy); color: var(--soft); border: 2px solid var(--line); }

/* JS-built dialogs (#dialogCustom: staff contract extension, supporter notice, Ajax/showDialog) */
#dialogCustom {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(32rem, calc(100% - 2rem));
	max-height: calc(100 * var(--vh, 1vh) - 2rem);
	overflow-y: auto;
	padding: 2rem;
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	border-radius: var(--r3);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
	color: #fff;
	z-index: 1000;
}
#dialogCustom .header { font: 700 1.6rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
#dialogCustom .dialog-body { display: grid; gap: 1.25rem; }
#dialogCustom .text { font: 600 1.15rem/1.45 var(--f-body); color: var(--soft); }
#dialogCustom #message, #dialogCustom #errorMessage {
	width: 100%;
	padding: 0.7rem 1rem;
	border-radius: 0.75rem;
	background: rgba(255, 107, 107, 0.15);
	border: 1px solid rgba(255, 107, 107, 0.3);
	color: #ffb6b6;
}
#dialogButtonWrapper { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
#dialogButtonWrapper button {
	font: 700 1.2rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 1rem;
	padding: 0.8rem 1.6rem;
	cursor: pointer;
	background: var(--navy);
	color: var(--soft);
	border: 2px solid var(--line);
}
#dialogButtonWrapper button:first-of-type {
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	color: #3a2400;
	border-color: transparent;
	box-shadow: 0 0.3rem 0 var(--gold3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Shorter landscape screens: slimmer chrome */
@media (max-height: 820px) and (orientation: landscape), (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
	:root { --head-h: 5.75rem; }
	.gx-rail a, .gx-rail button { padding: 0.45rem 0 0.4rem; }
}

/* Phones in landscape: hide rail labels, keep everything on one screen */
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	:root { --rail-w: calc(max(4.75rem, 56px) + var(--sa-l)); --pad: 1.25rem; --gap: 1rem; }
	.gx-rail { padding-top: max(1rem, 12px); padding-bottom: calc(max(1rem, 12px) + var(--sa-b)); }
	.gx-rail a span, .gx-rail button span { display: none; }
	/* 1rem is only ~7px on a phone, so the rail gets pixel floors; the buttons share the rail height */
	.gx-rail a, .gx-rail button { width: max(3.75rem, 46px); flex: 1 1 0; min-height: 0; max-height: 54px; padding: 0; }
	.gx-rail a .gx-i, .gx-rail button .gx-i { width: max(1.75rem, 24px); height: max(1.75rem, 24px); }
	.gx-chip-sub { display: none; }
}



/* ============================================================
   PAGE: HOME / NEWSCENTER (game.php)
   ============================================================ */
.gx-home-grid {
	grid-template-columns: minmax(0, 1fr) 30rem 32rem;
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "im radar side";
}
.gx-home-im    { grid-area: im; }
.gx-home-radar { grid-area: radar; }
.gx-home-side  { grid-area: side; }

/* Instant match hero: energy + start button on top, ranking + last matches below */
.gx-home-im {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	overflow: hidden;
}
.gx-im-main {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: center;
	gap: 0.9rem 1.5rem;
	min-width: 0;
}
.gx-im-main > * { grid-column: 1 / -1; }
.gx-im-main > .gx-im-energy { grid-column: 1; }
.gx-im-main > .instant-match-bar { grid-column: 2; }
.gx-im-energy {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.gx-im-energy > .gx-i { width: 2.4rem; height: 2.4rem; color: var(--cyan); filter: drop-shadow(0 0 0.5rem rgba(63, 216, 255, 0.6)); }
.gx-im-energy-val { font: 700 3.6rem/0.9 var(--f-head); color: #fff; }
.gx-im-energy-val small { font-size: 0.5em; color: var(--muted); }
.gx-im-energy .gx-segbar { flex: 1; }
.gx-segbar--cyan i.on { background: linear-gradient(180deg, #8eeaff, var(--cyan)); box-shadow: 0 0.15rem 0 #1784a3, 0 0 0.6rem rgba(63, 216, 255, 0.45); }
.gx-home-im .instant-match-bar {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
.gx-home-im .instant-match-bar[style*="none"] { display: none !important; }
.gx-home-im #instantMatchStartButton {
	font-size: clamp(1.4rem, 2.2 * var(--vw), 2.3rem);
	padding: 1.35rem 1.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gx-home-im #instantMatchStartButton[style*="none"] { display: none !important; }
.gx-im-wait {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	border-radius: 1.25rem;
	background: var(--navy);
	border: 2px solid var(--line);
	font: 600 1.15rem var(--f-body);
	color: var(--soft);
}
.gx-im-wait strong { font: 700 2.4rem/1 var(--f-head); color: var(--cyan); }
.gx-im-running {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 1.2rem 1.4rem;
	border-radius: 1.25rem;
	background: rgba(255, 184, 28, 0.1);
	border: 2px solid var(--gold);
	animation: gxPulse 2s ease-in-out infinite;
}
.gx-im-running-lbl { display: flex; align-items: center; gap: 0.6rem; font: 700 1.6rem var(--f-head); text-transform: uppercase; color: var(--gold2); }
.gx-im-draw {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	background: rgba(63, 216, 255, 0.08);
	border: 2px solid rgba(63, 216, 255, 0.35);
	font: 600 1.05rem var(--f-body);
	color: var(--soft);
}
.gx-im-draw .gx-i { color: var(--cyan); }
.gx-im-draw strong { margin-left: auto; font: 700 1.6rem var(--f-head); color: #fff; letter-spacing: 0.04em; }
.gx-im-side {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}
.gx-im-side .im-panel {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0.9rem 1rem;
	border-radius: 1.1rem;
	background: rgba(13, 22, 48, 0.75);
	border: 2px solid var(--line);
}
.gx-im-side .im-panel-title {
	font: 600 1.15rem var(--f-head);
	letter-spacing: 0.14em;
	color: var(--muted);
	margin-bottom: 0.5rem;
}
.gx-im-side .im-rank-row {
	padding: 0.5rem 0.7rem;
	border-radius: 0.7rem;
	font: 600 1.45rem var(--f-body);
	gap: 0.6rem;
}
.gx-im-side .im-rank-row--me { background: rgba(255, 184, 28, 0.15); color: var(--gold2); }
.gx-im-side .im-rank-pos { flex: 0 0 4.5rem; font-family: var(--f-head); font-size: 1.6rem; }
.gx-im-side .im-rank-wins { font-family: var(--f-head); }
.gx-im-side .im-last-table { width: 100%; font: 500 1.4rem var(--f-body); }
.gx-im-side .im-last-table th { font: 600 0.95rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gx-im-side .im-last-table td { padding: 0.4rem 0.3rem; border-top: 1px solid var(--line); }
.gx-im-side .im-last-opp { max-width: 24rem; }
.gx-im-side .im-last-result { font-family: var(--f-head); font-size: 1.5rem; }
.gx-im-side .im-last-result.is-win { color: var(--green); }
.gx-im-side .im-last-result.is-loss { color: var(--red); }
.gx-im-side:not(:has(.im-panel))::before {
	content: "";
	flex: 1;
	border-radius: 1.1rem;
	background: url("../images/gx-icons.svg#ball") center / 40% no-repeat;
}

/* Team strength radar */
.gx-home-radar .gx-panel-head { margin-bottom: 0.25rem; }
.gx-home-ovr { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.gx-home-ovr b { font: 700 2.6rem/0.95 var(--f-head); color: var(--gold2); }
.gx-home-ovr span { font: 600 0.9rem var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gx-radar-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.gx-radar { width: 100%; height: 100%; overflow: visible; }
.gx-radar-ring { fill: rgba(255, 255, 255, 0.025); stroke: rgba(139, 152, 201, 0.25); stroke-width: 1; }
.gx-radar-axis { stroke: rgba(139, 152, 201, 0.2); stroke-width: 1; }
.gx-radar-shape { fill: rgba(63, 216, 255, 0.28); stroke: var(--cyan); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(63, 216, 255, 0.5)); }
.gx-radar-dot { fill: #fff; stroke: var(--cyan); stroke-width: 2; }
.gx-radar-lbl { font: 600 15px var(--f-body); fill: var(--soft); }
.gx-radar-val { font: 700 17px var(--f-head); fill: var(--gold2); }

/* Side: tasks + chat */
.gx-home-side > .gx-panel { flex: 1 1 0; min-height: 0; }
.gx-home-tasks { max-height: 60%; flex: 0 1 auto !important; }
.gx-home-side:has(.gx-home-chat[style*="none"]) .gx-home-tasks { max-height: none; flex: 1 1 0 !important; }
.gx-home-chat { position: relative; }
.gx-home-side .gx-panel { padding: 1.25rem 1.35rem; }
.gx-home-side .gx-panel-head { margin-bottom: 0.9rem; }
.gx-home-side .gx-panel-head > .gx-i { width: 1.6rem; height: 1.6rem; }
.gx-home-side .game-tab-badge {
	min-width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.8rem;
	background: var(--red);
	color: #fff;
	font: 700 0.95rem/1.6rem var(--f-body);
	text-align: center;
	padding: 0 0.4rem;
}
.gx-tasks { display: flex; flex-direction: column; gap: 0.75rem; }
.gx-home .onboarding-quests {
	max-height: none;
	padding: 0;
	gap: 0.75rem;
	border: none;
	background: none;
	overflow: visible;
}
.gx-home .onboarding-group { display: flex; flex-direction: column; gap: 0.75rem; }
.gx-home .onboarding-quest {
	gap: 0.8rem;
	padding: 1rem 1.1rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid var(--line);
	color: #fff;
	font: 600 1.05rem/1.3 var(--f-body);
}
.gx-home .onboarding-quest:hover { border-color: var(--line2); background: var(--navy); }
.gx-home .onboarding-quest--featured {
	border-color: var(--gold);
	background: rgba(255, 184, 28, 0.09);
	box-shadow: 0 0 1.25rem rgba(255, 184, 28, 0.2);
}
.gx-home .onboarding-quest--done { opacity: 0.6; }
.gx-home .oq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.gx-home .oq-step-reward {
	font: 700 0.85rem var(--f-head);
	letter-spacing: 0.04em;
	padding: 0.25rem 0.6rem;
	background: rgba(75, 227, 138, 0.15);
	border-color: rgba(75, 227, 138, 0.5);
	color: var(--green);
	opacity: 1;
}
.gx-home .oq-cta {
	padding: 0.4rem 0.9rem;
	border-radius: 0.7rem;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	color: #3a2400;
	box-shadow: 0 0.2rem 0 var(--gold3);
	font: 700 0.95rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.gx-home .onboarding-quest-reward {
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	border-radius: 1.1rem;
	border: 2px solid rgba(255, 184, 28, 0.5);
	background: linear-gradient(135deg, rgba(255, 184, 28, 0.14), rgba(255, 184, 28, 0.04));
	color: var(--gold2);
	font-family: var(--f-body);
}
.gx-home .onboarding-quest-reward .oq-reward-icon { width: 2.2rem; height: 2.2rem; color: var(--gold); }
.gx-home .onboarding-quest-reward .oq-reward-title { font: 700 1.1rem/1.25 var(--f-body); }
.gx-home .onboarding-quest-reward .oq-reward-sub { font-size: 0.9rem; }
.gx-home .onboarding-quest-reward .oq-reward-progress { height: 0.5rem; border-radius: 0.3rem; margin-top: 0.5rem; }
.gx-home .onboarding-quest-reward--claimable { border-color: var(--gold); animation: gxPulse 2s ease-in-out infinite; }
.gx-home .im-quest-progress { font: 700 1.2rem var(--f-head); color: var(--gold2); }
.gx-home .im-quest-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; font-size: 0.8rem; color: var(--muted); }
.gx-home .new-manager-prompt {
	margin: 0;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	border-radius: 1.1rem;
	border: 2px solid var(--gold);
	background: rgba(255, 184, 28, 0.08);
}
.gx-home .new-manager-prompt--match { border-color: var(--cyan); background: rgba(63, 216, 255, 0.08); }
.gx-home .new-manager-prompt--training { border-color: var(--green); background: rgba(75, 227, 138, 0.08); }
.gx-home .new-manager-prompt-text { font: 600 1.05rem/1.35 var(--f-body); }
.gx-home .new-manager-prompt-cta {
	padding: 0.55rem 0.9rem;
	border-radius: 0.8rem;
	font: 700 0.95rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.3);
}
.gx-home .new-manager-prompt--training .new-manager-prompt-cta { background: var(--green); color: #062c17; }
/* Assistant tip: best affordable upgrades for the weakest starting position */
.gx-home .first-transfer-rec { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 1.1rem; border-radius: 1.1rem; border: 2px solid var(--gold); background: rgba(255, 184, 28, 0.08); }
.gx-home .ftr-head { display: flex; align-items: flex-start; gap: 0.8rem; }
.gx-home .ftr-ico { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: grid; place-items: center; background: var(--gold); color: #3a2400; box-shadow: inset 0 -0.2rem 0 rgba(0, 0, 0, 0.2); }
.gx-home .ftr-ico .gx-i { width: 1.5rem; height: 1.5rem; }
.gx-home .ftr-head-text { min-width: 0; }
.gx-home .ftr-title { font: 700 1.15rem/1.3 var(--f-head); letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold2); }
.gx-home .ftr-title .ct-bench-pos { margin: 0 0.15em; vertical-align: 0.1em; }
.gx-home .ftr-text { margin-top: 0.2rem; font: 500 0.95rem/1.4 var(--f-body); color: var(--soft); }
.gx-home .ftr-offers { gap: 0.45rem; }
.gx-home .ftr-offer { grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 0.8rem; padding: 0.5rem 0.6rem 0.5rem 0.9rem; border-radius: 0.8rem; background: var(--navy); border: 2px solid var(--line); color: #fff; transition: border-color 0.15s; }
.gx-home .ftr-offer:hover { border-color: var(--gold); }
.gx-home .ftr-offer-name { font: 600 1rem var(--f-body); }
.gx-home .ftr-offer-rating { display: inline-flex; align-items: center; gap: 0.4rem; font: 700 1.15rem/1 var(--f-head); }
.gx-home .ftr-offer-gain { padding: 0.15rem 0.45rem; border-radius: 0.45rem; background: rgba(75, 227, 138, 0.15); color: var(--green); font: 700 0.95rem/1.1 var(--f-head); }
.gx-home .ftr-offer-price { min-width: 6.5rem; text-align: right; font: 700 1.15rem/1 var(--f-head); color: var(--gold2); }
.gx-home .ftr-offer-go { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.gx-home .ftr-rec-market-cta { align-self: flex-end; gap: 0.4rem; padding: 0.55rem 0.9rem 0.55rem 1.1rem; border-radius: 0.8rem; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; font: 700 0.95rem var(--f-head); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 0.2rem 0 var(--gold3); }
.gx-home .ftr-rec-market-cta .gx-i { width: 1rem; height: 1rem; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-home .first-transfer-rec { gap: 7px; padding: 9px 10px; }
	.gx-home .ftr-ico { width: 26px; height: 26px; border-radius: 8px; }
	.gx-home .ftr-ico .gx-i { width: 15px; height: 15px; }
	.gx-home .ftr-title { font-size: 13.5px; }
	.gx-home .ftr-title .ct-bench-pos, .gx-home .ftr-offer .ct-bench-pos { font-size: 10.5px; }
	.gx-home .ftr-text { font-size: 12px; }
	.gx-home .ftr-offers { gap: 5px; }
	/* Narrow column: the name gets its own line above rating, gain and price */
	.gx-home .ftr-offer { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 3px 8px; padding: 5px 6px 6px 9px; border-radius: 8px; }
	.gx-home .ftr-offer-name { grid-column: 1 / -1; font-size: 12.5px; }
	.gx-home .ftr-offer-rating, .gx-home .ftr-offer-price { font-size: 13.5px; }
	.gx-home .ftr-offer-price { min-width: 0; }
	.gx-home .ftr-offer-gain { font-size: 11.5px; }
	.gx-home .ftr-offer-go { width: 12px; height: 12px; }
	.gx-home .ftr-rec-market-cta { min-height: 30px; padding: 5px 10px 5px 12px; font-size: 12px; }
	.gx-home .new-manager-prompt-text { font-size: 12px; }
	.gx-home .new-manager-prompt-cta { font-size: 12px; padding: 6px 10px; }
}

/* Chat */
.gx-online-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	border-radius: 0.8rem;
	background: var(--navy);
	border: 2px solid var(--line);
	color: #fff;
	font: 700 1rem var(--f-head);
	cursor: pointer;
}
.gx-online-btn .online-dot,
.gx-home .user-count-bar .online-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0.5rem var(--green);
}
.gx-home .news-col { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.gx-home .chat-input-bar {
	gap: 0.5rem;
	padding: 0 0 0.9rem;
	background: none;
	border-bottom: 2px solid var(--line);
}
.gx-home .chat-input,
.gx-home .chat-lang-select {
	height: 3.1rem;
	min-height: 0;
	border-radius: 0.85rem;
	border: 2px solid var(--line) !important;
	background: var(--navy) !important;
	font-size: 1.2rem !important;
	padding: 0 0.85rem !important;
}
.gx-home .chat-lang-select { width: 5.2rem; padding: 0 0.3rem !important; color: var(--soft); }
.gx-home .news-feed { padding: 0.75rem 0 0; gap: 0.5rem; }
.gx-home .news-feed .message-item,
.gx-home .message-item {
	padding: 0.65rem 0.85rem;
	border-radius: 0.9rem;
	background: rgba(13, 22, 48, 0.6);
	border: none;
	margin: 0;
}
.gx-home .message-meta { gap: 0.5rem; margin-bottom: 0.2rem; }
.gx-home .message-meta a { order: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.15rem var(--f-body); color: var(--cyan); }
.gx-home .message-meta .sep { display: none; }
.gx-home .message-meta .time { order: 2; margin-left: auto; flex-shrink: 0; font: 500 0.95rem var(--f-body); color: var(--muted); }
.gx-home .message-body { font: 400 1.2rem/1.4 var(--f-body); color: #dfe4fb; }
.gx-home .shoutbox-more { font-size: 1rem; color: var(--muted); padding: 0.5rem 0; }
.gx-home .shoutbox-more a { color: var(--cyan); margin-left: 0.4rem; }
.gx-home .users-col {
	inset: 4.5rem 1rem 1rem 1rem;
	width: auto;
	max-height: none;
	padding: 1rem;
	border-radius: 1.1rem;
	background: var(--navy2);
	border: 2px solid var(--line2);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
	gap: 0.6rem;
}
.gx-home .col-section-title { font: 600 1rem var(--f-head); letter-spacing: 0.12em; }
.gx-home .online-player-item { padding: 0.35rem 0; font: 600 1.2rem var(--f-body); }
.gx-home .user-count-bar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.gx-home .users-col-close { font-size: 1.6rem; top: 0.6rem; right: 0.8rem; }

/* ============================================================
   PAGE: TEAM (team.php)
   ============================================================ */
.gx-club { gap: 1.1rem; overflow: hidden; }
.gx-club-top { display: flex; align-items: center; gap: 1rem; }
.gx-club-crest {
	width: 4.5rem;
	height: 4.5rem;
	flex-shrink: 0;
	border-radius: 1.2rem;
	display: grid;
	place-items: center;
	color: #fff3e0;
	background: radial-gradient(circle at 35% 30%, #ffa04a, #e2601a 60%, #a83c08);
	box-shadow: 0 0.3rem 0 #7a2b05, 0 0.6rem 1.4rem rgba(255, 122, 42, 0.3);
}
.gx-club-crest .gx-i { width: 2.7rem; height: 2.7rem; }
.gx-club-id { min-width: 0; }
.gx-club-name { font: 700 1.6rem/1.1 var(--f-head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-club-status { font: 600 0.95rem var(--f-body); color: var(--muted); margin-top: 0.2rem; }
.gx-club-status .mt-online { color: var(--green); }
.gx-club-status .mt-online::before { content: "● "; }
.gx-club-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.gx-club-fact {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.6rem;
	align-items: center;
	padding: 0.7rem 0.9rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid var(--line);
	min-width: 0;
}
.gx-club-fact[style*="none"] { display: none !important; }
.gx-club-fact:hover { border-color: var(--line2); }
.gx-club-fact .gx-i { grid-row: 1 / 3; width: 1.8rem; height: 1.8rem; color: var(--gold); }
.gx-club-fact span { font: 600 0.75rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gx-club-fact b { font: 700 1.25rem/1.1 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-club-rating {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 1rem 1.1rem;
	border-radius: 1.25rem;
	background: rgba(13, 22, 48, 0.55);
	border: 2px solid var(--line);
}
.gx-club-rating .gx-radar-wrap { flex: 1; min-height: 8rem; }
.gx-club-five {
	padding: 0.9rem 1.1rem 1rem;
	border-radius: 1.25rem;
	background: rgba(13, 22, 48, 0.55);
	border: 2px solid var(--line);
}
.gx-club-five[style*="none"] { display: none !important; }
.gx-five-minis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
/* Mini player card (club card starting five): roster card scaled down, POS + OVR on one line */
.gx-pcard--mini { aspect-ratio: 0.7; border-radius: 0.8rem; padding: 0.16rem; box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.gx-pcard--mini .gx-pcard-in { border-radius: 0.65rem; }
.gx-pcard--mini .gx-pcard-art { padding-top: 0.2rem; }
/* Mini cards crop the portrait closer to the head so the small face gets more pixels */
.gx-pcard--mini .gx-pcard-portrait { aspect-ratio: 89 / 100; }
.gx-pcard--mini .gx-pcard-face { object-fit: cover; object-position: center top; }
.gx-pcard--mini .gx-pcard-initials { font-size: 1.6rem; }
.gx-pcard--mini .gx-pcard-plate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.25rem; margin: 0 0.18rem 0.18rem; padding: 0.15rem 0.1rem 0.2rem; border-radius: 0.45rem; }
.gx-pcard--mini .gx-pcard-pos { min-width: 0; padding: 0.1rem 0.3rem; border-radius: 0.3rem; font-size: 0.68rem; }
.gx-pcard--mini .gx-pcard-ovr { font-size: 1.2rem; }
.gx-pcard--mini .gx-pcard-name { flex-basis: 100%; margin: 0; font-size: 0.68rem; }
.gx-club-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.gx-club-actions .gx-btn { overflow: hidden; text-overflow: ellipsis; }
.gx-club-actions .gx-btn[style*="none"] { display: none !important; }
.gx-club-actions .gx-club-scout { grid-column: 1 / -1; }
.gx-scout-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }

.gx-team-main .gx-panel-head { margin-bottom: 1.25rem; }
.gx-team-main .gx-tabs { margin-left: 0; flex-wrap: wrap; }
.gx-team-main .gx-tabs > a[style*="none"] { display: none !important; }
/* Phones: these tabs live in the side strip (data-m-subtabs) */
.gx-body.has-mtabs > .gx-team-main > .gx-panel-head { display: none; }
.gx-team-main .mt-panel[style*="none"] { display: none !important; }

.gx-roster {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 1.4rem 1.1rem;
	padding: 0.3rem 0.3rem 1rem;
}
.gx-roster .gx-pcard { aspect-ratio: 0.7; }
.gx-pcard-tag .flag { display: inline-block; vertical-align: -0.15rem; transform: scale(1.1); }
/* Flag straight on the card art, like the transfer market card */
.gx-pcard-tag:has(> .flag:only-child) { top: 0.6rem; left: 0.6rem; padding: 0; background: none; line-height: 0; }
.gx-pcard-tag > .flag:only-child { vertical-align: top; transform: scale(0.9); transform-origin: left top; }

/* Results */
.gx-results, .gx-transfers, .gx-history { display: flex !important; flex-direction: column; gap: 0.55rem; }
.gx-results[style*="none"], .gx-transfers[style*="none"], .gx-history[style*="none"], .gx-pstats[style*="none"] { display: none !important; }
.gx-team .mt-result-row,
.gx-team .mt-transfer-row,
.gx-team .mt-trophy-row {
	padding: 0.85rem 1.2rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid transparent;
	gap: 1.25rem;
	margin: 0;
}
.gx-team .mt-result-row:hover,
.gx-team .mt-trophy-row:hover { border-color: var(--line2); background: var(--navy); }
.gx-team .mt-result-type { min-width: 8rem; }
.gx-team .mt-result-badge { font: 600 0.85rem var(--f-head); letter-spacing: 0.08em; padding: 0.25rem 0.65rem; border-radius: 0.5rem; }
.gx-team .mt-result-badge--playoff { background: rgba(255, 184, 28, 0.15); color: var(--gold2); }
.gx-team .mt-result-teams { gap: 1.25rem; }
.gx-team .mt-result-team { font: 600 1.1rem var(--f-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-team .mt-result-team:first-child { text-align: right; }
.gx-team .mt-result-team--own { color: var(--gold2); font-weight: 700; }
.gx-team .mt-result-score {
	flex-shrink: 0;
	min-width: 7rem;
	text-align: center;
	padding: 0.35rem 0.9rem;
	border-radius: 0.75rem;
	background: var(--navy2);
	border: 2px solid var(--line);
	font: 700 1.5rem/1 var(--f-head);
	letter-spacing: 0.04em;
}
.gx-team .mt-result-date { font: 500 0.9rem var(--f-body); color: var(--muted); white-space: nowrap; }
.gx-team .mt-transfer-name { font: 700 1.15rem var(--f-body); }
.gx-team .mt-transfer-direction { font: 600 0.85rem var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 0.5rem; }
.gx-team .mt-transfer-other { font-size: 1rem; }
.gx-team .mt-transfer-price { font: 700 1.3rem var(--f-head); color: var(--gold2); }
.gx-team .mt-transfer-date { font-size: 0.85rem; color: var(--muted); margin-left: 0.6rem; }
/* Incoming (bought) green, outgoing (sold) red */
.gx-team .mt-transfer-row { --dir: var(--muted); --dir-bg: rgba(255, 255, 255, 0.06); border-left: 0.35rem solid var(--dir); }
.gx-team .mt-transfer-row.mt-transfer--buy { --dir: var(--green); --dir-bg: rgba(75, 227, 138, 0.15); }
.gx-team .mt-transfer-row.mt-transfer--sell { --dir: var(--red); --dir-bg: rgba(255, 90, 106, 0.15); }
.gx-team .mt-transfer-dir-ico {
	flex-shrink: 0;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--dir-bg);
	color: var(--dir);
}
.gx-team .mt-transfer-dir-ico .gx-i { width: 1.4rem; height: 1.4rem; }
.gx-team .mt-transfer-row .mt-transfer-direction { background: var(--dir-bg); color: var(--dir); }
.gx-team .mt-trophy-row { border-left: 0.35rem solid var(--gold); }
.gx-team .mt-trophy-row--silver { border-left-color: #c9d3ea; }
.gx-team .mt-trophy-icon svg { width: 2.2rem; height: 2.2rem; }
.gx-team .mt-trophy-title { font: 700 1.15rem var(--f-body); }
.gx-team .mt-trophy-sub, .gx-team .mt-trophy-season { font-size: 0.9rem; }
.gx-team .mt-trophy-section-head { font: 600 1rem var(--f-head); letter-spacing: 0.14em; color: var(--muted); padding: 0.75rem 0 0.25rem; }
.gx-team .mt-empty { padding: 4rem 1rem; font: 600 1.15rem var(--f-body); }

/* Player stats table */
.gx-team .mt-stat-scroll { overflow: visible; }
.gx-team .mt-stat-row {
	grid-template-columns: minmax(12rem, 2.2fr) repeat(7, minmax(3.5rem, 1fr)) repeat(2, minmax(7rem, 1.4fr));
	min-width: 0;
	gap: 0.4rem;
	padding: 0.7rem 1.1rem;
	margin-bottom: 0.45rem;
	border-radius: 0.9rem;
	border: none;
	background: var(--navy);
	font: 600 1.05rem var(--f-body);
}
.gx-team .mt-stat-row--head {
	background: none;
	font: 600 0.9rem var(--f-head);
	letter-spacing: 0.1em;
	color: var(--muted);
	border-bottom: 2px solid var(--line);
	border-radius: 0;
}
.gx-team .mt-stat-cell--hl { color: var(--gold2); font-family: var(--f-head); font-size: 1.2rem; }
.gx-team .mt-stat-cell--fg { font-size: 0.95rem; }
.gx-team .mt-stat-name { font-weight: 700; }

/* Supporter analytics */
.gx-team .mt-team-premium { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; }
.gx-team .mt-team-premium[style*="none"] { display: none; }
.gx-team .mt-pie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gx-team .mt-pie-card,
.gx-team .trating-card {
	margin: 0;
	padding: 1.1rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid var(--line);
}
.gx-team .mt-pie-title, .gx-team .trating-head { font: 600 0.95rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.gx-team .mt-pie { width: 7rem; height: 7rem; }
.gx-team .trating-row { font-size: 1rem; padding: 0.35rem 0; }
.gx-team .trating-fill { background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.gx-club-actions[style*="none"] { display: none !important; }
.gx-empty .gx-i { display: block; margin: 0 auto; }

/* ============================================================
   PAGE: PLAYER PROFILE (player.php)
   ============================================================ */
.gx-title small a { color: var(--cyan); }
.gx-player-grid {
	grid-template-columns: 24rem minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1.55fr) minmax(0, 1fr);
	grid-template-areas:
		"hero skills info"
		"hero stats  stats";
}
.gx-player-hero   { grid-area: hero; }
.gx-player-skills { grid-area: skills; }
.gx-player-info   { grid-area: info; }
.gx-player-stats  { grid-area: stats; }
.gx-hero-card { flex: 1; min-height: 0; display: flex; justify-content: center; }
.gx-pcard--hero { width: 100%; max-height: 100%; aspect-ratio: 0.7; }
.gx-pcard--hero .gx-pcard-ovr { font-size: 4.2rem; }
.gx-pcard--hero .gx-pcard-pos { font-size: 1.5rem; }
/* Smaller face, more room for name / age / height / potential */
.gx-pcard--hero .gx-pcard-portrait { height: min(82cqh, 72cqw); }
.gx-pcard--hero .gx-pcard-plate { padding: 0.6rem 0.7rem 0.75rem; }
.gx-pcard--hero .gx-pcard-name { font: 700 1.9rem/1.1 var(--f-head); letter-spacing: 0.02em; margin-top: 0.3rem; }
.gx-pcard--hero .gx-pcard-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.6rem; white-space: normal; }
.gx-pcard--hero .gx-pcard-meta > span { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.35rem 0.2rem 0.4rem; border-radius: 0.7rem; background: #dfe5f3; min-width: 0; }
.gx-pcard--hero .gx-pcard-meta small { font: 600 0.72rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: #55628f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gx-pcard--hero .gx-pcard-meta b { font: 700 1.7rem/1 var(--f-head); color: #0d1630; }
.gx-pcard--hero .gx-pcard-meta b i { font-style: normal; font-size: 0.55em; margin-left: 0.1rem; color: #55628f; }
.gx-pcard--hero .gx-hero-pot { color: #c98a0b; }
.gx-pcard--hero .gx-hero-pot--high { color: #0f9bc0; }
.gx-pcard--hero .gx-pcard-tag { font-size: 1.05rem; top: 0.9rem; left: 0.9rem; }
.gx-pcard--hero .gx-pcard-tag--r { left: auto; right: 0.9rem; }
.gx-pcard--hero:hover { transform: none; }
.gx-player-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.gx-player-actions > * { flex: 1; }
.gx-player-actions [style*="none"] { display: none !important; }

.gx-skills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem 1.75rem;
	align-content: start;
}
.gx-skills[style*="none"] { display: none; }
.gx-skill {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	row-gap: 0.3rem;
	min-width: 0;
}
.gx-skill-name { font: 600 1rem var(--f-body); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-skill-val { font: 700 1.3rem/1 var(--f-head); color: #fff; }
.gx-skill .gx-bar { grid-column: 1 / -1; height: 0.6rem; }
.gx-posbars-title { margin: auto 0 0.6rem; padding-top: 1rem; }
.gx-posbars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; height: 6.75rem; flex-shrink: 0; }
.gx-posbar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	padding: 0.5rem 0;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid var(--line);
	overflow: hidden;
}
.gx-posbar-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(63, 216, 255, 0.35), rgba(63, 216, 255, 0.05));
}
.gx-posbar b, .gx-posbar .gx-pos { position: relative; }
.gx-posbar b { font: 700 1.7rem/1 var(--f-head); }
.gx-posbar.is-best { border-color: var(--gold); box-shadow: 0 0 1rem rgba(255, 184, 28, 0.25); }
.gx-posbar.is-best .gx-posbar-fill { background: linear-gradient(180deg, rgba(255, 184, 28, 0.45), rgba(255, 184, 28, 0.06)); }
.gx-posbar.is-best b { color: var(--gold2); }

.gx-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.gx-stat-val--sm { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-stat .gx-bar { margin-top: 0.5rem; height: 0.45rem; }
.gx-stat--stars { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.gx-stat--stars .gx-stat-lbl { margin: 0; }
.gx-stars { font-size: 1.6rem; letter-spacing: 0.08em; }

.gx-player .pls-table { display: flex; flex-direction: column; gap: 0.4rem; }
.gx-player .pls-table[style*="none"] { display: none; }
.gx-player .pls-row {
	display: grid;
	grid-template-columns: minmax(12rem, 2.4fr) 6rem repeat(10, minmax(3rem, 1fr));
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: none;
	font: 600 1rem var(--f-body);
	color: #fff;
}
.gx-player a.pls-row:hover { background: var(--navy2); }
.gx-player .pls-row--head { background: none; font: 600 0.85rem var(--f-head); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; border-bottom: 2px solid var(--line); border-radius: 0; }
.gx-player .pls-row--total, .gx-player .pls-row--avg { background: rgba(255, 184, 28, 0.08); color: var(--gold2); font-family: var(--f-head); font-size: 1.1rem; }
.gx-player .pls-cell { text-align: center; }
.gx-player .pls-cell--opp { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gx-stat-lbl::first-letter,
.gx-label > span::first-letter,
.gx-skill-name::first-letter,
.gx-li-sub::first-letter { text-transform: uppercase; }

/* ============================================================
   PHONE LANDSCAPE: panels collapse into header tabs (gx-mtabs)
   Panels carry data-m="<group>" and data-m-label; the script in
   index.tpl builds the tab bar. On large screens nothing changes.
   ============================================================ */
.gx-mtabs { display: none; }
/* Tabs moved into the strip by data-m-subtabs */
.gx-page.has-mtabs .gx-mtabs-src { display: none !important; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	html { font-size: clamp(8px, min(1.2vw, 2.55vh), 13px); }
	:root { --head-h: 4.6rem; }
	.gx-head { padding-right: 0; gap: 0.9rem; }
	.gx-title { font-size: 2.4rem; }
	.gx-title small { display: none; }
	.gx-back { width: 3rem; height: 3rem; }
	.gx-hud { height: auto; padding: 0; gap: 0.4rem; margin-left: auto; }
	.gx-chip { height: 2.7rem; padding: 0 0.7rem 0 0.3rem; gap: 0.4rem; }
	.gx-chip-ico { width: 2rem; height: 2rem; }
	.gx-chip-val { font-size: 1.2rem; }
	.gx-pips, .gx-chip-sub, .gx-chip--discord { display: none; }
	/* Time chip shrinks to season/week only */
	.gx-chip--time { padding: 0 0.7rem; }
	.gx-chip--time .gx-chip-ico, .gx-chip--time .gx-chip-val { display: none; }
	.gx-chip--time .gx-chip-sub { display: block; font-size: 0.9rem; color: var(--soft); }
	.gx-chip--icon { width: 2.7rem; padding: 0; }
	body.gx-user .gx-hud { position: fixed; top: 0.95rem; right: calc(var(--pad) + var(--sa-r)); }
	body.gx-user .gx-head { padding-right: calc(var(--hud-w, 24rem) + var(--sa-r)); }

	.gx-mtabs {
		display: flex;
		gap: 0.25rem;
		padding: 0.3rem;
		border-radius: 1rem;
		background: var(--navy2);
		border: 2px solid var(--line);
		flex-shrink: 0;
	}
	.gx-mtabs button {
		padding: 0.5rem 0.9rem;
		border-radius: 0.75rem;
		border: none;
		background: none;
		color: var(--muted);
		font: 600 1.05rem/1 var(--f-head);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		white-space: nowrap;
		cursor: pointer;
	}
	.gx-mtabs button.is-active {
		background: linear-gradient(180deg, var(--gold2), var(--gold));
		color: #3a2400;
		box-shadow: 0 0.2rem 0 var(--gold3);
	}
	.gx-body.has-mtabs {
		grid-template-areas: none !important;
		grid-template-rows: minmax(0, 1fr) !important;
		grid-template-columns: none !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
	.gx-body.has-mtabs > [data-m] { grid-area: auto !important; }
	.gx-body.has-mtabs > [data-m]:not(.is-m-on) { display: none !important; }
	.gx-body.has-mtabs > [data-m-wide].is-m-on { grid-column: span 2; }
	/* Until the strip script has run, only the first panel shows (no flash of the others) */
	.gx-body:not(.has-mtabs):not(.no-mtabs) > [data-m] ~ [data-m] { display: none !important; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-club.is-m-on {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 1.25rem;
	}
	.gx-club-top, .gx-club-facts, .gx-club-five, .gx-club-actions { grid-column: 1; }
	.gx-club-rating { grid-column: 2; grid-row: 1 / 5; }
	.gx-club-actions { align-self: end; }
}

/* Position colours: every position has its own colour everywhere */
.gx-pc-PG { --pc: var(--pos-PG); }
.gx-pc-SG { --pc: var(--pos-SG); }
.gx-pc-SF { --pc: var(--pos-SF); }
.gx-pc-PF { --pc: var(--pos-PF); }
.gx-pc-C  { --pc: var(--pos-C); }
.gx-pos[class*="gx-pc-"] { background: var(--pc); border-color: var(--pc); color: #fff; }
.gx-pcard--hero .gx-pcard-pos { font-size: 1.5rem; padding: 0.3rem 1rem; }
.gx-avatar:has(img) { background: linear-gradient(180deg, #3b4e94, #1c2a55); }

/* ============================================================
   TACTICS COURT (shared: tactics.php, match_tactics.php, team cup)
   ============================================================ */
.gx-tactics-grid {
	grid-template-columns: minmax(0, 1fr) 30rem 24rem;
	grid-template-rows: minmax(0, 1fr);
}
.gx-court-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.gx-ct .ct-court {
	flex: 1;
	min-height: 0;
	max-width: none;
	margin: 0;
	width: 100%;
}
.gx-ct .ct-court-surface {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: none;
	border-radius: 0;
}
.gx-ct .ct-court.is-tut::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(5, 9, 22, 0.6);
	pointer-events: none;
	z-index: 1;
}
.gx-ct .ct-court.is-tut .ct-pos--tut { z-index: 3; }
.gx-ct .ct-pos { gap: 0.4rem; width: 16.5rem; z-index: 2; }
/* --ct-scale is set by the fit script in index.tpl so cards never overlap on small courts */
.gx-ct .ct-pos { transform: translateX(-50%) scale(var(--ct-scale, 1)); transform-origin: 50% 0; }
.gx-ct .gx-ovr-card--court {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 4;
	display: flex;
	gap: 0.8rem;
	padding: 0.55rem 0.9rem 0.55rem 1.1rem;
	border-radius: 1.1rem;
	background: rgba(13, 22, 48, 0.9);
	border: 2px solid var(--line2);
	box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.45);
}
.gx-ct .gx-ovr-card--court:hover { border-color: var(--gold); }
.gx-ct .gx-ovr-card--court .gx-ovr-val { font-size: 3rem; min-width: 0; }
.gx-ct .gx-ovr-card--court .gx-ovr-lbl { font-size: 0.95rem; }
.gx-ct .gx-ovr-card--court .gx-ovr-ico { width: 1.4rem; height: 1.4rem; }
.gx-ct .ct-pos--C  { top: 4%;  left: 50%; }
.gx-ct .ct-pos--PF { top: 27%; left: 18%; }
.gx-ct .ct-pos--SF { top: 27%; left: 82%; }
.gx-ct .ct-pos--SG { top: 60%; left: 30%; }
.gx-ct .ct-pos--PG { top: 60%; left: 70%; }
.gx-ct .ct-pos-label {
	position: absolute;
	top: -1rem;
	left: 1.1rem;
	z-index: 3;
	padding: 0.1rem 0.8rem;
	border-radius: 0.65rem;
	font: 700 1.15rem/1.3 var(--f-head);
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--pc, var(--navy));
	border: 0.18rem solid rgba(255, 255, 255, 0.85);
	text-shadow: none;
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.35);
}
.gx-ct .ct-slot { width: 100%; border-radius: 1.3rem; justify-content: stretch; }
.gx-ct .ct-slot:active { transform: scale(0.98); }
.gx-ct .ct-slot--starter {
	min-height: 7.6rem;
	padding: 0.25rem;
	background: rgba(13, 22, 48, 0.55);
	border: 0.18rem dashed rgba(255, 255, 255, 0.55);
}
.gx-ct .ct-slot--starter[data-pid]:not([data-pid=""]) {
	border: none;
	background: linear-gradient(180deg, var(--gold2), #f5a300);
	box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.5);
}
.gx-ct .ct-slot--starter:empty::after,
.gx-ct .ct-slot--backup:empty::after {
	content: "+";
	margin: auto;
	font: 700 2.5rem var(--f-head);
	color: rgba(255, 255, 255, 0.75);
}
.gx-ct .ct-slot--backup:empty::after { font-size: 1.4rem; }
.gx-ct .ct-slot-player {
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.9rem;
	border-radius: 1.1rem;
	background: linear-gradient(180deg, #1f2d5e, var(--navy2));
}
.gx-ct .ct-slot-face {
	width: 4.4rem;
	height: 4.4rem;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 10%;
	background: linear-gradient(180deg, #3b4e94, #1c2a55);
	border: 0.18rem solid rgba(255, 255, 255, 0.3);
}
.gx-ct .ct-slot-info { text-align: left; min-width: 0; flex: 1; line-height: 1.15; }
.gx-ct .ct-slot-name { max-width: none; font: 700 1.1rem var(--f-body); text-shadow: none; }
.gx-ct .ct-slot-skill { font: 700 2.3rem/1.05 var(--f-head); color: var(--gold2); text-shadow: none; }
.gx-ct .ct-slot--backup {
	width: auto;
	margin: 0 0.6rem;
	min-height: 2.9rem;
	border-radius: 0.95rem;
	background: rgba(13, 22, 48, 0.85);
	border: 0.15rem dashed rgba(255, 255, 255, 0.3);
}
.gx-ct .ct-slot--backup[data-pid]:not([data-pid=""]) { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); background: rgba(13, 22, 48, 0.88); }
.gx-ct .ct-slot--backup .ct-slot-player { padding: 0.3rem 0.8rem 0.3rem 0.35rem; gap: 0.6rem; background: none; }
.gx-ct .ct-slot--backup .ct-slot-face { width: 2.2rem; height: 2.2rem; border-width: 0.12rem; }
.gx-ct .ct-slot--backup .ct-slot-info { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gx-ct .ct-slot--backup .ct-slot-name { font: 600 0.95rem var(--f-body); color: var(--soft); max-width: none; }
.gx-ct .ct-slot--backup .ct-slot-skill { font: 700 1.3rem var(--f-head); color: var(--soft); }

.gx-ct .ct-shot-bars { width: auto; margin: -0.2rem 0.9rem 0; }
.gx-ct .ct-sb-row { height: auto; gap: 0.45rem; }
.gx-ct .ct-sb-usage { height: auto; padding: 0.15rem 0.45rem; border-radius: 0.4rem; font: 700 0.8rem var(--f-body); }
.gx-ct .ct-sb-stack { height: 0.75rem; border-radius: 0.4rem; border: none; }
.gx-ct .ct-sb-seg { font: 700 0.6rem var(--f-body); }
.gx-ct .ct-sb-seg--close { background: var(--inside); }
.gx-ct .ct-sb-seg--mid { background: var(--mid); }
.gx-ct .ct-sb-seg--long { background: var(--three); color: #04263a; }
.gx-ct .ct-sb-legend {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin-top: 1rem;
	font: 600 1.05rem var(--f-body);
	color: var(--muted);
	background: none;
	border: none;
	padding: 0;
}
.gx-ct .ct-sb-legend-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; }
.gx-ct .ct-sb-legend-dot { width: 1rem; height: 1rem; border-radius: 0.25rem; }
.gx-ct .ct-sb-legend-dot--close { background: var(--inside); }
.gx-ct .ct-sb-legend-dot--mid { background: var(--mid); }
.gx-ct .ct-sb-legend-dot--long { background: var(--three); }
.gx-ct .ct-sb-legend-pill { font-size: 0.8rem; padding: 0.1rem 0.4rem; border-radius: 0.35rem; }

/* Tutorial hint over the court */
.gx-ct .ct-tut-hint {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: 4.5rem;
	transform: translateX(-50%);
	width: min(90%, 44rem);
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	border-radius: 1.25rem;
	background: rgba(13, 22, 48, 0.96);
	border: 2px solid var(--gold);
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.55);
}
.gx-ct .ct-tut-hint-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--gold); color: #3a2400; }
.gx-ct .ct-tut-hint-title { font: 700 1.25rem var(--f-head); text-transform: uppercase; color: var(--gold2); }
.gx-ct .ct-tut-hint-text { font: 500 1.05rem/1.4 var(--f-body); color: #fff; }

/* Team OVR card */
.gx-ovr-card {
	flex-direction: row;
	align-items: center;
	gap: 1.1rem;
	cursor: pointer;
	flex-shrink: 0;
}
.gx-ovr-card:hover { border-color: var(--line2); }
.gx-ovr-val { font: 700 3.6rem/1 var(--f-head); color: var(--gold2); min-width: 4rem; }
.gx-ovr-lbl { font: 600 1.1rem var(--f-head); letter-spacing: 0.14em; color: var(--muted); }
.gx-ovr-lbl small { display: block; font: 500 0.85rem var(--f-body); letter-spacing: 0; text-transform: none; margin-top: 0.2rem; }
.gx-ovr-ico { margin-left: auto; width: 1.6rem; height: 1.6rem; color: var(--cyan); }
.gx-ovr-card.ct-team-rating--up .gx-ovr-val { animation: gxOvrUp 1.2s ease-out; }
.gx-ovr-card.ct-team-rating--down .gx-ovr-val { animation: gxOvrDown 1.2s ease-out; }
@keyframes gxOvrUp { 0% { color: var(--green); transform: scale(1.35); } 100% { color: var(--gold2); transform: none; } }
@keyframes gxOvrDown { 0% { color: var(--red); transform: scale(0.85); } 100% { color: var(--gold2); transform: none; } }

/* Game plan rows */
.gx-ct .tac-card { margin: 0; }
.gx-plan { flex: 1; min-height: 0; overflow-y: auto; }
.gx-ct .tac-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6rem;
	padding: 0;
	margin-bottom: 1.35rem;
	border: none;
	background: none;
}
.gx-ct .tac-row:last-child { margin-bottom: 0; }
.gx-ct .tac-row-label { display: flex; align-items: center; gap: 0.5rem; font: 600 1.15rem var(--f-body); color: var(--soft); }
.gx-ct .tac-info {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(63, 216, 255, 0.15);
	color: var(--cyan);
	font: 700 0.85rem var(--f-head);
	border: none;
}
.gx-ct .tac-row-ctrl { width: 100%; }
.gx-ct .tac-row-ctrl select.tac-select { display: none; }
.gx-ct .tac-seg > button { font-size: 1.05rem; padding: 0.8rem 0.3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-ct .tac-seg.is-disabled { opacity: 0.5; pointer-events: none; }
.tac-info-tooltip { font-size: 1rem; border-radius: 1rem; }
.gx-ct #presetCard[style*="none"] { display: none !important; }
.gx-ct #presetCard select { width: 100%; }

/* Bench */
.gx-ct .ct-bench-section { margin: 0; padding: 1.25rem 1.1rem; background: linear-gradient(180deg, var(--panel), var(--navy2)); border: 2px solid var(--line); }
.gx-ct .ct-bench-head { padding: 0 0.25rem; border: none; font-size: inherit; }
.gx-ct .ct-bench-count { margin-left: auto; }
.gx-ct .ct-bench-list { display: flex; flex-direction: column; gap: 0.55rem; padding-right: 0.2rem; }
.gx-ct .ct-bench-player {
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
}
.gx-ct .ct-bench-player:hover { border-color: var(--line2); }
.gx-ct .ct-bench-player--hidden { display: none; }
.gx-ct .ct-bench-face {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 10%;
	background: linear-gradient(180deg, #3b4e94, #1c2a55);
	border: 0.15rem solid rgba(255, 255, 255, 0.25);
}
.gx-ct .ct-bench-name { font: 700 1rem var(--f-body); gap: 0.5rem; flex-wrap: wrap; }
.gx-ct .ct-bench-meta { font-size: 0.85rem; gap: 0.75rem; }
.gx-ct .ct-bench-age::before, .gx-ct .ct-bench-height::before { content: none; }
.gx-ct .ct-bench-info-btn { width: 2.2rem; height: 2.2rem; background: rgba(63, 216, 255, 0.12); color: var(--cyan); }
.gx-ct .ct-bench-info-btn svg { width: 1.1rem; height: 1.1rem; }

/* Position-rating badge used across the game (renderPositionRatingBadge) */
.ct-bench-pos {
	padding: 0.15rem 0.45rem;
	border-radius: 0.4rem;
	font: 700 0.8rem/1.2 var(--f-head);
	letter-spacing: 0.04em;
	color: #fff;
}
.ct-bench-pos--PG { background: var(--pos-PG); }
.ct-bench-pos--SG { background: var(--pos-SG); }
.ct-bench-pos--SF { background: var(--pos-SF); }
.ct-bench-pos--PF { background: var(--pos-PF); }
.ct-bench-pos--C  { background: var(--pos-C); color: #fff; }

/* Player picker + info modals (game style, centered) */
body.gx-app .ct-picker {
	left: 50%;
	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%);
	width: min(92 * var(--vw), 34rem);
	max-width: none;
	max-height: calc(80 * var(--vh));
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
	transition: none;
}
body.gx-app .ct-picker--show { transform: translate(-50%, -50%); }
body.gx-app .ct-picker-head { padding: 1.2rem 1.4rem; border-bottom: 2px solid var(--line); }
body.gx-app .ct-picker-title { font: 700 1.6rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .ct-picker-close { color: var(--soft); }
body.gx-app .ct-picker-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
body.gx-app .ct-pick-item {
	gap: 0.85rem;
	padding: 0.6rem 0.9rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
}
body.gx-app .ct-pick-item:hover { border-color: var(--gold); }
body.gx-app .ct-pick-item--clear { color: var(--red); font: 700 1.05rem var(--f-head); text-transform: uppercase; justify-content: center; margin: 0; }
body.gx-app .ct-pick-current { font-size: 1rem; color: var(--soft); }
body.gx-app .ct-pick-face {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 10%;
	background: linear-gradient(180deg, #3b4e94, #1c2a55);
}
body.gx-app .ct-pick-name { font: 700 1.1rem var(--f-body); }
body.gx-app .ct-pick-skill { font: 700 1.7rem var(--f-head); color: var(--gold2); }
body.gx-app .ct-pick-info-btn { color: var(--cyan); }
body.gx-app .ct-info-tooltip {
	width: min(92 * var(--vw), 30rem);
	max-width: none;
	padding: 1.4rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	font-size: 1rem;
}
body.gx-app .tr-breakdown { width: min(92 * var(--vw), 36rem); }
body.gx-app .ct-info-name { font: 700 1.4rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .ct-info-meta { font-size: 0.95rem; }
body.gx-app .ct-info-face { width: 3.5rem; height: 4.9rem; }
body.gx-app .ct-info-title { font: 600 0.95rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0.6rem 0 0.4rem; }
body.gx-app .ct-info-row { font-size: 0.95rem; gap: 0.6rem; padding: 0.2rem 0; }
body.gx-app .ct-info-bar { height: 0.55rem; border-radius: 0.3rem; background: var(--navy); }
body.gx-app .ct-flash {
	top: 1.5rem;
	padding: 0.8rem 1.8rem;
	border-radius: 1rem;
	background: var(--green);
	color: #062c17;
	border: none;
	font: 700 1.2rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-ct .ct-pos { width: 14rem; }
	.gx-tactics-grid .gx-court-wrap.is-m-on { grid-column: span 2; }
}
.gx-ct .ct-pos { align-items: stretch; }
.gx-ct .ct-pos-label { align-self: flex-start; }
.gx-shotmix-card { flex-shrink: 0; gap: 0.9rem; }
.gx-shotmix { display: flex; height: 1.6rem; border-radius: 0.8rem; overflow: hidden; }
.gx-shotmix i { display: grid; place-items: center; font: 700 0.9rem var(--f-body); font-style: normal; color: #1a1030; }
.gx-tactics-side .gx-tip { flex-shrink: 0; }
.gx-tactics-side .gx-tip[style*="none"] { display: none !important; }
.gx-plan { flex: 0 1 auto; }

/* ============================================================
   PAGE: TRAINING (training.php)
   ============================================================ */
.gx-tabs > .lm-tab-active {
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	color: #3a2400;
	box-shadow: 0 0.25rem 0 var(--gold3);
}
.gx-training-grid { grid-template-columns: 36rem minmax(0, 1fr); padding: 0; overflow: visible; }
/* Compact hero: count next to the pips, start button below; on phones all in one row */
.gx-train-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "kicker kicker" "count pips" "start start";
	align-items: center;
	gap: 0.6rem 1.2rem;
	flex-shrink: 0;
	overflow: hidden;
	padding: 1.2rem 1.5rem;
}
.gx-train-hero > * { position: relative; z-index: 1; }
.gx-train-hero > .gx-panel-kicker { grid-area: kicker; }
.gx-train-hero > .gx-train-count { grid-area: count; }
.gx-train-hero > .gx-segbar { grid-area: pips; }
.gx-train-hero > .tr2-training-countdown, .gx-train-hero > .gx-train-locked { grid-area: start; }
.gx-train-count { display: flex; align-items: baseline; gap: 0.6rem; font-size: 4.4rem; line-height: 1; }
.gx-train-count small { font-size: 0.48em; }
.gx-train-hero .gx-segbar i { height: 1rem; }
.gx-train-hero .tr2-training-countdown {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
.gx-train-hero .tr2-training-countdown[style*="none"] { display: none !important; }
/* The big count and the kicker already say it */
.gx-train-hero .tr2-training-countdown-head { display: none; }
.gx-train-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	background: none;
	border: none;
	font: 600 1.1rem var(--f-body);
	color: var(--soft);
}
.gx-train-next strong { font: 700 1.6rem var(--f-head); color: #fff; }
.gx-train-next[style*="none"] { display: none !important; }
.gx-train-hero #startTrainingBtn { font-size: 2.1rem; min-height: 4.6rem; padding: 1rem 2rem; }
.gx-train-hero #startTrainingBtn[style*="none"] { display: none !important; }
.gx-train-hero .tr2-start-training--pulse { animation: gxPulse 1.6s ease-in-out infinite; }
.gx-train-locked {
	display: none;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.15rem;
	border-radius: 1.1rem;
	background: rgba(13, 22, 48, 0.75);
	border: 2px dashed var(--line2);
	font: 600 1rem/1.4 var(--f-body);
	color: var(--soft);
}
.gx-train-locked .gx-i { width: 2rem; height: 2rem; color: var(--gold); }
.gx-train-hero .tr2-training-countdown[style*="none"] ~ .gx-train-locked { display: flex; }
.gx-train-prog { flex: 1; min-height: 0; padding: 1.2rem 1.3rem; }
.gx-train-prog .gx-panel-head { margin-bottom: 0.8rem; }
.gx-train-prog .gx-panel-head .tr2-prog-filters { margin-left: auto; }
/* Narrower columns than the old full-width tab: the list now lives in the side column */
.gx-train-prog .gx-prog-head,
.gx-training .gx-train-prog .tr2-prog-row { --cols: 4.4rem minmax(0, 1.4fr) 3rem 2.6rem minmax(4.5rem, 1fr) 4rem; grid-template-columns: var(--cols); gap: 0.6rem; }
.gx-train-prog .gx-prog-head { padding-left: 0.8rem; padding-right: 0.8rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.gx-training .gx-train-prog .tr2-prog-row { padding: 0.5rem 0.8rem; border-radius: 0.9rem; }
.gx-training .gx-train-prog .tr2-prog-row .gx-avatar { width: 4.4rem; height: 4.4rem; }
.gx-train-col .tr2-player .gx-avatar { width: 3.8rem; height: 3.8rem; }
.gx-training .gx-train-prog .tr2-prog-delta { font-size: 1.3rem; }
.gx-training .gx-train-prog .tr2-prog-btn { padding: 0.35rem 0.8rem; font-size: 0.95rem; }

.gx-train-main { padding: 1.4rem 1.5rem; }
.gx-train-main > .lm-panel { flex: 1; min-height: 0; }
.gx-train-main > .lm-panel-active { display: flex !important; flex-direction: column; }
.gx-train-board.lm-panel-active {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 1.2rem;
}
.gx-train-board > .tr2-training-complete { grid-row: 2; grid-column: 1 / -1; }
.gx-train-board > [style*="none"] { display: none !important; }
.gx-train-col {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	min-height: 0;
	margin: 0;
	padding: 1.1rem;
	border-radius: 1.4rem;
	background: rgba(13, 22, 48, 0.55);
	border: 2px solid var(--line);
	overflow: hidden;
}
.gx-train-col.tr2-section--group1 { border-color: rgba(47, 140, 255, 0.55); }
.gx-train-col.tr2-section--group2 { border-color: rgba(255, 138, 26, 0.55); }
.gx-train-col .tr2-section-head { padding: 0; background: none; gap: 0.75rem; }
.gx-train-col-ico {
	width: 2.8rem;
	height: 2.8rem;
	flex-shrink: 0;
	border-radius: 0.85rem;
	display: grid;
	place-items: center;
	font: 700 1.6rem var(--f-head);
	color: #fff;
	box-shadow: inset 0 -0.2rem 0 rgba(0, 0, 0, 0.2);
}
.gx-train-col-ico .gx-i { width: 1.5rem; height: 1.5rem; }
.gx-train-col-ico--bench { background: var(--panel2); color: var(--soft); }
.gx-train-col-ico--a { background: var(--pos-PG); }
.gx-train-col-ico--b { background: var(--pos-SF); }
.gx-train-col .tr2-section-title { font: 700 1.5rem var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; }
.gx-train-col .tr2-badge { min-width: 2rem; text-align: center; padding: 0.2rem 0.55rem; border-radius: 0.6rem; font: 700 1rem var(--f-head); }
.gx-train-col .tr2-hint {
	margin: 0;
	padding: 0.7rem 0.9rem;
	border-radius: 0.9rem;
	font: 500 0.9rem/1.35 var(--f-body);
	background: rgba(63, 216, 255, 0.08);
	border: 1px solid rgba(63, 216, 255, 0.3);
	color: var(--soft);
}
.gx-train-col .tr2-auto-assign-focus { font-size: 0.9rem; border-radius: 0.9rem; margin: 0; }
.gx-train-col .tr2-auto-assign { width: 100%; margin: 0; }
.gx-train-col .tr2-auto-assign[style*="none"] { display: none !important; }
.gx-train-col .tr2-skill-select {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
.gx-train-col .tr2-skill-select .gx-i { color: var(--muted); }
.gx-train-col .tr2-select {
	flex: 1;
	min-width: 0;
	height: 3rem;
	padding: 0 0.9rem;
	border-radius: 0.9rem;
	background: var(--navy) !important;
	border: 2px solid var(--line) !important;
	color: #fff;
	font: 600 1.05rem var(--f-body);
}
.gx-train-col .tr2-select.gold-pulsing-border { border-color: var(--gold) !important; animation: gxPulse 2s ease-in-out infinite; }
.gx-train-col .tr2-player-list {
	flex: 1;
	min-height: 4rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding: 0.2rem;
	background: none;
	border-radius: 1rem;
}
.gx-train-col .tr2-player-list:empty::after {
	content: "⇢";
	flex: 1;
	min-height: 6rem;
	border-radius: 1rem;
	border: 2px dashed var(--line2);
	font-size: 2rem;
	color: var(--muted);
	opacity: 1;
}
.gx-train-col .tr2-player {
	flex: 0 0 auto;
	gap: 0.7rem;
	padding: 0.55rem 0.7rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
}
.gx-train-col .tr2-player:hover { border-color: var(--line2); }
.gx-train-col .tr2-player--selected { border-color: var(--gold) !important; box-shadow: 0 0 1rem rgba(255, 184, 28, 0.3); }
.gx-train-col .tr2-player-info { flex: 1; min-width: 0; }
.gx-train-col .tr2-player-name { font: 700 1rem var(--f-body); display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; overflow: hidden; }
.gx-train-col .tr2-player-meta { font-size: 0.85rem; color: var(--muted); }
.gx-train-col .tr2-player-age::after { content: " yrs"; }
.gx-train-col .tr2-info-btn {
	order: 9;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(63, 216, 255, 0.12);
	color: var(--cyan);
	border: none;
}
.gx-train-col .tr2-info-btn svg { width: 1rem; height: 1rem; }
.gx-train-col .tr2-quick-assign { display: flex; gap: 0.35rem; }
.gx-train-col .tr2-quick-btn {
	padding: 0.35rem 0.6rem;
	border-radius: 0.6rem;
	font: 700 0.85rem var(--f-head);
	color: #fff;
	box-shadow: inset 0 -0.15rem 0 rgba(0, 0, 0, 0.2);
}
.gx-train-col .tr2-quick-btn--a { background: var(--pos-PG); }
.gx-train-col .tr2-quick-btn--b { background: var(--pos-SF); }
.tr2-section--group1 .tr2-quick-btn--a,
.tr2-section--group2 .tr2-quick-btn--b { display: none; }

/* Playtime table */
.gx-training .tr2-playtime { padding: 0; }
.gx-training .tr2-pt-table { width: 100%; border-collapse: separate; border-spacing: 0 0.45rem; }
.gx-training .tr2-pt-table thead { background: none; }
.gx-training .tr2-pt-th-name,
.gx-training .tr2-pt-th { font: 600 0.95rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 1rem 0.4rem; border: none; }
.gx-training .tr2-pt-th > * { vertical-align: middle; }
.gx-training .tr2-pt-table td { padding: 0.75rem 1rem; background: var(--navy); border: none; font: 600 1.1rem var(--f-body); }
.gx-training .tr2-pt-table td:first-child { border-radius: 0.9rem 0 0 0.9rem; }
.gx-training .tr2-pt-table td:last-child { border-radius: 0 0.9rem 0.9rem 0; }
.gx-training .tr2-pt-min { text-align: center; font: 700 1.5rem var(--f-head) !important; }
.gx-training .tr2-pt-green { color: var(--green); }
.gx-training .tr2-pt-yellow { color: var(--gold2); }
.gx-training .tr2-pt-red { color: var(--red); }
.gx-training .tr2-info-icon { color: var(--cyan); }

/* Progress list (mockup style) */
.gx-training .tr2-progress { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; gap: 0.8rem; }
.gx-training .tr2-prog-filters { display: flex; gap: 0.6rem; justify-content: flex-end; margin: 0; padding: 0; }
.gx-training .tr2-prog-btn {
	padding: 0.6rem 1.2rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: 2px solid var(--line);
	font: 600 1.15rem var(--f-head);
	text-transform: uppercase;
	color: var(--soft);
}
.gx-training .tr2-prog-btn[style*="none"] { display: none !important; }
.gx-training .tr2-prog-btn--active { border-color: var(--cyan); color: #fff; background: rgba(63, 216, 255, 0.13); box-shadow: 0 0 1rem rgba(63, 216, 255, 0.4); }
.gx-prog-head { --cols: 3.6rem minmax(10rem, 1.6fr) 4.5rem 5rem minmax(10rem, 2fr) 6rem; }
.gx-training .tr2-prog-list { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.2rem 0.2rem 0 0; }
.gx-training .tr2-prog-row {
	display: grid;
	grid-template-columns: 3.6rem minmax(10rem, 1.6fr) 4.5rem 5rem minmax(10rem, 2fr) 6rem;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid transparent;
	cursor: pointer;
}
.gx-training .tr2-prog-row:hover { border-color: var(--line2); }
.gx-training .tr2-prog-row.is-hl { border-color: var(--green); background: rgba(75, 227, 138, 0.08); }
.gx-training .tr2-prog-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.5rem; align-items: center; font-size: inherit; }
.gx-training .tr2-prog-name .gx-li-sub { grid-row: 2; }
.gx-training .tr2-prog-info-btn { grid-row: 1 / 3; grid-column: 2; color: var(--cyan); }
.gx-training .tr2-prog-next { width: auto; }
.gx-training .tr2-prog-next-lbl { font: 700 0.9rem var(--f-body); color: var(--soft); margin-bottom: 0.3rem; display: flex; justify-content: space-between; }
.gx-training .tr2-prog-bar-wrap { height: 0.8rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.gx-training .tr2-prog-bar--base { background: linear-gradient(90deg, #1d8a4c, #2fbf6a); border-radius: 0.5rem 0 0 0.5rem; }
.gx-training .tr2-prog-bar--gain { background: var(--green); box-shadow: 0 0 0.6rem rgba(75, 227, 138, 0.8); }
.gx-training .tr2-prog-delta { font: 700 1.7rem var(--f-head); text-align: right; }
.gx-training .tr2-prog-pos { color: var(--green); }
.gx-training .tr2-prog-zero { color: var(--muted); }
.gx-training .tr2-progress-lock { border-radius: 1.25rem; background: var(--navy); border: 2px solid var(--gold); padding: 1.5rem; }
.gx-training .tr2-progress-lock[style*="none"] { display: none !important; }
.gx-training .tr2-training-complete { border-radius: 1.1rem; font-size: 1.05rem; }
.gx-training .tr2-prog-detail { flex: 1; min-height: 0; overflow-y: auto; }
.gx-training .tr2-prog-detail-name { font: 700 1.6rem var(--f-head); text-transform: uppercase; color: var(--gold); }
.gx-training .tr2-progd-row { font-size: 1rem; padding: 0.35rem 0; }

/* Tooltips */
body.gx-app .tr2-tooltip {
	width: min(92 * var(--vw), 30rem);
	max-height: calc(85 * var(--vh));
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	overflow: hidden;
	font-size: 1rem;
}
body.gx-app .tr2-tooltip-head { padding: 1rem 1.2rem; background: none; border-bottom: 2px solid var(--line); gap: 0.9rem; }
body.gx-app .tr2-tooltip-face { width: 3.5rem; height: 4.9rem; }
body.gx-app .tr2-tooltip-name { font: 700 1.4rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .tr2-tooltip-skills, body.gx-app .tr2-info-tooltip-body { padding: 1rem 1.2rem; overflow-y: auto; }
body.gx-app .tr2-tt-row { font-size: 0.95rem; }
body.gx-app .tr2-flash { border-radius: 1rem; background: var(--green); color: #062c17; font: 700 1.1rem var(--f-head); text-transform: uppercase; }
body.gx-app .tr2-quest-hint-popup { border-radius: var(--r3); background: linear-gradient(180deg, var(--panel), var(--navy2)); border: 2px solid var(--gold); padding: 2rem; }
body.gx-app .tr2-quest-hint-title { font: 700 1.8rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .tr2-quest-hint-text { font-size: 1.1rem; }
body.gx-app .tr2-quest-hint-btn { border-radius: 1rem; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; font: 700 1.2rem var(--f-head); box-shadow: 0 0.3rem 0 var(--gold3); }
.gx-train-board > .gx-train-col { grid-row: 1; }
.gx-tabs > .lm-tab { flex-direction: row; height: auto; border: none; margin: 0; }
.gx-tabs > .lm-tab svg { width: 1.3rem; height: 1.3rem; }
.gx-train-col .tr2-player-age::before { content: none; }
.gx-train-col .tr2-player-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gx-train-col .tr2-player-name .ct-bench-pos { flex-shrink: 0; }
.gx-training .tr2-prog-btn { flex: 0 0 auto; }
.gx-prog-head { padding-left: 1.25rem; padding-right: 1.25rem; }

/* ============================================================
   PAGE: TRANSFER MARKET (transfer_market.php)
   ============================================================ */
.gx-tabs > .prof-tab--active {
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	color: #3a2400;
	box-shadow: 0 0.25rem 0 var(--gold3);
}
.gx-market-body { display: flex; flex-direction: column; gap: 1rem; padding: 0; overflow: visible; }
.gx-market-body > .st-status { flex-shrink: 0; margin: 0; }
.gx-market-body > .st-status[style*="none"] { display: none !important; }
.gx-market-body > .tm-panel { flex: 1; min-height: 0; }
.gx-market-body > .tm-panel[style*="none"] { display: none !important; }
.gx-market-browse { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: var(--gap); }
.gx-market-filters { gap: 1.1rem; overflow-y: auto; }
.gx-market-filters .tm-filters { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; padding: 0; margin: 0; background: none; border: none; }
.gx-market-filters .tm-filters[style*="none"] { display: none !important; }
.gx-market-filters .tm-filter-group { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.gx-market-filters .tm-filter-label { grid-column: 1 / -1; font: 600 0.9rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.gx-market-filters .tm-filter-group > select:only-of-type { grid-column: 1 / -1; }
.gx-market-filters .tm-filter-select,
.gx-market-filters .tm-filter-input { width: 100%; height: 2.9rem; padding: 0 0.7rem !important; font-size: 1rem !important; }
.gx-market-filters .tm-filter-dash { color: var(--muted); }
.gx-market-list { padding: 1.25rem; }
.gx-mkt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 1.1rem;
	align-content: start;
	padding: 0.2rem;
}
/* Paged browse list: dimmed while a filter change reloads, spinner while the next page loads */
.gx-mkt-grid.is-reloading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
.tm-more { height: 3rem; display: grid; place-items: center; }
.tm-more.is-loading::after {
	content: "";
	width: max(1.6rem, 18px);
	height: max(1.6rem, 18px);
	border-radius: 50%;
	border: 3px solid var(--line);
	border-top-color: var(--gold);
	animation: tmSpin 0.8s linear infinite;
}
@keyframes tmSpin { to { transform: rotate(360deg); } }
/* Bid shown before the server confirmed it */
.tm-listing--pending .tm-listing-price,
.tm-listing--pending .tm-listing-bidder { opacity: 0.6; }
.gx-mkt {
	--tier1: #fff0a6; --tier2: #f5c518; --tier3: #c98a0b;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-radius: 1.4rem;
	background: linear-gradient(180deg, var(--panel2), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.15s, border-color 0.15s;
}
.gx-mkt:hover { transform: translateY(-0.25rem); border-color: var(--line2); }
.gx-mkt--silver { --tier1: #ffffff; --tier2: #c9d3ea; --tier3: #7d8bb0; }
.gx-mkt--bronze { --tier1: #ffd2a8; --tier2: #d58a4e; --tier3: #8a4a1d; }
.gx-mkt--elite  { --tier1: #b9f8ff; --tier2: #6a5cff; --tier3: #c13cff; }
.gx-mkt-art {
	position: relative;
	height: 9.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	container-type: size;
	background:
		repeating-conic-gradient(from 0deg at 50% 70%, rgba(255, 255, 255, 0.16) 0 6deg, transparent 6deg 18deg),
		linear-gradient(160deg, var(--tier1), var(--tier2) 45%, var(--tier3));
}
.gx-mkt-art .gx-pcard-portrait { height: 92cqh; }
.gx-mkt-art .gx-pcard-initials { margin-bottom: 1.5rem; }
.gx-mkt-art > .flag { position: absolute; top: 0.6rem; left: 0.6rem; transform: scale(0.9); transform-origin: left top; }
.gx-mkt-pot {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	padding: 0.1rem 0.45rem;
	border-radius: 0.45rem;
	background: rgba(13, 22, 48, 0.82);
	color: #fff;
	font: 700 0.85rem var(--f-head);
}
.gx-mkt-rating {
	position: absolute;
	left: 0.6rem;
	bottom: 0.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.35rem 0.5rem 0.25rem;
	border-radius: 0.8rem;
	background: #fff;
	box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.3);
}
.gx-mkt-rating .gx-pcard-pos { min-width: 2.6rem; font-size: 0.85rem; padding: 0.15rem 0.45rem; }
.gx-mkt-rating b { font: 700 1.9rem/1 var(--f-head); color: #0d1630; }
.gx-mkt-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 0.95rem 0.95rem; }
.gx-mkt .tm-player { display: block; }
.gx-mkt .tm-listing-name { font: 700 1.1rem var(--f-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.gx-mkt .tm-details { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.gx-mkt .tm-tag { padding: 0.15rem 0.5rem; border-radius: 0.45rem; background: var(--navy); color: var(--soft); font: 600 0.8rem var(--f-body); }
.gx-mkt .tm-bid-info { margin-left: auto; }
.gx-mkt .tm-bid-timer { display: inline-flex; align-items: center; gap: 0.3rem; font: 700 1rem var(--f-head); color: var(--cyan); letter-spacing: 0.04em; }
/* Fixed width (fits "59m 59s"): the ticking countdown never changes whether the row wraps */
.gx-mkt .tm-bid-timer { justify-content: flex-end; min-width: 4.6em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-mkt .tm-bid-timer--hot { color: var(--red); }
.gx-mkt .tm-bid-timer--expired { color: var(--muted); }
.gx-mkt-price { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.gx-mkt .tm-listing-price { font: 700 1.7rem/1 var(--f-head); color: var(--gold2); }
/* Highest bidder on its own line, so the name is readable */
.gx-mkt-bidder { display: flex; align-items: center; gap: 0.4rem; min-width: 0; margin-top: -0.15rem; }
.gx-mkt-bidder .gx-i { flex-shrink: 0; width: 1.05rem; height: 1.05rem; color: var(--gold); }
.gx-mkt .tm-listing-bidder { font: 600 0.95rem var(--f-body); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gx-mkt .tm-actions { display: block; min-width: 0; margin: 0; }
/* Bid amount on its own row; Bid / Autobid share the row below */
.gx-mkt .tm-bid-form { display: flex; flex-wrap: wrap; gap: 0.45rem; width: 100%; margin: 0; }
.gx-mkt .tm-bid-form > .st-btn { flex: 1 1 0; min-width: 0; }
.gx-mkt .tm-bid-input {
	flex: 1 1 100%;
	min-width: 0;
	height: 2.6rem;
	padding: 0 0.6rem;
	border-radius: 0.75rem;
	background: var(--navy);
	border: 2px solid var(--line);
	color: #fff;
	font: 600 1rem var(--f-body);
}
.gx-mkt .st-btn {
	height: 2.6rem;
	padding: 0 0.9rem;
	border-radius: 0.75rem;
	border: none;
	font: 700 1rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	box-shadow: 0 0.22rem 0 var(--gold3);
	cursor: pointer;
}
.gx-mkt .tm-autobid-btn { color: #04263a; background: linear-gradient(180deg, #8eeaff, var(--cyan)); box-shadow: 0 0.22rem 0 #1784a3; }
.gx-mkt .tm-buy-btn { width: 100%; }
.gx-mkt .tm-bid-status { flex-basis: 100%; margin: 0 !important; font-size: 0.85rem !important; }
.gx-mkt.tm-listing--gold { border-color: var(--gold); box-shadow: 0 0 0 0.25rem rgba(255, 184, 28, 0.25), 0 0 2rem rgba(255, 184, 28, 0.35); animation: gxPulse 2s ease-in-out infinite; }
.gx-mkt.tm-listing--assistant-pick { border-color: var(--gold); }
.gx-mkt .tm-assistant-pick {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.2rem 0.8rem;
	border-radius: 0 0 0.7rem 0.7rem;
	background: var(--gold);
	color: #3a2400;
	font: 700 0.8rem var(--f-head);
	white-space: nowrap;
}
.gx-market .ftr-market-panel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 1.1rem;
	margin: 0 0 1.25rem;
	padding: 1.2rem;
	border-radius: 1.4rem;
	background: rgba(255, 184, 28, 0.06);
	border: 2px solid rgba(255, 184, 28, 0.45);
}
.gx-market .ftr-market-panel > :not(.tm-listing) { grid-column: 1 / -1; }
.gx-market .ftr-market-panel .tm-listing { margin: 0; }
.gx-market .ftr-title { font: 700 1.4rem var(--f-head); text-transform: uppercase; color: var(--gold2); }
.gx-market .ftr-text { font-size: 1rem; color: var(--soft); }
.gx-market .ftr-market-pick-label, .gx-market .ftr-market-alt-title { font: 600 0.9rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.gx-market .ftr-market-all { justify-self: start; padding: 0.6rem 1.1rem; border-radius: 0.8rem; background: var(--navy); border: 2px solid var(--line); font: 700 1rem var(--f-head); text-transform: uppercase; color: var(--cyan); }
.gx-market .tm-coach-bubble { border-radius: 1.1rem; background: var(--navy2); border: 2px solid var(--gold); font-size: 1rem; }
.gx-market-mine { padding: 1.25rem; }
.gx-market-sell { display: flex; align-items: flex-start; justify-content: center; padding-top: 2rem; }
.gx-market-sell .tm-sell-card { width: min(100%, 40rem); }
.gx-market-sell .tm-sell-label { display: block; font: 600 1rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.5rem; }
.gx-market-sell select, .gx-market-sell input[type="number"] { width: 100%; height: 3.4rem; font-size: 1.15rem !important; }
.gx-market-sell .tm-fee-info { border-radius: 0.9rem !important; font-size: 1rem !important; padding: 0.8rem 1rem !important; }
.gx-mkt-grid > .tm-coach-bubble { align-self: start; margin: 0; position: relative; }
.gx-train-col .tr2-player-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; }

/* ============================================================
   PAGE: LEAGUE (league.php)
   ============================================================ */
.gx-league-select { width: auto; min-width: 12rem; height: 3.4rem; font: 700 1.2rem var(--f-head) !important; letter-spacing: 0.04em; }
/* Two tabs (lgTab in league.tpl): League = schedule + standings, Player Stats = stats alone.
   Phones switch the same groups through the side strip, so these rules skip .has-mtabs. */
.gx-league-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.gx-league-grid:not(.has-mtabs) > .gx-league-stats { display: none; }
.gx-league-grid.is-stats:not(.has-mtabs) > .gx-league-games,
.gx-league-grid.is-stats:not(.has-mtabs) > .gx-league-table { display: none; }
.gx-league-grid.is-stats:not(.has-mtabs) > .gx-league-stats { display: flex; grid-column: 1 / -1; width: 100%; max-width: 64rem; justify-self: center; }
.gx-page.has-mtabs .gx-league-tabs { display: none; }
.gx-md-nav { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.gx-md-nav .lg-nav-btn[style*="none"] { visibility: hidden; display: inline-flex !important; }
.lg-matchday-label { font: 700 1.2rem var(--f-head); text-transform: uppercase; color: #fff; white-space: nowrap; }
.gx-league .lg-games-list { display: flex; flex-direction: column; gap: 0.5rem; }
.gx-league .lg-game-div-header { font: 600 0.9rem var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.2rem 0.1rem; background: none; border: none; }
.gx-league .lg-game-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
	border-left-width: 0.3rem;
	font-size: 1rem;
}
.gx-league .lg-game-row--div1 { border-left-color: var(--pos-PG); }
.gx-league .lg-game-row--div2 { border-left-color: var(--pos-SF); }
.gx-league .lg-game-row--live { border-color: var(--gold); box-shadow: 0 0 1rem rgba(255, 184, 28, 0.25); }
.gx-league .lg-game-teams { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.gx-league .lg-game-team { font: 600 1rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-league .lg-game-team:first-child { text-align: right; }
.gx-league .lg-game-team--own { color: var(--gold2); font-weight: 700; }
.gx-league .lg-game-vs { font: 600 0.8rem var(--f-head); color: var(--muted); }
.gx-league .lg-game-result {
	min-width: 5.5rem;
	justify-content: center;
	padding: 0.35rem 0.6rem;
	border-radius: 0.7rem;
	background: var(--navy2);
	border: 2px solid var(--line);
	font: 700 1.15rem var(--f-head);
}
.gx-league .lg-game-result:hover { border-color: var(--gold); color: #fff; }
.gx-league .lg-draw-countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin: auto 0;
	padding: 2rem 1rem;
	border-radius: 1.25rem;
	background: rgba(63, 216, 255, 0.06);
	border: 2px solid rgba(63, 216, 255, 0.3);
}
.gx-league .lg-draw-countdown[style*="none"] { display: none !important; }
.gx-league .lg-draw-countdown > .gx-i { width: 3rem; height: 3rem; color: var(--cyan); }
.gx-league .lg-draw-label { font: 600 1.1rem var(--f-body); color: var(--soft); }
.gx-league .lg-draw-timer { font: 700 4rem/1 var(--f-head); color: var(--gold2); letter-spacing: 0.04em; }

.gx-league .lg-card { margin: 0 0 1.25rem; padding: 0; background: none; border: none; box-shadow: none; }
.gx-league .lg-card[style*="none"], .gx-league .lg-divisions[style*="none"], .gx-league .lg-legend[style*="none"] { display: none !important; }
.gx-league .lg-divisions { display: flex; flex-direction: column; gap: 0; }
.gx-league .lg-card-head { font: 700 1.5rem var(--f-head); text-transform: uppercase; color: var(--gold); padding: 0 0 0.6rem; background: none; border: none; }
.gx-league .lg-card-head--div1 { color: var(--pos-PG); }
.gx-league .lg-card-head--div2 { color: var(--pos-SF); }
.gx-league .lg-standing-header,
.gx-league .lg-standing-row {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr) 3rem 3rem 4rem 3.5rem;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
}
.gx-league .lg-standing-header { font: 600 0.85rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line); background: none; margin-bottom: 0.4rem; }
.gx-league .lg-standing-row { margin-bottom: 0.35rem; border-radius: 0.85rem; background: var(--navy); border: none; font: 600 1rem var(--f-body); }
.gx-league .lg-standing-row--playoff { box-shadow: inset 0.25rem 0 0 var(--green); }
.gx-league .lg-standing-row--relegation { box-shadow: inset 0.25rem 0 0 var(--red); }
.gx-league .lg-standing-row--own { background: rgba(255, 184, 28, 0.12); outline: 2px solid var(--gold); }
.gx-league .lg-standing-rank { font: 700 1.1rem var(--f-head); }
.gx-league .lg-standing-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-league .lg-standing-w, .gx-league .lg-standing-l, .gx-league .lg-standing-diff, .gx-league .lg-standing-pts { text-align: center; }
.gx-league .lg-standing-pts { font: 700 1.25rem var(--f-head); color: var(--gold2); }
.gx-league .lg-legend { display: flex; gap: 1.5rem; padding-top: 0.75rem; font-size: 0.95rem; color: var(--muted); border: none; }
.gx-league .lg-legend-dot { width: 0.9rem; height: 0.9rem; border-radius: 0.25rem; }
.gx-league .lg-legend-dot--playoff { background: var(--green); }
.gx-league .lg-legend-dot--relegation { background: var(--red); }

.gx-seg--sm > * { padding: 0.55rem 0.3rem; font-size: 1rem; border-radius: 0.75rem; }
.gx-league .lg-stat-cats { margin-bottom: 1rem; flex-shrink: 0; }
.gx-league .lg-stat-header,
.gx-league .lg-stat-row {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 3.5rem 3.5rem;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.8rem;
}
.gx-league .lg-stat-header { font: 600 0.85rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line); flex-shrink: 0; background: none; }
.gx-league .lg-stat-list { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.5rem; }
.gx-league .lg-stat-list[style*="none"] { display: none !important; }
.gx-league .lg-stat-row { border-radius: 0.85rem; background: var(--navy); border: none; }
.gx-league .lg-stat-row:nth-child(-n+3) .lg-stat-rank { color: var(--gold2); }
.gx-league .lg-stat-rank { font: 700 1.15rem var(--f-head); text-align: center; color: var(--muted); }
.gx-league .lg-stat-who { display: flex; flex-direction: column; min-width: 0; }
.gx-league .lg-stat-name { font: 700 1rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-league .lg-stat-team { font: 500 0.82rem var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-league .lg-stat-val { font: 700 1.3rem var(--f-head); color: var(--gold2); text-align: right; }
.gx-league .lg-stat-avg { font: 600 1rem var(--f-body); color: var(--soft); text-align: right; }
.gx-league .lg-standing-row { padding-top: 0.38rem; padding-bottom: 0.38rem; margin-bottom: 0.28rem; }
.gx-league .lg-card { margin-bottom: 0.9rem; }
.gx-league .lg-card-head { font-size: 1.3rem; padding-bottom: 0.4rem; }

/* ============================================================
   PAGE: STAFF (staff.php)
   ============================================================ */
.gx-staff-grid { grid-template-columns: 34rem minmax(0, 1fr); }
.gx-staff .ps-msg { margin: 0 0 0.75rem; font: 600 1rem var(--f-body); }
.gx-staff .ps-msg:empty { display: none; }
.gx-staff .ps-card-body { padding: 0; display: flex !important; flex-direction: column; gap: 0.8rem; }
.gx-staff .ps-staff-item { padding: 0; border: none; }
.gx-staff .ps-staff-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 1.2rem;
	background: var(--navy);
	border: 2px solid var(--line);
}
.gx-staff .ps-staff-photo,
.gx-staff .ps-auction-photo {
	width: 5rem;
	height: 5rem;
	flex-shrink: 0;
	border-radius: 1rem;
	object-fit: cover;
	background: linear-gradient(180deg, #3b4e94, #1c2a55);
	border: 0.18rem solid rgba(255, 255, 255, 0.25);
}
.gx-staff .ps-stars { gap: 0.15rem; margin-bottom: 0.3rem; align-items: center; font-size: 0.85rem; color: var(--soft); }
.gx-staff .ps-star { width: 1.15rem; height: 1.15rem; }
.gx-staff .ps-staff-name,
.gx-staff .ps-auction-name { font: 700 1.15rem var(--f-body); color: #fff; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.gx-staff .ps-staff-name .usage { font: 600 0.9rem var(--f-body); color: var(--cyan); }
.gx-staff .staff-tip-btn { color: var(--cyan); background: none; border: none; display: inline-flex; }
.gx-staff .staff-tip-btn svg { width: 1rem; height: 1rem; }
.gx-staff .ps-staff-actions { margin-top: 0.5rem; }
.gx-staff .ps-staff-actions[style*="none"] { display: none !important; }
.gx-staff .ps-btn-extend {
	padding: 0.45rem 0.9rem;
	border-radius: 0.7rem;
	border: none;
	font: 700 0.95rem var(--f-head);
	text-transform: uppercase;
	color: #04263a;
	background: linear-gradient(180deg, #8eeaff, var(--cyan));
	box-shadow: 0 0.2rem 0 #1784a3;
}
.gx-staff .ps-filter { display: flex; gap: 0.6rem; margin: 0 0 0 auto; padding: 0; background: none; border: none; }
.gx-staff .ps-select { height: 2.9rem; min-width: 11rem; font-size: 1rem !important; }
.gx-staff-auctions { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; padding: 0.2rem; align-content: start; }
.gx-staff .ps-auction-item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem;
	border-radius: 1.3rem;
	background: linear-gradient(180deg, var(--panel2), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.35);
}
.gx-staff .ps-auction-top { display: flex; align-items: center; gap: 0.9rem; margin: 0; }
.gx-staff .ps-auction-details { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.gx-staff .ps-detail-row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.8rem;
	background: var(--navy);
	border: none;
	min-width: 0;
}
.gx-staff .ps-detail-label { font: 600 0.72rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-staff .ps-detail-value { font: 700 1.05rem var(--f-head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-staff .staff-bid-timer { color: var(--cyan); }
.gx-staff .staff-bid-timer--hot { color: var(--red); }
.gx-staff .ps-link { color: var(--soft); }
/* Bid amount gets the full card width; Bid / Autobid share the row below */
.gx-staff .ps-bid-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; background: none; border: none; }
.gx-staff .ps-bid-input { flex: 1 1 100%; min-width: 0; height: 3.2rem; font: 700 1.3rem var(--f-head) !important; padding: 0 1rem !important; }
.gx-staff .ps-bid-btns { flex: 1 1 100%; display: flex; gap: 0.45rem; }
.gx-staff .ps-bid-btns > button { flex: 1 1 0; min-width: 0; }
.gx-staff .ps-btn-bid,
.gx-staff .ps-btn-autobid {
	height: 2.8rem;
	padding: 0 1rem;
	border-radius: 0.8rem;
	border: none;
	font: 700 1rem var(--f-head);
	text-transform: uppercase;
	cursor: pointer;
}
.gx-staff .ps-btn-bid { color: #3a2400; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0.22rem 0 var(--gold3); }
.gx-staff .ps-btn-autobid { color: #04263a; background: linear-gradient(180deg, #8eeaff, var(--cyan)); box-shadow: 0 0.22rem 0 #1784a3; }
.gx-staff .ps-btn-autobid[style*="none"] { display: none !important; }
body.gx-app .staff-tip-popup { border-radius: var(--r3); background: linear-gradient(180deg, var(--panel), var(--navy2)); border: 2px solid var(--line2); padding: 1.5rem; width: min(92 * var(--vw), 30rem); }
body.gx-app .staff-tip-title { font: 700 1.4rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .staff-tip-text { font-size: 1.05rem; line-height: 1.45; }
body.gx-app .staff-tip-close { border-radius: 0.8rem; font: 700 1rem var(--f-head); text-transform: uppercase; }
.gx-staff-slot .ps-staff-row { border-style: dashed; background: rgba(13, 22, 48, 0.5); }
.gx-staff-slot .ps-staff-photo { filter: grayscale(1) brightness(0.6); }
.gx-staff-slot .gx-staff-hire { margin-top: 0.5rem; }

/* ============================================================
   PAGE: FRIENDLIES (friendlies.php)
   ============================================================ */
.gx-fr-arrange { gap: 1rem; overflow: hidden; }
.gx-fr-arrange > * { position: relative; z-index: 1; }
.gx-friendlies .fr-msg { font: 600 1.05rem var(--f-body); margin: 0; }
.gx-friendlies .fr-msg:empty { display: none; }
.gx-fr-form { flex: 1; display: flex; flex-direction: column; gap: 1.2rem; }
.gx-fr-form select { width: 100%; height: 3.4rem; font-size: 1.15rem !important; }
.gx-fr-vs { flex: 1; display: grid; place-items: center; min-height: 6rem; }
.gx-fr-ball {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff3e0;
	background: radial-gradient(circle at 35% 30%, #ffa04a, #e2601a 60%, #a83c08);
	box-shadow: 0 0.6rem 0 #7a2b05, 0 1.2rem 3rem rgba(255, 122, 42, 0.4);
	animation: gxBounce 2.4s ease-in-out infinite;
}
.gx-fr-ball .gx-i { width: 5.5rem; height: 5.5rem; }
@keyframes gxBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8rem); } }
.gx-fr-reqlist { display: flex; flex-direction: column; gap: 0.6rem; }
.gx-fr-reqlist[style*="none"] { display: none !important; }
.gx-fr-reqlist:not([style*="none"]) + .gx-fr-noreq { display: none; }
.gx-friendlies .fr-req-item,
.gx-friendlies .fr-match-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 1.1rem;
	background: var(--navy);
	border: 2px solid transparent;
	margin: 0;
}
.gx-friendlies .fr-match-item:hover { border-color: var(--line2); }
.gx-friendlies .fr-req-top, .gx-friendlies .fr-req-detail, .gx-friendlies .fr-match-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.gx-friendlies .fr-req-name { font: 700 1.15rem var(--f-body); }
.gx-friendlies .fr-req-rank { font: 700 1rem var(--f-head); color: var(--muted); margin-left: 0.4rem; }
.gx-friendlies .fr-req-badge { padding: 0.2rem 0.6rem; border-radius: 0.5rem; font: 600 0.8rem var(--f-head); text-transform: uppercase; letter-spacing: 0.06em; }
.gx-friendlies .fr-req-meta { font-size: 0.95rem; color: var(--soft); }
.gx-friendlies .fr-req-actions { display: flex; gap: 0.5rem; }
.gx-friendlies .fr-btn-accept, .gx-friendlies .fr-btn-reject {
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 0.85rem;
	display: grid;
	place-items: center;
	font: 700 1.3rem var(--f-head);
}
.gx-friendlies .fr-btn-accept { background: linear-gradient(180deg, #8ff5b7, var(--green)); color: #062c17; box-shadow: 0 0.22rem 0 #1d8a4c; }
.gx-friendlies .fr-btn-reject { background: linear-gradient(180deg, #ff8b97, var(--red)); color: #fff; box-shadow: 0 0.22rem 0 #a3202f; }
.gx-friendlies .fr-match-players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.gx-friendlies .fr-match-player { font: 600 1.05rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-friendlies .fr-match-player:first-child { text-align: right; }
.gx-friendlies .fr-match-vs { font: 600 0.8rem var(--f-head); color: var(--muted); }
.gx-friendlies .fr-match-score { font: 700 1.5rem var(--f-head); color: var(--gold2); }
.gx-friendlies .fr-match-week { font-size: 0.85rem; color: var(--muted); }
/* Upcoming friendlies sit above the results; a click opens the match tactics */
.gx-fr-matches > .gx-panel { min-height: 0; }
.gx-fr-upcoming { flex: 0 1 auto; max-height: 55%; }
.gx-fr-recent { flex: 1 1 0; }
.gx-friendlies .fr-upcoming-item { border-left: 0.3rem solid var(--gold); }
.gx-friendlies .fr-upcoming-item:hover { border-color: var(--gold); }
.gx-friendlies .fr-upcoming-action { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 0.7rem; background: rgba(255, 184, 28, 0.15); color: var(--gold2); font: 700 0.85rem var(--f-head); text-transform: uppercase; letter-spacing: 0.06em; }
.gx-friendlies .fr-upcoming-action:empty { display: none; }
.gx-friendlies .fr-upcoming-action .gx-i { width: 1rem; height: 1rem; }
.gx-friendlies .fr-empty { color: var(--muted); font-size: 1rem; padding: 0.6rem 0; }

/* ============================================================
   PAGE: FINANCES (account_overview.php)
   ============================================================ */
.gx-finance-grid { grid-template-columns: 36rem minmax(0, 1fr) minmax(0, 1fr); }
.gx-fin-hero { gap: 1.25rem; flex-shrink: 0; overflow: hidden; }
.gx-fin-hero > * { position: relative; z-index: 1; }
.gx-fin-balance { font-size: 4.6rem; }
.gx-fin-hero .gx-stat-val { font-size: 1.45rem; }
.gx-fin-chart { flex: 1; }
.gx-fin-legend { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.gx-fin-legend i { width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; display: inline-block; margin-left: 0.5rem; }
.gx-fin-days { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem; }
.gx-fin-day { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-height: 0; }
.gx-fin-day span { font: 600 0.85rem var(--f-head); text-transform: uppercase; color: var(--muted); }
.gx-fin-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 0.25rem; padding: 0.4rem; border-radius: 0.8rem; background: var(--navy); }
.gx-fin-bars i { width: 40%; min-height: 2px; border-radius: 0.35rem 0.35rem 0.15rem 0.15rem; }
.gx-fin-in { background: linear-gradient(180deg, #8ff5b7, var(--green)); }
.gx-fin-out { background: linear-gradient(180deg, #ff8b97, var(--red)); }
.gx-fin-ico { width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; display: grid; place-items: center; }
.gx-fin-ico--in { background: rgba(75, 227, 138, 0.15); color: var(--green); }
.gx-fin-ico--out { background: rgba(255, 90, 106, 0.15); color: var(--red); }
.gx-fin-cats { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; flex-shrink: 0; }
.gx-fin-cats:empty { display: none; }
.gx-fin-cat .gx-label { font-size: 0.95rem; margin-bottom: 0.3rem; }
.gx-finance .kt-tx-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.7rem 1rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: none;
	margin: 0;
}
.gx-finance .kt-tx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.gx-finance .kt-tx-week { font: 600 0.8rem var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gx-finance .kt-tx-amount { font: 700 1.3rem var(--f-head); }
.gx-finance .kt-tx-plus { color: var(--green); }
.gx-finance .kt-tx-minus { color: var(--red); }
.gx-finance .kt-tx-reason { font: 600 1rem var(--f-body); color: #fff; }

/* ============================================================
   PAGE: FAN & SPONSOR SATISFACTION (satisfaction.php)
   ============================================================ */
.gx-sat-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
.gx-sat { align-items: center; text-align: center; }
.gx-sat .gx-panel-head { width: 100%; }
.gx-satisfaction .sat-info { margin-left: auto; position: relative; }
.gx-satisfaction .sat-info summary {
	list-style: none;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(63, 216, 255, 0.15);
	color: var(--cyan);
	font: 700 1rem var(--f-head);
	cursor: pointer;
}
.gx-satisfaction .sat-info summary::-webkit-details-marker { display: none; }
.gx-satisfaction .sat-info-text {
	position: absolute;
	right: 0;
	top: 2.4rem;
	z-index: 5;
	width: 22rem;
	padding: 1rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid var(--line2);
	font: 500 0.95rem/1.4 var(--f-body);
	color: var(--soft);
	text-align: left;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
}
.gx-gauge {
	--c: var(--cyan);
	flex: 1;
	width: min(100%, 20rem);
	max-height: 20rem;
	aspect-ratio: 1;
	margin: 1rem auto;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255, 255, 255, 0.08) 0);
	box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.35);
	position: relative;
}
.gx-gauge--big { --c: var(--gold); width: min(100%, 26rem); max-height: 26rem; }
.gx-gauge-in {
	width: 78%;
	height: 78%;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 30%, var(--panel2), var(--navy));
	box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.5);
}
.gx-gauge-in b { font: 700 5rem/1 var(--f-head); color: #fff; }
.gx-gauge--big .gx-gauge-in b { font-size: 7rem; color: var(--gold2); }
.gx-gauge-in span { font: 600 1rem var(--f-head); color: var(--muted); letter-spacing: 0.1em; }
.sat-card--good .gx-gauge, .gx-sat.sat-card--good .gx-gauge:not(.gx-gauge--big) { --c: var(--green); }
.gx-sat.sat-card--bad .gx-gauge:not(.gx-gauge--big) { --c: var(--red); }
.gx-sat-ctx { display: flex; align-items: center; gap: 0.5rem; font: 600 1.1rem var(--f-body); color: var(--soft); }
.gx-sat-ctx b { color: #fff; }
.gx-sat-ctx .gx-i { width: 2rem; height: 2rem; color: var(--pink); }
.gx-sat-payout { align-items: center; justify-content: center; text-align: center; gap: 1rem; overflow: hidden; }
.gx-sat-payout > * { position: relative; z-index: 1; }
.gx-sat-payout .gx-panel-head { position: absolute; top: 1.6rem; left: 1.85rem; right: 1.85rem; }
.gx-sat-coin {
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 60%, var(--gold3));
	color: #5a3a00;
	box-shadow: 0 0.6rem 0 #7a4c00, 0 1.2rem 3rem rgba(255, 184, 28, 0.4);
	animation: gxBounce 2.4s ease-in-out infinite;
}
.gx-sat-coin .gx-i { width: 6rem; height: 6rem; }
.gx-sat-payval { font-size: 4.4rem; }
.gx-sat.sat-card--high .gx-gauge:not(.gx-gauge--big) { --c: var(--green); }
.gx-sat.sat-card--medium .gx-gauge:not(.gx-gauge--big) { --c: var(--gold); }
.gx-sat.sat-card--low .gx-gauge { --c: var(--red); }
.gx-sat { justify-content: center; gap: 0.5rem; } .gx-sat .gx-panel-head { position: absolute; top: 1.6rem; left: 1.85rem; right: 1.85rem; } .gx-gauge { flex: none; }

/* ============================================================
   PAGE: DRAFT BOARD (draft.php)
   ============================================================ */
.gx-draft-hero { gap: 1rem; flex-shrink: 0; margin: 0; overflow: hidden; }
.gx-draft-hero > * { position: relative; z-index: 1; }
.gx-draft-date { font-size: 3.6rem; color: var(--gold2); }
.gx-draft .draft-info-btn { align-self: flex-start; padding: 0.55rem 1rem; border-radius: 0.8rem; color: var(--soft); }
.gx-draft .draft-info-box { margin: 0; padding: 1rem; border-radius: 1rem; background: rgba(13, 22, 48, 0.8); border: 2px solid var(--line); font: 500 0.95rem/1.45 var(--f-body); color: var(--soft); max-height: 16rem; overflow-y: auto; }
.gx-draft-actions { gap: 0.9rem; margin: 0; flex: 1; }
.gx-check { display: flex; align-items: center; gap: 0.6rem; font: 600 1.05rem var(--f-body); color: var(--soft); cursor: pointer; }
.gx-check input { width: 1.4rem; height: 1.4rem; accent-color: var(--gold); }
.gx-draft .draft-bulk-count { margin-left: 0.4rem; background: rgba(4, 38, 58, 0.25); color: #04263a; }
.gx-draft-legend { margin-top: auto; display: flex; gap: 1rem; font: 600 0.9rem var(--f-head); color: var(--muted); }
.gx-draft-legend span { display: flex; align-items: center; gap: 0.35rem; }
.gx-draft-legend i { width: 1rem; height: 1rem; border-radius: 0.3rem; background: var(--line); border: none !important; }
.gx-draft-legend i.draft-scout-1 { background: var(--pos-PG); }
.gx-draft-legend i.draft-scout-2 { background: var(--gold); }
.gx-draft-legend i.draft-scout-3 { background: var(--green); }
.gx-draft .draft-container { padding: 1.25rem; border-radius: var(--r3); }
.gx-draft .draft-header { display: none; }
.gx-draft .draft-list { overflow: visible; }
.gx-draft-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; padding: 0.2rem; }
.gx-draft .draft-row {
	--sc: var(--line2);
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 1rem 0.8rem 0.75rem;
	border-radius: 1.3rem;
	background: linear-gradient(180deg, var(--panel2), var(--navy2));
	border: 2px solid var(--sc) !important;
	box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.35);
	cursor: pointer;
	text-align: center;
	transition: transform 0.15s;
}
.gx-draft .draft-row:hover { transform: translateY(-0.2rem); background: linear-gradient(180deg, var(--panel2), var(--navy2)); }
.gx-draft .draft-row.draft-scout-1 { --sc: var(--pos-PG); }
.gx-draft .draft-row.draft-scout-2 { --sc: var(--gold); }
.gx-draft .draft-row.draft-scout-3 { --sc: var(--green); }
.gx-draft .draft-row.draft-drag-over { box-shadow: 0 0 0 0.25rem var(--gold); }
.gx-draft .draft-col { width: auto !important; padding: 0; border: none; }
.gx-draft .draft-col-check { position: absolute; top: 0.7rem; right: 0.7rem; }
.gx-draft .draft-col-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--gold); }
.gx-draft .draft-col-rank {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	min-width: 2.2rem;
	height: 2.2rem;
	border-radius: 0.7rem;
	display: grid;
	place-items: center;
	background: var(--navy);
	border: 2px solid var(--sc);
	font: 700 1.1rem var(--f-head);
	color: #fff;
}
.gx-draft-silhouette {
	position: relative;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 35%, #3b4e94, #16224a);
	color: rgba(255, 255, 255, 0.35);
	border: 0.2rem solid var(--sc);
	margin-bottom: 1.1rem;
}
.gx-draft-silhouette > .gx-i { width: 3.2rem; height: 3.2rem; }
.gx-draft-scout { position: absolute; bottom: -1.3rem; display: flex; gap: 0.3rem; }
.gx-draft-scout i { width: 1.4rem; height: 0.6rem; border-radius: 0.3rem; background: var(--navy); border: 1px solid var(--line2); }
.draft-scout-1 .gx-draft-scout i:nth-child(-n+1),
.draft-scout-2 .gx-draft-scout i:nth-child(-n+2),
.draft-scout-3 .gx-draft-scout i:nth-child(-n+3) { background: var(--sc); border-color: var(--sc); }
.gx-draft .draft-col-name { margin-top: 0.3rem; font: 700 1.05rem/1.2 var(--f-body) !important; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gx-draft-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; width: 100%; }
.gx-draft .draft-col-skill,
.gx-draft .draft-col-potential {
	padding: 0.35rem 0 0.25rem !important;
	border-radius: 0.7rem;
	background: var(--navy);
	font: 700 1.5rem/1 var(--f-head) !important;
	text-align: center;
}
.gx-draft .draft-col-skill::before,
.gx-draft .draft-col-potential::before {
	content: "SKILL";
	display: block;
	margin-bottom: 0.2rem;
	font: 600 0.65rem var(--f-head);
	letter-spacing: 0.1em;
	color: var(--muted);
}
.gx-draft .draft-col-potential::before { content: "POT"; }
.gx-draft .draft-col-arrows { display: flex !important; gap: 0.4rem; width: 100% !important; }
.gx-draft .draft-arrow { flex: 1; height: 1.9rem; border-radius: 0.6rem; background: var(--navy); border: 2px solid var(--line); color: var(--soft); font-size: 0.75rem; cursor: pointer; }
.gx-draft .draft-arrow:hover { border-color: var(--gold); color: var(--gold); }
body.gx-app .draft-tooltip-inner {
	width: min(92 * var(--vw), 34rem);
	max-height: calc(85 * var(--vh));
	overflow-y: auto;
	padding: 1.5rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	font-size: 1rem;
}
body.gx-app .draft-tt-btn { border-radius: 1rem; padding: 0.8rem 1.2rem; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; font: 700 1.1rem var(--f-head); text-transform: uppercase; box-shadow: 0 0.3rem 0 var(--gold3); border: none; }
body.gx-app .draft-tt-stats { font-size: 1rem; }
body.gx-app .draft-tt-stats td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.gx-draft .draft-col-arrows { flex-direction: row !important; }
.gx-draft-hero.draft-topbar { display: flex; flex-direction: column; align-items: stretch; margin: 0; }
.gx-draft-hero .draft-date { font-size: 3.6rem; color: var(--gold2); }
.gx-draft .draft-bulk-bar { display: flex; flex-direction: column; align-items: stretch; }

/* ============================================================
   PAGE: MENTORING (mentoring.php)
   ============================================================ */
.gx-mentoring .mn-pane { display: flex !important; }
.gx-mentoring .gx-tile-ico { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: grid; place-items: center; background: var(--c); color: #fff; }
.gx-mn-set { margin-bottom: 1rem; flex-shrink: 0; }
.gx-mn-set select { width: 100%; }
.gx-mentoring .mn-search-row,
.gx-mentoring .mn-player-row:not(.mn-player-header) {
	display: grid;
	align-items: center;
	gap: 0.8rem;
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	background: var(--navy);
	border: none;
	margin: 0;
}
.gx-mentoring .mn-search-row { grid-template-columns: minmax(0, 1fr) auto; }
.gx-mentoring .mn-player-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 9rem; }
.gx-mentoring .mn-player-header { padding: 0 1rem 0.6rem; background: none; }
.gx-mentoring .mn-player { display: flex; align-items: center; gap: 0.6rem; font: 600 1.05rem var(--f-body); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-mentoring .mn-btn-msg { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: grid; place-items: center; background: linear-gradient(180deg, #8eeaff, var(--cyan)); color: #04263a; box-shadow: 0 0.2rem 0 #1784a3; }
.gx-mentoring .mn-status { font: 700 0.9rem var(--f-head); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; }

/* ============================================================
   PAGE: SUPPORTER (supporter.php)
   ============================================================ */
.gx-sup-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); max-width: 110rem; width: 100%; margin: 0 auto; }
.gx-sup-buy, .gx-sup-free { align-items: center; text-align: center; gap: 1.1rem; overflow: hidden; }
.gx-sup-buy > *, .gx-sup-free > * { position: relative; z-index: 1; }
.gx-sup-crown {
	width: 7rem;
	height: 7rem;
	flex-shrink: 0;
	border-radius: 2rem;
	display: grid;
	place-items: center;
	color: #5a3a00;
	background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 60%, var(--gold3));
	box-shadow: 0 0.5rem 0 #7a4c00, 0 1rem 2.5rem rgba(255, 184, 28, 0.4);
}
.gx-sup-crown .gx-i { width: 4.2rem; height: 4.2rem; }
.gx-sup-crown--cyan { color: #04263a; background: radial-gradient(circle at 35% 30%, #b8f3ff, var(--cyan) 60%, #1784a3); box-shadow: 0 0.5rem 0 #0d5d75, 0 1rem 2.5rem rgba(63, 216, 255, 0.35); }
.gx-supporter .gx-panel-title { font-size: 2.6rem; }
.gx-supporter .sp-supporter-info[style*="none"] { display: none !important; }
.gx-sup-features { flex: 1; min-height: 0; width: 100%; text-align: left; font: 500 1.1rem/1.5 var(--f-body); color: var(--soft); }
.gx-sup-features ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; margin-top: 1rem; }
.gx-sup-features li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem; background: rgba(13, 22, 48, 0.6); font-weight: 600; color: #fff; list-style: none; }
.gx-sup-features li::before { content: "✓"; color: var(--green); font-weight: 800; }
.gx-supporter .sp-btn-buy[style*="none"] { display: none !important; }
.gx-supporter .sp-desc { font: 500 1.15rem/1.5 var(--f-body); color: var(--soft); flex: 1; }

/* ============================================================
   PAGE: INSTANT RANKING (rankingInstant.php)
   ============================================================ */
.gx-rank-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.gx-rank-side > .gx-rank-matches { flex: 1 1 0; min-height: 0; }
.gx-rank-list .ri-info-btn { flex-shrink: 0; }
/* Compact: value left, bar + countdown right, start button below — leaves room for the matches */
.gx-rank-energy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5rem 1.4rem; flex-shrink: 0; overflow: hidden; margin: 0; }
.gx-rank-energy > .gx-panel-kicker,
.gx-rank-energy > .gx-btn { grid-column: 1 / -1; }
.gx-rank-energy > .ri-energy-value { grid-row: span 2; font-size: 4.4rem; }
.gx-rank-energy > .gx-btn { margin-top: 0.4rem; }
.gx-rank-energy > * { position: relative; z-index: 1; }
.gx-rank-energy .ri-energy-meta { margin: 0; }
.gx-rank-energy .ri-countdown-timer { font: 700 1.5rem var(--f-head); color: var(--cyan); }
.gx-ranking .ri-nav { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.gx-ranking .ri-nav-btn {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.8rem;
	display: grid;
	place-items: center;
	background: var(--navy);
	border: 2px solid var(--line);
	font: 700 1.4rem var(--f-head);
	color: var(--soft);
}
.gx-ranking .ri-nav-btn-disabled { opacity: 0.35; }
.gx-ranking .ri-page-status { font: 700 1.05rem var(--f-head); color: #fff; }
.gx-ranking .ri-player {
	display: grid;
	grid-template-columns: 4.2rem auto minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem;
	padding: 0.65rem 1rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
	margin: 0;
}
.gx-ranking .ri-player:hover { border-color: var(--line2); }
.gx-ranking .ri-pos {
	height: 2.4rem;
	border-radius: 0.7rem;
	display: grid;
	place-items: center;
	background: var(--navy2);
	font: 700 1.15rem var(--f-head);
	color: var(--soft);
}
.gx-ranking .ri-color-top1 .ri-pos { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; }
.gx-ranking .ri-color-bonus .ri-pos { background: linear-gradient(180deg, #ffffff, #c9d3ea); color: #18213d; }
.gx-ranking .ri-color-top1 { border-color: rgba(255, 184, 28, 0.55); }
.gx-ranking .ri-color-banned { opacity: 0.45; }
.gx-ranking .ri-player:has(.rk-highlight) { border-color: var(--green); background: rgba(75, 227, 138, 0.08); }
.gx-ranking .ri-player-info { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; min-width: 0; }
.gx-ranking .ri-player-name { font: 700 1.05rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-ranking .rk-highlight { color: var(--green); }
.gx-ranking .ri-player-pts { font: 700 1.15rem var(--f-head); color: var(--gold2); white-space: nowrap; }
.gx-ranking .ri-match {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	gap: 0.15rem 0.8rem;
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	background: var(--navy);
	margin: 0;
}
.gx-ranking .ri-match-players { font: 600 1rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-ranking .ri-match-result { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 1.4rem var(--f-head); }
.gx-ranking .ri-match-meta { font-size: 0.85rem; color: var(--muted); }
body.gx-app .lm-reward-overlay { backdrop-filter: blur(6px); }
body.gx-app .lm-reward-popup { border-radius: var(--r3); background: linear-gradient(180deg, var(--panel), var(--navy2)); border: 2px solid var(--gold); padding: 2rem; width: min(92 * var(--vw), 32rem); font-size: 1.05rem; }
body.gx-app .lm-reward-title { font: 700 1.8rem var(--f-head); text-transform: uppercase; color: var(--gold); }
body.gx-app .lm-reward-link { border-radius: 1rem; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; font: 700 1.2rem var(--f-head); text-transform: uppercase; box-shadow: 0 0.3rem 0 var(--gold3); border: none; padding: 0.9rem 1.5rem; }

/* ============================================================
   PAGE: MAILBOX (mailbox.php)
   ============================================================ */
.gx-mailbox .mb-msg-row { display: flex; align-items: stretch; gap: 0.5rem; }
.gx-mailbox .mb-msg {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.8rem 1rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
	border-left: 0.3rem solid var(--line);
}
.gx-mailbox .mb-msg:hover { border-color: var(--line2); }
.gx-mailbox .mb-msg.mb-unread { border-left-color: var(--gold); background: rgba(255, 184, 28, 0.06); }
.gx-mailbox .mb-msg-subject { font: 700 1.05rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-mailbox .mb-msg-sender { font-size: 0.9rem; color: var(--muted); }
.gx-mailbox .mb-msg-del { align-self: center; width: max(3.4rem, 34px); height: max(3.4rem, 34px); border-radius: 0.9rem; display: grid; place-items: center; background: rgba(255, 90, 106, 0.2); border: 2px solid rgba(255, 90, 106, 0.45); color: var(--red); transition: background 0.15s, color 0.15s; }
.gx-mailbox .mb-msg-del:hover { background: var(--red); border-color: var(--red); color: #fff; }
.gx-mailbox .mb-msg-del .gx-i { width: max(1.4rem, 17px); height: max(1.4rem, 17px); }
.gx-mailbox .mb-status { margin-bottom: 1rem; flex-shrink: 0; }
.gx-mailbox .mb-status[style*="none"] { display: none !important; }
.gx-mb-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.gx-mb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.6rem; }
.gx-mb-row select, .gx-mb-row input { width: 100%; }
.gx-mb-form textarea { flex: 1; min-height: 8rem; resize: none; width: 100%; }
.gx-mb-form .mb-btn { align-self: flex-end; margin-top: 0.8rem; }
.gx-mb-read { gap: 1.2rem; max-width: 90rem; width: 100%; margin: 0 auto; }
.gx-mb-meta { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0.8rem; flex-shrink: 0; }
.gx-mailbox .mb-detail-body { padding: 1.4rem; border-radius: 1.1rem; background: var(--navy); font: 500 max(1.5rem, 15px)/1.55 var(--f-body); color: #e6eaff; white-space: pre-wrap; }
.gx-mailbox .mb-detail-body * { font-size: inherit; }
.gx-mb-actions { justify-content: flex-end; flex-shrink: 0; }

/* ============================================================
   PAGE: FRIENDS (friendlist.php)
   ============================================================ */
.gx-friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; padding: 0.2rem; }
.gx-friend-grid:has(.gx-friend) + .gx-friend-empty { display: none; }
.gx-friend {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.1rem;
	border-radius: 1.3rem;
	background: linear-gradient(180deg, var(--panel2), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 0.75rem 1.6rem rgba(0, 0, 0, 0.35);
	margin: 0;
}
.gx-friend .fl-player-link { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.gx-friend-crest {
	position: relative;
	width: 4rem;
	height: 4rem;
	flex-shrink: 0;
	border-radius: 1.1rem;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 35% 30%, #4a5fae, #1c2a55);
	color: rgba(255, 255, 255, 0.6);
}
.gx-friend-crest > .gx-i { width: 2.2rem; height: 2.2rem; }
.gx-friend-crest .flag { position: absolute; bottom: -0.3rem; right: -0.4rem; transform: scale(1.1); }
.gx-friend .fl-player-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gx-friend .fl-player-name { font: 700 1.2rem var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-friend .fl-player-time { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.gx-friend .fl-player-time .gx-i { width: 1rem; height: 1rem; }
.gx-friend-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }

/* ============================================================
   PAGE: SETTINGS (settings.php)
   ============================================================ */
.gx-settings-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: min-content;
	align-content: start;
	overflow-y: auto;
	padding: 0.2rem 0.3rem 1rem 0;
}
.gx-settings .st-status { grid-column: 1 / -1; margin: 0; }
.gx-settings .st-status[style*="none"],
.gx-settings .st-card[style*="none"] { display: none !important; }
.gx-settings .st-card { margin: 0; padding: 1.3rem 1.4rem; }
.gx-settings .st-card-head { padding: 0; border: none; background: none; }
.gx-settings .st-card-body { padding: 0; }
.gx-set-ico { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: grid; place-items: center; background: rgba(63, 216, 255, 0.14); color: var(--cyan); flex-shrink: 0; }
.gx-set-ico--red { background: rgba(255, 90, 106, 0.14); color: var(--red); }
.gx-settings form { display: flex; flex-direction: column; gap: 0.7rem; }
.gx-settings input, .gx-settings select { width: 100%; margin: 0 !important; }
.gx-settings .st-btn { align-self: flex-start; margin: 0; }
.gx-settings .st-actions { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem 1.4rem; }

/* ============================================================
   PAGE: GUIDE (guide.php)
   ============================================================ */
.gx-guide-toc { display: flex; flex-direction: column; gap: 0.4rem; }
.gx-guide-toc button {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: 2px solid transparent;
	color: var(--soft);
	font: 600 1rem var(--f-body);
	text-align: left;
	cursor: pointer;
}
.gx-guide-toc button:hover { border-color: var(--line2); color: #fff; }
.gx-guide-toc button.is-active { border-color: var(--gold); background: rgba(255, 184, 28, 0.1); color: #fff; }
.gx-guide-num { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.6rem; display: grid; place-items: center; background: var(--panel2); font: 700 0.95rem var(--f-head); color: var(--gold2); }
.gx-guide-toc button.is-active .gx-guide-num { background: var(--gold); color: #3a2400; }
.gx-guide-page { padding: 2rem 2.5rem 1.5rem; }
.gx-guide .gu-card-body { font: 500 1.15rem/1.65 var(--f-body); color: #e1e6fb; padding-right: 1rem; }
.gx-guide .gu-card-body h1, .gx-guide .gu-card-body h2 { font: 700 2.4rem/1.1 var(--f-head); text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.gx-guide .gu-card-body h3 { font: 700 1.4rem var(--f-head); text-transform: uppercase; color: var(--cyan); margin: 1.5rem 0 0.5rem; }
.gx-guide .gu-card-body p { margin: 0 0 1rem; max-width: 75rem; }
.gx-guide .gu-card-body ul, .gx-guide .gu-card-body ol { margin: 0 0 1rem 1.5rem; }
.gx-guide .gu-card-body li { list-style: disc; margin-bottom: 0.35rem; }
.gx-guide .gu-card-body ol li { list-style: decimal; }
.gx-guide .gu-card-body strong { color: #fff; }
.gx-guide .gu-card-body hr { display: none; }
.gx-guide .gu-card-body table { border-collapse: separate; border-spacing: 0 0.35rem; margin: 0.5rem 0 1.2rem; }
.gx-guide .gu-card-body td, .gx-guide .gu-card-body th { padding: 0.5rem 0.9rem; background: var(--navy); text-align: left; }
.gx-guide .gu-card-body th { background: none; font: 600 0.9rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gx-guide-nav { justify-content: space-between; padding-top: 1rem; border-top: 2px solid var(--line); margin-top: 1rem; flex-shrink: 0; }
.gx-guide-count { font: 700 1.2rem var(--f-head); color: var(--muted); }

/* ============================================================
   PAGE: CALENDAR (calendar.php) — week board
   ============================================================ */
.gx-week { display: flex; }
.gx-week > .cal-week { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; }
.gx-calendar .cal-day {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 0;
	padding: 1.1rem 0.9rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	margin: 0;
	overflow-y: auto;
}
.gx-calendar .cal-day:first-child { border-color: var(--gold); box-shadow: 0 0 0 0.25rem rgba(168, 106, 0, 0.27); }
.gx-calendar .cal-day-header { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0 0 0.7rem; border-bottom: 2px solid var(--line); background: none; }
.gx-calendar .cal-day-name { font: 600 1rem var(--f-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gx-calendar .cal-day-num { font: 700 3rem/1 var(--f-head); color: #fff; }
.gx-calendar .cal-day:first-child .cal-day-num { color: var(--gold2); }
.gx-calendar .cal-day-events { display: flex; flex-direction: column; gap: 0.5rem; padding: 0; border: none; }
.gx-calendar .cal-event {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.65rem 0.75rem;
	border-radius: 0.9rem;
	background: var(--navy);
	border: none;
	border-left: 0.3rem solid var(--cyan);
	margin: 0;
}
.gx-calendar .cal-event[class*="cal-event--"] { border-left-color: inherit; }
.gx-calendar .cal-event-time { font: 700 1.1rem var(--f-head); }
.gx-calendar .cal-event-title { font: 600 0.92rem/1.3 var(--f-body); color: #fff; }

.gx-mailbox #mailbox_list:not(:has(.mb-msg-row))::before {
	content: "✉";
	margin: auto;
	font-size: 4rem;
	color: var(--line2);
}

/* ============================================================
   PAGE: TEAM CUP (team_cup.php)
   ============================================================ */
.gx-tc-msg { flex-shrink: 0; margin: 0 0 0.75rem; font: 600 1.05rem var(--f-body); }
.gx-tc-msg:empty { display: none; }
.gx-tc-body {
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	overflow: hidden;
}
/* Body + vertical tab strip at the right edge */
.gx-tc-wrap { flex: 1; min-height: 0; display: flex; gap: var(--gap); }
.gx-tc-wrap > .gx-body { flex: 1; min-width: 0; }
.gx-tc-tabs {
	flex-shrink: 0;
	width: 8.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 1.3rem;
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	overflow-y: auto;
	scrollbar-width: none;
}
.gx-tc-tabs > a {
	flex: 0 1 7rem;
	min-height: 4.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.5rem 0.3rem;
	border-radius: 1rem;
	background: var(--navy);
	border: 2px solid transparent;
	color: var(--soft);
	font: 600 0.9rem/1.1 var(--f-head);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	transition: color 0.15s, border-color 0.15s;
}
.gx-tc-tabs > a:hover { color: #fff; border-color: var(--line2); }
.gx-tc-tabs > a .gx-i { width: 2rem; height: 2rem; }
.gx-tc-tabs > a.is-active {
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	box-shadow: 0 0.25rem 0 var(--gold3), 0 0 1.2rem rgba(255, 184, 28, 0.35);
}
.gx-tc--liga .gx-tc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.gx-tc--liga .gx-league-games:only-child { grid-column: 1 / -1; }
.gx-tc--liga .lg-standing-header, .gx-tc--liga .lg-standing-row { padding: 0.5rem 0.9rem; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-tc-tabs { width: 7rem; padding: 0.45rem; }
	.gx-tc-tabs > a { font-size: 0.82rem; }
	.gx-tc-tabs > a .gx-i { width: 1.9rem; height: 1.9rem; }
}
.gx-tc .fr-card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 1.5rem 1.6rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.38);
}
.gx-tc .fr-card-head { font: 700 1.5rem var(--f-head); text-transform: uppercase; color: var(--gold); padding: 0 0 0.9rem; background: none; border: none; }
.gx-tc .fr-card-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.gx-tc .fr-req-item { padding: 0.8rem 1rem; border-radius: 1rem; background: var(--navy); margin: 0; border: none; }
.gx-tc .fr-req-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.gx-tc .fr-req-name { font: 700 1.1rem var(--f-body); }
.gx-tc .fr-req-rank { color: var(--muted); font-size: 0.95rem; }
.gx-tc .fr-btn-send,
.gx-tc .fr-btn-accept {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.2rem;
	border-radius: 0.9rem;
	border: none;
	font: 700 1.05rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	box-shadow: 0 0.25rem 0 var(--gold3);
	cursor: pointer;
}
.gx-tc .fr-btn-reject, .gx-tc .tc-btn-danger {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1rem;
	border-radius: 0.9rem;
	font: 700 0.95rem var(--f-head);
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(180deg, #ff8b97, var(--red));
	box-shadow: 0 0.22rem 0 #a3202f;
}
.gx-tc .fr-form-grid { display: flex; flex-direction: column; gap: 1rem; }
.gx-tc .fr-select { width: 100%; height: 3.2rem; }
.gx-tc .fr-label { font: 600 1rem var(--f-body); color: var(--soft); display: flex; align-items: center; gap: 0.5rem; }
.gx-tc .fr-empty { color: var(--muted); font-size: 1.05rem; padding: 1rem 0; }
.gx-tc .lg-standing-header, .gx-tc .lg-standing-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 3rem 3rem 4rem 3.5rem; gap: 0.4rem; align-items: center; padding: 0.5rem 0.9rem; }
.gx-tc .lg-standing-row { border-radius: 0.85rem; background: var(--navy); margin-bottom: 0.3rem; border: none; }
.gx-tc .lg-standing-header { font: 600 0.85rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gx-tc .lg-standing-pts { font: 700 1.2rem var(--f-head); color: var(--gold2); text-align: center; }
/* Lineup tab reuses the tactics court */
.gx-tc--lineup .gx-tc-body { display: flex; }
.gx-tc-lineup { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 28rem 24rem; gap: var(--gap); }
/* Chat tab */
.gx-tc .tcc-msg { max-width: 70%; }
.gx-tc .tcc-msg-bubble { padding: 0.7rem 1rem; border-radius: 1rem; background: var(--navy); font-size: 1.05rem; }
.gx-tc .tcc-msg--mine .tcc-msg-bubble { background: rgba(255, 184, 28, 0.15); }
.gx-tc .tcc-msg-meta { font-size: 0.85rem; color: var(--muted); }

/* ============================================================
   PAGE: LIVE MATCH (livematch.php)
   ============================================================ */
/* Main column: compact top bar (scoreboard | playback controls) above a large landscape court.
   Right column: coaching (only while coaching a live match) above the box score.
   Phones: court / coaching / box score become strip tabs. */
.gx-live-grid {
	/* The box score needs ~30rem; every rem more goes to the court */
	grid-template-columns: minmax(0, 1fr) 34rem;
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "main coach" "main side";
	padding: 0;
	overflow: visible;
}
.gx-live-grid:has(> .gx-live-coach[style*="none"]) { grid-template-areas: "main side" "main side"; }
.gx-live-main { grid-area: main; display: flex; flex-direction: column; gap: 1rem; min-height: 0; min-width: 0; }
.gx-live-coach { grid-area: coach; }
.gx-live-side { grid-area: side; }

.gx-live-top { flex-shrink: 0; display: flex; align-items: stretch; gap: 1rem; min-width: 0; }
.gx-live .lm-scoreboard {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, #121d40, #0a1126);
	border: 0.2rem solid var(--gold);
	box-shadow: 0 0 0 0.25rem rgba(168, 106, 0, 0.22), 0 0.8rem 2rem rgba(0, 0, 0, 0.4);
}
.gx-live .lmb-team { min-width: 0; }
.gx-live .lmb-team-pill { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.55rem 0.9rem; border-radius: 1rem; background: var(--navy2); border: 2px solid var(--line); }
.gx-live .lmb-team--home .lmb-team-pill { justify-content: flex-end; }
.gx-live .lmb-team--mine .lmb-team-pill { border-color: var(--gold); }
.gx-live .lmb-team-name { min-width: 0; font: 700 1.35rem var(--f-head); text-transform: uppercase; letter-spacing: 0.03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-live .lmb-team-color { flex-shrink: 0; width: 1rem; height: 1rem; border-radius: 0.3rem; }
.gx-live .lmb-center { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.gx-live .lmb-score {
	padding: 0.2rem 1.2rem;
	border-radius: 0.9rem;
	background: #05080f;
	border: 2px solid #23305e;
	font: 700 3rem/1 var(--f-head);
	color: var(--gold2);
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.gx-live .lm-score-surface {
	padding: 0.15rem 0.8rem;
	border-radius: 0.6rem;
	background: #05080f;
	border: 2px solid #23305e;
	font: 700 1.05rem var(--f-head);
	color: var(--red);
	letter-spacing: 0.08em;
	white-space: nowrap;
	margin: 0;
}
/* Playback controls: own container next to the score; hidden when it has nothing to show */
.gx-live-controls {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.7rem 1rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line);
}
.gx-live-controls:not(:has(> :not([style*="display:none"]):not([style*="display: none"]))) { display: none; }
.gx-live .lm-speed-bar { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; background: none; border: none; }
.gx-live .lm-speed-bar[style*="none"] { display: none !important; }
.gx-live .lm-speed-label { font: 600 0.8rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: auto; padding-right: 0.5rem; }
.gx-live .lm-speed-btn { padding: 0.35rem 0.7rem; border-radius: 0.6rem; background: var(--navy); border: 2px solid var(--line); font: 700 0.95rem var(--f-head); color: var(--soft); }
.gx-live .lm-speed-btn.lm-speed-btn--active { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #3a2400; border-color: transparent; }
.gx-live .lm-skip-row, .gx-live .lm-replay-row, .gx-live .lm-speed-note { margin: 0; }
.gx-live .lm-skip-row[style*="none"], .gx-live .lm-replay-row[style*="none"] { display: none !important; }
.gx-live .lm-end-btn, .gx-live .lm-replay-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.8rem;
	background: var(--navy);
	border: 2px solid var(--line);
	color: var(--soft);
	font: 700 0.95rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Coaching panel */
.gx-live-coach { gap: 0.8rem; padding: 1.1rem 1.2rem; }
.gx-live-coach[style*="none"] { display: none !important; }
.gx-live-coach .gx-panel-head { margin: 0; }
.gx-live-coach .lmco-actions { display: flex; gap: 0.6rem; }
.gx-live-coach .lmco-open { flex: 1 1 0; padding: 0.8rem 1rem; border-radius: 0.9rem; font: 700 1rem var(--f-head); text-transform: uppercase; letter-spacing: 0.04em; }
.gx-live-coach .lmco-summary { flex: 0 0 auto; }

.gx-live-court { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-start; }
.gx-live .lm2d { margin: 0; border-radius: var(--r3); border: 0.3rem solid #23305e; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.5); }
.gx-live-side { padding: 1.2rem; gap: 1rem; overflow-y: auto; }
.gx-live-side .lm-tabs { margin: 0; flex-shrink: 0; }
.gx-live-side .lm-tab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gx-live .lmc-stats-card { margin: 0; padding: 0; border: none; background: none; box-shadow: none; overflow-x: auto; flex-shrink: 0; }
.gx-live .lmc-stats-table { font-size: 0.95rem; border-collapse: separate; border-spacing: 0 0.3rem; }
.gx-live .lmc-stats-table th { font: 600 0.75rem var(--f-head); letter-spacing: 0.08em; color: var(--muted); background: none !important; padding: 0.3rem 0.25rem; border: none !important; }
.gx-live .lmc-st-groups th:not(:empty) { color: var(--gold); border: none !important; }
.gx-live .lmc-stats-table td { padding: 0.5rem 0.25rem; background: var(--navy) !important; border: none; font-weight: 600; }
.gx-live .lmc-stats-table td:first-child { border-radius: 0.7rem 0 0 0.7rem; }
.gx-live .lmc-stats-table td:last-child { border-radius: 0 0.7rem 0.7rem 0; }
.gx-live .lmc-st-name { font: 700 0.95rem var(--f-body) !important; color: #fff; }
.gx-live-ratings { display: flex; flex-direction: column; gap: 1rem; }
.gx-live-ratings > * { margin: 0 !important; border-radius: 1.2rem !important; background: var(--navy) !important; border: 2px solid var(--line) !important; }
.gx-live-court { flex-direction: column; align-items: center; gap: 1rem; overflow-y: auto; }
.gx-live-ratings--main { display: none; width: 100%; display: none; }
.gx-live-court:has(#matchCourt[style*="none"]) .gx-live-ratings--main { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; }
.gx-live-grid:has(#matchCourt[style*="none"]) .gx-live-ratings--side { display: none; }
.gx-live-ratings--main > * { padding: 1.4rem !important; font-size: 1.1rem; }
/* Phones: the court is limited by height, so scoreboard and controls shrink to one slim row */
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-live-main, .gx-live-top { gap: 0.6rem; }
	.gx-live .lm-scoreboard { padding: 0.3rem 0.5rem; gap: 0.5rem; border-width: 2px; box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.4); }
	.gx-live .lmb-team-pill { padding: 0.25rem 0.6rem; border-radius: 0.7rem; }
	.gx-live .lmb-team-name { font-size: 1.15rem; }
	.gx-live .lmb-center { flex-direction: row; gap: 0.4rem; }
	.gx-live .lmb-score { padding: 0.1rem 0.7rem; border-radius: 0.7rem; font-size: 2rem; }
	.gx-live .lm-score-surface { padding: 0.1rem 0.5rem; font-size: 0.9rem; }
	.gx-live-controls { flex-direction: row; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; }
	.gx-live .lm-speed-label, .gx-live .lm-end-btn span { display: none; }
	.gx-live .lm-speed-btn { padding: 0.3rem 0.6rem; }
	.gx-live .lm-end-btn, .gx-live .lm-replay-btn { width: auto; padding: 0.35rem 0.7rem; }
	/* Moved into the header row and the side strip by livematch.tpl */
	.gx-live.is-top-in-head .gx-title { display: none; }
	.gx-head > .gx-live-top { flex: 1 1 auto; }
	.gx-mtabs > .gx-live-controls { flex-direction: column; align-items: stretch; margin-top: auto; padding: 0; background: none; border: none; }
	.gx-mtabs > .gx-live-controls .lm-speed-bar { flex-direction: column; align-items: stretch; gap: 0.3rem; }
	.gx-mtabs > .gx-live-controls button { flex: none; min-height: 0; max-height: none; width: 100%; padding: 0.45rem 0; font: 700 1.05rem var(--f-head); }
}
.gx-vs { font-size: 0.55em; color: var(--muted); text-shadow: none; vertical-align: middle; margin: 0 0.3em; }
.gx-mtac .imp-prep-bar { display: flex; flex-direction: column; gap: 0.8rem; flex-shrink: 0; margin: 0; }
.gx-mtac .imp-prep-bar[style*="none"] { display: none !important; }
.gx-mtac .imp-prep-countdown { display: flex; justify-content: space-between; align-items: baseline; }
.gx-mtac .imp-countdown-lbl { font: 600 1rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gx-mtac .imp-countdown-timer { font: 700 2.6rem/1 var(--f-head); color: var(--gold2); }

/* ============================================================
   PAGE: LANDING (index.php, guests)
   ============================================================ */
body.gx-guest:has(.gx-lp) { overflow: hidden; height: 100%; }
body.gx-guest:has(.gx-lp) #header { display: none; }
body.gx-guest:has(.gx-lp) .page-shell { height: 100vh; height: 100dvh; overflow: hidden; }
.gx-lp {
	position: relative;
	flex: 1;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 2rem;
	padding: 2rem 4rem;
	max-width: none !important;
	min-height: 0;
	height: 100%;
	background:
		radial-gradient(ellipse 60% 70% at 78% 55%, rgba(255, 184, 28, 0.16), transparent 70%),
		radial-gradient(circle at 20% 10%, rgba(63, 216, 255, 0.08), transparent 50%);
}
.gx-lp .lp-lang-top { position: absolute; top: 1.5rem; right: 2rem; z-index: 5; margin: 0; }
.gx-lp .lp-lang-top select { height: 2.8rem; padding: 0 0.9rem; border-radius: 0.85rem; background: var(--navy2); border: 2px solid var(--line); color: #fff; font: 600 1rem var(--f-body); }
.gx-lp-hero { padding: 0 !important; margin: 0 !important; background: none !important; text-align: left !important; }
.gx-lp-hero .lp-hero-inner { max-width: 46rem; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }
.gx-lp-logo {
	width: 6.5rem;
	height: 6.5rem;
	border-radius: 1.8rem;
	display: grid;
	place-items: center;
	color: #fff3e0;
	background: radial-gradient(circle at 35% 30%, #ffa04a, #e2601a 60%, #a83c08);
	box-shadow: 0 0.5rem 0 #7a2b05, 0 1rem 2.5rem rgba(255, 122, 42, 0.4);
}
.gx-lp-logo .gx-i { width: 4.2rem; height: 4.2rem; }
.gx-lp .lp-hero-badge { font-size: 1rem; padding: 0.35rem 0.9rem; border: none; margin: 0; }
.gx-lp .lp-hero-badge .gx-i { width: 1rem; height: 1rem; }
.gx-lp .lp-hero-title {
	margin: 0;
	font: 700 6rem/0.92 var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--gold);
}
.gx-lp .lp-hero-sub { margin: 0; font: 500 1.5rem/1.45 var(--f-body); color: var(--soft); max-width: 40rem; }
.gx-lp .lp-cta-box { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0; }
.gx-lp .lp-cta-box[style*="none"] { display: none !important; }
.gx-lp .lp-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.5rem; margin: 0.5rem 0 0; padding: 0; }
.gx-lp .lp-highlights li { display: flex; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 1rem; background: rgba(22, 34, 74, 0.7); border: 2px solid var(--line); font: 500 1rem/1.4 var(--f-body); color: #e1e6fb; list-style: none; }
.gx-lp .lp-highlights li::before { content: "★"; color: var(--gold); flex-shrink: 0; }
.gx-lp-show { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.gx-lp-court {
	position: absolute;
	inset: 8% 2% 8% 6%;
	border-radius: 2.5rem;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(255, 255, 255, 0.55) 14% 14.6%, transparent 14.6%),
		repeating-linear-gradient(90deg, #d79a5c 0 2.5rem, #cf9152 2.5rem 5rem);
	border: 0.4rem solid var(--gold);
	box-shadow: inset 0 0 6rem rgba(0, 0, 0, 0.55), 0 2rem 5rem rgba(0, 0, 0, 0.55);
	transform: perspective(70rem) rotateX(14deg);
	opacity: 0.9;
}
.gx-lp-fan { position: relative; width: 100%; height: 72%; display: flex; align-items: center; justify-content: center; }
.gx-lp-card {
	position: absolute;
	width: 15rem;
	aspect-ratio: 0.7;
	transition: transform 0.3s;
	animation: gxRise 0.6s ease-out both;
}
.gx-lp-card--0 { transform: translateX(-26rem) rotate(-14deg) translateY(2.5rem); animation-delay: 0.05s; }
.gx-lp-card--1 { transform: translateX(-13rem) rotate(-7deg) translateY(0.6rem); animation-delay: 0.12s; z-index: 2; }
.gx-lp-card--2 { transform: scale(1.18); z-index: 5; animation-delay: 0.2s; }
.gx-lp-card--3 { transform: translateX(13rem) rotate(7deg) translateY(0.6rem); animation-delay: 0.12s; z-index: 2; }
.gx-lp-card--4 { transform: translateX(26rem) rotate(14deg) translateY(2.5rem); animation-delay: 0.05s; }
.gx-lp-card--2::after {
	content: "";
	position: absolute;
	inset: -3rem;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 215, 102, 0.45), transparent 65%);
}
/* Auth panel: replaces the showcase while a form is open */
.gx-lp .lp-auth {
	display: none;
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	width: min(100%, 36rem);
	margin: 0;
	padding: 2.2rem;
	position: relative;
	z-index: 6;
}
.gx-lp .lp-auth:has(.lp-form-card[style*="block"]) { display: flex; }
.gx-lp:has(.lp-auth .lp-form-card[style*="block"]) .gx-lp-show { display: none; }
.gx-lp-close { position: absolute; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; }
.gx-lp .lp-form-card { width: 100%; margin: 0; padding: 0; background: none; border: none; box-shadow: none; }
.gx-lp .lp-form-head { font: 700 2.4rem var(--f-head); text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; }
.gx-lp .lp-form { display: flex; flex-direction: column; gap: 0.9rem; }
.gx-lp .lp-input, .gx-lp .lp-select { width: 100%; height: 3.6rem; padding: 0 1.1rem; border-radius: 1rem; background: var(--navy); border: 2px solid var(--line); color: #fff; font: 500 1.15rem var(--f-body); }
.gx-lp .lp-input:focus { border-color: var(--cyan); outline: none; }
.gx-lp .lp-field-label { font: 600 1rem var(--f-body); color: var(--soft); margin-bottom: 0.4rem; display: block; }
.gx-lp .lp-country-detected { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--soft); }
.gx-lp .lp-country-detected a { color: var(--cyan); }
.gx-lp .lp-switch { margin-top: 1rem; font-size: 1rem; color: var(--muted); text-align: center; }
.gx-lp .lp-switch a { color: var(--cyan); font-weight: 700; }
.gx-lp .lp-alert { border-radius: 1rem; font-size: 1rem; margin-bottom: 1rem; }
.gx-lp .lp-footer { position: absolute; bottom: 1.2rem; left: 4rem; display: flex; gap: 0.8rem; font-size: 0.95rem; color: var(--muted); margin: 0; padding: 0; }
.gx-lp .lp-footer a { color: var(--muted); }
/* Android app: hero hidden, registration card centered */
.gx-lp.lp--android { grid-template-columns: 1fr; }
.gx-lp.lp--android .lp-auth { grid-column: 1; display: flex; }

@keyframes gxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.gx-lp-card { animation-name: gxFadeIn; }
.gx-lp .lp-highlights { width: 100%; max-width: 46rem; }
.gx-lp .lp-hero-title { font-size: 5.2rem; }
.gx-lp-logo { width: 5.5rem; height: 5.5rem; }
.gx-lp-logo .gx-i { width: 3.6rem; height: 3.6rem; }
.gx-lp-hero .lp-hero-inner { gap: 1.1rem; }
.gx-lp .lp-highlights li { padding: 0.55rem 0.8rem; font-size: 0.95rem; }
.gx-lp .lp-highlights li:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.gx-app.gx-guest:has(.gx-lp) .page-shell { height: 100vh !important; height: 100dvh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
body.gx-app.gx-guest:has(.gx-lp) .page-shell > .gx-lp { flex: 1 1 auto; height: auto; }
body.gx-app.gx-guest:has(.gx-lp) .language-links { position: fixed; max-width: 55%; text-align: right; bottom: 0.6rem; right: 2rem; left: auto; z-index: 3; }
body.gx-app.gx-guest:has(.gx-lp) .language-links-footer { position: fixed; max-width: 55%; text-align: right; bottom: 0.6rem; right: 2rem; left: auto; z-index: 3; }

@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-lp { padding: 1rem 2rem; gap: 1rem; }
	.gx-lp-logo { width: 3.6rem; height: 3.6rem; border-radius: 1rem; }
	.gx-lp-logo .gx-i { width: 2.4rem; height: 2.4rem; }
	.gx-lp .lp-hero-title { font-size: 3.4rem; }
	.gx-lp .lp-hero-sub { font-size: 1.1rem; }
	.gx-lp-hero .lp-hero-inner { gap: 0.6rem; }
	.gx-lp .lp-highlights { display: none; }
	.gx-lp .gx-btn--xl { font-size: 1.6rem; padding: 0.9rem 1.4rem; }
	.gx-lp-card { width: 9.5rem; }
	.gx-lp-card--0 { transform: translateX(-16rem) rotate(-14deg) translateY(1.5rem); }
	.gx-lp-card--1 { transform: translateX(-8rem) rotate(-7deg) translateY(0.4rem); }
	.gx-lp-card--3 { transform: translateX(8rem) rotate(7deg) translateY(0.4rem); }
	.gx-lp-card--4 { transform: translateX(16rem) rotate(14deg) translateY(1.5rem); }
	.gx-lp .lp-footer { left: 2rem; bottom: 0.5rem; font-size: 0.8rem; }
	body.gx-app.gx-guest:has(.gx-lp) .language-links-footer { display: none; }
}
.gx-lp .lp-field { width: 100%; max-width: none; }

/* ============================================================
   GLOBAL POPUPS (rewards, onboarding prompts)
   ============================================================ */
body.gx-app .quest-reward-popup,
body.gx-app .sponsor-reward-popup,
body.gx-app .rankup-popup,
body.gx-app .onboarding-next-step__dialog {
	width: min(92 * var(--vw), 34rem);
	max-width: none;
	padding: 2.2rem;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 0.3rem solid var(--gold);
	box-shadow: 0 0 0 0.3rem rgba(168, 106, 0, 0.27), 0 2rem 5rem rgba(0, 0, 0, 0.6), 0 0 4rem rgba(255, 184, 28, 0.25);
	font-family: var(--f-body);
	font-size: 1.05rem;
	text-align: center;
}
body.gx-app .qr-icon svg { width: 4.5rem; height: 4.5rem; }
body.gx-app .sponsor-reward-icon, body.gx-app .rankup-icon { font-size: 4rem; }
body.gx-app .qr-title,
body.gx-app .sponsor-reward-title,
body.gx-app .rankup-title,
body.gx-app .onboarding-next-step__title {
	font: 700 2rem/1.1 var(--f-head);
	text-transform: uppercase;
	color: var(--gold);
}
body.gx-app .qr-sub, body.gx-app .rankup-sub, body.gx-app .sponsor-reward-text, body.gx-app .onboarding-next-step__body { font-size: 1.1rem; line-height: 1.45; color: var(--soft); }
body.gx-app .qr-balance, body.gx-app .rankup-balance { border-radius: 1rem; background: var(--navy); border: 2px solid var(--line); padding: 0.9rem 1rem; }
body.gx-app .qr-balance-value, body.gx-app .rankup-balance strong { font: 700 1.8rem var(--f-head); color: var(--gold2); }
body.gx-app .qr-claim-btn,
body.gx-app .sponsor-reward-link,
body.gx-app .onboarding-next-step__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.6rem;
	border-radius: 1.1rem;
	border: none;
	font: 700 1.3rem var(--f-head);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #3a2400;
	background: linear-gradient(180deg, var(--gold2), var(--gold));
	box-shadow: 0 0.35rem 0 var(--gold3), 0 0.75rem 1.75rem rgba(255, 184, 28, 0.3);
}
body.gx-app .sponsor-reward-link--secondary { background: var(--navy); color: var(--soft); border: 2px solid var(--line); box-shadow: none; }
body.gx-app .onboarding-next-step__later { font: 600 1rem var(--f-body); color: var(--muted); }
body.gx-app .rankup-list { border-radius: 1rem; border-color: var(--line); }
body.gx-app .rankup-row { font-size: 1rem; }
.gx-home-im #instantMatchStartButton { font-size: 1.9rem; white-space: normal; line-height: 1.1; text-align: center; padding: 1.1rem 1rem; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-fr-vs { display: none; }
	.gx-fr-form { gap: 0.8rem; }
	.gx-live-court:has(#matchCourt[style*="none"]) .gx-live-ratings--main { grid-template-columns: 1fr 1.3fr; font-size: 0.9rem; }
}


/* ============================================================
   ALWAYS LANDSCAPE: a touch device held upright gets the landscape
   stage rotated by 90deg, so there is no portrait layout at all.
   Axes are swapped, hence vw/vh trade places in the root size.
   ============================================================ */
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
	html { font-size: clamp(9px, min(0.8333dvh, 1.4815vw), 20px); overflow: hidden; }
	body.gx-app {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vh;
		width: 100dvh;
		height: 100vw;
		transform-origin: top left;
		transform: rotate(90deg) translateY(-100%);
		overflow: hidden;
	}
	body.gx-app .page-shell,
	body.gx-app #mainContent { height: 100vw !important; }
	/* Stage left = physical top (camera cutout), stage right = physical bottom (gesture bar).
	   The floors cover the cutout and rounded corners when the browser reports no inset. */
	:root {
		--sa-t: env(safe-area-inset-right, 0px);
		--sa-r: env(safe-area-inset-bottom, 0px);
		--sa-b: env(safe-area-inset-left, 0px);
		--sa-l: env(safe-area-inset-top, 0px);
		--vw: 1vh;
		--vh: 1vw;
	}
	/* Floors only for the old Android app (< 1.25), which does not pad the WebView itself */
	:root.gx-sa-floor {
		--sa-r: max(env(safe-area-inset-bottom, 0px), 24px);
		--sa-l: max(env(safe-area-inset-top, 0px), 28px);
	}
	@supports (height: 1dvh) { :root { --vw: 1dvh; } }
}
/* Separate rule: an unsupported :has() must not drop the rotated-height rule above. */
@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
	/* Beats body.gx-guest:has(.gx-lp) { height: 100% } and body:has(.lp) { overflow: auto !important }. */
	html body.gx-app.gx-app { height: 100vw !important; overflow: hidden !important; }
	body.gx-app.gx-guest:has(.gx-lp) .page-shell { height: 100vw !important; }
	.gx-lp.lp--android .lp-auth { zoom: 1.7; }
}
@media (orientation: portrait) and (max-width: 560px) and (pointer: coarse) {
	html { font-size: clamp(8px, min(1.2dvh, 2.55vw), 13px); }
}

/* Phones turned sideways by the OS: the camera cutout sits left or right depending on the turn,
   and the reported inset is often too small or missing, so both sides get the same floor.
   The gesture bar runs along the bottom edge. */
@media (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
	:root.gx-sa-floor {
		--sa-l: max(env(safe-area-inset-left, 0px), 28px);
		--sa-r: max(env(safe-area-inset-right, 0px), 28px);
		--sa-b: max(env(safe-area-inset-bottom, 0px), 20px);
	}
}
/* Android app >= 1.25 pads the WebView natively; env() may still report insets, so reserve nothing. */
:root.gx-sa-native { --sa-t: 0px; --sa-r: 0px; --sa-b: 0px; --sa-l: 0px; }

/* In-page select picker for the rotated stage (index.tpl); pixel floors because 1rem is ~7px here */
.gx-picker {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: grid;
	place-items: center;
	background: rgba(4, 8, 22, 0.6);
}
.gx-picker-list {
	width: min(92 * var(--vw), max(24rem, 280px));
	max-height: calc(85 * var(--vh));
	overflow-y: auto;
	padding: 6px;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--panel), var(--navy2));
	border: 2px solid var(--line2);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
}
.gx-picker-group {
	padding: 10px 12px 4px;
	font: 600 12px var(--f-head);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.gx-picker-opt {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--soft);
	font: 600 15px/1.25 var(--f-body);
	text-align: left;
}
.gx-picker-opt + .gx-picker-opt { margin-top: 2px; }
.gx-picker-opt.is-on { color: #3a2400; background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.gx-picker-opt:disabled { opacity: 0.4; }

/* ============================================================
   TACTICS COURT MECHANICS (positions, slots, overlays, tutorial)
   ============================================================ */
.ct-court { position: relative; }
.ct-positions { position: absolute; inset: 0; pointer-events: none; }
.ct-pos { position: absolute; display: flex; flex-direction: column; pointer-events: auto; transform: translateX(-50%); }
.ct-slot { position: relative; display: flex; align-items: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.ct-slot-player { display: flex; width: 100%; min-width: 0; }
.ct-slot-name, .ct-slot-skill { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-shot-bars { display: none; }
.ct-shot-bars--show { display: block; }
.ct-sb-row { display: flex; align-items: center; }
.ct-sb-usage { flex: none; display: flex; align-items: center; white-space: nowrap; color: #2a1a00; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.ct-sb-stack { display: flex; flex: 1; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.ct-sb-seg { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; color: rgba(0, 0, 0, 0.7); transition: width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1); }
.ct-sb-legend-pill { display: inline-flex; align-items: center; color: #2a1a00; background: linear-gradient(180deg, var(--gold2), var(--gold)); font-weight: 800; }
.ct-bench-player { display: flex; align-items: center; cursor: pointer; }
.ct-bench-player--hidden { display: none !important; }
.ct-bench-info { flex: 1; min-width: 0; }
.ct-bench-name { display: flex; align-items: center; min-width: 0; }
.ct-bench-name-link { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-bench-name-link:hover { color: var(--gold2); }
.ct-bench-meta { display: flex; color: var(--muted); margin-top: 0.15rem; }
.ct-bench-info-btn { flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
.ct-bench-pos { display: inline-block; vertical-align: middle; }

.ct-info-overlay,
.ct-picker-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(5, 9, 22, 0.7); backdrop-filter: blur(4px); }
.ct-picker-overlay { z-index: 999; }
.ct-info-overlay--show, .ct-picker-overlay--show { display: block; }
.ct-info-tooltip { display: none; position: fixed; top: 50%; left: 50%; z-index: 1101; transform: translate(-50%, -50%); max-height: calc(85 * var(--vh)); overflow-y: auto; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6); }
.ct-info-tooltip--show { display: block; }
.ct-info-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.ct-info-face { flex-shrink: 0; object-fit: contain; }
.ct-info-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ct-info-meta { color: var(--muted); }
.ct-info-close { width: 2.2rem; height: 2.2rem; flex-shrink: 0; margin-left: auto; border-radius: 50%; display: grid; place-items: center; background: rgba(63, 216, 255, 0.12); color: var(--cyan); }
.ct-info-section { margin-bottom: 0.9rem; }
.ct-info-section:last-child { margin-bottom: 0; }
.ct-info-row { display: flex; align-items: center; }
.ct-info-label { width: 8rem; flex-shrink: 0; font-weight: 600; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-info-bar { flex: 1; overflow: hidden; }
.ct-info-fill { height: 100%; border-radius: 0.3rem; transition: width 0.3s ease; }
.ct-info-val { width: 3rem; flex-shrink: 0; text-align: right; font: 700 1rem var(--f-head); color: var(--gold2); }
.ct-info-fill--positions { display: flex; background: transparent !important; }
.ct-rating-pos-segment { height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #17202a; font: 800 0.6rem var(--f-body); transition: width 0.3s ease; }
.tr-breakdown .ct-info-fill { background: linear-gradient(90deg, var(--cyan), #9eeaff); }

.ct-picker { display: none; position: fixed; z-index: 1000; flex-direction: column; overflow: hidden; }
.ct-picker--show { display: flex; }
.ct-picker-head { display: flex; align-items: center; justify-content: space-between; }
.ct-picker-close { display: grid; place-items: center; padding: 0.3rem; }
.ct-picker-body { flex: 1; overflow-y: auto; }
.ct-pick-item { display: flex; align-items: center; cursor: pointer; }
.ct-pick-current { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; }
.ct-pick-name { flex: 1; min-width: 0; }
.ct-pick-info-btn { display: flex; flex-shrink: 0; padding: 0.15rem; }

.ct-flash { position: fixed; left: 50%; z-index: 1200; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(-5rem); transition: transform 0.3s, opacity 0.3s; }
.ct-flash--show { opacity: 1; transform: translateX(-50%) translateY(0); animation: ctFlashFade 2s ease forwards; }
@keyframes ctFlashFade {
	0%, 55% { opacity: 1; transform: translateX(-50%) translateY(0); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-1.2rem); }
}

.tac-info-tooltip {
	position: fixed;
	z-index: 9999;
	padding: 0.8rem 2.2rem 0.8rem 1rem;
	border-radius: 1rem;
	background: var(--navy2);
	border: 2px solid var(--line2);
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
	color: #fff;
	font: 500 0.95rem/1.45 var(--f-body);
	overflow-wrap: anywhere;
}
.tac-info-tooltip-close { position: absolute; top: 0.3rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.tac-info-tooltip-close:hover { color: #fff; }
.tac-info-tooltip div + div { margin-top: 0.35rem; }

/* Lineup tutorial (first login) */
.ct-tut-hint { display: flex; align-items: center; animation: gxRise 0.35s ease-out; }
.ct-tut-hint-icon { flex-shrink: 0; display: grid; place-items: center; }
.ct-tut-hint-body { flex: 1; min-width: 0; }
.ct-tut-hint-close { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.ct-tut-hint-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ct-slot--tut-hint { animation: ctTutPulse 1.1s ease-in-out infinite; }
@keyframes ctTutPulse {
	0%, 100% { box-shadow: 0 0 0 0.2rem var(--gold), 0 0 1rem 0.2rem rgba(255, 184, 28, 0.45); transform: scale(1); }
	50% { box-shadow: 0 0 0 0.35rem var(--gold2), 0 0 2.4rem 0.9rem rgba(255, 184, 28, 0.7); transform: scale(1.04); }
}
/* Gold arrow left of the target starter slot, pointing at it (top is set by script) */
.ct-tut-arrow {
	display: none;
	position: absolute;
	right: calc(100% + 0.5rem);
	z-index: 5;
	width: 0;
	height: 0;
	margin-top: -1.3rem;
	border-top: 1.3rem solid transparent;
	border-bottom: 1.3rem solid transparent;
	border-left: 1.9rem solid var(--gold2);
	filter: drop-shadow(0 0 0.5rem rgba(255, 184, 28, 0.9));
	animation: ctTutNudge 0.8s ease-in-out infinite;
	pointer-events: none;
}
.ct-tut-arrow--show { display: block; }
@keyframes ctTutNudge { 0%, 100% { transform: translateX(-0.5rem); } 50% { transform: translateX(0.3rem); } }
/* Only the target position stays above the court dimming */
.gx-ct .ct-court.is-tut .ct-pos:not(.ct-pos--tut) { z-index: 0; }
.gx-ct .ct-court.is-tut .gx-ovr-card--court { z-index: 0; }
/* The hint itself glows so it is noticed */
.gx-ct .ct-tut-hint { border-width: 3px; animation: gxRise 0.35s ease-out, ctTutHintGlow 1.6s ease-in-out 0.35s infinite; }
@keyframes ctTutHintGlow {
	0%, 100% { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(255, 184, 28, 0.5); }
	50% { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.55), 0 0 1.6rem 0.3rem rgba(255, 184, 28, 0.55); }
}
.gx-ct .ct-tut-hint-text strong { color: var(--gold2); }
.gx-ct .ct-tut-hint--top { top: 1rem; bottom: auto; }
/* Player picker: the player the tutorial asks for */
body.gx-app .ct-pick-item.ct-pick-item--tut-highlight {
	position: relative;
	border: 3px solid var(--gold);
	background: linear-gradient(90deg, rgba(255, 184, 28, 0.3), rgba(255, 184, 28, 0.08));
	animation: ctPickTut 1s ease-in-out infinite;
}
body.gx-app .ct-pick-item--tut-highlight .ct-pick-name { color: var(--gold2); }
@keyframes ctPickTut {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0.7); transform: scale(1); }
	50% { box-shadow: 0 0 0 0.35rem rgba(255, 184, 28, 0.25), 0 0 1.6rem 0.4rem rgba(255, 184, 28, 0.55); transform: scale(1.02); }
}

/* Transfer market: guided first purchase (soft lock) */
.tm-tutorial-page #tmTabs,
.tm-tutorial-page .tm-filters,
.tm-tutorial-page .gx-market-filters { display: none !important; }
.tm-tutorial-page .gx-market-browse { grid-template-columns: minmax(0, 1fr); }
/* No navigation during the guided purchase: rail and HUD links are hidden, only the budget stays. */
body.gx-app.tm-tutorial-page { grid-template-columns: minmax(0, 1fr); }
body.gx-app.tm-tutorial-page #mainContent { grid-column: 1; }
.tm-tutorial-page .gx-rail,
.tm-tutorial-page .gx-hud > a:not([href^="account_overview"]) { display: none !important; }
.tm-tutorial-page .gx-hud a { pointer-events: none; }
.tm-tut-active .tm-listing:not(.tm-listing--gold) { display: none; }
.tm-tut-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(5, 9, 22, 0.55); pointer-events: none; animation: gxFadeIn 0.4s ease; }
.tm-tut-active .tm-listing--gold { position: relative; z-index: 95; }
.tm-tut-active .tm-listing--gold .tm-buy-btn { animation: tmBuyGlow 1.8s ease-in-out infinite; }
@keyframes tmBuyGlow { 0%, 100% { filter: brightness(1); box-shadow: 0 0.22rem 0 var(--gold3), 0 0 0.5rem rgba(255, 184, 28, 0.4); } 50% { filter: brightness(1.15); box-shadow: 0 0.22rem 0 var(--gold3), 0 0 1.4rem rgba(255, 184, 28, 0.7); } }
.tm-coach-bubble { position: relative; z-index: 95; display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; animation: gxRise 0.5s ease; }
.tm-coach-icon { flex-shrink: 0; font-size: 2rem; line-height: 1; }
.tm-coach-text { font: 500 1rem/1.5 var(--f-body); color: #fff; }
.tm-coach-text strong { color: var(--gold2); }

/* Centered tip dialogs (staff info, training tooltips) */
body.gx-app .staff-tip-overlay { background: rgba(5, 9, 22, 0.7); backdrop-filter: blur(4px); }
body.gx-app .staff-tip-popup { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.staff-tip-overlay--show, .staff-tip-popup--show { display: block; }
body.gx-app .tr2-overlay { position: fixed; inset: 0; z-index: 999; display: none; background: rgba(5, 9, 22, 0.7); backdrop-filter: blur(4px); }

/* ============================================================
   COMPARISON CARDS (match tactics + team ratings), tooltips, coach tips
   ============================================================ */
.imp-card { overflow: hidden; border-radius: 1.2rem; background: var(--navy); border: 2px solid var(--line); }
.imp-card-head { padding: 1rem 1.2rem 0.4rem; font: 600 0.95rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.lm-tactics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--line); }
.lm-tactics-team { padding: 0.9rem 1.2rem 1rem; }
.lm-tactics-team + .lm-tactics-team { border-left: 2px solid var(--line); }
.lm-tactics-team-name { margin-bottom: 0.5rem; font: 700 1rem var(--f-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-tactics-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.25rem 0; font-size: 0.95rem; }
.lm-tactics-row > span { color: var(--muted); }
.lm-tactics-row strong { color: #fff; text-align: right; }
.imp-ratings-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem 0.3rem; }
.imp-rh-side { flex: 0 0 5.5rem; font: 600 0.75rem var(--f-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-rh-side--opp { text-align: right; }
.imp-rh-cat { flex: 1; }
.imp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1.2rem; }
.imp-row--overall { margin-top: 0.3rem; padding-top: 0.7rem; padding-bottom: 0.9rem; border-top: 2px solid var(--line); }
.imp-val { flex: 0 0 2.6rem; text-align: center; font: 700 1.05rem var(--f-head); color: #fff; }
.imp-val--better { color: var(--green); }
.imp-row--overall .imp-val { font-size: 1.35rem; color: var(--gold2); }
.imp-cat { flex: 1; text-align: center; font: 600 0.8rem var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.imp-bar { flex: 0 0 4rem; height: 0.5rem; overflow: hidden; border-radius: 0.3rem; background: var(--navy2); }
.imp-bar--opp { transform: scaleX(-1); }
.imp-bar-fill { height: 100%; border-radius: 0.3rem; background: linear-gradient(90deg, #17a6d1, var(--cyan)); }
.imp-bar--opp .imp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--gold2)); }

/* Training skill tooltip */
.tr2-tooltip-head { display: flex; align-items: center; flex-shrink: 0; }
.tr2-tooltip-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tr2-tooltip-face { flex-shrink: 0; object-fit: contain; border-radius: 0.5rem; }
.tr2-tooltip-meta { font-size: 0.85rem; color: var(--muted); }
.tr2-tooltip-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(63, 216, 255, 0.12); color: var(--cyan); }
.tr2-tooltip-skills { flex: 1; overflow-y: auto; }
.tr2-tt-section { margin: 0.6rem 0 0.35rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--line); font: 600 0.85rem var(--f-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tr2-tt-section:first-child { margin-top: 0; }
.tr2-tt-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; }
.tr2-tt-label { width: 7.5rem; flex-shrink: 0; font: 600 0.85rem var(--f-body); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr2-tt-bar { flex: 1; height: 0.5rem; overflow: hidden; border-radius: 0.3rem; background: var(--navy); }
.tr2-tt-fill { height: 100%; border-radius: 0.3rem; transition: width 0.3s ease; }
.tr2-tt-val { width: 2.6rem; flex-shrink: 0; text-align: right; font: 700 1rem var(--f-head); color: #fff; }
.tr2-tt-potbar { margin-top: 0.4rem; }
.tr2-tt-potbar-head { display: flex; justify-content: space-between; margin-bottom: 0.25rem; font: 600 0.75rem var(--f-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tr2-tt-potbar-track { height: 0.4rem; overflow: hidden; border-radius: 0.25rem; background: var(--navy); }
.tr2-tt-potbar-fill { height: 100%; border-radius: 0.25rem; transition: width 0.4s ease; }

/* Coach speech bubbles */
.tm-coach-bubble,
.tr2-auto-assign-focus {
	position: relative;
	border-radius: 1rem;
	background: rgba(255, 184, 28, 0.1);
	border: 2px solid var(--gold);
	color: #fff1cf;
	font: 600 0.95rem/1.4 var(--f-body);
}
.tr2-auto-assign-focus { padding: 0.7rem 0.9rem; }
.tr2-auto-assign-focus[style*="none"] { display: none !important; }
.tm-coach-bubble::after,
.tr2-auto-assign-focus::after {
	content: "";
	position: absolute;
	left: 1.6rem;
	bottom: -0.55rem;
	width: 0.9rem;
	height: 0.9rem;
	background: #2a2a3a;
	border-right: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(45deg);
}
.gx-mkt-grid > .tm-coach-bubble::after { left: auto; right: -0.55rem; top: 1.6rem; bottom: auto; border-bottom: none; border-top: 2px solid var(--gold); }

/* Full-width form buttons where the action closes the card */
.gx-settings .st-btn { align-self: stretch; }
.gx-mb-form .mb-btn { align-self: stretch; }
.gx-sup-features li::before { content: "✓"; color: var(--green); font-weight: 800; }
.gx-lp .lp-input, .gx-lp .lp-field, .gx-lp .lp-manager-field { width: 100%; max-width: none; display: block; }
.gx-satisfaction .gx-sat .gx-panel-head { left: 1.2rem; right: 1.2rem; }
.gx-satisfaction .gx-panel-title { white-space: normal; }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-live-court { justify-content: center; }
}

/* ============================================================
   PHONES (landscape and auto-rotated): compact stage, page tabs as a
   strip at the right edge (thumb zone), two panels side by side.
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	html { font-size: clamp(7px, min(1.05vw, 2.3vh), 12px); }
	:root { --head-h: 4rem; --mtabs-w: 7rem; --pad: 1rem; --gap: 0.8rem; }
	.gx-head { gap: 0.7rem; }
	.gx-title { font-size: 2.1rem; }
	.gx-back { width: 2.8rem; height: 2.8rem; border-radius: 0.8rem; }
	.gx-head > .gx-tabs,
	.gx-head > nav.gx-tabs { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
	.gx-head > .gx-tabs > * { padding: 0.5rem 0.8rem; font-size: 1rem; min-width: 0; }
	.gx-page.has-mtabs { padding-right: calc(var(--mtabs-w) + var(--pad) + var(--sa-r)); }
	.gx-panel { padding: 1rem 1.1rem; border-radius: 1.2rem; }
	.gx-panel-title { font-size: 1.45rem; }
	.gx-panel-head { margin-bottom: 0.7rem; }

	.gx-mtabs {
		position: fixed;
		z-index: 105;
		top: calc(var(--head-h) + 0.2rem);
		bottom: calc(0.8rem + var(--sa-b));
		right: calc(0.6rem + var(--sa-r));
		width: var(--mtabs-w);
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.45rem;
		border-radius: 1.3rem;
		background: linear-gradient(180deg, var(--panel), var(--navy2));
		border: 2px solid var(--line2);
		box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
		overflow-y: auto;
		scrollbar-width: none;
	}
	.gx-mtabs button {
		flex: 1 1 0;
		max-height: 7.5rem;
		min-height: 4.6rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.35rem;
		padding: 0.5rem 0.3rem;
		border-radius: 1rem;
		background: var(--navy);
		border: 2px solid transparent;
		color: var(--soft);
		font: 600 0.82rem/1.1 var(--f-head);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-align: center;
		white-space: normal;
		box-shadow: none;
	}
	.gx-mtabs button .gx-i { width: 1.9rem; height: 1.9rem; }
	.gx-mtabs button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
	.gx-mtabs button.is-active {
		color: #3a2400;
		background: linear-gradient(180deg, var(--gold2), var(--gold));
		box-shadow: 0 0.25rem 0 var(--gold3), 0 0 1.2rem rgba(255, 184, 28, 0.35);
	}

	/* Content area for tabbed pages */
	.gx-body.has-mtabs { gap: var(--gap); }

	/* Page-specific phone fixes */
	.gx-train-board.lm-panel-active { gap: 0.7rem; }
	.gx-train-col { padding: 0.8rem; }
	.gx-train-count { font-size: 3.4rem; }
	.gx-sat-grid .gx-gauge { width: min(100%, 15rem); }
	.gx-gauge--big { width: min(100%, 17rem); }
	.gx-gauge-in b { font-size: 3.6rem; }
	.gx-gauge--big .gx-gauge-in b { font-size: 4.6rem; }
	.gx-draft-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
	.gx-mkt-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
	.gx-staff-auctions { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
	.gx-market-browse { grid-template-columns: 15rem minmax(0, 1fr); }
	.gx-market-filters .tm-filter-group { gap: 0.3rem; }
	.gx-market-filters .tm-filter-select { padding: 0 0.15rem 0 0.4rem !important; }
	.gx-lp .lp-hero-title { font-size: 3rem; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	:root { --mtabs-w: 7.6rem; }
	.gx-mtabs button { font-size: 0.78rem; letter-spacing: 0.02em; }
	.gx-mtabs button span { word-break: normal; overflow-wrap: normal; hyphens: auto; }
	/* Start tab: slim hero row on top, the progress list fills the rest */
	.gx-stack.gx-train-side.is-m-on { flex-direction: column; gap: 0.6rem; }
	.gx-train-side.is-m-on > .gx-train-hero { flex: 0 0 auto !important; }
	.gx-train-side.is-m-on > .gx-train-prog { flex: 1 1 0 !important; }
	.gx-train-hero { grid-template-columns: auto minmax(6rem, 1fr) auto; grid-template-areas: "count kicker start" "count pips start"; gap: 0.3rem 1rem; padding: 0.6rem 1rem; }
	.gx-train-hero .gx-panel-kicker { font-size: 0.85rem; }
	.gx-train-hero .gx-segbar i { height: 0.7rem; }
	.gx-train-hero .tr2-training-countdown { flex-direction: row; align-items: center; }
	.gx-train-hero #startTrainingBtn { width: auto; min-height: 0; padding: 7px 18px; font-size: 13.5px; }
	.gx-train-locked { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
	.gx-train-locked .gx-i { width: 1.4rem; height: 1.4rem; }
	.gx-train-prog { padding: 0.8rem 1rem; }
}
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.gx-stack.is-m-row { flex-direction: row; }
	.gx-stack.is-m-row > * { flex: 1 1 0 !important; min-width: 0; max-height: none !important; }
	.gx-friendlies .gx-body { gap: 0.7rem; }
	.gx-friendlies .fr-match-player { font-size: 12.5px; }
	.gx-friendlies .fr-match-week { font-size: 11px; }
	.gx-friendlies .fr-upcoming-action { font-size: 11px; padding: 3px 8px; }
	.gx-friendlies .fr-upcoming-action .gx-i { width: 13px; height: 13px; }
	.gx-fr-ball { display: none; }
}

/* ============================================================
   READABLE POPUPS ON PHONES: 1rem is only ~7px on a small phone held
   sideways, so dialogs, coach tips and tutorial hints get pixel floors.
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	body.gx-app .lm-reward-popup,
	body.gx-app .quest-reward-popup,
	body.gx-app .sponsor-reward-popup,
	body.gx-app .rankup-popup,
	body.gx-app .onboarding-next-step__dialog,
	body.gx-app .tr2-quest-hint-popup {
		width: min(92%, 400px);
		max-width: none;
		max-height: calc(100% - 16px);
		overflow-y: auto;
		padding: 14px 20px;
		font-size: 14px;
	}
	body.gx-app .lm-reward-icon,
	body.gx-app .rankup-icon,
	body.gx-app .sponsor-reward-icon,
	body.gx-app .tr2-quest-hint-icon { font-size: 28px; margin-bottom: 4px; }
	body.gx-app .qr-icon svg { width: 36px; height: 36px; }
	body.gx-app .lm-reward-title,
	body.gx-app .qr-title,
	body.gx-app .sponsor-reward-title,
	body.gx-app .rankup-title,
	body.gx-app .onboarding-next-step__title,
	body.gx-app .tr2-quest-hint-title,
	body.gx-app .staff-tip-title { font-size: 19px; line-height: 1.15; }
	body.gx-app .lm-reward-text,
	body.gx-app .qr-sub,
	body.gx-app .rankup-sub,
	body.gx-app .sponsor-reward-text,
	body.gx-app .onboarding-next-step__body,
	body.gx-app .tr2-quest-hint-text,
	body.gx-app .staff-tip-text { font-size: 14.5px; line-height: 1.45; }
	body.gx-app .lm-reward-link,
	body.gx-app .qr-claim-btn,
	body.gx-app .sponsor-reward-link,
	body.gx-app .onboarding-next-step__primary,
	body.gx-app .tr2-quest-hint-btn,
	body.gx-app .rankup-confirm-btn { min-height: 40px; padding: 9px 20px; font-size: 15px; }
	body.gx-app .lm-reward-close,
	body.gx-app .onboarding-next-step__later,
	body.gx-app .staff-tip-close { font-size: 13px; }
	body.gx-app .lm-reward-result { padding: 6px 10px; }
	body.gx-app .lm-rr-team { font-size: 11.5px; }
	body.gx-app .lm-rr-val { font-size: 20px; }
	body.gx-app .lm-clutch-seg .lmco-chip { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }
	body.gx-app .rankup-row { font-size: 12.5px; padding-top: 3px; padding-bottom: 3px; }
	/* Rank-up: the ten-row list sits beside the text so the popup fits the short screen */
	body.gx-app .rankup-popup {
		width: min(94%, 600px);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-rows: repeat(6, auto) 1fr;
		column-gap: 16px;
		row-gap: 6px;
		align-content: center;
	}
	body.gx-app .rankup-popup > * { grid-column: 1; margin-top: 0; margin-bottom: 0; }
	body.gx-app .rankup-popup > .rankup-list { grid-column: 2; grid-row: 1 / -1; align-self: center; }
	body.gx-app .rankup-reward,
	body.gx-app .qr-balance,
	body.gx-app .rankup-balance { font-size: 13px; }
	body.gx-app .qr-balance,
	body.gx-app .rankup-balance { padding: 6px 12px; }
	body.gx-app .qr-balance-value,
	body.gx-app .rankup-balance strong { font-size: 20px; }
	body.gx-app .staff-tip-popup { width: min(92%, 400px); padding: 14px 20px; }
	body.gx-app .tm-coach-text { font-size: 13.5px; line-height: 1.4; }
	body.gx-app .gx-mkt-grid > .tm-coach-bubble { grid-column: span 2; }
	body.gx-app .tm-coach-icon { font-size: 22px; }
	body.gx-app .gx-tip { font-size: 12.5px; }
	body.gx-app .gx-train-col .tr2-auto-assign-focus,
	body.gx-app .gx-train-col .tr2-hint { font-size: 12.5px; }
	body.gx-app .tac-info-tooltip { font-size: 13px; }
	body.gx-app .ct-info-name { font-size: 16px; }
	body.gx-app .ct-info-meta,
	body.gx-app .ct-info-row { font-size: 12px; }
	body.gx-app .ct-info-title { font-size: 11px; }
	body.gx-app .tr2-tooltip-name { font-size: 16px; }
	body.gx-app .tr2-tooltip-meta,
	body.gx-app .tr2-tt-row { font-size: 12px; }

	/* Lineup tutorial and player picker */
	.gx-ct .ct-tut-hint { width: min(78%, 420px); gap: 10px; padding: 8px 12px; bottom: 2.5rem; }
	.gx-ct .ct-tut-hint--top { top: 0.8rem; bottom: auto; }
	.gx-ct .ct-tut-hint-icon { width: 30px; height: 30px; border-radius: 9px; }
	.gx-ct .ct-tut-hint-title { font-size: 15px; }
	.gx-ct .ct-tut-hint-text { font-size: 13.5px; line-height: 1.35; }
	.ct-tut-arrow { right: calc(100% + 6px); margin-top: -13px; border-top-width: 13px; border-bottom-width: 13px; border-left-width: 20px; }
	body.gx-app .ct-picker-title { font-size: 16px; }
	body.gx-app .ct-pick-name { font-size: 13px; }
	body.gx-app .ct-pick-skill { font-size: 18px; }
	body.gx-app .ct-pick-current,
	body.gx-app .ct-pick-item--clear { font-size: 12.5px; }

	/* Chats (home shoutbox, team cup, live match): messages and input stay readable */
	.gx-home .news-feed { gap: 6px; }
	.gx-home .message-item { padding: 7px 11px 8px; }
	.gx-home .message-meta { margin-bottom: 2px; }
	.gx-home .message-meta a { font-size: 12px; }
	.gx-home .message-meta .time,
	.gx-tc .tcc-msg-meta,
	.lm-chat-time { font-size: 11px; }
	.gx-home .message-body,
	.gx-tc .tcc-msg-bubble,
	.lm-chat-msg { font-size: 13px; line-height: 1.35; }
	.gx-tc .tcc-msg-bubble { padding: 6px 10px; }
	.gx-tc .tcc-msg { max-width: 85%; }
	.gx-home .shoutbox-more { font-size: 12px; }
	.gx-home .chat-input-bar { gap: 6px; padding-bottom: 8px; }
	.gx-home .chat-input,
	.gx-home .chat-lang-select,
	.lm-chat-field { height: 30px; font-size: 13px !important; border-radius: 8px; }
	.gx-home .chat-input { padding: 0 10px !important; }
	.gx-home .chat-lang-select { width: 84px; padding: 0 4px !important; font-size: 12px !important; }
	.gx-home .chat-input-bar .gx-btn--icon { width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 8px; }
	.gx-home .news-feed { padding-right: 4px; }

	/* JS-built dialogs */
	#dialogCustom { width: min(92%, 420px); padding: 14px 20px; }
	#dialogCustom .header { font-size: 19px; }
	#dialogCustom .text { font-size: 14.5px; }
	#dialogCustom #message, #dialogCustom #errorMessage { font-size: 13px; }
	#dialogButtonWrapper button { min-height: 40px; padding: 9px 20px; font-size: 15px; }

	/* Training: the type selects stay readable and fully visible */
	.gx-train-col .tr2-select { height: auto; min-height: 32px; padding: 4px 10px; font-size: 12.5px; line-height: 1.25; }
}

/* Training: a type select confirms the save (or shows the failure) */
.gx-train-col .tr2-select.tr2-select--saved { animation: trSelSaved 1s ease-out; }
.gx-train-col .tr2-select.tr2-select--error { animation: trSelError 1.2s ease-out; }
@keyframes trSelSaved { 0% { box-shadow: 0 0 0 0.3rem rgba(75, 227, 138, 0.55); } 100% { box-shadow: 0 0 0 0 rgba(75, 227, 138, 0); } }
@keyframes trSelError { 0%, 60% { box-shadow: 0 0 0 0.3rem rgba(255, 90, 106, 0.45); } 100% { box-shadow: none; } }
/* Phone strip tab that holds the next step (e.g. "Start training" once both groups have a type) */
.gx-mtabs button.gx-mtab--attn { border-color: var(--gold); color: var(--gold2); animation: gxMtabAttn 1.2s ease-in-out infinite; }
@keyframes gxMtabAttn { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 28, 0.55); } 50% { box-shadow: 0 0 0 0.45rem rgba(255, 184, 28, 0), 0 0 1.2rem rgba(255, 184, 28, 0.55); } }

/* Training type: a button opens an in-page picker (the native select only stores the value) */
.tr2-select--store { display: none !important; }
.gx-train-col .tr2-skill-btn { position: relative; display: block; text-align: left; padding-right: 2.6rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-train-col .tr2-skill-btn::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.gx-train-col .tr2-skill-btn--empty { color: var(--soft); }
.tr2-skill-overlay { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(5, 9, 22, 0.72); }
.tr2-skill-picker { display: none; position: fixed; left: 50%; top: 50%; z-index: 1201; transform: translate(-50%, -50%); width: min(92%, 34rem); max-height: calc(100% - 2rem); flex-direction: column; overflow: hidden;
	border-radius: var(--r3); background: linear-gradient(180deg, var(--panel), var(--navy2)); border: 2px solid var(--gold); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6); }
.tr2-skill-overlay.is-open { display: block; }
.tr2-skill-picker.is-open { display: flex; animation: gxRise 0.25s ease-out; }
.tr2-skill-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 2px solid var(--line); }
.tr2-skill-picker-title { font: 700 1.5rem var(--f-head); text-transform: uppercase; color: var(--gold); }
.tr2-skill-picker-close { width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--soft); font-size: 1.8rem; line-height: 1; }
.tr2-skill-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; padding: 1rem 1.2rem 1.2rem; overflow-y: auto; }
.tr2-skill-opt { min-height: 3.2rem; padding: 0.5rem 0.9rem; border-radius: 0.9rem; text-align: left; background: var(--navy); border: 2px solid var(--line); color: #fff; font: 600 1.05rem/1.25 var(--f-body); cursor: pointer; }
.tr2-skill-opt:hover { border-color: var(--gold); }
.tr2-skill-opt.is-rec { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 184, 28, 0.25), rgba(255, 184, 28, 0.06)); color: var(--gold2); }
.tr2-skill-opt.is-on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	.tr2-skill-picker { width: min(92%, 440px); }
	.tr2-skill-picker-head { padding: 8px 14px; }
	.tr2-skill-picker-title { font-size: 16px; }
	.tr2-skill-picker-list { gap: 8px; padding: 10px 14px 14px; }
	.tr2-skill-opt { min-height: 40px; padding: 6px 12px; font-size: 13.5px; }
	.gx-train-col .tr2-skill-btn { padding-right: 26px; }
	.gx-train-col .tr2-skill-btn::after { right: 11px; width: 6px; height: 6px; margin-top: -5px; }
	.gx-training .tr2-training-complete { font-size: 13px; }
	.gx-training .tr2-training-complete button { font-size: 13px; padding: 8px 14px; }
}

/* ============================================================
   PHONES: readable text floors. 1rem drops to ~7px on small phones,
   so labels get >= 10px and names/values 11-13px here (px, not rem).
   ============================================================ */
@media (max-height: 560px) and (orientation: landscape), (max-width: 560px) and (orientation: portrait) and (pointer: coarse) {
	/* Shell: HUD, side tab strips, kickers */
	body.gx-app .gx-chip--time .gx-chip-sub { font-size: 8.5px; letter-spacing: 0.03em; }
	body.gx-app .gx-chip-val { font-size: 10px; }
	body.gx-app .gx-badge { min-width: 11px; height: 11px; padding: 0 2px; font-size: 6.5px; letter-spacing: 0; line-height: 11px; border-radius: 6px; }
	/* Bottom corner: the top edge sits under the rounded screen corner and would clip it */
	body.gx-app .gx-chip--icon .gx-badge { top: auto; bottom: -4px; right: -6px; }
	body.gx-app .gx-mtabs button,
	body.gx-app .gx-tc-tabs > a { font-size: 9.5px; letter-spacing: 0.02em; }
	body.gx-app .gx-panel-kicker,
	body.gx-app .gx-home-ovr span,
	body.gx-app .gx-stat-lbl,
	body.gx-app .gx-label > span,
	body.gx-app .gx-more { font-size: 10px; }
	body.gx-app .gx-btn--sm,
	body.gx-app .gx-club-actions .gx-btn { font-size: 9.5px; letter-spacing: 0.02em; }
	body.gx-app .gx-pill,
	body.gx-app .game-tab-badge { font-size: 9.5px; }

	/* Home */
	body.gx-app .gx-im-side .im-panel-title { font-size: 10.5px; }
	body.gx-app .gx-im-side .im-rank-row { font-size: 12.5px; }
	body.gx-app .gx-im-side .im-rank-pos { font-size: 13px; }
	body.gx-app .gx-im-side .im-last-table { font-size: 12px; }
	body.gx-app .gx-im-side .im-last-table th { font-size: 9.5px; }
	body.gx-app .gx-im-side .im-last-result { font-size: 13px; }

	/* Team */
	body.gx-app .gx-club-fact > span { font-size: 9px; }
	body.gx-app .gx-club-fact > b { font-size: 12px; }
	body.gx-app .mt-result-team, body.gx-app .mt-transfer-name { font-size: 11px; }
	body.gx-app .mt-result-date, body.gx-app .mt-result-badge,
	body.gx-app .mt-transfer-direction, body.gx-app .mt-transfer-date, body.gx-app .mt-transfer-other { font-size: 9.5px; }
	body.gx-app .mt-stat-row--head .mt-stat-cell { font-size: 9.5px; }
	body.gx-app .mt-stat-cell, body.gx-app .mt-stat-name { font-size: 11px; }

	/* Training */
	body.gx-app .gx-prog-head > span { font-size: 9.5px; }
	body.gx-app .tr2-prog-btn { font-size: 10px; }
	body.gx-app .tr2-prog-row .gx-li-name { font-size: 12px; }
	body.gx-app .tr2-prog-row .gx-li-sub,
	body.gx-app .tr2-prog-next-lbl span { font-size: 9.5px; }
	body.gx-app .tr2-player-nm { font-size: 11px; }
	body.gx-app .tr2-player-age, body.gx-app .tr2-quick-btn { font-size: 9.5px; }
	body.gx-app .tr2-pt-th-name, body.gx-app .tr2-pt-th span { font-size: 9.5px; }
	body.gx-app .tr2-name-link { font-size: 11px; }

	/* Tactics / lineup (court cards stay compact; bench and controls grow) */
	body.gx-app .gx-pos,
	body.gx-app .ct-bench-pos { font-size: 9px; }
	body.gx-app .ct-bench-name-link { font-size: 11px; }
	body.gx-app .ct-bench-age, body.gx-app .ct-bench-height { font-size: 9.5px; }
	body.gx-app .ct-slot-name { font-size: 9.5px; }
	body.gx-app .tac-row-label > span { font-size: 11px; }
	body.gx-app .tac-seg > button { font-size: 10px; }
	body.gx-app .gx-ct .ct-sb-legend-item { font-size: 10px; }
	body.gx-app .gx-ovr-lbl { font-size: 9.5px; }

	/* Staff */
	body.gx-app .ps-detail-label, body.gx-app .ps-stars > span { font-size: 9.5px; }
	body.gx-app .ps-detail-value { font-size: 11px; }
	body.gx-app .ps-btn-bid, body.gx-app .ps-btn-autobid, body.gx-app .ps-select { font-size: 10.5px; }

	/* Transfer market */
	body.gx-app .tm-filter-label { font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	body.gx-app .tm-filter-select, body.gx-app .tm-filter-input { font-size: 9.5px !important; }
	body.gx-app .tm-listing-name { font-size: 11px; }
	body.gx-app .tm-tag, body.gx-app .gx-mkt-pot, body.gx-app .gx-mkt .gx-pcard-pos { font-size: 9px; }
	body.gx-app .tm-bid-timer, body.gx-app .tm-listing-bidder { font-size: 10px; }
	body.gx-app .tm-bid-input { font-size: 12px; }
	body.gx-app .tm-bid-btn, body.gx-app .tm-autobid-btn { font-size: 9px; letter-spacing: 0; padding-left: 2px !important; padding-right: 2px !important; }
	body.gx-app .tm-sell-label { font-size: 10px; }

	/* Draft */
	body.gx-app .draft-col-name { font-size: 10px; }
	body.gx-app .draft-arrow { font-size: 9px; }

	/* League + team cup league */
	body.gx-app .gx-league .lg-game-div-header { font-size: 9.5px; }
	body.gx-app .gx-league .lg-game-team { font-size: 10px; }
	body.gx-app .gx-league .lg-game-vs { font-size: 8.5px; }
	body.gx-app .gx-league .lg-game-result { font-size: 11px; }
	body.gx-app .gx-league .lg-standing-header { font-size: 9.5px; }
	body.gx-app .gx-league .lg-standing-row { font-size: 10px; }
	body.gx-app .gx-league .lg-standing-header,
	body.gx-app .gx-league .lg-standing-row { grid-template-columns: 1.8rem minmax(0, 1fr) 2.6rem 2.6rem 4.6rem 2.8rem; gap: 0.2rem; padding-left: 0.6rem; padding-right: 0.6rem; }
	body.gx-app .gx-league .lg-game-row { gap: 0.4rem; padding-left: 0.6rem; padding-right: 0.6rem; }
	body.gx-app .gx-league .lg-game-teams { gap: 0.3rem; }
	body.gx-app .gx-league .lg-game-result { min-width: 0; padding-left: 0.4rem; padding-right: 0.4rem; }
	body.gx-app .gx-league .lg-standing-rank { font-size: 10.5px; }
	body.gx-app .gx-league .lg-standing-pts { font-size: 11.5px; }
	body.gx-app .gx-league .lg-legend { font-size: 10px; }
	body.gx-app .gx-league .lg-stat-cat { font-size: 10px; }
	body.gx-app .gx-league .lg-stat-header { font-size: 9.5px; }
	body.gx-app .gx-league .lg-stat-row { font-size: 11px; }
	body.gx-app .gx-league-select { height: auto; min-height: 26px; padding-top: 2px !important; padding-bottom: 2px !important; font-size: 11px !important; line-height: 1.2; }

	/* Team cup overview, friendlies */
	body.gx-app .fr-req-name { font-size: 12px; }
	body.gx-app .fr-req-rank, body.gx-app .fr-req-meta, body.gx-app .fr-card-body { font-size: 10.5px; }
	body.gx-app .fr-req-badge, body.gx-app .fr-match-vs { font-size: 8.5px; }
	body.gx-app .fr-empty, body.gx-app .gx-tc .tc-btn-danger { font-size: 10.5px; }

	/* Mailbox, finance, satisfaction, mentoring */
	body.gx-app .mb-msg-subject { font-size: 11.5px; }
	body.gx-app .mb-msg-sender { font-size: 10px; }
	body.gx-app .gx-mailbox .mb-detail-body { font-size: 13px; }
	body.gx-app .gx-fin-legend, body.gx-app .gx-fin-day > span { font-size: 9px; }
	body.gx-app .gx-fin-cat .gx-label > span, body.gx-app .gx-fin-cat .gx-label > b { font-size: 10px; }
	body.gx-app .kt-tx-week { font-size: 9.5px; }
	body.gx-app .kt-tx-reason { font-size: 11px; }
	body.gx-app .sat-info-text, body.gx-app .gx-gauge-in > span { font-size: 10px; }
	body.gx-app .mn-player > span, body.gx-app .mn-player { font-size: 11px; }
	body.gx-app .mn-status { font-size: 9.5px; }

	/* Rules the page CSS sets with higher specificity or !important */
	:root { --mtabs-w: 8.5rem; }
	body.gx-app .gx-tc-tabs { width: var(--mtabs-w); }
	body.gx-app .gx-mtabs button span,
	body.gx-app .gx-tc-tabs > a span { word-break: normal; overflow-wrap: normal; hyphens: auto; }
	body.gx-app .gx-mtabs button,
	body.gx-app .gx-tc-tabs > a { font-size: 8.5px; line-height: 1.05; letter-spacing: 0; gap: 1px; padding: 2px; min-height: 0; max-height: none; }
	body.gx-app .gx-mtabs button .gx-i,
	body.gx-app .gx-tc-tabs > a .gx-i { width: 13px; height: 13px; flex-shrink: 0; }
	/* The season chip yields its space to the page title on small phones */
	body.gx-app .gx-chip--time { display: none; }
	body.gx-app .gx-online-btn { font-size: 10px; }
	body.gx-app .gx-club-status .mt-online { font-size: 9.5px; }
	body.gx-app .gx-empty { font-size: 10.5px; }
	body.gx-app .gx-training .tr2-prog-btn { font-size: 10px; }
	body.gx-app .gx-train-col .tr2-badge { font-size: 10px; }
	body.gx-app .tac-info { font-size: 9px; }
	body.gx-app .gx-shotmix > i { font-size: 9px; }
	body.gx-app .gx-ct .ct-sb-legend-pill { font-size: 9px; }
	body.gx-app .gx-staff .ps-staff-name, body.gx-app .ps-auction-name { font-size: 11px; }
	body.gx-app .gx-draft .draft-col-name { font-size: 10.5px !important; }
	body.gx-app .draft-col-rank { font-size: 10px; }
	body.gx-app .lg-matchday-label { font-size: 11px; }
	body.gx-app .gx-league .lg-stat-header { font-size: 9.5px; }
	body.gx-app .gx-league .lg-stat-row,
	body.gx-app .gx-league .lg-stat-name { font-size: 11px; }
	body.gx-app .gx-league .lg-stat-team { font-size: 9px; }
	body.gx-app .gx-sat-ctx { font-size: 11px; }
	/* Form controls: the base sets their size with !important */
	body.gx-app .tm-bid-input,
	body.gx-app .gx-market-sell select, body.gx-app .gx-market-sell input,
	body.gx-app .st-select, body.gx-app .st-input, body.gx-app .ps-select,
	body.gx-app .fr-select, body.gx-app .mb-select, body.gx-app .mb-input { font-size: 11px !important; }
}