/* ============================================================
   落地成盒 FPS 小游戏 - 基础样式
   军事色系：军绿、卡其、深棕
   所有可交互元素触控热区 ≥ 44x44px
   ============================================================ */

/* ---------- 全局重置与基础 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh; /* iOS Safari 动态视口高度，自动排除地址栏 */
    overflow: hidden;
    /* 禁止触摸滚动/缩放/长按菜单 */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: #1a1a1a;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ---------- 游戏主容器 ---------- */
#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

/* ---------- Three.js 渲染画布 ---------- */
#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* ============================================================
   HUD 层 - 覆盖在 canvas 之上
   ============================================================ */
#hud,
.hud-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 默认不拦截触摸，子元素按需开启 */
    z-index: 10;
}

/* ---------- 生命值条 - 底部居中（和平精英风格） ---------- */
#hud-health,
.hud-health {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #556b2f; /* 军绿边框 */
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#hud-health-bar,
.hud-health-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #4a7c2e, #6b8e23); /* 军绿渐变 */
    transition: width 0.3s ease;
}

.hud-health-text {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------- 击杀数 - 已隐藏（合并到顶部信息栏 #hud-top-info） ---------- */
#hud-kills,
.hud-kills {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #d4c5a0; /* 卡其色文字 */
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px;
    border-radius: 4px;
    border: 1px solid rgba(107, 142, 35, 0.5);
    display: none;
}

/* ---------- 存活敌人数 - 已隐藏（合并到顶部信息栏 #hud-top-info） ---------- */
#hud-enemies,
.hud-enemies {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #cd5c5c; /* 红色调，表示敌人 */
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(205, 92, 92, 0.4);
    display: none;
}

/* ---------- 顶部信息栏 - 击杀数+存活敌人数合并居中 ---------- */
#hud-top-info,
.hud-top-info {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #d4c5a0;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 14px;
    border-radius: 4px;
    border: 1px solid rgba(107, 142, 35, 0.5);
}

/* ---------- 准星 - 正中央 (需求 5.2, 5.5) ---------- */
/* 空心十字准星（4 条短线，中间留空隙） */
#hud-crosshair,
.hud-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out;
    pointer-events: none;
}

/* 准星四条线的通用样式 */
.hud-crosshair span {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    transition: all 0.1s ease-out;
}

/* 上竖线 */
.hud-crosshair .ch-top {
    left: 50%;
    top: 0;
    width: 2px;
    height: 9px;
    transform: translateX(-50%);
}

/* 下竖线 */
.hud-crosshair .ch-bottom {
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 9px;
    transform: translateX(-50%);
}

/* 左横线 */
.hud-crosshair .ch-left {
    top: 50%;
    left: 0;
    width: 9px;
    height: 2px;
    transform: translateY(-50%);
}

/* 右横线 */
.hud-crosshair .ch-right {
    top: 50%;
    right: 0;
    width: 9px;
    height: 2px;
    transform: translateY(-50%);
}

/* 准星不再需要 ::before / ::after */
#hud-crosshair::before,
#hud-crosshair::after,
.hud-crosshair::before,
.hud-crosshair::after {
    display: none;
}

/* 命中反馈：准星变红 */
#hud-crosshair.hitmarker span {
    background: #ff3333;
    box-shadow: 0 0 4px rgba(255, 50, 50, 0.6);
}

/* ---------- 换弹提示 ---------- */
.hud-reload-tip {
    position: absolute;
    top: calc(50% + 36px);
    left: 50%;
    transform: translateX(-50%);
    color: #ffdd57;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    pointer-events: none;
    letter-spacing: 1px;
    z-index: 100;
    white-space: nowrap;
}

/* ---------- 弹药数 - 已隐藏（弹药信息整合到武器槽内） ---------- */
#hud-ammo,
.hud-ammo {
    position: absolute;
    bottom: 20px;
    right: 110px; /* 射击按钮左侧 */
    color: #d4c5a0; /* 卡其色 */
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(107, 142, 35, 0.4);
    min-height: 44px;
    display: none !important;
    align-items: center;
    gap: 8px;
}

.hud-ammo-empty {
    color: #ff4444;
    font-size: 13px;
    animation: ammo-blink 0.6s ease-in-out infinite;
}

@keyframes ammo-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------- 射击按钮 - 左上区域（四指操作：左手食指） ---------- */
/* 触控热区 ≥ 44x44px，实际按钮更大以便操作 */
#hud-fire-btn,
.hud-fire-btn {
    position: absolute;
    top: 60px;
    left: 12px;
    bottom: auto;
    right: auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 40, 40, 0.8), rgba(140, 20, 20, 0.9));
    border: 3px solid rgba(255, 100, 100, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* 开启触摸事件 */
    touch-action: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(200, 50, 50, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 20;
}

#hud-fire-btn:active,
.hud-fire-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 25px rgba(255, 50, 50, 0.7);
    background: radial-gradient(circle, rgba(220, 50, 50, 0.9), rgba(160, 30, 30, 1));
}

