/* --- 1. 核心视觉定义 --- */
:root {
    --ds-cyan: #a8f0ff;       /* 标志性青色 */
    --ds-red: #ff3e3e;        /* 警报红 */
    --ds-energy: #4deeea;     /* 能量条颜色 */
    --ds-bg-glass: rgba(0, 20, 30, 0.4); /* 按钮半透明背景 */
    --font-main: 'Segoe UI', 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
    outline: none;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: #000; overflow: hidden;
    font-family: var(--font-main);
    color: #fff;
    letter-spacing: 1px;
}

/* 游戏容器 */
#game-container {
    position: fixed; top: 50%; left: 50%;
    width: 1356px; height: 768px;
    transform: translate(-50%, -50%);
    background: #000; overflow: hidden;
}


#battle-layer { position: absolute; z-index: 5; width: 100%; height: 100%; }
#cockpit-layer {
    position: absolute; z-index: 10;
    width: 100%; height: 100%;
    pointer-events: none;
}
#cockpit-img {
    position: absolute; bottom: 0; left: 0; width: 100%;
    transform: translateY(5%); /* 稍微压低一点，防止遮挡视野 */
}

/* --- 3. 左上角 HUD (回归参照版风格) --- */
#hud-top-left {
    position: absolute; top: 40px; left: 40px; z-index: 20;
    display: flex; flex-direction: column; gap: 20px;
}

.stat-group { width: 300px; }
.stat-header { font-size: 10px; color: var(--ds-cyan); margin-bottom: 5px; opacity: 0.8; }

/* 恢复钩边效果 */
.bar-frame {
    width: 100%; height: 6px; background: rgba(0,0,0,0.5);
    border: 1px solid rgba(168, 240, 255, 0.3);
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* 钩边装饰 */
.bar-frame::before, .bar-frame::after {
    content: ''; position: absolute; width: 4px; height: 10px;
    border: 1px solid var(--ds-cyan); top: -3px;
}
.bar-frame::before { left: -1px; border-right: none; }
.bar-frame::after { right: -1px; border-left: none; }

#hp-bar-fill { height: 100%; background: var(--ds-cyan); width: 100%; transition: width 0.3s; }
#en-bar-fill { height: 100%; background: var(--ds-energy); width: 100%; transition: width 0.1s; }

/* 地名扫描线 (回归味儿所在) */
#location-tag {
    margin-top: 10px; position: relative; padding-top: 15px;
}
.scan-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ds-cyan), transparent);
    animation: scan-move 3s infinite linear;
}
@keyframes scan-move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
#zone-display { font-size: 18px; font-weight: 300; letter-spacing: 4px; }

/* --- 4. 右下角终端 (半透明死亡搁浅风格) --- */
#nav-system {
    position: absolute; right: 40px; bottom: 40px; z-index: 20;
    width: 280px; display: flex; flex-direction: column; gap: 10px;
}

/* 按钮外部框架 */
.nav-frame {
    border-right: 3px solid var(--ds-cyan);
    padding: 10px; background: rgba(0,0,0,0.2);
}

.nav-btn {
    width: 100%; background: var(--ds-bg-glass);
    border: 1px solid rgba(168, 240, 255, 0.2);
    color: #fff; padding: 12px 20px; text-align: left;
    font-size: 11px; cursor: pointer; transition: 0.3s;
    margin-bottom: 5px; backdrop-filter: blur(5px);
}
.nav-btn:hover {
    background: rgba(168, 240, 255, 0.2);
    border-color: var(--ds-cyan);
    padding-left: 25px;
}

/* --- 5. 怪物与粒子 --- */
.game-obj {
    position: absolute; pointer-events: auto;
    display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.5s;
}
/* 解决血条空的问题：这里必须定义宽度高度 */
.obj-hp-wrapper { width: 80px; height: 2px; background: rgba(0,0,0,0.6); margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.1); }
.obj-hp-inner { height: 100%; background: var(--ds-cyan); width: 100%; }

#blade-canvas { position: absolute; top: 0; left: 0; z-index: 8; pointer-events: none; }



/* --- 2. 场景层级 (优化合并版) --- */
#bg-layer {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 基础缩放 1.05 能够消除滤镜产生的白边 */
    transform: scale(1.05); 
    /* 关键：增加 transform 的过渡效果，实现风景放大 */
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1), 
                filter 0.8s ease, 
                opacity 0.8s ease;
}

/* 迁跃激活状态：风景进一步放大，产生冲入感 */
.warping-bg { 
    transform: scale(2.5) !important; /* 强制覆盖基础缩放 */
    filter: blur(8px) brightness(2); 
    opacity: 0.7;
}

/* --- 爆血粒子：大号圆形血滴 --- */
.particle {
    position: absolute;
    border-radius: 50%; /* 强制圆形 */
    pointer-events: none;
    z-index: 999;
    /* 使用更长的动画时间，让血滴飞得更远 */
    animation: particle-fly 1.2s cubic-bezier(0.1, 0.5, 0.2, 1) forwards;
}

@keyframes particle-fly {
    0% { 
        transform: translate(0, 0) scale(1.5); 
        opacity: 1; 
        filter: brightness(2);
    }
    100% { 
        /* var(--tx/ty) 由JS控制，这里增加 y 轴偏移模拟重力下坠 */
        transform: translate(var(--tx), calc(var(--ty) + 80px)) scale(0); 
        opacity: 0; 
    }
}

/* --- 商店容器：半透明遮罩 --- */
#shop-menu {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 暗化背景，突出小窗口 */
    display: flex;
    align-items: center;    /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    z-index: 2000;          /* 确保在最顶层 */
    backdrop-filter: blur(4px); /* 背景稍微模糊，更有高级感 */
}

/* --- 商店小窗口：这就是你想要的“小窗口” --- */
.shop-inner {
    width: 450px;           /* 限制宽度，不再全屏 */
    background: rgba(0, 20, 30, 0.95);
    border: 1px solid var(--ds-cyan);
    padding: 20px;
    box-shadow: 0 0 30px rgba(168, 240, 255, 0.2);
    position: relative;
}

/* 隐藏状态 */
.hidden { display: none !important; }

/* --- 6. 迁跃光束特效 --- */
#hyperspace-effect {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3; /* 位于背景之上，驾驶舱之下 */
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

#hyperspace-effect.active { opacity: 1; }

.hyper-beam {
    position: absolute;
    top: 50%; left: 50%;
    width: 150%; height: 2px;
    /* 极细的渐变光束 */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(168, 240, 255, 0) 20%, 
        rgba(168, 240, 255, 1) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform-origin: left center;
    filter: blur(1px);
    box-shadow: 0 0 10px var(--ds-cyan);
    /* 散开动画 */
    animation: beam-out 1.7s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

@keyframes beam-out {
    0% {
        transform: rotate(var(--angle)) translateX(0) scaleX(0.1);
        opacity: 0;
    }
    30% { opacity: 1; }
    100% {
        transform: rotate(var(--angle)) translateX(1000px) scaleX(3);
        opacity: 0;
    }
}