This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repopack on: 2024-12-28T11:29:37.323Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repopack's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repopack, visit: https://github.com/yamadashy/repopack

================================================================
Repository Structure
================================================================
.gitignore
.npmrc
.prettierignore
.prettierrc
components.json
eslint.config.js
jsconfig.json
messages/al.json
messages/en.json
package.json
postcss.config.js
prisma/schema.prisma
project.inlang/.gitignore
project.inlang/settings.json
README.md
src/app.css
src/app.html
src/hooks.js
src/hooks.server.js
src/lib/components/admin-navbar.svelte
src/lib/components/brand-modal.svelte
src/lib/components/FeedbackModal.svelte
src/lib/components/game-card.svelte
src/lib/components/GameFeedbackModal.svelte
src/lib/components/games/ScoreIndicator.svelte
src/lib/components/games/VictoryModal.svelte
src/lib/components/navbar.svelte
src/lib/components/screensaver.svelte
src/lib/components/ui/accordion/accordion-content.svelte
src/lib/components/ui/accordion/accordion-item.svelte
src/lib/components/ui/accordion/accordion-trigger.svelte
src/lib/components/ui/accordion/index.js
src/lib/components/ui/badge/badge.svelte
src/lib/components/ui/badge/index.js
src/lib/components/ui/button/button.svelte
src/lib/components/ui/button/index.js
src/lib/components/ui/calendar/calendar-cell.svelte
src/lib/components/ui/calendar/calendar-day.svelte
src/lib/components/ui/calendar/calendar-grid-body.svelte
src/lib/components/ui/calendar/calendar-grid-head.svelte
src/lib/components/ui/calendar/calendar-grid-row.svelte
src/lib/components/ui/calendar/calendar-grid.svelte
src/lib/components/ui/calendar/calendar-head-cell.svelte
src/lib/components/ui/calendar/calendar-header.svelte
src/lib/components/ui/calendar/calendar-heading.svelte
src/lib/components/ui/calendar/calendar-months.svelte
src/lib/components/ui/calendar/calendar-next-button.svelte
src/lib/components/ui/calendar/calendar-prev-button.svelte
src/lib/components/ui/calendar/calendar.svelte
src/lib/components/ui/calendar/index.js
src/lib/components/ui/card/card-content.svelte
src/lib/components/ui/card/card-description.svelte
src/lib/components/ui/card/card-footer.svelte
src/lib/components/ui/card/card-header.svelte
src/lib/components/ui/card/card-title.svelte
src/lib/components/ui/card/card.svelte
src/lib/components/ui/card/index.js
src/lib/components/ui/checkbox/checkbox.svelte
src/lib/components/ui/checkbox/index.js
src/lib/components/ui/date-range-picker/index.svelte
src/lib/components/ui/dialog/dialog-content.svelte
src/lib/components/ui/dialog/dialog-description.svelte
src/lib/components/ui/dialog/dialog-footer.svelte
src/lib/components/ui/dialog/dialog-header.svelte
src/lib/components/ui/dialog/dialog-overlay.svelte
src/lib/components/ui/dialog/dialog-portal.svelte
src/lib/components/ui/dialog/dialog-title.svelte
src/lib/components/ui/dialog/index.js
src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
src/lib/components/ui/dropdown-menu/index.js
src/lib/components/ui/input/index.js
src/lib/components/ui/input/input.svelte
src/lib/components/ui/label/index.js
src/lib/components/ui/label/label.svelte
src/lib/components/ui/popover/index.js
src/lib/components/ui/popover/popover-content.svelte
src/lib/components/ui/select/index.js
src/lib/components/ui/select/select-content.svelte
src/lib/components/ui/select/select-item.svelte
src/lib/components/ui/select/select-label.svelte
src/lib/components/ui/select/select-separator.svelte
src/lib/components/ui/select/select-trigger.svelte
src/lib/components/ui/separator/index.js
src/lib/components/ui/separator/separator.svelte
src/lib/components/ui/table/index.js
src/lib/components/ui/table/table-body.svelte
src/lib/components/ui/table/table-caption.svelte
src/lib/components/ui/table/table-cell.svelte
src/lib/components/ui/table/table-footer.svelte
src/lib/components/ui/table/table-head.svelte
src/lib/components/ui/table/table-header.svelte
src/lib/components/ui/table/table-row.svelte
src/lib/components/ui/table/table.svelte
src/lib/components/ui/textarea/index.js
src/lib/components/ui/textarea/textarea.svelte
src/lib/components/ui/toggle/index.js
src/lib/components/ui/toggle/toggle.svelte
src/lib/components/ui/tooltip/index.js
src/lib/components/ui/tooltip/tooltip-content.svelte
src/lib/i18n.js
src/lib/stores/feedbackStore.js
src/lib/stores/formEditorStore.js
src/lib/stores/gameStore.js
src/lib/stores/score.js
src/lib/stores/screensaver.js
src/lib/stores/sessionStore.js
src/lib/stores/theme.js
src/lib/utils.js
src/routes/+layout.svelte
src/routes/+page.svelte
src/routes/admin/+layout.svelte
src/routes/admin/+page.svelte
src/routes/admin/feedback/+page.svelte
src/routes/admin/form-editor/+page.svelte
src/routes/admin/login/+page.svelte
src/routes/admin/users/+page.svelte
src/routes/games/+layout.svelte
src/routes/games/pairs/+page.svelte
src/routes/games/puzzle/+page.svelte
src/routes/games/race/+page.svelte
src/routes/games/trivia/+page.svelte
src/routes/leaderboard/+page.svelte
src/routes/login/+page.svelte
svelte.config.js
tailwind.config.js
vite.config.js

================================================================
Repository Files
================================================================

================
File: .gitignore
================
node_modules

# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build

# OS
.DS_Store
Thumbs.db

# Env
.env
.env.*
!.env.example
!.env.test

# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

# Paraglide
src/lib/paraglide


# windsurf rules
.windsurfrules

================
File: .npmrc
================
engine-strict=true

================
File: .prettierignore
================
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock

================
File: .prettierrc
================
{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
	"overrides": [
		{
			"files": "*.svelte",
			"options": {
				"parser": "svelte"
			}
		}
	]
}

================
File: components.json
================
{
	"$schema": "https://shadcn-svelte.com/schema.json",
	"style": "new-york",
	"tailwind": {
		"config": "tailwind.config.js",
		"css": "src\\app.css",
		"baseColor": "slate"
	},
	"aliases": {
		"components": "$lib/components",
		"utils": "$lib/utils"
	},
	"typescript": false
}

================
File: eslint.config.js
================
import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

/** @type {import('eslint').Linter.Config[]} */
export default [
	includeIgnoreFile(gitignorePath),
	js.configs.recommended,
	...svelte.configs['flat/recommended'],
	prettier,
	...svelte.configs['flat/prettier'],
	{
		languageOptions: {
			globals: {
				...globals.browser,
				...globals.node
			}
		}
	}
];

================
File: jsconfig.json
================
{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": false,
		"moduleResolution": "bundler"
	}
	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

================
File: messages/al.json
================
{
	"$schema": "https://inlang.com/schema/inlang-message-format",
	"hello_world": "Hello, {name} from al!"
}

================
File: messages/en.json
================
{
	"$schema": "https://inlang.com/schema/inlang-message-format",
	"hello_world": "Hello, {name} from en!"
}

================
File: package.json
================
{
	"name": "poalai",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint ."
	},
	"devDependencies": {
		"@eslint/compat": "^1.2.3",
		"@internationalized/date": "^3.6.0",
		"@prisma/client": "^6.1.0",
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.9.0",
		"@sveltejs/vite-plugin-svelte": "^5.0.0",
		"autoprefixer": "^10.4.20",
		"bits-ui": "^0.21.16",
		"clsx": "^2.1.1",
		"eslint": "^9.7.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0",
		"globals": "^15.0.0",
		"prettier": "^3.3.2",
		"prettier-plugin-svelte": "^3.2.6",
		"prettier-plugin-tailwindcss": "^0.6.5",
		"prisma": "^6.1.0",
		"svelte": "^5.0.0",
		"tailwind-merge": "^2.5.5",
		"tailwind-variants": "^0.3.0",
		"tailwindcss": "^3.4.9",
		"vite": "^6.0.0"
	},
	"dependencies": {
		"@fortawesome/free-regular-svg-icons": "^6.7.2",
		"@fortawesome/free-solid-svg-icons": "^6.7.1",
		"@inlang/paraglide-sveltekit": "^0.11.1",
		"@radix-ui/colors": "^3.0.0",
		"@tailwindcss/container-queries": "^0.1.1",
		"@tailwindcss/forms": "^0.5.9",
		"@tailwindcss/typography": "^0.5.15",
		"bcrypt": "^5.1.1",
		"better-sqlite3": "^11.7.0",
		"canvas-confetti": "^1.9.3",
		"date-fns": "^4.1.0",
		"lucide-svelte": "^0.469.0",
		"sqlite": "^5.1.1",
		"sqlite3": "^5.1.7",
		"svelte-dnd-action": "^0.9.53",
		"svelte-fa": "^4.0.3",
		"svelte-radix": "^2.0.1",
		"xlsx": "^0.18.5",
		"zod": "^3.24.1"
	}
}

================
File: postcss.config.js
================
export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};

================
File: prisma/schema.prisma
================
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("./dev.sqlite")
}

================
File: project.inlang/.gitignore
================
cache

================
File: project.inlang/settings.json
================
{
	"$schema": "https://inlang.com/schema/project-settings",
	"modules": [
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@2/dist/index.js",
		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@0/dist/index.js"
	],
	"plugin.inlang.messageFormat": {
		"pathPattern": "./messages/{languageTag}.json"
	},
	"sourceLanguageTag": "en",
	"languageTags": ["en", "al"]
}

================
File: README.md
================
# sv

Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

