lido-player 0.0.2-beta-24 → 0.0.2-beta-26-dev

package/dist/cjs/lido-avatar_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DBCFoh1I.js');
-var index$1 = require('./index-DjM03fsg.js');
+var index = require('./index-DnaH8sO-.js');
+var index$1 = require('./index-Cf9LHdIw.js');
 
 var rive$1 = {exports: {}};
 
@@ -8167,7 +8167,7 @@ const LidoAvatar = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.Host, { key: '0e63e186eeccefd216831d41dc691fa89225f30d', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, index.h("canvas", { key: '7e902dc84a2ae1f92b077053bdb6c935332d40e3', class: "lido-canvas" })));
+        return (index.h(index.Host, { key: 'ee5d3168685321a1af3dd11ef63ff41aec102416', id: this.id, type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, src: this.src }, index.h("canvas", { key: '61edcf1e26ee3c6beaa35852b493b11d697aad9b', class: "lido-canvas" })));
     }
     static get assetsDirs() { return ["."]; }
     get el() { return index.getElement(this); }
@@ -8409,7 +8409,7 @@ const LidoBalance = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'e0e67ca26ec3906d9f085686dcb7c12f5022c35c', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString(), "pivot-image": this.pivotSvg, "scale-image": this.scaleSvg, "handler-image": this.handlerSvg }, index.h("div", { key: 'e69bada9ab75d0d73dbf2b999b52e149125d213b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), index.h("div", { key: '2b0cc721fe9e90c4343e9401ce6b2c5a6c689d2e', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), index.h("div", { key: 'd2acc209d2fb3e74c148b8464895bec91f9e32ad', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), index.h("div", { key: 'e5c1c7f4143e97c30b0866dde1919667b3ec4a61', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), index.h("div", { key: '425602ff5dcbd12479651c7ed3f9585dcc1fcf06', class: "balance-plate-feedback left", ref: (el) => (this.leftFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), index.h("div", { key: '2bb09b99cc5ed98773c65465a1c6f28c89e97800', class: "balance-plate-feedback right", ref: (el) => (this.rightFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), index.h("div", { key: 'cc31758d61122a9e7ecca387d4e62fcab55516a4', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (index.h(index.Host, { key: 'b455b2b5d330a2125f7fb8b4e2165d2e6e6bc1a0', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString(), "pivot-image": this.pivotSvg, "scale-image": this.scaleSvg, "handler-image": this.handlerSvg }, index.h("div", { key: '657f471d397dd7e3476d5b6e35ee4495c8f2db4c', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), index.h("div", { key: '7b91e1919db1fdbcddf79f43a9ad51695b7c806f', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), index.h("div", { key: '137a1440d55776d0771d8cd71741202c224896db', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), index.h("div", { key: 'd6e0deae63a4e219757240e585d582fb5a72a071', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), index.h("div", { key: 'ef51f98937cf10c017c8289359c92c24e7316a16', class: "balance-plate-feedback left", ref: (el) => (this.leftFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), index.h("div", { key: 'f21aade8543977b657a4d2fbcd623cf8769459a0', class: "balance-plate-feedback right", ref: (el) => (this.rightFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), index.h("div", { key: '0470afcef443dbeb69a7d651220d5ff50be3836e', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -8602,7 +8602,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (index.h(index.Host, { key: 'ae833326069dd4cf9588701995962b0d1b3b0091', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '135b08be24862393217a0a93d4afd3ec8647547c', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'e6fb20b06bef347d68e427748669bb176c30b7a3', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '2b6077ffad1046fdedb816402fdcb906539afa5c', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '96dfabdab176f66e16d6b03efb2e8ecad74c9d45', class: "lido-calculator-displayParent" }, index.h("div", { key: '9c711dd53ada73ca9ddac1c37b0719c5c746a591', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '5d595bf410fc1a75fa57c485fd08a8e97064016a', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (index.h(index.Host, { key: 'e8249dda090212d327b68b47d42a123de6a890c9', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '54d093a3dd6a6e5850c881d224290bd6cf9c3690', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: '7145c80b2477493a8a87f6d098164293732861bf', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "204%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '7242feedd5172b555df683c747bbef778a9cdcd7', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '6145a4f89da352c3576e6d51a1e260e335778fbb', class: "lido-calculator-displayParent" }, index.h("div", { key: '04e07b724d912d43b08c7a1e15c605d0fd30c7be', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: '19839d02863ca1e27fddb4093f191171e237f143', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -8716,7 +8716,7 @@ const LidoCanvas = class {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (index.h(index.Host, { key: 'ca88c99317fe079d25b16410d78cbd63e13d712c', id: "lido-canvas", class: "lido-canvas", style: this.style }, index.h("button", { key: '3e1085ff4be21ca281483367a41b51ba4ff49736', id: "lido-exit-button", onClick: () => this.clearCanvas() }), index.h("canvas", { key: '9c1f485a2a84b2da9468e8b83f1962cce7852efc', id: "lido-canvas" })));
+        return (index.h(index.Host, { key: '6bb47f06656ce667d23236e9f3c3a8f383885a43', id: "lido-canvas", class: "lido-canvas", style: this.style }, index.h("button", { key: 'fd0d1217bda63071fbf6496c2538c2a944b14181', id: "lido-exit-button", onClick: () => this.clearCanvas() }), index.h("canvas", { key: 'ed0333972bb7ce0fc4e14c81bb466ea895ce65e0', id: "lido-canvas" })));
     }
     get el() { return index.getElement(this); }
 };
