* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    background: #0a0a2e;
    color: #ffffff;
    min-height: 100vh;
}

.header {
    background: linear-gradient(135deg, #111155, #0a0a2e);
    padding: 15px 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #333;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
/*    padding: 0 20px;
    gap: 30px;*/
}

/* 下一期號碼靠最左邊 - 放大顯示 */
.period-info {
    display: flex;
    align-items: center;
    /*gap: 10px;*/
    flex: 0 0 auto;
    order: 1;
    flex-direction: column;
    justify-content: center;
}

.period-label {
    color: #ccc;
    font-size: 16px;
}

.period-number {
    display: flex;
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 倒數時間靠最右邊 - 放大顯示 */
.countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    order: 3;
    justify-content: center;
}

.countdown-label {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 5px;
}

.countdown-time {
    font-size: 28px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    /*font-family: 'Courier New', monospace;*/

    background: linear-gradient(45deg, #2c3e50, #34495e);
    color: #ffcc00;
    padding: 10px 20px;
    border-radius: 10px;
    letter-spacing: 2px;
    border: 2px solid #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.3);
}

/* 開獎號碼置中 - 放大顯示 */
.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    order: 2;
}

.result-label {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 10px;
}

.result-numbers {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.result-number {
    width: 40px !important;
    height: 50px !important;
    background: linear-gradient(45deg, #ffcc00, #ffd700) !important;
    color: #000 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: bold !important;
    box-shadow: 0 6px 12px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.4) !important;
    border: 3px solid #fff !important;
    animation: glow 2s ease-in-out infinite;
}

.result-section .result-numbers .result-number {
    width: 35px;
    height: 45px;
    background: linear-gradient(45deg, #ffcc00, #ffd700, #ffaa00, #ffcc00);
    background-size: 300% 300%;
    color: #000 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5) !important;
    border: 3px solid #fff !important;
    position: relative;
    overflow: hidden;
    animation: gradient-flow 3s ease-in-out infinite, result-glow 2s ease-in-out infinite alternate;
}

    .result-section .result-numbers .result-number::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(45deg, #ff6b35, #f7931e, #ffcc00, #ffd700);
        background-size: 400% 400%;
        border-radius: 12px;
        z-index: -1;
        animation: border-gradient 4s ease-in-out infinite;
    }

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes border-gradient {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 發光動畫效果 */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 6px 12px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.4);
    }

    50% {
        box-shadow: 0 6px 12px rgba(255, 204, 0, 1), 0 0 30px rgba(255, 204, 0, 0.6);
    }
}

@keyframes result-glow {
    0% {
        box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5), 0 0 20px rgba(255, 204, 0, 0.3);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 8px 16px rgba(255, 204, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.6);
        transform: scale(1.05);
    }
}

.main-container {
    max-width: 900px;
    margin: 30px auto;
    background: linear-gradient(135deg, #1a1a3e, #2d2d5f);
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    overflow: hidden;
    border: 2px solid #333;
}

.bet-section {
    padding: 30px;
}

.bet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bet-amount-control {
    display: flex;
    align-items: center;
    gap: 15px;
}

.bet-label {
    font-size: 16px;
    color: #ffcc00;
    font-weight: bold;
}

.amount-input {
    border: 2px solid #ffcc00;
    border-radius: 8px;
    padding: 8px 15px;
    width: 120px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    color: #ffcc00;
    font-size: 16px;
    font-weight: bold;
}

.amount-btn {
    background: linear-gradient(45deg, #ffcc00, #ffd700);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 4px 8px rgba(255, 204, 0, 0.3);
    transition: all 0.2s ease;
}

    .amount-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5);
    }

.return-rate {
    color: #ff9800;
    font-weight: bold;
    font-size: 16px;
}

.digit-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.digit-label {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
    margin-right: 25px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.digit-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 12px;
    flex: 1;
    max-width: 600px;
}

