:root {

  --btn3: hsl(160, 86%, 63%);
}

/* CSS */
.button-77 {
  transition: all 0.3s ease;
  overflow: visible; /* Changed to visible so the backlight isn't clipped */
  position: relative;
  padding: 12px 20px;
  margin: 12px 12px 16px;
  border-radius: 50px;
  z-index: 1;

  /* Your Bronze/Caramel Base */
  background: linear-gradient(to bottom,
    #b37c2a 0%,
    #87560E 60%,
    #4a2f08 100%
  );

  color: white;
  font-weight: 800;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;

  /* 3D Shadows */
  box-shadow:
    0 6px 0px #4a2f08,
    0 8px 15px rgba(0, 0, 0, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

/* The Glossy Reflection Layer */
.button-77::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 50% 50% 40% 40%;
  pointer-events: none;
}

/* THE BACKLIGHT BLUR */
.button-77::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Match the button color for the glow */
  background: #b37c2a;
  border-radius: 50px;
  z-index: -1; /* Puts it behind the button */

  /* The animation */
  animation: backlightPulse 2.5s infinite ease-in-out;
}

@keyframes backlightPulse {
  0% {
    filter: blur(5px);
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    filter: blur(15px); /* Stronger blur for the glow */
    opacity: 0.8;       /* Brighter light */
    transform: scale(1.1); /* Expands past the button edges */
  }
  100% {
    filter: blur(5px);
    opacity: 0.4;
    transform: scale(0.95);
  }
}

.button-78 {
  transition: transform 0.2s ease;
  overflow: visible; /* Crucial: allows the aura to be seen outside the border */
  position: relative;
  padding: 12px 20px;
  border-radius: 50px;
  z-index: 2; /* Keeps the button body above the glow */

  /* Royal Plum Candy Base */
  background: linear-gradient(to bottom,
    #a81e81 0%,
    #7A0B59 60%,
    #450532 100%
  );

  color: white;
  font-weight: 800;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;

  /* Standard 3D Candy Shadows (Fixed) */
  box-shadow:
    0 6px 0px #450532,
    0 8px 15px rgba(0, 0, 0, 0.4),
    inset 0 2px 2px rgba(255, 255, 255, 0.4);
}

/* Internal Gloss (Static - No Animation) */
.button-78::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 15%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 50% 50% 40% 40%;
  pointer-events: none;
}

/* THE EXTERNAL BACKLIGHT (The only part that animates) */
.button-78::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ff00ea; /* Brighter neon for the aura */
  border-radius: 50px;
  z-index: -1; /* Placed behind the button body */

  /* Animation Restricted to this layer */
  animation: pureBacklight 2.5s infinite ease-in-out;
}

@keyframes pureBacklight {
  0% {
    filter: blur(5px);
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    filter: blur(15px); /* Light spreads outward */
    opacity: 0.6;       /* Light gets more intense */
    transform: scale(1.2); /* Light grows larger than the button */
  }
  100% {
    filter: blur(5px);
    opacity: 0.2;
    transform: scale(1);
  }
}

.candy-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the button under the line */
  width: 100%;
  padding: 20px 0;    /* Gives room for the backlight blur to expand */
  gap: 15px;          /* Clean space between the line and the button */
}

.candy-line-3d {
  width: 100%;
  height: 10px;       /* Slightly thicker for better 3D effect */
  border-radius: 5px;
  background: linear-gradient(to bottom,
    #450532 0%,      /* Deep shadow */
    #7A0B59 30%,     /* Base */
    #a81e81 50%,     /* Glint/Reflection */
    #7A0B59 70%,     /* Base */
    #450532 100%     /* Deep shadow */
  );
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  position: relative;
}

.highlighted-text {
  background-color: transparent;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmZmUwMDAiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K');
  background-position: 50% 50%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  background-repeat: no-repeat;
  background-size: cover;

   display: inline-block;
   font-family: Lucida Sans,Georgia,serif;
}


