npm - speakid-build-a-sentence - Versions diffs - 1.0.20 → 1.0.22 - Mend

speakid-build-a-sentence 1.0.20 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/Game.d.ts.map +1 -1
package/dist/speakid-build-a-sentence.cjs.js +3 -3
package/dist/speakid-build-a-sentence.cjs.js.map +1 -1
package/dist/speakid-build-a-sentence.es.js +305 -272
package/dist/speakid-build-a-sentence.es.js.map +1 -1
package/package.json +1 -1

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

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as y } from "react/jsx-runtime";
-import { useState as p, useCallback as we, useRef as Z, useEffect as J, Component as sn } from "react";
-const dn = `
+import { useState as h, useCallback as we, useRef as Q, useEffect as V, useMemo as dn, Component as an } from "react";
+const ln = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -36,9 +36,9 @@ const dn = `
 `;
 if (typeof document < "u" && !document.getElementById("game-keyframes")) {
   const w = document.createElement("style");
-  w.id = "game-keyframes", w.innerHTML = dn, document.head.appendChild(w);
+  w.id = "game-keyframes", w.innerHTML = ln, document.head.appendChild(w);
 }
-const Te = {
+const De = {
   spin: {
     animation: "spin 1.4s linear infinite"
   },
@@ -168,60 +168,60 @@ const Te = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Te.spin
+    ...De.spin
   },
   // ===== Анимационные стили =====
-  ...Te
-}, an = () => {
-  const [w, s] = p([]), v = we((D, R, f) => {
-    const b = [];
-    D.trim() || b.push({
+  ...De
+}, cn = () => {
+  const [w, s] = h([]), H = we((z, E, m) => {
+    const W = [];
+    z.trim() || W.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), D.length > 41 && b.push({
+    }), z.length > 41 && W.push({
       type: "length",
-      message: `Sentence is too long (${D.length}/41 characters)`
-    }), D && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(D) && b.push({
+      message: `Sentence is too long (${z.length}/41 characters)`
+    }), z && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(z) && W.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const k = f.findIndex((z, _) => _ !== R && z.toLowerCase().trim() === D.toLowerCase().trim());
-    return k !== -1 && b.push({
+    const k = m.findIndex((R, ee) => ee !== E && R.toLowerCase().trim() === z.toLowerCase().trim());
+    return k !== -1 && W.push({
       type: "duplicate",
       message: `Duplicate sentence (same as sentence ${k + 1})`
-    }), s(b), {
-      isValid: b.length === 0,
-      errors: b
+    }), s(W), {
+      isValid: W.length === 0,
+      errors: W
     };
-  }, []), de = we((D) => {
-    const R = [];
-    return D.forEach((f, b) => {
-      const x = v(f, b, D);
-      R.push(...x.errors.map((k) => ({
+  }, []), le = we((z) => {
+    const E = [];
+    return z.forEach((m, W) => {
+      const b = H(m, W, z);
+      E.push(...b.errors.map((k) => ({
         ...k,
-        message: `Sentence ${b + 1}: ${k.message}`
+        message: `Sentence ${W + 1}: ${k.message}`
       })));
     }), {
-      isValid: R.length === 0,
-      errors: R
+      isValid: E.length === 0,
+      errors: E
     };
-  }, [v]), ae = we(() => {
+  }, [H]), ce = we(() => {
     s([]);
   }, []);
   return {
     errors: w,
-    validateSentence: v,
-    validateAllSentences: de,
-    clearErrors: ae
+    validateSentence: H,
+    validateAllSentences: le,
+    clearErrors: ce
   };
-}, ln = (w, s, v) => s && v ? `${w} word "${s}" ${v}` : s ? `${w} word "${s}"` : w, cn = (w, s, v = ["Enter", " "]) => {
-  v.includes(w.key) && (w.preventDefault(), s());
+}, un = (w, s, H) => s && H ? `${w} word "${s}" ${H}` : s ? `${w} word "${s}"` : w, hn = (w, s, H = ["Enter", " "]) => {
+  H.includes(w.key) && (w.preventDefault(), s());
 }, L = (w) => {
   const s = document.createElement("div");
   s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = w, setTimeout(() => {
     document.body.removeChild(s);
   }, 1e3);
-}, hn = () => {
+}, gn = () => {
   const w = document.createElement("style");
   w.id = "magic-sentence-reset", w.textContent = `
     #magic-sentence-root, #magic-sentence-root * {
@@ -253,9 +253,9 @@ const Te = {
   const s = document.getElementById("magic-sentence-reset");
   s && s.remove(), document.head.appendChild(w);
 }, pn = (w) => [...w].sort(() => Math.random() - 0.5);
