\u0533\u057f\u0565\u055b\u0584 4 \u057f\u0561\u0580\u0562\u0565\u0580\u0578\u0582\u0569\u0575\u0578\u0582\u0576<\/title>\r\n\r\n<style>\r\n:root{\r\n --bg:#373242;\r\n --screen:#2e2937;\r\n --accent:#08c7c9;\r\n --home:#5f5f5f;\r\n --success:#00ff66;\r\n}\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n user-select:none;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\nhtml,\r\nbody{\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial,sans-serif;\r\n background:var(--bg);\r\n color:white;\r\n}\r\n\r\n#game{\r\n width:100%;\r\n height:100vh;\r\n position:relative;\r\n overflow:hidden;\r\n background:var(--bg);\r\n}\r\n\r\n\/* TOP UI *\/\r\n.top-ui{\r\n position:absolute;\r\n top:20px;\r\n left:20px;\r\n right:20px;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:14px;\r\n z-index:100;\r\n}\r\n\r\n.ui-box{\r\n background:rgba(0,0,0,.35);\r\n border:2px solid var(--accent);\r\n color:white;\r\n padding:12px 22px;\r\n border-radius:999px;\r\n font-size:clamp(18px,2vw,32px);\r\n font-weight:800;\r\n box-shadow:0 0 18px rgba(8,199,201,.25);\r\n white-space:nowrap;\r\n}\r\n\r\n\/* GAME TITLE *\/\r\n.game-title{\r\n position:absolute;\r\n top:95px;\r\n width:100%;\r\n text-align:center;\r\n color:white;\r\n font-size:clamp(30px,4vw,58px);\r\n font-weight:900;\r\n z-index:50;\r\n text-transform:uppercase;\r\n padding:0 16px;\r\n}\r\n\r\n.game-title span{\r\n color:var(--accent);\r\n}\r\n\r\n\/* IMAGES *\/\r\n.images{\r\n position:absolute;\r\n left:0;\r\n right:0;\r\n top:180px;\r\n bottom:25px;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:20px;\r\n padding:0 20px;\r\n}\r\n\r\n.image-container{\r\n position:relative;\r\n height:100%;\r\n max-height:calc(100vh - 220px);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n overflow:visible;\r\n}\r\n\r\n.image-container img{\r\n height:100%;\r\n max-height:calc(100vh - 220px);\r\n width:auto;\r\n max-width:48vw;\r\n object-fit:contain;\r\n border-radius:12px;\r\n display:block;\r\n}\r\n\r\n.marker{\r\n position:absolute;\r\n width:80px;\r\n height:80px;\r\n border:6px solid var(--success);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n pointer-events:none;\r\n box-shadow:0 0 20px var(--success);\r\n animation:pop .3s;\r\n}\r\n\r\n@keyframes pop{\r\n from{transform:translate(-50%,-50%) scale(.2);}\r\n to{transform:translate(-50%,-50%) scale(1);}\r\n}\r\n\r\n.miss{\r\n position:absolute;\r\n font-size:40px;\r\n transform:translate(-50%,-50%);\r\n pointer-events:none;\r\n animation:fade .8s forwards;\r\n}\r\n\r\n@keyframes fade{to{opacity:0;}}\r\n\r\n\/* START + RESULT *\/\r\n#startScreen,\r\n#resultScreen{\r\n position:absolute;\r\n inset:0;\r\n background:var(--screen);\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n flex-direction:column;\r\n text-align:center;\r\n color:white;\r\n padding:20px;\r\n z-index:999;\r\n}\r\n\r\n#resultScreen{display:none;}\r\n\r\n.main-title,\r\n.resultTitle{\r\n font-size:clamp(42px,5vw,80px);\r\n color:var(--accent);\r\n font-weight:900;\r\n margin-bottom:25px;\r\n}\r\n\r\n.main-text,\r\n#resultText{\r\n font-size:clamp(20px,2vw,32px);\r\n line-height:1.5;\r\n max-width:950px;\r\n font-weight:700;\r\n}\r\n\r\n.buttons,\r\n.btns{\r\n display:flex;\r\n gap:18px;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n margin-top:40px;\r\n}\r\n\r\nbutton,\r\n.home-btn{\r\n border:none;\r\n background:var(--accent);\r\n color:white;\r\n padding:18px 42px;\r\n border-radius:999px;\r\n font-size:clamp(18px,2vw,28px);\r\n cursor:pointer;\r\n font-weight:800;\r\n transition:.2s;\r\n text-decoration:none;\r\n}\r\n\r\nbutton:hover,\r\n.home-btn:hover{\r\n transform:scale(1.05);\r\n}\r\n\r\n.home-btn{\r\n background:var(--home);\r\n}\r\n\r\n.successText{\r\n position:fixed;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n font-size:clamp(42px,5vw,80px);\r\n font-weight:900;\r\n color:var(--success);\r\n z-index:998;\r\n text-align:center;\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media(max-width:900px){\r\n html,body{overflow:auto;}\r\n #game{min-height:100vh;height:auto;overflow:auto;}\r\n\r\n .top-ui{\r\n position:relative;\r\n top:auto;\r\n left:auto;\r\n right:auto;\r\n padding:12px 10px;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n }\r\n\r\n .game-title{\r\n position:relative;\r\n top:auto;\r\n margin:10px 0 15px;\r\n }\r\n\r\n .images{\r\n position:relative;\r\n top:auto;\r\n bottom:auto;\r\n flex-direction:column;\r\n padding:0 10px 25px;\r\n }\r\n\r\n .image-container,\r\n .image-container img{\r\n height:auto;\r\n max-height:none;\r\n }\r\n\r\n .image-container img{\r\n width:95vw;\r\n max-width:95vw;\r\n }\r\n\r\n .buttons,.btns{\r\n flex-direction:column;\r\n width:100%;\r\n align-items:center;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"game\">\r\n\r\n <div id=\"startScreen\">\r\n <div class=\"main-title\">\u0546\u054a\u0531\u054f\u0531\u053f<\/div>\r\n <div class=\"main-text\">\r\n \u053e\u0548\u0552\u053d\u0546 \u0548\u0552 \u0531\u0542\u054f\u0548\u054f\u054e\u0531\u053e \u0555\u0534\u0538 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544 \u0535\u0546 \u0531\u053e\u053d\u0531\u053e\u0546\u053b \u0544\u0548\u0546\u0555\u0554\u054d\u053b\u0534 (CO)\u0589 \u0533\u054f\u0535\u055b\u0554 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0546 \u0548\u0552 \u0533\u0548\u0550\u053e\u0548\u0542\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u0546\u0535\u0550\u0538, \u0548\u0550\u0548\u0546\u0554 \u053e\u0548\u0552\u053d \u053f\u0531\u0544 \u054e\u0546\u0531\u054d\u0531\u053f\u0531\u0550 \u0531\u0550\u054f\u0531\u0546\u0535\u054f\u0548\u0552\u0544\u0546\u0535\u0550 \u0535\u0546 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544, \u0535\u054e \u054d\u0535\u0546\u0545\u0531\u053f\u0538 \u0534\u0531\u0550\u0541\u0550\u0535\u0554 \u0531\u054c\u0548\u0542\u054b \u0548\u0552 \u0531\u0546\u054e\u054f\u0531\u0546\u0533 \u0544\u053b\u054b\u0531\u054e\u0531\u0545\u0550\u0589\r\n <\/div>\r\n <div class=\"buttons\">\r\n <button onclick=\"startGame()\">\u054d\u053f\u054d\u0535\u053c<\/button>\r\n <button class=\"home-btn\" onclick=\"location.href='\/'\">\u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"resultScreen\">\r\n <div class=\"main-title\" id=\"resultTitle\"><\/div>\r\n <div class=\"main-text\" id=\"resultText\"><\/div>\r\n <div class=\"buttons\">\r\n <button onclick=\"location.reload()\">\u053f\u0550\u053f\u053b\u0546 \u054d\u053f\u054d\u0535\u053c<\/button>\r\n <button class=\"home-btn\" onclick=\"location.href='\/'\">\u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"top-ui\">\r\n <div class=\"ui-box\">\u053d\u0531\u0542\u055d <span id=\"levelText\">1<\/span>\/1<\/div>\r\n <div class=\"ui-box\">\u0533\u054f\u0546\u054e\u0535\u053c \u0537\u055d <span id=\"score\">0<\/span>\/4<\/div>\r\n <div class=\"ui-box\">\u23f1 <span id=\"timer\">10<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"game-title\">\r\n \u0533\u054f\u0535\u055b\u0554 <span>4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546<\/span>\r\n <\/div>\r\n\r\n <div class=\"images\">\r\n <div class=\"image-container\">\r\n <img decoding=\"async\" id=\"leftImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <div class=\"image-container\" id=\"rightContainer\">\r\n <img decoding=\"async\" id=\"rightImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst levels = [\r\n {\r\n left: \"https:\/\/curiousxgames.am\/wp-content\/uploads\/2026\/07\/left.jpg\",\r\n right: \"https:\/\/curiousxgames.am\/wp-content\/uploads\/2026\/07\/right.jpg\",\r\n timer: 10,\r\n differences: [\r\n {name:\"smoke\", x:650, y:245, r:260, found:false, hitAreas:[\r\n {x:500, y:215, r:175},\r\n {x:650, y:245, r:260},\r\n {x:795, y:270, r:175},\r\n {x:620, y:365, r:150}\r\n ]},\r\n {name:\"tv\", x:1175, y:470, r:210, found:false},\r\n {name:\"ashtray\", x:200, y:945, r:95, found:false},\r\n {name:\"transport\", x:445, y:535, r:230, found:false, hitAreas:[\r\n {x:360, y:515, r:170},\r\n {x:500, y:555, r:230}\r\n ]}\r\n ]\r\n }\r\n];\r\n\r\nlet currentLevel = 0;\r\nlet score = 0;\r\nlet timer = levels[0].timer;\r\nlet running = false;\r\nlet interval = null;\r\n\r\nconst image = document.getElementById(\"rightImage\");\r\nconst leftImage = document.getElementById(\"leftImage\");\r\nconst container = document.getElementById(\"rightContainer\");\r\n\r\nfunction loadLevel(index){\r\n currentLevel = index;\r\n score = 0;\r\n timer = levels[index].timer;\r\n levels[index].differences.forEach(d => d.found = false);\r\n\r\n document.querySelectorAll(\".marker,.miss,.successText\").forEach(el => el.remove());\r\n\r\n leftImage.src = levels[index].left;\r\n image.src = levels[index].right;\r\n\r\n document.getElementById(\"levelText\").textContent = index + 1;\r\n document.getElementById(\"score\").textContent = score;\r\n document.getElementById(\"timer\").textContent = timer;\r\n}\r\n\r\nloadLevel(0);\r\n\r\nfunction startGame(){\r\n document.getElementById(\"startScreen\").style.display = \"none\";\r\n running = true;\r\n startTimer();\r\n}\r\n\r\nfunction startTimer(){\r\n clearInterval(interval);\r\n interval = setInterval(()=>{\r\n if(!running) return;\r\n timer--;\r\n document.getElementById(\"timer\").textContent = timer;\r\n if(timer <= 0){\r\n clearInterval(interval);\r\n finishGame();\r\n }\r\n },1000);\r\n}\r\n\r\nfunction isDifferenceHit(diff, clickX, clickY){\r\n const hitAreas = diff.hitAreas || [{x:diff.x, y:diff.y, r:diff.r}];\r\n return hitAreas.some(area => Math.hypot(clickX - area.x, clickY - area.y) <= area.r);\r\n}\r\n\r\nimage.addEventListener(\"click\", function(e){\r\n if(!running) return;\r\n\r\n const rect = image.getBoundingClientRect();\r\n const scaleX = image.naturalWidth \/ rect.width;\r\n const scaleY = image.naturalHeight \/ rect.height;\r\n\r\n const clickX = (e.clientX - rect.left) * scaleX;\r\n const clickY = (e.clientY - rect.top) * scaleY;\r\n\r\n let hit = false;\r\n\r\n levels[currentLevel].differences.forEach(diff=>{\r\n if(diff.found) return;\r\n\r\n if(isDifferenceHit(diff, clickX, clickY)){\r\n diff.found = true;\r\n score++;\r\n document.getElementById(\"score\").textContent = score;\r\n showMarker(diff.x, diff.y);\r\n hit = true;\r\n\r\n if(score === levels[currentLevel].differences.length){\r\n running = false;\r\n clearInterval(interval);\r\n showLevelWin();\r\n }\r\n }\r\n });\r\n\r\n if(!hit){\r\n showMiss(e.clientX - rect.left, e.clientY - rect.top);\r\n }\r\n});\r\n\r\nfunction showMarker(x,y){\r\n const marker = document.createElement(\"div\");\r\n marker.className = \"marker\";\r\n\r\n const scaleX = image.clientWidth \/ image.naturalWidth;\r\n const scaleY = image.clientHeight \/ image.naturalHeight;\r\n\r\n marker.style.left = (x * scaleX) + \"px\";\r\n marker.style.top = (y * scaleY) + \"px\";\r\n\r\n container.appendChild(marker);\r\n}\r\n\r\nfunction showMiss(x,y){\r\n const miss = document.createElement(\"div\");\r\n miss.className = \"miss\";\r\n miss.innerHTML = \"\u274c\";\r\n miss.style.left = x + \"px\";\r\n miss.style.top = y + \"px\";\r\n container.appendChild(miss);\r\n\r\n setTimeout(()=>miss.remove(),800);\r\n}\r\n\r\nfunction showLevelWin(){\r\n const successText = document.createElement(\"div\");\r\n successText.className = \"successText\";\r\n \r\n document.body.appendChild(successText);\r\n\r\n setTimeout(()=>{\r\n showFinalWin();\r\n },2000);\r\n}\r\n\r\nfunction showFinalWin(){\r\n running = false;\r\n clearInterval(interval);\r\n document.querySelectorAll(\".marker,.successText,.miss\").forEach(el => el.remove());\r\n\r\n document.getElementById(\"resultScreen\").style.display = \"flex\";\r\n document.getElementById(\"resultTitle\").innerHTML = \" \u0540\u0531\u0542\u0539\u0531\u0546\u0531\u053f\";\r\n document.getElementById(\"resultText\").innerHTML = \"\u0547\u0546\u0548\u0550\u0540\u0531\u054e\u0548\u0550\u0548\u0552\u0544 \u0535\u0546\u0554<br>\u0534\u0548\u0552\u0554 \u0533\u054f\u0531\u0554 CO \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0542 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0538\u0589 \u053f\u0535\u0551\u0551\u0535\u055b\u0554:\";\r\n}\r\n\r\nfunction finishGame(){\r\n running = false;\r\n clearInterval(interval);\r\n document.querySelectorAll(\".marker,.successText,.miss\").forEach(el => el.remove());\r\n\r\n document.getElementById(\"resultScreen\").style.display = \"flex\";\r\n document.getElementById(\"resultTitle\").innerHTML = \"\u23f0 \u053a\u0531\u0544\u0531\u0546\u0531\u053f\u0538 \u053c\u0550\u0531\u0551\u0531\u054e\";\r\n document.getElementById(\"resultText\").innerHTML = \"\u053d\u0531\u0542 \" + (currentLevel + 1) + \": \u0533\u054f\u0546\u054e\u0535\u053c \u0537 \" + score + \"-\u0538 4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u053b\u0551\";\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0533\u057f\u0565\u055b\u0584 4 \u057f\u0561\u0580\u0562\u0565\u0580\u0578\u0582\u0569\u0575\u0578\u0582\u0576 \u0546\u054a\u0531\u054f\u0531\u053f \u053e\u0548\u0552\u053d\u0546 \u0548\u0552 \u0531\u0542\u054f\u0548\u054f\u054e\u0531\u053e \u0555\u0534\u0538 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544 \u0535\u0546 \u0531\u053e\u053d\u0531\u053e\u0546\u053b \u0544\u0548\u0546\u0555\u0554\u054d\u053b\u0534 (CO)\u0589 \u0533\u054f\u0535\u055b\u0554 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0546 \u0548\u0552 \u0533\u0548\u0550\u053e\u0548\u0542\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u0546\u0535\u0550\u0538, \u0548\u0550\u0548\u0546\u0554 \u053e\u0548\u0552\u053d \u053f\u0531\u0544 \u054e\u0546\u0531\u054d\u0531\u053f\u0531\u0550 \u0531\u0550\u054f\u0531\u0546\u0535\u054f\u0548\u0552\u0544\u0546\u0535\u0550 \u0535\u0546 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544, \u0535\u054e \u054d\u0535\u0546\u0545\u0531\u053f\u0538 \u0534\u0531\u0550\u0541\u0550\u0535\u0554 \u0531\u054c\u0548\u0542\u054b \u0548\u0552 \u0531\u0546\u054e\u054f\u0531\u0546\u0533 \u0544\u053b\u054b\u0531\u054e\u0531\u0545\u0550\u0589 \u054d\u053f\u054d\u0535\u053c \u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b \u053f\u0550\u053f\u053b\u0546 \u054d\u053f\u054d\u0535\u053c \u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b \u053d\u0531\u0542\u055d 1\/1 \u0533\u054f\u0546\u054e\u0535\u053c \u0537\u055d 0\/4 \u23f1 10 \u0533\u054f\u0535\u055b\u0554 4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=83"}],"version-history":[{"count":7,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u0533\u057f\u0565\u055b\u0584 4 \u057f\u0561\u0580\u0562\u0565\u0580\u0578\u0582\u0569\u0575\u0578\u0582\u0576<\/title>\r\n\r\n<style>\r\n:root{\r\n --bg:#373242;\r\n --screen:#2e2937;\r\n --accent:#08c7c9;\r\n --home:#5f5f5f;\r\n --success:#00ff66;\r\n}\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n user-select:none;\r\n -webkit-tap-highlight-color:transparent;\r\n}\r\n\r\nhtml,\r\nbody{\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial,sans-serif;\r\n background:var(--bg);\r\n color:white;\r\n}\r\n\r\n#game{\r\n width:100%;\r\n height:100vh;\r\n position:relative;\r\n overflow:hidden;\r\n background:var(--bg);\r\n}\r\n\r\n\/* TOP UI *\/\r\n.top-ui{\r\n position:absolute;\r\n top:20px;\r\n left:20px;\r\n right:20px;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:14px;\r\n z-index:100;\r\n}\r\n\r\n.ui-box{\r\n background:rgba(0,0,0,.35);\r\n border:2px solid var(--accent);\r\n color:white;\r\n padding:12px 22px;\r\n border-radius:999px;\r\n font-size:clamp(18px,2vw,32px);\r\n font-weight:800;\r\n box-shadow:0 0 18px rgba(8,199,201,.25);\r\n white-space:nowrap;\r\n}\r\n\r\n\/* GAME TITLE *\/\r\n.game-title{\r\n position:absolute;\r\n top:95px;\r\n width:100%;\r\n text-align:center;\r\n color:white;\r\n font-size:clamp(30px,4vw,58px);\r\n font-weight:900;\r\n z-index:50;\r\n text-transform:uppercase;\r\n padding:0 16px;\r\n}\r\n\r\n.game-title span{\r\n color:var(--accent);\r\n}\r\n\r\n\/* IMAGES *\/\r\n.images{\r\n position:absolute;\r\n left:0;\r\n right:0;\r\n top:180px;\r\n bottom:25px;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:20px;\r\n padding:0 20px;\r\n}\r\n\r\n.image-container{\r\n position:relative;\r\n height:100%;\r\n max-height:calc(100vh - 220px);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n overflow:visible;\r\n}\r\n\r\n.image-container img{\r\n height:100%;\r\n max-height:calc(100vh - 220px);\r\n width:auto;\r\n max-width:48vw;\r\n object-fit:contain;\r\n border-radius:12px;\r\n display:block;\r\n}\r\n\r\n.marker{\r\n position:absolute;\r\n width:80px;\r\n height:80px;\r\n border:6px solid var(--success);\r\n border-radius:50%;\r\n transform:translate(-50%,-50%);\r\n pointer-events:none;\r\n box-shadow:0 0 20px var(--success);\r\n animation:pop .3s;\r\n}\r\n\r\n@keyframes pop{\r\n from{transform:translate(-50%,-50%) scale(.2);}\r\n to{transform:translate(-50%,-50%) scale(1);}\r\n}\r\n\r\n.miss{\r\n position:absolute;\r\n font-size:40px;\r\n transform:translate(-50%,-50%);\r\n pointer-events:none;\r\n animation:fade .8s forwards;\r\n}\r\n\r\n@keyframes fade{to{opacity:0;}}\r\n\r\n\/* START + RESULT *\/\r\n#startScreen,\r\n#resultScreen{\r\n position:absolute;\r\n inset:0;\r\n background:var(--screen);\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n flex-direction:column;\r\n text-align:center;\r\n color:white;\r\n padding:20px;\r\n z-index:999;\r\n}\r\n\r\n#resultScreen{display:none;}\r\n\r\n.main-title,\r\n.resultTitle{\r\n font-size:clamp(42px,5vw,80px);\r\n color:var(--accent);\r\n font-weight:900;\r\n margin-bottom:25px;\r\n}\r\n\r\n.main-text,\r\n#resultText{\r\n font-size:clamp(20px,2vw,32px);\r\n line-height:1.5;\r\n max-width:950px;\r\n font-weight:700;\r\n}\r\n\r\n.buttons,\r\n.btns{\r\n display:flex;\r\n gap:18px;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n margin-top:40px;\r\n}\r\n\r\nbutton,\r\n.home-btn{\r\n border:none;\r\n background:var(--accent);\r\n color:white;\r\n padding:18px 42px;\r\n border-radius:999px;\r\n font-size:clamp(18px,2vw,28px);\r\n cursor:pointer;\r\n font-weight:800;\r\n transition:.2s;\r\n text-decoration:none;\r\n}\r\n\r\nbutton:hover,\r\n.home-btn:hover{\r\n transform:scale(1.05);\r\n}\r\n\r\n.home-btn{\r\n background:var(--home);\r\n}\r\n\r\n.successText{\r\n position:fixed;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n font-size:clamp(42px,5vw,80px);\r\n font-weight:900;\r\n color:var(--success);\r\n z-index:998;\r\n text-align:center;\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media(max-width:900px){\r\n html,body{overflow:auto;}\r\n #game{min-height:100vh;height:auto;overflow:auto;}\r\n\r\n .top-ui{\r\n position:relative;\r\n top:auto;\r\n left:auto;\r\n right:auto;\r\n padding:12px 10px;\r\n flex-wrap:wrap;\r\n justify-content:center;\r\n }\r\n\r\n .game-title{\r\n position:relative;\r\n top:auto;\r\n margin:10px 0 15px;\r\n }\r\n\r\n .images{\r\n position:relative;\r\n top:auto;\r\n bottom:auto;\r\n flex-direction:column;\r\n padding:0 10px 25px;\r\n }\r\n\r\n .image-container,\r\n .image-container img{\r\n height:auto;\r\n max-height:none;\r\n }\r\n\r\n .image-container img{\r\n width:95vw;\r\n max-width:95vw;\r\n }\r\n\r\n .buttons,.btns{\r\n flex-direction:column;\r\n width:100%;\r\n align-items:center;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"game\">\r\n\r\n <div id=\"startScreen\">\r\n <div class=\"main-title\">\u0546\u054a\u0531\u054f\u0531\u053f<\/div>\r\n <div class=\"main-text\">\r\n \u053e\u0548\u0552\u053d\u0546 \u0548\u0552 \u0531\u0542\u054f\u0548\u054f\u054e\u0531\u053e \u0555\u0534\u0538 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544 \u0535\u0546 \u0531\u053e\u053d\u0531\u053e\u0546\u053b \u0544\u0548\u0546\u0555\u0554\u054d\u053b\u0534 (CO)\u0589 \u0533\u054f\u0535\u055b\u0554 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0546 \u0548\u0552 \u0533\u0548\u0550\u053e\u0548\u0542\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u0546\u0535\u0550\u0538, \u0548\u0550\u0548\u0546\u0554 \u053e\u0548\u0552\u053d \u053f\u0531\u0544 \u054e\u0546\u0531\u054d\u0531\u053f\u0531\u0550 \u0531\u0550\u054f\u0531\u0546\u0535\u054f\u0548\u0552\u0544\u0546\u0535\u0550 \u0535\u0546 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544, \u0535\u054e \u054d\u0535\u0546\u0545\u0531\u053f\u0538 \u0534\u0531\u0550\u0541\u0550\u0535\u0554 \u0531\u054c\u0548\u0542\u054b \u0548\u0552 \u0531\u0546\u054e\u054f\u0531\u0546\u0533 \u0544\u053b\u054b\u0531\u054e\u0531\u0545\u0550\u0589\r\n <\/div>\r\n <div class=\"buttons\">\r\n <button onclick=\"startGame()\">\u054d\u053f\u054d\u0535\u053c<\/button>\r\n <button class=\"home-btn\" onclick=\"location.href='\/'\">\u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"resultScreen\">\r\n <div class=\"main-title\" id=\"resultTitle\"><\/div>\r\n <div class=\"main-text\" id=\"resultText\"><\/div>\r\n <div class=\"buttons\">\r\n <button onclick=\"location.reload()\">\u053f\u0550\u053f\u053b\u0546 \u054d\u053f\u054d\u0535\u053c<\/button>\r\n <button class=\"home-btn\" onclick=\"location.href='\/'\">\u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"top-ui\">\r\n <div class=\"ui-box\">\u053d\u0531\u0542\u055d <span id=\"levelText\">1<\/span>\/1<\/div>\r\n <div class=\"ui-box\">\u0533\u054f\u0546\u054e\u0535\u053c \u0537\u055d <span id=\"score\">0<\/span>\/4<\/div>\r\n <div class=\"ui-box\">\u23f1 <span id=\"timer\">10<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"game-title\">\r\n \u0533\u054f\u0535\u055b\u0554 <span>4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546<\/span>\r\n <\/div>\r\n\r\n <div class=\"images\">\r\n <div class=\"image-container\">\r\n <img decoding=\"async\" id=\"leftImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <div class=\"image-container\" id=\"rightContainer\">\r\n <img decoding=\"async\" id=\"rightImage\" src=\"\" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst levels = [\r\n {\r\n left: \"https:\/\/curiousxgames.am\/wp-content\/uploads\/2026\/07\/left.jpg\",\r\n right: \"https:\/\/curiousxgames.am\/wp-content\/uploads\/2026\/07\/right.jpg\",\r\n timer: 10,\r\n differences: [\r\n {name:\"smoke\", x:650, y:245, r:260, found:false, hitAreas:[\r\n {x:500, y:215, r:175},\r\n {x:650, y:245, r:260},\r\n {x:795, y:270, r:175},\r\n {x:620, y:365, r:150}\r\n ]},\r\n {name:\"tv\", x:1175, y:470, r:210, found:false},\r\n {name:\"ashtray\", x:200, y:945, r:95, found:false},\r\n {name:\"transport\", x:445, y:535, r:230, found:false, hitAreas:[\r\n {x:360, y:515, r:170},\r\n {x:500, y:555, r:230}\r\n ]}\r\n ]\r\n }\r\n];\r\n\r\nlet currentLevel = 0;\r\nlet score = 0;\r\nlet timer = levels[0].timer;\r\nlet running = false;\r\nlet interval = null;\r\n\r\nconst image = document.getElementById(\"rightImage\");\r\nconst leftImage = document.getElementById(\"leftImage\");\r\nconst container = document.getElementById(\"rightContainer\");\r\n\r\nfunction loadLevel(index){\r\n currentLevel = index;\r\n score = 0;\r\n timer = levels[index].timer;\r\n levels[index].differences.forEach(d => d.found = false);\r\n\r\n document.querySelectorAll(\".marker,.miss,.successText\").forEach(el => el.remove());\r\n\r\n leftImage.src = levels[index].left;\r\n image.src = levels[index].right;\r\n\r\n document.getElementById(\"levelText\").textContent = index + 1;\r\n document.getElementById(\"score\").textContent = score;\r\n document.getElementById(\"timer\").textContent = timer;\r\n}\r\n\r\nloadLevel(0);\r\n\r\nfunction startGame(){\r\n document.getElementById(\"startScreen\").style.display = \"none\";\r\n running = true;\r\n startTimer();\r\n}\r\n\r\nfunction startTimer(){\r\n clearInterval(interval);\r\n interval = setInterval(()=>{\r\n if(!running) return;\r\n timer--;\r\n document.getElementById(\"timer\").textContent = timer;\r\n if(timer <= 0){\r\n clearInterval(interval);\r\n finishGame();\r\n }\r\n },1000);\r\n}\r\n\r\nfunction isDifferenceHit(diff, clickX, clickY){\r\n const hitAreas = diff.hitAreas || [{x:diff.x, y:diff.y, r:diff.r}];\r\n return hitAreas.some(area => Math.hypot(clickX - area.x, clickY - area.y) <= area.r);\r\n}\r\n\r\nimage.addEventListener(\"click\", function(e){\r\n if(!running) return;\r\n\r\n const rect = image.getBoundingClientRect();\r\n const scaleX = image.naturalWidth \/ rect.width;\r\n const scaleY = image.naturalHeight \/ rect.height;\r\n\r\n const clickX = (e.clientX - rect.left) * scaleX;\r\n const clickY = (e.clientY - rect.top) * scaleY;\r\n\r\n let hit = false;\r\n\r\n levels[currentLevel].differences.forEach(diff=>{\r\n if(diff.found) return;\r\n\r\n if(isDifferenceHit(diff, clickX, clickY)){\r\n diff.found = true;\r\n score++;\r\n document.getElementById(\"score\").textContent = score;\r\n showMarker(diff.x, diff.y);\r\n hit = true;\r\n\r\n if(score === levels[currentLevel].differences.length){\r\n running = false;\r\n clearInterval(interval);\r\n showLevelWin();\r\n }\r\n }\r\n });\r\n\r\n if(!hit){\r\n showMiss(e.clientX - rect.left, e.clientY - rect.top);\r\n }\r\n});\r\n\r\nfunction showMarker(x,y){\r\n const marker = document.createElement(\"div\");\r\n marker.className = \"marker\";\r\n\r\n const scaleX = image.clientWidth \/ image.naturalWidth;\r\n const scaleY = image.clientHeight \/ image.naturalHeight;\r\n\r\n marker.style.left = (x * scaleX) + \"px\";\r\n marker.style.top = (y * scaleY) + \"px\";\r\n\r\n container.appendChild(marker);\r\n}\r\n\r\nfunction showMiss(x,y){\r\n const miss = document.createElement(\"div\");\r\n miss.className = \"miss\";\r\n miss.innerHTML = \"\u274c\";\r\n miss.style.left = x + \"px\";\r\n miss.style.top = y + \"px\";\r\n container.appendChild(miss);\r\n\r\n setTimeout(()=>miss.remove(),800);\r\n}\r\n\r\nfunction showLevelWin(){\r\n const successText = document.createElement(\"div\");\r\n successText.className = \"successText\";\r\n \r\n document.body.appendChild(successText);\r\n\r\n setTimeout(()=>{\r\n showFinalWin();\r\n },2000);\r\n}\r\n\r\nfunction showFinalWin(){\r\n running = false;\r\n clearInterval(interval);\r\n document.querySelectorAll(\".marker,.successText,.miss\").forEach(el => el.remove());\r\n\r\n document.getElementById(\"resultScreen\").style.display = \"flex\";\r\n document.getElementById(\"resultTitle\").innerHTML = \" \u0540\u0531\u0542\u0539\u0531\u0546\u0531\u053f\";\r\n document.getElementById(\"resultText\").innerHTML = \"\u0547\u0546\u0548\u0550\u0540\u0531\u054e\u0548\u0550\u0548\u0552\u0544 \u0535\u0546\u0554<br>\u0534\u0548\u0552\u0554 \u0533\u054f\u0531\u0554 CO \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0542 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0538\u0589 \u053f\u0535\u0551\u0551\u0535\u055b\u0554:\";\r\n}\r\n\r\nfunction finishGame(){\r\n running = false;\r\n clearInterval(interval);\r\n document.querySelectorAll(\".marker,.successText,.miss\").forEach(el => el.remove());\r\n\r\n document.getElementById(\"resultScreen\").style.display = \"flex\";\r\n document.getElementById(\"resultTitle\").innerHTML = \"\u23f0 \u053a\u0531\u0544\u0531\u0546\u0531\u053f\u0538 \u053c\u0550\u0531\u0551\u0531\u054e\";\r\n document.getElementById(\"resultText\").innerHTML = \"\u053d\u0531\u0542 \" + (currentLevel + 1) + \": \u0533\u054f\u0546\u054e\u0535\u053c \u0537 \" + score + \"-\u0538 4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u053b\u0551\";\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0533\u057f\u0565\u055b\u0584 4 \u057f\u0561\u0580\u0562\u0565\u0580\u0578\u0582\u0569\u0575\u0578\u0582\u0576 \u0546\u054a\u0531\u054f\u0531\u053f \u053e\u0548\u0552\u053d\u0546 \u0548\u0552 \u0531\u0542\u054f\u0548\u054f\u054e\u0531\u053e \u0555\u0534\u0538 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544 \u0535\u0546 \u0531\u053e\u053d\u0531\u053e\u0546\u053b \u0544\u0548\u0546\u0555\u0554\u054d\u053b\u0534 (CO)\u0589 \u0533\u054f\u0535\u055b\u0554 \u0532\u0548\u053c\u0548\u0550 \u0531\u054c\u0531\u0550\u053f\u0531\u0546\u0535\u0550\u0546 \u0548\u0552 \u0533\u0548\u0550\u053e\u0548\u0542\u0548\u0552\u0539\u0545\u0548\u0552\u0546\u0546\u0535\u0550\u0538, \u0548\u0550\u0548\u0546\u0554 \u053e\u0548\u0552\u053d \u053f\u0531\u0544 \u054e\u0546\u0531\u054d\u0531\u053f\u0531\u0550 \u0531\u0550\u054f\u0531\u0546\u0535\u054f\u0548\u0552\u0544\u0546\u0535\u0550 \u0535\u0546 \u0531\u054c\u0531\u054b\u0531\u0551\u0546\u0548\u0552\u0544, \u0535\u054e \u054d\u0535\u0546\u0545\u0531\u053f\u0538 \u0534\u0531\u0550\u0541\u0550\u0535\u0554 \u0531\u054c\u0548\u0542\u054b \u0548\u0552 \u0531\u0546\u054e\u054f\u0531\u0546\u0533 \u0544\u053b\u054b\u0531\u054e\u0531\u0545\u0550\u0589 \u054d\u053f\u054d\u0535\u053c \u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b \u053f\u0550\u053f\u053b\u0546 \u054d\u053f\u054d\u0535\u053c \u0533\u053c\u053d\u0531\u054e\u0548\u0550 \u0537\u054b \u053d\u0531\u0542\u055d 1\/1 \u0533\u054f\u0546\u054e\u0535\u053c \u0537\u055d 0\/4 \u23f1 10 \u0533\u054f\u0535\u055b\u0554 4 \u054f\u0531\u0550\u0532\u0535\u0550\u0548\u0552\u0539\u0545\u0548\u0552\u0546<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-83","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=83"}],"version-history":[{"count":7,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions"}],"predecessor-version":[{"id":108,"href":"https:\/\/curiousxgames.am\/index.php?rest_route=\/wp\/v2\/pages\/83\/revisions\/108"}],"wp:attachment":[{"href":"https:\/\/curiousxgames.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}