/* BattleVS design system: detail fixes (VS plate + face-off corners)
   Date: 7 October 2026

   HOW TO ADD
   Either: paste everything below at the very end of components/bundle.css
   Or:     save this file as components/fixes-vs-faceoff.css and load it AFTER bundle.css:
           <link rel="stylesheet" href="components/bundle.css">
           <link rel="stylesheet" href="components/fixes-vs-faceoff.css">

   It only overrides existing rules (.bv-vs, .bv-faceoff, .bv-side.is-turn). No markup changes needed.
*/

/* ===== Detail fixes: VS plate and face-off corners =====
   1. The VS plate: the slant is drawn by a skewed ::before, so the letters stay upright and centred
      (no clip-path cutting into the V); letter-spacing 0 removes the trailing space that pushed "VS" left.
   2. The face-off halves: the turn ring is drawn inside the half (inset), and only on its three outer
      edges, so both halves keep the same height and no square ring stub shows beside the plate. */
.bv-vs { clip-path: none !important; background: none !important; letter-spacing: 0 !important; text-indent: 0; line-height: 1; width: 44px; margin: 0 -9px; isolation: isolate; }
.bv-vs::before { content: ""; position: absolute; inset: 0 7px; background: var(--accent); transform: skewX(-16deg); z-index: -1; }
.skin .bv-vs { padding-top: 2px; }
.bv-faceoff { overflow: hidden; }
.bv-side.is-turn.bv-side--human { box-shadow: inset 2px 0 0 var(--human), inset 0 2px 0 var(--human), inset 0 -2px 0 var(--human), 0 0 28px -6px rgba(47,214,245,.6); }
.bv-side.is-turn.bv-side--agent { box-shadow: inset -2px 0 0 var(--agent), inset 0 2px 0 var(--agent), inset 0 -2px 0 var(--agent), 0 0 28px -6px rgba(255,79,184,.55); }
.bv-faceoff:has(.bv-side.is-turn.bv-side--human) { box-shadow: 0 0 24px -8px rgba(47,214,245,.55), var(--shadow-lift); }
.bv-faceoff:has(.bv-side.is-turn.bv-side--agent) { box-shadow: 0 0 24px -8px rgba(255,79,184,.5), var(--shadow-lift); }
.skin-roof .rps-faces .bv-vs { transform: none; box-shadow: none; width: 52px; height: 40px !important; }
.skin-roof .rps-faces .bv-vs::before { box-shadow: 4px 4px 0 var(--gc-ink); }
.bv-scoreboard .bv-vs { width: 52px !important; margin: 0; }