/* 
浮桶组件 - 透明毛玻璃版本
精简、紧凑的右侧浮桶统计组件样式
*/

/* ===== 强制透明所有可能的白色背景 ===== */
#floating-bucket-container *,
.floating-bucket-container *,
.bucket-body *,
.period-row *,
.position-column *,
.number-cell,
.period-info,
.period-positions {
    background: transparent !important; /* 强制所有内部元素透明背景 */
    color: white !important; /* 强制所有文字为白色 */
}

/* ===== 强制重置所有边框和阴影 ===== */
#floating-bucket-container,
#floating-bucket-container *,
.floating-bucket-container,
.floating-bucket-container * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===== 容器样式 - 透明毛玻璃效果 ===== */
#floating-bucket-container,
.floating-bucket-container {
    width: 280px !important; /* 略微增加宽度 - 从260px增加到280px */
    max-width: 280px !important; 
    min-width: 280px !important; 
    /* 透明毛玻璃背景效果 */
    background: rgba(255, 255, 255, 0) !important; /* 0%白色透明度，完全透明 */
    backdrop-filter: blur(15px) saturate(1.2) brightness(1.1) !important; /* 平衡的毛玻璃效果 */
    -webkit-backdrop-filter: blur(15px) saturate(1.2) brightness(1.1) !important; /* Safari兼容 */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* 增强白色边框可见度 */
    border-radius: 6px !important; /* 调整为与左侧悬浮条相同的小圆角 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15), 
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 2px 8px rgba(0, 0, 0, 0.1) !important; /* 增强阴影层次 */
    outline: none !important; /* 移除outline */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    /* 增强磨砂玻璃质感的渐变覆盖层 */
    position: relative !important;
}

/* 完全移除伪元素覆盖层 - 避免白色背景干扰 */
#floating-bucket-container::before,
.floating-bucket-container::before {
    display: none !important; /* 完全隐藏伪元素 */
}

/* 确保内容在覆盖层之上 */
#floating-bucket-container > *,
.floating-bucket-container > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ===== 标题栏 - 透明毛玻璃适配 ===== */
.bucket-header {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.6), rgba(0, 86, 179, 0.6)) !important; /* 降低透明度 */
    color: white !important;
    padding: 6px 8px !important; /* 进一步减少padding */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 600 !important;
    font-size: 12px !important; /* 进一步减少字号 */
    border: none !important; /* 移除边框 */
    border-radius: 6px 6px 0 0 !important; /* 顶部圆角与容器匹配 */
    width: 100% !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(8px) !important; /* 增强标题栏模糊 */
    -webkit-backdrop-filter: blur(8px) !important; /* Safari兼容 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; /* 增强分割线可见度 */
    text-shadow: none !important; /* 移除文字阴影，取消发光效果 */
}

.bucket-title {
    font-size: 12px !important; /* 进一步减少字号 */
}

.bucket-lottery-code {
    font-size: 10px !important; /* 进一步减少字号 */
    opacity: 0.9 !important;
}

/* ===== 加载状态 - 完全透明适配 ===== */
.bucket-loading {
    padding: 12px !important; /* 进一步减少padding */
    text-align: center !important;
    color: white !important; /* 白色文字 */
    font-size: 12px !important;
    border: none !important; /* 移除边框 */
    background: rgba(255, 255, 255, 0.1) !important; /* 大幅降低背景透明度 */
    border-radius: 8px !important; /* 轻微圆角 */
    margin: 8px !important; /* 增加边距 */
    text-shadow: none !important; /* 移除文字阴影，取消发光效果 */
    font-weight: 600 !important; /* 增加字重 */
}



/* ===== 数据区域 - 磨砂玻璃适配 ===== */
.bucket-body {
    max-height: 480px !important; /* 减少高度 - 从500px减少到420px */
    overflow-y: auto !important;
    background: transparent !important; /* 透明背景以显示磨砂玻璃效果 */
    border: none !important; /* 移除边框 */
    width: 100% !important;
    border-radius: 0 0 6px 6px !important; /* 底部圆角与容器匹配 */
}

