/*
 * Unified lottery balls
 * Used by homepage, detail pages and history records.
 * Old browsers get fixed px values first; browsers supporting clamp() then use
 * the original continuous responsive range.
 */
:root {
    --lottery-ball-size: 55px;
    --lottery-ball-gap: 2px;
    --lottery-ball-number-size: 26px;
    --lottery-ball-number-font-weight: 700;
    --lottery-ball-label-size: 16px;
    --lottery-ball-label-font-weight: 400;
    --lottery-plus-width: 12px;
    --lottery-plus-size: 23px;
    --lottery-plus-font-weight: 400;
    --lottery-first-six-shift: -10px;
    --lottery-plus-shift-x: -5px;
    --lottery-plus-shift-y: -3px;
}

@media (max-width: 430px) {
    :root {
        --lottery-ball-size: 46px;
        --lottery-ball-gap: 1px;
        --lottery-ball-number-size: 21px;
        --lottery-ball-label-size: 14px;
        --lottery-plus-width: 10px;
        --lottery-plus-size: 20px;
    }
}

@media (max-width: 380px) {
    :root {
        --lottery-ball-size: 40px;
        --lottery-ball-gap: 1px;
        --lottery-ball-number-size: 18px;
        --lottery-ball-label-size: 14px;
        --lottery-plus-width: 8px;
        --lottery-plus-size: 18px;
    }
}

@supports (width: clamp(1px, 2vw, 3px)) {
    :root {
        --lottery-ball-size: clamp(36px, 11.5vw, 55px);
        --lottery-ball-gap: clamp(1px, 1vw, 2px);
        --lottery-ball-number-size: clamp(17px, 5.3vw, 26px);
        --lottery-ball-label-size: clamp(14px, 3vw, 16px);
        --lottery-plus-width: clamp(8px, 2.4vw, 12px);
        --lottery-plus-size: clamp(18px, 4.6vw, 23px);
    }
}

/* One layout for homepage, detail page and every history list. */
.numbers,
.balls,
.history-numbers,
.history-balls,
.detail-history-numbers {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    gap: var(--lottery-ball-gap) !important;
    width: 100% !important;
    overflow: visible !important;
}

.balls {
    margin-top: 8px !important;
    min-height: calc(var(--lottery-ball-size) + 24px);
}


.numbers .ball-wrap,
.balls .ball-wrap,
.history-numbers .ball-wrap,
.history-balls .ball-wrap,
.detail-history-numbers .ball-wrap {
    display: block !important;
    flex: 0 1 55px !important;
    flex: 0 1 var(--lottery-ball-size) !important;
    flex-basis: 55px !important;
    flex-basis: var(--lottery-ball-size) !important;
    width: 55px !important;
    width: var(--lottery-ball-size) !important;
    min-width: 0 !important;
    text-align: center !important;
}

.numbers .ball,
.balls .ball,
.history-numbers .ball,
.history-balls .ball,
.detail-history-numbers .ball {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 55px !important;
    width: var(--lottery-ball-size) !important;
    height: 55px !important;
    height: var(--lottery-ball-size) !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    background-image: none !important;
    background-color: #13cb46 !important;
    color: #666 !important;
    overflow: hidden !important;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.numbers .ball.ball-red,
.numbers .ball.red,
.balls .ball.ball-red,
.balls .ball.red,
.history-numbers .ball.ball-red,
.history-numbers .ball.red,
.history-balls .ball.ball-red,
.history-balls .ball.red,
.detail-history-numbers .ball.ball-red,
.detail-history-numbers .ball.red {
    background-color: #ff3333 !important;
}

.numbers .ball.ball-blue,
.numbers .ball.blue,
.balls .ball.ball-blue,
.balls .ball.blue,
.history-numbers .ball.ball-blue,
.history-numbers .ball.blue,
.history-balls .ball.ball-blue,
.history-balls .ball.blue,
.detail-history-numbers .ball.ball-blue,
.detail-history-numbers .ball.blue {
    background-color: #3399ff !important;
}

.numbers .ball.ball-green,
.numbers .ball.green,
.balls .ball.ball-green,
.balls .ball.green,
.history-numbers .ball.ball-green,
.history-numbers .ball.green,
.history-balls .ball.ball-green,
.history-balls .ball.green,
.detail-history-numbers .ball.ball-green,
.detail-history-numbers .ball.green {
    background-color: #13cb46 !important;
}

/* White inner circle: ordinary pseudo-element for Baidu APP/WebView compatibility. */
.numbers .ball::before,
.balls .ball::before,
.history-numbers .ball::before,
.history-balls .ball::before,
.detail-history-numbers .ball::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 12.5%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #fff;
    -webkit-transform: translate(-5.7%, -8%);
    transform: translate(-5.7%, -8%);
}

