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

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement, c as getAssetPath, d as createEvent } from './index-mMpK8062.js';
-import { R as RiveService, s as setVisibilityWithDelay, i as initEventsForElement, c as convertUrlToRelative, p as parseProp, e as equationCheck, S as SelectedValuesKey, a as storingEachActivityScore, A as AudioPlayer, b as executeActions, d as calculateScore, t as triggerNextContainer, C as CalculatorOk, h as handlingChildElements, f as attachSpeakIcon, L as LIDO_INTERACTION_CLEANUP_EVENT, T as TemplateID, j as calculateScale, k as highlightElement, l as Timer, r as resetFloatState, m as handleFloatElementPosition, n as handleElementClick, o as commonjsGlobal, g as getDefaultExportFromCjs, q as generateUUIDFallback, u as ActivityScoreKey, v as dispatchActivityChangeEvent, G as GameScore, w as dispatchGameExitEvent, x as speakUrl, y as nextUrl, z as prevUrl, B as exitUrl, N as NextContainerKey, P as PrevContainerKey, D as LIDO_COMMON_AUDIO_PATH, E as LidoContainer$1, F as getCancelBtnPopup, H as matchStringPattern, I as triggerPrevcontainer, J as setActiveZipAssets, K as clearActiveZipAssets, M as setCancelBtnPopup, O as tinycolor, Q as stopHighlightForSpeakingElement, U as DropAction, V as validateObjectiveStatus, W as fraction, X as LIDO_COMMON_AUDIO_READY_EVENT, Y as TraceMode, Z as speakIcon, _ as fingerUrl } from './index-B-VyHxJa.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as getAssetPath, d as createEvent } from './index-Dvjbti-h.js';
+import { R as RiveService, s as setVisibilityWithDelay, i as initEventsForElement, c as convertUrlToRelative, p as parseProp, e as equationCheck, S as SelectedValuesKey, a as storingEachActivityScore, A as AudioPlayer, b as executeActions, d as calculateScore, t as triggerNextContainer, C as CalculatorOk, h as handlingChildElements, f as attachSpeakIcon, L as LIDO_INTERACTION_CLEANUP_EVENT, T as TemplateID, j as calculateScale, k as highlightElement, l as Timer, r as resetFloatState, m as handleFloatElementPosition, n as handleElementClick, o as commonjsGlobal, g as getDefaultExportFromCjs, q as generateUUIDFallback, u as ActivityScoreKey, v as dispatchActivityChangeEvent, G as GameScore, w as dispatchGameExitEvent, x as speakUrl, y as nextUrl, z as prevUrl, B as exitUrl, N as NextContainerKey, P as PrevContainerKey, D as LIDO_COMMON_AUDIO_PATH, E as LidoContainer$1, F as getCancelBtnPopup, H as matchStringPattern, I as triggerPrevcontainer, J as setActiveZipAssets, K as clearActiveZipAssets, M as setCancelBtnPopup, O as tinycolor, Q as stopHighlightForSpeakingElement, U as DropAction, V as validateObjectiveStatus, W as fraction, X as LIDO_COMMON_AUDIO_READY_EVENT, Y as TraceMode, Z as speakIcon, _ as fingerUrl } from './index-bo7729YG.js';
 
 var rive$1 = {exports: {}};
 
@@ -8158,7 +8158,7 @@ const LidoAvatar = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (h(Host, { key: 'bb967cb7f353a454adce62c2bb18590f47697110', 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 }, h("canvas", { key: '09824386b4f1c3622111abc86d66ddedb5980bc6', class: "lido-canvas" })));
+        return (h(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 }, h("canvas", { key: '6f128e61bee6797c0cf83c15b3fd3ba4d1d7b1ea', class: "lido-canvas" })));
     }
     static get assetsDirs() { return ["."]; }
     get el() { return getElement(this); }
