/* 
  ======================================================================
  文件名：style.css
  模块：样式表
  描述：
    定义游戏的视觉风格（赛博朋克风）。
    关键点：
    1. 使用 absolute positioning 绝对定位来重叠 Canvas 和 UI。
    2. 使用 z-index 管理层级关系。
    3. 定义 .no-cursor 类来实现模式切换时的光标隐藏。
  ======================================================================
*/

/* 全局重置：禁止用户选中文字，提升游戏体验 */
* { box-sizing: border-box; user-select: none; }

body, html { 
    margin: 0; padding: 0; 
    background: #050505; color: #fff; 
    overflow: hidden; /* 防止出现滚动条 */
    font-family: 'Rajdhani', 'Segoe UI', sans-serif; /* 科技感字体 */
}

/* --- 游戏主容器 --- */
#game-container { 
    position: relative; /* 子元素绝对定位的基准 */
    width: 1280px; height: 720px; 
    margin: auto; top: 50vh; transform: translateY(-50%); /* 屏幕垂直居中 */
    border: 2px solid #333; 
    background: #0f0f15;
    box-shadow: 0 0 50px rgba(0,0,0,0.8); /* 发光阴影效果 */
}

/* 动态网格背景 */
.grid-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* CSS 渐变绘制网格 */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none; z-index: 0; /* 最底层 */
}

/* --- Canvas 交互样式 (核心修改) --- */

/* 默认模式 (鼠标瞄准): 显示十字准星，提升射击手感 */
canvas { 
    display: block; 
    position: relative; 
    z-index: 1; 
    cursor: crosshair; 
}

/* 键盘模式: 隐藏系统光标，避免干扰红点瞄准线的视觉 */
canvas.no-cursor {
    cursor: none;
}

/* --- UI 工具类 --- */

/* 用于 JS 切换显示/隐藏 */
.hidden { display: none !important; }

/* 遮罩层 (菜单/结算页面) */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 15, 0.95); /* 半透明深色背景 */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; 
    z-index: 100; /* 最高层级，盖住游戏 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

/* --- 战斗 UI (HUD) --- */
#game-ui { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    /* 关键属性: 让鼠标点击事件“穿透”UI层，直接作用于底下的 Canvas */
    /* 除非子元素显式设置了 pointer-events: auto */
    pointer-events: none; 
    padding: 20px; 
    z-index: 10; 
}

/* 退出按钮 (需要可点击) */
.quit-btn { 
    position: absolute; top: 10px; right: 10px; 
    border-color: #ff1744; color: #ff1744; 
    pointer-events: auto; /* 恢复点击响应 */
    z-index: 200; 
    font-size: 14px; padding: 8px 15px; 
    background: rgba(0,0,0,0.8);
    cursor: pointer;
}
.quit-btn:hover { background: #ff1744; color: #fff; }

/* 左右两侧状态栏布局 */
.hud { position: absolute; top: 20px; width: 320px; pointer-events: none; }
.left { left: 20px; }
.right { right: 20px; text-align: right; }

.name { font-size: 24px; font-weight: bold; margin-bottom: 5px; text-shadow: 0 0 10px currentColor; }
.p1-text { color: #ff1744; }
.p2-text { color: #29b6f6; }

/* 血条/能量条样式 */
.bar-container { display: flex; align-items: center; margin: 5px 0; }
.bar-label { width: 30px; font-size: 14px; color: #888; font-weight: bold; }
/* 斜切效果的进度条背景 */
.bar-bg { flex: 1; height: 10px; background: #222; border: 1px solid #444; transform: skewX(-20deg); overflow: hidden; }
.bar { height: 100%; width: 100%; transition: width 0.2s; }
.hp { background: linear-gradient(90deg, #ff5252, #ff1744); }
.en { background: linear-gradient(90deg, #40c4ff, #00b0ff); }

/* 基地血量文字 */
.base-hp-box { 
    font-size: 18px; color: #fff; font-weight: bold; margin-top: 15px; 
    padding: 10px; background: rgba(0,0,0,0.5); border-left: 4px solid #fff;
}
.p1-border { border-color: #ff1744; }
.p2-border { border-color: #29b6f6; }

/* 中央提示 */
.center-hud { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; text-align: center; }
#timer { font-size: 40px; font-weight: bold; color: #fff; letter-spacing: 2px; }
.hint { font-size: 12px; color: #666; margin-top: 5px; background: rgba(0,0,0,0.8); padding: 4px 10px; border-radius: 4px; transition: color 0.3s; }

/* 菜单按钮样式 */
.title { font-size: 64px; color: #00e5ff; text-shadow: 0 0 20px #00e5ff; margin: 0; font-style: italic; }
.subtitle { color: #888; letter-spacing: 8px; margin-bottom: 50px; }
button { 
    background: rgba(0,0,0,0.6); color: #fff; border: 1px solid #00e5ff; 
    padding: 15px 40px; margin: 10px; cursor: pointer; font-size: 18px; 
    /* 赛博朋克切角风格 */
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    pointer-events: auto;
}
button:hover { background: #00e5ff; color: #000; }

/* 大厅样式 */
.panel { background: rgba(30,30,40,0.9); padding: 40px; border: 1px solid #444; width: 500px; text-align: center; }
input { background: #111; border: 1px solid #555; color: #fff; padding: 12px; width: 200px; text-align: center; margin: 10px 0; pointer-events: auto; }
.role-btn { width: 160px; padding: 20px; border: 2px solid #333; opacity: 0.5; }
.role-btn.p1:hover, .role-btn.p1[style*="border-color"] { border-color: #ff1744 !important; opacity: 1; }
.role-btn.p2:hover, .role-btn.p2[style*="border-color"] { border-color: #29b6f6 !important; opacity: 1; }

/* 胜利结算文字 */
.victory-title { font-size: 120px; color: #ffeb3b; text-shadow: 0 0 50px rgba(255, 235, 59, 0.8); margin: 0; font-style: italic; }
.winner-announce { margin: 20px 0 50px; text-align: center; }
.small-label { font-size: 16px; color: #aaa; display: block; margin-bottom: 5px; }
#winner-name { font-size: 60px; font-weight: bold; }