/* ================= 基础布局 ================= */
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif;user-select:none}
#gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

/* ================= HUD ================= */
#hud{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;color:#cfe6b0;text-shadow:0 0 3px #000,0 0 3px #000}

/* 准星 */
#cross{position:absolute;left:50%;top:50%;width:0;height:0}
#cross i{position:absolute;background:#5cff5c;box-shadow:0 0 2px #000}
#c5{width:4px;height:4px;left:-2px;top:-2px;border-radius:50%}

/* 顶部比分 / 计时 / 回合 */
#top{position:absolute;top:10px;left:50%;transform:translateX(-50%);text-align:center;font-size:20px;background:rgba(0,0,0,.45);padding:6px 18px;border-radius:6px}
#top b{color:#ffd54a}

/* 生化模式信息条 */
#bioHud{position:absolute;top:58px;left:50%;transform:translateX(-50%);min-width:280px;text-align:center;font-size:14px;line-height:1.45;background:rgba(12,20,18,.72);border:1px solid rgba(120,255,160,.45);padding:4px 12px;border-radius:5px;color:#d9ffe2}
#bioHud .mode{color:#74ffad;font-weight:bold;letter-spacing:1px}
#bioHud .role{color:#ffd54a;font-weight:bold;margin-left:8px}
#bioHud .status{display:block;color:#b7d8c0;font-size:12px}

/* 生命 / 弹药 */
#hp{position:absolute;left:20px;bottom:20px;font-size:34px;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:6px}
#ammo{position:absolute;right:20px;bottom:20px;font-size:34px;text-align:right;background:rgba(0,0,0,.45);padding:6px 14px;border-radius:6px}
#ammo small{display:block;font-size:14px;letter-spacing:1px;color:#9fc}

/* 提示 / 击杀提示 / 击杀信息流 */
#msg{position:absolute;top:22%;left:0;width:100%;text-align:center;font-size:36px;font-weight:bold;color:#ffd54a;opacity:0;transition:opacity .3s}
#killNotice{position:absolute;top:31%;left:0;width:100%;text-align:center;font-size:clamp(44px,7vw,78px);font-weight:800;color:rgba(255,222,92,.78);text-shadow:0 2px 7px rgba(0,0,0,.85);opacity:0;transform:scale(.92);transition:opacity .22s,transform .22s}
#killNotice.show{opacity:.78;transform:scale(1)}
#feed{position:absolute;right:16px;top:14px;text-align:right;font-size:14px}
#feed div{background:rgba(0,0,0,.5);padding:3px 8px;margin-bottom:3px;border-radius:3px}
#feed .w{color:#ffd54a}
#feed .ct{color:#8ab8ff}
#feed .t{color:#ffb84d}

/* 受伤红屏 */
#dmg{position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 0 0 120px 40px rgba(255,0,0,.85);opacity:0}

/* 雷达 */
#radar{position:absolute;left:16px;top:16px;width:170px;height:170px;pointer-events:none}

/* ================= 菜单 ================= */
#menu{position:absolute;inset:0;background:rgba(0,0,0,.82);color:#eee;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;box-sizing:border-box}
.menu-panel{width:min(560px,100%)}
#menu h1{color:#ffd54a;font-size:clamp(34px,7vw,52px);margin:0 0 8px;letter-spacing:2px}
#menu h2{font-size:22px;margin:0 0 18px;color:#fff}
#menu p{margin:6px;font-size:15px;color:#ccc;line-height:1.45}
.menu-view[hidden]{display:none}
.mode-summary{margin:18px auto 20px;padding:12px 0;border-top:1px solid #555;border-bottom:1px solid #555}
.mode-summary strong{display:block;color:#74ffad;font-size:19px;margin-bottom:3px}

/* 模式 / 地图选项 */
.mode-options{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #777;border-radius:6px;overflow:hidden;margin:0 0 18px}
.map-options{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mode-option{min-height:88px;border:0;border-right:1px solid #777;border-radius:0;background:#242424;color:#ddd;padding:12px;cursor:pointer;font:inherit}
.mode-option:last-child{border-right:0}
.mode-option strong,.mode-option span{display:block}
.mode-option strong{font-size:17px;margin-bottom:6px}
.mode-option span{font-size:13px;line-height:1.35;color:#aaa}
.mode-option.selected{background:#3a351e;color:#ffd54a;box-shadow:inset 0 -3px #ffd54a}
.mode-option.selected span{color:#eee}
.mode-option[hidden]{display:none}

/* 菜单按钮 */
.menu-actions{display:flex;flex-direction:column;gap:9px;width:min(320px,100%);margin:0 auto}
.menu-button{min-height:45px;border:1px solid #777;border-radius:5px;background:#242424;color:#eee;padding:10px 18px;cursor:pointer;font:600 16px Arial,Helvetica,sans-serif}
.menu-button:hover,.menu-button:focus-visible{border-color:#ffd54a;background:#34301f;outline:none}
.menu-button.primary{border-color:#ffd54a;background:#574a16;color:#fff}
.menu-button.danger{border-color:#a84b4b;color:#ffb5b5}
.menu-button kbd{float:right;background:#111;border:1px solid #666;border-radius:3px;padding:1px 5px;font:12px monospace;color:#ddd}

/* 操作说明 */
.controls{margin-top:18px!important;font-size:13px!important;color:#999!important}

@media (max-width:600px){
  .mode-options{grid-template-columns:1fr}
  .mode-option{border-right:0;border-bottom:1px solid #777}
  .mode-option:last-child{border-bottom:0}
}