@@ -8166,7 +8166,7 @@ const LidoAvatar = class {
 LidoAvatar.RIVE_WASM_URL = 'https://unpkg.com/@rive-app/canvas@2.32.0/rive.wasm';
 LidoAvatar.style = lidoAvatarCss();
 
-const lidoBalanceCss = () => `#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){.lido-balance-shadow{height:100px;position:absolute;top:80%;left:28%}}@media (orientation: landscape){.lido-balance-shadow{height:100px;position:absolute;top:90%;left:33%}}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}#pivotimg::after{content:"";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:120%;height:60px;background-image:var(--lido-balance-shadow-url);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:10}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^="M78.9414"]{fill:white}`;
+const lidoBalanceCss = () => `#lido-balance{position:relative;height:500px;width:1205px;top:20%;left:-91px;z-index:0}.lido-balance-symbol{position:absolute;top:64%;left:50%;transform:translate(-50%, -50%);font-size:5vw;font-weight:bold;color:black;pointer-events:none;z-index:999}@media (orientation: portrait){.lido-balance-shadow{height:100px;position:absolute;top:80%;left:28%}}.balance-plate-feedback{position:absolute;top:52%;width:34%;height:12px;border-radius:0 0 8px 8px;opacity:0.95;box-shadow:0 9px 10px -2px rgba(70, 0, 0, 0.6);pointer-events:none;z-index:95}.balance-plate-feedback[aria-hidden='true']{display:none}.balance-plate-feedback.left{left:2.5%}.balance-plate-feedback.right{right:2.5%}.balance-plate-feedback::after{content:'';position:absolute;top:100%;left:4%;width:92%;height:11px;border-radius:0 0 8px 8px;background:inherit;opacity:0.75;filter:blur(5px);pointer-events:none}@media (orientation: landscape){.lido-balance-shadow{height:100px;position:absolute;top:90%;left:33%}}@media (orientation: portrait){#pivotimg{position:absolute;height:auto;width:23%;bottom:18%;left:38%;z-index:100}}#pivotimg::after{content:"";position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:120%;height:60px;background-image:var(--lido-balance-shadow-url);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:10}@media (orientation: landscape){#pivotimg{position:absolute;height:auto;width:23%;bottom:8%;left:38%;z-index:100}}.lido-balance .pivot svg{width:100%;height:auto}#scaleimg{position:absolute;width:73%;height:auto;top:61%;left:14%;z-index:90}.lido-balance .scale svg{width:100%;height:auto}@media (orientation: landscape){#handlerimg{position:absolute;width:35%;height:auto;top:49%;left:2%}}@media (orientation:portrait ){#handlerimg{position:absolute;width:35%;height:auto;top:53%;left:2%}}.lido-balance .handler svg{width:100%;height:auto;fill:brown}@media (orientation: landscape){#handimg{position:absolute;width:35%;height:auto;top:49%;right:2%}}@media (orientation:portrait){#handimg{position:absolute;width:35%;height:auto;top:53%;right:2%}}.lido-balance .hand svg{width:100%;height:auto;fill:brown}.pivot svg path:nth-of-type(1){fill:brown}.pivot svg path[d^="M78.9414"]{fill:white}`;
 
 const LidoBalance = class {
     constructor(hostRef) {
@@ -8284,6 +8284,7 @@ const LidoBalance = class {
          * Current computed value of the right side of the balance.
          */
         this.rightVal = 0;
+        this.feedbackColor = '';
         this.currentAngle = 0;
     }
     async revealSymbol() {
@@ -8292,12 +8293,24 @@ const LidoBalance = class {
     async hideSymbol() {
         this.showSymbol = false;
     }
+    async setFeedbackColor(color = '') {
+        this.feedbackColor = color;
+    }
     async componentWillLoad() {
+        this.initializeInitialSymbol();
         this.updateStyles();
         this.pivotSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.pivotimage));
         this.scaleSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.scaleimage));
         this.handlerSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.handlerimage));
     }
