luckiest-co 1.0.32 → 1.0.34

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-meter {
-        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;
       }
@@ -53,7 +53,7 @@
       #t1-stat-meter .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 200px;
+        font-size: calc(200px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 15%, rgba(var(--accent-rgb),0.85) 82%);
@@ -115,7 +115,7 @@
         width: 100%; padding: 0 4px;
       }
       #t1-stat-meter .tick {
-        font-family: var(--font-mono); font-size: 18px;
+        font-family: var(--font-mono); font-size: calc(18px * var(--type));
         color: var(--text-faint); letter-spacing: 0.06em;
       }
 
@@ -134,7 +134,7 @@
       }
 
       #t1-stat-meter .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;
@@ -149,6 +149,11 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; the meter takes the safe width. */
+      [data-format="vertical"] #t1-stat-meter .content, [data-format="square"] #t1-stat-meter .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-meter .kicker, [data-format="square"] #t1-stat-meter .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-meter .meter-assembly, [data-format="square"] #t1-stat-meter .meter-assembly { width: calc(100% - 24px); }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-mile {
-        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-mile .tick-label {
         position: absolute; top: calc(50% + 22px);
         transform: translateX(-50%);
-        font-family: var(--font-mono); font-size: 18px;
+        font-family: var(--font-mono); font-size: calc(18px * var(--type));
         color: var(--text-faint); letter-spacing: 0.08em;
       }
 
@@ -131,7 +131,7 @@
       }
 
       #t1-stat-mile .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;
@@ -146,6 +146,12 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; the track takes the safe width. */
+      [data-format="vertical"] #t1-stat-mile .content, [data-format="square"] #t1-stat-mile .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); }
+      [data-format="vertical"] #t1-stat-mile .kicker, [data-format="square"] #t1-stat-mile .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-mile .stat { font-size: calc(220px * var(--type)); }
+      [data-format="vertical"] #t1-stat-mile .track-wrap, [data-format="square"] #t1-stat-mile .track-wrap { width: calc(100% - 60px); }
     </style>
   </head>
   <body>

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

@@ -17,7 +17,7 @@
       html, body { margin: 0; }
 
       #t1-st-money {
-        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-st-money .prefix {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 100px;
+        font-size: calc(100px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         align-self: flex-start;
@@ -104,7 +104,7 @@
       #t1-st-money .suffix {
         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);
         align-self: flex-end;
@@ -128,7 +128,7 @@
       }
 
       #t1-st-money .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;
@@ -143,6 +143,18 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; the plate and its figures shrink to the width. */
+      [data-format="vertical"] #t1-st-money .content, [data-format="square"] #t1-st-money .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-st-money .kicker, [data-format="square"] #t1-st-money .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-money .stat-plate { padding: 36px 48px 40px; }
+      [data-format="vertical"] #t1-st-money .prefix { font-size: calc(64px * var(--type)); margin-top: 20px; }
+      [data-format="vertical"] #t1-st-money .stat { font-size: calc(190px * var(--type)); }
+      [data-format="vertical"] #t1-st-money .suffix { font-size: calc(90px * var(--type)); margin-bottom: 10px; }
+      [data-format="square"] #t1-st-money .stat-plate { padding: 40px 64px 44px; }
+      [data-format="square"] #t1-st-money .prefix { font-size: 84px; }
+      [data-format="square"] #t1-st-money .stat { font-size: 240px; }
+      [data-format="square"] #t1-st-money .suffix { font-size: 110px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-mult {
-        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;
       }
@@ -67,7 +67,7 @@
       #t1-stat-mult .stat-num {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 280px;
+        font-size: calc(280px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(160deg, #ffffff 12%, rgba(var(--accent-rgb),0.85) 80%);
@@ -80,7 +80,7 @@
       #t1-stat-mult .stat-x {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 160px;
+        font-size: calc(160px * var(--type));
         line-height: 1;
         letter-spacing: -0.02em;
         color: var(--accent);
@@ -102,7 +102,7 @@
       }
 
       #t1-stat-mult .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;
@@ -117,6 +117,14 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack and its halo center inside the safe area; vertical figures sized to the width. */
+      [data-format="vertical"] #t1-stat-mult .content, [data-format="square"] #t1-stat-mult .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-mult .kicker, [data-format="square"] #t1-stat-mult .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-mult .halo, [data-format="square"] #t1-stat-mult .halo { top: calc(var(--safe-t) + (var(--h) - var(--safe-t) - var(--safe-b)) / 2); }
+      [data-format="vertical"] #t1-stat-mult .halo { width: 760px; height: 760px; }
+      [data-format="vertical"] #t1-stat-mult .stat-num { font-size: calc(220px * var(--type)); }
+      [data-format="vertical"] #t1-stat-mult .stat-x { font-size: calc(130px * var(--type)); padding-bottom: 14px; }
     </style>
   </head>
   <body>

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

@@ -17,7 +17,7 @@
       html, body { margin: 0; }
 
       #t1-stat-mring {
-        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;
       }
