@meycult/core 0.1.0 → 0.2.0

package/src/index.ts

@@ -1,22 +1,82 @@
-export { cn } from './cn'
-export { COLORS, GLOW, FONTS } from './tokens'
+// Generic — single-sourced in @meyvoid/core, re-exported here so hosts
+// keep one import root. Do NOT re-add local copies (the sin is the second copy).
+export { cn } from '@meyvoid/core/cn'
+export type { NavLink, LinkComponent } from '@meyvoid/core'
+export {
+  createSupabaseBrowser,
+  chunkedCookieStorage,
+  exchangeCodeForSession,
+  createPersistStore,
+  RequireAuth,
+  formatPrice,
+  isAbsoluteUrl,
+  resolveImage,
+  Callout,
+  Tooltip,
+  TabBar,
+  ChipGroup,
+  DropdownFilter,
+  StatBar,
+} from '@meyvoid/core'
+export type {
+  BrowserOptions,
+  BrowserEnv,
+  GateUser as SessionProfile,
+  CalloutProps,
+  CalloutType,
+} from '@meyvoid/core'
+// NOTE: server-only helpers (next/headers, next/server) live in @meyvoid/core
+// but are intentionally NOT re-exported — the barrel ships to client
+// components. Deep-import from void:
+//   import { createSupabaseServerClient } from '@meyvoid/core/supabase/server'
+//   import { updateSession } from '@meyvoid/core/supabase/proxy'
+export { COLORS, GLOW, GRADIENTS, FONTS } from './tokens'
 export { BRAND } from './brand'
+export { PRODUCT, BAZAAR } from './product'
 
 export { default as Sigil } from './brand/Sigil'
 export { default as CultEye, GazeProvider, useGaze } from './brand/CultEye'
 export { default as Logo } from './brand/Logo'
 export { default as BrandName } from './brand/BrandName'
+export { default as PyramidName } from './brand/PyramidName'
 export {
   InfluenceIcon,
   FateIcon,
   InfluenceText,
   FateText,
+  MeyInfluence,
+  MeyFate,
 } from './brand/TokenIcons'
+export type { TokenIconProps } from './brand/TokenIcons'
 export { default as LaunchButton } from './brand/LaunchButton'
 export { default as CornerGlow } from './brand/CornerGlow'
-export { default as GodEmperorBrand } from './brand/GodEmperor'
 
 export { Card } from './ui/card'
