/* v5.7 (просьба владельца — «как в файтингах»): экран «ПРОТИВ» перед дуэлью на арене (public/js/versus.js).
   12 октября 2026 (просьба владельца — «как будто из другой игры, стилизуй под пиксели и мою игру»): фон, шов, «ПРОТИВ»,
   цифры отсчёта, кольцо, искры и вспышка — пиксельные холсты из versus.js / pixart.js (пиксель = 3 px на 1920×1080, --vs-px);
   здесь — только расстановка, тексты (Exo 2 / шрифт интерфейса с твёрдой тенью, без размытия и свечения), кованые прутья
   «Кузни». Полупрозрачность фона — дизерингом (шахматка в размер пикселя).
   12 окт. 2026 (просьба владельца — «подлагивают, сделай плавнее анимации»): движение — плавное (было ступенями steps): въезды —
   с быстрым торможением (--vs-e-out), удары — с отскоком (--vs-e-pop), уход — с разгоном (--vs-e-in); вспышки белым гаснут плавно.
   Время: въезд 0–0.5 с, удар 0.62 с, уход за 1.3 с до конца отсчёта (класс vs-out ставит versus.js). */
#versus { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; contain: layout paint; user-select: none;
  --vs-gold: #d9b46a; --vs-gold-hi: #f3d897; --vs-gold-lo: #8a6428; --vs-text: #efe6d3; --vs-text-2: #b3a991; --vs-text-3: #7d7563; --vs-red: #e0685a; --vs-ink: #08070b;
  --vs-font: var(--k-font, var(--f-text, sans-serif)); --vs-title: var(--k-title, var(--f-display, sans-serif)); --vs-px: 3px; --vs-tag: 25%; --vs-hit: .62s;
  --vs-e-out: cubic-bezier(.16, .84, .3, 1); --vs-e-in: cubic-bezier(.6, 0, .85, .25); --vs-e-pop: cubic-bezier(.3, 1.45, .5, 1); }
#versus.hidden { display: none; }
#versus * { pointer-events: none; box-sizing: border-box; }
#versus canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
/* пока экран виден: свой пиксельный отсчёт под словом (#arenacd спрятан), центральные сообщения и полоска арены — тоже */
#hud:has(> #versus.vs-cd) #arenacd { visibility: hidden; }
#hud:has(> #versus.vs-on:not(.vs-out)) :is(#centermsg, #arenabar, #droparrow, #chanbar, #darkwarn) { opacity: 0; }
/* телефон: кнопки способностей (они поверх) на эти секунды почти прозрачные — нажимаются как обычно, но не закрывают соперника */
body.mobile #hud:has(> #versus.vs-on:not(.vs-out)) > #abilities { opacity: .2; }

/* ---------- затемнение дизерингом и встряска ---------- */
#versus .vs-veil { position: absolute; inset: 0; animation: vsShow .2s ease-out both;
  background: conic-gradient(rgba(4, 3, 6, .92) 25%, transparent 0 50%, rgba(4, 3, 6, .92) 0 75%, transparent 0) 0 0 / calc(var(--vs-px) * 2) calc(var(--vs-px) * 2); }
#versus .vs-shake { position: absolute; inset: 0; animation: vsShake .36s var(--vs-hit) linear both; }

/* ---------- половины: пиксельный холст во весь экран (своя половина, ступенчатая диагональ) — въезжают ---------- */
#versus .vs-side { position: absolute; inset: 0; }
#versus .vs-bg { position: absolute; inset: 0; overflow: hidden; }
#versus .vs-pbg { position: absolute; left: 0; top: 0; }
#versus .l .vs-bg { animation: vsBgL .42s var(--vs-e-out) both; }
#versus .r .vs-bg { animation: vsBgR .42s .04s var(--vs-e-out) both; }
#versus .vs-seam { position: absolute; left: 0; top: 0; animation: vsSeam .34s .2s var(--vs-e-out) both; }

/* ---------- фигура (крупно, одна на сторону): въезд с перелётом, белая вспышка гаснет ---------- */
#versus .vs-fig { position: absolute; width: 0; height: 0; top: 72%; }
#versus .l > .vs-fig { left: 23%; animation: vsFigL .5s .1s var(--vs-e-out) both, vsWhite .34s .5s ease-out both; }
#versus .r > .vs-fig { left: 77%; animation: vsFigR .5s .14s var(--vs-e-out) both, vsWhite .34s .54s ease-out both; }
#versus .vs-fig canvas { position: absolute; }
#versus .vs-fig canvas.flip { transform: scaleX(-1); }
#versus .vs-fig.hidden { display: none; }

