/* 阿里妈妈数黑体 引入 */
@font-face {
  font-family: "AlimamaShuHeiTi";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/AlimamaShuHeiTi.TTF") format("truetype");
}
/* 最后来设置全局字体样式 */
* {
    font-family: "AlimamaShuHeiTi";
    letter-spacing: 2px;
}


body {
    width: 100vw;
    height: 100vh;
    background-color: rgb(4, 1, 30);
    display: flex;
    padding: 0vw;
    margin: 0vw;
    gap: 1vh;
    box-sizing: border-box;
}

/* 信息框 */
dialog {
    display: none;
    position: absolute;
    width: 30vw;
    height: 30vh;
    left: 35vw;
    top: 35vh;
    flex-direction: column;
    background-color: rgb(4, 1, 30);
    color: white;
    font-size: 2.5vh;
    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0px;
    padding: 10px;
    z-index: 9999;
}
.message-title {
    margin: 0px;
    padding: 0px;
    height: 4vh;
    /* background-color: #00d0ff; */
    text-align: center;
    align-items: center;
    border-bottom: 1px solid rgb(138, 220, 223);

}
.message-content {
    display: flex;
    flex: 1;
    margin: 0px;
    padding: 0px;
    text-align: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
}
.message-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    align-items: center;
    justify-content: right;
}

.message-buttons button {
    background: rgba(30, 45, 65, 0.8);
    color: white;
    border-radius: 10px;
    font-size: 2vh;
    height: 5vh;
    width: 90%;
    border-radius: 0.7vh;
    border: 0.1vh solid rgba(80, 100, 130, 0.5);
    background: rgba(30, 45, 65, 0.8);
    color: #b0c8e0;
    /* font-size: 2.23vh; */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}

.message-buttons button:hover:not(.active) {
    border-color: rgba(0, 180, 255, 0.4);
}

.message-buttons button:active {
    border-color: #00d0ff;
    background: rgba(0, 180, 255, 0.18);
    color: #00e0ff;
    box-shadow: 0 0 1.5vh rgba(0, 200, 255, 0.3);
}

/* 左侧 */
.left {
    width: 60%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1vh 0vh 1vh 1vh;
    box-sizing: border-box;
    position: relative;
    gap: 1vh;
}


.map {
    width: 100%;
    flex: 1;
    overflow: auto;
    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
}

.info {
    width: 100%;
    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
    box-shadow: inset 0px 0px 15px 0px rgb(12, 247, 243);
    display: flex;
    flex-direction: column;
    position: relative;
}

.info-head {
    width: 100%;
    height: 6vh;
    color: white;
    font-size: 3vh;
    display: flex;
    flex-direction: row;

    text-align: center;
    align-items: center;
    justify-content: center;
}

.info-text {
    position: absolute;
    flex: 1;
    /* left: 1vw; */
    text-align: center;
    align-items: center;
    justify-content: center;
}

.info-show-button {
    width: 3vw;
    aspect-ratio: 1;
    display: flex;
    position: absolute;
    right: 0.8vw;

    border: none;
    background-color: rgba(0, 0, 0, 0);    
    background-repeat: no-repeat; /* 禁止重复 */
    background-position: center; /* 居中显示 */
    background-size: 80% 80%;
    background-image: url('/image/top.png');
}

