/* Main container */
#grow_ai_wheel {
    position: relative;
    width: auto; /* Allow the container to adapt to SVG size */
    height: auto; /* Dynamically adjust height */
    max-width: 700px; /* Ensure it doesn't exceed the specified width */
    margin: 0 auto; /* Center the wheel */
    padding: 10px; /* Add spacing around the container */
}


/* Main wheel */
.grow-ai-wheel {
    position: relative;
    width: 100%;
    height: 100%;
	margin: auto;
}


.grow-ai-wheel svg {
    width: 100%;
    height: 100%;
	transform: rotate(-90deg);
    /* No rotation applied, starts from top*/
}

.grow-ai-wheel .background {
    fill: none;
    stroke: #2d2d2d;
    /*stroke-width: 10;*/
}


.dim-overlay {
    z-index: 1; /* Place above the SVG but below .center-content */
}



.grow-ai-wheel .center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
	/*
    text-align: center;
    color: #fff;
	*/
	
    display: flex; /* Use flexbox */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center the content */
    
    text-align: center;
    color: #fff;	
	
	
	flex-direction: column;
		
}

.center-content {
    position: relative;
    z-index: 2; /* Ensure this stays above the dimming effect */
}


.grow-ai-wheel .center-content .crypto-logo img {
    width: 38px;
    height: 38px;
}

.grow-ai-wheel .center-content .value {
    font-size: 2.4rem;
    font-weight: bold;
	
	margin-bottom: 2px; /* Minimal space between value and USD value */
}

.grow-ai-wheel .center-content .usd-value {
    font-size: 1rem;
    opacity: 0.7;
	
	
	margin: 0; /* Remove extra space */
}

.center-content .top-row {
    display: flex; /* Flex layout for the top row */
    align-items: center; /* Vertically align the logo and value */
    justify-content: center;
    gap: 5px; /* Add space between the logo and value */
}





/* text change animations */



.value-increase {
    animation: valueIncreaseAnimation 0.6s ease-in-out;
    color: #00ff00; /* Green for increase */
}

.value-decrease {
    animation: valueDecreaseAnimation 0.6s ease-in-out;
    color: #ff0000; /* Red for decrease */
}

@keyframes valueIncreaseAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes valueDecreaseAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}




/* status message */




.status-message {
    font-size: 1.2rem;
    color: #42fa5b;
    text-align: center;
    font-weight: bold;
    display: none; /* Hidden by default */
	
	font-family: 'Philosopher';
}

.status-glow {
    animation: glowEffect 2.6s infinite ease-in-out; /* Infinite pulse effect */
}


@keyframes glowEffect {
    0% {
        /*text-shadow: 0 0 5px #ac2c25, 0 0 10px #d94d4d, 0 0 15px #e8756c; */
        opacity: 1;
    }
    50% {
        /* text-shadow: 0 0 10px #e8756c, 0 0 20px #d94d4d, 0 0 30px #ac2c25; */
        opacity: 0.4;
    }
    100% {
        /* text-shadow: 0 0 5px #ac2c25, 0 0 10px #d94d4d, 0 0 15px #e8756c; */
        opacity: 1;
    }
}





/* glitch */ 

.glitch-text {
    font-family: monospace;
    color: #fd3519;
    /*animation: glitch 0.3s infinite;*/
    text-shadow: 2px 0 #0ff, -2px 0 #f0f;
}

@keyframes glitch {
    0% {
        transform: translate(0);
        opacity: 0.8;
    }
    20% {
        transform: translate(-2px, 2px);
        opacity: 1;
    }
    40% {
        transform: translate(-2px, -2px);
        opacity: 0.9;
    }
    60% {
        transform: translate(2px, 2px);
        opacity: 1;
    }
    80% {
        transform: translate(2px, -2px);
        opacity: 0.8;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}





#pointerImage {
    visibility: visible;
    display: block;
	z-index: 1000;
}




/* winner box */


.wheel_winner_box {
    text-align: center;
    font-family: Arial, sans-serif;
    color: #fff;
}

.winner-avatar-container {
    position: relative;
    width: 60px;
    height: auto;
    margin: 0 auto;
}

.winner-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.winner-logo-overlay {
    position: absolute;
    top: -22%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 24px;
    height: auto;
}

.winner-wing-overlay {
    position: absolute;
    bottom: -38%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 89px;
    height: auto;
}
.winner-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 61px;
    height: auto;
}

.winner-name-lava {
    font-family: 'Mitr', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ff0000; /* Intense red */
    background: linear-gradient(90deg, #ff0000, #ff4500, #ff8000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Fiery gradient */
    text-shadow: 
        0 0 10px #ff0000,   /* Intense red glow */
        0 0 20px #ff4500,   /* Lava orange glow */
        0 0 30px #ffd700;   /* Yellow radiance */
    letter-spacing: 1px;
    border: 2px solid #ff4500; /* Lava border */
    border-radius: 10px;
    padding: 5px 15px;
    box-shadow: 
        0 0 15px rgba(255, 69, 0, 0.7), 
        0 0 30px rgba(255, 0, 0, 0.5);
    animation: lavaFlicker 1.2s infinite ease-in-out;
}


@keyframes lavaFlicker {
    0%, 100% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff4500, 0 0 30px #ffd700;
    }
    50% {
        text-shadow: 0 0 20px #ff4500, 0 0 30px #ff6347, 0 0 40px #ffc800;
    }
}


.winner-name {
    font-family: 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: bold;
    color: #00ff00; /* Matrix green */
    text-shadow: 
        0 0 10px #00ff00, 
        0 0 20px #00ff33, 
        0 0 30px #00ff66; /* Glowing green */
    position: relative;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    /* Add a digital rain animation */
    animation: matrixRain 1.5s infinite alternate;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 0, 1.2),
        rgba(0, 255, 0, 1.2) 2px,
        rgba(0, 255, 0, 0.1) 4px
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes matrixRain {
    0% {
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff33, 0 0 30px #00ff66;
    }
    50% {
        text-shadow: 0 0 15px #00ff33, 0 0 25px #00ff66, 0 0 40px #00ffaa;
    }
    100% {
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff33, 0 0 30px #00ff66;
    }
}


.winner-name-red {
    font-family: 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: bold;
    color: #ff0000; /* Matrix green */
    text-shadow: 
        0 0 10px #ff0000, 
        0 0 20px #ff0033, 
        0 0 30px #ff0066; /* Glowing green */
    position: relative;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    /* Add a digital rain animation */
    animation: matrixRain-red 1.5s infinite alternate;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 0, 0, 1.2),
        rgba(255, 0, 0, 1.2) 2px,
        rgba(255, 0, 0, 0.1) 4px
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes matrixRain-red {
    0% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0033, 0 0 30px #ff0066;
    }
    50% {
        text-shadow: 0 0 15px #ff0033, 0 0 25px #ff0066, 0 0 40px #ff00aa;
    }
    100% {
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0033, 0 0 30px #ff0066;
    }
}

.winner-name-old {
	font-family: 'Mitr', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    /* margin: 10px 0; */
    padding-top: 19px;
    color: #ffcc00;
}

.winner-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.winner-token {
    width: 20px;
    height: 20px;
}

.winner-winnings {
    font-size: 1.0rem;
    color: #ffcc00;
}

.winner-extra-text {
    font-size: 0.8rem;
    color: #00ff00;
}

.winner-countdown {
    /* margin-top: 10px; */
    font-size: 0.8rem;
    color: #999;
}