body { 
    font-family: 'Be Vietnam Pro', sans-serif; 
    touch-action: manipulation; 
}

.wheel-container { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    margin: 1rem auto; 
}
@media (min-width: 640px) { 
    .wheel-container { 
        width: 500px; /* Tăng kích thước vòng quay trên desktop */
        height: 500px; 
    } 
}

#wheelCanvas { 
    width: 100%; 
    height: 100%; 
    /* Bỏ transition ở đây, sẽ được thêm bằng JS */
}

.pointer { 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 30px solid #ef4444; 
    z-index: 10; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); 
}

.spin-button { 
    width: 70px; 
    height: 70px; 
    border-width: 6px; 
}
@media (min-width: 640px) { 
    .spin-button { 
        width: 80px; 
        height: 80px; 
        border-width: 8px; 
    } 
}

.modal-content { 
    max-width: 90vw; 
    width: 500px; 
}

#team-list { 
    max-height: 40vh; /* Tăng chiều cao tối đa */
    grid-template-columns: 1fr; 
    overflow-y: auto; 
}
@media (min-width: 640px) { 
    #team-list { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    } 
}

/* Kiểu cho nút chế độ */
.mode-btn.active { 
    background-color: #4f46e5; /* indigo-600 */
    color: white; 
}
.mode-btn:not(.active) { 
    background-color: #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
}

/* Tooltip cho icon bóng đèn */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -80px; /* Use half of the width to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}