luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-spectrum.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-spec {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -121,7 +121,7 @@
       }
 
       #t1-stat-spec .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -136,6 +136,13 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers in the safe box and the bar spans its width. */
+      [data-format="vertical"] #t1-stat-spec .content, [data-format="square"] #t1-stat-spec .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-spec .kicker, [data-format="square"] #t1-stat-spec .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-spec .viz-zone, [data-format="square"] #t1-stat-spec .viz-zone, [data-format="vertical"] #t1-stat-spec .bar-track, [data-format="square"] #t1-stat-spec .bar-track, [data-format="vertical"] #t1-stat-spec .bar-labels, [data-format="square"] #t1-stat-spec .bar-labels { width: 100%; }
+      [data-format="vertical"] #t1-stat-spec .label, [data-format="square"] #t1-stat-spec .label { max-width: 100%; }
+      [data-format="vertical"] #t1-stat-spec .stat { font-size: calc(250px * var(--type)); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-split.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-split {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -94,7 +94,7 @@
       #t1-stat-split .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 140px;
+        font-size: calc(140px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
       }
@@ -113,7 +113,7 @@
 
       #t1-stat-split .half-label {
         font-family: var(--font-body);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         font-weight: var(--wt-med);
         letter-spacing: 0.08em;
         text-transform: uppercase;
@@ -135,7 +135,7 @@
       }
 
       #t1-stat-split .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -150,6 +150,16 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical: the pill turns into a column with a horizontal divider. Square: the pill fits the safe width. */
+      [data-format="vertical"] #t1-stat-split .content, [data-format="square"] #t1-stat-split .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-split .kicker, [data-format="square"] #t1-stat-split .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-split .pill { flex-direction: column; width: 100%; height: auto; }
+      [data-format="vertical"] #t1-stat-split .half { padding: 48px 0; }
+      [data-format="vertical"] #t1-stat-split .divider { width: auto; height: 2px; margin: 0 40px; background: linear-gradient(to right, transparent 0%, rgba(var(--accent-rgb), 0.8) 30%, rgba(255,255,255,0.9) 50%, rgba(var(--accent-rgb), 0.8) 70%, transparent 100%); }
+      [data-format="square"] #t1-stat-split .pill { width: 100%; }
+      [data-format="square"] #t1-stat-split .half { padding: 0 32px; }
+      [data-format="vertical"] #t1-stat-split .label, [data-format="square"] #t1-stat-split .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-stackedbars.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-st-sbars {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -73,14 +73,14 @@
       }
       #t1-st-sbars .bar-label {
         font-family: var(--font-body);
-        font-size: 30px;
+        font-size: calc(30px * var(--type));
         font-weight: var(--wt-semi);
         color: var(--text);
         letter-spacing: 0.01em;
       }
       #t1-st-sbars .bar-value {
         font-family: var(--font-mono);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.06em;
         color: var(--accent);
@@ -138,7 +138,7 @@
 
       /* Source */
       #t1-st-sbars .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -153,6 +153,11 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the chart spans the safe box width and centers in it. */
+      [data-format="vertical"] #t1-st-sbars .content, [data-format="square"] #t1-st-sbars .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); }
+      [data-format="vertical"] #t1-st-sbars .kicker, [data-format="square"] #t1-st-sbars .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-sbars .chart, [data-format="square"] #t1-st-sbars .chart { width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-tickerstat.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-ticker {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -100,7 +100,7 @@
       #t1-stat-ticker .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 160px;
+        font-size: calc(160px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 20%, rgba(var(--accent-rgb), 0.85) 80%);
@@ -115,7 +115,7 @@
       }
       #t1-stat-ticker .change-pct {
         font-family: var(--font-mono);
-        font-size: 48px;
+        font-size: calc(48px * var(--type));
         font-weight: var(--wt-bold);
         color: #37E68C;   /* neon green - positive delta */
         text-shadow: 0 0 16px rgba(55, 230, 140, 0.70), 0 0 40px rgba(55, 230, 140, 0.35);
@@ -156,7 +156,7 @@
         height: 100%;
         white-space: nowrap;
         font-family: var(--font-mono);
-        font-size: 17px;
+        font-size: calc(17px * var(--type));
         letter-spacing: 0.14em;
         color: rgba(var(--accent-rgb), 0.50);
         /* Static - scroll is a finite GSAP tween, not CSS animation */
@@ -164,7 +164,7 @@
       }
 
       #t1-stat-ticker .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -179,6 +179,19 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical: the value row wraps (chip under the number) and panel, rule and tape follow the stack.
