{"id":481,"date":"2026-03-25T20:39:23","date_gmt":"2026-03-25T20:39:23","guid":{"rendered":"https:\/\/mary-shelie.client-demo-websites.com\/?page_id=481"},"modified":"2026-05-05T00:47:27","modified_gmt":"2026-05-05T00:47:27","slug":"games-hub","status":"publish","type":"page","link":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/games-hub\/","title":{"rendered":"Games Hub"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"481\" class=\"elementor elementor-481\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f210eb e-flex e-con-boxed e-con e-parent\" data-id=\"9f210eb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4568620 elementor-widget elementor-widget-heading\" data-id=\"4568620\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Games Hub<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65d9b47 e-flex e-con-boxed e-con e-parent\" data-id=\"65d9b47\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d15219a animated-slow e-flex e-con-boxed elementor-invisible e-con e-child\" data-id=\"d15219a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-194b39e elementor-widget elementor-widget-heading\" data-id=\"194b39e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Time to Play!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa3fff6 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"fa3fff6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tTap in and start playing awesome games, tricky puzzles, and fun farm challenges. Every click brings a new adventure with Pinky and friends!\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d8359b5 e-con-full e-flex e-con e-child\" data-id=\"d8359b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7abe427 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"7abe427\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48d8a14 elementor-widget elementor-widget-image\" data-id=\"48d8a14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"337\" height=\"341\" src=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315856.png\" class=\"attachment-full size-full wp-image-536\" alt=\"\" srcset=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315856.png 337w, https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315856-296x300.png 296w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d0a855f e-con-full e-flex e-con e-child\" data-id=\"d0a855f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9fdf5a elementor-widget elementor-widget-heading\" data-id=\"d9fdf5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Match the Ranch Friends<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7c0228 elementor-widget elementor-widget-text-editor\" data-id=\"c7c0228\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tFlip cards, find pairs, and hear happy animal sounds!\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f36f75 elementor-widget elementor-widget-html\" data-id=\"9f36f75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<img decoding=\"async\" id=\"maze-game-btn\" src=\"\/wp-content\/uploads\/2026\/04\/Frame.png\" style=\"cursor:pointer;\">\r\n\r\n<div id=\"maze-modal\">\r\n  <div class=\"maze-modal-content\">\r\n    <span id=\"close-maze\">&times;<\/span>\r\n\r\n    <div id=\"game-wrapper\">\r\n      <div id=\"maze-frame\">\r\n        <div id=\"maze\"><\/div>\r\n\r\n        <!-- POPUP -->\r\n        <div id=\"mazePopup\" class=\"maze-popup\">\r\n          <div class=\"popup-box\">\r\n            <p id=\"mazePopupMsg\"><\/p>\r\n            <button id=\"mazePopupBtn\">OK<\/button>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n#maze-modal {\r\n  display:none; position:fixed; z-index:9999; left:0; top:0;\r\n  width:100%; height:100%; background:rgba(0,0,0,0.7);\r\n  justify-content:center; align-items:center;\r\n}\r\n\r\n.maze-modal-content {\r\n  background:#fff; padding:30px; border-radius:15px; position:relative;\r\n}\r\n\r\n#close-maze {\r\n  position:absolute; top:10px; right:15px; font-size:28px; cursor:pointer;\r\n}\r\n\r\n#game-wrapper { width:380px; text-align:center; }\r\n\r\n#maze-frame {\r\n  padding:15px;\r\n  border-radius:20px;\r\n  background:#7a4e2d;\r\n  position:relative;\r\n}\r\n\r\n\/* GRID *\/\r\n#maze {\r\n  width:350px; height:350px;\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:10px;\r\n}\r\n\r\n.cell {\r\n  position:relative;\r\n  background:#fff;\r\n  border-radius:10px;\r\n  cursor:pointer;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n.cell img {\r\n  width:70%;\r\n}\r\n\r\n\/* CHECK ICON *\/\r\n.check {\r\n  position:absolute;\r\n  top:5px;\r\n  right:5px;\r\n  background:#2ecc71;\r\n  color:#fff;\r\n  border-radius:50%;\r\n  width:22px;\r\n  height:22px;\r\n  font-size:14px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n\/* POPUP *\/\r\n.maze-popup {\r\n  position:absolute;\r\n  width:100%; height:100%;\r\n  top:0; left:0;\r\n  display:none;\r\n  justify-content:center;\r\n  align-items:center;\r\n  background:rgba(0,0,0,0.6);\r\n}\r\n\r\n.popup-box {\r\n  background:#fff;\r\n  padding:20px;\r\n  border-radius:10px;\r\n}\r\n\r\n.popup-box button {\r\n  margin-top:10px;\r\n  padding:6px 14px;\r\n  border:none;\r\n  background:#2ecc71;\r\n  color:#fff;\r\n  border-radius:6px;\r\n  cursor:pointer;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n #maze { height:300px !important; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ ===== IMAGES (9 total, with duplicates) =====\r\nconst images = [\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-4-3.png\",\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-3-1.png\",\r\n  \"\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_emqleoemqleoemql-1.png\",\r\n\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-4-3.png\",\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-3-1.png\",\r\n  \"\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_emqleoemqleoemql-1.png\",\r\n\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-4-3.png\",\r\n  \"\/wp-content\/uploads\/2026\/05\/Asset-3-1.png\",\r\n\r\n  \"\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_emqleoemqleoemql-1.png\" \/\/ extra one\r\n];\r\n\r\nlet first = null;\r\nlet second = null;\r\nlet lock = false;\r\n\r\nconst maze = document.getElementById(\"maze\");\r\n\r\n\/\/ POPUP\r\nconst popup = document.getElementById(\"mazePopup\");\r\nconst popupMsg = document.getElementById(\"mazePopupMsg\");\r\nconst popupBtn = document.getElementById(\"mazePopupBtn\");\r\n\r\npopupBtn.onclick = () => {\r\n  popup.style.display = \"none\";\r\n  startGame();\r\n};\r\n\r\nfunction showPopup(msg){\r\n  popupMsg.textContent = msg;\r\n  popup.style.display = \"flex\";\r\n}\r\n\r\n\/\/ ===== START GAME =====\r\nfunction startGame(){\r\n  maze.innerHTML = \"\";\r\n\r\n  const shuffled = [...images].sort(() => 0.5 - Math.random());\r\n\r\n  first = null;\r\n  second = null;\r\n  lock = false;\r\n\r\n  shuffled.forEach(src => {\r\n    const cell = document.createElement(\"div\");\r\n    cell.classList.add(\"cell\");\r\n\r\n    const img = document.createElement(\"img\");\r\n    img.src = src;\r\n\r\n    cell.appendChild(img);\r\n\r\n    cell.onclick = () => selectCard(cell, src);\r\n\r\n    maze.appendChild(cell);\r\n  });\r\n}\r\n\r\n\/\/ ===== GAME LOGIC =====\r\nfunction selectCard(cell, src){\r\n  if(lock) return;\r\n\r\n  \/\/ prevent selecting same cell twice\r\n  if(cell.querySelector(\".check\")) return;\r\n\r\n  \/\/ add check mark\r\n  const check = document.createElement(\"div\");\r\n  check.classList.add(\"check\");\r\n  check.innerHTML = \"\u2714\";\r\n  cell.appendChild(check);\r\n\r\n  if(!first){\r\n    first = {cell, src};\r\n    return;\r\n  }\r\n\r\n  second = {cell, src};\r\n  lock = true;\r\n\r\n  if(first.src === second.src){\r\n    setTimeout(() => {\r\n      showPopup(\"\ud83c\udf89 You Win!\");\r\n    }, 300);\r\n  } else {\r\n    setTimeout(() => {\r\n      showPopup(\"\u274c Wrong! Try Again\");\r\n    }, 300);\r\n  }\r\n}\r\n\r\n\/\/ ===== MODAL =====\r\nconst modal = document.getElementById(\"maze-modal\");\r\nconst openBtn = document.getElementById(\"maze-game-btn\");\r\nconst closeBtn = document.getElementById(\"close-maze\");\r\n\r\nopenBtn.onclick = () => { \r\n  modal.style.display=\"flex\"; \r\n  startGame();\r\n};\r\n\r\ncloseBtn.onclick = () => { modal.style.display=\"none\"; }\r\n\r\nwindow.onclick = (e) => { \r\n  if(e.target === modal) modal.style.display=\"none\"; \r\n};\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6216d8e e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"6216d8e\" data-element_type=\"container\" data-e-type=\"container\" id=\"maze-box\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6880f9 elementor-widget elementor-widget-image\" data-id=\"b6880f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"337\" height=\"341\" src=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315857.png\" class=\"attachment-full size-full wp-image-535\" alt=\"\" srcset=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315857.png 337w, https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315857-296x300.png 296w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c939d8c e-con-full e-flex e-con e-child\" data-id=\"c939d8c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9904d4f elementor-widget elementor-widget-heading\" data-id=\"9904d4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Spot the Ranch Secrets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae2255a elementor-widget elementor-widget-text-editor\" data-id=\"ae2255a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tFind hidden differences in fun ranch scenes!\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b92de2 elementor-widget elementor-widget-html\" data-id=\"0b92de2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- Open Button -->\r\n<img decoding=\"async\" id=\"openCanvas\" src=\"\/wp-content\/uploads\/2026\/04\/Frame.png\" style=\"cursor: pointer;\">\r\n\r\n<!-- Modal -->\r\n<div id=\"colorModal\" class=\"modal\">\r\n  <div class=\"modal-content\">\r\n\r\n    <span id=\"closeCanvas\" class=\"close\">&times;<\/span>\r\n\r\n    <div class=\"game-box\">\r\n      <!-- Frog -->\r\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/pngtree-cartoon-pink-pig-illustration-png-image_21143493-e1777915381773.png\" id=\"frog\">\r\n\r\n      <!-- GRID -->\r\n <div class=\"lily-grid\">\r\n\r\n        <!-- Row 0 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"0\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"1\" data-y=\"0\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"0\">\r\n        <img decoding=\"async\" class=\"lily\" data-x=\"3\" data-y=\"0\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"4\" data-y=\"0\">\r\n\r\n        <!-- Row 1 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"0\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"1\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"3\" data-y=\"1\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"4\" data-y=\"1\">\r\n\r\n        <!-- Row 2 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"0\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"1\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"2\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"3\" data-y=\"2\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"4\" data-y=\"2\">\r\n\r\n        <!-- Row 3 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"0\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"1\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"3\" data-y=\"3\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"4\" data-y=\"3\">\r\n\r\n        <!-- Row 4 -->\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/cartoon-mud-puddle-with-grass-vector-55931810-1.png\" class=\"lily\" data-x=\"0\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"1\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"2\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/139015041-traffic-road-realistic-prohibition-sign-isolated-on-a-white-transparent-background-red-crossed-1.png\" class=\"lily wrong\" data-x=\"3\" data-y=\"4\">\r\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/05\/images-1.png\" class=\"lily\" data-x=\"4\" data-y=\"4\" id=\"final-path\">\r\n\r\n      <\/div>\r\n\r\n      <!-- \ud83d\udd25 POPUP -->\r\n      <div id=\"gamePopup\" class=\"game-popup\">\r\n        <div class=\"popup-box\">\r\n          <p id=\"popupMessage\"><\/p>\r\n          <button id=\"popupBtn\">OK<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Controls -->\r\n    <div class=\"controls\">\r\n      <button id=\"up\">\u2191<\/button><br>\r\n      <button id=\"left\">\u2190<\/button>\r\n      <button id=\"down\">\u2193<\/button>\r\n      <button id=\"right\">\u2192<\/button>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.modal {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: 9999;\r\n  left: 0; top: 0;\r\n  width: 100%; height: 100%;\r\n  background: rgba(0,0,0,0.6);\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.modal-content {\r\n  padding: 20px;\r\n  border-radius: 10px;\r\n  text-align: center;\r\n  position: relative;\r\n  background-image: url(\/wp-content\/uploads\/2026\/05\/Mary-Shelie-4-1-e1777916092719.jpg);\r\n  background-size: cover;\r\n}\r\n\r\n.close {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 15px;\r\n  font-size: 25px;\r\n  cursor: pointer;\r\n}\r\n\r\n.game-box {\r\n  width: 420px;\r\n  height: 420px;\r\n  margin: 20px auto;\r\n  position: relative;\r\n}\r\nimg.lily.wrong {\r\n    width: 50px;\r\n    margin: 0 auto;\r\n}\r\n\/* Frog *\/\r\n#frog {\r\n  width: 80px;\r\n  position: absolute;\r\n  z-index: 10;\r\n  transition: .3s all;\r\n}\r\n\r\n\/* Jump *\/\r\n@keyframes frogJump {\r\n  0% {transform: translateY(0);}\r\n  30% {transform: translateY(-35px);}\r\n  100% {transform: translateY(0);}\r\n}\r\n.jump { animation: frogJump .35s; }\r\n\r\n\/* Grid *\/\r\n.lily-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(5,1fr);\r\n  grid-template-rows: repeat(5,1fr);\r\n  gap: 8px;\r\n  width: 100%; height: 100%;\r\n  \r\n}\r\n.lily { width: 100%; height: 100%; object-fit: contain;\r\n\r\n}\r\n\r\n\/* Controls *\/\r\n.controls button {\r\n  font-size: 20px;\r\n    padding: 10px;\r\n    margin: 3px;\r\n    cursor: pointer;\r\n    background: white;\r\n    color: black;\r\n    border: unset;\r\n}\r\n\r\n\/* \ud83d\udd25 POPUP *\/\r\n.game-popup {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  background: rgba(0,0,0,0.5);\r\n  z-index: 20;\r\n  top: 0;\r\n}\r\n\r\n.popup-box {\r\n  background: white;\r\n    padding: 20px;\r\n    border-radius: 10px;\r\n    animation: fade .3s;\r\n    width: 90%;\r\n    height: 270px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\np#popupMessage {\r\n    font-size: 30px;\r\n    font-weight: 600;\r\n}\r\nbutton#popupBtn {\r\n    background: #9c4f1f;\r\n    color: white;\r\n    border: unset;\r\n    width: 170px;\r\n}\r\n\r\n@keyframes fade {\r\n  from {opacity:0; transform:scale(.8);}\r\n  to {opacity:1; transform:scale(1);}\r\n}\r\n\r\n\r\n@media (max-width: 576px) {\r\n  .modal-content {\r\n    width: 90%  !important;\r\n}\r\n\r\n.game-box {\r\n    width: 300px  !important;\r\n    height: 330px  !important;\r\n}\r\n\r\n#frog {\r\n    width: 50px  !important;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n  const modal = document.getElementById(\"colorModal\");\r\n  const frog = document.getElementById(\"frog\");\r\n  const popup = document.getElementById(\"gamePopup\");\r\n  const popupMsg = document.getElementById(\"popupMessage\");\r\n  const popupBtn = document.getElementById(\"popupBtn\");\r\n\r\n  let posX = 0, posY = 0;\r\n\r\n  document.getElementById(\"openCanvas\").onclick = () => {\r\n    modal.style.display = \"flex\";\r\n    resetFrog();\r\n  };\r\n\r\n  document.getElementById(\"closeCanvas\").onclick = () => modal.style.display = \"none\";\r\n\r\n  popupBtn.onclick = () => {\r\n    popup.style.display = \"none\";\r\n    resetFrog();\r\n  };\r\n\r\n  function showPopup(msg) {\r\n    popupMsg.textContent = msg;\r\n    popup.style.display = \"flex\";\r\n  }\r\n\r\n  function updateFrogPosition() {\r\n    const lily = document.querySelector(`.lily[data-x=\"${posX}\"][data-y=\"${posY}\"]`);\r\n    if (!lily) return;\r\n\r\n    const r = lily.getBoundingClientRect();\r\n    const pr = lily.parentElement.getBoundingClientRect();\r\n\r\n    frog.style.left = (r.left - pr.left) + \"px\";\r\n    frog.style.top = (r.top - pr.top) + \"px\";\r\n\r\n    frog.classList.remove(\"jump\");\r\n    void frog.offsetWidth;\r\n    frog.classList.add(\"jump\");\r\n\r\n    if (lily.classList.contains(\"wrong\")) {\r\n      setTimeout(() => showPopup(\"\u274c Wrong Path!\"), 200);\r\n      return;\r\n    }\r\n\r\n    if (lily.id === \"final-path\") {\r\n      setTimeout(() => showPopup(\"\ud83c\udf89 You Won!\"), 200);\r\n    }\r\n  }\r\n\r\n  function resetFrog() {\r\n    posX = 0; posY = 0;\r\n    setTimeout(updateFrogPosition, 50);\r\n  }\r\n\r\n  document.getElementById(\"up\").onclick = () => { if (posY>0) posY--; updateFrogPosition(); };\r\n  document.getElementById(\"down\").onclick = () => { if (posY<4) posY++; updateFrogPosition(); };\r\n  document.getElementById(\"left\").onclick = () => { if (posX>0) posX--; updateFrogPosition(); };\r\n  document.getElementById(\"right\").onclick = () => { if (posX<4) posX++; updateFrogPosition(); };\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f1e9f0e e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"f1e9f0e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c412529 elementor-widget elementor-widget-image\" data-id=\"c412529\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"337\" height=\"341\" src=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315858.png\" class=\"attachment-full size-full wp-image-534\" alt=\"\" srcset=\"https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315858.png 337w, https:\/\/mary-shelie.client-demo-websites.com\/wp-content\/uploads\/2026\/04\/Group-1321315858-296x300.png 296w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1e5fd47 e-con-full e-flex e-con e-child\" data-id=\"1e5fd47\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e017a68 elementor-widget elementor-widget-heading\" data-id=\"e017a68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Spot The Differnce\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c0a1b8 elementor-widget elementor-widget-text-editor\" data-id=\"3c0a1b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tColor your favorite ranch pals with magical tools!\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2567db6 elementor-widget elementor-widget-html\" data-id=\"2567db6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n\r\n\r\n<div id=\"spot-game-container\">\r\n<img decoding=\"async\" id=\"spot-game-open-btn\" src=\"\/wp-content\/uploads\/2026\/04\/Frame.png\" style=\"cursor: pointer;\">\r\n<\/div>\r\n\r\n\r\n<div id=\"spot-game-modal\" class=\"spot-game-modal\">\r\n  <div class=\"spot-game-modal-content\">\r\n    <span class=\"spot-game-close\">&times;<\/span>\r\n    <h3>Spot The Differnce<\/h3>\r\n    <div id=\"spot-game-animal-options\" style=\"margin-top:20px; display:flex; justify-content:center; gap:20px;\">\r\n     \r\n    <\/div>\r\n    <p id=\"spot-game-message\" style=\"font-weight:bold; margin-top:15px;\"><\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n.spot-game-modal {\r\n  display:none;\r\n  position:fixed;\r\n  top:0; left:0;\r\n  width:100%; height:100%;\r\n  background-color: rgba(0,0,0,0.5);\r\n  justify-content:center; align-items:center;\r\n}\r\n\r\n.spot-game-modal-content {\r\n  background-color: #fff;\r\n    padding: 50px;\r\n    border-radius: 10px;\r\n    position: relative;\r\n    width: fit-content;\r\n    text-align: center;\r\n}\r\n.spot-game-modal-content h3 {\r\n    font-family: Qilka;\r\n    font-size: 32px;\r\n    margin-bottom: 30px;\r\n}\r\n.spot-game-close {\r\n  position:absolute;\r\n  top:10px;\r\n  right:15px;\r\n  font-size:24px;\r\n  cursor:pointer;\r\n}\r\n\r\n\r\n#spot-game-animal-options img {\r\n  width: 150px;\r\n    height: 150px;\r\n    cursor: pointer;\r\n    border-radius: 10px;\r\n    object-fit: cover;\r\n    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\r\n}\r\n\r\n#spot-game-animal-options img:hover { border-color:blue; }\r\n\r\n@media (max-width: 576px) {\r\n  .spot-game-modal-content {\r\n    width: 90% !important;\r\npadding: 20px  !important;\r\n}\r\n\r\n\r\n.spot-game-modal-content h3 {\r\n    font-size: 26px  !important;\r\n}\r\n\r\n#spot-game-animal-options img {\r\n    width: 80px !important;\r\n    height: 80px !important;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<script>\r\nconst spotGameOpenBtn = document.getElementById('spot-game-open-btn');\r\nconst spotGameModal = document.getElementById('spot-game-modal');\r\nconst spotGameClose = document.querySelector('.spot-game-close');\r\nconst spotGameAnimalOptions = document.getElementById('spot-game-animal-options');\r\nconst spotGameMessage = document.getElementById('spot-game-message');\r\n\r\nconst animals = [\r\n  { name: 'Chicken', img: '\/wp-content\/uploads\/2026\/05\/Gemini_Generated_Image_emqleoemqleoemql-1.png' },\r\n  { name: 'Dog', img: '\/wp-content\/uploads\/2026\/05\/Asset-3-1.png' },\r\n  { name: 'Pig', img: '\/wp-content\/uploads\/2026\/05\/Asset-4-3.png' }\r\n];\r\n\r\nlet correctAnimal;\r\nlet lastCorrectAnimal = null;\r\n\r\n\/\/ \ud83d\udd0a Speak function (waits until speech ends)\r\nfunction speak(text, callback) {\r\n  const msg = new SpeechSynthesisUtterance(text);\r\n\r\n  msg.onend = () => {\r\n    if (callback) callback();\r\n  };\r\n\r\n  window.speechSynthesis.cancel(); \/\/ stop any previous speech\r\n  window.speechSynthesis.speak(msg);\r\n}\r\n\r\n\/\/ \ud83c\udfb2 Shuffle function\r\nfunction shuffleArray(array) {\r\n  const newArray = [...array];\r\n  for (let i = newArray.length - 1; i > 0; i--) {\r\n    const j = Math.floor(Math.random() * (i + 1));\r\n    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\r\n  }\r\n  return newArray;\r\n}\r\n\r\n\/\/ \ud83c\udfae Start game\r\nfunction startSpotGame() {\r\n  spotGameMessage.textContent = '';\r\n  spotGameAnimalOptions.innerHTML = '';\r\n\r\n  const shuffled = shuffleArray(animals);\r\n\r\n  shuffled.forEach(animal => {\r\n    const img = document.createElement('img');\r\n    img.src = animal.img;\r\n    img.dataset.name = animal.name;\r\n    spotGameAnimalOptions.appendChild(img);\r\n  });\r\n\r\n  \/\/ \ud83c\udfaf Pick new correct animal (avoid repeat)\r\n  do {\r\n    correctAnimal = shuffled[Math.floor(Math.random() * shuffled.length)];\r\n  } while (lastCorrectAnimal && correctAnimal.name === lastCorrectAnimal.name);\r\n\r\n  lastCorrectAnimal = correctAnimal;\r\n\r\n  speak(`Click the ${correctAnimal.name}`);\r\n}\r\n\r\n\/\/ \u25b6\ufe0f Open modal\r\nspotGameOpenBtn.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'flex';\r\n  startSpotGame();\r\n});\r\n\r\n\/\/ \u274c Close modal\r\nspotGameClose.addEventListener('click', () => {\r\n  spotGameModal.style.display = 'none';\r\n});\r\n\r\n\/\/ \ud83d\uddb1\ufe0f Handle click\r\nspotGameAnimalOptions.addEventListener('click', (e) => {\r\n  if (e.target.tagName === 'IMG') {\r\n    const chosen = e.target.dataset.name;\r\n\r\n    if (chosen === correctAnimal.name) {\r\n      spotGameMessage.textContent = '\ud83c\udf89 Correct! Restarting the game...';\r\n\r\n      \/\/ \u2705 Wait for speech to finish before restarting\r\n      speak('Correct! Well done!', () => {\r\n        startSpotGame();\r\n      });\r\n\r\n    } else {\r\n      spotGameMessage.textContent = '\u274c Wrong! Try again.';\r\n      speak('Wrong! Try again!');\r\n    }\r\n  }\r\n});\r\n\r\n\/\/ \ud83e\ude9f Close when clicking outside\r\nwindow.addEventListener('click', (e) => {\r\n  if (e.target === spotGameModal) {\r\n    spotGameModal.style.display = 'none';\r\n  }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Games Hub Time to Play! Tap in and start playing awesome games, tricky puzzles, and fun farm challenges. Every click brings a new adventure with Pinky and friends! Match the Ranch Friends Flip cards, find pairs, and hear happy animal sounds! &times; OK Spot the Ranch Secrets Find hidden differences in fun ranch scenes! &times; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-481","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":16,"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/481\/revisions"}],"predecessor-version":[{"id":747,"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/pages\/481\/revisions\/747"}],"wp:attachment":[{"href":"https:\/\/mary-shelie.client-demo-websites.com\/index.php\/wp-json\/wp\/v2\/media?parent=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}