.status {
    height: 11vw;
    display: none;
    gap: 0.5vw;
    padding: 0.5vw;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.statu {
    flex: 1;
    display: flex;

    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
}

/*  */

.right {
    width: 40%;
    height: 100vh;
    display: flex;
    padding: 1vh 1vh 1vh 0vh;
    box-sizing: border-box;
}

.box {
    width: 100%;
    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
    box-shadow: inset 0px 0px 20px 0px rgb(12, 247, 243);

    
    padding: 1vh 1vw;
    box-sizing: border-box;
}

.box:before {

}

.title-div {
    display: flex;
    width: 100%;
    height: 4vh;
    text-align: center;
    align-items: center;
    font-size: 3vh;
    color: white;
    padding: 0.5vh 0vw;
}

.title {
    display: flex;
    position: relative;
    color: white;
    box-sizing: content-box;
    display: flex;
    width: 100%;
    height: 100%;
    text-align: justify;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.title.active {
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px 0px rgba(152, 181, 199, 1);
}

.back-button {
    height: 100%;
    aspect-ratio: 1;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat; /* 禁止重复 */
    background-position: center; /* 居中显示 */
    background-size: 80% 80%;
    background-image: url('../image/left.png');
    position: absolute;
    left: 0.5vw;
}

.setting-button {
    height: 100%;
    aspect-ratio: 1;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat; /* 禁止重复 */
    background-position: center; /* 居中显示 */
    background-size: 80% 80%;
    background-image: url('../image/right.png');
    position: absolute;
    right: 0.54vw;
}

/* 通道样式 */
.channels-div {
    display: none;
    flex-direction: column;
    border: 1px solid rgb(12, 247, 243);
    border-radius: 10px;
    height: 19vh;
}

.channels-title {
    display: flex;
    position: relative;
    color: #c0d4f0;
    font-size: 2.3vh;
    letter-spacing: 1px;
    height: 6vh;
    padding-left: 1vw;
    /* text-align: center; */
    align-items: center;
}

.switch-div {
    display: flex;
    position: absolute;
    right: 1vw;
    height: 100%;
    align-items: center;
    font-size: 2vh;
}

.switch {
    right: 1vw;
    width: 3vh;
    height: 1.5vh;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 1.5vh;
    cursor: pointer;
    transition: background-color 0.3s;
}

.channels {
    display: grid;
    justify-items: center;
    align-items: center;
    text-align: center;
    height: 14vh;
    width: 100%;
    flex: 1;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0vh;
}

.channel-btn {
    color: white;
    border-radius: 10px;
    font-size: 2vh;
    height: 5vh;
    width: 90%;
    border-radius: 0.7vh;
    border: 0.1vh solid rgba(80, 100, 130, 0.5);
    background: rgba(30, 45, 65, 0.8);
    color: #b0c8e0;
    /* font-size: 2.23vh; */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}

.channel-btn.active {
    border-color: #00d0ff;
    background: rgba(0, 180, 255, 0.18);
    color: #00e0ff;
    box-shadow: 0 0 1.5vh rgba(0, 200, 255, 0.3);
}

.channel-btn:hover:not(.active) {
    border-color: rgba(0, 180, 255, 0.4);
}

/* head样式 */
.head {
    display: flex;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    /* box-shadow: 0px 1px 3px 0px white; */
}
.head-name {
    color: rgb(178, 178, 178);
    font-size: 2.5vh;
    width: 20%;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-right: 1px solid white;
    height: 3vh;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

/* box2样式. */
.target {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* overflow: auto; */
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;

    gap: 1.3vh;
}

.box2 {
    width: 100%;
    height: 13vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: flex;
    box-sizing: border-box;
    border: 1px solid rgb(240, 94, 94);
    border-left: 3px solid rgb(240, 94, 94);
    border-radius: 10px;

    box-shadow: inset 0px 0px 20px 0px rgba(240, 94, 94);

}
.box2:hover {    
    /* box-shadow: inset 0px 0px 60px 0px rgba(152, 181, 199, 0.9); */
}
#med-level {
    border-color: rgb(240, 228, 94);
    border-left: 3px solid rgb(240, 228, 94);
    box-shadow: inset 0px 0px 20px 0px rgba(240, 228, 94);
}
#norm-level {
    border-color: rgb(255, 255, 255);
    border-left: 3px solid rgb(255, 255, 255);
    box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255);
}

.content {
    width: 20%;
    color: white;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.6);

    text-align: center;
    align-items: center;
    justify-content: center;

}

