luckiest-co 1.0.32 → 1.0.34

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-brace {
-        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 @@
       /* Outer layout: brace column + content column */
       #t2-lb-brace .annotation {
         position: absolute;
-        left: 80px; top: 368px;
+        left: var(--safe-l); top: calc(var(--safe-t) + 314px);
         display: flex;
         flex-direction: row;
         align-items: stretch;
@@ -74,7 +74,7 @@
       #t2-lb-brace .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -105,7 +105,7 @@
       #t2-lb-brace .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         line-height: 1.50;
         color: var(--text-dim);
       }
@@ -121,6 +121,15 @@
         box-shadow: var(--glow-accent), 0 0 20px rgba(var(--accent-rgb), 0.55);
         transform: translate(-50%, -50%);
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-brace .annotation, [data-format="square"] #t2-lb-brace .annotation {
+        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-brace .local-glow, [data-format="square"] #t2-lb-brace .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-brace [data-slot], [data-format="square"] #t2-lb-brace [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-brk {
-        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 @@
 
       /* Outer wrapper - holds glass backing + bracket SVG */
       #t2-lb-brk .bracket-wrap {
-        position: absolute; left: 80px; top: 320px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 266px);
         width: 500px;
       }
 
@@ -80,7 +80,7 @@
       /* Term */
       #t2-lb-brk .term {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 36px; letter-spacing: var(--track-tight);
+        font-size: calc(36px * var(--type)); letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 14px; line-height: 1.2;
       }
@@ -98,9 +98,18 @@
       /* Detail */
       #t2-lb-brk .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 26px; line-height: 1.55;
+        font-size: calc(26px * var(--type)); line-height: 1.55;
         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-brk .bracket-wrap, [data-format="square"] #t2-lb-brk .bracket-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-brk .local-glow, [data-format="square"] #t2-lb-brk .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-brk [data-slot], [data-format="square"] #t2-lb-brk [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-bub {
-        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 @@
 
       /* Bubble wrapper - anchored right */
       #t2-lb-bub .bubble-wrap {
-        position: absolute; right: 130px; top: 360px;
+        position: absolute; right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 306px);
         display: flex; flex-direction: column; gap: 0;
         /* transform-origin bottom-left for tail-anchored spring */
         transform-origin: calc(100% - 60px) 100%;
@@ -75,7 +75,7 @@
       /* Term text */
       #t2-lb-bub .bubble-term {
         font-family: var(--font-display); font-weight: var(--wt-bold);
-        font-size: 32px; letter-spacing: var(--track-snug);
+        font-size: calc(32px * var(--type)); letter-spacing: var(--track-snug);
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 10px;
         line-height: 1.1;
@@ -84,7 +84,7 @@
       /* Detail text */
       #t2-lb-bub .bubble-detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 21px; line-height: 1.5;
+        font-size: calc(21px * var(--type)); line-height: 1.5;
         color: var(--text-dim);
         max-width: 420px;
       }
@@ -107,6 +107,18 @@
         stroke-linejoin: round;
         filter: drop-shadow(0 2px 8px rgba(0,0,0,0.50));
       }
+      /* Vertical and square: bubble sits bottom-left of the safe area with its tail just under it. */
+      [data-format="vertical"] #t2-lb-bub .bubble-wrap, [data-format="square"] #t2-lb-bub .bubble-wrap {
+        top: auto; right: auto; left: var(--safe-l); bottom: calc(var(--safe-b) + 24px);
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lb-bub .tail-svg, [data-format="square"] #t2-lb-bub .tail-svg {
+        top: auto; right: auto; left: calc(var(--safe-l) + 60px); bottom: var(--safe-b);
+      }
+      [data-format="vertical"] #t2-lb-bub .local-glow, [data-format="square"] #t2-lb-bub .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-bub [data-slot], [data-format="square"] #t2-lb-bub [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-byl {
-        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 @@
 
       /* Wrapper - anchored lower-left, safe from face */
       #t2-lb-byl .byline-bar {
-        position: absolute; left: 100px; bottom: 180px;
+        position: absolute; left: calc(var(--safe-l) + 4px); bottom: calc(var(--safe-b) + 126px);
         display: inline-flex; align-items: center; gap: 0;
         height: 64px;
         background: var(--glass-bg-dark);
@@ -75,7 +75,7 @@
       #t2-lb-byl .dash {
         font-family: var(--font-display);
         font-weight: var(--wt-semi);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--accent);
         text-shadow: var(--textglow-accent);
         letter-spacing: 0.04em;
