.live-page { background: #f7f8fa; min-height: 100vh; padding-bottom: 24px; }
.live-top { background: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #ebedf0; }
.live-header { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 21px; font-weight: 600; position: relative; }
.live-back { position: absolute; left: 12px; font-size: 27px; color: #323233; text-decoration: none; line-height: 1; }
.live-history-link { position: absolute; right: 12px; font-size: 19px; color: #07c160; text-decoration: none; font-weight: 400; }

.live-types { display: flex; background: #fff; padding: 8px 12px 10px; gap: 8px; border-bottom: 1px solid #f0f0f0; }
.live-type { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 17px; color: #646566; text-decoration: none; background: #f7f8fa; white-space: nowrap; min-width: 0; }
.live-type.active { background: #07c160; color: #fff; font-weight: 600; }

.live-player-wrap { background: #fff; margin-bottom: 8px; }
.live-player-wrap.collapsed .live-player-box,
.live-player-wrap.collapsed .live-mute-btn { display: none; }
.live-player-box { position: relative; height: 240px; background: #000; overflow: hidden; }
.live-canvas,
.live-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
}
.live-canvas { display: block; }
.live-video { display: none; object-fit: contain; }
.live-player-box.mode-native .live-canvas { display: none; }
.live-player-box.mode-native .live-video { display: block; z-index: 1; }
.live-player-box.mode-replay .live-mute-btn { display: none; }
.live-player-box.mode-flv .live-canvas { display: block; }
.live-player-box.mode-flv .live-video { display: none; }
.live-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; z-index: 2; padding: 12px; text-align: center; }
.live-overlay.hidden { display: none; }
.live-tip { font-size: 20px; line-height: 1.6; color: #ff4d4f; max-width: 420px; margin: 0 0 8px; }
.live-tip b { color: #ffd700; font-weight: 700; }
.live-tip-sub { font-size: 20px; color: #ff6b6b; margin: 0 0 8px; }
.live-refresh-btn { margin-top: 12px; padding: 6px 14px; font-size: 20px; color: #e00; border: 1px solid #e00; border-radius: 4px; background: transparent; cursor: pointer; height: 35px; }
.live-mute-btn { position: absolute; right: 0; bottom: 0; z-index: 3; width: 40px; height: 32px; border: none; background: rgba(0,0,0,.35); color: #fff; font-size: 21px; cursor: pointer; }
.live-toggle { text-align: center; padding: 6px 0 10px; border-bottom: 1px solid #f0f0f0; }
.live-toggle-btn { border: none; background: none; color: #07c160; font-size: 19px; cursor: pointer; padding: 4px 12px; }
.live-toggle-btn::before { content: '▾ '; }

.live-page .live-lottery { margin: 0; border-radius: 0; box-shadow: none; }

.live-replay-section {
    background: #fff;
    margin-bottom: 8px;
    padding: 10px 12px 14px;
    border-top: 1px solid #ebedf0;
}

.live-replay-title {
    font-size: 18px;
    font-weight: 600;
    color: #323233;
    margin-bottom: 10px;
}

.live-replay-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.live-replay-item {
    flex: 0 0 auto;
    border: 1px solid #07c160;
    background: #fff;
    color: #07c160;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    scroll-snap-align: start;
}

.live-replay-item.active {
    background: #07c160;
    color: #fff;
}

.live-page .lottery-meta {
    font-size: 16px;
}

.live-page .lottery-next {
    font-size: 16px;
}

.live-page .live-history-link {
    font-size: 17px;
}

.live-coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    background: #1a1a1a;
    color: #ccc;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    line-height: 1.6;
}

.live-coming-soon b {
    display: block;
    color: #07c160;
    font-size: 20px;
    margin-bottom: 8px;
}

/* 开奖球单行（6+1，窄屏缩小不换行） */
.live-page .lottery-balls {
    flex-wrap: nowrap;
    gap: clamp(6px, 0.6vw, 10px);
    padding: 8px 4px 4px;
    align-items: flex-start;
    justify-content: center;
}

.live-page .lottery-balls .ball-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46px;
}

.live-page .lottery-balls .icon-text .slot-icon {
    width: clamp(37px, 9vw, 51px);
    height: clamp(37px, 9vw, 51px);
}

.live-page .lottery-balls .icon-text .slot-icon > span {
    font-size: clamp(17px, 3.2vw, 20px);
}

.live-page .lottery-balls .icon-text .slot-text {
    font-size: clamp(15px, 2.4vw, 17px);
}

.live-page .lottery-balls .ball-plus {
    flex: 0 0 auto;
    width: clamp(18px, 3vw, 23px);
    margin-top: clamp(16px, 3.2vw, 21px);
    padding: 0 1px;
}

.live-page .ball-item.ball-pending .icon-text {
    opacity: 0.55;
}

.live-page .ball-item.ball-pending .slot-icon > span {
    animation: ball-pending-pulse 1.2s ease-in-out infinite;
}

.live-page .ball-item.ball-reveal .icon-text {
    animation: ball-reveal-pop 0.45s ease-out;
}

@keyframes ball-pending-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes ball-reveal-pop {
    0% { transform: scale(0.3); opacity: 0.2; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}