body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding-bottom: 70px; /* 导航栏高度 + 一点额外空间 */
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

.lot-result .r3 {
	display: inline-block;
	padding-left: 50px;
	font-size: 16px;
	color: #8d8d8d;
	height: 68px;
	line-height: 68px;
	background-image: url("../images/clock.jpg");
	background-position: center left;
	background-repeat: no-repeat
}

.blue-info {
	background-color: #0193e0;
	color: #fff
}

.red-info {
	background-color: #f02f22;
	color: #fff
}

.red {
	background-color: #e60012
}

.blue {
	background-color: #00a0e9
}

.bjpks0 {
	background-color: #FEF300
}

.bjpks1 {
	background-color: #FEFE00
}
.bjpks2 {
	background-color: #338AFF
}
.bjpks3 {
	background-color: #4D4D4D
}
.bjpks4 {
	background-color: #F67100
}
.bjpks5 {
	background-color: #93FFFF
}
.bjpks6 {
	background-color: #540EFF
}
.bjpks7 {
	background-color: #E3E3E3
}
.bjpks8 {
	background-color: #F40000
}
.bjpks9 {
	background-color: #710000
}
.bjpks10 {
	background-color: #47C200
}


.bjpkss0 {
	background-color: #FEF300;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
      
}

.bjpkss1 {
	background-color: #FEFE00;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss2 {
	background-color: #338AFF;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss3 {
	background-color: #4D4D4D;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss4 {
	background-color: #F67100;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss5 {
	background-color: #93FFFF;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss6 {
	background-color: #540EFF;
          font-size: 13px  !important;
    padding: .2em .5em .2em !important;
}
.bjpkss7 {
	background-color: #E3E3E3;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss8 {
	background-color: #F40000;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss9 {
	background-color: #710000;
          font-size: 12px !important;
    padding: .2em .5em .2em !important;
}
.bjpkss10 {
	background-color: #47C200;
    font-size: 12px !important;
    padding: .2em .2em .2em !important;

}


.cyanBlue {
	background-color: #13b5b1
}

.skyBlue {
	background-color: #556fb5
}

.orange {
	background-color: #e60012
}

.yellow {
	background-color: #f39800
}

.green {
	background-color: #22ac38
}




