speakid-hangman 1.0.0 → 1.0.2

package/dist/speakid-hangman.es.js

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { useState as $, useCallback as it, useEffect as at, useMemo as xt } from "react";
+import { jsx as n, jsxs as u, Fragment as X } from "react/jsx-runtime";
+import { useState as m, useMemo as D, useCallback as ae, useEffect as le } from "react";
 const a = {
   gmCenterScreen: {
     position: "relative",
@@ -201,145 +201,145 @@ const a = {
     display: "block"
   }
 };
-function bt({
+function ve({
   mistakes: r,
-  maxMistakes: f,
-  size: x = 200
+  maxMistakes: Z,
+  size: G = 200
 }) {
-  const l = x, c = x * 1.25, b = Math.max(2, x / 100), W = 10 * (l / 200), w = 240 * (c / 250), m = 150 * (l / 200), y = 80 * (l / 200), K = 20 * (c / 250), _ = 240 * (c / 250), S = 80 * (l / 200), V = 20 * (c / 250), L = 150 * (l / 200), H = 150 * (l / 200), F = 20 * (c / 250), R = 50 * (c / 250), T = 150 * (l / 200), I = 70 * (c / 250), P = 20 * (l / 200), B = 150 * (l / 200), q = 90 * (c / 250), O = 150 * (c / 250), u = 150 * (l / 200), z = 110 * (c / 250), h = 130 * (l / 200), E = 130 * (c / 250), st = 150 * (l / 200), C = 110 * (c / 250), J = 170 * (l / 200), U = 130 * (c / 250), s = 150 * (l / 200), v = 150 * (c / 250), g = 130 * (l / 200), i = 190 * (c / 250), j = 150 * (l / 200), n = 150 * (c / 250), k = 170 * (l / 200), tt = 190 * (c / 250), M = r === 0 || r <= f * 0.5 ? "#1f2937" : r <= f * 0.75 ? "#f59e0b" : "#ec4c44";
-  return /* @__PURE__ */ p(
+  const l = G, d = G * 1.25, y = Math.max(2, G / 100), T = 10 * (l / 200), b = 240 * (d / 250), f = 150 * (l / 200), x = 80 * (l / 200), K = 20 * (d / 250), Q = 240 * (d / 250), w = 80 * (l / 200), N = 20 * (d / 250), $ = 150 * (l / 200), B = 150 * (l / 200), M = 20 * (d / 250), z = 50 * (d / 250), v = 150 * (l / 200), C = 70 * (d / 250), _ = 20 * (l / 200), S = 150 * (l / 200), q = 90 * (d / 250), Y = 150 * (d / 250), h = 150 * (l / 200), F = 110 * (d / 250), g = 130 * (l / 200), W = 130 * (d / 250), J = 150 * (l / 200), H = 110 * (d / 250), ce = 170 * (l / 200), L = 130 * (d / 250), ee = 150 * (l / 200), V = 150 * (d / 250), p = 130 * (l / 200), te = 190 * (d / 250), I = 150 * (l / 200), ne = 150 * (d / 250), s = 170 * (l / 200), R = 190 * (d / 250), c = r === 0 || r <= Z * 0.5 ? "#1f2937" : r <= Z * 0.75 ? "#f59e0b" : "#ec4c44";
+  return /* @__PURE__ */ u(
     "svg",
     {
       width: l,
-      height: c,
+      height: d,
       style: {
         display: "block",
         margin: "0 auto"
       },
       children: [
-        r > 0 && /* @__PURE__ */ e(
+        r > 0 && /* @__PURE__ */ n(
           "line",
           {
-            x1: W,
-            y1: w,
-            x2: m,
-            y2: w,
-            stroke: M,
-            strokeWidth: b
+            x1: T,
+            y1: b,
+            x2: f,
+            y2: b,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 1 && /* @__PURE__ */ e(
+        r > 1 && /* @__PURE__ */ n(
           "line",
           {
-            x1: y,
+            x1: x,
             y1: K,
-            x2: y,
-            y2: _,
-            stroke: M,
-            strokeWidth: b
+            x2: x,
+            y2: Q,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 2 && /* @__PURE__ */ e(
+        r > 2 && /* @__PURE__ */ n(
           "line",
           {
-            x1: S,
-            y1: V,
-            x2: L,
-            y2: V,
-            stroke: M,
-            strokeWidth: b
+            x1: w,
+            y1: N,
+            x2: $,
+            y2: N,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 3 && /* @__PURE__ */ e(
+        r > 3 && /* @__PURE__ */ n(
           "line",
           {
-            x1: H,
-            y1: F,
-            x2: H,
-            y2: R,
-            stroke: M,
-            strokeWidth: b
+            x1: B,
+            y1: M,
+            x2: B,
+            y2: z,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 4 && /* @__PURE__ */ e(
+        r > 4 && /* @__PURE__ */ n(
           "circle",
           {
-            cx: T,
-            cy: I,
-            r: P,
-            stroke: M,
+            cx: v,
+            cy: C,
+            r: _,
+            stroke: c,
             fill: "none",
-            strokeWidth: b
+            strokeWidth: y
           }
         ),
-        r > 5 && /* @__PURE__ */ e(
+        r > 5 && /* @__PURE__ */ n(
           "line",
           {
-            x1: B,
+            x1: S,
             y1: q,
-            x2: B,
-            y2: O,
-            stroke: M,
-            strokeWidth: b
+            x2: S,
+            y2: Y,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 6 && /* @__PURE__ */ e(
+        r > 6 && /* @__PURE__ */ n(
           "line",
           {
-            x1: u,
-            y1: z,
-            x2: h,
-            y2: E,
-            stroke: M,
-            strokeWidth: b
+            x1: h,
+            y1: F,
+            x2: g,
+            y2: W,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 7 && /* @__PURE__ */ e(
+        r > 7 && /* @__PURE__ */ n(
           "line",
           {
-            x1: st,
-            y1: C,
-            x2: J,
-            y2: U,
-            stroke: M,
-            strokeWidth: b
+            x1: J,
+            y1: H,
+            x2: ce,
+            y2: L,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 8 && /* @__PURE__ */ e(
+        r > 8 && /* @__PURE__ */ n(
           "line",
           {
-            x1: s,
-            y1: v,
-            x2: g,
-            y2: i,
-            stroke: M,
-            strokeWidth: b
+            x1: ee,
+            y1: V,
+            x2: p,
+            y2: te,
+            stroke: c,
+            strokeWidth: y
           }
         ),
-        r > 9 && /* @__PURE__ */ e(
+        r > 9 && /* @__PURE__ */ n(
           "line",
           {
-            x1: j,
-            y1: n,
-            x2: k,
-            y2: tt,
-            stroke: M,
-            strokeWidth: b
+            x1: I,
+            y1: ne,
+            x2: s,
+            y2: R,
+            stroke: c,
+            strokeWidth: y
           }
         )
       ]
     }
   );
 }
-function Mt({
+function Le({
   gameCubeSize: r = 400,
-  screenHeight: f = 800,
-  screenWidth: x = 800,
+  screenHeight: Z = 800,
+  screenWidth: G = 800,
   logoUrl: l,
-  showLogo: c = !0,
-  baseURL: b
+  showLogo: d = !0,
+  baseURL: y
 } = {}) {
-  const W = {
+  const T = {
     Professions: ["teacher", "doctor", "nurse", "driver", "police", "firefighter", "cook", "waiter", "farmer", "builder", "singer", "actor", "dentist", "pilot", "vet", "artist", "cleaner", "student", "baker", "mechanic"],
     Family: ["mother", "father", "sister", "brother", "grandmother", "grandfather", "aunt", "uncle", "cousin", "baby", "parents", "children", "wife", "husband", "son", "daughter", "family", "twins", "relatives"],
     "Farm animals": ["cow", "pig", "horse", "sheep", "goat", "duck", "chicken", "rooster", "turkey", "goose", "rabbit", "mouse", "donkey", "bee", "hen", "lamb", "bull", "pony"],
@@ -357,126 +357,133 @@ function Mt({
     Environment: ["tree", "forest", "air", "water", "pollution", "recycle", "nature", "clean", "waste", "plastic", "energy", "animal", "climate", "earth", "ocean", "river", "planet", "save", "green", "environment", "litter", "organic"],
     Space: ["planet", "star", "sun", "moon", "astronaut", "rocket", "space", "galaxy", "universe", "telescope", "comet", "asteroid", "orbit", "gravity", "alien", "spaceship", "mars", "satellite", "sky", "eclipse"],
     Devices: ["computer", "laptop", "phone", "tablet", "tv", "keyboard", "mouse", "printer", "camera", "headphones", "charger", "screen", "watch", "microphone", "speaker", "console", "router", "battery", "cable", "remote"]
-  }, [w, m] = $("lobby"), [y, K] = $(""), [_] = $("Normal"), [S, V] = $(0), [L, H] = $(1), [F, R] = $(""), [T, I] = $([]), [P, B] = $(0), [q, O] = $(0), [u, z] = $(null), [h, E] = $(null), [st, C] = $([]), J = _ === "Easy" ? 8 : _ === "Normal" ? 6 : 4, U = b || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), s = (x ?? (typeof window < "u" ? window.innerWidth : 800)) < 768 || (x ?? (typeof window < "u" ? window.innerWidth : 800)) === 926 && (f ?? (typeof window < "u" ? window.innerHeight : 800)) === 428 || (x ?? (typeof window < "u" ? window.innerWidth : 800)) === 932 && (f ?? (typeof window < "u" ? window.innerHeight : 800)) === 430 || r < 600, v = (x ?? (typeof window < "u" ? window.innerWidth : 800)) === 1024 && (f ?? (typeof window < "u" ? window.innerHeight : 800)) === 600, g = r / 400, i = {
-    headline1: s ? Math.max(24, Math.min(30, 30 * g)) : Math.max(28, Math.min(32, 32 * g)),
-    // Desktop: 24px
-    headline3: s ? Math.max(14, Math.min(18, 16 * g)) : Math.max(20, Math.min(26, 24 * g)),
-    // Desktop: 24px
-    bodyL: Math.max(14, Math.min(20, 18 * g)),
-    // Desktop: 18px
-    bodyM: s ? Math.max(12, Math.min(16, 14 * g)) : Math.max(14, Math.min(18, 16 * g)),
-    // Desktop: 16px
-    bodyS: s ? Math.max(10, Math.min(14, 12 * g)) : Math.max(12, Math.min(16, 14 * g)),
-    // Desktop: 14px
-    wordDisplay: Math.max(18, Math.min(32, 26 * g)),
-    // Адаптивный размер
-    button: Math.max(12, Math.min(18, 16 * g))
-    // Desktop: 16px
-  }, j = v ? Math.max(8, Math.min(12, 10 * g)) : Math.max(12, Math.min(24, 16 * g)), n = v ? Math.max(3, Math.min(6, 5 * g)) : Math.max(4, Math.min(12, 8 * g)), k = Math.max(6, Math.min(10, 8 * g)), tt = (t, o) => t.split("").every((d) => o.includes(d)), lt = (t, o) => t.split("").map((d) => o.includes(d) ? d : "_").join(" "), M = (t) => "abcdefghijklmnopqrstuvwxyz".split("").filter((d) => !t.includes(d)), Z = (t, o = []) => {
-    var pt;
-    if (!t || !W[t]) {
-      const A = Object.keys(W)[0];
-      return ((pt = W[A]) == null ? void 0 : pt[0]) || "";
+  }, [b, f] = m("lobby"), [x, K] = m(""), [Q] = m("Normal"), [w, N] = m(0), [$, B] = m(1), [M, z] = m(""), [v, C] = m([]), [_, S] = m(0), [q, Y] = m(0), [h, F] = m(null), [g, W] = m(null), [J, H] = m(1), [ce, L] = m([]), ee = Q === "Easy" ? 8 : Q === "Normal" ? 6 : 4, V = y || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), [p, te] = m(!1), [I, ne] = m(!1), s = D(() => {
+    const e = (g || r || 1e3) / 400;
+    return {
+      headline1: p ? Math.max(24, Math.min(30, 30 * e)) : Math.max(28, Math.min(32, 32 * e)),
+      // Desktop: 32px
+      headline2: Math.max(20, Math.min(28, 24 * e)),
+      // Desktop: 24px
+      headline3: p ? Math.max(14, Math.min(18, 16 * e)) : Math.max(20, Math.min(26, 24 * e)),
+      // Desktop: 24px
+      bodyL: Math.max(14, Math.min(20, 18 * e)),
+      // Desktop: 18px
+      bodyM: p ? Math.max(12, Math.min(16, 14 * e)) : Math.max(14, Math.min(18, 16 * e)),
+      // Desktop: 16px
+      bodyS: p ? Math.max(10, Math.min(14, 12 * e)) : Math.max(12, Math.min(16, 14 * e)),
+      // Desktop: 14px
+      wordDisplay: Math.max(18, Math.min(32, 26 * e)),
+      // Адаптивный размер
+      button: Math.max(12, Math.min(18, 16 * e))
+      // Desktop: 16px
+    };
+  }, [p, g, r]), R = D(() => {
+    const e = (g || r || 1e3) / 400;
+    return I ? Math.max(8, Math.min(12, 10 * e)) : Math.max(12, Math.min(24, 16 * e));
+  }, [I, g, r]), o = D(() => {
+    const e = (g || r || 1e3) / 400;
+    return I ? Math.max(3, Math.min(6, 5 * e)) : Math.max(4, Math.min(12, 8 * e));
+  }, [I, g, r]), c = D(() => {
+    const e = (g || r || 1e3) / 400;
+    return Math.max(6, Math.min(10, 8 * e));
+  }, [g, r]), he = (e, t) => e.split("").every((i) => t.includes(i)), me = (e, t) => e.split("").map((i) => t.includes(i) ? i : "_").join(" "), fe = (e) => "abcdefghijklmnopqrstuvwxyz".split("").filter((i) => !e.includes(i)), P = (e, t = []) => {
+    var U;
+    if (!e || !T[e]) {
+      const k = Object.keys(T)[0];
+      return ((U = T[k]) == null ? void 0 : U[0]) || "";
     }
-    const d = W[t];
-    if (!d || d.length === 0)
+    const i = T[e];
+    if (!i || i.length === 0)
       return "";
-    const Y = d.filter((A) => !o.includes(A)), G = Y.length > 0 ? Y : d;
-    if (G.length === 0)
+    const j = i.filter((k) => !t.includes(k)), E = j.length > 0 ? j : i;
+    if (E.length === 0)
       return "";
-    let N;
+    let O;
     if (typeof crypto < "u" && crypto.getRandomValues) {
-      const A = new Uint32Array(1);
-      crypto.getRandomValues(A);
-      const yt = A[0] / 4294967295;
-      N = Math.floor(yt * G.length);
+      const k = new Uint32Array(1);
+      crypto.getRandomValues(k);
+      const ue = k[0] / 4294967295;
+      O = Math.floor(ue * E.length);
     } else
-      N = Math.floor(Math.random() * G.length);
-    return G[N];
-  }, ut = () => {
-    if (!y) return;
-    C([]);
-    const t = Z(y, []);
-    if (!t) {
-      m("category");
+      O = Math.floor(Math.random() * E.length);
+    return E[O];
+  }, xe = () => {
+    if (!x) return;
+    L([]);
+    const e = P(x, []);
+    if (!e) {
+      f("category");
       return;
     }
-    R(t), C([t]), I([]), B(0), H(1), O(0), z(null), m("game");
-  }, et = it((t) => {
-    if (w !== "game" || u !== null) return;
-    const o = t.toLowerCase();
-    /^[a-z]$/.test(o) && (I((d) => d.includes(o) ? d : [...d, o]), R((d) => (d && !d.includes(o) && B((Y) => Y + 1), d)));
-  }, [w, u]), nt = it((t) => {
-    et(t.key);
-  }, [et]);
-  at(() => {
-    if (w === "game")
-      return window.addEventListener("keydown", nt), () => window.removeEventListener("keydown", nt);
-  }, [w, nt]);
-  const mt = F ? lt(F, T) : "", dt = F ? tt(F, T) : !1, ct = P >= 10, ht = M(T), ot = it(() => {
-    if (!y || L >= S) {
-      m("result");
+    z(e), L([e]), C([]), S(0), B(1), Y(0), F(null), f("game");
+  }, oe = ae((e) => {
+    if (b !== "game" || h !== null) return;
+    const t = e.toLowerCase();
+    /^[a-z]$/.test(t) && (C((i) => i.includes(t) ? i : [...i, t]), z((i) => (i && !i.includes(t) && S((j) => j + 1), i)));
+  }, [b, h]), re = ae((e) => {
+    oe(e.key);
+  }, [oe]);
+  le(() => {
+    if (b === "game")
+      return window.addEventListener("keydown", re), () => window.removeEventListener("keydown", re);
+  }, [b, re]);
+  const ye = M ? me(M, v) : "", de = M ? he(M, v) : !1, ge = _ >= 10, be = fe(v), ie = ae(() => {
+    if (!x || $ >= w) {
+      f("result");
       return;
     }
-    H((t) => t + 1), C((t) => {
-      const o = Z(y, t);
-      return o ? (R(o), [...t, o]) : t;
-    }), I([]), B(0), z(null);
-  }, [y, L, S]);
-  at(() => {
-    if (dt && u === null) {
-      z("win"), O((o) => o + 1);
-      const t = setTimeout(() => {
-        ot();
+    B((e) => e + 1), L((e) => {
+      const t = P(x, e);
+      return t ? (z(t), [...e, t]) : e;
+    }), C([]), S(0), F(null);
+  }, [x, $, w]);
+  le(() => {
+    if (de && h === null) {
+      F("win"), Y((t) => t + 1);
+      const e = setTimeout(() => {
+        ie();
       }, 2e3);
-      return () => clearTimeout(t);
+      return () => clearTimeout(e);
     }
-    if (ct && u === null) {
-      z("lose");
-      const t = setTimeout(() => {
-        ot();
+    if (ge && h === null) {
+      F("lose");
+      const e = setTimeout(() => {
+        ie();
       }, 2e3);
-      return () => clearTimeout(t);
+      return () => clearTimeout(e);
     }
-  }, [dt, ct, u, ot]);
-  const ft = () => {
-    if (!y || L >= S) {
-      m("result");
+  }, [de, ge, h, ie]);
+  const ke = () => {
+    if (!x || $ >= w) {
+      f("result");
       return;
     }
-    H((t) => t + 1), C((t) => {
-      const o = Z(y, t);
-      return o ? (R(o), [...t, o]) : t;
-    }), I([]), B(0), z(null);
+    B((e) => e + 1), L((e) => {
+      const t = P(x, e);
+      return t ? (z(t), [...e, t]) : e;
+    }), C([]), S(0), F(null);
   };
-  at(() => {
-    const t = x ?? window.innerWidth, o = f ?? window.innerHeight, d = o < 700;
-    if (s)
-      E(r && r >= 320 ? r : null);
-    else if (v) {
-      const Y = r ? Math.max(400, Math.min(950, r)) : Math.min(950, Math.min(t * 0.92, o * 0.92));
-      E(Y);
-    } else if (d)
-      E(r && r >= 400 ? r : null);
-    else {
-      const N = r ? Math.max(400, Math.min(1200, r)) : Math.min(1e3, Math.min(t, o) * 0.9);
-      E(N);
-    }
-  }, [x, f, r, s, v]);
-  const X = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    background: "transparent",
-    overflow: "hidden",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }, rt = `
+  le(() => {
+    const e = () => {
+      const t = window.innerWidth, i = window.innerHeight, j = t < 768 || t === 926 && i === 428 || t === 932 && i === 430, E = i < 700, O = t / i > 1.8, U = t === 1024 && i === 600;
+      if (te(j), ne(U), r && r >= 320) {
+        const $e = Math.max(320, Math.min(1200, r));
+        W($e), H(1);
+      } else if (j)
+        W(null), H(1);
+      else if (E)
+        W(null), H(1);
+      else if (O) {
+        const k = Math.min(1e3, Math.min(t, i) * 0.9);
+        W(k), H(0.85);
+      } else {
+        const k = Math.min(1e3, Math.min(t, i) * 0.9);
+        W(k), H(1);
+      }
+    };
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, [r]);
+  const se = `
     <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0; left: 0; pointer-events: none; opacity: 0.2;">
       <!-- Каракули мелками и фломастерами -->
       
@@ -520,39 +527,33 @@ function Mt({
       <path d="M 35% 85% Q 37% 83%, 39% 85% T 43% 85% T 47% 85%" 
             fill="none" stroke="#FF4500" stroke-width="3.5" stroke-linecap="round"/>
     </svg>
-  `, D = {
+  `, we = {
     ...a.gmCenterScreen,
-    width: s ? "100%" : v ? h || r || 950 : h || r || 1e3,
-    height: s ? "100%" : v ? "auto" : h || r || 1e3,
-    minHeight: s ? "100%" : v ? "auto" : h || r || 1e3,
-    maxHeight: s ? "100%" : v ? "92vh" : h || r || 1e3,
-    padding: `${j}px`,
+    width: "100%",
+    height: "100%",
+    padding: `${R}px`,
     overflow: "auto",
-    borderRadius: s ? 0 : "20px",
     position: "relative",
     boxSizing: "border-box",
-    background: "#ffffff",
-    // Белый фон как на скриншоте
-    boxShadow: s ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-    // Легкая тень для десктопа
-    margin: s ? "0 auto" : "unset"
-  }, gt = !s && c, Q = xt(
+    background: "transparent"
+  }, pe = !p && d, A = D(
     () => {
-      if (s && (x ?? window.innerWidth) > (f ?? window.innerHeight) || (f ?? window.innerHeight) < 700 || !gt)
+      const e = window.innerWidth, t = window.innerHeight;
+      if (p && e > t || t < 700 || !pe)
         return null;
-      const t = l || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman/logo` : "/cloud/speakid/games/hangman/logo");
-      return /* @__PURE__ */ e("div", { style: { ...a.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ p("picture", { children: [
-        /* @__PURE__ */ e(
+      const i = l || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman/logo` : "/cloud/speakid/games/hangman/logo");
+      return /* @__PURE__ */ n("div", { style: { ...a.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ u("picture", { children: [
+        /* @__PURE__ */ n(
           "source",
           {
-            srcSet: `${t}.svg`,
+            srcSet: `${i}.svg`,
             type: "image/svg+xml"
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "img",
           {
-            src: `${t}.png`,
+            src: `${i}.png`,
             alt: "SPEAKID Logo",
             style: a.gmLogoImg,
             loading: "lazy"
@@ -560,29 +561,28 @@ function Mt({
         )
       ] }) });
     },
-    [s, gt, l, x, f]
-  );
-  return w === "lobby" ? /* @__PURE__ */ e("div", { style: X, children: /* @__PURE__ */ p("div", { style: D, children: [
-    Q,
-    /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: rt } }),
-    /* @__PURE__ */ e("h1", { style: {
+    [p, pe, l]
+  ), Me = () => b === "lobby" ? /* @__PURE__ */ u(X, { children: [
+    A,
+    /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
+    /* @__PURE__ */ n("h1", { style: {
       ...a.gmHeadline1,
-      fontSize: `${i.headline1}px`,
-      marginBottom: `${n * 3}px`,
+      fontSize: `${s.headline1}px`,
+      marginBottom: `${o * 3}px`,
       position: "relative",
       zIndex: 1
     }, children: "HANGMAN" }),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ u(
       "button",
       {
-        onClick: () => m("category"),
+        onClick: () => f("category"),
         style: {
           fontFamily: '"Onest", system-ui, sans-serif',
           fontWeight: 500,
           // Medium для более заметности
-          fontSize: `${i.button}px`,
-          padding: `${n * 1.2}px ${n * 3}px`,
-          borderRadius: `${k * 1.5}px`,
+          fontSize: `${s.button}px`,
+          padding: `${o * 1.2}px ${o * 3}px`,
+          borderRadius: `${c * 1.5}px`,
           position: "relative",
           zIndex: 1,
           display: "flex",
@@ -596,26 +596,26 @@ function Mt({
           boxShadow: "0 2px 8px rgba(236, 76, 68, 0.2)",
           minWidth: "120px"
         },
-        onMouseEnter: (t) => {
-          t.currentTarget.style.background = "#d43a32", t.currentTarget.style.transform = "translateY(-2px)", t.currentTarget.style.boxShadow = "0 4px 12px rgba(236, 76, 68, 0.3)";
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "#d43a32", e.currentTarget.style.transform = "translateY(-2px)", e.currentTarget.style.boxShadow = "0 4px 12px rgba(236, 76, 68, 0.3)";
         },
-        onMouseLeave: (t) => {
-          t.currentTarget.style.background = "#ec4c44", t.currentTarget.style.transform = "translateY(0)", t.currentTarget.style.boxShadow = "0 2px 8px rgba(236, 76, 68, 0.2)";
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "#ec4c44", e.currentTarget.style.transform = "translateY(0)", e.currentTarget.style.boxShadow = "0 2px 8px rgba(236, 76, 68, 0.2)";
         },
-        onMouseDown: (t) => {
-          t.currentTarget.style.transform = "translateY(0)";
+        onMouseDown: (e) => {
+          e.currentTarget.style.transform = "translateY(0)";
         },
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ n(
             "svg",
             {
-              width: `${i.button * 1.3}px`,
-              height: `${i.button * 1.3}px`,
+              width: `${s.button * 1.3}px`,
+              height: `${s.button * 1.3}px`,
               viewBox: "0 0 24 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              style: { display: "block", marginRight: `${n}px` },
-              children: /* @__PURE__ */ e(
+              style: { display: "block", marginRight: `${o}px` },
+              children: /* @__PURE__ */ n(
                 "path",
                 {
                   d: "M8 5V19L19 12L8 5Z",
@@ -625,11 +625,11 @@ function Mt({
               )
             }
           ),
-          /* @__PURE__ */ e("span", { style: { fontWeight: 500 }, children: "PLAY" })
+          /* @__PURE__ */ n("span", { style: { fontWeight: 500 }, children: "PLAY" })
         ]
       }
     ),
-    /* @__PURE__ */ p("div", { style: {
+    /* @__PURE__ */ u("div", { style: {
       position: "absolute",
       top: "50%",
       left: "50%",
@@ -639,34 +639,34 @@ function Mt({
       pointerEvents: "none",
       zIndex: 0
     }, children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "img",
         {
-          src: `${U}/sun.png`,
+          src: `${V}/sun.png`,
           alt: "Sun",
           style: {
             position: "absolute",
-            left: s ? "-10%" : "5%",
+            left: p ? "-10%" : "5%",
             top: "20%",
             width: "auto",
-            height: s ? `${Math.min(f * 0.33, 200)}px` : `${Math.min((h || r) * 0.33, 300)}px`,
+            height: p ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((g || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
           }
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "img",
         {
-          src: `${U}/character.png`,
+          src: `${V}/character.png`,
           alt: "Hangman character",
           style: {
             position: "absolute",
-            right: s ? "5%" : "10%",
+            right: p ? "5%" : "10%",
             bottom: "10%",
             width: "auto",
-            height: s ? `${Math.min(f * 0.33, 200)}px` : `${Math.min((h || r) * 0.33, 300)}px`,
+            height: p ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((g || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
@@ -674,53 +674,54 @@ function Mt({
         }
       )
     ] })
-  ] }) }) : w === "category" ? /* @__PURE__ */ e("div", { style: X, children: /* @__PURE__ */ p("div", { style: D, children: [
-    Q,
-    /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: rt } }),
-    /* @__PURE__ */ e(
+  ] }) : b === "category" ? /* @__PURE__ */ u(X, { children: [
+    A,
+    /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
+    /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => m("lobby"),
-        onMouseEnter: (t) => {
-          t.currentTarget.style.backgroundColor = "#e5e7eb";
+        onClick: () => f("lobby"),
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#e5e7eb";
         },
-        onMouseLeave: (t) => {
-          t.currentTarget.style.backgroundColor = "#f9f9f9";
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#f9f9f9";
         },
         style: {
           ...a.gmButton,
           ...a.gmButtonSecondary,
-          fontSize: `${i.button}px`,
-          padding: `${n}px ${n * 1.5}px`,
-          borderRadius: `${k}px`,
+          fontSize: `${s.button}px`,
+          padding: `${o}px ${o * 1.5}px`,
+          borderRadius: `${c}px`,
           position: "absolute",
-          top: `${j}px`,
-          left: `${j}px`,
+          top: `${R}px`,
+          left: `${R + 100}px`,
+          // ✅ Смещаем правее логотипа
           zIndex: 10
         },
         children: "←"
       }
     ),
-    /* @__PURE__ */ e("div", { style: { ...a.gmButtonGroup, gap: `${n}px`, marginBottom: `${n * 3}px`, marginTop: `${n * 4}px`, position: "relative", zIndex: 1 }, children: Object.keys(W).map((t) => /* @__PURE__ */ e(
+    /* @__PURE__ */ n("div", { style: { ...a.gmButtonGroup, gap: `${o}px`, marginBottom: `${o * 3}px`, marginTop: `${o * 4}px`, position: "relative", zIndex: 1 }, children: Object.keys(T).map((e) => /* @__PURE__ */ n(
       "button",
       {
         onClick: () => {
-          K(t), m("rounds");
+          K(e), f("rounds");
         },
-        onMouseEnter: (o) => {
-          o.currentTarget.style.backgroundColor = "#f0f0f0", o.currentTarget.style.borderColor = "#1f2937", o.currentTarget.style.transform = "scale(1.05)";
+        onMouseEnter: (t) => {
+          t.currentTarget.style.backgroundColor = "#f0f0f0", t.currentTarget.style.borderColor = "#1f2937", t.currentTarget.style.transform = "scale(1.05)";
         },
-        onMouseLeave: (o) => {
-          o.currentTarget.style.backgroundColor = "transparent", o.currentTarget.style.borderColor = "#e5e7eb", o.currentTarget.style.transform = "scale(1)";
+        onMouseLeave: (t) => {
+          t.currentTarget.style.backgroundColor = "transparent", t.currentTarget.style.borderColor = "#e5e7eb", t.currentTarget.style.transform = "scale(1)";
         },
         style: {
           fontFamily: '"Onest", system-ui, sans-serif',
           fontWeight: 500,
-          fontSize: `${i.button}px`,
-          padding: `${n * 1.2}px ${n * 2}px`,
-          borderRadius: `${k * 2}px`,
+          fontSize: `${s.button}px`,
+          padding: `${o * 1.2}px ${o * 2}px`,
+          borderRadius: `${c * 2}px`,
           // Более округлые для облачков
-          margin: `${n / 2}px`,
+          margin: `${o / 2}px`,
           background: "transparent",
           border: "2px solid #e5e7eb",
           color: "#1f2937",
@@ -728,58 +729,59 @@ function Mt({
           transition: "background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease",
           boxShadow: "none"
         },
-        children: t
+        children: e
       },
-      t
+      e
     )) })
-  ] }) }) : w === "rounds" ? /* @__PURE__ */ e("div", { style: X, children: /* @__PURE__ */ p("div", { style: D, children: [
-    Q,
-    /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: rt } }),
-    /* @__PURE__ */ e(
+  ] }) : b === "rounds" ? /* @__PURE__ */ u(X, { children: [
+    A,
+    /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: se } }),
+    /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => m("category"),
-        onMouseEnter: (t) => {
-          t.currentTarget.style.backgroundColor = "#e5e7eb";
+        onClick: () => f("category"),
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#e5e7eb";
         },
-        onMouseLeave: (t) => {
-          t.currentTarget.style.backgroundColor = "#f9f9f9";
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#f9f9f9";
         },
         style: {
           ...a.gmButton,
           ...a.gmButtonSecondary,
-          fontSize: `${i.button}px`,
-          padding: `${n}px ${n * 1.5}px`,
-          borderRadius: `${k}px`,
+          fontSize: `${s.button}px`,
+          padding: `${o}px ${o * 1.5}px`,
+          borderRadius: `${c}px`,
           position: "absolute",
-          top: `${j}px`,
-          left: `${j}px`,
+          top: `${R}px`,
+          left: `${R + 100}px`,
+          // ✅ Смещаем правее логотипа
           zIndex: 10
         },
         children: "←"
       }
     ),
-    /* @__PURE__ */ e("h1", { style: { ...a.gmHeadline1, fontSize: `${i.headline1}px`, marginBottom: `${n * 2}px`, position: "relative", zIndex: 1 }, children: "Choose rounds" }),
-    /* @__PURE__ */ e("div", { style: { ...a.gmButtonGroup, gap: `${n}px`, marginBottom: `${n * 3}px`, position: "relative", zIndex: 1 }, children: [1, 3, 5].map((t) => /* @__PURE__ */ e(
+    /* @__PURE__ */ n("h1", { style: { ...a.gmHeadline1, fontSize: `${s.headline1}px`, marginBottom: `${o * 2}px`, position: "relative", zIndex: 1 }, children: "Choose rounds" }),
+    /* @__PURE__ */ n("div", { style: { ...a.gmButtonGroup, gap: `${o}px`, marginBottom: `${o * 3}px`, position: "relative", zIndex: 1 }, children: [1, 3, 5].map((e) => /* @__PURE__ */ n(
       "button",
       {
         onClick: () => {
-          V(t), ut();
+          N(e), xe();
         },
-        onMouseEnter: (o) => {
-          o.currentTarget.style.backgroundColor = "#f0f0f0", o.currentTarget.style.borderColor = "#1f2937", o.currentTarget.style.transform = "scale(1.05)";
+        onMouseEnter: (t) => {
+          t.currentTarget.style.backgroundColor = "#f0f0f0", t.currentTarget.style.borderColor = "#1f2937", t.currentTarget.style.transform = "scale(1.05)";
         },
-        onMouseLeave: (o) => {
-          o.currentTarget.style.backgroundColor = "transparent", o.currentTarget.style.borderColor = "#e5e7eb", o.currentTarget.style.transform = "scale(1)";
+        onMouseLeave: (t) => {
+          t.currentTarget.style.backgroundColor = "transparent", t.currentTarget.style.borderColor = "#e5e7eb", t.currentTarget.style.transform = "scale(1)";
         },
         style: {
           fontFamily: '"Onest", system-ui, sans-serif',
           fontWeight: 500,
-          fontSize: `${i.button}px`,
-          padding: `${n * 1.2}px ${n * 2}px`,
-          borderRadius: `${k * 2}px`,
+          fontSize: `${s.button}px`,
+          padding: `${o * 1.2}px ${o * 2}px`,
+          borderRadius: `${c * 2}px`,
           // Более округлые для облачков
-          margin: `${n / 2}px`,
+          margin: `${o / 2}px`,
           background: "transparent",
           border: "2px solid #e5e7eb",
           color: "#1f2937",
@@ -787,254 +789,308 @@ function Mt({
           transition: "background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease",
           boxShadow: "none"
         },
-        children: t
+        children: e
       },
-      t
+      e
     )) })
-  ] }) }) : w === "game" ? /* @__PURE__ */ e("div", { style: X, children: /* @__PURE__ */ p("div", { style: D, children: [
-    Q,
-    /* @__PURE__ */ p("div", { style: {
+  ] }) : b === "game" ? /* @__PURE__ */ u(X, { children: [
+    A,
+    /* @__PURE__ */ u("div", { style: {
       ...a.gmInfoBox,
-      padding: `${n * 0.8}px`,
-      marginBottom: `${n * 0.5}px`,
-      maxWidth: `${(h || r) * 0.9}px`
+      padding: `${o * 0.8}px`,
+      marginBottom: `${o * 0.5}px`,
+      maxWidth: `${(g || r) * 0.9}px`
     }, children: [
-      /* @__PURE__ */ p("h3", { style: { ...a.gmHeadline3, fontSize: `${i.headline3}px`, marginBottom: `${n * 0.5}px` }, children: [
+      /* @__PURE__ */ u("h3", { style: { ...a.gmHeadline3, fontSize: `${s.headline3}px`, marginBottom: `${o * 0.5}px` }, children: [
         "Category: ",
-        y
+        x
       ] }),
-      /* @__PURE__ */ p("p", { style: { ...a.gmBodyM, fontSize: `${i.bodyM}px`, marginBottom: "0px" }, children: [
+      /* @__PURE__ */ u("p", { style: { ...a.gmBodyM, fontSize: `${s.bodyM}px`, marginBottom: "0px" }, children: [
         "Round ",
-        L,
+        $,
         " of ",
-        S
+        w
       ] })
     ] }),
-    F && /* @__PURE__ */ p("p", { style: {
+    M && /* @__PURE__ */ u("p", { style: {
       ...a.gmBodyS,
-      fontSize: `${i.bodyS}px`,
-      marginTop: `${n * 0.5}px`,
-      marginBottom: `${n}px`
+      fontSize: `${s.bodyS}px`,
+      marginTop: `${o * 0.5}px`,
+      marginBottom: `${o}px`
     }, children: [
       "I am thinking of a word that is ",
-      /* @__PURE__ */ e("strong", { children: F.length }),
+      /* @__PURE__ */ n("strong", { children: M.length }),
       " letters long"
     ] }),
-    /* @__PURE__ */ e("div", { style: {
-      margin: `${n}px 0`,
+    /* @__PURE__ */ n("div", { style: {
+      margin: `${o}px 0`,
       display: "flex",
       justifyContent: "center",
       alignItems: "center"
-    }, children: /* @__PURE__ */ e(
-      bt,
+    }, children: /* @__PURE__ */ n(
+      ve,
       {
-        mistakes: P,
-        maxMistakes: J,
-        size: v ? Math.max(80, Math.min(110, (h || r) * 0.16)) : Math.max(100, Math.min(150, (h || r) * 0.2))
+        mistakes: _,
+        maxMistakes: ee,
+        size: I ? Math.max(80, Math.min(110, (g || r) * 0.16)) : Math.max(100, Math.min(150, (g || r) * 0.2))
       }
     ) }),
-    /* @__PURE__ */ e("div", { style: {
+    /* @__PURE__ */ n("div", { style: {
       ...a.gmWordDisplay,
-      fontSize: `${Math.max(16, Math.min(24, i.wordDisplay * 0.9))}px`,
-      margin: `${n}px 0`,
-      letterSpacing: `${n * 0.8}px`,
-      minHeight: `${Math.max(16, Math.min(24, i.wordDisplay * 0.9)) * 1.2}px`
-    }, children: mt || "Loading..." }),
-    /* @__PURE__ */ p("div", { style: {
+      fontSize: `${Math.max(16, Math.min(24, s.wordDisplay * 0.9))}px`,
+      margin: `${o}px 0`,
+      letterSpacing: `${o * 0.8}px`,
+      minHeight: `${Math.max(16, Math.min(24, s.wordDisplay * 0.9)) * 1.2}px`
+    }, children: ye || "Loading..." }),
+    /* @__PURE__ */ u("div", { style: {
       ...a.gmInfoBox,
-      padding: `${n}px`,
-      marginTop: `${n}px`,
-      marginBottom: `${n}px`,
-      maxWidth: `${(h || r) * 0.95}px`
+      padding: `${o}px`,
+      marginTop: `${o}px`,
+      marginBottom: `${o}px`,
+      maxWidth: `${(g || r) * 0.95}px`
     }, children: [
-      /* @__PURE__ */ e("p", { style: {
+      /* @__PURE__ */ n("p", { style: {
         ...a.gmBodyS,
-        fontSize: `${i.bodyS}px`,
-        marginBottom: `${n}px`,
+        fontSize: `${s.bodyS}px`,
+        marginBottom: `${o}px`,
         fontWeight: 500
         // Medium
       }, children: "Available letters:" }),
-      /* @__PURE__ */ e("div", { style: {
+      /* @__PURE__ */ n("div", { style: {
         display: "flex",
         flexWrap: "wrap",
-        gap: `${n / 3}px`,
+        gap: `${o / 3}px`,
         justifyContent: "center",
-        fontSize: `${Math.max(9, Math.min(12, i.bodyS * 0.75))}px`,
+        fontSize: `${Math.max(9, Math.min(12, s.bodyS * 0.75))}px`,
         fontFamily: '"Onest", system-ui, sans-serif'
-      }, children: ht.map((t) => /* @__PURE__ */ e(
+      }, children: be.map((e) => /* @__PURE__ */ n(
         "button",
         {
-          onClick: () => et(t),
-          disabled: u !== null,
-          onMouseEnter: (o) => {
-            u === null && (o.currentTarget.style.backgroundColor = "#e5e7eb", o.currentTarget.style.cursor = "pointer");
+          onClick: () => oe(e),
+          disabled: h !== null,
+          onMouseEnter: (t) => {
+            h === null && (t.currentTarget.style.backgroundColor = "#e5e7eb", t.currentTarget.style.cursor = "pointer");
           },
-          onMouseLeave: (o) => {
-            u === null && (o.currentTarget.style.backgroundColor = "#f9f9f9", o.currentTarget.style.cursor = "pointer");
+          onMouseLeave: (t) => {
+            h === null && (t.currentTarget.style.backgroundColor = "#f9f9f9", t.currentTarget.style.cursor = "pointer");
           },
           style: {
-            padding: `${n / 4}px ${n / 3}px`,
-            borderRadius: `${k * 0.5}px`,
+            padding: `${o / 4}px ${o / 3}px`,
+            borderRadius: `${c * 0.5}px`,
             background: "#f9f9f9",
             color: "#1f2937",
             border: "1px solid #e5e7eb",
-            minWidth: `${Math.max(n * 1.5, (h || r) * 0.04)}px`,
+            minWidth: `${Math.max(o * 1.5, (g || r) * 0.04)}px`,
             textAlign: "center",
             display: "inline-block",
-            cursor: u === null ? "pointer" : "default",
+            cursor: h === null ? "pointer" : "default",
             fontFamily: '"Onest", system-ui, sans-serif',
-            fontSize: `${Math.max(9, Math.min(12, i.bodyS * 0.75))}px`,
+            fontSize: `${Math.max(9, Math.min(12, s.bodyS * 0.75))}px`,
             transition: "background-color 0.2s ease"
           },
-          children: t
+          children: e
         },
-        t
+        e
       )) })
     ] }),
-    T.length > 0 && /* @__PURE__ */ e("div", { style: {
+    v.length > 0 && /* @__PURE__ */ n("div", { style: {
       ...a.gmGuessedLetters,
-      fontSize: `${Math.max(10, Math.min(12, i.bodyS * 0.85))}px`,
-      marginTop: `${n * 0.5}px`,
+      fontSize: `${Math.max(10, Math.min(12, s.bodyS * 0.85))}px`,
+      marginTop: `${o * 0.5}px`,
       marginBottom: "2px"
-    }, children: /* @__PURE__ */ p("span", { style: { color: "#6b7280" }, children: [
+    }, children: /* @__PURE__ */ u("span", { style: { color: "#6b7280" }, children: [
       "Guessed letters: ",
-      /* @__PURE__ */ e("strong", { children: T.join(", ") })
+      /* @__PURE__ */ n("strong", { children: v.join(", ") })
     ] }) }),
-    u === "win" && /* @__PURE__ */ e("div", { style: {
+    h === "win" && /* @__PURE__ */ n("div", { style: {
       ...a.gmStatusWin,
-      fontSize: `${i.bodyL}px`,
+      fontSize: `${s.bodyL}px`,
       margin: "2px 0"
     }, children: "🎉 You won this round!" }),
-    u === "lose" && /* @__PURE__ */ p("div", { style: {
+    h === "lose" && /* @__PURE__ */ u("div", { style: {
       ...a.gmStatusLose,
-      fontSize: `${i.bodyL}px`,
+      fontSize: `${s.bodyL}px`,
       margin: "2px 0"
     }, children: [
       "The hangman is complete! The word was: ",
-      /* @__PURE__ */ e("strong", { children: F })
+      /* @__PURE__ */ n("strong", { children: M })
     ] }),
-    u !== null && L < S && /* @__PURE__ */ e("div", { style: { marginTop: "2px", marginBottom: `${n}px` }, children: /* @__PURE__ */ e(
+    h !== null && $ < w && /* @__PURE__ */ n("div", { style: { marginTop: "2px", marginBottom: `${o}px` }, children: /* @__PURE__ */ n(
       "button",
       {
-        onClick: ft,
-        onMouseEnter: (t) => {
-          t.currentTarget.style.backgroundColor = "#d43a32";
+        onClick: ke,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#d43a32";
         },
-        onMouseLeave: (t) => {
-          t.currentTarget.style.backgroundColor = "#ec4c44";
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#ec4c44";
         },
         style: {
           ...a.gmButton,
-          fontSize: `${Math.max(11, Math.min(14, i.button * 0.85))}px`,
-          padding: `${n * 0.6}px ${n * 1.2}px`,
-          borderRadius: `${k}px`
+          fontSize: `${Math.max(11, Math.min(14, s.button * 0.85))}px`,
+          padding: `${o * 0.6}px ${o * 1.2}px`,
+          borderRadius: `${c}px`
         },
         children: "NEXT"
       }
     ) }),
-    u !== null && L >= S && /* @__PURE__ */ e("div", { style: { marginTop: "2px", marginBottom: `${n}px` }, children: /* @__PURE__ */ e(
+    h !== null && $ >= w && /* @__PURE__ */ n("div", { style: { marginTop: "2px", marginBottom: `${o}px` }, children: /* @__PURE__ */ n(
       "button",
       {
-        onClick: () => m("result"),
-        onMouseEnter: (t) => {
-          t.currentTarget.style.backgroundColor = "#d43a32";
+        onClick: () => f("result"),
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#d43a32";
         },
-        onMouseLeave: (t) => {
-          t.currentTarget.style.backgroundColor = "#ec4c44";
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#ec4c44";
         },
         style: {
           ...a.gmButton,
-          fontSize: `${i.button}px`,
-          padding: `${n}px ${n * 1.5}px`,
-          borderRadius: `${k}px`
+          fontSize: `${s.button}px`,
+          padding: `${o}px ${o * 1.5}px`,
+          borderRadius: `${c}px`
         },
         children: "View Results →"
       }
     ) }),
-    u === null && T.length === 0 && /* @__PURE__ */ e("p", { style: {
+    h === null && v.length === 0 && /* @__PURE__ */ n("p", { style: {
       ...a.gmBodyS,
-      fontSize: `${i.bodyS}px`,
-      marginTop: `${n}px`,
-      marginBottom: `${n}px`
+      fontSize: `${s.bodyS}px`,
+      marginTop: `${o}px`,
+      marginBottom: `${o}px`
     }, children: "Type a letter on your keyboard" })
-  ] }) }) : w === "result" ? /* @__PURE__ */ e("div", { style: X, children: /* @__PURE__ */ p("div", { style: D, children: [
-    Q,
-    /* @__PURE__ */ e("h1", { style: {
+  ] }) : b === "result" ? /* @__PURE__ */ u(X, { children: [
+    A,
+    /* @__PURE__ */ n("h1", { style: {
       ...a.gmHeadline1,
-      fontSize: `${i.headline1}px`,
-      marginBottom: `${n * 2}px`
+      fontSize: `${s.headline1}px`,
+      marginBottom: `${o * 2}px`
     }, children: "🎊 Game Finished!" }),
-    /* @__PURE__ */ p("p", { style: {
+    /* @__PURE__ */ u("p", { style: {
       ...a.gmBodyL,
-      fontSize: `${i.bodyL}px`,
-      marginBottom: `${n * 2}px`
+      fontSize: `${s.bodyL}px`,
+      marginBottom: `${o * 2}px`
     }, children: [
       "You guessed ",
-      /* @__PURE__ */ e("strong", { children: q }),
+      /* @__PURE__ */ n("strong", { children: q }),
       " out of ",
-      /* @__PURE__ */ e("strong", { children: S }),
+      /* @__PURE__ */ n("strong", { children: w }),
       " words correctly."
     ] }),
-    /* @__PURE__ */ p("div", { style: {
+    /* @__PURE__ */ u("div", { style: {
       display: "flex",
       flexDirection: "column",
-      gap: `${n}px`,
+      gap: `${o}px`,
       alignItems: "center"
     }, children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
           onClick: () => {
-            if (!y || S === 0) {
-              m("lobby");
+            if (!x || w === 0) {
+              f("lobby");
               return;
             }
-            C([]);
-            const t = Z(y, []);
-            t && (R(t), C([t]), I([]), B(0), H(1), O(0), z(null), m("game"));
+            L([]);
+            const e = P(x, []);
+            e && (z(e), L([e]), C([]), S(0), B(1), Y(0), F(null), f("game"));
           },
-          onMouseEnter: (t) => {
-            t.currentTarget.style.backgroundColor = "#d43a32";
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#d43a32";
           },
-          onMouseLeave: (t) => {
-            t.currentTarget.style.backgroundColor = "#ec4c44";
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "#ec4c44";
           },
           style: {
             ...a.gmButton,
-            fontSize: `${i.button}px`,
-            padding: `${n}px ${n * 1.5}px`,
-            borderRadius: `${k}px`,
+            fontSize: `${s.button}px`,
+            padding: `${o}px ${o * 1.5}px`,
+            borderRadius: `${c}px`,
             minWidth: "200px"
           },
           children: "Play again"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "button",
         {
-          onClick: () => m("lobby"),
-          onMouseEnter: (t) => {
-            t.currentTarget.style.backgroundColor = "#e5e7eb";
+          onClick: () => f("lobby"),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#e5e7eb";
           },
-          onMouseLeave: (t) => {
-            t.currentTarget.style.backgroundColor = "#f9f9f9";
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "#f9f9f9";
           },
           style: {
             ...a.gmButton,
             ...a.gmButtonSecondary,
-            fontSize: `${i.button}px`,
-            padding: `${n}px ${n * 1.5}px`,
-            borderRadius: `${k}px`,
+            fontSize: `${s.button}px`,
+            padding: `${o}px ${o * 1.5}px`,
+            borderRadius: `${c}px`,
             minWidth: "200px"
           },
           children: "Exit"
         }
       )
     ] })
-  ] }) }) : null;
+  ] }) : null;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "transparent",
+        overflow: "hidden",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            width: p ? "100%" : g || r || 1e3,
+            height: p ? "100%" : g || r || 1e3,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+            borderRadius: p ? 0 : "20px",
+            background: "#ffffff",
+            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: p ? "0 auto" : "unset",
+            position: "relative",
+            // needed so absolute logo is inside the square
+            transform: `scale(${J})`
+          },
+          children: /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                transform: "translateZ(0)",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ n("div", { style: we, children: Me() })
+            }
+          )
+        }
+      )
+    }
+  );
 }
 export {
-  Mt as HangmanLobbyGame,
-  Mt as default
+  Le as Game,
+  Le as HangmanLobbyGame,
+  Le as default
 };
 //# sourceMappingURL=speakid-hangman.es.js.map