* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #050505; color: white; overflow: hidden; height: 100vh; }
#container { position: relative; width: 100%; height: 100vh; }
#ui { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; pointer-events: none; z-index: 10; display: flex; justify-content: space-between; }
#stats, .target-counter { background-color: rgba(0, 0, 0, 0.8); border: 1px solid #333; border-radius: 8px; padding: 15px; min-width: 180px; }
.stat-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; }
.stat-value { font-weight: bold; color: #00d2ff; }

/* 控制面板 */
#controls { position: absolute; bottom: 20px; left: 20px; background: rgba(15, 15, 15, 0.9); border: 1px solid #444; border-radius: 12px; padding: 20px; width: 280px; pointer-events: auto; z-index: 45; }

/* 暂停遮罩(位于控制面板之下,便于暂停时调节设置) */
#pauseOverlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 40; cursor: pointer; }
#pauseOverlay h2 { font-size: 36px; color: #00d2ff; margin-bottom: 12px; }
#pauseOverlay p { color: #bbb; font-size: 14px; margin-bottom: 6px; }
#pauseOverlay .pause-hint { color: #888; font-size: 12px; margin-top: 24px; }
.control-group { margin-bottom: 15px; }
.control-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 8px; }

.btn { background: #222; color: #eee; border: 1px solid #444; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: 0.2s; font-size: 13px; }
.btn:hover { background: #333; border-color: #00d2ff; }
.btn.active { background: #00d2ff; color: #000; border-color: #00d2ff; }

input[type="number"] { background: #000; border: 1px solid #444; color: #00d2ff; padding: 5px; border-radius: 4px; width: 60px; outline: none; }

/* 滑条 */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #333; border-radius: 2px; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #00d2ff; border: none; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #00d2ff; border: none; }

#startBtn { background: #e74c3c; width: 100%; font-weight: bold; font-size: 16px; margin-top: 10px; border: none; }
#startBtn:hover { background: #ff5e4d; }

/* 准星 */
#crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); pointer-events: none; z-index: 9; }
.ch-line { position: absolute; background: #00ff00; }
.ch-v { width: 2px; height: 100%; left: 9px; }
.ch-h { width: 100%; height: 2px; top: 9px; }

/* 结算界面 */
#gameOver { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(10, 10, 10, 0.95); border: 2px solid #00d2ff; padding: 40px; border-radius: 15px; text-align: center; display: none; z-index: 100; min-width: 350px; }
#gameOver h2 { font-size: 28px; margin-bottom: 20px; color: #00d2ff; }
.final-stat-box { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }

#hitEffect { position: absolute; border-radius: 50%; border: 2px solid #00ff00; pointer-events: none; opacity: 0; z-index: 5; }