/*大屏*/
*{
    margin: 0;
    padding: 0;
}
html, body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    background: url("../images/bj.png") no-repeat center;
    background-size:100% 100%;
    background-attachment:fixed;
    -webkit-background-size: cover;
}

/*a,p,h1,h2,h3,h4,h5,h6,body,span,label,div{padding:0;margin:0;font-family:'瀵邦喛钂嬮梿鍛寸拨';}
div{font-family:'瀵邦喛钂嬮梿鍛寸拨';}
ul{padding:0;margin:0;}
a{text-decoration:none !important;}*/
@font-face{
    font-family: yjsz;
    src:url('../fonts/yjsz.ttf');
   /* url('../fonts/yjsz.eot'); *//* IE9+,可以是具体的实际链接 */
}

.fl{
    float: left;
}
.fr{
    float: right;
}

/*头部*/
#header{
    width: 100%;
    height: 105px;
    position: relative;
    /*border-bottom: 1px solid #00fbfe;*/
    background: url("../images/head_bg.png") no-repeat center center;
    background-size: 100%;
    box-shadow: 0 0 25px #037581;
    min-width: 1366px;
    z-index: 999;
}
#header .header{
    /* width: 400px; */
    height: 105px;
    /*background: red;*/
    margin: 0 auto;
    text-align: center;
    line-height: 80px;
    font-size: 24px;

}
#header .header h1{
    color: #ffffff;
    text-shadow: 0 0 25px #00d8ff;
    font-size: 46px;
    font-family:"Adobe 楷体 Std R";

}

/*当前时间显示样式*/
.current-time{
    position: absolute;
    left: 30px;
    top: 30%;
    transform: translateY(-50%);
    color: #00fbfe;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 10px #00d8ff;
    font-family: '微软雅黑', Arial, sans-serif;
    z-index: 100;
    white-space: nowrap;
}

/*桌面相关信息样式*/
.table-info .table-info-content{
    padding: 30px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100% - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

.table-info-group{
    border: 1px solid rgba(0, 251, 254, 0.2);
    padding: 8px 8px 6px 8px;
    border-radius: 6px;
    background: rgba(12, 22, 41, 0.6);
    box-shadow: inset 0 0 15px rgba(0, 251, 254, 0.1);
    flex-shrink: 0;
    min-height: 50px;
    display: flex;
    flex-direction: column;
}

.table-info-title{
    color: #00fbfe;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 0 12px rgba(0, 216, 255, 0.6);
    flex-shrink: 0;
}

.ball-list{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 32px;
    align-items: flex-start;
    width: 100%;
}

.header-target-ball{
    position: absolute;
    left: 290px;
    top: 30%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 10px;
    border: 1px solid rgba(0, 251, 254, 0.35);
    border-radius: 6px;
    background: rgba(3, 32, 52, 0.68);
    box-shadow: inset 0 0 10px rgba(0, 251, 254, 0.12), 0 0 12px rgba(0, 216, 255, 0.18);
    z-index: 1000;
    white-space: nowrap;
    line-height: normal;
}

.header-target-label{
    color: rgba(216, 245, 255, 0.74);
    font-size: 12px;
    line-height: 16px;
}

.target-ball-img{
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 8px rgba(0, 251, 254, 0.45));
}

.target-ball-meta{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.target-ball-name{
    color: #ffffff;
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
    white-space: nowrap;
}

.target-ball-desc{
    color: rgba(216, 245, 255, 0.72);
    font-size: 10px;
    line-height: 12px;
}

.ball-item{
    width: 24px;
    text-align: center;
    color: #d8f5ff;
    font-size: 9px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.ball-item img{
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto 2px auto;
    filter: drop-shadow(0 0 6px rgba(0, 251, 254, 0.4));
}

.ball-item span{
    display: block;
    line-height: 1.2;
}

.ball-empty{
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    padding: 5px 0;
}

.snooker-ball-chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid rgba(0, 251, 254, 0.25);
    border-radius: 4px;
    background: rgba(3, 32, 52, 0.72);
    color: #d8f5ff;
    font-size: 11px;
    line-height: 22px;
    box-shadow: inset 0 0 8px rgba(0, 251, 254, 0.08);
}

.snooker-ball-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 0 6px rgba(0, 251, 254, 0.35);
    flex: 0 0 auto;
}

.snooker-ball-text{
    white-space: nowrap;
}

/*头部按钮样式*/
.header-buttons{
    position: absolute;
    top: 35%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    z-index: 1000;
}

