luckiest-co 1.0.32 → 1.0.34

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-info {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -35,7 +35,7 @@
       /* Wrapper anchored right */
       #t2-lb-info .wrapper {
         position: absolute;
-        right: 120px; top: 390px;
+        right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 336px);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -72,7 +72,7 @@
         font-family: var(--font-display);
         font-style: italic;
         font-weight: var(--wt-black);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         color: var(--accent);
         text-shadow: var(--textglow-accent);
         line-height: 1;
@@ -82,7 +82,7 @@
       #t2-lb-info .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -119,10 +119,19 @@
       #t2-lb-info .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         line-height: 1.50;
         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-info .wrapper, [data-format="square"] #t2-lb-info .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b);
+        max-width: min(480px, calc(var(--w) - var(--safe-l) - var(--safe-r)));
+      }
+      [data-format="vertical"] #t2-lb-info .local-glow, [data-format="square"] #t2-lb-info .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-info [data-slot], [data-format="square"] #t2-lb-info [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-icard {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -37,7 +37,7 @@
       /* Main card - right side, lower-mid */
       #t2-lb-icard .card {
         position: absolute;
-        right: 120px; top: 546px;
+        right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 492px);
         width: 420px;
         padding: 22px 26px 20px;
         background: var(--glass-bg-dark);
@@ -95,7 +95,7 @@
       #t2-lb-icard .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -115,7 +115,7 @@
       #t2-lb-icard .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 19px;
+        font-size: calc(19px * var(--type));
         line-height: 1.52;
         color: var(--text-dim);
       }
@@ -143,6 +143,15 @@
           rgba(var(--accent-rgb), 0.45) 0%,
           transparent 100%);
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-icard .card, [data-format="square"] #t2-lb-icard .card {
+        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-icard .local-glow, [data-format="square"] #t2-lb-icard .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-icard [data-slot], [data-format="square"] #t2-lb-icard [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-cap {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -34,7 +34,7 @@
 
       /* Key container - wraps key + detail label, anchored right */
       #t2-lb-cap .keycap-group {
-        position: absolute; right: 80px; top: 420px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 366px);
         display: flex; flex-direction: column; align-items: center; gap: 22px;
       }
 
@@ -84,7 +84,7 @@
       /* Key text - gradient glow, Plus Jakarta heavy */
       #t2-lb-cap .key-text {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 46px; letter-spacing: var(--track-tight);
+        font-size: calc(46px * var(--type)); letter-spacing: var(--track-tight);
         line-height: 1.0;
         background: linear-gradient(115deg, #FFFFFF 0%, #FFFFFF 45%, var(--accent) 100%);
         -webkit-background-clip: text; background-clip: text;
@@ -110,9 +110,18 @@
 
       #t2-lb-cap .detail {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 22px; letter-spacing: 0.02em; line-height: 1.45;
+        font-size: calc(22px * var(--type)); letter-spacing: 0.02em; line-height: 1.45;
         color: var(--text-dim); text-align: center;
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-cap .keycap-group, [data-format="square"] #t2-lb-cap .keycap-group {
+        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-cap .local-glow, [data-format="square"] #t2-lb-cap .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-cap [data-slot], [data-format="square"] #t2-lb-cap [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-key {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -33,7 +33,7 @@
 
       /* Wrapper anchored left */
       #t2-lb-key .wrap {
-        position: absolute; left: 80px; top: 380px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 326px);
         width: 700px;
       }
 
@@ -83,10 +83,19 @@
       /* Small note below */
       #t2-lb-key .note {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 21px; letter-spacing: 0.04em;
+        font-size: calc(21px * var(--type)); letter-spacing: 0.04em;
         color: var(--text-dim);
         padding-left: 0;
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-key .wrap, [data-format="square"] #t2-lb-key .wrap {
+        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-key .local-glow, [data-format="square"] #t2-lb-key .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-key [data-slot], [data-format="square"] #t2-lb-key [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-lead {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -33,7 +33,7 @@
 
       /* SVG leader canvas - absolutely positioned, right side */
       #t2-lb-lead .leader-svg {
-        position: absolute; right: 80px; top: 300px;
+        position: absolute; right: var(--safe-r); top: 300px;
         width: 540px; height: 220px;
         overflow: visible;
       }
@@ -64,7 +64,7 @@
 
       /* Label block anchored right */
       #t2-lb-lead .label-wrap {
-        position: absolute; right: 80px; top: 430px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 376px);
         display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
       }
 
@@ -91,7 +91,7 @@
 
       #t2-lb-lead .term-text {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 28px; letter-spacing: var(--track-snug);
+        font-size: calc(28px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         white-space: nowrap;
       }
@@ -110,9 +110,20 @@
 
       #t2-lb-lead .detail-text {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 22px; line-height: 1.45;
