/* net/net.css —— 在线对战界面（大厅 / 记分板 / 击杀提示 / 名牌）
   复用游戏本体的设计变量（--ink / --bone / --signal / --line），保证视觉同源。 */

:root {
  --rb: #e04d2d;      /* 劫匪 */
  --rb-dim: rgba(224, 77, 45, .18);
  --pl: #3f86e0;      /* 警察 */
  --pl-dim: rgba(63, 134, 224, .18);
}

body.pvp .h-obj,
body.pvp .h-cmarks,
body.pvp .h-marks,
body.pvp .h-warn,
body.pvp .h-feed,
body.pvp .menu[data-screen="paused"] [data-act="restart"] { display: none !important; }

/* =====================================================  大厅  */
#netlobby {
  position: fixed; inset: 0; z-index: 60; display: none; color: var(--bone);
  font-family: var(--f-label); overflow: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 179, 71, .08), transparent 62%),
    linear-gradient(180deg, rgba(7, 9, 11, .95), rgba(7, 9, 11, .99));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: nlIn .28s ease both;
}
#netlobby.on { display: block; }
@keyframes nlIn { from { opacity: 0 } to { opacity: 1 } }

.nl-wrap {
  width: 100%; max-width: 1150px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 3.4vw, 46px) max(16px, var(--gl)) calc(18px + var(--sab)) max(16px, var(--gr));
}

.nl-head { display: flex; flex-direction: column; gap: 10px; }
.nl-eyebrow { display: flex; align-items: center; gap: 12px; font: 600 10px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }
.nl-eyebrow b { padding: 3px 6px 2px; background: var(--signal); color: var(--ink); letter-spacing: .12em; font-weight: 700; }
.nl-eyebrow .nl-dim { color: rgba(232, 228, 218, .35); letter-spacing: .1em; }
.nl-head h2 { margin: 0; font: 900 clamp(26px, 4.4vw, 52px)/1 var(--f-display); letter-spacing: .06em; }
.nl-head h2 em { font-style: normal; color: var(--signal); }
.nl-head p { margin: 0; max-width: 62ch; font: 400 13px/1.75 var(--f-label); color: var(--bone-dim); }
.nl-head p b { color: var(--bone); font-weight: 600; }

.nl-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(268px, .8fr); gap: clamp(12px, 1.8vw, 20px); align-items: start; }

/* --- 呼号（阵营上方） --- */
.nl-main { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px); min-width: 0; }
.nl-ident {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px clamp(14px, 1.9vw, 18px);
  background: rgba(20, 24, 27, .55); border: 1px solid var(--line); border-left: 3px solid var(--signal);
}
.nl-ident .nl-field { flex: 0 1 240px; flex-direction: row; align-items: center; gap: 10px; }
.nl-ident .nl-field span { flex: none; }
.nl-ident .nl-field input { flex: 1 1 auto; padding: 7px 9px 6px; }
.nl-ident-tip { margin: 0; flex: 1 1 180px; min-width: 120px; font: 400 10px/1.5 var(--f-label); color: rgba(232, 228, 218, .34); }

/* --- 阵营卡片 --- */
.nl-teams { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 16px); }
.nl-team {
  position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: clamp(14px, 1.9vw, 22px); cursor: pointer; color: inherit; font: inherit;
  background: rgba(20, 24, 27, .66); border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nl-team::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); opacity: .4; transition: opacity .18s ease; }
.nl-team:hover { background: rgba(28, 33, 37, .82); border-color: rgba(232, 228, 218, .38); transform: translateY(-1px); }
.nl-team[aria-pressed="true"] { background: rgba(28, 33, 37, .95); border-color: var(--tc); box-shadow: inset 0 0 40px -22px var(--tc), 0 0 0 1px var(--tc); }
.nl-team[aria-pressed="true"]::before { opacity: 1; }
.nl-team-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nl-team-top svg { width: 34px; height: 34px; color: var(--tc); opacity: .92; }
.nl-team-top .nl-tag { font: 600 9px/1 var(--f-mono); letter-spacing: .2em; color: rgba(232, 228, 218, .42); }
.nl-team h3 { margin: 6px 0 0; font: 700 clamp(20px, 2.4vw, 28px)/1.1 var(--f-display); letter-spacing: .1em; }
.nl-team h3 i { font-style: normal; display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .22em; color: var(--tc); margin-top: 6px; }
.nl-team p { margin: 0; font: 400 12px/1.6 var(--f-label); color: var(--bone-dim); min-height: 38px; }
.nl-count { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.nl-count b { font: 700 26px/1 var(--f-display); color: var(--tc); letter-spacing: .02em; }
.nl-count span { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; color: rgba(232, 228, 218, .4); }
.nl-team[aria-pressed="true"] .nl-count span { color: var(--bone-dim); }
.nl-check { position: absolute; right: 12px; bottom: 12px; font: 700 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--tc); opacity: 0; transition: opacity .18s ease; }
.nl-team[aria-pressed="true"] .nl-check { opacity: 1; }