/*模式选择下拉框样式*/
.mode-select{
    padding: 10px 25px;
    background-color: rgba(12, 22, 41, 0.9);
    border: 2px solid #02a6b5;
    color: #00fbfe;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 0 10px #00d8ff;
    box-shadow: 0 0 15px rgba(2, 166, 181, 0.5);
    transition: all 0.3s ease;
    border-radius: 5px;
    font-family: '微软雅黑', Arial, sans-serif;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300fbfe' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 40px;
    z-index: 1001;
    position: relative;
    min-width: 120px;
}

.mode-select:hover{
    background-color: rgba(2, 166, 181, 0.3);
    border-color: #00fbfe;
    box-shadow: 0 0 25px rgba(0, 251, 254, 0.8);
    text-shadow: 0 0 15px #00d8ff;
}

.mode-select:focus{
    background-color: rgba(2, 166, 181, 0.3);
    border-color: #00fbfe;
    box-shadow: 0 0 25px rgba(0, 251, 254, 0.8);
    outline: none;
}

.mode-select option{
    background-color: #0c1629;
    color: #00fbfe;
    padding: 10px;
    font-size: 18px;
}

/*确保下拉框选项列表可以显示*/
.mode-select:focus,
.mode-select:active {
    z-index: 1002;
}

.control-btn{
    padding: 10px 30px;
    background-color: rgba(12, 22, 41, 0.8);
    border: 2px solid #02a6b5;
    color: #00fbfe;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 0 10px #00d8ff;
    box-shadow: 0 0 15px rgba(2, 166, 181, 0.5);
    transition: all 0.3s ease;
    border-radius: 5px;
    font-family: '微软雅黑', Arial, sans-serif;
}

.control-btn:hover{
    background-color: rgba(2, 166, 181, 0.3);
    border-color: #00fbfe;
    box-shadow: 0 0 25px rgba(0, 251, 254, 0.8);
    text-shadow: 0 0 15px #00d8ff;
    transform: translateY(-2px);
}

.control-btn:active{
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(2, 166, 181, 0.5) inset;
}

/*结束状态样式 - 红色*/
.control-btn.btn-stop{
    background-color: rgba(200, 0, 0, 0.9);
    border: 2px solid #ff0000;
    color: #ffffff;
    text-shadow: 0 0 10px #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

.control-btn.btn-stop:hover{
    background-color: rgba(255, 0, 0, 0.9);
    border-color: #ff3333;
    box-shadow: 0 0 30px rgba(255, 0, 0, 1);
    text-shadow: 0 0 15px #ff0000;
}

/*提示弹出框样式*/
.toast-notification{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast-notification.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.toast-content{
    background-color: rgba(12, 22, 41, 0.95);
    border: 2px solid #02a6b5;
    color: #00fbfe;
    padding: 15px 30px;
    border-radius: 5px;
    box-shadow: 0 0 25px rgba(2, 166, 181, 0.8);
    text-shadow: 0 0 10px #00d8ff;
    font-size: 18px;
    font-weight: bold;
    font-family: '微软雅黑', Arial, sans-serif;
    min-width: 200px;
    text-align: center;
    position: relative;
}

.toast-content:before,
.toast-content:after{
    position: absolute;
    width: 20px;
    height: 20px;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
}

.toast-content:before{
    border-left: 2px solid #02a6b5;
    left: 0;
}

.toast-content:after{
    border-right: 2px solid #02a6b5;
    right: 0;
}

.toast-message{
    display: block;
}

/*#data_content {
    width: 100%;
    height: calc(100% - 105px);
    padding-top: 20px;
    background: red;
}*/
 .data_content{
    width: calc(100% - 40px);
    height: calc(100vh - 105px);
    /*padding-top: 30px;*/
   /* background: red;*/
    /* margin-top: 20px;*/
     margin-left: 15px;
     min-width: 1366px;
     /*margin-bottom: 40px;*/
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
}



#data_content  .data_info{
    width: calc(100% - 40px);
    height: 110px;
    /*background: red;*/
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
    min-width: 1366px;
    flex-shrink: 0;

}
#data_content  .data_info .conuts{
    font-family: 'yjsz';
    font-size: 40px;
}

