speakid-build-a-sentence 1.0.26 → 1.0.28

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

@@ -1,6 +1,6 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { useState as c, useCallback as ge, useRef as oe, useEffect as V, useMemo as sn, Component as dn } from "react";
-const an = `
+import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { useState as c, useCallback as ce, useRef as re, useEffect as j, useMemo as dt, Component as pt } from "react";
+const ut = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -35,10 +35,10 @@ const an = `
   }
 `;
 if (typeof document < "u" && !document.getElementById("game-keyframes")) {
-  const u = document.createElement("style");
-  u.id = "game-keyframes", u.innerHTML = an, document.head.appendChild(u);
+  const f = document.createElement("style");
+  f.id = "game-keyframes", f.innerHTML = ut, document.head.appendChild(f);
 }
-const Te = {
+const Ce = {
   spin: {
     animation: "spin 1.4s linear infinite"
   },
@@ -57,7 +57,7 @@ const Te = {
   glow: {
     animation: "glow 1s ease-in-out infinite"
   }
-}, g = {
+}, u = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -134,13 +134,14 @@ const Te = {
     fontFamily: '"Geist", system-ui',
     width: "160px"
   },
-  // ✅ Обновлено только для качества логотипа (размер как в whats-missing)
+  // ✅ Обновлено только для качества логотипа (размер как в Hangman)
   gmLogoFixed: {
     position: "absolute",
     top: "16px",
     left: "16px",
     width: "auto",
-    zIndex: 10,
+    zIndex: 30,
+    // ✅ Унифицирован zIndex для консистентности
     pointerEvents: "none",
     background: "transparent",
     transform: "none",
@@ -168,62 +169,62 @@ const Te = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Te.spin
+    ...Ce.spin
   },
   // ===== Анимационные стили =====
-  ...Te
-}, ln = () => {
-  const [u, s] = c([]), S = ge((H, I, f) => {
-    const b = [];
-    H.trim() || b.push({
+  ...Ce
+}, ft = () => {
+  const [f, s] = c([]), v = ce((k, M, h) => {
+    const w = [];
+    k.trim() || w.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), H.length > 41 && b.push({
+    }), k.length > 41 && w.push({
       type: "length",
-      message: `Sentence is too long (${H.length}/41 characters)`
-    }), H && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(H) && b.push({
+      message: `Sentence is too long (${k.length}/41 characters)`
+    }), k && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(k) && w.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const W = f.findIndex((C, K) => K !== I && C.toLowerCase().trim() === H.toLowerCase().trim());
-    return W !== -1 && b.push({
+    const O = h.findIndex((N, b) => b !== M && N.toLowerCase().trim() === k.toLowerCase().trim());
+    return O !== -1 && w.push({
       type: "duplicate",
-      message: `Duplicate sentence (same as sentence ${W + 1})`
-    }), s(b), {
-      isValid: b.length === 0,
-      errors: b
+      message: `Duplicate sentence (same as sentence ${O + 1})`
+    }), s(w), {
+      isValid: w.length === 0,
+      errors: w
     };
-  }, []), se = ge((H) => {
-    const I = [];
-    return H.forEach((f, b) => {
-      const y = S(f, b, H);
-      I.push(...y.errors.map((W) => ({
-        ...W,
-        message: `Sentence ${b + 1}: ${W.message}`
+  }, []), H = ce((k) => {
+    const M = [];
+    return k.forEach((h, w) => {
+      const K = v(h, w, k);
+      M.push(...K.errors.map((O) => ({
+        ...O,
+        message: `Sentence ${w + 1}: ${O.message}`
       })));
     }), {
-      isValid: I.length === 0,
-      errors: I
+      isValid: M.length === 0,
+      errors: M
     };
-  }, [S]), de = ge(() => {
+  }, [v]), $ = ce(() => {
     s([]);
   }, []);
   return {
-    errors: u,
-    validateSentence: S,
-    validateAllSentences: se,
-    clearErrors: de
+    errors: f,
+    validateSentence: v,
+    validateAllSentences: H,
+    clearErrors: $
   };
-}, cn = (u, s, S) => s && S ? `${u} word "${s}" ${S}` : s ? `${u} word "${s}"` : u, hn = (u, s, S = ["Enter", " "]) => {
-  S.includes(u.key) && (u.preventDefault(), s());
-}, L = (u) => {
+}, 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 = u, setTimeout(() => {
+  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);
   }, 1e3);
-}, pn = () => {
-  const u = document.createElement("style");
-  u.id = "magic-sentence-reset", u.textContent = `
+}, ht = () => {
+  const f = document.createElement("style");
+  f.id = "magic-sentence-reset", f.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,11 +252,17 @@ const Te = {
     }
   `;
   const s = document.getElementById("magic-sentence-reset");
-  s && s.remove(), document.head.appendChild(u);
-}, gn = (u) => [...u].sort(() => Math.random() - 0.5);
-function yn(u = {}) {
-  const { logoUrl: s, showLogo: S = !0 } = u, se = oe(null), { validateAllSentences: de, errors: H } = ln(), I = () => !!(d || window.innerWidth < 768 || window.innerWidth >= 768 && window.innerWidth < 1300), f = () => d || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, b = (e = "medium") => {
-    if (!f())
+  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, M = re(null), h = () => $ ?? (typeof window < "u" ? window.innerWidth : 1920), w = () => H ?? (typeof window < "u" ? window.innerHeight : 1080), { validateAllSentences: K, errors: O } = ft(), N = () => {
+    const e = h();
+    return !!(m || e < 768 || e >= 768 && e < 1300);
+  }, b = () => {
+    const e = h(), n = w();
+    return m || e < 768 || e >= 320 && e <= 932 && n >= 390 && n <= 932;
+  }, F = (e = "medium") => {
+    if (!b())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -282,180 +289,183 @@ function yn(u = {}) {
         };
     }
   };
-  V(() => (pn(), () => {
+  j(() => (ht(), () => {
     document.documentElement.style.overflow = "", document.body.style.overflow = "";
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [y, W] = c("select"), [C, K] = c(null), [ue, we] = c(null), [T, Z] = c([]), [D, fe] = c(0), [ae, me] = c([]), [k, le] = c([]), [B, xe] = c(20), [U, M] = c(0), [un, ye] = c(null), [A, z] = c(null), [l, _] = c(!1), [be, ce] = c(!1), [he, De] = c(
+  const [S, z] = c("select"), [E, de] = c(null), [pe, ue] = c(null), [T, Z] = c([]), [D, fe] = c(0), [oe, me] = c([]), [I, ie] = c([]), [W, ge] = c(20), [V, G] = c(0), [yt, he] = c(null), [X, P] = c(null), [a, _] = c(!1), [xe, se] = c(!1), [ae, Te] = c(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), J = oe(null), Re = oe(null), We = oe(0), [m, E] = c({ list: null, id: null, side: null }), [d, ze] = c(!1), [Ee, Q] = c(1), [Se, ee] = c(null), [Pe, Be] = c(!1), [$, Le] = c(!1), [O, Me] = c(!1), [N, Ae] = c(!1), [G, $e] = c(!1), [X, Oe] = c(!1), [j, Ne] = c(!1), [F, Ge] = c(!1), [q, Xe] = c(!1), [wn, je] = c(!1), [fn, Fe] = c(!1);
-  V(() => {
+  ), q = re(null), De = re(null), ye = re(0), [x, B] = c({ list: null, id: null, side: null }), [m, Re] = c(!1), [ze, U] = c(1), [be, J] = c(null), [Ee, Pe] = c(!1), [Be, Le] = c(!1), [Me, We] = c(!1), [Ae, He] = c(!1), [$e, Oe] = c(!1), [Ne, Ge] = c(!1), [Xe, je] = c(!1), [Fe, Ve] = c(!1), [qe, Ue] = c(!1), [bt, Je] = c(!1), [wt, Ye] = c(!1);
+  j(() => {
     const e = () => {
-      const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, r = n < 700, p = t / n > 1.8, w = t === 768 && n === 1024, o = t === 1024 && n === 768, h = t === 820 && n === 1180, R = t === 1180 && n === 820, v = t === 540 && n === 720, re = t === 720 && n === 540, He = t === 1024 && n === 1366, Ie = t === 1366 && n === 1024, Ce = t >= 1200 && n >= 600 && !i;
-      Be(Ce), Le(w), Me(o), Ae(h), $e(R), Oe(v), Ne(re), Ge(He), Xe(Ie), Fe(p);
-      const on = i && t > n || i || // ✅ ВСЕ мобильные устройства (включая portrait)
-      n < 700 || p || // ✅ Широкие экраны
-      t === 1366 && n === 766 || t === 1366 && n === 768 || t === 1280 && n === 720 || t === 1440 && n === 900 || w || o || h || R || v || re || He || Ie || Ce;
-      if (je(on), ze(i), i)
-        ee(null), Q(1);
+      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), Le(g), We(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)
+        J(k), U(1);
       else if (r)
-        ee(null), Q(1);
+        J(null), U(1);
+      else if (o)
+        J(null), U(1);
       else if (p) {
-        const pe = Math.min(1e3, Math.min(t, n) * 0.9);
-        ee(pe), Q(0.85);
+        const le = Math.min(1e3, Math.min(n, t) * 0.9);
+        J(le), U(0.85);
       } else {
-        const pe = Math.min(1e3, Math.min(t, n) * 0.9);
-        ee(pe), Q(1);
+        const le = Math.min(1e3, Math.min(n, t) * 0.9);
+        J(le), U(1);
       }
     };
-    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, []);
-  const ne = (e, t, n, i) => {
-    if (l) return;
-    let r = [...ae], p = [...k];
-    const w = e === "bank" ? r : p, o = t === "bank" ? r : p, h = w.findIndex((re) => re.id === n);
-    if (h === -1) return;
-    const [R] = w.splice(h, 1);
-    let v = i;
-    e === t && v !== null && v !== void 0 && v > h && (v = v - 1), v == null || v < 0 || v > o.length ? o.push(R) : o.splice(v, 0, R), e === "bank" ? r = w : p = w, t === "bank" ? r = o : p = o, me(r), le(p);
-  }, Y = (e, t, n) => {
-    if (e.preventDefault(), l) {
-      E({ list: null, id: null, side: null });
+    if (e(), $ === void 0 && H === void 0)
+      return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, [$, H, 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);
+    let C = r;
+    e === n && C !== null && C !== void 0 && C > d && (C = C - 1), C == null || C < 0 || C > i.length ? i.push(R) : i.splice(C, 0, R), e === "bank" ? o = g : p = g, n === "bank" ? o = i : p = i, me(o), ie(p);
+  }, Y = (e, n, t) => {
+    if (e.preventDefault(), a) {
+      B({ 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 p = ae.some((h) => h.id === r), w = k.some((h) => h.id === r), o = p ? "bank" : w ? "selected" : null;
-      return o ? JSON.stringify({ from: o, id: r }) : "";
+    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 }) : "";
     })();
-    if (i) {
+    if (r) {
       try {
-        const r = JSON.parse(i);
-        if (!r || !r.id || !r.from) return;
-        ne(r.from, t, r.id, n);
+        const o = JSON.parse(r);
+        if (!o || !o.id || !o.from) return;
+        Q(o.from, n, o.id, t);
       } catch {
       }
-      E({ list: null, id: null, side: null });
+      B({ list: null, id: null, side: null });
     }
-  }, qe = (e) => {
-    K(e), Re.current = e, Z(Array(e).fill("")), W("time");
-  }, Ve = (e) => {
-    we(e), W("type");
-  }, Ue = (e, t) => {
-    if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
+  }, Ke = (e) => {
+    de(e), De.current = e, Z(Array(e).fill("")), z("time");
+  }, Ze = (e) => {
+    ue(e), z("type");
+  }, _e = (e, n) => {
+    if (n.length > 41 || n && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(n))
       return;
-    const i = [...T];
-    i[e] = t, Z(i);
-    const r = de(i);
-    r.isValid || console.warn("Validation errors:", r.errors);
-  }, Je = (e) => e.trim().replace(/\s+/g, " "), ke = (e) => {
-    const t = window.innerWidth >= 768 && window.innerWidth < 1300;
+    const r = [...T];
+    r[e] = n, Z(r);
+    const o = K(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;
     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;
-  }, Ye = () => {
-    T.some((t) => t.trim().length === 0) || (Z((t) => t.map((n) => Je(n))), M(0), fe(0), We.current = 0, ye(null), W("getready"));
+  }, 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"));
   };
-  V(() => {
-    if (y === "getready") {
-      const e = setTimeout(() => te(0), 3e3);
+  j(() => {
+    if (S === "getready") {
+      const e = setTimeout(() => ee(0), 3e3);
       return () => clearTimeout(e);
     }
-  }, [y]);
-  const te = (e) => {
-    const t = T[e];
-    if (!t) return;
-    const i = gn(
-      t.trim().split(/\s+/).filter(Boolean)
-    ).map((r, p) => ({
+  }, [S]);
+  const ee = (e) => {
+    const n = T[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: r
+      text: o
     }));
-    me(i), le([]), fe(e), We.current = e, xe(ue || 20), z(null), _(!1), ce(!1), W("play");
+    me(r), ie([]), fe(e), ye.current = e, ge(pe || 20), P(null), _(!1), se(!1), z("play");
   };
-  V(() => (y === "play" && !l && (J.current !== null && window.clearTimeout(J.current), B > 0 ? J.current = window.setTimeout(() => xe((e) => e - 1), 1e3) : _(!0)), () => {
-    J.current !== null && window.clearTimeout(J.current);
-  }), [y, B, l]), V(() => {
-    if (y === "play" && l && B === 0) {
+  j(() => (S === "play" && !a && (q.current !== null && window.clearTimeout(q.current), W > 0 ? q.current = window.setTimeout(() => ge((e) => e - 1), 1e3) : _(!0)), () => {
+    q.current !== null && window.clearTimeout(q.current);
+  }), [S, W, a]), j(() => {
+    if (S === "play" && a && W === 0) {
       const e = T[D];
       if (!e) {
-        z(null);
+        P(null);
         return;
       }
-      const t = e.trim().split(/\s+/), n = k.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, p = t.filter((o, h) => n.includes(o) ? n[h] !== o : !1).length, w = i + r + p;
-      w === 0 ? (z("correct"), be || (ce(!0), M((o) => o + 1)), P("correct"), L("Correct! Well done!")) : w === 1 ? (z("almost"), M((o) => o + 0.5), P("half"), L("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), L("Not quite right. Keep trying!"));
+      const n = e.trim().split(/\s+/), t = I.map((i) => i.text), r = n.filter((i) => !t.includes(i)).length, o = t.filter((i) => !n.includes(i)).length, p = n.filter((i, d) => t.includes(i) ? t[d] !== i : !1).length, g = r + o + p;
+      g === 0 ? (P("correct"), xe || (se(!0), G((i) => i + 1)), L("correct"), A("Correct! Well done!")) : g === 1 ? (P("almost"), G((i) => i + 0.5), L("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), L("wrong"), A("Not quite right. Keep trying!"));
     }
-  }, [y, l, B, T, D, k, be]);
-  const Ke = (e = !0) => {
+  }, [S, a, W, T, D, I, xe]);
+  const tt = (e = !0) => {
     if (e) {
-      if (l) {
-        D + 1 < (C || 0) ? te(D + 1) : (W("results"), setTimeout(() => ie(), 600));
+      if (a) {
+        D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
         return;
       }
-      const t = T[D];
-      if (!t) {
-        D + 1 < (C || 0) ? te(D + 1) : (W("results"), setTimeout(() => ie(), 600));
+      const n = T[D];
+      if (!n) {
+        D + 1 < (E || 0) ? ee(D + 1) : (z("results"), setTimeout(() => te(), 600));
         return;
       }
-      const n = t.trim().split(/\s+/), i = k.map((h) => h.text), r = n.filter((h) => !i.includes(h)).length, p = i.filter((h) => !n.includes(h)).length, w = n.filter((h, R) => i.includes(h) ? i[R] !== h : !1).length, o = r + p + w;
-      o === 0 ? (M((h) => h + 1), z("correct"), ce(!0), P("correct"), L("Correct! Well done!")) : o === 1 ? (M((h) => h + 0.5), z("almost"), P("half"), L("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), L("Not quite right. Keep trying!")), D + 1 < (C || 0) ? setTimeout(() => te(D + 1), 800) : setTimeout(() => {
-        W("results"), setTimeout(() => ie(), 600);
+      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), L("correct"), A("Correct! Well done!")) : i === 1 ? (G((d) => d + 0.5), P("almost"), L("half"), A("Almost correct! Just one mistake.")) : (P("wrong"), L("wrong"), A("Not quite right. Keep trying!")), D + 1 < (E || 0) ? setTimeout(() => ee(D + 1), 800) : setTimeout(() => {
+        z("results"), setTimeout(() => te(), 600);
       }, 800);
     }
   };
-  V(() => {
-    y === "results" && U > he && (De(U), localStorage.setItem("magicSentenceBest", String(U)));
-  }, [y, U, he]);
-  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) {
+  j(() => {
+    S === "results" && V > ae && (Te(V), localStorage.setItem("magicSentenceBest", String(V)));
+  }, [S, V, ae]);
+  const L = (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":
-        n.frequency.value = 500;
+        t.frequency.value = 500;
         break;
       case "click":
-        n.frequency.value = 800;
+        t.frequency.value = 800;
         break;
       case "correct":
-        n.frequency.value = 1e3;
+        t.frequency.value = 1e3;
         break;
       case "half":
-        n.frequency.value = 700;
+        t.frequency.value = 700;
         break;
       case "wrong":
-        n.frequency.value = 200;
+        t.frequency.value = 200;
         break;
     }
-    i.gain.setValueAtTime(0.1, t.currentTime), n.start(), n.stop(t.currentTime + 0.2);
-  }, ie = () => {
-    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);
+    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() * i.width,
-      y: Math.random() * i.height - i.height,
+      x: Math.random() * r.width,
+      y: Math.random() * r.height - r.height,
       size: 6 + Math.random() * 6,
-      color: n[Math.floor(Math.random() * n.length)],
+      color: t[Math.floor(Math.random() * t.length)],
       speed: 2 + Math.random() * 4,
       tilt: Math.random() * 2 * Math.PI
-    })), w = () => {
-      r.clearRect(0, 0, i.width, i.height), p.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(w) : document.body.removeChild(i);
+    })), 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);
     };
-    w();
-  }, Ze = () => /* @__PURE__ */ x("div", { style: g.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: g.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ a("div", { style: {
+    g();
+  }, nt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select number of rounds" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: b() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ x(
+    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ y(
       "button",
       {
-        onClick: () => qe(e),
+        onClick: () => Ke(e),
         style: {
-          ...g.gmButton,
-          ...b("medium")
+          ...u.gmButton,
+          ...F("medium")
         },
         children: [
           e,
@@ -464,20 +474,20 @@ function yn(u = {}) {
       },
       e
     )) })
-  ] }), _e = () => /* @__PURE__ */ x("div", { style: g.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ a("p", { style: g.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ a("div", { style: {
+  ] }), rt = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ l("h1", { style: u.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ l("p", { style: u.gmBodyM, children: "Select time per round" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: b() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ x(
+    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ y(
       "button",
       {
-        onClick: () => Ve(e),
+        onClick: () => Ze(e),
         style: {
-          ...g.gmButton,
-          ...b("medium")
+          ...u.gmButton,
+          ...F("medium")
         },
         children: [
           e,
@@ -486,16 +496,16 @@ function yn(u = {}) {
       },
       e
     )) })
-  ] }), Qe = () => /* @__PURE__ */ x("div", { style: g.gmCenterScreen, children: [
-    /* @__PURE__ */ x("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), ot = () => /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+    /* @__PURE__ */ y("h2", { style: { ...u.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
-      C,
+      E,
       " sentence",
-      C && C > 1 ? "s" : "",
+      E && E > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ a("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ a("div", { style: {
+    /* @__PURE__ */ l("p", { style: { ...u.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ l("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: 12,
@@ -505,145 +515,147 @@ function yn(u = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: T.map((e, t) => /* @__PURE__ */ a(
+    }, children: T.map((e, n) => /* @__PURE__ */ l(
       "input",
       {
         value: e,
-        placeholder: `Sentence ${t + 1}`,
-        onChange: (n) => Ue(t, n.target.value),
+        placeholder: `Sentence ${n + 1}`,
+        onChange: (t) => _e(n, t.target.value),
         style: {
-          ...g.gmInput,
-          padding: f() ? "8px 12px" : "12px 16px",
-          fontSize: f() ? "14px" : "16px",
+          ...u.gmInput,
+          padding: b() ? "8px 12px" : "12px 16px",
+          fontSize: b() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
           // Центрируем placeholder текст
         }
       },
-      t
+      n
     )) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "button",
       {
-        onClick: Ye,
+        onClick: et,
         disabled: T.some((e) => e.trim().length === 0),
         style: {
-          ...g.gmButton,
+          ...u.gmButton,
           marginTop: 30,
           background: T.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
           cursor: T.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
-          ...b("large")
+          ...F("large")
         },
         children: "PLAY"
       }
     )
-  ] }), en = () => /* @__PURE__ */ x("div", { style: g.gmReadyWrapper, children: [
-    /* @__PURE__ */ a("h1", { style: {
-      ...g.gmHeadline1,
+  ] }), it = () => /* @__PURE__ */ y("div", { style: u.gmReadyWrapper, children: [
+    /* @__PURE__ */ l("h1", { style: {
+      ...u.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ a("div", { style: g.gmHourglass, children: "⏳" })
-  ] }), nn = () => /* @__PURE__ */ x("div", { style: g.gmGameLayout, children: [
-    /* @__PURE__ */ x("h2", { style: {
-      marginBottom: f() ? "5px" : "10px",
-      fontSize: f() ? "16px" : "20px"
+    /* @__PURE__ */ l("div", { style: u.gmHourglass, children: "⏳" })
+  ] }), st = () => /* @__PURE__ */ y("div", { style: u.gmGameLayout, children: [
+    /* @__PURE__ */ y("h2", { style: {
+      marginBottom: b() ? "5px" : "10px",
+      fontSize: b() ? "16px" : "20px"
     }, children: [
       "Round ",
       D + 1,
       "/",
-      C,
+      E,
       " — ",
-      l ? "TIME'S UP!" : `Time: ${B}s`
+      a ? "TIME'S UP!" : `Time: ${W}s`
     ] }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         style: {
           width: "60%",
-          height: f() ? "8px" : "14px",
+          height: b() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: f() ? "10px" : "20px"
+          marginBottom: b() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ l(
           "div",
           {
             style: {
               height: "100%",
-              width: `${B / (ue || 20) * 100}%`,
-              background: B <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${W / (pe || 20) * 100}%`,
+              background: W <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
         )
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
         onDrop: (e) => Y(e, "bank", null),
         style: {
           display: "flex",
-          flexWrap: I() ? "wrap" : "nowrap",
-          gap: d || window.innerWidth < 768 ? "6px" : "10px",
+          flexWrap: N() ? "wrap" : "nowrap",
+          gap: m || h() < 768 ? "6px" : "10px",
           justifyContent: "center",
-          marginBottom: d || window.innerWidth < 768 ? "15px" : "30px",
-          padding: d || window.innerWidth < 768 ? "5px" : "10px",
+          marginBottom: m || h() < 768 ? "15px" : "30px",
+          padding: m || h() < 768 ? "5px" : "10px",
           width: "100%",
           boxSizing: "border-box"
         },