.hud-fire-btn-inner {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none; /* 不拦截内部元素的触摸 */
}

/* ---------- 虚拟摇杆区域 - 左侧 (需求 2.2) ---------- */
#hud-joystick-zone,
.hud-joystick-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 50%;
    pointer-events: auto; /* 开启触摸事件 */
    touch-action: none;
}

/* 摇杆底座 - 圆形 */
#hud-joystick-base,
.hud-joystick-base {
    position: absolute;
    bottom: 50px;
    left: 40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(85, 107, 47, 0.25); /* 军绿半透明 */
    border: 2px solid rgba(107, 142, 35, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 摇杆拇指 - 圆形 */
#hud-joystick-thumb,
.hud-joystick-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 180, 120, 0.8), rgba(107, 142, 35, 0.7));
    border: 2px solid rgba(200, 220, 160, 0.6);
    box-shadow: 0 0 8px rgba(107, 142, 35, 0.3);
    transition: transform 0.08s ease-out; /* 平滑回弹 */
}

/* ---------- 受伤闪烁遮罩 (需求 5.6) ---------- */
#hud-damage-overlay,
.hud-damage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 0, 0, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 20;
}

.hud-damage-overlay.active {
    opacity: 1;
    animation: damage-flash 0.4s ease-out forwards;
}

@keyframes damage-flash {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* ---------- 受伤方向指示器 (需求 5.10) ---------- */
#hud-damage-indicator,
.hud-damage-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 21;
}

/* 方向指示箭头（通过 JS 动态旋转） */
.hud-damage-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 30px;
    background: rgba(255, 50, 50, 0.8);
    border-radius: 3px;
    opacity: 0;
}

.hud-damage-indicator.active::after {
    opacity: 1;
    animation: indicator-fade 1.5s ease-out forwards;
}

@keyframes indicator-fade {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* ---------- 击杀飘字区域 (需求 5.8) ---------- */
#hud-killfeed,
.hud-killfeed {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700; /* 金色 */
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    z-index: 25;
}

/* killfeed animation defined in enhanced section below */

/* ---------- 连杀提示区域 (需求 5.9) ---------- */
#hud-multikill,
.hud-multikill {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    color: #ff6600; /* 橙色，醒目 */
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    z-index: 26;
}

/* multikill animation defined in enhanced section below */

/* ---------- 爆头提示区域 (需求 3.15) ---------- */
#hud-headshot,
.hud-headshot {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    color: #ff3333;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    z-index: 25;
}

.hud-headshot.active {
    animation: headshot-flash 1.2s ease-out forwards;
}

@keyframes headshot-flash {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ============================================================
   覆盖层通用样式（菜单、结算、横屏提示、错误提示）
   ============================================================ */
.overlay-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* ---------- 菜单界面 (需求 1.1) ---------- */
#menu-screen,
.menu-screen {
    background: radial-gradient(ellipse at center, rgba(40, 50, 30, 0.95), rgba(20, 25, 15, 0.98));
}

.menu-title {
    color: #d4c5a0; /* 卡其色 */
    font-size: 48px;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
    letter-spacing: 6px;
}

.menu-subtitle {
    color: rgba(180, 170, 140, 0.7);
    font-size: 16px;
    margin-bottom: 20px;
}

/* 用户名输入框 */
.input-username {
    width: 200px;
    height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    font-family: inherit;
    color: #d4c5a0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(143, 188, 62, 0.5);
    border-radius: 6px;
    text-align: center;
    outline: none;
    margin-bottom: 20px;
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
}
.input-username::placeholder {
    color: rgba(180, 170, 140, 0.4);
    font-size: 13px;
}
.input-username:focus {
    border-color: #8fbc3e;
    box-shadow: 0 0 8px rgba(143, 188, 62, 0.3);
}

/* 用户名未填写提示 */
.username-tip {
    color: #ff6b6b;
    font-size: 13px;
    margin-top: -6px;
    margin-bottom: 4px;
    animation: tipFadeIn 0.2s ease;
}

@keyframes tipFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* HUD 用户名显示 */
.hud-username {
    color: #ffcc00;
    margin-right: 8px;
    font-weight: bold;
}

/* 主按钮 - 触控热区 ≥ 44x44px */
.btn-primary {
    min-width: 180px;
    min-height: 50px;
    padding: 12px 36px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #6b8e23, #556b2f); /* 军绿渐变 */
    border: 2px solid #8fbc3e;
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    font-family: inherit;
}

.btn-primary:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #556b2f, #3b4a1f);
}

/* ---------- 结算界面 (需求 6.1-6.4) ---------- */
#result-screen,
.result-screen {
    background: radial-gradient(ellipse at center, rgba(30, 35, 25, 0.95), rgba(15, 18, 10, 0.98));
}

.result-title {
    font-size: 36px;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
}

/* 胜利标题 - 金色 */
.result-title.victory {
    color: #ffd700;
}

/* 失败标题 - 红色 */
.result-title.defeat {
    color: #cd5c5c;
}

.result-stats {
    color: #d4c5a0;
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

#btn-restart {
    min-width: 180px;
    min-height: 50px;
}

/* ---------- 横屏提示 (需求 7.1) ---------- */
/* 默认竖屏时显示，横屏时隐藏 */
#landscape-hint,
.landscape-hint {
    background: rgba(20, 25, 15, 0.97);
    z-index: 200;
}

.landscape-hint-content {
    text-align: center;
    color: #d4c5a0;
}

.landscape-hint-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: rotate-hint 2s ease-in-out infinite;
}

