/* 全局样式 */
* {
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
    box-sizing: border-box; /* 使用边框盒模型 */
}

body {
    font-family: 'Arial', sans-serif; /* 设置字体 */
    background-color: #111; /* 深色背景 */
    color: #fff; /* 白色文字 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 最小高度为视口高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    -webkit-touch-callout: none; /* 禁止iOS长按菜单 */
    -webkit-user-select: none; /* 禁止选择文本 */
    -khtml-user-select: none; /* 禁止选择文本 */
    -moz-user-select: none; /* 禁止选择文本 */
    -ms-user-select: none; /* 禁止选择文本 */
    user-select: none; /* 禁止选择文本 */
    touch-action: none; /* 禁止默认触摸行为 */
}

/* 星空背景 */
body::before {
    content: ''; /* 必需的内容属性 */
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0)); /* 创建星星 */
    background-repeat: repeat; /* 背景重复 */
    background-size: 200px 200px; /* 背景尺寸 */
    z-index: -1; /* 负z-index放置在后面 */
    animation: stars-move 100s linear infinite; /* 星空动画 */
}

/* 星空动画 */
@keyframes stars-move {
    0% {
        background-position: 0 0; /* 初始位置 */
    }
    100% {
        background-position: 0 1000px; /* 结束位置 */
    }
}

.container {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 纵向排列 */
    align-items: center; /* 水平居中 */
    max-width: 1000px; /* 最大宽度 */
    width: 100%; /* 宽度100% */
    padding: 20px; /* 内边距 */
    position: relative; /* 添加相对定位 */
}

.game-header {
    text-align: center; /* 文本居中 */
    margin-bottom: 20px; /* 下外边距 */
    width: 100%; /* 宽度100% */
}

.game-header h1 {
    font-size: 3rem; /* 字号 */
    color: #f7d100; /* 金色 */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); /* 文字阴影 */
    margin-bottom: 10px; /* 下外边距 */
}

.game-header p {
    font-size: 1.2rem; /* 字号 */
    color: #ccc; /* 浅灰色 */
}

#game-container {
    width: 800px; /* 宽度 */
    height: 800px; /* 高度 */
    border: 2px solid #444; /* 边框 */
    border-radius: 5px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 阴影 */
    position: relative; /* 相对定位 */
    background-color: #000; /* 黑色背景 */
}

.game-footer {
    margin-top: 20px; /* 上外边距 */
    text-align: center; /* 文本居中 */
    width: 100%; /* 宽度100% */
    color: #888; /* 灰色文字 */
    font-size: 0.9rem; /* 字号 */
}

.game-footer p {
    margin: 5px 0; /* 上下外边距 */
}

/* 触摸控制样式 */
.mobile-controls {
    display: none; /* 默认隐藏，通过JS动态控制 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 从顶部开始 */
    left: 0; /* 从左侧开始 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    z-index: 100; /* 确保在上层 */
    pointer-events: none; /* 默认不拦截点击 */
}

.joystick-area {
    width: 100%; /* 覆盖整个区域 */
    height: 100%; /* 覆盖整个区域 */
    position: relative; /* 相对定位 */
    pointer-events: auto; /* 启用触摸事件 */
}

.joystick-base {
    width: 80px; /* 摇杆基座宽度 */
    height: 80px; /* 摇杆基座高度 */
    background-color: rgba(255, 255, 255, 0.2); /* 半透明白色 */
    border-radius: 50%; /* 圆形 */
    position: absolute; /* 绝对定位 */
    display: none; /* 默认隐藏，动态显示 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 边框 */
}

.joystick-thumb {
    width: 30px; /* 摇杆手柄宽度 */
    height: 30px; /* 摇杆手柄高度 */
    background-color: rgba(255, 255, 255, 0.6); /* 半透明白色 */
    border-radius: 50%; /* 圆形 */
    position: absolute; /* 绝对定位 */
    border: 1px solid rgba(255, 255, 255, 0.8); /* 边框 */
    display: none; /* 默认隐藏，动态显示 */
}

/* 响应式设计 */
@media (max-width: 850px) {
    #game-container {
        width: 100%; /* 宽度100% */
        height: auto; /* 自适应高度 */
        aspect-ratio: 1 / 1; /* 保持1:1宽高比 */
    }
    
    .game-header h1 {
        font-size: 2rem; /* 较小字号 */
    }
    
    /* 以下控制由JavaScript管理，不再在CSS中自动设置 */
    /* .mobile-controls {
        display: block;
    }
    
    .controls-hint {
        display: none;
    }
    
    .mobile-hint {
        display: block;
    } */
}

