feat(player): 合并 main 桌面快算能力并完善 theme-2 球赛/首页体验

- 恢复桌面首页焦点大卡布局、悬停下注、VS 高亮与注单动画，移除焦点卡背景图
- 对齐主分支快算弹层上下定位与卡片 engaged 状态；详情页补充 cancelClose/高亮
- 球赛/优胜冠军页恢复 MatchBetCard、冠军卡悬停快算与 OutrightBetModal
- 首页 hotMatches 接口返回 markets，修复卡片切换玩法误显暂无盘口
- 补充 i18n：bet.all、no_market_odds、quick_bet、outright_view_all 等；移除 Tab 表情符号

apps/api/src/applications/player/player.controller.ts

@@ -189,7 +189,7 @@ export class PlayerController {
     const [banners, announcements, allMatches, upcomingMatches, inboxEnabled] = await Promise.all([
       this.content.listActive('BANNER', locale),
       this.content.listActiveAnnouncements(locale),
-      this.matches.listPublished(locale, undefined, { includeMarkets: false }),
+      this.matches.listPublished(locale, undefined, { includeMarkets: true }),
       this.matches.listUpcomingPublished(locale, { includeMarkets: true }),
       this.systemConfig.getInboxFeatureEnabled(),
     ]);

apps/player/src/components/MatchBetCard.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, getCurrentInstance, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
 import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
+import { useBetSlipStore } from '../stores/betSlip';
+import { useAuthStore } from '../stores/auth';
+import { useDesktopBetPopover } from '../composables/useDesktopBetPopover';
+import { resolveSelectionLabel } from '../utils/selectionLabel';
+import MarketSelectionsPanel from './match-detail/MarketSelectionsPanel.vue';
 
 const props = defineProps<{
   match: {
@@ -31,12 +37,22 @@ const props = defineProps<{
       homeCards?: number | null;
       awayCards?: number | null;
     } | null;
+    markets?: any[];
   };
+  noQuickBet?: boolean;
 }>();
 
 const emit = defineEmits<{ bet: [id: string] }>();
 
 const { t, locale } = useI18n();
+const router = useRouter();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt, visible: popoverVisible, pendingItem, cancelClose, scheduleClose, isActiveForCard } =
+  useDesktopBetPopover();
+
+const cardRootId = `bet-card-${props.match.id}-${getCurrentInstance()?.uid ?? 0}`;
+const isCardEngaged = computed(() => isActiveForCard(cardRootId));
 
 function formatKickoff(startTime: string) {
   return formatLocalMatchDateTime(startTime, locale.value, {
@@ -70,19 +86,153 @@ const liveScoreText = computed(() => {
   if (!s || s.ftHome == null || s.ftAway == null) return '';
   return `${s.ftHome} - ${s.ftAway}`;
 });
+
+function getHoveredSide() {
+  if (!popoverVisible.value || !pendingItem.value) return '';
+  if (!isActiveForCard(cardRootId)) return '';
+  if (String(pendingItem.value.matchId) !== String(props.match.id)) return '';
+
+  const selId = pendingItem.value.selectionId;
+  for (const market of props.match.markets ?? []) {
+    const sel = market.selections?.find((s: { id: string }) => s.id === selId);
+    if (!sel) continue;
+    const code = (sel.selectionCode || '').toUpperCase();
+    if (code === 'HOME') return 'home';
+    if (code === 'AWAY') return 'away';
+    if (code === 'DRAW') return 'draw';
+    if (code === 'OVER') return 'home';
+    if (code === 'UNDER') return 'away';
+    if (code === 'ODD' || code === 'EVEN') return 'draw';
+    const selIndex = market.selections?.findIndex((s: { id: string }) => s.id === selId) ?? -1;
+    if (selIndex === -1) continue;
+    if (market.marketType === 'FT_1X2') {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'draw';
+      if (selIndex === 2) return 'away';
+    } else {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'away';
+    }
+  }
+  return '';
+}
+
+function pickQuickBetMarkets(markets: any[] | undefined) {
+  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
+  const byType = new Map<string, any>();
+  for (const m of markets ?? []) {
+    if (!supported.includes(m.marketType)) continue;
+    if (!Array.isArray(m.selections) || m.selections.length === 0) continue;
+    if (!byType.has(m.marketType)) byType.set(m.marketType, m);
+  }
+  return supported.map((type) => byType.get(type)).filter(Boolean);
+}
+
+const activeMarketType = ref('');
+
+watch(
+  () => props.match.id,
+  () => {
+    activeMarketType.value = '';
+  },
+);
+
+const currentMarketType = computed(() => {
+  const available = pickQuickBetMarkets(props.match.markets);
+  if (activeMarketType.value && available.some((m) => m.marketType === activeMarketType.value)) {
+    return activeMarketType.value;
+  }
+  if (available.some((m) => m.marketType === 'FT_1X2')) return 'FT_1X2';
+  return available[0]?.marketType ?? '';
+});
+
+function isSelected(id: string) {
+  return slip.isInSlip(id);
+}
+
+function getAvailableMarketsForMatch(match: typeof props.match) {
+  return pickQuickBetMarkets(match.markets);
+}
+
+function getMarketTabLabel(type: string) {
+  const raw = (() => {
+    if (type === 'FT_1X2') return t('bet.market_ft_1x2');
+    if (type === 'FT_HANDICAP') return t('bet.market_ft_handicap');
+    if (type === 'FT_OVER_UNDER') return t('bet.market_ft_ou');
+    return type;
+  })();
+  return raw.replace(/全场\s*|FT\s*|Penuh\s*/gi, '').trim();
+}
+
+function getSelLabel(sel: { selectionCode?: string; selectionName: string }, _marketType: string, lineValue?: string | number | null) {
+  return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
+}
+
+function isMarketLocked(match: any, market?: { status?: string; allowSingle?: boolean; allowParlay?: boolean }) {
+  if (!market) return true;
+  if (match.bettingOpen === false) return true;
+  const status = (market.status ?? 'OPEN').toUpperCase();
+  if (status !== 'OPEN') return true;
+  return market.allowSingle !== true && market.allowParlay !== true;
+}
+
+function getActiveMarket() {
+  const type = currentMarketType.value;
+  if (!type) return undefined;
+  return pickQuickBetMarkets(props.match.markets).find((m) => m.marketType === type);
+}
+
+function handleOddsClick(match: any, market: any, selId: string, event?: MouseEvent) {
+  if (isMarketLocked(match, market)) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(router.currentRoute.value.fullPath);
+    return;
+  }
+  const sel = market.selections?.find((s: { id: string }) => s.id === selId);
+  if (!sel || !event) return;
+
+  openAt(event, {
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.id,
+    matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
+    marketId: market.id,
+    marketName: market.marketDisplayName?.trim() || market.marketType || '',
+    selectionName: getSelLabel(sel, market.marketType, market.lineValue),
+    odds: parseFloat(sel.odds),
+    marketType: market.marketType,
+    lineValue:
+      market.lineValue != null && market.lineValue !== ''
+        ? parseFloat(String(market.lineValue))
+        : null,
+    allowSingle: market.allowSingle,
+    allowParlay: market.allowParlay,
+  });
+}
+
+function goMatchDetail() {
+  router.push(`/match/${props.match.id}`);
+}
 </script>
 
 <template>
   <article
     class="match-card"
-    :class="{ 'match-card--phase': phase !== 'open' }"
+    :data-bet-card-root="cardRootId"
+    :class="{
+      'match-card--phase': phase !== 'open',
+      'no-quick-bet': noQuickBet,
+      'match-card--engaged': isCardEngaged,
+    }"
     @click="emit('bet', match.id)"
+    @mouseenter="cancelClose"
+    @mouseleave="scheduleClose()"
   >
     <span v-if="phase === 'open'" class="status-tag status-tag--open">{{ t('bet.status_open') }}</span>
     <span v-else-if="phase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
     <span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>
 
-    <div class="teams-row">
+    <div class="teams-row" :class="getHoveredSide()">
       <div class="team">
         <span class="team-name">{{ match.homeTeamName }}</span>
         <img
@@ -124,40 +274,73 @@ const liveScoreText = computed(() => {
     >
       {{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
     </button>
+
+    <div v-if="!noQuickBet" class="card-quick-bet" @click.stop>
+      <div v-if="getAvailableMarketsForMatch(match).length" class="quick-bet-tabs">
+        <button
+          v-for="m in getAvailableMarketsForMatch(match)"
+          :key="m.marketType"
+          type="button"
+          class="quick-bet-tab-btn"
+          :class="{ active: currentMarketType === m.marketType }"
+          @click="activeMarketType = m.marketType"
+        >
+          {{ getMarketTabLabel(m.marketType) }}
+        </button>
+        <span class="quick-bet-all-link" @click="goMatchDetail">{{ t('bet.all') }} →</span>
+      </div>
+
+      <div class="quick-bet-odds">
+        <template v-if="getActiveMarket()">
+          <MarketSelectionsPanel
+            desktop-card
+            compact
+            :locked="isMarketLocked(match, getActiveMarket())"
+            :line-value="getActiveMarket()?.lineValue"
+            :selections="(getActiveMarket()?.selections || []).map((s: any) => ({
+              ...s,
+              odds: String(s.odds),
+            }))"
+            :is-selected="isSelected"
+            @pick="(selId, ev) => handleOddsClick(match, getActiveMarket()!, selId, ev)"
+          />
+        </template>
+        <div v-else class="quick-bet-no-odds">
+          {{ t('bet.no_market_odds') }}
+        </div>
+      </div>
+    </div>
   </article>
 </template>
 
 <style scoped>
 .match-card {
   position: relative;
-  background: #FFFFFF;
-  border: 1px solid #E5E7EB;
+  background: #ffffff;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 8px 6px 8px;
+  padding: 10px 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
+  min-height: 130px;
   overflow: hidden;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  transition: transform 0.15s, box-shadow 0.15s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
 }
 
 .match-card::before {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(0, 61, 107, 0.02) 0%, transparent 50%, rgba(0, 91, 159, 0.02) 100%);
+  background: linear-gradient(135deg, rgba(0, 61, 107, 0.03) 0%, transparent 50%, rgba(0, 91, 159, 0.03) 100%);
   pointer-events: none;
   z-index: 0;
 }
 
-.match-card--phase {
-  opacity: 0.95;
-}
-
 .teams-row {
   position: relative;
   z-index: 2;
@@ -165,6 +348,7 @@ const liveScoreText = computed(() => {
   align-items: center;
   width: 100%;
   gap: 4px;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;
 }
 
 .team {
@@ -172,9 +356,10 @@ const liveScoreText = computed(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   min-width: 0;
-  transform: translateY(6px);
+  transform: translateY(8px);
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .team-name {
@@ -183,17 +368,18 @@ const liveScoreText = computed(() => {
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  font-weight: 700;
-  color: #1A1A2E;
+  font-weight: 800;
+  color: var(--text);
   line-height: 1.2;
   word-break: break-word;
   text-align: center;
   padding: 0 4px;
   align-self: stretch;
+  transition: font-size 0.25s ease;
 }
 
 .match-card--phase .team-name {
-  color: #4B5563;
+  color: #4b5563;
 }
 
 .team-flag {
@@ -202,6 +388,7 @@ const liveScoreText = computed(() => {
   object-fit: cover;
   border-radius: 3px;
   display: block;
+  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease;
 }
 
 .team-flag.flag-logo {
@@ -216,32 +403,27 @@ const liveScoreText = computed(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 3px;
+  gap: 4px;
   min-width: 48px;
 }
 
 .kickoff {
   font-size: 12px;
   font-weight: 600;
-  color: #1A1A2E;
+  color: var(--text-muted);
   line-height: 1.15;
   white-space: normal;
   text-align: center;
   max-width: 80px;
   overflow-wrap: anywhere;
+  transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
 }
 
-.live-score {
-  font-size: 18px;
-  font-weight: 900;
-  color: #003D6B;
-  line-height: 1;
-}
-
+.live-score,
 .vs {
   font-size: 18px;
   font-weight: 900;
-  color: #003D6B;
+  color: var(--primary);
   line-height: 1;
 }
 
@@ -259,24 +441,24 @@ const liveScoreText = computed(() => {
 }
 
 .status-tag--open {
-  background: #FEF3C7;
-  color: #92400E;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: #fef3c7;
+  color: #92400e;
+  border-bottom: 1px solid #fde68a;
+  border-left: 1px solid #fde68a;
 }
 
 .status-tag--settled {
-  background: #E8EDF2;
-  color: #4B5563;
-  border-bottom: 1px solid #D1D5DB;
-  border-left: 1px solid #D1D5DB;
+  background: #e8edf2;
+  color: #4b5563;
+  border-bottom: 1px solid #d1d5db;
+  border-left: 1px solid #d1d5db;
 }
 
 .status-tag--pending {
-  background: #FEF3C7;
-  color: #D97706;
-  border-bottom: 1px solid #FDE68A;
-  border-left: 1px solid #FDE68A;
+  background: #fef3c7;
+  color: #d97706;
+  border-bottom: 1px solid #fde68a;
+  border-left: 1px solid #fde68a;
 }
 
 .bet-btn {
@@ -288,11 +470,185 @@ const liveScoreText = computed(() => {
   border-radius: 6px;
   font-size: 12px;
   line-height: 1.2;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
 .bet-btn--view {
-  background: #F5F7FA;
-  border: 1px solid #E5E7EB;
-  color: #6B7280;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+}
+
+.card-quick-bet {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(12px);
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 5;
+}
+
+@media (hover: hover) {
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) {
+    border-color: var(--border-active);
+    box-shadow: 0 4px 12px rgba(0, 61, 107, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .teams-row {
+    transform: translateY(0);
+    padding: 0 28px;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team {
+    transform: translateY(0);
+    gap: 3px;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-flag {
+    width: 40px;
+    height: 28px;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-flag.flag-logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .team-name {
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .kickoff {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .vs,
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .live-score {
+    font-size: 16px;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .bet-btn {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .match-card:not(.no-quick-bet):is(:hover, .match-card--engaged) .card-quick-bet {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  .match-card.no-quick-bet:hover {
+    border-color: var(--border-active);
+    box-shadow: 0 4px 12px rgba(0, 61, 107, 0.1);
+  }
+}
+
+.quick-bet-tabs {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 2px;
+}
+
+.quick-bet-tab-btn {
+  padding: 2px 6px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.quick-bet-tab-btn:hover,
+.quick-bet-tab-btn.active {
+  color: var(--primary-light);
+  background: rgba(0, 102, 204, 0.08);
+}
+
+.quick-bet-all-link {
+  margin-left: auto;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--primary-light);
+  cursor: pointer;
+  padding: 2px 4px;
+}
+
+.quick-bet-odds {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.quick-bet-odds :deep(.odds-btn) {
+  min-height: 26px !important;
+  padding: 1px 4px !important;
+}
+
+.quick-bet-odds :deep(.odds) {
+  font-size: 11px !important;
+}
+
+.quick-bet-odds :deep(.label) {
+  font-size: 8px !important;
+}
+
+.quick-bet-no-odds {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.teams-row .team {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
+}
+
+.teams-row.home .team:first-child {
+  transform: scale(1.08);
+  filter: brightness(1.08) saturate(1.15);
+  z-index: 2;
+}
+
+.teams-row.home .team:last-child {
+  opacity: 0.35 !important;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.teams-row.away .team:last-child {
+  transform: scale(1.08);
+  filter: brightness(1.08) saturate(1.15);
+  z-index: 2;
+}
+
+.teams-row.away .team:first-child {
+  opacity: 0.35 !important;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.teams-row.draw .team {
+  transform: scale(1.05);
+  filter: brightness(1.08) saturate(1.1);
 }
 </style>

apps/player/src/components/desktop/BetSlipPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter, RouterLink } from 'vue-router';
 import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
@@ -26,6 +26,7 @@ const { refreshProfile } = usePlayerProfile();
 const { requestLocate } = useDesktopBetLocate();
 
 const activeTab = ref<PanelTab>('single');
+const transitionName = ref('list-slide');
 const historyScope = ref<'all' | 'match'>('all');
 const historyItems = ref<BetHistoryItem[]>([]);
 const historyTotal = ref(0);
@@ -192,22 +193,32 @@ function genId() {
 }
 
 function selectTab(tab: PanelTab) {
+  transitionName.value = '';
   activeTab.value = tab;
   error.value = '';
   if (tab === 'history') {
     if (!auth.token) {
       auth.showLoginPrompt(route.fullPath);
       activeTab.value = slip.mode;
+      nextTick(() => {
+        transitionName.value = 'list-slide';
+      });
       return;
     }
     if (showMatchHistoryFilter.value) {
       historyScope.value = 'match';
     }
     void loadHistory(true);
+    nextTick(() => {
+      transitionName.value = 'list-slide';
+    });
     return;
   }
   slip.setMode(tab);
   syncStakeInputFromSlip();
+  nextTick(() => {
+    transitionName.value = 'list-slide';
+  });
 }
 
 function selectHistoryScope(scope: 'all' | 'match') {
@@ -807,7 +818,13 @@ watch(
 watch(
   () => slip.mode,
   (mode) => {
-    if (activeTab.value !== 'history') activeTab.value = mode;
+    if (activeTab.value !== 'history') {
+      transitionName.value = '';
+      activeTab.value = mode;
+      nextTick(() => {
+        transitionName.value = 'list-slide';
+      });
+    }
   },
 );
 
@@ -971,7 +988,7 @@ onUnmounted(() => {
         <p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
       </div>
 
-      <div v-else class="items-list">
+      <TransitionGroup v-else :name="transitionName" tag="div" class="items-list">
         <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning">{{ parlayWarning }}</p>
         <div
           v-for="item in activeItems"
@@ -1075,7 +1092,7 @@ onUnmounted(() => {
           <span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span>
           <span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
         </div>
-      </div>
+      </TransitionGroup>
 
       <!-- Stake input (parlay only) -->
       <div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
@@ -1966,4 +1983,23 @@ onUnmounted(() => {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.list-slide-enter-active,
+.list-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.list-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+.list-slide-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+}
+
+.list-slide-move {
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
 </style>

apps/player/src/components/desktop/DesktopOddsBetPopover.vue

@@ -12,7 +12,7 @@ import { buildBetPlaceConfirmMessage } from '../../utils/betPlaceConfirmMessage'
 import { useAppToast } from '../../composables/useAppToast';
 
 const { t, locale } = useI18n();
-const { visible, anchorX, anchorY, pendingItem, close } = useDesktopBetPopover();
+const { visible, anchorX, anchorY, pendingItem, placement, close, cancelClose, scheduleClose } = useDesktopBetPopover();
 const slip = useBetSlipStore();
 const auth = useAuthStore();
 const { refreshProfile } = usePlayerProfile();
@@ -25,6 +25,16 @@ const error = ref('');
 const showPlaceConfirm = ref(false);
 const placeConfirmMessage = ref('');
 const MIN_STAKE = 5;
+const confirmingItem = ref<typeof pendingItem.value>(null);
+
+watch(showPlaceConfirm, (val) => {
+  if (!val) confirmingItem.value = null;
+});
+
+function onPopoverMouseLeave() {
+  if (showPlaceConfirm.value) return;
+  scheduleClose(200);
+}
 
 let outsideClickTimer = 0;
 
@@ -95,6 +105,7 @@ function validatePlaceNow(): boolean {
 function onPlaceNowClick() {
   if (!validatePlaceNow()) return;
   const item = pendingItem.value!;
+  confirmingItem.value = item;
   placeConfirmMessage.value = buildBetPlaceConfirmMessage(t, {
     mode: 'single',
     items: [item],
@@ -107,7 +118,7 @@ function onPlaceNowClick() {
   showPlaceConfirm.value = true;
 }
 
-async function executePlaceNow(item = pendingItem.value) {
+async function executePlaceNow(item = confirmingItem.value || pendingItem.value) {
   if (!item) return;
   loading.value = true;
   error.value = '';
@@ -134,7 +145,7 @@ async function executePlaceNow(item = pendingItem.value) {
 }
 
 async function confirmPlaceNow() {
-  const item = pendingItem.value;
+  const item = confirmingItem.value;
   if (!item) return;
   showPlaceConfirm.value = false;
   await executePlaceNow(item);
@@ -184,11 +195,13 @@ function addToParlayList() {
       v-if="visible && pendingItem"
       ref="popRef"
       class="bet-popover"
+      :class="`placement-${placement}`"
       tabindex="-1"
       :style="{ left: `${anchorX}px`, top: `${anchorY}px` }"
       @click.stop
+      @mouseenter="cancelClose"
+      @mouseleave="onPopoverMouseLeave"
     >
-      <button type="button" class="pop-close" aria-label="Close" @click="close">✕</button>
 
       <div class="pop-match">{{ pendingItem.matchName }}</div>
         <div class="pop-market">{{ pendingItem.marketName }}</div>
@@ -239,85 +252,125 @@ function addToParlayList() {
 .bet-popover {
   position: fixed;
   z-index: 1000;
-  width: 280px;
-  padding: 12px 28px 12px 12px;
-  border-radius: 8px;
+  width: 172px;
+  padding: 6px 7px;
+  border-radius: 6px;
   border: 1px solid var(--border-active);
   background: var(--bg-card);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
+  box-shadow: 0 6px 18px rgba(0, 61, 107, 0.14);
 }
 
-.pop-close {
+.bet-popover::after,
+.bet-popover::before {
+  content: '';
   position: absolute;
-  top: 6px;
-  right: 6px;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 13px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 4px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  pointer-events: none;
 }
 
-.pop-close:hover {
-  color: var(--primary);
+.bet-popover.placement-bottom::after {
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--bg-card) transparent;
+  z-index: 2;
+}
+
+.bet-popover.placement-bottom::before {
+  top: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 7px 7px 7px;
+  border-color: transparent transparent var(--border-active) transparent;
+  z-index: 1;
+}
+
+.bet-popover.placement-top::after {
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-color: var(--bg-card) transparent transparent transparent;
+  z-index: 2;
+}
+
+.bet-popover.placement-top::before {
+  bottom: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 7px 7px 0 7px;
+  border-color: var(--border-active) transparent transparent transparent;
+  z-index: 1;
 }
 
 .pop-match {
-  font-size: 11px;
+  font-size: 9px;
   color: var(--text-muted);
-  line-height: 1.35;
-  margin-bottom: 4px;
+  line-height: 1.3;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .pop-market {
-  font-size: 10px;
+  font-size: 8px;
   color: var(--text-muted);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .pop-pick-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  margin-bottom: 10px;
-  border-radius: 4px;
+  gap: 6px;
+  padding: 4px 6px;
+  margin-bottom: 5px;
+  border-radius: 3px;
   background: rgba(0, 102, 204, 0.06);
   border: 1px solid var(--border-active);
 }
 
 .pick {
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 700;
   color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .odds {
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 800;
   color: var(--primary);
+  flex-shrink: 0;
 }
 
 .stake-label {
   display: block;
-  font-size: 10px;
+  font-size: 8px;
   color: var(--text-muted);
-  margin-bottom: 4px;
+  margin-bottom: 2px;
 }
 
 .stake-input {
   width: 100%;
   box-sizing: border-box;
-  padding: 6px 8px;
-  margin-bottom: 8px;
-  border-radius: 4px;
+  padding: 4px 6px;
+  margin-bottom: 5px;
+  border-radius: 3px;
   border: 1px solid var(--border);
   background: var(--bg-card);
   color: var(--text);
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .stake-input:focus {
@@ -328,9 +381,9 @@ function addToParlayList() {
 .est-row {
   display: flex;
   justify-content: space-between;
-  font-size: 10px;
+  font-size: 8px;
   color: var(--text-muted);
-  margin-bottom: 10px;
+  margin-bottom: 6px;
 }
 
 .est-val {
@@ -339,20 +392,20 @@ function addToParlayList() {
 }
 
 .pop-error {
-  font-size: 10px;
+  font-size: 8px;
   color: var(--danger);
-  margin: 0 0 8px;
+  margin: 0 0 5px;
 }
 
 .pop-actions {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 
 .pop-actions-row {
   display: flex;
-  gap: 6px;
+  gap: 4px;
 }
 
 .pop-actions-row .btn-outline {
@@ -363,12 +416,12 @@ function addToParlayList() {
 
 .btn-primary-gold {
   width: 100%;
-  padding: 8px;
+  padding: 5px;
   border: none;
-  border-radius: 4px;
+  border-radius: 3px;
   background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
   color: #FFFFFF;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 800;
   cursor: pointer;
 }
@@ -384,12 +437,12 @@ function addToParlayList() {
 
 .btn-outline {
   width: 100%;
-  padding: 7px;
-  border-radius: 4px;
+  padding: 4px;
+  border-radius: 3px;
   border: 1px solid var(--border-active);
   background: rgba(0, 102, 204, 0.05);
   color: var(--primary-light);
-  font-size: 11px;
+  font-size: 9px;
   font-weight: 700;
   cursor: pointer;
 }

apps/player/src/components/desktop/DesktopOutrightEventCard.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { OutrightEvent } from '../outright/OutrightEventSection.vue';
+import type { OutrightEvent, OutrightSelection } from '../outright/OutrightEventSection.vue';
 import saishiImg from '../../assets/images/saishi.webp';
 
 const props = defineProps<{
   event: OutrightEvent;
 }>();
 
-const emit = defineEmits<{ open: [] }>();
+const emit = defineEmits<{
+  open: [];
+  pick: [selection: OutrightSelection];
+}>();
 
 const { t } = useI18n();
 
@@ -22,38 +25,129 @@ const teamCount = computed(() => props.event.selectionCount ?? props.event.selec
 const isSettled = computed(
   () => props.event.bettingOpen === false || props.event.status === 'SETTLED',
 );
+
+const MIN_BTN_W = 52;
+const GAP = 4;
+
+const cardRef = ref<HTMLElement | null>(null);
+const cardWidth = ref(400);
+let ro: ResizeObserver | null = null;
+
+onMounted(() => {
+  if (!cardRef.value) return;
+  ro = new ResizeObserver(([entry]) => {
+    cardWidth.value = entry.contentRect.width;
+  });
+  ro.observe(cardRef.value);
+});
+
+onUnmounted(() => ro?.disconnect());
+
+const maxVisible = computed(() => {
+  const panelW = cardWidth.value - 24;
+  return Math.max(1, Math.min(5, Math.floor((panelW + GAP) / (MIN_BTN_W + GAP))));
+});
+
+const topSelections = computed(() => {
+  if (!props.event.selections) return [];
+  return [...props.event.selections]
+    .sort((a, b) => {
+      const oa = parseFloat(a.odds) || 9999;
+      const ob = parseFloat(b.odds) || 9999;
+      return oa - ob;
+    })
+    .slice(0, maxVisible.value);
+});
 </script>
 
 <template>
-  <button type="button" class="outright-event-card hover-bg" @click="emit('open')">
-    <div class="card-main">
-      <div class="title-row">
-        <span class="title">{{ headTitle }}</span>
-        <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+  <article ref="cardRef" class="outright-event-card" :class="{ settled: isSettled }">
+    <div class="card-clickable-area" @click="emit('open')">
+      <div class="card-main">
+        <div class="title-row">
+          <span class="title">{{ headTitle }}</span>
+          <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+        </div>
+        <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
+        <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
       </div>
-      <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
-      <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
+      <img :src="saishiImg" alt="" class="saishi" />
     </div>
-    <img :src="saishiImg" alt="" class="saishi" />
-  </button>
+
+    <div v-if="!isSettled && topSelections.length" class="quick-bet-panel">
+      <div class="quick-bet-title">
+        {{ t('bet.quick_bet') }}
+        <span class="quick-bet-hint">（{{ t('bet.popular_teams') }}）</span>
+      </div>
+      <div class="odds-row">
+        <button
+          v-for="sel in topSelections"
+          :key="sel.id"
+          type="button"
+          class="odds-btn"
+          @click.stop="emit('pick', sel)"
+        >
+          <span class="selection-name" :title="sel.teamName">{{ sel.teamName }}</span>
+          <span class="selection-odds">{{ sel.odds }}</span>
+        </button>
+      </div>
+      <button type="button" class="view-all-btn" @click.stop="emit('open')">
+        {{ t('bet.outright_view_all') }} →
+      </button>
+    </div>
+  </article>
 </template>
 
 <style scoped>
 .outright-event-card {
+  position: relative;
+  width: 100%;
+  min-height: 140px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-card);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+@media (hover: hover) {
+  .outright-event-card:hover {
+    border-color: var(--border-active);
+    box-shadow: 0 4px 12px rgba(0, 61, 107, 0.1);
+  }
+
+  .outright-event-card:hover .card-clickable-area {
+    transform: translateY(-10px);
+  }
+
+  .outright-event-card:hover .league,
+  .outright-event-card:hover .meta {
+    opacity: 0;
+  }
+
+  .outright-event-card:hover .saishi {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  .outright-event-card:hover .quick-bet-panel {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+}
+
+.card-clickable-area {
   display: flex;
   align-items: center;
   gap: 12px;
-  width: 100%;
   padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-card);
-  text-align: left;
-  transition: border-color 0.2s, background 0.2s;
-}
-
-.outright-event-card:hover {
-  border-color: var(--border-active);
+  cursor: pointer;
+  flex: 1;
+  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .card-main {
@@ -76,6 +170,11 @@ const isSettled = computed(
   font-weight: 800;
   color: var(--primary-light);
   line-height: 1.35;
+  transition: color 0.2s;
+}
+
+.outright-event-card:hover .title {
+  color: var(--primary);
 }
 
 .settled-tag {
@@ -87,18 +186,19 @@ const isSettled = computed(
   padding: 1px 7px;
 }
 
-.league {
-  margin: 0;
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
+.league,
 .meta {
   margin: 0;
   font-size: 11px;
   font-weight: 600;
-  color: #666;
+  color: var(--text-muted);
+  transition: opacity 0.15s ease;
+}
+
+.league {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .saishi {
@@ -108,5 +208,106 @@ const isSettled = computed(
   max-width: 40px;
   object-fit: contain;
   opacity: 0.85;
+  transition: transform 0.25s ease, opacity 0.2s ease;
+}
+
+.quick-bet-panel {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(12px);
+  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 5;
+}
+
+.quick-bet-title {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.quick-bet-hint {
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: none;
+  letter-spacing: 0;
+  margin-left: 1px;
+}
+
+.odds-row {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.odds-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: 1px;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  min-height: 32px;
+  transition: all 0.2s ease;
+}
+
+.odds-btn:hover {
+  background: rgba(0, 102, 204, 0.08);
+  border-color: var(--border-active);
+}
+
+.selection-name {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.odds-btn:hover .selection-name {
+  color: var(--text);
+}
+
+.selection-odds {
+  font-size: 11px;
+  font-weight: 900;
+  color: var(--primary);
+  line-height: 1.1;
+}
+
+.view-all-btn {
+  align-self: flex-end;
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--primary-light);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 0;
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+
+.view-all-btn:hover {
+  opacity: 1;
 }
 </style>

apps/player/src/components/match-detail/MarketSelectionsPanel.vue

@@ -1,7 +1,9 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { resolveSelectionLabel } from '../../utils/selectionLabel';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
+
 
 const props = defineProps<{
   selections: {
@@ -13,9 +15,9 @@ const props = defineProps<{
   }[];
   isSelected: (id: string) => boolean;
   compact?: boolean;
-  /** PC 行内横排：左标签右赔率，适合详情页全宽行 */
+  /** PC 琛屽唴妯帓锛氬乏鏍囩鍙宠禂鐜囷紝閫傚悎璇︽儏椤靛叏瀹借 */
   horizontal?: boolean;
-  /** PC 卡片内：上标签下赔率，列数随选项数量 */
+  /** PC 鍗＄墖鍐咃細涓婃爣绛句笅璧旂巼锛屽垪鏁伴殢閫夐」鏁伴噺 */
   desktopCard?: boolean;
   locked?: boolean;
   lineValue?: string | number | null;
@@ -23,6 +25,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{ pick: [id: string, event?: MouseEvent] }>();
 const { t } = useI18n();
+const { cancelClose } = useDesktopBetPopover();
 
 function label(sel: (typeof props.selections)[number]) {
   if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
@@ -53,7 +56,7 @@ const panelStyle = computed(() =>
 </script>
 
 <template>
-  <div class="wrap" :class="{ compact, horizontal, desktopCard, locked }">
+  <div class="wrap" :class="{ compact, horizontal, desktopCard, locked }" @mouseenter="cancelClose">
     <div
       class="panel"
       :class="{ horizontal, 'desktop-card': desktopCard }"
@@ -67,6 +70,7 @@ const panelStyle = computed(() =>
         :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
         :data-bet-selection-id="sel.id"
         :disabled="locked"
+        @mouseenter="onPick(sel.id, $event)"
         @click="onPick(sel.id, $event)"
       >
         <span class="label">{{ label(sel) }}</span>
@@ -147,14 +151,14 @@ const panelStyle = computed(() =>
 }
 
 .panel.desktop-card .odds-btn {
-  min-height: 38px;
-  padding: 4px 6px;
-  gap: 2px;
+  min-height: 34px;
+  padding: 3px 4px;
+  gap: 1px;
 }
 
 .panel.desktop-card .odds-btn .label {
-  font-size: 9px;
-  line-height: 1.2;
+  font-size: 8px;
+  line-height: 1.15;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -162,7 +166,7 @@ const panelStyle = computed(() =>
 }
 
 .panel.desktop-card .odds-btn .odds {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 1.1;
 }
 

apps/player/src/composables/useDesktopBetPopover.ts

@@ -5,27 +5,80 @@ const visible = ref(false);
 const anchorX = ref(0);
 const anchorY = ref(0);
 const pendingItem = ref<SlipItem | null>(null);
+const activeCardRootId = ref<string | null>(null);
+const placement = ref<'top' | 'bottom'>('bottom');
+let closeTimer: number | undefined;
 
 export function useDesktopBetPopover() {
   function openAt(event: MouseEvent, item: SlipItem) {
+    cancelClose();
+
+    const el = (event.currentTarget || event.target) as HTMLElement;
+    const btn = el?.closest?.('button') || el;
+    const rect = btn?.getBoundingClientRect?.();
+    if (!rect) return;
+
+    const popW = 172;
+    const popH = 155;
     const pad = 12;
-    const popW = 300;
-    const popH = 320;
-    let x = event.clientX + pad;
-    let y = event.clientY + pad;
+
+    const btnCenterX = rect.left + rect.width / 2;
+    let x = btnCenterX - popW / 2;
+
+    let y = rect.bottom + pad;
+    placement.value = 'bottom';
+
     if (typeof window !== 'undefined') {
-      x = Math.min(x, window.innerWidth - popW - pad);
-      y = Math.min(y, window.innerHeight - popH - pad);
+      const spaceBelow = window.innerHeight - rect.bottom;
+      if (spaceBelow < popH + pad) {
+        y = rect.top - popH - pad;
+        placement.value = 'top';
+      }
+
+      x = Math.max(pad, Math.min(x, window.innerWidth - popW - pad));
+      y = Math.max(pad, Math.min(y, window.innerHeight - popH - pad));
     }
-    anchorX.value = Math.max(pad, x);
-    anchorY.value = Math.max(pad, y);
+
+    anchorX.value = x;
+    anchorY.value = y;
     pendingItem.value = item;
+    const root = el?.closest?.('[data-bet-card-root]') as HTMLElement | null;
+    activeCardRootId.value = root?.dataset.betCardRoot ?? null;
     visible.value = true;
   }
 
   function close() {
     visible.value = false;
     pendingItem.value = null;
+    activeCardRootId.value = null;
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+
+  function scheduleClose(delay = 200) {
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+    }
+    closeTimer = window.setTimeout(() => {
+      visible.value = false;
+      pendingItem.value = null;
+      activeCardRootId.value = null;
+      closeTimer = undefined;
+    }, delay);
+  }
+
+  function cancelClose() {
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+
+  function isActiveForCard(cardRootId: string | null | undefined) {
+    if (!cardRootId || !visible.value || !pendingItem.value) return false;
+    return activeCardRootId.value === cardRootId;
   }
 
   return {
@@ -33,7 +86,12 @@ export function useDesktopBetPopover() {
     anchorX,
     anchorY,
     pendingItem,
+    activeCardRootId,
+    placement,
     openAt,
     close,
+    scheduleClose,
+    cancelClose,
+    isActiveForCard,
   };
 }

apps/player/src/i18n/en-US.ts

@@ -32,6 +32,9 @@ export default {
   nav: { home: 'Home', sports: 'Sports', football: 'Football', bet: 'Bet', bet_history: 'History', wallet: 'Transactions', my_wallet: 'My Wallet', account_hub: 'Bets & Wallet', profile: 'Profile', search: 'Search teams, leagues…', announcements: 'Announcements', sports_more_soon: 'More sports coming soon' },
   home: {
     hot_matches: 'Hot matches',
+    section_featured: 'Featured',
+    section_upcoming: 'Upcoming',
+    sidebar_recommend: 'Recommended',
     hot_tab: 'Hot',
     upcoming_tab: 'Upcoming',
     no_matches: 'No matches',
@@ -405,12 +408,14 @@ export default {
     filter_league: 'Leagues',
     filter_market: 'Markets',
     time_all: 'All',
+    all: 'All',
     time_today: 'Today',
     time_early: 'Early',
     market_all: 'All markets',
     market_handicap_ou: 'Handicap / O-U',
     correct_score: 'Correct score',
     no_markets: 'No markets available',
+    no_market_odds: 'No odds available',
     no_markets_filtered: 'No markets match the current filter',
     popover_title: 'Confirm bet',
     place_now: 'Bet now',
@@ -453,6 +458,9 @@ export default {
     outright_load_more: 'Load more',
     outright_settled: 'Settled',
     outright_settled_hint: 'This event is settled. Odds and results are view-only.',
+    quick_bet: 'Quick bet',
+    popular_teams: 'Popular teams',
+    outright_view_all: 'View all teams',
     cancel: 'Cancel',
     parlay_max_legs: 'Parlay allows up to 5 legs',
     parlay_block_outright: 'Outright cannot be parlayed',

apps/player/src/i18n/ms-MY.ts

@@ -45,6 +45,9 @@ export default {
   },
   home: {
     hot_matches: 'Perlawanan popular',
+    section_featured: 'Perlawanan utama',
+    section_upcoming: 'Akan bermula',
+    sidebar_recommend: 'Disyorkan',
     hot_tab: 'Popular',
     upcoming_tab: 'Terdekat',
     no_matches: 'Tiada perlawanan',
@@ -418,12 +421,14 @@ export default {
     filter_league: 'Liga',
     filter_market: 'Pasaran',
     time_all: 'Semua',
+    all: 'Semua',
     time_today: 'Hari ini',
     time_early: 'Awal',
     market_all: 'Semua pasaran',
     market_handicap_ou: 'Handicap / O-U',
     correct_score: 'Skor tepat',
     no_markets: 'Tiada pasaran tersedia',
+    no_market_odds: 'Tiada odds tersedia',
     no_markets_filtered: 'Tiada pasaran sepadan dengan penapis semasa',
     popover_title: 'Sahkan pertaruhan',
     place_now: 'Pertaruhan sekarang',
@@ -466,6 +471,9 @@ export default {
     outright_load_more: 'Muat lagi',
     outright_settled: 'Selesai',
     outright_settled_hint: 'Acara ini telah diselesaikan. Hanya paparan odds dan keputusan.',
+    quick_bet: 'Pertaruhan pantas',
+    popular_teams: 'Pasukan popular',
+    outright_view_all: 'Lihat semua pasukan',
     cancel: 'Batal',
     parlay_max_legs: 'Maksimum 5 pilihan parlay',
     parlay_block_outright: 'Outright tidak boleh parlay',

apps/player/src/i18n/zh-CN.ts

@@ -32,6 +32,9 @@ export default {
   nav: { home: '主页', sports: '体育赛事', football: '足球', bet: '投注', bet_history: '历史投注', wallet: '资金明细', my_wallet: '我的钱包', account_hub: '投注账单', profile: '我的', search: '搜索球队、联赛…', announcements: '公告', sports_more_soon: '更多体育，敬请期待' },
   home: {
     hot_matches: '热门赛事',
+    section_featured: '焦点赛事',
+    section_upcoming: '即将开赛',
+    sidebar_recommend: '推荐赛事',
     hot_tab: '热门',
     upcoming_tab: '近期',
     no_matches: '暂无赛事',
@@ -405,12 +408,14 @@ export default {
     filter_league: '联赛',
     filter_market: '玩法筛选',
     time_all: '全部',
+    all: '全部',
     time_today: '今天',
     time_early: '早盘',
     market_all: '所有盘口',
     market_handicap_ou: '让球 / 大小',
     correct_score: '波胆',
     no_markets: '暂无可用盘口',
+    no_market_odds: '暂无盘口赔率',
     no_markets_filtered: '当前筛选下暂无盘口',
     popover_title: '确认投注',
     place_now: '立即下注',
@@ -453,6 +458,9 @@ export default {
     outright_load_more: '加载更多',
     outright_settled: '已结算',
     outright_settled_hint: '本赛事已结算，仅可查看赔率与冠军结果',
+    quick_bet: '快速下注',
+    popular_teams: '热门队伍',
+    outright_view_all: '查看全部队伍',
     cancel: '取消',
     parlay_max_legs: '串关最多 5 项',
     parlay_block_outright: '冠军盘不可串关',

apps/player/src/stores/betSlip.ts

@@ -255,7 +255,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
   function addToSingleCart(item: SlipItem) {
     mode.value = 'single';
     if (singleCartItems.value.some((i) => i.selectionId === item.selectionId)) return;
-    singleCartItems.value.push(item);
+    singleCartItems.value.unshift(item);
     initItemStake(item.selectionId);
     lastParlayError.value = null;
   }
@@ -298,7 +298,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
       return 'MAX_LEGS';
     }
 
-    parlayItems.value.push(item);
+    parlayItems.value.unshift(item);
     lastParlayError.value = null;
     return null;
   }

apps/player/src/views/MobileFootballView.vue

@@ -282,7 +282,6 @@ function goMatch(id: string) {
         :class="{ active: mainTab === 'matches', 'tab-gold-active': mainTab === 'matches' }"
         @click="selectMainTab('matches')"
       >
-        <span class="tab-icon">⚽</span>
         {{ t('bet.tab_matches') }}
       </button>
       <button
@@ -291,7 +290,6 @@ function goMatch(id: string) {
         :class="{ active: mainTab === 'outright', 'tab-gold-active': mainTab === 'outright' }"
         @click="selectMainTab('outright')"
       >
-        <span class="tab-icon">🏆</span>
         {{ t('bet.tab_outright') }}
       </button>
     </div>
@@ -494,11 +492,6 @@ function goMatch(id: string) {
   color: var(--primary-light);
 }
 
-.tab-icon {
-  font-size: 16px;
-  line-height: 1;
-}
-
 .filters-bar {
   display: flex;
   align-items: center;

apps/player/src/views/desktop/DesktopFootballView.vue

@@ -11,6 +11,9 @@ import {
   isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
   isInLocalTodayMatchWindow as isInTodayMatchWindow,
 } from '@thebet365/shared';
+import { useAuthStore } from '../../stores/auth';
+import type { OutrightEvent, OutrightSelection } from '../../components/outright/OutrightEventSection.vue';
+import OutrightBetModal, { type OutrightPick } from '../../components/outright/OutrightBetModal.vue';
 
 type MainTab = 'matches' | 'outright';
 
@@ -102,6 +105,22 @@ const leagueGroups = computed(() => {
   return Object.values(groups).sort((a, b) => a.leagueName.localeCompare(b.leagueName));
 });
 
+const filteredOutrightEvents = computed(() => {
+  if (mainTab.value !== 'outright') return [];
+  const keyword = searchQuery.value.trim().toLowerCase();
+  return outrightEvents.value.filter((e) => {
+    if (keyword) {
+      const haystack = `${e.title} ${e.leagueName || ''}`.toLowerCase();
+      if (!haystack.includes(keyword)) return false;
+    }
+    if (filterState.value.leagueIds.length > 0) {
+      const id = e.leagueId ?? e.leagueName;
+      if (!filterState.value.leagueIds.includes(id)) return false;
+    }
+    return true;
+  });
+});
+
 function goMatch(id: string) {
   router.push(`/match/${id}`);
 }
@@ -110,6 +129,32 @@ function goOutright(id: string) {
   router.push(`/outright/${id}`);
 }
 
+const auth = useAuthStore();
+const modalOpen = ref(false);
+const activePick = ref<OutrightPick | null>(null);
+
+function openBet(event: OutrightEvent, sel: OutrightSelection) {
+  if (event.bettingOpen === false || event.status === 'SETTLED') return;
+  if (!auth.token) {
+    auth.showLoginPrompt(route.fullPath);
+    return;
+  }
+  activePick.value = {
+    selectionId: sel.id,
+    oddsVersion: sel.oddsVersion,
+    teamCode: sel.teamCode,
+    teamName: sel.teamName,
+    odds: sel.odds,
+    eventTitle: event.title,
+  };
+  modalOpen.value = true;
+}
+
+function closeModal() {
+  modalOpen.value = false;
+  activePick.value = null;
+}
+
 async function refresh() {
   if (mainTab.value === 'outright') {
     await loadOutrights({ silent: false });
@@ -131,7 +176,7 @@ void loadParlayMatches(true);
           :class="{ active: mainTab === 'matches' }"
           @click="setMainTab('matches')"
         >
-          ⚽ {{ t('bet.tab_matches') }}
+          {{ t('bet.tab_matches') }}
         </button>
         <button
           type="button"
@@ -139,7 +184,7 @@ void loadParlayMatches(true);
           :class="{ active: mainTab === 'outright' }"
           @click="setMainTab('outright')"
         >
-          🏆 {{ t('bet.tab_outright') }}
+          {{ t('bet.tab_outright') }}
         </button>
       </div>
       <button
@@ -179,25 +224,26 @@ void loadParlayMatches(true);
     </div>
 
     <div v-else class="outright-panel-wrap">
-      <div v-if="outrightLoading && !outrightEvents.length" class="skeleton-container">
+      <div v-if="outrightLoading && !filteredOutrightEvents.length" class="skeleton-container">
         <div v-for="i in 4" :key="i" class="skeleton-card desktop-skeleton"></div>
       </div>
 
-      <template v-else-if="outrightEvents.length">
-        <p v-if="outrightEvents.length > 1" class="outright-summary">
+      <template v-else-if="filteredOutrightEvents.length">
+        <p v-if="filteredOutrightEvents.length > 1" class="outright-summary">
           {{
             t('bet.outright_events_summary', {
-              events: outrightEvents.length,
-              teams: outrightEvents.reduce((n, e) => n + e.selections.length, 0),
+              events: filteredOutrightEvents.length,
+              teams: filteredOutrightEvents.reduce((n, e) => n + e.selections.length, 0),
             })
           }}
         </p>
         <div class="outright-event-grid">
           <DesktopOutrightEventCard
-            v-for="event in outrightEvents"
+            v-for="event in filteredOutrightEvents"
             :key="event.id"
             :event="event"
             @open="goOutright(event.id)"
+            @pick="(sel) => openBet(event, sel)"
           />
         </div>
       </template>
@@ -207,6 +253,8 @@ void loadParlayMatches(true);
         <p v-if="!outrightError" class="empty-hint">{{ t('bet.no_outright_hint') }}</p>
       </div>
     </div>
+
+    <OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
   </div>
 </template>
 

apps/player/src/views/desktop/DesktopHomeView.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+<script setup lang="ts">
+import { onMounted, computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import DesktopBanner3DCarousel from '../../components/desktop/DesktopBanner3DCarousel.vue';
 import HomeAnnouncementCard from '../../components/HomeAnnouncementCard.vue';
+import AnnouncementMarquee from '../../components/AnnouncementMarquee.vue';
 import { usePlayerHome } from '../../composables/usePlayerHome';
 import TeamEmblem from '../../components/TeamEmblem.vue';
 import GoldSpinner from '../../components/GoldSpinner.vue';
@@ -18,23 +19,67 @@ import MarketSelectionsPanel from '../../components/match-detail/MarketSelection
 const { t, locale } = useI18n();
 const router = useRouter();
 const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
-const activeFeaturedIndex = ref(0);
 
 const slip = useBetSlipStore();
 const auth = useAuthStore();
-const { openAt } = useDesktopBetPopover();
+const { openAt, visible: popoverVisible, pendingItem, cancelClose, scheduleClose, isActiveForCard } = useDesktopBetPopover();
 
 const activeMarketTypes = ref<Record<string, string>>({});
 
+const bannerFallbackTo = computed(() => {
+  const id = announcementItems.value[0]?.id;
+  return id ? `/announcements/${id}` : '/announcements';
+});
+
+const featuredMatch = computed<PlayerHomeMatch | null>(() => hotMatches.value[0] ?? null);
+const restHotMatches = computed<PlayerHomeMatch[]>(() => hotMatches.value.slice(1));
+const upcomingList = computed<PlayerHomeMatch[]>(() => upcomingMatches.value);
+const sideRecommendMatches = computed<PlayerHomeMatch[]>(() => hotMatches.value.slice(1, 5));
+
+const marqueeItems = computed<string[]>(() =>
+  announcementItems.value
+    .map((it) => it.translation?.title?.trim() || '')
+    .filter((s): s is string => Boolean(s)),
+);
+
+
+onMounted(() => {
+  void load(true);
+});
+
+function goMatch(id: string) {
+  router.push(`/match/${id}`);
+}
+
+function goPath(path: string) {
+  router.push(path);
+}
+
+function formatKickoff(startTime: string) {
+  return formatLocalMatchDateTime(startTime, locale.value, {
+    variant: 'compact',
+    includeTimeZone: false,
+  });
+}
+
+function pickQuickBetMarkets(markets: PlayerHomeMatch['markets']) {
+  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
+  const byType = new Map<string, NonNullable<PlayerHomeMatch['markets']>[number]>();
+  for (const m of markets ?? []) {
+    if (!supported.includes(m.marketType)) continue;
+    if (!Array.isArray(m.selections) || m.selections.length === 0) continue;
+    if (!byType.has(m.marketType)) byType.set(m.marketType, m);
+  }
+  return supported.map((type) => byType.get(type)).filter(Boolean) as NonNullable<PlayerHomeMatch['markets']>;
+}
+
 function getActiveMarketType(match: PlayerHomeMatch) {
   const matchId = match.id;
-  if (activeMarketTypes.value[matchId]) {
-    return activeMarketTypes.value[matchId];
-  }
-  if (match.markets?.some(m => m.marketType === 'FT_1X2')) {
-    return 'FT_1X2';
-  }
-  return match.markets?.[0]?.marketType || 'FT_1X2';
+  const available = pickQuickBetMarkets(match.markets);
+  const saved = activeMarketTypes.value[matchId];
+  if (saved && available.some((m) => m.marketType === saved)) return saved;
+  if (available.some((m) => m.marketType === 'FT_1X2')) return 'FT_1X2';
+  return available[0]?.marketType ?? 'FT_1X2';
 }
 
 function setActiveMarketType(matchId: string, marketType: string) {
@@ -42,13 +87,22 @@ function setActiveMarketType(matchId: string, marketType: string) {
 }
 
 function getAvailableMarketsForMatch(match: PlayerHomeMatch) {
-  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
-  return (match.markets ?? []).filter(m => supported.includes(m.marketType));
+  return pickQuickBetMarkets(match.markets);
 }
 
 function getActiveMarket(match: PlayerHomeMatch) {
   const activeType = getActiveMarketType(match);
-  return match.markets?.find(m => m.marketType === activeType);
+  return pickQuickBetMarkets(match.markets).find((m) => m.marketType === activeType);
+}
+
+function getMarketTabLabel(type: string) {
+  const raw = (() => {
+    if (type === 'FT_1X2') return t('bet.market_ft_1x2');
+    if (type === 'FT_HANDICAP') return t('bet.market_ft_handicap');
+    if (type === 'FT_OVER_UNDER') return t('bet.market_ft_ou');
+    return type;
+  })();
+  return raw.replace(/鍏ㄥ満\s*|FT\s*|Penuh\s*/ig, '').trim();
 }
 
 function isMarketLocked(match: PlayerHomeMatch, market?: { status: string; allowSingle?: boolean; allowParlay?: boolean }) {
@@ -60,17 +114,7 @@ function isMarketLocked(match: PlayerHomeMatch, market?: { status: string; allow
 }
 
 function isSelected(id: string) {
-  return slip.isInSlip(id);
-}
-
-function getMarketTabLabel(type: string) {
-  const raw = (() => {
-    if (type === 'FT_1X2') return t('bet.market_ft_1x2');
-    if (type === 'FT_HANDICAP') return t('bet.market_ft_handicap');
-    if (type === 'FT_OVER_UNDER') return t('bet.market_ft_ou');
-    return type;
-  })();
-  return raw.replace(/全场\s*|FT\s*|Penuh\s*/ig, '').trim();
+  return false;
 }
 
 function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, event?: MouseEvent) {
@@ -81,7 +125,7 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
   }
   const sel = market.selections?.find((s: any) => s.id === selId);
   if (!sel || !event) return;
-  
+
   const item = {
     selectionId: sel.id,
     oddsVersion: String(sel.oddsVersion),
@@ -98,239 +142,322 @@ function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, eve
     allowSingle: market.allowSingle,
     allowParlay: market.allowParlay,
   };
-  
+
   openAt(event, item);
 }
+function getSelLabel(sel: any, marketType: string, lineValue?: string | number | null) {
+  return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
+}
 
-let rotateInterval: number | undefined;
-
-function startFeaturedRotation() {
-  stopFeaturedRotation();
-  if (hotMatches.value.length > 1) {
-    rotateInterval = window.setInterval(() => {
-      activeFeaturedIndex.value = (activeFeaturedIndex.value + 1) % hotMatches.value.length;
-    }, 4500);
+function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: string) {
+  if (!match || !popoverVisible.value || !pendingItem.value) return '';
+  if (!isActiveForCard(cardRootId)) return '';
+  if (String(pendingItem.value.matchId) !== String(match.id)) return '';
+  
+  const selId = pendingItem.value.selectionId;
+  // Scan all markets across all tabs to find the selection
+  for (const market of match.markets ?? []) {
+    const sel = market.selections?.find((s: any) => s.id === selId);
+    if (!sel) continue;
+    const code = (sel.selectionCode || '').toUpperCase();
+    if (code === 'HOME') return 'home';
+    if (code === 'AWAY') return 'away';
+    if (code === 'DRAW') return 'draw';
+    if (code === 'OVER') return 'home';
+    if (code === 'UNDER') return 'away';
+    if (code === 'ODD' || code === 'EVEN') return 'draw';
+    // Fallback: use selection index
+    const selIndex = market.selections?.findIndex((s: any) => s.id === selId) ?? -1;
+    if (selIndex === -1) continue;
+    if (market.marketType === 'FT_1X2') {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'draw';
+      if (selIndex === 2) return 'away';
+    } else {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'away';
+    }
   }
-}
-
-function stopFeaturedRotation() {
-  if (rotateInterval) {
-    window.clearInterval(rotateInterval);
-    rotateInterval = undefined;
-  }
-}
-
-watch(() => hotMatches.value.length, () => {
-  activeFeaturedIndex.value = 0;
-  startFeaturedRotation();
-});
-
-const bannerFallbackTo = computed(() => {
-  const id = announcementItems.value[0]?.id;
-  return id ? `/announcements/${id}` : '/announcements';
-});
-
-const displayedMatches = computed<PlayerHomeMatch[]>(() => upcomingMatches.value);
-
-const emptyMessage = computed(() => t('home.upcoming_empty'));
-
-onMounted(() => {
-  void load(true);
-  startFeaturedRotation();
-});
-
-onUnmounted(stopFeaturedRotation);
-
-function goMatch(id: string) {
-  router.push(`/match/${id}`);
-}
-
-function formatKickoff(startTime: string) {
-  return formatLocalMatchDateTime(startTime, locale.value, {
-    variant: 'compact',
-    includeTimeZone: false
-  });
-}
-
-function setFeaturedIndex(index: number) {
-  activeFeaturedIndex.value = index;
-  startFeaturedRotation();
+  return '';
 }
 </script>
 
 <template>
   <div class="desktop-home-view">
-    <section class="hero-banner-full">
-      <DesktopBanner3DCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
+    <!-- [B] Hero Row: 3D Banner -->
+    <section class="hero-row anim-fade-up" style="--anim-delay:0ms">
+      <div class="hero-banner-full">
+        <DesktopBanner3DCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
+      </div>
     </section>
 
-    <section class="quick-bento" @mouseenter="stopFeaturedRotation" @mouseleave="startFeaturedRotation">
-      <div class="bento-item bento-item--large bento-item--featured-carousel">
-        <div v-if="hotMatches.length" class="bento-header-row fixed-header">
-          <span class="featured-tag">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="14" height="14" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-            {{ t('home.hot_matches') }}
-          </span>
-          <span class="bento-badge">HOT</span>
-        </div>
+    <!-- [C] 璺戦┈鐏噾鑹叉潯锛堜粎鍦ㄦ湁鏁版嵁鏃跺睍绀猴級 -->
+    <div v-if="marqueeItems.length" class="home-marquee-strip anim-fade-up" style="--anim-delay:80ms">
+      <AnnouncementMarquee :items="marqueeItems" embedded />
+    </div>
 
-        <div class="carousel-viewport">
-          <div
-            class="carousel-track"
-            :style="{ transform: `translateX(-${activeFeaturedIndex * 100}%)` }"
-          >
-            <template v-if="hotMatches.length">
+    <!-- [D] 涓诲尯: 宸︿富鍐呭 + 鍙充晶鏍?-->
+    <div class="main-row">
+      <div class="main-col">
+        <!-- [D1] 鐒︾偣璧涗簨 -->
+        <section class="content-section anim-fade-up" style="--anim-delay:160ms">
+          <div class="section-title">
+            <span class="st-line st-line-animated" aria-hidden="true"></span>
+            <span class="st-text">{{ t('home.section_featured') }}</span>
+          </div>
+
+          <div v-if="loading && !hotMatches.length" class="loading-state">
+            <GoldSpinner :active="true" />
+          </div>
+
+          <template v-else-if="featuredMatch">
+            <!-- 鐒︾偣澶у崱 -->
+            <div
+              class="featured-match anim-fade-up"
+              :class="{ 'featured-match--engaged': isActiveForCard(`featured-${featuredMatch.id}`) }"
+              :data-bet-card-root="`featured-${featuredMatch.id}`"
+              style="--anim-delay:240ms"
+              @click.self="goMatch(featuredMatch.id)"
+              @mouseenter="cancelClose"
+              @mouseleave="scheduleClose()"
+            >
+              <div class="featured-top" @click="goMatch(featuredMatch.id)">
+                <div class="featured-meta">
+                  <span class="league-tag lg">{{ featuredMatch.leagueName }}</span>
+                  <span
+                    v-if="(featuredMatch as any).status === 'LIVE'"
+                    class="live-indicator lg live-pulse"
+                  >LIVE</span>
+                </div>
+                <span class="featured-time">{{ formatKickoff(featuredMatch.startTime) }}</span>
+              </div>
+
+              <div class="featured-teams" :class="getHoveredSideForMatch(featuredMatch, `featured-${featuredMatch.id}`)" @click="goMatch(featuredMatch.id)">
+                <div class="featured-team">
+                  <TeamEmblem
+                    size="lg"
+                    :team-code="featuredMatch.homeTeamCode"
+                    :team-name="featuredMatch.homeTeamName"
+                    :logo-url="featuredMatch.homeTeamLogoUrl"
+                  />
+                  <span class="featured-team-name">{{ featuredMatch.homeTeamName }}</span>
+                </div>
+                <div class="featured-vs vs-heartbeat">VS</div>
+                <div class="featured-team">
+                  <TeamEmblem
+                    size="lg"
+                    :team-code="featuredMatch.awayTeamCode"
+                    :team-name="featuredMatch.awayTeamName"
+                    :logo-url="featuredMatch.awayTeamLogoUrl"
+                  />
+                  <span class="featured-team-name">{{ featuredMatch.awayTeamName }}</span>
+                </div>
+              </div>
+
+              <div class="featured-markets">
+                <div
+                  v-for="m in getAvailableMarketsForMatch(featuredMatch)"
+                  :key="m.marketType"
+                  class="featured-market-block"
+                >
+                  <div class="featured-market-label">{{ getMarketTabLabel(m.marketType) }}</div>
+                  <MarketSelectionsPanel
+                    desktop-card
+                    compact
+                    :locked="isMarketLocked(featuredMatch, m)"
+                    :line-value="m.lineValue"
+                    :selections="m.selections || []"
+                    :is-selected="isSelected"
+                    @pick="(selId, ev) => handleOddsClick(featuredMatch!, m, selId, ev)"
+                  />
+                </div>
+                <div v-if="!getAvailableMarketsForMatch(featuredMatch).length" class="no-market-odds">
+                  {{ t('bet.no_market_odds') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 鍏朵綑鐑棬 2 鍒?-->
+            <div v-if="restHotMatches.length" class="matches-grid">
               <div
-                v-for="match in hotMatches"
+                v-for="(match, idx) in restHotMatches"
                 :key="match.id"
-                class="carousel-slide clickable"
-                @click="goMatch(match.id)"
+                class="match-card anim-fade-up"
+                :class="{ 'match-card--engaged': isActiveForCard(`hot-${match.id}`) }"
+                :data-bet-card-root="`hot-${match.id}`"
+                :style="{ '--anim-delay': (320 + idx * 60) + 'ms' }"
+                @mouseenter="cancelClose"
+                @mouseleave="scheduleClose()"
               >
-                <div class="bento-content--vertical">
-                  <div class="bento-header-row placeholder-header" aria-hidden="true">
-                    <span class="featured-tag">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="14" height="14" class="tag-icon"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                      {{ t('home.hot_matches') }}
-                    </span>
-                    <span class="bento-badge">HOT</span>
+                <div class="match-info-side" @click="goMatch(match.id)">
+                  <!-- Default info layout (visible at rest) -->
+                  <div class="default-info-layout">
+                    <div class="card-top">
+                      <span class="league-tag">{{ match.leagueName }}</span>
+                      <div class="top-meta">
+                        <span class="live-indicator live-pulse" v-if="(match as any).status === 'LIVE'">LIVE</span>
+                        <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
+                      </div>
+                    </div>
+                    <div class="teams-versus-compact">
+                      <div class="team-row">
+                        <TeamEmblem
+                          size="sm"
+                          :team-code="match.homeTeamCode"
+                          :team-name="match.homeTeamName"
+                          :logo-url="match.homeTeamLogoUrl"
+                        />
+                        <span class="team-name">{{ match.homeTeamName }}</span>
+                      </div>
+                      <div class="vs-text">VS</div>
+                      <div class="team-row">
+                        <TeamEmblem
+                          size="sm"
+                          :team-code="match.awayTeamCode"
+                          :team-name="match.awayTeamName"
+                          :logo-url="match.awayTeamLogoUrl"
+                        />
+                        <span class="team-name">{{ match.awayTeamName }}</span>
+                      </div>
+                    </div>
                   </div>
 
-                  <div class="featured-vs-area">
-                    <div class="featured-team">
+                  <!-- Hover versus layout (visible on hover) -->
+                  <div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `hot-${match.id}`)">
+                    <div class="hover-team home-slide">
                       <TeamEmblem
                         size="md"
                         :team-code="match.homeTeamCode"
                         :team-name="match.homeTeamName"
                         :logo-url="match.homeTeamLogoUrl"
                       />
-                      <span class="featured-team-name">{{ match.homeTeamName }}</span>
+                      <span class="hover-team-name">{{ match.homeTeamName }}</span>
                     </div>
-                    <span class="featured-vs">VS</span>
-                    <div class="featured-team">
+                    <div class="hover-vs-glow">VS</div>
+                    <div class="hover-team away-slide">
                       <TeamEmblem
                         size="md"
                         :team-code="match.awayTeamCode"
                         :team-name="match.awayTeamName"
                         :logo-url="match.awayTeamLogoUrl"
                       />
-                      <span class="featured-team-name">{{ match.awayTeamName }}</span>
+                      <span class="hover-team-name">{{ match.awayTeamName }}</span>
                     </div>
                   </div>
-
-                  <div class="featured-footer">
-                    <span class="featured-time">{{ formatKickoff(match.startTime) }}</span>
-                    <span class="featured-action-btn">{{ t('announcements.go_link') }} ›</span>
+                </div>
+                <div class="match-market-side">
+                  <div class="market-tabs">
+                    <button
+                      v-for="m in getAvailableMarketsForMatch(match)"
+                      :key="m.marketType"
+                      type="button"
+                      class="market-tab-btn"
+                      :class="{ active: getActiveMarketType(match) === m.marketType }"
+                      @click="setActiveMarketType(match.id, m.marketType)"
+                    >
+                      {{ getMarketTabLabel(m.marketType) }}
+                    </button>
+                  </div>
+                  <div class="market-odds-area">
+                    <template v-if="getActiveMarket(match)">
+                      <MarketSelectionsPanel
+                        desktop-card
+                        compact
+                        :locked="isMarketLocked(match, getActiveMarket(match))"
+                        :line-value="getActiveMarket(match)?.lineValue"
+                        :selections="getActiveMarket(match)?.selections || []"
+                        :is-selected="isSelected"
+                        @pick="(selId, ev) => handleOddsClick(match, getActiveMarket(match)!, selId, ev)"
+                      />
+                    </template>
+                    <div v-else class="no-market-odds">
+                      {{ t('bet.no_market_odds') }}
+                    </div>
                   </div>
                 </div>
               </div>
-            </template>
-
-            <div v-else class="carousel-slide clickable" @click="router.push('/bet')">
-              <div class="bento-content--vertical">
-                <div class="bento-header-row">
-                  <span class="bento-icon bento-icon--bet">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" width="24" height="24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
-                  </span>
-                  <span class="bento-badge">HOT</span>
-                </div>
-                <div class="bento-text">
-                  <span class="bento-title bento-title--lg">{{ t('nav.bet') }}</span>
-                  <span class="bento-desc">{{ t('home.bento_desc') }}</span>
-                </div>
-              </div>
             </div>
+          </template>
+
+          <div v-else class="empty-state">
+            <p>{{ t('home.no_matches') }}</p>
           </div>
-        </div>
+        </section>
 
-        <div v-if="hotMatches.length > 1" class="carousel-dots">
-          <button
-            v-for="(_, i) in hotMatches"
-            :key="i"
-            type="button"
-            class="carousel-dot"
-            :class="{ active: i === activeFeaturedIndex }"
-            :aria-label="`${i + 1}`"
-            @click="setFeaturedIndex(i)"
-          />
-        </div>
-      </div>
+        <!-- [D2] 鍗冲皢寮€璧?-->
+        <section class="content-section anim-fade-up" style="--anim-delay:200ms">
+          <div class="section-title">
+            <span class="st-line" aria-hidden="true"></span>
+            <span class="st-text">{{ t('home.section_upcoming') }}</span>
+          </div>
 
-      <button type="button" class="bento-item bento-item--small" @click="router.push('/wallet/recharge')">
-        <span class="bento-icon bento-icon--recharge">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M12 15h4"/></svg>
-        </span>
-        <span class="bento-title bento-title--sm">{{ t('recharge.title') }}</span>
-      </button>
+          <div v-if="upcomingList.length" class="matches-grid">
+            <div
+              v-for="(match, idx) in upcomingList"
+              :key="match.id"
+              class="match-card anim-fade-up"
+              :class="{ 'match-card--engaged': isActiveForCard(`upcoming-${match.id}`) }"
+              :data-bet-card-root="`upcoming-${match.id}`"
+              :style="{ '--anim-delay': (260 + idx * 50) + 'ms' }"
+              @mouseenter="cancelClose"
+              @mouseleave="scheduleClose()"
+            >
+               <div class="match-info-side" @click="goMatch(match.id)">
+                 <!-- Default info layout (visible at rest) -->
+                 <div class="default-info-layout">
+                   <div class="card-top">
+                     <span class="league-tag">{{ match.leagueName }}</span>
+                     <div class="top-meta">
+                       <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
+                     </div>
+                   </div>
+                   <div class="teams-versus-compact">
+                     <div class="team-row">
+                       <TeamEmblem
+                         size="sm"
+                         :team-code="match.homeTeamCode"
+                         :team-name="match.homeTeamName"
+                         :logo-url="match.homeTeamLogoUrl"
+                       />
+                       <span class="team-name">{{ match.homeTeamName }}</span>
+                     </div>
+                     <div class="vs-text">VS</div>
+                     <div class="team-row">
+                       <TeamEmblem
+                         size="sm"
+                         :team-code="match.awayTeamCode"
+                         :team-name="match.awayTeamName"
+                         :logo-url="match.awayTeamLogoUrl"
+                       />
+                       <span class="team-name">{{ match.awayTeamName }}</span>
+                     </div>
+                   </div>
+                 </div>
 
-      <button type="button" class="bento-item bento-item--small" @click="router.push('/bets')">
-        <span class="bento-icon bento-icon--history">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
-            <path d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" stroke-linejoin="round"/>
-            <path d="M8 9h8M8 12.5h8M8 16h5" stroke-linecap="round"/>
-          </svg>
-        </span>
-        <span class="bento-title bento-title--sm">{{ t('home.view_bet_history') }}</span>
-      </button>
-    </section>
-
-    <div class="content-row">
-      <div class="matches-hub">
-        <div class="hub-header">
-          <h2 class="section-title">{{ t('home.upcoming_tab') }}</h2>
-          <button type="button" class="refresh-btn" :disabled="loading" @click="load(true)">
-            <span v-if="loading" class="spin">↻</span>
-            <span v-else>↻ {{ t('bet.refresh') || '刷新' }}</span>
-          </button>
-        </div>
-
-        <!-- Loading State -->
-        <div v-if="loading && !displayedMatches.length" class="loading-state">
-          <GoldSpinner :active="true" />
-        </div>
-
-        <!-- Matches Grid -->
-        <div v-else-if="displayedMatches.length" class="matches-grid">
-          <div
-            v-for="match in displayedMatches"
-            :key="match.id"
-            class="match-card"
-          >
-            <!-- Left Side: Match Details (Clickable to go to match details page) -->
-            <div class="match-info-side" @click="goMatch(match.id)">
-              <div class="card-top">
-                <span class="league-tag">{{ match.leagueName }}</span>
-                <div class="top-meta">
-                  <span class="live-indicator" v-if="(match as any).status === 'LIVE'">LIVE</span>
-                  <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
-                </div>
-              </div>
-
-              <div class="teams-versus-compact">
-                <div class="team-row">
-                  <TeamEmblem
-                    size="sm"
-                    :team-code="match.homeTeamCode"
-                    :team-name="match.homeTeamName"
-                    :logo-url="match.homeTeamLogoUrl"
-                  />
-                  <span class="team-name">{{ match.homeTeamName }}</span>
-                </div>
-                <div class="vs-text">VS</div>
-                <div class="team-row">
-                  <TeamEmblem
-                    size="sm"
-                    :team-code="match.awayTeamCode"
-                    :team-name="match.awayTeamName"
-                    :logo-url="match.awayTeamLogoUrl"
-                  />
-                  <span class="team-name">{{ match.awayTeamName }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Right Side: Market Switcher & Selections (For Quick Betting) -->
-            <div class="match-market-side">
-              <template v-if="getAvailableMarketsForMatch(match).length > 0">
+                 <!-- Hover versus layout (visible on hover) -->
+                 <div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `upcoming-${match.id}`)">
+                   <div class="hover-team home-slide">
+                     <TeamEmblem
+                       size="md"
+                       :team-code="match.homeTeamCode"
+                       :team-name="match.homeTeamName"
+                       :logo-url="match.homeTeamLogoUrl"
+                     />
+                     <span class="hover-team-name">{{ match.homeTeamName }}</span>
+                   </div>
+                   <div class="hover-vs-glow">VS</div>
+                   <div class="hover-team away-slide">
+                     <TeamEmblem
+                       size="md"
+                       :team-code="match.awayTeamCode"
+                       :team-name="match.awayTeamName"
+                       :logo-url="match.awayTeamLogoUrl"
+                     />
+                     <span class="hover-team-name">{{ match.awayTeamName }}</span>
+                   </div>
+                 </div>
+               </div>
+              <div class="match-market-side">
                 <div class="market-tabs">
                   <button
                     v-for="m in getAvailableMarketsForMatch(match)"
@@ -338,12 +465,11 @@ function setFeaturedIndex(index: number) {
                     type="button"
                     class="market-tab-btn"
                     :class="{ active: getActiveMarketType(match) === m.marketType }"
-                    @click.stop="setActiveMarketType(match.id, m.marketType)"
+                    @click="setActiveMarketType(match.id, m.marketType)"
                   >
                     {{ getMarketTabLabel(m.marketType) }}
                   </button>
                 </div>
-
                 <div class="market-odds-area">
                   <template v-if="getActiveMarket(match)">
                     <MarketSelectionsPanel
@@ -357,29 +483,82 @@ function setFeaturedIndex(index: number) {
                     />
                   </template>
                   <div v-else class="no-market-odds">
-                    {{ t('bet.market_status_closed') }}
+                    {{ t('bet.no_market_odds') }}
                   </div>
                 </div>
-              </template>
-
-              <!-- Fallback to View Details if no markets available -->
-              <div v-else class="no-markets-fallback">
-                <button type="button" class="go-detail-btn" @click.stop="goMatch(match.id)">
-                  {{ t('bet.view_match') || '查看赛况' }}
-                </button>
               </div>
             </div>
           </div>
-        </div>
-
-        <!-- Empty State -->
-        <div v-else class="empty-state">
-          <p>{{ emptyMessage }}</p>
-        </div>
+          <div v-else-if="!loading" class="empty-state">
+            <p>{{ t('home.upcoming_empty') }}</p>
+          </div>
+        </section>
       </div>
 
-      <aside class="home-sidebar">
+      <!-- 鍙充晶澶氬崱杈规爮 -->
+      <aside class="home-sidebar anim-fade-up" style="--anim-delay:120ms">
         <HomeAnnouncementCard />
+
+        <div v-if="sideRecommendMatches.length" class="side-card">
+          <div class="side-card-header">
+            <span class="side-card-title">{{ t('home.sidebar_recommend') }}</span>
+          </div>
+          <ul class="side-recommend-list">
+            <li
+              v-for="(m, idx) in sideRecommendMatches"
+              :key="m.id"
+              class="side-recommend-item anim-fade-up"
+              :class="{ 'side-recommend-item--engaged': isActiveForCard(`sidebar-${m.id}`) }"
+              :data-bet-card-root="`sidebar-${m.id}`"
+              :style="{ '--anim-delay': (200 + idx * 70) + 'ms' }"
+              @click="goMatch(m.id)"
+              @mouseenter="cancelClose"
+              @mouseleave="scheduleClose()"
+            >
+              <div class="sri-top-row">
+                <span class="sri-league">{{ m.leagueName }}</span>
+                <span class="sri-time">{{ formatKickoff(m.startTime) }}</span>
+              </div>
+              <div class="sri-teams">
+                <span>{{ m.homeTeamName }}</span>
+                <span class="sri-vs">vs</span>
+                <span>{{ m.awayTeamName }}</span>
+              </div>
+
+              <!-- 鎮诞棰勮鍗?-->
+              <div class="sri-preview-card" @click.stop @mouseenter="cancelClose" @mouseleave="scheduleClose()">
+                <div class="sri-preview-top">
+                  <span class="sri-preview-league">{{ m.leagueName }}</span>
+                  <span class="sri-preview-time">{{ formatKickoff(m.startTime) }}</span>
+                </div>
+                <div class="sri-preview-vs" :class="getHoveredSideForMatch(m, `sidebar-${m.id}`)">
+                  <div class="sri-preview-team home-team">
+                    <TeamEmblem size="md" :team-code="m.homeTeamCode" :team-name="m.homeTeamName" :logo-url="m.homeTeamLogoUrl" />
+                    <span>{{ m.homeTeamName }}</span>
+                  </div>
+                  <div class="sri-preview-vs-text">VS</div>
+                  <div class="sri-preview-team away-team">
+                    <TeamEmblem size="md" :team-code="m.awayTeamCode" :team-name="m.awayTeamName" :logo-url="m.awayTeamLogoUrl" />
+                    <span>{{ m.awayTeamName }}</span>
+                  </div>
+                </div>
+                <div v-if="getActiveMarket(m)" class="sri-preview-odds">
+                  <div
+                    v-for="sel in (getActiveMarket(m)?.selections || []).slice(0, 3)"
+                    :key="sel.id"
+                    class="sri-preview-odd-btn"
+                    :class="{ selected: isSelected(sel.id) }"
+                    @click.stop="handleOddsClick(m, getActiveMarket(m)!, sel.id, $event)"
+                  >
+                    <span class="sri-odd-label">{{ getSelLabel(sel, getActiveMarket(m)?.marketType || '', getActiveMarket(m)?.lineValue) }}</span>
+                    <span class="sri-odd-val">{{ sel.odds }}</span>
+                  </div>
+                </div>
+                <div v-else class="sri-preview-no-odds">{{ t('bet.no_markets') }}</div>
+              </div>
+            </li>
+          </ul>
+        </div>
       </aside>
     </div>
   </div>
@@ -389,332 +568,106 @@ function setFeaturedIndex(index: number) {
 .desktop-home-view {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
+  width: 100%;
+}
+
+.hero-row {
+  display: block;
   width: 100%;
 }
 
 .hero-banner-full {
-  width: 100%;
-}
-
-.quick-bento {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr);
-  grid-template-rows: 76px 76px;
-  gap: 12px;
-}
-
-.bento-item {
-  display: flex;
-  align-items: center;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  box-shadow: var(--shadow);
-  cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
-  padding: 14px 16px;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.bento-item:hover {
-  border-color: var(--border-active);
-  box-shadow: var(--shadow-md);
-}
-
-.bento-item--large {
-  grid-row: 1 / 3;
-  height: 100%;
-  background: linear-gradient(135deg, #F3F8FC 0%, #FFFFFF 100%);
-  border-color: rgba(0, 61, 107, 0.15);
-  position: relative;
-  overflow: hidden;
-  padding: 0;
-}
-
-.carousel-viewport {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.carousel-track {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.carousel-slide {
-  flex: 0 0 100%;
-  min-width: 100%;
-  height: 100%;
-  padding: 14px 16px 12px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.carousel-dots {
-  position: absolute;
-  bottom: 10px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-  z-index: 10;
-}
-
-.carousel-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  border: none;
-  padding: 0;
-  background: rgba(0, 61, 107, 0.15);
-  cursor: pointer;
-  transition: background 0.25s, width 0.25s;
-}
-
-.carousel-dot.active {
-  width: 18px;
-  border-radius: 3px;
-  background: var(--primary);
-}
-
-.featured-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--primary);
-  background: rgba(0, 61, 107, 0.06);
-  padding: 4px 8px;
-  border-radius: 6px;
-  line-height: 1;
-}
-
-.tag-icon {
-  color: var(--odds-accent, #F97316);
-}
-
-.featured-vs-area {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-  margin: 10px 0;
-  gap: 12px;
-}
-
-.featured-team {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
   min-width: 0;
 }
 
-.featured-team-name {
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--text);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.featured-vs {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--odds-accent, #F97316);
-  font-style: italic;
-  flex-shrink: 0;
-}
-
-.featured-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  border-top: 1px dashed rgba(0, 61, 107, 0.12);
-  padding-top: 10px;
-  margin-top: 4px;
-}
-
-.featured-time {
-  font-size: 12px;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.featured-action-btn {
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--primary);
-  background: rgba(0, 61, 107, 0.06);
-  padding: 4px 10px;
-  border-radius: 6px;
-  transition: background 0.15s;
-}
-
-.carousel-slide:hover .featured-action-btn {
-  background: rgba(0, 61, 107, 0.12);
-}
-
-.bento-content--vertical {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%;
-}
-
-.bento-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-}
-
-.fixed-header {
-  position: absolute;
-  top: 14px;
-  left: 16px;
-  right: 16px;
-  width: auto;
-  z-index: 20;
-  pointer-events: none;
-}
-
-.placeholder-header {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.bento-badge {
-  font-size: 10px;
-  font-weight: 800;
-  color: #fff;
-  background: var(--odds-accent, #F97316);
-  padding: 3px 7px;
-  border-radius: 4px;
-  letter-spacing: 0.05em;
+.qe-icon {
+  font-size: 24px;
   line-height: 1;
 }
 
-.bento-item--small {
-  flex-direction: row;
-  gap: 12px;
-  justify-content: flex-start;
-  height: 100%;
-}
-
-.bento-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.bento-icon--bet {
-  background: rgba(0, 61, 107, 0.08);
-  color: var(--primary);
-}
-
-.bento-icon--recharge {
-  background: rgba(5, 150, 105, 0.08);
-  color: var(--success);
-}
-
-.bento-icon--history {
-  background: rgba(248, 151, 31, 0.08);
-  color: var(--odds-accent, #E8870A);
-}
-
-.bento-text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.bento-title {
-  font-size: 15px;
-  font-weight: 800;
-  color: var(--text);
-  text-align: left;
-}
-
-.bento-title--sm {
-  font-size: 14px;
+.qe-label {
+  font-size: 12px;
   font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
 }
 
-.bento-title--lg {
-  font-size: 18px;
-  font-weight: 800;
+/* [C] 璺戦┈鐏噾鏉?*/
+.home-marquee-strip {
+  position: relative;
+  height: 34px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: linear-gradient(90deg,
+    rgba(0, 102, 204, 0.02),
+    rgba(0, 102, 204, 0.14),
+    rgba(0, 102, 204, 0.02));
+  border: 1px solid var(--border-gold-soft);
+  display: flex;
+  align-items: stretch; /* let child fill full height */
+  padding: 0;           /* no padding 鈥?child spans edge to edge */
+  box-shadow: inset 0 0 12px rgba(0, 102, 204, 0.08);
 }
 
-.bento-desc {
-  font-size: 13px;
-  color: var(--text-muted);
-  font-weight: 500;
+/* force the embedded button to fill the strip completely */
+.home-marquee-strip :deep(.marquee-bar.embedded) {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 12px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
-.content-row {
+/* [D] Main Row */
+.main-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
+  grid-template-columns: minmax(0, 1fr) 320px;
   gap: 16px;
   align-items: start;
 }
 
-.home-sidebar {
+.main-col {
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.home-sidebar :deep(.home-announce-card) {
-  border-radius: 12px;
-}
-
-.matches-hub {
+.content-section {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.hub-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 20px;
-  padding-bottom: 10px;
+  border-radius: 12px;
+  padding: 16px 18px;
 }
 
+/* section-title 閲戠嚎 */
 .section-title {
-  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.st-line {
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--primary), var(--primary-light));
+  box-shadow: 0 0 8px rgba(0, 102, 204, 0.35);
+}
+
+.st-text {
   font-size: 15px;
   font-weight: 800;
-  color: var(--primary);
-  padding-left: 10px;
-  border-left: 3px solid var(--primary);
-  line-height: 1.3;
+  color: var(--text);
+  letter-spacing: 0.5px;
 }
 
-.refresh-btn {
+.st-refresh {
+  margin-left: auto;
   background: transparent;
   color: var(--primary-light);
   font-size: 12px;
@@ -722,6 +675,12 @@ function setFeaturedIndex(index: number) {
   display: flex;
   align-items: center;
   gap: 4px;
+  cursor: pointer;
+}
+
+.st-refresh:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .spin {
@@ -738,14 +697,138 @@ function setFeaturedIndex(index: number) {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 200px;
+  min-height: 160px;
   color: var(--text-muted);
 }
 
+/* Featured 鐒︾偣澶у崱 */
+.featured-match {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px 20px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f8fafc 0%, var(--bg-card) 100%);
+  border: 1px solid var(--border-active);
+  box-shadow: 0 2px 12px rgba(0, 61, 107, 0.08);
+  margin-bottom: 14px;
+  cursor: pointer;
+  transition: box-shadow 0.25s, transform 0.15s;
+  position: relative;
+  overflow: hidden;
+}
+
+.featured-match::before {
+  content: '';
+  position: absolute;
+  top: 0; right: 0;
+  width: 140px; height: 140px;
+  background: radial-gradient(circle at top right, rgba(0, 102, 204, 0.12), transparent 65%);
+  pointer-events: none;
+}
+
+.featured-match:is(:hover, .featured-match--engaged) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(0, 61, 107, 0.15), inset 0 0 20px rgba(0, 102, 204, 0.06);
+}
+
+.featured-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.featured-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.league-tag.lg {
+  font-size: 12px;
+  padding: 3px 8px;
+  max-width: 480px;
+}
+
+.live-indicator.lg {
+  font-size: 11px;
+  padding: 3px 6px;
+}
+
+.featured-time {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.featured-teams {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 0;
+}
+
+.featured-team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.featured-team-name {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--text);
+  text-align: center;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.featured-vs {
+  font-size: 22px;
+  font-weight: 900;
+  font-style: italic;
+  color: var(--odds-accent, #F8971F);
+  text-shadow: 0 0 12px rgba(248, 151, 31, 0.35);
+}
+
+.featured-markets {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin: 10px -20px -18px;
+  padding: 10px 16px 14px;
+  background: #F0F4F8;
+  border-top: 1px solid rgba(0, 102, 204, 0.12);
+}
+
+.featured-market-block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.featured-market-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--primary);
+  text-align: center;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+
+/* 鏅€氳禌浜嬪崱鐗?grid锛? 鍒楋級 */
 .matches-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 10px;
 }
 
 .match-card {
@@ -754,13 +837,14 @@ function setFeaturedIndex(index: number) {
   border: 1px solid var(--border);
   border-radius: 8px;
   overflow: hidden;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  min-height: 76px;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+  min-height: 68px;
 }
 
-.match-card:hover {
+.match-card:is(:hover, .match-card--engaged) {
   border-color: var(--border-active);
   box-shadow: 0 4px 12px rgba(0, 61, 107, 0.08);
+  transform: translateY(-1px);
 }
 
 .match-info-side {
@@ -774,28 +858,34 @@ function setFeaturedIndex(index: number) {
   min-width: 0;
   cursor: pointer;
   background: #FCFDFE;
-  transition: background-color 0.2s;
+  position: relative;
+  overflow: hidden;
 }
 
-.match-info-side:hover {
+.match-info-side > * {
+  position: relative;
+  z-index: 1;
+}
+
+.match-card:is(:hover, .match-card--engaged) .match-info-side {
   background: var(--bg-hover);
 }
 
 .match-market-side {
-  width: 290px;
+  width: 220px;
   flex-shrink: 0;
-  padding: 8px 10px;
+  padding: 6px 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 4px;
+  gap: 3px;
   background: var(--bg-card);
 }
 
 .card-top {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   min-width: 0;
 }
@@ -812,14 +902,16 @@ function setFeaturedIndex(index: number) {
   font-weight: 700;
   color: var(--primary-light);
   background: rgba(0, 102, 204, 0.08);
-  padding: 1px 4px;
+  padding: 1px 6px;
   border-radius: 3px;
-  max-width: 120px;
+  max-width: 100%;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  display: inline-block;
   flex: 1;
   min-width: 0;
+  line-height: 1.2;
 }
 
 .live-indicator {
@@ -909,36 +1001,611 @@ function setFeaturedIndex(index: number) {
   align-items: center;
   justify-content: center;
   width: 100%;
+  min-height: 0;
 }
 
 .no-market-odds {
-  font-size: 10px;
+  font-size: 9px;
   color: var(--text-muted);
   text-align: center;
+  padding: 2px 4px;
+  line-height: 1.3;
 }
 
-.no-markets-fallback {
+/* 鍙充晶鏍?*/
+.home-sidebar {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.home-sidebar :deep(.home-announce-card) {
+  border-radius: 12px;
+}
+
+.side-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+}
+
+.side-card-header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.side-card-title {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  letter-spacing: 0.3px;
+}
+
+.side-recommend-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.side-recommend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.side-recommend-item:hover {
+  background: var(--bg-hover);
+}
+
+.sri-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.sri-league {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--primary-light);
+  background: var(--border-gold-soft);
+  padding: 1px 4px;
+  border-radius: 3px;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sri-teams {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sri-vs {
+  color: var(--text-muted);
+  font-size: 9px;
+  font-weight: 600;
+  font-style: italic;
+}
+
+.sri-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* @media 鍗曞垪鍥為€€ */
+@media (max-width: 1100px) {
+  .main-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .matches-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .featured-markets {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .featured-team-name {
+    font-size: 15px;
+  }
+}
+
+/* ============================================================
+   鉁?ANIMATION SYSTEM
+   ============================================================ */
+
+/* --- 1. 閫氱敤鍏ュ満锛歠ade + slide-up --- */
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.anim-fade-up {
+  opacity: 0;
+  animation: fadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: var(--anim-delay, 0ms);
+}
+
+/* --- 2. 榛勯噾鍏夋檿鍛煎惛鑴夊啿锛堢劍鐐瑰ぇ鍗?::before锛?--- */
+@keyframes goldGlowPulse {
+  0%, 100% {
+    opacity: 0.18;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.32;
+    transform: scale(1.15);
+  }
+}
+
+.featured-match::before {
+  animation: goldGlowPulse 3.5s ease-in-out infinite;
+  transform-origin: top right;
+}
+
+/* --- 3. VS 蹇冭烦 --- */
+@keyframes vsHeartbeat {
+  0%, 100% { transform: scale(1); }
+  14%       { transform: scale(1.12); }
+  28%       { transform: scale(1); }
+  42%       { transform: scale(1.06); }
+  56%       { transform: scale(1); }
+}
+
+.vs-heartbeat {
+  animation: vsHeartbeat 2.8s ease-in-out infinite;
+  display: inline-block;
+}
+
+/* --- 4. LIVE 鑴夊啿闂儊 --- */
+@keyframes livePulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
+  50%       { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
+}
+
+.live-pulse {
+  animation: livePulse 1.6s ease-out infinite;
+}
+
+/* --- 5. section 鏍囬閲戠嚎婊戝叆 --- */
+@keyframes lineSlideIn {
+  from { transform: scaleY(0); opacity: 0; }
+  to   { transform: scaleY(1); opacity: 1; }
+}
+
+.st-line-animated {
+  transform-origin: top center;
+  animation: lineSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
+}
+
+/* --- 6. 璧涗簨鍗＄墖锛氶紶鏍囩Щ鍔ㄥ埌鍗＄墖涓婃椂涓ゅ彧闃熶紞灞呬腑涓斿嚭鐜?VS 缁忓吀鍔ㄧ敾 --- */
+.default-info-layout {
+  width: 100%;
+  transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.match-card:is(:hover, .match-card--engaged) .default-info-layout {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  pointer-events: none;
+}
+
+.hover-versus-layout {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  gap: 20px;
+  padding: 8px 16px;
+  opacity: 0;
+  transform: translateY(8px) scale(0.95);
+  transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
+  pointer-events: none;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 8px 0 0 8px;
 }
 
-.go-detail-btn {
-  padding: 4px 12px;
-  border-radius: 4px;
-  border: 1px solid var(--border-active);
-  background: transparent;
-  color: var(--primary-light);
+.match-card:is(:hover, .match-card--engaged) .hover-versus-layout {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+.hover-team.home-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  transform: translateX(-35px);
+  opacity: 0;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, opacity 0.4s ease 0.05s;
+  min-width: 0;
+  flex: 1;
+}
+
+.match-card:is(:hover, .match-card--engaged) .hover-team.home-slide {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.hover-team.away-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  transform: translateX(35px);
+  opacity: 0;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, opacity 0.4s ease 0.05s;
+  min-width: 0;
+  flex: 1;
+}
+
+.match-card:is(:hover, .match-card--engaged) .hover-team.away-slide {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.hover-team-name {
   font-size: 11px;
   font-weight: 700;
-  transition: all 0.2s;
-  cursor: pointer;
+  color: var(--text);
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.go-detail-btn:hover {
-  background: var(--primary);
-  color: #FFFFFF;
+.hover-vs-glow {
+  font-size: 18px;
+  font-weight: 900;
+  font-style: italic;
+  color: var(--odds-accent, #F8971F);
+  transform: scale(2.8);
+  opacity: 0;
+  text-shadow:
+    0 0 10px rgba(248, 151, 31, 0.5),
+    0 0 20px rgba(248, 151, 31, 0.25);
+  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, opacity 0.3s ease 0.1s;
+  flex-shrink: 0;
+}
+
+.match-card:is(:hover, .match-card--engaged) .hover-vs-glow {
+  transform: scale(1);
+  opacity: 1;
+  animation: vs-clash-impact 0.3s ease-out 0.35s;
+}
+
+@keyframes vs-clash-impact {
+  0% {
+    text-shadow: 0 0 25px rgba(248, 151, 31, 0.7);
+    transform: scale(1.25);
+  }
+  100% {
+    text-shadow: 0 0 8px rgba(248, 151, 31, 0.4);
+    transform: scale(1);
+  }
+}
+
+/* --- 7. 渚ф爮鍗＄墖鏁翠綋 hover 涓婃诞 --- */
+.side-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.side-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 61, 107, 0.1);
+}
+
+/* --- 8. 鎺ㄨ崘鍒楄〃 item 宸︿晶閲戠偣鎸囩ず hover --- */
+.side-recommend-item {
+  position: relative;
+  transition: background 0.18s, transform 0.18s;
+}
+
+.side-recommend-item:hover {
+  background: rgba(0, 102, 204, 0.06);
+  transform: translateX(3px);
+}
+
+/* 榧犳爣绉诲姩閫氶亾妗ユ帴妗ワ紙闃叉鍦ㄩ棿闅欏涓㈠けhover鐘舵€侊紝楂樺害闄愬埗涓烘帹鑽愰」楂樺害锛岄槻姝㈤噸鍙犻敊璇級 */
+.side-recommend-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -20px;
+  width: 20px;
+  background: transparent;
+  pointer-events: auto;
+}
+
+/* --- 9. 鎺ㄨ崘璧涗簨鎮诞棰勮鍗?--- */
+.sri-preview-card {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 6px);
+  transform: translateY(-50%) translateX(8px);
+  width: 210px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-active);
+  border-radius: 8px;
+  padding: 8px 10px;
+  box-shadow: 0 6px 24px rgba(0, 61, 107, 0.12), 0 0 12px rgba(0, 102, 204, 0.06);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.side-recommend-item:is(:hover, .side-recommend-item--engaged) .sri-preview-card {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+  pointer-events: auto;
+}
+
+.sri-preview-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sri-preview-league {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--primary-light);
+  background: var(--border-gold-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sri-preview-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.sri-preview-vs {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sri-preview-team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  min-width: 0;
+  opacity: 0;
+  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.sri-preview-team.home-team {
+  transform: translateX(-24px);
+}
+
+.sri-preview-team.away-team {
+  transform: translateX(24px);
+}
+
+.side-recommend-item:hover .sri-preview-team {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.sri-preview-team span {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text);
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sri-preview-vs-text {
+  font-size: 16px;
+  font-weight: 900;
+  font-style: italic;
+  color: var(--odds-accent, #F8971F);
+  text-shadow: 0 0 8px rgba(248, 151, 31, 0.35);
+  flex-shrink: 0;
+  opacity: 0;
+  transform: scale(2.2);
+  transition: opacity 0.3s ease 0.1s, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
+}
+
+.side-recommend-item:hover .sri-preview-vs-text {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.sri-preview-odds {
+  display: flex;
+  gap: 5px;
+}
+
+.sri-preview-odd-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 5px 4px;
+  border-radius: 6px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.sri-preview-odd-btn:hover {
+  background: rgba(0, 102, 204, 0.08);
+  border-color: var(--border-active);
+}
+
+.sri-preview-odd-btn.selected {
+  background: rgba(0, 61, 107, 0.08);
   border-color: var(--primary);
 }
+
+.sri-odd-label {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.sri-odd-val {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--odds-accent, #F8971F);
+}
+
+.sri-preview-no-odds {
+  text-align: center;
+  font-size: 9px;
+  color: var(--text-muted);
+  padding: 4px 0;
+}
+
+/* --- Sri preview: team highlight on odds selection --- */
+.sri-preview-team {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
+}
+
+.sri-preview-vs.home .sri-preview-team.home-team {
+  transform: translateX(0) scale(1.1) !important;
+  filter: brightness(1.3) saturate(1.2);
+  opacity: 1 !important;
+}
+.sri-preview-vs.home .sri-preview-team.away-team {
+  opacity: 0.35 !important;
+  transform: translateX(0) scale(0.92) !important;
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.sri-preview-vs.away .sri-preview-team.away-team {
+  transform: translateX(0) scale(1.1) !important;
+  filter: brightness(1.3) saturate(1.2);
+  opacity: 1 !important;
+}
+.sri-preview-vs.away .sri-preview-team.home-team {
+  opacity: 0.35 !important;
+  transform: translateX(0) scale(0.92) !important;
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.sri-preview-vs.draw .sri-preview-team {
+  transform: translateX(0) scale(1.05) !important;
+  filter: brightness(1.15) saturate(1.1);
+  opacity: 1 !important;
+}
+
+/* --- VS Selection Highlight: scale selected team, no VS animation --- */
+.featured-team,
+.hover-team {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
+}
+
+/* featured match (home) */
+.featured-teams.home .featured-team:first-child {
+  transform: scale(1.08);
+  filter: brightness(1.3) saturate(1.2);
+}
+.featured-teams.home .featured-team:last-child {
+  opacity: 0.35;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+/* featured match (away) */
+.featured-teams.away .featured-team:last-child {
+  transform: scale(1.08);
+  filter: brightness(1.3) saturate(1.2);
+}
+.featured-teams.away .featured-team:first-child {
+  opacity: 0.35;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+/* featured match (draw) */
+.featured-teams.draw .featured-team {
+  transform: scale(1.05);
+  filter: brightness(1.15) saturate(1.1);
+}
+
+/* hover-versus-layout (sidebar/upcoming) */
+.hover-versus-layout.home .hover-team.home-slide {
+  transform: scale(1.08);
+  filter: brightness(1.3) saturate(1.2);
+  z-index: 2;
+}
+.hover-versus-layout.home .hover-team.away-slide {
+  opacity: 0.35 !important;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+.hover-versus-layout.away .hover-team.away-slide {
+  transform: scale(1.08);
+  filter: brightness(1.3) saturate(1.2);
+  z-index: 2;
+}
+.hover-versus-layout.away .hover-team.home-slide {
+  opacity: 0.35 !important;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+.hover-versus-layout.draw .hover-team.home-slide,
+.hover-versus-layout.draw .hover-team.away-slide {
+  transform: scale(1.05);
+  filter: brightness(1.15) saturate(1.1);
+}
 </style>

apps/player/src/views/desktop/DesktopMatchDetailView.vue

@@ -23,7 +23,7 @@ const router = useRouter();
 const { t, locale } = useI18n();
 const slip = useBetSlipStore();
 const auth = useAuthStore();
-const { openAt, visible: popoverVisible, pendingItem: popoverItem } = useDesktopBetPopover();
+const { openAt, visible: popoverVisible, pendingItem: popoverItem, cancelClose, scheduleClose } = useDesktopBetPopover();
 const { pendingLocate, clearLocate } = useDesktopBetLocate();
 
 function goBack() {
@@ -299,6 +299,35 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
   if (!item || !event) return;
   openAt(event, item);
 }
+
+function getHoveredSide() {
+  if (!match.value || !popoverVisible.value || !popoverItem.value) return '';
+  if (String(popoverItem.value.matchId) !== String(match.value.id)) return '';
+
+  const selId = popoverItem.value.selectionId;
+  for (const market of allMarkets.value) {
+    const sel = market.selections?.find((s) => s.id === selId);
+    if (!sel) continue;
+    const code = (sel.selectionCode || '').toUpperCase();
+    if (code === 'HOME') return 'home';
+    if (code === 'AWAY') return 'away';
+    if (code === 'DRAW') return 'draw';
+    if (code === 'OVER') return 'home';
+    if (code === 'UNDER') return 'away';
+    if (code === 'ODD' || code === 'EVEN') return 'draw';
+    const selIndex = market.selections?.findIndex((s) => s.id === selId) ?? -1;
+    if (selIndex === -1) continue;
+    if (market.marketType === 'FT_1X2') {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'draw';
+      if (selIndex === 2) return 'away';
+    } else {
+      if (selIndex === 0) return 'home';
+      if (selIndex === 1) return 'away';
+    }
+  }
+  return '';
+}
 </script>
 
 <template>
@@ -318,7 +347,12 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
 
     <template v-else-if="match">
       <!-- High Density Score Band -->
-      <div class="match-score-band" :class="{ 'phase-settled': matchPhase === 'settled' }">
+      <div
+        class="match-score-band"
+        :class="[{ 'phase-settled': matchPhase === 'settled' }, getHoveredSide()]"
+        @mouseenter="cancelClose"
+        @mouseleave="scheduleClose()"
+      >
         <div class="team-side home">
           <TeamEmblem size="xl" :team-code="match.homeTeamCode" :team-name="match.homeTeamName" :logo-url="match.homeTeamLogoUrl" />
           <span class="name">{{ match.homeTeamName }}</span>
@@ -382,6 +416,8 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
           :key="market.id"
           class="market-card"
           :class="{ locked: isMarketLocked(market) }"
+          @mouseenter="cancelClose"
+          @mouseleave="scheduleClose()"
         >
           <div class="market-hdr">
             <span class="market-title">{{ marketLabel(market) }}</span>
@@ -410,6 +446,8 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
             :key="market.id"
             class="score-block"
             :class="{ locked: isMarketLocked(market) }"
+            @mouseenter="cancelClose"
+            @mouseleave="scheduleClose()"
           >
             <div class="score-block-hdr">
               <span>{{ marketLabel(market) }}</span>
@@ -768,4 +806,35 @@ function toggleSelection(sel: Selection, market: Market, event?: MouseEvent) {
   font-weight: 700;
   white-space: nowrap;
 }
+
+.team-side {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
+}
+
+.match-score-band.home .team-side.home {
+  transform: scale(1.06);
+  filter: brightness(1.08) saturate(1.15);
+}
+
+.match-score-band.home .team-side.away {
+  opacity: 0.35;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.match-score-band.away .team-side.away {
+  transform: scale(1.06);
+  filter: brightness(1.08) saturate(1.15);
+}
+
+.match-score-band.away .team-side.home {
+  opacity: 0.35;
+  transform: scale(0.94);
+  filter: grayscale(0.6) brightness(0.7);
+}
+
+.match-score-band.draw .team-side {
+  transform: scale(1.04);
+  filter: brightness(1.08) saturate(1.1);
+}
 </style>