* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 100vh;
	background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ---------- Ruleta ---------- */
.container-roulette {
	height: 500px;
	width: 500px;
	background: #000000;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 25px #5a94ff;
	transition: 3s all;
}

.container-roulette div {
	height: 50%;
	width: 60px;
	clip-path: polygon(100% 0, 50% 100%, 0 0);
	transform: translateX(-50%);
	transform-origin: bottom;
	position: absolute;
	left: 44%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-family: monospace;
	font-weight: 1000;
	color: white;
	writing-mode: vertical-rl;
}

/* Textos internos */
.container-roulette a,
.container-roulette b,
.container-roulette c {
	margin-top: -65px;
}

/* 🎨 Segmentos negros */
.container-roulette .two { background: #0a0a0a; transform: rotate(13.85deg); }
.container-roulette .four { background: #0a0a0a; transform: rotate(41.55deg); }
.container-roulette .six { background: #0a0a0a; transform: rotate(69.25deg); }
.container-roulette .eight { background: #0a0a0a; transform: rotate(96.95deg); }
.container-roulette .ten { background: #0a0a0a; transform: rotate(124.65deg); }
.container-roulette .twelve { background: #0a0a0a; transform: rotate(152.35deg); }
.container-roulette .fourteen { background: #0a0a0a; transform: rotate(180.05deg); }
.container-roulette .sixteen { background: #0a0a0a; transform: rotate(207.75deg); }
.container-roulette .eighteen { background: #0a0a0a; transform: rotate(235.45deg); }
.container-roulette .twenty { background: #0a0a0a; transform: rotate(263.15deg); }
.container-roulette .twenty-two { background: #0a0a0a; transform: rotate(290.85deg); }
.container-roulette .twenty-four { background: #0a0a0a; transform: rotate(318.55deg); }
.container-roulette .twenty-six { background: #0a0a0a; transform: rotate(346.25deg); }

/* 💎 Segmentos azules con efecto glow animado */
.container-roulette .one,
.container-roulette .three,
.container-roulette .five,
.container-roulette .seven,
.container-roulette .nine,
.container-roulette .eleven,
.container-roulette .thirteen,
.container-roulette .fifteen,
.container-roulette .seventeen,
.container-roulette .twenty-one,
.container-roulette .twenty-three,
.container-roulette .twenty-five {
	background: linear-gradient(135deg, #4a8eff, #2e5eff, #4a8eff);
	background-size: 300% 300%;
	animation: softGlow 4s ease-in-out infinite;
	box-shadow: 
		0 0 20px #4a8eff,
		0 0 40px rgba(74,142,255,0.6),
		0 0 10px rgba(255,255,255,0.4),
		inset 0 0 20px rgba(255,255,255,0.1);
	transition: all 0.3s ease-in-out;
}

/* Segmento 19 — solo GIF sin efectos */
.container-roulette .nineteen {
	background: url("https://www.gifcen.com/wp-content/uploads/2024/12/blue-gif-5.gif") center/cover no-repeat;
	transform: rotate(249.3deg);
}

/* Posiciones individuales de los azules */
.container-roulette .one { transform: rotate(0deg); }
.container-roulette .three { transform: rotate(27.7deg); }
.container-roulette .five { transform: rotate(55.4deg); }
.container-roulette .seven { transform: rotate(83.1deg); }
.container-roulette .nine { transform: rotate(110.8deg); }
.container-roulette .eleven { transform: rotate(138.5deg); }
.container-roulette .thirteen { transform: rotate(166.2deg); }
.container-roulette .fifteen { transform: rotate(193.9deg); }
.container-roulette .seventeen { transform: rotate(221.6deg); }
.container-roulette .twenty-one { transform: rotate(277deg); }
.container-roulette .twenty-three { transform: rotate(304.7deg); }
.container-roulette .twenty-five { transform: rotate(332.4deg); }

/* ✨ Animación del glow azul */
@keyframes softGlow {
	0% {
		background-position: 0% 50%;
		filter: brightness(1);
		box-shadow:
			0 0 15px #4a8eff,
			0 0 30px rgba(74,142,255,0.4),
			0 0 10px rgba(255,255,255,0.3),
			inset 0 0 15px rgba(255,255,255,0.1);
	}
	50% {
		background-position: 100% 50%;
		filter: brightness(1.35);
		box-shadow:
			0 0 30px #4a8eff,
			0 0 55px rgba(74,142,255,0.8),
			0 0 20px rgba(255,255,255,0.5),
			inset 0 0 25px rgba(255,255,255,0.2);
	}
	100% {
		background-position: 0% 50%;
		filter: brightness(1);
		box-shadow:
			0 0 15px #4a8eff,
			0 0 30px rgba(74,142,255,0.4),
			0 0 10px rgba(255,255,255,0.3),
			inset 0 0 15px rgba(255,255,255,0.1);
	}
}

/* ---------- Centro ---------- */
.mid {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	position: absolute;
	background: #1a1a1a;
	box-shadow: 0 0 15px #5a94ff, 0 0 30px #5f86ff;
}

/* ---------- Botones ---------- */
#spin {
	height: 60px;
	width: 200px;
	position: absolute;
	margin-top: 740px;
	transition: 0.2s all;
	box-shadow: 0 0 15px #5f86ff;
	border: 2px solid #5a94ff;
	background: transparent;
	color: #fff;
	font-weight: bold;
	font-family: monospace;
	cursor: pointer;
}

#spin:hover {
	background: #5a94ff;
	color: #000;
	box-shadow: 0 0 25px #5f86ff;
}

/* Campo de texto */
#code {
	height: 40px;
	width: 200px;
	position: absolute;
	margin-top: 605px;
	background: #1a1a1a;
	cursor: pointer;
	transition: 0.2s all;
	text-align: center;
	box-shadow: 0 0 15px #5f86ff;
	border: 2px solid #5a94ff;
	color: white;
	font-family: monospace;
}

/* Flecha */
.stoper {
	height: 25px;
	width: 20px;
	background: #ffffff;
	position: absolute;
	clip-path: polygon(100% 0,50% 100%,0 0);
	margin-top: -500px;
	box-shadow: 0 0 10px #5a94ff;
}

/* ---------- Logo ---------- */
.logo {
	position: absolute;
	height: 15%;
	top: 5%;
	display: block;
	margin: auto;
	filter: drop-shadow(0 0 5px #5a94ff)
			drop-shadow(0 0 10px #5f86ff);
}

/* ---------- Placeholder y botones ---------- */
::placeholder {
	color: #5a94ff;
	opacity: 1;
}

.btn-outline-warning:hover {
	color: #fff;
	background-color: #5a94ff;
	border-color: #5a94ff;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
	color: #fff;
	background-color: #5f86ff;
	border-color: #5a94ff;
}

/* ---------- Ajuste al traducir ---------- */
.container-roulette div.translated {
	margin-top: -30px;
}