<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Leaderboard</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#2d1b4e", // A slightly lighter dark for cards
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
backgroundImage: {
'cyber-grid': "radial-gradient(circle at 50% 0%, #2d1b4e 0%, transparent 70%), linear-gradient(0deg, rgba(127,19,236,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,19,236,0.05) 1px, transparent 1px)",
}
},
},
}
</script>
<style>
.glass-panel {
background: rgba(45, 27, 78, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(127, 19, 236, 0.2);
}
.neon-text {
text-shadow: 0 0 10px rgba(127, 19, 236, 0.5);
}
.neon-border {
box-shadow: 0 0 15px rgba(127, 19, 236, 0.3);
}
.cyber-grid-bg {
background-size: 100% 100%, 40px 40px, 40px 40px;
background-position: 0 0, 0 0, 0 0;
perspective: 1000px;
}
/* Custom scrollbar for table */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #4a2b7a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden">
<!-- Background Grid Effect -->
<div class="fixed inset-0 pointer-events-none z-0 cyber-grid-bg bg-cyber-grid opacity-40"></div>
<!-- Header -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-white/10 glass-panel px-6 py-4 lg:px-10">
<div class="flex items-center gap-4 text-slate-100">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-4xl neon-text">sports_esports</span>
</div>
<h2 class="text-slate-100 text-2xl font-bold leading-tight tracking-[-0.015em] neon-text">QuizQuest</h2>
</div>
<div class="hidden lg:flex flex-1 justify-end gap-8">
<nav class="flex items-center gap-9">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Home</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Tournaments</a>
<a class="text-primary text-sm font-bold leading-normal neon-text" href="#">Leaderboard</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Shop</a>
</nav>
<div class="flex gap-3">
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary/90 transition-all text-white text-sm font-bold leading-normal tracking-[0.015em] shadow-[0_0_15px_rgba(127,19,236,0.4)]">
<span class="truncate">Sign Up</span>
</button>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-surface-dark border border-white/10 hover:bg-surface-dark/80 transition-all text-white text-sm font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Login</span>
</button>
</div>
</div>
<button class="lg:hidden text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<!-- Main Content -->
<main class="relative z-10 flex flex-col items-center w-full max-w-[1280px] mx-auto px-4 py-8 lg:px-8 flex-grow mb-20">
<!-- Page Title & Timer -->
<div class="w-full flex flex-col md:flex-row justify-between items-end md:items-center mb-12 gap-4">
<div>
<h1 class="text-4xl md:text-5xl font-black tracking-tight text-white mb-2 uppercase italic neon-text">Weekly Legends</h1>
<p class="text-slate-400 font-medium">Compete for glory in the Cyber Arena.</p>
</div>
<div class="flex items-center gap-2 bg-surface-dark/50 px-4 py-2 rounded-lg border border-primary/30">
<span class="material-symbols-outlined text-primary">timer</span>
<span class="text-slate-300 text-sm font-medium">Resets in: <span class="text-white font-bold font-mono">02d 14h 32m</span></span>
</div>
</div>
<!-- 3D Podium Section -->
<div class="w-full flex justify-center items-end mb-16 gap-4 md:gap-8 px-4 perspective-[1000px]">
<!-- 2nd Place -->
<div class="flex flex-col items-center justify-end w-1/3 max-w-[200px] order-1 md:order-1 transform translate-y-8 hover:-translate-y-2 transition-transform duration-500">
<div class="relative mb-4 group cursor-pointer">
<div class="absolute -inset-1 bg-cyan-500 rounded-full blur opacity-40 group-hover:opacity-75 transition duration-500"></div>
<div class="relative size-20 md:size-24 rounded-full border-4 border-cyan-500 overflow-hidden bg-surface-dark">
<img alt="Avatar of 2nd place winner" class="w-full h-full object-cover" data-alt="Male avatar with glasses" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFH3aXIVJGdWZE9Dt1F5BSJqadRU5m2vqmYY_BIh0jAhU40E9uG1QvpDuWcRc6Rc9OI5Vz4dcPh_HDTL8MdmBDWg9J47bwCNiFBTlje0FmeK5CiApGCdLIpDnc16ctkPGGvl0hvSG_JcT0vKNy9T3ZKMOUl0_cLqGwZVSYvgWFqGPBEimq57SECrrfX155FtscVEyBCdQ3_Nb4WHu7_Z-XiUJ62Heb6PUqz9X90B29GKDmmaaLZYt3evVLo7Cj3qoeiCAVaATa"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-cyan-500 text-black text-xs font-bold px-2 py-0.5 rounded-full border border-white">#2</div>
</div>
<div class="text-center mb-2">
<p class="text-white font-bold text-lg leading-tight truncate w-full">QuizMaster_X</p>
<p class="text-cyan-400 text-sm font-medium">14,200 pts</p>
</div>
<div class="w-full h-32 md:h-40 bg-gradient-to-t from-cyan-900/40 to-cyan-500/20 rounded-t-xl border-t border-x border-cyan-500/30 flex items-end justify-center pb-4 backdrop-blur-sm">
<span class="text-4xl md:text-6xl font-black text-cyan-500/20">2</span>
</div>
</div>
<!-- 1st Place (Center, Largest) -->
<div class="flex flex-col items-center justify-end w-1/3 max-w-[240px] order-2 md:order-2 z-20 transform hover:-translate-y-2 transition-transform duration-500">
<div class="relative mb-6 group cursor-pointer">
<div class="absolute -inset-0.5 bg-yellow-400 rounded-full blur opacity-50 group-hover:opacity-100 transition duration-500 animate-pulse"></div>
<div class="absolute -top-8 left-1/2 -translate-x-1/2 text-yellow-400 animate-bounce">
<span class="material-symbols-outlined text-4xl drop-shadow-[0_0_10px_rgba(250,204,21,0.8)]">crown</span>
</div>
<div class="relative size-28 md:size-32 rounded-full border-4 border-yellow-400 overflow-hidden bg-surface-dark shadow-[0_0_30px_rgba(250,204,21,0.3)]">
<img alt="Avatar of 1st place winner" class="w-full h-full object-cover" data-alt="Female avatar smiling" src="https://lh3.googleusercontent.com/aida-public/AB6AXuByhpmYEudZ5BVWnZ5Q-GhckeZ_lfEZ4L59In7fEI2Sfg_XCOCtiClkWHdz7BZHugU492eoB3WDzEVFaAJRlz29HrHV-Wx1kjXdzqhlDKWuOJseuGnTV1EzIgBVtGY2Y-H6ri1e0-Bmpj-blbFj2L1nCthlUWDaFjmvjLcfbMAwfXuSCrTX9NmTXYW_sK4DenWJ50GoikUovekzoJ-I-P3S8IF4zlqVe2StpegoJu7jqBwwYlHmf9u0etb3MuLwBw0lvXYZJCx8"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-yellow-400 text-black text-sm font-black px-3 py-1 rounded-full border border-white uppercase tracking-wider">Champion</div>
</div>
<div class="text-center mb-3">
<p class="text-white font-bold text-xl md:text-2xl leading-tight neon-text truncate w-full">CyberKing99</p>
<p class="text-yellow-400 text-base md:text-lg font-bold">15,400 pts</p>
</div>
<div class="w-full h-40 md:h-52 bg-gradient-to-t from-yellow-900/40 to-yellow-500/20 rounded-t-xl border-t border-x border-yellow-500/30 flex items-end justify-center pb-4 backdrop-blur-sm relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
<span class="text-5xl md:text-7xl font-black text-yellow-500/20">1</span>
</div>
</div>
<!-- 3rd Place -->
<div class="flex flex-col items-center justify-end w-1/3 max-w-[200px] order-3 md:order-3 transform translate-y-12 hover:-translate-y-2 transition-transform duration-500">
<div class="relative mb-4 group cursor-pointer">
<div class="absolute -inset-1 bg-orange-500 rounded-full blur opacity-40 group-hover:opacity-75 transition duration-500"></div>
<div class="relative size-20 md:size-24 rounded-full border-4 border-orange-500 overflow-hidden bg-surface-dark">
<img alt="Avatar of 3rd place winner" class="w-full h-full object-cover" data-alt="Male avatar with beard" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB-jVhViPXFVOAoF_XZdcsIc_5zrJcsByjCJKubzqz9puAgi4e0QZe6TYKU_L8t3LDWaYP8am8Sm4eEdonhLqanOlbfY6OfsC-89nAHghGeQ5-nTtLcaPt-D-X1YBwEeZGjrO4MeuhIkHRKsPGtgSmWYQm18JIvUeCYvjZ7uOfiQdh99vqjAGNgY3NJ4r5wUlRsgUKCyG3zTwjGYWDYUE3qRpq-osq3NHFkMQS8M9ovciNbZLKiJE6MWA0cVEdqIzm1JKmRbCmd"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange-500 text-black text-xs font-bold px-2 py-0.5 rounded-full border border-white">#3</div>
</div>
<div class="text-center mb-2">
<p class="text-white font-bold text-lg leading-tight truncate w-full">TriviaBot</p>
<p class="text-orange-400 text-sm font-medium">13,800 pts</p>
</div>
<div class="w-full h-24 md:h-32 bg-gradient-to-t from-orange-900/40 to-orange-500/20 rounded-t-xl border-t border-x border-orange-500/30 flex items-end justify-center pb-4 backdrop-blur-sm">
<span class="text-4xl md:text-6xl font-black text-orange-500/20">3</span>
</div>
</div>
</div>
<!-- Filters & Search -->
<div class="w-full flex flex-col md:flex-row gap-4 mb-6">
<div class="flex p-1 bg-surface-dark/80 rounded-full border border-white/5 backdrop-blur-md self-start">
<button class="px-6 py-2 rounded-full text-sm font-bold bg-primary text-white shadow-lg transition-all">Weekly</button>
<button class="px-6 py-2 rounded-full text-sm font-bold text-slate-400 hover:text-white hover:bg-white/5 transition-all">All Time</button>
<button class="px-6 py-2 rounded-full text-sm font-bold text-slate-400 hover:text-white hover:bg-white/5 transition-all">Daily</button>
</div>
<div class="flex-1"></div>
<div class="relative group w-full md:w-80">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-400 group-focus-within:text-primary transition-colors">search</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 rounded-full bg-surface-dark/80 border-white/10 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all backdrop-blur-md text-sm" placeholder="Search player..." type="text"/>
</div>
</div>
<!-- Glassmorphic Leaderboard Table -->
<div class="w-full glass-panel rounded-2xl overflow-hidden shadow-2xl">
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-slate-400">
<thead class="text-xs uppercase bg-black/20 text-slate-300 border-b border-white/5">
<tr>
<th class="px-6 py-4 font-bold tracking-wider w-20 text-center" scope="col">Rank</th>
<th class="px-6 py-4 font-bold tracking-wider" scope="col">User</th>
<th class="px-6 py-4 font-bold tracking-wider text-right" scope="col">Score</th>
<th class="px-6 py-4 font-bold tracking-wider text-center hidden sm:table-cell" scope="col">Win Streak</th>
<th class="px-6 py-4 font-bold tracking-wider text-right hidden md:table-cell" scope="col">Badge</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<!-- Row 4 -->
<tr class="hover:bg-primary/10 transition-colors group cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap text-center">
<span class="inline-flex items-center justify-center size-8 rounded-full bg-slate-800 text-slate-300 font-bold border border-slate-700 group-hover:border-primary group-hover:text-primary transition-colors">4</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full border border-slate-700" data-alt="User avatar male" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcfZSTVpsgj2aPmlXyNvxazIsKM65VeNzhaVbTCzDL4vAFtu3sVMoKCXmsTfFKMXvIzcfIiZRz57dPL1LcCdK6zQUBUuntQZsTziSilZlR9E_oOVlrJ4qRrtvxAp2u0yrDl2RUr2gaue30QxLXVwgDdGgH33B0--5KFgN2OyXXGhF09rUz94445n-9KVdYZhB1guHytPSn67bL3VNJm7NRsokDWaXwph_ISNi7_5Izbq8lnAw5FASMTo98JIE4ObuvAq3-Rj_c"/>
<div class="flex flex-col">
<span class="text-white font-bold group-hover:text-primary transition-colors">NeonRider</span>
<span class="text-xs text-slate-500">[CYBER]</span>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex flex-col items-end">
<span class="text-white font-bold">12,550</span>
<span class="text-emerald-400 text-xs font-medium flex items-center gap-0.5">
<span class="material-symbols-outlined text-[10px]">arrow_drop_up</span> 450
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center hidden sm:table-cell">
<span class="text-orange-400 font-bold flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-base">local_fire_department</span> 12
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right hidden md:table-cell">
<span class="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Veteran</span>
</td>
</tr>
<!-- Row 5 -->
<tr class="hover:bg-primary/10 transition-colors group cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap text-center">
<span class="inline-flex items-center justify-center size-8 rounded-full bg-slate-800 text-slate-300 font-bold border border-slate-700 group-hover:border-primary group-hover:text-primary transition-colors">5</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full border border-slate-700" data-alt="User avatar female" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCHGaK9Q-oM940j-BlLrp7FikAmj4FXmpjx26sF4OF9vhUR3dVMkc2tzxgsEL4QZB-2oMPx5RYIkpmoHfcq7gVkaLBz6Fp8P-rsrNIJo_d0lf3zDAwxIpgaSTPI3eHGFKzIRsOISGFZiRvBwqZQk5PEiVLkrccQ4qgM_pVVaGcvjbIaZfPxx9JmcyDm_OwqigEHPQSEDZqEA_1Rs9aYQAkJNbhZL-NZE0AorRD4N78G_XILe-L11ZKmj_gZKcQzOFNsuuwp6GVE"/>
<div class="flex flex-col">
<span class="text-white font-bold group-hover:text-primary transition-colors">PixelQueen</span>
<span class="text-xs text-slate-500">[PIXL]</span>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex flex-col items-end">
<span class="text-white font-bold">11,980</span>
<span class="text-emerald-400 text-xs font-medium flex items-center gap-0.5">
<span class="material-symbols-outlined text-[10px]">arrow_drop_up</span> 120
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center hidden sm:table-cell">
<span class="text-orange-400 font-bold flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-base">local_fire_department</span> 8
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right hidden md:table-cell">
<span class="px-3 py-1 rounded-full bg-purple-900/50 text-purple-200 text-xs border border-purple-700">Elite</span>
</td>
</tr>
<!-- Row 6 -->
<tr class="hover:bg-primary/10 transition-colors group cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap text-center">
<span class="inline-flex items-center justify-center size-8 rounded-full bg-slate-800 text-slate-300 font-bold border border-slate-700 group-hover:border-primary group-hover:text-primary transition-colors">6</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-3">
<div class="size-10 rounded-full bg-indigo-900 border border-indigo-500 flex items-center justify-center text-indigo-300 font-bold">JD</div>
<div class="flex flex-col">
<span class="text-white font-bold group-hover:text-primary transition-colors">JediDev</span>
<span class="text-xs text-slate-500">[CODE]</span>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex flex-col items-end">
<span class="text-white font-bold">10,400</span>
<span class="text-red-400 text-xs font-medium flex items-center gap-0.5">
<span class="material-symbols-outlined text-[10px]">arrow_drop_down</span> 50
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center hidden sm:table-cell">
<span class="text-slate-600 font-bold flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-base">local_fire_department</span> 0
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right hidden md:table-cell">
<span class="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Rookie</span>
</td>
</tr>
<!-- Row 7 -->
<tr class="hover:bg-primary/10 transition-colors group cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap text-center">
<span class="inline-flex items-center justify-center size-8 rounded-full bg-slate-800 text-slate-300 font-bold border border-slate-700 group-hover:border-primary group-hover:text-primary transition-colors">7</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full border border-slate-700" data-alt="User avatar male happy" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPqWVZBRtZHdB0cdK4bx-bzCYFvbSUG6oZyAi4BSU35XJXtR55tQe0AVlCQvKOFCpT_GnWzTPJaYL1amlqnBmXYurNaP8w5Tt9WE6JpjvFjDWiyVnk0a0cGhZsWPb4zz7Yxmnv8G30LjaMoqlFapIwrX-ZesVsbrICmeGSZDxjxIn2trRTqeFFmt5bdWhDCT0ihQo7ZkURI4nDdV0izBIJQirq_QXujrAjvzzUm09LjkO2jyawpBCpg9b4DAqrAcRYNtHTaxxT"/>
<div class="flex flex-col">
<span class="text-white font-bold group-hover:text-primary transition-colors">GlitchMaster</span>
<span class="text-xs text-slate-500">[GLCH]</span>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex flex-col items-end">
<span class="text-white font-bold">9,850</span>
<span class="text-emerald-400 text-xs font-medium flex items-center gap-0.5">
<span class="material-symbols-outlined text-[10px]">arrow_drop_up</span> 850
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center hidden sm:table-cell">
<span class="text-orange-400 font-bold flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-base">local_fire_department</span> 5
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right hidden md:table-cell">
<span class="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Pro</span>
</td>
</tr>
<!-- Row 8 -->
<tr class="hover:bg-primary/10 transition-colors group cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap text-center">
<span class="inline-flex items-center justify-center size-8 rounded-full bg-slate-800 text-slate-300 font-bold border border-slate-700 group-hover:border-primary group-hover:text-primary transition-colors">8</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full border border-slate-700" data-alt="User avatar female serious" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAhnWxrhjLKnPeDaXKasJGYhJoOsEoN7B-QFrKc0LiVA8ZwC-DBe7USnIzZLDKd7ApbQYeBk2cOGNHi_x7zK2NuhS5apg7j8-CsdI8MrNN0z3ZBnk679JzekjTee5Uu7t1JJesjkVq4xBnjOUb_WNnbexrqJXOYzf9UwdG7x0AjCKMfOUsSAk0eJWfReA3ncQUq_dRSMbRyKN5AydtA6CRCrxC-Cn8BCPbHJSdfaWUOfu7ilJoxg-mv1YKOAgZbqt5fcxfhCLQj"/>
<div class="flex flex-col">
<span class="text-white font-bold group-hover:text-primary transition-colors">LunaStarlight</span>
<span class="text-xs text-slate-500">[MOON]</span>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
<div class="flex flex-col items-end">
<span class="text-white font-bold">9,200</span>
<span class="text-slate-500 text-xs font-medium flex items-center gap-0.5">
-
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-center hidden sm:table-cell">
<span class="text-slate-600 font-bold flex items-center justify-center gap-1">
<span class="material-symbols-outlined text-base">local_fire_department</span> 1
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right hidden md:table-cell">
<span class="px-3 py-1 rounded-full bg-slate-800 text-slate-300 text-xs border border-slate-700">Advanced</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination / Load More -->
<div class="p-4 border-t border-white/5 flex justify-center">
<button class="text-primary hover:text-white transition-colors text-sm font-bold flex items-center gap-2 px-4 py-2 rounded-full hover:bg-white/5">
Load More <span class="material-symbols-outlined text-lg">expand_more</span>
</button>
</div>
</div>
</main>
<!-- Sticky User Stat Bar -->
<div class="fixed bottom-0 left-0 right-0 z-50 p-4 transform transition-transform duration-300">
<div class="max-w-[1280px] mx-auto bg-surface-dark border-t border-x border-primary/30 rounded-t-2xl shadow-[0_-5px_20px_rgba(0,0,0,0.5)] flex items-center justify-between px-4 md:px-8 py-3">
<div class="flex items-center gap-4">
<div class="flex flex-col items-center justify-center size-10 md:size-12 bg-primary rounded-full border-2 border-white shadow-[0_0_10px_rgba(127,19,236,0.6)]">
<span class="text-xs text-white/80 font-medium">Rank</span>
<span class="text-lg font-black text-white leading-none">42</span>
</div>
<div class="flex items-center gap-3">
<img alt="Current user avatar" class="size-10 rounded-full border border-slate-500 hidden sm:block" data-alt="Current user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKAbZD5QPpihWYexDmcQEvXImwcBwue33PnFY42_NFFlR74ekTZIFDlgpt-jbsvIdg_W_mBnfAcDTGpIcBy_YkoVhP6tGH7Y_TTpVDiYXOvmeqqtwTkNAOBemsHaH0HMVNLud-zPYxOBJv1cPEHgdnz20DAWCPx1SXTCncCc10T9ORjTTnm5D1RsXqFmm0_lP_6LZrWD4-nxT3YKjNR80N9ofZUZzCSWkmQdvJ2UKX5bZ4O-4P4xYcSaW1-ODtybazyIn2DtSQ"/>
<div class="flex flex-col">
<span class="text-white font-bold text-sm md:text-base">You (PlayerOne)</span>
<span class="text-xs text-slate-400">4,520 pts</span>
</div>
</div>
</div>
<div class="flex items-center gap-6 md:gap-12">
<div class="hidden md:flex flex-col items-end">
<span class="text-slate-400 text-xs uppercase tracking-wider font-bold">Next Rank</span>
<span class="text-white font-bold text-sm">+380 pts</span>
</div>
<button class="flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white text-sm font-bold px-4 py-2 rounded-full transition-colors border border-white/10">
<span>View Stats</span>
<span class="material-symbols-outlined text-lg">arrow_forward</span>
</button>
</div>
</div>
</div>
</body></html>