feat(player): refresh dark gold betting theme

- add generated dark-gold WebP assets for PC/mobile backgrounds, cards, dialogs, tabs, mailbox, VS and bet buttons
- apply the new assets across player home, match detail, outright cards, modals, wallet/profile/detail screens and bet slip controls
- simplify confirm dialogs and reuse bet button resources for normal/pressed states
- hide mobile announcement center, tighten mobile bet list layout, and remove extra dark page backgrounds/scrollbar styling
- cache and deduplicate outright market loading to speed up repeated tab/detail navigation
- document player image-generation constraints in AGENTS.md

apps/player/src/components/MatchBetCard.vue

@@ -9,6 +9,10 @@ import { useBetSlipStore } from '../stores/betSlip';
 import { useDesktopBetPopover } from '../composables/useDesktopBetPopover';
 import { resolveSelectionLabel } from '../utils/selectionLabel';
 import MarketSelectionsPanel from './match-detail/MarketSelectionsPanel.vue';
+import vsImg from '../assets/images/generated/vs-gold-alpha-v1.webp';
+import matchListCardBg from '../assets/images/generated/pc-match-list-card-bg-v1.webp';
+
+const matchCardBg = `url(${matchListCardBg})`;
 
 const props = defineProps<{
   match: {
@@ -229,7 +233,9 @@ function goMatchDetail() {
       <div class="center-col">
         <span class="kickoff">{{ kickoffText }}</span>
         <span v-if="phase !== 'open' && liveScoreText" class="live-score">{{ liveScoreText }}</span>
-        <span v-else class="vs">VS</span>
+        <span v-else class="vs">
+          <img :src="vsImg" alt="VS" class="vs-img" />
+        </span>
       </div>
 
       <div class="team">
@@ -294,9 +300,9 @@ function goMatchDetail() {
 <style scoped>
 .match-card {
   position: relative;
-  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
-  border: 1px solid rgba(140, 140, 140, 0.35);
-  border-radius: 6px;
+  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
+  border: 0;
+  border-radius: 0;
   padding: 10px 8px 10px;
   display: flex;
   flex-direction: column;
@@ -312,7 +318,7 @@ function goMatchDetail() {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
   pointer-events: none;
   z-index: 0;
 }
@@ -412,13 +418,21 @@ function goMatchDetail() {
 }
 
 .vs {
-  font-size: 22px;
-  font-weight: 900;
-  color: #fff;
-  letter-spacing: 0.08em;
+  width: 48px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   line-height: 1;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
-  transition: font-size 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.3s ease;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
+}
+
+.vs-img {
+  width: 46px;
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9));
 }
 
 .status-tag {