.number-btn {
    width: 50px;
    height: 50px;
    border: 2px solid #666;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

    .number-btn:hover {
        border-color: #ffcc00;
        background: rgba(255, 204, 0, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 204, 0, 0.3);
    }

    .number-btn.selected {
        background: linear-gradient(45deg, #ffcc00, #ffd700);
        color: #000;
        border-color: #ffcc00;
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5);
    }

    .number-btn.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        background: rgba(0, 0, 0, 0.1);
        border-color: #333;
        color: #666;
    }

        .number-btn.disabled:hover {
            transform: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            border-color: #333;
            background: rgba(0, 0, 0, 0.1);
        }

        /* 重要：禁用但選中的按鈕應該亮起 */
        .number-btn.disabled.selected {
            opacity: 1 !important;
            background: linear-gradient(45deg, #ffcc00, #ffd700) !important;
            color: #000 !important;
            border-color: #ffcc00 !important;
            transform: scale(1.1) !important;
            box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5) !important;
            cursor: not-allowed;
        }

            .number-btn.disabled.selected:hover {
                transform: scale(1.1) !important;
                box-shadow: 0 6px 12px rgba(255, 204, 0, 0.5) !important;
            }

.bet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 25px;
    width: 200px;
    justify-content: flex-start;
}

.bet-option {
    padding: 8px 5px;
    border: 2px solid #666;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    flex: 0 0 calc(33.333% - 6px);
    text-align: center;
    min-width: 50px;
    max-width: 60px;
}

    .bet-option:hover {
        border-color: #ffcc00;
        background: rgba(255, 204, 0, 0.1);
    }

    .bet-option.active {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        border-color: #667eea;
    }

    .bet-option.disabled {
        opacity: 0.3;
        cursor: not-allowed;
        background: rgba(0, 0, 0, 0.1);
        border-color: #333;
        color: #666;
    }

        .bet-option.disabled:hover {
            border-color: #333;
            background: rgba(0, 0, 0, 0.1);
        }

.bet-summary {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(255, 215, 0, 0.1));
    padding: 20px;
    border-radius: 10px;
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border: 2px solid #ffcc00;
    backdrop-filter: blur(10px);
}

.summary-text {
    font-size: 16px;
    color: #fff;
}

.selected-count {
    color: #ffcc00;
    font-weight: bold;
    font-size: 18px;
}

.total-amount {
    color: #ff4444;
    font-weight: bold;
    font-size: 20px;
}

.submit-btn {
    background: linear-gradient(45deg, #ff4444, #ff6666);
    color: white;
    border: none;
    padding: 15px 50px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    margin: 30px auto;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(255, 68, 68, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .submit-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(255, 68, 68, 0.6);
    }

    .submit-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

/* 中獎Modal */
.win-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.win-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    min-width: 500px;
    color: white;
    border: 3px solid #ffcc00;
}

.win-title {
    font-size: 3em;
    margin-bottom: 25px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    animation: pulse 2s infinite;
}

.win-details {
    background: rgba(255, 255, 255, 0.2);
    padding: 25px;
    border-radius: 15px;
    margin: 25px 0;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.win-numbers {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.win-number {
    width: 60px;
    height: 60px;
    background: #fff;
    color: #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

    .win-number.match {
        background: #4CAF50;
        color: white;
        animation: win-pulse 1s infinite;
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
    }

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes win-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.close-win-btn {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    border: 3px solid white;
    padding: 15px 35px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 25px;
}

    .close-win-btn:hover {
        background: white;
        color: #ff6b35;
        transform: scale(1.05);
    }

.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 連線狀態指示器 */
.connection-status {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1001;
}

    .connection-status.connected {
        background: #4CAF50;
        color: white;
    }

    .connection-status.disconnected {
        background: #f44336;
        color: white;
    }

    .connection-status.connecting {
        background: #ff9800;
        color: white;
    }

/* ===== 玩法選擇區域樣式 ===== */
.game-mode-row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 204, 0, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.game-mode-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-start;
    margin-left: 25px;
}

.game-mode-btn {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 90px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .game-mode-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
    }

    .game-mode-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        border-color: rgba(255, 204, 0, 0.5);
    }

        .game-mode-btn:hover::before {
            left: 100%;
        }

    .game-mode-btn.active {
        background: linear-gradient(135deg, #ffcc00, #ffd700);
        color: #000;
        border-color: #ffcc00;
        box-shadow: 0 6px 20px rgba(255, 204, 0, 0.5);
        transform: translateY(-2px);
    }

        .game-mode-btn.active::after {
            content: '✓';
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background: #4CAF50;
            color: white;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

.bet-control-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex: 1;
    padding: 10px 20px;
}

.odds-block,
.returns-block {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 2px solid rgba(255, 204, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    min-width: 180px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.1);
}

    .odds-block:hover,
    .returns-block:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(255, 204, 0, 0.2);
        border-color: rgba(255, 204, 0, 0.5);
    }

    .odds-block::before,
    .returns-block::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.1), transparent);
        transition: left 0.5s;
    }

    .odds-block:hover::before,
    .returns-block:hover::before {
        left: 100%;
    }

