const defaultConfig = {
    game_title: 'Ινδοευρωπαϊκές Ρίζες Λέξεων',
    instruction_text: 'Ανακαλύψτε ποιες λέξεις σε διάφορες γλώσσες έχουν κοινές ρίζες!',
    primary_color: '#1e3a5f',
    secondary_color: '#f8f5f0',
    text_color: '#2d3748',
    accent_color: '#c9a227',
    highlight_color: '#3d5a80'
};

const wordData = [
    {

    id: 1,
    greek: 'ΠΑΤΕΡΑΣ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'pitṛ', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'πατήρ', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'pater', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Vater', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'father', code: 'eng' },
        {
            lang: 'Ισπανικά', word: 'padre', code: 'spa' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Mann', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'parent', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'avus', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'hombre', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'homme', code: 'fra' }
    ],
    note: 'Η ρίζα *ph₂tḗr είναι από τις πιο σταθερές στις ινδοευρωπαϊκές γλώσσες και διατηρείται σχεδόν αναλλοίωτη σε όλες τις απογόνους γλώσσες.'
    },
    {

    id: 2,
    greek: 'ΜΗΤΕΡΑ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'mātṛ', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'μήτηρ', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'māter', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Mutter', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'mother', code: 'eng' },
        {
            lang: 'Ισπανικά', word: 'madre', code: 'spa' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Frau', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'woman', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'femina', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'mujer', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'femme', code: 'fra' }
    ],
    note: 'Η ρίζα *méh₂tēr χαρακτηρίζεται σε όλες τις ινδοευρωπαϊκές γλώσσες με μικρές φωνητικές παραλλαγές. Η ομοιότητα είναι εντυπωσιακή!'
    },
    {

    id: 3,
    greek: 'ΑΔΕΛΦΟΣ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'bhrātṛ', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'φράτηρ', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'frāter', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Bruder', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'brother', code: 'eng' },
        {
            lang: 'Περσικά', word: 'barādar', code: 'fas' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Sohn', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'sibling', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'socius', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'hermano', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'ami', code: 'fra' }
    ],
    note: 'Το αρχ. ελλ. "φράτηρ" σήμαινε μέλος φρατρίας (κοινωνική ομάδα). Η ρίζα *bʰrāh₂tēr δείχνει τη φωνητική μετάπτωση bh→ph→f που συναντάμε σε πολλές γλώσσες.'
    },
    {

    id: 4,
    greek: 'ΘΥΓΑΤΕΡΑ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'duhitṛ', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'θυγάτηρ', code: 'grc' },
        {
            lang: 'Γερμανικά', word: 'Tochter', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'daughter', code: 'eng' },
        {
            lang: 'Ρωσικά', word: 'doch', code: 'rus' },
        {
            lang: 'Αρμενικά', word: 'dustr', code: 'hye' }
    ],
    distractors: [
        {
            lang: 'Λατινικά', word: 'puella', code: 'lat' },
        {
            lang: 'Λατινικά', word: 'filia', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Mädchen', code: 'deu' },
        {
            lang: 'Ισπανικά', word: 'hija', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'fille', code: 'fra' }
    ],
    note: '⚠️ Το λατ. "fīlia" δεν είναι συγγενικό - προέρχεται από διαφορετική ρίζα. Η Λατινική γλώσσα αντικατέστησε την αρχική ινδοευρωπαϊκή λέξη με νεότερο σχηματισμό!'
    },
    {

    id: 5,
    greek: 'ΝΥΧΤΑ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'naktam', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'νύξ', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'nox', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Nacht', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'night', code: 'eng' },
        {
            lang: 'Ιταλικά', word: 'notte', code: 'ita' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Abend', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'dark', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'tenebrae', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'oscuro', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'soir', code: 'fra' }
    ],
    note: 'Η ρίζα *nókʷts διατηρείται σε όλες τις ινδοευρωπαϊκές γλώσσες. Το "gh" στο αγγλικό "night" κάποτε προφερόταν αλλά σήμερα είναι σιωπηλό!'
    },
    {

    id: 6,
    greek: 'ΟΝΟΜΑ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'nāma', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'ὄνομα', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'nōmen', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Name', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'name', code: 'eng' },
        {
            lang: 'Περσικά', word: 'nām', code: 'fas' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Wort', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'title', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'appellatio', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'palabra', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'mot', code: 'fra' }
    ],
    note: 'Η ρίζα *h₁nómn̥ είναι μία από τις πιο σταθερές. Το αρχικό "ο-" στα νέα ελληνικά είναι πρόθημα που προστέθηκε αργότερα.'
    },
    {

    id: 7,
    greek: 'ΤΡΕΙΣ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'trayas', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'τρεῖς', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'trēs', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'drei', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'three', code: 'eng' },
        {
            lang: 'Ρωσικά', word: 'tri', code: 'rus' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'vier', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'third', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'tertius', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'tercero', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'triple', code: 'fra' }
    ],
    note: 'Η ρίζα *tréyes παρουσιάζει εντυπωσιακή σταθερότητα. Τα αριθμητικά γενικά διατηρούνται σχεδόν αναλλοίωτα διαχρονικά σε όλες τις ινδοευρωπαϊκές γλώσσες.'
    },
    {

    id: 8,
    greek: 'ΔΥΟ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'dvā', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'δύο', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'duo', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'zwei', code: 'deu' },
        {
            lang: 'Ρωσικά', word: 'dva', code: 'rus' },
        {
            lang: 'Περσικά', word: 'do', code: 'fas' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'beide', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'pair', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'bis', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'doble', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'double', code: 'fra' }
    ],
    note: 'Η ρίζα *dwóh₁ εμφανίζεται σε όλες τις ινδοευρωπαϊκές γλώσσες. Το γερμ. "zwei" προέρχεται από την ίδια ρίζα με φωνητική αλλαγή d→z (γερμανική μετάπτωση συμφώνων).'
    },
    {

    id: 9,
    greek: 'ΚΑΡΔΙΑ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'hṛd', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'καρδία', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'cor', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Herz', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'heart', code: 'eng' },
        {
            lang: 'Αρμενικά', word: 'sirt', code: 'hye' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Seele', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'chest', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'pectus', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'pecho', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'poitrine', code: 'fra' }
    ],
    note: 'Η ρίζα *ḱérd παρουσιάζει ενδιαφέρουσες φωνητικές αλλαγές. Το αρχικό *ḱ έγινε "κ" στα ελληνικά/λατινικά αλλά "h" στα γερμανικά/αγγλικά (νόμος Grimm).'
    },
    {

    id: 10,
    greek: 'ΝΕΡΟ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'udán', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'ὕδωρ', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'unda', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Wasser', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'water', code: 'eng' },
        {
            lang: 'Ρωσικά', word: 'voda', code: 'rus' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Fluss', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'liquid', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'liquor', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'líquido', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'eau', code: 'fra' }
    ],
    note: 'Υπάρχουν δύο ινδοευρωπαϊκές ρίζες για το νερό: *wódr̥ (ελληνικά/σανσκριτικά "ὕδωρ/udán") και *wed- (γερμανικά/αγγλικά "Wasser/water"). Και οι δύο προέρχονται από κοινή προέλευση.'
    },
    {

    id: 11,
    greek: 'ΗΛΙΟΣ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'sūrya', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'ἥλιος', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'sōl', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'Sonne', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'sun', code: 'eng' },
        {
            lang: 'Ισπανικά', word: 'sol', code: 'spa' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'Tag', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'light', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'lux', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'luz', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'lumière', code: 'fra' }
    ],
    note: 'Η ρίζα *sóh₂wl̥ είναι πολύ αρχαϊκή. Το ελληνικό "ἥλιος" έχασε το αρχικό "s" λόγω φαινομένου που ονομάζεται ψίλωση (απώλεια του αρχικού s- σε αρχαία ελληνικά).'
    },
    {

    id: 12,
    greek: 'ΝΕΟΣ',
    correctCognates: [
        {
            lang: 'Σανσκριτικά', word: 'navas', code: 'san' },
        {
            lang: 'Αρχ. Ελληνικά', word: 'νέος', code: 'grc' },
        {
            lang: 'Λατινικά', word: 'novus', code: 'lat' },
        {
            lang: 'Γερμανικά', word: 'neu', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'new', code: 'eng' },
        {
            lang: 'Ρωσικά', word: 'novyy', code: 'rus' }
    ],
    distractors: [
        {
            lang: 'Γερμανικά', word: 'jung', code: 'deu' },
        {
            lang: 'Αγγλικά', word: 'young', code: 'eng' },
        {
            lang: 'Λατινικά', word: 'recens', code: 'lat' },
        {
            lang: 'Ισπανικά', word: 'joven', code: 'spa' },
        {
            lang: 'Γαλλικά', word: 'jeune', code: 'fra' }
    ],
    note: 'Η ρίζα *néwos διατηρείται σχεδόν αναλλοίωτη σε όλες τις ινδοευρωπαϊκές γλώσσες - μια από τις πιο διαφανείς και εύκολα αναγνωρίσιμες συγγένειες!'
    }
];