+        font-size: calc(22px * var(--type)); line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: label hangs from the left of the safe area, low in the safe box, with the
+         leader curve coming down into the pill from the upper right. */
+      [data-format="vertical"] #t2-lb-lead .leader-svg, [data-format="square"] #t2-lb-lead .leader-svg { right: auto; left: calc(var(--safe-l) - 40px); top: calc(var(--h) - var(--safe-b) - 340px); }
+      [data-format="vertical"] #t2-lb-lead .label-wrap, [data-format="square"] #t2-lb-lead .label-wrap {
+        right: auto; left: var(--safe-l); top: calc(var(--h) - var(--safe-b) - 340px + 130px);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-lead .local-glow, [data-format="square"] #t2-lb-lead .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 20px);
+      }
+      [data-format="vertical"] #t2-lb-lead [data-slot], [data-format="square"] #t2-lb-lead [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-leg {
-        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 @@
 
       /* Wrapper anchored right */
       #t2-lb-leg .wrapper {
-        position: absolute; right: 140px; top: 490px;
+        position: absolute; right: calc(var(--safe-r) + 44px); top: calc(var(--safe-t) + 436px);
         display: flex; flex-direction: column; align-items: flex-end; gap: 0;
       }
 
@@ -62,7 +62,7 @@
       /* Optional header kicker inside card */
       #t2-lb-leg .legend-header {
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 16px; letter-spacing: var(--track-wide);
+        font-size: calc(16px * var(--type)); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--text-faint);
         margin-bottom: 14px; text-align: right;
       }
@@ -82,7 +82,7 @@
       /* Row label */
       #t2-lb-leg .row-label {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 24px; color: var(--white); text-shadow: var(--textglow);
+        font-size: calc(24px * var(--type)); color: var(--white); text-shadow: var(--textglow);
         white-space: nowrap;
         text-align: right;
       }
@@ -111,9 +111,18 @@
       /* Sub-label beneath each row (the "detail" slot is row 2's label) */
       #t2-lb-leg .row-sub {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 18px; color: var(--text-dim);
+        font-size: calc(18px * var(--type)); color: var(--text-dim);
         text-align: right; margin-top: 2px;
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-leg .wrapper, [data-format="square"] #t2-lb-leg .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-leg .local-glow, [data-format="square"] #t2-lb-leg .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-leg [data-slot], [data-format="square"] #t2-lb-leg [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-meas {
-        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 @@
 
       /* Wrapper anchored left */
       #t2-lb-meas .wrapper {
-        position: absolute; left: 120px; top: 450px;
+        position: absolute; left: calc(var(--safe-l) + 24px); top: calc(var(--safe-t) + 396px);
         display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
       }
 
@@ -49,7 +49,7 @@
       #t2-lb-meas .meas-value {
         position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 30px; letter-spacing: 0.04em;
+        font-size: calc(30px * var(--type)); letter-spacing: 0.04em;
         color: var(--white); text-shadow: var(--textglow);
         padding: 4px 14px;
         background: var(--glass-bg-dark);
@@ -82,15 +82,24 @@
 
       #t2-lb-meas .term {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 26px; letter-spacing: var(--track-snug);
+        font-size: calc(26px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 4px;
       }
 
       #t2-lb-meas .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.45; color: var(--text-dim);
+        font-size: calc(20px * 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-meas .wrapper, [data-format="square"] #t2-lb-meas .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-meas .local-glow, [data-format="square"] #t2-lb-meas .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-meas [data-slot], [data-format="square"] #t2-lb-meas [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-mtr {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Localized ambient glow - right upper area */
       #t2-lb-mtr .local-glow {
         position: absolute;
-        right: 80px; top: 310px;
+        right: calc(var(--safe-r) - 16px); top: calc(var(--safe-t) + 256px);
         width: 500px; height: 300px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 55% 45%,
@@ -37,7 +37,7 @@
       /* The chip - anchored right, upper-mid */
       #t2-lb-mtr .chip {
         position: absolute;
-        right: 120px; top: 340px;
+        right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 286px);
         width: 390px;
         padding: 20px 24px 18px;
         background: var(--glass-bg-dark);
@@ -83,7 +83,7 @@
       #t2-lb-mtr .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 26px;
+        font-size: calc(26px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -125,7 +125,7 @@
       #t2-lb-mtr .pct-label {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         color: var(--accent);
         text-shadow: var(--textglow-accent);
         letter-spacing: 0.06em;
@@ -133,7 +133,7 @@
 
       #t2-lb-mtr .pct-of {
         font-family: var(--font-mono);
-        font-size: 16px;
+        font-size: calc(16px * var(--type));
         color: var(--text-faint);
         letter-spacing: 0.06em;
       }
@@ -149,10 +149,19 @@
       #t2-lb-mtr .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 19px;
+        font-size: calc(19px * var(--type));
         line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-mtr .chip, [data-format="square"] #t2-lb-mtr .chip {
+        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-mtr .local-glow, [data-format="square"] #t2-lb-mtr .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 55px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-mtr [data-slot], [data-format="square"] #t2-lb-mtr [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,14 +13,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-metric {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Localized glow - left side, tightly centered on the pill */
       #t2-lb-metric .local-glow {
-        position: absolute; left: 90px; top: 400px;
+        position: absolute; left: calc(var(--safe-l) + 10px); top: calc(var(--safe-t) + 346px);
         width: 360px; height: 300px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent-rgb), 0.35) 0%,