@@ -85,7 +85,7 @@
       #t2-lb-byl .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 24px;
+        font-size: calc(24px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -103,7 +103,7 @@
       #t2-lb-byl .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         white-space: nowrap;
@@ -116,6 +116,18 @@
         box-shadow: var(--glow-accent-sm);
         flex-shrink: 0;
       }
+      /* Vertical and square: byline bar on the bottom-left of the safe area; it grows and wraps if the name and role run long. */
+      [data-format="vertical"] #t2-lb-byl .byline-bar, [data-format="square"] #t2-lb-byl .byline-bar {
+        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-byl .local-glow, [data-format="square"] #t2-lb-byl .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-byl .byline-bar, [data-format="square"] #t2-lb-byl .byline-bar { height: auto; min-height: 64px; }
+      [data-format="vertical"] #t2-lb-byl .inner, [data-format="square"] #t2-lb-byl .inner { flex-wrap: wrap; row-gap: 4px; padding-top: 12px; padding-bottom: 12px; }
+      [data-format="vertical"] #t2-lb-byl .local-glow, [data-format="square"] #t2-lb-byl .local-glow { bottom: calc(var(--safe-b) - 30px); }
+      [data-format="vertical"] #t2-lb-byl [data-slot], [data-format="square"] #t2-lb-byl [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-call {
-        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);
       }
@@ -32,7 +32,7 @@
 
       /* Card anchored right */
       #t2-lb-call .card {
-        position: absolute; right: 80px; top: 340px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 286px);
         width: 500px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -59,7 +59,7 @@
       /* Heading */
       #t2-lb-call .heading {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 38px; letter-spacing: var(--track-tight);
+        font-size: calc(38px * var(--type)); letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         margin-bottom: 18px;
       }
@@ -77,9 +77,18 @@
       /* Detail body */
       #t2-lb-call .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 27px; line-height: 1.5;
+        font-size: calc(27px * var(--type)); line-height: 1.5;
         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-call .card, [data-format="square"] #t2-lb-call .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-call .local-glow, [data-format="square"] #t2-lb-call .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-call [data-slot], [data-format="square"] #t2-lb-call [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-cat {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
       }
 
@@ -32,7 +32,7 @@
 
       /* Glass card anchored right */
       #t2-lb-cat .card {
-        position: absolute; right: 80px; top: 310px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 256px);
         width: 510px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -77,7 +77,7 @@
 
       #t2-lb-cat .cat-label {
         font-family: var(--font-body); font-weight: var(--wt-semi);
-        font-size: 14px; letter-spacing: var(--track-wide);
+        font-size: calc(14px * var(--type)); letter-spacing: var(--track-wide);
         text-transform: uppercase;
         color: var(--accent); text-shadow: var(--textglow-accent);
         line-height: 1;
@@ -86,7 +86,7 @@
       /* Term heading */
       #t2-lb-cat .term {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 38px; letter-spacing: var(--track-tight);
+        font-size: calc(38px * var(--type)); letter-spacing: var(--track-tight);
         color: var(--white); text-shadow: var(--textglow);
         line-height: 1.15; margin-bottom: 14px;
       }
@@ -104,9 +104,18 @@
       /* Detail body */
       #t2-lb-cat .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 26px; line-height: 1.52;
+        font-size: calc(26px * var(--type)); line-height: 1.52;
         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-cat .card, [data-format="square"] #t2-lb-cat .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-cat .local-glow, [data-format="square"] #t2-lb-cat .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-cat [data-slot], [data-format="square"] #t2-lb-cat [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-chk {
-        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);
       }
@@ -36,7 +36,7 @@
       /* Outer wrapper - left side, mid-height */
       #t2-lb-chk .wrapper {
         position: absolute;
-        left: 80px; top: 380px;
+        left: var(--safe-l); top: calc(var(--safe-t) + 326px);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -74,7 +74,7 @@
       #t2-lb-chk .term {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -99,10 +99,19 @@
       #t2-lb-chk .detail {
         font-family: var(--font-body);
         font-weight: var(--wt-reg);
-        font-size: 22px;
+        font-size: calc(22px * 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-chk .wrapper, [data-format="square"] #t2-lb-chk .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-chk .local-glow, [data-format="square"] #t2-lb-chk .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-chk [data-slot], [data-format="square"] #t2-lb-chk [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-chip {
-        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 @@
 
       /* Chip anchored right */
       #t2-lb-chip .chip {
-        position: absolute; right: 80px; top: 440px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 386px);
         /* intrinsic width - sized to content */
         min-width: 240px;
         background: var(--glass-bg-dark);
