:root {

		--orange-border-color: #ff7b0b;

		--black-border-color: #00000099;

		--purple-border-color: #942ae7;

		--blue-border-color: #2473ff;

		--red-border-color: #ff2121;

		--green-border-color: #19e70a;

		--pink-border-color: #f715d3;

		--rank-gold-color: #ffbf00;

		--rank-silver-color: #badbe7; /*D8D8D8*/

		--rank-bronze-color: #cd7f32;

		--rank-one-color: #fd4603;

		

	  }



	.border-round-gold {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: #ffbf00;

	}



	.border-round-silver {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: #D8D8D8;

	}



	.border-round-silver-new {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: var(--rank-silver-color);

	}



	.border-round-bronze {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: #cd7f32;

	}



	.border-ruby {

		border-width: 1px;

		border-style: solid;

		padding: 0px;

		border-color: #ea2324;

	}

	.border-pink {

		border-width: 1px;

		border-style: solid;

		padding: 0px;

		border-color: #e2a2c7;

	}	

	.border-emerald {

		border-width: 1px;

		border-style: solid;

		padding: 0px;

		border-color: #10e17c;

	}

	

	

	.border-round-red {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: #ea2324;

	}

	

	.border-round-pink {

		border-width: 2px;

		border-radius: 50%;

		border-style: solid;

		border-color: #e2a2c7;

	}

	

	.border-round-blue {

		border-width: 2px;

		border-radius: 50%;

		border-style: solid;

		border-color: #3c8cc9;

	}



	.border-round-emerald {

		border-width: 2px;

		border-radius: 50%;

		border-style: inset;

		border-color: #10e17c;

	}



	.border-rounded-orange-green {

		border-radius: 5px;

		border-bottom: 2px inset #f89406;

		border-top: 2px inset #07e907;

		border-left: 2px inset #07e907;

		border-right: 2px inset #f89406;

	}



	.border-round-purple {

		border-width: 2px;

		border-style: solid;

		padding: 0px;

		border-color: #c303fd;

		border-radius: 50%;

	}





	  .border-pulse-orange {

		animation-name: pulse_border_orange;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_orange;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_orange;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--orange-border-color);

	  }

	  

	  @keyframes pulse_border_orange {

		0% {

		  border-color: var(--orange-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--orange-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_orange {

		0% {

		  border-color: var(--orange-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--orange-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_orange {

		0% {

		  border-color: var(--orange-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--orange-border-color);

		}

	  }



	  .border-pulse-purple {

		animation-name: pulse_border_purple;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_purple;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_purple;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--purple-border-color);;

	  }

	  

	  @keyframes pulse_border_purple {

		0% {

		  border-color: var(--purple-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--purple-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_purple {

		0% {

		  border-color: var(--purple-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--purple-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_purple {

		0% {

		  border-color: var(--purple-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--purple-border-color);

		}

	  }



	  .border-pulse-blue {

		animation-name: pulse_border_blue;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_blue;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_blue;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--blue-border-color);

	  }



	  .round {

		border-width: 2px;

		border-radius: 50%;

	  }

	  

	  @keyframes pulse_border_blue {

		0% {

		  border-color: var(--blue-border-color);

		}

		50% {

		  border-color:  var(--black-border-color);

		}

		100% {

		  border-color: var(--blue-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_blue {

		0% {

		  border-color: var(--blue-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--blue-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_blue {

		0% {

		  border-color: var(--blue-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--blue-border-color);

		}

	  }

	  .border-pulse-red {

		animation-name: pulse_border_red;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_red;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_red;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--red-border-color);;

	  }

	  

	  @keyframes pulse_border_red {

		0% {

		  border-color: var(--red-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--red-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_red {

		0% {

		  border-color: var(--red-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--red-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_red {

		0% {

		  border-color: var(--red-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--red-border-color);

		}

	  }



	  .border-pulse-green {

		animation-name: pulse_border_green;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_green;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_green;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--green-border-color);;

	  }

	  

	  @keyframes pulse_border_green {

		0% {

		  border-color: var(--green-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--green-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_green {

		0% {

		  border-color: var(--green-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--green-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_green {

		0% {

		  border-color: var(--green-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--green-border-color);

		}

	  }



	  .border-pulse-pink {

		animation-name: pulse_border_pink;

		animation-duration: 3s;

		animation-timing-function: linear;

		animation-iteration-count: infinite;

		-webkit-animation-name: pulse_border_pink;

		-webkit-animation-duration: 3s;

		-webkit-animation-timing-function: linear;

		-webkit-animation-iteration-count: infinite;

		-moz-animation-name: pulse_border_pink;

		-moz-animation-duration: 3s;

		-moz-animation-timing-function: linear;

		-moz-animation-iteration-count: infinite;

		border: 1px solid var(--pink-border-color);;

	  }

	  

	  @keyframes pulse_border_pink {

		0% {

		  border-color: var(--pink-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--pink-border-color);

		}

	  }

	  

	  @-webkit-keyframes pulse_border_pink {

		0% {

		  border-color: var(--pink-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--pink-border-color);

		}

	  }

	  

	  @-moz-keyframes pulse_border_pink {

		0% {

		  border-color: var(--pink-border-color);

		}

		50% {

		  border-color: var(--black-border-color);

		}

		100% {

		  border-color: var(--pink-border-color);

		}

	  }



	  

.border-rank1 {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

    border-color: #fd4603;

}



.color-rank1 {

	color: var(--rank-one-color);

	text-shadow: 2px 2px 4px #000000;

}



.bg-color-rank1 {

	background-color: var(--rank-one-color);

}





.color-purple {

	color: #c303fd;

	text-shadow: 2px 2px 4px #000000;

}



.border-purple {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

	border-color: #c303fd;

}



.color-gold {

	color: var(--rank-gold-color);

	text-shadow: 2px 2px 4px #000000;

}



.bg-color-gold {

	background-color: var(--rank-gold-color);

}



.border-gold {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #ffbf00;

}



.border-gold-2 {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

    border-color: #ffbf00;

}



.color-silver {

	color: var(--rank-silver-color);

	text-shadow: 2px 2px 4px #000000;

}



.bg-color-silver {

	background-color: var(--rank-silver-color);

}





.border-silver {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #D8D8D8;

}



.border-silver {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #D8D8D8;

}



.border-silver-new {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: var(--rank-silver-color);

}



.border-silver-2 {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

    border-color: #D8D8D8;

}



.border-silver-2-new {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

    border-color:  var(--rank-silver-color);

}



.color-bronze-no-shadow {

	color: var(--rank-bronze-color);

}



.color-silver-no-shadow {

	color: var(--rank-silver-color);

}



.color-gold-no-shadow {

	color: var(--rank-gold-color);

}



.color-rank1-no-shadow {

	color: var(--rank-one-color);

}



.color-paper-no-shadow {

	color: #aaa;}



.color-bronze {

	color: var(--rank-bronze-color);

	text-shadow: 2px 2px 4px #000000;

}



.bg-color-bronze {

	background-color: var(--rank-bronze-color);

}



.border-bronze {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #cd7f32;

}



.border-bronze-2 {

	border-width: 2px;

    border-style: solid;

    padding: 0px;

    border-color: #cd7f32;

}



.color-paper {

	color: #aaa;

	text-shadow: 2px 2px 4px #000000;

}



.border-paper {

	border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #aaa;

}



.border-blue {

    border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #0081b3;

}



.border-sky-blue {

    border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #7a9cce;

}



.border-dark-cyan {

    border-width: 1px;

    border-style: solid;

    padding: 0px;

    border-color: #056069;

}



.border-blue-groove { /* not in use */

    border-width: 5px; 

    border-style: groove;

    padding: 0px;

    border-color: #1e95d0;

}



.border-red-groove { /* not in use */

    border-width: 5px;

    border-style: groove;

    padding: 0px;

    border-color: #d01e1e;

}



.border-pink-groove { /* not in use */

    border-width: 5px;

    border-style: groove;

    padding: 0px;

    border-color: #d4609b;

}



.border-black-inset {

    border-width: 2px;

    border-style: inset;

    padding: 1px;

    border-color: #272426;

}



.border-orange-inset { /* not in use */

    border-width: 2px;

    border-style: inset;

    padding: 1px;

    border-color: #d44e0f;

}





.border-round-red-purple-gradient { 

	background: linear-gradient(to right, #ff0038, #ff68ff);

	padding: 2px;

	border-width: 0px;

	border-radius: 50%;

}



.border-round-emerald-gradient { 

	background: linear-gradient(to right, #10e17c, #e4f3ff);

	padding: 2px;

	border-width: 0px;

	border-radius: 50%;

}



.border-round-icy-gradient {

	background: linear-gradient(to right, #0d85b6, #e4f3ff);

	padding: 2px;

	border-width: 0px;

	border-radius: 50%;

}



.border-red-purple-gradient { 

	background: linear-gradient(to right, #ff0038, #ff68ff);

	padding: 2px;

	border-width: 0px;

}



.border-icy-gradient {

	background: linear-gradient(to right, #0d85b6, #e4f3ff);

	padding: 2px;

	border-width: 0px;

}



.border-emerald-gradient { 

	background: linear-gradient(to right, #10e17c, #e4f3ff);

	padding: 2px;

	border-width: 0px;

}



.border-lime-gradient { 

background: linear-gradient(to right,#d5ffd5,#adff68);

padding: 2px;

border-width: 0px;

}



.border-round-lime-gradient { 

background: linear-gradient(to right,#d5ffd5,#adff68);

padding: 2px;

border-width: 0px;

border-radius: 50%;

}



.badge-rank {

	color: #ffffff;

	text-shadow: 2px 2px 4px #000000;

}





.shine{

	font-weight: bold;

	text-decoration: none;	

	-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);

	-webkit-mask-size: 200%;

	 animation: shine 2.5s linear infinite;

	 animation-delay: 1s;

 }

 

 

 

 .shine-delayed {

	font-weight: bold;

	text-decoration: none;	

	-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);

   -webkit-mask-size: 200%;

	animation: shine-delayed 2.5s linear infinite;

	animation-delay: 1s;

 }

 

 

 

 @keyframes shine {

   from { -webkit-mask-position: 150%; }

   to { -webkit-mask-position: -50%; }

 }

 

 

 

 @keyframes shine-delayed{

   0% { -webkit-mask-position: 150%; }

   25% { -webkit-mask-position: -50%;}

   100% { -webkit-mask-position: -50%;}

 }



.border-amethyst

{

	border-width: 3px;

    border-style: inset;

    padding: 0px;

    border-color: #7e08f5

}



.border-round-amethyst

{

	border-width: 3px;

    border-style: inset;

    padding: 0px;

    border-color: #7e08f5;

	border-radius: 50%;

}



.border-sapphire

{

	border-width: 3px;

    border-style: ridge;

    padding: 0px;

    border-color: #007bff;

}



.border-round-sapphire

{

	border-width: 3px;

    border-style: inset;

    padding: 0px;

    border-color: #007bff;

	border-radius: 50%;

}



.border-round-black

{

	border-width: 3px;

    border-style: solid;

    border-color: #000000;

	border-radius: 50%;

}



.border-black

{

	border-width: 2px;

    border-style: solid;

    border-color: #000000

}



.border-amethyst-rotated

{

	border-width: 5px;

    border-style: inset;

    padding: 0px;

    border-color: #7e08f5;

	transform: rotate(-45deg);

}



/* New avatar frames */

@property --spin-angle {

  syntax: '<angle>';

  initial-value: 0deg;

  inherits: false;

}



@keyframes border-spin {

  to { --spin-angle: 360deg; }

}





.border-chroma,

.border-round-chroma {

  box-sizing: border-box !important;

  border: 2px solid transparent !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #ff0055,

      #ff7700,

      #ffeb00,

      #00e676,

      #00b0ff,

      #9c27b0,

      #ff0055

    ) border-box !important;

  animation: border-spin 2.5s linear infinite !important;

  display: inline-block;

  vertical-align: middle;

}



.border-round-chroma {

  border-radius: 50% !important;

}

/* chroma avatar frames end */





/* Base avatar settings */

.border-glacial, .border-round-glacial,

.border-ember, .border-round-ember,

.border-neon, .border-round-neon,

.border-cosmic, .border-round-cosmic {

  box-sizing: border-box !important;

  border: 2px solid transparent !important;

  display: inline-block;

  vertical-align: middle;

}

/* Glacial

/* Square */

.border-glacial {

  border-radius: 0px !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #00e5ff 0deg,
      #ffffff 30deg,

      #00b0ff 70deg,

      #0f2838 180deg,

      #00b0ff 290deg,

      #ffffff 330deg,

      #00e5ff 360deg

    ) border-box !important;

  animation: border-spin 3.3s linear infinite, frost-glow 3s ease-in-out infinite alternate !important;

}

/* Round */

.border-round-glacial {

  border-radius: 50% !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #00e5ff 0deg,

      #ffffff 30deg,

      #00b0ff 70deg,

      #0f2838 180deg,

      #00b0ff 290deg,

      #ffffff 330deg,

      #00e5ff 360deg

    ) border-box !important;

  animation: border-spin 3.3s linear infinite, frost-glow 3s ease-in-out infinite alternate !important;

}

@keyframes frost-glow {

  0%   { box-shadow: 0 0 2px rgba(0, 229, 255, 0.4); }

  100% { box-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 9px rgba(0, 229, 255, 0.4); }

}

/* Ember

/* Square */

.border-ember {

  border-radius: 0px !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    linear-gradient(135deg, #ff1a00, #ff7700, #ffea00, #ff3300, #990000) border-box !important;

  background-size: 100% 100%, 300% 300% !important;

  animation: ember-flow 4.2s ease infinite, fire-flicker 2.7s ease-in-out infinite alternate !important;

}

/* Round */

.border-round-ember {

  border-radius: 50% !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    linear-gradient(135deg, #ff1a00, #ff7700, #ffea00, #ff3300, #990000) border-box !important;

  background-size: 100% 100%, 300% 300% !important;

  animation: ember-flow 4.2s ease infinite, fire-flicker 2.7s ease-in-out infinite alternate !important;

}

@keyframes ember-flow {

  0%   { background-position: 0% 0%, 0% 50%; }

  50%  { background-position: 0% 0%, 100% 50%; }

  100% { background-position: 0% 0%, 0% 50%; }

}

@keyframes fire-flicker {

  0%   { box-shadow: 0 0 2px rgba(255, 40, 0, 0.5); }

  50%  { box-shadow: 0 0 5px rgba(255, 120, 0, 0.7); }

  100% { box-shadow: 0 0 7px rgba(255, 20, 0, 0.75), 0 0 11px rgba(255, 80, 0, 0.4); }

}



/* Neon */

/* Square */

.border-neon {

  border-radius: 0px !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #00f0ff 0deg,

      #00f0ff 90deg,

      #ff007f 180deg,

      #ff007f 270deg,

      #00f0ff 360deg

    ) border-box !important;

  animation: border-spin 2.7s linear infinite, neon-glow 1.8s ease-in-out infinite alternate !important;

}

/* Round */

.border-round-neon {

  border-radius: 50% !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #00f0ff 0deg,

      #00f0ff 90deg,

      #ff007f 180deg,

      #ff007f 270deg,

      #00f0ff 360deg

    ) border-box !important;

  animation: border-spin 2.7s linear infinite, neon-glow 1.8s ease-in-out infinite alternate !important;

}

@keyframes neon-glow {

  0%   { box-shadow: 0 0 3px #00f0ff, 0 0 5px rgba(255, 0, 127, 0.3); }

  100% { box-shadow: 0 0 5px #ff007f, 0 0 8px rgba(0, 240, 255, 0.45); }

}

/* Cosmic*/

/* Square */

.border-cosmic {

  border-radius: 0px !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #8a2be2 0deg,

      #e0b0ff 45deg,

      #4b0082 120deg,

      #0d0221 180deg,

      #4b0082 240deg,

      #e0b0ff 315deg,

      #8a2be2 360deg

    ) border-box !important;

  animation: border-spin 5.25s linear infinite, void-pulse 3.75s ease-in-out infinite alternate !important;

}

/* Round */

.border-round-cosmic {

  border-radius: 50% !important;

  background: 

    linear-gradient(#171a21, #171a21) padding-box,

    conic-gradient(

      from var(--spin-angle),

      #8a2be2 0deg,

      #e0b0ff 45deg,

      #4b0082 120deg,

      #0d0221 180deg,

      #4b0082 240deg,

      #e0b0ff 315deg,

      #8a2be2 360deg

    ) border-box !important;

  animation: border-spin 5.25s linear infinite, void-pulse 3.75s ease-in-out infinite alternate !important;

}

@keyframes void-pulse {

  0%   { box-shadow: 0 0 2px rgba(138, 43, 226, 0.4); }

  100% { box-shadow: 0 0 6px rgba(224, 176, 255, 0.7), 0 0 10px rgba(138, 43, 226, 0.35); }

}









img.border-plusone {

  border: 2px solid #22c55e !important;

  border-radius: 0px !important;

  box-shadow: 0 0 5px rgba(34, 197, 94, 0.45) !important;

}

.border-round-plusone {

  border: 2px solid #22c55e !important;

  border-radius: 50% !important;

  box-shadow: 0 0 5px rgba(34, 197, 94, 0.45) !important;

}



.plusone-container {

  position: relative !important;

  display: inline-block !important;

  vertical-align: middle !important;

  line-height: 0 !important;

}

/* Floating +1 elements */

.plusone-container > .plus-float {

  position: absolute;

  pointer-events: none;

  font-family: 'Segoe UI', -apple-system, Roboto, sans-serif;

  font-weight: 900;

  letter-spacing: -0.5px;

  color: #22c55e;

  text-shadow: 0 0 2px #000, 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(34, 197, 94, 0.8);

  opacity: 0;

  z-index: 10;

  line-height: 1;

}

.plusone-container > .plus-float.f1 {

  font-size: 14px;

  bottom: 2px;

  left: 4px;

  animation: p-float-1 2.5s ease-out infinite;

}

.plusone-container > .plus-float.f2 {

  font-size: 12px;

  bottom: 6px;

  right: 4px;

  color: #4ade80;

  animation: p-float-2 2.5s ease-out infinite 1.25s;

}

@keyframes p-float-1 {

  0%   { opacity: 0; transform: translateY(0) scale(0.7); }

  12%  { opacity: 1; transform: translateY(-3px) scale(1.05); }

  65%  { opacity: 0.9; transform: translateY(-18px) scale(0.95); }

  100% { opacity: 0; transform: translateY(-28px) scale(0.7); }

}

@keyframes p-float-2 {

  0%   { opacity: 0; transform: translateY(0) scale(0.65); }

  12%  { opacity: 1; transform: translateY(-3px) scale(1.05); }

  65%  { opacity: 0.85; transform: translateY(-16px) scale(0.9); }

  100% { opacity: 0; transform: translateY(-26px) scale(0.65); }

}




/* Shared wrapper: exactly 40×40; effects extend outside its box. */
:is(.border-inferno, .border-round-inferno) {
  --inferno-radius: 4px;
  --inferno-delay: 0s;

  position: relative;
  isolation: isolate;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--inferno-radius);
  vertical-align: middle;
  overflow: visible;
  background: #220500;

  /* Static shadows: never interpolated frame by frame. */
  box-shadow:
    0 0 0 1px #220500,
    0 0 5px 1px rgb(255 26 0 / 55%),
    0 0 11px 2px rgb(255 123 0 / 24%);
}

.border-round-inferno {
  --inferno-radius: 50%;
}

/* Opaque backing keeps the molten layer behind the picture. */
:is(.border-inferno, .border-round-inferno) > img {
  position: relative;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  background: #220500;
}

/*
 * Fixed silhouette; only the oversized gradient inside rotates.
 * This prevents a square border rotating into a diamond.
 */
:is(.border-inferno, .border-round-inferno) > .inferno-rim {
  position: absolute;
  z-index: 1;
  inset: -2px;
  overflow: hidden;
  border-radius: calc(var(--inferno-radius) + 2px);
  background: #ff1a00;
  pointer-events: none;
}

.border-round-inferno > .inferno-rim {
  border-radius: 50%;
}

:is(.border-inferno, .border-round-inferno) > .inferno-rim::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    #220500   0deg,
    #ff1a00  42deg,
    #ff7b00  72deg,
    #ffd000  88deg,
    #ff7b00 102deg,
    #220500 145deg,
    #ff1a00 190deg,
    #ff7b00 226deg,
    #ffd000 244deg,
    #ff1a00 266deg,
    #220500 310deg,
    #220500 360deg
  );
  transform-origin: center;
  animation: inferno-flow 5s linear infinite;
  animation-delay: var(--inferno-delay);
}

/* Heat halo: SVG distortion is static; CSS moves/fades the result. */
:is(.border-inferno, .border-round-inferno)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px;
  box-sizing: border-box;
  border: 1px solid #ff7b00;
  border-radius: calc(var(--inferno-radius) + 2px);
  pointer-events: none;

  box-shadow:
    0 0 3px 1px rgb(255 208 0 / 65%),
    0 0 7px 2px rgb(255 123 0 / 50%),
    0 0 12px 3px rgb(255 26 0 / 28%);

  filter: url("#inferno-heat");
  transform-origin: center;
  animation: inferno-heat-pulse 2.8s ease-in-out infinite;
  animation-delay: var(--inferno-delay);
}

.border-round-inferno::before {
  border-radius: 50%;
}

/* Several embers painted into one small animated layer. */
:is(.border-inferno, .border-round-inferno)::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -4px;
  top: -6px;
  width: 48px;
  height: 52px;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 5px 38px,
      #ffd000 0 .65px,
      rgb(255 123 0 / 55%) 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 44px 29px,
      #ff7b00 0 .8px,
      rgb(255 26 0 / 45%) 1.2px,
      transparent 2.2px
    ),
    radial-gradient(
      circle at 12px 8px,
      #ffd000 0 .6px,
      rgb(255 123 0 / 45%) 1px,
      transparent 1.9px
    ),
    radial-gradient(
      circle at 36px 5px,
      #ff7b00 0 .7px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 42px 46px,
      #ff1a00 0 .7px,
      transparent 1.8px
    );

  opacity: 0;
  animation: inferno-embers 2.8s linear infinite;
  animation-delay: var(--inferno-delay);
}

@keyframes inferno-flow {
  from { transform: rotate(0turn); }
  to   { transform: rotate(1turn); }
}

@keyframes inferno-heat-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: .45;
  }
  40% {
    transform: scale(1.045);
    opacity: .85;
  }
  70% {
    transform: scale(1.015);
    opacity: .6;
  }
}

@keyframes inferno-embers {
  0% {
    transform: translate3d(-1px, 5px, 0);
    opacity: 0;
  }
  18% { opacity: .9; }
  65% { opacity: .65; }
  100% {
    transform: translate3d(2px, -9px, 0);
    opacity: 0;
  }
}

/* Optional dense-list mode: retain motion, omit SVG processing. */
.inferno-lite :is(.border-inferno, .border-round-inferno)::before {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.border-inferno, .border-round-inferno)::before,
  :is(.border-inferno, .border-round-inferno)::after,
  :is(.border-inferno, .border-round-inferno) > .inferno-rim::before {
    animation: none;
  }

  :is(.border-inferno, .border-round-inferno)::before {
    transform: none;
    opacity: .55;
    filter: none;
  }

  :is(.border-inferno, .border-round-inferno)::after {
    opacity: 0;
  }
}