@mblinkov/whats-missing 20.0.15 → 20.0.17

package/dist/whats-missing.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),re=window.origin+"/cloud/speakid/games/whatsmissing/",B=(r,a)=>r.map(([l,n])=>({src:`${re}${a}/${n.replace(/\s/g,"%20")}.png`,name:n})),ae=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],le=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],de=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],L={food:B(ae,"food"),animals:B(le,"animals"),toys:B(de,"toys")},ce=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),re=window.origin+"/cloud/speakid/games/whatsmissing/",B=(r,a)=>r.map(([d,n])=>({src:`${re}${a}/${n.replace(/\s/g,"%20")}.png`,name:n})),ae=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],le=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],de=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],W={food:B(ae,"food"),animals:B(le,"animals"),toys:B(de,"toys")},ce=`
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -14,5 +14,9 @@
       display: block;
       user-select: none;
     }
-    html, body { margin: 0; padding: 0; }
-  `,document.head.appendChild(r)},ue=(r,a)=>{const l=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let n=0;n<=r.length;n++)l[n][0]=n;for(let n=0;n<=a.length;n++)l[0][n]=n;for(let n=1;n<=r.length;n++)for(let c=1;c<=a.length;c++)l[n][c]=r[n-1]===a[c-1]?l[n-1][c-1]:Math.min(l[n-1][c-1],l[n][c-1],l[n-1][c])+1;return l[r.length][a.length]};function he(){const r=o.useRef(null);o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[a,l]=o.useState(null),[n,c]=o.useState([]),[b,K]=o.useState(4),[x,W]=o.useState(!1),[w,E]=o.useState(1),[h,Z]=o.useState(null),[g,j]=o.useState("ready"),[G,F]=o.useState(3),[v,C]=o.useState(10),[T,D]=o.useState(20),[J,z]=o.useState(0),[S,R]=o.useState(!1),[k,Y]=o.useState(""),[p,I]=o.useState(!1),[H,q]=o.useState(!1),[O,y]=o.useState(null),[Q,M]=o.useState([]),[X,P]=o.useState([]),[u,ee]=o.useState(!1),[te,U]=o.useState(1);o.useEffect(()=>{const t=()=>{const i=window.innerWidth<768;if(ee(i),i)U(1);else{const f=Math.min(window.innerWidth/1440,window.innerHeight/768);U(f)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const $=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!a)return;const t=$(L[a]);c(t),W(!0),R(!1),E(1),z(0),M([]),P([]),V(t,[],!0)},V=(t=n,i=X,m=!1)=>{const d=$(t.length?t:L[a]);let f=Math.floor(Math.random()*d.length),A=d[f].name,_=0;for(;i.includes(A)&&_<20;)f=Math.floor(Math.random()*d.length),A=d[f].name,_++;c(d),Z(f),P([...i,A]),I(!1),Y(""),D(20),y(null),m?(j("ready"),F(3),C(10)):(j("memorize"),C(10))};o.useEffect(()=>{if(!(!x||S||p)){if(g==="ready")if(G<=0)j("memorize");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(v<=0)j("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(T<=0){I(!0),y("wrong");const i=n[h].name;M(m=>[...m,{round:w,answer:k,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>D(i=>i-1),1e3);return()=>clearTimeout(t)}}},[g,G,v,T,x,S,p,n,h,w,k]);const se=()=>{if(h===null||H)return;const t=n[h].name,i=k.toLowerCase().trim();let m="wrong";i===t?(z(d=>d+1),y("correct"),m="correct"):ue(i,t)===1?(z(d=>d+.5),y("almost"),m="almost"):(y("wrong"),m="wrong"),M(d=>[...d,{round:w,answer:i,correct:t,result:m}]),q(!0),setTimeout(()=>{q(!1),I(!0)},600)},ne=()=>w<b?(E(t=>t+1),V()):R(!0),oe=()=>{W(!1),R(!1),l(null)},ie=o.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:r,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease"},children:e.jsx("div",{style:{width:u?"100vw":1440,height:u?"100vh":768,transform:u?"none":`scale(${te})`,transformOrigin:"top center",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:u?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:u?"none":"0 0 40px rgba(0,0,0,0.1)"},children:e.jsxs("div",{id:"whats-missing-root",children:[!u&&ie,!a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...b===t?s.gmButtonActive:{}},onClick:()=>K(t),children:t},t))})]})]}),a&&!x&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",a]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",b]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),S&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",J," / ",b]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:Q.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:oe,children:"⬅️ Choose theme"})]})]}),x&&!S&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",v,")"]}),g==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:u?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:u?"150px":"210px",gap:u?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const m=h===i&&g==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...O==="correct"&&h===i?s.gmCorrect:{},...O==="wrong"&&h===i?s.gmWrong:{}},children:!m&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:k,onChange:t=>Y(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:se,disabled:H,children:H?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ne,children:"Next round"})]})]})]})})})}exports.Game=he;exports.themes=L;
+    html, body { 
+      margin: 0; 
+      padding: 0; 
+      zoom: 1 !important; /* ✅ защита от подзума */
+    }
+  `,document.head.appendChild(r)},ue=(r,a)=>{const d=Array.from({length:r.length+1},()=>Array(a.length+1).fill(0));for(let n=0;n<=r.length;n++)d[n][0]=n;for(let n=0;n<=a.length;n++)d[0][n]=n;for(let n=1;n<=r.length;n++)for(let m=1;m<=a.length;m++)d[n][m]=r[n-1]===a[m-1]?d[n-1][m-1]:Math.min(d[n-1][m-1],d[n][m-1],d[n-1][m])+1;return d[r.length][a.length]};function he(){const r=o.useRef(null);o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[a,d]=o.useState(null),[n,m]=o.useState([]),[w,K]=o.useState(4),[f,L]=o.useState(!1),[j,E]=o.useState(1),[h,Z]=o.useState(null),[g,S]=o.useState("ready"),[G,F]=o.useState(3),[C,T]=o.useState(10),[z,Y]=o.useState(20),[X,R]=o.useState(0),[k,I]=o.useState(!1),[v,D]=o.useState(""),[p,H]=o.useState(!1),[M,q]=o.useState(!1),[O,x]=o.useState(null),[J,A]=o.useState([]),[Q,P]=o.useState([]),[u,ee]=o.useState(!1),[te,U]=o.useState(1);o.useEffect(()=>{const t=()=>{const i=window.innerWidth<768,l=window.innerWidth>=768&&window.innerWidth<1200;if(ee(i||l),!i&&!l){const b=Math.min(window.innerWidth/1440,window.innerHeight/768)*.97;U(b)}else U(1)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const $=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!a)return;const t=$(W[a]);m(t),L(!0),I(!1),E(1),R(0),A([]),P([]),V(t,[],!0)},V=(t=n,i=Q,l=!1)=>{const c=$(t.length?t:W[a]);let y=Math.floor(Math.random()*c.length),b=c[y].name,_=0;for(;i.includes(b)&&_<20;)y=Math.floor(Math.random()*c.length),b=c[y].name,_++;m(c),Z(y),P([...i,b]),H(!1),D(""),Y(20),x(null),l?(S("ready"),F(3),T(10)):(S("memorize"),T(10))};o.useEffect(()=>{if(!(!f||k||p)){if(g==="ready")if(G<=0)S("memorize");else{const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="memorize")if(C<=0)S("guess");else{const t=setTimeout(()=>T(i=>i-1),1e3);return()=>clearTimeout(t)}if(g==="guess"){if(z<=0){H(!0),x("wrong");const i=n[h].name;A(l=>[...l,{round:j,answer:v,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>Y(i=>i-1),1e3);return()=>clearTimeout(t)}}},[g,G,C,z,f,k,p,n,h,j,v]);const se=()=>{if(h===null||M)return;const t=n[h].name,i=v.toLowerCase().trim();let l="wrong";i===t?(R(c=>c+1),x("correct"),l="correct"):ue(i,t)===1?(R(c=>c+.5),x("almost"),l="almost"):(x("wrong"),l="wrong"),A(c=>[...c,{round:j,answer:i,correct:t,result:l}]),q(!0),setTimeout(()=>{q(!1),H(!0)},600)},ne=()=>j<w?(E(t=>t+1),V()):I(!0),oe=()=>{L(!1),I(!1),d(null)},ie=o.useMemo(()=>e.jsx("div",{style:s.gmLogoFixed,children:e.jsxs("picture",{children:[e.jsx("source",{srcSet:window.origin+"/cloud/speakid/games/whatsmissing/logo.svg",type:"image/svg+xml"}),e.jsx("img",{src:window.origin+"/cloud/speakid/games/whatsmissing/logo.png",alt:"SPEAKID Logo",style:s.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:r,style:{width:"100%",height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflowX:"clip"},children:e.jsx("div",{style:{width:u?"100%":1440,height:u?"100%":768,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:u?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:u?"none":"0 0 40px rgba(0,0,0,0.1)",margin:u?"0 auto":"unset"},children:e.jsx("div",{style:{transform:u?"none":`scale(${te})`,transformOrigin:"top center",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!u&&ie,!a&&!f&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:s.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:s.gmButton,onClick:()=>d(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:s.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...s.gmButton,...w===t?s.gmButtonActive:{}},onClick:()=>K(t),children:t},t))})]})]}),a&&!f&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsxs("h1",{style:s.gmHeadline1,children:["Theme selected: ",a]}),e.jsxs("p",{style:s.gmBodyM,children:["Rounds: ",w]}),e.jsx("button",{style:s.gmButton,onClick:N,children:"▶ Start game"})]}),k&&e.jsxs("div",{style:s.gmCenterScreen,children:[e.jsx("h1",{style:s.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:s.gmHeadline3,children:["Your score: ",X," / ",w]}),e.jsx("p",{style:{...s.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:s.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:J.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:s.gmTableCell,children:t.round}),e.jsx("td",{style:s.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:s.gmTableCell,children:t.correct}),e.jsx("td",{style:s.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:s.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:s.gmButton,onClick:oe,children:"⬅️ Choose theme"})]})]}),f&&!k&&e.jsxs("div",{style:s.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[g==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...s.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:s.gmHourglass,children:"⏳"})]}),g==="memorize"&&e.jsxs("p",{style:{...s.gmBodyM,color:"#10b981"},children:["MEMORIZE (",C,")"]}),g==="guess"&&!p&&e.jsxs("p",{style:s.gmBodyM,children:["⏳ Time left: ",z,"s"]})]}),g!=="ready"&&e.jsx("div",{style:{...s.gmGrid,gridTemplateColumns:u?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:u?"150px":"210px",gap:u?"12px":"20px",justifyItems:"center"},children:n.map((t,i)=>{const l=h===i&&g==="guess"&&!p;return e.jsx("div",{style:{...s.gmCard,...O==="correct"&&h===i?s.gmCorrect:{},...O==="wrong"&&h===i?s.gmWrong:{}},children:!l&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[g==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:v,onChange:t=>D(t.target.value),style:s.gmInput}),e.jsx("button",{style:{...s.gmButton,marginLeft:8},onClick:se,disabled:M,children:M?"...":"Check"})]}),p&&e.jsx("button",{style:s.gmButton,onClick:ne,children:"Next round"})]})]})]})})})})}exports.Game=he;exports.themes=W;

package/dist/whats-missing.es.js

@@ -1,8 +1,8 @@
-import { jsx as o, jsxs as r, Fragment as ae } from "react/jsx-runtime";
-import { useRef as de, useEffect as W, useState as s, useMemo as ce } from "react";
-const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l.map(([d, n]) => ({
-  src: `${me}${a}/${n.replace(/\s/g, "%20")}.png`,
-  name: n
+import { jsx as t, jsxs as r, Fragment as ae } from "react/jsx-runtime";
+import { useRef as de, useEffect as L, useState as s, useMemo as ce } from "react";
+const me = window.origin + "/cloud/speakid/games/whatsmissing/", j = (l, a) => l.map(([c, o]) => ({
+  src: `${me}${a}/${o.replace(/\s/g, "%20")}.png`,
+  name: o
 })), ge = [
   ["apple", "apple"],
   ["banana", "banana"],
@@ -85,7 +85,7 @@ if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
 }
 const fe = {
   animation: "spin 1.4s linear infinite"
-}, t = {
+}, n = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -248,92 +248,95 @@ const fe = {
       display: block;
       user-select: none;
     }
-    html, body { margin: 0; padding: 0; }
+    html, body { 
+      margin: 0; 
+      padding: 0; 
+      zoom: 1 !important; /* ✅ защита от подзума */
+    }
   `, document.head.appendChild(l);
 }, be = (l, a) => {
-  const d = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
-  for (let n = 0; n <= l.length; n++) d[n][0] = n;
-  for (let n = 0; n <= a.length; n++) d[0][n] = n;
-  for (let n = 1; n <= l.length; n++)
-    for (let m = 1; m <= a.length; m++)
-      d[n][m] = l[n - 1] === a[m - 1] ? d[n - 1][m - 1] : Math.min(d[n - 1][m - 1], d[n][m - 1], d[n - 1][m]) + 1;
-  return d[l.length][a.length];
+  const c = Array.from({ length: l.length + 1 }, () => Array(a.length + 1).fill(0));
+  for (let o = 0; o <= l.length; o++) c[o][0] = o;
+  for (let o = 0; o <= a.length; o++) c[0][o] = o;
+  for (let o = 1; o <= l.length; o++)
+    for (let g = 1; g <= a.length; g++)
+      c[o][g] = l[o - 1] === a[g - 1] ? c[o - 1][g - 1] : Math.min(c[o - 1][g - 1], c[o][g - 1], c[o - 1][g]) + 1;
+  return c[l.length][a.length];
 };
 function ke() {
   const l = de(null);
-  W(() => (ye(), () => {
+  L(() => (ye(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [a, d] = s(null), [n, m] = s([]), [w, J] = s(4), [b, E] = s(!1), [k, G] = s(1), [u, Q] = s(null), [h, v] = s("ready"), [F, D] = s(3), [S, z] = s(10), [R, Y] = s(20), [X, I] = s(0), [C, H] = s(!1), [T, U] = s(""), [f, M] = s(!1), [A, $] = s(!1), [N, x] = s(null), [ee, B] = s([]), [te, O] = s([]), [p, oe] = s(!1), [ne, P] = s(1);
-  W(() => {
+  const [a, c] = s(null), [o, g] = s([]), [k, X] = s(4), [y, E] = s(!1), [v, G] = s(1), [u, J] = s(null), [h, C] = s("ready"), [F, Y] = s(3), [z, R] = s(10), [I, D] = s(20), [Q, H] = s(0), [T, M] = s(!1), [S, U] = s(""), [f, A] = s(!1), [B, $] = s(!1), [N, b] = s(null), [ee, W] = s([]), [te, O] = s([]), [p, ne] = s(!1), [oe, P] = s(1);
+  L(() => {
     const e = () => {
-      const i = window.innerWidth < 768;
-      if (oe(i), i)
+      const i = window.innerWidth < 768, d = window.innerWidth >= 768 && window.innerWidth < 1200;
+      if (ne(i || d), !i && !d) {
+        const w = Math.min(window.innerWidth / 1440, window.innerHeight / 768) * 0.97;
+        P(w);
+      } else
         P(1);
-      else {
-        const y = Math.min(window.innerWidth / 1440, window.innerHeight / 768);
-        P(y);
-      }
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
   const V = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), _ = () => {
     if (!a) return;
     const e = V(Z[a]);
-    m(e), E(!0), H(!1), G(1), I(0), B([]), O([]), q(e, [], !0);
-  }, q = (e = n, i = te, g = !1) => {
-    const c = V(e.length ? e : Z[a]);
-    let y = Math.floor(Math.random() * c.length), L = c[y].name, K = 0;
-    for (; i.includes(L) && K < 20; )
-      y = Math.floor(Math.random() * c.length), L = c[y].name, K++;
-    m(c), Q(y), O([...i, L]), M(!1), U(""), Y(20), x(null), g ? (v("ready"), D(3), z(10)) : (v("memorize"), z(10));
+    g(e), E(!0), M(!1), G(1), H(0), W([]), O([]), q(e, [], !0);
+  }, q = (e = o, i = te, d = !1) => {
+    const m = V(e.length ? e : Z[a]);
+    let x = Math.floor(Math.random() * m.length), w = m[x].name, K = 0;
+    for (; i.includes(w) && K < 20; )
+      x = Math.floor(Math.random() * m.length), w = m[x].name, K++;
+    g(m), J(x), O([...i, w]), A(!1), U(""), D(20), b(null), d ? (C("ready"), Y(3), R(10)) : (C("memorize"), R(10));
   };
-  W(() => {
-    if (!(!b || C || f)) {
+  L(() => {
+    if (!(!y || T || f)) {
       if (h === "ready")
-        if (F <= 0) v("memorize");
+        if (F <= 0) C("memorize");
         else {
-          const e = setTimeout(() => D((i) => i - 1), 1e3);
+          const e = setTimeout(() => Y((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
       if (h === "memorize")
-        if (S <= 0) v("guess");
+        if (z <= 0) C("guess");
         else {
-          const e = setTimeout(() => z((i) => i - 1), 1e3);
+          const e = setTimeout(() => R((i) => i - 1), 1e3);
           return () => clearTimeout(e);
         }
       if (h === "guess") {
-        if (R <= 0) {
-          M(!0), x("wrong");
-          const i = n[u].name;
-          B((g) => [
-            ...g,
-            { round: k, answer: T, correct: i, result: "wrong" }
+        if (I <= 0) {
+          A(!0), b("wrong");
+          const i = o[u].name;
+          W((d) => [
+            ...d,
+            { round: v, answer: S, correct: i, result: "wrong" }
           ]);
           return;
         }
-        const e = setTimeout(() => Y((i) => i - 1), 1e3);
+        const e = setTimeout(() => D((i) => i - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [h, F, S, R, b, C, f, n, u, k, T]);
+  }, [h, F, z, I, y, T, f, o, u, v, S]);
   const ie = () => {
-    if (u === null || A) return;
-    const e = n[u].name, i = T.toLowerCase().trim();
-    let g = "wrong";
-    i === e ? (I((c) => c + 1), x("correct"), g = "correct") : be(i, e) === 1 ? (I((c) => c + 0.5), x("almost"), g = "almost") : (x("wrong"), g = "wrong"), B((c) => [...c, { round: k, answer: i, correct: e, result: g }]), $(!0), setTimeout(() => {
-      $(!1), M(!0);
+    if (u === null || B) return;
+    const e = o[u].name, i = S.toLowerCase().trim();
+    let d = "wrong";
+    i === e ? (H((m) => m + 1), b("correct"), d = "correct") : be(i, e) === 1 ? (H((m) => m + 0.5), b("almost"), d = "almost") : (b("wrong"), d = "wrong"), W((m) => [...m, { round: v, answer: i, correct: e, result: d }]), $(!0), setTimeout(() => {
+      $(!1), A(!0);
     }, 600);
-  }, re = () => k < w ? (G((e) => e + 1), q()) : H(!0), se = () => {
-    E(!1), H(!1), d(null);
+  }, re = () => v < k ? (G((e) => e + 1), q()) : M(!0), se = () => {
+    E(!1), M(!1), c(null);
   }, le = ce(
-    () => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ r("picture", { children: [
-      /* @__PURE__ */ o("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
-      /* @__PURE__ */ o("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: t.gmLogoImg, loading: "lazy" })
+    () => /* @__PURE__ */ t("div", { style: n.gmLogoFixed, children: /* @__PURE__ */ r("picture", { children: [
+      /* @__PURE__ */ t("source", { srcSet: window.origin + "/cloud/speakid/games/whatsmissing/logo.svg", type: "image/svg+xml" }),
+      /* @__PURE__ */ t("img", { src: window.origin + "/cloud/speakid/games/whatsmissing/logo.png", alt: "SPEAKID Logo", style: n.gmLogoImg, loading: "lazy" })
     ] }) }),
     []
   );
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(
     "div",
     {
       ref: l,
@@ -344,171 +347,193 @@ function ke() {
         justifyContent: "center",
         alignItems: "center",
         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-        transition: "background 0.3s ease"
+        transition: "background 0.3s ease",
+        overflowX: "clip"
       },
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ t(
         "div",
         {
           style: {
-            width: p ? "100vw" : 1440,
-            height: p ? "100vh" : 768,
-            transform: p ? "none" : `scale(${ne})`,
-            transformOrigin: "top center",
+            width: p ? "100%" : 1440,
+            height: p ? "100%" : 768,
             display: "flex",
-            flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
             borderRadius: p ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)"
+            boxShadow: p ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: p ? "0 auto" : "unset"
           },
-          children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
-            !p && le,
-            !a && !b && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
-              /* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
-              /* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
-              /* @__PURE__ */ o("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ o("button", { style: t.gmButton, onClick: () => d(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
-              /* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
-                /* @__PURE__ */ o("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
-                /* @__PURE__ */ o("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ o(
-                  "button",
-                  {
-                    style: {
-                      ...t.gmButton,
-                      ...w === e ? t.gmButtonActive : {}
-                    },
-                    onClick: () => J(e),
-                    children: e
-                  },
-                  e
-                )) })
-              ] })
-            ] }),
-            a && !b && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
-              /* @__PURE__ */ r("h1", { style: t.gmHeadline1, children: [
-                "Theme selected: ",
-                a
-              ] }),
-              /* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
-                "Rounds: ",
-                w
-              ] }),
-              /* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "▶ Start game" })
-            ] }),
-            C && /* @__PURE__ */ r("div", { style: t.gmCenterScreen, children: [
-              /* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "Results" }),
-              /* @__PURE__ */ r("h2", { style: t.gmHeadline3, children: [
-                "Your score: ",
-                X,
-                " / ",
-                w
-              ] }),
-              /* @__PURE__ */ o("p", { style: { ...t.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
-              /* @__PURE__ */ r("table", { style: t.gmTable, children: [
-                /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ r("tr", { children: [
-                  /* @__PURE__ */ o("th", { children: "Round" }),
-                  /* @__PURE__ */ o("th", { children: "Your Answer" }),
-                  /* @__PURE__ */ o("th", { children: "Correct" }),
-                  /* @__PURE__ */ o("th", { children: "Result" })
-                ] }) }),
-                /* @__PURE__ */ o("tbody", { children: ee.map((e, i) => /* @__PURE__ */ r("tr", { children: [
-                  /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.round }),
-                  /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.answer || "—" }),
-                  /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.correct }),
-                  /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
-                ] }, i)) })
-              ] }),
-              /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                /* @__PURE__ */ o("button", { style: t.gmButton, onClick: _, children: "🔁 Play again" }),
-                /* @__PURE__ */ o("button", { style: t.gmButton, onClick: se, children: "⬅️ Choose theme" })
-              ] })
-            ] }),
-            b && !C && /* @__PURE__ */ r("div", { style: t.gmGameLayout, children: [
-              /* @__PURE__ */ r(
-                "div",
-                {
-                  style: {
-                    minHeight: 160,
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center"
-                  },
-                  children: [
-                    h === "ready" && /* @__PURE__ */ r(ae, { children: [
-                      /* @__PURE__ */ o("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
-                      /* @__PURE__ */ o("div", { style: t.gmHourglass, children: "⏳" })
-                    ] }),
-                    h === "memorize" && /* @__PURE__ */ r("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
-                      "MEMORIZE (",
-                      S,
-                      ")"
-                    ] }),
-                    h === "guess" && !f && /* @__PURE__ */ r("p", { style: t.gmBodyM, children: [
-                      "⏳ Time left: ",
-                      R,
-                      "s"
-                    ] })
-                  ]
-                }
-              ),
-              h !== "ready" && /* @__PURE__ */ o(
-                "div",
-                {
-                  style: {
-                    ...t.gmGrid,
-                    gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                    gridAutoRows: p ? "150px" : "210px",
-                    gap: p ? "12px" : "20px",
-                    justifyItems: "center"
-                  },
-                  children: n.map((e, i) => {
-                    const g = u === i && h === "guess" && !f;
-                    return /* @__PURE__ */ o(
-                      "div",
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                transform: p ? "none" : `scale(${oe})`,
+                transformOrigin: "top center",
+                // ✅ фикс вертикального смещения
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ r("div", { id: "whats-missing-root", children: [
+                !p && le,
+                !a && !y && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "WHAT'S MISSING?" }),
+                  /* @__PURE__ */ t("p", { style: n.gmBodyM, children: "Select a theme:" }),
+                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => c(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+                  /* @__PURE__ */ r("div", { style: { marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("p", { style: n.gmBodyS, children: "Choose number of rounds:" }),
+                    /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ t(
+                      "button",
                       {
                         style: {
-                          ...t.gmCard,
-                          ...N === "correct" && u === i ? t.gmCorrect : {},
-                          ...N === "wrong" && u === i ? t.gmWrong : {}
+                          ...n.gmButton,
+                          ...k === e ? n.gmButtonActive : {}
                         },
-                        children: !g && /* @__PURE__ */ o(
-                          "img",
-                          {
-                            src: e.src,
-                            alt: e.name,
-                            style: {
-                              width: "100%",
-                              height: "100%",
-                              objectFit: "cover"
-                            }
-                          }
-                        )
+                        onClick: () => X(e),
+                        children: e
+                      },
+                      e
+                    )) })
+                  ] })
+                ] }),
+                a && !y && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ r("h1", { style: n.gmHeadline1, children: [
+                    "Theme selected: ",
+                    a
+                  ] }),
+                  /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
+                    "Rounds: ",
+                    k
+                  ] }),
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "▶ Start game" })
+                ] }),
+                T && /* @__PURE__ */ r("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
+                  /* @__PURE__ */ r("h2", { style: n.gmHeadline3, children: [
+                    "Your score: ",
+                    Q,
+                    " / ",
+                    k
+                  ] }),
+                  /* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
+                  /* @__PURE__ */ r("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
+                      /* @__PURE__ */ t("th", { children: "Round" }),
+                      /* @__PURE__ */ t("th", { children: "Your Answer" }),
+                      /* @__PURE__ */ t("th", { children: "Correct" }),
+                      /* @__PURE__ */ t("th", { children: "Result" })
+                    ] }) }),
+                    /* @__PURE__ */ t("tbody", { children: ee.map((e, i) => /* @__PURE__ */ r("tr", { children: [
+                      /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.round }),
+                      /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.answer || "—" }),
+                      /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.correct }),
+                      /* @__PURE__ */ t("td", { style: n.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
+                    ] }, i)) })
+                  ] }),
+                  /* @__PURE__ */ r("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: _, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: se, children: "⬅️ Choose theme" })
+                  ] })
+                ] }),
+                y && !T && /* @__PURE__ */ r("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      style: {
+                        minHeight: 160,
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center"
                       },
