feat(player): 新增桌面端 UI 与响应式双端路由架构

- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系
- 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端
- 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌
- 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n
- 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页

apps/player/src/styles/desktop/interaction.css

@@ -0,0 +1,102 @@
+/* Hover Cursors and active resets */
+.desktop-shell a,
+.desktop-shell button,
+.desktop-shell select,
+.desktop-shell [role="button"],
+.desktop-shell .clickable {
+  cursor: pointer;
+  touch-action: auto;
+}
+
+/* Scrollbar customizations */
+.desktop-shell ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.desktop-shell ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+.desktop-shell ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+.desktop-shell ::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-light);
+}
+
+/* Hover highlights */
+.desktop-shell .hover-bg:hover {
+  background-color: var(--bg-hover) !important;
+}
+
+.desktop-shell .hover-gold-soft:hover {
+  border-color: var(--border-gold) !important;
+  box-shadow: var(--glow-gold);
+}
+
+.desktop-shell .hover-gold-text:hover {
+  color: var(--primary-light) !important;
+}
+
+/* Form elements styling */
+.desktop-shell input {
+  padding: 10px 12px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+
+.desktop-shell input:focus {
+  border-color: var(--border-gold) !important;
+  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
+}
+
+/* Button hover overrides */
+.desktop-shell .btn-gold-outline {
+  transition: background-color 0.2s, border-color 0.2s;
+}
+.desktop-shell .btn-gold-outline:hover:not(:disabled) {
+  background: rgba(212, 175, 55, 0.08);
+  border-color: var(--border-gold);
+}
+.desktop-shell .btn-gold-outline:active {
+  transform: none; /* No mobile shrink on PC */
+}
+
+.desktop-shell .btn-primary {
+  transition: filter 0.2s, transform 0.1s;
+}
+.desktop-shell .btn-primary:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+.desktop-shell .btn-primary:active {
+  transform: translateY(1px);
+}
+
+/* Skeleton rows animation for high density PC loaders */
+@keyframes desktop-skeleton-glow {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.desktop-skeleton {
+  background: linear-gradient(90deg, #161616 25%, #222222 37%, #161616 63%);
+  background-size: 400% 100%;
+  animation: desktop-skeleton-glow 1.4s ease infinite;
+}
+
+@keyframes bet-locate-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.45);
+  }
+}
+
+.desktop-shell .bet-locate-flash {
+  animation: bet-locate-pulse 0.6s ease 3;
+  border-color: var(--border-gold) !important;
+  position: relative;
+  z-index: 1;
+}