.main {
    font-size: 2.2vh;
    height: 2.5vh;
    padding: 0px;
    margin: 0px;
    padding-bottom: 1vh;
}
.secondary {
    font-size: 2vh;
    height: 3.8vh;
    padding: 0px;
    margin: 0px;
}

.time {
    color: white;
    display: flex;
    position: relative;
    top: -2vh;
    left: -0.2vw;
    font-size: 1.3vh;
    width: 100%;
    height: 2vh;
    text-align: left;
    padding: 0px;
    margin: 0px;
    margin-left: 1vw;
    margin-bottom: 1vh;
}

.level {
    
    display: flex;
    flex-direction: column;

    text-align: center;
    align-items: center;
    justify-content: center;

    position: relative;
    top: -2vh;
    font-size: 3vh;
    width: auto;
    height: 2.5vh;
    text-shadow: 0 0 10px rgb(207, 120, 120),
        0 0 20px rgb(207, 120, 120);
    padding: 0px;
    margin: 0px;

    color: rgb(255, 255, 255);
}
.level::after {
    content: "!";
    width: 2.1vh;
    height: 2.1vh;
    font-size: 2.1vh;
    position: absolute;
    right: -1.5vh;
    top: -2.9vh;
    text-align: center;
    align-items:center;
    justify-content: center;

    /* background-color: white; */
}

#high {
    color: red;
    text-shadow: 0 0 10px rgb(255, 0, 0),
        0 0 20px rgb(255, 0, 0);
}
#med {
    color: yellow;
    text-shadow: 0 0 10px rgb(211, 211, 87),
        0 0 20px rgb(211, 211, 87);
}
#med::after {
    content: '⚠️';
    text-shadow: 0 0 10px rgb(211, 211, 87),
        0 0 20px rgb(211, 211, 87);
}
#norm {
    color: white;
    text-shadow: 0 0 10px rgb(218, 218, 218),
        0 0 20px rgb(218, 218, 218);
}
#norm::after {
    content: '';
    width: 0px;
    height: 0px;
}
/* actions样式 */
.actions {
    display: flex;
    flex-direction: row;
    padding: 0px;
    margin: 0px;
    gap: 0.1vw;
}
.action {
    display: flex;
    flex-direction: column;
    width: 50%;
    text-align: center;
    align-items: center;
    justify-items: center;
}
.action-button {
    display: flex;
    width: 70%;
    aspect-ratio: 1;
    padding: 0px;
    margin: 0px;

    border: 2px solid white;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
}
.action-name {
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    font-size: 1.5vh;
}
.approve-button {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: inset 0px 0px 30px 0px rgba(0, 255, 255, 0.6);
    background-repeat: no-repeat; /* 禁止重复 */
    background-position: center; /* 居中显示 */
    background-size: 80% 80%;
    background-image: url('/image/approve.png');
    position: relative;
}
.approve-button:hover {
    /* border-color: rgb(255, 255, 255); */
    background-image: url('/image/approve-hover.png');
}
.approve-button:active {
    /* border-color: rgb(127, 127, 127); */
    background-image: url('/image/approve.png');
}
.approve-button::after {
    content: '⟩';
    color: aqua;
    display: flex;
    visibility: hidden;
    width: 100%;
    height: 100%;
    line-height: 100%;
    background-color: rgb(48, 49, 49);
    border: 2px solid rgba(0, 255, 255, 0.8);
    border-radius: 10px;

    font-size: 2.9vh;
    letter-spacing: 0px;
    text-align: left;
    align-items: center;
    /* justify-content: center; */

    position: absolute;
    left: -2px;
    top: -2px;
    
    /* 默认无动画 */
    /* transform: scale(0); */
}

.approve-button.active::after {
    /* 新增：动画属性 */
    animation: showArrows 4s linear forwards;
    /* 每秒显示一个，总共 5 个 */
}