.block-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.block-icon {
    font-style: normal;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.block-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.block-value {
    font-size: 28px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 0 2px 8px rgba(255, 204, 0, 0.5);
    margin-bottom: 8px;
    font-family: 'Arial', monospace;
    position: relative;
}

    .block-value::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #ffcc00, transparent);
        opacity: 0.6;
    }

.block-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 賠率區塊特殊樣式 */
.odds-block {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.05));
    border-color: rgba(46, 204, 113, 0.3);
}

    .odds-block:hover {
        border-color: rgba(46, 204, 113, 0.5);
        box-shadow: 0 8px 25px rgba(46, 204, 113, 0.2);
    }

    .odds-block .block-value {
        color: #2ecc71;
        text-shadow: 0 2px 8px rgba(46, 204, 113, 0.5);
    }

        .odds-block .block-value::after {
            background: linear-gradient(90deg, transparent, #2ecc71, transparent);
        }

/* 返點區塊特殊樣式 */
.returns-block {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
    border-color: rgba(231, 76, 60, 0.3);
}

    .returns-block:hover {
        border-color: rgba(231, 76, 60, 0.5);
        box-shadow: 0 8px 25px rgba(231, 76, 60, 0.2);
    }

    .returns-block .block-value {
        color: #e74c3c;
        text-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
    }

        .returns-block .block-value::after {
            background: linear-gradient(90deg, transparent, #e74c3c, transparent);
        }

/* 數值更新動畫 */
@keyframes value-update {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.block-value.updating {
    animation: value-update 0.3s ease;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }

    .game-info {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .period-info {
        order: 1;
        flex: 0 0 100%;
    }

    .result-section {
        order: 2;
        flex: 0 0 100%;
    }

    .countdown {
        order: 3;
        flex: 0 0 100%;
        align-items: center;
    }

    .digit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px;
    }

    .digit-label {
        margin-right: 0;
        text-align: center;
        width: 100%;
    }

    .digit-numbers {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        max-width: none;
    }

    .number-btn {
        width: 100%;
        height: 45px;
        font-size: 16px;
    }

    .bet-options {
        margin: 0 auto;
        justify-content: center;
        max-width: none;
    }

    .bet-option {
        flex: 0 0 calc(50% - 4px);
        min-width: 70px;
    }

    .win-modal-content {
        min-width: 90%;
        padding: 30px 20px;
    }

    ./*result-numbers {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .result-number {
        width: 30px;
        height: 40px;
        font-size: 16px;
    }*/

    .bet-summary {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .main-container {
        margin: 15px;
    }

    /* 響應式：賠率返點區塊 */
    .bet-control-content {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }

    .odds-block,
    .returns-block {
        min-width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    /* 響應式：玩法選擇區域 */
    .game-mode-row {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .game-mode-buttons {
        margin: 0;
        justify-content: center;
        gap: 10px;
    }

    .game-mode-btn {
        min-width: 70px;
        padding: 10px 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .digit-numbers {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .number-btn {
        height: 40px;
        font-size: 14px;
        border-width: 1px;
    }

    .bet-options {
        gap: 6px;
    }

    .bet-option {
        flex: 0 0 calc(50% - 3px);
        padding: 6px 8px;
        font-size: 12px;
        min-width: 60px;
    }

    .digit-label {
        padding: 8px 16px;
        font-size: 14px;
    }

    .header {
        padding: 8px;
    }

    .game-info {
        gap: 10px;
    }

    .countdown-time {
        font-size: 16px;
        padding: 8px 16px;
    }

    .result-number {
        width: 28px;
        height: 36px;
        font-size: 14px;
    }

    /* 小屏幕：賠率返點區塊 */
    .odds-block,
    .returns-block {
        padding: 15px;
        min-width: 100%;
    }

    .block-value {
        font-size: 24px;
    }

    .block-title {
        font-size: 14px;
    }

    .block-icon {
        font-size: 20px;
    }

    /* 小屏幕：玩法選擇 */
    .game-mode-btn {
        min-width: 60px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (min-width: 1025px) {
    .digit-numbers {
        grid-template-columns: repeat(10, 1fr);
        gap: 0px;
    }

    .bet-options {
        width: 200px;
        justify-content: flex-start;
    }

    .bet-option {
        flex: 0 0 calc(33.333% - 6px);
        max-width: 60px;
        min-width: 50px;
    }

    /* 大屏幕：賠率返點區塊 */
    .bet-control-content {
        gap: 60px;
    }

    .odds-block,
    .returns-block {
        min-width: 200px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .digit-numbers {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }

    .bet-options {
        width: 180px;
        justify-content: flex-start;
    }

    .bet-option {
        flex: 0 0 calc(50% - 4px);
        max-width: 85px;
        min-width: 70px;
    }

    /* 中等屏幕：賠率返點區塊 */
    .bet-control-content {
        gap: 30px;
    }
}

/* 投注倍數控制樣式 */
.bet-multiple-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 15px;
}

.multiple-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.multiple-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    user-select: none;
}

    .multiple-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.05);
    }

    .multiple-btn:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.35);
    }

    .multiple-btn.minus-btn {
        border-radius: 6px 0 0 6px;
    }

    .multiple-btn.plus-btn {
        border-radius: 0 6px 6px 0;
    }

.multiple-input {
    background: transparent;
    border: none;
    color: #fff;
    width: 60px;
    height: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    outline: none;
}

    .multiple-input::-webkit-outer-spin-button,
    .multiple-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .multiple-input[type=number] {
        -moz-appearance: textfield;
    }

/* 響應式設計 */
@media (max-width: 768px) {
    .bet-summary {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .bet-multiple-control {
        margin: 0;
    }

    .multiple-input {
        width: 50px;
    }

    .multiple-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* 修改原有的 bet-summary 樣式以支援新佈局 */
.bet-summary {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.summary-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.selected-count, .total-amount {
    color: #ffcc00;
    font-weight: bold;
    font-size: 18px;
}

/* 老虎機主容器 */
.slot-machine {
    position: relative;
    width: 60px;
    height: 80px;
    margin: 0 5px;
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border: 4px solid #ffd700;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.6);
    /* 硬體加速優化 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 數字滾動條的平滑過渡 */
.number-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(0);
    /* 硬體加速優化 */
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* 數字項目 */
.number-item {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.1s ease;
}

/* 快速滾動動畫 */
/* 調整快速滾動動畫，讓它更平滑 */
@keyframes fastSpin {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-800px);
    }
}

/* 滾動中的狀態 */
.slot-machine.rolling {
    border-color: #ffed4e;
    box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.8), 0 6px 16px rgba(0, 0, 0, 0.6);
    animation: rollingGlow 0.3s ease-in-out infinite alternate;
}

@keyframes rollingGlow {
    0% {
        border-color: #ffd700;
        transform: scale(1);
    }

    100% {
        border-color: #fff;
        transform: scale(1.02);
    }
}

/* 停止中的狀態 */
.slot-machine.stopping {
    border-color: #ff6b6b;
    animation: stoppingPulse 0.8s ease-in-out infinite alternate; /* 調整動畫時間 */
}

@keyframes stoppingPulse {
    0% {
        box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 107, 107, 0.7);
        border-color: #ff6b6b;
    }

    100% {
        box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.5), 0 0 35px rgba(255, 107, 107, 1);
        border-color: #ff4757; /* 更深的紅色 */
    }
}

/* 已停止的狀態 */
.slot-machine.stopped {
    border-color: #00ff88;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.6), 0 0 20px rgba(0, 255, 136, 0.6), 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* 停止成功動畫 */
@keyframes stopSuccess {
    0% {
        transform: scale(1);
        border-color: #00ff88;
    }

    25% {
        transform: scale(1.1);
        border-color: #fff;
        box-shadow: inset 0 4px 8px rgba(255, 215, 0, 0.8), 0 0 40px rgba(0, 255, 136, 1), 0 0 60px rgba(255, 255, 255, 0.6);
    }

    50% {
        transform: scale(1.05);
        border-color: #ffd700;
    }

    75% {
        transform: scale(1.08);
        border-color: #fff;
    }

    100% {
        transform: scale(1);
        border-color: #00ff88;
    }
}

/* 特殊數字的高亮效果 */
.number-item.zero {
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.8), 0 0 20px rgba(255, 107, 107, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.number-item.five {
    color: #4ecdc4;
    text-shadow: 0 0 10px rgba(78, 205, 196, 0.8), 0 0 20px rgba(78, 205, 196, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* 滾動中的數字模糊效果 */
.slot-machine.rolling .number-item {
    filter: blur(1px);
    opacity: 0.9;
}

/* 停止中的數字逐漸清晰 */
.slot-machine.stopping .number-item {
    filter: blur(0.3px);
    opacity: 0.95;
    transition: all 0.2s ease;
}

/* 確保滾動動畫在 stopping 狀態下仍然可見 */
.slot-machine.stopping .number-strip {
    /* 不要覆蓋 animation 屬性，讓快速滾動能繼續一段時間 */
}

/* 已停止的數字完全清晰並高亮 */
.slot-machine.stopped .number-item {
    filter: blur(0px);
    opacity: 1;
    color: #00ff88;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.9), 0 0 30px rgba(0, 255, 136, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

/* 整體完成慶祝效果 */
.jackpot-complete {
    animation: jackpotCelebration 3s ease-out;
}

@keyframes jackpotCelebration {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(0deg);
    }

    10% {
        transform: scale(1.05) rotate(1deg);
        filter: brightness(1.3) hue-rotate(30deg);
    }

    20% {
        transform: scale(1.1) rotate(-1deg);
        filter: brightness(1.6) hue-rotate(60deg);
    }

    30% {
        transform: scale(1.05) rotate(0.5deg);
        filter: brightness(1.4) hue-rotate(90deg);
    }

    50% {
        transform: scale(1.08) rotate(-0.5deg);
        filter: brightness(1.5) hue-rotate(180deg);
    }

    70% {
        transform: scale(1.03) rotate(0deg);
        filter: brightness(1.2) hue-rotate(270deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) hue-rotate(360deg);
    }
}

/* 響應式設計 */
/* 手機版本調整 */
@media (max-width: 768px) {
    /* 調整結果顯示容器 */
    #lastResults {
        display: flex;
        justify-content: center;
        gap: 8px; /* 減少間距 */
        padding: 0 10px;
        max-width: 100%;
        overflow: hidden; /* 防止溢出 */
    }

    /* 老虎機容器調整 */
    .slot-machine {
        width: 50px; /* 減少寬度 */
        height: 70px; /* 減少高度 */
        flex-shrink: 0; /* 防止壓縮 */
        flex-grow: 0; /* 防止擴張 */
    }

    /* 數字項目調整 */
    .number-item {
        height: 70px;
        line-height: 70px;
        font-size: 36px; /* 減少字體大小 */
    }

    /* 限制動畫時的縮放效果 */
    .slot-machine.rolling {
        transform: scale(1) !important; /* 不要縮放 */
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    }

    .slot-machine.stopping {
        transform: scale(1) !important; /* 不要縮放 */
        box-shadow: 0 0 20px rgba(255, 69, 0, 0.9);
    }

    .slot-machine.stopped {
        transform: scale(1) !important; /* 不要縮放 */
        animation: none !important; /* 移除動畫 */
    }

    /* 成功停止動畫調整 */
    @keyframes stopSuccess {
        0% {
            transform: scale(1);
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
        }

        50% {
            transform: scale(1.05); /* 減少縮放幅度 */
            box-shadow: 0 0 30px rgba(255, 215, 0, 1);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
        }
    }

    /* 快速旋轉動畫調整 */
    @keyframes fastSpin {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-700px);
        }
    }
}

/* 更小的手機屏幕 */
@media (max-width: 480px) {
    #lastResults {
        gap: 5px; /* 更小的間距 */
        padding: 0 5px;
    }

    .slot-machine {
        width: 45px; /* 進一步減少寬度 */
        height: 65px;
    }

    .number-item {
        height: 65px;
        line-height: 65px;
        font-size: 32px;
    }
}

/* 橫向顯示優化 */
@media (max-width: 768px) and (orientation: landscape) {
    #lastResults {
        margin-top: 10px;
    }

    .slot-machine {
        width: 45px;
        height: 60px;
    }

    .number-item {
        height: 60px;
        line-height: 60px;
        font-size: 30px;
    }
}

@media (min-width: 769px) {
    @keyframes fastSpin {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-800px); /* 10 個數字 × 80px */
        }
    }
}