================
File: src/app.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 40 33% 98%;
    --foreground: 20 14.3% 4.1%;

    --card: 40 30% 96%;
    --card-foreground: 20 14.3% 4.1%;

    --popover: 40 33% 98%;
    --popover-foreground: 20 14.3% 4.1%;

    --primary: 24 9.8% 10%;
    --primary-foreground: 40 33% 98%;

    --secondary: 40 30% 96%;
    --secondary-foreground: 24 9.8% 10%;

    --muted: 40 30% 96%;
    --muted-foreground: 25 5.3% 44.7%;

    --accent: 40 30% 96%;
    --accent-foreground: 24 9.8% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 40 33% 98%;

    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 5%; /* Slightly lighter black */
    --foreground: 210 40% 98%;

    --card: 0 0% 15%; /* Slightly lighter black */
    --card-foreground: 210 40% 98%;

    --popover: 0 0% 15%; /* Slightly lighter black */
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground transition-colors duration-300;
    overflow:hidden
  }
  
  .light body {
    @apply bg-[#FAF8F3];
  }

  .dark body {
    @apply bg-[#131313];
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Better mobile tap targets */
  @media (max-width: 640px) {
    button, a {
      @apply min-h-[44px] min-w-[44px];
    }
  }
}

/* Custom styles */
.game-card {
  @apply relative overflow-hidden rounded-lg transition-all duration-300;
  aspect-ratio: 3/4;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
}

.game-card:hover {
  transform: scale(1.02);
}

.game-card::before {
  content: '';
  @apply absolute inset-0 bg-black/40 transition-opacity duration-300;
}

.game-card:hover::before {
  @apply opacity-20;
}

.game-card img {
  @apply absolute inset-0 w-full h-full object-cover transition-transform duration-300;
}

.game-card:hover img {
  transform: scale(1.1);
}

.game-card-content {
  @apply absolute inset-x-0 bottom-0 p-4 text-white text-center;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Custom animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Card hover effects */
.card-hover {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Game grid responsive layout */
.game-grid {
  @apply grid gap-6;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Responsive table */
.responsive-table {
  @apply w-full overflow-x-auto;
}

/* Custom scrollbar */
@media (min-width: 640px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-primary/50 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-primary;
  }
}

================
File: src/app.html
================
<!doctype html>
<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

================
File: src/hooks.js
================
import { i18n } from '$lib/i18n';
export const reroute = i18n.reroute();

================
File: src/hooks.server.js
================
import { i18n } from '$lib/i18n';
const handleParaglide = i18n.handle();
export const handle = handleParaglide;

================
File: src/lib/components/admin-navbar.svelte
================
<script>
    import { page } from "$app/stores";
    import { Button } from "$lib/components/ui/button";
    import { goto } from "$app/navigation";
    import Fa from 'svelte-fa';
    import { faSignOutAlt, faToolbox } from '@fortawesome/free-solid-svg-icons';

    // Navigation items
    const navItems = [
        {
            title: "Editor Pyetesori",
            href: "/admin/form-editor",
            icon: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />`
        },
        {
            title: "Tabela e Feedback-ut",
            href: "/admin/feedback",
            icon: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />`
        },
        {
            title: "Menaxhim Admin",
            href: "/admin/users",
            icon: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />`
        }
    ];

    // Handle logout
    function handleLogout() {
        // TODO: Implement actual logout later
        goto("/admin/login");
    }

    // Check if current page is login to hide navbar
    $: isLoginPage = $page.url.pathname === "/admin/login";
</script>

{#if !isLoginPage}
    <header class="border-b border-white/20 bg-[#1a1a1a] backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full">
        <div class="container mx-auto px-4">
            <div class="flex h-12 items-center justify-between">
                <!-- Logo -->
                 <a href="/admin">
                <div class="flex items-center space-x-2">
                    <Fa icon={faToolbox} class="text-2xl" />
                    <span class="text-xl font-bold">Panel Administratori</span>
                </div>
                </a>

                <!-- Navigation -->
                <nav class="flex items-center space-x-1">
                    {#each navItems as item}
                        <Button 
                            variant="ghost"
                            class="flex items-center h-12 px-4 gap-2 rounded-none relative hover:bg-[#ff6b00]/30 {$page.url.pathname === item.href ? 'bg-[#ff6b00]/20 text-[#ff6b00] hover:bg-[#ff6b00]/30' : ''}"
                            on:click={() => goto(item.href)}
                        >
                            <svg 
                                class="w-5 h-5" 
                                xmlns="http://www.w3.org/2000/svg" 
                                viewBox="0 0 24 24" 
                                fill="none" 
                                stroke="currentColor" 
                                stroke-width="2"
                            >
                                {@html item.icon}
                            </svg>
                            <span>{item.title}</span>
                            {#if $page.url.pathname === item.href}
                                <div class="absolute bottom-0 left-0 w-full h-1 bg-[#ff6b00]"></div>
                            {/if}
                        </Button>
                    {/each}
                </nav>

                <!-- Right section -->
                <div class="flex items-center space-x-4">
                    <Button variant="destructive" class="border-red-800 hover:bg-red-600 gap-2" on:click={handleLogout}>
                        <Fa icon={faSignOutAlt} />
                        Dil
                    </Button>
                </div>
            </div>
        </div>
    </header>
{/if}

================
File: src/lib/components/brand-modal.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { createEventDispatcher } from 'svelte';
    import { Fa } from 'svelte-fa';
    import { 
        faUpload,
        faTimes,
        faTrash
    } from '@fortawesome/free-solid-svg-icons';

    export let show = false;
    
    let dispatch = createEventDispatcher();
    let brandId = '';
    let brandName = '';
    let fileInput;
    let previewUrl = '';
    let isUploading = false;
    let error = '';

    async function handleFileChange(event) {
        const file = event.target.files[0];
        if (!file) return;

        // Preview
        previewUrl = URL.createObjectURL(file);

        try {
            isUploading = true;
            error = '';

            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch('/api/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (!response.ok) throw new Error(result.error || 'Upload failed');

            // Use the returned URL
            previewUrl = result.url;

        } catch (err) {
            error = err.message;
            console.error('Upload error:', err);
        } finally {
            isUploading = false;
        }
    }

    function handleSubmit() {
        if (!brandId || !brandName || !previewUrl) {
            error = 'Please fill in all fields and upload an image';
            return;
        }

        dispatch('save', {
            id: brandId.toLowerCase(),
            name: brandName,
            image: previewUrl
        });

        // Reset form
        brandId = '';
        brandName = '';
        previewUrl = '';
        error = '';
        
        // Close modal
        show = false;
    }

    function close() {
        // Reset form
        brandId = '';
        brandName = '';
        previewUrl = '';
        error = '';
        
        // Close modal
        show = false;
        dispatch('close');
    }
</script>

{#if show}
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-[#1a1a1a] p-6 rounded-lg w-full max-w-lg mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Shto Markë të Re</h3>
                <button 
                    class="text-gray-400 hover:text-white"
                    on:click={close}
                >
                    <Fa icon={faTimes} />
                </button>
            </div>
            
            <div class="space-y-4">
                {#if error}
                    <div class="bg-red-500/10 border border-red-500/50 text-red-500 p-3 rounded-lg text-sm">
                        {error}
                    </div>
                {/if}

                <div>
                    <Label for="brandId">ID i Markës</Label>
                    <Input
                        id="brandId"
                        bind:value={brandId}
                        placeholder="p.sh. volkswagen"
                        class="bg-[#252525] border-gray-800 focus:border-[#ff6b00]"
                    />
                </div>

                <div>
                    <Label for="brandName">Emri i Markës</Label>
                    <Input
                        id="brandName"
                        bind:value={brandName}
                        placeholder="p.sh. Volkswagen"
                        class="bg-[#252525] border-gray-800 focus:border-[#ff6b00]"
                    />
                </div>

                <div>
                    <Label>Logo e Markës</Label>
                    <div 
                        class="mt-2 border-2 border-dashed border-gray-800 hover:border-[#ff6b00]/50 transition-colors rounded-lg p-4 text-center"
                        class:opacity-50={isUploading}
                    >
                        {#if previewUrl}
                            <div class="relative w-48 h-48 mx-auto">
                                <img 
                                    src={previewUrl} 
                                    alt="Preview" 
                                    class="w-full h-full object-contain"
                                />
                                <button
                                    class="absolute top-0 right-0 p-1 bg-red-500/20 hover:bg-red-500/30 rounded-full text-red-500"
                                    on:click={() => {
                                        previewUrl = '';
                                        if (fileInput) fileInput.value = '';
                                    }}
                                >
                                    <Fa icon={faTrash} />
                                </button>
                            </div>
                        {:else}
                            <label class="cursor-pointer block">
                                <input
                                    type="file"
                                    accept="image/*"
                                    class="hidden"
                                    bind:this={fileInput}
                                    on:change={handleFileChange}
                                />
                                <div class="flex flex-col items-center gap-2">
                                    <Fa icon={faUpload} size="2x" class="text-gray-500" />
                                    <span class="text-sm text-gray-500">
                                        {#if isUploading}
                                            Duke ngarkuar...
                                        {:else}
                                            Kliko për të ngarkuar logon
                                        {/if}
                                    </span>
                                </div>
                            </label>
                        {/if}
                    </div>
                </div>

                <div class="flex justify-end gap-2 pt-4">
                    <Button 
                        variant="outline" 
                        class="border-gray-800 hover:bg-[#252525]"
                        on:click={close}
                    >
                        Anulo
                    </Button>
                    <Button 
                        class="bg-[#ff6b00] hover:bg-[#ff6b00]/90"
                        on:click={handleSubmit}
                        disabled={isUploading}
                    >
                        Shto
                    </Button>
                </div>
            </div>
        </div>
    </div>
{/if}

================
File: src/lib/components/FeedbackModal.svelte
================
<script>
    import { fade, scale } from 'svelte/transition';
    import Fa from 'svelte-fa';
    import { faXmark, faCar, faWrench, faCheck, faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
    import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
    import { feedbackStore } from '$lib/stores/feedbackStore';
    import { Button } from "$lib/components/ui/button";
    import { Textarea } from "$lib/components/ui/textarea";

    export let show = false;
    export let onComplete = () => {};
    export let inGameMode = false;

    const brands = [
        { id: 'volkswagen', name: 'Volkswagen', image: '/images/logos/brands/vw.png' },
        { id: 'audi', name: 'Audi', image: '/images/logos/brands/audi.png' },
        { id: 'seat', name: 'Seat', image: '/images/logos/brands/seat.png' },
        { id: 'skoda', name: 'Skoda', image: '/images/logos/brands/skoda.png' }
    ];

    const questions = {
        sales: {
            ratings: [
                'Si e vlerësoni eksperiencën e blerjes?',
                'A ishte stafi i dobishëm?',
                'Sa i kënaqur jeni me çmimin?',
                'A do ta rekomandonit tek të tjerët?'
            ],
            comments: [
                { text: 'Çfarë ju pëlqeu më shumë në eksperiencën tuaj?', required: true },
                { text: 'Si mund ta përmirësojmë shërbimin tonë?', required: false },
                { text: 'Nëse dëshironi, na tregoni diçka tjetër:', required: false }
            ]
        },
        service: {
            ratings: [
                'Si e vlerësoni eksperiencën e servisit?',
                'A ishte stafi i dobishëm?',
                'Sa i kënaqur jeni me shërbimin?',
                'A do ta rekomandonit tek të tjerët?'
            ],
            comments: [
                { text: 'Çfarë ju pëlqeu më shumë në eksperiencën tuaj?', required: true },
                { text: 'Si mund ta përmirësojmë shërbimin tonë?', required: false },
                { text: 'Nëse dëshironi, na tregoni diçka tjetër:', required: false }
            ]
        }
    };

    let selectedDepartment = '';
    let selectedBrand = '';
    let ratings = {};
    let comments = {};
    let currentRatingQuestions = [];
    let currentCommentQuestions = [];
    let isSubmitting = false;

    $: if (selectedDepartment) {
        currentRatingQuestions = questions[selectedDepartment]?.ratings || [];
        currentCommentQuestions = questions[selectedDepartment]?.comments || [];
    }

    function handleDepartmentClick(dept) {
        selectedDepartment = dept;
    }

    function handleBrandClick(brand) {
        selectedBrand = brand;
    }

    function handleRatingClick(question, rating) {
        ratings[question] = rating;
    }

    function handleCommentChange(question, value) {
        comments[question] = value;
    }

    function isFormValid() {
        const hasAllRatings = currentRatingQuestions.every(q => ratings[q] > 0);
        const hasRequiredComments = currentCommentQuestions
            .filter(q => q.required)
            .every(q => comments[q.text]?.trim());
        return selectedDepartment && selectedBrand && hasAllRatings && hasRequiredComments;
    }

    async function handleSubmit() {
        if (!isFormValid()) return;

        isSubmitting = true;
        try {
            await feedbackStore.submitFeedback({
                department: selectedDepartment,
                brand: selectedBrand,
                ratings,
                comments
            });
            
            // Reset form
            selectedDepartment = '';
            selectedBrand = '';
            ratings = {};
            comments = {};
            currentRatingQuestions = [];
            currentCommentQuestions = [];
            
            // Close modal
            show = false;
            onComplete();
        } finally {
            isSubmitting = false;
        }
    }
</script>

{#if show}
    <div class="fixed inset-0 z-[9999] overflow-hidden"
         transition:fade={{ duration: 200 }}>
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
             on:click|self={() => !inGameMode && (show = false)}></div>
        
        <div class="absolute inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="relative w-full max-w-xl rounded-xl bg-zinc-900 shadow-lg"
                     transition:scale={{ duration: 300, start: 0.95 }}>
                    
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-2xl font-bold">Formulari i Feedback-ut</h2>
                            {#if !inGameMode}
                                <button
                                    class="p-2 hover:bg-zinc-800 rounded-lg transition-colors"
                                    on:click={() => show = false}
                                >
                                    <Fa icon={faXmark} class="text-xl" />
                                </button>
                            {/if}
                        </div>

                        <form on:submit|preventDefault={handleSubmit} class="space-y-8">
                            <!-- Department Selection -->
                            <div class="space-y-4">
                                <h3 class="text-lg font-semibold text-center">Cfarë shërbimi po prisni?</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <button
                                        type="button"
                                        class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                               {selectedDepartment === 'sales' 
                                                   ? 'border-orange-500 bg-orange-500/10' 
                                                   : 'border-zinc-800 hover:border-orange-500/50'}"
                                        on:click={() => handleDepartmentClick('sales')}
                                    >
                                        <Fa icon={faCar} class="text-3xl" />
                                        <span class="font-medium">Shitje</span>
                                    </button>
                                    
                                    <button
                                        type="button"
                                        class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                               {selectedDepartment === 'service' 
                                                   ? 'border-orange-500 bg-orange-500/10' 
                                                   : 'border-zinc-800 hover:border-orange-500/50'}"
                                        on:click={() => handleDepartmentClick('service')}
                                    >
                                        <Fa icon={faWrench} class="text-3xl" />
                                        <span class="font-medium">Servis</span>
                                    </button>
                                </div>
                            </div>

                            <!-- Brand Selection -->
                            <div class="space-y-4">
                                <h3 class="text-lg font-semibold text-center">Zgjidhni markën e makinës tuaj</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    {#each brands as brand}
                                        <button
                                            type="button"
                                            class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                                   {selectedBrand === brand.id 
                                                       ? 'border-orange-500 bg-orange-500/10' 
                                                       : 'border-zinc-800 hover:border-orange-500/50'}"
                                            on:click={() => handleBrandClick(brand.id)}
                                        >
                                            <img src={brand.image} alt={brand.name} class="h-20 object-contain invert" />
                                        </button>
                                    {/each}
                                </div>
                            </div>

                            {#if selectedDepartment}
                                <!-- Rating Questions -->
                                {#if currentRatingQuestions.length > 0}
                                    <div class="space-y-6">
                                        <h3 class="text-lg font-semibold text-center">Vlerësoni eksperiencën tuaj</h3>
                                        {#each currentRatingQuestions as question}
                                            <div class="space-y-2">
                                                <p class="font-medium">{question}</p>
                                                <div class="flex gap-2 justify-center">
                                                    {#each Array(5) as _, i}
                                                        <button
                                                            type="button"
                                                            class="text-2xl transition-colors"
                                                            on:click={() => handleRatingClick(question, i + 1)}
                                                        >
                                                            <Fa 
                                                                icon={ratings[question] > i ? fasStar : farStar}
                                                                class={ratings[question] > i ? "text-orange-500" : "text-zinc-600"}
                                                            />
                                                        </button>
                                                    {/each}
                                                </div>
                                            </div>
                                        {/each}
                                    </div>
                                {/if}

                                <!-- Comment Questions -->
                                {#if currentCommentQuestions.length > 0}
                                    <div class="space-y-6">
                                        <h3 class="text-lg font-semibold text-center">Na tregoni më shumë</h3>
                                        {#each currentCommentQuestions as question}
                                            <div class="space-y-2">
                                                <div class="flex items-center gap-2">
                                                    <p class="font-medium">{question.text}</p>
                                                    {#if question.required}
                                                        <span class="text-orange-500 text-sm">*</span>
                                                    {/if}
                                                </div>
                                                <Textarea
                                                    value={comments[question.text] || ''}
                                                    on:input={(e) => handleCommentChange(question.text, e.target.value)}
                                                    placeholder={question.required ? "Shkruani përgjigjen tuaj këtu..." : "Opsionale - Shkruani përgjigjen tuaj këtu..."}
                                                    rows="3"
                                                    class="w-full resize-none"
                                                />
                                            </div>
                                        {/each}
                                    </div>
                                {/if}
                            {/if}

                            <Button 
                                type="submit" 
                                disabled={isSubmitting || !isFormValid()} 
                                class="w-full"
                            >
                                {#if isSubmitting}
                                    Duke dërguar...
                                {:else}
                                    Dërgo
                                    <Fa icon={faCheck} class="ml-2" />
                                {/if}
                            </Button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/if}

<style>
    /* Custom scrollbar styles */
    :global(.overflow-y-auto::-webkit-scrollbar) {
        width: 8px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-track) {
        background: transparent;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb) {
        background: #27272a;
        border-radius: 4px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
        background: #3f3f46;
    }
</style>

================
File: src/lib/components/game-card.svelte
================
<script>
  import { goto } from '$app/navigation';
  
  export let title = '';
  export let image = '';
  export let href = '';

  function handleClick() {
    goto(href);
  }
</script>

<style>
  .game-card {
    @apply relative overflow-hidden rounded-2xl transition-all duration-300;
    aspect-ratio: 3/4;
    background: rgba(0, 0, 0, 1);
    border: 3px solid rgba(255, 124, 48, 0.3);
    box-shadow: 0 0 20px rgba(255, 131, 48, 0.1);
  }

  .game-card::before {
    content: '';
    @apply absolute inset-0 z-10;
    transition: all 0.3s ease;
  }

  .game-card:hover::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.8) 70%,
      rgba(255, 96, 48, 0.2) 90%,
      rgba(255, 131, 48, 0.3) 100%
    );
  }

  .game-card:hover {
    transform: scale(1.05);
    border: 3px solid rgba(255, 114, 48, 0.8);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(255, 114, 48, 0.3);
    cursor: pointer;
  }

  .game-card img {
    @apply absolute inset-0 w-full h-full object-cover transition-all duration-500;
  }

  .game-card:hover img {
    transform: scale(1.1);
    filter: brightness(1.1) saturate(1.1);
  }

  .game-card-content {
    @apply absolute inset-x-0 bottom-0 p-6 text-white text-center z-20;
    min-height: 40%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: all 0.3s ease;
    transform-origin: bottom;
  }

  .game-card h1 {
    @apply font-bold tracking-wider;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
  }

  .game-card::after {
    content: '';
    @apply absolute inset-0;
    background: linear-gradient(
      45deg,
      transparent 0%,
      rgba(255, 62, 48, 0) 50%,
      rgba(255, 141, 48, 0.15) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .game-card:hover::after {
    opacity: 1;
  }
</style>

<div class="game-card" on:click={handleClick} on:keydown={(e) => e.key === 'Enter' && handleClick()}>
  <div class="block w-full h-full">
    <img src={image} alt={title} />
    <div class="game-card-content">
      <h1>{title}</h1>
    </div>
  </div>
</div>

================
File: src/lib/components/GameFeedbackModal.svelte
================
<script>
    import { fade, scale } from 'svelte/transition';
    import Fa from 'svelte-fa';
    import { faCar, faWrench, faCheck, faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
    import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
    import { feedbackStore } from '$lib/stores/feedbackStore';
    import { Button } from "$lib/components/ui/button";
    import { Textarea } from "$lib/components/ui/textarea";
    import { onMount } from 'svelte';
    import confetti from 'canvas-confetti';

    export let show = false;
    export let onGamePause = () => {};
    export let onGameResume = () => {};
    export let onClose = () => {};

    // State
    let isSubmitting = false;
    let allQuestions = [];
    let currentQuestionIndex = 0;
    let answers = {};
    let showThankYou = false;
    let progress = 0;

    function fireConfetti() {
        const count = 200;
        const defaults = {
            origin: { y: 0.7 },
            zIndex: 10000
        };

        function fire(particleRatio, opts) {
            confetti({
                ...defaults,
                ...opts,
                particleCount: Math.floor(count * particleRatio)
            });
        }

        fire(0.25, {
            spread: 26,
            startVelocity: 55,
        });

        fire(0.2, {
            spread: 60,
        });

        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8
        });

        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2
        });

        fire(0.1, {
            spread: 120,
            startVelocity: 45,
        });
    }

    async function handleSubmit() {
        console.log('📝 GameFeedbackModal: Submitting current answers', {
            answers,
            currentIndex: currentQuestionIndex,
            currentRound: $feedbackStore.currentRound
        });

        try {
            await new Promise(resolve => setTimeout(resolve, 500)); // Simulate API delay

            // Check if all questions are answered
            if (currentQuestionIndex + 2 >= allQuestions.length) {
                // Save completion timestamp
                localStorage.setItem('gameFeedbackLastSubmit', new Date().toDateString());
                
                // Show thank you message with confetti
                showThankYou = true;
                fireConfetti();
                
                // Close after delay
                setTimeout(() => {
                    show = false;
                    showThankYou = false;
                    onGameResume();
                    onClose();
                }, 2000);
            } else {
                // Just close the modal after first set of questions
                // It will show again on next odd round
                show = false;
                onGameResume();
                onClose();
            }
        } catch (error) {
            console.error('❌ GameFeedbackModal: Error:', error);
        }
    }

    // Initialize questions
    onMount(() => {
        const storedAnswers = localStorage.getItem('gameFeedbackAnswers');
        const lastSubmitDate = localStorage.getItem('gameFeedbackLastSubmit');
        
        if (storedAnswers && lastSubmitDate) {
            const today = new Date().toDateString();
            if (lastSubmitDate === today) {
                // Don't show feedback for rest of the day
                show = false;
                onClose();
                return;
            }
        }

        // Initialize questions array
        allQuestions = [
            { id: 'department', text: 'Cfarë shërbimi po prisni?', type: 'department', required: true },
            { id: 'brand', text: 'Zgjidhni markën e makinës', type: 'brand', required: true },
            ...questions.sales.ratings.map((q, i) => ({ 
                id: `rating_${i}`, 
                text: q, 
                type: 'rating',
                required: true 
            })),
            ...questions.sales.comments.map((q, i) => ({ 
                id: `comment_${i}`, 
                text: q.text, 
                type: 'comment',
                required: q.required 
            }))
        ];

        // Load stored answers and set current index
        if (storedAnswers) {
            answers = JSON.parse(storedAnswers);
            currentQuestionIndex = Math.floor(Object.keys(answers).length / 2) * 2;
            // Update initial progress
            progress = (Object.keys(answers).length / allQuestions.length) * 100;
        }

        console.log('📝 GameFeedbackModal: Initialized', { 
            totalQuestions: allQuestions.length,
            currentIndex: currentQuestionIndex,
            storedAnswers: answers,
            initialProgress: progress
        });
    });

    // Show modal after delay in odd rounds
    $: if (show && $feedbackStore.currentRound % 2 === 1 && !showThankYou) {
        console.log('📝 GameFeedbackModal: Show triggered', { 
            currentRound: $feedbackStore.currentRound,
            currentQuestionIndex,
            totalQuestions: allQuestions?.length
        });
        onGamePause();
    }

    // Get current questions
    $: currentQuestions = allQuestions.slice(currentQuestionIndex, currentQuestionIndex + 2);
    
    // Update progress when answers change
    $: if (allQuestions) {
        const answeredCount = Object.keys(answers).length;
        progress = (answeredCount / allQuestions.length) * 100;
        console.log('📝 Progress updated:', { answeredCount, total: allQuestions.length, progress });
    }

    function saveAnswer(questionId, value, autoSubmit = true) {
        answers = { ...answers, [questionId]: value }; // Create new reference to trigger reactivity
        localStorage.setItem('gameFeedbackAnswers', JSON.stringify(answers));

        console.log('📝 Answer saved:', { questionId, value, answers });

        // Only auto-submit for non-comment questions
        if (autoSubmit) {
            // Check if both current questions are answered
            const bothAnswered = currentQuestions.every(q => 
                answers[q.id] && (!q.required || answers[q.id].toString().trim())
            );

            if (bothAnswered) {
                handleSubmit();
            }
        }
    }

    function handleCommentSubmit(questionId, event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        const value = formData.get('comment');
        
        if (!value && currentQuestions.find(q => q.id === questionId)?.required) {
            return; // Don't submit if required field is empty
        }

        saveAnswer(questionId, value);
        handleSubmit();
    }

    // Reset modal state when hidden
    $: if (!show) {
        showThankYou = false;
    }

    // Department and Brand components from FeedbackModal
    const brands = [
        { id: 'volkswagen', name: 'Volkswagen', image: '/images/logos/brands/vw.png' },
        { id: 'audi', name: 'Audi', image: '/images/logos/brands/audi.png' },
        { id: 'seat', name: 'Seat', image: '/images/logos/brands/seat.png' },
        { id: 'skoda', name: 'Skoda', image: '/images/logos/brands/skoda.png' }
    ];

    const questions = {
        sales: {
            ratings: [
                'Si e vlerësoni eksperiencën e blerjes?',
                'A ishte stafi i dobishëm?',
                'Sa i kënaqur jeni me çmimin?',
                'A do ta rekomandonit tek të tjerët?'
            ],
            comments: [
                { text: 'Çfarë ju pëlqeu më shumë në eksperiencën tuaj?', required: true },
                { text: 'Si mund ta përmirësojmë shërbimin tonë?', required: false },
                { text: 'Nëse dëshironi, na tregoni diçka tjetër:', required: false }
            ]
        },
        service: {
            ratings: [
                'Si e vlerësoni eksperiencën e servisit?',
                'A ishte stafi i dobishëm?',
                'Sa i kënaqur jeni me shërbimin?',
                'A do ta rekomandonit tek të tjerët?'
            ],
            comments: [
                { text: 'Çfarë ju pëlqeu më shumë në eksperiencën tuaj?', required: true },
                { text: 'Si mund ta përmirësojmë shërbimin tonë?', required: false },
                { text: 'Nëse dëshironi, na tregoni diçka tjetër:', required: false }
            ]
        }
    };
</script>

{#if show && $feedbackStore.currentRound % 2 === 1 && !showThankYou}
    <div class="fixed inset-0 z-[9999] overflow-hidden" transition:fade={{ duration: 200 }}>
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        
        <div class="absolute inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="relative w-full max-w-xl rounded-xl bg-zinc-900 shadow-lg"
                     transition:scale={{ duration: 300, start: 0.95 }}>
                    
                    <div class="p-6">
                        <div class="space-y-6">
                            <div>
                                <h2 class="text-2xl font-bold text-center">Feedback</h2>
                                <p class="text-center text-zinc-400 mt-2">
                                    Ju lutemi të jepni përgjigjet tuaja në këtë form.
                                </p>
                                
                                <!-- Progress bar -->
                                <div class="w-full bg-zinc-800 rounded-full h-2.5 mt-4">
                                    <div class="bg-primary h-2.5 rounded-full transition-all duration-500"
                                         style="width: {progress}%"></div>
                                </div>
                            </div>

                            <div class="space-y-6">
                                {#each currentQuestions as question (question.id)}
                                    {#if question.type === 'department'}
                                        <div class="space-y-4">
                                            <h3 class="text-lg font-semibold text-center">{question.text}</h3>
                                            <div class="grid grid-cols-2 gap-4">
                                                <button
                                                    type="button"
                                                    class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                                           {answers[question.id] === 'sales' 
                                                               ? 'border-orange-500 bg-orange-500/10' 
                                                               : 'border-zinc-800 hover:border-orange-500/50'}"
                                                    on:click={() => saveAnswer(question.id, 'sales')}
                                                >
                                                    <Fa icon={faCar} class="text-3xl" />
                                                    <span class="font-medium">Shitje</span>
                                                </button>
                                                
                                                <button
                                                    type="button"
                                                    class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                                           {answers[question.id] === 'service' 
                                                               ? 'border-orange-500 bg-orange-500/10' 
                                                               : 'border-zinc-800 hover:border-orange-500/50'}"
                                                    on:click={() => saveAnswer(question.id, 'service')}
                                                >
                                                    <Fa icon={faWrench} class="text-3xl" />
                                                    <span class="font-medium">Servis</span>
                                                </button>
                                            </div>
                                        </div>
                                    {:else if question.type === 'brand'}
                                        <div class="space-y-4">
                                            <h3 class="text-lg font-semibold text-center">{question.text}</h3>
                                            <div class="grid grid-cols-2 gap-4">
                                                {#each brands as brand}
                                                    <button
                                                        type="button"
                                                        class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-colors
                                                               {answers[question.id] === brand.id 
                                                                   ? 'border-orange-500 bg-orange-500/10' 
                                                                   : 'border-zinc-800 hover:border-orange-500/50'}"
                                                        on:click={() => saveAnswer(question.id, brand.id)}
                                                    >
                                                        <img src={brand.image} alt={brand.name} class="h-20 object-contain invert" />
                                                    </button>
                                                {/each}
                                            </div>
                                        </div>
                                    {:else if question.type === 'rating'}
                                        <div class="space-y-2">
                                            <p class="font-medium text-center">{question.text}</p>
                                            <div class="flex gap-2 justify-center">
                                                {#each Array(5) as _, i}
                                                    <button
                                                        type="button"
                                                        class="text-2xl transition-colors"
                                                        on:click={() => saveAnswer(question.id, i + 1)}
                                                    >
                                                        <Fa 
                                                            icon={answers[question.id] > i ? fasStar : farStar}
                                                            class={answers[question.id] > i ? "text-orange-500" : "text-zinc-600"}
                                                        />
                                                    </button>
                                                {/each}
                                            </div>
                                        </div>
                                    {:else}
                                        <div class="space-y-2">
                                            <div class="flex items-center gap-2">
                                                <p class="font-medium">{question.text}</p>
                                                {#if question.required}
                                                    <span class="text-orange-500 text-sm">*</span>
                                                {/if}
                                            </div>
                                            <Textarea 
                                                name="comment" 
                                                value={answers[question.id] || ''}
                                                on:input={(e) => saveAnswer(question.id, e.target.value, false)}
                                                placeholder={question.required ? "Shkruani përgjigjen tuaj këtu..." : "Opsionale - Shkruani përgjigjen tuaj këtu..."}
                                                rows="3"
                                                class="w-full resize-none"
                                                on:keydown={(e) => {
                                                    if (e.key === 'Enter' && e.target.value.trim()) {
                                                        saveAnswer(question.id, e.target.value);
                                                        handleSubmit();
                                                    }
                                                }}
                                            />
                                        </div>
                                    {/if}
                                {/each}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{:else if show && showThankYou}
    <div class="fixed inset-0 z-[9999] overflow-hidden" transition:fade={{ duration: 200 }}>
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        
        <div class="absolute inset-0 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="relative w-full max-w-xl rounded-xl bg-zinc-900 shadow-lg p-8 text-center"
                     transition:scale={{ duration: 300, start: 0.95 }}>
                    <div class="flex flex-col items-center gap-4">
                        <Fa icon={faCheck} class="text-5xl text-green-500" />
                        <h2 class="text-3xl font-bold">Faleminderit!</h2>
                        <p class="text-zinc-400">
                            E vlerësojmë shumë përgjigjen tuaj!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/if}

<style>
    /* Custom scrollbar styles */
    :global(.overflow-y-auto::-webkit-scrollbar) {
        width: 8px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-track) {
        background: transparent;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb) {
        background: #27272a;
        border-radius: 4px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
        background: #3f3f46;
    }
</style>

================
File: src/lib/components/games/ScoreIndicator.svelte
================
<script>
    import { fade, fly } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';
    
    export let points = 0;
    export let isPositive = true;
</script>

<div
    class="absolute pointer-events-none z-50"
    in:fly={{ y: 20, duration: 400, easing: quintOut }}
    out:fade={{ duration: 300 }}
>
    <span class={`text-2xl font-bold ${isPositive ? 'text-green-500' : 'text-red-500'}`}>
        {isPositive ? '+' : '-'}{Math.abs(points)}
    </span>
</div>

<style>
    div {
        animation: float-up 1s ease-out forwards;
    }

    @keyframes float-up {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-40px);
        }
    }
</style>

================
File: src/lib/components/games/VictoryModal.svelte
================
<script>
    import { Fa } from 'svelte-fa';
    import { faTrophy, faClock, faStar, faGamepad } from '@fortawesome/free-solid-svg-icons';
    import { fade } from 'svelte/transition';
    
    export let show = false;
    export let stats = [];  // Array of stats to display (icon, label, value, bonus)
    export let bonuses = []; // Array of bonus calculations (label, value)
    export let totalScore = 0;
    export let onPlayAgain = () => {};
    export let onHome = () => {};
    export let gameTitle = "Game Over";

</script>

{#if show}
    <div class="fixed inset-0 z-100 flex items-center justify-center" transition:fade>
        <div class="bg-white dark:bg-[rgb(30,30,30)] w-full max-w-md rounded-xl shadow-lg ">
            <div class="p-6 text-center">
                <h2 class="text-black dark:text-white text-3xl font-bold mb-6">Congratulations!</h2>
                
                <div class="space-y-3">
                    {#each stats as stat}
                        <div class="bg-gray-200 dark:bg-[rgb(15,15,15)] rounded-lg p-4">
                            <div class="flex items-center gap-3 mb-1">
                                <div class="w-8 h-8 flex items-center justify-center">
                                    <Fa icon={stat.icon} class="text-orange-400 text-xl" />
                                </div>
                                <span class="text-black/80 dark:text-white/80">{stat.label}</span>
                                <div class="ml-auto text-right">
                                    <div class="text-black dark:text-white text-xl font-semibold">{stat.value}</div>
                                    {#if stat.bonus}
                                        <div class="text-sm text-orange-400">Bonus: {stat.bonus}</div>
                                    {/if}
                                </div>
                            </div>
                        </div>
                    {/each}
                </div>
                
                <div class="mt-6 bg-gray-200 dark:bg-[rgb(15,15,15)] rounded-lg p-4">
                    <div class="text-black dark:text-white text-lg font-semibold mb-3">Llogaritja e pikëve</div>
                    <div class="space-y-2 text-sm">
                        {#each bonuses as bonus}
                            <div class="flex justify-between text-black/80 dark:text-white/80">
                                <span>{bonus.label}</span>
                                <span class="font-medium">{bonus.value} pikë</span>
                            </div>
                        {/each}
                        <div class="h-px bg-black/10 dark:bg-white/10 my-2"></div>
                        <div class="flex justify-between text-lg font-bold text-black dark:text-white">
                            <span>Pikët totale</span>
                            <span>{totalScore} pikë</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 grid grid-cols-2 gap-3">
                    <button 
                        class="px-6 py-3 rounded-lg bg-[rgb(150,150,150)] text-black dark:bg-[rgb(15,15,15)] text-white hover:bg-[rgb(80,80,80)] hover:dark:bg-[rgb(40,40,40)] transition-colors"
                        on:click={onHome}
                    >
                        Homepage
                    </button>
                    <button 
                        class="px-6 py-3 rounded-lg bg-orange-500 text-white hover:bg-orange-600 transition-colors"
                        on:click={onPlayAgain}
                    >
                        Luaj përsëri
                    </button>
                </div>
            </div>
        </div>
    </div>
{/if}

<style>
    /* Add any additional styles here */
</style>

================
File: src/lib/components/navbar.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Fa } from 'svelte-fa';
    import { 
        faSignOutAlt, 
        faCoins,
        faChartSimple,
        faSun,
        faMoon,
        faBars,
        faXmark
    } from '@fortawesome/free-solid-svg-icons';
    import { fade } from 'svelte/transition';
    import { theme } from '$lib/stores/theme';
    import { score } from "$lib/stores/score";
    import { onMount } from 'svelte';

    export let onLogout = () => {};

    $: isDark = $theme === 'dark';
    let isMobileMenuOpen = false;

    onMount(() => {
        document.documentElement.classList.toggle('dark', isDark);
    });

    function toggleTheme() {
        theme.toggle();
        document.documentElement.classList.toggle('dark');
    }

    function toggleMobileMenu() {
        isMobileMenuOpen = !isMobileMenuOpen;
        document.body.classList.toggle('mobile-menu-open');
    }

    function closeMobileMenu() {
        isMobileMenuOpen = false;
        document.body.classList.remove('mobile-menu-open');
    }
</script>

<style>
    .navbar {
        @apply flex items-center justify-between w-full px-4 py-2;
        background: transparent;
    }

    .navbar > div {
        @apply flex-1;
    }

    .logo {
        @apply transition-all duration-300 cursor-pointer;
    }

    .mobile-menu {
        @apply fixed inset-0 bg-background/95 backdrop-blur-sm z-50 lg:hidden;
    }

    .mobile-menu-content {
        @apply flex flex-col items-center justify-center gap-6 h-full relative px-4;
    }

    :global(body.mobile-menu-open) {
        @apply overflow-hidden;
    }
</style>

<div class="absolute top-0 left-0 right-0 z-50">
    <nav class="container mx-auto navbar">
        <div class="flex justify-start">
            <Button 
                variant="destructive" 
                size="sm"
                class="dark:bg-[#9c221a] dark:hover:bg-[#5A1915] bg-[#ff3e30] hover:bg-[#b92727] text-white"
                on:click={onLogout}
            >
                <span class="mr-2">Dil</span>
                <Fa icon={faSignOutAlt} />
            </Button>
        </div>

        <div class="flex justify-center">
            <a href="/" class="hover:opacity-80 transition-opacity">
                <img 
                    src="/images/logos/porsche-logo.png" 
                    alt="Porsche Albania" 
                    class="h-7 logo light invert dark:invert-0"
                />
            </a>
        </div>

        <div class="flex justify-end items-center gap-4">
            <div class="hidden lg:flex items-center gap-4">
                <a href="/leaderboard" class="flex items-center gap-2 px-3 py-1.5 hover:bg-orange-500/20 rounded-lg">
                    <Fa icon={faChartSimple} />
                    Tabela
                </a>
                <Button variant="ghost" size="icon" class="rounded-full hover:bg-orange-500/20" on:click={toggleTheme}>
                    <Fa icon={isDark ? faSun : faMoon} />
                </Button>
            </div>

            <div class="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 rounded-lg">
                <Fa icon={faCoins} class="text-orange-500" />
                <span class="font-medium text-orange-500" in:fade>
                    {$score} pike
                </span>
            </div>

            <Button 
                variant="ghost"
                size="icon"
                class="lg:hidden rounded-full hover:bg-orange-500/20 dark:text-white"
                on:click={toggleMobileMenu}
            >
                <Fa icon={faBars} />
            </Button>
        </div>
    </nav>
</div>

<!-- Mobile Menu -->
{#if isMobileMenuOpen}
    <div class="mobile-menu" transition:fade={{duration: 200}} on:click={closeMobileMenu}>
        <div class="mobile-menu-content" on:click|stopPropagation>
            <!-- Close Button -->
            <Button 
                variant="ghost"
                size="icon"
                class="absolute top-4 right-4 w-9 h-9 rounded-full hover:bg-orange-500/20 dark:text-white"
                on:click={closeMobileMenu}
            >
                <Fa icon={faXmark} />
            </Button>

            <!-- Leaderboard Link -->
            <a 
                href="/leaderboard"
                class="flex items-center gap-2 px-4 py-2 hover:bg-orange-500/20 rounded-lg transition-colors"
                on:click={closeMobileMenu}
            >
                <Fa icon={faChartSimple} />
                Tabela
            </a>

            <!-- Theme Toggle -->
            <Button 
                variant="ghost" 
                size="lg"
                class="w-full flex items-center justify-center gap-2 hover:bg-orange-500/20"
                on:click={() => {
                    toggleTheme();
                    closeMobileMenu();
                }}
            >
                <Fa icon={isDark ? faSun : faMoon} />
                {isDark ? 'Light Mode' : 'Dark Mode'}
            </Button>
        </div>
    </div>
{/if}

================
File: src/lib/components/screensaver.svelte
================
<script>
    import { onMount } from 'svelte';
    import { fade, fly } from 'svelte/transition';
    import { cubicOut, elasticOut } from 'svelte/easing';

    export let active = false;

    let time = new Date();
    let interval;
    let logoLoaded = false;

    onMount(() => {
        interval = setInterval(() => {
            time = new Date();
        }, 1000);

        return () => {
            clearInterval(interval);
        };
    });

    $: hours = time.getHours().toString().padStart(2, '0');
    $: minutes = time.getMinutes().toString().padStart(2, '0');

    function handleLogoLoad() {
        logoLoaded = true;
    }
</script>

{#if active}
    <div 
        class="fixed inset-0 bg-black z-50 flex items-center justify-center cursor-pointer"
        transition:fade={{ duration: 800 }}
    >
        <div class="relative w-full h-full flex flex-col items-center justify-center">
            <!-- Logo Container -->
            <div 
                class="relative flex justify-center items-center mb-24"
                style="transform-origin: center center;"
                in:fly={{ y: -50, duration: 1200, delay: 200, easing: elasticOut }}
            >
                <!-- Logo Background Effect -->
                <div class="absolute w-[600px] h-[600px] rounded-full bg-white/[0.02] animate-[spin_20s_linear_infinite]">
                    {#each Array(12) as _, i}
                        <div 
                            class="absolute top-1/2 left-1/2 w-full h-0.5 bg-gradient-to-r from-transparent via-white/5 to-transparent"
                            style="transform: translate(-50%, -50%) rotate({i * 30}deg);"
                        />
                    {/each}
                </div>

                <!-- Rotating Rings -->
                <div class="absolute w-[500px] h-[500px] rounded-full border border-white/[0.03] animate-[spin_15s_linear_infinite]" />
                <div class="absolute w-[400px] h-[400px] rounded-full border border-white/[0.04] animate-[spin_10s_linear_infinite_reverse]" />

                <!-- Logo -->
                <div class="relative">
                    <img 
                        src="/images/logos/porsche-logo.png" 
                        alt="Porsche Logo"
                        class="h-35 opacity-90 transition-opacity duration-1000"
                        class:opacity-90={logoLoaded}
                        on:load={handleLogoLoad}
                    />
                    <div class="absolute inset-0 animate-pulse bg-gradient-to-r from-transparent via-white/10 to-transparent" />
                </div>
            </div>

            <!-- Time -->
            <div 
                class="flex items-center space-x-3 mb-12"
                in:fly={{ y: 20, duration: 1000, delay: 600 }}
            >
                <span class="text-[120px] font-light text-white/80 tracking-[0.2em] tabular-nums">
                    {hours}
                </span>
                <span class="text-[120px] font-light text-white/40">
                    <span class="inline-block animate-[blink_2s_ease-in-out_infinite]">:</span>
                </span>
                <span class="text-[120px] font-light text-white/80 tracking-[0.2em] tabular-nums">
                    {minutes}
                </span>
            </div>

            <!-- Company Name -->
            <div 
                class="text-xl text-white/30 tracking-[1em] uppercase mb-16"
                in:fly={{ y: 20, duration: 1000, delay: 800 }}
            >
                Tap to play
            </div>

            <!-- Animated Corner Accents -->
            <div class="absolute top-0 left-0 w-64 h-64">
                <div class="absolute top-0 left-0 w-full h-0.5 bg-white/5 animate-[expand-right_1s_ease-out_forwards]" />
                <div class="absolute top-0 left-0 h-full w-0.5 bg-white/5 animate-[expand-down_1s_ease-out_forwards]" />
            </div>
            <div class="absolute top-0 right-0 w-64 h-64">
                <div class="absolute top-0 right-0 w-full h-0.5 bg-white/5 animate-[expand-left_1s_ease-out_forwards]" />
                <div class="absolute top-0 right-0 h-full w-0.5 bg-white/5 animate-[expand-down_1s_ease-out_forwards]" />
            </div>
            <div class="absolute bottom-0 left-0 w-64 h-64">
                <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white/5 animate-[expand-right_1s_ease-out_forwards]" />
                <div class="absolute bottom-0 left-0 h-full w-0.5 bg-white/5 animate-[expand-up_1s_ease-out_forwards]" />
            </div>
            <div class="absolute bottom-0 right-0 w-64 h-64">
                <div class="absolute bottom-0 right-0 w-full h-0.5 bg-white/5 animate-[expand-left_1s_ease-out_forwards]" />
                <div class="absolute bottom-0 right-0 h-full w-0.5 bg-white/5 animate-[expand-up_1s_ease-out_forwards]" />
            </div>
        </div>

        <!-- Floating Particles -->
        <div class="absolute inset-0 overflow-hidden">
            {#each Array(30) as _, i}
                <div
                    class="absolute w-1 h-1 rounded-full"
                    style="
                        left: {Math.random() * 100}%;
                        top: {Math.random() * 100}%;
                        background: rgba(255, 255, 255, ${0.02 + Math.random() * 0.05});
                        animation: float-{i % 5} {25 + Math.random() * 15}s linear infinite;
                        transform-origin: center center;
                    "
                />
            {/each}
        </div>

        <!-- Enhanced Vignette -->
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_20%,rgba(0,0,0,0.8))]" />
    </div>
{/if}

<style>
    @keyframes fade-in-out {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 0.2; }
    }

    @keyframes blink {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.1; }
    }

    @keyframes expand-right {
        from { transform: scaleX(0); transform-origin: left; }
        to { transform: scaleX(1); transform-origin: left; }
    }

    @keyframes expand-left {
        from { transform: scaleX(0); transform-origin: right; }
        to { transform: scaleX(1); transform-origin: right; }
    }

    @keyframes expand-down {
        from { transform: scaleY(0); transform-origin: top; }
        to { transform: scaleY(1); transform-origin: top; }
    }

    @keyframes expand-up {
        from { transform: scaleY(0); transform-origin: bottom; }
        to { transform: scaleY(1); transform-origin: bottom; }
    }

    @keyframes float-0 {
        0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
        25% { opacity: 1; }
        75% { opacity: 1; }
        100% { transform: translate(200px, -200px) rotate(360deg); opacity: 0; }
    }

    @keyframes float-1 {
        0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
        25% { opacity: 1; }
        75% { opacity: 1; }
        100% { transform: translate(-200px, -200px) rotate(-360deg); opacity: 0; }
    }

    @keyframes float-2 {
        0% { transform: translate(0, 0) scale(1); opacity: 0; }
        25% { opacity: 1; transform: scale(1.5); }
        75% { opacity: 1; transform: scale(0.8); }
        100% { transform: translate(0, -300px) scale(1); opacity: 0; }
    }

    @keyframes float-3 {
        0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
        25% { opacity: 1; }
        75% { opacity: 1; }
        100% { transform: translate(150px, -250px) rotate(720deg); opacity: 0; }
    }

    @keyframes float-4 {
        0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; }
        25% { opacity: 1; transform: scale(1.2); }
        75% { opacity: 1; transform: scale(0.9); }
        100% { transform: translate(-150px, -250px) rotate(-720deg) scale(1); opacity: 0; }
    }
</style>

================
File: src/lib/components/ui/accordion/accordion-content.svelte
================
<script>
	import { Accordion as AccordionPrimitive } from "bits-ui";
	import { slide } from "svelte/transition";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let transition = slide;
	export let transitionConfig = {
		duration: 200,
	};
	export { className as class };
</script>

<AccordionPrimitive.Content
	class={cn("overflow-hidden text-sm", className)}
	{transition}
	{transitionConfig}
	{...$$restProps}
>
	<div class="pb-4 pt-0">
		<slot />
	</div>
</AccordionPrimitive.Content>

================
File: src/lib/components/ui/accordion/accordion-item.svelte
================
<script>
	import { Accordion as AccordionPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
	export let value;
</script>

<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
	<slot />
</AccordionPrimitive.Item>

================
File: src/lib/components/ui/accordion/accordion-trigger.svelte
================
<script>
	import { Accordion as AccordionPrimitive } from "bits-ui";
	import ChevronDown from "svelte-radix/ChevronDown.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let level = 3;
	export { className as class };
</script>

<AccordionPrimitive.Header {level} class="flex">
	<AccordionPrimitive.Trigger
		class={cn(
			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
			className
		)}
		{...$$restProps}
		on:click
	>
		<slot />
		<ChevronDown
			class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
		/>
	</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

================
File: src/lib/components/ui/accordion/index.js
================
import { Accordion as AccordionPrimitive } from "bits-ui";
import Content from "./accordion-content.svelte";
import Item from "./accordion-item.svelte";
import Trigger from "./accordion-trigger.svelte";
const Root = AccordionPrimitive.Root;
export {
	Root,
	Content,
	Item,
	Trigger,
	//
	Root as Accordion,
	Content as AccordionContent,
	Item as AccordionItem,
	Trigger as AccordionTrigger,
};

================
File: src/lib/components/ui/badge/badge.svelte
================
<script>
	import { badgeVariants } from "./index.js";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let href = undefined;
	export let variant = "default";
	export { className as class };
</script>

<svelte:element
	this={href ? "a" : "span"}
	{href}
	class={cn(badgeVariants({ variant, className }))}
	{...$$restProps}
>
	<slot />
</svelte:element>

================
File: src/lib/components/ui/badge/index.js
================
import { tv } from "tailwind-variants";
export { default as Badge } from "./badge.svelte";
export const badgeVariants = tv({
	base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
	variants: {
		variant: {
			default:
				"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
			secondary:
				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
			destructive:
				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
			outline: "text-foreground",
		},
	},
	defaultVariants: {
		variant: "default",
	},
});

================
File: src/lib/components/ui/button/button.svelte
================
<script>
	import { Button as ButtonPrimitive } from "bits-ui";
	import { buttonVariants } from "./index.js";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let variant = "default";
	export let size = "default";
	export let builders = [];
	export { className as class };
</script>

<ButtonPrimitive.Root
	{builders}
	class={cn(buttonVariants({ variant, size, className }))}
	type="button"
	{...$$restProps}
	on:click
	on:keydown
>
	<slot />
</ButtonPrimitive.Root>

================
File: src/lib/components/ui/button/index.js
================
import { tv } from "tailwind-variants";
import Root from "./button.svelte";
const buttonVariants = tv({
	base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
	variants: {
		variant: {
			default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
			destructive:
				"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
			outline:
				"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
			ghost: "hover:bg-accent hover:text-accent-foreground",
			link: "text-primary underline-offset-4 hover:underline",
		},
		size: {
			default: "h-9 px-4 py-2",
			sm: "h-8 rounded-md px-3 text-xs",
			lg: "h-10 rounded-md px-8",
			icon: "h-9 w-9",
		},
	},
	defaultVariants: {
		variant: "default",
		size: "default",
	},
});
export {
	Root,
	//
	Root as Button,
	buttonVariants,
};

================
File: src/lib/components/ui/calendar/calendar-cell.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	export let date;
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Cell
	{date}
	class={cn(
		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
		className
	)}
	{...$$restProps}
>
	<slot />
</CalendarPrimitive.Cell>

================
File: src/lib/components/ui/calendar/calendar-day.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
	import { cn } from "$lib/utils.js";
	export let date;
	export let month;
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Day
	on:click
	{date}
	{month}
	class={cn(
		buttonVariants({ variant: "ghost" }),
		"h-8 w-8 p-0 font-normal",
		// Today
		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
		// Selected
		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
		// Disabled
		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
		// Unavailable
		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
		// Outside months
		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
		className
	)}
	{...$$restProps}
	let:selected
	let:disabled
	let:unavailable
	let:builder
>
	<slot {selected} {disabled} {unavailable} {builder}>
		{date.day}
	</slot>
</CalendarPrimitive.Day>

================
File: src/lib/components/ui/calendar/calendar-grid-body.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
	<slot />
</CalendarPrimitive.GridBody>

================
File: src/lib/components/ui/calendar/calendar-grid-head.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
	<slot />
</CalendarPrimitive.GridHead>

================
File: src/lib/components/ui/calendar/calendar-grid-row.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
	<slot />
</CalendarPrimitive.GridRow>

================
File: src/lib/components/ui/calendar/calendar-grid.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Grid class={cn("w-full border-collapse space-y-1", className)} {...$$restProps}>
	<slot />
</CalendarPrimitive.Grid>

================
File: src/lib/components/ui/calendar/calendar-head-cell.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.HeadCell
	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
	{...$$restProps}
>
	<slot />
</CalendarPrimitive.HeadCell>

================
File: src/lib/components/ui/calendar/calendar-header.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Header
	class={cn("relative flex w-full items-center justify-between pt-1", className)}
	{...$$restProps}
>
	<slot />
</CalendarPrimitive.Header>

================
File: src/lib/components/ui/calendar/calendar-heading.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Heading
	let:headingValue
	class={cn("text-sm font-medium", className)}
	{...$$restProps}
>
	<slot {headingValue}>
		{headingValue}
	</slot>
</CalendarPrimitive.Heading>

================
File: src/lib/components/ui/calendar/calendar-months.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div
	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
	{...$$restProps}
>
	<slot />
</div>

================
File: src/lib/components/ui/calendar/calendar-next-button.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import ChevronRight from "svelte-radix/ChevronRight.svelte";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.NextButton
	on:click
	class={cn(
		buttonVariants({ variant: "outline" }),
		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
		className
	)}
	{...$$restProps}
	let:builder
>
	<slot {builder}>
		<ChevronRight class="h-4 w-4" />
	</slot>
</CalendarPrimitive.NextButton>

================
File: src/lib/components/ui/calendar/calendar-prev-button.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import ChevronLeft from "svelte-radix/ChevronLeft.svelte";
	import { buttonVariants } from "$lib/components/ui/button/index.js";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.PrevButton
	on:click
	class={cn(
		buttonVariants({ variant: "outline" }),
		"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
		className
	)}
	{...$$restProps}
	let:builder
>
	<slot {builder}>
		<ChevronLeft class="h-4 w-4" />
	</slot>
</CalendarPrimitive.PrevButton>

================
File: src/lib/components/ui/calendar/calendar.svelte
================
<script>
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import * as Calendar from "./index.js";
	import { cn } from "$lib/utils.js";
	export let value = undefined;
	export let placeholder = undefined;
	export let weekdayFormat = "short";
	let className = undefined;
	export { className as class };
</script>

<CalendarPrimitive.Root
	bind:value
	bind:placeholder
	{weekdayFormat}
	class={cn("p-3", className)}
	{...$$restProps}
	on:keydown
	let:months
	let:weekdays
>
	<Calendar.Header>
		<Calendar.PrevButton />
		<Calendar.Heading />
		<Calendar.NextButton />
	</Calendar.Header>
	<Calendar.Months>
		{#each months as month}
			<Calendar.Grid>
				<Calendar.GridHead>
					<Calendar.GridRow class="flex">
						{#each weekdays as weekday}
							<Calendar.HeadCell>
								{weekday.slice(0, 2)}
							</Calendar.HeadCell>
						{/each}
					</Calendar.GridRow>
				</Calendar.GridHead>
				<Calendar.GridBody>
					{#each month.weeks as weekDates}
						<Calendar.GridRow class="mt-2 w-full">
							{#each weekDates as date}
								<Calendar.Cell {date}>
									<Calendar.Day {date} month={month.value} />
								</Calendar.Cell>
							{/each}
						</Calendar.GridRow>
					{/each}
				</Calendar.GridBody>
			</Calendar.Grid>
		{/each}
	</Calendar.Months>
</CalendarPrimitive.Root>

================
File: src/lib/components/ui/calendar/index.js
================
import Root from "./calendar.svelte";
import Cell from "./calendar-cell.svelte";
import Day from "./calendar-day.svelte";
import Grid from "./calendar-grid.svelte";
import Header from "./calendar-header.svelte";
import Months from "./calendar-months.svelte";
import GridRow from "./calendar-grid-row.svelte";
import Heading from "./calendar-heading.svelte";
import GridBody from "./calendar-grid-body.svelte";
import GridHead from "./calendar-grid-head.svelte";
import HeadCell from "./calendar-head-cell.svelte";
import NextButton from "./calendar-next-button.svelte";
import PrevButton from "./calendar-prev-button.svelte";
export {
	Day,
	Cell,
	Grid,
	Header,
	Months,
	GridRow,
	Heading,
	GridBody,
	GridHead,
	HeadCell,
	NextButton,
	PrevButton,
	//
	Root as Calendar,
};

================
File: src/lib/components/ui/card/card-content.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div class={cn("p-6", className)} {...$$restProps}>
	<slot />
</div>

================
File: src/lib/components/ui/card/card-description.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
	<slot />
</p>

================
File: src/lib/components/ui/card/card-footer.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
	<slot />
</div>

================
File: src/lib/components/ui/card/card-header.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
	<slot />
</div>

================
File: src/lib/components/ui/card/card-title.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let tag = "h3";
	export { className as class };
</script>

<svelte:element
	this={tag}
	class={cn("font-semibold leading-none tracking-tight", className)}
	{...$$restProps}
>
	<slot />
</svelte:element>

================
File: src/lib/components/ui/card/card.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
	class={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
	{...$$restProps}
	on:click
	on:focusin
	on:focusout
	on:mouseenter
	on:mouseleave
>
	<slot />
</div>

================
File: src/lib/components/ui/card/index.js
================
import Root from "./card.svelte";
import Content from "./card-content.svelte";
import Description from "./card-description.svelte";
import Footer from "./card-footer.svelte";
import Header from "./card-header.svelte";
import Title from "./card-title.svelte";
export {
	Root,
	Content,
	Description,
	Footer,
	Header,
	Title,
	//
	Root as Card,
	Content as CardContent,
	Description as CardDescription,
	Footer as CardFooter,
	Header as CardHeader,
	Title as CardTitle,
};

================
File: src/lib/components/ui/checkbox/checkbox.svelte
================
<script>
	import { Checkbox as CheckboxPrimitive } from "bits-ui";
	import Check from "svelte-radix/Check.svelte";
	import Minus from "svelte-radix/Minus.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let checked = false;
	export { className as class };
</script>

<CheckboxPrimitive.Root
	class={cn(
		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
		className
	)}
	bind:checked
	on:click
	{...$$restProps}
>
	<CheckboxPrimitive.Indicator
		class={cn("flex h-4 w-4 items-center justify-center text-current")}
		let:isChecked
		let:isIndeterminate
	>
		{#if isIndeterminate}
			<Minus class="h-3.5 w-3.5" />
		{:else}
			<Check class={cn("h-3.5 w-3.5", !isChecked && "text-transparent")} />
		{/if}
	</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>

================
File: src/lib/components/ui/checkbox/index.js
================
import Root from "./checkbox.svelte";
export {
	Root,
	//
	Root as Checkbox,
};

================
File: src/lib/components/ui/date-range-picker/index.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Calendar } from "$lib/components/ui/calendar";
    import { Popover, PopoverContent, PopoverTrigger } from "$lib/components/ui/popover";
    import { Fa } from 'svelte-fa';
    import { faCalendar, faXmark } from '@fortawesome/free-solid-svg-icons';
    import { format, isValid, startOfToday, subDays, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from "date-fns";

    export let value = { from: undefined, to: undefined };
    let selectedRange = { from: undefined, to: undefined };

    let isOpen = false;

    const presets = [
        {
            label: 'Sot',
            getValue: () => {
                const today = startOfToday();
                return { from: today, to: today };
            }
        },
        {
            label: 'Java',
            getValue: () => {
                const today = new Date();
                return {
                    from: startOfWeek(today, { weekStartsOn: 1 }),
                    to: endOfWeek(today, { weekStartsOn: 1 })
                };
            }
        },
        {
            label: 'Muaji',
            getValue: () => {
                const today = new Date();
                return {
                    from: startOfMonth(today),
                    to: endOfMonth(today)
                };
            }
        },
        {
            label: '7 ditët e fundit',
            getValue: () => ({
                from: subDays(startOfToday(), 6),
                to: startOfToday()
            })
        },
        {
            label: '30 ditët e fundit',
            getValue: () => ({
                from: subDays(startOfToday(), 29),
                to: startOfToday()
            })
        }
    ];

    $: formattedDate = value?.from && value?.to && isValid(value.from) && isValid(value.to)
        ? `${format(value.from, "dd/MM/yyyy")} - ${format(value.to, "dd/MM/yyyy")}`
        : value?.from && isValid(value.from)
        ? `${format(value.from, "dd/MM/yyyy")} - Zgjidhni datën e fundit`
        : "Zgjidhni periudhën";

    function handleSelect(dates) {
        selectedRange = dates;
        if (selectedRange.from && selectedRange.to) {
            value = selectedRange;
            isOpen = false;
        }
    }

    function clearDates() {
        value = { from: undefined, to: undefined };
        selectedRange = { from: undefined, to: undefined };
    }

    function selectPreset(preset) {
        const newValue = preset.getValue();
        value = newValue;
        selectedRange = newValue;
        isOpen = false;
    }
</script>

<div class="w-full">
    <Popover bind:open={isOpen}>
        <PopoverTrigger asChild let:builder>
            <Button
                builders={[builder]}
                variant="outline"
                class="w-full justify-between text-left font-normal bg-[#1a1a1a] border-white/20 hover:bg-[#252525] {value?.from ? 'text-white' : 'text-gray-400'}"
            >
                <div class="flex items-center gap-2">
                    <Fa icon={faCalendar} class="h-4 w-4" />
                    <span>{formattedDate}</span>
                </div>
                {#if value?.from}
                    <button 
                        class="text-gray-400 hover:text-white"
                        on:click|stopPropagation={clearDates}
                    >
                        <Fa icon={faXmark} class="h-4 w-4" />
                    </button>
                {/if}
            </Button>
        </PopoverTrigger>
        <PopoverContent class="w-auto p-0 bg-[#252525] border-white/20" align="start">
            <div class="border-b border-white/20 grid grid-cols-2 sm:grid-cols-5 gap-1 p-2">
                {#each presets as preset}
                    <Button 
                        variant="outline" 
                        size="sm"
                        class="border-white/20 hover:bg-[#ff6b00]/10 hover:border-[#ff6b00]"
                        on:click={() => selectPreset(preset)}
                    >
                        {preset.label}
                    </Button>
                {/each}
            </div>
            <div class="p-3 border-b border-white/20 text-sm text-gray-400">
                {#if selectedRange.from && !selectedRange.to}
                    Zgjidhni datën e fundit
                {:else}
                    Zgjidhni datën e fillimit
                {/if}
            </div>
            <Calendar
                mode="range"
                selected={selectedRange}
                onSelect={handleSelect}
                numberOfMonths={2}
                class="border-white/20"
                weekStartsOn={1}
            />
        </PopoverContent>
    </Popover>
</div>

<style>
    :global(.calendar-grid) {
        background-color: #252525 !important;
    }
    
    :global(.calendar-day) {
        color: white !important;
    }
    
    :global(.calendar-day:hover) {
        background-color: rgba(255, 107, 0, 0.1) !important;
        color: #ff6b00 !important;
    }
    
    :global(.calendar-day.selected) {
        background-color: #ff6b00 !important;
        color: white !important;
    }
    
    :global(.calendar-day.in-range) {
        background-color: rgba(255, 107, 0, 0.1) !important;
        color: #ff6b00 !important;
    }
</style>

================
File: src/lib/components/ui/dialog/dialog-content.svelte
================
<script>
	import { Dialog as DialogPrimitive } from "bits-ui";
	import Cross2 from "svelte-radix/Cross2.svelte";
	import * as Dialog from "./index.js";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let transition = flyAndScale;
	export let transitionConfig = {
		duration: 200,
	};
	export { className as class };
</script>

<Dialog.Portal>
	<Dialog.Overlay />
	<DialogPrimitive.Content
		{transition}
		{transitionConfig}
		class={cn(
			"bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full",
			className
		)}
		{...$$restProps}
	>
		<slot />
		<DialogPrimitive.Close
			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
		>
			<Cross2 class="h-4 w-4" />
			<span class="sr-only">Close</span>
		</DialogPrimitive.Close>
	</DialogPrimitive.Content>
</Dialog.Portal>

================
File: src/lib/components/ui/dialog/dialog-description.svelte
================
<script>
	import { Dialog as DialogPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<DialogPrimitive.Description
	class={cn("text-muted-foreground text-sm", className)}
	{...$$restProps}
>
	<slot />
</DialogPrimitive.Description>

================
File: src/lib/components/ui/dialog/dialog-footer.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div
	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
	{...$$restProps}
>
	<slot />
</div>

================
File: src/lib/components/ui/dialog/dialog-header.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
	<slot />
</div>

================
File: src/lib/components/ui/dialog/dialog-overlay.svelte
================
<script>
	import { Dialog as DialogPrimitive } from "bits-ui";
	import { fade } from "svelte/transition";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let transition = fade;
	export let transitionConfig = {
		duration: 150,
	};
	export { className as class };
</script>

<DialogPrimitive.Overlay
	{transition}
	{transitionConfig}
	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ", className)}
	{...$$restProps}
/>

================
File: src/lib/components/ui/dialog/dialog-portal.svelte
================
<script>
	import { Dialog as DialogPrimitive } from "bits-ui";
</script>

<DialogPrimitive.Portal {...$$restProps}>
	<slot />
</DialogPrimitive.Portal>

================
File: src/lib/components/ui/dialog/dialog-title.svelte
================
<script>
	import { Dialog as DialogPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<DialogPrimitive.Title
	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
	{...$$restProps}
>
	<slot />
</DialogPrimitive.Title>

================
File: src/lib/components/ui/dialog/index.js
================
import { Dialog as DialogPrimitive } from "bits-ui";
import Title from "./dialog-title.svelte";
import Portal from "./dialog-portal.svelte";
import Footer from "./dialog-footer.svelte";
import Header from "./dialog-header.svelte";
import Overlay from "./dialog-overlay.svelte";
import Content from "./dialog-content.svelte";
import Description from "./dialog-description.svelte";
const Root = DialogPrimitive.Root;
const Trigger = DialogPrimitive.Trigger;
const Close = DialogPrimitive.Close;
export {
	Root,
	Title,
	Portal,
	Footer,
	Header,
	Trigger,
	Overlay,
	Content,
	Description,
	Close,
	//
	Root as Dialog,
	Title as DialogTitle,
	Portal as DialogPortal,
	Footer as DialogFooter,
	Header as DialogHeader,
	Trigger as DialogTrigger,
	Overlay as DialogOverlay,
	Content as DialogContent,
	Description as DialogDescription,
	Close as DialogClose,
};

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import Check from "svelte-radix/Check.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let checked = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.CheckboxItem
	bind:checked
	class={cn(
		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
		className
	)}
	{...$$restProps}
	on:click
	on:keydown
	on:focusin
	on:focusout
	on:pointerdown
	on:pointerleave
	on:pointermove
>
	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
		<DropdownMenuPrimitive.CheckboxIndicator>
			<Check class="h-4 w-4" />
		</DropdownMenuPrimitive.CheckboxIndicator>
	</span>
	<slot />
</DropdownMenuPrimitive.CheckboxItem>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let sideOffset = 4;
	export let transition = flyAndScale;
	export let transitionConfig = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.Content
	{transition}
	{transitionConfig}
	{sideOffset}
	class={cn(
		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
		className
	)}
	{...$$restProps}
	on:keydown
>
	<slot />
</DropdownMenuPrimitive.Content>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let inset = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.Item
	class={cn(
		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
		inset && "pl-8",
		className
	)}
	on:click
	on:keydown
	on:focusin
	on:focusout
	on:pointerdown
	on:pointerleave
	on:pointermove
	{...$$restProps}
>
	<slot />
</DropdownMenuPrimitive.Item>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let inset = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.Label
	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
	{...$$restProps}
>
	<slot />
</DropdownMenuPrimitive.Label>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	export let value = undefined;
</script>

<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
	<slot />
</DropdownMenuPrimitive.RadioGroup>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import DotFilled from "svelte-radix/DotFilled.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let value;
	export { className as class };
</script>

<DropdownMenuPrimitive.RadioItem
	class={cn(
		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
		className
	)}
	{value}
	{...$$restProps}
	on:click
	on:keydown
	on:focusin
	on:focusout
	on:pointerdown
	on:pointerleave
	on:pointermove
>
	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
		<DropdownMenuPrimitive.RadioIndicator>
			<DotFilled class="h-4 w-4 fill-current" />
		</DropdownMenuPrimitive.RadioIndicator>
	</span>
	<slot />
</DropdownMenuPrimitive.RadioItem>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.Separator
	class={cn("bg-muted -mx-1 my-1 h-px", className)}
	{...$$restProps}
/>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
	<slot />
</span>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let transition = flyAndScale;
	export let transitionConfig = {
		x: -10,
		y: 0,
	};
	export { className as class };
</script>

<DropdownMenuPrimitive.SubContent
	{transition}
	{transitionConfig}
	class={cn(
		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
		className
	)}
	{...$$restProps}
	on:keydown
	on:focusout
	on:pointermove
>
	<slot />
</DropdownMenuPrimitive.SubContent>

================
File: src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
================
<script>
	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
	import ChevronRight from "svelte-radix/ChevronRight.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let inset = undefined;
	export { className as class };
</script>

<DropdownMenuPrimitive.SubTrigger
	class={cn(
		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
		inset && "pl-8",
		className
	)}
	{...$$restProps}
	on:click
	on:keydown
	on:focusin
	on:focusout
	on:pointerleave
	on:pointermove
>
	<slot />
	<ChevronRight class="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>

================
File: src/lib/components/ui/dropdown-menu/index.js
================
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
import Item from "./dropdown-menu-item.svelte";
import Label from "./dropdown-menu-label.svelte";
import Content from "./dropdown-menu-content.svelte";
import Shortcut from "./dropdown-menu-shortcut.svelte";
import RadioItem from "./dropdown-menu-radio-item.svelte";
import Separator from "./dropdown-menu-separator.svelte";
import RadioGroup from "./dropdown-menu-radio-group.svelte";
import SubContent from "./dropdown-menu-sub-content.svelte";
import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root;
const Trigger = DropdownMenuPrimitive.Trigger;
const Group = DropdownMenuPrimitive.Group;
export {
	Sub,
	Root,
	Item,
	Label,
	Group,
	Trigger,
	Content,
	Shortcut,
	Separator,
	RadioItem,
	SubContent,
	SubTrigger,
	RadioGroup,
	CheckboxItem,
	//
	Root as DropdownMenu,
	Sub as DropdownMenuSub,
	Item as DropdownMenuItem,
	Label as DropdownMenuLabel,
	Group as DropdownMenuGroup,
	Content as DropdownMenuContent,
	Trigger as DropdownMenuTrigger,
	Shortcut as DropdownMenuShortcut,
	RadioItem as DropdownMenuRadioItem,
	Separator as DropdownMenuSeparator,
	RadioGroup as DropdownMenuRadioGroup,
	SubContent as DropdownMenuSubContent,
	SubTrigger as DropdownMenuSubTrigger,
	CheckboxItem as DropdownMenuCheckboxItem,
};

================
File: src/lib/components/ui/input/index.js
================
import Root from "./input.svelte";
export {
	Root,
	//
	Root as Input,
};

================
File: src/lib/components/ui/input/input.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let value = undefined;
	export { className as class };
	export let readonly = undefined;
</script>

<input
	class={cn(
		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
		className
	)}
	bind:value
	{readonly}
	on:blur
	on:change
	on:click
	on:focus
	on:focusin
	on:focusout
	on:keydown
	on:keypress
	on:keyup
	on:mouseover
	on:mouseenter
	on:mouseleave
	on:mousemove
	on:paste
	on:input
	on:wheel|passive
	{...$$restProps}
/>

================
File: src/lib/components/ui/label/index.js
================
import Root from "./label.svelte";
export {
	Root,
	//
	Root as Label,
};

================
File: src/lib/components/ui/label/label.svelte
================
<script>
	import { Label as LabelPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<LabelPrimitive.Root
	class={cn(
		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
		className
	)}
	{...$$restProps}
>
	<slot />
</LabelPrimitive.Root>

================
File: src/lib/components/ui/popover/index.js
================
import { Popover as PopoverPrimitive } from "bits-ui";
import Content from "./popover-content.svelte";
const Root = PopoverPrimitive.Root;
const Trigger = PopoverPrimitive.Trigger;
const Close = PopoverPrimitive.Close;
export {
	Root,
	Content,
	Trigger,
	Close,
	//
	Root as Popover,
	Content as PopoverContent,
	Trigger as PopoverTrigger,
	Close as PopoverClose,
};

================
File: src/lib/components/ui/popover/popover-content.svelte
================
<script>
	import { Popover as PopoverPrimitive } from "bits-ui";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let transition = flyAndScale;
	export let transitionConfig = undefined;
	export let align = "center";
	export let sideOffset = 4;
	export { className as class };
</script>

<PopoverPrimitive.Content
	{transition}
	{transitionConfig}
	{align}
	{sideOffset}
	{...$$restProps}
	class={cn(
		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
		className
	)}
>
	<slot />
</PopoverPrimitive.Content>

================
File: src/lib/components/ui/select/index.js
================
import { Select as SelectPrimitive } from "bits-ui";
import Label from "./select-label.svelte";
import Item from "./select-item.svelte";
import Content from "./select-content.svelte";
import Trigger from "./select-trigger.svelte";
import Separator from "./select-separator.svelte";
const Root = SelectPrimitive.Root;
const Group = SelectPrimitive.Group;
const Input = SelectPrimitive.Input;
const Value = SelectPrimitive.Value;
export {
	Root,
	Item,
	Group,
	Input,
	Label,
	Value,
	Content,
	Trigger,
	Separator,
	//
	Root as Select,
	Item as SelectItem,
	Group as SelectGroup,
	Input as SelectInput,
	Label as SelectLabel,
	Value as SelectValue,
	Content as SelectContent,
	Trigger as SelectTrigger,
	Separator as SelectSeparator,
};

================
File: src/lib/components/ui/select/select-content.svelte
================
<script>
	import { Select as SelectPrimitive } from "bits-ui";
	import { scale } from "svelte/transition";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let sideOffset = 4;
	export let inTransition = flyAndScale;
	export let inTransitionConfig = undefined;
	export let outTransition = scale;
	export let outTransitionConfig = {
		start: 0.95,
		opacity: 0,
		duration: 50,
	};
	export { className as class };
</script>

<SelectPrimitive.Content
	{inTransition}
	{inTransitionConfig}
	{outTransition}
	{outTransitionConfig}
	{sideOffset}
	class={cn(
		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md focus:outline-none",
		className
	)}
	{...$$restProps}
>
	<div class="w-full p-1">
		<slot />
	</div>
</SelectPrimitive.Content>

================
File: src/lib/components/ui/select/select-item.svelte
================
<script>
	import { Select as SelectPrimitive } from "bits-ui";
	import Check from "svelte-radix/Check.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let value;
	export let label = undefined;
	export let disabled = undefined;
	export { className as class };
</script>

<SelectPrimitive.Item
	{value}
	{disabled}
	{label}
	class={cn(
		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
		className
	)}
	{...$$restProps}
	on:click
	on:pointermove
	on:focusin
>
	<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
		<SelectPrimitive.ItemIndicator>
			<Check class="h-4 w-4" />
		</SelectPrimitive.ItemIndicator>
	</span>
	<slot>
		{label || value}
	</slot>
</SelectPrimitive.Item>

================
File: src/lib/components/ui/select/select-label.svelte
================
<script>
	import { Select as SelectPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<SelectPrimitive.Label class={cn("px-2 py-1.5 text-sm font-semibold", className)} {...$$restProps}>
	<slot />
</SelectPrimitive.Label>

================
File: src/lib/components/ui/select/select-separator.svelte
================
<script>
	import { Select as SelectPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />

================
File: src/lib/components/ui/select/select-trigger.svelte
================
<script>
	import { Select as SelectPrimitive } from "bits-ui";
	import CaretSort from "svelte-radix/CaretSort.svelte";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<SelectPrimitive.Trigger
	class={cn(
		"border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
		className
	)}
	{...$$restProps}
>
	<slot />
	<div>
		<CaretSort class="h-4 w-4 opacity-50" />
	</div>
</SelectPrimitive.Trigger>

================
File: src/lib/components/ui/separator/index.js
================
import Root from "./separator.svelte";
export {
	Root,
	//
	Root as Separator,
};

================
File: src/lib/components/ui/separator/separator.svelte
================
<script>
	import { Separator as SeparatorPrimitive } from "bits-ui";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let orientation = "horizontal";
	export let decorative = undefined;
	export { className as class };
</script>

<SeparatorPrimitive.Root
	class={cn(
		"bg-border shrink-0",
		orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
		className
	)}
	{orientation}
	{decorative}
	{...$$restProps}
/>

================
File: src/lib/components/ui/table/index.js
================
import Root from "./table.svelte";
import Body from "./table-body.svelte";
import Caption from "./table-caption.svelte";
import Cell from "./table-cell.svelte";
import Footer from "./table-footer.svelte";
import Head from "./table-head.svelte";
import Header from "./table-header.svelte";
import Row from "./table-row.svelte";
export {
	Root,
	Body,
	Caption,
	Cell,
	Footer,
	Head,
	Header,
	Row,
	//
	Root as Table,
	Body as TableBody,
	Caption as TableCaption,
	Cell as TableCell,
	Footer as TableFooter,
	Head as TableHead,
	Header as TableHeader,
	Row as TableRow,
};

================
File: src/lib/components/ui/table/table-body.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
	<slot />
</tbody>

================
File: src/lib/components/ui/table/table-caption.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<caption class={cn("text-muted-foreground mt-4 text-sm", className)} {...$$restProps}>
	<slot />
</caption>

================
File: src/lib/components/ui/table/table-cell.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<td
	class={cn(
		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
		className
	)}
	{...$$restProps}
	on:click
	on:keydown
>
	<slot />
</td>

================
File: src/lib/components/ui/table/table-footer.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<tfoot class={cn("bg-muted/50 text-primary-foreground font-medium", className)} {...$$restProps}>
	<slot />
</tfoot>

================
File: src/lib/components/ui/table/table-head.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<th
	class={cn(
		"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
		className
	)}
	{...$$restProps}
>
	<slot />
</th>

================
File: src/lib/components/ui/table/table-header.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
	<slot />
</thead>

================
File: src/lib/components/ui/table/table-row.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<tr
	class={cn(
		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
		className
	)}
	{...$$restProps}
	on:click
	on:keydown
>
	<slot />
</tr>

================
File: src/lib/components/ui/table/table.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export { className as class };
</script>

<div class="relative w-full overflow-auto">
	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
		<slot />
	</table>
</div>

================
File: src/lib/components/ui/textarea/index.js
================
import Root from "./textarea.svelte";
export {
	Root,
	//
	Root as Textarea,
};

================
File: src/lib/components/ui/textarea/textarea.svelte
================
<script>
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let value = undefined;
	export { className as class };
	export let readonly = undefined;
</script>

<textarea
	class={cn(
		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
		className
	)}
	bind:value
	{readonly}
	on:blur
	on:change
	on:click
	on:focus
	on:keydown
	on:keypress
	on:keyup
	on:mouseover
	on:mouseenter
	on:mouseleave
	on:paste
	on:input
	{...$$restProps}
></textarea>

================
File: src/lib/components/ui/toggle/index.js
================
import { tv } from "tailwind-variants";
import Root from "./toggle.svelte";
export const toggleVariants = tv({
	base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
	variants: {
		variant: {
			default: "bg-transparent",
			outline:
				"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
		},
		size: {
			default: "h-9 px-3",
			sm: "h-8 px-2",
			lg: "h-10 px-3",
		},
	},
	defaultVariants: {
		variant: "default",
		size: "default",
	},
});
export {
	Root,
	//
	Root as Toggle,
};

================
File: src/lib/components/ui/toggle/toggle.svelte
================
<script>
	import { Toggle as TogglePrimitive } from "bits-ui";
	import { toggleVariants } from "./index.js";
	import { cn } from "$lib/utils.js";
	let className = undefined;
	export let variant = "default";
	export let size = "default";
	export let pressed = undefined;
	export { className as class };
</script>

<TogglePrimitive.Root
	bind:pressed
	class={cn(toggleVariants({ variant, size, className }))}
	{...$$restProps}
	on:click
	on:keydown
>
	<slot />
</TogglePrimitive.Root>

================
File: src/lib/components/ui/tooltip/index.js
================
import { Tooltip as TooltipPrimitive } from "bits-ui";
import Content from "./tooltip-content.svelte";
const Root = TooltipPrimitive.Root;
const Trigger = TooltipPrimitive.Trigger;
export {
	Root,
	Trigger,
	Content,
	//
	Root as Tooltip,
	Content as TooltipContent,
	Trigger as TooltipTrigger,
};

================
File: src/lib/components/ui/tooltip/tooltip-content.svelte
================
<script>
	import { Tooltip as TooltipPrimitive } from "bits-ui";
	import { cn, flyAndScale } from "$lib/utils.js";
	let className = undefined;
	export let sideOffset = 4;
	export let transition = flyAndScale;
	export let transitionConfig = {
		y: 8,
		duration: 150,
	};
	export { className as class };
</script>

<TooltipPrimitive.Content
	{transition}
	{transitionConfig}
	{sideOffset}
	class={cn(
		"bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
		className
	)}
	{...$$restProps}
>
	<slot />
</TooltipPrimitive.Content>

================
File: src/lib/i18n.js
================
import * as runtime from '$lib/paraglide/runtime';
import { createI18n } from '@inlang/paraglide-sveltekit';
export const i18n = createI18n(runtime);

================
File: src/lib/stores/feedbackStore.js
================
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

const STORAGE_KEY = 'feedback-store';

const defaultState = {
    department: '',
    brand: '',
    currentStep: 1,
    questionIndex: 0,
    totalQuestions: [],
    completedQuestions: {},
    lastFeedbackDate: null,
    roundsPlayed: 0,
    isComplete: false,
    progress: 0,
    currentRoundStarted: false,
    currentRound: 1,
    answers: {}
};

const initialState = {
    roundsPlayed: 0,
    isComplete: false,
    progress: 0,
    currentRoundStarted: false,
    currentRound: 1,
    answers: {},
    feedbackShownForRounds: {}, // Track which rounds we've shown feedback for
    lastFeedbackDate: null // Track when feedback was last shown
};

const createFeedbackStore = () => {
    // Load initial state from localStorage if available
    const storedState = browser && localStorage.getItem(STORAGE_KEY);
    const initialStateWithStorage = storedState ? JSON.parse(storedState) : initialState;

    const { subscribe, set, update } = writable({ ...defaultState, ...initialStateWithStorage });

    return {
        subscribe,
        updateState: (newState) => update(state => {
            const updatedState = { ...state, ...newState };
            if (browser) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedState));
            }
            return updatedState;
        }),
        startNewRound: () => {
            update(state => {
                const updatedState = { 
                    ...state,
                    currentRoundStarted: true
                };
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedState));
                }
                return updatedState;
            });
        },
        completeRound: () => {
            update(state => {
                const updatedState = {
                    ...state,
                    roundsPlayed: state.roundsPlayed + 1,
                    currentRoundStarted: false,
                    currentRound: state.currentRound + 1,
                    lastFeedbackDate: new Date().toISOString() // Update last feedback date
                };
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedState));
                }
                return updatedState;
            });
        },
        completeQuestion: (question, answer) => {
            update(state => {
                const newCompletedQuestions = { ...state.completedQuestions, [question]: answer };
                const totalAnswered = Object.keys(newCompletedQuestions).length;
                const totalQuestions = state.totalQuestions.length + 2; // +2 for department and brand
                const progress = Math.round((totalAnswered / totalQuestions) * 100);
                
                const updatedState = {
                    ...state,
                    completedQuestions: newCompletedQuestions,
                    progress,
                    questionIndex: state.questionIndex + (question === 'department' || question === 'brand' ? 0 : 1),
                    isComplete: totalAnswered === totalQuestions,
                    answers: { ...state.answers, [question]: answer }
                };
                
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedState));
                }
                return updatedState;
            });
        },
        setTotalQuestions: (questions) => {
            update(state => {
                const updatedState = { ...state, totalQuestions: questions };
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedState));
                }
                return updatedState;
            });
        },
        reset: () => {
            const newState = { ...defaultState, ...initialState };
            if (browser) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
            }
            set(newState);
        },
        shouldShowFeedback: () => {
            let shouldShow = false;
            update(state => {
                if (!state.lastFeedbackDate) {
                    shouldShow = true;
                    return state;
                }

                const lastDate = new Date(state.lastFeedbackDate);
                const today = new Date();
                
                // Check if it's a different day
                shouldShow = lastDate.getDate() !== today.getDate() ||
                           lastDate.getMonth() !== today.getMonth() ||
                           lastDate.getFullYear() !== today.getFullYear();
                
                return state;
            });
            return shouldShow;
        },
        getCurrentQuestions: () => {
            let currentQuestions = [];
            update(state => {
                if (state.totalQuestions.length > 0) {
                    const startIdx = state.questionIndex;
                    const endIdx = Math.min(startIdx + 2, state.totalQuestions.length);
                    currentQuestions = state.totalQuestions
                        .slice(startIdx, endIdx)
                        .filter(q => !state.completedQuestions[q]);
                }
                return state;
            });
            return currentQuestions;
        },
        getProgress: () => {
            let progress = 0;
            update(state => {
                const totalAnswered = Object.keys(state.completedQuestions).length;
                const totalQuestions = state.totalQuestions.length + 2; // +2 for department and brand
                progress = Math.round((totalAnswered / totalQuestions) * 100);
                return state;
            });
            return progress;
        },
        getCurrentRound: () => {
            let currentState;
            subscribe(store => {
                currentState = store;
            })();
            return currentState.currentRound;
        },
        setRound: (round) => update(store => {
            store.currentRound = round;
            console.log('🔄 Feedback Store: Round set to', store.currentRound);
            if (browser) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
            }
            return store;
        }),
        saveAnswer: (questionId, answer) => update(store => {
            store.answers[questionId] = answer;
            if (browser) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
            }
            return store;
        }),
        incrementRound: () => {
            update(state => {
                const newState = {
                    ...state,
                    currentRound: state.currentRound + 1,
                    roundsPlayed: state.roundsPlayed + 1
                };
                console.log('🔄 Feedback Store: Incrementing round', {
                    oldRound: state.currentRound,
                    newRound: newState.currentRound
                });
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
                }
                return newState;
            });
        },
        markFeedbackShown: (round) => {
            update(state => {
                const newState = {
                    ...state,
                    feedbackShownForRounds: {
                        ...state.feedbackShownForRounds,
                        [round]: true
                    }
                };
                console.log('📝 Feedback Store: Marked feedback shown for round', round);
                if (browser) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
                }
                return newState;
            });
        },
        isFeedbackShown: (round) => {
            let currentState;
            subscribe(store => {
                currentState = store;
            })();
            return !!currentState.feedbackShownForRounds[round];
        },
    };
};

export const feedbackStore = createFeedbackStore();

================
File: src/lib/stores/formEditorStore.js
================
import { writable } from 'svelte/store';

const initialForms = {
    sales: {
        questions: [
            { id: 1, type: 'rating', text: 'Si e vlerësoni eksperiencën e blerjes?', order: 0 },
            { id: 2, type: 'rating', text: 'A ishte stafi i dobishëm?', order: 1 },
            { id: 3, type: 'rating', text: 'Sa i kënaqur jeni me çmimin?', order: 2 },
            { id: 4, type: 'rating', text: 'A do ta rekomandonit tek të tjerët?', order: 3 }
        ],
        brands: [
            { id: 'volkswagen', name: 'Volkswagen', image: '/images/brands/volkswagen.png' },
            { id: 'audi', name: 'Audi', image: '/images/brands/audi.png' },
            { id: 'seat', name: 'Seat', image: '/images/brands/seat.png' },
            { id: 'skoda', name: 'Skoda', image: '/images/brands/skoda.png' }
        ]
    },
    service: {
        questions: [
            { id: 1, type: 'rating', text: 'Sa i kënaqur jeni me shërbimin?', order: 0 },
            { id: 2, type: 'rating', text: 'A u zgjidh problemi juaj?', order: 1 },
            { id: 3, type: 'comment', text: 'Çfarë mund të përmirësojmë?', order: 2 },
            { id: 4, type: 'rating', text: 'A do ta rekomandonit shërbimin tonë?', order: 3 }
        ],
        brands: [
            { id: 'volkswagen', name: 'Volkswagen', image: '/images/brands/volkswagen.png' },
            { id: 'audi', name: 'Audi', image: '/images/brands/audi.png' },
            { id: 'seat', name: 'Seat', image: '/images/brands/seat.png' },
            { id: 'skoda', name: 'Skoda', image: '/images/brands/skoda.png' }
        ]
    }
};

function createFormEditorStore() {
    const { subscribe, set, update } = writable({
        currentDepartment: 'sales',
        forms: initialForms,
        history: []
    });

    return {
        subscribe,
        setDepartment: (department) => update(state => ({ ...state, currentDepartment: department })),
        
        addQuestion: (question) => update(state => {
            const currentQuestions = state.forms[state.currentDepartment].questions;
            const newQuestion = {
                ...question,
                id: Math.max(...currentQuestions.map(q => q.id), 0) + 1,
                order: currentQuestions.length
            };
            
            return {
                ...state,
                forms: {
                    ...state.forms,
                    [state.currentDepartment]: {
                        ...state.forms[state.currentDepartment],
                        questions: [...currentQuestions, newQuestion]
                    }
                }
            };
        }),

        updateQuestion: (questionId, updates) => update(state => {
            const questions = state.forms[state.currentDepartment].questions.map(q =>
                q.id === questionId ? { ...q, ...updates } : q
            );
            
            return {
                ...state,
                forms: {
                    ...state.forms,
                    [state.currentDepartment]: {
                        ...state.forms[state.currentDepartment],
                        questions
                    }
                }
            };
        }),

        removeQuestion: (questionId) => update(state => {
            const questions = state.forms[state.currentDepartment].questions
                .filter(q => q.id !== questionId)
                .map((q, index) => ({ ...q, order: index }));
            
            return {
                ...state,
                forms: {
                    ...state.forms,
                    [state.currentDepartment]: {
                        ...state.forms[state.currentDepartment],
                        questions
                    }
                }
            };
        }),

        reorderQuestions: (questions) => update(state => ({
            ...state,
            forms: {
                ...state.forms,
                [state.currentDepartment]: {
                    ...state.forms[state.currentDepartment],
                    questions
                }
            }
        })),

        addBrand: (brand) => update(state => {
            const brands = state.forms[state.currentDepartment].brands;
            return {
                ...state,
                forms: {
                    ...state.forms,
                    [state.currentDepartment]: {
                        ...state.forms[state.currentDepartment],
                        brands: [...brands, brand]
                    }
                }
            };
        }),

        removeBrand: (brandId) => update(state => {
            const brands = state.forms[state.currentDepartment].brands
                .filter(b => b.id !== brandId);
            
            return {
                ...state,
                forms: {
                    ...state.forms,
                    [state.currentDepartment]: {
                        ...state.forms[state.currentDepartment],
                        brands
                    }
                }
            };
        }),

        saveForm: () => update(state => {
            const currentForm = state.forms[state.currentDepartment];
            return {
                ...state,
                history: [
                    ...state.history,
                    {
                        department: state.currentDepartment,
                        timestamp: new Date().toISOString(),
                        questions: [...currentForm.questions],
                        brands: [...currentForm.brands]
                    }
                ]
            };
        }),

        reset: () => set({ currentDepartment: 'sales', forms: initialForms, history: [] })
    };
}

export const formEditorStore = createFormEditorStore();

================
File: src/lib/stores/gameStore.js
================
import { writable } from 'svelte/store';


function createGameStore() {
    const { subscribe, set, update } = writable({
        username: '',
        totalScore: 0,
        gameHistory: [],
        stats: {
            gamesPlayed: 0,
            bestScores: {
                puzzle: 0,
                race: 0,
                pairs: 0,
                trivia: 0
            },
            lastPlayed: null,
            playStreak: 0
        }
    });

    function updatePlayStreak(store) {
        const now = new Date();
        const lastPlayed = store.stats.lastPlayed ? new Date(store.stats.lastPlayed) : null;
        
        if (!lastPlayed) {
            return 1;
        }

        const daysSinceLastPlay = Math.floor((now - lastPlayed) / (1000 * 60 * 60 * 24));
        
        if (daysSinceLastPlay === 1) {
            return store.stats.playStreak + 1;
        } else if (daysSinceLastPlay > 1) {
            return 1;
        }
        
        return store.stats.playStreak;
    }

    return {
        subscribe,
        setUsername: (username) => {
            const savedData = localStorage.getItem(`gameData_${username}`);
            if (savedData) {
                set(JSON.parse(savedData));
            } else {
                update(store => ({
                    ...store,
                    username,
                    totalScore: 0,
                    gameHistory: [],
                    stats: {
                        gamesPlayed: 0,
                        bestScores: {
                            puzzle: 0,
                            race: 0,
                            pairs: 0,
                            trivia: 0
                        },
                        lastPlayed: null,
                        playStreak: 0
                    }
                }));
            }
        },
        addScore: (game, score) => {
            update(store => {
                const now = new Date().toISOString();
                const newGameHistory = [...store.gameHistory, {
                    game,
                    score,
                    timestamp: now
                }];

                const newStats = {
                    ...store.stats,
                    gamesPlayed: store.stats.gamesPlayed + 1,
                    bestScores: {
                        ...store.stats.bestScores,
                        [game]: Math.max(store.stats.bestScores[game], score)
                    },
                    lastPlayed: now,
                    playStreak: updatePlayStreak(store)
                };

                const newTotalScore = store.totalScore + score;

                const newStore = {
                    ...store,
                    totalScore: newTotalScore,
                    gameHistory: newGameHistory,
                    stats: newStats
                };

                // Save to localStorage
                localStorage.setItem(`gameData_${store.username}`, JSON.stringify(newStore));

                return newStore;
            });
        },
        getStats: () => {
            let stats;
            update(store => {
                stats = store.stats;
                return store;
            });
            return stats;
        },
        getGameHistory: () => {
            let history;
            update(store => {
                history = store.gameHistory;
                return store;
            });
            return history;
        }
    };
}

export const gameStore = createGameStore();

================
File: src/lib/stores/score.js
================
import { writable } from 'svelte/store';

// Initialize the score from localStorage or default to 0
const storedScore = typeof localStorage !== 'undefined' ? localStorage.getItem('totalScore') : '0';
const initialScore = parseInt(storedScore) || 0;

// Create the score store
const score = writable(initialScore);

// Subscribe to changes and update localStorage
if (typeof window !== 'undefined') {
    score.subscribe(value => {
        localStorage.setItem('totalScore', value.toString());
    });
}

// Helper function to add points
function addPoints(points) {
    score.update(current => Math.max(0, current + points));
}

export { score, addPoints };

================
File: src/lib/stores/screensaver.js
================
import { writable } from 'svelte/store';

const INACTIVITY_TIMEOUT = 180000; // 3 minutes in milliseconds

function createScreensaverStore() {
    const { subscribe, set } = writable(false);
    let timer;

    function resetTimer() {
        if (timer) clearTimeout(timer);
        set(false);
        timer = setTimeout(() => set(true), INACTIVITY_TIMEOUT);
    }

    function initialize() {
        // Reset timer on various user interactions
        const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
        
        events.forEach(event => {
            window.addEventListener(event, resetTimer, { passive: true });
        });

        // Initial timer setup
        resetTimer();

        // Cleanup function
        return () => {
            if (timer) clearTimeout(timer);
            events.forEach(event => {
                window.removeEventListener(event, resetTimer);
            });
        };
    }

    return {
        subscribe,
        initialize,
        reset: resetTimer
    };
}

export const screensaver = createScreensaverStore();

================
File: src/lib/stores/sessionStore.js
================
import { writable } from 'svelte/store';
import { goto } from '$app/navigation';

function createSessionStore() {
    const { subscribe, set, update } = writable({
        isAuthenticated: false,
        user: null
    });

    return {
        subscribe,
        login: (username) => {
            localStorage.setItem('username', username);
            set({
                isAuthenticated: true,
                user: { username }
            });
        },
        logout: () => {
            localStorage.removeItem('username');
            set({
                isAuthenticated: false,
                user: null
            });
            goto('/login');
        },
        checkAuth: () => {
            const username = localStorage.getItem('username');
            if (username) {
                set({
                    isAuthenticated: true,
                    user: { username }
                });
                return true;
            }
            return false;
        }
    };
}

export const session = createSessionStore();

================
File: src/lib/stores/theme.js
================
// theme.js

// Example: Exporting a default theme object
import { writable } from 'svelte/store';

// Create a proper Svelte store for theme
function createThemeStore() {
    // Get initial theme from localStorage or default to 'light'
    const storedTheme = typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : 'light';
    const initialTheme = storedTheme || 'light';
    
    const { subscribe, set, update } = writable(initialTheme);

    return {
        subscribe,
        set: (value) => {
            if (typeof localStorage !== 'undefined') {
                localStorage.setItem('theme', value);
            }
            set(value);
        },
        toggle: () => update(theme => {
            const newTheme = theme === 'light' ? 'dark' : 'light';
            if (typeof localStorage !== 'undefined') {
                localStorage.setItem('theme', newTheme);
            }
            return newTheme;
        })
    };
}

export const theme = createThemeStore();

// You can expand this file with more theme-related logic or data as needed.

================
File: src/lib/utils.js
================
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { cubicOut } from "svelte/easing";

export function cn(...inputs) {
	return twMerge(clsx(inputs));
}

export const flyAndScale = (
	node,
	params = { y: -8, x: 0, start: 0.95, duration: 150 }
) => {
	const style = getComputedStyle(node);
	const transform = style.transform === "none" ? "" : style.transform;

	const scaleConversion = (valueA, scaleA, scaleB) => {
		const [minA, maxA] = scaleA;
		const [minB, maxB] = scaleB;

		const percentage = (valueA - minA) / (maxA - minA);
		const valueB = percentage * (maxB - minB) + minB;

		return valueB;
	};

	const styleToString = (style) => {
		return Object.keys(style).reduce((str, key) => {
			if (style[key] === undefined) return str;
			return str + `${key}:${style[key]};`;
		}, "");
	};

	return {
		duration: params.duration ?? 200,
		delay: 0,
		css: (t) => {
			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);

			return styleToString({
				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
				opacity: t
			});
		},
		easing: cubicOut
	};
};

================
File: src/routes/+layout.svelte
================
<script>
    import "../app.css";
    import { page } from '$app/stores';
    import { gameStore } from '$lib/stores/gameStore';
    import { onMount } from 'svelte';
    import Navbar from "$lib/components/navbar.svelte";
    import { theme } from '$lib/stores/theme';
    import { session } from '$lib/stores/sessionStore';
    import { goto } from '$app/navigation';
    import { screensaver } from '$lib/stores/screensaver';
    import Screensaver from '$lib/components/screensaver.svelte';

    let mounted = false;
    let username = '';
    let score;
    let showNav = true;
    let isAdmin = false;
    
    $: {
        if ($page.url.pathname.startsWith('/login')) {
            showNav = false;
        } else {
            showNav = true;
        }
        
        if ($page.url.pathname.startsWith('/login') || $page.url.pathname.startsWith('/admin')) {
            showNav = false;
            isAdmin = $page.url.pathname.startsWith('/admin');
        } else {
            showNav = true;
            isAdmin = false;
        }
    }
    
    // Subscribe to score changes
    gameStore.subscribe(state => {
        if (state.username) {
            score = state.totalScore || 0;
            username = state.username;
        }
    });

    onMount(() => {
        // Initialize theme from localStorage
        if (typeof localStorage !== 'undefined') {
            const storedTheme = localStorage.getItem('theme') || 'light';
            theme.set(storedTheme);
            document.documentElement.classList.toggle('dark', storedTheme === 'dark');
        }
        
        // Check authentication
        if (!session.checkAuth() && !$page.url.pathname.startsWith('/login')) {
            goto('/login');
        }
        
        username = localStorage.getItem('username');
        if (username) {
            gameStore.setUsername(username);
        }
        mounted = true;
        
        const cleanup = screensaver.initialize();
        return cleanup;
    });

    function handleLogout() {
        session.logout();
        localStorage.removeItem('username');
        window.location.href = '/login';
    }
</script>
  
{#if mounted}
<div class="min-h-screen flex flex-col bg-background text-foreground">
    {#if showNav && !isAdmin}
        <Navbar 
            {score}
            onLogout={handleLogout}
        />
    {/if}
    <div class="flex-1">
        <main class:pt-20={showNav && !isAdmin}>
            <Screensaver active={$screensaver} />
            <slot />
        </main>
    </div>
</div>
{/if}

<style>
    :global(html) {
        @apply transition-colors duration-300;
    }
</style>

================
File: src/routes/+page.svelte
================
<script>
    import { fade } from 'svelte/transition';
    import { Button } from "$lib/components/ui/button";
    import GameCard from "$lib/components/game-card.svelte";
    import Fa from 'svelte-fa';
    import { faXmark, faCar, faWrench, faCheck, faStar as fasStar, faComment } from '@fortawesome/free-solid-svg-icons';
    import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
    import { feedbackStore } from '$lib/stores/feedbackStore';
    import { onMount } from 'svelte';
    import { gameStore } from '$lib/stores/gameStore';
    import FeedbackModal from "$lib/components/FeedbackModal.svelte";

    let mounted = false;
    let username = '';
    let showFeedbackModal = false;
    
    const brands = [
        { id: 'volkswagen', name: 'Volkswagen', image: '/images/brands/volkswagen.png' },
        { id: 'audi', name: 'Audi', image: '/images/brands/audi.png' },
        { id: 'seat', name: 'Seat', image: '/images/brands/seat.png' },
        { id: 'skoda', name: 'Skoda', image: '/images/brands/skoda.png' }
    ];

    const questions = {
        sales: [
            'Si e vlerësoni eksperiencën e blerjes?',
            'A ishte stafi i dobishëm?',
            'Sa i kënaqur jeni me çmimin?',
            'A do ta rekomandonit tek të tjerët?'
        ],
        service: [
            'Si e vlerësoni eksperiencën e servisit?',
            'A ishte stafi i dobishëm?',
            'Sa i kënaqur jeni me shërbimin?',
            'A do ta rekomandonit tek të tjerët?'
        ]
    };

    const games = [
        {
            title: "PICK\nTHE\nPAIRS",
            href: "/games/pairs",
            image: "/images/games/pairs/cover.png"
        },
        {
            title: "PIECE\nTHE\nPUZZLE",
            href: "/games/puzzle",
            image: "/images/games/puzzle/cover.png"
        },
        {
            title: "RACE\nTHE\nROAD",
            href: "/games/race",
            image: "/images/games/race/cover.png"
        },
        {
            title: "CAR\nTRIVIA",
            href: "/games/trivia",
            image: "/images/games/trivia/cover.png"
        }
    ];

    let selectedDepartment = '';
    let selectedBrand = '';
    let ratings = {};
    let currentQuestions = [];
    let isSubmitting = false;

    $: if (selectedDepartment) {
        currentQuestions = questions[selectedDepartment] || [];
    }

    gameStore.subscribe(state => {
        username = state.username;
    });

    function handleDepartmentClick(dept) {
        selectedDepartment = dept;
    }

    function handleBrandClick(brand) {
        selectedBrand = brand;
    }

    function handleRatingClick(question, rating) {
        ratings[question] = rating;
    }

    async function handleSubmit() {
        if (!selectedDepartment || !selectedBrand || !Object.keys(ratings).length) return;

        isSubmitting = true;
        try {
            await feedbackStore.submitFeedback({
                department: selectedDepartment,
                brand: selectedBrand,
                ratings
            });
            
            // Reset form
            selectedDepartment = '';
            selectedBrand = '';
            ratings = {};
            currentQuestions = [];
        } finally {
            isSubmitting = false;
        }
    }
</script>

<div class="container mx-auto px-4 flex flex-col items-center justify-center min-h-[calc(100vh-5rem)]
            transition-colors duration-300">
    <div in:fade={{duration: 200, delay: 100}}>
        <h1 class="text-3xl font-bold mb-16 text-foreground">
            LET'S PLAY, {username.toUpperCase()}!
        </h1>
    </div>
    
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8 max-w-6xl w-full px-4 lg:px-8">
        {#each games as game, i}
            <div in:fade={{duration: 200, delay: 150 + i * 50}}>
                <GameCard {...game} />
            </div>
        {/each}
    </div>

    <div class="mt-20" in:fade={{duration: 200, delay: 350}}>
        <button
            class="flex items-center gap-2 px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg 
                   font-medium transition-colors"
            on:click={() => showFeedbackModal = true}
        >
            <Fa icon={faComment} class="text-lg" />
            Na ndihmoni të përmirësohemi
        </button>
    </div>
    <FeedbackModal bind:show={showFeedbackModal} />
</div>


<style>
    /* Custom scrollbar styles */
    :global(.overflow-y-auto::-webkit-scrollbar) {
        width: 8px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-track) {
        background: transparent;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb) {
        background: #27272a;
        border-radius: 4px;
    }
    :global(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
        background: #3f3f46;
    }
</style>

================
File: src/routes/admin/+layout.svelte
================
<script>
    import AdminNavbar from "$lib/components/admin-navbar.svelte";
</script>

<div class="min-h-screen bg-[#111111] flex flex-col">
    <AdminNavbar />
    <main class="flex-1">
        <slot />
    </main>
</div>

================
File: src/routes/admin/+page.svelte
================
<script>
    import { page } from "$app/stores";
    import { goto } from "$app/navigation";
    import { Fa } from 'svelte-fa';
    import { faEdit, faChartBar, faShieldAlt, faArrowRight } from '@fortawesome/free-solid-svg-icons';

    // Card data for admin pages
    const adminCards = [
        {
            title: "Editor Pyetesori",
            description: "Modifiko Pyetesorin e faqes se klienteve duke shtuar, edituar dhe hequr pyetje dhe marka makinash.",
            href: "/admin/form-editor",
            color: "from-blue-500/20 to-cyan-500/20 hover:from-blue-500/30 hover:to-cyan-500/30",
            icon: faEdit,
        },
        {
            title: "Tabela e Feedback-ut",
            description: "Shiko dhe analizo pergjigjet e klienteve ndaj pyetesorit. Eksporto pergjigjet e klienteve (Te fundit si dhe te kaluara).",
            href: "/admin/feedback",
            color: "from-green-500/20 to-emerald-500/20 hover:from-green-500/30 hover:to-emerald-500/30",
            icon: faChartBar,
        },
        {
            title: "Menaxhim Administratoresh",
            description: "Menaxho administratoret qe kane akses ne panelin e adminit. Ky opsion eshte vetem per superAdmin.",
            href: "/admin/users",
            color: "from-purple-500/20 to-pink-500/20 hover:from-purple-500/30 hover:to-pink-500/30",
            icon: faShieldAlt,
            stats: {
                label: "Admins Aktiv",
                value: "3"
            }
        }
    ];
</script>

<div class="container flex flex-col items-center justify-center mx-auto h-[calc(100vh-4.8rem)] gap-8 bg-[#111111] p-6">
    <!-- Welcome Section -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Mirë se vini në Panelin e Adminit</h1>
        <p class="text-gray-400">Zgjidhni një nga opsionet e mëposhtme për të menaxhuar sistemin.</p>
    </div>

    <!-- Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {#each adminCards as card}
            <button 
                class="group relative overflow-hidden rounded-xl bg-gradient-to-br {card.color} border border-white/10 p-6 text-left transition-all duration-300 hover:scale-[1.02] hover:shadow-xl"
                on:click={() => goto(card.href)}
            >
                <!-- Card Content -->
                <div class="relative z-10 h-full flex flex-col justify-start">
                    <!-- Header -->
                    <div class="flex items-center justify-between mb-4">
                        <div class="p-3 rounded-lg bg-white/10 backdrop-blur">
                            <Fa icon={card.icon} class="h-6 w-6 text-white" />
                        </div>
                        <Fa icon={faArrowRight} class="h-5 w-5 text-white/50 group-hover:text-white/80 transition-colors" />
                    </div>

                    <!-- Title & Description -->
                    <h2 class="text-xl font-semibold text-white mb-2">{card.title}</h2>
                    <p class="text-gray-300 text-sm mb-6 line-clamp-2">{card.description}</p>

                    <!-- Stats -->
                    {#if card.stats}
                    <div class="flex items-center justify-between pt-4 border-t border-white/10">
                        <span class="text-sm text-gray-400">{card.stats.label}</span>
                        <span class="text-lg font-semibold text-white">{card.stats.value}</span>
                    </div>
                    {/if}
                </div>

                <!-- Decorative Elements -->
                <div class="absolute -bottom-2 -right-2 w-32 h-32 bg-white/5 rounded-full blur-2xl transform group-hover:scale-150 transition-transform duration-500"></div>
                <div class="absolute -top-2 -left-2 w-24 h-24 bg-white/5 rounded-full blur-xl transform group-hover:scale-150 transition-transform duration-500"></div>
            </button>
        {/each}
    </div>
</div>

<style>
    /* Smooth transition for hover effects */
    button {
        transition: all 0.3s ease-in-out;
    }

    /* Custom scrollbar */
    :global(::-webkit-scrollbar) {
        width: 8px;
        height: 8px;
    }

    :global(::-webkit-scrollbar-track) {
        background: #1a1a1a;
    }

    :global(::-webkit-scrollbar-thumb) {
        background: #333;
        border-radius: 4px;
    }

    :global(::-webkit-scrollbar-thumb:hover) {
        background: #444;
    }
</style>

================
File: src/routes/admin/feedback/+page.svelte
================
<script>
    import { onMount } from 'svelte';
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { Badge } from "$lib/components/ui/badge";
    import { Tooltip, TooltipContent, TooltipTrigger } from "$lib/components/ui/tooltip";
    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "$lib/components/ui/select";
    import { Checkbox } from "$lib/components/ui/checkbox";
    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "$lib/components/ui/dialog";
    import { Fa } from 'svelte-fa';
    import { 
        faSearch, 
        faFilter,
        faCalendar,
        faSort,
        faColumns,
        faHistory,
        faFileExcel,
        faEye,
        faEyeSlash,
        faSortUp,
        faSortDown,
        faTag,
        faChevronRight,
        faCar,
        faBuilding,
        faNetworkWired,
        faXmark,
        faUser,
        faClock
    } from '@fortawesome/free-solid-svg-icons';
    import { fade, slide } from 'svelte/transition';
    import * as XLSX from 'xlsx';
    import { Separator } from "$lib/components/ui/separator";

    // Mock data
    const mockFormVersions = [
        { id: 1, editor: "Darien", department: "Shitje", date: "19/11/2024" },
        { id: 2, editor: "Admin", department: "Servis", date: "20/11/2024" }
    ];

    const mockQuestions = {
        sales: [
            "Si e vlerësoni eksperiencën tuaj të përgjithshme?",
            "Sa të kënaqur jeni me shërbimin e stafit?",
            "A do ta rekomandonit këtë dyqan?",
            "Komente shtesë"
        ],
        service: [
            "Si e vlerësoni cilësinë e shërbimit?",
            "Sa të kënaqur jeni me kohën e shërbimit?",
            "A do ta rekomandonit servisin tonë?",
            "Komente shtesë"
        ]
    };

    const mockResponses = [
        {
            id: 1,
            name: "John Doe",
            department: "Shitje",
            brand: "Volkswagen",
            ip: "192.168.1.100",
            date: "3/15/2024, 2:30:00 PM",
            responses: [5, 5, 5, "Shërbimi i shkëlqyer"],
            rating: 5
        },
        {
            id: 2,
            name: "Jane Smith",
            department: "Servis",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "3/16/2024, 9:15:00 AM",
            responses: [3, 4, 3, "Shërbim mesatar"],
            rating: 3
        },
        {
            id: 3,
            name: "Alice Johnson",
            department: "Shitje",
            brand: "Skoda",
            ip: "192.168.1.100",
            date: "3/17/2024, 11:45:00 AM",
            responses: [4, 5, 4, "Shumë i kënaqur me blerjen"],
            rating: 4
        },
        {
            id: 4,
            name: "Bob Wilson",
            department: "Servis",
            brand: "Volkswagen",
            ip: "192.168.1.101",
            date: "3/18/2024, 3:20:00 PM",
            responses: [5, 4, 5, "Shërbim i shpejtë dhe efikas"],
            rating: 5
        },
        {
            id: 5,
            name: "Emma Davis",
            department: "Shitje",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "3/19/2024, 10:00:00 AM",
            responses: [3, 3, 4, "Çmimet ishin pak të larta"],
            rating: 3
        },
        {
            id: 6,
            name: "Michael Brown",
            department: "Servis",
            brand: "Seat",
            ip: "192.168.1.100",
            date: "3/20/2024, 1:30:00 PM",
            responses: [4, 5, 4, "Stafi ishte shumë ndihmues"],
            rating: 4
        },
        {
            id: 7,
            name: "Olivia Taylor",
            department: "Shitje",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "3/21/2024, 4:45:00 PM",
            responses: [5, 5, 5, "Eksperiencë e pabesueshme"],
            rating: 5
        },
        {
            id: 8,
            name: "Daniel Martinez",
            department: "Servis",
            brand: "Skoda",
            ip: "192.168.1.101",
            date: "3/22/2024, 8:15:00 AM",
            responses: [4, 3, 4, "Shërbimi ishte i mirë por pak i ngadaltë"],
            rating: 4
        },
        {
            id: 9,
            name: "Sophia Anderson",
            department: "Shitje",
            brand: "Volkswagen",
            ip: "192.168.1.101",
            date: "3/23/2024, 12:00:00 PM",
            responses: [5, 4, 5, "Shumë i kënaqur me makinën e re"],
            rating: 5
        },
        {
            id: 10,
            name: "William Lee",
            department: "Servis",
            brand: "Audi",
            ip: "192.168.1.101",
            date: "3/24/2024, 2:30:00 PM",
            responses: [3, 4, 3, "Shërbimi ishte në rregull"],
            rating: 3
        },
        {
            id: 11,
            name: "Isabella Garcia",
            department: "Shitje",
            brand: "Seat",
            ip: "192.168.1.100",
            date: "3/25/2024, 9:45:00 AM",
            responses: [4, 5, 4, "Stafi ishte shumë i sjellshëm"],
            rating: 4
        },
        {
            id: 12,
            name: "James Rodriguez",
            department: "Servis",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "3/26/2024, 11:30:00 AM",
            responses: [5, 5, 5, "Shërbim i klasit të parë"],
            rating: 5
        },
        {
            id: 13,
            name: "Mia Hernandez",
            department: "Shitje",
            brand: "Skoda",
            ip: "192.168.1.100",
            date: "3/27/2024, 3:15:00 PM",
            responses: [4, 4, 4, "Eksperiencë e mirë e blerjes"],
            rating: 4
        },
        {
            id: 14,
            name: "Benjamin Moore",
            department: "Servis",
            brand: "Volkswagen",
            ip: "192.168.1.100",
            date: "3/28/2024, 10:00:00 AM",
            responses: [3, 3, 4, "Shërbimi ishte mesatar"],
            rating: 3
        },
        {
            id: 15,
            name: "Evelyn Clark",
            department: "Shitje",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "3/29/2024, 1:45:00 PM",
            responses: [5, 5, 5, "Përvojë fantastike e blerjes"],
            rating: 5
        },
        {
            id: 16,
            name: "Alexander Hall",
            department: "Servis",
            brand: "Seat",
            ip: "192.168.1.101",
            date: "3/30/2024, 4:30:00 PM",
            responses: [4, 4, 3, "Shërbimi ishte i mirë por pak i shtrenjtë"],
            rating: 4
        },
        {
            id: 17,
            name: "Charlotte Young",
            department: "Shitje",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "3/31/2024, 9:15:00 AM",
            responses: [5, 5, 5, "Eksperiencë luksoze e blerjes"],
            rating: 5
        },
        {
            id: 18,
            name: "Henry King",
            department: "Servis",
            brand: "Skoda",
            ip: "192.168.1.101",
            date: "4/1/2024, 11:00:00 AM",
            responses: [3, 4, 3, "Shërbimi ishte në rregull"],
            rating: 3
        },
        {
            id: 19,
            name: "Amelia Wright",
            department: "Shitje",
            brand: "Volkswagen",
            ip: "192.168.1.101",
            date: "4/2/2024, 2:30:00 PM",
            responses: [4, 5, 4, "Shumë e kënaqur me makinën e re"],
            rating: 4
        },
        {
            id: 20,
            name: "Ethan Lopez",
            department: "Servis",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "4/3/2024, 10:45:00 AM",
            responses: [5, 4, 5, "Shërbim i shkëlqyer dhe i shpejtë"],
            rating: 5
        },
        {
            id: 21,
            name: "Ava Scott",
            department: "Shitje",
            brand: "Seat",
            ip: "192.168.1.100",
            date: "4/4/2024, 1:15:00 PM",
            responses: [4, 4, 4, "Përvojë e mirë e blerjes"],
            rating: 4
        },
        {
            id: 22,
            name: "Noah Green",
            department: "Servis",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "4/5/2024, 3:45:00 PM",
            responses: [5, 5, 5, "Shërbim i klasit të lartë"],
            rating: 5
        },
        {
            id: 23,
            name: "Scarlett Adams",
            department: "Shitje",
            brand: "Skoda",
            ip: "192.168.1.101",
            date: "4/6/2024, 9:30:00 AM",
            responses: [3, 4, 3, "Eksperiencë e mirë por jo e jashtëzakonshme"],
            rating: 3
        },
        {
            id: 24,
            name: "Liam Baker",
            department: "Servis",
            brand: "Volkswagen",
            ip: "192.168.1.100",
            date: "4/7/2024, 11:15:00 AM",
            responses: [4, 3, 4, "Shërbimi ishte i mirë por pak i ngadaltë"],
            rating: 4
        },
        {
            id: 25,
            name: "Grace Nelson",
            department: "Shitje",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "4/8/2024, 2:00:00 PM",
            responses: [5, 5, 5, "Eksperiencë e shkëlqyer e blerjes"],
            rating: 5
        },
        {
            id: 26,
            name: "Lucas Carter",
            department: "Servis",
            brand: "Seat",
            ip: "192.168.1.101",
            date: "4/9/2024, 4:30:00 PM",
            responses: [3, 3, 4, "Shërbimi ishte mesatar"],
            rating: 3
        },
        {
            id: 27,
            name: "Chloe Mitchell",
            department: "Shitje",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "4/10/2024, 10:00:00 AM",
            responses: [5, 5, 5, "Përvojë fantastike e blerjes"],
            rating: 5
        },
        {
            id: 28,
            name: "Mason Perez",
            department: "Servis",
            brand: "Skoda",
            ip: "192.168.1.100",
            date: "4/11/2024, 1:45:00 PM",
            responses: [4, 4, 3, "Shërbimi ishte i mirë por pak i shtrenjtë"],
            rating: 4
        },
        {
            id: 29,
            name: "Harper Roberts",
            department: "Shitje",
            brand: "Volkswagen",
            ip: "192.168.1.101",
            date: "4/12/2024, 9:15:00 AM",
            responses: [4, 5, 4, "Shumë e kënaqur me zgjedhjen time"],
            rating: 4
        },
        {
            id: 30,
            name: "Elijah Turner",
            department: "Servis",
            brand: "Audi",
            ip: "192.168.1.101",
            date: "4/13/2024, 11:30:00 AM",
            responses: [5, 4, 5, "Shërbim i shpejtë dhe profesional"],
            rating: 5
        },
        {
            id: 31,
            name: "Aria Phillips",
            department: "Shitje",
            brand: "Seat",
            ip: "192.168.1.100",
            date: "4/14/2024, 2:15:00 PM",
            responses: [3, 4, 3, "Eksperiencë e mirë por jo perfekte"],
            rating: 3
        },
        {
            id: 32,
            name: "Grayson Campbell",
            department: "Servis",
            brand: "Porsche",
            ip: "192.168.1.100",
            date: "4/15/2024, 4:45:00 PM",
            responses: [5, 5, 5, "Shërbim i klasit botëror"],
            rating: 5
        },
        {
            id: 33,
            name: "Layla Parker",
            department: "Shitje",
            brand: "Skoda",
            ip: "192.168.1.101",
            date: "4/16/2024, 10:30:00 AM",
            responses: [4, 4, 4, "Përvojë e këndshme e blerjes"],
            rating: 4
        },
        {
            id: 34,
            name: "Jack Evans",
            department: "Servis",
            brand: "Volkswagen",
            ip: "192.168.1.101",
            date: "4/17/2024, 1:00:00 PM",
            responses: [3, 3, 4, "Shërbimi ishte në rregull"],
            rating: 3
        },
        {
            id: 35,
            name: "Zoe Edwards",
            department: "Shitje",
            brand: "Audi",
            ip: "192.168.1.100",
            date: "4/18/2024, 3:30:00 PM",
            responses: [5, 5, 5, "Eksperiencë e paharrueshme e blerjes"],
            rating: 5
        },
        {
            id: 36,
            name: "Gabriel Collins",
            department: "Servis",
            brand: "Seat",
            ip: "192.168.1.101",
            date: "4/19/2024, 9:45:00 AM",
            responses: [4, 3, 4, "Shërbimi ishte i mirë por me vonesa"],
            rating: 4
        },
        {
            id: 37,
            name: "Penelope Stewart",
            department: "Shitje",
            brand: "Porsche",
            ip: "192.168.1.101",
            date: "4/20/2024, 12:15:00 PM",
            responses: [5, 5, 5, "Përvojë luksoze dhe e përsosur"],
            rating: 5
        },
    ];

    // Mock form history data
    const mockFormVersionsHistory = [
        {
            id: 1,
            editor: "John Doe",
            department: "Shitje",
            date: "2024-03-20 14:30",
            changes: [
                "Added new question about customer satisfaction",
                "Modified rating scale from 1-5 to 1-10",
                "Added brand selection field"
            ]
        },
        {
            id: 2,
            editor: "Jane Smith",
            department: "Servis",
            date: "2024-03-18 09:15",
            changes: [
                "Updated service-specific questions",
                "Added technical assessment section",
                "Removed outdated fields"
            ]
        },
        {
            id: 3,
            editor: "Mike Johnson",
            department: "Shitje",
            date: "2024-03-15 11:45",
            changes: [
                "Initial form creation",
                "Basic feedback questions",
                "Department selection implementation"
            ]
        }
    ];

    // Add mock historical responses data
    const historicalResponses = {
        1: [ // Version 1 data
            {
                name: "John Smith",
                department: "Shitje",
                brand: "Volkswagen",
                rating: 5,
                responses: [
                    "Very satisfied with the service",
                    "Quick response time",
                    "Professional staff",
                    "Would recommend to others"
                ],
                ip: "192.168.1.100",
                date: "2024-03-20 14:30"
            },
            {
                name: "Maria Garcia",
                department: "Servis",
                brand: "Audi",
                rating: 4,
                responses: [
                    "Good technical support",
                    "Reasonable waiting time",
                    "Clear communication",
                    "Fair pricing"
                ],
                ip: "192.168.1.101",
                date: "2024-03-20 15:45"
            }
        ],
        2: [ // Version 2 data
            {
                name: "Alice Johnson",
                department: "Shitje",
                brand: "Skoda",
                rating: 5,
                responses: [
                    "Excellent customer service",
                    "Very knowledgeable staff",
                    "Smooth purchase process",
                    "Great experience overall"
                ],
                ip: "192.168.1.102",
                date: "2024-03-18 09:15"
            },
            {
                name: "Bob Wilson",
                department: "Servis",
                brand: "Porsche",
                rating: 3,
                responses: [
                    "Service was okay",
                    "Longer wait than expected",
                    "Good technical work",
                    "Bit expensive"
                ],
                ip: "192.168.1.103",
                date: "2024-03-18 10:30"
            }
        ],
        3: [ // Version 3 data
            {
                name: "Emma Davis",
                department: "Shitje",
                brand: "Audi",
                rating: 4,
                responses: [
                    "Good initial consultation",
                    "Helpful sales team",
                    "Competitive pricing",
                    "Satisfied with purchase"
                ],
                ip: "192.168.1.104",
                date: "2024-03-15 11:45"
            },
            {
                name: "Carlos Rodriguez",
                department: "Servis",
                brand: "Volkswagen",
                rating: 5,
                responses: [
                    "Outstanding service",
                    "Quick turnaround",
                    "Detailed explanation",
                    "Very professional"
                ],
                ip: "192.168.1.105",
                date: "2024-03-15 13:00"
            }
        ]
    };

    // State
    let searchQuery = "";
    let selectedDepartment = "all";
    let selectedDateRange = { from: undefined, to: undefined };
    let selectedBrands = [];
    let selectedIpAddresses = [];
    let selectedRatings = [];
    let showHistoryDialog = false;

    // Available filter options
    let brands = ["Volkswagen", "Audi", "Skoda", "Seat", "Porsche"];
    let ipAddresses = ["192.168.1.100", "192.168.1.101", "192.168.1.102"];

    let visibleColumns = {
        name: true,
        department: true,
        brand: true,
        ip: true,
        date: true,
        responses: true
    };

    let sortConfig = {
        column: null,
        direction: 'asc'
    };

    // Add rating labels and colors
    const ratingLabels = {
        1: { text: 'Shumë keq', color: 'bg-red-500', hoverColor: 'hover:bg-red-600', borderColor: 'hover:border-red-500' },
        2: { text: 'Keq', color: 'bg-orange-500', hoverColor: 'hover:bg-orange-600', borderColor: 'hover:border-orange-500' },
        3: { text: 'Mirë', color: 'bg-yellow-500', hoverColor: 'hover:bg-yellow-600', borderColor: 'hover:border-yellow-500' },
        4: { text: 'Shumë mirë', color: 'bg-lime-500', hoverColor: 'hover:bg-lime-600', borderColor: 'hover:border-lime-500' },
        5: { text: 'Shkëlqyeshëm', color: 'bg-green-500', hoverColor: 'hover:bg-green-600', borderColor: 'hover:border-green-500' }
    };

    const columnLabels = {
        name: 'Emri',
        department: 'Departamenti',
        brand: 'Brendi',
        ip: 'IP',
        date: 'Data',
        responses: 'Përgjigjet'
    };

    function handleSort(column) {
        if (sortConfig.column === column) {
            sortConfig.direction = sortConfig.direction === 'asc' ? 'desc' : 'asc';
        } else {
            sortConfig.column = column;
            sortConfig.direction = 'asc';
        }
        // Implement sorting logic here
    }

    function exportToExcel() {
        // Split responses by department
        const salesResponses = mockResponses.filter(r => r.department === 'Shitje');
        const serviceResponses = mockResponses.filter(r => r.department === 'Servis');

        // Create workbook
        const wb = XLSX.utils.book_new();

        // Format data for Excel - matching table layout
        const formatResponsesForExcel = (responses) => responses.map(r => ({
            'Name': r.name,
            'Department': r.department,
            'Brand': r.brand,
            'Rating': r.rating,
            'Response 1': r.responses[0],
            'Response 2': r.responses[1],
            'Response 3': r.responses[2],
            'Response 4': r.responses[3],
            'IP': r.ip,
            'Date': formatDate(r.date)
        }));

        // Create Sales sheet with styling
        const salesWs = XLSX.utils.json_to_sheet(formatResponsesForExcel(salesResponses));
        XLSX.utils.book_append_sheet(wb, salesWs, 'Sales Feedback');

        // Create Service sheet with styling
        const serviceWs = XLSX.utils.json_to_sheet(formatResponsesForExcel(serviceResponses));
        XLSX.utils.book_append_sheet(wb, serviceWs, 'Service Feedback');

        // Style configuration
        const responseStyle = {
            fill: { fgColor: { rgb: "FFF4E6" } }, // Light orange background
            font: { color: { rgb: "FF6B00" } }, // Orange text
            alignment: { wrapText: true }
        };

        // Apply styles to both sheets
        [salesWs, serviceWs].forEach(ws => {
            // Get the range of the worksheet
            const range = XLSX.utils.decode_range(ws['!ref']);
            
            // Style response columns (4-7 are the response columns, 0-based)
            for (let col = 4; col <= 7; col++) {
                for (let row = 1; row <= range.e.r; row++) {
                    const cellRef = XLSX.utils.encode_cell({ r: row, c: col });
                    if (!ws[cellRef]) continue;
                    
                    ws[cellRef].s = responseStyle;
                }
            }

            // Header style
            const headerStyle = {
                font: { bold: true, color: { rgb: "FFFFFF" } },
                fill: { fgColor: { rgb: "1A1A1A" } },
                alignment: { horizontal: "center" }
            };

            // Apply header style
            for (let col = 0; col <= range.e.c; col++) {
                const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
                ws[cellRef].s = headerStyle;
            }

            // Auto-size columns
            const maxWidth = 50; // Maximum column width
            const objectMaxLength = [];
            
            for (const [key, value] of Object.entries(ws)) {
                if (key[0] === '!') continue;
                
                const columnIndex = XLSX.utils.decode_col(key.replace(/[0-9]/g, ''));
                const columnLength = Math.min(
                    String(value.v).length,
                    maxWidth
                );
                
                objectMaxLength[columnIndex] = Math.max(
                    objectMaxLength[columnIndex] || 0,
                    columnLength
                );
            }
            
            ws['!cols'] = objectMaxLength.map(w => ({ wch: Math.min(w + 2, maxWidth) }));
        });

        // Generate filename with current date
        const date = new Date().toISOString().split('T')[0];
        const fileName = `feedback_export_${date}.xlsx`;

        // Save file
        XLSX.writeFile(wb, fileName);
    }

    function loadFormVersion(version) {
        // Get historical responses for this version
        const responses = historicalResponses[version.id];
        
        // Export to Excel with version info in filename
        const wb = XLSX.utils.book_new();

        // Split responses by department
        const salesResponses = responses.filter(r => r.department === 'Shitje');
        const serviceResponses = responses.filter(r => r.department === 'Servis');

        // Format data for Excel - matching table layout
        const formatResponsesForExcel = (responses) => responses.map(r => ({
            'Name': r.name,
            'Department': r.department,
            'Brand': r.brand,
            'Rating': r.rating,
            'Response 1': r.responses[0],
            'Response 2': r.responses[1],
            'Response 3': r.responses[2],
            'Response 4': r.responses[3],
            'IP': r.ip,
            'Date': formatDate(r.date)
        }));

        // Create Sales sheet with styling
        const salesWs = XLSX.utils.json_to_sheet(formatResponsesForExcel(salesResponses));
        XLSX.utils.book_append_sheet(wb, salesWs, 'Sales Feedback');

        // Create Service sheet with styling
        const serviceWs = XLSX.utils.json_to_sheet(formatResponsesForExcel(serviceResponses));
        XLSX.utils.book_append_sheet(wb, serviceWs, 'Service Feedback');

        // Style configuration
        const responseStyle = {
            fill: { fgColor: { rgb: "FFF4E6" } }, // Light orange background
            font: { color: { rgb: "FF6B00" } }, // Orange text
            alignment: { wrapText: true }
        };

        // Apply styles to both sheets
        [salesWs, serviceWs].forEach(ws => {
            // Get the range of the worksheet
            const range = XLSX.utils.decode_range(ws['!ref']);
            
            // Style response columns (4-7 are the response columns, 0-based)
            for (let col = 4; col <= 7; col++) {
                for (let row = 1; row <= range.e.r; row++) {
                    const cellRef = XLSX.utils.encode_cell({ r: row, c: col });
                    if (!ws[cellRef]) continue;
                    
                    ws[cellRef].s = responseStyle;
                }
            }

            // Header style
            const headerStyle = {
                font: { bold: true, color: { rgb: "FFFFFF" } },
                fill: { fgColor: { rgb: "1A1A1A" } },
                alignment: { horizontal: "center" }
            };

            // Apply header style
            for (let col = 0; col <= range.e.c; col++) {
                const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
                ws[cellRef].s = headerStyle;
            }

            // Auto-size columns
            const maxWidth = 50;
            const objectMaxLength = [];
            
            for (const [key, value] of Object.entries(ws)) {
                if (key[0] === '!') continue;
                
                const columnIndex = XLSX.utils.decode_col(key.replace(/[0-9]/g, ''));
                const columnLength = Math.min(
                    String(value.v).length,
                    maxWidth
                );
                
                objectMaxLength[columnIndex] = Math.max(
                    objectMaxLength[columnIndex] || 0,
                    columnLength
                );
            }
            
            ws['!cols'] = objectMaxLength.map(w => ({ wch: Math.min(w + 2, maxWidth) }));
        });

        // Generate filename with version info
        const fileName = `feedback_history_${version.date.replace(/[: ]/g, '_')}.xlsx`;

        // Save file
        XLSX.writeFile(wb, fileName);
        
        // Close the dialog
        showHistoryDialog = false;
    }

    // Update the formatDate function
    function formatDate(dateStr) {
        const date = new Date(dateStr);
        
        // Get day with leading zero
        const day = String(date.getDate()).padStart(2, '0');
        
        // Get month name in Albanian
        const months = [
            'Janar', 'Shkurt', 'Mars', 'Prill', 'Maj', 'Qershor',
            'Korrik', 'Gusht', 'Shtator', 'Tetor', 'Nëntor', 'Dhjetor'
        ];
        const month = months[date.getMonth()];
        
        // Get year
        const year = date.getFullYear();
        
        // Get time in 24h format
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        // Format: "22 Dhjetor 2024, 23:33"
        return `${day} ${month} ${year}, ${hours}:${minutes}`;
    }

    // Filter functions
    $: filteredResponses = mockResponses.filter(response => {
        // Department filter
        if (selectedDepartment !== 'all' && response.department !== selectedDepartment) return false;
        
        // Search filter
        if (searchQuery) {
            const query = searchQuery.toLowerCase();
            const searchMatch = 
                response.name.toLowerCase().includes(query) ||
                response.department.toLowerCase().includes(query) ||
                response.brand.toLowerCase().includes(query) ||
                response.ip.toLowerCase().includes(query) ||
                response.responses.some(r => 
                    typeof r === 'string' && r.toLowerCase().includes(query)
                );
            if (!searchMatch) return false;
        }
        
        // Brand filter
        if (selectedBrands.length > 0 && !selectedBrands.includes(response.brand)) return false;
        
        // IP filter
        if (selectedIpAddresses.length > 0 && !selectedIpAddresses.includes(response.ip)) return false;
        
        // Rating filter
        if (selectedRatings.length > 0) {
            const hasSelectedRating = response.responses.some(answer => 
                typeof answer === 'number' && selectedRatings.includes(answer)
            );
            if (!hasSelectedRating) return false;
        }
        
        return true;
    });

    // Get unique values for filters
    $: brands = [...new Set(mockResponses.map(r => r.brand))].sort();
    $: ipAddresses = [...new Set(mockResponses.map(r => r.ip))].sort();
</script>

<div class="h-[calc(100vh-4.8rem)] flex flex-col bg-[#111111] overflow-hidden">
    <!-- Header Section -->
    <div class="flex-none p-4">
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-white">Tabela e Feedback-ut</h1>
            <div class="flex gap-2">
                <Dialog bind:open={showHistoryDialog}>
                    <DialogTrigger asChild let:builder>
                        <Button 
                            builders={[builder]}
                            variant="default" 
                            class="border-[#ff6b00] bg-[#ff6b00] text-black hover:bg-[#ff6b00a2] hover:text-white"
                        >
                            <Fa icon={faHistory} class="mr-2 h-4 w-4" />
                            History
                        </Button>
                    </DialogTrigger>
                    <DialogContent class="bg-[#1a1a1a] border-white/20 text-white">
                        <DialogHeader>
                            <DialogTitle class="text-lg font-semibold flex items-center gap-2">
                                <Fa icon={faHistory} class="text-[#ff6b00]" />
                                Form History
                            </DialogTitle>
                            <DialogDescription class="text-gray-400">
                                Shkarkoni versionet e mëparshme dhe ndryshimet e bëra në formën e feedback-it
                            </DialogDescription>
                        </DialogHeader>
                        <div class="space-y-4 mt-4 max-h-[60vh] overflow-y-auto pr-2">
                            {#each mockFormVersionsHistory as version}
                                <div class="bg-[#111111] rounded-lg p-4 border border-white/20 hover:border-[#ff6b00] transition-colors group">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center gap-2">
                                            <Fa icon={faUser} class="text-[#ff6b00]" />
                                            <span class="font-medium">{version.editor}</span>
                                        </div>
                                        <Badge variant="outline" class="border-white/20">
                                            {version.department}
                                        </Badge>
                                    </div>
                                    <div class="flex items-center gap-2 text-sm text-gray-400 mb-3">
                                        <Fa icon={faClock} />
                                        <span>{formatDate(version.date)}</span>
                                    </div>
                                    <Separator class="my-3 bg-white/20" />
                                    <div class="space-y-2">
                                        {#each version.changes as change}
                                            <div class="flex items-start gap-2 text-sm text-gray-300">
                                                <div class="w-1.5 h-1.5 rounded-full bg-[#ff6b00] mt-1.5"></div>
                                                <span>{change}</span>
                                            </div>
                                        {/each}
                                    </div>
                                    <div class="mt-4 flex justify-end">
                                        <Button 
                                            variant="outline" 
                                            size="sm"
                                            class="border-white/20 hover:bg-[#ff6b00] hover:text-white hover:border-[#ff6b00]"
                                            on:click={() => loadFormVersion(version)}
                                        >
                                            Download Excel
                                        </Button>
                                    </div>
                                </div>
                            {/each}
                        </div>
                    </DialogContent>
                </Dialog>
                <Button 
                    variant="default" 
                    class="border-[#ff6b00] bg-[#ff6b00] text-black hover:bg-[#ff6b00a2] hover:text-white"
                    on:click={exportToExcel}
                >
                    <Fa icon={faFileExcel} class="mr-2 h-4 w-4" />
                    Export
                </Button>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 min-h-0 flex">
        <!-- Filters Sidebar -->
        <div class="w-64 flex-none h-full pr-4 overflow-y-auto">
            <div class="p-6 space-y-6">
                <div class="flex items-center justify-between">
                    <span class="text-lg font-semibold text-white flex items-center gap-2">
                        <Fa icon={faFilter} class="text-[#ff6b00]" />
                        Filters
                    </span>
                    {#if selectedDepartment !== 'all' || searchQuery || selectedBrands.length > 0 || selectedIpAddresses.length > 0 || selectedRatings.length > 0}
                        <Button
                            variant="ghost"
                            size="sm"
                            class="text-[#ff6b00] hover:text-[#ff6b00]/80"
                            on:click={() => {
                                selectedDepartment = 'all';
                                searchQuery = '';
                                selectedBrands = [];
                                selectedIpAddresses = [];
                                selectedRatings = [];
                            }}
                        >
                            Pastro Filtrat
                        </Button>
                    {/if}
                </div>

                <!-- Search input -->
                <div class="relative">
                    <Fa icon={faSearch} class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                    <Input 
                        type="text" 
                        placeholder="Search..." 
                        bind:value={searchQuery}
                        class="pl-10 bg-[#111111] border-white/20 focus:border-[#ff6b00] text-white placeholder-gray-500"
                    />
                </div>

                <!-- Brand Filter -->
                <div class="space-y-2">
                    <Label class="text-sm font-medium flex items-center gap-2 text-gray-300">
                        <Fa icon={faCar} class="text-[#ff6b00]" />
                        Marka
                    </Label>
                    <div class="flex flex-wrap gap-2">
                        {#each brands as brand}
                            <button
                                class="group"
                                on:click={() => {
                                    if (selectedBrands.includes(brand)) {
                                        selectedBrands = selectedBrands.filter(b => b !== brand);
                                    } else {
                                        selectedBrands = [...selectedBrands, brand];
                                    }
                                }}
                            >
                                <Badge 
                                    variant={selectedBrands.includes(brand) ? "default" : "outline"}
                                    class="{selectedBrands.includes(brand) ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : ''} border-2 border-white/20 hover:border-[#ff6b00] hover:text-white rounded-lg px-3 py-2"
                                >
                                    {brand}
                                </Badge>
                            </button>
                        {/each}
                    </div>
                </div>

                <!-- IP Address Filter -->
                <div class="space-y-2">
                    <Label class="text-sm font-medium flex items-center gap-2 text-gray-300">
                        <Fa icon={faNetworkWired} class="text-[#ff6b00]" />
                        IP
                    </Label>
                    <div class="flex flex-wrap gap-2">
                        {#each ipAddresses as ip}
                            <button
                                class="group"
                                on:click={() => {
                                    if (selectedIpAddresses.includes(ip)) {
                                        selectedIpAddresses = selectedIpAddresses.filter(i => i !== ip);
                                    } else {
                                        selectedIpAddresses = [...selectedIpAddresses, ip];
                                    }
                                }}
                            >
                                <Badge 
                                    variant={selectedIpAddresses.includes(ip) ? "default" : "outline"}
                                    class="{selectedIpAddresses.includes(ip) ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : ''} border-2 border-white/20 hover:border-[#ff6b00] hover:text-white rounded-lg px-3 py-2"
                                >
                                    {ip}
                                </Badge>
                            </button>
                        {/each}
                    </div>
                </div>

                <!-- Rating Filter -->
                <div class="space-y-4">
                    <Label class="text-lg font-semibold text-white flex items-center gap-2">
                        <Fa icon={faSort} class="text-[#ff6b00]" />
                        Rating
                    </Label>
                    <div class="flex flex-wrap gap-2">
                        {#each [1, 2, 3, 4, 5] as rating}
                            <button
                                on:click={() => {
                                    if (selectedRatings.includes(rating)) {
                                        selectedRatings = selectedRatings.filter(r => r !== rating);
                                    } else {
                                        selectedRatings = [...selectedRatings, rating];
                                    }
                                }}
                            >
                                <Badge 
                                    variant={selectedRatings.includes(rating) ? "default" : "outline"}
                                    class="{selectedRatings.includes(rating) ? `${ratingLabels[rating].color} text-white ${ratingLabels[rating].hoverColor}` : `border-2 border-white/20 ${ratingLabels[rating].borderColor} hover:text-white`} rounded-lg px-3 py-2 transition-colors"
                                >
                                    {ratingLabels[rating].text}
                                </Badge>
                            </button>
                        {/each}
                    </div>
                </div>
            </div>
        </div>

        <!-- Table Section -->
        <div class="flex-1 flex flex-col min-w-0 bg-[#1a1a1a] rounded-lg border border-white/10">
            <!-- Table Header -->
            <div class="flex-none p-4 border-b border-white/10">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <!-- Department selector and other controls -->
                        <Label class="text-sm font-medium flex items-center gap-2 text-gray-300">
                            <Fa icon={faBuilding} class="text-[#ff6b00]" />
                            Departamenti
                        </Label>
                        <div class="flex flex-wrap gap-2">
                            <Button 
                                variant={selectedDepartment === 'all' ? 'default' : 'outline'}
                                class="{selectedDepartment === 'all' ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : 'border-2 border-white/20 hover:border-[#ff6b00] hover:text-white'}"
                                on:click={() => selectedDepartment = 'all'}
                            >
                                All
                            </Button>
                            <Button 
                                variant={selectedDepartment === 'Shitje' ? 'default' : 'outline'}
                                class="{selectedDepartment === 'Shitje' ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : 'border-2 border-white/20 hover:border-[#ff6b00] hover:text-white'}"
                                on:click={() => selectedDepartment = 'Shitje'}
                            >
                                Shitje
                            </Button>
                            <Button 
                                variant={selectedDepartment === 'Servis' ? 'default' : 'outline'}
                                class="{selectedDepartment === 'Servis' ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : 'border-2 border-white/20 hover:border-[#ff6b00] hover:text-white'}"
                                on:click={() => selectedDepartment = 'Servis'}
                            >
                                Servis
                            </Button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table Container -->
            <div class="flex-1 min-h-0 relative">
                <div class="absolute inset-0 overflow-auto">
                    <table class="w-full border-collapse min-w-[800px]">
                        <thead class="sticky top-0 z-20 bg-[#1a1a1a]">
                            <tr>
                                <!-- Fixed columns -->
                                <th class="sticky left-0 z-20 bg-[#1a1a1a] px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10">
                                    Data
                                </th>
                                <th class="sticky left-[120px] z-20 bg-[#1a1a1a] px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10">
                                    Emri
                                </th>
                                <th class="sticky left-[280px] z-20 bg-[#1a1a1a] px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10">
                                    Departamenti
                                </th>
                                <th class="sticky left-[400px] z-20 bg-[#1a1a1a] px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10">
                                    Brendi
                                </th>
                                <th class="px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10">
                                    IP
                                </th>
                                <!-- Response columns -->
                                {#each mockQuestions[selectedDepartment === 'Shitje' ? 'sales' : 'service'] as question, i}
                                    <th class="px-4 py-2 text-left font-medium text-gray-300 border-b border-white/10 whitespace-nowrap">
                                        <Tooltip>
                                            <TooltipTrigger>
                                                <span class="hover:text-[#ff6b00] transition-colors">
                                                    Q{i + 1}
                                                </span>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                {question}
                                            </TooltipContent>
                                        </Tooltip>
                                    </th>
                                {/each}
                            </tr>
                        </thead>
                        <tbody>
                            {#each filteredResponses as response (response.id)}
                                <tr 
                                    class="border-b border-white/20 hover:bg-[#222222] transition-colors group"
                                    transition:fade={{ duration: 150 }}
                                >
                                    <!-- Fixed columns -->
                                    <td class="sticky left-0 z-10 bg-[#111111] group-hover:bg-[#1a1a1a] px-4 py-2 border-b border-white/10">
                                        {formatDate(response.date)}
                                    </td>
                                    <td class="sticky left-[120px] z-10 bg-[#111111] group-hover:bg-[#1a1a1a] px-4 py-2 border-b border-white/10">
                                        {response.name}
                                    </td>
                                    <td class="sticky left-[280px] z-10 bg-[#111111] group-hover:bg-[#1a1a1a] px-4 py-2 border-b border-white/10">
                                        {response.department}
                                    </td>
                                    <td class="sticky left-[400px] z-10 bg-[#111111] group-hover:bg-[#1a1a1a] px-4 py-2 border-b border-white/10">
                                        {response.brand}
                                    </td>
                                    <td class="px-4 py-2 border-b border-white/10">
                                        {response.ip}
                                    </td>
                                    <!-- Response columns -->
                                    {#each response.responses as answer, i}
                                        <td class="px-4 py-2 border-b border-white/10">
                                            {#if typeof answer === 'number'}
                                                <Badge class={ratingLabels[answer].color}>
                                                    {ratingLabels[answer].text}
                                                </Badge>
                                            {:else}
                                                <span class="text-gray-300">{answer}</span>
                                            {/if}
                                        </td>
                                    {/each}
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :global(.tooltip) {
        @apply bg-[#1a1a1a] text-white border border-white/20 px-3 py-2 rounded-lg shadow-lg;
    }

    /* Custom scrollbar styles */
    :global(::-webkit-scrollbar) {
        width: 4px;
    }

    :global(::-webkit-scrollbar-track) {
        background-color: transparent;
    }

    :global(::-webkit-scrollbar-thumb) {
        background-color: white;
    }

    :global(::-webkit-scrollbar-thumb:hover) {
        background-color: white;
    }

    /* Add these styles at the bottom */
    :global(.sticky) {
        position: sticky !important;
    }
    
    /* Ensure the background color transitions smoothly */
    td {
        transition: background-color 0.2s ease;
    }
    
    /* Add shadow to indicate scrollable content */
    .overflow-auto {
        background:
            linear-gradient(to right, rgba(17, 17, 17, 1) 30%, rgba(17, 17, 17, 0)),
            linear-gradient(to left, rgba(17, 17, 17, 1) 30%, rgba(17, 17, 17, 0)) 100% 0;
        background-size: 40px 100%, 40px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local;
    }
</style>

================
File: src/routes/admin/form-editor/+page.svelte
================
<script>
    import { formEditorStore } from "$lib/stores/formEditorStore";
    import { Button } from "$lib/components/ui/button";
    import { Card } from "$lib/components/ui/card";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { Textarea } from "$lib/components/ui/textarea";
    import * as dndAction from "svelte-dnd-action";
    import BrandModal from "$lib/components/brand-modal.svelte";
    import { Fa } from 'svelte-fa';
    import { 
        faCar, 
        faWrench, 
        faPlus, 
        faTimes, 
        faUpload,
        faSave,
        faGripVertical,
        faTrash,
        faStarHalf,
        faComment
    } from '@fortawesome/free-solid-svg-icons';

    const dndzone = dndAction.dndzone;
    let newQuestion = { text: undefined, type: "rating" };
    let showBrandModal = false;
    let dragDisabled = false;

    // Subscribe to the store
    $: currentDepartment = $formEditorStore.currentDepartment;
    $: questions = $formEditorStore.forms[currentDepartment].questions;
    $: brands = $formEditorStore.forms[currentDepartment].brands;

    function handleDepartmentChange(event) {
        formEditorStore.setDepartment(event.detail.value);
    }

    function addQuestion() {
        if (newQuestion.text.trim()) {
            formEditorStore.addQuestion(newQuestion);
            newQuestion = { text: undefined, type: "rating" };
        }
    }

    function removeQuestion(id) {
        formEditorStore.removeQuestion(id);
    }

    function handleQuestionDrop(e) {
        const newQuestions = e.detail.items.map((q, index) => ({ ...q, order: index }));
        formEditorStore.reorderQuestions(newQuestions);
    }

    function handleBrandSave(event) {
        const brand = event.detail;
        formEditorStore.addBrand(brand);
    }

    function saveForm() {
        formEditorStore.saveForm();
    }
</script>

<div class="min-h-screen bg-[#11111111] text-white p-4">
    <div class="max-w-2xl mx-auto">
        <header class="mb-8">
            <h1 class="text-2xl font-bold mb-2">Formulari i Feedback-ut</h1>
            <p class="text-gray-400 mb-6">Çfarë shërbimi po prisni?</p>
        </header>

        <!-- Department Selector -->
        <div class="grid grid-cols-2 gap-4 mb-4">
            <button 
                class="p-4 rounded-lg flex flex-row items-center justify-center gap-4 border-2 transition-colors {currentDepartment === 'sales' ? 'border-[#ff6b00] bg-[#ff6b00]/10' : 'border-gray-800 hover:border-[#ff6b00]/50 bg-[#252525]'}"
                on:click={() => formEditorStore.setDepartment('sales')}
            >
                <Fa icon={faCar} size="2x" />
                <span class="font-medium text-left">Shitje<br><span class="text-sm text-gray-400">Modifiko pyetjet e formit te shitjes</span></span>
                
            </button>
            <button 
                class="p-6 rounded-lg flex flex-row items-center justify-center gap-3 border-2 transition-colors {currentDepartment === 'service' ? 'border-[#ff6b00] bg-[#ff6b00]/10' : 'border-gray-800 hover:border-[#ff6b00]/50 bg-[#252525]'}"
                on:click={() => formEditorStore.setDepartment('service')}
            >
                <Fa icon={faWrench} size="2x" />
                <span class="font-medium text-left">Servis<br><span class="text-sm text-gray-400">Modifiko pyetjet e formit te servisit</span></span>
            </button>
        </div>

        <!-- Car Brands Section -->
        <section class="mb-8">
            <h2 class="text-xl font-semibold mb-4">Zgjidhni markë</h2>
            <div class="grid grid-cols-2 gap-4">
                {#each brands as brand}
                    <div class="relative group">
                        <button 
                            class="absolute -top-2 -right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity p-1 bg-red-500/20 hover:bg-red-500/30 rounded-full text-red-500"
                            on:click={() => formEditorStore.removeBrand(brand.id)}
                        >
                            <Fa icon={faTimes} size="1x" />
                        </button>
                        <div class="bg-[#252525] p-6 rounded-lg border-2 border-gray-800 hover:border-[#ff6b00]/50 transition-colors flex items-center justify-center">
                            <img 
                                src={brand.image} 
                                alt={brand.name}
                                class="w-24 h-auto"
                            />
                        </div>
                    </div>
                {/each}
                <button 
                    class="bg-[#252525] p-6 rounded-lg border-2 border-dashed border-gray-800 hover:border-[#ff6b00]/50 transition-colors flex flex-col items-center justify-center gap-2"
                    on:click={() => showBrandModal = true}
                >
                    <Fa icon={faPlus} size="2x" class="text-gray-500" />
                    <span class="text-sm text-gray-500">Shto Markë</span>
                </button>
            </div>
        </section>

        <!-- Questions Section -->
        <section class="mb-8">
            <h2 class="text-xl font-semibold mb-4">Vlerësoni eksperiencën tuaj</h2>
            <div class="space-y-4" use:dndzone={{items: questions, dragDisabled}} on:consider={handleQuestionDrop} on:finalize={handleQuestionDrop}>
                {#each questions as question (question.id)}
                    <div class="bg-[#252525] p-4 rounded-lg border-2 border-gray-800 hover:border-[#ff6b00]/50 transition-colors flex items-center justify-between group">
                        <div class="flex items-center gap-3 flex-1">
                            <Fa icon={faGripVertical} class="text-gray-500" />
                            <div>
                                <div class="font-medium">{question.text}</div>
                                <div class="text-sm text-gray-400">Tipi: {question.type === 'rating' ? 'Vlerësim' : 'Koment'}</div>
                            </div>
                        </div>
                        <button 
                            class="p-2 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
                            on:click={() => removeQuestion(question.id)}
                        >
                            <Fa icon={faTrash} />
                        </button>
                    </div>
                {/each}
            </div>

            <!-- Add Question Button -->
            <button 
                class="mt-4 w-full bg-[#252525] p-4 rounded-lg border-2 border-dashed border-gray-800 hover:border-[#ff6b00]/50 transition-colors flex items-center justify-center gap-2"
                on:click={() => newQuestion = { text: "", type: "rating" }}
            >
                <Fa icon={faPlus} class="text-gray-500" />
                <span class="text-gray-500">Shto Pyetje të Re</span>
            </button>
        </section>

        <!-- Save Button -->
        <div class="flex justify-end pt-4">
            <button 
                class="bg-[#ff6b00] hover:bg-[#ff6b00]/90 px-6 py-2 rounded-lg font-medium transition-colors flex items-center gap-2"
                on:click={saveForm}
            >
                <Fa icon={faSave} />
                <span>Ruaj Ndryshimet</span>
            </button>
        </div>
    </div>
</div>

<!-- Brand Modal -->
<BrandModal 
    bind:show={showBrandModal} 
    on:save={handleBrandSave}
    on:close={() => showBrandModal = false}
/>

<!-- Add Question Modal -->
{#if newQuestion.text !== undefined}
    <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
        <div class="bg-[#1a1a1a] p-6 rounded-lg w-full max-w-lg mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Shto Pyetje të Re</h3>
                <button 
                    class="text-gray-400 hover:text-white"
                    on:click={() => newQuestion = { text: undefined, type: "rating" }}
                >
                    <Fa icon={faTimes} />
                </button>
            </div>
            
            <div class="space-y-4">
                <div>
                    <Label>Tipi i Pyetjes</Label>
                    <div class="grid grid-cols-2 gap-4 mt-2">
                        <button 
                            class="p-4 rounded-lg flex flex-row items-center justify-center gap-4 border-2 transition-colors {newQuestion.type === 'rating' ? 'border-[#ff6b00] bg-[#ff6b00]/10' : 'border-gray-800 hover:border-[#ff6b00]/50 bg-[#252525]'}"
                            on:click={() => newQuestion.type = 'rating'}
                        >
                            <Fa icon={faStarHalf} size="2x" />
                            <span class="font-medium text-left">Vlerësim<br><span class="text-sm text-gray-400">Vlerësim me yje</span></span>
                        </button>
                        <button 
                            class="p-4 rounded-lg flex flex-row items-center justify-center gap-4 border-2 transition-colors {newQuestion.type === 'comment' ? 'border-[#ff6b00] bg-[#ff6b00]/10' : 'border-gray-800 hover:border-[#ff6b00]/50 bg-[#252525]'}"
                            on:click={() => newQuestion.type = 'comment'}
                        >
                            <Fa icon={faComment} size="2x" />
                            <span class="font-medium text-left">Koment<br><span class="text-sm text-gray-400">Përgjigje me tekst</span></span>
                        </button>
                    </div>
                </div>

                <div>
                    <Label for="questionText">Teksti i Pyetjes</Label>
                    <Textarea
                        id="questionText"
                        bind:value={newQuestion.text}
                        placeholder="Shkruani pyetjen këtu..."
                        class="bg-[#252525] border-gray-800 focus:border-[#ff6b00]"
                    />
                </div>

                <div class="flex justify-end gap-2 pt-4">
                    <Button 
                        variant="outline" 
                        class="border-gray-800 hover:bg-[#252525]"
                        on:click={() => newQuestion = { text: undefined, type: "rating" }}
                    >
                        Anulo
                    </Button>
                    <Button 
                        class="bg-[#ff6b00] hover:bg-[#ff6b00]/90 flex items-center gap-2"
                        on:click={addQuestion}
                    >
                        <Fa icon={faPlus} />
                        <span>Shto</span>
                    </Button>
                </div>
            </div>
        </div>
    </div>
{/if}

================
File: src/routes/admin/login/+page.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { Fa } from 'svelte-fa';
    import { 
        faUser,
        faLock,
        faRightToBracket,
        faShieldHalved
    } from '@fortawesome/free-solid-svg-icons';

    let email = '';
    let password = '';

    function handleLogin() {
        // TODO: Implement login logic
        console.log('Login attempt:', { email, password });
    }
</script>

<div class="min-h-screen bg-[#111111] flex items-center justify-center p-4">
    <div class="w-full max-w-md space-y-8">
        <!-- Header -->
        <div class="text-center space-y-2">
            <div class="flex justify-center">
                <div class="bg-[#ff6b00]/10 p-4 rounded-full">
                    <Fa icon={faShieldHalved} class="text-[#ff6b00] text-4xl" />
                </div>
            </div>
            <h1 class="text-3xl font-bold text-white">Admin Login</h1>
            <p class="text-gray-400">Enter your credentials to access the admin panel</p>
        </div>

        <!-- Login Form -->
        <div class="bg-[#1a1a1a] rounded-xl border border-white/10 p-6 space-y-6 shadow-lg">
            <form class="space-y-6" on:submit|preventDefault={handleLogin}>
                <div class="space-y-2">
                    <Label class="text-gray-300" for="email">Email</Label>
                    <div class="relative">
                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                            <Fa icon={faUser} class="text-[#ff6b00]" />
                        </div>
                        <Input 
                            id="email"
                            type="email"
                            bind:value={email}
                            placeholder="Enter your email"
                            class="pl-10 bg-black/20 border-white/10 focus:border-[#ff6b00] text-white placeholder-gray-500"
                            required
                        />
                    </div>
                </div>

                <div class="space-y-2">
                    <Label class="text-gray-300" for="password">Password</Label>
                    <div class="relative">
                        <div class="absolute left-3 top-1/2 -translate-y-1/2">
                            <Fa icon={faLock} class="text-[#ff6b00]" />
                        </div>
                        <Input 
                            id="password"
                            type="password"
                            bind:value={password}
                            placeholder="Enter your password"
                            class="pl-10 bg-black/20 border-white/10 focus:border-[#ff6b00] text-white placeholder-gray-500"
                            required
                        />
                    </div>
                </div>

                <Button 
                    type="submit" 
                    class="w-full bg-[#ff6b00] hover:bg-[#ff6b00]/90 text-white"
                >
                    <Fa icon={faRightToBracket} class="mr-2" />
                    Sign In
                </Button>
            </form>
        </div>

        <!-- Footer -->
        <p class="text-center text-sm text-gray-500">
            Protected area. Unauthorized access is prohibited.
        </p>
    </div>
</div>

================
File: src/routes/admin/users/+page.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Input } from "$lib/components/ui/input";
    import { Label } from "$lib/components/ui/label";
    import { Badge } from "$lib/components/ui/badge";
    import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "$lib/components/ui/dialog";
    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "$lib/components/ui/select";
    import { Checkbox } from "$lib/components/ui/checkbox";
    import { Fa } from 'svelte-fa';
    import { 
        faUser,
        faUserPlus,
        faUserShield,
        faEdit,
        faTrash,
        faKey,
        faLock,
        faEnvelope,
        faCheck,
        faTimes
    } from '@fortawesome/free-solid-svg-icons';

    // Mock admin users data
    let adminUsers = [
        {
            id: 1,
            name: "Admin User",
            email: "admin@example.com",
            role: "super",
            privileges: {
                canManageUsers: true,
                canViewFeedback: true,
                canExportData: true,
                canManageForms: true
            }
        },
        {
            id: 2,
            name: "Support Staff",
            email: "support@example.com",
            role: "normal",
            privileges: {
                canManageUsers: false,
                canViewFeedback: true,
                canExportData: true,
                canManageForms: false
            }
        }
    ];

    // New admin user form
    let showAddDialog = false;
    let newUser = {
        name: "",
        email: "",
        role: "normal",
        privileges: {
            canManageUsers: false,
            canViewFeedback: true,
            canExportData: false,
            canManageForms: false
        }
    };

    // Edit user form
    let showEditDialog = false;
    let editingUser = null;

    function addUser() {
        adminUsers = [...adminUsers, {
            id: adminUsers.length + 1,
            ...newUser
        }];
        showAddDialog = false;
        resetNewUser();
    }

    function editUser(user) {
        editingUser = { ...user };
        showEditDialog = true;
    }

    function saveEditedUser() {
        adminUsers = adminUsers.map(user => 
            user.id === editingUser.id ? editingUser : user
        );
        showEditDialog = false;
        editingUser = null;
    }

    // Delete confirmation
    let showDeleteDialog = false;
    let userToDelete = null;

    function confirmDelete(user) {
        userToDelete = user;
        showDeleteDialog = true;
    }

    function deleteUser() {
        if (userToDelete) {
            adminUsers = adminUsers.filter(user => user.id !== userToDelete.id);
            showDeleteDialog = false;
            userToDelete = null;
        }
    }

    function resetNewUser() {
        newUser = {
            name: "",
            email: "",
            role: "normal",
            privileges: {
                canManageUsers: false,
                canViewFeedback: true,
                canExportData: false,
                canManageForms: false
            }
        };
    }

    const privilegeLabels = {
        canManageUsers: "Manage Users",
        canViewFeedback: "View Feedback",
        canExportData: "Export Data",
        canManageForms: "Manage Forms"
    };
</script>

<div class="h-[calc(100vh-4.8rem)] container mx-auto px-4 flex flex-col bg-[#111111] overflow-hidden">
    <!-- Header Section -->
    <div class="flex-none p-4">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold text-white">Admin Management</h1>
            <Dialog bind:open={showAddDialog}>
                <DialogTrigger>
                    <Button class="bg-[#ff6b00] hover:bg-[#ff6b00]/90">
                        <Fa icon={faUserPlus} class="mr-2" />
                        Add Admin
                    </Button>
                </DialogTrigger>
                <DialogContent class="bg-[#1a1a1a] border-white/10">
                    <DialogHeader>
                        <DialogTitle class="text-xl font-semibold text-white flex items-center gap-2">
                            <Fa icon={faUserPlus} class="text-[#ff6b00]" />
                            Add New Admin User
                        </DialogTitle>
                        <DialogDescription class="text-gray-400">
                            Create a new admin user with specific roles and privileges.
                        </DialogDescription>
                    </DialogHeader>
                    <div class="space-y-6">
                        <div class="space-y-2">
                            <Label class="text-gray-300" for="name">Name</Label>
                            <Input 
                                id="name" 
                                bind:value={newUser.name} 
                                placeholder="Enter name" 
                                class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white"
                            />
                        </div>
                        <div class="space-y-2">
                            <Label class="text-gray-300" for="email">Email</Label>
                            <Input 
                                id="email" 
                                type="email" 
                                bind:value={newUser.email} 
                                placeholder="Enter email"
                                class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white"
                            />
                        </div>
                        <div class="space-y-2">
                            <Label class="text-gray-300" for="role">Role</Label>
                            <Select bind:value={newUser.role}>
                                <SelectTrigger class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white">
                                    <SelectValue placeholder="Select role" />
                                </SelectTrigger>
                                <SelectContent class="bg-[#1a1a1a] border-white/10">
                                    <SelectItem value="super" class="text-white hover:bg-[#ff6b00]/10">
                                        <div class="flex items-center gap-2">
                                            <Fa icon={faUserShield} class="text-[#ff6b00]" />
                                            Super Admin
                                        </div>
                                    </SelectItem>
                                    <SelectItem value="normal" class="text-white hover:bg-[#ff6b00]/10">
                                        <div class="flex items-center gap-2">
                                            <Fa icon={faUser} class="text-blue-500" />
                                            Normal Admin
                                        </div>
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                        <div class="space-y-3">
                            <Label class="text-gray-300">Privileges</Label>
                            {#each Object.entries(newUser.privileges) as [privilege, value]}
                                <div class="flex items-center gap-3 bg-black/20 p-3 rounded-lg">
                                    <Checkbox 
                                        bind:checked={newUser.privileges[privilege]}
                                        id={`new-${privilege}`}
                                        class="border-white/20 data-[state=checked]:bg-[#ff6b00] data-[state=checked]:border-[#ff6b00]"
                                    />
                                    <Label for={`new-${privilege}`} class="text-gray-300">{privilegeLabels[privilege]}</Label>
                                </div>
                            {/each}
                        </div>
                        <div class="flex justify-end gap-3 pt-4">
                            <Button 
                                variant="outline" 
                                class="border-white/20 hover:border-[#ff6b00] hover:text-white" 
                                on:click={() => showAddDialog = false}
                            >
                                Cancel
                            </Button>
                            <Button class="bg-[#ff6b00] hover:bg-[#ff6b00]/90" on:click={addUser}>
                                <Fa icon={faUserPlus} class="mr-2" />
                                Add User
                            </Button>
                        </div>
                    </div>
                </DialogContent>
            </Dialog>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 min-h-0 p-4 overflow-y-auto">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {#each adminUsers as user (user.id)}
                    <div class="bg-[#1a1a1a] rounded-xl border border-white/10 p-6 space-y-6 hover:border-[#ff6b00]/30 transition-colors duration-200">
                        <div class="flex items-start justify-between">
                            <div class="space-y-1">
                                <h3 class="text-xl font-semibold text-white flex items-center gap-2">
                                    <Fa icon={faUser} class="text-[#ff6b00]" />
                                    {user.name}
                                </h3>
                                <p class="text-sm text-gray-400 flex items-center gap-2">
                                    <Fa icon={faEnvelope} class="text-[#ff6b00]" />
                                    {user.email}
                                </p>
                            </div>
                            <Badge class={user.role === 'super' ? 'bg-[#ff6b00] hover:bg-[#ff6b00]/90' : 'bg-blue-500 hover:bg-blue-500/90'}>
                                <Fa icon={faUserShield} class="mr-2" />
                                {user.role === 'super' ? 'Super Admin' : 'Normal Admin'}
                            </Badge>
                        </div>

                        <div class="space-y-3">
                            <h4 class="text-sm font-medium text-gray-300 flex items-center gap-2">
                                <Fa icon={faKey} class="text-[#ff6b00]" />
                                Privileges
                            </h4>
                            <div class="grid grid-cols-1 gap-3">
                                {#each Object.entries(user.privileges) as [privilege, value]}
                                    <div class="flex items-center gap-3 text-sm bg-black/20 p-3 rounded-lg">
                                        <div class={`w-2 h-2 rounded-full ${value ? 'bg-green-500' : 'bg-red-500'}`}></div>
                                        <span class="text-gray-300">{privilegeLabels[privilege]}</span>
                                    </div>
                                {/each}
                            </div>
                        </div>

                        <div class="pt-4 flex justify-end gap-3">
                            <Button 
                                variant="outline" 
                                size="sm"
                                class="border-white/20 hover:border-[#ff6b00] hover:text-white"
                                on:click={() => editUser(user)}
                            >
                                <Fa icon={faEdit} class="mr-2" />
                                Edit User
                            </Button>
                            <Button 
                                variant="destructive" 
                                size="sm"
                                class="hover:bg-red-600/90"
                                on:click={() => confirmDelete(user)}
                            >
                                <Fa icon={faTrash} class="mr-2" />
                                Delete
                            </Button>
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </div>
</div>

<!-- Edit User Dialog -->
{#if editingUser}
    <Dialog bind:open={showEditDialog}>
        <DialogContent class="bg-[#1a1a1a] border-white/10">
            <DialogHeader>
                <DialogTitle class="text-xl font-semibold text-white flex items-center gap-2">
                    <Fa icon={faEdit} class="text-[#ff6b00]" />
                    Edit Admin User
                </DialogTitle>
                <DialogDescription class="text-gray-400">
                    Modify user details and privileges.
                </DialogDescription>
            </DialogHeader>
            <div class="space-y-6">
                <div class="space-y-2">
                    <Label class="text-gray-300" for="edit-name">Name</Label>
                    <Input 
                        id="edit-name" 
                        bind:value={editingUser.name} 
                        placeholder="Enter name"
                        class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white"
                    />
                </div>
                <div class="space-y-2">
                    <Label class="text-gray-300" for="edit-email">Email</Label>
                    <Input 
                        id="edit-email" 
                        type="email" 
                        bind:value={editingUser.email} 
                        placeholder="Enter email"
                        class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white"
                    />
                </div>
                <div class="space-y-2">
                    <Label class="text-gray-300" for="edit-role">Role</Label>
                    <Select bind:value={editingUser.role}>
                        <SelectTrigger class="bg-black/20 border-white/10 focus:border-[#ff6b00] text-white">
                            <SelectValue placeholder="Select role" />
                        </SelectTrigger>
                        <SelectContent class="bg-[#1a1a1a] border-white/10">
                            <SelectItem value="super" class="text-white hover:bg-[#ff6b00]/10">
                                <div class="flex items-center gap-2">
                                    <Fa icon={faUserShield} class="text-[#ff6b00]" />
                                    Super Admin
                                </div>
                            </SelectItem>
                            <SelectItem value="normal" class="text-white hover:bg-[#ff6b00]/10">
                                <div class="flex items-center gap-2">
                                    <Fa icon={faUser} class="text-blue-500" />
                                    Normal Admin
                                </div>
                            </SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                <div class="space-y-3">
                    <Label class="text-gray-300">Privileges</Label>
                    {#each Object.entries(editingUser.privileges) as [privilege, value]}
                        <div class="flex items-center gap-3 bg-black/20 p-3 rounded-lg">
                            <Checkbox 
                                bind:checked={editingUser.privileges[privilege]}
                                id={`edit-${privilege}`}
                                class="border-white/20 data-[state=checked]:bg-[#ff6b00] data-[state=checked]:border-[#ff6b00]"
                            />
                            <Label for={`edit-${privilege}`} class="text-gray-300">{privilegeLabels[privilege]}</Label>
                        </div>
                    {/each}
                </div>
                <div class="flex justify-end gap-3 pt-4">
                    <Button 
                        variant="outline" 
                        class="border-white/20 hover:border-[#ff6b00] hover:text-white"
                        on:click={() => showEditDialog = false}
                    >
                        Cancel
                    </Button>
                    <Button class="bg-[#ff6b00] hover:bg-[#ff6b00]/90" on:click={saveEditedUser}>
                        <Fa icon={faEdit} class="mr-2" />
                        Save Changes
                    </Button>
                </div>
            </div>
        </DialogContent>
    </Dialog>
{/if}

<!-- Delete Confirmation Dialog -->
{#if userToDelete}
    <Dialog bind:open={showDeleteDialog}>
        <DialogContent class="bg-[#1a1a1a] border-white/10">
            <DialogHeader>
                <DialogTitle class="text-xl font-semibold text-white flex items-center gap-2">
                    <Fa icon={faTrash} class="text-red-500" />
                    Delete Admin User
                </DialogTitle>
                <DialogDescription class="text-gray-400">
                    Are you sure you want to delete this admin user? This action cannot be undone.
                </DialogDescription>
            </DialogHeader>
            <div class="space-y-4">
                <div class="bg-black/20 p-4 rounded-lg">
                    <div class="space-y-2">
                        <p class="text-white flex items-center gap-2">
                            <Fa icon={faUser} class="text-[#ff6b00]" />
                            {userToDelete.name}
                        </p>
                        <p class="text-gray-400 flex items-center gap-2">
                            <Fa icon={faEnvelope} class="text-[#ff6b00]" />
                            {userToDelete.email}
                        </p>
                    </div>
                </div>
                <div class="flex justify-end gap-3">
                    <Button 
                        variant="outline" 
                        class="border-white/20 hover:border-[#ff6b00] hover:text-white"
                        on:click={() => {
                            showDeleteDialog = false;
                            userToDelete = null;
                        }}
                    >
                        Cancel
                    </Button>
                    <Button 
                        variant="destructive"
                        class="hover:bg-red-600/90"
                        on:click={deleteUser}
                    >
                        <Fa icon={faTrash} class="mr-2" />
                        Delete User
                    </Button>
                </div>
            </div>
        </DialogContent>
    </Dialog>
{/if}

================
File: src/routes/games/+layout.svelte
================
<script>
    import { Button } from "$lib/components/ui/button";
    import { Fa } from 'svelte-fa';
    import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
</script>

<div class="container mx-auto px-4 max-w-7xl">
    <div class="">
        <div class="flex items-center gap-4">
            <h1 class="text-3xl font-bold"><slot name="title" /></h1>
        </div>
      
        <slot />
    </div>
</div>

================
File: src/routes/games/pairs/+page.svelte
================
<script>
    import { Card } from "$lib/components/ui/card";
    import { Button } from "$lib/components/ui/button";
    import { onMount, onDestroy } from "svelte";
    import { Fa } from 'svelte-fa';
    import { 
        faArrowLeft, 
        faRotateRight, 
        faCrosshairs, 
        faClock, 
        faGamepad,
        faCoins
    } from '@fortawesome/free-solid-svg-icons';
    import { fade } from 'svelte/transition';
    import confetti from 'canvas-confetti';
    import VictoryModal from "$lib/components/games/VictoryModal.svelte";
    import ScoreIndicator from "$lib/components/games/ScoreIndicator.svelte";
    import { score as totalScore, addPoints } from "$lib/stores/score";
    import { gameStore } from '$lib/stores/gameStore';
    import GameFeedbackModal from '$lib/components/GameFeedbackModal.svelte';
    import { feedbackStore } from '$lib/stores/feedbackStore';

    let matchedPairs = 0;
    let totalPairs;
    let cards = [];
    let flippedCards = [];
    let isLocked = false;
    let showVictoryModal = false;
    let timer = 0;
    let timerInterval;
    let finalTime = 0;
    let finalScore = 0;
    let scoreIndicators = [];
    let mistakes = 0;
    let gameContainer;
    let currentScore = 0;
    let isPaused = false;
    let gameState = null;
    let gameCompleted = false;
    let showFeedback = false;
    let currentRound = $feedbackStore.currentRound;

    $: if ($feedbackStore.currentRound !== currentRound) {
        currentRound = $feedbackStore.currentRound;
        console.log('🔄 Round updated from store:', currentRound);
    }

    // Scoring Constants
    const MATCH_POINTS = 5; // 5 points per match (8 pairs = 40 points)
    const TIME_BONUS_RATE = 2; // 2 points per 5 seconds under par
    const MAX_TIME_BONUS = 20;
    const PERFECT_GAME_BONUS = 30;
    const PAR_TIME = 90; // 1.5 minutes par time

    function calculateTimeBonus() {
        if (timer >= PAR_TIME) return 0;
        const secondsUnderPar = PAR_TIME - timer;
        const bonus = Math.ceil((secondsUnderPar / 5) * TIME_BONUS_RATE);
        return Math.min(bonus, MAX_TIME_BONUS);
    }

    const carImages = [
      '/images/games/pairs/cards/car1.jpg',
      '/images/games/pairs/cards/car2.jpg',
      '/images/games/pairs/cards/car3.jpg',
      '/images/games/pairs/cards/car4.jpg',
      '/images/games/pairs/cards/car5.jpg',
      '/images/games/pairs/cards/car6.jpg',
      '/images/games/pairs/cards/car7.jpg',
      '/images/games/pairs/cards/car8.jpg'
    ];

    function showScoreIndicator(points, x, y) {
        const text = points > 0 ? `+${points}` : (points < 0 ? points : '');
        const color = points > 0 ? 'text-green-400' : (points < 0 ? 'text-red-400' : 'text-orange-400');
        
        // Get container position
        const containerRect = gameContainer.getBoundingClientRect();
        
        // Adjust coordinates relative to container
        const relativeX = x - containerRect.left;
        const relativeY = y - containerRect.top;
        
        scoreIndicators = [...scoreIndicators, {
            id: Math.random(),
            text,
            color,
            x: relativeX,
            y: relativeY,
            opacity: 1,
            scale: 1
        }];

        setTimeout(() => {
            scoreIndicators = scoreIndicators.filter(indicator => indicator.id !== indicator.id);
        }, 1000);
    }

    function initializeGame() { 
      console.log('🎮 Initializing game...', { isPaused, currentRound });
      matchedPairs = 0;
      mistakes = 0;
      flippedCards = [];
      isLocked = false;
      showVictoryModal = false;
      timer = 0;
      scoreIndicators = [];
      currentScore = 0;
      finalScore = 0;
      isPaused = false;
      
      if (timerInterval) clearInterval(timerInterval);
      
      // Create and shuffle cards
      cards = [...carImages, ...carImages]
        .map((img, index) => ({
          id: index,
          image: img,
          isFlipped: false,
          isMatched: false,
          x: 0,
          y: 0
        }))
        .sort(() => Math.random() - 0.5);
            
      totalPairs = carImages.length;
      
      startTimer();
    }

    function handleCardClick(index, event) {
        if (isPaused || isLocked || cards[index].isFlipped || cards[index].isMatched) return;

        const rect = event.target.getBoundingClientRect();
        const x = rect.left + rect.width / 2;
        const y = rect.top + rect.height / 2;

        cards[index].isFlipped = true;
        cards = [...cards];

        flippedCards = [...flippedCards, { index, x, y }];

        if (flippedCards.length === 2) {
            isLocked = true;
            checkMatch();
        }
    }

    function checkMatch() {
        const [first, second] = flippedCards;
        
        if (cards[first.index].image === cards[second.index].image) {
            // Handle match
            cards[first.index].isMatched = true;
            cards[second.index].isMatched = true;
            matchedPairs++;
            currentScore += MATCH_POINTS;

            // Show match points for both cards
            showScoreIndicator(MATCH_POINTS, first.x, first.y);
            showScoreIndicator(MATCH_POINTS, second.x, second.y);
            
            if (matchedPairs === totalPairs) {
                handleGameComplete();
            }
        } else {
            // Handle mismatch
            mistakes++;
            showScoreIndicator(0, (first.x + second.x) / 2, (first.y + second.y) / 2);
            
            setTimeout(() => {
                cards[first.index].isFlipped = false;
                cards[second.index].isFlipped = false;
                cards = [...cards];
            }, 1000);
        }

        // Reset for next turn
        setTimeout(() => {
            flippedCards = [];
            isLocked = false;
        }, 1000);
    }

    function handleMismatch(first, second) {
        mistakes++;
        // Show "X" for mismatches
        showScoreIndicator(0, (first.x + second.x) / 2, (first.y + second.y) / 2);
        
        setTimeout(() => {
            cards[first.index].isFlipped = false;
            cards[second.index].isFlipped = false;
            cards = [...cards];
        }, 1000);
    }

    function handleGameComplete() {
        console.log('🎮 Game completed');
        feedbackStore.incrementRound();
        console.log('🎮 Incremented round to', $feedbackStore.currentRound);
        // Stop the timer
        stopTimer();
        isPaused = true;
        
        const timeBonus = calculateTimeBonus();
        const perfectBonus = mistakes === 0 ? PERFECT_GAME_BONUS : 0;
        finalScore = currentScore + timeBonus + perfectBonus;
        finalTime = timer;
        
        addPoints(finalScore);
        
        showVictoryModal = true;
        fireConfetti();
    }

    function fireConfetti() {
        const count = 200;
        const defaults = {
            origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
            confetti({
                ...defaults,
                ...opts,
                particleCount: Math.floor(count * particleRatio),
                scalar: 1.2
            });
        }

        fire(0.25, {
            spread: 26,
            startVelocity: 55,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.2, {
            spread: 60,
            colors: ['#000000'] // Black
        });
        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8,
            colors: ['#FF6B00', '#000000'] // Porsche colors
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 45,
            colors: ['#000000'] // Black
        });
    }

    function handleVictoryModalClose() {
        console.log('🏆 Victory modal closed');
        showVictoryModal = false;
        
        // Always unpause and initialize game first
        isPaused = false;
        initializeGame();
    }

    function handleGamePause() {
        console.log('⏸️ Game paused');
        isPaused = true;
        if (timerInterval) {
            clearInterval(timerInterval);
        }
    }

    function handleGameResume() {
        console.log('▶️ Game resumed');
        isPaused = false;
        startTimer();
    }

    function handleFeedbackClose() {
        showFeedback = false;
        feedbackStore.markFeedbackShown(currentRound);
    }

    function handleFeedbackComplete() {
        console.log('📝 Feedback completed, starting new game', { currentRound });
        showFeedback = false;
        isPaused = false;
        initializeGame();
    }

    function startTimer() {
        console.log('⏱️ Timer started');
        timerInterval = setInterval(() => {
            timer++;
        }, 1000);
    }

    function stopTimer() {
        console.log('⏱️ Timer stopped');
        clearInterval(timerInterval);
    }

    onMount(() => {
        console.log('🎮 Game component mounted, initializing...', { currentRound: $feedbackStore.currentRound });
        isPaused = false;
        initializeGame();

        // Show feedback after delay if it's an odd round and we haven't shown it yet
        if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
            console.log('📝 Setting up initial feedback delay for round', $feedbackStore.currentRound);
            setTimeout(() => {
                console.log('📝 Showing initial feedback for round', $feedbackStore.currentRound);
                handleGamePause();
                showFeedback = true;
            }, 2000);
        }

        return () => {
            if (timerInterval) clearInterval(timerInterval);
        };
    });

    // Watch for round changes to show feedback on odd rounds
    $: if ($feedbackStore.currentRound % 2 === 1 && !showFeedback && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
        console.log('📝 Setting up feedback delay after round change', $feedbackStore.currentRound);
        setTimeout(() => {
            console.log('📝 Showing feedback for round', $feedbackStore.currentRound);
            handleGamePause();
            showFeedback = true;
        }, 2000);
    }
</script>

<div class="h-full flex flex-col">
    <header class="flex justify-between items-center h-14 px-6 mb-4 bg-gradient-to-r bg-orange-600/10 backdrop-blur-sm border-b border-orange-500/20 rounded-lg">
        <div class="flex items-center gap-6">
            <a href="/" class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-orange-500/20 transition-colors">
                <Fa icon={faArrowLeft} class="text-lg" />
            </a>
            <h1 class="text-xl font-bold tracking-tight">Pick the Pairs</h1>
        </div>
        
        <div class="flex items-center gap-6">
            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faCoins} class="text-orange-400" />
                <span class="font-medium">{currentScore}</span>
            </div>

            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faClock} class="text-orange-400" />
                <span class="font-medium">{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}</span>
            </div>

            <div class="w-px h-8 bg-orange-500/20"></div>
            
            <Button variant="ghost" size="icon" class="w-8 h-8 rounded-full hover:bg-orange-500/20" on:click={initializeGame}>
                <Fa icon={faRotateRight} />
            </Button>
        </div>
    </header>

    <main class="flex-1 p-2 flex items-center justify-center min-h-0">
        <div class="relative w-full max-w-4xl mx-auto" bind:this={gameContainer}>
            {#each scoreIndicators as indicator (indicator.id)}
                <div
                    class="absolute pointer-events-none z-50"
                    style="
                        left: {indicator.x}px;
                        top: {indicator.y}px;
                        transform: translate(-50%, -50%) scale({indicator.scale});
                        opacity: {indicator.opacity};
                    "
                    transition:fade={{ duration: 300 }}
                >
                    {#if indicator.text}
                        <div class="text-2xl font-bold {indicator.color} drop-shadow-lg">
                            {indicator.text}
                        </div>
                    {:else}
                        <div class="text-3xl font-bold text-red-400 drop-shadow-lg">
                            ✕
                        </div>
                    {/if}
                </div>
            {/each}

            <div class="grid grid-cols-4 gap-2 w-full aspect-[4/3]">
                {#each cards as card, index}
                    <button
                        class="relative w-full h-full"
                        class:pointer-events-none={isLocked || isPaused}
                        on:click={(e) => handleCardClick(index, e)}
                    >
                        <div class="absolute inset-0 w-full h-full transition-transform duration-500 transform-style-3d
                                   {card.isFlipped || card.isMatched ? 'rotate-y-180' : ''}">
                            <div class="absolute inset-0 w-full h-full backface-hidden bg-zinc-900 rounded-lg border bg-black/65 dark:bg-black/50">
                                <img src="/images/logos/porsche-logo.png" alt="Card back" class="w-full h-full object-contain p-6" />
                            </div>
                            <div class="absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-white rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden {card.isMatched ? 'opacity-60' : ''}">
                                <div class="w-full h-full p-2">
                                    <img src={card.image} alt="Car" class="w-full h-full object-contain bg-white rounded-lg" />
                                </div>
                            </div>
                        </div>
                    </button>
                {/each}
            </div>
        </div>
    </main>
</div>

<GameFeedbackModal
    bind:show={showFeedback}
    {currentRound}
    onGamePause={handleGamePause}
    onGameResume={handleGameResume}
    onComplete={handleFeedbackComplete}
    onClose={handleFeedbackClose}
/>

{#if showVictoryModal}
    <VictoryModal
        show={showVictoryModal}
        stats={[
            {
                icon: faClock,
                label: "Koha",
                value: `${Math.floor(finalTime / 60)}:${(finalTime % 60).toString().padStart(2, '0')}`,
                bonus: `+${calculateTimeBonus()} pikë`
            },
            {
                icon: faCrosshairs,
                label: "Saktësia",
                value: `${mistakes} gabime`,
                bonus: mistakes === 0 ? `+${PERFECT_GAME_BONUS} pikë` : "Ska bonus"
            }
        ]}
        bonuses={[
            { label: "Pikët bazë", value: currentScore },
            { label: "Bonus kohe", value: calculateTimeBonus() },
            { label: "Loje Perfekte", value: mistakes === 0 ? PERFECT_GAME_BONUS : 0 }
        ]}
        totalScore={finalScore}
        onClose={handleVictoryModalClose}
        onPlayAgain={initializeGame}
        onHome={() => window.location.href = "/"}
        gameTitle="Pick the Pairs"
    />
{/if}

<style>
    .backface-hidden {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    .transform-style-3d {
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    }
    
    .perspective-1000 {
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }
    
    .rotate-y-180 {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }
</style>

================
File: src/routes/games/puzzle/+page.svelte
================
<script>
    import { Card } from "$lib/components/ui/card";
    import { Button } from "$lib/components/ui/button";
    import { Fa } from 'svelte-fa';
    import { faArrowLeft, faRotateRight, faGear, faLayerGroup, faTrophy, faClock, faPlay, faStar, faGamepad, faStairs } from '@fortawesome/free-solid-svg-icons';
    import { onMount, onDestroy } from "svelte";
    import { fade, scale, fly } from 'svelte/transition';
    import { flip } from 'svelte/animate';
    import { cubicOut } from 'svelte/easing';
    import VictoryModal from "$lib/components/games/VictoryModal.svelte";
    import GameFeedbackModal from "$lib/components/GameFeedbackModal.svelte";
    import confetti from 'canvas-confetti';
    import { score as totalScore, addPoints } from "$lib/stores/score";
    import { feedbackStore } from '$lib/stores/feedbackStore';

    let difficulty = 3;
    let pieces = [];
    let moves = 0;
    let timer = 0;
    let timerInterval;
    let isComplete = false;
    let showDifficultyMenu = false;
    let gameStarted = false;
    let selectedPiece = null;
    let firstSelected = null;
    let imageAspectRatio = 1;
    let imageWidth = 0;
    let imageHeight = 0;
    let imageElement;
    let showCompletionOverlay = false;
    let showModal = false;
    let points = 0;
    let moveScore = 0;
    let timeScore = 0;
    let difficultyBonus = 0;
    let roundStartTime;
    let showFeedback = false;
    let isPaused = false;
    let gameState = null;
    let timerStarted = false;
    let currentRound = $feedbackStore.currentRound;
    let emptyIndex = -1;
    let finalScore = 0;
    let shouldShowFeedback = false; // Track if feedback should be shown after delay

    // Track round changes from store
    $: if ($feedbackStore.currentRound !== currentRound) {
        currentRound = $feedbackStore.currentRound;
        console.log('🔄 Round updated from store:', currentRound);
        
        // Only show feedback if we've marked it to be shown (after game switch)
        if (shouldShowFeedback && currentRound % 2 === 1 && !feedbackStore.isFeedbackShown(currentRound)) {
            console.log('📝 Setting up feedback for new round', currentRound);
            setTimeout(() => {
                console.log('📝 Showing feedback for round', currentRound);
                handleGamePause();
                showFeedback = true;
            }, 2000);
        }
    }

    // Check if we should show feedback on initial load
    if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
        console.log('📝 Setting up initial feedback for round', $feedbackStore.currentRound);
        shouldShowFeedback = true;
        setTimeout(() => {
            console.log('📝 Showing initial feedback for round', $feedbackStore.currentRound);
            handleGamePause();
            showFeedback = true;
        }, 2000);
    }

    function handleVictoryModalClose() {
        console.log('🏆 Victory modal closed');
        showModal = false;
        shouldShowFeedback = false; // Reset the flag
        
        // Check if we should show feedback after victory modal closes
        if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
            console.log('📝 Setting up feedback after victory modal close', {
                currentRound: $feedbackStore.currentRound,
                isOddRound: $feedbackStore.currentRound % 2 === 1,
                feedbackShown: feedbackStore.isFeedbackShown($feedbackStore.currentRound)
            });
            setTimeout(() => {
                console.log('📝 Showing feedback after victory', $feedbackStore.currentRound);
                handleGamePause();
                showFeedback = true;
            }, 500);
        } else {
            // If no feedback to show, just initialize the game
            isPaused = false;
            initializeGame();
        }
    }

    function handlePlayAgain() {
        console.log('🎮 Play Again clicked');
        showModal = false;
        
        // Initialize game first
        isPaused = false;
        initializeGame();
        
        // If it's an odd round and feedback hasn't been shown, show it after delay
        if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
            console.log('📝 Setting up feedback after Play Again', $feedbackStore.currentRound);
            setTimeout(() => {
                console.log('📝 Showing feedback after Play Again', $feedbackStore.currentRound);
                handleGamePause();
                showFeedback = true;
            }, 2000);
        }
    }

    function handleGoHome() {
        console.log('🏠 Go Home clicked');
        showModal = false;
        shouldShowFeedback = true; // Mark that feedback should be shown on next game
    }

    function handleGamePause() {
        console.log('⏸️ Game paused');
        isPaused = true;
        if (timerInterval) {
            clearInterval(timerInterval);
        }
    }

    function handleGameResume() {
        console.log('▶️ Game resumed');
        isPaused = false;
        if (gameStarted) {
            startTimer();
        }
    }

    function handleFeedbackClose() {
        console.log('📝 Closing feedback modal');
        console.log('📊 Feedback close state:', {
            currentRound,
            isOddRound: currentRound % 2 === 1,
            feedbackShown: feedbackStore.isFeedbackShown(currentRound)
        });
        
        showFeedback = false;
        feedbackStore.markFeedbackShown(currentRound);
        
        console.log('📝 Feedback marked as shown for round', currentRound);
        console.log('📊 Post-close state:', {
            currentRound,
            isOddRound: currentRound % 2 === 1,
            feedbackShown: feedbackStore.isFeedbackShown(currentRound)
        });

        // Initialize new game after feedback closes
        isPaused = false;
        initializeGame();
    }

    onMount(() => {
        console.log('🎮 Game component mounted, initializing...', { 
            currentRound: $feedbackStore.currentRound,
            isOddRound: $feedbackStore.currentRound % 2 === 1,
            feedbackShown: feedbackStore.isFeedbackShown($feedbackStore.currentRound)
        });
        
        isPaused = false;
        initializeGame();

        return () => {
            if (timerInterval) clearInterval(timerInterval);
        };
    });

    // Scoring Constants
    const BASE_POINTS = 30;  // Base points for completing the puzzle
    const MOVE_PENALTY = 1;  // Penalty per move
    const TIME_PENALTY = 1;  // Points lost per 5 seconds
    const MAX_TIME_BONUS = 20; // Maximum time bonus
    const DIFFICULTY_BONUS = {
        "3x3": 0,     // No bonus for base difficulty
        "4x4": 15,    // +15 points for 4x4
        "5x5": 30     // +30 points for 5x5
    };
    const PERFECT_BONUS = 20; // Bonus for optimal solution (minimum moves)

    const gridSize = 6;
    const totalPieces = gridSize * gridSize;
    
    const carImages = [
        '/images/games/puzzle/puzzle1.jpg',
        '/images/games/puzzle/puzzle2.jpg',
        '/images/games/puzzle/puzzle3.jpg',
        '/images/games/puzzle/puzzle4.jpg',
        '/images/games/puzzle/puzzle5.jpg',
        '/images/games/puzzle/puzzle6.jpg',
        '/images/games/puzzle/puzzle7.jpg',
        '/images/games/puzzle/puzzle8.jpg'
    ];

    let selectedImage = null;
    
    function handleImageLoad() {
        if (imageElement) {
            imageWidth = imageElement.naturalWidth;
            imageHeight = imageElement.naturalHeight;
            imageAspectRatio = imageWidth / imageHeight;
        }
    }

    function createPieces() {
        // Create array of pieces with their correct positions
        pieces = Array.from({ length: difficulty * difficulty }, (_, i) => ({
            id: i,
            currentPos: i,
            correctPos: i,
            isCorrect: false,
            isSwapping: false
        }));

        // Ensure no piece starts in its correct position
        let shuffled = false;
        while (!shuffled) {
            // Fisher-Yates shuffle
            for (let i = pieces.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [pieces[i].currentPos, pieces[j].currentPos] = [pieces[j].currentPos, pieces[i].currentPos];
            }
            
            // Check if any piece is in its correct position
            const hasCorrectPieces = pieces.some(piece => piece.currentPos === piece.correctPos);
            if (!hasCorrectPieces) {
                shuffled = true;
            }
        }

        // Check if any pieces are in correct position after shuffle
        pieces.forEach(piece => {
            checkCorrectPosition(piece);
        });
    }

    function handlePieceClick(piece) {
        if (piece.isCorrect) return; // Don't allow moving correct pieces
        
        if (!firstSelected) {
            firstSelected = piece;
            return;
        }

        if (firstSelected === piece) {
            firstSelected = null;
            return;
        }

        if (firstSelected.isCorrect) {
            firstSelected = piece;
            return;
        }

        // Add swapping class for animation
        firstSelected.isSwapping = true;
        piece.isSwapping = true;

        // Swap positions
        const tempPos = firstSelected.currentPos;
        firstSelected.currentPos = piece.currentPos;
        piece.currentPos = tempPos;

        // Check if pieces are now in correct positions
        checkCorrectPosition(firstSelected);
        checkCorrectPosition(piece);

        moves++;
        
        // Remove swapping class after animation
        setTimeout(() => {
            firstSelected.isSwapping = false;
            piece.isSwapping = false;
            firstSelected = null;
        }, 400);
        
        // Check if puzzle is complete
        checkWinCondition();
        pieces = [...pieces]; // Trigger reactivity
    }

    function checkCorrectPosition(piece) {
        const isCorrect = piece.currentPos === piece.correctPos;
        if (isCorrect !== piece.isCorrect) {
            piece.isCorrect = isCorrect;
        }
    }

    function checkWinCondition() {
        const complete = pieces.every(piece => piece.isCorrect);
        if (complete && !isComplete) {
            isComplete = true;
            feedbackStore.incrementRound();
            clearInterval(timerInterval);
            
            const minMoves = calculateMinimumMoves(`${difficulty}x${difficulty}`);
            const movesPenalty = Math.max(0, (moves - minMoves) * MOVE_PENALTY);
            const timeBonus = calculateTimeBonus();
            const difficultyBonus = DIFFICULTY_BONUS[`${difficulty}x${difficulty}`] || 0;
            const perfectBonus = moves <= minMoves ? PERFECT_BONUS : 0;
            points = Math.max(0, Math.min(100, BASE_POINTS - movesPenalty + timeBonus + difficultyBonus + perfectBonus));
            
            addPoints(points);
            
            showCompletionOverlay = true;
            setTimeout(() => {
                showModal = true;
                fireConfetti();
            }, 1000);
        }
    }

    function calculateMinimumMoves(size) {
        // Calculate minimum moves needed based on puzzle size
        return {
            "3x3": 20,  // Average optimal solution for 3x3
            "4x4": 35,  // Average optimal solution for 4x4
            "5x5": 50   // Average optimal solution for 5x5
        }[size] || 20;
    }

    function calculateTimeBonus() {
        const parTime = {
            "3x3": 60,   // 1 minute par time for 3x3
            "4x4": 120,  // 2 minutes par time for 4x4
            "5x5": 180   // 3 minutes par time for 5x5
        }[`${difficulty}x${difficulty}`] || 60;

        if (timer >= parTime) return 0;
        const secondsUnderPar = parTime - timer;
        const bonus = Math.ceil((secondsUnderPar / 5) * TIME_PENALTY);
        return Math.min(bonus, MAX_TIME_BONUS);
    }

    function startGame() {
        gameStarted = true;
        createPieces();
        moves = 0;
        timer = 0;
        isComplete = false;
        firstSelected = null;
        
        if (timerInterval) clearInterval(timerInterval);
        startTimer();
    }

    function selectImage(image) {
        selectedImage = image;
        gameStarted = false;
        if (timerInterval) clearInterval(timerInterval);
    }

    function setDifficulty(newDifficulty) {
        difficulty = newDifficulty;
        showDifficultyMenu = false;
        if (gameStarted) startGame();
    }

    function initializeGame() {
        // Reset game state
        timer = 0;
        moves = 0;
        showCompletionOverlay = false;
        showModal = false;
        isComplete = false;
        timerStarted = false;
        isPaused = false;
        gameState = null;
        
        // Clear any existing intervals
        if (timerInterval) {
            clearInterval(timerInterval);
            timerInterval = null;
        }

        // Generate new puzzle
        createPieces();

        // Reset scores
        points = 0;
        moveScore = 0;
        timeScore = 0;
        difficultyBonus = 0;
        finalScore = 0;
    }

    function handleRestart() {
        // Clear completion state
        showCompletionOverlay = false;
        showModal = false;
        
        // Initialize new game
        initializeGame();
    }

    function startTimer() {
        if (!timerStarted) {
            timerStarted = true;
            roundStartTime = Date.now();
        }
        timerInterval = setInterval(() => {
            if (!isPaused) timer++;
        }, 1000);
    }

    function fireConfetti() {
        const count = 200;
        const defaults = {
            origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
            confetti({
                ...defaults,
                ...opts,
                particleCount: Math.floor(count * particleRatio),
                scalar: 1.2
            });
        }

        fire(0.25, {
            spread: 26,
            startVelocity: 55,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.2, {
            spread: 60,
            colors: ['#000000'] // Black
        });
        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8,
            colors: ['#FF6B00', '#000000'] // Porsche colors
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 45,
            colors: ['#000000'] // Black
        });
    }

    function pauseGame() {
        isPaused = true;
        if (timerInterval) {
            clearInterval(timerInterval);
        }
    }

    function resumeGame() {
        isPaused = false;
        if (!timerInterval) {
            timerInterval = setInterval(() => {
                if (!isPaused) timer++;
            }, 1000);
        }
    }

    onDestroy(() => {
        if (timerInterval) clearInterval(timerInterval);
    });
</script>

<style>
    .grid {
        display: grid;
        width: min(80vw, 500px);
        aspect-ratio: var(--image-aspect-ratio, 1);
        gap: 2px;
        background: rgba(0, 0, 0, 0.2);
        padding: 2px;
        border-radius: 8px;
        margin: 0 auto;
        grid-template-columns: repeat(var(--grid-size), 1fr);
    }

    .puzzle-piece {
        position: relative;
        width: 100%;
        aspect-ratio: var(--image-aspect-ratio, 1);
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: #1a1a1a;
        border: 2px solid transparent;
        background-image: var(--piece-image);
        background-size: var(--total-size);
        background-position: var(--piece-position);
        opacity: 0.6;
        transform-origin: center;
    }

    .puzzle-piece.selected {
        border-color: rgb(249 115 22);
        transform: scale(1.05);
        z-index: 10;
        opacity: 0.8;
    }

    .puzzle-piece.correct {
        cursor: default;
        opacity: 1;
        transform: scale(1.02);
    }

    .puzzle-piece:not(.correct):hover {
        transform: scale(1.02);
        opacity: 0.8;
    }

    .puzzle-piece.swapping {
        z-index: 20;
        transform: scale(1.1);
    }

    .preview-container {
        position: relative;
        width: min(80vw, 500px);
        margin: 0 auto;
        background: #1a1a1a;
        border-radius: 8px;
        overflow: hidden;
    }

    .preview-image {
        width: 100%;
        display: block;
    }

    .preview-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
    }

    .image-select {
        transition: all 0.3s ease;
    }

    .image-select:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .image-select.selected {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
    }

    .completion-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
    }

    .completion-image {
        max-width: min(80vw, 500px);
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    :global(.difficulty-menu) {
        transform-origin: top right;
    }
</style>

<div class="h-full flex flex-col" in:fade={{ duration: 300 }}>
    <header class="flex justify-between items-center h-14 px-6 mb-4 bg-gradient-to-r bg-orange-600/10 backdrop-blur-sm border-b border-orange-500/20 rounded-lg">
        <div class="flex items-center gap-6">
            <a href="/" class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-orange-500/20 transition-colors">
                <Fa icon={faArrowLeft} class="text-lg" />
            </a>
            <h1 class="text-xl font-bold tracking-tight">Piece the Puzzle</h1>
        </div>
        
        <div class="flex items-center gap-6">
            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faGamepad} class="text-orange-400" />
                <span class="font-medium">{moves} lëvizje</span>
            </div>

            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faClock} class="text-orange-400" />
                <span class="font-medium">{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}</span>
            </div>

            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faStairs} class="text-orange-400" />
                <span class="font-medium">{difficulty}x{difficulty}</span>
            </div>

            <div class="w-px h-8 bg-orange-500/20"></div>
            
            <Button variant="ghost" size="icon" class="w-8 h-8 rounded-full hover:bg-orange-500/20" on:click={() => showDifficultyMenu = true}>
                <Fa icon={faGear} />
            </Button>
            
            <Button variant="ghost" size="icon" class="w-8 h-8 rounded-full hover:bg-orange-500/20" on:click={initializeGame}>
                <Fa icon={faRotateRight} />
            </Button>
        </div>
    </header>

    <div class="flex-1 flex flex-col items-center gap-6 p-4">
        <div class="flex gap-4 overflow-x-auto p-2 max-w-full">
            {#each carImages as image}
                <button
                    class="relative w-16 h-16 rounded-lg overflow-hidden border-2 transition-colors hover:border-orange-500 image-select {selectedImage === image ? 'selected border-orange-500' : 'border-transparent'}"
                    on:click={() => selectImage(image)}
                >
                    <img src={image} alt="Car option" class="w-full h-full object-cover" />
                </button>
            {/each}
        </div>

        {#if selectedImage && !gameStarted}
            <div class="preview-container" transition:scale>
                <img
                    bind:this={imageElement}
                    src={selectedImage}
                    alt="Selected puzzle"
                    class="preview-image"
                    on:load={handleImageLoad}
                />
                <div class="preview-overlay" transition:fade>
                    <div class="text-center">
                        <h2 class="text-2xl font-bold mb-2">Gati për të filluar?</h2>
                        <p class="text-sm text-gray-300 mb-4">(Klikoni dy pjesë për t'i ndërruar vëndin)</p>
                        <Button on:click={startGame}>
                            <Fa icon={faPlay} class="mr-2" />
                            Nis lojën
                        </Button>
                    </div>
                </div>
            </div>
        {:else if gameStarted}
            <div 
                class="grid"
                style="
                    --image-aspect-ratio: {imageAspectRatio};
                    --grid-size: {difficulty};
                "
            >
                {#each pieces as piece (piece.id)}
                    {@const pos = piece.currentPos}
                    {@const x = Math.floor(pos % difficulty)}
                    {@const y = Math.floor(pos / difficulty)}
                    <!-- svelte-ignore a11y_click_events_have_key_events -->
                    <!-- svelte-ignore a11y_no_static_element_interactions -->
                    <div
                        class="puzzle-piece {firstSelected === piece ? 'selected' : ''} {piece.isCorrect ? 'correct' : ''} {piece.isSwapping ? 'swapping' : ''}"
                        on:click={() => handlePieceClick(piece)}
                        animate:flip={{
                            duration: 400,
                            easing: cubicOut,
                            delay: 0
                        }}
                        style="
                            --piece-image: url({selectedImage});
                            --total-size: {difficulty * 100}% {difficulty * 100}%;
                            --piece-position: {-x * 100}% {-y * 100}%;
                        "
                    ></div>
                {/each}
            </div>
        {/if}
    </div>
</div>

{#if showDifficultyMenu}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div 
        class="fixed inset-0 bg-black/20 flex items-center justify-center p-4 z-50"
        transition:fade={{ duration: 200 }}
        on:click|self={() => showDifficultyMenu = false}
    >
        <div 
            class="bg-card w-full max-w-sm rounded-xl shadow-lg overflow-hidden"
            transition:scale={{ duration: 200 }}
        >
            <div class="p-6">
                <h2 class="text-xl font-bold mb-4">Zgjidhni vështirësinë</h2>
                
                <div class="space-y-2">
                    {#each [3, 4, 5] as level}
                        <button
                            class="w-full flex items-center justify-between p-4 rounded-lg transition-colors
                                {difficulty === level ? 'bg-orange-500 text-white' : 'bg-orange-500/10 hover:bg-orange-500/20'}"
                            on:click={() => {
                                setDifficulty(level);
                                showDifficultyMenu = false;
                            }}
                        >
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 flex items-center justify-center rounded-full {difficulty === level ? 'bg-white/20' : 'bg-orange-500/10'}">
                                    <Fa icon={faStar} class={difficulty === level ? 'text-white' : 'text-orange-400'} />
                                </div>
                                <span class="font-medium">{level} x {level}</span>
                            </div>
                            {#if difficulty === level}
                                <div class="text-sm font-medium">Zgjedhur</div>
                            {/if}
                        </button>
                    {/each}
                </div>
            </div>
        </div>
    </div>
{/if}

{#if showCompletionOverlay}
    <div class="completion-overlay" transition:fade={{ duration: 400 }}>
        <img 
            src={selectedImage} 
            alt="Completed puzzle"
            class="completion-image"
            transition:scale={{
                duration: 600,
                easing: cubicOut,
                delay: 200
            }}
        />
    </div>
{/if}

{#if showModal}
    <VictoryModal
        show={showModal}
        stats={[
            {
                icon: faGamepad,
                label: "Lëvizjet",
                value: `${moves} lëvizje`,
                bonus: `${moveScore} pikë`
            },
            {
                icon: faClock,
                label: "Koha",
                value: `${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`,
                bonus: `${timeScore} pikë`
            },
            {
                icon: faStairs,
                label: "Vështirësia",
                value: `${difficulty}x${difficulty}`,
                bonus: `+${difficultyBonus} pikë`
            }
        ]}
        bonuses={[
            { label: "Pikët bazë", value: BASE_POINTS },
            { label: "Bonus Lëvizjesh", value: moveScore },
            { label: "Bonus Kohe", value: timeScore },
            { label: "Bonus Veshtirësie", value: difficultyBonus }
        ]}
        totalScore={points}
        onClose={handleVictoryModalClose}
        onRestart={handleRestart}
        onHome={() => window.location.href = "/"}
        onPlayAgain={handlePlayAgain}
        gameTitle="Piece the Puzzle"
    />
{/if}

{#if showFeedback}
    <GameFeedbackModal
        bind:show={showFeedback}
        onGamePause={handleGamePause}
        onGameResume={handleGameResume}
        onClose={handleFeedbackClose}
    />
{/if}

================
File: src/routes/games/race/+page.svelte
================
<script>
    import { onMount, onDestroy } from "svelte";
    import { Button } from "$lib/components/ui/button";
    import { Fa } from 'svelte-fa';
    import { faArrowLeft, faArrowRight, faRotateRight, faClock, faTachometerAlt, faRoad, faTrophy } from '@fortawesome/free-solid-svg-icons';
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';
    import { theme } from "$lib/stores/theme";
    import { fade } from 'svelte/transition';
    import confetti from 'canvas-confetti';
    import VictoryModal from "$lib/components/games/VictoryModal.svelte";
    import { gameStore } from "$lib/stores/gameStore";
    import { feedbackStore } from '$lib/stores/feedbackStore';
    import GameFeedbackModal from "$lib/components/GameFeedbackModal.svelte";
    
    // Canvas setup
    let canvas;
    let ctx;
    let gameLoop;
    let lastTime = 0;
    
    // Game state
    let isGameStarted = false;
    let isGameOver = false;
    let showGameOverModal = false;
    let showFeedback = false;
    let isPaused = false;
    let score = 0;
    let distance = 0;
    let timer = 0;
    let timerInterval;
    let timeElapsed = 0;
    let finalScore = 0;
    let finalDistance = 0;
    let finalTime = 0;
    let lastScoreDistance = 0; // Track last distance for scoring
    
    // Road properties
    const LANE_COUNT = 3;
    const LANE_WIDTH = 100;
    const ROAD_SPEED = 5;
    let roadOffset = 0;
    
    // Player properties
    const PLAYER_WIDTH = 40;
    const PLAYER_HEIGHT = 70;
    let currentLane = 1;
    let playerX = tweened(0, {
        duration: 150,
        easing: cubicOut
    });
    let carImage;
    
    // Particle effects
    let particles = [];
    const PARTICLE_COUNT = 15;
    const PARTICLE_LIFETIME = 30;
    
    // Tire tracks
    let tireTrackPoints = [];
    const TRACK_LIFETIME = 60;
    const TRACK_POINTS_PER_FRAME = 3;
    let isChangingLane = false;
    let laneChangeDirection = null;
    
    // Speed lines
    let speedLines = [];
    const SPEED_LINE_COUNT = 50;
    const SPEED_LINE_LENGTH = 100;
    
    // Traffic properties
    let trafficCars = [];
    const TRAFFIC_SPAWN_RATE = 0.015;
    const TRAFFIC_SPEED_RANGE = { min: 2, max: 4 };
    const MAX_TRAFFIC_CARS = 5;
    const TRAFFIC_COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'];

    // Add theme detection
    let isDarkMode = false;
    
    // Colors for different themes
    const THEME_COLORS = {
        light: {
            road: '#404040',
            roadLine: '#ffffff',
            roadShoulder: '#505050',
            header: '#f0f0f0',
            gradientTop: '#90EE99', // Light orange
            gradientBottom: '#90EE90', // Light green
            speedLines: 'rgba(255, 255, 255, 0.8)',
            particleBase: '180, 180, 180',
            overlay: 'rgba(255, 179, 71, 0.1)', // Light orange overlay
        },
        dark: {
            road: '#1a1a1a',
            roadLine: '#ffffff',
            roadShoulder: '#2a2a2a',
            header: '#0f172a',
            gradientTop: '#1a2456', // Dark blue
            gradientBottom: '#2a3466', // Slightly lighter blue
            speedLines: 'rgba(255, 255, 255, 0.15)',
            particleBase: '80, 80, 80',
            overlay: 'rgba(26, 36, 86, 0.3)', // Dark blue overlay
        }
    };
    
    $: COLORS = $theme === 'light' ? THEME_COLORS.light : THEME_COLORS.dark;
    
    // Constants for scoring
    const BASE_POINTS_PER_OBSTACLE = 2;
    const DISTANCE_BONUS_THRESHOLD = 1000; // meters
    const DISTANCE_BONUS_POINTS = 10;
    const SURVIVAL_TIME_BONUS = 10;
    const MAX_TIME_BONUS = 20;
    const PAR_TIME = 60;

    function calculateTimeBonus(time) {
        if (time < PAR_TIME) return 0; // Need to survive at least a minute
        const timeBonus = Math.ceil((time - PAR_TIME) / 10); // 1 point per 10 seconds after par
        return Math.min(timeBonus, MAX_TIME_BONUS);
    }

    function calculateDistanceBonus(distance) {
        return Math.floor(distance / DISTANCE_BONUS_THRESHOLD) * DISTANCE_BONUS_POINTS;
    }

    onMount(() => {
        // Check initial theme
        isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        // Listen for theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            isDarkMode = e.matches;
        });
        
        canvas = document.querySelector('#gameCanvas');
        if (canvas) {
            ctx = canvas.getContext('2d');
            resizeCanvas();
            initGame();
            window.addEventListener('resize', resizeCanvas);
        }
        
        // Load car image
        carImage = new Image();
        carImage.src = '/images/games/race/car.png';
        carImage.onload = () => {
            initGame();
        };
        
        window.addEventListener('keydown', handleKeydown);

        // Check if we need to show feedback on first load
        console.log('📝 Checking feedback state on load:', {
            currentRound: $feedbackStore.currentRound,
            isOddRound: $feedbackStore.currentRound % 2 === 1,
            feedbackShown: feedbackStore.isFeedbackShown($feedbackStore.currentRound)
        });
        
        if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
            console.log('📝 Showing feedback on first load');
            handleGamePause();
            showFeedback = true;
            // Reset game state for feedback
            isGameStarted = false;
            isGameOver = false;
            score = 0;
            distance = 0;
            timer = 0;
            if (timerInterval) clearInterval(timerInterval);
            trafficCars = [];
            currentLane = 1;
            playerX.set(getLaneX(currentLane));
        }
    });
    
    onDestroy(() => {
        window.removeEventListener('keydown', handleKeydown);
        if (gameLoop) cancelAnimationFrame(gameLoop);
        if (timerInterval) clearInterval(timerInterval);
    });
    
    function createLaneChangeParticles(direction) {
        const y = canvas.height - PLAYER_HEIGHT - 20;
        const particleX = direction === 'left' ? 
            $playerX + PLAYER_WIDTH : 
            $playerX;
            
        for (let i = 0; i < PARTICLE_COUNT; i++) {
            const speed = 2 + Math.random() * 2;
            particles.push({
                x: particleX + (Math.random() * 10 - 5),
                y: y + PLAYER_HEIGHT * (0.7 + Math.random() * 0.2),
                vx: direction === 'left' ? speed : -speed,
                vy: ROAD_SPEED * (0.3 + Math.random() * 0.2),
                life: PARTICLE_LIFETIME,
                size: 2 + Math.random() * 2,
                color: `rgba(${COLORS.particleBase}, ${0.8 + Math.random() * 0.2})`
            });
        }
    }
    
    function createTireTrack() {
        const y = canvas.height - PLAYER_HEIGHT - 20;
        const leftWheel = $playerX + PLAYER_WIDTH * 0.2;
        const rightWheel = $playerX + PLAYER_WIDTH * 0.8;
        
        for (let i = 0; i < TRACK_POINTS_PER_FRAME; i++) {
            const offset = (Math.random() - 0.5) * 2;
            const wheelOffset = Math.random() * 3;
            const forwardOffset = Math.random() * 10;
            
            const baseY = y + PLAYER_HEIGHT * 0.8 + forwardOffset;
            
            tireTrackPoints.push({
                x: leftWheel + offset + (laneChangeDirection === 'left' ? -wheelOffset : wheelOffset),
                y: baseY,
                vy: ROAD_SPEED * (0.8 + Math.random() * 0.4),
                life: TRACK_LIFETIME,
                width: 3 + Math.random() * 2
            });
            
            tireTrackPoints.push({
                x: rightWheel + offset + (laneChangeDirection === 'left' ? -wheelOffset : wheelOffset),
                y: baseY,
                vy: ROAD_SPEED * (0.8 + Math.random() * 0.4),
                life: TRACK_LIFETIME,
                width: 3 + Math.random() * 2
            });
        }
    }
    
    function updateParticles() {
        particles = particles.filter(p => {
            p.x += p.vx;
            p.y += p.vy;
            p.life--;
            return p.life > 0;
        });
    }
    
    function updateTireTracks() {
        tireTrackPoints = tireTrackPoints.filter(track => {
            track.y += track.vy;
            track.life--;
            return track.life > 0;
        });
        
        if (isChangingLane) {
            createTireTrack();
        }
    }
    
    function drawParticles() {
        particles.forEach(p => {
            const alpha = p.life / PARTICLE_LIFETIME;
            ctx.fillStyle = p.color.replace(')', `, ${alpha})`);
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size * (alpha * 0.8 + 0.2), 0, Math.PI * 2);
            ctx.fill();
            
            // Add a white highlight for more contrast
            ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.3})`;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size * 0.6 * (alpha * 0.8 + 0.2), 0, Math.PI * 2);
            ctx.fill();
        });
    }
    
    function drawTireTracks() {
        tireTrackPoints.forEach(track => {
            const alpha = (track.life / TRACK_LIFETIME) * 0.7;
            ctx.fillStyle = `rgba(${COLORS.particleBase}, ${alpha})`;
            ctx.beginPath();
            ctx.arc(track.x, track.y, track.width * (track.life / TRACK_LIFETIME), 0, Math.PI * 2);
            ctx.fill();
            
            // Add highlight
            ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.3})`;
            ctx.beginPath();
            ctx.arc(track.x, track.y, track.width * 0.6 * (track.life / TRACK_LIFETIME), 0, Math.PI * 2);
            ctx.fill();
        });
    }
    
    function drawHeadlights() {
        if ($theme === 'dark' && canvas && ctx) {
            const y = canvas.height - PLAYER_HEIGHT - 20;
            const centerX = $playerX + PLAYER_WIDTH/2;
            
            // Add ambient glow effect
            const ambientGlow = ctx.createRadialGradient(
                centerX, y + PLAYER_HEIGHT * 0.2,
                0,
                centerX, y + PLAYER_HEIGHT * 0.2,
                PLAYER_WIDTH * 6
            );
            ambientGlow.addColorStop(0, 'rgba(255, 255, 200, 0.1)');
            ambientGlow.addColorStop(0.5, 'rgba(255, 255, 200, 0.05)');
            ambientGlow.addColorStop(1, 'rgba(255, 255, 200, 0)');
            
            ctx.fillStyle = ambientGlow;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Create gradient for headlight beam
            const gradient = ctx.createRadialGradient(
                centerX, y + PLAYER_HEIGHT * 0.2,
                0,
                centerX, y - PLAYER_HEIGHT * 3,
                PLAYER_WIDTH * 4
            );
            
            gradient.addColorStop(0, 'rgba(255, 255, 200, 0.5)');
            gradient.addColorStop(0.2, 'rgba(255, 255, 200, 0.3)');
            gradient.addColorStop(0.6, 'rgba(255, 255, 200, 0.15)');
            gradient.addColorStop(1, 'rgba(255, 255, 200, 0)');
            
            // Draw main beam with larger spread
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(centerX - PLAYER_WIDTH * 0.4, y + PLAYER_HEIGHT * 0.2);
            ctx.lineTo(centerX - PLAYER_WIDTH * 2.5, y - PLAYER_HEIGHT * 4);
            ctx.lineTo(centerX + PLAYER_WIDTH * 2.5, y - PLAYER_HEIGHT * 4);
            ctx.lineTo(centerX + PLAYER_WIDTH * 0.4, y + PLAYER_HEIGHT * 0.2);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // Add headlight glows and taillights
            const lights = [
                // Headlights
                {
                    x: centerX - PLAYER_WIDTH * 0.2,
                    y: y + PLAYER_HEIGHT * 0.1,
                    color: '255, 255, 200',
                    size: PLAYER_WIDTH * 0.4,
                    intensity: 0.8
                },
                {
                    x: centerX + PLAYER_WIDTH * 0.2,
                    y: y + PLAYER_HEIGHT * 0.1,
                    color: '255, 255, 200',
                    size: PLAYER_WIDTH * 0.4,
                    intensity: 0.8
                },
                // Taillights
                {
                    x: centerX - PLAYER_WIDTH * 0.3,
                    y: y + PLAYER_HEIGHT * 0.95,
                    color: '255, 30, 30',
                    size: PLAYER_WIDTH * 0.3,
                    intensity: 0.9
                },
                {
                    x: centerX + PLAYER_WIDTH * 0.3,
                    y: y + PLAYER_HEIGHT * 0.95,
                    color: '255, 30, 30',
                    size: PLAYER_WIDTH * 0.3,
                    intensity: 0.9
                }
            ];
            
            // Add red glow behind the car
            const tailGlow = ctx.createRadialGradient(
                centerX, y + PLAYER_HEIGHT * 0.8,
                0,
                centerX, y + PLAYER_HEIGHT * 0.8,
                PLAYER_WIDTH * 1.5
            );
            tailGlow.addColorStop(0, 'rgba(255, 0, 0, 0.1)');
            tailGlow.addColorStop(0.5, 'rgba(255, 0, 0, 0.05)');
            tailGlow.addColorStop(1, 'rgba(255, 0, 0, 0)');
            
            ctx.fillStyle = tailGlow;
            ctx.fillRect(centerX - PLAYER_WIDTH, y + PLAYER_HEIGHT * 0.5, PLAYER_WIDTH * 2, PLAYER_HEIGHT);
            
            lights.forEach(light => {
                // Outer glow
                const outerGlow = ctx.createRadialGradient(
                    light.x, light.y, 0,
                    light.x, light.y, light.size
                );
                outerGlow.addColorStop(0, `rgba(${light.color}, ${light.intensity})`);
                outerGlow.addColorStop(0.5, `rgba(${light.color}, ${light.intensity * 0.4})`);
                outerGlow.addColorStop(1, `rgba(${light.color}, 0)`);
                
                ctx.beginPath();
                ctx.arc(light.x, light.y, light.size, 0, Math.PI * 2);
                ctx.fillStyle = outerGlow;
                ctx.fill();
                
                // Inner bright core
                const innerGlow = ctx.createRadialGradient(
                    light.x, light.y, 0,
                    light.x, light.y, light.size * 0.5
                );
                innerGlow.addColorStop(0, `rgba(${light.color}, 1)`);
                innerGlow.addColorStop(0.5, `rgba(${light.color}, ${light.intensity})`);
                innerGlow.addColorStop(1, `rgba(${light.color}, 0)`);
                
                ctx.beginPath();
                ctx.arc(light.x, light.y, light.size * 0.5, 0, Math.PI * 2);
                ctx.fillStyle = innerGlow;
                ctx.fill();
            });
            
            ctx.restore();
        }
    }
    
    function drawTrafficLights(car, x, y) {
        if ($theme === 'dark' && canvas && ctx) {
            const centerX = x + car.width/2;
            
            // Add ambient glow effect
            const ambientGlow = ctx.createRadialGradient(
                centerX, y + car.height * 0.1,
                0,
                centerX, y + car.height * 0.1,
                car.width * 3
            );
            ambientGlow.addColorStop(0, 'rgba(255, 255, 200, 0.1)');
            ambientGlow.addColorStop(0.5, 'rgba(255, 255, 200, 0.05)');
            ambientGlow.addColorStop(1, 'rgba(255, 255, 200, 0)');
            
            ctx.fillStyle = ambientGlow;
            ctx.fillRect(x - car.width * 2, y - car.height * 2, car.width * 6, car.height * 6);
            
            // Create gradient for headlight beam
            const gradient = ctx.createRadialGradient(
                centerX, y + car.height * 0.2,
                0,
                centerX, y - car.height * 3,
                car.width * 4
            );
            
            gradient.addColorStop(0, 'rgba(255, 255, 200, 0.5)');
            gradient.addColorStop(0.2, 'rgba(255, 255, 200, 0.3)');
            gradient.addColorStop(0.6, 'rgba(255, 255, 200, 0.15)');
            gradient.addColorStop(1, 'rgba(255, 255, 200, 0)');
            
            // Draw main beam with larger spread
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(centerX - car.width * 0.4, y + car.height * 0.2);
            ctx.lineTo(centerX - car.width * 2.5, y - car.height * 4);
            ctx.lineTo(centerX + car.width * 2.5, y - car.height * 4);
            ctx.lineTo(centerX + car.width * 0.4, y + car.height * 0.2);
            ctx.closePath();
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // Add headlight glows and taillights
            const lights = [
                // Headlights
                {
                    x: centerX - car.width * 0.3,
                    y: y + car.height * 0.2,
                    color: '255, 255, 200',
                    size: car.width * 0.4,
                    intensity: 0.8
                },
                {
                    x: centerX + car.width * 0.2,
                    y: y + car.height * 0.1,
                    color: '255, 255, 200',
                    size: car.width * 0.4,
                    intensity: 0.8
                },
                // Taillights
                {
                    x: centerX - car.width * 0.3,
                    y: y + car.height * 0.95,
                    color: '255, 30, 30',
                    size: car.width * 0.3,
                    intensity: 0.9
                },
                {
                    x: centerX + car.width * 0.3,
                    y: y + car.height * 0.95,
                    color: '255, 30, 30',
                    size: car.width * 0.3,
                    intensity: 0.9
                }
            ];

            // Add red glow behind the car
            const tailGlow = ctx.createRadialGradient(
                centerX, y + car.height * 0.8,
                0,
                centerX, y + car.height * 0.8,
                car.width * 1.5
            );
            tailGlow.addColorStop(0, 'rgba(255, 0, 0, 0.1)');
            tailGlow.addColorStop(0.5, 'rgba(255, 0, 0, 0.05)');
            tailGlow.addColorStop(1, 'rgba(255, 0, 0, 0)');
            
            ctx.fillStyle = tailGlow;
            ctx.fillRect(centerX - car.width, y + car.height * 0.5, car.width * 2, car.height);

            lights.forEach(light => {
                // Outer glow
                const outerGlow = ctx.createRadialGradient(
                    light.x, light.y, 0,
                    light.x, light.y, light.size
                );
                outerGlow.addColorStop(0, `rgba(${light.color}, ${light.intensity})`);
                outerGlow.addColorStop(0.5, `rgba(${light.color}, ${light.intensity * 0.2})`);
                outerGlow.addColorStop(1, `rgba(${light.color}, 0)`);
                
                ctx.beginPath();
                ctx.arc(light.x, light.y, light.size, 0, Math.PI * 2);
                ctx.fillStyle = outerGlow;
                ctx.fill();
                
                // Inner bright core
                const innerGlow = ctx.createRadialGradient(
                    light.x, light.y, 0,
                    light.x, light.y, light.size * 0.5
                );
                innerGlow.addColorStop(0, `rgba(${light.color}, 1)`);
                innerGlow.addColorStop(0.5, `rgba(${light.color}, ${light.intensity})`);
                innerGlow.addColorStop(1, `rgba(${light.color}, 0)`);
                
                ctx.beginPath();
                ctx.arc(light.x, light.y, light.size * 0.5, 0, Math.PI * 2);
                ctx.fillStyle = innerGlow;
                ctx.fill();
            });
        }
    }
    
    function drawOverlay() {
        ctx.fillStyle = COLORS.overlay;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    function initSpeedLines() {
        speedLines = [];
        for (let i = 0; i < SPEED_LINE_COUNT; i++) {
            speedLines.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                length: SPEED_LINE_LENGTH * (0.5 + Math.random() * 0.5),
                speed: ROAD_SPEED * (0.8 + Math.random() * 0.4),
                opacity: 0.3 + Math.random() * 0.3
            });
        }
    }
    
    function updateSpeedLines() {
        speedLines.forEach(line => {
            line.y += line.speed;
            if (line.y > canvas.height) {
                line.y = -line.length;
                line.x = Math.random() * canvas.width;
            }
        });
    }
    
    function drawSpeedLines() {
        ctx.strokeStyle = COLORS.speedLines;
        ctx.lineWidth = 1;
        
        speedLines.forEach(line => {
            const alpha = line.opacity;
            ctx.strokeStyle = COLORS.speedLines.replace(')', `, ${alpha})`);
            ctx.beginPath();
            ctx.moveTo(line.x, line.y);
            ctx.lineTo(line.x, line.y + line.length);
            ctx.stroke();
        });
    }
    
    function createTrafficCar() {
        // Don't spawn if we already have too many cars
        if (trafficCars.length >= MAX_TRAFFIC_CARS) {
            return null;
        }

        // Get all occupied lanes at spawn position
        const occupiedLanes = new Set(
            trafficCars
                .filter(car => Math.abs(car.y - (-PLAYER_HEIGHT)) < PLAYER_HEIGHT * 6)
                .map(car => car.lane)
        );

        // If all but one lane is occupied, don't spawn a new car
        if (occupiedLanes.size >= LANE_COUNT - 1) {
            return null;
        }

        // Get available lanes
        const availableLanes = Array.from({ length: LANE_COUNT }, (_, i) => i)
            .filter(lane => !occupiedLanes.has(lane));

        // Choose a random available lane
        const lane = availableLanes[Math.floor(Math.random() * availableLanes.length)];
        const speed = TRAFFIC_SPEED_RANGE.min + Math.random() * (TRAFFIC_SPEED_RANGE.max - TRAFFIC_SPEED_RANGE.min);

        return {
            lane,
            y: -PLAYER_HEIGHT,
            speed,
            width: PLAYER_WIDTH * 0.9,
            height: PLAYER_HEIGHT * 0.9
        };
    }

    function updateTraffic(deltaTime) {
        // Only spawn if we have room for more cars
        if (trafficCars.length < MAX_TRAFFIC_CARS && 
            Math.random() < TRAFFIC_SPAWN_RATE && 
            isGameStarted && 
            !isGameOver) {
            const newCar = createTrafficCar();
            if (newCar) {
                trafficCars.push(newCar);
            }
        }

        // Update existing traffic
        for (let i = 0; i < trafficCars.length; i++) {
            const car = trafficCars[i];
            const nextY = car.y + car.speed;
            
            // Check for collision with car in front
            const carInFront = trafficCars.find(otherCar => 
                otherCar !== car && 
                otherCar.lane === car.lane && 
                otherCar.y > car.y && 
                otherCar.y < nextY + car.height * 2
            );

            if (!carInFront) {
                car.y = nextY;
            } else {
                car.speed = Math.min(car.speed, carInFront.speed);
            }
        }

        // Remove cars that are off screen
        trafficCars = trafficCars.filter(car => car.y < canvas.height + PLAYER_HEIGHT);
    }

    function drawTraffic() {
        // Sort cars by y position to draw them in the correct order
        const sortedCars = [...trafficCars].sort((a, b) => a.y - b.y);
        
        sortedCars.forEach(car => {
            const x = (canvas.width - LANE_COUNT * LANE_WIDTH) / 2 + car.lane * LANE_WIDTH + (LANE_WIDTH - car.width) / 2;
            
            // Draw lights first (behind the car)
            drawTrafficLights(car, x, car.y);
            
            // Draw white background with rounded corners
            ctx.save();
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            const radius = 10;
            ctx.roundRect(x, car.y, car.width, car.height, radius);
            ctx.fill();
            ctx.restore();
            
            // Draw car image
            ctx.save();
            ctx.translate(x + car.width / 2, car.y + car.height / 2);
            ctx.drawImage(carImage, -car.width / 2, -car.height / 2, car.width, car.height);
            ctx.restore();
        });
    }
    
    function initGame() {
        if (!canvas) return;
        
        // Reset canvas dimensions
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
        
        // Clear all game state
        isGameStarted = false;
        isGameOver = false;
        showGameOverModal = false;
        currentLane = 1;
        distance = 0;
        score = 0;
        timer = 0;
        lastScoreDistance = 0;
        roadOffset = 0;
        trafficCars = [];
        particles = [];
        tireTrackPoints = [];
        speedLines = [];
        
        // Reset player position
        playerX.set(getLaneX(currentLane));
        
        // Clear any existing intervals
        if (timerInterval) clearInterval(timerInterval);
        
        // Initialize effects
        initSpeedLines();
        
        // Start game loop
        if (gameLoop) cancelAnimationFrame(gameLoop);
        lastTime = null;
        gameLoop = requestAnimationFrame(updateGame);
    }
    
    function startGame() {
        isGameStarted = true;
        
        // Start the timer
        if (timerInterval) clearInterval(timerInterval);
        timerInterval = setInterval(() => {
            if (isGameStarted && !isGameOver) {
                timer++;
            }
        }, 1000);
    }

    function updateGame(timestamp) {
        if (!lastTime) lastTime = timestamp;
        const deltaTime = timestamp - lastTime;
        lastTime = timestamp;
        
        if (!isGameOver) {
            // Update road position
            roadOffset = (roadOffset + ROAD_SPEED) % (LANE_WIDTH / 2);
            
            // Only update distance and score if game is started
            if (isGameStarted) {
                distance += ROAD_SPEED / 10;
                updateScore();
            }
            
            // Update effects
            updateParticles();
            updateTireTracks();
            updateSpeedLines();
            updateTraffic(deltaTime);
            
            // Check collision
            if (checkCollision()) {
                endGame();
            }
            
            // Clear and render
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawRoad();
            drawTireTracks();
            drawParticles();
            drawHeadlights();
            drawTraffic();
            drawPlayer();
            drawOverlay();
            
            gameLoop = requestAnimationFrame(updateGame);
        }
    }
    
    function updateScore() {
        // Add 1 point for every 1000 meters
        const currentMeter = Math.floor(distance / 100);
        const lastMeter = Math.floor(lastScoreDistance / 100);
        
        if (currentMeter > lastMeter) {
            score += (currentMeter - lastMeter);
        }
        
        // Add bonus points for every 5000 meters
        const currentFiveK = Math.floor(distance / 1000);
        const lastFiveK = Math.floor(lastScoreDistance / 1000);
        
        if (currentFiveK > lastFiveK) {
            score += 50 * (currentFiveK - lastFiveK);
        }
        
        lastScoreDistance = distance;
    }
    
    function drawRoad() {
        const totalRoadWidth = LANE_WIDTH * LANE_COUNT;
        const roadStart = (canvas.width - totalRoadWidth) / 2;
        
        // Draw background gradient
        const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
        gradient.addColorStop(0, COLORS.gradientTop);
        gradient.addColorStop(1, COLORS.gradientBottom);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Draw speed lines
        drawSpeedLines();
        
        // Draw shoulders with gradient
        const shoulderGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
        shoulderGradient.addColorStop(0, COLORS.roadShoulder);
        shoulderGradient.addColorStop(1, COLORS.road);
        ctx.fillStyle = shoulderGradient;
        ctx.fillRect(roadStart - 20, 0, 20, canvas.height);
        ctx.fillRect(roadStart + totalRoadWidth, 0, 20, canvas.height);
        
        // Draw main road
        ctx.fillStyle = COLORS.road;
        ctx.fillRect(roadStart, 0, totalRoadWidth, canvas.height);
        
        // Draw lane lines
        ctx.strokeStyle = COLORS.roadLine;
        ctx.lineWidth = 4;
        
        for (let i = 1; i < LANE_COUNT; i++) {
            const x = roadStart + (i * LANE_WIDTH);
            ctx.beginPath();
            
            // Draw dashed lines
            for (let y = -roadOffset; y < canvas.height; y += 40) {
                ctx.moveTo(x, y);
                ctx.lineTo(x, y + 20);
            }
            ctx.stroke();
        }
    }
    
    function drawPlayer() {
        const y = canvas.height - PLAYER_HEIGHT - 20;
        
        // Draw car shadow
        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        ctx.beginPath();
        ctx.ellipse($playerX + PLAYER_WIDTH/2, y + PLAYER_HEIGHT - 5, 
                    PLAYER_WIDTH * 0.6, PLAYER_HEIGHT * 0.2, 0, 0, Math.PI * 2);
        ctx.fill();
        
        // Draw car background
        ctx.save();
        ctx.translate($playerX + PLAYER_WIDTH/2, y + PLAYER_HEIGHT/2);
        
        // Draw simple rounded rectangle background
        ctx.fillStyle = '#FF6B00';
        ctx.beginPath();
        const rectWidth = PLAYER_WIDTH * 0.9;
        const rectHeight = PLAYER_HEIGHT * 0.95;
        const radius = 8;
        
        ctx.roundRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight, radius);
        ctx.fill();
        
        // Draw car image
        if (carImage) {
            ctx.drawImage(
                carImage, 
                -PLAYER_WIDTH/2, 
                -PLAYER_HEIGHT/2, 
                PLAYER_WIDTH, 
                PLAYER_HEIGHT
            );
        }
        
        ctx.restore();
    }
    
    function getLaneX(lane) {
        const totalRoadWidth = LANE_WIDTH * LANE_COUNT;
        const roadStart = (canvas.width - totalRoadWidth) / 2;
        return roadStart + (lane * LANE_WIDTH) + (LANE_WIDTH - PLAYER_WIDTH) / 2;
    }

    function startLaneChange(direction) {
        isChangingLane = true;
        laneChangeDirection = direction;
        createLaneChangeParticles(direction);
    }
    
    function endLaneChange() {
        isChangingLane = false;
        laneChangeDirection = null;
    }

    function handleKeydown(e) {
        if (!isGameStarted || isGameOver) return;
        
        switch(e.key) {
            case 'ArrowLeft':
                if (currentLane > 0) {
                    currentLane--;
                    playerX.set(getLaneX(currentLane));
                    startLaneChange('left');
                    setTimeout(endLaneChange, 300);
                }
                break;
            case 'ArrowRight':
                if (currentLane < LANE_COUNT - 1) {
                    currentLane++;
                    playerX.set(getLaneX(currentLane));
                    startLaneChange('right');
                    setTimeout(endLaneChange, 300);
                }
                break;
        }
    }

    function handleSteeringClick(direction) {
        if (!isGameStarted || isGameOver) return;
        
        if (direction === 'left' && currentLane > 0) {
            currentLane--;
            playerX.set(getLaneX(currentLane));
            startLaneChange('left');
            setTimeout(endLaneChange, 300);
        } else if (direction === 'right' && currentLane < LANE_COUNT - 1) {
            currentLane++;
            playerX.set(getLaneX(currentLane));
            startLaneChange('right');
            setTimeout(endLaneChange, 300);
        }
    }
    
    function checkCollision() {
        const playerY = canvas.height - PLAYER_HEIGHT - 20;
        const playerLeft = $playerX;
        const playerRight = $playerX + PLAYER_WIDTH;
        
        return trafficCars.some(car => {
            const carLeft = (canvas.width - LANE_COUNT * LANE_WIDTH) / 2 + car.lane * LANE_WIDTH + (LANE_WIDTH - car.width) / 2;
            const carRight = carLeft + car.width;
            
            // Check if cars overlap horizontally and vertically
            return (
                playerRight > carLeft &&
                playerLeft < carRight &&
                playerY < car.y + car.height &&
                playerY + PLAYER_HEIGHT > car.y
            );
        });
    }
    
    function endGame() {
        isGameOver = true;
        clearInterval(timerInterval);
        finalTime = timer;
        finalDistance = Math.floor(distance);
        
        const baseScore = Math.floor(distance / 100) * BASE_POINTS_PER_OBSTACLE;
        const timeBonus = calculateTimeBonus(finalTime);
        const distanceBonus = calculateDistanceBonus(finalDistance);
        
        finalScore = baseScore + timeBonus + distanceBonus;
        
        // Add to total score
        gameStore.addScore('race', finalScore);
        
        // Show feedback on first game completion
        if ($feedbackStore.currentRound === 0) {
            setTimeout(() => {
                handleGamePause();
                showFeedback = true;
                // Reset game state for feedback
                isGameStarted = false;
                isGameOver = false;
                score = 0;
                distance = 0;
                timer = 0;
                if (timerInterval) clearInterval(timerInterval);
                trafficCars = [];
                currentLane = 1;
                playerX.set(getLaneX(currentLane));
            }, 2000);
        }
        
        feedbackStore.incrementRound();
        
        showGameOverModal = true;
        setTimeout(fireConfetti, 100);
    }

    function fireConfetti() {
        const count = 200;
        const defaults = {
            origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
            confetti({
                ...defaults,
                ...opts,
                particleCount: Math.floor(count * particleRatio),
                scalar: 1.2
            });
        }

        fire(0.25, {
            spread: 26,
            startVelocity: 55,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.2, {
            spread: 60,
            colors: ['#000000'] // Black
        });
        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8,
            colors: ['#FF6B00', '#000000'] // Porsche colors
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 45,
            colors: ['#000000'] // Black
        });
    }

    function resizeCanvas() {
        if (canvas && canvas.parentElement) {
            canvas.width = canvas.parentElement.clientWidth;
            canvas.height = canvas.parentElement.clientHeight;
        }
    }

    function handleVictoryModalClose() {
        showGameOverModal = false;
        initGame();
    }

    function handlePlayAgain() {
        showGameOverModal = false;
        initGame();
        
        // If it's an odd round and feedback hasn't been shown, show it after delay
        if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
            setTimeout(() => {
                handleGamePause();
                showFeedback = true;
                // Reset game state when feedback shows
                isGameStarted = false;
                isGameOver = false;
                score = 0;
                distance = 0;
                timer = 0;
                if (timerInterval) clearInterval(timerInterval);
                trafficCars = [];
                currentLane = 1;
                playerX.set(getLaneX(currentLane));
            }, 2000);
        }
    }

    function handleGoHome() {
        showGameOverModal = false;
        window.location.href = "/";
    }

    function handleGamePause() {
        isPaused = true;
        if (timerInterval) clearInterval(timerInterval);
    }

    function handleGameResume() {
        isPaused = false;
        if (!timerInterval && isGameStarted && !isGameOver) {
            timerInterval = setInterval(() => {
                if (!isPaused) timer++;
            }, 1000);
        }
    }

    function handleFeedbackClose() {
        showFeedback = false;
        handleGameResume();
    }
</script>

<div class="h-full flex flex-col">
    <header class="flex justify-between items-center h-14 px-6 mb-4 text-white dark:text-white bg-gradient-to-r bg-orange-600/20 backdrop-blur-lg border-b border-orange-500/30 rounded-lg z-10">
        <div class="flex items-center gap-6">
            <a href="/" class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-orange-600 transition-colors">
                <Fa icon={faArrowLeft} class="text-lg" />
            </a>
            <h1 class="text-lg font-semibold">Race the Road</h1>
        </div>
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faClock} class="text-orange-400"/>
                <span>{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}</span>
            </div>
            <div class="flex items-center gap-2 bg-orange-500/10 px-4 py-2 rounded-lg">
                <Fa icon={faRoad} class="text-orange-400"/>
                <span>{Math.floor(distance)}m</span>
            </div>
        </div>
    </header>

    <div class="absolute top-0 left-[50%] translate-x-[-50%] h-full">
        <div class="relative aspect-[16/9] h-full borderorder-slate-700 rounded-lg overflow-hidden bg-slate-900">
            <canvas
                id="gameCanvas"
                class="absolute inset-0 w-full h-full"
            ></canvas>

            {#if !isGameStarted}
                <div class="absolute inset-0 flex items-center justify-center bg-black/50 text-white">
                    <div class="text-center">
                        <h3 class="text-3xl font-bold mb-4">Race the Road</h3>
                        <p class="mb-4 text-slate-300">
                            Shpejto përmes trafikut dhe shiko sa larg mund të arrish.<br>
                        </p>
                        <Button 
                            on:click={() => { startGame(); }} 
                            class="bg-orange-500 text-white hover:bg-orange-600"
                        >
                            Nis lojën
                        </Button>
                    </div>
                </div>
            {/if}

            {#if showGameOverModal}
                <VictoryModal
                    show={true}
                    stats={[
                        {
                            icon: faRoad,
                            label: "Distanca",
                            value: `${finalDistance}m`
                        },
                        {
                            icon: faClock,
                            label: "Koha",
                            value: `${Math.floor(finalTime / 60)}:${(finalTime % 60).toString().padStart(2, '0')}`
                        },
                        {
                            icon: faTrophy,
                            label: "Pikët totale",
                            value: finalScore
                        }
                    ]}
                    bonuses={[
                        {
                            label: "Pikët bazë",
                            value: Math.floor(finalDistance / 100) * BASE_POINTS_PER_OBSTACLE
                        },
                        {
                            label: "Bonus Kohe",
                            value: calculateTimeBonus(finalTime)
                        },
                        {
                            label: "Bonus Distance",
                            value: calculateDistanceBonus(finalDistance)
                        }
                    ]}
                    totalScore={finalScore}
                    onClose={handleVictoryModalClose}
                    onPlayAgain={handlePlayAgain}
                    onHome={handleGoHome}
                    gameTitle="Porsche Race"
                />
            {/if}

            {#if showFeedback}
                <GameFeedbackModal
                    show={true}
                    onGamePause={handleGamePause}
                    onGameResume={handleGameResume}
                    onClose={handleFeedbackClose}
                />
            {/if}

            <!-- Touch controls -->
            {#if isGameStarted && !isGameOver}
                <button
                    class="absolute left-0 inset-y-0 w-[50%] flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity"
                    on:click={() => handleSteeringClick('left')}
                >
                    <div class="w-44 h-44 rounded-full bg-white/30 backdrop-blur-lg flex items-center justify-center">
                        <Fa icon={faArrowLeft} class="text-4xl text-orange" />
                    </div>
                </button>
                <button
                    class="absolute right-0 inset-y-0 w-[50%] flex items-center justify-center opacity-50 hover:opacity-100 transition-opacity"
                    on:click={() => handleSteeringClick('right')}
                >
                    <div class="w-44 h-44 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center">
                        <Fa icon={faArrowRight} class="text-4xl text-orange" />
                    </div>
                </button>
            {/if}
        </div>
    </div>
</div>

<style>
    canvas {
        image-rendering: pixelated;
    }
</style>

================
File: src/routes/games/trivia/+page.svelte
================
<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { gameStore } from '$lib/stores/gameStore';
  import { score as totalScore, addPoints } from "$lib/stores/score";
  import { Button } from "$lib/components/ui/button";
  import { Fa } from 'svelte-fa';
  import { 
      faArrowLeft, 
      faClock, 
      faCoins, 
      faCheck,
      faXmark,
      faFire,
      faQuestionCircle
  } from '@fortawesome/free-solid-svg-icons';
  import { fade, scale } from 'svelte/transition';
  import confetti from 'canvas-confetti';
  import VictoryModal from "$lib/components/games/VictoryModal.svelte";
  import { feedbackStore } from '$lib/stores/feedbackStore';
  import GameFeedbackModal from "$lib/components/GameFeedbackModal.svelte";

  let username = '';
  let currentQuestion = 0;
  let score = 0;
  let timer = 0;
  let timerInterval;
  let showModal = false;
  let showFeedback = false;
  let isComplete = false;
  let selectedAnswer = null;
  let isAnswerCorrect = null;
  let answeredQuestions = 0;
  let correctAnswers = 0;
  let currentStreak = 0;
  let maxStreak = 0;
  let gameStarted = false;
  let isPaused = false;

  const allQuestions = [
      {
          question: "Cili prodhues makinash ka 4 unaza të ndërlidhura në logon e tij?",
          answers: ["Audi", "BMW", "Mercedes-Benz", "Volkswagen"],
          correct: 0
      },
      {
          question: "Çfarë do të thotë 'BMW'?",
          answers: ["British Motor Works", "Bayerische Motoren Werke", "Berlin Motor Works", "Bremen Motor Works"],
          correct: 1
      },
      {
          question: "Cili është modeli më i shitur i Mercedes-Benz në Shqipëri?",
          answers: ["C-Class", "E-Class", "A-Class", "S-Class"],
          correct: 1
      },
      {
          question: "Nga cili vend është Ferrari?",
          answers: ["Gjermani", "Francë", "Itali", "Spanjë"],
          correct: 2
      },
      {
          question: "Cili është slogani i BMW?",
          answers: ["Mercedes ose Asgjë", "Makina Përfundimtare e Drejtimit", "Teknika e Përparuar", "Kënaqësia e Drejtimit"],
          correct: 3
      },
      {
          question: "Çfarë kafshe shfaqet në logon e Lamborghini?",
          answers: ["Kalë", "Luan", "Dem", "Jaguar"],
          correct: 2
      },
      {
          question: "Cila kompani automobilistike zotëron Bugatti?",
          answers: ["Grupi Volkswagen", "Grupi BMW", "Grupi Mercedes-Benz", "Stellantis"],
          correct: 0
      },
      {
          question: "Cili është prodhuesi më i madh i pjesëve të këmbimit në Shqipëri?",
          answers: ["AMS", "Vibtex", "Autoparts Albania", "Euro Parts"],
          correct: 0
      },
      {
          question: "Cila markë makinash është më e popullarizuar në Shqipëri?",
          answers: ["Volkswagen", "Mercedes-Benz", "BMW", "Audi"],
          correct: 1
      },
      {
          question: "Çfarë do të thotë 'AMG' në Mercedes-AMG?",
          answers: ["Auto Motor Group", "Aufrecht, Melcher, Großaspach", "Advanced Motor Gear", "Active Motion Guide"],
          correct: 1
      },
      {
          question: "Cili është porti kryesor në Shqipëri për importin e makinave?",
          answers: ["Porti i Durrësit", "Porti i Vlorës", "Porti i Shëngjinit", "Porti i Sarandës"],
          correct: 0
      },
      {
          question: "Cili është modeli më i shitur i makinave në historinë botërore?",
          answers: ["Ford Model T", "Volkswagen Beetle", "Toyota Corolla", "Honda Civic"],
          correct: 2
      },
      {
          question: "Në cilin vit u hap rruga e parë e asfaltuar në Shqipëri?",
          answers: ["1920", "1925", "1930", "1935"],
          correct: 2
      },
      {
          question: "Cila ishte makina e parë zyrtare e qeverisë shqiptare pas viteve '90?",
          answers: ["Mercedes-Benz S-Class", "BMW Seria 7", "Audi A8", "Volkswagen Phaeton"],
          correct: 0
      },
      {
          question: "Cili prodhues automobilistik prodhon 'Skyline GT-R'?",
          answers: ["Toyota", "Honda", "Nissan", "Mazda"],
          correct: 2
      },
      {
          question: "Në cilin vit u hoqën kufizimet për importin e makinave në Shqipëri?",
          answers: ["1991", "1993", "1995", "1997"],
          correct: 1
      },
      {
          question: "Cila kompani krijoi makinën e parë hibride në prodhim masiv?",
          answers: ["Toyota", "Honda", "Ford", "Chevrolet"],
          correct: 0
      },
      {
          question: "Cili është qyteti me numrin më të madh të makinave në Shqipëri?",
          answers: ["Durrësi", "Tirana", "Vlora", "Shkodra"],
          correct: 1
      },
      {
          question: "Cila kompani prodhon 'Land Cruiser'?",
          answers: ["Land Rover", "Toyota", "Jeep", "Mitsubishi"],
          correct: 1
      },
      {
          question: "Cila është mosha mesatare e makinave në Shqipëri?",
          answers: ["8 vjet", "12 vjet", "15 vjet", "20 vjet"],
          correct: 2
      }
  ];

  let questions = [];
  const QUESTIONS_PER_ROUND = 10;

  // Scoring Constants
  const POINTS_PER_CORRECT = 10; // 10 points per correct answer (max 40 for 4 questions)
  const TIME_BONUS_MAX = 20;
  const TIME_BONUS_PER_SECOND = 1; // 1 point per second under par
  const STREAK_BONUS = 30; // Perfect streak bonus
  const PAR_TIME = 120; // 2 minutes par time

  function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
  }

  function getRandomQuestions() {
      // Create a copy of the questions array and shuffle it
      const shuffled = shuffleArray([...allQuestions]);
      // Take the first QUESTIONS_PER_ROUND questions
      return shuffled.slice(0, QUESTIONS_PER_ROUND);
  }

  function startGame() {
      gameStarted = true;
      timer = 0;
      score = 0;
      currentQuestion = 0;
      answeredQuestions = 0;
      correctAnswers = 0;
      isComplete = false;
      selectedAnswer = null;
      isAnswerCorrect = null;
      currentStreak = 0;
      maxStreak = 0;
      
      // Get new random questions for this round
      questions = getRandomQuestions();

      if (timerInterval) clearInterval(timerInterval);
      timerInterval = setInterval(() => {
          if (!isComplete && !isPaused) timer++;
      }, 1000);
  }

  function handleAnswer(answerIndex) {
      if (selectedAnswer !== null) return;
      
      selectedAnswer = answerIndex;
      isAnswerCorrect = answerIndex === questions[currentQuestion].correct;
      answeredQuestions++;
      
      
      if (isAnswerCorrect) {
          correctAnswers++;
          currentStreak++;
          maxStreak = Math.max(maxStreak, currentStreak);
          score += POINTS_PER_CORRECT;
      } else {
          currentStreak = 0;
      }

      setTimeout(() => {
          if (currentQuestion < questions.length - 1) {
              currentQuestion++;
              selectedAnswer = null;
              isAnswerCorrect = null;
          } else {
              endGame();
          }
      }, 1000);
  }

  function calculateTimeBonus() {
      if (timer >= PAR_TIME) return 0;
      const bonus = Math.ceil((PAR_TIME - timer) * TIME_BONUS_PER_SECOND);
      const finalBonus = Math.min(bonus, TIME_BONUS_MAX);
      return finalBonus;
  }

  function calculateStreakBonus() {
      if (maxStreak === allQuestions.length) {
          return STREAK_BONUS;
      }
      const bonus = Math.ceil(STREAK_BONUS * (maxStreak / allQuestions.length));
      return bonus;
  }

  function endGame() {
      clearInterval(timerInterval);
      const baseScore = correctAnswers * POINTS_PER_CORRECT;
      const timeBonus = calculateTimeBonus();
      const streakBonus = calculateStreakBonus();
      
      const finalScore = baseScore + timeBonus + streakBonus;
      
      // Add to total score and increment round
      addPoints(finalScore);
      gameStore.addScore('trivia', finalScore);
      
      // Show feedback on first game completion
      if ($feedbackStore.currentRound === 0) {
          setTimeout(() => {
              handleGamePause();
              showFeedback = true;
              // Reset game state for feedback
              gameStarted = false;
              isComplete = false;
              score = 0;
              timer = 0;
              currentQuestion = 0;
              answeredQuestions = 0;
              correctAnswers = 0;
              currentStreak = 0;
              maxStreak = 0;
              selectedAnswer = null;
              isAnswerCorrect = null;
              if (timerInterval) clearInterval(timerInterval);
          }, 2000);
      }
      
      feedbackStore.incrementRound();
      
      isComplete = true;
      showModal = true;
      fireConfetti();
  }

  function fireConfetti() {
        const count = 200;
        const defaults = {
            origin: { y: 0.7 }
        };

        function fire(particleRatio, opts) {
            confetti({
                ...defaults,
                ...opts,
                particleCount: Math.floor(count * particleRatio),
                scalar: 1.2
            });
        }

        fire(0.25, {
            spread: 26,
            startVelocity: 55,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.2, {
            spread: 60,
            colors: ['#000000'] // Black
        });
        fire(0.35, {
            spread: 100,
            decay: 0.91,
            scalar: 0.8,
            colors: ['#FF6B00', '#000000'] // Porsche colors
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 25,
            decay: 0.92,
            scalar: 1.2,
            colors: ['#FF6B00'] // Porsche orange
        });
        fire(0.1, {
            spread: 120,
            startVelocity: 45,
            colors: ['#000000'] // Black
        });
    }

  function handleVictoryModalClose() {
      showModal = false;
      startGame();
  }

  function handlePlayAgain() {
      showModal = false;
      startGame();
      
      // If it's an odd round and feedback hasn't been shown, show it after delay
      if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
          setTimeout(() => {
              handleGamePause();
              showFeedback = true;
              // Reset game state when feedback shows
              gameStarted = false;
              isComplete = false;
              score = 0;
              timer = 0;
              currentQuestion = 0;
              answeredQuestions = 0;
              correctAnswers = 0;
              currentStreak = 0;
              maxStreak = 0;
              selectedAnswer = null;
              isAnswerCorrect = null;
              if (timerInterval) clearInterval(timerInterval);
          }, 2000);
      }
  }

  function handleGoHome() {
      showModal = false;
      goto('/');
  }

  function handleGamePause() {
      isPaused = true;
      if (timerInterval) clearInterval(timerInterval);
  }

  function handleGameResume() {
      isPaused = false;
      if (!timerInterval && gameStarted && !isComplete) {
          timerInterval = setInterval(() => {
              if (!isPaused) timer++;
          }, 1000);
      }
  }

  function handleFeedbackClose() {
      showFeedback = false;
      handleGameResume();
  }

  onMount(() => {
      username = localStorage.getItem('username');
      if (!username) {
          goto('/login');
          return;
      }
      console.log('👤 Username loaded:', username);
      gameStore.setUsername(username);

      
      if ($feedbackStore.currentRound % 2 === 1 && !feedbackStore.isFeedbackShown($feedbackStore.currentRound)) {
          handleGamePause();
          showFeedback = true;
          // Reset game state for feedback
          gameStarted = false;
          isComplete = false;
          score = 0;
          timer = 0;
          currentQuestion = 0;
          answeredQuestions = 0;
          correctAnswers = 0;
          currentStreak = 0;
          maxStreak = 0;
          selectedAnswer = null;
          isAnswerCorrect = null;
          if (timerInterval) clearInterval(timerInterval);
      }
  });
</script>

<div class="h-full flex flex-col">
  <header class="flex justify-between items-center h-14 px-6 mb-4 bg-gradient-to-r bg-orange-600/10 backdrop-blur-sm border-b border-orange-500/20 rounded-lg">
      <div class="flex items-center gap-6">
          <a href="/" class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-orange-500/20 transition-colors">
              <Fa icon={faArrowLeft} class="text-lg" />
          </a>
          <h1 class="text-xl font-bold tracking-tight">Quiz për makinat</h1>
      </div>
      
      <div class="flex items-center gap-6">
          {#if gameStarted}
              <div class="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 rounded-lg">
                  <Fa icon={faCheck} class="text-orange-400" />
                  <span class="font-medium">{correctAnswers}/{questions.length}</span>
              </div>
              <div class="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 rounded-lg">
                  <Fa icon={faClock} class="text-orange-400" />
                  <span class="font-medium">{Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')}</span>
              </div>
              <div class="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 rounded-lg">
                  <Fa icon={faCoins} class="text-orange-400" />
                  <span class="font-medium">{score}</span>
              </div>
          {/if}
      </div>
  </header>

  <div class="flex-1 flex flex-col items-center justify-center p-6">
      {#if !gameStarted}
          <div class="text-center" in:fade>
              <div class="flex justify-center mb-8">
                  <div class="w-16 h-16 flex items-center justify-center rounded-full bg-orange-500/10">
                      <Fa icon={faQuestionCircle} class="text-3xl text-orange-400" />
                  </div>
              </div>
              <h2 class="text-2xl font-bold mb-4">Testoni njohuritë tuaja për makinat</h2>
              <p class="text-slate-400 mb-8">Përgjigjuni pyetjeve. Sa më shpejt përgjigjeni, aq më shumë pikë fitoni!</p>
              <Button on:click={startGame}>Fillo quizin</Button>
          </div>
      {:else}
          <div class="w-full max-w-3xl" in:fade>
              <div class="flex justify-between items-center mb-8">
                  <div class="text-sm font-medium text-slate-400">
                      Pyetja {currentQuestion + 1} nga {questions.length}
                  </div>
                  <div class="h-2 flex-1 mx-4 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                      <div 
                          class="h-full bg-orange-500 transition-all duration-300" 
                          style="width: {((currentQuestion + 1) / questions.length) * 100}%"
                      ></div>
                  </div>
              </div>

              <div class=" p-6 rounded-xl mb-8">
                  <h3 class="text-xl font-medium mb-8">{questions[currentQuestion].question}</h3>
                  
                  <div class="grid grid-cols-1 gap-4">
                      {#each questions[currentQuestion].answers as answer, i}
                          <button
                              class="p-4 text-left rounded-lg transition-all duration-200
                                  {selectedAnswer === null ? 'bg-orange-500/10 hover:bg-orange-500/20' : 
                                      selectedAnswer === i ? 
                                          (i === questions[currentQuestion].correct ? 'bg-green-500/20 border-green-500' : 'bg-red-500/20 border-red-500') :
                                          i === questions[currentQuestion].correct ? 'bg-green-500/20 border-green-500' : 'bg-orange-500/5'
                                  }
                                  {selectedAnswer !== null ? 'cursor-default' : 'cursor-pointer'}"
                              on:click={() => handleAnswer(i)}
                              disabled={selectedAnswer !== null}
                          >
                              <div class="flex items-center gap-4">
                                  {#if selectedAnswer !== null}
                                      {#if i === questions[currentQuestion].correct}
                                          <Fa icon={faCheck} class="text-green-500" />
                                      {:else if selectedAnswer === i}
                                          <Fa icon={faXmark} class="text-red-500" />
                                      {/if}
                                  {/if}
                                  <span class="flex-1">{answer}</span>
                              </div>
                          </button>
                      {/each}
                  </div>
              </div>
          </div>
      {/if}
  </div>
</div>

{#if showFeedback}
    <div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" transition:fade>
        <GameFeedbackModal
            show={true}
            onGamePause={handleGamePause}
            onGameResume={handleGameResume}
            onClose={handleFeedbackClose}
        />
    </div>
{/if}

{#if showModal}
    <div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" transition:fade>
        <VictoryModal
            show={showModal}
            stats={[
                {
                    icon: faCheck,
                    label: "Përgjigje të sakta",
                    value: `${correctAnswers}/${questions.length}`,
                    bonus: `${correctAnswers * POINTS_PER_CORRECT} pikë`
                },
                {
                    icon: faClock,
                    label: "Koha",
                    value: `${Math.floor(timer / 60)}:${(timer % 60).toString().padStart(2, '0')}`,
                    bonus: `+${calculateTimeBonus()} pikë`
                },
                {
                    icon: faFire,
                    label: "Saktësi e vazhdueshme",
                    value: `${maxStreak}`,
                    bonus: `+${calculateStreakBonus()} pikë`
                }
            ]}
            totalScore={score + calculateTimeBonus() + calculateStreakBonus()}
            onClose={handleVictoryModalClose}
            onPlayAgain={handlePlayAgain}
            onHome={handleGoHome}
            gameTitle="Car Trivia"
        />
    </div>
{/if}

<style>
  button {
      border: 2px solid transparent;
  }
  
  button:disabled {
      opacity: 1;
  }
</style>

================
File: src/routes/leaderboard/+page.svelte
================
<script>
    import { onMount } from 'svelte';
    import { fade, fly } from 'svelte/transition';
    import Fa from 'svelte-fa';
    import { faTrophy, faMedal, faStar, faGamepad, faCalendarDays } from '@fortawesome/free-solid-svg-icons';
    import { Button } from "$lib/components/ui/button";

    let leaderboardData = [];
    let timeFilter = 'all'; // 'all', 'today', 'week', 'month'
    let currentUsername = '';

    onMount(() => {
        currentUsername = localStorage.getItem('username');
        loadLeaderboard();
    });

    function loadLeaderboard() {
        const allData = [];
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith('gameData_')) {
                const username = key.replace('gameData_', '');
                const data = JSON.parse(localStorage.getItem(key));
                allData.push({
                    username,
                    totalScore: data.totalScore || 0,
                    gamesPlayed: data.stats?.gamesPlayed || 0,
                    lastPlayed: new Date(data.stats?.lastPlayed || Date.now())
                });
            }
        }

        const now = new Date();
        leaderboardData = allData
            .filter(data => {
                if (timeFilter === 'all') return true;
                const timeDiff = now - data.lastPlayed;
                const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
                
                switch(timeFilter) {
                    case 'today':
                        return daysDiff < 1;
                    case 'week':
                        return daysDiff < 7;
                    case 'month':
                        return daysDiff < 30;
                    default:
                        return true;
                }
            })
            .sort((a, b) => b.totalScore - a.totalScore);
    }

    $: {
        if (timeFilter) loadLeaderboard();
    }

    function getMedalIcon(index) {
        switch(index) {
            case 0: return '🥇';
            case 1: return '🥈';
            case 2: return '🥉';
            default: return '';
        }
    }
</script>

<div class="min-h-screen bg-background p-4 md:p-8">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-foreground mb-3">Tabela e Pikëve</h1>
            <p class="text-gray-400">Shikoni lojtarët më të mirë dhe arritjet e tyre</p>
        </div>

        <!-- Time Filter -->
        <div class="bg-card/50 backdrop-blur-lg rounded-xl p-4 mb-6">
            <div class="flex flex-wrap gap-2">
                <Button
                    variant={timeFilter === 'all' ? 'outline' : 'primary'}
                    class={timeFilter === 'all' ? 'bg-orange-500 hover:bg-orange-600' : ''}
                    on:click={() => timeFilter = 'all'}
                >
                    Gjithë koha
                </Button>
                <Button
                    variant={timeFilter === 'today' ? 'outline' : 'primary'}
                    class={timeFilter === 'today' ? 'bg-orange-500 hover:bg-orange-600' : ''}
                    on:click={() => timeFilter = 'today'}
                >
                    Sot
                </Button>
                <Button
                    variant={timeFilter === 'week' ? 'outline' : 'primary'}
                    class={timeFilter === 'week' ? 'bg-orange-500 hover:bg-orange-600' : ''}
                    on:click={() => timeFilter = 'week'}
                >
                    Java
                </Button>
                <Button
                    variant={timeFilter === 'month' ? 'outline' : 'primary'}
                    class={timeFilter === 'month' ? 'bg-orange-500 hover:bg-orange-600' : ''}
                    on:click={() => timeFilter = 'month'}
                >
                    Muaji
                </Button>
            </div>
        </div>

        <!-- Leaderboard -->
        <div class="bg-card/50 backdrop-blur-lg rounded-xl overflow-hidden">
            {#if leaderboardData.length === 0}
                <div class="p-8 text-center text-gray-400">
                    Nuk ka të dhëna për këtë periudhë
                </div>
            {:else}
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-gray-700">
                                <th class="px-6 py-4 text-left text-sm font-medium text-foreground">Pozicioni</th>
                                <th class="px-6 py-4 text-left text-sm font-medium text-foreground">Lojtari</th>
                                <th class="px-6 py-4 text-center text-sm font-medium text-foreground">Pikët</th>
                                <th class="px-6 py-4 text-center text-sm font-medium text-foreground">Lojëra</th>
                            </tr>
                        </thead>
                        <tbody>
                            {#each leaderboardData as player, index}
                                <tr 
                                    class="border-b border-orange-500/20 {player.username === currentUsername ? 'bg-orange-500/10' : ''} hover:bg-muted-background/20 transition-colors"
                                    in:fade={{duration: 200, delay: index * 50}}
                                >
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-2">
                                            <span class="text-2xl">{getMedalIcon(index)}</span>
                                            <span class="font-medium text-foreground">#{index + 1}</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span class="font-medium text-foreground">{player.username}</span>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="font-medium text-orange-500">{player.totalScore.toLocaleString()}</span>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="text-foreground">{player.gamesPlayed}</span>
                                    </td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            {/if}
        </div>
    </div>
</div>

================
File: src/routes/login/+page.svelte
================
<script>
    import { goto } from '$app/navigation';
    import { onMount } from 'svelte';
    import { fade } from 'svelte/transition';
    import Fa from 'svelte-fa';
    import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
    import { Button } from "$lib/components/ui/button";
    import { gameStore } from '$lib/stores/gameStore';
    import { session } from '$lib/stores/sessionStore';
    
    let username = '';
    let errorMessage = '';
    let isLoading = false;

    function storeUsername(username) {
        localStorage.setItem('username', username);
        gameStore.setUsername(username);
    }

    async function handleLogin() {
        isLoading = true;
        errorMessage = '';

        if (username.trim().length < 3) {
            errorMessage = 'Emri duhet të ketë të paktën 3 karaktere';
            isLoading = false;
            return;
        }

        try {
            session.login(username);
            storeUsername(username);
            goto('/');
        } catch (error) {
            errorMessage = 'Ndodhi një gabim. Ju lutemi provoni përsëri.';
        } finally {
            isLoading = false;
        }
    }

    onMount(() => {
        const savedUsername = localStorage.getItem('username');
        if (savedUsername) {
            goto('/');
        }
    });
</script>

<div class="min-h-screen bg-[#111111] flex flex-col" in:fade>
    <!-- Logo at top -->
    <div class="w-full pt-16">
        <img 
            src="/images/logos/porsche-logo.png" 
            alt="Porsche Albania" 
            class="h-12 mx-auto"
        />
    </div>

    <!-- Main content centered -->
    <div class="flex-1 flex items-center justify-center px-4">
        <div class="w-full max-w-xl space-y-32">
            <div class="text-center">
                <h1 class="text-4xl font-medium text-white tracking-wide">Si quheni?</h1>
            </div>

            <form 
                on:submit|preventDefault={handleLogin} 
                class="space-y-6"
            >
                <div class="space-y-4">
                    <div class="flex flex-col items-center gap-8">
                        <input
                            type="text"
                            bind:value={username}
                            placeholder="Emri i përdoruesit"
                            class="w-full max-w-lg h-12 px-0 bg-transparent border-0 border-b border-neutral-700 text-white placeholder-neutral-500 focus:outline-none focus:border-neutral-300 transition-all text-lg text-center font-light tracking-wider caret-white"
                            style="--tw-ring-color: transparent;"
                        />
                        <Button 
                            type="submit" 
                            variant="ghost"
                            size="sm"
                            class="h-10 px-6 rounded bg-white hover:bg-neutral-100 text-sm text-black font-light tracking-wide flex items-center gap-2"
                            disabled={isLoading}
                        >
                            {#if isLoading}
                                Duke u kyçur...
                            {:else}
                                Dakord
                                <Fa icon={faRightToBracket} />
                            {/if}
                        </Button>
                    </div>
                    {#if errorMessage}
                        <p class="text-red-500 text-sm text-center font-light">{errorMessage}</p>
                    {/if}
                </div>
            </form>
        </div>
    </div>
</div>

================
File: svelte.config.js
================
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

================
File: tailwind.config.js
================
/** @type {import('tailwindcss').Config} */
export default {
	darkMode: ["class"],
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
	  container: {
		center: true,
		padding: "2rem",
		screens: {
		  "2xl": "1400px",
		},
	  },
	  extend: {
		colors: {
		  border: "hsl(var(--border))",
		  input: "hsl(var(--input))",
		  ring: "hsl(var(--ring))",
		  background: "hsl(var(--background))",
		  foreground: "hsl(var(--foreground))",
		  primary: {
			DEFAULT: "hsl(var(--primary))",
			foreground: "hsl(var(--primary-foreground))",
		  },
		  secondary: {
			DEFAULT: "hsl(var(--secondary))",
			foreground: "hsl(var(--secondary-foreground))",
		  },
		  destructive: {
			DEFAULT: "hsl(var(--destructive))",
			foreground: "hsl(var(--destructive-foreground))",
		  },
		  muted: {
			DEFAULT: "hsl(var(--muted))",
			foreground: "hsl(var(--muted-foreground))",
		  },
		  accent: {
			DEFAULT: "hsl(var(--accent))",
			foreground: "hsl(var(--accent-foreground))",
		  },
		  popover: {
			DEFAULT: "hsl(var(--popover))",
			foreground: "hsl(var(--popover-foreground))",
		  },
		  card: {
			DEFAULT: "hsl(var(--card))",
			foreground: "hsl(var(--card-foreground))",
		  },
		},
		borderRadius: {
		  lg: "var(--radius)",
		  md: "calc(var(--radius) - 2px)",
		  sm: "calc(var(--radius) - 4px)",
		},
	  },
	},
	plugins: [
	  require('@tailwindcss/typography'),
	  require('@tailwindcss/forms'),
	  require('@tailwindcss/container-queries'),
	],
  }

================
File: vite.config.js
================
import { paraglide } from '@inlang/paraglide-sveltekit/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit(),
		paraglide({
			project: './project.inlang',
			outdir: './src/lib/paraglide'
		})
	]
});
