body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0; /* 移除 body 的 padding，交由 .container 控制 */
    background-color: #f5f5f5;
    overflow-x: hidden; /* 防止水平滾動條 */
}

.container {
    width: 100%;
    max-width: 100vw; /* 限制容器寬度不超出視窗 */
    margin: 0;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
    box-sizing: border-box; /* 包含 padding 和 border */
    overflow-x: hidden; /* 防止容器內部溢出 */
}

h1, h2, h3 {
    color: #333;
    text-align: center;
}

.error {
    color: red;
    text-align: center;
    font-weight: bold;
}

.predict-container {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    gap: 10px;
    width: 100%;
    max-width: 100%; /* 防止溢出 */
}

.hot-numbers-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.prediction-block {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.predict-table {
    width: 100%;
    max-width: 100%; /* 防止表格溢出 */
    border-collapse: collapse;
    margin: 20px 0; /* 增加表格間距以區分每期 */
    background-color: white;
    border: 1px solid #000;
    border-spacing: 0;
    table-layout: fixed;
}

.predict-th, .predict-td {
    padding: 10px;
    text-align: center;
    border: 1px solid #000;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

/* 預測結果區塊的表格樣式，均等分配 */
.predict-container .predict-table {
    table-layout: fixed;
}

.predict-container .predict-table th,
.predict-container .predict-table td {
    width: 16.67%; /* 6 列均分 */
    min-width: 50px;
}

/* 自動對獎和對獎歷史表格樣式（2 列） */
#auto-match .predict-table, #history .predict-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

#auto-match .predict-th, #auto-match .predict-td,
#history .predict-th, #history .predict-td {
    width: 50%; /* 2 欄均分 */
    min-width: 100px;
    padding: 8px;
}

/* 僅日期與期數和預測號碼表頭為淺灰色 */
#auto-match .predict-th:first-child,
#auto-match .predict-th:nth-child(2),
#history .predict-th:first-child,
#history .predict-th:nth-child(2) {
    background-color: #ff4d4d;
    color: #333;
    font-weight: bold;
}

/* 數字球樣式 */
.ball {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: bold;
    margin: 0 2px;
}

.hot-ball {
    background-color: #ff4d4d;
    color: white;
}

.duplicate-ball {
    background-color: #87ceeb;
    color: #333;
}

.consecutive-ball {
    background-color: #ffd700;
    color: #333;
}

.best-match-ball {
    background-color: #000000;
    color: white;
}

.match {
    background-color: #4CAF50;
    color: white;
}

.no-match {
    background-color: #e0e0e0;
    color: #333;
}

.draw-ball {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 50%;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    margin: 6px;
    font-size: 42px;
    font-weight: bold;
}

.red-ball {
    background-color: red;
    color: white;
}

.blue-ball {
    background-color: blue;
    color: white;
}

.latest-draw {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 10px 0;
}

.draw-info, .draw-numbers {
    margin: 5px 0;
    font-size: 16px;
}

.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #000;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.pagination a.current {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.pagination a:hover:not(.current) {
    background-color: #f0f0f0;
}

.pagination-options {
    text-align: center;
    margin: 10px 0;
}

.pagination-options label {
    margin-right: 10px;
    font-weight: bold;
}

.pagination-options select {
    padding: 5px;
    border: 1px solid #000;
    border-radius: 4px;
    font-size: 14px;
}

.row-yellow {
    background-color: #FFFFE0; /* 淺黃色 */
}

.row-white {
    background-color: #FFFFFF; /* 白色 */
}

.group-separator {
    margin: 0 8px;
    color: #333;
    font-weight: bold;
}

@media (max-width: 900px) {
    .predict-container {
        flex-direction: column;
        align-items: stretch; /* 垂直排列 */
    }
    .hot-numbers-row {
        flex-direction: column; /* 每個 row 內的小區塊垂直排列 */
    }
    .prediction-block {
        width: 100%;
    }
    .results-table th, .results-table td {
        width: auto;
        min-width: 0;
    }
    .predict-container .predict-table th,
    .predict-container .predict-table td {
        width: auto;
        min-width: 0; /* 移除最小寬度，適應內容 */
        white-space: normal; /* 允許文字換行 */
    }
}

@media (max-width: 600px) {
    .predict-table, .results-table {
        font-size: 16px;
    }
    .ball {
        width: 24px; /* 手機版數字球 */
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        margin: 0 0.5px; /* 減小間距以容納 5 個球 */
    }
    .draw-ball {
        width: 15vw; /* 使用視窗寬度單位 */
        height: 15vw;
        line-height: 15vw;
        font-size: 8vw; /* 根據視窗大小縮放 */
        min-width: 40px; /* 最小寬度 */
        max-width: 60px; /* 最大寬度 */
        margin: 4px;
    }
    .draw-numbers {
        display: flex;
        flex-wrap: wrap; /* 允許數字球換行 */
        justify-content: center;
    }
    .draw-info {
        white-space: normal; /* 允許日期與期數換行 */
        overflow: visible;
        font-size: 14px; /* 略小以適應小視窗 */
    }
    .predict-th, .predict-td,
    .results-table th, .results-table td {
        padding: 6px; /* 減小內邊距 */
        min-width: 0; /* 移除最小寬度 */
        white-space: normal; /* 允許文字換行 */
    }
    #auto-match .predict-table, #history .predict-table {
        table-layout: auto; /* 根據內容調整寬度 */
    }
    #auto-match .predict-th:first-child, #auto-match .predict-td:first-child,
    #history .predict-th:first-child, #history .predict-td:first-child {
        width: 40%; /* 左邊欄佔 40% */
        min-width: 80px; /* 確保左邊欄容納文字 */
    }
    #auto-match .predict-th:nth-child(2), #auto-match .predict-td:nth-child(2),
    #history .predict-th:nth-child(2), #history .predict-td:nth-child(2) {
        width: 60%; /* 右邊欄佔 60% */
        min-width: 130px; /* 確保容納 5 個球（5 × (24px + 2 × 0.5px) = 125px + 內邊距） */
    }
    .pagination-options select {
        width: 100%;
        box-sizing: border-box;
    }
    .group-separator {
        margin: 0 4px;
    }
}