.friend-name-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); min-width:0; }

/* League border colors - applied to profile cards */
.bg-bronze { 
	background: var(--bg-secondary) !important; 
	border: 2px solid #CD7F32 !important;
}
.bg-silver { 
	background: var(--bg-secondary) !important; 
	border: 2px solid #C0C0C0 !important;
}
.bg-gold { 
	background: var(--bg-secondary) !important; 
	border: 2px solid #FFD700 !important;
}
.bg-platinum { 
	background: var(--bg-secondary) !important; 
	border: 2px solid #7DD3FC !important;
}
.bg-diamond { 
	background: var(--bg-secondary) !important; 
	border: 2px solid #A78BFA !important;
}
.bg-legendary { 
	position: relative !important;
	border: none !important;
	background: 
		linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
		linear-gradient(90deg, #ff6ec4 0%, #7873f5 20%, #1fd1f9 40%, #ffef78 60%, #43e97b 80%, #38f9d7 100%) border-box !important;
	border: 2px solid transparent !important;
}

/* Profile page styles - single card with right-side stats */
.profile-card { display:flex; flex-direction:column; align-items:stretch; padding:0; }
.profile-shell { display:flex; flex-direction:column; width:100%; }
.profile-shell--full { min-height:calc(100vh - 72px - 80px); display:flex; flex-direction:column; overflow:visible; }
.profile-dynamic { flex:1; display:flex; flex-direction:column; min-height:0; }
.profile-dynamic > .friends { flex:1; min-height:0; }
.profile-dynamic > .friends .friends-strip { flex:1; }

.card-95 {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--bg-secondary);
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	padding: var(--space-md);
	box-sizing: border-box;
	position: relative;
	overflow: visible;
}

/* Legendary rainbow border fix for card-95 */
.card-95.bg-legendary::before {
	border-radius: calc(var(--radius-lg) + 2px);
}

.profile-card-inner.card-95 { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.profile-card-inner .left { display:flex; gap:var(--space-md); align-items:center; min-width:0; }
.profile-card-inner .avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--bg-tertiary); flex:0 0 auto; border: 2px solid var(--border); }
.profile-card-inner .meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.profile-card-inner .meta .name { font-weight:700; font-size:var(--font-md); line-height:1.2; white-space:normal; overflow:visible; text-overflow:clip; color: var(--text); }
.profile-card-inner .meta .country { font-size:var(--font-sm); color:var(--text-secondary); }
.profile-card-inner .meta .level { font-size:var(--font-sm); color:var(--text-secondary); }
.badge { font-size:var(--font-xs); padding:3px 8px; border-radius:var(--radius-full); background:var(--bg-tertiary); color:var(--text); }

/* Right Stats - Watch page style */
.right-stats { 
	display: flex; 
	gap: 8px; 
	align-items: center; 
	background: var(--bg-tertiary, #292524);
	border-radius: 8px;
	padding: 6px 12px;
}
.right-stats .kpi { 
	display: flex; 
	align-items: center; 
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
}
.right-stats .kpi .icon { width: 14px; height: 14px; object-fit: contain; }
.right-stats .kpi .value { font-weight: 700; }
.right-stats .kpi.kpi-streak .value { color: #A855F7; }
.right-stats .kpi.kpi-ads .value { color: #EF4444; }
.right-stats .kpi.kpi-nut .value { color: #22C55E; }
.right-stats .stat-separator { color: var(--muted, #78716C); font-size: 10px; opacity: 0.6; }

/* Modal overlay for profile detail from leaderboard */
.profile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center; z-index:9999; padding:0; }
.profile-modal { width:100%; max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:0 var(--space-md); box-sizing:border-box; }
.profile-overlay .card-95 { width:100%; max-width:100%; margin:0 auto; }
body.modal-open { overflow:hidden; }

/* Modal-like profile viewer if opened from leaderboard */
.profile-viewer { padding:var(--space-xs) 0 var(--space-md); }

.level-progress {
	margin-top:var(--space-md);
	padding:var(--space-md);
	border-radius:var(--radius-lg);
	background:var(--bg-tertiary);
	border:1px solid var(--border);
}
.level-progress .level-progress-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md); }
.level-progress .current,
.level-progress .next { display:flex; align-items:center; gap:var(--space-xs); }
.level-progress .current .label,
.level-progress .current .value { font-weight:700; color:var(--text); font-size:var(--font-sm); }
.level-progress .next .label,
.level-progress .next .value { font-weight:500; color:var(--text-secondary); font-size:var(--font-xs); }
.level-progress .sep { color:var(--text-secondary); font-size:var(--font-sm); }
.level-progress .progress-bar { width:100%; height:10px; border-radius:var(--radius-full); background:var(--bg); margin-top:var(--space-md); overflow:hidden; }
.level-progress .progress-bar .fill { height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg, var(--primary), var(--primary-light)); }

.achievements {
	margin-top:var(--space-md);
	padding:var(--space-md);
	border-radius:var(--radius-lg);
	background:var(--bg-tertiary);
	border:1px solid var(--border);
}
.achievements-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.achievements-head .titles { display:flex; flex-direction:column; }
.achievements-title { margin:0; font-size:var(--font-md); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text); }
.achievements-view-all {
	border-radius:var(--radius-full);
	padding:var(--space-sm) var(--space-md);
	font-size:var(--font-sm);
	font-weight:600;
	color:var(--text);
	background:var(--bg-secondary);
	border:1px solid var(--border);
	cursor:pointer;
	transition: all var(--transition-fast);
}
.achievements-view-all:hover { background:var(--bg-tertiary); border-color:var(--primary); }
.achievement-strip { margin-top:var(--space-md); display:grid; gap:var(--space-xs); grid-template-columns:repeat(6, minmax(0, 1fr)); justify-items:center; }
.achievement-token { border:none; background:transparent; padding:0; width:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.achievement-token .ach-icon { width:46px; height:46px; border-radius:var(--radius-md); font-size:var(--font-md); }
.achievement-token:hover .ach-icon { transform:translateY(-2px); transition:transform 120ms ease; }
.achievement-token.locked { cursor:default; }
.achievement-token.locked .ach-icon { background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border); box-shadow:none; filter:grayscale(1); opacity:0.65; }
.achievement-token.locked:hover .ach-icon { transform:none; }
.ach-icon { width:48px; height:48px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--ach-color,var(--primary)) 0%, rgba(255,255,255,0.18) 100%); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-lg); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.2); }

