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

speakid-build-a-sentence 1.0.19 → 1.0.20

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

Files changed (7) hide show

package/dist/Game.d.ts.map +1 -1
package/dist/Game.styles.d.ts.map +1 -1
package/dist/speakid-build-a-sentence.cjs.js +10 -10
package/dist/speakid-build-a-sentence.cjs.js.map +1 -1
package/dist/speakid-build-a-sentence.es.js +421 -392
package/dist/speakid-build-a-sentence.es.js.map +1 -1
package/package.json +1 -1

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

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