/* White oval highlight at the lower-right. */
.numbers .ball::after,
.balls .ball::after,
.history-numbers .ball::after,
.history-balls .ball::after,
.detail-history-numbers .ball::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 8%;
    bottom: 17%;
    width: 25%;
    height: 9.5%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    pointer-events: none;
}

.numbers .ball-num,
.balls .ball-num,
.history-numbers .ball-num,
.history-balls .ball-num,
.detail-history-numbers .ball-num {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-size: 26px !important;
    font-size: var(--lottery-ball-number-size) !important;
    font-weight: var(--lottery-ball-number-font-weight) !important;
    line-height: 1 !important;
    text-align: center !important;
}

.numbers .ball-label,
.numbers .ball-wrap > small,
.balls .ball-label,
.balls .ball-wrap > small,
.history-numbers .ball-label,
.history-numbers .ball-wrap > small,
.history-balls .ball-label,
.history-balls .ball-wrap > small,
.detail-history-numbers .ball-label,
.detail-history-numbers .ball-wrap > small {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 3px !important;
    color: #333 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-size: var(--lottery-ball-label-size) !important;
    font-weight: var(--lottery-ball-label-font-weight) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.numbers .plus,
.balls .plus,
.history-numbers .plus,
.history-balls .plus,
.detail-history-numbers .plus {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 12px !important;
    flex: 0 0 var(--lottery-plus-width) !important;
    width: 12px !important;
    width: var(--lottery-plus-width) !important;
    height: 55px !important;
    height: var(--lottery-ball-size) !important;
    margin: 0 !important;
    color: #888 !important;
    font-size: 23px !important;
    font-size: var(--lottery-plus-size) !important;
    font-weight: var(--lottery-plus-font-weight) !important;
    line-height: 1 !important;
    left: var(--lottery-plus-shift-x);
    -webkit-transform: translateY(var(--lottery-plus-shift-y));
    transform: translateY(var(--lottery-plus-shift-y));
}

/* Keep the current homepage spacing: first six balls left, plus centered between 6 and 7. */
.numbers > .ball-wrap:nth-child(-n + 6),
.balls > .ball-wrap:nth-child(-n + 6),
.history-numbers > .ball-wrap:nth-child(-n + 6),
.history-balls > .ball-wrap:nth-child(-n + 6),
.detail-history-numbers > .ball-wrap:nth-child(-n + 6) {
    position: relative;
    left: var(--lottery-first-six-shift);
}

.numbers .lottery-ball-waiting,
.numbers .detail-lottery-ball-waiting,
.balls .lottery-ball-waiting,
.balls .detail-lottery-ball-waiting {
    /* 占位背景始终保留，只让真正的开奖球/生肖文字逐个出现。 */
    visibility: visible !important;
}

.numbers .lottery-ball-waiting > .ball,
.numbers .lottery-ball-waiting > .lottery-ball,
.numbers .lottery-ball-waiting > .ball-label,
.numbers .lottery-ball-waiting > .number-property,
.numbers .lottery-ball-waiting > small,
.numbers .detail-lottery-ball-waiting > .ball,
.numbers .detail-lottery-ball-waiting > .lottery-ball,
.numbers .detail-lottery-ball-waiting > .ball-label,
.numbers .detail-lottery-ball-waiting > .number-property,
.numbers .detail-lottery-ball-waiting > small,
.balls .lottery-ball-waiting > .ball,
.balls .lottery-ball-waiting > .lottery-ball,
.balls .lottery-ball-waiting > .ball-label,
.balls .lottery-ball-waiting > .number-property,
.balls .lottery-ball-waiting > small,
.balls .detail-lottery-ball-waiting > .ball,
.balls .detail-lottery-ball-waiting > .lottery-ball,
.balls .detail-lottery-ball-waiting > .ball-label,
.balls .detail-lottery-ball-waiting > .number-property,
.balls .detail-lottery-ball-waiting > small {
    visibility: hidden !important;
}

.numbers .lottery-plus-waiting,
.numbers .detail-lottery-plus-waiting,
.balls .lottery-plus-waiting,
.balls .detail-lottery-plus-waiting {
    visibility: hidden !important;
}

.numbers .loading,
.balls .loading,
.history-numbers .loading,
.history-balls .loading,
.detail-history-numbers .loading {
    width: 100%;
    padding: 20px 0;
    color: #999;
    text-align: center;
}