/* path: public/game/fogline/css/style.css
 * description: fogline 游戏运行模块，同步源项目后在本仓库维护。 */
/* =========================================================
   孤兵 · FOGLINE — HUD / 界面
   暗色科幻 + 青色高光，视觉语言沿用「大肥鱼」的操作界面
   ========================================================= */
:root{
  --cyan:#5fe3d8;
  --cyan-dim:#3fa9a2;
  --gold:#ffd166;
  --amber:#ffa64d;
  --ink:#04101f;
  --danger:#ff6b7a;
  --text:#eaf6ff;
  --text-dim:#8fc4dd;
  --text-faint:#5f8ba4;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#stage{position:fixed;inset:0;overflow:hidden}
#game{display:block;width:100%;height:100%;cursor:none}
#stage.touch #game{cursor:default}
/* 暂停 / 结算时把画布压暗，避免半透明面板下面透出准星和残留粒子 */
#stage.frozen #game{opacity:.38;transition:opacity .35s ease}

/* ================= HUD ================= */
#hud{
  position:absolute;inset:0;pointer-events:none;
  padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .35s ease;
}
#hud.on{opacity:1}
#hud::before{
  content:'';position:absolute;left:0;right:0;top:0;height:170px;
  background:linear-gradient(180deg,rgba(2,10,20,.62),rgba(2,10,20,0));
  pointer-events:none;
}
.hud-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hud-label{font-size:10px;letter-spacing:3px;color:var(--text-dim);font-weight:700}

