speakid-build-a-sentence 1.0.17 → 1.0.19

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

@@ -1,6 +1,6 @@
 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 = `
+import { useState as c, useCallback as pe, useRef as be, useEffect as J, Component as Ue } from "react";
+const qe = `
   @keyframes magic-sentence-spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -35,8 +35,8 @@ const Ke = `
   }
 `;
 if (typeof document < "u" && !document.getElementById("magic-sentence-keyframes")) {
-  const h = document.createElement("style");
-  h.id = "magic-sentence-keyframes", h.innerHTML = Ke, document.head.appendChild(h);
+  const g = document.createElement("style");
+  g.id = "magic-sentence-keyframes", g.innerHTML = qe, document.head.appendChild(g);
 }
 const Se = {
   spin: {
@@ -57,7 +57,7 @@ const Se = {
   glow: {
     animation: "magic-sentence-glow 1s ease-in-out infinite"
   }
-}, g = {
+}, p = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -147,6 +147,17 @@ const Se = {
     willChange: "auto"
   },
   gmLogoImg: {
+    height: "clamp(28px, 5vw, 40px)",
+    width: "auto",
+    background: "transparent",
+    objectFit: "contain",
+    imageRendering: "auto",
+    transform: "translateZ(0)",
+    backfaceVisibility: "hidden",
+    WebkitFontSmoothing: "antialiased",
+    display: "block"
+  },
+  gmLogoFallback: {
     height: "clamp(28px, 5vw, 40px)",
     width: "auto",
     background: "transparent",
@@ -157,8 +168,7 @@ const Se = {
     transform: "translateZ(0)",
     backfaceVisibility: "hidden",
     WebkitFontSmoothing: "antialiased",
-    objectFit: "contain",
-    imageRendering: "auto"
+    display: "block"
   },
   gmReadyWrapper: {
     display: "flex",
@@ -175,60 +185,60 @@ const Se = {
   },
   // ===== Анимационные стили =====
   ...Se
-}, _e = () => {
-  const [h, r] = p([]), y = pe((S, M, C) => {
-    const c = [];
-    S.trim() || c.push({
+}, Ye = () => {
+  const [g, r] = c([]), S = pe((H, I, u) => {
+    const f = [];
+    H.trim() || f.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), S.length > 41 && c.push({
+    }), H.length > 41 && f.push({
       type: "length",
-      message: `Sentence is too long (${S.length}/41 characters)`
-    }), S && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(S) && c.push({
+      message: `Sentence is too long (${H.length}/41 characters)`
+    }), H && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(H) && f.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const f = C.findIndex((k, I) => I !== M && k.toLowerCase().trim() === S.toLowerCase().trim());
-    return f !== -1 && c.push({
+    const b = u.findIndex((D, V) => V !== I && D.toLowerCase().trim() === H.toLowerCase().trim());
+    return b !== -1 && f.push({
       type: "duplicate",
-      message: `Duplicate sentence (same as sentence ${f + 1})`
-    }), r(c), {
-      isValid: c.length === 0,
-      errors: c
+      message: `Duplicate sentence (same as sentence ${b + 1})`
+    }), r(f), {
+      isValid: f.length === 0,
+      errors: f
     };
-  }, []), 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}`
+  }, []), 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}`
       })));
     }), {
-      isValid: M.length === 0,
-      errors: M
+      isValid: I.length === 0,
+      errors: I
     };
-  }, [y]), ne = pe(() => {
+  }, [S]), ne = pe(() => {
     r([]);
   }, []);
   return {
-    errors: h,
-    validateSentence: y,
-    validateAllSentences: B,
+    errors: g,
+    validateSentence: S,
+    validateAllSentences: ee,
     clearErrors: ne
   };
-}, 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) => {
+}, 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 = h, setTimeout(() => {
+  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);
   }, 1e3);