+    initializeInitialSymbol() {
+        var _a, _b;
+        const container = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('lido-container');
+        const objective = (_b = container === null || container === void 0 ? void 0 : container.getAttribute('objective')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (objective === '>' || objective === '<' || objective === '=')
+            this.balanceSymbol = objective;
+        this.showSymbol = true;
+    }
     componentDidLoad() {
         this.animateBalance();
         this.leftParentEl = document.getElementById("leftparent");
@@ -8362,6 +8375,11 @@ const LidoBalance = class {
                 const offset = (this.currentAngle / this.maxTilt) * maxOffset;
                 this.leftHandleEl.style.transform = `translateY(${-offset}px)`;
                 this.rightHandleEl.style.transform = `translateY(${offset}px)`;
+                const feedbackOffset = (this.currentAngle / this.maxTilt) * maxOffset;
+                if (this.leftFeedbackEl)
+                    this.leftFeedbackEl.style.transform = `translateY(${-feedbackOffset}px)`;
+                if (this.rightFeedbackEl)
+                    this.rightFeedbackEl.style.transform = `translateY(${feedbackOffset}px)`;
             }
             this.animationFrameId = requestAnimationFrame(rotate);
         };
@@ -8382,7 +8400,7 @@ const LidoBalance = class {
         };
     }
     render() {
-        return (h(Host, { key: 'dea6f583bb2de36cfe7ee5bf401cdcaf975685b8', 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 }, h("div", { key: 'da588147b7aeafc8a529c8f8399e5acbabbf3bb7', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'f1a0aa6b8f080a0db945c44b2a1cbb715541db4f', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'e1c742d85d924a6c24c6c8103dcfcf2d41533b88', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'c1ea8165c0d2c590616edee9b189e8a3d4198c1a', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'd666d445b0a5fd04394c335ea1494ac7e80f1b07', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(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 }, h("div", { key: '657f471d397dd7e3476d5b6e35ee4495c8f2db4c', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '7b91e1919db1fdbcddf79f43a9ad51695b7c806f', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '137a1440d55776d0771d8cd71741202c224896db', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'd6e0deae63a4e219757240e585d582fb5a72a071', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'ef51f98937cf10c017c8289359c92c24e7316a16', class: "balance-plate-feedback left", ref: (el) => (this.leftFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), h("div", { key: 'f21aade8543977b657a4d2fbcd623cf8769459a0', class: "balance-plate-feedback right", ref: (el) => (this.rightFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), 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 getElement(this); }
@@ -8575,7 +8593,7 @@ const LidoCalculator = class {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: 'ae833326069dd4cf9588701995962b0d1b3b0091', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '135b08be24862393217a0a93d4afd3ec8647547c', visible: "true", height: "94px", width: "60px" }, 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" }, h("img", { key: '2b6077ffad1046fdedb816402fdcb906539afa5c', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '96dfabdab176f66e16d6b03efb2e8ecad74c9d45', class: "lido-calculator-displayParent" }, h("div", { key: '9c711dd53ada73ca9ddac1c37b0719c5c746a591', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '5d595bf410fc1a75fa57c485fd08a8e97064016a', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: 'e8249dda090212d327b68b47d42a123de6a890c9', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '54d093a3dd6a6e5850c881d224290bd6cf9c3690', visible: "true", height: "94px", width: "60px" }, 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" }, h("img", { key: '7242feedd5172b555df683c747bbef778a9cdcd7', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '6145a4f89da352c3576e6d51a1e260e335778fbb', class: "lido-calculator-displayParent" }, h("div", { key: '04e07b724d912d43b08c7a1e15c605d0fd30c7be', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '19839d02863ca1e27fddb4093f191171e237f143', class: "lido-calculator-buttons" }, numbers.map((num, i) => (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) }))))));
@@ -8689,7 +8707,7 @@ const LidoCanvas = class {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
     render() {
-        return (h(Host, { key: 'ca88c99317fe079d25b16410d78cbd63e13d712c', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: '3e1085ff4be21ca281483367a41b51ba4ff49736', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: '9c1f485a2a84b2da9468e8b83f1962cce7852efc', id: "lido-canvas" })));
+        return (h(Host, { key: '6bb47f06656ce667d23236e9f3c3a8f383885a43', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'fd0d1217bda63071fbf6496c2538c2a944b14181', id: "lido-exit-button", onClick: () => this.clearCanvas() }), h("canvas", { key: 'ed0333972bb7ce0fc4e14c81bb466ea895ce65e0', id: "lido-canvas" })));
     }
     get el() { return getElement(this); }
 };
@@ -8948,7 +8966,7 @@ const LidoCell = class {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(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 }, h("slot", { key: '1af7a1f78e12bb1babcd91266eaf209b9d7530dc' })));
+        return (h(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 }, h("slot", { key: '6e9d4507b36716f04853d39ef66015441782aa88' })));
     }
     get el() { return getElement(this); }
 };
