/* 【1顶部】新澳门顶部板块（独立于 Tab 之外） */





.section1 {
    background: var(--qs2);/* ==============================浅的背景颜色========================================== */
    animation: fadeIn 0.5s ease;
    display: flex;
    padding-top: 5px;
    border-radius: 4px;
}

.section1 .div1 {

    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.section1 .div2 {
    border-radius: 4px;
    padding: 2px 10;
}



/* 【2主开奖区】 - 最外层容器，包括选项卡和对应内容*/

.main-lottery-section {
    background: var(--qs2);/* ===================================浅的背景颜色===================================== */
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: solid 0px #b8b8b8;
}

/* 1单个容器，默认隐藏*/
.section {
    display: none;
    animation: fadeIn 0.5s ease;
  
}

/*2被选中可见*/
.section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/*【8】开奖记录按钮 */

.btn-last {
    border-radius: 50px;
    color:  var(--wzs);
     background:  var(--ss);/* ================================开奖记录按钮================================= */
    font-size: 14px;
    padding: 4px 16px;
    border: none;
    cursor: pointer;
    float: right;
}


/*【3选项卡】*/

/* 1. 显示选项卡的容器 */
.tab-row {
    display: flex;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

/* 2. 单个选项卡 */
.tab-item {
    background:  var(--ss);/* ======================================深的背景颜色================================== */
    flex: 1;
    text-align: center;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-right: 1px solid var(--qs);/* ======================================浅的背景颜色================================== */
    transition: all 0.3s ease;
    font-size: 14px;
    color: #ffff00;
}

/* 3. 最后一个选项卡：移除右边框（避免多余边框线） */
.tab-item:last-child {
    border-right: none;
}



/* 4. 选项卡选中式样 */
.tab-item.active {
    background:var(--ss);/* ======================================深的背景颜(附近倒数第二位-1)================================== */
     color: #ffff00;
    font-weight: bold;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}


/* 4. 选项卡上小图标 */

.img {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}





/* 【7】期数信息文字*/


 /*主期数式样*/
.qid {
    margin-left: 10%;
    color: var(--ss);
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
}

 /*下期数式样*/
.xq-span {
    color: var(--ss);
    font-size: 15px;
}



/* 【4】开奖显示内容区（球区 + 期数 + 倒计时） */

.lottery-content {
    width: 100%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px 0;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}

/* ---- 标题行（期号 + 开奖记录按钮） ---- */
.title-row {
    padding: 0;
    text-align: left;
    overflow: hidden;
    margin-bottom: 5px;

}


/* 【5】开奖球区 */


/*显示号码球的行*/
.ball-row {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    background: fff;
    width: 85%;
    margin: 0 auto;        /* 水平居中 */
    padding: 0px 20px;
}


  /*号码球最外尾*/
.ball-box {
     background: #7ccd7c;
    flex: 1;
    aspect-ratio: 1/1;
        /*border-radius: 50%;*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid  1px #7ccd7c;
    border-radius: 4px;
   
}


 /*号码球内球，显示数字的*/
.ball-num {
    width: 100%;
    height: 100%;
    /*background: #fff;*/
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    color: #fff;
}





/*第二行，球下方文字容器div*/
.ball-text {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #666;
    font-weight: 500;
}


   /*+号容器span式样*/
.plus {
    width: auto;
    font-size: 20px;
    font-weight: bold;
    padding: 0 2px;
}








/*【9】倒计时输入框 */

.djs {
    width: 50px;
    height: 18px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(#333, #111);
    border: 1px solid #555;
    border-radius: 4px;
    outline: none;
}

.djs-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #228b22;
    font-size: 14px;
}





/* 【11响应式布局】 */
@media (max-width: 380px) {
    .ball-num {
        font-size: 18px;
    }
}