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

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DnaH8sO-.js');
-var index$1 = require('./index-D5olYRJo.js');
+var index = require('./index-DBCFoh1I.js');
+var index$1 = require('./index-BCRDjbaz.js');
 
 var rive$1 = {exports: {}};
 
@@ -8127,9 +8127,16 @@ const LidoAvatar = class {
             this.riveInstance = new riveExports.Rive({
                 src: rivSrc,
                 canvas: canvas,
-                stateMachines: 'Idle',
+                stateMachines: 'State Machine 1',
                 autoplay: true,
                 onLoad: () => {
+                    // Some avatars expose an idle animation instead of the expected state machine.
+                    if (!this.riveInstance.stateMachineNames.includes('State Machine 1')) {
+                        const idleAnimation = this.riveInstance.animationNames.find(name => name.toLowerCase() === 'idle');
+                        if (idleAnimation) {
+                            this.riveInstance.play(idleAnimation);
+                        }
+                    }
                     this.riveInstance.resizeDrawingSurfaceToCanvas();
                     riveService.setRiveInstance(this.riveInstance);
                 },
@@ -8160,7 +8167,7 @@ const LidoAvatar = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.Host, { key: '14599bbd626e766d35b9611f80dd401ee76717b4', 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: '6f128e61bee6797c0cf83c15b3fd3ba4d1d7b1ea', class: "lido-canvas" })));
+        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" })));
     }
     static get assetsDirs() { return ["."]; }
     get el() { return index.getElement(this); }
@@ -8402,7 +8409,7 @@ const LidoBalance = class {
         };
     }
     render() {
-        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 : '')));
+        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 : '')));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -8595,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: '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: {
+        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: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -8709,7 +8716,7 @@ const LidoCanvas = class {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        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" })));
+        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" })));
     }
     get el() { return index.getElement(this); }
 };
