/* static/css/spin_wheel_page.css */

.spin-page-wrapper {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    background-image: url("../images/stadium_background.jpeg");
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.spin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(0,0,0,0.3);
}
.spin-header h1 { font-size: 1.2em; margin: 0; }
.spin-header a { color: white; font-size: 1.2em; text-decoration: none; }
.user-points { font-weight: bold; }
.user-points .fa-coins { color: #ffd700; }

.spin-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wheel-container {
    position: relative;
    
    /* <<< FIX: width और height को max-width और max-height से बदलें >>> */
    /* यह सुनिश्चित करेगा कि कंटेनर छोटे स्क्रीन पर सिकुड़ सके */
    width: 90vw; /* स्क्रीन की चौड़ाई का 90% */
    max-width: 380px; /* अधिकतम 380px चौड़ा */

    /* <<< FIX: aspect-ratio का उपयोग करें ताकि यह हमेशा गोल रहे >>> */
    aspect-ratio: 1 / 1; /* चौड़ाई और ऊंचाई का अनुपात हमेशा 1:1 रहेगा */
    
    margin-bottom: 20px;
    display: flex; /* <<< इसे फ्लेक्स कंटेनर बनाएं */
    justify-content: center; /* <<< कैनवास को सेंटर में रखें */
    align-items: center; /* <<< कैनवास को सेंटर में रखें */
}
#spin-canvas {
    /* <<< FIX: कैनवास को कंटेनर के अंदर फिट करें >>> */
    width: 100%;
    height: 100%;
}







.wheel-pointer {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #e74c3c;
    z-index: 10;
}

.spin-trigger-btn {
    padding: 15px 80px;
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, #4caf50, #388e3c);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 5px 0 #1b5e20;
    transition: all 0.1s ease-in-out;
}
.spin-trigger-btn:hover { background: linear-gradient(to bottom, #66bb6a, #43a047); }
.spin-trigger-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1b5e20; }
.spin-trigger-btn:disabled { background: #757575; box-shadow: 0 5px 0 #424242; cursor: not-allowed; }

.info-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0,0,0,0.5);
    border: 2px solid #FFD700;
    border-radius: 10px;
    min-width: 280px;
    text-align: center;
}
.info-box p { margin: 0; font-size: 1.1em; font-weight: 500; }

.ad-spin-btn {
    margin-top: 15px;
    padding: 12px 30px;
    font-size: 1em;
    font-weight: 600;
    color: white;
    background-color: #4285F4;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}




/* style for custom alert */
.custom-alert-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    z-index: 500; 
    display: none; /* शुरू में छिपा हुआ */
    justify-content: center; 
    align-items: center; 
    padding: 20px;
    box-sizing: border-box;
}
.custom-alert-box { 
    background: white; 
    color: #333; 
    padding: 25px; 
    border-radius: 10px; 
    text-align: center; 
    max-width: 320px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
}
#custom-alert-message { 
    margin: 0 0 20px 0; 
    font-size: 1.1em;
}
#custom-alert-ok-btn { 
    background: #00A86B; 
    color: white; 
    border: none; 
    padding: 10px 30px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600;
}