@mblinkov/whats-missing 20.0.43 → 20.0.45

package/dist/whats-missing.es.js

@@ -1,10 +1,9 @@
-import { jsx as n, jsxs as d, Fragment as ve } from "react/jsx-runtime";
-import { useRef as V, useState as a, useLayoutEffect as _, useEffect as F, useMemo as Z } from "react";
-import { createPortal as ze } from "react-dom";
-const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (c, h) => c.map(([r, i]) => ({
-  src: `${Ce}${h}/${i.replace(/\s/g, "%20")}.png`,
-  name: i
-})), ke = [
+import { jsx as w, jsxs as c, Fragment as pn } from "react/jsx-runtime";
+import { useRef as Fn, useEffect as q, useState as d, useMemo as Yn } from "react";
+const Un = window.origin + "/cloud/speakid/games/whatsmissing/", K = (o, b) => o.map(([y, h]) => ({
+  src: `${Un}${b}/${h.replace(/\s/g, "%20")}.png`,
+  name: h
+})), Nn = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -30,7 +29,7 @@ const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (c, h) => c
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], Se = [
+], Vn = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -50,7 +49,7 @@ const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (c, h) => c
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], Te = [
+], _n = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -70,23 +69,23 @@ const Ce = window.origin + "/cloud/speakid/games/whatsmissing/", U = (c, h) => c
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ce = {
-  food: U(ke, "food"),
-  animals: U(Se, "animals"),
-  toys: U(Te, "toys")
-}, Re = `
+], an = {
+  food: K(Nn, "food"),
+  animals: K(Vn, "animals"),
+  toys: K(_n, "toys")
+}, $n = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
-  const c = document.createElement("style");
-  c.id = "spin-keyframes", c.innerHTML = Re, document.head.appendChild(c);
+  const o = document.createElement("style");
+  o.id = "spin-keyframes", o.innerHTML = $n, document.head.appendChild(o);
 }
-const Me = {
+const qn = {
   animation: "spin 1.4s linear infinite"
-}, o = {
+}, e = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -171,27 +170,6 @@ const Me = {
     gap: "20px",
     justifyContent: "center"
   },
-  gmCard: {
-    border: "1px solid #e5e7eb",
-    borderRadius: "16px",
-    background: "#f9f9f9",
-    aspectRatio: "1 / 1",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    transition: "transform .2s ease, box-shadow .2s ease, border-color .2s ease"
-  },
-  gmCorrect: {
-    border: "2px solid #10b981",
-    boxShadow: "0 0 18px rgba(16,185,129,.45)",
-    background: "#ecfdf5"
-  },
-  gmWrong: {
-    border: "2px solid #ec4c44",
-    boxShadow: "0 0 18px rgba(236,76,68,.35)",
-    background: "#fef2f2"
-  },
   gmInput: {
     padding: "6px 10px",
     borderRadius: "6px",
@@ -240,440 +218,441 @@ const Me = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...Me
+    ...qn
   }
-}, He = (c, h) => {
-  const r = Array.from({ length: c.length + 1 }, () => Array(h.length + 1).fill(0));
-  for (let i = 0; i <= c.length; i++) r[i][0] = i;
-  for (let i = 0; i <= h.length; i++) r[0][i] = i;
-  for (let i = 1; i <= c.length; i++)
-    for (let f = 1; f <= h.length; f++)
-      r[i][f] = c[i - 1] === h[f - 1] ? r[i - 1][f - 1] : Math.min(r[i - 1][f - 1], r[i][f - 1], r[i - 1][f]) + 1;
-  return r[c.length][h.length];
+}, Kn = () => {
+  const o = document.createElement("style");
+  o.textContent = `
+    #whats-missing-root, #whats-missing-root * {
+      box-sizing: border-box;
+      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    }
+    #whats-missing-root img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
+    html, body {
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      zoom: 1 !important; /* ✅ защита от подзума */
+    }
+    #root {
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+    }
+  `, document.head.appendChild(o);
+}, On = (o, b) => {
+  const y = Array.from({ length: o.length + 1 }, () => Array(b.length + 1).fill(0));
+  for (let h = 0; h <= o.length; h++) y[h][0] = h;
+  for (let h = 0; h <= b.length; h++) y[0][h] = h;
+  for (let h = 1; h <= o.length; h++)
+    for (let m = 1; m <= b.length; m++)
+      y[h][m] = o[h - 1] === b[m - 1] ? y[h - 1][m - 1] : Math.min(y[h - 1][m - 1], y[h][m - 1], y[h - 1][m]) + 1;
+  return y[o.length][b.length];
 };
-function Ie(c, h = { minDesktopWidth: 1200, forceResize: !1 }) {
-  const r = V(null), i = h.minDesktopWidth ?? 1200, f = !!h.forceResize;
-  _(() => {
-    if (typeof window > "u" || !c || !c.current) return;
-    const m = c.current, M = () => {
-      try {
-        const s = document.body, w = getComputedStyle(s), x = parseFloat(s.style && s.style.zoom || "");
-        if (x && !isNaN(x) && x > 0) return x;
-        const S = parseFloat(w.zoom || "");
-        if (S && !isNaN(S) && S > 0) return S;
-        const u = document.createElement("div");
-        u.style.position = "absolute", u.style.left = "0", u.style.top = "0", u.style.width = "100px", u.style.height = "1px", u.style.visibility = "hidden", document.documentElement.appendChild(u);
-        const T = u.getBoundingClientRect();
-        if (document.documentElement.removeChild(u), T && T.width > 0) {
-          const z = T.width / 100;
-          if (!isNaN(z) && z > 0) return z;
-        }
-      } catch {
-      }
-      return 1;
-    }, A = () => {
-      if (i && window.innerWidth < i) {
-        H();
-        return;
-      }
-      const s = M();
-      if (!s || s === 1) {
-        H();
-        return;
-      }
-      r.current || (r.current = {
-        transform: m.style.transform || null,
-        transformOrigin: m.style.transformOrigin || null,
-        width: m.style.width || null,
-        height: m.style.height || null,
-        willChange: m.style.willChange || null
-      });
-      const w = 1 / s;
-      f && (m.style.width = `${s * 100}%`, m.style.height = `${s * 100}%`), m.style.transformOrigin = "50% 50%", m.style.transform = `scale(${w})`, m.style.willChange = "transform";
-    }, H = () => {
-      if (!r.current) return;
-      const s = r.current;
-      m.style.transform = s.transform ?? "", m.style.transformOrigin = s.transformOrigin ?? "", m.style.width = s.width ?? "", m.style.height = s.height ?? "", m.style.willChange = s.willChange ?? "", r.current = null;
-    };
-    let k = 0;
-    const y = () => {
-      cancelAnimationFrame(k), k = requestAnimationFrame(A);
-    }, I = new MutationObserver((s) => {
-      for (const w of s)
-        if (w.type === "attributes" && (w.attributeName === "style" || w.attributeName === "class")) {
-          y();
-          break;
-        }
-    });
-    return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", y), y(), () => {
-      cancelAnimationFrame(k), I.disconnect(), window.removeEventListener("resize", y), H();
-    };
-  }, [c, i, f]);
-}
-function Ee({
-  gameCubeSize: c,
-  screenHeight: h,
-  screenWidth: r
+function ii({
+  gameCubeSize: o,
+  screenHeight: b,
+  screenWidth: y
 }) {
-  const i = V(null), f = V(null), [m, M] = a(null), [A, H] = a(null);
-  Ie(i, { minDesktopWidth: 1024, forceResize: !1 }), _(() => {
-    const e = i.current;
-    if (!e) return;
-    let t = e.shadowRoot;
-    t || (t = e.attachShadow({ mode: "open" })), e.style.position = "fixed", e.style.top = "0", e.style.left = "0", e.style.width = "100vw", e.style.height = "100vh", e.style.zIndex = "9999", e.style.background = "linear-gradient(to bottom, #fff8f8, #f9fafb)", e.style.margin = "0", e.style.padding = "0", e.style.transform = "none", e.style.zoom = "1", t.innerHTML = "";
-    const l = document.createElement("style");
-    l.textContent = `
-      :host {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-      }
-      
-      #whats-missing-root, #whats-missing-root * { 
-        box-sizing: border-box; 
-      }
-      
-      #whats-missing-root img { 
-        max-width: 100%; 
-        height: auto; 
-        display: block; 
-        user-select: none; 
-      }
-      
-      #whats-missing-root {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        max-width: 1200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    `, t.appendChild(l), H(t);
-  }, []), F(() => {
-    const e = document.body, t = document.documentElement, l = e.style.zoom, g = e.style.transform, v = t.style.zoom, L = t.style.transform;
-    return e.style.zoom = "1", e.style.transform = "none", t.style.zoom = "1", t.style.transform = "none", () => {
-      e.style.zoom = l, e.style.transform = g, t.style.zoom = v, t.style.transform = L;
-    };
-  }, []);
-  const k = Z(() => {
-    const e = c ?? Math.min(r ?? 1e3, h ?? 1e3), t = r ?? (typeof window < "u" ? window.innerWidth : 1e3);
-    return e < 600 && t > 768 ? 600 : t <= 768 ? Math.min(e, t - 20) : e;
-  }, [c, r, h]);
-  F(() => () => {
+  const h = Fn(null);
+  q(() => (Kn(), () => {
     document.body.style.overflow = "";
-  }, []);
-  const [y, I] = a(null), [s, w] = a([]), [x, S] = a(4), [u, T] = a(!1), [z, K] = a(1), [C, me] = a(null), [b, E] = a("ready"), [J, Q] = a(3), [G, N] = a(10), [$, X] = a(20), [he, D] = a(0), [W, O] = a(!1), [j, ee] = a(""), [R, q] = a(!1), [Y, te] = a(!1), [ne, B] = a(null), [ue, P] = a([]), [ge, oe] = a([]), [p, fe] = a(!1);
-  F(() => {
-    if (typeof window > "u") return;
-    const e = () => {
-      const t = r ?? window.innerWidth, l = window.matchMedia && window.matchMedia("(pointer: coarse)").matches;
-      fe(t <= 768 || l);
-    };
-    return e(), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
+  }), []);
+  const [m, O] = d(null), [T, Z] = d([]), [M, ln] = d(4), [z, J] = d(!1), [C, Q] = d(1), [S, xn] = d(null), [I, B] = d("ready"), [X, nn] = d(3), [D, E] = d(10), [G, en] = d(20), [Hn, F] = d(0), [R, Y] = d(!1), [A, wn] = d(""), [k, U] = d(!1), [N, tn] = d(!1), [dn, P] = d(null), [Wn, V] = d([]), [cn, on] = d([]), [n, mn] = d(!1), [Zn, _] = d(1), [rn, $] = d(null), [f, un] = d(!1), [g, fn] = d(!1), [s, yn] = d(!1), [p, bn] = d(!1), [a, In] = d(!1), [l, Sn] = d(!1), [x, kn] = d(!1), [H, vn] = d(!1), [W, Tn] = d(!1);
+  q(() => {
+    const i = () => {
+      const t = y ?? window.innerWidth, r = b ?? window.innerHeight, u = t < 768 || t === 926 && r === 428 || t === 932 && r === 430, v = r < 700, L = t === 768 && r === 1024, j = t === 1024 && r === 768, Cn = t === 820 && r === 1180, Bn = t === 1180 && r === 820, Rn = t === 540 && r === 720, An = t === 720 && r === 540, jn = t === 1024 && r === 1366, Dn = t === 1366 && r === 1024, En = t >= 1200 && r >= 600 && !u;
+      if (un(En), fn(L), yn(j), bn(Cn), In(Bn), Sn(Rn), kn(An), vn(jn), Tn(Dn), mn(u), u)
+        $(o && o >= 320 ? o : null), _(1);
+      else if (v)
+        $(o && o >= 400 ? o : null), _(1);
+      else {
+        const Gn = o ? Math.max(400, Math.min(1200, o)) : Math.min(1e3, Math.min(t, r) * 0.9);
+        $(Gn), _(1);
+      }
     };
-  }, [r]), _(() => {
-    const e = f.current;
-    if (!e || typeof window > "u") return;
-    let t = null;
-    try {
-      t = new ResizeObserver((l) => {
-        for (const g of l) {
-          const v = g.contentRect;
-          M(Math.round(Math.min(v.width, v.height)));
-        }
-      }), t.observe(e), M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
-    } catch {
-      M(Math.round(Math.min(e.clientWidth, e.clientHeight)));
-    }
-    return () => t?.disconnect();
-  }, [p]);
-  const ie = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), re = () => {
-    if (!y) return;
-    const e = ie(ce[y]);
-    w(e), T(!0), O(!1), K(1), D(0), P([]), oe([]), se(e, [], !0);
-  }, se = (e = s, t = ge, l = !1) => {
-    const g = ie(e.length ? e : ce[y]);
-    let v = Math.floor(Math.random() * g.length), L = g[v].name, de = 0;
-    for (; t.includes(L) && de < 20; )
-      v = Math.floor(Math.random() * g.length), L = g[v].name, de++;
-    w(g), me(v), oe([...t, L]), q(!1), ee(""), X(20), B(null), l ? (E("ready"), Q(3), N(10)) : (E("memorize"), N(10));
+    return i(), window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, [y, b, o]);
+  const hn = (i) => [...i].sort(() => Math.random() - 0.5).slice(0, 6), gn = () => {
+    if (!m) return;
+    const i = hn(an[m]);
+    Z(i), J(!0), Y(!1), Q(1), F(0), V([]), on([]), sn(i, [], !0);
+  }, sn = (i = T, t = cn, r = !1) => {
+    const u = hn(i.length ? i : an[m]);
+    let v = Math.floor(Math.random() * u.length), L = u[v].name, j = 0;
+    for (; t.includes(L) && j < 20; )
+      v = Math.floor(Math.random() * u.length), L = u[v].name, j++;
+    Z(u), xn(v), on([...t, L]), U(!1), wn(""), en(20), P(null), r ? (B("ready"), nn(3), E(10)) : (B("memorize"), E(10));
   };
-  F(() => {
-    if (!(!u || W || R)) {
-      if (b === "ready")
-        if (J <= 0) E("memorize");
+  q(() => {
+    if (!(!z || R || k)) {
+      if (I === "ready")
+        if (X <= 0) B("memorize");
         else {
-          const e = setTimeout(() => Q((t) => t - 1), 1e3);
-          return () => clearTimeout(e);
+          const i = setTimeout(() => nn((t) => t - 1), 1e3);
+          return () => clearTimeout(i);
         }
-      if (b === "memorize")
-        if (G <= 0) E("guess");
+      if (I === "memorize")
+        if (D <= 0) B("guess");
         else {
-          const e = setTimeout(() => N((t) => t - 1), 1e3);
-          return () => clearTimeout(e);
+          const i = setTimeout(() => E((t) => t - 1), 1e3);
+          return () => clearTimeout(i);
         }
-      if (b === "guess") {
-        if ($ <= 0) {
-          q(!0), B("wrong");
-          const t = s[C].name;
-          P((l) => [
-            ...l,
-            { round: z, answer: j, correct: t, result: "wrong" }
+      if (I === "guess") {
+        if (G <= 0) {
+          U(!0), P("wrong");
+          const t = T[S].name;
+          V((r) => [
+            ...r,
+            { round: C, answer: A, correct: t, result: "wrong" }
           ]);
           return;
         }
-        const e = setTimeout(() => X((t) => t - 1), 1e3);
-        return () => clearTimeout(e);
+        const i = setTimeout(() => en((t) => t - 1), 1e3);
+        return () => clearTimeout(i);
       }
     }
-  }, [b, J, G, $, u, W, R, s, C, z, j]);
-  const pe = () => {
-    if (C === null || Y) return;
-    const e = s[C].name, t = j.toLowerCase().trim();
-    let l = "wrong";
-    t === e ? (D((g) => g + 1), B("correct"), l = "correct") : He(t, e) === 1 ? (D((g) => g + 0.5), B("almost"), l = "almost") : (B("wrong"), l = "wrong"), P((g) => [...g, { round: z, answer: t, correct: e, result: l }]), te(!0), setTimeout(() => {
-      te(!1), q(!0);
+  }, [I, X, D, G, z, R, k, T, S, C, A]);
+  const zn = () => {
+    if (S === null || N) return;
+    const i = T[S].name, t = A.toLowerCase().trim();
+    let r = "wrong";
+    t === i ? (F((u) => u + 1), P("correct"), r = "correct") : On(t, i) === 1 ? (F((u) => u + 0.5), P("almost"), r = "almost") : (P("wrong"), r = "wrong"), V((u) => [...u, { round: C, answer: t, correct: i, result: r }]), tn(!0), setTimeout(() => {
+      tn(!1), U(!0);
     }, 600);
-  }, ye = () => z < x ? (K((e) => e + 1), se()) : O(!0), we = () => {
-    T(!1), O(!1), I(null);
-  }, be = Z(
-    () => /* @__PURE__ */ n("div", { style: { ...o.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ d("picture", { children: [
-      /* @__PURE__ */ n(
-        "source",
-        {
-          srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
-          type: "image/svg+xml"
-        }
-      ),
-      /* @__PURE__ */ n(
-        "img",
-        {
-          src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
-          alt: "SPEAKID Logo",
-          style: o.gmLogoImg,
-          loading: "lazy"
-        }
-      )
-    ] }) }),
-    []
-  ), le = 1200, ae = 700, xe = Z(() => {
-    const e = r ?? (typeof window < "u" ? window.innerWidth : le), t = h ?? (typeof window < "u" ? window.innerHeight : ae), l = Math.min(e / le, t / ae);
-    return Math.min(1.35, Math.max(1, l));
-  }, [r, h, p]);
-  return /* @__PURE__ */ n("div", { ref: i, style: { width: "100%", height: "100%" }, children: A && ze(
-    /* @__PURE__ */ n(
-      "div",
-      {
-        id: "whats-missing-root",
-        style: { all: "unset" },
-        children: /* @__PURE__ */ n(
-          "div",
+  }, Pn = () => C < M ? (Q((i) => i + 1), sn()) : Y(!0), Ln = () => {
+    J(!1), Y(!1), O(null);
+  }, Mn = Yn(
+    () => n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? null : (
+      // ensure logo is positioned inside the square container
+      /* @__PURE__ */ w("div", { style: { ...e.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ c("picture", { children: [
+        /* @__PURE__ */ w(
+          "source",
           {
-            ref: f,
-            style: {
-              width: p ? "100%" : `${k}px`,
-              height: p ? "100%" : `${k}px`,
-              borderRadius: p ? 0 : "20px",
-              background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-              position: "relative",
-              overflow: "hidden",
-              boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.08)",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /* @__PURE__ */ d(
-              "div",
-              {
-                style: {
-                  transform: `scale(${xe})`,
-                  transformOrigin: "center center",
-                  transition: "transform 0.2s ease-out",
-                  width: "100%",
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center"
-                },
-                children: [
-                  !p && be,
-                  !y && !u && /* @__PURE__ */ d("div", { style: o.gmCenterScreen, children: [
-                    /* @__PURE__ */ n("h1", { style: o.gmHeadline1, children: "WHAT'S MISSING?" }),
-                    /* @__PURE__ */ n("p", { style: o.gmBodyM, children: "Select a theme:" }),
-                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ n("button", { style: o.gmButton, onClick: () => I(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
-                    /* @__PURE__ */ d("div", { style: { marginTop: 24 }, children: [
-                      /* @__PURE__ */ n("p", { style: o.gmBodyS, children: "Choose number of rounds:" }),
-                      /* @__PURE__ */ n("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ n(
-                        "button",
-                        {
-                          style: {
-                            ...o.gmButton,
-                            ...x === e ? o.gmButtonActive : {}
-                          },
-                          onClick: () => S(e),
-                          children: e
+            srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg",
+            type: "image/svg+xml"
+          }
+        ),
+        /* @__PURE__ */ w(
+          "img",
+          {
+            src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png",
+            alt: "SPEAKID Logo",
+            style: e.gmLogoImg,
+            loading: "lazy"
+          }
+        )
+      ] }) })
+    ),
+    [n]
+  );
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      ref: h,
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        transition: "background 0.3s ease",
+        overflow: "hidden",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: /* @__PURE__ */ w(
+        "div",
+        {
+          style: {
+            width: n ? "100%" : rn || o || 1e3,
+            height: n ? "100%" : rn || o || 1e3,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+            borderRadius: n ? 0 : "20px",
+            background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+            boxShadow: n ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: n ? "0 auto" : "unset",
+            position: "relative"
+            // needed so absolute logo is inside the square
+          },
+          children: /* @__PURE__ */ w(
+            "div",
+            {
+              style: {
+                transform: "none",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ c("div", { id: "whats-missing-root", children: [
+                !n && Mn,
+                !m && !z && /* @__PURE__ */ c("div", { style: e.gmCenterScreen, children: [
+                  /* @__PURE__ */ w("h1", { style: e.gmHeadline1, children: "WHAT'S MISSING?" }),
+                  /* @__PURE__ */ w("p", { style: e.gmBodyM, children: "Select a theme:" }),
+                  /* @__PURE__ */ w("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && 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 ? "8px" : "16px" }, children: ["animals", "food", "toys"].map((i) => /* @__PURE__ */ w("button", { style: {
+                    ...e.gmButton,
+                    padding: n && window.innerWidth > window.innerHeight || n && 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 ? "8px 12px" : "12px 24px",
+                    fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
+                    minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "70px" : "auto"
+                  }, onClick: () => O(i), children: i === "animals" ? "🐶 Animals" : i === "food" ? "🍎 Food" : "🧸 Toys" }, i)) }),
+                  /* @__PURE__ */ c("div", { style: { marginTop: 24 }, children: [
+                    /* @__PURE__ */ w("p", { style: e.gmBodyS, children: "Choose number of rounds:" }),
+                    /* @__PURE__ */ w("div", { style: { display: "flex", gap: n && window.innerWidth > window.innerHeight || n && 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: 8 }, children: [3, 4, 5].map((i) => /* @__PURE__ */ w(
+                      "button",
+                      {
+                        style: {
+                          ...e.gmButton,
+                          ...M === i ? e.gmButtonActive : {},
+                          padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
+                          fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
+                          minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "40px" : "auto"
                         },
-                        e
-                      )) })
-                    ] })
+                        onClick: () => ln(i),
+                        children: i
+                      },
+                      i
+                    )) })
+                  ] })
+                ] }),
+                m && !z && /* @__PURE__ */ c("div", { style: e.gmCenterScreen, children: [
+                  /* @__PURE__ */ c("h1", { style: e.gmHeadline1, children: [
+                    "Theme selected: ",
+                    m
                   ] }),
-                  y && !u && /* @__PURE__ */ d("div", { style: o.gmCenterScreen, children: [
-                    /* @__PURE__ */ d("h1", { style: o.gmHeadline1, children: [
-                      "Theme selected: ",
-                      y
-                    ] }),
-                    /* @__PURE__ */ d("p", { style: o.gmBodyM, children: [
-                      "Rounds: ",
-                      x
-                    ] }),
-                    /* @__PURE__ */ n("button", { style: o.gmButton, onClick: re, children: "▶ Start game" })
+                  /* @__PURE__ */ c("p", { style: e.gmBodyM, children: [
+                    "Rounds: ",
+                    M
                   ] }),
-                  W && /* @__PURE__ */ d("div", { style: o.gmCenterScreen, children: [
-                    /* @__PURE__ */ n("h1", { style: o.gmHeadline1, children: "Results" }),
-                    /* @__PURE__ */ d("h2", { style: o.gmHeadline3, children: [
-                      "Your score: ",
-                      he,
-                      " / ",
-                      x
-                    ] }),
-                    /* @__PURE__ */ n("p", { style: { ...o.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
-                    /* @__PURE__ */ d("table", { style: o.gmTable, children: [
-                      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ d("tr", { children: [
-                        /* @__PURE__ */ n("th", { children: "Round" }),
-                        /* @__PURE__ */ n("th", { children: "Your Answer" }),
-                        /* @__PURE__ */ n("th", { children: "Correct" }),
-                        /* @__PURE__ */ n("th", { children: "Result" })
-                      ] }) }),
-                      /* @__PURE__ */ n("tbody", { children: ue.map((e, t) => /* @__PURE__ */ d("tr", { children: [
-                        /* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.round }),
-                        /* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.answer || "—" }),
-                        /* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.correct }),
-                        /* @__PURE__ */ n("td", { style: o.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
-                      ] }, t)) })
-                    ] }),
-                    /* @__PURE__ */ d("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                      /* @__PURE__ */ n("button", { style: o.gmButton, onClick: re, children: "🔁 Play again" }),
-                      /* @__PURE__ */ n("button", { style: o.gmButton, onClick: we, children: "⬅️ Choose theme" })
-                    ] })
+                  /* @__PURE__ */ w("button", { style: {
+                    ...e.gmButton,
+                    padding: n && window.innerWidth > window.innerHeight || n && 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 ? "8px 16px" : "12px 24px",
+                    fontSize: n && window.innerWidth > window.innerHeight || n && 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",
+                    minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "120px" : "auto"
+                  }, onClick: gn, children: "▶ Start game" })
+                ] }),
+                R && /* @__PURE__ */ c("div", { style: e.gmCenterScreen, children: [
+                  /* @__PURE__ */ w("h1", { style: {
+                    ...e.gmHeadline1,
+                    marginTop: n && 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 || s || p || a || l || x || H || W ? "0px" : e.gmHeadline1.marginTop,
+                    marginBottom: n && 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 || s || p || a || l || x || H || W ? "2px" : e.gmHeadline1.marginBottom
+                  }, children: "Results" }),
+                  /* @__PURE__ */ c("h2", { style: {
+                    ...e.gmHeadline3,
+                    marginTop: n && 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 || s || p || a || l || x || H || W ? "0px" : e.gmHeadline3.marginTop,
+                    marginBottom: n && 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 || s || p || a || l || x || H || W ? "2px" : e.gmHeadline3.marginBottom
+                  }, children: [
+                    "Your score: ",
+                    Hn,
+                    " / ",
+                    M
                   ] }),
-                  u && !W && /* @__PURE__ */ d("div", { style: o.gmGameLayout, children: [
-                    /* @__PURE__ */ d(
-                      "div",
-                      {
-                        style: {
-                          minHeight: 160,
-                          display: "flex",
-                          flexDirection: "column",
-                          justifyContent: "center",
-                          alignItems: "center"
-                        },
-                        children: [
-                          b === "ready" && /* @__PURE__ */ d(ve, { children: [
-                            /* @__PURE__ */ n("h1", { style: { ...o.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
-                            /* @__PURE__ */ n("div", { style: o.gmHourglass, children: "⏳" })
-                          ] }),
-                          b === "memorize" && /* @__PURE__ */ d("p", { style: { ...o.gmBodyM, color: "#10b981" }, children: [
-                            "MEMORIZE (",
-                            G,
-                            ")"
-                          ] }),
-                          b === "guess" && !R && /* @__PURE__ */ d("p", { style: o.gmBodyM, children: [
-                            "⏳ Time left: ",
-                            $,
-                            "s"
-                          ] })
-                        ]
-                      }
-                    ),
-                    b !== "ready" && /* @__PURE__ */ n(
-                      "div",
-                      {
-                        style: {
-                          ...o.gmGrid,
-                          display: "grid",
-                          gridTemplateColumns: `repeat(${p ? 2 : 3}, 1fr)`,
-                          gridTemplateRows: `repeat(${p ? 3 : 2}, 1fr)`,
-                          gap: p ? 12 : 20,
-                          justifyContent: "center",
-                          alignContent: "center",
-                          padding: p ? 8 : 16,
-                          width: "100%",
-                          height: "100%",
-                          maxWidth: p ? "100%" : 600,
-                          maxHeight: p ? "100%" : 400,
-                          boxSizing: "border-box"
-                        },
-                        children: s.map((e, t) => {
-                          const l = C === t && b === "guess" && !R;
-                          return /* @__PURE__ */ n(
-                            "div",
-                            {
-                              style: {
-                                ...o.gmCard,
-                                width: "100%",
-                                height: "100%",
-                                ...ne === "correct" && C === t ? o.gmCorrect : {},
-                                ...ne === "wrong" && C === t ? o.gmWrong : {}
-                              },
-                              children: !l && /* @__PURE__ */ n(
-                                "img",
-                                {
-                                  src: e.src,
-                                  alt: e.name,
-                                  style: {
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "cover",
-                                    display: "block"
-                                  }
-                                }
-                              )
-                            },
-                            t
-                          );
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ d("div", { style: { marginTop: 16, height: 80 }, children: [
-                      b === "guess" && !R && /* @__PURE__ */ d("div", { children: [
-                        /* @__PURE__ */ n(
-                          "input",
-                          {
-                            type: "text",
-                            placeholder: "Type the missing word",
-                            value: j,
-                            onChange: (e) => ee(e.target.value),
-                            style: o.gmInput
-                          }
-                        ),
-                        /* @__PURE__ */ n(
-                          "button",
+                  /* @__PURE__ */ w("p", { style: {
+                    ...e.gmBodyM,
+                    color: "#10b981",
+                    marginTop: n && 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 || s || p || a || l || x || H || W ? "0px" : "12px",
+                    marginBottom: n && 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 || s || p || a || l || x || H || W ? "2px" : e.gmBodyM.marginBottom
+                  }, children: "Yahoo! You did it! 🍬✨" }),
+                  /* @__PURE__ */ c("table", { style: {
+                    ...e.gmTable,
+                    marginTop: n && 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 || s || p || a || l || x || H || W ? "0px" : "20px",
+                    marginBottom: n && 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 || s || p || a || l || x || H || W ? "4px" : "32px"
+                  }, children: [
+                    /* @__PURE__ */ w("thead", { children: /* @__PURE__ */ c("tr", { children: [
+                      /* @__PURE__ */ w("th", { children: "Round" }),
+                      /* @__PURE__ */ w("th", { children: "Your Answer" }),
+                      /* @__PURE__ */ w("th", { children: "Correct" }),
+                      /* @__PURE__ */ w("th", { children: "Result" })
+                    ] }) }),
+                    /* @__PURE__ */ w("tbody", { children: Wn.map((i, t) => /* @__PURE__ */ c("tr", { children: [
+                      /* @__PURE__ */ w("td", { style: e.gmTableCell, children: i.round }),
+                      /* @__PURE__ */ w("td", { style: e.gmTableCell, children: i.answer || "—" }),
+                      /* @__PURE__ */ w("td", { style: e.gmTableCell, children: i.correct }),
+                      /* @__PURE__ */ w("td", { style: e.gmTableCell, children: i.result === "correct" ? "✔ Correct" : i.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
+                    ] }, t)) })
+                  ] }),
+                  /* @__PURE__ */ c("div", { style: {
+                    display: "flex",
+                    gap: n && window.innerWidth > window.innerHeight || n && 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: n && window.innerWidth > window.innerHeight || n && 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 || f ? "12px" : "24px"
+                  }, children: [
+                    /* @__PURE__ */ w("button", { style: {
+                      ...e.gmButton,
+                      padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
+                      fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
+                      minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "80px" : "auto"
+                    }, onClick: gn, children: "🔁 Play again" }),
+                    /* @__PURE__ */ w("button", { style: {
+                      ...e.gmButton,
+                      padding: n && window.innerWidth > window.innerHeight || n && 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 10px" : "12px 24px",
+                      fontSize: n && window.innerWidth > window.innerHeight || n && 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 ? "12px" : "16px",
+                      minWidth: n && window.innerWidth > window.innerHeight || n && 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 ? "80px" : "auto"
+                    }, onClick: Ln, children: "⬅️ Choose theme" })
+                  ] })
+                ] }),
+                z && !R && /* @__PURE__ */ c("div", { style: e.gmGameLayout, children: [
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      style: {
+                        minHeight: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "45px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "60px" : "160px",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        paddingTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "15px" : "40px"
+                      },
+                      children: [
+                        I === "ready" && /* @__PURE__ */ c(pn, { children: [
+                          /* @__PURE__ */ w("h1", { style: { ...e.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                          /* @__PURE__ */ w("div", { style: e.gmHourglass, children: "⏳" })
+                        ] }),
+                        I === "memorize" && /* @__PURE__ */ c("p", { style: { ...e.gmBodyM, color: "#10b981" }, children: [
+                          "MEMORIZE (",
+                          D,
+                          ")"
+                        ] }),
+                        I === "guess" && !k && /* @__PURE__ */ c("p", { style: e.gmBodyM, children: [
+                          "⏳ Time left: ",
+                          G,
+                          "s"
+                        ] })
+                      ]
+                    }
+                  ),
+                  I !== "ready" && /* @__PURE__ */ w(
+                    "div",
+                    {
+                      style: {
+                        ...e.gmGrid,
+                        gridTemplateColumns: n && window.innerWidth > window.innerHeight || n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "repeat(3, 1fr)" : n ? "repeat(2, 1fr)" : window.innerHeight < 700 ? "repeat(3, 1fr)" : "repeat(3, 210px)",
+                        // desktop: 3 колонки фиксированного размера
+                        gridAutoRows: n && window.innerWidth > window.innerHeight ? "120px" : n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "100px" : n ? "150px" : window.innerHeight < 700 ? "140px" : "210px",
+                        // desktop: стандартная высота
+                        gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "12px" : n || window.innerHeight < 700 ? "8px" : "20px",
+                        justifyItems: "center",
+                        maxWidth: n && window.innerWidth > window.innerHeight ? "90%" : n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "95%" : "100%",
+                        padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "8px" : "16px"
+                      },
+                      children: T.map((i, t) => {
+                        const r = S === t && I === "guess" && !k;
+                        return /* @__PURE__ */ w(
+                          "div",
                           {
-                            style: { ...o.gmButton, marginLeft: 8 },
-                            onClick: pe,
-                            disabled: Y,
-                            children: Y ? "..." : "Check"
+                            style: {
+                              width: "100%",
+                              height: "100%",
+                              borderRadius: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px" : "12px",
+                              overflow: "hidden",
+                              boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 1px 4px rgba(0,0,0,0.1)" : "0 4px 12px rgba(0,0,0,0.15)",
+                              transition: "all 0.3s ease",
+                              cursor: "pointer",
+                              ...dn === "correct" && S === t ? {
+                                boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 0 15px #10b981" : "0 0 20px #10b981",
+                                transform: "scale(1.03)"
+                              } : {},
+                              ...dn === "wrong" && S === t ? {
+                                boxShadow: n && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "0 0 15px #ef4444" : "0 0 20px #ef4444",
+                                transform: "scale(1.03)"
+                              } : {}
+                            },
+                            children: !r && /* @__PURE__ */ w(
+                              "img",
+                              {
+                                src: i.src,
+                                alt: i.name,
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          t
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ c("div", { style: {
+                    marginTop: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "1px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "4px" : "16px",
+                    height: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "40px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "50px" : "80px"
+                  }, children: [
+                    I === "guess" && !k && /* @__PURE__ */ w("div", { style: {
+                      display: "flex",
+                      flexDirection: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || g || s || p || a || l || x || H || W || f ? "row" : "column",
+                      gap: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "3px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W ? "8px" : n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "6px" : "12px",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "100%",
+                      maxWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "270px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "400px" : "300px"
+                    }, children: /* @__PURE__ */ c(pn, { children: [
+                      /* @__PURE__ */ w(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Type the missing word",
+                          value: A,
+                          onChange: (i) => wn(i.target.value),
+                          style: {
+                            ...e.gmInput,
+                            width: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "170px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "250px" : "auto",
+                            padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "5px 6px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
+                            fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 || n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 ? "10px" : window.innerWidth === 896 && window.innerHeight === 414 ? "11px" : window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
+                            flex: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || g || s || p || a || l || x || H || W || f ? "1" : "none"
                           }
-                        )
-                      ] }),
-                      R && /* @__PURE__ */ n("button", { type: "button", style: o.gmButton, onClick: ye, children: "Next round" })
-                    ] })
+                        }
+                      ),
+                      /* @__PURE__ */ w(
+                        "button",
+                        {
+                          style: {
+                            ...e.gmButton,
+                            marginLeft: n && window.innerWidth > window.innerHeight || window.innerHeight < 700 || window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || g || s || p || a || l || x || H || W || f ? "8px" : "0",
+                            padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
+                            fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px",
+                            minWidth: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "45px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "55px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "80px" : "100px",
+                            flexShrink: 0
+                          },
+                          onClick: zn,
+                          disabled: N,
+                          children: N ? "..." : "Check"
+                        }
+                      )
+                    ] }) }),
+                    k && /* @__PURE__ */ w("button", { style: {
+                      ...e.gmButton,
+                      padding: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "5px 8px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "6px 10px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
+                      fontSize: n && window.innerWidth <= 375 && window.innerHeight <= 667 ? "10px" : n && window.innerWidth > window.innerHeight && window.innerHeight <= 428 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 ? "11px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || f || g || s || p || a || l || x || H || W || n && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "14px" : "16px"
+                    }, onClick: Pn, children: "Next round" })
                   ] })
-                ]
-              }
-            )
-          }
-        )
-      }
-    ),
-    A
-  ) });
+                ] })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
 }
 export {
-  Ee as Game,
-  ce as themes
+  ii as Game,
+  an as themes
 };