/* 3D 立體效果 */
.slot-machine::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), transparent 30%, transparent 70%, rgba(255, 215, 0, 0.3));
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slot-machine.rolling::before,
.slot-machine.stopping::before,
.slot-machine.stopped::before {
    opacity: 1;
}


/* 中獎彈窗樣式 */
.winning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 20px 0;
    /* 隱藏滾動條 - Webkit瀏覽器 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

    /* Chrome, Safari, Opera */
    .winning-overlay::-webkit-scrollbar {
        display: none;
    }

    .winning-overlay.show {
        opacity: 0.89;
    }

/* 彈窗容器包裝，用於正確的滾動行為 */
.winning-popup-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 20px;
}

.winning-popup {
    background: rgba(30, 30, 30, 0.95); /* 深色半透明背景 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 0;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.winning-overlay.show .winning-popup {
    transform: scale(1);
}

.winning-header {
    background: linear-gradient(135deg, #ff6b6b, #feca57);
    color: white;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .winning-header::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
        animation: shine 3s infinite;
    }

@keyframes shine {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.winning-header h2 {
    margin: 0;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.winning-content {
    padding: 30px;
    text-align: center;
    background: transparent;
    overflow-y: auto;
    flex: 1 1 auto;
    max-height: calc(90vh - 200px);
    /* 隱藏滾動條 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

    /* Chrome, Safari, Opera */
    .winning-content::-webkit-scrollbar {
        display: none;
    }

.winning-period {
    font-size: 18px;
    color: #666;
    /*margin-bottom: 15px;*/
    font-weight: 500;
}

/* 開獎號碼標籤 */
.winning-numbers-label {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 開獎號碼區域 */
.winning-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /*position: relative;*/
    z-index: 1;
}

/* 遊戲資訊表格式設計 */
.winning-details {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 0;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.winning-details-table {
    width: 100%;
    color: #ccc;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .detail-row:last-child {
        border-bottom: none;
    }

.detail-label {
    font-size: 16px;
    color: #999;
    text-align: left;
}

.detail-value {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    text-align: right;
    font-family: 'Roboto Mono', monospace;
}

.winning-calculation {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
}

.calc-label {
    color: #999;
    font-weight: 500;
}

.calc-value {
    color: #fff;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
    text-align: right;
    min-width: 120px;
}

.calc-row:nth-child(2) .calc-value {
    color: #fff;
}

.calc-row:nth-child(3) .calc-value {
    color: #4caf50;
}

.calc-row.calc-fee .calc-value {
    color: #ff5722;
    font-size: 14px;
}

.calc-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 15px 0;
}

.calc-total {
    padding-top: 10px;
}

    .calc-total .calc-label {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
    }

    .calc-total .calc-value {
        font-size: 20px;
        font-weight: bold;
        color: #feca57;
    }


/* 號碼球發光效果 */
.draw-number::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 60%);
    border-radius: 50%;
}

