VS intro screen (arena design), card VS mini + live scorebar, full country names, sports-match edit fix

Match player + preview
- Rebuild VS intro as a 1920×1080 scaled canvas (arena design from drafts/):
  angled RED/BLUE panels with clip-paths, slam-in VS with pulse+shine,
  event/stage/weight header, Match/Court/Referee chips, per-fighter
  Record/Rank/Stats chip row. Every placeholder from the artifact is
  always in the DOM; empty ones are hidden by `.vs-nullable:empty`
  and `.vs-nullable-hide` so the layout adapts without losing the
  design's HTML shape. Country codes always render as full country
  names (via new App\Data\Countries::name()).
- Real-time 6s countdown Skip button; video pinned at t=0 while
  the intro runs, released to play at zero or on Skip.
- Standalone preview page at /videos/{video}/vs-preview.

Video cards (home + everywhere)
- Match cards get a `vs-mini` overlay of the same arena design
  (fixed canvas, per-card ResizeObserver, animations replay every
  time the mouse leaves the thumb). On hover the mini explodes
  outward (panels fly out, VS scales+blurs+fades) and the hover
  video plays over the cleared thumb.
- Match cards also render a `scorebar-mini` overlay (verbatim of
  the full-player msb-scale scorebar + msb-feed) that shows
  during hover playback. Live-scoring is wired per-card via a
  data-sbm-state payload of rounds+points; RED/BLUE score, round
  label, per-round clock, and the top-right Live Scoring ticker
  (4 entries, sport-aware Yuko/Waza-ari/Ippon or Punch/Body
  kick/… labels) all update from the mini video's timeupdate.

Bug fixes
- Hover video wasn't playing sound: dropped the `muted` attribute
  I'd added while debugging match previews.
- White flash strobing on the left of match cards: removed the
  `.vs-mini-flash` element (intro-only flourish that fired on
  every mouseleave replay).
- Sports-match modal was showing "Please complete the required
  fields" when saving basic info for match videos that had no
  SportsMatch row yet: the submit gate only checked matchId, not
  the attached videoId; now it correctly skips uploadVideoFirst()
  in both edit and attach-existing-video modes.

Country names project-wide
- New helper App\Data\Countries::name($iso2) → full country name.
- Swapped `?? country` fallbacks to `?? Countries::name(country)`
  in admin dashboard, video-analytics, video-insights payloads
  (VideoController + SuperAdminController), and the VS partials.
  Now user-visible country labels always show "Bahrain" instead
  of "BH", including chart tooltips and modal titles.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/admin/dashboard.blade.php

@@ -479,10 +479,10 @@
             @else
                 @php $maxViews = $viewsByCountry->first()->total; @endphp
                 @foreach($viewsByCountry as $i => $row)
-                <div class="country-row clickable-seg" style="cursor:pointer" onclick="openDashModal('Viewers from {{ addslashes($row->country_name ?? $row->country ?? 'Unknown') }}','country_viewers',{country:'{{ $row->country }}'},'bi-globe2')">
+                <div class="country-row clickable-seg" style="cursor:pointer" onclick="openDashModal('Viewers from {{ addslashes($row->country_name ?? \App\Data\Countries::name($row->country) ?? 'Unknown') }}','country_viewers',{country:'{{ $row->country }}'},'bi-globe2')">
                     <div class="country-rank">{{ $i + 1 }}</div>
-                    <div class="country-flag" title="{{ $row->country }}">{!! $row->country ? countryCodeToFlag($row->country) : countryCodeToFlag('xx') !!}</div>
-                    <div class="country-name">{{ $row->country_name ?? 'Unknown' }}</div>
+                    <div class="country-flag" title="{{ $row->country_name ?? \App\Data\Countries::name($row->country) ?? 'Unknown' }}">{!! $row->country ? countryCodeToFlag($row->country) : countryCodeToFlag('xx') !!}</div>
+                    <div class="country-name">{{ $row->country_name ?? \App\Data\Countries::name($row->country) ?? 'Unknown' }}</div>
                     <div class="country-bar-wrap">
                         <div class="country-bar" style="width:{{ round(($row->total / $maxViews) * 100) }}%;"></div>
                     </div>
@@ -742,7 +742,11 @@ new Chart(document.getElementById('typeChart'), {
 // ── Country Chart ───────────────────────────────────────────────
 @if($viewsByCountry->isNotEmpty())
 (function() {
-    const countryData = @json($viewsByCountry);
+    const countryData = @json($viewsByCountry->map(fn($r) => [
+        'country'      => $r->country,
+        'country_name' => $r->country_name ?? \App\Data\Countries::name($r->country),
+        'total'        => $r->total,
+    ])->values());
     const labels = countryData.map(r => r.country_name || r.country || '');
     const values = countryData.map(r => r.total);
     const maxVal = Math.max(...values);
@@ -1015,7 +1019,10 @@ if (typeChartInst) {
 // Country bar chart click
 const countryChartInst = Chart.getChart('countryChart');
 if (countryChartInst) {
-    const countryData = @json($viewsByCountry ?? collect());
+    const countryData = @json(($viewsByCountry ?? collect())->map(fn($r) => [
+        'country'      => $r->country,
+        'country_name' => $r->country_name ?? \App\Data\Countries::name($r->country),
+    ])->values());
     countryChartInst.options.onClick = function(evt, elements) {
         if (!elements.length) return;
         const row = countryData[elements[0].index];