-        children: ae.map((e, t) => /* @__PURE__ */ a(
+        children: oe.map((e, n) => /* @__PURE__ */ l(
           "div",
           {
-            draggable: !l,
+            draggable: !a,
             role: "button",
-            tabIndex: l ? -1 : 0,
-            "aria-label": l ? `Word: ${e.text} (time expired)` : cn("Drag word", e.text, "to build sentence"),
-            onDragStart: (n) => {
-              if (l) {
-                n.preventDefault();
+            tabIndex: a ? -1 : 0,
+            "aria-label": a ? `Word: ${e.text} (time expired)` : mt("Drag word", e.text, "to build sentence"),
+            onDragStart: (t) => {
+              if (a) {
+                t.preventDefault();
                 return;
               }
-              n.dataTransfer.setData(
+              t.dataTransfer.setData(
                 "application/x-token",
                 JSON.stringify({ from: "bank", id: e.id })
-              ), n.dataTransfer.setData("text/plain", e.id), L(`Dragging word: ${e.text}`);
+              ), t.dataTransfer.setData("text/plain", e.id), A(`Dragging word: ${e.text}`);
             },
-            onKeyDown: (n) => {
-              l || hn(n, () => ne("bank", "selected", e.id, null));
+            onKeyDown: (t) => {
+              a || gt(t, () => Q("bank", "selected", e.id, null));
             },
-            onDragOver: (n) => n.preventDefault(),
-            onDrop: (n) => {
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, p = n.clientX > r ? t + 1 : t;
-              E({ list: null, id: null, side: null }), n.stopPropagation(), Y(n, "bank", p);
+            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);
             },
-            onDragEnter: (n) => {
-              if (l) return;
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
-              E({ list: "bank", id: e.id, side: n.clientX > r ? "right" : "left" });
+            onDragEnter: (t) => {
+              if (a) return;
+              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
+              B({ list: "bank", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => E({ list: null, id: null, side: null }),
+            onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || ne("bank", "selected", e.id, null);
+              a || Q("bank", "selected", e.id, null);
             },
             style: {
-              padding: d || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
-              borderRadius: d || window.innerWidth < 768 ? "6px" : "10px",
+              padding: m || h() < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: m || h() < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: l ? "#f0f0f0" : "#f9f9f9",
-              cursor: l ? "not-allowed" : m.list === "bank" && m.id === e.id ? "grabbing" : "grab",
-              fontSize: d || window.innerWidth < 768 ? "12px" : window.innerWidth >= 768 && window.innerWidth < 1300 ? "14px" : "18px",
-              // Полный размер только для Pro и больших экранов
-              ...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: a ? "#f0f0f0" : "#f9f9f9",
+              cursor: a ? "not-allowed" : x.list === "bank" && x.id === e.id ? "grabbing" : "grab",
+              fontSize: (() => {
+                const t = h();
+                return m || t < 768 ? "12px" : t >= 768 && t < 1300 ? "14px" : "18px";
+              })(),
+              ...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: l ? 0.6 : 1,
+              opacity: a ? 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)"
               } : {}
@@ -654,90 +666,90 @@ function yn(u = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
         onDrop: (e) => {
-          const t = e.currentTarget.getBoundingClientRect(), n = Array.from(e.currentTarget.children);
-          if (n.length === 0) {
+          const n = e.currentTarget.getBoundingClientRect(), t = Array.from(e.currentTarget.children);
+          if (t.length === 0) {
             Y(e, "selected", 0);
             return;
           }
-          let i = k.length, r = 1 / 0;
-          n.forEach((p, w) => {
-            const o = p.getBoundingClientRect(), h = o.left + o.width / 2, R = Math.abs(e.clientX - h);
-            R < r && (r = R, i = e.clientX < h ? w : w + 1);
-          }), e.clientX > t.right - 30 && (i = k.length), e.clientX < t.left + 30 && (i = 0), Y(e, "selected", i);
+          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);
+          }), e.clientX > n.right - 30 && (r = I.length), e.clientX < n.left + 30 && (r = 0), Y(e, "selected", r);
         },
         style: {
-          minHeight: d || window.innerWidth < 768 ? "50px" : "70px",
+          minHeight: m || h() < 768 ? "50px" : "70px",
           width: "auto",
           // Автоматическая ширина в зависимости от содержимого
           maxWidth: "none",
           // Убираем ограничение максимальной ширины
           minWidth: "245px",
           // Минимальная ширина для растягивания
-          border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
-          borderRadius: d || window.innerWidth < 768 ? "8px" : "12px",
-          padding: d || window.innerWidth < 768 ? "8px" : "12px",
+          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",
           display: "flex",
-          flexWrap: I() ? "wrap" : "nowrap",
+          flexWrap: N() ? "wrap" : "nowrap",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: `${ke(k.length)}px`,
-          background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
-          overflowX: I() ? "hidden" : "auto",
-          whiteSpace: I() ? "normal" : "nowrap"
+          fontSize: `${we(I.length)}px`,
+          background: X === "correct" ? "#e8f5e8" : X === "almost" ? "#fff3e0" : X === "wrong" ? "#ffebee" : "#fafafa",
+          overflowX: N() ? "hidden" : "auto",
+          whiteSpace: N() ? "normal" : "nowrap"
         },
-        children: k.map((e, t) => /* @__PURE__ */ a(
+        children: I.map((e, n) => /* @__PURE__ */ l(
           "span",
           {
-            draggable: !l,
-            onDragStart: (n) => {
-              if (l) {
-                n.preventDefault();
+            draggable: !a,
+            onDragStart: (t) => {
+              if (a) {
+                t.preventDefault();
                 return;
               }
-              n.dataTransfer.setData(
+              t.dataTransfer.setData(
                 "application/x-token",
                 JSON.stringify({ from: "selected", id: e.id })
-              ), n.dataTransfer.setData("text/plain", e.id);
+              ), t.dataTransfer.setData("text/plain", e.id);
             },
-            onDragOver: (n) => n.preventDefault(),
-            onDrop: (n) => {
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, p = i.width * 0.25, w = n.clientX < r - p ? t : n.clientX > r + p || n.clientX > r ? t + 1 : t;
-              E({ list: null, id: null, side: null }), n.stopPropagation(), Y(n, "selected", w);
+            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);
             },
-            onDragEnter: (n) => {
-              if (l) return;
-              const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
-              E({ list: "selected", id: e.id, side: n.clientX > r ? "right" : "left" });
+            onDragEnter: (t) => {
+              if (a) return;
+              const r = t.currentTarget.getBoundingClientRect(), o = r.left + r.width / 2;
+              B({ list: "selected", id: e.id, side: t.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => E({ list: null, id: null, side: null }),
+            onDragLeave: () => B({ list: null, id: null, side: null }),
             onClick: () => {
-              l || ne("selected", "bank", e.id, null);
+              a || Q("selected", "bank", e.id, null);
             },
-            title: l ? "Time expired" : "Click to remove back to bank",
+            title: a ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: f() ? "4px 6px" : "6px 10px",
-              margin: f() ? "2px" : "4px",
-              borderRadius: f() ? "4px" : "8px",
-              background: l ? "#f0f0f0" : "#ffe9e7",
-              border: l ? "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: l ? "not-allowed" : m.list === "selected" && m.id === e.id ? "grabbing" : "grab",
+              padding: b() ? "4px 6px" : "6px 10px",
+              margin: b() ? "2px" : "4px",
+              borderRadius: b() ? "4px" : "8px",
+              background: a ? "#f0f0f0" : "#ffe9e7",
+              border: a ? "1px solid #ccc" : "1px solid #ec4c44",
+              ...x.list === "selected" && x.id === e.id && x.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
+              ...x.list === "selected" && x.id === e.id && x.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
+              cursor: a ? "not-allowed" : x.list === "selected" && x.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
-              fontSize: `${ke(k.length)}px`,
+              fontSize: `${we(I.length)}px`,
               // Адаптивный размер шрифта для слов
               fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: l ? 0.6 : 1,
+              opacity: a ? 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)"
               } : {}
@@ -748,119 +760,120 @@ function yn(u = {}) {
         ))
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ l(
       "button",
       {
-        onClick: () => Ke(!0),
-        disabled: !l && k.length === 0,
+        onClick: () => tt(!0),
+        disabled: !a && I.length === 0,
         style: {
-          marginTop: f() ? "15px" : "30px",
-          fontSize: f() ? "14px" : "20px",
-          padding: f() ? "6px 12px" : "10px 24px",
-          borderRadius: f() ? "8px" : "12px",
-          background: l || k.length > 0 ? "#ec4c44" : "#ccc",
+          marginTop: b() ? "15px" : "30px",
+          fontSize: b() ? "14px" : "20px",
+          padding: b() ? "6px 12px" : "10px 24px",
+          borderRadius: b() ? "8px" : "12px",
+          background: a || I.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: l || k.length > 0 ? "pointer" : "not-allowed"
+          cursor: a || I.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
     )
-  ] }), tn = () => /* @__PURE__ */ x("div", { style: g.gmCenterScreen, children: [
-    /* @__PURE__ */ a("h1", { style: {
-      ...g.gmHeadline1,
-      marginTop: (d && 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: d && 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: d && 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__ */ x("h2", { style: {
-      ...g.gmHeadline2,
-      marginTop: (d && 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: d && 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: d && 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,
-      " out of ",
-      C
-    ] }),
-    /* @__PURE__ */ x("p", { style: {
-      ...g.gmBodyM,
-      color: "#10b981",
-      marginTop: d && 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: d && 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: d && 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
-    ] }),
-    /* @__PURE__ */ x("div", { style: {
-      display: "flex",
-      gap: d && window.innerWidth > window.innerHeight || d && 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: d && window.innerWidth > window.innerHeight || d && 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"
-    }, children: [
-      /* @__PURE__ */ a(
-        "button",
-        {
-          onClick: () => {
-            ie(), P("start"), setTimeout(() => {
-              W("getready"), ye(null), _(!1);
-            }, 800);
-          },
-          style: {
-            ...g.gmButton,
-            ...b("medium")
-          },
-          children: "🔁 Play again"
-        }
-      ),
-      /* @__PURE__ */ a(
-        "button",
-        {
-          onClick: () => {
-            P("click"), W("select"), K(null), we(null), Z([]), M(0), le([]), _(!1);
-          },
-          style: {
-            ...g.gmButton,
-            ...b("medium")
-          },
-          children: "⬅️ Exit"
-        }
-      )
-    ] })
-  ] }), ve = !d && S, rn = sn(
+  ] }), at = () => {
+    const e = h(), n = w(), t = m && e > n || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430 || Be || Me || Ae || $e || Ne || Xe || Fe || qe, r = m && e <= 375 && n <= 667 || e === 896 && n === 414 || e === 844 && n === 390 || e === 926 && n === 428 || e === 932 && n === 430, o = e === 1366 && n === 766 || e === 1366 && n === 768 || e === 1280 && n === 720 || e === 1440 && n === 900;
+    return /* @__PURE__ */ y("div", { style: u.gmCenterScreen, children: [
+      /* @__PURE__ */ l("h1", { style: {
+        ...u.gmHeadline1,
+        marginTop: "0px",
+        marginBottom: t ? "2px" : "10px",
+        fontSize: r ? "32px" : "clamp(28px, 4vw, 40px)"
+      }, children: "Game Over 🎯" }),
+      /* @__PURE__ */ y("h2", { style: {
+        ...u.gmHeadline2,
+        marginTop: "0px",
+        marginBottom: t ? "2px" : "16px",
+        fontSize: r ? "18px" : "24px"
+      }, children: [
+        "Your score: ",
+        V,
+        " out of ",
+        E
+      ] }),
+      /* @__PURE__ */ y("p", { style: {
+        ...u.gmBodyM,
+        color: "#10b981",
+        marginTop: t ? "0px" : "12px",
+        marginBottom: t ? "2px" : "16px",
+        fontSize: r ? "14px" : "16px"
+      }, children: [
+        "Best score: ",
+        ae
+      ] }),
+      /* @__PURE__ */ y("div", { style: {
+        display: "flex",
+        gap: t || m && e <= 375 && n <= 667 ? "6px" : "12px",
+        marginTop: t || m && e <= 375 && n <= 667 ? "2px" : o || Ee ? "12px" : "24px"
+      }, children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            onClick: () => {
+              te(), L("start"), setTimeout(() => {
+                z("getready"), he(null), _(!1);
+              }, 800);
+            },
+            style: {
+              ...u.gmButton,
+              ...F("medium")
+            },
+            children: "🔁 Play again"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            onClick: () => {
+              L("click"), z("select"), de(null), ue(null), Z([]), G(0), ie([]), _(!1);
+            },
+            style: {
+              ...u.gmButton,
+              ...F("medium")
+            },
+            children: "⬅️ Exit"
+          }
+        )
+      ] })
+    ] });
+  }, Se = !m && v, lt = dt(
     () => {
-      if (d && window.innerWidth > window.innerHeight || window.innerHeight < 700 || !ve)
+      const e = h(), n = w();
+      if (m && e > n || n < 700 || !Se)
         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__ */ a("div", { style: { ...g.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ x("picture", { children: [
-          /* @__PURE__ */ a(
-            "source",
-            {
-              srcSet: `${e}.svg`,
-              type: "image/svg+xml"
-            }
-          ),
-          /* @__PURE__ */ a(
-            "img",
-            {
-              src: `${e}.png`,
-              alt: "SPEAKID Logo",
-              style: g.gmLogoImg,
-              loading: "lazy"
-            }
-          )
-        ] }) })
-      );
+      const t = s || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo` : "/cloud/speakid/games/magic%20sentence/logo");
+      return /* @__PURE__ */ l("div", { style: u.gmLogoFixed, children: /* @__PURE__ */ y("picture", { children: [
+        /* @__PURE__ */ l(
+          "source",
+          {
+            srcSet: `${t}.svg`,
+            type: "image/svg+xml"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "img",
+          {
+            src: `${t}.png`,
+            alt: "SPEAKID Logo",
+            style: u.gmLogoImg,
+            loading: "lazy"
+          }
+        )
+      ] }) });
     },
-    [d, ve, s]
+    [m, Se, s, $, H]
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
-      ref: se,
+      ref: M,
       style: {
         width: "100%",
         height: "100%",
@@ -876,53 +889,55 @@ function yn(u = {}) {
         right: 0,
         bottom: 0
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ y(
         "div",
         {
           style: {
-            width: d ? "100%" : Se || 1e3,
-            height: d ? "100%" : Se || 1e3,
+            width: m ? "100%" : be || 1e3,
+            height: m ? "100%" : be || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: d ? 0 : "20px",
+            borderRadius: m ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: d ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: d ? "0 auto" : "unset",
+            boxShadow: m ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: m ? "0 auto" : "unset",
             position: "relative",
             // needed so absolute logo is inside the square
-            transform: `scale(${Ee})`
+            transform: `scale(${ze})`
             // ✅ Применяем масштаб для широких экранов
           },
-          children: /* @__PURE__ */ a(
-            "div",
-            {
-              style: {
-                transform: "translateZ(0)",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ x("div", { id: "magic-sentence-root", children: [
-                rn,
-                y === "select" ? Ze() : null,
-                y === "time" ? _e() : null,
-                y === "type" ? Qe() : null,
-                y === "getready" ? en() : null,
-                y === "play" ? nn() : null,
-                y === "results" ? tn() : null
-              ] })
-            }
-          )
+          children: [
+            lt,
+            /* @__PURE__ */ l(
+              "div",
+              {
+                style: {
+                  transform: "translateZ(0)",
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ y("div", { id: "magic-sentence-root", children: [
+                  S === "select" ? nt() : null,
+                  S === "time" ? rt() : null,
+                  S === "type" ? ot() : null,
+                  S === "getready" ? it() : null,
+                  S === "play" ? st() : null,
+                  S === "results" ? at() : null
+                ] })
+              }
+            )
+          ]
         }
       )
     }
   );
 }
-class bn extends dn {
+class It extends pt {
   constructor(s) {
     super(s), this.state = { hasError: !1 };
   }
@@ -932,17 +947,17 @@ class bn extends dn {
       error: s
     };
   }
-  componentDidCatch(s, S) {
-    console.error("Game Error:", s, S), this.setState({
+  componentDidCatch(s, v) {
+    console.error("Game Error:", s, v), this.setState({
       error: s,
-      errorInfo: S
+      errorInfo: v
     });
   }
   handleReset = () => {
     this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
   };
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ x("div", { style: {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ y("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -954,9 +969,9 @@ class bn extends dn {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ a("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ a("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ l("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
+      /* @__PURE__ */ l("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
+      /* @__PURE__ */ l(
         "button",
         {
           onClick: this.handleReset,
@@ -975,9 +990,9 @@ class bn extends dn {
           children: "🔄 Restart Game"
         }
       ),
-      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ x("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
-        /* @__PURE__ */ a("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
-        /* @__PURE__ */ x("pre", { style: {
+      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ y("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
+        /* @__PURE__ */ l("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ y("pre", { style: {
           backgroundColor: "#f3f4f6",
           padding: "12px",
           borderRadius: "4px",
@@ -993,12 +1008,12 @@ class bn extends dn {
   }
 }
 export {
-  bn as ErrorBoundary,
-  yn as Game,
-  L as announceToScreenReader,
-  cn as createAriaLabel,
-  yn as default,
-  hn as handleKeyDown,
-  ln as useValidation
+  It as ErrorBoundary,
+  kt as Game,
+  A as announceToScreenReader,
+  mt as createAriaLabel,
+  kt as default,
+  gt as handleKeyDown,
+  ft as useValidation
 };
 //# sourceMappingURL=speakid-build-a-sentence.es.js.map