+export type { CardProps, CardVariant } from './ui/card'
+export { CultButton } from './ui/CultButton'
+export type { CultButtonProps, CultButtonVariant, CultButtonSize } from './ui/CultButton'
+export { RarityBadge } from './ui/RarityBadge'
+export { TierBadge, BadgeCategoryChip, BADGE_CATEGORY_ICONS, RESULT_COLORS } from './ui/badges'
+export { VIRTUE_META, TIER_NAMES, getVirtueTier, VirtueBar } from './ui/virtues'
+export type {
+  VirtueName,
+  Virtues,
+  VirtueXP,
+  VirtueTierLevel,
+  VirtueTierLabel,
+  CultId,
+  Category,
+  HeroType,
+  PredictionResult,
+  Rarity,
+  BadgeTier,
+  BadgeCategory,
+} from './game/types'
+export { CULT_META, CULT_ORDER, VIRTUE_ORDER, CULT_COLORS, FALLBACK_CULT, getCult } from './game/cults'
+export type { CultMeta } from './game/cults'
+export { CATEGORY_COLORS, CATEGORY_LABELS, HERO_TYPE_LABELS } from './game/categories'
+export { rarityTier, formatVolume, formatDeadline, formatDeadlineShort } from './game/quests'
+export type { DensityTier, Deadline } from './game/quests'
 export { CultCountdown } from './components/CultCountdown'
 export {
   UNVEIL_AT,
@@ -36,26 +96,9 @@ export {
   HypeRow,
   NotifyPanel,
 } from './unveil/blocks'
-export type { WhereWhenProps, UnveilCard } from './unveil/blocks'
+export type { WhereWhenProps, UnveilCard, UnveilHeroSizes, UnveilHeroRoutes, HypeRowRoutes } from './unveil/blocks'
 export { TabletPanel } from './unveil/Tablet'
 export { useUnveilBg, BG_EFFECTS, BG_DEFAULTS, parseBgQuery } from './unveil/bg'
 export type { BgEffect } from './unveil/bg'
 export { ShimmerButton } from './ui/shimmer-button'
 export { AnimatedShinyText } from './ui/animated-shiny-text'
-export { Callout } from './ui/Callout'
-
-export type { NavLink, LinkComponent } from './shell/types'
-
-export { createSupabaseBrowser, chunkedCookieStorage } from './supabase/browser'
-// NOTE: server-only helpers (next/headers, next/server) are intentionally
-// NOT re-exported here — the barrel ships to client components. Deep-import:
-//   import { createSupabaseServerClient } from '@meycult/core/supabase/server'
-//   import { updateSession } from '@meycult/core/supabase/proxy'
-//   import { exchangeCodeForSession } from '@meycult/core/supabase/callback'
-
-export type { SessionProfile } from './auth/types'
-export { RequireAuth } from './auth/Gate'
-
-export { formatPrice } from './lib/money'
-export { isAbsoluteUrl, resolveImage } from './lib/images'
-export { createPersistStore } from './lib/store'

package/src/product.ts

@@ -0,0 +1,17 @@
+/** Pyramid — the MeyCult game product (app). Master brand stays BRAND (MeyCult);
+ * Pyramid is the product lockup, domain, and Bazaar sibling reference. */
+
+export const PRODUCT = {
+  name: 'Pyramid',
+  tagline: 'Enter the Pyramid',
+  description: 'The MeyCult prediction arena. Wager MeyFate, grow MeyInfluence, ascend the virtues.',
+  domain: 'pyramid.meycult.com',
+} as const
+
+/** Bazaar — the MeyCult shop product (store). Display name; shop.meycult.com follows later. */
+export const BAZAAR = {
+  name: 'Bazaar',
+  tagline: 'Relics of the Cult',
+  description: 'Supporter packs and MeyCult merch. Every purchase funds development.',
+  domain: 'shop.meycult.com',
+} as const

package/src/styles/theme.css

@@ -323,12 +323,24 @@ h2 {
   color: var(--color-accent);
 }
 
-/* ── Light glow behind Unveil, same treatment as MeyCult wordmark ── */
+/* ── Yellow glow behind Unveil, same treatment as MeyCult wordmark ── */
 .unveil-glow {
   text-shadow:
-    0 0 40px rgba(255, 255, 255, 0.35),
-    0 0 80px rgba(255, 255, 255, 0.15),
-    0 0 120px rgba(255, 255, 255, 0.08);
+    0 0 40px rgba(255, 230, 0, 0.35),
+    0 0 80px rgba(255, 230, 0, 0.15),
+    0 0 120px rgba(255, 230, 0, 0.08);
+}
+
+/* ── Countdown bob: gentle levitation for the DD:HH:MM:SS block ── */
+@keyframes countdown-bob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-7px); }
+}
+.countdown-bob {
+  animation: countdown-bob 4s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .countdown-bob { animation: none; }
 }
 
 /* ── Unveil tablet: yellow stone, engraved glyph frieze ── */
