luckiest-co 1.0.32 → 1.0.34

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-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-display);
       }
@@ -24,7 +24,7 @@
       /* Localized bloom */
       #t2-lt-coord .local-bloom {
         position: absolute;
-        left: 50px; bottom: 70px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 16px);
         width: 700px; height: 240px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 42% 82%,
@@ -39,7 +39,7 @@
       /* Outer stack */
       #t2-lt-coord .stack {
         position: absolute;
-        left: 80px; bottom: 100px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 46px);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -70,7 +70,7 @@
       #t2-lt-coord .name {
         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);
@@ -123,7 +123,7 @@
       #t2-lt-coord .field-key {
         font-family: var(--font-mono);
         font-weight: var(--wt-reg);
-        font-size: 16px;
+        font-size: calc(16px * var(--type));
         letter-spacing: 0.12em;
         text-transform: uppercase;
         color: var(--text-faint);
@@ -134,7 +134,7 @@
       #t2-lt-coord .field-val {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 18px;
+        font-size: calc(18px * var(--type));
         letter-spacing: 0.06em;
         color: var(--accent);
         text-shadow: var(--textglow-accent);
@@ -160,6 +160,16 @@
         margin-left: 14px;
         flex-shrink: 0;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-coord .stack, [data-format="square"] #t2-lt-coord .stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-coord .local-bloom, [data-format="square"] #t2-lt-coord .local-bloom { bottom: calc(var(--safe-b) - 30px); }
+      [data-format="vertical"] #t2-lt-coord [data-slot], [data-format="square"] #t2-lt-coord [data-slot] { white-space: normal; }
+      /* vertical: the three data fields stack instead of running past the safe edge */
+      [data-format="vertical"] #t2-lt-coord .data-bar { flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
+      [data-format="vertical"] #t2-lt-coord .field-sep { display: none; }
+      [data-format="vertical"] #t2-lt-coord .cursor { margin-left: 0; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cor {
-        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);
       }
@@ -21,7 +21,7 @@
       /* Localized bloom at the corner */
       #t2-lt-cor .local-bloom {
         position: absolute;
-        left: -20px; bottom: -20px;
+        left: calc(var(--safe-l) - 44px); bottom: calc(var(--safe-b) - 44px);
         width: 480px; height: 360px;
         background: radial-gradient(ellipse at 20% 85%,
           rgba(var(--accent-rgb), 0.30) 0%,
@@ -35,7 +35,7 @@
       /* L-shape: two overlapping glass panels */
       #t2-lt-cor .l-wrap {
         position: absolute;
-        left: 0; bottom: 0;
+        left: calc(var(--safe-l) - 24px); bottom: calc(var(--safe-b) - 24px);
         z-index: 2;
       }
 
@@ -111,7 +111,7 @@
       #t2-lt-cor .name {
         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);
@@ -122,11 +122,17 @@
       #t2-lt-cor .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
       }
+      /* Vertical and square: the L already sits on the safe corner; the card sizes to its text, capped
+         at the safe width, and slots wrap. */
+      [data-format="vertical"] #t2-lt-cor .card, [data-format="square"] #t2-lt-cor .card {
+        width: max-content; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 52px);
+      }
+      [data-format="vertical"] #t2-lt-cor [data-slot], [data-format="square"] #t2-lt-cor [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cframe {
-        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 bloom */
       #t2-lt-cframe .local-bloom {
         position: absolute;
-        left: 55px; bottom: 80px;
+        left: calc(var(--safe-l) - 25px); bottom: calc(var(--safe-b) + 26px);
         width: 580px; height: 260px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 78%,
@@ -38,7 +38,7 @@
       /* Cage wrapper - positions the brackets + text block together */
       #t2-lt-cframe .cage {
         position: absolute;
-        left: 80px; bottom: 108px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 54px);
         width: 480px; height: 140px;
         z-index: 2;
       }
@@ -61,7 +61,7 @@
       #t2-lt-cframe .name {
         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);
@@ -72,7 +72,7 @@
       #t2-lt-cframe .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.2;
