:root {

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



.jela {
	cursor: pointer;
	position: relative;
	padding: .5rem 1.5rem;
	border-radius: 3.75rem;
	line-height: 2.0rem;
	font-size: calc(12px + 2vw);
	font-weight: 600;
	min-width: 40%;

	border: 1px solid #016630;
	background-image: linear-gradient(-180deg, #66FF99 0%, #009933 100%);
	box-shadow: 0 1rem 1.25rem 0 rgba(0, 102, 51, 0.50),
							0 -0.25rem 1.5rem rgba(0, 153, 51, 1) inset,
							0 0.75rem 0.5rem rgba(255,255,255, 0.4) inset,
							0 0.25rem 0.5rem 0 rgba(102, 255, 153, 1) inset;
}

.jela span {
	color: #013220; /* Dark green */
	text-shadow:
		1px 1px 0 rgba(0, 0, 0, 0.6),  /* Dark shadow to create carved effect */
		-1px -1px 0 rgba(255, 255, 255, 0.4); /* Light highlight for depth */
}

.jela::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.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255,255,255,0.00) 100%);
}


.jelb {
	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%;

	border: 1px solid #004080; /* Dark blue border */
	background-image: linear-gradient(-180deg, #99CCFF 0%, #0066CC 100%); /* Blue gradient */
	box-shadow:
		0 1rem 1.25rem 0 rgba(0, 51, 153, 0.5), /* Soft blue shadow */
		0 -0.25rem 1.5rem rgba(0, 102, 204, 1) inset, /* Deep blue inset */
		0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, /* White glossy highlight */
		0 0.25rem 0.5rem 0 rgba(153, 204, 255, 1) inset; /* Light blue inset */
}

.jelb span {
	color: #003366; /* Dark navy blue 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 */
}

.jelb::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%);
}

.jelc {
	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%;

	border: 1px solid #8B6508; /* Deep golden border */
	background-image: linear-gradient(-180deg, #FFC94A 0%, #8B6508 100%); /* Dark yellow gradient */
	box-shadow:
		0 1rem 1.25rem 0 rgba(139, 101, 8, 0.5), /* Soft shadow in deep golden */
		0 -0.25rem 1.5rem rgba(184, 134, 11, 1) inset, /* Deep golden inset */
		0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, /* White glossy highlight */
		0 0.25rem 0.5rem 0 rgba(255, 200, 74, 1) inset; /* Soft dark yellow inset */
}

.jelc span {
	color: #4F3201; /* Dark brownish-yellow 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 */
}

.jelc::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%);
}


.jeld {
	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%;

	border: 1px solid #8B0000; /* Dark red border */
	background-image: linear-gradient(-180deg, #FF6666 0%, #CC0000 100%); /* Red gradient */
	box-shadow:
		0 1rem 1.25rem 0 rgba(139, 0, 0, 0.5), /* Soft dark red shadow */
		0 -0.25rem 1.5rem rgba(204, 0, 0, 1) inset, /* Deep red inset */
		0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, /* White glossy highlight */
		0 0.25rem 0.5rem 0 rgba(255, 102, 102, 1) inset; /* Soft red inset */
}

.jeld span {
	color: #660000; /* Very dark red 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 */
}

.jeld::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%);
}

.score-text {
        align-items: center;
        gap: 5px;

    }

.jelscore {
    cursor: pointer;
    position: relative;
    padding: 0.5rem 1.0rem;
    border-radius: 3.75rem;
    line-height: 2.0rem;
    font-size: calc(12px + 2vw);
    font-weight: 600;
    min-width: 6rem;


    border: 1px solid #5E008F; /* Darker violet border */
    background-image: linear-gradient(-180deg, #A64DFF 0%, #5E008F 100%); /* Gradient in Dark Violet tones */
    box-shadow:
        0 1rem 1.25rem 0 rgba(94, 0, 143, 0.5), /* Soft violet shadow */
        0 -0.25rem 1.5rem rgba(148, 0, 211, 1) inset, /* DarkViolet inset */
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, /* White glossy highlight */
        0 0.25rem 0.5rem 0 rgba(166, 77, 255, 1) inset; /* Soft violet inset */
}

.jelscore span {
    color: #E5DAF2; /* Soft lavender 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 */
}

.jelscore::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%
    );
}

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

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


.halscore {
  font-size: calc(12px + 1vw);
  line-height: calc(12px + 2vw);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;

  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}