@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

.landscape-hint-content p {
    font-size: 16px;
    line-height: 1.6;
}

/* 横屏时隐藏横屏提示 */
@media screen and (orientation: landscape) {
    #landscape-hint,
    .landscape-hint {
        display: none !important;
    }
}

/* 竖屏时显示横屏提示 */
@media screen and (orientation: portrait) {
    #landscape-hint,
    .landscape-hint {
        display: flex !important;
    }
}

/* ---------- WebGL 不支持提示 ---------- */
#webgl-unsupported,
.webgl-unsupported {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.98);
    z-index: 300;
}

/* ---------- CDN 加载失败提示 ---------- */
#cdn-load-error,
.cdn-load-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.98);
    z-index: 300;
}

/* 错误提示内容 */
.error-content {
    text-align: center;
    color: #d4c5a0;
    padding: 20px;
}

.error-content h2 {
    font-size: 24px;
    margin-bottom: 12px;
    color: #cd5c5c;
}

.error-content p {
    font-size: 16px;
    margin-bottom: 20px;
    color: rgba(200, 190, 160, 0.8);
    line-height: 1.6;
}

/* ============================================================
   安全区域适配（刘海屏等）
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
    #hud-health,
    .hud-health {
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 50%; /* 保持居中，不偏移 */
    }

    #hud-top-info,
    .hud-top-info {
        top: calc(12px + env(safe-area-inset-top));
    }

    #hud-fire-btn,
    .hud-fire-btn {
        top: calc(60px + env(safe-area-inset-top));
        left: calc(12px + env(safe-area-inset-left));
    }

    #hud-weapon-switch,
    .hud-weapon-switch {
        bottom: calc(52px + env(safe-area-inset-bottom));
        left: 50%;
    }

    .hud-joystick-base {
        bottom: calc(50px + env(safe-area-inset-bottom));
        left: calc(40px + env(safe-area-inset-left));
    }
}

/* ---------- 地图边界警告遮罩 ---------- */
#hud-border-warning,
.hud-border-warning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 60, 0, 0.5) 100%);
    opacity: 0;
    z-index: 19;
}

/* ---------- 开镜瞄准按钮 ---------- */
#hud-ads-btn,
.hud-ads-btn {
    position: absolute;
    top: 60px;
    right: 12px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(60, 120, 200, 0.7), rgba(40, 80, 160, 0.8));
    border: 2px solid rgba(100, 160, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(60, 120, 200, 0.3);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 20;
}

#hud-ads-btn:active,
.hud-ads-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 20px rgba(100, 160, 255, 0.6);
    background: radial-gradient(circle, rgba(80, 150, 240, 0.9), rgba(50, 100, 200, 1));
}

.hud-ads-btn-inner {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
    #hud-ads-btn,
    .hud-ads-btn {
        top: calc(60px + env(safe-area-inset-top));
        right: calc(12px + env(safe-area-inset-right));
    }
}

/* ============================================================
   武器切换 UI - 底部居中（和平精英风格）
   ============================================================ */
/* ---------- 武器切换 UI - 底部居中横排（血条上方，和平精英风格） ---------- */
#hud-weapon-switch,
.hud-weapon-switch {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 200px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    pointer-events: auto;
    touch-action: none;
    z-index: 30;
}