@@ -47,7 +47,7 @@
         border-radius: var(--radius-sm); /* 16px - compact */
         padding: 22px 30px 20px;
         display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
-        position: absolute; right: 80px; top: 440px;
+        position: absolute; right: var(--safe-r); top: calc(var(--safe-t) + 386px);
       }
 
       /* Top neon edge rim */
@@ -88,10 +88,19 @@
       /* Detail label */
       #t2-lb-chip .label {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 19px; letter-spacing: 0.05em;
+        font-size: calc(19px * var(--type)); letter-spacing: 0.05em;
         color: var(--text-dim);
         line-height: 1.4;
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-chip .chip, [data-format="square"] #t2-lb-chip .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-chip .local-glow, [data-format="square"] #t2-lb-chip .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-chip [data-slot], [data-format="square"] #t2-lb-chip [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-cmp {
-        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 @@
 
       /* Chip - left anchor */
       #t2-lb-cmp .chip {
-        position: absolute; left: 80px; top: 420px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 366px);
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
         -webkit-backdrop-filter: var(--glass-blur);
@@ -70,7 +70,7 @@
       /* Values - Space Mono gradient */
       #t2-lb-cmp .val {
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 44px; letter-spacing: -0.02em; line-height: 1.0;
+        font-size: calc(44px * var(--type)); letter-spacing: -0.02em; line-height: 1.0;
         display: block; text-align: center;
       }
 
@@ -91,7 +91,7 @@
       /* Sub-label */
       #t2-lb-cmp .sub {
         font-family: var(--font-body); font-weight: var(--wt-med);
-        font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
+        font-size: calc(17px * var(--type)); letter-spacing: 0.04em; text-transform: uppercase;
         color: var(--text-faint); text-align: center;
         line-height: 1.3;
       }
@@ -111,13 +111,22 @@
         position: absolute; left: 50%; top: 50%;
         transform: translate(-50%, -50%);
         font-family: var(--font-mono); font-weight: 700;
-        font-size: 13px; letter-spacing: 0.10em; color: var(--accent);
+        font-size: calc(13px * var(--type)); letter-spacing: 0.10em; color: var(--accent);
         background: rgba(16, 22, 34, 0.80);
         padding: 3px 7px; border-radius: 4px;
         border: 1px solid rgba(var(--accent-rgb), 0.35);
         box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.40);
         white-space: nowrap;
       }
+      /* Vertical and square: card moves to the bottom-left of the safe area, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-cmp .chip, [data-format="square"] #t2-lb-cmp .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-cmp .local-glow, [data-format="square"] #t2-lb-cmp .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-cmp [data-slot], [data-format="square"] #t2-lb-cmp [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-coord {
-        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-mono);
       }
@@ -33,7 +33,7 @@
 
       /* Outer bracket wrapper */
       #t2-lb-coord .bracket-outer {
-        position: absolute; left: 80px; top: 390px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 336px);
         width: 560px;
       }
 
@@ -105,14 +105,14 @@
 
       #t2-lb-coord .coord-axis {
         font-family: var(--font-mono); font-weight: var(--wt-reg);
-        font-size: 13px; letter-spacing: var(--track-wide);
+        font-size: calc(13px * var(--type)); letter-spacing: var(--track-wide);
         color: var(--accent); text-transform: uppercase;
         text-shadow: var(--textglow-accent);
       }
 
       #t2-lb-coord .coord-val {
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 32px; letter-spacing: 0.04em;
+        font-size: calc(32px * var(--type)); letter-spacing: 0.04em;
         color: var(--white); text-shadow: var(--textglow);
         line-height: 1.0;
       }
@@ -125,7 +125,7 @@
 
       /* Term label below chip */
       #t2-lb-coord .term-wrap {
-        position: absolute; left: 80px; top: 530px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 476px);
         display: flex; align-items: center; gap: 12px;
       }
 
@@ -138,7 +138,7 @@
 
       #t2-lb-coord .term-text {
         font-family: var(--font-display); font-weight: var(--wt-semi);
-        font-size: 22px; letter-spacing: var(--track-wide);
+        font-size: calc(22px * var(--type)); letter-spacing: var(--track-wide);
         color: var(--text-dim); text-transform: uppercase;
         text-shadow: var(--textglow);
         white-space: nowrap;