/* --- 侧栏 --- */
.nl-side { display: flex; flex-direction: column; gap: 10px; padding: clamp(14px, 1.9vw, 20px); background: rgba(20, 24, 27, .55); border: 1px solid var(--line); }
.nl-side h4 { margin: 0 0 2px; font: 600 10px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.nl-field { display: flex; flex-direction: column; gap: 6px; }
.nl-field span { font: 600 10px/1 var(--f-mono); letter-spacing: .16em; color: rgba(232, 228, 218, .5); }
.nl-field input {
  width: 100%; padding: 9px 10px 8px; color: var(--bone); font: 500 13px/1.3 var(--f-label);
  background: rgba(7, 9, 11, .8); border: 1px solid var(--line); border-radius: 1px; outline: none;
  transition: border-color .16s ease;
}
.nl-field input:focus { border-color: var(--signal); }
.nl-field input::placeholder { color: rgba(232, 228, 218, .3); }

.nl-conn { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--bone-dim); }
.nl-conn i { width: 7px; height: 7px; border-radius: 50%; background: #6c757c; box-shadow: 0 0 0 3px rgba(108, 117, 124, .16); transition: background .2s, box-shadow .2s; }
.nl-conn[data-s="open"] i { background: #6ee08a; box-shadow: 0 0 0 3px rgba(110, 224, 138, .16); }
.nl-conn[data-s="connecting"] i { background: var(--signal); animation: nlBlink 1s infinite; }
.nl-conn[data-s="error"] i { background: var(--alarm); box-shadow: 0 0 0 3px rgba(255, 90, 64, .16); }
@keyframes nlBlink { 50% { opacity: .3 } }

.nl-room { margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(232, 228, 218, .12); font: 500 11px/1.5 var(--f-mono); color: var(--bone-dim); }
.nl-room .nl-row { display: flex; justify-content: space-between; gap: 8px; }
.nl-room .nl-row b { color: var(--bone); font-weight: 600; }
.nl-room .nl-row .rb { color: var(--rb); } .nl-room .nl-row .pl { color: var(--pl); }

.nl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.nl-foot .btn { text-transform: none; letter-spacing: .12em; }
.nl-foot .btn.primary { font-size: 16px; letter-spacing: .22em; min-height: 50px; padding: 2px 34px; }
.nl-foot .btn:disabled { opacity: .38; cursor: not-allowed; }
.nl-hint { flex: 1 1 200px; min-width: 150px; font: 400 11px/1.5 var(--f-label); color: rgba(232, 228, 218, .38); }

/* =====================================================  战场记分板  */
#netscore {
  position: fixed; z-index: 41; top: calc(78px + var(--sat)); left: 50%; transform: translate(-50%, 0);
  display: none; align-items: stretch; gap: 0; pointer-events: none;
  font-family: var(--f-mono); background: rgba(11, 13, 15, .58); border: 1px solid rgba(232, 228, 218, .16);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .9);
}
#netscore.on { display: flex; }
.nsc { display: flex; align-items: center; gap: 7px; padding: 6px 11px 5px; }
.nsc b { font: 600 10px/1 var(--f-label); letter-spacing: .14em; color: rgba(232, 228, 218, .62); }
.nsc i { font: 700 18px/1 var(--f-display); font-style: normal; min-width: 20px; text-align: center; }
.nsc.r i { color: var(--rb); } .nsc.p i { color: var(--pl); }
.nsc.mine { background: rgba(255, 179, 71, .1); }
#netscore .nsc-sep { width: 1px; background: rgba(232, 228, 218, .16); }
#netscore .nsc-time { display: flex; align-items: center; padding: 0 10px; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; color: rgba(232, 228, 218, .46); }
#netscore.ended .nsc-time { color: var(--signal); }

/* =====================================================  击杀提示  */
#netfeed { position: fixed; z-index: 41; right: max(16px, var(--gr)); top: 24%; width: min(360px, 46vw); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.nf { font: 500 12px/1.4 var(--f-label); letter-spacing: .1em; padding: 5px 9px 4px; background: rgba(11, 13, 15, .62); border-right: 2px solid rgba(232, 228, 218, .28); color: var(--bone-dim); animation: nfIn .22s ease both; transition: opacity .5s ease; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nf.fade { opacity: 0; }
.nf b { font-weight: 700; }
.nf .k-r { color: var(--rb); } .nf .k-p { color: var(--pl); }
.nf em { font-style: normal; color: var(--bone); margin: 0 6px; opacity: .5; }
.nf.mine { border-right-color: var(--signal); color: var(--bone); }
.nf.hs em::after { content: "HS"; font: 700 9px/1 var(--f-mono); color: var(--alarm); margin-left: 5px; letter-spacing: .1em; }
@keyframes nfIn { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: none } }

