@tastic/shell 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -26,12 +26,13 @@ import { useAutoPaperTheme } from "@rific/auto-paper";
 import { useHapticSettings } from "@rific/feedback-press";
 import { Toaster, ToastProvider } from "@rific/toaster";
 import { OrientationProvider, useRotationAwareStatusBar, useThemedRootBackground } from "@tastic/core";
-import { RotatedFrame } from "@tastic/hud";
+import { RotatedFrame } from "@tastic/hud/chrome";
+import { ProfileColorProvider } from "@tastic/profile";
 import * as Haptics from "expo-haptics";
-import { Stack } from "expo-router";
+import { DarkTheme, Stack, ThemeProvider as NavigationThemeProvider } from "expo-router";
 import { DeviceMotion } from "expo-sensors";
-import { useCallback as useCallback6 } from "react";
-import { StyleSheet } from "react-native";
+import { useCallback as useCallback6, useMemo as useMemo3 } from "react";
+import { Platform as Platform2, StyleSheet, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as RNPaper2 from "react-native-paper";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -75,24 +76,35 @@ function seatTwoFor(saved, choices) {
 function humanSeatsFor(mode) {
   return mode === "twoPlayer" ? [1, 2] : [1];
 }
+var GUEST_PLAYER_ID = "guest";
 
 // src/components/GuideHost.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
+var PACK_GUIDE = "__pack__";
+var NO_INPUT = {};
 var GameGuideContext = createContext2(null);
 function GuideHost({ children }) {
   const pack = usePack();
-  const [gameId, setGameId] = useState(pack.games[0].id);
-  const game = pack.games.find((g) => g.id === gameId) ?? pack.games[0];
+  const [subject, setSubject] = useState(() => pack.guide ? PACK_GUIDE : pack.games.find((g) => g.guide)?.id ?? null);
+  const packGuide = subject === PACK_GUIDE ? pack.guide : void 0;
+  const game = subject === PACK_GUIDE ? void 0 : pack.games.find((g) => g.id === subject);
+  const gameGuide = game?.guide;
   const rotation = useRotation();
   const touch = useIsTouchPrimaryDevice();
   const seatTwo = useSelector((state) => state.opponent.seatTwo);
-  const input = useSelector((state) => game.guide.selectInput(state), shallowEqual);
-  const seenVersion = useSelector((state) => game.guide.selectVersionSeen(state));
+  const input = useSelector((state) => gameGuide ? gameGuide.selectInput(state) : NO_INPUT, shallowEqual);
+  const seenVersion = useSelector((state) => (packGuide ?? gameGuide)?.selectVersionSeen(state) ?? 0);
   const dispatch = useDispatch();
-  const mode = roundModeFor(seatTwoFor(seatTwo, game.seatTwo));
-  const steps = useMemo(() => game.guide.getSteps(input, { touch, mode }), [game, input, touch, mode]);
-  const onSeen = useCallback((version) => dispatch(game.guide.markSeen(version)), [dispatch, game]);
-  return /* @__PURE__ */ jsx3(GuideProvider, { steps, currentVersion: game.guide.version, seenVersion, onSeen, rotation, children: /* @__PURE__ */ jsx3(GameGuideBridge, { onPick: setGameId, children }) });
+  const mode = roundModeFor(seatTwoFor(seatTwo, game?.seatTwo));
+  const steps = useMemo(() => packGuide ? packGuide.getSteps({ touch }) : gameGuide ? gameGuide.getSteps(input, { touch, mode }) : [], [packGuide, gameGuide, input, touch, mode]);
+  const onSeen = useCallback(
+    (version) => {
+      const guide = packGuide ?? gameGuide;
+      if (guide) dispatch(guide.markSeen(version));
+    },
+    [dispatch, packGuide, gameGuide]
+  );
+  return /* @__PURE__ */ jsx3(GuideProvider, { steps, currentVersion: (packGuide ?? gameGuide)?.version ?? 0, seenVersion, onSeen, rotation, children: /* @__PURE__ */ jsx3(GameGuideBridge, { onPick: setSubject, children }) });
 }
 function GameGuideBridge({ onPick, children }) {
   const pack = usePack();
@@ -100,6 +112,7 @@ function GameGuideBridge({ onPick, children }) {
   const { isOpen, open } = useGuide();
   const pendingNext = useRef(null);
   const wasOpen = useRef(false);
+  const packAutoShown = useRef(false);
   useEffect(() => {
     if (wasOpen.current && !isOpen && pendingNext.current) {
       const next = pendingNext.current;
@@ -110,15 +123,16 @@ function GameGuideBridge({ onPick, children }) {
   }, [isOpen]);
   const openFor = useCallback(
     (gameId) => {
+      if (!pack.games.find((g) => g.id === gameId)?.guide) return;
       onPick(gameId);
       open();
     },
-    [onPick, open]
+    [pack, onPick, open]
   );
   const openFirstTime = useCallback(
     (gameId, next) => {
-      const game = pack.games.find((g) => g.id === gameId);
-      if (!game || game.guide.selectVersionSeen(store.getState()) >= game.guide.version) {
+      const guide = pack.games.find((g) => g.id === gameId)?.guide;
+      if (!guide || guide.selectVersionSeen(store.getState()) >= guide.version) {
         next();
         return;
       }
@@ -127,7 +141,18 @@ function GameGuideBridge({ onPick, children }) {
     },
     [pack, store, openFor]
   );
-  const value = useMemo(() => ({ openFirstTime, openFor }), [openFirstTime, openFor]);
+  const openPack = useCallback(() => {
+    if (!pack.guide) return;
+    onPick(PACK_GUIDE);
+    open();
+  }, [pack, onPick, open]);
+  const autoShowPack = useCallback(() => {
+    const guide = pack.guide;
+    if (!guide || packAutoShown.current || guide.selectVersionSeen(store.getState()) >= guide.version) return;
+    packAutoShown.current = true;
+    openPack();
+  }, [pack, store, openPack]);
+  const value = useMemo(() => ({ openFirstTime, openFor, openPack, autoShowPack }), [openFirstTime, openFor, openPack, autoShowPack]);
   return /* @__PURE__ */ jsx3(GameGuideContext.Provider, { value, children });
 }
 function useGameGuide() {
@@ -147,15 +172,20 @@ import * as RNPaper from "react-native-paper";
 import { Provider as ReduxProvider, useDispatch as useDispatch2, useSelector as useSelector2 } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+function useShellFeedbackSounds() {
+  const selection = useAudioPool(__require("./select-MLBNNA4N.wav"));
+  const notification = useAudioPool(__require("./notification-CGGFPYK7.wav"));
+  return { selection, notification };
+}
 var FeedbackBridge = ({ children }) => {
   const haptic = useSelector2((state) => state.haptic);
   const sound = useSelector2((state) => state.sound);
   const dispatch = useDispatch2();
   const onChange = useCallback2((next) => dispatch(hapticActions.initialize(next)), [dispatch]);
   const onSoundChange = useCallback2((next) => dispatch(soundActions.initialize(next)), [dispatch]);
-  const playSelection = useAudioPool(__require("./select-MLBNNA4N.wav"));
-  const playNotification = useAudioPool(__require("./notification-CGGFPYK7.wav"));
-  const bridgeProps = useFeedbackBridgeProps({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: { selection: playSelection, notification: playNotification } });
+  const { useFeedbackSounds = useShellFeedbackSounds } = usePack();
+  const sounds = useFeedbackSounds();
+  const bridgeProps = useFeedbackBridgeProps({ initialValue: haptic, onChange, soundInitialValue: sound, onSoundChange, sound: sounds });
   return /* @__PURE__ */ jsx4(FeedbackPressProvider, { ...bridgeProps, paper: RNPaper, children });
 };
 var EdgeGuardBridge = ({ children }) => {
@@ -198,7 +228,7 @@ function Theme({ children }) {
 // src/components/UpdateDialog.tsx
 import { useUpdateErrorToast } from "@rific/toaster";
 import { useRotation as useRotation2 } from "@tastic/core";
-import { UpdateDialog as SharedUpdateDialog } from "@tastic/hud";
+import { UpdateDialog as SharedUpdateDialog } from "@tastic/hud/chrome";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function UpdateDialog() {
   const onError = useUpdateErrorToast();
@@ -371,20 +401,41 @@ function useProfiles() {
 }
 
 // src/RootLayout.tsx
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var PLAY_OPTIONS = { statusBarHidden: true };
+var KEEP_STATUS_BAR_OPTIONS = {};
+var TRANSPARENT_CONTENT = { backgroundColor: "transparent" };
+var noScreenOptions = () => ({});
 function AppStack() {
+  const pack = usePack();
+  const { Backdrop } = pack;
   const { dark } = useAutoPaperTheme();
-  const rootBackground = useThemedRootBackground(dark, false);
+  const rootBackground = useThemedRootBackground(Backdrop ? true : dark, false);
   const statusBar = useRotationAwareStatusBar();
-  return /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar }, children: [
+  const packOptions = (pack.useScreenOptions ?? noScreenOptions)();
+  const backdropOptions = Backdrop ? { contentStyle: TRANSPARENT_CONTENT, animation: Platform2.select({ android: "fade" }) } : void 0;
+  const playOptions = useCallback6(
+    ({ route }) => {
+      const id = route.params?.game;
+      return pack.games.some((g) => g.id === id && g.keepStatusBar) ? KEEP_STATUS_BAR_OPTIONS : PLAY_OPTIONS;
+    },
+    [pack.games]
+  );
+  const navigationTheme = useMemo3(() => Backdrop ? { ...DarkTheme, colors: { ...DarkTheme.colors, background: "transparent" } } : null, [Backdrop]);
+  const stack = /* @__PURE__ */ jsxs2(Stack, { screenOptions: { ...rootBackground, ...statusBar, ...backdropOptions, ...packOptions }, children: [
     /* @__PURE__ */ jsx9(Stack.Screen, { name: "index" }),
-    /* @__PURE__ */ jsx9(Stack.Screen, { name: "play/[game]", options: PLAY_OPTIONS })
+    /* @__PURE__ */ jsx9(Stack.Screen, { name: "play/[game]", options: playOptions })
+  ] });
+  if (!Backdrop || !navigationTheme) return stack;
+  return /* @__PURE__ */ jsxs2(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsx9(Backdrop, {}),
+    /* @__PURE__ */ jsx9(NavigationThemeProvider, { value: navigationTheme, children: stack })
   ] });
 }
 function OrientationBridge({ children }) {
   const { settings, setSettings } = useAppSettings();
-  return /* @__PURE__ */ jsx9(OrientationProvider, { deviceMotion: DeviceMotion, freezeWhileLocked: true, lockInitialValue: { locked: settings.lockOrientation, rotation: settings.lockedRotation }, onLockChange: (next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation }), children });
+  const { portraitWhileKeyboard } = usePack();
+  return /* @__PURE__ */ jsx9(OrientationProvider, { deviceMotion: DeviceMotion, freezeWhileLocked: true, lockInitialValue: { locked: settings.lockOrientation, rotation: settings.lockedRotation }, onLockChange: (next) => setSettings({ lockOrientation: next.locked, lockedRotation: next.rotation }), portraitWhileKeyboard, children });
 }
 function GatedApp({ children }) {
   const { loaded } = useProfiles();
@@ -392,7 +443,8 @@ function GatedApp({ children }) {
 }
 function HapticGatedToastProvider({ children }) {
   const { settings } = useHapticSettings();
-  return /* @__PURE__ */ jsx9(ToastProvider, { haptics: settings.vibrate ? Haptics : void 0, paper: RNPaper2, children });
+  const { Toaster: PackToasterComponent } = usePack();
+  return /* @__PURE__ */ jsx9(ToastProvider, { haptics: settings.vibrate ? Haptics : void 0, paper: PackToasterComponent ? void 0 : RNPaper2, children });
 }
 function RotatingToaster() {
   const renderFrame = useCallback6(
@@ -401,15 +453,28 @@ function RotatingToaster() {
   );
   return /* @__PURE__ */ jsx9(Toaster, { historyButton: null, clearButton: null, limit: 3, renderFrame });
 }
+function PackToaster({ Toaster: PackToasterComponent }) {
+  return /* @__PURE__ */ jsx9(View, { style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: /* @__PURE__ */ jsx9(RotatedFrame, { rotatedSafeArea: true, passThrough: true, children: /* @__PURE__ */ jsx9(PackToasterComponent, {}) }) });
+}
 function GameProviders({ games, children }) {
-  return games.reduceRight((inner, game) => /* @__PURE__ */ jsx9(game.Provider, { children: inner }, game.id), children);
+  return games.reduceRight((inner, game) => game.Provider ? /* @__PURE__ */ jsx9(game.Provider, { children: inner }, game.id) : inner, children);
+}
+function PreviewColors({ previewColor, children }) {
+  const { dark } = useAutoPaperTheme();
+  const preview = useCallback6((hex) => previewColor(hex, dark), [previewColor, dark]);
+  return /* @__PURE__ */ jsx9(ProfileColorProvider, { preview, children });
+}
+function PackRoot({ pack, children }) {
+  const { Provider, previewColor } = pack;
+  const inner = Provider ? /* @__PURE__ */ jsx9(Provider, { children }) : children;
+  return previewColor ? /* @__PURE__ */ jsx9(PreviewColors, { previewColor, children: inner }) : /* @__PURE__ */ jsx9(Fragment3, { children: inner });
 }
 function RootLayout({ pack, store, persistor }) {
-  return /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(SafeAreaProvider, { children: /* @__PURE__ */ jsx9(PackProvider, { pack, children: /* @__PURE__ */ jsx9(Fonts, { children: /* @__PURE__ */ jsx9(Providers, { store, persistor, children: /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(ProfilesProvider, { children: /* @__PURE__ */ jsx9(LastActiveGameProvider, { children: /* @__PURE__ */ jsx9(GameProviders, { games: pack.games, children: /* @__PURE__ */ jsx9(GatedApp, { children: /* @__PURE__ */ jsx9(OrientationBridge, { children: /* @__PURE__ */ jsxs2(HapticGatedToastProvider, { children: [
+  return /* @__PURE__ */ jsx9(GestureHandlerRootView, { style: styles.root, children: /* @__PURE__ */ jsx9(SafeAreaProvider, { children: /* @__PURE__ */ jsx9(PackProvider, { pack, children: /* @__PURE__ */ jsx9(Fonts, { children: /* @__PURE__ */ jsx9(Providers, { store, persistor, children: /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(ProfilesProvider, { children: /* @__PURE__ */ jsx9(LastActiveGameProvider, { children: /* @__PURE__ */ jsx9(GameProviders, { games: pack.games, children: /* @__PURE__ */ jsx9(PackRoot, { pack, children: /* @__PURE__ */ jsx9(GatedApp, { children: /* @__PURE__ */ jsx9(OrientationBridge, { children: /* @__PURE__ */ jsxs2(HapticGatedToastProvider, { children: [
     /* @__PURE__ */ jsx9(GuideHost, { children: /* @__PURE__ */ jsx9(AppStack, {}) }),
-    /* @__PURE__ */ jsx9(RotatingToaster, {}),
+    pack.Toaster ? /* @__PURE__ */ jsx9(PackToaster, { Toaster: pack.Toaster }) : /* @__PURE__ */ jsx9(RotatingToaster, {}),
     /* @__PURE__ */ jsx9(UpdateDialog, {})
-  ] }) }) }) }) }) }) }) }) }) }) }) });
+  ] }) }) }) }) }) }) }) }) }) }) }) }) });
 }
 var styles = StyleSheet.create({
   root: { flex: 1 }
@@ -418,24 +483,32 @@ var styles = StyleSheet.create({
 // src/screens/GameRoute.tsx
 import { Redirect, useLocalSearchParams } from "expo-router";
 import { useEffect as useEffect5 } from "react";
+import { AppState } from "react-native";
+
+// src/routes.ts
+var playHref = (game) => ({ pathname: "/play/[game]", params: { game } });
+var loadoutHref = (game) => ({ pathname: "/loadout/[game]", params: { game } });
+var STATS_HREF = "/stats";
+var PROFILES_HREF = "/profiles";
 
 // src/screens/LoadoutScreen.tsx
 import { defaultColors, useAutoPaperTheme as useAutoPaperTheme3 } from "@rific/auto-paper";
 import { FakeLandscapeView, getViewRotation, rotateInsets, useOrientationState } from "@tastic/core";
-import { CornerActionButtons, PlayerSetupPanel, PressAwayOverlay, ReadyButton as ReadyButton2, SharedActionBand, usePopoverHost } from "@tastic/hud";
+import { CornerActionButtons, PressAwayOverlay, usePopoverHost } from "@tastic/hud/chrome";
+import { PlayerSetupPanel, ReadyButton as ReadyButton2, SharedActionBand } from "@tastic/hud/lobby";
 import { DualZoneLayout, needsSharedNeutralZone, useDualZoneLayout } from "@tastic/split-screen";
 import { router as router2, useFocusEffect as useFocusEffect2 } from "expo-router";
-import { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
-import { Platform as Platform2, StyleSheet as StyleSheet3, View as View2 } from "react-native";
+import { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
+import { Platform as Platform3, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch as useDispatch9 } from "react-redux";
 
 // src/components/SeatTwoPanel.tsx
-import { ReadyButton, useZoneClampedAlign } from "@tastic/hud";
+import { ReadyButton, useZoneClampedAlign } from "@tastic/hud/lobby";
 import { getOptionPickerContentSize, OptionPicker } from "@tastic/profile";
-import { useMemo as useMemo3 } from "react";
-import { StyleSheet as StyleSheet2, View } from "react-native";
+import { useMemo as useMemo4 } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var CPU_PREFIX = "cpu:";
 var PROFILE_PREFIX = "profile:";
@@ -451,7 +524,7 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
   const isPerson = seatTwo === "person";
   const selectedProfile = isPerson ? profiles.find((p) => p.id === selectedProfileId) ?? null : null;
   const cpuOptions = cpuDifficulty?.options;
-  const options = useMemo3(() => {
+  const options = useMemo4(() => {
     const list = [];
     if (choices.includes("cpu")) list.push(...cpuOptions ? cpuOptions.map((o) => ({ value: `${CPU_PREFIX}${o.value}`, label: o.label, icon: o.icon })) : [{ value: CPU_PREFIX, label: "CPU", icon: CPU_ICON }]);
     if (choices.includes("nobody")) list.push({ value: NOBODY, label: "Nobody", icon: NOBODY_ICON });
@@ -480,9 +553,9 @@ function SeatTwoPanel({ idPrefix, host, choices, seatTwo, onSeatTwoChange, cpuDi
   const align = useZoneClampedAlign(host.openId === pickerId, size.width, size.height);
   const ownPopoverOpen = host.openId?.startsWith(`${idPrefix}-`) ?? false;
   const pickerRowOpen = secondPickerId !== void 0 && host.openId === secondPickerId;
-  return /* @__PURE__ */ jsxs3(View, { style: [styles2.panel, ownPopoverOpen && styles2.panelOpen], children: [
+  return /* @__PURE__ */ jsxs3(View2, { style: [styles2.panel, ownPopoverOpen && styles2.panelOpen], children: [
     /* @__PURE__ */ jsx10(OptionPicker, { id: pickerId, host, options, value, onChange: handleChange, color, dark, icon, colorSection, alignOverride: align }),
-    isPerson && secondPicker && /* @__PURE__ */ jsx10(View, { style: [styles2.pickerRow, pickerRowOpen && styles2.pickerRowOpen], children: secondPicker }),
+    isPerson && secondPicker && /* @__PURE__ */ jsx10(View2, { style: [styles2.pickerRow, pickerRowOpen && styles2.pickerRowOpen], children: secondPicker }),
     isPerson && showReadyButton && onToggleReady && /* @__PURE__ */ jsx10(ReadyButton, { color, ready: ready ?? false, onToggleReady })
   ] });
 }
@@ -509,13 +582,14 @@ var styles2 = StyleSheet2.create({
 
 // src/components/SettingsDialog.tsx
 import { useUpdateErrorToast as useUpdateErrorToast2 } from "@rific/toaster";
-import { BaseSettingsDialog } from "@tastic/hud";
+import { BaseSettingsDialog } from "@tastic/hud/chrome";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function SettingsDialog({ visible, onDismiss, rotation = 0, onShowHowToPlay, children }) {
   const onUpdateError = useUpdateErrorToast2();
   const { settings, setSettings } = useAppSettings();
-  const { otaVersion, SettingsSections } = usePack();
-  return /* @__PURE__ */ jsxs4(BaseSettingsDialog, { visible, onDismiss, rotation, version: otaVersion, lockOrientation: settings.lockOrientation, onLockOrientationChange: (value) => setSettings({ lockOrientation: value }), deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }), onUpdateError, onShowHowToPlay, children: [
+  const { otaVersion, SettingsSections, edgeGuard = true } = usePack();
+  const edgeGuardProps = edgeGuard ? { deferBottomEdgeGestures: settings.deferBottomEdgeGestures, onDeferBottomEdgeGestures: (value) => setSettings({ deferBottomEdgeGestures: value }) } : {};
+  return /* @__PURE__ */ jsxs4(BaseSettingsDialog, { visible, onDismiss, rotation, version: otaVersion, lockOrientation: settings.lockOrientation, onLockOrientationChange: (value) => setSettings({ lockOrientation: value }), ...edgeGuardProps, onUpdateError, onShowHowToPlay, children: [
     children,
     SettingsSections && /* @__PURE__ */ jsx11(SettingsSections, {})
   ] });
@@ -560,13 +634,17 @@ function createSeatColorsReducer(seatColors) {
 var seatColorsActions = createSeatColorsSlice("pack", defaultSeatColorsState({ 1: "", 2: "" })).actions;
 
 // src/hooks/useSeatColors.ts
+function sameTheme(current, next) {
+  const a = current.color;
+  const b = next.color;
+  const sameColor = typeof a === "string" || typeof b === "string" ? typeof a === typeof b && String(a).toLowerCase() === String(b).toLowerCase() : !!a && !!b && a.primary.toLowerCase() === b.primary.toLowerCase() && a.secondary.toLowerCase() === b.secondary.toLowerCase();
+  return sameColor && (next.harmony === void 0 || next.harmony === current.harmony);
+}
 function useSeatColors(p2IsHuman) {
-  const { colors: themeColors } = useAutoPaperTheme2();
-  const { set: setThemeColor } = useThemeSettings();
-  const p1Color = themeColors.primary;
-  const p2Color = themeColors.secondary;
+  const { dark, colors: themeColors } = useAutoPaperTheme2();
+  const { settings: themeSettings, set: setThemeColor } = useThemeSettings();
   const { profiles, lastSelected } = useProfiles();
-  const { seatColors } = usePack();
+  const { seatColors, seatTheme } = usePack();
   const seatDefaultColors = [seatColors[1], seatColors[2]];
   const dispatch = useDispatch8();
   const guestColors = useSelector7((state) => state.seatColors.lastGuestColor);
@@ -574,11 +652,21 @@ function useSeatColors(p2IsHuman) {
   const profileColors = useSelector7((state) => state.seatColors.profileColors);
   const p1Profile = profiles.find((p) => p.id === lastSelected[1]) ?? null;
   const p2Profile = p2IsHuman ? profiles.find((p) => p.id === lastSelected[2]) ?? null : null;
+  const rememberedColors = (p1Prof, p2Prof, picks, guest, cpu) => {
+    const p1 = p1Prof ? profileSeatColor(p1Prof, picks) : guest[1];
+    const p2 = avoidSeatColorClash(p1, p2Prof ? profileSeatColor(p2Prof, picks) : p2IsHuman ? guest[2] : cpu, seatDefaultColors);
+    return { p1, p2 };
+  };
+  const remembered = rememberedColors(p1Profile, p2Profile, profileColors, guestColors, cpuColor);
+  const p1Color = seatTheme ? remembered.p1 : themeColors.primary;
+  const p2Color = seatTheme ? remembered.p2 : themeColors.secondary;
+  const themeFor = useCallback8((p1, p2) => seatTheme ? seatTheme({ 1: p1, 2: p2 }, dark) : { color: { primary: p1, secondary: p2, tertiary: getThirdColor(p1, p2) } }, [seatTheme, dark]);
   const p1ProfileRef = useRef3(p1Profile);
   const p2ProfileRef = useRef3(p2Profile);
   const guestColorsRef = useRef3(guestColors);
   const cpuColorRef = useRef3(cpuColor);
   const profileColorsRef = useRef3(profileColors);
+  const themeForRef = useRef3(themeFor);
   useEffect3(() => {
     p1ProfileRef.current = p1Profile;
   }, [p1Profile]);
@@ -595,21 +683,17 @@ function useSeatColors(p2IsHuman) {
     profileColorsRef.current = profileColors;
   }, [profileColors]);
   useEffect3(() => {
-    const nextP1 = p1Profile ? profileSeatColor(p1Profile, profileColors) : guestColors[1];
-    const nextP2 = avoidSeatColorClash(nextP1, p2Profile ? profileSeatColor(p2Profile, profileColors) : p2IsHuman ? guestColors[2] : cpuColor, seatDefaultColors);
-    if (nextP1.toLowerCase() === p1Color.toLowerCase() && nextP2.toLowerCase() === p2Color.toLowerCase()) return;
-    setThemeColor({ color: { primary: nextP1, secondary: nextP2, tertiary: getThirdColor(nextP1, nextP2) } });
-  }, [lastSelected[1], lastSelected[2], p2IsHuman, guestColors, cpuColor, profileColors, profiles.length]);
+    themeForRef.current = themeFor;
+  }, [themeFor]);
+  useEffect3(() => {
+    const next = themeFor(remembered.p1, remembered.p2);
+    if (sameTheme(themeSettings, next)) return;
+    setThemeColor(next);
+  }, [lastSelected[1], lastSelected[2], p2IsHuman, guestColors, cpuColor, profileColors, profiles.length, dark]);
   useFocusEffect(
     useCallback8(() => {
-      const guest = guestColorsRef.current;
-      const cpu = cpuColorRef.current;
-      const p1Prof = p1ProfileRef.current;
-      const p2Prof = p2ProfileRef.current;
-      const picks = profileColorsRef.current;
-      const nextP1 = p1Prof ? profileSeatColor(p1Prof, picks) : guest[1];
-      const nextP2 = avoidSeatColorClash(nextP1, p2Prof ? profileSeatColor(p2Prof, picks) : p2IsHuman ? guest[2] : cpu, seatDefaultColors);
-      setThemeColor({ color: { primary: nextP1, secondary: nextP2, tertiary: getThirdColor(nextP1, nextP2) } });
+      const next = rememberedColors(p1ProfileRef.current, p2ProfileRef.current, profileColorsRef.current, guestColorsRef.current, cpuColorRef.current);
+      setThemeColor(themeForRef.current(next.p1, next.p2));
     }, [lastSelected[1], lastSelected[2], p2IsHuman, setThemeColor])
   );
   const persistSeatColor = useCallback8(
@@ -631,21 +715,21 @@ function useSeatColors(p2IsHuman) {
     (hex) => {
       const swapped = hex.toLowerCase() === p2Color.toLowerCase();
       const nextP2 = swapped ? p1Color : p2Color;
-      setThemeColor({ color: { primary: hex, secondary: nextP2, tertiary: getThirdColor(hex, nextP2) } });
+      setThemeColor(themeFor(hex, nextP2));
       persistSeatColor(1, hex);
       if (swapped) persistSeatColor(2, nextP2);
     },
-    [setThemeColor, p1Color, p2Color, persistSeatColor]
+    [setThemeColor, themeFor, p1Color, p2Color, persistSeatColor]
   );
   const handleP2ColorChange = useCallback8(
     (hex) => {
       const swapped = hex.toLowerCase() === p1Color.toLowerCase();
       const nextP1 = swapped ? p2Color : p1Color;
-      setThemeColor({ color: { primary: nextP1, secondary: hex, tertiary: getThirdColor(nextP1, hex) } });
+      setThemeColor(themeFor(nextP1, hex));
       persistSeatColor(2, hex);
       if (swapped) persistSeatColor(1, nextP1);
     },
-    [setThemeColor, p1Color, p2Color, persistSeatColor]
+    [setThemeColor, themeFor, p1Color, p2Color, persistSeatColor]
   );
   return { p1Color, p2Color, handleP1ColorChange, handleP2ColorChange };
 }
@@ -671,16 +755,17 @@ function LoadoutScreen({ game }) {
   const { seatTwo: savedSeatTwo, setSeatTwo } = useOpponent();
   const seatTwo = seatTwoFor(savedSeatTwo, game.seatTwo);
   const mode = roundModeFor(seatTwo);
-  const humanSeats = useMemo4(() => humanSeatsFor(mode), [mode]);
+  const humanSeats = useMemo5(() => humanSeatsFor(mode), [mode]);
   const p2IsHuman = mode === "twoPlayer";
   const p2Exists = mode !== "solo";
   const loadout = game.useLoadout(mode);
   const { openFor } = useGameGuide();
   const { profiles, lastSelected, selectProfile } = useProfiles();
   const { orientationMode, p1OnRight, upsideDown, resolved: p1OnRightResolved } = useOrientationState();
-  const fixedSeats = p2IsHuman && (!!game.twoPlayerSeats?.faceToFaceOnWeb || Platform2.OS !== "web");
+  const fixedSeats = p2IsHuman && (!!game.twoPlayerSeats?.faceToFaceOnWeb || Platform3.OS !== "web");
   const fixedUpsideDown = !!game.twoPlayerSeats?.followUpsideDown && orientationMode === "faceToFace" && upsideDown;
   const { panelLayout, panelFadeStyle } = useDualZoneLayout(fixedSeats ? "faceToFace" : orientationMode, fixedSeats ? true : p1OnRight, fixedSeats || p1OnRightResolved, fixedSeats ? fixedUpsideDown : upsideDown, PANEL_SWAP_FADE_MS);
+  const playersRowFade = panelFadeStyle;
   const [settingsOpen, setSettingsOpen] = useState4(false);
   const rotation = getViewRotation(panelLayout.orientationMode, panelLayout.p1OnRight, panelLayout.upsideDown);
   const insets = rotateInsets(useSafeAreaInsets(), rotation);
@@ -709,7 +794,7 @@ function LoadoutScreen({ game }) {
   useEffect4(() => {
     if (!humanSeats.every((s) => ready[s])) return;
     dispatch(liveplayActions.setActiveRound({ game: game.id, mode, settings: roundSettingsRef.current }));
-    router2.push({ pathname: "/play/[game]", params: { game: game.id } });
+    router2.push(playHref(game.id));
   }, [ready, humanSeats, game.id, mode, dispatch]);
   const bg = dark ? "#000000" : "#FFFFFF";
   const fg = dark ? "#FFFFFF" : "#000000";
@@ -737,10 +822,10 @@ function LoadoutScreen({ game }) {
   const sharedControls = showMetaInSharedBand ? /* @__PURE__ */ jsx12(SharedActionBand, { onBack: safeBack, onSettings: () => setSettingsOpen(true), onRandomize: loadout.randomize, onReset: loadout.reset, fg, popoverOpen: optionsPopoverOpen, children: optionsRow }) : optionsRow;
   const controlLook = { accentColor: themeColors.tertiary, mutedColor: fgMuted, dark, rotation };
   const p1Control = loadout.seatControl(1, controlsHost, { ...controlLook, seatColor: p1Color });
-  const p1Panel = /* @__PURE__ */ jsx12(PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), dark, showReadyButton, secondPicker: p1Control, secondPickerId: p1Control ? "p1-control" : void 0, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => router2.push("/profiles") });
+  const p1Panel = /* @__PURE__ */ jsx12(PlayerSetupPanel, { idPrefix: "p1", host: controlsHost, color: p1Color, onColorChange: handleP1ColorChange, swatches: defaultColors, takenColor: p2Exists ? p2Color : void 0, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, isHuman: true, ready: ready[1], onToggleReady: () => setReady((r) => ({ ...r, 1: !r[1] })), dark, showReadyButton, secondPicker: p1Control, secondPickerId: p1Control ? "p1-control" : void 0, profiles, selectedProfileId: lastSelected[1], takenProfileId: p2IsHuman ? lastSelected[2] : null, guestLabel: "P1", onProfileSelect: handleP1ProfileSelect, onManageProfiles: () => router2.push(PROFILES_HREF) });
   const p2Control = p2IsHuman ? loadout.seatControl(2, p2Host, { ...controlLook, seatColor: p2Color }) : void 0;
   const p2Panel = game.seatTwo && /* @__PURE__ */ jsx12(SeatTwoPanel, { idPrefix: "p2", host: p2Host, choices: game.seatTwo, seatTwo, onSeatTwoChange: changeSeatTwo, cpuDifficulty: loadout.cpuDifficulty, profiles, selectedProfileId: lastSelected[2], onProfileSelect: handleP2ProfileSelect, color: p2Color, onColorChange: handleP2ColorChange, swatches: defaultColors, takenColor: p1Color, allowSwapTaken: mode === "vsCpu", colorCaption: pack.colorCaption, dark, secondPicker: p2Control, secondPickerId: p2Control ? "p2-control" : void 0, ready: ready[2], onToggleReady: () => setReady((r) => ({ ...r, 2: !r[2] })), showReadyButton });
-  return /* @__PURE__ */ jsxs5(View2, { style: [styles3.container, { backgroundColor: bg }], children: [
+  return /* @__PURE__ */ jsxs5(View3, { style: [styles3.container, { backgroundColor: bg }], children: [
     /* @__PURE__ */ jsxs5(FakeLandscapeView, { orientationMode: panelLayout.orientationMode, p1OnRight: panelLayout.p1OnRight, upsideDown: panelLayout.upsideDown, style: styles3.rotatable, children: [
       /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null, onPress: controlsHost.close }),
       p2ZoneStyle && /* @__PURE__ */ jsx12(PressAwayOverlay, { active: controlsHost.openId !== null || p2Host.openId !== null, onPress: p2Host.close, style: p2ZoneStyle }),
@@ -757,9 +842,9 @@ function LoadoutScreen({ game }) {
           p2Elevated: p2Host.openId !== null,
           sharedElevated: optionsPopoverOpen
         }
-      ) : /* @__PURE__ */ jsxs5(View2, { style: styles3.stackedZone, children: [
+      ) : /* @__PURE__ */ jsxs5(View3, { style: styles3.stackedZone, children: [
         sharedControls,
-        /* @__PURE__ */ jsxs5(Animated.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, panelFadeStyle], children: [
+        /* @__PURE__ */ jsxs5(Animated.View, { style: [styles3.playersRow, anyPlayerPickerOpen && styles3.playersRowOpen, playersRowFade], children: [
           !isPortrait && panelLayout.p1OnRight ? p2Panel : p1Panel,
           !isPortrait && panelLayout.p1OnRight ? p1Panel : p2Panel
         ] }),
@@ -829,7 +914,7 @@ function LoadoutRoute() {
   const { game: id } = useLocalSearchParams();
   const game = usePackGame(id);
   if (!game) return /* @__PURE__ */ jsx13(Redirect, { href: "/" });
-  if (!hasLoadout(game)) return /* @__PURE__ */ jsx13(Redirect, { href: { pathname: "/play/[game]", params: { game: game.id } } });
+  if (!hasLoadout(game)) return /* @__PURE__ */ jsx13(Redirect, { href: playHref(game.id) });
   return /* @__PURE__ */ jsx13(LoadoutScreen, { game }, game.id);
 }
 function hasLoadout(game) {
@@ -848,20 +933,22 @@ function useResumePoint(gameId) {
   useEffect5(() => {
     if (!gameId) return;
     setLastActiveGame(gameId);
-    return clearLastActiveGame;
+    return () => {
+      if (AppState.currentState === "active") clearLastActiveGame();
+    };
   }, [gameId, setLastActiveGame, clearLastActiveGame]);
 }
 
 // src/screens/HomeScreen.tsx
-import { defaultColors as defaultColors2, useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
+import { defaultColors as defaultColors2, FadingScrollView, useAutoPaperTheme as useAutoPaperTheme4 } from "@rific/auto-paper";
 import { IconButton, Pressable } from "@rific/feedback-press";
 import { FakeLandscapeView as FakeLandscapeView2, useRotation as useRotation4 } from "@tastic/core";
-import { PressAwayOverlay as PressAwayOverlay2, usePopoverHost as usePopoverHost2, useWellColors, WELL_SHADOW } from "@tastic/hud";
-import { ProfilePicker } from "@tastic/profile";
+import { PressAwayOverlay as PressAwayOverlay2, usePopoverHost as usePopoverHost2, useWellColors, WELL_SHADOW } from "@tastic/hud/chrome";
+import { getProfilePickerContentSize, ProfilePicker } from "@tastic/profile";
 import { Redirect as Redirect2, router as router3, useIsFocused } from "expo-router";
-import { useCallback as useCallback10, useEffect as useEffect6, useState as useState6 } from "react";
-import { AppState, ScrollView, StyleSheet as StyleSheet4, View as View3 } from "react-native";
-import { Icon, Text } from "react-native-paper";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo6, useState as useState6 } from "react";
+import { AppState as AppState2, StyleSheet as StyleSheet4, View as View4 } from "react-native";
+import { Icon, Portal, Text } from "react-native-paper";
 
 // src/hooks/useFrozenWhileHidden.ts
 import { useState as useState5 } from "react";
@@ -941,15 +1028,19 @@ function useHomeLayout() {
 }
 
 // src/screens/HomeScreen.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function HomeScreen() {
   const pack = usePack();
   const { consumeResumeGame } = useLastActiveGame();
+  const { autoShowPack } = useGameGuide();
   const [resumeGame] = useState6(() => {
     const id = consumeResumeGame();
     return pack.games.find((g) => g.id === id && g.resumable) ?? null;
   });
-  if (resumeGame) return /* @__PURE__ */ jsx14(Redirect2, { href: { pathname: "/play/[game]", params: { game: resumeGame.id } } });
+  useEffect6(() => {
+    if (!resumeGame) autoShowPack();
+  }, [resumeGame, autoShowPack]);
+  if (resumeGame) return /* @__PURE__ */ jsx14(Redirect2, { href: playHref(resumeGame.id) });
   return /* @__PURE__ */ jsx14(HomeMenu, {});
 }
 function HomeMenu() {
@@ -957,13 +1048,14 @@ function HomeMenu() {
   const rotation = useRotation4();
   const layout = useHomeLayout();
   const { insets } = layout;
-  const { dark } = useAutoPaperTheme4();
-  const { openFirstTime, openFor } = useGameGuide();
+  const { dark, colors } = useAutoPaperTheme4();
+  const { openFirstTime, openFor, openPack } = useGameGuide();
   const [settingsOpen, setSettingsOpen] = useState6(false);
+  const [rulesGame, setRulesGame] = useState6(null);
   const isFocused = useIsFocused();
-  const [appState, setAppState] = useState6(AppState.currentState);
+  const [appState, setAppState] = useState6(AppState2.currentState);
   useEffect6(() => {
-    const subscription = AppState.addEventListener("change", setAppState);
+    const subscription = AppState2.addEventListener("change", setAppState);
     return () => subscription.remove();
   }, []);
   const heroActive = isFocused && appState === "active";
@@ -983,65 +1075,85 @@ function HomeMenu() {
   const closePicker = pickerHost.close;
   useEffect6(() => {
     closePicker();
-  }, [isWide, closePicker]);
-  const bg = dark ? "#000000" : "#FFFFFF";
-  const fg = dark ? "#FFFFFF" : "#000000";
-  const openGame = useCallback10((game) => openFirstTime(game.id, () => router3.push(game.useLoadout ? { pathname: "/loadout/[game]", params: { game: game.id } } : { pathname: "/play/[game]", params: { game: game.id } })), [openFirstTime]);
-  const picker = /* @__PURE__ */ jsx14(ProfilePicker, { idPrefix: "home-p1", host: pickerHost, profiles, selectedId: lastSelected[1], color: p1Color, dark, guestLabel: "P1", onSelect: (profile) => selectProfile(1, profile?.id ?? null), onManage: () => router3.push("/profiles"), colorSection: { value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors2, caption: selectedProfile ? pack.colorCaption : void 0 } });
-  return /* @__PURE__ */ jsxs6(View3, { style: [styles4.container, { backgroundColor: bg }], children: [
-    /* @__PURE__ */ jsxs6(FakeLandscapeView2, { style: styles4.rotatable, children: [
-      /* @__PURE__ */ jsx14(PressAwayOverlay2, { active: pickerHost.openId !== null, onPress: pickerHost.close }),
-      isWide ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        /* @__PURE__ */ jsx14(ScrollView, { style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: /* @__PURE__ */ jsx14(View3, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameTile, { game, width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: () => openFor(game.id) }, game.id)) }) }),
-        /* @__PURE__ */ jsxs6(View3, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
+  }, [isWide, rotation, layout.windowWidth, layout.windowHeight, closePicker]);
+  const bg = pack.Backdrop ? "transparent" : dark ? "#000000" : "#FFFFFF";
+  const fg = pack.foreground ?? (dark ? "#FFFFFF" : "#000000");
+  const { previewColor } = pack;
+  const p1Drawn = previewColor ? previewColor(p1Color, dark) : p1Color;
+  const triggerStyle = useMemo6(() => pack.Backdrop ? [styles4.pill, { backgroundColor: colors.surface }] : void 0, [pack.Backdrop, colors.surface]);
+  const openGame = useCallback10((game) => openFirstTime(game.id, () => router3.push(game.useLoadout ? loadoutHref(game.id) : playHref(game.id))), [openFirstTime]);
+  const openRules = useCallback10((game) => game.Rules ? setRulesGame(game) : openFor(game.id), [openFor]);
+  const colorSection = { value: p1Color, onChange: handleP1ColorChange, swatches: defaultColors2, caption: selectedProfile ? pack.colorCaption : void 0, previewValue: previewColor ? (hex) => previewColor(hex, dark) : void 0 };
+  const usePickerAlign = pack.usePickerAlign ?? noPickerAlign;
+  const pickerSize = getProfilePickerContentSize(profiles.length, true, colorSection);
+  const pickerAlign = usePickerAlign(pickerHost.openId === `${SEAT_ONE_PICKER}-profile`, pickerSize.width, pickerSize.height);
+  const picker = /* @__PURE__ */ jsx14(ProfilePicker, { idPrefix: SEAT_ONE_PICKER, host: pickerHost, profiles, selectedId: lastSelected[1], color: p1Drawn, dark, guestLabel: pack.guestLabel ?? "P1", nullLabel: pack.nullLabel, onSelect: (profile) => selectProfile(1, profile?.id ?? null), onManage: () => router3.push(PROFILES_HREF), colorSection, alignOverride: pickerAlign, triggerStyle });
+  const pressAway = /* @__PURE__ */ jsx14(PressAwayOverlay2, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles4.pressAway });
+  const RulesSheet = rulesGame?.Rules;
+  return /* @__PURE__ */ jsxs6(View4, { style: [styles4.container, { backgroundColor: bg }], children: [
+    /* @__PURE__ */ jsx14(FakeLandscapeView2, { style: styles4.rotatable, children: /* @__PURE__ */ jsxs6(RulesHost, { enabled: pack.games.some((game) => game.Rules), children: [
+      isWide ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        pressAway,
+        /* @__PURE__ */ jsx14(FadingScrollView, { style: [styles4.wideRightPane, { left: layout.paddingLeft + layout.leftPaneWidth + HOME_WIDE_PANE_GAP }], contentContainerStyle: { paddingTop: 16 + insets.top, paddingBottom: 16 + insets.bottom, paddingRight: layout.paddingRight }, children: /* @__PURE__ */ jsx14(View4, { style: [styles4.grid, { width: layout.rightPaneWidth }], children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameTile, { game, width: layout.tileWidth, previewWidth: layout.previewWidth, previewRevealed: previewsRevealed, dark, p1Color, p2Color, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) }) }),
+        /* @__PURE__ */ jsxs6(View4, { style: [styles4.wideLeftPane, { left: layout.paddingLeft, width: layout.leftPaneWidth, paddingTop: HOME_TOP_BAND + insets.top, paddingBottom: 16 + insets.bottom }, pickerHost.openId !== null && styles4.pickerOpen], children: [
           /* @__PURE__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive, fit: layout.heroFit }),
-          /* @__PURE__ */ jsx14(View3, { style: styles4.widePicker, children: picker })
+          /* @__PURE__ */ jsx14(View4, { style: styles4.widePicker, children: picker })
         ] })
-      ] }) : /* @__PURE__ */ jsxs6(ScrollView, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+      ] }) : /* @__PURE__ */ jsxs6(FadingScrollView, { style: styles4.scroll, contentContainerStyle: [styles4.content, { paddingTop: 56 + insets.top, paddingBottom: 24 + insets.bottom, paddingLeft: 16 + insets.left, paddingRight: 16 + insets.right }], children: [
+        pressAway,
         /* @__PURE__ */ jsx14(pack.HeroTitle, { words: pack.wordmark, color: fg, p1Color, p2Color, active: heroActive }),
-        /* @__PURE__ */ jsx14(View3, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
-        /* @__PURE__ */ jsx14(View3, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: () => openFor(game.id) }, game.id)) })
+        /* @__PURE__ */ jsx14(View4, { style: [styles4.picker, pickerHost.openId !== null && styles4.pickerOpen], children: picker }),
+        /* @__PURE__ */ jsx14(View4, { style: styles4.list, children: pack.games.map((game) => /* @__PURE__ */ jsx14(GameRow, { game, dark, p1Color, p2Color, previewRevealed: previewsRevealed, onPress: () => openGame(game), onRules: hasRules(game) ? () => openRules(game) : void 0 }, game.id)) })
       ] }),
-      /* @__PURE__ */ jsx14(IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => router3.push("/stats"), accessibilityLabel: "Stats & Achievements" }),
-      /* @__PURE__ */ jsx14(IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" })
-    ] }),
-    /* @__PURE__ */ jsx14(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation })
+      /* @__PURE__ */ jsx14(IconButton, { icon: "trophy", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, left: 8 + insets.left }], onPress: () => router3.push(STATS_HREF), accessibilityLabel: "Stats & Achievements" }),
+      /* @__PURE__ */ jsx14(IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles4.corner, { top: 8 + insets.top, right: 8 + insets.right }], onPress: () => setSettingsOpen(true), accessibilityLabel: "Settings" }),
+      RulesSheet && /* @__PURE__ */ jsx14(RulesSheet, { visible: true, onDismiss: () => setRulesGame(null) })
+    ] }) }),
+    /* @__PURE__ */ jsx14(SettingsDialog, { visible: settingsOpen, onDismiss: () => setSettingsOpen(false), rotation, onShowHowToPlay: pack.guide ? openPack : void 0 })
   ] });
 }
+var SEAT_ONE_PICKER = "home-p1";
+var noPickerAlign = () => void 0;
+function hasRules(game) {
+  return !!(game.Rules || game.guide);
+}
+function RulesHost({ enabled, children }) {
+  return enabled ? /* @__PURE__ */ jsx14(Portal.Host, { children }) : /* @__PURE__ */ jsx14(Fragment4, { children });
+}
 function GameRow({ game, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = useWellColors();
   const GameIcon = game.icon;
   return (
     // The rules button sits beside the row's own button, laid over its end, not inside it: a button
     // inside a button is invalid on the web.
-    /* @__PURE__ */ jsxs6(View3, { children: [
+    /* @__PURE__ */ jsxs6(View4, { children: [
       /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.row, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
-        game.Preview ? /* @__PURE__ */ jsx14(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ jsx14(View3, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: /* @__PURE__ */ jsx14(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
-        /* @__PURE__ */ jsxs6(View3, { style: styles4.rowText, children: [
+        game.Preview ? /* @__PURE__ */ jsx14(PreviewBox, { game, width: ROW_PREVIEW_WIDTH, revealed: previewRevealed, dark, p1Color, p2Color }) : /* @__PURE__ */ jsx14(View4, { style: [styles4.rowIcon, { backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: GameIcon && /* @__PURE__ */ jsx14(GameIcon, { size: ROW_ICON_SIZE, p1Color, p2Color, dark }) }),
+        /* @__PURE__ */ jsxs6(View4, { style: styles4.rowText, children: [
           /* @__PURE__ */ jsx14(Text, { variant: "titleLarge", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
           /* @__PURE__ */ jsx14(Text, { variant: "bodyMedium", style: { color: well.fgMuted }, numberOfLines: 2, children: game.blurb })
         ] })
       ] }),
-      /* @__PURE__ */ jsx14(Pressable, { onPress: onRules, style: styles4.rulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ jsx14(Icon, { source: "information-outline", size: 22, color: well.fgMuted }) })
+      onRules && /* @__PURE__ */ jsx14(Pressable, { onPress: onRules, style: styles4.rulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ jsx14(Icon, { source: "information-outline", size: 22, color: well.fgMuted }) })
     ] })
   );
 }
 function GameTile({ game, width, previewWidth, dark, p1Color, p2Color, previewRevealed, onPress, onRules }) {
   const well = useWellColors();
-  return /* @__PURE__ */ jsxs6(View3, { style: { width }, children: [
+  return /* @__PURE__ */ jsxs6(View4, { style: { width }, children: [
     /* @__PURE__ */ jsxs6(Pressable, { onPress, style: [styles4.tile, { backgroundColor: well.bg }], accessibilityRole: "button", accessibilityLabel: game.title, children: [
       /* @__PURE__ */ jsx14(PreviewBox, { game, width: previewWidth, revealed: previewRevealed, dark, p1Color, p2Color }),
       /* @__PURE__ */ jsx14(Text, { variant: "titleMedium", style: [styles4.rowTitle, { color: well.fg }], numberOfLines: 1, children: game.title }),
       /* @__PURE__ */ jsx14(Text, { variant: "bodySmall", style: { color: well.fgMuted }, numberOfLines: 3, children: game.blurb })
     ] }),
-    /* @__PURE__ */ jsx14(Pressable, { onPress: onRules, style: styles4.tileRulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ jsx14(Icon, { source: "information-outline", size: 20, color: "#FFFFFF" }) })
+    onRules && /* @__PURE__ */ jsx14(Pressable, { onPress: onRules, style: styles4.tileRulesButton, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: `${game.title} rules`, children: /* @__PURE__ */ jsx14(Icon, { source: "information-outline", size: 20, color: "#FFFFFF" }) })
   ] });
 }
 function PreviewBox({ game, width, revealed, dark, p1Color, p2Color }) {
   const height = Math.round(width / PREVIEW_ASPECT);
   const { Preview, icon: GameIcon } = game;
   const iconSize = Math.min(height, ROW_ICON_SIZE);
-  return /* @__PURE__ */ jsx14(View3, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ jsx14(Preview, { width, height, p1Color, p2Color, dark }) : /* @__PURE__ */ jsx14(View3, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ jsx14(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
+  return /* @__PURE__ */ jsx14(View4, { style: [styles4.preview, { width, height, backgroundColor: dark ? ICON_DARK_BG : ICON_LIGHT_BG }], children: Preview ? revealed && /* @__PURE__ */ jsx14(Preview, { width, height, p1Color, p2Color, dark }) : GameIcon && /* @__PURE__ */ jsx14(View4, { style: [styles4.previewIcon, { width: iconSize, height: iconSize, borderRadius: iconSize * 0.22 }], children: /* @__PURE__ */ jsx14(GameIcon, { size: iconSize, p1Color, p2Color, dark }) }) });
 }
 var ROW_ICON_SIZE = 56;
 var ICON_LIGHT_BG = "#FAFAFA";
@@ -1076,6 +1188,15 @@ var styles4 = StyleSheet4.create({
   pickerOpen: {
     zIndex: 100
   },
+  // Seat 1's button on the theme's surface (over a backdrop), the same pill as the tiles' wells.
+  pill: {
+    borderRadius: 999
+  },
+  // Over the rows (and, wide, the grid), whose own stacking is unset, so a press on them reaches it on
+  // the web too, and under the raised button and left pane, so the menu's rows stay pressable.
+  pressAway: {
+    zIndex: 5
+  },
   // The preview's own rounding, clipping whatever it draws to the box.
   preview: {
     alignItems: "center",
@@ -1166,66 +1287,109 @@ var styles4 = StyleSheet4.create({
 
 // src/screens/ProfilesRoute.tsx
 import { defaultColors as defaultColors3 } from "@rific/auto-paper";
+import { RotatedFrame as RotatedFrame2 } from "@tastic/hud/chrome";
 import { ProfilesScreen } from "@tastic/profile";
 import { jsx as jsx15 } from "react/jsx-runtime";
+var ROSTER_MAX_WIDTH = 640;
+function useRosterAlign(open, contentWidth, contentHeight) {
+  const { usePickerAlign } = usePack();
+  return usePickerAlign(open, contentWidth, contentHeight, { maxContentWidth: ROSTER_MAX_WIDTH });
+}
 function ProfilesRoute() {
   const { profiles, createProfile, updateProfile, deleteProfile } = useProfiles();
-  return /* @__PURE__ */ jsx15(ProfilesScreen, { profiles, defaultColor: defaultColors3[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: safeBack });
+  const { Backdrop, foreground, newProfileColor, usePickerAlign } = usePack();
+  return /* @__PURE__ */ jsx15(RotatedFrame2, { rotatedSafeArea: true, portalHost: true, maxContentWidth: ROSTER_MAX_WIDTH, children: /* @__PURE__ */ jsx15(ProfilesScreen, { profiles, defaultColor: newProfileColor ?? defaultColors3[0].value, onCreate: (patch) => createProfile(patch), onSave: (id, patch) => updateProfile(id, patch), onDelete: deleteProfile, onBack: safeBack, fg: foreground, bg: Backdrop ? "transparent" : void 0, useColorPickerAlign: usePickerAlign ? useRosterAlign : void 0 }) });
 }
 
 // src/screens/StatsScreen.tsx
 import { useAutoPaperTheme as useAutoPaperTheme5 } from "@rific/auto-paper";
-import { FakeLandscapeView as FakeLandscapeView3, rotateInsets as rotateInsets3, useRotation as useRotation5 } from "@tastic/core";
-import { BaseStatsScreen, PressAwayOverlay as PressAwayOverlay3, usePopoverHost as usePopoverHost3 } from "@tastic/hud";
-import { OptionPicker as OptionPicker2 } from "@tastic/profile";
-import { useMemo as useMemo5, useState as useState7 } from "react";
-import { StyleSheet as StyleSheet5, View as View4 } from "react-native";
+import { BaseStatsScreen, PressAwayOverlay as PressAwayOverlay3, RotatedFrame as RotatedFrame3, usePopoverHost as usePopoverHost3 } from "@tastic/hud/chrome";
+import { getOptionPickerContentSize as getOptionPickerContentSize2, OptionPicker as OptionPicker2 } from "@tastic/profile";
+import { useMemo as useMemo7, useState as useState7 } from "react";
+import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
 import { SegmentedButtons, Text as Text2 } from "react-native-paper";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { useDispatch as useDispatch10 } from "react-redux";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var STATS = "stats";
+var ACHIEVEMENTS = "achievements";
 var TABS = [
-  { value: "stats", label: "Stats", icon: "chart-box-outline" },
-  { value: "achievements", label: "Achievements", icon: "trophy-outline" }
+  { value: STATS, label: "Stats", icon: "chart-box-outline" },
+  { value: ACHIEVEMENTS, label: "Achievements", icon: "trophy-outline" }
 ];
+var LABEL_WIDE_TAB = { flexBasis: "auto", flexGrow: 1, flexShrink: 1 };
+var NO_PACK_TABS = [];
 var EVERYONE = "__everyone__";
 var ALL_GAMES = "__all__";
 var PLAYER_PICKER_ID = "stats-player";
 var GAME_PICKER_ID = "stats-game";
+var STATS_MAX_WIDTH = 640;
 function StatsScreen() {
+  const pickerHost = usePopoverHost3();
+  return /* @__PURE__ */ jsx16(StatsPressAway, { host: pickerHost, children: /* @__PURE__ */ jsx16(RotatedFrame3, { rotatedSafeArea: true, portalHost: true, maxContentWidth: STATS_MAX_WIDTH, children: /* @__PURE__ */ jsx16(StatsContent, { pickerHost }) }) });
+}
+function StatsPressAway({ host, children }) {
+  return /* @__PURE__ */ jsx16(View5, { testID: "stats-press-away", style: styles5.screen, onStartShouldSetResponder: () => host.openId !== null, onResponderRelease: host.close, children });
+}
+var useNoPackReset = () => null;
+var noPickerAlign2 = () => void 0;
+function StatsContent({ pickerHost }) {
   const pack = usePack();
   const { dark, colors } = useAutoPaperTheme5();
-  const rotation = useRotation5();
-  const insets = rotateInsets3(useSafeAreaInsets3(), rotation);
-  const { profiles } = useProfiles();
+  const insets = useSafeAreaInsets3();
+  const { profiles, lastSelected } = useProfiles();
   const dispatch = useDispatch10();
-  const pickerHost = usePopoverHost3();
-  const [tab, setTab] = useState7("stats");
+  const fg = pack.foreground ?? colors.onBackground;
+  const [tab, setTab] = useState7(STATS);
   const [gameId, setGameId] = useState7(ALL_GAMES);
-  const [selectedProfileId, setSelectedProfileId] = useState7(null);
-  const profileId = selectedProfileId && profiles.some((p) => p.id === selectedProfileId) ? selectedProfileId : null;
+  const [selectedProfileId, setSelectedProfileId] = useState7(() => pack.guestStats ? lastSelected[1] ?? GUEST_PLAYER_ID : null);
+  const profileId = selectedProfileId && profiles.length > 0 && (pack.guestStats && selectedProfileId === GUEST_PLAYER_ID || profiles.some((p) => p.id === selectedProfileId)) ? selectedProfileId : null;
   const games = gameId === ALL_GAMES ? pack.games : pack.games.filter((g) => g.id === gameId);
-  const playerOptions = useMemo5(() => [{ value: EVERYONE, label: "Everyone", icon: "account-group" }, ...profiles.map((p) => ({ value: p.id, label: p.name, icon: "account", color: p.color }))], [profiles]);
-  const gameOptions = useMemo5(() => [{ value: ALL_GAMES, label: "All Games", icon: "view-grid-outline" }, ...pack.games.map((g) => ({ value: g.id, label: g.title }))], [pack.games]);
-  const resetScope = games.length === 1 ? games[0].title : "every game";
-  const onReset = () => games.forEach((g) => dispatch(g.resetStats()));
-  return /* @__PURE__ */ jsx16(FakeLandscapeView3, { style: styles5.rotatable, children: /* @__PURE__ */ jsxs7(BaseStatsScreen, { title: tab === "stats" ? "Stats" : "Achievements", onBack: safeBack, insets, onReset, resetLabel: games.length === 1 ? `Reset ${resetScope} Stats` : "Reset All Stats", resetConfirmTitle: "Reset Stats?", resetConfirmBody: `Erases every player's stats and achievements in ${resetScope}. This cannot be undone.`, rotation, children: [
+  const packTabs = pack.statsTabs ?? NO_PACK_TABS;
+  const packTab = packTabs.find((t) => t.value === tab);
+  const showGamePicker = !(tab === ACHIEVEMENTS && pack.AchievementList);
+  const playerOptions = useMemo7(() => [{ value: EVERYONE, label: "Everyone", icon: "account-group" }, ...pack.guestStats ? [{ value: GUEST_PLAYER_ID, label: "Guest", icon: "account-outline" }] : [], ...profiles.map((p) => ({ value: p.id, label: p.name, icon: "account", color: pack.previewColor ? pack.previewColor(p.color, dark) : p.color }))], [profiles, pack, dark]);
+  const gameOptions = useMemo7(() => [{ value: ALL_GAMES, label: "All Games", icon: "view-grid-outline" }, ...pack.games.map((g) => ({ value: g.id, label: g.title }))], [pack.games]);
+  const tabButtons = useMemo7(() => packTabs.length > 0 ? [{ value: STATS, label: "Stats" }, ...packTabs.map(({ value, label }) => ({ value, label })), { value: ACHIEVEMENTS, label: "Achievements" }].map((button) => ({ ...button, style: LABEL_WIDE_TAB })) : TABS, [packTabs]);
+  const title = tab === STATS ? "Stats" : tab === ACHIEVEMENTS ? "Achievements" : packTab?.label ?? "";
+  const usePackReset = pack.resetStats?.useReset ?? useNoPackReset;
+  const packReset = usePackReset();
+  const reset = resetFor(pack, packReset, profileId, profiles, games, () => games.forEach((g) => g.resetStats && dispatch(g.resetStats())));
+  const usePickerAlign = pack.usePickerAlign ?? noPickerAlign2;
+  const playerSize = getOptionPickerContentSize2(playerOptions.length);
+  const gameSize = getOptionPickerContentSize2(gameOptions.length);
+  const playerAlign = usePickerAlign(pickerHost.openId === PLAYER_PICKER_ID, playerSize.width, playerSize.height);
+  const gameAlign = usePickerAlign(pickerHost.openId === GAME_PICKER_ID, gameSize.width, gameSize.height);
+  const surface = pack.Backdrop ? { backgroundColor: colors.surface } : void 0;
+  const triggerStyle = pack.Backdrop ? [styles5.pill, surface] : void 0;
+  const PackTabContent = packTab?.Content;
+  return /* @__PURE__ */ jsxs7(BaseStatsScreen, { title, onBack: safeBack, insets, onReset: reset.onReset, resetLabel: reset.label, resetConfirmTitle: reset.title, resetConfirmBody: reset.body, fg: pack.foreground, bg: pack.Backdrop ? "transparent" : void 0, rotation: 0, children: [
     /* @__PURE__ */ jsx16(PressAwayOverlay3, { active: pickerHost.openId !== null, onPress: pickerHost.close, style: styles5.pressAway }),
-    /* @__PURE__ */ jsx16(SegmentedButtons, { value: tab, onValueChange: (value) => setTab(value), buttons: TABS, style: styles5.tabs }),
-    /* @__PURE__ */ jsxs7(View4, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], children: [
-      profiles.length > 0 && /* @__PURE__ */ jsx16(OptionPicker2, { id: PLAYER_PICKER_ID, host: pickerHost, options: playerOptions, value: profileId ?? EVERYONE, onChange: (value) => setSelectedProfileId(value === EVERYONE ? null : value), color: colors.primary, dark, icon: profileId ? "account" : "account-group" }),
-      /* @__PURE__ */ jsx16(OptionPicker2, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline" })
+    /* @__PURE__ */ jsx16(SegmentedButtons, { value: tab, onValueChange: setTab, buttons: tabButtons, style: [styles5.tabs, surface] }),
+    /* @__PURE__ */ jsxs7(View5, { style: [styles5.filters, pickerHost.openId !== null && styles5.filtersOpen], onStartShouldSetResponder: () => pickerHost.openId !== null, children: [
+      profiles.length > 0 && /* @__PURE__ */ jsx16(OptionPicker2, { id: PLAYER_PICKER_ID, host: pickerHost, options: playerOptions, value: profileId ?? EVERYONE, onChange: (value) => setSelectedProfileId(value === EVERYONE ? null : value), color: colors.primary, dark, icon: profileId ? "account" : "account-group", alignOverride: playerAlign, triggerStyle }),
+      showGamePicker && /* @__PURE__ */ jsx16(OptionPicker2, { id: GAME_PICKER_ID, host: pickerHost, options: gameOptions, value: gameId, onChange: setGameId, color: colors.primary, dark, icon: "view-grid-outline", alignOverride: gameAlign, triggerStyle })
     ] }),
-    tab === "stats" && pack.StatsSections && /* @__PURE__ */ jsx16(pack.StatsSections, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
-    games.map((game) => /* @__PURE__ */ jsx16(GameStats, { game, tab, profileId, showTitle: games.length > 1 }, game.id))
-  ] }) });
+    tab === STATS && pack.StatsSections && /* @__PURE__ */ jsx16(pack.StatsSections, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
+    PackTabContent && /* @__PURE__ */ jsx16(PackTabContent, { profileId, gameId: gameId === ALL_GAMES ? null : gameId }),
+    tab === ACHIEVEMENTS && pack.AchievementList ? /* @__PURE__ */ jsx16(pack.AchievementList, { profileId }) : (tab === STATS || tab === ACHIEVEMENTS) && games.map((game) => /* @__PURE__ */ jsx16(GameStats, { game, tab, profileId, showTitle: games.length > 1 && pack.statsGameTitles !== false, titleColor: fg }, game.id))
+  ] });
 }
-function GameStats({ game, tab, profileId, showTitle }) {
-  const { colors } = useAutoPaperTheme5();
+function resetFor(pack, packReset, profileId, profiles, games, resetGames) {
+  if (pack.resetStats && packReset) {
+    const name = profileId === GUEST_PLAYER_ID ? "Guest" : profileId ? profiles.find((p) => p.id === profileId)?.name ?? null : null;
+    return { onReset: () => packReset(profileId), ...pack.resetStats.labels(name) };
+  }
+  const scope = games.length === 1 ? games[0].title : "every game";
+  return { onReset: resetGames, label: games.length === 1 ? `Reset ${scope} Stats` : "Reset All Stats", title: "Reset Stats?", body: `Erases every player's stats and achievements in ${scope}. This cannot be undone.` };
+}
+function GameStats({ game, tab, profileId, showTitle, titleColor }) {
   const { StatsSections, AchievementList } = game;
-  return /* @__PURE__ */ jsxs7(View4, { style: styles5.game, children: [
-    showTitle && /* @__PURE__ */ jsx16(Text2, { variant: "titleLarge", style: [styles5.gameTitle, { color: colors.onBackground }], children: game.title }),
-    tab === "stats" ? /* @__PURE__ */ jsx16(StatsSections, { profileId }) : /* @__PURE__ */ jsx16(AchievementList, { profileId })
+  const Sections = tab === STATS ? StatsSections : AchievementList;
+  if (!Sections) return null;
+  return /* @__PURE__ */ jsxs7(View5, { style: styles5.game, children: [
+    showTitle && /* @__PURE__ */ jsx16(Text2, { variant: "titleLarge", style: [styles5.gameTitle, { color: titleColor }], children: game.title }),
+    /* @__PURE__ */ jsx16(Sections, { profileId })
   ] });
 }
 var styles5 = StyleSheet5.create({
@@ -1245,14 +1409,17 @@ var styles5 = StyleSheet5.create({
     fontWeight: "bold",
     marginTop: 8
   },
+  // A picker's button on the theme's surface (over a backdrop), the same pill as Home's.
+  pill: {
+    borderRadius: 999
+  },
   pressAway: {
     zIndex: 50
   },
-  // A real full-bleed box for FakeLandscapeView to size its turned content against.
-  rotatable: {
+  screen: {
     flex: 1
   },
-  // SegmentedButtons' own rounding.
+  // SegmentedButtons' own rounding, so a surface behind it is the same pill.
   tabs: {
     borderRadius: 20
   }
@@ -1288,7 +1455,7 @@ import { defaultSoundSettings, hapticReducer, soundReducer } from "@rific/feedba
 import { profilesReducer } from "@tastic/profile";
 var initialSoundSettings = { ...defaultSoundSettings, enabled: !__DEV__ };
 var appSoundReducer = (state = initialSoundSettings, action) => soundReducer(state, action);
-function createShellReducers({ seatColors, appearance = "system" }) {
+function createShellReducers({ seatColors, appearance = "system", seatTheme }) {
   return {
     // Explicit primary/secondary triad (rather than a single seed expanded via harmony) so the pack's
     // identity is pinned exactly instead of drifting with whatever hue math a harmony offset would
@@ -1297,7 +1464,9 @@ function createShellReducers({ seatColors, appearance = "system" }) {
     // derived, not picked, via getThirdColor: the hue maximally distant from both (see
     // @rific/auto-paper's README "Explicit triad" section). The appearance is the pack's ('system',
     // createThemeReducer's own default, when it sets none).
-    theme: createThemeReducer({ appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: getThirdColor2(seatColors[1], seatColors[2]) } }),
+    // A pack with its own seatTheme starts from what seat 1's default color makes of it instead (dark
+    // only when the pack's appearance is; hooks/useSeatColors.ts re-applies it with the live mode).
+    theme: createThemeReducer(seatTheme ? { appearance, ...seatTheme(seatColors, appearance === "dark") } : { appearance, color: { primary: seatColors[1], secondary: seatColors[2], tertiary: getThirdColor2(seatColors[1], seatColors[2]) } }),
     haptic: hapticReducer,
     sound: appSoundReducer,
     // @rific/core's Keep Awake setting (see Providers.tsx's KeepAwakeBridge), under the namespace its
@@ -1325,7 +1494,7 @@ var errorMiddleware = () => (next) => (action) => {
   if (!hasError(action)) return next(action);
   return action;
 };
-function createPackStore(pack, { keyPrefix, migrate }) {
+function createPackStore(pack, { keyPrefix, migrate, blacklist = [], serializableIgnoredPaths = [], middleware = [] }) {
   const gameReducers = Object.assign({}, ...pack.games.map((game) => game.reducers));
   const resumeReducers = pack.games.some((game) => game.resumable) ? { lastActiveGame: lastActiveGameSlice_default } : {};
   const rootReducer = combineReducers({ ...createShellReducers(pack), ...resumeReducers, ...pack.reducers, ...gameReducers });
@@ -1343,7 +1512,7 @@ function createPackStore(pack, { keyPrefix, migrate }) {
       // failing to ever resolve at all isn't a failure mode worth a 5s failsafe for.
       timeout: 0,
       // liveplay is per-round state that must never survive a relaunch (see liveplaySlice.ts).
-      blacklist: ["liveplay"],
+      blacklist: ["liveplay", ...blacklist],
       migrate
     },
     rootReducer
@@ -1353,10 +1522,11 @@ function createPackStore(pack, { keyPrefix, migrate }) {
       const defaultMiddleware = getDefaultMiddleware({
         immutableCheck: false,
         serializableCheck: {
-          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+          ignoredPaths: [...serializableIgnoredPaths]
         }
       });
-      return defaultMiddleware.concat(errorMiddleware);
+      return defaultMiddleware.concat(errorMiddleware, ...middleware);
     },
     reducer: persistedReducer
   });
@@ -1407,7 +1577,7 @@ function forgetProfileAchievements(dropStats) {
 
 // src/gameStats.tsx
 import { createAchievementsSlice, mapUnlocksBySeat, useAchievements } from "@tastic/achievements";
-import { createContext as createContext5, useCallback as useCallback11, useContext as useContext5, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useCallback as useCallback11, useContext as useContext5, useMemo as useMemo8 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var SEATS = [1, 2];
 function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileStatsView }) {
@@ -1440,7 +1610,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
       },
       [recordOutcome]
     );
-    const value = useMemo6(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
+    const value = useMemo8(() => ({ stats, unlockedAchievements, record, resetAll }), [stats, unlockedAchievements, record, resetAll]);
     return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
   }
   function useStats() {
@@ -1452,7 +1622,7 @@ function createGameStats({ key, defaultStats, isValidStats, catalog, getProfileS
 }
 
 // src/playerSettings.ts
-import { useCallback as useCallback12, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo9 } from "react";
 import { useDispatch as useDispatch11, useSelector as useSelector9 } from "react-redux";
 var SEATS2 = [1, 2];
 function seatPlayerKey(selection, seat) {
@@ -1496,7 +1666,7 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
     const saved = useSelector9((state) => state[settingsKey]);
     const controls = useSelector9((state) => state[controlsKey]);
     const dispatch = useDispatch11();
-    const settings = useMemo7(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
+    const settings = useMemo9(() => compose(saved, controls, selection, seatTwoIsPerson), [saved, controls, selection, seatTwoIsPerson]);
     const setSettings = useCallback12(
       (next) => {
         const { controlScheme, ...changes } = next;
@@ -1516,6 +1686,7 @@ function createPlayerSettings({ id, defaults, distinctControls }) {
 export {
   DEFAULT_APP_SETTINGS,
   DEFAULT_OPPONENT,
+  GUEST_PLAYER_ID,
   HomeScreen,
   LoadoutRoute,
   PREVIEW_ASPECT,