/* ... (Header, Container, Top-bar, Ad-banner styles from previous version) ... */
header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.container {
    padding: 0.1rem;
    max-width: 1200px;
    margin: 1rem auto;
}
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.logo { font-size: 1.5rem; font-weight: bold; color: #007bff; }
.ad-banner { background-color: #fffee0; border: 1px solid #ffcc00; padding: 1rem; margin-bottom: 1rem; border-radius: 5px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.5s ease-out; }
.ad-banner.hidden { display: none; opacity: 0; height: 0; padding: 0; overflow: hidden; margin-bottom: 0; }
#toggle-ad-button { background-color: #f44336; color: white; border: none; padding: 0.5rem 1rem; cursor: pointer; border-radius: 4px; }


/* --- 布局调整核心 CSS --- */

.nav-bar, .tab-bar {
    display: flex;
    /* justify-content: center; /* 默认使用 space-around */
    background-color: white;
    padding: 1rem;
    gap: 0.5rem;
    flex-wrap: wrap; 
    border-radius: 5px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    
}

/* NAV 导航栏并排均匀分布 */
.nav-bar a {
    flex: 1; /* 使所有 NAV 链接平均分配可用空间 */
    text-align: center;
    text-decoration: none;
    padding: 0.75rem 1rem;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s;
    background-color:#f7f7f7;
}

/* TAB 标签分两行显示 (每行3个) */
.tab-bar a {
    /* calc(33.33% - 10px) 确保一行放3个，同时考虑间距gap */
    flex: 0 0 calc(33.33% - 0.5rem); 
    box-sizing: border-box; /* 确保 padding 和 border 不会撑大元素超出 33.33% */
    text-align: center;
    text-decoration: none;
    padding: 0.75rem 0.5rem;

    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgb(199 211 202 / 40%);

    
}


/* --- 激活状态和内容样式保持不变 --- */
.nav-bar a.active { background-color: #007bff; color: white; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.4); }
.tab-bar a.active { background-color: #28a745; color: white; font-weight: bold; box-shadow: 0 2px 5px rgba(40, 167, 69, 0.4); }

.content { /*padding: 2rem;*/ border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-height: 200px;background-color: var(--primary-blue);color: var(--white); }


.data-table { width: 100%; border-collapse: collapse;/* margin-top: 1rem;*/ border: 1px solid #ddd;}
.data-table th, .data-table td { padding: 10px; text-align: center; /*border-bottom: 1px solid #ddd;*/ }
.data-table thead th { 
 background-color: #007bff; color: white; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.4); 

    padding: 8px;
    font-size: 14px;

    text-align: center;
    
}
.data-table tbody tr:nth-of-type(odd) { background-color: #f9f9f9; }


/* --- 底部导航栏样式保持不变 --- */


/* 容器基础样式 */
.result-info, .countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    font-size: 16px;
    color: #333;
    flex-wrap: wrap; 
}

/* 这是一个通用的圆形元素基础类 */
.circle-item {
    display: flex; /* 使用 Flexbox 居中内容 */
    justify-content: center;
    align-items: center;
    width: 35px;      /* 设定固定的宽度 */
    height: 35px;     /* 设定固定的高度 */
    margin: 0 5px;    /* 添加间距 */
    border-radius: 50%; /* 实现完美的圆形 */
    text-align: center;
    box-sizing: border-box; /* 确保 padding 和 border 不会增加总尺寸 */
    font-weight: bold;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
}

/* 针对具体元素的颜色和样式调整 */

/* 号码球 */
.number-ball {
    background-color: #fff;
    border-color: #333;
    color: #333;
}

/* 组合值 (结果最重要，突出显示) */
#result-value {
    background-color: #4CAF50; /* 绿色背景 */
    color: white;
    border-color: #4CAF50;
    font-size: 1.1em;
}

/* 大小标识 */
#result-size {
    background-color: #FF5722; /* 橙红色背景 */
    color: white;
    border-color: #FF5722;
    font-size: 0.9em; /* 文字可能较多，稍微缩小字体 */
}

/* 单双标识 */
#result-parity {
    background-color: #2196F3; /* 蓝色背景 */
    color: white;
    border-color: #2196F3;
    font-size: 0.9em;
}

.history-table td {
    padding: 8px 4px;
    text-align: center;
    vertical-align: middle;
}
.period-time {
    font-size: 12px;
    color: #707073;
   
}
/* 倒计时容器样式 */
/*.countdown-timer {
    justify-content: space-between; /* 文本靠左，倒计时靠右 */
  /*  font-size: 1em;
    padding: 0 15px;
}

/* 倒计时本身的圆形/胶囊形样式 */
/*#timer {
   /* background-color: #333; /* 深色背景突出时间 */
   /* color: #FFEB3B; /* 亮黄色字体 */
    /*border-color: #333;
    /* 倒计时内容较长，使用胶囊形更合适，而非严格的圆形 */
   /* border-radius: 20px; 
   /* padding: 8px 12px;
    width: auto; /* 取消固定宽度以适应时间长度 */
   /* height: auto;
} */

/* 强制应用 Flexbox 布局 */
.open-cutdown.no-padder {
    display: flex !important;
    justify-content: space-between !important; /* 确保左右对齐 */
    align-items: center !important; /* 垂直居中 */
    width: 100% !important; /* 确保占据其列的全部宽度 */
    box-sizing: border-box;
}

/* 确保子元素不会被挤压 */
.left-info, .right-info {
    /* 防止文本溢出时换行导致布局混乱 */
    white-space: nowrap; 
    margin-left: 16px;
    margin-right: 16px;
}

.status-message-container {
    /* 1. 居中显示（水平和垂直） */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    /* 2. 字体适配屏幕大小（大气显示） */
    font-size: 5vw; /* 使用视口宽度单位，字体大小会随着屏幕宽度变化 */
    font-weight: bold; /* 加粗，显得更大气 */
    color: #555; /* 柔和的深灰色 */
    
    /* 确保容器有足够的空间来居中内容 */
    min-height: 100px; /* 至少保证一定高度 */
    margin: 10px 0; /* 添加一些上下边距 */
    text-align: center; /* 防止文本意外换行时对齐混乱 */
}

/* 调整加载 GIF 的样式，使其与大字体对齐 */
.status-message-container img {
    /* 确保图片与文字基线对齐 */
    vertical-align: middle; 
    /* 根据字体大小适当调整图片大小，或者保持原始大小 */
    margin-left: 10px; /* 添加文字与图片之间的间距 */
    height: 1em; /* 使GIF的高度与当前字体大小一致 */
    width: auto;
}

/* 针对移动端小屏幕的优化，防止字体过大 */
@media (max-width: 600px) {
    .status-message-container {
        font-size: 8vw; /* 在手机上字体可以稍微大一点 */
    }
}
.table thead{
    background-color:#09F;
    color:#000;
}

/* 通用样式 */
.period-number {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
}

.mini-ball {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #d1d1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background-color:#ffffff;
}

.result-numbers-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 14px;

}

.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td {
    padding: 8px;
    /*line-height: 1px;*/

    border-top: 1px solid #ddd;d


}


.scratch-btn {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f9f9f9;
    transition: all 0.3s;
}
.scratch-btn:hover {
    color: red;
    border-color: red;
}
    .icon-qihao {
    display: inline-block;
    width: 20px;         /* 根据图片实际宽度调整 */
    height: 20px;        /* 根据图片实际高度调整 */
    background: url('images/28qh.png') no-repeat center center;
    background-size: contain;
    vertical-align: middle; /* 确保图标与文字对齐 */
    margin-right: -2px;
    margin-top: -4px; /* 针对中文字体行高通常偏下的微调 */
}




/* 确保Canvas能完整覆盖父容器 */
#scratchCanvas {
    touch-action: none; /* 防止手机端刮奖时页面滚动 */
}

