speakid-hangman 1.0.7 → 1.0.9

package/dist/speakid-hangman.es.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as h, Fragment as G } from "react/jsx-runtime";
-import { useState as m, useMemo as Q, useCallback as ue, useEffect as he } from "react";
+import { jsx as o, jsxs as m, Fragment as G } from "react/jsx-runtime";
+import { useState as h, useMemo as Q, useCallback as ue, useEffect as me } from "react";
 const a = {
   gmCenterScreen: {
     position: "relative",
@@ -180,8 +180,10 @@ const a = {
   // ✅ Обновлено только для качества логотипа (размер как в magic-sentence)
   gmLogoFixed: {
     position: "absolute",
-    top: "16px",
-    left: "16px",
+    top: "24px",
+    // ✅ Увеличен отступ сверху для большего пространства
+    left: "24px",
+    // ✅ Увеличен отступ слева для большего пространства
     width: "auto",
     zIndex: 30,
     // ✅ Унифицирован zIndex для консистентности
@@ -203,12 +205,12 @@ const a = {
   }
 };
 function He({
-  mistakes: i,
+  mistakes: r,
   maxMistakes: J,
   size: _ = 200
 }) {
-  const c = _, g = _ * 1.25, w = Math.max(3, _ / 100), C = 10 * (c / 200), x = 240 * (g / 250), y = 150 * (c / 200), b = 80 * (c / 200), ee = 20 * (g / 250), N = 240 * (g / 250), M = 80 * (c / 200), P = 20 * (g / 250), L = 150 * (c / 200), H = 150 * (c / 200), v = 20 * (g / 250), I = 50 * (g / 250), F = 150 * (c / 200), R = 70 * (g / 250), V = 20 * (c / 200), T = 150 * (c / 200), te = 90 * (g / 250), A = 150 * (g / 250), f = 150 * (c / 200), B = 110 * (g / 250), p = 130 * (c / 200), O = 130 * (g / 250), ne = 150 * (c / 200), E = 110 * (g / 250), me = 170 * (c / 200), z = 130 * (g / 250), oe = 150 * (c / 200), Z = 150 * (g / 250), d = 130 * (c / 200), re = 190 * (g / 250), j = 150 * (c / 200), ie = 150 * (g / 250), u = 170 * (c / 200), ae = 190 * (g / 250), k = i === 0 || i <= J * 0.5 ? "#1f2937" : i <= J * 0.75 ? "#f59e0b" : "#ec4c44";
-  return /* @__PURE__ */ h(
+  const c = _, g = _ * 1.25, w = Math.max(3, _ / 100), C = 10 * (c / 200), x = 240 * (g / 250), y = 150 * (c / 200), b = 80 * (c / 200), ee = 20 * (g / 250), N = 240 * (g / 250), M = 80 * (c / 200), P = 20 * (g / 250), L = 150 * (c / 200), H = 150 * (c / 200), v = 20 * (g / 250), I = 50 * (g / 250), F = 150 * (c / 200), R = 70 * (g / 250), V = 20 * (c / 200), T = 150 * (c / 200), te = 90 * (g / 250), A = 150 * (g / 250), f = 150 * (c / 200), B = 110 * (g / 250), p = 130 * (c / 200), O = 130 * (g / 250), ne = 150 * (c / 200), E = 110 * (g / 250), he = 170 * (c / 200), z = 130 * (g / 250), oe = 150 * (c / 200), Z = 150 * (g / 250), d = 130 * (c / 200), re = 190 * (g / 250), j = 150 * (c / 200), ie = 150 * (g / 250), u = 170 * (c / 200), ae = 190 * (g / 250), k = r === 0 || r <= J * 0.5 ? "#1f2937" : r <= J * 0.75 ? "#f59e0b" : "#ec4c44";
+  return /* @__PURE__ */ m(
     "svg",
     {
       width: c,
@@ -225,7 +227,7 @@ function He({
         // ✅ Включение аппаратного ускорения на iOS
       },
       children: [
-        i > 0 && /* @__PURE__ */ o(
+        r > 0 && /* @__PURE__ */ o(
           "line",
           {
             x1: C,
@@ -236,7 +238,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 1 && /* @__PURE__ */ o(
+        r > 1 && /* @__PURE__ */ o(
           "line",
           {
             x1: b,
@@ -247,7 +249,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 2 && /* @__PURE__ */ o(
+        r > 2 && /* @__PURE__ */ o(
           "line",
           {
             x1: M,
@@ -258,7 +260,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 3 && /* @__PURE__ */ o(
+        r > 3 && /* @__PURE__ */ o(
           "line",
           {
             x1: H,
@@ -269,7 +271,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 4 && /* @__PURE__ */ o(
+        r > 4 && /* @__PURE__ */ o(
           "circle",
           {
             cx: F,
@@ -280,7 +282,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 5 && /* @__PURE__ */ o(
+        r > 5 && /* @__PURE__ */ o(
           "line",
           {
             x1: T,
@@ -291,7 +293,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 6 && /* @__PURE__ */ o(
+        r > 6 && /* @__PURE__ */ o(
           "line",
           {
             x1: f,
@@ -302,18 +304,18 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 7 && /* @__PURE__ */ o(
+        r > 7 && /* @__PURE__ */ o(
           "line",
           {
             x1: ne,
             y1: E,
-            x2: me,
+            x2: he,
             y2: z,
             stroke: k,
             strokeWidth: w
           }
         ),
-        i > 8 && /* @__PURE__ */ o(
+        r > 8 && /* @__PURE__ */ o(
           "line",
           {
             x1: oe,
@@ -324,7 +326,7 @@ function He({
             strokeWidth: w
           }
         ),
-        i > 9 && /* @__PURE__ */ o(
+        r > 9 && /* @__PURE__ */ o(
           "line",
           {
             x1: j,
@@ -340,7 +342,7 @@ function He({
   );
 }
 function Ye({
-  gameCubeSize: i = 400,
+  gameCubeSize: r = 400,
   screenHeight: J = 800,
   screenWidth: _ = 800,
   logoUrl: c,
@@ -365,10 +367,10 @@ function Ye({
     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"]
-  }, [x, y] = m("lobby"), [b, ee] = m(""), [N] = m("Normal"), [M, P] = m(0), [L, H] = m(1), [v, I] = m(""), [F, R] = m([]), [V, T] = m(0), [te, A] = m(0), [f, B] = m(null), [p, O] = m(null), [ne, E] = m(1), [me, z] = m([]), oe = N === "Easy" ? 8 : N === "Normal" ? 6 : 4, Z = w || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), [d, re] = m(!1), [j, ie] = m(!1), [u, ae] = m(!1), [$, k] = m(!1), s = Q(() => {
-    const e = (p || i || 1e3) / 400, t = u ? 0.8 : 1, r = $ ? 0.9 : 1, l = t * r;
+  }, [x, y] = h("lobby"), [b, ee] = h(""), [N] = h("Normal"), [M, P] = h(0), [L, H] = h(1), [v, I] = h(""), [F, R] = h([]), [V, T] = h(0), [te, A] = h(0), [f, B] = h(null), [p, O] = h(null), [ne, E] = h(1), [he, z] = h([]), oe = N === "Easy" ? 8 : N === "Normal" ? 6 : 4, Z = w || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman` : "/cloud/speakid/games/hangman"), [d, re] = h(!1), [j, ie] = h(!1), [u, ae] = h(!1), [$, k] = h(!1), s = Q(() => {
+    const e = (p || r || 1e3) / 400, t = u ? 0.8 : 1, i = $ ? 0.9 : 1, l = t * i;
     return {
-      headline1: d ? Math.max(24, Math.min(30, 30 * e * l)) : Math.max(28, Math.min(32, 32 * e * r)),
+      headline1: d ? Math.max(24, Math.min(30, 30 * e * l)) : Math.max(28, Math.min(32, 32 * e * i)),
       // Desktop: 32px
       headline2: Math.max(20, Math.min(28, 24 * e * l)),
       // Desktop: 24px
@@ -385,25 +387,25 @@ function Ye({
       button: Math.max(12, Math.min(18, 16 * e * l))
       // Desktop: 16px
     };
-  }, [d, p, i, u, $]), fe = Q(() => {
-    const e = (p || i || 1e3) / 400, t = u ? 0.65 : 1, r = $ ? 0.85 : 1;
-    return j ? Math.max(8, Math.min(12, 10 * e)) : Math.max(12, Math.min(24, 16 * e)) * t * r;
-  }, [j, p, i, u, $]), n = Q(() => {
-    const e = (p || i || 1e3) / 400, t = u ? 0.65 : 1, r = $ ? 0.85 : 1;
-    return j ? Math.max(3, Math.min(6, 5 * e)) : Math.max(4, Math.min(12, 8 * e)) * t * r;
-  }, [j, p, i, u, $]), S = Q(() => {
-    const e = (p || i || 1e3) / 400, t = $ ? 0.9 : 1;
+  }, [d, p, r, u, $]), fe = Q(() => {
+    const e = (p || r || 1e3) / 400, t = u ? 0.65 : 1, i = $ ? 0.85 : 1;
+    return j ? Math.max(8, Math.min(12, 10 * e)) : Math.max(12, Math.min(24, 16 * e)) * t * i;
+  }, [j, p, r, u, $]), n = Q(() => {
+    const e = (p || r || 1e3) / 400, t = u ? 0.65 : 1, i = $ ? 0.85 : 1;
+    return j ? Math.max(3, Math.min(6, 5 * e)) : Math.max(4, Math.min(12, 8 * e)) * t * i;
+  }, [j, p, r, u, $]), S = Q(() => {
+    const e = (p || r || 1e3) / 400, t = $ ? 0.9 : 1;
     return Math.max(6, Math.min(10, 8 * e * t));
-  }, [p, i, $]), we = (e, t) => e.split("").every((r) => t.includes(r)), ke = (e, t) => e.split("").map((r) => t.includes(r) ? r : "_").join(" "), Me = (e) => "abcdefghijklmnopqrstuvwxyz".split("").filter((r) => !e.includes(r)), U = (e, t = []) => {
+  }, [p, r, $]), we = (e, t) => e.split("").every((i) => t.includes(i)), ke = (e, t) => e.split("").map((i) => t.includes(i) ? i : "_").join(" "), Me = (e) => "abcdefghijklmnopqrstuvwxyz".split("").filter((i) => !e.includes(i)), U = (e, t = []) => {
     var q;
     if (!e || !C[e]) {
       const W = Object.keys(C)[0];
       return ((q = C[W]) == null ? void 0 : q[0]) || "";
     }
-    const r = C[e];
-    if (!r || r.length === 0)
+    const i = C[e];
+    if (!i || i.length === 0)
       return "";
-    const l = r.filter((W) => !t.includes(W)), Y = l.length > 0 ? l : r;
+    const l = i.filter((W) => !t.includes(W)), Y = l.length > 0 ? l : i;
     if (Y.length === 0)
       return "";
     let D;
@@ -427,11 +429,11 @@ function Ye({
   }, se = ue((e) => {
     if (x !== "game" || f !== null) return;
     const t = e.toLowerCase();
-    /^[a-z]$/.test(t) && (R((r) => r.includes(t) ? r : [...r, t]), I((r) => (r && !r.includes(t) && T((l) => l + 1), r)));
+    /^[a-z]$/.test(t) && (R((i) => i.includes(t) ? i : [...i, t]), I((i) => (i && !i.includes(t) && T((l) => l + 1), i)));
   }, [x, f]), le = ue((e) => {
     se(e.key);
   }, [se]);
-  he(() => {
+  me(() => {
     if (x === "game")
       return window.addEventListener("keydown", le), () => window.removeEventListener("keydown", le);
   }, [x, le]);
@@ -445,7 +447,7 @@ function Ye({
       return t ? (I(t), [...e, t]) : e;
     }), R([]), T(0), B(null);
   }, [b, L, M]);
-  he(() => {
+  me(() => {
     if (xe && f === null) {
       B("win"), A((t) => t + 1);
       const e = setTimeout(() => {
@@ -471,23 +473,23 @@ function Ye({
       return t ? (I(t), [...e, t]) : e;
     }), R([]), T(0), B(null);
   };
-  he(() => {
+  me(() => {
     const e = () => {
-      const t = window.innerWidth, r = window.innerHeight, l = t < 768 || t === 926 && r === 428 || t === 932 && r === 430, Y = r < 700, D = t / r > 1.8, q = t === 1024 && r === 600, W = l && t > r, ge = t >= 1200 && t <= 1400;
+      const t = window.innerWidth, i = window.innerHeight, l = t < 768 || t === 926 && i === 428 || t === 932 && i === 430, Y = i < 700, D = t / i > 1.8, q = t === 1024 && i === 600, W = l && t > i, ge = t >= 1200 && t <= 1400;
       if (re(l), ie(q), ae(W), k(ge), l)
         O(null), E(1);
       else if (Y)
         O(null), E(1);
       else {
-        const ze = t - 80, We = r - 80, be = Math.min(ze, We);
+        const ze = t - 80, We = i - 80, be = Math.min(ze, We);
         let pe;
-        i && i >= 320 ? pe = Math.min(i, be) : pe = Math.min(1e3, be * 0.9);
+        r && r >= 320 ? pe = Math.min(r, be) : pe = Math.min(1e3, be * 0.9);
         const Ce = Math.max(400, Math.min(1200, pe));
         O(Ce), E(D ? 0.85 : 1);
       }
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, [i]);
+  }, [r]);
   const K = `
     <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;">
       <!-- Каракули мелками и фломастерами -->
@@ -537,8 +539,8 @@ function Ye({
     width: "100%",
     height: "100%",
     padding: `${fe}px`,
-    paddingTop: de ? "60px" : `${fe}px`,
-    // ✅ Резервируем место под логотип (16px top + 28px высота + 16px отступ)
+    paddingTop: de ? "80px" : `${fe}px`,
+    // ✅ Резервируем больше места под логотип (24px top + 28px высота + 28px отступ)
     overflow: $ ? "hidden" : "auto",
     // ✅ Для разрешений 1200-1400 убираем скролл
     position: "relative",
@@ -546,22 +548,24 @@ function Ye({
     background: "transparent"
   }, X = Q(
     () => {
-      const e = window.innerWidth, t = window.innerHeight;
-      if (d && e > t || t < 700 || !de)
+      if (!de)
         return null;
-      const r = c || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman/logo` : "/cloud/speakid/games/hangman/logo");
-      return /* @__PURE__ */ o("div", { style: a.gmLogoFixed, children: /* @__PURE__ */ h("picture", { children: [
+      const e = window.innerWidth;
+      if (d && e > window.innerHeight)
+        return null;
+      const t = c || (typeof window < "u" && window.origin ? `${window.origin}/cloud/speakid/games/hangman/logo` : "/cloud/speakid/games/hangman/logo");
+      return /* @__PURE__ */ o("div", { style: a.gmLogoFixed, children: /* @__PURE__ */ m("picture", { children: [
         /* @__PURE__ */ o(
           "source",
           {
-            srcSet: `${r}.svg`,
+            srcSet: `${t}.svg`,
             type: "image/svg+xml"
           }
         ),
         /* @__PURE__ */ o(
           "img",
           {
-            src: `${r}.png`,
+            src: `${t}.png`,
             alt: "SPEAKID Logo",
             style: a.gmLogoImg,
             loading: "lazy"
@@ -570,7 +574,7 @@ function Ye({
       ] }) });
     },
     [d, de, c, x]
-  ), Be = () => x === "lobby" ? /* @__PURE__ */ h(G, { children: [
+  ), Be = () => x === "lobby" ? /* @__PURE__ */ m(G, { children: [
     X,
     /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: K } }),
     /* @__PURE__ */ o("h1", { style: {
@@ -580,7 +584,7 @@ function Ye({
       position: "relative",
       zIndex: 1
     }, children: "HANGMAN" }),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ m(
       "button",
       {
         onClick: () => y("category"),
@@ -637,7 +641,7 @@ function Ye({
         ]
       }
     ),
-    /* @__PURE__ */ h("div", { style: {
+    /* @__PURE__ */ m("div", { style: {
       position: "absolute",
       top: "50%",
       left: "50%",
@@ -657,7 +661,7 @@ function Ye({
             left: d ? "-10%" : "5%",
             top: "20%",
             width: "auto",
-            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || i || 1e3) * 0.33, 300)}px`,
+            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
@@ -674,7 +678,7 @@ function Ye({
             right: d ? "5%" : "10%",
             bottom: "10%",
             width: "auto",
-            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || i || 1e3) * 0.33, 300)}px`,
+            height: d ? `${Math.min(window.innerHeight * 0.33, 200)}px` : `${Math.min((p || r || 1e3) * 0.33, 300)}px`,
             maxHeight: "33vh",
             objectFit: "contain",
             opacity: 0.6
@@ -682,7 +686,7 @@ function Ye({
         }
       )
     ] })
-  ] }) : x === "category" ? /* @__PURE__ */ h(G, { children: [
+  ] }) : x === "category" ? /* @__PURE__ */ m(G, { children: [
     X,
     /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: K } }),
     /* @__PURE__ */ o(
@@ -702,9 +706,9 @@ function Ye({
           padding: `${n}px ${n * 1.5}px`,
           borderRadius: `${S}px`,
           position: "absolute",
-          top: "52px",
-          // ✅ Под логотипом (16px top логотипа + 28px высота логотипа + 8px отступ)
-          left: "16px",
+          top: "60px",
+          // ✅ Под логотипом (24px top логотипа + 28px высота + 8px отступ)
+          left: "24px",
           // ✅ Та же позиция что и логотип
           zIndex: 10
         },
@@ -742,7 +746,7 @@ function Ye({
       },
       e
     )) })
-  ] }) : x === "rounds" ? /* @__PURE__ */ h(G, { children: [
+  ] }) : x === "rounds" ? /* @__PURE__ */ m(G, { children: [
     X,
     /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: K } }),
     /* @__PURE__ */ o(
@@ -762,9 +766,9 @@ function Ye({
           padding: `${n}px ${n * 1.5}px`,
           borderRadius: `${S}px`,
           position: "absolute",
-          top: "52px",
-          // ✅ Под логотипом (16px top логотипа + 28px высота логотипа + 8px отступ)
-          left: "16px",
+          top: "60px",
+          // ✅ Под логотипом (24px top логотипа + 28px высота + 8px отступ)
+          left: "24px",
           // ✅ Та же позиция что и логотип
           zIndex: 10
         },
@@ -803,30 +807,30 @@ function Ye({
       },
       e
     )) })
-  ] }) : x === "game" ? /* @__PURE__ */ h(G, { children: [
+  ] }) : x === "game" ? /* @__PURE__ */ m(G, { children: [
     X,
     !u && /* @__PURE__ */ o("div", { dangerouslySetInnerHTML: { __html: K } }),
     " ",
-    /* @__PURE__ */ h("div", { style: {
+    /* @__PURE__ */ m("div", { style: {
       ...a.gmInfoBox,
       padding: `${u ? n * 0.6 : n * 0.8}px`,
       // ✅ Уменьшаем padding в landscape
       marginBottom: `${u ? n * 0.3 : n * 0.5}px`,
       // ✅ Уменьшаем margin в landscape
-      maxWidth: `${(p || i) * 0.9}px`
+      maxWidth: `${(p || r) * 0.9}px`
     }, children: [
-      /* @__PURE__ */ h("h3", { style: { ...a.gmHeadline3, fontSize: `${s.headline3}px`, marginBottom: `${n * 0.5}px` }, children: [
+      /* @__PURE__ */ m("h3", { style: { ...a.gmHeadline3, fontSize: `${s.headline3}px`, marginBottom: `${n * 0.5}px` }, children: [
         "Category: ",
         b
       ] }),
-      /* @__PURE__ */ h("p", { style: { ...a.gmBodyM, fontSize: `${s.bodyM}px`, marginBottom: "0px" }, children: [
+      /* @__PURE__ */ m("p", { style: { ...a.gmBodyM, fontSize: `${s.bodyM}px`, marginBottom: "0px" }, children: [
         "Round ",
         L,
         " of ",
         M
       ] })
     ] }),
-    v && /* @__PURE__ */ h("p", { style: {
+    v && /* @__PURE__ */ m("p", { style: {
       ...a.gmBodyS,
       fontSize: `${s.bodyS}px`,
       marginTop: `${u ? n * 0.3 : n * 0.5}px`,
@@ -849,7 +853,7 @@ function Ye({
       {
         mistakes: V,
         maxMistakes: oe,
-        size: j ? Math.max(80, Math.min(110, (p || i) * 0.16)) : d ? u ? Math.max(70, Math.min(120, Math.min(window.innerWidth * 0.25, window.innerHeight * 0.15))) : Math.max(100, Math.min(150, Math.min(window.innerWidth * 0.3, window.innerHeight * 0.2))) : Math.max(100, Math.min(150, (p || i) * 0.2))
+        size: j ? Math.max(80, Math.min(110, (p || r) * 0.16)) : d ? u ? Math.max(70, Math.min(120, Math.min(window.innerWidth * 0.25, window.innerHeight * 0.15))) : Math.max(100, Math.min(150, Math.min(window.innerWidth * 0.3, window.innerHeight * 0.2))) : Math.max(100, Math.min(150, (p || r) * 0.2))
       }
     ) }),
     /* @__PURE__ */ o("div", { style: {
@@ -860,7 +864,7 @@ function Ye({
       letterSpacing: `${n * 0.8}px`,
       minHeight: `${Math.max(16, Math.min(24, s.wordDisplay * 0.9)) * 1.2}px`
     }, children: Se || "Loading..." }),
-    /* @__PURE__ */ h("div", { style: {
+    /* @__PURE__ */ m("div", { style: {
       ...a.gmInfoBox,
       padding: `${u ? n * 0.6 : n}px`,
       // ✅ Уменьшаем padding в landscape
@@ -868,7 +872,7 @@ function Ye({
       // ✅ Уменьшаем margin в landscape
       marginBottom: `${u ? n * 0.5 : n}px`,
       // ✅ Уменьшаем margin в landscape
-      maxWidth: `${(p || i) * 0.95}px`
+      maxWidth: `${(p || r) * 0.95}px`
     }, children: [
       /* @__PURE__ */ o("p", { style: {
         ...a.gmBodyS,
@@ -901,7 +905,7 @@ function Ye({
             background: "#f9f9f9",
             color: "#1f2937",
             border: "1px solid #e5e7eb",
-            minWidth: `${Math.max(n * 1.5, (p || i) * 0.04)}px`,
+            minWidth: `${Math.max(n * 1.5, (p || r) * 0.04)}px`,
             textAlign: "center",
             display: "inline-block",
             cursor: f === null ? "pointer" : "default",
@@ -919,7 +923,7 @@ function Ye({
       fontSize: `${Math.max(10, Math.min(12, s.bodyS * 0.85))}px`,
       marginTop: `${n * 0.5}px`,
       marginBottom: "2px"
-    }, children: /* @__PURE__ */ h("span", { style: { color: "#6b7280" }, children: [
+    }, children: /* @__PURE__ */ m("span", { style: { color: "#6b7280" }, children: [
       "Guessed letters: ",
       /* @__PURE__ */ o("strong", { children: F.join(", ") })
     ] }) }),
@@ -928,7 +932,7 @@ function Ye({
       fontSize: `${s.bodyL}px`,
       margin: "2px 0"
     }, children: "🎉 You won this round!" }),
-    f === "lose" && /* @__PURE__ */ h("div", { style: {
+    f === "lose" && /* @__PURE__ */ m("div", { style: {
       ...a.gmStatusLose,
       fontSize: `${s.bodyL}px`,
       margin: "2px 0"
@@ -980,14 +984,14 @@ function Ye({
       marginTop: `${n}px`,
       marginBottom: `${n}px`
     }, children: "Type a letter on your keyboard" })
-  ] }) : x === "result" ? /* @__PURE__ */ h(G, { children: [
+  ] }) : x === "result" ? /* @__PURE__ */ m(G, { children: [
     X,
     /* @__PURE__ */ o("h1", { style: {
       ...a.gmHeadline1,
       fontSize: `${s.headline1}px`,
       marginBottom: `${n * 2}px`
     }, children: "🎊 Game Finished!" }),
-    /* @__PURE__ */ h("p", { style: {
+    /* @__PURE__ */ m("p", { style: {
       ...a.gmBodyL,
       fontSize: `${s.bodyL}px`,
       marginBottom: `${n * 2}px`
@@ -998,7 +1002,7 @@ function Ye({
       /* @__PURE__ */ o("strong", { children: M }),
       " words correctly."
     ] }),
-    /* @__PURE__ */ h("div", { style: {
+    /* @__PURE__ */ m("div", { style: {
       display: "flex",
       flexDirection: "column",
       gap: `${n}px`,
@@ -1076,8 +1080,8 @@ function Ye({
         "div",
         {
           style: {
-            width: d ? "100%" : p || i || 1e3,
-            height: d ? "100%" : p || i || 1e3,
+            width: d ? "100%" : p || r || 1e3,
+            height: d ? "100%" : p || r || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",