@@ -336,9 +348,9 @@ h2 {
   position: relative;
   border-radius: 18px;
   border: 2px solid rgba(255, 230, 0, 0.35);
-  background: linear-gradient(180deg, #2a2003 0%, #171402 100%);
+  background: linear-gradient(180deg, rgba(42, 32, 3, 0.33) 0%, rgba(23, 20, 2, 0.33) 100%);
   box-shadow:
-    inset 0 2px 24px rgba(0, 0, 0, 0.65),
+    inset 0 2px 24px rgba(0, 0, 0, 0.22),
     inset 0 -1px 0 rgba(255, 247, 161, 0.18),
     0 0 60px rgba(255, 230, 0, 0.25);
   padding: 2rem 1.5rem;
@@ -394,3 +406,82 @@ h2 {
 .table-glass tr:last-child td {
   border-bottom: none;
 }
+
+/* Pyramid — product wordmark (the game). New Rocker accent, brand glow. */
+.brand-pyramid {
+  font-family: var(--font-cult);
+  color: var(--color-accent);
+  text-shadow: 0 0 40px rgba(255,230,0,0.35), 0 0 80px rgba(255,230,0,0.18), 0 0 120px rgba(255,230,0,0.08);
+}
+
+/* Glass card hover variants — the app's canonical Card API (glow/clarity/depth/reflect). */
+/* Glass card — clarity deepen on hover */
+.card-clarity {
+  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s, backdrop-filter 0.4s;
+}
+.card-clarity:hover {
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-4px);
+}
+
+/* Glass card — edge glow on hover */
+.card-glow {
+  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
+}
+.card-glow:hover {
+  border-color: rgba(255, 230, 0, 0.4);
+  box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.2),
+              0 0 24px rgba(255, 230, 0, 0.25),
+              inset 0 0 24px rgba(255, 230, 0, 0.05);
+  background: rgba(255, 230, 0, 0.05);
+}
+
+/* Glass card — depth lift on hover */
+.card-depth {
+  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+.card-depth:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 16px 40px rgba(0, 0, 0, 0.4), 0 32px 60px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.10);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+/* Glass card — reflective sweep on hover */
+.card-reflect {
+  position: relative;
+  overflow: hidden;
+  transition: background 0.4s, border-color 0.4s, transform 0.4s;
+}
+.card-reflect::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -60%;
+  width: 40%;
+  height: 200%;
+  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.12), transparent);
+  transform: skewX(-20deg);
+  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+.card-reflect:hover::before {
+  left: 120%;
+}
+.card-reflect:hover {
+  background: rgba(255, 255, 255, 0.10);
+  border-color: rgba(255, 255, 255, 0.20);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-clarity, .card-glow, .card-depth, .card-reflect {
+    transition: none !important;
+  }
+  .card-reflect::before {
+    transition: none !important;
+  }
+}

package/src/tokens.ts

@@ -1,7 +1,8 @@
 // TS mirror of src/styles/theme.css @theme tokens — for canvas/tests/Node use.