let gameState = {

    currentRound: 0,
    score: 0,
    totalRounds: 6,
    selectedGreek: null,
    selectedCognate: null,
    matchedPairs: [],
    wrongPairs: [],
    currentWordSet: null,
    shuffledOptions: [],
    showingNote: false,
    gameComplete: false,
    roundWords: []
};

function shuffleArray(array) {

    const shuffled = [...array];
    for (let i = shuffled.length - 1; i > 0; i--) {

    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return shuffled;
}

function selectRandomWords() {

    const shuffled = shuffleArray(wordData);
    return shuffled.slice(0, gameState.totalRounds);
}

function initRound() {

    if (gameState.currentRound >= gameState.totalRounds) {

    gameState.gameComplete = true;
    renderApp();
    return;
    }

    const currentWord = gameState.roundWords[gameState.currentRound];
    gameState.currentWordSet = currentWord;
    
    // Mix correct cognates with distractors
    const allOptions = [...currentWord.correctCognates, ...currentWord.distractors];
    gameState.shuffledOptions = shuffleArray(allOptions);
    
    gameState.matchedPairs = [];
    gameState.wrongPairs = [];
    gameState.selectedGreek = null;
    gameState.selectedCognate = null;
    gameState.showingNote = false;
    renderApp();
}

function startNewGame() {

    gameState = {

    currentRound: 0,
    score: 0,
    totalRounds: 6,
    selectedGreek: null,
    selectedCognate: null,
    matchedPairs: [],
    wrongPairs: [],
    currentWordSet: null,
    shuffledOptions: [],
    showingNote: false,
    gameComplete: false,
    roundWords: selectRandomWords()
    };
    initRound();
}

function handleGreekClick() {

    if (gameState.matchedPairs.length === gameState.currentWordSet.correctCognates.length || gameState.showingNote) return;
    
    if (gameState.selectedGreek) {

    gameState.selectedGreek = null;
    } else {

    gameState.selectedGreek = true;
    }
    
    renderApp();
}

function isCorrectCognate(option) {

    return gameState.currentWordSet.correctCognates.some(
    cognate => cognate.word === option.word && cognate.lang === option.lang
    );
}

function handleCognateClick(index) {

    const option = gameState.shuffledOptions[index];
    
    if (gameState.matchedPairs.includes(index) || gameState.wrongPairs.includes(index) || gameState.showingNote) return;
    
    if (!gameState.selectedGreek) {

    gameState.selectedGreek = true;
    }
    
    gameState.selectedCognate = index;
    
    const isCorrect = isCorrectCognate(option);
    
    setTimeout(() => {

    if (isCorrect) {

        // Correct match
        gameState.matchedPairs.push(index);
        gameState.score += 1;
        
        // Check if round complete
        if (gameState.matchedPairs.length === gameState.currentWordSet.correctCognates.length) {

        gameState.showingNote = true;
        }
        
        renderApp();
        
        // Flash correct animation
        const card = document.querySelector(`[data-cognate-index="${
        index}"]`);
        if (card) {

        card.classList.add('correct-flash');
        setTimeout(() => card.classList.remove('correct-flash'), 600);
        }
    } else {

        // Wrong match - deduct 1 point
        gameState.wrongPairs.push(index);
        gameState.score = Math.max(0, gameState.score - 1);
        
        renderApp();
        
        // Flash wrong animation
        const card = document.querySelector(`[data-cognate-index="${
        index}"]`);
        if (card) {

        card.classList.add('wrong-flash');
        setTimeout(() => card.classList.remove('wrong-flash'), 500);
        }
    }
    
    gameState.selectedGreek = null;
    gameState.selectedCognate = null;
    renderApp();
    }, 200);
    
    renderApp();
}

function nextRound() {

    gameState.currentRound++;
    initRound();
}

function getLangColor(code) {

    const colors = {

    san: '#9f7aea',
    grc: '#3182ce',
    lat: '#dd6b20',
    deu: '#38a169',
    eng: '#e53e3e',
    spa: '#ed8936',
    fra: '#4299e1',
    fas: '#805ad5',
    rus: '#d53f8c',
    hye: '#e53e3e',
    ita: '#38b2ac'
    };
    return colors[code] || '#718096';
}

function renderApp() {

    const config = window.elementSdk?.config || defaultConfig;
    const app = document.getElementById('app');
    
    if (gameState.gameComplete) {

    renderCompletionScreen(app, config);
    return;
    }
    
    if (!gameState.currentWordSet) {

    renderStartScreen(app, config);
    return;
    }
    
    renderGameScreen(app, config);
}

function renderStartScreen(app, config) {

    const primaryColor = config.primary_color || defaultConfig.primary_color;
    const secondaryColor = config.secondary_color || defaultConfig.secondary_color;
    const textColor = config.text_color || defaultConfig.text_color;
    const accentColor = config.accent_color || defaultConfig.accent_color;
    
    app.innerHTML = `
    <div class="h-full w-full flex flex-col items-center justify-center p-8" style="background: linear-gradient(135deg, ${
        secondaryColor} 0%, #e8e4dd 100%);">
        <div class="text-center max-w-2xl h-100 flex flex-col items-center justify-between">
        <h1 id="main-title" class="font-display text-4xl font-bold mb-2" style="color: ${
            primaryColor};">
            ${
            config.game_title || defaultConfig.game_title}
        </h1>
        <p id="instruction-text" class="text-lg mb-2 leading-relaxed" style="color: ${
            textColor};">
            ${
            config.instruction_text || defaultConfig.instruction_text}
        </p>
        <div class="bg-white/80 rounded-2xl p-6 mb-2 shadow-lg" style="border-left: 4px solid ${
            accentColor};">
            <h2 class="font-display text-xl font-semibold mb-1" style="color: ${
            primaryColor};">Πώς παίζεται;</h2>
            <ul class="text-left space-y-2" style="color: ${
            textColor};">
            <li class="flex items-start gap-2">
                <span style="color: ${
                accentColor};">①</span>
                <span>Κάντε κλικ στην ελληνική λέξη αριστερά</span>
            </li>
            <li class="flex items-start gap-2">
                <span style="color: ${
                accentColor};">②</span>
                <span>Επιλέξτε τις συγγενικές λέξεις στις άλλες γλώσσες</span>
            </li>
            <li class="flex items-start gap-2">
                <span style="color: ${
                accentColor};">③</span>
                <span>Προσοχή! Δεν ταιριάζουν όλες οι λέξεις! Επιλέξτε σωστά!</span>
            </li>
            <li class="flex items-start gap-2">
                <span style="color: ${
                accentColor};">④</span>
                <span>Ανακαλύψτε τη διασπορά των γλωσσών σε όλη την Ευρώπη και Ασία!</span>
            </li>
            </ul>
        </div>
        <button onclick="startNewGame()" 
            class="px-8 py-4 rounded-xl font-semibold text-lg transition-all hover:scale-105 hover:shadow-lg"
            style="background: ${
            primaryColor}; color: ${
            secondaryColor};">
            Ξεκινήστε το Παιχνίδι 🎯
        </button>
        </div>
    </div>
    `;
}

function renderGameScreen(app, config) {

    const primaryColor = config.primary_color || defaultConfig.primary_color;
    const secondaryColor = config.secondary_color || defaultConfig.secondary_color;
    const textColor = config.text_color || defaultConfig.text_color;
    const accentColor = config.accent_color || defaultConfig.accent_color;
    const highlightColor = config.highlight_color || defaultConfig.highlight_color;
    
    const progress = ((gameState.currentRound) / gameState.totalRounds) * 100;
    const totalCorrect = gameState.currentWordSet.correctCognates.length;
    const roundProgress = (gameState.matchedPairs.length / totalCorrect) * 100;
    
    app.innerHTML = `
    <div class="h-full w-full flex flex-col" style="background: linear-gradient(135deg, ${
        secondaryColor} 0%, #e8e4dd 100%);">
        <!-- Header -->
        <div class="p-2" style="background: ${
        primaryColor};">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center justify-end mb-1">
                <div class="flex items-center gap-4">
                    <span class="text-sm font-semibold px-3 py-1 rounded-full" style="background: ${
                    accentColor}; color: ${
                    primaryColor};">
                    Γύρος ${
                        gameState.currentRound + 1}/${
                        gameState.totalRounds}
                    </span>
                    <span class="text-sm" style="color: ${
                    secondaryColor};">
                    ⭐ ${
                        gameState.score} πόντοι
                    </span>
                </div>
            </div>
            <div class="h-2 rounded-full overflow-hidden" style="background: ${
            highlightColor};">
            <div class="h-full progress-fill rounded-full" style="width: ${
                progress}%; background: ${
                accentColor};"></div>
            </div>
        </div>
        </div>
        
        <!-- Game Area -->
        <div class="flex-1 p-2 overflow-auto position-relative">
        <div class="max-w-5xl mx-auto">
            <!-- Round Progress -->
            <div class="text-center mb-2">
            <p class="text-sm mb-1" style="color: ${
                textColor};">Σωστές αντιστοιχίσεις: ${
                gameState.matchedPairs.length}/${
                totalCorrect}</p>
            <div class="h-1 rounded-full overflow-hidden max-w-xs mx-auto" style="background: ${
                primaryColor}20;">
                <div class="h-full progress-fill rounded-full" style="width: ${
                roundProgress}%; background: ${
                accentColor};"></div>
            </div>
            </div>
            
            <!-- Matching Area -->
            <div class="grid sm:grid-cols-2 gap-8">
            <!-- Greek Word -->
            <div class="flex flex-col items-center justify-center">
                <h3 class="font-display text-sm uppercase tracking-wider mb-1" style="color: ${
                primaryColor};">Ελληνική Λέξη</h3>
                <button onclick="handleGreekClick()"
                class="word-card w-full max-w-xs p-6 rounded-2xl text-center cursor-pointer ${
                    gameState.selectedGreek ? 'selected' : ''} ${
                    gameState.matchedPairs.length === totalCorrect ? 'matched' : ''}"
                style="background: white; border: 2px solid ${
                    gameState.selectedGreek ? accentColor : primaryColor}; color: ${
                    primaryColor};">
                <span class="font-display text-3xl font-bold block mb-1">${
                    gameState.currentWordSet.greek}</span>
                <span class="language-tag uppercase tracking-wider px-2 py-1 rounded" style="background: ${
                    primaryColor}15; color: ${
                    primaryColor};">
                    Νέα Ελληνικά
                </span>
                </button>
            </div>
            
            <!-- Cognates & Distractors -->
            <div class="flex flex-col items-center">
                <h3 class="font-display text-sm uppercase tracking-wider mb-1" style="color: ${
                primaryColor};">Επιλέξτε ${totalCorrect} συγγενικές λέξεις</h3>
                <div class="grid grid-cols-3 gap-2 w-full max-w-md">
                ${
                    gameState.shuffledOptions.map((option, index) => {

                    const isMatched = gameState.matchedPairs.includes(index);
                    const isWrong = gameState.wrongPairs.includes(index);
                    const isSelected = gameState.selectedCognate === index;
                    const langColor = getLangColor(option.code);
                    
                    return `
                    <button onclick="handleCognateClick(${
                        index})"
                        data-cognate-index="${
                        index}"
                        class="word-card p-1 rounded-xl text-center cursor-pointer ${
                        isMatched ? 'matched' : ''} ${
                        isWrong ? 'wrong' : ''} ${
                        isSelected ? 'selected' : ''}"
                        style="background: white; border: 2px solid ${
                        isSelected ? accentColor : isMatched ? '#48bb78' : isWrong ? '#f56565' : langColor};"
                        ${
                        isMatched || isWrong ? 'disabled' : ''}>
                        <span class="font-display text-base font-semibold block truncate" style="color: ${
                        textColor};">${
                        option.word}</span>
                        <span class="language-tag uppercase tracking-wider px-1.5 py-0.5 rounded mt-1 inline-block text-xs" style="background: ${
                        langColor}20; color: ${
                        langColor};">
                        ${
                            option.lang}
                        </span>
                        ${
                        isMatched ? '<span class="float-right text-green-500 text-md">✓</span>' : ''}
                        ${
                        isWrong ? '<span class="float-right text-red-500 text-md">✗</span>' : ''}
                    </button>
                    `;
                }).join('')}
                </div>
            </div>
            </div>
            
            <!-- Note Card -->
            ${
            gameState.showingNote ? `
            <div class="note-card bg-white rounded-2xl p-6 shadow-md max-w-2xl mx-auto position-absolute" style="border-left: 4px solid ${
                accentColor};">
                <h3 class="font-display text-md font-semibold mb-1 flex items-center gap-2" style="color: ${
                primaryColor};">
                <span>📚</span> Το ήξερες;
                </h3>
                <p class="leading-relaxed mb-1" style="color: ${
                textColor};">${
                gameState.currentWordSet.note}</p>
                <button onclick="nextRound()"
                class="w-full py-3 rounded-xl font-semibold transition-all hover:scale-[1.02]"
                style="background: ${
                    primaryColor}; color: ${
                    secondaryColor};">
                ${
                    gameState.currentRound + 1 < gameState.totalRounds ? 'Επόμενη Λέξη →' : 'Δες τα Αποτελέσματα 🏆'}
                </button>
            </div>
            ` : ''}
        </div>
        </div>
    </div>
    `;
}