@@ -146,7 +146,7 @@
 
       /* Detail strip */
       #t2-lb-coord .detail-wrap {
-        position: absolute; left: 80px; top: 574px;
+        position: absolute; left: var(--safe-l); top: calc(var(--safe-t) + 520px);
         padding: 8px 18px 8px 16px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -159,9 +159,27 @@
 
       #t2-lb-coord .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: chip, term and detail stack in flow at the bottom-left of the safe area;
+         the loose corner-bracket decoration (top-left of the frame) is hidden. */
+      [data-format="vertical"] #t2-lb-coord, [data-format="square"] #t2-lb-coord {
+        display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
+        box-sizing: border-box; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
+      }
+      [data-format="vertical"] #t2-lb-coord .bracket-outer, [data-format="square"] #t2-lb-coord .bracket-outer,
+      [data-format="vertical"] #t2-lb-coord .term-wrap, [data-format="square"] #t2-lb-coord .term-wrap,
+      [data-format="vertical"] #t2-lb-coord .detail-wrap, [data-format="square"] #t2-lb-coord .detail-wrap {
+        position: relative; top: auto; left: auto; max-width: 100%;
+      }
+      [data-format="vertical"] #t2-lb-coord .term-wrap, [data-format="square"] #t2-lb-coord .term-wrap { margin-top: 36px; }
+      [data-format="vertical"] #t2-lb-coord .detail-wrap, [data-format="square"] #t2-lb-coord .detail-wrap { margin-top: 14px; max-width: 480px; }
+      [data-format="vertical"] #t2-lb-coord .bracket-svg, [data-format="square"] #t2-lb-coord .bracket-svg { display: none; }
+      [data-format="vertical"] #t2-lb-coord .local-glow, [data-format="square"] #t2-lb-coord .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 60px);
+      }
+      [data-format="vertical"] #t2-lb-coord [data-slot], [data-format="square"] #t2-lb-coord [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lb-cntr {
-        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 @@
 
       /* Main wrapper anchored right */
       #t2-lb-cntr .wrapper {
-        position: absolute; right: 140px; top: 340px;
+        position: absolute; right: calc(var(--safe-r) + 44px); top: calc(var(--safe-t) + 286px);
         display: flex; flex-direction: column; align-items: flex-end; gap: 0;
       }
 
@@ -42,7 +42,7 @@
 
       #t2-lb-cntr .count-num {
         font-family: var(--font-display); font-weight: var(--wt-black);
-        font-size: 110px; line-height: 1; letter-spacing: var(--track-tight);
+        font-size: calc(110px * var(--type)); line-height: 1; letter-spacing: var(--track-tight);
         background: linear-gradient(150deg, #ffffff 10%, rgba(var(--accent-rgb), 0.90) 85%);
         -webkit-background-clip: text; background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -51,7 +51,7 @@
 
       #t2-lb-cntr .count-suffix {
         font-family: var(--font-mono); font-weight: var(--wt-bold);
-        font-size: 38px; letter-spacing: 0.05em;
+        font-size: calc(38px * var(--type)); letter-spacing: 0.05em;
         color: var(--accent); text-shadow: var(--textglow-accent);
         padding-bottom: 12px;
       }
@@ -85,16 +85,27 @@
 
       #t2-lb-cntr .term {
         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);
         margin-bottom: 4px;
       }
 
       #t2-lb-cntr .detail {
         font-family: var(--font-body); font-weight: var(--wt-reg);
-        font-size: 20px; line-height: 1.45;
+        font-size: calc(20px * var(--type)); line-height: 1.45;
         color: var(--text-dim);
       }
+      /* Vertical and square: number and card move to the bottom-left of the safe area and align left, glow follows, slots wrap. */
+      [data-format="vertical"] #t2-lb-cntr .wrapper, [data-format="square"] #t2-lb-cntr .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-cntr .local-glow, [data-format="square"] #t2-lb-cntr .local-glow {
+        top: auto; right: auto; left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) - 40px);
+      }
+      [data-format="vertical"] #t2-lb-cntr .wrapper, [data-format="square"] #t2-lb-cntr .wrapper { align-items: flex-start; }
+      [data-format="vertical"] #t2-lb-cntr .text-block, [data-format="square"] #t2-lb-cntr .text-block { text-align: left; }
+      [data-format="vertical"] #t2-lb-cntr [data-slot], [data-format="square"] #t2-lb-cntr [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>