.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

.roulette-container {
    position: relative;
    width: 400px; /* 容器寬度 */
    height: 400px; /* 容器高度 */
    margin-bottom: 5px; /* 與按鈕的間距 */
}

.pointer {
    position: absolute;
    top: 43%; /* 垂直居中 */
    left: -15px; /* 水平在容器的左側 */
    transform: translate(-50%, -50%) rotate(0deg); /* 朝向正左方 */
    width: 40px; /* 指針寬度 */
    height: 2px; /* 指針高度 */
    background: red; /* 指針顏色 */
   // clip-path: polygon(100% 50%, 0% 0%, 0% 100%); /* 製作箭頭形狀 -> */
    z-index: 2; /* 保證指針在最上層 */
}

svg {
    width: 85%;
    height: 85%;
    transform-origin: center; /* 確保旋轉圍繞中心 */
}

.result-label {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-top: 2px;
    color: red;
    width: 340px; /* 容器寬度 */
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 340px; /* 容器寬度 */
}

#spinButton {
    padding: 5px 5px;
    font-size: 14px;
    font-weight: bold;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
    #spinButton:hover {
        background-color: #218838;
    }
    #spinButton:disabled {
        background-color: #d6d6d6;
        color: #888;
        cursor: not-allowed; /* 禁止狀態的指標樣式 */
    }

.BBBBB {
    color: #d04646;
    font-size: 14px;
    line-height: 1.5;
    font-weight:bold;
}

.CCCCC {
    color: #18337e;
    font-size: 16px;
    line-height: 2.0;
    font-weight: bold;
}