@@ -82,7 +82,7 @@
       #t1-stat-mring .stat {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 100px;
+        font-size: calc(100px * var(--type));
         line-height: 1;
         letter-spacing: var(--track-tight);
         background: linear-gradient(150deg, #ffffff 15%, rgba(var(--accent-rgb), 0.85) 80%);
@@ -136,7 +136,7 @@
       }
 
       #t1-stat-mring .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;
@@ -151,6 +151,13 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; smaller rings, and the legend wraps in vertical. */
+      [data-format="vertical"] #t1-stat-mring .stage, [data-format="square"] #t1-stat-mring .stage { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); gap: 36px; padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-mring .kicker, [data-format="square"] #t1-stat-mring .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-mring .rings-container, [data-format="vertical"] #t1-stat-mring .rings-svg { width: 480px; height: 480px; }
+      [data-format="square"] #t1-stat-mring .rings-container, [data-format="square"] #t1-stat-mring .rings-svg { width: 500px; height: 500px; }
+      [data-format="vertical"] #t1-stat-mring .legend { flex-wrap: wrap; justify-content: center; gap: 16px 32px; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-stat-needle {
-        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;
       }
@@ -61,7 +61,7 @@
       }
       #t1-stat-needle .unit {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 96px; line-height: 1; letter-spacing: var(--track-tight);
+        font-size: calc(96px * var(--type)); line-height: 1; letter-spacing: var(--track-tight);
         color: rgba(var(--accent-rgb), 0.75); text-shadow: var(--textglow-accent);
         margin-left: 12px; align-self: flex-start; padding-top: 28px;
       }
@@ -82,7 +82,7 @@
       }
 
       #t1-stat-needle .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;
@@ -97,6 +97,13 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the stack centers inside the safe area; the gauge takes the safe width. */
+      [data-format="vertical"] #t1-stat-needle .content, [data-format="square"] #t1-stat-needle .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 40px) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-needle .kicker, [data-format="square"] #t1-stat-needle .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-needle .gauge-svg, [data-format="square"] #t1-stat-needle .gauge-svg { width: 100%; height: auto; aspect-ratio: 1500 / 180; }
+      [data-format="vertical"] #t1-stat-needle .stat-wrap, [data-format="square"] #t1-stat-needle .stat-wrap { margin-bottom: 48px; }
+      [data-format="vertical"] #t1-stat-needle .label, [data-format="square"] #t1-stat-needle .label { margin-top: 40px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; }
 
       #t1-stat-nodes {
-        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;
       }
@@ -32,7 +32,7 @@
 
       /* ── SVG graph layer ── */
       #t1-stat-nodes .node-svg {
-        position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 3;
+        position: absolute; inset: 0; width: var(--w); height: var(--h); z-index: 3;
         overflow: visible;
       }
 
@@ -75,14 +75,14 @@
 
       /* node-label chips (positioned absolutely via inline style) */
       #t1-stat-nodes .node-label {
-        position: absolute; font-family: var(--font-mono); font-size: 20px;
+        position: absolute; font-family: var(--font-mono); font-size: calc(20px * var(--type));
         font-weight: var(--wt-bold); letter-spacing: 0.10em;
         text-transform: uppercase; color: var(--text-dim);
         white-space: nowrap;
       }
 
       #t1-stat-nodes .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;