@@ -32,7 +32,7 @@
 
       /* Pill - left anchor */
       #t2-lb-metric .pill {
-        position: absolute; left: 80px; top: 430px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 376px);
         min-width: 260px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -47,7 +47,7 @@
         padding: 28px 44px 26px;
         display: flex; flex-direction: column;
         align-items: center; gap: 8px;
-        position: absolute; left: 80px; top: 430px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 376px);
       }
 
       /* Inner neon edge lines - top highlight via ::before */
@@ -63,7 +63,7 @@
       /* Large metric value - Space Mono, white→accent gradient */
       #t2-lb-metric .value {
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 68px; letter-spacing: -0.03em; line-height: 1.0;
+        font-size: calc(68px * var(--type)); letter-spacing: -0.03em; line-height: 1.0;
         background: linear-gradient(110deg,
           #FFFFFF 0%, #FFFFFF 35%, var(--accent) 80%);
         -webkit-background-clip: text;
@@ -86,10 +86,19 @@
       /* Detail label */
       #t2-lb-metric .label {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase;
+        font-size: calc(18px * var(--type)); letter-spacing: 0.06em; text-transform: uppercase;
         color: var(--text-dim); text-align: center;
         line-height: 1.3;
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-metric .pill, [data-format="square"] #t2-lb-metric .pill {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-metric .local-glow, [data-format="square"] #t2-lb-metric .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) - 60px);
+      }
+      [data-format="vertical"] #t2-lb-metric [data-slot], [data-format="square"] #t2-lb-metric [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-mpie {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Local bloom behind component */
       #t2-lb-mpie .local-glow {
-        position: absolute; right: 100px; top: 360px;
+        position: absolute; right: calc(var(--safe-r) + 4px); top: calc(var(--safe-t) + 306px);
         width: 520px; height: 300px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent-rgb), 0.22) 0%,
@@ -34,7 +34,7 @@
 
       /* Outer positioning wrapper - right anchored */
       #t2-lb-mpie .wrapper {
-        position: absolute; right: 140px; top: 400px;
+        position: absolute; right: calc(var(--safe-r) + 44px); top: calc(var(--safe-t) + 346px);
         display: flex; flex-direction: row; align-items: center; gap: 30px;
         z-index: 2;
       }
@@ -68,7 +68,7 @@
       #t2-lb-mpie .pct-text {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         letter-spacing: -0.02em;
         color: var(--white);
         text-shadow: var(--textglow-accent);
@@ -83,7 +83,7 @@
       #t2-lb-mpie .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 30px;
+        font-size: calc(30px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -110,10 +110,19 @@
       #t2-lb-mpie .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 19px;
+        font-size: calc(19px * var(--type));
         line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-mpie .wrapper, [data-format="square"] #t2-lb-mpie .wrapper {
+        top: auto; right: auto; left: var(--safe-l); bottom: var(--safe-b); width: auto;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-mpie .local-glow, [data-format="square"] #t2-lb-mpie .local-glow {
+        top: auto; right: auto; left: var(--safe-l); bottom: calc(var(--safe-b) - 60px);
+      }
+      [data-format="vertical"] #t2-lb-mpie [data-slot], [data-format="square"] #t2-lb-mpie [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,14 +14,14 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-bar {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
 
       /* Localized glow - right side */
       #t2-lb-bar .local-glow {
-        position: absolute; right: 55px; top: 310px;
+        position: absolute; right: calc(var(--safe-r) - 25px); top: calc(var(--safe-t) + 256px);
         width: 540px; height: 360px; border-radius: 50%;
         background: radial-gradient(ellipse at 50% 50%,
           rgba(var(--accent-rgb), 0.20) 0%,
@@ -33,7 +33,7 @@
 
       /* Card - right anchor */
       #t2-lb-bar .card {
-        position: absolute; right: 80px; top: 340px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 286px);
         width: 460px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -66,7 +66,7 @@
 
       #t2-lb-bar .term {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 30px; letter-spacing: var(--track-tight);
+        font-size: calc(30px * var(--type)); letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         line-height: 1.2;
       }
@@ -74,7 +74,7 @@
       /* % counter - Space Mono, accent gradient */
       #t2-lb-bar .pct {
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 28px; letter-spacing: -0.02em;
+        font-size: calc(28px * var(--type)); letter-spacing: -0.02em;
         background: linear-gradient(110deg, #FFFFFF 0%, var(--accent) 100%);
         -webkit-background-clip: text;
         background-clip: text;
@@ -106,9 +106,18 @@
       /* Detail */
       #t2-lb-bar .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; color: var(--text-dim); line-height: 1.4;
+        font-size: calc(20px * var(--type)); color: var(--text-dim); line-height: 1.4;
         letter-spacing: 0.01em;
       }
+      /* Vertical and square: the card drops to the bottom of the safe area, left aligned, its glow following. */
+      [data-format="vertical"] #t2-lb-bar .card, [data-format="square"] #t2-lb-bar .card {
+        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-bar .local-glow, [data-format="square"] #t2-lb-bar .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 70px);
+      }
+      [data-format="vertical"] #t2-lb-bar [data-slot], [data-format="square"] #t2-lb-bar [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>