feat: redesign Big Screen voting view with philatelic postcard UI

- Add PostcardItem.vue component with Chinese postal aesthetics
- Add PostcardGrid.vue container with 4x2 CSS Grid layout
- Add Postmark.vue component for real-time vote stamp visualization
- Update LiveVotingView.vue with cream paper theme (#FDFBF7)
- Add Year of the Horse 2026 stamp image
- Add responsive breakpoints for different screen sizes
- Enhance admin service with program voting control
- Add vote stamp accumulation for big screen display

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

packages/client-screen/src/components/PostcardGrid.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import PostcardItem from './PostcardItem.vue';
+import type { VotingProgram } from '@gala/shared/types';
+
+interface Props {
+  programs: VotingProgram[];
+  columns?: number;
+  rows?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 4,
+  rows: 2,
+});
+
+// Calculate visible programs based on grid size
+const maxVisible = computed(() => props.columns * props.rows);
+
+const visiblePrograms = computed(() => {
+  return props.programs.slice(0, maxVisible.value);
+});
+
+// Refs for postcard items (for stamp animation targeting)
+const postcardRefs = ref<Map<string, InstanceType<typeof PostcardItem>>>(new Map());
+
+function setPostcardRef(id: string, el: any) {
+  if (el) {
+    postcardRefs.value.set(id, el);
+  } else {
+    postcardRefs.value.delete(id);
+  }
+}
+
+// Get stamp target element for a specific program
+function getStampTarget(programId: string): HTMLElement | null {
+  const postcard = postcardRefs.value.get(programId);
+  return postcard?.stampTargetRef || null;
+}
+
+// Expose for parent component (animation system)
+defineExpose({
+  getStampTarget,
+  postcardRefs,
+});
+</script>
+
+<template>
+  <div
+    class="postcard-grid"
+    :style="{
+      '--columns': columns,
+      '--rows': rows,
+    }"
+  >
+    <PostcardItem
+      v-for="program in visiblePrograms"
+      :key="program.id"
+      :ref="(el) => setPostcardRef(program.id, el)"
+      :id="program.id"
+      :name="program.name"
+      :team-name="program.teamName"
+      :order="program.order"
+      :votes="program.votes"
+      :stamps="program.stamps"
+      class="grid-item"
+    />
+
+    <!-- Empty slots for incomplete grid -->
+    <div
+      v-for="n in Math.max(0, maxVisible - visiblePrograms.length)"
+      :key="`empty-${n}`"
+      class="grid-item empty-slot"
+    >
+      <div class="empty-placeholder">
+        <span class="empty-icon">📮</span>
+        <span class="empty-text">待添加节目</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.postcard-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 4), 1fr);
+  grid-template-rows: repeat(var(--rows, 2), 1fr);
+  gap: 24px;
+  padding: 32px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #FDFBF7;
+
+  // Subtle paper texture for the entire grid background
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  background-blend-mode: overlay;
+
+  // Responsive breakpoints
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    padding: 24px;
+  }
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto;
+    gap: 16px;
+    padding: 16px;
+    overflow-y: auto;
+    height: auto;
+    min-height: 100%;
+  }
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 12px;
+  }
+}
+
+.grid-item {
+  min-width: 0;
+  min-height: 0;
+}
+
+.empty-slot {
+  background: rgba(0, 0, 0, 0.02);
+  border: 2px dashed #ddd;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: #bbb;
+
+  .empty-icon {
+    font-size: 32px;
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 14px;
+    font-family: 'SimSun', 'Songti SC', serif;
+  }
+}
+</style>