-                      i
-                    );
-                  })
-                }
-              ),
-              /* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
-                h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
-                  /* @__PURE__ */ o(
-                    "input",
+                      children: [
+                        h === "ready" && /* @__PURE__ */ r(ae, { children: [
+                          /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+                          /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
+                        ] }),
+                        h === "memorize" && /* @__PURE__ */ r("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                          "MEMORIZE (",
+                          z,
+                          ")"
+                        ] }),
+                        h === "guess" && !f && /* @__PURE__ */ r("p", { style: n.gmBodyM, children: [
+                          "⏳ Time left: ",
+                          I,
+                          "s"
+                        ] })
+                      ]
+                    }
+                  ),
+                  h !== "ready" && /* @__PURE__ */ t(
+                    "div",
                     {
-                      type: "text",
-                      placeholder: "Type the missing word",
-                      value: T,
-                      onChange: (e) => U(e.target.value),
-                      style: t.gmInput
+                      style: {
+                        ...n.gmGrid,
+                        gridTemplateColumns: p ? "repeat(2, 1fr)" : "repeat(3, 210px)",
+                        gridAutoRows: p ? "150px" : "210px",
+                        gap: p ? "12px" : "20px",
+                        justifyItems: "center"
+                      },
+                      children: o.map((e, i) => {
+                        const d = u === i && h === "guess" && !f;
+                        return /* @__PURE__ */ t(
+                          "div",
+                          {
+                            style: {
+                              ...n.gmCard,
+                              ...N === "correct" && u === i ? n.gmCorrect : {},
+                              ...N === "wrong" && u === i ? n.gmWrong : {}
+                            },
+                            children: !d && /* @__PURE__ */ t(
+                              "img",
+                              {
+                                src: e.src,
+                                alt: e.name,
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          },
+                          i
+                        );
+                      })
                     }
                   ),
-                  /* @__PURE__ */ o("button", { style: { ...t.gmButton, marginLeft: 8 }, onClick: ie, disabled: A, children: A ? "..." : "Check" })
-                ] }),
-                f && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: re, children: "Next round" })
+                  /* @__PURE__ */ r("div", { style: { marginTop: 16, height: 80 }, children: [
+                    h === "guess" && !f && /* @__PURE__ */ r("div", { children: [
+                      /* @__PURE__ */ t(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Type the missing word",
+                          value: S,
+                          onChange: (e) => U(e.target.value),
+                          style: n.gmInput
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          style: { ...n.gmButton, marginLeft: 8 },
+                          onClick: ie,
+                          disabled: B,
+                          children: B ? "..." : "Check"
+                        }
+                      )
+                    ] }),
+                    f && /* @__PURE__ */ t("button", { style: n.gmButton, onClick: re, children: "Next round" })
+                  ] })
+                ] })
               ] })