/* ---------- табличка: кованый прут с ромбом, ник (Exo 2), герой, уровень и рейтинг ---------- */
#versus .vs-plate { position: absolute; top: 77.5%; color: var(--vs-text); font-family: var(--vs-font); }
#versus .l > .vs-plate { left: 6vw; right: 53vw; text-align: left; animation: vsShow .01s .46s both, vsPlateL .34s .46s var(--vs-e-out) both; }
#versus .r > .vs-plate { right: 6vw; left: 53vw; text-align: right; animation: vsShow .01s .5s both, vsPlateR .34s .5s var(--vs-e-out) both; }
#versus .vs-rule { position: relative; width: min(100%, calc(420px * var(--rz, 1))); height: 3px; margin: 0 0 1.3vh; background: var(--vs-gold); box-shadow: 0 3px 0 var(--vs-ink); animation: vsRuleL .34s .55s var(--vs-e-out) both; }
#versus .r .vs-rule { margin-left: auto; animation-name: vsRuleR; }
html.nskit #versus .vs-rule { height: 18px; background: none; box-shadow: none; border-style: solid; border-color: transparent; border-width: 0 18px; border-image: var(--k-rod-gold) 0 18 fill / 0 18px / 0 stretch; image-rendering: pixelated; }
#versus .vs-nick { padding-bottom: 4px; font: 800 clamp(20px, 4.6vh, calc(50px * var(--rz, 1))) / 1.1 var(--vs-title); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 4px 0 var(--vs-ink); }
#versus .vs-you { display: inline-block; margin: 0 .5em; padding: .16em .5em .1em; vertical-align: .34em; border: 3px solid var(--vs-gold); background: var(--vs-ink); color: var(--vs-gold-hi); font: 800 max(10px, .3em) / 1.2 var(--vs-title); letter-spacing: .2em; text-transform: uppercase; text-shadow: none; }
#versus .vs-hero { margin-top: .5vh; color: var(--pc); font: 700 clamp(11px, 2vh, calc(21px * var(--rz, 1))) / 1.25 var(--vs-font); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 3px 0 var(--vs-ink); }
#versus .vs-meta { display: flex; flex-wrap: wrap; gap: .4em 1.6em; margin-top: 1.1vh; color: var(--vs-text-2); font: 600 clamp(11px, 1.85vh, calc(19px * var(--rz, 1))) / 1.3 var(--vs-font); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--vs-ink); }
#versus .r .vs-meta { justify-content: flex-end; }
#versus .vs-meta i, #versus .vs-meta em { font-style: normal; }
#versus .vs-lv i { margin-right: .4em; color: var(--vs-text-3); letter-spacing: .06em; }
#versus .vs-lv b, #versus .vs-rt b { color: var(--vs-text); font-weight: 800; }
#versus .vs-rt { display: inline-flex; align-items: center; gap: .45em; }
#versus .vs-rt i { width: 9px; height: 9px; background: var(--rk, #c8d0e0); box-shadow: 0 0 0 3px var(--vs-ink); }
#versus .vs-rt em { color: var(--rk, #c8d0e0); }
#versus .vs-rt.none b { color: var(--vs-text-3); font-weight: 600; }
#versus .vs-bot i { margin-right: .45em; color: var(--vs-text-3); font-size: .86em; letter-spacing: .14em; text-transform: uppercase; }
#versus .vs-bot em { color: var(--vs-text-2); }

