let gameState={playerName:"",totalQuestions:0,currentQuestion:0,score:0,questions:[],history:[],currentQuestionData:null,timer:null,timeLeft:30,selectedAnswer:null,isAnswered:!1,category:"all"},leaderboardState={allScores:[],filteredScores:[],currentPage:1,pageSize:50,filterName:"",filterScore:""};function formatTimeAgo(e){const t=new Date(e),n=new Date,a=Math.floor((n-t)/1e3);let r=a/31536e3;return r>1?Math.floor(r)+" years ago":(r=a/2592e3,r>1?Math.floor(r)+" months ago":(r=a/86400,r>1?Math.floor(r)+" days ago":(r=a/3600,r>1?Math.floor(r)+" hours ago":(r=a/60,r>1?Math.floor(r)+" mins ago":a<10?"just now":Math.floor(a)+" seconds ago"))))}async function fetchLeaderboard(){try{const e=await fetch("/api/game/leaderboard");if(!e.ok)throw new Error("Failed to fetch leaderboard");const t=await e.json();leaderboardState.allScores=t,applyFilters()}catch(e){console.error("Leaderboard error:",e);const t=document.getElementById("leaderboard-body");t&&(t.innerHTML='<tr><td colspan="4" style="text-align: center; color: #ff4444;">Failed to load leaderboard</td></tr>')}}function applyFilters(){let e=leaderboardState.allScores;if(leaderboardState.filterName){const t=leaderboardState.filterName.toLowerCase();e=e.filter(e=>e.username&&e.username.toLowerCase().includes(t))}if(leaderboardState.filterScore){const t=parseInt(leaderboardState.filterScore,10);isNaN(t)||(e=e.filter(e=>e.score>=t))}leaderboardState.filteredScores=e,leaderboardState.currentPage=1,renderLeaderboard()}function renderLeaderboard(){const e=document.getElementById("leaderboard-body"),t=document.getElementById("page-info"),n=document.getElementById("prev-page-btn"),a=document.getElementById("next-page-btn");if(!e)return;if(0===leaderboardState.filteredScores.length)return e.innerHTML='<tr><td colspan="4" style="text-align: center;">No scores found!</td></tr>',t&&(t.textContent="Page 1 / 1"),n&&(n.disabled=!0),void(a&&(a.disabled=!0));const r=Math.ceil(leaderboardState.filteredScores.length/leaderboardState.pageSize);leaderboardState.currentPage>r&&(leaderboardState.currentPage=r);const o=(leaderboardState.currentPage-1)*leaderboardState.pageSize,i=Math.min(o+leaderboardState.pageSize,leaderboardState.filteredScores.length),s=leaderboardState.filteredScores.slice(o,i);e.innerHTML=s.map((e,t)=>{const n=o+t;return`\n            <tr class="${n<3?`rank-${n+1}`:""}">\n                <td>#${n+1}</td>\n                <td>${e.username}</td>\n                <td>${e.score}</td>\n                <td class="time-ago">${formatTimeAgo(e.created_at)}</td>\n            </tr>\n        `}).join(""),t&&(t.textContent=`Page ${leaderboardState.currentPage} / ${r}`),n&&(n.disabled=1===leaderboardState.currentPage),a&&(a.disabled=leaderboardState.currentPage===r)}function initializeR6DataGame(){console.log("Initializing R6 Data Game..."),setupEventListeners(),fetchLeaderboard()}function setupEventListeners(){const e=document.getElementById("game-setup-form"),t=document.getElementById("next-question-btn"),n=document.getElementById("play-again-btn"),a=document.getElementById("home-btn");e&&e.addEventListener("submit",startGame),t&&t.addEventListener("click",nextQuestion),n&&n.addEventListener("click",resetGame),a&&a.addEventListener("click",goHome);const r=document.getElementById("share-btn");r&&r.addEventListener("click",shareGame);const o=document.getElementById("toggle-leaderboard-btn");o&&o.addEventListener("click",toggleLeaderboard);const i=document.getElementById("prev-page-btn");i&&i.addEventListener("click",()=>{leaderboardState.currentPage>1&&(leaderboardState.currentPage--,renderLeaderboard())});const s=document.getElementById("next-page-btn");s&&s.addEventListener("click",()=>{const e=Math.ceil(leaderboardState.filteredScores.length/leaderboardState.pageSize);leaderboardState.currentPage<e&&(leaderboardState.currentPage++,renderLeaderboard())});const d=document.getElementById("filter-player-btn"),l=document.getElementById("filter-player-container"),c=document.getElementById("filter-player-input");d&&l&&d.addEventListener("click",()=>{l.classList.toggle("active"),d.classList.toggle("active"),l.classList.contains("active")&&c.focus()}),c&&c.addEventListener("input",e=>{leaderboardState.filterName=e.target.value,applyFilters()});const p=document.getElementById("filter-score-btn"),m=document.getElementById("filter-score-container"),g=document.getElementById("filter-score-input");p&&m&&p.addEventListener("click",()=>{m.classList.toggle("active"),p.classList.toggle("active"),m.classList.contains("active")&&g.focus()}),g&&g.addEventListener("input",e=>{leaderboardState.filterScore=e.target.value,applyFilters()}),document.querySelectorAll(".answer-btn").forEach(e=>{e.addEventListener("click",selectAnswer)})}function toggleLeaderboard(){const e=document.getElementById("leaderboard-section"),t=document.getElementById("setup-screen"),n=document.getElementById("toggle-leaderboard-text");e&&t&&("block"===e.style.display?(e.style.display="none",t.style.display="block",n&&(n.textContent="Leaderboard")):(e.style.display="block",t.style.display="none",n&&(n.textContent="Hide Leaderboard")))}function showLoadingScreen(){document.getElementById("setup-screen").classList.add("hidden"),document.getElementById("loading-screen").classList.remove("hidden"),document.getElementById("loading-text-dynamic").textContent="Generating your quiz questions...";const e=document.querySelector(".game-title"),t=document.querySelector(".game-subtitle");e&&(e.style.display="none"),t&&(t.style.display="none")}function hideLoadingScreen(){document.getElementById("loading-screen").classList.add("hidden");const e=document.querySelector(".game-title"),t=document.querySelector(".game-subtitle");e&&(e.style.display="block"),t&&(t.style.display="block")}async function startGame(e){e.preventDefault();const t=document.getElementById("player-name").value.trim(),n=parseInt(document.getElementById("question-count").value),a=document.getElementById("game-category").value;if(t&&n){gameState.playerName=t,gameState.totalQuestions=n,gameState.category=a,gameState.currentQuestion=0,gameState.score=0,showLoadingScreen();try{const e=await fetch(`/api/game/questions?count=${n}&category=${a}`);if(!e.ok)throw new Error(`Failed to fetch questions: ${e.statusText}`);const t=await e.json();if(!t.questions||0===t.questions.length)throw new Error("No questions generated");gameState.questions=t.questions,hideLoadingScreen(),document.getElementById("setup-screen").classList.add("hidden"),document.getElementById("game-screen").classList.remove("hidden"),showQuestion()}catch(e){console.error("Error starting game:",e),hideLoadingScreen(),document.getElementById("setup-screen").classList.remove("hidden"),alert("Error generating questions. Please try again.")}}else alert("Please fill in all fields!")}function showQuestion(){if(gameState.currentQuestion>=gameState.questions.length)return void showResults();const e=gameState.questions[gameState.currentQuestion];gameState.currentQuestionData=e,gameState.selectedAnswer=null,gameState.isAnswered=!1,document.getElementById("question-number").textContent=`Question ${gameState.currentQuestion+1} of ${gameState.questions.length}`,document.getElementById("question-text").textContent=e.text,document.getElementById("score-display").textContent=`Score: ${gameState.score}/${gameState.questions.length}`,document.querySelectorAll(".answer-btn").forEach((t,n)=>{n<e.answers.length?(t.textContent=e.answers[n],t.dataset.index=n,t.style.display="flex",t.classList.remove("correct","incorrect","selected"),t.disabled=!1):t.style.display="none"}),document.getElementById("next-question-btn").style.display="none",document.getElementById("question-feedback").style.display="none",startTimer()}function selectAnswer(e){if(gameState.isAnswered)return;const t=e.target.closest(".answer-btn");if(!t)return;const n=parseInt(t.dataset.index);gameState.selectedAnswer=n,gameState.isAnswered=!0,gameState.history.push({q:gameState.currentQuestionData.text,a:gameState.currentQuestionData.answers,c:gameState.currentQuestionData.correctAnswer,u:n}),clearInterval(gameState.timer);const a=n===gameState.currentQuestionData.correctAnswer;a?(gameState.score++,t.classList.add("correct")):(t.classList.add("incorrect"),document.querySelectorAll(".answer-btn").forEach(e=>{parseInt(e.dataset.index)===gameState.currentQuestionData.correctAnswer&&e.classList.add("correct")})),document.querySelectorAll(".answer-btn").forEach(e=>{e.disabled=!0});const r=document.getElementById("question-feedback"),o=gameState.currentQuestionData.answers[gameState.currentQuestionData.correctAnswer];r.textContent=a?"Correct!":`Incorrect! The correct answer was: ${o}`,r.style.display="block",r.className=a?"question-feedback correct-feedback":"question-feedback incorrect-feedback",document.getElementById("next-question-btn").style.display="flex",document.getElementById("score-display").textContent=`Score: ${gameState.score}/${gameState.questions.length}`}function nextQuestion(){gameState.currentQuestion++,showQuestion()}function startTimer(){gameState.timeLeft=30,updateTimerDisplay(),gameState.timer=setInterval(()=>{if(gameState.timeLeft--,updateTimerDisplay(),gameState.timeLeft<=0&&(clearInterval(gameState.timer),!gameState.isAnswered)){gameState.isAnswered=!0,gameState.history.push({q:gameState.currentQuestionData.text,a:gameState.currentQuestionData.answers,c:gameState.currentQuestionData.correctAnswer,u:null}),document.querySelectorAll(".answer-btn").forEach(e=>{parseInt(e.dataset.index)===gameState.currentQuestionData.correctAnswer&&e.classList.add("correct"),e.disabled=!0});const e=document.getElementById("question-feedback"),t=gameState.currentQuestionData.answers[gameState.currentQuestionData.correctAnswer];e.textContent=`Time's up! The correct answer was: ${t}`,e.style.display="block",e.className="question-feedback incorrect-feedback",document.getElementById("next-question-btn").style.display="flex"}},1e3)}function updateTimerDisplay(){const e=document.getElementById("timer");e&&(e.textContent=`Time: ${gameState.timeLeft}s`,gameState.timeLeft<=5?(e.style.color="#ff4444",e.style.borderColor="#ff4444",e.style.background="rgba(255, 68, 68, 0.1)"):gameState.timeLeft<=10?(e.style.color="#ffaa00",e.style.borderColor="#ffaa00",e.style.background="rgba(255, 170, 0, 0.1)"):(e.style.color="#00ff88",e.style.borderColor="#00ff88",e.style.background="rgba(0, 255, 136, 0.1)"))}function showResults(){document.getElementById("game-screen").classList.add("hidden"),document.getElementById("results-screen").classList.remove("hidden");const e=Math.round(gameState.score/gameState.questions.length*100);document.getElementById("final-score").textContent=`${gameState.score}/${gameState.questions.length}`,document.getElementById("score-details").textContent=`You answered ${gameState.score} out of ${gameState.questions.length} questions correctly (${e}%)`;let t="";t=e>=90?"Outstanding! You're a true Rainbow Six Siege expert!":e>=75?"Great job! You know your R6 Siege very well!":e>=50?"Good effort! Keep playing to improve your knowledge!":"Keep practicing! There's always more to learn about R6 Siege!",document.getElementById("performance-message").textContent=t,renderSummary(),submitScore()}async function submitScore(){try{await fetch("/api/game/leaderboard",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:gameState.playerName,score:gameState.score,correct_answers:gameState.score,wrong_answers:gameState.questions.length-gameState.score})}),fetchLeaderboard()}catch(e){console.error("Failed to submit score",e)}}function resetGame(){gameState.currentQuestion=0,gameState.score=0,gameState.questions=[],gameState.history=[],gameState.selectedAnswer=null,gameState.isAnswered=!1,gameState.timer&&clearInterval(gameState.timer),document.getElementById("results-screen").classList.add("hidden"),document.getElementById("setup-screen").classList.remove("hidden")}function goHome(){window.location.href="proxy.php?url=https%3A%2F%2Fr6data.eu%2F"}function renderSummary(){const e=document.getElementById("summary-grid");if(!e)return;let t="";gameState.history.forEach((e,n)=>{const a=e.u===e.c,r=a?"#00ff88":"#ff4444",o=null!==e.u?e.a[e.u]:"Time Out",i=e.a[e.c];t+=`\n            <div style="background: var(--card-bg); border-left: 4px solid ${r}; padding: 15px; border-radius: 8px;">\n                <div style="font-weight: bold; margin-bottom: 8px;">Q${n+1}: ${e.q}</div>\n                <div style="font-size: 0.9em; color: var(--text-secondary);">Your Answer: <span style="color: ${r}; font-weight: bold;">${o}</span></div>\n                ${a?"":`<div style="font-size: 0.9em; color: var(--text-secondary); margin-top: 5px;">Correct Answer: <span style="color: #00ff88; font-weight: bold;">${i}</span></div>`}\n            </div>\n        `}),e.innerHTML=t}function shareGame(){const e={n:gameState.playerName,s:gameState.score,t:gameState.totalQuestions,c:gameState.category,d:Date.now(),h:gameState.history},t=JSON.stringify(e),n=btoa(encodeURIComponent(t)),a=`${window.location.origin}/game-summary.html?data=${n}`;navigator.clipboard.writeText(a).then(()=>{const e=document.getElementById("share-btn");if(e){const t=e.innerHTML;e.innerHTML='<span class="material-icons" style="margin-right: 8px;">check</span>Copied!',setTimeout(()=>{e.innerHTML=t},2e3)}}).catch(e=>{prompt("Copy this link to share:",a)})}function renderR6DataGamePage(e){if(document.title="R6 Data Game - Rainbow Six Siege Quiz | R6Data",!document.getElementById("r6-game-styles")){const e=document.createElement("style");e.id="r6-game-styles",e.textContent="\n            .game-container {\n                max-width: 1200px;\n                margin: 0 auto;\n                padding: 110px 20px 40px;\n                min-height: 100vh;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n            }\n            .game-header { text-align: center; margin-bottom: 15px; }\n            .game-title {\n                font-size: 3rem; font-weight: bold;\n                background: linear-gradient(45deg, var(--primary-color), #ff8c42);\n                -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n                background-clip: text; margin-bottom: 10px;\n            }\n            .game-subtitle { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 30px; }\n            .setup-screen, .game-screen, .results-screen {\n                background: var(--card-bg); border-radius: 15px; padding: 40px;\n                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color);\n                width: 100%; max-width: 800px; text-align: center;\n            }\n            .setup-form { display: flex; flex-direction: column; gap: 25px; align-items: center; }\n            .form-group { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 400px; }\n            .form-group label { font-weight: 600; color: var(--text-primary); text-align: left; }\n            .form-group input, .form-group select {\n                padding: 12px 16px; border: 2px solid var(--border-color); border-radius: 8px;\n                background: var(--input-bg); color: var(--text-primary); font-size: 16px; transition: border-color 0.3s ease;\n            }\n            .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); }\n            .start-btn {\n                background: linear-gradient(45deg, var(--primary-color), #ff8c42);\n                color: white; border: none; padding: 15px 40px; border-radius: 25px;\n                font-size: 18px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease;\n                display: flex; align-items: center; gap: 10px;\n            }\n            .start-btn:hover { transform: translateY(-2px); }\n            .question-header {\n                display: flex; justify-content: space-between; align-items: center;\n                margin-bottom: 30px; flex-wrap: wrap; gap: 15px;\n            }\n            .question-info { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }\n            .question-number { font-size: 18px; font-weight: 600; color: var(--primary-color); }\n            .score-display { font-size: 18px; font-weight: 600; color: var(--text-primary); }\n            .timer {\n                font-size: 18px; font-weight: 600; padding: 8px 16px; border-radius: 20px;\n                background: rgba(0, 255, 136, 0.1); border: 2px solid #00ff88;\n            }\n            .question-content { margin-bottom: 30px; }\n            .question-text {\n                font-size: 24px; font-weight: 600; color: var(--text-primary);\n                margin-bottom: 30px; line-height: 1.4;\n            }\n            .answers-grid {\n                display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n                gap: 15px; margin-bottom: 30px;\n            }\n            .answer-btn {\n                padding: 15px 20px; border: 2px solid var(--border-color); border-radius: 10px;\n                background: var(--card-bg); color: var(--text-primary); font-size: 16px;\n                cursor: pointer; transition: all 0.3s ease; text-align: left; min-height: 60px;\n                display: flex; align-items: center; justify-content: center;\n            }\n            .answer-btn:hover:not(:disabled) {\n                border-color: var(--primary-color); background: rgba(255, 140, 66, 0.1);\n            }\n            .answer-btn.correct {\n                border-color: #00ff88 !important; background: rgba(0, 255, 136, 0.2) !important; color: #00ff88 !important;\n            }\n            .answer-btn.incorrect {\n                border-color: #ff4444 !important; background: rgba(255, 68, 68, 0.2) !important; color: #ff4444 !important;\n            }\n            .answer-btn:disabled { cursor: not-allowed; opacity: 0.7; }\n            .question-feedback {\n                font-size: 16px; font-weight: 600; margin: 15px auto 25px auto; padding: 12px 20px;\n                border-radius: 8px; max-width: 400px; text-align: center;\n            }\n            .correct-feedback { color: #00ff88; background: rgba(0, 255, 136, 0.1); border: 1px solid #00ff88; }\n            .incorrect-feedback { color: #ff4444; background: rgba(255, 68, 68, 0.1); border: 1px solid #ff4444; }\n            .next-question-btn {\n                background: var(--primary-color); color: white; border: none; padding: 12px 30px;\n                border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer;\n                transition: background-color 0.3s ease; display: flex; align-items: center; gap: 8px;\n                margin: 0 auto; margin-top: 20px; justify-content: center;\n            }\n            .next-question-btn:hover { background: #e67e22; }\n            .results-content { text-align: center; }\n            .final-score {\n                font-size: 4rem; font-weight: bold; margin-bottom: 20px;\n                background: linear-gradient(45deg, var(--primary-color), #ff8c42);\n                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n            }\n            .score-details { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 30px; }\n            .performance-message {\n                font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 40px; padding: 20px;\n                border-radius: 10px; background: rgba(255, 140, 66, 0.1); border: 1px solid var(--primary-color);\n            }\n            .play-again-btn, .home-btn {\n                background: var(--primary-color); color: white; border: none; padding: 12px 25px;\n                border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer;\n                transition: background-color 0.3s ease; display: inline-flex; align-items: center; gap: 8px; margin: 0 10px;\n            }\n            .play-again-btn:hover, .home-btn:hover { background: #e67e22; }\n            .hidden { display: none !important; }\n            .leaderboard-section { margin-top: 30px; display: none; }\n            .filter-header { display: flex; align-items: center; justify-content: space-between; }\n            .filter-icon { font-size: 18px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; }\n            .filter-icon:hover, .filter-icon.active { opacity: 1; color: var(--primary-color); }\n            .filter-input-container { display: none; margin-top: 5px; width: 200px; position: absolute; top: 100%; left: 0; background: var(--card-bg); z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; }\n            .filter-input-container.active { display: block; }\n            .filter-input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); font-size: 14px; }\n            .leaderboard-pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; }\n            .pagination-btn { background: var(--secondary-bg); color: var(--text-primary); border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 5px; cursor: pointer; transition: all 0.3s; }\n            .pagination-btn:hover:not(:disabled) { background: rgba(255, 107, 53, 0.2); border-color: var(--primary-color); }\n            .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n            .toggle-btn-top { position: absolute; top: 110px; right: 20px; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-primary); padding: 6px 12px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10; }\n            .toggle-btn-top:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-2px); }\n            .leaderboard-table-container { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border-color); background: var(--input-bg); }\n            .leaderboard-table { width: 100%; border-collapse: collapse; text-align: left; }\n            .leaderboard-table th { background-color: var(--secondary-bg); color: var(--primary-color); padding: 12px 15px; font-weight: 600; border-bottom: 2px solid var(--border-color); }\n            .leaderboard-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); transition: background-color 0.3s ease; }\n            .leaderboard-table tbody tr:hover td { background-color: rgba(255, 140, 66, 0.1); }\n            .leaderboard-table tbody tr:last-child td { border-bottom: none; }\n            .rank-1 td:first-child { color: #FFD700 !important; font-weight: bold; font-size: 1.1em; }\n            .rank-2 td:first-child { color: #C0C0C0 !important; font-weight: bold; font-size: 1.05em; }\n            .rank-3 td:first-child { color: #CD7F32 !important; font-weight: bold; font-size: 1.05em; }\n            .time-ago { color: var(--text-secondary); font-size: 0.9em; }\n            .loading-spinner {\n                border: 4px solid rgba(255, 140, 66, 0.3); border-top: 4px solid var(--primary-color);\n                border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto;\n            }\n            #loading-screen {\n                position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;\n            }\n            @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n            @media (max-width: 768px) {\n                .game-container { padding: 90px 10px 40px; }\n                .toggle-btn-top { position: static; margin-bottom: 20px; margin-top: 0px; }\n                .setup-screen, .game-screen, .results-screen { padding: 20px; }\n                .game-title { font-size: 2rem; }\n                .question-text { font-size: 20px; }\n                .answers-grid { grid-template-columns: 1fr; }\n                .question-header { flex-direction: column; text-align: center; }\n                .final-score { font-size: 3rem; }\n            }\n        ",document.head.appendChild(e)}e.innerHTML='\n        <div class="game-container" style="position: relative;">\n            \x3c!-- Top right toggle button --\x3e\n            <button type="button" class="toggle-btn-top" id="toggle-leaderboard-btn">\n                <span class="material-icons" style="font-size: 18px;">leaderboard</span>\n                <span id="toggle-leaderboard-text">Leaderboard</span>\n            </button>\n            \n            \x3c!-- Game Header --\x3e\n            <div class="game-header">\n                <h1 class="game-title">R6 Data Game</h1>\n                <p class="game-subtitle">Test your Rainbow Six Siege knowledge!</p>\n            </div>\n            \n            \x3c!-- Setup Screen --\x3e\n            <div id="setup-screen" class="setup-screen">\n                <h2 style="margin-bottom: 30px; color: var(--text-primary);">Game Setup</h2>\n                <form id="game-setup-form" class="setup-form">\n                    <div class="form-group">\n                        <label for="player-name">Player Name</label>\n                        <input type="text" id="player-name" placeholder="Enter your name" required>\n                    </div>\n                    \n                    <div class="form-group">\n                        <label for="game-category">Quiz Category</label>\n                        <select id="game-category" required>\n                            <option value="all">Mixed (All Categories)</option>\n                            <option value="operators">Operators</option>\n                            <option value="weapons">Weapons</option>\n                            <option value="maps">Maps</option>\n                            <option value="cosmetics">Cosmetics (Skins & Charms)</option>\n                            <option value="ranks">Ranks</option>\n                            <option value="attachments">Weapon Attachments</option>\n                            <option value="seasons">Seasons</option>\n                            <option value="proleague">Pro League Esports</option>\n                        </select>\n                    </div>\n\n                    <div class="form-group">\n                        <label for="question-count">Number of Questions</label>\n                        <select id="question-count" required>\n                            <option value="5">5 Questions</option>\n                            <option value="10" selected>10 Questions</option>\n                            <option value="15">15 Questions</option>\n                            <option value="20">20 Questions</option>\n                        </select>\n                    </div>\n                    \n                    <button type="submit" class="start-btn">\n                        <span class="material-icons">play_arrow</span>\n                        Start Game\n                    </button>\n                </form>\n            </div>\n            \n            \x3c!-- Leaderboard Screen --\x3e\n            <div id="leaderboard-section" class="setup-screen leaderboard-section">\n                <h2 style="margin-bottom: 20px; color: var(--text-primary);">Top Scores</h2>\n                <div class="leaderboard-table-container">\n                    <table class="leaderboard-table">\n                        <thead>\n                            <tr>\n                                <th>Rank</th>\n                                <th style="position: relative;">\n                                    <div class="filter-header">\n                                        <span>Player</span>\n                                        <span class="material-icons filter-icon" id="filter-player-btn">filter_alt</span>\n                                    </div>\n                                    <div class="filter-input-container" id="filter-player-container">\n                                        <input type="text" class="filter-input" id="filter-player-input" placeholder="Search name...">\n                                    </div>\n                                </th>\n                                <th style="position: relative;">\n                                    <div class="filter-header">\n                                        <span>Score</span>\n                                        <span class="material-icons filter-icon" id="filter-score-btn">filter_alt</span>\n                                    </div>\n                                    <div class="filter-input-container" id="filter-score-container">\n                                        <input type="number" class="filter-input" id="filter-score-input" placeholder="Min score...">\n                                    </div>\n                                </th>\n                                <th>Time</th>\n                            </tr>\n                        </thead>\n                        <tbody id="leaderboard-body">\n                            <tr><td colspan="4" style="text-align: center;">Loading leaderboard...</td></tr>\n                        </tbody>\n                    </table>\n                </div>\n                <div id="leaderboard-pagination" class="leaderboard-pagination">\n                    <button class="pagination-btn" id="prev-page-btn" disabled>Previous</button>\n                    <span id="page-info">Page 1 / 1</span>\n                    <button class="pagination-btn" id="next-page-btn" disabled>Next</button>\n                </div>\n            </div>\n            \n            \x3c!-- Game Screen --\x3e\n            <div id="game-screen" class="game-screen hidden">\n                <div class="question-header">\n                    <div class="question-info">\n                        <div id="question-number" class="question-number">Question 1 of 10</div>\n                        <div id="score-display" class="score-display">Score: 0/10</div>\n                    </div>\n                    <div id="timer" class="timer">Time: 30s</div>\n                </div>\n                \n                <div class="question-content">\n                    <div id="question-text" class="question-text">Loading question...</div>\n                    \n                    <div class="answers-grid">\n                        <button class="answer-btn" data-index="0">Answer 1</button>\n                        <button class="answer-btn" data-index="1">Answer 2</button>\n                        <button class="answer-btn" data-index="2">Answer 3</button>\n                        <button class="answer-btn" data-index="3">Answer 4</button>\n                    </div>\n                    \n                    <div id="question-feedback" class="question-feedback" style="display: none;">\n                        Feedback will appear here\n                    </div>\n                    \n                    <button id="next-question-btn" class="next-question-btn" style="display: none;">\n                        Next\n                    </button>\n                </div>\n            </div>\n            \n            \x3c!-- Results Screen --\x3e\n            <div id="results-screen" class="results-screen hidden">\n                <h2 style="margin-bottom: 30px; color: var(--text-primary);">Game Complete!</h2>\n                \n                <div class="final-score" id="final-score">0/10</div>\n                <div class="score-details" id="score-details">You answered 0 out of 10 questions correctly</div>\n                \n                <div class="performance-message" id="performance-message">\n                    Great job! You\'re a true Rainbow Six Siege expert!\n                </div>\n                \n                <div id="summary-container" style="margin-bottom: 30px; max-height: 400px; overflow-y: auto; text-align: left; padding: 10px; background: var(--input-bg); border-radius: 10px; border: 1px solid var(--border-color);">\n                    <h3 style="margin-bottom: 15px; text-align: center; color: var(--text-primary);">Game Summary</h3>\n                    <div id="summary-grid" style="display: flex; flex-direction: column; gap: 15px;"></div>\n                </div>\n                \n                <div style="margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">\n                    <button class="play-again-btn" id="play-again-btn">\n                        <span class="material-icons" style="margin-right: 8px;">refresh</span>\n                        Play Again\n                    </button>\n                    <button class="share-btn" id="share-btn" style="background: #1DA1F2; color: white; border: none; padding: 12px 25px; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; display: inline-flex; align-items: center; gap: 8px;">\n                        <span class="material-icons" style="margin-right: 8px;">share</span>\n                        Share Result\n                    </button>\n                    <button class="home-btn" id="home-btn">\n                        <span class="material-icons" style="margin-right: 8px;">home</span>\n                        Back to Home\n                    </button>\n                </div>\n            </div>\n        </div>\n        \n        \x3c!-- Loading Screen --\x3e\n        <div id="loading-screen" class="setup-screen hidden">\n            <h2 style="margin-bottom: 30px; color: var(--text-primary);">Loading...</h2>\n            <div class="loading-spinner"></div>\n            <p id="loading-text-dynamic" style="color: var(--text-secondary); margin-top: 20px;">We\'re preparing the questions for you!</p>\n        </div>\n    ',setTimeout(()=>{initializeR6DataGame()},100)}