@mblinkov/whats-missing 20.0.21 → 20.0.23

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"),r=require("react"),ce=window.origin+"/cloud/speakid/games/whatsmissing/",D=(a,m)=>a.map(([c,s])=>({src:`${ce}${m}/${s.replace(/\s/g,"%20")}.png`,name:s})),me=[["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"]],ue=[["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"]],ge=[["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(me,"food"),animals:D(ue,"animals"),toys:D(ge,"toys")},he=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),xe=window.origin+"/cloud/speakid/games/whatsmissing/",q=(a,f)=>a.map(([g,i])=>({src:`${xe}${f}/${i.replace(/\s/g,"%20")}.png`,name:i})),be=[["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"]],we=[["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"]],ve=[["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(be,"food"),animals:q(we,"animals"),toys:q(ve,"toys")},je=`
   @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=he,document.head.appendChild(a)}const fe={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",...fe}},pe=()=>{const a=document.createElement("style");a.textContent=`
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=je,document.head.appendChild(a)}const Se={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",...Se}},ze=()=>{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(a)},ye=(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 xe(a,m={minDesktopWidth:1200,forceResize:!1}){const c=r.useRef(null),s=m.minDesktopWidth??1200,u=!!m.forceResize;r.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const l=a.current,A=()=>{try{const i=document.body,d=getComputedStyle(i),p=parseFloat(i.style&&i.style.zoom||"");if(p&&!isNaN(p)&&p>0)return p;const v=parseFloat(d.zoom||"");if(v&&!isNaN(v)&&v>0)return v;const k=d.transform||d.webkitTransform||d.mozTransform;if(k&&k!=="none"){const z=k.match(/matrix\(([^)]+)\)/);if(z){const j=z[1].split(",").map(E=>parseFloat(E))[0];if(j&&!isNaN(j))return j}}}catch{}return 1},b=()=>{if(s&&window.innerWidth<s){S();return}const i=A();if(!i||i===1){S();return}c.current||(c.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 d=1/i;u&&(l.style.width=`${i*100}%`,l.style.height=`${i*100}%`),l.style.transform=`scale(${d})`,l.style.transformOrigin="top left",l.style.willChange="transform",typeof process<"u"&&process.env&&process.env.NODE_ENV==="development"&&console.debug("[useNeutralizeBodyZoom] applied scale:",{scale:i,inv:d,forceResize:u})},S=()=>{if(!c.current)return;const i=c.current;i.transform===null?l.style.removeProperty("transform"):l.style.transform=i.transform,i.transformOrigin===null?l.style.removeProperty("transform-origin"):l.style.transformOrigin=i.transformOrigin,i.width===null?l.style.removeProperty("width"):l.style.width=i.width,i.height===null?l.style.removeProperty("height"):l.style.height=i.height,i.willChange===null?l.style.removeProperty("will-change"):l.style.willChange=i.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(i=>{for(const d of i)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 be(){const a=r.useRef(null);xe(a,{minDesktopWidth:1200,forceResize:!1}),r.useEffect(()=>(pe(),()=>{document.body.style.overflow=""}),[]);const[m,c]=r.useState(null),[s,u]=r.useState([]),[l,A]=r.useState(4),[b,S]=r.useState(!1),[x,w]=r.useState(1),[f,i]=r.useState(null),[d,p]=r.useState("ready"),[v,k]=r.useState(3),[z,M]=r.useState(10),[j,E]=r.useState(20),[Q,H]=r.useState(0),[L,F]=r.useState(!1),[B,q]=r.useState(""),[C,W]=r.useState(!1),[N,V]=r.useState(!1),[Y,I]=r.useState(null),[ee,G]=r.useState([]),[te,$]=r.useState([]),[y,ne]=r.useState(!1),[we,Z]=r.useState(1),[_,U]=r.useState(null);r.useEffect(()=>{const t=()=>{const g=window.visualViewport,h=g?Math.round(g.width):window.innerWidth,T=g?Math.round(g.height):window.innerHeight,R=h<768;if(ne(R),R)U(null),Z(1);else{const le=Math.min(h,T),ae=Math.max(360,Math.round(le*.97)),de=Math.min(ae,1e3);U(de),Z(1)}};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 K=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),X=()=>{if(!m)return;const t=K(P[m]);u(t),S(!0),F(!1),w(1),H(0),G([]),$([]),J(t,[],!0)},J=(t=s,o=te,g=!1)=>{const h=K(t.length?t:P[m]);let T=Math.floor(Math.random()*h.length),R=h[T].name,O=0;for(;o.includes(R)&&O<20;)T=Math.floor(Math.random()*h.length),R=h[T].name,O++;u(h),i(T),$([...o,R]),W(!1),q(""),E(20),I(null),g?(p("ready"),k(3),M(10)):(p("memorize"),M(10))};r.useEffect(()=>{if(!(!b||L||C)){if(d==="ready")if(v<=0)p("memorize");else{const t=setTimeout(()=>k(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(z<=0)p("guess");else{const t=setTimeout(()=>M(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(j<=0){W(!0),I("wrong");const o=s[f].name;G(g=>[...g,{round:x,answer:B,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>E(o=>o-1),1e3);return()=>clearTimeout(t)}}},[d,v,z,j,b,L,C,s,f,x,B]);const se=()=>{if(f===null||N)return;const t=s[f].name,o=B.toLowerCase().trim();let g="wrong";o===t?(H(h=>h+1),I("correct"),g="correct"):ye(o,t)===1?(H(h=>h+.5),I("almost"),g="almost"):(I("wrong"),g="wrong"),G(h=>[...h,{round:x,answer:o,correct:t,result:g}]),V(!0),setTimeout(()=>{V(!1),W(!0)},600)},oe=()=>x<l?(w(t=>t+1),J()):F(!0),re=()=>{S(!1),F(!1),c(null)},ie=r.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,...l===t?n.gmButtonActive:{}},onClick:()=>A(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: ",l]}),e.jsx("button",{style:n.gmButton,onClick:X,children:"▶ Start game"})]}),L&&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," / ",l]}),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,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:X,children:"🔁 Play again"}),e.jsx("button",{style:n.gmButton,onClick:re,children:"⬅️ Choose theme"})]})]}),b&&!L&&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 (",z,")"]}),d==="guess"&&!C&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",j,"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,o)=>{const g=f===o&&d==="guess"&&!C;return e.jsx("div",{style:{...n.gmCard,...Y==="correct"&&f===o?n.gmCorrect:{},...Y==="wrong"&&f===o?n.gmWrong:{}},children:!g&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},o)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!C&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:B,onChange:t=>q(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:se,disabled:N,children:N?"...":"Check"})]}),C&&e.jsx("button",{type:"button",style:n.gmButton,onClick:oe,children:"Next round"})]})]})]})})})})}exports.Game=be;exports.themes=P;
+  `,document.head.appendChild(a)},Ce=(a,f)=>{const g=Array.from({length:a.length+1},()=>Array(f.length+1).fill(0));for(let i=0;i<=a.length;i++)g[i][0]=i;for(let i=0;i<=f.length;i++)g[0][i]=i;for(let i=1;i<=a.length;i++)for(let u=1;u<=f.length;u++)g[i][u]=a[i-1]===f[u-1]?g[i-1][u-1]:Math.min(g[i-1][u-1],g[i][u-1],g[i-1][u])+1;return g[a.length][f.length]};function ke(a,f={minDesktopWidth:1200,forceResize:!1}){const g=s.useRef(null),i=f.minDesktopWidth??1200,u=!!f.forceResize;s.useLayoutEffect(()=>{if(typeof window>"u"||!a||!a.current)return;const l=a.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 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 j=d.getBoundingClientRect();if(document.documentElement.removeChild(d),j&&j.width>0){const k=j.width/100;if(!isNaN(k)&&k>0)return k}}catch{}return 1},L=()=>{if(i&&window.innerWidth<i){v();return}const r=z();if(!r||r===1){v();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;u&&(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:u})},v=()=>{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 R=0;const x=()=>{cancelAnimationFrame(R),R=requestAnimationFrame(L)},M=new MutationObserver(r=>{for(const y of r)if(y.type==="attributes"&&(y.attributeName==="style"||y.attributeName==="class")){x();break}});return M.observe(document.body,{attributes:!0,attributeFilter:["style","class"]}),window.addEventListener("resize",x),x(),()=>{cancelAnimationFrame(R),M.disconnect(),window.removeEventListener("resize",x),v()}},[a,i,u])}function Te(){const a=s.useRef(null),f=s.useRef(null),[g,i]=s.useState(null);ke(a,{minDesktopWidth:1200,forceResize:!1}),s.useEffect(()=>(ze(),()=>{document.body.style.overflow=""}),[]);const[u,l]=s.useState(null),[z,L]=s.useState([]),[v,R]=s.useState(4),[x,M]=s.useState(!1),[r,y]=s.useState(1),[p,C]=s.useState(null),[d,j]=s.useState("ready"),[k,Y]=s.useState(3),[W,N]=s.useState(10),[F,_]=s.useState(20),[oe,O]=s.useState(0),[B,$]=s.useState(!1),[H,Z]=s.useState(""),[T,G]=s.useState(!1),[D,K]=s.useState(!1),[U,E]=s.useState(null),[se,P]=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(m=>{for(const c of m){const h=c.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 m=window.visualViewport,c=m?Math.round(m.width):window.innerWidth,h=m?Math.round(m.height):window.innerHeight,S=820,w=typeof navigator<"u"&&(navigator.maxTouchPoints>0||"ontouchstart"in window),A=c<=S||w&&h>c;if(re(A),A){Q(null);return}const ue=.88,me=1e3,ne=40,ge=Math.max(360,c-ne),he=Math.max(360,h-ne),fe=Math.min(ge,he),pe=Math.max(360,Math.round(fe*ue)),ye=Math.min(pe,me);Q(ye)};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(!u)return;const t=X(V[u]);L(t),M(!0),$(!1),y(1),O(0),P([]),J([]),te(t,[],!0)},te=(t=z,o=ie,m=!1)=>{const c=X(t.length?t:V[u]);let h=Math.floor(Math.random()*c.length),S=c[h].name,w=0;for(;o.includes(S)&&w<20;)h=Math.floor(Math.random()*c.length),S=c[h].name,w++;L(c),C(h),J([...o,S]),G(!1),Z(""),_(20),E(null),m?(j("ready"),Y(3),N(10)):(j("memorize"),N(10))};s.useEffect(()=>{if(!(!x||B||T)){if(d==="ready")if(k<=0)j("memorize");else{const t=setTimeout(()=>Y(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="memorize")if(W<=0)j("guess");else{const t=setTimeout(()=>N(o=>o-1),1e3);return()=>clearTimeout(t)}if(d==="guess"){if(F<=0){G(!0),E("wrong");const o=z[p].name;P(m=>[...m,{round:r,answer:H,correct:o,result:"wrong"}]);return}const t=setTimeout(()=>_(o=>o-1),1e3);return()=>clearTimeout(t)}}},[d,k,W,F,x,B,T,z,p,r,H]);const le=()=>{if(p===null||D)return;const t=z[p].name,o=H.toLowerCase().trim();let m="wrong";o===t?(O(c=>c+1),E("correct"),m="correct"):Ce(o,t)===1?(O(c=>c+.5),E("almost"),m="almost"):(E("wrong"),m="wrong"),P(c=>[...c,{round:r,answer:o,correct:t,result:m}]),K(!0),setTimeout(()=>{K(!1),G(!0)},600)},ae=()=>r<v?(y(t=>t+1),te()):$(!0),de=()=>{M(!1),$(!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:a,style:{position:"absolute",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:1,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 - 40px)",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,!u&&!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,...v===t?n.gmButtonActive:{}},onClick:()=>R(t),children:t},t))})]})]}),u&&!x&&e.jsxs("div",{style:n.gmCenterScreen,children:[e.jsxs("h1",{style:n.gmHeadline1,children:["Theme selected: ",u]}),e.jsxs("p",{style:n.gmBodyM,children:["Rounds: ",v]}),e.jsx("button",{style:n.gmButton,onClick:ee,children:"▶ Start game"})]}),B&&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," / ",v]}),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&&!B&&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 (",W,")"]}),d==="guess"&&!T&&e.jsxs("p",{style:n.gmBodyM,children:["⏳ Time left: ",F,"s"]})]}),d!=="ready"&&(()=>{const t=b?12:20,o=32,m=g??I??(b?360:1e3),c=b?2:3,h=Math.max(90,Math.floor((m-o-t*(c-1))/c));return e.jsx("div",{style:{...n.gmGrid,gridTemplateColumns:`repeat(${c}, ${h}px)`,gridAutoRows:`${h}px`,gap:`${t}px`,justifyContent:"center",justifyItems:"center",padding:8,boxSizing:"border-box"},children:z.map((S,w)=>{const A=p===w&&d==="guess"&&!T;return e.jsx("div",{style:{...n.gmCard,width:`${h}px`,height:`${h}px`,padding:b?8:10,boxSizing:"border-box",...U==="correct"&&p===w?n.gmCorrect:{},...U==="wrong"&&p===w?n.gmWrong:{}},children:!A&&e.jsx("img",{src:S.src,alt:S.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})},w)})})})(),e.jsxs("div",{style:{marginTop:16,height:80},children:[d==="guess"&&!T&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:H,onChange:t=>Z(t.target.value),style:n.gmInput}),e.jsx("button",{style:{...n.gmButton,marginLeft:8},onClick:le,disabled:D,children:D?"...":"Check"})]}),T&&e.jsx("button",{type:"button",style:n.gmButton,onClick:ae,children:"Next round"})]})]})]})})})})}exports.Game=Te;exports.themes=V;

package/dist/whats-missing.es.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as c, Fragment as ue } from "react/jsx-runtime";
-import { useRef as te, useEffect as P, useState as d, useMemo as he, useLayoutEffect as fe } from "react";
-const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l.map(([m, o]) => ({
-  src: `${pe}${g}/${o.replace(/\s/g, "%20")}.png`,
-  name: o
-})), ye = [
+import { jsx as t, jsxs as m, Fragment as ze } from "react/jsx-runtime";
+import { useRef as _, useState as c, useEffect as V, useLayoutEffect as se, useMemo as Ce } from "react";
+const ke = window.origin + "/cloud/speakid/games/whatsmissing/", Y = (l, f) => l.map(([h, i]) => ({
+  src: `${ke}${f}/${i.replace(/\s/g, "%20")}.png`,
+  name: i
+})), Se = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -29,7 +29,7 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], be = [
+], Te = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -49,7 +49,7 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], we = [
+], Me = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -69,11 +69,11 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ee = {
-  food: V(ye, "food"),
-  animals: V(be, "animals"),
-  toys: V(we, "toys")
-}, xe = `
+], re = {
+  food: Y(Se, "food"),
+  animals: Y(Te, "animals"),
+  toys: Y(Me, "toys")
+}, Re = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
@@ -81,9 +81,9 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", V = (l, g) => l
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
   const l = document.createElement("style");