/* ---------- команда на команду: до 5 строк на сторону (косые плиты — пиксельные холсты) ---------- */
#versus .vs-team { position: absolute; top: 6.5%; font-family: var(--vs-font); animation: vsShow .01s .35s both; }
#versus .l > .vs-team { left: 6vw; text-align: left; }
#versus .r > .vs-team { right: 6vw; text-align: right; }
#versus .vs-team i { display: block; color: var(--vs-text-3); font: 700 clamp(10px, 1.6vh, calc(15px * var(--rz, 1))) / 1 var(--vs-font); font-style: normal; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 2px 0 var(--vs-ink); }
#versus .vs-team b { display: inline-block; margin-top: .9vh; }
#versus .vs-rows { position: absolute; top: 19%; bottom: 5%; width: 40vw; display: flex; flex-direction: column; justify-content: center; gap: 1.1vh; --rh: 12vh; }
#versus .l > .vs-rows { left: 3vw; align-items: flex-start; }
#versus .r > .vs-rows { right: 3vw; align-items: flex-end; }
#versus .vs-rows.n1, #versus .vs-rows.n2 { --rh: 20vh; } #versus .vs-rows.n3 { --rh: 17vh; } #versus .vs-rows.n4 { --rh: 14vh; }
#versus .vs-row { position: relative; flex: 0 0 auto; height: var(--rh); width: 31vw; color: var(--vs-text); font-family: var(--vs-font); }
#versus .l .vs-row { margin-left: calc((4 - var(--i)) * 1vw); animation: vsRowL .44s calc(.12s + var(--i) * .07s) var(--vs-e-out) both; }
#versus .r .vs-row { margin-right: calc(var(--i) * 1.1vw); animation: vsRowR .44s calc(.16s + var(--i) * .07s) var(--vs-e-out) both; }
#versus .vs-rbg { position: absolute; left: 0; top: 0; }
#versus .vs-row .vs-fig { top: 97%; }
#versus .l .vs-row .vs-fig { left: calc(var(--fw, 60px) / 2 + 1.6vw); animation: vsWhite .34s calc(.5s + var(--i) * .07s) ease-out both; }
#versus .r .vs-row .vs-fig { left: calc(100% - var(--fw, 60px) / 2 - 1.6vw); animation: vsWhite .34s calc(.54s + var(--i) * .07s) ease-out both; }
#versus .vs-rtx { position: absolute; top: 54%; transform: translateY(-50%); max-width: calc(100% - var(--fw, 60px) - 4vw); }
#versus .l .vs-rtx { left: calc(var(--fw, 60px) + 3.4vw); text-align: left; }
#versus .r .vs-rtx { right: calc(var(--fw, 60px) + 3.4vw); text-align: right; }
#versus .vs-row .vs-nick { font-size: clamp(13px, 2.9vh, calc(32px * var(--rz, 1))); text-shadow: 0 3px 0 var(--vs-ink); }
#versus .vs-row .vs-hero { margin-top: .2vh; font-size: clamp(9px, 1.45vh, calc(15px * var(--rz, 1))); letter-spacing: .2em; }
#versus .vs-row .vs-meta { margin-top: .5vh; font-size: clamp(10px, 1.6vh, calc(16px * var(--rz, 1))); gap: .3em 1.1em; }
#versus .vs-rows.n5 .vs-row .vs-meta, #versus .vs-rows.n4 .vs-row .vs-meta { margin-top: .2vh; }

/* ---------- центр: подпись с прутьями, «ПРОТИВ» пиксельными буквами (удар с отскоком, белый кадр гаснет), цифра, подсказка ---------- */
#versus .vs-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; }
#versus .vs-tag { position: absolute; top: var(--vs-tag); left: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 15px; white-space: nowrap; animation: vsShow .01s .74s both, vsTag .3s .74s var(--vs-e-out) both;
  color: var(--vs-gold); font: 800 clamp(10px, 1.9vh, calc(19px * var(--rz, 1))) / 1 var(--vs-font); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 3px 0 var(--vs-ink); }
#versus .vs-tag span { margin-right: -.3em; }
#versus .vs-tag::before, #versus .vs-tag::after { content: ''; width: 72px; height: 3px; background: var(--vs-gold); box-shadow: 0 3px 0 var(--vs-ink); }
html.nskit #versus .vs-tag::before, html.nskit #versus .vs-tag::after { height: 18px; background: none; box-shadow: none; border-style: solid; border-color: transparent; border-width: 0 18px; border-image: var(--k-rod-gold) 0 18 fill / 0 18px / 0 stretch; image-rendering: pixelated; }
#versus.vs-life .vs-tag, #versus.vs-team .vs-tag { color: var(--vs-red); }
html.nskit #versus:is(.vs-life, .vs-team) .vs-tag::before, html.nskit #versus:is(.vs-life, .vs-team) .vs-tag::after { border-image-source: var(--k-rod); }
#versus .vs-word { position: absolute; top: 39.5%; left: 0; transform: translate(-50%, -50%); }
#versus .vs-wd { position: relative; display: block; animation: vsSlam .36s .44s var(--vs-e-pop) both; }
#versus .vs-pww { position: absolute; left: 0; top: 0; opacity: 0; animation: vsWW .26s var(--vs-hit) ease-out both; }
#versus .vs-word.pulse .vs-wd { animation: vsPulse .3s ease-out; }
#versus .vs-cdn { position: absolute; top: calc(39.5% + 9vh); left: 0; transform: translateX(-50%); }
#versus .vs-cdn.hit canvas { animation: vsDigit .34s var(--vs-e-pop) both; }
#versus .vs-hint { position: absolute; top: calc(var(--vs-tag) + clamp(10px, 1.9vh, 19px) + 1.6vh); left: 0; transform: translateX(-50%); width: min(40vw, 520px); text-align: center; animation: vsShow .01s .95s both;
  color: var(--vs-text-2); font: 600 clamp(10px, 1.85vh, calc(18px * var(--rz, 1))) / 1.35 var(--vs-font); letter-spacing: .04em; text-shadow: 0 2px 0 var(--vs-ink); }