-}, tn = () => {
-  const h = document.createElement("style");
-  h.id = "magic-sentence-reset";
+}, en = () => {
+  const g = document.createElement("style");
+  g.id = "magic-sentence-reset";
   const r = document.getElementById("magic-sentence-reset");
-  r && r.remove(), h.textContent = `
+  r && r.remove(), g.textContent = `
     #magic-sentence-root, #magic-sentence-root * {
       box-sizing: border-box;
       font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -254,11 +264,11 @@ const Se = {
       height: 100% !important;
       overflow: hidden !important;
     }
-  `, 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())
+  `, 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())
       return {
         padding: "12px 24px",
         fontSize: "16px",
@@ -285,113 +295,113 @@ function ln(h = {}) {
         };
     }
   };
-  V(() => (tn(), () => {
+  J(() => (en(), () => {
     document.documentElement.style.overflow = "", document.body.style.overflow = "";
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  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(
+  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(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), 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(() => {
+  ), 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);
+  J(() => {
     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)
+      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 qe = Math.min(1e3, Math.min(t, n) * 0.9);
-        se(qe), re(1);
+        const Ve = Math.min(1e3, Math.min(t, n) * 0.9);
+        se(Ve), re(1);
       }
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  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) {
+  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 });
       return;
     }
     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;
+      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 }) : "";
     })();
     if (i) {
       try {
         const o = JSON.parse(i);
         if (!o || !o.id || !o.from) return;
-        _(o.from, t, o.id, n);
+        K(o.from, t, o.id, n);
       } catch {
       }
       P({ list: null, index: null, side: null });
     }
-  }, Me = (e) => {
-    ge(e), q(Array(e).fill("")), k("time");
+  }, Be = (e) => {
+    V(e), U(Array(e).fill("")), b("time");
   }, Le = (e) => {
-    we(e), k("type");
-  }, Ae = (e, t) => {
+    he(e), b("type");
+  }, Me = (e, t) => {
     if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
       return;
-    const i = [...H];
-    i[e] = t, q(i);
-    const o = S(i);
+    const i = [...C];
+    i[e] = t, U(i);
+    const o = ne(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"));
+  }, 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"));
   };
-  V(() => {
-    if (f === "getready") {
+  J(() => {
+    if (y === "getready") {
       const e = setTimeout(() => ae(0), 3e3);
       return () => clearTimeout(e);
     }
-  }, [f]);
+  }, [y]);
   const ae = (e) => {
-    const t = H[e];
+    const t = C[e];
     if (!t) return;
-    const i = on(
+    const i = nn(
       t.trim().split(/\s+/).filter(Boolean)
-    ).map((o, u) => ({
-      id: `${Date.now()}-${e}-${u}-${Math.random().toString(36).slice(2)}`,
+    ).map((o, w) => ({
+      id: `${Date.now()}-${e}-${w}-${Math.random().toString(36).slice(2)}`,
       text: o
     }));
-    me(i), ie([]), ue(e), fe(he || 20), z(null), K(!1), k("play");
+    ue(i), ie([]), we(e), me(ge || 20), z(null), Y(!1), b("play");
   };
-  V(() => {
-    if (f === "play" && !l)
-      if (U.current !== null && window.clearTimeout(U.current), L > 0)
-        U.current = window.setTimeout(() => fe((e) => e - 1), 1e3);
+  J(() => {
+    if (y === "play" && !d)
+      if (X.current !== null && window.clearTimeout(X.current), B > 0)
+        X.current = window.setTimeout(() => me((e) => e - 1), 1e3);
       else {
-        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;
+        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!"));
       }
     return () => {
-      U.current !== null && window.clearTimeout(U.current);
+      X.current !== null && window.clearTimeout(X.current);
     };
-  }, [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));
+  }, [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));
       return;
     }
-    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));
+    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));
     }
   };
