/* Стрик ежедневных входов — иконка пламени в комментариях и профиле */

.streak {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 6px;
	vertical-align: middle;
	cursor: default;
	outline: none;
	z-index: 2;
}
.streak i {
	font-size: 20px;
	line-height: 1;
	filter: drop-shadow(0 0 4px currentColor);
	transition: transform .2s ease, filter .2s ease, color .2s ease;
}
.streak:hover i,
.streak:focus-visible i {
	transform: scale(1.18) translateY(-1px);
}

/* 1 Уголёк → 9 Вечное пламя: серый → жёлтый → красный */
.streak--lv-1 i { color: #8b8b96; filter: drop-shadow(0 0 2px rgba(139,139,150,.35)); }
.streak--lv-2 i { color: #c4b48a; filter: drop-shadow(0 0 4px rgba(196,180,138,.45)); }
.streak--lv-3 i { color: #e8c547; filter: drop-shadow(0 0 6px rgba(232,197,71,.55)); }
.streak--lv-4 i { color: #f0a202; filter: drop-shadow(0 0 7px rgba(240,162,2,.6)); }
.streak--lv-5 i { color: #f97316; filter: drop-shadow(0 0 8px rgba(249,115,22,.65)); }
.streak--lv-6 i { color: #ea580c; filter: drop-shadow(0 0 9px rgba(234,88,12,.7)); }
.streak--lv-7 i { color: #ef4444; filter: drop-shadow(0 0 10px rgba(239,68,68,.75)); }
.streak--lv-8 i { color: #dc2626; filter: drop-shadow(0 0 12px rgba(220,38,38,.85)); }
.streak--lv-9 i {
	color: #ff1a1a;
	filter: drop-shadow(0 0 8px #ff4d00) drop-shadow(0 0 16px rgba(255,26,26,.7));
	animation: streak-eternal 1.8s ease-in-out infinite;
}

@keyframes streak-eternal {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px #ff4d00) drop-shadow(0 0 14px rgba(255,26,26,.55)); }
	50% { transform: scale(1.08); filter: drop-shadow(0 0 14px #ff6a00) drop-shadow(0 0 22px rgba(255,26,26,.9)); }
}

.streak__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%) translateY(6px);
	min-width: 168px;
	max-width: 240px;
	padding: 10px 12px 11px;
	border-radius: 12px;
	background: linear-gradient(180deg, #1c1c28 0%, #12121a 100%);
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2);
	color: #f0f0f5;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 80;
}
.streak__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #12121a;
}
@media (hover: hover) and (pointer: fine) {
	.streak:hover .streak__tip,
	.streak:focus-visible .streak__tip {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
	/* Клик больше не должен рисовать вторую подсказку снизу (в т.ч. старый JS из кэша) */
	.streak.is-open .streak__tip {
		position: absolute !important;
		top: auto !important;
		left: 50% !important;
		right: auto !important;
		bottom: calc(100% + 10px) !important;
		width: auto !important;
		max-width: 240px !important;
		transform: translateX(-50%) translateY(6px) !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
	.streak.is-open:hover .streak__tip,
	.streak.is-open:focus-visible .streak__tip {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateX(-50%) translateY(0) !important;
	}
}

@media (max-width: 767px), (hover: none) {
	.streak:hover .streak__tip,
	.streak:focus-visible .streak__tip {
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(6px);
	}
	.streak.is-open .streak__tip {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

@media (max-width: 767px) {
	.comment-item,
	.comment-item__main,
	.comment-item__header,
	.comment-item__meta,
	.comment-item > .comment-item__main > .comment-item__header.d-flex > .comment-item__meta.flex-grow-1 {
		overflow: visible !important;
	}
	.streak {
		z-index: 6;
	}
	.streak.is-open {
		z-index: 100000;
	}
	.streak.is-open .streak__tip {
		position: fixed;
		z-index: 100001;
		transform: none;
		bottom: auto;
		white-space: normal;
		pointer-events: none;
	}
	.streak.is-open .streak__tip::after {
		display: none;
	}
}

.streak__tip-rank {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: 3px;
}
.streak__tip-days,
.streak__tip-record,
.streak__tip-next {
	display: block;
	color: #9a9aab;
	font-weight: 500;
	white-space: normal;
}
.streak__tip-days { color: #d4d4de; }
.streak__tip-record {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(255,255,255,.06);
}
.streak__tip-record b { color: #fbbf24; font-weight: 700; }
.streak__tip-next { margin-top: 3px; font-size: 11px; color: #7c7c8e; }

.streak--lv-1 .streak__tip-rank { color: #a1a1aa; }
.streak--lv-2 .streak__tip-rank { color: #d4c4a0; }
.streak--lv-3 .streak__tip-rank { color: #e8c547; }
.streak--lv-4 .streak__tip-rank { color: #f0a202; }
.streak--lv-5 .streak__tip-rank { color: #f97316; }
.streak--lv-6 .streak__tip-rank { color: #fb7185; }
.streak--lv-7 .streak__tip-rank { color: #f87171; }
.streak--lv-8 .streak__tip-rank { color: #ef4444; }
.streak--lv-9 .streak__tip-rank { color: #ff4d4d; }

/* Комменты: не обрезать подсказку */
.comment-item__header,
.comment-item__meta {
	overflow: visible;
}
.comm-author .streak,
.comment-item__meta .streak {
	margin-left: 5px;
	margin-right: 2px;
	top: -1px;
}

/* Профиль — крупнее, рядом с ником */
.usp__name-row .streak {
	margin-left: 8px;
	z-index: 5;
}
.usp__name-row .streak i {
	font-size: 20px;
}
.usp__name-row {
	overflow: visible;
}

.dt-is-active .streak__tip {
	background: linear-gradient(180deg, #222230 0%, #16161f 100%);
	border-color: rgba(255,255,255,.1);
}