/* 號碼球動畫延遲 */
.draw-number:nth-child(1) {
    animation-delay: 0.1s;
}

.draw-number:nth-child(2) {
    animation-delay: 0.2s;
}

.draw-number:nth-child(3) {
    animation-delay: 0.3s;
}

.draw-number:nth-child(4) {
    animation-delay: 0.4s;
}

.draw-number:nth-child(5) {
    animation-delay: 0.5s;
}

.draw-number:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.3);
}

/* 響應式設計 */
@media (max-width: 576px) {
    .winning-numbers-container {
        padding: 20px;
    }

    .winning-numbers {
        gap: 8px;
    }

    .draw-number {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

        .draw-number::before {
            width: 15px;
            height: 15px;
            top: 3px;
        }
}

    .winning-numbers.celebration {
        animation: celebration 1s ease-in-out;
    }

@keyframes celebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(2deg);
    }

    50% {
        transform: scale(1.1) rotate(-2deg);
    }

    75% {
        transform: scale(1.05) rotate(1deg);
    }
}

.winning-details {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .winning-details p {
        margin: 10px 0;
        font-size: 16px;
        color: #555;
        font-weight: 500;
    }

.winning-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 248, 225, 0.8);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}

.win-label {
    font-size: 20px;
    color: #666;
    font-weight: 500;
}