/* ===== 磨砂玻璃滚动条样式 ===== */
.bucket-body::-webkit-scrollbar {
    width: 8px !important; /* 稍微增加滚动条宽度 */
}

.bucket-body::-webkit-scrollbar-track {
    background: rgba(227, 242, 253, 0.6) !important; /* 半透明浅蓝色轨道 */
    border-radius: 0px !important; /* 方形轨道 */
    backdrop-filter: blur(2px) !important; /* 轨道模糊效果 */
    -webkit-backdrop-filter: blur(2px) !important; /* Safari兼容 */
}

.bucket-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.8), rgba(0, 86, 179, 0.8)) !important; /* 半透明蓝色渐变 */
    border-radius: 0px !important; /* 方形滚动条 */
    transition: all 0.3s ease !important;
    backdrop-filter: blur(1px) !important; /* 滚动条模糊效果 */
    -webkit-backdrop-filter: blur(1px) !important; /* Safari兼容 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 微妙的白色边框 */
}

.bucket-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.9), rgba(0, 64, 133, 0.9)) !important; /* 悬停时更深的半透明蓝色 */
    transform: scaleX(1.2) !important; /* 悬停时稍微放大 */
}

/* ===== 期号数据行 - 强化蓝色分割线 ===== */
#floating-bucket-container .period-row,
.floating-bucket-container .period-row,
.bucket-body .period-row {
    display: flex !important;
    align-items: stretch !important;
    border-bottom: 3px solid #007bff !important; /* 加强蓝色分割线 */
    border-left: none !important; /* 移除左边框 */
    border-right: none !important; /* 移除右边框 */
    border-top: none !important; /* 移除上边框 */
    min-height: 50px !important; /* 减少行高 - 从60px减少到50px */
    position: relative !important;
    width: 100% !important;
}

#floating-bucket-container .period-row:hover,
.floating-bucket-container .period-row:hover,
.bucket-body .period-row:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* 大幅降低hover背景透明度 */
}

/* ===== 数据行第一列分割线 ===== */
.period-info {
    width: 75px !important; /* 增加第一列宽度 - 从60px增加到75px */
    flex-shrink: 0 !important;
    padding: 5px 4px !important; /* 增加左右padding */
    border-right: none !important; /* 移除原始边框，使用伪元素替代 */
    border-left: none !important; /* 移除左边框 */
    border-top: none !important; /* 移除上边框 */
    border-bottom: none !important; /* 移除下边框 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important; /* 增大第一列字号 */
    position: relative !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; /* 确保使用统一字体 */
}

/* 使用伪元素创建完美的分割线 */
.period-info::after {
    content: '' !important;
    position: absolute !important;
    right: 0px !important; /* 紧贴右边缘 */
    top: -2px !important; /* 向上延伸2px，确保完全覆盖 */
    bottom: -2px !important; /* 向下延伸2px，确保完全覆盖 */
    width: 2px !important;
    background: #007bff !important;
    z-index: 15 !important; /* 提高层级确保显示在最上层 */
}

.period-number {
    font-weight: 700 !important; /* 增加字重 */
    color: white !important; /* 期号文字改为白色 */
    margin-bottom: 2px !important; /* 增加与开奖号码的间距 */
    font-size: 15px !important; /* 放大期号字号：从12px增加到15px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; /* 确保使用统一字体 */
}

/* 移除.period-date相关样式，因为不再显示日期 */

.period-result {
    color: white !important; /* 开奖号码改为白色 */
    font-weight: 700 !important; /* 增加字重 */
    font-size: 14px !important; /* 放大开奖号码字号：从11px增加到14px */
    margin-top: 1px !important;
    letter-spacing: -0.5px !important; /* 减少字符间距，避免换行 */
    line-height: 1.0 !important; /* 减少行高，保持紧凑 */
    word-spacing: -2px !important; /* 进一步减少数字间距 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; /* 确保使用统一字体 */
    white-space: nowrap !important; /* 防止自动换行 */
}

.period-positions {
    flex: 1 !important;
    display: flex !important;
}

