/* CS-RYAZAN-NEW: киберпанк-виджет пользователя (аватар + выпадающее меню) */

@property --cp-a {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.cp-user {
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 1040;
	width: 58px;
	height: 58px;
	font-family: 'Rajdhani', 'Orbitron', sans-serif;
}

.cp-user__avatar {
	position: relative;
	display: block;
	width: 58px;
	height: 58px;
	margin: 0 auto;
	filter: drop-shadow(0 0 10px rgba(255,34,69,.45));
	transition: transform .35s ease, filter .35s ease;
	text-decoration: none;
}
.cp-user__avatar:hover,
.cp-user.is-open .cp-user__avatar {
	transform: scale(1.06);
	filter: drop-shadow(0 0 18px rgba(255,34,69,.75));
}

.cp-user__ring {
	position: absolute;
	inset: 0;
	clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
	background: conic-gradient(from var(--cp-a), var(--cp-red), var(--cp-red-deep) 35%, transparent 55%, var(--cp-red) 100%);
	animation: cpAngle 3s linear infinite;
}
.cp-user__ring--rev {
	inset: 3px;
	clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
	background: var(--cp-panel);
	border: 1px solid var(--cp-red);
	animation: cpPulse 2.6s ease-out infinite;
}

.cp-user__pic {
	position: absolute;
	inset: 6px;
	display: block;
	overflow: hidden;
	/* меньший срез углов, чем у cp-nav — там это иконка, а здесь фото
	   лица, и слишком глубокий срез обрезал верх/бок аватарки */
	clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
	background: var(--cp-void);
}
.cp-user__pic img,
.cp-user__pic .playground {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* у части пользователей аватар обёрнут в .playground.m-40 (рамка-«украшение»
   из магазина) — у неё в market.css/mystyles_ner.css фиксированные 40×40px
   с float и отступом, из-за чего фото не заполняло весь блок аватарки */
.cp-user__pic .playground,
.cp-user__pic .playground.m-40,
.cp-user__pic .playground.nav,
.cp-user__pic .playground img,
.cp-user__pic .playground .frame,
.cp-user__pic .playground .frame img,
.cp-user__pic .playground.m-40 img,
.cp-user__pic .playground.m-40 .frame,
.cp-user__pic .playground.m-40 .frame img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	object-fit: cover;
}
.cp-user__pic .playground .frame img {
	transform: none;
}
.cp-user__pic::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255,255,255,.06) 0px,
		rgba(255,255,255,.06) 1px,
		transparent 2px,
		transparent 4px
	);
	mix-blend-mode: overlay;
}

.cp-user__dot {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cp-red);
	box-shadow: 0 0 8px var(--cp-red-glow);
	animation: cpDot 1.4s ease-in-out infinite;
}

/* зеркальный значок кнопки меню (как у cp-nav), подсказывает, что тут тоже открывается меню */
.cp-user__badge {
	position: absolute;
	left: -6px;
	bottom: -6px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cp-void);
	border: 1px solid var(--cp-red);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(255,34,69,.45);
	transform: scaleX(-1);
	transition: transform .3s ease, box-shadow .3s ease;
}
.cp-user:hover .cp-user__badge,
.cp-user.is-open .cp-user__badge {
	box-shadow: 0 0 16px rgba(255,34,69,.7);
}
.cp-user__badge .cp-nav__bars--mini {
	width: 12px;
	height: 9px;
}
.cp-user__badge .cp-nav__bars--mini b {
	height: 1.5px;
}
.cp-user__badge .cp-nav__bars--mini b:nth-child(1) { top: 0; }
.cp-user__badge .cp-nav__bars--mini b:nth-child(2) { top: 4px; }
.cp-user__badge .cp-nav__bars--mini b:nth-child(3) { top: 8px; }
.cp-user:hover .cp-user__badge .cp-nav__bars--mini b:nth-child(1),
.cp-user.is-open .cp-user__badge .cp-nav__bars--mini b:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.cp-user:hover .cp-user__badge .cp-nav__bars--mini b:nth-child(2),
.cp-user.is-open .cp-user__badge .cp-nav__bars--mini b:nth-child(2) { opacity: 0; }
.cp-user:hover .cp-user__badge .cp-nav__bars--mini b:nth-child(3),
.cp-user.is-open .cp-user__badge .cp-nav__bars--mini b:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* ==== Выпадающая панель ==== */
.cp-user__drop {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	width: 276px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px) scale(.96);
	transform-origin: top right;
	transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.cp-user:hover .cp-user__drop,
.cp-user.is-open .cp-user__drop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.cp-user__panel {
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
	background: linear-gradient(160deg, var(--cp-panel-2), var(--cp-panel) 55%, #0a0709 100%);
	border: 1px solid var(--cp-line);
	box-shadow: 0 0 28px rgba(255,34,69,.2), 0 12px 30px rgba(0,0,0,.55);
	padding: 16px 16px 10px;
}
.cp-user__panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(115deg, rgba(255,34,69,.05) 0 2px, transparent 2px 6px);
	pointer-events: none;
}

.cp-user__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: -20%;
	height: 40%;
	background: linear-gradient(to bottom, transparent, rgba(255,34,69,.25), transparent);
	transform: translateY(-100%);
	pointer-events: none;
}
.cp-user.is-open .cp-user__scan,
.cp-user:hover .cp-user__scan {
	animation: cpScan 1.1s ease-out;
}

