@layer components{.vs-band{background: var(--graphite); color: #fff; border-top: 6px solid var(--red);}}
@layer components{.vs-band__nums{display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px; background: rgba(255,255,255,.08);}}
@layer components{.vs-band__nums div{background: var(--graphite); padding: 22px 20px;}}
@layer components{.vs-band__nums b{display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: .95;}}
@layer components{.vs-band__nums span{font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65);}}
@layer components{.vs-top{background: #0e1013;}}
@layer components{.vs-tools{flex-wrap: wrap; gap: 16px;}}
@layer components{.vs-tools__row{display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}}
@layer components{.vs-search{font-family: var(--font-display); font-size: 1rem; letter-spacing: .04em; padding: 10px 14px; border: 2px solid var(--graphite); background: #fff; min-width: 220px;}}
@layer components{.vs-sort{display: flex; flex-wrap: wrap; gap: 6px;}}
@layer components{.vs-sort .chip{cursor: pointer;}}
@layer components{.vs-list{list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--graphite);}}
@layer components{.vs-row a{display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 2fr) 70px 120px 24px; gap: 16px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--silver-line); color: var(--graphite); text-decoration: none;}}
@layer components{.vs-row a:hover{background: #fff;}}
@layer components{.vs-row__logo{width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--silver-line); display: grid; place-items: center; overflow: hidden;}}
@layer components{.vs-row__logo img{width: 78%; height: 78%; object-fit: contain;}}
@layer components{.vs-row__logo b{font-family: var(--font-display); font-size: .875rem; color: var(--ink3);}}
@layer components{.vs-row__name{min-width: 0;}}
@layer components{.vs-row__name b{display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}}
@layer components{.vs-row__name small{display: block; font-size: .75rem; color: var(--ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}}
@layer components{.vs-row__bar{display: block; height: 10px; background: var(--silver-2); position: relative;}}
@layer components{.vs-row__bar i{position: absolute; left: 0; top: 0; bottom: 0; background: var(--red);}}
@layer components{.vs-row.is-down .vs-row__bar i{background: var(--graphite);}}
@layer components{.vs-row__bar::after{content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink3);}}
@layer components{.vs-row__games,.vs-row__record{text-align: right;}}
@layer components{.vs-row__games b,.vs-row__record b{display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1;}}
@layer components{.vs-row__games small,.vs-row__record small{font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);}}
@layer components{.vs-row__arrow{color: var(--red);}}
@layer components{.vs-empty{font-family: var(--font-serif); color: var(--ink3); margin-top: 16px;}}
@layer components{@media (max-width: 800px){.vs-row a{grid-template-columns: 36px minmax(0, 1fr) 90px 20px; grid-template-areas: "logo name record arrow" "bar bar bar bar"; gap: 8px 12px;}}}
@layer components{@media (max-width: 800px){.vs-row__logo{grid-area: logo; width: 36px; height: 36px;}}}
@layer components{@media (max-width: 800px){.vs-row__name{grid-area: name;}}}
@layer components{@media (max-width: 800px){.vs-row__games{display: none;}}}
@layer components{@media (max-width: 800px){.vs-row__record{grid-area: record;}}}
@layer components{@media (max-width: 800px){.vs-row__arrow{grid-area: arrow;}}}
@layer components{@media (max-width: 800px){.vs-row__bar{grid-area: bar; height: 6px;}}}
@layer components{.vs-top .archive-title,.vs-top .archive-section__head .archive-title{color: #fff;}}
@layer components{.vs-top .archive-kicker{color: var(--red);}}
.vs-x .archive-head::after{content: "VS"; font-size: clamp(180px, 26vw, 400px); bottom: -22%;}
.vs-x .vs-band{background: #a8141f; border-top: 0;}
.vs-x .vs-band__nums{background: transparent; gap: 10px; padding: 16px 0;}
.vs-x .vs-band__nums div{transform: skewX(-10deg); background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.28); padding: 14px 20px;}
.vs-x .vs-band__nums div > *{transform: skewX(10deg);}
.vs-x .vs-band__nums b{font-style: italic; font-weight: 900; color: #fff;}
.vs-x .vs-band__nums span{font-family: var(--font-display); font-style: italic; font-weight: 900; color: rgba(255,255,255,.88);}
.vs-x .vsx-top{background: linear-gradient(180deg, #eef0f2, #f6f7f8); color: #4a4f56;}
.vs-x .vsx-top .archive-title{color: #4a4f56; font-style: italic; font-size: clamp(2.2rem, 4.4vw, 3.6rem);}
.vs-x .vsx-top .archive-kicker{color: var(--red); font-style: italic;}
.vsx-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 18px;}
.vsx{display: flex; flex-direction: column; overflow: hidden; background: #fff; text-decoration: none; color: #4a4f56; transform: skewX(-4deg); border: 3px solid transparent; box-shadow: 0 16px 34px rgba(60,64,70,.16); transition: transform .2s, border-color .2s, box-shadow .2s;}
.vsx > *{transform: skewX(4deg);}
.vsx:hover{transform: skewX(-4deg) scale(1.02); border-color: var(--red); box-shadow: 0 0 0 3px rgba(206,26,39,.15), 0 0 40px rgba(206,26,39,.25), 0 22px 44px rgba(60,64,70,.2); color: #4a4f56;}
.vsx__split{position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 170px; margin: 0 -10px;}
.vsx__side{display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 18px 26px 16px;}
.vsx__side--c{background: radial-gradient(120% 120% at 0% 0%, #e8303c 0%, var(--red) 55%, #b3141f 100%); color: #fff; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 40px;}
.vsx__side--o{background: linear-gradient(225deg, #ffffff, #e3e6ea 70%, #d2d6db); color: #4a4f56; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); margin-left: -12%; padding-left: 50px; text-align: right; align-items: flex-end;}
.vsx__who{font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: .95; text-transform: uppercase;}
.vsx__wins{font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(3.6rem, 5.4vw, 5rem); line-height: .85; letter-spacing: -.02em;}
.vsx__side--o .vsx__wins{color: #8a9099;}
.vsx.is-down .vsx__side--o .vsx__wins{color: #4a4f56;}
.vsx__lbl{font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85;}
.vsx__vs{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(-10deg); padding: 6px 14px; background: #fff; color: var(--red); font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.8rem; line-height: 1; box-shadow: 0 0 0 4px var(--red), 0 8px 20px rgba(0,0,0,.25); z-index: 2;}
.vsx__foot{display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px;}
.vsx__lead{font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: #6b6f75;}
.vsx__lead b{font-size: 1.6rem; color: var(--red); letter-spacing: 0; margin-right: 4px;}
.vsx.is-down .vsx__lead b{color: #4a4f56;}
.vsx__meta{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #8a9099;}
.vsx__streak{font-style: italic; padding: 3px 10px; transform: skewX(-12deg);}
.vsx__streak.is-w{background: var(--red); color: #fff;}
.vsx__streak.is-l{background: #e3e6ea; color: #4a4f56;}
.vsx__run{display: flex; flex-wrap: wrap; align-items: center; gap: 3px;}
.vsx__run i{display: grid; place-items: center; width: 22px; height: 22px; transform: skewX(-10deg); font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: .7rem; background: #e3e6ea; color: #6b6f75;}
.vsx__run i.is-w{background: var(--red); color: #fff;}
.vsx__last{margin-left: 10px; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #6b6f75;}
.vs-x .vs-tools .archive-title{font-style: italic; color: #4a4f56;}
.vs-x .vs-tools .archive-kicker{color: var(--red); font-style: italic;}
.vs-x .vs-search{transform: skewX(-10deg); border: 2px solid var(--red); font-style: italic; font-weight: 800;}
.vs-x .vs-sort .chip{transform: skewX(-12deg); border-radius: 0; border: 2px solid #c9ccd1; background: #fff; color: #4a4f56; font-style: italic; font-weight: 900;}
.vs-x .vs-sort .chip.is-active{background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 18px rgba(206,26,39,.28);}
.vs-x .vs-list{border-top: 0; display: grid; gap: 8px;}
.vs-x .vs-row a{transform: skewX(-4deg); background: #fff; border: 2px solid transparent; border-bottom: 2px solid transparent; box-shadow: 0 8px 18px rgba(60,64,70,.08); transition: transform .15s, border-color .15s, box-shadow .15s; padding: 12px 18px;}
.vs-x .vs-row a > *{transform: skewX(4deg);}
.vs-x .vs-row a:hover{transform: skewX(-4deg) scale(1.01); border-color: var(--red); box-shadow: 0 0 0 3px rgba(206,26,39,.12), 0 14px 26px rgba(60,64,70,.14);}
.vs-x .vs-row__name b{font-style: italic; font-weight: 900;}
.vs-x .vs-row__bar{height: 12px; background: #e3e6ea; transform: skewX(-20deg);}
.vs-x .vs-row.is-down .vs-row__bar i{background: #8a9099;}
.vs-x .vs-row__games b,.vs-x .vs-row__record b{font-style: italic; font-weight: 900;}
.vs-x .vs-row.is-up .vs-row__record b{color: var(--red);}
@media (max-width: 760px){.vsx,.vsx:hover,.vsx > *,.vs-x .vs-row a,.vs-x .vs-row a:hover,.vs-x .vs-row a > *,.vs-x .vs-band__nums div,.vs-x .vs-band__nums div > *{transform: none;}}
@media (max-width: 760px){.vsx__split{margin: 0;}}
@media (max-width: 760px){.vsx__side{padding: 14px 16px;}}
@media (max-width: 760px){.vsx__side--c{padding-right: 34px;}}
@media (max-width: 760px){.vsx__side--o{padding-left: 40px;}}
@media (prefers-reduced-motion: reduce){.vsx,.vs-x .vs-row a{transition: none;}}
.games-x .vs-band{background: #a8141f; border-top: 0; color: #fff;}
.games-x .vs-band__nums{background: transparent; gap: 10px; padding: 16px 0;}
.games-x .vs-band__nums div{transform: skewX(-10deg); background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.28); padding: 14px 20px;}
.games-x .vs-band__nums div > *{transform: skewX(10deg);}
.games-x .vs-band__nums b{font-style: italic; font-weight: 900; color: #fff;}
.games-x .vs-band__nums span{font-family: var(--font-display); font-style: italic; font-weight: 900; color: rgba(255,255,255,.88);}
@media (max-width: 760px){.games-x .vs-band__nums div,.games-x .vs-band__nums div > *{transform: none;}}
.games-x .vs-band{background: #15181c; border-bottom: 1px solid rgba(255,255,255,.08);}
.games-x .vs-band__nums div{background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.12); border-top: 4px solid var(--red);}
.games-x .vs-band__nums span{color: rgba(255,255,255,.7);}