.position-column {
    flex: 1 !important;
    border-right: 1px solid #e0e0e0 !important;
    border-left: none !important; /* 移除左边框 */
    border-top: none !important; /* 移除上边框 */
    border-bottom: none !important; /* 移除下边框 */
    display: flex !important;
    flex-direction: column !important;
}

.position-column:last-child {
    border-right: none !important; /* 移除最后一列的右边框 */
}

/* ===== 数字单元格 - 默认样式（5位数和6位数）- 完全透明适配 ===== */
#floating-bucket-container .number-cell,
.floating-bucket-container .number-cell,
.position-column .number-cell {
    padding: 2px 2px !important; /* 增加padding以保持方形 */
    text-align: center !important;
    font-size: 15px !important; /* 增大数字字号 */
    font-weight: 600 !important; /* 保持字重 */
    border-bottom: 1px solid rgba(240, 240, 240, 0.4) !important; /* 更透明的分割线 */
    border-right: 1px solid rgba(240, 240, 240, 0.4) !important; /* 更透明的分割线 */
    border-left: none !important; /* 移除左边框 */
    border-top: none !important; /* 移除上边框 */
    background: transparent !important; /* 完全透明背景，让毛玻璃效果显现 */
    color: white !important; /* 数字改为白色 */
    min-height: 22px !important; /* 增加基础高度舒适度，从18px增加到22px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important; /* 保持方形比例 */
    text-shadow: none !important; /* 移除文字阴影，取消发光效果 */
}

/* ===== 5位数彩种轻微紧凑布局样式 ===== */
.floating-bucket-container[data-digits="5"] .number-cell,
#floating-bucket-container[data-digits="5"] .number-cell {
    min-height: 22px !important; /* 5位数：增加高度舒适度，从17px增加到22px */
    max-height: 22px !important; /* 限制最大高度 */
    height: 22px !important; /* 固定高度 */
    font-size: 15px !important; /* 5位数：保持原有字号 */
    padding: 2px 2px !important; /* 保持合适的内边距 */
    aspect-ratio: unset !important; /* 移除正方形约束 */
}

.floating-bucket-container[data-digits="5"] .period-row,
#floating-bucket-container[data-digits="5"] .period-row {
    min-height: 54px !important; /* 5位数：对应调整行高，从47px增加到54px */
}

/* ===== 6位数彩种轻微紧凑布局样式 ===== */
.floating-bucket-container[data-digits="6"] .number-cell,
#floating-bucket-container[data-digits="6"] .number-cell {
    min-height: 22px !important; /* 6位数：与5位数相同的高度，增加到22px */
    max-height: 22px !important; /* 限制最大高度 */
    height: 22px !important; /* 固定高度 */
    font-size: 15px !important; /* 6位数：保持原有字号 */
    padding: 2px 2px !important; /* 保持合适的内边距 */
    aspect-ratio: unset !important; /* 移除正方形约束 */
}

.floating-bucket-container[data-digits="6"] .period-row,
#floating-bucket-container[data-digits="6"] .period-row {
    min-height: 54px !important; /* 6位数：对应调整行高，从47px增加到54px */
}

/* ===== 3位数彩种紧凑布局样式 ===== */
.floating-bucket-container[data-digits="3"] .number-cell,
#floating-bucket-container[data-digits="3"] .number-cell {
    min-height: 18px !important; /* 3位数：恢复原来高度18px */
    max-height: 18px !important; /* 限制最大高度 */
    height: 18px !important; /* 固定高度 */
    font-size: 14px !important; /* 3位数：保持清晰的字号 */
    padding: 2px 2px !important; /* 3位数：保持合适的内边距 */
    aspect-ratio: unset !important; /* 移除正方形约束 */
}

.floating-bucket-container[data-digits="3"] .period-row,
#floating-bucket-container[data-digits="3"] .period-row {
    min-height: 44px !important; /* 3位数：恢复原来行高44px */
}

.floating-bucket-container[data-digits="3"] .period-info,
#floating-bucket-container[data-digits="3"] .period-info {
    padding: 3px 4px !important; /* 3位数：减少第一列内边距 */
}