function renderCompletionScreen(app, config) {

    const primaryColor = config.primary_color || defaultConfig.primary_color;
    const secondaryColor = config.secondary_color || defaultConfig.secondary_color;
    const textColor = config.text_color || defaultConfig.text_color;
    const accentColor = config.accent_color || defaultConfig.accent_color;
    
    // Calculate max possible score (6 correct matches per round)
    const maxScore = gameState.totalRounds * 6;
    const percentage = Math.round((gameState.score / maxScore) * 100);
    
    let message, emoji;
    if (percentage === 100) {

    message = 'Τέλειο!';
    emoji = '🏆';
    } else if (percentage >= 80) {

    message = 'Εξαιρετικά!';
    emoji = '🌟';
    } else if (percentage >= 60) {

    message = 'Πολύ καλά!';
    emoji = '👏';
    } else {

    message = 'Καλή προσπάθεια!';
    emoji = '💪';
    }
    
    app.innerHTML = `
    <div class="h-full w-full flex flex-col items-center justify-center p-8" style="background: linear-gradient(135deg, ${
        secondaryColor} 0%, #e8e4dd 100%);">
        <div class="celebration text-center max-w-lg">
        <div class="text-4xl mb-2">${
            emoji}</div>
        <h1 class="font-display text-4xl font-bold mb-1" style="color: ${
            primaryColor};">
            Συγχαρητήρια!
        </h1>
        <p class="text-xl mb-2" style="color: ${
            textColor};">${
            message}</p>
        
        <div class="bg-white rounded-2xl p-6 shadow-lg mb-2">
            <div class="text-5xl font-display font-bold mb-1" style="color: ${
            accentColor};">
            ${
                gameState.score}/${
                maxScore}
            </div>
            <p class="text-sm" style="color: ${
            textColor};">πόντοι</p>
            <div class="mt-4 h-3 rounded-full overflow-hidden" style="background: ${
            primaryColor}20;">
            <div class="h-full rounded-full transition-all duration-1000" style="width: ${
                percentage}%; background: ${
                accentColor};"></div>
            </div>
            <p class="mt-2 text-sm font-semibold" style="color: ${
            primaryColor};">${
            percentage}%</p>
        </div>
        
        <button onclick="startNewGame()"
            class="px-8 py-4 rounded-xl font-semibold text-md transition-all hover:scale-105 hover:shadow-lg"
            style="background: ${
            primaryColor}; color: ${
            secondaryColor};">
            Παίξτε Ξανά 🔄
        </button>
        </div>
    </div>
    `;
}

