feat: add card skins support

apps/web/components/faces/vip.tsx

@@ -0,0 +1,129 @@
+import type { CardFaceProps } from "./types";
+
+/** 卡面：黑金 VIP — 深黑底色 + 金色光晕与描边，体现尊贵身份 */
+export function VipFace(_: CardFaceProps) {
+  return (
+    <>
+      {/* 完全覆盖底部 palette，建立黑金底色 */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background: "linear-gradient(135deg, #0f0f0f 0%, #1a1610 40%, #0d0d0d 100%)",
+        }}
+      />
+
+      {/* 金色主光晕：右上角 */}
+      <div
+        className="absolute -right-10 -top-10 size-52 rounded-full opacity-30 blur-3xl"
+        style={{
+          background: "radial-gradient(circle, #d4a843 0%, #9a6f1a 50%, transparent 75%)",
+        }}
+      />
+
+      {/* 金色副光晕：左下角 */}
+      <div
+        className="absolute -bottom-12 -left-6 size-44 rounded-full opacity-20 blur-3xl"
+        style={{
+          background: "radial-gradient(circle, #c49b2e 0%, transparent 70%)",
+        }}
+      />
+
+      {/* 中部横向光带 */}
+      <div
+        className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 opacity-20"
+        style={{
+          background:
+            "linear-gradient(to right, transparent 0%, #d4a843 30%, #f0d060 50%, #d4a843 70%, transparent 100%)",
+        }}
+      />
+
+      {/* 顶部金色高光边 */}
+      <div
+        className="absolute inset-x-0 top-0 h-px"
+        style={{
+          background:
+            "linear-gradient(to right, transparent 5%, #c8992a 30%, #f5d060 50%, #c8992a 70%, transparent 95%)",
+        }}
+      />
+
+      {/* 底部深金色压边 */}
+      <div
+        className="absolute inset-x-0 bottom-0 h-px opacity-50"
+        style={{
+          background:
+            "linear-gradient(to right, transparent 10%, #9a6f1a 40%, #b8881f 60%, transparent 90%)",
+        }}
+      />
+
+      {/* 右侧竖向装饰线 */}
+      <div
+        className="absolute bottom-4 right-5 top-4 w-px opacity-15"
+        style={{
+          background:
+            "linear-gradient(to bottom, transparent, #d4a843 30%, #f0d060 60%, transparent)",
+        }}
+      />
+
+      {/* 细噪点 SVG filter */}
+      <svg className="absolute size-0">
+        <filter id="vip-noise">
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.75"
+            numOctaves="4"
+            stitchTiles="stitch"
+          />
+          <feColorMatrix type="saturate" values="0" />
+          <feBlend in="SourceGraphic" mode="overlay" result="blend" />
+          <feComposite in="blend" in2="SourceGraphic" operator="in" />
+        </filter>
+      </svg>
+
+      {/* 噪点层：增加高端质感 */}
+      <div
+        className="absolute inset-0 opacity-[0.12] mix-blend-overlay"
+        style={{ filter: "url(#vip-noise)" }}
+      />
+
+      {/* 整体金色微光叠层 */}
+      <div
+        className="absolute inset-0 opacity-[0.04]"
+        style={{
+          background: "linear-gradient(120deg, transparent 20%, #d4a843 50%, transparent 80%)",
+        }}
+      />
+
+      {/* 菱形网格纹 */}
+      <div
+        className="absolute inset-0 opacity-[0.06]"
+        style={{
+          backgroundImage:
+            "repeating-linear-gradient(45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px)",
+        }}
+      />
+
+      {/* VIP 大水印文字 */}
+      <div
+        className="pointer-events-none absolute -bottom-4 -left-2 select-none font-black leading-none tracking-widest opacity-[0.07]"
+        style={{
+          fontSize: "84px",
+          color: "#d4a843",
+          fontFamily: "serif",
+          letterSpacing: "0.15em",
+        }}
+      >
+        VIP
+      </div>
+
+      {/* 斜向扫光带 */}
+      <div
+        className="absolute -inset-y-4 w-12 -rotate-12 opacity-[0.08] blur-sm"
+        style={{
+          left: "38%",
+          background:
+            "linear-gradient(to bottom, transparent, #f5d060 30%, #fff8dc 50%, #f5d060 70%, transparent)",
+        }}
+      />
+    </>
+  );
+}