/* ===== 4位数彩种紧凑布局样式 ===== */
.floating-bucket-container[data-digits="4"] .number-cell,
#floating-bucket-container[data-digits="4"] .number-cell {
    min-height: 19px !important; /* 4位数：恢复原来高度19px */
    max-height: 19px !important; /* 限制最大高度 */
    height: 19px !important; /* 固定高度 */
    font-size: 14px !important; /* 4位数：保持清晰的字号 */
    padding: 2px 2px !important; /* 4位数：保持合适的内边距 */
    aspect-ratio: unset !important; /* 移除正方形约束 */
}

.floating-bucket-container[data-digits="4"] .period-row,
#floating-bucket-container[data-digits="4"] .period-row {
    min-height: 46px !important; /* 4位数：恢复原来行高46px */
}

.floating-bucket-container[data-digits="4"] .period-info,
#floating-bucket-container[data-digits="4"] .period-info {
    padding: 4px 4px !important; /* 4位数：稍微减少第一列内边距 */
}

#floating-bucket-container .number-cell:last-child,
.floating-bucket-container .number-cell:last-child,
.position-column .number-cell:last-child {
    border-bottom: none !important; /* 移除最后一行的下边框 */
}

/* 强化在第5个数字后面添加灰色分割线 */
#floating-bucket-container .position-column .number-cell:nth-child(5),
.floating-bucket-container .position-column .number-cell:nth-child(5),
.position-column .number-cell:nth-child(5) {
    border-bottom: 3px solid #999 !important; /* 加强灰色分割线，使其更明显 */
}

/* ===== 3位数和4位数彩种的灰色分割线调整 ===== */
.floating-bucket-container[data-digits="3"] .position-column .number-cell:nth-child(5),
#floating-bucket-container[data-digits="3"] .position-column .number-cell:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 3位数：适当减少分割线粗细 */
    margin-bottom: 1px !important; /* 3位数：减少间距 */
}

.floating-bucket-container[data-digits="4"] .position-column .number-cell:nth-child(5),
#floating-bucket-container[data-digits="4"] .position-column .number-cell:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 4位数：适当减少分割线粗细 */
    margin-bottom: 1px !important; /* 4位数：减少间距 */
}

/* 命中号码样式 - 磨砂玻璃适配增强版 */
#floating-bucket-container .number-cell.hit,
.floating-bucket-container .number-cell.hit,
.position-column .number-cell.hit {
    background: linear-gradient(135deg, #ffcc00, #ffb300) !important; /* 金色渐变，增强醒目度 */
    color: #222 !important; /* 命中号码保持深色，在黄色背景上更醒目 */
    font-weight: 700 !important;
    font-size: 16px !important; /* 命中数字更大 */
    border-bottom: 1px solid rgba(240, 240, 240, 0.8) !important; /* 半透明浅灰色行分割线 */
    border-right: 1px solid rgba(240, 240, 240, 0.8) !important; /* 半透明浅灰色列分割线 */
    border-left: none !important;
    border-top: none !important;
    box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; /* 金色阴影和内发光 */
    text-shadow: none !important; /* 移除文字阴影，取消发光效果 */
}

/* ===== 不同位数彩种的命中号码样式调整 ===== */
.floating-bucket-container[data-digits="5"] .number-cell.hit,
#floating-bucket-container[data-digits="5"] .number-cell.hit {
    font-size: 16px !important; /* 5位数：命中数字保持突出显示 */
}

.floating-bucket-container[data-digits="6"] .number-cell.hit,
#floating-bucket-container[data-digits="6"] .number-cell.hit {
    font-size: 16px !important; /* 6位数：命中数字保持突出显示 */
}

.floating-bucket-container[data-digits="3"] .number-cell.hit,
#floating-bucket-container[data-digits="3"] .number-cell.hit {
    font-size: 15px !important; /* 3位数：命中数字字号稍大突出显示 */
}

.floating-bucket-container[data-digits="4"] .number-cell.hit,
#floating-bucket-container[data-digits="4"] .number-cell.hit {
    font-size: 15px !important; /* 4位数：命中数字字号保持突出 */
}