+// CSS wins on conflict: bg #141003 + yesBg 0.21 locked (P0).
 
 export const COLORS = {
-  bg: '#0B0A02',
+  bg: '#141003',
   surface: '#171402',
   panel: 'rgba(26, 22, 3, 0.55)',
   accent: '#FFE600',
@@ -11,7 +12,7 @@ export const COLORS = {
   line: 'rgba(255, 230, 0, 0.18)',
   yes: '#FFE600',
   no: '#e04a4a',
-  yesBg: 'rgba(255, 230, 0, 0.08)',
+  yesBg: 'rgba(255, 230, 0, 0.21)',
   noBg: 'rgba(224, 74, 74, 0.12)',
   success: '#FFE600',
   danger: '#e04a4a',
@@ -24,10 +25,17 @@ export const COLORS = {
 
 export const GLOW = {
   text: '0 0 20px rgba(255, 230, 0, 0.18)',
+  brandMey:
+    '0 0 40px rgba(255,255,255,0.35), 0 0 80px rgba(255,255,255,0.15), 0 0 120px rgba(255,255,255,0.08)',
   brandCult:
     '0 0 40px rgba(255,230,0,0.35), 0 0 80px rgba(255,230,0,0.18), 0 0 120px rgba(255,230,0,0.08)',
 } as const
 
+export const GRADIENTS = {
+  launch: 'linear-gradient(135deg, #FFE600 0%, #FFF7A1 100%)',
+  launchBody: 'linear-gradient(180deg, #141003 0%, #4A3D00 100%)',
+} as const
+
 export const FONTS = {
   heading: 'Rajdhani, sans-serif',
   body: '"Space Grotesk", sans-serif',

package/src/ui/CultButton.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@meyvoid/core/cn'
+import type { ReactNode } from 'react'
+
+export type CultButtonVariant = 'accent' | 'premium' | 'ghost' | 'danger'
+export type CultButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+
+export interface CultButtonProps {
+  children: ReactNode
+  variant?: CultButtonVariant
+  size?: CultButtonSize
+  className?: string
+  onClick?: () => void
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+/** Cult-themed button. (The generic void Button stays minimal/white;
+ * this is the themed superset — do NOT merge them.) */
+export function CultButton({
+  children,
+  variant = 'accent',
+  size = 'md',
+  className,
+  onClick,
+  disabled,
+  type = 'button',
+}: CultButtonProps) {
+  const variants: Record<CultButtonVariant, string> = {
+    accent: 'bg-accent hover:bg-accent/80 text-bg border-accent/50',
+    premium: 'bg-premium-500/20 hover:bg-premium-500/30 text-premium-400 border-premium-500/40',
+    ghost: 'bg-transparent hover:bg-surface/50 text-text-muted border-line/20',
+    danger: 'bg-red-900/30 hover:bg-red-900/50 text-red-400 border-red-700/40',
+  }
+  const sizes: Record<CultButtonSize, string> = {
+    xs: 'px-2 py-1 text-[10px]',
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  }
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'rounded-lg border font-medium transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed',
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/ui/RarityBadge.tsx

@@ -0,0 +1,18 @@
+import { cn } from '@meyvoid/core/cn'
+import type { Rarity } from '../game/types'
+
+const RARITY_COLORS: Record<Rarity, string> = {
+  common: 'bg-surface text-text-muted border-surface',
+  uncommon: 'bg-green-900/40 text-green-400 border-green-700/40',
+  rare: 'bg-blue-900/40 text-blue-400 border-blue-700/40',
+  mythic: 'bg-premium-500/20 text-premium-400 border-premium-500/40',
+}
+
+/** Item rarity badge. (Quest-density tiers live in game/quests.ts — separate track.) */
+export function RarityBadge({ rarity }: { rarity: string }) {
+  return (
+    <span className={cn('text-[10px] font-bold uppercase px-2 py-0.5 rounded border tracking-widest', RARITY_COLORS[rarity as Rarity] ?? RARITY_COLORS.common)}>
+      {rarity}
+    </span>
+  )
+}

package/src/ui/animated-shiny-text.tsx

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithoutRef, type CSSProperties, type FC } from "react";
 
-import { cn } from "../cn";
+import { cn } from "@meyvoid/core/cn";
 
 export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
   shimmerWidth?: number;
@@ -14,7 +14,7 @@ export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
   className,
   shimmerWidth = 100,
   gradientFrom = "transparent",
-  gradientVia = "rgba(124,255,46,0.65)",
+  gradientVia = "rgba(255,230,0,0.65)",
   gradientTo = "transparent",
   ...props
 }) => {

package/src/ui/badges.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@meyvoid/core/cn'
+import type { BadgeCategory, BadgeTier, PredictionResult } from '../game/types'
+
+const TIER_COLORS: Record<BadgeTier, string> = {
+  bronze: 'border-amber-600 text-amber-600 bg-amber-600/10',
+  silver: 'border-slate-300 text-slate-300 bg-slate-300/10',
+  gold: 'border-yellow-400 text-yellow-400 bg-yellow-400/10',
+  platinum: 'border-zinc-200 text-zinc-200 bg-zinc-200/10',
+}
+
+export function TierBadge({ tier, size = 'sm' }: { tier: BadgeTier; size?: 'sm' | 'md' }) {
+  return (
+    <span className={cn(
+      'font-bold uppercase border rounded-full tracking-wider',
+      size === 'md' ? 'px-3 py-1 text-xs' : 'px-2 py-0.5 text-[10px]',
+      TIER_COLORS[tier],
+    )}>
+      {tier}
+    </span>
+  )
+}
+
+export const BADGE_CATEGORY_ICONS: Record<BadgeCategory, string> = {
+  VIRTUE: '⬡', LOYALTY: '♥', COLLECTION: '◆', MARKET: '◈',
+}
+
+export function BadgeCategoryChip({ category, active, onClick }: { category: BadgeCategory | 'ALL'; active: boolean; onClick: () => void }) {
+  const label = category === 'ALL' ? 'All' : category.charAt(0) + category.slice(1).toLowerCase()
+  const icon = category === 'ALL' ? '' : BADGE_CATEGORY_ICONS[category]
+  return (
+    <button onClick={onClick} className={cn('px-3 py-1 rounded-full text-xs font-medium transition-all border', active ? 'bg-accent/20 border-accent/30 text-accent' : 'border-line text-text-muted hover:text-text/70')}>
+      {icon} {label}
+    </button>
+  )
+}
+
+/** Prediction RESULT chips (WON/LOST/PENDING). Green/red are correct here —
+ * results, not outcomes. (YES/NO outcomes use text-yes/text-no per tokens.) */
+export const RESULT_COLORS: Record<PredictionResult, string> = {
+  WON: 'text-green-400 bg-green-500/10',
+  LOST: 'text-red-400 bg-red-500/10',
+  PENDING: 'text-text-muted bg-line/20',
+}

package/src/ui/card.tsx

@@ -1,102 +1,30 @@
-import * as React from "react"
-import { cn } from "../cn"
+import { cn } from '@meyvoid/core/cn'
+import type { ReactNode } from 'react'
 
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+export type CardVariant = 'glow' | 'clarity' | 'depth' | 'reflect'
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
+export interface CardProps {
+  children: ReactNode
+  className?: string
+  variant?: CardVariant
+  onClick?: () => void
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+/** Canonical Cult card — glass shell + hover-variant classes (see theme.css card-*).
+ * Replaces the orphan shadcn card (wrong tokens, zero imports). */
+export function Card({ children, className, variant, onClick }: CardProps) {
+  const variantClass = variant ? `card-${variant}` : ''
   return (
     <div
-      data-slot="card-title"
+      onClick={onClick}
       className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
+        'glass rounded-2xl p-4',
+        variantClass,
+        onClick && 'cursor-pointer',
+        className,
       )}
-      {...props}
-    />
+    >
+      {children}
+    </div>
   )
 }
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

package/src/ui/shimmer-button.tsx

@@ -1,6 +1,8 @@
 import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react";
 
-import { cn } from "../cn";
+import { COLORS } from "../tokens";
+
+import { cn } from "@meyvoid/core/cn";
 
 export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
   shimmerColor?: string;
@@ -15,11 +17,11 @@ export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
 export const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
   (
     {
-      shimmerColor = "#b6ff7a",
+      shimmerColor = COLORS.accent,
       shimmerSize = "0.05em",
       shimmerDuration = "3s",
       borderRadius = "100px",
-      background = "rgba(4, 16, 7, 1)",
+      background = "rgba(20, 16, 3, 1)",
       className,
       children,
       ...props

package/src/ui/virtues.tsx

@@ -0,0 +1,66 @@
+import { Eye, Droplets, Shield, Flame } from 'lucide-react'
+import { Tooltip } from '@meyvoid/core'
+import { CULT_META } from '../game/cults'
+import type { VirtueName, VirtueTierLevel } from '../game/types'
+
+/** The Cult virtue system as played. Colors come from CULT_META (each virtue
+ * is element-bound to its cult). Shape (tiers/thresholds) is faith-generic;
+ * content (labels/descs) is Cult — split if MeyGod needs the shape. */
+export const VIRTUE_META: Record<VirtueName, { label: string; desc: string; color: string; tierDescs: Record<VirtueTierLevel, string>; icon: typeof Eye }> = {
+  clarity: { label: 'Clarity', desc: 'Info revealed before betting', color: CULT_META.driftless.color, icon: Eye, tierDescs: { 0: 'Base info only', 1: 'Trend direction arrows on quests', 2: 'Hero category W/L records visible', 3: 'Signal Reliability star rating' } },
+  humility: { label: 'Humility', desc: 'Grace through surrender', color: CULT_META.leviathan.color, icon: Droplets, tierDescs: { 0: 'Standard wagers', 1: 'Grace Pool contributions enabled', 2: 'Servant Wager bonuses active', 3: 'Absolution rite available' } },
+  endurance: { label: 'Endurance', desc: 'Steadfast through setbacks', color: CULT_META.masonry.color, icon: Shield, tierDescs: { 0: 'Full loss exposure', 1: '10% loss recovery', 2: 'Grounding Lock active', 3: 'Earthquake double payouts' } },
+  overcoming: { label: 'Overcoming', desc: 'Rise stronger from loss', color: CULT_META.recurrence.color, icon: Flame, tierDescs: { 0: 'No streak mechanics', 1: 'Ash Pool contributions', 2: 'Eternal Recurrence enabled', 3: 'Will-to-Power max multiplier' } },
+}
+
+export const TIER_NAMES: Record<VirtueTierLevel, string> = { 0: 'Novice', 1: 'Initiate', 2: 'Adept', 3: 'Master' }
+
+export function getVirtueTier(value: number): VirtueTierLevel {
+  if (value >= 15) return 3
+  if (value >= 10) return 2
+  if (value >= 5) return 1
+  return 0
+}
+
+export function VirtueBar({ virtue, value }: { virtue: VirtueName; value: number }) {
+  const meta = VIRTUE_META[virtue]
+  const tier = getVirtueTier(value)
+  const pct = (value / 20) * 100
+  const Icon = meta.icon
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <Icon size={14} style={{ color: meta.color }} />
+          <span className="text-sm text-text/80 font-medium">{meta.label}</span>
+          <span className="text-[11px] font-bold" style={{ color: meta.color }}>{TIER_NAMES[tier]}</span>
+          <span className="text-[10px] text-text-muted hidden sm:inline">{meta.desc}</span>
+        </div>
+        <span className="font-mono text-sm font-bold" style={{ color: meta.color }}>{value}</span>
+      </div>
+      <Tooltip
+        content={
+          <>
+            <p className="text-text/80 font-medium">Current: {TIER_NAMES[tier]}</p>
+            <p className="text-text/60">{meta.tierDescs[tier]}</p>
+            {tier < 3 && (
+              <p className="text-text-muted mt-1">Next: {TIER_NAMES[(tier + 1) as VirtueTierLevel]} — {meta.tierDescs[(tier + 1) as VirtueTierLevel]}</p>
+            )}
+          </>
+        }
+      >
+        <div className="w-full bg-surface rounded-full h-3 overflow-hidden">
+          <div
+            className="h-full rounded-full virtue-bar-fill"
+            style={{
+              width: `${pct}%`,
+              background: `linear-gradient(90deg, ${meta.color}, color-mix(in srgb, ${meta.color} 50%, #ffffff), ${meta.color})`,
+              backgroundSize: '200% 100%',
+            } as React.CSSProperties}
+          />
+        </div>
+      </Tooltip>
+    </div>
+  )
+}

package/src/unveil/LaunchStage.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 import { GrainVeil } from '@meyvoid/core/backgrounds'
 import { BG_STYLES } from './bgStyles'
 import { parseBgQuery, useUnveilBg } from './bg'
-import { AshCanvas, BreathVignette, RuneCanvas, VeilFog } from './effects'
+import { AshCanvas, BreathVignette, RuneCanvas, VeilFog, WallCanvas } from './effects'
 
 export function LaunchStage() {
   const { effects, density, speed, opacity, grain, setMany } = useUnveilBg()
@@ -20,8 +20,9 @@ export function LaunchStage() {
   const fx = { density, speed, opacity }
 
   return (
-    <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
       <style>{BG_STYLES}</style>
+      {effects.includes('wall') && <WallCanvas opacity={opacity} />}
       {effects.includes('veil') && <VeilFog opacity={opacity} />}
       {effects.includes('ash') && <AshCanvas {...fx} />}
       {effects.includes('runes') && <RuneCanvas {...fx} />}