/* v5.7 (просьба владельца — «как в файтингах»): экран «ПРОТИВ» перед дуэлью на арене (public/js/versus.js).
   12 октября 2026 (просьба владельца — «как будто из другой игры, стилизуй под пиксели и мою игру»): фон, шов, «ПРОТИВ»,
   цифры отсчёта, кольцо, искры и вспышка — пиксельные холсты из versus.js / pixart.js (пиксель = 3 px на 1920×1080, --vs-px);
   здесь — только расстановка, тексты (Exo 2 / шрифт интерфейса с твёрдой тенью, без размытия и свечения), кованые прутья
   «Кузни». Полупрозрачность фона — дизерингом (шахматка в размер пикселя).
   18 окт. 2026 (моушен по навыку vizavi motion, нить «Две силы давят на шов»): въезд, полёт букв, наезд, толчки, тряска и разрыв
   двигает versus.js по времени показа (transform на целые точки экрана; freeze(t) — тот же кадр); здесь остались только
   короткие проявления подписей (табличка, подпись дуэли, подсказка, прут, шов, ряды команд). */
#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-e-out: cubic-bezier(.16, .84, .3, 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.js) ---------- */
#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; }

/* ---------- половины: фон под маской ступеней шва (.vs-clip) — пиксельный холст с запасом за краями и водяной знак отдельно ---------- */
#versus .vs-side { position: absolute; inset: 0; }
#versus .vs-clip { position: absolute; inset: 0; }
#versus :is(.vs-pbg, .vs-mk, .vs-gnd, .vs-seam, .vs-fx) { position: absolute; left: 0; top: 0; }
#versus .vs-seam { animation: vsSeam .34s .2s var(--vs-e-out) both; }
#versus .vs-dust, #versus .vs-wbox { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#versus .vs-dust canvas, #versus .vs-wbox canvas { position: absolute; left: 0; top: 0; }

/* ---------- фигура (крупно, одна на сторону): место — точка ног (сдвиг из versus.js); позади — следы-силуэты .vs-tr ---------- */
#versus .vs-fig { position: absolute; width: 0; height: 0; }
#versus .vs-side > .vs-fig { left: 0; top: 0; }
#versus .vs-fig canvas { position: absolute; }
#versus .vs-fig canvas.flip { transform: scaleX(-1); }
#versus .vs-fig canvas.vs-tr { visibility: hidden; }
#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; }
#versus .r > .vs-plate { right: 6vw; left: 53vw; text-align: right; animation: vsShow .01s .5s 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); }
#versus .r .vs-row .vs-fig { left: calc(100% - var(--fw, 60px) / 2 - 1.6vw); }
#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; }

/* ---------- центр: подпись с прутьями, цифра отсчёта, подсказка («ПРОТИВ» — холсты .vs-wbox, ставит versus.js) ---------- */
#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-cdn { position: absolute; top: calc(39.5% + 9vh); left: 0; transform: translateX(-50%); }
#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, calc(520px * var(--rz, 1))); 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; }

/* ---------- низкие окна (телефон боком): плотнее ---------- */
@media (max-height: 520px) {
  #versus .vs-plate { top: 76.5%; }
  #versus { --vs-tag: 21%; }
}
/* «уменьшить движение»: только мягкие проявления (полёты, наезд, толчки и разрыв versus.js тоже не делает) */
@media (prefers-reduced-motion: reduce) {
  #versus :is(.vs-row, .vs-seam, .vs-tag) { animation: vsShow .25s both !important; }
}

@keyframes vsShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsSeam { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@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%); } }

/* 22 окт. 2026: значок мастерства героя (js/mastery.js) — перед уровнем на табличке бойца */
.vs-meta .vs-mb { display: inline-block; vertical-align: middle; margin-right: 9px; image-rendering: pixelated; }