.cp-user__head {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cp-line);
}
.cp-user__nick {
	font-family: 'Orbitron', sans-serif;
	font-size: 1rem;
	letter-spacing: .03em;
}
.cp-user__nick-text {
	position: relative;
	display: inline-block;
}
.cp-user:hover .cp-user__nick-text::before,
.cp-user:hover .cp-user__nick-text::after,
.cp-user.is-open .cp-user__nick-text::before,
.cp-user.is-open .cp-user__nick-text::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	background: transparent;
}
.cp-user:hover .cp-user__nick-text::before,
.cp-user.is-open .cp-user__nick-text::before {
	color: #00e5ff;
	animation: cpGlitchA 2.4s infinite linear;
}
.cp-user:hover .cp-user__nick-text::after,
.cp-user.is-open .cp-user__nick-text::after {
	color: var(--cp-red);
	animation: cpGlitchB 2.4s infinite linear;
}

.cp-user__rank {
	margin-top: 4px;
	font-size: .8rem;
	color: var(--cp-text-mute);
	letter-spacing: .04em;
}
.cp-user__rank i {
	color: var(--cp-red);
	margin-right: 4px;
}

.cp-user__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	/* скролл только если пункты реально не помещаются по высоте экрана */
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overflow-x: hidden;
}
.cp-user__menu li {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity .3s ease, transform .3s ease;
	transition-delay: calc(var(--i, 1) * 32ms + 140ms);
}
.cp-user:hover .cp-user__menu li,
.cp-user.is-open .cp-user__menu li {
	opacity: 1;
	transform: none;
}
.cp-user__menu li:nth-child(1) { --i: 1; }
.cp-user__menu li:nth-child(2) { --i: 2; }
.cp-user__menu li:nth-child(3) { --i: 3; }
.cp-user__menu li:nth-child(4) { --i: 4; }
.cp-user__menu li:nth-child(5) { --i: 5; }
.cp-user__menu li:nth-child(6) { --i: 6; }
.cp-user__menu li:nth-child(7) { --i: 7; }
.cp-user__menu li:nth-child(8) { --i: 8; }
.cp-user__menu li:nth-child(9) { --i: 9; }
.cp-user__menu li:nth-child(10) { --i: 10; }
.cp-user__menu li:nth-child(11) { --i: 11; }
.cp-user__menu li:nth-child(12) { --i: 12; }
.cp-user__menu li:nth-child(13) { --i: 13; }
.cp-user__menu li:nth-child(14) { --i: 14; }
.cp-user__menu li:nth-child(15) { --i: 15; }
.cp-user__menu li:nth-child(16) { --i: 16; }

.cp-user__menu a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin: 2px 0;
	color: var(--cp-text-hi);
	text-decoration: none;
	font-size: .86rem;
	border-radius: 6px;
	overflow: hidden;
	transition: color .2s ease, background .2s ease;
}
.cp-user__menu a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--cp-red);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .25s ease;
}
.cp-user__menu a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent, rgba(255,34,69,.16), transparent);
	transform: translateX(-120%);
	transition: transform .5s ease;
	pointer-events: none;
}
.cp-user__menu a:hover {
	background: rgba(255,34,69,.08);
	color: #fff;
}
.cp-user__menu a:hover::before {
	transform: scaleY(1);
}
.cp-user__menu a:hover::after {
	transform: translateX(120%);
}
.cp-user__menu a i {
	width: 18px;
	text-align: center;
	color: var(--cp-red);
	transition: transform .25s ease, filter .25s ease;
}
.cp-user__menu a:hover i {
	transform: scale(1.15);
	filter: drop-shadow(0 0 6px var(--cp-red-glow));
}
.cp-user__exit a {
	color: var(--cp-text-mute);
}
.cp-user__exit a i {
	color: var(--cp-steel);
}

/* ==== Анимации ==== */
@keyframes cpAngle {
	to { --cp-a: 360deg; }
}
@keyframes cpPulse {
	0%   { box-shadow: 0 0 0 0 var(--cp-red-glow); }
	70%  { box-shadow: 0 0 0 6px rgba(255,34,69,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,34,69,0); }
}
@keyframes cpDot {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.3); opacity: .65; }
}
@keyframes cpScan {
	from { transform: translateY(-100%); }
	to   { transform: translateY(350%); }
}
@keyframes cpGlitchA {
	0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0,0); }
	93%  { clip-path: inset(10% 0 60% 0); transform: translate(-2px,0); }
	95%  { clip-path: inset(40% 0 20% 0); transform: translate(2px,0); }
	97%  { clip-path: inset(0 0 100% 0); transform: translate(0,0); }
}
@keyframes cpGlitchB {
	0%, 90%, 100% { clip-path: inset(100% 0 0 0); transform: translate(0,0); }
	91%  { clip-path: inset(55% 0 15% 0); transform: translate(2px,0); }
	94%  { clip-path: inset(20% 0 50% 0); transform: translate(-2px,0); }
	96%  { clip-path: inset(100% 0 0 0); transform: translate(0,0); }
}

/* ==== Мобильная версия ==== */
@media (max-width: 767.99px) {
	.cp-user {
		top: 10px;
		right: 12px;
	}
	.cp-user__avatar {
		width: 50px;
		height: 50px;
	}
	.cp-user__dot {
		width: 10px;
		height: 10px;
	}
	.cp-user__drop {
		width: min(84vw, 276px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-user__ring,
	.cp-user__ring--rev,
	.cp-user__dot,
	.cp-user__scan,
	.cp-user__nick-text::before,
	.cp-user__nick-text::after {
		animation: none !important;
	}
}