@@ -97,6 +97,47 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+      /* Vertical and square: content centers in the safe box; the graph stays at scale 1 with the
+         hub behind the stat, and the five nodes move into the safe box corners (CSS cx/cy/d). */
+      [data-format="vertical"] #t1-stat-nodes .content, [data-format="square"] #t1-stat-nodes .content {
+        inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); padding-bottom: 0; gap: 36px;
+      }
+      [data-format="vertical"] #t1-stat-nodes .kicker, [data-format="square"] #t1-stat-nodes .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-nodes .label, [data-format="square"] #t1-stat-nodes .label { max-width: 100%; }
+      [data-format="vertical"] #t1-stat-nodes .stat { font-size: calc(250px * var(--type)); }
+      [data-format="vertical"] #t1-stat-nodes .content { top: calc(var(--safe-t) + 110px); bottom: calc(var(--safe-b) + 110px); }
+      [data-format="vertical"] #t1-stat-nodes .node-svg { inset: auto; left: -420px; top: 228px; width: 1920px; height: 1080px; }
+      [data-format="square"] #t1-stat-nodes .node-svg { inset: auto; left: -420px; top: 0; width: 1920px; height: 1080px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-l1 { d: path("M610 92 L960 540"); }
+      [data-format="vertical"] #t1-stat-nodes #nd-l2 { d: path("M610 942 L960 540"); }
+      [data-format="vertical"] #t1-stat-nodes #nd-l3 { d: path("M960 72 L960 540"); }
+      [data-format="vertical"] #t1-stat-nodes #nd-l4 { d: path("M1270 92 L960 540"); }
+      [data-format="vertical"] #t1-stat-nodes #nd-l5 { d: path("M1270 942 L960 540"); }
+      [data-format="vertical"] #t1-stat-nodes #nd-n1 { cx: 610px; cy: 92px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-n2 { cx: 610px; cy: 942px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-n3 { cx: 960px; cy: 72px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-n4 { cx: 1270px; cy: 92px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-n5 { cx: 1270px; cy: 942px; }
+      [data-format="vertical"] #t1-stat-nodes #nd-lbl1 { left: 150px !important; top: 352px !important; }
+      [data-format="vertical"] #t1-stat-nodes #nd-lbl2 { left: 224px !important; top: 1158px !important; }
+      [data-format="vertical"] #t1-stat-nodes #nd-lbl3 { left: 580px !important; top: 290px !important; }
+      [data-format="vertical"] #t1-stat-nodes #nd-lbl4 { left: 790px !important; top: 352px !important; }
+      [data-format="vertical"] #t1-stat-nodes #nd-lbl5 { left: 740px !important; top: 1158px !important; }
+      [data-format="square"] #t1-stat-nodes #nd-l1 { d: path("M580 170 L960 540"); }
+      [data-format="square"] #t1-stat-nodes #nd-l2 { d: path("M580 920 L960 540"); }
+      [data-format="square"] #t1-stat-nodes #nd-l3 { d: path("M960 110 L960 540"); }
+      [data-format="square"] #t1-stat-nodes #nd-l4 { d: path("M1340 170 L960 540"); }
+      [data-format="square"] #t1-stat-nodes #nd-l5 { d: path("M1340 920 L960 540"); }
+      [data-format="square"] #t1-stat-nodes #nd-n1 { cx: 580px; cy: 170px; }
+      [data-format="square"] #t1-stat-nodes #nd-n2 { cx: 580px; cy: 920px; }
+      [data-format="square"] #t1-stat-nodes #nd-n3 { cx: 960px; cy: 110px; }
+      [data-format="square"] #t1-stat-nodes #nd-n4 { cx: 1340px; cy: 170px; }
+      [data-format="square"] #t1-stat-nodes #nd-n5 { cx: 1340px; cy: 920px; }
+      [data-format="square"] #t1-stat-nodes #nd-lbl1 { left: 120px !important; top: 202px !important; }
+      [data-format="square"] #t1-stat-nodes #nd-lbl2 { left: 192px !important; top: 908px !important; }
+      [data-format="square"] #t1-stat-nodes #nd-lbl3 { left: 580px !important; top: 98px !important; }
+      [data-format="square"] #t1-stat-nodes #nd-lbl4 { left: 880px !important; top: 202px !important; }
+      [data-format="square"] #t1-stat-nodes #nd-lbl5 { left: 820px !important; top: 908px !important; }
     </style>
   </head>
   <body>
@@ -123,15 +164,15 @@
 
         <!-- 5 spoke lines from satellite nodes to center (960,540) -->
         <!-- each given a unique id for dash-draw animation -->
-        <line id="nd-l1" x1="310" y1="260" x2="960" y2="540"
+        <path id="nd-l1" d="M310 260 L960 540"
               stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="0 800"/>
-        <line id="nd-l2" x1="310" y1="820" x2="960" y2="540"
+        <path id="nd-l2" d="M310 820 L960 540"
               stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="0 800"/>
-        <line id="nd-l3" x1="680" y1="150" x2="960" y2="540"
+        <path id="nd-l3" d="M680 150 L960 540"
               stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="0 800"/>
-        <line id="nd-l4" x1="1610" y1="260" x2="960" y2="540"
+        <path id="nd-l4" d="M1610 260 L960 540"
               stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="0 800"/>
-        <line id="nd-l5" x1="1610" y1="820" x2="960" y2="540"
+        <path id="nd-l5" d="M1610 820 L960 540"
               stroke="url(#lineGrad)" stroke-width="1.5" stroke-dasharray="0 800"/>
 
         <!-- satellite node circles -->

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; }
 
       #t1-st-odo {