@@ -8968,7 +8975,7 @@ const LidoCell = class {
         this.el.className = `lido-${index$1.parseProp(this.layout, orientation)}`;
     }
     render() {
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -9046,7 +9053,7 @@ const LidoCol = class {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -11929,7 +11936,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) {
@@ -12089,6 +12096,32 @@ const LidoContainer = class {
         this.speakFlag = false;
         this.handleWindowResize = () => this.scaleContainer(this.el);
         this.handleWindowLoad = () => this.scaleContainer(this.el);
+        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 => {
@@ -12334,10 +12367,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');
@@ -12353,9 +12388,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();
@@ -12372,7 +12410,7 @@ const LidoContainer = class {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (index.h(index.Host, { key: '1862e30fedda58726edc107f81fae1f63e96d009', 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: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
+        return (index.h(index.Host, { key: '403faa36329230b28c8c0e3a627c20b48fc1a9d0', 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: '683740c0a8495c875c988b41b8281a362f7713b8', visible: "false", id: this.templateId, audio: "", string: this.instructName }), index.h("slot", { key: '743c0652d70b294513dcdb3cfdd9674b694cd2e8' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -12383,7 +12421,7 @@ const LidoContainer = class {
 };
 LidoContainer.style = lidoContainerCss();
 
-const lidoFlashCardCss = () => `.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}lido-container[template-id="flashcardtemplate"] #arrow{position:absolute !important;left:auto !important;top:50% !important;right:13.3% !important;transform:translateY(-50%);z-index:4 !important;overflow:visible}@media (orientation: portrait){lido-container[template-id="flashcardtemplate"] #arrow{right:-4.3% !important}}`;
+const lidoFlashCardCss = () => `.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease;cursor:pointer}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}lido-container[template-id="flashcardtemplate"] #arrow{position:absolute !important;left:auto !important;top:50% !important;right:13.3% !important;transform:translateY(-50%);z-index:4 !important;overflow:visible;box-sizing:border-box;border:10px solid transparent;box-shadow:0px 8px 0px 0px #8b310f !important}lido-container[template-id="flashcardtemplate"] #arrow.flash-card-next-glowing{animation:flash-card-next-attention 1.4s ease-in-out infinite}@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))}}lido-container[template-id="flashcardtemplate"] #arrow:active{transform:translateY(calc(-50% + 8px)) !important;box-shadow:0px 0px 0px 0px !important}@media (orientation: portrait){lido-container[template-id="flashcardtemplate"] #arrow{right:-4.3% !important}}`;
 
 const LidoFlash = class {
     constructor(hostRef) {
@@ -12464,6 +12502,8 @@ const LidoFlash = class {
          */
         this.flipped = false;
         this.autoFlipAfter = 4500;
+        this.narrationTarget = null;
+        this.narrationHandled = false;
         this.instructionDone = false;
         this.instructionStarted = false;
         this.onAudioStarted = (event) => {
@@ -12471,13 +12511,37 @@ const LidoFlash = class {
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
             if (target === this.instructionText())
                 this.instructionStarted = true;
+            if (target && target === this.narrationTarget && !this.narrationHandled) {
+                if (this.narrationGraceTimer)
+                    window.clearTimeout(this.narrationGraceTimer);
+                this.narrationGraceTimer = undefined;
+            }
+        };
+        this.onAudioPlaying = (event) => {
+            const detail = event.detail;
+            const target = detail === null || detail === void 0 ? void 0 : detail.target;
+            if ((target === null || target === void 0 ? void 0 : target.id) !== 'lido-avatar')
+                return;
+            if (detail.playbackContext !== this.goodJobPlaybackContext)
+                return;
+            const arrow = this.nextArrow();
+            if (!arrow || !this.flipped)
+                return;
+            this.goodJobPlaybackId = detail.playbackId;
+            arrow.classList.add('flash-card-next-glowing');
         };
         this.onAudioEnded = (event) => {
-            var _a;
+            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)))
                 return;
+            if (target === this.narrationTarget && !this.narrationHandled) {
+                this.finishNarration(target);
+                return;
+            }
+            if (this.narrationHandled && target === this.narrationTarget)
+                return;
             if (target === this.instructionText()) {
                 this.instructionDone = true;
                 this.frontStartTimer = window.setTimeout(() => {
@@ -12499,6 +12563,11 @@ const LidoFlash = class {
                     this.showArrow();
             }
             else if (target.id === 'lido-avatar') {
+                const playbackId = (_b = event.detail) === null || _b === void 0 ? void 0 : _b.playbackId;
+                const playbackContext = (_c = event.detail) === null || _c === void 0 ? void 0 : _c.playbackContext;
+                if (playbackContext !== this.goodJobPlaybackContext || playbackId !== this.goodJobPlaybackId)
+                    return;
+                this.goodJobPlaybackId = undefined;
                 index$1.executeActions("this.avatarAnimate='Idle'", target);
             }
         };
@@ -12538,13 +12607,15 @@ const LidoFlash = class {
             if (this.autoFlipTimer)
                 window.clearTimeout(this.autoFlipTimer);
             index$1.AudioPlayer.getI().stop();
+            this.clearNarrationTimers();
             const goingBack = !this.flipped;
             this.flipped = !this.flipped;
+            this.stopGoodJobGlow();
             this.setArrowVisible(false);
             if (goingBack) {
                 const text = this.backText();
                 if (text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
-                    index$1.executeActions("this.speak='true'", text);
+                    this.startNarration(text);
                 else
                     this.showArrow();
             }
@@ -12559,37 +12630,106 @@ const LidoFlash = class {
         };
         this.frontText = () => this.el.querySelector('.card-front lido-text');
         this.backText = () => this.el.querySelector('.card-back lido-text');
-        this.speakFront = () => {
+        this.nextArrow = () => { var _a; return (_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.querySelector('#arrow'); };
+        this.stopGoodJobGlow = () => {
             var _a;
+            this.goodJobPlaybackId = undefined;
+            this.goodJobPlaybackContext = undefined;
+            (_a = this.nextArrow()) === null || _a === void 0 ? void 0 : _a.classList.remove('flash-card-next-glowing');
+        };
+        this.speakFront = () => {
+            var _a, _b;
             const text = this.frontText();
             if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
-                index$1.executeActions("this.speak='true'", text);
+                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)
+                window.clearTimeout(this.narrationGraceTimer);
+            this.narrationGraceTimer = undefined;
+            this.narrationTarget = null;
+            this.narrationHandled = false;
+        };
+        this.continueAfterNarration = (target) => {
+            if (target === this.instructionText()) {
+                this.instructionDone = true;
+                this.frontStartTimer = window.setTimeout(() => this.speakFront(), 1200);
+            }
+            else if (target === this.frontText()) {
+                if (this.flipped)
+                    return;
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
+            }
+            else if (target === this.backText()) {
+                if (this.flipped)
+                    this.showArrow();
+            }
+        };
+        this.finishNarration = (target) => {
+            if (target !== this.narrationTarget || this.narrationHandled)
+                return;
+            this.narrationHandled = true;
+            if (this.narrationGraceTimer)
+                window.clearTimeout(this.narrationGraceTimer);
+            this.narrationGraceTimer = undefined;
+            this.continueAfterNarration(target);
+        };
+        this.startNarration = (target) => {
+            this.clearNarrationTimers();
+            this.narrationTarget = target;
+            this.narrationGraceTimer = window.setTimeout(() => {
+                if (!this.narrationHandled)
+                    this.finishNarration(target);
+            }, LidoFlash.narrationStartGrace);
+            index$1.executeActions("this.speak='true'", target);
         };
         this.showArrow = () => {
             if (!this.flipped)
                 return;
-            const arrow = document.getElementById('arrow');
+            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();
             if (!arrow)
                 return;
             // Existing ZIPs may not have the newer template onTouch action. Reuse
             // the same direct nextBtn action as the shared home arrow for them.
             if (!arrow.getAttribute('onTouch'))
                 arrow.setAttribute('onTouch', "this.nextBtn='true';");
-            const mascot = document.getElementById('lido-avatar');
+            const mascot = container.querySelector('#lido-avatar');
             const scaffoldAudio = arrow.getAttribute('audio');
             if (mascot && scaffoldAudio) {
                 mascot.setAttribute('audio', scaffoldAudio);
-                arrow.removeAttribute('audio');
             }
             this.setArrowVisible(true);
+            // Keep the next action highlighted after mascot audio ends.
+            arrow.classList.add('flash-card-next-glowing');
             if (mascot) {
+                this.goodJobPlaybackContext = {};
+                this.goodJobPlaybackId = undefined;
                 index$1.executeActions("this.avatarAnimate='Idle speak'", mascot);
-                index$1.AudioPlayer.getI().play(mascot, true);
+                index$1.AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext);
             }
         };
         this.setArrowVisible = (visible) => {
-            const arrow = document.getElementById('arrow');
+            const container = this.el.closest('lido-container');
+            if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) !== 'flashcardtemplate')
+                return;
+            const arrow = container.querySelector('#arrow');
             if (!arrow)
                 return;
             arrow.visible = visible;
@@ -12600,6 +12740,7 @@ const LidoFlash = class {
             arrow.style.display = visible ? 'block' : 'none';
             arrow.style.visibility = visible ? 'visible' : 'hidden';
             arrow.style.opacity = visible ? '1' : '0';
+            arrow.style.pointerEvents = visible ? 'auto' : 'none';
             const arrowImage = arrow.querySelector('lido-image');
             if (arrowImage) {
                 arrowImage.style.display = visible ? 'flex' : 'none';
@@ -12622,17 +12763,20 @@ const LidoFlash = class {
         window.addEventListener('load', this.updateStyles);
     }
     componentDidLoad() {
+        var _a;
         index$1.setVisibilityWithDelay(this.el, this.delayVisible);
         index$1.initEventsForElement(this.el, this.type);
         window.addEventListener('lidoAudioStarted', this.onAudioStarted);
+        window.addEventListener('lidoAudioPlaying', this.onAudioPlaying);
         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');
             this.instructionStartTimer = window.setTimeout(() => {
                 if (!this.instructionStarted && !this.instructionDone) {
                     const instruction = this.instructionText();
                     if (instruction)
-                        index$1.executeActions("this.speak='true';", instruction);
+                        this.startNarration(instruction);
                 }
             }, 150);
         }
@@ -12640,6 +12784,7 @@ const LidoFlash = class {
     }
     disconnectedCallback() {
         window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        window.removeEventListener('lidoAudioPlaying', this.onAudioPlaying);
         window.removeEventListener('lidoAudioStarted', this.onAudioStarted);
         if (this.autoFlipTimer)
             window.clearTimeout(this.autoFlipTimer);
@@ -12647,12 +12792,18 @@ const LidoFlash = class {
             window.clearTimeout(this.instructionStartTimer);
         if (this.frontStartTimer)
             window.clearTimeout(this.frontStartTimer);
+        this.clearNarrationTimers();
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (index.h(index.Host, { key: '6650cc9f75b42c06eacbad9c56112fd343b8d02c', 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: this.handleFlip, "disable-speak": this.disableSpeak }, index.h("div", { key: 'e680750d80c7b7b44149d11940059114a4293b3d', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: '0ab8261e7aa931809add9cf1677f8cb594f990d6', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: '3cf08684c987fcca398f1f491f254f80c7cff518', class: "card-face card-back" }, this.back != null ? this.back : index.h("slot", { name: "back" })))));
+        return (index.h(index.Host, { key: '57b9dc5ecf618dc381a58e107fa2990b84f5517a', 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: '3712fc66e33323bdd55e0abb747370ee461dc808', class: `card ${this.flipped ? 'flipped' : ''}` }, index.h("div", { key: 'eb8af2e445393592c0e8a3e4c5934c71dcab4b4e', class: "card-face card-front" }, this.front != null ? this.front : index.h("slot", { name: "front" })), index.h("div", { key: 'efa14cc7ea506714342151b12a9724bdcdb1eba8', 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 {
@@ -12661,6 +12812,7 @@ const LidoFlash = class {
             }]
     }; }
 };
+LidoFlash.narrationStartGrace = 800;
 LidoFlash.style = lidoFlashCardCss();
 
 const lidoFloatCss = () => `.lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}#removeShadow{box-shadow:unset !important}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}`;
@@ -12749,7 +12901,7 @@ const LidoFloat = class {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -12787,9 +12939,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}`;
 
@@ -13099,7 +13251,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-BDs2S8om.js'); }).then(function (n) { return n.decode; });
+            const brotliDecodeModule = await Promise.resolve().then(function () { return require('./decode-B7mZm_nK.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');
@@ -16833,10 +16985,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: '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: () => {
+        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: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), 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: {
+            } }), 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: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -17071,7 +17223,7 @@ const LidoMathMatrix = class {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (index.h(index.Host, { key: '8a17727416da00fda95c401c3a005cdea1e732d0', class: "math-matrix", style: {
+        return (index.h(index.Host, { key: '2ef30835855363ba9fc7932122d1d505a451e055', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -17218,7 +17370,7 @@ const LidoPos = class {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -17362,7 +17514,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -17533,13 +17685,13 @@ const LidoRow = class {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     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) {
@@ -17691,8 +17843,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: '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" }))));
+        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" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -17787,13 +17939,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;
@@ -17918,7 +18070,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        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" })));
+        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" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -18207,7 +18359,7 @@ const LidoText = class {
     }
     render() {
         const displayText = instance.t(this.string).replace(/_phonics?/gi, '');
-        return (index.h(index.Host, { key: 'ecef6ae20a67e2296570fe3a65cc5c99f96a1f7c', 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: '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));
     }
     get el() { return index.getElement(this); }
 };
@@ -19338,7 +19490,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        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" })));
+        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" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -19424,7 +19576,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        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' })));
+        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' })));
     }
     get el() { return index.getElement(this); }
 };