@@ -8975,7 +8975,7 @@ const LidoCell = class {
         this.el.className = `lido-${index$1.parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '53d510e92a72d1f855e6d0cb0c0564c2f4351b64', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, index.h("slot", { key: '1af7a1f78e12bb1babcd91266eaf209b9d7530dc' })));
+        return (index.h(index.Host, { key: '73bdf9dd33fdd8322c35465de011697da112193a', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, index.h("slot", { key: '6e9d4507b36716f04853d39ef66015441782aa88' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -9053,7 +9053,7 @@ const LidoCol = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b2ecb19a78feed7275d9e996255db4144d5e0153', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
+        return (index.h(index.Host, { key: '334206d6054442fec787cfb479a68ae164404730', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -11776,6 +11776,22 @@ const instruction$4 = {
 	palegramcqimages: "palegramcqimagesEngAudio"
 };
 var en = {
+	" balloon": "Balloon",
+	" box": "Box",
+	" egg": "Egg",
+	" flower": "Flower",
+	" heart": "Heart",
+	" house": "House",
+	" lamp": "Lamp",
+	" moon": "Moon",
+	" rectangle": "Rectangle",
+	" star": "Star",
+	" watermelon": "Watermelon",
+	" trophy": "Trophy",
+	" dog": "Dog",
+	" fish": "Fish",
+	" bird": "Bird",
+	" arrow": "Arrow",
 	"Do you want to exit? button": "Do you want to exit?",
 	"Exit button": "Exit",
 	"Continue playing button": "Continue playing",
@@ -11833,6 +11849,22 @@ const instruction$2 = {
 	palegramcqimages: "palegramcqimagesHiAudio"
 };
 var hi = {
+	" balloon": "गुब्बारा",
+	" box": "डिब्बा",
+	" egg": "अंडा",
+	" flower": "फूल",
+	" heart": "दिल",
+	" house": "घर",
+	" lamp": "दीपक",
+	" moon": "चंद्रमा",
+	" rectangle": "आयत",
+	" star": "तारा",
+	" watermelon": "तरबूज",
+	" trophy": "ट्रॉफी",
+	" dog": "कुत्ता",
+	" fish": "मछली",
+	" bird": "चिड़िया",
+	" arrow": "तीर",
 	"Do you want to exit? button": "क्या आप बाहर निकलना चाहते हैं?",
 	"Exit button": "बाहर निकलें",
 	"Continue playing button": "खेलना जारी रखें",
@@ -11875,6 +11907,22 @@ const instruction$1 = {
 	palegramcqimages: "palegramcqimagesKaAudio"
 };
 var kn = {
+	" balloon": "ಪುಗ್ಗ",
+	" box": "ಡಬ್ಬ",
+	" egg": "ಮೊಟ್ಟೆ",
+	" flower": "ಹೂವು",
+	" heart": "ಹೃದಯ",
+	" house": "ಮನೆ",
+	" lamp": "ದೀಪ",
+	" moon": "ಚಂದ್ರ",
+	" rectangle": "ಆಯತ",
+	" star": "ನಕ್ಷತ್ರ",
+	" watermelon": "ಕಲ್ಲಂಗಡಿ",
+	" trophy": "ಟ್ರೋಫಿ",
+	" dog": "ನಾಯಿ",
+	" fish": "ಮೀನು",
+	" bird": "ಹಕ್ಕಿ",
+	" arrow": "ಬಾಣ",
 	"Do you want to exit? button": "ನೀವು ನಿರ್ಗಮಿಸಲು ಬಯಸುವಿರಾ?",
 	"Exit button": "ನಿರ್ಗಮಿಸು",
 	"Continue playing button": "ಆಟವನ್ನು ಮುಂದುವರಿಸಿ",
@@ -11936,7 +11984,7 @@ instance
     },
 });
 
-const lidoContainerCss = () => `.lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}`;
+const lidoContainerCss = () => `.lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}lido-container[template-id="writeCard"] #arrow{box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f;animation:flash-card-next-attention 1.4s ease-in-out infinite}lido-container[template-id="writeCard"] #arrow.fading{opacity:1 !important}@keyframes flash-card-next-attention{0%,100%{border-color:#ffc34d;filter:drop-shadow(0 0 0 rgba(255, 195, 77, 0))}50%{border-color:#fff1a8;filter:drop-shadow(0 0 10px rgba(255, 195, 77, 0.95))}}`;
 
 const LidoContainer = class {
     constructor(hostRef) {
@@ -12096,6 +12144,33 @@ const LidoContainer = class {
         this.speakFlag = false;
         this.handleWindowResize = () => this.scaleContainer(this.el);
         this.handleWindowLoad = () => this.scaleContainer(this.el);
+        this.shouldInitializePlayModeDragDrop = false;
+        this.isWriteCardContainer = () => this.templateId === 'writeCard';
+        this.syncWriteCardArrowHighlight = () => {
+            if (!this.isWriteCardContainer())
+                return;
+            const arrow = this.el.querySelector('#arrow');
+            if (!arrow)
+                return;
+            const style = window.getComputedStyle(arrow);
+            const hidden = style.display === 'none' ||
+                style.visibility === 'hidden' ||
+                style.opacity === '0';
+            arrow.classList.toggle('flash-card-next-glowing', !hidden);
+        };
+        this.observeWriteCardArrow = () => {
+            var _a;
+            if (!this.isWriteCardContainer())
+                return;
+            (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.writeCardArrowObserver = new MutationObserver(() => this.syncWriteCardArrowHighlight());
+            this.writeCardArrowObserver.observe(this.el, {
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class', 'style', 'visible'],
+            });
+            this.syncWriteCardArrowHighlight();
+        };
     }
     cleanupInteractionHandlers() {
         this.el.querySelectorAll('[type="drag"], [type="slide"], [move="true"]').forEach(element => {
@@ -12106,6 +12181,17 @@ const LidoContainer = class {
         const langToApply = newLang || this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
     }
+    canplayChanged(newValue, oldValue) {
+        if (this.templateId !== 'foodJar' || !newValue || oldValue !== false)
+            return;
+        this.shouldInitializePlayModeDragDrop = true;
+    }
+    componentDidRender() {
+        if (!this.shouldInitializePlayModeDragDrop || !this.canplay)
+            return;
+        this.shouldInitializePlayModeDragDrop = false;
+        void index$1.initializePlayModeDragDropElements(this.el);
+    }
     componentWillLoad() {
         const langToApply = this.resolveLanguage();
         this.updateChildTextLanguage(langToApply);
@@ -12341,10 +12427,12 @@ const LidoContainer = class {
             setTimeout(() => {
                 this.el.setAttribute("onEntry", `${this.templateId}.speak='${!this.speakFlag}'; ` + this.el.getAttribute("onEntry"));
                 index$1.initEventsForElement(this.el, this.type);
+                this.observeWriteCardArrow();
             }, 100);
         }
         else {
             index$1.initEventsForElement(this.el, this.type);
+            this.observeWriteCardArrow();
         }
         if (this.customStyle) {
             const styleElement = document.createElement('style');
@@ -12360,9 +12448,12 @@ const LidoContainer = class {
         index$1.Timer.getI().start();
     }
     disconnectedCallback() {
+        var _a;
         this.cleanupInteractionHandlers();
         window.removeEventListener('resize', this.handleWindowResize);
         window.removeEventListener('load', this.handleWindowLoad);
+        (_a = this.writeCardArrowObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.writeCardArrowObserver = undefined;
         document.body.style.backgroundColor = '';
         document.body.style.backgroundImage = '';
         index$1.resetFloatState();
@@ -12379,12 +12470,15 @@ const LidoContainer = class {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (index.h(index.Host, { key: '9dd374c6cdfcc88a5b18e7dc7fec527c853a4719', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '8295782a74ce6ef8ca9a623de8a28b539d9f6d4f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'eb3c995b777986e07dcb6aa935ef38d41aa1e7e7' })));
+        return (index.h(index.Host, { key: '1ec8ce95f69ad27bc534b5cb5b3ccc19e8e1880d', id: "lido-container", Lang: this.Lang, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": `${this.disableSpeak}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, index.h("lido-text", { key: '4124095c478efa28590e9dc40a7e87831bf719fb', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'c078309c288e41c03828c3768d6033d2fae981cd' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "Lang": [{
                 "languageChanged": 0
+            }],
+        "canplay": [{
+                "canplayChanged": 0
             }]
     }; }
 };
@@ -12475,6 +12569,7 @@ const LidoFlash = class {
         this.narrationHandled = false;
         this.instructionDone = false;
         this.instructionStarted = false;
+        this.shouldPlayTemplateInstruction = true;
         this.onAudioStarted = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
@@ -12500,7 +12595,7 @@ const LidoFlash = class {
             arrow.classList.add('flash-card-next-glowing');
         };
         this.onAudioEnded = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
             const instruction = this.instructionText();
             if (!target || (target !== instruction && target.id !== 'lido-avatar' && !this.el.contains(target)))
@@ -12537,7 +12632,6 @@ const LidoFlash = class {
                 if (playbackContext !== this.goodJobPlaybackContext || playbackId !== this.goodJobPlaybackId)
                     return;
                 this.goodJobPlaybackId = undefined;
-                (_d = this.nextArrow()) === null || _d === void 0 ? void 0 : _d.classList.remove('flash-card-next-glowing');
                 index$1.executeActions("this.avatarAnimate='Idle'", target);
             }
         };
@@ -12608,11 +12702,19 @@ const LidoFlash = class {
             (_a = this.nextArrow()) === null || _a === void 0 ? void 0 : _a.classList.remove('flash-card-next-glowing');
         };
         this.speakFront = () => {
-            var _a;
+            var _a, _b;
             const text = this.frontText();
             if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
                 this.startNarration(text);
             }
+            else if (this.instructionDone && !this.flipped && (!text || !((_b = text.textContent) === null || _b === void 0 ? void 0 : _b.trim()))) {
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
+            }
         };
         this.clearNarrationTimers = () => {
             if (this.narrationGraceTimer)
@@ -12673,16 +12775,20 @@ const LidoFlash = class {
             if (!arrow.getAttribute('onTouch'))
                 arrow.setAttribute('onTouch', "this.nextBtn='true';");
             const mascot = container.querySelector('#lido-avatar');
-            const scaffoldAudio = arrow.getAttribute('audio');
-            if (mascot && scaffoldAudio) {
+            const originalAudio = (mascot === null || mascot === void 0 ? void 0 : mascot.getAttribute('audio')) || undefined;
+            const scaffoldAudio = index$1.getGoodJobAudio(arrow) || originalAudio;
+            const shouldPlayGoodJob = index$1.shouldPlayGoodJobAudio(arrow);
+            if (mascot && scaffoldAudio && shouldPlayGoodJob) {
                 mascot.setAttribute('audio', scaffoldAudio);
             }
             this.setArrowVisible(true);
-            if (mascot) {
+            // Keep the next action highlighted after mascot audio ends.
+            arrow.classList.add('flash-card-next-glowing');
+            if (mascot && shouldPlayGoodJob) {
                 this.goodJobPlaybackContext = {};
                 this.goodJobPlaybackId = undefined;
                 index$1.executeActions("this.avatarAnimate='Idle speak'", mascot);
-                index$1.AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext);
+                index$1.AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
             }
         };
         this.setArrowVisible = (visible) => {
@@ -12723,7 +12829,7 @@ const LidoFlash = class {
         window.addEventListener('load', this.updateStyles);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         index$1.setVisibilityWithDelay(this.el, this.delayVisible);
         index$1.initEventsForElement(this.el, this.type);
         window.addEventListener('lidoAudioStarted', this.onAudioStarted);
@@ -12731,9 +12837,17 @@ const LidoFlash = class {
         window.addEventListener('lidoAudioEnded', this.onAudioEnded);
         const container = this.el.closest('lido-container');
         if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'flashcardtemplate') {
-            (_a = container.querySelector('#lido-avatar')) === null || _a === void 0 ? void 0 : _a.setAttribute('disable-speak', 'true');
+            const home = container.closest('lido-home');
+            const playedTemplates = ((_a = home === null || home === void 0 ? void 0 : home.getAttribute(index$1.TemplateID)) === null || _a === void 0 ? void 0 : _a.split(',').map(value => value.trim()).filter(Boolean)) || [];
+            this.shouldPlayTemplateInstruction = !playedTemplates.includes('flashcardtemplate');
+            (_b = container.querySelector('#lido-avatar')) === null || _b === void 0 ? void 0 : _b.setAttribute('disable-speak', 'true');
             this.instructionStartTimer = window.setTimeout(() => {
                 if (!this.instructionStarted && !this.instructionDone) {
+                    if (!this.shouldPlayTemplateInstruction) {
+                        this.instructionDone = true;
+                        this.speakFront();
+                        return;
+                    }
                     const instruction = this.instructionText();
                     if (instruction)
                         this.startNarration(instruction);
@@ -12756,14 +12870,37 @@ const LidoFlash = class {
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
+    async replayGoodJobAudio() {
+        const container = this.el.closest('lido-container');
+        if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) !== 'flashcardtemplate')
+            return;
+        const arrow = this.nextArrow();
+        const mascot = container.querySelector('#lido-avatar');
+        if (!arrow || !mascot)
+            return;
+        const arrowVisible = arrow.getAttribute('visible') === 'true'
+            || arrow.style.visibility === 'visible';
+        if (!arrowVisible)
+            return;
+        const originalAudio = mascot.getAttribute('audio') || undefined;
+        const localizedAudio = index$1.getGoodJobAudio(arrow);
+        const replayAudio = localizedAudio || originalAudio;
+        if (!replayAudio)
+            return;
+        mascot.setAttribute('audio', replayAudio);
+        this.goodJobPlaybackContext = {};
+        this.goodJobPlaybackId = undefined;
+        index$1.executeActions("this.avatarAnimate='Idle speak'", mascot);
+        await index$1.AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
+    }
     /* ---------- Render ---------- */
     render() {
-        return (index.h(index.Host, { key: '9098ad4c1f41ac70e6737438209f2f3027153b3b', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
+        return (index.h(index.Host, { key: 'b6012ba4855d142b6fdbad9dcfd7251bfcbb932b', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
                 var _a, _b;
                 if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '#lido-avatar'))
                     return;
                 this.handleFlip();
-            }, "disable-speak": this.disableSpeak }, index.h("div", { key: 'b235e008f35e29db21991d76bd83fccac471ba75', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: '7b2306efdc5a4dac6edfe5004ae34ef486b73dd5', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '3d164fa2faa72b7ffcbaf20482bfea2148aeaaf4', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
+            }, "disable-speak": this.disableSpeak }, index.h("div", { key: 'fecb100c8ac0f227d8bd685d02f8314e9018fe02', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: 'e89512323ad8eb884548a1dead734f635c096c8f', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '82820aaf5b5febcf8247f96faca59976b8fade8e', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -12861,7 +12998,7 @@ const LidoFloat = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, index.h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (index.h(index.Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, index.h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -12899,9 +13036,9 @@ function requireJszip_min () {
 var jszip_minExports = requireJszip_min();
 var JSZip = /*@__PURE__*/index$1.getDefaultExportFromCjs(jszip_minExports);
 
-const indexCss = () => `@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(     180deg,     rgba(255, 235, 59, 0.95),     rgba(255, 214, 0, 0.95)   );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),     inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,     height 25ms ease-out,     opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}`;
+const indexCss = () => `@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(      180deg,      rgba(255, 235, 59, 0.95),      rgba(255, 214, 0, 0.95)    );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),      inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,      height 25ms ease-out,      opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}`;
 
-const animationCss = () => `@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes placeToRight{from{}to{transform:translateX(2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow)             drop-shadow(0 0 10px yellow)             drop-shadow(0 0 20px yellow)             drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)             drop-shadow(0 0 20px yellow)             drop-shadow(0 0 40px yellow)             drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)             drop-shadow(0 0 10px yellow)             drop-shadow(0 0 20px yellow)             drop-shadow(0 0 30px orange)}}@keyframes trace-animation{0%{}100%{width:var(--trace-width, 100px);height:var(--trace-height, 100px)}}`;
+const animationCss = () => `@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes placeToRight{from{}to{transform:translateX(2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow)              drop-shadow(0 0 10px yellow)              drop-shadow(0 0 20px yellow)              drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)              drop-shadow(0 0 20px yellow)              drop-shadow(0 0 40px yellow)              drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)              drop-shadow(0 0 10px yellow)              drop-shadow(0 0 20px yellow)              drop-shadow(0 0 30px orange)}}@keyframes trace-animation{0%{}100%{width:var(--trace-width, 100px);height:var(--trace-height, 100px)}}`;
 
 const lidoHomeCss = () => `.lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active,.lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}`;
 
@@ -13104,8 +13241,8 @@ const LidoHome = class {
     }
     translateHomeText(key) {
         var _a;
-        const lang = (_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim();
-        return lang ? instance.getFixedT(lang)(key) : instance.t(key);
+        const lang = ((_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim()) || instance.language || 'en';
+        return instance.getFixedT(lang)(key);
     }
     onCommonAudioPathChange(path) {
         this.publishCommonAudioPath(path);
@@ -13115,6 +13252,7 @@ const LidoHome = class {
      * between containers and parses the XML data into containers.
      */
     async componentWillLoad() {
+        index$1.resetGoodJobAudioTracking(this.el);
         // Publish the current player's common-audio path before parsing XML so
         // child lido-text components cannot resolve auto-audio against the
         // previous player's global path.
@@ -13211,7 +13349,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BCvdWRyT.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-CE64w_Pc.js'); }).then(function (n) { return n.decode; });
             const brotliDecompressBuffer = brotliDecodeModule.BrotliDecompressBuffer || ((_a = brotliDecodeModule.default) === null || _a === void 0 ? void 0 : _a.BrotliDecompressBuffer);
             if (typeof brotliDecompressBuffer !== 'function') {
                 throw new Error('BrotliDecompressBuffer function not found in brotli/dec/decode');
@@ -13445,10 +13583,7 @@ const LidoHome = class {
         })
             .filter(Boolean);
         if (tagName === 'lido-text' && props.string) {
-            props.string = instance.t(props.string);
-        }
-        if (tagName === 'lido-text' && props.string) {
-            props.string = instance.t(props.string);
+            props.string = this.translateHomeText(props.string);
         }
         // Map XML tags to Stencil components
         const componentMapping = {
@@ -13510,7 +13645,7 @@ const LidoHome = class {
         });
     }
     async btnpopup(runId) {
-        var _a, _b;
+        var _a, _b, _c;
         const isStale = () => runId !== this.btnpopupRunId;
         const container = document.getElementById(index$1.LidoContainer);
         if (isStale())
@@ -13560,11 +13695,37 @@ const LidoHome = class {
                     break;
             }
         }
+        if (index$1.getCancelBtnPopup() || isStale())
+            return;
+        if (templateId === 'flashcardtemplate') {
+            const flashCard = this.el.querySelector('lido-flash-card');
+            await ((_a = flashCard === null || flashCard === void 0 ? void 0 : flashCard.replayGoodJobAudio) === null || _a === void 0 ? void 0 : _a.call(flashCard));
+            if (isStale())
+                return;
+        }
+        if (templateId === 'storyTale') {
+            const pageGoodJob = container.querySelector('#arrow1');
+            if (pageGoodJob) {
+                const originalAudio = pageGoodJob.getAttribute('data-lido-original-audio')
+                    || pageGoodJob.getAttribute('audio')
+                    || undefined;
+                const localizedAudio = index$1.getGoodJobAudio(pageGoodJob);
+                if (localizedAudio) {
+                    if (!pageGoodJob.hasAttribute('data-lido-original-audio') && originalAudio) {
+                        pageGoodJob.setAttribute('data-lido-original-audio', originalAudio);
+                    }
+                    pageGoodJob.setAttribute('audio', localizedAudio);
+                }
+                await index$1.AudioPlayer.getI().play(pageGoodJob, false, undefined, originalAudio);
+                if (isStale())
+                    return;
+            }
+        }
         if (isStale())
             return;
         if (this.areAllDropsFilled()) {
             const objectiveString = container['objective'];
-            const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(index$1.SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
+            const objectiveArray = (_c = JSON.parse((_b = container.getAttribute(index$1.SelectedValuesKey)) !== null && _b !== void 0 ? _b : '[]')) !== null && _c !== void 0 ? _c : [];
             const res = index$1.matchStringPattern(objectiveString, objectiveArray);
             if (res) {
                 index$1.triggerNextContainer();
@@ -16945,10 +17106,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(index$1.LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (index.h(index.Host, { key: '5773e8189c512e90d63217048f9372d00e4a7fe9', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '136fa3a2b0459a9a63e14ac8e212997e4bd32224', class: "input-area" }, index.h("input", { key: 'd9a1dc064d615b40b1e0e2b008dbf79ec70eb19b', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: 'e6c53ea590c607b355d1f57d445d078c0bcf9085', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (index.h(index.Host, { key: '4de3b75fa2905744ad610d147d9b4fe9912dd732', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '7b5d293c52747700cde9c1069cfbbdae065e64f9', class: "input-area" }, index.h("input", { key: '03a91cd87e6bb4f09bf698087258426dd9232f67', type: "text", value: this.inputString, class: "input-area", readonly: true }), index.h("lido-text", { key: 'd30e033a055df52b30b2f2775c2b3410ee37df63', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), index.h("lido-text", { key: '815877bd027aa3540871c511df5937cfb0b6f149', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '73c08eac4f9c154f47371e812fb337de26b10691', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '1e7855724f15fdb432320f6186fc356518a29224', class: "keyboard-wrapper", style: {
+            } }), index.h("lido-text", { key: '70d78aed7dedbe7d03a05c13c4c320029280bb03', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '19306cd12bd98dc8dc7b54b20bad3f2f0318116f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '826900d6ba26175eb45d2e7e4c02fccce2004db3', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -17183,7 +17344,7 @@ const LidoMathMatrix = class {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (index.h(index.Host, { key: '2ef30835855363ba9fc7932122d1d505a451e055', class: "math-matrix", style: {
+        return (index.h(index.Host, { key: '8a17727416da00fda95c401c3a005cdea1e732d0', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -17330,7 +17491,7 @@ const LidoPos = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '4c417a789cc167f7d701b8469890631f9871fe6f', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'd5026f61804b53e63aa1cc6c15b3de91543cf426' })));
+        return (index.h(index.Host, { key: 'cfd38900b31991e89c21a099fc4f91f77663ae94', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '73f7bfe2d8214693d6f40a4dab6d735906ad4eaa' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -17474,7 +17635,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (index.h(index.Host, { key: 'e0ed354e54ea3c5112d0e068b2a94356ef437874', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'ed0386cda3ba55d89fb08607775a49a4180f08b3' })));
+        return (index.h(index.Host, { key: 'a4cec45d407b57833a4296a20230717534adf39b', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'b80726b68b7f1c009f35352b9d05cd573159f87b' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -17561,7 +17722,7 @@ const LidoRoot = class {
             return index.h("div", null, "Error loading XML data. Please check the path or URL.");
         }
         // Once the XML data is loaded, pass it to the `lido-home` component
-        return (index.h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
+        return (index.h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, Lang: this.Lang, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -17645,13 +17806,13 @@ const LidoRow = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '30b1857fc65b826cfad9c08f71ea1c2f7cc966e4', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, index.h("slot", { key: '747f20051ad1fd1dd075ba457b612e9d8ef7d27d' })));
+        return (index.h(index.Host, { key: 'c69aea0b1b11d9aec167d1a4376f68073f91ca81', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, index.h("slot", { key: '8756ee0447057cddb949e23decbde5fe4d1d25c8' })));
     }
     get el() { return index.getElement(this); }
 };
 LidoRow.style = lidoRowCss();
 
-const lidoShapeCss = () => `.lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon(     20% 0%,        80% 0%,        100% 100%,     0% 100%     )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(     25% 0%,        75% 0%,        100% 50%,      75% 100%,      25% 100%,      0% 50%      )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(          15% 10%,     25% 4%,     35% 1%,     50% 0%,     65% 1%,     75% 4%,     85% 10%,           50% 100%   )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),     radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),     red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),     radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38),     inset 14px 14px 24px rgba(255, 255, 255, 0.05),     0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}`;
+const lidoShapeCss = () => `.lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z);justify-content:center;align-items:center}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-trapezium{width:var(--trapeziumWidth);height:var(--trapeziumHeight);background-color:var(--bgColor);clip-path:polygon(      20% 0%,         80% 0%,         100% 100%,      0% 100%      )}.lido-hexagon{width:var(--hexagonWidth);height:var(--hexagonHeight);background-color:var(--bgColor);clip-path:polygon(      25% 0%,         75% 0%,         100% 50%,       75% 100%,       25% 100%,       0% 50%       )}.lido-cone{width:var(--coneWidth);height:var(--coneHeight);background-color:var(--bgColor);clip-path:polygon(            15% 10%,      25% 4%,      35% 1%,      50% 0%,      65% 1%,      75% 4%,      85% 10%,              50% 100%    )}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(45deg)}.face{position:absolute;width:var(--face-width,150px);height:var(--face-width,150px);background:var(--face-bg-color,150px);box-shadow:inset -20px -20px 40px rgba(0,0,0,0.3)}.front{transform:rotateY(  0deg) translateZ(var(--face-translate, 75px))}.back{transform:rotateY(180deg) translateZ(var(--face-translate, 75px))}.right{transform:rotateY( 90deg) translateZ(var(--face-translate, 75px))}.left{transform:rotateY(-90deg) translateZ(var(--face-translate, 75px))}.top{transform:rotateX( 90deg) translateZ(var(--face-translate, 75px))}.bottom{transform:rotateX(-90deg) translateZ(var(--face-translate, 75px))}.lido-cylinder{width:var(--width);height:var(--height);border-radius:100% / 80px;background:radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),      radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),      red}.lido-sphere{position:relative;width:var(--width);height:var(--width);border-radius:50%;background:radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),      radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);box-shadow:inset -22px -26px 40px rgba(5, 0, 70, 0.38),      inset 14px 14px 24px rgba(255, 255, 255, 0.05),      0 4px 2px rgba(0, 0, 0, 0.78);overflow:visible}.lido-sphere::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:16%;border-radius:50%;border-top:2px dashed rgba(0, 0, 0, 0.65);border-bottom:3px solid rgba(0, 0, 0, 0.85);box-sizing:border-box;transform:translate(-50%, -50%);pointer-events:none}`;
 
 const LidoShape = class {
     constructor(hostRef) {
@@ -17803,8 +17964,8 @@ const LidoShape = class {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (index.h(index.Host, { key: '27ddc6d8019a8aaed121d5af47ffc6b76dbeda9c', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, this.shapeType === "lido-cube" &&
-            index.h("div", { key: 'e46ef618c7652aa4aee6e1e618be42a6f1a6b654', class: "cube" }, index.h("div", { key: 'af6d6e16ffaeadaff6906e2a927d9dd120bcbced', class: "face top" }), index.h("div", { key: 'dcfefb7a09127f5d5fab9e4538e750bf36f3fb79', class: "face bottom" }), index.h("div", { key: '08d30a512aabb0fdb2fe50f6db375897b02ebde8', class: "face left" }), index.h("div", { key: 'cec476d4b207c936aa71be50457ada4e029d12e8', class: "face right" }), index.h("div", { key: 'f36023469d224c14b9172b215fd7cda57e5144df', class: "face front" }), index.h("div", { key: 'af4df1450a0b0f18c8e50079b45aaaabe49b3b8e', class: "face back" }))));
+        return (index.h(index.Host, { key: '90b323eacac8b702168f612f79000da757109ec1', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }, this.shapeType === "lido-cube" &&
+            index.h("div", { key: '16b4a96f302cd6b1c80023a29253e85fe0937622', class: "cube" }, index.h("div", { key: '9ce4dfa0021b463aa5dba4c0651d144f844c2db0', class: "face top" }), index.h("div", { key: 'f10410ef05cbde0a024ccbdbfb4fb7099c1bd9d3', class: "face bottom" }), index.h("div", { key: '2a08b1857613efd1db596d72a9324ac5b3379628', class: "face left" }), index.h("div", { key: '4922b4b63dc9538e68d143109bfa12782382ee48', class: "face right" }), index.h("div", { key: '983bc6815a3b5e6023d76394e0bdeb12c493b771', class: "face front" }), index.h("div", { key: 'eab0224f427b8a345d3c3285d8d2828b39871eaa', class: "face back" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -17899,13 +18060,13 @@ const LidoSlideFill = class {
                 const id = pathIndex === 1 ? 'glassPath' : pathIndex === 2 ? 'rulerPath' : `path${pathIndex}`;
                 return `<path id="${id}"${attrs}>`;
             });
-            const clipPathDef = `
-        <clipPath id="clipGlass">
-          <use xlink:href="#glassPath" />
-        </clipPath>
+            const clipPathDef = `
+        <clipPath id="clipGlass">
+          <use xlink:href="#glassPath" />
+        </clipPath>
       `;
-            svgText = svgText.replace(/<svg([^>]*)>/, `<svg class="lido-slide-svg"$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg class="lido-slide-svg"$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -18030,7 +18191,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'cbb9f4087cff87a6aab9d196a968b8965acb79c7', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, index.h("div", { key: '35b1e30cfccd868de54619b29d89870ca29b1fcc', innerHTML: this.svgContent, class: "lido-svg-element" })));
+        return (index.h(index.Host, { key: 'df8a5474f641fec4d842013a04ef9e3d422a8ab2', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, index.h("div", { key: 'e7b6bcc17f8caea30b074f24596b6b044833d170', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -18319,7 +18480,7 @@ const LidoText = class {
     }
     render() {
         const displayText = instance.t(this.string).replace(/_phonics?/gi, '');
-        return (index.h(index.Host, { key: 'f15f324ad2bf6bf540e1b99bebc18aee13e0f76e', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
+        return (index.h(index.Host, { key: '4bffbc9cb9963f3b478d9e95a13ef70e83ebf69f', class: "lido-text", value: this.value, "required-drops": this.requiredDrops, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, move: this.move, "span-type": this.spanType, "disable-speak": `${this.disableSpeak}` }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     get el() { return index.getElement(this); }
 };
@@ -19450,7 +19611,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '361e60977f10125a19ce2c3a358c4b450d3f2d6c', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: 'f003ed4286f05229490221854c5cba19e7930425', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: '07506adee10b4f0348ba7b7c4d0f338d7e61cfd9', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '9b3c311582a7246cded868234a47293ae78a3932', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -19536,7 +19697,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '80d8d410ffcc60ca8b70a8d76073f941324d311c', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, index.h("slot", { key: '8b2c0f1bfe3568a72545657814ca457640d2d797' })));
+        return (index.h(index.Host, { key: '8d8ea2a16213d6a54c947d2fa20dd094024d30d1', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, index.h("slot", { key: 'f42ddae95ef36fe6e7a42d2ccfcb58bf09243b08' })));
     }
     get el() { return index.getElement(this); }
 };