-        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;
       }
@@ -93,7 +93,7 @@
       #t1-st-odo .sep-char {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 120px;
+        font-size: calc(120px * var(--type));
         line-height: 1;
         color: rgba(255,255,255,0.55);
         padding-bottom: 6px;
@@ -112,7 +112,7 @@
         line-height: 180px;
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 120px;
+        font-size: calc(120px * var(--type));
         letter-spacing: var(--track-tight);
         color: var(--white);
         text-align: center;
@@ -151,7 +151,7 @@
       }
 
       #t1-st-odo .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;
@@ -166,6 +166,11 @@
         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 label wraps to its width. */
+      [data-format="vertical"] #t1-st-odo .content, [data-format="square"] #t1-st-odo .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-st-odo .kicker, [data-format="square"] #t1-st-odo .kicker { text-align: center; }
+      [data-format="vertical"] #t1-st-odo .label, [data-format="square"] #t1-st-odo .label { max-width: 100%; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-moons {
-        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;
       }
@@ -33,7 +33,7 @@
 
       /* ── orbit SVG (decorative ellipse rings) ── */
       #t1-stat-moons .orbit-svg {
-        position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 2;
+        position: absolute; inset: 0; width: var(--w); height: var(--h); z-index: 2;
       }
 
       /* ── central hub ── */
@@ -62,7 +62,7 @@
         position: relative; z-index: 2;
       }
       #t1-stat-moons .stat-sub {
-        font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.14em;
+        font-family: var(--font-mono); font-size: calc(22px * var(--type)); letter-spacing: 0.14em;
         text-transform: uppercase; color: var(--accent);
         text-shadow: var(--textglow-accent); margin-top: 10px; position: relative; z-index: 2;
       }
@@ -82,11 +82,11 @@
       }
       #t1-stat-moons .moon-val {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 64px; line-height: 1; letter-spacing: var(--track-tight);
+        font-size: calc(64px * var(--type)); line-height: 1; letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
       }
       #t1-stat-moons .moon-lbl {
-        font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.12em;
+        font-family: var(--font-mono); font-size: calc(18px * var(--type)); letter-spacing: 0.12em;
         text-transform: uppercase; color: var(--text-dim);
       }
 
@@ -96,7 +96,7 @@
       #t1-stat-moons .moon2 { left: 280px; top: 640px; }
 
       #t1-stat-moons .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;
@@ -111,6 +111,19 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+      /* Vertical and square: the hub centers in the safe box (orbit art at scale 1 behind it),
+         moon 1 pins to the top right and moon 2 to the bottom left of the safe area. */
+      [data-format="vertical"] #t1-stat-moons .orbit-svg { inset: auto; left: -420px; top: 228px; width: 1920px; height: 1080px; }
+      [data-format="square"] #t1-stat-moons .orbit-svg { inset: auto; left: -420px; top: 0; width: 1920px; height: 1080px; }
+      [data-format="vertical"] #t1-stat-moons .hub { top: calc(var(--safe-t) + 480px); }
+      [data-format="vertical"] #t1-stat-moons .stat { font-size: calc(250px * var(--type)); }
+      [data-format="vertical"] #t1-stat-moons .moon1, [data-format="square"] #t1-stat-moons .moon1 { left: auto; right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 24px); }
+      [data-format="vertical"] #t1-stat-moons .moon2, [data-format="square"] #t1-stat-moons .moon2 { left: calc(var(--safe-l) + 24px); top: auto; bottom: calc(var(--safe-b) + 70px); }
+      [data-format="vertical"] #t1-stat-moons #mn-conn1 { d: path("M1129 142 L960 540"); }
+      [data-format="vertical"] #t1-stat-moons #mn-conn2 { d: path("M739 880 L960 540"); }
+      [data-format="square"] #t1-stat-moons #mn-conn1 { d: path("M1250 170 L960 540"); }
+      [data-format="square"] #t1-stat-moons #mn-conn2 { d: path("M690 870 L960 540"); }
     </style>
   </head>
   <body>
@@ -135,10 +148,10 @@
                  stroke="rgba(79,140,255,0.08)" stroke-width="1"
                  stroke-dasharray="4 10" opacity="0"/>
         <!-- orbit dot connectors (dashes from moon to center) -->
-        <line id="mn-conn1" x1="1290" y1="310" x2="960" y2="540"
+        <path id="mn-conn1" d="M1290 310 L960 540"
               stroke="rgba(79,140,255,0.22)" stroke-width="1"
               stroke-dasharray="6 8" opacity="0"/>