/* 命中数字在第5个位置时保持粗灰线 */
#floating-bucket-container .position-column .number-cell.hit:nth-child(5),
.floating-bucket-container .position-column .number-cell.hit:nth-child(5),
.position-column .number-cell.hit:nth-child(5) {
    border-bottom: 3px solid #999 !important; /* 优先显示粗灰色分割线 */
}

/* ===== 不同位数彩种的第5个数字分割线样式 ===== */
.floating-bucket-container[data-digits="5"] .position-column .number-cell:nth-child(5),
#floating-bucket-container[data-digits="5"] .position-column .number-cell:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 5位数：与3位数4位数一致的细灰色分割线 */
    margin-bottom: 1px !important;
}

.floating-bucket-container[data-digits="5"] .position-column .number-cell.hit:nth-child(5),
#floating-bucket-container[data-digits="5"] .position-column .number-cell.hit:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 5位数：命中数字的灰色分割线 */
    margin-bottom: 1px !important;
}

.floating-bucket-container[data-digits="6"] .position-column .number-cell:nth-child(5),
#floating-bucket-container[data-digits="6"] .position-column .number-cell:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 6位数：与3位数4位数一致的细灰色分割线 */
    margin-bottom: 1px !important;
}

.floating-bucket-container[data-digits="6"] .position-column .number-cell.hit:nth-child(5),
#floating-bucket-container[data-digits="6"] .position-column .number-cell.hit:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 6位数：命中数字的灰色分割线 */
    margin-bottom: 1px !important;
}

.floating-bucket-container[data-digits="3"] .position-column .number-cell.hit:nth-child(5),
#floating-bucket-container[data-digits="3"] .position-column .number-cell.hit:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 3位数：命中数字的灰色分割线 */
    margin-bottom: 1px !important;
}

.floating-bucket-container[data-digits="4"] .position-column .number-cell.hit:nth-child(5),
#floating-bucket-container[data-digits="4"] .position-column .number-cell.hit:nth-child(5) {
    border-bottom: 2px solid #999 !important; /* 4位数：命中数字的灰色分割线 */
    margin-bottom: 1px !important;
}

/* 未来期样式 */
.period-row.future {
    background: linear-gradient(135deg, #f8fff9, #e8f5e8) !important;
    border: none !important; /* 移除边框 */
    border-bottom: 2px solid #28a745 !important; /* 保持绿色分割线 */
}

.period-row.future .period-result {
    color: white !important; /* 待开奖文字改为白色 */
}

/* 未来期可点击单元格样式 */
#floating-bucket-container .period-row.future .number-cell,
.floating-bucket-container .period-row.future .number-cell,
.period-row.future .position-column .number-cell {
    cursor: pointer !important; /* 显示手型光标 */
    transition: background-color 0.2s ease !important; /* 平滑过渡效果 */
}

#floating-bucket-container .period-row.future .number-cell:hover:not(.selected),
.floating-bucket-container .period-row.future .number-cell:hover:not(.selected),
.period-row.future .position-column .number-cell:hover:not(.selected) {
    background-color: #dc3545 !important; /* 鼠标悬停时的红色背景 */
    background: #dc3545 !important; /* 确保背景生效 */
}

/* 被选中的单元格样式 - 红色 */
#floating-bucket-container .period-row.future .number-cell.selected,
.floating-bucket-container .period-row.future .number-cell.selected,
.period-row.future .position-column .number-cell.selected {
    background-color: #dc3545 !important; /* 红色背景 */
    background: #dc3545 !important; /* 确保背景生效 */
    color: #fff !important; /* 白色文字 */
    font-weight: 700 !important; /* 加粗字体 */
    border: 1px solid #dc3545 !important; /* 红色边框 */
    border-bottom: 1px solid #dc3545 !important; /* 覆盖默认边框 */
    border-right: 1px solid #dc3545 !important; /* 覆盖默认边框 */
}

#floating-bucket-container .period-row.future .number-cell.selected:hover,
.floating-bucket-container .period-row.future .number-cell.selected:hover,
.period-row.future .position-column .number-cell.selected:hover {
    background-color: #c82333 !important; /* 鼠标悬停时的深红色 */
    background: #c82333 !important; /* 确保背景生效 */
}

/* 针对不同位数彩种的选中样式强化 */
.floating-bucket-container[data-digits="3"] .period-row.future .number-cell.selected,
.floating-bucket-container[data-digits="4"] .period-row.future .number-cell.selected,
.floating-bucket-container[data-digits="5"] .period-row.future .number-cell.selected,
.floating-bucket-container[data-digits="6"] .period-row.future .number-cell.selected,
#floating-bucket-container[data-digits="3"] .period-row.future .number-cell.selected,
#floating-bucket-container[data-digits="4"] .period-row.future .number-cell.selected,
#floating-bucket-container[data-digits="5"] .period-row.future .number-cell.selected,
#floating-bucket-container[data-digits="6"] .period-row.future .number-cell.selected {
    background-color: #dc3545 !important; /* 红色背景 */
    background: #dc3545 !important; /* 确保背景生效 */
    color: #fff !important; /* 白色文字 */
    font-weight: 700 !important; /* 加粗字体 */
    border: 1px solid #dc3545 !important; /* 红色边框 */
}