.weapon-slot {
    flex: 1;
    height: 40px;
    background: rgba(107, 142, 35, 0.25);
    border: 2px solid rgba(107, 142, 35, 0.6);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.weapon-slot.active {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.weapon-slot-name {
    color: #ccc;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
}

.weapon-slot.active .weapon-slot-name {
    color: #fff;
}

.weapon-slot-ammo {
    color: #d4c5a0;
    font-size: 13px;
    font-weight: bold;
    pointer-events: none;
}

/* 弹药不足闪烁警告（复用 ammo-blink 动画） */
.weapon-slot-ammo.ammo-empty {
    color: #ff4444;
    animation: ammo-blink 0.6s ease-in-out infinite;
}

/* ============================================================
   狙击镜覆盖层
   ============================================================ */
#hud-sniper-overlay,
.hud-sniper-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    display: none;
}

#hud-sniper-overlay.active,
.hud-sniper-overlay.active {
    display: block;
}

/* 黑色圆形边框遮罩 */
.sniper-scope-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 28%, rgba(0,0,0,0.85) 32%, rgba(0,0,0,0.98) 45%);
}

/* 十字线 */
.sniper-crosshair-h {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%);
}

.sniper-crosshair-v {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
}

/* 中心红点 */
.sniper-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #ff3333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ============================================================
   增强版击杀播报
   ============================================================ */
.killfeed-tag {
    display: inline-block;
    font-size: 14px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.killfeed-tag-sniper {
    background: rgba(255, 170, 0, 0.3);
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.5);
}

.killfeed-tag-headshot {
    background: rgba(255, 50, 50, 0.3);
    color: #ff3333;
    border: 1px solid rgba(255, 50, 50, 0.5);
}

/* 增强版击杀飘字动画 */
@keyframes killfeed-enhanced {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(1.5);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-60px) scale(1);
    }
}

.hud-killfeed.active {
    animation: killfeed-enhanced 1.5s ease-out forwards;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   增强版连杀特效
   ============================================================ */
@keyframes multikill-enhanced {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(2.0);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) scale(1.0);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.0) translateY(-30px);
    }
}

.hud-multikill.active {
    animation: multikill-enhanced 2s ease-out forwards;
}

/* 屏幕边缘闪光（Multi Kill 4+） */
#hud-edge-flash,
.hud-edge-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 24;
    opacity: 0;
}

.hud-edge-flash.active {
    animation: edge-flash-anim 0.6s ease-out forwards;
}

@keyframes edge-flash-anim {
    0% {
        opacity: 0.7;
        background: radial-gradient(ellipse at center, transparent 50%, rgba(160, 32, 240, 0.5) 100%);
    }
    100% {
        opacity: 0;
        background: radial-gradient(ellipse at center, transparent 50%, rgba(160, 32, 240, 0) 100%);
    }
}

/* ============================================================
   波次公告
   ============================================================ */
#hud-wave-announcement,
.hud-wave-announcement {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    text-align: center;
}

.hud-wave-announcement.active {
    animation: wave-announce 2s ease-in-out forwards;
}

@keyframes wave-announce {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* 波次清除提示 */
.hud-wave-announcement.wave-clear {
    color: #4caf50;
    font-size: 2em;
}

.hud-wave-announcement.wave-clear.active {
    animation: wave-clear-anim 1.5s ease-out forwards;
}

@keyframes wave-clear-anim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-40px);
    }
}

/* ============================================================
   换弹按钮 - 武器切换栏右侧圆形按钮
   ============================================================ */
.hud-reload-btn {
    position: absolute;
    left: calc(50% + 108px);
    bottom: 52px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    z-index: 30;
    min-width: 44px;
    min-height: 44px;
    transition: transform 0.1s ease, background 0.1s ease;
}

.hud-reload-btn:active {
    transform: scale(0.88);
    background: rgba(255, 255, 255, 0.2);
}

/* 循环箭头图标 - 纯 CSS */
.reload-icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* 安全区域适配 */
@supports (padding: env(safe-area-inset-bottom)) {
    .hud-reload-btn {
        bottom: calc(52px + env(safe-area-inset-bottom));
    }
}

/* 小屏适配 */
@media (max-width: 700px) {
    .hud-reload-btn {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================
   换弹按钮 - 进度环 & 禁用状态
   ============================================================ */
.reload-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.reload-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.reload-ring-fg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 119.38;  /* 2 * PI * 19 */
    stroke-dashoffset: 119.38; /* 初始为空 */
    transition: stroke-dashoffset 0.05s linear;
}

/* 换弹中：禁用状态 */
.hud-reload-btn.reloading {
    opacity: 0.6;
    pointer-events: none;
}

.hud-reload-btn.reloading .reload-icon {
    opacity: 0.4;
}

.hud-reload-btn.reloading .reload-ring-fg {
    stroke: rgba(100, 200, 100, 0.9);
}