/* Dual card row container */
.profile-dual-row {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-md);
	width: 100%;
	flex: 1;
	min-height: 0;
}
.profile-dual-row > .quick-stats,
.profile-dual-row > .friends {
	flex: 1;
	min-width: 0;
	margin-top: 0;
	display: flex;
	flex-direction: column;
}

/* Quick Stats Card */
.quick-stats {
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
}
.quick-stats-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.quick-stats-title {
	margin: 0;
	font-size: var(--font-md);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text);
}
.quick-stats-list {
	margin-top: var(--space-sm);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.quick-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-xs) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.quick-stat-row:last-child {
	border-bottom: none;
}
.quick-stat-label {
	font-size: var(--font-sm);
	color: var(--text-secondary);
	font-weight: 500;
}
.quick-stat-label::after {
	content: ':';
}
.quick-stat-value {
	font-size: var(--font-sm);
	font-weight: 600;
	color: var(--text-secondary);
}

.friends {
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.friends-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-sm); border-bottom:1px solid rgba(255, 255, 255, 0.15); }
.friends-title { margin:0; font-size:var(--font-md); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text); }
.friends-count { font-size:var(--font-xs); font-weight:600; color:var(--text-secondary); background:var(--bg-secondary); border-radius:var(--radius-full); padding:2px 10px; }
.friends-window { margin-top:var(--space-sm); flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.friends-strip { display:flex; flex-direction:column; gap:var(--space-sm); overflow-y:auto; padding:0 4px var(--space-md) 0; scrollbar-width:thin; scrollbar-color:var(--border) transparent; flex:1; min-height:0; width:100%; box-sizing:border-box; }
.friends-strip::-webkit-scrollbar { width:6px; }
.friends-strip::-webkit-scrollbar-track { background:var(--bg); border-radius:var(--radius-full); }
.friends-strip::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-full); }
.friends-strip--empty { display:none; }

.friend-pill {
	width:100%;
	max-width:100%;
	padding:var(--space-sm) var(--space-md);
	border-radius:var(--radius-md);
	border:1px solid var(--border);
	background:var(--bg-secondary);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:var(--space-sm);
	cursor:pointer;
	transition:all var(--transition-fast);
	box-sizing:border-box;
}
.friend-pill:hover { border-color:var(--primary); background:var(--bg-tertiary); }
.friend-name { font-size:var(--font-sm); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.friends-empty { font-size:var(--font-sm); color:var(--text-secondary); text-align:center; display:flex; align-items:center; justify-content:center; flex:1; min-height:0; }

.friends-invite-btn {
	width: 100%;
	margin-top: var(--space-md);
	border: none;
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	font-size: var(--font-sm);
	font-weight: 700;
	color: #fff;
	background: var(--primary);
	cursor: pointer;
	transition: all var(--transition-fast);
	box-sizing: border-box;
	flex-shrink: 0;
}
.friends-invite-btn:hover:not(:disabled) {
	background: var(--primary-dark);
	transform: translateY(-1px);
}
.friends-invite-btn:active:not(:disabled) {
	transform: translateY(0);
}
.friends-invite-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.profile-shortcuts {
	margin-top:var(--space-md);
	margin-bottom:0;
	padding:var(--space-md);
	border-radius:var(--radius-lg);
	background:var(--bg-tertiary);
	border:1px solid var(--border);
}
.profile-shortcuts .shortcut-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--space-sm); }
.shortcut-btn {
	border:1px solid var(--border);
	border-radius:var(--radius-md);
	padding:var(--space-sm) var(--space-md);
	background:var(--bg);
	color:var(--text);
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:var(--font-sm);
	font-weight:600;
	cursor:pointer;
	transition:all var(--transition-fast);
	min-height:44px;
}
.shortcut-btn .label { font-weight:700; font-size:var(--font-sm); letter-spacing:0.02em; display:block; width:100%; text-align:center; }
.shortcut-btn.primary { background:var(--bg-secondary); border-color:var(--primary); }
.shortcut-btn:not(:disabled):hover { transform:translateY(-1px); border-color:var(--primary); background:var(--bg-secondary); }
.shortcut-btn:disabled { opacity:0.5; cursor:not-allowed; }
/* Profile page styles */