:root {
    --item-color-exc: #2ff387;
    --item-color-socket-opt: #cc33cc;
    --item-color-socket: #cc66cc;
    --item-color-normal: #ffffff;
    --item-color-life-opt: #8cb0ea;
    --item-color-improved: #f4cb3f;
    --item-color-anc: #0066cc;
    --item-color-anc-setopt: #ffcc66;
    --item-color-nocolor: #f4cb3f;
    --item-color-fenrir: #8cb0ea;
    --item-color-fenrir-gold: #f4cb3f;
    --item-color-errtel-title: #ffffff;
    --item-color-errtel-opt: #8CB0EA;
    --item-color-errtel1: #ff0000;
    --item-color-errtel2: #8cb0ea;
    --item-color-errtel3: #e6bf3c;
    --item-color-errtel4: #26e027;
    --item-color-errtel5: #5b1659;
    --item-tooltip-bg: #2c3e50;
}

	/* ITEM TOOLTIP */
.item-box {
    background: rgba(0, 0, 0, 0.9);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    min-width: 200px;
    padding: 0 10px 10px 10px;
    font-size: 12px;
	border-radius: 15px;
}

.mucms-item-tooltip {
    position: absolute;
    display: none;
    min-width: 300px;
    left: 0;
    top: 0;
    padding: 5px;
    z-index: 9999;
}
.item-name {
    padding: 4px 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra suave para el reflejo */
}
.item-serial {
    color: #ffffff !important;
    padding-top: 10px;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); /* Blanco puro, sombra doble */
}
.item-info {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3), -1px -1px 3px rgba(0, 0, 0, 0.3); /* Blanco puro, sombra doble */
}
.item-info-section {
    padding-top: 10px;
    /* Esto es un contenedor, no texto, así que el text-shadow no aplica directamente.
       Si quieres un efecto visual, podrías considerar un box-shadow si tuviera un fondo.
       Mantendré el text-shadow si contiene texto. */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Si esta sección contiene texto */
}
.item-class-req {
    color: #b4b4b4 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra para texto gris */
}
.item-opt-jog {
    color: #ff99cc !important; /* Rosa */
    padding-top: 10px;
    text-shadow: 1px 1px 3px rgba(255, 153, 204, 0.5), -1px -1px 3px rgba(0, 0, 0, 0.3); /* Sombra del mismo color */
}
.item-opt-harmony {
    color: #ffcc00 !important; /* Amarillo/Dorado */
    padding-top: 10px;
    text-shadow: 1px 1px 3px rgba(255, 204, 0, 0.5), -1px -1px 3px rgba(0, 0, 0, 0.3); /* Sombra del mismo color */
}
.item-opt-skill {
    color: #9aadd5 !important; /* Azul grisáceo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra sutil */
}
.item-opt-luck {
    color: #9aadd5 !important; /* Azul grisáceo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra sutil */
}
.item-opt-life {
    color: #9aadd5 !important; /* Azul grisáceo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra sutil */
}
.item-opt-exc {
    color: #4d668d !important; /* Azul oscuro */
    padding-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra más oscura para texto oscuro */
}
.item-opt-anc {
    color: #9aadd5 !important; /* Azul grisáceo */
    padding-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Sombra sutil */
}
.item-opt-socket {
    color: #4d668d !important; /* Azul oscuro */
    padding-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra más oscura para texto oscuro */
}
.item-mastery-title {
    color: var(--item-color-socket-opt) !important;
}
.item-opt-mastery {
    color: #4d668d !important;
    padding-top: 10px;
}
.item-expiration {
    color: #ff544f !important;
    padding-top: 10px;
}
.muun-name {
    color: #9aadd5;
    font-size: 14px;
    padding: 2px 0 2px 0;
}
.muun-info {
    color: #9aadd5;
}
.muun-opt-expiration {
    color: #cf6e21;
    margin-top: 1rem;
}
.muun-opt-expiration-date {
    color: #9aadd5;
}

	/* Página/encabezado */
	.ruleta-page {
		padding: 10px 0 24px;
	}

	.ruleta-header {
		max-width: 920px;
		margin: 0 auto 10px auto;
		padding: 8px 4px;
		text-align: center;
	}

	.ruleta-title {
		margin: 0 0 6px 0;
		font-size: 26px;
		font-weight: 800;
		letter-spacing: .3px;
		color: #f1f1f1;
		text-shadow: 0 1px 2px rgba(0,0,0,.6);
	}

	.ruleta-subtitle {
		margin: 0;
		font-size: 14px;
		color: #c7c7c7;
	}

	/* Contenedor general */
	.ruleta-section {
		padding: 20px 0;
	}

	.ruleta {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* Ventana visible de la ruleta */
	.ruleta__viewport {
		position: relative;
		overflow: hidden;
		width: 100%;
		max-width: 920px; /* ajustable al diseño del template */
		margin: 0 auto;
		height: 240px; /* alto de los ítems */
		border: 1px solid rgba(255,255,255,0.12);
		border-radius: 10px;
		background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
	}

	/* Pista horizontal que se mueve */
	.ruleta__track {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0 16px;
		will-change: transform;
		transform: translate3d(0,0,0);
		transition: transform 4s cubic-bezier(0.12, 0.65, 0.05, 1);
	}

	/* Ítems/premios */
	.ruleta__item {
		flex: 0 0 280px; /* ancho de cada premio */
		height: 176px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
		border: 1px solid rgba(255,255,255,0.18);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.4);
		color: #ddd;
		text-align: center;
	}

	/* Fondo circular para mejorar visibilidad de GIFs transparentes */
	.ruleta__item::before {
		content: '';
		display: block;
		width: 96px;
		height: 96px;
		border-radius: 50%;
		background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.25), rgba(255,255,255,0.08) 60%, rgba(0,0,0,0) 61%);
		margin-bottom: 6px;
	}

	.ruleta__item img {
		width: 88px;
		height: 88px;
		object-fit: contain;
		filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
	}

	.ruleta__item span {
		font-size: 16px;
		line-height: 1.2;
	}

	/* Indicador central (marca de selección) */
	.ruleta__indicator {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 2px;
		transform: translateX(-50%);
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,193,7,0.9) 35%, rgba(255,193,7,0.9) 65%, rgba(255,255,255,0) 100%);
		pointer-events: none;
	}

	/* Degradés laterales para suavizar el corte */
	.ruleta__fade {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 64px;
		pointer-events: none;
	}

	.ruleta__fade--left {
		left: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
	}

	.ruleta__fade--right {
		right: 0;
		background: linear-gradient(270deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
	}

	/* Indicador de créditos */
	.ruleta__credits {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		margin: 12px 0;
		padding: 10px;
		font-size: 14px;
		color: #ddd;
	}

	.ruleta__credits strong {
		color: #b17714;
		font-weight: 600;
	}

	.ruleta__cost {
		color: #999;
		font-size: 13px;
	}

	.ruleta__login-warning {
		color: #ff6b6b;
		font-weight: 600;
	}

	/* Controles */
	.ruleta__controls {
		display: flex;
		justify-content: center;
	}

	.ruleta__btn {
		appearance: none;
		border: 1px solid #795404;
		background: linear-gradient(180deg, #b17714, #8a5a0e);
		color: #1b0f00;
		font-weight: 600;
		padding: 10px 18px;
		border-radius: 8px;
		cursor: pointer;
		transition: filter .2s ease;
	}

	.ruleta__btn:hover {
		filter: brightness(1.05);
	}

	.ruleta__btn:disabled {
		opacity: .6;
		cursor: not-allowed;
	}

	/* Resultado */
	.ruleta__result {
		margin-top: 6px;
		text-align: center;
		color: #e8d29a;
		font-weight: 600;
	}

	/* Modal de mensajes */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.75);
		backdrop-filter: blur(8px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10000;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.modal-overlay.show {
		opacity: 1;
	}

	.modal-content {
		background: linear-gradient(180deg, rgba(30, 20, 15, 0.98), rgba(15, 10, 5, 0.98));
		border: 1px solid rgba(255, 193, 7, 0.3);
		border-radius: 20px;
		padding: 32px;
		max-width: 420px;
		width: 90%;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 193, 7, 0.1) inset;
		text-align: center;
		transform: scale(0.9) translateY(20px);
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		position: relative;
		overflow: hidden;
	}

	.modal-overlay.show .modal-content {
		transform: scale(1) translateY(0);
	}

	.modal-content::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, #b17714, #ffc107, #b17714);
		background-size: 200% 100%;
		animation: shimmer 2s linear infinite;
	}

	@keyframes shimmer {
		0% { background-position: 200% 0; }
		100% { background-position: -200% 0; }
	}

	.modal-icon {
		margin-bottom: 16px;
	}

	.modal-icon-symbol {
		font-size: 64px;
		display: inline-block;
		animation: bounce 0.6s ease;
	}

	@keyframes bounce {
		0%, 100% { transform: translateY(0) scale(1); }
		50% { transform: translateY(-10px) scale(1.1); }
	}

	.modal-title {
		margin: 0 0 12px 0;
		font-size: 24px;
		font-weight: 700;
		color: #ffc107;
		text-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
		letter-spacing: 0.5px;
	}

	.modal-message {
		margin: 0 0 24px 0;
		font-size: 16px;
		line-height: 1.6;
		color: #e5e5e5;
	}

	.modal-btn {
		appearance: none;
		border: none;
		background: linear-gradient(180deg, #ffc107, #b17714);
		color: #1b0f00;
		font-weight: 700;
		font-size: 16px;
		padding: 12px 32px;
		border-radius: 12px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.modal-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6);
		background: linear-gradient(180deg, #ffd700, #c98917);
	}

	.modal-btn:active {
		transform: translateY(0);
	}

	/* Modal de premio ganado */
	.modal-premio-content {
		background: linear-gradient(180deg, rgba(30, 20, 15, 0.98), rgba(15, 10, 5, 0.98));
		border: 2px solid rgba(255, 193, 7, 0.4);
		border-radius: 24px;
		padding: 40px 32px;
		max-width: 480px;
		width: 90%;
		box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 193, 7, 0.2) inset, 0 0 60px rgba(255, 193, 7, 0.3);
		text-align: center;
		transform: scale(0.9) translateY(20px);
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		position: relative;
		overflow: hidden;
		animation: modalPremioPulse 2s ease infinite;
	}

	@keyframes modalPremioPulse {
		0%, 100% { box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 193, 7, 0.2) inset, 0 0 60px rgba(255, 193, 7, 0.3); }
		50% { box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 193, 7, 0.4) inset, 0 0 80px rgba(255, 193, 7, 0.5); }
	}

	.modal-overlay.show .modal-premio-content {
		transform: scale(1) translateY(0);
	}

	.modal-premio-header {
		position: relative;
		margin-bottom: 24px;
	}

	.modal-premio-icon-bg {
		width: 140px;
		height: 140px;
		margin: 0 auto;
		background: radial-gradient(circle at 40% 35%, rgba(255, 193, 7, 0.4), rgba(177, 119, 20, 0.2) 60%, rgba(0, 0, 0, 0) 61%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid rgba(255, 193, 7, 0.5);
		box-shadow: 0 0 40px rgba(255, 193, 7, 0.6), inset 0 0 30px rgba(255, 193, 7, 0.2);
		animation: iconFloat 3s ease-in-out infinite;
		position: relative;
	}

	@keyframes iconFloat {
		0%, 100% { transform: translateY(0) scale(1); }
		50% { transform: translateY(-10px) scale(1.05); }
	}

	.modal-premio-img {
		width: 100px;
		height: 100px;
		object-fit: contain;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
		animation: imgRotate 4s ease-in-out infinite;
	}

	@keyframes imgRotate {
		0%, 100% { transform: rotate(0deg); }
		25% { transform: rotate(-5deg); }
		75% { transform: rotate(5deg); }
	}

	.modal-premio-confetti {
		position: absolute;
		top: -20px;
		right: 20px;
		font-size: 48px;
		animation: confettiBounce 1.5s ease infinite;
	}

	@keyframes confettiBounce {
		0%, 100% { transform: translateY(0) rotate(0deg); }
		50% { transform: translateY(-20px) rotate(180deg); }
	}

	.modal-premio-title {
		margin: 0 0 8px 0;
		font-size: 28px;
		font-weight: 800;
		color: #ffc107;
		text-shadow: 0 0 30px rgba(255, 193, 7, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
		letter-spacing: 1px;
		text-transform: uppercase;
		animation: titleGlow 2s ease infinite;
	}

	@keyframes titleGlow {
		0%, 100% { text-shadow: 0 0 30px rgba(255, 193, 7, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5); }
		50% { text-shadow: 0 0 50px rgba(255, 193, 7, 1), 0 2px 4px rgba(0, 0, 0, 0.5); }
	}

	.modal-premio-name {
		margin: 0 0 24px 0;
		font-size: 20px;
		font-weight: 600;
		color: #e5e5e5;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	.modal-premio-stats {
		background: rgba(0, 0, 0, 0.4);
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 24px;
		border: 1px solid rgba(255, 193, 7, 0.2);
	}

	.modal-premio-stat-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.modal-premio-stat-item:last-child {
		border-bottom: none;
	}

	.modal-premio-stat-label {
		color: #999;
		font-size: 14px;
	}

	.modal-premio-stat-value {
		color: #ffc107;
		font-weight: 600;
		font-size: 14px;
	}

	.modal-premio-footer {
		margin-top: 24px;
	}

	.modal-premio-btn {
		appearance: none;
		border: none;
		background: linear-gradient(180deg, #ffc107, #b17714);
		color: #1b0f00;
		font-weight: 700;
		font-size: 18px;
		padding: 14px 40px;
		border-radius: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 6px 20px rgba(255, 193, 7, 0.5);
		text-transform: uppercase;
		letter-spacing: 1px;
		position: relative;
		overflow: hidden;
	}

	.modal-premio-btn::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.modal-premio-btn:hover::before {
		width: 300px;
		height: 300px;
	}

	.modal-premio-btn:hover {
		transform: translateY(-2px) scale(1.05);
		box-shadow: 0 8px 25px rgba(255, 193, 7, 0.7);
		background: linear-gradient(180deg, #ffd700, #c98917);
	}

	.modal-premio-btn:active {
		transform: translateY(0) scale(1);
	}

	/* Sección de premios detallados */
	.premios-detalle-section {
		padding: 40px 0;
		background: linear-gradient(180deg, rgba(10, 7, 5, 0.95), rgba(5, 3, 2, 0.98));
		border-top: 1px solid rgba(255, 193, 7, 0.1);
	}

	.premios-detalle-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.premios-detalle-title {
		margin: 0 0 8px 0;
		font-size: 32px;
		font-weight: 800;
		text-align: center;
		color: #ffc107;
		text-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
		letter-spacing: 1px;
	}

	.premios-detalle-subtitle {
		margin: 0 0 32px 0;
		font-size: 16px;
		text-align: center;
		color: #999;
	}

	.premios-detalle-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 20px;
		padding: 0;
	}

	.premio-detalle-card {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
		border: 1px solid rgba(255, 193, 7, 0.2);
		border-radius: 12px;
		padding: 20px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.premio-detalle-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
		transition: left 0.5s ease;
	}

	.premio-detalle-card:hover::before {
		left: 100%;
	}

	.premio-detalle-card:hover {
		border-color: rgba(255, 193, 7, 0.4);
		box-shadow: 0 8px 24px rgba(255, 193, 7, 0.2);
		transform: translateY(-4px);
	}

	.premio-detalle-icon-wrapper {
		width: 100%;
		height: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		background: radial-gradient(circle at 50% 50%, rgba(255, 193, 7, 0.15), rgba(0, 0, 0, 0));
		border-radius: 10px;
		padding: 10px;
	}

	.premio-detalle-icon {
		width: 80px;
		height: 80px;
		object-fit: contain;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
		transition: transform 0.3s ease;
	}

	.premio-detalle-card:hover .premio-detalle-icon {
		transform: scale(1.1) rotate(5deg);
	}

	.premio-detalle-content {
		text-align: center;
	}

	.premio-detalle-name {
		margin: 0 0 16px 0;
		font-size: 18px;
		font-weight: 700;
		color: #ffc107;
		text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
		line-height: 1.3;
	}

	.premio-detalle-stats {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.premio-detalle-stat {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 12px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 6px;
		border-left: 2px solid rgba(255, 193, 7, 0.3);
	}

	.premio-detalle-stat .stat-label {
		font-size: 13px;
		color: #999;
	}

	.premio-detalle-stat .stat-value {
		font-size: 13px;
		font-weight: 600;
		color: #ffc107;
	}

	.premio-detalle-stat .stat-probabilidad {
		color: #4CAF50;
		font-weight: 700;
	}

	.premio-detalle-stat .stat-luck {
		color: #FF9800;
	}

	.premio-detalle-stat .stat-skill {
		color: #2196F3;
	}

	.premio-detalle-stat .stat-exc {
		color: #9C27B0;
	}

	.premio-detalle-hex {
		margin-top: 16px;
		padding: 12px;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 8px;
		border: 1px solid rgba(255, 193, 7, 0.3);
	}

	.premio-detalle-hex-label {
		font-size: 12px;
		color: #999;
		margin-bottom: 6px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.premio-detalle-hex-value {
		font-size: 13px;
		font-family: 'Courier New', monospace;
		color: #ffc107;
		word-break: break-all;
		user-select: all;
		cursor: text;
		text-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
		background: rgba(0, 0, 0, 0.3);
		padding: 6px 8px;
		border-radius: 4px;
	}

	@media (max-width: 768px) {
		.premios-detalle-grid {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			gap: 16px;
		}

		.premios-detalle-title {
			font-size: 24px;
		}

		.premio-detalle-card {
			padding: 16px;
		}

		.premio-detalle-icon-wrapper {
			height: 100px;
		}

		.premio-detalle-icon {
			width: 64px;
			height: 64px;
		}
	}