-  l.id = "spin-keyframes", l.innerHTML = xe, document.head.appendChild(l);
+  l.id = "spin-keyframes", l.innerHTML = Re, document.head.appendChild(l);
 }
-const ve = {
+const Ee = {
   animation: "spin 1.4s linear infinite"
 }, n = {
   gmCenterScreen: {
@@ -236,159 +236,175 @@ const ve = {
   },
   gmHourglass: {
     fontSize: "42px",
-    ...ve
+    ...Ee
   }
-}, ke = () => {
+}, Ie = () => {
   const l = document.createElement("style");
   l.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);
-}, ze = (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];
+}, Be = (l, f) => {
+  const h = Array.from({ length: l.length + 1 }, () => Array(f.length + 1).fill(0));
+  for (let i = 0; i <= l.length; i++) h[i][0] = i;
+  for (let i = 0; i <= f.length; i++) h[0][i] = i;
+  for (let i = 1; i <= l.length; i++)
+    for (let u = 1; u <= f.length; u++)
+      h[i][u] = l[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[l.length][f.length];
 };
-function Ce(l, g = { minDesktopWidth: 1200, forceResize: !1 }) {
-  const m = te(null), o = g.minDesktopWidth ?? 1200, u = !!g.forceResize;
-  fe(() => {
+function Le(l, f = { minDesktopWidth: 1200, forceResize: !1 }) {
+  const h = _(null), i = f.minDesktopWidth ?? 1200, u = !!f.forceResize;
+  se(() => {
     if (typeof window > "u" || !l || !l.current) return;
-    const s = l.current, F = () => {
+    const s = l.current, S = () => {
       try {
-        const i = document.body, a = getComputedStyle(i), y = parseFloat(i.style && i.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 z = T[1].split(",").map((E) => parseFloat(E))[0];
-            if (z && !isNaN(z)) return z;
-          }
+        const T = parseFloat(b.zoom || "");
+        if (T && !isNaN(T) && T > 0) return T;
+        const a = document.createElement("div");
+        a.style.position = "absolute", a.style.left = "0", a.style.top = "0", a.style.width = "100px", a.style.height = "1px", a.style.visibility = "hidden", a.style.pointerEvents = "none", document.documentElement.appendChild(a);
+        const C = a.getBoundingClientRect();
+        if (document.documentElement.removeChild(a), C && C.width > 0) {
+          const M = C.width / 100;
+          if (!isNaN(M) && M > 0) return M;
         }
       } catch {
       }
       return 1;
-    }, x = () => {
-      if (o && window.innerWidth < o) {
-        C();
+    }, H = () => {
+      if (i && window.innerWidth < i) {
+        z();
         return;
       }
-      const i = F();
-      if (!i || i === 1) {
-        C();
+      const r = S();
+      if (!r || r === 1) {
+        z();
         return;
       }
-      m.current || (m.current = {
+      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 / i;
-      u && (s.style.width = `${i * 100}%`, s.style.height = `${i * 100}%`), s.style.transform = `scale(${a})`, s.style.transformOrigin = "top left", s.style.willChange = "transform", typeof process < "u" && process.env && process.env.NODE_ENV === "development" && console.debug("[useNeutralizeBodyZoom] applied scale:", { scale: i, inv: a, forceResize: u });
-    }, C = () => {
-      if (!m.current) return;
-      const i = m.current;
-      i.transform === null ? s.style.removeProperty("transform") : s.style.transform = i.transform, i.transformOrigin === null ? s.style.removeProperty("transform-origin") : s.style.transformOrigin = i.transformOrigin, i.width === null ? s.style.removeProperty("width") : s.style.width = i.width, i.height === null ? s.style.removeProperty("height") : s.style.height = i.height, i.willChange === null ? s.style.removeProperty("will-change") : s.style.willChange = i.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 });
+    }, z = () => {
+      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 w = 0;
-    const v = () => {
-      cancelAnimationFrame(w), w = requestAnimationFrame(x);
-    }, p = new MutationObserver((i) => {
-      for (const a of i)
-        if (a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class")) {
-          v();
+    let E = 0;
+    const x = () => {
+      cancelAnimationFrame(E), E = requestAnimationFrame(H);
+    }, I = new MutationObserver((r) => {
+      for (const b of r)
+        if (b.type === "attributes" && (b.attributeName === "style" || b.attributeName === "class")) {
+          x();
           break;
         }
     });
-    return p.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", v), v(), () => {
-      cancelAnimationFrame(w), p.disconnect(), window.removeEventListener("resize", v), C();
+    return I.observe(document.body, { attributes: !0, attributeFilter: ["style", "class"] }), window.addEventListener("resize", x), x(), () => {
+      cancelAnimationFrame(E), I.disconnect(), window.removeEventListener("resize", x), z();
     };
-  }, [l, o, u]);
+  }, [l, i, u]);
 }
-function Me() {
-  const l = te(null);
-  Ce(l, { minDesktopWidth: 1200, forceResize: !1 }), P(() => (ke(), () => {
+function We() {
+  const l = _(null), f = _(null), [h, i] = c(null);
+  Le(l, { minDesktopWidth: 1200, forceResize: !1 }), V(() => (Ie(), () => {
     document.body.style.overflow = "";
   }), []);
-  const [g, m] = d(null), [o, u] = d([]), [s, F] = d(4), [x, C] = d(!1), [w, v] = d(1), [p, i] = d(null), [a, y] = d("ready"), [k, S] = d(3), [T, B] = d(10), [z, E] = d(20), [ne, W] = d(0), [A, N] = d(!1), [H, Y] = d(""), [R, j] = d(!1), [D, $] = d(!1), [q, L] = d(null), [oe, G] = d([]), [re, Z] = d([]), [b, ie] = d(!1), [Se, _] = d(1), [U, K] = d(null);
-  P(() => {
+  const [u, s] = c(null), [S, H] = c([]), [z, E] = c(4), [x, I] = c(!1), [r, b] = c(1), [y, T] = c(null), [a, C] = c("ready"), [M, Z] = c(3), [j, F] = c(10), [O, K] = c(20), [le, $] = c(0), [A, D] = c(!1), [W, U] = c(""), [R, G] = c(!1), [P, J] = c(!1), [Q, B] = c(null), [ae, q] = 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 d of g) {
+          const p = d.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 h = window.visualViewport, f = h ? Math.round(h.width) : window.innerWidth, I = h ? Math.round(h.height) : window.innerHeight, M = f < 768;
-      if (ie(M), M)
-        K(null), _(1);
-      else {
-        const ce = Math.min(f, I), me = Math.max(360, Math.round(ce * 0.97)), ge = Math.min(me, 1e3);
-        K(ge), _(1);
+      const g = window.visualViewport, d = g ? Math.round(g.width) : window.innerWidth, p = g ? Math.round(g.height) : window.innerHeight, k = 820, v = typeof navigator < "u" && (navigator.maxTouchPoints > 0 || "ontouchstart" in window), N = d <= k || v && p > d;
+      if (ce(N), N) {
+        ee(null);
+        return;
       }
+      const pe = 0.88, fe = 1e3, ie = 40, ye = Math.max(360, d - ie), be = Math.max(360, p - ie), xe = Math.min(ye, be), we = Math.max(360, Math.round(xe * pe)), ve = Math.min(we, fe);
+      ee(ve);
     };
     e(), window.addEventListener("resize", e);
-    const r = window.visualViewport;
-    return r && typeof r.addEventListener == "function" && (r.addEventListener("resize", e), r.addEventListener("scroll", e)), () => {
-      window.removeEventListener("resize", e), r && typeof r.removeEventListener == "function" && (r.removeEventListener("resize", e), r.removeEventListener("scroll", 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));
     };
   }, []);
-  const X = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), J = () => {
-    if (!g) return;
-    const e = X(ee[g]);
-    u(e), C(!0), N(!1), v(1), W(0), G([]), Z([]), Q(e, [], !0);
-  }, Q = (e = o, r = re, h = !1) => {
-    const f = X(e.length ? e : ee[g]);
-    let I = Math.floor(Math.random() * f.length), M = f[I].name, O = 0;
-    for (; r.includes(M) && O < 20; )
-      I = Math.floor(Math.random() * f.length), M = f[I].name, O++;
-    u(f), i(I), Z([...r, M]), j(!1), Y(""), E(20), L(null), h ? (y("ready"), S(3), B(10)) : (y("memorize"), B(10));
+  const te = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), ne = () => {
+    if (!u) return;
+    const e = te(re[u]);
+    H(e), I(!0), D(!1), b(1), $(0), q([]), X([]), oe(e, [], !0);
+  }, oe = (e = S, o = de, g = !1) => {
+    const d = te(e.length ? e : re[u]);
+    let p = Math.floor(Math.random() * d.length), k = d[p].name, v = 0;
+    for (; o.includes(k) && v < 20; )
+      p = Math.floor(Math.random() * d.length), k = d[p].name, v++;
+    H(d), T(p), X([...o, k]), G(!1), U(""), K(20), B(null), g ? (C("ready"), Z(3), F(10)) : (C("memorize"), F(10));
   };
-  P(() => {
+  V(() => {
     if (!(!x || A || R)) {
       if (a === "ready")
-        if (k <= 0) y("memorize");
+        if (M <= 0) C("memorize");
         else {
-          const e = setTimeout(() => S((r) => r - 1), 1e3);
+          const e = setTimeout(() => Z((o) => o - 1), 1e3);
           return () => clearTimeout(e);
         }
       if (a === "memorize")
-        if (T <= 0) y("guess");
+        if (j <= 0) C("guess");
         else {
-          const e = setTimeout(() => B((r) => r - 1), 1e3);
+          const e = setTimeout(() => F((o) => o - 1), 1e3);
           return () => clearTimeout(e);
         }
       if (a === "guess") {
-        if (z <= 0) {
-          j(!0), L("wrong");
-          const r = o[p].name;
-          G((h) => [
-            ...h,
-            { round: w, answer: H, correct: r, result: "wrong" }
+        if (O <= 0) {
+          G(!0), B("wrong");
+          const o = S[y].name;
+          q((g) => [
+            ...g,
+            { round: r, answer: W, correct: o, result: "wrong" }
           ]);
           return;
         }
-        const e = setTimeout(() => E((r) => r - 1), 1e3);
+        const e = setTimeout(() => K((o) => o - 1), 1e3);
         return () => clearTimeout(e);
       }
     }
-  }, [a, k, T, z, x, A, R, o, p, w, H]);
-  const se = () => {
-    if (p === null || D) return;
-    const e = o[p].name, r = H.toLowerCase().trim();
-    let h = "wrong";
-    r === e ? (W((f) => f + 1), L("correct"), h = "correct") : ze(r, e) === 1 ? (W((f) => f + 0.5), L("almost"), h = "almost") : (L("wrong"), h = "wrong"), G((f) => [...f, { round: w, answer: r, correct: e, result: h }]), $(!0), setTimeout(() => {
-      $(!1), j(!0);
+  }, [a, M, j, O, x, A, R, S, y, r, W]);
+  const me = () => {
+    if (y === null || P) return;
+    const e = S[y].name, o = W.toLowerCase().trim();
+    let g = "wrong";
+    o === e ? ($((d) => d + 1), B("correct"), g = "correct") : Be(o, e) === 1 ? ($((d) => d + 0.5), B("almost"), g = "almost") : (B("wrong"), g = "wrong"), q((d) => [...d, { round: r, answer: o, correct: e, result: g }]), J(!0), setTimeout(() => {
+      J(!1), G(!0);
     }, 600);
-  }, le = () => w < s ? (v((e) => e + 1), Q()) : N(!0), ae = () => {
-    C(!1), N(!1), m(null);
-  }, de = he(
+  }, ue = () => r < z ? (b((e) => e + 1), oe()) : D(!0), ge = () => {
+    I(!1), D(!1), s(null);
+  }, he = Ce(
     () => (
       // 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" })
       ] }) })
@@ -400,106 +416,111 @@ function Me() {
     {
       ref: l,
       style: {
-        width: "100%",
-        height: "100vh",
+        // center relative to viewport so site layout doesn't push the game off-center
+        position: "absolute",
+        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: 1,
+        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 - 40px)",
             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 && !x && /* @__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,
-                          ...s === e ? n.gmButtonActive : {}
+                          ...z === e ? n.gmButtonActive : {}
                         },
-                        onClick: () => F(e),
+                        onClick: () => E(e),
                         children: e
                       },
                       e
                     )) })
                   ] })
                 ] }),
-                g && !x && /* @__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: ",
-                    s
+                    z
                   ] }),
-                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: J, children: "▶ Start game" })
+                  /* @__PURE__ */ t("button", { style: n.gmButton, onClick: ne, children: "▶ Start game" })
                 ] }),
-                A && /* @__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,
                     " / ",
-                    s
+                    z
                   ] }),
                   /* @__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, r) => /* @__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" })
-                    ] }, r)) })
+                    ] }, 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" })
                   ] })
                 ] }),
-                x && !A && /* @__PURE__ */ c("div", { style: n.gmGameLayout, children: [
-                  /* @__PURE__ */ c(
+                x && !A && /* @__PURE__ */ m("div", { style: n.gmGameLayout, children: [
+                  /* @__PURE__ */ m(
                     "div",
                     {
                       style: {
@@ -510,70 +531,79 @@ function Me() {
                         alignItems: "center"
                       },
                       children: [
-                        a === "ready" && /* @__PURE__ */ c(ue, { children: [
+                        a === "ready" && /* @__PURE__ */ m(ze, { 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: [
+                        a === "memorize" && /* @__PURE__ */ m("p", { style: { ...n.gmBodyM, color: "#10b981" }, children: [
                           "MEMORIZE (",
-                          T,
+                          j,
                           ")"
                         ] }),
-                        a === "guess" && !R && /* @__PURE__ */ c("p", { style: n.gmBodyM, children: [
+                        a === "guess" && !R && /* @__PURE__ */ m("p", { style: n.gmBodyM, children: [
                           "⏳ Time left: ",
-                          z,
+                          O,
                           "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, r) => {
-                        const h = p === r && a === "guess" && !R;
-                        return /* @__PURE__ */ t(
-                          "div",
-                          {
-                            style: {
-                              ...n.gmCard,
-                              ...q === "correct" && p === r ? n.gmCorrect : {},
-                              ...q === "wrong" && p === r ? n.gmWrong : {}
-                            },
-                            children: !h && /* @__PURE__ */ t(
-                              "img",
-                              {
-                                src: e.src,
-                                alt: e.name,
-                                style: {
-                                  width: "100%",
-                                  height: "100%",
-                                  objectFit: "cover"
+                  a !== "ready" && (() => {
+                    const e = w ? 12 : 20, o = 32, g = h ?? L ?? (w ? 360 : 1e3), d = w ? 2 : 3, p = Math.max(
+                      90,
+                      Math.floor((g - o - e * (d - 1)) / d)
+                    );
+                    return /* @__PURE__ */ t(
+                      "div",
+                      {
+                        style: {
+                          ...n.gmGrid,
+                          gridTemplateColumns: `repeat(${d}, ${p}px)`,
+                          gridAutoRows: `${p}px`,
+                          gap: `${e}px`,
+                          justifyContent: "center",
+                          justifyItems: "center",
+                          padding: 8,
+                          boxSizing: "border-box"
+                        },
+                        children: S.map((k, v) => {
+                          const N = y === v && a === "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 === v ? n.gmCorrect : {},
+                                ...Q === "wrong" && y === v ? n.gmWrong : {}
+                              },
+                              children: !N && /* @__PURE__ */ t(
+                                "img",
+                                {
+                                  src: k.src,
+                                  alt: k.name,
+                                  style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
                                 }
-                              }
-                            )
-                          },
-                          r
-                        );
-                      })
-                    }
-                  ),
-                  /* @__PURE__ */ c("div", { style: { marginTop: 16, height: 80 }, children: [
-                    a === "guess" && !R && /* @__PURE__ */ c("div", { children: [
+                              )
+                            },
+                            v
+                          );
+                        })
+                      }
+                    );
+                  })(),
+                  /* @__PURE__ */ m("div", { style: { marginTop: 16, height: 80 }, children: [
+                    a === "guess" && !R && /* @__PURE__ */ m("div", { children: [
                       /* @__PURE__ */ t(
                         "input",
                         {
                           type: "text",
                           placeholder: "Type the missing word",
-                          value: H,
-                          onChange: (e) => Y(e.target.value),
+                          value: W,
+                          onChange: (e) => U(e.target.value),
                           style: n.gmInput
                         }
                       ),
@@ -581,13 +611,13 @@ function Me() {
                         "button",
                         {
                           style: { ...n.gmButton, marginLeft: 8 },
-                          onClick: se,
-                          disabled: D,
-                          children: D ? "..." : "Check"
+                          onClick: me,
+                          disabled: P,
+                          children: P ? "..." : "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" })
                   ] })
                 ] })
               ] })
@@ -599,6 +629,6 @@ function Me() {
   );
 }
 export {
-  Me as Game,
-  ee as themes
+  We as Game,
+  re as themes
 };

package/package.json

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

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,39 +214,65 @@ 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 = () => {
-      // Prefer visualViewport when available — it's more accurate under page zoom
       const vv = (window as any).visualViewport;
       const vw = vv ? Math.round(vv.width) : window.innerWidth;
       const vh = vv ? Math.round(vv.height) : window.innerHeight;
 
-      const mobile = vw < 768;
-      // tablet flag kept for possible future use
-      const tablet = vw >= 768 && vw < 1200;
+      // treat narrow screens as mobile.
+      // Also treat portrait tablets (iPad portrait) as mobile:
+      // - use a slightly larger mobile breakpoint (820px),
+      // - or if device is touch-capable and height > width (portrait).
+      const MOBILE_BREAKPOINT = 820;
+      const isTouchDevice = typeof navigator !== "undefined" && (navigator.maxTouchPoints > 0 || "ontouchstart" in window);
+      const mobile = vw <= MOBILE_BREAKPOINT || (isTouchDevice && vh > vw);
 
-      // 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(vw, vh);
-        const sizePx = Math.max(360, Math.round(available * safeFactor)); // don't go too small
-        const finalSize = Math.min(sizePx, maxSquare);
-        setContainerSize(finalSize);
-        setScale(1);
+        return;
       }
+
+      // tablets & desktop: conservative square
+      const safeFactor = 0.88; // 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
@@ -397,34 +430,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: "absolute",
+       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: 1,
+       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 - 40px)",
          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",
@@ -543,50 +583,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>