/* 页面主体 */
body {
    display: flex;  /* 使用 flexbox 布局 */
    flex-direction: column;  /* 设置垂直布局 */
    align-items: center;  /* 居中对齐内容 */
    font-family: 'Arial', sans-serif;  /* 使用 Arial 字体 */
    background-color: #2e2e2e;  /* 设置深灰色背景 */
    color: white;  /* 设置文字为白色 */
    margin: 0;  /* 去除默认的 margin */
    height: 100vh;  /* 页面高度为视口高度 */
    overflow: hidden;  /* 隐藏溢出的内容 */
}

/* 游戏区域 */
.game-area {
    display: flex;  /* 使用 flexbox 布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;  /* 垂直居中对齐 */
    position: relative;  /* 设置为相对定位 */
    width: 100%;  /* 使游戏区域宽度为 100% */
    height: 100%;  /* 使游戏区域高度为 100% */
    padding: 20px;  /* 设置内边距 */
    box-sizing: border-box;  /* 包含边框和内边距在内的尺寸计算 */
}

/* 子弹的显示样式 */
.bullet {
    font-size: 2rem;  /* 设置字体大小 */
}

/* 玩家面板基础样式 */
.player {
    position: absolute;  /* 绝对定位 */
    display: flex;  /* 使用 flexbox 布局 */
    flex-direction: column;  /* 垂直排列玩家面板内容 */
    align-items: center;  /* 水平居中对齐 */
    padding: 20px;  /* 内边距 */
    background-color: rgba(0, 0, 0, 0.5);  /* 半透明的黑色背景 */
    border-radius: 8px;  /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);  /* 阴影效果 */
    z-index: 5;  /* 层级高于其他元素 */
    margin: 50px;  /* 增加玩家面板的外边距 */
}

/* 左上角玩家面板旋转180度 */
#player1 { 
    top: 10px;  /* 距离顶部 10px */
    left: 10px;  /* 距离左边 10px */
    transform: rotate(180deg);  /* 旋转180度 */
}

/* 右上角玩家面板旋转180度 */
#player2 { 
    top: 10px;  /* 距离顶部 10px */
    right: 10px;  /* 距离右边 10px */
    transform: rotate(180deg);  /* 旋转180度 */
}

/* 下面的两个玩家面板不旋转，保持原状 */
#player3 { 
    bottom: 10px;  /* 距离底部 10px */
    left: 10px;  /* 距离左边 10px */
}

#player4 { 
    bottom: 10px;  /* 距离底部 10px */
    right: 10px;  /* 距离右边 10px */
}

/* 中间消息区域 */
#message {
    position: absolute;  /* 绝对定位 */
    top: 40%;  /* 距离顶部 40% */
    font-size: 3rem;  /* 字体大小 */
    font-weight: bold;  /* 加粗字体 */
    text-align: center;  /* 文字居中对齐 */
    color: #ff6347;  /* 使用鲜艳的红色 */
}

/* 控制面板 */
.controls {
    position: absolute;  /* 绝对定位 */
    bottom: 250px;  /* 距离底部 250px */
    text-align: center;  /* 文字居中 */
    width: 100%;  /* 宽度为100% */
    display: flex;  /* 使用 flexbox 布局 */
    justify-content: center;  /* 水平居中对齐 */
    gap: 20px;  /* 按钮之间有 20px 的间距 */
    padding: 20px;  /* 内边距 */
    box-sizing: border-box;  /* 计算尺寸时包含内边距和边框 */
    background-color: rgba(0, 0, 0, 0);  /* 背景透明 */
    border-radius: 8px;  /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);  /* 阴影效果 */
}

/* 测试面板 */
.test-controls {
    position: absolute;  /* 绝对定位 */
    top: 280px;  /* 距离顶部 250px */
    width: 100%;  /* 宽度为100% */
    display: flex;  /* 使用 flexbox 布局 */
    justify-content: center;  /* 水平居中对齐所有子元素 */
    gap: 20px;  /* 按钮和输入框之间的间距 */
    padding: 15px;  /* 内边距 */
    box-sizing: border-box;  /* 包含内边距和边框 */
    background-color: rgba(0, 0, 0, 0);  /* 背景透明 */
    border-radius: 8px;  /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);  /* 阴影效果 */
    text-align: center;  /* 文字居中 */
}

/* 两个面板的文字样式 */
.controls label {
    font-size: 1.2rem;
    padding: 16px 0px;
}
.test-controls label {
    font-size: 1rem;
    padding: 8px 16px;
}

/* 测试面板输入框样式 */
.test-controls input {
    font-size: 1.2rem;  /* 字体大小 */
    padding: 6px 12px;  /* 内边距 */
    border-radius: 8px;  /* 圆角 */
    background-color: #333;  /* 背景色 */
    color: white;  /* 白色文字 */
}
.controls span {
    font-size: 1.5rem;  /* 字体大小 */
    background-color: transparent;  /* 背景透明 */
    border: none;
    color: white;
    padding: 15px 5px;  /* 设置内边距，上下10px，左右15px */
}


/* 两个面板按钮样式 */
.controls button,
.test-controls button {
    font-size: 1.2rem;  /* 字体大小 */
    padding: 8px 16px;  /* 缩小按钮的内边距 */
    cursor: pointer;  /* 鼠标样式为手形 */
    background-color: #ff6347;  /* 红色按钮 */
    border: none;  /* 去除边框 */
    border-radius: 8px;  /* 圆角 */
    color: white;  /* 白色文字 */
    transition: background-color 0.3s ease;  /* 悬停时背景颜色平滑过渡 */
}
.controls button {
    padding: 8px 20px;
}


/* SET 按钮样式 */
button#set {
    font-size: 1.6rem;  /* 字体大小 */
    padding: 15px 30px;  /* 内边距 */
    cursor: pointer;  /* 鼠标样式为手形 */
    width: 150px;  /* 固定宽度 */
    background-color: #32cd32;  /* 鲜艳的绿色 */
    border: none;  /* 去除边框 */
    border-radius: 8px;  /* 圆角 */
    color: white;  /* 白色文字 */
    transition: background-color 0.3s ease;  /* 背景颜色平滑过渡 */
}

/* 按钮悬停效果 */
.controls button:hover,
.test-controls button:hover {
    background-color: #ff4500;  /* 悬停时按钮变为橙色 */
}

/* SET 按钮悬停效果 */
button#set:hover {
    background-color: #228b22;  /* 悬停时颜色变为深绿色 */
}

/* TRIGGER 按钮样式 */
button#trigger {
    font-size: 2rem;  /* 字体大小 */
    padding: 20px 40px;  /* 内边距 */
    cursor: pointer;  /* 鼠标样式为手形 */
    width: 180px;  /* 固定宽度 */
    margin: 10px;  /* 外边距 */
    background-color: #00bfff;  /* 明亮的蓝色 */
    border: none;  /* 去除边框 */
    border-radius: 8px;  /* 圆角 */
    color: white;  /* 白色文字 */
    transition: background-color 0.3s ease;  /* 背景颜色平滑过渡 */
    display: flex;  /* 使用 flexbox 布局 */
    align-items: center;  /* 垂直居中对齐 */
    justify-content: center;  /* 水平居中对齐 */
}

/* TRIGGER 按钮悬停效果 */
button#trigger:hover {
    background-color: #1e90ff;  /* 悬停时颜色变为蓝色 */
}

/* 优化按钮的阴影效果 */
button#trigger, button#set, .controls button {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);  /* 添加阴影效果 */
}

#message {
    transition: opacity 3s ease-out;
}