#versus.vs-life .vs-hint, #versus.vs-team .vs-hint { color: var(--vs-red); }
#versus.vs-spec .vs-hint { color: var(--vs-text-2); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- уход (к «1»): половины разъезжаются с разгоном, середина гаснет ---------- */
#versus.vs-out .vs-side.l { animation: vsOutL .45s var(--vs-e-in) forwards; }
#versus.vs-out .vs-side.r { animation: vsOutR .45s var(--vs-e-in) forwards; }
#versus.vs-out :is(.vs-mid, .vs-seam, .vs-veil, .pixfx) { animation: vsHide .36s ease-in forwards; }

/* ---------- низкие окна (телефон боком): плотнее ---------- */
@media (max-height: 520px) {
  #versus .vs-plate { top: 76.5%; }
  #versus { --vs-tag: 21%; }
}
@media (prefers-reduced-motion: reduce) {
  #versus :is(.vs-bg, .vs-fig, .vs-plate, .vs-row, .vs-shake, .vs-wd, .vs-seam) { animation-duration: .01s !important; }
}

@keyframes vsShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsHide { from { opacity: 1; } to { opacity: 0; } }
@keyframes vsBgL { from { transform: translateX(-62%); } to { transform: none; } }
@keyframes vsBgR { from { transform: translateX(62%); } to { transform: none; } }
@keyframes vsSeam { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vsFigL { 0% { transform: translateX(-42vw); } 78% { transform: translateX(calc(var(--vs-px) * 4)); animation-timing-function: ease-in-out; } 100% { transform: none; } }
@keyframes vsFigR { 0% { transform: translateX(42vw); } 78% { transform: translateX(calc(var(--vs-px) * -4)); animation-timing-function: ease-in-out; } 100% { transform: none; } }
@keyframes vsWhite { 0%, 30% { filter: brightness(8) saturate(0); } 100% { filter: brightness(1) saturate(1); } }
@keyframes vsPlateL { from { transform: translateX(calc(var(--vs-px) * -12)); } to { transform: none; } }
@keyframes vsPlateR { from { transform: translateX(calc(var(--vs-px) * 12)); } to { transform: none; } }
@keyframes vsRowL { from { opacity: 0; transform: translateX(-30vw); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes vsRowR { from { opacity: 0; transform: translateX(30vw); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes vsRuleL { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vsRuleR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes vsTag { from { transform: translate(-50%, calc(var(--vs-px) * -4)); } to { transform: translateX(-50%); } }
@keyframes vsSlam { 0% { opacity: 0; transform: scale(2.6); } 14% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes vsWW { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vsPulse { 0% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
@keyframes vsDigit { 0% { transform: scale(1.9); } 100% { transform: none; } }
@keyframes vsShake {
  0% { transform: none; }
  12% { transform: translate(calc(var(--vs-px) * -3 * var(--vs-sh, 1)), calc(var(--vs-px) * 2 * var(--vs-sh, 1))); }
  26% { transform: translate(calc(var(--vs-px) * 3 * var(--vs-sh, 1)), calc(var(--vs-px) * -2 * var(--vs-sh, 1))); }
  40% { transform: translate(calc(var(--vs-px) * -2 * var(--vs-sh, 1)), calc(var(--vs-px) * -1 * var(--vs-sh, 1))); }
  56% { transform: translate(calc(var(--vs-px) * 1 * var(--vs-sh, 1)), calc(var(--vs-px) * 1 * var(--vs-sh, 1))); }
  72%, 100% { transform: none; } }
@keyframes vsOutL { to { transform: translateX(-64%); } }
@keyframes vsOutR { to { transform: translateX(64%); } }