/* 针对小屏幕设备的额外调整 */
@media (max-width: 480px) {
    .container {
        padding: 10px; /* 更小的内边距 */
    }
    
    .game-header h1 {
        font-size: 1.8rem; /* 更小的字号 */
        margin-bottom: 5px; /* 更小的下外边距 */
    }
    
    .game-header p {
        font-size: 0.9rem; /* 更小的字号 */
    }
    
    .game-footer {
        margin-top: 10px; /* 更小的上外边距 */
        font-size: 0.8rem; /* 更小的字号 */
    }
    
    .joystick-base {
        width: 70px; /* 更小的摇杆基座 */
        height: 70px; /* 更小的摇杆基座 */
    }
    
    .joystick-thumb {
        width: 25px; /* 更小的摇杆手柄 */
        height: 25px; /* 更小的摇杆手柄 */
    }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
    .container {
        flex-direction: row; /* 横向排列 */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 内容居中 */
        padding: 5px; /* 更小的内边距 */
    }
    
    .game-header {
        width: 100%; /* 全宽标题 */
        margin-bottom: 5px; /* 更小的下外边距 */
    }
    
    .game-footer {
        width: 100%; /* 全宽页脚 */
        margin-top: 5px; /* 更小的上外边距 */
    }
    
    #game-container {
        width: 90vh; /* 相对于视口高度的宽度 */
        height: 90vh; /* 相对于视口高度的高度 */
        max-width: 60%; /* 最大宽度限制 */
        margin: 0; /* 移除外边距 */
    }
    
    .mobile-controls {
        width: 100%; /* 宽度100% */
        height: 100%; /* 高度100% */
        position: absolute; /* 绝对定位 */
        top: 0; /* 顶部对齐 */
        left: 0; /* 左侧对齐 */
    }
}

/* 添加闪烁按钮效果 */
.game-header p {
    animation: pulse 2s infinite; /* 脉冲动画 */
}

@keyframes pulse {
    0% {
        opacity: 0.7; /* 初始透明度 */
    }
    50% {
        opacity: 1; /* 中间透明度 */
    }
    100% {
        opacity: 0.7; /* 结束透明度 */
    }
}

canvas {
    display: block; /* 设置为块级元素 */
    margin: 0 auto; /* 居中显示 */
    touch-action: none; /* 禁止默认触摸行为 */
}

/* 加载状态指示器样式 */
.loading-indicator {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 居中修正 */
    background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.7); /* 蓝色阴影 */
    text-align: center; /* 文字居中 */
    z-index: 1000; /* 确保在最上层 */
    width: 300px; /* 宽度 */
    max-width: 80%; /* 最大宽度 */
    border: 1px solid #00aaff; /* 蓝色边框 */
}

.loading-text {
    font-size: 20px; /* 字体大小 */
    color: #ffffff; /* 白色文字 */
    margin-bottom: 15px; /* 下外边距 */
    text-shadow: 0 0 5px #00aaff; /* 文字阴影 */
}

.loading-progress-container {
    width: 100%; /* 宽度100% */
    height: 20px; /* 高度 */
    background-color: #222; /* 深灰色背景 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出部分 */
    margin-bottom: 10px; /* 下外边距 */
}

.loading-progress-bar {
    width: 0%; /* 初始宽度0% */
    height: 100%; /* 高度100% */
    background: linear-gradient(to right, #0055ff, #00aaff); /* 蓝色渐变 */
    transition: width 0.3s ease; /* 平滑过渡 */
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.7); /* 发光效果 */
}

.loading-status {
    font-size: 14px; /* 字体大小 */
    color: #aaddff; /* 浅蓝色文字 */
    font-style: italic; /* 斜体 */
}

.loading-debug {
    margin-top: 15px; /* 上外边距 */
    text-align: center; /* 文字居中 */
}

.force-continue-btn {
    background-color: #ff3333; /* 红色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    padding: 8px 15px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    cursor: pointer; /* 鼠标样式 */
    opacity: 0.8; /* 半透明 */
    transition: all 0.3s ease; /* 过渡效果 */
    margin-top: 10px; /* 上外边距 */
    display: none; /* 默认隐藏 */
}

.force-continue-btn:hover {
    opacity: 1; /* 悬停时完全不透明 */
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); /* 发光效果 */
}

.loading-log {
    font-size: 12px; /* 字体大小 */
    color: #888; /* 灰色文字 */
    max-height: 100px; /* 最大高度 */
    overflow-y: auto; /* 垂直滚动 */
    text-align: left; /* 文字左对齐 */
    margin-top: 10px; /* 上外边距 */
    padding: 5px; /* 内边距 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    border-radius: 5px; /* 圆角 */
    display: none; /* 默认隐藏 */
}

.mobile-hint {
    display: none; /* 默认隐藏，通过JS和媒体查询控制显示 */
    margin: 5px 0; /* 上下外边距 */
    font-size: 0.95rem; /* 字体大小 */
    color: #00aaff; /* 蓝色文字 */
    animation: pulse 2s infinite; /* 脉冲动画 */
}