-function xn(w = {}) {
-  const { logoUrl: s, showLogo: v = !0 } = w, de = Z(null), { validateAllSentences: ae, errors: D } = an(), R = () => c || window.innerWidth < 768, f = () => c || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, b = (e = "medium") => {
-    if (!f())
+function bn(w = {}) {
+  const { logoUrl: s, showLogo: H = !0 } = w, le = Q(null), { validateAllSentences: ce, errors: z } = cn(), E = () => a || window.innerWidth < 768, m = () => a || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, W = (e = "medium") => {
+    if (!m())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -282,52 +282,52 @@ function xn(w = {}) {
         };
     }
   };
-  J(() => (hn(), () => {
+  V(() => (gn(), () => {
     document.documentElement.style.overflow = "", document.body.style.overflow = "";
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [x, k] = p("select"), [z, _] = p(null), [fe, me] = p(null), [I, Q] = p([]), [E, xe] = p(0), [le, ye] = p([]), [W, ce] = p([]), [$, be] = p(20), [U, M] = p(0), [gn, We] = p(null), [A, C] = p(null), [a, ee] = p(!1), [ne, te] = p(!1), [he, De] = p(
+  const [b, k] = h("select"), [R, ee] = h(null), [fe, me] = h(null), [T, ne] = h([]), [C, xe] = h(0), [ue, ye] = h([]), [S, he] = h([]), [U, be] = h(20), [J, B] = h(0), [wn, We] = h(null), [A, v] = h(null), [c, te] = h(!1), [Y, K] = h(!1), [ge, Re] = h(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), Y = Z(null), Re = Z(null), Se = Z(0), [m, B] = p({ list: null, id: null, side: null }), [c, ze] = p(!1), [Ee, ie] = p(1), [ke, re] = p(null), [Pe, Be] = p(!1), [O, Le] = p(!1), [N, Me] = p(!1), [G, Ae] = p(!1), [X, $e] = p(!1), [j, Oe] = p(!1), [F, Ne] = p(!1), [q, Ge] = p(!1), [V, Xe] = p(!1), [un, je] = p(!1), [wn, Fe] = p(!1);
-  J(() => {
+  ), Z = Q(null), ze = Q(null), Se = Q(0), [x, M] = h({ list: null, id: null, side: null }), [a, Ee] = h(!1), [Pe, ie] = h(1), [ke, re] = h(null), [Be, Me] = h(!1), [$, Le] = h(!1), [O, Ae] = h(!1), [N, $e] = h(!1), [G, Oe] = h(!1), [X, Ne] = h(!1), [j, Ge] = h(!1), [F, Xe] = h(!1), [q, je] = h(!1), [fn, Fe] = h(!1), [mn, qe] = h(!1);
+  V(() => {
     const e = () => {
-      const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, r = n < 700, h = t / n > 1.8, u = t === 768 && n === 1024, o = t === 1024 && n === 768, d = t === 820 && n === 1180, T = t === 1180 && n === 820, H = t === 540 && n === 720, se = t === 720 && n === 540, He = t === 1024 && n === 1366, Ie = t === 1366 && n === 1024, Ce = t >= 1200 && n >= 600 && !i;
-      Be(Ce), Le(u), Me(o), Ae(d), $e(T), Oe(H), Ne(se), Ge(He), Xe(Ie), Fe(h);
-      const on = i && t > n || i || // ✅ ВСЕ мобильные устройства (включая portrait)
-      n < 700 || h || // ✅ Широкие экраны
-      t === 1366 && n === 766 || t === 1366 && n === 768 || t === 1280 && n === 720 || t === 1440 && n === 900 || u || o || d || T || H || se || He || Ie || Ce;
-      if (je(on), ze(i), i)
+      const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, r = n < 700, u = t / n > 1.8, p = t === 768 && n === 1024, o = t === 1024 && n === 768, d = t === 820 && n === 1180, D = t === 1180 && n === 820, I = t === 540 && n === 720, ae = t === 720 && n === 540, Ie = t === 1024 && n === 1366, Te = t === 1366 && n === 1024, Ce = t >= 1200 && n >= 600 && !i;
+      Me(Ce), Le(p), Ae(o), $e(d), Oe(D), Ne(I), Ge(ae), Xe(Ie), je(Te), qe(u);
+      const sn = i && t > n || i || // ✅ ВСЕ мобильные устройства (включая portrait)
+      n < 700 || u || // ✅ Широкие экраны
+      t === 1366 && n === 766 || t === 1366 && n === 768 || t === 1280 && n === 720 || t === 1440 && n === 900 || p || o || d || D || I || ae || Ie || Te || Ce;
+      if (Fe(sn), Ee(i), i)
         re(null), ie(1);
       else if (r)
         re(null), ie(1);
-      else if (h) {
-        const ue = Math.min(1e3, Math.min(t, n) * 0.9);
-        re(ue), ie(0.85);
+      else if (u) {
+        const pe = Math.min(1e3, Math.min(t, n) * 0.9);
+        re(pe), ie(0.85);
       } else {
-        const ue = Math.min(1e3, Math.min(t, n) * 0.9);
-        re(ue), ie(1);
+        const pe = Math.min(1e3, Math.min(t, n) * 0.9);
+        re(pe), ie(1);
       }
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
   const oe = (e, t, n, i) => {
-    if (a) return;
-    let r = [...le], h = [...W];
-    const u = e === "bank" ? r : h, o = t === "bank" ? r : h, d = u.findIndex((se) => se.id === n);
+    if (c) return;
+    let r = [...ue], u = [...S];
+    const p = e === "bank" ? r : u, o = t === "bank" ? r : u, d = p.findIndex((ae) => ae.id === n);
     if (d === -1) return;
-    const [T] = u.splice(d, 1);
-    let H = i;
-    e === t && H !== null && H !== void 0 && H > d && (H = H - 1), H == null || H < 0 || H > o.length ? o.push(T) : o.splice(H, 0, T), e === "bank" ? r = u : h = u, t === "bank" ? r = o : h = o, ye(r), ce(h);
-  }, K = (e, t, n) => {
-    if (e.preventDefault(), a) {
-      B({ list: null, id: null, side: null });
+    const [D] = p.splice(d, 1);
+    let I = i;
+    e === t && I !== null && I !== void 0 && I > d && (I = I - 1), I == null || I < 0 || I > o.length ? o.push(D) : o.splice(I, 0, D), e === "bank" ? r = p : u = p, t === "bank" ? r = o : u = o, ye(r), he(u);
+  }, _ = (e, t, n) => {
+    if (e.preventDefault(), c) {
+      M({ list: null, id: null, side: null });
       return;
     }
     const i = e.dataTransfer.getData("application/x-token") || (() => {
       const r = e.dataTransfer.getData("text/plain");
       if (!r) return "";
-      const h = le.some((d) => d.id === r), u = W.some((d) => d.id === r), o = h ? "bank" : u ? "selected" : null;
+      const u = ue.some((d) => d.id === r), p = S.some((d) => d.id === r), o = u ? "bank" : p ? "selected" : null;
       return o ? JSON.stringify({ from: o, id: r }) : "";
     })();
     if (i) {
@@ -337,90 +337,103 @@ function xn(w = {}) {
         oe(r.from, t, r.id, n);
       } catch {
       }
-      B({ list: null, id: null, side: null });
+      M({ list: null, id: null, side: null });
     }
-  }, qe = (e) => {
-    _(e), Re.current = e, Q(Array(e).fill("")), k("time");
   }, Ve = (e) => {
+    ee(e), ze.current = e, ne(Array(e).fill("")), k("time");
+  }, Ue = (e) => {
     me(e), k("type");
   }, Je = (e, t) => {
     if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
       return;
-    const i = [...I];
-    i[e] = t, Q(i);
-    const r = ae(i);
+    const i = [...T];
+    i[e] = t, ne(i);
+    const r = ce(i);
     r.isValid || console.warn("Validation errors:", r.errors);
-  }, Ue = (e) => e.trim().replace(/\s+/g, " "), ve = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ye = () => {
-    I.some((t) => t.trim().length === 0) || (Q((t) => t.map((n) => Ue(n))), M(0), xe(0), Se.current = 0, We(null), k("getready"));
+  }, Ye = (e) => e.trim().replace(/\s+/g, " "), ve = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ke = () => {
+    T.some((t) => t.trim().length === 0) || (ne((t) => t.map((n) => Ye(n))), B(0), xe(0), Se.current = 0, We(null), k("getready"));
   };
-  J(() => {
-    if (x === "getready") {
-      const e = setTimeout(() => pe(0), 3e3);
+  V(() => {
+    if (b === "getready") {
+      const e = setTimeout(() => se(0), 3e3);
       return () => clearTimeout(e);
     }
-  }, [x]);
-  const pe = (e) => {
-    const t = I[e];
+  }, [b]);
+  const se = (e) => {
+    const t = T[e];
     if (!t) return;
     const i = pn(
       t.trim().split(/\s+/).filter(Boolean)
-    ).map((r, h) => ({
-      id: `${Date.now()}-${e}-${h}-${Math.random().toString(36).slice(2)}`,
+    ).map((r, u) => ({
+      id: `${Date.now()}-${e}-${u}-${Math.random().toString(36).slice(2)}`,
       text: r
     }));
-    ye(i), ce([]), xe(e), Se.current = e, be(fe || 20), C(null), ee(!1), te(!1), k("play");
-  }, S = Z(null);
-  J(() => {
-    if (x !== "play" || a) {
-      S.current !== null && (window.clearTimeout(S.current), S.current = null);
+    ye(i), he([]), xe(e), Se.current = e, be(fe || 20), v(null), te(!1), K(!1), k("play");
+  }, f = Q(null);
+  V(() => {
+    if (b !== "play" || c) {
+      f.current !== null && (window.clearTimeout(f.current), f.current = null);
       return;
     }
-    const e = I[E];
+    const e = T[C];
     if (!e) {
-      C(null), S.current !== null && (window.clearTimeout(S.current), S.current = null);
+      v(null), f.current !== null && (window.clearTimeout(f.current), f.current = null);
       return;
     }
-    if (W.length === 0) {
-      C(null), S.current !== null && (window.clearTimeout(S.current), S.current = null);
+    if (S.length === 0) {
+      v(null), f.current !== null && (window.clearTimeout(f.current), f.current = null);
       return;
     }
-    const t = e.trim().split(/\s+/), n = W.map((r) => r.text);
-    if (n.length === t.length && n.every((r, h) => r === t[h]))
-      C("correct"), ne || (te(!0), M((r) => r + 1), P("correct"), L("Correct! Well done!"));
-    else {
-      S.current !== null && (window.clearTimeout(S.current), S.current = null);
-      const r = t.filter((d) => !n.includes(d)).length, h = n.filter((d) => !t.includes(d)).length, u = t.filter((d, T) => d !== n[T]).length, o = r + h + u;
-      C(o === 1 ? "almost" : "wrong"), ne && (te(!1), M((d) => Math.max(0, d - 1)));
-    }
+    const t = e.trim().split(/\s+/), n = S.map((r) => r.text);
+    if (n.length === t.length && n.every((r, u) => r === t[u]))
+      f.current !== null && (window.clearTimeout(f.current), f.current = null), v("correct"), Y || (K(!0), B((r) => r + 1), P("correct"), L("Correct! Well done!"));
+    else if (n.length >= t.length) {
+      f.current !== null && (window.clearTimeout(f.current), f.current = null);
+      const r = t.filter((d) => !n.includes(d)).length, u = n.filter((d) => !t.includes(d)).length, p = t.filter((d, D) => d !== n[D]).length, o = r + u + p;
+      v(o === 1 ? "almost" : "wrong"), Y && (K(!1), B((d) => Math.max(0, d - 1)));
+    } else
+      v(null), f.current !== null && (window.clearTimeout(f.current), f.current = null);
     return () => {
-      S.current !== null && (window.clearTimeout(S.current), S.current = null);
+      f.current !== null && (window.clearTimeout(f.current), f.current = null);
     };
-  }, [x, W, I, E, a, A, ne, z]), J(() => {
-    if (x === "play" && !a)
-      if (Y.current !== null && window.clearTimeout(Y.current), $ > 0)
-        Y.current = window.setTimeout(() => be((e) => e - 1), 1e3);
+  }, [b, S, T, C, c, A, Y, R]), V(() => {
+    if (b === "play" && !c)
+      if (Z.current !== null && window.clearTimeout(Z.current), U > 0)
+        Z.current = window.setTimeout(() => be((e) => e - 1), 1e3);
       else {
-        ee(!0);
-        const t = I[E].trim().split(/\s+/), n = W.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, h = t.filter((o, d) => o !== n[d]).length, u = i + r + h;
-        u === 0 ? (C("correct"), ne || (te(!0), M((o) => o + 1)), P("correct"), L("Correct! Well done!")) : u === 1 ? (C("almost"), P("half"), L("Almost correct! Just one mistake.")) : (C("wrong"), P("wrong"), L("Not quite right. Keep trying!"));
+        te(!0);
+        const e = T[C];
+        if (!e) {
+          v(null);
+          return;
+        }
+        const t = e.trim().split(/\s+/), n = S.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, u = t.filter((o, d) => o !== n[d]).length, p = i + r + u;
+        p === 0 ? (v("correct"), Y || (K(!0), B((o) => o + 1)), P("correct"), L("Correct! Well done!")) : p === 1 ? (v("almost"), B((o) => o + 0.5), P("half"), L("Almost correct! Just one mistake.")) : (v("wrong"), P("wrong"), L("Not quite right. Keep trying!"));
       }
     return () => {
-      Y.current !== null && window.clearTimeout(Y.current);
+      Z.current !== null && window.clearTimeout(Z.current);
     };
-  }, [x, $, a, I, E, W]);
-  const Ke = (e = !0) => {
-    if (a && e) {
-      E + 1 < (z || 0) ? pe(E + 1) : (k("results"), setTimeout(() => ge(), 600));
-      return;
-    }
-    if (e && !a) {
-      const n = I[E].trim().split(/\s+/), i = W.map((d) => d.text), r = n.filter((d) => !i.includes(d)).length, h = i.filter((d) => !n.includes(d)).length, u = n.filter((d, T) => d !== i[T]).length, o = r + h + u;
-      o === 0 && $ > 0 ? (M((d) => d + 1), C("correct"), P("correct"), L("Correct! Well done!")) : o === 1 ? (M((d) => d + 0.5), C("almost"), P("half"), L("Almost correct! Just one mistake.")) : (C("wrong"), P("wrong"), L("Not quite right. Keep trying!")), E + 1 < (z || 0) ? setTimeout(() => pe(E + 1), 800) : (k("results"), setTimeout(() => ge(), 600));
+  }, [b, U, c, T, C, S, Y]);
+  const Ze = (e = !0) => {
+    if (e) {
+      if (c) {
+        C + 1 < (R || 0) ? se(C + 1) : (k("results"), setTimeout(() => de(), 600));
+        return;
+      }
+      const t = T[C];
+      if (!t) {
+        C + 1 < (R || 0) ? se(C + 1) : (k("results"), setTimeout(() => de(), 600));
+        return;
+      }
+      const n = t.trim().split(/\s+/), i = S.map((d) => d.text), r = n.filter((d) => !i.includes(d)).length, u = i.filter((d) => !n.includes(d)).length, p = n.filter((d, D) => d !== i[D]).length, o = r + u + p;
+      o === 0 ? (B((d) => d + 1), v("correct"), K(!0), P("correct"), L("Correct! Well done!")) : o === 1 ? (B((d) => d + 0.5), v("almost"), P("half"), L("Almost correct! Just one mistake.")) : (v("wrong"), P("wrong"), L("Not quite right. Keep trying!")), C + 1 < (R || 0) ? setTimeout(() => se(C + 1), 800) : setTimeout(() => {
+        k("results"), setTimeout(() => de(), 600);
+      }, 800);
     }
   };
-  J(() => {
-    x === "results" && U > he && (De(U), localStorage.setItem("magicSentenceBest", String(U)));
-  }, [x, U, he]);
+  V(() => {
+    b === "results" && J > ge && (Re(J), localStorage.setItem("magicSentenceBest", String(J)));
+  }, [b, J, ge]);
   const P = (e) => {
     const t = new (window.AudioContext || window.webkitAudioContext)(), n = t.createOscillator(), i = t.createGain();
     switch (n.connect(i), i.connect(t.destination), e) {
@@ -441,36 +454,36 @@ function xn(w = {}) {
         break;
     }
     i.gain.setValueAtTime(0.1, t.currentTime), n.start(), n.stop(t.currentTime + 0.2);
-  }, ge = () => {
+  }, de = () => {
     const t = Date.now() + 2500, n = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], i = document.createElement("canvas"), r = i.getContext("2d");
     i.width = window.innerWidth, i.height = window.innerHeight, i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.pointerEvents = "none", document.body.appendChild(i);
-    const h = Array.from({ length: 100 }).map(() => ({
+    const u = Array.from({ length: 100 }).map(() => ({
       x: Math.random() * i.width,
       y: Math.random() * i.height - i.height,
       size: 6 + Math.random() * 6,
       color: n[Math.floor(Math.random() * n.length)],
       speed: 2 + Math.random() * 4,
       tilt: Math.random() * 2 * Math.PI
-    })), u = () => {
-      r.clearRect(0, 0, i.width, i.height), h.forEach((o) => {
+    })), p = () => {
+      r.clearRect(0, 0, i.width, i.height), u.forEach((o) => {
         r.fillStyle = o.color, r.beginPath(), r.ellipse(o.x, o.y, o.size, o.size / 2, o.tilt, 0, 2 * Math.PI), r.fill(), o.y += o.speed, o.x += Math.sin(o.tilt);
-      }), Date.now() < t ? requestAnimationFrame(u) : document.body.removeChild(i);
+      }), Date.now() < t ? requestAnimationFrame(p) : document.body.removeChild(i);
     };
-    u();
-  }, Ze = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
+    p();
+  }, _e = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
     /* @__PURE__ */ l("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
     /* @__PURE__ */ l("p", { style: g.gmBodyM, children: "Select number of rounds" }),
     /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: m() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [3, 4, 5].map((e) => /* @__PURE__ */ y(
       "button",
       {
-        onClick: () => qe(e),
+        onClick: () => Ve(e),
         style: {
           ...g.gmButton,
-          ...b("medium")
+          ...W("medium")
         },
         children: [
           e,
@@ -479,20 +492,20 @@ function xn(w = {}) {
       },
       e
     )) })
-  ] }), _e = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
+  ] }), Qe = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
     /* @__PURE__ */ l("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
     /* @__PURE__ */ l("p", { style: g.gmBodyM, children: "Select time per round" }),
     /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: m() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [15, 20, 30].map((e) => /* @__PURE__ */ y(
       "button",
       {
-        onClick: () => Ve(e),
+        onClick: () => Ue(e),
         style: {
           ...g.gmButton,
-          ...b("medium")
+          ...W("medium")
         },
         children: [
           e,
@@ -501,12 +514,12 @@ function xn(w = {}) {
       },
       e
     )) })
-  ] }), Qe = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
+  ] }), en = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
     /* @__PURE__ */ y("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
-      z,
+      R,
       " sentence",
-      z && z > 1 ? "s" : "",
+      R && R > 1 ? "s" : "",
       " for your student"
     ] }),
     /* @__PURE__ */ l("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
@@ -520,7 +533,7 @@ function xn(w = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: I.map((e, t) => /* @__PURE__ */ l(
+    }, children: T.map((e, t) => /* @__PURE__ */ l(
       "input",
       {
         value: e,
@@ -528,8 +541,8 @@ function xn(w = {}) {
         onChange: (n) => Je(t, n.target.value),
         style: {
           ...g.gmInput,
-          padding: f() ? "8px 12px" : "12px 16px",
-          fontSize: f() ? "14px" : "16px",
+          padding: m() ? "8px 12px" : "12px 16px",
+          fontSize: m() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
@@ -541,54 +554,54 @@ function xn(w = {}) {
     /* @__PURE__ */ l(
       "button",
       {
-        onClick: Ye,
-        disabled: I.some((e) => e.trim().length === 0),
+        onClick: Ke,
+        disabled: T.some((e) => e.trim().length === 0),
         style: {
           ...g.gmButton,
           marginTop: 30,
-          background: I.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
-          cursor: I.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
-          ...b("large")
+          background: T.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
+          cursor: T.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
+          ...W("large")
         },
         children: "PLAY"
       }
     )
-  ] }), en = () => /* @__PURE__ */ y("div", { style: g.gmReadyWrapper, children: [
+  ] }), nn = () => /* @__PURE__ */ y("div", { style: g.gmReadyWrapper, children: [
     /* @__PURE__ */ l("h1", { style: {
       ...g.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
     /* @__PURE__ */ l("div", { style: g.gmHourglass, children: "⏳" })
-  ] }), nn = () => /* @__PURE__ */ y("div", { style: g.gmGameLayout, children: [
+  ] }), tn = () => /* @__PURE__ */ y("div", { style: g.gmGameLayout, children: [
     /* @__PURE__ */ y("h2", { style: {
-      marginBottom: f() ? "5px" : "10px",
-      fontSize: f() ? "16px" : "20px"
+      marginBottom: m() ? "5px" : "10px",
+      fontSize: m() ? "16px" : "20px"
     }, children: [
       "Round ",
-      E + 1,
+      C + 1,
       "/",
-      z,
+      R,
       " — ",
-      a ? "TIME'S UP!" : `Time: ${$}s`
+      c ? "TIME'S UP!" : `Time: ${U}s`
     ] }),
     /* @__PURE__ */ l(
       "div",
       {
         style: {
           width: "60%",
-          height: f() ? "8px" : "14px",
+          height: m() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: f() ? "10px" : "20px"
+          marginBottom: m() ? "10px" : "20px"
         },
         children: /* @__PURE__ */ l(
           "div",
           {
             style: {
               height: "100%",
-              width: `${$ / (fe || 20) * 100}%`,
-              background: $ <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${U / (fe || 20) * 100}%`,
+              background: U <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
@@ -599,26 +612,26 @@ function xn(w = {}) {
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
-        onDrop: (e) => K(e, "bank", null),
+        onDrop: (e) => _(e, "bank", null),
         style: {
           display: "flex",
-          flexWrap: R() ? "wrap" : "nowrap",
-          gap: c || window.innerWidth < 768 ? "6px" : "10px",
+          flexWrap: E() ? "wrap" : "nowrap",
+          gap: a || window.innerWidth < 768 ? "6px" : "10px",
           justifyContent: "center",
-          marginBottom: c || window.innerWidth < 768 ? "15px" : "30px",
-          padding: c || window.innerWidth < 768 ? "5px" : "10px",
+          marginBottom: a || window.innerWidth < 768 ? "15px" : "30px",
+          padding: a || window.innerWidth < 768 ? "5px" : "10px",
           width: "100%",
           boxSizing: "border-box"
         },
-        children: le.map((e, t) => /* @__PURE__ */ l(
+        children: ue.map((e, t) => /* @__PURE__ */ l(
           "div",
           {
-            draggable: !a,
+            draggable: !c,
             role: "button",
-            tabIndex: a ? -1 : 0,
-            "aria-label": a ? `Word: ${e.text} (time expired)` : ln("Drag word", e.text, "to build sentence"),
+            tabIndex: c ? -1 : 0,
+            "aria-label": c ? `Word: ${e.text} (time expired)` : un("Drag word", e.text, "to build sentence"),
             onDragStart: (n) => {
-              if (a) {
+              if (c) {
                 n.preventDefault();
                 return;
               }
@@ -628,36 +641,36 @@ function xn(w = {}) {
               ), n.dataTransfer.setData("text/plain", e.id), L(`Dragging word: ${e.text}`);
             },
             onKeyDown: (n) => {
-              a || cn(n, () => oe("bank", "selected", e.id, null));
+              c || hn(n, () => oe("bank", "selected", e.id, null));
             },
             onDragOver: (n) => n.preventDefault(),
             onDrop: (n) => {
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, h = n.clientX > r ? t + 1 : t;
-              B({ list: null, id: null, side: null }), n.stopPropagation(), K(n, "bank", h);
+              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, u = n.clientX > r ? t + 1 : t;
+              M({ list: null, id: null, side: null }), n.stopPropagation(), _(n, "bank", u);
             },
             onDragEnter: (n) => {
-              if (a) return;
+              if (c) return;
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
-              B({ list: "bank", id: e.id, side: n.clientX > r ? "right" : "left" });
+              M({ list: "bank", id: e.id, side: n.clientX > r ? "right" : "left" });
             },
-            onDragLeave: () => B({ list: null, id: null, side: null }),
+            onDragLeave: () => M({ list: null, id: null, side: null }),
             onClick: () => {
-              a || oe("bank", "selected", e.id, null);
+              c || oe("bank", "selected", e.id, null);
             },
             style: {
-              padding: c || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
-              borderRadius: c || window.innerWidth < 768 ? "6px" : "10px",
+              padding: a || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: a || window.innerWidth < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: a ? "#f0f0f0" : "#f9f9f9",
-              cursor: a ? "not-allowed" : m.list === "bank" && m.id === e.id ? "grabbing" : "grab",
-              fontSize: c || window.innerWidth < 768 ? "12px" : "18px",
-              ...m.list === "bank" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
-              ...m.list === "bank" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
+              background: c ? "#f0f0f0" : "#f9f9f9",
+              cursor: c ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
+              fontSize: a || window.innerWidth < 768 ? "12px" : "18px",
+              ...x.list === "bank" && x.id === e.id && x.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
+              ...x.list === "bank" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: a ? 0.6 : 1,
+              opacity: c ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
-              ...m.list === "bank" && m.id === e.id ? {
+              ...x.list === "bank" && x.id === e.id ? {
                 transform: "scale(1.05)",
                 boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
               } : {}
@@ -675,17 +688,17 @@ function xn(w = {}) {
         onDrop: (e) => {
           const t = e.currentTarget.getBoundingClientRect(), n = Array.from(e.currentTarget.children);
           if (n.length === 0) {
-            K(e, "selected", 0);
+            _(e, "selected", 0);
             return;
           }
-          let i = W.length, r = 1 / 0;
-          n.forEach((h, u) => {
-            const o = h.getBoundingClientRect(), d = o.left + o.width / 2, T = Math.abs(e.clientX - d);
-            T < r && (r = T, i = e.clientX < d ? u : u + 1);
-          }), e.clientX > t.right - 30 && (i = W.length), e.clientX < t.left + 30 && (i = 0), K(e, "selected", i);
+          let i = S.length, r = 1 / 0;
+          n.forEach((u, p) => {
+            const o = u.getBoundingClientRect(), d = o.left + o.width / 2, D = Math.abs(e.clientX - d);
+            D < r && (r = D, i = e.clientX < d ? p : p + 1);
+          }), e.clientX > t.right - 30 && (i = S.length), e.clientX < t.left + 30 && (i = 0), _(e, "selected", i);
         },
         style: {
-          minHeight: c || window.innerWidth < 768 ? "50px" : "70px",
+          minHeight: a || window.innerWidth < 768 ? "50px" : "70px",
           width: "auto",
           // Автоматическая ширина в зависимости от содержимого
           maxWidth: "none",
@@ -693,23 +706,23 @@ function xn(w = {}) {
           minWidth: "245px",
           // Минимальная ширина для растягивания
           border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
-          borderRadius: c || window.innerWidth < 768 ? "8px" : "12px",
-          padding: c || window.innerWidth < 768 ? "8px" : "12px",
+          borderRadius: a || window.innerWidth < 768 ? "8px" : "12px",
+          padding: a || window.innerWidth < 768 ? "8px" : "12px",
           display: "flex",
-          flexWrap: R() ? "wrap" : "nowrap",
+          flexWrap: E() ? "wrap" : "nowrap",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: `${ve(W.length)}px`,
+          fontSize: `${ve(S.length)}px`,
           background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
-          overflowX: R() ? "hidden" : "auto",
-          whiteSpace: R() ? "normal" : "nowrap"
+          overflowX: E() ? "hidden" : "auto",
+          whiteSpace: E() ? "normal" : "nowrap"
         },
-        children: W.map((e, t) => /* @__PURE__ */ l(
+        children: S.map((e, t) => /* @__PURE__ */ l(
           "span",
           {
-            draggable: !a,
+            draggable: !c,
             onDragStart: (n) => {
-              if (a) {
+              if (c) {
                 n.preventDefault();
                 return;
               }
@@ -720,38 +733,38 @@ function xn(w = {}) {
             },
             onDragOver: (n) => n.preventDefault(),
             onDrop: (n) => {
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, h = i.width * 0.25, u = n.clientX < r - h ? t : n.clientX > r + h || n.clientX > r ? t + 1 : t;
-              B({ list: null, id: null, side: null }), n.stopPropagation(), K(n, "selected", u);
+              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, u = i.width * 0.25, p = n.clientX < r - u ? t : n.clientX > r + u || n.clientX > r ? t + 1 : t;
+              M({ list: null, id: null, side: null }), n.stopPropagation(), _(n, "selected", p);
             },
             onDragEnter: (n) => {
-              if (a) return;
+              if (c) return;
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
-              B({ list: "selected", id: e.id, side: n.clientX > r ? "right" : "left" });
+              M({ list: "selected", id: e.id, side: n.clientX > r ? "right" : "left" });
             },
-            onDragLeave: () => B({ list: null, id: null, side: null }),
+            onDragLeave: () => M({ list: null, id: null, side: null }),
             onClick: () => {
-              a || oe("selected", "bank", e.id, null);
+              c || oe("selected", "bank", e.id, null);
             },
-            title: a ? "Time expired" : "Click to remove back to bank",
+            title: c ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: f() ? "4px 6px" : "6px 10px",
-              margin: f() ? "2px" : "4px",
-              borderRadius: f() ? "4px" : "8px",
-              background: a ? "#f0f0f0" : "#ffe9e7",
-              border: a ? "1px solid #ccc" : "1px solid #ec4c44",
-              ...m.list === "selected" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
-              ...m.list === "selected" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
-              cursor: a ? "not-allowed" : m.list === "selected" && m.id === e.id ? "grabbing" : "grab",
+              padding: m() ? "4px 6px" : "6px 10px",
+              margin: m() ? "2px" : "4px",
+              borderRadius: m() ? "4px" : "8px",
+              background: c ? "#f0f0f0" : "#ffe9e7",
+              border: c ? "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: c ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
-              fontSize: `${ve(W.length)}px`,
+              fontSize: `${ve(S.length)}px`,
               // Адаптивный размер шрифта для слов
               fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: a ? 0.6 : 1,
+              opacity: c ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
-              ...m.list === "selected" && m.id === e.id ? {
+              ...x.list === "selected" && x.id === e.id ? {
                 transform: "scale(1.05)",
                 boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
               } : {}
@@ -765,65 +778,65 @@ function xn(w = {}) {
     /* @__PURE__ */ l(
       "button",
       {
-        onClick: () => Ke(!0),
-        disabled: !a && W.length === 0,
+        onClick: () => Ze(!0),
+        disabled: !c && S.length === 0,
         style: {
-          marginTop: f() ? "15px" : "30px",
-          fontSize: f() ? "14px" : "20px",
-          padding: f() ? "6px 12px" : "10px 24px",
-          borderRadius: f() ? "8px" : "12px",
-          background: a || W.length > 0 ? "#ec4c44" : "#ccc",
+          marginTop: m() ? "15px" : "30px",
+          fontSize: m() ? "14px" : "20px",
+          padding: m() ? "6px 12px" : "10px 24px",
+          borderRadius: m() ? "8px" : "12px",
+          background: c || S.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: a || W.length > 0 ? "pointer" : "not-allowed"
+          cursor: c || S.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
     )
-  ] }), tn = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
+  ] }), rn = () => /* @__PURE__ */ y("div", { style: g.gmCenterScreen, children: [
     /* @__PURE__ */ l("h1", { style: {
       ...g.gmHeadline1,
-      marginTop: (c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V, "0px"),
-      marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "10px",
-      fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "32px" : "clamp(28px, 4vw, 40px)"
+      marginTop: (a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q, "0px"),
+      marginBottom: a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "10px",
+      fontSize: a && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "32px" : "clamp(28px, 4vw, 40px)"
     }, children: "Game Over 🎯" }),
     /* @__PURE__ */ y("h2", { style: {
       ...g.gmHeadline2,
-      marginTop: (c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V, "0px"),
-      marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "16px",
-      fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "18px" : "24px"
+      marginTop: (a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q, "0px"),
+      marginBottom: a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "16px",
+      fontSize: a && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "18px" : "24px"
     }, children: [
       "Your score: ",
-      U,
+      J,
       " out of ",
-      z
+      R
     ] }),
     /* @__PURE__ */ y("p", { style: {
       ...g.gmBodyM,
       color: "#10b981",
-      marginTop: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "0px" : "12px",
-      marginBottom: c && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || O || N || G || X || j || F || q || V ? "2px" : "16px",
-      fontSize: c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "14px" : "16px"
+      marginTop: a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "0px" : "12px",
+      marginBottom: a && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "16px",
+      fontSize: a && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "14px" : "16px"
     }, children: [
       "Best score: ",
-      he
+      ge
     ] }),
     /* @__PURE__ */ y("div", { style: {
       display: "flex",
-      gap: c && window.innerWidth > window.innerHeight || c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "6px" : "12px",
-      marginTop: c && window.innerWidth > window.innerHeight || c && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "2px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || Pe ? "12px" : "24px"
+      gap: a && window.innerWidth > window.innerHeight || a && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "6px" : "12px",
+      marginTop: a && window.innerWidth > window.innerHeight || a && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "2px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || Be ? "12px" : "24px"
     }, children: [
       /* @__PURE__ */ l(
         "button",
         {
           onClick: () => {
-            ge(), P("start"), setTimeout(() => {
-              k("getready"), We(null), ee(!1);
+            de(), P("start"), setTimeout(() => {
+              k("getready"), We(null), te(!1);
             }, 800);
           },
           style: {
             ...g.gmButton,
-            ...b("medium")
+            ...W("medium")
           },
           children: "🔁 Play again"
         }
@@ -832,21 +845,49 @@ function xn(w = {}) {
         "button",
         {
           onClick: () => {
-            P("click"), k("select"), _(null), me(null), Q([]), M(0), ce([]), ee(!1);
+            P("click"), k("select"), ee(null), me(null), ne([]), B(0), he([]), te(!1);
           },
           style: {
             ...g.gmButton,
-            ...b("medium")
+            ...W("medium")
           },
           children: "⬅️ Exit"
         }
       )
     ] })
-  ] }), rn = !c && v;
+  ] }), He = !a && H, on = dn(
+    () => {
+      if (a && window.innerWidth > window.innerHeight || window.innerHeight < 700 || !He)
+        return null;
+      const e = 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__ */ l("div", { style: { ...g.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ y("picture", { children: [
+          /* @__PURE__ */ l(
+            "source",
+            {
+              srcSet: `${e}.svg`,
+              type: "image/svg+xml"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "img",
+            {
+              src: `${e}.png`,
+              alt: "SPEAKID Logo",
+              style: g.gmLogoImg,
+              loading: "lazy"
+            }
+          )
+        ] }) })
+      );
+    },
+    [a, He, s]
+  );
   return /* @__PURE__ */ l(
     "div",
     {
-      ref: de,
+      ref: le,
       style: {
         width: "100%",
         height: "100%",
@@ -866,19 +907,19 @@ function xn(w = {}) {
         "div",
         {
           style: {
-            width: c ? "100%" : ke || 1e3,
-            height: c ? "100%" : ke || 1e3,
+            width: a ? "100%" : ke || 1e3,
+            height: a ? "100%" : ke || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: c ? 0 : "20px",
+            borderRadius: a ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: c ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: c ? "0 auto" : "unset",
+            boxShadow: a ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: a ? "0 auto" : "unset",
             position: "relative",
             // needed so absolute logo is inside the square
-            transform: `scale(${Ee})`
+            transform: `scale(${Pe})`
             // ✅ Применяем масштаб для широких экранов
           },
           children: /* @__PURE__ */ l(
@@ -893,21 +934,13 @@ function xn(w = {}) {
                 alignItems: "center"
               },
               children: /* @__PURE__ */ y("div", { id: "magic-sentence-root", children: [
-                rn ? /* @__PURE__ */ l("div", { style: g.gmLogoFixed, children: /* @__PURE__ */ l(
-                  "img",
-                  {
-                    src: s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo.png` : "/logo.png"),
-                    alt: "SPEAKID Logo",
-                    style: g.gmLogoImg,
-                    loading: "lazy"
-                  }
-                ) }) : null,
-                x === "select" ? Ze() : null,
-                x === "time" ? _e() : null,
-                x === "type" ? Qe() : null,
-                x === "getready" ? en() : null,
-                x === "play" ? nn() : null,
-                x === "results" ? tn() : null
+                on,
+                b === "select" ? _e() : null,
+                b === "time" ? Qe() : null,
+                b === "type" ? en() : null,
+                b === "getready" ? nn() : null,
+                b === "play" ? tn() : null,
+                b === "results" ? rn() : null
               ] })
             }
           )
@@ -916,7 +949,7 @@ function xn(w = {}) {
     }
   );
 }
-class yn extends sn {
+class Wn extends an {
   constructor(s) {
     super(s), this.state = { hasError: !1 };
   }
@@ -926,10 +959,10 @@ class yn extends sn {
       error: s
     };
   }
-  componentDidCatch(s, v) {
-    console.error("Game Error:", s, v), this.setState({
+  componentDidCatch(s, H) {
+    console.error("Game Error:", s, H), this.setState({
       error: s,
-      errorInfo: v
+      errorInfo: H
     });
   }
   handleReset = () => {
@@ -987,12 +1020,12 @@ class yn extends sn {
   }
 }
 export {
-  yn as ErrorBoundary,
-  xn as Game,
+  Wn as ErrorBoundary,
+  bn as Game,
   L as announceToScreenReader,
-  ln as createAriaLabel,
-  xn as default,
-  cn as handleKeyDown,
-  an as useValidation
+  un as createAriaLabel,
+  bn as default,
+  hn as handleKeyDown,
+  cn as useValidation
 };
 //# sourceMappingURL=speakid-build-a-sentence.es.js.map