speakid-build-a-sentence 1.0.15 → 1.0.17

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

@@ -1,283 +1,6 @@
-import on, { useState as g, useCallback as Ee, useRef as je, useEffect as ue, Component as sn } from "react";
-var ve = { exports: {} }, pe = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Pe;
-function an() {
-  if (Pe) return pe;
-  Pe = 1;
-  var p = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
-  function S(j, W, w) {
-    var P = null;
-    if (w !== void 0 && (P = "" + w), W.key !== void 0 && (P = "" + W.key), "key" in W) {
-      w = {};
-      for (var R in W)
-        R !== "key" && (w[R] = W[R]);
-    } else w = W;
-    return W = w.ref, {
-      $$typeof: p,
-      type: j,
-      key: P,
-      ref: W !== void 0 ? W : null,
-      props: w
-    };
-  }
-  return pe.Fragment = d, pe.jsx = S, pe.jsxs = S, pe;
-}
-var fe = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var He;
-function ln() {
-  return He || (He = 1, process.env.NODE_ENV !== "production" && (function() {
-    function p(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === V ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case E:
-          return "Fragment";
-        case _:
-          return "Profiler";
-        case U:
-          return "StrictMode";
-        case I:
-          return "Suspense";
-        case ae:
-          return "SuspenseList";
-        case $:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case ge:
-            return "Portal";
-          case se:
-            return e.displayName || "Context";
-          case he:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case me:
-            var a = e.render;
-            return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case z:
-            return a = e.displayName || null, a !== null ? a : p(e.type) || "Memo";
-          case J:
-            a = e._payload, e = e._init;
-            try {
-              return p(e(a));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function d(e) {
-      return "" + e;
-    }
-    function S(e) {
-      try {
-        d(e);
-        var a = !1;
-      } catch {
-        a = !0;
-      }
-      if (a) {
-        a = console;
-        var r = a.error, b = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return r.call(
-          a,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          b
-        ), d(e);
-      }
-    }
-    function j(e) {
-      if (e === E) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === J)
-        return "<...>";
-      try {
-        var a = p(e);
-        return a ? "<" + a + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function W() {
-      var e = we.A;
-      return e === null ? null : e.getOwner();
-    }
-    function w() {
-      return Error("react-stack-top-frame");
-    }
-    function P(e) {
-      if (le.call(e, "key")) {
-        var a = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (a && a.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function R(e, a) {
-      function r() {
-        c || (c = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          a
-        ));
-      }
-      r.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: r,
-        configurable: !0
-      });
-    }
-    function f() {
-      var e = p(this.type);
-      return F[e] || (F[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function D(e, a, r, b, de, G) {
-      var x = r.ref;
-      return e = {
-        $$typeof: oe,
-        type: e,
-        key: a,
-        props: r,
-        _owner: b
-      }, (x !== void 0 ? x : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: f
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: de
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: G
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function y(e, a, r, b, de, G) {
-      var x = a.children;
-      if (x !== void 0)
-        if (b)
-          if (M(x)) {
-            for (b = 0; b < x.length; b++)
-              T(x[b]);
-            Object.freeze && Object.freeze(x);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else T(x);
-      if (le.call(a, "key")) {
-        x = p(e);
-        var O = Object.keys(a).filter(function(Se) {
-          return Se !== "key";
-        });
-        b = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", L[x + b] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          b,
-          x,
-          O,
-          x
-        ), L[x + b] = !0);
-      }
-      if (x = null, r !== void 0 && (S(r), x = "" + r), P(a) && (S(a.key), x = "" + a.key), "key" in a) {
-        r = {};
-        for (var ce in a)
-          ce !== "key" && (r[ce] = a[ce]);
-      } else r = a;
-      return x && R(
-        r,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), D(
-        e,
-        x,
-        r,
-        W(),
-        de,
-        G
-      );
-    }
-    function T(e) {
-      H(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === J && (e._payload.status === "fulfilled" ? H(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function H(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === oe;
-    }
-    var B = on, oe = Symbol.for("react.transitional.element"), ge = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), _ = Symbol.for("react.profiler"), he = Symbol.for("react.consumer"), se = Symbol.for("react.context"), me = Symbol.for("react.forward_ref"), I = Symbol.for("react.suspense"), ae = Symbol.for("react.suspense_list"), z = Symbol.for("react.memo"), J = Symbol.for("react.lazy"), $ = Symbol.for("react.activity"), V = Symbol.for("react.client.reference"), we = B.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, le = Object.prototype.hasOwnProperty, M = Array.isArray, A = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    B = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var c, F = {}, X = B.react_stack_bottom_frame.bind(
-      B,
-      w
-    )(), xe = A(j(w)), L = {};
-    fe.Fragment = E, fe.jsx = function(e, a, r) {
-      var b = 1e4 > we.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        a,
-        r,
-        !1,
-        b ? Error("react-stack-top-frame") : X,
-        b ? A(j(e)) : xe
-      );
-    }, fe.jsxs = function(e, a, r) {
-      var b = 1e4 > we.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        a,
-        r,
-        !0,
-        b ? Error("react-stack-top-frame") : X,
-        b ? A(j(e)) : xe
-      );
-    };
-  })()), fe;
-}
-var Ce;
-function dn() {
-  return Ce || (Ce = 1, process.env.NODE_ENV === "production" ? ve.exports = an() : ve.exports = ln()), ve.exports;
-}
-var s = dn();
-const cn = `
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { useState as p, useCallback as pe, useRef as We, useEffect as V, Component as Ye } from "react";
+const Ke = `
   @keyframes magic-sentence-spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -312,10 +35,10 @@ const cn = `
   }
 `;
 if (typeof document < "u" && !document.getElementById("magic-sentence-keyframes")) {
-  const p = document.createElement("style");
-  p.id = "magic-sentence-keyframes", p.innerHTML = cn, document.head.appendChild(p);
+  const h = document.createElement("style");
+  h.id = "magic-sentence-keyframes", h.innerHTML = Ke, document.head.appendChild(h);
 }
-const Ae = {
+const Se = {
   spin: {
     animation: "magic-sentence-spin 1.4s linear infinite"
   },
@@ -334,7 +57,7 @@ const Ae = {
   glow: {
     animation: "magic-sentence-glow 1s ease-in-out infinite"
   }
-}, h = {
+}, g = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -448,62 +171,64 @@ const Ae = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Ae.spin
+    ...Se.spin
   },
   // ===== Анимационные стили =====
-  ...Ae
-}, un = () => {
-  const [p, d] = g([]), S = Ee((w, P, R) => {
-    const f = [];
-    w.trim() || f.push({
+  ...Se
+}, _e = () => {
+  const [h, r] = p([]), y = pe((S, M, C) => {
+    const c = [];
+    S.trim() || c.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), w.length > 41 && f.push({
+    }), S.length > 41 && c.push({
       type: "length",
-      message: `Sentence is too long (${w.length}/41 characters)`
-    }), w && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(w) && f.push({
+      message: `Sentence is too long (${S.length}/41 characters)`
+    }), S && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(S) && c.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const y = R.findIndex((T, H) => H !== P && T.toLowerCase().trim() === w.toLowerCase().trim());
-    return y !== -1 && f.push({
+    const f = C.findIndex((k, I) => I !== M && k.toLowerCase().trim() === S.toLowerCase().trim());
+    return f !== -1 && c.push({
       type: "duplicate",
-      message: `Duplicate sentence (same as sentence ${y + 1})`
-    }), d(f), {
-      isValid: f.length === 0,
-      errors: f
+      message: `Duplicate sentence (same as sentence ${f + 1})`
+    }), r(c), {
+      isValid: c.length === 0,
+      errors: c
     };
-  }, []), j = Ee((w) => {
-    const P = [];
-    return w.forEach((R, f) => {
-      const D = S(R, f, w);
-      P.push(...D.errors.map((y) => ({
-        ...y,
-        message: `Sentence ${f + 1}: ${y.message}`
+  }, []), B = pe((S) => {
+    const M = [];
+    return S.forEach((C, c) => {
+      const D = y(C, c, S);
+      M.push(...D.errors.map((f) => ({
+        ...f,
+        message: `Sentence ${c + 1}: ${f.message}`
       })));
     }), {
-      isValid: P.length === 0,
-      errors: P
+      isValid: M.length === 0,
+      errors: M
     };
-  }, [S]), W = Ee(() => {
-    d([]);
+  }, [y]), ne = pe(() => {
+    r([]);
   }, []);
   return {
-    errors: p,
-    validateSentence: S,
-    validateAllSentences: j,
-    clearErrors: W
+    errors: h,
+    validateSentence: y,
+    validateAllSentences: B,
+    clearErrors: ne
   };
-}, pn = (p, d, S) => d && S ? `${p} word "${d}" ${S}` : d ? `${p} word "${d}"` : p, fn = (p, d, S = ["Enter", " "]) => {
-  S.includes(p.key) && (p.preventDefault(), d());
-}, Y = (p) => {
-  const d = document.createElement("div");
-  d.setAttribute("aria-live", "polite"), d.setAttribute("aria-atomic", "true"), d.style.position = "absolute", d.style.left = "-10000px", d.style.width = "1px", d.style.height = "1px", d.style.overflow = "hidden", document.body.appendChild(d), d.textContent = p, setTimeout(() => {
-    document.body.removeChild(d);
+}, en = (h, r, y) => r && y ? `${h} word "${r}" ${y}` : r ? `${h} word "${r}"` : h, nn = (h, r, y = ["Enter", " "]) => {
+  y.includes(h.key) && (h.preventDefault(), r());
+}, E = (h) => {
+  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 = h, setTimeout(() => {
+    document.body.removeChild(r);
   }, 1e3);
-}, gn = () => {
-  const p = document.createElement("style");
-  p.textContent = `
+}, tn = () => {
+  const h = document.createElement("style");
+  h.id = "magic-sentence-reset";
+  const r = document.getElementById("magic-sentence-reset");
+  r && r.remove(), h.textContent = `
     #magic-sentence-root, #magic-sentence-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -529,17 +254,17 @@ const Ae = {
       height: 100% !important;
       overflow: hidden !important;
     }
-  `, document.head.appendChild(p);
-}, hn = (p) => [...p].sort(() => Math.random() - 0.5);
-function wn(p = {}) {
-  const { logoUrl: d, showLogo: S = !0, baseURL: j } = p, W = je(null), { validateAllSentences: w, errors: P } = un(), R = () => r || window.innerWidth < 768, f = () => r || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, D = (n = "medium") => {
-    if (!f())
+  `, document.head.appendChild(h);
+}, on = (h) => [...h].sort(() => Math.random() - 0.5);
+function ln(h = {}) {
+  const { logoUrl: r, showLogo: y = !0, baseURL: B } = h, ne = We(null), { validateAllSentences: S, errors: M } = _e(), C = () => d || window.innerWidth < 768, c = () => d || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, D = (e = "medium") => {
+    if (!c())
       return {
         padding: "12px 24px",
         fontSize: "16px",
         minWidth: "auto"
       };
-    switch (n) {
+    switch (e) {
       case "small":
         return {
           padding: "4px 6px",
@@ -560,201 +285,203 @@ function wn(p = {}) {
         };
     }
   };
-  ue(() => (gn(), () => {
-    document.body.style.overflow = "";
+  V(() => (tn(), () => {
+    document.documentElement.style.overflow = "", document.body.style.overflow = "";
+    const e = document.getElementById("magic-sentence-reset");
+    e && e.remove();
   }), []);
-  const [y, T] = g("select"), [H, B] = g(null), [oe, ge] = g(null), [E, U] = g([]), [_, he] = g(0), [se, me] = g([]), [I, ae] = g([]), [z, J] = g(20), [$, V] = g(0), [we, le] = g(null), [M, A] = g(null), [c, F] = g(!1), [X, xe] = g(
+  const [f, k] = p("select"), [I, ge] = p(null), [he, we] = p(null), [H, q] = p([]), [T, ue] = p(0), [te, me] = p([]), [v, ie] = p([]), [L, fe] = p(20), [J, Y] = p(0), [rn, xe] = p(null), [A, z] = p(null), [l, K] = p(!1), [oe, ve] = p(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), L = je(null), [e, a] = g({ list: null, index: null, side: null }), [r, b] = g(!1), [de, G] = g(1), [x, O] = g(null), [ce, Se] = g(!1), [q, De] = g(!1), [Z, _e] = g(!1), [Q, Oe] = g(!1), [K, ze] = g(!1), [ee, Me] = g(!1), [ne, Le] = g(!1), [te, Ne] = g(!1), [ie, Be] = g(!1);
-  ue(() => {
-    const n = () => {
-      const i = window.innerWidth, t = window.innerHeight, o = i < 768 || i === 926 && t === 428 || i === 932 && t === 430, l = t < 700, v = i === 768 && t === 1024, k = i === 1024 && t === 768, u = i === 820 && t === 1180, m = i === 1180 && t === 820, re = i === 540 && t === 720, C = i === 720 && t === 540, Re = i === 1024 && t === 1366, nn = i === 1366 && t === 1024, tn = i >= 1200 && t >= 600 && !o;
-      if (Se(tn), De(v), _e(k), Oe(u), ze(m), Me(re), Le(C), Ne(Re), Be(nn), b(o), o)
-        O(null), G(1);
-      else if (l)
-        O(null), G(1);
+  ), U = We(null), [b, P] = p({ list: null, index: null, side: null }), [d, ke] = p(!1), [sn, re] = p(1), [ye, se] = p(null), [He, Ie] = p(!1), [$, Ce] = p(!1), [G, De] = p(!1), [N, Te] = p(!1), [j, Pe] = p(!1), [O, Re] = p(!1), [F, ze] = p(!1), [Z, Ee] = p(!1), [Q, Be] = p(!1);
+  V(() => {
+    const e = () => {
+      const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, o = n < 700, u = t === 768 && n === 1024, x = t === 1024 && n === 768, s = t === 820 && n === 1180, w = t === 1180 && n === 820, X = t === 540 && n === 720, W = t === 720 && n === 540, ce = t === 1024 && n === 1366, Ue = t === 1366 && n === 1024, Ve = t >= 1200 && n >= 600 && !i;
+      if (Ie(Ve), Ce(u), De(x), Te(s), Pe(w), Re(X), ze(W), Ee(ce), Be(Ue), ke(i), i)
+        se(null), re(1);
+      else if (o)
+        se(null), re(1);
       else {
-        const rn = Math.min(1e3, Math.min(i, t) * 0.9);
-        O(rn), G(1);
+        const qe = Math.min(1e3, Math.min(t, n) * 0.9);
+        se(qe), re(1);
       }
     };
-    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const ye = (n, i, t, o) => {
-    if (c) return;
-    let l = [...se], v = [...I];
-    const k = n === "bank" ? l : v, u = i === "bank" ? l : v, m = k.findIndex((Re) => Re.id === t);
-    if (m === -1) return;
-    const [re] = k.splice(m, 1);
-    let C = o;
-    n === i && C !== null && C !== void 0 && C > m && (C = C - 1), C == null || C < 0 || C > u.length ? u.push(re) : u.splice(C, 0, re), n === "bank" ? l = k : v = k, i === "bank" ? l = u : v = u, me(l), ae(v);
-  }, be = (n, i, t) => {
-    if (n.preventDefault(), c) {
-      a({ list: null, index: null, side: null });
+  const _ = (e, t, n, i) => {
+    if (l) return;
+    let o = [...te], u = [...v];
+    const x = e === "bank" ? o : u, s = t === "bank" ? o : u, w = x.findIndex((ce) => ce.id === n);
+    if (w === -1) return;
+    const [X] = x.splice(w, 1);
+    let W = i;
+    e === t && W !== null && W !== void 0 && W > w && (W = W - 1), W == null || W < 0 || W > s.length ? s.push(X) : s.splice(W, 0, X), e === "bank" ? o = x : u = x, t === "bank" ? o = s : u = s, me(o), ie(u);
+  }, ee = (e, t, n) => {
+    if (e.preventDefault(), l) {
+      P({ list: null, index: null, side: null });
       return;
     }
-    const o = n.dataTransfer.getData("application/x-token") || (() => {
-      const l = n.dataTransfer.getData("text/plain");
-      if (!l) return "";
-      const v = se.some((m) => m.id === l), k = I.some((m) => m.id === l), u = v ? "bank" : k ? "selected" : null;
-      return u ? JSON.stringify({ from: u, id: l }) : "";
+    const i = e.dataTransfer.getData("application/x-token") || (() => {
+      const o = e.dataTransfer.getData("text/plain");
+      if (!o) return "";
+      const u = te.some((w) => w.id === o), x = v.some((w) => w.id === o), s = u ? "bank" : x ? "selected" : null;
+      return s ? JSON.stringify({ from: s, id: o }) : "";
     })();
-    if (o) {
+    if (i) {
       try {
-        const l = JSON.parse(o);
-        if (!l || !l.id || !l.from) return;
-        ye(l.from, i, l.id, t);
+        const o = JSON.parse(i);
+        if (!o || !o.id || !o.from) return;
+        _(o.from, t, o.id, n);
       } catch {
       }
-      a({ list: null, index: null, side: null });
+      P({ list: null, index: null, side: null });
     }
-  }, $e = (n) => {
-    B(n), U(Array(n).fill("")), T("time");
-  }, Fe = (n) => {
-    ge(n), T("type");
-  }, Ge = (n, i) => {
-    if (i.length > 41 || i && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(i))
+  }, Me = (e) => {
+    ge(e), q(Array(e).fill("")), k("time");
+  }, Le = (e) => {
+    we(e), k("type");
+  }, Ae = (e, t) => {
+    if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
       return;
-    const o = [...E];
-    o[n] = i, U(o);
-    const l = w(o);
-    l.isValid || console.warn("Validation errors:", l.errors);
-  }, Ye = (n) => n.trim().replace(/\s+/g, " "), Te = (n) => n <= 3 ? 20 : n <= 5 ? 18 : n <= 7 ? 16 : n <= 9 ? 14 : 12, Ue = () => {
-    E.some((i) => i.trim().length === 0) || (U((i) => i.map((t) => Ye(t))), V(0), he(0), le(null), T("getready"));
+    const i = [...H];
+    i[e] = t, q(i);
+    const o = S(i);
+    o.isValid || console.warn("Validation errors:", o.errors);
+  }, $e = (e) => e.trim().replace(/\s+/g, " "), be = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ge = () => {
+    H.some((t) => t.trim().length === 0) || (q((t) => t.map((n) => $e(n))), Y(0), ue(0), xe(null), k("getready"));
   };
-  ue(() => {
-    if (y === "getready") {
-      const n = setTimeout(() => ke(0), 3e3);
-      return () => clearTimeout(n);
+  V(() => {
+    if (f === "getready") {
+      const e = setTimeout(() => ae(0), 3e3);
+      return () => clearTimeout(e);
     }
-  }, [y]);
-  const ke = (n) => {
-    const i = E[n];
-    if (!i) return;
-    const o = hn(
-      i.trim().split(/\s+/).filter(Boolean)
-    ).map((l, v) => ({
-      id: `${Date.now()}-${n}-${v}-${Math.random().toString(36).slice(2)}`,
-      text: l
+  }, [f]);
+  const ae = (e) => {
+    const t = H[e];
+    if (!t) return;
+    const i = on(
+      t.trim().split(/\s+/).filter(Boolean)
+    ).map((o, u) => ({
+      id: `${Date.now()}-${e}-${u}-${Math.random().toString(36).slice(2)}`,
+      text: o
     }));
-    me(o), ae([]), he(n), J(oe || 20), A(null), F(!1), T("play");
+    me(i), ie([]), ue(e), fe(he || 20), z(null), K(!1), k("play");
   };
-  ue(() => {
-    if (y === "play" && !c)
-      if (L.current !== null && window.clearTimeout(L.current), z > 0)
-        L.current = window.setTimeout(() => J((n) => n - 1), 1e3);
+  V(() => {
+    if (f === "play" && !l)
+      if (U.current !== null && window.clearTimeout(U.current), L > 0)
+        U.current = window.setTimeout(() => fe((e) => e - 1), 1e3);
       else {
-        F(!0);
-        const i = E[_].trim().split(/\s+/), t = I.map((u) => u.text), o = i.filter((u) => !t.includes(u)).length, l = t.filter((u) => !i.includes(u)).length, v = i.filter((u, m) => u !== t[m]).length, k = o + l + v;
-        k === 0 ? (A("correct"), N("correct"), Y("Correct! Well done!")) : k === 1 ? (A("almost"), N("half"), Y("Almost correct! Just one mistake.")) : (A("wrong"), N("wrong"), Y("Not quite right. Keep trying!"));
+        K(!0);
+        const t = H[T].trim().split(/\s+/), n = v.map((s) => s.text), i = t.filter((s) => !n.includes(s)).length, o = n.filter((s) => !t.includes(s)).length, u = t.filter((s, w) => s !== n[w]).length, x = i + o + u;
+        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!"));
       }
     return () => {
-      L.current !== null && window.clearTimeout(L.current);
+      U.current !== null && window.clearTimeout(U.current);
     };
-  }, [y, z, c, E, _, I]);
-  const Je = (n = !0) => {
-    if (c && n) {
-      _ + 1 < (H || 0) ? ke(_ + 1) : (T("results"), setTimeout(() => We(), 600));
+  }, [f, L, l, H, T, v]);
+  const Ne = (e = !0) => {
+    if (l && e) {
+      T + 1 < (I || 0) ? ae(T + 1) : (k("results"), setTimeout(() => de(), 600));
       return;
     }
-    if (n && !c) {
-      const t = E[_].trim().split(/\s+/), o = I.map((m) => m.text), l = t.filter((m) => !o.includes(m)).length, v = o.filter((m) => !t.includes(m)).length, k = t.filter((m, re) => m !== o[re]).length, u = l + v + k;
-      u === 0 && z > 0 ? (V((m) => m + 1), A("correct"), N("correct"), Y("Correct! Well done!")) : u === 1 ? (V((m) => m + 0.5), A("almost"), N("half"), Y("Almost correct! Just one mistake.")) : (A("wrong"), N("wrong"), Y("Not quite right. Keep trying!")), _ + 1 < (H || 0) ? setTimeout(() => ke(_ + 1), 800) : (T("results"), setTimeout(() => We(), 600));
+    if (e && !l) {
+      const n = H[T].trim().split(/\s+/), i = v.map((w) => w.text), o = n.filter((w) => !i.includes(w)).length, u = i.filter((w) => !n.includes(w)).length, x = n.filter((w, X) => w !== i[X]).length, s = o + u + x;
+      s === 0 && L > 0 ? (Y((w) => w + 1), z("correct"), R("correct"), E("Correct! Well done!")) : s === 1 ? (Y((w) => w + 0.5), z("almost"), R("half"), E("Almost correct! Just one mistake.")) : (z("wrong"), R("wrong"), E("Not quite right. Keep trying!")), T + 1 < (I || 0) ? setTimeout(() => ae(T + 1), 800) : (k("results"), setTimeout(() => de(), 600));
     }
   };
-  ue(() => {
-    y === "results" && $ > X && (xe($), localStorage.setItem("magicSentenceBest", String($)));
-  }, [y, $, X]);
-  const N = (n) => {
-    const i = new (window.AudioContext || window.webkitAudioContext)(), t = i.createOscillator(), o = i.createGain();
-    switch (t.connect(o), o.connect(i.destination), n) {
+  V(() => {
+    f === "results" && J > oe && (ve(J), localStorage.setItem("magicSentenceBest", String(J)));
+  }, [f, J, oe]);
+  const R = (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":
-        t.frequency.value = 500;
+        n.frequency.value = 500;
         break;
       case "click":
-        t.frequency.value = 800;
+        n.frequency.value = 800;
         break;
       case "correct":
-        t.frequency.value = 1e3;
+        n.frequency.value = 1e3;
         break;
       case "half":
-        t.frequency.value = 700;
+        n.frequency.value = 700;
         break;
       case "wrong":
-        t.frequency.value = 200;
+        n.frequency.value = 200;
         break;
     }
-    o.gain.setValueAtTime(0.1, i.currentTime), t.start(), t.stop(i.currentTime + 0.2);
-  }, We = () => {
-    const i = Date.now() + 2500, t = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], o = document.createElement("canvas"), l = o.getContext("2d");
-    o.width = window.innerWidth, o.height = window.innerHeight, o.style.position = "fixed", o.style.top = "0", o.style.left = "0", o.style.pointerEvents = "none", document.body.appendChild(o);
-    const v = Array.from({ length: 100 }).map(() => ({
-      x: Math.random() * o.width,
-      y: Math.random() * o.height - o.height,
+    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");
+    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 u = Array.from({ length: 100 }).map(() => ({
+      x: Math.random() * i.width,
+      y: Math.random() * i.height - i.height,
       size: 6 + Math.random() * 6,
-      color: t[Math.floor(Math.random() * t.length)],
+      color: n[Math.floor(Math.random() * n.length)],
       speed: 2 + Math.random() * 4,
       tilt: Math.random() * 2 * Math.PI
-    })), k = () => {
-      l.clearRect(0, 0, o.width, o.height), v.forEach((u) => {
-        l.fillStyle = u.color, l.beginPath(), l.ellipse(u.x, u.y, u.size, u.size / 2, u.tilt, 0, 2 * Math.PI), l.fill(), u.y += u.speed, u.x += Math.sin(u.tilt);
-      }), Date.now() < i ? requestAnimationFrame(k) : document.body.removeChild(o);
+    })), x = () => {
+      o.clearRect(0, 0, i.width, i.height), u.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);
     };
-    k();
-  }, Ve = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmCenterScreen, children: [
-    /* @__PURE__ */ s.jsx("h1", { style: h.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ s.jsx("p", { style: h.gmBodyM, children: "Select number of rounds" }),
-    /* @__PURE__ */ s.jsx("div", { style: {
+    x();
+  }, je = () => /* @__PURE__ */ m("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: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: c() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [3, 4, 5].map((n) => /* @__PURE__ */ s.jsxs(
+    }, children: [3, 4, 5].map((e) => /* @__PURE__ */ m(
       "button",
       {
-        onClick: () => $e(n),
+        onClick: () => Me(e),
         style: {
-          ...h.gmButton,
+          ...g.gmButton,
           ...D("medium")
         },
         children: [
-          n,
+          e,
           " ROUNDS"
         ]
       },
-      n
+      e
     )) })
-  ] }), Xe = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmCenterScreen, children: [
-    /* @__PURE__ */ s.jsx("h1", { style: h.gmHeadline1, children: "MAGIC SENTENCE" }),
-    /* @__PURE__ */ s.jsx("p", { style: h.gmBodyM, children: "Select time per round" }),
-    /* @__PURE__ */ s.jsx("div", { style: {
+  ] }), Oe = () => /* @__PURE__ */ m("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: {
       display: "flex",
-      gap: f() ? "8px" : "16px",
+      gap: c() ? "8px" : "16px",
       justifyContent: "center"
-    }, children: [15, 20, 30].map((n) => /* @__PURE__ */ s.jsxs(
+    }, children: [15, 20, 30].map((e) => /* @__PURE__ */ m(
       "button",
       {
-        onClick: () => Fe(n),
+        onClick: () => Le(e),
         style: {
-          ...h.gmButton,
+          ...g.gmButton,
           ...D("medium")
         },
         children: [
-          n,
+          e,
           "s"
         ]
       },
-      n
+      e
     )) })
-  ] }), qe = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmCenterScreen, children: [
-    /* @__PURE__ */ s.jsxs("h2", { style: { ...h.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), Fe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
+    /* @__PURE__ */ m("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
-      H,
+      I,
       " sentence",
-      H && H > 1 ? "s" : "",
+      I && I > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ s.jsx("p", { style: { ...h.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
-    /* @__PURE__ */ s.jsx("div", { style: {
+    /* @__PURE__ */ a("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ a("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: 12,
@@ -764,317 +491,314 @@ function wn(p = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: E.map((n, i) => /* @__PURE__ */ s.jsx(
+    }, children: H.map((e, t) => /* @__PURE__ */ a(
       "input",
       {
-        value: n,
-        placeholder: `Sentence ${i + 1}`,
-        onChange: (t) => Ge(i, t.target.value),
+        value: e,
+        placeholder: `Sentence ${t + 1}`,
+        onChange: (n) => Ae(t, n.target.value),
         style: {
-          ...h.gmInput,
-          padding: f() ? "8px 12px" : "12px 16px",
-          fontSize: f() ? "14px" : "16px",
+          ...g.gmInput,
+          padding: c() ? "8px 12px" : "12px 16px",
+          fontSize: c() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
           // Центрируем placeholder текст
         }
       },
-      i
+      t
     )) }),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ a(
       "button",
       {
-        onClick: Ue,
-        disabled: E.some((n) => n.trim().length === 0),
+        onClick: Ge,
+        disabled: H.some((e) => e.trim().length === 0),
         style: {
-          ...h.gmButton,
+          ...g.gmButton,
           marginTop: 30,
-          background: E.some((n) => n.trim().length === 0) ? "#ccc" : "#ec4c44",
-          cursor: E.some((n) => n.trim().length === 0) ? "not-allowed" : "pointer",
+          background: H.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
+          cursor: H.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
           ...D("large")
         },
         children: "PLAY"
       }
     )
-  ] }), Ze = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmReadyWrapper, children: [
-    /* @__PURE__ */ s.jsx("h1", { style: {
-      ...h.gmHeadline1,
-      fontSize: f() ? "36px" : "72px",
-      color: "#ec4c44",
-      marginBottom: "20px",
-      animation: "pulse 1s ease-in-out infinite"
+  ] }), Ze = () => /* @__PURE__ */ m("div", { style: g.gmReadyWrapper, children: [
+    /* @__PURE__ */ a("h1", { style: {
+      ...g.gmHeadline1,
+      color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ s.jsx("div", { style: h.gmHourglass, children: "⏳" })
-  ] }), Qe = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmGameLayout, children: [
-    /* @__PURE__ */ s.jsxs("h2", { style: {
-      marginBottom: f() ? "5px" : "10px",
-      fontSize: f() ? "16px" : "20px"
+    /* @__PURE__ */ a("div", { style: g.gmHourglass, children: "⏳" })
+  ] }), Qe = () => /* @__PURE__ */ m("div", { style: g.gmGameLayout, children: [
+    /* @__PURE__ */ m("h2", { style: {
+      marginBottom: c() ? "5px" : "10px",
+      fontSize: c() ? "16px" : "20px"
     }, children: [
       "Round ",
-      _ + 1,
+      T + 1,
       "/",
-      H,
+      I,
       " — ",
-      c ? "TIME'S UP!" : `Time: ${z}s`
+      l ? "TIME'S UP!" : `Time: ${L}s`
     ] }),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ a(
       "div",
       {
         style: {
           width: "60%",
-          height: f() ? "8px" : "14px",
+          height: c() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: f() ? "10px" : "20px"
+          marginBottom: c() ? "10px" : "20px"
         },
-        children: /* @__PURE__ */ s.jsx(
+        children: /* @__PURE__ */ a(
           "div",
           {
             style: {
               height: "100%",
-              width: `${z / (oe || 20) * 100}%`,
-              background: z <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${L / (he || 20) * 100}%`,
+              background: L <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
         )
       }
     ),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ a(
       "div",
       {
-        onDragOver: (n) => n.preventDefault(),
-        onDrop: (n) => be(n, "bank", null),
+        onDragOver: (e) => e.preventDefault(),
+        onDrop: (e) => ee(e, "bank", null),
         style: {
           display: "flex",
-          flexWrap: R() ? "wrap" : "nowrap",
-          gap: r || window.innerWidth < 768 ? "6px" : "10px",
+          flexWrap: C() ? "wrap" : "nowrap",
+          gap: d || window.innerWidth < 768 ? "6px" : "10px",
           justifyContent: "center",
-          marginBottom: r || window.innerWidth < 768 ? "15px" : "30px",
-          padding: r || window.innerWidth < 768 ? "5px" : "10px",
+          marginBottom: d || window.innerWidth < 768 ? "15px" : "30px",
+          padding: d || window.innerWidth < 768 ? "5px" : "10px",
           width: "100%",
           boxSizing: "border-box"
         },
-        children: se.map((n, i) => /* @__PURE__ */ s.jsx(
+        children: te.map((e, t) => /* @__PURE__ */ a(
           "div",
           {
-            draggable: !c,
+            draggable: !l,
             role: "button",
-            tabIndex: c ? -1 : 0,
-            "aria-label": c ? `Word: ${n.text} (time expired)` : pn("Drag word", n.text, "to build sentence"),
-            onDragStart: (t) => {
-              if (c) {
-                t.preventDefault();
+            tabIndex: l ? -1 : 0,
+            "aria-label": l ? `Word: ${e.text} (time expired)` : en("Drag word", e.text, "to build sentence"),
+            onDragStart: (n) => {
+              if (l) {
+                n.preventDefault();
                 return;
               }
-              t.dataTransfer.setData(
+              n.dataTransfer.setData(
                 "application/x-token",
-                JSON.stringify({ from: "bank", id: n.id })
-              ), t.dataTransfer.setData("text/plain", n.id), Y(`Dragging word: ${n.text}`);
+                JSON.stringify({ from: "bank", id: e.id })
+              ), n.dataTransfer.setData("text/plain", e.id), E(`Dragging word: ${e.text}`);
             },
-            onKeyDown: (t) => {
-              c || fn(t, () => ye("bank", "selected", n.id, null));
+            onKeyDown: (n) => {
+              l || nn(n, () => _("bank", "selected", e.id, null));
             },
-            onDragOver: (t) => t.preventDefault(),
-            onDrop: (t) => {
-              const o = t.currentTarget.getBoundingClientRect(), l = o.left + o.width / 2, v = t.clientX > l ? i + 1 : i;
-              a({ list: null, index: null, side: null }), t.stopPropagation(), be(t, "bank", v);
+            onDragOver: (n) => n.preventDefault(),
+            onDrop: (n) => {
+              const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2, u = n.clientX > o ? t + 1 : t;
+              P({ list: null, index: null, side: null }), n.stopPropagation(), ee(n, "bank", u);
             },
-            onDragEnter: (t) => {
-              if (c) return;
-              const o = t.currentTarget.getBoundingClientRect(), l = o.left + o.width / 2;
-              a({ list: "bank", index: i, side: t.clientX > l ? "right" : "left" });
+            onDragEnter: (n) => {
+              if (l) return;
+              const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2;
+              P({ list: "bank", index: t, side: n.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => a({ list: null, index: null, side: null }),
+            onDragLeave: () => P({ list: null, index: null, side: null }),
             onClick: () => {
-              c || ye("bank", "selected", n.id, null);
+              l || _("bank", "selected", e.id, null);
             },
             style: {
-              padding: r || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
-              borderRadius: r || window.innerWidth < 768 ? "6px" : "10px",
+              padding: d || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: d || window.innerWidth < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: c ? "#f0f0f0" : "#f9f9f9",
-              cursor: c ? "not-allowed" : "pointer",
-              fontSize: r || window.innerWidth < 768 ? "12px" : "18px",
-              borderLeft: e.list === "bank" && e.index === i && e.side === "left" ? "3px solid #3b82f6" : "1px solid #ccc",
-              borderRight: e.list === "bank" && e.index === i && e.side === "right" ? "3px solid #3b82f6" : "1px solid #ccc",
+              background: l ? "#f0f0f0" : "#f9f9f9",
+              cursor: l ? "not-allowed" : "pointer",
+              fontSize: d || window.innerWidth < 768 ? "12px" : "18px",
+              borderLeft: b.list === "bank" && b.index === t && b.side === "left" ? "3px solid #3b82f6" : "1px solid #ccc",
+              borderRight: b.list === "bank" && b.index === t && b.side === "right" ? "3px solid #3b82f6" : "1px solid #ccc",
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: c ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease"
             },
-            children: n.text
+            children: e.text
           },
-          n.id
+          e.id
         ))
       }
     ),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ a(
       "div",
       {
-        onDragOver: (n) => n.preventDefault(),
-        onDrop: (n) => be(n, "selected", null),
+        onDragOver: (e) => e.preventDefault(),
+        onDrop: (e) => ee(e, "selected", null),
         style: {
-          minHeight: r || window.innerWidth < 768 ? "50px" : "70px",
+          minHeight: d || window.innerWidth < 768 ? "50px" : "70px",
           width: "auto",
           // Автоматическая ширина в зависимости от содержимого
           maxWidth: "none",
           // Убираем ограничение максимальной ширины
           minWidth: "245px",
           // Минимальная ширина для растягивания
-          border: M === "correct" ? "2px dashed #4caf50" : M === "almost" ? "2px dashed #ff9800" : M === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
-          borderRadius: r || window.innerWidth < 768 ? "8px" : "12px",
-          padding: r || 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: d || window.innerWidth < 768 ? "8px" : "12px",
+          padding: d || window.innerWidth < 768 ? "8px" : "12px",
           display: "flex",
-          flexWrap: R() ? "wrap" : "nowrap",
+          flexWrap: C() ? "wrap" : "nowrap",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: `${Te(I.length)}px`,
-          background: M === "correct" ? "#e8f5e8" : M === "almost" ? "#fff3e0" : M === "wrong" ? "#ffebee" : "#fafafa",
-          overflowX: R() ? "hidden" : "auto",
-          whiteSpace: R() ? "normal" : "nowrap"
+          fontSize: `${be(v.length)}px`,
+          background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
+          overflowX: C() ? "hidden" : "auto",
+          whiteSpace: C() ? "normal" : "nowrap"
         },
-        children: I.map((n, i) => /* @__PURE__ */ s.jsx(
+        children: v.map((e, t) => /* @__PURE__ */ a(
           "span",
           {
-            draggable: !c,
-            onDragStart: (t) => {
-              if (c) {
-                t.preventDefault();
+            draggable: !l,
+            onDragStart: (n) => {
+              if (l) {
+                n.preventDefault();
                 return;
               }
-              t.dataTransfer.setData(
+              n.dataTransfer.setData(
                 "application/x-token",
-                JSON.stringify({ from: "selected", id: n.id })
-              ), t.dataTransfer.setData("text/plain", n.id);
+                JSON.stringify({ from: "selected", id: e.id })
+              ), n.dataTransfer.setData("text/plain", e.id);
             },
-            onDragOver: (t) => t.preventDefault(),
-            onDrop: (t) => {
-              const o = t.currentTarget.getBoundingClientRect(), l = o.left + o.width / 2, v = t.clientX > l ? i + 1 : i;
-              a({ list: null, index: null, side: null }), t.stopPropagation(), be(t, "selected", v);
+            onDragOver: (n) => n.preventDefault(),
+            onDrop: (n) => {
+              const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2, u = n.clientX > o ? t + 1 : t;
+              P({ list: null, index: null, side: null }), n.stopPropagation(), ee(n, "selected", u);
             },
-            onDragEnter: (t) => {
-              if (c) return;
-              const o = t.currentTarget.getBoundingClientRect(), l = o.left + o.width / 2;
-              a({ list: "selected", index: i, side: t.clientX > l ? "right" : "left" });
+            onDragEnter: (n) => {
+              if (l) return;
+              const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2;
+              P({ list: "selected", index: t, side: n.clientX > o ? "right" : "left" });
             },
-            onDragLeave: () => a({ list: null, index: null, side: null }),
+            onDragLeave: () => P({ list: null, index: null, side: null }),
             onClick: () => {
-              c || ye("selected", "bank", n.id, null);
+              l || _("selected", "bank", e.id, null);
             },
-            title: c ? "Time expired" : "Click to remove back to bank",
+            title: l ? "Time expired" : "Click to remove back to bank",
             style: {
-              padding: f() ? "4px 6px" : "6px 10px",
-              margin: f() ? "2px" : "4px",
-              borderRadius: f() ? "4px" : "8px",
-              background: c ? "#f0f0f0" : "#ffe9e7",
-              border: c ? "1px solid #ccc" : "1px solid #ec4c44",
-              borderLeft: e.list === "selected" && e.index === i && e.side === "left" ? "3px solid #3b82f6" : void 0,
-              borderRight: e.list === "selected" && e.index === i && e.side === "right" ? "3px solid #3b82f6" : void 0,
-              cursor: c ? "not-allowed" : "pointer",
+              padding: c() ? "4px 6px" : "6px 10px",
+              margin: c() ? "2px" : "4px",
+              borderRadius: c() ? "4px" : "8px",
+              background: l ? "#f0f0f0" : "#ffe9e7",
+              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
+              borderLeft: b.list === "selected" && b.index === t && b.side === "left" ? "3px solid #3b82f6" : void 0,
+              borderRight: b.list === "selected" && b.index === t && b.side === "right" ? "3px solid #3b82f6" : void 0,
+              cursor: l ? "not-allowed" : "pointer",
               userSelect: "none",
-              fontSize: `${Te(I.length)}px`,
+              fontSize: `${be(v.length)}px`,
               // Адаптивный размер шрифта для слов
               fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: c ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease"
             },
-            children: n.text
+            children: e.text
           },
-          n.id
+          e.id
         ))
       }
     ),
-    /* @__PURE__ */ s.jsx(
+    /* @__PURE__ */ a(
       "button",
       {
-        onClick: () => Je(!0),
-        disabled: !c && I.length === 0,
+        onClick: () => Ne(!0),
+        disabled: !l && v.length === 0,
         style: {
-          marginTop: f() ? "15px" : "30px",
-          fontSize: f() ? "14px" : "20px",
-          padding: f() ? "6px 12px" : "10px 24px",
-          borderRadius: f() ? "8px" : "12px",
-          background: c || I.length > 0 ? "#ec4c44" : "#ccc",
+          marginTop: c() ? "15px" : "30px",
+          fontSize: c() ? "14px" : "20px",
+          padding: c() ? "6px 12px" : "10px 24px",
+          borderRadius: c() ? "8px" : "12px",
+          background: l || v.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: c || I.length > 0 ? "pointer" : "not-allowed"
+          cursor: l || v.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
     )
-  ] }), Ke = () => /* @__PURE__ */ s.jsxs("div", { style: h.gmCenterScreen, children: [
-    /* @__PURE__ */ s.jsx("h1", { style: {
-      ...h.gmHeadline1,
-      marginTop: (r && 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 || q || Z || Q || K || ee || ne || te || ie, "0px"),
-      marginBottom: r && 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 || q || Z || Q || K || ee || ne || te || ie ? "2px" : "10px",
-      fontSize: r && 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)"
+  ] }), Xe = () => /* @__PURE__ */ m("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 || $ || G || N || j || O || F || Z || 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 || $ || G || N || j || O || F || Z || 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__ */ s.jsxs("h2", { style: {
-      ...h.gmHeadline2,
-      marginTop: (r && 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 || q || Z || Q || K || ee || ne || te || ie, "0px"),
-      marginBottom: r && 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 || q || Z || Q || K || ee || ne || te || ie ? "2px" : "16px",
-      fontSize: r && 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__ */ m("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 || $ || G || N || j || O || F || Z || 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 || $ || G || N || j || O || F || Z || 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: ",
-      $,
+      J,
       " out of ",
-      H
+      I
     ] }),
-    /* @__PURE__ */ s.jsxs("p", { style: {
-      ...h.gmBodyM,
+    /* @__PURE__ */ m("p", { style: {
+      ...g.gmBodyM,
       color: "#10b981",
-      marginTop: r && 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 || q || Z || Q || K || ee || ne || te || ie ? "0px" : "12px",
-      marginBottom: r && 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 || q || Z || Q || K || ee || ne || te || ie ? "2px" : "16px",
-      fontSize: r && 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: 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 || $ || G || N || j || O || F || Z || 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 || $ || G || N || j || O || F || Z || 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: ",
-      X
+      oe
     ] }),
-    /* @__PURE__ */ s.jsxs("div", { style: {
+    /* @__PURE__ */ m("div", { style: {
       display: "flex",
-      gap: r && window.innerWidth > window.innerHeight || r && 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: r && window.innerWidth > window.innerHeight || r && 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 || ce ? "12px" : "24px"
+      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 || He ? "12px" : "24px"
     }, children: [
-      /* @__PURE__ */ s.jsx(
+      /* @__PURE__ */ a(
         "button",
         {
           onClick: () => {
-            We(), N("start"), setTimeout(() => {
-              T("getready"), le(null), F(!1);
+            de(), R("start"), setTimeout(() => {
+              k("getready"), xe(null), K(!1);
             }, 800);
           },
           style: {
-            ...h.gmButton,
+            ...g.gmButton,
             ...D("medium")
           },
           children: "🔁 Play again"
         }
       ),
-      /* @__PURE__ */ s.jsx(
+      /* @__PURE__ */ a(
         "button",
         {
           onClick: () => {
-            N("click"), T("select"), B(null), ge(null), U([]), V(0), ae([]), F(!1);
+            R("click"), k("select"), ge(null), we(null), q([]), Y(0), ie([]), K(!1);
           },
           style: {
-            ...h.gmButton,
+            ...g.gmButton,
             ...D("medium")
           },
           children: "⬅️ Exit"
         }
       )
     ] })
-  ] }), Ie = d || (j ? `${j.endsWith("/") ? j.slice(0, -1) : j}/logo.svg` : typeof window < "u" && window.origin ? `${window.origin}/browser/speakid/games/magic%20sentence/logo.svg` : null), en = !r && S && !(window.innerWidth > window.innerHeight) && window.innerHeight >= 700;
-  return /* @__PURE__ */ s.jsx(
+  ] }), le = r || (B ? `${B.endsWith("/") ? B.slice(0, -1) : B}/logo.svg` : typeof window < "u" && window.origin ? `${window.origin}/browser/speakid/games/magic%20sentence/logo.svg` : null), Je = !d && y && !(window.innerWidth > window.innerHeight) && window.innerHeight >= 700;
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: W,
+      ref: ne,
       style: {
         width: "100%",
         height: "100%",
@@ -1090,81 +814,90 @@ function wn(p = {}) {
         right: 0,
         bottom: 0
       },
-      children: /* @__PURE__ */ s.jsx(
+      children: /* @__PURE__ */ m(
         "div",
         {
           style: {
-            width: r ? "100%" : x || 1e3,
-            height: r ? "100%" : x || 1e3,
+            width: d ? "100%" : ye || 1e3,
+            height: d ? "100%" : ye || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: r ? 0 : "20px",
+            borderRadius: d ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: r ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: r ? "0 auto" : "unset",
+            boxShadow: d ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: d ? "0 auto" : "unset",
             position: "relative"
+            // needed so absolute logo is inside the square
           },
-          children: /* @__PURE__ */ s.jsx(
-            "div",
-            {
-              style: {
-                transform: "none",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ s.jsxs("div", { id: "magic-sentence-root", children: [
-                en ? /* @__PURE__ */ s.jsx("div", { style: {
-                  ...h.gmLogoFixed,
-                  display: "block"
-                }, children: Ie ? /* @__PURE__ */ s.jsx(
-                  "img",
-                  {
-                    src: Ie,
-                    alt: "SPEAKID Logo",
-                    style: h.gmLogoImg,
-                    loading: "lazy"
-                  }
-                ) : /* @__PURE__ */ s.jsx("div", { style: h.gmLogoImg, children: "SPEAKID" }) }) : null,
-                y === "select" ? Ve() : null,
-                y === "time" ? Xe() : null,
-                y === "type" ? qe() : null,
-                y === "getready" ? Ze() : null,
-                y === "play" ? Qe() : null,
-                y === "results" ? Ke() : null
-              ] })
-            }
-          )
+          children: [
+            !d && Je && /* @__PURE__ */ a("div", { style: { ...g.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: g.gmLogoImg,
+                  loading: "lazy"
+                }
+              )
+            ] }) : /* @__PURE__ */ a("div", { style: g.gmLogoImg, children: "SPEAKID" }) }),
+            /* @__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: [
+                  f === "select" ? je() : null,
+                  f === "time" ? Oe() : null,
+                  f === "type" ? Fe() : null,
+                  f === "getready" ? Ze() : null,
+                  f === "play" ? Qe() : null,
+                  f === "results" ? Xe() : null
+                ] })
+              }
+            )
+          ]
         }
       )
     }
   );
 }
-class xn extends sn {
-  constructor(d) {
-    super(d), this.state = { hasError: !1 };
+class cn extends Ye {
+  constructor(r) {
+    super(r), this.state = { hasError: !1 };
   }
-  static getDerivedStateFromError(d) {
+  static getDerivedStateFromError(r) {
     return {
       hasError: !0,
-      error: d
+      error: r
     };
   }
-  componentDidCatch(d, S) {
-    console.error("Game Error:", d, S), this.setState({
-      error: d,
-      errorInfo: S
+  componentDidCatch(r, y) {
+    console.error("Game Error:", r, y), this.setState({
+      error: r,
+      errorInfo: y
     });
   }
   handleReset = () => {
     this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
   };
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ s.jsxs("div", { style: {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ m("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -1176,9 +909,9 @@ class xn extends sn {
       color: "#dc2626",
       fontFamily: "system-ui, sans-serif"
     }, children: [
-      /* @__PURE__ */ s.jsx("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
-      /* @__PURE__ */ s.jsx("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
-      /* @__PURE__ */ s.jsx(
+      /* @__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(
         "button",
         {
           onClick: this.handleReset,
@@ -1192,14 +925,14 @@ class xn extends sn {
             cursor: "pointer",
             transition: "background-color 0.2s"
           },
-          onMouseOver: (d) => d.currentTarget.style.backgroundColor = "#b91c1c",
-          onMouseOut: (d) => d.currentTarget.style.backgroundColor = "#dc2626",
+          onMouseOver: (r) => r.currentTarget.style.backgroundColor = "#b91c1c",
+          onMouseOut: (r) => r.currentTarget.style.backgroundColor = "#dc2626",
           children: "🔄 Restart Game"
         }
       ),
-      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ s.jsxs("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
-        /* @__PURE__ */ s.jsx("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
-        /* @__PURE__ */ s.jsxs("pre", { style: {
+      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: {
           backgroundColor: "#f3f4f6",
           padding: "12px",
           borderRadius: "4px",
@@ -1215,12 +948,12 @@ class xn extends sn {
   }
 }
 export {
-  xn as ErrorBoundary,
-  wn as Game,
-  Y as announceToScreenReader,
-  pn as createAriaLabel,
-  wn as default,
-  fn as handleKeyDown,
-  un as useValidation
+  cn as ErrorBoundary,
+  ln as Game,
+  E as announceToScreenReader,
+  en as createAriaLabel,
+  ln as default,
+  nn as handleKeyDown,
+  _e as useValidation
 };
 //# sourceMappingURL=speakid-build-a-sentence.es.js.map