@yoobic/yobi 8.3.0-17 → 8.3.0-18

package/dist/cjs/{yoo-ion-slides-ddaabe00.js → yoo-ion-slides-272e7ebb.js}

@@ -11378,8 +11378,14 @@ const YooIonSlidesComponent = class {
    * Transition to the specified slide.
    */
   async slideTo(index, speed, runCallbacks) {
+    var _a;
     const swiper = await this.getSwiper();
-    swiper.slideTo(index, speed, runCallbacks);
+    if (index >= ((_a = swiper.slides) === null || _a === void 0 ? void 0 : _a.length)) {
+      swiper.once('slidesLengthChange', () => swiper.slideTo(index, speed, runCallbacks));
+    }
+    else {
+      swiper.slideTo(index, speed, runCallbacks);
+    }
   }
   /**
    * Transition to the next slide.
@@ -11575,7 +11581,7 @@ const YooIonSlidesComponent = class {
   async initSwiper() {
     const finalOptions = this.normalizeOptions();
     // init swiper core
-    const { Swiper } = await Promise.resolve().then(function () { return require('./swiper-fedb543f.js'); });
+    const { Swiper } = await Promise.resolve().then(function () { return require('./swiper-bbba57e0.js'); });
     await waitForSlides(this.el);
     const swiper = new Swiper(this.el, finalOptions);
     this.swiperReady = true;

package/dist/cjs/yoo-ion-slides.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const yooIonSlides_entry = require('./yoo-ion-slides-ddaabe00.js');
+const yooIonSlides_entry = require('./yoo-ion-slides-272e7ebb.js');
 require('./index-6482c595.js');
 require('./index-cdada3c1.js');
 require('./overlays-e40de213.js');

package/dist/cjs/yoo-lesson-question-result.cjs.entry.js

@@ -220,7 +220,7 @@ const YooLessonQuestionResultComponent = class {
     }
     else if (!overlays.isContentOnly(this.lessonType)) {
       items = (_b = this.fields) === null || _b === void 0 ? void 0 : _b.map((field, i) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         return ({
           name: `${overlays.translate('QUESTION')} ${i + 1}`,
           description: overlays.translateMulti(field.sentence || field.description || field.title),
@@ -232,11 +232,12 @@ const YooLessonQuestionResultComponent = class {
               ? ((_d = this.lessonData[field.name]) === null || _d === void 0 ? void 0 : _d.earnedConfidencePoints) + ((_e = this.lessonData[field.name]) === null || _e === void 0 ? void 0 : _e.earnedQuestionPoints)
               : ((_f = this.lessonData[field.name]) === null || _f === void 0 ? void 0 : _f.fieldValidity)
                 ? Math.round(this.points)
-                : 0
+                : 0,
+          isCorrect: (_g = this.lessonData[field.name]) === null || _g === void 0 ? void 0 : _g.fieldValidity
         });
       });
     }
-    return index.h("yoo-points-recap", { heading: overlays.translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints), items: items, showItemIcon: showItemIcon });
+    return index.h("yoo-points-recap", { heading: overlays.translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints), items: items, showItemIcon: showItemIcon, forceTotalPoints: true });
   }
   renderProgressBarLessonRecap() {
     var _a;

package/dist/cjs/yoo-lottie.cjs.entry.js

@@ -5230,7 +5230,7 @@ var lottie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
   lottie.useWebWorker = setWebWorker;
   lottie.setIDPrefix = setPrefix;
   lottie.__getFactory = getFactory;
-  lottie.version = '5.9.4';
+  lottie.version = '5.9.5';
 
   function checkReady() {
     if (document.readyState === 'complete') {
@@ -15241,10 +15241,35 @@ var lottie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
         this.calculateShapeBoundingBox(itemsData[i], boundingBox);
       } else if (itemsData[i] && itemsData[i].it) {
         this.calculateBoundingBox(itemsData[i].it, boundingBox);
+      } else if (itemsData[i] && itemsData[i].style && itemsData[i].w) {
+        this.expandStrokeBoundingBox(itemsData[i].w, boundingBox);
       }
     }
   };
 
+  HShapeElement.prototype.expandStrokeBoundingBox = function (widthProperty, boundingBox) {
+    var width = 0;
+
+    if (widthProperty.keyframes) {
+      for (var i = 0; i < widthProperty.keyframes.length; i += 1) {
+        var kfw = widthProperty.keyframes[i].s;
+
+        if (kfw > width) {
+          width = kfw;
+        }
+      }
+
+      width *= widthProperty.mult;
+    } else {
+      width = widthProperty.v * widthProperty.mult;
+    }
+
+    boundingBox.x -= width;
+    boundingBox.xMax += width;
+    boundingBox.y -= width;
+    boundingBox.yMax += width;
+  };
+
   HShapeElement.prototype.currentBoxContains = function (box) {
     return this.currentBBox.x <= box.x && this.currentBBox.y <= box.y && this.currentBBox.width + this.currentBBox.x >= box.x + box.width && this.currentBBox.height + this.currentBBox.y >= box.y + box.height;
   };
@@ -18421,11 +18446,12 @@ var lottie = _commonjsHelpers.createCommonjsModule(function (module, exports) {
   };
 
   function SVGDropShadowEffect(filter, filterManager, elem, id, source) {
-    var filterSize = filterManager.container.globalData.renderConfig.filterSize;
-    filter.setAttribute('x', filterSize.x);
-    filter.setAttribute('y', filterSize.y);
-    filter.setAttribute('width', filterSize.width);
-    filter.setAttribute('height', filterSize.height);
+    var globalFilterSize = filterManager.container.globalData.renderConfig.filterSize;
+    var filterSize = filterManager.data.fs || globalFilterSize;
+    filter.setAttribute('x', filterSize.x || globalFilterSize.x);
+    filter.setAttribute('y', filterSize.y || globalFilterSize.y);
+    filter.setAttribute('width', filterSize.width || globalFilterSize.width);
+    filter.setAttribute('height', filterSize.height || globalFilterSize.height);
     this.filterManager = filterManager;
     var feGaussianBlur = createNS('feGaussianBlur');
     feGaussianBlur.setAttribute('in', 'SourceAlpha');

package/dist/cjs/yoo-points-recap.cjs.entry.js

@@ -10,6 +10,7 @@ const YooPointsRecap = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showItemIcon = true;
+    this.forceTotalPoints = false;
   }
   onItemsUpdated() {
     this.updatePoints();
@@ -35,8 +36,8 @@ const YooPointsRecap = class {
       return 'success';
     }
   }
-  getItemIconAttr(points) {
-    if (points <= 0) {
+  getItemIconAttr(isCorrect) {
+    if (!isCorrect) {
       return { name: 'close', color: 'danger' };
     }
     else {
@@ -46,7 +47,7 @@ const YooPointsRecap = class {
   renderTitle(title) {
     var _a, _b;
     const titleClass = `item ${((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.heading ? 'heading' : this.footer && 'footer' : 'content'}`;
-    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length)) ? this.totalPoints : this.totalItemsPoints;
+    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) || this.forceTotalPoints) ? this.totalPoints : this.totalItemsPoints;
     const tagColor = this.getTagColor(points);
     return (index.h("div", { class: "row" }, this.footer && this.renderSeparator(), index.h("div", { class: titleClass }, index.h("div", null, index.h("b", null, title)), index.h("div", null, index.h("yoo-tag", { size: "medium", color: `${tagColor}-10` }, index.h("yoo-icon", { slot: "start", name: "star", size: "small", color: tagColor }), index.h("div", null, points)))), this.heading && this.renderSeparator()));
   }
@@ -57,7 +58,7 @@ const YooPointsRecap = class {
   renderItem(item, index$1) {
     var _a;
     const tagColor = this.getTagColor(item.points);
-    const itemIcon = this.getItemIconAttr(item.points);
+    const itemIcon = this.getItemIconAttr(item.isCorrect);
     return (index.h("div", { class: "row" }, index.h("div", { class: "item content" }, index.h("div", { class: "sub-item" }, this.showItemIcon && index.h("yoo-icon", { slot: "start", name: itemIcon.name, size: "medium", color: itemIcon.color }), item.subItem ? this.renderSubItem(item) :
       index.h("yoo-tooltip", { placement: "top", content: item.description }, index.h("div", { class: "name" }, item.name))), index.h("div", null, index.h("yoo-tag", { size: "medium", color: `${tagColor}-10` }, index.h("yoo-icon", { slot: "start", name: "star", size: "small", color: tagColor }), index.h("div", null, item.points)))), (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) - 1) !== index$1 && index.h("div", { class: "separator" })));
   }

package/dist/collection/components/2.molecules/points-recap/points-recap.js

@@ -2,6 +2,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 export class YooPointsRecap {
   constructor() {
     this.showItemIcon = true;
+    this.forceTotalPoints = false;
   }
   onItemsUpdated() {
     this.updatePoints();
@@ -27,8 +28,8 @@ export class YooPointsRecap {
       return 'success';
     }
   }
-  getItemIconAttr(points) {
-    if (points <= 0) {
+  getItemIconAttr(isCorrect) {
+    if (!isCorrect) {
       return { name: 'close', color: 'danger' };
     }
     else {
@@ -38,7 +39,7 @@ export class YooPointsRecap {
   renderTitle(title) {
     var _a, _b;
     const titleClass = `item ${((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.heading ? 'heading' : this.footer && 'footer' : 'content'}`;
-    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length)) ? this.totalPoints : this.totalItemsPoints;
+    const points = (this.footer || !((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) || this.forceTotalPoints) ? this.totalPoints : this.totalItemsPoints;
     const tagColor = this.getTagColor(points);
     return (h("div", { class: "row" },
       this.footer && this.renderSeparator(),
@@ -58,7 +59,7 @@ export class YooPointsRecap {
   renderItem(item, index) {
     var _a;
     const tagColor = this.getTagColor(item.points);
-    const itemIcon = this.getItemIconAttr(item.points);
+    const itemIcon = this.getItemIconAttr(item.isCorrect);
     return (h("div", { class: "row" },
       h("div", { class: "item content" },
         h("div", { class: "sub-item" },
@@ -182,6 +183,24 @@ export class YooPointsRecap {
       "attribute": "show-item-icon",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "forceTotalPoints": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "force-total-points",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/2.molecules/slides/slides.js

@@ -101,8 +101,14 @@ export class YooIonSlidesComponent {
    * Transition to the specified slide.
    */
   async slideTo(index, speed, runCallbacks) {
+    var _a;
     const swiper = await this.getSwiper();
-    swiper.slideTo(index, speed, runCallbacks);
+    if (index >= ((_a = swiper.slides) === null || _a === void 0 ? void 0 : _a.length)) {
+      swiper.once('slidesLengthChange', () => swiper.slideTo(index, speed, runCallbacks));
+    }
+    else {
+      swiper.slideTo(index, speed, runCallbacks);
+    }
   }
   /**
    * Transition to the next slide.

package/dist/collection/components/form/form-choice/button/form-choice-button.css

@@ -217,7 +217,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   width: var(--spacing-80, 5rem);
   height: var(--spacing-80, 5rem);
-  overflow: hidden;
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host([readonly]) .image-container .content::before {

package/dist/collection/components/form/form-choice/card/form-choice-card.css

@@ -217,7 +217,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   width: var(--spacing-80, 5rem);
   height: var(--spacing-80, 5rem);
-  overflow: hidden;
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host([readonly]) .image-container .content::before {

package/dist/collection/components/form/form-choice/chat/form-choice-chat.css

@@ -217,7 +217,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   width: var(--spacing-80, 5rem);
   height: var(--spacing-80, 5rem);
-  overflow: hidden;
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host([readonly]) .image-container .content::before {

package/dist/collection/components/form/form-choice/image/form-choice-image.css

@@ -217,7 +217,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   width: var(--spacing-80, 5rem);
   height: var(--spacing-80, 5rem);
-  overflow: hidden;
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host([readonly]) .image-container .content::before {

package/dist/collection/components/form/form-choice/radio/form-choice-radio.css

@@ -217,7 +217,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   width: var(--spacing-80, 5rem);
   height: var(--spacing-80, 5rem);
-  overflow: hidden;
   border-radius: var(--border-radius-08, 0.5rem);
 }
 :host([readonly]) .image-container .content::before {

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -531,6 +531,7 @@ export class YooFormDynamicComponent {
     lockSwipes(this.ionSlides, false);
     if (!this.slidesState || (this.slidesState[index] && !this.getSlideState(index).locked) || (this.isLivePreview() && this.slides[index])) {
       if (this.ionSlides) {
+        forceUpdate(this);
         await this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
       }
       else if (this.isWeb) {
@@ -3154,6 +3155,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           min: field.min,
           max: field.max,
+          allowDecimals: field.allowDecimals,
           maxCharacters: field.maxCharacters,
           type: field.type === FormFieldType.number && isSamsung() ? FormFieldType.text : getInputType(field),
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -300,7 +300,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: block;
   height: 100%;
-  overflow: hidden;
 }
 :host yoo-banner {
   height: 0;
@@ -310,13 +309,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: opacity 1s ease-in-out;
 }
 :host #instructions #header {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--dark, #000000);
-  border-radius: var(--border-radius-04, 0.25rem);
+  display: flex;
+  flex-direction: column;
 }
-:host #instructions #header h1 {
-  margin: 0;
-  color: var(--light, #ffffff);
+:host #instructions #header #title {
+  font-weight: bold;
 }
 :host #instructions #categories {
   display: inline-grid;
@@ -325,9 +322,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
 }
-:host #instructions #categories yoo-icon {
-  margin: 0 auto;
-}
 :host #instructions #categories .category {
   display: flex;
   flex-direction: column;
@@ -339,12 +333,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 75%;
   margin: auto;
   padding: var(--spacing-16, 1rem) 0;
+  font-weight: bold;
 }
 :host #instructions #categories .category yoo-tag {
   margin: 0 auto;
 }
 :host #instructions yoo-button {
-  padding: var(--spacing-16, 1rem);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
 }
 :host #instructions #document {
   background-color: var(--light, #ffffff);
@@ -382,7 +381,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host [direction].card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
 }
 :host [direction=left]#game, :host [direction=left].current > .content-category {
   background-color: var(--app-color, #5a30f4) !important;
@@ -440,23 +439,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 85%;
   content: "";
 }
-:host #stack {
+:host #cards {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   width: 65%;
-  max-width: 25rem;
+  max-width: 16rem;
   height: 100%;
   margin-top: var(--spacing-16, 1rem);
 }
-:host #stack.rtl {
+:host #cards.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host #stack .card {
+:host #cards .card {
   position: absolute;
   top: 0;
   right: 0;
@@ -475,20 +474,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
+  will-change: transform, opacity;
 }
-:host #stack .card:not([direction]) {
+:host #cards .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host #stack .card.current {
+:host #cards .card.current {
   z-index: 3;
 }
-:host #stack .card.current:not(.revealing) {
+:host #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
   transition-delay: 200ms;
 }
-:host #stack .card.current.revealing {
+:host #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -499,15 +499,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.second {
+:host #cards .card.second {
   z-index: 2;
 }
-:host #stack .card.second:not(.revealing) {
+:host #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
   transition-delay: 400ms;
 }
-:host #stack .card.second.revealing {
+:host #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -518,15 +518,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.third {
+:host #cards .card.third {
   z-index: 1;
 }
-:host #stack .card.third:not(.revealing) {
+:host #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
   transition-delay: 600ms;
 }
-:host #stack .card.third.revealing {
+:host #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -534,60 +534,54 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 @keyframes third {
   to {
     transform: translate(0%, -2%) scale(0.9);
-    opacity: 0.7;
+    opacity: 1;
   }
 }
-:host #stack .card:after {
-  display: block;
-  height: 0;
-  padding-top: 133%;
-  content: "";
-}
-:host #stack .card.current .content-image,
-:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
-:host #stack .card[direction] .content-text {
+:host #cards .card.current .content-image,
+:host #cards .card.current .content-text, :host #cards .card[direction] .content-image,
+:host #cards .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host #stack .card[swiped] {
+:host #cards .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host #stack .card[swiped=left] {
+:host #cards .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host #stack .card[swiped=right] {
+:host #cards .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host #stack .card .content-category,
-:host #stack .card .content-image,
-:host #stack .card .content-text {
+:host #cards .card [class^=content] {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
   opacity: 0;
 }
-:host #stack .card .content-category,
-:host #stack .card .content-text {
+:host #cards .card .content-category,
+:host #cards .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
 }
-:host #stack .card .content-image {
+:host #cards .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host #stack .card[type=image] yoo-img {
+:host #cards .card[type=image] yoo-img {
   height: 100%;
 }
-:host #stack .card[type=textimage] .content-image {
+:host #cards .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host #stack .card[type=textimage] .content-image yoo-img {
+:host #cards .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host #stack .card[type=textimage] .content-text,
-:host #stack .card[type=textimage] .content-category {
+:host #cards .card[type=textimage] .content-text,
+:host #cards .card[type=textimage] .content-category {
   bottom: 0;
   height: 3.5rem;
 }
@@ -726,6 +720,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
+:host([live-preview]),
+:host(.mobile) {
+  min-height: 70vh;
+}
+:host([live-preview]) #instructions #header,
+:host(.mobile) #instructions #header {
+  padding: var(--spacing-16, 1rem);
+  background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host([live-preview]) #instructions #header #title,
+:host(.mobile) #instructions #header #title {
+  color: var(--light, #ffffff);
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
 :host([live-preview]) #instructions yoo-button,
 :host(.mobile) #instructions yoo-button {
   position: absolute;
@@ -733,20 +743,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: stretch;
 }
 
-:host(.web:not([live-preview])) #instructions #header {
-  background: unset;
+:host(.web:not([live-preview])) #instructions {
+  position: relative;
+}
+:host(.web:not([live-preview])) #instructions yoo-icon[name=swipe-explanation] {
+  width: 5rem;
+  height: 5rem;
+  margin: auto;
+  --inner-width: 5rem;
+  --inner-height: 5rem;
 }
 :host(.web:not([live-preview])) #instructions yoo-button {
   position: fixed;
-  right: var(--spacing-16, 1rem);
+  right: var(--spacing-32, 2rem);
   bottom: var(--spacing-16, 1rem);
   z-index: 1;
   transform: translateY(-50%);
 }
 :host(.web:not([live-preview])) #game {
+  height: 60%;
   max-height: 21rem;
 }
-:host(.web:not([live-preview])) #game #stack {
+:host(.web:not([live-preview])) #game #cards {
   top: 5%;
   margin-top: unset;
   transform: translate(-50%, 0);
@@ -761,11 +779,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-self: end;
 }
 :host(.web:not([live-preview])) #header {
-  margin-bottom: var(--spacing-24, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   line-height: 1.75;
   text-align: center;
+  background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.web:not([live-preview])) #header h1 {
-  margin: var(--spacing-08, 0.5rem) 0 !important;
+:host(.web:not([live-preview])) #header #title {
   color: var(--dark, #000000) !important;
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
 }