-        <line id="mn-conn2" x1="380" y1="700" x2="960" y2="540"
+        <path id="mn-conn2" d="M380 700 L960 540"
               stroke="rgba(79,140,255,0.22)" stroke-width="1"
               stroke-dasharray="6 8" opacity="0"/>
       </svg>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-orbit {
-        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;
       }
@@ -81,7 +81,7 @@
       #t1-stat-orbit .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);
         background: linear-gradient(155deg, #ffffff 8%, rgba(var(--accent-rgb), 0.82) 88%);
@@ -113,7 +113,7 @@
       }
 
       #t1-stat-orbit .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;
@@ -128,6 +128,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; square uses a smaller orbit. */
+      [data-format="vertical"] #t1-stat-orbit .content, [data-format="square"] #t1-stat-orbit .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); padding-bottom: 0; gap: 36px; }
+      [data-format="vertical"] #t1-stat-orbit .kicker, [data-format="square"] #t1-stat-orbit .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-orbit .label, [data-format="square"] #t1-stat-orbit .label { max-width: 100%; }
+      [data-format="square"] #t1-stat-orbit .orbit-wrap, [data-format="square"] #t1-stat-orbit .orbit-svg { width: 460px; height: 460px; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; }
 
       #t1-stat-pair {
-        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;
       }
@@ -108,7 +108,7 @@
 
       #t1-stat-pair .bottom-label {
         font-family: var(--font-body);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         font-weight: var(--wt-med);
         color: var(--text-faint);
         text-align: center;
@@ -120,7 +120,7 @@
       }
 
       #t1-stat-pair .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;
@@ -135,6 +135,21 @@
         background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
         pointer-events: none; z-index: 7;
       }
+
+
+      /* Vertical: the two metrics stack with a horizontal divider. Square: they stay side by side, smaller. */
+      [data-format="vertical"] #t1-stat-pair .content, [data-format="square"] #t1-stat-pair .content { inset: var(--safe-t) var(--safe-r) calc(var(--safe-b) + 48px) var(--safe-l); gap: 28px; }
+      [data-format="vertical"] #t1-stat-pair .kicker, [data-format="square"] #t1-stat-pair .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-pair .pair-row { flex-direction: column; }
+      [data-format="vertical"] #t1-stat-pair .metric { width: auto; padding: 20px 0; gap: 12px; }
+      [data-format="vertical"] #t1-stat-pair .stat { font-size: calc(160px * var(--type)); }
+      [data-format="vertical"] #t1-stat-pair .metric-label { max-width: 100%; }
+      [data-format="vertical"] #t1-stat-pair .divider { width: 340px; height: 2px; background: linear-gradient(to right, transparent 0%, rgba(var(--accent-rgb), 0.6) 20%, rgba(255,255,255,0.7) 50%, rgba(var(--accent-rgb), 0.6) 80%, transparent 100%); }
+      [data-format="vertical"] #t1-stat-pair .bottom-label, [data-format="square"] #t1-stat-pair .bottom-label { max-width: 100%; }
+      [data-format="square"] #t1-stat-pair .metric { width: 463px; padding: 0 24px; box-sizing: border-box; }
+      [data-format="square"] #t1-stat-pair .stat { font-size: 170px; }
+      [data-format="square"] #t1-stat-pair .metric-label { max-width: 100%; }
+      [data-format="square"] #t1-stat-pair .divider { height: 260px; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; }
 
       #t1-stat-pctile {
-        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;
       }
@@ -52,7 +52,7 @@
       #t1-stat-pctile .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 0%, rgba(var(--accent-rgb), 0.85) 90%);
@@ -99,7 +99,7 @@
       }
 
       #t1-stat-pctile .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;
@@ -114,6 +114,14 @@
         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 curve scales to its width. */
+      [data-format="vertical"] #t1-stat-pctile .content, [data-format="square"] #t1-stat-pctile .content { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); padding-bottom: 0; }
+      [data-format="vertical"] #t1-stat-pctile .kicker, [data-format="square"] #t1-stat-pctile .kicker { text-align: center; }
+      [data-format="vertical"] #t1-stat-pctile .label, [data-format="square"] #t1-stat-pctile .label { max-width: 100%; }
+      [data-format="vertical"] #t1-stat-pctile .dist-wrap { width: 100%; height: 140px; }
+      [data-format="square"] #t1-stat-pctile .dist-wrap { width: 100%; height: 169px; }
+      [data-format="vertical"] #t1-stat-pctile .dist-svg, [data-format="square"] #t1-stat-pctile .dist-svg { width: 100%; height: 100%; }
     </style>
   </head>
   <body>