.win-value {
    font-size: 42px;
    font-weight: bold;
    color: #ff6b6b;
    text-shadow: 2px 2px 4px rgba(255, 107, 107, 0.3);
    animation: pulse 1.5s ease-in-out infinite;
}

/* 部分中獎提示 */
.partial-win-info {
    color: #ff9800;
    font-size: 14px;
    font-style: italic;
}

/* 盈虧顯示 */
.win-profit {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    color: #4caf50;
    font-weight: 500;
}

.win-loss {
    display: block;
    margin-top: 10px;
    font-size: 18px;
    color: #f44336;
    font-weight: 500;
}

/* 計算明細中的手續費行 */
.calc-row.calc-fee .calc-value {
    font-size: 14px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.close-winning-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: white;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0; /* 不允許收縮 */
}

    .close-winning-btn:hover {
        background: linear-gradient(135deg, #ff5252, #ff4242);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 82, 82, 0.3);
    }

    .close-winning-btn:active {
        transform: translateY(0);
    }

/* 移動設備優化 */
@media (max-width: 576px) {
    .winning-overlay {
        padding: 10px 0;
    }

    .winning-popup-wrapper {
        padding: 10px;
    }

    .winning-popup {
        width: 95%;
        max-width: 380px;
        max-height: 95vh;
    }

    .winning-content {
        max-height: calc(95vh - 180px);
        padding: 20px;
    }
}

/* End 中獎彈窗樣式 */

/* 響應式設計 */
@media (max-width: 576px) {
    .winning-popup {
        width: 95%;
        max-width: 380px;
    }

    .winning-header h2 {
        font-size: 26px;
    }

    .winning-numbers {
        font-size: 22px;
    }

    .win-value {
        font-size: 36px;
    }
}

/* 餘額更新動畫 */
.wallet-balance.balance-updated {
    animation: balanceUpdate 2s ease-in-out;
}

@keyframes balanceUpdate {
    0%, 100% {
        transform: scale(1);
        color: inherit;
    }

    25% {
        transform: scale(1.1);
        color: #ff6b6b;
    }

    50% {
        transform: scale(1.15);
        color: #feca57;
    }

    75% {
        transform: scale(1.1);
        color: #ff6b6b;
    }
}

/* 餘額更新動畫 */
.balance-updated {
    animation: balancePulse 2s ease-in-out;
}

@keyframes balancePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: none;
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 720px !important;
        margin: 1.75rem auto;
    }
}