@@ -97,6 +97,16 @@
         fill: none;
         filter: url(#cframe-glow);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-cframe .cage, [data-format="square"] #t2-lt-cframe .cage {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-cframe .local-bloom, [data-format="square"] #t2-lt-cframe .local-bloom { bottom: calc(var(--safe-b) - 28px); }
+      [data-format="vertical"] #t2-lt-cframe [data-slot], [data-format="square"] #t2-lt-cframe [data-slot] { white-space: normal; }
+      /* the cage grows with the larger type; the brackets stretch to its corners */
+      [data-format="vertical"] #t2-lt-cframe .cage, [data-format="square"] #t2-lt-cframe .cage { width: auto; height: auto; min-width: 480px; min-height: 140px; }
+      [data-format="vertical"] #t2-lt-cframe .text-block, [data-format="square"] #t2-lt-cframe .text-block { position: relative; inset: auto; margin: 16px; }
+      [data-format="vertical"] #t2-lt-cframe .brackets-svg line, [data-format="square"] #t2-lt-cframe .brackets-svg line { vector-effect: non-scaling-stroke; }
     </style>
   </head>
   <body>
@@ -125,7 +135,7 @@
           We animate stroke-dashoffset on each segment.
           Arm length 36px → dasharray 36, dashoffset starts at 36 (hidden), animates to 0.
         -->
-        <svg class="brackets-svg" viewBox="0 0 480 140">
+        <svg class="brackets-svg" viewBox="0 0 480 140" preserveAspectRatio="none">
           <defs>
             <filter id="cframe-glow" x="-30%" y="-30%" width="160%" height="160%">
               <feGaussianBlur stdDeviation="3" result="blur"/>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-cnt {
-        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 bloom */
       #t2-lt-cnt .local-bloom {
         position: absolute;
-        left: 50px; bottom: 70px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 16px);
         width: 560px; height: 280px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 75%,
@@ -38,7 +38,7 @@
       /* Card */
       #t2-lt-cnt .card {
         position: absolute;
-        left: 80px; bottom: 110px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 56px);
         width: 480px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -62,7 +62,7 @@
       #t2-lt-cnt .name {
         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);
@@ -91,7 +91,7 @@
 
       #t2-lt-cnt .count-label {
         font-family: var(--font-mono);
-        font-size: 15px;
+        font-size: calc(15px * var(--type));
         font-weight: var(--wt-bold);
         letter-spacing: var(--track-wide);
         text-transform: uppercase;
@@ -101,7 +101,7 @@
       #t2-lt-cnt .count-number {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: 0.04em;
         color: var(--accent);
         text-shadow: var(--textglow-accent);
@@ -110,7 +110,7 @@
 
       #t2-lt-cnt .count-suffix {
         font-family: var(--font-mono);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         color: var(--text-dim);
         margin-left: 4px;
       }
@@ -122,6 +122,12 @@
         background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 40%,
                                      rgba(255,255,255,0.55) 60%, transparent);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-cnt .card, [data-format="square"] #t2-lt-cnt .card {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-cnt .local-bloom, [data-format="square"] #t2-lt-cnt .local-bloom { bottom: calc(var(--safe-b) - 40px); }
+      [data-format="vertical"] #t2-lt-cnt [data-slot], [data-format="square"] #t2-lt-cnt [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-divn {
-        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);
       }
@@ -22,7 +22,7 @@
       /* Localized bloom behind the component */
       #t2-lt-divn .local-bloom {
         position: absolute;
-        left: 50px; bottom: 80px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 26px);
         width: 660px; height: 200px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 80%,
@@ -37,7 +37,7 @@
       /* Outer wrapper - anchored lower-left */
       #t2-lt-divn .row {
         position: absolute;
-        left: 80px; bottom: 118px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 64px);
         display: flex;
         align-items: center;
         gap: 0;
@@ -69,7 +69,7 @@
       #t2-lt-divn .name {
         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);
@@ -122,7 +122,7 @@
       #t2-lt-divn .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 24px;
