@mblinkov/whats-missing 20.0.43 → 20.0.45

package/src/Game.tsx

@@ -1,10 +1,8 @@
-import { useState, useEffect, useMemo, useRef, useLayoutEffect } from "react";
-import { createPortal } from "react-dom";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { themes } from "./themes";
 import { styles } from "./Game.styles";
 import type { Theme } from "./themes";
 
-
 type ImageItem = { src: string; name: string };
 type RoundResult = {
   round: number;
@@ -13,9 +11,40 @@ type RoundResult = {
   result: "correct" | "almost" | "wrong";
 };
 
-// ✅ globalReset удален - теперь используется Shadow DOM изоляция
+// ✅ базовый reset
+const globalReset = () => {
+  const style = document.createElement("style");
+  style.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(style);
+};
 
-// ✅ расстояние Левенштейна — для проверки “почти правильно”
+// простая функция сравнения
 const levenshtein = (a: string, b: string) => {
   const dp = Array.from({ length: a.length + 1 }, () => Array(b.length + 1).fill(0));
   for (let i = 0; i <= a.length; i++) dp[i][0] = i;
@@ -31,114 +60,6 @@ const levenshtein = (a: string, b: string) => {
   return dp[a.length][b.length];
 };
 
-// ✅ фикс визуального подзума
-export function useNeutralizeBodyZoom(
-  ref: React.RefObject<HTMLDivElement | null>,
-  opts: { minDesktopWidth?: number; forceResize?: boolean } = { minDesktopWidth: 1200, forceResize: false }
-) {
-  const saved = useRef<Record<string, string | null> | null>(null);
-  const minDesktopWidth = opts.minDesktopWidth ?? 1200;
-  const forceResize = !!opts.forceResize;
-
-  useLayoutEffect(() => {
-    if (typeof window === "undefined" || !ref || !ref.current) return;
-    const el = ref.current;
-
-    const getBodyScale = (): number => {
-      try {
-        const body = document.body;
-        const cs = getComputedStyle(body) as CSSStyleDeclaration & { zoom?: string };
-        const zoomInline = parseFloat((body.style && body.style.zoom) || "");
-        if (zoomInline && !isNaN(zoomInline) && zoomInline > 0) return zoomInline;
-        const zoomComputed = parseFloat((cs.zoom as string) || "");
-        if (zoomComputed && !isNaN(zoomComputed) && zoomComputed > 0) return zoomComputed;
-        const probe = document.createElement("div");
-        probe.style.position = "absolute";
-        probe.style.left = "0";
-        probe.style.top = "0";
-        probe.style.width = "100px";
-        probe.style.height = "1px";
-        probe.style.visibility = "hidden";
-        document.documentElement.appendChild(probe);
-        const rect = probe.getBoundingClientRect();
-        document.documentElement.removeChild(probe);
-        if (rect && rect.width > 0) {
-          const measured = rect.width / 100;
-          if (!isNaN(measured) && measured > 0) return measured;
-        }
-      } catch {}
-      return 1;
-    };
-
-    const apply = () => {
-      if (minDesktopWidth && window.innerWidth < minDesktopWidth) {
-        restore();
-        return;
-      }
-      const scale = getBodyScale();
-      if (!scale || scale === 1) {
-        restore();
-        return;
-      }
-      if (!saved.current) {
-        saved.current = {
-          transform: el.style.transform || null,
-          transformOrigin: el.style.transformOrigin || null,
-          width: el.style.width || null,
-          height: el.style.height || null,
-          willChange: el.style.willChange || null,
-        };
-      }
-      const inv = 1 / scale;
-      if (forceResize) {
-        el.style.width = `${scale * 100}%`;
-        el.style.height = `${scale * 100}%`;
-      }
-      el.style.transformOrigin = "50% 50%";
-      el.style.transform = `scale(${inv})`;
-      el.style.willChange = "transform";
-    };
-
-    const restore = () => {
-      if (!saved.current) return;
-      const s = saved.current;
-      el.style.transform = s.transform ?? "";
-      el.style.transformOrigin = s.transformOrigin ?? "";
-      el.style.width = s.width ?? "";
-      el.style.height = s.height ?? "";
-      el.style.willChange = s.willChange ?? "";
-      saved.current = null;
-    };
-
-    let raf = 0;
-    const scheduled = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(apply);
-    };
-    const mo = new MutationObserver((m) => {
-      for (const x of m)
-        if (x.type === "attributes" && (x.attributeName === "style" || x.attributeName === "class")) {
-          scheduled();
-          break;
-        }
-    });
-    mo.observe(document.body, { attributes: true, attributeFilter: ["style", "class"] });
-    window.addEventListener("resize", scheduled);
-    scheduled();
-
-    return () => {
-      cancelAnimationFrame(raf);
-      mo.disconnect();
-      window.removeEventListener("resize", scheduled);
-      restore();
-    };
-  }, [ref, minDesktopWidth, forceResize]);
-}
-
-// =====================================
-//              ИГРА
-// =====================================
-
 export default function Game({
   gameCubeSize,
   screenHeight,
@@ -148,119 +69,10 @@ export default function Game({
   screenHeight?: number;
   screenWidth?: number;
 }) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const squareRef = useRef<HTMLDivElement | null>(null);
-  const [squareSize, setSquareSize] = useState<number | null>(null);
-  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
-  useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1024, forceResize: false });
-
-  // ✅ Shadow DOM изоляция - создаем сначала, потом рендерим
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    // Создаем Shadow DOM если его нет
-    let root = container.shadowRoot;
-    if (!root) {
-      root = container.attachShadow({ mode: 'open' });
-    }
-
-    // Растягиваем хост-элемент на весь экран
-    container.style.position = 'fixed';
-    container.style.top = '0';
-    container.style.left = '0';
-    container.style.width = '100vw';
-    container.style.height = '100vh';
-    container.style.zIndex = '9999';
-    container.style.background = 'linear-gradient(to bottom, #fff8f8, #f9fafb)';
-    container.style.margin = '0';
-    container.style.padding = '0';
-    container.style.transform = 'none';
-    container.style.zoom = '1';
-
-    // Очищаем содержимое shadow root
-    root.innerHTML = '';
-
-    // Создаем стили для изоляции
-    const style = document.createElement('style');
-    style.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;
-      }
-    `;
-
-    // Добавляем стили в shadow root
-    root.appendChild(style);
-
-    // Устанавливаем shadow root для рендера
-    setShadowRoot(root);
-  }, []);
-
-  useEffect(() => {
-    const b = document.body;
-    const h = document.documentElement;
-
-    const oldBodyZoom = b.style.zoom;
-    const oldBodyTransform = b.style.transform;
-    const oldHtmlZoom = h.style.zoom;
-    const oldHtmlTransform = h.style.transform;
-
-    b.style.zoom = "1";
-    b.style.transform = "none";
-    h.style.zoom = "1";
-    h.style.transform = "none";
-
-    return () => {
-      b.style.zoom = oldBodyZoom;
-      b.style.transform = oldBodyTransform;
-      h.style.zoom = oldHtmlZoom;
-      h.style.transform = oldHtmlTransform;
-    };
-  }, []);
-
-  // ✅ защита от слишком маленьких размеров игры
-  const effectiveGameCubeSize = useMemo(() => {
-    const baseSize = gameCubeSize ?? Math.min(screenWidth ?? 1000, screenHeight ?? 1000);
-    const currentWidth = screenWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1000);
-    
-    // минимальный предел для десктопа и планшета
-    if (baseSize < 600 && currentWidth > 768) {
-      return 600;
-    }
-    
-    // для мобилок в портретной ориентации пусть остаётся адаптивным
-    if (currentWidth <= 768) {
-      return Math.min(baseSize, currentWidth - 20);
-    }
-    
-    return baseSize;
-  }, [gameCubeSize, screenWidth, screenHeight]);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    globalReset();
     return () => {
       document.body.style.overflow = "";
     };
@@ -285,44 +97,121 @@ export default function Game({
   const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
   const [usedHidden, setUsedHidden] = useState<string[]>([]);
   const [isMobile, setIsMobile] = useState(false);
-
-  // simple responsive flag; we still compute exact sizes from the measured square
+  const [scale, setScale] = useState(1);
+  const [containerSize, setContainerSize] = useState<number | null>(null);
+  const [isDesktopLayout, setIsDesktopLayout] = useState(false);
+  const [isIPadMiniPortrait, setIsIPadMiniPortrait] = useState(false);
+  const [isIPadMiniLandscape, setIsIPadMiniLandscape] = useState(false);
+  const [isIPadAirPortrait, setIsIPadAirPortrait] = useState(false);
+  const [isIPadAirLandscape, setIsIPadAirLandscape] = useState(false);
+  const [isSurfaceDuoPortrait, setIsSurfaceDuoPortrait] = useState(false);
+  const [isSurfaceDuoLandscape, setIsSurfaceDuoLandscape] = useState(false);
+  const [isIPadProPortrait, setIsIPadProPortrait] = useState(false);
+  const [isIPadProLandscape, setIsIPadProLandscape] = useState(false);
+
+  // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
-    if (typeof window === "undefined") return;
-    const update = () => {
-      const w = screenWidth ?? window.innerWidth;
-      const hasCoarsePointer = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
-      setIsMobile(w <= 768 || hasCoarsePointer);
-    };
-    update();
-    window.addEventListener("resize", update);
-    window.addEventListener("orientationchange", update);
-    return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("orientationchange", update);
+    const resize = () => {
+      const width = screenWidth ?? window.innerWidth;
+      const height = screenHeight ?? window.innerHeight;
+      const mobile = width < 768 || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape тоже считается мобильным
+      const isLandscape = (width > height && mobile) || (width === 926 && height === 428) || (width === 932 && height === 430); // iPhone 14 Pro Max в landscape
+      const isSmallHeight = height < 700; // Nest Hub, маленькие экраны
+      
+      // Определяем iPhone до 14 Pro Max в landscape режиме
+      // iPhone 14 Pro Max: 926x428 (landscape)
+      // iPhone 13 Pro Max: 926x428 (landscape)
+      // iPhone 12 Pro Max: 926x428 (landscape)
+      // iPhone 11 Pro Max: 896x414 (landscape)
+      // iPhone XR: 896x414 (landscape)
+      // iPhone XS Max: 896x414 (landscape)
+      // iPhone X: 812x375 (landscape)
+      // iPhone 8 Plus: 736x414 (landscape)
+      // iPhone 8: 667x375 (landscape)
+      // iPhone SE: 667x375 (landscape)
+      
+      // iPhone XR: 896x414 (landscape)
+      const isIPhoneXRLandscape = isLandscape && width === 896 && height === 414;
+      
+      // iPhone 12 Pro: 844x390 (landscape)
+      const isIPhone12ProLandscape = isLandscape && width === 844 && height === 390;
+      
+      // Разрешение 1366x766 - ноутбуки и небольшие десктопы
+      const is1366x766 = width === 1366 && height === 766;
+      
+      // Разрешение 1366x768 - ноутбуки и небольшие десктопы
+      const is1366x768 = width === 1366 && height === 768;
+      
+      // Разрешение 1280x720 - ноутбуки и небольшие десктопы
+      const is1280x720 = width === 1280 && height === 720;
+      
+      // Разрешение 1440x900 - ноутбуки и небольшие десктопы
+      const is1440x900 = width === 1440 && height === 900;
+      
+      // iPad Mini/Air размеры
+      // iPad Mini: 768x1024 (portrait), 1024x768 (landscape) - Chrome DevTools размеры
+      // iPad Air: 820x1180 (portrait), 1180x820 (landscape)
+      const isIPadMiniPortrait = width === 768 && height === 1024;
+      const isIPadMiniLandscape = width === 1024 && height === 768;
+      const isIPadAirPortrait = width === 820 && height === 1180;
+      const isIPadAirLandscape = width === 1180 && height === 820;
+      
+      // Surface DUO размеры
+      // Surface DUO: 540x720 (portrait), 720x540 (landscape)
+      const isSurfaceDuoPortrait = width === 540 && height === 720;
+      const isSurfaceDuoLandscape = width === 720 && height === 540;
+      
+      // iPad Pro размеры
+      // iPad Pro: 1024x1366 (portrait), 1366x1024 (landscape)
+      const isIPadProPortrait = width === 1024 && height === 1366;
+      const isIPadProLandscape = width === 1366 && height === 1024;
+      
+      // Популярные разрешения для горизонтального расположения кнопки Check
+      const desktopLayout = width >= 1200 && height >= 600 && !mobile;
+      setIsDesktopLayout(desktopLayout);
+      
+      // Установка состояний для iPad и Surface DUO
+      setIsIPadMiniPortrait(isIPadMiniPortrait);
+      setIsIPadMiniLandscape(isIPadMiniLandscape);
+      setIsIPadAirPortrait(isIPadAirPortrait);
+      setIsIPadAirLandscape(isIPadAirLandscape);
+      setIsSurfaceDuoPortrait(isSurfaceDuoPortrait);
+      setIsSurfaceDuoLandscape(isSurfaceDuoLandscape);
+      setIsIPadProPortrait(isIPadProPortrait);
+      setIsIPadProLandscape(isIPadProLandscape);
+      
+      const isOldIPhoneLandscape = isLandscape && height <= 428; // до iPhone 14 Pro Max включительно
+
+      // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
+      setIsMobile(mobile);
+
+      // ✅ Используем gameCubeSize от родительского сайта, но с защитой от слишком маленьких размеров
+      if (mobile) {
+        // Мобилки: используем переданный gameCubeSize или полную ширину
+        setContainerSize(gameCubeSize && gameCubeSize >= 320 ? gameCubeSize : null);
+        setScale(1);
+      } else if (isSmallHeight) {
+        // Маленькие экраны: используем переданный gameCubeSize или полную высоту
+        setContainerSize(gameCubeSize && gameCubeSize >= 400 ? gameCubeSize : null);
+        setScale(1);
+      } else {
+        // Десктопы: используем переданный gameCubeSize с разумными ограничениями
+        const minSize = 400;
+        const maxSize = 1200;
+        const finalSize = gameCubeSize 
+          ? Math.max(minSize, Math.min(maxSize, gameCubeSize))
+          : Math.min(1000, Math.min(width, height) * 0.9);
+        setContainerSize(finalSize);
+        setScale(1);
+      }
     };
-  }, [screenWidth]);
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+  }, [screenWidth, screenHeight, gameCubeSize]);
 
-  useLayoutEffect(() => {
-    const el = squareRef.current;
-    if (!el || typeof window === "undefined") return;
-    let ro: ResizeObserver | null = null;
-    try {
-      ro = new ResizeObserver((entries) => {
-        for (const e of entries) {
-          const cr = e.contentRect;
-          setSquareSize(Math.round(Math.min(cr.width, cr.height)));
-        }
-      });
-      ro.observe(el);
-      setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
-    } catch {
-      setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
-    }
-    return () => ro?.disconnect();
-  }, [isMobile]);
-
-  const getRandomSix = (arr: ImageItem[]) => [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
+  const getRandomSix = (arr: ImageItem[]) =>
+    [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
   const startGame = () => {
     if (!theme) return;
@@ -431,279 +320,697 @@ export default function Game({
   };
 
   const MemoizedLogo = useMemo(
-    () => (
-      <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
-        <picture>
-          <source
-            srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
-            type="image/svg+xml"
-          />
-          <img
-            src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
-            alt="SPEAKID Logo"
-            style={styles.gmLogoImg}
-            loading="lazy"
-          />
-        </picture>
-      </div>
-    ),
-    []
+    () => {
+      // Скрываем логотип на мобильных устройствах в landscape режиме и на малых экранах
+      if ((isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700) {
+        return null;
+      }
+      
+      return (
+        // ensure logo is positioned inside the square container
+        <div style={{ ...styles.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }}>
+          <picture>
+            <source
+              srcSet={window.origin + "/cloud/speakid/games/whatsmissing/logo.svg"}
+              type="image/svg+xml"
+            />
+            <img
+              src={window.origin + "/cloud/speakid/games/whatsmissing/logo.png"}
+              alt="SPEAKID Logo"
+              style={styles.gmLogoImg}
+              loading="lazy"
+            />
+          </picture>
+        </div>
+      );
+    },
+    [isMobile]
   );
 
-  // ✅ масштаб интерфейса под размеры окна — с мягкими лимитами и кэшированием
-  // оптимизированные базовые размеры для лучшего покрытия экрана на десктопах
-  const baseWidth = 1200;
-  const baseHeight = 700;
-  const scale = useMemo(() => {
-    const effectiveWidth = screenWidth ?? (typeof window !== "undefined" ? window.innerWidth : baseWidth);
-    const effectiveHeight = screenHeight ?? (typeof window !== "undefined" ? window.innerHeight : baseHeight);
-    const rawScale = Math.min(effectiveWidth / baseWidth, effectiveHeight / baseHeight);
-    // мягкие границы роста/сжатия - увеличен верхний лимит для лучшего заполнения экрана
-    return Math.min(1.35, Math.max(1.0, rawScale));
-  }, [screenWidth, screenHeight, isMobile]);
-
   return (
-    <div ref={containerRef} style={{ width: "100%", height: "100%" }}>
-      {shadowRoot && createPortal(
+    <div
+      ref={containerRef}
+      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
+      }}
+    >
+      <div
+        style={{
+          width: isMobile ? "100%" : (containerSize || gameCubeSize || 1000),
+          height: isMobile ? "100%" : (containerSize || gameCubeSize || 1000),
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          borderRadius: isMobile ? 0 : "20px",
+          background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+          boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+          margin: isMobile ? "0 auto" : "unset",
+          position: "relative", // needed so absolute logo is inside the square
+        }}
+      >
         <div
-          id="whats-missing-root"
-          style={{ all: "unset" }}
+          style={{
+            transform: "none",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
         >
-          <div
-            ref={squareRef}
-            style={{
-              width: isMobile
-                ? "100%"
-                : `${effectiveGameCubeSize}px`,
-              height: isMobile
-                ? "100%"
-                : `${effectiveGameCubeSize}px`,
-              borderRadius: isMobile ? 0 : "20px",
-              background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-              position: "relative",
-              overflow: "hidden",
-              boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <div
-              style={{
-                transform: `scale(${scale})`,
-                transformOrigin: "center center",
-                transition: "transform 0.2s ease-out",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
-            >
-          {!isMobile && MemoizedLogo}
-
-          {/* ====== ЛОББИ ====== */}
-          {!theme && !started && (
-            <div style={styles.gmCenterScreen}>
-              <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
-              <p style={styles.gmBodyM}>Select a theme:</p>
-              <div style={{ display: "flex", gap: 16 }}>
-                {["animals", "food", "toys"].map((t) => (
-                  <button key={t} style={styles.gmButton} onClick={() => setTheme(t as Theme)}>
-                    {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
-                  </button>
-                ))}
-              </div>
-              <div style={{ marginTop: 24 }}>
-                <p style={styles.gmBodyS}>Choose number of rounds:</p>
-                <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
-                  {[3, 4, 5].map((n) => (
-                    <button
-                      key={n}
-                      style={{
-                        ...styles.gmButton,
-                        ...(rounds === n ? styles.gmButtonActive : {}),
-                      }}
-                      onClick={() => setRounds(n)}
-                    >
-                      {n}
+          <div id="whats-missing-root">
+            {!isMobile && MemoizedLogo}
+            {/* ====== ИГРОВАЯ ЛОГИКА ====== */}
+            {!theme && !started && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>WHAT'S MISSING?</h1>
+                <p style={styles.gmBodyM}>Select a theme:</p>
+                <div style={{ display: "flex", gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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" }}>
+                  {["animals", "food", "toys"].map((t) => (
+                    <button key={t} style={{
+                      ...styles.gmButton,
+                      padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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={() => setTheme(t as Theme)}>
+                      {t === "animals" ? "🐶 Animals" : t === "food" ? "🍎 Food" : "🧸 Toys"}
                     </button>
                   ))}
                 </div>
+                <div style={{ marginTop: 24 }}>
+                  <p style={styles.gmBodyS}>Choose number of rounds:</p>
+                  <div style={{ display: "flex", gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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 }}>
+                    {[3, 4, 5].map((n) => (
+                      <button
+                        key={n}
+                        style={{
+                          ...styles.gmButton,
+                          ...(rounds === n ? styles.gmButtonActive : {}),
+                          padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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"
+                        }}
+                        onClick={() => setRounds(n)}
+                      >
+                        {n}
+                      </button>
+                    ))}
+                  </div>
+                </div>
               </div>
-            </div>
-          )}
-
-          {/* ====== ПОДТВЕРЖДЕНИЕ ====== */}
-          {theme && !started && (
-            <div style={styles.gmCenterScreen}>
-              <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
-              <p style={styles.gmBodyM}>Rounds: {rounds}</p>
-              <button style={styles.gmButton} onClick={startGame}>
-                ▶ Start game
-              </button>
-            </div>
-          )}
-
-          {/* ====== РЕЗУЛЬТАТЫ ====== */}
-          {finished && (
-            <div style={styles.gmCenterScreen}>
-              <h1 style={styles.gmHeadline1}>Results</h1>
-              <h2 style={styles.gmHeadline3}>
+            )}
+            {theme && !started && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>Theme selected: {theme}</h1>
+                <p style={styles.gmBodyM}>Rounds: {rounds}</p>
+                <button style={{
+                  ...styles.gmButton,
+                  padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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={startGame}>
+                  ▶ Start game
+                </button>
+              </div>
+            )}
+            {finished && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={{
+                  ...styles.gmHeadline1,
+                  marginTop: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : styles.gmHeadline1.marginTop,
+                  marginBottom: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "2px" : styles.gmHeadline1.marginBottom
+                }}>Results</h1>
+                <h2 style={{
+                  ...styles.gmHeadline3,
+                  marginTop: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : styles.gmHeadline3.marginTop,
+                  marginBottom: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "2px" : styles.gmHeadline3.marginBottom
+                }}>
                 Your score: {score} / {rounds}
               </h2>
-              <p style={{ ...styles.gmBodyM, color: "#10b981", marginTop: 12 }}>
-                Yahoo! You did it! 🍬✨
-              </p>
-              <table style={styles.gmTable}>
-                <thead>
-                  <tr>
-                    <th>Round</th>
-                    <th>Your Answer</th>
-                    <th>Correct</th>
-                    <th>Result</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {resultsTable.map((r, i) => (
-                    <tr key={i}>
-                      <td style={styles.gmTableCell}>{r.round}</td>
-                      <td style={styles.gmTableCell}>{r.answer || "—"}</td>
-                      <td style={styles.gmTableCell}>{r.correct}</td>
-                      <td style={styles.gmTableCell}>
-                        {r.result === "correct"
-                          ? "✔ Correct"
-                          : r.result === "almost"
-                          ? "◐ Almost (0.5)"
-                          : "✘ Wrong"}
-                      </td>
+                <p style={{ 
+                  ...styles.gmBodyM, 
+                  color: "#10b981", 
+                  marginTop: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : "12px",
+                  marginBottom: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "2px" : styles.gmBodyM.marginBottom
+                }}>Yahoo! You did it! 🍬✨</p>
+                <table style={{
+                  ...styles.gmTable,
+                  marginTop: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "0px" : "20px",
+                  marginBottom: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape ? "4px" : "32px"
+                }}>
+                  <thead>
+                    <tr>
+                      <th>Round</th>
+                      <th>Your Answer</th>
+                      <th>Correct</th>
+                      <th>Result</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-              <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
-                <button style={styles.gmButton} onClick={startGame}>
-                  🔁 Play again
-                </button>
-                <button style={styles.gmButton} onClick={exitGame}>
-                  ⬅️ Choose theme
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* ====== ИГРОВОЙ ЭКРАН ====== */}
-          {started && !finished && (
-            <div style={styles.gmGameLayout}>
-              <div
-                style={{
-                  minHeight: 160,
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                {phase === "ready" && (
-                  <>
-                    <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
-                    <div style={styles.gmHourglass}>⏳</div>
-                  </>
-                )}
-                {phase === "memorize" && (
-                  <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
-                    MEMORIZE ({memorizeTime})
-                  </p>
-                )}
-                {phase === "guess" && !answered && (
-                  <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
-                )}
+                  </thead>
+                  <tbody>
+                    {resultsTable.map((r, i) => (
+                      <tr key={i}>
+                        <td style={styles.gmTableCell}>{r.round}</td>
+                        <td style={styles.gmTableCell}>{r.answer || "—"}</td>
+                        <td style={styles.gmTableCell}>{r.correct}</td>
+                        <td style={styles.gmTableCell}>
+                          {r.result === "correct"
+                            ? "✔ Correct"
+                            : r.result === "almost"
+                            ? "◐ Almost (0.5)"
+                            : "✘ Wrong"}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                <div style={{ 
+                  display: "flex", 
+                  gap: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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) || isDesktopLayout ? "12px" : "24px"
+                }}>
+                  <button style={{
+                    ...styles.gmButton,
+                    padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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={startGame}>
+                    🔁 Play again
+                  </button>
+                  <button style={{
+                    ...styles.gmButton,
+                    padding: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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: (isMobile && window.innerWidth > window.innerHeight) || (isMobile && 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={exitGame}>
+                    ⬅️ Choose theme
+                  </button>
+                </div>
               </div>
-
-              {/* ===== Сетка карточек (фикс 3×2 на десктопе, 2×3 на мобилках) ===== */}
-              {phase !== "ready" && (
+            )}
+            {started && !finished && (
+              <div style={styles.gmGameLayout}>
                 <div
                   style={{
-                    ...styles.gmGrid,
-                    display: "grid",
-                    gridTemplateColumns: `repeat(${isMobile ? 2 : 3}, 1fr)`,
-                    gridTemplateRows: `repeat(${isMobile ? 3 : 2}, 1fr)`,
-                    gap: isMobile ? 12 : 20,
+                    minHeight: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                      ? "45px" // iPhone SE: еще более компактная высота
+                      : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                      ? "45px" // iPhone до 14 Pro Max в landscape: такая же компактная как SE
+                      : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                      ? "45px" // iPhone XR в landscape: такая же компактная как SE
+                      : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                      ? "45px" // iPhone 12 Pro в landscape: такая же компактная как SE
+                      : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                      ? "45px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
+                      : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
+                      ? "60px" // iPhone landscape и малые экраны: компактная высота
+                      : "160px",
+                    display: "flex",
+                    flexDirection: "column",
                     justifyContent: "center",
-                    alignContent: "center",
-                    padding: isMobile ? 8 : 16,
-                    width: "100%",
-                    height: "100%",
-                    maxWidth: isMobile ? "100%" : 600,
-                    maxHeight: isMobile ? "100%" : 400,
-                    boxSizing: "border-box",
+                    alignItems: "center",
+                    paddingTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                      ? "8px" // iPhone SE: поднимаем таймер еще выше
+                      : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                      ? "8px" // iPhone до 14 Pro Max в landscape: поднимаем еще выше
+                      : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                      ? "8px" // iPhone XR в landscape: поднимаем еще выше
+                      : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                      ? "8px" // iPhone 12 Pro в landscape: поднимаем еще выше
+                      : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                      ? "8px" // iPhone 14 Pro Max в landscape: поднимаем еще выше
+                      : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
+                      ? "15px" // iPhone landscape и малые экраны: поднимаем выше
+                      : "40px"
                   }}
                 >
-                  {files.map((file, i) => {
-                    const isHidden = hiddenIndex === i && phase === "guess" && !answered;
-                    return (
-                      <div
-                        key={i}
-                        style={{
-                          ...styles.gmCard,
-                          width: "100%",
-                          height: "100%",
-                          ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
-                          ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
-                        }}
-                      >
-                        {!isHidden && (
-                          <img
-                            src={file.src}
-                            alt={file.name}
+                  {phase === "ready" && (
+                    <>
+                      <h1 style={{ ...styles.gmHeadline1, color: "#ec4c44" }}>GET READY</h1>
+                      <div style={styles.gmHourglass}>⏳</div>
+                    </>
+                  )}
+                  {phase === "memorize" && (
+                    <p style={{ ...styles.gmBodyM, color: "#10b981" }}>
+                      MEMORIZE ({memorizeTime})
+                    </p>
+                  )}
+                  {phase === "guess" && !answered && (
+                    <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
+                  )}
+                </div>
+                {phase !== "ready" && (
+                  <div
+                    style={{
+                      ...styles.gmGrid,
+                      gridTemplateColumns: isMobile && window.innerWidth > window.innerHeight
+                        ? "repeat(3, 1fr)" // mobile landscape: 3 колонки
+                        : isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "repeat(3, 1fr)" // iPhone SE: 3 колонки для лучшего использования пространства
+                        : isMobile
+                        ? "repeat(2, 1fr)" // mobile portrait: 2 колонки
+                        : window.innerHeight < 700
+                        ? "repeat(3, 1fr)" // Nest Hub и малые экраны: 3 колонки
+                        : "repeat(3, 210px)", // desktop: 3 колонки фиксированного размера
+                      gridAutoRows: isMobile && window.innerWidth > window.innerHeight
+                        ? "120px" // mobile landscape: меньшая высота
+                        : isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "100px" // iPhone SE: очень компактная высота
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "100px" // iPhone XR в landscape: такая же компактная как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "100px" // iPhone 12 Pro в landscape: такая же компактная как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "100px" // iPhone 14 Pro Max в landscape: такая же компактная как SE
+                        : isMobile
+                        ? "150px" // mobile portrait: стандартная высота
+                        : window.innerHeight < 700
+                        ? "140px" // Nest Hub: компактная высота
+                        : "210px", // desktop: стандартная высота
+                      gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "12px" // iPhone SE: больше отступов
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "12px" // iPhone XR в landscape: такие же отступы как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "12px" // iPhone 12 Pro в landscape: такие же отступы как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "12px" // iPhone 14 Pro Max в landscape: такие же отступы как SE
+                        : isMobile || window.innerHeight < 700 ? "8px" : "20px",
+                      justifyItems: "center",
+                      maxWidth: isMobile && window.innerWidth > window.innerHeight 
+                        ? "90%" // mobile landscape: используем больше ширины
+                        : isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "95%" // iPhone SE: используем почти всю ширину
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "95%" // iPhone XR в landscape: используем почти всю ширину как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "95%" // iPhone 12 Pro в landscape: используем почти всю ширину как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "95%" // iPhone 14 Pro Max в landscape: используем почти всю ширину как SE
+                        : "100%",
+                      padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "8px" // iPhone SE: минимальные внутренние отступы
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "8px" // iPhone XR в landscape: минимальные отступы как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "8px" // iPhone 12 Pro в landscape: минимальные отступы как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "8px" // iPhone 14 Pro Max в landscape: минимальные отступы как SE
+                        : "16px",
+                    }}
+                  >
+                    {files.map((file, i) => {
+                      const isHidden =
+                        hiddenIndex === i && phase === "guess" && !answered;
+                      return (
+                        <div
+                          key={i}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            borderRadius: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                              ? "6px" // iPhone SE: меньшие скругления
+                              : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                              ? "6px" // iPhone XR в landscape: меньшие скругления как SE
+                              : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                              ? "6px" // iPhone 12 Pro в landscape: меньшие скругления как SE
+                              : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                              ? "6px" // iPhone 14 Pro Max в landscape: меньшие скругления как SE
+                              : "12px",
+                            overflow: "hidden",
+                            boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                              ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone SE: меньшие тени
+                              : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                              ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone XR в landscape: меньшие тени как SE
+                              : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                              ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 12 Pro в landscape: меньшие тени как SE
+                              : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                              ? "0 1px 4px rgba(0,0,0,0.1)" // iPhone 14 Pro Max в landscape: меньшие тени как SE
+                              : "0 4px 12px rgba(0,0,0,0.15)",
+                            transition: "all 0.3s ease",
+                            cursor: "pointer",
+                            ...(result === "correct" && hiddenIndex === i
+                              ? { 
+                                  boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                    ? "0 0 15px #10b981"
+                                    : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                    ? "0 0 15px #10b981" // iPhone XR в landscape: такие же тени как SE
+                                    : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                    ? "0 0 15px #10b981" // iPhone 12 Pro в landscape: такие же тени как SE
+                                    : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                    ? "0 0 15px #10b981" // iPhone 14 Pro Max в landscape: такие же тени как SE
+                                    : "0 0 20px #10b981",
+                                  transform: "scale(1.03)"
+                                }
+                              : {}),
+                            ...(result === "wrong" && hiddenIndex === i
+                              ? { 
+                                  boxShadow: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                    ? "0 0 15px #ef4444"
+                                    : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                    ? "0 0 15px #ef4444" // iPhone XR в landscape: такие же тени как SE
+                                    : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                    ? "0 0 15px #ef4444" // iPhone 12 Pro в landscape: такие же тени как SE
+                                    : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                    ? "0 0 15px #ef4444" // iPhone 14 Pro Max в landscape: такие же тени как SE
+                                    : "0 0 20px #ef4444",
+                                  transform: "scale(1.03)"
+                                }
+                              : {}),
+                          }}
+                        >
+                          {!isHidden && (
+                            <img
+                              src={file.src}
+                              alt={file.name}
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover",
+                              }}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+                <div style={{ 
+                  marginTop: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                    ? "1px" // iPhone SE: еще более минимальный отступ
+                    : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                    ? "1px" // iPhone до 14 Pro Max в landscape: такой же как SE
+                    : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                    ? "1px" // iPhone XR в landscape: такой же как SE
+                    : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                    ? "1px" // iPhone 12 Pro в landscape: такой же как SE
+                    : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                    ? "1px" // iPhone 14 Pro Max в landscape: такой же как SE
+                    : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
+                    ? "4px" // iPhone landscape и малые экраны: минимальный отступ
+                    : "16px", 
+                  height: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                    ? "40px" // iPhone SE: еще более компактная высота
+                    : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                    ? "40px" // iPhone до 14 Pro Max в landscape: такая же как SE
+                    : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                    ? "40px" // iPhone XR в landscape: такая же как SE
+                    : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                    ? "40px" // iPhone 12 Pro в landscape: такая же как SE
+                    : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                    ? "40px" // iPhone 14 Pro Max в landscape: такая же как SE
+                    : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700
+                    ? "50px" // iPhone landscape и малые экраны: компактная высота
+                    : "80px"
+                }}>
+                  {phase === "guess" && !answered && (
+                    <div style={{
+                      display: "flex",
+                      flexDirection: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "row" : "column",
+                      gap: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "3px" // iPhone SE: еще более минимальный отступ
+                        : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                        ? "3px" // iPhone до 14 Pro Max в landscape: такой же как SE
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "3px" // iPhone XR в landscape: такой же как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "3px" // iPhone 12 Pro в landscape: такой же как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "3px" // iPhone 14 Pro Max в landscape: такой же как SE
+                        : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                        ? "8px" // 1366x766: отступ между инпутом и кнопкой
+                        : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                        ? "8px" // 1366x768: отступ между инпутом и кнопкой
+                        : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                        ? "8px" // 1280x720: отступ между инпутом и кнопкой
+                        : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                        ? "8px" // 1440x900: отступ между инпутом и кнопкой
+                        : isDesktopLayout // Десктопные разрешения
+                        ? "8px" // Десктопные разрешения: отступ между инпутом и кнопкой
+                        : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                        ? "8px" // iPad и Surface DUO: отступ между инпутом и кнопкой
+                        : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "6px" : "12px",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "100%",
+                      maxWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "270px" // iPhone SE: еще более компактная ширина
+                        : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                        ? "270px" // iPhone до 14 Pro Max в landscape: такая же как SE
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "270px" // iPhone XR в landscape: такая же как SE
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "270px" // iPhone 12 Pro в landscape: такая же как SE
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "270px" // iPhone 14 Pro Max в landscape: такая же как SE
+                        : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                        ? "400px" // 1366x766: ширина контейнера
+                        : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                        ? "400px" // 1366x768: ширина контейнера
+                        : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                        ? "400px" // 1280x720: ширина контейнера
+                        : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                        ? "400px" // 1440x900: ширина контейнера
+                        : isDesktopLayout // Десктопные разрешения
+                        ? "400px" // Десктопные разрешения: ширина контейнера
+                        : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                        ? "400px" // iPad и Surface DUO: ширина контейнера
+                        : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "400px" : "300px"
+                    }}>
+                      <>
+                          <input
+                            type="text"
+                            placeholder="Type the missing word"
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
                             style={{
-                              width: "100%",
-                              height: "100%",
-                              objectFit: "cover",
-                              display: "block",
+                              ...styles.gmInput,
+                              width: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "170px" // iPhone SE: еще более компактная ширина
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "170px" // iPhone до 14 Pro Max в landscape: такая же как SE
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "170px" // iPhone XR в landscape: такая же как SE
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "170px" // iPhone 12 Pro в landscape: такая же как SE
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "170px" // iPhone 14 Pro Max в landscape: такая же как SE
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "250px" // 1366x766: ширина инпута
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "250px" // 1366x768: ширина инпута
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "250px" // 1280x720: ширина инпута
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "250px" // 1440x900: ширина инпута
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "250px" // Десктопные разрешения: ширина инпута
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "250px" // iPad и Surface DUO: ширина инпута
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "250px" : "auto",
+                              padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "5px 6px" // iPhone SE: еще более компактный padding
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "5px 6px" // iPhone до 14 Pro Max в landscape: такой же как SE
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "5px 6px" // iPhone XR в landscape: такой же как SE
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "5px 6px" // iPhone 12 Pro в landscape: такой же как SE
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "5px 6px" // iPhone 14 Pro Max в landscape: такой же как SE
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "10px 12px" // 1366x766: padding инпута
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "10px 12px" // 1366x768: padding инпута
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "10px 12px" // 1280x720: padding инпута
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "10px 12px" // 1440x900: padding инпута
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "10px 12px" // Десктопные разрешения: padding инпута
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "10px 12px" // iPad и Surface DUO: padding инпута
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 12px" : "12px 16px",
+                              fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "10px" // iPhone SE: еще меньший шрифт
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "10px" // iPhone до 14 Pro Max в landscape: такой же как SE
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "11px" // iPhone XR в landscape: компактный шрифт
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "10px" // iPhone 12 Pro в landscape: такой же как SE
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "10px" // iPhone 14 Pro Max в landscape: такой же как SE
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "14px" // 1366x766: размер шрифта инпута
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "14px" // 1366x768: размер шрифта инпута
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "14px" // 1280x720: размер шрифта инпута
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "14px" // 1440x900: размер шрифта инпута
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "14px" // Десктопные разрешения: размер шрифта инпута
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "14px" // iPad и Surface DUO: размер шрифта инпута
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
+                              flex: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "1" : "none"
                             }}
                           />
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-
-              {/* Инпут и кнопки */}
-              <div style={{ marginTop: 16, height: 80 }}>
-                {phase === "guess" && !answered && (
-                  <div>
-                    <input
-                      type="text"
-                      placeholder="Type the missing word"
-                      value={inputValue}
-                      onChange={(e) => setInputValue(e.target.value)}
-                      style={styles.gmInput}
-                    />
-                    <button
-                      style={{ ...styles.gmButton, marginLeft: 8 }}
-                      onClick={checkAnswer}
-                      disabled={animating}
-                    >
-                      {animating ? "..." : "Check"}
+                          <button
+                            style={{ 
+                              ...styles.gmButton, 
+                              marginLeft: (isMobile && 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) || isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape || isDesktopLayout ? "8px" : "0",
+                              padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "5px 8px" // iPhone SE: еще более компактный padding
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "6px 10px" // iPhone до 14 Pro Max в landscape: компактный padding
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "6px 10px" // iPhone XR в landscape: компактный padding
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "10px 16px" // 1366x766: padding кнопки Check
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "10px 16px" // 1366x768: padding кнопки Check
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "10px 16px" // 1280x720: padding кнопки Check
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "10px 16px" // 1440x900: padding кнопки Check
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "10px 16px" // Десктопные разрешения: padding кнопки Check
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "10px 16px" // iPad и Surface DUO: padding кнопки Check
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
+                              fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "10px" // iPhone SE: еще меньший шрифт
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "11px" // iPhone до 14 Pro Max в landscape: компактный шрифт
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "11px" // iPhone XR в landscape: компактный шрифт
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "11px" // iPhone 12 Pro в landscape: компактный шрифт
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "14px" // 1366x766: размер шрифта кнопки Check
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "14px" // 1366x768: размер шрифта кнопки Check
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "14px" // 1280x720: размер шрифта кнопки Check
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "14px" // 1440x900: размер шрифта кнопки Check
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "14px" // Десктопные разрешения: размер шрифта кнопки Check
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "14px" // iPad и Surface DUO: размер шрифта кнопки Check
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px",
+                              minWidth: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                                ? "45px" // iPhone SE: еще более компактная ширина
+                                : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                                ? "55px" // iPhone до 14 Pro Max в landscape: компактная ширина
+                                : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                                ? "55px" // iPhone XR в landscape: компактная ширина
+                                : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                                ? "55px" // iPhone 12 Pro в landscape: компактная ширина
+                                : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                                ? "55px" // iPhone 14 Pro Max в landscape: компактная ширина
+                                : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                                ? "80px" // 1366x766: минимальная ширина кнопки Check
+                                : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                                ? "80px" // 1366x768: минимальная ширина кнопки Check
+                                : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                                ? "80px" // 1280x720: минимальная ширина кнопки Check
+                                : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                                ? "80px" // 1440x900: минимальная ширина кнопки Check
+                                : isDesktopLayout // Десктопные разрешения
+                                ? "80px" // Десктопные разрешения: минимальная ширина кнопки Check
+                                : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                                ? "80px" // iPad и Surface DUO: минимальная ширина кнопки Check
+                                : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "80px" : "100px",
+                              flexShrink: 0
+                            }}
+                            onClick={checkAnswer}
+                            disabled={animating}
+                          >
+                            {animating ? "..." : "Check"}
+                          </button>
+                      </>
+                    </div>
+                  )}
+                  {answered && (
+                    <button style={{
+                      ...styles.gmButton,
+                      padding: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "5px 8px" // iPhone SE: еще более компактный padding
+                        : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                        ? "6px 10px" // iPhone до 14 Pro Max в landscape: компактный padding
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "6px 10px" // iPhone XR в landscape: компактный padding
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "6px 10px" // iPhone 12 Pro в landscape: компактный padding
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "6px 10px" // iPhone 14 Pro Max в landscape: компактный padding
+                        : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                        ? "10px 16px" // 1366x766: padding кнопки Next round
+                        : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                        ? "10px 16px" // 1366x768: padding кнопки Next round
+                        : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                        ? "10px 16px" // 1280x720: padding кнопки Next round
+                        : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                        ? "10px 16px" // 1440x900: padding кнопки Next round
+                        : isDesktopLayout // Десктопные разрешения
+                        ? "10px 16px" // Десктопные разрешения: padding кнопки Next round
+                        : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                        ? "10px 16px" // iPad и Surface DUO: padding кнопки Next round
+                        : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "10px 16px" : "12px 24px",
+                      fontSize: isMobile && window.innerWidth <= 375 && window.innerHeight <= 667
+                        ? "10px" // iPhone SE: еще меньший шрифт
+                        : (isMobile && window.innerWidth > window.innerHeight && window.innerHeight <= 428)
+                        ? "11px" // iPhone до 14 Pro Max в landscape: компактный шрифт
+                        : (window.innerWidth === 896 && window.innerHeight === 414) // iPhone XR
+                        ? "11px" // iPhone XR в landscape: компактный шрифт
+                        : (window.innerWidth === 844 && window.innerHeight === 390) // iPhone 12 Pro
+                        ? "11px" // iPhone 12 Pro в landscape: компактный шрифт
+                        : (window.innerWidth === 926 && window.innerHeight === 428) // iPhone 14 Pro Max
+                        ? "11px" // iPhone 14 Pro Max в landscape: компактный шрифт
+                        : (window.innerWidth === 1366 && window.innerHeight === 766) // 1366x766
+                        ? "14px" // 1366x766: размер шрифта кнопки Next round
+                        : (window.innerWidth === 1366 && window.innerHeight === 768) // 1366x768
+                        ? "14px" // 1366x768: размер шрифта кнопки Next round
+                        : (window.innerWidth === 1280 && window.innerHeight === 720) // 1280x720
+                        ? "14px" // 1280x720: размер шрифта кнопки Next round
+                        : (window.innerWidth === 1440 && window.innerHeight === 900) // 1440x900
+                        ? "14px" // 1440x900: размер шрифта кнопки Next round
+                        : isDesktopLayout // Десктопные разрешения
+                        ? "14px" // Десктопные разрешения: размер шрифта кнопки Next round
+                        : isIPadMiniPortrait || isIPadMiniLandscape || isIPadAirPortrait || isIPadAirLandscape || isSurfaceDuoPortrait || isSurfaceDuoLandscape || isIPadProPortrait || isIPadProLandscape
+                        ? "14px" // iPad и Surface DUO: размер шрифта кнопки Next round
+                        : (isMobile && window.innerWidth > window.innerHeight) || window.innerHeight < 700 ? "14px" : "16px"
+                    }} onClick={nextRound}>
+                      Next round
                     </button>
-                  </div>
-                )}
-                {answered && (
-                  <button type="button" style={styles.gmButton} onClick={nextRound}>
-                    Next round
-                  </button>
-                )}
+                  )}
+                </div>
               </div>
-            </div>
-          )}
-            </div>
+            )}
           </div>
-        </div>,
-        shadowRoot
-      )}
+        </div>
+      </div>
     </div>
   );
-}
+}