/*
 Last Horizon
 V1.6.1 Expansion Update

 Tab666制作
*/



*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:
"Segoe UI",
Arial,
sans-serif;

}





body{


background:#050505;


overflow:hidden;


color:white;


}







/* =====================
   游戏容器
===================== */


#gameContainer{


position:relative;


width:960px;


height:600px;


margin:auto;


top:50vh;


transform:
translateY(-50%);


box-shadow:

0 0 40px
#111;


}







canvas{


display:block;


background:#050510;


border:

2px solid #222;


}







/* =====================
 HUD
===================== */


#hud{


position:absolute;


top:15px;


left:20px;



font-size:18px;


line-height:32px;



background:

rgba(0,0,0,0.45);



padding:

10px 18px;


border-radius:10px;



border:

1px solid #333;


}





#hud div{


text-shadow:

0 0 10px black;


}








/* =====================
右侧UI
===================== */


#rightUI{


position:absolute;


right:20px;


top:15px;


width:200px;


}




#dashCD{


background:

rgba(0,0,0,.5);


padding:10px;


border-radius:10px;


text-align:center;


font-size:18px;


margin-bottom:15px;


border:

1px solid #333;


}







/* =====================
装备栏
===================== */


#equipment{


background:

rgba(0,0,0,.55);



padding:12px;


border-radius:10px;


border:

1px solid #333;


}



#equipment div{


height:35px;


line-height:35px;


font-size:15px;



border-bottom:

1px solid #333;


}






/* =====================
Boss血条
===================== */


#bossUI{


display:none;


position:absolute;


top:20px;


left:50%;


transform:

translateX(-50%);



width:500px;


text-align:center;


}




.bossTitle{


font-size:22px;


color:#ff4444;


margin-bottom:8px;


text-shadow:

0 0 15px red;


}




#bossBar{


width:500px;


height:22px;


background:#222;


border-radius:20px;


overflow:hidden;


border:

2px solid #660000;


}




#bossHPBar{


height:100%;


width:100%;


background:

linear-gradient(
90deg,
#ff0000,
#880000
);


transition:

width .2s;


}









/* =====================
升级界面
===================== */


#upgrade{


display:none;


position:absolute;


left:50%;


top:50%;



transform:

translate(-50%,-50%);



width:450px;


padding:30px;


background:

rgba(0,0,0,.85);


border:

2px solid #00ffff;


border-radius:20px;


text-align:center;



box-shadow:

0 0 30px #00ffff;


}




#upgrade h1{


color:#00ffff;


margin-bottom:20px;


}




#upgrade button{


display:block;


width:90%;


margin:15px auto;


padding:15px;



background:#111;


color:white;



border:

1px solid #00ffff;



border-radius:10px;



cursor:pointer;



font-size:16px;



transition:.2s;


}




#upgrade button:hover{


background:#00ffff;


color:black;


transform:

scale(1.05);


}









/* =====================
死亡/胜利
===================== */


#gameover,
#victory{


display:none;


position:absolute;


left:50%;


top:50%;


transform:

translate(-50%,-50%);



width:400px;


padding:40px;



background:

rgba(0,0,0,.9);


border-radius:20px;



text-align:center;


border:

2px solid red;


box-shadow:

0 0 40px red;


font-size:20px;


}







#victory{


border-color:#00ff99;


box-shadow:

0 0 40px #00ff99;


}







#gameover button,
#victory button{


margin-top:25px;


padding:12px 35px;


font-size:18px;



border:none;


border-radius:10px;



cursor:pointer;


background:white;


color:black;


}



#gameover button:hover,
#victory button:hover{


transform:

scale(1.1);


}









/* =====================
动画
===================== */


@keyframes glow{


0%{


opacity:.7;


}


50%{


opacity:1;


}


100%{


opacity:.7;


}



}



.bossTitle{


animation:

glow 1.5s infinite;


}

#bossWarning {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: #ff6666;
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
    pointer-events: none;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 50px;
    border-radius: 15px;
    border: 2px solid rgba(255, 0, 0, 0.3);
    animation: bossFade 1.5s ease-in-out forwards;
}

@keyframes bossFade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}