<!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 Arena - Leaderboard</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk: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": "#f4d125",
"primary-dark": "#d4b215",
"background-light": "#f8f8f5",
"background-dark": "#1a180e", /* Slightly darker than provided for better contrast */
"surface-dark": "#2a2618",
"accent-purple": "#a855f7",
"accent-blue": "#3b82f6",
"accent-orange": "#f97316",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
boxShadow: {
"glow": "0 0 20px -5px var(--tw-shadow-color)",
"inner-glow": "inset 0 0 20px -5px var(--tw-shadow-color)",
}
},
},
}
</script>
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #2a2618;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #494222;
border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #f4d125;
}
</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 selection:bg-primary selection:text-black">
<!-- Navbar -->
<header class="sticky top-0 z-50 border-b border-[#494222] bg-background-dark/80 backdrop-blur-md px-6 py-4">
<div class="layout-container mx-auto flex max-w-7xl items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex size-10 items-center justify-center rounded-xl bg-primary text-background-dark shadow-glow shadow-primary/50">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h2 class="text-2xl font-bold leading-tight tracking-tight text-white">QuizQuest Arena</h2>
</div>
<nav class="hidden md:flex flex-1 justify-center gap-8">
<a class="relative text-sm font-bold text-primary transition hover:text-white" href="#">
Tournaments
<span class="absolute -bottom-1 left-0 h-0.5 w-full bg-primary opacity-0 transition-opacity hover:opacity-100"></span>
</a>
<a class="text-sm font-bold text-slate-400 transition hover:text-white" href="#">Quizzes</a>
<a class="text-sm font-bold text-slate-400 transition hover:text-white" href="#">Shop</a>
<a class="text-sm font-bold text-slate-400 transition hover:text-white" href="#">Community</a>
</nav>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-2 rounded-full bg-surface-dark py-1 pl-1 pr-3 border border-[#494222]">
<div class="h-8 w-8 rounded-full bg-cover bg-center" data-alt="User profile picture" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCEJ59VLCqtyHfOOgWOfQ1kcFmC6fzmhHh_eRb9-2wHVoFyNXctgdim5UvNIm7qBU1af7wJIXacR4k_x5NwcOvb12d9qoJwhcgbToUKXOEH60l0EyVO5KHa8EJwESJFvSPBYHl4bUR1MhKASHVRp43kFz003IalIGv69CLj7levkS8nOEdbTdqJf98B2FYrkbnjyw2Gx2kur_qhUO1gG9UH5P4yS54937FP9ZsMg2ndyoue9zVYDWPa-KVP1Om802ZBWHtPVYfh')"></div>
<span class="text-sm font-medium text-slate-300">PlayerOne</span>
</div>
<button class="flex h-10 items-center justify-center gap-2 rounded-full bg-primary px-6 text-sm font-bold text-background-dark transition hover:bg-white hover:shadow-glow hover:shadow-white/40">
<span class="material-symbols-outlined text-[20px]">bolt</span>
<span>Join Battle</span>
</button>
</div>
</div>
</header>
<main class="flex-1 flex flex-col items-center py-8 px-4 md:px-8 bg-[url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-fixed bg-center bg-no-repeat relative">
<!-- Overlay to darken background image -->
<div class="absolute inset-0 bg-background-dark/90 pointer-events-none"></div>
<div class="relative z-10 w-full max-w-6xl flex flex-col gap-10">
<!-- Header Section -->
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-col gap-2 text-center md:text-left">
<div class="flex items-center gap-2 justify-center md:justify-start">
<span class="material-symbols-outlined text-primary text-4xl animate-pulse">local_fire_department</span>
<h1 class="text-4xl md:text-5xl font-black uppercase tracking-tighter text-white drop-shadow-lg">Weekly Legends</h1>
</div>
<p class="text-slate-400 text-lg font-medium max-w-lg">Compete for glory, rare skins, and epic XP boosts!</p>
</div>
<!-- Filters -->
<div class="flex p-1.5 bg-surface-dark/80 backdrop-blur border border-[#494222] rounded-full">
<label class="cursor-pointer">
<input checked="" class="peer sr-only" name="filter" type="radio"/>
<span class="block px-6 py-2.5 rounded-full text-sm font-bold text-slate-400 peer-checked:bg-primary peer-checked:text-background-dark peer-checked:shadow-lg transition-all">Weekly</span>
</label>
<label class="cursor-pointer">
<input class="peer sr-only" name="filter" type="radio"/>
<span class="block px-6 py-2.5 rounded-full text-sm font-bold text-slate-400 peer-checked:bg-primary peer-checked:text-background-dark peer-checked:shadow-lg transition-all">All-Time</span>
</label>
<label class="cursor-pointer">
<input class="peer sr-only" name="filter" type="radio"/>
<span class="block px-6 py-2.5 rounded-full text-sm font-bold text-slate-400 peer-checked:bg-primary peer-checked:text-background-dark peer-checked:shadow-lg transition-all">Friends</span>
</label>
</div>
</div>
<!-- Podium Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-end justify-center min-h-[420px] pt-10">
<!-- Rank 2 -->
<div class="order-2 md:order-1 flex flex-col items-center group perspective-1000">
<div class="relative mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-gray-400 to-white opacity-75 blur"></div>
<div class="relative h-28 w-28 md:h-32 md:w-32 rounded-full border-4 border-slate-300 bg-surface-dark p-1">
<div class="h-full w-full rounded-full bg-cover bg-center" data-alt="Avatar of Rank 2 player" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCpvIMMn5dXtcw4QsJH1uPabJcq5aLVBy_s2hdDFjPAPET3OfIYWHR-qrYl2CphYdp6CIfCjQ4TnREWnLpUS0wiS_vhy6UZk2XZYoRLkdmvABvTCXBNlNIfK9fD9eSy0p-k6lQ4NsPV83yyue4XcIyRo9cQpMxHZjTrbuoBkWP7ZnBGAx8fum35jG-PsgbMdBo_CCjkk80iblqb2V-NsFJImQ1qaEsHGr2wKG7XCxSzlRVPLBnulEL9Ema3faeuuncVr3VSQlAf')"></div>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-slate-300 text-background-dark font-black text-lg border-2 border-background-dark z-20 shadow-lg">
2
</div>
</div>
<div class="flex flex-col items-center text-center">
<h3 class="text-xl font-bold text-white mb-1">QuizWizard</h3>
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-0.5 rounded-md bg-slate-700/50 border border-slate-600 text-[10px] font-bold text-slate-300 uppercase tracking-wider">Lvl 48</span>
</div>
<div class="text-slate-300 font-bold text-2xl tabular-nums">22,100 XP</div>
</div>
</div>
<!-- Rank 1 (Winner) -->
<div class="order-1 md:order-2 flex flex-col items-center -mt-12 md:-mt-20 group relative">
<!-- Glow effect behind winner -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-64 bg-primary/20 rounded-full blur-[80px] pointer-events-none"></div>
<div class="relative mb-6 transition-transform duration-300 group-hover:scale-105">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 text-primary animate-bounce">
<span class="material-symbols-outlined text-5xl drop-shadow-[0_0_10px_rgba(244,209,37,0.8)]">emoji_events</span>
</div>
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-yellow-600 via-primary to-yellow-200 opacity-100 blur-md animate-pulse"></div>
<div class="relative h-36 w-36 md:h-44 md:w-44 rounded-full border-[6px] border-primary bg-surface-dark p-1 shadow-[0_0_30px_rgba(244,209,37,0.4)]">
<div class="h-full w-full rounded-full bg-cover bg-center" data-alt="Avatar of Rank 1 player" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCoYkDHzgn3ZdeuzfvMcFUWkPoZx9Z6PRTuTqi3V6Cc6VHxz_CpdFuPlAcww0YS56Mdc5vkgGQ94Nt-4BKr1ao5eH4jV6D9dInNVgoxlI9pjgjHaOTIkZxAiyYA2iriKI5-LJX_FrSL6QuhTt8KZAN9QZ6qEYTM-oOkWYl_mgTYVsWqkUrJZx721KuB2sAmlm7uLtPkn0R7FAc2FJOq3e7RCGDIlh4qc343xGi5HDONarJ__WCH8Pz95Fo6zHnA_8oEz4gmpx2u')"></div>
</div>
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-background-dark font-black text-2xl border-4 border-background-dark z-20 shadow-[0_0_15px_rgba(244,209,37,0.6)]">
1
</div>
</div>
<div class="flex flex-col items-center text-center z-10">
<h3 class="text-3xl font-black text-white mb-1 tracking-tight">BlazeMaster</h3>
<div class="flex items-center gap-2 mb-3">
<span class="px-3 py-1 rounded-full bg-primary/20 border border-primary/50 text-xs font-bold text-primary uppercase tracking-wider shadow-[0_0_10px_rgba(244,209,37,0.2)]">Lvl 50</span>
<div class="flex items-center gap-1 text-orange-500 font-bold text-xs" title="12 Win Streak">
<span class="material-symbols-outlined text-sm">local_fire_department</span>
<span>12 Streak</span>
</div>
</div>
<div class="text-primary font-black text-4xl tabular-nums drop-shadow-lg">24,500 XP</div>
</div>
</div>
<!-- Rank 3 -->
<div class="order-3 flex flex-col items-center group">
<div class="relative mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-orange-700 to-orange-300 opacity-60 blur"></div>
<div class="relative h-28 w-28 md:h-32 md:w-32 rounded-full border-4 border-orange-700 bg-surface-dark p-1">
<div class="h-full w-full rounded-full bg-cover bg-center" data-alt="Avatar of Rank 3 player" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAb-FrUNEEwD---kAznkhT56MKz5Zj-FC4IQNIHTAipWprB3-cxTzixVSyH5rf08H-Xw89WwYSWk51rHA31VrYU85J_0S_Us2IxfDXvtUUgGlNAW9mOPaDdamwnuNzZtdjKCy3wXF1CSTdZXUKYaXo58zpt9Tk7CuahcFQtGZeCZLpBiKj2wttprhxQsGf64S7SfN-_h2Wa31REoKfsbnDVZ4-XIBqrksLwNN8eT8uwW1MR284gq_sSEosxOV-DegQ42dNSx1sT')"></div>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-orange-700 text-white font-black text-lg border-2 border-background-dark z-20 shadow-lg">
3
</div>
</div>
<div class="flex flex-col items-center text-center">
<h3 class="text-xl font-bold text-white mb-1">NeonRider</h3>
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-0.5 rounded-md bg-slate-700/50 border border-slate-600 text-[10px] font-bold text-slate-300 uppercase tracking-wider">Lvl 42</span>
</div>
<div class="text-orange-200 font-bold text-2xl tabular-nums">19,850 XP</div>
</div>
</div>
</div>
<!-- List Section -->
<div class="w-full bg-surface-dark/60 backdrop-blur-xl border border-[#494222] rounded-3xl p-6 shadow-2xl relative overflow-hidden">
<!-- Decorative background elements -->
<div class="absolute top-0 right-0 w-64 h-64 bg-accent-purple/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-64 h-64 bg-accent-blue/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="flex flex-col gap-3">
<!-- Table Header -->
<div class="hidden md:grid grid-cols-12 gap-4 px-6 py-2 text-xs font-bold text-slate-500 uppercase tracking-widest">
<div class="col-span-1">Rank</div>
<div class="col-span-5">Player</div>
<div class="col-span-3 text-center">Stats</div>
<div class="col-span-3 text-right">Score</div>
</div>
<!-- Row 4 -->
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-background-dark/80 hover:bg-[#322e1e] p-4 rounded-2xl border border-transparent hover:border-primary/30 transition-all duration-200 cursor-pointer">
<div class="w-full md:w-auto md:col-span-1 flex items-center justify-between md:justify-start">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Rank</span>
<span class="text-lg font-bold text-slate-400">4</span>
</div>
<div class="w-full md:w-auto md:col-span-5 flex items-center gap-4">
<div class="h-12 w-12 rounded-full border-2 border-accent-purple bg-cover bg-center shrink-0" data-alt="Avatar player 4" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBbwzVMHccTuDOCBLwyNUSfEesgS9Y8grOs1VaoMWIxefgEWH-PW5ZCOrb4Oe4rPL7eRE4TWUVFpeDkC6Nz6FF_W958EmEt1g5Qkrxt1oiJMfkZL78cw4nnZY9DDlUYy8HmtdcFkIDH0fj4J35jgR4Br6K4EtRgXNvXw2Ew3pkiEBLLg-jgzYnr1M7JmS7Gsv-Q_vVvBAOrJIdM03W4SayoCAW7dNQ50lfEW_tAsl0jW4M4XPqlYhGtQw8fPhg7v3oUvWTJdkmi')"></div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg group-hover:text-primary transition-colors">PixelQueen</span>
<span class="md:hidden text-xs text-slate-500">Lvl 38 • 8 Win Streak</span>
</div>
</div>
<div class="hidden md:flex md:col-span-3 items-center justify-center gap-3">
<span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">Lvl 38</span>
<div class="flex items-center gap-1 text-orange-500 text-xs font-bold">
<span class="material-symbols-outlined text-sm">local_fire_department</span> 8
</div>
</div>
<div class="w-full md:w-auto md:col-span-3 flex items-center justify-between md:justify-end">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Score</span>
<span class="text-xl font-bold text-white tabular-nums">18,200 XP</span>
</div>
</div>
<!-- Row 5 -->
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-background-dark/80 hover:bg-[#322e1e] p-4 rounded-2xl border border-transparent hover:border-primary/30 transition-all duration-200 cursor-pointer">
<div class="w-full md:w-auto md:col-span-1 flex items-center justify-between md:justify-start">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Rank</span>
<span class="text-lg font-bold text-slate-400">5</span>
</div>
<div class="w-full md:w-auto md:col-span-5 flex items-center gap-4">
<div class="h-12 w-12 rounded-full border-2 border-accent-blue bg-cover bg-center shrink-0" data-alt="Avatar player 5" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAcAcnUsrfnHmifTvt6zl3TijuTzDqkYHSJ4AWx7HGa64tioq7Q__W67jKUtCawEMu-b8cUDFurtUjztW2JU4xlEDtbEgac55t9uxKWC_NJuCCgu2w7eDFesp2bme8jge6fRXLMadkRhN9rA7dVV3irt0BrTBepyxQa2dC0rQ11czVTSaPm-dVelw2xG5gURTcKFPV8iua5VvrLoSC9QMDpLm3dydhUDdLafGWJ0EZHHcSSKHuNUi9r0Zt63SwrAbeUdDaBh98m')"></div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg group-hover:text-primary transition-colors">FrostByte</span>
<span class="md:hidden text-xs text-slate-500">Lvl 36 • 4 Win Streak</span>
</div>
</div>
<div class="hidden md:flex md:col-span-3 items-center justify-center gap-3">
<span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">Lvl 36</span>
<div class="flex items-center gap-1 text-slate-500 text-xs font-bold">
<span class="material-symbols-outlined text-sm">bolt</span> 4
</div>
</div>
<div class="w-full md:w-auto md:col-span-3 flex items-center justify-between md:justify-end">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Score</span>
<span class="text-xl font-bold text-white tabular-nums">17,450 XP</span>
</div>
</div>
<!-- Row 6 -->
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-background-dark/80 hover:bg-[#322e1e] p-4 rounded-2xl border border-transparent hover:border-primary/30 transition-all duration-200 cursor-pointer">
<div class="w-full md:w-auto md:col-span-1 flex items-center justify-between md:justify-start">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Rank</span>
<span class="text-lg font-bold text-slate-400">6</span>
</div>
<div class="w-full md:w-auto md:col-span-5 flex items-center gap-4">
<div class="h-12 w-12 rounded-full border-2 border-slate-600 bg-cover bg-center shrink-0" data-alt="Avatar player 6" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD47QEDgju5lls4Y3ul556rJR9WvGOija8nAlrKiZVempH_fMAHJxu9fB0ZcjRUyTl2vRo-FnbFbSvqWLtzkKcveo9vskWC34O78p-WngB0bTbZI9b95aVfKJdfMEUZtBP6egpnm_cYEoY2C885ZwfO4UNJtd5VjrlLlaAgIT03-EL0Cu_gEoLRBTOkjna2uNuRGfSvVsSQgCl6A_8mKo-nafvVP8uevqwOUQYy9hTW0c0kXZIsBTwiEy6elqvH_W1tPTMGAgqg')"></div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg group-hover:text-primary transition-colors">StormChaser</span>
<span class="md:hidden text-xs text-slate-500">Lvl 33 • 0 Win Streak</span>
</div>
</div>
<div class="hidden md:flex md:col-span-3 items-center justify-center gap-3">
<span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">Lvl 33</span>
<div class="flex items-center gap-1 text-slate-600 text-xs font-bold">
<span class="material-symbols-outlined text-sm">remove</span>
</div>
</div>
<div class="w-full md:w-auto md:col-span-3 flex items-center justify-between md:justify-end">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Score</span>
<span class="text-xl font-bold text-white tabular-nums">15,900 XP</span>
</div>
</div>
<!-- Row 7 -->
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-background-dark/80 hover:bg-[#322e1e] p-4 rounded-2xl border border-transparent hover:border-primary/30 transition-all duration-200 cursor-pointer">
<div class="w-full md:w-auto md:col-span-1 flex items-center justify-between md:justify-start">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Rank</span>
<span class="text-lg font-bold text-slate-400">7</span>
</div>
<div class="w-full md:w-auto md:col-span-5 flex items-center gap-4">
<div class="h-12 w-12 rounded-full border-2 border-slate-600 bg-cover bg-center shrink-0" data-alt="Avatar player 7" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDWSpEKMBhjPWTwBrdxvKcYtvmqkroetTRAx3MxqJxka1n8mf5lS2OWuzpm3uf-Hcb75_GxDdEOGbLdT1FNJJ6YSljcVpxBWr5SXrr333gUAvohdf3OyllZvlcdL120VCnLQGj5mKXqXyjB7y4aLb3gFGyX3M_uUgpTBUdRnuWqT_RdjvKhSYrIyYfZNl_Y7c7fe62m_xR1LXED-bMi_mowiaZ5W4-OODQ5moGVdkJBOVIImoIx1rIftwNfiXQB3IRLelxa4tqW')"></div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg group-hover:text-primary transition-colors">CyberSamurai</span>
<span class="md:hidden text-xs text-slate-500">Lvl 31 • 2 Win Streak</span>
</div>
</div>
<div class="hidden md:flex md:col-span-3 items-center justify-center gap-3">
<span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">Lvl 31</span>
<div class="flex items-center gap-1 text-slate-500 text-xs font-bold">
<span class="material-symbols-outlined text-sm">bolt</span> 2
</div>
</div>
<div class="w-full md:w-auto md:col-span-3 flex items-center justify-between md:justify-end">
<span class="md:hidden text-xs font-bold text-slate-500 uppercase">Score</span>
<span class="text-xl font-bold text-white tabular-nums">14,350 XP</span>
</div>
</div>
<!-- User's Rank (Sticky Bottom or Highlighted) -->
<div class="mt-2 border-t border-[#494222] pt-4">
<div class="group relative flex flex-col md:grid md:grid-cols-12 gap-4 items-center bg-primary/10 border border-primary/40 shadow-[0_0_15px_rgba(244,209,37,0.1)] p-4 rounded-2xl transition-all duration-200 cursor-pointer">
<div class="w-full md:w-auto md:col-span-1 flex items-center justify-between md:justify-start">
<span class="md:hidden text-xs font-bold text-primary uppercase">Rank</span>
<span class="text-lg font-bold text-primary">243</span>
</div>
<div class="w-full md:w-auto md:col-span-5 flex items-center gap-4">
<div class="h-12 w-12 rounded-full border-2 border-primary bg-cover bg-center shrink-0" data-alt="My Avatar" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB08cCbSpUw-KLi5aBFwOfAPotsee7h2OqhWelFLqaNbtaGZNe392DdCzPkiPtnJsktv_1nA1DUCTTib45nwb0A2rtHITrGSbwaRrNqpWj8KB_Lb4LXU4kIitTvFFY4wYV_C5LEYD_iJMS-Tpn5psBmZdN2k0vru210Eiamg-DstytE-BThTG-EPtJwUlIczsKuqi39uCH4z5rVq3P_x7tHbviMJ4n5QpfDMe-DOodH76CHyJGzKvOV-5eozE5DVJT1MTspmjc4')"></div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg">You (PlayerOne)</span>
<span class="md:hidden text-xs text-slate-400">Lvl 12 • 1 Win Streak</span>
</div>
</div>
<div class="hidden md:flex md:col-span-3 items-center justify-center gap-3">
<span class="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs font-bold">Lvl 12</span>
<div class="flex items-center gap-1 text-slate-500 text-xs font-bold">
<span class="material-symbols-outlined text-sm">bolt</span> 1
</div>
</div>
<div class="w-full md:w-auto md:col-span-3 flex items-center justify-between md:justify-end">
<span class="md:hidden text-xs font-bold text-primary uppercase">Score</span>
<span class="text-xl font-bold text-white tabular-nums">4,200 XP</span>
</div>
</div>
</div>
</div>
<!-- Fade out effect at bottom of list if we had more items -->
<!-- <div class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-surface-dark to-transparent pointer-events-none"></div> -->
<div class="mt-6 flex justify-center">
<button class="text-sm font-bold text-slate-500 hover:text-white transition-colors flex items-center gap-1">
<span>View Top 100</span>
<span class="material-symbols-outlined text-lg">expand_more</span>
</button>
</div>
</div>
</div>
</main>
<!-- Footer CTA for Gamification -->
<div class="bg-primary py-4 px-6 sticky bottom-0 z-50 shadow-[0_-5px_20px_rgba(0,0,0,0.3)]">
<div class="layout-container mx-auto max-w-7xl flex items-center justify-between gap-4">
<div class="hidden md:flex items-center gap-3 text-background-dark">
<span class="material-symbols-outlined text-3xl">timer</span>
<div>
<p class="font-bold text-sm uppercase tracking-wide">Weekly Reset In</p>
<p class="font-black text-xl leading-none">2 Days 14h 32m</p>
</div>
</div>
<div class="flex flex-1 md:flex-none justify-center md:justify-end gap-4 w-full md:w-auto">
<div class="md:hidden flex flex-col justify-center items-start text-background-dark mr-auto">
<p class="font-bold text-xs uppercase opacity-80">Reset In</p>
<p class="font-black text-sm">2d 14h</p>
</div>
<button class="flex items-center justify-center gap-2 rounded-full bg-background-dark px-8 py-3 text-sm font-bold text-white hover:bg-white hover:text-background-dark transition-all shadow-lg hover:shadow-xl w-full md:w-auto">
<span class="material-symbols-outlined">play_circle</span>
<span>Play to Rank Up</span>
</button>
</div>
</div>
</div>
</body></html>