/* 关键帧动画：5 秒，依次显示 》》》》》 */
@keyframes showArrows {
    0% {
        visibility: visible;
        content: '';        /* 0秒：空 */
    }
    22% {
        content: '⟩';      /* 1秒：1个 */
    }
    44% {
        content: '⟩⟩';    /* 2秒：2个 */
    }
    66% {
        content: '⟩⟩⟩';  /* 3秒：3个 */
    }
    88% {
        content: "⟩⟩⟩⟩";
    }
    100% {
        content: "⟩⟩⟩⟩";
        visibility: hidden;
    }
}

#manual {
    border-color: rgb(127, 127, 127);
    background-repeat: no-repeat; /* 禁止重复 */
    background-position: center; /* 居中显示 */
    background-size: 80% 80%;
    background-image: url('/image/manual.png');
}
#manual:hover {
    /* border-color: rgb(255, 255, 255); */
    background-image: url('/image/manual-hover.png');
}
#manual:active {
    /* border-color: rgb(127, 127, 127); */
    background-image: url('/image/manual.png');
}

#setting {
    display: none;
    width: 100%;
    height: 70vh;
    box-sizing: border-box;
    padding: 0px;
    margin-top: 1.3vh;
    border: 2px solid rgba(56, 193, 252, 0.5);
    border-radius: 10px;
}


/* line样式 */
.line {
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right,
        rgba(0, 0, 0, 0),
        rgb(138, 220, 223),
        rgba(0, 0, 0, 0));
    margin-top: 3vh;
    margin-bottom: 3vh;
}


/* 按钮样式 */
.operation {
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
}

.button1, .button2 {
    width: 100%;
    border-radius: 10px;
    display: flex;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.button1 {
    border: 1px solid rgba(255, 0, 0, 0.3);
    margin-bottom: 2vh;
}

.button1:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    display: flex;
    left: -1px;
    top: -1px;
    border-left: 3px solid red;
    border-top: 3px solid red;
    border-top-left-radius: 9px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
}
.button1::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    display: flex;
    right: -1px;
    bottom: -1px;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    border-bottom-right-radius: 9px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
}
.button2:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    display: flex;
    left: -1px;
    bottom: -1px;
    border-left: 3px solid red;
    border-bottom: 3px solid red;
    border-bottom-left-radius: 9px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
}
.button2::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    display: flex;
    right: -1px;
    top: -1px;
    border-right: 3px solid red;
    border-top: 3px solid red;
    border-top-right-radius: 9px;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
}

.jamming-button {
    width: 100%;
    height: 6vh;
    margin: 1vh;
    border: 1px solid rgb(255, 0, 0);
    border-radius: 10px;
    color: rgb(231, 185, 185);
    font-size: 3vh;
    text-align: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);

    box-shadow: inset 0px 0px 40px 0px rgba(255, 0, 0, 0.5);
}

.jamming-button:hover {
    
    box-shadow: inset 0px 0px 40px 0px rgba(255, 0, 0, 0.7);
}
.jamming-button:active {
    /* 向下位移 + 缩小阴影，模拟按下 */
    transform: translateY(2px);
    box-shadow: inset 0px 0px 40px 0px rgba(255, 0, 0, 0.5);
}


.stop-button1 {
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 2vh;
}
.stop-button1::before,.stop-button1::after,.stop-button2::before,.stop-button2::after {
    border-color: white;
}
.stop-button {
    border-color: aliceblue;
    box-shadow: inset 0px 0px 40px 0px rgba(255, 255, 255, 0.5);
}
.stop-button:hover {
    box-shadow: inset 0px 0px 40px 0px rgba(255, 255, 255, 0.7);
}
.stop-button:active {
    transform: translateY(2px);
    box-shadow: inset 0px 0px 40px 0px rgba(255, 255, 255, 0.5);
}

.last {
    border: none;
}