.draw-text {
    color: #3081ee;
    font-size: 14px;
    font-weight: 500;
}



@media (max-width: 767px) {
    .table-responsive {
        width:100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /*border: 1px solid #ddd;*/
        -webkit-overflow-scrolling: touch
    }
    
}
.scratch-action-btn {
    /* 基础样式 */
    display: flex;
    flex-direction: column; /* 图标在上文字在下，适合侧边悬浮 */
    align-items: left;
    justify-content: center;
    width:45px;
    height: 45px;
   
    
    /* 颜色与背景：渐变色更显高级 */
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
    color: #ffffff;
    border: none;
    border-radius: 20%; /* 圆形按钮 */
    
    /* 阴影：增加悬浮感 */
    box-shadow: 0 4px 12px rgba(238, 82, 83, 0.4);
    
    /* 文字样式 */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    line-height: 1.2;
    opacity: 0.9; 
    text-align: left;
    
}

/* 按钮内部图标样式 */
.icon-scratch {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* 如果你有具体的图标文件，请替换下方的 url */
    background: url('data:image/svg+xml;utf8,<svg xmlns="www.w3.org" viewBox="0 0 24 24" fill="white"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>') no-repeat center;
    background-size: contain;
    margin-bottom: 2px;
}

/* 点击时的缩放反馈 */
.scratch-action-btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(238, 82, 83, 0.5);
}

/* 当刮奖模式开启时（通过JS切换类名，可选） */
.scratch-action-btn.active {
    background: linear-gradient(135deg, #10ac84 0%, #1dd1a1 100%);
    box-shadow: 0 4px 12px rgba(29, 209, 161, 0.4);
}


.badge{display: inline-block;min-width:10px;padding:3px 7px;font-weight:700;color:#fff;line-height:1;vertical-align:baseline;white-space:nowrap;text-align:center;border-radius:15px}