@mblinkov/whats-missing 20.0.20 → 20.0.22

package/dist/whats-missing.cjs.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),le=window.origin+"/cloud/speakid/games/whatsmissing/",D=(a,m)=>a.map(([c,s])=>({src:`${le}${m}/${s.replace(/\s/g,"%20")}.png`,name:s})),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"]],de=[["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"]],ce=[["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"]],P={food:D(ae,"food"),animals:D(de,"animals"),toys:D(ce,"toys")},me=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),pe=window.origin+"/cloud/speakid/games/whatsmissing/",q=(d,f)=>d.map(([g,i])=>({src:`${pe}${f}/${i.replace(/\s/g,"%20")}.png`,name:i})),ye=[["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"]],xe=[["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"]],be=[["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"]],V={food:q(ye,"food"),animals:q(xe,"animals"),toys:q(be,"toys")},we=`
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
-`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=me,document.head.appendChild(a)}const ue={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...ue}},ge=()=>{const a=document.createElement("style");a.textContent=`
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const d=document.createElement("style");d.id="spin-keyframes",d.innerHTML=we,document.head.appendChild(d)}const ve={animation:"spin 1.4s linear infinite"},n={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100%",width:"100%",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",color:"#1f2937",padding:"24px 16px",boxSizing:"border-box",transform:"translateY(20px)"},gmHeadline1:{fontWeight:700,fontSize:"clamp(28px, 4vw, 40px)",lineHeight:"110%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},gmBodyM:{fontWeight:400,fontSize:"16px",lineHeight:"140%"},gmBodyS:{fontWeight:400,fontSize:"14px",lineHeight:"140%",color:"#6b7280"},gmButton:{fontFamily:'"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',fontWeight:600,fontSize:"16px",padding:"10px 16px",borderRadius:"12px",border:"1px solid #e5e7eb",background:"#ec4c44",color:"#ffffff",cursor:"pointer",boxShadow:"0 6px 18px rgba(236, 76, 68, .18)",transition:"transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent",transform:"none",willChange:"auto"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent",objectFit:"contain",imageRendering:"auto",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitFontSmoothing:"antialiased"},gmHourglass:{fontSize:"42px",...ve}},je=()=>{const d=document.createElement("style");d.textContent=`
     /* scope only inside game root */
     #whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
     #whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
-  `,document.head.appendChild(a)},he=(a,m)=>{const c=Array.from({length:a.length+1},()=>Array(m.length+1).fill(0));for(let s=0;s<=a.length;s++)c[s][0]=s;for(let s=0;s<=m.length;s++)c[0][s]=s;for(let s=1;s<=a.length;s++)for(let u=1;u<=m.length;u++)c[s][u]=a[s-1]===m[u-1]?c[s-1][u-1]:Math.min(c[s-1][u-1],c[s][u-1],c[s-1][u])+1;return c[a.length][m.length]};function fe(a,m={minDesktopWidth:1200,forceResize:!1}){const c=o.useRef(null),s=m.minDesktopWidth??1200,u=!!m.forceResize;o.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const i=a.current,L=()=>{try{const r=document.body,d=getComputedStyle(r),p=parseFloat(r.style&&r.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const j=parseFloat(d.zoom||"");if(j&&!isNaN(j)&&j>0)return j;const k=d.transform||d.webkitTransform||d.mozTransform;if(k&&k!=="none"){const C=k.match(/matrix\(([^)]+)\)/);if(C){const v=C[1].split(",").map(B=>parseFloat(B))[0];if(v&&!isNaN(v))return v}}}catch{}return 1},b=()=>{if(s&&window.innerWidth<s){S();return}const r=L();if(!r||r===1){S();return}c.current||(c.current={transform:i.style.transform||null,transformOrigin:i.style.transformOrigin||null,width:i.style.width||null,height:i.style.height||null,willChange:i.style.willChange||null});const d=1/r;u&&(i.style.width=`${r*100}%`,i.style.height=`${r*100}%`),i.style.transform=`scale(${d})`,i.style.transformOrigin="top left",i.style.willChange="transform",typeof process<"u"&&process.env&&process.env.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:r,inv:d,forceResize:u})},S=()=>{if(!c.current)return;const r=c.current;r.transform===null?i.style.removeProperty("transform"):i.style.transform=r.transform,r.transformOrigin===null?i.style.removeProperty("transform-origin"):i.style.transformOrigin=r.transformOrigin,r.width===null?i.style.removeProperty("width"):i.style.width=r.width,r.height===null?i.style.removeProperty("height"):i.style.height=r.height,r.willChange===null?i.style.removeProperty("will-change"):i.style.willChange=r.willChange,c.current=null,process.env.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] restored original styles")};let x=0;const w=()=>{cancelAnimationFrame(x),x=requestAnimationFrame(b)},f=new MutationObserver(r=>{for(const d of r)if(d.type==="attributes"&&(d.attributeName==="style"||d.attributeName==="class")){w();break}});return f.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",w),w(),()=>{cancelAnimationFrame(x),f.disconnect(),window.removeEventListener("resize",w),S()}},[a,s,u])}function pe(){const a=o.useRef(null);fe(a,{minDesktopWidth:1200,forceResize:!1}),o.useEffect(()=>(ge(),()=>{document.body.style.overflow=""}),[]);const[m,c]=o.useState(null),[s,u]=o.useState([]),[i,L]=o.useState(4),[b,S]=o.useState(!1),[x,w]=o.useState(1),[f,r]=o.useState(null),[d,p]=o.useState("ready"),[j,k]=o.useState(3),[C,M]=o.useState(10),[v,B]=o.useState(20),[Q,F]=o.useState(0),[A,W]=o.useState(!1),[H,q]=o.useState(""),[z,N]=o.useState(!1),[G,Y]=o.useState(!1),[$,R]=o.useState(null),[ee,O]=o.useState([]),[te,V]=o.useState([]),[y,ne]=o.useState(!1),[ye,Z]=o.useState(1),[_,U]=o.useState(null);o.useEffect(()=>{const t=()=>{const l=window.innerWidth<768;if(ne(l),l)U(null),Z(1);else{const T=Math.min(window.innerWidth,window.innerHeight),I=Math.max(360,Math.round(T*.97)),E=Math.min(I,1e3);U(E),Z(1)}};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const K=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),X=()=>{if(!m)return;const t=K(P[m]);u(t),S(!0),W(!1),w(1),F(0),O([]),V([]),J(t,[],!0)},J=(t=s,l=te,h=!1)=>{const g=K(t.length?t:P[m]);let T=Math.floor(Math.random()*g.length),I=g[T].name,E=0;for(;l.includes(I)&&E<20;)T=Math.floor(Math.random()*g.length),I=g[T].name,E++;u(g),r(T),V([...l,I]),N(!1),q(""),B(20),R(null),h?(p("ready"),k(3),M(10)):(p("memorize"),M(10))};o.useEffect(()=>{if(!(!b||A||z)){if(d==="ready")if(j<=0)p("memorize");else{const t=setTimeout(()=>k(l=>l-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(C<=0)p("guess");else{const t=setTimeout(()=>M(l=>l-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(v<=0){N(!0),R("wrong");const l=s[f].name;O(h=>[...h,{round:x,answer:H,correct:l,result:"wrong"}]);return}const t=setTimeout(()=>B(l=>l-1),1e3);return()=>clearTimeout(t)}}},[d,j,C,v,b,A,z,s,f,x,H]);const se=()=>{if(f===null||G)return;const t=s[f].name,l=H.toLowerCase().trim();let h="wrong";l===t?(F(g=>g+1),R("correct"),h="correct"):he(l,t)===1?(F(g=>g+.5),R("almost"),h="almost"):(R("wrong"),h="wrong"),O(g=>[...g,{round:x,answer:l,correct:t,result:h}]),Y(!0),setTimeout(()=>{Y(!1),N(!0)},600)},oe=()=>x<i?(w(t=>t+1),J()):W(!0),re=()=>{S(!1),W(!1),c(null)},ie=o.useMemo(()=>e.jsx("div",{style:{...n.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},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:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:a,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:y?"100%":_||1e3,height:y?"100%":_||1e3,display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:y?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:y?"none":"0 0 40px rgba(0,0,0,0.1)",margin:y?"0 auto":"unset",position:"relative"},children:e.jsx("div",{style:{transform:"none",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!y&&ie,!m&&!b&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.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:{...n.gmButton,...i===t?n.gmButtonActive:{}},onClick:()=>L(t),children:t},t))})]})]}),m&&!b&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",m]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",i]}),e.jsx("button",{style:n.gmButton,onClick:X,children:"▶ Start game"})]}),A&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",Q," / ",i]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.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:ee.map((t,l)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},l))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:X,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:re,children:"⬅️ Choose theme"})]})]}),b&&!A&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[d==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),d==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",C,")"]}),d==="guess"&&!z&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",v,"s"]})]}),d!=="ready"&&e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:y?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:y?"150px":"210px",gap:y?"12px":"20px",justifyItems:"center"},children:s.map((t,l)=>{const h=f===l&&d==="guess"&&!z;return e.jsx("div",{style:{...n.gmCard,...$==="correct"&&f===l?n.gmCorrect:{},...$==="wrong"&&f===l?n.gmWrong:{}},children:!h&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},l)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!z&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:H,onChange:t=>q(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:se,disabled:G,children:G?"...":"Check"})]}),z&&e.jsx("button",{type:"button",style:n.gmButton,onClick:oe,children:"Next round"})]})]})]})})})})}exports.Game=pe;exports.themes=P;
+  `,document.head.appendChild(d)},Se=(d,f)=>{const g=Array.from({length:d.length+1},()=>Array(f.length+1).fill(0));for(let i=0;i<=d.length;i++)g[i][0]=i;for(let i=0;i<=f.length;i++)g[0][i]=i;for(let i=1;i<=d.length;i++)for(let m=1;m<=f.length;m++)g[i][m]=d[i-1]===f[m-1]?g[i-1][m-1]:Math.min(g[i-1][m-1],g[i][m-1],g[i-1][m])+1;return g[d.length][f.length]};function ze(d,f={minDesktopWidth:1200,forceResize:!1}){const g=s.useRef(null),i=f.minDesktopWidth??1200,m=!!f.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!d||!d.current)return;const l=d.current,z=()=>{try{const r=document.body,y=getComputedStyle(r),p=parseFloat(r.style&&r.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const C=parseFloat(y.zoom||"");if(C&&!isNaN(C)&&C>0)return C;const c=document.createElement("div");c.style.position="absolute",c.style.left="0",c.style.top="0",c.style.width="100px",c.style.height="1px",c.style.visibility="hidden",c.style.pointerEvents="none",document.documentElement.appendChild(c);const S=c.getBoundingClientRect();if(document.documentElement.removeChild(c),S&&S.width>0){const k=S.width/100;if(!isNaN(k)&&k>0)return k}}catch{}return 1},L=()=>{if(i&&window.innerWidth<i){j();return}const r=z();if(!r||r===1){j();return}g.current||(g.current={transform:l.style.transform||null,transformOrigin:l.style.transformOrigin||null,width:l.style.width||null,height:l.style.height||null,willChange:l.style.willChange||null});const y=1/r;m&&(l.style.width=`${r*100}%`,l.style.height=`${r*100}%`),l.style.transformOrigin="50% 50%",l.style.transform=`scale(${y})`,l.style.willChange="transform",typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:r,inv:y,forceResize:m})},j=()=>{if(!g.current)return;const r=g.current;r.transform===null?l.style.removeProperty("transform"):l.style.transform=r.transform,r.transformOrigin===null?l.style.removeProperty("transform-origin"):l.style.transformOrigin=r.transformOrigin,r.width===null?l.style.removeProperty("width"):l.style.width=r.width,r.height===null?l.style.removeProperty("height"):l.style.height=r.height,r.willChange===null?l.style.removeProperty("will-change"):l.style.willChange=r.willChange,g.current=null,typeof process<"u"&&process.env?.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] restored original styles")};let M=0;const x=()=>{cancelAnimationFrame(M),M=requestAnimationFrame(L)},T=new MutationObserver(r=>{for(const y of r)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){x();break}});return T.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(M),T.disconnect(),window.removeEventListener("resize",x),j()}},[d,i,m])}function Ce(){const d=s.useRef(null),f=s.useRef(null),[g,i]=s.useState(null);ze(d,{minDesktopWidth:1200,forceResize:!1}),s.useEffect(()=>(je(),()=>{document.body.style.overflow=""}),[]);const[m,l]=s.useState(null),[z,L]=s.useState([]),[j,M]=s.useState(4),[x,T]=s.useState(!1),[r,y]=s.useState(1),[p,C]=s.useState(null),[c,S]=s.useState("ready"),[k,Y]=s.useState(3),[A,W]=s.useState(10),[F,Z]=s.useState(20),[oe,N]=s.useState(0),[H,O]=s.useState(!1),[B,_]=s.useState(""),[R,$]=s.useState(!1),[G,U]=s.useState(!1),[K,E]=s.useState(null),[se,D]=s.useState([]),[ie,J]=s.useState([]),[b,re]=s.useState(!1),[I,Q]=s.useState(null);s.useLayoutEffect(()=>{const t=f.current;if(!t||typeof window>"u")return;let o=null;try{o=new ResizeObserver(u=>{for(const a of u){const h=a.contentRect;i(Math.round(Math.min(h.width,h.height)))}}),o.observe(t),i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}catch{i(Math.round(Math.min(t.clientWidth,t.clientHeight)))}return()=>{o&&o.disconnect()}},[b]),s.useEffect(()=>{const t=()=>{const u=window.visualViewport,a=u?Math.round(u.width):window.innerWidth,h=u?Math.round(u.height):window.innerHeight,w=a<768||a>=768&&a<1200&&h>a;if(re(w),w){Q(null);return}const v=.92,P=1e3,ne=40,me=Math.max(360,a-ne),ue=Math.max(360,h-ne),ge=Math.min(me,ue),he=Math.max(360,Math.round(ge*v)),fe=Math.min(he,P);Q(fe)};t(),window.addEventListener("resize",t);const o=window.visualViewport;return o&&typeof o.addEventListener=="function"&&(o.addEventListener("resize",t),o.addEventListener("scroll",t)),()=>{window.removeEventListener("resize",t),o&&typeof o.removeEventListener=="function"&&(o.removeEventListener("resize",t),o.removeEventListener("scroll",t))}},[]);const X=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),ee=()=>{if(!m)return;const t=X(V[m]);L(t),T(!0),O(!1),y(1),N(0),D([]),J([]),te(t,[],!0)},te=(t=z,o=ie,u=!1)=>{const a=X(t.length?t:V[m]);let h=Math.floor(Math.random()*a.length),w=a[h].name,v=0;for(;o.includes(w)&&v<20;)h=Math.floor(Math.random()*a.length),w=a[h].name,v++;L(a),C(h),J([...o,w]),$(!1),_(""),Z(20),E(null),u?(S("ready"),Y(3),W(10)):(S("memorize"),W(10))};s.useEffect(()=>{if(!(!x||H||R)){if(c==="ready")if(k<=0)S("memorize");else{const t=setTimeout(()=>Y(o=>o-1),1e3);return()=>clearTimeout(t)}if(c==="memorize")if(A<=0)S("guess");else{const t=setTimeout(()=>W(o=>o-1),1e3);return()=>clearTimeout(t)}if(c==="guess"){if(F<=0){$(!0),E("wrong");const o=z[p].name;D(u=>[...u,{round:r,answer:B,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>Z(o=>o-1),1e3);return()=>clearTimeout(t)}}},[c,k,A,F,x,H,R,z,p,r,B]);const le=()=>{if(p===null||G)return;const t=z[p].name,o=B.toLowerCase().trim();let u="wrong";o===t?(N(a=>a+1),E("correct"),u="correct"):Se(o,t)===1?(N(a=>a+.5),E("almost"),u="almost"):(E("wrong"),u="wrong"),D(a=>[...a,{round:r,answer:o,correct:t,result:u}]),U(!0),setTimeout(()=>{U(!1),$(!0)},600)},ae=()=>r<j?(y(t=>t+1),te()):O(!0),de=()=>{T(!1),O(!1),l(null)},ce=s.useMemo(()=>e.jsx("div",{style:{...n.gmLogoFixed,position:"absolute",top:16,left:16,zIndex:30},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:n.gmLogoImg,loading:"lazy"})]})}),[]);return e.jsx("div",{ref:d,style:{position:"fixed",inset:0,display:"flex",justifyContent:"center",alignItems:"center",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",transition:"background 0.3s ease",overflow:"hidden",zIndex:9999,pointerEvents:"auto"},children:e.jsx("div",{ref:f,style:{width:b?"100%":I?`${I}px`:"1000px",height:b?"100%":I?`${I}px`:"1000px",maxWidth:"calc(100vw - 24px)",maxHeight:"calc(100vh - 24px)",display:"flex",justifyContent:"center",alignItems:"center",overflow:"hidden",borderRadius:b?0:"20px",background:"linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",boxShadow:b?"none":"0 0 40px rgba(0,0,0,0.08)",position:"relative"},children:e.jsx("div",{style:{transform:"none",transformOrigin:"50% 50%",width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsxs("div",{id:"whats-missing-root",children:[!b&&ce,!m&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:n.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:n.gmButton,onClick:()=>l(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:n.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:{...n.gmButton,...j===t?n.gmButtonActive:{}},onClick:()=>M(t),children:t},t))})]})]}),m&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",m]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",j]}),e.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),H&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsx("h1",{style:n.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:n.gmHeadline3,children:["Your score: ",oe," / ",j]}),e.jsx("p",{style:{...n.gmBodyM,color:"#10b981",marginTop:12},children:"Yahoo! You did it! 🍬✨"}),e.jsxs("table",{style:n.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:se.map((t,o)=>e.jsxs("tr",{children:[e.jsx("td",{style:n.gmTableCell,children:t.round}),e.jsx("td",{style:n.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:n.gmTableCell,children:t.correct}),e.jsx("td",{style:n.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},o))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:n.gmButton,onClick:ee,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:de,children:"⬅️ Choose theme"})]})]}),x&&!H&&e.jsxs("div",{style:n.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[c==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...n.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:n.gmHourglass,children:"⏳"})]}),c==="memorize"&&e.jsxs("p",{style:{...n.gmBodyM,color:"#10b981"},children:["MEMORIZE (",A,")"]}),c==="guess"&&!R&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),c!=="ready"&&(()=>{const t=b?12:20,o=32,u=g??I??(b?360:1e3),a=b?2:3,h=Math.max(90,Math.floor((u-o-t*(a-1))/a));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${a}, ${h}px)`,gridAutoRows:`${h}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:z.map((w,v)=>{const P=p===v&&c==="guess"&&!R;return e.jsx("div",{style:{...n.gmCard,width:`${h}px`,height:`${h}px`,padding:b?8:10,boxSizing:"border-box",...K==="correct"&&p===v?n.gmCorrect:{},...K==="wrong"&&p===v?n.gmWrong:{}},children:!P&&e.jsx("img",{src:w.src,alt:w.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},v)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[c==="guess"&&!R&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:B,onChange:t=>_(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:le,disabled:G,children:G?"...":"Check"})]}),R&&e.jsx("button",{type:"button",style:n.gmButton,onClick:ae,children:"Next round"})]})]})]})})})})}exports.Game=Ce;exports.themes=V;

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as c, Fragment as ce } from "react/jsx-runtime";
-import { useRef as te, useEffect as P, useState as d, useMemo as me, useLayoutEffect as ge } from "react";
-const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l.map(([m, o]) => ({
-  src: `${ue}${g}/${o.replace(/\s/g, "%20")}.png`,
-  name: o
-})), he = [
+import { jsx as t, jsxs as m, Fragment as we } from "react/jsx-runtime";
+import { useRef as Z, useState as c, useEffect as V, useLayoutEffect as se, useMemo as ve } from "react";
+const ze = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (a, f) => a.map(([h, i]) => ({
+  src: `${ze}${f}/${i.replace(/\s/g, "%20")}.png`,
+  name: i
+})), Ce = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], pe = [
+], ke = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], fe = [
+], Se = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,27 +69,29 @@ const ue = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, g) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ee = {
-  food: Y(he, "food"),
-  animals: Y(pe, "animals"),
-  toys: Y(fe, "toys")
-}, ye = `
+], re = {
+  food: Y(Ce, "food"),
+  animals: Y(ke, "animals"),
+  toys: Y(Se, "toys")
+}, Me = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
-  const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = ye, document.head.appendChild(l);
+  const a = document.createElement("style");
+  a.id = "spin-keyframes", a.innerHTML = Me, document.head.appendChild(a);
 }
-const be = {
+const Te = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
-    minHeight: "100vh",
+    // use percent so the component fits inside the centered square container
+    // (100vh caused overflow on tablets because it measured the viewport, not the container)
+    minHeight: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -144,7 +146,8 @@ const be = {
     position: "relative",
     width: "100%",
     maxWidth: "600px",
-    minHeight: "100vh",
+    // should fill the parent square, not the full viewport
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -233,155 +236,175 @@ const be = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...be
+    ...Te
   }
-}, xe = () => {
-  const l = document.createElement("style");
-  l.textContent = `
+}, Re = () => {
+  const a = document.createElement("style");
+  a.textContent = `
     /* scope only inside game root */
     #whats-missing-root, #whats-missing-root * { box-sizing: border-box; }
     #whats-missing-root img { max-width:100%; height:auto; display:block; user-select:none; }
-  `, document.head.appendChild(l);
-}, we = (l, g) => {
-  const m = Array.from({ length: l.length + 1 }, () => Array(g.length + 1).fill(0));
-  for (let o = 0; o <= l.length; o++) m[o][0] = o;
-  for (let o = 0; o <= g.length; o++) m[0][o] = o;
-  for (let o = 1; o <= l.length; o++)
-    for (let u = 1; u <= g.length; u++)
-      m[o][u] = l[o - 1] === g[u - 1] ? m[o - 1][u - 1] : Math.min(m[o - 1][u - 1], m[o][u - 1], m[o - 1][u]) + 1;
-  return m[l.length][g.length];
+  `, document.head.appendChild(a);
+}, Ee = (a, f) => {
+  const h = Array.from({ length: a.length + 1 }, () => Array(f.length + 1).fill(0));
+  for (let i = 0; i <= a.length; i++) h[i][0] = i;
+  for (let i = 0; i <= f.length; i++) h[0][i] = i;
+  for (let i = 1; i <= a.length; i++)
+    for (let u = 1; u <= f.length; u++)
+      h[i][u] = a[i - 1] === f[u - 1] ? h[i - 1][u - 1] : Math.min(h[i - 1][u - 1], h[i][u - 1], h[i - 1][u]) + 1;
+  return h[a.length][f.length];
 };
-function ve(l, g = { minDesktopWidth: 1200, forceResize: !1 }) {
-  const m = te(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
-  ge(() => {
-    if (typeof window > "u" || !l || !l.current) return;
-    const i = l.current, E = () => {
+function Ie(a, f = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const h = Z(null), i = f.minDesktopWidth ?? 1200, u = !!f.forceResize;
+  se(() => {
+    if (typeof window > "u" || !a || !a.current) return;
+    const s = a.current, S = () => {
       try {
-        const r = document.body, a = getComputedStyle(r), y = parseFloat(r.style && r.style.zoom || "");
+        const r = document.body, b = getComputedStyle(r), y = parseFloat(r.style && r.style.zoom || "");
         if (y && !isNaN(y) && y > 0) return y;
-        const k = parseFloat(a.zoom || "");
-        if (k && !isNaN(k) && k > 0) return k;
-        const S = a.transform || a.webkitTransform || a.mozTransform;
-        if (S && S !== "none") {
-          const T = S.match(/matrix\(([^)]+)\)/);
-          if (T) {
-            const C = T[1].split(",").map((H) => parseFloat(H))[0];
-            if (C && !isNaN(C)) return C;
-          }
+        const M = parseFloat(b.zoom || "");
+        if (M && !isNaN(M) && M > 0) return M;
+        const d = document.createElement("div");
+        d.style.position = "absolute", d.style.left = "0", d.style.top = "0", d.style.width = "100px", d.style.height = "1px", d.style.visibility = "hidden", d.style.pointerEvents = "none", document.documentElement.appendChild(d);
+        const k = d.getBoundingClientRect();
+        if (document.documentElement.removeChild(d), k && k.width > 0) {
+          const T = k.width / 100;
+          if (!isNaN(T) && T > 0) return T;
         }
       } catch {
       }
       return 1;
-    }, w = () => {
-      if (o && window.innerWidth < o) {
-        z();
+    }, B = () => {
+      if (i && window.innerWidth < i) {
+        C();
         return;
       }
-      const r = E();
+      const r = S();
       if (!r || r === 1) {
-        z();
+        C();
         return;
       }
-      m.current || (m.current = {
-        transform: i.style.transform || null,
-        transformOrigin: i.style.transformOrigin || null,
-        width: i.style.width || null,
-        height: i.style.height || null,
-        willChange: i.style.willChange || null
+      h.current || (h.current = {
+        transform: s.style.transform || null,
+        transformOrigin: s.style.transformOrigin || null,
+        width: s.style.width || null,
+        height: s.style.height || null,
+        willChange: s.style.willChange || null
       });
-      const a = 1 / r;
-      u && (i.style.width = `${r * 100}%`, i.style.height = `${r * 100}%`), i.style.transform = `scale(${a})`, i.style.transformOrigin = "top left", i.style.willChange = "transform", typeof process < "u" && process.env && process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: r, inv: a, forceResize: u });
-    }, z = () => {
-      if (!m.current) return;
-      const r = m.current;
-      r.transform === null ? i.style.removeProperty("transform") : i.style.transform = r.transform, r.transformOrigin === null ? i.style.removeProperty("transform-origin") : i.style.transformOrigin = r.transformOrigin, r.width === null ? i.style.removeProperty("width") : i.style.width = r.width, r.height === null ? i.style.removeProperty("height") : i.style.height = r.height, r.willChange === null ? i.style.removeProperty("will-change") : i.style.willChange = r.willChange, m.current = null, process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] restored original styles");
+      const b = 1 / r;
+      u && (s.style.width = `${r * 100}%`, s.style.height = `${r * 100}%`), s.style.transformOrigin = "50% 50%", s.style.transform = `scale(${b})`, s.style.willChange = "transform", typeof process < "u" && process.env?.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: r, inv: b, forceResize: u });
+    }, C = () => {
+      if (!h.current) return;
+      const r = h.current;
+      r.transform === null ? s.style.removeProperty("transform") : s.style.transform = r.transform, r.transformOrigin === null ? s.style.removeProperty("transform-origin") : s.style.transformOrigin = r.transformOrigin, r.width === null ? s.style.removeProperty("width") : s.style.width = r.width, r.height === null ? s.style.removeProperty("height") : s.style.height = r.height, r.willChange === null ? s.style.removeProperty("will-change") : s.style.willChange = r.willChange, h.current = null, typeof process < "u" && process.env?.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] restored original styles");
     };
-    let x = 0;
-    const v = () => {
-      cancelAnimationFrame(x), x = requestAnimationFrame(w);
-    }, f = new MutationObserver((r) => {
-      for (const a of r)
-        if (a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class")) {
-          v();
+    let E = 0;
+    const x = () => {
+      cancelAnimationFrame(E), E = requestAnimationFrame(B);
+    }, I = new MutationObserver((r) => {
+      for (const b of r)
+        if (b.type === "attributes" && (b.attributeName === "style" || b.attributeName === "class")) {
+          x();
           break;
         }
     });
-    return f.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", v), v(), () => {
-      cancelAnimationFrame(x), f.disconnect(), window.removeEventListener("resize", v), z();
+    return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", x), x(), () => {
+      cancelAnimationFrame(E), I.disconnect(), window.removeEventListener("resize", x), C();
     };
-  }, [l, o, u]);
+  }, [a, i, u]);
 }
-function Se() {
-  const l = te(null);
-  ve(l, { minDesktopWidth: 1200, forceResize: !1 }), P(() => (xe(), () => {
+function Be() {
+  const a = Z(null), f = Z(null), [h, i] = c(null);
+  Ie(a, { minDesktopWidth: 1200, forceResize: !1 }), V(() => (Re(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [g, m] = d(null), [o, u] = d([]), [i, E] = d(4), [w, z] = d(!1), [x, v] = d(1), [f, r] = d(null), [a, y] = d("ready"), [k, S] = d(3), [T, A] = d(10), [C, H] = d(20), [ne, N] = d(0), [L, j] = d(!1), [F, $] = d(""), [R, D] = d(!1), [G, q] = d(!1), [V, M] = d(null), [oe, O] = d([]), [re, Z] = d([]), [b, ie] = d(!1), [ke, _] = d(1), [U, K] = d(null);
-  P(() => {
+  const [u, s] = c(null), [S, B] = c([]), [C, E] = c(4), [x, I] = c(!1), [r, b] = c(1), [y, M] = c(null), [d, k] = c("ready"), [T, _] = c(3), [j, F] = c(10), [N, U] = c(20), [le, $] = c(0), [A, O] = c(!1), [W, K] = c(""), [R, G] = c(!1), [D, J] = c(!1), [Q, H] = c(null), [ae, P] = c([]), [de, X] = c([]), [w, ce] = c(!1), [L, ee] = c(null);
+  se(() => {
+    const e = f.current;
+    if (!e || typeof window > "u") return;
+    let o = null;
+    try {
+      o = new ResizeObserver((g) => {
+        for (const l of g) {
+          const p = l.contentRect;
+          i(Math.round(Math.min(p.width, p.height)));
+        }
+      }), o.observe(e), i(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+    } catch {
+      i(Math.round(Math.min(e.clientWidth, e.clientHeight)));
+    }
+    return () => {
+      o && o.disconnect();
+    };
+  }, [w]), V(() => {
     const e = () => {
-      const s = window.innerWidth < 768;
-      if (ie(s), s)
-        K(null), _(1);
-      else {
-        const I = Math.min(window.innerWidth, window.innerHeight), B = Math.max(360, Math.round(I * 0.97)), W = Math.min(B, 1e3);
-        K(W), _(1);
+      const g = window.visualViewport, l = g ? Math.round(g.width) : window.innerWidth, p = g ? Math.round(g.height) : window.innerHeight, v = l < 768 || l >= 768 && l < 1200 && p > l;
+      if (ce(v), v) {
+        ee(null);
+        return;
       }
+      const z = 0.92, q = 1e3, ie = 40, pe = Math.max(360, l - ie), fe = Math.max(360, p - ie), ye = Math.min(pe, fe), be = Math.max(360, Math.round(ye * z)), xe = Math.min(be, q);
+      ee(xe);
+    };
+    e(), window.addEventListener("resize", e);
+    const o = window.visualViewport;
+    return o && typeof o.addEventListener == "function" && (o.addEventListener("resize", e), o.addEventListener("scroll", e)), () => {
+      window.removeEventListener("resize", e), o && typeof o.removeEventListener == "function" && (o.removeEventListener("resize", e), o.removeEventListener("scroll", e));
     };
-    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const X = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), J = () => {
-    if (!g) return;
-    const e = X(ee[g]);
-    u(e), z(!0), j(!1), v(1), N(0), O([]), Z([]), Q(e, [], !0);
-  }, Q = (e = o, s = re, p = !1) => {
-    const h = X(e.length ? e : ee[g]);
-    let I = Math.floor(Math.random() * h.length), B = h[I].name, W = 0;
-    for (; s.includes(B) && W < 20; )
-      I = Math.floor(Math.random() * h.length), B = h[I].name, W++;
-    u(h), r(I), Z([...s, B]), D(!1), $(""), H(20), M(null), p ? (y("ready"), S(3), A(10)) : (y("memorize"), A(10));
+  const te = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), ne = () => {
+    if (!u) return;
+    const e = te(re[u]);
+    B(e), I(!0), O(!1), b(1), $(0), P([]), X([]), oe(e, [], !0);
+  }, oe = (e = S, o = de, g = !1) => {
+    const l = te(e.length ? e : re[u]);
+    let p = Math.floor(Math.random() * l.length), v = l[p].name, z = 0;
+    for (; o.includes(v) && z < 20; )
+      p = Math.floor(Math.random() * l.length), v = l[p].name, z++;
+    B(l), M(p), X([...o, v]), G(!1), K(""), U(20), H(null), g ? (k("ready"), _(3), F(10)) : (k("memorize"), F(10));
   };
-  P(() => {
-    if (!(!w || L || R)) {
-      if (a === "ready")
-        if (k <= 0) y("memorize");
+  V(() => {
+    if (!(!x || A || R)) {
+      if (d === "ready")
+        if (T <= 0) k("memorize");
         else {
-          const e = setTimeout(() => S((s) => s - 1), 1e3);
+          const e = setTimeout(() => _((o) => o - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (a === "memorize")
-        if (T <= 0) y("guess");
+      if (d === "memorize")
+        if (j <= 0) k("guess");
         else {
-          const e = setTimeout(() => A((s) => s - 1), 1e3);
+          const e = setTimeout(() => F((o) => o - 1), 1e3);
           return () => clearTimeout(e);
         }
-      if (a === "guess") {
-        if (C <= 0) {
-          D(!0), M("wrong");
-          const s = o[f].name;
-          O((p) => [
-            ...p,
-            { round: x, answer: F, correct: s, result: "wrong" }
+      if (d === "guess") {
+        if (N <= 0) {
+          G(!0), H("wrong");
+          const o = S[y].name;
+          P((g) => [
+            ...g,
+            { round: r, answer: W, correct: o, result: "wrong" }
           ]);
           return;
         }
-        const e = setTimeout(() => H((s) => s - 1), 1e3);
+        const e = setTimeout(() => U((o) => o - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [a, k, T, C, w, L, R, o, f, x, F]);
-  const se = () => {
-    if (f === null || G) return;
-    const e = o[f].name, s = F.toLowerCase().trim();
-    let p = "wrong";
-    s === e ? (N((h) => h + 1), M("correct"), p = "correct") : we(s, e) === 1 ? (N((h) => h + 0.5), M("almost"), p = "almost") : (M("wrong"), p = "wrong"), O((h) => [...h, { round: x, answer: s, correct: e, result: p }]), q(!0), setTimeout(() => {
-      q(!1), D(!0);
+  }, [d, T, j, N, x, A, R, S, y, r, W]);
+  const me = () => {
+    if (y === null || D) return;
+    const e = S[y].name, o = W.toLowerCase().trim();
+    let g = "wrong";
+    o === e ? ($((l) => l + 1), H("correct"), g = "correct") : Ee(o, e) === 1 ? ($((l) => l + 0.5), H("almost"), g = "almost") : (H("wrong"), g = "wrong"), P((l) => [...l, { round: r, answer: o, correct: e, result: g }]), J(!0), setTimeout(() => {
+      J(!1), G(!0);
     }, 600);
-  }, le = () => x < i ? (v((e) => e + 1), Q()) : j(!0), ae = () => {
-    z(!1), j(!1), m(null);
-  }, de = me(
+  }, ue = () => r < C ? (b((e) => e + 1), oe()) : O(!0), ge = () => {
+    I(!1), O(!1), s(null);
+  }, he = ve(
     () => (
       // ensure logo is positioned inside the square container
-      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ c("picture", { children: [
+      /* @__PURE__ */ t("div", { style: { ...n.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: /* @__PURE__ */ m("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" })
       ] }) })
@@ -391,59 +414,64 @@ function Se() {
   return /* @__PURE__ */ t(
     "div",
     {
-      ref: l,
+      ref: a,
       style: {
-        width: "100%",
-        height: "100vh",
+        // center relative to viewport so site layout doesn't push the game off-center
+        position: "fixed",
+        inset: 0,
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
         background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
         transition: "background 0.3s ease",
-        overflowX: "clip"
+        overflow: "hidden",
+        zIndex: 9999,
+        pointerEvents: "auto"
       },
       children: /* @__PURE__ */ t(
         "div",
         {
+          ref: f,
           style: {
-            width: b ? "100%" : U || 1e3,
-            height: b ? "100%" : U || 1e3,
+            width: w ? "100%" : L ? `${L}px` : "1000px",
+            height: w ? "100%" : L ? `${L}px` : "1000px",
+            maxWidth: "calc(100vw - 24px)",
+            maxHeight: "calc(100vh - 24px)",
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             overflow: "hidden",
-            borderRadius: b ? 0 : "20px",
+            borderRadius: w ? 0 : "20px",
             background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
-            boxShadow: b ? "none" : "0 0 40px rgba(0,0,0,0.1)",
-            margin: b ? "0 auto" : "unset",
+            boxShadow: w ? "none" : "0 0 40px rgba(0,0,0,0.08)",
             position: "relative"
-            // needed so absolute logo is inside the square
           },
           children: /* @__PURE__ */ t(
             "div",
             {
               style: {
                 transform: "none",
+                transformOrigin: "50% 50%",
                 width: "100%",
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ c("div", { id: "whats-missing-root", children: [
-                !b && de,
-                !g && !w && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
+              children: /* @__PURE__ */ m("div", { id: "whats-missing-root", children: [
+                !w && he,
+                !u && !x && /* @__PURE__ */ m("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: () => m(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
-                  /* @__PURE__ */ c("div", { style: { marginTop: 24 }, children: [
+                  /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ t("button", { style: n.gmButton, onClick: () => s(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+                  /* @__PURE__ */ m("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: {
                           ...n.gmButton,
-                          ...i === e ? n.gmButtonActive : {}
+                          ...C === e ? n.gmButtonActive : {}
                         },
                         onClick: () => E(e),
                         children: e
@@ -452,47 +480,47 @@ function Se() {
                     )) })
                   ] })
                 ] }),
-                g && !w && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
-                  /* @__PURE__ */ c("h1", { style: n.gmHeadline1, children: [
+                u && !x && /* @__PURE__ */ m("div", { style: n.gmCenterScreen, children: [
+                  /* @__PURE__ */ m("h1", { style: n.gmHeadline1, children: [
                     "Theme selected: ",
-                    g
+                    u
                   ] }),
-                  /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
+                  /* @__PURE__ */ m("p", { style: n.gmBodyM, children: [
                     "Rounds: ",
-                    i
+                    C
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "▶ Start game" })
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ne, children: "▶ Start game" })
                 ] }),
-                L && /* @__PURE__ */ c("div", { style: n.gmCenterScreen, children: [
+                A && /* @__PURE__ */ m("div", { style: n.gmCenterScreen, children: [
                   /* @__PURE__ */ t("h1", { style: n.gmHeadline1, children: "Results" }),
-                  /* @__PURE__ */ c("h2", { style: n.gmHeadline3, children: [
+                  /* @__PURE__ */ m("h2", { style: n.gmHeadline3, children: [
                     "Your score: ",
-                    ne,
+                    le,
                     " / ",
-                    i
+                    C
                   ] }),
                   /* @__PURE__ */ t("p", { style: { ...n.gmBodyM, color: "#10b981", marginTop: 12 }, children: "Yahoo! You did it! 🍬✨" }),
-                  /* @__PURE__ */ c("table", { style: n.gmTable, children: [
-                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ c("tr", { children: [
+                  /* @__PURE__ */ m("table", { style: n.gmTable, children: [
+                    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ m("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: oe.map((e, s) => /* @__PURE__ */ c("tr", { children: [
+                    /* @__PURE__ */ t("tbody", { children: ae.map((e, o) => /* @__PURE__ */ m("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" })
-                    ] }, s)) })
+                    ] }, o)) })
                   ] }),
-                  /* @__PURE__ */ c("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "🔁 Play again" }),
-                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ae, children: "⬅️ Choose theme" })
+                  /* @__PURE__ */ m("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ne, children: "🔁 Play again" }),
+                    /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ge, children: "⬅️ Choose theme" })
                   ] })
                 ] }),
-                w && !L && /* @__PURE__ */ c("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ c(
+                x && !A && /* @__PURE__ */ m("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ m(
                     "div",
                     {
                       style: {
@@ -503,70 +531,79 @@ function Se() {
                         alignItems: "center"
                       },
                       children: [
-                        a === "ready" && /* @__PURE__ */ c(ce, { children: [
+                        d === "ready" && /* @__PURE__ */ m(we, { children: [
                           /* @__PURE__ */ t("h1", { style: { ...n.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
                           /* @__PURE__ */ t("div", { style: n.gmHourglass, children: "⏳" })
                         ] }),
-                        a === "memorize" && /* @__PURE__ */ c("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
+                        d === "memorize" && /* @__PURE__ */ m("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
                           "MEMORIZE (",
-                          T,
+                          j,
                           ")"
                         ] }),
-                        a === "guess" && !R && /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
+                        d === "guess" && !R && /* @__PURE__ */ m("p", { style: n.gmBodyM, children: [
                           "⏳ Time left: ",
-                          C,
+                          N,
                           "s"
                         ] })
                       ]
                     }
                   ),
-                  a !== "ready" && /* @__PURE__ */ t(
-                    "div",
-                    {
-                      style: {
-                        ...n.gmGrid,
-                        gridTemplateColumns: b ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-                        gridAutoRows: b ? "150px" : "210px",
-                        gap: b ? "12px" : "20px",
-                        justifyItems: "center"
-                      },
-                      children: o.map((e, s) => {
-                        const p = f === s && a === "guess" && !R;
-                        return /* @__PURE__ */ t(
-                          "div",
-                          {
-                            style: {
-                              ...n.gmCard,
-                              ...V === "correct" && f === s ? n.gmCorrect : {},
-                              ...V === "wrong" && f === s ? n.gmWrong : {}
-                            },
-                            children: !p && /* @__PURE__ */ t(
-                              "img",
-                              {
-                                src: e.src,
-                                alt: e.name,
-                                style: {
-                                  width: "100%",
-                                  height: "100%",
-                                  objectFit: "cover"
+                  d !== "ready" && (() => {
+                    const e = w ? 12 : 20, o = 32, g = h ?? L ?? (w ? 360 : 1e3), l = w ? 2 : 3, p = Math.max(
+                      90,
+                      Math.floor((g - o - e * (l - 1)) / l)
+                    );
+                    return /* @__PURE__ */ t(
+                      "div",
+                      {
+                        style: {
+                          ...n.gmGrid,
+                          gridTemplateColumns: `repeat(${l}, ${p}px)`,
+                          gridAutoRows: `${p}px`,
+                          gap: `${e}px`,
+                          justifyContent: "center",
+                          justifyItems: "center",
+                          padding: 8,
+                          boxSizing: "border-box"
+                        },
+                        children: S.map((v, z) => {
+                          const q = y === z && d === "guess" && !R;
+                          return /* @__PURE__ */ t(
+                            "div",
+                            {
+                              style: {
+                                ...n.gmCard,
+                                width: `${p}px`,
+                                height: `${p}px`,
+                                padding: w ? 8 : 10,
+                                boxSizing: "border-box",
+                                ...Q === "correct" && y === z ? n.gmCorrect : {},
+                                ...Q === "wrong" && y === z ? n.gmWrong : {}
+                              },
+                              children: !q && /* @__PURE__ */ t(
+                                "img",
+                                {
+                                  src: v.src,
+                                  alt: v.name,
+                                  style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
                                 }
-                              }
-                            )
-                          },
-                          s
-                        );
-                      })
-                    }
-                  ),
-                  /* @__PURE__ */ c("div", { style: { marginTop: 16, height: 80 }, children: [
-                    a === "guess" && !R && /* @__PURE__ */ c("div", { children: [
+                              )
+                            },
+                            z
+                          );
+                        })
+                      }
+                    );
+                  })(),
+                  /* @__PURE__ */ m("div", { style: { marginTop: 16, height: 80 }, children: [
+                    d === "guess" && !R && /* @__PURE__ */ m("div", { children: [
                       /* @__PURE__ */ t(
                         "input",
                         {
                           type: "text",
                           placeholder: "Type the missing word",
-                          value: F,
-                          onChange: (e) => $(e.target.value),
+                          value: W,
+                          onChange: (e) => K(e.target.value),
                           style: n.gmInput
                         }
                       ),
@@ -574,13 +611,13 @@ function Se() {
                         "button",
                         {
                           style: { ...n.gmButton, marginLeft: 8 },
-                          onClick: se,
-                          disabled: G,
-                          children: G ? "..." : "Check"
+                          onClick: me,
+                          disabled: D,
+                          children: D ? "..." : "Check"
                         }
                       )
                     ] }),
-                    R && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: le, children: "Next round" })
+                    R && /* @__PURE__ */ t("button", { type: "button", style: n.gmButton, onClick: ue, children: "Next round" })
                   ] })
                 ] })
               ] })
@@ -592,6 +629,6 @@ function Se() {
   );
 }
 export {
-  Se as Game,
-  ee as themes
+  Be as Game,
+  re as themes
 };

package/package.json

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

package/src/Game.styles.ts

@@ -25,7 +25,9 @@ export const styles: Record<string, CSSProperties> = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
-    minHeight: "100vh",
+    // use percent so the component fits inside the centered square container
+    // (100vh caused overflow on tablets because it measured the viewport, not the container)
+    minHeight: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -100,7 +102,8 @@ export const styles: Record<string, CSSProperties> = {
     position: "relative",
     width: "100%",
     maxWidth: "600px",
-    minHeight: "100vh",
+    // should fill the parent square, not the full viewport
+    minHeight: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -203,7 +206,8 @@ export const styles: Record<string, CSSProperties> = {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    height: "60vh",
+    // use percent so the wrapper scales with the container square
+    height: "60%",
     gap: "16px",
   },
 

package/src/Game.tsx

@@ -13,7 +13,7 @@ type RoundResult = {
 };
 
 
-// ✅ базовый reset
+// ✅ базовый reset (ограничен корнем игры)
 const globalReset = () => {
   const style = document.createElement("style");
   style.textContent = `
@@ -46,7 +46,6 @@ export function useNeutralizeBodyZoom(
   opts: { minDesktopWidth?: number; forceResize?: boolean } = { minDesktopWidth: 1200, forceResize: false }
 ) {
   const saved = useRef<Record<string, string | null> | null>(null);
-  // извлекаем значение, чтобы использовать в deps
   const minDesktopWidth = opts.minDesktopWidth ?? 1200;
   const forceResize = !!opts.forceResize;
 
@@ -57,26 +56,30 @@ export function useNeutralizeBodyZoom(
     const getBodyScale = (): number => {
       try {
         const body = document.body;
-        const cs = getComputedStyle(body) as CSSStyleDeclaration & {
-          zoom?: string;
-          webkitTransform?: string;
-          mozTransform?: string;
-        };
+        const cs = getComputedStyle(body) as CSSStyleDeclaration & { zoom?: string };
 
+        // 1) existing inline/computed zoom if present
         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 tf = cs.transform || cs.webkitTransform || cs.mozTransform;
-        if (tf && tf !== "none") {
-          const m = tf.match(/matrix\(([^)]+)\)/);
-          if (m) {
-            const parts = m[1].split(",").map((p) => parseFloat(p));
-            const a = parts[0];
-            if (a && !isNaN(a)) return a;
-          }
+        // 2) robust probe: insert a 100px element and measure its bounding rect.
+        //    This detects any effective visual scale applied to the page (transform on ancestors, UA scaling, etc).
+        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";
+        probe.style.pointerEvents = "none";
+        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 (e) {
         // ignore
@@ -109,17 +112,18 @@ export function useNeutralizeBodyZoom(
 
       const inv = 1 / scale;
 
-      // safer default: не трогаем width/height, только визуально инвертируем внутри.
-      // если нужен "flow" компенсации, включать forceResize: true
+      // safer default: только визуальная компенсация (не трогаем layout), опция forceResize включит width/height
       if (forceResize) {
         el.style.width = `${scale * 100}%`;
         el.style.height = `${scale * 100}%`;
       }
+
+      // масштабируем относительно центра, чтобы не сдвигать центрированный контент
+      el.style.transformOrigin = "50% 50%";
       el.style.transform = `scale(${inv})`;
-      el.style.transformOrigin = "top left";
       el.style.willChange = "transform";
 
-      if (typeof process !== "undefined" && process.env && process.env.NODE_ENV === "development") {
+      if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
         // eslint-disable-next-line no-console
         console.debug("[useNeutralizeBodyZoom] applied scale:", { scale, inv, forceResize });
       }
@@ -139,7 +143,7 @@ export function useNeutralizeBodyZoom(
       if (s.willChange === null) el.style.removeProperty("will-change");
       else el.style.willChange = s.willChange as string;
       saved.current = null;
-      if (process.env.NODE_ENV === "development") {
+      if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
         // eslint-disable-next-line no-console
         console.debug("[useNeutralizeBodyZoom] restored original styles");
       }
@@ -176,9 +180,12 @@ export function useNeutralizeBodyZoom(
 
 
 export default function Game() {
- const containerRef = useRef<HTMLDivElement | null>(null);
- useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1200, forceResize: false });
-
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  // ref на видимый квадрат (тот, что width/height выставлены в px или %)
+  const squareRef = useRef<HTMLDivElement | null>(null);
+  const [squareSize, setSquareSize] = useState<number | null>(null);
+   useNeutralizeBodyZoom(containerRef, { minDesktopWidth: 1200, forceResize: false });
+ 
 
  useEffect(() => {
    globalReset();
@@ -207,40 +214,80 @@ export default function Game() {
  const [resultsTable, setResultsTable] = useState<RoundResult[]>([]);
  const [usedHidden, setUsedHidden] = useState<string[]>([]);
  const [isMobile, setIsMobile] = useState(false);
- const [scale, setScale] = useState(1);
  const [containerSize, setContainerSize] = useState<number | null>(null);
 
+  // наблюдаем за реальным render-size квадрата — это даёт надежную базу для расчета карточек
+  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);
+      // init
+      setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
+    } catch (err) {
+      // ResizeObserver may not be available — fallback to initial measurement
+      setSquareSize(Math.round(Math.min(el.clientWidth, el.clientHeight)));
+    }
+    return () => {
+      if (ro) ro.disconnect();
+    };
+  }, [isMobile]);
+
 
  // ✅ адаптив под мобилки, планшеты и десктоп
  useEffect(() => {
-   const resize = () => {
-     const mobile = window.innerWidth < 768;
-     const tablet = window.innerWidth >= 768 && window.innerWidth < 1200;
-
-
-     // treat only phones as "mobile" so tablets use the desktop (square/centered) layout
-     setIsMobile(mobile);
-
-
-     if (mobile) {
-       // mobile: fluid full-width layout
-       setContainerSize(null);
-       setScale(1);
-     } else {
-       // tablets and desktops: fit into a centered square (max 1000)
-       const safeFactor = 0.97;
-       const maxSquare = 1000;
-       const available = Math.min(window.innerWidth, window.innerHeight);
-       const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
-       const finalSize = Math.min(sizePx, maxSquare);
-       setContainerSize(finalSize);
-       setScale(1);
-     }
-   };
-   resize();
-   window.addEventListener("resize", resize);
-   return () => window.removeEventListener("resize", resize);
- }, []);
+    const resize = () => {
+      const vv = (window as any).visualViewport;
+      const vw = vv ? Math.round(vv.width) : window.innerWidth;
+      const vh = vv ? Math.round(vv.height) : window.innerHeight;
+
+      // treat narrow screens as mobile; portrait tablets also considered mobile
+      const mobile = vw < 768 || (vw >= 768 && vw < 1200 && vh > vw);
+      setIsMobile(mobile);
+
+      if (mobile) {
+        setContainerSize(null);
+        return;
+      }
+
+      // tablets & desktop: conservative square
+      const safeFactor = 0.92; // leave margins for browser UI
+      const maxSquare = 1000;
+      const gutter = 40;
+      const availableW = Math.max(360, vw - gutter);
+      const availableH = Math.max(360, vh - gutter);
+      const available = Math.min(availableW, availableH);
+      const sizePx = Math.max(360, Math.round(available * safeFactor));
+      const finalSize = Math.min(sizePx, maxSquare);
+      setContainerSize(finalSize);
+    };
+
+    // run once
+    resize();
+
+    // listen to both window and visualViewport (if available) since some browsers update only visualViewport on zoom
+    window.addEventListener("resize", resize);
+    const vv = (window as any).visualViewport;
+    if (vv && typeof vv.addEventListener === "function") {
+      vv.addEventListener("resize", resize);
+      vv.addEventListener("scroll", resize);
+    }
+
+    return () => {
+      window.removeEventListener("resize", resize);
+      if (vv && typeof vv.removeEventListener === "function") {
+        vv.removeEventListener("resize", resize);
+        vv.removeEventListener("scroll", resize);
+      }
+    };
+  }, []);
 
 
  const getRandomSix = (arr: ImageItem[]) =>
@@ -377,34 +424,41 @@ export default function Game() {
    <div
      ref={containerRef}
      style={{
-       width: "100%",
-       height: "100vh",
+       // center relative to viewport so site layout doesn't push the game off-center
+       position: "fixed",
+       inset: 0,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
        transition: "background 0.3s ease",
-       overflowX: "clip"
+       overflow: "hidden",
+       zIndex: 9999,
+       pointerEvents: "auto",
      }}
    >
      <div
+       // visible square that should fit on tablets
+       ref={squareRef}
        style={{
-         width: isMobile ? "100%" : containerSize || 1000,
-         height: isMobile ? "100%" : containerSize || 1000,
+         width: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
+         height: isMobile ? "100%" : containerSize ? `${containerSize}px` : "1000px",
+         maxWidth: "calc(100vw - 24px)",
+         maxHeight: "calc(100vh - 24px)",
          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
+         boxShadow: isMobile ? "none" : "0 0 40px rgba(0,0,0,0.08)",
+         position: "relative",
        }}
      >
        <div
          style={{
            transform: "none",
+           transformOrigin: "50% 50%",
            width: "100%",
            height: "100%",
            display: "flex",
@@ -523,50 +577,58 @@ export default function Game() {
                    <p style={styles.gmBodyM}>⏳ Time left: {timeLeft}s</p>
                  )}
                </div>
-               {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>
-               )}
+               {phase !== "ready" && (() => {
+                 // compute card size from real measured square size (fallback to containerSize)
+                 const gap = isMobile ? 12 : 20;
+                 const innerGutters = 32; // logo / paddings estimation
+                 const effective = squareSize ?? containerSize ?? (isMobile ? 360 : 1000);
+                 const columns = isMobile ? 2 : 3;
+                 const cardSize = Math.max(
+                   90,
+                   Math.floor((effective - innerGutters - gap * (columns - 1)) / columns)
+                 );
+
+                 return (
+                   <div
+                     style={{
+                       ...styles.gmGrid,
+                       gridTemplateColumns: `repeat(${columns}, ${cardSize}px)`,
+                       gridAutoRows: `${cardSize}px`,
+                       gap: `${gap}px`,
+                       justifyContent: "center",
+                       justifyItems: "center",
+                       padding: 8,
+                       boxSizing: "border-box",
+                     }}
+                   >
+                     {files.map((file, i) => {
+                       const isHidden = hiddenIndex === i && phase === "guess" && !answered;
+                       return (
+                         <div
+                           key={i}
+                           style={{
+                             ...styles.gmCard,
+                             width: `${cardSize}px`,
+                             height: `${cardSize}px`,
+                             padding: isMobile ? 8 : 10,
+                             boxSizing: "border-box",
+                             ...(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", display: "block" }}
+                             />
+                           )}
+                         </div>
+                       );
+                     })}
+                   </div>
+                 );
+               })()}
                <div style={{ marginTop: 16, height: 80 }}>
                  {phase === "guess" && !answered && (
                    <div>