@scalebun-release/react-native 2.5.0

package/src/features/engage/EngageArchetypeRenderers.tsx

@@ -0,0 +1,3705 @@
+/**
+ * ScaleBun SDK — Archetype-specific in-app renderers
+ *
+ * These renderers own mechanic content only. Presentation (modal, sheet, banner,
+ * fullscreen, anchored, or inline) stays in EngageInAppView so one mechanic can
+ * be mounted correctly in every container.
+ *
+ * Implemented archetypes (matching dashboard variant keys):
+ *   spin_wheel          → animated spinning prize wheel
+ *   countdown_offer     → live flip-style countdown clock
+ *   scratch_card        → tap-to-reveal scratch surface
+ *   slot_reward         → three-reel slot machine
+ *   poll_card           → single-choice option list
+ *   nps_prompt          → 0–10 NPS number row
+ *   emoji_reaction_bar  → emoji row picker
+ *   rating_request      → 1–5 star tap rating
+ *   streak_reward       → day-streak dot strip
+ *   checklist_progress  → tick-off checklist
+ *   coupon_wallet       → large coupon reveal chip
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  Image,
+  PanResponder,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  type LayoutChangeEvent,
+  type GestureResponderEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import type { InAppBranchProps } from "./EngageInAppView";
+import type { InAppGameOutcome } from "./engageTypes";
+import {
+  addScratchedCell,
+  boundedInt,
+  clampPage,
+  gradeGameAnswer,
+  resolveSlotOutcome,
+  scoreGameAnswer,
+  scratchCellAt,
+  scratchProgress,
+  toggleGameSelection,
+  wheelTargetAngle,
+} from "./engageGameLogic";
+import { resolveInAppMediaHeight } from "./engageMediaSizing";
+import { inAppOutcomeTerminalForCta } from "./engageOutcome";
+import { requestNativeStoreReview } from "./engageStoreReviewBridge";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+const ext = (props: InAppBranchProps): Record<string, unknown> =>
+  (props.spec.ext as Record<string, unknown>) ?? {};
+const str = (v: unknown): string => (typeof v === "string" ? v : "");
+const num = (v: unknown, fallback: number): number =>
+  typeof v === "number" ? v : fallback;
+const arr = (v: unknown): unknown[] => (Array.isArray(v) ? v : []);
+const record = (v: unknown): Record<string, unknown> =>
+  v !== null && typeof v === "object" && !Array.isArray(v)
+    ? (v as Record<string, unknown>)
+    : {};
+const labelOf = (v: unknown): string => {
+  const value = record(v);
+  return str(value.label ?? value.title ?? value.name ?? value.prompt ?? v);
+};
+const firstText = (
+  source: Record<string, unknown>,
+  keys: readonly string[],
+): string => {
+  for (const key of keys) {
+    const value = str(source[key]);
+    if (value) return value;
+  }
+  return "";
+};
+const variantOf = (props: InAppBranchProps): string =>
+  props.variantKey ||
+  str(
+    (props.spec as InAppBranchProps["spec"] & { variantKey?: unknown })
+      .variantKey,
+  );
+const mediaUri = (value: unknown): string => {
+  const item = record(value);
+  return str(item.uri ?? item.url ?? item.imageUrl ?? item.image ?? value);
+};
+
+const gameUnavailableText = (error: unknown): string => {
+  if (error instanceof Error && error.message) return error.message;
+  return "Result unavailable. Please try again.";
+};
+
+const gameResultLabel = (outcome: InAppGameOutcome | null): string => {
+  if (!outcome) return "";
+  if (outcome.label) return outcome.label;
+  return typeof outcome.value === "string" || typeof outcome.value === "number"
+    ? String(outcome.value)
+    : "";
+};
+
+const presentTerminalOutcome = (
+  props: InAppBranchProps,
+  resultLabel?: string,
+): boolean => {
+  if (!props.onOutcome) return false;
+  props.onOutcome({
+    ...(resultLabel ? { resultLabel } : {}),
+    fallback: inAppOutcomeTerminalForCta(props.spec.cta),
+  });
+  return true;
+};
+
+async function requireGameOutcome(
+  props: InAppBranchProps,
+  attempt = 1,
+  input?: Record<string, unknown>,
+): Promise<InAppGameOutcome> {
+  if (!props.requestGameResult) throw new Error("Game result handler is not configured");
+  const result = await props.requestGameResult(attempt, input);
+  if (result.status === "unavailable") {
+    throw new Error(result.message || "Result unavailable. Please try again.");
+  }
+  return result.outcome;
+}
+
+function useReducedMotion(): boolean | null {
+  const [enabled, setEnabled] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      if (mounted) setEnabled(value);
+    });
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setEnabled,
+    );
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+
+  return enabled;
+}
+
+function Title({
+  text,
+  theme,
+}: {
+  text?: string;
+  theme: InAppBranchProps["theme"];
+}) {
+  if (!text) return null;
+  return <Text style={[sh.title, { color: theme.titleColor }]}>{text}</Text>;
+}
+function Body({
+  text,
+  theme,
+}: {
+  text?: string;
+  theme: InAppBranchProps["theme"];
+}) {
+  if (!text) return null;
+  return <Text style={[sh.body, { color: theme.bodyColor }]}>{text}</Text>;
+}
+function PrimaryBtn({
+  label,
+  accent,
+  onPress,
+  disabled = false,
+}: {
+  label: string;
+  accent: string;
+  onPress: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Pressable
+      style={[
+        sh.primaryBtn,
+        { backgroundColor: accent, opacity: disabled ? 0.65 : 1 },
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+    >
+      <Text style={sh.primaryText}>{label}</Text>
+    </Pressable>
+  );
+}
+function SecondaryBtn({
+  label,
+  onPress,
+  color,
+}: {
+  label: string;
+  onPress: () => void;
+  color: string;
+}) {
+  return (
+    <Pressable
+      style={sh.secondaryBtn}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+    >
+      <Text style={[sh.secondaryText, { color }]}>{label}</Text>
+    </Pressable>
+  );
+}
+function CtaArea({
+  beforePrimary,
+  onPrimary,
+  ...props
+}: InAppBranchProps & { beforePrimary?: () => void; onPrimary?: () => void }) {
+  const { spec, theme, onCta, onDismiss } = props;
+  if (!spec.cta && !spec.secondaryCta) return null;
+  return (
+    <View style={sh.ctaRow}>
+      {spec.secondaryCta ? (
+        <SecondaryBtn
+          label={spec.secondaryCta.label}
+          onPress={onDismiss}
+          color={theme.secondaryColor}
+        />
+      ) : null}
+      {spec.cta ? (
+        <PrimaryBtn
+          label={spec.cta.label}
+          accent={theme.accent}
+          onPress={() => {
+            beforePrimary?.();
+            if (onPrimary) onPrimary();
+            else if (presentTerminalOutcome(props)) return;
+            else if (spec.cta!.action === "dismiss") onDismiss();
+            else onCta(spec.cta!);
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+// ─── 1. Spin Wheel ────────────────────────────────────────────────────────────
+
+const WHEEL_COLORS = [
+  "#6C5CE7",
+  "#8B7CF6",
+  "#F5A524",
+  "#E85D75",
+  "#4834D4",
+  "#00A896",
+];
+const WHEEL_MAX_SIZE = 264;
+const MAX_WHEEL_SEGMENTS = 8;
+
+export function resolveWheelDiameter(availableWidth: number): number {
+  return Number.isFinite(availableWidth) && availableWidth > 0
+    ? Math.min(WHEEL_MAX_SIZE, Math.floor(availableWidth))
+    : 0;
+}
+
+export type WheelSegment = {
+  id: string;
+  label: string;
+  fullLabel: string;
+  color: string;
+  sourceIndex: number;
+};
+type WheelOutcome = { index: number; label: string; resolved: boolean };
+
+interface WheelOutcomeIdentity {
+  explicitIndex: number;
+  resultId: string;
+  resultLabel: string;
+}
+
+function wheelOutcomeIdentity(source: Record<string, unknown>): WheelOutcomeIdentity {
+  const resultValue = source.resultState ?? source.rewardResult ?? source.result ?? source.reward;
+  const result = record(resultValue);
+  return {
+    explicitIndex: num(
+      source.winningIndex ?? source.resultIndex ?? source.selectedIndex ?? result.index,
+      -1,
+    ),
+    resultId: str(
+      source.winningId ?? source.segmentId ?? result.segmentId ?? result.id ?? result.value,
+    ),
+    resultLabel: labelOf(resultValue),
+  };
+}
+
+function findWheelOutcomeIndex(
+  segments: readonly WheelSegment[],
+  identity: WheelOutcomeIdentity,
+): number {
+  if (identity.explicitIndex >= 0) {
+    const explicit = segments.findIndex(
+      ({ sourceIndex }) => sourceIndex === Math.floor(identity.explicitIndex),
+    );
+    if (explicit >= 0) return explicit;
+  }
+  if (identity.resultId) {
+    const byId = segments.findIndex(({ id }) => id === identity.resultId);
+    if (byId >= 0) return byId;
+  }
+  if (!identity.resultLabel) return -1;
+  const normalizedResult = normalizedWheelValue(identity.resultLabel);
+  const normalizedLabels = segments.map((segment) =>
+    [segment.fullLabel, segment.label].map(normalizedWheelValue),
+  );
+  const exact = normalizedLabels.findIndex((labels) =>
+    labels.includes(normalizedResult),
+  );
+  if (exact >= 0) return exact;
+  let bestIndex = -1;
+  let bestLength = -1;
+  normalizedLabels.forEach((labels, index) => {
+    const length = Math.max(
+      ...labels.map((label) => (normalizedResult.includes(label) ? label.length : -1)),
+    );
+    if (length > bestLength) {
+      bestIndex = index;
+      bestLength = length;
+    }
+  });
+  return bestIndex;
+}
+
+export function prepareWheelSegments(
+  value: unknown,
+  source: Record<string, unknown> = {},
+): WheelSegment[] {
+  const segments = arr(value)
+    .map((entry, index) => {
+      const item = record(entry);
+      const fullLabel = labelOf(entry);
+      return {
+        id: str(item.id ?? item.value ?? item.code) || String(index),
+        label: str(item.shortLabel) || fullLabel,
+        fullLabel,
+        color: str(item.color ?? item.backgroundColor),
+        sourceIndex: index,
+      };
+    })
+    .filter(({ label }) => Boolean(label));
+  if (segments.length <= MAX_WHEEL_SEGMENTS) return segments;
+
+  const winnerIndex = findWheelOutcomeIndex(segments, wheelOutcomeIdentity(source));
+  const winner = winnerIndex >= 0 ? segments[winnerIndex] : undefined;
+  const visible = segments.slice(0, MAX_WHEEL_SEGMENTS);
+  if (winner && !visible.includes(winner)) visible[MAX_WHEEL_SEGMENTS - 1] = winner;
+  return visible;
+}
+
+const normalizedWheelValue = (value: string): string =>
+  value.toLowerCase().replace(/\s+/g, " ").trim();
+
+export function resolveWheelOutcome(
+  segments: readonly WheelSegment[],
+  source: Record<string, unknown>,
+): WheelOutcome {
+  const identity = wheelOutcomeIdentity(source);
+  const index = findWheelOutcomeIndex(segments, identity);
+
+  const resolved = index >= 0;
+  return {
+    index: resolved ? index : 0,
+    label: identity.resultLabel || (resolved ? segments[index]?.fullLabel ?? "" : ""),
+    resolved,
+  };
+}
+
+export function SpinWheelInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme, onDismiss, onCta } = props;
+  const e = ext(props);
+  const [gameOutcome, setGameOutcome] = useState<InAppGameOutcome | null>(null);
+  const [gameError, setGameError] = useState("");
+  const outcomeSource: Record<string, unknown> = gameOutcome
+    ? {
+        winningId: gameOutcome.segmentId || gameOutcome.id,
+        winningIndex: gameOutcome.segmentIndex,
+        resultState: { id: gameOutcome.id, label: gameResultLabel(gameOutcome) },
+      }
+    : {};
+  const configuredSegments = prepareWheelSegments(e.segments, outcomeSource);
+  const segments =
+    configuredSegments.length > 0
+      ? configuredSegments
+      : prepareWheelSegments([
+          "10% OFF",
+          "FREE GIFT",
+          "20% OFF",
+          "TRY AGAIN",
+          "5% OFF",
+          "JACKPOT!",
+        ]);
+  const n = segments.length;
+  const sliceDeg = 360 / n;
+  const [wheelSize, setWheelSize] = useState(WHEEL_MAX_SIZE);
+  const wheelRadius = wheelSize / 2;
+  const wheelScale = wheelSize / WHEEL_MAX_SIZE;
+  const labelRadius = wheelRadius * 0.65;
+  const hubSize = Math.max(30, 40 * wheelScale);
+  const wedgeHalfWidth = Math.ceil(
+    wheelRadius * Math.tan(Math.PI / Math.max(n, 3)),
+  );
+  const outcome = resolveWheelOutcome(segments, outcomeSource);
+
+  const spin = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const angleRef = useRef(0);
+  const [phase, setPhase] = useState<
+    "idle" | "resolving" | "spinning" | "result" | "claimed"
+  >("idle");
+
+  useEffect(() => () => spin.stopAnimation(), [spin]);
+
+  const doSpin = async () => {
+    if (phase !== "idle") return;
+    setGameError("");
+    setPhase("resolving");
+    props.onInteraction?.({ mechanic: "spin_wheel", phase: "started", attempt: 1 });
+    let remoteOutcome: InAppGameOutcome;
+    try {
+      remoteOutcome = await requireGameOutcome(props);
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      setPhase("idle");
+      return;
+    }
+    const remoteSource: Record<string, unknown> = {
+      winningId: remoteOutcome.segmentId || remoteOutcome.id,
+      winningIndex: remoteOutcome.segmentIndex,
+      resultState: { id: remoteOutcome.id, label: gameResultLabel(remoteOutcome) },
+    };
+    const remoteSegments = prepareWheelSegments(e.segments, remoteSource);
+    const displayedSegments = remoteSegments.length > 0 ? remoteSegments : segments;
+    const remoteResult = resolveWheelOutcome(displayedSegments, remoteSource);
+    if (!remoteResult.resolved) {
+      setGameError("The backend result does not match a wheel segment.");
+      setPhase("idle");
+      return;
+    }
+    setGameOutcome(remoteOutcome);
+    setPhase("spinning");
+    const from = angleRef.current;
+    // Animation is visual only; the customer backend's result selects the segment.
+    const to = wheelTargetAngle(displayedSegments.length, remoteResult.index, from);
+    angleRef.current = to;
+    spin.setValue(from);
+    Animated.timing(spin, {
+      toValue: to,
+      duration: reducedMotion === false ? 3600 : 0,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (!finished) return;
+      setPhase("result");
+      props.onInteraction?.({
+        mechanic: "spin_wheel",
+        phase: "resolved",
+        attempt: 1,
+        result: remoteResult.label || undefined,
+        meta: { backendResolved: true, segmentIndex: remoteResult.index },
+      });
+      AccessibilityInfo.announceForAccessibility(
+        remoteResult.label || "Spin complete",
+      );
+      presentTerminalOutcome(props, remoteResult.label);
+    });
+  };
+
+  const rotate = spin.interpolate({
+    inputRange: [0, 360],
+    outputRange: ["0deg", "360deg"],
+    extrapolate: "extend",
+  });
+  const counterRotate = spin.interpolate({
+    inputRange: [0, 360],
+    outputRange: ["0deg", "-360deg"],
+    extrapolate: "extend",
+  });
+  const onWheelLayout = ({ nativeEvent }: LayoutChangeEvent): void => {
+    const measured = resolveWheelDiameter(nativeEvent.layout.width);
+    if (measured > 0) {
+      setWheelSize((current) => (current === measured ? current : measured));
+    }
+  };
+  const spinLabel =
+    str(e.spinLabel) ||
+    (/spin/i.test(spec.cta?.label ?? "") ? spec.cta?.label : "") ||
+    "SPIN";
+  const claimLabel =
+    str(e.claimLabel ?? e.ctaLabel) ||
+    (/spin/i.test(spec.cta?.label ?? "")
+      ? gameOutcome
+        ? "CLAIM REWARD"
+        : "CONTINUE"
+      : spec.cta?.label) ||
+    "CONTINUE";
+  const handleClaim = () => {
+    props.onInteraction?.({
+      mechanic: "spin_wheel",
+      phase: "claimed",
+      attempt: 1,
+      result: outcome.label || undefined,
+    });
+    if (!spec.cta) {
+      onDismiss();
+      return;
+    }
+    if (spec.cta.action === "dismiss") {
+      onDismiss();
+      return;
+    }
+    onCta(spec.cta);
+    setPhase("claimed");
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      <View style={wh.stage} onLayout={onWheelLayout}>
+        {/* Pointer */}
+        <View style={[wh.pointer, { borderTopColor: theme.accent }]} />
+        <Animated.View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          style={[
+            wh.wheel,
+            {
+              backgroundColor: theme.couponBg,
+              borderColor: theme.accent,
+              borderRadius: wheelRadius,
+              height: wheelSize,
+              transform: [{ rotate }],
+              width: wheelSize,
+            },
+          ]}
+        >
+          {segments.map((segment, i) => {
+            const angle = sliceDeg * i;
+            const color = segment.color || WHEEL_COLORS[i % WHEEL_COLORS.length] || theme.accent;
+            const labelWidth = Math.max(
+              28,
+              Math.min(
+                84 * wheelScale,
+                2 * labelRadius * Math.sin(Math.PI / Math.max(n, 2)) -
+                  8 * wheelScale,
+              ),
+            );
+            return (
+              <React.Fragment key={`${segment.id}-${i}`}>
+                {n === 1 ? (
+                  <View style={[wh.singleWedge, { backgroundColor: color }]} />
+                ) : n === 2 ? (
+                  <View
+                    style={[
+                      wh.halfWedge,
+                      {
+                        backgroundColor: color,
+                        height: wheelRadius,
+                        top: i * wheelRadius,
+                        width: wheelSize,
+                      },
+                    ]}
+                  />
+                ) : (
+                  <View
+                    style={[
+                      wh.wedgeOrbit,
+                      {
+                        height: wheelSize,
+                        transform: [{ rotate: `${angle + 180}deg` }],
+                        width: wheelSize,
+                      },
+                    ]}
+                  >
+                    <View
+                      style={[
+                        wh.wedge,
+                        {
+                          borderBottomWidth: wheelRadius,
+                          borderLeftWidth: wedgeHalfWidth,
+                          borderRightWidth: wedgeHalfWidth,
+                          borderBottomColor: color,
+                          left: wheelRadius - wedgeHalfWidth,
+                          top: wheelRadius,
+                        },
+                      ]}
+                    />
+                  </View>
+                )}
+                <View
+                  style={[
+                    wh.labelOrbit,
+                    {
+                      height: wheelSize,
+                      transform: [{ rotate: `${angle}deg` }],
+                      width: wheelSize,
+                    },
+                  ]}
+                >
+                  <Animated.View
+                    style={[
+                      wh.segment,
+                      {
+                        left: wheelRadius - labelWidth / 2,
+                        minHeight: 36 * wheelScale,
+                        top: 28 * wheelScale,
+                        width: labelWidth,
+                        transform: [
+                          { rotate: `${-angle}deg` },
+                          { rotate: counterRotate },
+                        ],
+                      },
+                    ]}
+                  >
+                    <Text numberOfLines={2} adjustsFontSizeToFit minimumFontScale={0.7} style={wh.segmentText}>
+                      {segment.label}
+                    </Text>
+                  </Animated.View>
+                </View>
+              </React.Fragment>
+            );
+          })}
+          <View
+            style={[
+              wh.hub,
+              {
+                borderColor: theme.accent,
+                borderRadius: hubSize / 2,
+                height: hubSize,
+                left: wheelRadius - hubSize / 2,
+                top: wheelRadius - hubSize / 2,
+                width: hubSize,
+              },
+            ]}
+          >
+            <Text style={[wh.hubText, { color: theme.accent }]}>★</Text>
+          </View>
+        </Animated.View>
+      </View>
+      {phase === "result" || phase === "claimed" ? (
+        <View
+          style={[wh.result, { backgroundColor: theme.accent }]}
+          accessibilityRole="summary"
+          accessibilityLiveRegion="polite"
+        >
+          <Text style={wh.resultEyebrow}>
+            {phase === "claimed"
+              ? str(e.claimedLabel) || (outcome.resolved ? "CLAIMED" : "DONE")
+              : outcome.resolved
+                ? str(e.resultLabel) || "YOU LANDED ON"
+                : str(e.resultLabel) || "SPIN COMPLETE"}
+          </Text>
+          <Text style={wh.resultText}>
+            {phase === "claimed"
+              ? str(e.claimedState) ||
+                outcome.label ||
+                (outcome.resolved ? "Reward claimed" : "Action complete")
+              : outcome.label || "Your result will be confirmed next"}
+          </Text>
+        </View>
+      ) : null}
+      {phase === "idle" && gameError ? (
+        <Text style={[wh.unavailable, { color: theme.secondaryColor }]}> 
+          {gameError}
+        </Text>
+      ) : null}
+      <View style={sh.ctaRow}>
+        {phase === "idle" || phase === "resolving" || phase === "spinning" ? (
+          <PrimaryBtn
+            label={phase === "resolving" ? "CHECKING…" : phase === "spinning" ? "SPINNING…" : gameError ? "RETRY" : spinLabel}
+            accent={theme.accent}
+            onPress={() => { void doSpin(); }}
+            disabled={phase === "resolving" || phase === "spinning"}
+          />
+        ) : phase === "result" ? (
+          <>
+            {spec.secondaryCta ? (
+              <SecondaryBtn
+                label={spec.secondaryCta.label}
+                onPress={onDismiss}
+                color={theme.secondaryColor}
+              />
+            ) : null}
+            <PrimaryBtn
+              label={claimLabel}
+              accent={theme.accent}
+              onPress={handleClaim}
+            />
+          </>
+        ) : (
+          <PrimaryBtn label="DONE" accent={theme.accent} onPress={onDismiss} />
+        )}
+      </View>
+    </View>
+  );
+}
+
+const wh: Record<string, ViewStyle & TextStyle> = {
+  stage: { alignItems: "center", marginVertical: 12 } as any,
+  pointer: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 12,
+    borderRightWidth: 12,
+    borderTopWidth: 24,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    zIndex: 10,
+    marginBottom: -4,
+  } as any,
+  wheel: {
+    borderWidth: 5,
+    overflow: "hidden",
+    position: "relative",
+    shadowColor: "#000",
+    shadowOpacity: 0.2,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6,
+  } as any,
+  wedgeOrbit: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+  } as any,
+  wedge: {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+  } as any,
+  singleWedge: { position: "absolute", inset: 0 } as any,
+  halfWedge: {
+    position: "absolute",
+    left: 0,
+  } as any,
+  labelOrbit: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+  } as any,
+  segment: {
+    position: "absolute",
+    borderRadius: 10,
+    paddingHorizontal: 5,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.32)",
+  } as any,
+  segmentText: {
+    color: "#FFFFFF",
+    fontSize: 10,
+    fontWeight: "800",
+    textAlign: "center",
+    lineHeight: 12,
+    textShadowColor: "rgba(0,0,0,0.25)",
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+  } as any,
+  hub: {
+    position: "absolute",
+    backgroundColor: "#FFFFFF",
+    borderWidth: 3,
+    alignItems: "center",
+    justifyContent: "center",
+  } as any,
+  hubText: { fontSize: 16, fontWeight: "900" } as any,
+  result: {
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    alignSelf: "center",
+    marginBottom: 10,
+  } as any,
+  resultText: {
+    color: "#fff",
+    fontWeight: "800",
+    fontSize: 16,
+    textAlign: "center",
+  } as any,
+  resultEyebrow: {
+    color: "rgba(255,255,255,0.78)",
+    fontWeight: "700",
+    fontSize: 10,
+    letterSpacing: 1,
+    textAlign: "center",
+    marginBottom: 2,
+  } as any,
+  unavailable: { fontSize: 11, lineHeight: 15, textAlign: "center", marginBottom: 4 } as any,
+};
+
+// ─── 2. Countdown Timer ───────────────────────────────────────────────────────
+
+export function resolveCountdownDeadline(
+  expiryValue: string,
+  now = Date.now(),
+): number {
+    const duration = expiryValue.match(/^(\d{1,2}):(\d{2}):(\d{2})$/);
+    if (duration) {
+      const [, hours = "0", minutes = "0", seconds = "0"] = duration;
+      return (
+        now +
+        (Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds)) * 1000
+      );
+    }
+    const timestamp = Date.parse(expiryValue);
+    return Number.isFinite(timestamp) ? timestamp : now + 30 * 60 * 1000;
+}
+
+function useCountdown(expiryValue: string) {
+  const deadline = useMemo(
+    () => resolveCountdownDeadline(expiryValue),
+    [expiryValue],
+  );
+  const getMs = () => Math.max(0, deadline - Date.now());
+  const [ms, setMs] = useState(getMs);
+  useEffect(() => {
+    const id = setInterval(() => setMs(getMs()), 1000);
+    return () => clearInterval(id);
+  }, [deadline]);
+  const totalSec = Math.floor(ms / 1000);
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor((totalSec % 3600) / 60);
+  const s = totalSec % 60;
+  return { h, m, s, done: ms === 0 };
+}
+
+function FlipUnit({ value, label }: { value: number; label: string }) {
+  const v = String(value).padStart(2, "0");
+  return (
+    <View style={cd.unit}>
+      <View style={cd.box}>
+        <Text
+          adjustsFontSizeToFit
+          minimumFontScale={0.65}
+          numberOfLines={1}
+          style={cd.num}
+        >
+          {v}
+        </Text>
+      </View>
+      <Text style={cd.lbl}>{label}</Text>
+    </View>
+  );
+}
+
+export function CountdownInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const expiry =
+    str(e.expiryTime) ||
+    str(e.expiry);
+  const units = num(e.countdownUnits, 3);
+  const { h, m, s, done } = useCountdown(expiry);
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={done ? "This offer has expired." : spec.body} theme={theme} />
+      {!done ? (
+        <View style={cd.row}>
+          {units >= 3 ? <FlipUnit value={h} label="HRS" /> : null}
+          {units >= 2 ? (
+            <>
+              <Text allowFontScaling={false} style={[cd.sep, { color: theme.accent }]}>:</Text>
+              <FlipUnit value={m} label="MIN" />
+            </>
+          ) : null}
+          <Text allowFontScaling={false} style={[cd.sep, { color: theme.accent }]}>:</Text>
+          <FlipUnit value={s} label="SEC" />
+        </View>
+      ) : null}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const cd: Record<string, ViewStyle & TextStyle> = {
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    marginVertical: 14,
+    width: "100%",
+  } as any,
+  unit: { alignItems: "center", flex: 1, marginHorizontal: 2, minWidth: 0 } as any,
+  box: {
+    backgroundColor: "#111827",
+    borderRadius: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    width: "100%",
+  } as any,
+  num: {
+    fontSize: 24,
+    fontWeight: "800",
+    color: "#fff",
+    textAlign: "center",
+    fontVariant: ["tabular-nums"],
+  } as any,
+  lbl: {
+    fontSize: 9,
+    color: "#9CA3AF",
+    marginTop: 4,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  } as any,
+  sep: {
+    fontSize: 28,
+    fontWeight: "800",
+    paddingHorizontal: 2,
+    paddingTop: 4,
+  } as any,
+};
+
+// ─── Carousel / Swipe Deck ───────────────────────────────────────────────────
+
+interface GameCard {
+  title: string;
+  body: string;
+  image: string;
+  id: string;
+}
+
+function gameCards(value: unknown): GameCard[] {
+  return arr(value).slice(0, 20).map((item, index) => {
+    const card = record(item);
+    return {
+      id: str(card.id ?? card.value) || String(index),
+      title: labelOf(item),
+      body: firstText(card, ["body", "description", "message", "price"]),
+      image: mediaUri(card.image ?? card.imageUrl ?? card.cardImage ?? card.productImage),
+    };
+  });
+}
+
+export function CarouselDeckInApp(props: InAppBranchProps): React.ReactElement {
+  if (variantOf(props) === "swipe_deck") return <SwipeDeckInApp {...props} />;
+  const { spec, theme } = props;
+  const e = ext(props);
+  const slides = gameCards(e.slides ?? e.cards ?? e.products ?? props.spec.assets?.products);
+  const mediaHeight = resolveInAppMediaHeight(spec, 104, 240);
+  const [page, setPage] = useState(0);
+  const [pageWidth, setPageWidth] = useState(280);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const width = Math.round(event.nativeEvent.layout.width);
+    if (width > 0) setPageWidth(width);
+  };
+  const onPage = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const width = event.nativeEvent.layoutMeasurement.width || pageWidth;
+    setPage(clampPage(event.nativeEvent.contentOffset.x, width, slides.length));
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {slides.length > 0 ? (
+        <>
+          <ScrollView
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            onLayout={onLayout}
+            onMomentumScrollEnd={onPage}
+            style={car.viewport}
+          >
+            {slides.map((slide, index) => {
+              const image =
+                slide.image ||
+                (index === 0
+                  ? str(spec.assets?.image) || str(spec.imageUrl)
+                  : "");
+              return (
+                <View
+                  key={`${slide.title}-${index}`}
+                  style={{ width: pageWidth }}
+                >
+                  <View
+                    style={[
+                      car.card,
+                      {
+                        backgroundColor: theme.couponBg,
+                        borderColor: theme.couponBorder,
+                      },
+                    ]}
+                  >
+                    {image ? (
+                      <Image
+                        source={{ uri: image }}
+                        resizeMode="cover"
+                        style={[
+                          car.image,
+                          mediaHeight === undefined ? null : { height: mediaHeight },
+                        ] as any}
+                        accessibilityLabel={slide.title || `Slide ${index + 1}`}
+                      />
+                    ) : null}
+                    {slide.title ? (
+                      <Text style={[car.title, { color: theme.titleColor }]}>
+                        {slide.title}
+                      </Text>
+                    ) : null}
+                    {slide.body ? (
+                      <Text style={[car.body, { color: theme.bodyColor }]}>
+                        {slide.body}
+                      </Text>
+                    ) : null}
+                  </View>
+                </View>
+              );
+            })}
+          </ScrollView>
+          {slides.length > 1 ? (
+            <View
+              style={car.dots}
+              accessibilityLabel={`Slide ${page + 1} of ${slides.length}`}
+            >
+              {slides.map((_, index) => (
+                <View
+                  key={index}
+                  style={[
+                    car.dot,
+                    {
+                      backgroundColor:
+                        index === page ? theme.accent : theme.couponBorder,
+                    },
+                  ]}
+                />
+              ))}
+            </View>
+          ) : null}
+        </>
+      ) : null}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const car: Record<string, ViewStyle & TextStyle> = {
+  viewport: { width: "100%", marginTop: 10 } as any,
+  card: {
+    minHeight: 160,
+    padding: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+    overflow: "hidden",
+  } as any,
+  image: {
+    width: "100%",
+    height: 104,
+    borderRadius: 10,
+    marginBottom: 10,
+  } as any,
+  title: { fontSize: 15, lineHeight: 20, fontWeight: "700" } as any,
+  body: { fontSize: 12, lineHeight: 18, marginTop: 3 } as any,
+  dots: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 6,
+    marginTop: 10,
+  } as any,
+  dot: { width: 7, height: 7, borderRadius: 4 } as any,
+};
+
+function SwipeDeckInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const cards = gameCards(e.cards ?? e.products ?? props.spec.assets?.products);
+  const mediaHeight = resolveInAppMediaHeight(spec, 132, 300);
+  const [index, setIndex] = useState(0);
+  const [decisions, setDecisions] = useState<Array<{ id: string; decision: "keep" | "skip" }>>([]);
+  const dragX = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const decideRef = useRef<(decision: "keep" | "skip") => void>(() => {});
+  const decidingRef = useRef(false);
+  const current = cards[index];
+  const swipeActions = record(e.swipeActions);
+  const skipLabel = str(swipeActions.skip ?? swipeActions.reject) || "SKIP";
+  const keepLabel = str(swipeActions.keep ?? swipeActions.accept) || "KEEP";
+
+  const decide = (decision: "keep" | "skip") => {
+    if (!current || decidingRef.current) return;
+    decidingRef.current = true;
+    const card = current;
+    Animated.timing(dragX, {
+      toValue: decision === "keep" ? 420 : -420,
+      duration: reducedMotion === false ? 180 : 0,
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      decidingRef.current = false;
+      if (!finished) {
+        dragX.setValue(0);
+        return;
+      }
+      props.onInteraction?.({
+        mechanic: "swipe_deck",
+        phase: "decision",
+        progress: cards.length > 0 ? (index + 1) / cards.length : 1,
+        value: decision,
+        meta: { cardId: card.id },
+      });
+      dragX.setValue(0);
+      setDecisions((value) => [...value, { id: card.id, decision }]);
+      setIndex((value) => value + 1);
+    });
+  };
+  decideRef.current = decide;
+
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > 4,
+        onPanResponderMove: Animated.event([null, { dx: dragX }], { useNativeDriver: false }),
+        onPanResponderRelease: (_, gesture) => {
+          if (Math.abs(gesture.dx) >= 72) decideRef.current(gesture.dx > 0 ? "keep" : "skip");
+          else Animated.spring(dragX, { toValue: 0, useNativeDriver: false }).start();
+        },
+        onPanResponderTerminate: () => {
+          Animated.spring(dragX, { toValue: 0, useNativeDriver: false }).start();
+        },
+      }),
+    [dragX],
+  );
+
+  useEffect(() => () => dragX.stopAnimation(), [dragX]);
+
+  const rotate = dragX.interpolate({
+    inputRange: [-220, 0, 220],
+    outputRange: ["-9deg", "0deg", "9deg"],
+    extrapolate: "clamp",
+  });
+  const kept = decisions.filter(({ decision }) => decision === "keep").length;
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {current ? (
+        <>
+          <View style={deck.progressRow}>
+            <Text style={[deck.progressText, { color: theme.secondaryColor }]}>
+              {index + 1} / {cards.length}
+            </Text>
+            <Text style={[deck.progressText, { color: theme.accent }]}>{kept} kept</Text>
+          </View>
+          <Animated.View
+            {...responder.panHandlers}
+            style={[
+              deck.card,
+              { backgroundColor: theme.couponBg, borderColor: theme.couponBorder, transform: [{ translateX: dragX }, { rotate }] },
+            ]}
+            accessibilityLabel={`${current.title}. Swipe right to keep or left to skip`}
+          >
+            {current.image ? (
+              <Image
+                source={{ uri: current.image }}
+                style={[
+                  deck.image,
+                  mediaHeight === undefined ? null : { height: mediaHeight },
+                ] as any}
+                resizeMode="cover"
+              />
+            ) : null}
+            <Text style={[deck.title, { color: theme.titleColor }]}>{current.title}</Text>
+            {current.body ? <Text style={[deck.body, { color: theme.bodyColor }]}>{current.body}</Text> : null}
+          </Animated.View>
+          <View style={deck.actions}>
+            <SecondaryBtn label={skipLabel} onPress={() => decide("skip")} color={theme.secondaryColor} />
+            <PrimaryBtn label={keepLabel} onPress={() => decide("keep")} accent={theme.accent} />
+          </View>
+        </>
+      ) : (
+        <View style={[deck.complete, { backgroundColor: theme.couponBg }]} accessibilityLiveRegion="polite">
+          <Text style={[deck.completeTitle, { color: theme.titleColor }]}>
+            {cards.length === 0 ? "Deck unavailable" : str(e.finalLabel) || "Deck complete"}
+          </Text>
+          <Text style={[deck.completeBody, { color: theme.bodyColor }]}>
+            {cards.length === 0 ? "No cards were authored for this deck." : `You kept ${kept} of ${cards.length}`}
+          </Text>
+        </View>
+      )}
+      {!current ? <CtaArea {...props} /> : null}
+    </View>
+  );
+}
+
+const deck: Record<string, ViewStyle & TextStyle> = {
+  progressRow: { flexDirection: "row", justifyContent: "space-between", marginTop: 10 } as any,
+  progressText: { fontSize: 11, fontWeight: "700" } as any,
+  card: { minHeight: 220, borderWidth: 1.5, borderRadius: 18, padding: 16, marginVertical: 12, overflow: "hidden" } as any,
+  image: { width: "100%", height: 132, borderRadius: 12, marginBottom: 12 } as any,
+  title: { fontSize: 18, fontWeight: "800", textAlign: "center" } as any,
+  body: { fontSize: 13, lineHeight: 18, textAlign: "center", marginTop: 5 } as any,
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: 12, alignItems: "center" } as any,
+  complete: { borderRadius: 16, padding: 22, marginTop: 14, alignItems: "center" } as any,
+  completeTitle: { fontSize: 18, fontWeight: "800" } as any,
+  completeBody: { fontSize: 13, marginTop: 5 } as any,
+};
+
+// ─── 3. Scratch Card ──────────────────────────────────────────────────────────
+
+const SCRATCH_COLUMNS = 6;
+const SCRATCH_ROWS = 4;
+const SCRATCH_CELLS = SCRATCH_COLUMNS * SCRATCH_ROWS;
+const SCRATCH_REVEAL_AT = 0.55;
+
+export function ScratchCardInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const mystery = variantOf(props) === "mystery_box";
+  const [opened, setOpened] = useState(false);
+  const [scratched, setScratched] = useState<number[]>([]);
+  const scratchBounds = useRef({ width: 0, height: 0 });
+  const reportedProgress = useRef(0);
+  const outcomeShown = useRef(false);
+  const boxMotion = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const [gameOutcome, setGameOutcome] = useState<InAppGameOutcome | null>(null);
+  const [gameLoading, setGameLoading] = useState(false);
+  const [gameError, setGameError] = useState("");
+  const prize = gameResultLabel(gameOutcome) || "Reward revealed";
+  const ctaIsPlay = /scratch|reveal|open/i.test(spec.cta?.label ?? "");
+  const claimCta = spec.cta && !ctaIsPlay ? spec.cta : undefined;
+  const rewardTitle = str(e.rewardTitle) || (mystery ? "Surprise!" : "You won!");
+  const closed =
+    str(e.closedMessage) ||
+    str(e.revealLabel) ||
+    (mystery ? "Tap the box to open it" : "Scratch to reveal your prize");
+  const progress = scratchProgress(scratched, SCRATCH_CELLS);
+  const revealed = mystery ? opened : progress >= SCRATCH_REVEAL_AT;
+
+  useEffect(() => () => boxMotion.stopAnimation(), [boxMotion]);
+  useEffect(() => {
+    if (
+      !revealed ||
+      !gameOutcome ||
+      outcomeShown.current ||
+      !props.onOutcome
+    ) {
+      return;
+    }
+    props.onOutcome({
+      resultLabel: prize,
+      fallback: inAppOutcomeTerminalForCta(props.spec.cta),
+    });
+    outcomeShown.current = true;
+  }, [
+    gameOutcome,
+    prize,
+    props.onOutcome,
+    props.spec.cta,
+    revealed,
+  ]);
+
+  const resolveReward = async (): Promise<InAppGameOutcome | null> => {
+    if (gameOutcome) return gameOutcome;
+    if (gameLoading) return null;
+    setGameLoading(true);
+    setGameError("");
+    props.onInteraction?.({
+      mechanic: mystery ? "mystery_box" : "scratch_card",
+      phase: "started",
+      attempt: 1,
+    });
+    try {
+      const outcome = await requireGameOutcome(props);
+      setGameOutcome(outcome);
+      return outcome;
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      return null;
+    } finally {
+      setGameLoading(false);
+    }
+  };
+
+  const scratchResponder = useMemo(() => {
+    const mark = (event: GestureResponderEvent) => {
+      if (!gameOutcome) return;
+      const { locationX, locationY } = event.nativeEvent;
+      const { width, height } = scratchBounds.current;
+      const cell = scratchCellAt(
+        locationX,
+        locationY,
+        width,
+        height,
+        SCRATCH_COLUMNS,
+        SCRATCH_ROWS,
+      );
+      setScratched((current) => {
+        const next = addScratchedCell(current, cell);
+        const nextProgress = scratchProgress(next, SCRATCH_CELLS);
+        const reportAt = nextProgress >= SCRATCH_REVEAL_AT
+          ? 1
+          : Math.min(0.5, Math.floor(nextProgress * 4) / 4);
+        if (reportAt > reportedProgress.current) {
+          reportedProgress.current = reportAt;
+          props.onInteraction?.({
+            mechanic: "scratch",
+            phase: nextProgress >= SCRATCH_REVEAL_AT ? "resolved" : "progress",
+            progress: nextProgress,
+            result: nextProgress >= SCRATCH_REVEAL_AT ? prize : undefined,
+          });
+        }
+        return next;
+      });
+    };
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: mark,
+      onPanResponderMove: mark,
+    });
+  }, [
+    gameOutcome,
+    prize,
+    props.onInteraction,
+    props.onOutcome,
+    props.spec.cta,
+  ]);
+
+  const revealScratchAccessibly = () => {
+    if (!gameOutcome) {
+      void resolveReward();
+      return;
+    }
+    setScratched(Array.from({ length: SCRATCH_CELLS }, (_, index) => index));
+    props.onInteraction?.({
+      mechanic: "scratch",
+      phase: "resolved",
+      progress: 1,
+      result: prize,
+    });
+  };
+
+  const openMystery = async () => {
+    if (opened) return;
+    const outcome = await resolveReward();
+    if (!outcome) return;
+    const duration = reducedMotion === false ? 90 : 0;
+    Animated.sequence([
+      Animated.timing(boxMotion, { toValue: 1, duration, useNativeDriver: true }),
+      Animated.timing(boxMotion, { toValue: -1, duration, useNativeDriver: true }),
+      Animated.timing(boxMotion, { toValue: 0, duration, useNativeDriver: true }),
+    ]).start(({ finished }) => {
+      if (!finished) return;
+      setOpened(true);
+      props.onInteraction?.({
+        mechanic: "mystery_box",
+        phase: "resolved",
+        result: gameResultLabel(outcome) || "Reward revealed",
+      });
+      AccessibilityInfo.announceForAccessibility(
+        `${rewardTitle} ${gameResultLabel(outcome) || "Reward revealed"}`,
+      );
+    });
+  };
+
+  const boxRotate = boxMotion.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: ["-7deg", "0deg", "7deg"],
+  });
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {mystery ? (
+        <Pressable
+          style={[sc.boxStage, { backgroundColor: theme.couponBg }]}
+          onPress={() => { void openMystery(); }}
+          disabled={opened || gameLoading}
+          accessibilityRole="button"
+          accessibilityLabel={opened ? `${rewardTitle}: ${prize}` : closed}
+        >
+          <Animated.View style={[sc.box, { transform: [{ rotate: boxRotate }] }]}>
+            <View
+              style={[
+                sc.boxLid,
+                { backgroundColor: theme.accent },
+                opened ? sc.boxLidOpen : null,
+              ]}
+            />
+            <View style={[sc.boxBody, { backgroundColor: theme.accent }]}>
+              <Text style={sc.boxEmoji}>{opened ? "✨" : "🎁"}</Text>
+            </View>
+          </Animated.View>
+          <Text style={[sc.rewardTitle, { color: theme.titleColor }]}>
+            {opened ? rewardTitle : gameLoading ? "Checking your result…" : gameError ? "Try opening again" : closed}
+          </Text>
+          {opened ? <Text style={[sc.prize, { color: theme.accent }]}>{prize}</Text> : null}
+        </Pressable>
+      ) : (
+        <>
+          <View style={[sc.scratch, { borderColor: theme.accent, backgroundColor: theme.couponBg }]}>
+            <View
+              accessibilityElementsHidden={!revealed}
+              importantForAccessibility={revealed ? "auto" : "no-hide-descendants"}
+              style={sc.rewardCopy}
+            >
+              <Text style={[sc.rewardTitle, { color: theme.titleColor }]}>{rewardTitle}</Text>
+              <Text style={[sc.prize, { color: theme.accent }]}>{prize}</Text>
+              {!revealed ? <Text style={sc.scratchHintMeasure}>{closed}</Text> : null}
+            </View>
+            {!revealed ? (
+              <View
+                style={sc.cover}
+                onLayout={(event) => {
+                  scratchBounds.current = event.nativeEvent.layout;
+                }}
+                {...(gameOutcome ? scratchResponder.panHandlers : {})}
+                accessibilityRole="button"
+                accessibilityLabel={`${closed}. ${Math.round(progress * 100)} percent revealed`}
+                accessibilityActions={[{ name: "activate", label: "Reveal reward" }]}
+                onAccessibilityAction={revealScratchAccessibly}
+              >
+                {Array.from({ length: SCRATCH_CELLS }, (_, index) => (
+                  <View
+                    key={index}
+                    pointerEvents="none"
+                    style={[
+                      sc.coverCell,
+                      { width: `${100 / SCRATCH_COLUMNS}%` as any },
+                      scratched.includes(index) ? sc.coverCellCleared : null,
+                    ]}
+                  />
+                ))}
+                <View pointerEvents="none" style={sc.scratchHintWrap}>
+                  <Text style={sc.scratchHint}>{closed}</Text>
+                </View>
+              </View>
+            ) : null}
+          </View>
+          <View style={[sc.progressTrack, { backgroundColor: theme.couponBg }]}>
+            <View style={[sc.progressFill, { width: `${progress * 100}%` as any, backgroundColor: theme.accent }]} />
+          </View>
+          <Text style={[sc.progressLabel, { color: theme.secondaryColor }]}>
+            {revealed ? "Reward revealed" : `${Math.round(progress * 100)}% scratched`}
+          </Text>
+        </>
+      )}
+      {revealed ? (
+        <PrimaryBtn
+          label={str(e.claimLabel) || claimCta?.label || "DONE"}
+          accent={theme.accent}
+          onPress={() => {
+            props.onInteraction?.({
+              mechanic: mystery ? "mystery_box" : "scratch",
+              phase: "claimed",
+              result: prize,
+            });
+            if (claimCta?.action === "dismiss") props.onDismiss();
+            else if (claimCta) props.onCta(claimCta);
+            else props.onDismiss();
+          }}
+        />
+      ) : null}
+      {!mystery && !gameOutcome ? (
+        <PrimaryBtn
+          label={gameLoading ? "CHECKING…" : gameError ? "RETRY" : str(e.startLabel) || "START"}
+          accent={theme.accent}
+          onPress={() => { void resolveReward(); }}
+          disabled={gameLoading}
+        />
+      ) : null}
+      {gameError ? <Text style={[sc.legal, { color: theme.secondaryColor }]}>{gameError}</Text> : null}
+      {str(e.legalText) ? <Text style={[sc.legal, { color: theme.secondaryColor }]}>{str(e.legalText)}</Text> : null}
+    </View>
+  );
+}
+
+const sc: Record<string, ViewStyle & TextStyle> = {
+  scratch: {
+    marginVertical: 14,
+    borderRadius: 14,
+    borderWidth: 2,
+    borderStyle: "dashed",
+    minHeight: 132,
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "hidden",
+    position: "relative",
+  } as any,
+  prize: { fontSize: 28, fontWeight: "900", letterSpacing: 1, textAlign: "center" } as any,
+  rewardCopy: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    justifyContent: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+  } as any,
+  rewardTitle: { fontSize: 13, fontWeight: "800", marginBottom: 6, textAlign: "center" } as any,
+  cover: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignContent: "stretch",
+    backgroundColor: "#858B96",
+  } as any,
+  coverCell: {
+    height: `${100 / SCRATCH_ROWS}%`,
+    backgroundColor: "#9299A5",
+    borderWidth: 0.5,
+    borderColor: "rgba(255,255,255,0.18)",
+  } as any,
+  coverCellCleared: { opacity: 0 } as any,
+  scratchHintWrap: {
+    position: "absolute",
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 16,
+    right: 16,
+    top: 0,
+  } as any,
+  scratchHint: {
+    fontSize: 13,
+    color: "#fff",
+    fontWeight: "600",
+    textAlign: "center",
+  } as any,
+  scratchHintMeasure: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginTop: 8,
+    opacity: 0,
+    textAlign: "center",
+  } as any,
+  progressTrack: { height: 7, borderRadius: 4, overflow: "hidden" } as any,
+  progressFill: { height: "100%", borderRadius: 4 } as any,
+  progressLabel: { fontSize: 11, textAlign: "center", marginTop: 5 } as any,
+  boxStage: { borderRadius: 16, minHeight: 190, marginVertical: 14, alignItems: "center", justifyContent: "center", padding: 16 } as any,
+  box: { width: 94, height: 94, alignItems: "center", justifyContent: "flex-end" } as any,
+  boxLid: { width: 98, height: 22, borderRadius: 6, marginBottom: -4, zIndex: 1 } as any,
+  boxLidOpen: { transform: [{ translateY: -12 }, { rotate: "-10deg" }] } as any,
+  boxBody: { width: 82, height: 70, borderRadius: 8, alignItems: "center", justifyContent: "center" } as any,
+  boxEmoji: { fontSize: 36 } as any,
+  legal: { fontSize: 10, lineHeight: 14, marginTop: 10, textAlign: "center" } as any,
+};
+
+// ─── 4. Slot Reward ───────────────────────────────────────────────────────────
+
+const DEFAULT_REELS = [
+  ["🍒", "⭐", "💎", "🍋", "🎰"],
+  ["⭐", "🍒", "🍋", "💎", "🎰"],
+  ["💎", "🍋", "🍒", "⭐", "🎰"],
+];
+
+export function SlotRewardInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const configuredReels = arr(e.reels)
+    .map((reel) =>
+      arr(record(reel).symbols ?? reel)
+        .map(labelOf)
+        .filter(Boolean),
+    )
+    .filter((reel) => reel.length > 0);
+  const slotItems = arr(e.slotItems)
+    .map((item) => {
+      const value = record(item);
+      return str(value.emoji ?? value.symbol ?? value.label ?? item);
+    })
+    .filter(Boolean);
+  const reels =
+    configuredReels.length > 0
+      ? configuredReels
+      : slotItems.length > 0
+        ? [slotItems, slotItems, slotItems]
+        : DEFAULT_REELS;
+  const boundedReels = reels.slice(0, 3).map((reel) => reel.slice(0, 12));
+
+  const [phase, setPhase] = useState<"idle" | "resolving" | "spinning" | "result">("idle");
+  const [results, setResults] = useState<string[]>([]);
+  const [gameOutcome, setGameOutcome] = useState<InAppGameOutcome | null>(null);
+  const [gameError, setGameError] = useState("");
+  const [frame, setFrame] = useState(0);
+  const [attemptsUsed, setAttemptsUsed] = useState(0);
+  const reducedMotion = useReducedMotion();
+  const resultMessage = gameResultLabel(gameOutcome);
+  // One UI attempt maps to one idempotent backend attempt. Retry reuses its id.
+  const maxAttempts = 1;
+  const spinTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const animsRef = useRef<Animated.Value[]>([]);
+  while (animsRef.current.length < boundedReels.length)
+    animsRef.current.push(new Animated.Value(0));
+  const anims = animsRef.current.slice(0, boundedReels.length);
+
+  useEffect(() => () => {
+    if (spinTimerRef.current) clearInterval(spinTimerRef.current);
+    animsRef.current.forEach((animation) => animation.stopAnimation());
+  }, []);
+
+  const pull = async () => {
+    if (phase === "resolving" || phase === "spinning" || attemptsUsed >= maxAttempts) return;
+    const attempt = attemptsUsed + 1;
+    setGameError("");
+    setPhase("resolving");
+    setResults([]);
+    props.onInteraction?.({ mechanic: "slot_reward", phase: "started", attempt });
+    let remoteOutcome: InAppGameOutcome;
+    try {
+      remoteOutcome = await requireGameOutcome(props, attempt);
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+      setPhase("idle");
+      return;
+    }
+    const outcome = resolveSlotOutcome(boundedReels, remoteOutcome.symbols ?? []);
+    if (!outcome.authored) {
+      setGameError("The backend symbols do not match the configured reels.");
+      setPhase("idle");
+      return;
+    }
+    setAttemptsUsed(attempt);
+    setGameOutcome(remoteOutcome);
+    const remoteResultMessage = gameResultLabel(remoteOutcome);
+    setPhase("spinning");
+    if (reducedMotion === false) {
+      spinTimerRef.current = setInterval(() => setFrame((value) => value + 1), 85);
+    }
+    Animated.stagger(
+      reducedMotion === false ? 150 : 0,
+      anims.map((a, i) =>
+        Animated.sequence([
+          Animated.timing(a, {
+            toValue: 1,
+            duration: reducedMotion === false ? 600 + i * 100 : 0,
+            easing: Easing.out(Easing.back(2)),
+            useNativeDriver: true,
+          }),
+          Animated.timing(a, {
+            toValue: 0,
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ]),
+      ),
+    ).start(({ finished }) => {
+      if (!finished) return;
+      if (spinTimerRef.current) clearInterval(spinTimerRef.current);
+      spinTimerRef.current = null;
+      setResults(outcome.symbols);
+      setPhase("result");
+      props.onInteraction?.({
+        mechanic: "slot_reward",
+        phase: "resolved",
+        attempt,
+        result: remoteResultMessage || undefined,
+        meta: { backendResolved: true },
+      });
+      AccessibilityInfo.announceForAccessibility(remoteResultMessage || "Spin complete");
+      presentTerminalOutcome(props, remoteResultMessage);
+    });
+  };
+
+  const playLabel = str(e.ctaLabel) || spec.cta?.label || "PULL";
+  const ctaIsPlay = /spin|pull/i.test(spec.cta?.label ?? "");
+  const finish = () => {
+    props.onInteraction?.({
+      mechanic: "slot_reward",
+      phase: "completed",
+      attempt: attemptsUsed,
+      result: resultMessage || undefined,
+    });
+    if (spec.cta && !ctaIsPlay && spec.cta.action !== "dismiss") props.onCta(spec.cta);
+    else props.onDismiss();
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      <View style={sl.machine}>
+        {boundedReels.map((reel, i) => {
+          const displayEmoji = results[i] ?? reel[(frame + i) % reel.length] ?? "★";
+          const scale = anims[i].interpolate({
+            inputRange: [0, 0.5, 1],
+            outputRange: [1, 1.4, 1],
+          });
+          const translateY = anims[i].interpolate({
+            inputRange: [0, 0.5, 1],
+            outputRange: [0, -18, 0],
+          });
+          return (
+            <View
+              key={i}
+              style={[
+                sl.reel,
+                {
+                  borderColor: theme.accent + "55",
+                  backgroundColor: theme.couponBg,
+                },
+              ]}
+            >
+              <Animated.Text style={[sl.reelEmoji, { transform: [{ scale }, { translateY }] }]}>
+                {displayEmoji}
+              </Animated.Text>
+            </View>
+          );
+        })}
+      </View>
+      <Text style={[sl.attempts, { color: theme.secondaryColor }]}> 
+        Attempt {Math.min(attemptsUsed + (phase === "idle" ? 1 : 0), maxAttempts)} of {maxAttempts}
+      </Text>
+      {phase === "result" ? (
+        <View style={[sl.win, { backgroundColor: resultMessage ? theme.accent : theme.couponBg }]}>
+          <Text style={[sl.winText, !resultMessage && { color: theme.titleColor }]}>
+            {resultMessage || "Spin complete"}
+          </Text>
+        </View>
+      ) : null}
+      {phase === "idle" && gameError ? (
+        <Text style={[sl.unavailable, { color: theme.secondaryColor }]}> 
+          {gameError}
+        </Text>
+      ) : null}
+      {phase === "result" ? (
+        <PrimaryBtn label={ctaIsPlay ? "DONE" : spec.cta?.label || "DONE"} accent={theme.accent} onPress={finish} />
+      ) : (
+        <PrimaryBtn
+          label={phase === "resolving" ? "CHECKING…" : phase === "spinning" ? "SPINNING…" : gameError ? "RETRY" : playLabel}
+          accent={theme.accent}
+          onPress={() => { void pull(); }}
+          disabled={phase === "resolving" || phase === "spinning"}
+        />
+      )}
+    </View>
+  );
+}
+
+const sl: Record<string, ViewStyle & TextStyle> = {
+  machine: {
+    alignSelf: "center",
+    flexDirection: "row",
+    gap: 10,
+    justifyContent: "center",
+    maxWidth: 230,
+    marginVertical: 16,
+    width: "100%",
+  } as any,
+  reel: {
+    flex: 1,
+    height: 80,
+    maxWidth: 70,
+    minWidth: 0,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center",
+  } as any,
+  reelEmoji: { fontSize: 36 } as any,
+  win: {
+    borderRadius: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    alignSelf: "center",
+    marginBottom: 10,
+  } as any,
+  winText: { color: "#fff", fontWeight: "800", fontSize: 15 } as any,
+  attempts: { fontSize: 11, fontWeight: "600", textAlign: "center", marginBottom: 8 } as any,
+  unavailable: { fontSize: 11, lineHeight: 15, textAlign: "center", marginBottom: 8 } as any,
+};
+
+// ─── 5. Poll Card ─────────────────────────────────────────────────────────────
+
+export function PollCardInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  const chipMode =
+    variantKey === "preferences_picker" || variantKey === "product_finder";
+  const quizMode = variantKey === "quiz_card";
+  const questions = arr(e.questions).slice(0, 20);
+  const [questionIndex, setQuestionIndex] = useState(0);
+  const [answerPath, setAnswerPath] = useState<string[]>([]);
+  const questionSpec = record(questions[questionIndex]);
+  const question =
+    str(questionSpec.prompt ?? questionSpec.question ?? questionSpec.title) ||
+    str(e.question ?? e.promptText) ||
+    spec.title ||
+    "What do you think?";
+  const categoryOptions: unknown[] = [];
+  for (const category of arr(e.categories).slice(0, 20)) {
+    const value = record(category);
+    categoryOptions.push(...arr(value.options ?? value.items ?? value.choices).slice(0, 20));
+    if (categoryOptions.length >= 20) break;
+  }
+  const optionSources = [
+    questionSpec.choices,
+    questionSpec.options,
+    questionSpec.answers,
+    e.options,
+    e.answers,
+    e.preferenceOptions,
+    e.productList,
+    e.itemList,
+    categoryOptions,
+  ];
+  const rawOptions = arr(
+    optionSources.find((value) => Array.isArray(value) && value.length > 0) ??
+      [],
+  ).slice(0, 20);
+  const scaleMax = boundedInt(questionSpec.scaleMax, 5, 2, 10);
+  const options =
+    rawOptions.length > 0
+      ? rawOptions.map((option, index) => labelOf(option) || `Option ${index + 1}`)
+      : questionSpec.kind === "scale"
+        ? Array.from({ length: scaleMax }, (_, i) => String(i + 1))
+        : [];
+  const showResults = e.showResults === true;
+  const [selected, setSelected] = useState<number[]>([]);
+  const [answerLocked, setAnswerLocked] = useState(false);
+  const [score, setScore] = useState(0);
+  const [gradedCount, setGradedCount] = useState(0);
+  const [quizAnswers, setQuizAnswers] = useState<number[][]>([]);
+  const [quizOutcome, setQuizOutcome] = useState<InAppGameOutcome | null>(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [quizError, setQuizError] = useState("");
+  const quizSubmission = useRef<Record<string, unknown> | null>(null);
+  const allowMultiple =
+    questionSpec.kind === "multi" ||
+    e.allowMultiple === true ||
+    (quizMode && Array.isArray(questionSpec.correctAnswer ?? e.correctAnswer)) ||
+    (variantKey === "preferences_picker" && e.multiSelect !== false);
+  const hasNext = questionIndex + 1 < questions.length;
+  const answered = selected.length > 0;
+  const correctAnswer = questionSpec.correctAnswer ?? e.correctAnswer;
+  const correctIndexes = (Array.isArray(correctAnswer) ? correctAnswer : [correctAnswer])
+    .map((answer) =>
+      typeof answer === "number"
+        ? Math.floor(answer)
+        : options.findIndex((option) => option === labelOf(answer)),
+    )
+    .filter((index) => index >= 0 && index < options.length);
+  const quizGraded = quizMode && correctIndexes.length > 0;
+  const quizCorrect = quizGraded && gradeGameAnswer(selected, correctIndexes);
+  const explanation =
+    firstText(questionSpec, ["explanation"]) || str(e.explanation);
+  const selectedLabel = options[selected[0] ?? -1] ?? "";
+  const resultMapping = record(e.resultMapping);
+  const currentAnswerPath = [...answerPath, selectedLabel].filter(Boolean);
+  const mappedValue =
+    resultMapping[currentAnswerPath.join(" > ")] ??
+    resultMapping[currentAnswerPath.join("|")] ??
+    resultMapping[selectedLabel] ??
+    arr(e.productList ?? props.spec.assets?.products)[selected[0] ?? -1];
+  const mappedRecord = record(mappedValue);
+  const mappedResult = labelOf(mappedValue);
+  const mappedBody = firstText(mappedRecord, ["description", "body", "reason", "message"]);
+  const mappedPrice = firstText(mappedRecord, ["price", "value", "discount"]);
+  const mappedImage = mediaUri(mappedRecord.image ?? mappedRecord.imageUrl ?? mappedRecord.thumbnail);
+
+  const toggle = (index: number) => {
+    if (quizMode && answerLocked) return;
+    const next = toggleGameSelection(selected, index, allowMultiple);
+    setSelected(next);
+    if (!quizMode) {
+      const labels = next.map((value) => options[value]).filter(Boolean);
+      props.onInteraction?.({
+        mechanic: variantKey || "question_flow",
+        phase: "decision",
+        value: labels[0],
+        meta: { questionIndex, selected: next, labels },
+      });
+    }
+  };
+
+  const submitQuiz = async (input: Record<string, unknown>): Promise<void> => {
+    setQuizLoading(true);
+    setQuizError("");
+    quizSubmission.current = input;
+    try {
+      const outcome = await requireGameOutcome(props, 1, input);
+      setQuizOutcome(outcome);
+      props.onInteraction?.({
+        mechanic: "quiz_card",
+        phase: "completed",
+        result: gameResultLabel(outcome) || outcome.id,
+        meta: { backendResolved: true },
+      });
+    } catch (error) {
+      setQuizError(gameUnavailableText(error));
+    } finally {
+      setQuizLoading(false);
+    }
+  };
+  const checkQuizAnswer = () => {
+    if (!answered || answerLocked) return;
+    setAnswerLocked(true);
+    const nextGradedCount = gradedCount + (quizGraded ? 1 : 0);
+    const nextScore = scoreGameAnswer(score, quizCorrect, answerLocked, quizTotal);
+    const nextAnswers = [...quizAnswers, [...selected]];
+    if (quizGraded) setGradedCount(nextGradedCount);
+    setScore(nextScore);
+    setQuizAnswers(nextAnswers);
+    props.onInteraction?.({
+      mechanic: "quiz_card",
+      phase: "resolved",
+      progress: Math.min(1, (questionIndex + 1) / Math.max(1, questions.length)),
+      value: quizGraded ? quizCorrect : undefined,
+      meta: { questionIndex, selected },
+    });
+    if (!hasNext) {
+      void submitQuiz({
+        answers: nextAnswers,
+        score: nextScore,
+        gradedQuestions: nextGradedCount,
+        totalQuestions: quizTotal,
+      });
+    }
+  };
+  const advanceQuiz = () => {
+    setQuestionIndex((current) => current + 1);
+    setSelected([]);
+    setAnswerLocked(false);
+  };
+  const quizTotal = Math.max(1, questions.length);
+  const reward = gameResultLabel(quizOutcome);
+
+  return (
+    <View style={sh.content}>
+      <Text style={[sh.title, { color: theme.titleColor }]}>{question}</Text>
+      <Body text={spec.body} theme={theme} />
+      {quizMode ? (
+        <View style={po.quizProgress}>
+          {Array.from({ length: quizTotal }, (_, index) => (
+            <View
+              key={index}
+              style={[
+                po.quizStep,
+                { backgroundColor: index <= questionIndex ? theme.accent : theme.couponBg },
+              ]}
+            />
+          ))}
+        </View>
+      ) : null}
+      <View style={[po.options, chipMode && po.chips]}>
+        {options.map((opt, i) => {
+          const active = selected.includes(i);
+          const correct = quizMode && answerLocked && correctIndexes.includes(i);
+          const wrong = quizMode && answerLocked && active && !correct;
+          const configuredPercent = num(record(rawOptions[i]).percent, -1);
+          return (
+            <Pressable
+              key={i}
+              style={[
+                chipMode ? po.chip : po.option,
+                {
+                  borderColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "#E4E7EC",
+                  backgroundColor: correct || active ? theme.couponBg : "#FAFAFA",
+                },
+              ]}
+              onPress={() => toggle(i)}
+              disabled={quizMode && answerLocked}
+              accessibilityRole={allowMultiple ? "checkbox" : "radio"}
+              accessibilityState={
+                allowMultiple ? { checked: active } : { selected: active }
+              }
+              accessibilityLabel={opt}
+            >
+              {!chipMode ? (
+                <View
+                  style={[
+                    po.radio,
+                    {
+                      borderColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "#9CA3AF",
+                      backgroundColor: correct ? "#22A06B" : wrong ? "#D92D20" : active ? theme.accent : "transparent",
+                    },
+                  ]}
+                />
+              ) : null}
+              <Text
+                style={[
+                  chipMode ? po.chipLabel : po.optLabel,
+                  { color: active ? theme.accent : theme.titleColor },
+                ]}
+              >
+                {opt}
+              </Text>
+              {showResults && answered && configuredPercent >= 0 ? (
+                <Text style={[po.pct, { color: theme.secondaryColor }]}>
+                  {configuredPercent}%
+                </Text>
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </View>
+      {quizMode && answerLocked && correctIndexes.length > 0 ? (
+        <View style={[po.result, { backgroundColor: theme.couponBg }]}>
+          <Text style={[po.resultTitle, { color: theme.titleColor }]}>
+            {quizCorrect ? "Correct" : "Not quite"}
+          </Text>
+          {explanation ? (
+            <Text style={[po.resultBody, { color: theme.bodyColor }]}>
+              {explanation}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {quizMode && answerLocked && !quizGraded ? (
+        <View style={[po.result, { backgroundColor: theme.couponBg }]}>
+          <Text style={[po.resultTitle, { color: theme.titleColor }]}>Answer recorded</Text>
+        </View>
+      ) : null}
+      {variantKey === "product_finder" && answered && !hasNext && mappedResult ? (
+        <View style={[po.finderResult, { backgroundColor: theme.couponBg }]}>
+          {mappedImage ? <Image source={{ uri: mappedImage }} resizeMode="cover" style={po.finderImage as any} /> : null}
+          <View style={po.finderCopy}>
+            <Text style={[po.resultTitle, { color: theme.titleColor }]}>{mappedResult}</Text>
+            {mappedBody ? <Text style={[po.resultBody, { color: theme.bodyColor }]}>{mappedBody}</Text> : null}
+            {mappedPrice ? <Text style={[po.finderPrice, { color: theme.accent }]}>{mappedPrice}</Text> : null}
+          </View>
+        </View>
+      ) : null}
+      {quizMode && answered && !answerLocked ? (
+        <View style={sh.ctaRow}>
+          <PrimaryBtn label={str(e.checkLabel) || "CHECK ANSWER"} accent={theme.accent} onPress={checkQuizAnswer} />
+        </View>
+      ) : quizMode && answerLocked ? (
+        hasNext ? (
+          <View style={sh.ctaRow}>
+            <PrimaryBtn
+              label={str(e.nextLabel) || "Next"}
+              accent={theme.accent}
+              onPress={advanceQuiz}
+            />
+          </View>
+        ) : (
+          <>
+            <View style={[po.score, { backgroundColor: theme.couponBg }]} accessibilityLiveRegion="polite">
+              <Text style={[po.scoreTitle, { color: theme.titleColor }]}>
+                {gradedCount > 0 ? `Score ${score} / ${gradedCount}` : "Responses recorded"}
+              </Text>
+              {quizLoading ? <Text style={[po.scoreReward, { color: theme.bodyColor }]}>Confirming your result…</Text> : null}
+              {quizError ? <Text style={[po.scoreReward, { color: theme.bodyColor }]}>{quizError}</Text> : null}
+              {reward ? <Text style={[po.scoreReward, { color: theme.accent }]}>{reward}</Text> : null}
+            </View>
+            {quizError && !quizLoading ? (
+              <PrimaryBtn label="RETRY" accent={theme.accent} onPress={() => {
+                if (quizSubmission.current) void submitQuiz(quizSubmission.current);
+              }} />
+            ) : quizOutcome && (spec.cta || spec.secondaryCta) ? <CtaArea {...props} /> : quizOutcome ? (
+              <PrimaryBtn
+                label="DONE"
+                accent={theme.accent}
+                onPress={() => {
+                  if (!presentTerminalOutcome(props, reward)) props.onDismiss();
+                }}
+              />
+            ) : null}
+          </>
+        )
+      ) : answered ? (
+        hasNext ? (
+          <View style={sh.ctaRow}>
+            <PrimaryBtn label={str(e.nextLabel) || "Next"} accent={theme.accent} onPress={() => {
+              if (variantKey === "product_finder" && selectedLabel) {
+                setAnswerPath((current) => [...current, selectedLabel]);
+              }
+              setQuestionIndex((current) => current + 1);
+              setSelected([]);
+            }} />
+          </View>
+        ) : <CtaArea {...props} beforePrimary={() => props.onInteraction?.({
+          mechanic: variantKey || "question_flow",
+          phase: "resolved",
+          value: selectedLabel,
+          meta: {
+            questionIndex,
+            selected,
+            labels: selected.map((value) => options[value]).filter(Boolean),
+            ...(variantKey === "product_finder" && mappedResult
+              ? { result: { title: mappedResult, body: mappedBody, price: mappedPrice, image: mappedImage } }
+              : {}),
+          },
+        })} />
+      ) : null}
+    </View>
+  );
+}
+
+const po: Record<string, ViewStyle & TextStyle> = {
+  options: { marginVertical: 8 } as any,
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: 8 } as any,
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1.5,
+    borderRadius: 10,
+    padding: 10,
+    marginBottom: 8,
+  } as any,
+  chip: {
+    borderWidth: 1.5,
+    borderRadius: 999,
+    maxWidth: "100%",
+    paddingVertical: 9,
+    paddingHorizontal: 14,
+  } as any,
+  radio: { width: 18, height: 18, borderRadius: 9, borderWidth: 2 } as any,
+  optLabel: { flex: 1, fontSize: 13, fontWeight: "500" } as any,
+  chipLabel: { flexShrink: 1, fontSize: 13, fontWeight: "600" } as any,
+  pct: { fontSize: 12, fontWeight: "600" } as any,
+  result: { borderRadius: 10, padding: 10, marginTop: 4 } as any,
+  resultTitle: { fontSize: 13, fontWeight: "800" } as any,
+  resultBody: { fontSize: 12, lineHeight: 17, marginTop: 2 } as any,
+  quizProgress: { flexDirection: "row", gap: 5, marginVertical: 10 } as any,
+  quizStep: { flex: 1, height: 5, borderRadius: 3 } as any,
+  score: { borderRadius: 12, padding: 14, marginTop: 10, alignItems: "center" } as any,
+  scoreTitle: { fontSize: 18, fontWeight: "900" } as any,
+  scoreReward: { fontSize: 13, fontWeight: "700", marginTop: 4 } as any,
+  finderResult: { flexDirection: "row", gap: 12, borderRadius: 12, padding: 12, marginTop: 8, alignItems: "center" } as any,
+  finderImage: { width: 72, height: 72, borderRadius: 10 } as any,
+  finderCopy: { flex: 1 } as any,
+  finderPrice: { fontSize: 13, fontWeight: "800", marginTop: 4 } as any,
+};
+
+// ─── 6. NPS Prompt ────────────────────────────────────────────────────────────
+
+export function NpsPromptInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const question =
+    str(e.question) || spec.title || "How likely are you to recommend us?";
+  const scaleMax = boundedInt(e.scaleMax, 10, 1, 10);
+  const scaleLabels = arr(e.scaleLabels).map(str);
+  const [selected, setSelected] = useState<number | null>(null);
+  const [feedback, setFeedback] = useState("");
+  const feedbackEnabled = e.feedbackArea === true || typeof e.feedbackArea === "string";
+  const emitNps = (): void => props.onInteraction?.({
+    mechanic: "nps_prompt",
+    phase: "resolved",
+    value: selected ?? undefined,
+    result: feedback.trim() || undefined,
+    meta: feedback.trim() ? { feedback: feedback.trim() } : undefined,
+  });
+
+  return (
+    <View style={sh.content}>
+      <Text style={[sh.title, { color: theme.titleColor }]}>{question}</Text>
+      <Body text={spec.body} theme={theme} />
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{ marginVertical: 12 }}
+        contentContainerStyle={nps.row}
+      >
+        {Array.from({ length: scaleMax + 1 }, (_, i) => (
+          <Pressable
+            key={i}
+            style={[
+              nps.cell,
+              {
+                borderColor: selected === i ? theme.accent : "#E4E7EC",
+                backgroundColor: selected === i ? theme.couponBg : "#FAFAFA",
+              },
+            ]}
+            onPress={() => {
+              setSelected(i);
+              props.onInteraction?.({ mechanic: "nps_prompt", phase: "decision", value: i });
+            }}
+            accessibilityRole="radio"
+            accessibilityLabel={String(i)}
+          >
+            <Text
+              style={[
+                nps.num,
+                { color: selected === i ? theme.accent : theme.bodyColor },
+              ]}
+            >
+              {i}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+      {scaleLabels.length >= 2 ? (
+        <View style={nps.labels}>
+          <Text style={[nps.lbl, { color: theme.secondaryColor }]}>
+            {scaleLabels[0]}
+          </Text>
+          <Text style={[nps.lbl, nps.lblEnd, { color: theme.secondaryColor }]}>
+            {scaleLabels[scaleLabels.length - 1]}
+          </Text>
+        </View>
+      ) : null}
+      {selected !== null && feedbackEnabled ? (
+        <TextInput
+          value={feedback}
+          onChangeText={setFeedback}
+          multiline
+          placeholder={typeof e.feedbackArea === "string" ? e.feedbackArea : "Tell us more (optional)"}
+          placeholderTextColor={theme.secondaryColor}
+          accessibilityLabel="Additional NPS feedback"
+          style={[nps.feedback, { color: theme.titleColor, borderColor: theme.couponBorder }]}
+        />
+      ) : null}
+      {selected !== null ? (
+        props.spec.cta || props.spec.secondaryCta ? (
+          <CtaArea {...props} beforePrimary={emitNps} />
+        ) : (
+          <PrimaryBtn
+            label="SUBMIT"
+            accent={theme.accent}
+            onPress={() => {
+              emitNps();
+              if (!presentTerminalOutcome(props)) props.onDismiss();
+            }}
+          />
+        )
+      ) : null}
+    </View>
+  );
+}
+
+const nps: Record<string, ViewStyle & TextStyle> = {
+  row: { flexDirection: "row", gap: 6, paddingHorizontal: 2 } as any,
+  cell: {
+    minHeight: 44,
+    minWidth: 44,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center",
+  } as any,
+  num: { fontSize: 13, fontWeight: "700" } as any,
+  labels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 2,
+  } as any,
+  lbl: { flex: 1, fontSize: 10, fontWeight: "500" } as any,
+  lblEnd: { textAlign: "right" } as any,
+  feedback: { minHeight: 76, borderWidth: 1, borderRadius: 10, padding: 10, marginTop: 10, fontSize: 13 } as any,
+};
+
+// ─── 7. Emoji Reaction Bar ────────────────────────────────────────────────────
+
+export function EmojiReactionBarInApp(
+  props: InAppBranchProps,
+): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const reactions = arr(e.reactions).map(str);
+  const emojis =
+    reactions.length > 0 ? reactions : ["😍", "😊", "😐", "😕", "😡"];
+  const [selected, setSelected] = useState<number | null>(null);
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      <View style={er.row}>
+        {emojis.map((e, i) => (
+          <Pressable
+            key={i}
+            style={[
+              er.btn,
+              selected === i && {
+                backgroundColor: theme.couponBg,
+                borderColor: theme.accent,
+              },
+            ]}
+            onPress={() => {
+              setSelected(i);
+              props.onInteraction?.({ mechanic: "emoji_reaction_bar", phase: "decision", value: e });
+            }}
+            accessibilityRole="radio"
+            accessibilityLabel={e}
+          >
+            <Text style={er.emoji}>{e}</Text>
+          </Pressable>
+        ))}
+      </View>
+      {selected !== null ? <CtaArea {...props} beforePrimary={() => props.onInteraction?.({ mechanic: "emoji_reaction_bar", phase: "resolved", value: emojis[selected] })} /> : null}
+    </View>
+  );
+}
+
+const er: Record<string, ViewStyle & TextStyle> = {
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 10,
+    marginVertical: 14,
+  } as any,
+  btn: {
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44,
+    minWidth: 44,
+    padding: 8,
+    borderRadius: 12,
+    borderWidth: 1.5,
+    borderColor: "transparent",
+  } as any,
+  emoji: { fontSize: 32 } as any,
+};
+
+// ─── 8. Star Rating ───────────────────────────────────────────────────────────
+
+export function StarRatingInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const max = boundedInt(e.ratingScale, 5, 1, 10);
+  const [rating, setRating] = useState(0);
+  const threshold = boundedInt(e.storeReviewThreshold ?? e.ratingGate, 4, 1, Math.max(1, max));
+  const complete = async (): Promise<void> => {
+    props.onInteraction?.({ mechanic: "rating_request", phase: "resolved", value: rating, meta: { threshold } });
+    if (rating >= threshold) {
+      const ran = await requestNativeStoreReview();
+      props.onInteraction?.({
+        mechanic: "rating_request",
+        phase: "completed",
+        value: rating,
+        meta: { route: ran ? "store_review" : "fallback", threshold },
+      });
+      if (ran) {
+        if (presentTerminalOutcome(props)) return;
+        props.onDismiss();
+        return;
+      }
+    }
+    if (presentTerminalOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
+    else props.onCta(props.spec.cta);
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      <View style={sr.row}>
+        {Array.from({ length: max }, (_, i) => (
+          <Pressable
+            key={i}
+            style={sr.btn}
+            onPress={() => {
+              setRating(i + 1);
+              props.onInteraction?.({ mechanic: "rating_request", phase: "decision", value: i + 1 });
+            }}
+            accessibilityRole="radio"
+            accessibilityLabel={`${i + 1} star`}
+          >
+            <Text
+              style={[sr.star, { color: i < rating ? "#F59E0B" : "#D1D5DB" }]}
+            >
+              ★
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      {rating > 0 ? (
+        <View style={sh.ctaRow}>
+          {props.spec.secondaryCta ? <SecondaryBtn label={props.spec.secondaryCta.label} onPress={props.onDismiss} color={theme.secondaryColor} /> : null}
+          <PrimaryBtn
+            label={props.spec.cta?.label || (rating >= threshold ? "RATE APP" : "CONTINUE")}
+            accent={theme.accent}
+            onPress={() => { void complete(); }}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const sr: Record<string, ViewStyle & TextStyle> = {
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 6,
+    marginVertical: 14,
+  } as any,
+  btn: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 44 } as any,
+  star: { fontSize: 38 } as any,
+};
+
+// ─── 9. Streak Reward ─────────────────────────────────────────────────────────
+
+export function StreakRewardInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const daily = variantOf(props) === "daily_check_in";
+  const [gameOutcome, setGameOutcome] = useState<InAppGameOutcome | null>(null);
+  const [gameLoading, setGameLoading] = useState(false);
+  const [gameError, setGameError] = useState("");
+  const loadStarted = useRef(false);
+  const resolveState = async (): Promise<void> => {
+    if (gameLoading) return;
+    setGameLoading(true);
+    setGameError("");
+    props.onInteraction?.({
+      mechanic: daily ? "daily_check_in" : "streak_reward",
+      phase: "started",
+      attempt: 1,
+    });
+    try {
+      setGameOutcome(await requireGameOutcome(props));
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+    } finally {
+      setGameLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (daily || loadStarted.current) return;
+    loadStarted.current = true;
+    void resolveState();
+  }, [daily]);
+
+  const remoteState = gameOutcome?.state ?? {};
+  const calendarDays = arr(remoteState.calendarDays);
+  const authoredFilled = calendarDays.filter((day) => {
+    const value = record(day);
+    return day === true || value.done === true || value.checked === true || value.claimed === true;
+  }).length;
+  const total = boundedInt(remoteState.total ?? e.total, calendarDays.length || 7, 1, 31);
+  const initialFilled = boundedInt(
+    typeof remoteState.filled === "number"
+      ? remoteState.filled
+      : typeof remoteState.streakValue === "number"
+        ? remoteState.streakValue
+        : authoredFilled,
+    0,
+    0,
+    total,
+  );
+  const authoredToday = calendarDays.find((day) => {
+    const value = record(day);
+    return value.today === true || value.current === true;
+  });
+  const todayState = record(authoredToday);
+  const alreadyCheckedIn =
+    initialFilled >= total ||
+    authoredToday === true ||
+    todayState.done === true ||
+    todayState.checked === true ||
+    todayState.claimed === true;
+  const filled = initialFilled;
+  const glyph = str(remoteState.glyph ?? e.glyph) || "🔥";
+  const caption =
+    gameResultLabel(gameOutcome) || str(remoteState.rewardMessage ?? e.rewardMessage) ||
+    (filled > 0 ? `${filled}-day streak` : "");
+
+  const finishDaily = (): void => {
+    if (presentTerminalOutcome(props, gameResultLabel(gameOutcome))) return;
+    if (spec.cta && spec.cta.action !== "dismiss") props.onCta(spec.cta);
+    else props.onDismiss();
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {!daily && (gameLoading || (!gameOutcome && gameError)) ? (
+        <View style={[stk.claimed, { backgroundColor: theme.couponBg }]}> 
+          <Text style={[stk.claimedTitle, { color: theme.bodyColor }]}> 
+            {gameLoading ? "Loading your streak…" : gameError}
+          </Text>
+          {!gameLoading ? <PrimaryBtn label="RETRY" accent={theme.accent} onPress={() => { void resolveState(); }} /> : null}
+        </View>
+      ) : <View style={stk.row}>
+        {Array.from({ length: total }, (_, i) => {
+          const day = record(calendarDays[i]);
+          const frozen = day.frozen === true || day.freeze === true;
+          const completed = calendarDays.length > 0
+            ? calendarDays[i] === true || day.done === true || day.checked === true || day.claimed === true
+            : i < filled;
+          return (
+          <View
+            key={i}
+            style={[
+              stk.dot,
+              {
+                backgroundColor: completed ? theme.couponBg : "#F1F3F7",
+                borderColor: completed ? theme.accent : "#E4E7EC",
+              },
+            ]}
+          >
+            <Text style={stk.glyph}>{frozen ? "❄️" : completed ? glyph : ""}</Text>
+          </View>
+          );
+        })}
+      </View>}
+      {caption ? (
+        <Text style={[stk.caption, { color: theme.accent }]}>{caption}</Text>
+      ) : null}
+      {daily ? (
+        gameOutcome ? (
+          <View style={[stk.claimed, { backgroundColor: theme.couponBg }]} accessibilityLiveRegion="polite">
+            <Text style={[stk.claimedTitle, { color: theme.accent }]}> 
+              {alreadyCheckedIn ? "✓ Checked in today" : gameResultLabel(gameOutcome) || "Check-in confirmed"}
+            </Text>
+            <PrimaryBtn label="DONE" accent={theme.accent} onPress={finishDaily} />
+          </View>
+        ) : (
+          <>
+            {gameError ? <Text style={[sl.unavailable, { color: theme.secondaryColor }]}>{gameError}</Text> : null}
+            <PrimaryBtn
+              label={gameLoading ? "CHECKING…" : gameError ? "RETRY" : spec.cta?.label || "CHECK IN"}
+              accent={theme.accent}
+              onPress={() => { void resolveState(); }}
+              disabled={gameLoading}
+            />
+          </>
+        )
+      ) : gameOutcome ? <CtaArea {...props} /> : null}
+    </View>
+  );
+}
+
+const stk: Record<string, ViewStyle & TextStyle> = {
+  row: {
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center",
+    marginVertical: 14,
+    flexWrap: "wrap",
+  } as any,
+  dot: {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    borderWidth: 1.5,
+    justifyContent: "center",
+    alignItems: "center",
+  } as any,
+  glyph: { fontSize: 18 } as any,
+  caption: {
+    textAlign: "center",
+    fontWeight: "700",
+    fontSize: 14,
+    marginBottom: 12,
+  } as any,
+  claimed: { borderRadius: 12, padding: 12, gap: 8 } as any,
+  claimedTitle: { fontSize: 14, fontWeight: "800", textAlign: "center" } as any,
+};
+
+// ─── 10. Checklist Progress ────────────────────────────────────────────────────
+
+export function ChecklistProgressInApp(
+  props: InAppBranchProps,
+): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const rawItems = arr(
+    e.items ?? e.steps ?? e.tasks ?? e.checklistItems ?? e.setupSteps,
+  );
+  type Item = { label: string; done: boolean; locked: boolean };
+  const initial: Item[] =
+    rawItems.length > 0
+      ? rawItems.map((item) => {
+          const value = record(item);
+          const completed = value.done === true || value.completed === true;
+          return {
+            label: labelOf(item),
+            done: completed,
+            locked: completed || value.interactive === false || value.readOnly === true,
+          };
+        })
+      : [];
+  const [items, setItems] = useState<Item[]>(initial);
+  const done = items.filter((i) => i.done).length;
+  const complete = items.length > 0 && done === items.length;
+  const authoredComplete = initial.length > 0 && initial.every((item) => item.done);
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {items.length > 0 ? (
+        <View style={cl.progress}>
+          <View style={[cl.bar, { backgroundColor: theme.couponBg }]}>
+            <View
+              style={[
+                cl.fill,
+                {
+                  width: `${(done / items.length) * 100}%` as any,
+                  backgroundColor: theme.accent,
+                },
+              ]}
+            />
+          </View>
+          <Text style={[cl.pct, { color: theme.bodyColor }]}>
+            {done}/{items.length}
+          </Text>
+        </View>
+      ) : null}
+      <View style={{ marginVertical: 8 }}>
+        {items.map((item, i) => (
+          <Pressable
+            key={i}
+            style={[cl.row, { borderBottomColor: "#F1F3F7" }]}
+            onPress={() =>
+              setItems((prev) =>
+                prev.map((it, idx) =>
+                  idx === i && !it.locked ? { ...it, done: !it.done } : it,
+                ),
+              )
+            }
+            onPressOut={() => {
+              if (item.locked) return;
+              const nextDone = done + (item.done ? -1 : 1);
+              props.onInteraction?.({
+                mechanic: "interactive_checklist",
+                phase: "progress",
+                progress: nextDone / items.length,
+                value: nextDone,
+              });
+            }}
+            disabled={item.locked}
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: item.done, disabled: item.locked }}
+          >
+            <View
+              style={[
+                cl.check,
+                {
+                  borderColor: item.done ? theme.accent : "#D1D5DB",
+                  backgroundColor: item.done ? theme.accent : "transparent",
+                },
+              ]}
+            >
+              {item.done ? <Text style={cl.tick}>✓</Text> : null}
+            </View>
+            <Text
+              style={[
+                cl.label,
+                {
+                  color: item.done ? theme.bodyColor : theme.titleColor,
+                  textDecorationLine: item.done ? "line-through" : "none",
+                },
+              ]}
+            >
+              {item.label}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      {complete ? (
+        <View style={[cl.complete, { backgroundColor: theme.couponBg }]} accessibilityLiveRegion="polite">
+          <Text style={[cl.completeTitle, { color: theme.accent }]}>
+            {authoredComplete ? str(e.completionLabel) || "Checklist complete" : "Ready to finish"}
+          </Text>
+          {authoredComplete && labelOf(e.reward) ? <Text style={[cl.completeReward, { color: theme.bodyColor }]}>{labelOf(e.reward)}</Text> : null}
+          <CtaArea {...props} />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const cl: Record<string, ViewStyle & TextStyle> = {
+  progress: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 10,
+  } as any,
+  bar: { flex: 1, height: 8, borderRadius: 999, overflow: "hidden" } as any,
+  fill: { height: "100%", borderRadius: 999 } as any,
+  pct: {
+    fontSize: 11,
+    fontWeight: "600",
+    minWidth: 32,
+    textAlign: "right",
+  } as any,
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+  } as any,
+  check: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 1.8,
+    justifyContent: "center",
+    alignItems: "center",
+    flexShrink: 0,
+  } as any,
+  tick: { color: "#fff", fontSize: 12, fontWeight: "800" } as any,
+  label: { flex: 1, fontSize: 13, fontWeight: "500" } as any,
+  complete: { borderRadius: 12, padding: 12, marginTop: 8 } as any,
+  completeTitle: { fontSize: 14, fontWeight: "800", textAlign: "center" } as any,
+  completeReward: { fontSize: 12, textAlign: "center", marginTop: 3 } as any,
+};
+
+function normalizedProgress(value: unknown): number | null {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  return Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
+}
+
+function ProgressSummaryInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const backendOwned = variantOf(props) === "progress_unlock";
+  const [gameOutcome, setGameOutcome] = useState<InAppGameOutcome | null>(null);
+  const [gameLoading, setGameLoading] = useState(backendOwned);
+  const [gameError, setGameError] = useState("");
+  const loadStarted = useRef(false);
+  const loadProgress = async (): Promise<void> => {
+    setGameLoading(true);
+    setGameError("");
+    try {
+      const outcome = await requireGameOutcome(props);
+      setGameOutcome(outcome);
+      props.onInteraction?.({ mechanic: "progress_unlock", phase: "resolved", result: gameResultLabel(outcome) || outcome.id });
+    } catch (error) {
+      setGameError(gameUnavailableText(error));
+    } finally {
+      setGameLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (!backendOwned || loadStarted.current) return;
+    loadStarted.current = true;
+    void loadProgress();
+  }, [backendOwned]);
+  if (backendOwned && (gameLoading || !gameOutcome)) {
+    return (
+      <View style={sh.content}>
+        <Title text={spec.title} theme={theme} />
+        <Body text={spec.body} theme={theme} />
+        <View style={[prog.rewardCard, { backgroundColor: theme.couponBg }]}> 
+          <Text style={[prog.reward, { color: theme.bodyColor }]}> 
+            {gameLoading ? "Loading your progress…" : gameError || "Progress unavailable."}
+          </Text>
+          {!gameLoading ? <PrimaryBtn label="RETRY" accent={theme.accent} onPress={() => { void loadProgress(); }} /> : null}
+        </View>
+      </View>
+    );
+  }
+  const state = backendOwned ? (gameOutcome?.state ?? {}) : e;
+  const steps = arr(state.steps ?? (backendOwned ? e.milestoneLabels : e.setupSteps ?? e.milestoneLabels));
+  const doneSteps = steps.filter((step) => {
+    const value = record(step);
+    return value.done === true || value.completed === true;
+  }).length;
+  const firstNumber = (values: unknown[]): number | null => {
+    const value = values.find(
+      (candidate) =>
+        typeof candidate === "number" && Number.isFinite(candidate),
+    );
+    return typeof value === "number" ? value : null;
+  };
+  const direct = firstNumber([state.progress, state.progressValue]);
+  const current = firstNumber([
+    state.currentValue,
+    state.completedSteps,
+    state.progressSource,
+    state.goalSource,
+  ]);
+  const target = firstNumber([state.targetValue, state.goalValue]);
+  const stepPosition = firstNumber([state.currentStep, state.stepIndex]);
+  let progress = normalizedProgress(direct);
+  if (progress === null && current !== null && target !== null && target > 0) {
+    progress = normalizedProgress(current / target);
+  }
+  if (progress === null && steps.length > 0) {
+    const completed = stepPosition ?? doneSteps;
+    progress = normalizedProgress(completed / steps.length);
+  }
+  progress ??= 0;
+  const unlocked = progress >= 100;
+
+  const segmentCount = steps.length >= 2 ? Math.min(10, steps.length) : 8;
+  const filledSegments = Math.round((progress / 100) * segmentCount);
+  const message =
+    firstText(e, [
+      "message",
+      "motivationalText",
+      "onboardingMessage",
+      "rewardMessage",
+      "goal",
+    ]) || spec.body;
+  const reward = backendOwned ? gameResultLabel(gameOutcome) : labelOf(e.reward);
+  const nextStep = steps.find((step) => {
+    const value = record(step);
+    return value.done !== true && value.completed !== true;
+  });
+  const labels = arr(e.milestoneLabels).map(labelOf).filter(Boolean);
+
+  return (
+    <View style={sh.content}>
+      <Title
+        text={
+          spec.title ||
+          firstText(e, ["challengeTitle", "celebrationTitle", "goalTitle"])
+        }
+        theme={theme}
+      />
+      <Body text={message} theme={theme} />
+      <View style={prog.header}>
+        <Text style={[prog.metric, { color: theme.accent }]}>
+          {current !== null && target !== null
+            ? `${current}/${target}`
+            : `${Math.round(progress)}%`}
+        </Text>
+        {nextStep ? (
+          <Text
+            numberOfLines={1}
+            style={[prog.next, { color: theme.bodyColor }]}
+          >
+            {labelOf(nextStep)}
+          </Text>
+        ) : null}
+      </View>
+      <View
+        style={prog.segments}
+        accessibilityRole="progressbar"
+        accessibilityValue={{ min: 0, max: 100, now: Math.round(progress) }}
+      >
+        {Array.from({ length: segmentCount }, (_, index) => (
+          <View
+            key={index}
+            style={[
+              prog.segment,
+              {
+                backgroundColor:
+                  index < filledSegments ? theme.accent : theme.couponBg,
+              },
+            ]}
+          />
+        ))}
+      </View>
+      {labels.length > 1 ? (
+        <View style={prog.labels}>
+          <Text style={[prog.label, { color: theme.secondaryColor }]}>
+            {labels[0]}
+          </Text>
+          <Text style={[prog.label, { color: theme.secondaryColor }]}>
+            {labels[labels.length - 1]}
+          </Text>
+        </View>
+      ) : null}
+      {reward ? (
+        <View style={[prog.rewardCard, { backgroundColor: theme.couponBg }]}>
+          <Text style={[prog.reward, { color: unlocked ? theme.accent : theme.bodyColor }]}>
+            {unlocked ? "✓ Unlocked" : "Unlocks"}: {reward}
+          </Text>
+        </View>
+      ) : null}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const prog: Record<string, ViewStyle & TextStyle> = {
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 12,
+  } as any,
+  metric: { fontSize: 20, fontWeight: "800" } as any,
+  next: { flex: 1, fontSize: 12, textAlign: "right" } as any,
+  segments: { flexDirection: "row", gap: 4, marginTop: 8 } as any,
+  segment: { flex: 1, height: 9, borderRadius: 5 } as any,
+  labels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 5,
+  } as any,
+  label: { fontSize: 10 } as any,
+  reward: { fontSize: 12, fontWeight: "600", marginTop: 10 } as any,
+  rewardCard: { borderRadius: 10, padding: 10, marginTop: 10 } as any,
+};
+
+function CommunityChallengeInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const [joined, setJoined] = useState(false);
+  const participants = boundedInt(e.participantsCount, 0, 0, 999_999_999);
+  const leaders = arr(e.leaderboard).slice(0, 5);
+  const title = str(e.challengeTitle) || spec.title;
+  const goal = str(e.goal) || spec.body;
+  const reward = labelOf(e.reward);
+
+  return (
+    <View style={sh.content}>
+      <Title text={title} theme={theme} />
+      <Body text={goal} theme={theme} />
+      <View style={[challenge.hero, { backgroundColor: theme.couponBg }]}>
+        <Text style={challenge.emoji}>{joined ? "🏁" : "🏆"}</Text>
+        <Text style={[challenge.count, { color: theme.accent }]}>{participants.toLocaleString()}</Text>
+        <Text style={[challenge.caption, { color: theme.bodyColor }]}>participants</Text>
+      </View>
+      {leaders.length > 0 ? (
+        <View style={challenge.board}>
+          {leaders.map((leader, index) => (
+            <View key={index} style={challenge.row}>
+              <Text style={[challenge.rank, { color: theme.accent }]}>#{index + 1}</Text>
+              <Text style={[challenge.name, { color: theme.titleColor }]}>{labelOf(leader)}</Text>
+              <Text style={[challenge.value, { color: theme.bodyColor }]}>
+                {typeof (record(leader).value ?? record(leader).score) === "number"
+                  ? String(record(leader).value ?? record(leader).score)
+                  : str(record(leader).value ?? record(leader).score)}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      {reward ? <Text style={[challenge.reward, { color: theme.bodyColor }]}>Reward: {reward}</Text> : null}
+      {joined ? (
+        <View style={[challenge.joined, { borderColor: theme.accent }]} accessibilityLiveRegion="polite">
+          <Text style={[challenge.joinedText, { color: theme.accent }]}>Join request sent</Text>
+          <PrimaryBtn
+            label="DONE"
+            accent={theme.accent}
+            onPress={() => {
+              if (!presentTerminalOutcome(props, "Join request sent")) props.onDismiss();
+            }}
+          />
+        </View>
+      ) : (
+        <PrimaryBtn
+          label={str(e.joinLabel) || spec.cta?.label || "JOIN CHALLENGE"}
+          accent={theme.accent}
+          onPress={() => {
+            setJoined(true);
+            props.onInteraction?.({ mechanic: "community_challenge", phase: "started" });
+            if (spec.cta && spec.cta.action !== "dismiss") props.onCta(spec.cta);
+          }}
+        />
+      )}
+    </View>
+  );
+}
+
+const challenge: Record<string, ViewStyle & TextStyle> = {
+  hero: { borderRadius: 16, padding: 16, alignItems: "center", marginVertical: 12 } as any,
+  emoji: { fontSize: 36 } as any,
+  count: { fontSize: 24, fontWeight: "900", marginTop: 3 } as any,
+  caption: { fontSize: 11, fontWeight: "600" } as any,
+  board: { marginBottom: 10 } as any,
+  row: { flexDirection: "row", alignItems: "center", paddingVertical: 7, gap: 8 } as any,
+  rank: { width: 28, fontSize: 12, fontWeight: "800" } as any,
+  name: { flex: 1, fontSize: 13, fontWeight: "600" } as any,
+  value: { fontSize: 12, fontWeight: "700" } as any,
+  reward: { fontSize: 12, fontWeight: "700", textAlign: "center", marginBottom: 10 } as any,
+  joined: { borderWidth: 1.5, borderRadius: 12, padding: 12, gap: 8 } as any,
+  joinedText: { fontSize: 13, fontWeight: "800", textAlign: "center" } as any,
+};
+
+// ─── 11. Coupon Wallet ─────────────────────────────────────────────────────────
+
+export function CouponWalletInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const coupons = arr(e.coupons)
+    .map((coupon) => {
+      const value = record(coupon);
+      return {
+        code: str(value.code ?? value.couponCode),
+        label: str(value.label ?? value.title),
+      };
+    })
+    .filter((coupon) => coupon.code);
+  const fallbackCode =
+    str(e.couponCode ?? e.referralCode ?? e.code) || str(spec.coupon);
+  const fallbackLabel =
+    str(e.couponLabel ?? e.referralLabel) || "Your exclusive coupon";
+  const entries =
+    coupons.length > 0
+      ? coupons
+      : fallbackCode
+        ? [{ code: fallbackCode, label: fallbackLabel }]
+        : [];
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      {entries.map(({ code, label }, index) => (
+        <View
+          key={`${code}-${index}`}
+          style={[
+            cw.chip,
+            {
+              backgroundColor: theme.couponBg,
+              borderColor: theme.couponBorder,
+            },
+          ]}
+          accessibilityLabel={`Coupon code ${code}`}
+        >
+          <Text style={[cw.label, { color: theme.bodyColor }]}>
+            {label || fallbackLabel}
+          </Text>
+          <Text selectable style={[cw.code, { color: theme.couponFg }]}>
+            {code}
+          </Text>
+          <Text style={[cw.tapHint, { color: theme.accent }]}>
+            Press and hold to select
+          </Text>
+        </View>
+      ))}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const cw: Record<string, ViewStyle & TextStyle> = {
+  chip: {
+    borderRadius: 14,
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    padding: 18,
+    alignItems: "center",
+    marginVertical: 14,
+  } as any,
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    marginBottom: 6,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  } as any,
+  code: {
+    fontSize: 26,
+    fontWeight: "900",
+    letterSpacing: 3,
+    marginBottom: 6,
+  } as any,
+  tapHint: { fontSize: 12, fontWeight: "600" } as any,
+};
+
+// ─── QR / NFC / Wallet pass ──────────────────────────────────────────────────
+
+export function QrNfcInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const qr = str(spec.assets?.qr);
+  const code = firstText(e, ["codeValue", "barcode", "fallbackLink"]);
+  const kind = firstText(e, ["codeType", "passType", "walletProvider"]);
+  const instruction = firstText(e, ["instruction", "passTitle"]);
+  const expiry = str(e.expiry);
+  const wallet = variantOf(props) === "wallet_pass_offer";
+  const walletAsset = str(props.spec.assets?.wallet);
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title || str(e.passTitle)} theme={theme} />
+      <Body text={instruction || spec.body} theme={theme} />
+      {wallet ? (
+        <View style={[qrn.pass, { backgroundColor: theme.couponBg, borderColor: theme.couponBorder }]}>
+          <Text style={qrn.passIcon}>▤</Text>
+          <View style={{ flex: 1 }}>
+            <Text style={[qrn.passTitle, { color: theme.titleColor }]}>{str(e.passTitle) || spec.title || "Wallet pass"}</Text>
+            <Text style={[qrn.kind, { color: theme.bodyColor }]}>{kind || "Mobile wallet"}</Text>
+          </View>
+          {walletAsset ? <Text style={[qrn.ready, { color: theme.accent }]}>Ready</Text> : null}
+        </View>
+      ) : null}
+      {qr ? (
+        <Image
+          source={{ uri: qr }}
+          resizeMode="contain"
+          style={qrn.image as any}
+          accessibilityLabel="Campaign QR code"
+        />
+      ) : code ? (
+        <View
+          style={[
+            qrn.code,
+            {
+              backgroundColor: theme.couponBg,
+              borderColor: theme.couponBorder,
+            },
+          ]}
+        >
+          {kind ? (
+            <Text style={[qrn.kind, { color: theme.bodyColor }]}>{kind}</Text>
+          ) : null}
+          <Text selectable style={[qrn.value, { color: theme.couponFg }]}>
+            {code}
+          </Text>
+        </View>
+      ) : wallet && walletAsset ? null : (
+        <View style={[qrn.notice, { backgroundColor: theme.couponBg }]}>
+          <Text style={[qrn.noticeText, { color: theme.bodyColor }]}>
+            No scannable code was provided. Use the campaign action to continue.
+          </Text>
+        </View>
+      )}
+      {expiry ? (
+        <Text style={[qrn.expiry, { color: theme.secondaryColor }]}>
+          Expires {expiry}
+        </Text>
+      ) : null}
+      <CtaArea {...props} beforePrimary={() => wallet ? props.onInteraction?.({
+        mechanic: "wallet_pass_offer",
+        phase: "started",
+        value: walletAsset || code || "host_action",
+        meta: { hostAction: "add_to_wallet", wallet: walletAsset || undefined },
+      }) : props.onInteraction?.({
+        mechanic: "nfc_qr_prompt",
+        phase: "started",
+        value: str(props.spec.assets?.nfc) || code || "host_action",
+      })} />
+    </View>
+  );
+}
+
+const qrn: Record<string, ViewStyle & TextStyle> = {
+  image: {
+    alignSelf: "center",
+    aspectRatio: 1,
+    marginTop: 12,
+    maxWidth: 184,
+    width: "100%",
+  } as any,
+  code: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 14,
+    marginTop: 12,
+    alignItems: "center",
+  } as any,
+  kind: { fontSize: 10, fontWeight: "700", textTransform: "uppercase" } as any,
+  value: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: "700",
+    textAlign: "center",
+    marginTop: 4,
+  } as any,
+  notice: { borderRadius: 12, padding: 12, marginTop: 12 } as any,
+  noticeText: { fontSize: 12, lineHeight: 18, textAlign: "center" } as any,
+  expiry: { fontSize: 11, textAlign: "center", marginTop: 8 } as any,
+  pass: { flexDirection: "row", alignItems: "center", gap: 10, borderWidth: 1, borderRadius: 14, padding: 14, marginTop: 12 } as any,
+  passIcon: { fontSize: 30 } as any,
+  passTitle: { fontSize: 14, fontWeight: "800" } as any,
+  ready: { fontSize: 11, fontWeight: "800" } as any,
+};
+
+// ─── Video commerce ──────────────────────────────────────────────────────────
+
+export function VideoCommerceInApp(
+  props: InAppBranchProps,
+): React.ReactElement {
+  const { spec, theme, onCta, onDismiss } = props;
+  const e = ext(props);
+  const products = arr(e.products ?? spec.assets?.products);
+  const firstProduct = record(products[0]);
+  const firstProductImage = arr(e.productImages)[0] ?? firstProduct.image ?? firstProduct.imageUrl;
+  const poster =
+    str(spec.assets?.image) ||
+    str(spec.imageUrl) ||
+    mediaUri(e.posterImage ?? firstProductImage);
+  const video = str(spec.assets?.video) || str(e.video);
+  const mediaHeight = resolveInAppMediaHeight(spec, 180, 360);
+  const product = firstText(e, ["productTitle", "itemName"]) || labelOf(firstProduct);
+  const price = str(e.price) || str(firstProduct.price);
+  const discount = str(e.discount) || str(firstProduct.discount);
+
+  const act = () => {
+    if (!spec.cta) return;
+    spec.cta.action === "dismiss" ? onDismiss() : onCta(spec.cta);
+  };
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={spec.body} theme={theme} />
+      <View style={[vid.poster, { backgroundColor: theme.couponBg }]}>
+        {poster ? (
+          <Image
+            source={{ uri: poster }}
+            resizeMode="cover"
+            style={[
+              vid.image,
+              mediaHeight === undefined ? null : { height: mediaHeight },
+            ] as any}
+            accessibilityLabel={product || spec.title || "Product video"}
+          />
+        ) : null}
+        {video ? (
+          <Pressable
+            style={[vid.play, { backgroundColor: theme.cardBg }]}
+            disabled={!spec.cta}
+            onPress={act}
+            accessibilityRole="button"
+            accessibilityLabel="Play video through campaign action"
+          >
+            <Text style={[vid.playIcon, { color: theme.accent }]}>▶</Text>
+            <Text style={[vid.playLabel, { color: theme.titleColor }]}>
+              {str(e.playLabel) || "Play video"}
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+      {product || price || discount ? (
+        <View style={vid.product}>
+          <View style={vid.productCopy}>
+            {product ? (
+              <Text style={[vid.productTitle, { color: theme.titleColor }]}>
+                {product}
+              </Text>
+            ) : null}
+            {discount ? (
+              <Text style={[vid.discount, { color: theme.accent }]}>
+                {discount}
+              </Text>
+            ) : null}
+          </View>
+          {price ? (
+            <Text style={[vid.price, { color: theme.titleColor }]}>
+              {price}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const vid: Record<string, ViewStyle & TextStyle> = {
+  poster: {
+    minHeight: 150,
+    borderRadius: 14,
+    marginTop: 10,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+  } as any,
+  image: { width: "100%", height: 180 } as any,
+  play: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 7,
+    borderRadius: 999,
+    maxWidth: "90%",
+    paddingVertical: 9,
+    paddingHorizontal: 13,
+  } as any,
+  playIcon: { fontSize: 15 } as any,
+  playLabel: { flexShrink: 1, fontSize: 12, fontWeight: "700", textAlign: "center" } as any,
+  product: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 10,
+    gap: 10,
+  } as any,
+  productCopy: { flex: 1 } as any,
+  productTitle: { fontSize: 14, fontWeight: "700" } as any,
+  discount: { fontSize: 11, fontWeight: "700", marginTop: 2 } as any,
+  price: { fontSize: 15, fontWeight: "800" } as any,
+};
+
+// ─── Celebration ─────────────────────────────────────────────────────────────
+
+const BURST_PARTICLES = ["●", "✦", "●", "◆", "●", "✦", "●", "◆"];
+
+export function CelebrationInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const burst = useRef(new Animated.Value(0)).current;
+  const reducedMotion = useReducedMotion();
+  const title =
+    spec.title || firstText(e, ["celebrationTitle", "milestoneName"]);
+  const message = firstText(e, ["celebrationMessage", "message"]) || spec.body;
+  // Reward copy is display-only; the renderer never decides or grants a reward.
+  const reward = labelOf(e.reward);
+  const confettiEnabled = e.confetti !== false && e.confettiAnimation !== false;
+
+  useEffect(() => {
+    if (reducedMotion !== null) {
+      burst.stopAnimation();
+      burst.setValue(0);
+      if (!reducedMotion && confettiEnabled) {
+        Animated.timing(burst, {
+          toValue: 1,
+          duration: 750,
+          easing: Easing.out(Easing.cubic),
+          useNativeDriver: true,
+        }).start();
+      }
+    }
+    return () => burst.stopAnimation();
+  }, [burst, confettiEnabled, reducedMotion]);
+
+  return (
+    <View style={sh.content}>
+      <View style={cel.stage}>
+        {confettiEnabled ? BURST_PARTICLES.map((particle, index) => {
+          const angle = (index / BURST_PARTICLES.length) * Math.PI * 2;
+          const distance = index % 2 === 0 ? 54 : 70;
+          const translateX = burst.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, Math.cos(angle) * distance],
+          });
+          const translateY = burst.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, Math.sin(angle) * distance],
+          });
+          const opacity = burst.interpolate({
+            inputRange: [0, 0.25, 1],
+            outputRange: [0, 1, 0.35],
+          });
+          return (
+            <Animated.Text
+              key={index}
+              style={[
+                cel.particle,
+                {
+                  color: index % 2 === 0 ? theme.accent : "#F59E0B",
+                  opacity,
+                  transform: [{ translateX }, { translateY }],
+                },
+              ]}
+            >
+              {particle}
+            </Animated.Text>
+          );
+        }) : null}
+        <Text style={cel.emoji}>{str(e.emoji) || "🎉"}</Text>
+      </View>
+      <Title text={title} theme={theme} />
+      <Body text={message} theme={theme} />
+      {reward ? (
+        <View style={[cel.reward, { backgroundColor: theme.couponBg }]}>
+          <Text style={[cel.rewardText, { color: theme.couponFg }]}>
+            Reward: {reward}
+          </Text>
+        </View>
+      ) : null}
+      <CtaArea {...props} />
+    </View>
+  );
+}
+
+const cel: Record<string, ViewStyle & TextStyle> = {
+  stage: {
+    height: 150,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+  } as any,
+  particle: { position: "absolute", fontSize: 15, fontWeight: "900" } as any,
+  emoji: { fontSize: 52 } as any,
+  reward: { borderRadius: 10, padding: 10, marginTop: 10 } as any,
+  rewardText: { fontSize: 13, fontWeight: "700", textAlign: "center" } as any,
+};
+
+function FeedbackCaptureInApp(props: InAppBranchProps): React.ReactElement {
+  const { spec, theme } = props;
+  const e = ext(props);
+  const [feedback, setFeedback] = useState("");
+  const prompt = str(e.promptText) || spec.body;
+
+  return (
+    <View style={sh.content}>
+      <Title text={spec.title} theme={theme} />
+      <Body text={prompt} theme={theme} />
+      <TextInput
+        value={feedback}
+        onChangeText={setFeedback}
+        multiline
+        textAlignVertical="top"
+        placeholder={str(e.placeholder) || "Type your feedback"}
+        placeholderTextColor={theme.secondaryColor}
+        accessibilityLabel={prompt || "Feedback"}
+        style={[
+          fb.input,
+          {
+            color: theme.titleColor,
+            borderColor: theme.couponBorder,
+            backgroundColor: theme.cardBg,
+          },
+        ]}
+      />
+      {feedback.trim() ? <CtaArea {...props} beforePrimary={() => props.onInteraction?.({
+        mechanic: "feedback_capture",
+        phase: "resolved",
+        result: feedback.trim(),
+        meta: { feedback: feedback.trim() },
+      })} /> : null}
+    </View>
+  );
+}
+
+const fb: Record<string, ViewStyle & TextStyle> = {
+  input: {
+    minHeight: 104,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    marginTop: 10,
+    fontSize: 14,
+    lineHeight: 20,
+  } as any,
+};
+
+/** One question-family entry point; payload shape selects the smallest native control. */
+export function QuestionFlowInApp(props: InAppBranchProps): React.ReactElement {
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  if (variantKey === "feedback_capture") {
+    return <FeedbackCaptureInApp {...props} />;
+  }
+  if (variantKey === "emoji_reaction_bar" || arr(e.reactions).length > 0) {
+    return <EmojiReactionBarInApp {...props} />;
+  }
+  if (variantKey === "rating_request" || typeof e.ratingScale === "number") {
+    return <StarRatingInApp {...props} />;
+  }
+  if (
+    variantKey === "nps_prompt" ||
+    typeof e.scaleMax === "number" ||
+    arr(e.scaleLabels).length > 0
+  ) {
+    return <NpsPromptInApp {...props} />;
+  }
+  return <PollCardInApp {...props} />;
+}
+
+function GuidedStepsInApp(props: InAppBranchProps): React.ReactElement {
+  const e = ext(props);
+  const raw = arr(e.setupSteps ?? e.steps).slice(0, 12);
+  const steps = raw.length > 0 ? raw : [{ title: props.spec.title, body: props.spec.body }];
+  const [index, setIndex] = useState(0);
+  const [validated, setValidated] = useState<number[]>([]);
+  const step = record(steps[index]);
+  const title = firstText(step, ["title", "label", "heading"]) || props.spec.title;
+  const body = firstText(step, ["body", "message", "description"]) || props.spec.body;
+  const image = mediaUri(step.image ?? step.imageUrl ?? (index === 0 ? props.spec.assets?.image : ""));
+  const mediaHeight = resolveInAppMediaHeight(props.spec, 180, 360);
+  const last = index >= steps.length - 1;
+  const variant = variantOf(props);
+  const validationRules = arr(e.stepValidation);
+  const validation = step.validation ?? validationRules[index] ?? (validationRules.length ? undefined : e.stepValidation);
+  const validationRequired = variant === "guided_setup_wizard" && Boolean(validation);
+  const stepValidated = !validationRequired || validated.includes(index);
+  const advance = (): void => {
+    if (!stepValidated) return;
+    if (!last) {
+      const next = index + 1;
+      setIndex(next);
+      props.onInteraction?.({ mechanic: variant, phase: "progress", progress: next / steps.length, value: next + 1 });
+      return;
+    }
+    props.onInteraction?.({ mechanic: variant, phase: "completed", progress: 1 });
+    if (presentTerminalOutcome(props)) return;
+    if (!props.spec.cta || props.spec.cta.action === "dismiss") props.onDismiss();
+    else props.onCta(props.spec.cta);
+  };
+  return (
+    <View style={sh.content}>
+      <View style={guide.progress} accessibilityRole="progressbar" accessibilityValue={{ min: 1, max: steps.length, now: index + 1 }}>
+        {steps.map((_, stepIndex) => <View key={stepIndex} style={[guide.step, { backgroundColor: stepIndex <= index ? props.theme.accent : props.theme.couponBg }]} />)}
+      </View>
+      {image ? (
+        <Image
+          source={{ uri: image }}
+          resizeMode="cover"
+          style={[
+            guide.image,
+            mediaHeight === undefined ? null : { height: mediaHeight },
+          ] as any}
+        />
+      ) : (
+        <View style={[guide.illustration, { backgroundColor: props.theme.couponBg }]}><Text style={guide.emoji}>{variant === "guided_setup_wizard" ? "⚙️" : "👋"}</Text></View>
+      )}
+      <Title text={title} theme={props.theme} />
+      <Body text={body} theme={props.theme} />
+      {validationRequired ? (
+        <Pressable
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked: stepValidated }}
+          onPress={() => {
+            setValidated((current) => current.includes(index)
+              ? current.filter((value) => value !== index)
+              : [...current, index]);
+            props.onInteraction?.({ mechanic: variant, phase: "decision", value: index + 1, meta: { validation } });
+          }}
+          style={[guide.validation, { borderColor: props.theme.couponBorder }]}
+        >
+          <View style={[guide.validationCheck, { borderColor: stepValidated ? props.theme.accent : props.theme.couponBorder, backgroundColor: stepValidated ? props.theme.accent : props.theme.cardBg }]}>
+            {stepValidated ? <Text style={guide.validationTick}>✓</Text> : null}
+          </View>
+          <Text style={[guide.validationLabel, { color: props.theme.titleColor }]}>{labelOf(validation) || "Mark this step complete"}</Text>
+        </Pressable>
+      ) : null}
+      <View style={guide.actions}>
+        {index > 0 ? <SecondaryBtn label="Back" color={props.theme.secondaryColor} onPress={() => setIndex((value) => Math.max(0, value - 1))} /> : props.spec.secondaryCta ? <SecondaryBtn label={props.spec.secondaryCta.label} color={props.theme.secondaryColor} onPress={props.onDismiss} /> : null}
+        <PrimaryBtn label={last ? props.spec.cta?.label || "Finish" : "Next"} accent={props.theme.accent} onPress={advance} disabled={!stepValidated} />
+      </View>
+    </View>
+  );
+}
+
+const guide: Record<string, ViewStyle & TextStyle> = {
+  progress: { flexDirection: "row", gap: 5, marginBottom: 14 } as any,
+  step: { flex: 1, height: 5, borderRadius: 3 } as any,
+  image: { width: "100%", height: 180, borderRadius: 16, marginBottom: 14 } as any,
+  illustration: { height: 150, borderRadius: 16, alignItems: "center", justifyContent: "center", marginBottom: 14 } as any,
+  emoji: { fontSize: 52 } as any,
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: 6, alignItems: "center", marginTop: 14 } as any,
+  validation: { flexDirection: "row", alignItems: "center", gap: 10, borderWidth: 1, borderRadius: 10, padding: 11, marginTop: 10 } as any,
+  validationCheck: { width: 22, height: 22, borderRadius: 6, borderWidth: 1.5, alignItems: "center", justifyContent: "center" } as any,
+  validationTick: { color: "#FFFFFF", fontSize: 12, fontWeight: "900" } as any,
+  validationLabel: { flex: 1, fontSize: 13, fontWeight: "600" } as any,
+};
+
+/** Progress-family entry point shared by streak and task-list payloads. */
+export function ChecklistProgressFamilyInApp(
+  props: InAppBranchProps,
+): React.ReactElement {
+  const e = ext(props);
+  const variantKey = variantOf(props);
+  if (variantKey === "first_session_onboarding" || variantKey === "guided_setup_wizard") {
+    return <GuidedStepsInApp {...props} />;
+  }
+  if (variantKey === "community_challenge") {
+    return <CommunityChallengeInApp {...props} />;
+  }
+  if (
+    variantKey === "streak_reward" ||
+    variantKey === "daily_check_in" ||
+    typeof e.filled === "number" ||
+    typeof e.total === "number"
+  ) {
+    return <StreakRewardInApp {...props} />;
+  }
+  if (
+    variantKey === "progress_unlock" ||
+    variantKey === "goal_tracker"
+  ) {
+    return <ProgressSummaryInApp {...props} />;
+  }
+  return <ChecklistProgressInApp {...props} />;
+}
+
+// ─── Shared content styles ────────────────────────────────────────────────────
+
+const sh: Record<string, ViewStyle & TextStyle> = {
+  content: { width: "100%" } as any,
+  title: {
+    fontSize: 18,
+    fontWeight: "800",
+    marginBottom: 6,
+    marginTop: 4,
+    paddingRight: 28,
+    lineHeight: 24,
+  } as any,
+  body: { fontSize: 14, lineHeight: 20, marginBottom: 4 } as any,
+  ctaRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginTop: 14,
+    gap: 8,
+  } as any,
+  primaryBtn: {
+    paddingVertical: 11,
+    paddingHorizontal: 22,
+    borderRadius: 12,
+    flexBasis: 140,
+    flexGrow: 1,
+    flexShrink: 1,
+    maxWidth: "100%",
+  } as any,
+  primaryText: {
+    fontSize: 15,
+    color: "#fff",
+    fontWeight: "700",
+    flexShrink: 1,
+    textAlign: "center",
+  } as any,
+  secondaryBtn: {
+    flexShrink: 1,
+    maxWidth: "100%",
+    paddingVertical: 11,
+    paddingHorizontal: 14,
+  } as any,
+  secondaryText: {
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: "500",
+    textAlign: "center",
+  } as any,
+};
+
+// ─── Archetype registry ────────────────────────────────────────────────────────
+
+export type ArchetypeRenderer = (props: InAppBranchProps) => React.ReactElement;
+
+export type ArchetypeContentFamily =
+  | "spinWheel"
+  | "scratchReveal"
+  | "slotReward"
+  | "carouselDeck"
+  | "countdown"
+  | "questionFlow"
+  | "checklistProgress"
+  | "qrNfc"
+  | "videoCommerce"
+  | "celebration";
+
+/** Canonical mechanic families. Null means the container should render the payload. */
+export const ARCHETYPE_CONTENT_RENDERERS: Readonly<
+  Record<ArchetypeContentFamily, ArchetypeRenderer | null>
+> = {
+  spinWheel: SpinWheelInApp,
+  scratchReveal: ScratchCardInApp,
+  slotReward: SlotRewardInApp,
+  carouselDeck: CarouselDeckInApp,
+  countdown: CountdownInApp,
+  questionFlow: QuestionFlowInApp,
+  checklistProgress: ChecklistProgressFamilyInApp,
+  qrNfc: QrNfcInApp,
+  videoCommerce: VideoCommerceInApp,
+  celebration: CelebrationInApp,
+};
+
+/** Resolve a canonical family key without silently inventing missing mechanics. */
+export function resolveArchetypeContent(
+  archetype?: string | null,
+): ArchetypeRenderer | null {
+  if (
+    !archetype ||
+    !Object.prototype.hasOwnProperty.call(
+      ARCHETYPE_CONTENT_RENDERERS,
+      archetype,
+    )
+  )
+    return null;
+  return ARCHETYPE_CONTENT_RENDERERS[archetype as ArchetypeContentFamily];
+}
+
+export const ARCHETYPE_RENDERERS: Record<string, ArchetypeRenderer> = {
+  // Gamified
+  spin_wheel: SpinWheelInApp,
+  scratch_card: ScratchCardInApp,
+  slot_reward: SlotRewardInApp,
+  carousel_story: CarouselDeckInApp,
+  swipe_deck: CarouselDeckInApp,
+  countdown_offer: CountdownInApp,
+  trial_conversion: CountdownInApp,
+  // Feedback / questions
+  poll_card: PollCardInApp,
+  survey_sheet: QuestionFlowInApp,
+  quiz_card: QuestionFlowInApp,
+  product_finder: QuestionFlowInApp,
+  preferences_picker: QuestionFlowInApp,
+  feedback_capture: QuestionFlowInApp,
+  nps_prompt: NpsPromptInApp,
+  emoji_reaction_bar: EmojiReactionBarInApp,
+  rating_request: StarRatingInApp,
+  app_review_ask: StarRatingInApp,
+  // Engagement / lifecycle
+  streak_reward: StreakRewardInApp,
+  daily_check_in: StreakRewardInApp,
+  interactive_checklist: ChecklistProgressInApp,
+  guided_setup_wizard: ChecklistProgressFamilyInApp,
+  checklist_progress: ChecklistProgressInApp,
+  progress_unlock: ChecklistProgressFamilyInApp,
+  goal_tracker: ChecklistProgressFamilyInApp,
+  first_session_onboarding: ChecklistProgressFamilyInApp,
+  community_challenge: ChecklistProgressFamilyInApp,
+  // Commerce / offers
+  coupon_wallet: CouponWalletInApp,
+  exit_intent_rescue: CouponWalletInApp,
+  nfc_qr_prompt: QrNfcInApp,
+  wallet_pass_offer: QrNfcInApp,
+  video_commerce_card: VideoCommerceInApp,
+  milestone_celebration: CelebrationInApp,
+  celebration_confetti_full_screen: CelebrationInApp,
+};
+