+        font-size: calc(24px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         white-space: nowrap;
@@ -132,7 +132,7 @@
       /* Accent glow rule across full bottom of both blocks */
       #t2-lt-divn .glow-rule {
         position: absolute;
-        left: 80px; bottom: 118px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 64px);
         width: 0;
         height: 2px;
         background: linear-gradient(90deg,
@@ -143,6 +143,26 @@
         z-index: 4;
         /* width animated by GSAP */
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-divn .row, [data-format="square"] #t2-lt-divn .row {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-divn .local-bloom, [data-format="square"] #t2-lt-divn .local-bloom { bottom: calc(var(--safe-b) - 38px); }
+      [data-format="vertical"] #t2-lt-divn .glow-rule, [data-format="square"] #t2-lt-divn .glow-rule { bottom: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-divn [data-slot], [data-format="square"] #t2-lt-divn [data-slot] { white-space: normal; }
+      /* Vertical: name block over role block, the divider turns into a horizontal seam between them. */
+      [data-format="vertical"] #t2-lt-divn .row { flex-direction: column; align-items: stretch; }
+      [data-format="vertical"] #t2-lt-divn .name-block {
+        border-radius: var(--radius) var(--radius) 0 0; border-right: var(--stroke) solid var(--glass-border); border-bottom: none;
+      }
+      [data-format="vertical"] #t2-lt-divn .divider {
+        width: auto; height: 3px;
+        background: linear-gradient(90deg, transparent 0%, var(--accent) 15%, var(--accent) 85%, transparent 100%);
+      }
+      [data-format="vertical"] #t2-lt-divn .role-block {
+        border-radius: 0 0 var(--radius) var(--radius); border-left: var(--stroke) solid var(--glass-border); border-top: none;
+        padding-left: 36px;
+      }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-dotl {
-        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 glow centered on the dotline assembly */
       #t2-lt-dotl .local-bloom {
         position: absolute;
-        left: 40px; bottom: 105px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 51px);
         width: 680px; height: 190px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 42% 75%,
@@ -38,7 +38,7 @@
       /* The whole assembly - anchored lower-left */
       #t2-lt-dotl .assembly {
         position: absolute;
-        left: 80px; bottom: 148px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 94px);
         display: flex;
         align-items: center;
         gap: 0;
@@ -87,7 +87,7 @@
       #t2-lt-dotl .name {
         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);
@@ -105,7 +105,7 @@
       #t2-lt-dotl .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.2;
@@ -117,6 +117,12 @@
         border: var(--stroke) solid var(--glass-border);
         border-top: none;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-dotl .assembly, [data-format="square"] #t2-lt-dotl .assembly {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-dotl .local-bloom, [data-format="square"] #t2-lt-dotl .local-bloom { bottom: calc(var(--safe-b) - 43px); }
+      [data-format="vertical"] #t2-lt-dotl [data-slot], [data-format="square"] #t2-lt-dotl [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-dcard {
-        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 bloom */
       #t2-lt-dcard .local-bloom {
         position: absolute;
-        left: 50px; bottom: 80px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 26px);
         width: 600px; height: 280px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 80%,
@@ -38,7 +38,7 @@
       /* Stack container - two cards stacked vertically */
       #t2-lt-dcard .stack {
         position: absolute;
-        left: 80px; bottom: 118px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 64px);
         display: flex;
         flex-direction: column;
         gap: 8px;
@@ -86,7 +86,7 @@
       #t2-lt-dcard .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 32px;
+        font-size: calc(32px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -126,7 +126,7 @@
       /* Label kicker above topic */
       #t2-lt-dcard .topic-label {
         font-family: var(--font-mono);
-        font-size: 17px;
+        font-size: calc(17px * var(--type));
         font-weight: var(--wt-reg);
         letter-spacing: var(--track-wide);
         color: var(--accent);
@@ -139,12 +139,18 @@
       #t2-lt-dcard .topic {
         font-family: var(--font-body);
         font-weight: var(--wt-semi);
-        font-size: 26px;
+        font-size: calc(26px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--text);
         line-height: 1.3;
         padding-left: 14px;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-dcard .stack, [data-format="square"] #t2-lt-dcard .stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-dcard .local-bloom, [data-format="square"] #t2-lt-dcard .local-bloom { bottom: calc(var(--safe-b) - 38px); }
+      [data-format="vertical"] #t2-lt-dcard [data-slot], [data-format="square"] #t2-lt-dcard [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-dual {
-        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 bloom behind both cards */
       #t2-lt-dual .local-bloom {
         position: absolute;
-        left: 50px; bottom: 90px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 36px);
         width: 560px; height: 320px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 50% 85%,