/* =====================================================  阵亡 / 结算  */
#netdead { position: fixed; inset: 0; z-index: 42; display: none; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(60% 50% at 50% 50%, rgba(40, 8, 4, .5), rgba(6, 8, 10, .35)); }
#netdead.on { display: flex; animation: nlIn .3s ease both; }
.nd-in { text-align: center; padding: 22px 30px 24px; background: rgba(11, 13, 15, .78); border-top: 1px solid rgba(255, 90, 64, .5); border-bottom: 1px solid rgba(232, 228, 218, .16); min-width: min(340px, 84vw); pointer-events: auto; }
.nd-k { font: 600 10px/1 var(--f-mono); letter-spacing: .3em; color: var(--alarm); text-transform: uppercase; }
.nd-in h3 { margin: 10px 0 4px; font: 700 clamp(22px, 3vw, 30px)/1.2 var(--f-display); letter-spacing: .06em; }
.nd-in h3 span { color: var(--signal); }
.nd-in p { margin: 8px 0 0; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--bone-dim); }
.nd-in p b { font-size: 18px; color: var(--bone); font-family: var(--f-display); }
.nd-tip { margin: 12px 0 0; font: 400 10px/1 var(--f-mono) !important; letter-spacing: .16em !important; color: rgba(232, 228, 218, .32) !important; }
.nd-tip b { display: none; }
.nd-acts { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.nd-acts button { font: 600 11px/1 var(--f-label); letter-spacing: .12em; padding: 8px 12px; color: var(--bone); background: rgba(232, 228, 218, .06); border: 1px solid var(--line); cursor: pointer; }
.nd-acts button:hover { border-color: var(--bone); }

/* =====================================================  名牌  */
#nettags { position: fixed; inset: 0; z-index: 39; pointer-events: none; overflow: hidden; }
.ntag { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; will-change: transform, opacity; }
.ntag .nt-n { font: 600 10px/1 var(--f-label); letter-spacing: .1em; padding: 3px 7px 2px; background: rgba(11, 13, 15, .55); border-left: 2px solid var(--tc); color: var(--bone); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.ntag .nt-h { width: 46px; height: 3px; background: rgba(11, 13, 15, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.ntag .nt-h i { display: block; height: 100%; width: 100%; background: var(--tc); transition: width .16s linear; }
.ntag.enemy .nt-h { display: none; opacity: .9; }
.ntag.dead { opacity: .25; }

/* 命中标记 */
#nethit { position: fixed; z-index: 43; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; opacity: 0; }
#nethit i { position: absolute; width: 2px; height: 8px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .6); }
#nethit i:nth-child(1) { left: 0; top: 0; } #nethit i:nth-child(2) { right: 0; top: 0; }
#nethit i:nth-child(3) { left: 0; bottom: 0; } #nethit i:nth-child(4) { right: 0; bottom: 0; }
#nethit.on { animation: nhit .26s ease-out; }
#nethit.hs i { background: var(--alarm); }
@keyframes nhit { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(.6) } 60% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1) } }

/* 胜负横幅 */
#netbanner { position: fixed; z-index: 44; left: 50%; top: 30%; transform: translate(-50%, -50%); display: none; text-align: center; pointer-events: none; }
#netbanner.on { display: block; animation: nlIn .4s ease both; }
#netbanner .nb-k { font: 600 10px/1 var(--f-mono); letter-spacing: .34em; color: var(--bone-dim); text-transform: uppercase; }
#netbanner .nb-t { margin-top: 10px; font: 900 clamp(30px, 6vw, 68px)/1 var(--f-display); letter-spacing: .12em; }
#netbanner .nb-t.rb { color: var(--rb); } #netbanner .nb-t.pl { color: var(--pl); }
#netbanner .nb-s { margin-top: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .18em; color: var(--bone-dim); }

/* 轻提示 */
#nettoast { position: fixed; z-index: 46; left: 50%; bottom: calc(16% + var(--sab)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.ntoast { font: 500 12px/1.4 var(--f-label); letter-spacing: .1em; padding: 7px 14px 6px; background: rgba(11, 13, 15, .82); border-left: 2px solid var(--signal); color: var(--bone); animation: nfIn .2s ease both; transition: opacity .4s ease; }
.ntoast.fade { opacity: 0; }

@media (max-width: 880px) {
  .nl-body { grid-template-columns: minmax(0, 1fr); }
  .nl-teams { gap: 8px; }
  .nl-team p { min-height: 0; display: none; }
  .nl-team h3 { font-size: 20px; }
  .nl-count b { font-size: 22px; }
  .nl-head p { font-size: 12px; }
  #netfeed { top: 20%; width: min(240px, 54vw); }
  #netscore { top: calc(70px + var(--sat)); }
  #netscore .nsc b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #netlobby, .nf, #netdead, #netbanner { animation: none; }
}