// Initialize SDK and render
async function init() {

    if (window.elementSdk) {

    await window.elementSdk.init({

        defaultConfig,
        onConfigChange: async (config) => {

        renderApp();
        },
        mapToCapabilities: (config) => ({

        recolorables: [
            {

            get: () => config.primary_color || defaultConfig.primary_color,
            set: (value) => window.elementSdk.setConfig({
                primary_color: value })
            },
            {

            get: () => config.secondary_color || defaultConfig.secondary_color,
            set: (value) => window.elementSdk.setConfig({
                secondary_color: value })
            },
            {

            get: () => config.text_color || defaultConfig.text_color,
            set: (value) => window.elementSdk.setConfig({
                text_color: value })
            },
            {

            get: () => config.accent_color || defaultConfig.accent_color,
            set: (value) => window.elementSdk.setConfig({
                accent_color: value })
            },
            {

            get: () => config.highlight_color || defaultConfig.highlight_color,
            set: (value) => window.elementSdk.setConfig({
                highlight_color: value })
            }
        ],
        borderables: [],
        fontEditable: undefined,
        fontSizeable: undefined
        }),
        mapToEditPanelValues: (config) => new Map([
        ['game_title', config.game_title || defaultConfig.game_title],
        ['instruction_text', config.instruction_text || defaultConfig.instruction_text]
        ])
    });
    }
    renderApp();
}

init();