#data_content  .data_info .info_1{
    width: 30%;
    height: 110px;
    /*background: green;*/
}
#data_content .data_info .info_1 .text_1{
    width: calc(100% - 25px);
    height: 110px;
    background-color: #0c1629;
}
#data_content  .data_info .info_1 .text_1 div{
    width: 33.3%;
    position: relative;
}
#data_content  .data_info .info_1 .text_1 img{
    position: absolute;
    top: 35px;
    left: 15px;
}
#data_content  .data_info .info_1 .text_1 .count{
    margin-left: 65px;
    margin-top: 23px;
}
#data_content  .data_info .info_1 .text_1 .count p:nth-child(1){
    color: #ffffff;
}
#data_content  .data_info .info_1 .text_1 .count p:last-child{
    color: #00fbfe;
    text-shadow: 0 0 25px #00fbfe;
    font-size: 28px;
    font-weight: bolder;
}
#data_content  .data_info .info_2{
    width: 41%;
    height: 110px;
    /*background: purple;*/
}
#data_content .data_info .info_2 .text_2{
    width: calc(100% - 25px);
    height: 110px;
    background-color: #0c1629;
}
#data_content  .data_info .info_2 .text_2 div{
    width: 33.33%;
    position: relative;
}
#data_content .data_info .info_2 .text_2 img{
    position: absolute;
    top: 35px;
    left: 15px;
}
#data_content  .data_info .info_2 .text_2 .count{
    margin-left: 65px;
    margin-top: 23px;
}
#data_content .data_info .info_2 .text_2 .count p:nth-child(1){
    color: #ffffff;
}
#data_content .data_info .info_2 .text_2 .count p:last-child{
    color: #00fbfe;
    text-shadow: 0 0 25px #00fbfe;
    font-size: 28px;
    font-weight: bolder;
}


#data_content  .data_info .info_3{
    width: 29%;
    height: 110px;
    background: blue;
}

#data_content .data_info .info_3 .text_2{
    width: 100%;
    height: 110px;
    background-color: #0c1629;
}
#data_content .data_info .info_3 .text_2 div{
    width: 33.33%;
    position: relative;
}
#data_content  .data_info .info_3 .text_2 img{
    position: absolute;
    top: 35px;
    left: 15px;
}
#data_content  .data_info .info_3 .text_2 .count{
    margin-left: 65px;
    margin-top: 23px;
}
#data_content .data_info .info_3 .text_2 .count p:nth-child(1){
    color: #ffffff;
}
#data_content  .data_info .info_3 .text_2 .count p:last-child{
    color: #00fbfe;
    text-shadow: 0 0 25px #00fbfe;
    font-size: 28px;
    font-weight: bolder;
}


/*左边*/
.data_content .data_left{
    width: 24%;
    height: 80%;
    position: absolute;
    left: 0;
    top: 20px;
    /*background: green;*/
}
.data_content .data_left .left_top{
    width: 100% ;
    height: 100%;
    /*background: green;*/
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/*四个角的*/
.public:before,
.public:after{ position:absolute; width: 20px; height: 20px; content: "";  border-top: 2px solid #02a6b5; top: 0;}
.public:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
.public:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}


.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: 20px; height: 20px;  content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}
/*四个角的*/





/*左边第一部分*/
.data_content .data_left .left_top .info{
    width: 100%;
    flex: 0 0 45%;
    background:  rgba(1,33,44,0.3);
    border: 1px solid #0c1629 ;
    position: relative;
    margin-bottom: 0;
    min-height: 0;
    /*box-shadow: -10px 0px 15px #034c6a inset, !*左边阴影*!
    0px -10px 15px #034c6a inset, !*上边阴影*!
    10px 0px 15px #034c6a inset, !*右边阴影*!
    0px 10px 15px #034c6a inset;*/
}

.min-title{
    width: 200px;
    height: 40px;
    background: #0c1629;
    /*margin: 0 auto;*/
    top: -20px;
    position: absolute;
    left: 50%;
    border-radius: 20px;
    text-align: center;
    margin-left: -90px;
    z-index: 100;

}
.min-title span{
    display: inline-block;
    line-height: 40px;
    color: white;
}

/*左边第二部分*/
.data_content .data_left .left_top .top_bottom{
    width: 100%;
    flex: 1;
    /*background: purple;*/
    border: 1px solid #20558b ;
    position: relative;
    margin-bottom: 0;
    min-height: 0;
    top:20px;
    flex: 0 0 49.5%;
}
/*左边第三部分*/
.data_content .data_left .left_top .left_bottom{
    width: 100%;
    height: calc(50% - 20px);
    /*background: purple;*/
    border: 1px solid #20558b ;
    position: relative;
    margin-bottom: 35px;
}
/*中间*/
.data_content .data_c{
    width: 52%;
    height: 80%;
    position: absolute;
    left: 24%;
    top: 20px;
/*
    padding:0 20px;*/
}
.data_content .data_c .data_c_1{
    width: calc(100% - 50px);
    height: 100%;
    /*background: red;*/
    /*border: 1px solid #20558b ;*/
    position: relative;
    margin-bottom: 0;
    margin-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-height: 0;
}

