/* ============================================================
   tb.css - 预测表格专用样式（精简版）
   ============================================================ */

/* ============================================================
   【1】板块标题装饰
   ============================================================ */

.list-title {
    width: 100%;
    padding: 6px 0;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, #9ee49e, #4292ef, #5fb45f, #9ee49e);
    background-size: 300% 300%;
    animation: randomMove 4s ease-in-out infinite alternate;
    margin-top:10px;
}

@keyframes randomMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.mb-title {
    display: inline-block;
    font-size: 24px;
    line-height: 40px;
    font-weight: bold;
    color: var(--wzs);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   【2】预测表格基础样式
   ============================================================ */

.tb-table {
    width: 100%;
    border-collapse: collapse;
}

.tb-table td {
    border: 1px solid #dbdbdb;
    padding: 4px 2px;
    vertical-align: middle;
}

/* ============================================================
   【3】表格列宽定制
   ============================================================ */

/* 期号列 - 自适应内容宽度，左对齐 */
.col-qid-single {
    width: 1%;
    white-space: nowrap;
    font-weight: bold;
    color: #0066cc;
    font-size: 14px;
    text-align: left;
    padding-left: 8px;
}

/* 预测内容列 - 占据剩余所有空间，默认居中 */
.col-predict-single {
    width: 98%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    line-height: 1.6;
}

/* 文字类板块（生肖乱斗、成语、诗辞）预测列左对齐 */
.tb-table.text-left .col-predict-single {
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 0;
}

/* 开奖结果列 - 自适应内容宽度，右对齐 */
.col-open-single {
    width: 1%;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.8;
    text-align: right;
    padding-right: 8px;
}

/* ============================================================
   【4】命中高亮 + "准"字标签
   ============================================================ */

.hit-bg {
    background-color: #ffff00;
    color: #ff0000;
    font-weight: bold;
    padding: 0px 2px !important;
    border-radius: 3px;
    display: inline-block;
}

.hit-bg-keyword {
    background-color: #ffff00;
    color: #ff0000;
    font-weight: bold;
    padding: 0px 2px !important;
    border-radius: 3px;
    display: inline-block;
}

.zhun-badge {
    background-color: #ff0000;
    color: #ffffff;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 20px;
    margin-left: 2px;
    display: inline-block;
}

/* ============================================================
   【5】普通文本项
   ============================================================ */

.normal-item {
    display: inline-block;
    margin: 0;
}

/* ============================================================
   【6】开奖结果状态样式
   ============================================================ */

.result-hit {
    color: #ff0000;
    font-weight: bold;
}

.result-normal {
    color: #333333;
    font-weight: 500;
}

.result-no-data {
    color: #999999;
}

/* ============================================================
   【7】行前缀
   ============================================================ */

.line-prefix {
    display: inline-block;
    margin-right: 4px;
}

/* ============================================================
   【7.1】标题行前缀 ———— 已修正字体大小
   ============================================================ */

.title-prefix {
    display: inline-block;
    margin-right: 0px;
    font-size: 26px;
    vertical-align: middle;
    line-height: 1;
}

/* 🔥 关键修复：强制标题前缀内所有动画类使用 26px */
.title-prefix.pulse,
.title-prefix.blink,
.title-prefix.bounce,
.title-prefix.shake,
.title-prefix.spin,
.title-prefix.swing,
.title-prefix .pulse,
.title-prefix .blink,
.title-prefix .bounce,
.title-prefix .shake,
.title-prefix .spin,
.title-prefix .swing {
    font-size: 26px !important;
}

/* ============================================================
   【8】动画类（默认 8px，用于行前缀）
   ============================================================ */

.blink,
.bounce,
.pulse,
.shake,
.spin,
.swing {
    display: inline-block;
    font-size: 8px;
    color: red;
}

.blink  { animation: blink 1s ease-in-out infinite; }
.bounce { animation: bounce 0.5s ease-in-out infinite; }
.pulse  { animation: pulse 0.6s ease-in-out infinite; }
.shake  { animation: shake 0.5s ease-in-out infinite; }
.spin   { animation: spin 1s linear infinite; }
.swing  { animation: swing 0.6s ease-in-out infinite; }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(10deg); }
    75%      { transform: rotate(-10deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

@keyframes swing {
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate(10deg); }
}


/* ============================================================
   【9】数字容器样式
   ============================================================ */

.number-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.number-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.number-circle.number-hit,
.number-box.number-hit {
    animation: hitPulse 0.5s ease infinite;
}

@keyframes hitPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}


/* 在 tb.css 的 【9】数字容器样式 中添加 */
.number-box,
.number-circle {
    margin: 0 2px !important;
}


/* ============================================================
   【10】输尽光玄机专用样式
   ============================================================ */

.sjg-title {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px rgba(255, 0, 0, 0.3);
}

.sjg-line {
    font-size: 16px;
    color: #5d478b;
    padding: 2px 0;
}