speakid-build-a-sentence 1.0.30 → 1.0.32

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

@@ -1,6 +1,6 @@
-import { jsx as c, jsxs as b } from "react/jsx-runtime";
-import { useState as l, useCallback as ce, useRef as re, useEffect as j, useMemo as dt, Component as pt } from "react";
-const ut = `
+import { jsx as p, jsxs as b } from "react/jsx-runtime";
+import { useState as d, useCallback as de, useRef as re, useMemo as De, useEffect as X, Component as ft } from "react";
+const mt = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -35,10 +35,10 @@ const ut = `
   }
 `;
 if (typeof document < "u" && !document.getElementById("game-keyframes")) {
-  const f = document.createElement("style");
-  f.id = "game-keyframes", f.innerHTML = ut, document.head.appendChild(f);
+  const u = document.createElement("style");
+  u.id = "game-keyframes", u.innerHTML = mt, document.head.appendChild(u);
 }
-const Ce = {
+const Re = {
   spin: {
     animation: "spin 1.4s linear infinite"
   },
@@ -57,7 +57,7 @@ const Ce = {
   glow: {
     animation: "glow 1s ease-in-out infinite"
   }
-}, u = {
+}, f = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -169,62 +169,62 @@ const Ce = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Ce.spin
+    ...Re.spin
   },
   // ===== Анимационные стили =====
-  ...Ce
-}, ft = () => {
-  const [f, s] = l([]), v = ce((k, L, h) => {
-    const w = [];
-    k.trim() || w.push({
+  ...Re
+}, gt = () => {
+  const [u, i] = d([]), x = de((k, P, j) => {
+    const S = [];
+    k.trim() || S.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), k.length > 41 && w.push({
+    }), k.length > 41 && S.push({
       type: "length",
       message: `Sentence is too long (${k.length}/41 characters)`
-    }), k && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(k) && w.push({
+    }), k && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(k) && S.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const O = h.findIndex((N, y) => y !== L && N.toLowerCase().trim() === k.toLowerCase().trim());
-    return O !== -1 && w.push({
+    const D = j.findIndex((oe, pe) => pe !== P && oe.toLowerCase().trim() === k.toLowerCase().trim());
+    return D !== -1 && S.push({
       type: "duplicate",
-      message: `Duplicate sentence (same as sentence ${O + 1})`
-    }), s(w), {
-      isValid: w.length === 0,
-      errors: w
+      message: `Duplicate sentence (same as sentence ${D + 1})`
+    }), i(S), {
+      isValid: S.length === 0,
+      errors: S
     };
-  }, []), H = ce((k) => {
-    const L = [];
-    return k.forEach((h, w) => {
-      const K = v(h, w, k);
-      L.push(...K.errors.map((O) => ({
-        ...O,
-        message: `Sentence ${w + 1}: ${O.message}`
+  }, []), $ = de((k) => {
+    const P = [];
+    return k.forEach((j, S) => {
+      const y = x(j, S, k);
+      P.push(...y.errors.map((D) => ({
+        ...D,
+        message: `Sentence ${S + 1}: ${D.message}`
       })));
     }), {
-      isValid: L.length === 0,
-      errors: L
+      isValid: P.length === 0,
+      errors: P
     };
-  }, [v]), $ = ce(() => {
-    s([]);
+  }, [x]), O = de(() => {
+    i([]);
   }, []);
   return {
-    errors: f,
-    validateSentence: v,
-    validateAllSentences: H,
-    clearErrors: $
+    errors: u,
+    validateSentence: x,
+    validateAllSentences: $,
+    clearErrors: O
   };
-}, mt = (f, s, v) => s && v ? `${f} word "${s}" ${v}` : s ? `${f} word "${s}"` : f, gt = (f, s, v = ["Enter", " "]) => {
-  v.includes(f.key) && (f.preventDefault(), s());
-}, A = (f) => {
-  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 = f, setTimeout(() => {
-    document.body.removeChild(s);
+}, ht = (u, i, x) => i && x ? `${u} word "${i}" ${x}` : i ? `${u} word "${i}"` : u, xt = (u, i, x = ["Enter", " "]) => {
+  x.includes(u.key) && (u.preventDefault(), i());
+}, H = (u) => {
+  const i = document.createElement("div");
+  i.setAttribute("aria-live", "polite"), i.setAttribute("aria-atomic", "true"), i.style.position = "absolute", i.style.left = "-10000px", i.style.width = "1px", i.style.height = "1px", i.style.overflow = "hidden", document.body.appendChild(i), i.textContent = u, setTimeout(() => {
+    document.body.removeChild(i);
   }, 1e3);
-}, ht = () => {
-  const f = document.createElement("style");
-  f.id = "magic-sentence-reset", f.textContent = `
+}, yt = () => {
+  const u = document.createElement("style");
+  u.id = "magic-sentence-reset", u.textContent = `
     #magic-sentence-root, #magic-sentence-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -251,18 +251,40 @@ const Ce = {
       overflow: hidden !important;
     }
   `;
-  const s = document.getElementById("magic-sentence-reset");
-  s && s.remove(), document.head.appendChild(f);
-}, xt = (f) => [...f].sort(() => Math.random() - 0.5);
-function kt(f = {}) {
-  const { logoUrl: s, showLogo: v = !0, screenHeight: H, screenWidth: $, gameCubeSize: k } = f, L = 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();
+  const i = document.getElementById("magic-sentence-reset");
+  i && i.remove(), document.head.appendChild(u);
+};
+class bt {
+  seed;
+  constructor(i) {
+    this.seed = i;
+  }
+  // Linear Congruential Generator (LCG)
+  next() {
+    return this.seed = (this.seed * 1664525 + 1013904223) % 2 ** 32, this.seed / 2 ** 32;
+  }
+  // Генерация случайного числа в диапазоне [min, max)
+  random(i = 0, x = 1) {
+    return i + this.next() * (x - i);
+  }
+  // Генерация случайного целого числа в диапазоне [min, max)
+  randomInt(i, x) {
+    return Math.floor(this.random(i, x));
+  }
+}
+const wt = (u) => u !== void 0 ? new bt(u) : null, St = (u, i) => {
+  const x = i || { next: () => Math.random() };
+  return [...u].sort(() => x.next() - 0.5);
+};
+function Dt(u = {}) {
+  const { logoUrl: i, showLogo: x = !0, screenHeight: $, screenWidth: O, gameCubeSize: k, seed: P } = u, j = re(null), S = De(() => wt(P), [P]), y = () => O ?? (typeof window < "u" ? window.innerWidth : 1920), D = () => $ ?? (typeof window < "u" ? window.innerHeight : 1080), { validateAllSentences: oe, errors: pe } = gt(), K = () => {
+    const e = y();
     return !!(m || e < 768 || e >= 768 && e < 1300);
-  }, y = () => {
-    const e = h(), n = w();
+  }, w = () => {
+    const e = y(), n = D();
     return m || e < 768 || e >= 320 && e <= 932 && n >= 390 && n <= 932;
   }, F = (e = "medium") => {
-    if (!y())
+    if (!w())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -289,56 +311,56 @@ function kt(f = {}) {
         };
     }
   };
