feat: initialize Annual Gala Interactive System monorepo

- Set up pnpm workspace with 4 packages: shared, server, client-mobile, client-screen
- Implement Redis atomic voting with Lua scripts (HINCRBY + distributed lock)
- Add optimistic UI with IndexedDB queue for offline resilience
- Configure Socket.io with auto-reconnection (infinite retries)
- Separate mobile (Vant) and big screen (Pixi.js) dependencies

Tech stack:
- Frontend Mobile: Vue 3 + Vant + Socket.io-client
- Frontend Screen: Vue 3 + Pixi.js + GSAP
- Backend: Express + Socket.io + Redis + Prisma/MySQL

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/client-screen/src/assets/styles/global.scss

@@ -0,0 +1,86 @@
+@import './variables.scss';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: $color-bg-dark;
+  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  color: $color-text-light;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Gold gradient text
+.gold-text {
+  background: linear-gradient(135deg, $color-gold-light 0%, $color-gold 50%, $color-gold-dark 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+// Red glow text
+.glow-text {
+  text-shadow: $glow-red;
+}
+
+// Gold glow text
+.gold-glow-text {
+  text-shadow: $glow-gold;
+}
+
+// Decorative border
+.guochao-frame {
+  border: 2px solid $color-gold;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border: 2px solid $color-gold;
+  }
+
+  &::before {
+    top: -10px;
+    left: -10px;
+    border-right: none;
+    border-bottom: none;
+  }
+
+  &::after {
+    bottom: -10px;
+    right: -10px;
+    border-left: none;
+    border-top: none;
+  }
+}
+
+// Animation keyframes
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { opacity: 1; filter: brightness(1); }
+  50% { opacity: 0.8; filter: brightness(1.2); }
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes scale-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+}

packages/client-screen/src/assets/styles/variables.scss

@@ -0,0 +1,27 @@
+// Guochao Red & Gold Theme for Big Screen
+
+// Primary colors
+$color-primary: #c41230;
+$color-primary-light: #e8384f;
+$color-primary-dark: #9a0e26;
+
+$color-gold: #d4a84b;
+$color-gold-light: #f0c96a;
+$color-gold-dark: #b8923f;
+
+// Background
+$color-bg-dark: #0a0a0a;
+$color-bg-gradient: linear-gradient(180deg, #1a0a0a 0%, #0a0a0a 50%, #0a0510 100%);
+
+// Text
+$color-text-light: #ffffff;
+$color-text-muted: rgba(255, 255, 255, 0.6);
+
+// Glow effects
+$glow-red: 0 0 20px rgba($color-primary, 0.5), 0 0 40px rgba($color-primary, 0.3);
+$glow-gold: 0 0 20px rgba($color-gold, 0.5), 0 0 40px rgba($color-gold, 0.3);
+
+// Animations
+$transition-fast: 0.2s ease;
+$transition-normal: 0.4s ease;
+$transition-slow: 0.8s ease;