@@ -9026,7 +9044,7 @@ const LidoCol = class {
         };
     }
     render() {
-        return (h(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 }, h("slot", { key: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
+        return (h(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 }, h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     get el() { return getElement(this); }
 };
@@ -12352,7 +12370,7 @@ const LidoContainer = class {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(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}` }, h("lido-text", { key: '8295782a74ce6ef8ca9a623de8a28b539d9f6d4f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'eb3c995b777986e07dcb6aa935ef38d41aa1e7e7' })));
+        return (h(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}` }, h("lido-text", { key: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12363,7 +12381,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)}`;
+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 LidoFlash = class {
     constructor(hostRef) {
@@ -12443,6 +12461,45 @@ const LidoFlash = class {
          * `reflect` keeps the `<lido-flash-card flipped>` attribute in sync.
          */
         this.flipped = false;
+        this.autoFlipAfter = 4500;
+        this.instructionDone = false;
+        this.instructionStarted = false;
+        this.onAudioStarted = (event) => {
+            var _a;
+            const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            if (target === this.instructionText())
+                this.instructionStarted = true;
+        };
+        this.onAudioEnded = (event) => {
+            var _a;
+            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.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();
+            }
+            else if (target.id === 'lido-avatar') {
+                executeActions("this.avatarAnimate='Idle'", target);
+            }
+        };
         /**
          * CSS margin value applied to each child element inside the container.
          * Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
@@ -12475,7 +12532,80 @@ const LidoFlash = class {
         };
         /** Toggle the card when it is clicked. */
         this.handleFlip = () => {
+            var _a;
+            if (this.autoFlipTimer)
+                window.clearTimeout(this.autoFlipTimer);
+            AudioPlayer.getI().stop();
+            const goingBack = !this.flipped;
             this.flipped = !this.flipped;
+            this.setArrowVisible(false);
+            if (goingBack) {
+                const text = this.backText();
+                if (text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+                    executeActions("this.speak='true'", text);
+                else
+                    this.showArrow();
+            }
+            else {
+                this.speakFront();
+            }
+        };
+        this.instructionText = () => {
+            const container = this.el.closest('lido-container');
+            const id = container === null || container === void 0 ? void 0 : container.getAttribute('template-id');
+            return id ? container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`) : null;
+        };
+        this.frontText = () => this.el.querySelector('.card-front lido-text');
+        this.backText = () => this.el.querySelector('.card-back lido-text');
+        this.speakFront = () => {
+            var _a;
+            const text = this.frontText();
+            if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
+                executeActions("this.speak='true'", text);
+            }
+        };
+        this.showArrow = () => {
+            if (!this.flipped)
+                return;
+            const arrow = document.getElementById('arrow');
+            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 scaffoldAudio = arrow.getAttribute('audio');
+            if (mascot && scaffoldAudio) {
+                mascot.setAttribute('audio', scaffoldAudio);
+                arrow.removeAttribute('audio');
+            }
+            this.setArrowVisible(true);
+            if (mascot) {
+                executeActions("this.avatarAnimate='Idle speak'", mascot);
+                AudioPlayer.getI().play(mascot, true);
+            }
+        };
+        this.setArrowVisible = (visible) => {
+            const arrow = document.getElementById('arrow');
+            if (!arrow)
+                return;
+            arrow.visible = visible;
+            arrow.setAttribute('visible', String(visible));
+            // lido-cell's visible prop is a non-reflected string prop; keep the
+            // rendered host in sync as well so an attribute update cannot leave its
+            // previous inline display:none in place.
+            arrow.style.display = visible ? 'block' : 'none';
+            arrow.style.visibility = visible ? 'visible' : 'hidden';
+            arrow.style.opacity = visible ? '1' : '0';
+            const arrowImage = arrow.querySelector('lido-image');
+            if (arrowImage) {
+                arrowImage.style.display = visible ? 'flex' : 'none';
+                arrowImage.style.visibility = visible ? 'visible' : 'hidden';
+                arrowImage.style.opacity = visible ? '1' : '0';
+            }
+            if (typeof arrow.updateStyles === 'function')
+                arrow.updateStyles();
         };
     }
     /* ---------- Watches ---------- */
@@ -12491,25 +12621,36 @@ const LidoFlash = class {
     }
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
-        const card = this.el.querySelector('.card');
-        if (card) {
-            setTimeout(() => {
-                card.classList.add('flipped');
-                setTimeout(() => {
-                    card.classList.remove('flipped');
-                }, 500);
-            }, 500);
-        }
         initEventsForElement(this.el, this.type);