.jeltop {
	cursor: pointer;
	position: relative;
	padding: 0.5rem 1.5rem;
	border-radius: 3.75rem;
	line-height: 2.0rem;
	font-size: calc(12px + 2vw);
	font-weight: 600;
	min-width: 40%;
    animation: blurr3 2s;
    animation-iteration-count: infinite;

	border: 1px solid #00665C; /* Dark teal border */
	background-image: linear-gradient(-180deg, #76E0D9 0%, #3FB8AF 100%); /* Teal gradient */
	box-shadow:
		0 1rem 1.25rem 0 rgba(0, 102, 92, 0.5), /* Soft dark teal shadow */
		0 -0.25rem 1.5rem rgba(63, 184, 175, 1) inset, /* Teal inset */
		0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, /* White glossy highlight */
		0 0.25rem 0.5rem 0 rgba(118, 224, 217, 1) inset; /* Soft light teal inset */
}

.jeltop span {
	color: #004A43; /* Dark teal text */
	text-shadow:
		1px 1px 0 rgba(0, 0, 0, 0.6), /* Dark shadow for depth */
		-1px -1px 0 rgba(255, 255, 255, 0.4); /* Light highlight */
}

.jeltop::before {
	content: "";
	display: block;
	height: 0.25rem;
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 6vw);
	background: #fff;
	border-radius: 100%;
	opacity: 0.7;
	background-image: linear-gradient(
		-270deg,
		rgba(255, 255, 255, 0) 0%,
		#FFFFFF 20%,
		#FFFFFF 80%,
		rgba(255, 255, 255, 0) 100%
	); /* Glossy highlight */
}

.jeltopA {
	cursor: pointer;
	position: relative;

	/* Layout */
	display: flex;
	align-items: center;
	justify-content: space-between;

	/* 🔒 CRITICAL: prevent overflow */
	max-width: 100%;
    min-width: 0;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;

	/* Text behavior */
	white-space: nowrap;

	/* Spacing & text */
	padding: 0.5rem 1.5rem;
	border-radius: 3.75rem;
	line-height: 2rem;
	font-size: calc(12px + 1.1vw);
	font-weight: 600;

	/* Lavender theme */
	border: 1px solid #8A8ACC;
	background-image: linear-gradient(
		-180deg,
		#E6E6FF 0%,
		#CCCCFF 100%
	);

	box-shadow:
		0 1rem 1.25rem rgba(138, 138, 204, 0.45),
		0 -0.25rem 1.5rem rgba(204, 204, 255, 1) inset,
		0 0.75rem 0.5rem rgba(255, 255, 255, 0.5) inset,
		0 0.25rem 0.5rem rgba(230, 230, 255, 1) inset;
}

/* Jelly shine */
.jeltopA::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	height: 0.25rem;
	width: calc(100% - 6vw);
	border-radius: 100%;
	opacity: 1;
	pointer-events: none;

	background-image: linear-gradient(
		-270deg,
		rgba(255, 255, 255, 0) 0%,
		#FFFFFF 20%,
		#FFFFFF 80%,
		rgba(255, 255, 255, 0) 100%
	);
}

/* Text styling */
.jeltopA span {
	color: #3A3A6A;
	text-shadow:
		1px 1px 0 rgba(0, 0, 0, 0.55),
		-1px -1px 0 rgba(255, 255, 255, 0.45);
}

/* Left side (username) */
.jeltopA .fixed {
	flex: 0 0 auto;
	font-weight: 700;
	text-align: left;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 45%;
}

/* Right side (cycling text) */
.jeltopA .cycle {
	flex: 1 1 auto;
	margin-left: 1rem;
	text-align: right;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jeltopA .fixed,
.jeltopA .cycle {
	min-width: 0;              /* 🔥 REQUIRED */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jeltopA .fixed {
	flex: 0 0 45%;
}

.jeltopA .cycle {
	flex: 1 1 55%;
	text-align: right;
}

@keyframes blurr3 {
  0%,
  100% {
    box-shadow: 0 0 10px var(--btn3);
  }

  50% {
    box-shadow: 0 0 36px var(--btn3);
  }
}

.jeltopB {
    cursor: pointer;
    position: relative;

    /* Layout - Updated to Center */
    display: block;
    align-items: center;
    justify-content: center; /* Changed from space-between to center */

    /* 🔒 CRITICAL: prevent overflow */
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    /* Text behavior */
    white-space: nowrap;
    text-align: center; /* Ensures text inside remains centered */

  text-overflow: ellipsis;

    /* Spacing & text */
    padding: 0.5rem 1.5rem;
    border-radius: 3.75rem;
    line-height: 2rem;
    font-size: calc(12px + 1.1vw);
    font-weight: 600;
    color: #1A3A5A; /* Darker blue text for better contrast */

    /* Theme: #7BAEE0 (Sky Blue) */
    border: 1px solid #6297C9;
    background-image: linear-gradient(
       -180deg,
       #A9CFF2 0%,   /* Lighter tint */
       #7BAEE0 100%   /* Your base color */
    );

    /* Shadow configuration adapted for #7BAEE0 */
    box-shadow:
       0 1rem 1.25rem rgba(123, 174, 224, 0.45),
       0 -0.25rem 1.5rem rgba(169, 207, 242, 1) inset,
       0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
       0 0.25rem 0.5rem rgba(230, 240, 255, 1) inset;

    transition: transform 0.2s ease, filter 0.2s ease;
}

.jeltopB:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}