-            ] })
-          ] })
+            }
+          )
         }
       )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.15",
+ "version": "20.0.17",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",

package/src/Game.tsx

@@ -1,4 +1,3 @@
-
 import { useState, useEffect, useMemo, useRef } from "react";
 import { themes } from "./themes";
 import { styles } from "./Game.styles";
@@ -26,7 +25,11 @@ const globalReset = () => {
       display: block;
       user-select: none;
     }
-    html, body { margin: 0; padding: 0; }
+    html, body { 
+      margin: 0; 
+      padding: 0; 
+      zoom: 1 !important; /* ✅ защита от подзума */
+    }
   `;
   document.head.appendChild(style);
 };
@@ -78,17 +81,19 @@ export default function Game() {
   const [isMobile, setIsMobile] = useState(false);
   const [scale, setScale] = useState(1);
 
-  // ✅ адаптив под мобилки и десктоп
+  // ✅ адаптив под мобилки, планшеты и десктоп
   useEffect(() => {
     const resize = () => {
       const mobile = window.innerWidth < 768;
-      setIsMobile(mobile);
+      const tablet = window.innerWidth >= 768 && window.innerWidth < 1200;
 
-      if (!mobile) {
-        // виртуальный размер игры (1440x768)
+      setIsMobile(mobile || tablet);
+
+      if (!mobile && !tablet) {
         const baseW = 1440;
         const baseH = 768;
-        const ratio = Math.min(window.innerWidth / baseW, window.innerHeight / baseH);
+        // ✅ коэффициент безопасности, чтобы кнопка не обрезалась
+        const ratio = Math.min(window.innerWidth / baseW, window.innerHeight / baseH) * 0.97;
         setScale(ratio);
       } else {
         setScale(1);
@@ -99,9 +104,6 @@ export default function Game() {
     return () => window.removeEventListener("resize", resize);
   }, []);
 
-  // =============================
-  // GAME LOGIC
-  // =============================
   const getRandomSix = (arr: ImageItem[]) =>
     [...arr].sort(() => Math.random() - 0.5).slice(0, 6);
 
@@ -211,7 +213,6 @@ export default function Game() {
     setTheme(null);
   };
 
-  // логотип
   const MemoizedLogo = useMemo(
     () => (
       <div style={styles.gmLogoFixed}>
@@ -224,9 +225,6 @@ export default function Game() {
     []
   );
 
-  // =============================
-  // RENDER
-  // =============================
   return (
     <div
       ref={containerRef}
@@ -238,192 +236,217 @@ export default function Game() {
         alignItems: "center",
         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
         transition: "background 0.3s ease",
+        overflowX: "clip"
       }}
     >
-      {/* Внутренний canvas (виртуальное игровое окно 1440x768) */}
       <div
         style={{
-          width: isMobile ? "100vw" : 1440,
-          height: isMobile ? "100vh" : 768,
-          transform: isMobile ? "none" : `scale(${scale})`,
-          transformOrigin: "top center",
+          width: isMobile ? "100%" : 1440,
+          height: isMobile ? "100%" : 768,
           display: "flex",
-          flexDirection: "column",
           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",
         }}
       >
-        <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: 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
+          style={{
+            transform: isMobile ? "none" : `scale(${scale})`,
+            transformOrigin: "top center", // ✅ фикс вертикального смещения
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <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: 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}
+                      </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}>
-                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>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
+            )}
+            {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}>
-                  🔁 Play again
-                </button>
-                <button style={styles.gmButton} onClick={exitGame}>
-                  ⬅️ Choose theme
+                  ▶ Start game
                 </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>}
+            )}
+            {finished && (
+              <div style={styles.gmCenterScreen}>
+                <h1 style={styles.gmHeadline1}>Results</h1>
+                <h2 style={styles.gmHeadline3}>
+                  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>
+                      </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>
-
-              {phase !== "ready" && (
+            )}
+            {started && !finished && (
+              <div style={styles.gmGameLayout}>
                 <div
                   style={{
-                    ...styles.gmGrid,
-                    gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                    gridAutoRows: isMobile ? "150px" : "210px",
-                    gap: isMobile ? "12px" : "20px",
-                    justifyItems: "center",
+                    minHeight: 160,
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignItems: "center",
                   }}
                 >
-                  {files.map((file, i) => {
-                    const isHidden = hiddenIndex === i && phase === "guess" && !answered;
-                    return (
-                      <div
-                        key={i}
-                        style={{
-                          ...styles.gmCard,
-                          ...(result === "correct" && hiddenIndex === i ? styles.gmCorrect : {}),
-                          ...(result === "wrong" && hiddenIndex === i ? styles.gmWrong : {}),
-                        }}
-                      >
-                        {!isHidden && (
-                          <img
-                            src={file.src}
-                            alt={file.name}
-                            style={{
-                              width: "100%",
-                              height: "100%",
-                              objectFit: "cover",
-                            }}
-                          />
-                        )}
-                      </div>
-                    );
-                  })}
+                  {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>
-              )}
-
-              <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>
+                {phase !== "ready" && (
+                  <div
+                    style={{
+                      ...styles.gmGrid,
+                      gridTemplateColumns: isMobile
+                        ? "repeat(2, 1fr)"
+                        : "repeat(3, 210px)",
+                      gridAutoRows: isMobile ? "150px" : "210px",
+                      gap: isMobile ? "12px" : "20px",
+                      justifyItems: "center",
+                    }}
+                  >
+                    {files.map((file, i) => {
+                      const isHidden =
+                        hiddenIndex === i && phase === "guess" && !answered;
+                      return (
+                        <div
+                          key={i}
+                          style={{
+                            ...styles.gmCard,
+                            ...(result === "correct" && hiddenIndex === i
+                              ? styles.gmCorrect
+                              : {}),
+                            ...(result === "wrong" && hiddenIndex === i
+                              ? styles.gmWrong
+                              : {}),
+                          }}
+                        >
+                          {!isHidden && (
+                            <img
+                              src={file.src}
+                              alt={file.name}
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "cover",
+                              }}
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
                   </div>
                 )}
-                {answered && <button style={styles.gmButton} onClick={nextRound}>Next round</button>}
+                <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>
+                    </div>
+                  )}
+                  {answered && (
+                    <button style={styles.gmButton} onClick={nextRound}>
+                      Next round
+                    </button>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>