+         Square: one row, panel narrowed to the frame. */
+      [data-format="vertical"] #t1-stat-ticker .stage, [data-format="square"] #t1-stat-ticker .stage { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-ticker .kicker, [data-format="square"] #t1-stat-ticker .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-ticker .value-row { flex-wrap: wrap; justify-content: center; gap: 20px 32px; }
+      [data-format="vertical"] #t1-stat-ticker .stat { font-size: calc(130px * var(--type)); }
+      [data-format="vertical"] #t1-stat-ticker .label, [data-format="square"] #t1-stat-ticker .label { max-width: 100%; }
+      [data-format="vertical"] #t1-stat-ticker .glass-panel { top: 340px; width: 920px; height: 760px; }
+      [data-format="vertical"] #t1-stat-ticker .scan-rule { left: 60px; right: 60px; top: 358px; }
+      [data-format="vertical"] #t1-stat-ticker .ticker-tape { bottom: 760px; }
+      [data-format="square"] #t1-stat-ticker .glass-panel { width: 960px; top: 276px; }
+      [data-format="square"] #t1-stat-ticker .scan-rule { left: var(--safe-l); right: var(--safe-r); top: 294px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-tiles.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-tiles {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -71,7 +71,7 @@
       /* The digit character inside the tile */
       #t1-stat-tiles .tile-char {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 140px; line-height: 1; letter-spacing: -0.02em;
+        font-size: calc(140px * var(--type)); line-height: 1; letter-spacing: -0.02em;
         background: linear-gradient(155deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
@@ -88,7 +88,7 @@
       }
       #t1-stat-tiles .tile-sep span {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 120px; line-height: 1; color: rgba(var(--accent-rgb), 0.70);
+        font-size: calc(120px * var(--type)); line-height: 1; color: rgba(var(--accent-rgb), 0.70);
         text-shadow: var(--textglow-accent);
       }
 
@@ -103,7 +103,7 @@
       }
 
       #t1-stat-tiles .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -118,6 +118,20 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: smaller tiles so the whole number fits the safe width; stack centers in the safe box. */
+      [data-format="vertical"] #t1-stat-tiles .content, [data-format="square"] #t1-stat-tiles .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-tiles .tiles-row { gap: 12px; }
+      [data-format="vertical"] #t1-stat-tiles .tile { width: 124px; height: 160px; }
+      [data-format="vertical"] #t1-stat-tiles .tile-char { font-size: calc(96px * var(--type)); }
+      [data-format="vertical"] #t1-stat-tiles .tile-sep { width: 40px; height: 160px; padding-bottom: 10px; }
+      [data-format="vertical"] #t1-stat-tiles .tile-sep span { font-size: calc(84px * var(--type)); }
+      [data-format="square"] #t1-stat-tiles .tiles-row { gap: 14px; }
+      [data-format="square"] #t1-stat-tiles .tile { width: 150px; height: 190px; }
+      [data-format="square"] #t1-stat-tiles .tile-char { font-size: 120px; }
+      [data-format="square"] #t1-stat-tiles .tile-sep { width: 50px; height: 190px; }
+      [data-format="square"] #t1-stat-tiles .tile-sep span { font-size: 100px; }
+      [data-format="vertical"] #t1-stat-tiles .label, [data-format="square"] #t1-stat-tiles .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-timer.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-timer {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -76,7 +76,7 @@
       #t1-stat-timer .digit-val {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 220px;
+        font-size: calc(220px * var(--type));
         line-height: 1;
         letter-spacing: -0.04em;
         /* gradient: white top → accent blue bottom */
@@ -100,7 +100,7 @@
       #t1-stat-timer .colon {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 200px;
+        font-size: calc(200px * var(--type));
         line-height: 1;
         color: var(--accent);
         text-shadow: var(--textglow-accent),
@@ -124,7 +124,7 @@
       }
 
       #t1-stat-timer .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -139,6 +139,16 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers in the safe box with smaller clock digits. */
+      [data-format="vertical"] #t1-stat-timer .content, [data-format="square"] #t1-stat-timer .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; gap: 64px; }
+      [data-format="vertical"] #t1-stat-timer .kicker, [data-format="square"] #t1-stat-timer .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-timer .digit-val { font-size: calc(170px * var(--type)); min-width: 240px; }
+      [data-format="vertical"] #t1-stat-timer .colon { font-size: calc(150px * var(--type)); padding-bottom: 40px; }
+      [data-format="vertical"] #t1-stat-timer .clock-plate { inset: -28px -24px; }
+      [data-format="square"] #t1-stat-timer .digit-val { font-size: 200px; min-width: 250px; }
+      [data-format="square"] #t1-stat-timer .colon { font-size: 180px; }
+      [data-format="vertical"] #t1-stat-timer .label, [data-format="square"] #t1-stat-timer .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-trendline.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-st-trend {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -74,7 +74,7 @@
       #t1-st-trend .end-callout .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 90px;