+        window.addEventListener('lidoAudioStarted', this.onAudioStarted);
+        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') {
+            this.instructionStartTimer = window.setTimeout(() => {
+                if (!this.instructionStarted && !this.instructionDone) {
+                    const instruction = this.instructionText();
+                    if (instruction)
+                        executeActions("this.speak='true';", instruction);
+                }
+            }, 150);
+        }
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
     disconnectedCallback() {
+        window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        window.removeEventListener('lidoAudioStarted', this.onAudioStarted);
+        if (this.autoFlipTimer)
+            window.clearTimeout(this.autoFlipTimer);
+        if (this.instructionStartTimer)
+            window.clearTimeout(this.instructionStartTimer);
+        if (this.frontStartTimer)
+            window.clearTimeout(this.frontStartTimer);
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'cd0d8539f24de1fd7805b271de839ee8efeb4287', 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 }, h("div", { key: 'a97eaa100216652cc4deaf8b6f73e9ea07a125f2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '7a6f94b89da76b2c7fc911c44d2aaa63a3d2164d', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '15936f96d44db217c042584cc225a42dc3f74e98', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(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 }, h("div", { key: 'e680750d80c7b7b44149d11940059114a4293b3d', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '0ab8261e7aa931809add9cf1677f8cb594f990d6', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '3cf08684c987fcca398f1f491f254f80c7cff518', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12606,7 +12747,7 @@ const LidoFloat = class {
         };
     }
     render() {
-        return (h(Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     get el() { return getElement(this); }
 };
@@ -12644,9 +12785,9 @@ function requireJszip_min () {
 var jszip_minExports = requireJszip_min();
 var JSZip = /*@__PURE__*/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}`;
 
@@ -12860,6 +13001,10 @@ const LidoHome = class {
      * between containers and parses the XML data into containers.
      */
     async componentWillLoad() {
+        // 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.
+        this.publishCommonAudioPath(this.commonAudioPath);
         this.navBarIcons = {
             exit: this.exitButtonUrl || exitUrl,
             prev: this.prevButtonUrl || prevUrl,
@@ -12952,7 +13097,7 @@ const LidoHome = class {
         }
         // Pure-JS fallback (no wasm asset required)
         try {
-            const brotliDecodeModule = await import('./decode-B_VrYFdJ.js').then(function (n) { return n.d; });
+            const brotliDecodeModule = await import('./decode-CAwfe7ub.js').then(function (n) { return n.d; });
             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');
@@ -13025,7 +13170,6 @@ const LidoHome = class {
         return `${this.baseUrl.replace(/\/+$/, '')}/${path}`;
     }
     componentDidLoad() {
-        this.publishCommonAudioPath(this.commonAudioPath);
         setTimeout(() => {
             this.showDotsandbtn = true;
         }, 10);
@@ -16687,10 +16831,10 @@ const LidoKeyboard = class {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer$1);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(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 && (h("div", { key: '136fa3a2b0459a9a63e14ac8e212997e4bd32224', class: "input-area" }, h("input", { key: 'd9a1dc064d615b40b1e0e2b008dbf79ec70eb19b', type: "text", value: this.inputString, class: "input-area", readonly: true }), 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 (h(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 && (h("div", { key: '7b5d293c52747700cde9c1069cfbbdae065e64f9', class: "input-area" }, h("input", { key: '03a91cd87e6bb4f09bf698087258426dd9232f67', type: "text", value: this.inputString, class: "input-area", readonly: true }), 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);
-            } }), 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 && (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" })), h("div", { key: '1e7855724f15fdb432320f6186fc356518a29224', class: "keyboard-wrapper", style: {
+            } }), 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 && (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" })), h("div", { key: '826900d6ba26175eb45d2e7e4c02fccce2004db3', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -16925,7 +17069,7 @@ const LidoMathMatrix = class {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '2ef30835855363ba9fc7932122d1d505a451e055', class: "math-matrix", style: {
+        return (h(Host, { key: '8a17727416da00fda95c401c3a005cdea1e732d0', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -17072,7 +17216,7 @@ const LidoPos = class {
         };
     }
     render() {
-        return (h(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 }, h("slot", { key: 'd5026f61804b53e63aa1cc6c15b3de91543cf426' })));
+        return (h(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 }, h("slot", { key: '73f7bfe2d8214693d6f40a4dab6d735906ad4eaa' })));
     }
     get el() { return getElement(this); }
 };
@@ -17216,7 +17360,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(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 }, h("slot", { key: 'ed0386cda3ba55d89fb08607775a49a4180f08b3' })));
+        return (h(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 }, h("slot", { key: 'b80726b68b7f1c009f35352b9d05cd573159f87b' })));
     }
     get el() { return getElement(this); }
 };
@@ -17387,13 +17531,13 @@ const LidoRow = class {
         };
     }
     render() {
-        return (h(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 }, h("slot", { key: '747f20051ad1fd1dd075ba457b612e9d8ef7d27d' })));
+        return (h(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 }, h("slot", { key: '8756ee0447057cddb949e23decbde5fe4d1d25c8' })));
     }
     get el() { return 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) {
@@ -17545,8 +17689,8 @@ const LidoShape = class {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: '326d0e58f7d2bd177ae04c4ac8eac74b277a0392', 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" &&
-            h("div", { key: 'f5f762fa74733659b970d5c476da5da10cc9f4c5', class: "cube" }, h("div", { key: '5324a04af38cfbc5eca4c5aa32df51a3e0e5443c', class: "face top" }), h("div", { key: 'a265a3ebfe41e0da844ac934c6af1045cde6cfad', class: "face bottom" }), h("div", { key: '58ce610d7fb003313c3e8ce3be019142086919e5', class: "face left" }), h("div", { key: '9c8ee3317a0331f9c3eeb3527963999765c10144', class: "face right" }), h("div", { key: 'eb674c98aa795f89094b1d510b59f96f742d7c6a', class: "face front" }), h("div", { key: '918b2aa2d5babbb700838d08dbdad100fc846f54', class: "face back" }))));
+        return (h(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" &&
+            h("div", { key: '16b4a96f302cd6b1c80023a29253e85fe0937622', class: "cube" }, h("div", { key: '9ce4dfa0021b463aa5dba4c0651d144f844c2db0', class: "face top" }), h("div", { key: 'f10410ef05cbde0a024ccbdbfb4fb7099c1bd9d3', class: "face bottom" }), h("div", { key: '2a08b1857613efd1db596d72a9324ac5b3379628', class: "face left" }), h("div", { key: '4922b4b63dc9538e68d143109bfa12782382ee48', class: "face right" }), h("div", { key: '983bc6815a3b5e6023d76394e0bdeb12c493b771', class: "face front" }), h("div", { key: 'eab0224f427b8a345d3c3285d8d2828b39871eaa', class: "face back" }))));
     }
     get el() { return getElement(this); }
 };
@@ -17641,13 +17785,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;
@@ -17772,7 +17916,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ba987e7ba4a36b96763c6e434be58f5e64f59d88', 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 }, h("div", { key: '904d482335451cf420b56a24f0ca3a279db4abc8', innerHTML: this.svgContent, class: "lido-svg-element" })));
+        return (h(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 }, h("div", { key: 'e7b6bcc17f8caea30b074f24596b6b044833d170', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18061,7 +18205,7 @@ const LidoText = class {
     }
     render() {
         const displayText = instance.t(this.string).replace(/_phonics?/gi, '');
-        return (h(Host, { key: '14a67034db7bf3d268e999404425879c95964b82', 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 !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
+        return (h(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 !== '' ? h("div", { class: "lido-text-content" }, " ", displayText) : displayText));
     }
     get el() { return getElement(this); }
 };
@@ -18699,7 +18843,7 @@ const LidoTrace = class {
                 state.freeTracePointsCount = 1;
             }
             // Limit the number of points in the free trace path for performance
-            const MAX_FREE_TRACE_POINTS = 10;
+            const MAX_FREE_TRACE_POINTS = 5;
             state.freeTracePointsCount = (state.freeTracePointsCount || 1) + 1;
             if (state.freeTracePointsCount > MAX_FREE_TRACE_POINTS) {
                 // If limit reached, skip adding more points
@@ -19192,7 +19336,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (h(Host, { key: 'f4c270d9319e1115d966a6d9b697a4413ca87885', 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 }, h("div", { key: 'efbbaf5c796c9cfe8516fe5d47265e3a01b28a25', style: this.style, id: "lido-svgContainer" })));
+        return (h(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 }, h("div", { key: '9b3c311582a7246cded868234a47293ae78a3932', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -19278,7 +19422,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (h(Host, { key: '1b5a62590f56ae5623770a4333fe84fdffd5617f', 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 }, h("slot", { key: '081252d2c1074c0e1635b583f697d7d44aec1333' })));
+        return (h(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 }, h("slot", { key: 'f42ddae95ef36fe6e7a42d2ccfcb58bf09243b08' })));
     }
     get el() { return getElement(this); }
 };