/* THE VS SLAM: a 12° cobalt/vermilion split, two fives, a Dela Gothic VS and the best-of-five result. */
.vs { position: fixed; inset: 0; z-index: 70; }
.vs[hidden] { display: none; }
.vs__stage {
  /* Half the horizontal run of a 12° line across the full height: tan(12°) ≈ .2126. */
  --split: 10.63vh;
  position: absolute; inset: 0; overflow: hidden; background: var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 4vh, 44px) var(--gutter) clamp(22px, 4vh, 40px);
}

.vs__half { position: absolute; inset: 0; }
.vs__half--p1 {
  background: var(--p1); clip-path: polygon(0 0, calc(50% + var(--split)) 0, calc(50% - var(--split)) 100%, 0 100%);
}
.vs__half--p2 {
  background: var(--p2);
  clip-path: polygon(calc(50% + var(--split)) 0, 100% 0, 100% 100%, calc(50% - var(--split)) 100%);
}
.vs__dots { position: absolute; inset: 0; opacity: .18; background-size: 10px 10px; }
.vs.is-split .vs__half--p1 { animation: half-in-l calc(var(--frame) * 10) var(--pop) both; }
.vs.is-split .vs__half--p2 { animation: half-in-r calc(var(--frame) * 10) var(--pop) both; }
@keyframes half-in-l { from { transform: translateX(-100%); } }
@keyframes half-in-r { from { transform: translateX(100%); } }

.vs__team {
  position: relative; z-index: 2; grid-row: 1; display: flex; align-items: center; gap: 12px;
  font-size: clamp(22px, 2.6vw, 38px); color: var(--chalk); text-shadow: 3px 3px 0 var(--ink);
}
.vs__team .t-pix {
  font-size: 13px; padding: 4px 8px 3px; background: var(--ink); text-shadow: none; font-style: normal;
}
.vs__team--p1 { grid-column: 1; }
.vs__team--p2 { grid-column: 2; justify-self: end; flex-direction: row-reverse; }

/* ---------- the two fives ---------- */
.vs__five {
  position: relative; z-index: 2; grid-row: 2; align-self: start; margin-top: clamp(16px, 5vh, 56px);
  display: flex; gap: clamp(6px, .8vw, 12px);
}
.vs__five--p1 { grid-column: 1; justify-content: flex-end; padding-right: 2.4vw; }
.vs__five--p2 { grid-column: 2; justify-content: flex-start; padding-left: 2.4vw; }
.vs__card { --w: clamp(52px, 8vw, 122px); display: grid; justify-items: center; gap: 4px; width: var(--w); }
.vs__card:nth-child(even) { translate: 0 26px; }
.vs__frame { display: block; width: 100%; }
.vs__clip {
  display: block; aspect-ratio: 240 / 288; background: var(--yellow);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.vs__clip img { width: 100%; height: 100%; object-fit: cover; }
.vs__name {
  margin-top: 8px; font-size: clamp(11px, 1vw, 15px); font-stretch: 120%; color: var(--chalk);
  text-shadow: 2px 2px 0 var(--ink); white-space: nowrap;
}
.vs__role { font-size: 9px; color: var(--chalk); padding: 2px 5px 1px; background: var(--ink); }

/* ---------- VS ---------- */
.vs__center {
  position: absolute; z-index: 3; left: 50%; top: 53%; translate: -50% -50%;
  display: grid; place-items: center; visibility: hidden;
}
.vs.is-slam .vs__center { visibility: visible; }
.vs__burst { grid-area: 1 / 1; width: clamp(220px, 24vw, 360px); }
.vs__burst svg { display: block; width: 100%; height: auto; }
.vs__word {
  grid-area: 1 / 1; font-size: clamp(110px, 14vw, 220px); letter-spacing: -.04em;
  color: var(--chalk); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill;
  text-shadow: 10px 10px 0 var(--ink);
  font-style: italic; transform-origin: 50% 55%;
}

/* ---------- best of five ---------- */
.vs__result {
  position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 3; justify-self: center;
  display: grid; justify-items: center; gap: 14px;
}
.vs__series {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: var(--ink); border: var(--line) solid var(--chalk);
}
.vs__bo5 { font-size: 12px; color: var(--chalk); }
.vs__pips { display: flex; gap: 12px; }
.pip {
  width: 30px; height: 30px; border-radius: 50%; border: var(--line) solid var(--chalk);
  background: var(--ink-soft); display: grid; place-items: center;
}
.pip.is-p1 { background: var(--p1); animation: pip-in calc(var(--frame) * 6) steps(3, end); }
.pip.is-p2 { background: var(--p2); animation: pip-in calc(var(--frame) * 6) steps(3, end); }
.pip.is-void { border-color: var(--ink-soft); background: var(--ink); }
@keyframes pip-in { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }

.vs__banner {
  visibility: hidden; min-height: 1em; padding: 12px 30px 8px;
  font-size: clamp(30px, 4vw, 58px); background: var(--chalk); color: var(--ink);
  border: var(--line-lg) solid var(--ink); box-shadow: var(--drop-lg) var(--drop-lg) 0 var(--ink);
  transform-origin: center;
}
.vs__banner.is-on { visibility: visible; }
.vs__banner.is-p1 { background: var(--yellow); color: var(--p1); }
.vs__banner.is-p2 { background: var(--yellow); color: var(--p2); }

.vs__actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; visibility: hidden;
}
.vs.is-done .vs__actions { visibility: visible; animation: tick-in calc(var(--frame) * 8) steps(4, end); }
.cab--small { --cap: 42px; }
.cab--small .cab__text { font-size: 16px; }

.vs__close {
  position: absolute; z-index: 4; top: 18px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--chalk);
  padding: 7px 10px 6px; background: var(--ink); border: 2px solid var(--chalk);
}
.vs__close kbd { font-family: inherit; padding: 1px 4px; background: var(--chalk); color: var(--ink); }
.vs__close:hover { background: var(--chalk); color: var(--ink); }

.vs__flash { position: absolute; inset: 0; z-index: 5; background: var(--chalk); opacity: 0; pointer-events: none; }
.vs.is-hit .vs__flash { animation: flash-frame calc(var(--frame) * 3) steps(1, end); }
@keyframes flash-frame { 0% { opacity: 1; } 100% { opacity: 0; } }