/* v1.11 VERSUS: lobby pane, guard commander HUD, SEAL-side timer, scoreboard (js/versus-ui.js). */
:root { --vs-red: #E0533D; --vs-red-dim: #8E3A2C; --vs-blue: #8EC0FF; }

/* ---------- lobby ---------- */
.coop-card .modal-tabs .vs-tab { color: var(--vs-red); }
.coop-card .modal-tabs .vs-tab.active { color: #FF7A5C; box-shadow: inset 0 -2px 0 var(--vs-red); }
#coop-vs-pane { display: flex; flex-direction: column; gap: 14px; }
#coop-vs-pane.hidden { display: none; }
#coop-vs-pane .note b { color: #F3F6F2; font-weight: 600; }
#vs-mission { height: 44px; width: 100%; padding: 0 10px; background: #0B110D; border: 1px solid var(--line2); color: #F3F6F2; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
#vs-mission:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.vs-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-role { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 96px; padding: 14px 14px 12px; text-align: left; background: #0B110D; border: 1px solid var(--line2); color: #E6EBE4; cursor: pointer; overflow: hidden; }
.vs-role::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc); }
.vs-role::after { content: ''; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--rc); opacity: 0.25; }
.vs-role.seal { --rc: var(--green); } .vs-role.guard { --rc: var(--vs-red); }
.vs-role b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: var(--rc); line-height: 1; }
.vs-role span { font-family: var(--body); font-size: 12px; line-height: 1.4; color: #B4C0B6; }
.vs-role:hover:not(:disabled) { background: #12201A; border-color: var(--rc); }
.vs-role:disabled { opacity: 0.4; cursor: default; }
.vs-role.picked:disabled { opacity: 1; border-color: var(--rc); background: #12201A; }
#coop-vs-pane .coop-code { color: #FF7A5C; }
.vs-small { font-size: 11px !important; color: var(--muted) !important; }
#vs-msg:empty { display: none; }
#btn-versus { color: #FF7A5C; } #btn-versus small { color: var(--muted); }
.btn.vs-war { color: #FF7A5C; border-color: var(--vs-red-dim); }
.qm-vs-note { display: none; }
#coop-quick-pane.qm-vs .qm-vs-note { display: block; color: #FF9A80; }
#coop-quick-pane.qm-vs .qm-note { display: none; }

/* ---------- in mission: both sides ---------- */
body.vs-on #coop-ping, body.vs-on #coop-pings, body.vs-on #coop-comms, body.vs-on #qc-grid { display: none !important; }
#vs-seal-chip { padding: 6px 10px; background: rgba(7, 10, 8, 0.92); border: 1px solid var(--vs-red-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: #B4C0B6; white-space: nowrap; }
#vs-seal-chip.hidden { display: none; }
#vs-seal-chip b { color: #FF7A5C; font-weight: 500; }
#vs-seal-clock, #vs-clock { font-style: normal; color: #F3F6F2; font-variant-numeric: tabular-nums; }
#vs-seal-clock.low, #vs-clock.low { color: var(--vs-red); animation: vs-blink 1s steps(2) infinite; }
@keyframes vs-blink { 50% { opacity: 0.45; } }

/* ---------- in mission: guard commander ---------- */
body.vs-cmd #roster, body.vs-cmd #inspector-body, body.vs-cmd #cmdbar, body.vs-cmd #guide, body.vs-cmd #mb-roster, body.vs-cmd #tb-pov, body.vs-cmd #pov, body.vs-cmd #ctx { display: none !important; }
body.vs-cmd #game { cursor: crosshair; }
#vs-cmd.hidden { display: none; }
#vs-panel { position: absolute; top: 58px; left: 10px; width: 260px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--vs-red); z-index: 3; }
.vs-p-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.vs-p-head b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; color: #FF7A5C; }
.vs-p-head em { font-size: 15px; }
#vs-feed { display: flex; flex-direction: column; gap: 4px; }
.vs-f { font-family: var(--body); font-size: 12px; line-height: 1.35; color: #B4C0B6; }
.vs-f span { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-right: 6px; }
.vs-f.vk-bad { color: #FF9A80; } .vs-f.vk-cmd { color: #E6EBE4; }
.vs-p-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; line-height: 1.4; color: #C07060; }
.vs-f.fresh { animation: vs-in 0.35s ease-out; }
@keyframes vs-in { from { opacity: 0; transform: translateX(-6px); } }

#vs-ctx { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 6px 6px 6px 14px; background: rgba(7, 10, 8, 0.94); border: 1px solid var(--line2); z-index: 4; }
#vs-ctx.active { border-color: #F2B544; }
#vs-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #E6EBE4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vs-ctx-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.vs-ctx-btns button { height: 34px; padding: 0 14px; background: #0B110D; border: 1px solid var(--line2); color: #E6EBE4; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; cursor: pointer; }
.vs-ctx-btns button.hidden { display: none; }
#vs-done { border-color: #F2B544; color: #F2B544; } #vs-done:disabled { opacity: 0.4; }

#vs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(7, 10, 8, 0.95); border-top: 1px solid var(--line); border-top-color: var(--vs-red-dim); z-index: 4; }
.vs-pw { --cd: 0; position: relative; flex: 0 0 auto; width: 108px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; background: #0B110D; border: 1px solid var(--line2); color: #E6EBE4; cursor: pointer; overflow: hidden; }
.vs-pw svg { width: 20px; height: 20px; fill: none; stroke: #FF7A5C; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vs-pw b { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; }
.vs-pw kbd { position: absolute; left: 5px; top: 4px; font-family: var(--mono); font-size: 9px; color: var(--dim); }
.vs-pw .vs-u { position: absolute; right: 5px; top: 4px; font-style: normal; font-family: var(--mono); font-size: 9px; color: #F2B544; }
.vs-pw .vs-cdbar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--cd) * 100%); background: #F2B544; }
.vs-pw:hover:not(:disabled) { background: #1A1512; border-color: var(--vs-red); }
.vs-pw.on { background: rgba(224, 83, 61, 0.18); border-color: #FF7A5C; box-shadow: 0 0 0 1px #FF7A5C inset; }
.vs-pw.armed { border-color: #F2B544; animation: vs-blink 0.6s steps(2) infinite; }
.vs-pw:disabled { cursor: default; color: var(--muted); }
.vs-pw:disabled svg { stroke: var(--dim); }
body.vs-cmd #toast { bottom: 140px; }
body.vs-cmd #coop-hud { bottom: 140px; }

/* ---------- phones ---------- */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  #vs-panel { top: 46px; left: 6px; width: auto; max-width: calc(100% - 96px); padding: 6px 9px; gap: 4px; }
  .vs-p-head b { font-size: 14px; } .vs-p-head { font-size: 9px; gap: 10px; } .vs-p-head em { font-size: 13px; }
  .vs-f { font-size: 11px; } .vs-f:nth-child(n+3) { display: none; } .vs-p-sub { display: none; }
  #vs-bar { height: 72px; justify-content: flex-start; padding: 0 6px; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #vs-bar::-webkit-scrollbar { display: none; }
  .vs-pw { width: 78px; height: 60px; padding: 4px 3px; }
  .vs-pw b { font-size: 12px; letter-spacing: 0.02em; }
  .vs-pw kbd { display: none; }
  #vs-ctx { bottom: 80px; left: 6px; right: 6px; transform: none; max-width: none; padding: 4px 4px 4px 10px; }
  #vs-hint { font-size: 10px; white-space: normal; line-height: 1.3; flex: 1; }
  .vs-ctx-btns button { height: 40px; padding: 0 12px; }
  body.vs-cmd #toast { bottom: 132px; }
  body.vs-cmd #coop-hud { display: none; }
  body.vs-cmd #mobilebar { bottom: auto; top: 46px; right: 6px; left: auto; }
  .coop-card .modal-tabs button { letter-spacing: 0.04em; padding: 0 6px; }
  body.vs-seal #vs-seal-chip { font-size: 9px; padding: 5px 8px; }
  .vs-roles { grid-template-columns: 1fr; }
  .vs-role { min-height: 0; padding: 12px; }
  .vs-role b { font-size: 20px; }
}
body.cinematic #vs-cmd { display: none !important; }

/* ---------- debrief scoreboard ---------- */
#vs-debrief { margin: 4px 0 14px; }
.vs-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 14px; padding: 16px 18px; background: #0D1210; border: 1px solid var(--line2); }
.vs-side { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vs-side.guard { text-align: right; align-items: flex-end; }
.vs-side em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); }
.vs-side b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: 0.03em; color: #E6EBE4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vs-side.seal.won em { color: var(--green); } .vs-side.guard.won em { color: #FF7A5C; }
.vs-side.seal.won b { color: var(--green); } .vs-side.guard.won b { color: #FF7A5C; }
.vs-mid { align-self: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--dim); padding-bottom: 12px; }
.vs-rows { grid-column: 1 / -1; display: flex; flex-direction: column; }
.vs-row { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
.vs-row span { text-align: center; font-size: 10px; letter-spacing: 0.12em; color: var(--muted); }
.vs-row b { font-weight: 500; color: #E6EBE4; } .vs-row b:last-child { text-align: right; }
body.vs-debrief #db-rating, body.vs-debrief #db-stars { display: none; }
@media (max-width: 520px) { .vs-side b { font-size: 22px; } .vs-row { font-size: 11px; grid-template-columns: 1fr 1.6fr 1fr; } .vs-row span { font-size: 9px; letter-spacing: 0.06em; } .vs-board { padding: 12px; gap: 0 8px; } }