:root {
    --wheel-diameter: 300px; /* Base size for mobile */
    --slot-angle: 30deg; 
    --border-color: #4f46e5; 
    --indicator-color: #fca5a5; 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0d1117; 
}

/* * MOBILE-FIRST ADJUSTMENTS */
@media (min-width: 641px) {
    :root {
        --wheel-diameter: 500px; 
    }
}

.roulette-container {
    width: var(--wheel-diameter);
    height: var(--wheel-diameter);
    margin: auto;
    border-radius: 50%;
    border: 8px solid var(--border-color);
    box-shadow: 0 0 40px rgba(79, 70, 229, 0.5); 
    overflow: hidden; 
    position: relative;
    background-color: #1a202c; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.slots-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0s; 
    will-change: transform; 
    transform-origin: center center; 
}

.slot {
    /* Each slot is a 100% square, rotated and clipped to appear as a wedge */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    user-select: none;
    line-height: 1.2; 

    transform-origin: 50% 50%; 
    
    /* CRITICAL FIX: Use a basic triangle clip path to define the wedge shape.
       The JS rotation and the 30-degree rotation gap between slots ensures 12 clean segments. */
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%); 
    
    /* Use a clear border to separate the segments visually */
    border-right: 2px solid rgba(0, 0, 0, 0.5); 
}

/* Inner content (the name) must be rotated back and positioned to be readable */
.slot > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0 10%; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
}

/* Central Overlay to hide the center intersection */
.wheel-center-overlay {
    position: absolute;
    width: 25%; 
    height: 25%;
    background-color: #0d1117; 
    border-radius: 50%;
    z-index: 15;
    border: 4px solid var(--border-color);
}


/* Pointer indicator */
.pointer-indicator {
    position: absolute;
    top: -20px; 
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid var(--indicator-color); 
    transform: translateX(-50%);
    z-index: 20;
}

/* Styling for the Result Card (Remains the same) */
#resultCard {
    transition: opacity 0.5s ease-in-out;
    max-width: 400px;
}
#resultCard.hidden {
    opacity: 0;
    pointer-events: none;
}
#resultCard img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}