Harry Potter Pexeso<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n <style>\n * { box-sizing: border-box; }\n \n .card-container {\n perspective: 1000px;\n }\n \n .card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n \n .card-inner.flipped {\n transform: rotateY(180deg);\n }\n \n .card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 12px;\n }\n \n .card-back {\n transform: rotateY(180deg);\n }\n \n .card-matched {\n opacity: 0.6;\n pointer-events: none;\n }\n \n .card-matched .card-inner {\n transform: rotateY(180deg) scale(0.95);\n }\n \n @keyframes sparkle {\n 0%, 100% { opacity: 0; transform: scale(0); }\n 50% { opacity: 1; transform: scale(1); }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n \n .sparkle {\n animation: sparkle 1.5s infinite;\n }\n \n .float-animation {\n animation: float 3s ease-in-out infinite;\n }\n \n @keyframes celebrate {\n 0% { transform: scale(0.8); opacity: 0; }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); opacity: 1; }\n }\n \n .celebrate {\n animation: celebrate 0.5s ease-out forwards;\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full m-0 p-0 overflow-auto\" style=\"background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\">\n <div id=\"app\" class=\"w-full min-h-full flex flex-col items-center p-4 md:p-8\">\n \n <header class=\"text-center mb-6 w-full max-w-4xl\">\n <div class=\"relative inline-block\">\n <h1 id=\"game-title\" class=\"text-3xl md:text-5xl font-bold text-amber-400 mb-2\" style=\"font-family: 'Cinzel', serif; text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);\">\u26a1 Harry Potter Pexeso \u26a1<\/h1>\n <div class=\"absolute -top-2 -left-4 text-2xl sparkle\" style=\"animation-delay: 0s;\">\n \u2728\n <\/div>\n <div class=\"absolute -top-2 -right-4 text-2xl sparkle\" style=\"animation-delay: 0.5s;\">\n \u2728\n <\/div>\n <\/div>\n <p class=\"text-amber-200\/80 text-lg\" style=\"font-family: 'Crimson Text', serif;\">Najdi p\u00e1ry kouzeln\u00fdch postav!<\/p>\n <\/header>\n <div class=\"flex gap-6 mb-6 flex-wrap justify-center\">\n <div class=\"bg-indigo-900\/50 backdrop-blur-sm px-6 py-3 rounded-xl border border-amber-400\/30\">\n <span class=\"text-amber-200\/70 text-sm\" style=\"font-family: 'Crimson Text', serif;\">Tahy<\/span>\n <p id=\"moves\" class=\"text-2xl font-bold text-amber-400\" style=\"font-family: 'Cinzel', serif;\">0<\/p>\n <\/div>\n <div class=\"bg-indigo-900\/50 backdrop-blur-sm px-6 py-3 rounded-xl border border-amber-400\/30\">\n <span class=\"text-amber-200\/70 text-sm\" style=\"font-family: 'Crimson Text', serif;\">Nalezeno<\/span>\n <p id=\"pairs\" class=\"text-2xl font-bold text-amber-400\" style=\"font-family: 'Cinzel', serif;\">0\/8<\/p>\n <\/div>\n <\/div>\n <div id=\"game-board\" class=\"grid grid-cols-4 gap-3 md:gap-4 max-w-2xl w-full mb-6\">\n \n <\/div> <button id=\"reset-btn\" class=\"bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 text-indigo-950 font-bold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-500\/30\" style=\"font-family: 'Cinzel', serif;\"> \ud83d\udd04 Nov\u00e1 hra <\/button> \n <div id=\"win-modal\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-sm hidden items-center justify-center z-50\">\n <div class=\"bg-gradient-to-b from-indigo-900 to-indigo-950 p-8 rounded-2xl border-2 border-amber-400 text-center max-w-md mx-4 celebrate\">\n <div class=\"text-6xl mb-4 float-animation\">\n \ud83c\udfc6\n <\/div>\n <h2 class=\"text-3xl font-bold text-amber-400 mb-2\" style=\"font-family: 'Cinzel', serif;\">V\u00fdborn\u011b!<\/h2>\n <p id=\"win-message\" class=\"text-amber-200 mb-2\" style=\"font-family: 'Crimson Text', serif;\">Jsi prav\u00fd kouzeln\u00edk!<\/p>\n <p class=\"text-amber-200\/80 mb-6\" style=\"font-family: 'Crimson Text', serif;\">Dokon\u010deno za <span id=\"final-moves\" class=\"text-amber-400 font-bold\">0<\/span> tah\u016f<\/p><button id=\"play-again-btn\" class=\"bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 text-indigo-950 font-bold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105\" style=\"font-family: 'Cinzel', serif;\"> \u2728 Hr\u00e1t znovu <\/button>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Character data with detailed SVG illustrations\n const characters = [\n { \n id: 'harry', \n name: 'Harry Potter', \n color: '#dc2626', \n bgColor: '#7f1d1d',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#1a1a1a}.skin{fill:#fdbcb4}.eyes{fill:#3b82f6}.lightning{fill:#fbbf24}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 50 Q 65 25 100 25 Q 135 25 135 50 L 135 70 Q 100 75 65 70 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#8b5a3c\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#8b5a3c\"\/><polygon points=\"100,105 95,120 105,120\" fill=\"#d97706\"\/><ellipse cx=\"85\" cy=\"130\" rx=\"8\" ry=\"15\" fill=\"#1a1a1a\"\/><ellipse cx=\"115\" cy=\"130\" rx=\"8\" ry=\"15\" fill=\"#1a1a1a\"\/><circle cx=\"95\" cy=\"40\" r=\"4\" class=\"lightning\"\/><path d=\"M 100 35 L 103 42 L 98 43\" class=\"lightning\"\/><\/svg>`\n },\n { \n id: 'hermione', \n name: 'Hermiona', \n color: '#b45309', \n bgColor: '#78350f',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#8b4513}.skin{fill:#fdbcb4}.eyes{fill:#654321}.book{fill:#dc2626}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 45 Q 65 25 100 25 Q 135 25 135 45 L 135 75 Q 100 80 65 75 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#a0522d\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#a0522d\"\/><polygon points=\"100,105 97,120 103,120\" fill=\"#d97706\"\/><rect x=\"75\" y=\"130\" width=\"20\" height=\"30\" class=\"book\"\/><rect x=\"105\" y=\"130\" width=\"20\" height=\"30\" class=\"book\" opacity=\"0.7\"\/><path d=\"M 78 135 L 92 135 M 78 140 L 92 140 M 78 145 L 92 145\" stroke=\"#fbbf24\" stroke-width=\"1\"\/><\/svg>`\n },\n { \n id: 'ron', \n name: 'Ron Weasley', \n color: '#ea580c', \n bgColor: '#7c2d12',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#dc2414}.skin{fill:#fdbcb4}.eyes{fill:#4f46e5}.freckles{fill:#d97706}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 50 Q 65 25 100 25 Q 135 25 135 50 L 135 70 Q 100 75 65 70 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><circle cx=\"85\" cy=\"65\" r=\"2\" class=\"freckles\"\/><circle cx=\"95\" cy=\"67\" r=\"2\" class=\"freckles\"\/><circle cx=\"115\" cy=\"66\" r=\"2\" class=\"freckles\"\/><circle cx=\"125\" cy=\"64\" r=\"2\" class=\"freckles\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#d2691e\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#d2691e\"\/><polygon points=\"100,105 97,120 103,120\" fill=\"#d97706\"\/><polygon points=\"75,130 75,160 85,155 85,130\" fill=\"#7c3aed\"\/><polygon points=\"115,130 115,160 125,155 125,130\" fill=\"#7c3aed\"\/><\/svg>`\n },\n { \n id: 'dumbledore', \n name: 'Albus Brumb\u00e1l', \n color: '#7c3aed', \n bgColor: '#4c1d95',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.beard{fill:#c0c0c0}.skin{fill:#e8c5a5}.eyes{fill:#1e40af}.hat{fill:#6b21a8}<\/style><\/defs><path d=\"M 80 35 L 100 15 L 120 35 L 115 50 L 85 50 Z\" class=\"hat\"\/><circle cx=\"100\" cy=\"65\" r=\"32\" class=\"skin\"\/><path d=\"M 75 75 Q 75 90 100 95 Q 125 90 125 75\" class=\"beard\"\/><path d=\"M 75 80 Q 80 88 100 92 Q 120 88 125 80\" fill=\"#a9a9a9\"\/><circle cx=\"88\" r=\"4\" class=\"eyes\"\/><circle cx=\"112\" r=\"4\" class=\"eyes\"\/><circle cx=\"100\" cy=\"80\" r=\"3\" fill=\"#dc2626\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"115\" stroke=\"#e8c5a5\" stroke-width=\"8\"\/><polygon points=\"70,120 130,120 135,165 65,165\" fill=\"#6b21a8\"\/><path d=\"M 75 125 L 75 160 M 85 125 L 85 160 M 95 125 L 95 160 M 105 125 L 105 160 M 115 125 L 115 160 M 125 125 L 125 160\" stroke=\"#fbbf24\" stroke-width=\"1.5\"\/><\/svg>`\n },\n { \n id: 'hagrid', \n name: 'Rubeus Hagrid', \n color: '#65a30d', \n bgColor: '#365314',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#3d2817}.skin{fill:#cd8f5c}.beard{fill:#6b4423}.eyes{fill:#8b7355}<\/style><\/defs><circle cx=\"100\" cy=\"55\" r=\"40\" class=\"skin\"\/><path d=\"M 60 55 Q 60 25 100 25 Q 140 25 140 55 L 140 80 Q 100 85 60 80 Z\" class=\"hair\"\/><path d=\"M 70 75 Q 80 90 100 95 Q 120 90 130 75\" class=\"beard\"\/><circle cx=\"85\" r=\"6\" class=\"eyes\"\/><circle cx=\"115\" r=\"6\" class=\"eyes\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"125\" stroke=\"#cd8f5c\" stroke-width=\"12\"\/><ellipse cx=\"70\" cy=\"135\" rx=\"12\" ry=\"20\" fill=\"#2d1810\"\/><ellipse cx=\"130\" cy=\"135\" rx=\"12\" ry=\"20\" fill=\"#2d1810\"\/><circle cx=\"75\" cy=\"150\" r=\"10\" fill=\"#8b7355\"\/><circle cx=\"125\" cy=\"150\" r=\"10\" fill=\"#8b7355\"\/><\/svg>`\n },\n { \n id: 'snape', \n name: 'Severus Snape', \n color: '#0891b2', \n bgColor: '#164e63',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#1a1a1a}.skin{fill:#e8c5a5}.eyes{fill:#1e1e1e}.robes{fill:#1a1a1a}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"33\" class=\"skin\"\/><path d=\"M 67 50 Q 67 25 100 25 Q 133 25 133 50 L 133 75 Q 100 80 67 75 Z\" class=\"hair\"\/><path d=\"M 67 60 Q 75 80 100 85 Q 125 80 133 60\" class=\"hair\"\/><circle cx=\"87\" r=\"5\" class=\"eyes\"\/><circle cx=\"113\" r=\"5\" class=\"eyes\"\/><polygon points=\"100,75 98,85 102,85\" fill=\"#8b5a3c\"\/><line x1=\"100\" y1=\"93\" x2=\"100\" y2=\"115\" stroke=\"#e8c5a5\" stroke-width=\"7\"\/><polygon points=\"60,115 140,115 145,165 55,165\" class=\"robes\"\/><path d=\"M 75 120 L 75 160 M 125 120 L 125 160\" stroke=\"#0891b2\" stroke-width=\"2\"\/><\/svg>`\n },\n { \n id: 'dobby', \n name: 'Dobby', \n color: '#c026d3', \n bgColor: '#701a75',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.skin{fill:#d4a5a5}.ears{fill:#c08080}.eyes{fill:#000}.socks{fill:#f5f5f5}<\/style><\/defs><circle cx=\"100\" cy=\"65\" r=\"30\" class=\"skin\"\/><ellipse cx=\"75\" cy=\"45\" rx=\"12\" ry=\"20\" class=\"ears\" transform=\"rotate(-30 75 45)\"\/><ellipse cx=\"125\" cy=\"45\" rx=\"12\" ry=\"20\" class=\"ears\" transform=\"rotate(30 125 45)\"\/><circle cx=\"88\" r=\"6\" class=\"eyes\"\/><circle cx=\"112\" r=\"6\" class=\"eyes\"\/><circle cx=\"88\" cy=\"62\" r=\"3\" fill=\"#fff\"\/><circle cx=\"112\" cy=\"62\" r=\"3\" fill=\"#fff\"\/><polygon points=\"100,75 98,90 102,90\" fill=\"#c08080\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"120\" stroke=\"#d4a5a5\" stroke-width=\"6\"\/><rect x=\"75\" y=\"120\" width=\"12\" height=\"20\" class=\"socks\"\/><rect x=\"113\" y=\"120\" width=\"12\" height=\"20\" class=\"socks\"\/><\/svg>`\n },\n { \n id: 'hedwig', \n name: 'Hedvika', \n color: '#f5f5f5', \n bgColor: '#525252',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.feathers{fill:#f5f5f5}.head{fill:#f5f5f5}.beak{fill:#fbbf24}.eyes{fill:#1a1a1a}.spots{fill:#d4d4d8}<\/style><\/defs><ellipse cx=\"100\" cy=\"90\" rx=\"28\" ry=\"40\" class=\"feathers\"\/><circle cx=\"100\" cy=\"55\" r=\"22\" class=\"head\"\/><path d=\"M 110 50 L 125 45 L 115 55 Z\" class=\"beak\"\/><circle cx=\"95\" r=\"4\" class=\"eyes\"\/><circle cx=\"105\" r=\"4\" class=\"eyes\"\/><circle cx=\"95\" cy=\"62\" r=\"2.5\" fill=\"#fff\"\/><circle cx=\"105\" cy=\"62\" r=\"2.5\" fill=\"#fff\"\/><circle cx=\"85\" cy=\"80\" r=\"4\" class=\"spots\"\/><circle cx=\"115\" cy=\"85\" r=\"4\" class=\"spots\"\/><circle cx=\"100\" cy=\"110\" r=\"3.5\" class=\"spots\"\/><ellipse cx=\"75\" cy=\"100\" rx=\"15\" ry=\"25\" class=\"feathers\" opacity=\"0.8\"\/><ellipse cx=\"125\" cy=\"100\" rx=\"15\" ry=\"25\" class=\"feathers\" opacity=\"0.8\"\/><polygon points=\"100,135 95,150 105,150\" class=\"beak\" opacity=\"0.7\"\/><\/svg>`\n }\n ];\n\n \/\/ Default config\n const defaultConfig = {\n game_title: '\u26a1 Harry Potter Pexeso \u26a1',\n win_message: 'Jsi prav\u00fd kouzeln\u00edk!',\n primary_color: '#f59e0b',\n secondary_color: '#1e1b4b',\n text_color: '#fef3c7',\n accent_color: '#d97706',\n background_color: '#1a1a2e'\n };\n\n \/\/ Game state\n let cards = [];\n let flippedCards = [];\n let matchedPairs = 0;\n let moves = 0;\n let isLocked = false;\n\n \/\/ Create card HTML\n function createCardElement(card, index) {\n const character = characters.find(c => c.id === card.characterId);\n \n return `\n <div class=\"card-container aspect-square cursor-pointer\" data-index=\"${index}\" data-character=\"${card.characterId}\">\n <div class=\"card-inner\">\n <div class=\"card-front flex items-center justify-center\" style=\"background: linear-gradient(145deg, #4c1d95, #312e81); border: 2px solid rgba(251, 191, 36, 0.3);\">\n <div class=\"text-center\">\n <div class=\"text-4xl md:text-5xl mb-1\">\u2753<\/div>\n <div class=\"text-amber-400\/50 text-xs\" style=\"font-family: 'Cinzel', serif;\">Klikni<\/div>\n <\/div>\n <\/div>\n <div class=\"card-back flex flex-col items-center justify-center p-3\" style=\"background: linear-gradient(145deg, ${character.bgColor}, ${character.bgColor}dd); border: 3px solid ${character.color}; overflow: hidden;\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 mb-2\">${character.svg}<\/div>\n <div class=\"text-xs md:text-sm font-bold text-white\/90 text-center\" style=\"font-family: 'Cinzel', serif;\">${character.name}<\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Shuffle array\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n \/\/ Initialize game\n function initGame() {\n cards = [];\n flippedCards = [];\n matchedPairs = 0;\n moves = 0;\n isLocked = false;\n\n \/\/ Create pairs\n characters.forEach(char => {\n cards.push({ characterId: char.id });\n cards.push({ characterId: char.id });\n });\n\n \/\/ Shuffle\n cards = shuffleArray(cards);\n\n \/\/ Render board\n const board = document.getElementById('game-board');\n board.innerHTML = cards.map((card, index) => createCardElement(card, index)).join('');\n\n \/\/ Add click listeners\n document.querySelectorAll('.card-container').forEach(card => {\n card.addEventListener('click', handleCardClick);\n });\n\n updateStats();\n hideWinModal();\n }\n\n \/\/ Handle card click\n function handleCardClick(e) {\n if (isLocked) return;\n\n const cardContainer = e.currentTarget;\n const cardInner = cardContainer.querySelector('.card-inner');\n const index = parseInt(cardContainer.dataset.index);\n\n \/\/ Don't flip if already flipped or matched\n if (cardInner.classList.contains('flipped') || cardContainer.classList.contains('card-matched')) {\n return;\n }\n\n \/\/ Flip the card\n cardInner.classList.add('flipped');\n flippedCards.push({ element: cardContainer, index, characterId: cardContainer.dataset.character });\n\n \/\/ Check for match\n if (flippedCards.length === 2) {\n moves++;\n updateStats();\n isLocked = true;\n\n const [card1, card2] = flippedCards;\n\n if (card1.characterId === card2.characterId) {\n \/\/ Match found!\n setTimeout(() => {\n card1.element.classList.add('card-matched');\n card2.element.classList.add('card-matched');\n matchedPairs++;\n updateStats();\n flippedCards = [];\n isLocked = false;\n\n \/\/ Check for win\n if (matchedPairs === characters.length) {\n setTimeout(showWinModal, 500);\n }\n }, 500);\n } else {\n \/\/ No match - flip back\n setTimeout(() => {\n card1.element.querySelector('.card-inner').classList.remove('flipped');\n card2.element.querySelector('.card-inner').classList.remove('flipped');\n flippedCards = [];\n isLocked = false;\n }, 1000);\n }\n }\n }\n\n \/\/ Update stats display\n function updateStats() {\n document.getElementById('moves').textContent = moves;\n document.getElementById('pairs').textContent = `${matchedPairs}\/${characters.length}`;\n }\n\n \/\/ Show win modal\n function showWinModal() {\n document.getElementById('final-moves').textContent = moves;\n const modal = document.getElementById('win-modal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n \/\/ Hide win modal\n function hideWinModal() {\n const modal = document.getElementById('win-modal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n \/\/ Apply config to UI\n function applyConfig(config) {\n document.getElementById('game-title').textContent = config.game_title || defaultConfig.game_title;\n document.getElementById('win-message').textContent = config.win_message || defaultConfig.win_message;\n }\n\n \/\/ Element SDK integration\n const elementHandler = {\n defaultConfig,\n onConfigChange: async (config) => {\n applyConfig(config);\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => {\n config.background_color = value;\n document.body.style.background = `linear-gradient(135deg, ${value} 0%, ${adjustColor(value, 20)} 50%, ${adjustColor(value, 40)} 100%)`;\n window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (value) => {\n config.secondary_color = value;\n document.querySelectorAll('.card-front').forEach(el => {\n el.style.background = `linear-gradient(145deg, ${value}, ${adjustColor(value, -10)})`;\n });\n window.elementSdk.setConfig({ secondary_color: value });\n }\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => {\n config.primary_color = value;\n document.getElementById('game-title').style.color = value;\n document.getElementById('moves').style.color = value;\n document.getElementById('pairs').style.color = value;\n window.elementSdk.setConfig({ primary_color: value });\n }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => {\n config.text_color = value;\n document.querySelectorAll('.text-amber-200, .text-amber-200\\\\\/80, .text-amber-200\\\\\/70').forEach(el => {\n el.style.color = value;\n });\n window.elementSdk.setConfig({ text_color: value });\n }\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => {\n config.accent_color = value;\n document.querySelectorAll('#reset-btn, #play-again-btn').forEach(el => {\n el.style.background = `linear-gradient(to right, ${value}, ${adjustColor(value, 10)})`;\n });\n window.elementSdk.setConfig({ accent_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || 'Cinzel',\n set: (value) => {\n config.font_family = value;\n document.querySelectorAll('[style*=\"font-family\"]').forEach(el => {\n if (el.style.fontFamily.includes('Cinzel')) {\n el.style.fontFamily = `${value}, serif`;\n }\n });\n window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n ['game_title', config.game_title || defaultConfig.game_title],\n ['win_message', config.win_message || defaultConfig.win_message]\n ])\n };\n\n \/\/ Helper function to adjust color brightness\n function adjustColor(hex, percent) {\n const num = parseInt(hex.replace('#', ''), 16);\n const amt = Math.round(2.55 * percent);\n const R = Math.max(0, Math.min(255, (num >> 16) + amt));\n const G = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amt));\n const B = Math.max(0, Math.min(255, (num & 0x0000FF) + amt));\n return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);\n }\n\n \/\/ Initialize SDK\n if (window.elementSdk) {\n window.elementSdk.init(elementHandler);\n }\n\n \/\/ Event listeners\n document.getElementById('reset-btn').addEventListener('click', initGame);\n document.getElementById('play-again-btn').addEventListener('click', initGame);\n\n \/\/ Start game\n initGame();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d20f6d5b329bb94',t:'MTc3MTc4OTMyMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Harry Potter Pexeso \u26a1 Harry Potter Pexeso \u26a1 \u2728 \u2728 Najdi p\u00e1ry kouzeln\u00fdch postav! Tahy 0 Nalezeno 0\/8 \ud83d\udd04 Nov\u00e1 hra \ud83c\udfc6 V\u00fdborn\u011b! Jsi prav\u00fd kouzeln\u00edk! Dokon\u010deno za 0 tah\u016f \u2728 Hr\u00e1t znovu<\/p>\n","protected":false},"author":72,"featured_media":43291,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"full-width","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"content\"]","neve_meta_disable_header":"off","neve_meta_disable_footer":"on","neve_meta_disable_title":"","footnotes":""},"categories":[450],"tags":[452],"class_list":["post-43290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ozp-2026","tag-ozp-2026"],"_links":{"self":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/comments?post=43290"}],"version-history":[{"count":2,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290\/revisions"}],"predecessor-version":[{"id":44073,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290\/revisions\/44073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media\/43291"}],"wp:attachment":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media?parent=43290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/categories?post=43290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/tags?post=43290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43290,"date":"2026-02-22T20:43:13","date_gmt":"2026-02-22T19:43:13","guid":{"rendered":"https:\/\/zszelena42.eu\/2021\/?p=43290"},"modified":"2026-04-04T18:22:10","modified_gmt":"2026-04-04T17:22:10","slug":"pexeso","status":"publish","type":"post","link":"https:\/\/zszelena42.eu\/2021\/2025-2026\/ozp-2026\/pexeso\/","title":{"rendered":"Pexeso"},"content":{"rendered":"\n\n\n \n \n \n Harry Potter Pexeso<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n <style>\n * { box-sizing: border-box; }\n \n .card-container {\n perspective: 1000px;\n }\n \n .card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n \n .card-inner.flipped {\n transform: rotateY(180deg);\n }\n \n .card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n border-radius: 12px;\n }\n \n .card-back {\n transform: rotateY(180deg);\n }\n \n .card-matched {\n opacity: 0.6;\n pointer-events: none;\n }\n \n .card-matched .card-inner {\n transform: rotateY(180deg) scale(0.95);\n }\n \n @keyframes sparkle {\n 0%, 100% { opacity: 0; transform: scale(0); }\n 50% { opacity: 1; transform: scale(1); }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n \n .sparkle {\n animation: sparkle 1.5s infinite;\n }\n \n .float-animation {\n animation: float 3s ease-in-out infinite;\n }\n \n @keyframes celebrate {\n 0% { transform: scale(0.8); opacity: 0; }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); opacity: 1; }\n }\n \n .celebrate {\n animation: celebrate 0.5s ease-out forwards;\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full m-0 p-0 overflow-auto\" style=\"background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);\">\n <div id=\"app\" class=\"w-full min-h-full flex flex-col items-center p-4 md:p-8\">\n \n <header class=\"text-center mb-6 w-full max-w-4xl\">\n <div class=\"relative inline-block\">\n <h1 id=\"game-title\" class=\"text-3xl md:text-5xl font-bold text-amber-400 mb-2\" style=\"font-family: 'Cinzel', serif; text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);\">\u26a1 Harry Potter Pexeso \u26a1<\/h1>\n <div class=\"absolute -top-2 -left-4 text-2xl sparkle\" style=\"animation-delay: 0s;\">\n \u2728\n <\/div>\n <div class=\"absolute -top-2 -right-4 text-2xl sparkle\" style=\"animation-delay: 0.5s;\">\n \u2728\n <\/div>\n <\/div>\n <p class=\"text-amber-200\/80 text-lg\" style=\"font-family: 'Crimson Text', serif;\">Najdi p\u00e1ry kouzeln\u00fdch postav!<\/p>\n <\/header>\n <div class=\"flex gap-6 mb-6 flex-wrap justify-center\">\n <div class=\"bg-indigo-900\/50 backdrop-blur-sm px-6 py-3 rounded-xl border border-amber-400\/30\">\n <span class=\"text-amber-200\/70 text-sm\" style=\"font-family: 'Crimson Text', serif;\">Tahy<\/span>\n <p id=\"moves\" class=\"text-2xl font-bold text-amber-400\" style=\"font-family: 'Cinzel', serif;\">0<\/p>\n <\/div>\n <div class=\"bg-indigo-900\/50 backdrop-blur-sm px-6 py-3 rounded-xl border border-amber-400\/30\">\n <span class=\"text-amber-200\/70 text-sm\" style=\"font-family: 'Crimson Text', serif;\">Nalezeno<\/span>\n <p id=\"pairs\" class=\"text-2xl font-bold text-amber-400\" style=\"font-family: 'Cinzel', serif;\">0\/8<\/p>\n <\/div>\n <\/div>\n <div id=\"game-board\" class=\"grid grid-cols-4 gap-3 md:gap-4 max-w-2xl w-full mb-6\">\n \n <\/div> <button id=\"reset-btn\" class=\"bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 text-indigo-950 font-bold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg shadow-amber-500\/30\" style=\"font-family: 'Cinzel', serif;\"> \ud83d\udd04 Nov\u00e1 hra <\/button> \n <div id=\"win-modal\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-sm hidden items-center justify-center z-50\">\n <div class=\"bg-gradient-to-b from-indigo-900 to-indigo-950 p-8 rounded-2xl border-2 border-amber-400 text-center max-w-md mx-4 celebrate\">\n <div class=\"text-6xl mb-4 float-animation\">\n \ud83c\udfc6\n <\/div>\n <h2 class=\"text-3xl font-bold text-amber-400 mb-2\" style=\"font-family: 'Cinzel', serif;\">V\u00fdborn\u011b!<\/h2>\n <p id=\"win-message\" class=\"text-amber-200 mb-2\" style=\"font-family: 'Crimson Text', serif;\">Jsi prav\u00fd kouzeln\u00edk!<\/p>\n <p class=\"text-amber-200\/80 mb-6\" style=\"font-family: 'Crimson Text', serif;\">Dokon\u010deno za <span id=\"final-moves\" class=\"text-amber-400 font-bold\">0<\/span> tah\u016f<\/p><button id=\"play-again-btn\" class=\"bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 text-indigo-950 font-bold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105\" style=\"font-family: 'Cinzel', serif;\"> \u2728 Hr\u00e1t znovu <\/button>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Character data with detailed SVG illustrations\n const characters = [\n { \n id: 'harry', \n name: 'Harry Potter', \n color: '#dc2626', \n bgColor: '#7f1d1d',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#1a1a1a}.skin{fill:#fdbcb4}.eyes{fill:#3b82f6}.lightning{fill:#fbbf24}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 50 Q 65 25 100 25 Q 135 25 135 50 L 135 70 Q 100 75 65 70 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#8b5a3c\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#8b5a3c\"\/><polygon points=\"100,105 95,120 105,120\" fill=\"#d97706\"\/><ellipse cx=\"85\" cy=\"130\" rx=\"8\" ry=\"15\" fill=\"#1a1a1a\"\/><ellipse cx=\"115\" cy=\"130\" rx=\"8\" ry=\"15\" fill=\"#1a1a1a\"\/><circle cx=\"95\" cy=\"40\" r=\"4\" class=\"lightning\"\/><path d=\"M 100 35 L 103 42 L 98 43\" class=\"lightning\"\/><\/svg>`\n },\n { \n id: 'hermione', \n name: 'Hermiona', \n color: '#b45309', \n bgColor: '#78350f',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#8b4513}.skin{fill:#fdbcb4}.eyes{fill:#654321}.book{fill:#dc2626}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 45 Q 65 25 100 25 Q 135 25 135 45 L 135 75 Q 100 80 65 75 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#a0522d\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#a0522d\"\/><polygon points=\"100,105 97,120 103,120\" fill=\"#d97706\"\/><rect x=\"75\" y=\"130\" width=\"20\" height=\"30\" class=\"book\"\/><rect x=\"105\" y=\"130\" width=\"20\" height=\"30\" class=\"book\" opacity=\"0.7\"\/><path d=\"M 78 135 L 92 135 M 78 140 L 92 140 M 78 145 L 92 145\" stroke=\"#fbbf24\" stroke-width=\"1\"\/><\/svg>`\n },\n { \n id: 'ron', \n name: 'Ron Weasley', \n color: '#ea580c', \n bgColor: '#7c2d12',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#dc2414}.skin{fill:#fdbcb4}.eyes{fill:#4f46e5}.freckles{fill:#d97706}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"35\" class=\"skin\"\/><path d=\"M 65 50 Q 65 25 100 25 Q 135 25 135 50 L 135 70 Q 100 75 65 70 Z\" class=\"hair\"\/><circle cx=\"90\" r=\"5\" class=\"eyes\"\/><circle cx=\"110\" r=\"5\" class=\"eyes\"\/><circle cx=\"85\" cy=\"65\" r=\"2\" class=\"freckles\"\/><circle cx=\"95\" cy=\"67\" r=\"2\" class=\"freckles\"\/><circle cx=\"115\" cy=\"66\" r=\"2\" class=\"freckles\"\/><circle cx=\"125\" cy=\"64\" r=\"2\" class=\"freckles\"\/><line x1=\"100\" y1=\"70\" x2=\"100\" y2=\"95\" stroke=\"#fdbcb4\" stroke-width=\"8\"\/><circle cx=\"85\" cy=\"100\" r=\"6\" fill=\"#d2691e\"\/><circle cx=\"115\" cy=\"100\" r=\"6\" fill=\"#d2691e\"\/><polygon points=\"100,105 97,120 103,120\" fill=\"#d97706\"\/><polygon points=\"75,130 75,160 85,155 85,130\" fill=\"#7c3aed\"\/><polygon points=\"115,130 115,160 125,155 125,130\" fill=\"#7c3aed\"\/><\/svg>`\n },\n { \n id: 'dumbledore', \n name: 'Albus Brumb\u00e1l', \n color: '#7c3aed', \n bgColor: '#4c1d95',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.beard{fill:#c0c0c0}.skin{fill:#e8c5a5}.eyes{fill:#1e40af}.hat{fill:#6b21a8}<\/style><\/defs><path d=\"M 80 35 L 100 15 L 120 35 L 115 50 L 85 50 Z\" class=\"hat\"\/><circle cx=\"100\" cy=\"65\" r=\"32\" class=\"skin\"\/><path d=\"M 75 75 Q 75 90 100 95 Q 125 90 125 75\" class=\"beard\"\/><path d=\"M 75 80 Q 80 88 100 92 Q 120 88 125 80\" fill=\"#a9a9a9\"\/><circle cx=\"88\" r=\"4\" class=\"eyes\"\/><circle cx=\"112\" r=\"4\" class=\"eyes\"\/><circle cx=\"100\" cy=\"80\" r=\"3\" fill=\"#dc2626\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"115\" stroke=\"#e8c5a5\" stroke-width=\"8\"\/><polygon points=\"70,120 130,120 135,165 65,165\" fill=\"#6b21a8\"\/><path d=\"M 75 125 L 75 160 M 85 125 L 85 160 M 95 125 L 95 160 M 105 125 L 105 160 M 115 125 L 115 160 M 125 125 L 125 160\" stroke=\"#fbbf24\" stroke-width=\"1.5\"\/><\/svg>`\n },\n { \n id: 'hagrid', \n name: 'Rubeus Hagrid', \n color: '#65a30d', \n bgColor: '#365314',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#3d2817}.skin{fill:#cd8f5c}.beard{fill:#6b4423}.eyes{fill:#8b7355}<\/style><\/defs><circle cx=\"100\" cy=\"55\" r=\"40\" class=\"skin\"\/><path d=\"M 60 55 Q 60 25 100 25 Q 140 25 140 55 L 140 80 Q 100 85 60 80 Z\" class=\"hair\"\/><path d=\"M 70 75 Q 80 90 100 95 Q 120 90 130 75\" class=\"beard\"\/><circle cx=\"85\" r=\"6\" class=\"eyes\"\/><circle cx=\"115\" r=\"6\" class=\"eyes\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"125\" stroke=\"#cd8f5c\" stroke-width=\"12\"\/><ellipse cx=\"70\" cy=\"135\" rx=\"12\" ry=\"20\" fill=\"#2d1810\"\/><ellipse cx=\"130\" cy=\"135\" rx=\"12\" ry=\"20\" fill=\"#2d1810\"\/><circle cx=\"75\" cy=\"150\" r=\"10\" fill=\"#8b7355\"\/><circle cx=\"125\" cy=\"150\" r=\"10\" fill=\"#8b7355\"\/><\/svg>`\n },\n { \n id: 'snape', \n name: 'Severus Snape', \n color: '#0891b2', \n bgColor: '#164e63',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.hair{fill:#1a1a1a}.skin{fill:#e8c5a5}.eyes{fill:#1e1e1e}.robes{fill:#1a1a1a}<\/style><\/defs><circle cx=\"100\" cy=\"60\" r=\"33\" class=\"skin\"\/><path d=\"M 67 50 Q 67 25 100 25 Q 133 25 133 50 L 133 75 Q 100 80 67 75 Z\" class=\"hair\"\/><path d=\"M 67 60 Q 75 80 100 85 Q 125 80 133 60\" class=\"hair\"\/><circle cx=\"87\" r=\"5\" class=\"eyes\"\/><circle cx=\"113\" r=\"5\" class=\"eyes\"\/><polygon points=\"100,75 98,85 102,85\" fill=\"#8b5a3c\"\/><line x1=\"100\" y1=\"93\" x2=\"100\" y2=\"115\" stroke=\"#e8c5a5\" stroke-width=\"7\"\/><polygon points=\"60,115 140,115 145,165 55,165\" class=\"robes\"\/><path d=\"M 75 120 L 75 160 M 125 120 L 125 160\" stroke=\"#0891b2\" stroke-width=\"2\"\/><\/svg>`\n },\n { \n id: 'dobby', \n name: 'Dobby', \n color: '#c026d3', \n bgColor: '#701a75',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.skin{fill:#d4a5a5}.ears{fill:#c08080}.eyes{fill:#000}.socks{fill:#f5f5f5}<\/style><\/defs><circle cx=\"100\" cy=\"65\" r=\"30\" class=\"skin\"\/><ellipse cx=\"75\" cy=\"45\" rx=\"12\" ry=\"20\" class=\"ears\" transform=\"rotate(-30 75 45)\"\/><ellipse cx=\"125\" cy=\"45\" rx=\"12\" ry=\"20\" class=\"ears\" transform=\"rotate(30 125 45)\"\/><circle cx=\"88\" r=\"6\" class=\"eyes\"\/><circle cx=\"112\" r=\"6\" class=\"eyes\"\/><circle cx=\"88\" cy=\"62\" r=\"3\" fill=\"#fff\"\/><circle cx=\"112\" cy=\"62\" r=\"3\" fill=\"#fff\"\/><polygon points=\"100,75 98,90 102,90\" fill=\"#c08080\"\/><line x1=\"100\" y1=\"95\" x2=\"100\" y2=\"120\" stroke=\"#d4a5a5\" stroke-width=\"6\"\/><rect x=\"75\" y=\"120\" width=\"12\" height=\"20\" class=\"socks\"\/><rect x=\"113\" y=\"120\" width=\"12\" height=\"20\" class=\"socks\"\/><\/svg>`\n },\n { \n id: 'hedwig', \n name: 'Hedvika', \n color: '#f5f5f5', \n bgColor: '#525252',\n svg: `<svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><style>.feathers{fill:#f5f5f5}.head{fill:#f5f5f5}.beak{fill:#fbbf24}.eyes{fill:#1a1a1a}.spots{fill:#d4d4d8}<\/style><\/defs><ellipse cx=\"100\" cy=\"90\" rx=\"28\" ry=\"40\" class=\"feathers\"\/><circle cx=\"100\" cy=\"55\" r=\"22\" class=\"head\"\/><path d=\"M 110 50 L 125 45 L 115 55 Z\" class=\"beak\"\/><circle cx=\"95\" r=\"4\" class=\"eyes\"\/><circle cx=\"105\" r=\"4\" class=\"eyes\"\/><circle cx=\"95\" cy=\"62\" r=\"2.5\" fill=\"#fff\"\/><circle cx=\"105\" cy=\"62\" r=\"2.5\" fill=\"#fff\"\/><circle cx=\"85\" cy=\"80\" r=\"4\" class=\"spots\"\/><circle cx=\"115\" cy=\"85\" r=\"4\" class=\"spots\"\/><circle cx=\"100\" cy=\"110\" r=\"3.5\" class=\"spots\"\/><ellipse cx=\"75\" cy=\"100\" rx=\"15\" ry=\"25\" class=\"feathers\" opacity=\"0.8\"\/><ellipse cx=\"125\" cy=\"100\" rx=\"15\" ry=\"25\" class=\"feathers\" opacity=\"0.8\"\/><polygon points=\"100,135 95,150 105,150\" class=\"beak\" opacity=\"0.7\"\/><\/svg>`\n }\n ];\n\n \/\/ Default config\n const defaultConfig = {\n game_title: '\u26a1 Harry Potter Pexeso \u26a1',\n win_message: 'Jsi prav\u00fd kouzeln\u00edk!',\n primary_color: '#f59e0b',\n secondary_color: '#1e1b4b',\n text_color: '#fef3c7',\n accent_color: '#d97706',\n background_color: '#1a1a2e'\n };\n\n \/\/ Game state\n let cards = [];\n let flippedCards = [];\n let matchedPairs = 0;\n let moves = 0;\n let isLocked = false;\n\n \/\/ Create card HTML\n function createCardElement(card, index) {\n const character = characters.find(c => c.id === card.characterId);\n \n return `\n <div class=\"card-container aspect-square cursor-pointer\" data-index=\"${index}\" data-character=\"${card.characterId}\">\n <div class=\"card-inner\">\n <div class=\"card-front flex items-center justify-center\" style=\"background: linear-gradient(145deg, #4c1d95, #312e81); border: 2px solid rgba(251, 191, 36, 0.3);\">\n <div class=\"text-center\">\n <div class=\"text-4xl md:text-5xl mb-1\">\u2753<\/div>\n <div class=\"text-amber-400\/50 text-xs\" style=\"font-family: 'Cinzel', serif;\">Klikni<\/div>\n <\/div>\n <\/div>\n <div class=\"card-back flex flex-col items-center justify-center p-3\" style=\"background: linear-gradient(145deg, ${character.bgColor}, ${character.bgColor}dd); border: 3px solid ${character.color}; overflow: hidden;\">\n <div class=\"w-20 h-20 md:w-24 md:h-24 mb-2\">${character.svg}<\/div>\n <div class=\"text-xs md:text-sm font-bold text-white\/90 text-center\" style=\"font-family: 'Cinzel', serif;\">${character.name}<\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Shuffle array\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n \/\/ Initialize game\n function initGame() {\n cards = [];\n flippedCards = [];\n matchedPairs = 0;\n moves = 0;\n isLocked = false;\n\n \/\/ Create pairs\n characters.forEach(char => {\n cards.push({ characterId: char.id });\n cards.push({ characterId: char.id });\n });\n\n \/\/ Shuffle\n cards = shuffleArray(cards);\n\n \/\/ Render board\n const board = document.getElementById('game-board');\n board.innerHTML = cards.map((card, index) => createCardElement(card, index)).join('');\n\n \/\/ Add click listeners\n document.querySelectorAll('.card-container').forEach(card => {\n card.addEventListener('click', handleCardClick);\n });\n\n updateStats();\n hideWinModal();\n }\n\n \/\/ Handle card click\n function handleCardClick(e) {\n if (isLocked) return;\n\n const cardContainer = e.currentTarget;\n const cardInner = cardContainer.querySelector('.card-inner');\n const index = parseInt(cardContainer.dataset.index);\n\n \/\/ Don't flip if already flipped or matched\n if (cardInner.classList.contains('flipped') || cardContainer.classList.contains('card-matched')) {\n return;\n }\n\n \/\/ Flip the card\n cardInner.classList.add('flipped');\n flippedCards.push({ element: cardContainer, index, characterId: cardContainer.dataset.character });\n\n \/\/ Check for match\n if (flippedCards.length === 2) {\n moves++;\n updateStats();\n isLocked = true;\n\n const [card1, card2] = flippedCards;\n\n if (card1.characterId === card2.characterId) {\n \/\/ Match found!\n setTimeout(() => {\n card1.element.classList.add('card-matched');\n card2.element.classList.add('card-matched');\n matchedPairs++;\n updateStats();\n flippedCards = [];\n isLocked = false;\n\n \/\/ Check for win\n if (matchedPairs === characters.length) {\n setTimeout(showWinModal, 500);\n }\n }, 500);\n } else {\n \/\/ No match - flip back\n setTimeout(() => {\n card1.element.querySelector('.card-inner').classList.remove('flipped');\n card2.element.querySelector('.card-inner').classList.remove('flipped');\n flippedCards = [];\n isLocked = false;\n }, 1000);\n }\n }\n }\n\n \/\/ Update stats display\n function updateStats() {\n document.getElementById('moves').textContent = moves;\n document.getElementById('pairs').textContent = `${matchedPairs}\/${characters.length}`;\n }\n\n \/\/ Show win modal\n function showWinModal() {\n document.getElementById('final-moves').textContent = moves;\n const modal = document.getElementById('win-modal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n \/\/ Hide win modal\n function hideWinModal() {\n const modal = document.getElementById('win-modal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n \/\/ Apply config to UI\n function applyConfig(config) {\n document.getElementById('game-title').textContent = config.game_title || defaultConfig.game_title;\n document.getElementById('win-message').textContent = config.win_message || defaultConfig.win_message;\n }\n\n \/\/ Element SDK integration\n const elementHandler = {\n defaultConfig,\n onConfigChange: async (config) => {\n applyConfig(config);\n },\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => {\n config.background_color = value;\n document.body.style.background = `linear-gradient(135deg, ${value} 0%, ${adjustColor(value, 20)} 50%, ${adjustColor(value, 40)} 100%)`;\n window.elementSdk.setConfig({ background_color: value });\n }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (value) => {\n config.secondary_color = value;\n document.querySelectorAll('.card-front').forEach(el => {\n el.style.background = `linear-gradient(145deg, ${value}, ${adjustColor(value, -10)})`;\n });\n window.elementSdk.setConfig({ secondary_color: value });\n }\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => {\n config.primary_color = value;\n document.getElementById('game-title').style.color = value;\n document.getElementById('moves').style.color = value;\n document.getElementById('pairs').style.color = value;\n window.elementSdk.setConfig({ primary_color: value });\n }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => {\n config.text_color = value;\n document.querySelectorAll('.text-amber-200, .text-amber-200\\\\\/80, .text-amber-200\\\\\/70').forEach(el => {\n el.style.color = value;\n });\n window.elementSdk.setConfig({ text_color: value });\n }\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => {\n config.accent_color = value;\n document.querySelectorAll('#reset-btn, #play-again-btn').forEach(el => {\n el.style.background = `linear-gradient(to right, ${value}, ${adjustColor(value, 10)})`;\n });\n window.elementSdk.setConfig({ accent_color: value });\n }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || 'Cinzel',\n set: (value) => {\n config.font_family = value;\n document.querySelectorAll('[style*=\"font-family\"]').forEach(el => {\n if (el.style.fontFamily.includes('Cinzel')) {\n el.style.fontFamily = `${value}, serif`;\n }\n });\n window.elementSdk.setConfig({ font_family: value });\n }\n },\n fontSizeable: undefined\n }),\n mapToEditPanelValues: (config) => new Map([\n ['game_title', config.game_title || defaultConfig.game_title],\n ['win_message', config.win_message || defaultConfig.win_message]\n ])\n };\n\n \/\/ Helper function to adjust color brightness\n function adjustColor(hex, percent) {\n const num = parseInt(hex.replace('#', ''), 16);\n const amt = Math.round(2.55 * percent);\n const R = Math.max(0, Math.min(255, (num >> 16) + amt));\n const G = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amt));\n const B = Math.max(0, Math.min(255, (num & 0x0000FF) + amt));\n return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);\n }\n\n \/\/ Initialize SDK\n if (window.elementSdk) {\n window.elementSdk.init(elementHandler);\n }\n\n \/\/ Event listeners\n document.getElementById('reset-btn').addEventListener('click', initGame);\n document.getElementById('play-again-btn').addEventListener('click', initGame);\n\n \/\/ Start game\n initGame();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d20f6d5b329bb94',t:'MTc3MTc4OTMyMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Harry Potter Pexeso \u26a1 Harry Potter Pexeso \u26a1 \u2728 \u2728 Najdi p\u00e1ry kouzeln\u00fdch postav! Tahy 0 Nalezeno 0\/8 \ud83d\udd04 Nov\u00e1 hra \ud83c\udfc6 V\u00fdborn\u011b! Jsi prav\u00fd kouzeln\u00edk! Dokon\u010deno za 0 tah\u016f \u2728 Hr\u00e1t znovu<\/p>\n","protected":false},"author":72,"featured_media":43291,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"full-width","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"content\"]","neve_meta_disable_header":"off","neve_meta_disable_footer":"on","neve_meta_disable_title":"","footnotes":""},"categories":[450],"tags":[452],"class_list":["post-43290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ozp-2026","tag-ozp-2026"],"_links":{"self":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/comments?post=43290"}],"version-history":[{"count":2,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290\/revisions"}],"predecessor-version":[{"id":44073,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43290\/revisions\/44073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media\/43291"}],"wp:attachment":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media?parent=43290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/categories?post=43290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/tags?post=43290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}