-  j(() => (ht(), () => {
+  X(() => (yt(), () => {
     document.documentElement.style.overflow = "", document.body.style.overflow = "";
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [S, z] = l("select"), [E, de] = l(null), [pe, ue] = l(null), [T, Z] = l([]), [D, fe] = l(0), [oe, me] = l([]), [I, ie] = l([]), [M, ge] = l(20), [V, G] = l(0), [yt, he] = l(null), [X, P] = l(null), [a, _] = l(!1), [xe, se] = l(!1), [ae, Te] = l(
+  const [v, E] = d("select"), [B, ue] = d(null), [fe, me] = d(null), [R, Z] = d([]), [z, ge] = d(0), [ie, he] = d([]), [I, se] = d([]), [A, xe] = d(20), [V, N] = d(0), [vt, ye] = d(null), [G, W] = d(null), [l, _] = d(!1), [be, ae] = d(!1), [le, ze] = d(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), q = re(null), De = re(null), ye = re(0), [x, B] = l({ list: null, id: null, side: null }), [m, Re] = l(!1), [ze, U] = l(1), [be, J] = l(null), [Ee, Pe] = l(!1), [Be, We] = l(!1), [Le, Me] = l(!1), [Ae, He] = l(!1), [$e, Oe] = l(!1), [Ne, Ge] = l(!1), [Xe, je] = l(!1), [Fe, Ve] = l(!1), [qe, Ue] = l(!1), [bt, Je] = l(!1), [wt, Ye] = l(!1);
-  j(() => {
+  ), q = re(null), Ee = re(null), we = re(0), [h, L] = d({ list: null, id: null, side: null }), [m, Pe] = d(!1), [Be, U] = d(1), [Se, J] = d(null), [We, Le] = d(!1), [Me, Ae] = d(!1), [He, $e] = d(!1), [Oe, Ne] = d(!1), [Ge, Xe] = d(!1), [je, Fe] = d(!1), [Ve, qe] = d(!1), [Ue, Je] = d(!1), [Ye, Ke] = d(!1), [kt, Ze] = d(!1), [It, _e] = d(!1);
+  X(() => {
     const e = () => {
-      const n = h(), t = w(), r = n < 768 || n === 926 && t === 428 || n === 932 && t === 430, o = t < 700, p = n / t > 1.8, g = n === 768 && t === 1024, i = n === 1024 && t === 768, d = n === 820 && t === 1180, R = n === 1180 && t === 820, C = n === 540 && t === 720, ne = n === 720 && t === 540, ve = n === 1024 && t === 1366, ke = n === 1366 && t === 1024, Ie = n >= 1200 && t >= 600 && !r;
-      Pe(Ie), We(g), Me(i), He(d), Oe(R), Ge(C), je(ne), Ve(ve), Ue(ke), Ye(p);
-      const ct = r && n > t || r || // ✅ ВСЕ мобильные устройства (включая portrait)
-      t < 700 || p || // ✅ Широкие экраны
-      n === 1366 && t === 766 || n === 1366 && t === 768 || n === 1280 && t === 720 || n === 1440 && t === 900 || g || i || d || R || C || ne || ve || ke || Ie;
-      if (Je(ct), Re(r), k !== void 0)
+      const n = y(), t = D(), r = n < 768 || n === 926 && t === 428 || n === 932 && t === 430, o = t < 700, c = n / t > 1.8, g = n === 768 && t === 1024, a = n === 1024 && t === 768, s = n === 820 && t === 1180, T = n === 1180 && t === 820, C = n === 540 && t === 720, ne = n === 720 && t === 540, Ie = n === 1024 && t === 1366, Ce = n === 1366 && t === 1024, Te = n >= 1200 && t >= 600 && !r;
+      Le(Te), Ae(g), $e(a), Ne(s), Xe(T), Fe(C), qe(ne), Je(Ie), Ke(Ce), _e(c);
+      const ut = r && n > t || r || // ✅ ВСЕ мобильные устройства (включая portrait)
+      t < 700 || c || // ✅ Широкие экраны
+      n === 1366 && t === 766 || n === 1366 && t === 768 || n === 1280 && t === 720 || n === 1440 && t === 900 || g || a || s || T || C || ne || Ie || Ce || Te;
+      if (Ze(ut), Pe(r), k !== void 0)
         J(k), U(1);
       else if (r)
         J(null), U(1);
       else if (o)
         J(null), U(1);
-      else if (p) {
-        const le = Math.min(1e3, Math.min(n, t) * 0.9);
-        J(le), U(0.85);
+      else if (c) {
+        const ce = Math.min(1e3, Math.min(n, t) * 0.9);
+        J(ce), U(0.85);
       } else {
-        const le = Math.min(1e3, Math.min(n, t) * 0.9);
-        J(le), U(1);
+        const ce = Math.min(1e3, Math.min(n, t) * 0.9);
+        J(ce), U(1);
       }
     };
-    if (e(), $ === void 0 && H === void 0)
+    if (e(), O === void 0 && $ === void 0)
       return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, [$, H, k]);
+  }, [O, $, k]);
   const Q = (e, n, t, r) => {
-    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;
-    const [R] = g.splice(d, 1);
+    if (l) return;
+    let o = [...ie], c = [...I];
+    const g = e === "bank" ? o : c, a = n === "bank" ? o : c, s = g.findIndex((ne) => ne.id === t);
+    if (s === -1) return;
+    const [T] = g.splice(s, 1);
     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);
+    e === n && C !== null && C !== void 0 && C > s && (C = C - 1), C == null || C < 0 || C > a.length ? a.push(T) : a.splice(C, 0, T), e === "bank" ? o = g : c = g, n === "bank" ? o = a : c = a, he(o), se(c);
   }, Y = (e, n, t) => {
-    if (e.preventDefault(), a) {
-      B({ list: null, id: null, side: null });
+    if (e.preventDefault(), l) {
+      L({ list: null, id: null, side: null });
       return;
     }
     const r = e.dataTransfer.getData("application/x-token") || (() => {
       const o = e.dataTransfer.getData("text/plain");
       if (!o) return "";
-      const p = oe.some((d) => d.id === o), g = I.some((d) => d.id === o), i = p ? "bank" : g ? "selected" : null;
-      return i ? JSON.stringify({ from: i, id: o }) : "";
+      const c = ie.some((s) => s.id === o), g = I.some((s) => s.id === o), a = c ? "bank" : g ? "selected" : null;
+      return a ? JSON.stringify({ from: a, id: o }) : "";
     })();
     if (r) {
       try {
@@ -347,76 +369,80 @@ function kt(f = {}) {
         Q(o.from, n, o.id, t);
       } catch {
       }
-      B({ list: null, id: null, side: null });
+      L({ list: null, id: null, side: null });
     }
-  }, Ke = (e) => {
-    de(e), De.current = e, Z(Array(e).fill("")), z("time");
-  }, Ze = (e) => {
-    ue(e), z("type");
-  }, _e = (e, n) => {
+  }, Qe = (e) => {
+    ue(e), Ee.current = e, Z(Array(e).fill("")), E("time");
+  }, et = (e) => {
+    me(e), E("type");
+  }, tt = (e, n) => {
     if (n.length > 41 || n && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))
       return;
-    const r = [...T];
+    const r = [...R];
     r[e] = n, Z(r);
-    const o = K(r);
+    const o = oe(r);
     o.isValid || console.warn("Validation errors:", o.errors);
-  }, Qe = (e) => e.trim().replace(/\s+/g, " "), we = (e) => {
-    const n = h(), t = n >= 768 && n < 1300;
+  }, nt = (e) => e.trim().replace(/\s+/g, " "), ve = (e) => {
+    const n = y(), t = n >= 768 && n < 1300;
     return e <= 3 ? t ? 18 : 20 : e <= 5 ? t ? 16 : 18 : e <= 7 ? t ? 14 : 16 : e <= 9 ? t ? 12 : 14 : e <= 12 ? t ? 10 : 12 : t ? 9 : 10;
-  }, et = () => {
-    T.some((n) => n.trim().length === 0) || (Z((n) => n.map((t) => Qe(t))), G(0), fe(0), ye.current = 0, he(null), z("getready"));
+  }, rt = () => {
+    R.some((n) => n.trim().length === 0) || (Z((n) => n.map((t) => nt(t))), N(0), ge(0), we.current = 0, ye(null), E("getready"));
   };
-  j(() => {
-    if (S === "getready") {
+  X(() => {
+    if (v === "getready") {
       const e = setTimeout(() => ee(0), 3e3);
       return () => clearTimeout(e);
     }
-  }, [S]);
+  }, [v]);
   const ee = (e) => {
-    const n = T[e];
+    const n = R[e];
     if (!n) return;
-    const r = xt(
-      n.trim().split(/\s+/).filter(Boolean)
-    ).map((o, p) => ({
-      id: `${Date.now()}-${e}-${p}-${Math.random().toString(36).slice(2)}`,
-      text: o
-    }));
-    me(r), ie([]), fe(e), ye.current = e, ge(pe || 20), P(null), _(!1), se(!1), z("play");
+    const r = St(
+      n.trim().split(/\s+/).filter(Boolean),
+      S
+    ).map((o, c) => {
+      const g = S ? S.random().toString(36).slice(2) : Math.random().toString(36).slice(2);
+      return {
+        id: `${Date.now()}-${e}-${c}-${g}`,
+        text: o
+      };
+    });
+    he(r), se([]), ge(e), we.current = e, xe(fe || 20), W(null), _(!1), ae(!1), E("play");
   };
-  j(() => (S === "play" && !a && (q.current !== null && window.clearTimeout(q.current), M > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
+  X(() => (v === "play" && !l && (q.current !== null && window.clearTimeout(q.current), A > 0 ? q.current = window.setTimeout(() => xe((e) => e - 1), 1e3) : _(!0)), () => {
     q.current !== null && window.clearTimeout(q.current);
-  }), [S, M, a]), j(() => {
-    if (S === "play" && a && M === 0) {
-      const e = T[D];
+  }), [v, A, l]), X(() => {
+    if (v === "play" && l && A === 0) {
+      const e = R[z];
       if (!e) {
-        P(null);
+        W(null);
         return;
       }
-      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)), W("correct"), A("Correct! Well done!")) : g === 1 ? (P("almost"), G((i) => i + 0.5), W("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), W("wrong"), A("Not quite right. Keep trying!"));
+      const n = e.trim().split(/\s+/), t = I.map((a) => a.text), r = n.filter((a) => !t.includes(a)).length, o = t.filter((a) => !n.includes(a)).length, c = n.filter((a, s) => t.includes(a) ? t[s] !== a : !1).length, g = r + o + c;
+      g === 0 ? (W("correct"), be || (ae(!0), N((a) => a + 1)), M("correct"), H("Correct! Well done!")) : g === 1 ? (W("almost"), N((a) => a + 0.5), M("half"), H("Almost correct! Just one mistake.")) : (W("wrong"), M("wrong"), H("Not quite right. Keep trying!"));
     }
-  }, [S, a, M, T, D, I, xe]);
-  const tt = (e = !0) => {
+  }, [v, l, A, R, z, I, be]);
+  const ot = (e = !0) => {
     if (e) {
-      if (a) {
-        D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
+      if (l) {
+        z + 1 < (B || 0) ? ee(z + 1) : (E("results"), setTimeout(() => te(), 600));
         return;
       }
-      const n = T[D];
+      const n = R[z];
       if (!n) {
-        D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
+        z + 1 < (B || 0) ? ee(z + 1) : (E("results"), setTimeout(() => te(), 600));
         return;
       }
-      const t = n.trim().split(/\s+/), r = I.map((d) => d.text), o = t.filter((d) => !r.includes(d)).length, p = r.filter((d) => !t.includes(d)).length, g = t.filter((d, R) => r.includes(d) ? r[R] !== d : !1).length, i = o + p + g;
-      i === 0 ? (G((d) => d + 1), P("correct"), se(!0), W("correct"), A("Correct! Well done!")) : i === 1 ? (G((d) => d + 0.5), P("almost"), W("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), W("wrong"), A("Not quite right. Keep trying!")), D + 1 < (E || 0) ? setTimeout(() => ee(D + 1), 800) : setTimeout(() => {
-        z("results"), setTimeout(() => te(), 600);
+      const t = n.trim().split(/\s+/), r = I.map((s) => s.text), o = t.filter((s) => !r.includes(s)).length, c = r.filter((s) => !t.includes(s)).length, g = t.filter((s, T) => r.includes(s) ? r[T] !== s : !1).length, a = o + c + g;
+      a === 0 ? (N((s) => s + 1), W("correct"), ae(!0), M("correct"), H("Correct! Well done!")) : a === 1 ? (N((s) => s + 0.5), W("almost"), M("half"), H("Almost correct! Just one mistake.")) : (W("wrong"), M("wrong"), H("Not quite right. Keep trying!")), z + 1 < (B || 0) ? setTimeout(() => ee(z + 1), 800) : setTimeout(() => {
+        E("results"), setTimeout(() => te(), 600);
       }, 800);
     }
   };
-  j(() => {
-    S === "results" && V > ae && (Te(V), localStorage.setItem("magicSentenceBest", String(V)));
-  }, [S, V, ae]);
-  const W = (e) => {
+  X(() => {
+    v === "results" && V > le && (ze(V), localStorage.setItem("magicSentenceBest", String(V)));
+  }, [v, V, le]);
+  const M = (e) => {
     const n = new (window.AudioContext || window.webkitAudioContext)(), t = n.createOscillator(), r = n.createGain();
     switch (t.connect(r), r.connect(n.destination), e) {
       case "start":
@@ -438,33 +464,36 @@ function kt(f = {}) {
     r.gain.setValueAtTime(0.1, n.currentTime), t.start(), t.stop(n.currentTime + 0.2);
   }, te = () => {
     const n = Date.now() + 2500, t = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], r = document.createElement("canvas"), o = r.getContext("2d");
-    r.width = h(), r.height = w(), r.style.position = "fixed", r.style.top = "0", r.style.left = "0", r.style.pointerEvents = "none", document.body.appendChild(r);
-    const p = Array.from({ length: 100 }).map(() => ({
-      x: Math.random() * r.width,
-      y: Math.random() * r.height - r.height,
-      size: 6 + Math.random() * 6,
-      color: t[Math.floor(Math.random() * t.length)],
-      speed: 2 + Math.random() * 4,
-      tilt: Math.random() * 2 * Math.PI
-    })), g = () => {
-      o.clearRect(0, 0, r.width, r.height), p.forEach((i) => {
-        o.fillStyle = i.color, o.beginPath(), o.ellipse(i.x, i.y, i.size, i.size / 2, i.tilt, 0, 2 * Math.PI), o.fill(), i.y += i.speed, i.x += Math.sin(i.tilt);
-      }), Date.now() < n ? requestAnimationFrame(g) : document.body.removeChild(r);
+    r.width = y(), r.height = D(), r.style.position = "fixed", r.style.top = "0", r.style.left = "0", r.style.pointerEvents = "none", document.body.appendChild(r);
+    const c = S || {
+      random: () => Math.random(),
+      randomInt: (s, T) => Math.floor(Math.random() * (T - s) + s)
+    }, g = Array.from({ length: 100 }).map(() => ({
+      x: c.random(0, r.width),
+      y: c.random(0, r.height) - r.height,
+      size: 6 + c.random(0, 6),
+      color: t[c.randomInt(0, t.length)],
+      speed: 2 + c.random(0, 4),
+      tilt: c.random(0, 2 * Math.PI)
+    })), a = () => {
+      o.clearRect(0, 0, r.width, r.height), g.forEach((s) => {
+        o.fillStyle = s.color, o.beginPath(), o.ellipse(s.x, s.y, s.size, s.size / 2, s.tilt, 0, 2 * Math.PI), o.fill(), s.y += s.speed, s.x += Math.sin(s.tilt);
+      }), Date.now() < n ? requestAnimationFrame(a) : document.body.removeChild(r);
     };
-    g();
-  }, nt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ c("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ c("p", { style: u.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ c("div", { style: {
+    a();
+  }, it = () => /* @__PURE__ */ b("div", { style: f.gmCenterScreen, children: [
+    /* @__PURE__ */ p("h1", { style: f.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ p("p", { style: f.gmBodyM, children: "Select number of rounds" }),
+    /* @__PURE__ */ p("div", { style: {
       display: "flex",
-      gap: y() ? "8px" : "16px",
+      gap: w() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [3, 4, 5].map((e) => /* @__PURE__ */ b(
       "button",
       {
-        onClick: () => Ke(e),
+        onClick: () => Qe(e),
         style: {
-          ...u.gmButton,
+          ...f.gmButton,
           ...F("medium")
         },
         children: [
@@ -474,19 +503,19 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), rt = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ c("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ c("p", { style: u.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ c("div", { style: {
+  ] }), st = () => /* @__PURE__ */ b("div", { style: f.gmCenterScreen, children: [
+    /* @__PURE__ */ p("h1", { style: f.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ p("p", { style: f.gmBodyM, children: "Select time per round" }),
+    /* @__PURE__ */ p("div", { style: {
       display: "flex",
-      gap: y() ? "8px" : "16px",
+      gap: w() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [15, 20, 30].map((e) => /* @__PURE__ */ b(
       "button",
       {
-        onClick: () => Ze(e),
+        onClick: () => et(e),
         style: {
-          ...u.gmButton,
+          ...f.gmButton,
           ...F("medium")
         },
         children: [
@@ -496,16 +525,16 @@ function kt(f = {}) {
       },
       e
     )) })
-  ] }), ot = () => /* @__PURE__ */ b("div", { style: u.gmCenterScreen, children: [
-    /* @__PURE__ */ b("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), at = () => /* @__PURE__ */ b("div", { style: f.gmCenterScreen, children: [
+    /* @__PURE__ */ b("h2", { style: { ...f.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
-      E,
+      B,
       " sentence",
-      E && E > 1 ? "s" : "",
+      B && B > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ c("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ c("div", { style: {
+    /* @__PURE__ */ p("p", { style: { ...f.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ p("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: 12,
@@ -515,16 +544,16 @@ function kt(f = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: T.map((e, n) => /* @__PURE__ */ c(
+    }, children: R.map((e, n) => /* @__PURE__ */ p(
       "input",
       {
         value: e,
         placeholder: `Sentence ${n + 1}`,
-        onChange: (t) => _e(n, t.target.value),
+        onChange: (t) => tt(n, t.target.value),
         style: {
-          ...u.gmInput,
-          padding: y() ? "8px 12px" : "12px 16px",
-          fontSize: y() ? "14px" : "16px",
+          ...f.gmInput,
+          padding: w() ? "8px 12px" : "12px 16px",
+          fontSize: w() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
@@ -533,129 +562,129 @@ function kt(f = {}) {
       },
       n
     )) }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ p(
       "button",
       {
-        onClick: et,
-        disabled: T.some((e) => e.trim().length === 0),
+        onClick: rt,
+        disabled: R.some((e) => e.trim().length === 0),
         style: {
-          ...u.gmButton,
+          ...f.gmButton,
           marginTop: 30,
-          background: T.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
-          cursor: T.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
+          background: R.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
+          cursor: R.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
           ...F("large")
         },
         children: "PLAY"
       }
     )
-  ] }), it = () => /* @__PURE__ */ b("div", { style: u.gmReadyWrapper, children: [
-    /* @__PURE__ */ c("h1", { style: {
-      ...u.gmHeadline1,
+  ] }), lt = () => /* @__PURE__ */ b("div", { style: f.gmReadyWrapper, children: [
+    /* @__PURE__ */ p("h1", { style: {
+      ...f.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ c("div", { style: u.gmHourglass, children: "⏳" })
-  ] }), st = () => /* @__PURE__ */ b("div", { style: u.gmGameLayout, children: [
+    /* @__PURE__ */ p("div", { style: f.gmHourglass, children: "⏳" })
+  ] }), ct = () => /* @__PURE__ */ b("div", { style: f.gmGameLayout, children: [
     /* @__PURE__ */ b("h2", { style: {
-      marginBottom: y() ? "5px" : "10px",
-      fontSize: y() ? "16px" : "20px"
+      marginBottom: w() ? "5px" : "10px",
+      fontSize: w() ? "16px" : "20px"
     }, children: [
       "Round ",
-      D + 1,
+      z + 1,
       "/",
-      E,
+      B,
       " — ",
-      a ? "TIME'S UP!" : `Time: ${M}s`
+      l ? "TIME'S UP!" : `Time: ${A}s`
     ] }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ p(
       "div",
       {
         style: {
           width: "60%",
-          height: y() ? "8px" : "14px",
+          height: w() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: y() ? "10px" : "20px"
+          marginBottom: w() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ c(
+        children: /* @__PURE__ */ p(
           "div",
           {
             style: {
               height: "100%",
-              width: `${M / (pe || 20) * 100}%`,
-              background: M <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${A / (fe || 20) * 100}%`,
+              background: A <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
         )
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ p(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
         onDrop: (e) => Y(e, "bank", null),
         style: {
           display: "flex",
-          flexWrap: N() ? "wrap" : "nowrap",
-          gap: m || h() < 768 ? "6px" : "10px",
+          flexWrap: K() ? "wrap" : "nowrap",
+          gap: m || y() < 768 ? "6px" : "10px",
           justifyContent: "center",
-          marginBottom: m || h() < 768 ? "15px" : "30px",
-          padding: m || h() < 768 ? "5px" : "10px",
+          marginBottom: m || y() < 768 ? "15px" : "30px",
+          padding: m || y() < 768 ? "5px" : "10px",
           width: "100%",
           boxSizing: "border-box"
         },
-        children: oe.map((e, n) => /* @__PURE__ */ c(
+        children: ie.map((e, n) => /* @__PURE__ */ p(
           "div",
           {
-            draggable: !a,
+            draggable: !l,
             role: "button",
-            tabIndex: a ? -1 : 0,
-            "aria-label": a ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
+            tabIndex: l ? -1 : 0,
+            "aria-label": l ? `Word: ${e.text} (time expired)` : ht("Drag word", e.text, "to build sentence"),
             onDragStart: (t) => {
-              if (a) {
+              if (l) {
                 t.preventDefault();
                 return;
               }
               t.dataTransfer.setData(
                 "application/x-token",
                 JSON.stringify({ from: "bank", id: e.id })
-              ), t.dataTransfer.setData("text/plain", e.id), A(`Dragging word: ${e.text}`);
+              ), t.dataTransfer.setData("text/plain", e.id), H(`Dragging word: ${e.text}`);
             },
             onKeyDown: (t) => {
-              a || gt(t, () => Q("bank", "selected", e.id, null));
+              l || xt(t, () => Q("bank", "selected", e.id, null));
             },
             onDragOver: (t) => t.preventDefault(),
             onDrop: (t) => {
-              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2, p = t.clientX > o ? n + 1 : n;
-              B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "bank", p);
+              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2, c = t.clientX > o ? n + 1 : n;
+              L({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "bank", c);
             },
             onDragEnter: (t) => {
-              if (a) return;
+              if (l) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
-              B({ list: "bank", id: e.id, side: t.clientX > o ? "right" : "left" });
+              L({ list: "bank", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => B({ list: null, id: null, side: null }),
+            onDragLeave: () => L({ list: null, id: null, side: null }),
             onClick: () => {
-              a || Q("bank", "selected", e.id, null);
+              l || Q("bank", "selected", e.id, null);
             },
             style: {
-              padding: m || h() < 768 ? "6px 10px" : "10px 16px",
-              borderRadius: m || h() < 768 ? "6px" : "10px",
+              padding: m || y() < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: m || y() < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: a ? "#f0f0f0" : "#f9f9f9",
-              cursor: a ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
+              background: l ? "#f0f0f0" : "#f9f9f9",
+              cursor: l ? "not-allowed" : h.list === "bank" && h.id === e.id ? "grabbing" : "grab",
               fontSize: (() => {
-                const t = h();
+                const t = y();
                 return m || t < 768 ? "12px" : t >= 768 && t < 1300 ? "14px" : "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" } : {},
+              ...h.list === "bank" && h.id === e.id && h.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
+              ...h.list === "bank" && h.id === e.id && h.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: a ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
-              ...x.list === "bank" && x.id === e.id ? {
+              ...h.list === "bank" && h.id === e.id ? {
                 transform: "scale(1.05)",
                 boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
               } : {}
@@ -666,7 +695,7 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ p(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
@@ -677,37 +706,37 @@ function kt(f = {}) {
             return;
           }
           let r = I.length, o = 1 / 0;
-          t.forEach((p, g) => {
-            const i = p.getBoundingClientRect(), d = i.left + i.width / 2, R = Math.abs(e.clientX - d);
-            R < o && (o = R, r = e.clientX < d ? g : g + 1);
+          t.forEach((c, g) => {
+            const a = c.getBoundingClientRect(), s = a.left + a.width / 2, T = Math.abs(e.clientX - s);
+            T < o && (o = T, r = e.clientX < s ? g : g + 1);
           }), e.clientX > n.right - 30 && (r = I.length), e.clientX < n.left + 30 && (r = 0), Y(e, "selected", r);
         },
         style: {
-          minHeight: m || h() < 768 ? "50px" : "70px",
+          minHeight: m || y() < 768 ? "50px" : "70px",
           width: "auto",
           // Автоматическая ширина в зависимости от содержимого
           maxWidth: "none",
           // Убираем ограничение максимальной ширины
           minWidth: "245px",
           // Минимальная ширина для растягивания
-          border: X === "correct" ? "2px dashed #4caf50" : X === "almost" ? "2px dashed #ff9800" : X === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
-          borderRadius: m || h() < 768 ? "8px" : "12px",
-          padding: m || h() < 768 ? "8px" : "12px",
+          border: G === "correct" ? "2px dashed #4caf50" : G === "almost" ? "2px dashed #ff9800" : G === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
+          borderRadius: m || y() < 768 ? "8px" : "12px",
+          padding: m || y() < 768 ? "8px" : "12px",
           display: "flex",
-          flexWrap: N() ? "wrap" : "nowrap",
+          flexWrap: K() ? "wrap" : "nowrap",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: `${we(I.length)}px`,
-          background: X === "correct" ? "#e8f5e8" : X === "almost" ? "#fff3e0" : X === "wrong" ? "#ffebee" : "#fafafa",
-          overflowX: N() ? "hidden" : "auto",
-          whiteSpace: N() ? "normal" : "nowrap"
+          fontSize: `${ve(I.length)}px`,
+          background: G === "correct" ? "#e8f5e8" : G === "almost" ? "#fff3e0" : G === "wrong" ? "#ffebee" : "#fafafa",
+          overflowX: K() ? "hidden" : "auto",
+          whiteSpace: K() ? "normal" : "nowrap"
         },
-        children: I.map((e, n) => /* @__PURE__ */ c(
+        children: I.map((e, n) => /* @__PURE__ */ p(
           "span",
           {
-            draggable: !a,
+            draggable: !l,
             onDragStart: (t) => {
-              if (a) {
+              if (l) {
                 t.preventDefault();
                 return;
               }
@@ -718,38 +747,38 @@ function kt(f = {}) {
             },
             onDragOver: (t) => t.preventDefault(),
             onDrop: (t) => {
-              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2, p = r.width * 0.25, g = t.clientX < o - p ? n : t.clientX > o + p || t.clientX > o ? n + 1 : n;
-              B({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "selected", g);
+              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2, c = r.width * 0.25, g = t.clientX < o - c ? n : t.clientX > o + c || t.clientX > o ? n + 1 : n;
+              L({ list: null, id: null, side: null }), t.stopPropagation(), Y(t, "selected", g);
             },
             onDragEnter: (t) => {
-              if (a) return;
+              if (l) return;
               const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
-              B({ list: "selected", id: e.id, side: t.clientX > o ? "right" : "left" });
+              L({ list: "selected", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => B({ list: null, id: null, side: null }),
+            onDragLeave: () => L({ list: null, id: null, side: null }),
             onClick: () => {
-              a || Q("selected", "bank", e.id, null);
+              l || Q("selected", "bank", e.id, null);
             },
-            title: a ? "Time expired" : "Click to remove back to bank",
+            title: l ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: y() ? "4px 6px" : "6px 10px",
-              margin: y() ? "2px" : "4px",
-              borderRadius: y() ? "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: a ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
+              padding: w() ? "4px 6px" : "6px 10px",
+              margin: w() ? "2px" : "4px",
+              borderRadius: w() ? "4px" : "8px",
+              background: l ? "#f0f0f0" : "#ffe9e7",
+              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
+              ...h.list === "selected" && h.id === e.id && h.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
+              ...h.list === "selected" && h.id === e.id && h.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
+              cursor: l ? "not-allowed" : h.list === "selected" && h.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
-              fontSize: `${we(I.length)}px`,
+              fontSize: `${ve(I.length)}px`,
               // Адаптивный размер шрифта для слов
               fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: a ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
-              ...x.list === "selected" && x.id === e.id ? {
+              ...h.list === "selected" && h.id === e.id ? {
                 transform: "scale(1.05)",
                 boxShadow: "0 2px 8px rgba(59, 130, 246, 0.3)"
               } : {}
@@ -760,35 +789,35 @@ function kt(f = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ p(
       "button",
       {
-        onClick: () => tt(!0),
-        disabled: !a && I.length === 0,
+        onClick: () => ot(!0),
+        disabled: !l && I.length === 0,
         style: {
-          marginTop: y() ? "15px" : "30px",
-          fontSize: y() ? "14px" : "20px",
-          padding: y() ? "6px 12px" : "10px 24px",
-          borderRadius: y() ? "8px" : "12px",
-          background: a || I.length > 0 ? "#ec4c44" : "#ccc",
+          marginTop: w() ? "15px" : "30px",
+          fontSize: w() ? "14px" : "20px",
+          padding: w() ? "6px 12px" : "10px 24px",
+          borderRadius: w() ? "8px" : "12px",
+          background: l || I.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: a || I.length > 0 ? "pointer" : "not-allowed"
+          cursor: l || 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 || Le || 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__ */ c("h1", { style: {
-        ...u.gmHeadline1,
+  ] }), dt = () => {
+    const e = y(), n = D(), t = m && e > n || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430 || Me || He || Oe || Ge || je || Ve || Ue || Ye, 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: f.gmCenterScreen, children: [
+      /* @__PURE__ */ p("h1", { style: {
+        ...f.gmHeadline1,
         marginTop: "0px",
         marginBottom: t ? "2px" : "10px",
         fontSize: r ? "32px" : "clamp(28px, 4vw, 40px)"
       }, children: "Game Over 🎯" }),
       /* @__PURE__ */ b("h2", { style: {
-        ...u.gmHeadline2,
+        ...f.gmHeadline2,
         marginTop: "0px",
         marginBottom: t ? "2px" : "16px",
         fontSize: r ? "18px" : "24px"
@@ -796,46 +825,46 @@ function kt(f = {}) {
         "Your score: ",
         V,
         " out of ",
-        E
+        B
       ] }),
       /* @__PURE__ */ b("p", { style: {
-        ...u.gmBodyM,
+        ...f.gmBodyM,
         color: "#10b981",
         marginTop: t ? "0px" : "12px",
         marginBottom: t ? "2px" : "16px",
         fontSize: r ? "14px" : "16px"
       }, children: [
         "Best score: ",
-        ae
+        le
       ] }),
       /* @__PURE__ */ b("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"
+        marginTop: t || m && e <= 375 && n <= 667 ? "2px" : o || We ? "12px" : "24px"
       }, children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ p(
           "button",
           {
             onClick: () => {
-              te(), W("start"), setTimeout(() => {
-                z("getready"), he(null), _(!1);
+              te(), M("start"), setTimeout(() => {
+                E("getready"), ye(null), _(!1);
               }, 800);
             },
             style: {
-              ...u.gmButton,
+              ...f.gmButton,
               ...F("medium")
             },
             children: "🔁 Play again"
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ p(
           "button",
           {
             onClick: () => {
-              W("click"), z("select"), de(null), ue(null), Z([]), G(0), ie([]), _(!1);
+              M("click"), E("select"), ue(null), me(null), Z([]), N(0), se([]), _(!1);
             },
             style: {
-              ...u.gmButton,
+              ...f.gmButton,
               ...F("medium")
             },
             children: "⬅️ Exit"
@@ -843,28 +872,28 @@ function kt(f = {}) {
         )
       ] })
     ] });
-  }, Se = !m && v, lt = dt(
+  }, ke = !m && x, pt = De(
     () => {
-      const e = h(), n = w(), t = e >= 1200 && e <= 1400;
-      if (m && e > n || n < 700 && !t || !Se)
+      const e = y(), n = D(), t = e >= 1200 && e <= 1400;
+      if (m && e > n || n < 700 && !t || !ke)
         return null;
-      const r = s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
-      return /* @__PURE__ */ c("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ c(
+      const r = i || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
+      return /* @__PURE__ */ p("div", { style: f.gmLogoFixed, children: /* @__PURE__ */ p(
         "img",
         {
           src: `${r}.svg`,
           alt: "SPEAKID Logo",
-          style: u.gmLogoImg,
+          style: f.gmLogoImg,
           loading: "lazy"
         }
       ) });
     },
-    [m, Se, s, $, H]
+    [m, ke, i, O, $]
   );
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: L,
+      ref: j,
       style: {
         width: "100%",
         height: "100%",
@@ -884,8 +913,8 @@ function kt(f = {}) {
         "div",
         {
           style: {
-            width: m ? "100%" : be || 1e3,
-            height: m ? "100%" : be || 1e3,
+            width: m ? "100%" : Se || 1e3,
+            height: m ? "100%" : Se || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
@@ -896,12 +925,12 @@ function kt(f = {}) {
             margin: m ? "0 auto" : "unset",
             position: "relative",
             // needed so absolute logo is inside the square
-            transform: `scale(${ze})`
+            transform: `scale(${Be})`
             // ✅ Применяем масштаб для широких экранов
           },
           children: [
-            lt,
-            /* @__PURE__ */ c(
+            pt,
+            /* @__PURE__ */ p(
               "div",
               {
                 style: {
@@ -913,12 +942,12 @@ function kt(f = {}) {
                   alignItems: "center"
                 },
                 children: /* @__PURE__ */ b("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
+                  v === "select" ? it() : null,
+                  v === "time" ? st() : null,
+                  v === "type" ? at() : null,
+                  v === "getready" ? lt() : null,
+                  v === "play" ? ct() : null,
+                  v === "results" ? dt() : null
                 ] })
               }
             )
@@ -928,20 +957,20 @@ function kt(f = {}) {
     }
   );
 }
-class It extends pt {
-  constructor(s) {
-    super(s), this.state = { hasError: !1 };
+class Rt extends ft {
+  constructor(i) {
+    super(i), this.state = { hasError: !1 };
   }
-  static getDerivedStateFromError(s) {
+  static getDerivedStateFromError(i) {
     return {
       hasError: !0,
-      error: s
+      error: i
     };
   }
-  componentDidCatch(s, v) {
-    console.error("Game Error:", s, v), this.setState({
-      error: s,
-      errorInfo: v
+  componentDidCatch(i, x) {
+    console.error("Game Error:", i, x), this.setState({
+      error: i,
+      errorInfo: x
     });
   }
   handleReset = () => {
@@ -960,9 +989,9 @@ class It extends pt {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ c("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ c("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ p("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
+      /* @__PURE__ */ p("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
+      /* @__PURE__ */ p(
         "button",
         {
           onClick: this.handleReset,
@@ -976,13 +1005,13 @@ class It extends pt {
             cursor: "pointer",
             transition: "background-color 0.2s"
           },
-          onMouseOver: (s) => s.currentTarget.style.backgroundColor = "#b91c1c",
-          onMouseOut: (s) => s.currentTarget.style.backgroundColor = "#dc2626",
+          onMouseOver: (i) => i.currentTarget.style.backgroundColor = "#b91c1c",
+          onMouseOut: (i) => i.currentTarget.style.backgroundColor = "#dc2626",
           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__ */ c("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ p("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
         /* @__PURE__ */ b("pre", { style: {
           backgroundColor: "#f3f4f6",
           padding: "12px",
@@ -999,12 +1028,12 @@ class It extends pt {
   }
 }
 export {
-  It as ErrorBoundary,
-  kt as Game,
-  A as announceToScreenReader,
-  mt as createAriaLabel,
-  kt as default,
-  gt as handleKeyDown,
-  ft as useValidation
+  Rt as ErrorBoundary,
+  Dt as Game,
+  H as announceToScreenReader,
+  ht as createAriaLabel,
+  Dt as default,
+  xt as handleKeyDown,
+  gt as useValidation
 };
 //# sourceMappingURL=speakid-build-a-sentence.es.js.map