@@ -38,7 +38,7 @@
       /* Stack container */
       #t2-lt-dual .stack {
         position: absolute;
-        left: 80px; bottom: 110px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 56px);
         display: flex;
         flex-direction: column;
         gap: 14px;
@@ -97,7 +97,7 @@
         box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.50);
         display: flex; align-items: center; justify-content: center;
         font-family: var(--font-mono);
-        font-size: 13px;
+        font-size: calc(13px * var(--type));
         color: var(--accent);
         line-height: 1;
       }
@@ -109,7 +109,7 @@
       #t2-lt-dual .name {
         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);
@@ -119,7 +119,7 @@
       #t2-lt-dual .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 18px;
+        font-size: calc(18px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -136,6 +136,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-dual .stack, [data-format="square"] #t2-lt-dual .stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-dual .local-bloom, [data-format="square"] #t2-lt-dual .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-dual [data-slot], [data-format="square"] #t2-lt-dual [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-edge {
-        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);
       }
@@ -22,7 +22,7 @@
       /* Localized bloom anchored to the bar */
       #t2-lt-edge .local-bloom {
         position: absolute;
-        left: 52px; bottom: 108px;
+        left: calc(var(--safe-l) - 28px); bottom: calc(var(--safe-b) + 54px);
         width: 380px; height: 200px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 8% 60%,
@@ -37,7 +37,7 @@
       /* The whole strip */
       #t2-lt-edge .strip {
         position: absolute;
-        left: 80px; bottom: 130px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 76px);
         display: flex; align-items: center;
         gap: 0;
         padding: 18px 32px 18px 0;
@@ -81,7 +81,7 @@
       #t2-lt-edge .name {
         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);
@@ -92,12 +92,18 @@
       #t2-lt-edge .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         line-height: 1.3;
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-edge .strip, [data-format="square"] #t2-lt-edge .strip {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-edge .local-bloom, [data-format="square"] #t2-lt-edge .local-bloom { bottom: calc(var(--safe-b) - 22px); }
+      [data-format="vertical"] #t2-lt-edge [data-slot], [data-format="square"] #t2-lt-edge [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

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

@@ -16,7 +16,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-flip {
-        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);
       }
@@ -24,7 +24,7 @@
       /* Bloom behind the card */
       #t2-lt-flip .local-bloom {
         position: absolute;
-        left: 50px; bottom: 88px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 34px);
         width: 520px; height: 240px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 75%,
@@ -39,7 +39,7 @@
       /* 3D scene wrapper - sets perspective */
       #t2-lt-flip .scene {
         position: absolute;
-        left: 80px; bottom: 118px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 64px);
         width: 480px;
         height: 124px;
         perspective: 900px;
@@ -99,7 +99,7 @@
       #t2-lt-flip .name {
         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);
@@ -111,7 +111,7 @@
       #t2-lt-flip .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -125,6 +125,16 @@
         background: var(--accent);
         box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.85);
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-flip .scene, [data-format="square"] #t2-lt-flip .scene {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-flip .local-bloom, [data-format="square"] #t2-lt-flip .local-bloom { bottom: calc(var(--safe-b) - 30px); }
+      [data-format="vertical"] #t2-lt-flip [data-slot], [data-format="square"] #t2-lt-flip [data-slot] { white-space: normal; }
+      /* the card grows to the larger type instead of clipping it: the front face sets the height */
+      [data-format="vertical"] #t2-lt-flip .scene, [data-format="square"] #t2-lt-flip .scene { width: auto; min-width: 480px; height: auto; }
+      [data-format="vertical"] #t2-lt-flip .flipper, [data-format="square"] #t2-lt-flip .flipper { height: auto; min-height: 124px; }
+      [data-format="vertical"] #t2-lt-flip .face-front, [data-format="square"] #t2-lt-flip .face-front { position: relative; inset: auto; min-height: 124px; box-sizing: border-box; }
     </style>
   </head>
   <body>