feat(chips): sm size variant for chip piles on dense felt surfaces

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>

src/app/(frontend)/styles.css

@@ -2918,22 +2918,34 @@
    exact number always rides alongside in a text label. Pile heights are set
    inline from the chip count so nothing clips or overlaps. */
 .bj-chip-stack {
+  --bj-chip-w: 1.6rem;
+  --bj-chip-h: 0.95rem;
+  --bj-chip-step: 0.3rem;
   display: inline-flex;
   align-items: flex-end;
   gap: 0.3rem;
 }
 
+/* Compact piles (sm) share the same markup with smaller discs so dense
+   surfaces like poker's bet pills and console readouts keep their height. */
+.bj-chip-stack-sm {
+  --bj-chip-w: 1.15rem;
+  --bj-chip-h: 0.68rem;
+  --bj-chip-step: 0.2rem;
+  gap: 0.22rem;
+}
+
 .bj-chip-pile {
   position: relative;
   display: inline-block;
-  width: 1.6rem;
+  width: var(--bj-chip-w, 1.6rem);
 }
 
 .bj-chip {
   position: absolute;
   left: 0;
-  width: 1.6rem;
+  width: var(--bj-chip-w, 1.6rem);
-  height: 0.95rem;
+  height: var(--bj-chip-h, 0.95rem);
   border: 2px dashed rgb(255 255 255 / 72%);
   border-radius: 50%;
   box-shadow:

src/components/frontend/minigames/blackjack/BlackjackChipStack.tsx

@@ -6,7 +6,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 /**
  * Renders an amount as a pile of casino chips: denomination-colored CSS
  * discs stacked into piles, popping in as the amount grows. Purely visual;
- * the exact number always rides alongside in a text label.
+ * the exact number always rides alongside in a text label. `size="sm"`
+ * renders smaller discs for dense surfaces (poker bet pills, console
+ * readouts) without forking the markup.
  */
 
 interface ChipDenomination {
@@ -55,10 +57,6 @@ export function chipFlightChips(amount: number, maxChips = 8): FlightChip[] {
   return chips;
 }
 
-/** Must match the .bj-chip height + vertical step in styles.css. */
-const CHIP_HEIGHT_REM = 0.95;
-const CHIP_STEP_REM = 0.3;
-
 interface ChipPile {
   readonly key: string;
   readonly tone: string;
@@ -96,27 +94,37 @@ function pileUp(amount: number): ChipPile[] {
 export function BlackjackChipStack({
   amount,
   className,
+  size = "md",
 }: {
   readonly amount: number;
   readonly className?: string;
+  readonly size?: "md" | "sm";
 }) {
   if (amount <= 0) return null;
   const piles = pileUp(amount);
   return (
     <TooltipProvider delayDuration={150}>
-      <span className={cn("bj-chip-stack", className)} aria-hidden="true">
+      <span
+        className={cn("bj-chip-stack", size === "sm" && "bj-chip-stack-sm", className)}
+        aria-hidden="true"
+      >
         {piles.map((pile) => (
           <Tooltip key={pile.key}>
             <TooltipTrigger asChild>
               <span
                 className="bj-chip-pile"
-                style={{ height: `${CHIP_HEIGHT_REM + (pile.count - 1) * CHIP_STEP_REM}rem` }}
+                style={{
+                  height: `calc(var(--bj-chip-h) + ${pile.count - 1} * var(--bj-chip-step))`,
+                }}
               >
                 {Array.from({ length: pile.count }, (_, chipIndex) => (
                   <span
                     key={`${pile.key}-${chipIndex}`}
                     className={cn("bj-chip", pile.tone)}
-                    style={{ bottom: `${chipIndex * CHIP_STEP_REM}rem`, zIndex: chipIndex + 1 }}
+                    style={{
+                      bottom: `calc(${chipIndex} * var(--bj-chip-step))`,
+                      zIndex: chipIndex + 1,
+                    }}
                   />
                 ))}
               </span>