+        font-size: calc(90px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
@@ -100,7 +100,7 @@
       }
       #t1-st-trend .x-lbl {
         font-family: var(--font-mono);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.08em;
         text-transform: uppercase;
@@ -124,7 +124,7 @@
 
       /* Source */
       #t1-st-trend .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -139,6 +139,20 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the chart scales to the safe width (callout and axis labels follow);
+         the stack centers in the safe box. */
+      [data-format="vertical"] #t1-st-trend .content, [data-format="square"] #t1-st-trend .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-st-trend .kicker, [data-format="square"] #t1-st-trend .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-trend .chart-wrap { width: 100%; height: 259px; }
+      [data-format="square"] #t1-st-trend .chart-wrap { width: 100%; height: 314px; }
+      [data-format="vertical"] #t1-st-trend .trend-svg, [data-format="square"] #t1-st-trend .trend-svg { width: 100%; height: 100%; }
+      [data-format="vertical"] #t1-st-trend .end-callout { top: 6px; right: 34px; }
+      [data-format="vertical"] #t1-st-trend .end-callout .stat { font-size: calc(70px * var(--type)); }
+      [data-format="vertical"] #t1-st-trend .x-labels { left: 34px; right: 34px; }
+      [data-format="square"] #t1-st-trend .end-callout { top: 8px; right: 41px; }
+      [data-format="square"] #t1-st-trend .x-labels { left: 41px; right: 41px; }
+      [data-format="vertical"] #t1-st-trend .label, [data-format="square"] #t1-st-trend .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-underscore.html

@@ -13,7 +13,7 @@
       html, body { margin: 0; }
 
       #t1-stat-uscore {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -56,7 +56,7 @@
       #t1-stat-uscore .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 360px;
+        font-size: calc(360px * var(--type));
         line-height: 0.85;
         letter-spacing: -0.04em;
         background: linear-gradient(165deg,
@@ -119,7 +119,7 @@
       }
 
       #t1-stat-uscore .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -134,6 +134,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers in the safe box; the underline fits the safe width. */
+      [data-format="vertical"] #t1-stat-uscore .content, [data-format="square"] #t1-stat-uscore .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-uscore .kicker, [data-format="square"] #t1-stat-uscore .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-uscore .uscore-track { width: 640px; }
+      [data-format="vertical"] #t1-stat-uscore .label, [data-format="square"] #t1-stat-uscore .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-versus.html

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-vs {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -105,7 +105,7 @@
       /* VS badge pill */
       #t1-stat-vs .vs-badge {
         font-family: var(--font-mono);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: 0.08em;
         color: var(--white);
@@ -125,7 +125,7 @@
       #t1-stat-vs .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 140px;
+        font-size: calc(140px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
       }
@@ -145,7 +145,7 @@
       /* Side labels */
       #t1-stat-vs .side-label {
         font-family: var(--font-body);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-semi);
         letter-spacing: 0.10em;
         text-transform: uppercase;
@@ -157,7 +157,7 @@
       }
 
       #t1-stat-vs .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -172,6 +172,19 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical: the two sides stack with a horizontal VS divider. Square: side by side at the safe width. */
+      [data-format="vertical"] #t1-stat-vs .content, [data-format="square"] #t1-stat-vs .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-vs .kicker, [data-format="square"] #t1-stat-vs .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-vs .versus-row { flex-direction: column; width: 100%; }
+      [data-format="vertical"] #t1-stat-vs .side { padding: 48px 40px; }
+      [data-format="vertical"] #t1-stat-vs .side-a { border-radius: var(--radius) var(--radius) 0 0; }
+      [data-format="vertical"] #t1-stat-vs .side-b { border-radius: 0 0 var(--radius) var(--radius); }
+      [data-format="vertical"] #t1-stat-vs .vs-divider { flex-direction: row; padding: 4px 0; }
+      [data-format="vertical"] #t1-stat-vs .vs-line { width: auto; height: 2px; background: linear-gradient(to right, transparent 0%, rgba(var(--accent-rgb), 0.6) 30%, rgba(255,255,255,0.9) 50%, rgba(var(--accent-rgb), 0.6) 70%, transparent 100%); }
+      [data-format="vertical"] #t1-stat-vs .vs-badge { margin: 0 16px; }
+      [data-format="square"] #t1-stat-vs .versus-row { width: 100%; }
+      [data-format="square"] #t1-stat-vs .side { padding: 60px 32px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-waffle.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-waffle {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -90,7 +90,7 @@
       #t1-stat-waffle .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 190px;
