speakid-build-a-sentence 1.0.27 → 1.0.28

package/dist/speakid-build-a-sentence.es.js

@@ -1,4 +1,4 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { jsx as l, jsxs as y } from "react/jsx-runtime";
 import { useState as c, useCallback as ce, useRef as re, useEffect as j, useMemo as dt, Component as pt } from "react";
 const ut = `
   @keyframes spin {
@@ -134,13 +134,14 @@ const Ce = {
     fontFamily: '"Geist", system-ui',
     width: "160px"
   },
-  // ✅ Обновлено только для качества логотипа (размер как в whats-missing)
+  // ✅ Обновлено только для качества логотипа (размер как в Hangman)
   gmLogoFixed: {
     position: "absolute",
     top: "16px",
     left: "16px",
     width: "auto",
-    zIndex: 10,
+    zIndex: 30,
+    // ✅ Унифицирован zIndex для консистентности
     pointerEvents: "none",
     background: "transparent",
     transform: "none",
@@ -185,7 +186,7 @@ const Ce = {
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const O = h.findIndex((N, y) => y !== M && N.toLowerCase().trim() === k.toLowerCase().trim());
+    const O = h.findIndex((N, b) => b !== M && N.toLowerCase().trim() === k.toLowerCase().trim());
     return O !== -1 && w.push({
       type: "duplicate",
       message: `Duplicate sentence (same as sentence ${O + 1})`
@@ -257,11 +258,11 @@ function kt(f = {}) {
   const { logoUrl: s, showLogo: v = !0, screenHeight: H, screenWidth: $, gameCubeSize: k } = f, M = re(null), h = () => $ ?? (typeof window < "u" ? window.innerWidth : 1920), w = () => H ?? (typeof window < "u" ? window.innerHeight : 1080), { validateAllSentences: K, errors: O } = ft(), N = () => {
     const e = h();
     return !!(m || e < 768 || e >= 768 && e < 1300);
-  }, y = () => {
+  }, b = () => {
     const e = h(), n = w();
     return m || e < 768 || e >= 320 && e <= 932 && n >= 390 && n <= 932;
   }, F = (e = "medium") => {
-    if (!y())
+    if (!b())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -293,7 +294,7 @@ function kt(f = {}) {
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [S, z] = c("select"), [E, de] = c(null), [pe, ue] = c(null), [T, Z] = c([]), [D, fe] = c(0), [oe, me] = c([]), [I, ie] = c([]), [W, ge] = c(20), [V, G] = c(0), [yt, he] = c(null), [X, P] = c(null), [l, _] = c(!1), [xe, se] = c(!1), [ae, Te] = c(
+  const [S, z] = c("select"), [E, de] = c(null), [pe, ue] = c(null), [T, Z] = c([]), [D, fe] = c(0), [oe, me] = c([]), [I, ie] = c([]), [W, ge] = c(20), [V, G] = c(0), [yt, he] = c(null), [X, P] = c(null), [a, _] = c(!1), [xe, se] = c(!1), [ae, Te] = c(
     Number(localStorage.getItem("magicSentenceBest")) || 0
   ), q = re(null), De = re(null), ye = re(0), [x, B] = c({ list: null, id: null, side: null }), [m, Re] = c(!1), [ze, U] = c(1), [be, J] = c(null), [Ee, Pe] = c(!1), [Be, Le] = c(!1), [Me, We] = c(!1), [Ae, He] = c(!1), [$e, Oe] = c(!1), [Ne, Ge] = c(!1), [Xe, je] = c(!1), [Fe, Ve] = c(!1), [qe, Ue] = c(!1), [bt, Je] = c(!1), [wt, Ye] = c(!1);
   j(() => {
@@ -321,7 +322,7 @@ function kt(f = {}) {
       return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, [$, H, k]);
   const Q = (e, n, t, r) => {
-    if (l) return;
+    if (a) return;
     let o = [...oe], p = [...I];
     const g = e === "bank" ? o : p, i = n === "bank" ? o : p, d = g.findIndex((ne) => ne.id === t);
     if (d === -1) return;
@@ -329,7 +330,7 @@ function kt(f = {}) {
     let C = r;
     e === n && C !== null && C !== void 0 && C > d && (C = C - 1), C == null || C < 0 || C > i.length ? i.push(R) : i.splice(C, 0, R), e === "bank" ? o = g : p = g, n === "bank" ? o = i : p = i, me(o), ie(p);
   }, Y = (e, n, t) => {
-    if (e.preventDefault(), l) {
+    if (e.preventDefault(), a) {
       B({ list: null, id: null, side: null });
       return;
     }
@@ -382,10 +383,10 @@ function kt(f = {}) {
     }));
     me(r), ie([]), fe(e), ye.current = e, ge(pe || 20), P(null), _(!1), se(!1), z("play");
   };
-  j(() => (S === "play" && !l && (q.current !== null && window.clearTimeout(q.current), W > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
+  j(() => (S === "play" && !a && (q.current !== null && window.clearTimeout(q.current), W > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
     q.current !== null && window.clearTimeout(q.current);
-  }), [S, W, l]), j(() => {
-    if (S === "play" && l && W === 0) {
+  }), [S, W, a]), j(() => {
+    if (S === "play" && a && W === 0) {
       const e = T[D];
       if (!e) {
         P(null);
@@ -394,10 +395,10 @@ function kt(f = {}) {
       const n = e.trim().split(/\s+/), t = I.map((i) => i.text), r = n.filter((i) => !t.includes(i)).length, o = t.filter((i) => !n.includes(i)).length, p = n.filter((i, d) => t.includes(i) ? t[d] !== i : !1).length, g = r + o + p;
       g === 0 ? (P("correct"), xe || (se(!0), G((i) => i + 1)), L("correct"), A("Correct! Well done!")) : g === 1 ? (P("almost"), G((i) => i + 0.5), L("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), L("wrong"), A("Not quite right. Keep trying!"));
     }
-  }, [S, l, W, T, D, I, xe]);
+  }, [S, a, W, T, D, I, xe]);
   const tt = (e = !0) => {
     if (e) {
-      if (l) {
+      if (a) {
         D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
         return;
       }
@@ -451,14 +452,14 @@ function kt(f = {}) {
       }), Date.now() < n ? requestAnimationFrame(g) : document.body.removeChild(r);
     };
     g();
-  }, nt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: u.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ a("div", { style: {
+  }, nt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select number of rounds" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: y() ? "8px" : "16px",
+      gap: b() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ b(
+    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ y(
       "button",
       {
         onClick: () => Ke(e),
@@ -473,14 +474,14 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), rt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: u.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ a("div", { style: {
+  ] }), rt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select time per round" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: y() ? "8px" : "16px",
+      gap: b() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ b(
+    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ y(
       "button",
       {
         onClick: () => Ze(e),
@@ -495,16 +496,16 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), ot = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ b("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), ot = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ y("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
       E,
       " sentence",
       E && E > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ a("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ a("div", { style: {
+    /* @__PURE__ */ l("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: 12,
@@ -514,7 +515,7 @@ function kt(f = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: T.map((e, n) => /* @__PURE__ */ a(
+    }, children: T.map((e, n) => /* @__PURE__ */ l(
       "input",
       {
         value: e,
@@ -522,8 +523,8 @@ function kt(f = {}) {
         onChange: (t) => _e(n, t.target.value),
         style: {
           ...u.gmInput,
-          padding: y() ? "8px 12px" : "12px 16px",
-          fontSize: y() ? "14px" : "16px",
+          padding: b() ? "8px 12px" : "12px 16px",
+          fontSize: b() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
@@ -532,7 +533,7 @@ function kt(f = {}) {
       },
       n
     )) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "button",
       {
         onClick: et,
@@ -547,36 +548,36 @@ function kt(f = {}) {
         children: "PLAY"
       }
     )
-  ] }), it = () => /* @__PURE__ */ b("div", { style: u.gmReadyWrapper, children: [
-    /* @__PURE__ */ a("h1", { style: {
+  ] }), it = () => /* @__PURE__ */ y("div", { style: u.gmReadyWrapper, children: [
+    /* @__PURE__ */ l("h1", { style: {
       ...u.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ a("div", { style: u.gmHourglass, children: "⏳" })
-  ] }), st = () => /* @__PURE__ */ b("div", { style: u.gmGameLayout, children: [
-    /* @__PURE__ */ b("h2", { style: {
-      marginBottom: y() ? "5px" : "10px",
-      fontSize: y() ? "16px" : "20px"
+    /* @__PURE__ */ l("div", { style: u.gmHourglass, children: "⏳" })
+  ] }), st = () => /* @__PURE__ */ y("div", { style: u.gmGameLayout, children: [
+    /* @__PURE__ */ y("h2", { style: {
+      marginBottom: b() ? "5px" : "10px",
+      fontSize: b() ? "16px" : "20px"
     }, children: [
       "Round ",
       D + 1,
       "/",
       E,
       " — ",
-      l ? "TIME'S UP!" : `Time: ${W}s`
+      a ? "TIME'S UP!" : `Time: ${W}s`
     ] }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         style: {
           width: "60%",
-          height: y() ? "8px" : "14px",
+          height: b() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: y() ? "10px" : "20px"
+          marginBottom: b() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -589,7 +590,7 @@ function kt(f = {}) {
         )
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -604,15 +605,15 @@ function kt(f = {}) {
           width: "100%",
           boxSizing: "border-box"
         },
-        children: oe.map((e, n) => /* @__PURE__ */ a(
+        children: oe.map((e, n) => /* @__PURE__ */ l(
           "div",
           {
-            draggable: !l,
+            draggable: !a,
             role: "button",
-            tabIndex: l ? -1 : 0,
-            "aria-label": l ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
+            tabIndex: a ? -1 : 0,
+            "aria-label": a ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
             onDragStart: (t) => {
-              if (l) {
+              if (a) {
                 t.preventDefault();
                 return;
               }
@@ -622,7 +623,7 @@ function kt(f = {}) {
               ), t.dataTransfer.setData("text/plain", e.id), A(`Dragging word: ${e.text}`);
             },
             onKeyDown: (t) => {
-              l || gt(t, () => Q("bank", "selected", e.id, null));
+              a || gt(t, () => Q("bank", "selected", e.id, null));
             },
             onDragOver: (t) => t.preventDefault(),
             onDrop: (t) => {
@@ -630,20 +631,20 @@ function kt(f = {}) {
               B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "bank", p);
             },
             onDragEnter: (t) => {
-              if (l) return;
+              if (a) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
               B({ list: "bank", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
             onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || Q("bank", "selected", e.id, null);
+              a || Q("bank", "selected", e.id, null);
             },
             style: {
               padding: m || h() < 768 ? "6px 10px" : "10px 16px",
               borderRadius: m || h() < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: l ? "#f0f0f0" : "#f9f9f9",
-              cursor: l ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
+              background: a ? "#f0f0f0" : "#f9f9f9",
+              cursor: a ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
               fontSize: (() => {
                 const t = h();
                 return m || t < 768 ? "12px" : t >= 768 && t < 1300 ? "14px" : "18px";
@@ -652,7 +653,7 @@ function kt(f = {}) {
               ...x.list === "bank" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: l ? 0.6 : 1,
+              opacity: a ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...x.list === "bank" && x.id === e.id ? {
                 transform: "scale(1.05)",
@@ -665,7 +666,7 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -701,12 +702,12 @@ function kt(f = {}) {
           overflowX: N() ? "hidden" : "auto",
           whiteSpace: N() ? "normal" : "nowrap"
         },
-        children: I.map((e, n) => /* @__PURE__ */ a(
+        children: I.map((e, n) => /* @__PURE__ */ l(
           "span",
           {
-            draggable: !l,
+            draggable: !a,
             onDragStart: (t) => {
-              if (l) {
+              if (a) {
                 t.preventDefault();
                 return;
               }
@@ -721,24 +722,24 @@ function kt(f = {}) {
               B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "selected", g);
             },
             onDragEnter: (t) => {
-              if (l) return;
+              if (a) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
               B({ list: "selected", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
             onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || Q("selected", "bank", e.id, null);
+              a || Q("selected", "bank", e.id, null);
             },
-            title: l ? "Time expired" : "Click to remove back to bank",
+            title: a ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: y() ? "4px 6px" : "6px 10px",
-              margin: y() ? "2px" : "4px",
-              borderRadius: y() ? "4px" : "8px",
-              background: l ? "#f0f0f0" : "#ffe9e7",
-              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
+              padding: b() ? "4px 6px" : "6px 10px",
+              margin: b() ? "2px" : "4px",
+              borderRadius: b() ? "4px" : "8px",
+              background: a ? "#f0f0f0" : "#ffe9e7",
+              border: a ? "1px solid #ccc" : "1px solid #ec4c44",
               ...x.list === "selected" && x.id === e.id && x.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
               ...x.list === "selected" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
-              cursor: l ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
+              cursor: a ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
               fontSize: `${we(I.length)}px`,
               // Адаптивный размер шрифта для слов
@@ -746,7 +747,7 @@ function kt(f = {}) {
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: l ? 0.6 : 1,
+              opacity: a ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...x.list === "selected" && x.id === e.id ? {
                 transform: "scale(1.05)",
@@ -759,34 +760,34 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "button",
       {
         onClick: () => tt(!0),
-        disabled: !l && I.length === 0,
+        disabled: !a && I.length === 0,
         style: {
-          marginTop: y() ? "15px" : "30px",
-          fontSize: y() ? "14px" : "20px",
-          padding: y() ? "6px 12px" : "10px 24px",
-          borderRadius: y() ? "8px" : "12px",
-          background: l || I.length > 0 ? "#ec4c44" : "#ccc",
+          marginTop: b() ? "15px" : "30px",
+          fontSize: b() ? "14px" : "20px",
+          padding: b() ? "6px 12px" : "10px 24px",
+          borderRadius: b() ? "8px" : "12px",
+          background: a || I.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: l || I.length > 0 ? "pointer" : "not-allowed"
+          cursor: a || I.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
     )
   ] }), at = () => {
     const e = h(), n = w(), t = m && e > n || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430 || Be || Me || Ae || $e || Ne || Xe || Fe || qe, r = m && e <= 375 && n <= 667 || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430, o = e === 1366 && n === 766 || e === 1366 && n === 768 || e === 1280 && n === 720 || e === 1440 && n === 900;
-    return /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-      /* @__PURE__ */ a("h1", { style: {
+    return /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+      /* @__PURE__ */ l("h1", { style: {
         ...u.gmHeadline1,
         marginTop: "0px",
         marginBottom: t ? "2px" : "10px",
         fontSize: r ? "32px" : "clamp(28px, 4vw, 40px)"
       }, children: "Game Over 🎯" }),
-      /* @__PURE__ */ b("h2", { style: {
+      /* @__PURE__ */ y("h2", { style: {
         ...u.gmHeadline2,
         marginTop: "0px",
         marginBottom: t ? "2px" : "16px",
@@ -797,7 +798,7 @@ function kt(f = {}) {
         " out of ",
         E
       ] }),
-      /* @__PURE__ */ b("p", { style: {
+      /* @__PURE__ */ y("p", { style: {
         ...u.gmBodyM,
         color: "#10b981",
         marginTop: t ? "0px" : "12px",
@@ -807,12 +808,12 @@ function kt(f = {}) {
         "Best score: ",
         ae
       ] }),
-      /* @__PURE__ */ b("div", { style: {
+      /* @__PURE__ */ y("div", { style: {
         display: "flex",
         gap: t || m && e <= 375 && n <= 667 ? "6px" : "12px",
         marginTop: t || m && e <= 375 && n <= 667 ? "2px" : o || Ee ? "12px" : "24px"
       }, children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "button",
           {
             onClick: () => {
@@ -827,7 +828,7 @@ function kt(f = {}) {
             children: "🔁 Play again"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "button",
           {
             onClick: () => {
@@ -848,31 +849,28 @@ function kt(f = {}) {
       if (m && e > n || n < 700 || !Se)
         return null;
       const t = s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
-      return (
-        // ensure logo is positioned inside the square container
-        /* @__PURE__ */ a("div", { style: { ...u.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ b("picture", { children: [
-          /* @__PURE__ */ a(
-            "source",
-            {
-              srcSet: `${t}.svg`,
-              type: "image/svg+xml"
-            }
-          ),
-          /* @__PURE__ */ a(
-            "img",
-            {
-              src: `${t}.png`,
-              alt: "SPEAKID Logo",
-              style: u.gmLogoImg,
-              loading: "lazy"
-            }
-          )
-        ] }) })
-      );
+      return /* @__PURE__ */ l("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ y("picture", { children: [
+        /* @__PURE__ */ l(
+          "source",
+          {
+            srcSet: `${t}.svg`,
+            type: "image/svg+xml"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "img",
+          {
+            src: `${t}.png`,
+            alt: "SPEAKID Logo",
+            style: u.gmLogoImg,
+            loading: "lazy"
+          }
+        )
+      ] }) });
     },
     [m, Se, s, $, H]
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       ref: M,
@@ -891,7 +889,7 @@ function kt(f = {}) {
         right: 0,
         bottom: 0
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ y(
         "div",
         {
           style: {
@@ -910,28 +908,30 @@ function kt(f = {}) {
             transform: `scale(${ze})`
             // ✅ Применяем масштаб для широких экранов
           },
-          children: /* @__PURE__ */ a(
-            "div",
-            {
-              style: {
-                transform: "translateZ(0)",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ b("div", { id: "magic-sentence-root", children: [
-                lt,
-                S === "select" ? nt() : null,
-                S === "time" ? rt() : null,
-                S === "type" ? ot() : null,
-                S === "getready" ? it() : null,
-                S === "play" ? st() : null,
-                S === "results" ? at() : null
-              ] })
-            }
-          )
+          children: [
+            lt,
+            /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  transform: "translateZ(0)",
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ y("div", { id: "magic-sentence-root", children: [
+                  S === "select" ? nt() : null,
+                  S === "time" ? rt() : null,
+                  S === "type" ? ot() : null,
+                  S === "getready" ? it() : null,
+                  S === "play" ? st() : null,
+                  S === "results" ? at() : null
+                ] })
+              }
+            )
+          ]
         }
       )
     }
@@ -957,7 +957,7 @@ class It extends pt {
     this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
   };
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ b("div", { style: {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ y("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -969,9 +969,9 @@ class It extends pt {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ a("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ a("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ l("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
+      /* @__PURE__ */ l("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
+      /* @__PURE__ */ l(
         "button",
         {
           onClick: this.handleReset,
@@ -990,9 +990,9 @@ class It extends pt {
           children: "🔄 Restart Game"
         }
       ),
-      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ b("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
-        /* @__PURE__ */ a("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
-        /* @__PURE__ */ b("pre", { style: {
+      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ y("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
+        /* @__PURE__ */ l("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ y("pre", { style: {
           backgroundColor: "#f3f4f6",
           padding: "12px",
           borderRadius: "4px",