Celebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest<\/title>\n\n\n <meta name=\"title\" content=\"Celebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest\">\n <meta name=\"description\" content=\"Play the definitive Celebrity Trivia Game on Quill Quest. Test your fandom with AI-generated questions on Bollywood, Hollywood, and Lollywood icons. Earn badges and prove you are a Super Fan today!\">\n <meta name=\"keywords\" content=\"Celebrity Trivia Game, AI Quiz, Bollywood Trivia, Hollywood Stars Quiz, Super Fan Badges, Quill Quest, Interactive Fan Test\">\n\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:title\" content=\"Celebrity Trivia Game: Can You Beat the AI?\">\n <meta property=\"og:description\" content=\"Test your knowledge in the most advanced Celebrity Trivia Game. Unlock exclusive badges for your favorite icons.\">\n <meta property=\"og:image\" content=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\"> \n <meta property=\"og:url\" content=\"https:\/\/quillquestonline.com\/\">\n\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"Celebrity Trivia Game: Prove Your Fandom\">\n <meta name=\"twitter:description\" content=\"AI-powered questions. Real-time leaderboards. The Celebrity Trivia Game for the next generation of fans.\">\n\n \n\n \n\n <script src=\"https:\/\/accounts.google.com\/gsi\/client\" async defer><\/script>\n\n \n\n \n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\n\n\n\n \n\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n\n \n\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n\n \n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gilda+Display&family=Poppins:wght@400;500;600;800&display=swap\" rel=\"stylesheet\">\n\n\n\n <style>\n\n \/* --- VISUAL IDENTITY & ANIMATIONS --- *\/\n\n body { \n\n font-family: 'Poppins', sans-serif; \n\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #FF0092, #FF9C00);\n\n background-size: 400% 400%;\n\n animation: gradientBG 15s ease infinite;\n\n }\n\n\n\n h1, h2, h3, .brand-font { font-family: 'Gilda Display', serif; }\n\n\n\n @keyframes gradientBG {\n\n 0% { background-position: 0% 50%; }\n\n 50% { background-position: 100% 50%; }\n\n 100% { background-position: 0% 50%; }\n\n }\n\n \n\n \/* Glassmorphism Utilities *\/\n\n .glass-panel {\n\n background: rgba(255, 255, 255, 0.95);\n\n backdrop-filter: blur(10px);\n\n border: 1px solid rgba(255, 255, 255, 0.5);\n\n }\n\n\n\n .glass-card {\n\n background: rgba(255, 255, 255, 0.8);\n\n backdrop-filter: blur(8px);\n\n border: 1px solid rgba(255, 255, 255, 0.6);\n\n transition: all 0.3s ease;\n\n }\n\n \n\n .glass-card:hover {\n\n transform: translateY(-5px);\n\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n\n }\n\n\n\n \/* Text Gradients *\/\n\n .text-gradient {\n\n background: linear-gradient(to right, #FF0092, #FF9C00);\n\n -webkit-background-clip: text;\n\n -webkit-text-fill-color: transparent;\n\n }\n\n \n\n \/* Animations *\/\n\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\n\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n\n\n \/* Toast Animation *\/\n\n .toast-enter { animation: slideInDown 0.5s ease forwards; }\n\n @keyframes slideInDown {\n\n from { transform: translate(-50%, -100%); opacity: 0; }\n\n to { transform: translate(-50%, 20px); opacity: 1; }\n\n }\n\n <\/style>\n\n\n\n \n\n <script type=\"application\/ld+json\" id=\"game-schema\">\n\n {\n\n \"@context\": \"https:\/\/schema.org\",\n\n \"@type\": \"VideoGame\",\n\n \"name\": \"Quill Quest: AI Celebrity Trivia\",\n\n \"genre\": \"Trivia\",\n\n \"playMode\": \"SinglePlayer\",\n\n \"description\": \"An AI-powered trivia game where you prove your fandom for celebrities like Taylor Swift, SRK, and more.\"\n\n }\n\n <\/script>\n\n<\/head>\n\n<body class=\"text-gray-800 min-h-screen flex flex-col items-center justify-center p-4\">\n\n\n\n \n\n <section id=\"view-auth\" class=\"w-full max-w-md animate-fade-in text-center\">\n\n <div class=\"glass-panel rounded-[40px] p-10 shadow-2xl relative overflow-hidden\">\n\n <div class=\"absolute -top-10 -right-10 w-32 h-32 bg-pink-500 rounded-full blur-3xl opacity-20\"><\/div>\n\n\n\n <img decoding=\"async\" src=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\" alt=\"Quill Quest Logo\" class=\"h-16 mx-auto mb-6\">\n\n \n\n <h2 class=\"text-4xl font-bold mb-2\">Welcome, <br><span class=\"text-gradient\">Future Legend<\/span><\/h2>\n\n <p class=\"text-gray-500 mb-8 font-medium\">Log in to track your badges and become a verified Super Fan.<\/p>\n\n \n\n <div class=\"flex justify-center\">\n\n <div id=\"g_id_onload\"\n\n data-client_id=\"547435377520-bq42vjq84o56jvqn2681lmqu7ugc35d9.apps.googleusercontent.com\"\n\n data-callback=\"handleCredentialResponse\"\n\n data-auto_prompt=\"false\">\n\n <\/div>\n\n <div class=\"g_id_signin\"\n\n data-type=\"standard\"\n\n data-shape=\"pill\"\n\n data-theme=\"outline\"\n\n data-text=\"signin_with\"\n\n data-size=\"large\"\n\n data-logo_alignment=\"left\">\n\n <\/div>\n\n <\/div>\n\n \n\n <p class=\"mt-6 text-xs text-gray-400\">By continuing, you agree to our Terms of Service.<\/p>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <main id=\"view-app\" class=\"hidden w-full max-w-4xl animate-fade-in relative pb-20 md:pb-0\">\n\n \n\n \n\n <nav class=\"glass-panel rounded-full px-6 py-3 mb-8 flex justify-between items-center shadow-lg sticky top-4 z-50\">\n\n <div class=\"flex items-center gap-3 cursor-pointer\" onclick=\"goHome()\">\n\n <img decoding=\"async\" src=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\" alt=\"Logo\" class=\"h-8 hover:opacity-80 transition-opacity\">\n\n <span class=\"font-bold text-pink-600 hidden sm:inline tracking-wider text-sm uppercase\">Magazine Edition<\/span>\n\n <span class=\"bg-pink-600 text-white text-[10px] px-2 py-0.5 rounded-full font-bold align-middle shadow-sm\">BETA<\/span>\n\n <\/div>\n\n \n\n <div class=\"hidden md:flex items-center gap-6\">\n\n <button onclick=\"goHome()\" class=\"text-gray-500 hover:text-pink-600 font-semibold text-sm uppercase tracking-wide\">Home<\/button>\n\n <button onclick=\"showScene('scene-leaderboard')\" class=\"text-gray-500 hover:text-pink-600 font-semibold text-sm uppercase tracking-wide\">Leaderboard<\/button>\n\n <div class=\"flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity\" onclick=\"toggleProfile()\">\n\n <div class=\"text-right\">\n\n <p class=\"text-[10px] text-gray-400 font-bold uppercase tracking-widest\">Credits<\/p>\n\n <p class=\"font-bold text-lg leading-none text-gradient\" id=\"nav-credits\">0<\/p>\n\n <\/div>\n\n <div class=\"bg-gradient-to-r from-pink-500 to-orange-500 p-[2px] rounded-full\">\n\n <img decoding=\"async\" id=\"nav-avatar\" src=\"\" alt=\"Profile\" class=\"w-10 h-10 rounded-full border-2 border-white bg-white object-cover\">\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"md:hidden flex items-center gap-2\" onclick=\"toggleProfile()\">\n\n <span class=\"font-bold text-pink-600 text-sm\" id=\"nav-credits-mobile\">0 CR<\/span>\n\n <img decoding=\"async\" id=\"nav-avatar-mobile\" src=\"\" class=\"w-8 h-8 rounded-full border border-gray-200\">\n\n <\/div>\n\n <\/nav>\n\n\n\n \n\n <div class=\"glass-panel rounded-[30px] shadow-2xl overflow-hidden min-h-[500px] relative\">\n\n \n\n \n\n <div id=\"toast-container\" class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 z-[60] w-full max-w-sm p-4 pointer-events-none\"><\/div>\n\n\n\n \n\n <section id=\"scene-discovery\" class=\"p-8 md:p-12\">\n\n <header class=\"text-center mb-10\">\n\n <h2 class=\"text-4xl md:text-5xl font-bold mb-4\">Who is your <span class=\"text-gradient\">Icon?<\/span><\/h2>\n\n <p class=\"text-gray-500 text-lg\">Search for a star to prove your fandom.<\/p>\n\n <\/header>\n\n\n\n <div class=\"relative max-w-lg mx-auto mb-12\">\n\n <input type=\"text\" id=\"search-input\" placeholder=\"Type a name...\" \n\n class=\"w-full pl-6 pr-16 py-5 rounded-full border-none bg-gray-50 shadow-inner focus:ring-4 focus:ring-pink-100 transition-all outline-none text-lg font-medium text-gray-700\"\n\n onkeypress=\"if(event.key === 'Enter') handleSearch()\">\n\n <button onclick=\"handleSearch()\" id=\"search-btn\" class=\"absolute right-2 top-2 bottom-2 bg-gray-900 text-white w-12 rounded-full hover:bg-pink-600 transition-colors shadow-lg flex items-center justify-center\">\n\n <i class=\"fa-solid fa-arrow-right\"><\/i>\n\n <\/button>\n\n <\/div>\n\n\n\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n\n <button onclick=\"quickSearch('Hollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfac<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Hollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Bollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83d\udc83<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Bollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Lollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\uddf5\ud83c\uddf0<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Lollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('South Indian')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udf36\ufe0f<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">South Indian<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Music')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfa4<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Music<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Sports')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfc6<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Sports<\/span>\n\n <\/button>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-search-results\" class=\"hidden p-8 md:p-12\">\n\n <button onclick=\"goBack('scene-discovery')\" class=\"text-gray-500 hover:text-gray-900 flex items-center gap-2 mb-6\">\n\n <i class=\"fa-solid fa-arrow-left\"><\/i> Back to Search\n\n <\/button>\n\n <div class=\"flex justify-between items-center mb-6\">\n\n <h2 class=\"text-2xl font-bold\">Search Results<\/h2>\n\n <\/div>\n\n \n\n <div id=\"results-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\n \n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-level\" class=\"hidden h-full flex flex-col md:flex-row\">\n\n <aside class=\"md:w-5\/12 bg-gray-100 relative min-h-[300px] md:min-h-full group\">\n\n <img decoding=\"async\" id=\"level-celeb-img\" src=\"\" class=\"w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105\" alt=\"Celebrity\">\n\n <div id=\"level-celeb-fallback\" class=\"hidden w-full h-full absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 flex items-center justify-center text-white font-bold text-6xl\"><\/div>\n\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/90 via-black\/20 to-transparent md:bg-gradient-to-r md:from-transparent md:to-white\/10\"><\/div>\n\n \n\n <button onclick=\"goBack('scene-discovery')\" class=\"absolute top-4 left-4 bg-white\/20 backdrop-blur text-white p-3 rounded-full hover:bg-white hover:text-black transition-all z-20\">\n\n <i class=\"fa-solid fa-arrow-left\"><\/i>\n\n <\/button>\n\n\n\n <div class=\"absolute bottom-6 left-6 text-white z-10 w-full pr-6\">\n\n <h2 class=\"text-4xl font-bold leading-none mb-1 font-brand\" id=\"level-celeb-name-mobile\">Name<\/h2>\n\n <p class=\"text-sm opacity-80\" id=\"level-celeb-role-mobile\">Actor<\/p>\n\n <\/div>\n\n <\/aside>\n\n\n\n <article class=\"md:w-7\/12 p-8 md:p-12 flex flex-col justify-center bg-white\/50 overflow-y-auto\">\n\n \n\n <div class=\"mb-8 hidden md:block\">\n\n <h2 class=\"text-5xl font-bold mb-2 text-gray-900\" id=\"level-celeb-name\">Name<\/h2>\n\n <div class=\"flex flex-wrap gap-2 mb-4 text-sm text-gray-500\">\n\n <span id=\"level-celeb-origin\" class=\"bg-white px-3 py-1 rounded-full border shadow-sm\">\ud83c\udf0d Unknown Origin<\/span>\n\n <span id=\"level-celeb-role\" class=\"bg-white px-3 py-1 rounded-full border shadow-sm\">\ud83c\udfad Artist<\/span>\n\n <\/div>\n\n <p class=\"text-gray-600 text-sm leading-relaxed mb-2\" id=\"level-celeb-aka\"><strong>Also known as:<\/strong> –<\/p>\n\n <p class=\"text-gray-600 text-sm leading-relaxed line-clamp-3\" id=\"level-celeb-bio\">Biography loading…<\/p>\n\n <\/div>\n\n\n\n <p class=\"text-gray-500 mb-6 font-bold tracking-wide uppercase text-xs\">Select Difficulty<\/p>\n\n\n\n <div class=\"space-y-4\">\n\n <button onclick=\"initGame('New Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-green-400 hover:shadow-lg transition-all group text-left\">\n\n <div>\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-green-600\">New Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">General trivia. Easy wins.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-seedling text-2xl text-gray-300 group-hover:text-green-500 transition-colors\"><\/i>\n\n <\/button>\n\n\n\n <button onclick=\"initGame('Moderate Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-blue-400 hover:shadow-lg transition-all group text-left\">\n\n <div>\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-blue-600\">Moderate Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">Career timeline & specifics.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-star text-2xl text-gray-300 group-hover:text-blue-500 transition-colors\"><\/i>\n\n <\/button>\n\n\n\n <button onclick=\"initGame('Super Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-pink-500 hover:shadow-lg transition-all group text-left relative overflow-hidden\">\n\n <div class=\"z-10 relative\">\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-pink-600\">Super Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">Deep cuts. Quotes. Hard mode.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-fire text-2xl text-gray-300 group-hover:text-pink-500 transition-colors z-10 relative\"><\/i>\n\n <div class=\"absolute inset-0 bg-pink-50 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n\n <\/button>\n\n <\/div>\n\n <\/article>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-game\" class=\"hidden p-8 md:p-12 max-w-2xl mx-auto h-full flex flex-col relative\">\n\n <button onclick=\"if(confirm('Quit this quiz?')) goBack('scene-level')\" class=\"absolute top-6 left-6 text-gray-400 hover:text-red-500 transition-colors z-10 w-10 h-10 flex items-center justify-center bg-white rounded-full shadow-md\">\n\n <i class=\"fa-solid fa-times text-xl\"><\/i>\n\n <\/button>\n\n\n\n <div class=\"flex justify-between items-center mb-6 mt-8\">\n\n <span class=\"text-xs font-bold text-pink-500 tracking-widest uppercase\">Question <span id=\"q-idx\">1<\/span>\/10<\/span>\n\n <div class=\"w-32 h-2 bg-gray-100 rounded-full overflow-hidden\">\n\n <div id=\"progress-bar\" class=\"h-full bg-gradient-to-r from-pink-500 to-orange-500 w-0 transition-all duration-500\"><\/div>\n\n <\/div>\n\n <\/div>\n\n\n\n <div id=\"game-skeleton\" class=\"flex-grow flex flex-col justify-center space-y-6 animate-pulse\">\n\n <div class=\"h-24 w-full rounded-2xl skeleton\"><\/div>\n\n <div class=\"space-y-3\">\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <\/div>\n\n <p class=\"text-center text-sm text-gray-400 animate-bounce mt-4\">AI is crafting your quiz…<\/p>\n\n <\/div>\n\n\n\n <div id=\"game-card\" class=\"hidden flex-grow flex flex-col justify-center\">\n\n <h3 id=\"q-text\" class=\"text-2xl md:text-3xl font-bold text-gray-900 mb-8 leading-snug\"><\/h3>\n\n <div id=\"options-grid\" class=\"space-y-3\"><\/div>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-results\" class=\"hidden p-8 md:p-12 text-center flex flex-col items-center justify-center h-full\">\n\n <div class=\"mb-6 relative\">\n\n <div class=\"text-8xl animate-bounce\" id=\"result-emoji\">\ud83c\udf89<\/div>\n\n <\/div>\n\n \n\n <h2 class=\"text-4xl font-bold mb-2\" id=\"result-title\">Quiz Complete!<\/h2>\n\n <p class=\"text-gray-500 mb-8 max-w-md mx-auto\" id=\"result-msg\">You did great.<\/p>\n\n\n\n <div class=\"grid grid-cols-2 gap-4 w-full max-w-xs mb-8\">\n\n <div class=\"bg-gray-50 rounded-2xl p-4\">\n\n <p class=\"text-xs text-gray-400 uppercase font-bold\">Score<\/p>\n\n <p class=\"text-3xl font-bold text-gray-800\"><span id=\"final-score\">0<\/span>\/10<\/p>\n\n <\/div>\n\n <div class=\"bg-pink-50 rounded-2xl p-4 border border-pink-100\">\n\n <p class=\"text-xs text-pink-400 uppercase font-bold\">Credits<\/p>\n\n <p class=\"text-3xl font-bold text-pink-600\">+<span id=\"final-credits\">0<\/span><\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div id=\"badge-notification\" class=\"hidden animate-pulse mb-8 bg-gradient-to-r from-yellow-100 to-yellow-50 border border-yellow-300 p-4 rounded-xl flex items-center gap-4 text-left max-w-md w-full shadow-sm\">\n\n <div class=\"text-4xl\">\ud83c\udfc5<\/div>\n\n <div>\n\n <h4 class=\"font-bold text-yellow-900 text-sm uppercase tracking-wide\">New Badge Unlocked<\/h4>\n\n <p class=\"text-yellow-700 font-medium\" id=\"badge-name-display\">Super Fan of…<\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"flex gap-4\">\n\n <button onclick=\"goHome()\" class=\"px-8 py-3 rounded-full border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-100 transition-colors\">Home<\/button>\n\n <button onclick=\"initGame(gameState.currentDifficulty)\" class=\"px-8 py-3 rounded-full bg-gray-900 text-white font-bold hover:bg-gray-800 shadow-lg hover:shadow-xl transition-all\">Replay<\/button>\n\n <\/div>\n\n <\/section>\n\n \n\n \n\n <section id=\"scene-leaderboard\" class=\"hidden p-0 h-full flex flex-col relative\">\n\n <div class=\"p-8 pb-4\">\n\n <h2 class=\"text-3xl font-bold mb-2\">Global <span class=\"text-gradient\">Rankings<\/span><\/h2>\n\n <p class=\"text-sm text-gray-500\">Top Questrians from around the world.<\/p>\n\n <\/div>\n\n \n\n <div class=\"flex-grow overflow-y-auto px-6 pb-24\" id=\"leaderboard-container\"><\/div>\n\n\n\n <div id=\"sticky-rank\" class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg flex justify-between items-center transform transition-transform translate-y-full\">\n\n <div class=\"flex items-center gap-3\">\n\n <span class=\"font-bold text-gray-400 text-lg w-8 text-center\" id=\"my-rank-num\">#99<\/span>\n\n <img decoding=\"async\" id=\"my-rank-img\" src=\"\" class=\"w-10 h-10 rounded-full border border-gray-200\">\n\n <span class=\"font-bold text-gray-800\">You<\/span>\n\n <\/div>\n\n <span class=\"font-bold text-pink-600\" id=\"my-rank-score\">0 CR<\/span>\n\n <\/div>\n\n <\/section>\n\n\n\n <\/div>\n\n \n\n \n\n <div class=\"md:hidden fixed bottom-4 left-4 right-4 bg-white\/90 backdrop-blur-md rounded-2xl shadow-xl flex justify-around p-3 z-50 border border-gray-100\">\n\n <button onclick=\"goHome()\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-house text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Home<\/span>\n\n <\/button>\n\n <button onclick=\"showScene('scene-leaderboard')\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-trophy text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Ranks<\/span>\n\n <\/button>\n\n <button onclick=\"toggleProfile()\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-user text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Profile<\/span>\n\n <\/button>\n\n <\/div>\n\n <\/main>\n\n\n\n \n\n <aside id=\"profile-modal\" class=\"fixed inset-0 bg-black\/40 z-[60] hidden flex justify-end backdrop-blur-sm\">\n\n <div class=\"bg-white w-full max-w-md h-full shadow-2xl p-8 overflow-y-auto transform transition-transform duration-300 translate-x-full\" id=\"profile-panel\">\n\n <header class=\"flex justify-between items-center mb-10\">\n\n <h2 class=\"text-3xl font-bold\">Your <span class=\"text-gradient\">Legacy<\/span><\/h2>\n\n <button onclick=\"toggleProfile()\" class=\"w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors\">\n\n <i class=\"fa-solid fa-times\"><\/i>\n\n <\/button>\n\n <\/header>\n\n\n\n <div class=\"flex items-center gap-4 mb-8 bg-gray-50 p-6 rounded-2xl border border-gray-100\">\n\n <img decoding=\"async\" id=\"profile-img-lg\" src=\"\" class=\"w-16 h-16 rounded-full object-cover\">\n\n <div>\n\n <h3 id=\"profile-name\" class=\"font-bold text-xl\">Player Name<\/h3>\n\n <p class=\"text-sm text-gray-500\" id=\"profile-email\">player@email.com<\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <h3 class=\"font-bold text-gray-800 mb-4 border-b pb-2\">Your Badges<\/h3>\n\n <div id=\"badges-grid\" class=\"grid grid-cols-2 gap-3 mb-10\">\n\n <div class=\"col-span-2 text-center py-8 text-gray-400 italic bg-gray-50 rounded-xl\" id=\"no-badges-msg\">\n\n No badges yet. Score 9\/10 on Super Fan difficulty to earn them!\n\n <\/div>\n\n <\/div>\n\n\n\n <button onclick=\"logout()\" class=\"w-full py-4 text-red-500 font-bold hover:bg-red-50 rounded-xl transition-colors mb-4\">\n\n Sign Out\n\n <\/button>\n\n <\/div>\n\n <\/aside>\n\n\n\n \n\n <script>\n\n const CONFIG = {\n\n tmdbKey: \"fee20f86982429f4a7359a43e94b7aa2\",\n\n geminiKey: \"AIzaSyClqnce2JYxjTKV_PPIM0eHl9vqhMF9Qfk\", \n\n geminiModel: \"gemini-3-flash-preview\"\n\n };\n\n \n\n const DEFAULT_ACTORS = {\n\n 'Hollywood': ['Robert Downey Jr.', 'Leonardo DiCaprio', 'Zendaya', 'Tom Cruise', 'Meryl Streep', 'Dwayne Johnson', 'Scarlett Johansson'],\n\n 'Bollywood': ['Shah Rukh Khan', 'Deepika Padukone', 'Salman Khan', 'Alia Bhatt', 'Amitabh Bachchan', 'Ranveer Singh', 'Priyanka Chopra'],\n\n 'Lollywood': ['Fawad Khan', 'Mahira Khan', 'Humayun Saeed', 'Saba Qamar', 'Bilal Abbas Khan', 'Hania Aamir', 'Yumna Zaidi'],\n\n 'South Indian': ['Rajinikanth', 'Prabhas', 'Allu Arjun', 'Samantha Ruth Prabhu', 'Vijay', 'Mahesh Babu', 'Nayanthara'],\n\n 'Music': ['Taylor Swift', 'The Weeknd', 'Ariana Grande', 'BTS', 'Drake', 'Beyonce', 'Ed Sheeran'],\n\n 'Sports': ['Lionel Messi', 'Cristiano Ronaldo', 'Virat Kohli', 'LeBron James', 'Serena Williams', 'Babar Azam']\n\n };\n\n\n\n let userSession = null;\n\n let gameState = {\n\n celebName: \"\",\n\n celebId: null,\n\n celebImage: \"\",\n\n currentDifficulty: \"\",\n\n questions: [],\n\n currQIndex: 0,\n\n score: 0,\n\n currentCategory: null\n\n };\n\n\n\n \/\/ --- INIT & AUTH ---\n\n window.onload = function() {\n\n checkSession();\n\n setRandomPlaceholder();\n\n };\n\n\n\n function setRandomPlaceholder() {\n\n \/\/ Randomly pick a name from ANY category to inspire search\n\n const allNames = Object.values(DEFAULT_ACTORS).flat();\n\n const randomName = allNames[Math.floor(Math.random() * allNames.length)];\n\n document.getElementById('search-input').placeholder = `Type a name (e.g. ${randomName})...`;\n\n }\n\n\n\n function checkSession() {\n\n const stored = localStorage.getItem('quillQuestUser');\n\n if (stored) {\n\n userSession = JSON.parse(stored);\n\n if (userSession.email) initApp();\n\n else showAuth();\n\n } else {\n\n showAuth();\n\n }\n\n }\n\n\n\n function handleCredentialResponse(response) {\n\n try {\n\n const base64Url = response.credential.split('.')[1];\n\n const base64 = base64Url.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n\n const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));\n\n const payload = JSON.parse(jsonPayload);\n\n\n\n userSession = {\n\n id: payload.sub,\n\n name: payload.name,\n\n email: payload.email,\n\n picture: payload.picture,\n\n credits: 0,\n\n badges: [],\n\n history: []\n\n };\n\n\n\n const existingData = localStorage.getItem(`data_${payload.email}`);\n\n if (existingData) {\n\n const savedData = JSON.parse(existingData);\n\n userSession.credits = savedData.credits || 0;\n\n userSession.badges = savedData.badges || [];\n\n userSession.history = savedData.history || [];\n\n }\n\n\n\n localStorage.setItem('quillQuestUser', JSON.stringify(userSession));\n\n initApp();\n\n\n\n } catch (e) {\n\n console.error(\"Auth Error\", e);\n\n alert(\"Login failed. Please try again.\");\n\n }\n\n }\n\n\n\n function logout() {\n\n localStorage.removeItem('quillQuestUser');\n\n location.reload();\n\n }\n\n\n\n function showAuth() {\n\n document.getElementById('view-auth').classList.remove('hidden');\n\n document.getElementById('view-app').classList.add('hidden');\n\n }\n\n\n\n function initApp() {\n\n document.getElementById('view-auth').classList.add('hidden');\n\n document.getElementById('view-app').classList.remove('hidden');\n\n updateUIProfile();\n\n showScene('scene-discovery');\n\n }\n\n\n\n \/\/ --- UI UPDATES ---\n\n function updateUIProfile() {\n\n document.getElementById('nav-credits').textContent = userSession.credits;\n\n document.getElementById('nav-credits-mobile').textContent = `${userSession.credits} CR`;\n\n document.getElementById('nav-avatar').src = userSession.picture;\n\n document.getElementById('nav-avatar-mobile').src = userSession.picture;\n\n \n\n document.getElementById('profile-img-lg').src = userSession.picture;\n\n document.getElementById('profile-name').textContent = userSession.name;\n\n document.getElementById('profile-email').textContent = userSession.email;\n\n\n\n const badgeContainer = document.getElementById('badges-grid');\n\n const noBadgesMsg = document.getElementById('no-badges-msg');\n\n Array.from(badgeContainer.children).forEach(child => {\n\n if (child.id !== 'no-badges-msg') badgeContainer.removeChild(child);\n\n });\n\n if (userSession.badges && userSession.badges.length > 0) {\n\n noBadgesMsg.classList.add('hidden');\n\n userSession.badges.forEach(badge => {\n\n const badgeEl = document.createElement('div');\n\n badgeEl.className = \"bg-yellow-50 border border-yellow-200 rounded-xl p-3 text-center flex flex-col items-center justify-center shadow-sm\";\n\n badgeEl.innerHTML = `<span class=\"text-2xl mb-1\">\ud83c\udfc5<\/span><span class=\"text-xs font-bold text-yellow-800 leading-tight\">${badge}<\/span>`;\n\n badgeContainer.appendChild(badgeEl);\n\n });\n\n } else {\n\n noBadgesMsg.classList.remove('hidden');\n\n }\n\n }\n\n\n\n function showScene(sceneId) {\n\n ['scene-discovery', 'scene-search-results', 'scene-level', 'scene-game', 'scene-results', 'scene-leaderboard'].forEach(id => {\n\n document.getElementById(id).classList.add('hidden');\n\n });\n\n document.getElementById(sceneId).classList.remove('hidden');\n\n document.getElementById(sceneId).classList.add('animate-fade-in');\n\n\n\n if (sceneId === 'scene-leaderboard') renderLeaderboard();\n\n }\n\n\n\n function showToast(message) {\n\n const container = document.getElementById('toast-container');\n\n const toast = document.createElement('div');\n\n toast.className = \"bg-gray-900 text-white px-6 py-3 rounded-full shadow-xl text-sm font-medium toast-enter pointer-events-auto flex items-center gap-2\";\n\n toast.innerHTML = `<i class=\"fa-solid fa-circle-info text-pink-400\"><\/i> <span>${message}<\/span>`;\n\n \n\n container.appendChild(toast);\n\n setTimeout(() => {\n\n toast.style.opacity = '0';\n\n setTimeout(() => container.removeChild(toast), 500);\n\n }, 4000);\n\n }\n\n \n\n function goHome() {\n\n document.getElementById('search-input').value = \"\";\n\n gameState.questions = [];\n\n gameState.score = 0;\n\n gameState.currentCategory = null;\n\n showScene('scene-discovery');\n\n setRandomPlaceholder(); \/\/ Shuffle placeholder on home return\n\n }\n\n \n\n function goBack(sceneId) { showScene(sceneId); }\n\n\n\n function toggleProfile() {\n\n const modal = document.getElementById('profile-modal');\n\n const panel = document.getElementById('profile-panel');\n\n if (modal.classList.contains('hidden')) {\n\n modal.classList.remove('hidden');\n\n setTimeout(() => panel.classList.remove('translate-x-full'), 10);\n\n } else {\n\n panel.classList.add('translate-x-full');\n\n setTimeout(() => modal.classList.add('hidden'), 300);\n\n }\n\n }\n\n\n\n \/\/ --- LEADERBOARD ---\n\n function renderLeaderboard() {\n\n const list = document.getElementById('leaderboard-container');\n\n const sticky = document.getElementById('sticky-rank');\n\n \n\n \/\/ --- FIX: PERSISTENT LOCAL LEADERBOARD ---\n\n \/\/ 1. Get existing rankings from localStorage or init empty\n\n let savedRankings = JSON.parse(localStorage.getItem('quillQuest_rankings') || '[]');\n\n \n\n \/\/ 2. Ensure current user is in the list with their LATEST credits\n\n \/\/ Check if user already exists in rankings\n\n const existingUserIndex = savedRankings.findIndex(u => u.email === userSession.email);\n\n \n\n if (existingUserIndex !== -1) {\n\n \/\/ Update existing score\/details\n\n savedRankings[existingUserIndex].credits = userSession.credits;\n\n savedRankings[existingUserIndex].name = userSession.name;\n\n savedRankings[existingUserIndex].img = userSession.picture;\n\n } else {\n\n \/\/ Add new user if they have credits > 0 (optional constraint, keeps list clean)\n\n \/\/ For now, add them regardless so they see themselves immediately\n\n savedRankings.push({\n\n name: userSession.name,\n\n credits: userSession.credits,\n\n img: userSession.picture,\n\n email: userSession.email \/\/ Used as ID\n\n });\n\n }\n\n \n\n \/\/ 3. Sort by Credits Descending\n\n savedRankings.sort((a, b) => b.credits - a.credits);\n\n \n\n \/\/ 4. Save updated rankings back to storage\n\n localStorage.setItem('quillQuest_rankings', JSON.stringify(savedRankings));\n\n \n\n \/\/ 5. Render List\n\n list.innerHTML = '';\n\n \n\n \/\/ Identify My Rank\n\n const myRank = savedRankings.findIndex(u => u.email === userSession.email) + 1;\n\n \n\n savedRankings.slice(0, 50).forEach((user, index) => { \/\/ Limit display to top 50\n\n const rank = index + 1;\n\n const isMe = user.email === userSession.email;\n\n const rowClass = isMe ? 'bg-pink-50 border-pink-200' : 'bg-white border-gray-100';\n\n \n\n let medal = `#${rank}`;\n\n let rankColor = 'text-gray-800';\n\n \n\n if (rank === 1) { medal = '\ud83d\udc51'; rankColor = 'text-yellow-500'; }\n\n else if (rank === 2) { medal = '\ud83e\udd48'; rankColor = 'text-gray-400'; }\n\n else if (rank === 3) { medal = '\ud83e\udd49'; rankColor = 'text-orange-500'; }\n\n\n\n const item = document.createElement('div');\n\n item.className = `flex justify-between items-center p-4 rounded-2xl shadow-sm border mb-3 ${rowClass}`;\n\n item.innerHTML = `\n\n <div class=\"flex items-center gap-4\">\n\n <span class=\"font-bold text-xl w-8 text-center ${rankColor}\">${medal}<\/span>\n\n <img decoding=\"async\" src=\"${user.img}\" class=\"w-10 h-10 rounded-full object-cover border border-gray-200\">\n\n <div>\n\n <p class=\"font-bold text-gray-800 text-sm ${isMe ? 'text-pink-600' : ''}\">${user.name}<\/p>\n\n ${isMe ? '<p class=\"text-[10px] text-pink-400 font-bold uppercase\">That\\'s You!<\/p>' : ''}\n\n <\/div>\n\n <\/div>\n\n <span class=\"font-bold text-gray-600\">${user.credits} CR<\/span>\n\n `;\n\n list.appendChild(item);\n\n });\n\n\n\n \/\/ Sticky Logic (Show if I'm not visible in the initial scroll view, roughly rank > 10)\n\n if (myRank > 10) {\n\n sticky.classList.remove('translate-y-full');\n\n document.getElementById('my-rank-num').textContent = `#${myRank}`;\n\n document.getElementById('my-rank-img').src = userSession.picture;\n\n document.getElementById('my-rank-score').textContent = `${userSession.credits} CR`;\n\n } else {\n\n sticky.classList.add('translate-y-full');\n\n }\n\n }\n\n\n\n \/\/ --- SEARCH & DATA ---\n\n async function handleSearch() {\n\n const query = document.getElementById('search-input').value.trim();\n\n if (!query) return;\n\n \n\n const btn = document.getElementById('search-btn');\n\n const originalIcon = btn.innerHTML;\n\n btn.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i>';\n\n\n\n await performSearch(query);\n\n btn.innerHTML = originalIcon;\n\n }\n\n \n\n async function performSearch(query) {\n\n try {\n\n const res = await fetch(`https:\/\/api.themoviedb.org\/3\/search\/person?api_key=${CONFIG.tmdbKey}&query=${encodeURIComponent(query)}`);\n\n const data = await res.json();\n\n \n\n if (data.results && data.results.length > 0) {\n\n const topMatch = data.results[0];\n\n \n\n \/\/ Auto-Correct Logic \/ Did You Mean\n\n \/\/ Only show if there's a tangible difference (ignoring just spaces\/case if exactly same chars)\n\n if (topMatch.name.toLowerCase().replace(\/\\s\/g, '') !== query.toLowerCase().replace(\/\\s\/g, '')) {\n\n showToast(`Did you mean <strong>${topMatch.name}<\/strong>? Displaying results.`);\n\n }\n\n\n\n renderSearchResults(data.results);\n\n showScene('scene-search-results');\n\n } else {\n\n \/\/ Logic to show \"Did you mean\" if 0 results but maybe close match? \n\n \/\/ TMDb search handles fuzzy matching to an extent. \n\n \/\/ If 0 results, we truly found nothing.\n\n alert(\"No celebrity found. Try a different spelling.\");\n\n }\n\n } catch(e) {\n\n console.error(e);\n\n alert(\"Search error. Check connection.\");\n\n }\n\n }\n\n \n\n function renderSearchResults(results) {\n\n const grid = document.getElementById('results-grid');\n\n grid.innerHTML = '';\n\n \n\n results.slice(0, 6).forEach(person => {\n\n const img = person.profile_path ? `https:\/\/image.tmdb.org\/t\/p\/w200${person.profile_path}` : 'https:\/\/via.placeholder.com\/200x300?text=No+Img';\n\n const dept = person.known_for_department || \"Entertainment\";\n\n \n\n const div = document.createElement('div');\n\n div.className = \"bg-white p-3 rounded-xl shadow-sm flex items-center gap-4 cursor-pointer hover:bg-pink-50 transition-colors border border-gray-100\";\n\n div.onclick = () => selectCeleb(person);\n\n \n\n div.innerHTML = `\n\n <img decoding=\"async\" src=\"${img}\" class=\"w-16 h-16 rounded-full object-cover border-2 border-pink-100\">\n\n <div>\n\n <h4 class=\"font-bold text-gray-800 text-lg\">${person.name}<\/h4>\n\n <p class=\"text-xs text-gray-500 uppercase tracking-wide\">${dept}<\/p>\n\n <\/div>\n\n `;\n\n grid.appendChild(div);\n\n });\n\n }\n\n \n\n async function selectCeleb(person) {\n\n gameState.celebName = person.name;\n\n gameState.celebId = person.id;\n\n \n\n \/\/ Smart Role Detection based on Manual Search vs Category\n\n \/\/ If manual search, check if they exist in our default lists to assign correct genre\n\n if (!gameState.currentCategory) {\n\n for (const [category, names] of Object.entries(DEFAULT_ACTORS)) {\n\n if (names.includes(person.name)) {\n\n gameState.currentCategory = category;\n\n break;\n\n }\n\n }\n\n }\n\n\n\n if (person.profile_path) {\n\n gameState.celebImage = `https:\/\/image.tmdb.org\/t\/p\/w780${person.profile_path}`;\n\n document.getElementById('level-celeb-img').src = gameState.celebImage;\n\n document.getElementById('level-celeb-img').classList.remove('hidden');\n\n document.getElementById('level-celeb-fallback').classList.add('hidden');\n\n } else {\n\n const initials = person.name.split(' ').map(n => n[0]).join('').substring(0,2).toUpperCase();\n\n document.getElementById('level-celeb-img').classList.add('hidden');\n\n const fallback = document.getElementById('level-celeb-fallback');\n\n fallback.classList.remove('hidden');\n\n fallback.textContent = initials;\n\n }\n\n\n\n document.getElementById('level-celeb-name').textContent = gameState.celebName;\n\n document.getElementById('level-celeb-name-mobile').textContent = gameState.celebName;\n\n \n\n showScene('scene-level');\n\n \n\n \/\/ FETCH DEEP DETAILS\n\n try {\n\n const res = await fetch(`https:\/\/api.themoviedb.org\/3\/person\/${person.id}?api_key=${CONFIG.tmdbKey}`);\n\n const details = await res.json();\n\n \n\n \/\/ --- SMART ORIGIN & ROLE FIX ---\n\n let originText = \"\ud83c\udf0d Global\";\n\n let roleText = `\ud83c\udfad ${details.known_for_department}`;\n\n\n\n \/\/ Force Role Label based on Category (Fixes \"Acting\" for singers\/athletes)\n\n if (gameState.currentCategory === 'Music') roleText = \"\ud83c\udfa4 Music Icon\";\n\n if (gameState.currentCategory === 'Sports') roleText = \"\ud83c\udfc6 Sports Icon\";\n\n \n\n \/\/ Smart Location Logic\n\n if (gameState.currentCategory) {\n\n if (gameState.currentCategory === 'Bollywood') originText = \"Industry: Bollywood\";\n\n else if (gameState.currentCategory === 'Hollywood') originText = \"Industry: Hollywood\";\n\n else if (gameState.currentCategory === 'Lollywood') originText = \"Industry: Lollywood\";\n\n else if (gameState.currentCategory === 'South Indian') originText = \"Industry: South Indian\";\n\n else if (details.place_of_birth) originText = `Born in: ${details.place_of_birth}`;\n\n } else {\n\n if (details.place_of_birth) originText = `Born in: ${details.place_of_birth}`;\n\n }\n\n \n\n document.getElementById('level-celeb-origin').textContent = originText;\n\n document.getElementById('level-celeb-role').textContent = roleText;\n\n document.getElementById('level-celeb-role-mobile').textContent = roleText;\n\n \n\n \/\/ --- NICKNAME CLEANUP ---\n\n if(details.also_known_as && details.also_known_as.length > 0) {\n\n const englishAKAs = details.also_known_as.filter(name => \/^[a-zA-Z\\s\\.\\-]+$\/.test(name));\n\n if (englishAKAs.length > 0) {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> ${englishAKAs.slice(0, 2).join(', ')}`;\n\n } else {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> ${details.also_known_as[0]}`;\n\n }\n\n } else {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> The One & Only`;\n\n }\n\n\n\n document.getElementById('level-celeb-bio').textContent = details.biography || \"A mysterious legend with no public biography yet.\";\n\n\n\n } catch(e) {\n\n console.warn(\"Could not fetch deep details\", e);\n\n }\n\n }\n\n\n\n function quickSearch(category) {\n\n gameState.currentCategory = category;\n\n const pool = DEFAULT_ACTORS[category];\n\n const randomActor = pool[Math.floor(Math.random() * pool.length)];\n\n \n\n document.getElementById('search-input').value = \"\"; \n\n \n\n \/\/ Direct fetch for quick search to bypass list view\n\n fetch(`https:\/\/api.themoviedb.org\/3\/search\/person?api_key=${CONFIG.tmdbKey}&query=${encodeURIComponent(randomActor)}`)\n\n .then(res => res.json())\n\n .then(data => {\n\n if (data.results && data.results.length > 0) {\n\n selectCeleb(data.results[0]);\n\n }\n\n });\n\n }\n\n\n\n \/\/ --- GAME LOGIC ---\n\n async function initGame(difficulty) {\n\n gameState.currentDifficulty = difficulty;\n\n gameState.score = 0;\n\n gameState.currQIndex = 0;\n\n gameState.questions = [];\n\n\n\n showScene('scene-game');\n\n \n\n document.getElementById('game-skeleton').classList.remove('hidden');\n\n document.getElementById('game-card').classList.add('hidden');\n\n document.getElementById('progress-bar').style.width = '0%';\n\n \n\n \/\/ Random Seed to ensure SHUFFLE every time\n\n const randomSeed = Math.floor(Math.random() * 1000000);\n\n\n\n let difficultyInstructions = \"\";\n\n if (difficulty === 'New Fan') {\n\n difficultyInstructions = \"Ask extremely basic questions. Focus on general knowledge, famous nickname, debut movie, or spouse. Things even a casual observer would know.\";\n\n } else if (difficulty === 'Moderate Fan') {\n\n difficultyInstructions = \"Ask professional, mid-level questions. Focus on career timeline, specific awards, box office hits, and director collaborations.\";\n\n } else if (difficulty === 'Super Fan') {\n\n difficultyInstructions = \"Ask the HARDEST level questions. Focus on obscure interview quotes, specific details like 'what color shoes did they wear in X movie scene', release dates of flop movies, or deep cuts.\";\n\n }\n\n\n\n const prompt = `\n\n Create a 10-question trivia quiz about \"${gameState.celebName}\".\n\n Difficulty: ${difficulty}.\n\n Instructions: ${difficultyInstructions}\n\n \n\n IMPORTANT: Generate FRESH, UNIQUE questions.\n\n Random Seed: ${randomSeed}.\n\n \n\n Return strictly a JSON array of 10 objects. No markdown.\n\n Structure: [{\"q\": \"Question string\", \"opts\": [\"A\", \"B\", \"C\", \"D\"], \"a\": \"Correct String\"}]\n\n Ensure the correct answer (\"a\") is one of the \"opts\". Randomize \"opts\" order.\n\n `;\n\n\n\n try {\n\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/${CONFIG.geminiModel}:generateContent?key=${CONFIG.geminiKey}`, {\n\n method: 'POST',\n\n headers: { 'Content-Type': 'application\/json' },\n\n body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })\n\n });\n\n\n\n const data = await response.json();\n\n let rawText = data.candidates[0].content.parts[0].text;\n\n rawText = rawText.replace(\/```json\/g, '').replace(\/```\/g, '').trim();\n\n gameState.questions = JSON.parse(rawText);\n\n renderQuestion();\n\n\n\n } catch (e) {\n\n console.error(\"AI Error\", e);\n\n alert(\"The AI is overwhelmed by star power. Try again in a moment.\");\n\n goBack('scene-level');\n\n }\n\n }\n\n\n\n function renderQuestion() {\n\n const q = gameState.questions[gameState.currQIndex];\n\n \n\n document.getElementById('game-skeleton').classList.add('hidden');\n\n document.getElementById('game-card').classList.remove('hidden');\n\n\n\n document.getElementById('q-idx').textContent = gameState.currQIndex + 1;\n\n document.getElementById('q-text').textContent = q.q;\n\n document.getElementById('progress-bar').style.width = `${(gameState.currQIndex \/ 10) * 100}%`;\n\n\n\n const grid = document.getElementById('options-grid');\n\n grid.innerHTML = '';\n\n \n\n q.opts.forEach(opt => {\n\n const btn = document.createElement('button');\n\n btn.className = \"w-full text-left p-4 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 font-medium text-gray-700 transition-all shadow-sm active:scale-95\";\n\n btn.textContent = opt;\n\n btn.onclick = () => handleAnswer(btn, opt, q.a);\n\n grid.appendChild(btn);\n\n });\n\n }\n\n\n\n function handleAnswer(btn, selected, correct) {\n\n const allBtns = document.getElementById('options-grid').children;\n\n for (let b of allBtns) b.disabled = true;\n\n\n\n if (selected === correct) {\n\n gameState.score++;\n\n btn.classList.replace('border-gray-200', 'border-green-500');\n\n btn.classList.replace('bg-white', 'bg-green-50');\n\n btn.classList.add('text-green-700');\n\n } else {\n\n btn.classList.replace('border-gray-200', 'border-red-500');\n\n btn.classList.replace('bg-white', 'bg-red-50');\n\n btn.classList.add('text-red-700');\n\n \n\n for (let b of allBtns) {\n\n if (b.textContent === correct) {\n\n b.classList.replace('border-gray-200', 'border-green-500');\n\n b.classList.replace('bg-white', 'bg-green-50');\n\n b.classList.add('text-green-700');\n\n }\n\n }\n\n }\n\n\n\n setTimeout(() => {\n\n gameState.currQIndex++;\n\n if (gameState.currQIndex < 10) {\n\n renderQuestion();\n\n } else {\n\n endGame();\n\n }\n\n }, 1200);\n\n }\n\n\n\n function endGame() {\n\n showScene('scene-results');\n\n \n\n const score = gameState.score;\n\n let credits = 0;\n\n let msg = \"\";\n\n let emoji = \"\";\n\n\n\n if (score >= 9) {\n\n credits = 150;\n\n msg = `Absolute Legend! You know ${gameState.celebName} better than they know themselves.`;\n\n emoji = \"\ud83d\udc51\";\n\n confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });\n\n } else if (score >= 6) {\n\n credits = 50;\n\n msg = \"Solid work! You're definitely a fan.\";\n\n emoji = \"\ud83d\ude0e\";\n\n } else {\n\n credits = 10;\n\n msg = \"Time to re-watch the movies!\";\n\n emoji = \"\ud83d\ude05\";\n\n }\n\n\n\n document.getElementById('final-score').textContent = score;\n\n document.getElementById('final-credits').textContent = credits;\n\n document.getElementById('result-msg').textContent = msg;\n\n document.getElementById('result-emoji').textContent = emoji;\n\n\n\n userSession.credits += credits;\n\n \n\n const badgeDiv = document.getElementById('badge-notification');\n\n badgeDiv.classList.add('hidden');\n\n \n\n if (gameState.currentDifficulty === 'Super Fan' && score >= 9) {\n\n const badgeTitle = `Super Fan of ${gameState.celebName}`;\n\n if (!userSession.badges.includes(badgeTitle)) {\n\n userSession.badges.push(badgeTitle);\n\n badgeDiv.classList.remove('hidden');\n\n document.getElementById('badge-name-display').textContent = badgeTitle;\n\n }\n\n }\n\n\n\n userSession.history.unshift({\n\n celeb: gameState.celebName,\n\n difficulty: gameState.currentDifficulty,\n\n score: score,\n\n date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\n });\n\n\n\n localStorage.setItem('quillQuestUser', JSON.stringify(userSession));\n\n localStorage.setItem(`data_${userSession.email}`, JSON.stringify({\n\n credits: userSession.credits,\n\n badges: userSession.badges,\n\n history: userSession.history\n\n }));\n\n\n\n updateUIProfile();\n\n \/\/ Force leaderboard update so the new score appears if the user checks right away\n\n renderLeaderboard();\n\n }\n\n <\/script>\n\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Celebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest Welcome, Future Legend Log in to track your badges and become a verified Super Fan. By continuing, you agree to our Terms of Service. Magazine Edition BETA Home Leaderboard Credits 0 0 CR Who is your Icon? Search for a star to prove your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","disable_featured_image":"yes","disable_share_box":"yes","disable_header":"yes","disable_footer":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":10,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9,"date":"2025-12-04T22:56:14","date_gmt":"2025-12-04T22:56:14","guid":{"rendered":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/?page_id=9"},"modified":"2026-02-20T17:16:12","modified_gmt":"2026-02-20T17:16:12","slug":"ai-celebrity-trivia-game","status":"publish","type":"page","link":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/","title":{"rendered":"AI Celebrity Trivia Game"},"content":{"rendered":"\n\n\n\n\n\n\n \n\n \n\nCelebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest<\/title>\n\n\n <meta name=\"title\" content=\"Celebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest\">\n <meta name=\"description\" content=\"Play the definitive Celebrity Trivia Game on Quill Quest. Test your fandom with AI-generated questions on Bollywood, Hollywood, and Lollywood icons. Earn badges and prove you are a Super Fan today!\">\n <meta name=\"keywords\" content=\"Celebrity Trivia Game, AI Quiz, Bollywood Trivia, Hollywood Stars Quiz, Super Fan Badges, Quill Quest, Interactive Fan Test\">\n\n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:title\" content=\"Celebrity Trivia Game: Can You Beat the AI?\">\n <meta property=\"og:description\" content=\"Test your knowledge in the most advanced Celebrity Trivia Game. Unlock exclusive badges for your favorite icons.\">\n <meta property=\"og:image\" content=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\"> \n <meta property=\"og:url\" content=\"https:\/\/quillquestonline.com\/\">\n\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"Celebrity Trivia Game: Prove Your Fandom\">\n <meta name=\"twitter:description\" content=\"AI-powered questions. Real-time leaderboards. The Celebrity Trivia Game for the next generation of fans.\">\n\n \n\n \n\n <script src=\"https:\/\/accounts.google.com\/gsi\/client\" async defer><\/script>\n\n \n\n \n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\n\n\n\n \n\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n\n \n\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n\n \n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Gilda+Display&family=Poppins:wght@400;500;600;800&display=swap\" rel=\"stylesheet\">\n\n\n\n <style>\n\n \/* --- VISUAL IDENTITY & ANIMATIONS --- *\/\n\n body { \n\n font-family: 'Poppins', sans-serif; \n\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #FF0092, #FF9C00);\n\n background-size: 400% 400%;\n\n animation: gradientBG 15s ease infinite;\n\n }\n\n\n\n h1, h2, h3, .brand-font { font-family: 'Gilda Display', serif; }\n\n\n\n @keyframes gradientBG {\n\n 0% { background-position: 0% 50%; }\n\n 50% { background-position: 100% 50%; }\n\n 100% { background-position: 0% 50%; }\n\n }\n\n \n\n \/* Glassmorphism Utilities *\/\n\n .glass-panel {\n\n background: rgba(255, 255, 255, 0.95);\n\n backdrop-filter: blur(10px);\n\n border: 1px solid rgba(255, 255, 255, 0.5);\n\n }\n\n\n\n .glass-card {\n\n background: rgba(255, 255, 255, 0.8);\n\n backdrop-filter: blur(8px);\n\n border: 1px solid rgba(255, 255, 255, 0.6);\n\n transition: all 0.3s ease;\n\n }\n\n \n\n .glass-card:hover {\n\n transform: translateY(-5px);\n\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n\n }\n\n\n\n \/* Text Gradients *\/\n\n .text-gradient {\n\n background: linear-gradient(to right, #FF0092, #FF9C00);\n\n -webkit-background-clip: text;\n\n -webkit-text-fill-color: transparent;\n\n }\n\n \n\n \/* Animations *\/\n\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\n\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n\n\n \/* Toast Animation *\/\n\n .toast-enter { animation: slideInDown 0.5s ease forwards; }\n\n @keyframes slideInDown {\n\n from { transform: translate(-50%, -100%); opacity: 0; }\n\n to { transform: translate(-50%, 20px); opacity: 1; }\n\n }\n\n <\/style>\n\n\n\n \n\n <script type=\"application\/ld+json\" id=\"game-schema\">\n\n {\n\n \"@context\": \"https:\/\/schema.org\",\n\n \"@type\": \"VideoGame\",\n\n \"name\": \"Quill Quest: AI Celebrity Trivia\",\n\n \"genre\": \"Trivia\",\n\n \"playMode\": \"SinglePlayer\",\n\n \"description\": \"An AI-powered trivia game where you prove your fandom for celebrities like Taylor Swift, SRK, and more.\"\n\n }\n\n <\/script>\n\n<\/head>\n\n<body class=\"text-gray-800 min-h-screen flex flex-col items-center justify-center p-4\">\n\n\n\n \n\n <section id=\"view-auth\" class=\"w-full max-w-md animate-fade-in text-center\">\n\n <div class=\"glass-panel rounded-[40px] p-10 shadow-2xl relative overflow-hidden\">\n\n <div class=\"absolute -top-10 -right-10 w-32 h-32 bg-pink-500 rounded-full blur-3xl opacity-20\"><\/div>\n\n\n\n <img decoding=\"async\" src=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\" alt=\"Quill Quest Logo\" class=\"h-16 mx-auto mb-6\">\n\n \n\n <h2 class=\"text-4xl font-bold mb-2\">Welcome, <br><span class=\"text-gradient\">Future Legend<\/span><\/h2>\n\n <p class=\"text-gray-500 mb-8 font-medium\">Log in to track your badges and become a verified Super Fan.<\/p>\n\n \n\n <div class=\"flex justify-center\">\n\n <div id=\"g_id_onload\"\n\n data-client_id=\"547435377520-bq42vjq84o56jvqn2681lmqu7ugc35d9.apps.googleusercontent.com\"\n\n data-callback=\"handleCredentialResponse\"\n\n data-auto_prompt=\"false\">\n\n <\/div>\n\n <div class=\"g_id_signin\"\n\n data-type=\"standard\"\n\n data-shape=\"pill\"\n\n data-theme=\"outline\"\n\n data-text=\"signin_with\"\n\n data-size=\"large\"\n\n data-logo_alignment=\"left\">\n\n <\/div>\n\n <\/div>\n\n \n\n <p class=\"mt-6 text-xs text-gray-400\">By continuing, you agree to our Terms of Service.<\/p>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <main id=\"view-app\" class=\"hidden w-full max-w-4xl animate-fade-in relative pb-20 md:pb-0\">\n\n \n\n \n\n <nav class=\"glass-panel rounded-full px-6 py-3 mb-8 flex justify-between items-center shadow-lg sticky top-4 z-50\">\n\n <div class=\"flex items-center gap-3 cursor-pointer\" onclick=\"goHome()\">\n\n <img decoding=\"async\" src=\"https:\/\/quillquestonline.com\/wp-content\/uploads\/2024\/03\/Website-identity-Logo.png\" alt=\"Logo\" class=\"h-8 hover:opacity-80 transition-opacity\">\n\n <span class=\"font-bold text-pink-600 hidden sm:inline tracking-wider text-sm uppercase\">Magazine Edition<\/span>\n\n <span class=\"bg-pink-600 text-white text-[10px] px-2 py-0.5 rounded-full font-bold align-middle shadow-sm\">BETA<\/span>\n\n <\/div>\n\n \n\n <div class=\"hidden md:flex items-center gap-6\">\n\n <button onclick=\"goHome()\" class=\"text-gray-500 hover:text-pink-600 font-semibold text-sm uppercase tracking-wide\">Home<\/button>\n\n <button onclick=\"showScene('scene-leaderboard')\" class=\"text-gray-500 hover:text-pink-600 font-semibold text-sm uppercase tracking-wide\">Leaderboard<\/button>\n\n <div class=\"flex items-center gap-4 cursor-pointer hover:opacity-80 transition-opacity\" onclick=\"toggleProfile()\">\n\n <div class=\"text-right\">\n\n <p class=\"text-[10px] text-gray-400 font-bold uppercase tracking-widest\">Credits<\/p>\n\n <p class=\"font-bold text-lg leading-none text-gradient\" id=\"nav-credits\">0<\/p>\n\n <\/div>\n\n <div class=\"bg-gradient-to-r from-pink-500 to-orange-500 p-[2px] rounded-full\">\n\n <img decoding=\"async\" id=\"nav-avatar\" src=\"\" alt=\"Profile\" class=\"w-10 h-10 rounded-full border-2 border-white bg-white object-cover\">\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"md:hidden flex items-center gap-2\" onclick=\"toggleProfile()\">\n\n <span class=\"font-bold text-pink-600 text-sm\" id=\"nav-credits-mobile\">0 CR<\/span>\n\n <img decoding=\"async\" id=\"nav-avatar-mobile\" src=\"\" class=\"w-8 h-8 rounded-full border border-gray-200\">\n\n <\/div>\n\n <\/nav>\n\n\n\n \n\n <div class=\"glass-panel rounded-[30px] shadow-2xl overflow-hidden min-h-[500px] relative\">\n\n \n\n \n\n <div id=\"toast-container\" class=\"absolute top-0 left-1\/2 transform -translate-x-1\/2 z-[60] w-full max-w-sm p-4 pointer-events-none\"><\/div>\n\n\n\n \n\n <section id=\"scene-discovery\" class=\"p-8 md:p-12\">\n\n <header class=\"text-center mb-10\">\n\n <h2 class=\"text-4xl md:text-5xl font-bold mb-4\">Who is your <span class=\"text-gradient\">Icon?<\/span><\/h2>\n\n <p class=\"text-gray-500 text-lg\">Search for a star to prove your fandom.<\/p>\n\n <\/header>\n\n\n\n <div class=\"relative max-w-lg mx-auto mb-12\">\n\n <input type=\"text\" id=\"search-input\" placeholder=\"Type a name...\" \n\n class=\"w-full pl-6 pr-16 py-5 rounded-full border-none bg-gray-50 shadow-inner focus:ring-4 focus:ring-pink-100 transition-all outline-none text-lg font-medium text-gray-700\"\n\n onkeypress=\"if(event.key === 'Enter') handleSearch()\">\n\n <button onclick=\"handleSearch()\" id=\"search-btn\" class=\"absolute right-2 top-2 bottom-2 bg-gray-900 text-white w-12 rounded-full hover:bg-pink-600 transition-colors shadow-lg flex items-center justify-center\">\n\n <i class=\"fa-solid fa-arrow-right\"><\/i>\n\n <\/button>\n\n <\/div>\n\n\n\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n\n <button onclick=\"quickSearch('Hollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfac<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Hollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Bollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83d\udc83<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Bollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Lollywood')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\uddf5\ud83c\uddf0<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Lollywood<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('South Indian')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udf36\ufe0f<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">South Indian<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Music')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfa4<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Music<\/span>\n\n <\/button>\n\n <button onclick=\"quickSearch('Sports')\" class=\"glass-card p-6 rounded-2xl group text-center cursor-pointer\">\n\n <span class=\"text-3xl block mb-2 group-hover:rotate-12 transition-transform duration-300\">\ud83c\udfc6<\/span>\n\n <span class=\"font-bold text-gray-600 group-hover:text-pink-600\">Sports<\/span>\n\n <\/button>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-search-results\" class=\"hidden p-8 md:p-12\">\n\n <button onclick=\"goBack('scene-discovery')\" class=\"text-gray-500 hover:text-gray-900 flex items-center gap-2 mb-6\">\n\n <i class=\"fa-solid fa-arrow-left\"><\/i> Back to Search\n\n <\/button>\n\n <div class=\"flex justify-between items-center mb-6\">\n\n <h2 class=\"text-2xl font-bold\">Search Results<\/h2>\n\n <\/div>\n\n \n\n <div id=\"results-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n\n \n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-level\" class=\"hidden h-full flex flex-col md:flex-row\">\n\n <aside class=\"md:w-5\/12 bg-gray-100 relative min-h-[300px] md:min-h-full group\">\n\n <img decoding=\"async\" id=\"level-celeb-img\" src=\"\" class=\"w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105\" alt=\"Celebrity\">\n\n <div id=\"level-celeb-fallback\" class=\"hidden w-full h-full absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 flex items-center justify-center text-white font-bold text-6xl\"><\/div>\n\n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/90 via-black\/20 to-transparent md:bg-gradient-to-r md:from-transparent md:to-white\/10\"><\/div>\n\n \n\n <button onclick=\"goBack('scene-discovery')\" class=\"absolute top-4 left-4 bg-white\/20 backdrop-blur text-white p-3 rounded-full hover:bg-white hover:text-black transition-all z-20\">\n\n <i class=\"fa-solid fa-arrow-left\"><\/i>\n\n <\/button>\n\n\n\n <div class=\"absolute bottom-6 left-6 text-white z-10 w-full pr-6\">\n\n <h2 class=\"text-4xl font-bold leading-none mb-1 font-brand\" id=\"level-celeb-name-mobile\">Name<\/h2>\n\n <p class=\"text-sm opacity-80\" id=\"level-celeb-role-mobile\">Actor<\/p>\n\n <\/div>\n\n <\/aside>\n\n\n\n <article class=\"md:w-7\/12 p-8 md:p-12 flex flex-col justify-center bg-white\/50 overflow-y-auto\">\n\n \n\n <div class=\"mb-8 hidden md:block\">\n\n <h2 class=\"text-5xl font-bold mb-2 text-gray-900\" id=\"level-celeb-name\">Name<\/h2>\n\n <div class=\"flex flex-wrap gap-2 mb-4 text-sm text-gray-500\">\n\n <span id=\"level-celeb-origin\" class=\"bg-white px-3 py-1 rounded-full border shadow-sm\">\ud83c\udf0d Unknown Origin<\/span>\n\n <span id=\"level-celeb-role\" class=\"bg-white px-3 py-1 rounded-full border shadow-sm\">\ud83c\udfad Artist<\/span>\n\n <\/div>\n\n <p class=\"text-gray-600 text-sm leading-relaxed mb-2\" id=\"level-celeb-aka\"><strong>Also known as:<\/strong> –<\/p>\n\n <p class=\"text-gray-600 text-sm leading-relaxed line-clamp-3\" id=\"level-celeb-bio\">Biography loading…<\/p>\n\n <\/div>\n\n\n\n <p class=\"text-gray-500 mb-6 font-bold tracking-wide uppercase text-xs\">Select Difficulty<\/p>\n\n\n\n <div class=\"space-y-4\">\n\n <button onclick=\"initGame('New Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-green-400 hover:shadow-lg transition-all group text-left\">\n\n <div>\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-green-600\">New Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">General trivia. Easy wins.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-seedling text-2xl text-gray-300 group-hover:text-green-500 transition-colors\"><\/i>\n\n <\/button>\n\n\n\n <button onclick=\"initGame('Moderate Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-blue-400 hover:shadow-lg transition-all group text-left\">\n\n <div>\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-blue-600\">Moderate Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">Career timeline & specifics.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-star text-2xl text-gray-300 group-hover:text-blue-500 transition-colors\"><\/i>\n\n <\/button>\n\n\n\n <button onclick=\"initGame('Super Fan')\" class=\"w-full flex items-center justify-between p-5 rounded-2xl border border-gray-200 bg-white hover:border-pink-500 hover:shadow-lg transition-all group text-left relative overflow-hidden\">\n\n <div class=\"z-10 relative\">\n\n <span class=\"font-bold text-lg text-gray-800 group-hover:text-pink-600\">Super Fan<\/span>\n\n <p class=\"text-xs text-gray-400\">Deep cuts. Quotes. Hard mode.<\/p>\n\n <\/div>\n\n <i class=\"fa-solid fa-fire text-2xl text-gray-300 group-hover:text-pink-500 transition-colors z-10 relative\"><\/i>\n\n <div class=\"absolute inset-0 bg-pink-50 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n\n <\/button>\n\n <\/div>\n\n <\/article>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-game\" class=\"hidden p-8 md:p-12 max-w-2xl mx-auto h-full flex flex-col relative\">\n\n <button onclick=\"if(confirm('Quit this quiz?')) goBack('scene-level')\" class=\"absolute top-6 left-6 text-gray-400 hover:text-red-500 transition-colors z-10 w-10 h-10 flex items-center justify-center bg-white rounded-full shadow-md\">\n\n <i class=\"fa-solid fa-times text-xl\"><\/i>\n\n <\/button>\n\n\n\n <div class=\"flex justify-between items-center mb-6 mt-8\">\n\n <span class=\"text-xs font-bold text-pink-500 tracking-widest uppercase\">Question <span id=\"q-idx\">1<\/span>\/10<\/span>\n\n <div class=\"w-32 h-2 bg-gray-100 rounded-full overflow-hidden\">\n\n <div id=\"progress-bar\" class=\"h-full bg-gradient-to-r from-pink-500 to-orange-500 w-0 transition-all duration-500\"><\/div>\n\n <\/div>\n\n <\/div>\n\n\n\n <div id=\"game-skeleton\" class=\"flex-grow flex flex-col justify-center space-y-6 animate-pulse\">\n\n <div class=\"h-24 w-full rounded-2xl skeleton\"><\/div>\n\n <div class=\"space-y-3\">\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <div class=\"h-16 w-full rounded-xl skeleton\"><\/div>\n\n <\/div>\n\n <p class=\"text-center text-sm text-gray-400 animate-bounce mt-4\">AI is crafting your quiz…<\/p>\n\n <\/div>\n\n\n\n <div id=\"game-card\" class=\"hidden flex-grow flex flex-col justify-center\">\n\n <h3 id=\"q-text\" class=\"text-2xl md:text-3xl font-bold text-gray-900 mb-8 leading-snug\"><\/h3>\n\n <div id=\"options-grid\" class=\"space-y-3\"><\/div>\n\n <\/div>\n\n <\/section>\n\n\n\n \n\n <section id=\"scene-results\" class=\"hidden p-8 md:p-12 text-center flex flex-col items-center justify-center h-full\">\n\n <div class=\"mb-6 relative\">\n\n <div class=\"text-8xl animate-bounce\" id=\"result-emoji\">\ud83c\udf89<\/div>\n\n <\/div>\n\n \n\n <h2 class=\"text-4xl font-bold mb-2\" id=\"result-title\">Quiz Complete!<\/h2>\n\n <p class=\"text-gray-500 mb-8 max-w-md mx-auto\" id=\"result-msg\">You did great.<\/p>\n\n\n\n <div class=\"grid grid-cols-2 gap-4 w-full max-w-xs mb-8\">\n\n <div class=\"bg-gray-50 rounded-2xl p-4\">\n\n <p class=\"text-xs text-gray-400 uppercase font-bold\">Score<\/p>\n\n <p class=\"text-3xl font-bold text-gray-800\"><span id=\"final-score\">0<\/span>\/10<\/p>\n\n <\/div>\n\n <div class=\"bg-pink-50 rounded-2xl p-4 border border-pink-100\">\n\n <p class=\"text-xs text-pink-400 uppercase font-bold\">Credits<\/p>\n\n <p class=\"text-3xl font-bold text-pink-600\">+<span id=\"final-credits\">0<\/span><\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div id=\"badge-notification\" class=\"hidden animate-pulse mb-8 bg-gradient-to-r from-yellow-100 to-yellow-50 border border-yellow-300 p-4 rounded-xl flex items-center gap-4 text-left max-w-md w-full shadow-sm\">\n\n <div class=\"text-4xl\">\ud83c\udfc5<\/div>\n\n <div>\n\n <h4 class=\"font-bold text-yellow-900 text-sm uppercase tracking-wide\">New Badge Unlocked<\/h4>\n\n <p class=\"text-yellow-700 font-medium\" id=\"badge-name-display\">Super Fan of…<\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <div class=\"flex gap-4\">\n\n <button onclick=\"goHome()\" class=\"px-8 py-3 rounded-full border-2 border-gray-200 text-gray-600 font-bold hover:bg-gray-100 transition-colors\">Home<\/button>\n\n <button onclick=\"initGame(gameState.currentDifficulty)\" class=\"px-8 py-3 rounded-full bg-gray-900 text-white font-bold hover:bg-gray-800 shadow-lg hover:shadow-xl transition-all\">Replay<\/button>\n\n <\/div>\n\n <\/section>\n\n \n\n \n\n <section id=\"scene-leaderboard\" class=\"hidden p-0 h-full flex flex-col relative\">\n\n <div class=\"p-8 pb-4\">\n\n <h2 class=\"text-3xl font-bold mb-2\">Global <span class=\"text-gradient\">Rankings<\/span><\/h2>\n\n <p class=\"text-sm text-gray-500\">Top Questrians from around the world.<\/p>\n\n <\/div>\n\n \n\n <div class=\"flex-grow overflow-y-auto px-6 pb-24\" id=\"leaderboard-container\"><\/div>\n\n\n\n <div id=\"sticky-rank\" class=\"absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg flex justify-between items-center transform transition-transform translate-y-full\">\n\n <div class=\"flex items-center gap-3\">\n\n <span class=\"font-bold text-gray-400 text-lg w-8 text-center\" id=\"my-rank-num\">#99<\/span>\n\n <img decoding=\"async\" id=\"my-rank-img\" src=\"\" class=\"w-10 h-10 rounded-full border border-gray-200\">\n\n <span class=\"font-bold text-gray-800\">You<\/span>\n\n <\/div>\n\n <span class=\"font-bold text-pink-600\" id=\"my-rank-score\">0 CR<\/span>\n\n <\/div>\n\n <\/section>\n\n\n\n <\/div>\n\n \n\n \n\n <div class=\"md:hidden fixed bottom-4 left-4 right-4 bg-white\/90 backdrop-blur-md rounded-2xl shadow-xl flex justify-around p-3 z-50 border border-gray-100\">\n\n <button onclick=\"goHome()\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-house text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Home<\/span>\n\n <\/button>\n\n <button onclick=\"showScene('scene-leaderboard')\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-trophy text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Ranks<\/span>\n\n <\/button>\n\n <button onclick=\"toggleProfile()\" class=\"flex flex-col items-center text-gray-400 hover:text-pink-600 focus:text-pink-600 group\">\n\n <i class=\"fa-solid fa-user text-xl mb-1 group-hover:scale-110 transition-transform\"><\/i>\n\n <span class=\"text-[10px] font-bold\">Profile<\/span>\n\n <\/button>\n\n <\/div>\n\n <\/main>\n\n\n\n \n\n <aside id=\"profile-modal\" class=\"fixed inset-0 bg-black\/40 z-[60] hidden flex justify-end backdrop-blur-sm\">\n\n <div class=\"bg-white w-full max-w-md h-full shadow-2xl p-8 overflow-y-auto transform transition-transform duration-300 translate-x-full\" id=\"profile-panel\">\n\n <header class=\"flex justify-between items-center mb-10\">\n\n <h2 class=\"text-3xl font-bold\">Your <span class=\"text-gradient\">Legacy<\/span><\/h2>\n\n <button onclick=\"toggleProfile()\" class=\"w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors\">\n\n <i class=\"fa-solid fa-times\"><\/i>\n\n <\/button>\n\n <\/header>\n\n\n\n <div class=\"flex items-center gap-4 mb-8 bg-gray-50 p-6 rounded-2xl border border-gray-100\">\n\n <img decoding=\"async\" id=\"profile-img-lg\" src=\"\" class=\"w-16 h-16 rounded-full object-cover\">\n\n <div>\n\n <h3 id=\"profile-name\" class=\"font-bold text-xl\">Player Name<\/h3>\n\n <p class=\"text-sm text-gray-500\" id=\"profile-email\">player@email.com<\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n <h3 class=\"font-bold text-gray-800 mb-4 border-b pb-2\">Your Badges<\/h3>\n\n <div id=\"badges-grid\" class=\"grid grid-cols-2 gap-3 mb-10\">\n\n <div class=\"col-span-2 text-center py-8 text-gray-400 italic bg-gray-50 rounded-xl\" id=\"no-badges-msg\">\n\n No badges yet. Score 9\/10 on Super Fan difficulty to earn them!\n\n <\/div>\n\n <\/div>\n\n\n\n <button onclick=\"logout()\" class=\"w-full py-4 text-red-500 font-bold hover:bg-red-50 rounded-xl transition-colors mb-4\">\n\n Sign Out\n\n <\/button>\n\n <\/div>\n\n <\/aside>\n\n\n\n \n\n <script>\n\n const CONFIG = {\n\n tmdbKey: \"fee20f86982429f4a7359a43e94b7aa2\",\n\n geminiKey: \"AIzaSyClqnce2JYxjTKV_PPIM0eHl9vqhMF9Qfk\", \n\n geminiModel: \"gemini-3-flash-preview\"\n\n };\n\n \n\n const DEFAULT_ACTORS = {\n\n 'Hollywood': ['Robert Downey Jr.', 'Leonardo DiCaprio', 'Zendaya', 'Tom Cruise', 'Meryl Streep', 'Dwayne Johnson', 'Scarlett Johansson'],\n\n 'Bollywood': ['Shah Rukh Khan', 'Deepika Padukone', 'Salman Khan', 'Alia Bhatt', 'Amitabh Bachchan', 'Ranveer Singh', 'Priyanka Chopra'],\n\n 'Lollywood': ['Fawad Khan', 'Mahira Khan', 'Humayun Saeed', 'Saba Qamar', 'Bilal Abbas Khan', 'Hania Aamir', 'Yumna Zaidi'],\n\n 'South Indian': ['Rajinikanth', 'Prabhas', 'Allu Arjun', 'Samantha Ruth Prabhu', 'Vijay', 'Mahesh Babu', 'Nayanthara'],\n\n 'Music': ['Taylor Swift', 'The Weeknd', 'Ariana Grande', 'BTS', 'Drake', 'Beyonce', 'Ed Sheeran'],\n\n 'Sports': ['Lionel Messi', 'Cristiano Ronaldo', 'Virat Kohli', 'LeBron James', 'Serena Williams', 'Babar Azam']\n\n };\n\n\n\n let userSession = null;\n\n let gameState = {\n\n celebName: \"\",\n\n celebId: null,\n\n celebImage: \"\",\n\n currentDifficulty: \"\",\n\n questions: [],\n\n currQIndex: 0,\n\n score: 0,\n\n currentCategory: null\n\n };\n\n\n\n \/\/ --- INIT & AUTH ---\n\n window.onload = function() {\n\n checkSession();\n\n setRandomPlaceholder();\n\n };\n\n\n\n function setRandomPlaceholder() {\n\n \/\/ Randomly pick a name from ANY category to inspire search\n\n const allNames = Object.values(DEFAULT_ACTORS).flat();\n\n const randomName = allNames[Math.floor(Math.random() * allNames.length)];\n\n document.getElementById('search-input').placeholder = `Type a name (e.g. ${randomName})...`;\n\n }\n\n\n\n function checkSession() {\n\n const stored = localStorage.getItem('quillQuestUser');\n\n if (stored) {\n\n userSession = JSON.parse(stored);\n\n if (userSession.email) initApp();\n\n else showAuth();\n\n } else {\n\n showAuth();\n\n }\n\n }\n\n\n\n function handleCredentialResponse(response) {\n\n try {\n\n const base64Url = response.credential.split('.')[1];\n\n const base64 = base64Url.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n\n const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));\n\n const payload = JSON.parse(jsonPayload);\n\n\n\n userSession = {\n\n id: payload.sub,\n\n name: payload.name,\n\n email: payload.email,\n\n picture: payload.picture,\n\n credits: 0,\n\n badges: [],\n\n history: []\n\n };\n\n\n\n const existingData = localStorage.getItem(`data_${payload.email}`);\n\n if (existingData) {\n\n const savedData = JSON.parse(existingData);\n\n userSession.credits = savedData.credits || 0;\n\n userSession.badges = savedData.badges || [];\n\n userSession.history = savedData.history || [];\n\n }\n\n\n\n localStorage.setItem('quillQuestUser', JSON.stringify(userSession));\n\n initApp();\n\n\n\n } catch (e) {\n\n console.error(\"Auth Error\", e);\n\n alert(\"Login failed. Please try again.\");\n\n }\n\n }\n\n\n\n function logout() {\n\n localStorage.removeItem('quillQuestUser');\n\n location.reload();\n\n }\n\n\n\n function showAuth() {\n\n document.getElementById('view-auth').classList.remove('hidden');\n\n document.getElementById('view-app').classList.add('hidden');\n\n }\n\n\n\n function initApp() {\n\n document.getElementById('view-auth').classList.add('hidden');\n\n document.getElementById('view-app').classList.remove('hidden');\n\n updateUIProfile();\n\n showScene('scene-discovery');\n\n }\n\n\n\n \/\/ --- UI UPDATES ---\n\n function updateUIProfile() {\n\n document.getElementById('nav-credits').textContent = userSession.credits;\n\n document.getElementById('nav-credits-mobile').textContent = `${userSession.credits} CR`;\n\n document.getElementById('nav-avatar').src = userSession.picture;\n\n document.getElementById('nav-avatar-mobile').src = userSession.picture;\n\n \n\n document.getElementById('profile-img-lg').src = userSession.picture;\n\n document.getElementById('profile-name').textContent = userSession.name;\n\n document.getElementById('profile-email').textContent = userSession.email;\n\n\n\n const badgeContainer = document.getElementById('badges-grid');\n\n const noBadgesMsg = document.getElementById('no-badges-msg');\n\n Array.from(badgeContainer.children).forEach(child => {\n\n if (child.id !== 'no-badges-msg') badgeContainer.removeChild(child);\n\n });\n\n if (userSession.badges && userSession.badges.length > 0) {\n\n noBadgesMsg.classList.add('hidden');\n\n userSession.badges.forEach(badge => {\n\n const badgeEl = document.createElement('div');\n\n badgeEl.className = \"bg-yellow-50 border border-yellow-200 rounded-xl p-3 text-center flex flex-col items-center justify-center shadow-sm\";\n\n badgeEl.innerHTML = `<span class=\"text-2xl mb-1\">\ud83c\udfc5<\/span><span class=\"text-xs font-bold text-yellow-800 leading-tight\">${badge}<\/span>`;\n\n badgeContainer.appendChild(badgeEl);\n\n });\n\n } else {\n\n noBadgesMsg.classList.remove('hidden');\n\n }\n\n }\n\n\n\n function showScene(sceneId) {\n\n ['scene-discovery', 'scene-search-results', 'scene-level', 'scene-game', 'scene-results', 'scene-leaderboard'].forEach(id => {\n\n document.getElementById(id).classList.add('hidden');\n\n });\n\n document.getElementById(sceneId).classList.remove('hidden');\n\n document.getElementById(sceneId).classList.add('animate-fade-in');\n\n\n\n if (sceneId === 'scene-leaderboard') renderLeaderboard();\n\n }\n\n\n\n function showToast(message) {\n\n const container = document.getElementById('toast-container');\n\n const toast = document.createElement('div');\n\n toast.className = \"bg-gray-900 text-white px-6 py-3 rounded-full shadow-xl text-sm font-medium toast-enter pointer-events-auto flex items-center gap-2\";\n\n toast.innerHTML = `<i class=\"fa-solid fa-circle-info text-pink-400\"><\/i> <span>${message}<\/span>`;\n\n \n\n container.appendChild(toast);\n\n setTimeout(() => {\n\n toast.style.opacity = '0';\n\n setTimeout(() => container.removeChild(toast), 500);\n\n }, 4000);\n\n }\n\n \n\n function goHome() {\n\n document.getElementById('search-input').value = \"\";\n\n gameState.questions = [];\n\n gameState.score = 0;\n\n gameState.currentCategory = null;\n\n showScene('scene-discovery');\n\n setRandomPlaceholder(); \/\/ Shuffle placeholder on home return\n\n }\n\n \n\n function goBack(sceneId) { showScene(sceneId); }\n\n\n\n function toggleProfile() {\n\n const modal = document.getElementById('profile-modal');\n\n const panel = document.getElementById('profile-panel');\n\n if (modal.classList.contains('hidden')) {\n\n modal.classList.remove('hidden');\n\n setTimeout(() => panel.classList.remove('translate-x-full'), 10);\n\n } else {\n\n panel.classList.add('translate-x-full');\n\n setTimeout(() => modal.classList.add('hidden'), 300);\n\n }\n\n }\n\n\n\n \/\/ --- LEADERBOARD ---\n\n function renderLeaderboard() {\n\n const list = document.getElementById('leaderboard-container');\n\n const sticky = document.getElementById('sticky-rank');\n\n \n\n \/\/ --- FIX: PERSISTENT LOCAL LEADERBOARD ---\n\n \/\/ 1. Get existing rankings from localStorage or init empty\n\n let savedRankings = JSON.parse(localStorage.getItem('quillQuest_rankings') || '[]');\n\n \n\n \/\/ 2. Ensure current user is in the list with their LATEST credits\n\n \/\/ Check if user already exists in rankings\n\n const existingUserIndex = savedRankings.findIndex(u => u.email === userSession.email);\n\n \n\n if (existingUserIndex !== -1) {\n\n \/\/ Update existing score\/details\n\n savedRankings[existingUserIndex].credits = userSession.credits;\n\n savedRankings[existingUserIndex].name = userSession.name;\n\n savedRankings[existingUserIndex].img = userSession.picture;\n\n } else {\n\n \/\/ Add new user if they have credits > 0 (optional constraint, keeps list clean)\n\n \/\/ For now, add them regardless so they see themselves immediately\n\n savedRankings.push({\n\n name: userSession.name,\n\n credits: userSession.credits,\n\n img: userSession.picture,\n\n email: userSession.email \/\/ Used as ID\n\n });\n\n }\n\n \n\n \/\/ 3. Sort by Credits Descending\n\n savedRankings.sort((a, b) => b.credits - a.credits);\n\n \n\n \/\/ 4. Save updated rankings back to storage\n\n localStorage.setItem('quillQuest_rankings', JSON.stringify(savedRankings));\n\n \n\n \/\/ 5. Render List\n\n list.innerHTML = '';\n\n \n\n \/\/ Identify My Rank\n\n const myRank = savedRankings.findIndex(u => u.email === userSession.email) + 1;\n\n \n\n savedRankings.slice(0, 50).forEach((user, index) => { \/\/ Limit display to top 50\n\n const rank = index + 1;\n\n const isMe = user.email === userSession.email;\n\n const rowClass = isMe ? 'bg-pink-50 border-pink-200' : 'bg-white border-gray-100';\n\n \n\n let medal = `#${rank}`;\n\n let rankColor = 'text-gray-800';\n\n \n\n if (rank === 1) { medal = '\ud83d\udc51'; rankColor = 'text-yellow-500'; }\n\n else if (rank === 2) { medal = '\ud83e\udd48'; rankColor = 'text-gray-400'; }\n\n else if (rank === 3) { medal = '\ud83e\udd49'; rankColor = 'text-orange-500'; }\n\n\n\n const item = document.createElement('div');\n\n item.className = `flex justify-between items-center p-4 rounded-2xl shadow-sm border mb-3 ${rowClass}`;\n\n item.innerHTML = `\n\n <div class=\"flex items-center gap-4\">\n\n <span class=\"font-bold text-xl w-8 text-center ${rankColor}\">${medal}<\/span>\n\n <img decoding=\"async\" src=\"${user.img}\" class=\"w-10 h-10 rounded-full object-cover border border-gray-200\">\n\n <div>\n\n <p class=\"font-bold text-gray-800 text-sm ${isMe ? 'text-pink-600' : ''}\">${user.name}<\/p>\n\n ${isMe ? '<p class=\"text-[10px] text-pink-400 font-bold uppercase\">That\\'s You!<\/p>' : ''}\n\n <\/div>\n\n <\/div>\n\n <span class=\"font-bold text-gray-600\">${user.credits} CR<\/span>\n\n `;\n\n list.appendChild(item);\n\n });\n\n\n\n \/\/ Sticky Logic (Show if I'm not visible in the initial scroll view, roughly rank > 10)\n\n if (myRank > 10) {\n\n sticky.classList.remove('translate-y-full');\n\n document.getElementById('my-rank-num').textContent = `#${myRank}`;\n\n document.getElementById('my-rank-img').src = userSession.picture;\n\n document.getElementById('my-rank-score').textContent = `${userSession.credits} CR`;\n\n } else {\n\n sticky.classList.add('translate-y-full');\n\n }\n\n }\n\n\n\n \/\/ --- SEARCH & DATA ---\n\n async function handleSearch() {\n\n const query = document.getElementById('search-input').value.trim();\n\n if (!query) return;\n\n \n\n const btn = document.getElementById('search-btn');\n\n const originalIcon = btn.innerHTML;\n\n btn.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i>';\n\n\n\n await performSearch(query);\n\n btn.innerHTML = originalIcon;\n\n }\n\n \n\n async function performSearch(query) {\n\n try {\n\n const res = await fetch(`https:\/\/api.themoviedb.org\/3\/search\/person?api_key=${CONFIG.tmdbKey}&query=${encodeURIComponent(query)}`);\n\n const data = await res.json();\n\n \n\n if (data.results && data.results.length > 0) {\n\n const topMatch = data.results[0];\n\n \n\n \/\/ Auto-Correct Logic \/ Did You Mean\n\n \/\/ Only show if there's a tangible difference (ignoring just spaces\/case if exactly same chars)\n\n if (topMatch.name.toLowerCase().replace(\/\\s\/g, '') !== query.toLowerCase().replace(\/\\s\/g, '')) {\n\n showToast(`Did you mean <strong>${topMatch.name}<\/strong>? Displaying results.`);\n\n }\n\n\n\n renderSearchResults(data.results);\n\n showScene('scene-search-results');\n\n } else {\n\n \/\/ Logic to show \"Did you mean\" if 0 results but maybe close match? \n\n \/\/ TMDb search handles fuzzy matching to an extent. \n\n \/\/ If 0 results, we truly found nothing.\n\n alert(\"No celebrity found. Try a different spelling.\");\n\n }\n\n } catch(e) {\n\n console.error(e);\n\n alert(\"Search error. Check connection.\");\n\n }\n\n }\n\n \n\n function renderSearchResults(results) {\n\n const grid = document.getElementById('results-grid');\n\n grid.innerHTML = '';\n\n \n\n results.slice(0, 6).forEach(person => {\n\n const img = person.profile_path ? `https:\/\/image.tmdb.org\/t\/p\/w200${person.profile_path}` : 'https:\/\/via.placeholder.com\/200x300?text=No+Img';\n\n const dept = person.known_for_department || \"Entertainment\";\n\n \n\n const div = document.createElement('div');\n\n div.className = \"bg-white p-3 rounded-xl shadow-sm flex items-center gap-4 cursor-pointer hover:bg-pink-50 transition-colors border border-gray-100\";\n\n div.onclick = () => selectCeleb(person);\n\n \n\n div.innerHTML = `\n\n <img decoding=\"async\" src=\"${img}\" class=\"w-16 h-16 rounded-full object-cover border-2 border-pink-100\">\n\n <div>\n\n <h4 class=\"font-bold text-gray-800 text-lg\">${person.name}<\/h4>\n\n <p class=\"text-xs text-gray-500 uppercase tracking-wide\">${dept}<\/p>\n\n <\/div>\n\n `;\n\n grid.appendChild(div);\n\n });\n\n }\n\n \n\n async function selectCeleb(person) {\n\n gameState.celebName = person.name;\n\n gameState.celebId = person.id;\n\n \n\n \/\/ Smart Role Detection based on Manual Search vs Category\n\n \/\/ If manual search, check if they exist in our default lists to assign correct genre\n\n if (!gameState.currentCategory) {\n\n for (const [category, names] of Object.entries(DEFAULT_ACTORS)) {\n\n if (names.includes(person.name)) {\n\n gameState.currentCategory = category;\n\n break;\n\n }\n\n }\n\n }\n\n\n\n if (person.profile_path) {\n\n gameState.celebImage = `https:\/\/image.tmdb.org\/t\/p\/w780${person.profile_path}`;\n\n document.getElementById('level-celeb-img').src = gameState.celebImage;\n\n document.getElementById('level-celeb-img').classList.remove('hidden');\n\n document.getElementById('level-celeb-fallback').classList.add('hidden');\n\n } else {\n\n const initials = person.name.split(' ').map(n => n[0]).join('').substring(0,2).toUpperCase();\n\n document.getElementById('level-celeb-img').classList.add('hidden');\n\n const fallback = document.getElementById('level-celeb-fallback');\n\n fallback.classList.remove('hidden');\n\n fallback.textContent = initials;\n\n }\n\n\n\n document.getElementById('level-celeb-name').textContent = gameState.celebName;\n\n document.getElementById('level-celeb-name-mobile').textContent = gameState.celebName;\n\n \n\n showScene('scene-level');\n\n \n\n \/\/ FETCH DEEP DETAILS\n\n try {\n\n const res = await fetch(`https:\/\/api.themoviedb.org\/3\/person\/${person.id}?api_key=${CONFIG.tmdbKey}`);\n\n const details = await res.json();\n\n \n\n \/\/ --- SMART ORIGIN & ROLE FIX ---\n\n let originText = \"\ud83c\udf0d Global\";\n\n let roleText = `\ud83c\udfad ${details.known_for_department}`;\n\n\n\n \/\/ Force Role Label based on Category (Fixes \"Acting\" for singers\/athletes)\n\n if (gameState.currentCategory === 'Music') roleText = \"\ud83c\udfa4 Music Icon\";\n\n if (gameState.currentCategory === 'Sports') roleText = \"\ud83c\udfc6 Sports Icon\";\n\n \n\n \/\/ Smart Location Logic\n\n if (gameState.currentCategory) {\n\n if (gameState.currentCategory === 'Bollywood') originText = \"Industry: Bollywood\";\n\n else if (gameState.currentCategory === 'Hollywood') originText = \"Industry: Hollywood\";\n\n else if (gameState.currentCategory === 'Lollywood') originText = \"Industry: Lollywood\";\n\n else if (gameState.currentCategory === 'South Indian') originText = \"Industry: South Indian\";\n\n else if (details.place_of_birth) originText = `Born in: ${details.place_of_birth}`;\n\n } else {\n\n if (details.place_of_birth) originText = `Born in: ${details.place_of_birth}`;\n\n }\n\n \n\n document.getElementById('level-celeb-origin').textContent = originText;\n\n document.getElementById('level-celeb-role').textContent = roleText;\n\n document.getElementById('level-celeb-role-mobile').textContent = roleText;\n\n \n\n \/\/ --- NICKNAME CLEANUP ---\n\n if(details.also_known_as && details.also_known_as.length > 0) {\n\n const englishAKAs = details.also_known_as.filter(name => \/^[a-zA-Z\\s\\.\\-]+$\/.test(name));\n\n if (englishAKAs.length > 0) {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> ${englishAKAs.slice(0, 2).join(', ')}`;\n\n } else {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> ${details.also_known_as[0]}`;\n\n }\n\n } else {\n\n document.getElementById('level-celeb-aka').innerHTML = `<strong>Also known as:<\/strong> The One & Only`;\n\n }\n\n\n\n document.getElementById('level-celeb-bio').textContent = details.biography || \"A mysterious legend with no public biography yet.\";\n\n\n\n } catch(e) {\n\n console.warn(\"Could not fetch deep details\", e);\n\n }\n\n }\n\n\n\n function quickSearch(category) {\n\n gameState.currentCategory = category;\n\n const pool = DEFAULT_ACTORS[category];\n\n const randomActor = pool[Math.floor(Math.random() * pool.length)];\n\n \n\n document.getElementById('search-input').value = \"\"; \n\n \n\n \/\/ Direct fetch for quick search to bypass list view\n\n fetch(`https:\/\/api.themoviedb.org\/3\/search\/person?api_key=${CONFIG.tmdbKey}&query=${encodeURIComponent(randomActor)}`)\n\n .then(res => res.json())\n\n .then(data => {\n\n if (data.results && data.results.length > 0) {\n\n selectCeleb(data.results[0]);\n\n }\n\n });\n\n }\n\n\n\n \/\/ --- GAME LOGIC ---\n\n async function initGame(difficulty) {\n\n gameState.currentDifficulty = difficulty;\n\n gameState.score = 0;\n\n gameState.currQIndex = 0;\n\n gameState.questions = [];\n\n\n\n showScene('scene-game');\n\n \n\n document.getElementById('game-skeleton').classList.remove('hidden');\n\n document.getElementById('game-card').classList.add('hidden');\n\n document.getElementById('progress-bar').style.width = '0%';\n\n \n\n \/\/ Random Seed to ensure SHUFFLE every time\n\n const randomSeed = Math.floor(Math.random() * 1000000);\n\n\n\n let difficultyInstructions = \"\";\n\n if (difficulty === 'New Fan') {\n\n difficultyInstructions = \"Ask extremely basic questions. Focus on general knowledge, famous nickname, debut movie, or spouse. Things even a casual observer would know.\";\n\n } else if (difficulty === 'Moderate Fan') {\n\n difficultyInstructions = \"Ask professional, mid-level questions. Focus on career timeline, specific awards, box office hits, and director collaborations.\";\n\n } else if (difficulty === 'Super Fan') {\n\n difficultyInstructions = \"Ask the HARDEST level questions. Focus on obscure interview quotes, specific details like 'what color shoes did they wear in X movie scene', release dates of flop movies, or deep cuts.\";\n\n }\n\n\n\n const prompt = `\n\n Create a 10-question trivia quiz about \"${gameState.celebName}\".\n\n Difficulty: ${difficulty}.\n\n Instructions: ${difficultyInstructions}\n\n \n\n IMPORTANT: Generate FRESH, UNIQUE questions.\n\n Random Seed: ${randomSeed}.\n\n \n\n Return strictly a JSON array of 10 objects. No markdown.\n\n Structure: [{\"q\": \"Question string\", \"opts\": [\"A\", \"B\", \"C\", \"D\"], \"a\": \"Correct String\"}]\n\n Ensure the correct answer (\"a\") is one of the \"opts\". Randomize \"opts\" order.\n\n `;\n\n\n\n try {\n\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/${CONFIG.geminiModel}:generateContent?key=${CONFIG.geminiKey}`, {\n\n method: 'POST',\n\n headers: { 'Content-Type': 'application\/json' },\n\n body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })\n\n });\n\n\n\n const data = await response.json();\n\n let rawText = data.candidates[0].content.parts[0].text;\n\n rawText = rawText.replace(\/```json\/g, '').replace(\/```\/g, '').trim();\n\n gameState.questions = JSON.parse(rawText);\n\n renderQuestion();\n\n\n\n } catch (e) {\n\n console.error(\"AI Error\", e);\n\n alert(\"The AI is overwhelmed by star power. Try again in a moment.\");\n\n goBack('scene-level');\n\n }\n\n }\n\n\n\n function renderQuestion() {\n\n const q = gameState.questions[gameState.currQIndex];\n\n \n\n document.getElementById('game-skeleton').classList.add('hidden');\n\n document.getElementById('game-card').classList.remove('hidden');\n\n\n\n document.getElementById('q-idx').textContent = gameState.currQIndex + 1;\n\n document.getElementById('q-text').textContent = q.q;\n\n document.getElementById('progress-bar').style.width = `${(gameState.currQIndex \/ 10) * 100}%`;\n\n\n\n const grid = document.getElementById('options-grid');\n\n grid.innerHTML = '';\n\n \n\n q.opts.forEach(opt => {\n\n const btn = document.createElement('button');\n\n btn.className = \"w-full text-left p-4 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 font-medium text-gray-700 transition-all shadow-sm active:scale-95\";\n\n btn.textContent = opt;\n\n btn.onclick = () => handleAnswer(btn, opt, q.a);\n\n grid.appendChild(btn);\n\n });\n\n }\n\n\n\n function handleAnswer(btn, selected, correct) {\n\n const allBtns = document.getElementById('options-grid').children;\n\n for (let b of allBtns) b.disabled = true;\n\n\n\n if (selected === correct) {\n\n gameState.score++;\n\n btn.classList.replace('border-gray-200', 'border-green-500');\n\n btn.classList.replace('bg-white', 'bg-green-50');\n\n btn.classList.add('text-green-700');\n\n } else {\n\n btn.classList.replace('border-gray-200', 'border-red-500');\n\n btn.classList.replace('bg-white', 'bg-red-50');\n\n btn.classList.add('text-red-700');\n\n \n\n for (let b of allBtns) {\n\n if (b.textContent === correct) {\n\n b.classList.replace('border-gray-200', 'border-green-500');\n\n b.classList.replace('bg-white', 'bg-green-50');\n\n b.classList.add('text-green-700');\n\n }\n\n }\n\n }\n\n\n\n setTimeout(() => {\n\n gameState.currQIndex++;\n\n if (gameState.currQIndex < 10) {\n\n renderQuestion();\n\n } else {\n\n endGame();\n\n }\n\n }, 1200);\n\n }\n\n\n\n function endGame() {\n\n showScene('scene-results');\n\n \n\n const score = gameState.score;\n\n let credits = 0;\n\n let msg = \"\";\n\n let emoji = \"\";\n\n\n\n if (score >= 9) {\n\n credits = 150;\n\n msg = `Absolute Legend! You know ${gameState.celebName} better than they know themselves.`;\n\n emoji = \"\ud83d\udc51\";\n\n confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });\n\n } else if (score >= 6) {\n\n credits = 50;\n\n msg = \"Solid work! You're definitely a fan.\";\n\n emoji = \"\ud83d\ude0e\";\n\n } else {\n\n credits = 10;\n\n msg = \"Time to re-watch the movies!\";\n\n emoji = \"\ud83d\ude05\";\n\n }\n\n\n\n document.getElementById('final-score').textContent = score;\n\n document.getElementById('final-credits').textContent = credits;\n\n document.getElementById('result-msg').textContent = msg;\n\n document.getElementById('result-emoji').textContent = emoji;\n\n\n\n userSession.credits += credits;\n\n \n\n const badgeDiv = document.getElementById('badge-notification');\n\n badgeDiv.classList.add('hidden');\n\n \n\n if (gameState.currentDifficulty === 'Super Fan' && score >= 9) {\n\n const badgeTitle = `Super Fan of ${gameState.celebName}`;\n\n if (!userSession.badges.includes(badgeTitle)) {\n\n userSession.badges.push(badgeTitle);\n\n badgeDiv.classList.remove('hidden');\n\n document.getElementById('badge-name-display').textContent = badgeTitle;\n\n }\n\n }\n\n\n\n userSession.history.unshift({\n\n celeb: gameState.celebName,\n\n difficulty: gameState.currentDifficulty,\n\n score: score,\n\n date: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\n });\n\n\n\n localStorage.setItem('quillQuestUser', JSON.stringify(userSession));\n\n localStorage.setItem(`data_${userSession.email}`, JSON.stringify({\n\n credits: userSession.credits,\n\n badges: userSession.badges,\n\n history: userSession.history\n\n }));\n\n\n\n updateUIProfile();\n\n \/\/ Force leaderboard update so the new score appears if the user checks right away\n\n renderLeaderboard();\n\n }\n\n <\/script>\n\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Celebrity Trivia Game: The Ultimate Super Fan Challenge | Quill Quest Welcome, Future Legend Log in to track your badges and become a verified Super Fan. By continuing, you agree to our Terms of Service. Magazine Edition BETA Home Leaderboard Credits 0 0 CR Who is your Icon? Search for a star to prove your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","disable_featured_image":"yes","disable_share_box":"yes","disable_header":"yes","disable_footer":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":10,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/pages\/9\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/quillquestonline.com\/aicelebritytriviagame\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}