+        font-size: calc(190px * var(--type));
         line-height: 0.88;
         letter-spacing: var(--track-tight);
         background: linear-gradient(155deg, #ffffff 15%, rgba(var(--accent-rgb), 0.80) 85%);
@@ -100,7 +100,7 @@
       }
       #t1-stat-waffle .stat-unit {
         font-family: var(--font-mono);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: 0.12em;
         color: var(--accent);
         text-shadow: var(--textglow-accent);
@@ -121,7 +121,7 @@
       }
 
       #t1-stat-waffle .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -136,6 +136,20 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical: smaller grid with the stat under it (number and unit on one line). Square: side by side, smaller. */
+      [data-format="vertical"] #t1-stat-waffle .content, [data-format="square"] #t1-stat-waffle .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); padding-bottom: 0; gap: 28px; }
+      [data-format="vertical"] #t1-stat-waffle .kicker, [data-format="square"] #t1-stat-waffle .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-waffle .waffle-wrap { flex-direction: column; gap: 32px; }
+      [data-format="vertical"] #t1-stat-waffle .waffle-grid { grid-template-columns: repeat(10, 38px); grid-template-rows: repeat(10, 38px); }
+      [data-format="vertical"] #t1-stat-waffle .cell { width: 38px; height: 38px; }
+      [data-format="vertical"] #t1-stat-waffle .stat-block { flex-direction: row; align-items: baseline; gap: 20px; }
+      [data-format="vertical"] #t1-stat-waffle .stat { font-size: calc(140px * var(--type)); }
+      [data-format="square"] #t1-stat-waffle .waffle-wrap { gap: 48px; }
+      [data-format="square"] #t1-stat-waffle .waffle-grid { grid-template-columns: repeat(10, 44px); grid-template-rows: repeat(10, 44px); }
+      [data-format="square"] #t1-stat-waffle .cell { width: 44px; height: 44px; }
+      [data-format="square"] #t1-stat-waffle .stat { font-size: 160px; }
+      [data-format="vertical"] #t1-stat-waffle .label, [data-format="square"] #t1-stat-waffle .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-stat-waterfall.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-water {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--canvas); color: var(--text);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -50,7 +50,7 @@
       }
       #t1-stat-water .stat {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 120px; line-height: 0.9; letter-spacing: var(--track-tight);
+        font-size: calc(120px * var(--type)); line-height: 0.9; letter-spacing: var(--track-tight);
         background: linear-gradient(135deg, #ffffff 10%, rgba(var(--accent-rgb), 0.88) 80%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent; text-fill-color: transparent;
@@ -64,7 +64,7 @@
 
       /* Labels below chart */
       #t1-stat-water .label {
-        font-family: var(--font-body); font-size: 28px;
+        font-family: var(--font-body); font-size: calc(28px * var(--type));
         font-weight: var(--wt-med); color: var(--text-dim);
         line-height: 1.45; padding-top: 28px; max-width: 1100px;
       }
@@ -73,7 +73,7 @@
       }
 
       #t1-stat-water .source {
-        position: absolute; left: var(--pad); bottom: 44px;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b);
         font-family: var(--font-mono); font-size: var(--size-tiny);
         font-weight: var(--wt-reg); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-faint); z-index: 5;
@@ -88,6 +88,11 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the chart block fills the safe box; vertical stacks kicker over the total. */
+      [data-format="vertical"] #t1-stat-water .chart-wrap, [data-format="square"] #t1-stat-water .chart-wrap { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-water .header { flex-direction: column; align-items: flex-start; gap: 20px; }
+      [data-format="vertical"] #t1-stat-water .label, [data-format="square"] #t1-stat-water .label { max-width: 100%; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lb-badge.html

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-badge {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
       }
 
@@ -31,7 +31,7 @@
 
       /* Outer wrapper - left anchored */
       #t2-lb-badge .wrapper {
-        position: absolute; left: 80px; top: 380px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 326px);
         display: flex; flex-direction: column; gap: 14px;
       }
 
@@ -84,7 +84,7 @@
       /* Term text in chip */
       #t2-lb-badge .term {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 32px; letter-spacing: var(--track-tight);
+        font-size: calc(32px * var(--type)); letter-spacing: var(--track-tight);
         color: var(--white);
         text-shadow: var(--textglow);
         white-space: nowrap;
@@ -104,9 +104,18 @@
 
       #t2-lb-badge .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 23px; line-height: 1.45;
+        font-size: calc(23px * var(--type)); line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-badge .wrapper, [data-format="square"] #t2-lb-badge .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-badge .local-glow, [data-format="square"] #t2-lb-badge .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-badge [data-slot], [data-format="square"] #t2-lb-badge [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>