/* --- Wheel Styles --- */

/* 1. Wrapper (กล่องหุ้มวงล้อและเข็ม) */
#wheel-wrapper {
    position: relative; /* เป็น "แม่" ให้เข็มชี้ */
    width: 300px;
    height: 300px;
    margin: 20px auto;
    
    /* (ถ้าอยากให้ดูหรูหราขึ้น) 
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
    */
}

/* 2. เข็มชี้ (The Pointer) */
#wheel-pointer {
    position: absolute; /* ลอยอยู่ทับวงล้อ */
    top: -10px; /* ยื่นออกมาด้านบน */
    left: 50%; /* อยู่ตรงกลางแนวนอน */
    transform: translateX(-50%); /* ขยับกลับมาครึ่งหนึ่ง */
    
    width: 0;
    height: 0;
    
    /* สร้างสามเหลี่ยมด้วย border */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #a83232; /* สีแดงเข้ม */
    
    z-index: 10; /* อยู่ "ข้างบน" วงล้อเสมอ */
    
    /* (ถ้าอยากให้ดูมีมิติ) 
    border-bottom: 5px solid #6b1d1d; 
    */
}

/* 3. ตัววงล้อ (The Spinner) */
#wheel-spinner {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* ทำให้กลม */
    border: 8px solid #f8f8f8; /* ขอบวงล้อ */
    box-shadow: 0 0 15px rgba(0,0,0,0.1), inset 0 0 10px rgba(0,0,0,0.1);
    
    position: relative; /* เป็น "แม่" ให้ข้อความ */
    
    /* * นี่คือส่วนที่ "สำคัญที่สุด"
     * overflow: hidden; 
     * มันจะ "ตัด" ส่วนของข้อความ (Label) ที่ล้นออกไปนอกวงกลม 
    */
    overflow: hidden;

    /* * นี่คือ transition เริ่มต้น (JS จะเขียนทับค่านี้ตอนหมุน)
     * เราใส่ไว้เพื่อให้มัน "หยุด" แบบนุ่มนวล
    */
    transition: transform 0.2s ease-out; 

    /* พื้นหลังเริ่มต้น (JS จะเขียนทับด้วย conic-gradient) */
    background: #eee; 
}

/* 4. ข้อความ (Labels) */
.wheel-label {
    position: absolute;
    top: 50%; /* เริ่มที่กลางวง */
    left: 50%; /* เริ่มที่กลางวง */
    
    /* ขนาดของข้อความ (ปรับได้ตามชอบ) */
    width: 150px; /* ความยาวของข้อความ */
    height: 30px; /* ความสูงของข้อความ */

    /* ตั้งจุดหมุน (Transform Origin)
     * 0 0 = หมุนจาก "มุมซ้ายบน" (ซึ่งตอนนี้อยู่กลางวงล้อ)
    */
    transform-origin: 0 0;
    
    /* จัดข้อความ */
    text-align: center;
    padding-top: 5px; /* เว้นระยะจากขอบ */
    box-sizing: border-box;
    
    color: #333;
    font-size: 0.8rem; /* 80% ของขนาดปกติ */
    font-weight: bold;
    
    /* ทำให้ข้อความอ่านง่ายขึ้น */
    text-shadow: 0 0 2px rgba(255,255,255,0.7);

    /* (คำสั่ง transform: rotate(...) ถูกกำหนดโดย js/wheel.js) */
}