/* ============================================================
 *  SSS Votes – button, burst + leaderboard styles
 * ============================================================
 */

/* ---------- Vote button ----------------------------------- */
.sss-vote-btn {
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:4px 6px;
	border:1px solid transparent;
	border-radius:2px;
	background:#000;          /* dark bg */
	color:#00919e;            /* teal text / icon */
	cursor:pointer;
	position:relative;        /* ← needed for burst */
	overflow:visible;
}

.sss-vote-btn:hover,
.sss-vote-btn:focus {
	background:#000;
	border-color:#00b4ba;     /* brighter teal */
	color:#9e00ba;            /* neon-pink text / icon */
	outline:none;
}

.sss-vote-btn.active {
	background:#9e00ba;       /* active pink bg */
	border-color:#00bab7;     /* cyan border */
	color:#ffdcf3;            /* light pink text / icon */
}

.sss-vote-btn .icon { margin-right:2px; }

/* ---------- Burst / confetti ------------------------------ */
.sss-burst{
	position:absolute;
	left:50%;top:50%;
	width:8px;height:8px;
	border-radius:50%;
	background:transparent;
	pointer-events:none;

	/* eight coloured dots */
	box-shadow:
		 0  -12px 0 2px #ff595e,
		 9px  -9px 0 2px #ffca3a,
		12px   0   0 2px #8ac926,
		 9px   9px 0 2px #1982c4,
		 0   12px 0 2px #6a4c93,
		-9px   9px 0 2px #ff595e,
	   -12px   0   0 2px #ffca3a,
		-9px  -9px 0 2px #8ac926;

	animation:sssv-burst .6s ease-out forwards;
}

@keyframes sssv-burst{
	0%   {transform:translate(-50%,-50%) scale(0);   opacity:1;}
	80%  {transform:translate(-50%,-50%) scale(1);   opacity:1;}
	100% {transform:translate(-50%,-50%) scale(1.2); opacity:0;}
}