-  V(() => {
-    f === "results" && J > oe && (ve(J), localStorage.setItem("magicSentenceBest", String(J)));
-  }, [f, J, oe]);
+  J(() => {
+    y === "results" && Q > oe && (We(Q), localStorage.setItem("magicSentenceBest", String(Q)));
+  }, [y, Q, 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) {
@@ -415,7 +425,7 @@ function ln(h = {}) {
   }, 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(() => ({
+    const w = Array.from({ length: 100 }).map(() => ({
       x: Math.random() * i.width,
       y: Math.random() * i.height - i.height,
       size: 6 + Math.random() * 6,
@@ -423,25 +433,25 @@ function ln(h = {}) {
       speed: 2 + Math.random() * 4,
       tilt: Math.random() * 2 * Math.PI
     })), x = () => {
-      o.clearRect(0, 0, i.width, i.height), u.forEach((s) => {
+      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);
     };
     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" }),
+  }, 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: {
       display: "flex",
-      gap: c() ? "8px" : "16px",
+      gap: u() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [3, 4, 5].map((e) => /* @__PURE__ */ m(
       "button",
       {
-        onClick: () => Me(e),
+        onClick: () => Be(e),
         style: {
-          ...g.gmButton,
-          ...D("medium")
+          ...p.gmButton,
+          ...f("medium")
         },
         children: [
           e,
@@ -450,20 +460,20 @@ function ln(h = {}) {
       },
       e
     )) })
-  ] }), 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" }),
+  ] }), 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: {
       display: "flex",
-      gap: c() ? "8px" : "16px",
+      gap: u() ? "8px" : "16px",
       justifyContent: "center"
     }, children: [15, 20, 30].map((e) => /* @__PURE__ */ m(
       "button",
       {
         onClick: () => Le(e),
         style: {
-          ...g.gmButton,
-          ...D("medium")
+          ...p.gmButton,
+          ...f("medium")
         },
         children: [
           e,
@@ -472,15 +482,15 @@ function ln(h = {}) {
       },
       e
     )) })
-  ] }), Fe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
-    /* @__PURE__ */ m("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
+  ] }), Oe = () => /* @__PURE__ */ m("div", { style: p.gmCenterScreen, children: [
+    /* @__PURE__ */ m("h2", { style: { ...p.gmBodyM, marginBottom: "0px" }, children: [
       "Type down ",
-      I,
+      D,
       " sentence",
-      I && I > 1 ? "s" : "",
+      D && D > 1 ? "s" : "",
       " for your student"
     ] }),
-    /* @__PURE__ */ a("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ a("p", { style: { ...p.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
     /* @__PURE__ */ a("div", { style: {
       display: "flex",
       flexDirection: "column",
@@ -491,16 +501,16 @@ function ln(h = {}) {
       // Минимальная ширина по содержимому
       maxWidth: "600px"
       // Ограничиваем максимальную ширину
-    }, children: H.map((e, t) => /* @__PURE__ */ a(
+    }, children: C.map((e, t) => /* @__PURE__ */ a(
       "input",
       {
         value: e,
         placeholder: `Sentence ${t + 1}`,
-        onChange: (n) => Ae(t, n.target.value),
+        onChange: (n) => Me(t, n.target.value),
         style: {
-          ...g.gmInput,
-          padding: c() ? "8px 12px" : "12px 16px",
-          fontSize: c() ? "14px" : "16px",
+          ...p.gmInput,
+          padding: u() ? "8px 12px" : "12px 16px",
+          fontSize: u() ? "14px" : "16px",
           width: "100%",
           // Поля теперь будут шире благодаря увеличенной ширине контейнера
           textAlign: "center"
@@ -513,53 +523,53 @@ function ln(h = {}) {
       "button",
       {
         onClick: Ge,
-        disabled: H.some((e) => e.trim().length === 0),
+        disabled: C.some((e) => e.trim().length === 0),
         style: {
-          ...g.gmButton,
+          ...p.gmButton,
           marginTop: 30,
-          background: H.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
-          cursor: H.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
-          ...D("large")
+          background: C.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
+          cursor: C.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
+          ...f("large")
         },
         children: "PLAY"
       }
     )
-  ] }), Ze = () => /* @__PURE__ */ m("div", { style: g.gmReadyWrapper, children: [
+  ] }), Fe = () => /* @__PURE__ */ m("div", { style: p.gmReadyWrapper, children: [
     /* @__PURE__ */ a("h1", { style: {
-      ...g.gmHeadline1,
+      ...p.gmHeadline1,
       color: "#ec4c44"
     }, children: "GET READY" }),
-    /* @__PURE__ */ a("div", { style: g.gmHourglass, children: "⏳" })
-  ] }), Qe = () => /* @__PURE__ */ m("div", { style: g.gmGameLayout, children: [
+    /* @__PURE__ */ a("div", { style: p.gmHourglass, children: "⏳" })
+  ] }), Ze = () => /* @__PURE__ */ m("div", { style: p.gmGameLayout, children: [
     /* @__PURE__ */ m("h2", { style: {
-      marginBottom: c() ? "5px" : "10px",
-      fontSize: c() ? "16px" : "20px"
+      marginBottom: u() ? "5px" : "10px",
+      fontSize: u() ? "16px" : "20px"
     }, children: [
       "Round ",
       T + 1,
       "/",
-      I,
+      D,
       " — ",
-      l ? "TIME'S UP!" : `Time: ${L}s`
+      d ? "TIME'S UP!" : `Time: ${B}s`
     ] }),
     /* @__PURE__ */ a(
       "div",
       {
         style: {
           width: "60%",
-          height: c() ? "8px" : "14px",
+          height: u() ? "8px" : "14px",
           borderRadius: 8,
           background: "#eee",
           overflow: "hidden",
-          marginBottom: c() ? "10px" : "20px"
+          marginBottom: u() ? "10px" : "20px"
         },
         children: /* @__PURE__ */ a(
           "div",
           {
             style: {
               height: "100%",
-              width: `${L / (he || 20) * 100}%`,
-              background: L <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${B / (ge || 20) * 100}%`,
+              background: B <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
@@ -570,26 +580,26 @@ function ln(h = {}) {
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
-        onDrop: (e) => ee(e, "bank", null),
+        onDrop: (e) => _(e, "bank", null),
         style: {
           display: "flex",
-          flexWrap: C() ? "wrap" : "nowrap",
-          gap: d || window.innerWidth < 768 ? "6px" : "10px",
+          flexWrap: I() ? "wrap" : "nowrap",
+          gap: l || window.innerWidth < 768 ? "6px" : "10px",
           justifyContent: "center",
-          marginBottom: d || window.innerWidth < 768 ? "15px" : "30px",
-          padding: d || window.innerWidth < 768 ? "5px" : "10px",
+          marginBottom: l || window.innerWidth < 768 ? "15px" : "30px",
+          padding: l || window.innerWidth < 768 ? "5px" : "10px",
           width: "100%",
           boxSizing: "border-box"
         },
         children: te.map((e, t) => /* @__PURE__ */ a(
           "div",
           {
-            draggable: !l,
+            draggable: !d,
             role: "button",
-            tabIndex: l ? -1 : 0,
-            "aria-label": l ? `Word: ${e.text} (time expired)` : en("Drag word", e.text, "to build sentence"),
+            tabIndex: d ? -1 : 0,
+            "aria-label": d ? `Word: ${e.text} (time expired)` : Ke("Drag word", e.text, "to build sentence"),
             onDragStart: (n) => {
-              if (l) {
+              if (d) {
                 n.preventDefault();
                 return;
               }
@@ -599,34 +609,34 @@ function ln(h = {}) {
               ), n.dataTransfer.setData("text/plain", e.id), E(`Dragging word: ${e.text}`);
             },
             onKeyDown: (n) => {
-              l || nn(n, () => _("bank", "selected", e.id, null));
+              d || _e(n, () => K("bank", "selected", e.id, null));
             },
             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);
+              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);
             },
             onDragEnter: (n) => {
-              if (l) return;
+              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" });
             },
             onDragLeave: () => P({ list: null, index: null, side: null }),
             onClick: () => {
-              l || _("bank", "selected", e.id, null);
+              d || K("bank", "selected", e.id, null);
             },
             style: {
-              padding: d || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
-              borderRadius: d || window.innerWidth < 768 ? "6px" : "10px",
+              padding: l || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: l || window.innerWidth < 768 ? "6px" : "10px",
               border: "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",
+              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",
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: l ? 0.6 : 1,
+              opacity: d ? 0.6 : 1,
               transition: "opacity 0.3s ease"
             },
             children: e.text
@@ -639,33 +649,33 @@ function ln(h = {}) {
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
-        onDrop: (e) => ee(e, "selected", null),
+        onDrop: (e) => _(e, "selected", null),
         style: {
-          minHeight: d || window.innerWidth < 768 ? "50px" : "70px",
+          minHeight: l || window.innerWidth < 768 ? "50px" : "70px",
           width: "auto",
           // Автоматическая ширина в зависимости от содержимого
           maxWidth: "none",
           // Убираем ограничение максимальной ширины
           minWidth: "245px",
           // Минимальная ширина для растягивания
-          border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
-          borderRadius: d || window.innerWidth < 768 ? "8px" : "12px",
-          padding: d || window.innerWidth < 768 ? "8px" : "12px",
+          border: 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",
           display: "flex",
-          flexWrap: C() ? "wrap" : "nowrap",
+          flexWrap: I() ? "wrap" : "nowrap",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: `${be(v.length)}px`,
-          background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
-          overflowX: C() ? "hidden" : "auto",
-          whiteSpace: C() ? "normal" : "nowrap"
+          fontSize: `${ye(k.length)}px`,
+          background: L === "correct" ? "#e8f5e8" : L === "almost" ? "#fff3e0" : L === "wrong" ? "#ffebee" : "#fafafa",
+          overflowX: I() ? "hidden" : "auto",
+          whiteSpace: I() ? "normal" : "nowrap"
         },
-        children: v.map((e, t) => /* @__PURE__ */ a(
+        children: k.map((e, t) => /* @__PURE__ */ a(
           "span",
           {
-            draggable: !l,
+            draggable: !d,
             onDragStart: (n) => {
-              if (l) {
+              if (d) {
                 n.preventDefault();
                 return;
               }
@@ -676,36 +686,36 @@ function ln(h = {}) {
             },
             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);
+              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);
             },
             onDragEnter: (n) => {
-              if (l) return;
+              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" });
             },
             onDragLeave: () => P({ list: null, index: null, side: null }),
             onClick: () => {
-              l || _("selected", "bank", e.id, null);
+              d || K("selected", "bank", e.id, null);
             },
-            title: l ? "Time expired" : "Click to remove back to bank",
+            title: d ? "Time expired" : "Click to remove back to bank",
             style: {
-              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",
+              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",
               userSelect: "none",
-              fontSize: `${be(v.length)}px`,
+              fontSize: `${ye(k.length)}px`,
               // Адаптивный размер шрифта для слов
               fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: l ? 0.6 : 1,
+              opacity: d ? 0.6 : 1,
               transition: "opacity 0.3s ease"
             },
             children: e.text
@@ -717,65 +727,65 @@ function ln(h = {}) {
     /* @__PURE__ */ a(
       "button",
       {
-        onClick: () => Ne(!0),
-        disabled: !l && v.length === 0,
+        onClick: () => $e(!0),
+        disabled: !d && k.length === 0,
         style: {
-          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",
+          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",
           color: "white",
           border: "none",
-          cursor: l || v.length > 0 ? "pointer" : "not-allowed"
+          cursor: d || k.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
     )
-  ] }), Xe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
+  ] }), Qe = () => /* @__PURE__ */ m("div", { style: p.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)"
+      ...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)"
     }, children: "Game Over 🎯" }),
     /* @__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"
+      ...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"
     }, children: [
       "Your score: ",
-      J,
+      Q,
       " out of ",
-      I
+      D
     ] }),
     /* @__PURE__ */ m("p", { style: {
-      ...g.gmBodyM,
+      ...p.gmBodyM,
       color: "#10b981",
-      marginTop: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || 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"
+      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"
     }, children: [
       "Best score: ",
       oe
     ] }),
     /* @__PURE__ */ m("div", { style: {
       display: "flex",
-      gap: d && window.innerWidth > window.innerHeight || d && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "6px" : "12px",
-      marginTop: d && window.innerWidth > window.innerHeight || d && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "2px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || He ? "12px" : "24px"
+      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"
     }, children: [
       /* @__PURE__ */ a(
         "button",
         {
           onClick: () => {
             de(), R("start"), setTimeout(() => {
-              k("getready"), xe(null), K(!1);
+              b("getready"), fe(null), Y(!1);
             }, 800);
           },
           style: {
-            ...g.gmButton,
-            ...D("medium")
+            ...p.gmButton,
+            ...f("medium")
           },
           children: "🔁 Play again"
         }
@@ -784,21 +794,21 @@ function ln(h = {}) {
         "button",
         {
           onClick: () => {
-            R("click"), k("select"), ge(null), we(null), q([]), Y(0), ie([]), K(!1);
+            R("click"), b("select"), V(null), he(null), U([]), q(0), ie([]), Y(!1);
           },
           style: {
-            ...g.gmButton,
-            ...D("medium")
+            ...p.gmButton,
+            ...f("medium")
           },
           children: "⬅️ Exit"
         }
       )
     ] })
-  ] }), 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;
+  ] }), le = r || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/magic%20sentence/logo.svg` : null);
   return /* @__PURE__ */ a(
     "div",
     {
-      ref: ne,
+      ref: ee,
       style: {
         width: "100%",
         height: "100%",
@@ -818,21 +828,21 @@ function ln(h = {}) {
         "div",
         {
           style: {
-            width: d ? "100%" : ye || 1e3,
-            height: d ? "100%" : ye || 1e3,
+            width: l ? "100%" : xe || 1e3,
+            height: l ? "100%" : xe || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: d ? 0 : "20px",
+            borderRadius: l ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: d ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: d ? "0 auto" : "unset",
+            boxShadow: l ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: l ? "0 auto" : "unset",
             position: "relative"
             // needed so absolute logo is inside the square
           },
           children: [
-            !d && Je && /* @__PURE__ */ a("div", { style: { ...g.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: le ? /* @__PURE__ */ m("picture", { 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",
                 {
@@ -845,11 +855,11 @@ function ln(h = {}) {
                 {
                   src: le.replace(".svg", ".png"),
                   alt: "SPEAKID Logo",
-                  style: g.gmLogoImg,
+                  style: p.gmLogoImg,
                   loading: "lazy"
                 }
               )
-            ] }) : /* @__PURE__ */ a("div", { style: g.gmLogoImg, children: "SPEAKID" }) }),
+            ] }) : /* @__PURE__ */ a("div", { style: p.gmLogoFallback, children: "SPEAKID" }) }) : null,
             /* @__PURE__ */ a(
               "div",
               {
@@ -862,12 +872,12 @@ function ln(h = {}) {
                   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
+                  y === "select" ? Ne() : null,
+                  y === "time" ? je() : null,
+                  y === "type" ? Oe() : null,
+                  y === "getready" ? Fe() : null,
+                  y === "play" ? Ze() : null,
+                  y === "results" ? Qe() : null
                 ] })
               }
             )
@@ -877,7 +887,7 @@ function ln(h = {}) {
     }
   );
 }
-class cn extends Ye {
+class ln extends Ue {
   constructor(r) {
     super(r), this.state = { hasError: !1 };
   }
@@ -887,10 +897,10 @@ class cn extends Ye {
       error: r
     };
   }
-  componentDidCatch(r, y) {
-    console.error("Game Error:", r, y), this.setState({
+  componentDidCatch(r, S) {
+    console.error("Game Error:", r, S), this.setState({
       error: r,
-      errorInfo: y
+      errorInfo: S
     });
   }
   handleReset = () => {
@@ -948,12 +958,12 @@ class cn extends Ye {
   }
 }
 export {
-  cn as ErrorBoundary,
-  ln as Game,
+  ln as ErrorBoundary,
+  dn as Game,
   E as announceToScreenReader,
-  en as createAriaLabel,
-  ln as default,
-  nn as handleKeyDown,
-  _e as useValidation
+  Ke as createAriaLabel,
+  dn as default,
+  _e as handleKeyDown,
+  Ye as useValidation
 };
 //# sourceMappingURL=speakid-build-a-sentence.es.js.map