Flip7 Design System

### Confetti (Victory Page)

• 8 pieces with varied sizes (10-20rpx), shapes (rect/circle), and colors from the full card palette

• Fall animation 3.2-4.5s with rotation and horizontal sway

• Staggered delays for natural feel

### Victory Page Background (Champion Entrance)

• Base layer: multi-stop linear gradient from bright gold (#FFEA8F) → deep amber (#EEA91B) → dark orange (#CC6F17) → teal (#1E8C86)

• Layered overlay animations: two animated background layers blending spotlight beams and radial heat glows with opacity transitions — avoids abrupt gradient cuts

• Pseudo-element ::before: animated spotlight radial gradient drifts over the top area (7.5s alternate)

• Pseudo-element ::after: two coral side-glows + center burst, drifts slowly (10s alternate)

### Sunburst (Victory Page — Behind Winner Card)

The sunburst sits absolutely behind the winner card and consists of three nested layers (760×760rpx, centered at the winner area):

• Outer ring: 16 rays, rotating clockwise at 22s. Long rays (odd indices) are 54×410rpx, short rays (even indices) are 38×300rpx — alternating to create a spiky, explosive silhouette. Odd/even rays use separate pulse animations with staggered per-ray delays for a desynchronized shimmer.

• Inner ring: 8 thick rays, rotating counter-clockwise at 11s (opposite direction). Long rays (odd indices) are 108×250rpx, short rays (even indices) are 72×185rpx. All share a pulse animation with alternating duration (2.15s / 3.05s) and per-ray delays for a breathing, chaotic center glow.

• Core: Soft radial-gradient white blur circle at the center for a glowing origin point.

• All rays use a triangle clip-path, bottom-center transform origin, and rotational positioning for precise angular placement.

• The whole sunburst element also breathes (scale 1 → 1.04, opacity 0.7 → 1, 6s).

### Winner Card (Victory Page)

White card with gold-foil visual treatment:

• Faint warm gradient background (#FFFDF4 → #FFF9E8)

• Two diagonal foil sheen overlays (left-top and right-bottom) using clipped linear gradients

• Gradient border: gold → coral → teal (3rpx solid)

• Top thin highlight line (1px gold at rgba(255,240,160,0.70))

• Champion pill badge centered on the card top edge, gold gradient fill with dark-brown text

• Winner avatar: 38px radius, gold gradient ring, radial glow halo

• Score number uses coral-to-dark-orange gradient fill

### Poster Generation (Victory Page)

Triggered by the share/save button. Renders an offscreen poster at 750×1380px:

• Rounded corners: entire poster is clipped on a 48px corner-radius rect before any drawing — gives the saved image natural rounded corners

• Background: same champion-entrance gradient + spotlight + heat glows + diagonal beam shafts, drawn via Canvas 2D gradients

• Sunburst: 16 outer rays (long/short alternating) + 8 inner rays (long/short alternating), drawn as filled triangles to match the page animation's visual style (static snapshot)

• Winner card: gold-foil card with diagonal sheen overlays, gradient border, "🏆" gold badge, avatar with gold ring, name, score (coral gradient), "🎉" label

• Rankings: uniform clean rows for all other players; 🥈/🥉 emoji for 2nd/3rd; personal color avatars

• Emotional tagline: one of several rotating celebratory phrases rendered in bold white below the ranking list, preceded by a gradient divider line

• Brand watermark: small semi-transparent text at the bottom

### Share (All Pages)

• Setup / Game / ScoreDetail pages: Share action returns a random title from a pool of generic share phrases; path always opens the setup page

• Victory page: uses a separate pool of app-invitation phrases; path also opens the setup page

• An explicit share button is shown on the Setup page and Victory page in the UI

### Crown Bounce (Victory)

• 1.5s ease-in-out infinite

• 4-step keyframe: translateY + scale + subtle left/right rotation (-3deg to 3deg)

• Gold drop-shadow filter for warmth

### Glow Pulse (Winner Card)

• 2s ease-in-out infinite

• Opacity oscillates 0.5 to 1.0

• Scale oscillates 1.0 to 1.03

• Multi-color gradient: gold + coral + teal

### BOOM Pulse

• 2s ease-in-out infinite

• Border color pulses between coral and coral-light

• Subtle shadow intensity oscillation

### Sparkle Effect (Victory)

• Small star shapes using CSS

• Scale and opacity animation (1.5s)

• Scattered around winner card

---