.wave-wrap{display:flex;flex-direction:column;gap:5px;min-width:168px}
.wave{
  font-size:40px;font-weight:900;line-height:.94;letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 6%,#9df6ec 46%,#3fb4c4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(95,227,216,.35));
}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0%;border-radius:99px;transition:width .18s ease-out}
.wave-bar{width:172px;max-width:calc(var(--vw,1vw) * 46)}
.wave-bar i{background:linear-gradient(90deg,#3fd0c9,#ffd166);box-shadow:0 0 12px rgba(255,209,102,.45)}

.hud-meta{margin-top:2px;font-size:11.5px;color:var(--text-dim);letter-spacing:.6px;font-variant-numeric:tabular-nums}
.hud-meta b{color:var(--text);font-weight:800;font-size:13px}
.hud-meta .sep{margin:0 6px;color:#3d5b6d}
.hud-best{font-size:10.5px;color:var(--text-faint);letter-spacing:1px;font-variant-numeric:tabular-nums}

.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.panel{
  width:196px;max-width:calc(var(--vw,1vw) * 54);
  padding:7px 10px 8px;border-radius:12px;
  background:linear-gradient(180deg,rgba(9,30,44,.72),rgba(4,14,24,.66));
  border:1px solid rgba(95,227,216,.16);
  box-shadow:0 6px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.hp-num,.ammo-num{font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:2px}
.hp-num b{font-size:19px;font-weight:900;line-height:1;color:#eaf6ff}
.hp-num i{font-style:normal;font-size:9.5px;color:var(--text-faint);letter-spacing:.4px}
.hp-bar{height:7px}
.hp-bar i{width:100%;background:linear-gradient(90deg,#3fd0c9,#8ff3ea);box-shadow:0 0 12px rgba(95,227,216,.45)}
.hp-bar.mid i{background:linear-gradient(90deg,#ffb347,#ffd166);box-shadow:0 0 12px rgba(255,209,102,.4)}
.hp-bar.low i{background:linear-gradient(90deg,#ff5c6c,#ff8a94);box-shadow:0 0 14px rgba(255,107,122,.6)}
#hp-panel.low{border-color:rgba(255,107,122,.42);animation:hpPulse 1.1s ease-in-out infinite}
@keyframes hpPulse{0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.35)}50%{box-shadow:0 6px 26px rgba(255,60,80,.28),inset 0 0 12px rgba(255,60,80,.12)}}

.ammo-num b{font-size:23px;font-weight:900;line-height:1;color:#eaf6ff;letter-spacing:.5px}
.ammo-num i{font-style:normal;font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
#ammo-panel.empty{border-color:rgba(255,107,122,.45)}
#ammo-panel.empty .ammo-num b{color:var(--danger);animation:blink .7s steps(2,end) infinite}
#ammo-panel.low .ammo-num b{color:var(--gold)}
@keyframes blink{50%{opacity:.35}}
.ammo-bar{height:5px}
.ammo-bar i{width:100%;background:linear-gradient(90deg,#ffd166,#ffa64d);box-shadow:0 0 10px rgba(255,166,77,.4)}
.reload-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;min-height:11px}
.ammo-res{font-size:9.5px;letter-spacing:1px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.ammo-res b{font-size:11px;font-weight:800;color:var(--gold);margin-left:2px}
.ammo-tip{font-size:9.5px;letter-spacing:1.2px;color:var(--text-faint)}
.ammo-tip.on{color:var(--gold)}
.reload-bar{display:block;margin-top:4px;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .15s}
.reload-bar.on{opacity:1}
.reload-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#5fe3d8,#ffd166);border-radius:99px}

/* 攻/防强化显示 */
.pill-row{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}
#buff-pill{gap:5px;color:rgba(143,196,221,.82)}
#buff-pill .buff-sep{opacity:.34}
#buff-pill .buff-atk b{color:#ff9b74}
#buff-pill .buff-def b{color:#8fb9ff}
#buff-pill::before{background:rgba(143,196,221,.55);box-shadow:0 0 6px rgba(143,196,221,.4)}
#buff-pill.up{border-color:rgba(255,155,116,.34)}
#buff-pill.up::before{background:#ff9b74;box-shadow:0 0 8px rgba(255,155,116,.6)}
#buff-pill.max{border-color:rgba(255,209,102,.44)}
#buff-pill.max .buff-atk b,#buff-pill.max .buff-def b{color:var(--gold)}

.pill{
  display:flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;
  font-size:10px;letter-spacing:1.4px;color:#9fd8c8;
  border:1px solid rgba(95,227,216,.26);background:rgba(6,26,40,.6);
  backdrop-filter:blur(6px);
}
.pill b{font-weight:800;color:var(--cyan)}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.pill.cool{color:#ffc2a0;border-color:rgba(255,166,77,.32)}

/* 右上角库存栏 */
.inv-bar{
  display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:flex-start;
  flex-wrap:wrap;gap:5px;max-width:calc(var(--vw,1vw) * 54);
  margin-top:2px;pointer-events:auto;
}
.inv-item{
  position:relative;width:32px;height:32px;border-radius:8px;
  background:linear-gradient(180deg,rgba(9,30,44,.72),rgba(4,14,24,.66));
  border:1px solid rgba(95,227,216,.18);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;cursor:pointer;
  transition:transform .1s,border-color .1s;
}
.inv-item:active{transform:scale(.92)}
.inv-item.on{border-color:var(--cyan);box-shadow:0 0 10px rgba(95,227,216,.35)}
.inv-item.gun::before{content:'';position:absolute;inset:3px;border-radius:5px;background:linear-gradient(135deg,#5fe3d8,#3fb4c4);opacity:.22}
.inv-item.mod::before{content:'';position:absolute;inset:3px;border-radius:5px;background:linear-gradient(135deg,#ffd166,#ffa64d);opacity:.22}
.inv-item .inv-count{
  position:absolute;right:-4px;top:-4px;min-width:14px;height:14px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.inv-item .inv-tip{
  position:absolute;right:0;top:36px;white-space:nowrap;
  background:rgba(4,14,24,.9);border:1px solid rgba(95,227,216,.2);
  border-radius:6px;padding:4px 8px;font-size:10px;color:#d9f4ff;
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:5;
}
.inv-item:hover .inv-tip{opacity:1;visibility:visible}
#stage.short-view .inv-item{width:26px;height:26px;border-radius:6px;font-size:9px}
#stage.short-view .inv-item .inv-tip{top:30px;font-size:9px}
.pill.cool b{color:var(--amber)}
.pill.cool::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}

.hud-bottom{display:flex;align-items:flex-end;justify-content:center;gap:16px}
.key-hint{
  font-size:10.5px;letter-spacing:1.4px;color:rgba(143,196,221,.62);
  padding:6px 14px;border-radius:99px;background:rgba(3,12,22,.42);
  border:1px solid rgba(255,255,255,.05);
  opacity:1;transition:opacity .6s ease;
}
.key-hint.fade{opacity:0}
#stage.touch .key-hint{display:none}

/* ================= 横幅 / 闪光 ================= */
#banner{
  position:absolute;left:50%;top:max(96px,14vh);transform:translate(-50%,-12px);
  font-size:13px;letter-spacing:4px;font-weight:800;white-space:nowrap;
  padding:8px 22px;border-radius:99px;
  color:#d5f2ff;background:rgba(6,26,40,.68);
  border:1px solid rgba(120,210,230,.26);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;z-index:6;
  transition:opacity .3s ease,transform .3s ease;
}
#banner.on{opacity:1;transform:translate(-50%,0)}
#banner.hot{color:#ffd7d7;border-color:rgba(255,107,122,.5);background:rgba(48,10,16,.72);letter-spacing:5px}
#banner.gold{color:#ffe6a8;border-color:rgba(255,209,102,.48);background:rgba(46,33,6,.72)}

#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 42%,rgba(2,6,12,.55) 100%);
  opacity:.9;
}
#flash{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,30,50,0) 35%,rgba(255,30,50,.55) 100%);
  opacity:0;transition:opacity .22s ease-out;
}
#flash.on{opacity:1;transition:none}

/* ================= 覆盖层 ================= */
.screen{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;
  background:radial-gradient(ellipse at 50% 42%,rgba(10,52,80,.62),rgba(2,8,16,.965) 70%);
  backdrop-filter:blur(3px);
  transition:opacity .32s ease,visibility .32s;
  overflow-y:auto;overflow-x:hidden;
}
/* visibility 跟随淡出动画延迟切换，避免一下黑掉；但 pointer-events 必须立刻失效。
   .btn / .link-btn 显式写了 auto，会盖掉继承来的 none，所以这里要连子元素一起关掉，
   否则隐藏后的面板在淡出的 .32s 里还会继续吃掉下面按钮的点击。 */
.screen.hide,.screen.hide *{pointer-events:none!important}
.screen.hide{opacity:0;visibility:hidden}
.screen > :first-child{margin-top:auto}
.screen > :last-child{margin-bottom:auto}
#over,#pause,#help{display:flex}

.title{
  font-size:clamp(52px,min(calc(var(--vw,1vw) * 12),calc(var(--vh,1vh) * 16)),104px);
  font-weight:900;letter-spacing:10px;line-height:1;text-indent:10px;
  background:linear-gradient(180deg,#ffffff 8%,#8ff3ea 42%,#2aa7c8 78%,#12678f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(95,227,216,.42));
  animation:float 4.6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.subtitle{margin-top:14px;font-size:12px;letter-spacing:11px;color:#7fb4cf;font-weight:600;text-indent:11px}

.rules{margin-top:30px;display:grid;gap:10px;max-width:452px;width:100%}
.rule{
  display:flex;align-items:center;gap:12px;font-size:13px;color:#bcd9e8;line-height:1.5;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:11px 14px;text-align:left;
}
.rule b{color:var(--cyan);font-weight:700}
.dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.dot.gold{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.dot.red{background:var(--danger);box-shadow:0 0 12px var(--danger)}

.btn{
  margin-top:32px;pointer-events:auto;cursor:pointer;
  padding:15px 54px;border:0;border-radius:99px;
  font-size:16px;font-weight:800;letter-spacing:5px;text-indent:5px;font-family:inherit;
  color:#04222c;background:linear-gradient(180deg,#9df6ec,#3fc9c0);
  box-shadow:0 10px 30px rgba(63,201,192,.36),inset 0 -2px 0 rgba(0,0,0,.16);
  transition:transform .14s ease,box-shadow .14s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(63,201,192,.5),inset 0 -2px 0 rgba(0,0,0,.16)}
.btn:active{transform:translateY(1px) scale(.985)}
/* 无限模式入口：只在通关 20 波时出现，金色 = "继续往死里打" */
.btn-endless{
  display:none;
  margin-top:14px;
  padding:13px 46px;font-size:14px;letter-spacing:4px;
  color:#2a1a03;background:linear-gradient(180deg,#ffe6a8,#f0a93c);
  box-shadow:0 10px 28px rgba(240,169,60,.34),inset 0 -2px 0 rgba(0,0,0,.16);
}
.btn-endless.on{display:block}
.btn-endless:hover{box-shadow:0 14px 34px rgba(240,169,60,.48),inset 0 -2px 0 rgba(0,0,0,.16)}
/* HUD 上的难度指数：只在无限模式里亮出来 */
.hud-threat{
  margin-top:4px;font-size:10px;letter-spacing:2px;color:#8a5a1e;
  display:none;
}
.hud-threat.on{display:block;color:var(--gold)}
.hud-threat b{font-weight:800;font-variant-numeric:tabular-nums}
.hint{margin-top:18px;font-size:11px;color:#5f8ba4;letter-spacing:1.4px}

.over-title{
  font-size:clamp(30px,calc(var(--vw,1vw) * 7),50px);font-weight:900;letter-spacing:6px;
  color:var(--gold);text-shadow:0 0 30px rgba(255,209,102,.4);
}
.over-reason{margin-top:12px;font-size:12.5px;color:#8fc4dd;letter-spacing:2px}
.stats{margin-top:30px;display:flex;gap:48px}
.stat{display:flex;flex-direction:column;gap:7px;min-width:74px;align-items:center}
.stat-v{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.stat-k{font-size:10.5px;letter-spacing:2px;color:#6d9ab3}
.newbest{margin-top:16px;font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:700;opacity:0;transition:opacity .3s}
.newbest.on{opacity:1}
.over-links{display:flex;align-items:center;justify-content:center;margin-top:10px;gap:4px}
.link-btn{
  background:none;border:0;padding:6px 10px;font-family:inherit;
  font-size:11.5px;letter-spacing:1.5px;color:#7fb4cf;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;pointer-events:auto;
}
.link-btn:active,.link-btn:hover{color:var(--cyan)}
.over-links .sep{color:#3d5b6d;font-size:11px}

.help-title{font-size:24px;font-weight:900;letter-spacing:6px;color:#d9f4ff}
.help-grid{margin-top:24px;display:grid;gap:9px;max-width:440px;width:100%}
.help-grid > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);text-align:left;
}
.help-grid b{font-size:12px;color:var(--cyan);letter-spacing:.5px;white-space:nowrap}
.help-grid span{font-size:11.5px;color:#a9c9da;letter-spacing:.4px}

/* ================= 矮视口 / 横屏手机 ================= */
#stage.short-view #hud{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#stage.short-view .wave{font-size:28px}
#stage.short-view .wave-bar{width:132px;height:5px}
#stage.short-view .hud-meta{font-size:10px}
#stage.short-view .hud-meta b{font-size:11px}
#stage.short-view .hud-best{font-size:9.5px}
#stage.short-view .hud-label{font-size:8.5px;letter-spacing:2px}
#stage.short-view .panel{width:154px;padding:5px 8px 6px;border-radius:10px}
#stage.short-view .hp-num b{font-size:15px}
#stage.short-view .ammo-num b{font-size:18px}
#stage.short-view .reload-row{margin-top:3px;min-height:9px}
#stage.short-view .ammo-tip{font-size:8.5px}
#stage.short-view .ammo-res{font-size:8.5px}
#stage.short-view .ammo-res b{font-size:10px}
#stage.short-view .reload-bar{margin-top:3px;height:2px}
#stage.short-view .pill{font-size:8.5px;padding:3px 8px}
#stage.short-view .hud-right{gap:5px}
#stage.short-view #banner{top:8px;font-size:11px;padding:5px 14px;letter-spacing:2px}

#stage.short-view .screen{padding:12px 20px}
#stage.short-view .title{font-size:clamp(34px,calc(var(--vh,1vh) * 12),62px);letter-spacing:5px;animation:none}
#stage.short-view .subtitle{margin-top:4px;font-size:9px;letter-spacing:8px}
#stage.short-view .rules{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:820px}
#stage.short-view .rule{font-size:11px;padding:7px 11px;line-height:1.35;flex:0 1 auto;border-radius:9px}
#stage.short-view .dot{width:7px;height:7px}
#stage.short-view .btn{margin-top:14px;padding:10px 40px;font-size:14px;letter-spacing:3px}
#stage.short-view .hint{margin-top:8px;font-size:9.5px}
#stage.short-view .over-title{font-size:clamp(22px,calc(var(--vh,1vh) * 7),36px);letter-spacing:3px}
#stage.short-view .over-reason{margin-top:5px;font-size:10.5px;letter-spacing:1px}
#stage.short-view .stats{margin-top:12px;gap:26px}
#stage.short-view .stat-v{font-size:23px}
#stage.short-view .stat-k{font-size:9px}
#stage.short-view .newbest{margin-top:6px;font-size:10px}
#stage.short-view .help-title{font-size:18px}
#stage.short-view .help-grid{margin-top:12px;grid-template-columns:1fr 1fr;gap:6px;max-width:600px}
#stage.short-view .help-grid > div{padding:6px 10px}
#stage.short-view .help-grid b{font-size:10px}
#stage.short-view .help-grid span{font-size:10px}

#stage.narrow-view .title{letter-spacing:7px}
#stage.narrow-view .rules{margin-top:22px}
#stage.narrow-view .rule{font-size:12px;padding:9px 12px}
#stage.narrow-view .stats{gap:28px}
#stage.narrow-view .stat-v{font-size:26px}

@media (prefers-reduced-motion:reduce){
  .title{animation:none}
  #hp-panel.low{animation:none}
}

/* ---------------- 排行榜面板 ----------------
   交互参照主站 /game/fish 的排行榜：TOP 10 列表 + 昵称提交表单。
   面板是覆盖层，打开时不该继续操控角色，所以单独用 .board-screen 挡住。

   z-index 必须**高于 .screen（10）**：排行榜是从别的覆盖层里点开的
   （结算屏的"提交成绩"、标题屏的"排行榜"），层级比它低就会被结算屏
   压住 —— 结算屏还带 backdrop-filter:blur，于是表单糊成一片噪点，
   只看得见"阵亡"两个字。这里给 30，让它稳稳压在一切覆盖层之上。 */
.board-screen{
  background:rgba(2,10,20,.76);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto;
  z-index:30;
}
.board-box{
  width:min(460px,calc(var(--vw,1vw) * 94));
  max-height:min(calc(var(--vh,1vh) * 88),640px);
  display:flex;flex-direction:column;
  padding:15px 15px 11px;border-radius:18px;
  background:linear-gradient(180deg,rgba(12,44,64,.97),rgba(5,18,30,.98));
  border:1px solid rgba(95,227,216,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 24px rgba(95,227,216,.08);
}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.board-title{font-size:15px;font-weight:800;letter-spacing:3px;color:var(--text);text-shadow:0 0 20px rgba(95,227,216,.35)}
.board-close{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:99px;
  padding:5px 12px;font:inherit;color:#9dc4d8;font-size:11px;letter-spacing:1px;cursor:pointer;pointer-events:auto;
}
.board-close:hover{color:var(--cyan);background:rgba(255,255,255,.06)}
.board-sub{
  margin-top:4px;font-size:10.5px;letter-spacing:1px;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
/* 四项统计与后台采用相同口径；未取到数据时显示占位，不伪装成零。 */
.board-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px;flex:none}
.board-stats>div{padding:8px 2px;border-radius:10px;background:rgba(255,255,255,.035);text-align:center}
.board-stats b{display:block;color:var(--cyan);font-size:16px;font-variant-numeric:tabular-nums}
.board-stats span{display:block;margin-top:3px;color:var(--text-faint);font-size:10px;letter-spacing:.3px}
/* 榜单条目：前三名用金/银/铜色区分 */
.board-list{
  list-style:none;margin:9px 0 0;padding:0;
  overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;
}
.board-list li{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;
  padding:6px 8px;margin-top:3px;border-radius:10px;background:rgba(255,255,255,.035);
  font-size:12.5px;
}
.board-list li.me{background:rgba(95,227,216,.13);box-shadow:inset 0 0 0 1px rgba(95,227,216,.38)}
.board-rank{
  width:20px;flex:none;text-align:center;font-weight:800;font-size:11px;
  color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.board-list li:nth-child(1) .board-rank{color:var(--gold)}
.board-list li:nth-child(2) .board-rank{color:#cfd8e3}
.board-list li:nth-child(3) .board-rank{color:#d99a5b}
.board-name{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text);font-size:13.5px;font-weight:700;
}
.board-player{min-width:0}
.board-pscore{font-size:14.5px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums}
.board-pmeta{display:block;margin-top:1px;font-size:9.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .board-empty{
  display:flex;justify-content:center;align-items:center;min-height:90px;padding:12px 8px;text-align:center;font-size:11.5px;line-height:1.8;background:none;
  color:var(--text-faint);letter-spacing:1px;
}
/* 提交表单 */
.board-form{display:none;margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}
.board-form.on{display:block}
.board-score{font-size:11px;letter-spacing:1px;color:var(--text-dim)}
.board-score b{color:var(--gold);font-size:14px;font-variant-numeric:tabular-nums}
.board-input-row{display:flex;gap:7px;margin-top:8px}
.board-input{
  flex:1;min-width:0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:9px 11px;font-size:16px;color:var(--text);font-family:inherit;
  outline:none;transition:border-color .15s ease,background .15s ease;
}
.board-input::placeholder{color:#4e7186}
.board-input:focus{border-color:rgba(95,227,216,.5);background:rgba(255,255,255,.09)}
.board-submit{
  flex:none;padding:9px 18px;font-size:12.5px;letter-spacing:2px;border-radius:10px;
}
.board-submit:disabled{opacity:.5;cursor:default}
.board-msg{margin-top:7px;font-size:10.5px;letter-spacing:.8px;color:var(--text-faint);min-height:13px}
.board-msg.ok{color:var(--cyan)}
.board-msg.bad{color:var(--danger)}

#stage.short-view .board-box{padding:12px 13px 11px}
#stage.short-view .board-title{font-size:13px;letter-spacing:2px}
#stage.short-view .board-list li{padding:5px 2px;font-size:11.5px}
#stage.short-view .board-stats{margin-top:6px}
#stage.short-view .board-stats>div{padding:4px 2px}
#stage.short-view .board-list .board-empty{min-height:46px}

/* ---------------- 武器切换栏 ----------------
   常驻屏幕上方正中。点一下向上翻出全部枪械，再点收起。
   也可以用数字键 1/2/3 直接换 —— 两个入口都留着，
   因为战斗中伸手点屏幕容易打偏，键盘更稳；触屏端则只能点。

   "上翻"的实现：列表用 transform-origin: bottom center + scaleY，
   从按钮底边往上长出来。用 height 动画会触发布局重排，scaleY 只走合成层。
   列表向上展开会盖住顶部 HUD，这是有意的 —— 展开是个临时动作，
   盖上几百毫秒比缩在角落里看不清要好。 */
.gunbar{
  position:absolute;
  left:50%;top:86px;
  transform:translateX(-50%);
  z-index:5;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;           /* 只有按钮和卡片自己接收点击 */
}
.gunbar-cur{
  pointer-events:auto;
  display:flex;align-items:center;gap:8px;
  padding:5px 10px 5px 6px;
  border-radius:11px;
  background:rgba(8,17,25,.80);
  border:1px solid rgba(95,227,216,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.42);
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.gunbar-cur:hover,
.gunbar.open .gunbar-cur{
  border-color:rgba(95,227,216,.55);
  background:rgba(12,26,36,.92);
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 18px rgba(95,227,216,.12);
}
.gunbar-ico{
  width:34px;height:34px;flex:none;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.gunbar-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.gunbar-name{font-size:12.5px;font-weight:800;letter-spacing:1.4px;color:var(--text)}
.gunbar-mag{
  font-size:10px;font-style:normal;letter-spacing:1px;
  color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.gunbar-mag.low{color:var(--danger)}
.gunbar-key{
  flex:none;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:9.5px;font-weight:800;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
/* 展开箭头：收起时朝下，展开时朝上 */
.gunbar-caret{
  width:0;height:0;flex:none;margin-left:1px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-bottom:5px solid rgba(95,227,216,.72);
  transition:transform .18s ease;
}
.gunbar.open .gunbar-caret{transform:rotate(180deg)}

/* 向上翻出的列表 */
.gunbar-list{
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%) scaleY(.72) translateY(10px);
  transform-origin:bottom center;
  opacity:0;
  pointer-events:none;
  display:flex;flex-direction:column;gap:5px;
  transition:opacity .17s ease,transform .19s cubic-bezier(.2,1.1,.4,1);
}
.gunbar.open .gunbar-list{
  transform:translateX(-50%) scaleY(1) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.gunbar-item{
  display:flex;align-items:center;gap:8px;
  width:192px;
  padding:6px 9px 6px 6px;
  border-radius:10px;
  background:rgba(8,17,25,.94);
  border:1px solid rgba(255,255,255,.09);
  color:var(--text);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .13s ease,background .13s ease,transform .13s ease;
}
.gunbar-item:hover{background:rgba(16,32,44,.98);border-color:rgba(95,227,216,.4)}
.gunbar-item:active{transform:scale(.985)}
/* 当前装备的那把：左侧一道青边 + 微微发光 */
.gunbar-item.on{
  border-color:rgba(95,227,216,.62);
  background:rgba(14,38,46,.96);
  box-shadow:inset 3px 0 0 var(--cyan),0 0 14px rgba(95,227,216,.10);
}
.gunbar-item.locked{opacity:.36;cursor:default;filter:grayscale(.7)}
.gunbar-item .gunbar-ico{width:30px;height:30px}
.gunbar-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.gunbar-info b{font-size:11.5px;font-weight:800;letter-spacing:1.1px;white-space:nowrap}
.gunbar-info i{
  font-size:9px;font-style:normal;letter-spacing:.6px;
  color:var(--text-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.gunbar-item.on .gunbar-info i{color:rgba(95,227,216,.78)}
.gunbar-item .gunbar-key{background:rgba(95,227,216,.14);border-color:rgba(95,227,216,.3);color:var(--cyan)}
.gunbar-item.locked .gunbar-key{background:rgba(255,255,255,.05);color:var(--text-faint)}

/* 短屏（横屏手机 / 小窗）整体收一档 */
#stage.short-view .gunbar{top:72px}
#stage.short-view .gunbar-cur{padding:3px 8px 3px 5px;gap:6px}
#stage.short-view .gunbar-ico{width:28px;height:28px}
#stage.short-view .gunbar-name{font-size:11px}
#stage.short-view .gunbar-item{width:168px;padding:4px 8px 4px 5px}
#stage.short-view .gunbar-item .gunbar-ico{width:26px;height:26px}

/* ---------------- 波间三选一强化 ----------------
   全屏遮罩 + 三张卡片。用 flex 居中，卡片等宽，竖屏时改为纵向排列。 */
.upg-screen{padding:24px}
.upg-box{
  width:min(880px,100%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.upg-head{text-align:center}
.upg-title{
  font-size:26px;font-weight:800;letter-spacing:.5px;
  color:var(--gold);text-shadow:0 0 18px rgba(255,209,102,.35);
}
.upg-sub{margin-top:6px;font-size:13px;color:var(--text-faint)}

.upg-cards{
  display:flex;gap:14px;width:100%;
  justify-content:center;align-items:stretch;
}
.upg-card{
  flex:1 1 0;min-width:0;max-width:270px;
  display:flex;flex-direction:column;gap:8px;
  padding:16px 14px;
  background:linear-gradient(180deg,rgba(20,44,60,.96),rgba(8,20,32,.96));
  border:1px solid rgba(95,227,216,.28);
  border-radius:12px;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.upg-card:hover,.upg-card.kb{
  transform:translateY(-4px);
  border-color:var(--cyan);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(95,227,216,.45) inset;
}
.upg-card:active{transform:translateY(-1px)}
.upg-ico{font-size:30px;line-height:1}
.upg-name{
  font-size:16px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:6px;
}
.upg-lv{
  font-size:11px;font-weight:700;color:var(--cyan);
  background:rgba(95,227,216,.14);
  border:1px solid rgba(95,227,216,.3);
  border-radius:999px;padding:1px 7px;
}
.upg-desc{font-size:13px;line-height:1.5;color:var(--text-dim);flex:1}
.upg-key{
  align-self:flex-start;font-size:11px;font-weight:700;
  color:var(--text-faint);
  border:1px solid rgba(143,196,221,.3);
  border-radius:5px;padding:0 6px;
}
.upg-hint{font-size:12px;color:var(--text-faint)}
.upg-hint b{color:var(--cyan)}

/* 竖屏 / 矮屏：卡片改成纵向，避免挤成三条细柱 */
#stage.portrait .upg-cards,
#stage.short-view .upg-cards{flex-direction:column;align-items:center}
#stage.portrait .upg-card,
#stage.short-view .upg-card{width:100%;max-width:340px;flex-direction:row;align-items:center;gap:12px}
#stage.portrait .upg-card .upg-desc,
#stage.short-view .upg-card .upg-desc{flex:1}
#stage.short-view .upg-title{font-size:20px}