/* =========================================================
   zh@小社区 — 靶场共享样式
   =========================================================
   为什么单独一个文件：
     靶场现在有两个宿主 —— 独立的 /arena 页，和 games.html 里内嵌的第 4 个小游戏。
     玩法逻辑在 arena-engine.mjs 里共享，视觉也必须共享，否则两边会慢慢长歪。

   这里只放「靶场组件」：模式分段控件、武器卡、画布、HUD、结算层、排行榜。
   页面级布局（.arena-grid / .page-arena 那套）留在各自页面的 <style> 里。
   ========================================================= */

/* ---- 分段控件（模式选择）---- */
.seg { display: flex; gap: 8px; background: rgb(var(--prgb) / .07); padding: 5px; border-radius: 14px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 14px; border-radius: 10px; color: var(--txt-soft); transition: all .15s ease;
}
.seg button:hover { background: rgb(var(--srgb) / .7); }
.seg button.on { background: rgb(var(--srgb)); color: var(--primary); box-shadow: var(--shadow-sm); }

/* ---- 武器卡 ---- */
.weapons-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.wcard {
  border: 1px solid var(--surface-border); background: rgb(var(--srgb) / .7); border-radius: 16px;
  padding: 14px; cursor: pointer; text-align: left; font: inherit; transition: all .15s ease;
}
.wcard:hover { background: rgb(var(--srgb)); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wcard.on { border-color: transparent; background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgb(var(--prgb) / .22); }
.wcard .wn { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.wcard .wlab { font-size: 12px; opacity: .85; margin-top: 4px; }
.wcard .wscore { font-size: 12px; margin-top: 8px; opacity: .75; }

/* ---- 画布 ---- */
.range-wrap { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--surface-border); background: var(--surface-deep); }
#range { display: block; width: 100%; height: 460px; cursor: none; touch-action: manipulation; }

.hud {
  position: absolute; left: 0; right: 0; top: 0; padding: 14px 18px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.85); pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.75), rgba(15,23,42,0));
}
.hud b { font-family: ui-monospace, Consolas, monospace; font-size: 17px; color: #fff; }
.hud .combo { color: #fbbf24; font-weight: 800; }
.hud button { pointer-events: auto; }

/* ---- 覆盖层（开始 / 结算）---- */
.range-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: rgba(15,23,42,.72); color: #fff;
}
.range-overlay h3 { font-family: var(--font-display); font-size: 26px; }
.range-overlay p { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.9; max-width: 30rem; }
.range-overlay .btn { background: rgb(var(--srgb)); color: var(--primary); box-shadow: none; }
.range-overlay .btn.ghost { background: rgb(var(--srgb) / .14); color: #fff; }

.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; width: 100%; max-width: 26rem; }
.result-grid div { background: rgb(var(--srgb) / .1); border-radius: 12px; padding: 10px; }
.result-grid .k { font-size: 11px; color: rgba(255,255,255,.6); }
.result-grid .v { font-size: 19px; font-weight: 800; font-family: ui-monospace, Consolas, monospace; }
.pb-tag { background: #fbbf24; color: #422006; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }

/* ---- 排行榜 ---- */
.board-list { display: flex; flex-direction: column; gap: 10px; }
.brow {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--surface-border); border-radius: 14px; background: rgb(var(--srgb) / .62);
}
.brow.me { background: rgb(var(--prgb) / .1); border-color: transparent; }
.brow .rk { width: 26px; text-align: center; font-weight: 800; color: var(--txt-mute); font-family: ui-monospace, monospace; }
.brow .rk.top { color: var(--primary); }
.brow .av {
  width: 32px; height: 32px; border-radius: 10px; flex: none; object-fit: cover;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.brow .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--txt-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .sc { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--primary); }
.brow .ac { font-size: 11px; color: var(--txt-mute); width: 46px; text-align: right; }

.mybest {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(238,242,255,.95), rgba(250,245,255,.9));
  border: 1px solid var(--surface-border); margin-bottom: 18px;
}
.mybest .num { font-family: ui-monospace, Consolas, monospace; font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.mybest .lab { font-size: 12px; color: var(--txt-mute); }

/* ---- 小字说明 ---- */
.tips { font-size: 13px; line-height: 2; color: var(--txt-mute); }
.tips b { color: var(--txt); }
.tips a { color: var(--primary); font-weight: 700; }

@media (max-width: 640px) {
  #range { height: 360px; }
  .weapons-row { gap: 8px; }
  .wcard { padding: 12px 8px; }
  .mybest { padding: 14px 16px; gap: 12px; }
  .mybest .num { font-size: 24px; }
}

/* 深色模式：.mybest 的浅色渐变要在暗底上压下去 */
html.dark .mybest { background: linear-gradient(120deg, rgb(var(--prgb) / .12), rgb(var(--srgb) / .7)); }