/* 当前桌面模块样式 */
.data_content .data_c .data_c_1 .current-table{
    width: 100%;
    flex: 0 0 100%;
    background: rgba(1,33,44,0.3);
    border: 1px solid #0c1629;
    position: relative;
    min-height: 0;
}

.data_content .data_c .data_c_1 .current-table .current-table-content{
    padding: 50px 15px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: calc(100% - 60px);
    overflow-y: auto;
}

/* 背景图区域样式调整 */
.data_content .data_c .data_c_1 .contPar{
    width: 100%;
    flex: 1;
    position: relative;
    min-height: 0;
    top: 120px;
}

.data_content .data_c .data_c_1 .dzimg{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background: url("../images/page1_3.jpg") no-repeat center;
    background-size: cover;
}
.data_content .data_c .data_c_1 .dzimg img{
    top: 25%;
    left: 50px;
    width: 500px;
    height: 600px;
    position: absolute;
    transition: transform 1s ease 1s;
    transform-style: preserve-3d;
    transform: rotateY(0deg) translateZ(240px);
}

.data_content .data_c .data_c_2{
    width: calc(100% - 50px);
    height: calc(28% - 10px);
    border: 1px solid #20558b ;
    position: relative;
    margin-left: 25px;
}

/*右边*/
.data_content .data_right{
    width: 24%;
    height: 80%;
    position: absolute;
    right: 0;
}
.data_content .data_right .right_top{
    width: 100%;
    height: 100%;
    /*background: green;*/
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.data_content .data_right .right_top .right_info{
    width: 100%;
    flex: 0 0 60%;
    border: 1px solid #20558b;
    position: relative;
    margin-bottom: 0;
    min-height: 0;
}
.wenzi{
    margin-top: 30px;


}
.gun{
    /* width: 100%;*/
    /*margin: 20px;*/
}
.gun span{
    display: block;
    float: left;
    height: 20px;
    width: 33%;
    /*background: red;*/
    /*margin: 15px 10px 10px 10px;*/
    /*padding: 20px;*/
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #61d2f7;
    text-align: center;
    margin-bottom: 10px;
}
#FontScroll{
    width: 100%;
    height: 300px;
    overflow: hidden;
    /*float: left;*/
    margin-top: 10px;
    /*margin: 0 5%;*/
    /*margin-left: 50px;*/

    /*background: gold;*/

}
#FontScroll ul li{
    height: 38px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    line-height: 38px;
    border-bottom: 1px dashed #404040;
    /*width:33.3%;*/
    overflow: hidden;

    /*background: red;
    margin: 0 2%;*/

}
#FontScroll ul li:nth-child(1){
    /*background-color: #072951;*/
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    10px 0px 15px #034c6a inset;

}
#FontScroll ul li:hover{
    box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
    10px 0px 15px #034c6a inset;
    cursor: pointer;
}

.fontInner span{
    display:inline-block;
    float: left;
    /*height: 20px;*/
    width:33%;
    text-align: center;
    /*background: red;*/

}




.data_content .data_right .right_top .right_content{
    width: 100%;
    flex: 1;
    border: 1px solid #20558b;
    position: relative;
    margin-bottom: 0;
    min-height: 0;
    top:20px;
}
.data_content .data_right .right_top .right_bottom{
    width: 100%;
    height: calc(50% - 20px);
    border: 1px solid #20558b;
    position: relative;
    margin-bottom: 20px;
}
.content{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}
.content img{
    margin-top: 500px;
}

/*正在开发中覆盖层样式*/
.developing-overlay{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 22, 41, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
}

.developing-text{
    color: #00fbfe;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 15px #00d8ff;
    font-family: '微软雅黑', Arial, sans-serif;
    letter-spacing: 2px;
    position: relative;
    z-index: 11;
}

/*动画背景样式 - 与analysis.html保持一致*/
.developing-overlay .animation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.developing-overlay .animation div {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    animation: move linear infinite;
    opacity: 0.3;
}

.developing-overlay .animation .animate1 {
    background: url('../images/1.png') no-repeat;
    background-size: 100%;
    animation-duration: 30s;
}

.developing-overlay .animation .animate2 {
    background: url('../images/2.png') no-repeat;
    background-size: 100%;
    animation-duration: 20s;
    animation-direction: reverse;
}

.developing-overlay .animation .animate3 {
    background: url('../images/3.png') no-repeat;
    background-size: 100%;
    animation-duration: 15s;
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}