/* ===== 错误状态 - 完全透明适配 ===== */
.bucket-error {
    padding: 12px !important; /* 进一步减少padding */
    text-align: center !important;
    color: white !important; /* 错误文字改为白色 */
    border: none !important; /* 移除边框 */
    background: rgba(255, 255, 255, 0.1) !important; /* 大幅降低背景透明度 */
    border-radius: 8px !important; /* 轻微圆角 */
    margin: 8px !important; /* 增加边距 */
    border: 1px solid rgba(220, 53, 69, 0.3) !important; /* 半透明红色边框 */
}

.error-text {
    margin-bottom: 6px !important;
    font-weight: 600 !important; /* 增加字重 */
    text-shadow: none !important; /* 移除文字阴影，取消发光效果 */
}

.retry-btn {
    background: linear-gradient(135deg, #007bff, #0056b3) !important; /* 渐变背景 */
    color: white !important;
    border: none !important; /* 移除边框 */
    padding: 6px 12px !important; /* 增加按钮尺寸 */
    border-radius: 6px !important; /* 增加圆角 */
    cursor: pointer !important;
    font-size: 11px !important; /* 稍大字号 */
    font-weight: 600 !important; /* 增加字重 */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important; /* 蓝色阴影 */
    transition: all 0.2s ease !important; /* 平滑过渡 */
}

.retry-btn:hover {
    background: linear-gradient(135deg, #0056b3, #004085) !important; /* 悬停时深色渐变 */
    transform: translateY(-1px) !important; /* 轻微上浮效果 */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important; /* 增强阴影 */
}

/* ===== 响应式调整 ===== */
@media (max-width: 768px) {
    .floating-bucket-container {
        max-width: 100% !important;
        font-size: 11px !important;
    }
    
    .header-period {
        width: 60px !important; /* 移动端适配 */
    }
    
    .period-info {
        width: 60px !important; /* 移动端适配 */
    }
    
    .number-cell {
        font-size: 13px !important; /* 移动端适配 */
        min-height: 16px !important;
    }
    
    .number-cell.hit {
        font-size: 14px !important; /* 移动端命中数字 */
    }
}

/* ===== 强制最终样式重写 ===== */
/* 确保蓝色分割线始终显示 */
[id="floating-bucket-container"] .period-row {
    border-bottom: 4px solid #0066ff !important;
    margin-bottom: 2px !important;
}

/* 第一列蓝色竖线分割 */
[id="floating-bucket-container"] .period-info {
    border-right: 2px solid #007bff !important;
}

/* 确保灰色分割线始终显示在第5个数字后 */
[id="floating-bucket-container"] .position-column .number-cell:nth-child(5) {
    border-bottom: 4px solid #666 !important;
    margin-bottom: 2px !important;
}

/* 确保命中数字也有灰色分割线 */
[id="floating-bucket-container"] .position-column .number-cell.hit:nth-child(5) {
    border-bottom: 4px solid #666 !important;
    margin-bottom: 2px !important;
} 

/* ===== 浮桶在第四屏内的正常定位（已移至home.css统一管理） ===== */
/* 浮桶组件悬浮功能已完全移除，定位样式由home.css统一管理 */

/* ===== 悬浮功能已移除 ===== */

/* 第四屏相关样式已移除，悬浮功能已取消 */

/* ===== 最终强制透明毛玻璃效果 ===== */
/* 确保所有内部元素都是透明的，除了命中号码 */
#floating-bucket-container .period-row,
.floating-bucket-container .period-row,
#floating-bucket-container .period-info,
.floating-bucket-container .period-info,
#floating-bucket-container .period-positions,
.floating-bucket-container .period-positions,
#floating-bucket-container .position-column,
.floating-bucket-container .position-column,
#floating-bucket-container .number-cell:not(.hit),
.floating-bucket-container .number-cell:not(.hit) {
    background: transparent !important; /* 强制透明，让毛玻璃效果显现 */
}

/* 保持命中号码的黄色背景 */
#floating-bucket-container .number-cell.hit,
.floating-bucket-container .number-cell.hit {
    background: linear-gradient(135deg, #ffcc00, #ffb300) !important; /* 确保命中号码仍然有黄色背景 */
}

/* 强化毛玻璃容器效果 - 统一版本 */
#floating-bucket-container,
.floating-bucket-container {
    background: rgba(255, 255, 255, 0) !important; /* 0%白色透明度，完全透明 */
    backdrop-filter: blur(15px) saturate(1.2) brightness(1.1) !important; /* 统一的毛玻璃效果 */
    -webkit-backdrop-filter: blur(15px) saturate(1.2) brightness(1.1) !important; /* Safari兼容 */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* 统一边框 */
    border-radius: 6px !important; /* 统一小圆角 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15), 
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 2px 8px rgba(0, 0, 0, 0.1) !important; /* 增强阴影层次 */
}

/* ===== 彩种发光效果样式 ===== */

/* 排列三 - 酒绿 #99FF00 */
.fourth-screen #floating-bucket-container.glow-lottery-pailiesan,
#floating-bucket-container.glow-lottery-pailiesan {
    box-shadow: 0 0 8px 1px rgba(153, 255, 0, 0.9) !important;
    border: 2px solid rgba(153, 255, 0, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 东方6+1 - 中国红 #CC0000 */
.fourth-screen #floating-bucket-container.glow-lottery-dongfang,
#floating-bucket-container.glow-lottery-dongfang {
    box-shadow: 0 0 8px 1px rgba(204, 0, 0, 0.9) !important;
    border: 2px solid rgba(204, 0, 0, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 七星彩 - 蒂芙尼蓝 #81D8D0 */
.fourth-screen #floating-bucket-container.glow-lottery-qixingcai,
#floating-bucket-container.glow-lottery-qixingcai {
    box-shadow: 0 0 8px 1px rgba(129, 216, 208, 0.9) !important;
    border: 2px solid rgba(129, 216, 208, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 天天彩选4 - 暖杏 #FEE5C8 */
.fourth-screen #floating-bucket-container.glow-lottery-ttcx4,
#floating-bucket-container.glow-lottery-ttcx4 {
    box-shadow: 0 0 8px 1px rgba(254, 229, 200, 0.9) !important;
    border: 2px solid rgba(254, 229, 200, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 排列五 - 灰蓝色 #58719B */
.fourth-screen #floating-bucket-container.glow-lottery-paiwu,
#floating-bucket-container.glow-lottery-paiwu {
    box-shadow: 0 0 8px 1px rgba(88, 113, 155, 0.9) !important;
    border: 2px solid rgba(88, 113, 155, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 福彩3D - 发光白 #C8E1FF */
.fourth-screen #floating-bucket-container.glow-lottery-fc3d,
#floating-bucket-container.glow-lottery-fc3d {
    box-shadow: 0 0 8px 1px rgba(200, 225, 255, 0.9) !important;
    border: 2px solid rgba(200, 225, 255, 0.95) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 移动端优化：在小屏幕设备上关闭发光效果以提升性能 */
@media (max-width: 768px) {
    .fourth-screen #floating-bucket-container[class*="glow-lottery-"],
    #floating-bucket-container[class*="glow-lottery-"] {
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
    }
}